/* =========================================
   Post Editor Layout CSS
   ========================================= */

/* Desktop scroll safety: prevent global styles from locking page scroll */
html,
body {
    height: auto;
    overflow-y: auto;
}

/* Main Container */
.post-editor {
    flex: 1;
    /* Allow it to grow */
    min-width: 0;
    background-color: #ffffff;
    border-radius: 0;
    box-shadow: none;
    padding: 1.25rem 1.5rem;
    /* Reduced padding from 2rem */
    min-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    max-height: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Avoid a double divider line with the sidebar border in dark mode */
html[data-theme="dark"] .split-container .post-editor,
body[data-theme="dark"] .split-container .post-editor {
    border-right: 0;
}

/* Split Container (Editor + Sidebar) */
.split-container {
    display: flex;
    gap: 0;
    position: relative;
    align-items: stretch;
    max-width: 1600px;
    /* Wider container to allow expansion */
    margin: 0 auto;
    width: 100%;
    height: auto !important;
    min-height: calc(100vh - 80px);
    overflow: visible !important;
}

/* Main Content Area (Left) */
.main-content {
    flex: 1;
    min-width: 0;
    transition: margin-right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Header Section */
.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f2f5;
}

.editor-header h2 {
    font-size: 1.5rem;
    color: #2c3e50;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.editor-header h2 i {
    color: var(--color-primary);
}

/* Action Buttons Area */
.editor-actions {
    display: flex;
    gap: 10px;
}

.post-editor > .c-footer {
    margin-top: auto;
}

/* Form Groups */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;
}

/* Hide Sidebar Close Button on Desktop */
.close-sidebar-btn {
    display: none;
}

/* =========================================
   편집기 크롬 — 사이트 헤더를 편집기용으로 깎는다
   (원장 지시 260917: 「메뉴들을 전부 숨기고」 · 「로고만 두고」 · 높이 48px)

   헤더는 공용(assets/components/header.html)이라 그 파일을 고치면 고전 셋·관리자 둘도
   같이 바뀐다. 그래서 편집기 쪽에서만 body[data-chrome="editor"] 로 걸어 덮는다.
   #write-post-container 는 header.js 가 인라인 style.display 로 켜므로 !important 가 필요하다.
   ========================================= */

body[data-chrome="editor"] .c-header nav.main-nav,
body[data-chrome="editor"] .c-header .header-notification,
body[data-chrome="editor"] .c-header .hamburger-btn,
body[data-chrome="editor"] .c-header .login-container,
body[data-chrome="editor"] .c-header #write-post-container {
    display: none !important;
}

/* 48px = 안쪽 줄 47 + 아래 테두리 1. 예전 62 는 46 + 위아래 패딩 7.68 이었다 —
   높이를 한 곳에서만 재려고 패딩을 0 으로 내리고 안쪽 줄에서만 잰다. */
body[data-chrome="editor"] .c-header {
    padding: 0;
    margin-bottom: 0;
}

body[data-chrome="editor"] .header-content {
    height: 47px;
}

body[data-chrome="editor"] .logo h1 {
    line-height: 1;
}

/* 발행 버튼 — 예전 글쓰기 버튼이 있던 칸(.action-buttons.desktop-actions)에 들어간다.
   테두리도 배경도 없는 글자 버튼이다(원장 지시 260918) — 참조는 Ghost 의 발행 버튼. */
.editor-publish {
    display: flex;
    align-items: center;
}

body[data-chrome="editor"] .c-header #publishPost.write-post-btn {
    height: auto;
    padding: 7px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    font-weight: 600;
    color: #2f3a49;
}

body[data-chrome="editor"] .c-header #publishPost.write-post-btn:hover { background: #f0f2f5; }

body[data-theme="dark"][data-chrome="editor"] .c-header #publishPost.write-post-btn { color: #edf0f3; }
body[data-theme="dark"][data-chrome="editor"] .c-header #publishPost.write-post-btn:hover { background: #262626; }

/* =========================================
   발행 — 화면 가운데 카드

   처음엔 발행 버튼에 매달린 드롭다운이었는데 원장이 「드롭다운도 구리다」고 해
   인용 모달과 같은 말씨(같은 가림막·같은 radius·같은 머리줄)로 옮겼다(260918).
   자리를 CSS 가 잡으므로 JS 는 top/left 를 건드리지 않는다.
   ========================================= */

.publish-panel {
    position: fixed;
    z-index: 3000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, 92vw);
    padding: 26px 26px 22px;
    background: #ffffff;
    border: 1px solid #e4e8ec;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
}

.publish-panel-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
}

.publish-panel-head h2 {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #15171a;
}

.publish-panel-head span {
    font-size: 0.8rem;
    color: #8a94a2;
}

.publish-panel[hidden] {
    display: none;
}

.publish-panel-row {
    margin-bottom: 16px;
}

.publish-panel-row label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #7b8694;
}

.publish-panel .post-category,
.publish-panel .post-tags {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    background: #fff;
    color: #2f3a49;
    font-size: 0.92rem;
    box-shadow: none;
    transition: border-color 0.15s ease;
}

/* 파란 포커스 링을 쓰지 않는다 — 테두리만 한 단계 밝아진다 */
.publish-panel .post-category:focus,
.publish-panel .post-tags:focus {
    outline: none;
    box-shadow: none;
    border-color: #a9b3bf;
}

.publish-panel-msg {
    margin: 0 0 12px;
    min-height: 1em;
    font-size: 0.82rem;
    color: #b3261e;
}

.publish-panel-msg:empty {
    margin-bottom: 0;
}

.publish-panel-foot {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 22px;
}

.publish-panel-foot .btn {
    min-width: 0;
    height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: none;
}

#publishCancel {
    background: transparent;
    border: 0;
    color: #7b8694;
}

#publishCancel:hover { background: #f0f2f5; }

/* 파란 채움 대신 무채색 반전으로 무게를 준다 */
#publishConfirm {
    border: 0;
    background: #15171a;
    color: #ffffff;
}

#publishConfirm:hover { background: #2f3a49; }

/* 다크 — 앱의 다른 면과 같은 중성 회색으로 */
html[data-theme="dark"] .publish-panel,
body[data-theme="dark"] .publish-panel {
    background: #171717;
    border-color: #3a3a3a;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

body[data-theme="dark"] .publish-panel-head h2 { color: #edf0f3; }
body[data-theme="dark"] .publish-panel-head span { color: #7d7d7d; }

body[data-theme="dark"] .publish-panel .post-category,
body[data-theme="dark"] .publish-panel .post-tags {
    border-color: #3a3a3a;
    background: #1d1d1d;
    color: #edf0f3;
}

body[data-theme="dark"] .publish-panel .post-category:focus,
body[data-theme="dark"] .publish-panel .post-tags:focus { border-color: #5a5a5a; }

body[data-theme="dark"] #publishCancel { color: #9a9a9a; }
body[data-theme="dark"] #publishCancel:hover { background: #262626; }
body[data-theme="dark"] #publishConfirm { background: #edf0f3; color: #15171a; }
body[data-theme="dark"] #publishConfirm:hover { background: #ffffff; }

html[data-theme="dark"] .publish-panel-row label,
body[data-theme="dark"] .publish-panel-row label {
    color: #aeb6c1;
}

html[data-theme="dark"] .publish-panel-msg,
body[data-theme="dark"] .publish-panel-msg {
    color: #f2b8b5;
}

/* Responsive Layout Adjustments (Tablet & Mobile) */
@media (max-width: 1024px) {
    /* 1024 이하는 사이트 헤더를 통째로 끄고 페이지 자신의 모바일 헤더를 쓴다
       (post-editor-mobile.css). 발행 패널도 거기서는 안 쓴다 — 바텀 시트가 그 일을 한다. */
    .publish-panel {
        display: none !important;
    }

    .split-container {
        display: block !important;
        /* Force block to ensure children take full width */
    }

    .post-editor {
        padding: 1.25rem 0;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .main-content {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .c-footer {
        display: none !important;
    }
}

/* =========================================
   쓰는 화면 — 가운데 한 열 (원장 지시 260918)

   제목과 본문이 같은 폭·같은 왼쪽 끝으로 서는 한 열이다. 참조는 Ghost 의 Koenig
   편집기(koenig.ghost.org)로, 거기는 max-w-740 + mx-auto 에 제목 48px / 본문 17px 이다.
   한글이라 제목만 34px 로 낮췄다(post-editor-editor.css).

   1024 이하는 이 화면을 쓰지 않는다 — 사이트 헤더를 끄고 페이지 자신의 모바일 헤더와
   바텀 시트를 쓴다(post-editor-mobile.css). 그래서 아래는 전부 1025 이상에서만 건다.
   ========================================= */

@media (min-width: 1025px) {

    body[data-chrome="editor"] .split-container {
        display: block;
        max-width: none;
    }

    body[data-chrome="editor"] .post-editor {
        border: 0;
        padding: 0;
        width: auto;
        box-shadow: none;
    }

    body[data-chrome="editor"] .editor-content {
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
        padding: 64px 20px 180px;
        box-sizing: border-box;
    }

    /* 인용을 옆에 붙였을 때 — 남은 칸 안에서 다시 가운데 */
    body[data-chrome="editor"][data-cite="dock"] .split-container { display: flex; }

    body[data-chrome="editor"][data-cite="dock"] .post-editor {
        flex: 1 1 auto;
        min-width: 0;
    }

    body[data-chrome="editor"][data-cite="dock"] .editor-content { max-width: 720px; }

    /* 헤더는 내려도 자리에 있어야 한다.
       .c-header 는 이미 position:sticky(header.css:19)인데 안 붙었다. 이 파일 맨 위의
       `html, body { overflow-y: auto }` 때문에 body 가 스크롤 상자가 되고, 그 안의 sticky 는
       body 의 스크롤포트에 붙는다 — body 는 제 내용에 딱 맞아 스크롤되지 않으므로(scrollHeight
       == clientHeight) 붙을 자리가 없어 문서와 같이 밀려 올라갔다. 그 규칙은 전역 CSS 가 스크롤을
       잠그는 걸 막으려고 둔 것이라 건드리지 않고, 헤더 상자를 fixed 로 띄우고 그 높이만큼 내린다. */
    body[data-chrome="editor"] #header-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }

    /* 48px = 헤더 높이(안쪽 줄 47 + 아래 테두리 1) */
    body[data-chrome="editor"] .split-container { padding-top: 48px; }

    /* 푸터 — 전역 `footer` 태그 규칙(styles.css:351)이 위아래로 10rem 씩 밀어낸다.
       푸터는 <footer id="site-footer"> 안에 <footer class="c-footer"> 가 한 겹 더 있어서
       그 규칙을 둘 다 맞는다. 바깥만 0 으로 두면 안쪽 160px 이 그대로 남고, 바깥 상자에는
       배경이 없어 페이지 바탕이 위아래로 회색 띠가 된다. 둘 다 건다.
       구분선은 .c-footer 가 이미 border-top 을 갖고 있으므로 여기서 또 긋지 않는다. */
    body[data-chrome="editor"] footer#site-footer,
    body[data-chrome="editor"] footer#site-footer .c-footer {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* 여백을 걷어도 바깥 상자가 비쳐 보이는 일이 없게 면 색을 맞춰 둔다 */
    body[data-chrome="editor"] footer#site-footer { background: #ffffff; }
    body[data-theme="dark"][data-chrome="editor"] footer#site-footer { background: var(--dark-bg, #10100f); }
}

/* =========================================
   모달 뒤 가림막 — 인용·발행이 같이 쓴다
   ========================================= */

.editor-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2900;
    background: rgba(9, 11, 14, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#publishBackdrop { z-index: 2950; }

/* 툴바(z-index 4000)는 가림막 위로 올라오면 안 된다 */
body[data-chrome="editor"][data-cite="modal"] #editor-toolbar,
body[data-chrome="editor"][data-publish="open"] #editor-toolbar { z-index: 2800; }

/* 쿠키 동의 띠(998)는 하단 툴바(4000) 위로 — 툴바에 가려 단추를 누를 수 없었다.
   인용 모달·발행 패널이 열리면 툴바처럼 가림막 아래로 내린다. */
body[data-chrome="editor"] .cookie-consent { z-index: 4100; }
body[data-chrome="editor"][data-cite="modal"] .cookie-consent,
body[data-chrome="editor"][data-publish="open"] .cookie-consent { z-index: 2800; }

/* =========================================
   게시판 고르개 — <select> 대신 직접 그린다

   브라우저가 그리는 <select> 목록은 OS 가 그려서 꾸밀 수 없다. 값은 그대로
   #postBoard 가 들고, 화면에 보이는 목록만 여기서 그린다(post-editor-ui.js).
   카드가 작아 목록을 띄우면 아래로 삐져나오므로, 뜨지 않고 제자리에서 카드를 늘린다.
   ========================================= */

.board-picker { position: relative; }

.board-picker-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    background: #fff;
    color: #2f3a49;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.board-picker-btn.is-empty { color: #9aa3ae; }

.board-picker-btn::after {
    content: '';
    flex: 0 0 auto;
    margin-left: 10px;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.55;
}

.board-picker.is-open .board-picker-btn { border-color: #a9b3bf; }
.board-picker.is-open .board-picker-btn::after { transform: rotate(180deg); }

.board-picker-list {
    display: none;
    margin-top: 6px;
    padding: 6px;
    max-height: 248px;
    overflow-y: auto;
    border: 1px solid #e4e8ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
}

.board-picker.is-open .board-picker-list { display: block; }

.board-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #2f3a49;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.board-picker-row:hover { background: #f2f4f7; }

.board-picker-row.is-on {
    background: #f2f4f7;
    font-weight: 600;
}

.board-picker-row.is-on::after {
    content: '\2713';
    font-size: 0.82rem;
    opacity: 0.7;
}

/* 다크 */
body[data-theme="dark"] .board-picker-btn {
    border-color: #3a3a3a;
    background: #1d1d1d;
    color: #edf0f3;
}

body[data-theme="dark"] .board-picker-btn.is-empty { color: #7d7d7d; }
body[data-theme="dark"] .board-picker.is-open .board-picker-btn { border-color: #5a5a5a; }

body[data-theme="dark"] .board-picker-list {
    border-color: #3a3a3a;
    background: #202020;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

body[data-theme="dark"] .board-picker-row { color: #edf0f3; }
body[data-theme="dark"] .board-picker-row:hover { background: #2a2a2a; }

body[data-theme="dark"] .board-picker-row.is-on {
    background: #2a2a2a;
    font-weight: 600;
}