/**
 * QupidAI — Mobile / responsive styles
 * Extracted from layout, common, contents, service, main-v2, susipro, main.
 * Load after other qupid CSS files.
 */

/*
 * PC 접속 권장 바텀시트 (#pcNotice)
 * - 기본 닫힘 / .is-open 시 아래에서 위로 슬라이드
 * - 지정 서비스: 첫 로드 자동 노출 (layout.js), 딤 없음
 */
.mobile-bottomsheet,
#pcNotice {
  display: none;
}

.pc-notice-dim,
#pcNoticeDim {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

@media screen and (max-width: 1024px) {
  .mobile-bottomsheet,
  #pcNotice {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: #fff;
    color: #111;
    padding: 12px 20px calc(32px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.25);
    /* GNB(1200) > 시트(1150) > bottom-dock(1100) */
    z-index: 1150 !important;
    text-align: center;
    line-height: 1.5;
    max-height: 90vh;
    overflow-y: auto;
    touch-action: none;
    box-sizing: border-box;
    /* 닫힘: 화면 아래 */
    transform: translate3d(0, 110%, 0);
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0.34s;
    will-change: transform;
  }

  .mobile-bottomsheet.is-open,
  #pcNotice.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-bottomsheet.is-dragging,
  #pcNotice.is-dragging {
    transition: none;
    user-select: none;
  }

  .mobile-bottomsheet .mbs-handle,
  #pcNotice .mbs-handle {
    cursor: grab;
    touch-action: none;
  }

  .mobile-bottomsheet.is-dragging .mbs-handle,
  #pcNotice.is-dragging .mbs-handle {
    cursor: grabbing;
  }
}

@media screen and (min-width: 1025px) {
  .mobile-bottomsheet,
  #pcNotice {
    display: none !important;
  }
}

/* ========== from layout.css ========== */

@media screen and (max-width: 1024px) {
  .footer-wrap {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    padding: 20px 20px 24px;
    box-sizing: border-box;
  }

  .footer-wrap > div {
    width: 100%;
    padding: 0;
  }

  .footer-wrap > div + div {
    padding: 0;
  }

  .footer-mo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
    padding: 10px 0;
  }

  .footer-mo-head .qupidAi-logo {
    font-size: 0;
    width: 93px;
    height: 22px;
    margin: 0;
    flex-shrink: 0;
    background: url(../../image/qupid/footer-qupidAi-logo.svg) left center / contain no-repeat;
  }

  .footer-logo-pc {
    display: none !important;
  }

  .footer-biz-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
  }

  .footer-biz-toggle::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("../../image/qupid/ico-acc-arrow.svg") center / 16px 16px no-repeat;
    transition: transform 0.2s ease;
    opacity: 0.75;
  }

  .footer-wrap.is-biz-open .footer-biz-toggle::after {
    transform: rotate(180deg);
  }

  .footer-wrap .qupid-info-wrap {
    width: 100%;
  }

  .footer-wrap .qupid-info-wrap .qupid-info {
    display: none;
    margin: 0;
    padding: 0 0 8px;
  }

  .footer-wrap.is-biz-open .qupid-info-wrap .qupid-info {
    display: block;
  }

  .footer-wrap .qupid-info-wrap .qupid-info span {
    display: block;
    font-size: 12px;
    line-height: 18px;
    color: rgba(255, 255, 255, 0.6);
    word-break: keep-all;
  }

  .footer-wrap .qupid-info-wrap .qupid-info span + span {
    margin-top: 2px;
  }

  .footer-wrap .qupid-info-wrap .qupid-info a {
    margin-left: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
  }

  .footer-wrap .qupid-info-wrap .qupid-info span.footer-info-cs {
    display: block;
  }

  .footer-copy-pc {
    display: none !important;
  }

  .footer-wrap .customer-wrap {
    align-items: flex-start;
    margin-top: 8px;
    padding-top: 0;
  }

  .footer-wrap .customer-wrap > div:first-child {
    align-items: flex-start;
    width: 100%;
  }

  .footer-wrap .customer-wrap .customer-info {
    display: none;
  }

  .footer-wrap .customer-wrap .terms-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin-top: 0;
  }

  .footer-wrap .customer-wrap .terms-list a {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    white-space: nowrap;
  }

  .footer-wrap .customer-wrap .terms-list a + a {
    margin-left: 0;
  }

  .footer-wrap .customer-wrap .terms-list a + a::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    margin: 0 8px;
    background: rgba(255, 255, 255, 0.3);
    vertical-align: middle;
  }

  .footer-wrap .customer-wrap .sns-list {
    display: none;
  }

  .footer-copy-mo {
    display: block;
    margin-top: 12px;
    font-size: 11px;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.3);
  }

  .scrollToTopBtn {
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    border-radius: 44px;
  }


  /* 서비스 aiu-link-wrap 옆 — 상단이동이 바 위로 오도록 */
  body:has(.aiu-link-wrap) .scrollToTopBtn,
  .qupid-wrap:has(.aiu-link-wrap) .scrollToTopBtn {
    z-index: 40;
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    right: 20px;
  }
}

/* 태블릿: aiu 박스 폭 축소 → 우측 상단이동 버튼과 나란히 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .service-wrap .aiu-link-wrap,
  .aiu-link-wrap {
    width: calc(100% - 140px);
    max-width: calc(100% - 140px);
  }

  .service-wrap .aiu-link-wrap.aip,
  .aiu-link-wrap.aip {
    width: calc(100% - 140px);
    max-width: calc(100% - 140px);
  }

  body:has(.aiu-link-wrap) .scrollToTopBtn,
  .qupid-wrap:has(.aiu-link-wrap) .scrollToTopBtn {
    z-index: 40;
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    right: 20px;
  }
}

@media screen and (max-width: 768px) {
  .footer-wrap {
    padding: 12px 20px 20px;
  }

  /* 모바일: aiu-link-wrap과 겹치므로 상단이동 숨김 */
  body:has(.aiu-link-wrap) .scrollToTopBtn,
  .qupid-wrap:has(.aiu-link-wrap) .scrollToTopBtn {
    display: none !important;
  }
}

@media screen and (max-width: 1024px) {
  /* PC 고정폭 해제 — 모바일/패드 가로 스크롤 방지 */
  .qupid-wrap {
    min-width: 0;
    width: 100%;
    overflow-x: clip;
  }

  #gnb-wrap {
    z-index: 1200; /* PC안내 시트(1150)·bottom-dock(1100)보다 위 */
  }

  .qupid-wrap .gnb {
    position: relative;
    top: 0;
    z-index: 1200;
    min-width: 0;
    width: 100%;
    min-height: 55px;
    height: 55px;
    padding: 0 20px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    overflow: visible;
    box-sizing: border-box;
    /* backdrop-filter 있으면 fixed 메뉴가 GNB(55px)에 갇혀 히어로에 가려짐 */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .qupid-wrap .gnb .gnb-logo {
    width: 93px;
    height: 22px;
    margin: 0;
    padding: 0;
    line-height: 0;
    flex-shrink: 0;
    align-self: center;
    order: 1;
  }

  .qupid-wrap .gnb .gnb-logo a {
    display: block;
    width: 93px;
    height: 22px;
    margin: 0;
    padding: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
  }

  /* PC 우측 버튼(알림 포함) 숨김 */
  .qupid-wrap .gnb .gnb-btn {
    display: none !important;
  }

  .gnb-mo-toggle,
  .gnb-mo-close {
    order: 10;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 24px;
    height: 24px;
    margin-left: auto;
    flex-shrink: 0;
    border: 0;
    padding: 0;
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    font-size: 0;
  }

  .gnb-mo-toggle {
    background-image: url("../../image/qupid/ico-hamburger.svg");
  }

  .gnb-mo-close {
    display: none !important;
    background-image: url("../../image/qupid/btn-close-w.svg");
  }

  /* 닫힌 상태: 인증영역 숨김 / 열린 상태: 로그인 전·후 노출 */
  .gnb-mo-auth {
    display: none !important;
    order: 2;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .gnb-mo-auth-before a {
    color: var(--wh100);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
  }

  .gnb-mo-divider {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: var(--wh30);
    flex-shrink: 0;
  }

  .gnb-mo-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--wh100);
    font-size: 14px;
    font-weight: 600;
  }

  .gnb-mo-user img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
  }

  .gnb-mo-user em {
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gnb-mo-my {
    flex-shrink: 0;
    color: var(--wh80);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  .gnb-mo-logout {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 0;
    background: url("../../image/qupid/ico-logout.svg") center / 22px 22px no-repeat;
  }

  /* 메뉴 패널: 기본 숨김 — viewport fixed (backdrop-filter 없는 GNB 기준) */
  .qupid-wrap .gnb .gnb-menu-wrap {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 55px;
    bottom: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    z-index: 1201;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--neutrals-bg-800);
    box-sizing: border-box;
    padding: 8px 20px 40px;
    order: 20;
  }

  .qupid-wrap .gnb .gnb-menu-wrap .gnb--bg {
    display: none !important;
  }

  .qupid-wrap .gnb .gnb-menu {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 100%;
    min-height: 0;
    align-items: stretch;
  }

  .qupid-wrap .gnb .gnb-menu > li {
    width: 100%;
  }

  .qupid-wrap .gnb .gnb-menu > li:hover::before {
    display: none;
  }

  .qupid-wrap .gnb .gnb-menu > li > a {
    position: relative;
    justify-content: flex-start;
    min-height: 60px;
    padding: 0 28px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--wh100);
    text-align: left;
  }

  .qupid-wrap .gnb .gnb-menu > li:hover > a,
  .qupid-wrap .gnb .gnb-menu > li > a:hover {
    color: var(--wh100);
  }

  /* 대타이틀 화살표 — Safari PC hover filter(핑크) 제거, 색상 고정 SVG 사용 */
  .qupid-wrap .gnb .gnb-menu > li > a::after,
  .qupid-wrap .gnb .gnb-menu > li:hover > a::after,
  .qupid-wrap .gnb .gnb-menu > li > a:hover::after,
  .qupid-wrap .gnb .gnb-menu a:hover::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: 0;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat !important;
    filter: none !important;
    -webkit-filter: none !important;
    transition: transform 0.2s ease;
  }

  .qupid-wrap .gnb .gnb-menu > li.is-open > a::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23906fef' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    transform: translateY(-50%) rotate(180deg);
  }

  /* PC hover 서브메뉴 무력화 → 아코디언만 */
  .qupid-wrap .gnb .gnb-menu:hover .gnb-sub,
  .qupid-wrap .gnb .gnb-menu .gnb-sub {
    display: none;
    position: static;
    width: 100%;
    padding: 0 0 12px;
    height: auto !important;
  }

  .qupid-wrap .gnb .gnb-menu > li.is-open > .gnb-sub {
    display: block;
  }

  .qupid-wrap .gnb .gnb-menu .gnb-sub ul {
    width: 100%;
  }

  .qupid-wrap .gnb .gnb-menu .gnb-sub li {
    justify-content: flex-start;
  }

  .qupid-wrap .gnb .gnb-menu .gnb-sub li a,
  .qupid-wrap .gnb .gnb-menu .gnb-sub li:hover a {
    justify-content: flex-start;
    height: 40px;
    margin-right: 0;
    padding-left: 8px;
    font-size: 15px;
    font-weight: 400;
    color: var(--wh60);
    text-align: left;
  }

  .qupid-wrap .gnb .gnb-menu .gnb-sub li.active > a,
  .qupid-wrap .gnb .gnb-menu .gnb-sub li.active:hover > a {
    color: var(--primary-active);
  }

  .qupid-wrap .gnb .gnb-menu .gnb-sub li:hover a::after,
  .qupid-wrap .gnb .gnb-menu .gnb-sub li.active a::after {
    display: none;
  }

  /* ===== 햄버거 열림: 상단 로그인 전/후 ===== */
  .qupid-wrap .gnb.is-mo-open {
    height: 55px;
    border-bottom: 1px solid var(--wh10);
  }

  .qupid-wrap .gnb.is-mo-open .gnb-logo {
    display: none !important;
  }

  .qupid-wrap .gnb.is-mo-open .gnb-mo-toggle {
    display: none !important;
  }

  .qupid-wrap .gnb.is-mo-open .gnb-mo-close {
    display: inline-flex !important;
  }

  /* 로그인 전 */
  .qupid-wrap .gnb.is-mo-open.is-logged-out .gnb-mo-auth-before {
    display: inline-flex !important;
  }

  /* 로그인 후 */
  .qupid-wrap .gnb.is-mo-open.is-logged-in .gnb-mo-auth-after {
    display: inline-flex !important;
  }

  .qupid-wrap .gnb.is-mo-open .gnb-menu-wrap {
    display: block !important;
  }

  body.is-gnb-mo-open {
    overflow: hidden;
    touch-action: none;
  }

  /*
    기본: 띠배너(40) < GNB(50/1000) — 닫힌 상태 관계 유지.
    sticky top:0 만으로는 배너(이전 형제) 위를 덮지 못함.
    → 열림 시 GNB를 fixed로 viewport 상단에 고정해 배너를 덮고,
      배너 z-index는 메뉴(1001)보다 확실히 낮춤.
  */
  body.is-gnb-mo-open .service-top-banner {
    z-index: 0;
    pointer-events: none;
  }

  body.is-gnb-mo-open #gnb-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1200; /* PC안내 시트·독보다 위 */
  }

  /* 하단 독·PC안내 시트·과목바가 열린 햄버거 메뉴 위로 올라타지 않게 */
  body.is-gnb-mo-open .bottom-dock,
  body.is-gnb-mo-open .aiu-link-wrap,
  body.is-gnb-mo-open .mobile-bottomsheet,
  body.is-gnb-mo-open #pcNotice {
    z-index: 999 !important;
  }
}

@media screen and (max-width: 768px) {
  .qupid-wrap .gnb {
    padding: 0 16px;
  }

  .qupid-wrap .gnb .gnb-menu-wrap {
    padding: 4px 16px 32px;
  }

  .qupid-wrap .gnb .gnb-menu > li > a {
    font-size: 17px;
    min-height: 56px;
  }

  .gnb-mo-my {
    font-size: 14px;
  }
}

/* ========== from main.css ========== */

@media screen and (max-width: 1024px) {
  .qupid-wrap.main .gnb,
  .qupid-wrap.main .gnb:hover,
  .qupid-wrap.main .gnb.is-mo-open {
    background: var(--neutrals-bg-800);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ========== from common.css ========== */

@media screen and (max-width: 900px) {
  .pub-layout {
    grid-template-columns: 1fr;
  }

  .pub-sidenav {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
  }

  .pub-depth1-item {
    width: auto;
    flex: 1 1 calc(50% - 8px);
    font-size: 14px;
    padding: 12px 14px;
  }
}

@media screen and (max-width: 768px) {
  .btn-sns {
    min-width: 0;
    width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  .download-wrap.horizontal .download-box {
    width: calc((100% - 8px) / 2);
    flex: 0 0 calc((100% - 8px) / 2);
  }
}

@media screen and (max-width: 768px) {
  .download-wrap.horizontal .download-box {
    width: 100%;
    flex: 0 0 100%;
  }
}

@media (max-width: 1024px) {
  /* 서비스 안내 팝업 (plain #popup / popup--acc 공통)
     GNB(#gnb-wrap 1000 / .gnb-menu-wrap 1001) 아래 — 햄버거 열림 시 메뉴가 팝업 위에 */
  #popup.popup,
  .popup.popup--acc {
    inset: auto;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(480px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    height: auto;
    max-height: min(80vh, 80dvh);
    margin: 0;
    padding: 24px 20px 20px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.046);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    text-align: left;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 40;
    background: var(--neutrals-bg-600);
    box-sizing: border-box;
    overscroll-behavior: none;
  }

  #popup.popup .con-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
  }

  .popup.popup--acc .con-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0;
    box-sizing: border-box;
  }

  #popup.popup .text-title {
    font-size: 22px;
    line-height: 1.35;
    word-break: keep-all;
  }

  #popup.popup .text-message,
  .popup.popup--acc .text-message {
    margin-top: 0;
    padding-bottom: 4px;
    font-size: 15px;
    line-height: 1.55;
    word-break: keep-all;
    overflow: visible;
  }

  /* 모바일: 패널은 con-wrap 스크롤에 맡기고, 하단 버튼은 flex로 고정 */
  .popup.popup--acc .popup-acc__panel {
    max-height: none;
    overflow: visible;
    padding: 0 16px 20px;
  }

  .popup.popup--acc .popup-acc {
    overflow: visible;
    flex-shrink: 0;
  }

  #popup.popup .btn-wrap,
  .popup.popup--acc .btn-wrap {
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-top: 16px;
    padding: 16px 0 0;
    box-sizing: border-box;
    background: var(--neutrals-bg-600);
    border-top: 1px solid var(--wh10);
    position: relative;
    z-index: 1;
  }
}

@media screen and (max-width: 1024px) {
  .alert-wrap,
  .modal-wrap {
    width: min(520px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    padding: 40px 32px 28px !important;
    box-sizing: border-box;
  }

  .alert-wrap.large,
  .modal-wrap.large {
    width: min(600px, calc(100vw - 48px)) !important;
  }

  .alert-wrap.xlarge,
  .modal-wrap.xlarge {
    width: min(730px, calc(100vw - 48px)) !important;
  }

  .modal-wrap .con-wrap .terms-wrap,
  .modal-wrap .terms-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
  }

  .modal-wrap .title-wrap {
    font-size: 22px;
  }

  /* list 모달(영수증/환불 등): 상단 타이틀 좌측, 버튼 우측 */
  .modal-wrap.list > .title-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    font-size: 22px;
    line-height: 1.3;
    text-align: left;
    padding-bottom: 16px;
  }

  .modal-wrap.list > .title-wrap .btn-print,
  .modal-wrap.list > .title-wrap .btn-close,
  .modal-wrap.list > .title-wrap > button {
    position: static;
    right: auto;
    top: auto;
    margin-left: auto;
    flex-shrink: 0;
  }

  .modal-wrap.list .con-wrap .title-wrap {
    justify-content: flex-start;
    text-align: left;
    font-size: 18px;
  }

  .modal-wrap .con-wrap {
    max-height: 50vh;
    padding-right: 8px;
    font-size: 15px;
    line-height: 1.55;
  }

  /*
   * 전문가 컨설팅 모달 — ≤1024 공통 (닫힘 안전 + 표)
   * 세로/가로 나열은 768 / 769+ 에서 분기
   * ※ 닫힌 상태에도 display:flex !important 하면 페이지 진입 시 모달이 항상 뜸
   */
  .ui-dialog:has(#expert-consent-modal-dialog)[style*="display: none"],
  .ui-dialog:has(#expert-consent-modal-dialog)[style*="display:none"],
  .ui-dialog:has(.ui-dialog-content.consulting-modal)[style*="display: none"],
  .ui-dialog:has(.ui-dialog-content.consulting-modal)[style*="display:none"],
  .ui-dialog:has(#expert-consent-modal-dialog)[aria-hidden="true"],
  .ui-dialog:has(.ui-dialog-content.consulting-modal)[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  .ui-dialog:has(#expert-consent-modal-dialog) .ui-dialog-titlebar,
  .ui-dialog:has(.ui-dialog-content.consulting-modal) .ui-dialog-titlebar {
    display: none !important;
  }

  /* 닫힘: 콘텐츠 강제 숨김 (common.css display:flex 덮어쓰기) */
  #expert-consent-modal-dialog.consulting-modal:not(.ui-dialog-content),
  .ui-dialog[style*="display: none"] > #expert-consent-modal-dialog.consulting-modal,
  .ui-dialog[style*="display:none"] > #expert-consent-modal-dialog.consulting-modal,
  .ui-dialog[style*="display: none"] > .ui-dialog-content.consulting-modal,
  .ui-dialog[style*="display:none"] > .ui-dialog-content.consulting-modal,
  .ui-dialog[aria-hidden="true"] > #expert-consent-modal-dialog.consulting-modal,
  .ui-dialog[aria-hidden="true"] > .ui-dialog-content.consulting-modal {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 공통 xlarge 폭 축소가 컨설팅 패널에 덮이지 않게 (가로 나열용) */
  .consulting-modal .modal-wrap,
  .consulting-modal .modal-wrap.xlarge,
  .consulting-modal .modal-wrap.consulting,
  .consulting-modal .modal-wrap.manual {
    min-width: 0;
    box-sizing: border-box;
  }

  .consulting-modal .terms-wrap,
  .consulting-modal .markdown-body {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: keep-all;
  }

  /* 매뉴얼 표: 가로 짤림 방지 — 뷰포트에 맞게 줄바꿈 + 필요 시 스크롤
     ※ 2열 전제(34%/66%)를 3열 표에 쓰면 3열이 ~0폭 → 글자 세로 적재 → 행 높이 비정상 */
  .consulting-modal .markdown-body,
  .consulting-modal .terms-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .consulting-modal .markdown-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .consulting-modal .markdown-body table,
  .consulting-modal .terms-wrap table,
  .consulting-modal #dialog-manual table {
    display: table;
    table-layout: fixed;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    border-collapse: collapse;
  }

  .consulting-modal .markdown-body tr,
  .consulting-modal .terms-wrap tr,
  .consulting-modal #dialog-manual tr,
  .consulting-modal .markdown-body th,
  .consulting-modal .markdown-body td,
  .consulting-modal .terms-wrap th,
  .consulting-modal .terms-wrap td,
  .consulting-modal #dialog-manual th,
  .consulting-modal #dialog-manual td {
    width: auto;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: normal;
    vertical-align: top;
    line-height: 1.45;
    padding: 8px 10px;
  }

  /* 2열 표만 34/66 */
  .consulting-modal .markdown-body table:not(:has(tr > :nth-child(3))) th:nth-child(1),
  .consulting-modal .markdown-body table:not(:has(tr > :nth-child(3))) td:nth-child(1),
  .consulting-modal .terms-wrap table:not(:has(tr > :nth-child(3))) th:nth-child(1),
  .consulting-modal .terms-wrap table:not(:has(tr > :nth-child(3))) td:nth-child(1),
  .consulting-modal #dialog-manual table:not(:has(tr > :nth-child(3))) th:nth-child(1),
  .consulting-modal #dialog-manual table:not(:has(tr > :nth-child(3))) td:nth-child(1) {
    width: 34%;
  }

  .consulting-modal .markdown-body table:not(:has(tr > :nth-child(3))) th:nth-child(2),
  .consulting-modal .markdown-body table:not(:has(tr > :nth-child(3))) td:nth-child(2),
  .consulting-modal .terms-wrap table:not(:has(tr > :nth-child(3))) th:nth-child(2),
  .consulting-modal .terms-wrap table:not(:has(tr > :nth-child(3))) td:nth-child(2),
  .consulting-modal #dialog-manual table:not(:has(tr > :nth-child(3))) th:nth-child(2),
  .consulting-modal #dialog-manual table:not(:has(tr > :nth-child(3))) td:nth-child(2) {
    width: 66%;
  }

  /* 3열 표 (유형/예시/사유) */
  .consulting-modal .markdown-body table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) th:nth-child(1),
  .consulting-modal .markdown-body table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) td:nth-child(1),
  .consulting-modal .terms-wrap table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) th:nth-child(1),
  .consulting-modal .terms-wrap table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) td:nth-child(1),
  .consulting-modal #dialog-manual table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) th:nth-child(1),
  .consulting-modal #dialog-manual table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) td:nth-child(1) {
    width: 22%;
  }

  .consulting-modal .markdown-body table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) th:nth-child(2),
  .consulting-modal .markdown-body table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) td:nth-child(2),
  .consulting-modal .terms-wrap table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) th:nth-child(2),
  .consulting-modal .terms-wrap table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) td:nth-child(2),
  .consulting-modal #dialog-manual table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) th:nth-child(2),
  .consulting-modal #dialog-manual table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) td:nth-child(2) {
    width: 39%;
  }

  .consulting-modal .markdown-body table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) th:nth-child(3),
  .consulting-modal .markdown-body table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) td:nth-child(3),
  .consulting-modal .terms-wrap table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) th:nth-child(3),
  .consulting-modal .terms-wrap table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) td:nth-child(3),
  .consulting-modal #dialog-manual table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) th:nth-child(3),
  .consulting-modal #dialog-manual table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) td:nth-child(3) {
    width: 39%;
  }

  /* toast popup — 모바일 */
  .toast-pop-wrap {
    width: calc(100% - 32px);
    max-width: 480px;
    height: auto;
    min-height: 52px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    z-index: 2200;
    bottom: -120px;
  }

  .toast-pop-wrap.show {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .toast-pop-wrap span {
    width: 100%;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
    word-break: keep-all;
  }

  .toast-pop-wrap span::before {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .modal-wrap.list .con-wrap {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  /* 태블릿에서도 영수증 모달 본문 스크롤
     (#dialogReceipt뿐 아니라 modal-receipt / normal_receipt_dialog 등 btn-print 있는 list 모달 공통) */
  .modal-wrap.list:has(> .title-wrap .btn-print) {
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
    max-height: calc(100dvh - 48px) !important;
  }

  .modal-wrap.list:has(> .title-wrap .btn-print) > .con-wrap {
    flex: 1 1 auto;
    min-height: 0 !important;
    max-height: calc(100dvh - 220px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .modal-wrap.list:has(> .title-wrap .btn-print) > .btn-wrap {
    flex: 0 0 auto;
    background: var(--wh100);
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
  }

  .modal-wrap.list:has(> .title-wrap .btn-print) > .btn-wrap .btn,
  .modal-wrap.list:has(> .title-wrap .btn-print) > .btn-wrap button {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
  }

  /* 포인트/이용권 코드 인풋 간격 — 모바일·태블릿 margin 제거 */
  .input-wrap .form-box .input-box.number input + input,
  .input-wrap .form-box .input-box.number input + button {
    margin-left: 0;
  }

  .point-pop-wrap .input-wrap .form-box .input-box.number input + input,
  .point-pop-wrap .input-wrap .form-box .input-box.number input + button {
    margin-left: 0;
  }
}

/* 아이패드 미니 초과~태블릿: PC처럼 매뉴얼+동의 가로 나열 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  #consulting-terms-modal.consulting-modal:not([hidden]),
  .consulting-modal:not([hidden]):not(.ui-dialog-content) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 20px 16px !important;
    overflow: auto !important;
  }

  .ui-dialog[style*="display: block"] > .ui-dialog-content.consulting-modal,
  .ui-dialog[style*="display:block"] > .ui-dialog-content.consulting-modal,
  .ui-dialog[style*="display: flex"] > .ui-dialog-content.consulting-modal,
  .ui-dialog[style*="display:flex"] > .ui-dialog-content.consulting-modal,
  .ui-dialog[style*="display: block"] > #expert-consent-modal-dialog.consulting-modal,
  .ui-dialog[style*="display:block"] > #expert-consent-modal-dialog.consulting-modal,
  .ui-dialog[style*="display: flex"] > #expert-consent-modal-dialog.consulting-modal,
  .ui-dialog[style*="display:flex"] > #expert-consent-modal-dialog.consulting-modal {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .consulting-modal .modal-wrap,
  .consulting-modal .modal-wrap.xlarge,
  .consulting-modal .modal-wrap.consulting,
  .consulting-modal .modal-wrap.manual {
    width: min(480px, calc((100vw - 48px) / 2)) !important;
    max-width: calc((100vw - 40px) / 2) !important;
    max-height: min(780px, calc(100dvh - 40px)) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 28px 24px 24px !important;
    flex: 1 1 0;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
  }

  .consulting-modal .modal-wrap .con-wrap,
  .consulting-modal .modal-wrap.consulting .con-wrap,
  .consulting-modal .modal-wrap.manual .con-wrap {
    flex: 1 1 auto;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media screen and (max-width: 768px) {
  /* Safari 하단 툴바/홈인디케이터에 확인·CTA 버튼이 가리지 않도록
     (전문가 컨설팅 모달은 아래 세로 스택 규칙 사용 — 제외) */
  .ui-dialog:not(:has(#expert-consent-modal-dialog)):not(:has(.consulting-modal)) {
    align-items: flex-end;
    padding: 0 0 calc(20px + env(safe-area-inset-bottom, 0px));
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box;
  }

  .alert-wrap,
  .modal-wrap,
  .alert-wrap.small,
  .modal-wrap.small,
  .alert-wrap.medium,
  .modal-wrap.medium,
  .alert-wrap.large,
  .modal-wrap.large,
  .alert-wrap.xlarge,
  .modal-wrap.xlarge {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 48px - env(safe-area-inset-bottom, 0px)) !important;
    margin: 12px auto !important;
    padding: 28px 20px 28px !important;
    border-radius: 16px !important;
    box-sizing: border-box;
  }

  /* 전문가 컨설팅 — 아이패드 미니 이하: 매뉴얼+동의 세로 나열 */
  .ui-dialog:has(#expert-consent-modal-dialog)[style*="display: block"],
  .ui-dialog:has(#expert-consent-modal-dialog)[style*="display:block"],
  .ui-dialog:has(#expert-consent-modal-dialog)[style*="display: flex"],
  .ui-dialog:has(#expert-consent-modal-dialog)[style*="display:flex"],
  .ui-dialog:has(.ui-dialog-content.consulting-modal)[style*="display: block"],
  .ui-dialog:has(.ui-dialog-content.consulting-modal)[style*="display:block"],
  .ui-dialog:has(.ui-dialog-content.consulting-modal)[style*="display: flex"],
  .ui-dialog:has(.ui-dialog-content.consulting-modal)[style*="display:flex"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: fixed !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #consulting-terms-modal.consulting-modal:not([hidden]),
  .consulting-modal:not([hidden]):not(.ui-dialog-content) {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  .ui-dialog[style*="display: block"] > .ui-dialog-content.consulting-modal,
  .ui-dialog[style*="display:block"] > .ui-dialog-content.consulting-modal,
  .ui-dialog[style*="display: flex"] > .ui-dialog-content.consulting-modal,
  .ui-dialog[style*="display:flex"] > .ui-dialog-content.consulting-modal,
  .ui-dialog[style*="display: block"] > #expert-consent-modal-dialog.consulting-modal,
  .ui-dialog[style*="display:block"] > #expert-consent-modal-dialog.consulting-modal,
  .ui-dialog[style*="display: flex"] > #expert-consent-modal-dialog.consulting-modal,
  .ui-dialog[style*="display:flex"] > #expert-consent-modal-dialog.consulting-modal {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    flex: 1 1 auto;
  }

  .consulting-modal .modal-wrap,
  .consulting-modal .modal-wrap.xlarge,
  .consulting-modal .modal-wrap.consulting,
  .consulting-modal .modal-wrap.manual {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 20px 16px 16px !important;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
  }

  .consulting-modal.is-manual-only .modal-wrap,
  .consulting-modal:not(.is-consent-flow) #dialog-manual {
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px)) !important;
  }

  .consulting-modal.is-consent-flow .modal-wrap,
  .consulting-modal:has(#dialog-manual.manual) .modal-wrap {
    max-height: calc((100dvh - 36px - env(safe-area-inset-bottom, 0px)) / 2) !important;
    flex: 1 1 0;
  }

  .consulting-modal .modal-wrap > .title-wrap {
    flex: 0 0 auto;
  }

  .consulting-modal .modal-wrap .con-wrap,
  .consulting-modal .modal-wrap.consulting .con-wrap,
  .consulting-modal .modal-wrap.manual .con-wrap {
    flex: 1 1 auto;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .consulting-modal .modal-wrap .btn-wrap {
    flex: 0 0 auto;
  }

  .modal-wrap .title-wrap {
    font-size: 20px;
    justify-content: center;
  }

  /* list 모달: 중앙 정렬 오버라이드 */
  .modal-wrap.list > .title-wrap {
    font-size: 20px;
    justify-content: flex-start;
    text-align: left;
  }

  .modal-wrap.list .con-wrap .title-wrap {
    justify-content: flex-start;
    text-align: left;
    font-size: 16px;
  }

  .modal-wrap.list > .title-wrap .btn-print {
    width: 36px;
    height: 36px;
  }

  .modal-wrap .con-wrap {
    max-height: min(55vh, 420px);
    padding-right: 4px;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
  }

  .toast-pop-wrap {
    width: calc(100% - 24px);
    max-width: none;
    padding: 12px 14px;
    font-size: 13px;
  }

  .toast-pop-wrap.show {
    /* 하단 독바(약 60px) 위 */
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .toast-pop-wrap span {
    font-size: 13px;
  }

  .modal-wrap.list .con-wrap {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  /* 결제/환불 영수증: 하단 여백 축소 + 본문 스크롤 + 닫기 스티키
     ID 무관 — title에 .btn-print 있는 list 모달(퍼블 #dialog / 서버 normal_receipt 포함) */
  .ui-dialog:has(.modal-wrap.list > .title-wrap .btn-print) {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  .modal-wrap.list:has(> .title-wrap .btn-print) {
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px)) !important;
    margin: 8px auto 0 !important;
    padding: 24px 20px 12px !important;
    box-sizing: border-box;
  }

  .modal-wrap.list:has(> .title-wrap .btn-print) > .title-wrap {
    flex: 0 0 auto;
  }

  .modal-wrap.list:has(> .title-wrap .btn-print) > .con-wrap {
    flex: 1 1 auto;
    min-height: 0 !important;
    /* flex만으로는 높이 미확정 → 스크롤 불가한 경우 있어 max-height 명시 */
    max-height: calc(100dvh - 200px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-right: 0;
  }

  .modal-wrap.list:has(> .title-wrap .btn-print) > .con-wrap::-webkit-scrollbar {
    display: block;
    width: 4px;
    height: auto;
  }

  .modal-wrap.list:has(> .title-wrap .btn-print) > .btn-wrap {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 12px;
    padding-top: 12px;
    background: var(--wh100);
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
    overflow: hidden;
  }

  .modal-wrap.list:has(> .title-wrap .btn-print) > .btn-wrap .btn,
  .modal-wrap.list:has(> .title-wrap .btn-print) > .btn-wrap button {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    background-clip: padding-box;
  }

  /* jQuery UI ui-widget-content 기본 테두리 제거 (닫기 영역 미세 라인) */
  .ui-dialog-content.modal-wrap.list:has(> .title-wrap .btn-print),
  .modal-wrap.list.ui-widget-content:has(> .title-wrap .btn-print) {
    border: 0 !important;
    box-shadow: none !important;
  }

  .modal-wrap .con-wrap .terms-wrap {
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .modal-wrap .btn-wrap {
    margin-top: 20px;
  }

  .modal-wrap .btn-wrap button,
  .modal-wrap .btn-wrap .btn {
    width: 100%;
  }

  .alert-wrap .text-title,
  .modal-wrap .text-title {
    font-size: 20px;
  }

  .alert-wrap .text-message,
  .modal-wrap .text-message {
    font-size: 16px;
    line-height: 1.45;
  }
}

@media screen and (max-width: 480px) {
  .alert-wrap,
  .modal-wrap,
  .alert-wrap.small,
  .modal-wrap.small,
  .alert-wrap.medium,
  .modal-wrap.medium,
  .alert-wrap.large,
  .modal-wrap.large,
  .alert-wrap.xlarge,
  .modal-wrap.xlarge {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 24px 16px 24px !important;
  }

  .modal-wrap.list:has(> .title-wrap .btn-print) {
    padding: 20px 16px 10px !important;
  }

  .modal-wrap .title-wrap {
    font-size: 18px;
  }

  .modal-wrap .con-wrap {
    max-height: min(50vh, 360px);
    font-size: 13px;
  }

  .modal-wrap.list:has(> .title-wrap .btn-print) > .con-wrap {
    max-height: calc(100dvh - 180px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
  }
}

/* ========== from contents.css ========== */

@media screen and (max-width: 1024px) {
  .qupid-wrap .contents-wrap:has(> .mypage-wrap.main) {
    padding: 0 0 48px;
    min-height: 0;
    align-items: stretch;
  }

  .mypage-wrap.main {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* M-header-underline */
  .mypage-wrap.main h2 {
    display: flex;
    align-items: center;
    min-height: 55px;
    margin: 0 -20px 0;
    padding: 0 20px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wh100);
    border-bottom: 1px solid var(--wh10);
    box-sizing: border-box;
  }

  .mypage-wrap.main .my-info-wrap {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    background: var(--neutrals-bg-400);
  }

  .mypage-wrap.main .my-info-wrap::after {
    height: 2px;
  }

  .mypage-wrap.main .my-info-box {
    flex: none;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    padding: 30px;
    box-sizing: border-box;
  }

  .mypage-wrap.main .my-info-box .my-profile {
    flex-shrink: 0;
  }

  .mypage-wrap.main .my-info-box .text-area {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 12px 0 12px;
  }

  /* 대표계정: 왕관이 이름 위로 — 긴 닉네임/숫자 ID도 영역 안에서 줄바꿈 */
  .mypage-wrap.main .my-info-box .text-area .text-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 20px;
    line-height: 28px;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  .mypage-wrap.main .my-info-box .text-area .text-main i.ico-king {
    margin: 0;
    align-self: flex-start;
    flex-shrink: 0;
  }

  .mypage-wrap.main .my-info-box .text-area .text-sub {
    display: block;
    max-width: 100%;
    min-width: 0;
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  .mypage-wrap.main .my-info-box .ico-setting {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-left: auto;
    background-size: 24px 24px;
  }

  .mypage-wrap.main .my-point-box {
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--wh10);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .mypage-wrap.main .my-point-box .my-point-go {
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 16px 20px;
    box-sizing: border-box;
  }

  /* 포인트+구독 2칸 구조일 때만 가로 분할 (my-list와는 세로 스택) */
  .mypage-wrap.main .my-point-box:has(> .my-point-go + .my-point-go) {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .mypage-wrap.main .my-point-box:has(> .my-point-go + .my-point-go) > .my-point-go {
    flex: 1 1 0;
    width: auto;
  }

  .mypage-wrap.main .my-point-box .my-point-go + .my-point-go {
    border-top: 0;
    border-left: 1px solid var(--wh10);
  }

  .mypage-wrap.main .my-point-box:has(> .my-point-go + .my-point-go) > .my-list {
    flex: 1 1 100%;
    width: 100%;
  }

  .mypage-wrap.main .my-point-box .my-point-go .text-area {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mypage-wrap.main .my-point-box .my-point-go .text-point {
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
  }

  .mypage-wrap.main .my-point-box .my-point-go .text-number {
    font-size: 18px;
    line-height: 26px;
    word-break: keep-all;
    white-space: nowrap;
  }

  .mypage-wrap.main .my-point-box .my-point-go .ico-go {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
  }

  .mypage-wrap.main .my-point-box .my-list {
    width: 100%;
    border-top: 1px solid var(--wh10);
    min-height: 52px;
  }

  .mypage-wrap.main .my-point-box .my-list a {
    font-size: 14px;
    line-height: 20px;
  }

  /* banner-mypage */
  .mypage-wrap.main .my-banner-wrap {
    height: 110px;
    margin-top: 0;
    padding: 30px 20px 16px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    overflow: hidden;
  }

  .mypage-wrap.main .my-banner-wrap + .my-banner-wrap {
    margin-top: 0;
  }

  .mypage-wrap.main .my-banner-wrap .text-main {
    font-size: 16px;
    line-height: 24px;
    word-break: keep-all;
  }

  .mypage-wrap.main .my-banner-wrap .text-sub {
    font-size: 14px;
    line-height: 20px;
    word-break: keep-all;
  }

  .mypage-wrap.main .my-menu-wrap {
    margin-top: 0;
    padding-bottom: 8px;
  }

  .mypage-wrap.main .my-menu-wrap .menu-wrap p {
    min-height: 44px;
    padding-left: 20px;
    font-size: 14px;
  }

  .mypage-wrap.main .my-menu-wrap p {
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid var(--wh20);
  }

  .mypage-wrap.main .my-menu-wrap p:first-child {
    border-top: 0;
  }

  .mypage-wrap.main .my-menu-wrap p + .menu-list {
    margin-top: 0;
    margin-bottom: 8px;
  }

  .mypage-wrap.main .my-menu-wrap .menu-list li {
    height: 46px;
    padding-left: 0;
    font-size: 16px;
  }

  .mypage-wrap.main .my-menu-wrap .menu-list li a {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }

  .mypage-wrap.main .my-menu-wrap > p {
    display: flex;
    align-items: center;
    min-height: 100px;
    margin: 0;
    padding: 40px 20px;
    border-top: 1px solid var(--wh20);
    box-sizing: border-box;
  }

  .mypage-wrap.main .my-menu-wrap > p .text-type {
    padding: 0;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .mypage-wrap.main {
    padding: 0 20px;
  }

  .mypage-wrap.main h2 {
    min-height: 60px;
    font-size: 20px;
  }

  .mypage-wrap.main .my-info-box {
    padding: 30px;
  }

  .mypage-wrap.main .my-point-box .my-point-go {
    padding: 16px 30px;
  }

  .mypage-wrap.main .my-point-box .my-point-go .text-number {
    font-size: 20px;
    line-height: 26px;
  }

  .mypage-wrap.main .my-banner-wrap {
    padding: 30px 24px 16px;
  }

  /* 태블릿: PC용 배너 이미지 */
  .mypage-wrap.main .my-banner-wrap.bg1 {
    background: url('../../image/qupid/my-banner-bg1.png') no-repeat center / cover;
  }

  .mypage-wrap.main .my-banner-wrap.bg2 {
    background: url('../../image/qupid/my-banner-bg2.png') no-repeat center / cover;
  }
}

@media screen and (max-width: 768px) {
  .mypage-wrap.main .my-banner-wrap.bg1 {
    background: url('../../image/qupid/my-banner-bg1-mo.png') no-repeat center / cover;
  }

  .mypage-wrap.main .my-banner-wrap.bg2 {
    background: url('../../image/qupid/my-banner-bg2-mo.png') no-repeat center / cover;
  }
}

@media screen and (max-width: 1400px) {
  .login-wrap .logo-wrap .ico-logo {
    width: min(300px, 40vw);
    height: calc(min(300px, 40vw) * 82 / 347);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .login-wrap .btn-wrap {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .login-wrap .btn-wrap .a-member {
    width: min(300px, 26vw);
    height: auto;
    aspect-ratio: 345 / 414;
    margin: 0;
    --member-band-h: clamp(88px, 10vw, 110px);
    --member-icon-size: clamp(72px, 9vw, 96px);
  }

  .login-wrap .btn-wrap .a-member .text-box {
    font-size: clamp(18px, 1.6vw, 22px);
    padding-bottom: calc((var(--member-band-h) - 52px) / 2);
  }
}

@media screen and (max-width: 1024px) {
  .qupid-wrap .contents-wrap.login-bg {
    min-height: 0;
    padding: 0;
  }

  .join-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .join-wrap > div {
    flex: none;
    width: 100%;
    min-height: 0;
  }

  .join-wrap .btn-area {
    padding: 48px 24px 56px;
    box-sizing: border-box;
  }

  .login-wrap .logo-wrap .ico-logo {
    width: min(260px, 70vw);
    height: calc(min(260px, 70vw) * 82 / 347);
  }

  .login-wrap .logo-wrap .text-info {
    font-size: 14px;
    letter-spacing: 0.12em;
    padding-left: 0;
    margin-top: 12px;
    word-break: keep-all;
  }

  .login-wrap .btn-wrap {
    margin-top: 40px;
    gap: 14px;
  }

  .login-wrap .btn-wrap .a-member {
    width: min(240px, calc(33.333% - 12px));
    --member-band-h: 84px;
    --member-icon-size: 72px;
  }

  .join-wrap .join-area {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 48px 24px 64px;
    box-sizing: border-box;
  }

  .join-wrap .join-area .join-inner {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .join-wrap .join-area .join-title {
    font-size: 24px;
    line-height: 1.35;
    margin-bottom: 32px;
  }

  .join-wrap .join-area .text-area {
    position: relative;
    bottom: auto;
    width: 100%;
    margin-top: 40px;
  }

  .join-wrap .join-area .join-btn-wrap .btn-sns,
  .join-wrap .join-area .btn-sns {
    min-width: 0;
    width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  .qupid-wrap .contents-wrap.login-bg {
    min-height: 100vh;
    padding: 0;
  }

  .login-wrap.join-wrap {
    position: relative;
    min-height: 100vh;
    width: 100%;
  }

  /* mob: .no-btn 숨김 / 로고만 있는 btn-area도 패널에 가려지므로 숨김 */
  .login-wrap.join-wrap .btn-area:not(:has(.a-member)),
  .login-wrap.join-wrap .btn-area.no-btn {
    display: none;
  }

  .login-wrap.join-wrap .join-area {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    height: auto;
    padding: 48px 20px 88px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1;
    box-sizing: border-box;
  }

  .login-wrap.join-wrap .join-area .join-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .login-wrap.join-wrap .join-area .join-title {
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 40px;
    padding: 0;
  }

  .login-wrap.join-wrap .join-area .join-title button {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .login-wrap.join-wrap .join-area .join-title:has(button) {
    position: relative;
    padding: 0 40px;
  }

  .login-wrap.join-wrap .join-area .text-area {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0;
  }

  .login-wrap.join-wrap .join-area .idpw-wrap {
    margin-top: 40px;
  }

  .login-wrap.join-wrap .join-area .join-btn-wrap .btn-sns,
  .login-wrap.join-wrap .join-area .btn-sns {
    min-width: 0;
    width: 100%;
  }

  .login-wrap.join-wrap .join-area .form-type .input-wrap input,
  .login-wrap.join-wrap .join-area .form-type .join-btn-wrap button {
    width: 100%;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 768px) {
  .join-wrap .btn-area {
    padding: 32px 16px 40px;
  }

  .login-wrap .logo-wrap .text-info {
    font-size: 13px;
    letter-spacing: 0.08em;
    line-height: 1.5;
    padding: 0 8px;
  }

  .login-wrap .btn-wrap {
    flex-direction: column;
    align-items: stretch;
    margin-top: 28px;
    gap: 12px;
  }

  .login-wrap .btn-wrap .a-member {
    width: 100%;
    max-width: none;
    height: 168px;
    aspect-ratio: auto;
    border-radius: 16px;
    --member-band-h: 72px;
    --member-icon-size: 64px;
  }

  .login-wrap .btn-wrap .a-member .text-box {
    font-size: 17px;
    line-height: 1.35;
    gap: 2px;
    padding-bottom: calc((var(--member-band-h) - 48px) / 2);
  }

  .login-wrap .btn-wrap .a-member .text-box span {
    font-size: 13px;
  }

  .login-wrap .btn-wrap .bg {
    border-radius: 16px;
  }

  .login-wrap .btn-wrap .bg::before {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }

  .join-wrap .join-area {
    padding: 28px 16px 48px;
  }

  .join-wrap .join-area .join-inner {
    max-width: none;
  }

  .join-wrap .join-area .join-title {
    position: relative;
    font-size: 20px;
    margin-bottom: 24px;
    padding: 0 40px;
    box-sizing: border-box;
  }

  .join-wrap .join-area .join-title button {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .join-wrap .join-area .join-btn-wrap button + button {
    margin-top: 12px;
  }

  .join-wrap .join-area .text-area {
    margin-top: 28px;
    font-size: 14px;
    flex-wrap: wrap;
    gap: 4px;
  }
}

@media screen and (max-width: 480px) {
  .login-wrap .btn-wrap .a-member {
    height: 156px;
    --member-band-h: 68px;
    --member-icon-size: 56px;
  }

  .login-wrap .btn-wrap .a-member .text-box {
    font-size: 16px;
    padding-bottom: calc((var(--member-band-h) - 44px) / 2);
  }
}

@media screen and (max-width: 1024px) {
  .login-wrap.success-wrap {
    width: 100%;
    max-width: 100%;
    padding: 40px 24px;
    box-sizing: border-box;
  }

  .success-wrap .success-inner {
    width: 100%;
    max-width: 498px;
    margin: 0 auto;
  }

  .success-wrap .success-inner .text-title {
    width: 100%;
    height: auto;
    font-size: clamp(24px, 3.2vw, 32px);
    line-height: 1.35;
  }

  .success-wrap .success-inner .text-sub {
    margin: 20px 0 36px;
    font-size: 16px;
    line-height: 1.5;
    word-break: keep-all;
  }

  .success-wrap .success-inner button {
    width: min(326px, 100%);
  }

  .success-wrap .success-inner .text-info {
    font-size: 14px;
    line-height: 1.5;
    word-break: keep-all;
    padding: 0 4px;
  }
}

@media screen and (max-width: 768px) {
  .qupid-wrap .contents-wrap.center:has(.success-wrap) {
    min-height: 0;
    padding: 48px 0;
    align-items: center;
  }

  .login-wrap.success-wrap {
    padding: 24px 16px 48px;
  }

  .success-wrap .success-inner .text-title {
    font-size: 22px;
    line-height: 1.4;
  }

  .success-wrap .success-inner .text-sub {
    margin: 16px 0 28px;
    font-size: 15px;
  }

  .success-wrap .success-inner button {
    width: 100%;
    max-width: 326px;
    height: 52px;
    margin-bottom: 28px;
  }

  .success-wrap .success-inner .text-info {
    font-size: 13px;
    line-height: 1.55;
  }

  .success-wrap .success-inner .text-info i {
    width: 18px;
    height: 18px;
  }
}

@media screen and (max-width: 480px) {
  .success-wrap .success-inner .text-title {
    font-size: 20px;
  }

  .success-wrap .success-inner .text-sub {
    font-size: 14px;
  }
}

@media screen and (max-width: 1024px) {
  .product-wrap .flow > .mogo-pass-row {
    flex-direction: column;
    align-items: center;
    gap: 100px;
    width: 100%;
    max-width: 100%;
    padding: 0 24px;
    margin-top: 100px;
  }

  .product-wrap .mogo-pass-row__title {
    align-items: center;
    text-align: center;
    font-size: clamp(24px, 4.5vw, 32px);
    white-space: normal;
  }

  .product-wrap .mogo-pass-row__card {
    flex: 0 0 auto;
    width: min(440px, 100%);
    max-width: 440px;
    margin: 0 auto;
  }

  .product-wrap .mogo-pass-row__card .card__price .text__point {
    font-size: clamp(24px, 5vw, 32px);
  }
}

@media screen and (max-width: 1024px) {
  .com-form-wrap {
    width: min(485px, 100%);
    max-width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .qupid-wrap .contents-wrap.center:has(.com-form-wrap) {
    min-height: 0;
    padding: 48px 0;
    width: 100%;
    box-sizing: border-box;
  }

  .com-form-wrap .com-info-wrap {
    font-size: clamp(24px, 4vw, 32px);
    line-height: 1.35;
    word-break: keep-all;
  }

  .tab-wrap.box-type .tab-list {
    height: auto;
    min-height: 56px;
    padding: 6px;
  }

  .tab-wrap.box-type .tab-list li {
    min-height: 40px;
    height: auto;
    padding: 8px 10px;
    text-align: center;
  }

  .tab-wrap.box-type .tab-list li button {
    font-size: 16px;
    line-height: 1.3;
    word-break: keep-all;
  }
}

@media screen and (max-width: 768px) {
  .com-form-wrap {
    width: 100%;
    padding: 0 20px;
  }

  .qupid-wrap .contents-wrap:has(> .com-form-wrap),
  .qupid-wrap .contents-wrap.center:has(.com-form-wrap) {
    min-height: 0;
    height: auto;
    padding: 24px 0 48px;
    align-items: flex-start;
  }

  .com-form-wrap .com-tit-wrap {
    font-size: 22px;
    margin-bottom: 28px;
  }

  .com-form-wrap .com-info-wrap {
    font-size: 26px;
    line-height: 36px;
    margin-bottom: 32px;
  }

  .com-form-wrap .com-info-wrap .text-info {
    margin-top: 12px;
    line-height: 1.45;
  }

  .com-form-wrap .btn-wrap {
    margin-top: 40px;
  }

  .tab-wrap.box-type .tab-list {
    flex-wrap: nowrap;
  }

  .tab-wrap.box-type .tab-list li {
    padding: 8px 6px;
  }

  .tab-wrap.box-type .tab-list li + li {
    margin-left: 6px;
  }

  .tab-wrap.box-type .tab-list li button {
    font-size: 16px;
  }

  .com-list-wrap {
    padding: 28px 0;
  }

  .com-list-wrap li {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 12px;
  }

  .com-list-wrap .text-con1 {
    flex: 1 1 180px;
    word-break: break-all;
  }

  .com-list-wrap .text-con2 {
    flex: 0 0 auto;
  }
}

@media screen and (max-width: 480px) {
  .com-form-wrap {
    padding: 0 16px;
  }

  .com-form-wrap .com-tit-wrap {
    font-size: 20px;
  }

  .com-form-wrap .com-info-wrap {
    font-size: 22px;
    line-height: 1.4;
  }

  .tab-wrap.box-type .tab-list li button {
    font-size: 16px;
  }
}

@media screen and (max-width: 1024px) {
  /* ---------- Shell ---------- */
  .qupid-wrap .contents-wrap:has(> .mypage-wrap:not(.main)) {
    padding: 24px 20px 48px;
    min-height: 0;
    box-sizing: border-box;
  }

  .mypage-wrap:not(.main),
  .mypage-wrap.wide,
  .mypage-wrap.point,
  .mypage-wrap.user {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .mypage-wrap .btn-my-back {
    position: static;
    display: block;
    margin: 0 0 16px;
  }

  /* ---------- title-wrap ---------- */
  .mypage-wrap .title-wrap {
    margin-top: 40px;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .mypage-wrap .title-wrap:first-child {
    margin-top: 0;
  }

  /* 이용권 — 이용 가능 횟수: 좁은 화면에서 가로 스와이프 */
  .mypage-wrap .access-count-wrap {
    margin: 0 -20px;
    padding: 0 20px;
  }

  .mypage-wrap .access-count-box {
    width: min(190px, 72vw);
  }

  /* 유의사항 등 — 위 콘텐츠와 간격 확보 (첫 타이틀만 0) */
  .mypage-wrap .com-table-wrap + .title-wrap.no-line,
  .mypage-wrap .input-wrap + .title-wrap.no-line,
  .mypage-wrap .pay-list-wrap + .title-wrap.no-line {
    margin-top: 48px;
  }

  .mypage-wrap .title-wrap .text-info,
  .mypage-wrap .title-wrap .text-red,
  .mypage-wrap .title-wrap .text-blue,
  .mypage-wrap .title-wrap .text-purple {
    width: 100%;
    margin-top: 8px;
    margin-left: 0 !important;
  }

  .mypage-wrap .title-wrap.between {
    position: relative;
    align-items: flex-start;
  }

  .mypage-wrap .title-wrap.between .btn,
  .mypage-wrap .title-wrap.between .text-type {
    margin-left: auto;
  }

  .mypage-wrap .title-wrap.no-line {
    font-size: 18px;
    line-height: 1.35;
  }

  .mypage-wrap .title-wrap button.btn-back {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  /* ---------- forms / member (mypage1~4, g1, g3, g4) ---------- */
  .mypage-wrap .input-wrap .item-box {
    flex-wrap: wrap;
  }

  .mypage-wrap .input-wrap .item-box label {
    width: 100%;
    min-width: 0;
    height: 24px;
    margin-bottom: 13px;
  }

  .mypage-wrap input:read-only {
    padding: 0;
  }

  .mypage-wrap .input-wrap .input-box.icon input {
    padding: 0 0 0 34px;
  }

  .mypage-wrap .input-wrap .item-box .input-box i,
  .mypage-wrap .input-wrap .item-box i {
    margin-left: 0;
  }

  .mypage-wrap .input-wrap.addBtn .form-box .text-time {
    right: 85px;
  }

  .mypage-wrap .com-form-wrap {
    width: 100%;
  }

  .mypage-wrap .com-form-wrap .input-wrap {
    width: 100%;
  }

  .mypage-wrap .com-form-wrap .com-btn-wrap,
  .fail-btn-wrap {
    width: 100%;
    max-width: 360px;
  }

  .mypage-wrap .com-form-wrap .no-data-wrap {
    padding: 0 16px 40px;
  }

  .mypage-wrap .member-info.success {
    width: 100%;
    max-width: 100%;
    margin-bottom: 50px;
    padding: 40px 20px 28px;
    box-sizing: border-box;
  }

  .mypage-wrap .member-info .member-pho {
    width: 96px;
    height: 96px;
  }

  .mypage-wrap .member-info .text-name {
    font-size: 20px;
    line-height: 28px;
  }

  /* 회원탈퇴 등 com-btn-wrap 툴팁 — 모바일 미노출 */
  .mypage-wrap .com-btn-wrap .tooltip-wrap .tooltip-text {
    display: none;
  }

  /* ---------- lists / tables ---------- */
  .mypage-wrap .com-list-wrap1 li {
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  /* 다열 테이블: 추가 클래스 없이 가로 스크롤 */
  .mypage-wrap .com-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* 페이지네이션은 테이블 스크롤 영역 밖 — 가로 스크롤에 묶이지 않음 */
  .mypage-wrap .com-table-wrap + .pagenation-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .mypage-wrap .pagenation-inner {
    width: 100%;
    justify-content: center;
    margin-top: 24px;
  }

  .mypage-wrap .pagenation-inner button {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .mypage-wrap .pagenation-inner button.btn-previus,
  .mypage-wrap .pagenation-inner button.btn-next {
    font-size: 0;
    line-height: 0;
    color: transparent;
    overflow: hidden;
  }

  .mypage-wrap .com-table-wrap > table {
    width: 100%;
    min-width: 0;
  }

  /* 3열 이하(주문상세 등): 간격 좁혀 화면에 맞춤 */
  .mypage-wrap .com-table-wrap > table:not(:has(th:nth-child(4))) {
    table-layout: fixed;
  }

  .mypage-wrap .com-table-wrap > table:not(:has(th:nth-child(4))) th,
  .mypage-wrap .com-table-wrap > table:not(:has(th:nth-child(4))) td {
    padding: 0 8px;
    font-size: 14px;
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .mypage-wrap .com-table-wrap > table:not(:has(th:nth-child(4))) th.right,
  .mypage-wrap .com-table-wrap > table:not(:has(th:nth-child(4))) td.right {
    white-space: nowrap;
  }

  /* 4열 이상: 기존처럼 가로 스크롤 */
  .mypage-wrap .com-table-wrap > table:has(th:nth-child(4)) {
    min-width: 720px;
  }

  .mypage-wrap .com-table-wrap > table:has(th:nth-child(6)) {
    min-width: 960px;
  }

  /* thead·상태 뱃지: 좁은 기기에서 글자 단위 줄바꿈 방지 */
  .mypage-wrap .com-table-wrap > table th {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .mypage-wrap .com-table-wrap > table .flag,
  .mypage-wrap .com-table-wrap > table td:has(.flag) {
    white-space: nowrap;
  }

  .mypage-wrap .com-table-wrap > table .flag {
    flex-shrink: 0;
    max-width: none;
  }

  /* ---------- Point / subscribe / voucher ---------- */
  .mypage-wrap .my-point-wrap,
  .mypage-wrap .my-point-detail-wrap {
    padding: 30px 16px;
  }

  .mypage-wrap .my-point-wrap {
    position: relative;
    align-items: center;
  }

  .mypage-wrap .my-point-wrap .my-btn-wrap .tooltip-text {
    display: none;
  }

  .mypage-wrap .my-point-wrap .my-con-wrap .text-point {
    font-size: 32px;
    line-height: 1.3;
  }

  .mypage-wrap.point .plan {
    font-size: 28px;
  }

  /* 이용권 정보 카드 — 긴 문구 박스 안 줄바꿈 */
  .voucher-info-box {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 16px 20px;
    gap: 12px;
  }

  .voucher-info-box > div:first-child {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .voucher-info-tit {
    font-size: 18px;
    line-height: 1.4;
    word-break: keep-all;
  }

  .voucher-info-txt {
    width: 100%;
    max-width: 100%;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .voucher-info-date {
    width: 100%;
    font-size: 13px;
    line-height: 1.4;
    word-break: keep-all;
  }

  .my-point-wrap.btn {
    padding: 20px 16px;
  }

  .my-point-wrap.consulting {
    flex-wrap: wrap;
    gap: 16px;
  }

  .my-point-detail-wrap .detail-search-wrap {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 16px;
    gap: 0;
  }

  .my-point-detail-wrap .detail-search-wrap .btn-area {
    width: 100%;
  }

  .my-point-detail-wrap .detail-search-wrap .btn-area button {
    padding: 5px 0 20px;
    margin: 0 auto;
    font-size: 14px;
  }

  /* 서버 마크업: radio-group-wrap 이 .btn-group-wrap.size-s.line 안에 있음
     → overflow:hidden + 한 줄 높이(~30px)로 유형 5개 중 중간 2개만 보임 */
  .my-point-detail-wrap .detail-search-wrap .btn-group-wrap,
  .my-point-detail-wrap .detail-search-wrap .btn-group-wrap.size-s,
  .my-point-detail-wrap .detail-search-wrap .btn-group-wrap.line {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .my-point-detail-wrap .detail-search-wrap .radio-group-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box;
  }

  .my-point-detail-wrap .detail-search-wrap .detail-box {
    top: 56px;
    overflow: visible;
  }

  .my-point-detail-wrap .detail-search-wrap .detail-box .detail-tit {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
  }

  .my-point-detail-wrap .detail-search-wrap .detail-box .detail-con {
    padding: 24px 16px;
    overflow: visible;
  }

  /* 유형(5)·정렬(2) 공통 2열 — id/순서/nth-child 무관. 한 줄 찌그러짐·잘림 방지 */
  .my-point-detail-wrap .detail-search-wrap .radio-group-wrap > .custom-box-radio,
  .my-point-detail-wrap .detail-search-wrap .radio-group-wrap > label.custom-box-radio {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    flex: none !important;
    box-sizing: border-box;
  }

  .my-point-detail-wrap .detail-search-wrap .radio-group-wrap > .custom-box-radio .checkmark,
  .my-point-detail-wrap .detail-search-wrap .radio-group-wrap > label.custom-box-radio .checkmark {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .my-point-detail-wrap .detail-search-wrap .item-box {
    flex-wrap: wrap;
    overflow: visible;
    height: auto;
    max-height: none;
  }

  .my-point-detail-wrap .detail-search-wrap .item-inner {
    width: 100%;
    flex: auto !important;
    min-width: 0;
    overflow: visible;
    height: auto;
    max-height: none;
  }

  .my-point-detail-wrap .detail-search-wrap .detail-box .item-inner + .item-inner {
    margin-left: 0;
    margin-top: 23px;
  }

  .detail-list-wrap li {
    padding: 16px 4px;
  }

  /* ---------- User management (g2) ---------- */
  .mypage-wrap.user .btn-group-wrap {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 12px 0 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mypage-wrap.user .btn-group-wrap::-webkit-scrollbar {
    display: none;
  }

  .mypage-wrap.user .btn-group-wrap button {
    flex: 0 0 auto;
    padding: 0 16px;
    height: 40px;
  }

  .mypage-wrap.user .btn-group-wrap button + button {
    margin-left: 0;
  }

  /* 폰만 축소 — 아이패드 미니(~768)는 위 기본 크기 유지 */
  @media screen and (max-width: 480px) {
    .mypage-wrap.user .btn-group-wrap {
      gap: 6px;
    }

    .mypage-wrap.user .btn-group-wrap button {
      padding: 0 10px;
      height: 36px;
      font-size: 13px;
    }
  }

  .user-list-wrap .accordion-title {
    padding: 0 16px;
    height: 48px;
    font-size: 13px;
  }

  .user-list-wrap .user-list {
    padding: 12px 16px 12px 8px;
    min-height: 64px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .user-list-wrap .user-list .user-text .text-email {
    font-size: 13px;
    word-break: break-all;
  }

  .user-list-wrap .user-detail {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 12px;
  }

  .user-list-wrap .user-detail .date-list {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .user-list-wrap .user-detail .date-list li + li {
    margin-left: 0;
  }

  .accordion-wrap .acc-title-wrap::before {
    right: 12px;
  }

  /* ---------- Point / voucher modal ---------- */
  .point-pop-wrap .mypage-wrap {
    width: 100%;
  }

  .point-pop-wrap .scroll-wrap {
    max-height: min(70vh, 520px);
  }

  .modal-point,
  .modal-voucher {
    width: 100% !important;
    max-width: min(730px, calc(100vw - 32px)) !important;
    max-height: calc(
      100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
    ) !important;
    margin: 0 auto;
    box-sizing: border-box;
    background-size: cover !important;
    background-position: top center !important;
    overflow: hidden;
  }

  /* 포인트/쿠폰 모달: flex-end로 상단(X) 잘림 방지 → safe-area 포함 중앙 배치 */
  .ui-dialog:has(.modal-point),
  .ui-dialog:has(.modal-voucher),
  .ui-dialog:has(.point-pop-wrap) {
    align-items: center;
    justify-content: center;
    padding: max(20px, env(safe-area-inset-top, 0px)) 12px
      calc(20px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }

  .point-pop-wrap {
    width: 100%;
    max-width: 100%;
    max-height: inherit;
    box-sizing: border-box;
  }

  .point-pop-wrap .content-wrap {
    padding: 160px 24px 24px;
    box-sizing: border-box;
  }

  .point-pop-wrap .scroll-wrap,
  .point-pop-wrap .scroll-wrap > div,
  .point-pop-wrap .tab-wrap .con,
  .point-pop-wrap .agree-box-wrap,
  .modal-voucher .title-wrap + .com-list-wrap1 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .point-pop-wrap .scroll-wrap {
    height: auto;
    max-height: min(55vh, 480px);
  }

  .point-pop-wrap .btn-close {
    top: 20px;
    right: 16px;
    width: 40px;
    height: 40px;
    z-index: 5;
  }

  .point-pop-wrap .title-wrap {
    font-size: 18px;
    word-break: keep-all;
  }

  .point-pop-wrap .title-wrap.between {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  .point-pop-wrap .title-wrap .btn-group-wrap {
    width: 100%;
  }

  .point-pop-wrap .title-wrap .btn-group-wrap button {
    flex: 1;
    font-size: 14px;
  }

  .point-pop-wrap .com-btn-wrap {
    width: calc(100% + 48px);
    margin: 24px -24px 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }

  .point-pop-wrap .com-btn-wrap button {
    font-size: 18px;
    line-height: 1.3;
    height: 64px;
  }

  .point-pop-wrap .mypage-wrap .input-wrap .item-box {
    flex-wrap: wrap;
  }

  .point-pop-wrap .mypage-wrap .input-wrap .item-box label {
    width: 100%;
    min-width: 0;
    height: auto;
    margin-bottom: 8px;
  }

  .point-pop-wrap .input-box.number {
    flex-wrap: wrap;
    gap: 8px;
  }

  .point-pop-wrap .input-box.number input + input,
  .point-pop-wrap .input-box.number input + button {
    margin-left: 0;
  }

  .point-pop-wrap .input-box.number input {
    min-width: 0;
    width: auto;
    flex: 1 1 0;
  }

  .point-pop-wrap .input-box.number button {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin-left: 0 !important;
    margin-top: 4px;
    padding: 0 10px;
    font-size: 14px;
  }

  .point-pop-wrap .agree-box-wrap .content-wrap,
  .point-pop-wrap .agree-box-wrap .list-wrap {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  .point-pop-wrap .check-area label {
    word-break: keep-all;
  }

  /* datepicker touch target */
  .mypage-wrap .ui-datepicker,
  .ui-datepicker {
    min-width: min(263px, calc(100vw - 40px)) !important;
  }
}

/* AI / 전문가 컨설팅 카드: 폰만 세로 — iPad mini(744px)~ 양옆 */
@media screen and (max-width: 743px) {
  .consulting-count-wrap {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 8px;
  }

  .consulting-count-wrap .my-point-wrap.consulting {
    width: 100%;
    margin-bottom: 0;
  }

  /* 서비스 이용방법: 리스트+슬라이더 한 화면, 리스트만 스크롤 */
  .service-wrap .item-box.bg-item1 .pc-wrap,
  .service-wrap .item-box.bg-item2 .pc-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-height: calc(100dvh - 10.5rem);
    overflow: hidden;
    box-sizing: border-box;
  }

  .service-wrap .item-box.bg-item1 .pc-wrap .text-wrap,
  .service-wrap .item-box.bg-item2 .pc-wrap .text-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .service-wrap .item-box.bg-item1 .pc-wrap .pick-guide-head,
  .service-wrap .item-box.bg-item2 .pc-wrap .pick-guide-head,
  .service-wrap .item-box.bg-item1 .pc-wrap .text-wrap > .item-title,
  .service-wrap .item-box.bg-item2 .pc-wrap .text-wrap > .item-title {
    flex-shrink: 0;
  }

  .service-wrap .item-box.bg-item1 .pc-wrap .text-wrap .item-title,
  .service-wrap .item-box.bg-item2 .pc-wrap .text-wrap .item-title {
    margin-bottom: 12px;
  }

  .service-wrap .item-box.bg-item1 .pc-wrap .item-list,
  .service-wrap .item-box.bg-item2 .pc-wrap .item-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
    margin: 0;
  }

  .service-wrap .item-box.bg-item1 .pc-wrap .item-list button,
  .service-wrap .item-box.bg-item2 .pc-wrap .item-list button {
    padding-bottom: 14px;
  }

  .service-wrap .item-box.bg-item1 .pc-wrap .pc-slider,
  .service-wrap .item-box.bg-item2 .pc-wrap .pc-slider {
    flex: 0 0 auto;
    width: 100%;
    padding-top: 0;
  }

  .service-wrap .item-box.bg-item1 .pc-wrap .img-wrap,
  .service-wrap .item-box.bg-item2 .pc-wrap .img-wrap {
    width: 100%;
    max-width: 260px;
    height: 178px;
    margin: 0 auto;
  }

  .service-wrap .item-box.bg-item1 .pc-wrap img,
  .service-wrap .item-box.bg-item2 .pc-wrap img {
    width: calc(100% - 24px);
    height: auto;
    top: 8px;
    left: 12px;
  }
}

@media screen and (max-width: 768px) {
  /* 정보수신/광고 스위치 행: 위아래 간격 */
  .mypage-wrap .com-list-wrap1 li:has(.switch-wrap) {
    padding-top: 12px;
    padding-bottom: 12px;
    box-sizing: border-box;
  }

  .modal-point,
  .modal-voucher {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(
      100dvh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
    ) !important;
  }

  .ui-dialog:has(.modal-point),
  .ui-dialog:has(.modal-voucher),
  .ui-dialog:has(.point-pop-wrap) {
    align-items: center;
    padding: max(24px, calc(12px + env(safe-area-inset-top, 0px))) 8px
      calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .point-pop-wrap .btn-close {
    top: 16px;
    right: 12px;
    width: 40px;
    height: 40px;
  }

  .point-pop-wrap .content-wrap {
    padding: 120px 16px 16px;
  }

  .point-pop-wrap .com-btn-wrap {
    width: calc(100% + 32px);
    margin: 20px -16px 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .point-pop-wrap .com-btn-wrap button {
    font-size: 16px;
    height: 56px;
  }

  .point-pop-wrap .scroll-wrap {
    max-height: min(50vh, 400px);
  }

  .point-pop-wrap .agree-box-wrap {
    margin-top: 24px;
    padding: 0;
  }

  .point-pop-wrap .agree-box-wrap .content-wrap,
  .point-pop-wrap .agree-box-wrap .list-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }

  .point-pop-wrap .list-info-wrap p {
    font-size: 13px;
    line-height: 1.5;
    word-break: keep-all;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .qupid-wrap .contents-wrap:has(> .mypage-wrap:not(.main)) {
    padding: 32px 24px 56px;
  }

  .mypage-wrap .my-point-wrap,
  .mypage-wrap .my-point-detail-wrap {
    padding: 36px 24px;
  }

  .mypage-wrap .my-point-wrap .my-con-wrap .text-point {
    font-size: 36px;
  }

  .mypage-wrap.point .plan {
    font-size: 30px;
  }

  .user-list-wrap .accordion-title,
  .user-list-wrap .user-list {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (max-width: 743px) {
  /* 포인트 카드: 폰만 버튼 하단 — iPad mini(744px)~ 태블릿은 우측 */
  .mypage-wrap .my-point-wrap:has(> .my-btn-wrap) {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .mypage-wrap .my-point-wrap .my-btn-wrap {
    position: static;
    top: auto;
    right: auto;
    padding-top: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .floating-video {
    display: none !important;
  }
}

@media (max-width: 1024px) {
.text-info-mo {
  display: block;
  margin-top: 16px;
  font-size: 18px;
  color: var(--semantic-warning-txt);
}
}

@media (max-width: 768px) {
  .floating-banner {
    display: none;
  }
}

@media (max-width: 1024px) {
  .contents-wrap.service-bg {
    overflow-x: clip;
    flex: none;
    min-height: 0;
    padding: 0;
  }

  .service-wrap .item-box {
    padding: 64px 0;
  }

  .service-wrap .item-box .item-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.35;
    margin-bottom: 16px;
    word-break: keep-all;
  }

  .service-wrap .item-box .text-info {
    font-size: 14px;
    line-height: 1.6;
  }

  .service-wrap .service-main-wrap {
    width: 100%;
    min-height: auto;
    padding: 72px 20px 48px;
  }

  .service-wrap.high .bg-item-main5 .service-main-wrap {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .service-wrap .item-box .service-main-wrap .item-sub {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .service-wrap .item-box .service-main-wrap .item-title {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    line-height: 1.3;
    margin-bottom: 32px;
  }

  /* 서비스 히어로(bg-item-main*) — 모바일 공통
     1080x1920(9:16) 기준. 100% 100% 스트레치는 금지(짜부/왜곡)
     pick2-hero는 영상 스택 레이아웃이라 제외 */
  .service-wrap .item-box[class*="bg-item-main"]:not(.pick2-hero) {
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
    min-height: 0;
    aspect-ratio: 9 / 16;
    height: auto;
    background-color: transparent;
    background-image: none; /* PC background 단축속성 잔여 제거용 */
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover; /* 비율 유지 — 박스에 맞춤 */
    overflow: hidden;
  }

  .service-wrap .item-box[class*="bg-item-main"] > .main-scroll {
    display: none;
  }

  .service-wrap .item-box[class*="bg-item-main"] .service-main-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: 100%;
    margin: 0;
    /* GNB와 text-wrap 간격 */
    padding: 56px 20px 28px;
    box-sizing: border-box;
  }

  .service-wrap .item-box[class*="bg-item-main"] .service-main-wrap .text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: 100%;
    text-align: left;
    box-sizing: border-box;
    /* em 비율 유지(26:58:16) — 기준을 줄여 sub≈2줄 / title≈3줄 맞춤 */
    font-size: clamp(8px, 2.3vw, 9px);
  }

  .service-wrap .item-box[class*="bg-item-main"] .service-main-wrap .item-sub {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.375em 0.5em;
    width: 100%;
    margin-bottom: 0.5em;
    font-size: 1.625em; /* 26 비율 */
    line-height: 1.4;
    text-align: left;
  }

  .service-wrap .item-box[class*="bg-item-main"] .service-main-wrap .item-sub .flag {
    flex-shrink: 0;
    height: 1.5em;
    min-width: 0;
    padding: 0 0.55em;
    margin-right: 0;
    font-size: 0.7em; /* item-sub 대비 */
    line-height: 1;
  }

  .service-wrap .item-box[class*="bg-item-main"] .service-main-wrap .item-title {
    order: 2;
    width: 100%;
    margin-bottom: 0.35em;
    font-size: 3.625em; /* 58 비율 → 약 29~33px */
    line-height: 1.3;
    word-break: keep-all;
    text-align: left;
  }

  /* PC용 <br> 무시 — 컨테이너 너비 기준 자연 줄바꿈 */
  .service-wrap .item-box[class*="bg-item-main"] .service-main-wrap .item-title br {
    display: none;
  }

  /* 모바일: item-title 아래 text-info (PC는 DOM 순서상 service-btn 아래 유지) */
  .service-wrap .item-box[class*="bg-item-main"] .text-wrap > .text-info,
  .service-wrap .item-box[class*="bg-item-main"] .text-wrap > .text-info-mo {
    order: 3;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: max(1em, 12px); /* 16 비율, 가독성 최소 12px */
    line-height: 1.5;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    word-break: keep-all;
    text-align: left;
  }

  .service-wrap .item-box[class*="bg-item-main"] .text-wrap > .text-info br,
  .service-wrap .item-box[class*="bg-item-main"] .text-wrap > .text-info-mo br {
    display: none;
  }

  /* text-info가 있으면 text-info-mo는 숨김 */
  .service-wrap .item-box[class*="bg-item-main"] .text-wrap:has(> .text-info) > .text-info-mo {
    display: none;
  }

  /* 버튼 1개일 때만: 하단 풀폭 CTA 레이아웃 유지 */
  .service-wrap .item-box[class*="bg-item-main"] .service-btn:not(.wide):not(.aip):has(> :only-child) {
    order: 10;
    width: 100%;
    margin-top: auto;
    padding-top: 24px;
  }

  .service-wrap .item-box[class*="bg-item-main"] .service-btn:not(.wide):not(.aip):has(> :only-child) .btn,
  .service-wrap .item-box[class*="bg-item-main"] .service-btn:not(.wide):not(.aip):has(> :only-child) button {
    width: 100%;
    margin-left: 0 !important;
  }

  /* 버튼 2개 이상(wide/aip 등): 하단 고정 레이아웃 제외 */
  .service-wrap .item-box[class*="bg-item-main"] .service-btn.wide,
  .service-wrap .item-box[class*="bg-item-main"] .service-btn.aip,
  .service-wrap .item-box[class*="bg-item-main"] .service-btn:has(> :nth-child(2)) {
    order: 10;
    width: 100%;
    margin-top: 24px;
    padding-top: 0;
  }

  /* pick2 히어로: 모바일에서도 영상(media) 노출 — stars만 숨김 */
  .service-wrap .item-box.pick2-hero .pick2-hero-stars {
    display: none !important;
  }

  .service-wrap .item-box.pick2-hero.bg-item-main,
  .service-wrap.middle .item-box.pick2-hero.bg-item-main,
  .service-wrap .item-box.bg-item-main.pick2-hero {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    background-image: none;
    background-color: #090812;
  }

  .service-wrap .item-box.pick2-hero .pick2-hero-media {
    display: flex !important;
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    order: 2;
    z-index: 1;
    width: 100%;
    margin: 8px 0 0;
    justify-content: center;
    align-items: flex-end;
  }

  .service-wrap .item-box.pick2-hero .pick2-hero-media .pick2-hero-video {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center bottom;
    transform: none;
  }

  .service-wrap .item-box.pick2-hero .service-main-wrap {
    order: 1;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    /* GNB와 text-wrap 간격 */
    padding: 72px 20px 16px;
  }

  .service-wrap .item-box.pick2-hero .service-main-wrap .text-wrap {
    flex: 0 0 auto;
    height: auto;
    max-width: 100%;
  }

  /* 모바일 배경 — 1080x1920 전제, size/position은 공통 cover 유지 */
  .service-wrap .item-box.bg-item-main,
  .service-wrap.middle .item-box.bg-item-main,
  .service-wrap.middle .item-box.bg-item-main1,
  .service-wrap.middle .item-box.bg-item-main2,
  .service-wrap.high .item-box.bg-item-main,
  .service-wrap.high .item-box.bg-item-main2,
  .service-wrap.high .item-box.bg-item-main3,
  .service-wrap.high .item-box.bg-item-main4,
  .service-wrap.high .item-box.bg-item-main5,
  .service-wrap.high .item-box.bg-item-main5.mogo,
  .service-wrap.aip .item-box.bg-item-main1 {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }

  .service-wrap .item-box.bg-item-main {
    background-image: url("../../image/qupid/bg-mob-item-main.png");
  }

  /* AIU — 모바일 히어로: item-box에 배경 (Safari는 wrap 배경이 종종 미표시)
     서버 HTML은 service-wrap aiw 사용 → .aiu와 동일 매칭 */
  .service-wrap.aiu .item-box.bg-item-main,
  .service-wrap.aiw .item-box.bg-item-main {
    background-image: url("../../image/qupid/bg-mob-chatbot.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-color: #0a0618;
  }

  .service-wrap.aiu .item-box.bg-item-main .service-main-wrap,
  .service-wrap.aiw .item-box.bg-item-main .service-main-wrap {
    background-image: none;
  }

  .service-wrap.middle .item-box.bg-item-main {
    background-image: url("../../image/qupid/bg-mob-middle-main.png");
  }
  .service-wrap.middle .item-box.bg-item-main1 {
    background-image: url("../../image/qupid/bg-mob-middle-main2.png");
  }
  .service-wrap.middle .item-box.bg-item-main2 {
    background-image: url("../../image/qupid/bg-mob-middle-main2.png");
  }
  .service-wrap.high .item-box.bg-item-main {
    background-image: url("../../image/qupid/bg-mob-middle-main.png");
  }
  .service-wrap.high .item-box.bg-item-main2 {
    /* 대학 라인업 — 모바일 히어로 */
    background-image: url("../../image/qupid/bg-mob-lineup.png");
  }
  .service-wrap.high .item-box.bg-item-main3 {
    background-image: url("../../image/qupid/bg-mob-high-main3.png");
  }
  /* 정시 Pick — 모바일 히어로 (1080x1920)
     regularAipick 미배포(404) 시 high-pick1 폴백 레이어가 보이도록 이중 지정
     webp는 서버 미배포(404)라 image-set 쓰지 않음 — png만 */
  .service-wrap.high .item-box.bg-item-main4 {
    background-image: url("../../image/qupid/bg-mob-regularAipick.png"),
      url("../../image/qupid/bg-high-pick1.png");
    background-position: center top, center center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-color: #090812;
  }
  .service-wrap.high .item-box.bg-item-main5 {
    background-image: url("../../image/qupid/bg-mainpop-11.png");
  }
  .service-wrap.high .item-box.bg-item-main5.mogo {
    background-image: url("../../image/qupid/bg-mob-mogopick.png");
  }

  /* 수시 Pick Pro: wide 버튼도 모고처럼 히어로 하단 고정 */
  .service-wrap.high .item-box.bg-item-main5:not(.mogo) .service-btn.wide {
    margin-top: auto;
    padding-top: 24px;
  }
  .service-wrap.high .item-box.bg-item-main5:not(.mogo):has(.service-btn.wide) {
    aspect-ratio: 9 / 16;
    min-height: 0;
  }
  .service-wrap.aip .item-box.bg-item-main1 {
    aspect-ratio: auto;
    min-height: max(calc(100vw * 16 / 9), calc(100svh - 55px));
    background-image: url("../../image/qupid/bg-mob-aip-main.png");
  }

  /* ---------- AIP 본문 (소개 / 베네핏 / 탐구유형) ---------- */
  .service-wrap.aip .aiq-img-wrap,
  .service-wrap.middle.aip .aiq-img-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .service-wrap.aip .aiq-img-wrap .text-wrap {
    margin-bottom: 24px;
  }

  .service-wrap.aip .aiq-img-wrap .item-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.35;
    margin-bottom: 12px;
    word-break: keep-all;
  }

  .service-wrap.aip .aiq-img-wrap .text-info {
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
  }

  .service-wrap.aip .aiq-img-wrap img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .service-wrap.aip .aiq-title-wrap,
  .service-wrap.middle.aip .aiq-title-wrap {
    width: 100%;
    max-width: 100%;
    margin-bottom: 28px;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
  }

  .service-wrap.aip .aiq-title-wrap .text-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .service-wrap.aip .aiq-title-wrap .text-logo .logo-aip {
    width: 36px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .service-wrap.aip .aiq-title-wrap .text-title,
  .service-wrap.middle.aip .aiq-title-wrap .text-title {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem);
    line-height: 1.4;
    word-break: keep-all;
  }

  .service-wrap.aip .benefit-grid {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 12px;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .service-wrap.aip .benefit-grid li,
  .service-wrap.aip .benefit-grid li:nth-child(1),
  .service-wrap.aip .benefit-grid li:nth-child(2),
  .service-wrap.aip .benefit-grid li:nth-child(3),
  .service-wrap.aip .benefit-grid li:nth-child(4) {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin-left: 0;
    padding: 12px 12px 20px;
    box-sizing: border-box;
  }

  .service-wrap.aip .benefit-txt-wrap {
    font-size: 15px;
    line-height: 1.45;
    word-break: keep-all;
  }

  .service-wrap.aip .item-box.aip-type-banner {
    padding: 48px 0;
  }

  .service-wrap.aip .high-banner-wrap,
  .service-wrap.aip .high-banner-wrap .text-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .service-wrap.aip .high-banner-wrap .text-wrap {
    padding-bottom: 28px;
  }

  .service-wrap.aip .high-banner-wrap .item-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.35;
    margin-bottom: 12px;
    word-break: keep-all;
  }

  .service-wrap.aip .high-banner-wrap .text-info {
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
  }

  .service-wrap.aip .space-between.aip-index {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .service-wrap.aip .aip-index ul,
  .service-wrap.aip ul.aip-index {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
  }

  .service-wrap.aip .aip-index ul li:nth-child(1),
  .service-wrap.aip ul.aip-index > li:first-child {
    font-size: 18px;
    padding-bottom: 12px;
  }

  .service-wrap.aip .aip-index ul li:not(:first-child),
  .service-wrap.aip ul.aip-index > li:not(:first-child) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 0;
    padding: 12px 0;
    font-size: 14px;
    line-height: 1.5;
    word-break: keep-all;
  }

  .service-wrap.aip .aip-index ul li span,
  .service-wrap.aip ul.aip-index > li span {
    flex: 0 0 auto;
    margin-right: 0;
  }

  /* pick2: 영상 사용 — 모바일 배경 이미지 미적용 */
  .service-wrap .item-box.bg-item-main.pick2-hero,
  .service-wrap.middle .item-box.bg-item-main.pick2-hero {
    background-image: none;
    background-color: #090812;
  }

  /* wide/aip 등 콘텐츠가 긴 히어로: 박스가 커져도 이미지는 cover로 비율 유지 */
  .service-wrap .item-box[class*="bg-item-main"]:has(.service-btn.wide),
  .service-wrap .item-box[class*="bg-item-main"]:has(.service-btn.aip),
  .service-wrap .item-box[class*="bg-item-main"]:has(.service-btn > :nth-child(2)) {
    aspect-ratio: auto;
    min-height: calc(100vw * 16 / 9);
  }

  .service-wrap .bg-item-main .main-scroll {
    display: none;
  }

  .service-wrap.middle .perfect-wrap {
    width: 100%;
    padding: 0 20px;
  }

  .service-wrap.middle .perfect-inner {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 8px 0 16px;
  }

  .service-wrap.middle .perfect-inner .text-main {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 320px;
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    line-height: 1.45;
    padding: 36px 20px;
  }

  .service-wrap.middle .perfect-inner .text-main i {
    display: none;
  }

  .service-wrap.middle .perfect-inner span {
    position: static;
    transform: none;
    display: block;
    width: 100%;
    max-width: 280px;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
  }

  /* PC absolute + translate 가 모바일 span 규칙을 덮어 좌측이 잘리는 문제 방지 */
  .service-wrap.middle .perfect-inner .text-top,
  .service-wrap.middle .perfect-inner .text-left,
  .service-wrap.middle .perfect-inner .text-right,
  .service-wrap.middle .perfect-inner .text-bottom {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
  }

  /* middle-2 aiq-wrap — 모바일/태블릿 */
  .service-wrap.middle .aiq-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .service-wrap.middle .aiq-title-wrap {
    margin-bottom: 28px;
    padding: 0;
  }

  .service-wrap.middle .aiq-title-wrap .text-logo {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .service-wrap.middle .aiq-title-wrap .text-logo .logo-aiq {
    width: 34px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .service-wrap.middle .aiq-title-wrap .text-title {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem);
    line-height: 1.4;
    word-break: keep-all;
  }

  .service-wrap.middle .aiq-wrap .aiq-list-wrap ul {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .service-wrap.middle .aiq-wrap .aiq-list-wrap li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* 2줄 박스 + 화살표 물림 여유 (iPhone XR~) */
    gap: 28px;
  }

  .service-wrap.middle .aiq-wrap .aiq-list-wrap li + li {
    margin-top: 0;
  }

  .service-wrap.middle .aiq-wrap .aiq-list-wrap .box-q,
  .service-wrap.middle .aiq-wrap .aiq-list-wrap .box-a {
    width: 100%;
    min-height: 56px;
    padding: 14px 18px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
    border-radius: 16px;
  }

  .service-wrap.middle .aiq-wrap .aiq-list-wrap .box-a {
    position: relative;
  }

  /* Q/A 사이 중앙 — 보라 박스 상단 경계에 화살 */
  .service-wrap.middle .aiq-wrap .aiq-list-wrap .box-a::before {
    position: absolute;
    left: 50%;
    top: 0;
    /* gap 중앙에 오도록 살짝 위로 */
    transform: translate(-50%, calc(-50% - 6px)) rotate(90deg);
    display: block;
    width: 40px;
    height: 28px;
    margin: 0;
    background: url("../../image/qupid/ico-aiq-arrow.svg") center center / contain no-repeat;
    z-index: 1;
    pointer-events: none;
  }

  .service-wrap.middle .aiq-wrap .aiq-img-wrap {
    width: 100%;
    max-width: 100%;
    margin-top: 48px;
    padding: 0;
    box-sizing: border-box;
  }

  .service-wrap.middle .aiq-wrap .aiq-img-wrap .aiq-title-wrap {
    margin-bottom: 24px;
  }

  .service-wrap.middle .aiq-wrap .aiq-img-wrap img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* high-3 대학라인업 — aiq-wrap / speed-wrap 모바일 */
  .service-wrap.high .aiq-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .service-wrap.high .aiq-title-wrap {
    margin-bottom: 28px;
    padding: 0;
    text-align: center;
  }

  .service-wrap.high .aiq-title-wrap .text-logo {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .service-wrap.high .aiq-title-wrap .text-logo .logo-aiq {
    width: 34px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .service-wrap.high .aiq-title-wrap .text-title {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem);
    line-height: 1.4;
    word-break: keep-all;
  }

  .service-wrap.high .aiq-wrap .aiq-img-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: flex-start;
  }

  .service-wrap.high .aiq-wrap .aiq-img-wrap img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* high-2 — aiq 단일 이미지 (picture 대응, 뷰폭 내 전체 노출) */
  .service-wrap.high .aiq-wrap {
    overflow: visible;
  }

  .service-wrap.high .aiq-wrap > picture,
  .service-wrap.high .aiq-wrap > img {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .service-wrap.high .aiq-wrap > picture img,
  .service-wrap.high .aiq-wrap > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* banner-slider line-type — 모바일 (high-2 / middle-3 공통) */
  .banner-slider-wrap.line-type .text-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px 40px;
    box-sizing: border-box;
  }

  .banner-slider-wrap.line-type .text-wrap .item-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.35;
    word-break: keep-all;
  }

  .banner-slider-wrap.line-type .text-wrap .text-info {
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
  }

  .banner-slider-wrap.line-type .text-wrap .slider-btn {
    position: static;
    right: auto;
    bottom: auto;
    margin-top: 20px;
    justify-content: flex-start;
  }

  .banner-slider-wrap.line-type .banner-slider-area {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 0 20px 8px;
    box-sizing: border-box;
  }

  .banner-slider-wrap.line-type .banner-slider-area::-webkit-scrollbar {
    display: none;
  }

  .banner-slider-wrap.line-type .banner-slider-area ul {
    display: flex;
    width: max-content;
    gap: 16px;
    transform: none !important;
  }

  .banner-slider-wrap.line-type .banner-slider-area li {
    width: min(280px, 78vw);
    height: auto;
    min-height: 300px;
    flex-shrink: 0;
    padding: 28px 24px;
    box-sizing: border-box;
  }

  .banner-slider-wrap.line-type .banner-slider-area li + li {
    margin-left: 0;
  }

  .banner-slider-wrap.line-type .banner-slider-area .item .text-title {
    font-size: 18px;
    line-height: 1.4;
  }

  .banner-slider-wrap.line-type .banner-slider-area .item .info-box-wrap .text-info {
    font-size: 14px;
    line-height: 1.5;
  }

  .banner-slider-wrap.line-type .banner-slider-area .item .ico-wrap {
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
  }

  /* AIU — start-wrap / banner-slider / aiu-link-wrap */
  .service-wrap .item-box.bg-item-start {
    padding: 32px 0;
  }

  /* 타이틀 위 + 콘텐츠 이미지 아래 (겹침 방지) */
  .service-wrap .start-wrap,
  .service-wrap .start-wrap-1 {
    width: calc(100% - 40px);
    max-width: 100%;
    margin: 0 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 0;
    box-sizing: border-box;
    background-image: none !important;
    background-color: transparent;
    border-radius: 0;
  }

  .service-wrap .start-wrap .text-wrap,
  .service-wrap .start-wrap-1 .text-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
  }

  .service-wrap .start-wrap .item-title,
  .service-wrap .start-wrap-1 .item-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.35;
    margin-bottom: 12px;
    word-break: keep-all;
  }

  .service-wrap .start-wrap .text-info,
  .service-wrap .start-wrap-1 .text-info {
    font-size: 14px;
    line-height: 1.55;
    word-break: keep-all;
  }

  .service-wrap .start-wrap::after,
  .service-wrap .start-wrap-1::after {
    content: "";
    display: block;
    /* 풀폭으로 보이는 영역 키움 */
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    height: auto;
    aspect-ratio: 1200 / 744;
    min-height: clamp(340px, 92vw, 540px);
    border-radius: 0;
    background-repeat: no-repeat;
    /* 우측 말풍선 기준 정렬 → 우측 짤림 방지, 살짝만 확대 */
    background-position: right center;
    background-size: 118% auto;
    box-sizing: border-box;
  }

  .service-wrap .start-wrap::after {
    background-image: url("../../image/qupid/bg-item-start.png");
  }

  .service-wrap .start-wrap-1::after {
    background-image: url("../../image/qupid/bg-item-start-1.png");
  }

  /* 정시 Pick — chat-stack(실이미지) 사용 시 ::after 배경 중복 제거 */
  .service-wrap .start-wrap-1:has(.chat-section)::after {
    display: none;
  }

  .service-wrap .start-wrap-1 .chat-section {
    width: 100%;
    margin: 0;
    overflow: hidden;
  }

  .service-wrap .start-wrap-1 .chat-stack {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 4px;
    box-sizing: border-box;
  }

  .service-wrap .start-wrap-1 .chat-card {
    width: 88%;
    max-width: 360px;
    margin-left: 0;
  }

  .service-wrap .start-wrap-1 .chat-card img {
    display: block;
    width: 100%;
    height: auto;
  }

  .service-wrap .start-wrap-1 .chat-card + .chat-card {
    margin-top: -14px;
  }

  .service-wrap .start-wrap-1 .chat-card:nth-child(1) {
    margin-left: 12%;
    z-index: 5;
  }
  .service-wrap .start-wrap-1 .chat-card:nth-child(2) {
    margin-left: 0;
    z-index: 4;
  }
  .service-wrap .start-wrap-1 .chat-card:nth-child(3) {
    margin-left: 6%;
    z-index: 3;
  }
  .service-wrap .start-wrap-1 .chat-card:nth-child(4) {
    margin-left: 0;
    z-index: 2;
  }
  .service-wrap .start-wrap-1 .chat-card:nth-child(5) {
    margin-left: 10%;
    z-index: 1;
  }

  .banner-slider-wrap:not(.line-type) .text-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px 40px;
    box-sizing: border-box;
  }

  .banner-slider-wrap:not(.line-type) .text-wrap .item-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.35;
    word-break: keep-all;
  }

  .banner-slider-wrap:not(.line-type) .text-wrap .text-info {
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
  }

  .banner-slider-wrap:not(.line-type) .text-wrap .slider-btn {
    position: static;
    right: auto;
    bottom: auto;
    margin-top: 20px;
    justify-content: flex-start;
  }

  .banner-slider-wrap:not(.line-type) .banner-slider-area {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 0 20px 8px;
    box-sizing: border-box;
  }

  .banner-slider-wrap:not(.line-type) .banner-slider-area::-webkit-scrollbar {
    display: none;
  }

  .banner-slider-wrap:not(.line-type) .banner-slider-area ul {
    display: flex;
    width: max-content;
    gap: 16px;
    transform: none !important;
  }

  .banner-slider-wrap:not(.line-type) .banner-slider-area li {
    width: min(280px, 78vw);
    height: auto;
    min-height: 300px;
    flex-shrink: 0;
    padding: 28px 24px;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
  }

  .banner-slider-wrap:not(.line-type) .banner-slider-area li + li {
    margin-left: 0;
  }

  .banner-slider-wrap:not(.line-type) .banner-slider-area .item .text-title {
    font-size: 18px;
    line-height: 1.4;
  }

  .banner-slider-wrap:not(.line-type) .banner-slider-area .item .text-info {
    font-size: 14px;
    line-height: 1.5;
  }

  .aiu-link-wrap {
    width: calc(100% - 32px);
    max-width: 100%;
    left: 50%;
    right: auto;
    margin: 0;
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    padding: 10px 12px 44px;
    box-sizing: border-box;
    border-radius: 20px;
  }

  /* 태블릿: 상단이동 버튼(우측)과 겹치지 않게 폭 축소 */
  @media (min-width: 769px) {
    .service-wrap .aiu-link-wrap,
    .aiu-link-wrap,
    .service-wrap .aiu-link-wrap.aip,
    .aiu-link-wrap.aip {
      width: calc(100% - 140px);
      max-width: calc(100% - 140px);
    }
  }

  .aiu-link-wrap .acc-btn {
    right: 24px;
    top: -14px;
    width: 32px;
    height: 32px;
  }

  .aiu-link-wrap .acc-btn::before {
    width: 32px;
    height: 32px;
    /* 하단 드롭업: 접힘=위, 펼침=아래 */
    transform: rotate(180deg);
  }

  .aiu-link-wrap.open .acc-btn::before {
    transform: rotate(0deg);
  }

  /* 모바일·태블릿: AIP 드롭다운 버튼 노출 */
  .aiu-link-wrap.aip .acc-btn {
    display: block;
  }
  .aiu-link-wrap.aip .link-area {
    display: block;
    width: auto;
    height: 56px;
    overflow: hidden;
    white-space: normal;
  }
  .aiu-link-wrap.aip.open .link-area {
    height: auto;
    max-height: min(45vh, 280px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
    scrollbar-gutter: stable;
  }

  .aiu-link-wrap .aiu-text-info {
    left: 12px;
    right: 12px;
    bottom: 8px;
    transform: none;
    width: auto;
    max-width: none;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    word-break: keep-all;
  }

  .aiu-link-wrap .link-area {
    height: 56px;
  }

  .aiu-link-wrap.open .link-area {
    height: auto;
    max-height: min(45vh, 280px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
    padding-bottom: 4px;
    scrollbar-gutter: stable;
  }

  .aiu-link-wrap .link-text {
    font-size: 14px;
    line-height: 1.3;
    padding: 8px 12px;
    margin: 6px 8px 6px 0;
  }

  .aiu-link-wrap .link-text .icon-arrow {
    width: 18px;
    height: 18px;
    margin-left: 8px;
  }

  .aiu-link-wrap .link-text .icon-arrow i {
    width: 18px;
    height: 18px;
    background-size: 10px auto;
  }

  .aiu-link-wrap.aip {
    width: calc(100% - 32px);
    max-width: 100%;
    padding: 10px 12px 12px;
  }

  /* 태블릿: aip 포함 폭 재적용 (위 .aip 규칙 덮어씀) */
  @media (min-width: 769px) {
    .service-wrap .aiu-link-wrap,
    .aiu-link-wrap,
    .service-wrap .aiu-link-wrap.aip,
    .aiu-link-wrap.aip {
      width: calc(100% - 140px);
      max-width: calc(100% - 140px);
    }
  }

  /* AIP 히어로: 하단 fixed 바 — 스티키 바 공간 확보 */
  .service-wrap .item-box[class*="bg-item-main"]:has(> .aiu-link-wrap),
  .service-wrap.aip .item-box.bg-item-main1:has(> .aiu-link-wrap) {
    overflow: visible;
    aspect-ratio: auto;
    min-height: calc(100svh - 55px);
  }

  .service-wrap.high .speed-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .service-wrap.high .speed-wrap .text-wrap {
    width: 100%;
  }

  .service-wrap.high .speed-wrap .text-wrap .item-title {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem);
    line-height: 1.4;
    word-break: keep-all;
  }

  .service-wrap.high .speed-wrap .text-wrap .text-info {
    font-size: 14px;
    line-height: 1.55;
    word-break: keep-all;
  }

  .service-wrap.high .speed-wrap .text-wrap .text-info br {
    display: none;
  }

  .service-wrap.high .speed-wrap .speed-con {
    position: relative;
    flex: none;
    margin: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .service-wrap.high .speed-wrap .speed-con span,
  .service-wrap.high .speed-wrap .speed-con .box1,
  .service-wrap.high .speed-wrap .speed-con .box2,
  .service-wrap.high .speed-wrap .speed-con .box3 {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: min(200px, 64vw);
    height: min(200px, 64vw);
    border-radius: 50%;
    font-size: 16px;
    line-height: 1.4;
    word-break: keep-all;
  }

  .middle-banner-wrap,
  .middle-banner-wrap .text-wrap,
  .high-banner-wrap,
  .high-banner-wrap .text-wrap {
    width: 100%;
    padding: 0 20px 32px;
  }

  .high-banner-wrap .text-wrap {
    padding-bottom: 24px;
  }

  .high-banner-wrap .text-wrap .item-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.35;
    word-break: keep-all;
  }

  .middle-banner-wrap .banner-area,
  .high-banner-wrap .banner-area {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
    padding: 0 20px 8px;
    scrollbar-width: none;
  }

  .middle-banner-wrap .banner-area::-webkit-scrollbar,
  .high-banner-wrap .banner-area::-webkit-scrollbar {
    display: none;
  }

  .middle-banner-wrap .banner-area ul,
  .high-banner-wrap .banner-area ul {
    display: flex;
    width: max-content;
    gap: 16px;
  }

  .middle-banner-wrap .banner-area li,
  .high-banner-wrap .banner-area li {
    width: min(280px, 78vw);
    height: auto;
    min-height: 340px;
    flex-shrink: 0;
    padding: 28px 24px;
  }

  .middle-banner-wrap .banner-area li + li,
  .high-banner-wrap .banner-area li + li {
    margin-left: 0;
  }

  .middle-banner-wrap .banner-area .item .text-title,
  .high-banner-wrap .banner-area .item .text-title {
    font-size: 18px;
    line-height: 1.4;
  }

  .middle-banner-wrap .banner-area .item .info-box-wrap .text-info,
  .high-banner-wrap .banner-area .item .info-box-wrap .text-info {
    font-size: 14px;
    line-height: 1.5;
    padding: 12px 16px;
  }

  .high-banner-wrap .banner-area .item .ico-wrap {
    height: 56px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
  }

  .service-wrap .item-box.bg-item1,
  .service-wrap .item-box.bg-item2 {
    background-size: cover;
    background-position: center top;
  }

  .service-wrap .pc-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 0 20px;
  }

  .service-wrap .pc-wrap .text-wrap {
    width: 100%;
  }

  .service-wrap .pc-wrap .text-wrap .item-title {
    margin-bottom: 28px;
  }

  .service-wrap .pc-wrap button {
    min-height: auto !important;
    height: auto !important;
    padding-bottom: 24px;
  }

  .service-wrap .pc-wrap .item-list > li:last-child > button {
    padding-bottom: 0 !important;
  }

  .service-wrap .pc-wrap button .text-title {
    font-size: 18px;
    line-height: 1.4;
  }

  .service-wrap .pc-wrap button em {
    margin-right: 16px;
    flex-shrink: 0;
  }

  .service-wrap .pc-wrap button .text-area {
    gap: 6px;
  }

  .service-wrap .pc-wrap button .text-info {
    font-size: 14px;
    line-height: 1.55;
    padding-right: 0;
    margin-top: 0 !important;
  }

  .service-wrap .pc-wrap .pc-slider {
    width: 100%;
    padding-top: 0;
  }

  .service-wrap .pc-wrap .img-wrap {
    width: 100%;
    max-width: 360px;
    height: 248px;
    margin: 0 auto;
    background-size: 100% 100%;
  }

  .service-wrap .pc-wrap img {
    width: calc(100% - 28px);
    height: auto;
    top: 10px;
    left: 14px;
  }

  .service-wrap .pc-wrap .pc-slider .text-type {
    padding-top: 20px;
    font-size: 14px !important;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
  }

  /* 최종 결과물 예시 — 모바일 (문서 카드 전체 노출) */
  .service-wrap .book-wrap {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: auto;
    padding: 40px 20px 48px;
    box-sizing: border-box;
    /* PC용 bg-paper 장식은 슬라이드 이미지에 포함되어 있어 모바일에서 제거 */
    background-image: none;
  }

  .service-wrap .book-wrap .text-wrap {
    position: relative;
    width: 100%;
    padding-right: 120px; /* 우측 화살표 버튼 공간 */
    box-sizing: border-box;
  }

  .service-wrap .book-wrap .text-wrap .item-title {
    margin-bottom: 12px;
    font-size: clamp(1.5rem, 6vw, 1.875rem);
    line-height: 1.35;
    word-break: keep-all;
  }

  .service-wrap .book-wrap .text-wrap .text-info {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.5;
    word-break: keep-all;
  }

  /* 첨부2: 타이틀 우측 상단 화살표 */
  .service-wrap .book-wrap .text-wrap .slider-btn {
    position: absolute;
    top: 0;
    right: 0;
  }

  .service-wrap .book-wrap .text-wrap .slider-btn button {
    width: 40px;
    height: 40px;
    border-radius: 40px;
  }

  .service-wrap .book-wrap .text-wrap .slider-btn button + button {
    margin-left: 12px;
  }

  .service-wrap .book-wrap .book-area {
    width: 100%;
    margin-top: 28px;
  }

  .service-wrap .book-wrap .slider-wrap {
    width: 100%;
  }

  /* 모바일: bg-paper 제거 → 흰 박스 안쪽에 문서 이미지
     이미지 상단(제목)이 radius/엣지에 붙어 잘려 보이지 않도록 패딩 확보 */
  .service-wrap .book-wrap .slider-wrap .slider-container {
    position: relative;
    width: calc(100% - 40px);
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    padding: 24px 16px 28px;
    aspect-ratio: auto;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .service-wrap .book-wrap .slider-wrap .slider-container .slide {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 24px;
    display: block;
    width: auto;
    height: auto;
    margin: 0 !important;
    padding: 0;
    box-sizing: border-box;
    transform: none !important;
    background: none;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .service-wrap .book-wrap .slider-wrap .slider-container .slide.active {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .service-wrap .book-wrap .slider-wrap .slider-container .slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
  }

  #pick-service-detail {
    scroll-margin-top: 72px;
  }

  .service-wrap .item-box.bg-item2 {
    padding: 0;
    background-size: cover;
    background-position: center top;
  }

  .service-qna-wrap {
    flex-direction: column;
    width: 100%;
    padding: 0 20px;
    gap: 24px;
  }

  .service-qna-wrap .text-wrap {
    width: 100%;
  }

  .service-qna-wrap .con-wrap {
    padding-left: 0;
  }

  .service-qna-wrap .con-wrap li + li {
    margin-top: 28px;
    padding-top: 28px;
  }

  .service-qna-wrap .con-wrap li .text-q {
    font-size: 18px;
    line-height: 1.45;
  }

  .service-qna-wrap .con-wrap li .text-a {
    font-size: 14px;
    line-height: 1.6;
  }

  /* 이용 포인트 카드 — 모바일 (Figma 375) */
  .service-wrap .service-point-wrap.cards {
    width: calc(100% - 32px);
    max-width: 100%;
    margin: 0 16px;
    box-sizing: border-box;
  }

  .service-wrap .service-point-wrap.cards .cards__inner .card {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-height: 269px;
    padding: 50px 16px 16px;
    box-sizing: border-box;
  }

  .service-wrap .service-point-wrap .point-chips {
    min-width: 140px;
    width: 140px;
    height: 32px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    border-top-left-radius: 13px;
    border-bottom-right-radius: 12px;
  }

  .service-wrap .service-point-wrap .text-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-left: 0;
    padding: 8px 0 24px;
    text-align: center;
    box-sizing: border-box;
  }

  .service-wrap .service-point-wrap .text-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  /* 포인트형(1회 + 400P): caption 없으면 가로 배치 */
  .service-wrap .service-point-wrap .text-box:not(:has(.caption)) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
  }

  .service-wrap .service-point-wrap .text-cycle {
    margin-right: 0;
    font-size: 20px;
    line-height: 26px;
  }

  .service-wrap .service-point-wrap .text-box:not(:has(.caption)) .text-cycle {
    font-size: 28px;
    line-height: 38px;
  }

  .service-wrap .service-point-wrap .text-number {
    font-size: 40px;
    line-height: 48px;
  }

  .service-wrap .service-point-wrap .text-box:not(:has(.caption)) .text-number {
    font-size: 56px;
    line-height: 72px;
  }

  .service-wrap .service-point-wrap .caption {
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: var(--wh60);
    text-align: center;
  }

  .service-wrap .service-point-wrap .text-info {
    margin-top: 8px;
    font-size: 12px;
    line-height: 20px;
    color: var(--wh60);
    word-break: keep-all;
  }

  .service-wrap .service-point-wrap.cards .cards__inner .btn-point,
  .service-wrap .service-point-wrap.cards .cards__inner .overlay-btn {
    width: 100%;
    min-width: 0;
    height: 48px;
    line-height: 48px;
    margin-top: auto;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
  }

  .service-wrap .service-point-wrap.cards .cards__inner.overlay {
    -webkit-mask: radial-gradient(12rem 12rem at var(--x) var(--y), #000 1%, transparent 50%);
    mask: radial-gradient(12rem 12rem at var(--x) var(--y), #000 1%, transparent 50%);
  }

  .service-wrap .service-point-wrap.cards .cards__inner.overlay .card {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    padding: 50px 16px 16px;
  }

  .product-info-wrap {
    padding: 40px 0;
    box-sizing: border-box;
  }

  .product-info-wrap .list-info-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .product-info-wrap .list-info-wrap .text-title {
    font-size: 15px;
    word-break: keep-all;
  }

  .product-info-wrap .list-info-wrap p {
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

@media (min-width: 744px) and (max-width: 1024px) {
  .service-wrap .service-main-wrap {
    padding: 96px 24px 48px;
  }

  .service-wrap .item-box[class*="bg-item-main"] .service-main-wrap {
    padding: 88px 24px 32px;
  }

  /* 우측 여유 활용 + 글자 키움 (기존 26em / ~15px → 넓히고 키움) */
  .service-wrap .item-box[class*="bg-item-main"] .service-main-wrap .text-wrap {
    font-size: clamp(15px, 2.2vw, 20px);
    max-width: min(92%, 38em);
  }

  .service-wrap .item-box[class*="bg-item-main"] .text-wrap > .text-info,
  .service-wrap .item-box[class*="bg-item-main"] .text-wrap > .text-info-mo {
    font-size: max(1em, 16px);
  }

  .service-wrap .item-box[class*="bg-item-main"] .service-main-wrap .item-title {
    font-size: 3.75em;
    line-height: 1.28;
  }

  .service-wrap .item-box[class*="bg-item-main"] .service-main-wrap .item-sub {
    font-size: 1.75em;
  }

  .service-wrap .pc-wrap,
  .service-qna-wrap,
  .middle-banner-wrap,
  .middle-banner-wrap .text-wrap,
  .high-banner-wrap,
  .high-banner-wrap .text-wrap,
  .service-wrap.middle .perfect-wrap,
  .service-wrap.middle .aiq-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  .service-wrap.high .aiq-wrap,
  .service-wrap.high .speed-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  .banner-slider-wrap.line-type .text-wrap {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 48px;
  }

  .banner-slider-wrap.line-type .text-wrap .item-title {
    font-size: clamp(1.5rem, 3.2vw, 2rem);
  }

  .banner-slider-wrap.line-type .banner-slider-area {
    padding-left: 24px;
    padding-right: 24px;
    overflow-x: visible;
  }

  .banner-slider-wrap.line-type .banner-slider-area ul {
    width: 100%;
    gap: 16px;
  }

  .banner-slider-wrap.line-type .banner-slider-area li {
    width: calc((100% - 32px) / 3);
    min-width: 0;
    min-height: 280px;
    height: auto;
    padding: 28px 20px;
  }

  .service-wrap .start-wrap,
  .service-wrap .start-wrap-1 {
    width: calc(100% - 48px);
    gap: 24px;
  }

  .service-wrap .start-wrap::after,
  .service-wrap .start-wrap-1::after {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    aspect-ratio: 1200 / 744;
    min-height: clamp(360px, 70vw, 560px);
    background-size: 112% auto;
    background-position: right center;
  }

  .banner-slider-wrap:not(.line-type) .text-wrap {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 48px;
  }

  .banner-slider-wrap:not(.line-type) .text-wrap .item-title {
    font-size: clamp(1.5rem, 3.2vw, 2rem);
  }

  .banner-slider-wrap:not(.line-type) .banner-slider-area {
    padding-left: 24px;
    padding-right: 24px;
    overflow-x: visible;
  }

  .banner-slider-wrap:not(.line-type) .banner-slider-area ul {
    width: 100%;
    gap: 16px;
  }

  .banner-slider-wrap:not(.line-type) .banner-slider-area li {
    width: calc((100% - 32px) / 3);
    min-width: 0;
    min-height: 280px;
    height: auto;
    padding: 28px 20px;
  }

  .aiu-link-wrap {
    width: calc(100% - 48px);
  }

  .aiu-link-wrap.aip {
    width: calc(100% - 48px);
  }

  /* 태블릿(버튼 노출): 우측 상단이동 공간 확보 — 744~768은 버튼 숨김이라 위 폭 유지 */
  @media (min-width: 769px) {
    .aiu-link-wrap,
    .aiu-link-wrap.aip {
      width: calc(100% - 140px);
      max-width: calc(100% - 140px);
    }
  }

  .service-wrap.middle .aiq-title-wrap .text-title {
    font-size: clamp(1.5rem, 3.2vw, 2rem);
  }

  .service-wrap.high .aiq-title-wrap .text-title,
  .service-wrap.high .speed-wrap .text-wrap .item-title {
    font-size: clamp(1.5rem, 3.2vw, 2rem);
  }

  .service-wrap.high .speed-wrap {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }

  .service-wrap.high .speed-wrap .text-wrap {
    flex: 1 1 40%;
    min-width: 0;
  }

  .service-wrap.high .speed-wrap .speed-con {
    flex: 1 1 55%;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 180px;
  }

  .service-wrap.high .speed-wrap .speed-con span,
  .service-wrap.high .speed-wrap .speed-con .box1,
  .service-wrap.high .speed-wrap .speed-con .box2,
  .service-wrap.high .speed-wrap .speed-con .box3 {
    width: min(160px, 28vw);
    height: min(160px, 28vw);
    font-size: 14px;
  }

  .service-wrap.high .aiq-wrap .aiq-img-wrap {
    flex-direction: row;
    gap: 16px;
  }

  .service-wrap.high .aiq-wrap .aiq-img-wrap img {
    width: calc(50% - 8px);
  }

  .service-wrap.middle .aiq-wrap .aiq-list-wrap .box-q,
  .service-wrap.middle .aiq-wrap .aiq-list-wrap .box-a {
    font-size: 15px;
    min-height: 60px;
    padding: 16px 20px;
  }

  .service-wrap.middle .aiq-wrap .aiq-img-wrap {
    margin-top: 64px;
  }

  /* AIP 본문 — 태블릿: 2열 베네핏, 탐구유형 가로 배치 */
  .service-wrap.aip .aiq-img-wrap,
  .service-wrap.middle.aip .aiq-img-wrap,
  .service-wrap.aip .aiq-title-wrap,
  .service-wrap.middle.aip .aiq-title-wrap,
  .service-wrap.aip .benefit-grid,
  .service-wrap.aip .high-banner-wrap,
  .service-wrap.aip .high-banner-wrap .text-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  .service-wrap.aip .aiq-title-wrap .text-title,
  .service-wrap.middle.aip .aiq-title-wrap .text-title {
    font-size: clamp(1.5rem, 3.2vw, 2rem);
  }

  .service-wrap.aip .benefit-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .service-wrap.aip .benefit-txt-wrap {
    font-size: 16px;
  }

  .service-wrap.aip .item-box.aip-type-banner {
    padding: 64px 0;
  }

  .service-wrap.aip .space-between.aip-index {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 24px;
  }

  .service-wrap.aip .aip-index ul,
  .service-wrap.aip ul.aip-index {
    flex: 1 1 calc(33.333% - 16px);
    min-width: 200px;
    max-width: none;
  }

  .service-wrap.aip .aip-index ul li:nth-child(1),
  .service-wrap.aip ul.aip-index > li:first-child {
    font-size: 20px;
  }

  .service-wrap.aip .aip-index ul li:not(:first-child),
  .service-wrap.aip ul.aip-index > li:not(:first-child) {
    font-size: 15px;
  }

  .service-wrap .pc-wrap .img-wrap {
    max-width: 480px;
    height: 328px;
  }

  .service-wrap .book-wrap {
    padding: 48px 24px 56px;
  }

  .service-wrap .book-wrap .slider-wrap .slider-container {
    max-width: 400px;
  }

  .service-wrap .service-point-wrap.cards {
    width: calc(100% - 48px);
    margin: 0 24px;
  }

  .product-info-wrap .list-info-wrap {
    padding: 0 24px;
  }

  /* 모바일과 동일 9:16 — 넓은 뷰포트에서 cover로 하단이 잘리지 않음
     pick2-hero는 영상 레이아웃이라 제외 */
  .service-wrap .item-box[class*="bg-item-main"]:not(.pick2-hero) {
    aspect-ratio: 9 / 16;
    width: 100%;
    max-width: none;
    background-size: cover;
    background-position: center top;
  }

  .service-wrap .item-box.pick2-hero.bg-item-main {
    aspect-ratio: auto;
    height: auto;
    background-image: none;
    background-color: #090812;
  }

  .service-wrap .item-box.pick2-hero .service-main-wrap {
    padding-top: 96px;
  }

  .service-wrap .item-box[class*="bg-item-main"]:not(.pick2-hero):has(.service-btn.wide),
  .service-wrap .item-box[class*="bg-item-main"]:not(.pick2-hero):has(.service-btn.aip),
  .service-wrap .item-box[class*="bg-item-main"]:not(.pick2-hero):has(.service-btn > :nth-child(2)),
  .service-wrap.aip .item-box.bg-item-main1 {
    aspect-ratio: 9 / 16;
    min-height: 0;
  }
}

@media (max-width: 768px) {
  .modal-wrap.modal-susipro {
    width: calc(100vw - 40px) !important;
    max-width: 448px !important;
  }
}

@media screen and (max-width: 1200px) {
  .susipro-wrap.mypage-wrap.wide {
    width: calc(100% - 48px);
    max-width: 100%;
    margin: 0 24px;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 1024px) {
  .susipro-wrap.mypage-wrap.wide {
    width: calc(100% - 40px);
    margin: 0 20px;
    padding-bottom: 60px;
  }

  .susipro-title {
    font-size: clamp(24px, 5vw, 28px);
  }

  .susipro-desc {
    font-size: 15px;
    word-break: keep-all;
  }

  .susipro-notice {
    padding: 16px 18px;
    margin-bottom: 36px;
  }

  .susipro-mock-head {
    flex-wrap: nowrap;
  }

  .susipro-month {
    flex: 0 0 118px;
    width: 118px;
    min-width: 118px;
    max-width: 118px;
  }

  .susipro-month select {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 28px 0 10px;
    font-size: 14px !important;
    line-height: 48px;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .susipro-month.select-wrap::after {
    right: 8px;
    font-size: 10px;
  }

  .susipro-mock-item.is-september .susipro-file {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
  }

  .susipro-mock-item.is-september .susipro-month {
    flex: 1 1 auto;
    width: auto;
    min-width: 118px;
    max-width: none;
  }

  .susipro-file {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .susipro-file .file-wrap,
  .susipro-file .file-input,
  .susipro-month select {
    height: 48px !important;
  }

  .susipro-file .file-input {
    padding: 0 36px 0 10px !important;
    font-size: 14px !important;
    line-height: 46px;
    box-sizing: border-box;
  }

  .susipro-wrap .title-wrap {
    font-size: 20px;
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .susipro-wrap .title-wrap .required {
    font-size: 20px;
  }

  .susipro-wrap .title-wrap.between {
    align-items: flex-start;
  }

  .susipro-guide-btn {
    margin-left: auto;
  }

  .susipro-score-table {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }

  .susipro-score-table table {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  .susipro-score-table table th,
  .susipro-score-table table td {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
  }

  .susipro-score-table table th:first-child,
  .susipro-score-table table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    background: var(--neutrals-bg-800);
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.25);
  }

  .susipro-score-table table th:nth-child(3),
  .susipro-score-table table th:nth-child(4),
  .susipro-score-table table td:nth-child(3),
  .susipro-score-table table td:nth-child(4) {
    width: 132px;
    min-width: 132px;
    max-width: 132px;
  }

  .susipro-score-table table thead th:first-child,
  .susipro-score-table table tbody th:first-child {
    background: var(--neutrals-bg-700);
  }

  .susipro-section + .susipro-section {
    margin-top: 56px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrap:has(.susipro-wrap) {
    overflow-x: hidden;
  }

  .susipro-wrap.mypage-wrap.wide {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 16px 48px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .susipro-header {
    margin-bottom: 24px;
  }

  .susipro-title {
    font-size: 24px;
  }

  .susipro-desc {
    font-size: 14px;
    line-height: 1.55;
  }

  .susipro-notice {
    padding: 14px 14px 14px 16px;
    margin-bottom: 28px;
    border-radius: 8px;
  }

  .susipro-notice-tit {
    font-size: 15px;
  }

  .susipro-notice-tit::before {
    width: 20px;
    height: 20px;
    background-size: 12px 12px;
  }

  .susipro-notice-list {
    padding-left: 28px;
  }

  .susipro-notice-list li {
    font-size: 13px;
  }

  .susipro-wrap .title-wrap .susipro-section-info {
    flex: 1 1 100%;
    margin: 0 !important;
    text-align: left;
    font-size: 13px !important;
    line-height: 1.5;
  }

  .susipro-wrap .title-wrap {
    font-size: 18px;
    padding-bottom: 0;
    margin-bottom: 12px;
  }

  .susipro-wrap .title-wrap .required {
    font-size: 18px;
    white-space: normal;
    text-wrap: wrap;
    line-height: 1.35;
  }

  .susipro-wrap .title-wrap.between {
    flex-direction: column;
    align-items: stretch;
  }

  .susipro-guide-btn {
    width: 100%;
    margin-left: 0;
    height: 40px !important;
    font-size: 14px !important;
  }

  .susipro-mock-list {
    gap: 12px;
  }

  .susipro-mock-head {
    padding: 12px 14px;
    min-height: 0;
  }

  .susipro-mock-body {
    gap: 12px;
    padding: 0 14px 14px;
    overflow: hidden;
  }

  .susipro-month {
    flex: 0 0 120px;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
  }

  .susipro-file {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .susipro-mock-remove {
    flex: 0.5 1 0;
    min-width: 40px;
    height: 48px;
    padding: 0 6px;
  }

  /* iOS 확대 방지 */
  .susipro-wrap input,
  .susipro-wrap select,
  .susipro-wrap textarea {
    font-size: 16px !important;
  }

  .susipro-month select {
    width: 100%;
    min-width: 0;
    height: 48px !important;
    padding: 0 26px 0 8px;
    font-size: 13px !important;
    line-height: 48px;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .susipro-month.select-wrap::after {
    right: 6px;
    font-size: 10px;
  }

  .susipro-mock-item.is-september .susipro-file {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
  }

  .susipro-mock-item.is-september .susipro-month {
    flex: 1 1 auto;
    width: auto;
    min-width: 120px;
    max-width: none;
  }

  .susipro-file .file-wrap,
  .susipro-file .file-input,
  .susipro-month select {
    height: 48px !important;
  }

  .susipro-file .file-input {
    padding: 0 36px 0 10px !important;
    font-size: 14px !important;
    line-height: 46px;
    box-sizing: border-box;
  }

  /* 성적표: 모바일에서 가로 스크롤 */
  .susipro-score-table {
    margin: 0;
    border-radius: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }

  .susipro-score-table::after {
    display: none;
  }

  .susipro-score-table table {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  .susipro-score-table table th,
  .susipro-score-table table td {
    height: 44px;
    padding: 4px 2px;
    font-size: 11px;
    width: 104px;
    min-width: 104px;
    max-width: 104px;
  }

  .susipro-score-table table th:first-child,
  .susipro-score-table table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    background: var(--neutrals-bg-800);
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.25);
  }

  .susipro-score-table table th:nth-child(3),
  .susipro-score-table table th:nth-child(4),
  .susipro-score-table table td:nth-child(3),
  .susipro-score-table table td:nth-child(4) {
    width: 116px;
    min-width: 116px;
    max-width: 116px;
  }

  .susipro-score-table table thead th:first-child,
  .susipro-score-table table tbody th:first-child {
    background: var(--neutrals-bg-700);
  }

  .susipro-score-table .select-wrap select {
    height: 36px;
    padding: 0 16px 0 2px;
    font-size: 11px !important;
  }

  .susipro-score-input {
    height: 36px !important;
    font-size: 12px !important;
    padding: 0 2px !important;
  }

  .susipro-score-split-grid {
    min-height: 64px;
  }

  .susipro-score-split-row {
    min-height: 32px;
  }

  .susipro-score-split-label {
    font-size: 10px;
  }

  .susipro-score-split-row .susipro-score-input {
    min-height: 32px;
    font-size: 11px !important;
  }

  .susipro-add-btn {
    margin-top: 16px;
    height: 48px !important;
    font-size: 15px !important;
  }

  .susipro-wrap .input-wrap {
    width: 100%;
  }

  .susipro-wrap .input-wrap .text-info {
    font-size: 13px;
    line-height: 1.55;
    word-break: keep-all;
  }

  .susipro-wrap .textarea-wrap .textarea-inner textarea {
    min-height: 160px;
    padding: 14px;
    font-size: 16px !important;
  }

  .susipro-wrap .textarea-wrap .textarea-inner span {
    font-size: 12px;
  }

  .susipro-section + .susipro-section {
    margin-top: 48px;
  }

  .susipro-terms {
    max-height: 180px;
    padding: 16px;
  }

  .susipro-terms-list {
    padding-left: 18px;
  }

  .susipro-terms-list li {
    font-size: 13px;
  }

  .susipro-wrap .agree-wrap {
    margin: 16px 0 0;
  }

  .susipro-wrap .agree-wrap .custom-checkbox {
    font-size: 14px;
    line-height: 1.45;
    word-break: keep-all;
    padding-left: 32px;
  }

  .susipro-wrap .com-btn-wrap {
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
  }

  .susipro-wrap .com-btn-wrap button {
    flex: none;
    width: 100%;
    height: 48px !important;
    margin-left: 0 !important;
  }

  .susipro-wrap .com-btn-wrap button + button {
    margin-left: 0 !important;
  }
}

@media screen and (max-width: 480px) {
  .susipro-wrap.mypage-wrap.wide {
    width: 100%;
    margin: 0;
    padding: 0 14px 40px;
  }

  .susipro-title {
    font-size: 22px;
  }

  .susipro-mock-head {
    padding: 10px 12px;
  }

  .susipro-mock-body {
    padding: 0 12px 12px;
  }

}

@media screen and (max-width: 1024px) {
  .susipro-report-wrap.mypage-wrap.wide {
    width: 100%;
    max-width: 100%;
    padding: 0 24px 64px;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 768px) {
  .susipro-report-wrap.mypage-wrap.wide {
    padding: 0 16px 48px;
  }

  .susipro-report-subtit {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .susipro-report-head {
    flex-wrap: wrap;
    padding: 16px;
    row-gap: 10px;
  }

  .susipro-report-meta {
    flex: 1 1 calc(100% - 100px);
    margin-right: 0;
  }

  .susipro-report-badge {
    order: 3;
  }

  .susipro-report-download {
    order: 4;
    margin-left: 0;
    width: 100%;
  }

  .susipro-report-body {
    padding: 0 16px 16px;
  }

  .susipro-report-block {
    padding-top: 16px;
  }

  .susipro-report-block-txt {
    font-size: 14px;
  }
}

@media screen and (max-width: 1024px) {
  /* form#search_form 래핑(서버) / 직계(퍼블) 모두 대응 */
  .qupid-wrap .contents-wrap:has(.customer-wrap),
  .qupid-wrap .contents-wrap:has(#search_form) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 24px 20px 56px;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* 서버가 customer-wrap을 form#search_form으로 감싸면
     flex 아이템 기본 min-width:auto 때문에 우측이 clip 되고
     LNB ul 이 늘어나 scrollWidth===clientWidth → 탭 스와이프 불가 */
  .qupid-wrap .contents-wrap > form,
  .qupid-wrap .contents-wrap form#search_form,
  #search_form:has(.customer-wrap) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
  }

  /* 서버: form이 contents-wrap 자체를 감싸는 경우 (이용권 사용내역 등)
     qupid-wrap space-between 중간 아이템 → 세로 중앙 공백 방지 */
  .qupid-wrap > form#search_form,
  .qupid-wrap > form:has(> .contents-wrap) {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border: 0;
    align-self: stretch;
    box-sizing: border-box;
  }

  .qupid-wrap > form#search_form > .contents-wrap,
  .qupid-wrap > form:has(> .contents-wrap) > .contents-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .customer-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
  }

  /* LNB → 가로 스크롤 탭 */
  .customer-wrap .lnb-menu {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 28px;
  }

  .customer-wrap .lnb-menu .lnb-title {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 16px;
  }

  .customer-wrap .lnb-menu ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    border-bottom: 1px solid var(--wh20);
    scrollbar-width: none;
  }

  .customer-wrap .lnb-menu ul::-webkit-scrollbar {
    display: none;
  }

  .customer-wrap .lnb-menu li {
    flex: 0 0 auto;
    padding-left: 0;
  }

  .customer-wrap .lnb-menu li + li {
    margin-top: 0;
  }

  .customer-wrap .lnb-menu li a {
    position: relative;
    align-items: center;
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
    line-height: 44px;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .customer-wrap .lnb-menu li.active a::before,
  .customer-wrap .lnb-menu li a:hover::before {
    display: none;
  }

  .customer-wrap .lnb-menu li.active a::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    background: var(--primary-active);
  }

  .customer-wrap .customer-contents-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .customer-wrap .customer-contents-wrap .title-wrap {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    font-size: 22px;
    line-height: 1.3;
  }

  .customer-wrap .customer-contents-wrap .title-wrap .input-wrap {
    width: 100%;
    flex: 1 1 100%;
  }

  .customer-wrap .customer-contents-wrap .title-wrap .input-wrap .form-box,
  .customer-wrap .customer-contents-wrap .title-wrap .input-wrap .input-box {
    width: 100%;
  }

  .customer-wrap .customer-contents-wrap .title-wrap .input-wrap input.small {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .customer-wrap .customer-contents-wrap .btn-group-wrap {
    margin: 16px 0 32px;
  }

  .customer-contents-wrap .title-wrap.sub {
    margin-top: 28px !important;
    font-size: 16px;
  }

  /* 아코디언 (공지 / 1:1 / FAQ) */
  .customer-wrap .accordion-wrap .acc-title-wrap {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 0;
    min-height: 56px;
    padding: 14px 36px 14px 0;
    font-size: 15px;
  }

  .customer-wrap .accordion-wrap .acc-title-wrap::before {
    right: 0;
    top: 18px;
  }

  .customer-wrap .accordion-wrap .acc-title-wrap .chip {
    min-width: 64px;
    height: 22px;
    font-size: 12px;
  }

  .customer-wrap .accordion-wrap .acc-title-wrap .text-date {
    margin: 0 10px 0 8px;
    font-size: 13px;
  }

  .customer-wrap .accordion-wrap .acc-title-wrap .text-title {
    flex: 1 1 100%;
    order: 3;
    padding-right: 0;
    font-size: 15px;
    line-height: 1.45;
    word-break: keep-all;
  }

  .customer-wrap .accordion-wrap .con-wrap {
    padding: 20px 16px;
  }

  .customer-wrap .box-qna-wrap {
    max-height: none;
    overflow: visible;
  }

  .customer-wrap .box-qna-wrap .items-box {
    flex-direction: column;
    gap: 12px;
  }

  .customer-wrap .box-qna-wrap .item-tit {
    font-size: 18px;
    margin-right: 0;
  }

  .customer-wrap .box-qna-wrap .item-con {
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
  }

  .customer-wrap .box-qna-wrap .items-box + .items-box {
    padding-top: 24px;
    margin-top: 24px;
  }

  .customer-wrap .download-wrap {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* FAQ 탭 / 칩 스크롤 */
  .customer-wrap .tab-wrap.line-type .tab-list {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
  }

  .customer-wrap .tab-wrap.line-type .tab-list::-webkit-scrollbar {
    display: none;
  }

  .customer-wrap .tab-wrap.line-type .tab-list li {
    flex: 0 0 auto;
  }

  .customer-wrap .btn-group-scroll-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 40px 0 0;
  }

  .customer-wrap .btn-group-scroll-wrap .btn-group-inner {
    max-width: calc(100% - 40px);
    justify-content: flex-start;
  }

  /* 이전 화살표가 보일 때만 왼쪽 여백 */
  .customer-wrap .btn-group-scroll-wrap:has(.btn-arrow.prev:not(:disabled)) {
    padding-left: 40px;
  }

  .customer-wrap .btn-group-scroll-wrap:has(.btn-arrow.prev:not(:disabled)) .btn-group-inner {
    max-width: calc(100% - 80px);
  }

  .customer-wrap .pagenation-wrap {
    margin-top: 24px;
    overflow: hidden;
  }

  /* 협업문의 (dev) */
  .customer-contents-wrap.dev .dev-title-wrap {
    font-size: 24px;
    line-height: 1.35;
    margin-bottom: 20px;
    word-break: keep-all;
  }

  .customer-contents-wrap.dev .dev-main-banner {
    height: auto;
    min-height: 120px;
    padding: 28px 20px;
    font-size: 15px;
    line-height: 1.5;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    word-break: keep-all;
  }

  .customer-contents-wrap.dev .item-title {
    font-size: 18px;
    line-height: 1.35;
    margin: 40px 0 16px;
  }

  .customer-contents-wrap.dev .dev-list-wrap .item-box {
    width: 100%;
    padding: 24px 20px;
    box-sizing: border-box;
  }

  .customer-contents-wrap.dev .dev-list-wrap .item-box:nth-child(2n) {
    margin-left: 0;
  }

  .customer-contents-wrap.dev .dev-list-wrap .item-box:not(:nth-child(1)) {
    margin-top: 10px;
  }

  .customer-contents-wrap.dev .dev-list-wrap .item-box .text-tit {
    font-size: 17px;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  .customer-contents-wrap.dev .dev-list-wrap .item-box .list-info-wrap {
    font-size: 14px;
    line-height: 1.55;
  }

  .customer-contents-wrap.dev .dev-customer-wrap .dev-customer-box {
    padding: 24px 16px;
  }

  .customer-contents-wrap.dev .dev-customer-wrap .dev-customer-box .text-title {
    font-size: 16px;
    line-height: 1.4;
    word-break: break-all;
  }

  .customer-contents-wrap.dev .dev-customer-wrap .dev-customer-box .text-info {
    font-size: 13px;
    line-height: 1.55;
  }

  /* 사용방법 — 비디오 썸네일 (잘림 방지: 컨테이너 기준 + 가로 스크롤) */
  .customer-contents-wrap .swiper-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .customer-contents-wrap .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    box-sizing: border-box;
    scrollbar-width: none;
  }

  .customer-contents-wrap .swiper-wrapper::-webkit-scrollbar {
    display: none;
  }

  .customer-contents-wrap .swiper-slide {
    flex: 0 0 min(280px, 100%);
    width: min(280px, 100%) !important;
    max-width: 100%;
    margin-right: 0 !important;
    box-sizing: border-box;
    scroll-snap-align: start;
  }

  .customer-contents-wrap .video-thumb,
  .customer-wrap .video-thumb {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
  }

  .customer-contents-wrap .video-thumb::after,
  .customer-wrap .video-thumb::after {
    font-size: 32px;
  }

  .youtube-modal .modal-content {
    width: min(960px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    padding: 40px 8px 8px;
    box-sizing: border-box;
  }

  .youtube-modal .modal-close {
    right: 8px;
    top: 4px;
    font-size: 28px;
  }

  .youtube-modal #youtube-player,
  .youtube-modal .youtube-player,
  .youtube-modal iframe {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .mypage-wrap .video-iframe,
  .video-iframe {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* 이용후기 */
  .customer-wrap .board-list-wrap.review .board-list-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 0 !important;
    padding-bottom: 16px;
  }

  .customer-wrap .board-list-header .board-list-btn {
    flex-wrap: wrap;
    gap: 10px 12px;
  }

  .customer-wrap .board-list-btn p {
    font-size: 22px;
  }

  .customer-wrap .search-bar-wrapper {
    width: 100%;
    margin: 0;
  }

  .customer-wrap .search-bar {
    width: 100%;
  }

  .customer-wrap .search-input,
  .customer-wrap .search-input.expanded {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .customer-wrap .board-detail-box,
  .customer-wrap .board-list-wrap.review .board-detail-box {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 0; /* 검색바와 상세옵션 간격 없음 */
    box-sizing: border-box;
    animation: none;
    transform: none;
  }

  .customer-wrap .board-detail-con .item-inner .btn-group-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .customer-wrap .datepicker-wrap.range {
    flex-wrap: wrap;
    gap: 8px;
  }

  .customer-wrap .dotTabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    margin: 20px 0 24px;
    scrollbar-width: none;
  }

  .customer-wrap .dotTabs::-webkit-scrollbar {
    display: none;
  }

  .customer-wrap .dotTab {
    font-size: 14px;
  }

  .customer-wrap .dotTab::after {
    margin: 0 8px;
  }

  .customer-wrap .postContent,
  .customer-wrap .post-card.expanded .postContent {
    width: 100%;
    max-width: 100%;
  }

  .customer-wrap .post-text {
    margin-left: 0;
  }

  .customer-wrap .post-body {
    flex-direction: column;
  }

  /* 사진 없음: 빈 thumb/gallery 여백만 제거 (크기·클릭 동작은 PC와 동일 유지) */
  .customer-wrap .post-body .thumb:empty,
  .customer-wrap .post-body .thumb:not(:has(img)),
  .customer-wrap .post-body .thumb:has(img[src=""]),
  .customer-wrap .post-body .thumb:has(img:not([src])),
  .customer-wrap .post-card:not(:has(.post-body .thumb img[src]:not([src=""]))) .thumb,
  .customer-wrap .gallery:empty {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }

  .customer-wrap .post-meta .nickname {
    max-width: 140px;
  }

  .customer-wrap .btn-consulting {
    height: auto;
    min-height: 56px;
    padding: 12px 52px 12px 14px; /* 원래 화살표(32px) 자리 */
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .customer-wrap .btn-consulting img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* 모바일: 화살표 원래 크기 유지 */
  .customer-wrap .btn-consulting::after,
  .btn-consulting::after {
    display: inline-flex;
    right: 16px;
    width: 32px;
    height: 15px;
    background-size: contain;
  }

  .customer-wrap .bottom-sticky {
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px 12px;
    background: linear-gradient(180deg, transparent, var(--neutrals-bg-1000) 28%);
  }
}

/* iPhone SE(~375px): 화살표만 축소 — 글자 겹침 방지 */
@media screen and (max-width: 375px) {
  .customer-wrap .btn-consulting {
    padding: 12px 40px 12px 14px;
  }

  .customer-wrap .btn-consulting::after,
  .btn-consulting::after {
    right: 10px;
    width: 20px;
    height: 10px;
  }
}

@media screen and (max-width: 768px) {
  /* form#search_form 래핑(서버) / 직계(퍼블) 모두 대응 */
  .qupid-wrap .contents-wrap:has(.customer-wrap) {
    padding: 16px 16px 48px;
  }

  .customer-wrap .lnb-menu .lnb-title {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .customer-wrap .lnb-menu li a {
    padding: 0 12px;
    font-size: 13px;
  }

  .customer-wrap .lnb-menu li.active a::after {
    left: 12px;
    right: 12px;
  }

  .customer-wrap .customer-contents-wrap .title-wrap {
    font-size: 20px;
  }

  .customer-contents-wrap.dev .dev-title-wrap {
    font-size: 20px;
  }

  .customer-contents-wrap .swiper-slide {
    flex-basis: min(240px, 100%);
    width: min(240px, 100%) !important;
  }

  .customer-wrap .bottom-sticky {
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 12px;
  }

  .customer-wrap .accordion-wrap .acc-title-wrap .text-date {
    margin-left: 0;
  }

  .lightbox .lb-nav {
    width: 40px;
    height: 56px;
    font-size: 28px;
  }

  .lightbox .lb-prev {
    left: 8px;
  }

  .lightbox .lb-next {
    right: 8px;
  }

  .lightbox .lb-close {
    top: 12px;
    right: 12px;
    font-size: 32px;
  }
}

@media screen and (max-width: 1024px) {
  .qupid-wrap .contents-wrap.board-bg,
  .qupid-wrap .contents-wrap.board-bg-ai {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 40px 16px 56px;
    box-sizing: border-box;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: visible;
    touch-action: pan-y;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 전문가 컨설팅 리스트: 중첩 스크롤/터치 차단으로 뻑뻑해지지 않게 */
  .contents-wrap.board-bg .board-wrap,
  .contents-wrap.board-bg .board-list-wrap,
  .contents-wrap.board-bg .board-list-inner,
  .contents-wrap.board-bg .board-list-box,
  .contents-wrap.board-bg .board-list-scroll {
    overflow: visible;
    touch-action: pan-y;
    overscroll-behavior: auto;
  }

  .board-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-direction: column;
    box-sizing: border-box;
  }

  .board-list-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .board-list-wrap .board-list-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .board-list-wrap .board-title .text-sub {
    position: relative;
    z-index: 5;
    font-size: 14px;
    line-height: 1.4;
    overflow: visible;
  }

  .board-list-wrap .board-title {
    overflow: visible;
  }

  /* 이용매뉴얼 툴팁: 위로 뜨면 상단에 잘리므로 버튼 중앙 기준으로 아래 표시 */
  .tooltip-animation-wrapper {
    overflow: visible;
    z-index: 6;
  }

  .tooltip-animation-text {
    bottom: auto;
    top: calc(100% + 8px);
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(4px) scale(0.5);
    animation-name: showTooltipBelow;
  }

  .tooltip-animation-text::after {
    top: auto;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 6px 6px;
    border-color: transparent transparent var(--neutrals-bg-900) transparent;
  }

  @keyframes showTooltipBelow {
    0%, 40% {
      opacity: 0;
      transform: translateX(-50%) translateY(4px) scale(0.5);
    }
    50%, 75% {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
    }
    85%, 100% {
      opacity: 0;
      transform: translateX(-50%) translateY(4px) scale(0.5);
    }
  }

  .board-list-wrap .board-title .text-main {
    margin: 8px 0 28px;
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.35;
    text-align: center;
    word-break: keep-all;
  }

  .board-list-wrap .board-list-header {
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 32px;
    margin-bottom: 12px;
    padding-bottom: 14px;
  }

  .board-list-header .board-list-btn {
    flex-wrap: wrap;
    gap: 10px 12px;
    width: 100%;
  }

  .board-list-wrap .board-list-header .input-wrap.addBtn,
  .board-list-wrap .search-bar-wrapper {
    width: 100%;
    margin: 0;
  }

  .board-list-wrap .search-bar {
    width: 100%;
  }

  .board-list-wrap .search-input,
  .board-list-wrap .search-input.expanded {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .board-list-wrap .board-detail-box,
  .board-list-wrap .board-detail-box.advanced-options {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    box-sizing: border-box;
    animation: none;
    transform: none;
  }

  .board-list-wrap .board-detail-con .btn-group-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .board-list-box .btn-group-scroll-wrap {
    padding: 20px 0;
  }

  .board-list-wrap .checkbox-group-scroll-wrap {
    padding: 16px 0;
    border-radius: 0;
    justify-content: flex-start;
    overflow: hidden;
    transition: padding 0.2s ease;
  }

  /* 화살이 실제로 보일 때만 해당 쪽 여백 확보 (초기 좌측 공백 방지) */
  .board-list-wrap .checkbox-group-scroll-wrap:has(.btn-arrow.prev:not(:disabled)) {
    padding-left: 40px;
  }

  .board-list-wrap .checkbox-group-scroll-wrap:has(.btn-arrow.next:not(:disabled)) {
    padding-right: 40px;
  }

  .board-list-wrap .checkbox-group-scroll-wrap .btn-arrow {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 32px;
  }

  .board-list-wrap .checkbox-group-scroll-wrap .btn-arrow:disabled {
    display: none;
  }

  .board-list-wrap .checkbox-group-scroll-wrap .btn-arrow.prev {
    left: 0;
  }

  .board-list-wrap .checkbox-group-scroll-wrap .btn-arrow.next {
    right: 0;
  }

  .board-list-wrap .checkbox-group-scroll-wrap .checkbox-group-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    box-sizing: border-box;
  }

  .board-list-wrap .checkbox-group-scroll-wrap .checkbox-group-inner .label-category {
    flex-shrink: 0;
    margin-right: 8px;
  }

  .board-list-wrap .checkbox-group-scroll-wrap .checkbox-group-inner .label-category:last-of-type {
    margin-right: 0;
  }

  /* 리스트: 1열, 고정폭 해제 */
  .board-list-wrap .board-list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
  }

  .board-list-wrap .board-list li,
  .board-list-wrap .board-list li:only-child,
  .board-list-wrap .board-list li:nth-child(2n) {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    margin-left: 0;
    box-sizing: border-box;
  }

  .board-list-wrap .board-list li + li {
    margin-top: 10px;
  }

  .board-list-wrap .board-list .btn-list {
    height: auto;
    min-height: 72px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 16px;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .board-list-wrap .board-list .btn-list.write,
  .board-list-wrap .board-list .btn-list.write.active {
    min-height: 120px;
    padding: 20px 16px;
  }

  .board-list-wrap .board-list .btn-list.write .text-write::before {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 48px;
  }

  .board-list-wrap .board-list .btn-list.write:hover .text-write::before {
    width: 56px;
    height: 56px;
    margin: -4px auto 8px;
    margin-bottom: 8px;
    border-radius: 56px;
    border-width: 4px;
  }

  .board-list-wrap .btn-list .text-wrap,
  .board-list-wrap .btn-list .text-wrap.expert {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .board-list-wrap .btn-list .text-title {
    display: block;
    width: auto;
    min-width: 0;
    max-width: min(100%, 30em); /* 한글 약 30자 기준 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    line-height: 1.45;
  }

  .board-list-wrap .btn-list .text-con {
    display: block;
    width: auto;
    min-width: 0;
    max-width: min(100%, 30em); /* 한글 약 30자 기준 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .board-list-wrap .btn-list .text-bottom {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 28px;
    flex-wrap: nowrap;
    gap: 6px 8px;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
  }

  .board-list-wrap .btn-list .text-bottom .text-info {
    display: inline-flex;
    align-items: center;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    margin-top: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 28px;
  }

  .board-list-wrap .btn-list .text-bottom .text-date,
  .board-list-wrap .btn-list .text-bottom .like,
  .board-list-wrap .btn-list .text-bottom .view,
  .board-list-wrap .btn-list .text-bottom .flag,
  .board-list-wrap .btn-list .text-bottom .lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    align-self: center;
    height: 28px;
    line-height: 1;
    box-sizing: border-box;
  }

  .board-list-wrap .btn-list .text-bottom .like::before,
  .board-list-wrap .btn-list .text-bottom .view::before {
    display: inline-block;
    vertical-align: middle;
    margin-top: 0;
  }

  .board-list-wrap .btn-list .text-bottom .flag {
    width: auto;
    min-width: 64px;
    max-width: none;
    box-sizing: border-box;
  }

  /* QA 하위 목록 */
  .qa-wrap {
    --qa-right-gutter: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 4px 12px 4px 12px;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* 접힌 상태: flex로 토글·제목·플래그 세로 중앙 */
  .qa-wrap:has(> .qa-actions):not(:has(.toggle-comment.open)) {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .qa-wrap:has(> .qa-actions):not(:has(.toggle-comment.open)) > .qa-actions {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 0;
    align-self: center;
    order: -1; /* list→actions DOM 순서여도 왼쪽에 배치 */
  }

  .qa-wrap:has(> .qa-actions):not(:has(.toggle-comment.open)) > .qa-sub-list {
    flex: 1 1 auto;
    min-width: 0;
  }

  .qa-wrap:has(> .qa-actions):not(:has(.toggle-comment.open)) > .qa-sub-list > li {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 28px;
    align-items: center;
  }

  .qa-wrap:has(> .qa-actions):not(:has(.toggle-comment.open)) > .qa-sub-list > li > a {
    align-items: center;
    min-height: 28px;
  }

  .qa-wrap:has(> .qa-actions):has(.toggle-comment.open) {
    display: block;
  }

  .qa-actions {
    left: 12px;
    top: 10px;
    margin-top: 0;
  }

  .qa-wrap:has(> .qa-actions):has(.toggle-comment.open) > .qa-actions {
    position: absolute;
    top: 10px;
    left: 12px;
    transform: none;
  }

  /* 토글 있을 때 접힌 미리보기 행 자리용 ::before 제거 (flex 토글이 대체) */
  .qa-wrap:has(> .qa-actions):not(:has(.toggle-comment.open))
    > .qa-sub-list
    > li
    > a::before {
    display: none !important;
  }

  .qa-wrap:has(.qa-sub-list > li:only-child) {
    padding-left: 12px;
  }

  .qa-main {
    padding: 12px 16px;
    align-items: flex-start;
    min-width: 0;
  }

  .qa-main a {
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
  }

  .qa-main .question {
    flex: 1 1 100%;
    min-width: 0;
    margin-right: 0;
    white-space: normal;
    word-break: keep-all;
  }

  .qa-main .date {
    margin-right: 0;
    width: auto;
  }

  .qa-sub-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .qa-sub-list li {
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    padding: 6px 0;
    box-sizing: border-box;
    align-items: center;
  }

  .qa-sub-list li:only-child {
    margin-left: 0;
  }

  .qa-sub-list a {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
  }

  .qa-sub-list .question {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%; /* 남은 영역 전체 사용 → 공백 방지 */
    margin-right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 28px;
  }

  .qa-sub-list .text-bottom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-left: 0;
    align-self: center;
    height: 28px;
  }

  .qa-sub-list .text-bottom .flag {
    width: auto;
    min-width: 64px;
    margin-left: 0;
    align-self: center;
  }

  /* detail-open: 리스트 숨기고 상세만 */
  .board-wrap.detail-open {
    flex-direction: column;
  }

  .board-wrap.detail-open .board-list-wrap {
    display: none;
  }

  .board-wrap.detail-open .board-detail-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    flex: none;
  }

  .board-wrap.detail-open .board-list-inner {
    width: 100%;
    margin-right: 0;
  }

  .board-wrap.detail-open .board-list-header,
  .board-wrap.detail-open .board-list-scroll,
  .board-wrap.detail-open .pagenation-wrap,
  .board-wrap.detail-open .board-detail-inner .detail-scroll {
    padding-right: 0;
  }

  /* 상세 / 글쓰기 / 글보기 */
  .board-detail-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* overflow-x만 clip/auto면 overflow-y가 auto로 계산되어 내부 세로 스크롤 생김 → 둘 다 visible */
    overflow: visible;
  }

  .board-detail-wrap::before,
  .board-detail-wrap::after {
    display: none;
  }

  .board-detail-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 20px 16px 72px;
    box-sizing: border-box;
  }

  .board-detail-inner .detail-title {
    position: sticky;
    top: calc(var(--service-banner-height, 0px) + 55px);
    z-index: 6;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    margin-left: -16px;
    margin-right: -16px;
    width: auto;
    padding: 12px 16px;
    box-sizing: border-box;
    background: var(--neutrals-bg-500);
  }

  .board-detail-inner .detail-title.is-gnb-away {
    top: var(--service-banner-height, 0px);
  }

  .board-detail-inner .detail-title .header {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
    font-size: 16px;
  }

  .board-detail-inner .detail-title .header p {
    min-width: 0;
    word-break: keep-all;
  }

  .board-detail-inner .detail-title .btn-area {
    flex-wrap: wrap;
    gap: 8px;
  }

  .board-detail-inner .detail-title .btn-area .btn-view {
    gap: 10px;
  }

  .board-detail-inner .detail-title .btn-area button + button {
    margin-left: 0;
  }

  .detail-title .btn-like {
    width: auto;
    min-width: 88px;
    padding: 0 12px;
  }

  .board-detail-inner .detail-box {
    padding: 20px 16px;
    box-sizing: border-box;
  }

  .detail-form-view .detail-box .text-title {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 14px;
    word-break: keep-all;
  }

  .detail-form-view .detail-box .detail-info {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }

  .detail-info .myinfo-wrap {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 10px;
  }

  /* 내부 세로 스크롤 제거 → 브라우저 스크롤만 */
  .board-detail-inner .detail-scroll {
    overflow: visible;
    max-height: none;
    height: auto;
  }

  .detail-form-view .detail-box .detail-con,
  .board-detail-inner .detail-con {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: anywhere;
    overflow: visible;
    max-height: none;
    height: auto;
  }

  .detail-form-view .detail-box .detail-con.comment {
    margin-top: 4px;
    margin-left: 0;
    overflow: visible;
    max-height: none;
    height: auto;
  }

  /* pre.markdown-body UA overflow:auto + overflow-x:auto→y:auto 로 생기던 세로 스크롤 제거 */
  .board-detail-wrap .markdown-body,
  .board-detail-inner .markdown-body,
  .detail-form-view .markdown-body,
  .detail-con .markdown-body,
  .detail-con pre.markdown-body {
    overflow: visible;
    max-height: none;
    height: auto;
  }

  .ai-comment-wrap,
  .comment-toggle {
    margin-left: 0;
  }

  .detail-form-view .detail-box .detail-file {
    margin-top: 24px;
  }

  .board-detail-wrap .download-wrap .download-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .board-detail-wrap .download-wrap .download-inner .download-box,
  .board-detail-wrap .download-wrap .download-inner .download-box:nth-child(2n) {
    width: 100%;
    margin-left: 0;
  }

  .board-detail-wrap .switch-info-wrap {
    margin-top: 32px;
    margin-bottom: 48px;
  }

  .board-detail-wrap .switch-info-wrap .switch-area {
    flex-wrap: wrap;
    gap: 16px;
  }

  .board-category-wrap {
    margin-top: 24px;
  }

  .detail-scroll .btn-group-scroll-wrap {
    width: 100%;
  }

  .mypage-wrap.board-detail-inner .btn {
    width: auto;
    min-width: 100px;
  }

  /* 하단 입력 / sticky */
  .board-detail-wrap .bottom-sticky,
  .board-detail-inner .bottom-sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 12px;
  }

  /* prompt-wrap: board-detail-inner(16px)와 동일 폭 — 박스 자체에 양옆 여백 */
  .board-detail-wrap .bottom-sticky.prompt-wrap,
  .board-detail-inner .bottom-sticky.prompt-wrap {
    margin-left: 0;
    margin-right: 0;
    margin-top: 24px;
    margin-bottom: 0;
    bottom: 8px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 8px;
  }

  /* suggestionbox 노출 시 상단 패딩 (HTML 클래스 없이 :has) */
  .board-detail-wrap .bottom-sticky.prompt-wrap:has(> .suggestionbox[style*="flex"]),
  .board-detail-inner .bottom-sticky.prompt-wrap:has(> .suggestionbox[style*="flex"]) {
    padding-top: 12px;
  }

  .board-detail-wrap .prompt-wrap,
  .board-detail-inner .prompt-wrap {
    margin-top: 24px;
    box-sizing: border-box;
  }

  .add-question {
    align-items: flex-start;
    border-radius: 16px;
    padding: 8px 12px 8px 8px;
  }

  .suggestionbox {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
  }

  .prompt-wrap .suggestionbox .suggestion {
    flex: 1 1 auto;
    min-width: 0;
  }

  .prompt-wrap .suggestionbox .suggestion-close {
    flex: 0 0 auto;
    align-self: flex-start;
  }

  /* 안내 팝업 (AI 컨설팅) — 모바일에서도 보이되 폭 맞춤 */
  .top-modal {
    display: flex;
    left: 0 !important;
    right: 0;
    top: 72px !important;
    width: 100%;
    max-width: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
    justify-content: center;
  }

  .top-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(70vh, 560px) !important;
    box-sizing: border-box;
  }

  .top-modal-title {
    font-size: 18px;
    line-height: 1.35;
    word-break: keep-all;
  }

  .top-modal-body {
    font-size: 14px;
    line-height: 1.55;
    word-break: keep-all;
  }

  .board-list-wrap .pagenation-wrap,
  .board-detail-wrap .pagenation-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-top: 24px;
    /* 살짝 넘칠 때 스크롤은 유지하되 스크롤바는 숨김 */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .board-list-wrap .pagenation-wrap::-webkit-scrollbar,
  .board-detail-wrap .pagenation-wrap::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
  }

  .board-list-wrap .pagenation-inner,
  .board-detail-wrap .pagenation-inner {
    margin-top: 16px;
    max-width: 100%;
    flex-wrap: nowrap;
  }

  .board-list-wrap .pagenation-inner button,
  .board-detail-wrap .pagenation-inner button {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .board-list-wrap .service-btn {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .board-list-wrap .service-btn .btn {
    width: 100%;
    max-width: 360px;
  }

  .board-detail-wrap .markdown-body,
  .board-detail-inner .markdown-body,
  .detail-form-view .markdown-body,
  .detail-con .markdown-body,
  .detail-con pre.markdown-body {
    max-width: 100%;
    overflow: visible;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .board-detail-wrap .markdown-body table,
  .board-detail-inner .markdown-body table {
    display: table;
    table-layout: fixed;
    width: 640px;
    min-width: 100%;
    max-width: none;
  }

  .board-detail-wrap .markdown-body,
  .board-detail-inner .markdown-body {
    overflow-x: visible;
  }

  .board-detail-wrap .markdown-table-scroll,
  .board-detail-inner .markdown-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .board-detail-wrap .upload_box-wrap,
  .board-detail-inner .upload_box-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .board-detail-wrap img,
  .board-detail-inner .detail-con img,
  .board-detail-inner .markdown-body img {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 768px) {
  .qupid-wrap .contents-wrap.board-bg,
  .qupid-wrap .contents-wrap.board-bg-ai {
    padding: 28px 12px 48px;
  }

  .board-detail-inner {
    padding: 16px 12px 64px;
  }

  .board-detail-inner .detail-title {
    top: calc(var(--service-banner-height, 0px) + 55px);
    margin-left: -12px;
    margin-right: -12px;
    padding: 12px 12px;
  }

  .board-list-wrap .board-title .text-main {
    font-size: 22px;
  }

  .board-detail-inner .detail-box {
    padding: 16px 12px;
  }

  .detail-form-view .detail-box .text-title {
    font-size: 17px;
  }

  .board-detail-wrap .bottom-sticky,
  .board-detail-inner .bottom-sticky {
    position: sticky;
    bottom: 0;
    margin-left: -12px;
    margin-right: -12px;
    padding: 0 12px 10px;
  }

  .board-detail-wrap .bottom-sticky.prompt-wrap,
  .board-detail-inner .bottom-sticky.prompt-wrap {
    margin-left: 0;
    margin-right: 0;
    bottom: 8px;
    padding: 8px;
  }

  .board-detail-wrap .bottom-sticky.prompt-wrap:has(> .suggestionbox[style*="flex"]),
  .board-detail-inner .bottom-sticky.prompt-wrap:has(> .suggestionbox[style*="flex"]) {
    padding-top: 12px;
  }

  /* 모바일: 좋아요 문구 숨기고 하트 아이콘만 */
  .detail-title .btn-like {
    width: 40px;
    min-width: 40px;
    padding: 0;
  }

  .detail-title .btn-like span {
    display: none;
  }

  /* 기존 768 hide 오버라이드 — 폭만 맞춤 */
  .top-modal {
    display: flex;
  }
}

@media screen and (max-width: 1024px) {
  .qupid-wrap .contents-wrap.product-wrap,
  .contents-wrap.product-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 40px 16px 56px !important;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .product-wrap .pro-title-wrap {
    font-size: clamp(22px, 5vw, 28px);
    line-height: 1.35;
    margin-bottom: 32px;
    padding: 0 4px;
    word-break: keep-all;
  }

  .product-wrap .pro-title-wrap .text-info {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 12px;
    word-break: keep-all;
  }

  .product-wrap .pro-title-wrap--with-help {
    flex-wrap: wrap;
    gap: 6px;
  }

  .product-wrap .pro-title-help__tooltip {
    white-space: normal;
    max-width: min(240px, 70vw);
    text-align: left;
  }

  /* 카드 그리드: 1200 고정폭 해제 → 세로 스택 */
  .product-wrap .cards,
  .product-wrap.one .cards,
  .product-wrap .cards.two {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .product-wrap.one .cards {
    max-width: 540px;
  }

  .product-wrap .cards__inner,
  .product-wrap.light .cards__inner,
  .product-wrap.susi .cards__inner,
  .product-wrap .cards.two .cards__inner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 터치에선 마우스 오버레이 효과 비활성 */
  .product-wrap .overlay {
    display: none !important;
  }

  .product-wrap .card,
  .product-wrap.light .card,
  .product-wrap .cards.two .card,
  .product-wrap .overlay .card,
  .product-wrap.light .overlay .card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 24px 20px 18px;
    box-sizing: border-box;
  }

  .product-wrap.one .card {
    max-width: 100%;
    margin: 0 auto;
  }

  .product-wrap .card__heading {
    font-size: 1em;
  }

  .product-wrap .card__title {
    font-size: clamp(1.5em, 6vw, 2em);
  }

  .product-wrap .card__price .text__point {
    font-size: clamp(34px, 9vw, 42px);
    line-height: 1.25;
    white-space: nowrap;
    word-break: normal;
    align-items: baseline;
  }

  .product-wrap .card__price .text__point.subscribe::before,
  .product-wrap .card__price .text__point.subscribe::after,
  .product-wrap .card__price .text__point.pass.before::before,
  .product-wrap .card__price .text__point.pass.after::after {
    font-size: 0.55em;
    top: 0;
    font-weight: 500;
    line-height: 1;
  }

  .product-wrap .card__price .text__price {
    font-size: clamp(14px, 3.5vw, 16px);
    line-height: 1.4;
    flex-wrap: wrap;
    white-space: normal;
  }

  .product-wrap .cards__inner li {
    margin-left: 0;
    padding-left: 28px;
    font-size: 15px;
    line-height: 1.45;
    word-break: keep-all;
  }

  .product-wrap .cards__inner ul {
    margin-top: 24px;
  }

  .product-wrap .cta {
    width: 100%;
    height: 52px;
    line-height: 52px;
    font-size: 15px;
    box-sizing: border-box;
  }

  .product-wrap.light .main__cards.cards:not(.one) .cards__inner:not(.overlay) .card__price {
    grid-template-rows: auto auto auto;
  }

  .product-wrap.light .main__cards.cards:not(.one) .cards__inner:not(.overlay) .card__price > .text__price {
    white-space: normal;
    flex-wrap: wrap;
  }

  .product-wrap.light .main__cards.cards:not(.one) .cards__inner:not(.overlay) .card__price > em {
    font-size: 18px;
  }

  /* 깃발/원형 뱃지 — 카드 안쪽에 두고 텍스트 잘림 방지 */
  .flag-badge {
    right: 12px;
    width: 56px;
    padding: 14px 6px;
  }

  .flag-badge strong {
    font-size: 14px;
  }

  .flag-badge span {
    font-size: 11px;
  }

  .product-wrap .card:has(.flag-badge.circle),
  .product-wrap .cards,
  .product-wrap .cards__inner {
    overflow: visible;
  }

  .flag-badge.circle {
    top: 8px;
    right: 8px;
    width: 90px;
    height: 90px;
    min-width: 90px;
    min-height: 90px;
    padding: 8px 6px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    overflow: hidden;
    /* 고정 px 제거 — 원형 크기(cqmin)에 비례 */
    font-size: clamp(13px, 16cqmin, 16px);
    line-height: 1.22;
    gap: 0;
  }

  .flag-badge.circle strong,
  .flag-badge.circle span {
    font-size: 0.9em;
    line-height: 1.22;
    letter-spacing: -0.04em;
  }

  /* 모고 PASS 행 — 기존 미디어와 맞춤 보강 */
  .product-wrap .flow > .mogo-pass-row {
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    max-width: 100%;
    margin-top: 48px;
    padding: 0;
  }

  .product-wrap .mogo-pass-row__title {
    align-items: center;
    text-align: center;
    font-size: clamp(22px, 5vw, 28px);
    white-space: normal;
    word-break: keep-all;
  }

  .product-wrap .mogo-pass-row__card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 440px;
  }

  /* 수시 등 특수 레이아웃 */
  .product-wrap.susi .cards__inner:not(.overlay) .card {
    width: 100%;
    max-width: 100%;
  }

  /* 안내 영역 */
  .product-info-wrap {
    width: 100%;
    max-width: 100%;
    padding: 40px 0;
    box-sizing: border-box;
  }

  .product-info-wrap .list-info-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .product-info-wrap .list-info-wrap .text-title {
    font-size: 15px;
    word-break: keep-all;
  }

  .product-info-wrap .list-info-wrap p {
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .product-go-wrap {
    font-size: 18px;
    line-height: 1.45;
    padding: 48px 16px 64px;
    word-break: keep-all;
  }

  /* 포인트 차감 표 — 가로 스크롤 (잘림 대신 스와이프) */
  .point-table-wrap {
    width: 100%;
    max-width: 100%;
    margin: 48px 0 0 !important;
    padding: 0;
    box-sizing: border-box;
  }

  .point-table-wrap .table-title {
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 12px;
    padding: 0 4px;
    word-break: keep-all;
  }

  .point-table-wrap .point-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 12px;
  }

  .point-table-wrap table {
    width: max-content;
    min-width: 720px;
    table-layout: auto;
  }

  .point-table-wrap table th,
  .point-table-wrap table td {
    height: auto;
    min-height: 56px;
    min-width: 88px;
    padding: 10px 8px;
    font-size: 13px;
    line-height: 1.35;
    word-break: keep-all;
  }

  .point-table-wrap table td {
    font-size: 20px;
  }

  .product-subscribe-banner {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 120px;
    padding: 28px 16px;
    margin-top: 48px !important;
    font-size: 16px;
    line-height: 1.45;
    word-break: keep-all;
    box-sizing: border-box;
    text-align: center;
  }

  /* 충전 완료 등 */
  .product-wrap .com-form-wrap {
    width: 100%;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
  }

  .product-wrap .bg-wrap {
    width: 100%;
    max-width: 100%;
    padding: 40px 20px;
    box-sizing: border-box;
  }

  .product-wrap .star__wrap {
    overflow: hidden;
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .qupid-wrap .contents-wrap.product-wrap,
  .contents-wrap.product-wrap {
    padding: 28px 12px 48px !important;
  }

  .product-wrap .bg-wrap {
    padding: 28px 16px;
  }

  .product-wrap .pro-title-wrap {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .product-wrap .card,
  .product-wrap.light .card {
    padding: 20px 16px 16px;
  }

  .product-wrap .cards__inner li {
    font-size: 14px;
    margin-left: 0;
    padding-left: 24px;
  }

  .point-table-wrap table {
    min-width: 640px;
  }

  .point-table-wrap table th,
  .point-table-wrap table td {
    font-size: 12px;
    padding: 8px 6px;
    min-width: 72px;
  }

  .point-table-wrap table td {
    font-size: 18px;
  }

  .product-info-wrap .list-info-wrap {
    padding: 0 16px;
  }

  .product-go-wrap {
    font-size: 16px;
    padding: 40px 12px 56px;
  }

  .flag-badge.circle {
    width: 84px;
    height: 84px;
    min-width: 84px;
    min-height: 84px;
    top: 6px;
    right: 6px;
    padding: 7px 5px;
    font-size: clamp(12px, 16cqmin, 15px);
    line-height: 1.2;
  }

  .flag-badge.circle strong,
  .flag-badge.circle span {
    font-size: 0.88em;
    line-height: 1.2;
  }
}

@media screen and (max-width: 1024px) {
  .com-table-wrap:has(> table) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* 가로 스와이프 가능 힌트 — 우측(및 좌측) inset 그림자 */
  .com-table-wrap.is-scrollable-x.has-more-right {
    box-shadow: inset -18px 0 14px -10px rgba(0, 0, 0, 0.55);
  }

  .com-table-wrap.is-scrollable-x.has-more-left {
    box-shadow: inset 18px 0 14px -10px rgba(0, 0, 0, 0.55);
  }

  .com-table-wrap.is-scrollable-x.has-more-left.has-more-right {
    box-shadow:
      inset 18px 0 14px -10px rgba(0, 0, 0, 0.55),
      inset -18px 0 14px -10px rgba(0, 0, 0, 0.55);
  }

  /* JS 로드 전/미적용 시: 4열 이상 테이블은 우측 힌트 기본 노출 */
  .com-table-wrap:has(> table:has(th:nth-child(4))):not(.is-scrollable-x) {
    box-shadow: inset -18px 0 14px -10px rgba(0, 0, 0, 0.55);
  }

  .com-table-wrap:has(> table) > table {
    width: 100%;
    min-width: 0;
  }

  /* 4열 이상만 최소폭 → 가로 스크롤 */
  .com-table-wrap:has(> table) > table:has(th:nth-child(4)) {
    min-width: 720px;
  }

  /* thead·flag 뱃지 줄바꿈 방지 (결제수단/더보기/이용중 등) */
  .com-table-wrap:has(> table) > table th {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .com-table-wrap:has(> table) > table .flag,
  .com-table-wrap:has(> table) > table td:has(.flag) {
    white-space: nowrap;
  }

  .com-table-wrap:has(> table) > table .flag {
    display: inline-flex;
    flex-shrink: 0;
    max-width: none;
  }

  /* 결제내역 등 컬럼 많은 테이블 */
  .mypage-wrap.wide .com-table-wrap > table,
  .mypage-wrap .com-table-wrap > table:has(th:nth-child(6)) {
    min-width: 960px;
  }

  /* 3열 이하: 패딩·타이포 축소로 한 화면에 */
  .com-table-wrap:has(> table) > table:not(:has(th:nth-child(4))) {
    table-layout: fixed;
  }

  .com-table-wrap:has(> table) > table:not(:has(th:nth-child(4))) th,
  .com-table-wrap:has(> table) > table:not(:has(th:nth-child(4))) td {
    padding: 0 8px;
    font-size: 14px;
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .com-table-wrap:has(> table) > table:not(:has(th:nth-child(4))) th.right,
  .com-table-wrap:has(> table) > table:not(:has(th:nth-child(4))) td.right {
    white-space: nowrap;
  }

  /* 결제정보 + stepper: 행 높이·정렬 (iPhone SE 포함)
     padding:0 8px 규칙보다 특이도 높여 위아래 간격 확보 */
  .com-table-wrap:has(> table) > table:not(:has(th:nth-child(4))) td:has(.stepper),
  .com-table-wrap:has(> table) > table:not(:has(th:nth-child(4))) td:has(.table-product),
  .com-table-wrap:has(> table) > table:not(:has(th:nth-child(4))) td:has(.table-product) + td {
    height: auto;
    min-height: 88px;
    padding: 24px 8px;
    vertical-align: middle;
    box-sizing: border-box;
  }

  .mypage-wrap .com-table-wrap > table:not(:has(th:nth-child(4))) td:has(.stepper),
  .mypage-wrap .com-table-wrap > table:not(:has(th:nth-child(4))) td:has(.table-product),
  .mypage-wrap .com-table-wrap > table:not(:has(th:nth-child(4))) td:has(.table-product) + td {
    height: auto;
    min-height: 88px;
    padding: 24px 8px;
    vertical-align: middle;
    box-sizing: border-box;
  }

  .com-table-wrap .table-product {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    width: 100%;
  }

  .com-table-wrap .table-product .stepper {
    margin-left: 0;
  }

  .com-table-wrap .stepper button {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }

  .com-table-wrap .stepper .value {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
  }
}

@media screen and (max-width: 390px) {
  /* iPhone SE: 상품명/금액 비율 재조정 + stepper 한 줄 유지 */
  .mypage-wrap .com-table-wrap > table:has(.stepper) colgroup col:first-child,
  .com-table-wrap:has(.stepper) > table colgroup col:first-child {
    width: 62% !important;
  }

  .mypage-wrap .com-table-wrap > table:has(.stepper) colgroup col:last-child,
  .com-table-wrap:has(.stepper) > table colgroup col:last-child {
    width: 38% !important;
  }

  .com-table-wrap .table-product {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .com-table-wrap .table-product-name {
    font-size: 14px;
  }

  .com-table-wrap .stepper button {
    width: 28px;
    height: 28px;
  }

  .com-table-wrap .stepper .value {
    width: 26px;
    height: 26px;
    line-height: 26px;
  }

  .com-table-wrap table td:has(.table-product) + td.right {
    font-size: 13px;
    padding-left: 4px;
    padding-right: 8px;
  }
}

@media screen and (max-width: 1024px) {
  .agree-wrap {
    height: auto;
    min-height: 52px;
    padding: 12px 16px;
    box-sizing: border-box;
  }

  .agree-wrap .custom-checkbox {
    font-size: 16px;
  }

  .agree-section {
    padding: 14px 16px;
    box-sizing: border-box;
  }

  .agree-accordion {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 보기 버튼 있는 행: 라벨 왼쪽 / 보기 오른쪽 한 줄 */
  .agree-accordion .agree-section:has(> button) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .agree-accordion .agree-section:has(> button) > .custom-checkbox {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    width: auto;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.45;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .agree-accordion .agree-section:has(> button) > .custom-checkbox .text-primary {
    display: inline;
    white-space: nowrap;
    word-break: keep-all;
  }

  .agree-accordion .agree-section:has(> button) > button {
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 0;
    white-space: nowrap;
  }

  /* 보기 버튼 없는 동의 행(결제 등) */
  .agree-accordion .agree-section:not(:has(> button)) > .custom-checkbox {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.45;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .agree-accordion .agree-section:not(:has(> button)) > .custom-checkbox .text-primary {
    display: inline;
    white-space: nowrap;
    word-break: keep-all;
  }

  .agree-accordion .list-info-wrap.star.small p {
    margin-left: 32px;
    margin-right: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .bg-box-wrap .list-info-wrap {
    padding: 0 16px;
  }

  .list-info-wrap.star.bg-type {
    padding: 24px 16px;
  }

  /* 잔여 포인트: 모바일 — 유상포인트:100P / (설명) */
  .mypage-wrap .list-info-wrap.star.bg-type > .point-remain-row {
    width: 100%;
    margin-bottom: 16px;
  }

  .mypage-wrap .list-info-wrap.star.bg-type > .point-remain-row + .point-remain-row {
    margin-bottom: 20px;
  }

  .mypage-wrap .list-info-wrap.star.bg-type .point-remain-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.45;
    color: var(--wh100);
  }

  .mypage-wrap .list-info-wrap.star.bg-type .point-remain-head {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    color: var(--wh100);
  }

  .mypage-wrap .list-info-wrap.star.bg-type .point-remain-head > i {
    flex-shrink: 0;
  }

  .mypage-wrap .list-info-wrap.star.bg-type .point-remain-colon {
    margin: 0;
    color: var(--wh100);
  }

  .mypage-wrap .list-info-wrap.star.bg-type .point-remain-item .tooltip-info-wrap.type-p {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: 0;
    white-space: nowrap;
    color: var(--primary-active);
    font-weight: 700;
  }

  .mypage-wrap .list-info-wrap.star.bg-type .point-remain-body {
    display: block;
    width: 100%;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .mypage-wrap .list-info-wrap.star.bg-type .point-remain-body > span {
    color: var(--wh40);
  }

  /* 탈퇴 사유: 3열 → 1열 (겹침 방지) */
  .mypage-wrap .radio-list-wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 14px;
  }

  .mypage-wrap .radio-list-wrap li {
    width: 100%;
    max-width: 100%;
  }

  .mypage-wrap .radio-list-wrap li:nth-child(n + 4) {
    margin-top: 0;
  }

  .mypage-wrap .radio-list-wrap li label {
    white-space: normal !important;
    text-wrap: wrap;
    word-break: keep-all;
    overflow-wrap: break-word;
    height: auto !important;
    align-items: flex-start;
  }
}

/* ========== from service.css ========== */

@media (min-width: 769px) and (max-width: 1280px) {
  .pick2-hero-media {
    left: 46%;
    right: -32px;
  }

  .pick2-hero-media .pick2-hero-video {
    transform: translateX(32px);
  }

  .pick2-hero .text-wrap {
    max-width: 46vw;
  }
}

@media (max-width: 1024px) {
  .service-wrap.middle .item-box.pick2-hero.bg-item-main {
    display: flex;
    flex-direction: column;
    min-height: auto;
    background-image: none;
    background-color: #090812;
  }

  .pick2-hero .service-main-wrap {
    order: 1;
    min-height: auto;
    padding-top: 72px !important;
    padding-bottom: 16px;
  }

  .pick2-hero-media {
    order: 2;
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    display: flex;
    justify-content: center;
    margin-top: 8px;
    margin-bottom: 0;
  }

  .pick2-hero-media .pick2-hero-video {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center bottom;
    transform: none;
  }
}

@media screen and (max-width: 991px) {
  .service-top-banner {
    min-width: 100%;
    padding: 0 2.75rem 0 1rem;
  }

  .service-top-banner__close {
    right: 0.5rem;
  }
}

@media (max-width: 1024px) {
  .pick-guide-head {
    margin-bottom: 40px;
  }

  .pick-guide-title-row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .pick-guide-play,
  .pick-service-detail .service-wrap .pc-wrap button.pick-guide-play,
  .pick-service-detail .service-wrap .pc-wrap button.pick-guide-play.active {
    padding: 8px 14px;
  }

  .pick-guide-play .pick-guide-label,
  .pick-service-detail .service-wrap .pc-wrap button.pick-guide-play .pick-guide-label {
    font-size: 13px;
  }

  .pick-guide-video {
    --pick-guide-video-w: 100%;
  }

  .pick-guide-video-inner {
    max-width: 100%;
  }

  /* 유튜브는 .youtube-modal — 인라인/호버 펼침 없음 */
  .pick-guide-head:hover .pick-guide-video,
  .pick-guide-head:hover .pick-guide-video[hidden],
  .pick-guide-head.is-open .pick-guide-video,
  .pick-guide-head.is-open .pick-guide-video[hidden] {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    display: none;
  }

  .pick-guide-head:hover::after,
  .pick-guide-head.is-open::after,
  .pick-guide-head.is-open:hover::after {
    content: none;
    display: none;
  }

  .pick-service-detail .service-wrap .pc-wrap .pc-slider {
    padding-top: 0;
  }

  .pick-service-detail .service-wrap .pc-wrap .img-wrap {
    margin-top: 0;
  }
}

@media screen and (max-width: 991px) {
  .bubble-section-bg-img {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    min-width: 100%;
    max-width: none;
    height: 100%;
    transform: none;
    object-fit: cover;
    /* 모바일: 좌측 영역이 더 보이도록 (PC center 유지) */
    object-position: left center;
  }

  .card-section {
    min-height: auto;
  }

  .card-section-container {
    min-height: auto;
  }

  .card-section-content {
    display: block;
  }

  .card-section-row,
  .card-section-row.cols-3,
  .card-section-row.cols-4 {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .card-section .card {
    min-height: 70vh;
  }

  /* 모고Pick type2 — 카드 이미지 속 텍스트/그래픽 잘림 방지 */
  .card-section.type2 .card {
    min-height: 0;
    height: auto;
    justify-content: flex-start;
    overflow: hidden;
    background: #fff;
  }

  .card-section.type2 .card-content {
    flex: none;
    padding: 24px 20px 16px;
  }

  .card-section.type2 .card-image {
    position: relative;
    inset: auto;
    width: 100%;
    flex: none;
    background: #fff;
  }

  .card-section.type2 .card-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
  }
}

@media screen and (max-width: 1024px) {
  .card-section .card {
    min-height: 60vh;
  }

  /* 모고Pick type2 — 태블릿 포함 이미지 잘림 방지 */
  .card-section.type2 .card-section-row,
  .card-section.type2 .card-section-row.cols-3,
  .card-section.type2 .card-section-row.cols-4 {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .card-section.type2 .card {
    min-height: 0;
    height: auto;
    justify-content: flex-start;
    overflow: hidden;
    background: #fff;
  }

  .card-section.type2 .card-content {
    flex: none;
    padding: 28px 24px 16px;
  }

  .card-section.type2 .card-image {
    position: relative;
    inset: auto;
    width: 100%;
    flex: none;
    background: #fff;
  }

  .card-section.type2 .card-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
  }

  .reveal-text-wrap {
    min-height: 80vh;
  }

  .reveal-text-wrap.is-stack {
    gap: 20px;
    padding: 0 20px;
  }

  .reveal-text-wrap.is-stack .reveal-text {
    white-space: normal;
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }

  .reveal-text-wrap.is-stack .reveal-text-sub {
    font-size: clamp(0.95rem, 3.8vw, 1.15rem);
  }

  .reveal-text-wrap.is-stack .liquid-btn {
    min-width: 150px;
    height: 48px;
    padding: 0 28px;
    font-size: 14px;
  }
}

@media screen and (max-width: 1024px) {
  /* bottom-dock 있는 페이지: 히어로 service-btn 숨김 (독이 CTA 역할) */
  .qupid-wrap:has(.bottom-dock) .service-btn {
    display: none !important;
  }

  .bottom-dock {
    bottom: 16px;
    z-index: 1100;
  }

  .bottom-dock-bar {
    max-width: 100%;
    gap: 2px;
    padding: 6px 8px;
  }

  .bottom-dock-pill {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
  }

  .bottom-dock-item:not(.is-active) .bottom-dock-pill {
    height: 48px;
    padding: 4px 10px;
  }

  .bottom-dock-item.is-active .bottom-dock-pill {
    padding: 0 12px 0 14px;
  }

  @media (hover: hover) and (pointer: fine) {
    .bottom-dock-item:not(.is-active):hover .bottom-dock-pill,
    .bottom-dock-item:not(.is-active):focus-visible .bottom-dock-pill {
      height: 44px;
      padding: 0 14px 0 12px;
    }

    .bottom-dock-item:not(.is-active):hover .bottom-dock-label,
    .bottom-dock-item:not(.is-active):focus-visible .bottom-dock-label {
      max-width: 160px;
    }
  }

  .bottom-dock-caption {
    font-size: 9px;
  }

  .bottom-dock-label {
    font-size: 12px;
  }

  .bottom-dock-item.is-active .bottom-dock-label {
    max-width: 160px;
  }
}

/* ========== from main-v2.css ========== */

@media (max-width: 1024px) {
  /* 태블릿: 아이패드 미니(744px) ~ 1024px — PC형 배너 안 오버레이 */
  /* 히어로가 짧을 때 space-between 때문에 푸터까지 큰 공백 생김 → 상단 정렬 */
  .qupid-wrap.main {
    justify-content: flex-start;
  }

  .main-contents-wrap:has(.main-hero-wrap) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
  }

  .main-hero-wrap {
    min-height: auto;
    padding: 40px 0 16px;
  }

  .qupid-wrap.main .contents-wrap:has(.main-hero-wrap) {
    padding-bottom: 0;
    width: 100%;
    min-width: 0;
  }

  /* .section 고정 1200px 해제 */
  .main-hero-wrap .main-hero-brand.section {
    width: 100%;
    max-width: 100%;
    padding: 24px 24px 0;
    box-sizing: border-box;
  }

  .main-hero-wrap .main-hero-brand .loadingHeader {
    font-size: clamp(56px, 12vw, 96px);
  }

  .main-hero-wrap .main-hero-brand .loadingSub {
    font-size: clamp(14px, 2.2vw, 18px);
    padding: 0 12px;
    margin-top: 20px;
    margin-bottom: 28px;
  }

  .main-hero-wrap .main-hero-banner {
    margin-top: 12px;
  }

  .main-hero-wrap .main-hero-banner .main-swiper {
    --hero-slide-w: min(72vw, calc(48vh * 16 / 9));
    --hero-slide-h: calc(var(--hero-slide-w) * 0.5625);
    --hero-pad-top: 40px;
    padding: var(--hero-pad-top) 0 24px;
    overflow: visible;
    min-height: var(--hero-slide-h);
  }

  .main-hero-wrap .main-hero-banner .main-swiper .swiper-slide {
    width: var(--hero-slide-w);
    height: var(--hero-slide-h);
    border-radius: 18px;
    overflow: hidden;
  }

  /* 태블릿: PC와 동일 — 배너 안 좌측 정렬 오버레이 (이미지 위) */
  .main-hero-wrap .main-hero-banner .main-swiper .content-box-wrap {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 36px 40px;
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .content-box-wrap .text-title {
    max-width: 55%;
    font-size: clamp(24px, 2.8vw, 30px);
    text-align: left;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .content-box-wrap .text-info {
    max-width: 52%;
    font-size: clamp(14px, 1.6vw, 16px);
    text-align: left;
    color: rgba(255, 255, 255, 0.9);
  }

  .main-hero-wrap .main-hero-banner .main-swiper .content-box-wrap .service-btn {
    margin-top: 4px;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .content-box-wrap .service-btn .btn,
  .main-hero-wrap .main-hero-banner .main-swiper .swiper-slide-active .content-box-wrap .service-btn .btn {
    height: 40px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .content-box-consulting {
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: row;
    gap: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .content-box-consulting .content-box-wrap {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 1;
    width: auto;
    height: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .swiper-pagination {
    top: calc(var(--hero-pad-top) + var(--hero-slide-h) - 22px) !important;
    bottom: auto !important;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .slide-aiu-action {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .slide-aiu-action .select-wrap {
    width: min(160px, 42vw);
  }

  .main-hero-wrap .main-hero-banner .main-swiper .swiper-button-prev {
    left: 4%;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .swiper-button-next {
    right: 4%;
  }
}

@media screen and (max-width: 743px) {
  .main-contents-wrap:has(.main-hero-wrap) {
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .qupid-wrap.main .contents-wrap:has(.main-hero-wrap) {
    padding-bottom: 24px;
    overflow: visible;
  }

  .main-hero-wrap {
    padding: 16px 0 24px;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .main-hero-wrap .main-hero-brand.section {
    padding: 12px 16px 0;
  }

  .main-hero-wrap .main-hero-brand .loadingHeader {
    font-size: clamp(44px, 14vw, 64px);
  }

  .main-hero-wrap .main-hero-brand .loadingSub {
    font-size: 13px;
    line-height: 1.45;
  }

  .main-hero-wrap .main-hero-brand .hero-beam {
    width: 56px;
    filter: blur(28px);
  }

  /* 폭 유지 + 중앙 확대분 여유 / 양옆은 화면 밖으로 잘림 OK */
  .main-hero-wrap .main-hero-banner {
    overflow: visible;
  }

  .main-hero-wrap .main-hero-banner .main-swiper {
    --hero-slide-w: 80vw;
    --hero-slide-h: calc(80vw * 0.5625);
    --hero-active-scale: 1.1;
    --hero-pad-top: 12px;
    --hero-content-gap: 200px;
    padding: var(--hero-pad-top) 0 var(--hero-content-gap);
    overflow: visible;
    min-height: calc(var(--hero-slide-h) * var(--hero-active-scale) + var(--hero-content-gap));
  }

  /* 컨설팅(2단) 활성 시에만 하단 여유 확대 — 전문가 컨설팅 잘림 방지 */
  .main-hero-wrap .main-hero-banner .main-swiper:has(.swiper-slide-active > .content-box-consulting) {
    --hero-content-gap: 420px;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .swiper-wrapper {
    overflow: visible;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .swiper-slide {
    width: var(--hero-slide-w);
    height: var(--hero-slide-h);
    border-radius: 14px;
    overflow: visible;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .swiper-slide[data-hero-hide="1"] {
    opacity: 0 !important;
    visibility: hidden;
  }

  /* 인디케이터: 확대된 중앙 배너 하단에 겹침 */
  .main-hero-wrap .main-hero-banner .main-swiper .swiper-pagination {
    position: absolute !important;
    top: calc(
      var(--hero-pad-top) + var(--hero-slide-h) * (1 + var(--hero-active-scale)) / 2 - 20px
    ) !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    transform: none !important;
    z-index: 20;
  }

  /* <> : 양옆 peek 배너 위 (배너 세로 중앙) */
  .main-hero-wrap .main-hero-banner .main-swiper .swiper-button-prev,
  .main-hero-wrap .main-hero-banner .main-swiper .swiper-button-next {
    top: calc(var(--hero-slide-h) * var(--hero-active-scale) / 2) !important;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    margin-top: 0 !important;
    z-index: 12;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .swiper-button-prev {
    left: 1%;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .swiper-button-next {
    right: 1%;
  }

  /* 텍스트/CTA: 배너 아래 · 가운데 (모바일만) */
  .main-hero-wrap .main-hero-banner .main-swiper .content-box-wrap {
    position: absolute;
    inset: auto;
    top: calc((1 + var(--hero-active-scale)) / 2 * 100% + 14px);
    left: 50%;
    right: auto;
    bottom: auto;
    z-index: 2;
    width: min(92vw, 360px);
    height: auto;
    transform: translateX(-50%);
    padding: 0;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .swiper-slide-active > .content-box-wrap {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .content-box-wrap .text-title {
    font-size: 18px;
    max-width: 100%;
    text-align: center;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .content-box-wrap .text-info {
    max-width: 100%;
    width: 100%;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
  }

  .main-hero-wrap .main-hero-banner .main-swiper .content-box-consulting {
    position: absolute;
    inset: auto;
    top: calc((1 + var(--hero-active-scale)) / 2 * 100% + 14px);
    left: 50%;
    right: auto;
    bottom: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(92vw, 360px);
    transform: translateX(-50%);
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .swiper-slide-active > .content-box-consulting {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* 컨설팅 내부 2박스: 세로 스택 (태블릿 absolute 오버레이 잔여 제거) */
  .main-hero-wrap .main-hero-banner .main-swiper .content-box-consulting .content-box-wrap {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 0;
    gap: 8px;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .content-box-consulting .content-box-wrap .text-title,
  .main-hero-wrap .main-hero-banner .main-swiper .content-box-consulting .content-box-wrap .text-info {
    max-width: 100%;
    width: 100%;
    text-align: center;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .content-box-consulting .content-box-wrap .service-btn {
    margin-top: 4px;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .slide-aiu-action {
    justify-content: center;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .content-box-wrap .service-btn .btn,
  .main-hero-wrap .main-hero-banner .main-swiper .swiper-slide-active .content-box-wrap .service-btn .btn,
  .main-hero-wrap .main-hero-banner .main-swiper .slide-aiu-action .btn {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }

  .main-hero-wrap .main-hero-banner .main-swiper .slide-aiu-action .select-wrap {
    width: min(140px, 46vw);
  }

  .main-hero-wrap .main-hero-banner .main-swiper .slide-aiu-action .select-wrap select {
    height: 36px !important;
    padding: 0 28px 0 14px !important;
    font-size: 13px !important;
  }

  /* 메인 팝업: 모바일 미노출 */
  .popup-container {
    display: none !important;
  }
}

/* ========== terms (개인정보처리방침 / 이용약관) ========== */

@media screen and (max-width: 1024px) {
  .qupid-wrap .contents-wrap:has(> .terms-wrap) {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 24px 24px 56px;
    box-sizing: border-box;
    justify-content: flex-start;
  }

  .qupid-wrap .terms-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
  }

  .terms-wrap .title-wrap {
    gap: 8px;
    font-size: 22px;
    line-height: 1.3;
    padding-bottom: 16px;
    word-break: keep-all;
  }

  .terms-wrap .title-wrap button.btn-back {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .terms-wrap .text-title {
    margin-top: 48px;
    margin-left: 26px;
    font-size: 20px;
    line-height: 1.4;
    word-break: keep-all;
  }

  .terms-wrap .text-title .text-number {
    left: -26px;
  }

  .terms-wrap .text-title1 {
    font-size: 16px;
    line-height: 1.45;
    margin-top: 24px;
    margin-bottom: 8px;
    word-break: keep-all;
  }

  .terms-wrap .text-con,
  .terms-wrap .terms-list-wrap li {
    font-size: 15px;
    line-height: 1.55;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .terms-wrap .terms-list-wrap li {
    margin-left: 18px;
  }

  .terms-wrap .terms-list-wrap li .text-number {
    left: -18px;
  }

  .terms-wrap .terms-table caption {
    display: table-caption;
    caption-side: top;
    width: auto;
    max-width: none;
    margin-top: 36px;
    margin-bottom: 14px;
    font-size: 17px;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap; /* 모바일에서 단어마다 줄바꿈 방지 */
    word-break: keep-all;
    overflow-wrap: normal;
  }

  /* 표만 가로 스와이프 (페이지 전체는 고정) */
  .terms-wrap {
    overflow-x: visible;
  }

  .terms-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-bottom: 16px;
  }

  .terms-table-scroll .terms-table,
  .terms-wrap .terms-table {
    display: table;
    table-layout: fixed;
    width: 720px;
    min-width: 100%;
    max-width: none;
    border-collapse: collapse;
    border-spacing: 0;
    border-left: 0;
  }

  .terms-wrap .terms-table thead {
    display: table-header-group;
  }

  .terms-wrap .terms-table tbody {
    display: table-row-group;
  }

  .terms-wrap .terms-table th,
  .terms-wrap .terms-table td {
    font-size: 13px;
    line-height: 1.45;
    padding: 8px;
    word-break: keep-all;
    vertical-align: middle;
    box-sizing: border-box;
  }

  .terms-select-wrap {
    margin-top: 32px;
    padding-top: 16px;
  }

  .terms-select-wrap form {
    gap: 12px;
    align-items: center;
  }

  .terms-select-wrap .text-label {
    margin-right: 0;
    margin-top: 0;
    font-size: 14px;
  }

  :root .ui-selectmenu-button {
    margin-top: 0;
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .qupid-wrap .contents-wrap:has(> .terms-wrap) {
    padding: 16px 16px calc(40px + env(safe-area-inset-bottom, 0px));
  }

  .terms-wrap .title-wrap {
    font-size: 18px;
    padding-bottom: 12px;
  }

  .terms-wrap .title-wrap button.btn-back {
    width: 32px;
    height: 32px;
  }

  .terms-wrap .text-title,
  .terms-wrap .text-con,
  .terms-wrap .terms-list-wrap,
  .terms-wrap .terms-table {
    margin-bottom: 16px;
  }

  .terms-wrap .text-title {
    margin-top: 36px;
    margin-left: 22px;
    font-size: 17px;
    line-height: 1.4;
  }

  .terms-wrap .text-title .text-number {
    left: -22px;
  }

  .terms-wrap .text-title1 {
    font-size: 15px;
    margin-top: 20px;
  }

  .terms-wrap .text-con,
  .terms-wrap .terms-list-wrap li {
    font-size: 14px;
    line-height: 1.55;
  }

  .terms-wrap .terms-list-wrap.dotted li {
    font-size: 13px;
    line-height: 1.45;
  }

  .terms-wrap .terms-table caption {
    margin-top: 28px;
    font-size: 15px;
    white-space: nowrap;
  }

  .terms-table-scroll .terms-table,
  .terms-wrap .terms-table {
    width: 640px;
    min-width: 100%;
  }

  .terms-wrap .terms-table th,
  .terms-wrap .terms-table td {
    font-size: 12px;
    padding: 6px;
  }

  .terms-select-wrap form {
    flex-direction: column;
    align-items: stretch;
  }

  .terms-select-wrap .text-label {
    margin-top: 0;
  }

  :root .ui-selectmenu-button {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ========== from susipro.css ========== */

@media (max-width: 767px) {
  .sp-input,
  .sp-textarea,
  .sp-score select,
  .sp-score input[type="number"] {
    font-size: 16px;
  }

  .sp-score select,
  .sp-score input[type="number"] {
    font-size: 13px;
  }

  .sp-check {
    font-size: 16px;
    line-height: 24px;
    min-height: 88px;
    padding: 16px;
  }

  .sp-shell {
    width: 100%;
  }
}