/* =========================================
   아티클 작성 화면

   게시글 작성기(`/pages/post/post-editor.html`)와 같은 말씨를 쓴다. 헤더 깎기·발행 카드·
   가림막·게시판 고르개는 그 화면의 `post-editor-layout.css` 를 그대로 불러서 쓰고,
   여기에는 아티클에만 있는 두 열(왼쪽 HTML · 오른쪽 게시된 모양)만 적는다.
   타이포 값(34px 제목·1px 선·떠 있는 알약)은 그 화면의 `post-editor-editor.css` 에서
   가져온 것이다 — 거기는 `#postTitle`·`#editor-toolbar` 로 걸려 있어 선택자를 같이 못 쓴다.
   ========================================= */

/* 편집기 크롬은 헤더를 fixed 로 띄운다(post-editor-layout.css). 그 높이만큼 내린다. */
.editor-page {
    display: grid;
    grid-template-columns: minmax(400px, 1fr) minmax(680px, 1.08fr);
    height: 100vh;
    padding-top: 48px;
    box-sizing: border-box;
    background: #ffffff;
}

/* `display: grid` 는 hidden 속성의 기본 display:none 을 이긴다 —
   이 한 줄이 없으면 막힌 화면과 편집기가 같이 보인다. */
.editor-page[hidden] { display: none; }

body[data-theme="dark"] .editor-page { background: var(--dark-bg, #10100f); }

/* ---------- 왼쪽: 원고 ---------- */

.editor-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 48px 32px 0;
    border-right: 1px solid #ebeef1;
    overflow-y: auto;
}

body[data-theme="dark"] .editor-side { border-right-color: #262626; }

/* 제목 — 테두리도 배경도 없이, 아래에 가는 선 하나.
   게시글 작성기는 34px 인데 여기는 열이 절반이라 27px 로 낮췄다. */
.editor-side .article-title-input {
    width: 100%;
    padding: 0 0 20px;
    border: 0;
    border-bottom: 1px solid #ebeef1;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 27px;
    line-height: 1.32;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #15171a;
    box-sizing: border-box;
}

.editor-side .article-title-input::placeholder { font-weight: 700; color: #c3c9d1; }

/* 파란 포커스 링을 쓰지 않는다(원장 지시 260918) — 선만 한 단계 밝아진다. */
.editor-side .article-title-input:focus {
    outline: none;
    box-shadow: none;
    border-bottom-color: #a9b3bf;
}

body[data-theme="dark"] .editor-side .article-title-input {
    border-bottom-color: #262626;
    color: #edf0f3;
}

body[data-theme="dark"] .editor-side .article-title-input::placeholder { color: #5c5c5c; }
body[data-theme="dark"] .editor-side .article-title-input:focus { border-bottom-color: #5a5a5a; }

/* 본문 칸을 감싼 자리 — 이미지를 끌어다 놓는 곳이다. */
.html-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-top: 24px;
}

/* 본문 — 상자를 걷는다. 붙여넣는 것이 HTML 이라 글꼴만 고정폭으로 둔다. */
.editor-side .article-html-input {
    flex: 1 1 auto;
    min-height: 320px;
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 21px;
    color: #2f3a49;
    resize: none;
    white-space: pre;
    overflow: auto;
    box-sizing: border-box;
}

.editor-side .article-html-input:focus { outline: none; }
.editor-side .article-html-input::placeholder { color: #c3c9d1; }

/* 끌어다 놓는 동안 — 점선은 글자 바깥 12px 에 긋는다. 안쪽에 그으면 HTML 글자 위를 지난다.
   칸과 바깥 띠를 같은 색으로 칠해야 한 판으로 보인다(칸만 비우면 흰 칸 둘레에 회색 띠가 남는다). */
.html-drop.is-drop .article-html-input {
    outline: 1.5px dashed #9aa4b1;
    outline-offset: 12px;
    border-radius: 2px;
    background: #f3f5f7;
    box-shadow: 0 0 0 12px #f3f5f7;
}

body[data-theme="dark"] .html-drop.is-drop .article-html-input {
    outline-color: #555;
    background: #1d1d1c;
    box-shadow: 0 0 0 12px #1d1d1c;
}

/* 안내는 칸 가운데가 아니라 테두리 아래 가장자리에 — 본문이 차 있어도 글자를 가리지 않는다. */
.drop-hint {
    position: absolute;
    left: 50%;
    bottom: -12px;
    z-index: 5;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #e0e3e7;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
    font-size: 13px;
    color: #5b6573;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, 50%);
}

.html-drop.is-drop .drop-hint { display: flex; }

body[data-theme="dark"] .drop-hint { border-color: #3a3a3a; background: #262626; color: #c9ced6; }
body[data-theme="dark"] .editor-side .article-html-input { color: #c9ced6; }
body[data-theme="dark"] .editor-side .article-html-input::placeholder { color: #5c5c5c; }

/* ---------- 걸린 자리 ---------- */

.editor-findings { margin: 18px 0 0; }

.editor-findings-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #7b8694;
}

body[data-theme="dark"] .editor-findings-head { color: #9a9a9a; }

.violation-list { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 20px; }

.violation-list li {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid #ebeef1;
    color: #2f3a49;
}

body[data-theme="dark"] .violation-list li { border-top-color: #262626; color: #c9ced6; }

/* 줄 번호를 앞에 세워야 글쓴이가 바로 그 줄로 간다 */
.violation-line {
    flex: 0 0 auto;
    min-width: 42px;
    font-variant-numeric: tabular-nums;
    color: #8a94a2;
}

body[data-theme="dark"] .violation-line { color: #7d7d7d; }

/* ---------- 첨부한 이미지 ---------- */

.media-tray { margin: 22px 0 0; }

.media-tray-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #7b8694;
}

.media-tray-count { font-weight: 500; color: #a0a8b3; }

.media-tray-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }

.media-item {
    flex: 0 0 140px;
    overflow: hidden;
    border: 1px solid #ebeef1;
    border-radius: 10px;
    background: #fff;
}

.media-item img {
    display: block;
    width: 100%;
    height: 80px;
    object-fit: cover;
    background: #f3f4f6;
}

.media-item-meta { padding: 7px 8px 8px; }

.media-item-name {
    overflow: hidden;
    font-size: 12px;
    color: #2f3a49;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.media-item-size { display: flex; align-items: center; gap: 4px; margin-top: 1px; font-size: 11px; color: #8a94a2; }

.media-item-error { margin: 4px 0 0; font-size: 11px; line-height: 15px; color: #b3261e; }

.media-item-acts { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }

.media-item-acts button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 0;
    border: 1px solid #e0e3e7;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 11.5px;
    color: #555;
    cursor: pointer;
}

.media-item-acts button:hover { background: #f1f3f5; color: #2c3e50; }
.media-item-acts button i { font-size: 11px; color: #8a94a2; }

.media-item.is-uploading img { opacity: 0.35; }
.media-item.is-uploading .media-item-size { color: #2f3a49; }
.media-item.is-failed img { opacity: 0.35; }

body[data-theme="dark"] .media-tray-head { color: #9a9a9a; }
body[data-theme="dark"] .media-item { border-color: #2c2c2c; background: #1a1a19; }
body[data-theme="dark"] .media-item img { background: #242423; }
body[data-theme="dark"] .media-item-name { color: #c9ced6; }
body[data-theme="dark"] .media-item.is-uploading .media-item-size { color: #c9ced6; }
body[data-theme="dark"] .media-item-error { color: #f2b8b5; }
body[data-theme="dark"] .media-item-acts button { border-color: #333; color: #b6bcc4; }
body[data-theme="dark"] .media-item-acts button:hover { background: #2a2a2a; color: #edf0f3; }

/* ---------- 떠 있는 알약 — 검사 도구 ----------
   게시글 작성기의 툴바와 같은 모양이다(#editor-toolbar). 거기는 화면 가운데 fixed 인데
   여기는 열이 둘이라 왼쪽 열 안에서 sticky 로 붙인다 — 자리 계산이 필요 없다. */

.editor-tools {
    position: sticky;
    bottom: 14px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 18px 0 14px;
    padding: 9px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    background: rgba(248, 249, 250, 0.94);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body[data-theme="dark"] .editor-tools {
    border-color: #3a3a3a;
    background: rgba(29, 29, 29, 0.94);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.editor-tools button,
.editor-tools .editor-tool-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.editor-tools button:hover:not(:disabled),
.editor-tools .editor-tool-link:hover { background: #e9ecef; color: #2c3e50; }

body[data-theme="dark"] .editor-tools button,
body[data-theme="dark"] .editor-tools .editor-tool-link { color: #b6bcc4; }

body[data-theme="dark"] .editor-tools button:hover:not(:disabled),
body[data-theme="dark"] .editor-tools .editor-tool-link:hover { background: #2a2a2a; color: #edf0f3; }

/* 검사는 이 알약에서 제일 무거운 일이다 — 글자 하나만 진하게 둔다 */
.editor-tools #check-button { font-weight: 600; color: #2f3a49; }
body[data-theme="dark"] .editor-tools #check-button { color: #edf0f3; }

.editor-tools button i,
.editor-tools .editor-tool-link i { font-size: 13px; color: #8a94a2; }
.editor-tools #check-button i { color: #2f3a49; }
body[data-theme="dark"] .editor-tools button i,
body[data-theme="dark"] .editor-tools .editor-tool-link i { color: #8d8d8d; }
body[data-theme="dark"] .editor-tools #check-button i { color: #edf0f3; }

/* 아이콘을 글자 높이에 맞춘다. 상자끼리는 가운데가 맞는데(0.2px 안) Noto Sans KR 의 한글은
   글자 칸 안에서 아래쪽에 그려져, 아이콘이 떠 보였다. 획끼리 잰 차이가
   13px 글자에서 1.25px, 11~12px 에서 0.6px 였다(260918 실측). 글꼴·크기를 바꾸면 다시 잴 것. */
.editor-tools button i,
.editor-tools .editor-tool-link i { transform: translateY(1.25px); }
.media-item-acts button i,
.media-tray-head i { transform: translateY(0.6px); }

.editor-tools .editor-tools-spacer { flex: 1 1 auto; }

.editor-state { font-size: 12.5px; color: #8a94a2; }
body[data-theme="dark"] .editor-state { color: #8d8d8d; }
.editor-state.is-bad { color: #b3261e; }
body[data-theme="dark"] .editor-state.is-bad { color: #f2b8b5; }

/* ---------- 오른쪽: 게시된 모양 ---------- */

.editor-preview {
    position: relative;
    min-width: 0;
    overflow-y: auto;
    background: var(--color-bg-page);
}

.editor-preview-label {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 10px 20px;
    border-bottom: 1px solid #ebeef1;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #8a94a2;
}

body[data-theme="dark"] .editor-preview-label {
    border-bottom-color: #262626;
    background: rgba(16, 16, 15, 0.9);
    color: #8d8d8d;
}

.editor-preview-inner { padding: 28px 0 96px; }

/* ---------- 발행 카드 안의 태그 고르개 ----------
   넷뿐이라 목록을 여닫지 않고 한 번에 보인다. 고른 것은 파란 채움이 아니라
   무채색 반전으로 무게를 준다 — 발행 버튼과 같은 말씨다. */

.tag-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.tag-chip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 12px;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tag-chip:hover { border-color: #a9b3bf; }

.tag-chip-name { font-size: 0.9rem; font-weight: 600; color: #2f3a49; }
.tag-chip-gloss { font-size: 0.74rem; color: #8a94a2; }

.tag-chip.is-on {
    border-color: #15171a;
    background: #15171a;
}

.tag-chip.is-on .tag-chip-name { color: #ffffff; }
.tag-chip.is-on .tag-chip-gloss { color: #b9bfc7; }

body[data-theme="dark"] .tag-chip { border-color: #3a3a3a; background: #1d1d1d; }
body[data-theme="dark"] .tag-chip:hover { border-color: #5a5a5a; }
body[data-theme="dark"] .tag-chip-name { color: #edf0f3; }
body[data-theme="dark"] .tag-chip-gloss { color: #8d8d8d; }

body[data-theme="dark"] .tag-chip.is-on { border-color: #edf0f3; background: #edf0f3; }
body[data-theme="dark"] .tag-chip.is-on .tag-chip-name { color: #15171a; }
body[data-theme="dark"] .tag-chip.is-on .tag-chip-gloss { color: #4d5560; }

/* ---------- 발행 카드 안의 각주 확인 ----------
   게시글 작성기의 발행 카드(.publish-panel)를 그대로 쓰고, 아티클에만 있는 줄을 더한다. */

.publish-panel .fulltext-note {
    margin: 0 0 8px;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #7b8694;
}

body[data-theme="dark"] .publish-panel .fulltext-note { color: #9a9a9a; }

.fulltext-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 190px;
    overflow-y: auto;
    font-size: 0.88rem;
    line-height: 1.5;
}

.fulltext-list li { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; }
.fulltext-list input { margin: 3px 0 0; flex: 0 0 auto; }
.fulltext-list label { color: #2f3a49; cursor: pointer; }
body[data-theme="dark"] .fulltext-list label { color: #c9ced6; }

/* 발행 단추는 준비가 안 되면 눌리지 않는다 */
.publish-panel-foot .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- 막힌 화면 ---------- */

.editor-block {
    max-width: 560px;
    margin: 140px auto;
    text-align: center;
    font-size: 14px;
    color: #7b8694;
}

body[data-theme="dark"] .editor-block { color: #9a9a9a; }

/* ---------- 좁은 화면 ----------
   게시글 작성기는 1024 이하에서 제 모바일 헤더와 바텀 시트를 쓰고 발행 카드를 끈다.
   아티클 작성기에는 그 바텀 시트가 없으므로 발행 카드를 도로 켠다 —
   이 한 줄이 `post-editor-layout.css` 를 덮는 유일한 자리다. */

/* 발행 버튼은 넓은 화면에서 헤더에 있다 — 알약의 것은 그때 뺀다 */
@media (min-width: 1025px) {
    .editor-tools #publish-narrow { display: none; }
}

@media (max-width: 1024px) {
    .publish-panel { display: block !important; }
    .publish-panel[hidden] { display: none !important; }

    .editor-tools #publish-narrow { font-weight: 600; color: #2f3a49; }
    body[data-theme="dark"] .editor-tools #publish-narrow { color: #edf0f3; }

    .editor-page {
        grid-template-columns: 1fr;
        height: auto;
        /* 이 폭에서는 헤더가 fixed 가 아니다(post-editor-layout.css 는 1025 이상에서만 띄운다) */
        padding-top: 0;
    }

    .editor-side {
        padding: 28px 18px 0;
        border-right: 0;
        border-bottom: 1px solid #ebeef1;
        overflow-y: visible;
    }

    body[data-theme="dark"] .editor-side { border-bottom-color: #262626; }

    .editor-side .article-title-input { font-size: 22px; }
    .editor-side .article-html-input { min-height: 280px; overflow: visible; }
    .editor-tools { position: static; }
}