/* ─────────────────────────────────────────
   GaonIT UI (gx-*) — Tailwind 무드 Standalone
   - Tailwind CDN과 함께 써도 충돌 없음 (접두사 클래스만 사용)
   - 컬러/라운드/그림자 토큰만 바꾸면 전체 테마 변경
────────────────────────────────────────── */

/* ===== Design Tokens ===== */
:root{
  --gx-radius: 12px;
  --gx-radius-lg: 14px;
  --gx-shadow: 0 10px 30px -12px rgba(2,6,23,.25);

  --gx-surface: #ffffff;
  --gx-soft: #f8fafc;
  --gx-soft-2: #eef2f7;
  --gx-border: #e2e8f0;
  --gx-text: #0f172a;     /* slate-900 */
  --gx-muted: #475569;    /* slate-600 */

  --gx-primary: #2563eb;        /* indigo-600 */
  --gx-primary-600:#2563eb;
  --gx-primary-700:#1d4ed8;
  --gx-primary-100:#eff6ff;
  --gx-primary-200:#bfdbfe;

  --gx-success:#059669;
  --gx-success-100:#ecfdf5; --gx-success-200:#a7f3d0;

  --gx-info:#0ea5e9;
  --gx-info-100:#f0f9ff; --gx-info-200:#bae6fd;

  --gx-warning:#d97706;
  --gx-warning-100:#fffbeb; --gx-warning-200:#fde68a;

  --gx-danger:#e11d48;
  --gx-danger-100:#fff1f2; --gx-danger-200:#fecdd3;
}

/* ===== Buttons =====
  .gx-btn                  : 기본 버튼
  ├─ 색상: --primary|--secondary|--success|--info|--warning|--danger|--ghost|--link|--outline
  ├─ 크기: --sm | (기본) | --lg
  ├─ 아이콘: .gx-btn__icon (왼쪽/오른쪽 어디든)
  ├─ 아이콘전용: .gx-btn--icon
  ├─ 로딩: .is-loading (스피너 오버레이)
  └─ 그룹: .gx-btn-group > .gx-btn
*/
.gx-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; line-height:1;
  padding:.65rem 1rem;
  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-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 25px -12px rgba(2,6,23,.25) }
.gx-btn:active{ transform:translateY(0) }
.gx-btn:focus-visible{ outline:2px solid transparent; box-shadow:0 0 0 3px rgba(37,99,235,.35) }
.gx-btn[disabled], .gx-btn.is-loading{ opacity:.7; pointer-events:none }

/* sizes */
.gx-btn--sm{ padding:.5rem .75rem; font-size:.875rem; border-radius:10px }
.gx-btn--lg{ padding:.8rem 1.15rem; font-size:1rem; border-radius:14px }

/* icon-only */
.gx-btn--icon{ padding:.55rem; width:2.25rem; height:2.25rem; justify-content:center }

/* color variants */
.gx-btn--primary{ background:var(--gx-primary); border-color:transparent; color:#fff }
.gx-btn--primary:hover{ background:var(--gx-primary-700) }

.gx-btn--secondary{ background:#111827; border-color:transparent; color:#fff }
.gx-btn--secondary:hover{ background:#0b1220 }

.gx-btn--success{ background:var(--gx-success); border-color:transparent; color:#fff }
.gx-btn--info{ background:var(--gx-info); border-color:transparent; color:#fff }
.gx-btn--warning{ background:var(--gx-warning); border-color:transparent; color:#fff }
.gx-btn--danger{ background:var(--gx-danger); border-color:transparent; color:#fff }

/* outline */
.gx-btn--outline{ background:#fff; color:var(--gx-text) }
.gx-btn--outline.gx-btn--primary{ border-color:var(--gx-primary-200); color:var(--gx-primary-600) }
.gx-btn--outline.gx-btn--success{ border-color:var(--gx-success-200); color:var(--gx-success) }
.gx-btn--outline.gx-btn--info{ border-color:var(--gx-info-200); color:var(--gx-info) }
.gx-btn--outline.gx-btn--warning{ border-color:var(--gx-warning-200); color:var(--gx-warning) }
.gx-btn--outline.gx-btn--danger{ border-color:var(--gx-danger-200); color:var(--gx-danger) }
.gx-btn--outline:hover{ background:#f8fafc }

/* subtle (soft background) */
.gx-btn--subtle{ border-color:transparent; background:var(--gx-soft); color:#111827 }
.gx-btn--subtle:hover{ background:#eef2f7 }

/* ghost (transparent) */
.gx-btn--ghost{ background:transparent; border-color:transparent; color:#111827 }
.gx-btn--ghost:hover{ background:#f8fafc }

/* link style */
.gx-btn--link{ background:transparent; border-color:transparent; color:var(--gx-primary); padding:.25rem .25rem; border-radius:8px }
.gx-btn--link:hover{ text-decoration:underline; background:rgba(37,99,235,.06) }

/* icon spacing */
.gx-btn__icon{ font-size:1.05em; line-height:0 }
.gx-btn__icon.right{ margin-left:.25rem }
.gx-btn__icon.left{ margin-right:.25rem }

/* loading spinner */
.gx-btn.is-loading{ position:relative; color:transparent }
.gx-btn.is-loading::after{
  content:""; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%;
  border:2.5px solid #cbd5e1; border-top-color:currentColor; animation:gx-spin .8s linear infinite;
}
@keyframes gx-spin{ to{ transform:translate(-50%,-50%) rotate(360deg) } }

/* group */
.gx-btn-group{ display:inline-flex; gap:0 }
.gx-btn-group .gx-btn{ border-radius:0 }
.gx-btn-group .gx-btn:first-child{ border-top-left-radius:var(--gx-radius); border-bottom-left-radius:var(--gx-radius) }
.gx-btn-group .gx-btn:last-child{ border-top-right-radius:var(--gx-radius); border-bottom-right-radius:var(--gx-radius) }
.gx-btn-group .gx-btn + .gx-btn{ margin-left:-1px } /* border 겹침 제거 */

/* ===== Alerts =====
  .gx-alert + .gx-alert--{primary|success|info|warning|danger}
  .gx-alert--solid : 솔리드 배경
  닫기버튼: .gx-alert__close (선택)
*/
.gx-alert{
  position: relative; display:flex; gap:.75rem; align-items:flex-start;
  padding:.875rem 1rem; border:1px solid var(--gx-border);
  background:var(--gx-soft); color:var(--gx-text);
  border-radius: var(--gx-radius); box-shadow: var(--gx-shadow);
  line-height:1.35; animation: gx-fade-slide .18s ease-out both;
}
@keyframes gx-fade-slide{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)}}
.gx-alert__icon{font-size:1.125rem; margin-top:.125rem; color:var(--gx-muted)}
.gx-alert__body{flex:1 1 auto; min-width:0}
.gx-alert__title{font-weight:700; margin-bottom:.125rem}
.gx-alert__desc{opacity:.9}
.gx-alert__close{
  position:absolute; top:.5rem; right:.5rem; width:1.75rem; height:1.75rem;
  display:grid; place-items:center; border-radius:8px; border:1px solid transparent;
  background:transparent; color:inherit; opacity:.6; cursor:pointer; transition:all .15s ease;
}
.gx-alert__close:hover{opacity:1; background:rgba(2,6,23,.04); border-color:rgba(2,6,23,.06)}
.gx-alert--primary{ background:var(--gx-primary-100); border-color:var(--gx-primary-200); color:#1e3a8a }
.gx-alert--primary .gx-alert__icon{ color:var(--gx-primary) }
.gx-alert--success{ background:var(--gx-success-100); border-color:var(--gx-success-200); color:#065f46 }
.gx-alert--success .gx-alert__icon{ color:var(--gx-success) }
.gx-alert--info{ background:var(--gx-info-100); border-color:var(--gx-info-200); color:#075985 }
.gx-alert--info .gx-alert__icon{ color:var(--gx-info) }
.gx-alert--warning{ background:var(--gx-warning-100); border-color:var(--gx-warning-200); color:#7c2d12 }
.gx-alert--warning .gx-alert__icon{ color:var(--gx-warning) }
.gx-alert--danger{ background:var(--gx-danger-100); border-color:var(--gx-danger-200); color:#7f1d1d }
.gx-alert--danger .gx-alert__icon{ color:var(--gx-danger) }
.gx-alert--solid{ color:#fff; border-color:transparent }
.gx-alert--solid.gx-alert--primary{ background:var(--gx-primary) }
.gx-alert--solid.gx-alert--success{ background:var(--gx-success) }
.gx-alert--solid.gx-alert--info{ background:var(--gx-info) }
.gx-alert--solid.gx-alert--warning{ background:var(--gx-warning) }
.gx-alert--solid.gx-alert--danger{ background:var(--gx-danger) }
.gx-alert--solid .gx-alert__icon{ color:#fff; opacity:.95 }

/* ===== Tables =====
  래퍼: .gx-table-card > .gx-table-responsive > table.gx-table
  옵션: --striped / --hover / --compact / --sticky / --bordered
  셀 정렬: .gx-cell--num (우측정렬, 고정폭 숫자)
*/
.gx-table-card{ background:var(--gx-surface); border:1px solid var(--gx-border);
  border-radius: var(--gx-radius-lg); box-shadow: var(--gx-shadow); overflow:hidden }
.gx-table-responsive{ overflow:auto; -webkit-overflow-scrolling:touch }
table.gx-table{
  width:100%; border-collapse: separate; border-spacing:0; min-width:100%; font-size:.9375rem;
}
.gx-table thead th{
  position:sticky; top:0; z-index:1;
  background:var(--gx-soft); color:#334155; font-weight:700; text-align:left;
  padding:.75rem 1rem; border-bottom:1px solid var(--gx-border); white-space:nowrap;
}
.gx-table thead th:first-child{ border-top-left-radius: var(--gx-radius-lg) }
.gx-table thead th:last-child{ border-top-right-radius: var(--gx-radius-lg) }
.gx-table tbody td{ padding:.75rem 1rem; border-bottom:1px solid var(--gx-border); vertical-align:middle }
.gx-table tfoot td{ padding:.75rem 1rem; border-top:1px solid var(--gx-border); background:var(--gx-soft); color:#475569 }
.gx-table--striped tbody tr:nth-child(odd){ background:#fcfdff }
.gx-table--hover tbody tr:hover{ background:#f1f5f9 }
.gx-table--compact thead th, .gx-table--compact tbody td{ padding:.55rem .75rem }
.gx-table--bordered td, .gx-table--bordered th{ border-right:1px solid var(--gx-border) }
.gx-table--bordered td:last-child, .gx-table--bordered th:last-child{ border-right:0 }
.gx-cell--num{ text-align:right; font-variant-numeric: tabular-nums; }

/* 정렬 데코 */
.gx-sortable{ cursor:pointer; user-select:none; padding-right:1.25rem !important; position:relative }
.gx-sortable::after{
  content:"▾"; position:absolute; right:.5rem; top:50%; transform:translateY(-46%); opacity:.35; font-size:.85em;
}
.gx-sortable[data-order="asc"]::after{ content:"▴" }
.gx-sortable:hover::after{ opacity:.75 }

/* 뱃지 */
.gx-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .5rem; border-radius:999px; font-size:.8125rem; font-weight:600;
  border:1px solid var(--gx-border); background:var(--gx-soft); color:var(--gx-text);
}
.gx-badge--success{ background:var(--gx-success-100); border-color:var(--gx-success-200); color:#065f46 }
.gx-badge--warning{ background:var(--gx-warning-100); border-color:var(--gx-warning-200); color:#7c2d12 }
.gx-badge--danger{ background:var(--gx-danger-100); border-color:var(--gx-danger-200); color:#7f1d1d }

.gx-table__empty{ text-align:center; color:#64748b; padding:2.25rem 1rem }

/* ===== Toast =====
  컨테이너: .gx-toasts (위치 modifier: --tr|--br|--tl|--bl)
  항목: .gx-toast + --{success|info|warning|danger}
*/
.gx-toasts{position:fixed; z-index:60; display:flex; flex-direction:column; gap:.5rem}
.gx-toasts--tr{ right:1rem; top:1rem }
.gx-toasts--br{ right:1rem; bottom:1rem }
.gx-toasts--tl{ left:1rem; top:1rem }
.gx-toasts--bl{ left:1rem; bottom:1rem }
.gx-toast{
  display:flex; gap:.6rem; align-items:flex-start; max-width:420px; padding:.75rem .9rem;
  border:1px solid var(--gx-border); background:var(--gx-surface); color:var(--gx-text);
  border-radius:12px; box-shadow:var(--gx-shadow); animation:gx-pop .18s ease-out both;
}
@keyframes gx-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.gx-toast__icon{margin-top:.1rem; opacity:.9}
.gx-toast__title{font-weight:700; margin-bottom:.1rem}
.gx-toast__close{margin-left:auto; opacity:.6; background:transparent; border:0; cursor:pointer}
.gx-toast--success{border-color:#a7f3d0;background:#ecfdf5}
.gx-toast--info{border-color:#bae6fd;background:#f0f9ff}
.gx-toast--warning{border-color:#fde68a;background:#fffbeb}
.gx-toast--danger{border-color:#fecdd3;background:#fff1f2}
.gx-toast__bar{height:3px; background:rgba(15,23,42,.08); border-radius:999px; overflow:hidden; margin-top:.35rem}
.gx-toast__bar>span{display:block; height:100%; width:100%; background:linear-gradient(90deg, var(--gx-primary), #60a5fa); transform-origin:left; animation:gx-toastbar 3.2s linear forwards}
@keyframes gx-toastbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ===== Modal =====
  백드롭: .gx-backdrop (공용 1개)
  모달: .gx-modal + .gx-modal__panel
  크기: .gx-modal[data-size="sm|md|lg|xl"]
  고정: data-modal-static (바깥클릭/ESC 차단)
*/
.gx-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); backdrop-filter:saturate(120%) blur(2px); z-index:70; opacity:0; pointer-events:none; transition:opacity .2s}
.gx-modal{position:fixed; inset:0; display:grid; place-items:center; z-index:71; pointer-events:none; opacity:0; transition:opacity .2s}
.gx-modal__panel{
  width:min(720px,92vw); background:var(--gx-surface); border:1px solid var(--gx-border); border-radius:16px; box-shadow:var(--gx-shadow);
  transform:translateY(8px) scale(.98); transition:transform .22s ease, opacity .22s ease; opacity:.98; max-height:85vh; display:flex; flex-direction:column;
}
.gx-modal__head{display:flex; align-items:center; justify-content:space-between; padding:1rem 1.1rem; border-bottom:1px solid var(--gx-border); font-weight:700}
.gx-modal__body{padding:1rem 1.1rem; overflow:auto}
.gx-modal__foot{padding:.9rem 1.1rem; border-top:1px solid var(--gx-border); display:flex; gap:.5rem; justify-content:flex-end}
.gx-modal.is-open, .gx-backdrop.is-open{opacity:1; pointer-events:auto}
.gx-modal.is-open .gx-modal__panel{transform:none; opacity:1}
.gx-modal[data-size="sm"] .gx-modal__panel{ width:min(440px,92vw) }
.gx-modal[data-size="lg"] .gx-modal__panel{ width:min(960px,94vw) }
.gx-modal[data-size="xl"] .gx-modal__panel{ width:min(1140px,96vw) }

/* ===== Progress / Spinner ===== */
.gx-progress{height:10px; background:#eef2f7; border-radius:999px; overflow:hidden; border:1px solid var(--gx-border)}
.gx-progress__bar{height:100%; width:0%; background:linear-gradient(90deg, var(--gx-primary), #60a5fa); transition:width .3s ease}
.gx-progress--striped .gx-progress__bar{background-size:22px 22px; background-image:linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%, transparent)}
.gx-progress--animated .gx-progress__bar{ animation: gx-bar 1s linear infinite }
@keyframes gx-bar{ from{background-position:0 0} to{background-position:22px 0} }

.gx-spinner{width:20px; height:20px; border-radius:50%; border:3px solid #cbd5e1; border-top-color:var(--gx-primary); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Skeleton ===== */
.gx-skeleton{display:block; width:100%; height:1rem; border-radius:8px; background:linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 37%,#e5e7eb 63%); background-size:400% 100%; animation:gx-shimmer 1.2s linear infinite}
@keyframes gx-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.gx-skeleton--circle{border-radius:999px}
.gx-skeleton--sm{height:.75rem} .gx-skeleton--lg{height:1.5rem}

/* ===== Tooltip =====
  data-tooltip="내용"  (기본: 상단)
*/
[data-tooltip]{position:relative}
[data-tooltip]::after{
  content:attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%) scale(.96);
  background:#0f172a; color:#fff; font-size:.75rem; line-height:1; padding:.35rem .5rem; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .15s, transform .15s; box-shadow:0 6px 20px rgba(0,0,0,.2); z-index:60;
}
[data-tooltip]::before{
  content:""; position:absolute; left:50%; bottom:100%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#0f172a; opacity:0; transition:opacity .15s; z-index:60;
}
[data-tooltip]:hover::after,[data-tooltip]:hover::before{opacity:1; transform:translateX(-50%) scale(1)}