/* =========================================
   billboard.css
   - 전광판 예약 모달 전용 스타일
   - 라이트/다크 모두 대응 (body.dark-mode 기반)
========================================= */

/* 기본(라이트) 변수 */
:root{
  --bb-border: rgba(0,0,0,0.10);
  --bb-bg: rgba(0,0,0,0.03);
  --bb-bg-hover: rgba(0,0,0,0.06);
  --bb-shadow: rgba(0,0,0,0.18);

  --bb-accent: rgba(40, 140, 255, 0.70);
  --bb-accent-bg: rgba(40, 140, 255, 0.12);
  --bb-accent-ring: rgba(40, 140, 255, 0.18);

  --bb-input-border: rgba(0,0,0,0.12);
  --bb-input-focus: rgba(40, 140, 255, 0.45);
  --bb-input-ring: rgba(40, 140, 255, 0.14);
}

/* 다크 모드 변수 (너 프로젝트의 body.dark-mode 기준) */
body.dark-mode{
  --bb-border: rgba(255,255,255,0.12);
  --bb-bg: rgba(255,255,255,0.04);
  --bb-bg-hover: rgba(255,255,255,0.07);
  --bb-shadow: rgba(0,0,0,0.28);

  --bb-accent: rgba(80, 200, 255, 0.70);
  --bb-accent-bg: rgba(80, 200, 255, 0.10);
  --bb-accent-ring: rgba(80, 200, 255, 0.16);

  --bb-input-border: rgba(255,255,255,0.12);
  --bb-input-focus: rgba(80, 200, 255, 0.45);
  --bb-input-ring: rgba(80, 200, 255, 0.14);
}

/* 모달 내부 공통 */
#billboard-modal .billboard-body{
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#billboard-modal .billboard-section{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 입력 공통 */
#billboard-modal .billboard-input{
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--bb-input-border);
  padding: 0 12px;
  background: transparent;
  color: inherit;
  outline: none;
}

#billboard-modal .billboard-input:focus{
  border-color: var(--bb-input-focus);
  box-shadow: 0 0 0 2px var(--bb-input-ring);
}

/* textarea */
#billboard-modal textarea{
  resize: none;
  border-radius: 12px;
  border: 1px solid var(--bb-input-border);
  padding: 10px 12px;
  background: transparent;
  color: inherit;
  outline: none;
}

#billboard-modal textarea:focus{
  border-color: var(--bb-input-focus);
  box-shadow: 0 0 0 2px var(--bb-input-ring);
}

/* 슬롯 그리드 */
#billboard-modal #billboard-slots{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 슬롯 버튼 */
#billboard-modal .billboard-slot-btn{
  position: relative;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--bb-border);
  background: var(--bb-bg);
  color: inherit;
  cursor: pointer;
  text-align: left;
  user-select: none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

#billboard-modal .billboard-slot-btn:hover{
  transform: translateY(-1px);
  background: var(--bb-bg-hover);
  box-shadow: 0 8px 18px var(--bb-shadow);
}

/* ✅ 클릭 후 선택됨(고정 표시) */
#billboard-modal .billboard-slot-btn.is-selected{
  border-color: var(--bb-accent);
  background: linear-gradient(180deg, var(--bb-accent-bg), var(--bb-bg));
  box-shadow: 0 0 0 2px var(--bb-accent-ring), 0 12px 24px var(--bb-shadow);
  transform: translateY(-1px);
}

#billboard-modal .billboard-slot-btn.is-selected::after{
  content: "선택됨";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bb-accent-bg);
  border: 1px solid var(--bb-accent);
  opacity: .95;
}

/* 슬롯 상태 텍스트(예약됨 강조용) */
#billboard-modal .billboard-slot-status.is-reserved{
  opacity: 1 !important;
  font-weight: 700;
}

/* 버튼 */
#billboard-modal .billboard-actions{
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

#billboard-modal #billboard-reserve-btn{
  flex: 1;
  height: 42px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
}

#billboard-modal #billboard-cancel-btn{
  flex: 1;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 700;
}