/* ============================================================
 * skin/board/hive_baf_user/style.css
 * Before & After 게시판 스킨 — 8 레이아웃 공통
 * Module: hive_baf / Version: 1.0.0
 * ============================================================ */

.bv-wrap { max-width:1280px; margin:24px auto; padding:0 16px; font-family:'Noto Sans KR','Pretendard',sans-serif; color:#222; }

/* 슈퍼관리자 도구바 */
.bv-admin-bar { display:flex; gap:8px; padding:10px 14px; background:#ccfbf1; border:1px solid #5eead4; border-radius:8px; margin-bottom:16px; align-items:center; font-size:13px; flex-wrap:wrap; }
.bv-admin-bar strong { color:#0f766e; }
.bv-admin-btn { padding:7px 14px; background:var(--bv-main, #0d9488); color:#fff; border:0; border-radius:10px; cursor:pointer; font-size:12px; font-weight:600; text-decoration:none; transition:filter .15s, transform .15s, background .15s; }
.bv-admin-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.bv-admin-btn.outline { background:rgba(0,0,0,.07); color:var(--bv-main, #0d9488); border:0; }
.bv-admin-btn.outline:hover { background:rgba(0,0,0,.12); filter:none; transform:none; }
.bv-admin-btn.danger { background:rgba(220,38,38,.09); color:#dc2626; }
.bv-admin-btn.danger:hover { background:rgba(220,38,38,.15); filter:none; }

/* 툴바 */
.bv-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:12px; }
.bv-toolbar-right { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bv-search { display:flex; align-items:center; gap:6px; }
.bv-search-sel,
.bv-sort-sel {
    height:36px; padding:0 28px 0 12px; border:0;
    border-radius:12px; font-size:13px; background:rgba(0,0,0,.045); color:inherit;
    appearance:none; -webkit-appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none'/></svg>");
    background-repeat:no-repeat; background-position:right 10px center;
    transition:background .15s;
}
.bv-search-sel:hover,
.bv-sort-sel:hover { background-color:rgba(0,0,0,.07); }
.bv-search-input {
    height:36px; padding:0 14px; border:0; border-radius:12px;
    background:rgba(0,0,0,.045); color:inherit;
    font-size:13px; min-width:180px; transition:background .15s;
}
.bv-search-input::placeholder { color:#9ca3af; }
.bv-search-input:focus { outline:none; background:rgba(0,0,0,.07); }
.bv-search-btn {
    height:36px; padding:0 18px; background:var(--bv-main, #0d9488); color:#fff;
    border:0; border-radius:12px; font-size:13px; cursor:pointer; font-weight:600;
    white-space:nowrap; flex:0 0 auto; transition:filter .15s, transform .15s;
}
.bv-search-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }

/* 모바일 툴바/검색 — 가로 넘침 방지, 행 단위 정렬 */
@media (max-width: 700px) {
    .bv-toolbar { gap:10px; }
    .bv-toolbar-right { width:100%; gap:8px; }
    .bv-search { flex-wrap:wrap; width:100%; gap:8px; }
    .bv-search-sel { flex:1 1 100%; width:100%; }
    .bv-search-form { display:flex !important; flex:1 1 100%; gap:8px; min-width:0; }
    .bv-search-input { flex:1 1 auto; min-width:0; width:auto; }
    .bv-sort-sel { flex:1 1 auto; }
    .bv-write-btn { flex:1 1 auto; text-align:center; }
}

/* 페이지네이션 (그누보드 표준 $write_pages wrap) */
.bv-pagination { margin:32px 0 20px; text-align:center; }
.bv-pagination .pg_wrap { display:inline-flex; gap:4px; }
.bv-pagination .pg_page,
.bv-pagination .pg_current,
.bv-pagination .pg_start, .bv-pagination .pg_prev,
.bv-pagination .pg_end,   .bv-pagination .pg_next {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:36px; height:36px; padding:0 10px;
    border:0; border-radius:8px; background:transparent; box-shadow:none;
    color:#888; text-decoration:none; font-size:14px;
    font-family:'Pretendard','Noto Sans KR',sans-serif;
    transition:color .15s, background .15s;
}
.bv-pagination .pg_page:hover,
.bv-pagination .pg_start:hover, .bv-pagination .pg_prev:hover,
.bv-pagination .pg_end:hover,   .bv-pagination .pg_next:hover {
    color:var(--bv-main, #0d9488); background:rgba(0,0,0,.04);
}
.bv-pagination .pg_current {
    background:transparent; color:var(--bv-main, #0d9488) !important;
    font-weight:700; border-radius:0;
    box-shadow:inset 0 -2px 0 var(--bv-main, #0d9488);
}

/* 슈퍼관리자 일괄 관리 도구 */
.bv-bulk-tools {
    margin-top:18px; padding:14px 18px;
    background:#fafafa; border:1px solid #e5e7eb; border-radius:10px;
}
.bv-bulk-all {
    display:inline-flex; align-items:center; gap:6px;
    font-size:13px; color:#444; font-weight:500;
    padding-bottom:12px; border-bottom:1px solid #f0f0f0; margin-bottom:12px; width:100%;
}
.bv-bulk-checks {
    display:flex; flex-wrap:wrap; gap:6px 14px;
    max-height:140px; overflow-y:auto; margin-bottom:12px;
    padding:4px;
}
.bv-bulk-chk {
    display:inline-flex; align-items:center; gap:5px;
    font-size:12px; color:#666; cursor:pointer; user-select:none;
    padding:3px 8px; border-radius:4px;
    transition:background .15s;
}
.bv-bulk-chk:hover { background:#f0f0f0; }
.bv-bulk-chk span { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bv-bulk-actions {
    display:flex; gap:6px; padding-top:12px; border-top:1px solid #f0f0f0;
    justify-content:flex-end;
}
.bv-bulk-btn {
    padding:8px 16px; border:0; background:rgba(0,0,0,.07); color:#555;
    border-radius:12px; font-size:12px; cursor:pointer; font-weight:600;
    transition:background .15s, color .15s;
}
.bv-bulk-btn:hover { background:rgba(0,0,0,.12); color:var(--bv-main, #0d9488); }
.bv-bulk-btn.danger { background:rgba(220,38,38,.09); color:#dc2626; }
.bv-bulk-btn.danger:hover { background:rgba(220,38,38,.15); }
.bv-write-btn { display:inline-flex; align-items:center; gap:4px; padding:10px 22px; background:var(--bv-main, #0d9488); color:#fff !important; border:0; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none; transition:transform .15s, filter .15s; }
.bv-write-btn:hover { transform:translateY(-1px); filter:brightness(1.08); }
.bv-title { font-size:22px; font-weight:700; margin:0; }
.bv-title small { color:#888; font-weight:400; font-size:14px; margin-left:6px; }

/* 필터 chip 영역 (이미지1 "나와 비슷한 케이스 찾기") */
.bv-filter { background:#fff; border-radius:12px; padding:18px 22px; margin-bottom:16px; }
.bv-filter-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; margin-bottom:14px; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.bv-filter-head h3 { margin:0; font-size:15px; font-weight:700; }
.bv-filter-head .toggle { color:#888; font-size:14px; transition:transform .2s; }
.bv-filter.collapsed .bv-filter-head { margin-bottom:0; padding-bottom:0; border-bottom:0; }
.bv-filter.collapsed .bv-filter-head .toggle { transform:rotate(-90deg); }
.bv-filter.collapsed .bv-filter-body,
.bv-filter.collapsed .bv-filter-actions { display:none; }
.bv-filter-body { display:grid; grid-template-columns:80px 1fr; gap:10px 14px; align-items:center; }
.bv-filter-label { font-size:13px; color:#666; font-weight:500; }
.bv-filter-chips { display:flex; flex-wrap:wrap; gap:6px; }
.bv-chip { padding:6px 14px; background:rgba(0,0,0,.05); border:0; border-radius:999px; font-size:12px; color:#666; cursor:pointer; user-select:none; transition:background .15s, color .15s; }
.bv-chip:hover { background:rgba(0,0,0,.09); }
.bv-chip.active { background:var(--bv-main, #0d9488); color:#fff; }
.bv-filter-actions { padding-top:12px; margin-top:10px; border-top:1px solid #f0f0f0; }
.bv-filter-reset { padding:7px 14px; background:rgba(0,0,0,.07); border:0; border-radius:12px; cursor:pointer; font-size:12px; color:#666; font-weight:600; transition:background .15s; }
.bv-filter-reset:hover { background:rgba(0,0,0,.12); }

/* 카테고리 탭 (이미지1 "전체보기 (12) | 가슴확대 (5)") */
.bv-cats { display:flex; gap:0; margin-bottom:20px; overflow-x:auto; }
.bv-cat { padding:12px 18px; color:#888; text-decoration:none; font-size:14px; border-bottom:2px solid transparent; white-space:nowrap; }
.bv-cat.active { color:var(--bv-main, #0d9488); font-weight:700; border-bottom-color:var(--bv-main, #0d9488); }
.bv-cat .cnt { color:#aaa; font-size:12px; margin-left:4px; }

/* ============================================================
 * 슬라이더 컴포넌트 (BafSlider) — img 기반, 자연 비율
 * ============================================================ */
.baf-slider {
    position:relative; width:100%;
    background:#e9e4dc; overflow:hidden; border-radius:12px;
    user-select:none; touch-action:none; line-height:0;
    cursor:ew-resize;
}
.baf-slider.single   { cursor:default; }
.baf-slider.dragging { cursor:grabbing; }
body.baf-no-select { user-select:none !important; -webkit-user-select:none !important; }

/* img 태그 — 가로 100% 세로 auto */
.baf-slider img { display:block; pointer-events:none; -webkit-user-drag:none; user-select:none; }
.baf-slider-img-single  { width:100%; height:auto; }
.baf-slider-img-base    { width:100%; height:auto; position:relative; z-index:1; }
.baf-slider-img-overlay {
    position:absolute; top:0; left:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
    clip-path:inset(0 0 0 50%); z-index:2;
}
/* 사진 비율 다른 경우 — 슬라이더가 contain 모드로 동작 (잘림 없음) */
.baf-slider.contain .baf-slider-img-base    { object-fit:contain; height:auto; }
.baf-slider.contain .baf-slider-img-overlay { object-fit:contain; }

.baf-slider-label {
    position:absolute; top:22px; padding:7px 16px;
    background:rgba(0,0,0,.62); color:#fff; font-size:12px; font-weight:600;
    border-radius:16px; z-index:5; letter-spacing:.04em; pointer-events:none;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    line-height:1.2;
}
.baf-slider-label.before { left:22px; background:rgba(20,20,20,.65); }
.baf-slider-label.after  { right:22px; background:var(--bv-main, #0d9488); }
@media (max-width: 600px) {
    .baf-slider-label { top:14px; padding:5px 12px; font-size:11px; }
    .baf-slider-label.before { left:14px; }
    .baf-slider-label.after  { right:14px; }
}

/* 드래그 핸들 — 가운데 동그라미 + 위아래 세로선 */
.baf-slider-handle {
    position:absolute; top:0; bottom:0; left:50%; width:4px;
    background:rgba(255,255,255,.95); z-index:6;
    transform:translateX(-50%); pointer-events:none;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.baf-slider-handle-knob {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:48px; height:48px; border-radius:50%;
    background:#fff; color:var(--bv-main, #0d9488);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:700;
    box-shadow:0 4px 16px rgba(0,0,0,.20);
    pointer-events:auto; cursor:ew-resize;
    transition:transform .18s ease, box-shadow .18s ease;
}
.baf-slider-handle-knob span { display:block; line-height:1; transform:translateY(-1px); }
.baf-slider:hover .baf-slider-handle-knob,
.baf-slider.dragging .baf-slider-handle-knob {
    transform:translate(-50%,-50%) scale(1.08);
    box-shadow:0 6px 20px rgba(0,0,0,.26);
}
.baf-slider.single .baf-slider-handle { display:none; }

.baf-slider-empty {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#94a3b8; font-size:13px; min-height:280px; padding:60px 20px;
    background:linear-gradient(135deg, #f8fafc, #eef2f7);
    border-radius:12px; border:2px dashed #cbd5e1; gap:8px; line-height:1.5;
}
.baf-slider-empty > div:first-child { font-size:32px; }

/* ============================================================
 * 레이아웃: baf_slider (메인 상세형 — 이미지1)
 * ============================================================ */
.bv-slider-layout { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.04); padding:24px; }
.bv-slider-layout .baf-slider { max-width:100%; margin:0 auto; }
.bv-slider-meta { margin-top:18px; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.bv-slider-info { flex:1; min-width:200px; }
.bv-slider-info h3 { margin:0 0 6px; font-size:18px; font-weight:700; }
.bv-slider-info .badge { display:inline-block; padding:3px 10px; background:var(--bv-main, #0d9488); color:#fff; border-radius:14px; font-size:11px; margin-bottom:8px; }
.bv-slider-info .desc { color:#666; font-size:13px; line-height:1.6; }
.bv-slider-angle-tabs { display:flex; gap:6px; }
.bv-angle-tab { padding:8px 16px; background:rgba(0,0,0,.05); border:0; border-radius:10px; cursor:pointer; font-size:13px; color:#666; transition:background .15s, color .15s; }
.bv-angle-tab:hover { background:rgba(0,0,0,.09); }
.bv-angle-tab.active { background:var(--bv-main, #0d9488); color:#fff; }
.bv-angle-tab:disabled { background:rgba(0,0,0,.03); color:#bbb; cursor:not-allowed; }
.bv-slider-pagination { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; align-items:center; font-size:13px; color:#666; }
.bv-pg-btn { width:32px; height:32px; border-radius:50%; border:0; background:rgba(0,0,0,.06); cursor:pointer; transition:background .15s; }
.bv-pg-btn:hover { background:rgba(0,0,0,.1); }
.bv-pg-btn:disabled { color:#ccc; background:rgba(0,0,0,.03); cursor:not-allowed; }

/* ============================================================
 * 레이아웃: baf_split (좌우 분할 — 이미지2)
 * ============================================================ */
/* ============================================================
 * baf_split — 좌우 분할 (Before / After 50:50, 또는 사진 1장 단일)
 * ============================================================ */
.bv-split-card {
    margin-bottom:32px; padding-bottom:32px;
    max-width:1040px;            /* 페어/솔로 가로폭 통일 cap (520 × 2) */
    margin-left:auto; margin-right:auto;
    border-bottom:1px solid #f0f0f0;
}
.bv-split-card:last-of-type { border-bottom:0; }

.bv-split-pair {
    display:grid; grid-template-columns:1fr 1fr; gap:2px;
    border-radius:14px; overflow:hidden; background:#0f0f10;
    aspect-ratio:2/1;
    width:100%;
    position:relative;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    transition:box-shadow .25s ease, transform .25s ease;
}
.bv-split-pair:hover { box-shadow:0 6px 16px rgba(0,0,0,.08); transform:translateY(-2px); }

/* 단일 사진(또는 빈 카드)일 때 — 페어와 동일한 가로폭, 동일한 비율(2/1) 유지 */
.bv-split-pair.is-single,
.bv-split-pair:has(> .bv-split-img.solo),
.bv-split-pair:has(> .bv-split-empty) {
    grid-template-columns:1fr !important;
}
.bv-split-pair.is-single .bv-split-img.solo,
.bv-split-pair > .bv-split-img.solo {
    width:100%;
    height:100%;
    aspect-ratio:2/1;            /* 페어와 동일 */
}

.bv-split-img {
    display:block; background:#0f0f10 no-repeat center / cover;
    position:relative; min-height:260px;
    transition:filter .25s ease;
}
.bv-split-img:hover { filter:brightness(1.04); }

.bv-split-label {
    position:absolute; top:18px; padding:7px 16px;
    color:#fff; font-size:12px; font-weight:600;
    border-radius:18px; letter-spacing:.04em; line-height:1.2;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.bv-split-label.before { left:18px; background:rgba(20,20,20,.7); }
.bv-split-label.after  { right:18px; background:var(--bv-main, #0d9488); }
.bv-split-img.solo .bv-split-label { left:18px; background:rgba(20,20,20,.7); }

.bv-split-empty {
    grid-column:1/-1; display:flex; align-items:center; justify-content:center;
    color:#9ca3af; font-size:14px; padding:80px 20px;
    background:linear-gradient(135deg, #f8fafc, #eef2f7);
}

/* 정보 영역 */
.bv-split-info {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:20px; margin-top:18px; flex-wrap:wrap;
}
.bv-split-info-left { flex:1; min-width:0; }
.bv-split-cat {
    display:inline-block; padding:4px 12px;
    background:color-mix(in srgb, var(--bv-main, #0d9488) 12%, #fff);
    color:var(--bv-main, #0d9488);
    border-radius:14px; font-size:12px; font-weight:600;
    letter-spacing:.02em; margin-bottom:8px;
}
.bv-split-title {
    margin:0 0 12px; font-size:18px; font-weight:600; color:#1f2937;
    line-height:1.4; letter-spacing:-.01em;
}
.bv-split-title a { color:inherit; text-decoration:none; }
.bv-split-title a:hover { color:var(--bv-main, #0d9488); }

.bv-split-tags { display:flex; flex-wrap:wrap; gap:6px; }
.bv-split-tag {
    display:inline-flex; align-items:center;
    padding:4px 10px; border-radius:5px;
    background:#f5f5f5; color:#6b7280;
    font-size:11px; font-weight:500;
}
.bv-split-tag-angle { background:#fff; color:#374151; border:1px solid #e5e7eb; }
.bv-split-tag-phase {
    background:color-mix(in srgb, var(--bv-main, #0d9488) 10%, #fff);
    color:var(--bv-main, #0d9488); font-weight:600;
}

.bv-split-detail {
    align-self:flex-start; flex-shrink:0;
    padding:9px 18px; border:0; border-radius:12px;
    background:rgba(0,0,0,.07);
    color:#666 !important; text-decoration:none; font-size:13px; font-weight:600;
    transition:background .18s, color .18s, transform .18s;
}
.bv-split-detail:hover {
    background:rgba(0,0,0,.12);
    color:var(--bv-main, #0d9488) !important;
    transform:translateX(2px);
}

@media (max-width: 700px) {
    .bv-split-pair { aspect-ratio:1.4/1; }
    .bv-split-card { margin-bottom:24px; padding-bottom:24px; }
    .bv-split-title { font-size:16px; }
    .bv-split-info { flex-direction:column; gap:12px; }
    .bv-split-detail { align-self:stretch; text-align:center; }
}

/* ============================================================
 * baf_hover — 카드 hover 시 Before↔After cross-fade
 * ============================================================ */
.bv-hover-grid {
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:22px;
}
@media (max-width: 1024px) { .bv-hover-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 600px)  { .bv-hover-grid { grid-template-columns:1fr; } }

.bv-hover-card {
    display:block; text-decoration:none; color:inherit;
    background:#fff; border-radius:14px; overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
}
.bv-hover-card:hover {
    transform:translateY(-4px);
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.bv-hover-imgs {
    position:relative; aspect-ratio:1/1; overflow:hidden;
    background:#0f0f10;
}
.bv-hover-img {
    position:absolute; inset:0;
    background:#0f0f10 no-repeat center / cover;
    transition:opacity .55s cubic-bezier(.4,0,.2,1), transform 6s ease;
}
.bv-hover-img.is-before { z-index:1; opacity:1; }
.bv-hover-img.is-after  { z-index:2; opacity:0; }
.bv-hover-img.solo      { opacity:1; }

.bv-hover-card.has-pair:hover .bv-hover-img.is-before { opacity:0; }
.bv-hover-card.has-pair:hover .bv-hover-img.is-after  { opacity:1; transform:scale(1.04); }
.bv-hover-card.has-pair.touched .bv-hover-img.is-before { opacity:0; }
.bv-hover-card.has-pair.touched .bv-hover-img.is-after  { opacity:1; }

/* 라벨 배지 */
.bv-hover-badge {
    position:absolute; top:14px; z-index:5;
    padding:5px 12px; border-radius:14px;
    font-size:11px; font-weight:600; color:#fff; letter-spacing:.04em;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    box-shadow:0 2px 8px rgba(0,0,0,.18);
    transition:opacity .3s ease;
    pointer-events:none;
}
.bv-hover-badge.before { left:14px; background:rgba(20,20,20,.7); }
.bv-hover-badge.after  { right:14px; background:var(--bv-main, #0d9488); opacity:0; }
.bv-hover-badge.solo   { left:14px; background:rgba(20,20,20,.7); }
.bv-hover-card.has-pair:hover .bv-hover-badge.before { opacity:0; }
.bv-hover-card.has-pair:hover .bv-hover-badge.after  { opacity:1; }
.bv-hover-card.has-pair.touched .bv-hover-badge.before { opacity:0; }
.bv-hover-card.has-pair.touched .bv-hover-badge.after  { opacity:1; }

.bv-hover-hint {
    position:absolute; bottom:14px; right:14px; z-index:5;
    padding:4px 10px; border-radius:10px;
    background:rgba(255,255,255,.92); color:#1f2937;
    font-size:10px; font-weight:500; letter-spacing:.02em;
    box-shadow:0 2px 6px rgba(0,0,0,.12);
    opacity:.85; transition:opacity .25s ease;
    pointer-events:none;
}
.bv-hover-card:hover .bv-hover-hint { opacity:0; }

.bv-hover-empty {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#9ca3af; font-size:36px;
    background:linear-gradient(135deg, #f8fafc, #eef2f7);
}

/* 본문 */
.bv-hover-body { padding:16px 18px; }
.bv-hover-cat {
    display:inline-block; padding:3px 10px; border-radius:12px;
    background:color-mix(in srgb, var(--bv-main, #0d9488) 12%, #fff);
    color:var(--bv-main, #0d9488); font-size:11px; font-weight:600;
    letter-spacing:.02em; margin-bottom:8px;
}
.bv-hover-title {
    margin:0 0 10px; font-size:15px; font-weight:600; color:#1f2937;
    line-height:1.4; letter-spacing:-.01em;
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.bv-hover-tags { display:flex; flex-wrap:wrap; gap:5px; }
.bv-hover-tag {
    padding:2px 8px; border-radius:4px;
    background:#f5f5f5; color:#6b7280;
    font-size:11px; font-weight:500;
}
.bv-hover-tag.muted { background:#fafafa; color:#9ca3af; }

/* ============================================================
 * 레이아웃: baf_grid (BEST 캐러셀 + 4-column 카드 그리드)
 * ============================================================ */

/* ── BEST 섹션 ── */
.bv-best-section {
    background:linear-gradient(135deg, #fff8e1 0%, #fff 60%);
    border:1px solid #fde68a;
    border-radius:14px; padding:20px 22px; margin-bottom:28px;
}
.bv-best-head {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:14px;
}
.bv-best-head h3 {
    margin:0; font-size:16px; font-weight:700; color:#92400e;
    letter-spacing:.02em;
}
.bv-best-head h3::after { content:''; }
.bv-best-sub { font-size:11px; color:#a16207; }

.bv-best-scroll {
    display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
    padding:2px 2px 8px; scroll-snap-type:x mandatory;
    scrollbar-width:thin;
}
.bv-best-scroll::-webkit-scrollbar { height:6px; }
.bv-best-scroll::-webkit-scrollbar-thumb { background:#fde68a; border-radius:3px; }

.bv-best-card {
    flex:0 0 200px; scroll-snap-align:start;
    background:#fff; border-radius:10px; overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    text-decoration:none; color:inherit;
    transition:transform .2s ease, box-shadow .2s ease;
}
.bv-best-card:hover { transform:translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.08); }

.bv-best-thumb {
    position:relative; aspect-ratio:1/1;
    background:#0f172a; display:grid;
}
.bv-best-thumb:has(.bv-best-thumb-half:nth-child(2)) { grid-template-columns:1fr 1fr; }
.bv-best-thumb-half {
    background:#0f172a no-repeat center / cover;
    border-right:1px solid rgba(255,255,255,.06);
}
.bv-best-thumb-half:last-child { border-right:0; }
.bv-best-thumb-solo { background:#0f172a no-repeat center / cover; grid-column:1/-1; }
.bv-best-empty {
    grid-column:1/-1; display:flex; align-items:center; justify-content:center;
    color:#64748b; font-size:30px; background:#1e293b;
}
.bv-best-rank {
    position:absolute; top:8px; left:8px;
    background:linear-gradient(135deg, #fbbf24, #f59e0b);
    color:#7c2d12; font-size:11px; font-weight:700;
    padding:3px 8px; border-radius:10px;
    box-shadow:0 2px 6px rgba(245,158,11,.3);
}
.bv-best-cap { padding:10px 12px 12px; }
.bv-best-cat {
    display:inline-block; font-size:10px; color:var(--bv-main, #0d9488);
    font-weight:600; margin-bottom:4px;
}
.bv-best-title {
    display:block; font-size:13px; font-weight:600; color:#1f2937;
    line-height:1.4; letter-spacing:-.01em;
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

/* ── 메인 카드 그리드 ── */
.bv-baf-grid {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
@media (max-width:1100px) { .bv-baf-grid { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:760px)  { .bv-baf-grid { grid-template-columns:repeat(2, 1fr); gap:12px; } }
@media (max-width:420px)  { .bv-baf-grid { grid-template-columns:1fr; } }

.bv-baf-card {
    display:flex; flex-direction:column;
    background:#fff; border-radius:12px; overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    text-decoration:none; color:inherit;
    transition:transform .2s ease, box-shadow .2s ease;
}
.bv-baf-card:hover {
    transform:translateY(-4px);
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.bv-baf-thumb {
    position:relative; aspect-ratio:1/1;
    background:#0f172a; overflow:hidden;
    display:grid;
}
.bv-baf-thumb:has(.bv-baf-thumb-half.after) { grid-template-columns:1fr 1fr; }

.bv-baf-thumb-half, .bv-baf-thumb-solo {
    position:relative;
    background:#0f172a no-repeat center / cover;
    transition:transform .4s ease;
}
.bv-baf-thumb-half.before { border-right:1px solid rgba(255,255,255,.08); }
.bv-baf-thumb-solo { grid-column:1/-1; }
.bv-baf-card:hover .bv-baf-thumb-half,
.bv-baf-card:hover .bv-baf-thumb-solo { transform:scale(1.04); }

.bv-baf-thumb-lbl {
    position:absolute; bottom:8px; padding:3px 9px;
    background:rgba(20,20,20,.72); color:#fff;
    font-size:10px; font-weight:600; letter-spacing:.04em;
    border-radius:10px;
}
.bv-baf-thumb-half.before .bv-baf-thumb-lbl { left:8px; }
.bv-baf-thumb-half.after  .bv-baf-thumb-lbl {
    right:8px; background:var(--bv-main, #0d9488);
}
.bv-baf-thumb-solo .bv-baf-thumb-lbl { left:8px; }

.bv-baf-empty {
    grid-column:1/-1; display:flex; align-items:center; justify-content:center;
    color:#64748b; font-size:34px;
    background:linear-gradient(135deg, #1e293b, #0f172a);
}

.bv-baf-angle-chip {
    position:absolute; top:10px; right:10px; z-index:3;
    padding:4px 10px; border-radius:12px;
    background:rgba(255,255,255,.96); color:#1f2937;
    font-size:10px; font-weight:600;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    backdrop-filter:saturate(1.4);
}

.bv-baf-body { padding:14px 16px 16px; flex:1; display:flex; flex-direction:column; }
.bv-baf-cat {
    display:inline-block; padding:3px 9px; border-radius:10px;
    background:color-mix(in srgb, var(--bv-main, #0d9488) 12%, #fff);
    color:var(--bv-main, #0d9488); font-size:11px; font-weight:600;
    letter-spacing:.02em; margin-bottom:8px; align-self:flex-start;
}
.bv-baf-title {
    margin:0 0 10px; font-size:14px; font-weight:600; color:#1f2937;
    line-height:1.45; letter-spacing:-.01em;
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    min-height:2.9em;
}
.bv-baf-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; }
.bv-baf-tag {
    padding:2px 8px; border-radius:4px;
    background:#f5f5f5; color:#6b7280;
    font-size:11px; font-weight:500;
}

/* ============================================================
 * 레이아웃: baf_vertical (세로 스크롤 — 모바일 우선)
 * 케이스마다 모든 시점/각도를 위에서 아래로 길게 펼쳐서 보여줌
 * 의료 SNS / 인스타그램 피드 톤
 * ============================================================ */
.bv-vt-feed {
    max-width:680px; margin:0 auto;
    display:flex; flex-direction:column; gap:36px;
}
@media (max-width:760px) { .bv-vt-feed { gap:28px; } }

.bv-vt-card {
    background:#fff; border-radius:14px; overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    transition:box-shadow .2s ease;
}
.bv-vt-card:hover { box-shadow:0 6px 16px rgba(0,0,0,.08); }

.bv-vt-head {
    display:flex; align-items:center; gap:12px;
    padding:14px 18px; border-bottom:1px solid #f3f4f6;
}
.bv-vt-avatar {
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg, var(--bv-main, #0d9488), color-mix(in srgb, var(--bv-main, #0d9488) 60%, #000));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:700;
    flex-shrink:0;
}
.bv-vt-head-info { flex:1; min-width:0; }
.bv-vt-cat {
    display:inline-block; padding:2px 8px; border-radius:10px;
    background:color-mix(in srgb, var(--bv-main, #0d9488) 12%, #fff);
    color:var(--bv-main, #0d9488); font-size:11px; font-weight:600;
    margin-bottom:4px;
}
.bv-vt-title {
    display:block; font-size:15px; font-weight:600; color:#1f2937;
    text-decoration:none; line-height:1.4;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bv-vt-title:hover { color:var(--bv-main, #0d9488); }
.bv-vt-date { font-size:11px; color:#9ca3af; flex-shrink:0; }

/* 시점별 row — 케이스마다 자기 case_phases 만큼 반복 */
.bv-vt-rows { padding:8px 0; }
.bv-vt-row {
    padding:12px 18px;
    border-bottom:1px solid #f9fafb;
}
.bv-vt-row:last-child { border-bottom:0; }
.bv-vt-row-head {
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.bv-vt-phase-dot {
    width:8px; height:8px; border-radius:50%;
    background:var(--bv-main, #0d9488);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--bv-main, #0d9488) 18%, transparent);
}
.bv-vt-phase-lbl {
    font-size:13px; font-weight:600; color:#1f2937;
    letter-spacing:-.01em;
}
.bv-vt-phase-meta { font-size:11px; color:#9ca3af; }

.bv-vt-imgs {
    display:grid; gap:6px;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
}
.bv-vt-imgs.cols-1 { grid-template-columns:1fr; }
.bv-vt-imgs.cols-2 { grid-template-columns:1fr 1fr; }
.bv-vt-imgs.cols-3 { grid-template-columns:repeat(3, 1fr); }

.bv-vt-img-wrap {
    position:relative; aspect-ratio:1/1;
    background:#0f172a no-repeat center / cover;
    border-radius:8px; overflow:hidden;
    cursor:zoom-in;
    transition:transform .25s ease;
}
.bv-vt-img-wrap:hover { transform:scale(1.02); }
.bv-vt-angle-chip {
    position:absolute; top:6px; left:6px;
    padding:2px 7px; border-radius:8px;
    background:rgba(255,255,255,.95); color:#1f2937;
    font-size:10px; font-weight:600;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.bv-vt-empty-row {
    display:flex; align-items:center; justify-content:center;
    height:100px; color:#cbd5e1; font-size:24px;
    background:linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius:8px;
}

.bv-vt-foot {
    padding:14px 18px; border-top:1px solid #f3f4f6;
    display:flex; flex-wrap:wrap; gap:6px;
    background:#fafbfc;
}
.bv-vt-tag {
    padding:3px 10px; border-radius:10px;
    background:#fff; border:1px solid #e5e7eb;
    color:#6b7280; font-size:11px; font-weight:500;
}
.bv-vt-detail {
    margin-left:auto; align-self:center;
    color:var(--bv-main, #0d9488); font-size:12px; font-weight:600;
    text-decoration:none;
}
.bv-vt-detail:hover { text-decoration:underline; }

/* ============================================================
 * 레이아웃: baf_timeline (회복 과정 타임라인 — 시점 가로 step)
 * ============================================================ */
.bv-tl-feed { display:flex; flex-direction:column; gap:24px; }

.bv-tl-card {
    background:#fff; border-radius:14px;
    padding:22px 24px;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    transition:box-shadow .2s ease;
}
.bv-tl-card:hover { box-shadow:0 6px 16px rgba(0,0,0,.08); }

.bv-tl-head {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:16px; margin-bottom:18px;
    padding-bottom:16px; border-bottom:1px solid #f3f4f6;
}
.bv-tl-head-text { flex:1; min-width:0; }
.bv-tl-cat {
    display:inline-block; padding:3px 10px; border-radius:11px;
    background:color-mix(in srgb, var(--bv-main, #0d9488) 12%, #fff);
    color:var(--bv-main, #0d9488); font-size:11px; font-weight:600;
    margin-bottom:8px;
}
.bv-tl-title {
    display:block; font-size:18px; font-weight:700; color:#1f2937;
    text-decoration:none; line-height:1.4;
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.bv-tl-title:hover { color:var(--bv-main, #0d9488); }
.bv-tl-head-meta {
    display:flex; gap:6px; flex-wrap:wrap;
    margin-top:6px; font-size:12px; color:#9ca3af;
}
.bv-tl-detail {
    flex-shrink:0;
    color:var(--bv-main, #0d9488); font-size:13px; font-weight:600;
    text-decoration:none; padding:7px 14px;
    border:0; border-radius:999px;
    background:color-mix(in srgb, var(--bv-main, #0d9488) 12%, #fff);
    transition:background .15s ease, color .15s ease;
}
.bv-tl-detail:hover {
    background:var(--bv-main, #0d9488); color:#fff;
}

/* 가로 스크롤 타임라인 트랙 */
.bv-tl-track {
    display:flex; gap:0; overflow-x:auto; overflow-y:hidden;
    padding:8px 2px 12px; scroll-snap-type:x proximity;
    scrollbar-width:thin;
    align-items:flex-start;
}
.bv-tl-track::-webkit-scrollbar { height:6px; }
.bv-tl-track::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:3px; }

.bv-tl-step {
    flex:0 0 180px;
    scroll-snap-align:start;
    position:relative;
    display:flex; flex-direction:column; align-items:stretch;
    padding-right:36px;  /* 화살표 공간 */
}
.bv-tl-step:last-child { padding-right:0; }

.bv-tl-step-num {
    position:absolute; top:6px; left:6px; z-index:3;
    width:24px; height:24px; border-radius:50%;
    background:var(--bv-main, #0d9488); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700;
    box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.bv-tl-step.is-start .bv-tl-step-num { background:#6b7280; }
.bv-tl-step.is-end .bv-tl-step-num   { background:linear-gradient(135deg, #f59e0b, #ef4444); }

.bv-tl-step-img {
    display:block; aspect-ratio:1/1;
    background:#0f172a no-repeat center / cover;
    border-radius:10px;
    border:3px solid #fff;
    box-shadow:0 1px 3px rgba(0,0,0,.08);
    transition:transform .25s ease, box-shadow .25s ease;
}
.bv-tl-step-img:hover {
    transform:scale(1.04);
    box-shadow:0 6px 16px rgba(0,0,0,.10);
}

.bv-tl-step-cap {
    margin-top:10px; padding:0 4px;
    text-align:center;
}
.bv-tl-step-phase {
    display:block; font-size:13px; font-weight:700; color:#1f2937;
    letter-spacing:-.01em;
}
.bv-tl-step-note {
    display:block; margin-top:3px;
    font-size:11px; color:#6b7280; font-style:italic;
}

.bv-tl-arrow {
    position:absolute; right:6px; top:calc(50% - 22px);
    transform:translateY(-50%);
    color:#cbd5e1; font-size:22px; font-weight:300;
    user-select:none;
    transition:color .25s ease;
}
.bv-tl-card:hover .bv-tl-arrow { color:var(--bv-main, #0d9488); }

.bv-tl-empty {
    flex:1; padding:40px;
    text-align:center; color:#cbd5e1;
    background:linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius:10px;
}

@media (max-width:760px) {
    .bv-tl-card { padding:18px 16px; }
    .bv-tl-head { flex-direction:column; align-items:stretch; gap:10px; }
    .bv-tl-detail { align-self:flex-start; }
    .bv-tl-step { flex:0 0 140px; padding-right:28px; }
    .bv-tl-step-img { border-width:2px; }
    .bv-tl-arrow { right:3px; font-size:18px; }
}

/* ============================================================
 * 레이아웃: baf_compare (다중 케이스 동시 시점 비교)
 * ============================================================ */
.bv-cmp-wrap { display:flex; flex-direction:column; gap:18px; }

/* 시점 chip 바 — sticky 로 스크롤 시 따라옴 */
.bv-cmp-chips {
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; flex-wrap:wrap;
    gap:14px;
    padding:14px 18px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    border:0;
}
.bv-cmp-chips-lbl {
    font-size:12px; font-weight:700; color:#1f2937;
    letter-spacing:-.01em;
    flex-shrink:0;
}
.bv-cmp-chips-track {
    display:flex; gap:6px; flex-wrap:wrap;
    flex:1; min-width:0;
}
.bv-cmp-chips-help {
    font-size:11px; color:#9ca3af;
    margin-left:auto;
}
.bv-cmp-chip {
    padding:6px 14px; border-radius:14px;
    background:#f3f4f6; border:1px solid transparent;
    color:#4b5563; font-size:12px; font-weight:600;
    cursor:pointer;
    transition:all .15s ease;
    white-space:nowrap;
}
.bv-cmp-chip:hover {
    background:color-mix(in srgb, var(--bv-main, #0d9488) 10%, #fff);
    color:var(--bv-main, #0d9488);
}
.bv-cmp-chip.is-active {
    background:var(--bv-main, #0d9488);
    color:#fff;
}

@media (max-width:760px) {
    .bv-cmp-chips { padding:12px 14px; gap:10px; }
    .bv-cmp-chips-help { display:none; }
}

/* 카드 그리드 */
.bv-cmp-grid {
    display:flex; flex-wrap:wrap;
    gap:16px;
}
.bv-cmp-grid > .bv-cmp-card { flex:1 1 240px; max-width:100%; }
@media (max-width:480px) {
    .bv-cmp-grid { gap:10px; }
    .bv-cmp-grid > .bv-cmp-card { flex:1 1 calc(50% - 5px); }
}

.bv-cmp-card {
    background:#fff; border-radius:12px; overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    transition:transform .25s ease, box-shadow .25s ease;
    display:flex; flex-direction:column;
}
.bv-cmp-card:hover {
    transform:translateY(-3px);
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.bv-cmp-card.is-na { opacity:.55; }

/* 이미지 영역 */
.bv-cmp-img {
    position:relative; display:block;
    aspect-ratio:1/1;
    background:#0f172a no-repeat center / cover;
    transition:background-image .35s ease;
}
.bv-cmp-empty {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    color:#64748b; font-size:34px;
    background:linear-gradient(135deg, #1e293b, #0f172a);
}
.bv-cmp-card.is-na .bv-cmp-img {
    background:linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
}

.bv-cmp-phase-tag {
    position:absolute; top:10px; left:10px; z-index:3;
    padding:4px 10px; border-radius:11px;
    background:var(--bv-main, #0d9488); color:#fff;
    font-size:11px; font-weight:700; letter-spacing:.02em;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
    transition:transform .25s ease;
}
.bv-cmp-card:hover .bv-cmp-phase-tag { transform:scale(1.06); }

.bv-cmp-angle-tag {
    position:absolute; bottom:10px; right:10px; z-index:3;
    padding:3px 9px; border-radius:9px;
    background:rgba(255,255,255,.95); color:#1f2937;
    font-size:10px; font-weight:600;
    box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.bv-cmp-angle-tag:empty { display:none; }

.bv-cmp-na {
    position:absolute; inset:50% 0 0 0;
    transform:translateY(-50%);
    text-align:center;
    font-size:13px; font-weight:600; color:#9ca3af;
    pointer-events:none;
}

/* 본문 */
.bv-cmp-body {
    padding:12px 14px 14px;
    display:flex; flex-direction:column; gap:6px;
}
.bv-cmp-cat {
    align-self:flex-start;
    padding:2px 9px; border-radius:10px;
    background:color-mix(in srgb, var(--bv-main, #0d9488) 12%, #fff);
    color:var(--bv-main, #0d9488);
    font-size:10px; font-weight:600;
    letter-spacing:.02em;
}
.bv-cmp-title {
    margin:0; font-size:13px; font-weight:600; line-height:1.4;
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    min-height:2.7em;
}
.bv-cmp-title a { color:#1f2937; text-decoration:none; }
.bv-cmp-title a:hover { color:var(--bv-main, #0d9488); }

.bv-cmp-meta {
    display:flex; flex-wrap:wrap; gap:4px;
    margin-top:auto;
}
.bv-cmp-meta-tag {
    padding:2px 7px; border-radius:4px;
    background:#f5f5f5; color:#6b7280;
    font-size:10px; font-weight:500;
}

/* ============================================================
 * 레이아웃: baf_blog (의사 매거진형 — 큰 비주얼 + 본문, 전체 화면)
 * ============================================================ */
.bv-blog-feed {
    display:flex; flex-direction:column; gap:36px;
    width:100%;     /* 전체 화면 (max-width 제거) */
}

.bv-blog-card {
    background:#fff; border-radius:16px; overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    transition:box-shadow .25s ease, transform .25s ease;
    display:grid; grid-template-columns:minmax(380px, 44%) 1fr; gap:0;
}
.bv-blog-card:hover {
    box-shadow:0 6px 16px rgba(0,0,0,.08);
    transform:translateY(-3px);
}
@media (max-width:880px) {
    .bv-blog-card { grid-template-columns:1fr; }
}

/* 비주얼 영역 */
.bv-blog-visual {
    position:relative;
    display:block;
    background:#0f172a;
    overflow:hidden;
    aspect-ratio:4/3;     /* 더 와이드한 캔버스 */
}
@media (max-width:880px) {
    .bv-blog-visual { aspect-ratio:16/10; }
}

.bv-blog-pair {
    display:grid; grid-template-columns:1fr 1fr;
    height:100%; gap:1px;
}
.bv-blog-pair-img {
    position:relative;
    background:#0f172a no-repeat center / cover;
    transition:transform .4s ease;
}
.bv-blog-card:hover .bv-blog-pair-img { transform:scale(1.04); }

.bv-blog-pair-lbl {
    position:absolute; bottom:12px; padding:4px 11px;
    background:rgba(20,20,20,.72); color:#fff;
    font-size:11px; font-weight:600; letter-spacing:.04em;
    border-radius:11px;
}
.bv-blog-pair-img:not(.after) .bv-blog-pair-lbl { left:12px; }
.bv-blog-pair-img.after .bv-blog-pair-lbl       { right:12px; background:var(--bv-main, #0d9488); }

.bv-blog-solo {
    position:relative; height:100%;
    background:#0f172a no-repeat center / cover;
    transition:transform .4s ease;
}
.bv-blog-card:hover .bv-blog-solo { transform:scale(1.04); }
.bv-blog-solo-lbl {
    position:absolute; bottom:12px; left:12px; padding:4px 11px;
    background:rgba(20,20,20,.72); color:#fff;
    font-size:11px; font-weight:600; letter-spacing:.04em;
    border-radius:11px;
}

.bv-blog-empty {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    color:#64748b; font-size:36px;
    background:linear-gradient(135deg, #1e293b, #0f172a);
}

.bv-blog-cat-badge {
    position:absolute; top:14px; left:14px; z-index:3;
    padding:5px 12px; border-radius:13px;
    background:rgba(255,255,255,.95);
    color:var(--bv-main, #0d9488);
    font-size:11px; font-weight:700; letter-spacing:.02em;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}

/* 본문 영역 */
.bv-blog-body {
    padding:26px 28px;
    display:flex; flex-direction:column;
}
@media (max-width:760px) {
    .bv-blog-body { padding:20px 18px; }
}

.bv-blog-byline {
    display:flex; align-items:center; gap:10px;
    margin-bottom:14px;
    font-size:12px; color:#6b7280;
}
.bv-blog-avatar {
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg, var(--bv-main, #0d9488), color-mix(in srgb, var(--bv-main, #0d9488) 50%, #000));
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    color:#fff; font-size:13px; font-weight:700;
    flex-shrink:0;
}
.bv-blog-avatar img { width:100%; height:100%; object-fit:cover; }
.bv-blog-byline-text { line-height:1.3; }
.bv-blog-byline-text strong {
    display:block; color:#1f2937; font-size:13px; font-weight:700;
}
.bv-blog-byline-text em {
    display:block; font-style:normal; color:#9ca3af; font-size:11px;
    margin-top:1px;
}
.bv-blog-byline-meta {
    margin-left:auto; font-size:11px; color:#9ca3af;
    flex-shrink:0; text-align:right; line-height:1.4;
}

.bv-blog-title {
    margin:0 0 12px;
    font-size:21px; font-weight:700;
    line-height:1.35; letter-spacing:-.015em;
}
.bv-blog-title a {
    color:#111827; text-decoration:none;
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.bv-blog-title a:hover { color:var(--bv-main, #0d9488); }

.bv-blog-excerpt {
    margin:0 0 18px;
    color:#4b5563; font-size:14.5px; line-height:1.8;
    white-space:pre-line;        /* 줄바꿈 보존 (단락 구분) */
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;
}
@media (max-width:760px) {
    .bv-blog-excerpt { -webkit-line-clamp:5; font-size:14px; line-height:1.7; }
}

.bv-blog-foot {
    margin-top:auto;
    display:flex; flex-wrap:wrap; align-items:center;
    gap:10px;
    padding-top:16px; border-top:1px solid #f3f4f6;
}
.bv-blog-tags { display:flex; flex-wrap:wrap; gap:6px; flex:1; min-width:0; }
.bv-blog-tag {
    padding:3px 10px; border-radius:10px;
    background:#f3f4f6; color:#4b5563;
    font-size:11px; font-weight:500;
}
.bv-blog-tag.angle { background:#fff; border:1px solid #e5e7eb; color:#374151; }
.bv-blog-tag.phase {
    background:color-mix(in srgb, var(--bv-main, #0d9488) 12%, #fff);
    color:var(--bv-main, #0d9488); font-weight:600;
}
.bv-blog-readmore {
    color:var(--bv-main, #0d9488); font-size:13px; font-weight:700;
    text-decoration:none; flex-shrink:0;
    transition:transform .2s ease;
}
.bv-blog-readmore:hover { transform:translateX(3px); }

/* ============================================================
 * VIEW (글 상세) — 슬라이더 메인 + 사이드바
 * ============================================================ */
.bv-view { background:#fff; border-radius:12px; padding:32px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.bv-view-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid #f0f0f0; }
.bv-view-back { color:#666; text-decoration:none; font-size:13px; }
.bv-view-grid { display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start; }
.bv-view-side { position:sticky; top:80px; align-self:start; }
@media (max-width:900px){ .bv-view-grid { grid-template-columns:1fr; } .bv-view-side { position:static; } }
.bv-view-main h1 { font-size:24px; font-weight:700; margin:0 0 6px; }
.bv-view-meta-line { font-size:13px; color:#888; margin-bottom:18px; }
.bv-view-meta-line .badge { display:inline-block; padding:3px 8px; background:var(--bv-main, #0d9488); color:#fff; border-radius:4px; font-size:11px; margin-right:6px; }
.bv-view-content { margin-top:24px; line-height:1.75; font-size:15px; color:#333; }
.bv-view-content img { max-width:100%; height:auto; border-radius:6px; margin:8px 0; }

/* 사이드: 메타 박스 + 즐겨찾기 + 공유 */
.bv-side-card { background:#fafafa; border:1px solid #eee; border-radius:10px; padding:18px; margin-bottom:14px; }
.bv-side-card h4 { margin:0 0 12px; font-size:13px; font-weight:600; color:#444; }
.bv-meta-row { display:flex; padding:6px 0; font-size:13px; border-bottom:1px dashed #eee; }
.bv-meta-row:last-child { border-bottom:0; }
.bv-meta-row .k { width:90px; color:#888; flex-shrink:0; }
.bv-meta-row .v { flex:1; color:#333; }
.bv-fav-btn { display:block; width:100%; padding:11px; background:rgba(0,0,0,.07); border:0; border-radius:12px; cursor:pointer; font-size:13px; color:#666; font-weight:600; transition:background .15s; }
.bv-fav-btn:hover { background:rgba(0,0,0,.12); }
.bv-fav-btn.on { background:#fef3c7; color:#92400e; }
.bv-share-btn { display:block; width:100%; padding:11px; background:var(--bv-main, #0d9488); color:#fff; border:0; border-radius:12px; cursor:pointer; font-size:13px; font-weight:600; margin-top:6px; transition:filter .15s, transform .15s; }
.bv-share-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }

/* 유사 케이스 추천 */
.bv-similar { margin-top:20px; }
.bv-similar h3 { font-size:14px; font-weight:600; margin:0 0 10px; }

/* ============================================================
 * 비로그인 블러 + LOGIN 오버레이
 * ============================================================ */
.bv-locked { position:relative; }
.bv-locked .baf-slider-img,
.bv-locked .baf-slider-img-single,
.bv-locked .baf-slider-img-base,
.bv-locked .baf-slider-img-overlay,
.bv-locked .bv-split-img,
.bv-locked .bv-hover-img,
.bv-locked .bv-vt-img,
.bv-locked .bv-card-thumb,
.bv-locked .bv-blog-thumb,
.bv-locked .bv-tl-img,
.bv-locked .bv-best-card { filter:blur(7px); transform:scale(1.04); }
/* 은은한 스크림 — 과한 블러 대신 부드러운 그라데이션으로 가독성 확보 */
.bv-login-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; z-index:10; pointer-events:none; border-radius:8px; background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.34) 100%); }
.bv-login-overlay .text { color:#fff; font-size:14px; font-weight:500; text-align:center; line-height:1.6; padding:0 16px; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.bv-login-btn { pointer-events:auto; display:inline-flex; align-items:center; gap:6px; padding:11px 34px; background:var(--bv-main, #0d9488); color:#fff; border:0; border-radius:999px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; box-shadow:0 4px 16px rgba(0,0,0,.10); transition:transform .15s, filter .15s; }
.bv-login-btn:hover { transform:translateY(-1px); filter:brightness(1.08); }

/* ============================================================
 * Lightbox
 * ============================================================ */
.bv-lightbox { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; }
.bv-lightbox.open { display:flex; }
.bv-lightbox img { max-width:96vw; max-height:96vh; object-fit:contain; }
.bv-lightbox-close { position:fixed; top:20px; right:20px; width:40px; height:40px; border-radius:50%; background:#fff; border:0; font-size:20px; cursor:pointer; }

/* ============================================================
 * 글쓰기 폼 — 의료/뷰티 톤 카드형
 * ============================================================ */
.bv-write {
    background:#fff; border-radius:16px; padding:36px 40px;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    max-width:920px; margin:0 auto;
}
.bv-write-head { margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid #f0f0f0; }
.bv-write-head h2 { margin:0 0 6px; font-size:24px; font-weight:700; color:#0f172a; letter-spacing:-.01em; }
.bv-write-help { margin:0; font-size:13px; color:#6b7280; line-height:1.6; }
.bv-write-help strong { color:var(--bv-main, #0d9488); }

.bv-write-tbl { width:100%; border-collapse:collapse; margin-bottom:24px; }
.bv-write-tbl th {
    width:160px; padding:18px 4px 18px 0; text-align:left; vertical-align:top;
    border-bottom:1px solid #f3f4f6;
    font-weight:500; color:#374151; font-size:13px;
}
.bv-write-tbl td {
    padding:14px 0 14px 16px; border-bottom:1px solid #f3f4f6;
}
.bv-write-tbl tr:last-child th, .bv-write-tbl tr:last-child td { border-bottom:0; }
.bv-write-tbl .req { color:#ef4444; margin-left:2px; }
.bv-write-tbl tr.section th {
    background:linear-gradient(135deg, var(--bv-main, #0d9488), color-mix(in srgb, var(--bv-main, #0d9488) 80%, #000 20%));
    color:#fff; padding:12px 16px; font-weight:600; font-size:13px;
    border:0; border-radius:8px; letter-spacing:.02em;
}
.bv-write-tbl tr.section td { display:none; }
.bv-write-tbl tr.section + tr th { padding-top:22px; }

.bv-input {
    padding:11px 14px; border:1px solid #e5e7eb; border-radius:8px;
    font-size:14px; box-sizing:border-box; font-family:inherit;
    background:#fff; color:#1f2937;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.bv-input.wide { width:100%; }
.bv-input.small { width:160px; }
.bv-input:focus {
    outline:none; border-color:var(--bv-main, #0d9488);
    box-shadow:0 0 0 4px rgba(13,148,136,.12);
}
textarea.bv-input { font-family:inherit; resize:vertical; min-height:80px; }
select.bv-input {
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:right 14px center;
    padding-right:36px;
}

/* 사진 업로드 매트릭스 (각도 × 시점) */
.bv-photo-matrix { display:grid; gap:14px; }
.bv-photo-row { display:grid; grid-template-columns:80px repeat(auto-fit, minmax(160px,1fr)); gap:10px; align-items:start; padding:10px; background:#fafafa; border-radius:8px; }
.bv-photo-row .angle-label { font-size:13px; font-weight:600; color:#0d9488; padding-top:8px; }
.bv-photo-cell { background:#fff; border:2px dashed #cbd5e1; border-radius:6px; padding:10px; text-align:center; cursor:pointer; }
.bv-photo-cell:hover { border-color:var(--bv-main, #0d9488); }
.bv-photo-cell .phase-label { font-size:11px; color:#888; margin-bottom:6px; }
.bv-photo-cell input[type="file"] { font-size:11px; width:100%; }
.bv-photo-cell .preview { margin-top:6px; }
.bv-photo-cell .preview img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; }
.bv-photo-cell .existing { margin-bottom:6px; position:relative; }
.bv-photo-cell .existing img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; }
.bv-photo-cell .existing .del { position:absolute; top:4px; right:4px; padding:2px 6px; background:rgba(220,38,38,.85); color:#fff; border-radius:3px; font-size:11px; cursor:pointer; }

.bv-write-actions {
    display:flex; gap:10px; padding-top:24px; border-top:1px solid #f0f0f0;
    justify-content:flex-end;
}
.bv-btn-submit {
    padding:13px 32px; background:var(--bv-main, #0d9488); color:#fff;
    border:0; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer;
    transition:transform .18s, filter .18s;
    letter-spacing:.02em;
}
.bv-btn-submit:hover { transform:translateY(-1px); filter:brightness(1.08); }
.bv-btn-submit:active { transform:translateY(0); }
.bv-btn-cancel {
    padding:13px 28px; background:rgba(0,0,0,.07); color:#6b7280;
    border:0; border-radius:12px; font-size:14px; font-weight:600;
    text-decoration:none; display:inline-flex; align-items:center;
    transition:background .18s;
}
.bv-btn-cancel:hover { background:rgba(0,0,0,.12); }

.bv-help { display:block; margin-top:6px; color:#9ca3af; font-size:12px; line-height:1.5; }
.bv-radio-group { display:flex; flex-wrap:wrap; gap:14px; padding:6px 0; }
.bv-radio-group label {
    font-size:13px; cursor:pointer; user-select:none;
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px; border:1px solid #e5e7eb; border-radius:8px;
    background:#fff; transition:border-color .18s, background .18s;
}
.bv-radio-group label:hover { border-color:var(--bv-main, #0d9488); background:rgba(13,148,136,.04); }
.bv-radio-group input[type="radio"], .bv-radio-group input[type="checkbox"] {
    appearance:auto !important; pointer-events:auto !important;
    accent-color:var(--bv-main, #0d9488); margin:0;
}

@media (max-width: 700px) {
    .bv-write { padding:24px 18px; border-radius:12px; }
    .bv-write-tbl th { display:block; width:auto; padding:12px 0 4px; }
    .bv-write-tbl td { display:block; padding:0 0 16px; }
}
.bv-write-tbl .req { color:#dc2626; }
.bv-write-tbl .section th { background:var(--bv-main, #0d9488); color:#fff; padding:10px 16px; border:0; font-weight:600; font-size:13px; }
.bv-input.small { width:140px; }
.bv-help { display:block; margin-top:4px; color:#888; font-size:11px; }
.bv-radio-group { display:flex; flex-wrap:wrap; gap:14px; padding:6px 0; }
.bv-radio-group label { font-size:13px; cursor:pointer; user-select:none; }
.bv-radio-group input[type="radio"], .bv-radio-group input[type="checkbox"] { appearance:auto !important; pointer-events:auto !important; accent-color:var(--bv-main, #0d9488); margin-right:4px; }
.bv-photo-matrix-help { padding:8px 0 12px; }

/* ============================================================
 * View 페이지 추가 클래스
 * ============================================================ */
.bv-view { padding:24px; background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.bv-view-actions { display:flex; gap:6px; }
.bv-view-cat { display:inline-block; padding:4px 10px; background:var(--bv-main, #0d9488); color:#fff; border-radius:4px; font-size:11px; margin-bottom:8px; }
.bv-view-title { font-size:24px; font-weight:700; margin:0 0 8px; line-height:1.4; }
.bv-view-meta { font-size:13px; color:#888; margin-bottom:18px; }
.bv-view-meta span { margin-right:6px; }
.bv-view-slider-wrap { position:relative; margin-bottom:14px; }

/* Carousel — 케이스/페어 간 슬라이드 (translate3d, 깜박임 없음) */
.bv-carousel { position:relative; overflow:hidden; border-radius:12px; }
.bv-carousel-track {
    display:flex; will-change:transform;
    transition:transform .55s cubic-bezier(.4, 0, .2, 1);
}
.bv-carousel-slide {
    flex:0 0 100%; min-width:0; max-width:100%;
    position:relative;
}
.bv-carousel-slide .baf-slider { border-radius:0; box-shadow:none; }
.bv-carousel { background:transparent; }

/* 슬라이드 정보 막대 — 슬라이더 하단 (각도 / 시점 / 분류) */
.bv-slide-tagbar {
    position:absolute; bottom:14px; left:14px; right:14px; z-index:5;
    display:flex; flex-wrap:wrap; gap:6px;
    pointer-events:none; justify-content:space-between; align-items:center;
}
.bv-tag-angle, .bv-tag-phase, .bv-tag-cat {
    display:inline-flex; align-items:center;
    padding:6px 14px; border-radius:14px;
    font-size:13px; font-weight:600; letter-spacing:.02em;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    line-height:1;
}
.bv-tag-angle { background:rgba(255,255,255,.94); color:#1f2937; }
.bv-tag-phase { background:var(--bv-main, #0d9488); color:#fff; margin-left:auto; }
.bv-tag-cat   { background:rgba(0,0,0,.62); color:#fff; }
@media (max-width: 600px) {
    .bv-slide-tagbar { bottom:10px; left:10px; right:10px; gap:4px; }
    .bv-tag-angle, .bv-tag-phase, .bv-tag-cat { padding:4px 10px; font-size:11px; }
}

/* 슬라이더 좌우 화살표 + 캡션 + dots */
.bv-slide-nav {
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%;
    background:rgba(0,0,0,.55); color:#fff; border:0;
    font-size:24px; line-height:1; cursor:pointer; z-index:7;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    transition:background .18s, transform .18s;
}
.bv-slide-nav:hover { background:rgba(0,0,0,.75); }
.bv-slide-nav.prev { left:14px; }
.bv-slide-nav.next { right:14px; }

@media (max-width: 700px) {
    .bv-slide-nav { width:38px; height:38px; font-size:20px; }
    .bv-slide-nav.prev { left:8px; }
    .bv-slide-nav.next { right:8px; }
}
.bv-slide-nav:active { transform:translateY(-50%) scale(.96); }

.bv-slide-info {
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    margin:14px 0 6px; padding:10px 14px;
    background:#f9fafb; border-radius:10px; border:1px solid #f0f0f0;
    flex-wrap:wrap;
}
.bv-slide-caption {
    font-size:14px; font-weight:600; color:var(--bv-main, #0d9488);
    letter-spacing:-.01em;
}
.bv-slide-counter { font-size:12px; color:#9ca3af; font-variant-numeric:tabular-nums; }
.bv-slide-counter span { color:#1f2937; font-weight:600; }
.bv-slide-dots { display:flex; gap:6px; align-items:center; }
.bv-slide-dot {
    width:8px; height:8px; border-radius:50%;
    background:#d1d5db; border:0; cursor:pointer; padding:0;
    transition:background .18s, transform .18s;
}
.bv-slide-dot:hover { background:#9ca3af; transform:scale(1.2); }
.bv-slide-dot.active { background:var(--bv-main, #0d9488); width:24px; border-radius:4px; }
.bv-slide-detail {
    margin-left:auto; padding:7px 14px;
    background:var(--bv-main, #0d9488); color:#fff !important;
    border-radius:8px; text-decoration:none;
    font-size:12px; font-weight:600;
    transition:filter .15s, transform .15s;
}
.bv-slide-detail:hover { filter:brightness(1.1); transform:translateX(2px); }

/* ============================================================
 * baf_slider 레이아웃 — 레퍼런스 디자인 (no border, hover-reveal arrows)
 * ============================================================ */
.bv-stage-wrap {
    background:transparent; padding:0 0 24px; position:relative;
    border:0; box-shadow:none; border-radius:0;
}

/* 메인 스테이지 — carousel + 화살표 (슬라이더 위 hover reveal) */
.bv-stage { position:relative; padding:0; }
.bv-stage-nav {
    position:absolute; top:50%; transform:translateY(-50%) scale(.92);
    width:54px; height:54px; border-radius:50%;
    background:rgba(255,255,255,.92);
    border:0; color:#333; cursor:pointer; z-index:7;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 16px rgba(0,0,0,.10);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, color .2s, background .2s;
}
.bv-stage-nav svg { width:24px; height:24px; }
.bv-stage:hover .bv-stage-nav,
.bv-stage:focus-within .bv-stage-nav {
    opacity:1; pointer-events:auto;
    transform:translateY(-50%) scale(1);
}
.bv-stage-nav:hover {
    color:var(--bv-main, #0d9488);
    background:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.14);
}
.bv-stage-nav.prev { left:14px; }
.bv-stage-nav.next { right:14px; }
.bv-stage-nav:active { transform:translateY(-50%) scale(.95); }

/* 모바일 — 평소에도 화살표 표시 (hover 없음) */
@media (hover: none) {
    .bv-stage-nav { opacity:1; pointer-events:auto; transform:translateY(-50%) scale(1); }
}

.bv-stage .bv-carousel { background:transparent; }
.bv-stage .baf-slider { border-radius:8px; box-shadow:none; }

/* 케이스 안 angle 별 슬라이더 — display 토글 (깜박임 없음) */
.bv-case-sliders { position:relative; }
.bv-case-slider { display:none; }
.bv-case-slider.is-active { display:block; }

/* 케이스 정보 (카테고리 + 제목 + 점선 + 부제 + 각도 탭) */
.bv-case-info { padding:28px 12px 8px; text-align:center; }
.bv-case-tag-row {
    display:inline-flex; align-items:center; gap:14px;
    margin-bottom:18px; flex-wrap:wrap; justify-content:center;
}
.bv-case-cat {
    display:inline-flex; align-items:center;
    padding:6px 18px; border-radius:18px;
    background:color-mix(in srgb, var(--bv-main, #0d9488) 12%, #fff);
    color:var(--bv-main, #0d9488);
    font-size:13px; font-weight:600; letter-spacing:.02em;
}
.bv-case-title { font-size:18px; font-weight:600; color:#222; letter-spacing:-.01em; }
.bv-case-divider {
    height:0; border-top:1px dashed #d4d4d4;
    margin:0 0 16px; max-width:680px; margin-left:auto; margin-right:auto;
}
.bv-case-sub {
    color:#888; font-size:13px; line-height:1.7;
    margin-bottom:22px; padding:0 20px;
}
.bv-case-angle-tabs {
    display:inline-flex; gap:6px; padding:4px;
    background:#f5f5f5; border-radius:8px;
}
.bv-case-angle-tab {
    padding:7px 18px; border:0; background:transparent;
    color:#888; font-size:13px; cursor:pointer; border-radius:6px;
    transition:background .2s, color .2s;
    font-family:inherit;
}
.bv-case-angle-tab:hover { color:#333; }
.bv-case-angle-tab.is-active {
    background:#fff; color:var(--bv-main, #0d9488); font-weight:600;
    box-shadow:0 1px 3px rgba(0,0,0,.08);
}

/* 카운터 + dots + 자세히 */
.bv-stage-bottom {
    display:flex; align-items:center; justify-content:center; gap:16px;
    padding:18px 0 0; flex-wrap:wrap;
}
.bv-stage-bottom .bv-slide-dots { gap:6px; }
.bv-stage-detail {
    margin-left:auto; padding:9px 18px;
    background:rgba(0,0,0,.07); color:#666 !important;
    border:0; border-radius:12px;
    text-decoration:none; font-size:12px; font-weight:600;
    transition:background .2s, color .2s;
}
.bv-stage-detail:hover { background:rgba(0,0,0,.12); color:var(--bv-main, #0d9488) !important; }

/* 다른 케이스 그리드 (4 columns) */
.bv-other-grid {
    display:flex; flex-wrap:wrap; gap:14px;
    margin:32px 0 18px;
}
.bv-other-grid > .bv-other-card { flex:1 1 calc(25% - 11px); min-width:160px; }
.bv-other-card {
    display:block; text-decoration:none; color:inherit;
    background:transparent; border:0; padding:0; cursor:pointer;
    font-family:inherit; text-align:left; width:100%;
    min-width:0;            /* 그리드 자식 오버플로우 방지 — 긴 캡션이 칸 너비를 늘리지 않게 */
    transition:transform .2s;
}
.bv-other-card:hover { transform:translateY(-2px); }
.bv-other-pair {
    display:flex; gap:0; aspect-ratio:2/1;
    border-radius:6px; overflow:hidden; background:#e9e4dc;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    transition:box-shadow .2s, outline .2s;
    outline:2px solid transparent; outline-offset:0;
}
.bv-other-card:hover .bv-other-pair {
    box-shadow:0 4px 14px rgba(0,0,0,.14);
}
.bv-other-card.is-active .bv-other-pair {
    outline:2px solid var(--bv-main, #0d9488);
    outline-offset:2px;
    box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.bv-other-card.is-active .bv-other-cap {
    color:var(--bv-main, #0d9488); font-weight:600;
}
.bv-other-img { flex:1; background:#e9e4dc no-repeat center / cover; min-width:0; }
.bv-other-pair.is-solo { background:#e9e4dc; }
.bv-other-cap {
    margin-top:8px; text-align:center;
    font-size:12px; color:#666; line-height:1.4;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* 비로그인 블러 — 메인 뷰어와 동일한 방식 (블러 + 균일 그라데이션 스크림) */
.bv-other-grid.bv-locked .bv-other-img { filter:blur(7px); transform:scale(1.12); }
.bv-other-grid.bv-locked .bv-other-pair { position:relative; }
.bv-other-grid.bv-locked .bv-other-pair::after {
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.34) 100%);
}

/* 하단 주의 문구 */
.bv-stage-warning {
    margin:18px 0 0; padding-top:18px; border-top:1px solid #f0f0f0;
    text-align:center; font-size:11px; color:#aaa; line-height:1.6;
}

@media (max-width: 900px) {
    .bv-stage-nav { width:44px; height:44px; }
    .bv-stage-nav.prev { left:8px; }
    .bv-stage-nav.next { right:8px; }
    .bv-stage-nav svg { width:20px; height:20px; }
    .bv-other-grid { margin:24px 0; }
    .bv-other-grid > .bv-other-card { flex:1 1 calc(50% - 7px); min-width:0; }
    .bv-stage-bottom { padding:18px 0 0; }
    .bv-stage-warning { margin:18px 0 0; }
}
@media (max-width: 600px) {
    .bv-stage-wrap { padding:0 0 18px; }
    .bv-stage-nav { width:36px; height:36px; }
    .bv-stage-nav.prev { left:6px; }
    .bv-stage-nav.next { right:6px; }
    .bv-case-info { padding:20px 4px 4px; }
    .bv-case-title { font-size:16px; }
    .bv-case-sub { font-size:12px; padding:0 4px; }
}
.bv-angle-tabs { display:flex; gap:6px; margin:14px 0; flex-wrap:wrap; }

.bv-side-card h3 { margin:0 0 12px; font-size:13px; font-weight:600; color:#444; }
.bv-meta-list { margin:0; }
.bv-meta-list dt { font-size:12px; color:#888; margin-top:8px; }
.bv-meta-list dt:first-child { margin-top:0; }
.bv-meta-list dd { margin:2px 0 0; padding:0; font-size:13px; color:#333; font-weight:500; }
.bv-side-doctor { display:flex; gap:10px; align-items:center; }
.bv-side-doctor img { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.bv-side-doctor strong { display:block; font-size:13px; color:#333; }
.bv-side-doctor span { display:block; font-size:11px; color:#888; }
.bv-side-doctor small { font-size:11px; color:#0f766e; }
.bv-side-actions { margin-top:8px; }

.bv-similar-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:14px; }
.bv-similar-card { display:block; text-decoration:none; color:inherit; }
.bv-similar-thumb {
    position:relative; overflow:hidden; line-height:0;
    background:#e9e4dc; border-radius:8px; margin-bottom:6px;
}
.bv-similar-thumb img { display:block; width:100%; height:auto; }
.bv-similar-title { font-size:13px; color:#444; line-height:1.4; }
/* 비로그인 마스킹 — 원본 비율 유지 + 블러 + 균일 스크림 */
.bv-similar.bv-locked .bv-similar-thumb img { filter:blur(7px); transform:scale(1.05); }
.bv-similar.bv-locked .bv-similar-thumb::after {
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.30) 100%);
}

.bv-comments { margin-top:32px; padding-top:24px; border-top:1px solid #eee; }

/* 이전/다음 글 navigation */
.bv-prev-next {
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    margin:32px 0 0; padding:18px 0; border-top:1px solid #f0f0f0;
}
.bv-pn-item {
    display:flex; flex-direction:column; gap:6px;
    padding:14px 18px; border:1px solid #e5e7eb; border-radius:10px;
    text-decoration:none; color:inherit; background:#fafafa;
    transition:border-color .18s, background .18s;
}
.bv-pn-item:hover { border-color:var(--bv-main, #0d9488); background:#fff; }
.bv-pn-item.disabled { pointer-events:none; opacity:.5; background:#f3f4f6; }
.bv-pn-item.next { text-align:right; }
.bv-pn-item .lbl { font-size:12px; color:var(--bv-main, #0d9488); font-weight:600; }
.bv-pn-item .subj {
    font-size:13px; color:#444;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width: 700px) {
    .bv-prev-next { grid-template-columns:1fr; }
}

/* 타임라인 (view 페이지) */
.bv-timeline-wrap { margin-top:24px; padding:18px; background:#f9fafb; border-radius:10px; }
.bv-timeline-wrap h3 { margin:0 0 12px; font-size:14px; font-weight:600; }
.bv-tl-item { flex:0 0 180px; text-align:center; }
.bv-tl-label { font-size:12px; color:#666; font-weight:500; }

/* 블로그형 view */
.bv-blog-view { padding:0 0 32px; }
.bv-blog-doctor-box { display:flex; gap:14px; align-items:flex-start; padding:14px; margin:14px 0 22px; background:#f9fafb; border-radius:10px; border-left:3px solid var(--bv-main, #0d9488); flex-wrap:wrap; }
.bv-blog-doctor-box img { width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.bv-blog-doctor-box strong { display:block; font-size:14px; color:#333; }
.bv-blog-doctor-box span { display:block; font-size:12px; color:#666; margin-top:2px; }
.bv-blog-doctor-box p { margin:6px 0 0; font-size:13px; color:#666; line-height:1.5; flex-basis:100%; }
.bv-blog-doctor-box .bv-blog-date { margin-left:auto; font-size:12px; color:#999; flex-basis:auto; }

/* ============================================================
 * 사진 인라인 업로드 패널 (view 페이지)
 * ============================================================ */
.bv-photo-edit {
    background:linear-gradient(135deg, #f9fafb, #f3f4f6);
    border:1px solid #e5e7eb; border-radius:14px;
    padding:22px 24px; margin:0 0 22px;
}
.bv-photo-edit-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; flex-wrap:wrap; gap:6px; }
.bv-photo-edit-head h3 { margin:0; font-size:15px; font-weight:700; color:#1f2937; letter-spacing:-.01em; }
.bv-photo-edit-head p { margin:0; font-size:12px; color:#6b7280; line-height:1.6; }

.bv-photo-edit-rows { display:flex; flex-direction:column; gap:14px; }
.bv-photo-edit-row {
    display:grid; grid-template-columns:80px 1fr; gap:14px; align-items:center;
    padding:14px; background:#fff; border-radius:10px;
    border:1px solid #f0f0f0;
}
.bv-photo-edit-row-lbl {
    font-size:13px; font-weight:600; color:var(--bv-main, #0d9488);
    text-align:center; padding:8px 4px; border-right:1px solid #f0f0f0;
}

/* contenteditable inline edit — 평소 텍스트 그대로, 클릭 시 편집 가능 */
.bv-photo-edit-row-lbl[contenteditable="true"],
.bv-photo-cell-lbl[contenteditable="true"] {
    cursor:text; outline:none; border-radius:4px;
    transition:background .15s, box-shadow .15s, color .15s;
    -webkit-user-select:text; user-select:text;
}
.bv-photo-edit-row-lbl[contenteditable="true"]:hover,
.bv-photo-cell-lbl[contenteditable="true"]:hover {
    background:rgba(0,0,0,.05);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.bv-photo-edit-row-lbl[contenteditable="true"]:focus,
.bv-photo-cell-lbl[contenteditable="true"]:focus {
    background:rgba(13,148,136,.1);
    box-shadow:inset 0 0 0 2px var(--bv-main, #0d9488);
    color:#1f2937;
}
.bv-photo-edit-row-lbl[contenteditable="true"].saved,
.bv-photo-cell-lbl[contenteditable="true"].saved {
    background:rgba(22,163,74,.15);
    box-shadow:inset 0 0 0 2px #16a34a;
    color:#065f46;
}
.bv-photo-edit-row-lbl[contenteditable="true"].save-fail,
.bv-photo-cell-lbl[contenteditable="true"].save-fail {
    background:rgba(220,38,38,.12);
    box-shadow:inset 0 0 0 2px #dc2626;
}
.bv-photo-edit-row-lbl[contenteditable="true"]:empty::before,
.bv-photo-cell-lbl[contenteditable="true"]:empty::before {
    content:attr(data-label-key);
    color:#bbb;
}
.bv-photo-edit-row-cells {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px;
}

.bv-photo-cell {
    display:flex; flex-direction:column; gap:6px;
}
.bv-photo-cell-lbl { font-size:11px; color:#6b7280; text-align:center; font-weight:500; }
.bv-photo-cell-img {
    aspect-ratio:1/1; background:#0f0f10 no-repeat center / cover;
    border-radius:8px; position:relative; box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.bv-photo-cell-del {
    position:absolute; top:6px; right:6px; width:24px; height:24px;
    border-radius:50%; background:rgba(220,38,38,.92); color:#fff;
    border:0; font-size:14px; cursor:pointer; line-height:1;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    transition:transform .15s;
}
.bv-photo-cell-del:hover { transform:scale(1.1); background:#dc2626; }
.bv-photo-cell-empty {
    display:flex; flex-direction:column; gap:4px; aspect-ratio:1/1;
    border:2px dashed #cbd5e1; border-radius:8px;
    align-items:center; justify-content:center; cursor:pointer;
    background:#fafafa;
    transition:border-color .18s, background .18s, color .18s;
}
.bv-photo-cell-empty:hover {
    border-color:var(--bv-main, #0d9488); background:rgba(13,148,136,.05);
    color:var(--bv-main, #0d9488);
}
.bv-photo-cell-empty .ico { font-size:28px; color:#cbd5e1; line-height:1; transition:color .18s; }
.bv-photo-cell-empty .txt { font-size:11px; color:#9ca3af; }
.bv-photo-cell-empty:hover .ico,
.bv-photo-cell-empty:hover .txt { color:var(--bv-main, #0d9488); }
.bv-photo-cell-cap {
    width:100%; margin-top:6px; padding:5px 8px;
    border:1px solid #e5e7eb; border-radius:5px;
    font-size:11px; color:#444; text-align:center; font-family:inherit;
    transition:border-color .18s, background .18s;
}
.bv-photo-cell-cap:focus { outline:none; border-color:var(--bv-main, #0d9488); background:#fafffe; }
.bv-photo-cell-cap:disabled { background:#f5f5f5; color:#bbb; cursor:not-allowed; }
.bv-photo-cell-cap.saved { border-color:#16a34a; background:#f0fdf4; }

.bv-photo-cell.uploading {
    opacity:.5; pointer-events:none; position:relative;
}
.bv-photo-cell.uploading::after {
    content:''; position:absolute; top:50%; left:50%;
    width:28px; height:28px; margin:-14px 0 0 -14px;
    border:3px solid rgba(13,148,136,.2);
    border-top-color:var(--bv-main, #0d9488);
    border-radius:50%; animation:bvSpin .8s linear infinite;
}
@keyframes bvSpin { to { transform:rotate(360deg); } }

@media (max-width: 700px) {
    .bv-photo-edit-row { grid-template-columns:1fr; }
    .bv-photo-edit-row-lbl { border-right:0; border-bottom:1px solid #f0f0f0; padding:0 0 8px; }
}