/* 핸드폰 화면 — **디자인 파일보다 나중에** 실립니다.
 *
 * reset.css 에 두었더니 안 먹었습니다. reset 이 먼저 실리고 디자인 파일이
 * 나중에 실리는데, 둘의 우선순위가 같으면 **나중 것이 이깁니다.**
 * @media 는 우선순위를 높여 주지 않습니다. 그래서 격자 규칙이 그대로 덮였습니다.
 *
 * 여기에도 색은 넣지 않습니다. 자리 잡는 일만 하고, 생김새는 디자인마다 정합니다
 * (#pane-tabs 의 색은 styles/<이름>.css 에 있습니다).
 */
/*
 * 데스크톱은 3D·도면·설정을 나란히 놓는 3단 격자입니다. 폰에서 그대로 두면
 * 설정 칸이 폭을 다 먹고 화면은 실오라기만 남습니다 (아이폰에서 실제로 그랬습니다).
 *
 * 그래서 폰에서는 **한 번에 하나만** 보여 주고 아래 탭으로 넘깁니다.
 *
 * 이 규칙을 디자인 파일이 아니라 여기 두는 이유: 자리를 잡는 일(격자·숨김)은
 * 네 디자인이 다를 이유가 없습니다. 색과 생김새만 디자인마다 정합니다.
 * 여기에 색을 넣지 않으므로 안전선도 그대로 지켜집니다.
 */
#pane-tabs { display: none; }

@media (max-width: 820px) {
  /* 정밀 — 한 칸으로 세웁니다. 고른 것 하나 + 조립 줄 + 탭. */
  #app[data-mode='precise'] {
    grid-template-areas:
      'head'
      'views'
      'asm'
      'tabs';
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  /* 비교·전시에는 탭 줄이 없습니다.
   *
   * 탭(3D·전개도·설정)은 **정밀에서만** 뜻이 있습니다. 비교는 카드를 늘어놓는
   * 화면이고 전시는 입체 하나만 크게 보는 화면이라, 갈아 끼울 것이 없습니다.
   * 전에는 세 모드에 다 탭을 두었더니 비교에서 3D 탭을 눌러도 아무 일이 없고
   * 전시에서 설정 탭을 누르면 빈 화면이 나왔습니다. */
  #app[data-mode='show'],
  #app[data-mode='compare'] {
    grid-template-rows: auto minmax(0, 1fr);
  }
  #app[data-mode='show'] {
    grid-template-areas: 'head' 'views';
  }
  #app[data-mode='compare'] {
    grid-template-areas: 'head' 'gal';
  }

  /* 설정 칸은 격자의 «views» 자리를 함께 씁니다. 요소를 옮기지 않아도
     탭으로 갈아 끼울 수 있습니다 (배선이 그대로 유지됩니다). */
  #side { grid-area: views; overflow-y: auto; }
  #views { grid-area: views; }
  #side-grip { display: none; }             /* 5px 손잡이는 손가락으로 잡을 수 없습니다 */

  /* 지금 고른 탭만 보입니다.
   *
   * 모든 규칙에 data-mode='precise' 를 붙입니다. 안 붙였더니, 지난번에 설정 탭을
   * 보던 상태로 전시 모드에 들어가면 data-pane 이 'side' 로 남아 있어서
   * #views 가 감춰지고 **전시 화면이 통째로 비었습니다.**
   * 탭은 정밀에서만 있는 것이므로 규칙도 정밀에서만 살아야 합니다. */
  #app[data-mode='precise'][data-pane='3d'] #side,
  #app[data-mode='precise'][data-pane='net'] #side { display: none; }
  #app[data-mode='precise'][data-pane='side'] #views { display: none; }
  #app[data-mode='precise'][data-pane='3d'] #pane2d,
  #app[data-mode='precise'][data-pane='net'] #pane3d { display: none; }
  #app[data-mode='precise'][data-pane='3d'] #pane3d,
  #app[data-mode='precise'][data-pane='net'] #pane2d { display: flex; }

  /* 보기/편집 줄은 **정밀 모드의** 설정 탭에서만, 가로로 눕혀서.
   *
   * data-mode 를 빼먹었더니 화면이 어긋났습니다. 디자인 파일은 «정밀이 아니면 감춤»
   * 인데 이 파일이 나중에 실려서 그걸 덮었습니다. 그래서 비교 모드에서도 #rail 이
   * 나오는데, #rail 의 자리는 «views» 이고 비교 모드의 격자에는 그 칸이 없습니다.
   * 갈 곳이 없는 칸은 격자가 **없던 줄과 칸을 새로 만들어** 거기 놓습니다.
   * 그래서 폭이 375 → 280 으로 줄고, 탭 줄 아래에 보기/편집 줄이 떠 있었습니다.
   *
   * 보기/편집은 형태를 고치는 도구라 정밀에서만 쓰는 것이 맞습니다. */
  #rail { grid-area: views; display: none; }
  #app[data-mode='precise'][data-pane='side'] #rail {
    display: flex;
    flex-direction: row;
    align-self: start;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  #app[data-mode='precise'][data-pane='side'] #side { padding-top: 44px; }

  /* 전개도 탭에서는 접기/펼치기 줄을 감춥니다.
     접히는 모습은 3D 화면에만 보이므로, 도면만 보는 탭에서 밀대를 끌면
     아무 일도 안 일어나는 것처럼 보입니다 (도면은 늘 펼친 그림입니다). */
  #app[data-mode='precise'][data-pane='net'] #assembly { display: none; }

  /* 탭 줄 — 정밀에서만. */
  #app[data-mode='precise'] #pane-tabs {
    grid-area: tabs;
    display: flex;
    /* 아이폰 아래쪽 손잡이 자리를 피합니다 */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #pane-tabs button {
    flex: 1;
    min-height: 44px;              /* 손가락으로 누를 수 있는 가장 작은 크기 */
  }

  /* 가운데 화면은 데스크톱에서 두 칸(3D·도면)입니다.
     폰에서는 하나만 보여 주므로 한 칸으로 바꿉니다.
     (두 칸 그대로 두면 숨긴 쪽의 빈 칸이 남아 화면이 절반만 찹니다) */
  #views { grid-template-columns: minmax(0, 1fr); }

  /* 머리줄.
     옆으로 미는 것(overflow-x)을 써 봤더니 오른쪽이 잘려서 «정육면체 // 면: 6 …»
     수치가 화면 밖으로 나갔습니다. 접히게 두고 대신 자리를 아낍니다.
     왼쪽 90px 은 맥 창의 신호등 버튼 자리라 폰에서는 필요 없습니다. */
  #topbar {
    flex-wrap: wrap;
    padding-left: var(--s3, 10px);
    padding-right: var(--s3, 10px);
    row-gap: 4px;
    -webkit-app-region: no-drag;

    /* 맨 윗줄이 살짝 잘리던 두 가지.
     *
     * 하나 — 아이폰 위쪽 안전 영역(상태바·노치). 홈 화면에 추가해서 열면 브라우저
     * 껍데기가 없어 화면 맨 위부터 그려지고, 첫 줄이 상태바 밑으로 들어갑니다.
     * 사파리에서는 이 값이 0 이라 아무 일도 일어나지 않습니다.
     *
     * 둘 — 디자인 4 는 머리줄이 «알약» 모양입니다 (border-radius: 999px). 좁은 화면에서
     * 둥근 모서리의 반지름이 높이의 절반(≈62px)까지 커지는데 첫 줄이 그 곡선 안에
     * 들어갑니다. 재어 보니 y=16 에서 알약의 왼쪽 끝이 x≈39 인데 첫 단추는 x=24 에서
     * 시작합니다 — 그 15px 이 잘려 나갑니다. 폰에서는 알약을 펴서 네모로 둡니다. */
    padding-top: calc(var(--s2, 8px) + env(safe-area-inset-top, 0px));
    border-radius: 0;
    margin: 0;
  }
  /* 앱 이름 «글씨» 는 자리를 많이 먹는데 알려 주는 것이 없습니다 (첫 화면에도 적혀
     있고 홈 화면 아이콘에도 있습니다). 표식만 남기고 글씨는 감춥니다 —
     그 표식이 곧 메뉴를 여는 단추입니다. */
  #app-menu > summary span { display: none; }

  /* 메뉴는 표식 아래에 뜹니다. 좁은 화면에서 오른쪽으로 넘치지 않게 폭을 묶습니다. */
  #app-menu .menu-body { min-width: 200px; max-width: calc(100vw - 24px); }

  /* 수치 줄은 한 줄로 묶여 있어서(white-space: nowrap) 폰에서는 오른쪽이 잘립니다.
     «⚠ 휘어 있어 합치지 못한 면» 같은 알림이 거기 붙으므로 잘리면 안 됩니다.
     좁은 화면에서는 여러 줄로 접히게 둡니다. */
  #model-info { margin-left: 0; white-space: normal; }

  /* 맨 윗줄은 «표식 + 모드 셋» 까지입니다.
     디자인 단추가 한 줄을 다 차지하게 해서 아랫줄로 내려보냅니다.
     그러면 첫 줄이 «무엇을 보는 화면인가» 만 말합니다. */
  #designs { flex: 0 0 100%; }

  /* 3D 화면 위 보기/편집 단추 · 첫 화면의 한/영 — 손가락으로 누를 수 있는 크기. */
  #btn-edit-3d { min-height: 34px; padding-left: 12px; padding-right: 12px; }
  #start-langs .lang-btn { min-height: 40px; min-width: 56px; }

  /* 고치기 줄 — 손가락으로 누를 수 있는 크기로, 그러나 한 줄에 들어가게.
     아이콘 4개(38) + 높이만 + 되돌리기 + 사이가 375px 안에 들어갑니다.
     두 줄이 되면 화면을 크게 가려서 정작 고칠 것이 안 보입니다. */
  #edit-bar { flex-wrap: nowrap; gap: 4px; padding: 4px; bottom: 8px; }
  #edit-bar button { min-height: 38px; }
  #edit-bar .pick-tools button { min-width: 38px; }
  #edit-bar > button { padding-left: 8px; padding-right: 8px; white-space: nowrap; }

  /* 손가락이 끌기를 스크롤로 빼앗기지 않게. 없으면 도면이 안 끌립니다. */
  #canvas3d, #canvas2d { touch-action: none; }
}