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

@media (max-width: 820px) {
  /* 정밀 — 3D 가 **맨 위부터** 화면을 다 씁니다.
   *
   * 머리줄(앱 표식·정밀/비교·디자인·수치)이 세 줄로 접혀 170px 을 먹고 있었습니다.
   * 아래에서 설정 창까지 뜨면 3D 는 한 뼘밖에 안 남았습니다 — 기즈모를 켜면
   * 형태가 거의 안 보였습니다.
   *
   * 그래서 머리줄도 3D **위에 띄웁니다.** #side 와 같은 방식으로 «views» 칸을
   * 함께 쓰되 위쪽에 붙입니다. 정밀/비교는 아래 탭 줄로 내려갔고 디자인은
   * 메뉴로 들어갔으므로, 위에 남는 것은 표식과 수치뿐입니다. */
  #app[data-mode='precise'] {
    grid-template-areas:
      'views'
      'asm'
      'chips'
      'tabs';
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto;
  }
  #app[data-mode='precise'] #topbar {
    grid-area: views;
    align-self: start;
    z-index: 6;
    background: none;
    border: 0;
    box-shadow: none;
    pointer-events: none;          /* 빈 자리로는 3D 를 돌릴 수 있게 */
    /* 아이폰 상태표시줄(시각·전파·배터리) 밑으로 들어가지 않게.
     *
     * 홈 화면에 추가해서 열면 브라우저 껍데기가 없어 화면 **맨 위부터** 그려집니다.
     * 머리줄을 3D 위로 띄우면서 padding 을 통째로 다시 적었더니, 아래쪽 규칙에
     * 있던 이 자리가 함께 지워져 표식과 수치가 시각에 가렸습니다.
     * (사파리에서는 이 값이 0 이라 아무 일도 일어나지 않습니다) */
    /* 오른쪽은 «편집» 단추 자리로 비워 둡니다 — 안 비우면 수치 글씨가
       그 밑으로 파고들어 둘 다 못 읽습니다. */
    padding: calc(6px + env(safe-area-inset-top, 0px)) 64px 6px 8px;
    gap: 8px;
  }
  /* 누를 것과 읽을 것만 손가락을 받습니다. */
  #app[data-mode='precise'] #topbar > * { pointer-events: auto; }
  /* 정밀/비교 줄은 아래 탭으로 내려갔습니다. */
  #app[data-mode='precise'] #modes { display: none; }
  /* 비교·전시에는 탭 줄이 없습니다.
   *
   * 탭(3D·전개도·설정)은 **정밀에서만** 뜻이 있습니다. 비교는 카드를 늘어놓는
   * 화면이고 전시는 입체 하나만 크게 보는 화면이라, 갈아 끼울 것이 없습니다.
   * 전에는 세 모드에 다 탭을 두었더니 비교에서 3D 탭을 눌러도 아무 일이 없고
   * 전시에서 설정 탭을 누르면 빈 화면이 나왔습니다. */
  #app[data-mode='compare'] {
    grid-template-areas: 'head' 'gal' 'tabs';
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  /* 비교에서도 아래 줄로 돌아올 수 있어야 합니다 (정밀/비교 줄이 없어졌으므로). */
  #app[data-mode='compare'] #pane-tabs { grid-area: tabs; display: flex; }
  #app[data-mode='compare'] #modes { display: none; }

  /* 설정은 3D **위에 뜨는 작은 창** 입니다.
   *
   * 탭으로 갈라 두었더니 손을 대는 곳과 결과가 보이는 곳이 서로를 가렸습니다.
   * 그래서 화면 아래 칩 줄에서 묶음을 골라 그 자리에 띄웁니다.
   *
   * 격자의 «views» 칸을 #views 와 **함께** 씁니다. 격자는 같은 칸에 여럿을
   * 놓을 수 있고, 그러면 겹쳐 놓입니다 — 3D 칸이 줄지 않으므로 카메라를
   * 다시 맞출 일도 없습니다. (요소를 옮기지 않으니 배선도 그대로입니다)
   *
   * 아래쪽에 붙입니다: 손가락이 화면 아래에 닿기 쉽고, 방금 누른 칩 바로
   * 위라서 «이 칩이 이것을 열었다» 가 눈에 보입니다.
   *
   * 높이는 내용만큼입니다. 재어 보니 묶음 하나가 형태 200 · 단순화 115 ·
   * 전개 234 · 수치 185px 라 크게 먹지 않습니다. 그래도 화면을 다 덮지 않게
   * 45vh 에서 끊고 스크롤로 넘깁니다. */
  #side {
    grid-area: views;
    align-self: end;
    z-index: 5;
    margin: var(--s2, 8px);
    max-height: 45vh;
    overflow-y: auto;
  }
  #views { grid-area: views; }
  #side-grip { display: none; }             /* 5px 손잡이는 손가락으로 잡을 수 없습니다 */

  /* 아무 칩도 안 눌렀으면 3D 만 보입니다. */
  #app[data-mode='precise']:not([data-group]) #side { display: none; }

  /* 고른 묶음 하나만. 나머지는 접힌 것이 아니라 없는 것처럼 둡니다. */
  #app[data-mode='precise'][data-group='shape'] .panel:not([data-group='shape']),
  #app[data-mode='precise'][data-group='simplify'] .panel:not([data-group='simplify']),
  #app[data-mode='precise'][data-group='unfold'] .panel:not([data-group='unfold']),
  #app[data-mode='precise'][data-group='sheet'] .panel:not([data-group='sheet']),
  #app[data-mode='precise'][data-group='metrics'] .panel:not([data-group='metrics']) {
    display: none;
  }

  #app[data-mode='precise'][data-group] .panel-head { display: none; }

  /* 설정 묶음 고르기 줄 — 정밀에서만, 손가락 크기로. */
  #app[data-mode='precise'] #group-chips {
    grid-area: chips;
    display: flex;
  }
  #group-chips button { flex: 1; min-height: 44px; }

  /* «설정» 탭은 없앱니다 — 설정은 이제 위의 칩 줄로 펼칩니다.
     단추를 지우지 않고 감추는 까닭: 넓은 화면에는 탭 줄 자체가 없어서
     무해하고, 그쪽 배선을 건드리지 않기 위해서입니다. */
  #pane-tabs button[data-pane='side'] { display: none; }

  /* 지금 고른 탭만 보입니다.
   *
   * 모든 규칙에 data-mode='precise' 를 붙입니다. 안 붙였더니, 지난번에 설정 탭을
   * 보던 상태로 전시 모드에 들어가면 data-pane 이 'side' 로 남아 있어서
   * #views 가 감춰지고 **전시 화면이 통째로 비었습니다.**
   * 탭은 정밀에서만 있는 것이므로 규칙도 정밀에서만 살아야 합니다. */
  #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; }


  /* 전개도 탭에서는 접기/펼치기 줄을 감춥니다.
     접히는 모습은 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;
  }
  /* 표식은 3D 위에 뜨는 동그란 단추가 됩니다.
   *
   * 머리줄이 통째로 화면 위로 올라왔으므로, 표식만 놓아 두면 3D 위에 글자가
   * 떠 있는 꼴이 됩니다. 동그라미로 감싸 «누를 것» 임을 보입니다.
   * 색은 디자인마다 정합니다 (.pane-float 를 함께 물려받습니다). */
  #app[data-mode='precise'] #app-menu > summary { display: flex; padding: 0; border: 0; }
  #app[data-mode='precise'] .mark-ring { width: 38px; height: 38px; }

  /* 3D 위의 «편집» 은 오른쪽 위로. 왼쪽 위는 표식 자리입니다. */
  #pane3d > #btn-edit-3d { left: auto; right: 8px; }
  /* 되돌리기는 «편집» 바로 아래 — 같은 크기의 원(44px) 하나 건너. 늘 떠 있습니다. */
  #pane3d > #btn-undo-3d { display: inline-flex; left: auto; right: 8px; top: calc(8px + 44px + 8px + env(safe-area-inset-top, 0px)); }
  /* 처음 상태로는 되돌리기 아래 (편집 중에만) */
  #pane3d > #btn-reset-3d { left: auto; right: 8px; top: calc(8px + 2 * (44px + 8px) + env(safe-area-inset-top, 0px)); }
  /* 전개도 화면의 되돌리기 — 오른쪽 위 (왼쪽 위는 잰 치수 자리). */
  #pane2d > #btn-undo-2d { display: inline-flex; align-items: center; justify-content: center; padding: 0; left: auto; right: 8px; }

  /* 앱 이름 «글씨» 는 자리를 많이 먹는데 알려 주는 것이 없습니다 (첫 화면에도 적혀
     있고 홈 화면 아이콘에도 있습니다). 표식만 남기고 글씨는 감춥니다 —
     그 표식이 곧 메뉴를 여는 단추입니다. */
  /* 이름 글씨는 넓은 화면에서도 없습니다 (styles/reset.css) — 표식 동그라미만 남습니다 */

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

  /* ② 보기에서는 고치는 자리가 모두 닫힙니다 — 칩 줄과 그 위의 작은 창.
     넓은 화면에서 왼쪽 창이 통째로 닫히는 것과 같은 뜻입니다 (styles/2.css 의 min-width 규칙).
     3D · 접기/펼치기 · 아래 탭만 남습니다. 칩 줄은 auto 줄이라 없어지면 칸이 접힙니다. */
  #app[data-mode='precise']:not([data-editing]) #group-chips,
  #app[data-mode='precise']:not([data-editing]) #side { display: none; }

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

  /* 3D 화면 위 보기/편집 단추 · 첫 화면의 한/영 — 손가락으로 누를 수 있는 크기. */
  #btn-edit-3d { min-height: 34px; padding-left: 12px; padding-right: 12px; }
  /* 속도 밀대는 폰 폭에 꽉 차게 — 제 줄을 통째로 */
  #speed-group { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
  #speed-group #in-speed { flex: 1; }
  /* «접기/펼치기» 글씨는 접습니다 — 단추가 이미 «접기» 라 말합니다. ◀ ▶ 자리를 냅니다. */
  /* 설정 창이 45vh 라 축소판은 작게 */
  #height-thumb { max-height: 80px; }
  #start-langs .lang-btn { min-height: 40px; min-width: 56px; }
  /* 첫 화면 격자는 폰에서 두 칸 — 세 칸이면 «원기둥 (12각)» 이 두 줄로 접힙니다. */
  #start-box { --start-cols: 2; }
  /* 폰은 두 줄이라 다섯 줄이 됩니다 — 넓은 화면의 간격을 그대로 두면 화면을 넘칩니다 */
  /* 폰 첫 화면은 넓은 화면처럼 키우지 않습니다 — 이전 크기 그대로 */
  #start-box { max-width: 420px; }
  #start-shapes { gap: 12px 24px; margin-bottom: 40px; }
  #start-shapes button { min-height: 56px; }
  #start-shapes .shape-icon { width: 36px; height: 26px; }
  #start-actions button { min-height: 44px; }

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