/* =========================================================
   MOBILE CSS (2차 전면 개선 - vw 단위 기반)
   Baseline: 430px (portrait)
   공식: px값 / 430 * 100 = vw
   Applies only when viewport < 1440px
   ========================================================= */

/* ===== 0. 핵심 변수 재정의 ===== */
:root {
  --vwBase: calc(100vw / 430);
}

html {
  font-size: min(3.72vw, 6.7vh); /* 16/430*100 */
}


/* ===== 0-1. 우측 도트 네비게이션 모바일 ===== */
#fp-nav.right{
  right:min(2.5vw, 4.5vh);
}
#fp-nav ul li{
  width:min(3.5vw, 6.3vh);
  height:min(3.5vw, 6.3vh);
  margin:min(1.2vw, 2.16vh);
}
#fp-nav ul li a span{
  width:min(1.8vw, 3.24vh);
  height:min(1.8vw, 3.24vh);
  margin:calc(min(1.8vw, 3.24vh) / -2) 0 0 calc(min(1.8vw, 3.24vh) / -2);
  background:rgba(255,255,255,0.3);
  transition:all 0.3s ease;
}
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span{
  width:min(2.8vw, 5.04vh);
  height:min(2.8vw, 5.04vh);
  margin:calc(min(2.8vw, 5.04vh) / -2) 0 0 calc(min(2.8vw, 5.04vh) / -2);
  background:rgba(255,255,255,0.9);
}
#fp-nav ul li:hover a span{
  background:rgba(255,255,255,0.6);
}
#fp-nav ul li .fp-tooltip{
  display:none;
}

/* ===== 1. 헤더 / 네비게이션 ===== */
.nav-tabs{ display:none !important; }
#loginToggleBtn{ display:none !important; }

nav{
  width:100%;
  height:min(15.81vw, 28.46vh); /* 68 */
  padding:0 3.72vw; /* 16 */
}

.logo-icon{
  width:7.91vw; /* 34 */
  height:min(7.91vw, 14.24vh);
}
.logo-text h1{ font-size:min(3.72vw, 6.7vh); /* 16 */ }
.logo-text p{ font-size:min(2.79vw, 5.02vh); /* 12 */ letter-spacing:-0.05vw; }

.hamburger-btn{
  display:inline-flex;
  width:10.23vw; /* 44 */
  height:min(10.23vw, 18.41vh);
  border:0;
  background:transparent;
  padding:0;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hamburger-btn svg{
  width:5.58vw; /* 24 */
  height:min(5.58vw, 10.04vh);
  display:block;
}


/* ===== 모바일 메뉴 오버레이 ===== */
.mobile-menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease;
  z-index:9998;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:19.53vw; /* 84 */
}
body.mobile-menu-open .mobile-menu-overlay{
  opacity:1;
  pointer-events:auto;
}

.mobile-menu-panel{
  width:min(83.72vw, 86vw); /* ~360 */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5.12vw; /* 22 */
  position:relative;
}

.mobile-menu-close{
  position:absolute;
  top:-1.4vw;
  right:0;
  width:10.23vw;
  height:10.23vw;
  border:0;
  background:transparent;
  color:#FFF;
  font-size:6.51vw; /* 28 */
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.mobile-menu-list{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4.19vw; /* 18 */
}

.mobile-menu-list li{
  color:#FFF;
  text-align:center;
  font-family:'Pretendard', sans-serif;
  font-size:3.72vw;
  font-weight:300;
  line-height:1.2;
  letter-spacing:-0.14vw;
  cursor:pointer;
}
.mobile-menu-list li.active{
  text-decoration:underline;
  text-underline-offset:1.4vw;
}



/* ===== 2. 레이아웃 기본 ===== */
.section{
  padding-top:0;
}


/* ===== 3. 토스트 알림 ===== */
.toast-notification{
  top:18.6vw;
  transform:translateX(-50%) translateY(-13.95vw);
  padding:min(2.79vw, 5.02vh) 5.58vw;
  border-radius:1.86vw;
  font-size:min(3.26vw, 5.87vh);
  box-shadow:0 1.86vw 5.58vw rgba(0,0,0,0.3);
}
.toast-notification.show{
  transform:translateX(-50%) translateY(0);
}


/* ===== 3-2. 후기 카드 & 관리자 UI ===== */
.review-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.86vw;
  background: #D4A574;
  color: #1a1a1a;
  border: none;
  border-radius: 1.86vw;
  padding: min(2.79vw, 4.5vh) min(5.58vw, 9.5vh);
  font-family: 'Pretendard', sans-serif;
  font-size: clamp(12px, min(3.49vw, 5.9vh), 17px);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: min(4.65vw, 8vh);
}

.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(4.65vw, 8vh);
  cursor: pointer;
  padding: min(4.65vw, 8vh);
}

.review-card-thumb {
  width: min(32.56vw, 55vh);
  height: min(32.56vw, 55vh);
  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: min(9.3vw, 16vh);
  height: min(9.3vw, 16vh);
}

.review-card-text {
  font-size: min(4.19vw, 7.54vh);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.6;
  text-align: center;
}

.review-admin-actions {
  position: absolute;
  top: min(1.86vw, 3.2vh);
  right: min(1.86vw, 3.2vh);
  display: flex;
  gap: min(1.86vw, 3.2vh);
}

.review-action-btn {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 1.86vw;
  padding: min(2.33vw, 4vh);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-action-btn svg {
  width: min(3.72vw, 6.3vh);
  height: min(3.72vw, 6.3vh);
}

/* 후기 상세 모달 (모바일) */
.review-detail-modal .modal-content img {
  max-height: 35vh;
  width: auto;
  max-width: 100%;
  margin: 0 auto min(3.72vw, 6.3vh);
  border-radius: min(2.79vw, 4.8vh);
  object-fit: contain;
}
.review-detail-text {
  font-family: 'Pretendard', sans-serif;
  font-size: clamp(13px, min(3.49vw, 5.9vh), 17px);
  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(16px, min(4.65vw, 8vh), 22px);
  font-weight: 600;
  color: #333;
  margin: 0;
}

.review-form {
  display: flex;
  flex-direction: column;
  gap: min(4.65vw, 8vh);
}
.review-form-group {
  display: flex;
  flex-direction: column;
  gap: min(1.86vw, 3.2vh);
}
.review-form-group label {
  font-family: 'Pretendard', sans-serif;
  font-size: clamp(12px, min(3.26vw, 5.6vh), 15px);
  font-weight: 600;
  color: #555;
}
.review-form-group input[type="text"],
.review-form-group textarea {
  width: 100%;
  padding: min(3.26vw, 5.6vh);
  border: 1px solid #ddd;
  border-radius: min(1.86vw, 3.2vh);
  font-family: 'Pretendard', sans-serif;
  font-size: clamp(13px, min(3.49vw, 5.9vh), 16px);
  color: #333;
  outline: none;
}
.review-form-group input[type="text"]:focus,
.review-form-group textarea:focus {
  border-color: #D4A574;
}
.review-form-group textarea {
  resize: vertical;
  min-height: min(32.56vw, 55vh);
}
.review-form-group input[type="file"] {
  font-size: clamp(11px, min(3.02vw, 5.2vh), 14px);
  color: #666;
}
.review-image-preview {
  max-width: min(27.91vw, 47vh);
  max-height: min(27.91vw, 47vh);
  border-radius: min(2.79vw, 4.8vh);
  object-fit: cover;
  margin-top: min(1.86vw, 3.2vh);
}


/* ===== 4. 섹션 1 - 히어로 ===== */
.hero-content{
  padding:0 4.19vw;
}
.hero-content button,
.hero-content .btn,
.hero-content a.button{
  min-height:min(10.23vw, 18.41vh);
}

#hero video{
  top:50%;
  height:100%;
  width:100%;
  object-fit:cover;
}

.mute-toggle{
  bottom:min(14vw, 25.2vh);
  right:min(4vw, 7.2vh);
  width:min(9vw, 16.2vh);
  height:min(9vw, 16.2vh);
}
.mute-toggle .mute-icon{
  width:min(5vw, 9vh);
  height:min(5vw, 9vh);
}

.scroll-arrow{
  bottom:min(6vw, 10.8vh);
  gap:min(0.8vw, 1.44vh);
}
.scroll-arrow svg{
  width:min(5.5vw, 9.9vh);
  min-width:18px;
}
@keyframes scrollBounce{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(min(2.5vw, 4.5vh)); }
}


/* ===== 5. 섹션 2 - 이상형 퀴즈 ===== */

/* 시작 화면 */
.quiz-start{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:min(6.51vw, 11.72vh); /* 28 */
  width:100%;
  min-height:100vh;
  padding:min(18.6vw, 33.48vh) 4.65vw min(9.3vw, 16.74vh); /* 80 20 40 */
}

.start-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:min(2.33vw, 4.19vh); /* 10 */
}

.start-pretitle{
  font-size:min(3.72vw, 6.7vh);
  letter-spacing:-0.09vw;
}

.start-title{
  font-size:min(6.05vw, 10.89vh); /* 26 */
  line-height:1.3;
  letter-spacing:-0.14vw;
}

.start-body{
  gap:min(3.72vw, 6.7vh);
  max-width:100%;
}

.start-desc{
  font-size:min(3.49vw, 6.28vh); /* 15 */
  line-height:1.6;
  letter-spacing:-0.07vw;
  padding:0 2.33vw;
}

.start-label{
  font-size:min(3.26vw, 5.87vh); /* 14 */
  letter-spacing:-0.07vw;
}

.start-footer{
  width:100%;
  padding:0 4.65vw;
}

.start-button{
  width:100%;
  height:min(12.09vw, 21.76vh); /* 52 */
  font-size:min(3.72vw, 6.7vh);
  border-radius:6.05vw;
  padding:0 6.98vw;
}

/* 퀴즈 카드 - 중앙 정렬, 스크롤 없음 */
.quiz-card{
  --base-width:100%; /* desktop 변수 오버라이드 */
  width:90vw;
  max-width:90vw;
  margin:0 auto;
  padding:min(4.65vw, 8.37vh) 4.65vw min(4.65vw, 8.37vh); /* 20 */
  border-radius:5.12vw;
  height:auto;
  min-height:auto;
  max-height:none;
  overflow:visible;
  box-sizing:border-box;
}

.progress-bar-container{
  margin-top:min(1.4vw, 2.52vh);
  margin-bottom:min(3.72vw, 6.7vh);
  gap:min(1.4vw, 2.52vh);
}

.progress-bar{
  width:100%;
  max-width:100%;
  height:min(1.4vw, 2.52vh);
  border-radius:0.7vw;
}

.progress-fill{
  border-radius:0.7vw;
}

.question-number{
  font-size:min(3.02vw, 5.44vh);
  margin:0 auto min(2.33vw, 4.19vh) auto;
  width:100%;
  text-align:center;
}

.quiz-question{
  height:auto;
}

.quiz-question h4{
  font-size:min(4.19vw, 7.54vh);
  line-height:1.45;
  letter-spacing:-0.12vw;
  margin:0 auto min(3.72vw, 6.7vh) auto;
  height:auto;
  width:100%;
  padding:0;
  text-align:center;
}

/* ★ 퀴즈 옵션: 세로 나열 */
.quiz-options{
  width:100%;
  flex-direction:column;
  align-items:stretch;
  gap:min(2.09vw, 3.76vh); /* 9 */
  margin:0 auto min(2.33vw, 4.19vh) auto;
}

.quiz-option-wrapper{
  flex-direction:row;
  align-items:center;
  gap:3.26vw;
  width:100%;
  padding:min(2.56vw, 4.61vh) 3.72vw; /* 11 16 */
  background:rgba(255,255,255,0.08);
  border-radius:3.02vw;
  border:0.23vw solid rgba(255,255,255,0.15);
  transition:background 0.2s, border-color 0.2s;
  cursor:pointer;
}

.quiz-option-wrapper:active,
.quiz-option-wrapper.selected{
  background:rgba(255,255,255,0.25);
  border-color:rgba(0,0,0,0.3);
}

.quiz-option{
  width:9.3vw; /* 40 */
  height:min(9.3vw, 16.74vh);
  min-width:9.3vw;
  font-size:min(4.19vw, 7.54vh);
  border-radius:2.79vw;
  padding:0;
  pointer-events:none; /* wrapper가 클릭 처리 */
}

.option-label{
  font-size:min(3.49vw, 6.28vh);
  white-space:nowrap;
  text-align:left;
  pointer-events:none;
  flex:1;
}

.prev-button{
  position:static;
  width:100%;
  margin-top:min(1.4vw, 2.52vh);
}

.prev-btn{
  font-size:min(3.26vw, 5.87vh);
  gap:0.93vw;
}

.prev-btn img{
  width:3.72vw;
  height:min(3.72vw, 6.7vh);
}

/* 결과 카드 */
.quiz-result-card{
  width:90vw;
  max-width:90vw;
  margin:0 auto;
  padding:min(4.65vw, 8.37vh) 4.65vw;
  border-radius:5.12vw;
  height:auto;
  min-height:auto;
  max-height:none;
  overflow:visible;
  box-sizing:border-box;
}

.result-pretitle{
  font-size:min(3.49vw, 6.28vh);
  margin:min(1.86vw, 3.35vh) 0;
}

.result-main-title .type-name{
  font-size:min(6.51vw, 11.72vh); /* 28 */
}

.result-main-title .suffix{
  font-size:min(4.65vw, 8.37vh); /* 20 */
}

.result-subtitle{
  font-size:min(3.72vw, 6.7vh);
  margin:0 0 min(3.72vw, 6.7vh) 0;
}

.result-image-container{
  margin:0 0 min(3.72vw, 6.7vh) 0;
}

.result-image-container img{
  width:60.47vw; /* 260 */
  height:min(45.35vw, 81.63vh); /* 195 */
  border-radius:3.72vw;
  box-shadow:0 1.86vw 5.58vw rgba(0,0,0,0.15);
}

.result-buttons{
  gap:min(2.33vw, 4.19vh);
  max-width:100%;
}

.result-btn{
  height:min(11.16vw, 20.09vh); /* 48 */
  border-radius:5.58vw;
  font-size:min(3.49vw, 6.28vh);
}


/* ===== 6. 모달 ===== */
.modal-overlay{
  padding:3.72vw;
}

.modal-container{
  width:94%;
  max-width:88.37vw;
  border-radius:3.72vw;
  box-shadow:0 4.65vw 13.95vw rgba(0,0,0,0.5);
}

.modal-header{
  padding:2.79vw 3.72vw;
  border-bottom:0.23vw solid #eee;
}

.modal-close{
  font-size:5.58vw;
  width:8.37vw;
  height:8.37vw;
}

.modal-content{
  max-height:calc(90vh - 32.56vw);
  padding:3.72vw;
}

.modal-content::-webkit-scrollbar{
  width:0.93vw;
}
.modal-content::-webkit-scrollbar-track{
  border-radius:0.93vw;
}
.modal-content::-webkit-scrollbar-thumb{
  border-radius:0.93vw;
}

.modal-content img{
  border-radius:1.86vw;
}

.modal-footer{
  padding:3.26vw 3.72vw;
  border-top:0.23vw solid #eee;
  gap:2.33vw;
}

.modal-btn{
  padding:2.79vw 4.65vw;
  border-radius:5.58vw;
  font-size:3.26vw;
}

.modal-btn-primary{
  min-width:32.56vw;
}

.modal-btn-secondary{
  min-width:18.6vw;
}


/* ===== 7. 섹션 3 - 왜 연정사일까요? (About) ===== */
.about-text{
  position:absolute;
  left:5.58vw;
  right:5.58vw;
  top:50%;
  transform:translateY(-50%);
  width:auto;
  max-width:none;
}

.about-text h2{
  font-size:min(5.58vw, 10.04vh); /* 24 */
  letter-spacing:-0.14vw;
  margin-bottom:min(4.19vw, 7.54vh);
}

.about-text p{
  font-size:min(3.26vw, 5.87vh); /* 14 */
  line-height:1.7;
  letter-spacing:-0.07vw;
  margin-bottom:min(2.79vw, 5.02vh);
}


/* ===== 8. 섹션 4 - 서비스 비교 ===== */
#services{
  padding:min(18vw, 32.4vh) 0 min(5vw, 9vh) 0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  height:100vh;
  box-sizing:border-box;
}

#services h2{
  font-size:min(5.12vw, 9.22vh);
  margin:min(4vw, 7.2vh) auto min(2vw, 3.6vh);
  padding-bottom:min(1vw, 1.8vh);
  border-bottom-width:0.47vw;
}

/* 모바일: 카드 세로 배치 */
.service-cards{
  flex-direction:column !important;
  align-items:center !important;
  gap:min(5vw, 9vh) !important;
  padding:min(3vw, 5.4vh) min(5vw, 9vh) !important;
  overflow:hidden !important;
  flex:0 1 auto !important;
  width:100%;
  box-sizing:border-box;
  justify-content:center !important;
  margin:auto 0 !important;
}

/* 모바일 카드: 가로 레이아웃 (아이콘+제목 왼쪽 / 태그 오른쪽) */
.compare-card{
  width:calc(100% - min(8vw, 14.4vh)) !important;
  max-width:none;
  min-width:auto !important;
  flex-direction:row !important;
  border-radius:min(3vw, 5.4vh) !important;
  padding:min(5vw, 9vh) min(6vw, 10.8vh) !important;
  gap:min(2vw, 3.6vh) !important;
  align-items:center !important;
  flex-shrink:1;
}

/* 모바일 카드 광택 조정 */
.compare-card::before{
  border-radius:min(3vw, 5.4vh) !important;
  height:60% !important;
}

.compare-card-header{
  flex-direction:column !important;
  align-items:center !important;
  flex-shrink:0;
  width:min(18vw, 32.4vh) !important;
  padding:0 !important;
  gap:min(1.2vw, 2.16vh) !important;
}

.compare-card-header h3{
  font-size:min(3.26vw, 5.87vh) !important;
  white-space:nowrap;
  letter-spacing:-0.02em;
}

.compare-card-icon{
  width:min(9vw, 16.2vh) !important;
  min-width:auto !important;
}

.compare-card-logo{
  width:min(12vw, 21.6vh) !important;
  min-width:auto !important;
}

.compare-card-center .compare-card-header{
  padding:0 !important;
  width:min(22vw, 39.6vh) !important;
}

.compare-card-center .compare-card-header h3{
  font-size:min(3.26vw, 5.87vh) !important;
  color:#C8AA50;
}

.compare-card-subtitle{
  font-size:min(2.09vw, 3.76vh) !important;
}

.compare-card-tags{
  flex:1;
  padding:0 !important;
  gap:min(1.4vw, 2.52vh) !important;
  justify-content:flex-start !important;
}

.compare-card-center .compare-card-tags{
  padding:0 !important;
}

.compare-tag{
  font-size:min(2.56vw, 4.61vh) !important;
  padding:min(1.2vw, 2.16vh) min(2.3vw, 4.14vh) !important;
  border-radius:min(2vw, 3.6vh) !important;
  border-color:rgba(255, 255, 255, 0.35) !important;
  box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* 모바일 칩 광택 조정 */
.compare-tag::before{
  border-radius:min(2vw, 3.6vh) min(2vw, 3.6vh) 0 0 !important;
}

/* 모바일 카드 순서: 결혼정보회사 → 연정사 → 데이팅앱 */
.compare-card-marriage{ order:-1; }
.compare-card-center{
  order:0;
  width:calc(100% - min(2vw, 3.6vh)) !important;
  padding:min(8vw, 14.4vh) min(7vw, 12.6vh) !important;
}
.compare-card-side:first-child{ order:1; }


/* ===== 9. 섹션 5 - 사소한소개 (서비스 상세) ===== */
.service-details-content{
  padding:min(18.6vw, 33.48vh) 3.72vw min(5.58vw, 10.04vh);
  display:flex;
  flex-direction:column;
  height:auto;
  min-height:100vh;
  overflow:visible;
}

.service-header-fixed{
  position:relative;
  top:auto;
  right:auto;
  text-align:center;
  margin-top:min(5vw, 9vh);
  margin-bottom:min(3.72vw, 6.7vh);
  flex-shrink:0;
}

.service-header-fixed h2{
  font-size:min(5.12vw, 9.22vh);
  margin-bottom:min(2.33vw, 4.19vh);
  padding-bottom:min(1.86vw, 3.35vh);
  border-bottom-width:0.47vw;
}

.service-header-fixed .subtitle{
  font-size:min(3.72vw, 6.7vh);
  margin-bottom:min(1.86vw, 3.35vh);
}

.service-header-fixed .description{
  font-size:min(3.02vw, 5.44vh);
}

/* ★ 칩 영역: 제목 아래, 설명 위 - 중간 고정 */
.service-middle-section{
  position:relative;
  top:auto;
  left:auto;
  transform:none;
  margin:min(4vw, 7.2vh) 0;
  flex-shrink:0;
  z-index:10;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:min(2.79vw, 5.02vh) 0;
  margin-left:-3.72vw;
  margin-right:-3.72vw;
  width:calc(100% + 7.44vw);
}

.service-chips{
  flex-wrap:wrap;
  justify-content:center;
  gap:1.86vw;
  padding:0 2.33vw;
}

.service-chip{
  padding:min(1.86vw, 3.35vh) 3.72vw;
  font-size:min(3.02vw, 5.44vh);
  border-radius:4.65vw;
  background:transparent;
}

/* 설명 영역: 남은 공간 채움 */
.service-center-content{
  position:relative;
  top:auto;
  left:auto;
  transform:none;
  padding:min(2vw, 3.6vh) 0 0;
  max-width:100%;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.service-center-title{
  font-size:min(4.19vw, 7.54vh);
  margin-bottom:min(3.26vw, 5.87vh);
}

.service-center-description p{
  font-size:min(3.02vw, 5.44vh);
  line-height:1.7;
  margin-bottom:min(1.4vw, 2.52vh);
}


/* ===== 10. 섹션 6 - 매칭 소개 ===== */
.matching-text-content{
  left:5.58vw;
  right:5.58vw;
  max-width:none;
}

.matching-text-content h2{
  font-size:min(5.12vw, 9.22vh);
  margin-bottom:min(2.79vw, 5.02vh);
  padding-bottom:min(2.79vw, 5.02vh);
  border-bottom-width:0.47vw;
}

.matching-text-content p{
  font-size:min(3.26vw, 5.87vh);
  line-height:1.7;
  margin-bottom:min(3.26vw, 5.87vh);
}


/* ===== 11. 섹션 7 - 서비스소개 (매칭 카드) ===== */

/* ★ 2×2 그리드 레이아웃 */
.matching-cards-container{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  height:100vh;
  gap:0;
}

.matching-card{
  flex:none;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:none;
}

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

.matching-card img{
  transition:transform 0.3s ease;
}

.matching-card:hover img{
  transform:none;
}

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

/* 오버레이와 라벨은 클릭 통과시켜 카드로 전달 */
.matching-overlay{
  pointer-events:none;
}

.matching-label{
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:min(3.72vw, 6.7vh);
  text-align:center;
  transition:transform 0.3s ease, opacity 0.3s ease;
  width:max-content;
  will-change:transform;
  pointer-events:none;
}

.matching-card:hover .matching-label{
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:min(3.72vw, 6.7vh);
}

/* 기본 상태에서 콘텐츠 숨김 */
.matching-content{
  top:auto;
  bottom:3.72vw;
  left:3.72vw;
  right:3.72vw;
  width:auto;
  max-width:none;
  padding:0;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}

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

.matching-content h3{
  font-size:min(4.19vw, 7.54vh);
  line-height:1.4;
  margin-bottom:min(2.33vw, 4.19vh);
}

.matching-content p{
  font-size:min(2.79vw, 5.02vh);
  line-height:1.6;
}

/* ★ 확장된 카드: 풀스크린 */
.matching-card.expanded{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  z-index:9999;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.matching-card.expanded img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.matching-card.expanded .matching-overlay{
  background:linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100%) !important;
}

.matching-card.expanded .matching-label{
  top:8.37vw; /* 36 */
  left:5.58vw;
  transform:none;
  font-size:3.72vw;
  font-weight:600;
}

.matching-card.expanded .matching-content{
  opacity:1;
  pointer-events:auto;
  position:relative;
  bottom:auto;
  left:auto;
  right:auto;
  z-index:3;
  padding:0 5.58vw 9.3vw;
}

.matching-card.expanded .matching-content h3{
  font-size:5.58vw;
  line-height:1.35;
  margin-bottom:3.72vw;
}

.matching-card.expanded .matching-content p{
  font-size:3.49vw;
  line-height:1.7;
}


/* ===== 12. 섹션 8 - 후기 (리뷰) ===== */
#reviews{
  padding:0 3.72vw;
  display:flex;
  align-items:center;
  justify-content:center;
}

.reviews-container{
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:auto;
}

.reviews-container h2{
  font-size:min(5.58vw, 10.04vh);
  margin-bottom:min(5.58vw, 10.04vh);
}

.review-slider{
  position:relative;
  width:100%;
  padding:min(4.65vw, 8.37vh) 0;
}

.review-text{
  font-size:min(4.19vw, 7.54vh);
  line-height:1.6;
  margin:min(3.72vw, 6.7vh) 0;
  text-align:center;
}

.review-subtitle{
  font-size:min(3.02vw, 5.44vh);
  margin-top:min(4.65vw, 8.37vh);
}

.reviewSwiper{
  overflow:hidden;
}

.swiper-button-next,
.swiper-button-prev{
  display:flex !important;
  width:min(10vw, 18vh);
  height:min(10vw, 18vh);
  color:#ffffff !important;
  top:50%;
  transform:translateY(-50%);
  opacity:0.8;
  z-index:10;
}
.swiper-button-prev{
  left:0;
}
.swiper-button-next{
  right:0;
}
.swiper-button-next::after,
.swiper-button-prev::after{
  font-size:min(5vw, 9vh);
}


/* ===== 13. 섹션 9 - 상담신청 ===== */
#signup{
  padding:0 3.72vw;
  display:flex;
  align-items:center;
  justify-content:center;
}

.signup-container{
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  height:auto;
}

.signup-card{
  padding:min(5.58vw, 10.04vh) 4.65vw;
  border-radius:4.19vw;
  backdrop-filter:blur(2.33vw);
  -webkit-backdrop-filter:blur(2.33vw);
  box-shadow:0 4.65vw 13.95vw rgba(0,0,0,0.15);
}

.form-row{
  grid-template-columns:1fr;
  gap:min(2.33vw, 4.19vh);
}

.form-group{
  margin-bottom:min(3.26vw, 5.87vh);
}

.form-group label{
  font-size:min(3.26vw, 5.87vh);
  margin-bottom:min(1.4vw, 2.52vh);
}

.form-group input,
.form-group select{
  padding:min(2.79vw, 5.02vh) 3.26vw;
  font-size:min(3.49vw, 6.28vh);
  border-width:0.35vw;
  border-radius:2.79vw;
}

.gender-buttons{
  height:min(11.16vw, 20.09vh);
  gap:min(1.86vw, 3.35vh);
}

.gender-button{
  padding:min(2.33vw, 4.19vh) 4.65vw;
  font-size:min(3.49vw, 6.28vh);
  border-radius:2.79vw;
}

.gender-button.selected{
  box-shadow:0 1.86vw 4.65vw rgba(0,0,0,0.1);
}

.checkbox-group{
  margin:min(3.72vw, 6.7vh) 0;
}

.checkbox-group input[type="checkbox"]{
  width:4.19vw;
  height:min(4.19vw, 7.54vh);
}

.checkbox-group label span{
  font-size:min(3.02vw, 5.44vh);
}

.submit-button{
  height:min(12.09vw, 21.76vh);
  font-size:min(3.72vw, 6.7vh);
  border-radius:3.26vw;
}

/* ===== 14. 섹션 10 - 검증된 서비스 (인증서) ===== */
#verified{
  padding:min(9.3vw, 16.74vh) 0 0;
}

.verified-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
  width:100%;
}

.verified-header{
  margin:min(4.65vw, 8.37vh) 0 min(3.72vw, 6.7vh) 0;
  padding:0 4.65vw;
}

.verified-header h2{
  font-size:min(5.12vw, 9.22vh);
  margin-bottom:min(1.86vw, 3.35vh);
}

.verified-header p{
  font-size:min(3.02vw, 5.44vh);
}

#verified::before{
  width:9.3vw;
}
#verified::after{
  width:9.3vw;
}

.certificate-item{
  width:37.21vw; /* 160 */
  height:min(49.53vw, 89.15vh); /* 213 */
  border-radius:2.79vw;
  box-shadow:0 1.86vw 4.65vw rgba(0,0,0,0.1);
}

.certificate-title{
  font-size:min(2.79vw, 5.02vh);
  padding:min(1.86vw, 3.35vh);
}

.certificates-slider{
  --gap:2.33vw;
}


/* ===== 16. (orientation 블록 제거됨 — width breakpoint로 전환) ===== */


/* ===== 17. 작은 화면 (≤500px) ===== */
@media (max-width:500px){
  html{ font-size:min(3.72vw, 6.7vh); /* 16/430 기준 유지 */ }

  .start-title{ font-size:min(5.87vw, 10.57vh); }
  .start-desc{ font-size:min(3.73vw, 6.71vh); }
  .start-label{ font-size:min(3.2vw, 5.76vh); }

  .quiz-option{
    width:10.67vw;
    height:min(10.67vw, 19.21vh);
    font-size:min(4.8vw, 8.64vh);
  }
  .option-label{ font-size:min(3.2vw, 5.76vh); }

  .quiz-question h4{
    font-size:min(4.27vw, 7.69vh);
  }

  .about-text h2{ font-size:min(5.33vw, 9.59vh); }
  .about-text p{ font-size:min(3.47vw, 6.25vh); }

  #services h2{ font-size:min(5.33vw, 9.59vh); }

  .service-cards{
    gap:min(2.5vw, 4.5vh) !important;
  }

  .service-header-fixed h2{ font-size:min(4.8vw, 8.64vh); }
  .service-chip{ font-size:min(2.93vw, 5.27vh); padding:min(1.6vw, 2.88vh) 3.2vw; background:transparent; }

  .matching-text-content h2{ font-size:min(4.8vw, 8.64vh); }

  .result-main-title .type-name{ font-size:min(6.4vw, 11.52vh); }
  .result-image-container img{
    width:58.67vw;
    height:min(44vw, 79.2vh);
  }
}


/* ===== 17-1. 소형~중형 화면 - 모바일 500px 고정 + 좌우 여백 ===== */
/* 500px~1023px: 500px 기준 px 고정, 나머지는 여백 */
/* 변환 공식: 원래 px값 * (500/430) ≈ 1.163 */
@media (min-width:500px) and (max-width:1023.98px){

  /* --- 레이아웃: 섹션은 전체 화면, 내부 콘텐츠만 500px --- */
  .section{
    width: 100vw;
    max-width: none;
  }

  /* 섹션 내부 콘텐츠 500px 중앙 정렬 */
  .section > *{
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 전체 화면 유지해야 하는 요소들 */
  #hero video,
  #signup video{
    max-width: none;
    width: 100%;
  }

  /* 매칭 카드 섹션: 여백 없이 전체 화면 */
  #matching-cards{
    width: 100vw;
    max-width: none;
    padding: 0;
    height: 100vh;
    overflow: hidden;
  }
  #matching-cards > *{
    max-width: none;
  }
  .matching-cards-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    min-height: auto !important;
    gap: 0;
  }
  .matching-card{
    position: relative;
    overflow: hidden;
    max-height: 50vh;
  }
  .matching-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* 라벨 기본 위치 고정 */
  .matching-label{
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 18.6px !important;
  }
  /* 호버 효과: 라벨만 살짝 확대 */
  .matching-card:hover img{ transform: none !important; }
  .matching-card:hover .matching-overlay{ background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%) !important; }
  .matching-card:not(.expanded):hover .matching-label{
    transform: translate(-50%, -50%) scale(1.05) !important;
  }
  /* 클릭(expanded) 시 전체화면 */
  .matching-card.expanded{
    max-height: none !important;
    height: 100vh !important;
  }
  .matching-card.expanded .matching-label{
    top: 42px !important;
    left: 28px !important;
    transform: none !important;
    font-size: 18.6px !important;
  }

  /* --- 기본 폰트 크기 고정 --- */
  html{ font-size: 18.6px; }

  /* --- 네비게이션 --- */
  nav{ height: 79px; padding: 0 18.6px; }
  .logo-icon{ width: 39.5px; height: 39.5px; }
  .logo-text h1{ font-size: 18.6px; }
  .logo-text p{ font-size: 14px; letter-spacing: -0.3px; }
  .hamburger-btn{ width: 51px; height: 51px; }
  .hamburger-btn svg{ width: 28px; height: 28px; }

  /* --- 모바일 메뉴 --- */
  .mobile-menu-overlay{ padding-top: 98px; }
  .mobile-menu-panel{ width: 418px; gap: 25.6px; }
  .mobile-menu-close{ top: -7px; width: 51px; height: 51px; font-size: 32.5px; }
  .mobile-menu-list{ gap: 21px; }
  .mobile-menu-list li{ font-size: 18.6px; letter-spacing: -0.7px; }
  .mobile-menu-list li.active{ text-underline-offset: 7px; }
  /* --- 토스트 --- */
  .toast-notification{
    top: 93px;
    transform: translateX(-50%) translateY(-70px);
    padding: 14px 28px;
    border-radius: 9.3px;
    font-size: 16.3px;
    box-shadow: 0 9.3px 28px rgba(0,0,0,0.3);
  }

  /* --- 퀴즈 시작 화면 --- */
  .quiz-start{
    gap: 32.5px;
    padding: 93px 23.3px 46.5px;
  }
  .start-header{ gap: 11.6px; }
  .start-pretitle{ font-size: 18.6px; letter-spacing: -0.5px; }
  .start-title{ font-size: 30.2px; letter-spacing: -0.7px; }
  .start-body{ gap: 18.6px; }
  .start-desc{ font-size: 17.4px; letter-spacing: -0.35px; padding: 0 11.6px; }
  .start-label{ font-size: 16.3px; letter-spacing: -0.35px; }
  .start-footer{ padding: 0 23.3px; }
  .start-button{ height: 60.5px; font-size: 18.6px; border-radius: 30.2px; padding: 0 35px; }

  /* --- 퀴즈 카드 --- */
  .quiz-card{
    width: 450px;
    max-width: 450px;
    padding: 23.3px;
    border-radius: 25.6px;
  }
  .progress-bar-container{ margin-top: 7px; margin-bottom: 18.6px; gap: 7px; }
  .progress-bar{ height: 7px; border-radius: 3.5px; }
  .progress-fill{ border-radius: 3.5px; }
  .question-number{ font-size: 15.1px; margin: 0 auto 11.6px auto; }
  .quiz-question h4{ font-size: 21px; letter-spacing: -0.6px; margin: 0 auto 18.6px auto; }
  .quiz-options{ gap: 10.5px; margin: 0 auto 11.6px auto; }
  .quiz-option-wrapper{
    gap: 16.3px;
    padding: 12.8px 18.6px;
    border-radius: 15.1px;
    border-width: 1.2px;
  }
  .quiz-option{
    width: 46.5px;
    height: 46.5px;
    min-width: 46.5px;
    font-size: 21px;
    border-radius: 14px;
  }
  .option-label{ font-size: 17.4px; }
  .prev-button{ margin-top: 7px; }
  .prev-btn{ font-size: 16.3px; gap: 4.7px; }
  .prev-btn img{ width: 18.6px; height: 18.6px; }

  /* --- 퀴즈 결과 카드 --- */
  .quiz-result-card{
    width: 450px;
    max-width: 450px;
    padding: 23.3px;
    border-radius: 25.6px;
  }
  .result-pretitle{ font-size: 17.4px; margin: 9.3px 0; }
  .result-main-title .type-name{ font-size: 32.5px; }
  .result-main-title .suffix{ font-size: 23.3px; }
  .result-subtitle{ font-size: 18.6px; margin: 0 0 18.6px 0; }
  .result-image-container{ margin: 0 0 18.6px 0; }
  .result-image-container img{
    width: 302px;
    height: 227px;
    border-radius: 18.6px;
    box-shadow: 0 9.3px 28px rgba(0,0,0,0.15);
  }
  .result-buttons{ gap: 11.6px; }
  .result-btn{ height: 56px; border-radius: 28px; font-size: 17.4px; }

  /* --- 모달 --- */
  .modal-overlay{ padding: 18.6px; }
  .modal-container{
    max-width: 442px;
    border-radius: 18.6px;
    box-shadow: 0 23.3px 70px rgba(0,0,0,0.5);
  }
  .modal-header{ padding: 14px 18.6px; border-bottom-width: 1.2px; }
  .modal-close{ font-size: 28px; width: 42px; height: 42px; }
  .modal-content{ max-height: calc(90vh - 163px); padding: 18.6px; }
  .modal-content::-webkit-scrollbar{ width: 4.7px; }
  .modal-content img{ border-radius: 9.3px; }
  .modal-footer{ padding: 16.3px 18.6px; border-top-width: 1.2px; gap: 11.6px; }
  .modal-btn{ padding: 14px 23.3px; border-radius: 28px; font-size: 16.3px; }
  .modal-btn-primary{ min-width: 163px; }
  .modal-btn-secondary{ min-width: 93px; }

  /* --- About 섹션 --- */
  .about-text{
    left: 28px;
    right: 28px;
  }
  .about-text h2{ font-size: 28px; letter-spacing: -0.7px; margin-bottom: 21px; }
  .about-text p{ font-size: 16.3px; letter-spacing: -0.35px; margin-bottom: 14px; }

  /* --- 서비스 비교 섹션 --- */
  #services{ padding: 79px 0 20px 0 !important; justify-content:center !important; }
  #services h2{ font-size: 25.6px; margin: 0 auto 15px; padding-bottom: 5px; border-bottom-width: 2.3px; }
  .service-cards{ gap:16px !important; padding:0 30px 15px !important; overflow:hidden !important; }
  .compare-card{ max-width:500px; padding:18px 22px !important; border-radius:13px !important; gap:14px !important; }
  .compare-card-center{ padding:24px 26px !important; width:calc(100% - 20px) !important; }
  .compare-card-center .compare-card-tags{ padding:0 !important; }
  .compare-card-header{ width:90px !important; gap:6px !important; }
  .compare-card-header h3{ font-size:16px !important; }
  .compare-card-center .compare-card-header{ width:110px !important; }
  .compare-card-center .compare-card-header h3{ font-size:16px !important; }
  .compare-card-icon{ width:44px !important; }
  .compare-card-logo{ width:60px !important; }
  .compare-card-subtitle{ font-size:10px !important; }
  .compare-tag{ font-size:12.5px !important; padding:6px 11px !important; border-radius:9px !important; }
  .compare-card-tags{ gap:7px !important; }

  /* --- 사소한소개 섹션 --- */
  .service-details-content{ padding: 93px 18.6px 28px; }
  .service-header-fixed{ margin-top: 25px; margin-bottom: 18.6px; }
  .service-header-fixed h2{ font-size: 25.6px; margin-bottom: 11.6px; padding-bottom: 9.3px; border-bottom-width: 2.3px; }
  .service-header-fixed .subtitle{ font-size: 18.6px; margin-bottom: 9.3px; }
  .service-header-fixed .description{ font-size: 15.1px; }
  .service-middle-section{ margin: 20px 0; padding: 14px 0; margin-left: -18.6px; margin-right: -18.6px; width: calc(100% + 37.2px); }
  .service-chips{ gap: 9.3px; padding: 0 11.6px; }
  .service-chip{ padding: 9.3px 18.6px; font-size: 15.1px; border-radius: 23.3px; }
  .service-center-content{ padding: 10px 0 0; }
  .service-center-title{ font-size: 21px; margin-bottom: 16.3px; }
  .service-center-description p{ font-size: 15.1px; margin-bottom: 7px; }

  /* --- 매칭 소개 섹션 --- */
  .matching-text-content{
    left: 28px;
    right: 28px;
  }
  .matching-text-content h2{ font-size: 25.6px; margin-bottom: 14px; padding-bottom: 14px; border-bottom-width: 2.3px; }
  .matching-text-content p{ font-size: 16.3px; margin-bottom: 16.3px; }

  /* --- 매칭 카드 섹션 (전체화면 유지) --- */
  #matching-service{
    width: 100vw;
    max-width: none;
  }
  .matching-label{ font-size: 18.6px; }
  .matching-content h3{ font-size: 21px; margin-bottom: 11.6px; }
  .matching-content p{ font-size: 14px; }
  .matching-card.expanded .matching-label{ top: 42px; left: 28px; font-size: 18.6px; }
  .matching-card.expanded .matching-content{ padding: 0 28px 46.5px; }
  .matching-card.expanded .matching-content h3{ font-size: 28px; margin-bottom: 18.6px; }
  .matching-card.expanded .matching-content p{ font-size: 17.4px; }

  /* --- 리뷰 섹션 --- */
  #reviews{ padding: 0 18.6px; }
  .reviews-container h2{ font-size: 28px; margin-bottom: 28px; }
  .review-slider{ padding: 23.3px 0; }
  .review-text{ font-size: 21px; margin: 18.6px 0; }
  .review-subtitle{ font-size: 15.1px; margin-top: 23.3px; }
  .swiper-button-next,
  .swiper-button-prev{ width: 50px; height: 50px; }
  .swiper-button-next::after,
  .swiper-button-prev::after{ font-size: 25px; }

  /* --- 상담신청 섹션 --- */
  #signup{ padding: 0 18.6px; }
  .signup-card{
    padding: 28px 23.3px;
    border-radius: 21px;
    backdrop-filter: blur(11.6px);
    box-shadow: 0 23.3px 70px rgba(0,0,0,0.15);
  }
  .form-row{ gap: 11.6px; }
  .form-group{ margin-bottom: 16.3px; }
  .form-group label{ font-size: 16.3px; margin-bottom: 7px; }
  .form-group input,
  .form-group select{
    padding: 14px 16.3px;
    font-size: 17.4px;
    border-width: 1.75px;
    border-radius: 14px;
  }
  .gender-buttons{ height: 56px; gap: 9.3px; }
  .gender-button{ padding: 11.6px 23.3px; font-size: 17.4px; border-radius: 14px; }
  .gender-button.selected{ box-shadow: 0 9.3px 23.3px rgba(0,0,0,0.1); }
  .checkbox-group{ margin: 18.6px 0; }
  .checkbox-group input[type="checkbox"]{ width: 21px; height: 21px; }
  .checkbox-group label span{ font-size: 15.1px; }
  .submit-button{ height: 60.5px; font-size: 18.6px; border-radius: 16.3px; }

  /* --- 인증서 섹션 --- */
  #verified{ padding: 46.5px 0 0; }
  .verified-header{ margin: 23.3px 0 18.6px 0; padding: 0 23.3px; }
  .verified-header h2{ font-size: 25.6px; margin-bottom: 9.3px; }
  .verified-header p{ font-size: 15.1px; }
  #verified::before,
  #verified::after{ width: 46.5px; }
  .certificate-item{
    width: 186px;
    height: 248px;
    border-radius: 14px;
    box-shadow: 0 9.3px 23.3px rgba(0,0,0,0.1);
  }
  .certificate-title{ font-size: 14px; padding: 9.3px; }
  .certificates-slider{ --gap: 11.6px; }

  /* --- 푸터 섹션 (500~1024 태블릿 세로) --- */
  .footer-section-inner{
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 80px 0 10px;
  }
  .footer-columns{
    flex: 1;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
  }
  .footer-col--info,
  .footer-col--nav,
  .footer-col--map{
    min-width: unset;
    max-width: none;
    flex: none;
  }
  .footer-col--nav{
    flex-direction: column;
    gap: 20px;
  }
  .footer-business-info{
    font-size: 13px;
    line-height: 2.2;
  }
  .footer-nav-group h4.footer-nav-title{
    font-size: 16px;
    margin-bottom: 10px;
  }
  .footer-nav-group ul li{
    margin-bottom: 7px;
  }
  .footer-nav-group ul li a{
    font-size: 13px;
  }
  .footer-map-container{
    border-radius: 8px;
  }
  .footer-map-container iframe{
    height: 200px;
  }
  .footer-address{
    font-size: 12px;
    margin: 8px 0 0;
  }
  .footer-copyright{
    margin-top: auto;
    font-size: 11px;
    padding-top: 12px;
  }

}


/* =========================
   푸터 섹션 (모바일 ~500px 세로)
   ========================= */
@media (max-width:499.98px){
  /* vh 배분 (총 ≈91vh, 100vh 이내)
     padding-top 11 + padding-bottom 1.2
     gap×2 5.4 + nav-gap 2.4
     biz-info 1.8×1.9×6=20.52
     nav-title×2+mb (2.2+1.2)×2=6.8
     nav-links (1.8+0.9)×6=16.2
     map 22 + addr 1.65+1.05=2.7
     copyright 1.5+1.5=3.0
  */
  .footer-section-inner{
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: min(18.60vw, 11vh) min(3.72vw, 2.40vh) min(2.33vw, 1.20vh); /* 80 16 10 @430 */
  }
  .footer-columns{
    flex: 1;
    flex-direction: column;
    gap: min(5.58vw, 2.70vh); /* 24 */
    align-items: stretch;
  }
  .footer-col--info,
  .footer-col--nav,
  .footer-col--map{
    min-width: unset;
    max-width: none;
    flex: none;
  }
  .footer-col--nav{
    gap: min(4.65vw, 2.40vh); /* 20 */
  }
  .footer-business-info{
    font-size: min(3.02vw, 1.80vh); /* 13 */
    line-height: 1.9;
  }
  .footer-nav-group h4.footer-nav-title{
    font-size: min(3.72vw, 2.20vh); /* 16 */
    margin-bottom: min(2.33vw, 1.20vh); /* 10 */
  }
  .footer-nav-group ul li{
    margin-bottom: min(1.63vw, 0.90vh); /* 7 */
  }
  .footer-nav-group ul li a{
    font-size: min(3.02vw, 1.80vh); /* 13 */
  }
  .footer-map-container{
    border-radius: min(1.86vw, 1.20vh); /* 8 */
  }
  .footer-map-container iframe{
    height: min(46.51vw, 22vh); /* 200 @430 → 짧은화면 축소 */
  }
  .footer-address{
    font-size: min(2.79vw, 1.65vh); /* 12 */
    margin: min(1.86vw, 1.05vh) 0 0; /* 8 */
  }
  .footer-copyright{
    margin-top: auto;
    font-size: min(2.56vw, 1.50vh); /* 11 */
    padding-top: min(2.79vw, 1.50vh); /* 12 */
  }
}


/* ===== 18-1. 중형 화면 + 높이 제한 (폰 가로모드) ===== */
/* 기준: 932×430  |  vh 변환 = vw × 2.168 */
@media (min-width:768px) and (max-width:1023.98px) and (max-height:500px){
  :root{ --vwBase: calc(100vw / 932); }
  html{ font-size:min(1.72vw, 3.73vh); }

  /* --- 네비게이션 --- */
  nav{ height:min(7vw, 15.18vh); padding:0 min(2vw, 4.34vh); }
  .logo-icon{ width:min(4vw, 8.67vh); height:min(4vw, 8.67vh); }
  .logo-text h1{ font-size:min(2vw, 4.34vh); }
  .logo-text p{ font-size:min(1.3vw, 2.82vh); }

  /* --- 헤더 메뉴 탭 텍스트 축소 + 스크롤 --- */
  .mobile-menu-overlay{
    padding-top:min(6vw, 13vh);
    align-items:flex-start;
    overflow-y:auto;
  }
  .mobile-menu-panel{
    gap:min(2vw, 4.34vh);
    max-height:calc(100vh - min(8vw, 17.34vh));
    padding-bottom:min(4vw, 8.67vh);
  }
  .mobile-menu-list{
    gap:min(2vw, 4.34vh);
  }
  .mobile-menu-list li{ font-size:min(1.8vw, 3.9vh); }
  /* --- 히어로 섹션: 헤더 아래 중앙 배치 --- */
  #hero{
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:min(7vw, 15.18vh); /* 헤더 높이만큼 */
    box-sizing:border-box;
  }
  #hero video{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    max-height:calc(100vh - min(7vw, 15.18vh));
    width:auto;
    margin:0 auto;
  }

  /* --- 이상형 테스트 --- */
  #ideal-type{
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:min(6vw, 13vh); /* 헤더 높이만큼 */
  }
  .ideal-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:calc(100vh - min(6vw, 13vh));
  }
  .quiz-start{
    padding:min(2vw, 4.34vh) min(3vw, 6.5vh);
    gap:min(1.2vw, 2.6vh);
    min-height:auto;
    justify-content:center;
  }
  .start-title{ font-size:min(2.5vw, 5.42vh); }
  .start-desc{ font-size:min(1.5vw, 3.25vh); }
  .start-label{ font-size:min(1.3vw, 2.82vh); }
  .start-button{
    width:min(40vw, 70vh);
    height:min(6vw, 12vh);
    font-size:min(1.5vw, 3.25vh);
    border-radius:min(2.5vw, 5.42vh);
  }

  .quiz-card{
    width:min(80vw, 90vh); max-width:min(80vw, 90vh); margin:0 auto;
    padding:min(2vw, 4.34vh) min(3vw, 6.5vh); border-radius:min(2.5vw, 5.42vh);
    height:auto; max-height:none; overflow:visible;
  }
  .quiz-question h4{ font-size:min(2vw, 4.34vh); }
  .quiz-options{
    flex-direction:row;
    justify-content:center;
    align-items:stretch;
    gap:min(1.2vw, 2.6vh);
  }
  .quiz-option-wrapper{
    flex:1 1 0;
    max-width:18%;
    flex-direction:column;
    align-items:center;
    padding:min(1vw, 2.17vh) min(0.5vw, 1.08vh);
    gap:min(0.4vw, 0.87vh);
    border-radius:min(1.3vw, 2.82vh);
    border:none;
    background:transparent;
    transition:none;
  }
  .quiz-option{
    width:min(5vw, 10.84vh); height:min(5vw, 10.84vh); min-width:min(5vw, 10.84vh);
    font-size:min(2vw, 4.34vh); border-radius:min(1.5vw, 3.25vh);
  }
  .option-label{ font-size:min(1.2vw, 2.6vh); }

  /* --- 결과 카드 + 이미지 표시 수정 --- */
  .quiz-result-card{
    width:min(80vw, 90vh); max-width:min(80vw, 90vh); margin:0 auto;
    padding:min(1.5vw, 3.25vh) min(3vw, 6.5vh); border-radius:min(2.5vw, 5.42vh);
    height:auto; max-height:90vh; overflow:auto;
  }
  .result-main-title .type-name{ font-size:min(2.8vw, 6.07vh); }
  .result-pretitle{ font-size:min(1.5vw, 3.25vh); margin:min(0.5vw, 1.08vh) 0; }
  .result-subtitle{ font-size:min(1.5vw, 3.25vh); margin:0 0 min(1vw, 2.17vh) 0; }
  .result-image-container{
    margin:0 0 min(1vw, 2.17vh) 0;
  }
  .result-image-container img{
    width:min(18vw, 39.02vh); height:min(14vw, 30.35vh); border-radius:min(1.8vw, 3.9vh);
  }
  .result-buttons{ gap:min(1vw, 2.17vh); }
  .result-btn{ height:min(4vw, 8.67vh); font-size:min(1.3vw, 2.82vh); border-radius:min(2vw, 4.34vh); padding:0 min(2vw, 4.34vh); }

  /* --- 모달 축소 --- */
  .modal-header{ padding:min(1.5vw, 3.25vh) min(3vw, 6.5vh); }
  .modal-close{ font-size:min(3vw, 6.5vh); width:min(5vw, 10.84vh); height:min(5vw, 10.84vh); }
  .modal-footer{ padding:min(1.5vw, 3.25vh) min(3vw, 6.5vh); gap:min(1.5vw, 3.25vh); }
  .modal-btn{ padding:min(1.5vw, 3.25vh) min(3vw, 6.5vh); font-size:min(1.3vw, 2.82vh); }
  .modal-content{ max-height:calc(90vh - min(15vw, 32.52vh)); padding:min(2vw, 4.34vh); }

  /* --- 소개 섹션 --- */
  .about-text{ top:55%; }
  .about-text h2{ font-size:min(2.5vw, 5.42vh); margin-bottom:min(1.5vw, 3.25vh); }
  .about-text p{ font-size:min(1.4vw, 3.04vh); line-height:1.4; margin-bottom:min(0.6vw, 1.3vh); }

  /* --- 비교섹션: 헤더 아래 + 이미지 하단 정렬 --- */
  #services{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:min(7vw, 15.18vh) 0 0 0 !important; /* 헤더 높이만큼 상단 패딩 */
    box-sizing:border-box;
  }
  #services h2{
    font-size:min(2vw, 4.34vh);
    margin:min(1vw, 2.17vh) 0;
    padding-bottom:min(0.5vw, 1.08vh);
    border-bottom-width:min(0.1vw, 0.22vh);
  }

  /* 폰 가로모드: 세로 카드로 가로 배치, 막대그래프 느낌 */
  .service-cards{
    flex-direction:row !important;
    align-items:flex-end !important;
    gap:min(1.2vw, 2.6vh) !important;
    padding:0 !important;
    overflow-y:visible;
  }
  .compare-card{
    flex-direction:column !important;
    width:auto !important;
    min-width:min(20vw, 43.4vh) !important;
    max-width:min(24vw, 52.1vh) !important;
    border-radius:min(1.2vw, 2.6vh) min(1.2vw, 2.6vh) 0 0 !important;
    padding:0 !important;
    gap:0 !important;
    align-items:center !important;
  }
  .compare-card-header{
    flex-direction:column !important;
    padding:min(2vw, 4.34vh) min(1.5vw, 3.25vh) !important;
    gap:min(0.5vw, 1.08vh) !important;
    width:100% !important;
  }
  .compare-card-header h3{ font-size:min(1.4vw, 3.04vh) !important; }
  .compare-card-center .compare-card-header h3{ font-size:min(1.6vw, 3.47vh) !important; }
  .compare-card-icon{ width:min(3.5vw, 7.59vh) !important; }
  .compare-card-logo{ width:min(5.5vw, 11.93vh) !important; }
  .compare-card-subtitle{ font-size:min(0.8vw, 1.74vh) !important; }
  .compare-card-tags{
    padding:min(1.5vw, 3.25vh) min(1.5vw, 3.25vh) min(2vw, 4.34vh) !important;
    gap:min(0.4vw, 0.87vh) !important;
    justify-content:center !important;
  }
  .compare-tag{ font-size:min(0.9vw, 1.95vh) !important; padding:min(0.4vw, 0.87vh) min(0.8vw, 1.74vh) !important; border-radius:min(0.7vw, 1.52vh) !important; }
  .compare-card-marriage{ order:0; }
  .compare-card-center{ order:0; }
  .compare-card-side:first-child{ order:0; }

  /* --- 사소한소개 (서비스 상세) 설명 텍스트 표시 --- */
  .service-details-content{
    display:flex;
    flex-direction:column;
    height:100vh;
    min-height:auto;
    overflow:visible;
    padding:min(7vw, 15.18vh) min(2vw, 4.34vh) min(2vw, 4.34vh);
  }
  .service-header-fixed{
    position:relative;
    top:auto;
    right:auto;
    text-align:center;
    margin-top:min(2vw, 4.34vh);
    margin-bottom:min(0.5vw, 1.08vh);
    padding-top:0;
    flex-shrink:0;
  }
  .service-header-fixed h2{ display:inline-block; font-size:min(2vw, 4.34vh); margin-bottom:min(0.5vw, 1.08vh); padding-bottom:min(0.15vw, 0.33vh); border-bottom-width:min(0.05vw, 0.11vh); }
  .service-header-fixed .subtitle{ font-size:min(1.4vw, 3.04vh); margin-bottom:min(0.3vw, 0.65vh); }
  .service-header-fixed .description{ font-size:min(1.1vw, 2.38vh); }
  .service-middle-section{
    margin:min(0.3vw, 0.65vh) 0;
    padding:min(0.3vw, 0.65vh) 0;
    margin-left:0;
    margin-right:0;
    width:100%;
    flex-shrink:0;
  }
  .service-chip{ font-size:min(1.1vw, 2.38vh); padding:min(0.4vw, 0.87vh) min(1.2vw, 2.6vh); background:transparent; }
  .service-center-content{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    padding:min(1.5vw, 3.25vh) min(2vw, 4.34vh) 0;
    overflow:auto;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  .service-center-title{ font-size:min(1.3vw, 2.82vh); margin-bottom:min(0.5vw, 1.08vh); }
  .service-center-description p{ font-size:min(0.9vw, 1.95vh); line-height:1.5; margin-bottom:min(0.25vw, 0.54vh); }

  /* --- 매칭 소개 (텍스트) - 헤더 가림 방지 + 텍스트 축소 --- */
  .matching-text-content{ top:58%; }
  .matching-text-content h2{ font-size:min(2vw, 4.34vh); padding-bottom:min(0.3vw, 0.65vh); border-bottom-width:min(0.05vw, 0.11vh); }
  .matching-text-content p{ font-size:min(1.2vw, 2.6vh); }

  /* --- 매칭 카드 2×2 그리드 통일 --- */
  .matching-cards-container{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    height:100vh;
    max-height:100vh;
    min-height:auto;
    gap:0;
    overflow:hidden;
  }
  .matching-card{
    flex:none;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    transition:none;
    min-height:0;
  }
  .matching-card img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .matching-card:hover{ flex:none; }
  .matching-card:hover .matching-content{ opacity:0; }
  .matching-label{
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    font-size:min(1.8vw, 3.9vh);
  }
  .matching-card:hover .matching-label{
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    font-size:min(1.8vw, 3.9vh);
  }

  /* --- 매칭 카드 확장 시 (가로모드) --- */
  .matching-card.expanded{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index:9999;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  .matching-card.expanded img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .matching-card.expanded .matching-overlay{
    background:linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100%) !important;
    pointer-events:none;
  }
  .matching-card.expanded .matching-label{
    top:min(4vw, 8.67vh);
    left:min(3vw, 6.5vh);
    transform:none;
    font-size:min(1.8vw, 3.9vh);
    font-weight:600;
  }
  .matching-card.expanded .matching-content{
    opacity:1 !important;
    pointer-events:auto;
    position:relative;
    bottom:auto;
    left:auto;
    right:auto;
    z-index:3;
    padding:0 min(3vw, 6.5vh) min(4vw, 8.67vh);
  }
  .matching-card.expanded .matching-content h3{
    font-size:min(2vw, 4.34vh);
    line-height:1.3;
    margin-bottom:min(1vw, 2.17vh);
  }
  .matching-card.expanded .matching-content p{
    font-size:min(1.2vw, 2.6vh);
    line-height:1.5;
  }

  /* --- 후기 - 가로모드 축소 --- */
  .reviews-container h2{ font-size:min(2.2vw, 4.77vh); margin-bottom:min(0.5vw, 1vh); margin-top:0; }
  .review-slider{ padding:min(1vw, 2vh) 0; }
  .review-text{ font-size:min(1.6vw, 3.47vh); margin:min(1vw, 2.17vh) 0; }
  .review-subtitle{ font-size:min(1.1vw, 2.38vh); margin-top:min(0.5vw, 1vh); }

  .review-card{ gap:min(1.5vw, 3vh); padding:min(1vw, 2vh); }
  .review-card-thumb{ width:min(18vw, 35vh); height:min(18vw, 35vh); }
  .review-card-thumb-empty svg{ width:min(4vw, 8vh); height:min(4vw, 8vh); }
  .review-card-text{ font-size:min(1.6vw, 3.47vh); }
  .review-admin-actions{ top:min(0.5vw, 1vh); right:min(0.5vw, 1vh); }
  .review-action-btn{ padding:min(0.8vw, 1.6vh); }
  .review-action-btn svg{ width:min(1.8vw, 3.6vh); height:min(1.8vw, 3.6vh); }
  .review-add-btn{ font-size:min(1.4vw, 3vh); padding:min(0.8vw, 1.6vh) min(2vw, 4vh); margin-bottom:min(0.5vw, 1vh); }

  .swiper-button-next,
  .swiper-button-prev{
    display:flex !important;
    width:min(5vw, 10.84vh); height:min(5vw, 10.84vh);
  }
  .swiper-button-next::after,
  .swiper-button-prev::after{
    font-size:min(2vw, 4.34vh);
  }

  /* --- 상담신청 컨테이너 축소 --- */
  #signup{
    padding:min(7vw, 15.18vh) min(2vw, 4.34vh) min(1vw, 2.17vh);
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
  }
  .signup-card{
    width:min(85vw, 184vh); max-width:min(85vw, 184vh); margin:0 auto;
    padding:min(1vw, 2.17vh) min(2.5vw, 5.42vh); border-radius:min(1.2vw, 2.6vh);
    height:auto; max-height:calc(100vh - min(8vw, 17.34vh)); overflow:auto;
  }
  .signup-card h2{ font-size:min(1.8vw, 3.9vh); margin-bottom:min(0.5vw, 1.08vh); }
  .form-row{ grid-template-columns:1fr 1fr; gap:min(0.6vw, 1.3vh); }
  .form-group{ margin-bottom:min(0.5vw, 1.08vh); }
  .form-group label{ font-size:min(1.2vw, 2.6vh); margin-bottom:min(0.2vw, 0.43vh); }
  .form-group input,
  .form-group select,
  .form-group textarea{ font-size:min(1.1vw, 2.38vh); padding:min(0.5vw, 1.08vh) min(1vw, 2.17vh); border-radius:min(0.6vw, 1.3vh); }
  .gender-buttons{ height:min(3.5vw, 7.59vh); gap:min(0.5vw, 1.08vh); }
  .gender-button{ padding:min(0.4vw, 0.87vh) min(1.5vw, 3.25vh); font-size:min(1.1vw, 2.38vh); border-radius:min(0.6vw, 1.3vh); }
  .checkbox-group{ margin:min(0.5vw, 1.08vh) 0; }
  .checkbox-group input[type="checkbox"]{ width:min(1.5vw, 3.25vh); height:min(1.5vw, 3.25vh); border-radius:min(0.3vw, 0.65vh); }
  .checkbox-group label span{ font-size:min(1.1vw, 2.38vh); }
  .submit-button{ height:min(3.5vw, 7.59vh); font-size:min(1.3vw, 2.82vh); border-radius:min(0.8vw, 1.73vh); }

  /* --- 검증된 서비스: 가로모드 한 줄로 --- */
  #verified{
    padding:min(7vw, 15.18vh) 0 min(2vw, 4.34vh);
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .verified-header{ margin-bottom:min(2vw, 4.34vh); }
  .verified-header h2{ font-size:min(2.5vw, 5.42vh); margin-bottom:min(0.5vw, 1.08vh); }
  .verified-header p{ font-size:min(1.3vw, 2.82vh); }

  /* 두 번째 슬라이더 숨김 */
  .certificates-slider-2{
    display:none !important;
  }

  .certificate-item{
    width:min(12vw, 26vh); height:min(16vw, 34.69vh); border-radius:min(1vw, 2.17vh);
  }
  .certificate-title{ font-size:min(1.1vw, 2.38vh); padding:min(0.5vw, 1.08vh); }
  .certificates-slider{ --gap:min(1vw, 2.17vh); }

  /* --- 푸터 섹션 (가로모드 = 데스크톱 축소) --- */
  /* 기준: 932×430, vw=px/932*100, vh=vw*2.168 */
  .footer-section-inner{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    padding: min(8.58vw, 18.60vh) min(2.15vw, 4.66vh) min(1.07vw, 2.32vh); /* 80 20 10 */
  }
  .footer-columns{
    flex: 1;
    flex-direction: row;
    gap: min(3.22vw, 6.98vh); /* 30 */
    align-items: flex-start;
  }
  .footer-col--info,
  .footer-col--nav,
  .footer-col--map{
    flex: none;
    min-width: unset;
    max-width: none;
  }
  .footer-col--info{
    flex: 0 0 auto;
  }
  .footer-col--nav{
    flex: 0 0 auto;
    flex-direction: column;
    gap: min(1.61vw, 3.49vh); /* 15 */
  }
  .footer-col--map{
    flex: 1;
    min-width: 0;
  }
  .footer-business-info{
    font-size: min(1.29vw, 2.80vh); /* 12 */
    line-height: 2.2;
  }
  .footer-nav-group h4.footer-nav-title{
    font-size: min(1.50vw, 3.25vh); /* 14 */
    margin-bottom: min(0.64vw, 1.39vh); /* 6 */
  }
  .footer-nav-group ul li{
    margin-bottom: min(0.43vw, 0.93vh); /* 4 */
  }
  .footer-nav-group ul li a{
    font-size: min(1.29vw, 2.80vh); /* 12 */
  }
  .footer-map-container iframe{
    height: min(25.75vw, 55.83vh); /* 240 */
  }
  .footer-address{
    font-size: min(1.18vw, 2.56vh); /* 11 */
    margin: min(0.54vw, 1.17vh) 0 0; /* 5 */
  }
  .footer-copyright{
    font-size: min(1.07vw, 2.32vh); /* 10 */
    margin-top: auto;
    padding-top: min(0.75vw, 1.63vh); /* 7 */
  }

  /* --- fullPage 네비게이션 도트 축소 (가로모드) --- */
  #fp-nav.right{
    right: min(0.8vw, 1.74vh);
  }
  #fp-nav ul li{
    width: min(1.8vw, 3.90vh);
    height: min(1.8vw, 3.90vh);
    margin: min(0.4vw, 0.87vh);
  }
  #fp-nav ul li a span{
    width: min(0.86vw, 1.86vh);
    height: min(0.86vw, 1.86vh);
    margin: calc(min(0.86vw, 1.86vh) / -2) 0 0 calc(min(0.86vw, 1.86vh) / -2);
  }
  #fp-nav ul li a.active span,
  #fp-nav ul li:hover a.active span{
    width: min(1.29vw, 2.80vh);
    height: min(1.29vw, 2.80vh);
    margin: calc(min(1.29vw, 2.80vh) / -2) 0 0 calc(min(1.29vw, 2.80vh) / -2);
  }
}

/* =========================
   약관 모달 (모바일)
   ========================= */
.legal-modal {
    max-width: 95%;
}

.legal-modal .modal-header h3 {
    font-size: 14px;
}

.legal-content {
    font-size: 12px;
    line-height: 1.7;
}