/* ── CHECKLIST TABS ── */
.cl-tab-bar { display: flex; gap: 7px; margin-bottom: 16px; flex-wrap: wrap; }
.cl-tab-btn {
  padding: 8px 16px; border-radius: 40px;
  font-size: .75rem; font-weight: 800; border: none;
  cursor: pointer; font-family: inherit;
  background: #EEE5F4; color: var(--txl); transition: all .2s;
}
.cl-tab-btn.on {
  background: linear-gradient(135deg, #F06292, #9C27B0);
  color: #fff; box-shadow: 0 3px 10px rgba(200,80,180,.22);
}

/* ── LAYOUT ── */
.cl-layout { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: start; }
.cl-sidebar { background: var(--card); border-radius: 18px; box-shadow: var(--card-shadow); overflow: hidden; position: sticky; top: 70px; }
.cl-sb-hd   { background: linear-gradient(135deg, #F06292, #9C27B0); padding: 12px 16px; font-size: .8rem; font-weight: 900; color: #fff; }
.cl-sb-item {
  padding: 11px 15px; font-size: .78rem; font-weight: 700;
  cursor: pointer; border-bottom: 1px solid #F8F0FA;
  transition: background .14s; display: flex; justify-content: space-between; align-items: center; color: var(--tx);
}
.cl-sb-item:hover { background: var(--pkl); }
.cl-sb-item.on    { background: var(--pkl); color: var(--pkd); font-weight: 900; }
.cl-sb-pct { font-size: .65rem; color: var(--mn); font-weight: 800; background: var(--mnl); padding: 2px 6px; border-radius: 8px; }
.cl-sb-pct.cl-sb-low { color: #757575; background: #EEEEEE; }

.cl-main { background: var(--card); border-radius: 18px; box-shadow: var(--card-shadow); padding: 22px; }

/* ── PROGRESS BAR ── */
.progress-bar  { background: #EEE0F0; border-radius: 20px; height: 7px; margin-bottom: 18px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, #F06292, #9C27B0); transition: width .5s; }

/* ── CHECK ITEMS ── */
.ci {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px; background: #FAFAFA; border-radius: 13px;
  margin-bottom: 7px; cursor: pointer;
  border: 1.5px solid transparent; transition: all .2s;
}
.ci:hover { border-color: #F0D0E0; background: #FFF8FA; }
.ci.done  { background: var(--pkl); border-color: #F0C0D0; }

.ci-box {
  width: 19px; height: 19px; border-radius: 6px;
  border: 2px solid #DDD0E0; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.ci.done .ci-box          { background: linear-gradient(135deg, #F06292, #9C27B0); border-color: transparent; }
.ci.done .ci-box::after   { content: '✓'; color: #fff; font-size: .72rem; font-weight: 900; }
.ci-title                 { font-size: .84rem; font-weight: 700; color: var(--tx); }
.ci.done .ci-title        { text-decoration: line-through; color: var(--txl); }
.ci-desc                  { font-size: .71rem; color: var(--txl); margin-top: 2px; line-height: 1.6; }

.badge-r { display: inline-block; background: #FFEBEE; color: #C62828; font-size: .58rem; font-weight: 800; padding: 2px 6px; border-radius: 7px; margin-left: 4px; }
.badge-o { display: inline-block; background: #E0F2F1; color: #00695C; font-size: .58rem; font-weight: 800; padding: 2px 6px; border-radius: 7px; margin-left: 4px; }

/* ── 체크리스트 항목 상세 설명 펼치기 (Sprint 14) ── */
.ci-wrap { margin-bottom: 7px; }
.ci-wrap .ci { margin-bottom: 0; transition: border-radius .15s, all .2s; }
.ci-wrap.open .ci { border-radius: 13px 13px 0 0; }

.ci-expand-btn {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--pk); font-size: .78rem; align-self: flex-start; margin-top: 1px;
  transition: background .15s;
}
.ci-expand-btn:hover { background: var(--pkl); }
.ci-expand-arrow { display: inline-block; transition: transform .2s; }
.ci-wrap.open .ci-expand-arrow { transform: rotate(180deg); }

.ci-detail {
  display: none; font-size: .76rem; color: var(--tx); font-weight: 400;
  font-family: 'OmyuPretty', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; /* v0.0.5: Pretendard→오뮤 다예쁨체 */
  line-height: 1.7; background: #FBF6FA; border: 1.5px solid #F0D0E0; border-top: none;
  border-radius: 0 0 13px 13px; margin-top: -1.5px; padding: 4px 14px 12px 43px;
}
.ci-wrap.open .ci-detail { display: block; animation: fadeUp .2s ease; }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .cl-layout  { grid-template-columns: 1fr; }
  .cl-sidebar { position: static; }
}

/* ══════════════════════════════════════
 *  Sprint 3 추가 스타일
 * ══════════════════════════════════════ */

/* ── 현재 주차/월령 컨텍스트 배너 ── */
.cl-context-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #FFF5F8, #F5EEFF);
  border: 1.5px solid #F0C8DC;
  border-radius: 14px;
  padding: 10px 16px;
  margin-bottom: 12px;
  font-size: .84rem;
  font-weight: 800;
  color: var(--pkd);
  animation: fadeUp .22s ease;
}
.cl-context-banner:empty { display: none; }

/* ── 사이드바 필수 완료 배지 ── */
.cl-sb-pct-full {
  background: #E8F5E9 !important;
  color: #2E7D32 !important;
}

/* ── 메인 상태 배지 ── */
.cl-status {
  font-size: .76rem;
  font-weight: 800;
  color: var(--mn);
  background: var(--mnl);
  padding: 3px 9px;
  border-radius: 10px;
}
.cl-status-low {
  color: #757575;
  background: #EEEEEE;
}
.cl-status-full {
  color: #2E7D32;
  background: #E8F5E9;
}
.cl-status-gold {
  color: #7B5800;
  background: linear-gradient(135deg, #FFF8E1, #FFF3CD);
  border: 1px solid #FFE082;
}

/* ── 진행률 바 티어 색상 ── */
.progress-fill.full    { background: linear-gradient(90deg, #FFD700, #FFA000); }
.progress-fill.master  { background: linear-gradient(90deg, #9C27B0, #6A1B9A); }
.progress-fill.rainbow {
  background: linear-gradient(90deg, #F06292, #FFD54F, #4DB6AC, #64B5F6, #9C27B0);
  background-size: 200%;
  animation: rainbowShift 2s linear infinite;
}
@keyframes rainbowShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── 사이드바 티어 배지 ── */
.cl-sb-pct-full   { background: #E8F5E9 !important; color: #2E7D32 !important; }
.cl-sb-perfect    { background: #FFF8E1 !important; color: #7B5800 !important; border: 1px solid #FFE082; }
.cl-sb-master     { background: #EDE7F6 !important; color: #4A148C !important; }
.cl-sb-legend     { background: linear-gradient(135deg, #FCE4EC, #F3E5F5, #E3F2FD) !important; color: var(--pkd) !important; }

/* ── 달성 배지 (메인 영역) ── */
.cl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .76rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 12px;
  animation: fadeUp .22s ease;
}
.cl-badge-perfect {
  background: linear-gradient(135deg, #FFF8E1, #FFF3CD);
  color: #7B5800;
  border: 1.5px solid #FFE082;
}
.cl-badge-master {
  background: linear-gradient(135deg, #EDE7F6, #D1C4E9);
  color: #4A148C;
  border: 1.5px solid #CE93D8;
}
.cl-badge-legend {
  background: linear-gradient(135deg, #FCE4EC, #F3E5F5, #E3F2FD);
  color: var(--pkd);
  border: 1.5px solid var(--pk);
}

/* ── Sprint 6: 정부지원 체크리스트 탭 항목 ── */
.gov-cl-item {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; background: #FAFAFA; border-radius: 13px;
  margin-bottom: 7px; cursor: pointer; transition: all .2s;
  border: 1.5px solid transparent;
}
.gov-cl-item:hover { border-color: #C8E6C9; background: #F3FAF4; }
.gov-cl-icon  { font-size: 1.15rem; flex-shrink: 0; }
.gov-cl-title { font-size: .85rem; font-weight: 800; color: var(--tx); }
.gov-cl-desc  { font-size: .71rem; color: var(--txl); margin-top: 2px; }
.gov-cl-status {
  font-size: .65rem; font-weight: 800; padding: 3px 9px;
  border-radius: 10px; white-space: nowrap; flex-shrink: 0;
}
.gov-cl-status.status-none    { background: #E8F5E9; color: #2E7D32; }
.gov-cl-status.status-applied { background: #E3F2FD; color: #1565C0; }
.gov-cl-status.status-paid    { background: #C8E6C9; color: #1B5E20; }

/* ── Sprint 20: 정부지원 마감 임박 강조 ── */
.gov-cl-item.gov-cl-urgent {
  border-color: #C62828;
  background: #FFF3F3;
}
.gov-cl-item.gov-cl-urgent:hover { border-color: #C62828; background: #FFEAEA; }