/* 추천 완성본 — 편집 화면의 '추천 완성본' 묶음(380px 판 · 좁은 폭은 아래 판) + 목록의 '새 템플릿' 카드
   (docs/layout-page-plan-2026-10-17.md). 값은 style.css 토큰의 계단만 쓴다 (test_design_contract). */
.lt-page [hidden]{display:none!important}

/* ── 목록 — '새 템플릿' 은 핸드폰 윤곽에 + 하나 ── */
.lt-card-plus{min-height:260px;gap:var(--sp-12);border-color:var(--line-2)}
.lt-card-plus:hover,.lt-card-plus:focus-visible{border-color:var(--hot);color:var(--ink)}
.lt-plus-phone{display:grid;place-items:center;width:72px;aspect-ratio:9/16;border:2px dashed var(--line-2);border-radius:12px;color:var(--ink-3)}
.lt-card-plus:hover .lt-plus-phone,.lt-card-plus:focus-visible .lt-plus-phone{border-color:var(--hot);color:var(--hot)}
.lt-plus-phone svg{width:24px;height:24px}
.lt-empty-note{margin:var(--sp-12) 0 0;color:var(--ink-2);font-size:var(--t-base);line-height:var(--lh-body)}

/* ── 묶음 — 거르기(지금 틀 · 장르) → 안내 한 줄 → 카드 목록 ── */
.lt-pick{display:grid;gap:var(--sp-10)}
.lt-pick .lt-check{margin:0}
.lg-filters{display:flex;flex-wrap:wrap;gap:var(--sp-6)}
.lg-filters button{height:var(--ctl-sm);padding:0 var(--sp-10);border:1px solid var(--line-2);border-radius:var(--r-full);background:none;
  color:var(--ink-2);font:500 var(--t-sm) var(--body);cursor:pointer}
.lg-filters button:hover{color:var(--ink);border-color:var(--ink-3)}
.lg-filters button[aria-pressed=true]{background:var(--ink);color:var(--surface-0);border-color:var(--ink);font-weight:600}
.lt-pick>.st-note{margin:0}
.lg-sample-list{display:grid;gap:var(--sp-10)}
.lg-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--sp-12);min-width:0;padding:var(--sp-10);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.lg-card:hover{border-color:var(--line-2)}
.lg-card.is-current{border-color:var(--hot);background:var(--hot-ghost)}
.lg-visual{position:relative;display:block;width:100%;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:var(--r)}
.lg-visual:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.lg-sample-phone{position:relative;display:block;width:100%;padding:var(--sp-2);border-radius:12px;background:#55585c}
.lg-sample-phone img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:9px}
.lg-play{display:grid;place-items:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;
  border-radius:50%;background:#111b;border:1px solid #ffffff75;color:#fff;transition:transform var(--dur-2) var(--ease)}
.lg-visual:hover .lg-play{transform:translate(-50%,-50%) scale(1.08)}
.lg-play svg{width:14px;height:14px}
.lg-card-info{display:grid;align-content:start;gap:var(--sp-4);min-width:0}
.lg-genre{display:flex;align-items:center;gap:var(--sp-6);font:var(--t-xs) var(--mono);color:var(--ink-3)}
.lg-fit{font:600 var(--t-xs) var(--body);color:var(--hot);border:1px solid var(--hot-dim);border-radius:var(--r-full);padding:0 var(--sp-6);line-height:1.6}
.lg-card-info h3{margin:0;font-size:var(--t-md);font-weight:600;line-height:1.35}
.lg-card-info p{margin:0;font-size:var(--t-sm);color:var(--ink-2);line-height:var(--lh-body)}
.lg-card-info .lg-combo{color:var(--ink-3)}
.lg-select.btn{justify-self:start;margin-top:var(--sp-6);gap:var(--sp-6)}
.lg-select.btn svg{width:12px;height:12px}
.lg-select:disabled{border-color:var(--hot-dim);color:var(--hot);background:none;cursor:default}
.lt-pick-empty,.lt-pick-link{margin:0}
.lt-pick-link{margin-top:var(--sp-10)}

/* ── 미리보기 — 실제 렌더한 mp4 한 편 ── */
.lg-preview{width:min(800px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line-2);
  border-radius:var(--r-lg);background:var(--surface-2);color:var(--ink)}
.lg-preview::backdrop{background:#050709d9;backdrop-filter:blur(8px)}
.lg-preview>header{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-12) var(--sp-20);
  border-bottom:1px solid var(--line);font-size:var(--t-base);color:var(--ink-2)}
.lg-preview>header .btn.icon-only{width:var(--ctl-md);height:var(--ctl-md);padding:0;justify-content:center;background:none;border-color:transparent}
.lg-preview-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--sp-32);padding:var(--sp-24)}
.lg-preview video{display:block;width:100%;max-height:65dvh;aspect-ratio:9/16;padding:var(--sp-4);background:#55585c;border-radius:var(--r-lg)}
.lg-preview h2{font-size:var(--t-4xl);line-height:1.4}
.lg-preview p{color:var(--ink-2);font-size:var(--t-md);line-height:1.8}
.lg-preview .lg-meta{display:block;margin:0 0 var(--sp-8);color:var(--ink-3);font-size:var(--t-sm)}
.lg-preview .btn.primary{margin-top:var(--sp-20);width:100%}

@media(max-width:620px){
  .lt-card-plus{min-height:200px}.lt-plus-phone{width:56px}
  .lg-card{grid-template-columns:72px minmax(0,1fr);gap:var(--sp-10)}
  .lg-preview-content{grid-template-columns:1fr;padding:var(--sp-16);gap:var(--sp-16)}
  .lg-preview video{max-height:44dvh;width:auto;max-width:100%;margin:auto}.lg-preview h2{margin-top:0;font-size:var(--t-3xl)}
}