/* ====== SCH-FAB: Base ====== */
:root{
  --sch-fab-size: 56px;
  --sch-fab-item-size: 44px;
  --sch-fab-gap: 10px;
  --sch-fab-z: 9999;
  --sch-brand: #111827;      /* Æ®¸®°Å ±âº» ¹è°æ (£Àº ȸ»ö/ºí·¢Åæ) */
  --sch-brand-contrast: #fff;
  --sch-item-bg: #ffffff;
  --sch-item-text: #111827;
  --sch-shadow: 0 10px 30px rgba(0,0,0,.2);
  --sch-overlay-black: rgba(0,0,0,.5);
  --sch-overlay-white: rgba(255,255,255,.5);
}


.sch-fab{
  position: fixed;
  right: max(38px, env(safe-area-inset-right));
  bottom: max(90px, env(safe-area-inset-bottom));
  z-index:2147483646;
  font-family: inherit;
}


.sch-fab *{ box-sizing: border-box; }


.sch-fab__trigger{
  width: var(--sch-fab-size);
  height: var(--sch-fab-size);
  border-radius: 999px;
  border: none;
  background: var(--sch-brand);
  color: var(--sch-brand-contrast);
  box-shadow: var(--sch-shadow);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .2s ease;
}
.sch-fab__trigger:active{ transform: scale(.96); }
.sch-fab__trigger svg{ fill: currentColor; }


/* Items container */
.sch-fab__items{
  position: absolute;
  right: 0;
  bottom: calc(var(--sch-fab-size) + 12px);
  display: grid;
  grid-auto-rows: var(--sch-fab-item-size);
  gap: var(--sch-fab-gap);
  pointer-events: none;
}


/* Each item */
.sch-fab__item{
  width: max-content;
  max-width: 220px;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  height: var(--sch-fab-item-size);
  background: var(--sch-item-bg);
  color: var(--sch-item-text);
  text-decoration: none;
  border-radius: 999px;
  box-shadow: var(--sch-shadow);
  transform: translateY(10px) scale(.9);
  opacity: 0;
  transition: transform .24s ease, opacity .24s ease;
  pointer-events: none;
}
.sch-fab__item svg{ fill: currentColor; }


/* Label ¼û±è/³ëÃâ(¸ð¹ÙÀÏ ¶§ ÀÚµ¿ ÁٹٲÞ) */
.sch-fab__item span{
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}


/* Open state */
.sch-fab.is-open .sch-fab__item{
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.sch-fab.is-open .sch-fab__item:nth-child(1){ transition-delay: .02s; }
.sch-fab.is-open .sch-fab__item:nth-child(2){ transition-delay: .05s; }
.sch-fab.is-open .sch-fab__item:nth-child(3){ transition-delay: .08s; }
.sch-fab.is-open .sch-fab__item:nth-child(4){ transition-delay: .11s; }


/* Overlay (¿É¼Ç) */
.sch-fab__overlay{
  position: fixed;
  inset: 0;
  background: transparent; /* ±âº»: ¾øÀ½ */
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
z-index:0;
}


.sch-fab.is-open .sch-fab__overlay{
  opacity: 1;
  pointer-events: auto;
}


/* data-overlay °ªÀ¸·Î »ö»ó Àüȯ */
.sch-fab[data-overlay="black"] .sch-fab__overlay{ background: var(--sch-overlay-black); }
.sch-fab[data-overlay="white"] .sch-fab__overlay{ background: var(--sch-overlay-white); }
.sch-fab[data-overlay="none"]  .sch-fab__overlay{ background: transparent; opacity: 0; pointer-events:none; }


/* Á¢±Ù¼º: ¸ð¼Ç ÃÖ¼ÒÈ­ ¼±È£ ½Ã ¾Ö´Ï¸ÞÀÌ¼Ç ÁÙÀÓ */
@media (prefers-reduced-motion: reduce){
  .sch-fab__item,
  .sch-fab__overlay,
  .sch-fab__trigger{
    transition: none !important;
  }
}


/* ÀÛÀº È­¸é º¸¿Ï */
@media (max-width: 380px){
  :root{ --sch-fab-size: 52px; --sch-fab-item-size: 42px; }
  .sch-fab__item span{ font-size: 12px; }
}






/* FAB ¾ÆÀÌÅÛ hover */
.sch-fab__item:hover {
  color: #00B8A9 !important;
}