/* ==========================================================
   ForumHub Notice UI Polish
   Dark detail + clean document editor
   ========================================================== */

.notice-page,
.notice-detail-page,
.notice-editor-page {
    color:#dbe7f0;
}


/* ----------------------------------------------------------
   PAGE HEAD
   ---------------------------------------------------------- */

.notice-page-head h1,
.editor-page-head h1 {
    color:#f3f7fb !important;
    letter-spacing:-.035em;
}

.notice-page-head p,
.editor-page-head p {
    color:#8397a9 !important;
    font-size:12px !important;
}

.notice-page-head > div > span,
.editor-page-head > div > span {
    color:#57d8d0 !important;
}


/* ----------------------------------------------------------
   NOTICE LIST
   ---------------------------------------------------------- */

.notice-filters {
    border-color:#1d3448 !important;
    background:#091725 !important;
}

.notice-filters button {
    color:#8095a7 !important;
}

.notice-filters button.active {
    background:#12273a !important;
    color:#e9f4fa !important;
    box-shadow:none !important;
}

.notice-list {
    border-color:#1d3448 !important;
}

.notice-row {
    border-color:#172c3e !important;
}

.notice-row:hover {
    background:#0c1d2c !important;
}

.notice-row-main strong {
    color:#e5eef5 !important;
    font-size:13px !important;
}

.notice-row-main p {
    color:#7f94a5 !important;
    font-size:11px !important;
}

.notice-row-meta {
    color:#71879a !important;
}


/* ----------------------------------------------------------
   NOTICE DETAIL
   ---------------------------------------------------------- */

.notice-back {
    color:#6fbfc1 !important;
    font-size:11px !important;
    font-weight:700;
}

.notice-detail-card {
    padding:40px 42px !important;

    border:1px solid #1d364b !important;
    border-radius:20px !important;

    background:
        linear-gradient(
            180deg,
            rgba(13,30,45,.98),
            rgba(9,24,38,.98)
        ) !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,.16);
}

.notice-detail-card header {
    border-color:#294156 !important;
}

.notice-detail-meta {
    color:#8298aa !important;
    font-size:10px !important;
}

.notice-detail-card h1 {
    margin-top:20px !important;

    color:#f4f8fb !important;

    font-size:clamp(28px,3vw,38px) !important;
    font-weight:850 !important;
    line-height:1.3 !important;
    letter-spacing:-.045em;
}

.notice-detail-author {
    color:#7e92a3 !important;
    font-size:10px !important;
}

.notice-detail-author strong {
    color:#c9d8e4 !important;
}

.notice-detail-admin a,
.notice-detail-admin button {
    border-color:#294256 !important;
    background:#12283a !important;
    color:#d9e5ed !important;
}


/* 핵심: 본문 가독성 */

.notice-rendered-body {
    padding-top:34px !important;

    color:#cbd8e3 !important;

    font-size:15px !important;
    font-weight:400;
    line-height:1.9 !important;

    letter-spacing:-.012em;
    word-break:keep-all;
    overflow-wrap:anywhere;
}

.notice-rendered-body p,
.notice-rendered-body li,
.notice-rendered-body div {
    color:inherit;
}

.notice-rendered-body strong,
.notice-rendered-body b {
    color:#f1f6fa;
    font-weight:800;
}

.notice-rendered-body h2,
.notice-rendered-body h3,
.notice-rendered-body h4 {
    color:#f1f6fa !important;
    letter-spacing:-.035em;
}

.notice-rendered-body h2 {
    margin:38px 0 16px !important;
    font-size:25px !important;
}

.notice-rendered-body h3 {
    margin:32px 0 14px !important;
    font-size:21px !important;
}

.notice-rendered-body h4 {
    margin:27px 0 12px !important;
    font-size:18px !important;
}

.notice-rendered-body p {
    margin:13px 0 !important;
}

.notice-rendered-body ul,
.notice-rendered-body ol {
    padding-left:27px;
}

.notice-rendered-body li {
    margin:6px 0;
}

.notice-rendered-body blockquote {
    margin:22px 0 !important;
    padding:16px 19px !important;

    border-left:3px solid #45c9c2 !important;
    border-radius:0 10px 10px 0;

    background:#10293a !important;
    color:#bdd0dc !important;
}

.notice-rendered-body a {
    color:#62d7d4 !important;
    text-decoration-color:rgba(98,215,212,.45);
    text-underline-offset:3px;
}

.notice-rendered-body hr {
    margin:32px 0;
    border:0;
    border-top:1px solid #294156;
}

.notice-rendered-body table {
    overflow:hidden;
    border-radius:10px;
}

.notice-rendered-body th,
.notice-rendered-body td {
    border-color:#294156 !important;
    color:#cbd8e3 !important;
    font-size:13px;
}

.notice-rendered-body th {
    background:#132b3d;
    color:#eef5f9 !important;
}

.notice-rendered-body img {
    border-radius:10px;
}

.notice-rendered-body figcaption {
    color:#7e94a6 !important;
    font-size:10px !important;
}


/* ----------------------------------------------------------
   CATEGORY
   ---------------------------------------------------------- */

.notice-category {
    border:1px solid rgba(255,255,255,.05);
    background:#14283a !important;
    color:#a8bbc8 !important;
}

.notice-category.important {
    background:rgba(222,91,96,.14) !important;
    color:#ff9ea1 !important;
}

.notice-category.maintenance {
    background:rgba(229,181,74,.14) !important;
    color:#e7c576 !important;
}

.notice-category.event {
    background:rgba(75,202,193,.12) !important;
    color:#78dcd7 !important;
}


/* ----------------------------------------------------------
   EDITOR META
   ---------------------------------------------------------- */

.editor-meta-card {
    border-color:#1e374c !important;
    background:#0c1c2b !important;
}

.editor-meta-card label > span {
    color:#8ca0b1 !important;
    font-size:10px !important;
}

.editor-meta-card select,
.editor-meta-card input[type="text"],
.editor-meta-card input:not([type]) {
    border-color:#294156 !important;
    background:#091725 !important;
    color:#e6eef5 !important;
    font-size:13px !important;
}

.editor-pin-label {
    color:#d7e3eb;
}

.editor-pin-label small {
    display:block;
    margin-left:5px;
    color:#63c8c7;
    font-size:9px;
}


/* ----------------------------------------------------------
   NAVER-LIKE DOCUMENT EDITOR
   ---------------------------------------------------------- */

.notice-editor-page .rich-editor-shell {
    overflow:visible;

    border:1px solid #294156 !important;
    border-radius:15px !important;

    background:#fff !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.14);
}

.notice-editor-page .rich-toolbar {
    gap:6px !important;
    padding:10px 12px !important;

    border-color:#dde4e9 !important;

    background:rgba(248,250,252,.98) !important;
    box-shadow:0 5px 16px rgba(10,25,40,.06) !important;
}

.notice-editor-page .toolbar-group {
    position:relative;
    align-items:center;
}

.notice-editor-page .rich-toolbar button,
.notice-editor-page .rich-toolbar select {
    min-height:36px !important;

    padding:0 10px !important;

    border:1px solid transparent !important;
    border-radius:7px !important;

    background:#f0f3f6 !important;
    color:#354454 !important;

    font-size:11px !important;
    font-weight:750 !important;
}

.notice-editor-page .rich-toolbar button:hover,
.notice-editor-page .rich-toolbar select:hover {
    border-color:#cbd6df !important;
    background:#fff !important;
}

.notice-editor-page .rich-toolbar button:active {
    transform:translateY(1px);
}

.notice-editor-page .toolbar-image-button {
    background:#15364b !important;
    color:#fff !important;
}

.notice-editor-page .rich-editor {
    min-height:650px !important;

    padding:38px 48px 120px !important;

    background:#fff !important;
    color:#25313d !important;

    font-size:15px !important;
    line-height:1.85 !important;

    caret-color:#0ea5a4;
}

.notice-editor-page .rich-editor::selection,
.notice-editor-page .rich-editor *::selection {
    background:#b8eeeb;
}

.notice-editor-page .rich-editor h2 {
    color:#152332;
    font-size:25px;
}

.notice-editor-page .rich-editor h3 {
    color:#192838;
    font-size:21px;
}

.notice-editor-page .rich-editor h4 {
    color:#1d2d3c;
    font-size:18px;
}

.notice-editor-page .rich-editor blockquote {
    border-left-color:#43bbb7;
    background:#f2f8f8;
    color:#40515f;
}


/* ----------------------------------------------------------
   FONT SIZE / LINE HEIGHT / TEXT COLOR CLASSES
   서버 sanitize를 통과하도록 inline style 대신 class 사용
   ---------------------------------------------------------- */

.rich-editor .fh-fs-13,
.notice-rendered-body .fh-fs-13 {
    font-size:13px !important;
}

.rich-editor .fh-fs-15,
.notice-rendered-body .fh-fs-15 {
    font-size:15px !important;
}

.rich-editor .fh-fs-17,
.notice-rendered-body .fh-fs-17 {
    font-size:17px !important;
}

.rich-editor .fh-fs-20,
.notice-rendered-body .fh-fs-20 {
    font-size:20px !important;
}

.rich-editor .fh-fs-24,
.notice-rendered-body .fh-fs-24 {
    font-size:24px !important;
}

.rich-editor .fh-fs-30,
.notice-rendered-body .fh-fs-30 {
    font-size:30px !important;
}


.rich-editor .fh-lh-15,
.notice-rendered-body .fh-lh-15 {
    line-height:1.5 !important;
}

.rich-editor .fh-lh-18,
.notice-rendered-body .fh-lh-18 {
    line-height:1.8 !important;
}

.rich-editor .fh-lh-21,
.notice-rendered-body .fh-lh-21 {
    line-height:2.1 !important;
}


.rich-editor .fh-tc-dark,
.notice-rendered-body .fh-tc-dark {
    color:#dce8f1 !important;
}

.notice-editor-page .rich-editor .fh-tc-dark {
    color:#25313d !important;
}

.rich-editor .fh-tc-mint,
.notice-rendered-body .fh-tc-mint {
    color:#29b8b3 !important;
}

.rich-editor .fh-tc-blue,
.notice-rendered-body .fh-tc-blue {
    color:#4e9de8 !important;
}

.rich-editor .fh-tc-red,
.notice-rendered-body .fh-tc-red {
    color:#ef646b !important;
}

.rich-editor .fh-tc-yellow,
.notice-rendered-body .fh-tc-yellow {
    color:#d9a928 !important;
}

.rich-editor .fh-tc-gray,
.notice-rendered-body .fh-tc-gray {
    color:#7f8d99 !important;
}


/* ----------------------------------------------------------
   COLOR PALETTE
   ---------------------------------------------------------- */

.toolbar-color-wrap {
    position:relative;
}

.editor-color-palette {
    position:absolute;

    top:43px;
    left:0;
    z-index:250;

    width:176px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;

    padding:9px;

    border:1px solid #d8e0e6;
    border-radius:10px;

    background:#fff;

    box-shadow:
        0 12px 32px rgba(18,32,46,.16);
}

.editor-color-palette.hidden {
    display:none !important;
}

.editor-color-palette button {
    min-width:44px !important;
    min-height:35px !important;
    padding:0 !important;

    border:1px solid #e1e6ea !important;
    background:#fff !important;

    font-size:10px !important;
}

.editor-color-dot {
    display:inline-block;

    width:12px;
    height:12px;

    margin-right:4px;

    border-radius:50%;
    vertical-align:-2px;
}

.editor-color-dot.default { background:#25313d; }
.editor-color-dot.mint    { background:#29b8b3; }
.editor-color-dot.blue    { background:#4e9de8; }
.editor-color-dot.red     { background:#ef646b; }
.editor-color-dot.yellow  { background:#d9a928; }
.editor-color-dot.gray    { background:#7f8d99; }


/* ----------------------------------------------------------
   PREVIEW
   ---------------------------------------------------------- */

.notice-preview {
    border-color:#1f384c !important;
    background:#0c1c2b !important;
}

.notice-preview h1 {
    color:#eef5fa !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:760px) {

    .notice-detail-card {
        padding:24px 20px !important;
    }

    .notice-rendered-body {
        font-size:14px !important;
    }

    .notice-editor-page .rich-toolbar {
        flex-wrap:nowrap !important;
        overflow-x:auto;
    }

    .notice-editor-page .toolbar-group {
        flex:0 0 auto;
    }

    .notice-editor-page .rich-editor {
        padding:28px 20px 90px !important;
        font-size:14px !important;
    }
}