/* ---------- 기본 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #eef1f6; --panel: #ffffff; --line: #e2e7f0; --ink: #16203a; --sub: #6a768e;
  --accent: #2f63ff; --accent-soft: #eaf0ff; --radius: 16px; --shadow: 0 10px 30px rgba(20,32,58,.08);
}
html, body { height: 100%; }
body {
  font-family: "Noto Sans KR", system-ui, sans-serif;
  background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
h2 { font-size: 17px; } h3 { font-size: 15px; }

/* ---------- 상단바 ---------- */
.topbar {
  height: 58px; display: flex; align-items: center; gap: 16px; padding: 0 22px;
  background: #0d1730; color: #fff; position: sticky; top: 0; z-index: 40;
}
.brand-logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; }
.brand-logo b { color: #7ea2ff; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, #2f63ff, #6f8bff); font-weight: 900; color: #fff;
}
.topbar-status { margin-left: auto; font-size: 12px; color: #9fb0d4; display: flex; align-items: center; gap: 7px; }
.topbar-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 0 3px rgba(53,208,127,.2); }
.ghost-btn { padding: 7px 13px; border-radius: 9px; font-size: 13px; color: #cdd7ee; border: 1px solid #26334f; }
.ghost-btn:hover { background: #182545; }

/* ---------- 레이아웃 ---------- */
.layout { display: grid; grid-template-columns: 380px 1fr; gap: 18px; padding: 18px; align-items: start; max-width: 1500px; margin: 0 auto; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.panel + .panel { margin-top: 16px; }
.input-col { position: sticky; top: 76px; }

.panel-head { display: flex; gap: 12px; margin-bottom: 14px; }
.panel-head.compact { margin-bottom: 10px; }
.panel-head h2 { line-height: 1.2; }
.panel-head p { font-size: 12px; color: var(--sub); margin-top: 3px; }
.step { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 12px; display: grid; place-items: center; }

/* 분야 칩 */
.field-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.field-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px;
  border: 1.5px solid var(--line); border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--sub);
  transition: .15s;
}
.field-chip span { font-size: 18px; }
.field-chip:hover { border-color: #c6d2ea; }
.field-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.source-tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.source-tabs button { flex: 1; padding: 8px; font-size: 12px; border-radius: 9px; border: 1px solid var(--line); color: var(--sub); }
.source-tabs button.active { background: #0d1730; color: #fff; border-color: #0d1730; }

textarea#source { width: 100%; height: 180px; resize: vertical; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 13px; line-height: 1.6; color: var(--ink); }
textarea#source:focus { outline: none; border-color: var(--accent); }
.source-meta { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 14px; font-size: 12px; color: var(--sub); }
.link-btn { color: var(--accent); font-weight: 600; font-size: 12px; }

.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.controls label, .brand-box label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--sub); }
.controls select, .brand-box input {
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--ink); background: #fff;
}
.brand-box { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.brand-box summary { font-size: 13px; font-weight: 700; cursor: pointer; color: var(--ink); }
.brand-box[open] summary { margin-bottom: 10px; }
.brand-box label { margin-bottom: 9px; }
.color-row { display: flex; gap: 10px; }
.color-row label { flex: 1; }
.color-row input[type=color] { height: 34px; padding: 2px; }

.toggle-row { display: flex; align-items: center; gap: 8px; margin: 14px 0; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.toggle-row input { width: 16px; height: 16px; accent-color: var(--accent); }

.generate-btn { width: 100%; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, #2f63ff, #5b7dff); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 8px 20px rgba(47,99,255,.3); transition: .15s; }
.generate-btn:hover { transform: translateY(-1px); }
.generate-btn:active { transform: none; }

/* 분석 패널 */
.analysis-list { display: flex; flex-direction: column; gap: 10px; }
.analysis-list > div { }
.analysis-list dt { font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.analysis-list dd { font-size: 13px; line-height: 1.5; color: var(--ink); }

/* ---------- 우측 미리보기 ---------- */
.preview-col { min-width: 0; }
.preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.pt-left { display: flex; gap: 12px; align-items: center; }
.pt-left h2 { line-height: 1.2; } .pt-left p { font-size: 12px; color: var(--sub); margin-top: 2px; }
.pt-actions { display: flex; gap: 8px; align-items: center; }
.tool-btn { padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.tool-btn:hover { border-color: #c6d2ea; background: #f7f9fd; }
.qa-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #f0a020; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.qa-badge.high { background: #e5484d; }
.primary-btn { padding: 9px 15px; border-radius: 10px; background: #0d1730; color: #fff; font-weight: 700; font-size: 13px; }
.export-wrap { position: relative; }
.export-menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(20,32,58,.18); padding: 6px; width: 220px; z-index: 30; }
.export-menu button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 9px 11px; border-radius: 8px; text-align: left; }
.export-menu button:hover { background: var(--accent-soft); }
.export-menu b { font-size: 13px; } .export-menu small { font-size: 11px; color: var(--sub); }

/* 스테이지 */
.stage-area { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; min-height: 300px; display: flex; align-items: center; justify-content: center; }
.empty-state { text-align: center; color: var(--sub); padding: 40px 20px; }
.empty-orb { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 20px; background: linear-gradient(135deg, var(--accent-soft), #fff); border: 1px solid var(--line); display: grid; place-items: center; font-size: 26px; color: var(--accent); }
.empty-state h3 { color: var(--ink); margin-bottom: 8px; }
.empty-state p { font-size: 13px; line-height: 1.7; }

.stage-wrap { display: flex; align-items: center; gap: 14px; width: 100%; justify-content: center; }
.stage { width: min(100%, 620px); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(20,32,58,.16); background: #fff; }
.ori-port ~ .stage, .stage:has(.ori-port) { }
.nav-arrow { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--line); font-size: 22px; color: var(--ink); box-shadow: var(--shadow); }
.nav-arrow:disabled { opacity: .35; cursor: default; }

/* 세로형은 스테이지 폭 축소 */
.stage:has(.ori-port) { width: min(100%, 360px); }
.stage:has(.ori-square) { width: min(100%, 500px); }

/* 스트립 */
.strip-wrap { margin-top: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.strip-tools { display: flex; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.strip-tools button { padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--sub); }
.strip-tools button:hover { border-color: var(--accent); color: var(--accent); }
.strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.thumb { position: relative; flex: none; width: 116px; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 3px 10px rgba(20,32,58,.1); }
.thumb.active { border-color: var(--accent); }
.thumb .slide { border-radius: 0; }
.thumb-tag { position: absolute; left: 5px; bottom: 5px; background: rgba(13,23,48,.82); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 6px; z-index: 5; }
.thumb-warn { position: absolute; right: 5px; top: 5px; min-width: 16px; height: 16px; padding: 0 4px; background: #e5484d; color: #fff; font-size: 10px; font-weight: 800; border-radius: 8px; display: grid; place-items: center; z-index: 5; }

/* =========================================================
   슬라이드 렌더 — container query units(cqw)로 크기 자동 스케일
   ========================================================= */
.slide {
  position: relative; width: 100%; height: 100%; container-type: size; overflow: hidden;
  background: var(--c-bg); color: var(--c-ink); font-family: "Noto Sans KR", sans-serif;
}
.slide.is-full { background: var(--c-primary); color: #fff; }

/* 브랜드/푸터 */
.s-brand { position: absolute; top: 4.5cqw; left: 6cqw; z-index: 6; display: flex; align-items: center; gap: 1.6cqw; font-size: 2.6cqw; font-weight: 700; color: var(--c-primary); }
.slide.is-full .s-brand { color: #fff; }
.s-mark { width: 4.6cqw; height: 4.6cqw; border-radius: 1.4cqw; background: var(--c-accent); color: #fff; font-size: 2.6cqw; font-weight: 900; display: grid; place-items: center; }
.s-footer { position: absolute; bottom: 4cqw; left: 6cqw; right: 6cqw; z-index: 6; display: flex; justify-content: space-between; font-size: 2cqw; color: var(--c-sub); }
.slide.is-full .s-footer { color: rgba(255,255,255,.7); }

/* 이미지 */
.s-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-image.full { position: absolute; inset: 0; z-index: 0; }
.s-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,16,32,.15) 0%, rgba(10,16,32,.2) 40%, rgba(10,16,32,.82) 100%); z-index: 1; }
.slide.layout-cover .s-scrim { background: linear-gradient(120deg, rgba(10,16,32,.72) 0%, rgba(10,16,32,.35) 55%, rgba(10,16,32,.15) 100%); }
.img-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.4cqw; color: var(--c-sub); background: repeating-linear-gradient(45deg, #e9edf4, #e9edf4 12px, #eef2f8 12px, #eef2f8 24px); }
.slide.is-full .img-ph { background: linear-gradient(135deg, var(--c-primary), #223); color: rgba(255,255,255,.6); }
.img-ph.demo { background: linear-gradient(140deg, color-mix(in srgb, var(--c-accent) 22%, var(--c-bg)) 0%, var(--c-bg) 60%); position: relative; }
.img-ph.demo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--c-accent) 30%, transparent), transparent 55%); }
.mini-spin { width: 6cqw; height: 6cqw; border: 1cqw solid var(--c-line, #cbd5e6); border-top-color: var(--c-accent); border-radius: 50%; animation: spin .8s linear infinite; }

/* 카피 */
.s-copy { position: relative; z-index: 3; }
.s-copy.on-image { position: absolute; z-index: 3; left: 6cqw; right: 6cqw; bottom: 11cqw; }
.slide.layout-cover .s-copy.on-image { bottom: auto; top: 50%; transform: translateY(-45%); }
.s-eyebrow { font-size: 2.7cqw; font-weight: 800; letter-spacing: .12em; color: var(--c-accent); margin-bottom: 2.2cqw; text-transform: uppercase; }
.slide.is-full .s-eyebrow { color: #fff; opacity: .9; }
.s-title { font-size: 6cqw; font-weight: 900; line-height: 1.22; letter-spacing: -.01em; }
.slide.is-full .s-title { font-size: 6.6cqw; text-shadow: 0 2px 16px rgba(0,0,0,.3); }
.s-body { font-size: 3cqw; line-height: 1.55; color: var(--c-sub); margin-top: 3cqw; }
.slide.is-full .s-body { color: rgba(255,255,255,.9); }

/* split (사진 없는 정보형) */
.s-split { position: absolute; inset: 0; display: flex; }
.s-split .s-copy { flex: 1; padding: 14cqw 6cqw 12cqw; display: flex; flex-direction: column; justify-content: center; }
.s-split .s-image.side { flex: 0 0 40%; position: relative; }
.slide.ori-port .s-split { flex-direction: column; }
.slide.ori-port .s-split .s-image.side { flex: 0 0 38%; order: -1; }
.slide.ori-port .s-split .s-copy { padding: 6cqw 6cqw 12cqw; }

/* bullets */
.s-bullets { list-style: none; margin-top: 4cqw; display: flex; flex-direction: column; gap: 2.6cqw; }
.s-bullets li { display: flex; gap: 2.4cqw; align-items: flex-start; font-size: 3cqw; line-height: 1.4; color: var(--c-ink); }
.s-bullets .bn { flex: none; font-size: 2.4cqw; font-weight: 800; color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 12%, transparent); border-radius: 1cqw; padding: .6cqw 1.4cqw; }

/* 숫자 강조 */
.s-metric { margin-top: 4cqw; }
.m-val { display: block; font-size: 18cqw; font-weight: 900; line-height: 1; color: var(--c-accent); letter-spacing: -.02em; }
.m-lab { display: block; font-size: 3cqw; font-weight: 600; color: var(--c-sub); margin-top: 1cqw; }
.slide.is-full .m-lab { color: rgba(255,255,255,.85); }

/* 비교 */
.s-compare { display: flex; align-items: stretch; gap: 3cqw; margin-top: 4cqw; }
.cmp-col { flex: 1; border-radius: 2.4cqw; padding: 3.4cqw; }
.cmp-col.a { background: color-mix(in srgb, var(--c-sub) 12%, transparent); }
.cmp-col.b { background: color-mix(in srgb, var(--c-accent) 14%, transparent); }
.cmp-col h4 { font-size: 3cqw; margin-bottom: 2cqw; color: var(--c-ink); }
.cmp-col.b h4 { color: var(--c-accent); }
.cmp-col ul { list-style: none; display: flex; flex-direction: column; gap: 1.6cqw; }
.cmp-col li { font-size: 2.5cqw; line-height: 1.4; color: var(--c-ink); padding-left: 3cqw; position: relative; }
.cmp-col li::before { content: "·"; position: absolute; left: .8cqw; color: var(--c-accent); font-weight: 900; }
.cmp-vs { align-self: center; font-size: 3cqw; font-weight: 900; color: var(--c-sub); }

/* 절차 */
.s-steps { display: flex; align-items: stretch; gap: 1.6cqw; margin-top: 4cqw; flex-wrap: wrap; }
.s-steps .step { flex: 1; min-width: 22cqw; background: #fff; border: 1px solid color-mix(in srgb, var(--c-sub) 22%, transparent); border-radius: 2.4cqw; padding: 3cqw; display: flex; gap: 2cqw; align-items: flex-start; }
.slide.is-full .s-steps .step { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.step-n { flex: none; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: 2.8cqw; font-weight: 800; display: grid; place-items: center; }
.s-steps .step b { display: block; font-size: 2.7cqw; color: var(--c-ink); }
.slide.is-full .s-steps .step b { color: #fff; }
.s-steps .step small { display: block; font-size: 2.1cqw; color: var(--c-sub); margin-top: .6cqw; line-height: 1.35; }
.step-arr { align-self: center; color: var(--c-sub); font-size: 3cqw; }
.slide.ori-port .s-steps { flex-direction: column; } .slide.ori-port .step-arr { display: none; }

/* 체크리스트 */
.s-checklist { list-style: none; margin-top: 4cqw; display: flex; flex-direction: column; gap: 2.4cqw; }
.s-checklist li { display: flex; gap: 2.4cqw; align-items: center; font-size: 3cqw; color: var(--c-ink); }
.slide.is-full .s-checklist li { color: #fff; }
.s-checklist .chk { flex: none; width: 5cqw; height: 5cqw; border-radius: 1.4cqw; background: var(--c-accent); color: #fff; font-size: 2.8cqw; font-weight: 900; display: grid; place-items: center; }

.s-filling { margin-top: 4cqw; display: flex; flex-direction: column; gap: 2cqw; }
.s-filling span { display: block; height: 3cqw; border-radius: 1.5cqw; background: linear-gradient(90deg, color-mix(in srgb, var(--c-sub) 18%, transparent) 25%, color-mix(in srgb, var(--c-sub) 32%, transparent) 50%, color-mix(in srgb, var(--c-sub) 18%, transparent) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.s-filling span:nth-child(2) { width: 70%; }
.slide.is-full .s-filling span { background: linear-gradient(90deg, rgba(255,255,255,.18) 25%, rgba(255,255,255,.32) 50%, rgba(255,255,255,.18) 75%); background-size: 200% 100%; }
@keyframes shimmer { to { background-position: -200% 0; } }

.export-render { position: absolute; left: -99999px; top: 0; }

/* ---------- 드로어 ---------- */
.edit-drawer, .qa-drawer { position: fixed; top: 58px; right: 0; width: 340px; height: calc(100vh - 58px); background: #fff; border-left: 1px solid var(--line); box-shadow: -14px 0 40px rgba(20,32,58,.12); z-index: 45; display: flex; flex-direction: column; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.icon-x { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; color: var(--sub); }
.icon-x:hover { background: #f0f2f7; }
.drawer-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.drawer-body label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--sub); }
.drawer-body input, .drawer-body textarea, .drawer-body select { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; color: var(--ink); }
.drawer-body textarea { min-height: 62px; resize: vertical; line-height: 1.5; }

.qa-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.qa-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.qa-item-head b { font-size: 13px; }
.mini-btn { padding: 5px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; }
.qa-item ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.qa-item li { font-size: 12px; padding-left: 16px; position: relative; line-height: 1.4; color: var(--sub); }
.qa-item li::before { content: "•"; position: absolute; left: 3px; }
.qa-item li.sev-high { color: #c8332f; } .qa-item li.sev-high::before { color: #e5484d; }
.qa-item li.sev-med::before { color: #f0a020; }
.qa-clean { text-align: center; color: #1a9d5f; font-size: 13px; line-height: 1.8; padding: 30px 10px; font-weight: 600; }

/* ---------- 발표 ---------- */
.present-overlay { position: fixed; inset: 0; background: #0a0e18; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 20px; }
.present-stage { height: min(88vh, 88vw); max-width: 94vw; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.present-stage .slide { width: auto; height: 100%; aspect-ratio: inherit; }
.present-close { position: absolute; top: 20px; right: 24px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 18px; }
.present-nav { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; }
.present-nav:disabled { opacity: .3; }
.present-counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: 14px; font-weight: 600; }

/* present stage aspect fix */
.present-stage { aspect-ratio: auto; }

/* ---------- 로딩/토스트 ---------- */
.overlay-loading { position: fixed; inset: 0; background: rgba(10,16,32,.55); backdrop-filter: blur(3px); z-index: 70; display: grid; place-items: center; }
.loading-card { background: #fff; border-radius: 18px; padding: 28px 34px; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.3); min-width: 300px; }
.spinner { width: 44px; height: 44px; border: 4px solid #e2e7f0; border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 16px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.progress-steps { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.pstep { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sub); }
.pstep span { width: 22px; height: 22px; border-radius: 50%; background: #eef1f6; color: var(--sub); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.pstep.cur { color: var(--ink); font-weight: 700; } .pstep.cur span { background: var(--accent); color: #fff; }
.pstep.done { color: #1a9d5f; } .pstep.done span { background: #1a9d5f; color: #fff; }
.pstep.done span::after { content: "✓"; }
.pstep.done span { font-size: 0; } .pstep.done span::after { font-size: 12px; }

.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: #0d1730; color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 13px; font-weight: 600; box-shadow: 0 14px 40px rgba(0,0,0,.3); z-index: 80; }

/* ---------- 반응형 ---------- */
@media (max-width: 1040px) {
  .layout { grid-template-columns: 1fr; }
  .input-col { position: static; }
  .edit-drawer, .qa-drawer { width: 100%; }
}