@charset "UTF-8";
/**
 * insu_link_app — 보험 링크 허브 5서비스 단일 번들 (부동산 realestate_app.css 와 동일 정책: 한 파일·명확 토큰)
 *
 * [대시보드 5] 고객센터 / 청구서류 / 보험사약관 / 손보방문센터 / 자동차 무이자
 * body 클래스: unified-search-page, insu-dashboard-page, insu-link-app + (callcenter-page | money-paper-page | terms-page | visit-centers-page | car-card-page)
 *
 * 아래는 구형 insu_*.css 병합 본 *앞*에 붙이는 전역 슬롯(타이포·정렬)이다.
 * !important 는 @media 내만(프로젝트 규칙) — 본 섹션에는 사용하지 않는다.
 */

/* --- 본문 main 이하만 * 리셋 — pageFooter.php(공용 푸터)는 main 밖이라 margin/padding 유지 */
body.insu-link-app main,
body.insu-link-app main * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/*
 * 우측 결과 컬럼: 고객센터·청구·방문·무이자 동일(웜 body 위 투명 영역) — @media 패딩은 insu_link_app_epilogue
 */
body.insu-link-app.insu-dashboard-page .search-results-area {
	background: transparent;
	padding: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	position: relative;
	border: none;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
}

/* --- Sans 고정(명조/serif 누수 차단) — 청구서류(money_paper)와 동일 스택 */
body.insu-link-app {
	--ins-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
	font-family: var(--ins-font);
}

/* 고객센터(insu_callcenter) 기준 디자인 토큰 — 5탭·사이드바·번들 epilogue와 공유 */
body.insu-link-app.insu-dashboard-page {
	--ins-sens-ink: #252a2e;
	--ins-sens-muted: #5c6360;
	--ins-sens-line: rgba(45, 55, 65, 0.12);
	--ins-sens-accent: #3d5f6a;
	--ins-sens-accent-dark: #2f4d56;
	--ins-sens-paper: #fffcfa;
	--ins-dash-grad: linear-gradient(135deg, #3d5f6a 0%, #2f4d56 100%);
	/* callcenter_modern :root 와 동기화 (다른 페이지에서도 동일 변수명으로 덮어쓰기 가능) */
	--sens-ink: #252a2e;
	--sens-line: rgba(45, 55, 65, 0.12);
	--sens-accent: #3d5f6a;
	--sens-accent-dark: #2f4d56;
}

/*
 * 레거시(callcenter / money / terms / visit) 각각에 동일한 body.unified-search-page 블록이 있어
 * 번들에서 4~5회 겹침 → 5서비스 공통은 여기만 (배경·글자색은 insu_link_hub_sens·페이지별)
 */
body.insu-link-app.unified-search-page {
	font-family: var(--ins-font);
	line-height: 1.6;
	overflow-x: hidden;
	font-weight: 400;
}

body.insu-link-app .main-content,
body.insu-link-app .search-sidebar,
body.insu-link-app .search-results-area,
body.insu-link-app .insurance-card,
body.insu-link-app .center-card,
body.insu-link-app .form-control,
body.insu-link-app .form-label,
body.insu-link-app .header-text,
body.insu-link-app h1,
body.insu-link-app h2,
body.insu-link-app h3,
body.insu-link-app h4,
body.insu-link-app h5,
body.insu-link-app h6,
body.insu-link-app p,
body.insu-link-app .company-name,
body.insu-link-app .insurance-name,
body.insu-link-app .center-name,
body.insu-link-app button,
body.insu-link-app input,
body.insu-link-app select,
body.insu-link-app textarea {
	font-family: var(--ins-font);
}

/* --- 사이드바·세로필터(.filter-buttons): 툴줄(.insu-link-results-toolbar .results-filter-btn)과 클래스 공유하므로 여기서만 셸 적용 */
body.insu-link-app .filter-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-wrap: wrap;
}
body.insu-link-app .filter-buttons .filter-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	color: var(--text-secondary, #64748b);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
	width: 100%;
	text-align: left;
}
body.insu-link-app .filter-buttons .filter-btn:hover {
	border-color: var(--primary-color, #3b82f6);
	color: var(--primary-color, #3b82f6);
	background: rgba(59, 130, 246, 0.05);
	transform: translateY(-1px);
}
body.insu-link-app .filter-buttons .filter-btn.active {
	background: var(--document-gradient, linear-gradient(135deg, #3b82f6 0%, #1e40af 100%));
	color: #fff;
	border-color: var(--primary-color, #3b82f6);
	box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
}
body.insu-link-app .filter-buttons .filter-btn i {
	font-size: 0.85rem;
}

/* --- 사이드바 검색 폼 라벨 (money/terms/callcenter/visit 등 무접두 .form-label·.form-group label 중복 제거) */
body.insu-link-app .form-label,
body.insu-link-app .form-group label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-primary, #1e293b);
	margin-bottom: 8px;
}
body.insu-link-app .form-label i,
body.insu-link-app .form-group label i {
	color: var(--primary-color, #3b82f6);
	font-size: 0.9rem;
}

/* --- 기본 .form-control (레거시 5파일 무접두 통합; 페이지별는 body.insu-link-app.<page> 가 덮음) */
body.insu-link-app .form-control {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	transition: all 0.3s ease;
}
body.insu-link-app .form-control:focus {
	outline: none;
	border-color: var(--primary-color, #3b82f6);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
body.insu-link-app .form-control:disabled {
	background: #f1f5f9;
	cursor: not-allowed;
}

/* --- 청구·약관 1행 카드: 로고+명 | 링크 — 세로 가운데 */
body.insu-link-app.insu-dashboard-page .insurance-card .card-row,
body.insu-link-app .insurance-card .card-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 14px;
	align-items: center;
	min-height: 4.25rem;
}

body.insu-link-app .insurance-card .card-company {
	display: flex;
	align-items: center;
	align-self: stretch;
	margin: 0;
	padding: 0;
	min-width: 0;
	min-height: 0;
}

/*
 * 카드 1행 .card-company .company-info — 한 블록 (구 money/terms 보조 선택자·hub_sens 대시보드 중복 제거)
 */
body.insu-link-app .insurance-card .card-company .company-info {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	align-self: stretch;
	gap: 12px;
	width: 100%;
	min-width: 0;
	min-height: 3rem;
	margin: 0;
	flex: 1;
	background: #fff;
}

body.insu-link-app .insurance-card .card-link {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	align-self: stretch;
}

body.insu-link-app .insurance-card .card-link .download-btn {
	align-self: center;
}

/* --- 고객센터 카드 헤더: company-info | 유형뱃지 세로 가운덨 (구 무접두 .card-header·callcenter_modern 병합) */
body.insu-link-app.callcenter-page .insurance-card .card-header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e5e7eb;
}

body.insu-link-app.callcenter-page .insurance-card .card-header .company-info {
	display: flex;
	align-items: center;
	min-height: 3.5rem;
}

body.insu-link-app.callcenter-page .insurance-card .card-header .company-type {
	align-self: center;
	flex-shrink: 0;
}

/* --- 보험 카드 보험사명: 푸터·타 서비스 무접두 .company-name 과 분리 */
body.insu-link-app .insurance-card .card-company .company-name,
body.insu-link-app .insurance-card .card-header .company-name,
body.insu-link-app .insurance-card .card-header .company-name2 {
	font-family: var(--ins-font);
	font-weight: 700;
	color: var(--text-primary, #1e293b);
	margin: 0;
	letter-spacing: -0.01em;
	-webkit-text-fill-color: currentColor;
}

/* 청구서류/약관 카드 (레거시 money·terms 동일 블록 통합) */
body.insu-link-app.money-paper-page .insurance-card .company-name,
body.insu-link-app main.money-paper-main .insurance-card .company-name,
body.insu-link-app.terms-page .insurance-card .company-name,
body.insu-link-app main.terms-main .insurance-card .company-name {
	font-size: 1.1875rem;
	color: #111827;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: #fff;
}

/* 고객센터 카드 헤더 제목 (구 무접두 .company-name, .company-name2) */
body.insu-link-app.callcenter-page .insurance-card .card-header .company-name,
body.insu-link-app.callcenter-page .insurance-card .card-header .company-name2 {
	font-size: 18px;
}

@media (max-width: 480px) {
	body.insu-link-app .insurance-card .card-company .company-info {
		gap: 8px;
	}
}


/* 보험 서비스 대시보드 - 5개 페이지 공통 */

/* 좌측 상담 <- 버튼 심플 CSS (회색톤, 흰배경, 테두리) */
.insu-dashboard-page .back-btn {
    background: #fff;
    border: 1px solid #4c4c4c;
    border-radius: 8px;
    color: #4c4c4c;
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.insu-dashboard-page .back-btn:hover {
    background: #f5f5f5;
    border-color: #333;
    color: #333;
}

/* 좌측 input/select 박스 - 테두리 */
.insu-dashboard-page .search-sidebar .form-control,
.insu-dashboard-page .search-sidebar input[type="text"],
.insu-dashboard-page .search-sidebar select,
.insu-dashboard-page .search-sidebar input.form-control {
    border: 2px solid #4c4c4c !important;
}

/* 대시보드 버튼 영역 - 좌측 사이드바 내 */
.insu-services-dashboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

/* .insu-dashboard-btn 기본/호버/active/i: insu_link_app_epilogue (body.insu-link-app.insu-dashboard-page) — insu_link 번들 전용 */

/* 모바일: 상단 카테고리 버튼 - 1줄 가로 배치
 * 좌우 패딩 없음(10px 0) — search-results-area가 15px 담당 → 5탭 텍스트 가로 최대 */
.insu-services-dashboard-mobile {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 10px 0;
    margin: 0 0 12px 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-bottom: 2px solid #e5e7eb;
}

.insu-services-dashboard-mobile::-webkit-scrollbar {
    height: 0;
    display: none;
}

.insu-services-dashboard-mobile .insu-dashboard-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    white-space: normal;
    padding: 8px 6px;
    font-size: 11px;
    gap: 4px;
}

/* 모바일 그리드(1024 이하)에서 2줄 라벨 — 아래 @media에서 최종 정리 */
.insu-services-dashboard-mobile .insu-dashboard-btn .insu-dashboard-label {
    display: block;
    overflow: visible;
    text-align: center;
    word-break: keep-all;
    line-height: 1.2;
    white-space: normal;
    max-width: 100%;
}

.insu-services-dashboard-mobile .insu-dashboard-btn i {
    font-size: 14px;
    flex-shrink: 0;
}

/* 모바일 공통: 5개 페이지 헤더 좌(뒤로가기) · 중앙(타이틀) · 우(FC홈) */
.insu-dashboard-page .insu-link-mobile-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.insu-dashboard-page .insu-link-mobile-header-inner > div[class*="header-title"] {
    flex: 1;
    min-width: 0;
}
.insu-dashboard-page .insu-link-mobile-back {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.insu-dashboard-page .insu-link-mobile-back:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}
.insu-dashboard-page .insu-link-mobile-fchome {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.insu-dashboard-page .insu-link-mobile-fchome:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}

@media (max-width: 1024px) {
    .insu-dashboard-page .main-content {
        margin-top: 25px !important;
    }
    .insu-services-dashboard:not(.insu-services-dashboard-mobile) {
        display: none !important;
    }
    /* 1줄 5개 버튼 - grid, 좌우 패딩 0(영역 15px만) */
    .insu-services-dashboard.insu-services-dashboard-mobile {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px;
        padding: 10px 0 !important;
        margin-top: 16px;
    }
    .insu-services-dashboard-mobile .insu-dashboard-btn {
        flex: none;
        min-width: 0;
        flex-direction: column;
        gap: 2px;
        padding: 4px 1px 6px;
        font-size: 12px;
        font-weight: 500;
        white-space: normal;
        min-height: 56px;
        justify-content: center;
    }
    .insu-services-dashboard-mobile .insu-dashboard-btn i {
        font-size: 14px;
        flex-shrink: 0;
    }
    .insu-services-dashboard-mobile .insu-dashboard-btn .insu-dashboard-label {
        display: block;
        font-size: 11px;
        line-height: 1.2;
        text-align: center;
        word-break: keep-all;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        max-width: 100%;
    }
}

/* 매우 좁은 화면 */
@media (max-width: 400px) {
    .insu-services-dashboard-mobile .insu-dashboard-btn {
        padding: 4px 0 4px;
        font-size: 11px;
        min-height: 54px;
    }
    .insu-services-dashboard-mobile .insu-dashboard-btn i {
        font-size: 13px;
    }
    .insu-services-dashboard-mobile .insu-dashboard-btn .insu-dashboard-label {
        font-size: 10px;
    }
    .insu-services-dashboard.insu-services-dashboard-mobile {
        margin-top: 0px;
    }
}


/**
 * insu_link 가이드 블록 공통 CSS (5개 페이지 공용)
 * 구조: 1줄 [아이콘 + 제목] → 다음줄 안내정보(들여쓰기)
 * 이 파일만 로드하면 되며, 각 페이지 CSS에서 .info-section/.info-card 중복 제거
 */
.insu-link-guide .info-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.insu-link-guide .info-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.insu-link-guide .info-card:hover {
    background: #f3f4f6;
}

.insu-link-guide .info-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.insu-link-guide .info-card-header .info-icon {
    flex-shrink: 0;
    margin-bottom: 0;
}

.insu-link-guide .info-card-header .info-icon i {
    font-size: 24px;
    color: #3b82f6;
}

.insu-link-guide .info-card-header h5 {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.insu-link-guide .info-content {
    padding-left: 8px;
}

.insu-link-guide .info-content p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 12px;
}

.insu-link-guide .info-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.insu-link-guide .info-content li {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 6px;
    padding-left: 16px;
    position: relative;
}

.insu-link-guide .info-content li::before {
    content: '•';
    color: #3b82f6;
    position: absolute;
    left: 0;
    font-weight: bold;
}

.insu-link-guide .info-content strong {
    color: #111827;
    font-weight: 600;
}


/**
 * 보험 링크 허브 5탭 공통 — 슬레이트 틸 + 웜 페이퍼 (고객센터 톤 정렬)
 * 반드시 insu_services_dashboard / 각 페이지 전용 CSS 다음에 로드.
 */
:root {
    --hub-sens-ink: #252a2e;
    --hub-sens-muted: #5c6360;
    --hub-sens-line: rgba(45, 55, 65, 0.12);
    --hub-sens-accent: #3d5f6a;
    --hub-sens-accent-dark: #2f4d56;
    --hub-sens-paper: #fffcfa;
    --hub-sens-grad: linear-gradient(135deg, #3d5f6a 0%, #2f4d56 100%);
    --hub-warm-page-bg: #f5f3ef;
    --hub-warm-page-gradient:
        radial-gradient(ellipse 80% 50% at 10% 0%, rgba(61, 95, 106, 0.07), transparent 55%),
        linear-gradient(180deg, #ebe4db 0%, #f5f3ef 40%, #faf8f5 100%);
}

/* ===== 페이지 배경(5서비스 공통) — 웜톤 단일 규칙(PC·모바일 동일). money/terms/visit/car 레거시 body #fff 제거됨 */
body.insu-link-app.insu-dashboard-page.unified-search-page {
    background: var(--hub-warm-page-gradient) !important;
    color: var(--hub-sens-ink);
}

/* ===== 사이드바 공통 ===== */
.money-paper-page .search-sidebar,
.terms-page .search-sidebar,
.visit-centers-page .search-sidebar,
.car-card-page .search-sidebar {
    background: var(--hub-sens-paper);
    border: 1px solid var(--hub-sens-line);
    box-shadow: 0 4px 20px rgba(30, 35, 40, 0.06);
}

.money-paper-page .search-sidebar-header,
.terms-page .search-sidebar-header,
.visit-centers-page .search-sidebar-header,
.car-card-page .search-sidebar-header {
    border-bottom-color: var(--hub-sens-line);
}

.money-paper-page .back-btn,
.terms-page .back-btn,
.visit-centers-page .back-btn,
.car-card-page .back-btn {
    background: var(--hub-sens-grad);
    border: none;
    color: #fff;
}

.money-paper-page .back-btn:hover,
.terms-page .back-btn:hover,
.visit-centers-page .back-btn:hover,
.car-card-page .back-btn:hover {
    background: var(--hub-sens-accent-dark);
    color: #fff;
}

.money-paper-page .back-btn i,
.terms-page .back-btn i,
.visit-centers-page .back-btn i,
.car-card-page .back-btn i {
    color: #fff;
}

/* ===== 5탭 · 필터(대시보드) ===== */
.money-paper-page .insu-services-dashboard,
.terms-page .insu-services-dashboard,
.visit-centers-page .insu-services-dashboard,
.car-card-page .insu-services-dashboard {
    border-bottom-color: var(--hub-sens-line);
}

/* 청/약/방문/카드 .insu-dashboard-btn 면/호버/activ: insu_link_app_epilogue (중복 제거) */

.money-paper-page .insu-services-dashboard-mobile,
.terms-page .insu-services-dashboard-mobile,
.visit-centers-page .insu-services-dashboard-mobile,
.car-card-page .insu-services-dashboard-mobile {
    /* 모바일 5탭: 페이지 웜배경과 맞춤 — insu_link_app_epilogue에서 transparent 통일 */
    background: transparent;
    border-bottom: none;
}

.money-paper-page .insu-link-mobile-back,
.money-paper-page .insu-link-mobile-fchome,
.terms-page .insu-link-mobile-back,
.terms-page .insu-link-mobile-fchome,
.visit-centers-page .insu-link-mobile-back,
.visit-centers-page .insu-link-mobile-fchome,
.car-card-page .insu-link-mobile-back,
.car-card-page .insu-link-mobile-fchome {
    background: var(--hub-sens-paper);
    border-color: var(--hub-sens-line);
    color: var(--hub-sens-ink);
}

/* 툴바 필터 active: insu_link_app_epilogue — 위 중복 제거 */
/* 툴바 뱃지(result-count): 외형은 insu_link_app_epilogue.css 한곳(고객센터·청구·약관·방문센터 공통) */

.money-paper-page .form-label i,
.money-paper-page .form-hint i,
.terms-page .form-label i,
.terms-page .form-hint i,
.visit-centers-page .form-label i,
.visit-centers-page .form-hint i,
.car-card-page .form-label i,
.car-card-page .form-hint i {
    color: var(--hub-sens-accent);
}

/* .form-control:focus: 각 페이지 body.insu-link-app.<page> + insu_link_app_prelude */

/* ===== 가이드 블록(사이드바) insu_link_guide #3b82f6 대체 ===== */
.money-paper-page .search-sidebar .insu-link-guide .info-card,
.terms-page .search-sidebar .insu-link-guide .info-card,
.visit-centers-page .search-sidebar .insu-link-guide .info-card,
.car-card-page .search-sidebar .insu-link-guide .info-card {
    background: rgba(255, 252, 250, 0.95);
    border-color: var(--hub-sens-line);
}

.money-paper-page .search-sidebar .insu-link-guide .info-card-header .info-icon i,
.terms-page .search-sidebar .insu-link-guide .info-card-header .info-icon i,
.visit-centers-page .search-sidebar .insu-link-guide .info-card-header .info-icon i,
.car-card-page .search-sidebar .insu-link-guide .info-card-header .info-icon i {
    color: var(--hub-sens-accent);
}

.money-paper-page .search-sidebar .insu-link-guide .info-content li::before,
.terms-page .search-sidebar .insu-link-guide .info-content li::before,
.visit-centers-page .search-sidebar .insu-link-guide .info-content li::before,
.car-card-page .search-sidebar .insu-link-guide .info-content li::before {
    color: var(--hub-sens-accent);
}

/* 카드 1행(.card-row·.card-company·.card-link·.company-info): insu_link_app_prelude — 무접두 body.insu-dashboard-page 중복 제거 */

/* 손해/생명 링크 버튼 — 감성 톤 통일(청구/약관) */
body.money-paper-page.insu-dashboard-page .insurance-card a.download-btn.damage-btn,
body.money-paper-page.insu-dashboard-page .insurance-card a.download-btn.life-btn,
body.terms-page.insu-dashboard-page .insurance-card a.download-btn.damage-btn,
body.terms-page.insu-dashboard-page .insurance-card a.download-btn.life-btn,
body.money-paper-page.insu-dashboard-page main.money-paper-main .insurance-card a.download-btn,
body.terms-page.insu-dashboard-page main.terms-main .insurance-card a.download-btn {
    background: var(--hub-sens-grad);
    border: 1px solid var(--hub-sens-accent-dark);
    color: #fff;
}

body.money-paper-page.insu-dashboard-page .insurance-card a.download-btn:hover,
body.terms-page.insu-dashboard-page .insurance-card a.download-btn:hover,
body.money-paper-page.insu-dashboard-page main.money-paper-main .insurance-card a.download-btn:hover,
body.terms-page.insu-dashboard-page main.terms-main .insurance-card a.download-btn:hover {
    background: var(--hub-sens-accent-dark);
    color: #fff;
}

.money-paper-page .insurance-section .section-header h4,
.terms-page .insurance-section .section-header h4 {
    color: var(--hub-sens-ink);
}

.money-paper-page .insurance-section .section-header h4 i,
.terms-page .insurance-section .section-header h4 i {
    color: var(--hub-sens-accent);
}

/* 대시보드 청·약 .insurance-card 면/테: insu_link_app_epilogue */

/* money/terms .search-results-area 투명: insu_link_app_prelude */

/* 고객센터 .card-header / .card-header .company-info: insu_link_app_prelude (body.insu-link-app.callcenter-page) — body.callcenter-page 무접두 중복 제거 */

/* ===== 방문센터: 검색·카드·버튼 ===== */
body.visit-centers-page.insu-dashboard-page .btn-search,
.visit-centers-page .form-actions .btn-search {
    background: var(--hub-sens-grad);
    border: none;
    color: #fff;
}

body.visit-centers-page.insu-dashboard-page .btn-search:hover,
.visit-centers-page .form-actions .btn-search:hover {
    background: var(--hub-sens-accent-dark);
    color: #fff;
}

.visit-centers-page .btn-reset {
    background: var(--hub-sens-paper);
    border: 1px solid var(--hub-sens-line);
    color: var(--hub-sens-ink);
}

body.visit-centers-page.insu-dashboard-page .center-card {
    border-color: var(--hub-sens-line);
}

body.visit-centers-page.insu-dashboard-page .center-card:hover {
    border-color: var(--hub-sens-accent);
    box-shadow: 0 6px 20px rgba(45, 55, 65, 0.1);
}

body.visit-centers-page.insu-dashboard-page .center-card .phone-link {
    color: var(--hub-sens-accent);
}

body.visit-centers-page.insu-dashboard-page .center-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

body.visit-centers-page.insu-dashboard-page .center-card .info-row i {
    color: var(--hub-sens-accent);
}

/* ===== 카드무이자: 그룹·서브카드(청구 톤에 맞춤) ===== */
/* .insurance-header: car_card_modern (body.insu-link-app.car-card-page …) */

body.car-card-page.insu-dashboard-page .insurance-name {
    color: var(--hub-sens-ink);
}

.car-card-page .insurance-group .card-count,
.car-card-page .card-count {
    background: rgba(61, 95, 106, 0.12);
    color: var(--hub-sens-accent);
}

body.car-card-page.insu-dashboard-page .card-item {
    background: #fff;
    border: 1px solid var(--hub-sens-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

body.car-card-page.insu-dashboard-page .card-item:hover {
    border-color: var(--hub-sens-accent);
    box-shadow: 0 4px 14px rgba(45, 55, 65, 0.12);
    transform: translateY(-1px);
}

/* .card-item .card-header: car_card_modern (body.insu-link-app.car-card-page …) */

/* 보험사명만 허브 잉크 — card-months 는 그라데이션 pill(흰 글씨) car_card_modern */
.car-card-page .card-item .card-company {
    color: var(--hub-sens-ink);
}

.car-card-page .insurance-group .insurance-logo {
    border: 1px solid var(--hub-sens-line);
}

body.car-card-page.insu-dashboard-page .toolbar-company-select,
body.car-card-page.insu-dashboard-page .car-card-toolbar .form-control,
body.car-card-page.insu-dashboard-page .car-card-mobile-search-input {
    border: 1px solid var(--hub-sens-line);
    border-radius: 8px;
    background: #fff;
}

body.car-card-page.insu-dashboard-page .toolbar-company-select:focus,
body.car-card-page.insu-dashboard-page .car-card-mobile-search-input:focus {
    border-color: var(--hub-sens-accent);
    box-shadow: 0 0 0 2px rgba(61, 95, 106, 0.15);
    outline: none;
}

/* 무이자 모바일·플레이스홀더 보조 */
.car-card-page .search-placeholder,
.car-card-page .loading-state {
    color: var(--hub-sens-muted);
}

body.car-card-page.insu-dashboard-page .search-placeholder i {
    color: var(--hub-sens-accent);
    opacity: 0.7;
}


/* 보험사 약관 - 통합 디자인 시스템 */

/* ===== CSS 변수 ===== */
:root {
    /* 메인 색상 - 약관 테마 (모던 블루 계열) */
    --primary-color: #3b82f6;
    --primary-dark: #1e40af;
    --primary-light: #60a5fa;
    --accent-color: #1d4ed8;
    
    /* 그라디언트 */
    --document-gradient: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    --life-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    /* 배경 */
    --bg-primary: #f8fafc;
    --bg-card: rgba(255, 255, 255, 0.95);
    
    /* 텍스트 */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    
    /* 그림자 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    
    /* 레이아웃 */
    --sidebar-width: 380px;
    --border-radius: 16px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 32px;
}

/* * 리셋: insu_link_app_prelude.css */

/* body.unified-search-page: insu_link_app_prelude */

/* ===== 보험금 청구서류: 고객센터와 동일 심플 UI — body 배경은 insu_link_hub_sens(웜 그라데이션) */
body.money-paper-page .hero-section {
    display: none !important;
}
main.main-content.money-paper-main {
    font-family: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
.money-paper-page .main-content.money-paper-main {
    padding: 20px 0 24px 0;
    margin-top: 70px;
}
.money-paper-page .main-wrapper {
    min-height: auto;
    position: relative;
    z-index: 1;
}
.money-paper-page .container.money-paper-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
.money-paper-page .pc-search-interface {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    width: 100%;
    min-width: 0;
    align-items: start;
}
.money-paper-page .search-sidebar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 20px;
    height: fit-content;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.money-paper-page .search-sidebar-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}
.money-paper-page .header-text h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}
.money-paper-page .header-text p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}
.money-paper-page .back-btn {
    background: var(--hub-sens-grad, linear-gradient(135deg, #3d5f6a 0%, #2f4d56 100%));
    border: none;
    border-radius: 8px;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.money-paper-page .back-btn:hover {
    background: var(--hub-sens-accent-dark, #2f4d56);
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
body.insu-link-app.money-paper-page .form-control {
    padding: 10px 14px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}
body.insu-link-app.money-paper-page .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* .search-results-area: insu_link_app_prelude (body.insu-link-app:not visit/car) */
.money-paper-page .results-content {
    padding: 0px;
}
/* 우측 결과 툴바(전체/생명/손해·result-count): insu_link_app_epilogue.css — 레거시 중복 제거 */
/* 그리드: 1줄에 2박스 (2열) — main.money-paper-main 병행(body.money-paper-page 누락 대비) */
.money-paper-page .insurance-grid,
main.main-content.money-paper-main .insurance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 0;
}
/* 카드 1박스 = 로고 | 회사명 | 청구서링크 3칸 */
.money-paper-page .insurance-card,
main.main-content.money-paper-main .insurance-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.money-paper-page .insurance-card:hover,
main.main-content.money-paper-main .insurance-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}
.money-paper-page .insurance-card::before,
main.main-content.money-paper-main .insurance-card::before {
    display: none;
}
/* 카드 1줄: 로고+회사명(company-info) | 청구서링크 */
.money-paper-page .insurance-card .card-row,
main.main-content.money-paper-main .insurance-card .card-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    min-height: 56px;
}
.money-paper-page .insurance-card .card-cell,
main.main-content.money-paper-main .insurance-card .card-cell {
    min-width: 0;
}
/* .card-company .company-info: insu_link_app_prelude */
.money-paper-page .insurance-card .company-logo,
main.main-content.money-paper-main .insurance-card .company-logo {
    width: 100px;
    height: 50px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    flex-shrink: 0;
}
.money-paper-page .insurance-card .company-logo-fallback,
main.main-content.money-paper-main .insurance-card .company-logo-fallback {
    width: 100px;
    height: 50px;
    min-width: 100px;
    /* display:none(인라인)이 동작하도록 !important 금지 — 로고 있을 때 fallback 중복 노출 방지 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    padding: 4px;
    box-sizing: border-box;
    text-align: center;
}
.money-paper-page .insurance-card .company-logo-fallback .fallback-name,
main.main-content.money-paper-main .insurance-card .company-logo-fallback .fallback-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.25;
    word-break: keep-all;
}
/* 보험회사명: insu_link_app_prelude (body.insu-link-app + money/terms) */
.money-paper-page .insurance-card .card-link,
main.main-content.money-paper-main .insurance-card .card-link {
    flex-shrink: 0;
}
/* 청구서링크 연한색 심플 */
.money-paper-page .insurance-card .download-btn,
main.main-content.money-paper-main .insurance-card .download-btn {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
    box-shadow: none;
}
.money-paper-page .insurance-card .download-btn:hover,
main.main-content.money-paper-main .insurance-card .download-btn:hover {
    transform: none;
}
.money-paper-page .insurance-card .download-btn.damage-btn,
main.main-content.money-paper-main .insurance-card .download-btn.damage-btn {
    background: #f1f7ff;
    color: #2563eb;
}
.money-paper-page .insurance-card .download-btn.damage-btn:hover,
main.main-content.money-paper-main .insurance-card .download-btn.damage-btn:hover {
    background: #bfdbfe;
}
.money-paper-page .insurance-card .download-btn.life-btn,
main.main-content.money-paper-main .insurance-card .download-btn.life-btn {
    background: #d1fae5;
    color: #059669;
}
.money-paper-page .insurance-card .download-btn.life-btn:hover,
main.main-content.money-paper-main .insurance-card .download-btn.life-btn:hover {
    background: #a7f3d0;
}
/* 손해보험사 / 생명보험사 카테고리 심플 */
.money-paper-page .section-header,
main.main-content.money-paper-main .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #ffffff;
    color: #374151;
    margin-bottom: 10px;
}
.money-paper-page .section-header h4,
main.main-content.money-paper-main .section-header h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #111827;
}
.money-paper-page .section-header h4 i,
main.main-content.money-paper-main .section-header h4 i {
    color: #6b7280;
}
.money-paper-page .section-header .section-count,
main.main-content.money-paper-main .section-header .section-count {
    font-size: 13px;
    color: #6b7280;
    background: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    font-weight: 500;
}
/* 모바일 검색 래퍼: PC에서는 숨김 */
.money-paper-page .money-paper-mobile-search-wrap {
    display: none;
}
.money-paper-page .mobile-money-paper-header {
    display: none;
}

/* ===== 메인 래퍼 ===== */
.main-wrapper {
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* ===== 히어로 섹션 ===== */
.hero-section {
    text-align: center;
    padding: 10px 0px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--document-gradient);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.hero-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1.2;
}

.gradient-text {
    background: var(--document-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin: 0;
}

/* ===== 메인 컨텐츠 — 무접두 금지(번들 .main-content 누수) ===== */
body.money-paper-page .main-content {
    padding: 35px 0 20px 0;
    margin-top: 34px; /*헤더공간맞추려고 요소보고 강제로 맞춤 */
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.pc-search-interface {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

/* ===== 검색 사이드바 ===== */
.search-sidebar {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 15px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    height: fit-content;
    overflow-y: auto;
    position: sticky;
    top: var(--spacing-md);
}

.search-sidebar-header {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.header-with-back {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.back-btn {
    background: var(--document-gradient);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    min-width: 40px;
    height: 40px;
    box-shadow: var(--shadow-sm);
}

.back-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.header-text h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.header-text p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ===== 검색 폼 ===== */
.search-form-container {
    margin-bottom: var(--spacing-lg);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

/* .form-label / .form-group label: insu_link_app_prelude (body.insu-link-app) */
/* .form-control: insu_link_app_prelude + 위 money-paper-page 전용 */

.form-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-hint i {
    color: var(--primary-color);
    font-size: 0.8rem;
}

/* filter-buttons / .filter-btn: insu_link_app_prelude.css (body.insu-link-app) */

/* ===== 검색 버튼 ===== */
.search-btn-primary {
    width: 100%;
    padding: 14px 20px;
    background: var(--document-gradient);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: var(--spacing-md);
    box-shadow: var(--shadow-md);
}

.search-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* .search-results-area 기본: insu_link_app_prelude — 아래는 results-header 등만 */

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.results-title-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.results-title-section h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.results-title-section h3 i {
    color: var(--primary-color);
    font-size: 1.2rem;
}

/* 모바일 백버튼 */
.mobile-back-btn {
    display: none;
}

/* .result-count: .money-paper-toolbar + insu_link_app_epilogue(무접두 제거) */

/* ===== 보험 섹션 ===== */
.insurance-section {
    margin-bottom: var(--spacing-lg) !important;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #339626;
    color: white;
    border-radius: 12px;
    margin-bottom: 0px;
}

.section-header h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-count {
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.25);
    padding: 4px 12px;
    border-radius: 16px;
    font-weight: 600;
}

/* ===== 보험 카드 그리드 ===== */
.insurance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-top: var(--spacing-md);
}

/* .insurance-card(일반 그리드)·::before: insu_link_app_epilogue + 페이지별 .money-paper-page 규칙 */

/* ===== 청구서류 카드 .card-header (무접두 제거) ===== */
body.insu-link-app.money-paper-page .insurance-card .card-header,
body.insu-link-app main.money-paper-main .insurance-card .card-header {
    display: flow-root;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* .company-info: insu_link_app_prelude + .money-paper-page .insurance-card .card-company (배경 등) */

.company-logo {
    width: 150px;
    height: 60px;
    border-radius: 12px;
    object-fit: contain;
    padding: 6px;
    flex-shrink: 0;
    background: white;
}

/* .company-name: insu_link_app_prelude */

.company-type {
    display: none;
}

/* ===== 다운로드 버튼 (헤더 우측) ===== */
.download-btn {
    padding: 8px 14px;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    min-width: 85px;
}

/* 손해보험 버튼 (파란색) */
.damage-btn {
    background: var(--document-gradient);
}

.damage-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: white;
}

/* 생명보험 버튼 (초록색) */
.life-btn {
    background: var(--life-gradient);
}

.life-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: white;
}

.download-btn i {
    font-size: 0.75rem;
}

/* @keyframes fadeInUp · nth-child: insu_link_app_epilogue */

/* ===== 검색 결과 없음 ===== */
.no-results, .empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-secondary);
}

.no-results i, .empty-state i {
    font-size: 3.5rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.no-results h4, .empty-state h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.no-results p, .empty-state p {
    font-size: 1rem;
    margin: 0;
}

/* ===== 반응형 디자인 ===== */
@media (max-width: 1024px) {
    .pc-search-interface {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .search-sidebar {
        order: 2;
        position: static;
        max-height: none;
    }
    
    .search-results-area {
        order: 1;
    }
    
    .insurance-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 1024px) {
    /* 모바일에서 사이드바 완전히 숨김 — 푸터는 common/pageFooter.php 인라인 스타일만 사용 */

    .search-sidebar {
        display: none !important;
    }

    .pc-search-interface {
        display: block;
    }

    .container {
        margin: 0 auto;
        padding: 0 0px !important;
    }

    body.money-paper-page .main-content {
        padding: 20px 0;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .insurance-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .money-paper-page .insurance-card,
    main.main-content.money-paper-main .insurance-card {
        padding: 10px;
    }
    
    .company-logo {
        width: 120px;
        height: 50px;
    }
    
    .money-paper-page .insurance-card .company-name,
    main.main-content.money-paper-main .insurance-card .company-name {
        font-size: 1.05rem;
    }
    
    .download-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
        min-width: 75px;
    }
    
    /* 섹션 헤더 모바일 최적화 */
    .section-header {
        padding: 12px 16px;
        margin-bottom: 0px !important;
    }
    
    .section-header h4 {
        font-size: 1.05rem;
        font-weight: 600;
    }
    
    .section-count {
        font-size: 0.85rem;
        padding: 4px 10px;
    }

    /* 결과 헤더 모바일 최적화 */
    .results-header {
        padding: 12px 0;
        margin-bottom: 12px;
        flex-direction: row !important;
        align-items: center !important;
    }
    
    .results-title-section {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: var(--document-gradient);
        border: none;
        border-radius: 8px;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .mobile-back-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
    
    .results-title-section h3 {
        font-size: 20px;
        margin-bottom: 0;
        flex: 1;
    }
}

/* 보험금 청구서류 모바일 (고객센터와 동일) */
@media (max-width: 1024px) {
    .money-paper-page .mobile-money-paper-header.money-paper-mobile-header {
        display: block !important;
        padding: 10px 0 12px;
        background: transparent;
    }
    .money-paper-page .mobile-money-paper-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .money-paper-page .mobile-money-paper-header-title h3 {
        font-size: 1.15rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0 0 2px 0;
        line-height: 1.2;
    }
    .money-paper-page .mobile-money-paper-header-title p {
        font-size: 0.75rem;
        color: #6b7280;
        margin: 0;
    }
    .money-paper-page .money-paper-mobile-search-wrap {
        display: block !important;
        margin: 0 0 10px 0;
    }
    .money-paper-page .money-paper-mobile-search-input {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
    }
    .money-paper-page .money-paper-mobile-search-input:focus {
        outline: none;
        border-color: var(--primary-color);
    }
    .money-paper-page .search-sidebar,
    main.main-content.money-paper-main .search-sidebar {
        display: none !important;
    }
    /* 모바일: car_card_modern.css의 .pc-search-interface { display:none } 덮음 */
    .money-paper-page .pc-search-interface,
    main.main-content.money-paper-main .pc-search-interface {
        display: grid !important;
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }
    .money-paper-page .search-results-area,
    main.main-content.money-paper-main .search-results-area {
        width: 100% !important;
        max-width: 100% !important;
    }
    .money-paper-page .results-content,
    main.main-content.money-paper-main .results-content {
        padding: 12px 0 15px 0;
    }
    /* 결과 툴바: insu_link_app_epilogue @media (max-width: 1024px) — grid !important·필터 중복 제거 */
    /* 모바일: 1줄 1박스 */
    .money-paper-page .insurance-grid,
    main.main-content.money-paper-main .insurance-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .money-paper-page .insurance-card .card-row,
    main.main-content.money-paper-main .insurance-card .card-row {
        gap: 10px;
        min-height: 48px;
    }
    .money-paper-page .insurance-card .company-logo,
    .money-paper-page .insurance-card .company-logo-fallback,
    main.main-content.money-paper-main .insurance-card .company-logo,
    main.main-content.money-paper-main .insurance-card .company-logo-fallback {
        width: 80px;
        height: 42px;
        min-width: 80px;
    }
    .money-paper-page .insurance-card .company-name,
    main.main-content.money-paper-main .insurance-card .company-name {
        font-size: 1.0625rem;
    }
    .money-paper-page .insurance-card .download-btn,
    main.main-content.money-paper-main .insurance-card .download-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    .money-paper-page .section-header h4,
    main.main-content.money-paper-main .section-header h4 {
        font-size: 0.9375rem;
    }
    .money-paper-page .section-header .section-count,
    main.main-content.money-paper-main .section-header .section-count {
        font-size: 12px;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.5rem;
    }
    
    body.insu-link-app.money-paper-page .insurance-card .card-header,
    body.insu-link-app main.money-paper-main .insurance-card .card-header {
        display: flex;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .section-header {
        flex-direction: row;
        align-items: flex-start;
        gap: 6px;
        padding: 10px 12px;
    }
    
    .section-header h4 {
        font-size: 1rem;
        font-weight: 600;
    }
    
    .section-count {
        font-size: 0.8rem;
        padding: 3px 10px;
    }
    
    .filter-buttons {
        flex-direction: column;
    }
    
    body.insu-link-app .filter-buttons .filter-btn {
        justify-content: center;
    }
    
    .company-logo {
        width: 100px;
        height: 45px;
    }
    
    .money-paper-page .insurance-card .company-name,
    main.main-content.money-paper-main .insurance-card .company-name {
        font-size: 0.95rem;
        margin-bottom: 0px !important;
    }
    
    .download-btn {
        padding: 5px 10px;
        font-size: 0.7rem;
        min-width: 65px;
    }
    
    .money-paper-page .insurance-card,
    main.main-content.money-paper-main .insurance-card {
        padding: 8px;
    }
} 

/* ===== 모바일 검색 인터페이스 ===== */
@media (max-width: 1024px) {
    /* 플로팅 트리거 버튼 */
    .mobile-search-trigger {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
        border: none;
        border-radius: 50%;
        color: white;
        font-size: 24px;
        cursor: pointer;
        z-index: 1000;
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-search-trigger:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
    }
    
    /* 모바일 검색 인터페이스 */
    .mobile-search-interface {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(59, 130, 246, 0.1);
        border-radius: 20px 20px 0 0;
        padding: 20px;
        transform: translateY(100%);
        transition: all 0.3s ease;
        z-index: 1001;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-search-interface.active {
        transform: translateY(0);
    }
    
    .mobile-search-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .mobile-search-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }
    
    .mobile-close-btn {
        width: 36px;
        height: 36px;
        background: rgba(59, 130, 246, 0.1);
        border: none;
        border-radius: 50%;
        color: var(--primary-color);
        font-size: 18px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-close-btn:hover {
        background: rgba(59, 130, 246, 0.2);
    }
    
    .mobile-search-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .mobile-form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .mobile-form-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-form-label i {
        font-size: 12px;
    }
    
    .mobile-search-input {
        width: 100%;
        padding: 14px 16px;
        border: 2px solid rgba(59, 130, 246, 0.1);
        border-radius: 10px;
        font-size: 16px;
        background: rgba(255, 255, 255, 0.9);
        transition: all 0.3s ease;
    }
    
    .mobile-search-input:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    
    .mobile-filter-buttons {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .mobile-filter-btn {
        flex: 1;
        min-width: 80px;
        padding: 10px 12px;
        border: 2px solid rgba(59, 130, 246, 0.1);
        background: rgba(255, 255, 255, 0.9);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }
    
    .mobile-filter-btn i {
        font-size: 12px;
    }
    
    .mobile-filter-btn:hover,
    .mobile-filter-btn.active {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
        transform: translateY(-1px);
    }
}

/* ===== 데스크톱에서 모바일 요소 숨김 ===== */
@media (min-width: 769px) {
    .mobile-search-trigger,
    .mobile-search-interface {
        display: none !important;
    }
}

/* 대시보드 CSS(insu_services_dashboard) 이후에도: 모바일 main 위치 = 고객센터(.callcenter-page)와 동일 */
/* 모바일 main: 50px은 대시보드 탑 정렬. 상단 padding 0 → 타 탭(공통 20px)보다 본문만 올라가 보이므로 20px 유지 */
@media (max-width: 1024px) {
    body.insu-dashboard-page.money-paper-page main.main-content.money-paper-main,
    body.insu-dashboard-page.money-paper-page .money-paper-page .main-content.money-paper-main {
        margin-top: 50px !important;
        padding: 20px 0 24px 0 !important;
    }
}

/* 보험사 약관 - 통합 디자인 시스템 */

/* ===== CSS 변수 ===== */
:root {
    /* 메인 색상 - 약관 테마 (모던 블루 계열) */
    --primary-color: #3b82f6;
    --primary-dark: #1e40af;
    --primary-light: #60a5fa;
    --accent-color: #1d4ed8;
    
    /* 그라디언트 */
    --document-gradient: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    --life-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    /* 배경 */
    --bg-primary: #f8fafc;
    --bg-card: rgba(255, 255, 255, 0.95);
    
    /* 텍스트 */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    
    /* 그림자 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    
    /* 레이아웃 */
    --sidebar-width: 380px;
    --border-radius: 16px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 32px;
}

/* * 리셋: insu_link_app_prelude.css */

/* body.unified-search-page: insu_link_app_prelude */

/* ===== 보험사 약관: 고객센터/청구서와 동일 — body 배경은 insu_link_hub_sens(웜 그라데이션) */
body.terms-page .hero-section {
    display: none !important;
}
/* body.terms-page 누락 시에도 약관 본문 폰트 = header /assets Pretendard */
main.main-content.terms-main {
    font-family: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
.terms-page .main-content.terms-main {
    padding: 20px 0 24px 0;
    margin-top: 70px;
}
.terms-page .main-wrapper {
    min-height: auto;
    position: relative;
    z-index: 1;
}
.terms-page .container.terms-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
.terms-page .pc-search-interface {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    width: 100%;
    min-width: 0;
    align-items: start;
}
.terms-page .search-sidebar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 20px;
    height: fit-content;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.terms-page .search-sidebar-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}
.terms-page .header-text h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}
.terms-page .header-text p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}
.terms-page .back-btn {
    background: var(--hub-sens-grad, linear-gradient(135deg, #3d5f6a 0%, #2f4d56 100%));
    border: none;
    border-radius: 8px;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.terms-page .back-btn:hover {
    background: var(--hub-sens-accent-dark, #2f4d56);
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
body.insu-link-app.terms-page .form-control {
    padding: 10px 14px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}
body.insu-link-app.terms-page .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* .search-results-area: insu_link_app_prelude */
.terms-page .results-content {
    padding: 0px;
}
.terms-page .mobile-terms-header,
.terms-page .terms-mobile-search-wrap {
    display: none;
}
/* 우측 결과 툴바: insu_link_app_epilogue.css — 레거시 중복 제거 */
/* main.terms-main 병행: body.terms-page 누락 시에도 카드/회사명/폰트 스코프 유지 */
.terms-page .insurance-grid,
main.main-content.terms-main .insurance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 0;
}
.terms-page .insurance-card,
main.main-content.terms-main .insurance-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.terms-page .insurance-card:hover,
main.main-content.terms-main .insurance-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}
.terms-page .insurance-card::before,
main.main-content.terms-main .insurance-card::before {
    display: none;
}
.terms-page .insurance-card .card-row,
main.main-content.terms-main .insurance-card .card-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    min-height: 56px;
}
.terms-page .insurance-card .card-cell,
main.main-content.terms-main .insurance-card .card-cell {
    min-width: 0;
}
/* .card-company .company-info: insu_link_app_prelude */
.terms-page .insurance-card .company-logo,
main.main-content.terms-main .insurance-card .company-logo {
    width: 100px;
    height: 50px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    flex-shrink: 0;
}
.terms-page .insurance-card .company-logo-fallback,
main.main-content.terms-main .insurance-card .company-logo-fallback {
    width: 100px;
    height: 50px;
    min-width: 100px;
    /* display:none(인라인)이 동작하도록 !important 금지 — 로고 있을 때 fallback 중복 노출 방지 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    padding: 4px;
    box-sizing: border-box;
    text-align: center;
}
.terms-page .insurance-card .company-logo-fallback .fallback-name,
main.main-content.terms-main .insurance-card .company-logo-fallback .fallback-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.25;
    word-break: keep-all;
}
/* 보험회사명: insu_link_app_prelude (body.insu-link-app + money/terms) */
.terms-page .insurance-card .card-link,
main.main-content.terms-main .insurance-card .card-link {
    flex-shrink: 0;
}
.terms-page .insurance-card .download-btn,
main.main-content.terms-main .insurance-card .download-btn {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.2s ease;
    box-shadow: none;
}
.terms-page .insurance-card .download-btn:hover,
main.main-content.terms-main .insurance-card .download-btn:hover {
    transform: none;
}
.terms-page .insurance-card .download-btn.damage-btn,
main.main-content.terms-main .insurance-card .download-btn.damage-btn {
    background: #dbeafe;
    color: #2563eb;
}
.terms-page .insurance-card .download-btn.damage-btn:hover,
main.main-content.terms-main .insurance-card .download-btn.damage-btn:hover {
    background: #bfdbfe;
}
.terms-page .insurance-card .download-btn.life-btn,
main.main-content.terms-main .insurance-card .download-btn.life-btn {
    background: #d1fae5;
    color: #059669;
}
.terms-page .insurance-card .download-btn.life-btn:hover,
main.main-content.terms-main .insurance-card .download-btn.life-btn:hover {
    background: #a7f3d0;
}
.terms-page .section-header,
main.main-content.terms-main .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    color: #374151;
}
.terms-page .section-header h4,
main.main-content.terms-main .section-header h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #111827;
}
.terms-page .section-header h4 i,
main.main-content.terms-main .section-header h4 i {
    color: #6b7280;
}
.terms-page .section-header .section-count,
main.main-content.terms-main .section-header .section-count {
    font-size: 13px;
    color: #6b7280;
    background: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    font-weight: 500;
}

@media (max-width: 1024px) {
    /* 푸터: pageFooter.php — 여기서 .footer-main 덮어쓰지 않음 */

    .terms-page .mobile-terms-header.terms-mobile-header {
        display: block !important;
        padding: 10px 0 12px;
        margin-bottom: 0px;
        background: transparent;
    }
    .terms-page .mobile-terms-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .terms-page .mobile-terms-header-title h3 {
        font-size: 1.15rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0 0 2px 0;
        line-height: 1.2;
    }
    .terms-page .mobile-terms-header-title p {
        font-size: 0.75rem;
        color: #6b7280;
        margin: 0;
    }
    .terms-page .terms-mobile-search-wrap {
        display: block !important;
        margin: 0 0 10px 0;
    }
    .terms-page .terms-mobile-search-input {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
    }
    .terms-page .terms-mobile-search-input:focus {
        outline: none;
        border-color: var(--primary-color);
    }
    .terms-page .search-sidebar {
        display: none !important;
    }
    /* 모바일: car_card_modern.css의 .pc-search-interface { display:none } 덮음 */
    .terms-page .pc-search-interface,
    main.main-content.terms-main .pc-search-interface {
        display: grid !important;
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }
    .terms-page .search-results-area,
    main.main-content.terms-main .search-results-area {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* 결과 툴바: insu_link_app_epilogue @media (max-width: 1024px) — grid !important·필터 중복 제거 */
    .terms-page .results-content,
    main.main-content.terms-main .results-content {
        padding: 12px 0 15px 0;
    }
    .terms-page .insurance-grid,
    main.main-content.terms-main .insurance-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .terms-page .insurance-card .company-logo,
    .terms-page .insurance-card .company-logo-fallback,
    main.main-content.terms-main .insurance-card .company-logo,
    main.main-content.terms-main .insurance-card .company-logo-fallback {
        width: 80px;
        height: 42px;
        min-width: 80px;
    }
    .terms-page .insurance-card .company-name,
    main.main-content.terms-main .insurance-card .company-name {
        font-size: 1.0625rem;
    }
    .terms-page .insurance-card .download-btn,
    main.main-content.terms-main .insurance-card .download-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    .terms-page .section-header h4,
    main.main-content.terms-main .section-header h4 {
        font-size: 0.9375rem;
    }
    .terms-page .section-header .section-count,
    main.main-content.terms-main .section-header .section-count {
        font-size: 12px;
        padding: 3px 8px;
    }
}

/* ===== 메인 래퍼 ===== */
.main-wrapper {
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* ===== 히어로 섹션 ===== */
.hero-section {
    text-align: center;
    padding: 10px 0px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--document-gradient);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.hero-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1.2;
}

.gradient-text {
    background: var(--document-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin: 0;
}

/* ===== 메인 컨텐츠 — 약관만(번들 .main-content 누수 방지) ===== */
body.terms-page .main-content {
    padding: 35px 0 20px 0;
    margin-top: 34px; /*헤더공간맞추려고 요소보고 강제로 맞춤 */
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.pc-search-interface {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

/* ===== 검색 사이드바 ===== */
.search-sidebar {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 15px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    height: fit-content;
    max-height: 80vh;
    overflow-y: auto;
    position: sticky;
    top: var(--spacing-md);
}

.search-sidebar-header {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.header-with-back {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.back-btn {
    background: var(--document-gradient);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    min-width: 40px;
    height: 40px;
    box-shadow: var(--shadow-sm);
}

.back-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.header-text h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.header-text p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ===== 검색 폼 ===== */
.search-form-container {
    margin-bottom: var(--spacing-lg);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

/* .form-label / .form-group label: insu_link_app_prelude */
/* .form-control: insu_link_app_prelude + 위 terms-page 전용 */

.form-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-hint i {
    color: var(--primary-color);
    font-size: 0.8rem;
}

/* filter-buttons / .filter-btn: insu_link_app_prelude.css (body.insu-link-app) */

/* ===== 검색 버튼 ===== */
.search-btn-primary {
    width: 100%;
    padding: 14px 20px;
    background: var(--document-gradient);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: var(--spacing-md);
    box-shadow: var(--shadow-md);
}

.search-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* .search-results-area 기본: insu_link_app_prelude */

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.results-title-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.results-title-section h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.results-title-section h3 i {
    color: var(--primary-color);
    font-size: 1.2rem;
}

/* 모바일 백버튼 */
.mobile-back-btn {
    display: none;
}

/* .result-count: .terms-toolbar + insu_link_app_epilogue(무접두 제거) */

/* ===== 보험 섹션 ===== */
.insurance-section {
    margin-bottom: var(--spacing-lg);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding: 10px;
    background: #ffffff;
    color: white;
    border-radius: 12px;
}

.section-header h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-count {
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.25);
    padding: 4px 12px;
    border-radius: 16px;
    font-weight: 600;
}

/* ===== 보험 카드 그리드 ===== */
.insurance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-top: var(--spacing-md);
}

/* .insurance-card(일반 그리드): insu_link_app_epilogue + .terms-page 규칙 */

/* ===== 약관 카드 .card-header (무접두 제거) ===== */
body.insu-link-app.terms-page .insurance-card .card-header,
body.insu-link-app main.terms-main .insurance-card .card-header {
    display: flow-root;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* .company-info: insu_link_app_prelude + .terms-page .insurance-card .card-company (배경 등) */

.company-logo {
    width: 150px;
    height: 60px;
    border-radius: 12px;
    object-fit: contain;
    padding: 6px;
    flex-shrink: 0;
    background: white;
}

/* .company-name: insu_link_app_prelude */

.company-type {
    display: none;
}

/* ===== 다운로드 버튼 (헤더 우측) ===== */
.download-btn {
    padding: 8px 14px;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    min-width: 85px;
}

/* 손해보험 버튼 (파란색) */
.damage-btn {
    background: var(--document-gradient);
}

.damage-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: white;
}

/* 생명보험 버튼 (초록색) */
.life-btn {
    background: #13c1c7;
}

.life-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: white;
}

.download-btn i {
    font-size: 0.75rem;
}

/* @keyframes fadeInUp · nth-child: insu_link_app_epilogue */

/* ===== 검색 결과 없음 ===== */
.no-results, .empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-secondary);
}

.no-results i, .empty-state i {
    font-size: 3.5rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.no-results h4, .empty-state h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.no-results p, .empty-state p {
    font-size: 1rem;
    margin: 0;
}

/* ===== 반응형 디자인 ===== */
@media (max-width: 1024px) {
    .pc-search-interface {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .search-sidebar {
        order: 2;
        position: static;
        max-height: none;
    }
    
    .search-results-area {
        order: 1;
    }
    
    .insurance-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 1024px) {
    /* 모바일에서 사이드바 완전히 숨김 */
    .search-sidebar {
        display: none !important;
    }

    .pc-search-interface {
        display: block;
    }

    .container {
        margin: 0 auto;
        padding: 0 0px !important;
    }

    .main-content {
        padding: 20px 0;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .insurance-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .terms-page .insurance-card,
    main.main-content.terms-main .insurance-card {
        padding: 10px;
    }
    
    .company-logo {
        width: 120px;
        height: 50px;
    }
    
    .terms-page .insurance-card .company-name,
    main.main-content.terms-main .insurance-card .company-name {
        font-size: 1.05rem;
    }
    
    .download-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
        min-width: 75px;
    }

    /* 결과 헤더 모바일 최적화 */
    .results-header {
        padding: 12px 0;
        margin-bottom: 12px;
        flex-direction: row !important;
        align-items: center !important;
    }
    
    .results-title-section {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: var(--document-gradient);
        border: none;
        border-radius: 8px;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .mobile-back-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
    
    .results-title-section h3 {
        font-size: 20px;
        margin-bottom: 0;
        flex: 1;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.5rem;
    }
    
    body.insu-link-app.terms-page .insurance-card .card-header,
    body.insu-link-app main.terms-main .insurance-card .card-header {
        display: flex;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .section-header {
        flex-direction: row;
        align-items: flex-start;
        gap: 6px;
        background: none;
    }
    
    .filter-buttons {
        flex-direction: column;
    }
    
    body.insu-link-app .filter-buttons .filter-btn {
        justify-content: center;
    }
    
    .company-logo {
        width: 100px;
        height: 45px;
    }
    
    .terms-page .insurance-card .company-name,
    main.main-content.terms-main .insurance-card .company-name {
        font-size: 0.95rem;
        margin-bottom: 0px !important;
    }
    
    .download-btn {
        padding: 5px 10px;
        font-size: 0.7rem;
        min-width: 65px;
    }
    
    .terms-page .insurance-card,
    main.main-content.terms-main .insurance-card {
        padding: 8px;
    }
} 

/* ===== 모바일 검색 인터페이스 ===== */
@media (max-width: 1024px) {
    /* 플로팅 트리거 버튼 */
    .mobile-search-trigger {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
        border: none;
        border-radius: 50%;
        color: white;
        font-size: 24px;
        cursor: pointer;
        z-index: 1000;
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-search-trigger:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
    }
    
    /* 모바일 검색 인터페이스 */
    .mobile-search-interface {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(59, 130, 246, 0.1);
        border-radius: 20px 20px 0 0;
        padding: 20px;
        transform: translateY(100%);
        transition: all 0.3s ease;
        z-index: 1001;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-search-interface.active {
        transform: translateY(0);
    }
    
    .mobile-search-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .mobile-search-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }
    
    .mobile-close-btn {
        width: 36px;
        height: 36px;
        background: rgba(59, 130, 246, 0.1);
        border: none;
        border-radius: 50%;
        color: var(--primary-color);
        font-size: 18px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-close-btn:hover {
        background: rgba(59, 130, 246, 0.2);
    }
    
    .mobile-search-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .mobile-form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .mobile-form-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-form-label i {
        font-size: 12px;
    }
    
    .mobile-search-input {
        width: 100%;
        padding: 14px 16px;
        border: 2px solid rgba(59, 130, 246, 0.1);
        border-radius: 10px;
        font-size: 16px;
        background: rgba(255, 255, 255, 0.9);
        transition: all 0.3s ease;
    }
    
    .mobile-search-input:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    
    .mobile-filter-buttons {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .mobile-filter-btn {
        flex: 1;
        min-width: 80px;
        padding: 10px 12px;
        border: 2px solid rgba(59, 130, 246, 0.1);
        background: rgba(255, 255, 255, 0.9);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }
    
    .mobile-filter-btn i {
        font-size: 12px;
    }
    
    .mobile-filter-btn:hover,
    .mobile-filter-btn.active {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
        transform: translateY(-1px);
    }
}

/* ===== 데스크톱에서 모바일 요소 숨김 ===== */
@media (min-width: 769px) {
    .mobile-search-trigger,
    .mobile-search-interface {
        display: none !important;
    }
}

/* 모바일 main: 상단 padding 0이면 청구/공통 20px 대비 본문만 위로 올라감 → 20px 유지 */
@media (max-width: 1024px) {
    body.insu-dashboard-page.terms-page main.main-content.terms-main,
    body.insu-dashboard-page.terms-page .terms-page .main-content.terms-main {
        margin-top: 50px !important;
        padding: 20px 0 24px 0 !important;
    }
}

/* 손해보험 방문고객센터 - 통합 디자인 시스템 */

/* ===== CSS 변수 ===== */
:root {
    /* 메인 색상 - 고객센터 테마 (블루 계열) */
    --primary-color: #3b82f6;
    --primary-dark: #2563eb;
    --primary-light: #60a5fa;
    --accent-color: #1d4ed8;
    
    /* 그라디언트 */
    --callcenter-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    
    /* 배경 */
    --bg-primary: #f8fafc;
    --bg-card: rgba(255, 255, 255, 0.9);
    
    /* 텍스트 */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    
    /* 그림자 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
    
    /* 레이아웃 */
    --sidebar-width: 380px;
    --border-radius: 12px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 32px;
}

/* * 리셋: insu_link_app_prelude.css */

/* ===== visit-centers: body 배경은 insu_link_hub_sens(웜 그라데이션) — PC·모바일 동일 */
/* 블러 효과 제거 */
body.visit-centers-page .search-sidebar,
body.visit-centers-page .search-results-area,
body.visit-centers-page .center-card {
    backdrop-filter: none !important;
}
.visit-centers-page .main-content.visit-centers-main {
    padding: 20px 0 24px 0;
    margin-top: 70px;
}
.visit-centers-page .main-wrapper {
    min-height: auto;
    position: relative;
    z-index: 1;
}
.visit-centers-page .container.visit-centers-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
.visit-centers-page .pc-search-interface {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    width: 100%;
    min-width: 0;
    align-items: start;
}
.visit-centers-page .search-sidebar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 20px;
    height: fit-content;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.visit-centers-page .search-sidebar-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}
.visit-centers-page .header-text h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}
.visit-centers-page .header-text p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}
.visit-centers-page .back-btn {
    background: var(--hub-sens-grad, linear-gradient(135deg, #3d5f6a 0%, #2f4d56 100%));
    border: none;
    border-radius: 8px;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.visit-centers-page .back-btn:hover {
    background: var(--hub-sens-accent-dark, #2f4d56);
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.visit-centers-page .back-btn i {
    color: #fff;
}
body.insu-link-app.visit-centers-page .form-control {
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}
body.insu-link-app.visit-centers-page .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.visit-centers-page .btn-search {
    background: #3b82f6;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
}
.visit-centers-page .btn-search:hover {
    background: #2563eb;
    transform: none;
}
.visit-centers-page .btn-reset {
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
}
.visit-centers-page .btn-reset:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}
/* 결과 영역: insu_link_app_prelude(투명) + epilogue(모바일 좌우 패딩) — PC·모바일 모두 고객센터·무이자와 동일 톤 */
.visit-centers-page .search-results-area {
    background: transparent;
    padding: 0;
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}
.visit-centers-page .results-header.results-toolbar.visit-centers-toolbar {
    display: flex;
    align-items: center;
    padding: 0 0 12px 0;
    margin-bottom: 12px;
    border-bottom: none;
}
.visit-centers-page .visit-centers-toolbar .results-toolbar-filters {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* .result-count(툴바): insu_link_app_epilogue(> .result-count) + insu_link_hub_sens — 레거시 흰/회색 뱃지 제거 */
.visit-centers-page .center-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.visit-centers-page .center-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    transform: none;
}
.visit-centers-page .btn-show-map-icon {
    background: #ffffff;
    border: 2px solid #8b8b8b;
}
.visit-centers-page .btn-show-map-icon:hover {
    background: #2563eb;
    transform: none;
}
.visit-centers-page .map-modal-header,
.visit-centers-page .map-modal-content {
    border-radius: 12px;
}
.visit-centers-page .map-modal-close {
    background: #f3f4f6;
}
.visit-centers-page .company-divider {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
    margin-bottom: 4px;
}
.visit-centers-page .company-name-header {
    color: #374151;
    font-size: 1.1rem;
}
.visit-centers-page .initial-state,
.visit-centers-page .empty-state {
    padding: 48px 24px;
    text-align: center;
}
.visit-centers-page .initial-state i,
.visit-centers-page .empty-state i {
    color: #9ca3af;
    font-size: 2.5rem;
    margin-bottom: 16px;
}
.visit-centers-page .initial-state h4,
.visit-centers-page .empty-state h4 {
    font-size: 1.25rem;
    color: #374151;
    margin-bottom: 8px;
}
.visit-centers-page .initial-state p,
.visit-centers-page .empty-state p {
    font-size: 15px;
    color: #6b7280;
}

/* visit-centers 모바일 헤더: PC에서 숨김 */
.visit-centers-page .mobile-visit-centers-header.visit-centers-mobile-header {
    display: none;
}

/* visit-centers 1024px 이하 (태블릿·모바일) */
@media (max-width: 1024px) {
    .visit-centers-page .main-content {
        margin-top: 50px !important;
    }
    .visit-centers-page .search-results-area {
        padding: 0 15px 15px 15px !important;
        display: block !important;
    }
    .visit-centers-page .mobile-visit-centers-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .visit-centers-page .mobile-visit-centers-header-title h3 {
        font-size: 1.15rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0 0 2px 0;
    }
    .visit-centers-page .mobile-visit-centers-header-title p {
        font-size: 0.75rem;
        color: #6b7280;
        margin: 0;
    }
    /* 모바일: car_card_modern.css의 .pc-search-interface { display:none } 덮음 */
    .visit-centers-page .pc-search-interface {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    .visit-centers-page .search-sidebar {
        display: none;
    }
    /* result-count(툴바) @1024: insu_link_app_epilogue .insu-link-results-toolbar > .result-count */

    /* 태블릿~1024: 검색결과 영역 기본 글자·초기 안내 (좁은 폭과 동일하게 읽기 쉬운 크기 유지) */
    .visit-centers-page .search-results-area,
    .visit-centers-page .results-content {
        font-size: 1rem;
        -webkit-text-size-adjust: 100%;
    }
    .visit-centers-page .initial-state h4,
    .visit-centers-page .empty-state h4 {
        font-size: 1.25rem;
    }
    .visit-centers-page .initial-state p,
    .visit-centers-page .empty-state p {
        font-size: 15px;
    }
}

/* body.unified-search-page: insu_link_app_prelude */

/* ===== 메인 래퍼 — visit 전용(번들 누수 방지) ===== */
.visit-centers-page .main-wrapper {
    min-height: auto;
    position: relative;
    z-index: 1;
}

/* 무접두 .main-content 금지(번들 누수) — visit 전용 */
.visit-centers-page .main-content {
    padding: 35px 0 20px 0;
    margin-top: 34px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

/* ===== 히어로 섹션 ===== */
.hero-section {
    text-align: center;
    padding: 10px 0px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--callcenter-gradient);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.hero-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    text-shadow: none; /* 텍스트 그림자 제거 */
    line-height: 1.2;
}

.gradient-text {
    background: var(--callcenter-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

body.visit-centers-search-active .statistics-content {
    margin-top: var(--spacing-md);
}

/* ===== 메인 컨텐츠 ===== */
.statistics-content {
    margin-top: var(--spacing-lg);
}

.pc-search-interface {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--spacing-lg);
    min-height: 600px;
}

/* ===== 검색 사이드바 ===== */
.search-sidebar {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: fit-content;
    max-height: 80vh;
    overflow-y: auto;
    position: sticky;
    top: var(--spacing-md);
}

.search-sidebar-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.header-with-back {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--callcenter-gradient);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.back-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.header-text h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.header-text p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.search-form-container {
    margin-bottom: var(--spacing-md);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

/* .form-label: insu_link_app_prelude */
/* .form-control: insu_link_app_prelude + 위 visit-centers-page 전용 */

.form-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-hint i {
    color: var(--primary-color);
    font-size: 12px;
}

/* prelude `body.insu-link-app main *` 가 margin:0 이라 단독 .form-actions 는 margin-top 무효(취소선) */
body.insu-link-app.visit-centers-page main .search-form-container .form-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.btn-search,
.btn-reset {
    flex: 1;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-search {
    background: var(--callcenter-gradient);
    color: white;
}

.btn-search:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-reset {
    background: white;
    color: var(--text-secondary);
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.btn-reset:hover {
    background: #f1f5f9;
    border-color: var(--text-muted);
}

/* .search-results-area(일반): insu_link_app_prelude — 아래 .visit-centers-page 규칙이 박스형 유지 */

.results-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.results-title-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.mobile-back-btn {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg-card);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.results-title-section h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* .result-count: .visit-centers-toolbar / insu_link_app_epilogue(레거시 무접두 제거) */

.results-content {
    min-height: 400px;
}

/* ===== 센터 그리드 ===== */
.center-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.company-divider {
    margin: 0px;    
    padding: 0px;
}

.divider-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    justify-content: space-between;
}

.company-logo-small {
    width: 160px;
    height: auto;
    object-fit: contain;
}

.company-name-header {
    font-size: 1.2rem;
    font-weight: 700;
    color: gray;
    margin-right: 20px;
}


.center-card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.center-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

body.insu-link-app.visit-centers-page .center-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.center-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.center-type-badge {
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0);
    color: #333;
    font-size: 0.85rem;
    font-weight: 600;
}

.card-body {
    margin-top: 1px;
}

.center-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* .info-row: 방문센터 .center-card 전용(고객센터와 무접두 충돌 방지) */
.visit-centers-page .center-card .info-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: 0.95rem;
    color: var(--text-secondary);
    position: relative;
}

.visit-centers-page .center-card .info-row i {
    color: #969696;
    width: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-text {
    flex: 1;
    line-height: 1.6;
    display: inline-block;
}

.phone-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.phone-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.btn-show-map-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--callcenter-gradient);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 8px;
    margin-top: 0;
    vertical-align: middle;
}

.btn-show-map-icon:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: var(--shadow-md);
}

.btn-show-map-icon i {
    font-size: 0.9rem;
}

/* ===== 지도 모달 (PC) ===== */
.map-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.map-modal-content {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.map-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.map-modal-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.map-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--text-secondary);
}

.map-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

.map-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* ===== 지도 하단 시트 (모바일) ===== */
.map-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.map-bottom-sheet.active {
    transform: translateY(0);
}

.map-bottom-sheet-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
}

.map-bottom-sheet-drag-handle {
    width: 40px;
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    margin-bottom: 12px;
}

.map-bottom-sheet-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
    flex: 1;
}

.map-bottom-sheet-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--text-secondary);
}

.map-bottom-sheet-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

.map-bottom-sheet-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* 모바일 반응형 */
@media (max-width: 1024px) {
    /* 푸터: pageFooter.php — 여기서 .footer-main 덮어쓰지 않음 */

    .visit-centers-page .main-content {
        padding: 0;
        margin-top: 50px;
    }

    .visit-centers-page .container {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 0 !important;
    }

    .visit-centers-page .statistics-content {
        margin-top: var(--spacing-sm);
    }

    .visit-centers-page .pc-search-interface {
        display: block;
        min-height: auto;
    }
    
    /* 좌측 검색 사이드바 숨기기 */
    .visit-centers-page .search-sidebar {
        display: none;
    }
    
    /* 방문센터 모바일: 한 화면 (하단바 제거) - 검색 결과 영역 항상 표시 */
    .visit-centers-page .search-results-area {
        display: block !important;
        width: 100%;
        padding: 0 15px 15px 15px !important;
        margin: 0;
        box-shadow: none;
        border-radius: 0;
        border: none;
    }

    .results-content {
        margin: 0;
    }
    
    /* 트리거/플로팅 버튼 제거 (인라인 검색으로 대체) */
    
    .map-modal {
        padding: 0;
    }
    
    .map-modal-content {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .map-modal-header {
        padding: 16px 20px;
    }
    
    .map-modal-body {
        padding: 20px;
    }
    
    #mapContainer {
        height: calc(100vh - 120px) !important;
    }
    
    /* 히어로 섹션 모바일 최적화 */
    .hero-section {
        padding: 20px 0 16px;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-description {
        font-size: 0.9rem;
    }

    
    /* 모바일에서 히어로 섹션 텍스트 색상 검정색으로 강제 적용 */
    .hero-title {
        color: var(--text-primary) !important;
    }
    
    .hero-description {
        color: var(--text-secondary) !important;
    }
    
    .hero-badge {
        background: rgba(255, 255, 255, 0.95) !important;
        color: var(--text-primary) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
}

/* ===== 빈 상태 ===== */
.no-results {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.empty-state {
    text-align: center;
    padding: var(--spacing-lg);
}

.empty-state i {
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.empty-state h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.empty-state p {
    font-size: 1rem;
    color: var(--text-secondary);
}

.initial-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    text-align: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
}

.initial-state i {
    font-size: 3rem;
    color: var(--primary-color);
}

.initial-state h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* ===== 방문센터 결과 영역 인라인 검색 (PC·모바일 공통 — 사이드바와 동일 필터, 리셋 특이도는 insu_link_app_epilogue) ===== */
.visit-centers-page .visit-centers-mobile-inline-search {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    box-sizing: border-box;
}

.visit-centers-page .visit-centers-inline-search-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.visit-centers-page .visit-inline-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.visit-centers-page .visit-inline-row-2 {
    flex-wrap: nowrap;
}

.visit-centers-page .visit-inline-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.visit-centers-page .visit-inline-input-wrap .visit-inline-input {
    width: 100%;
    box-sizing: border-box;
}

.visit-centers-page .visit-inline-search-icon-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-sizing: border-box;
}

.visit-centers-page .visit-inline-search-icon-btn:hover,
.visit-centers-page .visit-inline-search-icon-btn:active {
    color: var(--hub-sens-accent, #3d5f6a);
    background: rgba(61, 95, 106, 0.1);
}

.visit-centers-page .visit-inline-row-2 .visit-inline-select {
    flex: 1 1 0;
    min-width: 0;
}

/* ===== 반응형 디자인 ===== */
@media (max-width: 1200px) {
    .pc-search-interface {
        grid-template-columns: 1fr;
    }
    
    .search-sidebar {
        position: static;
        max-height: none;
    }
}

@media (max-width: 1024px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .main-wrapper {
        padding: 0px;
    }
    
    .center-card {
        padding: var(--spacing-sm);
    }
    
    .center-name {
        font-size: 1rem;
    }
}



/* 무이자 할부 서비스 - unified_search 스타일 기반 */

/* CSS 변수 */
:root {
    --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
    --car-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
    --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* * 리셋: insu_link_app_prelude.css (insu-link-app 번들) */

body {
    line-height: 1.5;
    color: var(--gray-700);
    background: var(--gray-50);
    overflow-x: hidden;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    scroll-behavior: smooth;
}

/* ===== 자동차보험 무이자: body 배경은 insu_link_hub_sens(다른 4탭과 동일 웜 그라데이션) ===== */
body.car-card-page .hero-section {
    display: none !important;
}
body.car-card-page .mobile-header {
    display: none !important;
}
.car-card-page .main-content.car-card-main {
    padding: 20px 0 24px 0;
    margin-top: 70px;
    min-height: auto;
}
.car-card-page .main-wrapper {
    position: relative;
    min-height: auto;
}
.car-card-page .container.car-card-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
.car-card-page .pc-search-interface {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
    height: auto;
    max-width: 100%;
}
.car-card-page .search-sidebar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.car-card-page .search-sidebar-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}
.car-card-page .header-text h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}
.car-card-page .header-text p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}
.car-card-page .back-btn {
    background: var(--hub-sens-grad, linear-gradient(135deg, #3d5f6a 0%, #2f4d56 100%));
    border: none;
    border-radius: 8px;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.car-card-page .back-btn:hover {
    background: var(--hub-sens-accent-dark, #2f4d56);
    transform: none;
}
.car-card-page .back-btn i {
    color: #fff;
}
body.insu-link-app.car-card-page .form-control {
    padding: 10px 14px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}
body.insu-link-app.car-card-page .form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
body.insu-link-app.car-card-page .form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
/* 결과 영역: prelude(투명) + epilogue — 고객센터·방문과 동일 */
.car-card-page .search-results-area {
    background: transparent;
    padding: 0;
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}
.car-card-page .results-content {
    padding: 0px;
    
}
.car-card-page .mobile-car-card-header,
.car-card-page .car-card-mobile-search-wrap {
    display: none;
}
.car-card-page .results-header.results-toolbar.car-card-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0px;
    margin-bottom: 10px;
    border-bottom: none;
}
.car-card-page .car-card-toolbar .results-toolbar-filters {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
}
.car-card-page .car-card-toolbar .toolbar-company-select {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: #374151;
    max-width: 200px;
}
.car-card-page .car-card-toolbar .result-count {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 13px;
    color: #6b7280;
    background: #f9fafb;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
}
.car-card-page .insurance-group {
    display: none;
}
.car-card-page .insurance-group.visible {
    display: block;
    margin-bottom: 20px;
}
/* 보험사 그룹 머리(구 .insurance-header + insu_link_hub_sens 대시보드 톤 통합) */
body.insu-link-app.car-card-page .insurance-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: var(--hub-sens-paper);
    border: 1px solid var(--hub-sens-line);
    border-left: 4px solid var(--hub-sens-accent);
}
.car-card-page .insurance-logo {
    width: 100px;
    height: 35px;
    object-fit: contain;
    border-radius: 8px;
    background: #ffffff00;
}
.car-card-page .insurance-name {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}
.car-card-page .card-count {
    font-size: 13px;
    color: #6b7280;
    margin-left: auto;
}
.car-card-page .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.car-card-page .card-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.car-card-page .card-item:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

@media (max-width: 1024px) {
    .car-card-page .main-content { margin-top: 50px !important; }
    .car-card-page .search-sidebar { display: none !important; }
    /* 카드무이자는 모바일에서도 pc-search-interface 사용(단일 컬럼). 공통 규칙 display:none 덮음 */
    .car-card-page .pc-search-interface { display: grid !important; grid-template-columns: 1fr !important; }
    .car-card-page .mobile-car-card-header.car-card-mobile-header {
        display: block !important;
        padding: 10px 0 12px;
        margin-bottom: 0px;
        background: transparent;
    }
    .car-card-page .insurance-group.visible {
        padding: 0;
    }
    .car-card-page .mobile-car-card-header-title h3 {
        font-size: 1.15rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0 0 2px 0;
    }
    .car-card-page .mobile-car-card-header-title p {
        font-size: 0.75rem;
        color: #6b7280;
        margin: 0;
    }
    .car-card-page .car-card-mobile-search-wrap {
        display: block !important;
        margin: 0 0 10px 0;
    }
    .car-card-page .car-card-mobile-search-input {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
    }
    .car-card-page .results-header.results-toolbar.car-card-toolbar {
        padding: 12px 0;
        margin-bottom: 0px !important;
    }
    .car-card-page .car-card-toolbar .results-toolbar-filters {
        flex-wrap: wrap;
    }
    .car-card-page .car-card-toolbar .toolbar-company-select {
        max-width: none;
        flex: 1;
        min-width: 0;
    }
    .car-card-page .results-content {
        padding: 0;
    }
    .car-card-page .cards-grid {
        grid-template-columns: 1fr;
    }
    .results-content {
        padding: 0px 0px !important;
    }
}

/* 페이지 로딩 시 스크롤 위치 고정 */
html {
    scroll-behavior: smooth;
}

/* 메인 래퍼 */
.main-wrapper {
    position: relative;
}

/* 히어로 섹션 */
.hero-section {
    padding: 10px 0 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-badge i {
    color: #fbbf24;
}

.hero-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
    line-height: 1.1;
}

.gradient-text {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
    line-height: 1.4;
}

/* 메인 컨텐츠 — 무이자 페이지만(번들 .main-content 누수 방지) */
.car-card-page .main-content {
    position: relative;
    min-height: 0;
    padding-top: 0;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15 20px;
}

/* PC 검색 인터페이스 - 2열 레이아웃 (높이 고정 제거 → 브라우저 스크롤) */
.pc-search-interface {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 20px;
    max-width: 1400px;
    margin: 15 0 0 0px;
    align-items: start;
}

/* 검색 사이드바 */
.search-sidebar {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: 25px;
    box-shadow: var(--shadow-xl);
    overflow-y: auto;
}

.search-sidebar-header {
    margin-bottom: 20px;
}

.header-with-back {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.back-btn {
    background: rgba(79, 70, 229, 0.1);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: var(--radius-md);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-normal);
    flex-shrink: 0;
    margin-top: 2px;
}

.back-btn:hover {
    background: rgba(79, 70, 229, 0.15);
    border-color: rgba(79, 70, 229, 0.3);
    transform: translateX(-2px);
}

.back-btn i {
    color: #4f46e5;
    font-size: 16px;
}

.header-text {
    flex: 1;
}

.header-text h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 8px;
    margin: 0 0 8px 0;
}

.header-text p {
    color: var(--gray-600);
    font-size: 14px;
    margin: 0;
}

/* 검색 폼 */
.search-form-container {
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

/* .form-group label: insu_link_app_prelude; .form-control: insu_link_app_prelude + 위 car-card-page 전용 */

.search-btn-primary {
    width: 100%;
    background: var(--car-gradient);
    color: var(--white);
    border: none;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.search-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* .search-results-area: insu_link_app_prelude + .car-card-page .search-results-area */

.results-header {
    padding: 20px 25px 15px 25px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    flex-shrink: 0;
}

.results-title-section h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.results-summary {
    display: flex;
    gap: 20px;
    align-items: center;
}

.summary-item {
    text-align: center;
}

.summary-item .label {
    font-size: 12px;
    color: var(--gray-500);
    display: block;
}

.summary-item .value {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
}

/* 결과 컨텐츠 */
.results-content {
    padding: 20px 0px;
}

/* 보험사별 카드 그룹 */
.insurance-group {
    margin-bottom: 20px;
    display: none;
}

.insurance-group.visible {
    display: block;
    animation: insuCarFadeInUp 0.5s ease forwards;
}

/* 이름 분리: 번들 epilogue 의 @keyframes fadeInUp(목록 카드)과 충돌 방지 */
@keyframes insuCarFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* .insurance-header: car_card.php 전용 — body.insu-link-app.car-card-page … 로만 둠(무접두·회색/주황 중복 제거) */

.insurance-logo {
    width: 140px;
    height: 40px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--white);
    padding: 4px;
}

.insurance-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gray-400);
    margin: 0;
}

.card-count {
    background: #e7e7e7;
    color: var(--white);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
}

/* 카드 그리드 */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 15px;
}

.card-item {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 16px;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--car-gradient);
    transform: scaleX(0);
    transition: var(--transition-normal);
}

.card-item:hover::before {
    transform: scaleX(1);
}

.card-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: #f59e0b;
}

/* .card-item .card-header: 구 무접두 + insu_link_hub_sens 대시보드 톤 통합 */
body.insu-link-app.car-card-page .card-item .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
    padding: 10px 14px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--hub-sens-line);
    background: rgba(61, 95, 106, 0.06);
    color: var(--hub-sens-ink);
}

.card-company {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-800);
    min-width: 0;
    flex: 1;
}

/* padding·color: prelude `body.insu-link-app main *` 보다 높게 — 단독 .card-months 는 패딩이 0으로 덮임 */
body.insu-link-app.car-card-page .card-item .card-months {
    background: var(--car-gradient);
    color: var(--white);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    flex-shrink: 0;
    white-space: nowrap;
    box-sizing: border-box;
}

.card-benefit {
    color: var(--gray-600);
    line-height: 1.6;
    font-size: 14px;
}

/* 검색 플레이스홀더 */
.search-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-500);
}

.search-placeholder i {
    font-size: 4rem;
    color: var(--gray-300);
    margin-bottom: 20px;
}

.search-placeholder h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.search-placeholder p {
    font-size: 14px;
}

/* 로딩 상태 */
.loading-state {
    text-align: center;
    padding: 60px 20px;
}

.loading-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loading-dots {
    display: flex;
    gap: 8px;
}

.loading-dots div {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f59e0b;
    animation: loading-bounce 1.4s ease-in-out infinite both;
}

.loading-dots div:nth-child(1) { animation-delay: -0.32s; }
.loading-dots div:nth-child(2) { animation-delay: -0.16s; }
.loading-dots div:nth-child(3) { animation-delay: 0s; }

@keyframes loading-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

.loading-animation p {
    color: var(--gray-600);
    font-size: 16px;
    margin: 0;
}

/* 반응형 디자인 */
@media (max-width: 1200px) {
    .pc-search-interface {
        grid-template-columns: 350px 1fr;
        gap: 20px;
    }
}

@media (max-width: 1024px) {
    .pc-search-interface {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .search-sidebar {
        position: static;
        margin-bottom: 20px;
    }
    
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 1024px) {
    .car-card-page .container {
        padding: 0;
        max-width: 100%;
    }
    
    .car-card-page .hero-section {
        display: none; /* 히어로 섹션 숨김 */
    }
    
    .car-card-page .main-content {
        min-height: 0;
        padding-top: 0;
    }
    
    /* pc-search-interface: 위쪽 @media(252)에서 grid — 여기서 display:none 금지(레이아웃 깨짐) */
    
    /* 모바일 헤더 표시 */
    .mobile-header {
        display: flex !important;
    }
    
    /* 모바일 인터페이스 활성화 */
    .mobile-search-interface {
        display: block !important;
    }
    
    /* 모바일 카드 컨테이너를 메인으로 표시 */
    .mobile-cards-container {
        display: flex !important;
        margin: 0;
        min-height: calc(100vh - 60px); /* 헤더 높이 제외 */
        background: var(--gray-50);
    }
    
    .mobile-insurance-group {
        margin-bottom: 16px !important;
    }
    
    /* 모바일 헤더 추가 */
    .mobile-header {
        position: sticky;
        top: 0;
        background: var(--white);
        z-index: 100;
        border-bottom: 1px solid var(--gray-200);
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .mobile-back-btn {
        background: none;
        border: none;
        font-size: 20px;
        color: var(--gray-600);
        cursor: pointer;
        padding: 8px;
        border-radius: var(--radius-md);
        transition: all 0.2s ease;
    }
    
    .mobile-back-btn:hover {
        background: var(--gray-100);
        color: var(--gray-800);
    }
    
    .mobile-header-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--gray-800);
        margin: 0;
    }
}

/* 스크롤바 스타일 */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* 모바일 검색 인터페이스 - 항상 표시 */
.mobile-search-interface {
    display: block;
}

/* 모바일 헤더 PC에서 숨김 */
.mobile-header {
    display: none;
}

/* 모바일 검색 트리거 버튼 PC에서 숨김 */
.mobile-search-trigger,
.mobile-floating-search {
    display: none;
}

/* 모바일에서 검색 트리거 버튼 표시 - JavaScript로 제어 */
@media (max-width: 1024px) {
    /* 동그라미 플로팅 검색 버튼만 표시 */
    .mobile-search-trigger {
        display: none !important;
    }
    
    .mobile-floating-search {
        /* JavaScript에서 직접 제어하므로 기본 스타일만 설정 */
        position: fixed;
        z-index: 9999;
    }
    
    /* 모바일에서 하단검색창 크기 최적화 */
    .mobile-search-bottom-sheet {
        max-height: 65vh;
    }
    
    .bottom-sheet-content {
        max-height: calc(65vh - 70px);
        padding: 16px;
        padding-bottom: 20px;
    }
    
    body.insu-link-app .mobile-search-form {
        gap: 12px;
        padding-bottom: 5px;
    }
}

/* 작은 모바일 화면 (480px 이하)에서 더 컴팩트하게 */
@media (max-width: 480px) {
    .mobile-search-bottom-sheet {
        max-height: 60vh;
    }
    
    .bottom-sheet-content {
        max-height: calc(60vh - 70px);
        padding: 14px;
        padding-bottom: 16px;
    }
    
    body.insu-link-app .mobile-search-btn {
        padding: 12px;
        margin-bottom: 4px;
    }
    
    /* 플로팅 버튼 더 크게 (작은 화면에서 터치 편의성) */
    .mobile-floating-search {
        width: 64px;
        height: 64px;
        font-size: 24px;
        bottom: 25px;
    }
}

/* 모바일 카드 레이아웃 PC에서 숨김 */
.mobile-cards-container {
    display: none;
}

/* 모바일 검색 오버레이 - 완전 투명 (아웃포커싱 없음) */
.mobile-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* 완전 투명 배경 */
    z-index: 9998;
    opacity: 0; /* 초기 상태: 숨김 */
    visibility: hidden; /* 초기 상태: 숨김 */
    transition: all 0.3s ease;
    pointer-events: none; /* 초기 상태: 클릭 불가 */
}

.mobile-search-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent; /* 활성화 시에도 투명 유지 */
}

.mobile-search-results {
    padding: 20px;
    overflow-y: auto;
    max-height: 100%;
    display: none; /* 사용하지 않는 요소 숨김 */
}

/* 모바일 검색 바텀시트 - 초기 상태 확실히 닫힌 상태로 설정 */
.mobile-search-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transform: translateY(100%); /* 초기 상태: 완전히 숨김 */
    transition: all 0.3s ease;
    max-height: 60vh;
    overflow-y: auto;
    will-change: transform;
    /* 초기 상태 확실히 설정 */
    display: block;
    visibility: visible;
    opacity: 1;
}

.mobile-search-bottom-sheet.active {
    transform: translateY(0); /* 활성화 시: 표시 */
}

/* 모바일 하단 검색바 헤더 - 아파트 실거래가 스타일 */
.bottom-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    position: relative;
}

.bottom-sheet-header::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(156, 163, 175, 0.4);
    border-radius: 2px;
}

.sheet-handle {
    display: none; /* 새로운 handle이 ::before로 대체됨 */
}

.bottom-sheet-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 18px;
}

.close-btn:hover {
    background: rgba(239, 246, 255, 0.8);
    color: #3b82f6;
}

.bottom-sheet-content {
    padding: 20px;
    padding-bottom: 30px;
    max-height: calc(70vh - 80px);
    overflow-y: auto;
}

/* 모바일 검색 폼 스타일 - 컴팩트한 크기 (insu_link 전용; bare .form-control 캐스케이드 노이즈 방지) */
body.insu-link-app .mobile-search-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 10px;
}

body.insu-link-app .mobile-search-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.insu-link-app .mobile-search-form .form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

body.insu-link-app .mobile-search-form .form-control {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid rgba(226, 232, 240, 0.8);
    border-radius: 12px;
    font-size: 16px;
    background: white;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

body.insu-link-app .mobile-search-form .form-control:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

body.insu-link-app .mobile-search-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 6px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.insu-link-app .mobile-search-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

body.insu-link-app .mobile-search-btn:active {
    transform: translateY(0);
}

body.insu-link-app .mobile-search-btn i {
    font-size: 18px;
}

/* 모바일 검색 트리거 버튼 - 숨김 (동그라미 버튼 사용) */
.mobile-search-trigger {
    display: none !important;
}

/* 모바일 플로팅 검색 버튼 - 메인 트리거 (아파트 실거래가 스타일) */
.mobile-floating-search {
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
    cursor: pointer;
    z-index: 99999; /* 최상위 레이어 */
    display: none; /* 기본 숨김 - JavaScript에서 제어 */
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
    min-width: 60px;
    min-height: 60px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.mobile-floating-search:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
}

.mobile-floating-search:active {
    transform: scale(0.95);
}

@media (max-width: 480px) {
    .mobile-floating-search {
        width: 64px;
        height: 64px;
        font-size: 24px;
    }
}

/* 모바일 카드 레이아웃 */
.mobile-cards-container {
    gap: 16px;
    flex-direction: column;
}

.mobile-insurance-group {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 16px;
    margin-bottom: 16px;
}

.mobile-insurance-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-200);
}

.mobile-insurance-logo {
    width: 120px;
    height: 40px;
    border-radius: var(--radius-md);
    object-fit: contain;
    flex-shrink: 0;
}

.mobile-insurance-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    flex: 1;
}

.mobile-card-count {
    font-size: 14px;
    color: var(--black);
    background: var(--gray-400);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    margin-right: 15px;
}

.mobile-cards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-card-item {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 14px;
    border: 1px solid var(--gray-200);
    transition: all 0.2s ease;
}

.mobile-card-item:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--gray-300);
}

.mobile-card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.mobile-card-company {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-800);
}

body.insu-link-app.car-card-page .mobile-card-months {
    font-size: 14px;
    color: var(--white);
    background: var(--car-gradient);
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.25;
    flex-shrink: 0;
    white-space: nowrap;
    box-sizing: border-box;
}

.mobile-card-benefit {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.4;
} 


/* 보험사 고객센터 - 통합 디자인 시스템 (PC: 영업포털 심플 구조) */

/* ===== CSS 변수 ===== */
:root {
    /* 메인 색상 - 고객센터 테마 (블루 계열) */
    --primary-color: #3d5f6a;
    --primary-dark: #2f4d56;
    --primary-light: #5a7a82;
    --accent-color: #264038;
    
    /* 강조 그라데이션 (슬레이트 틸) */
    --callcenter-gradient: linear-gradient(135deg, #3d5f6a 0%, #2f4d56 100%);
    
    /* 배경 (감성: 웜 페이퍼) */
    --bg-primary: #f5f3ef;
    --bg-card: rgba(255, 252, 250, 0.95);
    --sens-ink: #252a2e;
    --sens-muted: #5c6360;
    --sens-line: rgba(45, 55, 65, 0.12);
    --sens-accent: #3d5f6a;
    --sens-accent-dark: #2f4d56;
    
    /* 텍스트 */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    
    /* 그림자 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
    
    /* 레이아웃 */
    --sidebar-width: 380px;
    --border-radius: 12px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 32px;
}

/* * 리셋: insu_link_app_prelude.css */

/* body.unified-search-page · body.callcenter-page 배경: insu_link_app_prelude + insu_link_hub_sens */

.callcenter-page .main-content.callcenter-main {
    padding: 20px 0 24px 0;
    margin-top: 70px;
}
.callcenter-page .main-wrapper {
    min-height: auto;
    position: relative;
    z-index: 1;
}
.callcenter-page .container.callcenter-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
.callcenter-page .pc-search-interface {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    width: 100%;
    min-width: 0;
    align-items: start;
}
.callcenter-page .search-sidebar {
    background: #fffcfa;
    border: 1px solid var(--sens-line);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(30, 35, 40, 0.06);
    position: sticky;
    top: 20px;
    height: fit-content;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.callcenter-page .search-sidebar-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}
.callcenter-page .header-text h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}
.callcenter-page .header-text p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}
/* 뒤로가기 버튼: 심플 */
.callcenter-page .back-btn {
    background: linear-gradient(135deg, var(--sens-accent) 0%, var(--sens-accent-dark) 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.callcenter-page .back-btn:hover {
    background: var(--sens-accent-dark);
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
body.insu-link-app.callcenter-page .form-control {
    padding: 10px 14px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}
body.insu-link-app.callcenter-page .form-control:focus {
    border-color: var(--sens-accent);
    box-shadow: 0 0 0 3px rgba(61, 95, 106, 0.12);
}
/* 보험사 유형(사이드바): insu_link_app_prelude .filter-btn 보다 구체도 높게 — 고객센터 톤 유지 */
/* 사이드바 세로필터(.filter-buttons) — 툴줄 filter-btn 과 분리 */
body.insu-link-app .callcenter-page .filter-buttons .filter-btn {
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s ease, border-color 0.2s ease;
}
body.insu-link-app .callcenter-page .filter-buttons .filter-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}
body.insu-link-app .callcenter-page .filter-buttons .filter-btn.active {
    background: var(--sens-accent);
    border-color: var(--sens-accent);
    color: #fff;
}
/* PC: 사이드바 필터 1줄 */
.callcenter-page .search-sidebar .filter-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
}
.callcenter-page .search-sidebar .filter-btn {
    width: auto;
    flex: 1;
    min-width: 0;
    justify-content: center;
}
/* .search-results-area: insu_link_app_prelude */
/* .insurance-card(고객센터): insu_link_app_epilogue (body.insu-link-app.callcenter-page) */
.callcenter-page .results-header.results-toolbar {
    padding: 0 0 12px 0;
    margin-bottom: 12px;
    border-bottom: none;
}
.callcenter-page .company-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
}
.callcenter-page .company-type {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 6px;
}
/* .result-count: insu_link_app_epilogue(.insu-link-results-toolbar > …) + 레거시 무접두 제거 */

/* ===== 메인 래퍼 ===== */
.main-wrapper {
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* ===== 히어로 섹션 ===== */
.hero-section {
    text-align: center;
    padding: 10px 0px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--callcenter-gradient);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.hero-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: rgb(0, 0, 0);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1.2;
}

.gradient-text {
    background: var(--callcenter-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1rem;
    color: rgba(105, 105, 105, 0.9);
    line-height: 1.5;
    margin: 0;
}

/* ===== 메인 컨텐츠 — 고객센터만(번들 .main-content 누수 방지) ===== */
.callcenter-page .main-content {
    padding: 35px 0 20px 0;
    margin-top: 34px; /*헤더공간맞추려고 요소보고 강제로 맞춤 */
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.pc-search-interface {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

/* ===== 검색 사이드바 ===== */
.search-sidebar {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: fit-content;
    max-height: 80vh;
    overflow-y: auto;
    position: sticky;
    top: var(--spacing-md);
}

.search-sidebar-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.header-with-back {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--callcenter-gradient);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.back-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.header-text h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.header-text p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ===== 검색 폼 ===== */
.search-form-container {
    margin-bottom: var(--spacing-md);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

/* .form-label / .form-group label: insu_link_app_prelude */
/* .form-control: insu_link_app_prelude (body.insu-link-app .form-control) */

.form-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-hint i {
    color: var(--primary-color);
    font-size: 12px;
}

/* filter-buttons / .filter-btn: insu_link_app_prelude.css (body.insu-link-app) */
/* .search-results-area 기본: insu_link_app_prelude */

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.results-title-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.results-title-section h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.results-title-section h3 i {
    color: var(--primary-color);
}

/* 모바일 백버튼 */
.mobile-back-btn {
    display: none;
}

/* ===== 보험사 그리드 ===== */
.insurance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-md);
    padding: 0;
}

/* .insurance-card: insu_link_app_epilogue (insu-link-app) */
/* .insurance-card .card-header: insu_link_app_prelude */

/* .company-info: insu_link_app_prelude (body.insu-link-app .insurance-card .card-company / callcenter .card-header) */

.company-logo {
    width: 100px;
    height: 60px;
    border-radius: 8px;
    object-fit: contain;
    background: white;
    flex-shrink: 0;
}

/* .company-name / .company-name2 (카드 헤더): insu_link_app_prelude */

.company-type {
    background: var(--callcenter-gradient);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.contact-info {
    margin-bottom: var(--spacing-sm);
}

.phone-link {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none;
}

.phone-link:hover {
    color: var(--primary-dark) !important;
    text-decoration: underline !important;
}

.header-ars-button {
    background: var(--callcenter-gradient);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    flex-shrink: 0;
}

.header-ars-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--accent-color) 100%);
}

.header-ars-button i {
    font-size: 14px;
}

/* ===== 카드 바디 ===== */
.card-body {
    flex: 1;
    margin-bottom: var(--spacing-md);
}

/* .info-row: 고객센터 .insurance-card 전용(방문 .center-card 와 충돌 방지) */
.callcenter-page .insurance-card .info-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.callcenter-page .insurance-card .info-row:last-child {
    border-bottom: none;
}

.callcenter-page .insurance-card .info-row i {
    width: 20px;
    color: var(--primary-color);
    font-size: 14px;
    text-align: center;
    flex-shrink: 0;
}

.callcenter-page .insurance-card .info-row a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    font-size: 14px;
}

.callcenter-page .insurance-card .info-row a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.callcenter-page .insurance-card .info-row span {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.4;
}

/* ===== ARS 버튼 ===== */
.ars-button {
    width: 100%;
    padding: 10px 16px;
    background: var(--callcenter-gradient);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.ars-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--accent-color) 100%);
}

.ars-button i {
    font-size: 16px;
}

/* @keyframes fadeInUp · :nth-child 지연: insu_link_app_epilogue */

/* ===== 우편물 주소 버튼 ===== */
.postal-address-btn {
    background: linear-gradient(135deg, var(--sens-accent) 0%, var(--sens-accent-dark) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(45, 55, 65, 0.18);
}

.postal-address-btn:hover {
    background: linear-gradient(135deg, var(--sens-accent-dark) 0%, #1e353c 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(45, 55, 65, 0.22);
}

.postal-address-btn:active {
    transform: translateY(0);
}

.postal-address-btn i {
    font-size: 14px;
}

/* 고객센터 전용: 우편물 주소 버튼 심플 */
.callcenter-page .postal-address-btn {
    background: #fff;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.callcenter-page .postal-address-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    transform: none;
    box-shadow: none;
}
.callcenter-page .postal-address-btn i {
    color: #6b7280;
}

/* ===== 우편물 주소 모달 (심플) ===== */
.postal-modal {
    display: none;
    position: fixed;
    z-index: 10050;
    inset: 0;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.45);
}

.postal-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.postal-modal-overlay {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.postal-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.postal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafafa;
}

.postal-modal-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
}

.postal-modal-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
}

.postal-modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.postal-modal-body {
    padding: 14px 16px 16px;
}

.postal-address-info {
    margin-bottom: 14px;
}

.postal-zipcode {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 8px;
}

.postal-address {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #1f2937;
    white-space: pre-wrap;
    word-break: keep-all;
}

.postal-actions {
    display: flex;
    justify-content: flex-end;
}

.postal-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
}

.postal-copy-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

@media (max-width: 1024px) {
    .postal-modal-content {
        max-width: none;
    }

    .postal-copy-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== 모달 스타일 ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background: white;
    margin: 5% auto;
    padding: 0;
    border-radius: var(--border-radius);
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: modalFadeIn 0.3s ease-out;
}

.modal-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-weight: 700;
}

.close-modal, .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.close-modal:hover, .close-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
}

.modal-body {
    padding: var(--spacing-md);
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 반응형 디자인 ===== */
@media (max-width: 1024px) {
    .pc-search-interface {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .search-sidebar {
        order: 2;
        position: static;
        max-height: none;
    }
    
    .search-results-area {
        order: 1;
    }
}

@media (max-width: 1024px) {
    .callcenter-page .main-content {
        padding: 0px;
    }

    .card-body {
        margin-bottom: 0px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .insurance-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        margin-top: 0px !important;
    }
    
    .callcenter-page .insurance-card {
        padding: var(--spacing-sm);
    }
    
    .company-logo {
        width: 80px;
        height: 50px;
    }
    
    .company-name2 {
        font-size: 16px;
    }
    
    .header-ars-button {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .modal-content {
        margin: 10% 5%;
        max-width: none;
    }
}

/* ===== 추가 유틸리티 ===== */
/* .result-count: epilogue+hub(무접두 제거) */

.no-results, .empty-state {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-muted);
}

.no-results i, .empty-state i {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.no-results h4, .empty-state h4 {
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.no-results p, .empty-state p {
    font-size: 14px;
    line-height: 1.6;
}

/* ===== 고객센터 모바일 (영업포털과 동일 패턴: 상단 헤더 + 툴바, 하단 시트 제거) ===== */

/* 모바일 헤더: PC에서는 숨김 */
.callcenter-page .mobile-callcenter-header.callcenter-mobile-header {
    display: none;
}

/* 모바일 검색 래퍼: PC에서는 숨김 */
.callcenter-page .callcenter-mobile-search-wrap {
    display: none;
}

/* 요약 툴바(3필터+건수) 레이아웃/크기: insu_link_app_epilogue.css (insu-link-results-toolbar) — 여기 4칸 grid 제거 */

/* 1024px 이하 (태블릿·모바일) */
@media (max-width: 1024px) {
    .callcenter-page .main-content {
        margin-top: 50px !important;
    }
    
    /* 모바일 상단 헤더 */
    .callcenter-page .mobile-callcenter-header.callcenter-mobile-header {
        display: block !important;
        padding: 10px 0 12px;
        margin-bottom: 0px;
        background: transparent;
    }
    
    .callcenter-page .mobile-callcenter-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        max-width: 100%;
    }
    
    .callcenter-page .mobile-callcenter-header-title h3 {
        font-size: 1.15rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0 0 2px 0;
        line-height: 1.2;
    }
    
    .callcenter-page .mobile-callcenter-header-title p {
        font-size: 0.75rem;
        color: #6b7280;
        margin: 0;
    }
    
    /* 모바일 검색 입력 */
    .callcenter-page .callcenter-mobile-search-wrap {
        display: block !important;
        margin-bottom: 10px;
    }
    
    .callcenter-page .callcenter-mobile-search-input {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        border: 1px solid var(--sens-line);
        border-radius: 8px;
        background: #fffcfa;
    }
    
    .callcenter-page .callcenter-mobile-search-input:focus {
        outline: none;
        border-color: var(--sens-accent);
    }
    
    /* 좌측 사이드바 숨김 */
    .callcenter-page .search-sidebar {
        display: none !important;
    }
    
    .callcenter-page .pc-search-interface {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
    }
    
    .callcenter-page .search-results-area {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .container {
        padding: 0;
    }
    
    .hero-section {
        padding: 20px 0 5px 0;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-description {
        font-size: 16px;
    }
    
    .insurance-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 15px;
    }
    
    .callcenter-page .insurance-card {
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
    
    body.insu-link-app.callcenter-page .insurance-card .card-header {
        flex-direction: row;
        align-items: center;
        margin-bottom: 1px;
    }
    
    body.insu-link-app.callcenter-page .insurance-card .card-header .company-name,
    body.insu-link-app.callcenter-page .insurance-card .card-header .company-name2 {
        font-size: 18px;
        margin: 0;
    }
    
    .company-type {
        background: rgba(61, 95, 106, 0.12);
        color: var(--primary-color);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }
    
    .contact-info {
        gap: 12px;
    }
    
    .callcenter-page .insurance-card .info-row {
        padding: 5px 0;
        border-bottom: 1px solid #f1f5f9;
    }
    
    .contact-info {
        margin-bottom: 0;
    }
    
    .callcenter-page .insurance-card .info-row:last-child {
        border-bottom: none;
    }
    
    .callcenter-page .insurance-card .info-row i {
        width: 20px;
        text-align: center;
        margin-right: 12px;
        color: var(--primary-color);
    }
    
    .phone-link {
        color: var(--primary-color);
        text-decoration: none;
        font-weight: 600;
        font-size: 16px;
    }
    
    .phone-link:hover {
        text-decoration: underline;
    }
    
    .results-header.results-toolbar {
        border-bottom: none;
        margin-bottom: 10px;
    }
}

/* 480px 이하 작은 모바일 */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-description {
        font-size: 14px;
    }
    
    .callcenter-page .insurance-card {
        padding: 16px;
    }
    
    body.insu-link-app.callcenter-page .insurance-card .card-header .company-name,
    body.insu-link-app.callcenter-page .insurance-card .card-header .company-name2 {
        font-size: 16px;
    }
}

/* insu_services_dashboard.css 이후 로드: 상단 5탭·모바일 바 감성 톤 (고객센터 전용) */
.callcenter-page .insu-services-dashboard {
    border-bottom-color: var(--sens-line);
}
.callcenter-page .insu-services-dashboard-mobile {
    background: transparent;
    border-bottom: none;
}
/* .insu-dashboard-btn: insu_link_app_epilogue */
.callcenter-page .insu-link-mobile-back,
.callcenter-page .insu-link-mobile-fchome {
    background: #fffcfa;
    border-color: var(--sens-line);
    color: var(--sens-ink, #252a2e);
}
.callcenter-page .insu-link-mobile-back:hover,
.callcenter-page .insu-link-mobile-fchome:hover {
    background: rgba(61, 95, 106, 0.06);
    border-color: rgba(61, 95, 106, 0.2);
}

/* 대시보드 .insu-dashboard-page .back-btn(회색)와 공통 :root i 색·가이드 #3b82f6 를 이길: 고객센터 사이드바 전용 */
body.callcenter-page.insu-dashboard-page .search-sidebar button.back-btn,
body.callcenter-page.insu-dashboard-page .search-sidebar button.back-btn i {
    color: #fff;
}
body.callcenter-page.insu-dashboard-page .search-sidebar button.back-btn {
    background: linear-gradient(135deg, var(--sens-accent) 0%, var(--sens-accent-dark) 100%);
    border: none;
    color: #fff;
}
body.callcenter-page.insu-dashboard-page .search-sidebar button.back-btn:hover {
    background: var(--sens-accent-dark);
    color: #fff;
    border: none;
}
body.callcenter-page.insu-dashboard-page .search-sidebar button.back-btn:hover i {
    color: #fff;
}
body.callcenter-page .search-sidebar .form-label i,
body.callcenter-page .search-sidebar .form-hint i {
    color: var(--sens-accent);
}
body.callcenter-page .search-sidebar .insu-link-guide .info-card-header .info-icon i,
body.callcenter-page .search-sidebar .insu-link-guide .info-card-header h5 {
    color: var(--sens-accent);
}
body.callcenter-page .search-sidebar .insu-link-guide .info-content li::before {
    color: var(--sens-accent);
}
body.callcenter-page .search-sidebar .insu-link-guide .info-content strong {
    color: var(--sens-ink, #252a2e);
}

/* ------------------------------------------------------------------
   epilogue — 병합 본 뒤에도 산세리프·정렬 유지 (헤더 전역 h1~3 등 덮어쓰기)
   ------------------------------------------------------------------ */
body.insu-link-app h1,
body.insu-link-app h2,
body.insu-link-app h3,
body.insu-link-app h4,
body.insu-link-app h5 {
	font-family: var(--ins-font, "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif);
	font-style: normal;
	font-weight: inherit;
}

/* ------------------------------------------------------------------
   고객센터 = 기준 — 5탭 대시보드·사이드바 첫행·모바일 스트립 색·높이 전역 통일
   (insu_services_dashboard 기본 #3b82f6·높이 불일치·border 두께 차이를 말단에서 정리)
   ------------------------------------------------------------------ */
body.insu-link-app.insu-dashboard-page .search-sidebar-header {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ins-sens-line, rgba(45, 55, 65, 0.12));
}

body.insu-link-app.insu-dashboard-page .header-with-back {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}

body.insu-link-app.insu-dashboard-page .insu-services-dashboard {
	border-bottom: 1px solid var(--ins-sens-line, rgba(45, 55, 65, 0.12));
	margin-bottom: 16px;
	padding-bottom: 16px;
	gap: 6px;
}

body.insu-link-app.insu-dashboard-page a.insu-dashboard-btn,
body.insu-link-app.insu-dashboard-page .insu-dashboard-btn {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 42px;
	padding: 10px 12px;
	border-radius: 8px;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.25;
	background: var(--ins-sens-paper, #fffcfa);
	border: 1px solid var(--ins-sens-line, rgba(45, 55, 65, 0.12));
	color: var(--ins-sens-ink, #252a2e);
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.insu-link-app.insu-dashboard-page a.insu-dashboard-btn:hover,
body.insu-link-app.insu-dashboard-page .insu-dashboard-btn:hover {
	background: rgba(61, 95, 106, 0.08);
	border-color: rgba(61, 95, 106, 0.22);
	color: var(--ins-sens-ink, #252a2e);
}

body.insu-link-app.insu-dashboard-page a.insu-dashboard-btn.active,
body.insu-link-app.insu-dashboard-page .insu-dashboard-btn.active {
	background: var(--ins-dash-grad, linear-gradient(135deg, #3d5f6a 0%, #2f4d56 100%));
	border-color: var(--ins-sens-accent-dark, #2f4d56);
	color: #fff;
}

body.insu-link-app.insu-dashboard-page .insu-dashboard-btn i {
	width: 18px;
	text-align: center;
	flex-shrink: 0;
	font-size: 1em;
	line-height: 1;
}

body.insu-link-app.insu-dashboard-page .insu-services-dashboard-mobile {
	background: transparent;
	border-bottom: none;
	/* 좌우: search-results-area padding(15px)만 — 내부는 0으로 가로 확보 */
	padding: 10px 0;
	margin: 0 0 12px 0;
	gap: 6px;
	align-items: stretch;
	box-sizing: border-box;
}

body.insu-link-app.insu-dashboard-page .insu-services-dashboard-mobile .insu-dashboard-btn {
	/* 2줄 라벨(3+2 등) + 아이콘 — min-height 44는 한 줄에만 맞음 */
	min-height: 56px;
	justify-content: center;
	white-space: normal;
	align-items: center;
}

body.insu-link-app.insu-dashboard-page .insu-services-dashboard-mobile .insu-dashboard-btn .insu-dashboard-label {
	display: block;
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
	word-break: keep-all;
	white-space: normal;
}

/* 모바일 상단 뒤로/FC: 고객센터 톤과 동일한 면·테두리 */
body.insu-link-app.insu-dashboard-page a.insu-link-mobile-back,
body.insu-link-app.insu-dashboard-page a.insu-link-mobile-fchome {
	box-sizing: border-box;
	min-height: 40px;
	align-items: center;
	background: var(--ins-sens-paper, #fffcfa);
	border: 1px solid var(--ins-sens-line, rgba(45, 55, 65, 0.12));
	color: var(--ins-sens-ink, #252a2e);
}

body.insu-link-app.insu-dashboard-page a.insu-link-mobile-back:hover,
body.insu-link-app.insu-dashboard-page a.insu-link-mobile-fchome:hover {
	background: rgba(61, 95, 106, 0.06);
	border-color: rgba(61, 95, 106, 0.2);
}

@media (max-width: 1024px) {
	/* insu_services_dashboard 가 padding !important 로 두께 달리 쓰는 것 말단 정리 */
	body.insu-link-app.insu-dashboard-page .insu-services-dashboard.insu-services-dashboard-mobile {
		padding: 10px 0 !important;
		background: transparent !important;
		border-bottom: none !important;
	}
}

/* ------------------------------------------------------------------
   방문센터 인라인 검색: main 박스 안 셀렉트 터치·가독성 (고특이도 유지, 푸터와 무관)
   ------------------------------------------------------------------ */
body.insu-link-app.visit-centers-page .visit-centers-mobile-inline-search .visit-inline-input,
body.insu-link-app.visit-centers-page .visit-centers-mobile-inline-search .visit-inline-select {
	box-sizing: border-box;
	min-height: 44px;
	padding: 12px 10px;
	font-size: 14px;
	line-height: 1.35;
	font-family: var(--ins-font, inherit);
	border: 2px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	color: var(--hub-sens-ink, #252a2e);
	appearance: auto;
}

body.insu-link-app.visit-centers-page .visit-centers-mobile-inline-search .visit-inline-input-wrap .visit-inline-input {
	width: 100%;
	padding: 12px 40px 12px 10px;
}

body.insu-link-app.visit-centers-page .visit-centers-mobile-inline-search .visit-inline-input:focus,
body.insu-link-app.visit-centers-page .visit-centers-mobile-inline-search .visit-inline-select:focus {
	outline: none;
	border-color: var(--hub-sens-accent, #3d5f6a);
	box-shadow: 0 0 0 3px rgba(61, 95, 106, 0.12);
}

/* ------------------------------------------------------------------
   5서비스 공통 마크업(insu-link-mobile-hero 등) — 청구·약관 전용 클래스 없이도 고객센터와 동일 레이아웃
   ------------------------------------------------------------------ */
body.insu-link-app.insu-dashboard-page .insu-link-mobile-hero {
	display: none;
}

body.insu-link-app.insu-dashboard-page .insu-link-mobile-search-wrap {
	display: none;
}

/* 요약 툴줄(고객센터·청구·약관 등): 3필터 + result-count — 번들 epilogue가 최종(레거시 4칸 grid·중복 .filter-btn 제거는 prelude+참고문서 소스) */
body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 6px;
	padding: 0;
	margin: 0 0 12px 0;
	border-bottom: none;
}

/* 좌: 필터 영역(3버튼 또는 셀렉트) — flex 확장. 우: result-count(형제) */
body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar .results-toolbar-filters {
	display: flex;
	align-items: stretch;
	gap: 4px;
	flex-wrap: nowrap;
	flex: 1;
	min-width: 0;
}

/* 고객센터·청구·약관: 아이콘+2글자 × 3칸(4등분 그리드 아님) */
body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar .insu-link-toolbar-filters-3 {
	display: flex;
	gap: 3px;
	min-width: 0;
}

body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar .insu-link-toolbar-filters-3 .filter-btn.results-filter-btn {
	flex: 1;
	min-width: 0;
}

body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar > .result-count {
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	justify-content: flex-end;
	flex: 0 0 auto;
	max-width: 38%;
	margin-left: auto;
	/* .filter-btn.results-filter-btn(min-height:36)와 맞춤 — 모바일(32)은 하단 @media */
	min-height: 36px;
	padding: 6px 10px;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	text-align: right;
	white-space: normal;
	box-sizing: border-box;
	/* 필터 버튼(3칸)과 동일한 칩 느낌 — 고객센터·청구·약관·방문센터 공통 */
	background: rgba(61, 95, 106, 0.12);
	border: 1px solid var(--hub-sens-line, rgba(45, 55, 65, 0.12));
	border-radius: 8px;
	color: var(--hub-sens-accent, #3d5f6a);
}

body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar .filter-btn.results-filter-btn {
	background: var(--ins-sens-paper, #fffcfa);
	border: 1px solid var(--ins-sens-line, rgba(45, 55, 65, 0.12));
	border-radius: 8px;
	padding: 0 3px;
	min-height: 36px;
	/* display: inline-flex; — 툴바 칩은 block flex로 정렬(콘솔과 동일 동작) */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	box-sizing: border-box;
	font-size: 11px;
	font-weight: 500;
	color: #374151;
	white-space: nowrap;
}

body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar .insu-link-toolbar-filters-company {
	flex: 1;
	min-width: 0;
}

body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar .insu-link-toolbar-filters-company .toolbar-company-select {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar.visit-centers-toolbar-count-only {
	justify-content: flex-start;
}

body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar.visit-centers-toolbar-count-only > .result-count {
	margin-left: 0;
	max-width: 100%;
	justify-content: flex-start;
	text-align: left;
	font-size: 11px;
}

body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar .filter-btn.results-filter-btn i {
	flex-shrink: 0;
	font-size: 0.9em;
}

body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar .filter-btn.results-filter-btn:hover {
	background: #f9fafb;
	border-color: #d1d5db;
}

body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar .filter-btn.results-filter-btn.active {
	background: var(--ins-sens-accent, #3d5f6a);
	color: #fff;
	border-color: var(--ins-sens-accent, #3d5f6a);
}

body.insu-link-app.insu-dashboard-page .insu-link-mobile-search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	border: 2px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
}

body.insu-link-app.insu-dashboard-page .insu-link-mobile-search-input:focus {
	border-color: var(--ins-sens-accent, #3d5f6a);
	box-shadow: 0 0 0 3px rgba(61, 95, 106, 0.12);
	outline: none;
}

@media (max-width: 1024px) {
	body.insu-link-app.insu-dashboard-page .main-content {
		margin-top: 50px !important;
	}

	/* 청구·약관 등 구형 페이지별 !important·좌우 0 패딩을 고객센터와 동일하게 */
	body.insu-link-app.insu-dashboard-page .search-results-area {
		padding: 0 15px 15px 15px !important;
	}

	body.insu-link-app.insu-dashboard-page .insu-link-mobile-hero {
		display: block !important;
		padding: 10px 0 12px !important;
		margin-bottom: 0 !important;
		background: transparent !important;
	}

	body.insu-link-app.insu-dashboard-page .insu-link-mobile-header-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		max-width: 100%;
	}

	body.insu-link-app.insu-dashboard-page a.insu-link-mobile-back {
		display: inline-flex;
		width: 40px;
		height: 40px;
		min-width: 40px;
		padding: 0;
		justify-content: center;
		text-decoration: none;
	}

	body.insu-link-app.insu-dashboard-page .insu-link-mobile-hero-title h3 {
		font-size: 1.15rem;
		font-weight: 700;
		color: #1f2937;
		margin: 0 0 2px 0;
		line-height: 1.2;
	}

	body.insu-link-app.insu-dashboard-page .insu-link-mobile-hero-title p {
		font-size: 0.75rem;
		color: #6b7280;
		margin: 0;
	}

	body.insu-link-app.insu-dashboard-page .insu-link-mobile-search-wrap {
		display: block !important;
		margin: 0 0 10px 0 !important;
	}

	/* 5서비스 모바일: 히어로·검색 — 좌우 패딩은 search-results-area(15px)에만. 방문센터 인라인 폼은 동일 여백 */
	body.insu-link-app.visit-centers-page .visit-centers-mobile-inline-search {
		margin: 0 0 10px 0;
	}

	/* 결과 툴바: 3필터 + result-count 형제 — 좁은 폭은 더 작은 글자 */
	body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar {
		gap: 4px;
		margin: 0 0 8px 0;
	}

	body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar .results-toolbar-filters {
		gap: 2px;
	}

	body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar .insu-link-toolbar-filters-3 {
		gap: 2px;
	}

	body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar .filter-btn.results-filter-btn {
		padding: 0 2px;
		font-size: 13px;
		/* min-height: 32px; */
	}

	body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar .filter-btn.results-filter-btn i {
		font-size: 0.85em;
	}

	/* 우측 뱃지: 전체/생명/손해와 세로 정렬 */
	body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar > .result-count {
		font-size: 13px;
		max-width: 36%;
		min-height: 32px;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	body.insu-link-app.insu-dashboard-page .insu-link-results-toolbar.visit-centers-toolbar-count-only > .result-count {
		font-size: 13px;
		min-height: 32px;
	}

	/* 자동차 무이자: 셀렉트(전체 보험사) 높이 = 우측 result-count(위 공통 32px) */
	body.insu-link-app.car-card-page .car-card-toolbar .toolbar-company-select {
		min-height: 32px;
	}
}

/* 모바일 하단 여백 — money/terms 레거시에 각각 있던 body.unified-search-page 중복 제거 */
@media (max-width: 1024px) {
	body.insu-link-app.unified-search-page {
		padding-bottom: 80px;
	}
}

/* 무이자 할부: PC 우측 툴바의「전체 보험사」는 좌측 사이드바와 동일 역할 — 데스크톱에서만 숨김(모바일은 사이드 접힘 시 필요) */
@media (min-width: 1025px) {
	body.insu-link-app.car-card-page .car-card-toolbar .toolbar-company-select {
		display: none !important;
	}

	body.insu-link-app.car-card-page .car-card-toolbar .insu-link-toolbar-filters-company {
		width: 100%;
		justify-content: flex-end;
		display: flex;
	}
}

/* ------------------------------------------------------------------
   목록 카드 — 내부 패딩 약화 (5서비스 공통)
   ------------------------------------------------------------------ */
body.insu-link-app.insu-dashboard-page .insurance-card,
body.insu-link-app.insu-dashboard-page .center-card,
body.insu-link-app.insu-dashboard-page .card-item {
	padding: 10px 12px;
}

body.insu-link-app.callcenter-page.insu-dashboard-page .insurance-card .card-header {
	padding-bottom: 8px;
	margin-bottom: 8px;
}

body.insu-link-app.insu-dashboard-page .insurance-card .info-row,
body.insu-link-app.insu-dashboard-page .center-card .info-row {
	padding-top: 6px;
	padding-bottom: 6px;
}

/* ------------------------------------------------------------------
   목록 .insurance-card — fadeInUp·nth-child·고객센터/청구·약관 셸 (레거시 3중 정의 제거, @keyframes 는 번들 말단 1회)
   ------------------------------------------------------------------ */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

body.insu-link-app .insurance-card:nth-child(1) {
	animation-delay: 0.1s;
}
body.insu-link-app .insurance-card:nth-child(2) {
	animation-delay: 0.2s;
}
body.insu-link-app .insurance-card:nth-child(3) {
	animation-delay: 0.3s;
}
body.insu-link-app .insurance-card:nth-child(4) {
	animation-delay: 0.4s;
}
body.insu-link-app .insurance-card:nth-child(5) {
	animation-delay: 0.5s;
}
body.insu-link-app .insurance-card:nth-child(6) {
	animation-delay: 0.6s;
}

/* 고객센터: 웜페이퍼 박스 + 입장 애니 (구 .callcenter-page .insurance-card + 구 일반 .insurance-card) */
body.insu-link-app.callcenter-page .insurance-card {
	background: var(--ins-sens-paper, #fffcfa);
	border: 1px solid var(--ins-sens-line, rgba(45, 55, 65, 0.12));
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(30, 35, 40, 0.06);
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
	height: auto;
	min-height: 0;
	animation: fadeInUp 0.6s ease-out forwards;
	opacity: 0;
	transform: translateY(30px);
}
body.insu-link-app.callcenter-page .insurance-card:hover {
	border-color: rgba(61, 95, 106, 0.22);
	box-shadow: 0 8px 24px rgba(30, 35, 40, 0.1);
	transform: translateY(-4px);
}

/* 청구·약관: 일반 .insurance-card(그리드) 상에서 입장 애니만 (형태는 각 페이지 .money-paper-page / .terms-page 규칙) */
body.insu-link-app.money-paper-page .insurance-card,
body.insu-link-app.money-paper-page main.money-paper-main .insurance-card,
body.insu-link-app.terms-page .insurance-card,
body.insu-link-app.terms-page main.terms-main .insurance-card {
	animation: fadeInUp 0.6s ease forwards;
	opacity: 0;
}

/* 대시보드 청·약 카드 면/테 — insu_link_hub_sens 와 money CSS 중복 제거(한곳만) */
body.insu-link-app.insu-dashboard-page.money-paper-page .insurance-card,
body.insu-link-app.insu-dashboard-page.money-paper-page main.money-paper-main .insurance-card,
body.insu-link-app.insu-dashboard-page.terms-page .insurance-card,
body.insu-link-app.insu-dashboard-page.terms-page main.terms-main .insurance-card {
	background: var(--hub-sens-paper, #fffcfa);
	border: 1px solid var(--hub-sens-line, rgba(45, 55, 65, 0.12));
}