/* 어느 디자인에서나 똑같이 필요한 최소한만.
 *
 * 여기에는 색도 글꼴도 크기도 넣지 않습니다. 그런 것은 디자인마다 다르므로
 * styles/<이름>.css 가 정합니다. 이 파일은 새 디자인 파일이 아래 규칙을 잊어
 * 화면이 망가지는 일을 막는 안전선일 뿐입니다.
 */

* { box-sizing: border-box; }

/* hidden 속성이 붙은 것은 무조건 숨깁니다.
   (.row 처럼 display 를 정해 둔 규칙이 hidden 을 덮어쓰기 때문입니다) */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;                /* 화면 안에서만 스크롤합니다 */
  -webkit-font-smoothing: antialiased;
  /* 한글이 낱말 가운데서 끊기지 않게. 영어에서는 하는 일이 없습니다. */
  word-break: keep-all;
}

/* 첫 화면 — 자리 잡는 일만. 색과 생김새는 디자인마다 정합니다.
 *
 * 화면 전체를 덮고 가운데에 놓습니다. 폰에서는 위아래로 스크롤되게 두어야
 * 도형이 늘어나도 아래쪽 단추가 손에 닿습니다.
 */
#start {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 24px 16px;
}
#start-box {
  width: 100%;
  max-width: 420px;
  text-align: center;
}
#start-shapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
#start-shapes button,
#btn-start-open { min-height: 44px; width: 100%; }

/* 3D 화면 위의 보기/편집 단추 — 자리만.
 * 생김새는 각 디자인의 button·.toggle 을 그대로 물려받습니다.
 * 힌트 글씨(.pane-hint)가 margin-left:auto 로 오른쪽에 붙으므로 그 앞에 섭니다. */
#btn-edit-3d {
  flex: 0 0 auto;
  min-height: 26px;
}
/* 첫 화면의 한/영 — 가운데. 나머지 자리 잡기는 #langs 규칙을 그대로 씁니다. */
#start-langs {
  display: inline-flex;
  margin-bottom: var(--s3, 10px);
}

/* 앱 표식 메뉴 — 자리만. 생김새는 각 디자인의 .menu 규칙을 그대로 물려받습니다. */
#app-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  -webkit-app-region: no-drag;      /* 맥 창에서 머리줄은 끌어 옮기는 자리입니다 */
}
/* 항목이 열 개가 넘습니다. 폰에서 화면을 넘기지 않게 그 안에서 넘겨 봅니다. */
#app-menu .menu-body {
  max-height: min(72vh, 520px);
  overflow-y: auto;
}
.menu-label { padding: 6px 10px 2px; }   /* 글씨 크기·색은 디자인이 정합니다 */
#app-menu .menu-body #langs { display: flex; }
#app-menu .menu-body #langs .lang-btn { flex: 1; text-align: center; }

/* 고치는 동안 3D 화면 위에 뜨는 줄 — 자리만.
 * 단추 생김새는 각 디자인의 button·.toggle·#pick-tools 를 그대로 물려받습니다.
 * 화면 아래쪽에 띄웁니다. 손가락이 화면 위쪽보다 아래쪽에 닿기 쉽고,
 * 고치는 대상은 대개 가운데에 있으므로 가리지 않습니다. */
#edit-bar {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  max-width: calc(100% - 16px);
  flex-wrap: wrap;
  justify-content: center;
}
#edit-bar[hidden] { display: none; }
/* 아이콘 넷은 한 줄로 붙여 둡니다. 접히면 줄이 두 겹이 되어 화면을 크게 가립니다. */
.pick-tools { flex-wrap: nowrap; }

/* 카메라로 찍는 화면 — 자리만. 생김새는 디자인마다.
 * 첫 화면과 같은 이유로 #app 바깥에 있고 화면을 통째로 덮습니다. */
#scan {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
#scan[hidden] { display: none; }
#scan-head { display: flex; align-items: center; justify-content: space-between; }
/* 찍는 화면은 남는 자리를 다 씁니다 — 물체가 커 보여야 잘 찍힙니다. */
#scan-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#scan-video, #scan-paint { max-width: 100%; max-height: 100%; object-fit: contain; }
#scan-paint { touch-action: none; }     /* 문지르기를 스크롤에 빼앗기지 않게 */
#scan-row, #scan-row2 { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
#scan-row2 button { min-height: 44px; flex: 1 1 auto; }
/* 기울기 알림 — 색은 디자인이, 자리만 여기서. */
#scan-tilt[hidden] { display: none; }
#scan-stage { position: relative; }