.rme-page {
    max-width: 1220px;
    margin: 24px auto 44px;
    padding: 0 12px;
    height: calc(100vh + 120px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #F5F0E8;
}

.rme-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #1C1A16;
    border: 1px solid #2E2C28;
    border-radius: 12px;
    padding: 10px 12px;
}

.rme-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #F5F0E8;
    letter-spacing: 0.03em;
}

.rme-sub {
    margin-top: 2px;
    color: rgba(245, 240, 232, 0.48);
    font-size: 0.9rem;
}

/* 왼쪽 정보 블록: JSON 경로가 길어도 줄어들어 버튼 영역을 침범하지 않게 */
.rme-head-info {
    min-width: 0;
    flex: 1 1 auto;
}

.rme-head-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* 상단: 자동저장 설정 + 저장 상태(설명) */
.rme-head-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 하단: 버튼들을 한 줄로 (줄바꿈 금지) */
.rme-head-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.rme-save-state {
    font-size: 0.84rem;
    color: rgba(245, 240, 232, 0.52);
}

.rme-autosave-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.rme-autosave-label {
    font-size: 0.84rem;
    color: rgba(245, 240, 232, 0.52);
}

.rme-autosave-select {
    width: auto;
    border: 1px solid rgba(245, 240, 232, 0.25);
    border-radius: 8px;
    padding: 0.22rem 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(245, 240, 232, 0.85);
    background: rgba(245, 240, 232, 0.08);
    cursor: pointer;
}

.rme-autosave-select option {
    color: #3D3830;
    background: #FBF8F2;
}

.rme-grid {
    display: grid;
    grid-template-columns: 650px minmax(280px, 1fr);
    gap: 14px;
    min-height: 0;
    flex: 1 1 auto;
    align-items: stretch;
    overflow: hidden;
}

.rme-panel {
    border: 1px solid #D9D0C1;
    border-radius: 12px;
    background: #FDFAF5;
    padding: 14px;
}

.rme-editor-panel {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rme-left-panel {
    width: 650px;
    max-width: 100%;
}

/* 우측 컬럼: 두 개의 독립 카드(업로드 이미지 / 개요 메모)를 세로로 쌓음.
   그리드 flex 높이 계산에 의존하지 않도록 각 카드는 자기 높이를 가진다. */
.rme-right-col {
    align-self: start; /* 그리드 셀 상단에 자연 높이로 배치 (이미지 카드가 커지지 않도록) */
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rme-assets-panel {
    flex: 0 0 auto; /* 이미지 스트립 높이만큼만 */
    overflow: hidden;
}

.rme-outline-panel {
    flex: 0 0 auto;
    /* 뷰포트 기준 큰 높이 -> 본문 카드 하단 근처까지. (flex 채우기가 이 그리드에선 안 잡혀 고정값 사용) */
    height: calc(100vh - 300px);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rme-outline-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.rme-outline-toolbar-group {
    display: flex;
    gap: 4px;
    align-items: center;
    padding-right: 6px;
    border-right: 1px solid #E4DBCB;
}

.rme-outline-toolbar-group:last-child {
    border-right: none;
    padding-right: 0;
}

.rme-outline-tool {
    padding: 0.22rem 0.5rem;
}

.rme-outline-arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3D3830;
}

.rme-outline-editor {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #D9D0C1;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.rme-outline-editor .ql-container.ql-snow {
    border: none;
    font-size: 0.92rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.rme-outline-editor .ql-editor {
    min-height: 100%;
    padding: 10px 12px;
    color: #3D3830;
    line-height: 1.6;
}

.rme-outline-editor .ql-editor.ql-blank::before {
    color: #B4A996;
    font-style: normal;
    left: 12px;
    right: 12px;
}

/* 제목/소제목/본문: 크기만 다르게, bold 없음 */
.rme-outline-editor .ql-editor h2 {
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0.4em 0 0.25em;
    color: #2E2A24;
}

.rme-outline-editor .ql-editor h3 {
    font-size: 1.08rem;
    font-weight: 400;
    margin: 0.4em 0 0.2em;
    color: #3D3830;
}

.rme-outline-editor .ql-editor p {
    margin: 0.15em 0;
}

/* 가운뎃점 목록: Quill2 구조(ol > li[data-list] > .ql-ui)와 구형(ul>li) 모두 대응.
   마커가 1.1em 폭을 차지해 텍스트를 밀어내므로 겹치지 않음. 한 칸만 들여쓰기. */
.rme-outline-editor .ql-editor ol,
.rme-outline-editor .ql-editor ul {
    padding-left: 1.1em;
}

.rme-outline-editor .ql-editor li[data-list="bullet"] {
    list-style: none;
}

.rme-outline-editor .ql-editor li[data-list="bullet"] > .ql-ui::before,
.rme-outline-editor .ql-editor ul > li::before {
    content: "·";
    display: inline-block;
    width: 1.1em;
    margin-left: -1.1em;
    margin-right: 0;
    text-align: center;
    color: #4A4237;
    font-weight: 900;
    font-size: 1.45em;
    line-height: 1;
    vertical-align: -0.12em;
}

/* 개요 수평선 3종 */
.rme-outline-editor .ql-editor hr.rme-outline-hr {
    border: none;
    margin: 0.6em 0;
    height: 0;
}

.rme-outline-editor .ql-editor hr.rme-outline-hr[data-outline-hr="thin"] {
    border-top: 1px solid #C9BCA6;
}

.rme-outline-editor .ql-editor hr.rme-outline-hr[data-outline-hr="thick"] {
    border-top: 3px solid #8A7F72;
}

.rme-outline-editor .ql-editor hr.rme-outline-hr[data-outline-hr="dashed"] {
    border-top: 1px dashed #A99C86;
}

/* 오른쪽 삼각 화살표 인라인 */
.rme-outline-editor .ql-editor .rme-outline-arrow {
    color: #6B6154;
}

.rme-outline-editor .ql-editor .rme-outline-arrow svg {
    width: 0.82em;
    height: 0.82em;
    vertical-align: -0.1em;
    margin: 0 1px;
}

/* ── 개요 툴바 드롭다운(묶음 버튼) ── */
.rme-outline-dropdown {
    position: relative;
    display: inline-flex;
}

.rme-outline-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rme-outline-caret {
    font-size: 0.6rem;
    line-height: 1;
    color: #8A7F72;
}

.rme-outline-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    display: none;
    flex-direction: column;
    min-width: 118px;
    padding: 4px;
    gap: 2px;
    background: #fff;
    border: 1px solid #D9D0C1;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

.rme-outline-dropdown.is-open .rme-outline-menu {
    display: flex;
}

.rme-outline-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 6px 9px;
    border-radius: 6px;
    color: #3D3830;
    font-family: inherit;
    font-weight: 400;
    cursor: pointer;
}

.rme-outline-menu-item:hover {
    background: #EDE9DE;
}

/* 글자 크기 메뉴: 실제 크기 미리보기 (bold 없음) */
.rme-outline-menu-title {
    font-size: 1.2rem;
}

.rme-outline-menu-subtitle {
    font-size: 1rem;
}

.rme-outline-menu-body {
    font-size: 0.86rem;
}

/* 수평선 메뉴: 선 미리보기 */
.rme-hr-preview {
    display: inline-block;
    width: 34px;
    height: 0;
    flex: 0 0 34px;
}

.rme-hr-preview.is-thin {
    border-top: 1px solid #7a7168;
}

.rme-hr-preview.is-thick {
    border-top: 3px solid #7a7168;
}

.rme-hr-preview.is-dashed {
    border-top: 1px dashed #7a7168;
}

/* 수평선 메뉴: 이름 없이 선 미리보기만 폭을 채움 */
.rme-outline-menu-hr .rme-outline-menu-item {
    padding: 10px 10px;
}

.rme-outline-menu-hr .rme-hr-preview {
    width: 100%;
    flex: 1 1 auto;
}

.rme-block {
    margin-bottom: 14px;
}

.rme-title-block {
    flex: 0 0 auto;
}

.rme-editor-body-block {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.rme-block label {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: #3D3830;
    letter-spacing: 0.02em;
}

.rme-block input {
    width: 100%;
    border: 1px solid #D9D0C1;
    border-radius: 8px;
    padding: 0.55rem 0.62rem;
    font-size: 0.92rem;
    color: #3D3830;
    background: #fff;
}

.rme-block input:focus,
.rme-title-input:focus,
.rme-card-blurb-input:focus,
.rme-reference-note-input:focus,
.rme-asset-caption-input:focus {
    border-color: #8B6F47;
    outline: none;
    box-shadow: 0 0 0 2px rgba(139, 111, 71, 0.12);
}

.rme-title-input {
    width: 100%;
    min-height: 84px;
    border: 1px solid #D9D0C1;
    border-radius: 8px;
    padding: 0.55rem 0.62rem;
    font-size: 0.98rem;
    line-height: 1.45;
    color: #3D3830;
    background: #fff;
    resize: vertical;
}

.rme-title-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.rme-title-align-select,
.rme-category-select {
    width: auto;
    min-width: 100px;
    border: 1px solid #D9D0C1;
    border-radius: 8px;
    padding: 0.28rem 0.42rem;
    font-size: 0.82rem;
    color: #3D3830;
    background: #FBF8F2;
    font-weight: 700;
}

.rme-block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.rme-inline-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.rme-inline-note {
    font-size: 0.78rem;
    color: #8A7F72;
    font-weight: 700;
}

.rme-hidden-input {
    display: none;
}

/* ── 버튼 ── */
.rme-btn {
    border: 1px solid #D9D0C1;
    background: #fff;
    color: #3D3830;
    border-radius: 4px;
    padding: 0.24rem 0.52rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.rme-btn:hover {
    background: #EDE9DE;
    border-color: #c5b9a9;
}

/* 헤더 다크 패널 안 버튼 */
.rme-head .rme-btn {
    border-color: rgba(245, 240, 232, 0.28);
    color: #F5F0E8;
    background: transparent;
}

.rme-head .rme-btn:hover {
    background: rgba(245, 240, 232, 0.08);
    border-color: rgba(245, 240, 232, 0.42);
}

/* Primary (헤더 안) — 골드 어센트 */
.rme-head .rme-btn-primary {
    background: #8B6F47;
    border-color: #8B6F47;
    color: #F5F0E8;
}

.rme-head .rme-btn-primary:hover {
    background: #705537;
    border-color: #705537;
}

/* 최종본 미리보기 — primary(골드)와 구분되는 청록 톤 */
.rme-head .rme-btn-published {
    background: rgba(90, 138, 138, 0.18);
    border-color: #5A8A8A;
    color: #Bfe3e0;
}

.rme-head .rme-btn-published:hover {
    background: rgba(90, 138, 138, 0.32);
    border-color: #6fa3a3;
}

/* 초안/최종본 JSON 파일 경로 표시 */
.rme-json-paths {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 6px;
    font-size: 0.72rem;
    color: rgba(245, 240, 232, 0.45);
}

.rme-json-path {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rme-json-path code {
    color: rgba(245, 240, 232, 0.72);
    background: rgba(245, 240, 232, 0.06);
    padding: 1px 6px;
    border-radius: 5px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    overflow-wrap: anywhere;
}

.rme-json-path-tag {
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    color: #F5F0E8;
}

.rme-json-path-tag-draft {
    background: #8B6F47;
}

.rme-json-path-tag-published {
    background: #5A8A8A;
}

.rme-json-path-note {
    color: rgba(245, 200, 160, 0.7);
}

.rme-btn-danger {
    background: #F7EDE9;
    border-color: #d4aa9a;
    color: #A0503A;
}

.rme-btn-danger:hover {
    background: #f0e0da;
}

.rme-btn-download {
    border-color: #D9D0C1;
    color: #8B6F47;
}

.rme-btn-primary {
    background: #8B6F47;
    border-color: #8B6F47;
    color: #F5F0E8;
}

.rme-btn-primary:hover {
    background: #705537;
    border-color: #705537;
}

/* 배치생성 버튼 */
.rme-btn-batch {
    border-color: #c9a98a;
    background: #f0e4d4;
    color: #6b4a2c;
}

.rme-btn-batch:hover {
    background: #e8d8c4;
}

/* 카키 기능 버튼 */
#rme-open-studio-btn,
#rme-open-article-import-btn,
#rme-open-ref-gen-btn {
    background: #7B8B52;
    border-color: #63723f;
    color: #fff;
}

#rme-open-studio-btn:hover,
#rme-open-article-import-btn:hover,
#rme-open-ref-gen-btn:hover {
    background: #63723f;
    border-color: #4f5c30;
}

/* ── 레이블·보조 텍스트 ── */
.rme-studio-panel label,
.rme-style-panel label,
.rme-studio-foot-group label,
.rme-ref-body label {
    color: #3D3830;
    letter-spacing: 0.02em;
}

/* ── Quill 에디터 ── */
.rme-quill-main .ql-editor {
    min-height: 0;
    max-height: none;
    height: 100%;
    letter-spacing: 0.03em;
    line-height: 1.8;
    overflow-y: auto;
    overflow-x: auto;
    font-size: 0.98rem;
    color: #3D3830;
    background: #fff;
}

.rme-quill-main .ql-editor > * {
    margin: 0;
}

.rme-quill-main .ql-editor > * + * {
    margin-top: 1em;
}

.rme-quill-main .ql-editor img {
    cursor: pointer;
    display: inline-block; /* 하단 여백이 줄 높이에 반영되어 본문을 실제로 밀어내도록 */
    max-width: 100%;
    margin: 10px 0 42px; /* 하단 여백 = 캡션칸 공간 확보 (본문을 밀어냄) */
    height: auto;
    border: 1px solid #C9BCA6;
    border-bottom: none; /* 캡션칸 상단 테두리가 유일한 구분선이 되도록 */
    border-radius: 0;
}

.rme-quill-main .ql-editor hr {
    width: 100%;
    margin: 1.2rem 0;
    border: 0;
    border-top: 1px solid #98a2b3;
}

.rme-quill-main .ql-editor hr + * {
    margin-top: 0;
}

.rme-quill-main .ql-editor hr[data-divider-style="dashed"] {
    height: 10px;
    border-top: 0;
    background-image: radial-gradient(circle, #7f8b9a 2.7px, transparent 3.1px);
    background-size: 18px 10px;
    background-position: left center;
    background-repeat: repeat-x;
}

.rme-quill-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.rme-quill-main .ql-editor img.rme-image-selected {
    outline: 2px solid #8B6F47;
    outline-offset: 1px;
    border-radius: 0;
}

.rme-quill-main .ql-toolbar {
    flex: 0 0 auto;
    border-radius: 8px 8px 0 0;
    border-color: #D9D0C1 !important;
    background: #DDD0BF;
}

.rme-quill-main .ql-toolbar .rme-divider-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.rme-quill-main .ql-toolbar .rme-divider-trigger {
    appearance: none;
    box-sizing: border-box;
    display: inline-flex !important;
    float: none !important;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 28px !important;
    height: 24px !important;
    padding: 3px 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #444;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    margin: 0;
    vertical-align: middle;
}

.rme-quill-main .ql-toolbar .rme-divider-trigger:hover {
    color: #8B6F47;
}

.rme-quill-main .ql-toolbar .rme-divider-caret {
    font-size: 0.55rem;
    line-height: 1;
    transform: translateY(1px);
}

.rme-divider-trigger-preview,
.rme-divider-option-preview {
    display: block;
    width: 16px;
    flex: 0 0 16px;
}

.rme-divider-trigger-preview.is-solid,
.rme-divider-option-preview.is-solid {
    height: 0;
    border-top: 1.6px solid currentColor;
}

.rme-divider-trigger-preview.is-dashed,
.rme-divider-option-preview.is-dashed {
    height: 5px;
    background-image: radial-gradient(circle, currentColor 1.7px, transparent 1.95px);
    background-size: 10px 5px;
    background-position: left center;
    background-repeat: repeat-x;
}

.rme-quill-main .ql-container {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 0 0 8px 8px;
    border-color: #D9D0C1 !important;
    position: relative;
}

/* 본문 오버레이 레이어: 에디터 뷰포트 안에만 그리고 밖으로 새는 것을 잘라냄 */
.rme-img-overlay-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

/* ── 본문 이미지 캡션 입력칸 (이미지 프레임에 이어지는 각진 칸) ── */
.rme-img-caption-box {
    position: absolute;
    z-index: 6;
    pointer-events: auto;
    box-sizing: border-box;
    height: 40px; /* 이미지 margin-bottom(42px)보다 작게 -> 본문과 겹치지 않음 */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #C9BCA6; /* 상단 테두리 = 이미지와의 유일한 구분선 */
    border-radius: 0;
    background: #FBF9F4;
    padding: 0 8px;
}

.rme-img-caption-field {
    display: block;
    width: 100%;
    max-height: 100%;
    border: none;
    outline: none;
    resize: none;
    overflow-y: auto;
    background: transparent;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #4A4237;
    font-family: inherit;
}

.rme-img-caption-field::placeholder {
    color: #B4A996;
}

/* ── 본문 대표 이미지 배지 (항상 표시, 목록 배지보다 크게) ── */
.rme-body-rep-badge {
    position: absolute;
    z-index: 7;
    transform: translateX(-100%);
    display: inline-flex;
    align-items: center;
    background: #2E7D46;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 9px;
    border-radius: 7px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

/* ── 본문 이미지 대표 이미지 버튼 (네이버식 흐릿한 호버 버튼) ── */
.rme-img-rep-btn {
    position: absolute;
    z-index: 7;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border: none;
    border-radius: 6px;
    background: rgba(30, 27, 22, 0.5);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    opacity: 0.72;
    backdrop-filter: blur(1px);
    transition: opacity 0.12s ease, background 0.12s ease;
}

.rme-img-rep-btn:hover {
    opacity: 1;
}

.rme-img-rep-btn.is-rep {
    background: #2E7D46;
    opacity: 0.96;
}

.rme-img-rep-btn.is-rep::before {
    content: "\2713";
    font-weight: 900;
}

/* ── 에셋 패널 ── */
.rme-assets-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
}

.rme-asset-item {
    position: relative;
    flex: 0 0 auto;
    width: 116px;
    border: 1px solid #D9D0C1;
    border-radius: 10px;
    background: #F5F0E8;
    padding: 6px;
}

.rme-asset-rep-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    background: #2E7D46;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 1px 5px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.rme-asset-item img {
    width: 100%;
    max-width: 100%;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #D9D0C1;
}

.rme-asset-uploading {
    background: #EFE7DA;
    border-style: dashed;
}

.rme-asset-uploading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 84px;
    border-radius: 6px;
    border: 1px dashed #C9BCA6;
    background: #F5F0E8;
}

.rme-asset-uploading-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(138, 127, 114, 0.25);
    border-top-color: #8A7F72;
    border-radius: 50%;
    animation: rme-asset-spin 0.75s linear infinite;
}

.rme-asset-uploading-text {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #8A7F72;
}

@keyframes rme-asset-spin {
    to { transform: rotate(360deg); }
}

.rme-asset-meta {
    margin-top: 6px;
    font-size: 0.75rem;
    color: #8A7F72;
    word-break: break-all;
}

.rme-asset-actions {
    display: flex;
    gap: 3px;
    margin-top: 5px;
}

.rme-asset-actions .rme-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.2rem 0.12rem;
    font-size: 0.68rem;
    text-align: center;
}

.rme-asset-representative {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    margin-top: 6px;
    font-size: 0.68rem;
    color: #314251;
}

.rme-asset-representative input[type="radio"] {
    margin: 0;
    width: 12px;
    height: 12px;
}

.rme-asset-caption-wrap {
    margin-top: 6px;
    display: grid;
    gap: 5px;
}

.rme-asset-caption-input {
    width: 100%;
    min-height: 58px;
    border: 1px solid #D9D0C1;
    border-radius: 7px;
    padding: 6px 8px;
    font-size: 0.8rem;
    color: #3D3830;
    background: #fff;
    resize: vertical;
}

.rme-reference-note-input {
    width: 100%;
    min-height: 120px;
    border: 1px solid #D9D0C1;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.9rem;
    color: #3D3830;
    background: #fff;
    resize: vertical;
}

.rme-reference-note-input-short {
    min-height: 84px;
}

.rme-card-blurb-input {
    min-height: 84px;
    background: #fff;
    border-color: #D9D0C1;
    color: #3D3830;
}

.rme-assets-bottom-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #D9D0C1;
}

/* ── 모달 공통 ── */
.rme-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(28, 26, 22, 0.72);
    padding: 16px 10px;
}

/* 미리보기 모달은 상단 고정 네비게이션(.navbar, 높이 52px) 아래에서 시작해 윗부분이 잘리지 않도록 함 */
#rme-preview-modal {
    inset: 52px 0 0 0;
}

.rme-preview-modal.is-open {
    display: flex;
}

.rme-preview-dialog,
.rme-studio-dialog,
.rme-style-dialog,
.rme-studio-batch-dialog,
.rme-studio-settings-dialog,
.rme-ref-gen-dialog,
.rme-ref-link-candidate-dialog,
.rme-ref-direct-summary-dialog,
.rme-ref-prompt-dialog,
.rme-article-import-dialog,
.rme-ref-dialog,
.rme-ref-view-dialog {
    background: #FDFAF5;
    border-color: #D9D0C1;
}

.rme-preview-dialog {
    width: min(600px, calc(100vw - 20px));
    max-height: calc(100vh - 52px - 32px);
    border: 1px solid #D9D0C1;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 52px rgba(7, 20, 33, 0.3);
}

.rme-preview-dialog.is-desktop {
    width: min(1080px, calc(100vw - 20px));
    margin: 0 auto;
}

.rme-preview-size-select {
    padding: 5px 8px;
    border: 1px solid #D9D0C1;
    border-radius: 8px;
    background: #FDFAF5;
    color: #1C1A16;
    font-size: 13px;
    cursor: pointer;
}

.rme-preview-dialog-head,
.rme-preview-dialog-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #D9D0C1;
    background: #EDE9DE;
}

.rme-preview-dialog-foot {
    border-top: 1px solid #D9D0C1;
    border-bottom: 0;
    justify-content: flex-end;
}

/* 미리보기 모달 하단 바: 크기 선택(왼쪽) · 닫기(오른쪽) */
#rme-preview-modal .rme-preview-dialog-foot {
    justify-content: space-between;
}

.rme-preview-dialog-head strong {
    color: #1C1A16;
}

.rme-preview-frame {
    width: 100%;
    height: min(78vh, 840px);
    border: 0;
    background: #fff;
}

.rme-empty {
    border: 1px dashed #D9D0C1;
    border-radius: 10px;
    padding: 12px;
    color: #8A7F72;
    background: #F5F0E8;
}

/* ── 스튜디오 모달 ── */
.rme-studio-body {
    background: #F5F0E8;
}

.rme-studio-panel,
.rme-style-panel {
    background: #FDFAF5;
    border-color: #D9D0C1;
}

.rme-studio-textarea:not(.rme-studio-final-prompt),
.rme-studio-paragraph,
.rme-studio-style-text {
    background: #FBF8F2;
    border-color: #D9D0C1;
    color: #3D3830;
}

/* 스튜디오 푸터 버튼 */
#rme-studio-clear-btn,
#rme-studio-close-btn {
    background: #ffffff;
    border-color: #D9D0C1;
    color: #3D3830;
}

#rme-studio-clear-btn:hover,
#rme-studio-close-btn:hover {
    background: #f5f5f5;
}

#rme-studio-save-btn {
    background: #C8960A;
    border-color: #b07f00;
    color: #fff;
}

#rme-studio-save-btn:hover:not([disabled]) {
    background: #a87d00;
    border-color: #8f6a00;
}

#rme-studio-save-btn[disabled] {
    opacity: 0.45;
    cursor: default;
}

/* 최종 프롬프트 */
.rme-studio-final-prompt {
    min-height: 0;
    height: 7rem;
    max-height: 7rem;
    overflow-y: auto;
    resize: none;
}

/* 이미지 미리보기 영역 */
.rme-studio-preview-wrap {
    background: linear-gradient(135deg, #EDE9DE 0%, #e2d8cc 100%);
    border-color: #D9D0C1;
}

.rme-studio-preview-empty {
    color: #8A7F72;
}

/* 모델 설정 트리거 버튼 */
.rme-studio-settings-trigger {
    background: #FBF8F2;
    border-color: #D9D0C1;
    color: #3D3830;
}

.rme-studio-settings-trigger:hover {
    background: #EDE9DE;
    border-color: #c5b9a9;
}

.rme-studio-settings-trigger-title {
    color: #8A7F72;
}

.rme-studio-settings-summary-box {
    background: #FBF8F2;
    border-color: #D9D0C1;
    color: #3D3830;
}

.rme-studio-batch-count {
    color: #1C1A16;
}

.rme-studio-batch-status {
    color: #8A7F72;
}

/* 배치 모달 */
.rme-studio-batch-body {
    background: #F5F0E8;
}

.rme-studio-batch-empty {
    background: #FDFAF5;
    border-color: #D9D0C1;
    color: #8A7F72;
}

.rme-studio-batch-item {
    background: #FDFAF5;
    border-color: #D9D0C1;
}

.rme-studio-batch-item.is-current {
    border-color: #8B6F47;
    background: #E8DFD0;
    box-shadow: inset 0 0 0 1px rgba(139, 111, 71, 0.10);
}

.rme-studio-batch-item.is-done {
    border-color: #8fc5a1;
    background: #f4fbf6;
}

.rme-studio-batch-item.is-error {
    border-color: #d7a0a0;
    background: #fff6f6;
}

.rme-studio-batch-item-title {
    color: #1C1A16;
}

.rme-studio-batch-item-meta,
.rme-studio-batch-item-preview {
    color: #3D3830;
}

.rme-studio-batch-item-status {
    color: #8A7F72;
}

/* 그림체/레시피 스타일 모달 */
.rme-style-body {
    background: #F5F0E8;
}

.rme-style-item {
    background: #FDFAF5;
    border-color: #D9D0C1;
}

.rme-style-item.is-selected {
    border-color: #8B6F47;
    background: #E8DFD0;
    box-shadow: inset 0 0 0 1px rgba(139, 111, 71, 0.10);
}

.rme-style-item-title {
    color: #1C1A16;
}

.rme-style-item-meta,
.rme-style-item-preview {
    color: #8A7F72;
}

.rme-style-status {
    background: #EDE9DE;
    border-color: #D9D0C1;
    color: #3D3830;
}

.rme-style-help {
    color: #8A7F72;
}

/* 이미지 설정 모달 */
.rme-studio-settings-body {
    background: #F5F0E8;
}

.rme-studio-settings-tab {
    background: #FDFAF5;
    border-color: #D9D0C1;
    color: #3D3830;
}

.rme-studio-settings-tab.is-active {
    border-color: #8B6F47;
    background: #E8DFD0;
    box-shadow: none;
}

.rme-studio-settings-tab-meta {
    color: #8A7F72;
}

.rme-settings-panel-head strong {
    color: #1C1A16;
}

.rme-settings-panel-head p,
.rme-settings-help {
    color: #8A7F72;
}

.rme-settings-fieldset {
    background: #FDFAF5;
    border-color: #D9D0C1;
}

.rme-settings-fieldset legend {
    color: #3D3830;
}

.rme-settings-option {
    background: #FDFAF5;
    border-color: #D9D0C1;
    color: #3D3830;
}

.rme-settings-select,
.rme-settings-range {
    background: #FBF8F2;
    border-color: #D9D0C1;
    color: #3D3830;
}

.rme-settings-range::-webkit-slider-runnable-track {
    border-color: #D9D0C1;
    background: #FBF8F2;
}

.rme-settings-range::-webkit-slider-thumb {
    border-color: #B8AA97;
    background: #3D3830;
}

.rme-settings-range::-moz-range-track {
    border-color: #D9D0C1;
    background: #FBF8F2;
}

.rme-settings-range::-moz-range-thumb {
    border-color: #B8AA97;
    background: #3D3830;
}

.rme-settings-range-value {
    color: #8A7F72;
}

/* Select 공통 */
.rme-studio-select,
.rme-style-input,
.rme-ref-gen-model-select,
.rme-ref-prompt-key-select,
.rme-ref-select {
    background: #FBF8F2;
    border-color: #D9D0C1;
    color: #3D3830;
}

/* Ref 단순 다이얼로그 */
.rme-ref-body {
    background: #F5F0E8;
}

.rme-ref-help {
    background: #FDFAF5;
    border-color: #D9D0C1;
    color: #8A7F72;
}

.rme-ref-file {
    color: #8A7F72;
}

.rme-ref-log-box {
    background: #F5F0E8;
    border-color: #D9D0C1;
    color: #3D3830;
}

.rme-ref-status {
    color: #8A7F72;
}

.rme-ref-progress {
    background: #EDE9DE;
    border-color: #D9D0C1;
}

.rme-ref-progress-bar {
    background: linear-gradient(90deg, #8B6F47 0%, #c8a878 100%);
}

.rme-ref-view-method {
    background: #E8DFD0;
    border-color: #d4bf9e;
    color: #8B6F47;
}

.rme-ref-view-label {
    color: #3D3830;
}

.rme-ref-view-box {
    background: #F5F0E8;
    border-color: #D9D0C1;
    color: #3D3830;
}

.rme-ref-progress-row {
    color: #3D3830;
}

/* Ref 프롬프트 모달 */
.rme-ref-prompt-body {
    background: #F5F0E8;
}

.rme-ref-prompt-tab {
    background: #FDFAF5;
    border-color: #D9D0C1;
    color: #3D3830;
}

.rme-ref-prompt-tab.is-active {
    border-color: #8B6F47;
    background: #E8DFD0;
}

.rme-ref-prompt-status {
    color: #8A7F72;
}

@media (max-width: 1024px) {
    .rme-page {
        height: auto;
        overflow: visible;
    }
    .rme-grid {
        grid-template-columns: 1fr;
        overflow: visible;
    }
    .rme-left-panel {
        width: 100%;
    }
    .rme-editor-panel,
    .rme-assets-panel {
        height: auto;
        max-height: none;
    }
    .rme-editor-panel {
        overflow: visible;
    }
    .rme-editor-body-block,
    .rme-quill-main,
    .rme-quill-main .ql-container {
        min-height: auto;
    }
    .rme-quill-main .ql-editor {
        min-height: 360px;
    }
    .rme-head {
        position: static;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .rme-head-actions {
        width: 100%;
        align-items: flex-start;
    }
    /* 좁은 화면에서는 버튼이 화면 밖으로 넘치지 않도록 줄바꿈 허용 */
    .rme-head-buttons {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .rme-preview-frame {
        height: 72vh;
    }
}