/* 글쓰기 판(summernote)의 차림 — 테마를 따르게.
 *
 * 이 파일은 **글을 쓰는 화면에서만** 실린다(base.html 이 가린다). 편집기가
 * 없는 화면에 규칙만 얹어 둘 까닭이 없다.
 *
 * 앞서는 `community-style.css` 안에 두었는데, 그 파일을 싣는 화면이 다섯
 * 가운데 둘뿐이었다 — 정작 제보받은 '공지사항 수정' 에는 실리지 않았다.
 */

/* 13-2. 글쓰기 판의 고르개 — 테마를 따르게.
 *
 * 색 고르개가 **기본 차림 그대로**였다. 흰 판에 스무 칸짜리 색표 둘(배경색과
 * 글자색)이 세로로 붙어 화면 절반을 덮었고, 어두운 테마에서도 혼자 하얬다.
 * 칸은 12px 라 폰에서는 짚기 어려웠다.
 *
 * 떠 있는 다른 것들(시트·도구 막대)과 같은 토큰을 쓴다. 색표 자체는 손대지
 * 않는다 — 고를 색은 글쓴이의 것이다. */
.note-popover .popover-content,
.note-editor .note-dropdown-menu {
    background: var(--paper-raised, var(--paper));
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius-surface, 12px);
    box-shadow: var(--shadow-strong, 0 8px 20px rgb(0 0 0 / 0.15));
    padding: var(--space-2);
}

/* 두 색표를 나란히 둔다 — 세로로 쌓으면 화면을 덮는다.
 *
 * **열렸을 때만** 손댄다. 처음에 `.note-dropdown-menu` 에 그냥
 * `display: flex` 를 걸었더니 summernote 가 닫아 두는 `display: none` 까지
 * 덮어, 색표가 화면에 영영 떠 있었다 (2026-09-28 제보). 여는 쪽이 `.open` 을
 * 붙이므로 그 안에서만 말한다. */
.note-editor .note-color.open .note-dropdown-menu,
.note-editor .note-color .note-dropdown-menu.show {
    display: flex;
    gap: var(--space-3);
    min-width: 0;
}

.note-editor .note-palette {
    width: auto;
    min-width: 0;
}

.note-editor .note-palette-title {
    margin: 0 0 var(--space-1);
    padding: 0;
    border: 0;
    color: var(--ink-muted);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}

/* '투명' · '기본값으로 설정' · '고르다' — 조용한 단추로 */
.note-editor .note-color-reset,
.note-editor .note-color-select {
    width: 100%;
    margin: var(--space-1) 0 0;
    padding: 4px 6px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-control, 8px);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 12px;
}

.note-editor .note-color-reset:hover,
.note-editor .note-color-select:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* 칸을 키워 손가락이 닿게 한다 (기본 12px) */
.note-editor .note-color-palette div .note-color-btn {
    width: 18px;
    height: 18px;
    margin: 1px;
    border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    border-radius: 3px;
}

.note-editor .note-color-palette div .note-color-btn:hover {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}

.note-editor .note-dropdown-menu .note-dropdown-item {
    color: var(--ink);
}

.note-editor .note-dropdown-menu .note-dropdown-item:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
}

@media (max-width: 560px) {
    /* 폰에서는 둘이 나란히 서면 좁다 — 한 번에 하나씩. 여기서도 **열렸을
       때만** 말한다. */
    .note-editor .note-color.open .note-dropdown-menu,
    .note-editor .note-color .note-dropdown-menu.show {
        display: block;
        max-height: 60vh;
        overflow-y: auto;
    }
}


/* 편집기 틀도 테마를 따른다.
 *
 * 앞서는 `html.dark-mode` 한 갈래만 손으로 적어 두어, 세피아·한지·숲에서는
 * 흰 판이 그대로 떴다. 색을 박아 두지 않고 토큰으로 돌린다. */
.note-editor.note-frame {
    border: 1px solid var(--rule);
    border-radius: var(--radius-control, 8px);
    background: var(--paper);
}

.note-editor .note-toolbar {
    background: var(--paper-raised, var(--paper));
    border-bottom: 1px solid var(--rule);
}

.note-editor .note-editing-area .note-editable {
    background: var(--paper);
    color: var(--ink);
}

.note-editor .note-statusbar {
    background: var(--paper-raised, var(--paper));
    border-top: 1px solid var(--rule);
}

.note-editor .note-btn {
    background: transparent;
    border-color: var(--rule);
    color: var(--ink);
}

.note-editor .note-btn:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* 최근에 고른 색이 서는 줄 — 빈 칸이 흰 상자로 튀지 않게 */
.note-editor .note-color-row:last-child .note-color-btn {
    border: 1px solid var(--rule);
}