/* ══════════════════════════════════════════════════════════════════════
   AI 콘텐츠 제작 · 콘텐츠 관리 — 모바일 최적화 (767px 이하 전용)

   격리 원칙
   - 모든 선택자를 #panel-ai_content / #panel-content_manage 로 한정한다.
     다른 메뉴(대시보드·WordPress 글쓰기·서식·편집실 등)에는 어떤 규칙도 닿지 않는다.
   - 공통 custom.css 를 수정하지 않고 이 파일만 추가한다.
   - 두 화면의 마크업이 전부 인라인 스타일이라 !important 가 필요하다.
     인라인 스타일을 이기려면 다른 방법이 없다(마크업·기능은 건드리지 않는다).
   - 768px 이상에서는 이 파일의 어떤 규칙도 적용되지 않으므로 PC 레이아웃은 불변이다.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── 공통: 화면 좌우 여백과 가로 넘침 차단 ───────────────────────── */
  #panel-ai_content,
  #panel-content_manage {
    padding: 18px 14px 56px !important;
    overflow-x: hidden !important;
  }
  #panel-ai_content *,
  #panel-content_manage * {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* 제목이 nowrap 이라 좁은 화면에서 가로 스크롤을 만든다 */
  #panel-ai_content [style*="white-space:nowrap"],
  #panel-content_manage [style*="white-space:nowrap"] {
    white-space: normal !important;
  }

  /* 폰트는 모든 컨트롤에 16px (iOS 포커스 시 자동 확대 방지) */
  #panel-ai_content input,
  #panel-ai_content select,
  #panel-ai_content textarea,
  #panel-content_manage input,
  #panel-content_manage select,
  #panel-content_manage textarea {
    font-size: 16px !important;
  }
  /* 폭·높이 확대는 값 입력 컨트롤만.
     체크박스·라디오까지 늘리면 옆 라벨을 밀어내 줄이 깨진다. */
  #panel-ai_content input:not([type="checkbox"]):not([type="radio"]),
  #panel-ai_content select,
  #panel-ai_content textarea,
  #panel-content_manage input:not([type="checkbox"]):not([type="radio"]),
  #panel-content_manage select,
  #panel-content_manage textarea {
    min-height: 44px !important;
    width: 100% !important;
  }
  /* 체크박스·라디오는 손가락으로 누를 수 있을 만큼만 키운다.
     라벨에 for 속성이 없어 라벨 탭으로는 토글되지 않으므로(마크업은 건드리지 않는다)
     컨트롤 자체를 키워 탭 지점을 확보한다. */
  #panel-ai_content input[type="checkbox"],
  #panel-ai_content input[type="radio"] {
    width: 26px !important;
    height: 26px !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  /* 라디오 라벨은 한 줄로 읽히게 한다 */
  #panel-ai_content label:has(> input[type="radio"]) {
    min-height: 44px !important;
    white-space: nowrap !important;
  }
  #panel-ai_content label:has(> input[type="radio"]) span {
    font-size: 15px !important;
    white-space: nowrap !important;
  }
  #panel-ai_content button,
  #panel-content_manage button {
    font-size: 16px !important;
  }

  /* ══ AI 콘텐츠 제작 ══════════════════════════════════════════════ */

  /* 좌측 라벨 + 우측 입력 2열 → 1열(라벨을 입력 위로) */
  #panel-ai_content div:has(> div[style*="width:150px"]) {
    flex-direction: column !important;
  }
  #panel-ai_content div[style*="width:150px"] {
    width: 100% !important;
    flex-shrink: 1 !important;
    /* 모바일 세로 구분선 제거 — 라벨 칸 배경이 세로 경계선처럼 보였다 */
    background: transparent !important;
    padding: 14px 4px 2px !important;
    font-size: 13px !important;
    color: #8A8672 !important;
  }
  #panel-ai_content div[style*="width:150px"] + div {
    padding: 0 4px 16px !important;
  }

  /* 콘텐츠 유형 카드 — 431~767px 2열 */
  #ac-content-type-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  #ac-content-type-group .ac-ctype {
    flex: none !important;
    padding: 14px !important;
  }

  /* 제작 설정 셀렉트 — 431~767px 에서는 2열을 유지한다.
     아래의 "그 외 2열 카드 → 1열" 규칙보다 뒤에 와야 이 그리드만 2열로 남는다. */
  /* 그리드 안의 span 2 항목이 열 수 변화로 넘치지 않게 전체 폭 고정 */
  #panel-ai_content [style*="grid-column:span 2"] {
    grid-column: 1 / -1 !important;
  }

  /* 작성 페르소나 — 셀렉트와 「페르소나 관리」가 한 줄에 붙어 좁아지지 않게 세로로 */
  #panel-ai_content div:has(> #ac-persona) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #ac-persona-manage-btn {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* 결과물 그룹 — 그룹 간 간격을 넓혀 글/영상/이미지 경계를 분명히 한다 */
  #ac-outputs { gap: 16px !important; }

  /* 페르소나 관리 모달 — 좁은 화면에서는 목록과 편집을 세로로 쌓는다 */
  #pm-dialog {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }
  #pm-body { flex-direction: column !important; }
  #pm-list-pane {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #EFE9DC !important;
    max-height: 34vh !important;
  }
  #pm-modal input:not([type="checkbox"]),
  #pm-modal textarea,
  #pm-modal button {
    font-size: 16px !important;
  }
  #pm-modal input:not([type="checkbox"]),
  #pm-modal textarea {
    min-height: 44px !important;
  }
  #pm-modal input[type="checkbox"] {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
  }

  /* 그 외 2열 카드(주제·제목 생성 방식 등) → 1열 */
  #panel-ai_content [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
    grid-template-columns: 1fr !important;
  }
  /* 제작 설정 그리드만 2열로 되돌린다(431~767px). ≤430px 은 아래에서 다시 1열. */
  #panel-ai_content div:has(> div > #ac-video-length) {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 16px !important;
    padding: 16px 4px !important;
  }
  /* 진행 단계 표시(3·4·5열)는 좁은 화면에서 줄바꿈 */
  #panel-ai_content [style*="grid-template-columns:repeat(3,1fr)"],
  #panel-ai_content [style*="grid-template-columns:repeat(4,1fr)"],
  #panel-ai_content [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* 출력물·Figma 선택 칩 — 자연 줄바꿈 + 터치 크기 */
  #ac-outputs,
  #ac-figma-items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #ac-outputs > span,
  #ac-figma-items > span {
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* 하단 주요 실행 버튼 — 전체 폭 */
  #ac-start-btn,
  #ac-approve-research-btn,
  #panel-ai_content #ac-run-actions button {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    padding: 0 16px !important;
  }
  #panel-ai_content #ac-run-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* 실행 로그 — 시각(고정폭)과 본문이 겹치지 않게 세로 배치 */
  #ac-run-logs > div {
    flex-direction: column !important;
    gap: 2px !important;
  }
  #ac-run-logs > div > span:first-child {
    width: auto !important;
  }

  /* ══ 콘텐츠 관리 ══════════════════════════════════════════════════ */

  /* 상단 제목줄 + 새 작업 버튼 → 세로 */
  #panel-content_manage > div > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  #panel-content_manage > div > div:first-child button {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  /* 검색 + 상태 필터 → 1열 */
  #panel-content_manage div:has(> #cm-search) {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
  }
  #panel-content_manage div:has(> div > #cm-search),
  #panel-content_manage div:has(> #cm-filter-type) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 14px !important;
  }
  #cm-search { min-height: 0 !important; }

  /* 표 헤더 숨김 — 행이 카드로 바뀌므로 열 제목이 맞지 않는다 */
  #cm-table > div:first-child {
    display: none !important;
  }

  /* 행 → 카드형 스택 */
  #cm-rows > div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 14px !important;
    border-bottom: 8px solid #F7F3EC !important;
  }
  /* 1 썸네일 숨김 · 나머지는 중요도 순으로 재배치 */
  #cm-rows > div > div:nth-child(1) { display: none !important; }
  #cm-rows > div > div:nth-child(3) { order: 1; font-size: 15.5px !important; font-weight: 700 !important;
                                      white-space: normal !important; overflow: visible !important;
                                      text-overflow: clip !important; line-height: 1.45 !important; }
  #cm-rows > div > div:nth-child(5) { order: 2; }
  #cm-rows > div > div:nth-child(7) { order: 3; }
  #cm-rows > div > div:nth-child(8) { order: 4; }
  #cm-rows > div > div:nth-child(2) { order: 5; }
  #cm-rows > div > div:nth-child(4) { order: 6; }
  #cm-rows > div > div:nth-child(6) { order: 7; }

  /* 헤더를 숨겼으므로 값만으로 구분되지 않는 칸에 최소 라벨을 붙인다.
     화면에 표시되는 데이터·문구는 바꾸지 않고 앞에 항목명만 덧붙인다. */
  #cm-rows > div > div:nth-child(2)::before { content: 'ID '; color: #B4AF9C; }
  #cm-rows > div > div:nth-child(4)::before { content: '유형 '; color: #B4AF9C; }
  #cm-rows > div > div:nth-child(6)::before { content: '발행 '; color: #B4AF9C; }
  #cm-rows > div > div:nth-child(7)::before { content: '수정 '; color: #B4AF9C; }

  /* 보조 정보는 한 단계 낮춰 표시 */
  #cm-rows > div > div:nth-child(2),
  #cm-rows > div > div:nth-child(4),
  #cm-rows > div > div:nth-child(6) {
    font-size: 12px !important;
    color: #8A8672 !important;
  }

  /* 주요 액션 버튼 — 가로 배치 + 터치 크기 */
  #cm-rows > div > div:nth-child(8) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 6px !important;
  }
  /* 3개(이어서 진행·편집·기록)는 390px 폭에서도 한 줄에 들어간다.
     세로로 쌓으면 카드가 3배로 길어져 목록 훑기가 어려워지므로 한 줄을 유지한다. */
  #cm-rows > div > div:nth-child(8) button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
    /* 위의 공통 16px 규칙을 이 선택자가 덮지 않도록 같은 값을 명시한다 */
    font-size: 16px !important;
  }
}

/* ── 430px 이하: 1열로 더 좁힌다 ─────────────────────────────────── */
@media (max-width: 430px) {
  #ac-content-type-group {
    grid-template-columns: 1fr !important;
  }
  #panel-ai_content div:has(> div > #ac-video-length) {
    grid-template-columns: 1fr !important;
  }
  #panel-ai_content [style*="grid-template-columns:repeat(3,1fr)"],
  #panel-ai_content [style*="grid-template-columns:repeat(4,1fr)"],
  #panel-ai_content [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}