/* 영상 편집 레이어 — 어두운 편집기 화면 (미디어 / 미리보기 / 속성 / 타임라인) */
#ed { position: fixed; inset: 0; z-index: 100; background: #101216; color: #e6e8ec; display: none;
  font: 13px/1.5 -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif; flex-direction: column; }
#ed.open { display: flex; }
#ed * { box-sizing: border-box; }
#ed button { font: inherit; color: #e6e8ec; background: #1b1e25; border: 1px solid #2b303a; border-radius: 6px; padding: 6px 10px; cursor: pointer; }
#ed button:hover { background: #242833; }
#ed button:disabled { opacity: .45; cursor: default; }
#ed button.go { background: #16a34a; border-color: #16a34a; color: #fff; font-weight: 700; }
#ed button.go:hover { background: #15803d; }
#ed button.warn { border-color: #b45309; color: #fbbf24; }
#ed input, #ed select, #ed textarea { font: inherit; color: #e6e8ec; background: #0c0e12; border: 1px solid #2b303a; border-radius: 6px; padding: 6px 8px; width: 100%; }
#ed textarea { resize: vertical; line-height: 1.5; }
#ed label { display: block; color: #9aa3b2; font-size: 11.5px; margin: 10px 0 4px; }
#ed .hint { color: #7c8594; font-size: 11.5px; }
#ed .ok { color: #4ade80; } #ed .bad { color: #f87171; }

/* 상단 바 */
#ed .edtop { display: flex; align-items: center; gap: 8px 10px; padding: 6px 12px; background: #15181e; border-bottom: 1px solid #262b35; flex: none; flex-wrap: wrap; }
#ed .edtop button, #ed .edtop .badge, #ed .edtop label { white-space: nowrap; }
#ed .edtop b { font-size: 14px; }
#ed .edtop .grow { flex: 1; }
#ed .edtop select { width: auto; }
#ed .edtop .badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #1f2937; color: #9aa3b2; }
#ed .edtop .badge.on { background: #14532d; color: #86efac; }

/* 본문 3단 */
#ed .edbody { display: grid; grid-template-columns: 250px 1fr 300px; flex: 1; min-height: 0; }
#ed .edpane { overflow: auto; padding: 10px; border-right: 1px solid #262b35; }
#ed .edpane:last-child { border-right: 0; border-left: 1px solid #262b35; }
#ed .edpane h4 { margin: 0 0 8px; font-size: 12px; color: #9aa3b2; letter-spacing: .02em; }
#ed .tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
#ed .tabs button { padding: 4px 9px; font-size: 12px; }
#ed .tabs button.on { background: #2b303a; border-color: #3b4250; color: #fff; }
#ed .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
#ed .grid .th { position: relative; border: 1px solid #2b303a; border-radius: 6px; overflow: hidden; cursor: pointer; background: #0c0e12; }
#ed .grid .th:hover { border-color: #60a5fa; }
#ed .grid .th img { width: 100%; height: 86px; object-fit: cover; display: block; }
#ed .grid .th .cap { font-size: 10.5px; color: #9aa3b2; padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 미리보기 */
#ed .edcenter { display: flex; flex-direction: row; align-items: stretch; padding: 0; background: #0b0d11; min-height: 0; min-width: 0; }
#ed .previewcol { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; min-width: 0; min-height: 0; overflow: hidden; }
#ed .divider { flex: none; width: 6px; cursor: col-resize; background: #15181e; border-left: 1px solid #262b35; border-right: 1px solid #262b35; }
#ed .divider:hover { background: #2b303a; }
#ed .scriptcol { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: 8px 10px; background: #0e1014; }
#ed #edCanvas { background: #000; border-radius: 6px; max-height: calc(100% - 60px); max-width: 100%; box-shadow: 0 0 0 1px #262b35; touch-action: none; }   /* 미리보기 캔버스만 (타임라인 파형 canvas 는 아래 규칙) */
#ed .ctrl { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; }
#ed .ctrl input[type=range] { flex: 1; padding: 0; }
#ed .ctrl .time { font-variant-numeric: tabular-nums; color: #9aa3b2; min-width: 84px; text-align: right; }

/* 속성 */
#ed .prop .row { display: flex; gap: 6px; }
#ed .prop .row > * { flex: 1; }
#ed .prop img.cur { width: 100%; max-height: 150px; object-fit: cover; border-radius: 6px; border: 1px solid #2b303a; display: block; }
#ed .prop .none { height: 90px; border: 1px dashed #3b4250; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #7c8594; }

/* 타임라인 (v0.7: 위 도구줄 + 이름칸·레인 격자, 트랙 높이 가변, 파형) */
#ed .edtl { flex: none; background: #15181e; border-top: 1px solid #262b35; display: flex; flex-direction: column; overflow: hidden; max-height: 52vh; }
#ed .tltop { display: flex; align-items: center; gap: 6px; padding: 3px 8px; height: 34px; border-bottom: 1px solid #262b35; flex: none; }
#ed .tltop .grow { flex: 1; }
#ed .tltop input[type=range] { width: 140px; padding: 0; }
#ed .tlgrid { display: grid; grid-template-columns: 84px 1fr; flex: 1; min-height: 0; overflow: hidden; }
#ed .edtl .names { border-right: 1px solid #262b35; overflow: hidden; will-change: transform; }
#ed .edtl .tname { position: relative; height: 28px; line-height: 28px; padding: 0 8px; font-size: 11px; color: #9aa3b2; border-bottom: 1px solid #1f242d; white-space: nowrap; overflow: hidden; }
#ed .edtl .tname .hgrip { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: row-resize; z-index: 2; }
#ed .edtl .tname .hgrip:hover { background: rgba(96,165,250,.35); }
#ed .edtl .lanes { overflow: auto; position: relative; }
#ed .edtl .tlinner { position: relative; min-height: 100%; }
#ed .edtl .ruler { height: 28px; position: sticky; top: 0; z-index: 3; background: #15181e; border-bottom: 1px solid #1f242d; font-size: 10px; color: #6b7280; cursor: pointer; }
#ed .edtl .ruler span { position: absolute; top: 6px; border-left: 1px solid #2b303a; padding-left: 3px; white-space: nowrap; }
#ed .edtl .ruler i { position: absolute; bottom: 0; height: 6px; border-left: 1px solid #262b35; }
#ed .edtl .lane { position: relative; border-bottom: 1px solid #1f242d; height: 28px; }
#ed .edtl .clip { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; font-size: 11px; line-height: 22px; padding: 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border: 1px solid transparent; }
#ed .edtl .clip.v { background: #1e6f4f; } #ed .edtl .clip.v.sel { border-color: #86efac; background: #22865f; }
#ed .edtl .clip.t { background: #b45309; } #ed .edtl .clip.t.w { background: #d97706; padding: 0 3px; font-size: 10.5px; }
#ed .edtl .clip.a { background: #5b3fd6; padding: 0; } #ed .edtl .clip.b { background: #b0246c; padding: 0; }
#ed .edtl .clip.a canvas, #ed .edtl .clip.b canvas { position: absolute; left: 0; top: 2px; width: 100%; height: calc(100% - 4px); max-height: none; display: block; pointer-events: none; background: transparent; }
#ed .edtl .clip .lab { position: absolute; left: 6px; top: 0; font-size: 10.5px; line-height: 18px; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }
#ed .edtl .clip.empty { background: #3b1d1d; color: #fca5a5; border: 1px dashed #7f1d1d; }
#ed .edtl .head { position: absolute; top: 0; bottom: 0; width: 2px; background: #f59e0b; pointer-events: none; z-index: 4; }
#ed .edtl .gapmark { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(239,68,68,.55) 0 4px, rgba(239,68,68,.15) 4px 8px); border-left: 1px solid #ef4444; border-right: 1px solid #ef4444; pointer-events: none; z-index: 1; }
#ed .edtl .duckmark { position: absolute; top: 0; bottom: 0; background: rgba(250,204,21,.22); border-top: 2px solid #facc15; pointer-events: auto; cursor: pointer; z-index: 1; }
#ed .edtl .duckmark.off { background: transparent; border-top: 2px dashed #6b7280; }

/* 내보내기 진행 */
#ed .prog { height: 8px; background: #1f242d; border-radius: 4px; overflow: hidden; margin-top: 6px; }
#ed .prog i { display: block; height: 100%; background: #22c55e; width: 0; transition: width .4s; }
#ed .msgbox { margin-top: 8px; font-size: 12px; padding: 8px; border-radius: 6px; background: #1b1e25; display: none; white-space: pre-wrap; }
#ed .msgbox.show { display: block; }

/* 상단 "내 설정"(프리셋) 묶음 + 작은 버튼 */
#ed .edtop .preset { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid #2b303a; border-radius: 8px; background: #101216; }
#ed .edtop .preset select { max-width: 150px; }
#ed button.small { padding: 3px 7px; font-size: 11.5px; }

/* 경고 상자 (모델 목록 실패 등) */
#ed .warnbox { margin-top: 6px; padding: 7px 9px; border-radius: 6px; background: #3b2a12; border: 1px solid #b45309; color: #fcd34d; font-size: 11.5px; line-height: 1.45; }

/* 단추 묶음 (감정 / 말 빠르기) */
#ed .segs { display: flex; gap: 0; border: 1px solid #2b303a; border-radius: 6px; overflow: hidden; }
#ed .segs button { flex: 1; border: 0; border-right: 1px solid #2b303a; border-radius: 0; padding: 6px 4px; font-size: 12px; white-space: nowrap; }
#ed .segs button:last-child { border-right: 0; }
#ed .segs button.on { background: #1d4ed8; color: #fff; font-weight: 700; }
#ed .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* ── 목소리 카드 ── */
#ed .vcard { border: 1px solid #2b303a; border-radius: 10px; background: #15181e; padding: 10px; display: flex; flex-direction: column; gap: 7px; position: relative; }
#ed .vcard:hover { border-color: #3b4250; }
#ed .vcard.sel { border-color: #16a34a; box-shadow: 0 0 0 1px #16a34a inset; }
#ed .vcard .vhead { display: flex; align-items: center; gap: 9px; }
#ed .vcard .avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; }
#ed .vcard.compact .avatar { width: 38px; height: 38px; }
#ed .vcard .vname { min-width: 0; flex: 1; }
#ed .vcard .vname b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ed .vcard .vdesc { color: #9aa3b2; font-size: 11px; line-height: 1.35; max-height: 2.7em; overflow: hidden; }
#ed .vcard .heart { flex: none; border: 0; background: transparent; color: #4b5563; font-size: 17px; padding: 0 4px; line-height: 1; }
#ed .vcard .heart:hover { color: #f472b6; background: transparent; }
#ed .vcard .heart.on { color: #ec4899; }
#ed .vtags { display: flex; flex-wrap: wrap; gap: 4px; }
#ed .tag { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: #262b35; color: #c3c9d4; white-space: nowrap; }
#ed .tag.lang { background: #1e3a8a; color: #bfdbfe; }
#ed .tag.mood { background: #3b2a12; color: #fcd34d; }
#ed .tag.use { background: #14532d; color: #86efac; }
#ed .tag.mine { background: #4a1d96; color: #ddd6fe; }
#ed .tag.heard { background: #0f3d3e; color: #5eead4; }
#ed .tag.sel { background: #16a34a; color: #fff; font-weight: 700; padding: 4px 10px; font-size: 11.5px; align-self: center; }
#ed .vmeta { color: #7c8594; font-size: 10.5px; }
#ed .vbtns { display: flex; gap: 5px; flex-wrap: wrap; margin-top: auto; }
#ed .vbtns button { padding: 5px 8px; font-size: 11.5px; white-space: nowrap; }
#ed .vbtns .go { margin-left: auto; }

/* ── 목소리 고르기 판(왼쪽·가운데 위에 덮는 층) ── */
#ed .edbody { position: relative; }
#ed .vpick { position: absolute; inset: 0; z-index: 5; background: #0e1014; display: none; flex-direction: row; min-height: 0; }
#ed .vfilters { width: 250px; flex: none; overflow: auto; padding: 10px; border-right: 1px solid #262b35; background: #15181e; }
#ed .vfilters h4 { margin: 12px 0 5px; font-size: 11.5px; color: #9aa3b2; }
#ed .vfilters h4:first-of-type { margin-top: 6px; }
#ed .chips { display: flex; flex-wrap: wrap; gap: 4px; }
#ed .chip { padding: 3px 9px; font-size: 11.5px; border-radius: 999px; background: #1b1e25; }
#ed .chip.on { background: #1d4ed8; border-color: #3b82f6; color: #fff; }
#ed .vgrid-wrap { flex: 1; min-width: 0; overflow: auto; padding: 10px 12px; }
#ed .vgrid-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; position: sticky; top: -10px; background: #0e1014; padding: 10px 0 6px; z-index: 1; }
#ed .vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; align-items: stretch; }

@media (max-width: 1000px) {
  #ed .vgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ── v0.6: 단어 대본 편집기 (가운데 오른쪽 칸) ── */
#ed .scripttop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0 8px; border-bottom: 1px solid #1f242d; margin-bottom: 8px; position: sticky; top: -8px; background: #0e1014; z-index: 1; }
#ed .scripttop b { font-size: 13px; }
#ed .paras { display: flex; flex-direction: column; gap: 8px; }
#ed .para { display: grid; grid-template-columns: 26px 1fr 84px; gap: 8px; padding: 8px; border: 1px solid #1f242d; border-radius: 8px; background: #12151b; }
#ed .para.sel { border-color: #16a34a; background: #131a16; }
#ed .pno { font-size: 12px; color: #7c8594; text-align: center; padding-top: 4px; font-variant-numeric: tabular-nums; }
#ed .pbody { min-width: 0; }
#ed .pbadges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; min-height: 20px; }
#ed .ptokens { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; line-height: 1.7; font-size: 14px; }
#ed .tok { padding: 1px 4px; border-radius: 4px; cursor: pointer; user-select: none; border: 1px solid transparent; }
#ed .tok:hover { background: #1f242d; }
#ed .tok.cur { background: #3b2a12; color: #fcd34d; }
#ed .tok.on { background: #1d4ed8; color: #fff; border-color: #60a5fa; }
#ed .tok.em { color: #fbbf24; font-weight: 700; }
#ed .tok.on.em { color: #fde68a; }
#ed .tok.edited { border-bottom: 2px dotted #f59e0b; }
#ed .tok.del { text-decoration: line-through; color: #6b7280; opacity: .7; }
#ed button.gap { padding: 0 3px; margin: 0 1px; font-size: 11px; line-height: 16px; color: #4b5563; background: transparent; border: 0; border-radius: 3px; min-width: 10px; }
#ed button.gap:hover { background: #1f242d; color: #e6e8ec; }
#ed button.gap.long { color: #f59e0b; border: 1px dashed #b45309; }
#ed .pline { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: #7c8594; font-size: 12px; }
#ed .pline input { padding: 4px 7px; font-size: 12.5px; }
#ed .pthumb { cursor: pointer; }
#ed .pthumb img { width: 84px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid #2b303a; display: block; }
#ed .pthumb .noimg { width: 84px; height: 56px; border: 1px dashed #3b4250; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 10.5px; }
#ed .ptime { font-size: 10.5px; color: #7c8594; text-align: center; margin-top: 3px; font-variant-numeric: tabular-nums; }
#ed .ptime span { color: #9aa3b2; }

/* ── v0.6: 자막 색·하이라이트 속성 ── */
#ed .cfield label { margin: 8px 0 3px; }
#ed .crow { display: grid; grid-template-columns: 34px 78px 1fr; gap: 5px; align-items: center; }
#ed .crow input[type=color] { width: 34px; height: 28px; padding: 1px 2px; cursor: pointer; }
#ed .crow input[type=text] { font-family: ui-monospace, Menlo, monospace; font-size: 12px; padding: 4px 6px; }
#ed .swatches { display: flex; gap: 3px; flex-wrap: wrap; }
#ed .sw { width: 16px; height: 16px; padding: 0; border-radius: 4px; border: 1px solid #3b4250; }
#ed .sw:hover { transform: scale(1.15); }
#ed textarea.dim { color: #7c8594; background: #0a0c10; }

/* ── v0.6: 타임라인 단어 눈금 + 상단 표시 ── */
#ed .edtl .clip.v { overflow: hidden; }
#ed .edtl .clip.v i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.22); pointer-events: none; }
#ed .edtl .clip.v span { position: relative; }
#ed .edtl .clip.t { font-size: 10.5px; }
#ed #edCost { background: #1e3a8a; color: #bfdbfe; }
#ed #edSaveState { background: #1f2937; color: #9aa3b2; }
#ed #edSaveState.ok { background: #14532d; color: #86efac; }
#ed #edSaveState.busy { background: #3b2a12; color: #fcd34d; }
#ed #edSaveState.bad { background: #450a0a; color: #fca5a5; }

/* 되돌리기 안내 등 작은 라벨 */
#ed label.small { font-size: 11.5px; color: #9aa3b2; }

/* ══════════ v0.7 R3: 레이어 탭 · [원고·이미지] 탭 · 서랍 · 반응형 ══════════ */
html.ed-lock, html.ed-lock body { overflow: hidden; }            /* 레이어가 열려 있는 동안 뒤 화면 스크롤 잠금 */
#ed .edbody, #ed .edpane, #ed .scriptcol, #ed .edstory, #ed .edtl .lanes { overscroll-behavior: contain; }
#ed .edtabs { display: inline-flex; border: 1px solid #2b303a; border-radius: 8px; overflow: hidden; }
#ed .edtabs button { border: 0; border-radius: 0; padding: 5px 12px; font-weight: 700; color: #9aa3b2; background: #101216; }
#ed .edtabs button + button { border-left: 1px solid #2b303a; }
#ed .edtabs button.on { background: #1d4ed8; color: #fff; }
#ed .drawerbtn { display: none; }
#ed .edscrim { display: none; }
#ed .edstory { display: none; flex: 1; min-height: 0; overflow: auto; padding: 12px 16px; background: #0e1014; }
#ed[data-layer="story"] .edbody, #ed[data-layer="story"] .edtl { display: none; }
#ed[data-layer="story"] .edstory { display: block; }
#ed[data-layer="story"] .drawerbtn { display: none !important; }
#ed .sthead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
#ed .sthead b { font-size: 14px; }
#ed .stnote { margin-bottom: 10px; max-width: 900px; }
#ed .stlist { display: flex; flex-direction: column; gap: 8px; max-width: 980px; }
#ed .stscene { display: grid; grid-template-columns: 18px 24px 96px 1fr; gap: 8px; align-items: start; padding: 8px; border: 1px solid #1f242d; border-radius: 8px; background: #12151b; }
#ed .stscene.sel { border-color: #16a34a; background: #131a16; }
#ed .stscene.dragging { opacity: .45; }
#ed .stscene.over-top { box-shadow: 0 -3px 0 0 #60a5fa; }
#ed .stscene.over-bottom { box-shadow: 0 3px 0 0 #60a5fa; }
#ed .sthandle { cursor: grab; color: #4b5563; user-select: none; padding-top: 6px; text-align: center; letter-spacing: -2px; }
#ed .sthandle:hover { color: #e6e8ec; }
#ed .stno { font-size: 12px; color: #7c8594; text-align: center; padding-top: 6px; font-variant-numeric: tabular-nums; }
#ed .stthumb { cursor: pointer; }
#ed .stthumb img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid #2b303a; display: block; }
#ed .stthumb .noimg { width: 96px; height: 96px; border: 1px dashed #3b4250; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 11px; }
#ed .stfrom { font-size: 10.5px; color: #7c8594; text-align: center; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ed .stbody { min-width: 0; }
#ed .stbody textarea { font-size: 13.5px; }
#ed .stmeta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 5px; color: #7c8594; font-size: 11.5px; }
#ed .stbtns { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
#ed .stbtns .grow { flex: 1; }
#ed .stgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 8px; padding: 8px; border: 1px dashed #3b4250; border-radius: 6px; }
#ed .stgrid .th { position: relative; border: 1px solid #2b303a; border-radius: 6px; overflow: hidden; cursor: pointer; background: #0c0e12; }
#ed .stgrid .th:hover { border-color: #60a5fa; }
#ed .stgrid .th img { width: 100%; height: 70px; object-fit: cover; display: block; }
#ed .stgrid .th .cap { font-size: 10.5px; color: #9aa3b2; padding: 2px 5px; }

/* <1280: 좌우 패널이 서랍이 됩니다 (상단 [미디어] [속성] 단추, 뒤 배경을 누르면 닫힘) */
@media (max-width: 1279px) {
  #ed .edbody { grid-template-columns: 1fr; overflow: hidden; }
  #ed .drawerbtn { display: inline-block; }
  #ed .edpane { position: absolute; top: 0; bottom: 0; left: 0; width: 280px; max-width: 86%; z-index: 7; background: #15181e; border-right: 1px solid #262b35;
    transform: translateX(-102%); transition: transform .18s ease; box-shadow: 0 0 24px rgba(0,0,0,.5); }
  #ed .edpane.prop { left: auto; right: 0; border-right: 0; border-left: 1px solid #262b35; transform: translateX(102%); }
  #ed.dl #edLeft { transform: none; }
  #ed.dr #edRight { transform: none; }
  #ed .edscrim { position: absolute; inset: 0; z-index: 6; background: rgba(0,0,0,.45); }
  #ed.dl .edscrim, #ed.dr .edscrim { display: block; }
  #ed .vfilters { width: 220px; }
}
/* <768: 미리보기 위 · 속성 아래로 세로로 쌓임. 타임라인은 가로 스크롤(이미 lanes 가 스크롤). 미디어 패널만 서랍으로 남습니다 */
@media (max-width: 767px) {
  #ed .edbody { display: block; overflow: auto; }
  #ed .edcenter { flex-direction: column; }
  #ed .divider { display: none; }
  #ed .previewcol { flex: none !important; width: 100%; }
  #ed .scriptcol { flex: none; max-height: 42vh; border-top: 1px solid #262b35; }
  #ed #edRight { position: static; transform: none; width: auto; max-width: none; border: 0; border-top: 1px solid #262b35; box-shadow: none; }
  #ed #edRightBtn { display: none; }
  #ed .edtop { gap: 6px; padding: 6px 8px; }
  #ed .edtop .hint, #ed .edtop label { display: none; }
  #ed .edtop .preset select { max-width: 110px; }
  #ed .tlgrid { grid-template-columns: 58px 1fr; }
  #ed .edtl .tname { padding: 0 4px; font-size: 10px; }
  #ed .stscene { grid-template-columns: 18px 20px 72px 1fr; }
  #ed .stthumb img, #ed .stthumb .noimg { width: 72px; height: 72px; }
}

/* ── v0.7 5-4: 빈 구간 정리 판 (가운데 대본 칸 위에 뜸) ── */
#ed .gappanel { position: absolute; right: 312px; bottom: 10px; width: 400px; max-width: calc(100% - 20px); max-height: 60%; z-index: 8; background: #15181e; border: 1px solid #b45309; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.6); display: flex; flex-direction: column; padding: 10px; gap: 8px; }
#ed .gappanel .gaphead { display: flex; align-items: center; gap: 8px; }
#ed .gappanel .gaphead .grow { flex: 1; }
#ed .gappanel .gaprules { display: grid; grid-template-columns: auto 70px auto 70px auto; gap: 6px; align-items: center; }
#ed .gappanel .gaprules label { margin: 0; }
#ed .gappanel .gaprules input { padding: 4px 6px; }
#ed .gappanel .gapsum { font-size: 12px; }
#ed .gappanel .gaplist { overflow: auto; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
#ed .gappanel .gapitem { display: flex; gap: 6px; align-items: center; padding: 3px 6px; border-radius: 6px; background: #1b1e25; cursor: pointer; font-size: 12px; margin: 0; color: #e6e8ec; }
#ed .gappanel .gapitem.off { opacity: .55; }
#ed .gappanel .gapitem input { width: auto; }
#ed .gappanel .gapskip { margin-top: 6px; color: #fbbf24; }
#ed .gappanel .gapbtns { display: flex; align-items: center; gap: 8px; }
@media (max-width: 1279px) { #ed .gappanel { right: 10px; } }

/* ── v0.7 11-2: 용어집 교정 표시 (대본) + 용어집 층 (메인·편집기 공용, #ed 밖) ── */
#ed .tok.fixed { border-bottom: 2px dotted #34d399; }
#glossaryModal { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; font: 13px/1.5 -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif; }
#glossaryModal .gbox { background: #fff; color: #111; border-radius: 12px; width: 100%; max-width: 860px; max-height: 90vh; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
#glossaryModal .ghead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#glossaryModal .ghead .grow { flex: 1; }
#glossaryModal .hint { color: #6b7280; font-size: 12px; }
#glossaryModal label { display: block; font-size: 12px; color: #374151; margin: 6px 0 3px; }
#glossaryModal input, #glossaryModal textarea { font: inherit; border: 1px solid #d1d5db; border-radius: 6px; padding: 6px 8px; width: 100%; box-sizing: border-box; }
#glossaryModal button { font: inherit; border: 1px solid #d1d5db; background: #f9fafb; border-radius: 6px; padding: 5px 10px; cursor: pointer; }
#glossaryModal button.go { background: #16a34a; color: #fff; border-color: #16a34a; font-weight: 700; padding: 7px 16px; }
#glossaryModal .gtable { display: flex; flex-direction: column; gap: 4px; }
#glossaryModal .grow-h, #glossaryModal .grow-r { display: grid; grid-template-columns: 1.2fr 1.8fr 1.2fr 1.2fr 34px; gap: 6px; align-items: center; }
#glossaryModal .grow-h span { font-size: 11.5px; color: #6b7280; }
#glossaryModal .grow2 { display: grid; grid-template-columns: 1fr 120px; gap: 8px; align-items: end; }
#glossaryModal .gbtns { display: flex; align-items: center; gap: 10px; }
@media (max-width: 767px) { #glossaryModal .grow-h { display: none; } #glossaryModal .grow-r { grid-template-columns: 1fr 1fr; } #glossaryModal .grow2 { grid-template-columns: 1fr; } }

/* ── v0.7 11-3: 내보내기 전 점검표 층 ── */
#ed .checkmodal { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
#ed .checkmodal .cbox { background: #15181e; border: 1px solid #3b4250; border-radius: 12px; width: 100%; max-width: 720px; max-height: 85%; display: flex; flex-direction: column; gap: 10px; padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
#ed .checkmodal .chead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#ed .checkmodal .chead .grow { flex: 1; }
#ed .checkmodal .clist { overflow: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
#ed .checkmodal .citem { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 6px; background: #1b1e25; cursor: pointer; font-size: 12.5px; }
#ed .checkmodal .citem:hover { background: #242833; }
#ed .checkmodal .citem .tag { flex: none; margin-top: 1px; }
#ed .checkmodal .citem.error .tag { background: #7f1d1d; color: #fecaca; }
#ed .checkmodal .citem.warn .tag { background: #78350f; color: #fde68a; }
#ed .checkmodal .citem.info .tag { background: #1e3a8a; color: #bfdbfe; }
#ed .checkmodal .crules { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; }
#ed .checkmodal .crules label { margin: 0; display: inline-flex; gap: 4px; align-items: center; color: #9aa3b2; }
#ed .checkmodal .crules input { width: 64px; padding: 3px 6px; }
#ed .checkmodal .cbtns { display: flex; gap: 8px; align-items: center; }

/* ── 05 R4 카드뉴스 수정하기 레이어 (public/card-editor.js) — 그림 고르기 창(z 50·60)이 위로 뜨게 45 ── */
.cardlayer { position: fixed; inset: 0; z-index: 45; background: #f3f4f6; display: flex; flex-direction: column; font-size: 13px; color: #111827; }
.cardlayer.hide { display: none; }
body.cl-open { overflow: hidden; }
.cardlayer .cl-top { display: flex; gap: 10px; align-items: center; padding: 8px 14px; background: #fff; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.cardlayer .grow { flex: 1; }
.cardlayer .cl-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px 1fr 300px; gap: 10px; padding: 10px; }
.cardlayer .cl-left, .cardlayer .cl-right { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; overflow: auto; }
.cardlayer .cl-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; gap: 6px; }
.cardlayer #clCanvas { max-width: 100%; max-height: calc(100vh - 250px); width: auto; height: auto; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.12); border-radius: 6px; touch-action: none; cursor: move; }
.cardlayer .cl-tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
.cardlayer .cl-tpl { border: 2px solid transparent; border-radius: 8px; padding: 3px; cursor: pointer; text-align: center; }
.cardlayer .cl-tpl.on { border-color: #0f766e; background: #f0fdfa; }
.cardlayer .cl-tpl canvas, .cardlayer .cl-thumb canvas { width: 100%; height: auto; display: block; border-radius: 4px; }
.cardlayer .cl-strip { display: flex; gap: 8px; padding: 8px 14px; background: #fff; border-top: 1px solid #e5e7eb; overflow-x: auto; }
.cardlayer .cl-thumb { position: relative; width: 84px; flex: 0 0 84px; border: 2px solid transparent; border-radius: 6px; cursor: grab; }
.cardlayer .cl-thumb.on { border-color: #2563eb; }
.cardlayer .cl-thumb span { position: absolute; left: 4px; top: 2px; font-size: 11px; background: rgba(0,0,0,.6); color: #fff; border-radius: 4px; padding: 0 4px; }
.cardlayer .lab { font-weight: 700; margin: 8px 0 4px; }
.cardlayer .bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; align-items: center; }
.cardlayer .cl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cardlayer .cl-grid label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #374151; }
.cardlayer textarea { width: 100%; font: inherit; }
.cardlayer button.on { background: #ccfbf1; }
@media (max-width: 900px) { .cardlayer .cl-main { grid-template-columns: 1fr; overflow: auto; } .cardlayer #clCanvas { max-height: 60vh; } }
/* v0.9.5 다듬기 — 레이어 안 입력 칸이 기본 폼 모양(큰 여백)에 밀리지 않게 */
.cardlayer input[type=number], .cardlayer input:not([type]), .cardlayer select { width: 100%; padding: 4px 6px; font-size: 13px; min-width: 0; box-sizing: border-box; }
.cardlayer input[type=color] { width: 100%; height: 32px; padding: 2px; box-sizing: border-box; }
.cardlayer .cl-grid label > span { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cardlayer .cl-grid label > span input { width: 100% !important; }

/* v0.9.6 카드뉴스 자유 편집 (05 v7 4-1) */
.cardlayer .cl-center { justify-content: flex-start; }
.cardlayer .cl-tools-top { justify-content: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 6px 8px; margin: 0; }
.cardlayer .cl-tools-top .sep { width: 1px; height: 20px; background: #e5e7eb; margin: 0 2px; }
.cardlayer .cl-canvas-wrap { position: relative; display: flex; justify-content: center; min-height: 0; max-width: 100%; }
.cardlayer #clCanvas { max-height: calc(100vh - 300px); }
.cardlayer .cl-tplhead { grid-column: 1 / -1; font-weight: 700; font-size: 12px; color: #374151; margin-top: 4px; }
.cardlayer .cl-layers { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow: auto; }
.cardlayer .cl-layer { display: flex; align-items: center; gap: 2px; padding: 3px 4px; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; }
.cardlayer .cl-layer.on { border-color: #2563eb; background: #eff6ff; }
.cardlayer .cl-layer .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.cardlayer .cl-layer button { padding: 1px 5px; min-width: 0; }
.cardlayer .cl-grid5 { grid-template-columns: repeat(3, 1fr); }
.cardlayer .cl-inline { position: absolute; z-index: 5; margin: 0; padding: 0; border: 2px solid #2563eb; background: rgba(255,255,255,.92); resize: none; outline: none; box-sizing: border-box; overflow: hidden; }
.cardlayer button:disabled { opacity: .45; }
.cardlayer .hide { display: none !important; }            /* .bar(flex) 보다 우선 — 관리자 OTP 칸 등 */
@media (max-width: 900px) { .cardlayer #clCanvas { max-height: 55vh; } .cardlayer .cl-tools-top { flex-wrap: wrap; } }
/* v0.9.9 폰트 분류·검색 (카드뉴스 편집 · 영상 자막 같이) */
.fontfilter { display: flex; gap: 4px; margin: 2px 0 4px; }
.fontfilter input { flex: 1; min-width: 0; }
.fontfilter select { width: auto !important; max-width: 46%; }

/* ── v0.9.11 QA 고침 ── */
/* Q1 카드뉴스 편집(폰): 캔버스가 0×0 으로 줄던 것 — 900px 아래는 세로 한 줄(캔버스 먼저 · 화면 폭) */
@media (max-width: 900px) {
  .cardlayer .cl-main { display: flex; flex-direction: column; overflow: auto; }
  .cardlayer .cl-main > * { flex: none; }
  .cardlayer .cl-center { order: -1; align-items: stretch; }
  .cardlayer .cl-canvas-wrap { width: 100%; }
  .cardlayer #clCanvas { width: 100%; height: auto; max-height: none; }
  .cardlayer .cl-left { max-height: 320px; }
  .cardlayer .cl-tpls { grid-template-columns: repeat(3, 1fr); }
  .cardlayer .cl-top .grow { display: none; }
}
/* Q4 폰트 칸: 검색·분류·목록을 한 줄 전체 폭으로 */
.cardlayer .cl-grid .cl-wide { grid-column: 1 / -1; }
.cardlayer .fontfilter input { width: auto !important; flex: 1 1 auto; }
.cardlayer .fontfilter select { width: 44% !important; max-width: none; flex: none; }
/* Q3 영상 편집(폰) 타임라인 도구 줄: 찌그러지지 않게 줄바꿈 */
@media (max-width: 767px) {
  #ed .tltop { height: auto; flex-wrap: wrap; row-gap: 4px; padding: 4px 6px; }
  #ed .tltop button, #ed .tltop .hint { white-space: nowrap; }
  #ed .tltop input[type=range] { width: 96px; }
  #ed .tltop #tlPps, #ed .tltop #tlInfo { display: none; }
  #ed .tlgrid { grid-template-columns: 70px 1fr; }
}
/* Q13 누르기 쉬운 크기(터치 화면) */
@media (pointer: coarse) { #ed button, .cardlayer button { min-height: 40px; } #ed button.small, #ed .tabs button { min-height: 36px; } }
/* Q12 영상 편집 위 줄: 폭이 모자라 잘리던 "크기" 설명 글 */
#ed .edtop .edpair { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }   /* 이름표와 칸이 따로 줄바꿈되지 않게 */
.cardlayer .cl-grid label > span.fontfilter { display: flex; grid-template-columns: none; }   /* Q4: 자리 x·y·w·h 4칸 격자 규칙이 폰트 검색 줄에 걸리던 것 */

/* v0.9.16 타임라인 끌기·자르기 (editor-tledit.js) */
#ed .edtl .clip.v { cursor: grab; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
#ed .edtl .clip.v.sel { touch-action: none; }
#ed .edtl .clip.v.dragging { opacity: .75; z-index: 5; cursor: grabbing; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
#ed .edtl .clip.v .trim { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 3; background: transparent; }
#ed .edtl .clip.v .trim.l { left: 0; } #ed .edtl .clip.v .trim.r { right: 0; }
#ed .edtl .clip.v:hover .trim, #ed .edtl .clip.v.sel .trim { background: rgba(255,255,255,.35); }
#ed .edtl .snapline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed #facc15; z-index: 6; pointer-events: none; }
body.tl-dragging, body.tl-dragging * { cursor: grabbing !important; user-select: none !important; }
#ed .tltop .tlsnap { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
@media (pointer: coarse) { #ed .edtl .clip.v .trim { width: 18px; } #ed .edtl .clip.v.sel .trim { background: rgba(255,255,255,.45); } }

#edTime.lenbad { color: #b45309; font-weight: 700; }   /* v0.9.17 60초 경계 */

/* v0.9.20 B — 소리에 맞춤: 그림만 나오는 구간(빗금) · 고정 표시 · 도구 줄 설정 */
#ed .edtl .clip.v em.piconly { position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.42) 0 4px, rgba(255,214,0,.30) 4px 8px); border-left: 1px dashed rgba(255,214,0,.8); }
#ed .edtl .clip.v.lock { box-shadow: inset 0 0 0 1px #f59e0b; }
#ed .edtl .clip.v u.lk { text-decoration: none; font-size: 10px; background: #f59e0b; color: #111; border-radius: 3px; padding: 0 3px; margin-right: 4px; }
#ed .tltop .tlfitcfg input { width: 52px; padding: 1px 3px; display: inline-block; }
#ed .prop .fitrow { gap: 6px; flex-wrap: wrap; }
#ed .prop .badge.lockb { background: #f59e0b; color: #111; }
#ed .prop .fitrow .badge { flex: none; width: auto; }

/* v0.9.22 C-7 회색 단추 이유 한 줄 */
#ed .prop .hint.warnline { color: #fbbf24; margin-top: 4px; }
#ed .lenfix { display: none; margin: 4px 0; padding: 6px 8px; border-radius: 6px; background: #3b2a06; color: #fde68a; font-size: 13px; line-height: 1.5; }
#ed .lenfix.on { display: block; }
#ed .lenfix button { margin-left: 6px; }

/* v0.9.25 N1 브랜드 키트 층 */
#brandModal { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; font: 13px/1.5 -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif; }
#brandModal .gbox { background: #fff; color: #111; border-radius: 12px; width: 100%; max-width: 980px; max-height: 92vh; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; }
#brandModal .ghead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#brandModal .ghead .grow { flex: 1; }
#brandModal .hint { color: #6b7280; font-size: 12px; }
#brandModal label { font-size: 12px; color: #374151; }
#brandModal input:not([type=checkbox]):not([type=color]), #brandModal select { font: inherit; border: 1px solid #d1d5db; border-radius: 6px; padding: 5px 8px; box-sizing: border-box; max-width: 100%; }
#brandModal input#bkTone, #brandModal input#bkBanned, #brandModal input#bkCta { width: 100%; }
#brandModal input[type=number] { width: 72px; }
#brandModal button, #brandModal .btnlike { font: inherit; border: 1px solid #d1d5db; background: #f9fafb; border-radius: 6px; padding: 5px 10px; cursor: pointer; display: inline-block; }
#brandModal button.primary, #brandModal button.go { background: #16a34a; color: #fff; border-color: #16a34a; font-weight: 700; }
#brandModal .bkwrap { display: grid; grid-template-columns: 200px 1fr; gap: 14px; }
#brandModal .bklist { display: flex; flex-direction: column; gap: 6px; }
#brandModal .bkitem { text-align: left; }
#brandModal .bkitem.on { background: #ecfdf5; border-color: #10b981; font-weight: 700; }
#brandModal .bkform { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#brandModal .bkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#brandModal .bkrow .lab { font-weight: 700; min-width: 110px; }
#brandModal .bkc { display: inline-flex; flex-direction: column; align-items: center; font-size: 11px; }
#brandModal .bkc input { width: 34px; height: 28px; padding: 0; border: 1px solid #d1d5db; border-radius: 6px; }
#brandModal .gbtns { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
@media (max-width: 700px) { #brandModal .bkwrap { grid-template-columns: 1fr; } #brandModal .bkrow .lab { min-width: 0; width: 100%; } }

/* v0.9.25 N1 편집기 머리글 키트 칸 — 체크 칸이 100% 폭으로 글자를 덮지 않게 · 폰에서도 보이게 */
#ed .edtop #edBrandBox label { display: inline-flex; align-items: center; gap: 3px; margin: 0; color: #e6e8ec; }
#ed .edtop #edBrandBox input[type=checkbox] { width: auto; margin: 0; padding: 0; }
#ed .edtop #edBrandBox .hint { display: inline; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v0.9.26 N2 내 채널 층 — 브랜드 키트 층과 같은 모양 */
#chanModal { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; font: 13px/1.5 -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif; }
#chanModal .gbox { background: #fff; color: #111; border-radius: 12px; width: 100%; max-width: 980px; max-height: 92vh; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; }
#chanModal .ghead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#chanModal .ghead .grow { flex: 1; }
#chanModal .hint { color: #6b7280; font-size: 12px; }
#chanModal label { font-size: 12px; color: #374151; }
#chanModal input:not([type=checkbox]):not([type=color]), #chanModal select { font: inherit; border: 1px solid #d1d5db; border-radius: 6px; padding: 5px 8px; box-sizing: border-box; max-width: 100%; }
#chanModal input#bkTone, #chanModal input#bkBanned, #chanModal input#bkCta { width: 100%; }
#chanModal input[type=number] { width: 72px; }
#chanModal button, #chanModal .btnlike { font: inherit; border: 1px solid #d1d5db; background: #f9fafb; border-radius: 6px; padding: 5px 10px; cursor: pointer; display: inline-block; }
#chanModal button.primary, #chanModal button.go { background: #16a34a; color: #fff; border-color: #16a34a; font-weight: 700; }
#chanModal .bkwrap { display: grid; grid-template-columns: 200px 1fr; gap: 14px; }
#chanModal .bklist { display: flex; flex-direction: column; gap: 6px; }
#chanModal .bkitem { text-align: left; }
#chanModal .bkitem.on { background: #ecfdf5; border-color: #10b981; font-weight: 700; }
#chanModal .bkform { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#chanModal .bkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#chanModal .bkrow .lab { font-weight: 700; min-width: 110px; }
#chanModal .bkc { display: inline-flex; flex-direction: column; align-items: center; font-size: 11px; }
#chanModal .bkc input { width: 34px; height: 28px; padding: 0; border: 1px solid #d1d5db; border-radius: 6px; }
#chanModal .gbtns { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
@media (max-width: 700px) { #chanModal .bkwrap { grid-template-columns: 1fr; } #chanModal .bkrow .lab { min-width: 0; width: 100%; } }

/* v0.9.25 N1 편집기 머리글 키트 칸 — 체크 칸이 100% 폭으로 글자를 덮지 않게 · 폰에서도 보이게 */
#ed .edtop #edBrandBox label { display: inline-flex; align-items: center; gap: 3px; margin: 0; color: #e6e8ec; }
#ed .edtop #edBrandBox input[type=checkbox] { width: auto; margin: 0; padding: 0; }
#ed .edtop #edBrandBox .hint { display: inline; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v0.9.28 N4 그림 재사용 권유 창 */
#reuseModal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9800; padding: 16px; }
#reuseModal .gbox { background: #fff; color: #111; border-radius: 12px; width: 100%; max-width: 520px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; }
#reuseModal .hint { color: #6b7280; font-size: 12px; }
#reuseModal .gbtns { display: flex; gap: 8px; flex-wrap: wrap; }