/* =========================
   COMPONENTS
========================= */

.detail-content{
    margin:10px 0px;
}

.detail-content {
    white-space: pre-line;
}


.btn {
  border-radius: 5px;
  height: 34px;
  font-weight: 600;
  padding: 0 12px;
  font-size: 13px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn.primary {
  background: linear-gradient(135deg, #6d28d9 0%, #4f46e5 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.22);
}

.btn.primary:hover {
  background: linear-gradient(135deg, #5b21b6 0%, #4338ca 100%);
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.24);
}

.btn.secondary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.18);
}

.btn.secondary:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 10px 22px rgba(5, 150, 105, 0.22);
}

.btn.clean {
  background: #faf5ff;
  color: #6d28d9;
  border: 1px solid #d8b4fe;
}

.btn.clean:hover {
  background: #6d28d9;
  border-color: #6d28d9;
  color: #ffffff;
}

.btn.subtle {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.btn.subtle:hover {
  background: #475569;
  border-color: #475569;
  color: #ffffff;
}

.btn.danger {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 18px rgba(244, 63, 94, 0.20);
}

.btn.danger:hover {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  box-shadow: 0 10px 22px rgba(225, 29, 72, 0.24);
}
/* YELLOW – 연장 */
.btn.yellow {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.24);
}

.btn.yellow:hover {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.28);
}

/* GRAY – 수정 */
.btn.gray {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 18px rgba(31, 41, 55, 0.18);
}

.btn.gray:hover {
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
  box-shadow: 0 10px 22px rgba(31, 41, 55, 0.24);
}

/* Role-based colors for outline-style buttons across template_1_1 */
.btn.clean {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

.btn.clean:hover {
  background: #475569 !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}

.btn.btn-slot-add,
.btn.slot-action-outline {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.btn.btn-slot-add:hover,
.btn.slot-action-outline:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.btn.btn-reward-add,
.btn.btn-purchase-add,
.btn.slot-action-reward,
.btn[onclick*="openReward"],
.btn[onclick*="addReward"] {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.btn.btn-reward-add:hover,
.btn.btn-purchase-add:hover,
.btn.slot-action-reward:hover,
.btn[onclick*="openReward"]:hover,
.btn[onclick*="addReward"]:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.btn.btn-edit,
#btn-board-edit,
.btn.slot-action-manage {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.btn.btn-edit:hover,
#btn-board-edit:hover,
.btn.slot-action-manage:hover {
  background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.btn.btn-delete,
.btn.slot-action-danger,
#btn-board-delete {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.btn.btn-delete:hover,
.btn.slot-action-danger:hover,
#btn-board-delete:hover {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.btn.btn-web-rank,
.btn.btn-app-rank,
.btn.btn-children {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
}

.btn.btn-web-rank:hover,
.btn.btn-app-rank:hover,
.btn.btn-children:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
}

#btn-user-add,
.btn[onclick*="downloadExcel"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

#btn-user-add:hover,
.btn[onclick*="downloadExcel"]:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
}

button,
.btn,
.btn:hover,
.slot-type-btn,
.slot-type-btn:hover,
#pagination-box .page-btn,
#pagination-box .page-btn:hover,
#pagination-box .page-btn.is-active {
  box-shadow: none !important;
}
/* ===== 검색 ===== */
.search-box input {
  height: 34px;
  border-radius: 5px;
}
.slot-date {
  background: #18181b;
  border: 1px solid #333;
  border-radius: 5px;
  padding: 6px 10px;
  display: flex;
  gap: 6px;
  color: #fff;
}
/* 날짜 선택 박스 */
.slot-date {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 8px;
  background: #f3f6fa;
  border: 1px solid #d8e0e8;
  border-radius: 5px;
}
#current-date {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  padding: 0 6px;
  white-space: nowrap;
}
.slot-date button {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: #faf5ff;
    color: #6d28d9;
    font-weight: 700;
    cursor: pointer;
}

.slot-date button:hover {
    background: #ede9fe;
}

.detail-card{
    color:#111111;
}
.page-title{
    margin:0 0 20px 0;
}
.page-hero-panel {
  position: relative;
  width: min(100%, 1800px);
  margin: 0 auto 16px;
  padding: 16px 22px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.97) 0%, rgba(30, 41, 59, 0.93) 58%, rgba(51, 65, 85, 0.90) 100%);
  box-shadow: 0 26px 56px rgba(15, 23, 42, 0.24);
  overflow: hidden;
}

.page-hero-panel::before {
  content: "";
  position: absolute;
  inset: auto -120px -140px auto;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.24) 0%, rgba(251, 146, 60, 0) 70%);
  pointer-events: none;
}

.page-hero-shell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}

.page-hero-title {
  margin: 0;
  color: #f8fafc;
  font-size: 24px;
  line-height: 1.15;
}
.search-box {
    gap: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.checked-count{
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}
.search-box input {
  height: 34px;
  padding: 0 10px;
  border-radius: 2px;
  border: 1px solid #d8e0e8;
  background: #f8fafc;
  font-size: 13px;
}
.select-box {
    padding: 4px 8px;
    border-radius: 2px;
    border: 1px solid #eee;
    color: #111111;
    font-size: 15px;
    height:34px;
}
#slot-date-range{
        text-align: center;
        color:#111111;
        border: 1px solid #eee;
        border-radius: 2px;
        padding: 4px 8px;
}

.sub-bg {
  padding: 24px;
  border-radius: 24px;
  border: 1px solid #d8e0e8;
  background: linear-gradient(180deg, #f6f4ef 0%, #f2f5f8 100%);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}


.page-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding-top: 12px;
  font-size: 13px;
  flex-wrap: wrap;
  gap:10px;
}
/* 배지 */
.badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 2px;
    font-weight: 700;
    display: inline-block;
}

@media (max-width: 768px) {
  .page-hero-panel {
    margin-bottom: 14px;
    padding: 16px 18px;
    border-radius: 22px;
  }

  .page-hero-shell {
    min-height: 0;
  }

  .page-hero-title {
    font-size: 21px;
  }

  .sub-bg {
    padding: 18px 16px 16px;
    border-radius: 20px;
  }
}