/* ================================================================
 * 유틸리티 - Skeleton, 토스트, 공통 버튼
 * ================================================================ */

/* === Skeleton 로딩 === */
.gab-skeleton-box,
.gab-skeleton-line {
    background: linear-gradient(90deg, var(--gab-gray-200) 25%, var(--gab-gray-100) 50%, var(--gab-gray-200) 75%);
    background-size: 200% 100%;
    animation: gab-shimmer 1.5s infinite;
    border-radius: var(--gab-radius-sm);
}

.gab-skeleton-box {
    width: 100%;
    aspect-ratio: 4 / 3;
}

.gab-skeleton-line {
    height: 14px;
    margin-bottom: 8px;
}

@keyframes gab-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === 토스트 === */
.gab-toast-container {
    position: fixed;
    bottom: var(--gab-space-6);
    right: var(--gab-space-6);
    z-index: var(--gab-z-tooltip);
    display: flex;
    flex-direction: column;
    gap: var(--gab-space-2);
}

body[dir="rtl"] .gab-toast-container {
    right: auto;
    left: var(--gab-space-6);
}

.gab-toast {
    background: var(--gab-gray-900);
    color: white;
    padding: var(--gab-space-3) var(--gab-space-5);
    border-radius: var(--gab-radius);
    box-shadow: var(--gab-shadow-xl);
    display: flex;
    align-items: center;
    gap: var(--gab-space-2);
    font-size: var(--gab-text-sm);
    font-weight: 500;
    animation: gab-toast-in 0.3s ease;
    max-width: 360px;
}

.gab-toast-success { border-left: 4px solid var(--gab-success); }
.gab-toast-error { border-left: 4px solid var(--gab-danger); }
.gab-toast i { font-size: 18px; }
.gab-toast-success i { color: var(--gab-success); }
.gab-toast-error i { color: var(--gab-danger); }

@keyframes gab-toast-in {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* === 빈 상태 === */
.gab-empty {
    text-align: center;
    padding: var(--gab-space-16) var(--gab-space-6);
    color: var(--gab-gray-500);
}

.gab-empty-icon {
    font-size: 64px;
    color: var(--gab-gray-300);
    margin-bottom: var(--gab-space-4);
}

.gab-empty-title {
    font-size: var(--gab-text-lg);
    font-weight: 700;
    color: var(--gab-gray-700);
    margin-bottom: var(--gab-space-2);
}

/* === 페이지 컨테이너 여백 === */
.gab-page-list .gab-main,
.gab-page-detail .gab-main {
    padding: var(--gab-space-6) 0 var(--gab-space-16);
    background: var(--gab-gray-50);
}

/* === 반응형 헬퍼 === */
@media (max-width: 768px) {
    .gab-hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .gab-hide-desktop { display: none !important; }
}

/* ===== 국기 SVG (이모지 국기 대체 — OS/브라우저 호환) ===== */
.gab-flag-svg { width:20px; height:14px; border-radius:2px; display:inline-block; vertical-align:middle; flex-shrink:0; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.gab-lang-flag { display:inline-flex; align-items:center; }
.gab-lang-trigger .gab-flag-svg, .gab-lang-option .gab-flag-svg { width:22px; height:15px; }
.gab-auth-lang .gab-flag-svg { width:20px; height:13px; margin-inline-end:6px; vertical-align:-2px; }
.gab-footer-made .gab-flag-svg { width:18px; height:12px; margin-inline-end:5px; vertical-align:-1px; }
/* 수출국 코드 칩 */
.gab-cc-chip { display:inline-block; padding:2px 7px; margin:2px; border-radius:5px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.72); font-size:11px; font-weight:700; letter-spacing:.02em; }

/* ====================================================================
   12컬럼 그리드 (Bootstrap식 반응형) — [부분5 v50]
   사용: <div class="gab-row"><div class="gab-col-12 gab-col-md-6 gab-col-lg-4">…</div></div>
   ==================================================================== */
.gab-row { display:flex; flex-wrap:wrap; margin-left:-12px; margin-right:-12px; }
.gab-row > * { box-sizing:border-box; padding-left:12px; padding-right:12px; }
.gab-col { flex:1 0 0%; }
.gab-col-auto { flex:0 0 auto; width:auto; }
.gab-row.gab-g-0 { margin-left:0; margin-right:0; } .gab-row.gab-g-0 > * { padding-left:0; padding-right:0; }
.gab-row.gab-g-2 { margin-left:-6px; margin-right:-6px; } .gab-row.gab-g-2 > * { padding-left:6px; padding-right:6px; }
.gab-row.gab-g-4 { margin-left:-18px; margin-right:-18px; } .gab-row.gab-g-4 > * { padding-left:18px; padding-right:18px; }
.gab-row.gab-gy-2 { row-gap:12px; } .gab-row.gab-gy-3 { row-gap:18px; } .gab-row.gab-gy-4 { row-gap:24px; }
.gab-col-1 { flex:0 0 auto; width:8.3333%; }
.gab-col-2 { flex:0 0 auto; width:16.6667%; }
.gab-col-3 { flex:0 0 auto; width:25.0000%; }
.gab-col-4 { flex:0 0 auto; width:33.3333%; }
.gab-col-5 { flex:0 0 auto; width:41.6667%; }
.gab-col-6 { flex:0 0 auto; width:50.0000%; }
.gab-col-7 { flex:0 0 auto; width:58.3333%; }
.gab-col-8 { flex:0 0 auto; width:66.6667%; }
.gab-col-9 { flex:0 0 auto; width:75.0000%; }
.gab-col-10 { flex:0 0 auto; width:83.3333%; }
.gab-col-11 { flex:0 0 auto; width:91.6667%; }
.gab-col-12 { flex:0 0 auto; width:100.0000%; }
@media (min-width:576px){
  .gab-col-sm { flex:1 0 0%; } .gab-col-sm-auto { flex:0 0 auto; width:auto; }
  .gab-col-sm-1 { flex:0 0 auto; width:8.3333%; }
  .gab-col-sm-2 { flex:0 0 auto; width:16.6667%; }
  .gab-col-sm-3 { flex:0 0 auto; width:25.0000%; }
  .gab-col-sm-4 { flex:0 0 auto; width:33.3333%; }
  .gab-col-sm-5 { flex:0 0 auto; width:41.6667%; }
  .gab-col-sm-6 { flex:0 0 auto; width:50.0000%; }
  .gab-col-sm-7 { flex:0 0 auto; width:58.3333%; }
  .gab-col-sm-8 { flex:0 0 auto; width:66.6667%; }
  .gab-col-sm-9 { flex:0 0 auto; width:75.0000%; }
  .gab-col-sm-10 { flex:0 0 auto; width:83.3333%; }
  .gab-col-sm-11 { flex:0 0 auto; width:91.6667%; }
  .gab-col-sm-12 { flex:0 0 auto; width:100.0000%; }
}
@media (min-width:768px){
  .gab-col-md { flex:1 0 0%; } .gab-col-md-auto { flex:0 0 auto; width:auto; }
  .gab-col-md-1 { flex:0 0 auto; width:8.3333%; }
  .gab-col-md-2 { flex:0 0 auto; width:16.6667%; }
  .gab-col-md-3 { flex:0 0 auto; width:25.0000%; }
  .gab-col-md-4 { flex:0 0 auto; width:33.3333%; }
  .gab-col-md-5 { flex:0 0 auto; width:41.6667%; }
  .gab-col-md-6 { flex:0 0 auto; width:50.0000%; }
  .gab-col-md-7 { flex:0 0 auto; width:58.3333%; }
  .gab-col-md-8 { flex:0 0 auto; width:66.6667%; }
  .gab-col-md-9 { flex:0 0 auto; width:75.0000%; }
  .gab-col-md-10 { flex:0 0 auto; width:83.3333%; }
  .gab-col-md-11 { flex:0 0 auto; width:91.6667%; }
  .gab-col-md-12 { flex:0 0 auto; width:100.0000%; }
}
@media (min-width:992px){
  .gab-col-lg { flex:1 0 0%; } .gab-col-lg-auto { flex:0 0 auto; width:auto; }
  .gab-col-lg-1 { flex:0 0 auto; width:8.3333%; }
  .gab-col-lg-2 { flex:0 0 auto; width:16.6667%; }
  .gab-col-lg-3 { flex:0 0 auto; width:25.0000%; }
  .gab-col-lg-4 { flex:0 0 auto; width:33.3333%; }
  .gab-col-lg-5 { flex:0 0 auto; width:41.6667%; }
  .gab-col-lg-6 { flex:0 0 auto; width:50.0000%; }
  .gab-col-lg-7 { flex:0 0 auto; width:58.3333%; }
  .gab-col-lg-8 { flex:0 0 auto; width:66.6667%; }
  .gab-col-lg-9 { flex:0 0 auto; width:75.0000%; }
  .gab-col-lg-10 { flex:0 0 auto; width:83.3333%; }
  .gab-col-lg-11 { flex:0 0 auto; width:91.6667%; }
  .gab-col-lg-12 { flex:0 0 auto; width:100.0000%; }
}
@media (min-width:1200px){
  .gab-col-xl { flex:1 0 0%; } .gab-col-xl-auto { flex:0 0 auto; width:auto; }
  .gab-col-xl-1 { flex:0 0 auto; width:8.3333%; }
  .gab-col-xl-2 { flex:0 0 auto; width:16.6667%; }
  .gab-col-xl-3 { flex:0 0 auto; width:25.0000%; }
  .gab-col-xl-4 { flex:0 0 auto; width:33.3333%; }
  .gab-col-xl-5 { flex:0 0 auto; width:41.6667%; }
  .gab-col-xl-6 { flex:0 0 auto; width:50.0000%; }
  .gab-col-xl-7 { flex:0 0 auto; width:58.3333%; }
  .gab-col-xl-8 { flex:0 0 auto; width:66.6667%; }
  .gab-col-xl-9 { flex:0 0 auto; width:75.0000%; }
  .gab-col-xl-10 { flex:0 0 auto; width:83.3333%; }
  .gab-col-xl-11 { flex:0 0 auto; width:91.6667%; }
  .gab-col-xl-12 { flex:0 0 auto; width:100.0000%; }
}