/* 레이아웃 템플릿 — 목록 + 편집 (docs/layout-template-plan-2026-10-15.md §5 · §13.3).
   토큰은 style.css :root 한 곳이다 — 여기서는 쓰기만 한다. */

/* ── ① 목록 ─────────────────────────────────────────────── */
.lt-wrap{max-width:calc(var(--col) + var(--gut)*2);margin:0 auto;padding:24px var(--gut) 90px}
.lt-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 20px;align-items:end;margin-bottom:16px}
.lt-head h1{margin:6px 0 4px}
.lt-head p{grid-column:1/-1;margin:8px 0 0;color:var(--ink-2);font-size:var(--t-md);max-width:66ch;line-height:1.6}
.lt-tabs{margin-bottom:12px}
.lt-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.lt-tools input[type=search]{flex:1 1 240px;max-width:360px;height:var(--ctl-lg)}
.lt-tools select{height:var(--ctl-lg)}
.lt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.lt-empty{display:grid;gap:8px;justify-items:start;padding:24px;border:1px dashed var(--line-2);border-radius:var(--r-lg);margin-top:8px}
.lt-empty p{margin:0;color:var(--ink-2);font-size:var(--t-base)}
.lt-empty div{display:flex;gap:8px;flex-wrap:wrap}

.lt-card{position:relative;display:grid;gap:8px;padding:8px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);min-width:0}
.lt-card:hover{border-color:var(--line-2)}
.lt-card-open{display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:6px;overflow:hidden}
.lt-card-open:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.lt-thumb{display:block;width:100%;max-height:300px;margin:0 auto}
.lt-card-meta{display:grid;gap:2px;min-width:0;padding:0 2px}
.lt-card-meta b{font-size:var(--t-md);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:32px}
.lt-card-meta small{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-card-tags{display:flex;gap:6px;align-items:center;font-size:var(--t-sm);color:var(--ink-2)}
.lt-card-more{position:absolute;right:8px;bottom:40px}
.lt-card.sm{padding:6px;gap:6px}
.lt-card.sm .lt-thumb{max-height:150px}
.lt-card.sm .lt-card-meta b{font-size:var(--t-base);padding-right:0}
.lt-card-new{display:grid;place-content:center;justify-items:center;gap:8px;cursor:pointer;color:var(--ink-2);
  border-style:dashed;min-height:180px;font:inherit}
.lt-card-new b{font-size:var(--t-base);font-weight:500}

.lt-menu{position:absolute;z-index:4;display:grid;min-width:180px;padding:4px;background:var(--panel-2);
  border:1px solid var(--line-2);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.45)}
.lt-menu button{height:var(--ctl-md);padding:0 10px;text-align:left;background:none;border:0;border-radius:6px;
  color:var(--ink);font:inherit;font-size:var(--t-base);cursor:pointer}
.lt-menu button:hover,.lt-menu button:focus-visible{background:var(--hot-ghost)}
.lt-menu button.danger{color:var(--bad)}
.lt-cardmenu{right:8px;bottom:8px}

/* ── ② 편집 ─────────────────────────────────────────────── */
.lt-edit{--lt-bar-h:56px;display:grid;grid-template-rows:auto auto 1fr;grid-template-columns:minmax(0,1fr);min-height:calc(100dvh - 52px)}
.lt-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;min-height:var(--lt-bar-h);
  padding:8px var(--gut);background:var(--void);border-bottom:1px solid var(--line)}
.lt-namebox{position:relative;min-width:0;flex:0 0 auto}
.lt-name{display:flex;align-items:baseline;gap:8px;min-width:0;max-width:min(52vw,520px,100%);height:var(--ctl-lg);padding:0 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;color:var(--ink);font:inherit;cursor:pointer}
.lt-name:hover{border-color:var(--line-2)}
.lt-name b{font-size:var(--t-md);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-name span{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap}
.lt-name::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:translateY(-2px) rotate(45deg);align-self:center;flex:none}
.lt-dirty{color:var(--hot);font-weight:700}
/* 상태 글은 줄어드는 쪽이다 — 줄지 않으면 저장 단추가 화면 밖으로 밀리고 페이지가 가로로 흐른다 (R3-03 · ja 768) */
.lt-state{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap;min-width:0;flex:0 100 auto;overflow:hidden;text-overflow:ellipsis}
.lt-bar-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.lt-morebox{position:relative}
.lt-morebox .lt-menu{right:0;top:calc(100% + 6px)}
.lt-switch{position:absolute;left:0;top:calc(100% + 8px);z-index:4;width:min(720px,90vw);max-height:min(70dvh,560px);overflow:auto;
  padding:12px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.lt-switch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.lt-switch-h{margin:4px 0 8px;font:var(--t-xs) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.lt-switch-grid+.lt-switch-h{margin-top:16px}
.lt-card.on{border-color:var(--hot);background:var(--hot-ghost)}

.lt-body{display:grid;grid-template-columns:240px auto minmax(0,1fr);min-height:0;
  height:calc(100dvh - 52px - var(--lt-bar-h))}
.lt-index{display:grid;align-content:start;gap:2px;padding:16px 12px;border-right:1px solid var(--line);overflow:auto}
.lt-index-h{font:var(--t-xs) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:12px 8px 4px}
.lt-index-h:first-child{padding-top:0}
.lt-index button{display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-rows:auto auto;gap:0 10px;align-items:center;
  min-height:var(--ctl-xl);padding:6px 8px;background:none;border:1px solid transparent;border-radius:8px;
  color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.lt-index button:hover{background:var(--panel)}
.lt-index button[aria-pressed=true]{background:var(--hot-ghost);border-color:var(--hot-dim)}
.lt-index b{font-size:var(--t-base);font-weight:500}
.lt-ico{grid-row:1/3;display:grid;place-items:center;color:var(--ink-2)}
.lt-ico svg{width:16px;height:16px}
.lt-val{grid-column:2;font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lt-groups{width:340px;border-right:1px solid var(--line);overflow:auto;padding:12px}
.lt-group{display:grid;gap:12px}
.lt-group>header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lt-group h2{margin:0;font-size:var(--t-lg);font-weight:600}
.lt-group h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:var(--t-sm) var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.lt-group h3 span{font-family:var(--body);font-size:var(--t-sm);letter-spacing:0;text-transform:none;color:var(--ink-3)}
.lt-group h3 .btn{margin-left:auto}.lt-field{display:grid;gap:6px;font-size:var(--t-sm);color:var(--ink-2)}
.lt-field select{height:var(--ctl-lg)}
.lt-row{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--ink-2);margin-bottom:8px}
.lt-row>span{min-width:72px}
.lt-row input[type=range]{flex:1 1 auto;accent-color:var(--hot)}
.lt-row output{min-width:44px;font-family:var(--mono);color:var(--ink)}
.lt-row select{flex:1 1 auto;height:var(--ctl-md)}
.lt-row input[type=number]{width:72px;height:var(--ctl-md)}
.lt-check{display:flex;align-items:center;gap:8px;font-size:var(--t-base);color:var(--ink);margin-bottom:6px}
.lt-bgimg{display:flex;gap:8px;align-items:center;margin-top:10px}
.lt-sub{margin:12px 0 6px;font-size:var(--t-sm);color:var(--ink-2)}
.lt-els{display:grid;gap:8px;margin-bottom:10px}
.lt-el{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:8px}
.lt-el b{font-size:var(--t-base);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-el .lt-row{grid-column:1/-1;margin:0}
.lt-el-add{display:grid;gap:8px}
.lt-el-text{display:flex;gap:8px}
.lt-el-text input{flex:1 1 auto;min-width:0;height:var(--ctl-md)}
.lt-upload{justify-self:start;cursor:pointer}
.lt-radio{display:grid;gap:8px;margin-bottom:10px}
.lt-radio label{display:flex;gap:8px;align-items:baseline;font-size:var(--t-base);color:var(--ink);cursor:pointer}
.lt-radio small{font-size:var(--t-sm);color:var(--ink-3)}
.lt-rec summary{cursor:pointer;font-size:var(--t-base);color:var(--ink-2)}
.lt-rec summary b{color:var(--ink);font-weight:500}
.lt-rec p{margin:8px 0 0;font-size:var(--t-sm);color:var(--ink-2);line-height:1.55}
.lt-recdl{display:grid;gap:4px;margin:8px 0 0}
.lt-recdl div{display:flex;justify-content:space-between;gap:10px;font-size:var(--t-sm)}
.lt-recdl dt{color:var(--ink-3)}
.lt-recdl dd{margin:0;color:var(--ink-2);text-align:right}

.lt-preview{display:grid;align-content:start;justify-items:center;gap:10px;padding:16px var(--gut) 96px;overflow:auto;min-width:0}
.lt-stage-wrap{display:grid;place-items:center;width:100%;height:min(calc(100dvh - 52px - var(--lt-bar-h) - 150px),800px);min-height:320px}
.lt-preview #stage{height:100%;width:auto;max-width:100%;box-shadow:0 12px 40px rgba(0,0,0,.5);touch-action:none}
.lt-preview #stage[data-aspect="16:9"],.lt-preview #stage[data-aspect="1:1"]{height:auto;width:100%;max-height:100%}
.lt-play{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--ink-2)}
.lt-play .mono{font-variant-numeric:tabular-nums}
.lt-sample{padding:2px 8px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-3)}
.lt-ptools{display:flex;flex-wrap:wrap;gap:12px;align-items:end;justify-content:center;width:100%;max-width:720px}
.lt-ptools .lt-field{grid-template-columns:auto;min-width:0}
.lt-ptools .lt-src select{max-width:260px}
.lt-preview .st-film{justify-content:center;max-width:720px}
.lt-preview .st-warn,.lt-detail{width:100%;max-width:720px}
.lt-detail summary{cursor:pointer;font-size:var(--t-sm);color:var(--ink-3)}
.lt-detail .st-meta{margin-top:8px}

/* 좁은 화면 — 설정은 아래에서 올라오는 판, 미리보기로 바로 돌아온다 (§5.4) */
@media(max-width:1100px){
  .lt-body{grid-template-columns:200px minmax(0,1fr);height:auto;min-height:calc(100dvh - 52px - var(--lt-bar-h))}
  .lt-groups{position:fixed;left:0;right:0;bottom:0;z-index:4;width:auto;max-height:62dvh;border-right:0;
    border-top:1px solid var(--line-2);border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--panel-2);
    box-shadow:0 -16px 40px rgba(0,0,0,.5)}
  .lt-stage-wrap{height:min(calc(100dvh - 52px - var(--lt-bar-h) - 120px),720px)}
  /* 판은 덮개 위에서 올라온다 — 덮개를 누르거나 Esc 로 내린다 (S08) · 끌개는 '내릴 수 있다' 는 표시 */
  .lt-groups{padding-top:22px}
  .lt-groups::before{content:"";position:absolute;left:calc(50% - 18px);top:8px;width:36px;height:4px;border-radius:2px;background:var(--line-2)}
  .lt-groups:not([hidden]){animation:lt-sheet-in var(--dur-3) var(--ease)}
  body[data-group]:not([data-group=""]) .lt-scrim{display:block}
}
.lt-scrim{display:none;position:fixed;inset:0;z-index:3;background:rgba(0,0,0,.45);animation:lt-fade var(--dur-2) var(--ease)}
@keyframes lt-sheet-in{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@keyframes lt-fade{from{opacity:0}to{opacity:1}}
/* 묶음 열기 — 짧은 페이드·밀기 (S20) */
.lt-group:not([hidden]){animation:lt-group-in var(--dur-2) var(--ease)}
@keyframes lt-group-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
/* 처음 한 번 '여기를 보라' — 저장한 새 템플릿의 이름 · 좁은 화면의 추천 완성본 줄 */
.lt-name.nudge,.lt-index button.nudge{animation:lt-nudge var(--dur-loop) var(--ease) 2}
@keyframes lt-nudge{0%,100%{box-shadow:0 0 0 0 transparent}40%{box-shadow:0 0 0 3px var(--hot-dim)}}
/* 모션 줄이기는 style.css 의 전역 규칙 하나가 맡는다 (UI 점검 R6-09 — 판·묶음 들어옴·한 번 짚기를 끝 상태로 보낸다) */
/* 저장 단추 — '저장됨' 은 회색 비활성이 아니라 중립 글자 + 확인 표시 (S10) */
/* 폰 폭 — 세 칸이면 묶음 이름까지 잘려 무엇이 골라졌는지 안 읽힌다 (R3-11 · es·ja 390).
   두 칸으로 넓히고 이름은 자르지 않으며 값은 두 줄까지 보인다. */
@media(max-width:480px){
  .lt-edit .lt-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lt-edit .lt-index button>b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .lt-edit .lt-index button>.lt-val{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
}
.lt-bar #lt-save{gap:6px}
.lt-bar #lt-save.is-saved{background:none;border-color:var(--line-2);color:var(--ink-2);opacity:1;cursor:default}
.lt-bar #lt-save.is-saved svg{width:14px;height:14px;color:var(--cool)}
.lt-bar #lt-save.is-busy{opacity:.75;cursor:progress}
.lt-rename-now{font-size:var(--t-sm);white-space:nowrap}
@media(max-width:720px){
  .lt-bar{flex-wrap:wrap;gap:8px}
  .lt-state,.lt-rename-now{display:none}
  .lt-name{max-width:calc(100vw - 140px)}
  .lt-bar-right{width:100%;justify-content:flex-end}
  .lt-body{grid-template-columns:minmax(0,1fr)}
  .lt-index{grid-template-columns:repeat(3,minmax(0,1fr));border-right:0;border-bottom:1px solid var(--line);padding:8px var(--gut)}
  .lt-index-h{display:none}
  .lt-index button{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center;min-width:0}
  .lt-index button>b,.lt-index button>.lt-val{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lt-ico{grid-row:auto}
  .lt-val{grid-column:1}
  .lt-stage-wrap{height:min(62dvh,560px)}
  .lt-head{grid-template-columns:minmax(0,1fr)}
  .lt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

/* 여러 쇼츠에 적용 */
.lt-dialog{width:min(560px,92vw);max-height:80dvh;padding:20px;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(0,0,0,.6)}
.lt-dialog::backdrop{background:rgba(0,0,0,.55)}
.lt-dialog h2{margin:0 0 8px;font-size:var(--t-lg);font-weight:600}
.lt-many{display:grid;gap:4px;max-height:44dvh;overflow:auto;margin:12px 0}
.lt-many label{display:grid;grid-template-columns:auto 48px minmax(0,1fr);gap:10px;align-items:center;padding:6px 8px;
  border-radius:8px;font-size:var(--t-base);cursor:pointer}
.lt-many label:hover{background:var(--panel)}
.lt-many img,.lt-many .lt-noposter{width:48px;height:64px;object-fit:cover;border-radius:4px;background:var(--void)}
.lt-many small{display:block;color:var(--ink-3);font-size:var(--t-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-many b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.lt-many .ok{color:var(--cool)}
.lt-many .bad{color:var(--bad)}
.lt-many-res{margin:0 0 8px;font-size:var(--t-sm);color:var(--ink-2)}
.lt-dialog-actions{display:flex;justify-content:flex-end;gap:8px}

/* 글자 견본 — 화면 전체가 아니라 자막 줄·제목 띠 둘레를 확대해 보인다 (§16 · templates.js mountZoom 의 R 과 짝) */
.lt-groups{width:380px}/* .st-zoom 은 style.css 의 고르기 부품 절(lookpick.js) 에 있다 */
/* 경계가 보이게 (2026-10-16 — "경계·테두리가 있으면") — 구역은 상자, 상자 머리는 글자 제목, 줄은 선으로 가른다 */
.lt-groups{--lt-gbg:var(--void);padding:0 12px 16px;background:var(--lt-gbg)}
@media(max-width:1100px){.lt-groups{--lt-gbg:var(--panel-2)}}
.lt-group>header{position:sticky;top:0;z-index:2;margin:0 -12px;padding:12px 12px 8px;background:var(--lt-gbg)}
.lt-subtabs{position:sticky;top:48px;z-index:2;margin:-12px -12px 0;padding:0 12px;background:var(--lt-gbg)}
.lt-group[data-sub="style"] [data-sub-of="fmt"],.lt-group[data-sub="fmt"] [data-sub-of="style"]{display:none}
.lt-group .st-block{border-color:var(--line-2);padding:14px}
.lt-group h3{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);
  font:600 var(--t-base) var(--body);letter-spacing:0;text-transform:none;color:var(--ink)}
.lt-group h3 span{font-weight:400}
.lt-capfmt .lt-row,.lt-capfmt .lt-check{margin:0;padding:8px 0;border-bottom:1px solid var(--line)}
.lt-capfmt .lt-row:last-of-type,.lt-capfmt .lt-check:last-of-type{border-bottom:0}
.lt-capfmt .lt-row>span{min-width:84px;color:var(--ink)}.lt-base{display:flex;align-items:center;gap:6px;margin:0;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--r-lg);
  font-size:var(--t-sm);color:var(--ink-2)}
.lt-base b{color:var(--ink);font-weight:600}
.lt-base .linky{margin-left:auto}
.lt-index{gap:6px}
.lt-index button{border-color:var(--line);background:var(--panel)}
.lt-index button:hover{border-color:var(--line-2)}
.lt-subtabs>button{flex:1 1 0;justify-content:center;text-align:center;font-weight:600}
.lt-subtabs>:first-child{padding-left:12px}
.lt-subtabs>button.on:after,.lt-subtabs>:first-child.on:after{left:0;right:0}

/* ── 조작 다듬기 (2026-10-16 · "버튼 하나하나 위치·크기 · 촌스럽지 않게") ─────────────────
   규칙은 넷이다. ① 높이는 계단 둘 — 위 줄 34(--ctl-lg) · 묶음 안 30(--ctl-md), 그 안의 칸은 24.
   ② 노랑은 '고른 그림'(틀·스타일 카드)과 주 단추만 — 칸 고르기(세그먼트)·스위치는 중립색으로 켠다.
   ③ 브라우저 기본 모양(체크 상자·색 상자·숫자 칸)은 쓰지 않는다 — OS 마다 다르게 생겨 이 화면만 다른 앱이 된다.
   ④ '기본값으로' 는 늘 그 줄의 오른쪽 끝, 글자 단추이고 되돌릴 것이 없으면 자리만 남기고 숨는다. */

/* 위 줄 — 높이 하나 */
.lt-bar .btn,.lt-bar .btn.sm{height:var(--ctl-lg)}
.lt-bar .btn.icon-only{width:var(--ctl-lg);padding:0;justify-content:center}
.lt-bar .btn.primary{padding:0 18px}
.lt-bar-right{gap:6px}
.lt-bar #lt-redo{margin-right:6px}
.lt-back{padding:0 12px 0 10px}

/* 닫기 — 정사각 원 */
/* 묶음 닫기 — 공통 .x-btn (style.css · W3) */
.lt-edit #aspect-seg{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 스위치 — 공통 부품 input.ui-switch (style.css · W3) 를 쓴다. 따로 그리던 .lt-edit input[type=checkbox] 규칙은 지웠다 */

/* 설정 줄 — 이름은 왼쪽, 스위치는 오른쪽 끝 */
.lt-edit .lt-check{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:12px;
  min-height:var(--ctl-md);margin:0;font-size:var(--t-base);color:var(--ink);cursor:pointer}
.lt-switches{display:grid;margin-top:8px;border-top:1px solid var(--line)}
.lt-switches .lt-check{padding:6px 0;border-bottom:1px solid var(--line)}
.lt-switches .lt-check:last-child{border-bottom:0}
.lt-edit .st-strip-row{display:flex!important;flex-direction:row-reverse;justify-content:space-between;gap:12px;
  min-height:var(--ctl-md);font-size:var(--t-base);color:var(--ink)!important;margin-bottom:6px}

/* 라디오 — 고르는 줄 자체가 상자 */
.lt-edit .lt-radio{gap:6px}
.lt-edit .lt-radio label{align-items:center;gap:10px;min-height:var(--ctl-xl);padding:8px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--fill)}
.lt-edit .lt-radio label:hover{border-color:var(--line-2)}
.lt-edit .lt-radio label:has(input:checked){border-color:var(--hot-dim);background:var(--hot-ghost)}
.lt-edit input[type=radio]{appearance:none;-webkit-appearance:none;flex:none;margin:0;width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--ink-3);background:none;cursor:pointer;display:grid;place-content:center}
.lt-edit input[type=radio]::before{content:"";width:8px;height:8px;border-radius:50%;transform:scale(0);background:var(--hot);
  transition:transform var(--dur-2) var(--ease)}
.lt-edit input[type=radio]:checked{border-color:var(--hot)}
.lt-edit input[type=radio]:checked::before{transform:scale(1)}

/* 색 — 둥근 네모 견본 하나 (브라우저의 회색 틀 없이) */
.lt-edit input[type=color]{appearance:none;-webkit-appearance:none;flex:none;width:var(--ctl-md);height:var(--ctl-md);padding:2px;
  border:1px solid var(--line-2);border-radius:8px;background:var(--panel-3);cursor:pointer}
.lt-edit input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.lt-edit input[type=color]::-webkit-color-swatch{border:0;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.lt-edit input[type=color]::-moz-color-swatch{border:0;border-radius:6px}
.lt-edit input[type=color]:hover{border-color:var(--ink-3)}

/* 글자 칸 · 숫자 칸 — 셀렉트와 같은 모양 */
.lt-page input[type=text],.lt-page input[type=number],.lt-page input[type=search]{height:var(--ctl-md);padding:0 10px;
  background:var(--panel-3);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);
  font:inherit;font-size:var(--t-base);min-width:0}
.lt-page input[type=search]{height:var(--ctl-lg)}
.lt-page input::placeholder{color:var(--ink-3)}
.lt-page input[type=text]:focus,.lt-page input[type=number]:focus,.lt-page input[type=search]:focus,.lt-page select:focus{
  outline:none;border-color:var(--hot-dim);box-shadow:0 0 0 3px var(--hot-ghost)}
.lt-page input[type=number]{width:84px;-moz-appearance:textfield}
.lt-page input[type=number]::-webkit-inner-spin-button,.lt-page input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.lt-page input[type=number]{appearance:textfield}
.lt-edit .lt-row select{height:var(--ctl-md)}

/* 기본값으로 — 글자 단추 · 그 줄 오른쪽 끝 · 되돌릴 것이 없으면 숨는다(자리는 남긴다) */
.lt-edit .btn.sm.lt-reset{height:var(--ctl-sm);padding:0 8px;margin-left:auto;background:none;border-color:transparent;
  color:var(--ink-3);font-size:var(--t-sm);font-weight:500}
.lt-edit .btn.sm.lt-reset:hover{background:var(--fill);color:var(--ink)}
.lt-edit .btn.sm.lt-reset:disabled{visibility:hidden}

/* 설정 줄 (자막 꾸미기 · 제목 글자) — 이름 칸 폭 하나 · 조작은 남은 폭 */
.lt-edit .lt-row{display:flex;align-items:center;gap:10px;min-height:var(--ctl-md)}
.lt-edit .lt-row>span:first-child{flex:none;width:84px;min-width:84px;color:var(--ink-2)}
.lt-edit .lt-row>select{flex:1 1 auto;min-width:0}.lt-edit .lt-row .lt-check{flex-direction:row;gap:8px;min-height:0;margin-left:auto;font-size:var(--t-sm);color:var(--ink-2)}
.lt-capfmt .lt-row,.lt-capfmt .lt-check{padding:8px 0}
.lt-capfmt>.st-note{padding-top:8px}[data-typo]>.st-note{margin-bottom:4px}
[data-typo] .lt-row{padding:6px 0;border-bottom:1px solid var(--line)}
[data-typo] .lt-row:last-child{border-bottom:0}

/* 미끄럼 막대 + 값 */
.lt-slider{display:flex;align-items:center;gap:12px;min-height:var(--ctl-md)}
.lt-slider input[type=range]{flex:1 1 auto;min-width:0;accent-color:var(--hot)}
.lt-slider output{min-width:36px;text-align:right;font:var(--t-sm) var(--mono);color:var(--ink)}.lt-edit .lt-row output{min-width:40px;text-align:right;font:var(--t-sm) var(--mono);color:var(--ink)}
.lt-group h3 b{font-weight:inherit}

/* 포인트 색 — 이름·되돌리기 한 줄, 견본은 그 아래 한 줄 */
.lt-edit .st-accents{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.lt-edit .st-accents::before{content:"";order:-1;flex-basis:100%;height:0}
.lt-edit .st-accents .lk-label{order:-3;flex:1 1 auto;margin:0;font:600 var(--t-base) var(--body);color:var(--ink)}
.lt-edit .st-accents .lk-reset{order:-2;margin-left:0}
.lt-edit .st-accents .lk-reset:disabled{display:none}
/* 띠 색 — 상자·글자·투명도는 lookpick 의 .lk-band 가 그린다 (style.css) */
/* 올리기 — 점선 상자 */
.lt-edit .lt-upload.btn.sm{display:flex;justify-content:center;width:100%;height:var(--ctl-xl);border:1px dashed var(--line-2);
  border-radius:var(--r);background:none;color:var(--ink-1)}
.lt-edit .lt-upload.btn.sm:hover{border-color:var(--ink-3);background:var(--fill);color:var(--ink)}
.lt-bgimg{margin-top:12px;flex-wrap:wrap}
.lt-bgimg .lt-upload{flex:1 1 auto}
.lt-el-text input{flex:1 1 auto}
.lt-el-text .btn{flex:none}
.lt-el{background:var(--fill);border-color:var(--line);border-radius:var(--r);padding:10px}
.lt-el .btn.icon-only{width:var(--ctl-sm);height:var(--ctl-sm);padding:0;justify-content:center;background:none;border-color:transparent}

/* 추천 — 접힌 줄에 화살표 */
.lt-rec>summary{display:flex;align-items:center;gap:8px;list-style:none;min-height:var(--ctl-sm)}
.lt-rec>summary::-webkit-details-marker{display:none}
.lt-rec>summary::after{content:"";margin-left:auto;width:6px;height:6px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg);transition:transform var(--dur-2) var(--ease)}
.lt-rec[open]>summary::after{transform:rotate(-135deg)}
.lt-edit .st-recommend-actions{display:grid;gap:6px;margin-top:12px}
.lt-edit .st-recommend-actions .btn{width:100%;justify-content:center}

/* 미리보기 아래 도구 */
.lt-ptools{gap:12px 16px;align-items:end}
.lt-ptools .lay-toggle{display:flex;align-items:center;gap:8px;min-height:var(--ctl-lg);font-size:var(--t-sm);color:var(--ink-2)}
.lt-ptools select{height:var(--ctl-lg)}
.lt-play .btn.icon-only{width:var(--ctl-lg);height:var(--ctl-lg);padding:0;justify-content:center}.lt-group .st-block>.st-note{margin-top:8px}
.lt-group .st-block>h3+.st-note{margin-top:0}
.lt-el-add{margin-top:4px}

/* 목록 카드 — 더보기는 작은 원 · '기본' 표식은 기울이지 않은 작은 알약 */
.lt-card-more.btn.icon-only{width:var(--ctl-md);height:var(--ctl-md);padding:0;justify-content:center;background:var(--fill);border-color:var(--line)}
.lt-card-tags .lay-badge{font-style:normal;font-size:var(--t-xs);font-weight:600;height:18px;padding:0 6px;display:inline-flex;align-items:center;
  border-radius:var(--r-full);border:1px solid var(--hot-dim);background:var(--hot-ghost);color:var(--hot)}
.lt-tools{align-items:center}
/* 좁은 화면의 설정판은 화면 폭 전체다 — 위의 넓은 화면 폭(380px)이 미디어 질의를 이기지 않게 맨 끝에서 되돌린다 */
@media(max-width:1100px){.lt-groups{width:auto}}
.lt-page .lay-badge{font-style:normal}
/* 자막 켜기 · 상황 설명 — 스위치 두 줄 (설명은 이름 아래 작은 글) */
.lt-switches-flat{margin:0;border-top:0}
.lt-switches-flat .lt-check{padding:8px 0}
.lt-check>span{display:grid;gap:2px}
.lt-check small{font-size:var(--t-sm);color:var(--ink-3);line-height:1.45}

/* 서버에 묻는 중 — 조작이 4초 걸리던 때 '안 눌린다' 로 읽혔다. 머리줄 아래 얇은 줄이 흐르고 커서가 말한다 (docs/layout-page-plan-2026-10-17.md) */
body[data-loading="1"] .lt-groups,body[data-loading="1"] .lt-stage-wrap{cursor:progress}
.lt-bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--hot),transparent);
  background-size:40% 100%;background-repeat:no-repeat;opacity:0;transition:opacity var(--dur-2) var(--ease)}
body[data-loading="1"] .lt-bar::after{opacity:1;animation:lt-loading var(--dur-loop) linear infinite}
@keyframes lt-loading{from{background-position:-40% 0}to{background-position:140% 0}}
@media(prefers-reduced-motion:reduce){body[data-loading="1"] .lt-bar::after{animation:none;background-size:100% 100%}}

/* 제목 — 대표 모양 카드와 그 아래 색 조합은 부품(lookpick.js titleStyleCards · .lk-palette)이 그린다 · 띠 색·부가 설정은 접힌 묶음 (P2) */
/* 접기 — 공통 details.acc (style.css · W3) 위에 이름·설명을 한데 붙이고 표식만 오른쪽 끝 */
.lt-fold.acc>summary{justify-content:flex-start;align-items:baseline;gap:8px;font-size:var(--t-sm);font-weight:600;color:var(--ink-1)}
.lt-fold.acc>summary::after{margin-left:auto;align-self:center}
.lt-fold>summary span{font-weight:400;font-size:var(--t-xs);color:var(--ink-3)}
.lt-fold>[data-band-colors]{margin-top:8px}

/* 배경 그림 (S16) — 묶음 판 자체가 스크롤하므로 그 안에서 또 스크롤하지 않는다 (스크롤 속 스크롤은 휠이 어디에 걸릴지 모른다).
   대신 칸을 낮게(4:5) 해 길이를 줄이고, 밝은 종이 위 흰 이름이 안 읽히던 것을 진한 띠 + 그림자로 받친다 */
.lt-group .bglib-grid{--bgrow:calc((100cqw - 3 * var(--sp-6)) / 4 * 5 / 4);max-height:none;overflow:visible;padding-right:0}
.lt-group .bglib-card span{padding:var(--sp-12) var(--sp-6) var(--sp-4);background:linear-gradient(transparent,rgba(0,0,0,.82) 55%);text-shadow:0 1px 2px rgba(0,0,0,.7)}

/* 템플릿 바꾸기 판 (S19) — 화면 높이 안에서 안쪽만 스크롤하고, 아래에 더 있으면 끝을 흐린다 */
.lt-switch{max-height:min(calc(100dvh - 140px),560px);overscroll-behavior:contain}
.lt-switch.has-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent)}
.lt-switch .lt-card-new{min-height:0}

/* 스위치 줄의 (i) 는 이름 바로 옆이다 (S18 — 형제로 두면 격자의 다음 줄로 떨어졌다) */
.lt-switches .lt-check>.lt-check-name{display:inline-flex;align-items:center;gap:6px}

/* 열려던 템플릿·쇼츠가 없다 (S07) — 편집 껍데기를 걷고 빈 상태 하나만 */
body[data-missing] .lt-body,body[data-missing] .lt-bar-right,body[data-missing] .lt-namebox,
body[data-missing] .lt-state,body[data-missing] .lt-rename-now,body[data-missing] .lt-scrim{display:none}
.lt-missing{max-width:560px;margin:48px auto;padding:0 var(--gut)}
/* S27 — 글자 링크(바꾸기·추천 보기)는 글자만큼만 눌렸다. 자리는 그대로 두고 누르는 면만 넓힌다 */
.lt-page .linky{padding-block:6px;margin-block:-6px}
/* 좁은 폭 판의 닫힘 — 공통 leaveHidden 이 is-leaving 동안만 둔다 (열림은 lt-sheet-in) */
@media(max-width:1100px){.lt-groups[hidden].is-leaving{display:block!important;pointer-events:none;animation:lt-sheet-out var(--dur-2) var(--ease) forwards}}
@keyframes lt-sheet-out{to{transform:translateY(24px);opacity:0}}