/* Bottom-sheet primitive. Self-contained: no product styling, no dependency on
   Calendar or Home CSS, so any surface can adopt it by loading this file. */

.lotbi-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(15, 23, 42, .38);
  animation: lotbi-sheet-fade 160ms ease-out;
}

.lotbi-sheet {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  color: var(--lotbi-text-primary, var(--text, #212121));
}

.lotbi-sheet:focus-visible {
  outline: 3px solid rgba(79, 120, 197, .34);
  outline-offset: -3px;
}

/* --- overlay presentation ------------------------------------------------ */
.lotbi-sheet[data-presentation="SHEET"] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--lotbi-sheet-bottom-gap, 0px);
  z-index: 90;
  /* SITE-SHEET-SLIDE-01 (owner 2026-10-26 "팝업이라 슬라이드로 해야지, 화면을 다 가리는 고정형으로 해 버리면 어떻게
     해?"): as tall as its content, at most about 55% of the screen (the visible part when a keyboard is up);
     longer content scrolls inside the body. */
  max-height: 55vh;
  max-height: 55svh;
  max-height: 55dvh;
  max-height: min(55dvh, calc(var(--lotbi-sheet-visual-height, 100dvh) * .55));
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border: 1px solid #dbe1ea;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: #ffffff;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, .22);
  overflow: hidden;
  /* Slides up from the bottom edge. It animates `translate`, not `transform`, so a surface that places its sheet
     with a transform (person-cancel-dialog centres itself) keeps its position, and the drag (transform, only while
     the pointer is down) still composes with it. */
  animation: lotbi-sheet-slide 240ms cubic-bezier(.2, .8, .2, 1);
  touch-action: none;
}

.lotbi-sheet[data-presentation="SHEET"][data-sheet-size="TALL"] {
  max-height: 82vh;
  max-height: 82svh;
  max-height: 82dvh;
  max-height: min(82dvh, calc(var(--lotbi-sheet-visual-height, 100dvh) * .82));
}

.lotbi-sheet[data-presentation="SHEET"][data-dragging="true"] {
  animation: none;
  transition: none;
}

.lotbi-sheet[data-presentation="SHEET"]:not([data-dragging="true"]) {
  transition: transform 180ms ease-out;
}

.lotbi-sheet[data-reduced-motion="true"],
.lotbi-sheet-backdrop[data-reduced-motion="true"] {
  animation: none;
  transition: none;
}

/* --- inline presentation (desktop substitute) ---------------------------- */
.lotbi-sheet[data-presentation="INLINE"] {
  position: static;
  max-height: none;
  padding: 14px;
  border: 1px solid #dbe1ea;
  border-radius: 14px;
  background: #fafbfc;
  box-shadow: none;
}

.lotbi-sheet-grabber {
  flex: 0 0 auto;
  align-self: center;
  width: 44px;
  height: 5px;
  margin-bottom: 2px;
  border-radius: var(--lotbi-radius-pill, 999px);
  background: #c8cfdb;
  cursor: grab;
  touch-action: none;
}

.lotbi-sheet[data-dragging="true"] .lotbi-sheet-grabber { cursor: grabbing; }

.lotbi-sheet-body {
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.lotbi-sheet[data-presentation="SHEET"] .lotbi-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(var(--lotbi-sheet-visual-height, 100dvh) * .55 - 72px);
  overscroll-behavior: contain;
}

.lotbi-sheet[data-presentation="SHEET"][data-sheet-size="TALL"] .lotbi-sheet-body {
  max-height: calc(var(--lotbi-sheet-visual-height, 100dvh) * .82 - 72px);
}

.lotbi-sheet[data-presentation="INLINE"] .lotbi-sheet-body { overflow: visible; }

.lotbi-sheet-dismiss {
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #d5dbe6;
  border-radius: var(--lotbi-radius-button, 12px);
  background: #fff;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.lotbi-sheet-dismiss:hover,
.lotbi-sheet-dismiss:focus-visible {
  border-color: #b9c2d2;
  background: #f3f5f9;
}

.lotbi-sheet-dismiss:focus-visible {
  outline: 3px solid rgba(79, 120, 197, .34);
  outline-offset: 2px;
}

/* --- dark theme ----------------------------------------------------------
   SITE-DARK-SHEET-01: the sheet is the Site's elevated grey (#2F2F2F) with the shared border, not the blue-black #121720 it
   used to be — page #212121, sheet #2F2F2F, the way the rest of Dark reads. Colours come from the theme tokens. */
body[data-site-theme="dark"] .lotbi-sheet {
  border-color: var(--lotbi-border-default, #424242);
  background: var(--lotbi-surface-elevated, #2f2f2f);
  color: var(--lotbi-text-primary, var(--text, #212121));
}

body[data-site-theme="dark"] .lotbi-sheet[data-presentation="INLINE"] { background: var(--lotbi-surface-elevated, #2f2f2f); }
body[data-site-theme="dark"] .lotbi-sheet-backdrop { background: rgba(0, 0, 0, .58); }
body[data-site-theme="dark"] .lotbi-sheet-grabber { background: var(--lotbi-border-strong, #5b5b5b); }

body[data-site-theme="dark"] .lotbi-sheet-dismiss {
  border-color: var(--lotbi-border-strong, #5b5b5b);
  background: var(--lotbi-surface-hover, #353535);
  color: var(--lotbi-text-primary, var(--text, #212121));
}

/* '시스템' 테마는 OS 가 어두울 때만 어둡다. 명시적 dark 블록이 잡지 못하므로
   같은 값을 여기 한 번 더 둔다 — 이게 없으면 시스템 다크에서 시트만 흰색으로 뜬다. */
@media (prefers-color-scheme: dark) {
  body[data-site-theme="system"] .lotbi-sheet {
    border-color: var(--lotbi-border-default, #424242);
    background: var(--lotbi-surface-elevated, #2f2f2f);
    color: var(--lotbi-text-primary, var(--text, #212121));
  }

  body[data-site-theme="system"] .lotbi-sheet[data-presentation="INLINE"] { background: var(--lotbi-surface-elevated, #2f2f2f); }
  body[data-site-theme="system"] .lotbi-sheet-backdrop { background: rgba(0, 0, 0, .58); }
  body[data-site-theme="system"] .lotbi-sheet-grabber { background: var(--lotbi-border-strong, #5b5b5b); }

  body[data-site-theme="system"] .lotbi-sheet-dismiss {
    border-color: var(--lotbi-border-strong, #5b5b5b);
    background: var(--lotbi-surface-hover, #353535);
    color: var(--lotbi-text-primary, var(--text, #212121));
  }
}

@keyframes lotbi-sheet-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lotbi-sheet-slide {
  from { translate: 0 100%; }
  to { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lotbi-sheet,
  .lotbi-sheet-backdrop {
    animation: none;
    transition: none;
  }
}