/* CP 전용 보정 / 사용 화면: 메인·복제 레이어 / 원본: /api/css의 공통·상세·메인 스타일.
 * 원본 복제 CSS는 유지하고, 웹뷰·iframe에서 달라지는 부분만 이 파일에서 보정한다.
 */

/* CP 메인: 로고·하단 메뉴 없이 현재 화면(외부 iframe 포함)의 남은 높이를 차량 카드에 배분한다.
 * 동적 뷰포트 높이를 사용해 모바일 주소창이나 화면 회전 후에도 페이징이 화면 하단에 맞게 유지된다. */
body.cp-main {display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; padding-bottom: 0; overflow: hidden;}
.cp-main > .cp-navigation, .cp-main .cp-status {flex: none;}
.cp-main #container {flex: 1; min-height: 0; padding-bottom: 0; overflow: hidden;}
.cp-main #container > .mycar, .cp-main .mycar > .column {flex: 1; min-height: 0; height: auto;}
.cp-main .mycar .column .bx-wrapper {display: flex; flex-direction: column; flex: 1; min-height: 0; height: auto; margin-bottom: 0;}
/* CP 차량 카드: 내용이 적으면 화면을 채우고, 긴 상태 안내는 카드 안에서만 스크롤해 페이징을 밀어내지 않는다. */
.cp-main .mycar .mycarlist {flex: 1; min-height: 0; height: auto !important; margin-bottom: 0; overflow: hidden;}
.cp-main .mycar .mycarlist > li {height: 100%; overflow-y: auto; overscroll-behavior-y: contain;}
.cp-main .mycar .mycarlist > li > * {flex-shrink: 0;}
/* CP 페이징: 카드 아래 원본 높이를 유지하며 홈 인디케이터가 있는 기기에서는 안전 영역만 추가한다. */
.cp-main .mycar .bx-wrapper .pager_wrap {flex: none; height: calc(1.5rem + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);}
.cp-status {padding: 1rem; text-align: center;}
.cp-hidden {display: none !important;}
.cp-error {color: #b42318;}

/* CP 탭 없는 상세·탁송·진단서: 닫기만 있는 헤더는 본문 안에 중첩된 경우에도 높이를 없앤다.
 * 닫기는 우측 상단에 겹쳐 표시하고, 실제 탭·제목·하위 메뉴가 있는 헤더는 유지한다. */
body:not(:has(.cp-navigation)) #header:not(:has(.titlebar-center, .sub-nav)) {height: 0; min-height: 0; z-index: 40;}
body:not(:has(.cp-navigation)) #header:not(:has(.titlebar-center, .sub-nav)) > .titlebar {height: 0; min-height: 0;}

/* CP 등록 차량 상세: 탭 없는 화면에 헤더 높이를 남기지 않도록 독립된 닫기 버튼만 겹쳐 표시한다.
 * 헤더 감지 선택자(:has)의 지원 여부와 관계없이 본문은 화면 맨 위에서 시작한다. */
.cp-car-detail-page .cp-detail-close {position: fixed; top: 0; right: .5rem; z-index: 40; width: 3rem; height: 3.35rem; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;}
.cp-car-detail-page .cp-detail-close::before, .cp-car-detail-page .cp-detail-close::after {content: ''; position: absolute; top: calc(50% - 1px); left: calc(50% - 12px); width: 24px; height: 1.5px; background: #222323; transform: rotate(45deg);}
.cp-car-detail-page .cp-detail-close::after {transform: rotate(-45deg);}
.cp-car-detail-page .cp-detail-close:focus-visible {outline: 2px solid #006cd2; outline-offset: -4px;}

/* CP 사진 확대·사고이력: 원본 대형 헤더(8.1rem)를 일반 헤더 높이로 맞추고 제목·닫기를 유지한다. */
.cp-media-page #header, .cp-media-page #header .titlebar {height: 3.35rem; min-height: 0;}
.cp-media-page #header .titlebar-center a {height: 3.35rem; line-height: 3.35rem; padding: 0 3.5rem; font-size: .875rem; text-indent: 0;}
.cp-media-page #header .titlebar-right {width: 3rem; height: 3.35rem;}
.cp-media-page #header .titlebar-right .icon-close {width: 3rem; height: 3.35rem; background-size: 1.25rem auto !important;}
/* CP 입찰: 차량 이미지를 제거한 자리에 남는 원본 6rem 여백도 함께 제거한다. */
.auc_wrap .auc_title {padding-top: 0;}
/* CP 탁송·지난내역 레이어: 제목의 기본 안쪽 여백만 남기고 추가 상단 여백(2rem)을 없앤다.
 * 지난내역의 상단 탭이 있는 독립 페이지는 기존 배치를 유지한다. */
.cp-consign-page .mycar_detail .title_wrap h2,
.auc_detail:not(.cp-history-page) .past_list_wrap .title_wrap h2 {padding-top: 0;}
.cp-consign-page .mycar_detail .title_wrap h2 {padding-right: 3.5rem;}
/* CP 진단서: 인쇄용 body 여백과 제목 위의 중복 여백을 없애고 닫기와 제목이 겹치지 않게 한다. */
body.cp-report-page {padding-top: 0;}
.cp-report-page .top-area .column > div:first-child {padding-top: 0;}
.cp-report-page .top-area h2 {padding-top: 1.25rem; padding-right: 2rem;}

/* CP 등록·작성 중 차량 상세: 이미지의 로드 성공 여부를 확인할 수 있도록 img를 사용하되,
 * 원본 모델 이미지의 전체 표시와 첨부 사진의 원형 채우기 모양은 유지한다. */
.cp-detail-image-row .cp-detail-lead-image {display: block; width: 100%; height: 100%; object-fit: contain;}
.cp-detail-image-row .realimg .cp-detail-lead-image {object-fit: cover;}
/* CP 이미지 없는 상세: 첫 카드를 상단으로 올린 뒤에도 프로모션·비대면 배지가 잘리지 않게
 * 카드 안에 배치하고, 우측 닫기 버튼과 차량명이 겹치지 않도록 공간을 확보한다. */
.cp-detail-image-row.cp-hidden + .sub_container .cartitle {padding-right: 3.5rem;}
.cp-detail-image-row.cp-hidden + .sub_container .cartitle .usedcar-icon {position: static; align-self: flex-start;}

/* CP 레이어: 고정된 화면 크기 안에서 내부 문서만 스크롤하며 여러 화면을 순서대로 쌓는다. */
html.cp-layer-open, body.cp-layer-open {overflow: hidden !important;}
.cp-layer {position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5);}
.cp-layer-panel {position: relative; display: flex; flex-direction: column; width: min(960px, 94vw); height: 90vh; height: 90dvh; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,.2);}
/* CP 레이어: 별도 제목줄은 없애고, 자체 닫기가 없는 사진·오류 화면에만 닫기 아이콘을 겹쳐 표시한다. */
.cp-layer-dismiss {position: absolute; top: 12px; right: 12px; z-index: 1; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.95); color: #30304b; box-shadow: 0 2px 10px rgba(22,45,73,.12); cursor: pointer;}
.cp-layer-dismiss::before, .cp-layer-dismiss::after {content: ''; position: absolute; top: 21px; left: 11px; width: 22px; height: 2px; background: #30304b; transform: rotate(45deg);}
.cp-layer-dismiss::after {transform: rotate(-45deg);}
.cp-layer-dismiss:focus-visible {outline: 2px solid #006cd2; outline-offset: 2px;}
.cp-layer iframe {border: 0; width: 100%; flex: 1; min-height: 0; background: #fff;}
.cp-layer-image {display: block; max-width: 100%; max-height: 100%; object-fit: contain; margin: auto;}
.cp-image-body {flex: 1; min-height: 0; overflow: auto;}
.cp-layer-status {margin: 0; padding: .5rem 1rem;}
.cp-layer-page {padding-bottom: 0;}
/* CP 사고이력: 축소한 제목줄 바로 아래에서 남은 화면을 iframe에 배분하고 이력 문서만 스크롤한다. */
body.cp-accident-page {display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden;}
.cp-accident-page #header {flex: none;}
.cp-accident-page > .container {flex: 1; min-height: 0; padding-bottom: 0;}
.cp-accident-content {display: flex; flex: 1; min-height: 0; padding: 0;}
#iframeDetail {display: block; width: 100%; max-width: 100%; height: 100%; min-height: 0; border: 0;}
/* CP 정보·상세: 외부 시세나 차트 연결이 실패하면 원본의 빈 데이터 안내만 표시한다. */
.cp-price-unavailable #ggChartPriceEmpty {display: block !important;}
.cp-price-unavailable #ggChartPriceId, .cp-price-unavailable #noGraph,
.cp-price-unavailable #faceImageUrl {display: none !important;}
/* CP 상세 사진: 원본 썸네일 배열은 유지하고 확대 링크만 사진 위에 표시한다. */
.photo_list.confirm_type .cp-photo-zoom {display: flex; justify-content: flex-end; align-items: flex-end; height: 100%; padding: .3rem; font-size: .75rem; color: #fff; text-shadow: 0 1px 3px #000; cursor: zoom-in;}
/* CP 탁송: 브라우저 파일 입력은 공통 사진 선택 버튼으로만 연다. */
.cp-file-input {display: none;}
.cp-uploading {pointer-events: none; opacity: .6;}

/* CP 모바일: 앱 팝업처럼 현재 웹뷰 영역 전체를 사용한다. */
@media (max-width: 640px) {
    .cp-layer-panel {width: 100%; height: 100%; border-radius: 0;}
}