/* AI 도구 페이지 공통 모양 (사진 키우기, 말→글, 그림→글) */
* { box-sizing: border-box; }
body { margin: 0; color: #23264a; }
[hidden] { display: none !important; }

.ai-main { display: flex; justify-content: center; padding: 0 14px; }
.ai-panel { width: min(100%, 1240px); background: rgba(255, 255, 255, 0.93); border-radius: 28px; padding: clamp(16px, 2.6vw, 30px); }
.ai-title { margin: 0; text-align: center; font-size: clamp(1.6rem, 4vw, 2.3rem); }
.ai-sub { margin: 6px auto 18px; text-align: center; color: #5a6080; max-width: 720px; }

/* 끌어다 놓는 상자 */
.ai-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 250px; padding: 28px; text-align: center; cursor: pointer;
    border: 2.5px dashed #b9c4e6; border-radius: 24px;
    background: radial-gradient(120% 90% at 50% 0%, #f4f0ff 0%, #eef3ff 45%, #e8eefc 100%);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.ai-drop:hover, .ai-drop.over { border-color: #7a5cff; transform: scale(1.01); }
.ai-drop-icon { width: 92px; height: 92px; filter: drop-shadow(0 10px 14px rgba(90, 70, 200, 0.25)); }
.ai-drop b { font-size: 1.2rem; }
.ai-drop small { color: #6a7090; }
.ai-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.ai-badges span { font-size: 0.8rem; font-weight: 600; color: #4b3fb0; background: #fff; border-radius: 999px; padding: 4px 10px; box-shadow: inset 0 0 0 1.5px #ddd6ff; }

/* 편집 화면 */
.ai-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ai-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ai-spacer { flex: 1; }
.ai-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-seg button {
    flex: 1 1 auto; border: 0; border-radius: 12px; padding: 8px 12px; cursor: pointer;
    font: 600 0.9rem 'Fredoka', 'Nunito', sans-serif; color: #2a3366; background: #fff;
    box-shadow: inset 0 0 0 1.5px #dde3f3;
}
.ai-seg button.on { background: linear-gradient(180deg, #9a86ff, #6247f0); color: #fff; box-shadow: 0 6px 14px -8px rgba(98, 71, 240, 0.9); }
.ai-seg button:disabled { opacity: 0.45; cursor: not-allowed; }

.ai-busy {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88%, 380px); z-index: 5;
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 20px; text-align: center;
    background: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 20px 50px -20px rgba(30, 30, 90, 0.5);
    font-weight: 700; color: #3d2fc0;
}
.ai-busy.inline { position: static; transform: none; width: 100%; box-shadow: inset 0 0 0 1.5px #e7e3ff; margin: 12px 0; }
.ai-busy small { font-weight: 500; color: #6a7090; }
.ai-bar { width: 100%; height: 10px; border-radius: 999px; background: #ece9ff; overflow: hidden; }
.ai-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #8b74ff, #4b6cf2); transition: width 0.2s ease; }
.ai-bar.indet i { width: 35%; animation: ai-indet 1.1s ease-in-out infinite; }
@keyframes ai-indet { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.ai-spin { width: 30px; height: 30px; border-radius: 50%; border: 4px solid #e4dcff; border-top-color: #6d4dff; animation: ai-spin 0.8s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-link { border: 0; background: none; color: #6a7090; text-decoration: underline; font: 600 0.85rem 'Fredoka', 'Nunito', sans-serif; cursor: pointer; }

/* 오른쪽 설정 */
.ai-side { display: flex; flex-direction: column; gap: 12px; }
.ai-group { background: #f6f7fd; border-radius: 18px; padding: 12px 14px; }
.ai-group h3 { margin: 0 0 8px; font-size: 0.95rem; }
.ai-note { margin: 6px 0 0; font-size: 0.78rem; color: #6a7090; }
.ai-tips { margin: 0; padding-left: 18px; font-size: 0.84rem; color: #4a5070; }
.ai-tips li { margin: 4px 0; }
.ai-field { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.86rem; }
.ai-field select { width: 100%; padding: 7px 10px; border-radius: 12px; border: 0; box-shadow: inset 0 0 0 1.5px #dde3f3; background: #fff; font: 600 0.88rem 'Fredoka', 'Nunito', sans-serif; color: #2a3366; }
.ai-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.86rem; }
.ai-check input { width: 18px; height: 18px; accent-color: #6247f0; }

.ai-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ai-btn {
    border: 0; border-radius: 14px; padding: 12px 18px; cursor: pointer; color: #fff; width: 100%;
    font: 600 1rem 'Fredoka', 'Nunito', sans-serif;
    background: linear-gradient(180deg, var(--b1), var(--b2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 20px -10px var(--bs);
    transition: transform 0.15s ease;
}
.ai-btn:hover { transform: translateY(-2px); }
.ai-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.ai-btn.green { --b1: #4fd99a; --b2: #16a865; --bs: rgba(22, 168, 101, 0.8); }
.ai-btn.blue { --b1: #6aa3ff; --b2: #3d6cf2; --bs: rgba(61, 108, 242, 0.8); }
.ai-btn.gray { --b1: #a3abc4; --b2: #6b7494; --bs: rgba(107, 116, 148, 0.8); }
.ai-btn.purple { --b1: #a48cff; --b2: #6247f0; --bs: rgba(98, 71, 240, 0.8); }
.ai-btn.red { --b1: #ff8095; --b2: #e23d5c; --bs: rgba(226, 61, 92, 0.8); }
.ai-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ai-msg { min-height: 1.3em; font-size: 0.85rem; text-align: center; font-weight: 600; color: #3d2fc0; }
.ai-credit { margin: 0; font-size: 0.74rem; color: #7a809a; text-align: center; }
.ai-credit a { color: inherit; }
.ai-privacy { margin-top: 14px; text-align: center; font-size: 0.85rem; color: #6a7090; }

@media (max-width: 960px) {
    .ai-editor { grid-template-columns: 1fr; }
    .ai-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}