* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        

        :root {
            --vwBase: calc(100vw / 1920);
        }


        html {
            font-size: calc(16 * var(--vwBase));
        }
body {
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            color: #333;
            line-height: 1.6;
            overflow: hidden;
        }

        html, body {
            overflow: hidden;
            height: 100%;
        }

        /* fullPage.js 섹션 통일 */
        .section {
            min-height: 100vh;
            position: relative;
            padding: 0;
            overflow: hidden;
        }

        /* 헤더 & 네비게이션 */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            border-bottom: calc(0.5 * var(--vwBase)) solid #505050;
            background: rgba(80, 80, 80, 0.80);
            backdrop-filter: blur(calc(8 * var(--vwBase)));
            -webkit-backdrop-filter: blur(calc(8 * var(--vwBase)));
            z-index: 1000;
        }

        nav {
            display: flex;
            width: calc(1920 * var(--vwBase));
            max-width: 100%;
            margin: 0 auto;
            padding: 0 max(26px, calc(50 * var(--vwBase)));
            height: max(56px, calc(80 * var(--vwBase)));  /* 헤더 높이 최소 56px */
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            cursor: pointer;
            transition: opacity 0.3s;
        }

        .logo:hover {
            opacity: 0.8;
        }

        .logo-icon {
            width: max(32px, calc(50 * var(--vwBase)));
            height: max(32px, calc(50 * var(--vwBase)));
            object-fit: contain;
        }

        .logo-text h1 {
            font-size: max(14px, 1.1rem);
            font-weight: 700;
            color: white;
        }

        .logo-text p {
            font-size: max(10px, 0.75rem);
            color: rgba(255, 255, 255, 0.7);
            letter-spacing: calc(0.5 * var(--vwBase));
        }

        /* 네비게이션 탭 (중앙) */
        .nav-tabs {
            display: flex;
            gap: max(32px, calc(60 * var(--vwBase)));  /* 간격 최소 32px */
            list-style: none;
            align-items: center;
            margin: 0;
            padding: 0;
        }

        .nav-tabs li {
            position: relative;
            color: #FFF;
            text-align: center;
            font-family: 'Pretendard', sans-serif;
            font-size: max(12px, 1rem);
            font-style: normal;
            font-weight: 300;
            line-height: normal;
            letter-spacing: calc(-0.6 * var(--vwBase));
            cursor: pointer;
            padding: 0;
            height: max(56px, calc(80 * var(--vwBase)));
            display: flex;
            align-items: center;
            justify-content: center;  /* 텍스트 중앙 배치 */
            transition: color 0.3s;
            min-width: max(64px, calc(120 * var(--vwBase)));  /* 최소 너비 64px */
            flex-shrink: 0;  /* 줄어들지 않도록 */
        }

        .nav-tabs li:hover {
            color: #D4A574;
        }

        /* 활성화 상태 */
        .nav-tabs li.active {
            color: #D4A574;
            font-weight: 500;
        }

        /* 하단 밑줄 - 헤더 하단에 맞춤 */
        .nav-tabs li.active::after {
            content: '';
            position: absolute;
            bottom: 0;  /* 탭 하단 = 헤더 하단 */
            left: 0;
            right: 0;
            height: calc(2 * var(--vwBase));
            background: #D4A574;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                width: 0;
                left: 50%;
            }
            to {
                width: 100%;
                left: 0;
            }
        }

        /* 로그인 버튼 (우측) */
        .nav-actions {
            display: flex;
            align-items: center;
        }

        .nav-actions a {
            text-decoration: none;
            color: #FFF;
            font-family: 'Pretendard', sans-serif;
            font-size: 1rem;
            font-weight: 300;
            letter-spacing: calc(-0.6 * var(--vwBase));
            transition: color 0.3s;
        }

        .nav-actions a:hover {
            color: #D4A574;
        }        

        /* 토스트 알림 */
        .toast-notification {
            position: fixed;
            top: calc(100 * var(--vwBase));
            left: 50%;
            transform: translateX(-50%) translateY(calc(-100 * var(--vwBase)));
            background: rgba(0, 0, 0, 0.85);
            color: white;
            padding: calc(16 * var(--vwBase)) calc(32 * var(--vwBase));
            border-radius: calc(8 * var(--vwBase));
            font-family: 'Pretendard', sans-serif;
            font-size: 1rem;
            font-weight: 500;
            z-index: 10000;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            box-shadow: 0 calc(20 * var(--vwBase)) calc(40 * var(--vwBase)) rgba(0, 0, 0, 0.3);
            white-space: nowrap;
        }

        .toast-notification.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* 컨테이너 */
        .container {
            width: 100%;
            max-width: calc(1400 * var(--vwBase));
            margin: 0 auto;
        }

        /* 섹션 1: 히어로 */
        #hero {
            position: relative;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            background: #000;
            overflow: hidden;
        }

        /* 배경 영상 */
        #hero video {
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: auto;
            height: 95%;
            object-fit: cover;
            z-index: 0;
        }

        /* 음소거 토글 버튼 */
        .mute-toggle {
            position: absolute;
            bottom: calc(100 * var(--vwBase));
            right: calc(40 * var(--vwBase));
            width: max(40px, calc(50 * var(--vwBase)));
            height: max(40px, calc(50 * var(--vwBase)));
            background: rgba(0, 0, 0, 0.45);
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 3;
            transition: background 0.3s ease;
        }

        .mute-toggle:hover {
            background: rgba(0, 0, 0, 0.65);
        }

        .mute-toggle .mute-icon {
            width: max(20px, calc(24 * var(--vwBase)));
            height: max(20px, calc(24 * var(--vwBase)));
        }

        /* 기본: 음소거 상태 → X 아이콘 보이고 음파 아이콘 숨김 */
        .mute-toggle .mute-icon--on {
            display: none;
        }

        .mute-toggle .mute-icon--off {
            display: block;
        }

        /* 소리 켜진 상태 → 음파 아이콘 보이고 X 아이콘 숨김 */
        .mute-toggle.unmuted .mute-icon--on {
            display: block;
        }

        .mute-toggle.unmuted .mute-icon--off {
            display: none;
        }

        /* 스크롤 유도 화살표 */
        .scroll-arrow {
            position: absolute;
            bottom: calc(40 * var(--vwBase));
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(4 * var(--vwBase));
            z-index: 2;
            animation: scrollBounce 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            transition: opacity 0.4s ease;
            cursor: pointer;
        }

        .scroll-arrow svg {
            width: calc(28 * var(--vwBase));
            min-width: 20px;
            height: auto;
            opacity: 0.7;
        }

        .scroll-arrow svg:last-child {
            opacity: 0.35;
        }

        @keyframes scrollBounce {
            0%, 100% {
                transform: translateX(-50%) translateY(0) scale(1);
                opacity: 0.7;
            }
            50% {
                transform: translateX(-50%) translateY(calc(12 * var(--vwBase))) scale(1.1);
                opacity: 1;
            }
        }

        /* 섹션 2: 이상형 찾기 */
        #ideal-type {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4)), 
                        url('../assets/section2-ideal-type/ideal-type-bg.png');
            background-size: cover;
            background-position: center;
        }

        .ideal-content {
            text-align: center;
            max-width: max(550px, calc(1100 * var(--vwBase)));
            width: 100%;
        }

        /* 시작 화면 - 컨테이너 없이 중앙 정렬 */
        .quiz-start {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: max(30px, calc(60 * var(--vwBase)));
            width: 100%;
            min-height: 100vh;
            padding: 2rem;
        }

        /* 상단 영역 */
        .start-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: max(10px, calc(20 * var(--vwBase)));
        }

        .start-pretitle {
            color: #FFF;
            text-align: center;
            font-family: 'Pretendard', sans-serif;
            font-size: max(20px, 2rem);
            font-weight: 500;
            line-height: normal;
            letter-spacing: calc(-0.8 * var(--vwBase));
            margin: 0;
        }

        .start-title {
            color: #FFF;
            text-align: center;
            font-family: 'Pretendard', sans-serif;
            font-size: max(40px, 3rem);
            font-weight: 700;
            line-height: normal;
            letter-spacing: calc(-1.2 * var(--vwBase));
            margin: 0;
        }

        /* 중앙 영역 */
        .start-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: max(15px, calc(30 * var(--vwBase)));
            max-width: max(400px, calc(800 * var(--vwBase)));
        }

        .start-desc {
            color: #FFF;
            text-align: center;
            font-family: 'Pretendard', sans-serif;
            font-size: max(20px, 1.5rem);
            font-weight: 500;
            line-height: max(22px, calc(36 * var(--vwBase))); /* 150% */
            letter-spacing: calc(-0.6 * var(--vwBase));
            margin: 0;
        }

        .start-label {
            color: #aaaaaac2;
            text-align: center;
            font-family: 'Pretendard', sans-serif;
            font-size: max(16px, 1.875rem);
            font-weight: 400;
            line-height: normal;
            letter-spacing: calc(-0.75 * var(--vwBase));
            margin: 0;
        }

        /* 하단 영역 */
        .start-footer {
            display: flex;
            justify-content: center;
        }

        /* 시작하기 버튼 - 블루 그라디언트 */
        .start-button {
            display: flex;
            height: max(60px, calc(86 * var(--vwBase)));
            padding: max(20px, calc(10 * var(--vwBase))) max(30px, calc(60 * var(--vwBase)));
            justify-content: center;
            align-items: center;
            gap: max(5px, calc(10 * var(--vwBase)));
            border-radius: max(80px, calc(50 * var(--vwBase)));
            background: linear-gradient(91deg, rgba(176, 200, 236, 0.50) 0.03%, rgba(120, 219, 255, 0.50) 99.97%);
            border: none;
            color: #FFF;
            font-family: 'Pretendard', sans-serif;
            font-size: max(30px, 1.5rem);
            font-weight: 500;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.3s ease;
        }

        .start-button:hover {
            background: linear-gradient(91deg, rgba(176, 200, 236, 0.70) 0.03%, rgba(120, 219, 255, 0.70) 99.97%);
            transform: translateY(calc(-2 * var(--vwBase)));
        }

        /* 테스트 진행 컨테이너 */
        .quiz-card {
            --base-width: max(600px, calc(650 * var(--vwBase)));
            display: flex;
            padding: max(30px, calc(60 * var(--vwBase))) max(40px, calc(80 * var(--vwBase))) max(40px, calc(80 * var(--vwBase)));
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            width: calc(80vw - max(80px, calc(160 * var(--vwBase))));
            max-width: max(520px, calc(1040 * var(--vwBase)));
            height: 70vh;
            min-height: max(400px, calc(600 * var(--vwBase)));
            max-height: max(500px, calc(750 * var(--vwBase)));
            border-radius: max(26px, calc(52 * var(--vwBase)));
            background: rgba(255, 255, 255, 0.40);
            backdrop-filter: blur(max(5px, calc(10 * var(--vwBase))));
            -webkit-backdrop-filter: blur(max(5px, calc(10 * var(--vwBase))));
            position: relative;
            box-shadow: 0 max(16px, calc(32 * var(--vwBase))) max(32px, calc(64 * var(--vwBase))) rgba(0, 0, 0, 0.1);
        }


        .progress-bar-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(10 * var(--vwBase));
            margin-top: calc(80 * var(--vwBase));
            margin-bottom: calc(50 * var(--vwBase));
        }

        .progress-bar {
            width: max(600px, calc(650 * var(--vwBase)));
            max-width: 90%;
            height: max(6px, calc(8 * var(--vwBase)));
            background: rgba(255, 255, 255, 0.50);
            border-radius: max(3px, calc(6 * var(--vwBase)));
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: #505050;
            width: 0%;
            border-radius: max(3px, calc(6 * var(--vwBase)));
            transition: width 0.5s ease;
        }

        .quiz-question {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
        }

        .question-number {
            color: #313131;
            text-align: center;
            font-family: 'Pretendard', sans-serif;
            font-size: max(20px, 1.125rem);
            font-weight: 400;
            margin: 0 auto max(20px, calc(40 * var(--vwBase))) auto;
            width: var(--base-width);
            max-width: 100%;
        }

        .quiz-question h4 {
            color: #1b1b1b;
            text-align: center;
            font-family: 'Pretendard', sans-serif;
            font-size: max(28px, 2.25rem);
            font-weight: 600;
            line-height: max(26px, calc(52 * var(--vwBase)));
            letter-spacing: calc(-0.9 * var(--vwBase));
            margin: 0 auto max(30px, calc(60 * var(--vwBase))) auto;
            padding: 0 2rem;
            height: max(100px, calc(120 * var(--vwBase)));
            width: var(--base-width);
            max-width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            word-break: keep-all;
        }

        .quiz-options {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            width: var(--base-width);
            max-width: 100%;
            margin: 0 auto calc(20 * var(--vwBase)) auto;
        }

        .quiz-option-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(20 * var(--vwBase));
        }

        .quiz-option {
            width: max(80px, calc(100 * var(--vwBase)));
            height: max(80px, calc(100 * var(--vwBase)));
            padding: max(5px, calc(10 * var(--vwBase))) max(15px, calc(30 * var(--vwBase)));
            background: rgba(255, 255, 255, 0.01);
            backdrop-filter: blur(max(1px, calc(2 * var(--vwBase))));
            -webkit-backdrop-filter: blur(max(1px, calc(2 * var(--vwBase))));
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: max(15px, calc(30 * var(--vwBase)));
            color: rgba(80, 80, 80, 0.8);
            font-family: 'Pretendard', sans-serif;
            font-size: max(36px, 3rem);
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .quiz-option:hover {
            background: rgba(255, 255, 255, 0.25);
            border-color: rgba(255, 255, 255, 0.5);
            transform: scale(1.05);
        }

        .quiz-option.selected {
            background: rgba(255, 255, 255, 0.4);
            border-color: #000000a4;
        }

        .option-label {
            color: rgba(80, 80, 80, 0.8);
            text-align: center;
            font-family: 'Pretendard', sans-serif;
            font-size: max(14px, 0.8125rem);
            font-weight: 400;
            white-space: nowrap;
        }

        .prev-button {
            position: absolute;
            top: max(40px, calc(50 * var(--vwBase)));
            left: max(40px, calc(50 * var(--vwBase)));
        }

        .prev-btn {
            display: flex;
            align-items: center;
            gap: max(4px, calc(8 * var(--vwBase)));
            background: transparent;
            border: none;
            color: #101010;
            font-family: 'Pretendard', sans-serif;
            font-size: max(18px, 1rem);
            font-weight: 500;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.3s;
            padding: 0;
        }

        .prev-btn:hover {
            opacity: 1;
        }

        .prev-btn img {
            width: max(12px, calc(20 * var(--vwBase)));
            height: max(12px, calc(20 * var(--vwBase)));
        }

        /* 결과 화면 컨테이너 */
        .quiz-result-card {
            --base-width: max(400px, calc(800 * var(--vwBase)));
            display: flex;
            padding: max(20px, calc(40 * var(--vwBase))) max(30px, calc(60 * var(--vwBase))) max(20px, calc(40 * var(--vwBase)));
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            width: calc(85vw - max(60px, calc(120 * var(--vwBase))));
            max-width: max(550px, calc(1100 * var(--vwBase)));
            height: 75vh;
            min-height: max(430px, calc(650 * var(--vwBase)));
            max-height: max(530px, calc(800 * var(--vwBase)));
            border-radius: max(26px, calc(52 * var(--vwBase)));
            background: rgba(255, 255, 255, 0.60);
            backdrop-filter: blur(max(10px, calc(20 * var(--vwBase))));
            -webkit-backdrop-filter: blur(max(10px, calc(20 * var(--vwBase))));
            position: relative;
            box-shadow: 0 max(16px, calc(32 * var(--vwBase))) max(32px, calc(64 * var(--vwBase))) rgba(0, 0, 0, 0.1);
        }

        /* 결과 화면 내부 */
        .result-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        /* 상단 텍스트 "당신의 이상형은" */
        .result-pretitle {
            color: #505050;
            text-align: center;
            font-family: 'Pretendard', sans-serif;
            font-size: max(20px, 1.375rem);
            font-weight: 400;
            margin: max(10px, calc(20 * var(--vwBase))) 0 max(8px, calc(15 * var(--vwBase))) 0;
        }

        /* 메인 결과 텍스트 */
        .result-main-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: max(4px, calc(8 * var(--vwBase)));
            margin: 0 0 calc(0 * var(--vwBase)) 0;
            flex-wrap: wrap;
        }

        .result-main-title .type-name {
            color: #101010;
            text-align: center;
            font-family: 'Pretendard', sans-serif;
            font-size: max(36px, 3rem);
            font-weight: 700;
            line-height: 1.2;
        }

        .result-main-title .suffix {
            color: #101010;
            text-align: center;
            font-family: 'Pretendard', sans-serif;
            font-size: max(24px, 2.25rem);
            font-weight: 500;
            line-height: 1.2;
        }

        /* 중앙 이미지 */
        .result-image-container {
            margin: 0 0 max(15px, calc(30 * var(--vwBase))) 0;
        }

        .result-image-container img {
            width: max(300px, calc(400 * var(--vwBase)));
            height: max(225px, calc(300 * var(--vwBase)));
            object-fit: cover;
            border-radius: max(30px, calc(30 * var(--vwBase)));
            box-shadow: 0 max(10px, calc(20 * var(--vwBase))) max(20px, calc(40 * var(--vwBase))) rgba(0, 0, 0, 0.15);
        }

        /* 결과 화면 - 입니다 텍스트 */
        .result-subtitle {
            color: #505050;
            text-align: center;
            font-family: 'Pretendard', sans-serif;
            font-size: max(16px, 2rem);
            font-weight: 400;
            margin: 0 0 max(15px, calc(30 * var(--vwBase))) 0;
        }

        /* 결과 버튼 영역 */
        .result-buttons {
            display: flex;
            gap: max(10px, calc(20 * var(--vwBase)));
            justify-content: center;
            width: 100%;
            max-width: max(350px, calc(700 * var(--vwBase)));
            margin: 0 auto;
        }

        .result-btn {
            flex: 1;
            height: max(36px, calc(70 * var(--vwBase)));
            border-radius: max(25px, calc(50 * var(--vwBase)));
            font-family: 'Pretendard', sans-serif;
            font-size: max(20px, 1.25rem);
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.3s ease;
            border: none;
        }

        .result-btn-primary {
            background: linear-gradient(91deg, rgba(176, 200, 236, 0.50) 0.03%, rgba(120, 219, 255, 0.50) 99.97%);
            color: #FFF;
        }

        .result-btn-primary:hover {
            background: linear-gradient(91deg, rgba(176, 200, 236, 0.70) 0.03%, rgba(120, 219, 255, 0.70) 99.97%);
            transform: translateY(calc(-2 * var(--vwBase)));
        }

        .result-btn-secondary {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.1);
            color: #101010;
        }

        .result-btn-secondary:hover {
            background: rgba(255, 255, 255, 0.95);
            transform: scale(1.02);
        }

        /* 모달 오버레이 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal-overlay.show {
            opacity: 1;
        }

        /* 모달 컨테이너 */
        .modal-container {
            position: relative;
            width: 90%;
            max-width: max(600px, calc(1200 * var(--vwBase)));
            max-height: 90vh;
            background: white;
            border-radius: max(10px, calc(20 * var(--vwBase)));
            overflow: hidden;
            box-shadow: 0 max(25px, calc(50 * var(--vwBase))) max(50px, calc(100 * var(--vwBase))) rgba(0, 0, 0, 0.5);
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .modal-overlay.show .modal-container {
            transform: scale(1);
        }

        /* 모달 헤더 (X 버튼) */
        .modal-header {
            position: sticky;
            top: 0;
            background: white;
            z-index: 1;
            padding: max(8px, calc(15 * var(--vwBase))) max(10px, calc(20 * var(--vwBase)));
            display: flex;
            justify-content: flex-end;
            border-bottom: 1px solid #eee;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: max(20px, 2rem);
            color: #888;
            cursor: pointer;
            padding: 0;
            width: max(24px, calc(40 * var(--vwBase)));
            height: max(24px, calc(40 * var(--vwBase)));
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.3s;
        }

        .modal-close:hover {
            color: #333;
        }

        /* 모달 콘텐츠 (스크롤 가능) */
        .modal-content {
            overflow-y: auto;
            max-height: calc(90vh - max(90px, calc(180 * var(--vwBase))));
            padding: max(10px, calc(20 * var(--vwBase)));
            -webkit-overflow-scrolling: touch;
        }

        .modal-content::-webkit-scrollbar {
            width: max(4px, calc(8 * var(--vwBase)));
        }

        .modal-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: max(5px, calc(10 * var(--vwBase)));
        }

        .modal-content::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: max(5px, calc(10 * var(--vwBase)));
        }

        .modal-content::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .modal-content img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: max(5px, calc(10 * var(--vwBase)));
        }

        /* 모달 푸터 (버튼들) */
        .modal-footer {
            position: sticky;
            bottom: 0;
            background: white;
            z-index: 1;
            padding: max(20px, calc(20 * var(--vwBase)));
            border-top: 1px solid #eee;
            display: flex;
            gap: max(10px, calc(15 * var(--vwBase)));
            justify-content: center;
            flex-wrap: wrap;
        }

        .modal-btn {
            padding: max(10px, calc(15 * var(--vwBase))) max(15px, calc(30 * var(--vwBase)));
            border-radius: max(25px, calc(50 * var(--vwBase)));
            font-family: 'Pretendard', sans-serif;
            font-size: max(20px, 1rem);
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.3s ease;
            border: none;
        }

        .modal-btn-primary {
            background: linear-gradient(91deg, rgba(176, 200, 236, 0.50) 0.03%, rgba(120, 219, 255, 0.50) 99.97%);
            color: #FFF;
            flex: 1;
            min-width: max(100px, calc(200 * var(--vwBase)));
        }

        .modal-btn-primary:hover {
            background: linear-gradient(91deg, rgba(176, 200, 236, 0.70) 0.03%, rgba(120, 219, 255, 0.70) 99.97%);
            transform: translateY(-2px);
        }

        .modal-btn-secondary {
            background: rgba(255, 255, 255, 1);
            border: 1px solid #ddd;
            color: #101010;
            min-width: max(60px, calc(120 * var(--vwBase)));
        }

        .modal-btn-secondary:hover {
            background: #f5f5f5;
            transform: translateY(-2px);
        }

        /* 섹션 3: 왜 연정사일까요? */
        #about {
            position: relative;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), 
                        url('../assets/section3-about/background.png');
            background-size: cover;
            background-position: center;
            color: white;
        }

        .about-text {
            position: absolute;
            left: 10%;              /* calc(120 * var(--vwBase)) / calc(1920 * var(--vwBase)) = 6.25% */
            top: 20%;                 /* 세로 중앙 */
            width: 60%;            /* calc(800 * var(--vwBase)) / calc(1920 * var(--vwBase)) = 41.67% */
            max-width: calc(800 * var(--vwBase));         /* 최대 크기 제한 (큰 화면 대비) */
        }

        .about-text h2 {
            color: #FFF;
            font-family: 'Pretendard', sans-serif;
            font-size: max(36px, 3rem);
            font-weight: 700;
            line-height: normal;
            letter-spacing: calc(-1.2 * var(--vwBase));
            margin-bottom: 2rem;
        }

        .about-text p {
            color: #FFF;
            font-family: 'Pretendard', sans-serif;
            font-size: max(20px, 1.5rem);
            font-weight: 500;
            line-height: max(24px, calc(36 * var(--vwBase)));
            letter-spacing: calc(-0.6 * var(--vwBase));
            margin-bottom: 1.5rem;
        }

        .about-text strong {
            color: #FFF;
            font-weight: 700;
        }

        /* 섹션 4: 서비스 비교 */
        #services {
            position: relative;
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important;
            align-items: center !important;
            padding: calc(100 * var(--vwBase)) 0 0 !important;
            height: 100vh !important;
            background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.35)),
                        url('../assets/section4-services/bg.png');
            background-size: cover;
            background-position: center;
            color: white;
        }

        #services h2 {
            display: inline-block;
            font-size: 3rem;
            font-weight: 700;
            color: white;
            margin: 0 auto calc(30 * var(--vwBase));
            padding-bottom: calc(15 * var(--vwBase));
            border-bottom: calc(3 * var(--vwBase)) solid white;
        }

        .service-cards {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-end;
            gap: calc(14 * var(--vwBase));
            margin-top: auto;
            margin-bottom: 0;
            padding: 0;
            width: 95%;
            max-width: calc(1400 * var(--vwBase));
        }

        /* ── 공통 비교카드 ── */
        .compare-card {
            border-radius: calc(28 * var(--vwBase)) calc(28 * var(--vwBase)) 0 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: 'Pretendard', sans-serif;
            overflow: hidden;
            position: relative;
        }

        /* 유리 광택 레이어 1 - 상단 광택 */
        .compare-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 45%;
            background: linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.14) 0%,
                rgba(255, 255, 255, 0.05) 30%,
                rgba(255, 255, 255, 0.01) 60%,
                transparent 100%
            );
            pointer-events: none;
            z-index: 1;
        }

        /* 유리 광택 레이어 2 - 테두리 안쪽 글로우 */
        .compare-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: calc(28 * var(--vwBase)) calc(28 * var(--vwBase)) 0 0;
            box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.03);
            pointer-events: none;
            z-index: 1;
        }

        /* 카드 상단 - 아이콘 + 타이틀 영역 */
        .compare-card-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: calc(50 * var(--vwBase)) calc(30 * var(--vwBase)) calc(30 * var(--vwBase));
            gap: calc(12 * var(--vwBase));
            position: relative;
            z-index: 2;
        }

        .compare-card-header h3 {
            font-size: max(24px, calc(32 * var(--vwBase)));
            font-weight: 700;
            color: white;
            margin: 0;
            letter-spacing: -0.02em;
        }

        /* 카드 하단 - 태그 영역 */
        .compare-card-tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            padding: calc(15 * var(--vwBase)) calc(25 * var(--vwBase)) calc(45 * var(--vwBase));
            gap: calc(10 * var(--vwBase));
            box-sizing: border-box;
            position: relative;
            z-index: 2;
        }

        .compare-tag {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.35);
            border-radius: calc(12 * var(--vwBase));
            padding: calc(13 * var(--vwBase)) calc(24 * var(--vwBase));
            color: rgba(255, 255, 255, 0.92);
            font-size: max(15px, calc(19 * var(--vwBase)));
            font-weight: 500;
            white-space: nowrap;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
                        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
        }

        /* 칩 유리 광택 - 눌린 느낌 */
        .compare-tag::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.04) 0%,
                rgba(255, 255, 255, 0.08) 100%
            );
            border-radius: calc(12 * var(--vwBase)) calc(12 * var(--vwBase)) 0 0;
            pointer-events: none;
        }

        /* ── 사이드 카드 - 회색 유리 ── */
        .compare-card-side {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(60px) saturate(1.5) brightness(1.08);
            -webkit-backdrop-filter: blur(60px) saturate(1.5) brightness(1.08);
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-bottom: none;
            box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.12),
                        0 10px 40px rgba(0, 0, 0, 0.3);
            flex: 1;
            min-width: 0;
        }

        .compare-card-icon {
            width: calc(90 * var(--vwBase));
            min-width: 56px;
            height: auto;
        }

        /* ── 가운데 카드 - 골드 반짝 ── */
        .compare-card-center {
            background: linear-gradient(
                155deg,
                rgba(175, 135, 45, 0.55) 0%,
                rgba(155, 115, 35, 0.45) 35%,
                rgba(130, 95, 30, 0.38) 70%,
                rgba(160, 125, 40, 0.48) 100%
            );
            backdrop-filter: blur(60px) saturate(1.5) brightness(1.05);
            -webkit-backdrop-filter: blur(60px) saturate(1.5) brightness(1.05);
            border: 2px solid rgba(200, 170, 70, 0.6);
            border-bottom: none;
            box-shadow: 0 -2px 0 rgba(210, 180, 60, 0.35),
                        0 14px 60px rgba(150, 115, 30, 0.4),
                        0 0 120px rgba(170, 135, 45, 0.15),
                        inset 0 1px 0 rgba(220, 190, 90, 0.25);
            flex: 1.4;
            min-width: 0;
            z-index: 1;
        }

        /* 가운데 카드 광택 - 반짝이는 골드 */
        .compare-card-center::before {
            background: linear-gradient(
                180deg,
                rgba(255, 240, 150, 0.32) 0%,
                rgba(255, 225, 80, 0.14) 20%,
                rgba(255, 215, 0, 0.04) 50%,
                transparent 100%
            );
        }

        /* 가운데 카드 내부 골드 글로우 */
        .compare-card-center::after {
            box-shadow: inset 0 0 100px rgba(210, 180, 80, 0.12),
                        inset 0 0 40px rgba(255, 225, 50, 0.06);
        }

        .compare-card-center .compare-card-header {
            padding: calc(55 * var(--vwBase)) calc(35 * var(--vwBase)) calc(35 * var(--vwBase));
            gap: calc(10 * var(--vwBase));
        }

        .compare-card-center .compare-card-header h3 {
            color: #D4B84A;
            font-size: max(28px, calc(38 * var(--vwBase)));
            text-shadow: 0 0 12px rgba(200, 170, 80, 0.25);
        }

        .compare-card-subtitle {
            font-size: max(13px, calc(16 * var(--vwBase)));
            font-weight: 600;
            color: rgba(212, 184, 74, 0.75);
            letter-spacing: 0.2em;
        }

        .compare-card-logo {
            width: calc(160 * var(--vwBase));
            min-width: 90px;
            height: auto;
        }

        .compare-card-center .compare-card-tags {
            padding: calc(15 * var(--vwBase)) calc(35 * var(--vwBase)) calc(55 * var(--vwBase));
        }

        .compare-card-center .compare-tag {
            border-color: rgba(255, 255, 255, 0.35);
            background: rgba(200, 170, 60, 0.10);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18),
                        inset 0 -1px 0 rgba(255, 235, 120, 0.10);
        }

        /* 가운데 칩 광택 골드 - 눌린 느낌 */
        .compare-card-center .compare-tag::before {
            background: linear-gradient(
                180deg,
                rgba(255, 235, 120, 0.05) 0%,
                rgba(255, 215, 0, 0.08) 100%
            );
        }

        /* ── 호버 효과 ── */
        .compare-card {
            transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        box-shadow 0.45s ease,
                        border-color 0.45s ease,
                        background 0.45s ease;
        }

        .compare-card::before,
        .compare-card::after {
            transition: background 0.45s ease, box-shadow 0.45s ease;
        }

        .compare-card-center:hover {
            transform: scale(1.05) translateY(calc(-8 * var(--vwBase)));
            background: linear-gradient(
                155deg,
                rgba(235, 205, 80, 0.55) 0%,
                rgba(210, 175, 60, 0.45) 35%,
                rgba(185, 150, 50, 0.38) 70%,
                rgba(220, 190, 75, 0.48) 100%
            );
            box-shadow: 0 -3px 0 rgba(255, 230, 80, 0.5),
                        0 24px 80px rgba(200, 160, 40, 0.45),
                        0 0 160px rgba(200, 170, 60, 0.2),
                        inset 0 2px 0 rgba(255, 240, 150, 0.3),
                        inset 0 0 100px rgba(210, 180, 70, 0.1);
            border-color: rgba(245, 225, 120, 0.8);
        }

        .compare-card-center:hover::before {
            background: linear-gradient(
                180deg,
                rgba(255, 245, 170, 0.40) 0%,
                rgba(255, 230, 100, 0.18) 20%,
                rgba(255, 220, 60, 0.05) 50%,
                transparent 100%
            );
        }

        .compare-card-center:hover::after {
            box-shadow: inset 0 0 120px rgba(220, 190, 80, 0.16),
                        inset 0 0 50px rgba(255, 230, 80, 0.08);
        }

        .compare-card-center:hover .compare-card-header h3 {
            text-shadow: 0 0 25px rgba(220, 190, 80, 0.5);
        }

        .compare-card-center:hover .compare-tag {
            border-color: rgba(255, 255, 255, 0.45);
            background: rgba(210, 180, 60, 0.15);
        }

        .compare-card-side:hover {
            transform: scale(1.03) translateY(calc(-5 * var(--vwBase)));
            background: rgba(255, 255, 255, 0.10);
            box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.22),
                        0 16px 55px rgba(0, 0, 0, 0.35),
                        inset 0 0 40px rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.32);
        }

        .compare-card-side:hover::before {
            background: linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.18) 0%,
                rgba(255, 255, 255, 0.06) 30%,
                transparent 100%
            );
        }

        .compare-card-side:hover .compare-tag {
            border-color: rgba(255, 255, 255, 0.40);
            background: rgba(255, 255, 255, 0.08);
        }

        /* h3, subtitle 트랜지션 */
        .compare-card-header h3,
        .compare-card-subtitle {
            transition: text-shadow 0.45s ease;
        }

        /* 칩 트랜지션 */
        .compare-tag {
            transition: border-color 0.35s ease,
                        background 0.35s ease,
                        box-shadow 0.35s ease;
        }

        /* 섹션 5: 서비스 상세 소개 */
        #service-details {
            position: relative;
            background: white;
            padding: 0;
            overflow: hidden;
        }

        .service-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 0;
            pointer-events: none;
        }

        .service-bg--active {
            opacity: 1;
        }

        /* 배경 어두운 오버레이 */
        #service-details::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(51, 51, 51, 0.40);
            backdrop-filter: blur(calc(6 * var(--vwBase)));
            -webkit-backdrop-filter: blur(calc(6 * var(--vwBase)));
            z-index: 1;
        }

        .service-details-content {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100vh;
            min-height: calc(600 * var(--vwBase));
            display: grid;
            grid-template-rows: 1fr auto 1fr;
            align-items: center;
            padding: calc(80 * var(--vwBase)) calc(60 * var(--vwBase)) calc(60 * var(--vwBase));
        }

        /* 우측 상단 고정 타이틀 블록 */
        .service-header-fixed {
            position: absolute;
            top: calc(120 * var(--vwBase));
            right: calc(60 * var(--vwBase));
            text-align: right;
            z-index: 3;
        }

        .service-header-fixed h2 {
            font-family: 'Pretendard', sans-serif;
            font-size: max(32px, 3rem);
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: max(12px, calc(20 * var(--vwBase)));
            padding-bottom: max(10px, calc(15 * var(--vwBase)));
            border-bottom: max(2px, calc(2 * var(--vwBase))) solid #FFF;
        }

        .service-header-fixed h2 .highlight {
            background: linear-gradient(90deg, #D5B342 0%, #FFD342 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .service-header-fixed h2 .white-text {
            color: #FFF;
        }

        .service-header-fixed .subtitle {
            color: #FFF;
            font-family: 'Pretendard', sans-serif;
            font-size: max(24px, 2rem);
            font-weight: 600;
            line-height: 1.5;
            margin-bottom: max(10px, calc(15 * var(--vwBase)));
        }

        .service-header-fixed .subtitle .highlight {
            background: linear-gradient(90deg, #D5B342 0%, #FFD342 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
        }

        .service-header-fixed .description {
            color: #FFF;
            font-family: 'Pretendard', sans-serif;
            font-size: max(16px, 1.125rem);
            font-weight: 400;
            line-height: 1.6;
            opacity: 0.9;
        }

        /* 중간 섹션 (칩 영역) */
        .service-middle-section {
            position: absolute;
            top: 40%;  /* 화면 중앙 */
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
            width: 100%;
        }

        .service-chips {
            display: flex;
            flex-wrap: nowrap;
            gap: calc(20 * var(--vwBase));
        }

        .service-chip {
            padding: max(12px, calc(16 * var(--vwBase))) max(24px, calc(32 * var(--vwBase)));
            border: none;
            border-radius: max(30px, calc(50 * var(--vwBase)));
            background: rgba(255, 255, 255, 0.25);
            color: #FFF;
            font-family: 'Pretendard', sans-serif;
            font-size: max(16px, 1.125rem);
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: calc(-0.45 * var(--vwBase));
            cursor: pointer;
            transition: background 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                        transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                        color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
            white-space: nowrap;
        }

        .service-chip:hover {
            background: rgba(255, 255, 255, 0.35);
            transform: translateY(calc(-2 * var(--vwBase)));
        }

        .service-chip.active {
            background: rgba(255, 255, 255, 0.85);
            color: #333;
            font-weight: 600;
        }

        /* 중앙 서비스 콘텐츠 영역 */
        .service-center-content {
            position: absolute;
            top: 42%;  /* 칩(50%) 아래에 위치 */
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
            z-index: 3;
            padding: calc(40 * var(--vwBase)) calc(20 * var(--vwBase));
            width: 100%;
            max-width: calc(1200 * var(--vwBase));
        }

        .service-center-title {
            color: #FFF;
            font-family: 'Pretendard', sans-serif;
            font-size: max(24px, 1.875rem);
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: max(20px, calc(30 * var(--vwBase)));
            text-shadow: 0 calc(2 * var(--vwBase)) calc(10 * var(--vwBase)) rgba(0, 0, 0, 0.3);
        }

        .service-center-description {
            max-width: max(600px, calc(1000 * var(--vwBase)));
            width: 100%;
        }

        .service-center-description p {
            color: #FFF;
            font-family: 'Pretendard', sans-serif;
            font-size: max(14px, 0.9375rem);
            font-weight: 400;
            line-height: 1.8;
            margin-bottom: 0.8rem;
            text-shadow: 0 calc(1 * var(--vwBase)) calc(5 * var(--vwBase)) rgba(0, 0, 0, 0.3);
        }

        /* 섹션 6: 매칭 방식 - 텍스트 영역 */
        #matching-intro {
            position: relative;
            background: url('../assets/section6-matching/text-bg.png');
            background-size: cover;
            background-position: center;
        }

        #matching-intro::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            z-index: 1;
        }

        .matching-text-content {
            position: absolute;
            left: max(60px, calc(100 * var(--vwBase)));
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            max-width: max(500px, calc(800 * var(--vwBase)));
            color: white;
        }

        .matching-text-content h2 {
            font-family: 'Pretendard', sans-serif;
            font-size: max(28px, 3rem);
            font-weight: 1000;
            line-height: 1.3;
            margin-bottom: max(16px, calc(20 * var(--vwBase)));
            padding-bottom: max(16px, calc(20 * var(--vwBase)));
            border-bottom: max(2px, calc(2 * var(--vwBase))) solid #FFF;
            display: inline-block;
        }

        .matching-text-content p {
            font-family: 'Pretendard', sans-serif;
            font-size: max(16px, 1.25rem);
            font-weight: 400;
            line-height: 1.8;
            opacity: 0.9;
            margin-bottom: max(16px, calc(24 * var(--vwBase)));
        }

        /* 섹션 7: 매칭 방식 - 카드 영역 */
        #matching-cards {
            background: #f5f5f5;
            padding: 0;
        }

        .matching-cards-container {
            display: flex;
            height: 100vh;
            min-height: calc(600 * var(--vwBase));
        }

        .matching-card {
            flex: 1;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .matching-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .matching-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
            transition: background 0.6s ease;
        }

        .matching-card:hover .matching-overlay {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
        }

        .matching-label {
            position: absolute;
            top: max(80px, calc(160 * var(--vwBase)));
            left: max(24px, calc(40 * var(--vwBase)));
            font-family: 'Pretendard', sans-serif;
            font-size: max(18px, 1.125rem);
            font-weight: 600;
            line-height: normal;
            letter-spacing: calc(-0.45 * var(--vwBase));
            color: #FFF;
            z-index: 2;
        }

        .matching-content {
            position: absolute;
            top: max(160px, calc(320 * var(--vwBase)));
            left: max(24px, calc(40 * var(--vwBase)));
            width: 90%;
            max-width: max(300px, calc(500 * var(--vwBase)));
            opacity: 0;
            transition: opacity 0.6s ease;
            z-index: 2;
            text-align: left;
            padding-left: 0;
        }

        .matching-content h3 {
            font-family: 'Pretendard', sans-serif;
            font-size: max(20px, 1.625rem);
            font-weight: 700;
            line-height: max(28px, calc(38 * var(--vwBase)));
            letter-spacing: calc(-0.65 * var(--vwBase));
            color: #FFF;
            margin-bottom: 2rem;
        }

        .matching-content p {
            font-family: 'Pretendard', sans-serif;
            font-size: max(16px, 1.125rem);
            font-weight: 400;
            line-height: max(24px, calc(26 * var(--vwBase)));
            letter-spacing: calc(-0.45 * var(--vwBase));
            color: #FFF;
        }

        .matching-card:hover {
            flex: 2;
        }

        .matching-card:hover .matching-content {
            opacity: 1;
        }

        .matching-card:hover img {
            transform: scale(1.05);
        }


        /* 섹션 7: 후기 */
        #reviews {
            position: relative;
            background: url('../assets/section7-reviews/reviews-bg.png');
            background-size: cover;
            background-position: center;
            padding: calc(100 * var(--vwBase)) 2rem;
        }

        .reviews-container {
            max-width: calc(1200 * var(--vwBase));
            margin: 0 auto;
            text-align: center;
        }

        .reviews-container h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 3rem;
        }

        .review-slider {
            position: relative;
            padding: 3rem 0;
        }

        .review-text {
            font-size: 2rem;
            font-weight: 500;
            color: #ffffff;
            line-height: 1.6;
            margin: 2rem 0;
        }

        .review-subtitle {
            font-size: 1.1rem;
            color: #9b9b9b;
            margin-top: 3rem;
        }

        .swiper-button-next,
        .swiper-button-prev {
            color: #ffffff !important;
        }

        /* 섹션 8: 상담신청 */
        #signup {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            overflow: hidden;
        }

        #signup video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        #signup::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(calc(5 * var(--vwBase)));
        }

        .signup-container {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: max(600px, calc(1600 * var(--vwBase)));
            margin: 0 auto;
            flex-shrink: 0;
        }

        .signup-card {
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(max(8px, calc(15 * var(--vwBase))));
            -webkit-backdrop-filter: blur(max(8px, calc(15 * var(--vwBase))));
            border-radius: max(20px, calc(30 * var(--vwBase)));
            padding: max(1.5rem, 3rem);
            box-shadow: 0 max(30px, calc(60 * var(--vwBase))) max(60px, calc(120 * var(--vwBase))) rgba(0,0,0,0.15);
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: max(14px, 1.1rem);
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 1rem;
            border: max(1px, calc(2 * var(--vwBase))) solid #e0e0e0;
            border-radius: max(10px, calc(15 * var(--vwBase)));
            font-size: max(14px, 1rem);
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #D4A574;
        }

        .form-group select:disabled {
            background: #f0f0f0;
            color: #999;
            cursor: not-allowed;
            opacity: 0.6;
        }

        .gender-buttons {
            display: flex;
            height: max(40px, calc(60 * var(--vwBase)));
            gap: max(8px, calc(10 * var(--vwBase)));
        }

        .gender-button {
            flex: 1;
            padding: max(8px, calc(10 * var(--vwBase))) max(20px, calc(30 * var(--vwBase)));
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: max(10px, calc(15 * var(--vwBase)));
            background: rgba(230, 230, 230, 0.40);
            border: none;
            font-family: 'Pretendard', sans-serif;
            font-size: max(14px, 1rem);
            font-weight: 500;
            color: #3A352E;
            cursor: pointer;
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }

        .gender-button:hover {
            background: rgba(230, 230, 230, 0.40);
        }

        .gender-button.selected {
            background: #FFFFFF;
            box-shadow: 0 max(10px, calc(20 * var(--vwBase))) max(20px, calc(40 * var(--vwBase))) rgba(0,0,0,0.1);
        }

        .checkbox-group {
            margin: 2rem 0;
        }

        .checkbox-group label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
        }

        .checkbox-group input[type="checkbox"] {
            width: max(16px, calc(20 * var(--vwBase)));
            height: max(16px, calc(20 * var(--vwBase)));
        }

        .submit-button {
            display: flex;
            height: max(48px, calc(70 * var(--vwBase)));
            width: 100%;
            justify-content: center;
            align-items: center;
            border-radius: max(12px, calc(20 * var(--vwBase)));
            background: linear-gradient(135deg, #D4A574 0%, #C89860 100%);
            color: white;
            border: none;
            font-family: 'Pretendard', sans-serif;
            font-size: max(16px, 1.2rem);
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.3s ease;
            position: relative;
        }

        .submit-button::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            box-shadow: 0 calc(40 * var(--vwBase)) calc(80 * var(--vwBase)) rgba(212, 165, 116, 0.4);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .submit-button:hover {
            transform: translateY(calc(-3 * var(--vwBase)));
        }

        .submit-button:hover::after {
            opacity: 1;
        }

        /* 섹션 9: 검증된 서비스 */
        #verified {
            background: white;
            overflow: hidden;
            padding: 2rem 2rem 0;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        .verified-container {
            max-width: calc(1900 * var(--vwBase));
            margin: 0 auto;
        }

        .verified-header {
            text-align: center;
            margin: 3rem 0 2rem 0;
            padding: 0 2rem;
        }

        .verified-header h2 {
            font-size: max(28px, 2.5rem);
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .verified-header p {
            font-size: max(14px, 1.1rem);
            color: #666;
        }

        #verified::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: calc(200 * var(--vwBase));
            height: 100%;
            background: linear-gradient(to right, white, transparent);
            z-index: 100;
            pointer-events: none;
        }

        #verified::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: calc(200 * var(--vwBase));
            height: 100%;
            background: linear-gradient(to left, white, transparent);
            z-index: 100;
            pointer-events: none;
        }

        /* 무한 마퀴 슬라이더 */
        .certificates-slider {
            --gap: 1rem;
            display: flex;
            width: 100%;
            overflow: hidden;
            margin-bottom: 1rem;
            gap: var(--gap);
            user-select: none;
        }

        .certificates-slider:last-child {
            margin-bottom: 0;
        }

        .certificates-row {
            flex-shrink: 0;
            display: flex;
            gap: var(--gap);
            will-change: transform;
        }

        .certificates-slider-1 .certificates-row {
            animation: marqueeLeft 60s linear infinite;
        }

        .certificates-slider-2 .certificates-row {
            animation: marqueeRight 70s linear infinite;
        }

        .certificates-slider:hover .certificates-row {
            animation-play-state: paused;
        }

        .certificate-item {
            position: relative;
            flex-shrink: 0;
            height: max(200px, 36vh);
            width: auto;
            aspect-ratio: 3 / 4;
            border-radius: max(12px, calc(20 * var(--vwBase)));
            overflow: hidden;
            box-shadow: 0 max(12px, calc(20 * var(--vwBase))) max(24px, calc(40 * var(--vwBase))) rgba(0,0,0,0.1);
            cursor: pointer;
        }

        .certificate-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
            will-change: transform;
        }

        .certificate-item:hover img {
            transform: scale(1.05);
        }

        .certificate-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(212, 165, 116, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .certificate-item:hover .certificate-overlay {
            opacity: 1;
        }

        .certificate-title {
            color: white;
            font-size: 1.3rem;
            font-weight: 600;
            text-align: center;
            padding: 1rem;
        }

        @keyframes marqueeLeft {
            to { transform: translateX(var(--marquee-dist)); }
        }

        @keyframes marqueeRight {
            from { transform: translateX(var(--marquee-dist)); }
            to { transform: translateX(0); }
        }

/* ==============================
   후기 카드 & 관리자 UI
   ============================== */

/* 관리자 등록 버튼 */
.review-add-btn {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, calc(8 * var(--vwBase)), 10px);
    background: #D4A574;
    color: #1a1a1a;
    border: none;
    border-radius: clamp(6px, calc(8 * var(--vwBase)), 10px);
    padding: clamp(8px, calc(12 * var(--vwBase)), 16px) clamp(16px, calc(24 * var(--vwBase)), 32px);
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(13px, calc(15 * var(--vwBase)), 18px);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: clamp(16px, calc(24 * var(--vwBase)), 32px);
    transition: background 0.2s;
}

.review-add-btn:hover {
    background: #c4955a;
}

/* 후기 카드 */
.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, calc(24 * var(--vwBase)), 32px);
    cursor: pointer;
    padding: clamp(20px, calc(30 * var(--vwBase)), 40px);
    transition: transform 0.2s;
}

.review-card:hover {
    transform: scale(1.02);
}

/* 썸네일 */
.review-card-thumb {
    width: clamp(240px, 45vh, 500px);
    height: clamp(240px, 45vh, 500px);
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #2a2a2a;
    flex-shrink: 0;
}

.review-card-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-card-thumb-empty svg {
    width: clamp(48px, 10vh, 80px);
    height: clamp(48px, 10vh, 80px);
}

/* 카드 텍스트 */
.review-card-text {
    font-size: clamp(16px, 2rem, 40px);
    font-weight: 500;
    color: #ffffff;
    line-height: 1.6;
    text-align: center;
}

/* 관리자 액션 버튼 */
.review-admin-actions {
    position: absolute;
    top: clamp(8px, calc(12 * var(--vwBase)), 16px);
    right: clamp(8px, calc(12 * var(--vwBase)), 16px);
    display: flex;
    gap: clamp(4px, calc(8 * var(--vwBase)), 12px);
}

.review-action-btn {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: clamp(6px, calc(8 * var(--vwBase)), 10px);
    padding: clamp(6px, calc(10 * var(--vwBase)), 14px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.review-action-btn:hover {
    background: rgba(0, 0, 0, 0.85);
}

.review-delete-btn:hover {
    background: rgba(200, 50, 50, 0.85);
}

.review-action-btn svg {
    width: clamp(14px, calc(18 * var(--vwBase)), 22px);
    height: clamp(14px, calc(18 * var(--vwBase)), 22px);
}

/* --- 후기 상세 모달 --- */
.review-detail-modal .modal-content img {
    max-height: 40vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto clamp(16px, calc(24 * var(--vwBase)), 32px);
    border-radius: clamp(8px, calc(12 * var(--vwBase)), 16px);
    object-fit: contain;
}

.review-detail-text {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(14px, calc(16 * var(--vwBase)), 20px);
    color: #333;
    line-height: 1.8;
    white-space: pre-wrap;
}

/* --- 후기 등록/수정 폼 모달 --- */
.review-form-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.review-form-modal .modal-header h3 {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(18px, calc(22 * var(--vwBase)), 28px);
    font-weight: 600;
    color: #333;
    margin: 0;
}

.review-form {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, calc(20 * var(--vwBase)), 28px);
}

.review-form-group {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, calc(8 * var(--vwBase)), 10px);
}

.review-form-group label {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(13px, calc(14 * var(--vwBase)), 17px);
    font-weight: 600;
    color: #555;
}

.review-form-group input[type="text"],
.review-form-group textarea {
    width: 100%;
    padding: clamp(10px, calc(14 * var(--vwBase)), 18px);
    border: 1px solid #ddd;
    border-radius: clamp(6px, calc(8 * var(--vwBase)), 10px);
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(13px, calc(15 * var(--vwBase)), 18px);
    color: #333;
    outline: none;
    transition: border-color 0.2s;
}

.review-form-group input[type="text"]:focus,
.review-form-group textarea:focus {
    border-color: #D4A574;
}

.review-form-group textarea {
    resize: vertical;
    min-height: clamp(120px, calc(160 * var(--vwBase)), 220px);
}

.review-form-group input[type="file"] {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(12px, calc(13 * var(--vwBase)), 16px);
    color: #666;
}

.review-image-preview {
    max-width: clamp(120px, calc(200 * var(--vwBase)), 260px);
    max-height: clamp(120px, calc(200 * var(--vwBase)), 260px);
    border-radius: clamp(8px, calc(12 * var(--vwBase)), 16px);
    object-fit: cover;
    margin-top: clamp(8px, calc(10 * var(--vwBase)), 14px);
}


/* ── 우측 도트 네비게이션 (fullPage.js 내장) ── */
        #fp-nav {
            z-index: 999;
        }

        #fp-nav.right {
            right: calc(24 * var(--vwBase));
        }

        #fp-nav ul li {
            width: calc(18 * var(--vwBase));
            height: calc(18 * var(--vwBase));
            margin: calc(6 * var(--vwBase));
        }

        /* 기본 dot: 어두운 회색 작은 원 */
        #fp-nav ul li a span {
            width: calc(8 * var(--vwBase));
            height: calc(8 * var(--vwBase));
            margin: calc(-4 * var(--vwBase)) 0 0 calc(-4 * var(--vwBase));
            background: rgba(255, 255, 255, 0.3);
            border: none;
            transition: all 0.3s ease;
        }

        /* 활성 dot: 밝은 흰색, 더 큰 원 */
        #fp-nav ul li a.active span,
        #fp-nav ul li:hover a.active span {
            width: calc(12 * var(--vwBase));
            height: calc(12 * var(--vwBase));
            margin: calc(-6 * var(--vwBase)) 0 0 calc(-6 * var(--vwBase));
            background: rgba(255, 255, 255, 0.9);
        }

        /* 호버 dot */
        #fp-nav ul li:hover a span {
            background: rgba(255, 255, 255, 0.6);
        }

        /* 툴팁 숨김 */
        #fp-nav ul li .fp-tooltip {
            display: none;
        }

/* Desktop safety: hide mobile-only UI on desktop only (>=1024px) */
@media (min-width: 1024px){
    #mobileMenuOverlay,
    .mobile-menu-overlay,
    .mobile-menu-panel,
    .hamburger-btn {
        display: none !important;
    }
}

/* =========================
   약관 모달
   ========================= */
.legal-modal {
    max-width: max(700px, calc(1000 * var(--vwBase)));
}

.legal-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.legal-modal .modal-header h3 {
    font-size: max(14px, 1.1rem);
    font-weight: 600;
    color: #333;
    margin: 0;
}

.legal-content {
    font-size: max(12px, 0.85rem);
    line-height: 1.8;
    color: #444;
    word-break: keep-all;
}

.legal-content h4 {
    font-size: max(13px, 0.95rem);
    font-weight: 600;
    margin: 1.5em 0 0.5em;
    color: #222;
}

.legal-content p {
    margin-bottom: 0.8em;
}

.legal-content ul,
.legal-content ol {
    padding-left: 1.5em;
    margin-bottom: 0.8em;
}

/* 상담 신청 폼 약관 링크 */
.checkbox-group a {
    color: #C8A26E;
    text-decoration: underline;
    font-weight: 500;
}

.checkbox-group a:hover {
    color: #A8824E;
}

/* =========================
   푸터 섹션 (Section 11)
   ========================= */
#site-footer {
    background: #505050;
    color: #ccc;
}

/* nav 패딩과 동일: max(26px, calc(50 * var(--vwBase))) */
.footer-section-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: calc(1920 * var(--vwBase));
    max-width: 100%;
    margin: 0 auto;
    padding: max(120px, calc(160 * var(--vwBase))) max(26px, calc(50 * var(--vwBase))) max(20px, calc(28 * var(--vwBase)));
}

.footer-columns {
    flex: 1;
    display: flex;
    gap: max(40px, calc(80 * var(--vwBase)));
    align-items: flex-start;
}

/* 좌측: 사업자 정보 + 연락처 */
.footer-col--info {
    flex: 0 0 auto;
}

.footer-business-info {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: max(16px, calc(18 * var(--vwBase)));
    line-height: 2.8;
    color: #bbb;
}

/* 중앙: 네비게이션 (약관 + 도움 세로) */
.footer-col--nav {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: max(36px, calc(48 * var(--vwBase)));
}

.footer-nav-group h4.footer-nav-title {
    font-size: max(20px, calc(24 * var(--vwBase)));
    font-weight: 700;
    color: #fff;
    margin: 0 0 max(16px, calc(24 * var(--vwBase))) 0;
}

.footer-nav-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-group ul li {
    margin-bottom: max(12px, calc(16 * var(--vwBase)));
}

.footer-nav-group ul li a {
    color: #bbb;
    text-decoration: none;
    font-size: max(16px, calc(18 * var(--vwBase)));
    transition: color 0.3s;
}

.footer-nav-group ul li a:hover {
    color: #C8A26E;
}

/* 우측: 지도 + 주소 */
.footer-col--map {
    flex: 1;
    min-width: 0;
}

.footer-map-container {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: max(12px, calc(16 * var(--vwBase)));
}

.footer-map-container iframe {
    display: block;
    width: 100%;
    height: max(340px, calc(440 * var(--vwBase)));
}

.footer-address {
    font-size: max(15px, calc(17 * var(--vwBase)));
    color: #bbb;
    margin: 0;
    line-height: 1.8;
}

/* 하단 저작권 (최하단) */
.footer-copyright {
    text-align: center;
    margin-top: auto;
    padding-top: max(16px, calc(20 * var(--vwBase)));
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: #888;
    font-size: max(14px, calc(16 * var(--vwBase)));
}

.footer-copyright p {
    margin: 0;
}

.footer-copyright p {
    margin: 0;
}