@charset "utf-8";
/* ============================================================
 * 게시판 공용 디자인 토큰 — 전역(:root) 정의
 *  · all.css 가 header 에서 전역 로드되므로 모든 게시판 페이지의
 *    var(--board-*) 참조가 여기서 해결됨 (var() 참조 시에만 효과 → 누수 없음)
 * ============================================================ */
:root {
    --board-red: #C00000;
    --board-red-dark: #9b0000;
    --board-ink: #1a1a1a;
    --board-gray: #5a5a5a;
    --board-line: #ececec;
    --board-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ============================================================
 * 공지사항 게시판 (BOARD)  — pages/board/notice.php
 * ============================================================ */
.board-board .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200;
    font-size: 21px;
}

/* 상단 바 : 전체 건수 + 검색 */
.board-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.board-total {
    margin: 0;
    font-size: 0.95rem;
    color: var(--board-gray);
}
.board-total strong {
    color: var(--color-primary);
    font-weight: 700;
}

/* 검색 박스 (pill) */
.board-search {
    display: inline-flex;
    align-items: center;
    /* border: 1px solid var(--board-line); */
    border-radius: 999px;
    padding: 0.25rem 0.25rem 0.25rem 0.4rem;
    background: #fff;
    transition: border-color 0.3s var(--board-ease);
}
.board-search:focus-within {
    border-color: var(--board-line);
}
/* 검색 항목 셀렉트 + 커스텀 드롭다운 아이콘 */
.board-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.board-select {
    border: 0;
    background: transparent;
    font-size: 0.9rem;
    color: var(--board-ink);
    padding: 0.45rem 2.6rem 0.45rem 0.6rem;
    outline: none;
    cursor: pointer;
    /* 네이티브 화살표 제거 → 커스텀 아이콘 사용 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.board-select::-ms-expand { display: none; }
.board-select-arrow {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-51%);
    pointer-events: none;
    font-size: 1rem !important;
    color: var(--board-gray);
}
.board-input {
    border: 0;
    background: transparent;
    font-size: 0.9rem;
    color: var(--board-ink);
    padding: 0.45rem 0.5rem;
    width: 220px;
    outline: none;
}
.board-input::placeholder {
    color: var(--board-gray);
}
.board-search-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--board-red);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.3s var(--board-ease);
}
.board-search-btn:hover {
    background: var(--board-red-dark);
}

/* 목록 (행 리스트) */
.board-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--board-ink);
}
.board-item {
    border-bottom: 1px solid var(--board-line);
}
.board-item.is-notice {
    background: rgba(0, 0, 0, 0.02);
}
.board-link {
    display: grid;
    grid-template-columns: 64px 1fr auto 36px;
    align-items: center;
    gap: 1rem;
    padding: 1.8rem 0.8rem;
    text-decoration: none;
    transition: background 0.3s var(--board-ease);
}
.board-link:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* 번호 / 공지 배지 */
.board-num {
    text-align: center;
    font-size: 0.9rem;
    color: var(--board-gray);
}
.board-badge {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--board-red);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
}

/* 제목 (한 줄 말줄임) */
.board-title {
    min-width: 0;
    font-size: 1rem;
    color: var(--board-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s var(--board-ease), transform 0.3s var(--board-ease);
}
.board-item.is-notice .board-title {
    font-weight: 700;
}
.board-link:hover .board-title {
    transform: translateX(4px);
}

/* 제목 셀 = 카테고리 라벨 + 제목 (번호↔제목 사이 카테고리 표기) */
.board-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}
.board-cat {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--board-ink);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.4;
}

/* 날짜 */
.board-date {
    font-size: 0.85rem;
    color: var(--board-gray);
    white-space: nowrap;
}

/* 화살표 */
.board-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--board-gray);
    transition: color 0.3s var(--board-ease), transform 0.3s var(--board-ease);
}
.board-link:hover .board-arrow {
    color: var(--board-red);
    transform: translateX(3px);
}

/* 검색 결과 없음 (JS 가 동적 노출) */
.board-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--board-gray);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--board-line);
}

/* 페이지네이션 */
.board-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 2.4rem;
}
.board-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--board-line);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--board-ink);
    text-decoration: none;
    transition: background 0.3s var(--board-ease), color 0.3s var(--board-ease), border-color 0.3s var(--board-ease);
}
.board-page:hover {
    border-color: var(--board-ink);
    color: var(--board-ink);
}
.board-page.is-active {
    background: var(--board-ink);
    border-color: var(--board-ink);
    color: #fff;
}
.board-page.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* 반응형 (기존 BP) */
@media (max-width: 768px) {
    .board-top {
        flex-direction: column;
        align-items: stretch;
        gap: 0.9rem;
    }
    .board-search {
        width: 100%;
    }
    .board-input {
        flex: 1 1 auto;
        width: auto;
    }
    /* 화살표 숨김, 날짜를 제목 아래로(2줄) */
    .board-link {
        grid-template-columns: 56px 1fr;
        grid-template-areas:
            "lead title"
            "lead date";
        row-gap: 0.35rem;
        column-gap: 0.8rem;
        padding: 1rem 0.4rem;
    }
    .board-num,
    .board-badge {
        grid-area: lead;
        align-self: start;
    }
    .board-title {
        grid-area: title;
    }
    .board-date {
        grid-area: date;
    }
    .board-arrow {
        display: none;
    }
}
@media (max-width: 576px) {
    .board-board {
        max-width: var(--container-max);
        margin: 0 auto;
        padding: 0 24px;
    }
    .board-title { font-size: 0.95rem; }
    .board-page { width: 36px; height: 36px; }
}
@media (max-width: 360px) {
    .board-link {
        grid-template-columns: 48px 1fr;
        column-gap: 0.6rem;
    }
    .board-badge { min-width: 40px; }
}

/* ============================================================
 * 공지사항 상세 (BOARD VIEW) — pages/board/detail.php
 * ============================================================ */
.board-view {
    border-top: 2px solid var(--board-ink);
}

/* 제목 / 메타 */
.board-view-head {
    padding: 2rem 0.4rem 1.6rem;
    border-bottom: 1px solid var(--board-line);
}
.board-view-head .board-badge {
    justify-self: start;
    margin-bottom: 0.9rem;
}
.board-view-title {
    margin: 0 0 1rem;
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.09rem;
    color: var(--board-ink);
}
.board-view-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}
.board-view-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--board-gray);
}
.board-view-meta-item .material-symbols-outlined {
    font-size: 18px !important;
    color: var(--board-gray);
}
.board-view-files ul{
    display: flex;
    flex-wrap: wrap;
    margin-top:15px;
}
.board-view-files ul li{
    margin:5px 3px 5px 0;
    background: #f1f1f1;
    padding:5px 10px;
    border-radius: 5px;
}
.board-view-files ul li a{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* 본문 */
.board-view-body {
    padding: 2.4rem 0.4rem;
    border-bottom: 1px solid var(--board-line);
    color: var(--board-ink);
    line-height: 1.85;
    font-size: 1rem;
}
.board-view-body p { margin: 0 0 1.1rem; }
.board-view-body p:last-child { margin-bottom: 0; }
.board-view-body ul {
    margin: 0 0 1.1rem;
    padding-left: 1.3rem;
    list-style: disc;
}
.board-view-body li { margin-bottom: 0.4rem; }
.board-view-body img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border-radius: 8px;
}

/* 이전글 / 다음글 */
.board-view-nav {
    border-bottom: 1px solid var(--board-line);
}
.board-view-navrow {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.4rem;
    text-decoration: none;
    color: var(--board-ink);
    transition: background 0.3s var(--board-ease);
}
.board-view-navrow + .board-view-navrow {
    border-top: 1px solid var(--board-line);
}
a.board-view-navrow:hover { background: rgba(0, 0, 0, 0.02); }
a.board-view-navrow:hover .board-view-navtitle { color: var(--board-red); }
.board-view-navlabel {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--board-gray);
}
.board-view-navlabel .material-symbols-outlined { font-size: 18px !important; }
.board-view-navtitle {
    min-width: 0;
    font-size: 0.95rem;
    color: var(--board-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s var(--board-ease);
}
.board-view-navrow.is-empty .board-view-navtitle { color: var(--board-gray); }

/* 목록 버튼 */
.board-view-foot {
    display: flex;
    justify-content: center;
    margin-top: 2.4rem;
}
.board-list-btn {
    min-width: 11rem;
    height: 3.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s var(--board-ease), transform 0.3s var(--board-ease);
    background: var(--board-ink);
    margin: 1px;
}
.board-list-btn:hover { background: #333; color: #fff; transform: translateY(-2px); }
.board-list-btn .material-symbols-outlined { font-size: 22px !important; margin-right:5px;}

.board-list-btn.btn-del { background: #efefef; color: #1a1a1a;}
.board-list-btn.btn-edit{ background: var(--board-red);}

/* 반응형 */
@media (max-width: 768px) {
    .board-view-head { padding: 1.6rem 0.2rem 1.3rem; }
    .board-view-body { padding: 1.8rem 0.2rem; }
    .board-view-navrow { grid-template-columns: 72px 1fr; column-gap: 0.7rem; padding: 0.9rem 0.2rem; }
    .board-list-btn {  min-width: 3rem; padding: 0 1.2rem;}
}

/* ============================================================
 * 갤러리 게시판 (BOARD GALLERY) — pages/board/gallery.php
 * 썸네일 그리드. notice 톤앤매너(토큰·검색·페이지네이션 재사용),
 * 카드는 .board-item(검색 JS 훅)+.board-title 재사용.
 * ============================================================ */
.gallery-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}
/* 갤러리에선 행-리스트 보더 제거(목록 스킨 상속 무력화) */
.gallery-grid .board-item {
    border-bottom: 0;
    background: transparent;
}
.gallery-card[hidden] { display: none; }

.gallery-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    border: 1px solid var(--board-line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.35s var(--board-ease), transform 0.35s var(--board-ease), border-color 0.35s var(--board-ease);
    padding: 1.5rem;
}
.gallery-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.25);
}

/* 썸네일 */
.gallery-thumb {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--board-ease);
}
.gallery-link:hover .gallery-thumb img { transform: scale(1.06); }

/* 본문(제목+날짜) */
.gallery-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.1rem 0rem 0rem;
}
/* 목록 스킨의 1줄 말줄임/hover 이동을 갤러리에선 2줄 클램프로 재정의 */
.board-gallery .gallery-title {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    transform: none;
}
.gallery-link:hover .gallery-title { color: var(--color-primary-dark, #9a7f44); transform: none; }

/* 반응형 */
@media (max-width: 992px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}
@media (max-width: 576px) {
    .gallery-grid { grid-template-columns: 1fr; gap: 1rem; }
    .gallery-body { padding: 1rem 1.1rem 1.2rem; }
}

/* ============================================================
 * 게시판 글쓰기 폼 (board-form-*)
 * 라벨-필드 행 폼. notice 톤앤매너(토큰) 사용.
 * ============================================================ */
.board-form-note {
    margin: 0 0 1.4rem;
    font-size: 0.98rem;
    color: var(--board-gray);
}
.board-form-note .board-form-legend {
    margin-left: 0.6rem;
    font-size: 0.85rem;
}
.board-form-note .req { color: var(--board-red); }
.board-container .req,
.board-form-wrap .req { color: var(--board-red); }

.board-form-all { border-top: 2px solid var(--board-ink); padding-top: 1.8rem;}

.board-form-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.9rem; /* 행 구분선 없이 여백으로 분리 */
}
.board-form-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--board-ink);
}
.board-form-row-top { align-items: start; }
.board-form-row-top .board-form-label { padding-top: 0.9rem; }
.board-form-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    min-width: 0;
}

/* 입력 요소 (테이블형 폼 스킨: 연한 채움 + 포커스 시 밝게) */
.board-form-input,
.board-form-select,
.board-form-textarea {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.75rem 0.9rem;
    font-size: 0.95rem;
    color: var(--board-ink);
    background: #f5f5f5;
    outline: none;
    transition: background 0.3s var(--board-ease), border-color 0.3s var(--board-ease);
    font-family: inherit;
}
.board-form-input::placeholder,
.board-form-textarea::placeholder { color: var(--board-gray); }
.board-form-input:focus,
.board-form-select:focus,
.board-form-textarea:focus {
    background: #fff;
    border-color: var(--board-ink);
}
.board-form-textarea {
    min-height: 200px;
    line-height: 1.7;
    resize: vertical;
}

/* 입력칸 높이(테이블형 폼 — 넉넉하게) */
.board-form-input,
.board-form-select { height: 56px; }
.board-form-textarea { padding: 0.95rem 0.9rem; }

/* 휴대전화 (앞자리 select - 가운데 - 끝자리) */
.board-form-phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 560px;
}
.board-form-phone .board-form-input { flex: 1 1 0; min-width: 0; text-align: center; }
.board-form-phone-sel { flex: 0 0 130px; }
.board-form-sep { flex: 0 0 auto; color: var(--board-gray); }

/* 이메일 (아이디 @ 도메인 + 도메인 select) */
.board-form-email {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 660px;
}
.board-form-email .board-form-input { flex: 1 1 0; min-width: 0; }
.board-form-at { flex: 0 0 auto; color: var(--board-ink); font-weight: 600; }
.board-form-email-domain { flex: 0 0 180px; }

/* 주소 (우편번호 + 주소찾기 + 기본/상세) */
.board-form-address {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 660px;
}
.board-form-addr-zip { display: flex; align-items: center; gap: 0.5rem; }
.board-form-addr-zip .board-form-input { flex: 0 0 150px; text-align: center; }
.board-form-addr-detail { display: flex; align-items: center; gap: 0.5rem; }
.board-form-addr-detail .board-form-input { flex: 1 1 0; min-width: 0; }
.board-form-addr-search {
    flex: 0 0 auto;
    height: 56px;
    padding: 0 1.2rem;
    border: 0;
    border-radius: 6px;
    background: var(--board-ink);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.3s var(--board-ease);
}
.board-form-addr-search:hover { background: #333; }

/* 셀렉트 + 커스텀 화살표 */
.board-form-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}
.board-form-cate { max-width: 460px; } /* 카테고리 단독 셀렉트 폭 */
.board-form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.4rem;
    cursor: pointer;
}
.board-form-select::-ms-expand { display: none; }
.board-form-select-arrow {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 20px;
    color: var(--board-gray);
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200;
}

/* 라디오 */
.board-form-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
}
.board-form-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    color: var(--board-ink);
    cursor: pointer;
}
.board-form-radio input { accent-color: var(--board-red); width: 16px; height: 16px; }

/* 개인정보 동의 (상·하 구분선 / 좌: 체크+문구, 우: 내용 보기 버튼) */
.board-form-agree {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.6rem;
    padding: 1.3rem 0.2rem;
    border-top: 1px solid var(--board-line);
    border-bottom: 1px solid var(--board-line);
}
.board-form-agree-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--board-ink);
    cursor: pointer;
}
/* 네이티브 체크박스 숨기고 아이콘으로 표현 */
.board-form-agree-check input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.board-form-agree-icon {
    font-size: 22px;
    color: var(--board-gray);
    transition: color 0.25s var(--board-ease);
}
.board-form-agree-check input:checked ~ .board-form-agree-icon {
    color: var(--board-red);
    font-variation-settings: 'FILL' 1;
}
.board-form-agree-check input:focus-visible ~ .board-form-agree-icon {
    outline: 2px solid var(--board-red);
    outline-offset: 2px;
    border-radius: 50%;
}
/* 내용 보기 : 아웃라인 pill */
.board-form-viewbtn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.4rem;
    border: 1px solid var(--board-ink);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--board-ink);
    text-decoration: none;
    background: #fff;
    transition: background 0.3s var(--board-ease), color 0.3s var(--board-ease), border-color 0.3s var(--board-ease);
}
.board-form-viewbtn:hover { background: var(--board-ink); color: #fff; }

/* 버튼 (문의 리스트 / 문의하기) */
.board-form-btns, .board-write{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 2.4rem;
    transition: background 0.3s var(--board-ease), transform 0.3s var(--board-ease);
}
.board-form-btn, .board-write-btn{
    min-width: 11rem;
    height: 3.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s var(--board-ease), transform 0.3s var(--board-ease);
}
.board-form-btn:hover { transform: translateY(-2px); }
.board-form-btn-list,.board-write-btn { background: var(--board-ink); }
.board-form-btn-list:hover, .board-write-btn:hover { background: #333; color:#fff; transform: translateY(-2px); }
.board-form-btn-submit { background: var(--board-red); }
.board-form-btn-submit:hover { background: var(--board-red-dark); }

.board-write-btn{

}

/* 반응형 */
@media (max-width: 768px) {
    .board-form-row {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 0.5rem;
        margin-bottom: 1.3rem;
    }
    .board-form-row-top .board-form-label { padding-top: 0; }
    .board-form-cate,
    .board-form-phone,
    .board-form-email { max-width: none; }
    .board-form-input, .board-form-select { height: 50px; }
    .board-form-btns { gap: 0.6rem; }
    .board-form-btn { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 480px) {
    /* 이메일 도메인 select 는 다음 줄로 */
    .board-form-email { flex-wrap: wrap; }
    .board-form-email-domain { flex: 1 1 100%; }
    .board-form-phone-sel { flex: 0 0 84px; }
    /* 동의 줄: 문구 위 / 내용보기 아래 정렬 유지하되 줄바꿈 허용 */
    .board-form-agree { gap: 0.6rem; }
    .board-form-viewbtn { padding: 0.55rem 1.2rem; }
}


/* 폼 내 안내문·보조텍스트 (썸네일 hint / 첨부 help 등) */
.board-form-wrap .hint,
.board-form-wrap .muted { color: var(--board-gray); font-size: 0.85rem; }

/* ============================================================
 * CKEditor 5 반응형 (글쓰기 폼 내 — .board-form-wrap)
 *  - 에디터가 그리드 셀(1fr) 폭을 넘지 않도록 + 툴바 줄바꿈 + 모바일 높이 축소
 *  - 에디터 자체 CSS(ckeditor5.css)·overrides 보다 특이도를 높여 확실히 적용
 * ============================================================ */
.board-form-wrap .board-form-field .ck.ck-editor {
    width: 100%;
    max-width: 100%;
    min-width: 0;       /* 그리드 셀 안에서 축소 허용 (toolbar 폭 때문에 넘치는 것 방지) */
}
/* 편집 영역·툴바가 가로로 넘치지 않게 */
.board-form-wrap .ck.ck-editor__main > .ck-editor__editable,
.board-form-wrap .ck.ck-editor__editable_inline {
    max-width: 100%;
    box-sizing: border-box;
}
/* 툴바: 좁은 폭에서 다음 줄로 줄바꿈 (그룹화 비활성 구성에서도 안전) */
.board-form-wrap .ck.ck-toolbar {
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    /* 모바일: 편집 영역 높이 축소 (데스크탑 500/700px 은 과도) */
    .board-form-wrap .ck-editor__editable_inline,
    .board-form-wrap .ck-editor__editable {
        min-height: 320px;
        max-height: 60vh;
    }
}

/* ============================================================
 * 온라인 문의(qna) 보기 — 본문 상단 [문의정보] 박스
 * ============================================================ */
.board-form-meta {
    margin: 0 0 1.8rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--board-line);
    border-radius: 10px;
    background: #fafafa;
}
.board-form-meta-title {
    margin-bottom: 0.9rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--board-ink);
}
.board-form-meta-row {
    display: flex;
    gap: 0.8rem;
    padding: 0.35rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
}
.board-form-meta-row dt {
    flex: 0 0 6.5rem;
    color: var(--board-gray);
    font-weight: 500;
}
.board-form-meta-row dd {
    margin: 0;
    color: var(--board-ink);
    word-break: break-all;
}
@media (max-width: 768px) {
    .board-form-meta-row { flex-direction: column; gap: 0.1rem; }
    .board-form-meta-row dt { flex-basis: auto; }
}

/* ============================================================
 * 댓글 (comments) — 게시판 view(.board-view-*) 톤에 맞춘 디자인
 * ============================================================ */
.comments {
    margin-top: 2.4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--board-line);
}
.comments h3 {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0 0 1.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--board-ink);
}
.comments h3 .cmt-total {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--board-gray);
}

/* 목록 */
.comment-list {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
}
.comment-item {
    position: relative;
    padding: 1.2rem 0.2rem;
    border-bottom: 1px solid var(--board-line);
}
.comment-item:last-child { border-bottom: 0; }
.comment-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    padding-right: 5rem; /* 우측 삭제버튼 자리 확보 */
}
.comment-head .cmt-author {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--board-ink);
}
.comment-head .cmt-date {
    font-size: 0.8rem;
    color: var(--board-gray);
}
.comment-body {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--board-ink);
    word-break: break-word;
}

/* 삭제 UI (헤더 우측 고정) */
.comment-item .cmt-del-form,
.comment-item .cmt-del-guest {
    position: absolute;
    top: 1.2rem;
    right: 0.2rem;
}
.btn-tiny {
    display: inline-block;
    border: 1px solid var(--board-line);
    background: #fff;
    color: var(--board-gray);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.3s var(--board-ease), color 0.3s var(--board-ease);
}
.btn-tiny:hover {
    border-color: var(--board-red);
    color: var(--board-red);
}
.cmt-del-guest { list-style: none; }
.cmt-del-guest summary {
    list-style: none;
    user-select: none;
}
.cmt-del-guest summary::-webkit-details-marker { display: none; }
.cmt-del-guest form {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    justify-content: flex-end;
}
.cmt-del-guest input[type="password"] {
    height: 40px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0 0.7rem;
    background: #f5f5f5;
    color: var(--board-ink);
    font-family: inherit;
    outline: none;
    transition: background 0.3s var(--board-ease), border-color 0.3s var(--board-ease);
}
.cmt-del-guest input[type="password"]:focus {
    background: #fff;
    border-color: var(--board-ink);
}
.cmt-del-guest button {
    height: 40px;
    border: 0;
    border-radius: 6px;
    padding: 0 0.9rem;
    background: var(--board-ink);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s var(--board-ease);
}
.cmt-del-guest button:hover { background: #333; }

/* 작성 폼 */
.comment-form { margin-top: 1.6rem; }
.comment-form .cmt-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.comment-form .cmt-row input {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0 0.9rem;
    background: #f5f5f5;
    color: var(--board-ink);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: background 0.3s var(--board-ease), border-color 0.3s var(--board-ease);
}
.comment-form textarea {
    width: 100%;
    min-height: 90px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.9rem;
    background: #f5f5f5;
    color: var(--board-ink);
    font-size: 0.95rem;
    line-height: 1.7;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: background 0.3s var(--board-ease), border-color 0.3s var(--board-ease);
}
.comment-form .cmt-row input::placeholder,
.comment-form textarea::placeholder { color: var(--board-gray); }
.comment-form .cmt-row input:focus,
.comment-form textarea:focus {
    background: #fff;
    border-color: var(--board-ink);
}
.cmt-actions {
    margin-top: 0.8rem;
    text-align: right;
}
.cmt-actions button {
    border: 0;
    border-radius: 8px;
    padding: 0.7rem 1.6rem;
    background: var(--board-red);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s var(--board-ease), transform 0.3s var(--board-ease);
}
.cmt-actions button:hover {
    background: var(--board-red-dark);
    transform: translateY(-2px);
}

.comments .muted {
    padding: 1.2rem 0.2rem;
    color: var(--board-gray);
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .comment-head { padding-right: 0; }
    .comment-item .cmt-del-form,
    .comment-item .cmt-del-guest { position: static; margin-top: 0.6rem; }
    .comment-form .cmt-row { flex-direction: column; }
    .comment-form .cmt-row input { width: 100%; }
    .cmt-del-guest form { flex-wrap: wrap; }
}

/* ============================================================
 * 유튜브 영상 (code=youtube 필드) — 상세 본문 임베드 / 목록 재생아이콘
 * ============================================================ */
.board-video-embed{position:relative;width:100%;max-width:960px;aspect-ratio:16/9;margin:0 auto 24px;background:#000;border-radius:8px;overflow:hidden;}
.board-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* 목록 갤러리 카드 — 영상글 재생아이콘 오버레이 */
.gallery-thumb.is-video::after{content:"play_circle";font-family:"Material Symbols Outlined";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:52px;color:rgba(255,255,255,.9);text-shadow:0 2px 8px rgba(0,0,0,.5);pointer-events:none;}