/* logo-db-grid.css - responsive card size; grid columns set by JS */
.lgb-root {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 16px 40px;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* toggle top */
.lgb-top { width:100%; display:flex; justify-content:center; margin-bottom:18px; }
.lgb-toggle-wrap { display:inline-block; }
.lgb-toggle-label { display:inline-flex; align-items:center; gap:10px; cursor:pointer; color:#333; font-size:14px; }
.lgb-toggle-input { display:none; }
.lgb-toggle-switch { width:44px; height:26px; border-radius:26px; background:#eee; position:relative; display:inline-block; box-shadow:inset 0 1px 2px rgba(0,0,0,0.06); }
.lgb-toggle-switch::after { content:''; width:20px; height:20px; border-radius:50%; background:#fff; position:absolute; left:3px; top:3px; transition: transform .25s ease; box-shadow:0 2px 6px rgba(0,0,0,0.12); }
.lgb-toggle-input:checked + .lgb-toggle-switch { background:#333; }
.lgb-toggle-input:checked + .lgb-toggle-switch::after { transform: translateX(18px); }

/* grid wrapper centered */
.lgb-grid-wrap { width:100%; display:flex; justify-content:center; }

/* grid basics - actual columns/size are set by JS inline styles */
.lgb-grid {
  display: grid;
  gap: 12px;
  justify-content: center;
  align-items: start;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(8, 64px); /* fallback */
}

/* card - add perspective so 3D flip looks correct */
.lgb-card {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  background: #fff;
  perspective: 900px; /* 핵심: 원근감 */
  transition: transform .12s ease, box-shadow .12s ease; /* hover translateY 유지 */
}

/* dark mode root class */
.lgb-mode-dark .lgb-card { background:#111; border-color: rgba(255,255,255,0.06); color:#fff; }

/* flip wrapper inside card (the element we animate) */
.lgb-flip {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  position: relative;
  transform-style: preserve-3d;
  /* ensure centered content */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* front/back faces (two images) */
.lgb-flip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* back face initially rotated 180deg so it becomes front at half-rotation */
.lgb-back {
  transform: rotateY(180deg);
}

/* overlay - ticker on hover */
.lgb-overlay {
  position:absolute; left:0; right:0; top:0; bottom:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0);
  color:#fff; font-weight:600; opacity:0; font-size:11px; text-transform:uppercase; letter-spacing:0.5px;
  transition: opacity .18s ease, background .18s ease;
  pointer-events:none;
}
.lgb-card:hover .lgb-overlay { opacity:1; background: rgba(0,0,0,0.48); }

/* keyframes for rotation (applied to .lgb-flip) */
@keyframes lgb-rotate {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* trigger class: when card has lgb-anim-rotate, its inner .lgb-flip runs animation */
.lgb-anim-rotate .lgb-flip {
  animation-name: lgb-rotate;
  animation-duration: var(--lgb-rotate-duration, 2000ms);
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  /* animation-fill-mode 기본값으로 충분 (360deg는 시각적으로 0deg와 동일) */
}

/* hover elevation (card-level translateY) */
.lgb-card:hover { transform: translateY(-4px); box-shadow: 0 10px 18px rgba(0,0,0,0.06); }

/* small screens */
@media (max-width:420px) {
  .lgb-root { padding-left:12px; padding-right:12px; }
}

/* .lgb-mode-dark .lgb-card 규칙을 덮기 */
.lgb-mode-dark .lgb-card {
  background: #fff;
  border-color: rgba(0,0,0,0.06);
}