/* ============================================================
   Notice Content
   ------------------------------------------------------------
   공지사항 본문에서 공통으로 사용하는 스타일이다.

   적용 대상:
   - 관리자 Tiptap 작성 화면
   - 공지사항 상세
   - 메인 공지 팝업

   이메일은 메일 클라이언트 호환성 때문에 별도로 처리한다.
   ============================================================ */


/* ============================================================
   Notice Body - Common
   ------------------------------------------------------------
   관리자 Tiptap 작성 화면과 실제 공지 본문에서
   공통으로 사용하는 기본 스타일이다.
   ============================================================ */

.notice-richtext,
.hebiz-editor .tiptap {
    min-width: 0;
    max-width: 100%;

    line-height: 1.7;

    overflow-wrap: anywhere;
}


/* 실제 공지는 본문 폭을 기준으로 container query 사용 */

.notice-richtext {
    container-type: inline-size;
}


.notice-richtext :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
),
.hebiz-editor .tiptap :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
) {
    line-height: 1.4;
}


.notice-richtext :where(
    ul,
    ol
),
.hebiz-editor .tiptap :where(
    ul,
    ol
) {
    padding-inline-start: 1.6em;
    margin-block: 1em;
}


.notice-richtext ul,
.hebiz-editor .tiptap ul {
    list-style: disc;
}


.notice-richtext ol,
.hebiz-editor .tiptap ol {
    list-style: decimal;
}


.notice-richtext :where(
    img,
    video
),
.hebiz-editor .tiptap :where(
    img,
    video
) {
    max-width: 100% !important;
    height: auto !important;
}


.notice-richtext :where(blockquote),
.hebiz-editor .tiptap :where(blockquote) {
    margin-inline: 0;

    padding-inline-start: 1em;

    border-inline-start: 3px solid #dbe2ea;
}


.notice-richtext :where(pre),
.hebiz-editor .tiptap :where(pre) {
    max-width: 100%;

    overflow: auto;

    white-space: pre;
}


.notice-richtext :where(a),
.hebiz-editor .tiptap :where(a) {
    overflow-wrap: anywhere;
}


/* ============================================================
   Detail / Popup
   ============================================================ */

.notice-detail-box,
.notice-popup,
.notice-popup-body {
    min-width: 0;
    max-width: 100%;
}


/* ============================================================
   일반 표
   ------------------------------------------------------------
   교육과정표가 아닌 일반 표가 본문 폭보다 넓을 경우
   가로 스크롤을 사용할 수 있도록 한다.
   ============================================================ */

.notice-richtext .notice-table-scroll {
    display: block;

    width: 100%;
    max-width: 100%;

    margin-block: 12px;

    overflow-x: auto;

    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}


.notice-richtext .notice-table-scroll:focus-visible {
    outline: 2px solid #417690;
    outline-offset: 2px;
}


.notice-richtext .notice-table-scroll > table {
    min-width: 100%;
    max-width: none;

    border-collapse: collapse;
}

/* ============================================================
   Education Course - Narrow
   ------------------------------------------------------------
   팝업과 모바일에서는 셀 내부를 줄바꿈하지 않는다.
   표의 원래 레이아웃은 유지하고 notice-content.js가
   전체 표를 현재 본문 폭에 맞춰 축소한다.
   ============================================================ */

@container (max-width: 768px) {

    .education-course-desktop > table th,
    .education-course-desktop > table td {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

}

/* ============================================================
   Education Course
   ------------------------------------------------------------
   교육과정표의 기준 디자인.

   관리자 Tiptap 작성 화면
   공지사항 상세
   메인 공지 팝업

   모두 동일한 규격을 사용한다.
   ============================================================ */

/* ============================================================
   교육과정 표 테두리
   ------------------------------------------------------------
   Tiptap 기본 표 스타일과 결과 화면의 차이를 없애고
   마지막 행을 포함한 모든 셀의 테두리를 동일하게 유지한다.
   ============================================================ */

.education-course-desktop > table th,
.education-course-desktop > table td {
    border: 1px solid #9aa9ba !important;
}


.education-course-desktop > table tbody tr:last-child > td {
    border-bottom: 1px solid #9aa9ba !important;
}

.education-course-desktop {
    display: block !important;

    width: 100%;
    max-width: 100%;
    min-width: 0;
}


.education-course-mobile {
    display: none !important;
}


/* 교육과정 TABLE */

.education-course-desktop > table {
    width: 760px !important;
    min-width: 760px !important;
    max-width: 760px !important;

    table-layout: fixed !important;
    border-collapse: collapse;

    font-size: 13px;
    line-height: 1.35;

    text-align: center;
}

/* ============================================================
   교육과정 열 비율
   ------------------------------------------------------------
   이전 이메일에서 사용하던 균형을 기준으로 한다.
   ============================================================ */

.education-course-desktop > table th:nth-child(1),
.education-course-desktop > table td:nth-child(1) {
    width: 30%;
}


.education-course-desktop > table th:nth-child(2),
.education-course-desktop > table td:nth-child(2) {
    width: 8%;
}


.education-course-desktop > table th:nth-child(3),
.education-course-desktop > table td:nth-child(3) {
    width: 13%;
}


.education-course-desktop > table th:nth-child(4),
.education-course-desktop > table td:nth-child(4) {
    width: 15%;
}


.education-course-desktop > table th:nth-child(5),
.education-course-desktop > table td:nth-child(5) {
    width: 8%;
}


/*
   수강료는 2단 헤더이므로
   실제 데이터 셀의 고객사 / 일반 열을 기준으로 폭을 지정한다.
*/

.education-course-desktop > table tbody td:nth-child(6) {
    width: 13%;
}


.education-course-desktop > table tbody td:nth-child(7) {
    width: 13%;
}


/* ============================================================
   교육과정 셀
   ============================================================ */

.education-course-desktop > table th,
.education-course-desktop > table td {
    box-sizing: border-box;

    padding: 6px 5px !important;

    vertical-align: middle;

    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}


/* 헤더는 높이를 조금 줄인다 */

.education-course-desktop > table th {
    padding-top: 5px !important;
    padding-bottom: 5px !important;

    line-height: 1.25;
}


/* ============================================================
   Tiptap 교육과정표
   ------------------------------------------------------------
   Tiptap의 일반 table 스타일보다 교육과정 공통 규격을
   우선 적용하여 작성 화면과 실제 결과를 동일하게 만든다.
   ============================================================ */

.hebiz-editor
.tiptap
.education-course-desktop > table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    table-layout: fixed !important;

    border-collapse: collapse;
}


.hebiz-editor
.tiptap
.education-course-desktop > table th,
.hebiz-editor
.tiptap
.education-course-desktop > table td {
    min-width: 0 !important;

    padding: 6px 5px !important;
}


/* ============================================================
   Education Venue - Common
   ============================================================ */

/*
   최종 표시 순서

   교육장 이름 / 주소
   -------------------------
   지하철   버스       주차
   -------------------------
   지도
   -------------------------
   카카오맵 위치 확인
*/


/* ============================================================
   Transport
   ------------------------------------------------------------
   지하철 / 버스 / 주차를 1:1:1로 고정하지 않는다.

   각 항목이 내용에 필요한 폭을 우선 사용하고
   남는 공간은 항목 사이의 여백으로 배분한다.
   ============================================================ */

.notice-transport,
.education-venue-info {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    width: 100%;

    box-sizing: border-box;

    background: #f8fafc;
}


/* 실제 공지 */

.notice-transport {
    padding: 12px 20px;

    border-bottom: 1px solid #e2e8f0;
}


/* Tiptap 작성 화면 */

.education-venue-info {
    padding: 12px 20px !important;
}


/* 교통정보 개별 항목 */

.notice-transport-item,
.education-venue-info > div {
    flex: 0 1 auto;

    min-width: 0;

    margin: 0 !important;
    padding: 0 8px;

    box-sizing: border-box;

    line-height: 1.5;

    word-break: keep-all;
    overflow-wrap: break-word;
}


/* 첫 번째 항목 */

.notice-transport-item:first-child,
.education-venue-info > div:first-child {
    padding-left: 0;
}


/* 마지막 항목 */

.notice-transport-item:last-child,
.education-venue-info > div:last-child {
    padding-right: 0;
}


/* 항목 사이 세로선 사용 안 함 */

.notice-transport-item + .notice-transport-item,
.education-venue-info > div + div {
    border-left: 0 !important;
}


/* 지하철 / 버스 / 주차 제목은 한 줄 유지 */

.notice-transport-item :where(
    strong,
    b
),
.education-venue-info > div :where(
    strong,
    b
) {
    white-space: nowrap;
}


/* ============================================================
   Web Venue
   ------------------------------------------------------------
   notice_rendering.py에서 만들어지는 웹 표시용 구조
   ============================================================ */

.notice-venue {
    width: 100%;
    max-width: 100%;

    margin: 16px 0;

    overflow: hidden;

    box-sizing: border-box;

    border: 1px solid #e2e8f0;
    border-radius: 6px;

    background: #ffffff;
}


/* 교육장 이름 / 주소 */

.notice-venue-heading {
    padding: 16px 20px;

    box-sizing: border-box;

    background: #ffffff;

    border-bottom: 1px solid #e2e8f0;
}


/* ============================================================
   Web Map
   ============================================================ */

.notice-venue-map {
    width: 100%;

    padding: 14px;

    box-sizing: border-box;

    background: #ffffff;

    text-align: center;
}


.notice-venue-map img {
    display: block;

    width: 100% !important;
    max-width: 900px !important;

    height: auto !important;

    margin: 0 auto !important;

    box-sizing: border-box;
}


/* ============================================================
   Web Kakao Button
   ============================================================ */

.notice-venue-map-button {
    width: 100%;

    padding: 0 14px 12px;

    box-sizing: border-box;

    background: #ffffff;

    text-align: center;
}


/* 버튼용 내부 TABLE */

.notice-venue-map-button table {
    width: auto !important;

    margin: 0 auto !important;

    table-layout: auto !important;

    border: 0 !important;
    border-collapse: collapse !important;
}


/* 버튼용 내부 셀 */

.notice-venue-map-button td {
    min-width: 0 !important;

    padding: 0 !important;

    border: 0 !important;
}


/* 실제 버튼 */

.notice-venue-map-button a {
    display: inline-block !important;

    padding: 6px 18px !important;

    box-sizing: border-box;

    font-size: 12px !important;
    font-weight: 700;

    line-height: 1.3 !important;

    text-decoration: none;
}


/* ============================================================
   Tiptap Venue
   ------------------------------------------------------------
   admin_notice.js가 생성한 저장 전 TABLE 구조를
   웹의 .notice-venue와 동일하게 보이도록 한다.
   ============================================================ */

.hebiz-editor
.tiptap
table:has(.education-venue-info) {
    width: 100% !important;
    max-width: 100%;

    margin: 16px 0;

    overflow: hidden;

    table-layout: auto !important;
    border-collapse: separate;
    border-spacing: 0;

    box-sizing: border-box;

    border: 1px solid #e2e8f0 !important;
    border-radius: 6px;

    background: #ffffff;
}


/* Tiptap 기본 table cell border 제거 */

.hebiz-editor
.tiptap
table:has(.education-venue-info)
> tbody
> tr
> td {
    border-left: 0;
    border-right: 0;
}


/* ============================================================
   Tiptap Venue Heading
   ============================================================ */

.hebiz-editor
.tiptap
table:has(.education-venue-info)
> tbody
> tr:first-child
> td {
    width: 100% !important;

    padding: 16px 20px !important;

    box-sizing: border-box;

    background: #ffffff;

    border-top: 0;
    border-bottom: 1px solid #e2e8f0;
}


/* ============================================================
   Tiptap Transport
   ============================================================ */

.hebiz-editor
.tiptap
td.education-venue-info {
    width: 100% !important;

    border-top: 0;
    border-bottom: 1px solid #e2e8f0;
}


/* ============================================================
   Tiptap Map
   ============================================================ */

.hebiz-editor
.tiptap
td.education-venue-map {
    width: 100% !important;

    padding: 14px !important;

    box-sizing: border-box;

    background: #ffffff;

    border-top: 0;
    border-bottom: 0;

    text-align: center;
}


.hebiz-editor
.tiptap
.education-venue-map > img {
    display: block;

    width: 100% !important;
    max-width: 900px !important;

    height: auto !important;

    margin: 0 auto !important;

    box-sizing: border-box;
}


/* ============================================================
   Tiptap Kakao Button
   ------------------------------------------------------------
   새 admin_notice.js에서는 마지막 행이 버튼 영역이다.
   ============================================================ */

.hebiz-editor
.tiptap
table:has(.education-venue-info)
> tbody
> tr:last-child
> td {
    padding: 0 14px 12px !important;

    box-sizing: border-box;

    background: #ffffff;

    border-top: 0;
    border-bottom: 0;

    text-align: center;
}


/* 버튼 내부 TABLE */

.hebiz-editor
.tiptap
table:has(.education-venue-info)
> tbody
> tr:last-child
> td
> table {
    width: auto !important;

    margin: 0 auto !important;

    table-layout: auto !important;

    border: 0 !important;
    border-collapse: collapse !important;
}


/* 버튼 내부 TD */

.hebiz-editor
.tiptap
table:has(.education-venue-info)
> tbody
> tr:last-child
> td
> table
td {
    min-width: 0 !important;

    padding: 0 !important;

    border: 0 !important;
}


/* 버튼 */

.hebiz-editor
.tiptap
table:has(.education-venue-info)
> tbody
> tr:last-child
a {
    display: inline-block !important;

    padding: 6px 18px !important;

    box-sizing: border-box;

    font-size: 12px !important;
    font-weight: 700;

    line-height: 1.3 !important;

    text-decoration: none;
}


/* ============================================================
   Narrow Content
   ------------------------------------------------------------
   공지 팝업과 모바일처럼 본문 폭이 좁아져도
   교육장소의 전체 구조는 그대로 유지한다.

   지하철 / 버스 / 주차는 계속 가로 배치하고
   글자와 여백만 줄여 줄바꿈을 최소화한다.
   ============================================================ */

@container (max-width: 768px) {

    .notice-venue-heading {
        padding: 12px 14px;
    }


    .notice-transport {
        padding: 10px 10px;
    }


    .notice-transport-item {
        padding: 0 5px;

        font-size: 11px;
        line-height: 1.4;
    }


    .notice-transport-item:first-child {
        padding-left: 0;
    }


    .notice-transport-item:last-child {
        padding-right: 0;
    }


    .notice-venue-map {
        padding: 9px;
    }


    .notice-venue-map-button {
        padding: 0 9px 10px;
    }


    .notice-venue-map-button a {
        padding: 5px 14px !important;

        font-size: 11px !important;
        line-height: 1.25 !important;
    }

}


/* ============================================================
   Tiptap Narrow
   ------------------------------------------------------------
   관리자 작성 영역은 container query 대상이 아닐 수도 있으므로
   viewport 기준 fallback을 별도로 둔다.
   ============================================================ */

@media (max-width: 768px) {

    .hebiz-editor
    .tiptap
    table:has(.education-venue-info)
    > tbody
    > tr:first-child
    > td {
        padding: 12px 14px !important;
    }


    .hebiz-editor
    .tiptap
    td.education-venue-info {
        padding: 10px !important;
    }


    .hebiz-editor
    .tiptap
    .education-venue-info > div {
        padding: 0 5px;

        font-size: 11px;
        line-height: 1.4;
    }


    .hebiz-editor
    .tiptap
    .education-venue-info > div:first-child {
        padding-left: 0;
    }


    .hebiz-editor
    .tiptap
    .education-venue-info > div:last-child {
        padding-right: 0;
    }


    .hebiz-editor
    .tiptap
    td.education-venue-map {
        padding: 9px !important;
    }


    .hebiz-editor
    .tiptap
    table:has(.education-venue-info)
    > tbody
    > tr:last-child
    > td {
        padding: 0 9px 10px !important;
    }


    .hebiz-editor
    .tiptap
    table:has(.education-venue-info)
    > tbody
    > tr:last-child
    a {
        padding: 5px 14px !important;

        font-size: 11px !important;
        line-height: 1.25 !important;
    }

}