/* Image screens 이미지 / 갤러리 / 그림 (2026-10-23): the design of the v2 mock-up
   (sessions/charchat_production_system/work/2026-10/2026-10-23-image-userflow-design/prototype-v2.html),
   scoped to .uf and drawn with this app's colour tokens so the dark theme follows the app. */
.uf { --u: 15px; font-size: calc(1 * var(--u)); line-height: 1.5;
  --surface: var(--panel); --sunk: var(--off); --line-strong: var(--line); --faint: var(--muted);
  --accent: var(--live); --accent-soft: var(--live-bg); --accent-text: var(--panel); --chip: var(--off);
  --warn-bg: var(--review-bg); --warn-line: var(--review); --ok: var(--done); --busy: var(--live); --idle: var(--line);
  --changed: var(--review); --example: #8a4fd0;
  --src-style: #8a4fd0; --src-scene: #1f8a8a; --src-look: #c4610f; --src-outfit: var(--live);
  --r: calc(.75 * var(--u)); --gap: calc(1 * var(--u)); max-width: calc(72 * var(--u)); margin: 0 auto; }
:root.dark .uf { --example: #c49cf5; --src-style: #c49cf5; --src-scene: #5fc9c9; --src-look: #f0a050; }
.uf button { padding: 0; white-space: normal; }
.uf .btn { padding: calc(.45 * var(--u)) calc(.8 * var(--u)); white-space: nowrap; }
.uf .btn.small { padding: calc(.25 * var(--u)) calc(.6 * var(--u)); }
.uf .hint { font-size: calc(.8125 * var(--u)); color: var(--muted); }
.uf .err { color: var(--alert); font-size: calc(.8125 * var(--u)); margin-top: calc(.4 * var(--u)); }
.uf .cands { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--u)); margin-top: calc(.5 * var(--u)); }
.uf .cand { width: calc(7 * var(--u)); display: flex; flex-direction: column; gap: calc(.25 * var(--u)); font-size: calc(.75 * var(--u)); }
.uf .cand img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: calc(.4 * var(--u)); background: var(--sunk); }
.uf .menu .opt[disabled] { opacity: .5; cursor: default; }

.uf { max-width: calc(72 * var(--u)); margin: 0 auto; padding: calc(1 * var(--u)) calc(1 * var(--u)) calc(4 * var(--u)); }
.uf .crumbs { display: flex; flex-wrap: wrap; gap: calc(.25 * var(--u)) calc(.5 * var(--u)); font-size: calc(.875 * var(--u)); color: var(--muted); margin-bottom: calc(.75 * var(--u)); }
.uf .crumbs a { text-decoration: none; }
.uf .crumbs a.here { color: var(--text); font-weight: 600; }
.uf .crumbs .sep { opacity: .5; }
.uf h1 { font-size: calc(1.375 * var(--u)); margin: 0 0 calc(1 * var(--u)); }
.uf h2 { font-size: calc(.9375 * var(--u)); margin: 0; font-weight: 700; }
.uf .panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: calc(1 * var(--u)); }
.uf .muted { color: var(--muted); }
.uf .small { font-size: calc(.875 * var(--u)); }
.uf .ex { display: inline-block; font-size: calc(.6875 * var(--u)); font-weight: 600; color: var(--example); border: 1px solid currentColor; border-radius: 999px; padding: 0 calc(.4 * var(--u)); margin-left: calc(.3 * var(--u)); vertical-align: middle; white-space: nowrap; line-height: 1.4; }
.uf .btn { display: inline-flex; align-items: center; gap: calc(.35 * var(--u)); border: 1px solid var(--line-strong); background: var(--surface); border-radius: calc(.55 * var(--u)); padding: calc(.45 * var(--u)) calc(.8 * var(--u)); cursor: pointer; text-decoration: none; font-size: calc(.9375 * var(--u)); white-space: nowrap; }
.uf .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.uf .btn.small { font-size: calc(.8125 * var(--u)); padding: calc(.25 * var(--u)) calc(.6 * var(--u)); }
.uf .btn.quiet { border-color: transparent; background: transparent; color: var(--muted); }
.uf .btn[disabled] { opacity: .45; cursor: default; }
.uf .actions { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--u)); }
.uf .sechead { display: flex; align-items: center; gap: calc(.5 * var(--u)); flex-wrap: wrap; margin-bottom: calc(.6 * var(--u)); }
.uf .sechead .grow { flex: 1; }

/* 상태 표시: 프롬프트 됨 / 프롬프팅 중 / 아직 */
.uf .pst { display: inline-flex; align-items: center; gap: calc(.3 * var(--u)); font-size: calc(.75 * var(--u)); color: var(--muted); white-space: nowrap; }
.uf .pst i { width: calc(.5 * var(--u)); height: calc(.5 * var(--u)); border-radius: 50%; display: inline-block; background: var(--idle); }
.uf .pst.done i { background: var(--ok); }
.uf .pst.busy { color: var(--busy); font-weight: 600; }
.uf .pst.busy i { background: none; border: 2px solid var(--busy); border-right-color: transparent; width: calc(.7 * var(--u)); height: calc(.7 * var(--u)); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 칸: 프리셋 이름 + 흐린 프롬프트 한 줄 */
.uf .cell { position: relative; padding: calc(.55 * var(--u)) 0; border-top: 1px solid var(--line); }
.uf .cell:first-child { border-top: 0; }
.uf .cell .top { display: flex; align-items: center; gap: calc(.5 * var(--u)); min-width: 0; }
.uf .cell .lab { width: calc(4.25 * var(--u)); flex: none; font-size: calc(.8125 * var(--u)); color: var(--muted); }
.uf .cell .grow { flex: 1; min-width: 0; }
.uf .pick { display: inline-flex; align-items: center; gap: calc(.3 * var(--u)); max-width: 100%; border: 1px solid transparent; background: transparent; border-radius: calc(.45 * var(--u)); padding: calc(.15 * var(--u)) calc(.4 * var(--u)); margin-left: calc(-.4 * var(--u)); cursor: pointer; font-weight: 600; text-align: left; }
.uf .pick:hover, .uf .pick.on { background: var(--sunk); border-color: var(--line); }
.uf .pick .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uf .pick .car { color: var(--faint); font-weight: 400; font-size: calc(.75 * var(--u)); }
.uf .pick.plain { font-weight: 500; color: var(--muted); cursor: default; }
.uf .tagline { display: block; width: 100%; text-align: left; border: 0; background: none; padding: calc(.1 * var(--u)) 0 0; margin-left: calc(4.75 * var(--u)); width: calc(100% - calc(4.75 * var(--u))); cursor: pointer; color: var(--faint); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: calc(.75 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uf .tagline:hover { color: var(--muted); }
.uf .tagline .op { font-family: inherit; color: var(--faint); }
.uf .cell.edited { box-shadow: inset 3px 0 0 var(--changed); padding-left: calc(.6 * var(--u)); margin-left: calc(-.6 * var(--u)); }
.uf .below { margin: calc(.4 * var(--u)) 0 calc(.2 * var(--u)) calc(4.75 * var(--u)); }
.uf .chips { display: flex; flex-wrap: wrap; gap: calc(.3 * var(--u)); }
.uf .chip { display: inline-flex; align-items: center; background: var(--chip); border-radius: calc(.4 * var(--u)); padding: calc(.1 * var(--u)) calc(.45 * var(--u)); font-size: calc(.8125 * var(--u)); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.uf .chip.new { box-shadow: inset 0 0 0 1px var(--changed); }
.uf .chip.gone { text-decoration: line-through; opacity: .5; }
.uf .chip button { border: 0; background: none; color: var(--muted); padding: 0 0 0 calc(.3 * var(--u)); cursor: pointer; }
.uf .addtag { border: 1px dashed var(--line-strong); background: transparent; color: var(--muted); border-radius: calc(.4 * var(--u)); padding: calc(.1 * var(--u)) calc(.45 * var(--u)); font-size: calc(.8125 * var(--u)); cursor: pointer; }
.uf .changed { margin-top: calc(.5 * var(--u)); display: flex; flex-wrap: wrap; align-items: center; gap: calc(.4 * var(--u)) calc(.5 * var(--u)); font-size: calc(.8125 * var(--u)); }
.uf .changed .badge { color: var(--changed); font-weight: 700; }
.uf .impact { margin-top: calc(.6 * var(--u)); border: 1px solid var(--warn-line); background: var(--warn-bg); border-radius: calc(.6 * var(--u)); padding: calc(.65 * var(--u)) calc(.8 * var(--u)); font-size: calc(.875 * var(--u)); }
.uf .impact .actions { margin-top: calc(.5 * var(--u)); }
.uf .why { font-size: calc(.75 * var(--u)); color: var(--faint); margin-top: calc(.15 * var(--u)); }
.uf .waiting { font-size: calc(.75 * var(--u)); color: var(--busy); margin: calc(.1 * var(--u)) 0 0 calc(4.75 * var(--u)); }

/* 고르는 목록 (그 자리에서 펼침) */
.uf .menu { margin: calc(.45 * var(--u)) 0 calc(.2 * var(--u)) calc(4.75 * var(--u)); border: 1px solid var(--line-strong); background: var(--surface); border-radius: calc(.6 * var(--u)); box-shadow: 0 6px 18px rgba(0,0,0,.08); overflow: hidden; max-width: calc(30 * var(--u)); }
.uf .menu input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: calc(.55 * var(--u)) calc(.75 * var(--u)); outline: none; font-size: calc(.875 * var(--u)); }
.uf .menu .hd { font-size: calc(.6875 * var(--u)); color: var(--faint); padding: calc(.4 * var(--u)) calc(.75 * var(--u)) calc(.1 * var(--u)); }
.uf .menu .opt { display: flex; gap: calc(.5 * var(--u)); align-items: baseline; width: 100%; border: 0; background: none; text-align: left; padding: calc(.4 * var(--u)) calc(.75 * var(--u)); cursor: pointer; }
.uf .menu .opt:hover { background: var(--sunk); }
.uf .menu .opt .ck { width: calc(1 * var(--u)); flex: none; color: var(--accent); }
.uf .menu .opt .t { flex: 1; min-width: 0; }
.uf .menu .opt .t small { display: block; color: var(--muted); font-size: calc(.75 * var(--u)); }
.uf .menu .opt .n { color: var(--faint); font-size: calc(.75 * var(--u)); white-space: nowrap; }
.uf .menu .make { border-top: 1px solid var(--line); }
.uf .menu .make .opt { color: var(--accent); font-weight: 600; }
.uf .menu .make .opt.dim { color: var(--muted); font-weight: 400; }

/* 3층 */
.uf .one { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.uf .one > * { min-width: 0; }
.uf .pic { order: -1; }
.uf .pic img { width: 100%; max-height: min(45vh, calc(26 * var(--u))); object-fit: contain; display: block; border-radius: var(--r); background: var(--sunk); }
.uf .pic .state { margin-top: calc(.5 * var(--u)); font-size: calc(.875 * var(--u)); }
.uf .pic .state b { color: var(--ok); }
.uf .flow { display: flex; align-items: center; gap: calc(.4 * var(--u)); color: var(--faint); font-size: calc(.75 * var(--u)); margin: calc(.1 * var(--u)) 0 calc(.4 * var(--u)); }
.uf .flow::before, .uf .flow::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.uf .scene { margin: calc(.35 * var(--u)) 0 0 calc(4.75 * var(--u)); border-left: 2px solid var(--line); padding-left: calc(.65 * var(--u)); }
.uf .scene .cell { padding: calc(.3 * var(--u)) 0; border-top: 0; }
.uf .cell.inl .grow { display: flex; align-items: baseline; gap: calc(.5 * var(--u)); min-width: 0; }
.uf .cell.inl .pick { font-size: calc(.875 * var(--u)); flex: none; }
.uf .cell.inl .pick.plain { font-size: calc(.75 * var(--u)); font-style: normal; color: var(--faint); }
.uf .cell.inl .grow .tagline { margin: 0; width: auto; flex: 1; min-width: 0; padding: 0; }
.uf .sentence-in { width: 100%; border: 1px solid var(--line-strong); background: var(--surface); border-radius: calc(.45 * var(--u)); padding: calc(.35 * var(--u)) calc(.55 * var(--u)); font-size: calc(.875 * var(--u)); }
.uf .tagline.sentence { font-family: inherit; font-size: calc(.8125 * var(--u)); }
.uf .scene .cell .lab { width: calc(3 * var(--u)); }
.uf .scene .tagline, .uf .scene .below, .uf .scene .menu, .uf .scene .waiting { margin-left: calc(3.5 * var(--u)); }
.uf .scene .tagline { width: calc(100% - calc(3.5 * var(--u))); }
.uf .scene .cell.edited { margin-left: 0; padding-left: calc(.5 * var(--u)); }
.uf .prompt summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: calc(.5 * var(--u)); }
.uf .prompt summary::-webkit-details-marker { display: none; }
.uf .prompt summary .arrow { color: var(--faint); transition: transform .15s; }
.uf .prompt[open] summary .arrow { transform: rotate(90deg); }
.uf .prompt .body { margin-top: calc(.6 * var(--u)); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: calc(.75 * var(--u)); line-height: 1.7; word-break: break-word; }
.uf .prompt .body .k { font-family: inherit; display: block; color: var(--muted); font-size: calc(.6875 * var(--u)); margin-top: calc(.4 * var(--u)); }
.uf .seg { border-bottom: 2px solid transparent; }
.uf .seg.k-style { border-color: var(--src-style); } .seg.k-scene { border-color: var(--src-scene); }
.uf .seg.k-look { border-color: var(--src-look); } .seg.k-outfit { border-color: var(--src-outfit); }
.uf .seg.k-common { color: var(--faint); }
.uf .legend { display: flex; flex-wrap: wrap; gap: calc(.25 * var(--u)) calc(.8 * var(--u)); font-size: calc(.6875 * var(--u)); color: var(--muted); margin-top: calc(.5 * var(--u)); font-family: inherit; }
.uf .legend span::before { content: ""; display: inline-block; width: calc(.8 * var(--u)); height: 2px; vertical-align: middle; margin-right: calc(.3 * var(--u)); background: currentColor; }
.uf .legend .k-style { color: var(--src-style); } .legend .k-scene { color: var(--src-scene); } .legend .k-look { color: var(--src-look); } .legend .k-outfit { color: var(--src-outfit); }
.uf .drawbar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.5 * var(--u)); margin-top: calc(.9 * var(--u)); }
.uf .notice { border: 1px solid var(--warn-line); background: var(--warn-bg); border-radius: calc(.6 * var(--u)); padding: calc(.55 * var(--u)) calc(.8 * var(--u)); font-size: calc(.875 * var(--u)); text-decoration: none; display: block; margin-bottom: calc(.75 * var(--u)); }

/* 실행 단계 줄 */
.uf .run { margin-bottom: var(--gap); }
.uf .steps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: calc(.4 * var(--u)); margin-top: calc(.6 * var(--u)); }
.uf .st { position: relative; border: 1px solid var(--line); border-radius: calc(.6 * var(--u)); padding: calc(.55 * var(--u)) calc(.6 * var(--u)); background: var(--sunk); display: flex; flex-direction: column; gap: calc(.2 * var(--u)); min-width: 0; }
.uf .st .no { font-size: calc(.6875 * var(--u)); color: var(--faint); }
.uf .st .nm { font-weight: 600; font-size: calc(.875 * var(--u)); line-height: 1.3; }
.uf .st .sub { font-size: calc(.75 * var(--u)); color: var(--muted); }
.uf .st.busy { border-color: var(--busy); background: var(--accent-soft); }
.uf .st .till { margin-top: auto; align-self: flex-start; border: 0; background: none; padding: calc(.15 * var(--u)) 0 0; color: var(--accent); font-size: calc(.75 * var(--u)); cursor: pointer; }
.uf .st a.nm { text-decoration: none; }
.uf .st img { width: calc(2.5 * var(--u)); aspect-ratio: 2/3; object-fit: cover; border-radius: calc(.35 * var(--u)); }

/* 2층 목록 */
.uf .set { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.uf .set > * { min-width: 0; }
.uf .list .cell .lab { display: none; }
.uf .list .tagline, .uf .list .below, .uf .list .menu, .uf .list .waiting { margin-left: 0; width: 100%; }
.uf .sit .top { align-items: flex-start; }
.uf .sit img, .uf .sit .hole { width: calc(3.25 * var(--u)); aspect-ratio: 2/3; object-fit: cover; border-radius: calc(.4 * var(--u)); flex: none; }
.uf .sit .hole { border: 1px dashed var(--busy); background: var(--accent-soft); display: grid; place-items: center; }
.uf .sit .hole i { width: calc(1 * var(--u)); height: calc(1 * var(--u)); border-radius: 50%; border: 2px solid var(--busy); border-right-color: transparent; animation: spin .9s linear infinite; }
.uf .sit .usage { font-weight: 600; text-decoration: none; display: block; line-height: 1.35; }
.uf .sit .tagline, .uf .sit .menu, .uf .sit .below, .uf .sit .waiting { margin-left: 0; width: 100%; }
.uf .wear { display: flex; flex-wrap: wrap; gap: calc(.25 * var(--u)); margin-top: calc(.25 * var(--u)); }
.uf .wear .pick { font-weight: 500; font-size: calc(.8125 * var(--u)); margin-left: 0; border-color: var(--line); padding: calc(.05 * var(--u)) calc(.4 * var(--u)); }
.uf .drift { font-size: calc(.75 * var(--u)); font-weight: 600; color: var(--changed); }
.uf .cnt { color: var(--muted); font-size: calc(.8125 * var(--u)); white-space: nowrap; }
.uf .newrow { display: flex; gap: calc(.5 * var(--u)); margin-top: calc(.5 * var(--u)); }
.uf .newrow input { flex: 1; min-width: 0; border: 1px dashed var(--line-strong); background: transparent; border-radius: calc(.55 * var(--u)); padding: calc(.4 * var(--u)) calc(.7 * var(--u)); font-size: calc(.875 * var(--u)); }
.uf .more { display: block; padding-top: calc(.55 * var(--u)); border-top: 1px solid var(--line); color: var(--muted); font-size: calc(.875 * var(--u)); text-decoration: none; }

@media (max-width: 29.99rem) {
  .uf .pst.done .lbl { display: none; }
  .uf .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uf .st .sub .pst { white-space: normal; }
  .uf .sit .menu { margin-left: 0; width: 100%; max-width: none; }
  .uf .cell .lab { width: calc(3.5 * var(--u)); }
  .uf .tagline, .uf .below, .uf .menu, .uf .waiting { margin-left: calc(4 * var(--u)); width: calc(100% - calc(4 * var(--u))); }
  .uf .menu { width: auto; }
  .uf .scene { margin-left: 0; }
  .uf .scene .tagline, .uf .scene .below, .uf .scene .menu, .uf .scene .waiting { margin-left: calc(3.5 * var(--u)); }
  .uf .st { padding: calc(.5 * var(--u)) calc(.45 * var(--u)); }
  .uf .st .nm { font-size: calc(.8125 * var(--u)); }
}
@media (min-width: 48rem) {
  .uf { padding: calc(1.5 * var(--u)) calc(1.5 * var(--u)) calc(4 * var(--u)); }
  .uf .one { grid-template-columns: minmax(0, 3fr) minmax(calc(15 * var(--u)), 2fr); align-items: start; }
  .uf .pic { order: 2; position: sticky; top: calc(1 * var(--u)); }
  .uf .pic img { max-height: min(85vh, calc(60 * var(--u))); }
  .uf .sit img, .uf .sit .hole { width: calc(4 * var(--u)); }
}
@media (min-width: 80rem) {
  .uf { padding: calc(2 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u)); }
  .uf h1 { font-size: calc(1.625 * var(--u)); }
  .uf .set { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
}
@media (min-width: 120rem) {
  .uf { max-width: calc(80 * var(--u)); }
}
.uf .steps.n3 { --n: 3; } .uf .steps.n4 { --n: 4; }
@media (max-width: 29.99rem) { .uf .steps.n3 { grid-template-columns: minmax(0, 1fr); } }
.uf .mb-xs { margin-bottom: calc(.3 * var(--u)); align-items: center; }
.uf .drawbar input { border: 1px solid var(--line); background: var(--field); border-radius: calc(.4 * var(--u)); padding: calc(.2 * var(--u)) calc(.4 * var(--u)); }
.uf .drawbar .grow { flex: 1; min-width: calc(10 * var(--u)); display: flex; gap: calc(.4 * var(--u)); align-items: center; }
.uf .drawbar .grow input { flex: 1; min-width: 0; }
.uf .addtag { width: calc(6 * var(--u)); }
.uf .stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.uf .mt { margin-top: var(--gap); }