@charset "utf-8";

/* =========================================================
   MARMELADA GLASSMORPHISM VARIABLES (유리 질감 변수)
========================================================= */
:root {
  --skin-main-color: #6e8c96; /* 마르멜라다 메인 톤 */
  --skin-sub-color: #92aab3;
  --skin-bg-color: #F8F6F3;
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  --radius: 18px;
}

/* 게시판 전체 래퍼 */
#bo_list { font-family: 'Galmuri11', 'Pretendard', sans-serif; }

/* =========================================================
   ✅ 관리자 설정값 연동 (칸 수 변수 적용)
========================================================= */
.checklist-grid {
  display: grid;
  /* PHP에서 넘겨받은 --bo-cols 변수로 칸 수를 결정합니다! */
  grid-template-columns: repeat(var(--bo-cols, 4), 1fr);
  gap: 20px;
  margin-top: 20px;
}
/* 모바일/태블릿 화면이 좁아지면 알아서 줄어듭니다 */
@media (max-width: 1024px) { .checklist-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px)  { .checklist-grid { grid-template-columns: 1fr !important; } }

/* =========================================================
   리스트 그리드 & 카드 3D 플립 (클릭용)
========================================================= */
.check-card {
  perspective: 1200px;
  position: relative;
  transition: all 0.3s ease;
}
.check-card:hover {
  transform: translateY(-3px); /* 마우스 올렸을 때 살짝 위로 뜨는 효과 */
}

.check-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

/* ✅ 핵심: hover(자동)가 아니라 .is-flipped 라는 이름이 붙을 때만 돌아감! */
.check-card.has-back.is-flipped .check-card-inner {
  transform: rotateY(180deg);
}

.check-card-front, .check-card-back {
  backface-visibility: hidden;
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
}

.check-card-front {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: 100%;
  height: 100%;
}

.check-card-back {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  transform: rotateY(180deg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
}
.check-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   카드 헤더 & 마크다운 디자인
========================================================= */
.check-card-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--skin-main-color);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  word-break: break-all;
}
.check-card-title a { color: inherit; text-decoration: none; }
.check-card-date { font-size: 12px; color: #999; margin-bottom: 15px; }

.markdown-body ul.contains-task-list {
  list-style: none !important;
  padding-left: 0 !important;
}
.markdown-body .task-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #555;
  transition: all 0.2s;
}
.markdown-body .task-list-item input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--skin-sub-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  background: #fff;
  transition: all 0.2s;
  margin: 0;
}
.markdown-body .task-list-item input[type="checkbox"]:checked {
  background: var(--skin-main-color);
  border-color: var(--skin-main-color);
}
.markdown-body .task-list-item input[type="checkbox"]:checked::after {
  content: '✔';
  color: white;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
}
.markdown-body .task-list-item.checked-item {
  text-decoration: line-through;
  color: #aaa;
}
.markdown-body .task-list-item input[type="checkbox"]:disabled {
  opacity: 0.7;
}

/* 버튼 디자인 */
.btn-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--skin-main-color);
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  backdrop-filter: blur(5px);
  transition: 0.2s;
  text-decoration: none;
  display: inline-block;
}
.btn-glass:hover {
  background: var(--skin-main-color);
  color: #fff;
}

/* =========================================================
   CHECKLIST PROGRESS BAR & STAMP (게이지바 & 도장)
========================================================= */
.progress-wrapper {
    margin: 15px 0;
    background: rgba(0, 0, 0, 0.08); 
    border-radius: 10px;
    height: 18px; 
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #92aab3, #6e8c96) !important;
    width: 0%;
    border-radius: 10px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-text {
    font-size: 13px;
    color: #6e8c96;
    text-align: right;
    margin-top: 5px;
    font-weight: 900;
}

.stamp-completed {
    position: absolute;
    top: 35px;
    right: 15px;
    font-size: 28px;
    font-weight: 900;
    color: #ff6b6b;
    border: 4px solid #ff6b6b;
    padding: 5px 15px;
    border-radius: 8px;
    transform: rotate(-15deg);
    opacity: 0.85;
    z-index: 10;
    pointer-events: none;
    letter-spacing: 2px;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.5) inset;
    animation: stamp-bang 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes stamp-bang {
    0% { transform: rotate(-15deg) scale(2); opacity: 0; }
    100% { transform: rotate(-15deg) scale(1); opacity: 0.85; }
}

/* =========================================================
   ✅ 관리자 설정값 연동 (이미지 높이 변수 적용)
========================================================= */
.check-card-thumb {
    margin: 10px 0;
    border-radius: 10px;
    overflow: hidden;
    width: 100%; /* 가로폭은 꽉 차게 */
    height: var(--bo-img-h, 150px); /* PHP에서 넘겨받은 높이 적용! */
}
.check-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================================
   CHECKLIST D-DAY BADGE (디데이 뱃지)
========================================================= */
.d-day-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 900;
    color: white;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.d-day-future { background: var(--skin-sub-color); } 
.d-day-today { background: #ff6b6b; animation: pulse 1.5s infinite; } 
.d-day-past { background: #b2bec3; } 

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* =========================================================
   CHECKLIST MISSION STATUS (성공/실패 표기)
========================================================= */
.mission-success {
    color: #3498db;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: -0.5px;
}
.mission-fail {
    color: #e74c3c;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: -0.5px;
}