/* UST21 공통 바닥 시트 + 폰 공통 토큰 (≤ 760px). ust21-sheet.js 가 .u21s 를 붙였을 때만 먹는다 —
   넓은 화면에서는 클래스가 안 붙으므로 아무것도 바꾸지 않는다. README.md 참고. */
:root{
  --u21m-tap:40px;                 /* 손가락 자리 */
  --u21m-gap:8px;                  /* 화면 가장자리 여백 */
  --u21m-top:calc(8px + env(safe-area-inset-top, 0px));
  --u21m-chip-h:40px;              /* 변수·모드 칩 줄 높이 */
  --u21m-dock-h:56px;              /* 바닥 조작 줄 높이 */
  --u21m-r:16px;                   /* 시트 윗모서리 */
  --u21m-bg:rgba(11,16,25,.96);    /* 시트 바탕 — 페이지 판 색에 맞춰 덮어쓴다 */
  --u21m-line:rgba(255,255,255,.12);
  --u21m-ink:#e8eef6; --u21m-dim:#9aa7b8;
  --u21m-accent:#4da3ff;
  --u21m-sb:env(safe-area-inset-bottom, 0px);
  --u21s-visible:0px;              /* 지금 보이는 시트 높이(js 가 <html> 에 쓴다) */
}

/* ── 시트 ─────────────────────────────────────────────────── */
.u21s-head{ display:none; }
.u21s{
  position:fixed !important; left:0 !important; right:0 !important; bottom:var(--u21s-kb, 0px) !important; top:auto !important;
  inset-inline:0 !important;
  width:auto !important; max-width:none !important; min-width:0 !important;
  height:var(--u21s-h, 56vh) !important; height:var(--u21s-h, 56dvh) !important;
  max-height:88vh !important; max-height:calc(88dvh + 60px) !important; min-height:0 !important;
  margin:0 !important; padding-top:0 !important;
  padding-bottom:calc(12px + var(--u21m-sb)) !important;
  box-sizing:border-box !important;
  border-radius:var(--u21m-r) var(--u21m-r) 0 0 !important;
  border-bottom:0 !important;
  transform:translate3d(0, var(--u21s-y, 0px), 0) !important;
  transition:transform .2s ease-out, height .2s ease-out, visibility 0s linear .2s !important;
  animation:none !important;
  z-index:var(--u21s-z, 1200) !important;
  overflow-x:hidden !important; overflow-y:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  visibility:hidden !important; pointer-events:none !important; opacity:1 !important;
  will-change:transform;
}
.u21s.u21s-open{
  display:var(--u21s-d, block) !important; visibility:visible !important; pointer-events:auto !important;
  transition:transform .2s ease-out, height .2s ease-out, visibility 0s !important;
  box-shadow:0 -10px 36px rgba(0,0,0,.45);
}
.u21s.u21s-flex{ overflow:hidden !important; }
.u21s.u21s-flex.u21s-open{ display:flex !important; flex-direction:column !important; }
.u21s.u21s-flex > .u21s-body{
  flex:1 1 auto !important; min-height:0 !important; max-height:none !important; height:auto !important;
  overflow-x:hidden !important; overflow-y:auto !important;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y;
}
.u21s.u21s-drag{ transition:none !important; }
.u21s.u21s-measure{ height:auto !important; max-height:none !important; transition:none !important; }
.u21s.u21s-measure.u21s-flex > .u21s-body{ flex:0 0 auto !important; overflow:visible !important; }
.u21s .u21s-hide{ display:none !important; }
.u21s.u21s-under{ visibility:hidden !important; pointer-events:none !important; }
.u21s-new:not(.u21s){ display:none; }
.u21s-new.u21s{ background:var(--u21m-bg); color:var(--u21m-ink); padding-left:16px; padding-right:16px;
  border-top:1px solid var(--u21m-line); font-size:14px; line-height:1.55; }

/* 머리 44px: 손잡이 36×4(위에서 8px) · 제목(왼쪽 15px/600) · 닫기(오른쪽 40×40). 늘 보인다 */
.u21s > .u21s-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  position:sticky; top:0; z-index:5;
  flex:0 0 auto;
  height:44px; box-sizing:border-box;
  margin:0 calc(-1 * var(--u21s-pr, 0px)) 4px calc(-1 * var(--u21s-pl, 0px));
  padding:0 4px 0 16px;
  background:var(--u21s-head-bg, var(--u21m-bg));
  border-radius:var(--u21m-r) var(--u21m-r) 0 0;
  border-bottom:1px solid var(--u21m-line);
  touch-action:none; user-select:none; -webkit-user-select:none;
  cursor:grab;
}
.u21s > .u21s-head .u21s-grab{
  position:absolute; top:8px; left:50%; width:36px; height:4px; margin-left:-18px;
  border-radius:2px; background:rgba(255,255,255,.34);
}
.u21s > .u21s-head .u21s-title{
  align-self:flex-end; padding-bottom:7px;
  font-size:15px; font-weight:600; line-height:1.2; letter-spacing:-.01em;
  color:var(--u21m-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.u21s > .u21s-head .u21s-x{
  appearance:none; -webkit-appearance:none; flex:0 0 auto;
  width:40px; height:40px; margin:0 0 1px; padding:0;
  display:grid; place-items:center;
  color:var(--u21m-dim); background:transparent; border:0; border-radius:10px;
  cursor:pointer; touch-action:manipulation;
}
.u21s > .u21s-head .u21s-x:active{ background:rgba(255,255,255,.1); color:var(--u21m-ink); }
.u21s > .u21s-head .u21s-x:focus-visible{ outline:2px solid var(--u21m-accent); outline-offset:-2px; }

/* 전체 높이일 때만 깔리는 막(누르면 닫힌다). 반 높이에서는 지도가 그대로 움직인다 */
.u21s-scrim{
  position:fixed; inset:0; z-index:1199;
  background:rgba(4,7,12,.5);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease-out, visibility 0s linear .2s;
}
.u21s-scrim.is-on{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .2s ease-out, visibility 0s; }

/* 가로로 눕힌 폰: 오른쪽 옆판(폭 ≤ 440px). 끌어내려 닫기는 그대로 */
@media (max-height:500px) and (min-width:560px){
  .u21s{
    left:auto !important; inset-inline:auto 0 !important;
    right:env(safe-area-inset-right, 0px) !important;
    width:min(440px, 58vw) !important;
    border-radius:var(--u21m-r) var(--u21m-r) 0 0 !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .u21s, .u21s.u21s-open, .u21s-scrim, .u21s-scrim.is-on{ transition:none !important; }
}

/* ── 폰 공통 자리(선택 사항 — 페이지가 클래스를 붙여 쓴다) ─────────── */
@media (max-width:760px){
  /* 오른쪽 위 도구 줄: 40×40 아이콘 단추, 많아야 넷 + 더보기 */
  .u21m-tools{
    position:fixed; z-index:30;
    top:var(--u21m-top); right:calc(var(--u21m-gap) + env(safe-area-inset-right, 0px));
    display:flex; align-items:center; gap:2px; padding:2px;
    border-radius:12px;
  }
  .u21m-tools > button, .u21m-tools > a, .u21m-btn{
    width:var(--u21m-tap); height:var(--u21m-tap); min-width:var(--u21m-tap); padding:0;
    display:grid; place-items:center; border-radius:10px; touch-action:manipulation;
  }
  /* 변수·모드 칩 줄: 도구 줄 바로 아래, 가로로 넘긴다 */
  .u21m-chips{
    display:flex; align-items:center; gap:6px;
    height:var(--u21m-chip-h); box-sizing:border-box;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x;
    scroll-snap-type:x proximity;
  }
  .u21m-chips::-webkit-scrollbar{ display:none; }
  .u21m-chips > *{ flex:0 0 auto; min-height:32px; white-space:nowrap; scroll-snap-align:start; }
  /* 바닥 조작 줄(시간 막대 + 재생) ≤ 56px, 범례 칩은 그 바로 위 한 줄 */
  .u21m-dock{
    position:fixed; z-index:20; left:var(--u21m-gap); right:var(--u21m-gap);
    bottom:calc(var(--u21m-gap) + var(--u21m-sb));
    min-height:48px; max-height:var(--u21m-dock-h); box-sizing:border-box;
  }
  .u21m-legend{
    position:fixed; z-index:19; left:var(--u21m-gap); right:var(--u21m-gap);
    bottom:calc(var(--u21m-gap) + var(--u21m-sb) + var(--u21m-dock-h) + 6px);
  }
  /* 지도 눌러 뜨는 작은 카드: 바닥 줄 위(손가락 밑이 아니다), ✕ 로 닫는다 */
  .u21m-card{
    position:fixed; z-index:40; left:var(--u21m-gap); right:var(--u21m-gap); top:auto;
    bottom:calc(var(--u21m-gap) + var(--u21m-sb) + var(--u21m-dock-h) + 6px);
    max-height:42dvh; overflow:auto; overscroll-behavior:contain;
    border-radius:14px;
  }
}