/* code-page-mobile.css — 03_code_* (KISA 49 보안약점) 페이지 모바일 가로 넘침 교정
 *
 * 원인 (측정으로 확인한 것)
 *   .main-content 는 1200px 이하에서 이미 1열 그리드로 접힌다. 그런데도 360px 화면에서
 *   문서 폭이 642~721px 로 벌어졌다. 범인은 코드 블록이다.
 *
 *     <pre class="language-java">  …  white-space: pre  →  min-content 폭 = 가장 긴 코드 줄(약 542px)
 *
 *   그리드/플렉스 항목의 min-width 기본값이 auto 라서, 이 min-content 폭이
 *   .code-display → .panel → .main-content 로 그대로 거슬러 올라가 1fr 칸을 밀어낸다.
 *   즉 "칸을 1열로 만들었는데도 칸 자체가 넓어지는" 상황이었다.
 *
 * 처방
 *   1) 사슬 위의 항목마다 min-width:0 을 줘서 min-content 전파를 끊는다.
 *   2) 코드는 줄바꿈하지 않고 자기 상자 안에서만 가로 스크롤하게 둔다.
 *      (코드를 강제로 접으면 들여쓰기가 무너져 오히려 읽기 어렵다)
 *
 * 문서 폭이 정상으로 돌아오면 position:fixed 인 .langbar·.wvsx-bnav 가
 * 넘친 폭을 따라 늘어나던 증상도 함께 사라진다 — 그것들은 원인이 아니라 결과였다.
 */

@media (max-width: 900px) {

  /* 1) min-content 전파 차단 */
  .container,
  .content-wrapper,
  .main-content,
  .main-content > *,
  .panel,
  .panel-header,
  .code-editor,
  .code-display,
  .editor-toolbar,
  .info-section,
  .hint-panel,
  .feedback {
    min-width: 0;
  }

  /* 2) 코드 블록은 자기 안에서 가로 스크롤 */
  .code-display,
  .code-display pre,
  .code-editor pre,
  pre[class*="language-"] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  pre[class*="language-"] > code {
    display: inline-block;
    min-width: 0;
  }
  .code-textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 3) 좁은 화면에서 과한 여백·간격 정리 */
  body { padding: 12px; }
  .panel { padding: 16px; border-radius: 12px; }
  .panel-header { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; padding-bottom: 12px; }
  .editor-toolbar { flex-wrap: wrap; gap: 8px; }
  .mode-tabs { flex-wrap: wrap; gap: 8px; }
  .main-content { gap: 14px; }

  /* 4) 버튼 줄이 한 줄을 넘기면 접히게 한다 (잘려서 안 보이던 문제)
        .control-panel 의 .btn 은 flex:1(basis 0) 이지만 min-width:auto 때문에
        min-content 아래로 줄지 못해, 5개가 나란히 서면 360px 를 넘긴다. */
  .editor-toolbar > *,
  .panel-header > * { min-width: 0; }
  .editor-toolbar button,
  .panel-header button { flex: 0 0 auto; }

  /* 진행 체크리스트도 가로 flex 라 칩이 4개 넘으면 화면 밖으로 나간다 */
  .checklist { flex-wrap: wrap; gap: 8px; }
  .checklist-item { padding: 7px 12px; font-size: 13px; }
  .progress-indicator { padding: 14px; }

  .control-panel { flex-wrap: wrap; gap: 8px; margin: 14px 0; }
  .control-panel .btn,
  .control-panel button {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* 5) 언어 전환 바가 공용 상단바에 겹치지 않도록 아래로 내린다
        (auth-widget·bilingual 과 같은 토큰을 쓴다) */
  .langbar {
    top: calc(var(--wvs-topbar-h, 0px) + 12px);
    right: 8px;
  }
}

/* 아주 좁은 화면(갤럭시 폴드 외부 화면 등)에서 표가 칸을 밀어내지 않게 한다 */
@media (max-width: 400px) {
  .container { padding-left: 0; padding-right: 0; }
  table { display: block; max-width: 100%; overflow-x: auto; }
}