:root{
  --bg:#14151a; --panel:#1c1e26; --panel2:#23262f; --line:#2e323d;
  --fg:#e6e8ee; --muted:#9aa1b1; --accent:#6ea8fe; --accent2:#3d7ff0;
  --ok:#4ade80; --warn:#fbbf24; --err:#f87171;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Hiragino Sans",sans-serif;
}
h3{margin:0 0 8px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
h4{margin:12px 0 6px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.sub{font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted)}
.hint{color:var(--muted); font-size:11.5px; margin:6px 0 0}
.spacer{flex:1}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; gap:16px; padding:10px 16px;
  border-bottom:1px solid var(--line); background:var(--panel);
}
.brand{font-weight:700; letter-spacing:.02em}
.brand span{font-weight:400; color:var(--muted); margin-left:6px}
.status{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--warn); box-shadow:0 0 8px currentColor}
.dot.ready{background:var(--ok)} .dot.err{background:var(--err)} .dot.busy{background:var(--accent)}

/* ---------- layout ---------- */
.layout{display:flex; gap:12px; padding:12px; align-items:flex-start; min-height:calc(100vh - 49px)}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px}
.controls{width:360px; flex:none; position:sticky; top:12px; max-height:calc(100vh - 73px); overflow:auto}
.main{flex:1; min-width:0; display:flex; flex-direction:column; gap:12px}
.controls section{margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.controls section:last-of-type{border-bottom:none}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:6px; margin-bottom:14px}
.tab{
  flex:1; padding:9px 8px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel2); color:var(--muted); cursor:pointer; font-size:12.5px;
}
.tab.active{background:var(--accent2); border-color:var(--accent2); color:#fff; font-weight:600}
.viewtabs{display:flex; gap:4px}
.vt{
  padding:5px 10px; border-radius:6px; border:1px solid var(--line);
  background:var(--panel2); color:var(--muted); cursor:pointer; font-size:11.5px;
}
.vt.active{background:var(--accent2); border-color:var(--accent2); color:#fff}

/* ---------- samples ---------- */
.samples{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.samples .s{
  position:relative; aspect-ratio:1; border-radius:7px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; background:#000;
}
.samples .s img{width:100%;height:100%;object-fit:contain; display:block}
.samples .s.sel{border-color:var(--accent)}
.samples .s .cap{
  position:absolute; left:0; right:0; bottom:0; font-size:9px; padding:2px 3px;
  background:rgba(0,0,0,.65); color:#ddd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- form ---------- */
textarea,input[type=number],input[type=text],select{
  width:100%; background:var(--panel2); color:var(--fg); border:1px solid var(--line);
  border-radius:7px; padding:7px 9px; font:inherit; font-size:12.5px;
}
textarea{resize:vertical; line-height:1.45}
select{cursor:pointer}
input[type=range]{width:100%; accent-color:var(--accent)}
.field{margin:10px 0}
.field label{display:block; color:var(--muted); font-size:11.5px; margin-bottom:4px}
.field label b{color:var(--fg); font-weight:600}
.field.grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.seedrow{display:flex; gap:6px}
.seedrow input{flex:1}
.row{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap}
.check{display:flex; align-items:center; gap:7px; margin:8px 0; cursor:pointer; font-size:12.5px}
.check input{accent-color:var(--accent); width:15px; height:15px}
details{margin-top:10px}
summary{cursor:pointer; color:var(--muted); font-size:11.5px; padding:4px 0}

button,.filebtn,a.mini{
  border-radius:7px; border:1px solid var(--line); background:var(--panel2);
  color:var(--fg); cursor:pointer; font:inherit;
}
.mini{padding:5px 10px; font-size:11.5px; text-decoration:none; display:inline-block}
.mini:hover{border-color:var(--accent)}
.mini[disabled]{opacity:.45; cursor:default}
.primary{
  width:100%; padding:11px; font-size:14px; font-weight:600; margin-top:4px;
  background:var(--accent2); border-color:var(--accent2); color:#fff;
}
.primary:hover{background:#4a8bf5}
.primary:disabled{opacity:.5; cursor:default}
.primary-sm{background:var(--accent2); border-color:var(--accent2); color:#fff}
.filebtn{padding:6px 12px; font-size:11.5px}

/* ---------- progress ---------- */
.progress{margin-top:10px; display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--muted)}
.bar{flex:1; height:6px; background:var(--panel2); border-radius:3px; overflow:hidden}
.bar i{display:block; height:100%; width:0; background:var(--accent); transition:width .15s}

/* ---------- result ---------- */
.panelhead{display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap}
.panelhead h3{margin:0}
.panelhead select{width:auto; min-width:180px; max-width:260px}
.resultbody{display:flex; gap:12px; align-items:flex-start}
.preview{
  position:relative; flex:none; width:420px; height:840px; border-radius:8px;
  border:1px solid var(--line); overflow:hidden; display:flex; align-items:center; justify-content:center;
  touch-action:none;
}
.preview img{
  max-width:100%; max-height:100%; display:block;
  transform-origin:center center; will-change:transform;
}
.preview.zoomed{cursor:grab}
.preview.zoomed.panning{cursor:grabbing}
.zoomctl{display:flex; align-items:center; gap:4px}
.zoomctl input{width:58px; text-align:right; padding:4px 6px; font-size:11.5px}
.zoomctl .pct{color:var(--muted); font-size:11.5px; margin-right:2px}
.zoomctl .mini{padding:4px 9px; min-width:28px}
.checker{
  background-image:
    linear-gradient(45deg,#3a3d47 25%,transparent 25%),
    linear-gradient(-45deg,#3a3d47 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#3a3d47 75%),
    linear-gradient(-45deg,transparent 75%,#3a3d47 75%);
  background-size:20px 20px;
  background-position:0 0,0 10px,10px -10px,-10px 0;
  background-color:#2b2e37;
}
.placeholder{position:absolute; color:var(--muted); font-size:12px}
.timings{flex:1; min-width:0}
.timings .fold{margin:0 0 8px; border:1px solid var(--line); border-radius:8px; background:var(--panel2)}
.timings .fold > summary{
  list-style:none; cursor:pointer; padding:7px 10px; user-select:none;
  font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:8px;
}
.timings .fold > summary::-webkit-details-marker{display:none}
.timings .fold > summary::before{
  content:'▸'; font-size:10px; color:var(--muted); transition:transform .12s; display:inline-block;
}
.timings .fold[open] > summary::before{transform:rotate(90deg)}
.timings .fold > summary:hover{color:var(--fg)}
.timings .foldsum{
  margin-left:auto; text-transform:none; letter-spacing:0; color:var(--accent);
  font-size:11.5px; font-variant-numeric:tabular-nums;
}
.timings .fold > table{padding:0 10px 8px}
.timings table{width:100%; border-collapse:collapse; font-size:11.5px}
.timings td{padding:3px 6px; border-bottom:1px solid var(--line); vertical-align:top}
.timings td:first-child{color:var(--muted); white-space:nowrap; width:45%}
.timings td:last-child{text-align:right; font-variant-numeric:tabular-nums}
.timings tr.total td{font-weight:700; color:var(--accent); border-bottom:none}
.timings td.wrap{text-align:left; word-break:break-all; white-space:normal}

/* ---------- fit ---------- */
.fitbody{display:flex; gap:12px; align-items:stretch}
.stagewrap{
  position:relative; flex:1; min-width:0; height:560px; border-radius:8px;
  border:1px solid var(--line); background:#20222a; overflow:hidden;
}
.stagewrap canvas{display:block; width:100%; height:100%; touch-action:none; cursor:default}
.stagehint{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:12.5px; text-align:center; padding:20px; pointer-events:none;
}
/* 클래스의 display:flex 가 [hidden] 기본값(display:none)을 덮어써서 안 사라진다. */
.stagehint[hidden]{display:none}
.stageinfo{
  position:absolute; left:8px; bottom:6px; color:var(--muted); font-size:11px;
  background:rgba(20,21,26,.7); padding:2px 7px; border-radius:5px; pointer-events:none;
}
.stagehint b{color:var(--fg)}
.fitctl{width:250px; flex:none}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--panel2); border:1px solid var(--line); border-radius:8px;
  padding:10px 16px; font-size:12.5px; z-index:50; box-shadow:0 8px 28px rgba(0,0,0,.5);
  display:flex; align-items:center; gap:12px;
}
.toast[hidden]{display:none}
.toast.err{border-color:var(--err); color:var(--err)}

@media (max-width:1500px){
  .resultbody{flex-direction:column}
  .preview{width:100%; height:720px}
}
@media (max-width:1100px){
  .layout{flex-direction:column}
  .controls{width:100%; position:static; max-height:none}
  .fitbody{flex-direction:column}
  .fitctl{width:100%}
}

/* ---------- 트리거 워드 ---------- */
.triggerbar{display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap}
.triggerbar code{
  background:#2b3550; color:var(--accent); border:1px solid #35507e;
  padding:3px 8px; border-radius:6px; font-size:11.5px; font-weight:600;
}
.triggerbar .hint{margin:0}
.presets{margin-top:6px; gap:5px}
.presets .mini{padding:4px 9px}
.presets .mini.on{border-color:var(--accent); color:var(--accent)}

/* ---------- T2I 예시 프롬프트 목록 ---------- */
.promptlist{display:flex; flex-direction:column; gap:4px; max-height:200px; overflow:auto}
.promptlist button{
  text-align:left; padding:6px 9px; font-size:11.5px; line-height:1.35;
  border-radius:6px; border:1px solid var(--line); background:var(--panel2); color:var(--fg);
}
.promptlist button:hover{border-color:var(--accent)}
.promptlist button.sel{border-color:var(--accent); background:#232c40}
.promptlist .tr{display:block; color:var(--muted); font-size:10.5px; margin-top:1px}

/* ---------- 언어 선택 ---------- */
.langsel{display:flex; gap:4px}
.langsel .lang{
  padding:3px 8px; font-size:17px; line-height:1.2; border-radius:7px;
  border:1px solid var(--line); background:var(--panel2); cursor:pointer;
  filter:grayscale(0.7) opacity(0.65); transition:filter .12s, border-color .12s;
}
.langsel .lang:hover{filter:none; border-color:var(--accent)}
.langsel .lang.active{filter:none; border-color:var(--accent); background:#232c40}

/* ---------- 생성 중 오버레이 ---------- */
.overlay{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  background:rgba(16,17,22,.78); backdrop-filter:blur(3px);
}
.overlay[hidden]{display:none}
.ov-card{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:22px 30px; border-radius:12px; background:var(--panel);
  border:1px solid var(--line); box-shadow:0 12px 40px rgba(0,0,0,.55); min-width:260px;
}
.ov-spinner{
  width:30px; height:30px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent);
  animation:ovspin .8s linear infinite;
}
@keyframes ovspin{to{transform:rotate(360deg)}}
.ov-title{font-size:13.5px; font-weight:600}
.ov-sub{font-size:11.5px; color:var(--muted); text-align:center; min-height:1em}
.ov-bar{width:100%; height:5px; border-radius:3px; background:var(--panel2); overflow:hidden}
.ov-bar i{display:block; height:100%; width:0; background:var(--accent); transition:width .15s}
.ov-bar.indeterminate i{
  width:35%; animation:ovslide 1.1s ease-in-out infinite;
}
@keyframes ovslide{0%{margin-left:-35%}100%{margin-left:100%}}

/* ---------- 모드 토글 (편의 / 전문가) — 두 화면 상단에 같은 모양으로 둔다 ---------- */
.modetoggle{
  display:flex; gap:3px; padding:3px; border-radius:999px;
  background:var(--panel2, var(--card2)); border:1px solid var(--line);
}
.modetoggle .mt{
  padding:5px 13px; border-radius:999px; font-size:12px; font-weight:600;
  color:var(--muted); text-decoration:none; white-space:nowrap; line-height:1.5;
}
.modetoggle .mt:hover{color:var(--fg)}
.modetoggle .mt.active{background:var(--accent2); color:#fff}

/* ---------- 로그인 (사내 LDAP) ---------- */
.loginwrap{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--bg);
  background-image:
    radial-gradient(1100px 520px at 50% -10%, rgba(110,168,254,.16), transparent 60%),
    radial-gradient(760px 420px at 90% 110%, rgba(167,139,250,.13), transparent 60%);
}
.loginwrap[hidden]{display:none}
.logincard{
  width:100%; max-width:352px; padding:30px 26px 24px;
  border-radius:20px; border:1px solid var(--line);
  background:var(--panel, var(--card)); box-shadow:0 20px 60px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:12px;
}
.loginbrand{font-size:26px; font-weight:800; letter-spacing:.06em; text-align:center}
.loginsub{
  margin:-8px 0 8px; text-align:center; font-size:12.5px; color:var(--muted);
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.loginfield{display:flex; flex-direction:column; gap:5px}
.loginfield span{font-size:11.5px; color:var(--muted)}
.loginfield input{
  width:100%; padding:11px 13px; font:inherit; font-size:14.5px;
  background:var(--panel2, var(--card2)); color:var(--fg);
  border:1px solid var(--line); border-radius:11px;
}
.loginfield input:focus{outline:none; border-color:var(--accent)}
.logincard .cta{
  width:100%; min-height:48px; margin-top:6px; border:none; border-radius:13px;
  font:inherit; font-size:15px; font-weight:700; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#4a8bf5,#3d7ff0 55%,#5b6ef0);
}
.logincard .cta:disabled{opacity:.6; cursor:default}
.loginmsg{margin:2px 0 0; min-height:1.2em; font-size:12px; color:var(--muted); text-align:center}
.loginmsg.err{color:var(--err)}
.loginnote{margin:2px 0 0; font-size:11px; color:var(--muted); text-align:center; opacity:.8}

.userchip{
  padding:5px 11px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel2, var(--card2)); color:var(--muted);
  font:inherit; font-size:11.5px; cursor:pointer; white-space:nowrap;
}
.userchip:hover{color:var(--fg); border-color:var(--accent)}
.userchip[hidden]{display:none}

.logincard{position:relative}
.langsel.loginlang{position:absolute; top:14px; right:14px}
.langsel.loginlang .lang{padding:3px 7px; font-size:14px}