/* 반응형(화면 폭·움직임 줄이기). (studio.css 에서 옮김) */
/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .ed-work { grid-template-columns: 56px 240px minmax(0, 1fr) 300px; }
}
@media (max-width: 1180px) {
  .results-list { grid-template-columns: 1fr; }
}
/* 모바일(≤900px): 결과 보기 + 제목·템플릿 간단 수정만. 편집기는 데스크톱 안내. */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: sticky; top: 0; z-index: 10; flex-direction: row; align-items: center; height: auto; min-height: 60px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--c-line); }
  .logo { padding: 0; font-size: var(--fs-lg); }
  .side-nav { display: flex; min-width: 0; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
  /* 휴대폰 터치 영역은 44px 이상(메뉴·입력 방식 탭·결과 카드 버튼) — 레거시 모바일 계약. */
  .nav { flex: none; height: 44px; padding: 0 10px; font-size: var(--fs-xs); }
  .tab { height: 44px; }
  .result-actions .btn { height: 44px; }
  :root { --control-h: 44px; }
  .btn-sm { height: 44px; }
  .logo { min-height: 44px; }
  .nav { min-width: 44px; justify-content: center; }
  .sort select, .batch-template select { height: 44px; }
  .field input:not([type="range"]):not([type="checkbox"]):not([type="color"]):not([type="file"]), .field select, .field textarea, .channel-fields input:not([type="file"]), .comment-row input { min-height: 44px; }
  .batch-all { min-height: 44px; }
  .result-pick { width: 44px; height: 44px; }
  .rights-check label { min-height: 44px; }
  .section-head .link { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  /* 손잡이는 10~14px 로 보이되 누르는 자리는 44px 로 넓힌다(범위 막대 높이 44px). */
  .analysis-range-bar .range-handle::before { content: ""; position: absolute; top: -9px; bottom: -9px; left: -15px; right: -15px; }
  .nav svg { display: none; }
  /* 남은 원본은 좁은 화면에서도 위 띠에 둔다. 「남은 원본」 글자는 빼고 값(「원본 N분」)만 — 전체 문구는 title 에 있다. */
  .meter { flex: none; margin: 0 0 0 var(--sp-2); padding: 6px 10px; }
  .meter > span { display: none; }
  .page { padding: 20px 16px 72px; }
  .site-footer { padding: 20px 16px; }
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-card { grid-template-columns: 1fr; }
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-hint { display: block; margin: 0 0 var(--sp-3); color: var(--c-muted); font-size: var(--fs-xs); }
  .results-list { grid-template-columns: 1fr; }
  .result-card { grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3); }
  .result-quick { display: grid; gap: var(--sp-2); }
  .result-edit { display: none; }
  body[data-view="editor"] { overflow: auto; }
  .editor { display: block; height: auto; }
  .editor > :not(.ed-mobile-note) { display: none; }
  .ed-mobile-note { display: grid; gap: var(--sp-3); justify-items: center; margin: 80px 20px; padding: 28px 20px; border: 1px solid var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-surface); text-align: center; }
  .ed-mobile-note strong { font-size: var(--fs-lg); }
  .ed-mobile-note p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.6; }
  body[data-view="editor"] .side { display: flex; }
}
@media (max-width: 680px) {
  /* 위 띠를 두 줄로: 로고·남은 원본·계정 / 메뉴 전체 폭. 한 줄이면 메뉴가 눌려 「트렌드」·「사용 내역」·「가격」이 잘린다(로그인 상태 390px 에서 「트」). */
  .side { flex-wrap: wrap; row-gap: 4px; }
  .side-nav { order: 1; flex-basis: 100%; margin-left: 0; }
  .meter { margin-left: auto; }
}
@media (max-width: 560px) {
  .projects { grid-template-columns: 1fr; }
  .url-row { grid-template-columns: 1fr; }
  .url-row .btn { width: 100%; }
  .result-card { grid-template-columns: 1fr; }
  .result-media { max-width: 240px; }
  .action-row .btn { flex: 1; }
  .analysis-reveal.is-sequential .analysis-reveal__assembly { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 16px; min-height: 0; padding: 8px 0 24px; align-content: start; align-items: start; }
  .analysis-reveal.is-sequential .analysis-reveal__preview-column { grid-column: 1; grid-row: 1; width: min(100%, 216px); margin: 0 auto; }
  .analysis-reveal.is-sequential .analysis-reveal__details { grid-column: 1; grid-row: 2; width: 100%; max-height: none; padding: 0 0 24px; }
  .analysis-reveal.is-sequential .analysis-reveal__candidate-rail { grid-template-columns: 1fr; max-height: none; width: 100%; overflow: visible; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}