/*
 * 글쓰기 화면의 AI 시안 창(사이트관리자 전용). central-writing-assist.js 가 그린다.
 * 색·선은 central-quasar.css 의 .qz-site 변수를 그대로 쓴다.
 */

/* 툴바 단추는 display 를 직접 주므로 hidden 속성만으로는 숨지 않는다. */
.qz-site .qz-editor-toolbar button[hidden] {
    display: none;
}

.qz-site .qz-editor-toolbar button.qz-ai-button {
    color: var(--qz-gold);
    font-weight: 700;
}

.qz-site .qz-editor-toolbar button.qz-ai-button:hover {
    background: rgba(255, 214, 80, .12);
    color: #ffe38a;
}

.qz-site .qz-editor-toolbar button.qz-ai-button.is-busy::after,
.qz-site .qz-editor-toolbar button.qz-ai-button.has-result::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-radius: 50%;
    background: var(--qz-accent);
}

.qz-site .qz-editor-toolbar button.qz-ai-button.is-busy::after {
    animation: qz-ai-pulse 1s ease-in-out infinite;
}

.qz-site .qz-editor-toolbar button.qz-ai-button.has-result::after {
    background: var(--qz-green);
}

@keyframes qz-ai-pulse {
    50% { opacity: .25; }
}

html.qz-ai-open {
    overflow: hidden;
}

.qz-site .qz-ai-backdrop {
    position: fixed;
    inset: 0;
    z-index: 96;
    display: flex;
    justify-content: flex-end;
    background: rgba(10, 10, 10, .6);
}

.qz-site .qz-ai-backdrop[hidden] {
    display: none;
}

.qz-site .qz-ai-panel {
    width: min(480px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--qz-line);
    background: var(--qz-bg-deep);
    box-shadow: -18px 0 44px rgba(0, 0, 0, .55);
    color: var(--qz-text);
}

.qz-site .qz-ai-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--qz-line-soft);
    background: var(--qz-bg);
}

.qz-site .qz-ai-heading b {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: #fff;
}

.qz-site .qz-ai-heading b i {
    color: var(--qz-gold);
}

.qz-site .qz-ai-heading small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--qz-muted);
}

.qz-site .qz-ai-close {
    margin-left: auto;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--qz-line);
    border-radius: 8px;
    color: var(--qz-muted);
    font-size: 17px;
}

.qz-site .qz-ai-close:hover {
    border-color: #ff5a5a;
    color: #ff8a8a;
}

.qz-site .qz-ai-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 18px 28px;
}

.qz-site .qz-ai-form {
    display: grid;
    gap: 16px;
}

.qz-site .qz-ai-field {
    position: relative;
    display: grid;
    gap: 8px;
}

.qz-site .qz-ai-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--qz-dim);
}

.qz-site .qz-ai-label em {
    margin-left: 4px;
    font-style: normal;
    font-weight: 400;
    color: var(--qz-muted);
}

.qz-site .qz-ai-models,
.qz-site .qz-ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.qz-site .qz-ai-model,
.qz-site .qz-ai-chip {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--qz-line);
    border-radius: 999px;
    background: var(--qz-bg);
    color: var(--qz-dim);
    font-size: 12.5px;
}

.qz-site .qz-ai-model:hover:not(:disabled),
.qz-site .qz-ai-chip:hover {
    border-color: #666;
    color: #fff;
}

.qz-site .qz-ai-model.is-on,
.qz-site .qz-ai-chip[aria-pressed="true"] {
    border-color: var(--qz-accent);
    background: rgba(255, 146, 0, .14);
    color: #ffb24d;
}

.qz-site .qz-ai-model:disabled {
    opacity: .45;
    cursor: not-allowed;
    text-decoration: line-through;
}

.qz-site .qz-ai-hint {
    display: grid;
    gap: 2px;
    margin: 0;
    font-size: 11.5px;
    line-height: 17px;
    color: var(--qz-muted);
}

.qz-site .qz-ai-hint[hidden] {
    display: none;
}

.qz-site .qz-ai-seg {
    display: inline-flex;
    width: max-content;
    border: 1px solid var(--qz-line);
    border-radius: 8px;
    overflow: hidden;
}

.qz-site .qz-ai-seg-item {
    height: 32px;
    padding: 0 14px;
    background: var(--qz-bg);
    color: var(--qz-dim);
    font-size: 12.5px;
}

.qz-site .qz-ai-seg-item + .qz-ai-seg-item {
    border-left: 1px solid var(--qz-line);
}

.qz-site .qz-ai-seg-item.is-on {
    background: var(--qz-accent);
    color: #272727;
    font-weight: 700;
}

.qz-site .qz-ai-memo {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--qz-line);
    border-radius: 8px;
    background: var(--qz-bg);
    color: var(--qz-text);
    font: inherit;
    font-size: 13px;
    line-height: 20px;
    resize: vertical;
    outline: none;
}

.qz-site .qz-ai-memo:focus {
    border-color: var(--qz-accent);
}

.qz-site .qz-ai-count {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 11px;
    color: var(--qz-muted);
}

.qz-site .qz-ai-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--qz-dim);
    cursor: pointer;
}

.qz-site .qz-ai-check input {
    accent-color: var(--qz-accent);
}

.qz-site .qz-ai-style {
    border: 1px solid var(--qz-line);
    border-radius: 8px;
    background: var(--qz-bg);
}

.qz-site .qz-ai-style[hidden] {
    display: none;
}

.qz-site .qz-ai-style-summary {
    padding: 10px 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--qz-dim);
    cursor: pointer;
}

.qz-site .qz-ai-style-state {
    margin-left: 6px;
    font-style: normal;
    font-weight: 400;
    color: var(--qz-muted);
}

.qz-site .qz-ai-style-state.is-dirty {
    color: #ffb24d;
}

.qz-site .qz-ai-style[open] {
    display: grid;
    gap: 8px;
    padding-bottom: 12px;
}

.qz-site .qz-ai-style[open] > :not(summary) {
    margin: 0 12px;
}

/* 그리드 안의 textarea 는 늘어나지 않는다(글자 수만큼 좁게 그려진다). 폭을 직접 준다. */
.qz-site .qz-ai-style .qz-ai-style-text {
    width: calc(100% - 24px);
    box-sizing: border-box;
}

.qz-site .qz-ai-style-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.qz-site .qz-ai-spacer {
    flex: 1 1 auto;
}

.qz-site .qz-ai-style-button {
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--qz-line);
    border-radius: 6px;
    color: var(--qz-text);
    font-size: 12px;
}

.qz-site .qz-ai-style-button:hover:not(:disabled) {
    border-color: var(--qz-gold);
}

.qz-site .qz-ai-style-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.qz-site .qz-ai-style-button.is-primary {
    border-color: var(--qz-accent);
    background: rgba(255, 146, 0, .14);
    color: #ffb24d;
    font-weight: 700;
}

.qz-site .qz-ai-style-button.is-quiet {
    color: var(--qz-muted);
}

.qz-site .qz-ai-notice {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(133, 193, 255, .25);
    border-radius: 8px;
    background: rgba(133, 193, 255, .06);
    font-size: 11.5px;
    line-height: 18px;
    color: var(--qz-dim);
}

.qz-site .qz-ai-notice i {
    color: var(--qz-blue);
}

.qz-site .qz-ai-run,
.qz-site .qz-ai-apply {
    height: 42px;
    border-radius: 8px;
    background: var(--qz-accent);
    color: #272727;
    font-size: 14px;
    font-weight: 700;
}

.qz-site .qz-ai-run:hover:not(:disabled),
.qz-site .qz-ai-apply:hover {
    background: #ffa733;
}

.qz-site .qz-ai-run:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.qz-site .qz-ai-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--qz-line);
    border-radius: 10px;
    background: var(--qz-bg);
    font-size: 13px;
}

.qz-site .qz-ai-progress[hidden] {
    display: none;
}

.qz-site .qz-ai-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 2px solid var(--qz-line);
    border-top-color: var(--qz-accent);
    border-radius: 50%;
    animation: qz-ai-spin .8s linear infinite;
}

@keyframes qz-ai-spin {
    to { transform: rotate(360deg); }
}

.qz-site .qz-ai-progress-text {
    flex: 1 1 auto;
    color: var(--qz-text);
}

.qz-site .qz-ai-cancel {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--qz-line);
    border-radius: 6px;
    color: var(--qz-dim);
    font-size: 12px;
}

.qz-site .qz-ai-cancel:hover {
    border-color: #ff5a5a;
    color: #ff8a8a;
}

.qz-site .qz-ai-error {
    margin: 14px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 90, 90, .45);
    border-radius: 8px;
    background: rgba(255, 90, 90, .08);
    font-size: 12.5px;
    line-height: 19px;
    color: #ffb0b0;
}

.qz-site .qz-ai-error[hidden],
.qz-site .qz-ai-results[hidden] {
    display: none;
}

.qz-site .qz-ai-results {
    display: grid;
    gap: 14px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--qz-line-soft);
}

.qz-site .qz-ai-results-head {
    font-size: 12px;
    color: var(--qz-muted);
}

.qz-site .qz-ai-soft {
    margin: 0;
    font-size: 11.5px;
    line-height: 18px;
    color: var(--qz-muted);
}

.qz-site .qz-ai-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--qz-line);
    border-radius: 10px;
    background: var(--qz-bg);
}

.qz-site .qz-ai-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.qz-site .qz-ai-tag {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 214, 80, .14);
    color: var(--qz-gold);
    font-size: 11.5px;
    font-weight: 700;
}

.qz-site .qz-ai-note {
    min-width: 0;
    font-size: 12px;
    color: var(--qz-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qz-site .qz-ai-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    color: #fff;
    overflow-wrap: anywhere;
}

.qz-site .qz-ai-preview {
    border: 1px solid var(--qz-line-soft);
    border-radius: 8px;
    background: var(--qz-bg-deep);
    overflow: hidden;
}

.qz-site .qz-ai-preview .ql-container.ql-snow {
    border: 0;
    font-family: inherit;
}

.qz-site .qz-ai-preview .ql-editor {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px 14px;
    color: var(--qz-text);
    font-size: 13.5px;
    line-height: 22px;
    cursor: default;
}

.qz-site .qz-ai-preview .ql-editor h2,
.qz-site .qz-ai-preview .ql-editor h3,
.qz-site .qz-ai-preview .ql-editor h4 {
    margin: 12px 0 4px;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
}

.qz-site .qz-ai-preview .ql-editor p,
.qz-site .qz-ai-preview .ql-editor li {
    font-size: 13.5px;
    line-height: 22px;
}

.qz-site .qz-ai-preview .ql-editor ol,
.qz-site .qz-ai-preview .ql-editor ul {
    padding-left: 18px;
}

.qz-site .qz-ai-preview .ql-editor blockquote {
    margin: 4px 0 8px;
    padding: 6px 10px;
    border-left: 3px solid var(--qz-accent);
    background: rgba(255, 146, 0, .07);
    color: var(--qz-dim);
}

.qz-site .qz-ai-preview .ql-editor a {
    color: var(--qz-blue);
}

.qz-site .qz-ai-preview .ql-editor img {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.qz-site .qz-ai-warnings {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 146, 0, .08);
    list-style: none;
    font-size: 11.5px;
    line-height: 17px;
    color: #ffc27a;
}

.qz-site .qz-ai-card-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.qz-site .qz-ai-chars {
    font-size: 11.5px;
    color: var(--qz-muted);
}

.qz-site .qz-ai-apply {
    margin-left: auto;
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
}

.qz-site .qz-ai-again {
    height: 36px;
    border: 1px dashed var(--qz-line);
    border-radius: 8px;
    color: var(--qz-dim);
    font-size: 12.5px;
}

.qz-site .qz-ai-again:hover {
    border-color: var(--qz-accent);
    color: #fff;
}

.qz-site .qz-ai-undo-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 214, 80, .35);
    border-radius: 8px;
    background: rgba(255, 214, 80, .08);
    font-size: 12.5px;
    color: var(--qz-text);
}

.qz-site .qz-ai-undo-strip > i {
    color: var(--qz-gold);
}

.qz-site .qz-ai-undo-button {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--qz-line);
    border-radius: 6px;
    color: var(--qz-text);
    font-size: 12px;
}

.qz-site .qz-ai-undo-button:first-of-type {
    margin-left: auto;
}

.qz-site .qz-ai-undo-button:hover {
    border-color: var(--qz-gold);
}

.qz-site .qz-ai-undo-dismiss {
    width: 28px;
    height: 28px;
    color: var(--qz-muted);
}

/* 이미지 만들기(ChatGPT 전용). 모델을 ChatGPT 로 고를 때만 보인다. */
.qz-site .qz-ai-images {
    padding: 10px 12px;
    border: 1px solid var(--qz-line);
    border-radius: 8px;
    background: var(--qz-bg);
}

.qz-site .qz-ai-images[hidden],
.qz-site .qz-ai-images-options[hidden],
.qz-site .qz-ai-slots[hidden] {
    display: none;
}

.qz-site .qz-ai-images-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.qz-site .qz-ai-images-tag {
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(133, 193, 255, .12);
    color: var(--qz-blue);
    font-size: 11px;
    font-weight: 700;
}

.qz-site .qz-ai-images-options {
    position: relative;
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.qz-site .qz-ai-images-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--qz-dim);
}

.qz-site .qz-ai-images-options .qz-ai-count {
    position: static;
    margin-left: auto;
}

.qz-site .qz-ai-slots {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(133, 193, 255, .07);
    list-style: none;
    font-size: 11.5px;
    line-height: 17px;
    color: var(--qz-dim);
}

.qz-site .qz-ai-slots li {
    overflow-wrap: anywhere;
}

.qz-site .qz-ai-slots i {
    color: var(--qz-blue);
}

.qz-site .qz-ai-slots small {
    display: block;
    padding-left: 18px;
    color: var(--qz-muted);
}

.qz-site .qz-ai-apply.is-secondary {
    border: 1px solid var(--qz-line);
    background: transparent;
    color: var(--qz-text);
    font-weight: 600;
}

/* [글만 넣기][이미지 만들어 넣기] 둘을 한 묶음으로 오른쪽에(좁으면 묶음째 다음 줄로). */
.qz-site .qz-ai-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.qz-site .qz-ai-card-actions .qz-ai-apply {
    margin-left: 0;
}

.qz-site .qz-ai-apply.is-secondary:hover {
    border-color: var(--qz-accent);
    background: transparent;
    color: #fff;
}

.qz-site .qz-ai-apply:disabled {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .qz-site .qz-ai-panel {
        width: 100%;
        border-left: 0;
    }

    .qz-site .qz-ai-head,
    .qz-site .qz-ai-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .qz-site .qz-ai-apply,
    .qz-site .qz-ai-card-actions {
        width: 100%;
        margin-left: 0;
    }
}