/* 03 LAYOUT — 앱 전체 골격, screen, safe area, scroll. Device 변수만 소비한다. */

.app:before{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  opacity:.2;
  background:radial-gradient(circle,#ff9fc0 0 3px,transparent 4px) 0 0/38px 38px;
  inset:0 70% 0 0;
}

.app:after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  opacity:.2;
  background:radial-gradient(circle,#ff9fc0 0 3px,transparent 4px) 0 0/38px 38px;
  inset:0 0 0 70%;
}

.screen{
  display:none;
  position:relative;
  z-index:1;
  height:100dvh;
  padding:max(var(--device-screen-top),env(safe-area-inset-top)) var(--device-screen-inline) calc(var(--device-screen-bottom) + env(safe-area-inset-bottom));
  overflow:hidden;
  container-type:inline-size;
  container-name:app-screen;
}

.screen.active{
  display:flex;
  flex-direction:column;
}


.app{
  height:100dvh;
  max-width:var(--device-app-max-width);
  margin:0 auto;
  overflow:hidden;
  position:relative;
  background:radial-gradient(circle at 15% 4%,rgba(255,255,255,.96),transparent 23%),
 linear-gradient(180deg,#e8f7ff 0%,#f6fbff 55%,#eaf7ff 100%);
  overscroll-behavior-y:none;
}

/* v9.12.28 — 낮은 화면/폰 가로모드에서는 고정 높이보다 내용 접근성을 우선한다. */
:root[data-device^="phone"][data-height="short"] #home.screen,
:root[data-device^="phone"][data-height="short"] #study.screen,
:root[data-device^="phone"][data-orientation="landscape"] #home.screen,
:root[data-device^="phone"][data-orientation="landscape"] #study.screen{
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}

:root[data-device^="phone"][data-height="short"] #home.screen.active,
:root[data-device^="phone"][data-height="short"] #study.screen.active,
:root[data-device^="phone"][data-orientation="landscape"] #home.screen.active,
:root[data-device^="phone"][data-orientation="landscape"] #study.screen.active{
  min-height:var(--visual-viewport-height,100dvh);
  height:auto;
}