/* GaonIT Panels (panel.css)
   - Slide-in sheet panels (no z-index usage)
   - Works with Tailwind or plain CSS
   - Toggle by adding/removing .is-open on .gx-panel (JS handles it)
   Structure example:
   <button data-panel-open="#demoPanel">Open</button>
   <div id="demoPanel" class="gx-panel" data-side="right" data-size="md">
     <div class="gx-panel__backdrop" data-panel-close></div>
     <section class="gx-panel__sheet" role="dialog" aria-modal="true" aria-labelledby="demoTitle">
       <header class="gx-panel__head">
         <h2 id="demoTitle" class="gx-panel__title">패널 제목</h2>
         <button class="gx-panel__close" data-panel-close aria-label="닫기">×</button>
       </header>
       <div class="gx-panel__body">내용</div>
       <footer class="gx-panel__foot">
         <button class="gx-panel__btn" data-panel-close>취소</button>
         <button class="gx-panel__btn gx-panel__btn--primary">확인</button>
       </footer>
     </section>
   </div>
*/

:root{
  /* Fallback tokens (override via app.css or Tailwind variables) */
  --gx-surface:#ffffff; --gx-soft:#f8fafc; --gx-border:#e2e8f0;
  --gx-text:#0f172a; --gx-muted:#475569;
  --gx-primary:#2563eb; --gx-primary-700:#1d4ed8;
  --gx-radius:12px; --gx-radius-lg:14px;
}

/* Container fills viewport. No z-index: place this element later in DOM to appear on top. */
.gx-panel{ position:fixed; inset:0; pointer-events:none; display:block; }
.gx-panel.is-open{ pointer-events:auto; }

/* Backdrop fades in/out */
.gx-panel__backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.5); backdrop-filter:saturate(120%) blur(2px); opacity:0; transition:opacity .2s ease; }
.gx-panel.is-open .gx-panel__backdrop{ opacity:1; }

/* Sheet (default: slides from right) */
.gx-panel__sheet{
  position:fixed; top:0; right:0; bottom:0; left:auto;
  width:var(--panel-w, 480px); max-width:96vw; height:auto; max-height:100vh;
  background:var(--gx-surface); color:var(--gx-text);
  border-left:1px solid var(--gx-border);
  box-shadow:0 24px 60px -20px rgba(2,6,23,.25);
  transform:translateX(104%);
  transition:transform .24s cubic-bezier(.22,.8,.25,1), opacity .24s ease;
  display:flex; flex-direction:column; will-change:transform;
  border-top-left-radius:14px; border-bottom-left-radius:14px;
}
.gx-panel.is-open .gx-panel__sheet{ transform:none; }

/* Sides */
.gx-panel[data-side="left"] .gx-panel__sheet{
  left:0; right:auto; border-left:0; border-right:1px solid var(--gx-border);
  transform:translateX(-104%);
  border-top-right-radius:14px; border-bottom-right-radius:14px; border-top-left-radius:0; border-bottom-left-radius:0;
}
.gx-panel[data-side="top"] .gx-panel__sheet{
  left:0; right:0; bottom:auto;
  width:auto; max-width:100vw; height:var(--panel-h, 65vh); max-height:96vh;
  border-left:0; border-right:0; border-bottom:1px solid var(--gx-border);
  transform:translateY(-104%);
  border-radius:0 0 14px 14px;
}
.gx-panel[data-side="bottom"] .gx-panel__sheet{
  left:0; right:0; top:auto;
  width:auto; max-width:100vw; height:var(--panel-h, 65vh); max-height:96vh;
  border-left:0; border-right:0; border-top:1px solid var(--gx-border);
  transform:translateY(104%);
  border-radius:14px 14px 0 0;
}

/* Sizes (width for left/right, height for top/bottom) */
.gx-panel[data-size="sm"] .gx-panel__sheet{ --panel-w:360px; --panel-h:45vh; }
.gx-panel[data-size="md"] .gx-panel__sheet{ --panel-w:480px; --panel-h:65vh; }
.gx-panel[data-size="lg"] .gx-panel__sheet{ --panel-w:640px; --panel-h:80vh; }
.gx-panel[data-size="xl"] .gx-panel__sheet{ --panel-w:840px; --panel-h:92vh; }

/* Header / Body / Footer */
.gx-panel__head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:1rem 1.1rem; border-bottom:1px solid var(--gx-border); }
.gx-panel__title{ font-weight:800; font-size:1.125rem; }
.gx-panel__close{ appearance:none; border:1px solid transparent; background:transparent; color:var(--gx-text);
  border-radius:10px; width:2rem; height:2rem; display:grid; place-items:center; cursor:pointer; opacity:.7; }
.gx-panel__close:hover{ background:var(--gx-soft); opacity:1; }
.gx-panel__close:focus-visible{ outline:2px solid transparent; box-shadow:0 0 0 3px rgba(37,99,235,.35); }

.gx-panel__body{ padding:1rem 1.1rem; overflow:auto; -webkit-overflow-scrolling:touch; }
.gx-panel__foot{ padding:.9rem 1.1rem; border-top:1px solid var(--gx-border); display:flex; gap:.5rem; justify-content:flex-end;
  padding-bottom:calc(.9rem + env(safe-area-inset-bottom)); }

/* Simple buttons (lightweight, panel-scoped) */
.gx-panel__btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; line-height:1;
  padding:.6rem .95rem; border-radius:var(--gx-radius); border:1px solid var(--gx-border); background:#fff; color:var(--gx-text);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; box-shadow:0 1px 0 rgba(15,23,42,.04);
}
.gx-panel__btn:hover{ transform:translateY(-1px); box-shadow:0 10px 25px -12px rgba(2,6,23,.25); background:var(--gx-soft); }
.gx-panel__btn--primary{ background:var(--gx-primary); color:#fff; border-color:transparent; }
.gx-panel__btn--primary:hover{ background:var(--gx-primary-700); transform:translateY(-1px); }

/* Drag handle for top/bottom sheets (optional element <div class="gx-panel__handle"></div> inside head) */
.gx-panel__handle{ width:42px; height:4px; border-radius:999px; background:#cbd5e1; margin:0 auto; }

/* Utility: prevent page scroll when panel open (apply to <body> via JS) */
.gx-panel--lock-scroll{ overflow:hidden; touch-action:none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .gx-panel__backdrop{ transition:none; }
  .gx-panel__sheet{ transition:none; }
}