/* ══════════════════════════════════════════════════════════
   mobile.css — 작은 화면 대응 (블록 · 파이썬 · C 편집기 공통)

   방침
     1) 편집기는 3단(보드 | 도구 | 작업공간) 구조라 세로 화면에 들어가지 않는다.
        세로로 들면 "가로로 돌려 주세요" 안내를 덮어 보여 준다.
     2) 가로에서는 각 칸을 줄여서 3단을 그대로 유지한다. (쌓지 않는다)
     3) 폰에는 USB(Web Serial)가 없다. 안 되는 버튼은 숨기고 이유를 알려 준다.

   각 페이지의 <style> 뒤에 읽혀서 덮어쓴다.  js/mobile.js 와 한 쌍.
   ══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────
   0. 바이브 코딩 패널이 칸 밖으로 밀려나 잘리던 문제
      (화면 크기와 상관없이 늘 적용 — 컴퓨터에서도 나던 문제다)

      .vibe-panel 은 flex-shrink:0 이라 자리가 모자라도 줄어들지 않는다.
      그래서 답이 길어지면 패널이 보드 칸(.board-panel) 바닥을 뚫고 내려가는데,
      보드 칸에도 body 에도 스크롤이 없어서 넘어간 부분이 그냥 잘려 나갔다.
      실측: 보드 칸 49~1117 인데 바이브 패널 780~1212 — 95px 이 화면 밖.
      [되돌리기] 버튼과 입력칸이 닿지 않던 이유다.

      고치는 방법
        · 패널이 남은 자리에 맞춰 줄어들게 한다 (flex-shrink:1, min-height:0)
        · 대신 대화창(.vibe-log)이 안에서 굴러간다 (min-height 를 풀어 준다)
          → 제목줄과 입력칸은 늘 보이고, 카드 버튼은 굴려서 닿는다
        · 그래도 모자랄 때를 대비해 보드 칸 자체에도 스크롤을 둔다
   ──────────────────────────────────────────────────────── */
.vibe-panel { flex-shrink: 1; min-height: 0; }
/* 펼쳤을 때의 바닥값. 너무 줄이면 대화창이 83px 밖에 안 남아
   카드의 제목·안내·코드가 다 잘리고 버튼 줄만 보인다 (한 번 그랬다).
   자리가 모자라면 보드 칸이 통째로 굴러가므로 이 정도는 줘도 된다. */
.vibe-panel.open { min-height: 250px; }
.vibe-log { min-height: 120px; max-height: none; }

.side-panel, .board-panel { overflow-y: auto; overscroll-behavior: contain; }

/* ────────────────────────────────────────────────────────
   1. 세로 — 가로로 돌려 달라는 안내
   ──────────────────────────────────────────────────────── */
.rotate-hint { display: none; }

@media (max-width: 1000px) and (orientation: portrait) {
  .rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 99999;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 20px; padding: 30px 26px; text-align: center;
    background: #14141f; color: #e2e8f0;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  }
  body.light .rotate-hint { background: #f8fafc; color: #0f172a; }

  /* 스크롤 잠금은 **안내가 실제로 뜨는 페이지에서만**.
     예전에는 body 에 통째로 걸어서, 안내가 없는 메인 화면까지 스크롤이 죽었다.
     세로로 열면 아래쪽 파이썬·C 카드를 고를 수가 없었다.
     js/mobile.js 가 안내를 넣은 페이지에만 rotate-guard 를 붙인다. */
  body.rotate-guard { overflow: hidden; }

  .rh-phone {
    width: 72px; height: 118px; border-radius: 13px;
    border: 3px solid currentColor; opacity: .8; position: relative;
    animation: rh-turn 2.6s ease-in-out infinite;
  }
  .rh-phone::after {
    content: ''; position: absolute; left: 50%; bottom: 7px;
    width: 24px; height: 3px; margin-left: -12px;
    border-radius: 3px; background: currentColor; opacity: .7;
  }
  @keyframes rh-turn {
    0%, 32%   { transform: rotate(0deg); }
    58%, 100% { transform: rotate(-90deg); }
  }

  .rh-title { font-size: 19px; font-weight: 900; letter-spacing: -.3px; }
  .rh-desc {
    font-size: 13.5px; font-weight: 700; line-height: 1.9;
    color: #94a3b8; max-width: 320px;
  }
  body.light .rh-desc { color: #64748b; }
  .rh-desc b { color: #e2e8f0; }
  body.light .rh-desc b { color: #0f172a; }
  .rh-home {
    margin-top: 2px; font-size: 13px; font-weight: 900;
    padding: 11px 22px; border-radius: 10px; text-decoration: none;
    background: #7c3aed; color: #fff;
  }
}

/* ────────────────────────────────────────────────────────
   2. 가로 폰 — 3단을 유지하면서 각 칸을 줄인다
      화면 '높이'로 가른다. 태블릿 가로(높이 600 이상)는 손대지 않는다.
   ──────────────────────────────────────────────────────── */
@media (max-height: 560px) and (orientation: landscape) {

  /* 세로용 기존 규칙이 3단을 쌓아 버리는 것을 되돌린다 (작은 폰 가로: 568×320) */
  .main-layout { flex-direction: row !important; }
  .side-panel {
    height: auto !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    border-bottom: none !important;
  }
  body.light .side-panel { border-right-color: #e2e8f0 !important; }

  /* ── 페이지 전체를 위아래로 굴릴 수 있게 한다 ──────────
     폰에서 웹으로 열면 주소창과 상태 표시줄이 화면의 1/5 넘게 먹는다.
     남는 높이가 300px 안팎이라 한 화면에 다 넣는 것은 애초에 불가능하다.
     · 평소  : body 높이 100vh 고정 + overflow hidden (한 화면에 딱 맞춤)
     · 가로 폰: 높이를 내용에 맡기고 페이지가 통째로 스크롤되게 한다
     아래쪽 콘솔도, 왼쪽 공유보드 아래도 내려서 볼 수 있다. */
  html { height: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  body { height: auto !important; min-height: 100%; overflow: visible !important; }

  /* 3단이 제 모습을 갖출 최소 높이. 화면보다 길어지면 페이지가 굴러간다. */
  .main-layout, .main { min-height: 430px; overflow: visible !important; }

  /* 칸 안쪽에 또 스크롤을 두면 손가락이 어느 쪽을 굴리는지 헷갈린다.
     스크롤은 페이지 하나로만 둔다. */
  .side-panel, .board-panel { overflow: visible !important; }

  /* 굴려 내려가도 위쪽 도구 줄은 붙어 있게.
     Blockly 의 카테고리 목록이 z-index 70 이라 그보다 위로 올려야 덮이지 않는다. */
  .toolbar { position: sticky; top: 0; z-index: 200; }

  /* 블록 편집기의 콘솔은 왼쪽 좁은 칸(170px) 안에 있어서 글이 다 접힌다.
     가로 폰에서는 3단 아래로 꺼내서 가로 전체를 쓰게 한다. (js/mobile.js 가 옮긴다) */
  .console-below {
    width: 100%; height: 130px !important; flex: none !important;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  body.light .console-below { border-top-color: #e2e8f0; }

  /* ── 위쪽 줄 ── */
  .toolbar { padding: 5px 9px; gap: 6px; }
  .toolbar .tb-btn { padding: 6px 10px; font-size: 11.5px; }
  .app-title { font-size: 12.5px; }
  .proj-label, .title-sep { display: none; }
  .proj-box { padding: 3px 7px; }
  #proj-title { font-size: 11.5px; }

  /* ── 보드 칸 ── */
  .side-panel, .board-panel { width: 200px !important; }
  #board-sim { width: 156px !important; }
  .panel-head { padding: 6px 8px 0; }
  .ph-title { font-size: 10px; }
  .side-connect { padding: 7px 8px 0; gap: 6px; }
  .side-connect .tb-btn { padding: 7px 0; font-size: 11.5px; }
  .conn-badge { font-size: 9.5px; padding: 3px 7px; }
  .stage, .stage-wrap { padding: 7px; }
  .pinmap-link { font-size: 10.5px; padding: 4px 9px; }

  /* 실행 줄 — 보드 그림 아래에 있으면 첫 화면에서 안 보인다.
     [연결] 바로 아래로 끌어올려서, 굴리지 않아도 바로 누를 수 있게 한다. */
  .panel-head   { order: 0; }
  .side-connect { order: 1; }
  .run-bar      { order: 2; }
  .stage, .stage-wrap { order: 3; }
  .sensor-panel { order: 4; }
  .console-wrap { order: 5; }

  .run-bar { padding: 7px 8px; gap: 5px; }
  .run-bar .tb-btn { padding: 8px 0; font-size: 12px; min-height: 32px; }

  /* 센서 모니터 */
  .sensor-panel { padding: 7px 9px; }
  .sp-grid { gap: 5px; }
  .sp-value { font-size: 13px; }
  .sp-label, .sp-status { font-size: 9.5px; }
  .sp-sw { transform: scale(.88); }

  /* ── 코드 조각 칸 (파이썬 · C) ── */
  .snip-rail { width: 146px !important; }
  .snip-head { padding: 7px 9px 4px; font-size: 10px; }
  .snip-search { margin: 0 9px 6px; padding: 5px 7px; font-size: 11px; width: calc(100% - 18px); }
  .snip-list .cat { padding: 6px 8px; font-size: 11px; }
  .snip-list .code { font-size: 10px; }

  /* ── 작업 칸 ── */
  .tab-bar { padding: 5px 8px 0; }
  .tab-item { padding: 6px 13px 6px; font-size: 11.5px; }
  .edit-head { padding: 6px 10px; font-size: 10px; }
  .CodeMirror { font-size: 12px; line-height: 1.55; }
  .blocklyToolboxDiv { font-size: 12px; }

  /* ── 바이브 코딩 ──
     펼치면 입력칸이 아래 [연결] 버튼 위로 삐져나왔다. 이유가 둘이었다.
       ① .vibe-panel 은 max-height:46vh 인데 가로 폰에서 46vh = 145px 뿐이다.
          안에 든 것(제목 + 대화창 최소 110 + 입력줄)이 194px 라 상자 밖으로 넘친다.
       ② 접어 두려고 .vibe-body 를 display:block 으로 덮었는데
          원래 flex 세로 배치라서 안쪽 줄이 흐트러졌다. → 덮지 않는다.
     페이지가 굴러가니 높이를 vh 로 묶을 이유가 없다. 제 높이를 갖게 두고
     대화창만 적당히 잘라 준다. */
  .vibe-panel { max-height: none !important; overflow: hidden; }
  .vibe-log { min-height: 64px !important; max-height: 150px !important; }
  .vibe-head { padding: 6px 8px; gap: 4px; }
  .vibe-title { font-size: 11px; line-height: 1.25; }
  .vibe-badge { font-size: 9px; padding: 2px 5px; }
  .vibe-input-row { padding: 6px 8px 8px; gap: 5px; }
  .vibe-input { height: 32px; font-size: 11.5px; padding: 7px 9px; }
  .vibe-send { padding: 0 10px; font-size: 11.5px; }

  /* ── 콘솔 ── */
  .console-wrap { height: 96px !important; flex: 0 0 96px !important; }
  .console-header, .console-head { padding: 5px 10px 0; font-size: 10.5px; }
  .console-content, #console-log { font-size: 10.5px; line-height: 1.6; }
}

/* 아주 낮은 화면(작은 폰 가로, 320px 안팎) — 폭만 한 번 더 줄인다.
   높이는 페이지가 굴러가니까 무엇도 숨기지 않는다. */
@media (max-height: 400px) and (orientation: landscape) {
  .side-panel, .board-panel { width: 172px !important; }
  #board-sim { width: 130px !important; }
  .snip-rail { width: 128px !important; }
}

/* ────────────────────────────────────────────────────────
   3. 폰에서 안 되는 기능 — 숨기고 이유를 알려 준다
      js/mobile.js 가 body 에 no-usb / no-ble 을 붙인다.
        · USB  : Web Serial 은 안드로이드·아이폰 브라우저에 없다
        · 블루투스 : Web Bluetooth 는 아이폰 사파리에 없다
   ──────────────────────────────────────────────────────── */
body.no-usb #btn-flash,
body.no-usb #btn-serial { display: none !important; }
body.no-ble #btn-ble    { display: none !important; }

.usb-note {
  margin-top: 10px; padding: 10px 12px;
  border-radius: 10px;
  font-size: 11.5px; font-weight: 700; line-height: 1.75;
  background: rgba(148,163,184,.13); color: #94a3b8;
  text-align: left;
}
body.light .usb-note { background: #f1f5f9; color: #64748b; }
.usb-note b { color: #cbd5e1; }
body.light .usb-note b { color: #334155; }

.usb-note.mini {
  margin: 0 8px 8px; padding: 7px 9px;
  font-size: 10.5px; line-height: 1.6; text-align: center;
}

/* ────────────────────────────────────────────────────────
   4. 창(팝업)이 화면보다 길 때
      바이브 코딩 설정 · 핀맵 · 연결 창은 내용이 길어서 낮은 화면에서
      위아래가 잘려 나간다. 창 안쪽을 굴릴 수 있게 하고 글자도 줄인다.
      세로·가로를 가리지 않는다 — 창은 어느 쪽에서든 뜰 수 있다.
   ──────────────────────────────────────────────────────── */
@media (max-height: 720px) {
  .modal-overlay { padding: 10px; }
  .modal-box {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);   /* 주소창이 접혔다 펴져도 따라간다 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;      /* 창 끝에서 뒤 페이지까지 밀리지 않게 */
  }
}

@media (max-height: 560px) {
  .modal-box { padding: 14px 16px; border-radius: 14px; }
  .modal-title { font-size: 14px; margin-bottom: 10px; }
  .modal-btn { padding: 9px 11px; }
  .modal-btn-info { font-size: 10.5px; }
  .modal-cancel { margin-top: 10px; font-size: 12px; }

  /* 바이브 코딩 설정 */
  .ai-note { font-size: 10.5px; line-height: 1.7; padding: 9px 11px; margin-bottom: 10px; }
  .ai-row { margin-bottom: 8px; gap: 8px; }
  .ai-row label { width: 58px; font-size: 11px; }
  .ai-row select, .ai-row input { padding: 7px 10px; font-size: 12px; border-radius: 8px; }
  .ai-hint { font-size: 10.5px; line-height: 1.6; }

  /* 핀맵 — 보드 그림과 목록을 위아래로.
     그림은 폭을 줄여야 목록까지 금방 닿는다. 핀 점은 그림 상자 기준 %라
     상자를 줄이면 같이 따라온다. */
  .pm-grid { grid-template-columns: 1fr; gap: 10px; }
  .pm-board { max-width: 230px; margin: 0 auto; }
  .pm-list { max-height: 150px; overflow-y: auto; }
}

/* ────────────────────────────────────────────────────────
   5. 메인 화면(index.html) — 세로에서도 잘 보이게
   ──────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .board-setup { flex-direction: column; align-items: stretch; gap: 11px; text-align: center; }
  .bs-left { justify-content: center; }
  .bs-btn { width: 100%; }
  .mode-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .header h1 { font-size: 22px; }
  .header p { font-size: 12.5px; }
  .board-note { font-size: 11.5px; line-height: 1.75; }
  .mode-card { padding: 16px; }
  .mode-icon { height: 46px; }
  .fwm-card { padding: 14px; }
  .fwm-parts { font-size: 10.5px; }
}