/* v7/real_estate/view.css — 부동산 매물 상세 페이지 (모던·심플 리뉴얼 2026-05-12) */

/* === 페이지 배경 (모든 부동산 페이지 공통 톤) === */
body:has(.re-view) { background: #f8fafc; }

.re-view {
    /* 데스크탑: 상단 여백 제거(돌아가기 버튼이 페이지 최상단에 붙음) */
    padding: 0 1rem 4rem;
    max-width: 1080px;
    margin: 0 auto;
}
/* 모바일: 상단 여백을 약간만 — 기존 1.5rem → 0.75rem로 한 단계 줄임 */
@media (max-width: 640px) {
    .re-view {
        padding-top: 0.75rem;
    }
}

/* === 돌아가기 버튼 — 헤더 위쪽 좌측에 배치 === */
.re-view-back {
    margin: 0 0 0.625rem 0;
}
.re-view-back wa-button::part(base) {
    color: #475569;
    font-weight: 500;
}
.re-view-back wa-button:hover::part(base) {
    color: #2563eb;
}

/* === 헤더 — 흰 카드로 감싸 모던하게 === */
.re-view-header {
    margin-bottom: 1.25rem;
    padding: 1.5rem 1.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.re-view-titlerow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}
.re-view-header h1 {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.025em;
    line-height: 1.3;
}
.re-view-header h1 .re-unit {
    font-size: 1rem;
    color: var(--wa-color-neutral-50, #64748b);
    font-weight: 500;
}

.re-view-badges {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.re-badge {
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.re-badge-s { background: #2563eb; }
.re-badge-r { background: #16a34a; }
.re-badge-t { background: #ca8a04; }
.re-badge-status { background: #475569; }
.re-badge-stage { background: #7c3aed; }

.re-view-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 0.875rem;
    letter-spacing: -0.025em;
}
.re-price-period {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
    margin-left: 0.125rem;
}

/* === 갤러리 (슬라이딩 카로셀 — wa-carousel) === */
.re-view-gallery {
    margin-bottom: 1.5rem;
}

/* 사진 없을 때 placeholder */
.re-gallery-main {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 12px;
    overflow: hidden;
}
.re-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.re-view-no-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #94a3b8;
    gap: 0.5rem;
}
.re-view-no-photo i {
    font-size: 4rem;
    opacity: 0.5;
}
.re-view-no-photo span {
    font-size: 0.875rem;
    color: #94a3b8;
    font-weight: 500;
}

/* 카로셀 래퍼 — 썸네일이 하단에 50% 오버랩하므로 아래 여백 확보 */
.re-gallery-wrapper {
    position: relative;
    margin-bottom: 2.25rem;
}
.re-carousel {
    --aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}
.re-carousel wa-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 이미지 로드 실패 시 carousel-item 안에 표시되는 placeholder */
.re-carousel-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #94a3b8;
    font-size: 3rem;
}
/* 네비게이션 버튼을 슬라이드 위에 오버랩 */
.re-carousel::part(base) {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'slides';
}
.re-carousel::part(navigation-button-previous),
.re-carousel::part(navigation-button-next) {
    grid-area: slides;
    z-index: 10;
    align-self: center;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
}
.re-carousel::part(navigation-button-previous) { justify-self: start; margin-left: 0.75rem; }
.re-carousel::part(navigation-button-next)     { justify-self: end;   margin-right: 0.75rem; }
.re-carousel::part(navigation-button-previous):hover,
.re-carousel::part(navigation-button-next):hover {
    background: #fff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.25);
}

/* 하단 썸네일 — 카로셀 위에 50% 오버랩 */
.re-thumbnails {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    max-width: 92%;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.re-thumbnails::-webkit-scrollbar { display: none; }
.re-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.re-thumb:hover { opacity: 0.9; transform: scale(1.05); }
.re-thumb.active {
    opacity: 1;
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--wa-color-brand-50, #2563eb), 0 2px 8px rgba(0, 0, 0, 0.3);
    transform: scale(1.08);
}
@media (max-width: 640px) {
    .re-gallery-wrapper { margin-bottom: 1.75rem; }
    .re-thumbnails { bottom: -18px; gap: 0.3rem; padding: 0.2rem 0.35rem; }
    .re-thumb { width: 38px; height: 38px; border-radius: 6px; }
}

/* === 액션 영역 — 즐겨찾기(로그인 사용자) + 본인 액션(수정/삭제) === */
.re-view-owner-actions,
.re-view-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;       /* 갤러리 썸네일(오버랩)과의 간격 확보 */
    margin-bottom: 2rem;       /* 매물 정보 카드와의 간격 확보 */
    justify-content: flex-end;
    flex-wrap: wrap;
}
@media (max-width: 640px) {
    .re-view-owner-actions,
    .re-view-actions {
        margin-top: 0.875rem;
        margin-bottom: 1.5rem;
    }
}

/* === 정보 섹션 (모던 카드) === */
.re-view-info, .re-view-location, .re-view-description, .re-view-broker, .re-view-youtube {
    background: #fff;
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: box-shadow 0.18s ease;
}
.re-view-info:hover, .re-view-location:hover, .re-view-description:hover, .re-view-broker:hover, .re-view-youtube:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

/* 유튜브 임베드 — embed_youtube_player() 가 출력한 div.youtube-video-container 가 자체 max-width/aspect 를
   가지므로 외부 카드에서는 최소한의 정렬만 한다. h2 아이콘 색은 위 .re-view h2 i 의 #2563eb 를
   인라인 style 로 빨강(#ff0000)으로 덮어쓰는 게 더 직관적이지만, 유지보수성을 위해 여기에 함께 둔다. */
.re-view-youtube .youtube-video-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.re-view h2 {
    margin: 0 0 1.125rem 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: -0.01em;
}
.re-view h2 i {
    color: #2563eb;
    font-size: 1rem;
}

/* === 매물 정보 — 3그룹 아이콘 카드 그리드 (2026-05-12 그룹화 개편) === */
.re-info-group {
    margin-bottom: 1.25rem;
}
.re-info-group:last-child { margin-bottom: 0; }
.re-info-group-title {
    margin: 0 0 0.625rem 0;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: uppercase;
}
.re-info-group-title i {
    color: #2563eb;
    font-size: 0.9375rem;
}
.re-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.625rem;
    margin: 0;
}
.re-info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    transition: all 0.15s ease;
    min-width: 0;
}
.re-info-item:hover {
    background: #eff6ff;
    border-color: #dbeafe;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.05);
}
.re-info-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    background: #fff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 1px solid #e2e8f0;
}
.re-info-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.re-info-label {
    font-size: 0.6875rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.re-info-value {
    font-size: 0.9375rem;
    color: #0f172a;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.3;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.re-info-value small {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    margin-left: 0.125rem;
}

/* === 가격 카드 — 세로 레이아웃, 가격을 크게 강조 (사용자 명시 우선순위) === */
.re-info-item-price {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 1rem 1.125rem;
    min-height: 5.5rem;
}
.re-info-item-price .re-info-body {
    width: 100%;
}
.re-info-item-price .re-info-label {
    font-size: 0.6875rem;
    margin-bottom: 0.2rem;
}
.re-info-item-price .re-info-value {
    font-size: 1.0625rem;            /* 매매가 등 가격 강조 — 다른 정보보다 크게 */
    font-weight: 800;
    white-space: normal;             /* 잘림 방지 */
    word-break: break-all;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.re-info-item-price .re-info-value small {
    font-size: 0.8125rem;
    font-weight: 500;
}
/* 활성 거래(매매·임대 선택) brand 강조 */
.re-info-item-price.is-active {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-color: #bfdbfe;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
}
.re-info-item-price.is-active .re-info-icon {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.re-info-item-price.is-active .re-info-value {
    color: #1d4ed8;
}

/* Rent-to-Own 매달 납부 금액 — 매매가/월 임대료 두 자리(2칸)를 차지 */
.re-info-item-rto {
    grid-column: span 2;
}
.re-info-item-rto .re-info-sublabel {
    font-size: 0.7rem;
    font-weight: 500;
    color: #64748b;
    margin-left: 0.25rem;
}

/* 그룹 정보 모바일 반응형 */
@media (max-width: 900px) {
    .re-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .re-info-item-rto { grid-column: span 2; }
}
@media (max-width: 480px) {
    .re-info-grid { grid-template-columns: 1fr; }
    .re-info-item-rto { grid-column: auto; }
    .re-info-group-title { font-size: 0.75rem; }
}

.re-info-options {
    margin-top: 1.125rem;
    padding-top: 1.125rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.re-option-chip {
    padding: 0.375rem 0.75rem;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.re-option-chip i { color: #2563eb; }

/* === 소개 / 위치 === */
.re-location-text, .re-description-text {
    margin: 0;
    line-height: 1.7;
    color: var(--wa-color-neutral-30, #1e293b);
}
.re-description-text {
    white-space: normal;
}

/* === 위치 지도 (Google Maps Embed) — 16:9 반응형 비율 박스 ===
   주소 텍스트 아래 자연스럽게 이어붙도록 margin-top 1rem. */
.re-location-map {
    margin-top: 1rem;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--wa-color-neutral-90, #e2e8f0);
    background: #f1f5f9;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.re-location-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* 좌표·주소가 부족할 때 placeholder — 회색 박스에 아이콘 + 안내 */
.re-location-map-empty {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    background: #f8fafc;
    border: 1px dashed var(--wa-color-neutral-90, #e2e8f0);
    border-radius: 12px;
    color: var(--wa-color-neutral-50, #94a3b8);
}
.re-location-map-empty i {
    font-size: 2rem;
    opacity: 0.6;
}
.re-location-map-empty p {
    margin: 0;
    font-size: 0.875rem;
}

/* 모바일 — 지도는 4:3 비율로 약간 더 정사각 가깝게 (화면 폭 부족 시 가독성) */
@media (max-width: 639px) {
    .re-location-map {
        padding-top: 75%;
        border-radius: 10px;
    }
}

/* === 브로커 카드 === */
.re-broker-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.re-broker-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.re-broker-photo-empty {
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}
.re-broker-info { flex: 1; min-width: 0; }
.re-broker-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--wa-color-neutral-30, #1e293b);
}
.re-broker-company {
    font-size: 0.875rem;
    color: var(--wa-color-neutral-50, #64748b);
    margin-bottom: 0.25rem;
}
.re-broker-office {
    font-size: 0.8125rem;
    color: var(--wa-color-neutral-50, #64748b);
    margin-bottom: 0.25rem;
}
.re-broker-office i { margin-right: 0.25rem; color: var(--wa-color-brand-50, #2563eb); }
.re-broker-license {
    font-size: 0.75rem;
    color: var(--wa-color-neutral-50, #64748b);
    margin-bottom: 0.5rem;
}
.re-broker-bio {
    font-size: 0.875rem;
    color: var(--wa-color-neutral-30, #1e293b);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.re-broker-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.re-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
}
.re-contact-chat     { background: #0ea5e9; font-weight: 600; }
.re-contact-chat:hover{ background: #0284c7; }
.re-contact-phone    { background: #2563eb; }
.re-contact-viber    { background: #7c3aed; }
.re-contact-whatsapp { background: #16a34a; }
.re-contact-email    { background: #475569; }
.re-contact-line     { background: #06c755; }
.re-contact-kakao    { background: #fee500; color: #3c1e1e; }
.re-contact-messenger { background: #0084ff; }

/* === 푸터 === */
.re-view-footer {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
}

/* === 모바일 === */
@media (max-width: 640px) {
    .re-view-price { font-size: 1.5rem; }
    .re-broker-card { flex-direction: column; }
    .re-broker-photo { width: 64px; height: 64px; }
    .re-info-grid {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .re-info-grid dt {
        margin-top: 0.5rem;
    }
}

/* ===========================================================================
   거래 유형별 가격 분리 표시 (2026-05-12)
   =========================================================================== */
.re-view-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-top: 0.5rem;
}
.re-view-price-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.re-view-price-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wa-color-neutral-50, #64748b);
}
.re-view-price-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wa-color-brand-50, #2563eb);
    line-height: 1.1;
}
.re-view-price-value .re-price-period {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wa-color-neutral-50, #64748b);
    margin-left: 0.125rem;
}

/* ===========================================================================
   같은 브로커의 다른 매물 그리드 (2026-05-12 신규)
   =========================================================================== */
.re-view-broker-listings {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wa-color-neutral-90, #e2e8f0);
}
.re-view-broker-listings h2 {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    color: var(--wa-color-neutral-30, #1e293b);
}
.re-view-broker-listings h2 i { color: var(--wa-color-brand-50, #2563eb); margin-right: 0.375rem; }
.re-view-broker-listings-count {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--wa-color-neutral-50, #64748b);
}
.re-broker-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.875rem;
}
.re-broker-listing-card {
    display: block;
    text-decoration: none;
    border: 1px solid var(--wa-color-neutral-95, #f1f5f9);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.re-broker-listing-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    border-color: var(--wa-color-brand-90, #dbeafe);
}
.re-broker-listing-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    overflow: hidden;
}
.re-broker-listing-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.re-broker-listing-no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wa-color-neutral-60, #94a3b8);
    font-size: 1.75rem;
}
/* 배지 컨테이너 — 좌상단에 매매·임대·R2O 배지를 가로로 나란히 배치(한 매물이 여러 거래 유형 동시 가능). */
.re-broker-listing-badges {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    max-width: calc(100% - 1rem);
    z-index: 1;
}
.re-broker-listing-badge {
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}
/* 거래 유형별 색상 — list.css 의 .re-badge-{s|r|t} 와 동일한 톤 */
.re-broker-badge-s { background: #2563eb; }  /* 매매 */
.re-broker-badge-r { background: #16a34a; }  /* 임대 */
.re-broker-badge-t { background: #d97706; }  /* R2O */
.re-broker-listing-body {
    padding: 0.625rem 0.75rem 0.75rem;
}
.re-broker-listing-price {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--wa-color-brand-50, #2563eb);
    margin-bottom: 0.25rem;
}
.re-broker-listing-name {
    font-size: 0.8125rem;
    color: var(--wa-color-neutral-30, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.25rem;
}
.re-broker-listing-unit {
    color: var(--wa-color-neutral-50, #64748b);
    font-weight: 500;
    margin-left: 0.125rem;
}
.re-broker-listing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--wa-color-neutral-50, #64748b);
}
.re-broker-listing-meta i { margin-right: 0.15rem; }

/* 무한 스크롤 sentinel — IntersectionObserver 트리거 + 로딩 표시 (2026-05-21) */
.re-broker-listings-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 0.5rem;
    color: var(--wa-color-neutral-50, #64748b);
    font-size: 0.8125rem;
}
.re-broker-listings-sentinel[hidden] { display: none; }

@media (max-width: 640px) {
    .re-broker-listings-grid { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
    .re-broker-listing-price { font-size: 0.875rem; }
}