/* 게시판 전용 스타일 — board.* 라우트(목록/갤러리/FAQ/상세)에서만 로드된다.
   색상 변수(--color-*)는 frontend.css의 :root에서 정의된 것을 그대로 참조한다.

   여기 있는 클래스는 전부 board- 접두사로 네임스페이스를 분리해뒀다 — 다른 화면에서
   같은 이름(예: .comment, .pagination, .gallery-grid)을 별 생각 없이 재사용해도 이
   파일의 스타일이 의도치 않게 섞여 들어가지 않게 하기 위해서다. 반대로 여러 화면(게시판/
   문의/정책 등)이 실제로 함께 쓰기로 하고 공유하는 요소(.post-meta, .post-header,
   .post-content, .pagination 등)는 일부러 여기 두지 않고 sub.css에 정의한다. */

/* 첨부파일/댓글 유무 아이콘 (게시글 목록·갤러리 카드) */

/* table 리스트 바깥에 제목 쓸 일 있으면 사용 */
.table-label {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -5%;
    color: var(--color-text);
    margin-bottom: 20px;
}

.board-list-icon {
    width: 13px; height: 13px; margin-left: 4px; vertical-align: -2px; display: inline-block; color: var(--color-text-muted); 
    min-width: 13px;
}
.board-gallery-icons {
    margin: 4px 0 0; display: flex; gap: 8px; align-items: center;
    margin-left: auto;
}
.board-gallery-icons:empty { display: none; }
.board-list-comment-count { display: inline-flex; align-items: center; gap: 2px; font-size: 0.8rem; color: var(--color-text-muted); }
.board-list-comment-count .board-list-icon { margin-left: 0; }

/* 게시판 목록 */

.board_wrap {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.board_wrap .total {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -5%;
}

.board_wrap .total > b {
    color: var(--color-primary);
    font-weight: 700;
}

.board-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.board-toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }


/* 총 몇건 */
.board-count-info {
    margin: 0; color: var(--color-text); 
    font-size: clamp(18px, 1.25rem, 20px); white-space: nowrap;
    margin-bottom: 10px;
}

.board-count-info > b {
    color: var(--color-primary);
}

table.board-list { width: 100%; border-collapse: collapse; }
table.board-list th, table.board-list td {
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-size: clamp(14px, 1rem, 16px);
}
table.board-list th { 
    color: #1D1D1F; font-weight: 600; background: #fff; 
    text-align: center;
    border-bottom: 2px solid #1D1D1F;
    padding: 18px 10px;
    font-family:'SCDream','Malgun Gothic','돋움', arial, sans-serif;
}

table.board-list td {
    padding: 23px 10px;
    text-align: center;
}

table.board-list .weight-500 {font-weight: 500;}

/* var(--color-bg-alt) var(--color-text-muted) */
/* col-* 폭 유틸리티는 table.board-list 안에서만 의미가 있어 접두사 없이도 안전하게
   격리된다(항상 이 조상 선택자를 통해서만 적용됨). */
table.board-list td.col-num, table.board-list td.col-views, table.board-list td.col-date { color: var(--color-text-muted); white-space: nowrap; }
table.board-list .col-recruitment { white-space: nowrap; text-align: center; }
.board-recruitment-period { display: inline-block; margin-top: 4px; font-size: 0.8rem; color: var(--color-text-muted); }

th.col-title {width: 100%;}
th.col-num {width: 70px;}
th.col-category, th.col-views, th.col-status, th.col-comments {width: 100px;}
th.col-writer, th.col-answers {width: 120px;}
th.col-recruitment, th.col-date {width: 150px;}

table.board-list td.col-title {
    text-align: left !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    vertical-align: middle;
    font-size: clamp(16px, 1.125rem, 18px);
    font-weight: 500;
}
table.board-list td p {display: inline-block;}

table.board-list td.col-title a {
    display: flex;
    align-items: center;
    line-height: 1.4;
}

table.board-list td.col-title p {
    display: -webkit-inline-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: max-content;
}

table.board-list td.col-title a .badge {
    margin-left: 7px;
    white-space: nowrap;
}

table.board-list td.col-title:hover a {text-decoration: underline;}

.border-list-empty {
    margin-top: 20px;
}


/* 보드 모바일 */
@media (max-width: 768px) {
    table.board-list {
        border-top: 2px solid var(--color-text);
    }
    table.board-list thead {display: none;}
    table.board-list tr {
        padding: 20px 0;
        border-bottom: 1px solid var(--color-border);
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    table.board-list tr td {
        display: block; border-bottom: none;
        padding: 0;
        text-align: left;
        width: 100%;
    }
    table.board-list td.col-num {display: none;}

    table.board-list tr td.col-category {
        width: fit-content;
    }

    table.board-list tr td.col-title {
        color: var(--color-text);
        font-size: clamp(18px, 1.25rem, 20px);
        padding-left: 0 !important;
        padding-right: 0 !important;
        font-weight: 700;
    }

    table.board-list tr td.col-date {
        color: #797979;
        font-size: clamp(14px, 1rem, 16px);
        line-height: 1;
        display: flex;
        flex-wrap: wrap;
    }

    table.board-list tr td.col-date br {display: none;}

    table.board-list tr td.col-views {
        color: #797979;
        font-size: clamp(14px, 1rem, 16px);
        line-height: 1;
    }

    .schedule table.board-list td.col-title {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* enrollments 보드 커스텀 스타일 */
@media (max-width: 768px) {
    .board-list.enrollments tr .col-answer,
    .board-list.enrollments tr .col-date {
        width: fit-content;
    }

    .board-list.enrollments tr .col-answer {order: 3;}
    .board-list.enrollments tr .col-date {order: 4;}
    .board-list.enrollments tr .col-download {
        order: 5;
        margin-top: 15px;
    }

    .board-list.enrollments tr .col-download a {
        display: flex; align-items: center; gap: 5px;
        width: fit-content;
        margin-left: auto;
    }
}

/* assignments 보드 커스텀 스타일 */
.board-list.assignments tr td.col-title span {
    color: #797979;
    font-size: 14px;
}

.board-list.assignments tr td.col-answers .btn {
    padding: 8px;
}

@media (min-width: 769px) {
    .board-list.assignments tr td.col-title {
        text-align: center !important;
    }

    .board-list.assignments tr td.col-title a {
        justify-content: center;
        margin-bottom: 5px;
    }
}

@media (max-width: 768px) {
    .board-list.assignments tr td.col-status {order:3}
    .board-list.assignments tr td.col-date {order:4}
    .board-list.assignments tr td.col-answers {order: 5;}
    .board-list.assignments tr td.col-answers .btn {        
        margin-left: auto;
        display: block;
    }
}


/* 보드 모바일 - 혹시나 위에 테이블로 구현할 수 없는 구조 나오는 것들은 이걸로 교체. */
.board-list_mob {display: none;}

/* .board-list_mob {
    width: 100%;
    border-top: 1px solid #d9dde4;
    margin-top: 10px;
}

.board-list_mob .notice-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: 80px;
    padding: 20px 10px 20px 0;
    border-bottom: 1px solid var(--color-border);
}

.board-list_mob .notice-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 11px;
    background-color: #dcecff;
    color: #4791e6;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.board-list_mob .badge-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.board-list_mob .board-sub-title {
    font-size: 16px;
    color: #797979;
    font-weight: 500;
}

.board-list_mob .notice-title {
    width: 100%;
    color: var(--color-text);
    font-size: clamp(18px, 1.25rem, 20px);
    line-height: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.board-list_mob .notice-title > strong {
    font-size: inherit;
    color: inherit;
}

.board-list_mob .notice-date {
    color: #797979;
    font-size: clamp(14px, 1rem, 16px);
    line-height: 1;
}

.board-list_mob .new-badge {
    flex-shrink: 0;
    margin-left: 5px;
    color: #ff1767;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.board-list_mob .file-icon {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 11px;
    height: 14px;
    margin-left: 6px;
    border-radius: 2px;
    background-color: #858b91;
} */

/* .board-list_mob .file-icon::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 4px 4px 0;
    border-color: transparent #f3f4f6 transparent transparent;
} */

/* 제목이 길 경우 한 줄 말줄임 */
/* .board-list_mob .notice-item:not(.notice-item--fixed) .notice-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
} */

/* 링크 상호작용 */
/* .board-list_mob .notice-item:hover .notice-title,
.board-list_mob .notice-item:focus-visible .notice-title {
    color: #277aca;
}

.board-list_mob .notice-item:focus-visible {
    outline: 2px solid #4791e6;
    outline-offset: -2px;
} */


@media (max-width: 768px) {
    /* table.board-list {display: none;} */
    /* .board-list_mob {display: block;} */
}


/* FAQ 게시판 스킨 — 상세페이지 이동 없이 목록에서 바로 펼쳐지는 아코디언(<details> 네이티브 사용) */
.board-faq-list { display: flex; flex-direction: column; gap: 8px; }
.board-faq-item { border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.board-faq-question {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    cursor: pointer;
    font-weight: 500;
    list-style: none;
    font-size: 16px;
    line-height: 1.4;
}
.board-faq-question::-webkit-details-marker { display: none; }
.board-faq-question::after {
    content: '';
    margin-left: auto;
    background: url('/images/arrow_down2.svg') no-repeat center center / cover;
    width: 20px;
    height: 12px;
    transition: transform .3s;
}
.board-faq-question div.title {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.board-faq-question:hover div.title > p {
    flex: 1;
}

.board-faq-question:hover div.title > p {
    text-decoration: underline;    
}
.board-faq-item[open] .board-faq-question::after { transform: rotate(180deg); }

.board-faq-q-badge, .board-faq-a-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}
.board-faq-q-badge { background: var(--color-primary); color: #fff; }
.board-faq-a-badge { background: #555; color: #fff; }
.board-faq-answer {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 10px 20px;
    border-top: 1px solid var(--color-border);
    padding-top: 14px;
}
.board-faq-answer .post-content { 
    flex: 1; min-width: 0;
    min-height: unset;
    background: #F6F9FD;
    border-radius: 15px;
}

.board-faq-detail-link { display: inline-block; margin-top: 10px; font-size: 0.85rem; }

.board-gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px;
    border-top: 1px solid var(--color-text);
    padding-top: 20px;
}
.board-gallery-item {
    display: flex; flex-direction: column;
}

.board-gallery-item .img {
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    position: relative;
}

.board-gallery-item .img .badge {
    position: absolute;
    z-index: 2;
    bottom: 10px;
    right: 10px;
}

.board-gallery-item .img img {
    width: 100%; object-fit: cover; display: block;
    /* aspect-ratio: 4/3.49854; */
    transition: all 0.5s;
    position: relative;
    z-index: 1;
}

@media (min-width: 769px) {
    .board-gallery-item:hover .img img {
        transform: scale(1.05);
    }   
}

.board-gallery-item .board-gallery-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.board-gallery-body > p.title {
    font-size: clamp(20px, 1.5rem, 24px);
    font-weight: 700;
    letter-spacing: -5%;
    -webkit-line-clamp: 2;
    white-space: unset;
    line-height: 1.4;
    /* min-height: 2.7916em; */
}

.board-gallery-body .post-meta {margin: 0 0 5px;}
.board-gallery-body .badge-meta {margin-bottom: 10px;}

.board-gallery-body .post-meta.price {
    font-size: clamp(22px, 1.5rem, 24px);
    text-align: right;
    justify-content: end;
    font-weight: 700;
    margin-top: 15px;
    color: var(--color-primary);
}

.board-gallery-item .post-meta.member {
    font-size: clamp(14px, 1rem, 16px);
    text-align: right;
    justify-content: end;
    font-weight: 500;
    color: #ff7777;
}

/* 
    교육 과정 오프라인 타입 스타일 course/index.blade.php 
    상세페이지 css는 sub.css에 작업.
*/
.board-gallery-grid.offline {
    grid-template-columns: 1fr;
    gap: 20px;
}

.board-gallery-grid.offline .board-gallery-item {
    border: 1px solid var(--color-border);
    padding: 30px 20px;
    background: #fff;
    border-radius: 20px;
    flex-direction: row;
    gap: 30px;
}

.board-gallery-grid.offline .board-gallery-body {
    flex: 1; margin-top: 0;
}

.board-gallery-grid.offline .board-gallery-item .img {display: none;}
.board-gallery-grid.offline .board-gallery-body .meta_box {
    display: flex; flex-wrap: wrap;
    gap: 10px;
}
.board-gallery-grid.offline .board-gallery-body .post-meta.price {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    margin: 0;
}

.board-gallery-grid.offline .board-gallery-item .post-meta.member {
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.25rem, 20px);
    padding-left: 10px;
    border-left: 1px solid var(--color-border);
    min-width: 6em;
}

@media (min-width: 769px) {
    .board-gallery-grid.offline .board-gallery-item:hover p.title {
        text-decoration: underline;
    }
}


/* 
    교육 과정 온라인/오프라인 타입 스타일 반응형 
*/
@media (max-width: 768px) {

    .board-gallery-item {
        padding-bottom: 20px;
        border-bottom: 1px solid var(--color-border);
    }

    .board-faq-answer {
        flex-direction: column;
        gap: 10px;
    }
    .board-faq-answer .post-content {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .board-gallery-grid {
        grid-template-columns: 1fr;
    }

    .board-gallery-grid.offline .board-gallery-item {
        flex-direction: column;
        gap: 10px;
        padding: 30px 20px 15px;
    }

    .board-gallery-grid.offline .board-gallery-body .meta_box {
        flex-wrap: unset;
        flex-direction: column;
        gap: 5px;
        margin-top: 10px;
    }

    .board-gallery-grid.offline .board-gallery-body .post-meta.price {
        justify-content: flex-end;
        text-align: right;
        margin-top: 20px;
        padding-top: 10px;
        border-top: 1px solid var(--color-border);
    }

    .board-gallery-grid.offline .board-gallery-item .post-meta.member {
        border-left: none;
        padding-left: 0;
        justify-content: flex-end;
        min-width: unset;
        width: 100%;
    }
}


/* 보드 갤러리 게시판 뉴스 리스트형 */
.board-gallery-grid.news {
    grid-template-columns: 1fr;
    gap: 20px;
}

.board-gallery-grid.news .board-gallery-item {
    border: 1px solid var(--color-border);
    padding: 30px 20px;
    background: #fff;
    border-radius: 20px;
    flex-direction: row;
    gap: 30px;
}

.board-gallery-grid.news .board-gallery-item .img {
    max-width: 360px; height: fit-content;
}

.board-gallery-grid.news .board-gallery-body {
    flex: 1; margin-top: 15px;
}

.board-gallery-grid.news .board-gallery-body .post-meta {margin: 0;}

.board-gallery-grid.news .board-gallery-body .meta_box {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    width: fit-content;
    margin-top: 20px;
}


.board-gallery-grid.news .apply_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 240px;
    gap: 5px;
}

.board-gallery-grid.news .apply_box > form {
    width: 100%;
}

.board-gallery-grid.news .apply_box .bookmark {
    width: 100%; max-width: 100%;
}

/* offline style */

.board-gallery-grid.news.offline .board-gallery-item .img {
    display: none;
}
.board-gallery-grid.news.offline .apply_box {
    min-width: unset;
}

@media (min-width: 769px) and (max-width: 1450px) {
    .board-gallery-grid.news .board-gallery-item {
        flex-wrap: wrap; align-items: center;
    }
    .board-gallery-grid.news .board-gallery-item > * {
        width: calc((100% - 30px) / 2);
    }
    .board-gallery-grid.news .apply_box {width: 100%;}
}

@media (max-width: 1450px) {
    /* .board-gallery-grid.news .board-gallery-item {gap: 10px;} */
    .board-gallery-grid.news .apply_box.apply_wrap {width: 100%;}

    .board-gallery-grid.news .apply_box.apply_wrap {
        flex-direction: row; flex-wrap: wrap;
        gap: 10px;
    }
    .board-gallery-grid.news .apply_box.apply_wrap > * {
        width: calc(50% - 5px); max-width: 100%;
    }

    .board-gallery-grid.news .apply_box.apply_wrap > form {width: 100% !important;}
    .board-gallery-grid.news .apply_box.apply_wrap > form .btn {max-width: 100%;}

    /* .board-gallery-grid.news .meta_box {margin-bottom: 10px;} */
    .board-gallery-grid.news .meta_box.payment {width: 100%;}
    .board-gallery-grid.news .meta_box.payment .btn {max-width: 100%;}
}

@media (min-width: 769px) {
    .board-gallery-grid.news .board-gallery-item:hover p.title {
        text-decoration: underline;
    }
}

@media (max-width: 768px) {
    .board-gallery-grid.news .board-gallery-item {
        flex-direction: column;
    }

    .board-gallery-grid.news .board-gallery-item .img {max-width: 100%;}
    .board-gallery-grid.news .apply_box {min-width: unset;}
}



/* 게시판별 커스텀필드(예: 기업명/업종/주요제품) — 게시글 상세에서 라벨:값 목록으로 노출한다 */
.show_contents {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    width: 100%;
    margin-top: 40px;
}

.show_contents .content-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.show_contents .content-item h2.content-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -5%;
    color: var(--color-text);
}

.board-description-fileds {
    background: #F6F9FD99; padding: 20px 30px;
    border-radius: 15px; gap: 20px;
    border: 1px solid #EFEFEF;
}

.board-description-fileds > p {
    line-height: 1.6;
    font-size: clamp(15px, 1rem, 16px);
    font-weight: 500;
    color: var(--color-text);
}

.show_contents .post-content {
    min-height: auto;
}

/* show-contents 아래 기입사항 필요할 시 사용 */
.content_description_list {
    background: #F6F9FD99;
    border: 1px solid #efefef;
    border-radius: 15px;
    padding: 20px 30px;
    margin-top: 20px;
}

.content_description_list > ul > li {
    padding-left: 20px;
    position: relative;
    font-size: clamp(14px, 1rem, 16px);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
}

.content_description_list > ul > li::before {
    content:'';
    position: absolute;
    top: 0.55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-text);
    left: 9px;
}

.content_description_list > ul > li:not(:last-child) {
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    .content_description_list {
        padding-left: 15px;
    }
    .content_description_list > ul > li {
        color: #797979;
    }
}



.board-custom-fields {
    border-top: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-border);
}
.board-custom-field-row {
    display: flex; gap: 40px;
    font-size: clamp(14px, 1rem, 16px);
    color: var(--color-text);
    font-weight: 500;
    letter-spacing: -5%;
    background: #fff;
    line-height: 1.4;
}
.board-custom-field-row:not(:last-child) { border-bottom: 1px solid var(--color-border); }
.board-custom-field-row dt { 
    flex-shrink: 0; 
    width: 100%;
    max-width: 140px;
    min-width: 100px;
    font-weight: 600; 
    color: var(--color-text-muted);
    background: #F2F5FC;
    padding: 20px 45px;
    text-align: center;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}
.board-custom-field-row dd {
    margin: 0;
    padding: 20px 0px;
}

@media (max-width: 768px) {
    .board-custom-field-row {
        flex-direction: column;
        gap: 0;
    }
    .board-custom-field-row dt {
        max-width: 100%;
        font-size: 1.15em;
    }
    .board-custom-field-row dd {
        padding: 20px 15px;
        text-align: center;
    }
}


/* 첨부 이미지 표시 */
.board-post-images { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

.board-post-images {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.board-post-images ul {
    padding: 16px;
    flex: 1;
    background: #F6F9FD; border-radius: 8px;
    border: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.board-post-images ul > li a img {
    max-width: 100%; max-height: 150px; border-radius: 8px; display: block;
    border: 1px solid #ededed;
    background: #fff;
}

@media (max-width: 768px) {
    .board-post-images ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .board-post-images ul a {
        display: block;
        width: 100%;
    }

    .board-post-images ul a img {
        width: 100%;
    }
}

@media (max-width: 650px) {
    .board-post-images ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 이전글/다음글 — 다음글(더 최신)이 위, 이전글(더 과거)이 아래 순서로 보여준다 */
.board-post-nav { margin-top: 24px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.board-post-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; color: var(--color-text); }
.board-post-nav-item:first-child { border-bottom: 1px solid var(--color-border); }
.board-post-nav-item:hover { text-decoration: none; }
.board-post-nav-item:hover .board-post-nav-title { text-decoration: underline; }
.board-post-nav-label { flex-shrink: 0; width: 60px; color: var(--color-text-muted); font-size: 0.85rem; font-weight: 600; }
.board-post-nav-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.board-comments { margin-top: 32px; }
.board-comment-list { list-style: none; margin: 0; padding: 0; }
.board-comment { padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.board-comment.is-reply { margin-left: 32px; border-left: 2px solid var(--color-border); padding-left: 16px; }
.board-comment-meta { font-size: 0.82rem; color: var(--color-text-muted); display: flex; gap: 10px; }
.board-comment-content { margin-top: 6px; white-space: pre-wrap; }
.board-comment-empty { padding: 24px 0; text-align: center; color: var(--color-text-muted); }
.board-comment-actions { margin-top: 8px; display: flex; gap: 12px; align-items: center; }
.board-comment-delete-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.board-comment-delete-password { width: 120px; padding: 4px 8px; font-size: 0.8rem; }
.board-reply-form { margin-top: 12px; margin-left: 32px; }
.board-comment-form { margin-top: 16px; }


/* component/board-top-tab.blade.php */
.board-tab-filter { 
    width: 100%;
    display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; 
    border-top: 1px solid var(--color-text);
}
.board-tab-filter a {
    width: 100%; display: flex;
    justify-content: center; align-items: center;
    text-align: center;
    padding: 20px 10px; 
    border-bottom: 1px solid var(--color-border);
    font-size: clamp(15px, 1rem, 16px); color: #797979;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -5%;
    font-family: var(--font-SCDream);
}
.board-tab-filter a.is-active { 
    background: #555; color: #fff;
}


/* 컴포넌트 만들때 카테고리에도 쓴다는걸 깜빡해서 배열로 아이템 받도록 수정 전까지는 일단 이렇게 사용 */
.board-tab-filter.multiple {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

@media (max-width: 768px) {
    .board-tab-filter.multiple {
        grid-template-columns: repeat(3, 1fr);
    }
}


.board-category-filter { 
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.board-category-filter a {
    display: flex;
    text-align: center;
    padding: 10px 20px;
    border-radius: 100px; 
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    font-family:'SCDream','돋움','굴림',arial,sans-serif;
}
.board-category-filter a.is-active { 
    background: var(--color-primary); color: #fff; 
}


/* 과제 현황표 start */
.status-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.status-table > h4 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -5%;
    color: var(--color-text);
}

.status-table .status {
    width: 100%;
    border-radius: 20px;
    border: 1px solid #D6D6D6;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    background: #fff;
}

.status-table .status .item {
    padding: 2px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1;
}

.status-table .status .item.total {--count-color: #D0426D;}
.status-table .status .item.complete {--count-color: var(--color-primary);}
.status-table .status .item.standBy {--count-color: #797979;}
.status-table .status .item.progress {--count-color: #2B8A57;}

.status-table .status .item .label {
    color: var(--color-text);
    font-weight: 600;
    font-size: clamp(18px, 1.25rem, 20px);
    letter-spacing: -5%;
    line-height: 1;
}

.status-table .status .item .count {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-table .status .item .count b {
    font-size: 1.71428em;
    color: var(--count-color);
}

/* type2 - classroom.blade.php */

.status-table.type2 .status {
    padding: 0;
    overflow: hidden;
    flex-direction: column;
}

.status-table.type2 .type2_itemBox {
    width: 100%;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    background: #fff;
}

.status-table.type2 .status .item {
    --count-color: var(--color-primary);
}

.status-table.type2 .link_box {
    width: 100%;
    background: var(--color-primary);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.status-table.type2 .link_box > .txt {
    color: #fff; font-size: 16px;
}

.status-table.type2 .link_box > .txt span {
    font-size: 0.875em; color: inherit;
    display: inline-block; margin-left: 5px;
}

.status-table.type2 .link_box > .link {
    border-radius: 50px;
    background: #1D6FFF;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fff;
    font-size: 14px;
    letter-spacing: -5%;
    font-weight: 600;
    transition: all 0.2s;
}

.status-table.type2 .link_box > .link > img.arrow {width: 7px;}

@media (min-width: 769px) {
    .status-table.type2 .link_box > .link:hover {
        background: var(--color-primary-dark);
    }   
}


@media (min-width: 1251px) {
    .status-table .status .item:not(:last-child) {
        border-right: 1px solid #D6D6D6;
    }
}

@media (max-width: 1250px) {
    .status-table .status {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .status-table .status .item {
        padding: 20px;
    }

    .status-table .status .item:nth-child(odd) {
        border-right: 1px solid var(--color-border);
    }

    .status-table .status .item:nth-child(-n+2) {
        border-bottom: 1px solid var(--color-border);
    }

    /* type2 */
    .status-table.type2 .status {display: flex;}
    .status-table.type2 .status .type2_itemBox {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .status-table .status {padding: 20px;}
    .status-table .status .item {
        padding: 20px 20px 10px 15px;
        flex-direction: column;
        gap: 20px;
    }

    .status-table .status .item .label {align-self: start;}
    .status-table .status .item .count {align-self: end;}


    /* type2 */
    .status-table.type2 .status {padding: 0;}
    .status-table.type2 .type2_itemBox {padding: 25px 15px;}
    .status-table.type2 .link_box {flex-direction: column;}
    .status-table.type2 .link_box > .txt {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: center;
        line-height: 1.4;
        text-align: center;
    }

    .status-table.type2 .link_box > .link:active {background: var(--color-primary-dark);}
}

/* 과제 현황표 end */



/* 

input, select 커스텀 style
--width: html 태그 스타일에 적힌 css 변수로 직접 너비를 확인해도 되고
셀렉트처럼 css에서 넣어줘도 무방합니다. 셀렉트처럼 다 너비 동일하면
css로 넣고 input처럼 제각각이면 각 html태그에 직접 넣으세요

예시) <input type="text" style="--width: 100">
*/

/* 인풋 */
.input_skin {
    width: 100% !important;
    max-width: calc(var(--width) * 1px);
    border: 1px solid var(--color-border) !important;
    border-radius: 15px !important;
    background-color: #fff;
    padding: 15px 20px !important;
    transition: all 0.2s;
}

.input_skin input {
    padding: 0;
    border: unset;
    border-radius: unset;
}
/* datepicker */
input.datepicker {
    position: relative;
    cursor: pointer;
}

input.datepicker::before {
    content:'';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    background: url('/images/calendar_normal.svg') no-repeat center center / cover;
    width: 25px;
    height: 25px;
}


/* 검색창 폼 스타일 */

.board-search-form {
    border-top: 1px solid #000;
    padding: 10px 20px;
    background: #F6F9FD;
    display: flex; 
    gap: 10px;
    width: 100%;
}

.board-search-form select { width: auto; }

.board-search-form .search_btn {
   padding: 10px 20px;
   background: #555;
   border-radius: 15px;
   font-size: 1rem;
   letter-spacing: -5%;
   font-weight: 500;
   color: #fff;
   white-space: nowrap;
   transition: all 0.2s;
}

.board-search-form input {
    color: var(--color-text);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -5%;
}
.board-search-form input::placeholder {
    color: #BEC1CC;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -5%;
}
/* .board-search-form input[type=text] { width: 200px; } */

.board-search-form .select_box {
    flex: 1;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: end;
}

.board-search-form .select_box.right {
    justify-content: flex-start;
}

.board-search-form .search_box {
    display: flex;
    gap: 5px;
    align-items: center;
}

.board-search-form .select_box .date_box {
    display: flex; align-items: center;
    gap: 10px;
    width: 100%;
}

/* 셀렉트 하나만 왼쪽 끝에 정렬되어야 할때, 임시방편 */
@media (min-width: 1251px) {
    .board-search-form .select_box .select_unit_left {
        margin-right: auto;
        min-width: 120px;
    }   
}

.board-search-form.course {
    display: flex;
    flex-direction: column;
}


/* faq 스타일 */
.board-search-form.faq {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.board-search-form.faq .search_description {
    text-align: center;
}

.board-search-form.faq .search_description h5 {
    font-size: clamp(18px, 1.25rem, 20px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -5%;
    margin-bottom: 3px;
}

.board-search-form.faq .search_description p {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -5%;
}

.board-search-form.faq .search_wrap {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.board-search-form.faq .search_wrap .select_box {
    justify-content: flex-start;
    width: fit-content;
    flex: unset;
}


.board-search-form.enrollments .search_box > input {
    max-width: 100%;
}

@media (max-width: 1250px) {
    .board-search-form {
        flex-direction: column;
        
    }

    .board-search-form .select_box {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .board-search-form .select_box .select_skin {max-width: 100%;}

    .board-search-form .search_box input {
        max-width: 100%;
    }


    /* enrollments 수강이력 전용 */
    .board-search-form.enrollments .select_box {
        display: flex;
    }

    /* faq 수강이력 전용 */
    .board-search-form.faq .select_box {
        display: flex;
    }

}

@media (max-width: 768px) {
    .board-search-form .select_box {
        grid-template-columns: 1fr;
    }

    .board-search-form .search_box {flex-direction: column; gap: 10PX;}
    .board-search-form .btn-search {align-self: end;}
    .board-search-form.course .course-btn-search {
        width: 100%;
        display: flex; gap: 10px;
        align-items: stretch;
    }
    .board-search-form.course .course-btn-search > * {
        max-width: 100%; flex: 1;
        width: 100%;
    }

    .board-search-form.course .course-btn-search .btn-reset {
        width: 100%;
    }


    /* enrollments 수강이력 전용 */
    .board-search-form.enrollments .select_box {
        display: flex;
        flex-direction: column;
    }

    .board-search-form .select_box .date_box {
        flex-direction: column;
    }
}

@media (max-width: 650px) {
    .board-search-form.faq .search_wrap .select_box {
        flex-direction: column;
        width: 100%;
    }
    .board-search-form.faq .search_wrap {
        flex-direction: column;
    }
    .board-search-form.faq .search_box {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .board-search-form.course .course-btn-search {
        flex-direction: column;
        align-items: center;
    }

    .board-search-form.course .course-btn-search > .mb {order: 2;}
}


/* 특정 검색창 스타일 */



/* 효과 */

.board-search-form .search_btn:hover {
    background: var(--color-primary);
}

/* 기본 focus-visible 초기화 */
.board-search-form .input_skin input:focus-visible {
    outline: unset !important;
    outline-offset: unset !important;
}

/* 선택되면 */
.input_skin:has(input:focus-visible) {
  border-color: var(--color-primary-light);
}

/* 검색창 */
.board-search-form .item_block.search {margin-left: auto;}


.board-file-list { list-style: none; margin: 0; padding: 0; }
.board-file-list li { padding: 6px 0; }

.board-search-form .search_input {
    padding: 0;
    border: unset;
    border-radius: unset;
}

/* 쓰기 페이지 타이틀 */
.write-title {
    font-weight: 600;
    color: var(--color-text);
    font-size: clamp(18px, 1.5625rem, 25px);
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

/* 쓰기 페이지 첨부파일란 */
.write-file-add {
    padding: 16px;
    background: #F6F9FD; border-radius: 8px;
}


/* 임시저장글 불러오기 스타일 */

.draft-loader {
    padding: 15px 20px;
    background: #F6F9FD; border-radius: 8px;
    margin-bottom: 20px;
}

.draft-loader summary {
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.draft-loader summary span {
    font-size: 0.85em;
    display: iline-block;
    border-radius: 100px;
    padding: 5px 10px;
    background: var(--color-primary-light);
    width: max-content;
    height: max-content;
    color: #fff;
    margin-left: 10px;
}

.draft-loader > ul {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 150px;
    overflow-y: auto;
}

.draft-loader > ul > li a {
    width: 100%; display: block;
    padding: 10px 5px;
    border-bottom: 1px solid var(--color-border);
}

.draft-loader > ul > li:hover a {
    text-decoration: underline;
    background: #efefef;
}



/* 교육일정에 쓰인 달력 */
.board-year-filter {
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
}

.board-year-filter > a {
    border-radius: 20px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #797979;
    color: #797979;
    font-weight: 700;
    transition: all 0.2s;
}

.board-year-filter > a:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.board-year-filter > span {
    font-size: 30px;
    font-weight: 700;
    color: #212121;
    line-height: 1;
    letter-spacing: -5%;
}

.board-month-filter {
    width: 100%;
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
}

.board-month-filter > a {
    padding: 20px 5px;
    background: #fff;
    text-align: center;
    transition: all 0.3s;
    color: #797979;
    line-height: 1;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
}

.board-month-filter > a > span.badge {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 3px 8px 2px;
}

.board-month-filter > a:hover {
    background: #cacaca;
    color: #fff;
}

.board-month-filter > a.is-active {
    background: #555555;
    color: #fff;
}


@media (max-width: 650px) {
    .board-year-filter {
        flex-wrap: wrap;
    }

    .board-year-filter span {order: 1; width: 100%; text-align: center;}
    .board-year-filter > a {
        /* width: calc((100% - 20px) / 2); */
        text-align: center;
        padding: 5px 15px;
    }
    .board-year-filter > a:nth-of-type(1) {order: 2;}
    .board-year-filter > a:nth-of-type(2) {order: 3;}
}