@charset "UTF-8";
/* =========================================================
   메인 UI 다듬기 (2026-09)
   - 기존 색상/폰트/레이아웃은 유지하고 질감·터치 피드백만 보완
   - body.page_main 범위로 한정 (다른 페이지 영향 없음)
   ========================================================= */

body.page_main { -webkit-tap-highlight-color: transparent; }

/* ---------- 하단 메뉴 (홈/후기/심리검사/마이/결제) : 반투명 유리 효과 (전체 페이지) ----------
   운영 default.css 는 #fff 불투명이라, 의도한 반투명 디자인을 여기서 확실히 적용 */
footer.foot_menu {
    background-color: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
footer.foot_menu > ul { background-color: transparent; }
/* blur 미지원 브라우저에서는 글자가 비치지 않도록 조금 더 불투명하게 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    footer.foot_menu { background-color: rgba(255, 255, 255, 0.92); }
}

/* ---------- 좌우 여백 통일 ----------
   기존: 상단문구 15 / 검사카드 20 / 배너 20 / 탭 15 / 정렬버튼 10 / 상담사카드 8 (px, 375 기준) 로 제각각
   → 한 가지 여백으로 맞춤 (모바일 15px, 그 이상 20px) */
.page_main { --rg-gutter: 20px; }
@media (max-width: 480px) { .page_main { --rg-gutter: 15px; } }

.page_main .main_top_wrap,
.page_main .main_top_cont,
.page_main .main_banner,
.page_main .list_tab_w,
.page_main .list_controller,
.page_main #cont_list1 > li {
    padding-left: var(--rg-gutter);
    padding-right: var(--rg-gutter);
}
.page_main #cont_list1 > li { padding-top: 6px; padding-bottom: 6px; }

/* 배너 페이지 표시(1/3): 오른쪽·아래 여백 동일하게 */
.page_main .main_banner .custom-pagination {
    right: calc(var(--rg-gutter) + 12px);
    bottom: 12px;
}

/* ---------- 검사 카드 ---------- */
.page_main .main_top_cont.mainTopSwiper { padding-bottom: 6px; }

/* 설명 줄 수에 따라 '5분 무료' 뱃지·제목 위치가 카드마다 달라지던 문제:
   기존엔 내용 전체가 아래 정렬(flex-end) → 위쪽 정렬 + 버튼/아이콘만 아래에 고정 */
.page_main .main_top_cont .swiper-slide > a.a {
    --rg-card-pad: 16px;
    align-items: stretch;
    padding: var(--rg-card-pad);
}
.page_main .main_top_cont .swiper-slide > a.a > div {
    display: flex; flex-direction: column; align-items: flex-start;
    flex: 1 1 auto; min-width: 0;
}
.page_main .main_top_cont .swiper-slide > a.a > div > strong { display: block; }
/* 뱃지가 없는 카드는 제목이 맨 위로 오므로 1/2 표시와 겹치지 않게 */
.page_main .main_top_cont .swiper-slide > a.a > div > strong:first-child { padding-right: 48px; }
/* 버튼 줄 위 여백을 아이콘 높이(50px)만큼 확보 → 설명 글이 아이콘과 겹치지 않음 */
.page_main .main_top_cont .swiper-slide > a.a .item_subtitle2 { margin-top: auto; padding-top: 20px; }
/* 아이콘은 오른쪽 아래 고정 (글 영역 폭을 줄이지 않도록 흐름에서 뺌 → 제목 줄바꿈 방지) */
.page_main .main_top_cont .swiper-slide > a.a > img {
    position: absolute; right: var(--rg-card-pad); bottom: var(--rg-card-pad);
    margin: 0;
}
@media (min-width: 481px) {
    .page_main .main_top_cont .swiper-slide > a.a { --rg-card-pad: 20px; }
}
.page_main .main_top_cont .swiper-slide > a.a {
    border-color: rgba(0, 0, 0, .04);
    box-shadow: 0 6px 18px rgba(233, 111, 81, .08), 0 1px 3px rgba(0, 0, 0, .04);
    transition: transform .18s ease, box-shadow .18s ease;
}
.page_main .main_top_cont .swiper-slide > a.a:active {
    transform: scale(.98);
    box-shadow: 0 3px 10px rgba(233, 111, 81, .08);
}
.page_main .main_top_cont .swiper-slide > a.a img {
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
}
/* 1/2 표시: 뱃지(높이 27px)와 세로 중앙, 카드 안쪽 여백과 같은 오른쪽 여백 */
.page_main .main_top_order {
    top: calc(var(--rg-card-pad) + 2.5px); right: var(--rg-card-pad);
    height: 22px; min-width: 38px; padding: 0 8px;
    border-radius: 999px; background: rgba(255, 255, 255, .55);
    font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #6E625A;
    font-variant-numeric: tabular-nums;
}
/* '바로 시작하기 →' 를 눌러볼 수 있는 버튼처럼 */
.page_main .item_subtitle2 em {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 6px 12px 5px; border-radius: 999px;
    background: rgba(255, 255, 255, .7); color: #3A302B;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.page_main .main_top_cont .swiper-slide > a.a:active .item_subtitle2 em { background: #fff; }

/* ---------- 롤링 배너 ---------- */
.page_main .main_banner .swiper-slide img { border-radius: 16px; }
.page_main .main_banner .custom-pagination {
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    font-variant-numeric: tabular-nums;
}

/* ---------- TOP10 / 상담중 / 후기 / 전체 탭 ---------- */
.page_main .list_tab_w {
    position: sticky; top: 0; z-index: 20;
    padding-top: 10px; padding-bottom: 10px;
    background: #fff;
    transition: box-shadow .2s ease;
}
.page_main .list_tab_w.is-stuck { box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .15); }
.page_main .list_tab_w ul.list_tab {
    border-color: #EDE4DA;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    transition: padding .2s ease;
}
.page_main .list_tab_w.is-stuck ul.list_tab { padding-top: 8px; padding-bottom: 8px; }
.page_main ul.list_tab li span {
    transition: background-color .18s ease, color .18s ease, transform .12s ease;
    user-select: none; -webkit-user-select: none;
}
.page_main ul.list_tab li span:active { transform: scale(.96); }

/* ---------- 상담사 카드 ---------- */
.page_main #cont_list1 > li .item_box_w {
    transition: box-shadow .18s ease;
}
.page_main #cont_list1 > li .item_img img { transition: transform .3s ease; }
.page_main #cont_list1 > li .item_img a:active img { transform: scale(.97); }
.page_main #cont_list1 .tel_btn_wrap .btn_list {
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.page_main #cont_list1 .tel_btn_wrap .btn_list:active { transform: scale(.98); }

/* ---------- 후기 더보기 ---------- */
.page_main #main_review_more {
    transition: background-color .15s ease, transform .12s ease;
}
.page_main #main_review_more:active { transform: scale(.98); }

/* 탭 전환 중 목록이 비는 순간 페이지가 짧아져 맨 위로 튀는 현상 방지 (전환 중에만 적용, index.php 스크립트) */
.page_main #content_main.is-switching { min-height: calc(100vh + 700px); }

@media (prefers-reduced-motion: reduce) {
    .page_main * { transition: none !important; }
}