/**
 * 모바일(좁은 뷰포트) 전용 — 앱형 UI 셸
 * PC·태블릿 넓은 화면에서는 비표시, 기존 반응형 유지
 */

:root{
  --app-dock-h:56px;
  --app-dock-bg:rgba(255,255,255,.94);
  --app-dock-border:rgba(0,20,40,.08);
  --app-dock-active:var(--blue,#0080FF);
}

.app-dock{
  display:none;
}

@media(max-width:768px){

  /* 스티키 1화면·내러티브 JS — 하단 앱 독 제외 높이 */
  :root{
    --app-visible-h:calc(100vh - var(--app-dock-h) - env(safe-area-inset-bottom, 0px));
  }

  @supports (height:100dvh){
    :root{
      --app-visible-h:calc(100dvh - var(--app-dock-h) - env(safe-area-inset-bottom, 0px));
    }
  }

  /* 하단 고정 내비가 가리지 않도록 본문·푸터 여유 */
  body{
    padding-bottom:calc(var(--app-dock-h) + env(safe-area-inset-bottom, 0px));
  }

  footer{
    padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .app-dock{
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1002;
    min-height:calc(var(--app-dock-h) + env(safe-area-inset-bottom, 0px));
    padding:6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    margin:0;
    align-items:stretch;
    justify-content:space-around;
    gap:4px;
    background:var(--app-dock-bg);
    backdrop-filter:saturate(1.2) blur(16px);
    -webkit-backdrop-filter:saturate(1.2) blur(16px);
    border-top:1px solid var(--app-dock-border);
    box-shadow:0 -8px 32px rgba(12,40,90,.08);
  }

  /* 전체 화면 메뉴 열릴 때 하단바 숨김 */
  body.nav-drawer-open .app-dock{
    visibility:hidden;
    pointer-events:none;
    transform:translateY(110%);
    transition:transform .28s ease,visibility .28s;
  }

  .app-dock__item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:0;
    padding:6px 4px;
    border-radius:12px;
    text-decoration:none;
    color:#6b7a99;
    font-size:11px;
    font-weight:700;
    letter-spacing:-.02em;
    -webkit-tap-highlight-color:transparent;
    transition:color .2s ease,background .2s ease;
  }

  .app-dock__item:active{
    background:rgba(0,128,255,.08);
  }

  .app-dock__item.is-active{
    color:var(--app-dock-active);
  }

  .app-dock__ico{
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    color:currentColor;
  }

  .app-dock__ico svg{
    width:24px;
    height:24px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .app-dock__lbl{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }

  /* 고정 헤더와 이어지는 앱 상단바 느낌 */
  .gnb.solid{
    box-shadow:0 1px 0 rgba(0,20,40,.06);
  }

}

/* 초소형·폴드 커버: 라벨 최소 크기 유지 */
@media(max-width:380px){
  .app-dock__item{font-size:10px}
  .app-dock__lbl{font-size:10px}
}