/* =========================
   Life in Weeks - FINAL CSS
========================= */

.liw-card { border-radius: 16px; }
.liw-mini-note { white-space: nowrap; }

.liw-headline{
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.35;
  margin-bottom: 10px;
}

.liw-kpis{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 420px){
  .liw-kpis{ grid-template-columns: 1fr; }
}

.liw-kpi{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,.02);
}
.liw-kpi-label{ font-size: .85rem; color: rgba(0,0,0,.6); }
.liw-kpi-value{ font-size: 1.12rem; font-weight: 900; }

.liw-capture{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}

/* ✅ 입력 버튼 정렬 */
.liw-actions{
  display: flex;
  gap: 8px;
}
@media (min-width: 768px){
  .liw-actions{
    align-items: flex-end;
    height: 100%;
    justify-content: flex-start;
  }
  #liwForm .form-control,
  #liwForm .form-select,
  #liwForm .btn{
    height: 38px;
  }
}
@media (max-width: 767px){
  .liw-actions{
    flex-direction: column;
    width: 100%;
  }
  .liw-actions .btn{ width: 100%; }
}

/* =========================
   GRID (핵심)
========================= */

.liw-grid-wrap{
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  padding-bottom: 6px;
}

.liw-grid{
  --gap: 2px;
  --cell: 10px;

  display: grid;
  grid-template-columns: repeat(52, var(--cell));
  gap: var(--gap);

  width: fit-content;     /* ✅ max-content 금지 */
  max-width: 100%;
  user-select: none;
  touch-action: manipulation;
}

.liw-cell{
  width: var(--cell);
  height: var(--cell);
  border-radius: 2px;
  background: #e5e7eb;
}
.liw-cell.past{ background: #111827; }
.liw-cell.now{ background: #dc2626; }

@media (max-width: 768px){
  .liw-grid{
    --gap: 1px;
    --cell: max(5px, calc((100vw - 32px - (51 * var(--gap))) / 52));
    width: 100%;
  }
  .liw-cell{ border-radius: 1px; }
}
@media (max-width: 420px){
  .liw-grid{
    --cell: max(5px, calc((100vw - 24px - (51 * var(--gap))) / 52));
  }
}

/* =========================
   TEXT / STATS / INFO
========================= */

.liw-caption{
  font-weight: 800;
  font-size: .95rem;
}

.liw-stats{
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 12px;
}
.liw-stats-title{
  font-weight: 900;
  margin-bottom: 4px;
}

.liw-section-title{
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 8px;
}

.liw-info-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.02);
}
.liw-info-title{
  font-weight: 900;
  margin-bottom: 6px;
}
.liw-info-body{
  color: rgba(0,0,0,.75);
  font-size: .95rem;
}
/* past colored by stage */
.liw-cell.past.stage-child { background: #FFE08A; }
.liw-cell.past.stage-teen  { background: #FFB36B; }
.liw-cell.past.stage-20s   { background: #9BE7A5; }
.liw-cell.past.stage-30_40 { background: #8EC5FF; }
.liw-cell.past.stage-45_64 { background: #C9A2FF; }
.liw-cell.past.stage-65p   { background: #C9B39A; }

/* future stays muted */
.liw-cell.future { background: #E9ECEF; }

/* "now" highlight (works on any color) */
.liw-cell.now {
  outline: 2px solid #FF3B30;
  outline-offset: -2px;
  position: relative;
  z-index: 2;
}
.liw-cell.now::after{
  content:"";
  position:absolute; inset:-2px;
  border:2px solid rgba(255,59,48,.35);
  animation: liwPulse 1.4s ease-in-out infinite;
}
@keyframes liwPulse{
  0%,100%{ transform:scale(1); opacity:.35; }
  50%{ transform:scale(1.15); opacity:.05; }
}

/* Legend layout */
.liw-legend-items{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 768px){
  .liw-legend-items{
    grid-template-columns: 1fr 1fr;
  }
}

.liw-legend-item{
  display:flex;
  align-items:center;
  gap:10px;
}

.liw-legend-dot{
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display:inline-block;
  border: 1px solid rgba(0,0,0,0.08);
}

/* ✅ stage 색이 이미 있으면 아래는 필요 없음
   없을 경우 참고용(원하는 색으로 맞춰) */
/*
.liw-legend-dot.stage-child{ background: ... }
...
*/
.liw-legend-dot.now{
  background:#dc2626; /* now red */
}
/* ✅ Legend dot 기본 모양 (체크박스처럼 안 보이게) */
.liw-legend-dot{
  width: 14px;
  height: 14px;
  border-radius: 999px;   /* 동그라미 */
  display: inline-block;
  border: 0;              /* 테두리 제거 */
  flex: 0 0 14px;
}

/* ✅ 범례 dot도 stage 색을 직접 지정 */
.liw-legend-dot.stage-child { background: var(--liw-child); }
.liw-legend-dot.stage-teen  { background: var(--liw-teen); }
.liw-legend-dot.stage-20s   { background: var(--liw-20s); }
.liw-legend-dot.stage-30_40 { background: var(--liw-30_40); }
.liw-legend-dot.stage-45_64 { background: var(--liw-45_64); }
.liw-legend-dot.stage-65p   { background: var(--liw-65p); }

.liw-legend-dot.now { background: #dc2626; }
:root{
  --liw-child:  #facc15; /* 예: 노랑 */
  --liw-teen:   #fb923c; /* 주황 */
  --liw-20s:    #60a5fa; /* 파랑 */
  --liw-30_40:  #34d399; /* 초록 */
  --liw-45_64:  #a78bfa; /* 보라 */
  --liw-65p:    #94a3b8; /* 회색 */
}

/* 셀 색도 변수로 통일 */
.liw-cell.past.stage-child { background: var(--liw-child); }
.liw-cell.past.stage-teen  { background: var(--liw-teen); }
.liw-cell.past.stage-20s   { background: var(--liw-20s); }
.liw-cell.past.stage-30_40 { background: var(--liw-30_40); }
.liw-cell.past.stage-45_64 { background: var(--liw-45_64); }
.liw-cell.past.stage-65p   { background: var(--liw-65p); }