/* /assets/css/board.css
 * STEP26 공지사항·FAQ 및 STEP27 사용자 문의 전용 CSS. common.css 다음에 로드합니다.
 * 공통 클래스 정의를 덮어쓰지 않고 이 기능 전용 클래스만 제공합니다.
 */
:root {
    --board-max-width: 920px;
    --board-header-height: 68px;
    --board-divider-width: 1px;
    --board-content-line-height: 1.85;
    --board-mobile-input-font: 16px;
    --board-inquiry-textarea-height: 220px;
    --board-search-field-width: 160px;
}
.board-shell {
    width: 100%;
    max-width: var(--board-max-width);
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 var(--space-4);
}
.board-header {
    display: flex;
    min-height: var(--board-header-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: var(--board-divider-width) solid var(--line);
}
.board-brand {
    margin: 0;
    text-decoration: none;
}
.board-account {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--font-label);
}
.board-account a {
    color: var(--text-sub);
    text-decoration: none;
    padding: var(--space-2) 0;
}
.board-main { padding: var(--space-6) 0 var(--space-7); }
.board-title {
    margin: 0;
    font-size: var(--font-title);
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.board-lead {
    color: var(--text-sub);
    font-size: var(--font-label);
    margin: var(--space-2) 0 var(--space-5);
}
.board-tabs {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.board-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--height-control);
    padding: 0 var(--space-4);
    color: var(--text-sub);
    background: var(--surface);
    border: var(--board-divider-width) solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 700;
}
.board-tab.is-active {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--surface-soft);
}
.board-card {
    background: var(--surface);
    border: var(--board-divider-width) solid var(--line);
    border-radius: var(--radius-card);
    padding: var(--space-5);
}
.board-search {
    display: flex;
    gap: var(--space-3);
    align-items: end;
    margin-bottom: var(--space-4);
}
.board-search .form-field {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.board-result { color: var(--text-sub); font-size: var(--font-label); margin: 0 0 var(--space-2); }
.board-result strong { color: var(--text); }
.board-items { border-top: var(--board-divider-width) solid var(--line); }
.board-item {
    padding: var(--space-4) 0;
    border-bottom: var(--board-divider-width) solid var(--line);
    min-width: 0;
}
.board-item-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.board-item-title {
    color: var(--text);
    font-size: var(--font-section);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-decoration: none;
}
.board-item-title:hover { color: var(--primary); text-decoration: underline; }
.board-pill {
    font-size: var(--font-caption);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--primary);
    border: var(--board-divider-width) solid var(--line);
    padding: 0 var(--space-2);
    white-space: nowrap;
}
.board-category { color: var(--text-sub); font-size: var(--font-label); }
.board-item-preview {
    color: var(--text-sub);
    margin: var(--space-2) 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.board-date { color: var(--text-sub); font-size: var(--font-caption); margin: var(--space-2) 0 0; }
.board-empty { text-align: center; color: var(--text-sub); padding: var(--space-7) var(--space-3); }
.board-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
}
.board-page {
    min-width: var(--height-control);
    min-height: var(--height-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--board-divider-width) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: var(--font-body);
}
.board-page.is-current { color: var(--primary); border-color: var(--primary); font-weight: 700; }
.board-breadcrumb {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--font-label);
    color: var(--text-sub);
    margin-bottom: var(--space-4);
}
.board-detail { overflow: hidden; }
.board-detail-header { padding-bottom: var(--space-5); border-bottom: var(--board-divider-width) solid var(--line); }
.board-detail-header .board-title { margin-top: var(--space-2); }
.board-content {
    padding: var(--space-6) 0;
    line-height: var(--board-content-line-height);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-height: var(--height-primary-lg);
}
.board-actions { margin-top: var(--space-4); display: flex; justify-content: flex-end; }
.board-footer {
    border-top: var(--board-divider-width) solid var(--line);
    color: var(--text-sub);
    font-size: var(--font-caption);
    padding: var(--space-4) 0 var(--space-6);
    text-align: center;
}
@media (max-width: 768px) {
    .board-search input,
    .board-search select,
    .board-search textarea { font-size: var(--board-mobile-input-font); }
}
@media (max-width: 520px) {
    .board-shell { padding: 0 var(--space-3); }
    .board-header { gap: var(--space-2); }
    .board-card { padding: var(--space-4); }
    .board-search { align-items: stretch; flex-direction: column; }
    .board-search .btn-primary { width: 100%; }
    .board-item-title { font-size: var(--font-body); }
    .board-pages { gap: var(--space-1); }
}

/* STEP27 사용자 1:1 문의 (기존 선택자 삭제·재정의 없음) */
.board-inquiry-search { flex-wrap: wrap; }
.board-inquiry-search .form-field { flex: 1 1 var(--board-search-field-width); }
.board-inquiry-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.board-inquiry-form textarea.form-input { min-height: var(--board-inquiry-textarea-height); padding: var(--space-3); resize: vertical; }
.board-inquiry-response { margin-top: var(--space-4); }
.board-inquiry-actions { gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 768px) {
    .board-inquiry-form input,
    .board-inquiry-form select,
    .board-inquiry-form textarea { font-size: var(--board-mobile-input-font); }
}
@media (max-width: 520px) {
    .board-inquiry-toolbar { flex-wrap: wrap; }
    .board-inquiry-actions .btn-primary { flex: 1; }
}

/* STEP124 — CKEditor 편집 영역과 상세 페이지 서식 일치.
 * 기존 .board-detail .board-content / body.board-content 선택자에 공통 규칙을 적용합니다.
 * 기존 CSS 값 유지, 모든 선택자는 정확히 한 번만 정의합니다.
 */
.board-detail .board-content > :first-child,
body.board-content > :first-child {
    margin-top: 0;
}

.board-detail .board-content > :last-child,
body.board-content > :last-child {
    margin-bottom: 0;
}

.board-detail .board-content p,
body.board-content p,
.board-detail .board-content div,
body.board-content div {
    margin: 0 0 var(--space-4);
}

.board-detail .board-content ul,
body.board-content ul,
.board-detail .board-content ol,
body.board-content ol {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-6);
}

.board-detail .board-content blockquote,
body.board-content blockquote {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-left: var(--space-1) solid var(--line);
    background: var(--surface-soft);
}

.board-detail .board-content li,
body.board-content li {
    margin-bottom: var(--space-2);
}

.board-detail .board-content h2,
body.board-content h2,
.board-detail .board-content h3,
body.board-content h3,
.board-detail .board-content h4,
body.board-content h4 {
    margin: var(--space-5) 0 var(--space-3);
    font-size: var(--font-section);
    line-height: var(--board-content-line-height);
}

.board-detail .board-content img,
body.board-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--space-3) 0;
    border-radius: var(--radius);
}

.board-detail .board-content table,
body.board-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: var(--space-4) 0;
}

.board-detail .board-content td,
body.board-content td {
    border: var(--board-divider-width) solid var(--line);
    padding: var(--space-3);
    text-align: left;
    vertical-align: top;
}

.board-detail .board-content th,
body.board-content th {
    border: var(--board-divider-width) solid var(--line);
    padding: var(--space-3);
    text-align: left;
    vertical-align: top;
    background: var(--surface-soft);
    font-weight: 700;
}

.board-detail .board-content li > p,
body.board-content li > p {
    margin: 0;
}

.board-detail .board-content li > ul,
body.board-content li > ul,
.board-detail .board-content li > ol,
body.board-content li > ol {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}

body.board-content {
    padding: var(--space-4);
    margin: 0;
    min-height: var(--ui-textarea-min);
}