/* ===========================
   Board (게시판 공통)
   =========================== */

/* ── 리스트 ── */
.board-list {width: 100%;margin-top: 24px;border-top: 2px solid #111;}
.board-list__item {display: flex;align-items: center;gap: 12px;padding: max(2rem, 18px) 15px;border-bottom: 1px solid #eee;color: inherit;text-decoration: none;transition: background 0.15s;}
.board-list__item:hover {background: #fafaf8;}

/* 고정 게시물 */
.board-list__item--pinned {background: #fffdf8;}
.board-list__item--pinned:hover {background: #fdf8ee;}

/* 번호 / 공지 뱃지 */
.board-list__num {flex-shrink: 0;width: 52px;color: #aaa;font-size: max(1.4rem, 12px);text-align: center;}
.board-badge {display: inline-block;padding: 2px 8px;border-radius: 2px;background: var(--brown);color: #fff;font-size: max(1.4rem, 14px);font-weight: 500;letter-spacing: 0.04em;}

/* 제목 */
.board-list__title {flex: 1;color: #222;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.board-list__item--pinned .board-list__title {font-weight: 600;}

/* 날짜 */
.board-list__date {flex-shrink: 0;width: 80px;color: #bbb;font-size: max(1.4rem, 14px);text-align: center;white-space: nowrap;}

/* 빈 목록 */
.board-empty {padding: 60px 0;border-bottom: 1px solid #eee;color: #ccc;font-size: max(1.7rem, 17px);text-align: center;}

/* ── 상세 뷰 ── */
.board-view {border-top: 2px solid #111;}
.board-view__head {padding: 24px 8px 20px;border-bottom: 1px solid #eee;}
.board-view__title {display: flex;align-items: center;gap: 10px;margin-bottom: 10px;color: #111;font-size: 3.20rem;font-weight: 700;line-height: 1.5;}
.board-view__meta {display: flex;gap: 20px;color: #aaa;font-size: max(1.6rem, 16px);}
.board-view__body {min-height: 200px;padding: 32px 12px 40px;border-bottom: 1px solid #eee;color: #333;word-break: break-word;white-space: pre-wrap;}

/* ── 하단 네비 ── */
.board-nav {margin-top: 12px;border-top: 1px solid #eee;}
.board-nav__row {display: flex;align-items: center;gap: 12px;padding: 13px 8px;border-bottom: 1px solid #f4f4f4;color: #444;font-size: max(1.4rem, 14px);text-decoration: none;transition: background 0.15s;}
.board-nav__row:hover {background: #fafafa; color: var(--brown);}
.board-nav__label {flex-shrink: 0;width: 32px;color: #bbb;}
.board-nav__title {flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

/* ── 액션 버튼 영역 ── */
.board-actions {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;gap: 8px;margin-top: 28px;}
.board-btn {display: inline-block;height: 40px;border: 1px solid #ddd;border-radius: 3px;padding: 0 20px;background: #fff;color: #555;font-size: max(1.6rem, 16px);line-height: 40px;text-decoration: none;transition: background 0.2s, color 0.2s;cursor: pointer;}
.board-btn:hover {border-color: var(--brown); color: var(--brown); }
.board-btn--primary {border-color: var(--brown);background: var(--brown);color: #fff;}
.board-btn--primary:hover {border-color: #b8966e;background: #b8966e;}



/* ===========================
   Customer Gallery Grid
   =========================== */

.cgallery-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 125px 40px;}
.cgallery-card {display: block;text-decoration: none;color: inherit;cursor: pointer;}
.cgallery-card__thumb {width: 100%;aspect-ratio: 1 / 1;border-radius: 3px;background: #d9d9d9;overflow: hidden;position: relative;}
.cgallery-card__thumb img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.4s ease;}
.cgallery-card:hover .cgallery-card__thumb img {transform: scale(1.05);}
.cgallery-card__body {padding: 10px 2px 0;}
.cgallery-card__title {margin-bottom: 2px;color: #222;font-size: max(2.2rem, 18px);font-weight: 600;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.cgallery-card__date {color: #bbb;font-size: 14px;}

@media (max-width: 1200px) { 
    .cgallery-grid {gap: 90px 30px} 
}
@media (max-width: 1024px) { 
    .cgallery-grid {gap: 60px 20px} 
}
@media (max-width: 768px)  { 
    .cgallery-grid {grid-template-columns: repeat(2, 1fr); gap: 45px 12px;} 
}
@media (max-width: 480px)  { 
    .cgallery-grid {grid-template-columns: repeat(2, 1fr); gap: 30px 8px;} 
}

/* ── 상세 이미지 그리드 ── */
.cgallery-view-imgs {display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;padding: 28px 8px;border-bottom: 1px solid #eee;}

/* 이미지 1장이면 가로 전체 */
.cgallery-view-imgs:has(> :only-child) {grid-template-columns: 1fr;max-width: 640px;}
.cgallery-view-imgs__item {border-radius: 3px;background: #d9d9d9;overflow: hidden;}
.cgallery-view-imgs__item img {display: none;width: 100%;height: auto;}

@media (max-width: 640px) {
    .cgallery-view-imgs { grid-template-columns: 1fr; }
}

/* ── 굿즈 상세 — 이미지 세로 나열 ── */
.goods-view-imgs {display: flex;flex-direction: column;gap: 16px;max-width: 860px;margin: 0 auto;padding: 28px 0;border-bottom: 1px solid #eee;}
.goods-view-imgs__item {border-radius: 3px;background: #d9d9d9;overflow: hidden;}
.goods-view-imgs__item img {display: block;width: 100%;height: auto;}



/* ===========================
   Q&A 게시판
   =========================== */

/* 목록 헤더행 */
.board-list__head {border-bottom: 1px solid #ddd;background: #fafafa;font-size: 16px;font-weight: 500;pointer-events: none;}
.board-list__head > * {color: #aaa !important;text-align: center;}

/* 상태 컬럼 */
.board-list__status {flex-shrink: 0;width: 72px;text-align: center;}

/* 작성자 컬럼 */
.board-list__nick {flex-shrink: 0;width: 100px;color: #bbb;text-align: center;white-space: nowrap;}

/* 자물쇠 아이콘 */
.qna-lock {margin-right: 2px;font-size: 14px;opacity: 0.5;}

/* 상태 뱃지 */
.qna-status {display: inline-block;padding: 2px 8px;border-radius: 2px;font-size: max(1.4rem, 12px);font-weight: 600;letter-spacing: 0.03em;white-space: nowrap;}
.qna-status--waiting {background: #f5f0e8;color: var(--brown);}
.qna-status--answered {background: #e8f5ee;color: #2e8b57;}

/* 비밀번호 확인 폼 */
.qna-pw-wrap {max-width: 420px;margin: 48px auto;text-align: center;}
.qna-pw-desc {margin-bottom: 20px;color: #555;font-size: max(1.7rem, 17px);}
.qna-pw-error {margin-bottom: 30px;color: #e74c3c;font-size: max(1.7rem, 17px);}

.qna-pw-form {display: flex;justify-content: center;gap: 8px;width: 100%;}
.qna-pw-input {flex: 1;max-width: 240px;height: 40px;padding: 0 12px;border: 1px solid #ddd;border-radius: 3px;font-size: max(1.6rem, 16px);}
.qna-pw-input:focus {outline: none;border-color: #CDB083;}

.qna-pw-wrap .board-actions {justify-content: center;margin-top: 10rem;}

/* 답변 영역 */
.qna-reply {border-top: 1px solid #eee;background: #fffdf8;}
.qna-reply__head {display: flex;align-items: center;gap: 12px;padding: 15px;}
.qna-reply__label {display: inline-block;padding: 2px 10px;border-radius: 2px;background: #CDB083;color: #fff;font-size: max(1.4rem, 14px);font-weight: 600;}
.qna-reply__date {color: #bbb;font-size: 14px;}
.qna-reply__body {padding: 0 15px 28px;color: #444;font-size: max(1.7rem, 17px);white-space: pre-wrap;word-break: break-word;}

/* 글쓰기 폼 */
.qna-write-form {border-top: 2px solid #111;}
.qna-write-row {display: flex;align-items: flex-start;gap: 16px;padding: 14px 0;border-bottom: 1px solid #eee;}
.qna-write-label {flex-shrink: 0;width: 80px;padding-top: 9px;color: #444;font-weight: 600;}
.qna-required {color: #e74c3c;}
.qna-write-input {flex: 1;height: 40px;padding: 0 12px;border: 1px solid #ddd;border-radius: 3px;}
.qna-write-input:focus {outline: none;border-color: var(--brown);}
.qna-write-textarea {flex: 1;padding: 10px 12px;border: 1px solid #ddd;border-radius: 3px;resize: vertical;}
.qna-write-textarea:focus {outline: none;border-color: var(--brown);}
.qna-write-row--full {align-items: flex-start;}
.qna-write-notice {margin: 16px 0 0;color: #aaa;font-size: max(1.7rem, 15px);}

/* 알림 메시지 */
.board-msg {margin-bottom: 16px;padding: 12px 16px;border-radius: 3px;font-size: max(1.7rem, 16px);}
.board-msg--error {border: 1px solid #f5c6c6;background: #fdf0f0;color: #c0392b;}
.board-msg--success {border: 1px solid #c6f0d6;background: #f0fdf4;color: #2e8b57;}


/* ── 반응형 ── */
@media (max-width: 640px) {
    .board-list__date {display: none;}
    .board-list__num  {width: 40px;}
    
    .board-view__meta { flex-direction: column; gap: 4px; }
    .board-view__body { padding: 24px 4px 32px; }

    .qna-board-list__head {display: none;}
    .qna-board-list__item {flex-wrap: wrap;gap: 6px;}
    .qna-board-list__item .board-list__status {width: 60px;}
    .qna-board-list__item .board-list__num {display: none;}
    .qna-board-list__item .board-list__title {flex: auto;width: 100%;}
    .qna-board-list__item .board-list__nick {width: auto;padding-right: 10px;font-size: max(1.4rem, 14px);position: relative;}
    .qna-board-list__item .board-list__nick::after{content: '';width: 1px;height: 12px;background: #d2d2d2;position: absolute;top: 0;right: 0;bottom: 0;margin: auto;}
    .qna-board-list__item .board-list__date {display: block;}

    .qna-write-row {flex-direction: column;gap: 8px;}
    .qna-write-input,
    .qna-write-textarea {flex: auto;width: 100%;}
}