/*
 * 게시판 UI — 신규 작성.
 *
 * 구 KBoard 의 스킨 CSS(kboard/skin/thumbnail1|thumbnail|default|offLine/style.css)는
 * 플러그인 내부를 개조한 것이라 승계하지 않는다. 대신 사이트의 기존 시각 언어
 * (파랑 #135ea2 / 남색 #374f7b / 회색 #e9e9e9)를 따라 다시 만든다.
 *
 * ※ 이 화면들은 구 사이트와 픽셀 동등이 아니다. 고정 페이지 43개와 달리
 *   담당자 승인이 필요한 부분이다.
 */

.bh-board { margin: 0 0 3rem; }

.bh-board-head {
    font-size: .9375rem;
    color: #666;
    padding: 0 0 .75rem;
    border-bottom: 2px solid #374f7b;
    margin-bottom: 1.25rem;
}

/* ── 목록형 (뉴스 · 영상) ───────────────────────── */
.bh-list { list-style: none; margin: 0; padding: 0; }

.bh-list li {
    display: grid;
    grid-template-columns: 3.5rem 7.5rem 1fr 6rem 4.5rem;
    align-items: center;
    gap: 1rem;
    padding: .875rem .5rem;
    border-bottom: 1px solid #e3e3e3;
}
.bh-list li:hover { background: #f7f9fb; }

.bh-no   { color: #999; font-size: .875rem; text-align: center; }
.bh-date { color: #888; font-size: .875rem; text-align: center; }
.bh-view { color: #aaa; font-size: .8125rem; text-align: right; }

.bh-thumb { display: block; width: 7.5rem; height: 5rem; overflow: hidden; background: #f0f0f0; }
.bh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-thumb-empty { background: repeating-linear-gradient(45deg, #f4f4f4, #f4f4f4 6px, #ececec 6px, #ececec 12px); }

.bh-title {
    color: #222;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bh-title:hover { color: #135ea2; text-decoration: underline; }

/* ── 격자형 (인쇄홍보물 · 카다로그) ───────────────── */
.bh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1.5rem;
}
.bh-card { margin: 0; }
.bh-card img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
    background: #f0f0f0; box-shadow: 0 0 3px rgba(100,100,100,.4);
}
.bh-card figcaption { margin-top: .625rem; font-size: .9375rem; color: #333; line-height: 1.45; }

/* ── 게시글 상세 ─────────────────────────────── */
.bh-post-head { border-bottom: 2px solid #374f7b; padding-bottom: 1rem; margin-bottom: 1.75rem; }
.bh-post-head h2 { font-size: 1.375rem; line-height: 1.4; margin: 0 0 .5rem; }
.bh-post-meta { margin: 0; color: #888; font-size: .875rem; }
.bh-post-meta span + span { margin-left: 1rem; }

.bh-post-body { line-height: 1.8; }
.bh-post-body img { max-width: 100%; height: auto; }

.bh-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .75rem;
    margin-top: 2rem;
}
.bh-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.bh-back { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #e3e3e3; }
.bh-back a { color: #135ea2; text-decoration: none; font-size: .9375rem; }
.bh-back a:hover { text-decoration: underline; }

/* ── 대리점 ─────────────────────────────────── */
.bh-regions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.bh-regions a {
    padding: .4rem .875rem;
    border: 1px solid #d5dbe2;
    border-radius: 2px;
    color: #555;
    text-decoration: none;
    font-size: .9375rem;
}
.bh-regions a:hover { border-color: #135ea2; color: #135ea2; }
.bh-regions a.on { background: #135ea2; border-color: #135ea2; color: #fff; }

.bh-dealer-list { list-style: none; margin: 0; padding: 0; }
.bh-dealer-list li {
    display: grid;
    grid-template-columns: 6rem 1fr 9rem 10rem;
    align-items: center;
    gap: 1rem;
    padding: .875rem .5rem;
    border-bottom: 1px solid #e3e3e3;
}
.bh-dealer-region { color: #135ea2; font-size: .875rem; }
.bh-dealer-name   { font-weight: 700; color: #222; }
.bh-dealer-tel    { color: #333; text-decoration: none; font-variant-numeric: tabular-nums; }
.bh-dealer-tel:hover { color: #135ea2; text-decoration: underline; }
.bh-dealer-area   { color: #777; font-size: .9375rem; }

/* ── 모바일 ─────────────────────────────────── */
@media (max-width: 748px) {
    .bh-list li {
        grid-template-columns: 5rem 1fr;
        grid-template-areas: "thumb title" "thumb meta";
        gap: .5rem .875rem;
    }
    .bh-no, .bh-view { display: none; }
    .bh-thumb { grid-area: thumb; width: 5rem; height: 3.75rem; }
    .bh-title { grid-area: title; font-size: .9375rem; }
    .bh-date  { grid-area: meta; text-align: left; }

    .bh-dealer-list li {
        grid-template-columns: 1fr auto;
        grid-template-areas: "name tel" "region area";
        gap: .25rem .75rem;
    }
    .bh-dealer-name { grid-area: name; }
    .bh-dealer-tel { grid-area: tel; }
    .bh-dealer-region { grid-area: region; }
    .bh-dealer-area { grid-area: area; text-align: right; }
}

/* ── 메인 뉴스 위젯 ──────────────────────────────────────
 *
 * 구 사이트의 메인 하단 뉴스 3장은 KBoard 스킨 CSS
 * (kboard/skin/thumbnail/style.css)가 스타일링하고 있었다.
 * 게시판 UI 는 새로 만들었지만 **이 위젯만은 구 마크업(.galleryList 등)을
 * 그대로 쓰므로** 해당 규칙을 여기로 옮긴다. 원본 값 그대로다.
 *
 * ※ 구 사이트는 `$('.mainbottom').slick(...)` 으로 캐러셀을 만들려 했지만
 *   워드프레스 jQuery 가 noConflict 모드라 `$` 가 없어 **초기화된 적이 없다**.
 *   실제로는 float:left 3단 배치로 보여 왔다. 그 상태를 그대로 재현한다.
 */
.mainbottom::after { content: ""; display: block; clear: both; }

.main_news .galleryList {
    text-decoration: none !important;
    position: relative;
    display: inline-block;
    float: left;
    width: 32.5%;
    margin-left: .5%;
}
.main_news .galleryList::before {
    content: "MORE +";
    transition: all 1s;
    display: block;
    opacity: 0;
    position: absolute;
    background: rgb(60 107 203 / 50%);
    top: 0; left: 0; bottom: 0; right: 0;
    text-align: center;
    padding: 40% 0;
    font-size: 1.5em;
    color: #fff;
    font-weight: 700;
}
.main_news .galleryList:hover::before { opacity: 1; }

.main_news .thumbnail_img img { width: 100%; }

.main_news .gallery_text {
    padding: 12px 8px;
    border: 1px solid #ddd;
    border-top: 0;
}
.main_news .gallery_text1 {
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2em;
    height: 3.6em;
}
.main_news .kboard-date { float: right; font-size: .9em; color: #696969; }

/* ── 동영상 플레이어 ──────────────────────────────────
 * 구 사이트는 wmv 파일 링크였다 — 클릭하면 내려오고, 내려와도 재생이 안 됐다.
 * H.264/AAC mp4 로 변환해 <video> 로 재생한다.
 * 원본이 320x240~480x360 이라 크게 늘리면 흐려지므로 max-width 로 묶는다.
 */
.bh-video {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;              /* 영상의 고유 비율을 따른다. 강제 비율은 찌그러짐을 만든다 */
    margin: 1.25rem 0;
    background: #000;
}