/* ============================================================
   밝은 화면 · 새 레이아웃 (박종우 UI/UX 개선)
   ── 1. 색 (항상 적용 — 로그인 화면 포함)
   ── 2. 부품 색 보정 (기존 CSS 에 직접 적힌 어두운 색)
   ── 3. 새 레이아웃 — body.ui2 일 때만 (src/app/13-layout.js 가 붙임)
   ── 4. 휴대폰
   기존 CSS 는 고치지 않고 이 파일에서 덮어씁니다.
   ============================================================ */

/* ---------- 1. 색 ---------- */
:root{
  --field:#ffffff;
  --field-2:#ffffff;
  --field-3:#f5f7fa;
  --ink:#1f2937;
  --ink-dim:#4b5563;
  --ink-faint:#8a94a4;
  --brass:#5b6b80;
  --brass-dim:#cfd6e0;
  --accent:#f26b1d;
  --accent-dim:#f5b48d;
  --line:#e8ecf1;
  --line-2:#d8dee6;
  /* 새로 쓰는 색 */
  --primary:#1f6feb;
  --primary-hover:#1a5fcc;
  --primary-soft:#e9f1fe;
  --bg:#eef1f5;
  --hover:#f0f3f7;
  --ok:#16a34a;
  --bad:#dc2626;
  --radius:8px;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow-lg:0 10px 30px rgba(15,23,42,.14);

  /* 도면 캔버스 (src/app 의 CV("이름") 이 읽는 값) */
  --cv-grid:rgba(100,116,139,.10);
  --cv-grid-major:rgba(100,116,139,.22);
  --cv-axis:rgba(71,85,105,.38);
  --cv-ruler-bg:#f7f8fa;
  --cv-ruler-line:#d8dee6;
  --cv-ruler-tick:rgba(100,116,139,.65);
  --cv-label-bg:rgba(255,255,255,.92);
  --cv-site-line:rgba(242,107,29,.85);
  --cv-site-fill:rgba(242,107,29,.10);
  --cv-site-fill-many:rgba(242,107,29,.08);
  --cv-site-line-many:rgba(242,107,29,.7);
  --cv-cursor:rgba(242,107,29,.95);
  --cv-road:#2f7de1;
  --cv-corr-fill:rgba(22,163,74,.10);
  --cv-corr-line:rgba(22,163,74,.7);
  --cv-corr-ink:#15803d;
  --cv-bld-rgb:242,107,29;
  --cv-bld-line:#c2500c;
  --cv-bld-south:#7c2d12;
  --cv-bld-ink:#431407;
  --cv-bld-ink-2:rgba(67,20,7,.78);
  --cv-dim-gap:#0284c7;
  --cv-dim-light:#16a34a;
  --cv-dim-sun:#7c3aed;
  --cv-dim-bad:#dc2626;
  --cv-dim-dot-ring:rgba(255,255,255,.95);
  --cv-dim-label-bg:rgba(255,255,255,.95);
  --cv-dim-label-ink:#1f2937;
  --cv-v3-bg-top:#e6ecf3;
  --cv-v3-bg-bottom:#f8fafc;
  --cv-v3-grid:rgba(100,116,139,.18);
  --cv-v3-dxf:rgba(100,116,139,.35);
  --cv-v3-site-fill:rgba(242,107,29,.08);
  --cv-v3-site-line:rgba(242,107,29,.9);
  --cv-v3-compass:rgba(71,85,105,.6);
  --cv-v3-compass-ink:#334155;
  --cv-thumb-bg:#f8fafc;
  --cv-thumb-site-fill:rgba(242,107,29,.07);
  --cv-thumb-site-line:rgba(242,107,29,.85);
  --cv-thumb-bld-line:#c2500c;
  --cv-thumb-bld-south:#7c2d12;
  --cv-thumb-bld-ink:#431407;
  --cv-thumb-north:#64748b;
  --cv-site-name:#1f2937;
  --cv-site-name-font:700 14px "Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  --cv-site-area:#1f2937;
  --cv-site-area-font:600 13px "Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  --cv-site-area-dy:15;
  --cv-env-fill:rgba(100,116,139,.06);
  --cv-env-line:rgba(120,90,40,.7);
  --cv-seg-font:600 13px "Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  --cv-ruler-font:500 10.5px "Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  --cv-lib-bg:#f8fafc;
  --cv-lib-fill:rgba(242,107,29,.14);
  --cv-lib-line:#c2500c;
  --cv-lib-lite:#16a34a;
  --cv-lib-lite-arrow:rgba(22,163,74,.8);
  --cv-lib-ink:#64748b;

  /* 한글이 섞인 숫자 · 표기 글꼴 — 고정폭 대신 본문 글꼴 + 같은 폭 숫자 */
  --mono:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
}
body{font-variant-numeric:tabular-nums}
.tgt-k,.tb-k,.lyr-cap,.res-cap{letter-spacing:0}
body{background:var(--bg)}

/* ---------- 2. 부품 색 보정 ---------- */
button{background:var(--field);border:1px solid var(--line-2);color:var(--ink-dim);border-radius:6px}
button:hover{background:var(--hover);color:var(--ink)}
button.on{background:var(--primary);border-color:var(--primary);color:#fff}
button:disabled:hover{color:var(--ink-dim);background:var(--field)}
button:focus-visible,select:focus-visible{outline-color:var(--primary)}
select{background:var(--field);border-radius:6px;color:var(--ink)}
.p-close,.p-close:hover{border:none;background:none}

h2{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
h2::after{background:var(--line);opacity:1}
h2 .cv{color:var(--ink-faint)}
.lyr-cap,.res-cap{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--brass)}
.sub-cap{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:0;color:var(--brass)}
.acc-note{font-family:var(--sans);font-size:11.5px;line-height:1.65;color:var(--ink-dim)}
.acc-note b{color:var(--ink);font-weight:600}

.sw{border-radius:9px;border-color:var(--line-2);background:var(--field-3)}
.sw::after{border-radius:50%;background:#b8c1cd}
.toggle input:checked+.sw{border-color:var(--primary);background:var(--primary)}
.toggle input:checked+.sw::after{background:#fff}

.opt input,.lib-upf input,.ai-box textarea,.libm-tools input{border-radius:6px;background:var(--field)}
.opt input:focus,.lib-upf input:focus,.ai-box textarea:focus,.libm-tools input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}

/* 원본이 다크 고정색으로 바꾼 자리 — 라이트 테마 값으로 되돌립니다
   (base.css / sim.css 의 #fff6e6 · #10151a · #aab3ba 등) */
.opt input,.opt input.txt,select{color:var(--ink);background:var(--field);border-color:var(--line-2)}
.opt input:hover,select:hover{border-color:#b9c7da}
select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.opt label{color:var(--ink-dim)}
.opt .u{color:var(--ink-faint)}
.sub-cap,.lyr-cap{color:var(--ink-faint)}

/* 시뮬레이션 창 · 경고 버튼 */
#simPick{color:#fff;background:var(--primary);border-color:var(--primary);font-weight:700}
#simPick:hover{background:#1a5fd0;border-color:#1a5fd0;color:#fff}
#simReload{color:var(--ink-dim);background:var(--field);border-color:var(--line-2);font-weight:600}
#simReload:hover{color:var(--ink);background:var(--hover);border-color:#b9c7da}
.site-up{color:var(--primary);background:var(--field);border-color:rgba(31,111,235,.45);font-weight:600}
.site-up:hover{color:#fff;background:var(--primary);border-color:var(--primary)}
button.warn-b{color:var(--bad);border-color:rgba(220,38,38,.35);background:var(--field)}
button.warn-b:hover{color:var(--bad);background:rgba(220,38,38,.08);border-color:var(--bad)}

/* 뷰어의 시간대 바꾸기 — 뷰어 막대는 흰 바탕입니다 */
.imgv-bar .imgv-time{
  font-size:13px;padding:7px 10px;border-radius:8px;font-weight:600;
  background:var(--field);border:1px solid var(--primary);color:var(--primary);
}
.imgv-bar .imgv-time:hover{background:var(--primary-soft);border-color:var(--primary)}
.imgv-bar .imgv-time:disabled{opacity:.55;cursor:progress}
.imgv-bar .imgv-time[hidden]{display:none}
/* base.css 의 button{display:flex} 가 hidden 을 이겨서 숨긴 버튼(비교 · 밑그림 보기)이 보이던 것을 막습니다 */
#imgView button[hidden]{display:none}
.imgv-bar .imgv-time option{color:var(--ink);background:#fff;font-weight:400}

/* 상단 막대의 회전 아이콘 — 만드는 중에만 나타납니다
   (전에는 자리를 늘 비워 두어 「다시 생성」 옆이 넓게 비어 보였습니다) */
.imgv-spin{
  width:18px;height:18px;flex:none;margin:0 2px;border-radius:50%;
  border:2.5px solid var(--line-2);border-top-color:var(--accent);
  animation:imgSpin .8s linear infinite;display:none;
}
.imgv-spin.on{display:block}
@keyframes imgSpin{to{transform:rotate(360deg)}}

/* 만드는 중인 컨트롤 — 테두리 안쪽에 띠가 흐릅니다 (너비는 그대로) */
.imgv-bar .imgv-time.busy,.imgv-bar button.busy{
  background-image:linear-gradient(100deg,transparent 30%,var(--primary-soft) 50%,transparent 70%);
  background-size:220% 100%;
  animation:imgFlow 1.3s linear infinite;
}
@keyframes imgFlow{from{background-position:120% 0}to{background-position:-120% 0}}

/* ── 이미지 스타일 템플릿 칩 ───────────────────────────── */
.sty-tpl{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:2px 0 7px}
.sty-tpl > span{font-size:12px;color:var(--ink-faint);margin-right:2px;flex:none}
.sty-tpl button{
  font-size:12px;padding:5px 11px;border-radius:20px;
  background:var(--field);border:1px solid var(--line-2);color:var(--ink-dim);
}
.sty-tpl button:hover{border-color:var(--primary);color:var(--primary);background:var(--field)}
.sty-tpl button[hidden]{display:none}
.sty-tpl .sty-save{color:var(--ink-faint);border-style:dashed}
.sty-tpl .sty-save:hover{color:var(--primary);border-color:var(--primary);border-style:solid}

/* 시뮬레이션 진행 막대 — 요소와 로직은 있는데 스타일이 없어 보이지 않던 것 */
.sim-prog{
  margin:8px 0 2px;height:6px;border-radius:99px;overflow:hidden;
  background:var(--field-3);border:1px solid var(--line);
}
.sim-prog[hidden]{display:none}
.sim-prog > i{
  display:block;height:100%;width:0;border-radius:99px;
  background:var(--primary);transition:width .18s ease-out;
}

.acc-h:hover{background:var(--hover)}
.acc-n{border-radius:4px}
.acc.open .acc-n{color:#fff;background:var(--primary);border-color:var(--primary)}
.acc.open .acc-v{color:var(--primary)}
.tgt,.dxf-sum,.lyr,.res,.empty{border-radius:6px}
.tgt.site{border-color:var(--primary)}
.tgt.site .tgt-v{color:var(--primary)}
.lyr-row:hover,.item:hover{background:var(--hover)}
.item{border-radius:6px;border:1px solid var(--line);border-left-width:3px}
.item.sel{background:var(--primary-soft);border-left-color:var(--primary)}
.item-name{color:var(--brass)}
.item-kind.rel{color:var(--ok);border-color:rgba(22,163,74,.45)}
.item-kind.rel:hover{color:#15803d;border-color:var(--ok)}
.lyr-row input:checked+.lyr-box,.lib-on input:checked+.lyr-box{border-color:var(--primary);background:var(--primary)}
.lyr-box{border-radius:3px}
.res-row.key{background:#fff4ec}

.entry{background:#fff;border-color:var(--accent);border-radius:6px;box-shadow:var(--shadow-lg)}
.site-up{color:var(--primary);border:1px solid rgba(31,111,235,.45);background:var(--primary-soft)}
.site-up:hover{background:#dce9fd;color:var(--primary-hover)}

/* 시뮬레이션 창 */
#sim{background:var(--field);box-shadow:var(--shadow-lg)}
#sim[hidden]{display:none}          /* 기존: display:flex 가 hidden 을 덮어 창이 늘 떠 있던 문제 */
.sim-head{color:var(--primary)}
.sim-head h1{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:14px;font-weight:700}
.lib-item{border-radius:6px;border:1px solid var(--line);border-left:3px solid var(--primary)}
.lib-item.off{border-left-color:var(--line-2)}
.lib-rot:hover{border-color:var(--primary);color:var(--primary)}
.sim-run{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:8px}
.sim-run:hover,.sim-run:disabled:hover{background:var(--primary-hover);color:#fff}
.sim-run:disabled{opacity:.72;cursor:progress}
.ai-box{border-radius:8px}
.ai-on input:checked+i{border-color:var(--primary);background:var(--primary)}
.ai-on i{border-radius:3px}
.ai-keystate.ok{color:var(--ok)}
.ai-stat .bad{color:var(--bad)}
.ai-it.ok b{background:var(--ok);color:#fff}
.sim-ai{border-left-color:var(--ok)}
.sim-ai b,.sim-pref{color:var(--ok)}
.sim-img-b button.has{color:var(--ok);border-color:rgba(22,163,74,.45)}
/* 결과 카드 AI 이미지 버튼 — 만드는 중이면 글자 앞에 회전 아이콘 (큰 보기의 .imgv-spin 과 같은 모양) */
.sim-img-b button.busy{gap:6px;opacity:1;color:var(--accent);border-color:var(--accent)}
.sim-img-b button.busy::before{
  content:"";flex:none;width:12px;height:12px;border-radius:50%;box-sizing:border-box;
  border:2px solid var(--line-2);border-top-color:var(--accent);animation:imgSpin .8s linear infinite;
}
.sim-prog{border-radius:2px}
.sim-prog i{background:var(--primary)}
.sim-stale{border-radius:6px}
.sim-card{border-radius:8px}
.sim-card:hover{border-color:#b9c7da}
.sim-card.on{border-color:var(--primary);box-shadow:inset 3px 0 0 var(--primary)}
.sim-badge{background:#64748b;color:#fff;border-radius:3px}
.sim-card.on .sim-badge,.g-cell.on .sim-badge{background:var(--primary)}

/* 결과 보기 · 거리 표기 */
.view-tog{background:#fff;border-radius:8px;overflow:hidden}
.view-tog button{border:none;border-radius:0}
.view-tog button:hover{background:var(--hover)}
.view-tog button.on{background:var(--primary);color:#fff}
.plate-top > *{box-shadow:var(--shadow-lg)}
.plate-dim{background:#fff;border-radius:8px}
.dim-chip{border-radius:14px;background:#fff}
.dim-chip.on{border-color:#b9c7da}
.dim-chip[data-k=gap] i{color:#0284c7}
.dim-chip[data-k=light] i{color:#16a34a}
.dim-chip[data-k=sun] i{color:#7c3aed}
.sim-verify .g{color:#0284c7}.sim-verify .l{color:#16a34a}.sim-verify .s{color:#7c3aed}
.sim-verify .bad{color:var(--bad)}
.v3hint{background:rgba(255,255,255,.94);color:var(--ink-dim);border-color:var(--line-2);border-radius:6px}
.v3bar{background:var(--line-2);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-lg)}
.v3bar button{border:none;border-radius:0}
#simGrid{background:var(--bg)}
.gm-tog{border-radius:6px;overflow:hidden}
.gm-tog button{border:none;border-radius:0}
.gm-tog button.on{background:var(--primary);color:#fff}
.g-cell{border-radius:8px;overflow:hidden;background:#fff}
.g-cell.on{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.g-b button{border:none;border-radius:0}

/* 이미지 보기 · 주동 도면 관리 창 */
.imgv-bar{background:#fff}
.imgv-bar .imgv-save,.libm-add{background:var(--primary);border-color:var(--primary);color:#fff}
.libm{background:rgba(15,23,42,.45)}
.libm-box{border-radius:10px;overflow:hidden;box-shadow:var(--shadow-lg)}
.libm-item{border-radius:6px;border-left-color:var(--primary)}
.libm-item.sel{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.libm-cv canvas{border-radius:6px}
.libm-del{color:var(--bad);border-color:rgba(220,38,38,.4)}
.libm-del:hover{background:rgba(220,38,38,.08)}

/* 시작 화면 · 프로젝트 메뉴 · 알림 */
.ar-gate{background:
  radial-gradient(1200px 600px at 80% -10%, rgba(31,111,235,.10), transparent 60%),
  linear-gradient(rgba(100,116,139,.07) 1px, transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg, rgba(100,116,139,.07) 1px, transparent 1px) 0 0/40px 40px,
  var(--bg)}
.ar-card{border-radius:12px;box-shadow:var(--shadow-lg)}
.ar-logo{border-color:var(--primary);border-radius:3px}
.ar-logo::after{background:var(--primary)}
.ar-f input,.ar-tools input{border-radius:8px;background:#fff}
.ar-f input:focus,.ar-tools input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.ar-msg{color:var(--bad)}
.ar-btn{border-radius:8px;background:#fff}
.ar-btn:hover{border-color:#b9c7da;background:var(--hover)}
.ar-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.ar-btn.primary:hover{background:var(--primary-hover)}
.ar-item{border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.ar-item:hover{border-color:#b9c7da}
.ar-bar-btn{background:#fff;box-shadow:none;border-radius:8px}
.ar-bar-btn:hover{border-color:#b9c7da;background:var(--hover)}
.ar-dot{background:var(--ok)}
.ar-dot.error{background:var(--bad)}
.ar-menu{border-radius:10px;box-shadow:var(--shadow-lg);left:auto;right:0;z-index:60}  /* 이미지 관리(z:30) 위로 */
.ar-menu button{border-radius:0}
.ar-menu button:hover{background:var(--hover)}
.ar-menu-st{color:var(--ok)}
.ar-menu-st.error{color:var(--bad)}
.ar-toast{background:#1f2937;color:#fff;border-color:#1f2937;border-radius:8px}
.lib-del:hover{color:var(--bad)}

/* ---------- 3. 새 레이아웃 (body.ui2) ---------- */
body.ui2{
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);
  height:100%;height:100dvh;
}
/* 머리 */
#uiHead{
  display:flex;align-items:center;gap:22px;min-width:0;
  height:58px;padding:0 16px 0 18px;background:#fff;border-bottom:1px solid var(--line);
}
.ui-brand{display:flex;align-items:center;gap:10px;flex:none}
.ui-logo{width:32px;height:32px;border-radius:8px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.ui-brand b{display:block;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.15}
.ui-brand small{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:1px}
.ui-nav{display:flex;align-items:stretch;align-self:stretch;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.ui-nav::-webkit-scrollbar{display:none}
.ui-nav button{
  border:none;border-radius:0;background:none;padding:0 16px;
  font-size:14px;font-weight:600;color:var(--ink-dim);white-space:nowrap;
  border-bottom:3px solid transparent;border-top:3px solid transparent;
}
.ui-nav button:hover{color:var(--ink);background:var(--hover)}
.ui-nav button.on{color:var(--primary);border-bottom-color:var(--primary);background:var(--primary-soft)}
.ui-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.ui-right .ar-menu{left:auto;right:0}

/* 도구 막대 */
#uiTool{
  display:flex;align-items:stretch;gap:0;min-width:0;overflow-x:auto;
  padding:6px 10px;background:#fff;border-bottom:1px solid var(--line);scrollbar-width:thin;
}
/* 묶음 사이만 넓히고(버튼 사이는 그대로) 구분선은 가운데 짧고 진하게 — 묶음이 한눈에 갈리도록 */
.ui-grp{position:relative;display:flex;align-items:stretch;gap:2px;padding:0 15px;flex:none}
.ui-grp:first-child{padding-left:8px}
.ui-grp.end{margin-left:auto}
.ui-grp:not(:last-child)::after,.ui-grp.end::before{
  content:"";position:absolute;top:18%;bottom:18%;right:0;width:2px;background:#b8c0ca;
}
.ui-grp.end::before{left:0;right:auto}
.ui-grp:nth-last-child(2)::after{display:none}                /* 설정창 앞은 설정창 쪽 선 하나만 */
.ui-tb{
  flex-direction:column;gap:4px;min-width:58px;padding:6px 6px 5px;
  border:1px solid transparent;border-radius:6px;background:none;color:var(--ink-dim);
  font-size:11.5px;line-height:1.2;white-space:nowrap;
}
.ui-tb svg{width:22px;height:22px;flex:none}
.ui-tb:hover{background:var(--hover);color:var(--ink);border-color:transparent}
.ui-tb.on{background:var(--primary-soft);color:var(--primary);border-color:rgba(31,111,235,.35);font-weight:600}
.ui-tb.run{color:var(--primary);font-weight:700}
.ui-tb:disabled{opacity:.35}
.ui-tb:disabled:hover{background:none}
.ui-tb[hidden]{display:none}
.ui-tb kbd{display:none}

/* 본문: 도면 + 오른쪽 창 */
#uiMain{display:flex;min-height:0;min-width:0;gap:8px;padding:8px}
body.ui2 #plate{
  flex:1;min-width:0;min-height:0;border:1px solid var(--line-2);border-radius:var(--radius);
  overflow:hidden;background:#fff;box-shadow:var(--shadow);
}
body.ui2 #panel{
  position:relative;top:auto;right:auto;bottom:auto;flex:none;width:340px;min-height:0;
  border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow);
  transform:none;transition:none;padding-bottom:10px;
}
body.ui2.nopanel #panel{display:none}
body.ui2 #panel .brand,body.ui2 #sTool,body.ui2 #reopen,body.ui2 .plate-fabs{display:none !important}
body.ui2 .titleblock{position:static;right:auto;bottom:auto}

/* 검토조건 항목 모두 펼치기 · 접기 — 항목 1 바로 위 오른쪽 끝 */
.ui-accall{display:flex;justify-content:flex-end;gap:4px;margin:10px 0 6px}   /* 대지 이름 칸과 붙지 않게 위 10px */
.ui-accall button{
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;
  font-size:12px;color:var(--ink-dim);background:#fff;border:1px solid var(--line-2);
}
.ui-accall button:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-soft)}
.ui-accall svg{width:14px;height:14px;flex:none}

/* 시뮬레이션 창 정리 (13-layout.js 「시뮬레이션 창 정리」) */
.ui-simall{margin:10px 16px 0}
#sim .ui-sec-h{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  font-weight:600;color:var(--ink-dim)}   /* 설정창 항목(용적률 …)과 같은 굵기 · 색 */
#sim .ui-sec-h:hover{color:var(--primary)}
#sim .ui-sum{margin-left:auto;font-size:12px;font-weight:400;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#sim .ui-cv{flex:none;width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5.5px solid currentColor;opacity:.55;transition:transform .15s}
#sim .ui-sum:empty + .ui-cv{margin-left:auto}
#sim .sim-sec.ui-shut > :not(h2){display:none}
#sim .sim-sec.ui-shut{padding-bottom:12px}
#sim .sim-sec.ui-shut > h2{margin-bottom:0}
#sim .ui-sec-h::after{display:none}   /* 제목 줄 장식선 대신 오른쪽 끝에 요약 · 접힘 표시 */
#sim .sim-sec.ui-shut .ui-cv{transform:rotate(-90deg)}
#sim .sim-sec:not(.ui-shut) > .ui-sec-h .acc-n{color:#fff;background:var(--primary);border-color:var(--primary)}   /* 설정창처럼 펼치면 파란 번호 */
/* 대지 구역 — 도면 상세 */
.ui-dxfmore{margin-top:10px;border:1px solid var(--line-2);border-radius:8px;background:#fff}
.ui-dxfmore-h{
  display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:none;background:none;
  font-size:12.5px;font-weight:600;color:var(--ink-dim);text-align:left;justify-content:flex-start;
}
.ui-dxfmore-h:hover{color:var(--primary);background:var(--hover)}
.ui-dxfmore .ui-cv{flex:none;width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5.5px solid currentColor;transform:rotate(-90deg);transition:transform .15s}
.ui-dxfmore.open .ui-cv{transform:none}
.ui-dxfmore-b{display:none;padding:0 10px 10px}
.ui-dxfmore.open .ui-dxfmore-b{display:block}
/* 실행 버튼 — 창 아래 고정 */
.ui-simfoot{flex:none;padding:10px 14px 12px;border-top:1px solid var(--line);background:#fff}
.ui-simfoot .sim-run{width:100%;margin:0}
.ui-simfoot .sim-prog{margin-top:8px}

/* 오른쪽 창 탭 */
.ui-ptabs{
  position:sticky;top:0;z-index:2;display:flex;background:#fff;border-bottom:1px solid var(--line);
}
.ui-ptabs button{
  flex:1;border:none;border-radius:0;background:none;padding:13px 6px 11px;
  font-size:13px;font-weight:600;color:var(--ink-dim);border-bottom:2px solid transparent;
}
.ui-ptabs button:hover{background:var(--hover)}
.ui-ptabs button.on{color:var(--primary);border-bottom-color:var(--primary);background:#fff}
/* 설정창 닫기 × — 탭 셋이 나머지 폭을 나눠 씁니다 */
.ui-ptabs button.ui-pclose{
  flex:0 0 36px;padding:0;font-size:20px;font-weight:400;line-height:1;color:var(--ink-faint);
}
.ui-ptabs button.ui-pclose:hover{color:var(--accent);background:none}
body.ui2 #panel > section{display:none;border-bottom:none;padding:14px 16px 6px}
body.ui2 #panel[data-tab=opt] #sOpt,
body.ui2 #panel[data-tab=res] #sRes,
body.ui2 #panel[data-tab=draw] #sBase,
body.ui2 #panel[data-tab=draw] #sList{display:block}
body.ui2 #panel[data-tab=draw] #sList{border-top:1px solid var(--line);margin-top:6px}
body.ui2 #panel section > h2{pointer-events:none;cursor:default;margin-bottom:10px}
body.ui2 #panel section > h2 .cv{display:none}
body.ui2 #sOpt > h2,body.ui2 #sRes > h2{display:none}
body.ui2 #panel .opt label,body.ui2 #panel .toggle,body.ui2 #panel .field span{font-size:13px}
body.ui2 #panel .opt input{width:92px;font-size:12px;padding:6px 8px}
body.ui2 #panel .acc-h{font-size:13.5px;padding:11px 4px;border-radius:6px}
body.ui2 #panel .acc-t{font-weight:600}
body.ui2 #panel .res-k,body.ui2 #panel .res-v{font-size:12.5px}
body.ui2 #panel .btn-row button{padding:8px 6px}

/* 시뮬레이션 창 — 도면 왼쪽에 나란히 (도면을 가리지 않음) */
body.ui2 #sim{
  position:relative;top:auto;left:auto;bottom:auto;flex:none;width:340px;min-height:0;z-index:auto;
  border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
body.ui2 .sim-head{padding:13px 14px 12px 16px;border-bottom:1px solid var(--line)}
body.ui2 .sim-sec{padding:14px 16px 16px}
body.ui2 .sim-sec > h2{font-size:13.5px}
body.ui2 #sim .opt label,body.ui2 #sim .field span{font-size:13px}
body.ui2 #sim .opt input{width:84px;font-size:12px;padding:6px 8px}
body.ui2 #simGrid.drawer{left:0}

/* 설명 접기 */
.ui-note-btn{
  display:inline-flex;margin-top:8px;padding:3px 9px;border-radius:12px;
  font-size:11.5px;color:var(--ink-faint);background:var(--field-3);border:1px solid var(--line);
}
.ui-note-btn:hover{color:var(--primary);border-color:rgba(31,111,235,.35);background:var(--primary-soft)}
.ui-note-btn.open{color:var(--primary);background:var(--primary-soft);border-color:rgba(31,111,235,.35)}
body.ui2 .acc-note.ui-note{display:none;margin-top:6px;padding:9px 11px;border-radius:6px;background:var(--field-3);border:1px solid var(--line)}
body.ui2 .acc-note.ui-note.open{display:block}

/* 아래 상태줄 */
#uiStat{
  display:flex;align-items:center;gap:14px;min-width:0;height:32px;padding:0 14px;
  background:#fff;border-top:1px solid var(--line);font-size:12px;color:var(--ink-dim);position:relative;
}
#uiStat .titleblock{
  display:flex;align-items:center;gap:0;border:none;background:none;backdrop-filter:none;
  font-family:var(--mono);font-size:11.5px;pointer-events:none;
}
#uiStat .tb-k{border:none;padding:0 5px 0 12px;color:var(--ink-faint);font-size:10.5px;letter-spacing:.04em}
#uiStat .tb-v{border:none;padding:0 12px 0 0;min-width:0;color:var(--ink);border-right:1px solid var(--line)}
#uiStat .titleblock > :last-child{border-right:none}
.ui-stat-sp{flex:1}
/* 3D 보기 설명글 — 도면 위 떠 있던 상자를 상태줄 오른쪽 글자로 (13-layout.js) */
#uiStat .ui-stat-hint{
  position:absolute;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);z-index:auto;max-width:calc(100% - 360px);   /* 상태줄 정가운데 */
  background:none;border:none;border-radius:0;padding:0;box-shadow:none;
  font-family:inherit;font-size:12px;color:var(--ink-dim);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body:has(#v3ui[hidden]) #uiStat .ui-stat-hint{display:none}   /* 3D 보기일 때만 */
.ui-keys{border:1px solid var(--line-2);background:#fff;padding:3px 10px;font-size:11.5px;border-radius:12px}
.ui-keys.on{color:var(--primary);border-color:rgba(31,111,235,.4);background:var(--primary-soft)}
body.ui2 .hint{
  display:none;position:absolute;right:10px;bottom:40px;z-index:40;width:320px;
  background:#fff;border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow-lg);
  font-family:var(--sans);font-size:12px;color:var(--ink-dim);padding:12px 14px;line-height:1.8;
}
body.ui2 .hint b{color:var(--ink);font-weight:600}
body.ui2 .hint.open{display:block}

/* 도면 위 부속 */
body.ui2 .scalebar{left:40px;bottom:14px;color:var(--ink-dim)}
body.ui2 .plate-top{top:36px}
body.ui2 .plate-tog{display:none !important}      /* 평면 · 3D · 6개안은 도구 막대에 있음 */
.libm-legend i.l{background:#16a34a}


/* ---------- 3-B. 글자 크기 (최소 12 · 본문 14 · 제목 15) ---------- */
/* 최소 12px — 보조 안내 · 단위 · 작은 표기 */
body.ui2 :is(.acc-v,.ai-set,.ai-stat,.item-sub,.libm-legend,.sim-ai,.dxf-sum,.g-f,.h2-sub,.imgv-bar span,
  .item-name,.libm-info,.libm-item span,.libm-team,.opt .u,.scalebar,.sim-badge,.sim-card-h small,.sim-dir,
  .acc-note,.ai-by,.ai-it em,.ai-keystate,.dim-cap,.lib-rot,.lib-sub,.lib-upf em,.libm-item i,.lyr-ct,
  .res-v em,.sim-info,.sim-mix,.sim-note,.sim-pref,.sim-verify,.ai-it b,.ai-meta,.entry label,.item-kind,
  .lyr-cap,.res-cap,.sim-img-cap,.sub-cap,.tb-k,.tgt-k,.imgv-note,.ui-note-btn,.ar-menu-st,.ar-menu-me){font-size:12px}
body.ui2 :is(.tgt-v,.lyr-nm,.v3hint,#gridSub,.sim-stale,.sim-grid,.g-b button,.sim-img-b button){font-size:12.5px}
body.ui2 .opt .u{width:22px}
body.ui2 .acc-n{width:20px;height:20px;font-size:12px}
body.ui2 .lyr-box{width:13px;height:13px}
body.ui2 .dxf-sum,body.ui2 .sim-info,body.ui2 .sim-note,body.ui2 .sim-mix,body.ui2 .lib-sub,body.ui2 .sim-verify{line-height:1.75}

/* 본문 14px — 항목 이름 · 입력칸 · 버튼 */
body.ui2 button{font-size:13.5px}
body.ui2 :is(.opt label,.toggle,.field span,.acc-b .opt label,#gapH .opt label,.ai-on,.img-title,.libm-form .opt span,.libm-on,.libm-item b){font-size:14px}
body.ui2 #panel :is(.opt label,.toggle,.field span),body.ui2 #sim :is(.opt label,.field span){font-size:14px}
body.ui2 :is(.opt input,select,.lib-upf input,.lib-upf,.entry input){font-size:13.5px}
body.ui2 #panel .opt input,body.ui2 #sim .opt input{width:100px;font-size:13.5px;padding:7px 9px}
body.ui2 .opt input.txt{width:130px}
body.ui2 #panel .acc-b select{width:110px}
body.ui2 :is(.ai-box textarea,.libm-tools input){font-size:14px}
body.ui2 :is(.ai-sum,.res-k,.res-v,.empty,.ai-it,.libm-count){font-size:13.5px}
body.ui2 #panel :is(.res-k,.res-v){font-size:13.5px}
body.ui2 :is(button.mini,.dim-chip,.gm-tog button,.v3bar button,.view-tog button,.imgv-bar button,.ar-menu button){font-size:13px}
body.ui2 :is(.lib-nm,.g-h,.sim-card-h){font-size:14px}
body.ui2 .item-main{font-size:16px}
body.ui2 .ar-bar-btn{font-size:13.5px}
body.ui2 .ar-toast{font-size:13.5px}
body.ui2 .hint{font-size:13px}

/* 제목 15px */
body.ui2 #panel .acc-h{font-size:15px;padding:12px 4px}
body.ui2 #panel section > h2,body.ui2 .sim-sec > h2{font-size:15px}
body.ui2 #sim .sim-sub > h2{font-size:13px}
body.ui2 .sim-head h1{font-size:16px}
body.ui2 .sim-head p{font-size:12.5px}
body.ui2 .grid-head > b{font-size:14px}
body.ui2 :is(.sim-run){font-size:15px;padding:13px}
body.ui2 .sim-card-v{font-size:17px}
body.ui2 .g-u{font-size:15px}
.ui-nav button{font-size:15px}
.ui-ptabs button{font-size:14.5px;padding:14px 6px 12px}
.ui-brand b{font-size:18px}
.ui-brand small{font-size:12px}

/* 도구 막대 */
.ui-tb{font-size:12.5px;min-width:62px}
.ui-tb svg{width:24px;height:24px}

/* 상태줄 */
#uiStat{height:34px;font-size:12.5px}
#uiStat .titleblock{font-size:12.5px}
#uiStat .tb-k{font-size:12px}
.ui-keys{font-size:12.5px}

/* 측정 · 대지 카드 — 위아래 간격 */
body.ui2 #list{gap:5px}
body.ui2 #list .item{padding:10px 12px 11px}
body.ui2 #list .item-main{margin-top:6px}
body.ui2 #list .item-sub{margin-top:4px}

/* 창 폭 — 글자가 커진 만큼 */
body.ui2 #panel,body.ui2 #sim{width:380px}

/* ---------- 4. 휴대폰 · 좁은 화면 ---------- */
@media (max-width:1100px) and (min-width:821px){
  body.ui2 #panel{width:330px}
  body.ui2 #sim{width:340px}
  .ui-tb{min-width:54px;font-size:12px}
  body.ui2 #simGrid.drawer{left:0}
  .ui-brand small{display:none}
  .ui-nav button{padding:0 11px}
}
@media (max-width:820px){
  #uiHead{flex-wrap:wrap;height:auto;gap:0;padding:0}
  .ui-brand{padding:8px 12px;flex:1;min-width:0}
  .ui-logo{width:28px;height:28px}
  .ui-brand b{font-size:15px}
  .ui-brand small{display:none}
  .ui-right{padding:0 10px}
  .ui-right .ar-bar-btn{max-width:150px;padding:7px 9px}
  .ui-right .ar-menu{top:calc(100% + 6px);bottom:auto}
  .ui-nav{order:3;flex-basis:100%;border-top:1px solid var(--line);height:42px}
  .ui-nav button{flex:1;padding:0 8px;font-size:13px}
  #uiTool{padding:4px 4px}
  .ui-grp{padding:0 4px}
  .ui-tb{min-width:52px;padding:5px 4px 4px;font-size:11.5px}
  .ui-tb svg{width:20px;height:20px}
  #uiMain{padding:0;gap:0}
  body.ui2 #plate{border:none;border-radius:0;box-shadow:none}
  /* 오른쪽 창 · 시뮬레이션 창은 아래에서 올라오는 시트 */
  body.ui2 #panel{
    position:fixed;top:auto;left:0;right:0;bottom:0;width:100%;height:58%;height:58dvh;z-index:20;
    border:none;border-top:1px solid var(--line-2);border-radius:14px 14px 0 0;
    box-shadow:0 -8px 28px rgba(15,23,42,.18);padding-bottom:env(safe-area-inset-bottom);
  }
  body.ui2.nopanel #panel{display:none}
  body.ui2 #sim{
    position:fixed;top:auto;left:0;right:0;bottom:0;width:100%;height:62%;height:62dvh;z-index:21;
    border:none;border-top:1px solid var(--line-2);border-radius:14px 14px 0 0;
  }
  body.ui2 #sim.min{height:52px}
  body.ui2 #simGrid.drawer{left:0}
  .ui-ptabs button{padding:12px 4px 10px}
  #uiStat{height:28px;gap:6px;padding:0 8px}
  #uiStat .titleblock > :nth-child(n+7){display:none}
  #uiStat .tb-k{padding-left:8px}
  .ui-keys,body.ui2 .hint{display:none !important}
  body.ui2 .scalebar{left:12px;bottom:10px}
  body.ui2 .plate-top{top:34px}
}

/* 큰 보기 — 한 장은 화면 가득, 「같이 보기」는 좌우 반반 */
.imgv-body{align-items:stretch}
.imgv-one{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;gap:6px}
.imgv-one[hidden]{display:none}   /* display:flex 가 hidden 을 덮지 않게 */
.imgv-one img{flex:1;min-height:0;width:100%;object-fit:contain;box-shadow:0 8px 40px rgba(15,23,42,.18)}
.imgv-one figcaption{flex:none;text-align:center;font-size:12.5px;color:var(--ink-dim)}
.imgv-one figcaption:empty{display:none}
.imgv-body.two{gap:12px}
.imgv-mode{display:flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.imgv-mode button{border:none;border-radius:0;border-right:1px solid var(--line-2)}
.imgv-mode button:last-child{border-right:none}
.imgv-mode button.on{background:var(--primary);color:#fff}
.imgv-mode button[hidden]{display:none}
@media (max-width:820px){ .imgv-body.two{flex-direction:column} }
/* 큰 보기 윗줄 — 제목 · 크기 글자는 숨기고(그림 안 라벨과 겹침) 기능 버튼을 왼쪽부터,
   「JPEG 저장」 · 닫기만 오른쪽 끝에 둡니다 */
#imgView #imgvT,#imgView #imgvS{display:none}
#imgView .imgv-save{margin-left:auto}
#imgView .imgv-mode:not(:has(button:not([hidden]))){display:none}   /* 밑그림이 없어 버튼이 다 숨으면 빈 틀도 */
/* 「같이 보기」 — 두 그림 · 이름 · 「겹쳐서 비교」를 한 덩어리로 세로 가운데에.
   (전에는 그림 틀이 창 높이를 꽉 채워서 이름 · 버튼이 창 맨 아래로 떨어져 있었습니다) */
/* 위 빈칸 · 두 그림 · 아래 빈칸 세 줄 — 그림은 세로 가운데, 「겹쳐서 비교」는 아래 빈칸의 가운데 */
#imgView .imgv-body.two{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto 1fr;align-items:end}
#imgView .imgv-body.two .imgv-one{grid-row:2}
#imgView .imgv-body.two .imgv-one img{flex:none;height:auto;max-height:calc(100vh - 220px)}
#imgView .imgv-body.two .imgv-cmpbar{grid-column:1 / -1;grid-row:3;align-self:center}
@media (max-width:820px){
  #imgView .imgv-body.two{grid-template-columns:1fr;grid-template-rows:auto}
  #imgView .imgv-body.two .imgv-one,#imgView .imgv-body.two .imgv-cmpbar{grid-row:auto}
}
/* 「같이 보기」 아래 가운데의 「겹쳐서 비교」 */
#imgView .imgv-cmpbar{display:flex;justify-content:center;padding:4px 0 0;flex:none}
#imgView .imgv-cmpbar[hidden]{display:none}
#imgView .imgv-cmpbar button{padding:7px 18px;font-weight:600;color:var(--primary);border-color:var(--primary);background:#fff}
#imgView .imgv-cmpbar button:hover{background:var(--primary-soft)}
/* 보기 | 만들기 | 비교 구분선 — 도구막대 구분선과 같은 색 · 굵기. 옆 묶음이 비면 선도 숨깁니다 */
#imgView .imgv-sep{flex:none;width:2px;height:20px;margin:0 6px;background:#b8c0ca;border-radius:1px}
#imgView .imgv-mode:not(:has(button:not([hidden]))) + .imgv-sep,
#imgView .imgv-sep:has(+ #imgvPrev[hidden]){display:none}

/* ---------- 5. 이미지 관리 (14-gallery.js) ---------- */
.galv{
  position:fixed;top:var(--ui-top,140px);left:8px;right:8px;bottom:var(--ui-bot,40px);z-index:30;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.galv[hidden]{display:none}
body.galopen #uiTool{display:none}                 /* 이미지 관리에서는 도구 막대를 숨깁니다 */
/* 이미지 관리는 전체 화면 — 헤더 아래를 꽉 채웁니다 (도구막대 · 상태막대 자리까지) */
body.galopen .galv{top:var(--ui-head,66px);left:0;right:0;bottom:0;border-radius:0;border-left:none;border-right:none;border-bottom:none}
.gal-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.gal-head > b{font-size:16px;font-weight:700;color:var(--ink)}
.gal-count{font-size:13px;color:var(--ink-dim);margin-right:auto}
.gal-count b{color:var(--primary);font-weight:700}
.gal-head select{font-size:13px;padding:7px 9px}
.gal-mode{display:flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.gal-mode button{border:none;border-radius:0;font-size:13px;padding:7px 14px}
.gal-mode button.on{background:var(--primary);color:#fff}
.gal-x{font-size:20px;line-height:1;padding:3px 11px;background:none}
.gal-keep{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;font-size:13px;color:var(--ink-dim);white-space:nowrap}
.gal-keep input{position:absolute;opacity:0;pointer-events:none}
.gal-keep i{width:30px;height:16px;border:1px solid var(--line-2);border-radius:9px;background:var(--field-3);position:relative;flex:none}
.gal-keep i::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#b8c1cd}
.gal-keep input:checked + i{border-color:var(--primary);background:var(--primary)}
.gal-keep input:checked + i::after{left:16px;background:#fff}
.gal-pick{position:absolute;top:8px;left:8px;z-index:2;display:flex;cursor:pointer}
.gal-pick input{position:absolute;opacity:0;pointer-events:none;width:18px;height:18px}
.gal-pick i{width:20px;height:20px;border:1.5px solid var(--line-2);border-radius:5px;background:rgba(255,255,255,.9);display:block;position:relative}
.gal-pick i::after{content:"";position:absolute;top:4px;left:7px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0}
.gal-pick input:checked + i{background:var(--primary);border-color:var(--primary)}
.gal-pick input:checked + i::after{opacity:1}
.gal-td-pick{width:36px}
.gal-sub{display:flex;align-items:center;gap:8px;padding:8px 12px 0}
.gal-sub > span{font-size:11.5px;color:var(--ink-faint);flex:none}
.gal-thumb.base{flex:1;aspect-ratio:16/9;max-width:120px;border:1px solid var(--line);border-radius:5px;background:var(--field-3)}
.gal-thumb.sm.base{max-width:none}
.gal-td-pick .gal-pick{position:static}
.gal-note{padding:9px 14px;font-size:12.5px;color:var(--ink-dim);background:var(--field-3);border-bottom:1px solid var(--line)}
.gal-note b{color:var(--ink);font-weight:600}
.gal-body{flex:1;min-height:0;overflow-y:auto;padding:14px}
.gal-body.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));align-content:start;grid-auto-rows:max-content}
.gal-empty{grid-column:1/-1;padding:60px 20px;text-align:center;font-size:14px;color:var(--ink-faint);line-height:1.8}
.gal-empty b{color:var(--ink-dim)}

.gal-card{position:relative;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.gal-card:has(input[data-a=pick]:checked){border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.gal-card:hover{border-color:#b9c7da;box-shadow:var(--shadow)}
.gal-card.old{opacity:.75}
.gal-thumb{
  position:relative;flex:none;width:100%;aspect-ratio:16/9;background:var(--field-3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumb.sm{width:132px;aspect-ratio:16/9;border-radius:6px}
/* 격자 카드의 그림칸 — 원본 이미지와 같은 16:9.
   (카드가 잘리지 않도록 .gal-body.grid 에 grid-auto-rows:max-content 가 함께 필요합니다) */
.gal-card > .gal-thumb{flex:none;display:block;width:100%;height:auto;aspect-ratio:16/9;padding:0}
.gal-card > .gal-thumb > img{position:absolute;inset:0;width:100%;height:100%}
.gal-card > .gal-thumb > .gal-load{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.gal-load{font-size:12px;color:var(--ink-faint)}
.gal-info{padding:10px 12px 8px;display:flex;flex-direction:column;gap:3px;flex:1}
.gal-info b{font-size:14px;color:var(--ink);font-weight:700}
.gal-info span{font-size:12px;color:var(--ink-dim)}
.gal-info i{font-style:normal;font-size:12px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-old{font-style:normal;font-size:11.5px;color:var(--accent)}
.gal-act{display:grid;grid-template-columns:1fr auto auto auto;gap:4px;padding:0 10px 10px}
.gal-act button{font-size:12.5px;padding:7px 8px}
.gal-del{color:var(--bad);border-color:rgba(220,38,38,.35)}
.gal-del:hover{background:rgba(220,38,38,.08);color:var(--bad)}

.gal-table{width:100%;border-collapse:collapse;font-size:13px}
.gal-table th{text-align:left;font-size:12px;color:var(--brass);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.gal-table td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:middle}
.gal-table tr:hover td{background:var(--hover)}
.gal-td-th{width:150px}
.gal-td-style{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-dim)}
.gal-td-act{white-space:nowrap;text-align:right}
.gal-td-act button{display:inline-flex;margin-left:4px}
.gal-td-act{width:1%}

@media (max-width:820px){
  .galv{top:auto;left:0;right:0;bottom:0;top:0;border-radius:0;border:none;z-index:40}
  .gal-head{padding:10px}
  .gal-head > b{flex-basis:100%}
  .gal-body{padding:10px}
  .gal-body.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
  .gal-td-style,.gal-table th:nth-child(6),.gal-table td:nth-child(6){display:none}
  .gal-body.table{overflow-x:auto}
  .gal-table{min-width:560px}
  .gal-td-th{width:120px}
  .gal-thumb.sm{width:108px}
}

/* ---------- 6. 두 장 비교 (15-compare.js) ---------- */
.cmpv{
  position:fixed;inset:0;z-index:110;background:#0f172a;
  display:flex;flex-direction:column;min-height:0;
}
.cmpv[hidden]{display:none}
.cmp-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;background:#fff;border-bottom:1px solid var(--line);
}
.cmp-head > b{font-size:15px;font-weight:700;color:var(--ink)}
.cmp-n{font-size:12.5px;color:var(--ink-dim);padding:3px 10px;border-radius:12px;background:var(--field-3);border:1px solid var(--line)}
.cmp-n.a{border-color:rgba(31,111,235,.45);color:var(--primary)}
.cmp-n.b{border-color:rgba(242,107,29,.5);color:#c2500c;margin-right:auto}
.cmp-mode{display:flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.cmp-mode button{border:none;border-radius:0;font-size:13px;padding:7px 14px}
.cmp-mode button.on{background:var(--primary);color:#fff}
.cmp-warn{padding:7px 14px;font-size:12.5px;color:#c2500c;background:#fff4ec;border-bottom:1px solid var(--line)}
.cmp-body{flex:1;min-height:0;display:flex;padding:14px;gap:12px}
.cmp-wipe{
  position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;cursor:ew-resize;
  touch-action:none;user-select:none;
}
.cmp-wipe[hidden]{display:none}
.cmp-wipe img{position:absolute;top:0;left:0;object-fit:contain;display:block;pointer-events:none}
.cmp-clip{position:absolute;top:0;left:0;bottom:0;width:50%;overflow:hidden}
.cmp-bar{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.35);pointer-events:none}
.cmp-bar i{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(15,23,42,.45);
}
.cmp-bar i::before,.cmp-bar i::after{
  content:"";position:absolute;top:50%;width:0;height:0;margin-top:-5px;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.cmp-bar i::before{left:7px;border-right:6px solid #64748b}
.cmp-bar i::after{right:7px;border-left:6px solid #64748b}
.cmp-side{flex:1;min-width:0;min-height:0;display:flex;gap:12px}
.cmp-side[hidden]{display:none}
.cmp-side figcaption{color:#cbd5e1}
@media (max-width:820px){
  .cmp-head{padding:8px 10px;gap:6px}
  .cmp-head > b{flex-basis:100%}
  .cmp-n.b{margin-right:0}
  .cmp-body{padding:8px}
  .cmp-side{flex-direction:column}
}

/* ── 프로젝트 목록 — 카드 왼쪽 썸네일 · 「변경」 팝업 (js/ui-list.js) ───────── */
.ar-list .ar-item-main{display:flex;align-items:flex-start;gap:14px}
.ar-list .ar-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}   /* 썸네일(160px) 옆 이름 칸이 좁아지지 않게 */
.ar-list .ui-ptext{flex:1;min-width:0}
.ui-pthumb{
  flex:none;width:160px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:var(--field-3,#f1f4f8);border:1px solid var(--line);color:var(--line-2);
  display:flex;align-items:center;justify-content:center;
}
.ui-pthumb svg{width:34px;height:34px}
.ui-pthumb img{width:100%;height:100%;object-fit:cover;display:block}     /* 16:9 가 아니면 가운데로 잘라 보여 줌 */
.ui-pthumb.big{width:220px}
.ui-pedit{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.35);display:flex;align-items:center;justify-content:center;padding:16px}   /* 목록 틀 .ar-gate(1000) · 알림(1100) 보다 위 */
.ui-pedit-card{width:min(520px,100%);background:#fff;border-radius:12px;box-shadow:var(--shadow-lg);padding:20px 22px 18px}
.ui-pedit-card h3{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 14px;padding:0;border:none}   /* base.css 공통 h3 의 위 선 · 여백 없앰 */
.ui-pedit-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.ui-pedit-row > span{flex:none;width:52px;padding-top:8px;font-size:13px;color:var(--ink-dim)}
.ui-pedit-row input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line-2);border-radius:6px;font-size:14px}
.ui-pedit-th{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.ui-pedit-btns{display:flex;flex-direction:column;gap:6px;min-width:0}
.ui-pedit-btns small{font-size:11.5px;color:var(--ink-faint);line-height:1.5}
.ui-pedit-note{font-size:11.5px;color:var(--ink-dim);padding:8px;text-align:center}
.ui-pedit-act{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
@media (max-width:560px){ .ar-list .ar-grid{grid-template-columns:1fr} .ui-pthumb{width:120px} .ui-pthumb.big{width:100%} }

/* 만든 날짜(판) — 앱 이름 밑에 작게 */
.ui-build{display:inline-block;margin-left:8px;font-style:normal;opacity:.75}