/*====================================================

ROOMI 2.0
Forum Editor
Version 3 FINAL

Part 1
Base / Layout

======================================================*/

/*====================================================
Color System
======================================================*/

:root{

    --editor-main:#7da9d8;
    --editor-dark:#4f7ca8;
    --editor-light:#f5faff;

    --editor-bg:#ffffff;

    --editor-border:#d9e8f5;

    --editor-radius:18px;

    --editor-shadow:
        0 10px 25px rgba(0,0,0,.08);

}


/*====================================================
Editor Page
======================================================*/

.editor-page{

    width:min(1280px,95%);

    margin:40px auto 80px;

}


/*====================================================
Breadcrumb
======================================================*/

.breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:25px;

    font-size:14px;

}

.breadcrumb a{

    color:var(--editor-dark);

    text-decoration:none;

    transition:.25s;

}

.breadcrumb a:hover{

    color:var(--editor-main);

}

.breadcrumb .current{

    color:#666;

    font-weight:700;

}


/*====================================================
Header
======================================================*/

.editor-header{

    padding:40px;

    margin-bottom:30px;

    background:#fff;

    border:2px solid var(--editor-border);

    border-radius:var(--editor-radius);

    box-shadow:var(--editor-shadow);

}

.editor-header h1{

    margin:0;

    color:var(--editor-dark);

    font-size:34px;

}

.editor-header p{

    margin-top:12px;

    color:#777;

    line-height:1.8;

}


/*====================================================
Common Card
======================================================*/

.editor-information,

.editor-workspace,

.preview-section,

.publish-section,

.editor-status,

.editor-action{

    margin-bottom:30px;

    padding:30px;

    background:#fff;

    border:2px solid var(--editor-border);

    border-radius:var(--editor-radius);

    box-shadow:var(--editor-shadow);

}


/*====================================================
Section Header
======================================================*/

.section-header{

    margin-bottom:25px;

}

.section-header h2{

    margin:0;

    font-size:26px;

    color:var(--editor-dark);

}

.section-header p{

    margin-top:10px;

    color:#888;

}


/*====================================================
Form Group
======================================================*/

.form-group{

    margin-bottom:28px;

}

.form-group:last-child{

    margin-bottom:0;

}

.form-group label{

    display:block;

    margin-bottom:10px;

    color:var(--editor-dark);

    font-size:16px;

    font-weight:700;

}


/*====================================================
Input
======================================================*/

.form-group input,

.form-group select{

    width:100%;

    height:50px;

    padding:0 18px;

    border:2px solid var(--editor-border);

    border-radius:12px;

    background:#fff;

    font-size:15px;

    transition:.25s;

    box-sizing:border-box;

}

.form-group input:focus,

.form-group select:focus{

    outline:none;

    border-color:var(--editor-main);

    box-shadow:

        0 0 0 4px rgba(125,169,216,.15);

}


/*====================================================
Smooth Animation
======================================================*/

button,

input,

select{

    transition:.2s;

}
/*====================================================

Part 2
Article Information

======================================================*/

/*====================================================
Information Area
======================================================*/

.editor-information{

    display:flex;

    flex-direction:column;

    gap:28px;

}


/*====================================================
Post Type
======================================================*/

.post-type-list{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.post-type-list label{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:150px;          /* 原本沒有 → 增加寬度 */

    height:54px;              /* 新增固定高度 */

    padding:0 22px;           /* 原本10px 18px */

    border:2px solid var(--editor-border);

    border-radius:999px;

    background:#fff;

    cursor:pointer;

    transition:.25s;

    font-size:16px;           /* 原本15px */

    font-weight:700;

    color:var(--editor-dark);

    white-space:nowrap;       /* 防止「一般文章」換行 */

}

.post-type-list label:hover{

    background:var(--editor-light);

    border-color:var(--editor-main);

}

.post-type-list input{

    width:18px;

    height:18px;

    margin:0;

    flex-shrink:0;

}

.post-type-list label{

    min-width:120px;

}

.post-type-list label:first-child{

    min-width:150px;

}


/*====================================================
Editor Workspace
======================================================*/

.editor-workspace{

    padding:0;

    overflow:hidden;

}


/*====================================================
Option Bar
======================================================*/

.editor-option{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:25px;

    padding:20px 24px;

    background:#f8fbff;

    border-bottom:2px solid var(--editor-border);

}


/*====================================================
Left Option
======================================================*/

.option-left{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.option-left label{

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    background:#fff;

    border:1px solid var(--editor-border);

    cursor:pointer;

    font-size:14px;

    transition:.2s;

}

.option-left label:hover{

    border-color:var(--editor-main);

    background:var(--editor-light);

}

.option-left input{

    accent-color:var(--editor-main);

}


/*====================================================
Right Option
======================================================*/

.option-right{

    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

}

.option-right label{

    margin:0;

    font-weight:700;

    color:var(--editor-dark);

}

.option-right input{

    width:240px;

    height:40px;

    padding:0 14px;

    border:2px solid var(--editor-border);

    border-radius:10px;

    background:#fff;

    transition:.25s;

}

.option-right input:focus{

    outline:none;

    border-color:var(--editor-main);

}


/*====================================================
Title Input
======================================================*/

#post-title{

    height:58px;

    font-size:22px;

    font-weight:700;

    letter-spacing:.5px;

}

#post-title::placeholder{

    color:#b9b9b9;

}

/*====================================================

Part 3
ROOMI Toolbar
Editor

======================================================*/


/*====================================================
Toolbar
======================================================*/

.editor-toolbar{

    display:flex;

    align-items:center;

    gap:6px;

    padding:12px 16px;

    background:#ffffff;

    border-bottom:2px solid var(--editor-border);

    overflow-x:auto;

    overflow-y:hidden;

    white-space:nowrap;

    scrollbar-width:thin;

}

.editor-toolbar::-webkit-scrollbar{

    height:6px;

}

.editor-toolbar::-webkit-scrollbar-thumb{

    background:#cfdceb;

    border-radius:999px;

}


/*====================================================
Toolbar Button
======================================================*/

.editor-toolbar button{

    display:flex;

    justify-content:center;

    align-items:center;

    width:38px;

    height:38px;

    border:none;

    border-radius:10px;

    background:transparent;

    color:#4a4a4a;

    cursor:pointer;

    flex-shrink:0;

    font-size:15px;

    transition:.2s;

}

.editor-toolbar button:hover{

    background:var(--editor-light);

    color:var(--editor-dark);

}

.editor-toolbar button.active{

    background:var(--editor-main);

    color:#fff;

}


/*====================================================
Text Button
======================================================*/

.editor-toolbar .text-button{

    width:auto;

    padding:0 14px;

    font-size:14px;

    font-weight:700;

}


/*====================================================
Select
======================================================*/

.editor-toolbar select{

    height:38px;

    padding:0 12px;

    border:2px solid var(--editor-border);

    border-radius:10px;

    background:#fff;

    font-size:14px;

    color:#555;

    cursor:pointer;

    flex-shrink:0;

}

.editor-toolbar select:focus{

    outline:none;

    border-color:var(--editor-main);

}


/*====================================================
Color Picker
======================================================*/

.editor-toolbar input[type="color"]{

    width:38px;

    height:38px;

    padding:2px;

    border:2px solid var(--editor-border);

    border-radius:10px;

    background:#fff;

    cursor:pointer;

    flex-shrink:0;

}


/*====================================================
Separator
======================================================*/

.toolbar-separator{

    width:1px;

    height:26px;

    background:var(--editor-border);

    margin:0 6px;

    flex-shrink:0;

}


/*====================================================
Editor
======================================================*/

.editor{

    min-height:700px;

    padding:32px;

    background:#fff;

    outline:none;

    line-height:1.9;

    font-size:16px;

    color:#444;

}


/*====================================================
Placeholder
======================================================*/

.editor:empty::before{

    content:attr(data-placeholder);

    color:#aaa;

}


/*====================================================
Editor Typography
======================================================*/

.editor h1{

    font-size:34px;

    color:var(--editor-dark);

    margin:28px 0 18px;

}

.editor h2{

    font-size:28px;

    color:var(--editor-dark);

    margin:26px 0 16px;

}

.editor h3{

    font-size:22px;

    color:var(--editor-dark);

    margin:24px 0 14px;

}

.editor p{

    margin:0 0 18px;

}


/*====================================================
Image
======================================================*/

.editor img{

    display:block;

    max-width:100%;

    height:auto;

    margin:30px auto;

    border-radius:14px;

    box-shadow:var(--editor-shadow);

}


/*====================================================
Video
======================================================*/

.editor iframe{

    width:100%;

    aspect-ratio:16/9;

    border:none;

    border-radius:14px;

    margin:30px 0;

}


/*====================================================
Quote
======================================================*/

.editor blockquote{

    margin:25px 0;

    padding:18px 22px;

    background:var(--editor-light);

    border-left:5px solid var(--editor-main);

    border-radius:10px;

    color:#666;

}


/*====================================================
Code
======================================================*/

.editor pre{

    padding:20px;

    overflow:auto;

    margin:25px 0;

    border-radius:12px;

    background:#272822;

    color:#f8f8f2;

}

.editor code{

    font-family:Consolas,monospace;

}


/*====================================================
Table
======================================================*/

.editor table{

    width:100%;

    border-collapse:collapse;

    margin:25px 0;

}

.editor th{

    background:var(--editor-main);

    color:#fff;

}

.editor th,

.editor td{

    padding:12px;

    border:1px solid var(--editor-border);

}


/*====================================================
Divider
======================================================*/

.editor hr{

    border:none;

    border-top:2px dashed var(--editor-border);

    margin:35px 0;

}

/*====================================================

Part 4
Preview

======================================================*/


/*====================================================
Preview Section
======================================================*/

.preview-section{

    padding:0;

    overflow:hidden;

}


/*====================================================
Preview Header
======================================================*/

.preview-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:20px 28px;

    background:var(--editor-light);

    border-bottom:2px solid var(--editor-border);

}

.preview-title h2{

    margin:0;

    font-size:24px;

    color:var(--editor-dark);

}

.preview-title p{

    margin:6px 0 0;

    font-size:14px;

    color:#777;

}


/*====================================================
Preview Tool
======================================================*/

.preview-tools{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.preview-toggle{

    height:38px;

    padding:0 18px;

    border:2px solid var(--editor-border);

    border-radius:999px;

    background:#fff;

    cursor:pointer;

    transition:.25s;

    font-size:14px;

    font-weight:700;

}

.preview-toggle:hover{

    border-color:var(--editor-main);

    background:var(--editor-light);

}

.preview-toggle.active{

    background:var(--editor-main);

    border-color:var(--editor-main);

    color:#fff;

}


/*====================================================
Preview Content
======================================================*/

.preview-content{

    min-height:550px;

    padding:40px;

    background:#fff;

    line-height:1.9;

    color:#444;

    overflow:auto;

}


/*====================================================
Empty
======================================================*/

.preview-content:empty::before{

    content:"開始撰寫文章後，這裡將即時顯示文章預覽。";

    color:#aaa;

}


/*====================================================
Typography
======================================================*/

.preview-content h1{

    margin:0 0 25px;

    font-size:34px;

    color:var(--editor-dark);

}

.preview-content h2{

    margin:28px 0 18px;

    font-size:28px;

    color:var(--editor-dark);

}

.preview-content h3{

    margin:24px 0 15px;

    font-size:22px;

    color:var(--editor-dark);

}

.preview-content p{

    margin:0 0 18px;

}


/*====================================================
Image
======================================================*/

.preview-content img{

    display:block;

    max-width:100%;

    height:auto;

    margin:30px auto;

    border-radius:14px;

    box-shadow:var(--editor-shadow);

}


/*====================================================
Video
======================================================*/

.preview-content iframe{

    width:100%;

    aspect-ratio:16/9;

    margin:30px 0;

    border:none;

    border-radius:14px;

}


/*====================================================
Quote
======================================================*/

.preview-content blockquote{

    margin:25px 0;

    padding:18px 22px;

    background:var(--editor-light);

    border-left:5px solid var(--editor-main);

    border-radius:10px;

    color:#666;

}


/*====================================================
Table
======================================================*/

.preview-content table{

    width:100%;

    border-collapse:collapse;

    margin:25px 0;

}

.preview-content th{

    background:var(--editor-main);

    color:#fff;

}

.preview-content th,

.preview-content td{

    padding:12px;

    border:1px solid var(--editor-border);

}


/*====================================================
Code
======================================================*/

.preview-content pre{

    margin:25px 0;

    padding:20px;

    overflow:auto;

    border-radius:12px;

    background:#272822;

    color:#f8f8f2;

}

.preview-content code{

    font-family:Consolas,Monaco,monospace;

}


/*====================================================
Divider
======================================================*/

.preview-content hr{

    border:none;

    border-top:2px dashed var(--editor-border);

    margin:35px 0;

}


/*====================================================
Preview Hide
======================================================*/

.preview-section.hide{

    display:none;

}


/*====================================================
Fullscreen
======================================================*/

.preview-section.fullscreen{

    position:fixed;

    inset:30px;

    z-index:9999;

    margin:0;

    background:#fff;

    border-radius:20px;

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

}

.preview-section.fullscreen .preview-content{

    height:calc(100vh - 140px);

}
/*====================================================

Part 5
Publish
Status
Action

======================================================*/


/*====================================================
Publish Section
======================================================*/

.publish-section{

    display:flex;

    flex-direction:column;

    gap:25px;

}


/*====================================================
Publish Grid
======================================================*/

.publish-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:20px;

}


/*====================================================
Publish Card
======================================================*/

.publish-card{

    padding:22px;

    border:2px solid var(--editor-border);

    border-radius:16px;

    background:#fff;

    transition:.25s;

}

.publish-card:hover{

    border-color:var(--editor-main);

    transform:translateY(-2px);

}

.publish-card h3{

    margin:0 0 12px;

    color:var(--editor-dark);

    font-size:18px;

}

.publish-card p{

    margin:0 0 18px;

    color:#777;

    line-height:1.7;

    font-size:14px;

}


/*====================================================
Publish Option
======================================================*/

.publish-card label{

    display:flex;

    align-items:center;

    gap:8px;

    margin:10px 0;

    cursor:pointer;

    color:#555;

}

.publish-card input[type="checkbox"],
.publish-card input[type="radio"]{

    accent-color:var(--editor-main);

}


/*====================================================
DateTime
======================================================*/

.publish-card input[type="datetime-local"]{

    width:100%;

    margin-top:15px;

    padding:10px 12px;

    border:2px solid var(--editor-border);

    border-radius:10px;

    box-sizing:border-box;

}

.publish-card input[type="datetime-local"]:focus{

    outline:none;

    border-color:var(--editor-main);

}


/*====================================================
Upload Button
======================================================*/

.publish-card button{

    padding:10px 18px;

    border:none;

    border-radius:10px;

    background:var(--editor-main);

    color:#fff;

    cursor:pointer;

    font-weight:700;

    transition:.25s;

}

.publish-card button:hover{

    background:var(--editor-dark);

}


/*====================================================
Editor Status
======================================================*/

.editor-status{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px 26px;

}

.status-left,

.status-right{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    color:#666;

    font-size:14px;

}


/*====================================================
Action
======================================================*/

.editor-action{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.action-group{

    display:flex;

    gap:15px;

}


/*====================================================
Button
======================================================*/

.btn-primary,

.btn-secondary{

    min-width:150px;

    height:48px;

    padding:0 22px;

    border-radius:12px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.btn-primary{

    border:none;

    background:var(--editor-main);

    color:#fff;

}

.btn-primary:hover{

    background:var(--editor-dark);

}

.btn-secondary{

    border:2px solid var(--editor-border);

    background:#fff;

    color:var(--editor-dark);

}

.btn-secondary:hover{

    border-color:var(--editor-main);

    background:var(--editor-light);

}


/*====================================================
Footer
======================================================*/

.site-footer{

    margin-top:60px;

    padding:35px 20px;

    text-align:center;

    border-top:2px solid var(--editor-border);

}

.footer-inner p{

    margin:6px 0;

    color:#777;

    font-size:14px;

}

/*====================================================

Part 6
Responsive
FINAL

======================================================*/


/*====================================================
Desktop
======================================================*/

@media (max-width:1280px){

.editor-page{

    width:min(96%,1200px);

}

}


/*====================================================
Notebook
======================================================*/

@media (max-width:1100px){

.publish-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

}

.option-right{

    width:100%;

}

.option-right input{

    width:100%;

}

}


/*====================================================
Tablet
======================================================*/

@media (max-width:992px){

.editor-header{

    padding:30px;

}

.editor-header h1{

    font-size:30px;

}

.editor-option{

    flex-direction:column;

    align-items:stretch;

}

.option-right{

    width:100%;

}

.option-right input{

    width:100%;

}

.publish-grid{

    grid-template-columns:1fr;

}

.editor-action{

    flex-direction:column;

    align-items:stretch;

}

.action-group{

    width:100%;

    justify-content:center;

}

}


/*====================================================
Mobile
======================================================*/

@media (max-width:768px){

.editor-page{

    width:95%;

    margin:20px auto 60px;

}

.editor-header{

    padding:24px;

}

.editor-header h1{

    font-size:26px;

}

.editor-header p{

    font-size:15px;

}

.editor-information,

.preview-section,

.publish-section,

.editor-status,

.editor-action{

    padding:20px;

}

.form-group{

    margin-bottom:22px;

}

.post-type-list{

    gap:10px;

}

.post-type-list label{

    font-size:14px;

    padding:8px 14px;

}

.editor-toolbar{

    padding:10px;

    overflow-x:auto;

    flex-wrap:nowrap;

    justify-content:flex-start;

}

.editor-toolbar button,

.editor-toolbar select,

.editor-toolbar input[type="color"]{

    flex-shrink:0;

}

.editor{

    min-height:450px;

    padding:20px;

    font-size:15px;

}

.preview-content{

    min-height:350px;

    padding:22px;

}

.preview-header{

    flex-direction:column;

    align-items:flex-start;

}

.preview-tools{

    width:100%;

}

.preview-toggle{

    flex:1;

    text-align:center;

}

.editor-status{

    flex-direction:column;

    align-items:flex-start;

}

.status-right{

    gap:12px;

}

.action-group{

    flex-direction:column;

    width:100%;

}

.btn-primary,

.btn-secondary{

    width:100%;

}

}


/*====================================================
Small Mobile
======================================================*/

@media (max-width:480px){

.editor-header h1{

    font-size:22px;

}

.breadcrumb{

    font-size:13px;

}

.post-type-list{

    flex-direction:column;

}

.post-type-list label{

    width:100%;

    justify-content:center;

}

.option-left{

    flex-direction:column;

}

.option-left label{

    width:100%;

}

.editor-toolbar{

    gap:4px;

}

.toolbar-separator{

    margin:0 4px;

}

.editor{

    min-height:350px;

    padding:16px;

}

.preview-content{

    padding:18px;

}

.preview-content h1{

    font-size:28px;

}

.preview-content h2{

    font-size:24px;

}

.preview-content h3{

    font-size:20px;

}

.site-footer{

    margin-top:40px;

    padding:24px 16px;

}

}
/*====================================================
Editor Link Style
======================================================*/

#editor a{

    color:#4b8ed8;

    text-decoration:underline;

    cursor:pointer;

}


#editor a:hover{

    opacity:.75;

}