/* ===== 지점 상세 (/branches/{지점}) =====
 * 시안: 전지점상세.png (1440 폭). 본문 래퍼가 .branches-page.branch-detail 이라 branches.css 의 색 변수(--bp-*)·
 * 헤더 높이(--bp-header)·마무리 행동(.bp-cta)을 그대로 쓰고, 여기서는 상세 전용 규칙만 .branch-detail 로 스코핑한다.
 * 헤더가 position:fixed 이므로 위쪽 여백에 헤더 높이를 더한다.
 */
.branch-detail .bd-wrap {
    padding: calc(var(--bp-header) + 40px) 0 110px;
    background: var(--bp-beige);
}

.branch-detail .bd-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bp-ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.branch-detail .bd-back i { font-size: 15px; }
.branch-detail .bd-back:hover { color: var(--bp-accent); }

/* ---------- 카드 ---------- */
.branch-detail .bd-card {
    margin-top: 28px;
    padding: 44px 48px 68px;
    border: 1px solid #ebe6e1;
    border-radius: 12px;
    background: #fff;
}

.branch-detail .bd-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--bp-mute);
    font-size: 12px;
}
.branch-detail .bd-crumb a { color: inherit; text-decoration: none; }
.branch-detail .bd-crumb a:hover { color: var(--bp-accent); }

.branch-detail .bd-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
}
.branch-detail .bd-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
/* 상태 표시: 오픈 예정 지점만 (진료 중 표시는 제거) */
.branch-detail .bd-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bp-accent);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.branch-detail .bd-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* ---------- 사진 ----------
 * 시안은 큰 사진 1 + 작은 사진 2. 지점 데이터에 사진이 최대 2장(branch_photo · branch_img)이라
 * 장수에 따라 1장 = 가로 전체, 2장 = 왼쪽 큰 사진 + 오른쪽 한 장(세로 꽉 채움), 3장 = 시안 배치.
 */
.branch-detail .bd-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1.48fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, 193px);
    gap: 16px;
    margin-top: 32px;
}
.branch-detail .bd-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    background: #f1ede9;
}
.branch-detail .bd-gallery img:first-child { grid-row: 1 / 3; }
.branch-detail .bd-gallery[data-count="1"] { grid-template-columns: 1fr; }
.branch-detail .bd-gallery[data-count="2"] img:nth-child(2) { grid-row: 1 / 3; }

/* ---------- 정보 + 지도/예약 ---------- */
.branch-detail .bd-body {
    display: grid;
    grid-template-columns: minmax(0, 1.48fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin-top: 48px;
}

.branch-detail .bd-info {
    margin: 0;
    border-bottom: 1px solid var(--bp-line);
}
.branch-detail .bd-info__row {
    display: grid;
    grid-template-columns: 152px 1fr;
    gap: 16px;
    padding: 26px 0;
    border-top: 1px solid var(--bp-line);
}
.branch-detail .bd-info dt {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: start;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
}
.branch-detail .bd-info dt i {
    color: var(--bp-accent);
    font-size: 19px;
}
.branch-detail .bd-info dd {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    color: #333;
    font-size: 15px;
    line-height: 1.7;
    text-wrap: pretty;
}
.branch-detail .bd-hours { display: flex; gap: 12px; }
.branch-detail .bd-hours b {
    flex: none;
    min-width: 44px;
    color: var(--bp-ink);
    font-weight: 500;
}
.branch-detail .bd-lunch { white-space: nowrap; }   /* 넘칠 때 '(점심시간 …)' 이 통째로 다음 줄로 */
.branch-detail .bd-tel { color: inherit; text-decoration: none; }
.branch-detail .bd-tel:hover { color: var(--bp-accent); text-decoration: underline; text-underline-offset: 3px; }

.branch-detail .bd-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.branch-detail .bd-map {
    height: 240px;
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 8px;
    background: #e9edf0;
}

.branch-detail .bd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    background: #fff;
    color: var(--bp-ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}
.branch-detail .bd-btn i { color: var(--bp-accent); font-size: 17px; }
.branch-detail .bd-btn:hover { border-color: var(--bp-accent); color: var(--bp-accent); }
.branch-detail .bd-btn--primary {
    height: 56px;
    border-color: var(--bp-accent);
    background: var(--bp-accent);
    color: #fff;
}
.branch-detail .bd-btn--primary:hover { background: #651226; color: #fff; }
.branch-detail .bd-btn-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);   /* 버튼 1개면 꽉, 2개면 반반 */
    gap: 8px;
}
/* 길찾기·카카오톡이 둘 다 없을 때 (공백 텍스트가 남아 :empty 로는 못 잡는다) */
.branch-detail .bd-btn-row:not(:has(.bd-btn)) { display: none; }

/* ---------- 태블릿 · 모바일 ---------- */
/* v2Container 는 768~1440 에서 좌우 여백이 0 이라 카드가 화면 끝에 붙는다 — 이 페이지만 여백을 준다 (767 이하는 v2/common.css 16px) */
@media (min-width: 768px) and (max-width: 1439px) {
    .branch-detail .bd-wrap > .v2Container { padding: 0 24px; }
}
@media (max-width: 1199px) {
    .branch-detail .bd-card { padding: 36px 32px 48px; }
    .branch-detail .bd-gallery { grid-template-rows: repeat(2, 160px); }
    .branch-detail .bd-body { grid-template-columns: 1fr; gap: 32px; }
    .branch-detail .bd-map { height: 280px; }
}
@media (max-width: 767px) {
    .branch-detail .bd-wrap { padding: calc(var(--bp-header) + 24px) 0 64px; }
    .branch-detail .bd-card { margin-top: 20px; padding: 24px 20px 32px; }
    .branch-detail .bd-title { font-size: 26px; }
    /* 사진: 큰 사진 한 장을 위에, 나머지는 아래 한 줄 */
    .branch-detail .bd-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 210px 110px;
        gap: 8px;
        margin-top: 24px;
    }
    .branch-detail .bd-gallery img:first-child { grid-row: auto; grid-column: 1 / -1; }
    .branch-detail .bd-gallery[data-count="1"] { grid-template-rows: 220px; }
    .branch-detail .bd-gallery[data-count="2"] { grid-template-rows: 210px 150px; }
    .branch-detail .bd-gallery[data-count="2"] img:nth-child(2) { grid-row: auto; grid-column: 1 / -1; }
    .branch-detail .bd-body { margin-top: 28px; }
    .branch-detail .bd-info__row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
    .branch-detail .bd-info dd { padding-left: 31px; font-size: 14.5px; }
    .branch-detail .bd-map { height: 220px; }
    /* 버튼 줄: 한 줄 3개는 좁으므로 2개씩. 홀수면 마지막 버튼이 한 줄을 다 쓴다 */
    .branch-detail .bd-btn-row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .branch-detail .bd-btn-row > .bd-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
}