/* ------------------------------------------------------------
 * components.css
 * - 공용 카드/버튼/볼/칩/상태 박스
 * ------------------------------------------------------------ */

.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.card-head--tight{margin-bottom:12px}
.card-head h2{
  margin:0;
  color:var(--text-strong);
  font-size:19px;
  line-height:1.25;
  font-weight:500;
  letter-spacing:-0.03em;
}
.card-head-sub{
  color:var(--text-soft);
  font-size:12px;
  line-height:1.5;
  font-weight:500;
}
.card-head > div{min-width:0}

.meta-pill,
.chip,
.pattern-chip,
.online-subtab,
.chart-tab-btn,
.storage-page-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(208,216,210,0.88);
  background:rgba(255,255,255,0.96);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
  white-space:nowrap;
  font-size:12px;
  font-weight:800;
}
.online-subtab.active,
.chart-tab-btn.active,
.storage-page-btn.is-active{
  border-color:transparent;
  background:linear-gradient(180deg, #35d0ab 0%, #1fb48f 100%);
  color:#ffffff;
  box-shadow:0 10px 18px rgba(31,180,143,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
}

.online-subtabs,
.chart-tabs,
.storage-pagination{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.online-subtabs::-webkit-scrollbar,
.chart-tabs::-webkit-scrollbar,
.storage-pagination::-webkit-scrollbar{display:none}

/* ------------------------------------------------------------
 * 버튼 시스템 재정비
 * - primary / secondary / ghost / danger 체계
 * - 전체 높이와 그림자를 줄여 더 세련되고 가볍게 정리합니다.
 * ------------------------------------------------------------ */
.btn,
.hero-btn,
.modal-btn,
.storage-loadmore-btn,
.storage-refresh-btn,
.shared-edit-btn,
.shared-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:36px;
  padding:0 13px;
  border-radius:12px;
  border:1px solid transparent;
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:-0.02em;
  white-space:nowrap;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease, opacity .14s ease;
}

.btn:active,
.hero-btn:active,
.modal-btn:active,
.storage-loadmore-btn:active,
.storage-refresh-btn:active,
.shared-edit-btn:active,
.shared-action-btn:active{
  transform:translateY(1px) scale(.988);
}

.btn:disabled,
.hero-btn:disabled,
.modal-btn:disabled,
.storage-loadmore-btn:disabled,
.storage-refresh-btn:disabled,
.shared-edit-btn:disabled,
.shared-action-btn:disabled{
  opacity:.56;
  cursor:default;
  transform:none;
  box-shadow:none;
}

.btn-primary,
.hero-btn,
.modal-btn:not(.modal-btn-light),
.shared-action-btn:not(.shared-action-btn--ghost):not(.btn-secondary):not(.btn-danger){
  background:linear-gradient(180deg, #35d0ab 0%, #1fb48f 100%);
  color:#ffffff;
  border-color:rgba(31,180,143,0.18);
  box-shadow:0 6px 14px rgba(31,180,143,0.16), inset 0 1px 0 rgba(255,255,255,0.24);
}

.btn-secondary,
.modal-btn-light,
.storage-refresh-btn,
.shared-edit-btn,
.storage-loadmore-btn{
  background:rgba(255,255,255,0.96);
  color:var(--text-strong);
  border-color:rgba(208,216,210,0.88);
  box-shadow:0 2px 8px rgba(20,28,26,0.05), inset 0 1px 0 rgba(255,255,255,0.82);
}

.btn-ghost,
.shared-action-btn--ghost{
  background:rgba(255,255,255,0.42);
  color:var(--text-soft);
  border-color:rgba(208,216,210,0.55);
  box-shadow:none;
}

.btn-danger{
  background:linear-gradient(180deg, #fff8f6 0%, #f2e3de 100%);
  color:#94463d;
  border-color:rgba(180,84,74,0.16);
  box-shadow:0 3px 8px rgba(180,84,74,0.06), inset 0 1px 0 rgba(255,255,255,0.72);
}

.btn-icon{
  width:34px;
  min-width:34px;
  min-height:34px;
  padding:0;
  border-radius:50%;
}

.btn-block{width:100%}

.btn-sm{
  min-height:28px;
  padding:0 10px;
  border-radius:10px;
  font-size:11px;
}

.btn.is-done,
.shared-action-btn.is-done{
  filter:saturate(.94);
}

@media (hover:hover){
  .btn:hover,
  .hero-btn:hover,
  .modal-btn:hover,
  .storage-loadmore-btn:hover,
  .storage-refresh-btn:hover,
  .shared-edit-btn:hover,
  .shared-action-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 5px 10px rgba(83,56,18,0.08);
  }
  .btn-ghost:hover,
  .shared-action-btn--ghost:hover{
    background:rgba(255,255,255,0.72);
    box-shadow:none;
  }
}

.modal-actions,
.shared-edit-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.modal-actions > *,
.shared-edit-actions > *{flex:1 1 0}

.balls-row,
.storage-ball-row,
.ticket-number-row,
.number-ball-row,
.share-preview-balls,
.shared-post-ball-row,
.online-draw-balls-row,
.online-ticket-balls,
.shared-board-balls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.ball,
.storage-ball,
.ticket-number,
.online-lotto-ball,
.shared-board-mini-ball{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  font-size:17px;
  font-weight:900;
  line-height:1;
  box-shadow:0 8px 16px rgba(88,63,24,0.12), inset 0 1px 0 rgba(255,255,255,0.46);
  border:1px solid rgba(45,31,13,0.08);
}
.storage-ball,
.shared-board-mini-ball{width:34px;height:34px;font-size:14px}
.online-lotto-ball{width:38px;height:38px;font-size:15px}

.ball-yellow{background:#efc94a;color:#332405}
.ball-blue{background:#5a88e5;color:#fff}
.ball-red{background:#eb6b5f;color:#fff}
.ball-gray{background:#a4b0c2;color:#fff}
.ball-green{background:#59b86a;color:#fff}

.online-empty,
.online-error,
.online-loading{
  padding:18px 14px;
  border-radius:18px;
  background:rgba(255,252,246,0.78);
  border:1px dashed rgba(190,149,80,0.24);
  color:var(--text-soft);
  text-align:center;
  font-size:13px;
  line-height:1.6;
  font-weight:500;
}
.online-error{color:var(--danger)}

.info-box{
  padding:15px;
  border-radius:18px;
  background:rgba(255,255,255,0.96);
  border:1px solid rgba(208,216,210,0.88);
  box-shadow:var(--shadow-soft);
}
.info-box-title{
  color:var(--text-strong);
  font-size:15px;
  font-weight:700;
  margin-bottom:6px;
}
.info-box-text{
  color:var(--text-soft);
  font-size:12px;
  line-height:1.65;
  font-weight:500;
}

.enter-up{
  animation:enterUp .28s ease-out;
}
@keyframes enterUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}


.hero-btn,
.modal-btn,
.storage-loadmore-btn,
.storage-refresh-btn,
.shared-edit-btn,
.shared-action-btn,
.shared-community-card,
.tab-btn,
.chart-tab-btn,
.online-subtab{
  will-change:transform;
}
.shared-community-card:hover,
.tab-btn:hover,
.chart-tab-btn:hover,
.online-subtab:hover{
  filter:saturate(1.02);
}
@media (min-width:401px){
  .ball{width:48px;height:48px;font-size:19px}
  .online-lotto-ball{width:40px;height:40px;font-size:16px}
}


.card-head h2,
.hero-btn,
.modal-btn,
.storage-loadmore-btn,
.storage-refresh-btn,
.shared-edit-btn,
.shared-action-btn,
.online-subtab.active,
.chart-tab-btn.active{
  font-weight:700;
}