:root{
  --bg:#0d0e12;
  --card:rgba(255,255,255,0.05);
  --text:#f5f6fa;
  --accent:#e82127;
  --muted:#aaa;
  --glass-border:rgba(255,255,255,0.15);
  --progress-bg:rgba(255,255,255,0.08);
  --progress-fill:#e82127;
  --progress-green:#28c76f;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:Inter, Poppins, Pretendard, sans-serif}
body{
  background:radial-gradient(circle at top left, #16181d,#0a0a0d);
  color:var(--text);
  text-align:center;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Hero */
.hero{padding:4rem 1rem 2rem}
.hero h1{font-size:clamp(2rem,6vw,3.8rem);color:var(--accent);font-weight:700;line-height:1.15}
.subtitle{color:var(--muted);font-size:clamp(0.95rem,2.2vw,1.1rem);margin-top:0.5rem}
.countdown-title{margin-top:1.2rem;font-size:clamp(0.95rem,2vw,1.1rem);color:var(--text);opacity:0.85}

/* Countdown */
.countdown-box {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  background: var(--card);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px) saturate(160%);
  border-radius: 1rem;
  padding: 0.9rem 1.2rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
}

.countdown-item span {
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  font-weight: 700;
  color: var(--accent);
}

.countdown-item label {
  color: var(--muted);
  font-size: clamp(0.75rem, 2.5vw, 0.9rem);
  margin-top: 0.3rem;
}

/* ✅ 모바일 화면 대응: 한 줄 고정 & 간격 자동 조절 */
@media (max-width: 600px) {
  .countdown-box {
    flex-wrap: nowrap;              /* 줄바꿈 금지 */
    justify-content: space-between; /* 폭 자동 분배 */
    gap: 0.4rem;                    /* 간격 축소 */
    padding: 0.7rem 0.6rem;
    max-width: 98vw;                /* 좌우 여백 줄이기 */
  }

  .countdown-item {
    min-width: 48px;                /* 더 좁게 */
  }

  .countdown-item span {
    font-size: 1.1rem;              /* 글씨 약간 줄이기 */
  }

  .countdown-item label {
    font-size: 0.7rem;
  }
}

/* Cards Grid */
.targets{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
  padding:2.2rem 1.2rem 3rem;
  max-width:1100px;
  margin:auto;
  justify-items:center;      /* ✅ 그리드 아이템 중앙 정렬 */
}

/* Card */
.card{
  background:var(--card);
  border:1px solid var(--glass-border);
  border-radius:1rem;
  padding:1.6rem 1rem;
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
  border-color:var(--glass-border);
  backdrop-filter:blur(10px);
  cursor:pointer;
  text-align:center;          /* ✅ 카드 내부 중앙 정렬 */
  width:100%;
  max-width:520px;            /* ✅ 폭 제한 + grid 중앙정렬과 조합 */
  margin-inline:auto;         /* ✅ 카드 자체 중앙 */
}
.card:hover{transform:translateY(-6px);box-shadow:0 10px 25px rgba(255,255,255,0.05)}
.card .icon{font-size:clamp(1.4rem,6vw,2rem);margin-bottom:0.6rem}
.card .goal{font-weight:600;font-size:clamp(1rem,3.5vw,1.15rem);margin-bottom:0.85rem}
.card .metric-values{font-size:clamp(0.92rem,3.2vw,0.98rem);color:var(--text);margin-bottom:0.4rem}

/* Progress */
.progress-container{
  width:90%;
  height:8px;
  background:var(--progress-bg);
  border-radius:5px;
  margin:0.2rem auto 0.45rem;
  overflow:hidden
}
.progress-bar{
  height:100%;
  background:var(--progress-fill);
  border-radius:5px;
  transition:width 1s ease,background .5s ease
}
.progress-bar.green{background:var(--progress-green)}
.percent-text{font-size:clamp(0.8rem,3vw,0.9rem);color:var(--muted)}

/* completed card */
.card.complete{background:rgba(40,199,111,0.08);border-color:rgba(40,199,111,0.4);box-shadow:0 0 15px rgba(40,199,111,0.12)}

/* updated date */
.update-date{
  font-size:0.8rem;
  color:var(--muted);
  text-align:center;
  margin-top:10px;
  opacity:0.9;
  transition: color 0.5s ease, text-shadow 0.5s ease;
}
.update-date.highlight{color:#28c76f;text-shadow:0 0 8px rgba(40,199,111,0.6)}

/* question & footer */
.question{padding:1rem 1rem 2.2rem;font-size:clamp(1.1rem,4vw,1.5rem);color:var(--text)}
footer{background:rgba(255,255,255,0.03);padding:1rem;color:var(--muted);font-size:0.85rem;border-top:1px solid var(--glass-border);margin-top:auto}

/* Modal base (kept empty if not in use here) */
.modal{position:fixed;left:0;top:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);z-index:999}
.modal[aria-hidden="false"]{display:flex}

/* Remove hint text if any */
.card::after{content:"";display:block;font-size:0.7rem;color:var(--muted);margin-top:.6rem;opacity:0.9}

/* ============================= */
/*        RESPONSIVE TWEAKS      */
/* ============================= */

@media (max-width: 900px){
  .targets{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:0.9rem;
    padding:1.8rem 1rem 2.4rem;
  }
  .progress-container{width:95%}
}

@media (max-width: 600px){
  .hero{padding:2rem 0.9rem 1.2rem}
  .targets{
    grid-template-columns:1fr;   /* ✅ 모바일 1열 고정 */
    padding:1.4rem 0.8rem 2rem;
    gap:0.85rem;
  }
  .card{
    padding:1.25rem 0.9rem;
    max-width:480px;
  }
  .progress-container{width:100%} /* ✅ 바 꽉 채우기 */
  .countdown-box{
    padding:0.7rem 0.9rem;
    gap:0.6rem;
    max-width:96vw;              /* ✅ 뷰포트 넘치지 않게 */
  }
  .countdown-item{min-width:64px}
}