/* ===== Wedding Calendar ===== */
:root{
  --wc-heart: #c81e3a;
  --wc-heart-dim: #e0364f;
  --wc-num: #111;
  --wc-muted: #9aa0a6;

  /* ★ 브랜드 컬러 (보라톤) */
  --brand: #6c63ff;          /* 배지·강조 */
  --brand-dark: #5148e5;     /* 주제 글자색 */
  --text-muted: #616977;     /* 설명 색 */
}

/* 달력(기존) */
#weddingCalendar{ background:#fff!important; border:none!important; box-shadow:none!important; border-radius:0!important; padding:24px;}
.wc-title{font-weight:700;font-size:1.1rem;}
.wc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
.wc-head{font-weight:700;color:#333;margin-bottom:10px;}
.wc-head>div{text-align:center;opacity:.8;}
.wc-cell{position:relative;height:40px;display:grid;place-items:center;user-select:none;}
.wc-cell .num{position:relative;z-index:1;font-weight:700;color:var(--wc-num);}
.wc-cell .heart{position:absolute;width:24px;height:24px;top:50%;left:50%;transform:translate(-50%,-44%) rotate(45deg);background:var(--wc-heart);border-radius:4px;}
.wc-cell .heart::before,.wc-cell .heart::after{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:var(--wc-heart);}
.wc-cell .heart::before{top:-12px;left:0;}
.wc-cell .heart::after{top:0;left:-12px;}
.wc-cell.wedding .num{color:#fff;font-weight:800;}
.wc-cell.today .num{font-weight:800;}
.wc-cell.blank .num{opacity:0;}
@media (max-width:480px){
  .wc-cell .heart,.wc-cell .heart::before,.wc-cell .heart::after{width:22px;height:22px;}
  .wc-cell .heart{transform:translate(-50%,-42%) rotate(45deg);}
}

/* ===== Love Timeline (좌/우 2칸 구조) ===== */
.love-timeline{
  --tl-line: #e5e7eb;
  --tl-dot:  #c7c9d1;
  position: relative;
  padding: 8px 0 24px;
}

/* 중앙 라인 */
.love-timeline::before{
  content:"";
  position:absolute; inset:0 auto 0 50%;
  width:2px; background:var(--tl-line); transform:translateX(-1px);
}

/* 아이템 (한 줄 전체) */
.tl-item{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:40px 0;
}

/* 중앙 점 */
.tl-item::after{
  content:"";
  position:absolute;
  top:28px;
  left:50%;
  transform:translateX(-50%);
  width:12px; height:12px;
  background:var(--tl-dot);
  border-radius:50%;
  z-index:2;
}

/* 좌우 칸 */
.tl-side{
  display:flex;
  align-items:flex-start;
  padding:0 20px;
}
.tl-side--left{ justify-content:flex-end; text-align:right; }
.tl-side--right{ justify-content:flex-start; text-align:left; }

/* 이미지 */
/* 데스크톱/모바일 공통: 비율 고정(4:3), 고정 높이 제거 */
.tl-photo{
  width:100%;
  aspect-ratio: 4 / 3;      /* ← 원하는 비율(4:3). 16/9로 바꿔도 됨 */
  height:auto;
  object-fit:cover; 
  object-position:center;
  border-radius:16px;
  display:block;
  background:#f3f4f6;
  max-width: 640px;
}

/* 텍스트 카드 */
.tl-info{
  max-width:260px;
  background:#fff;
  border-radius:16px;
  padding:14px 18px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
}
.tl-badge{
  display:inline-block;
  background:var(--brand);
  color:#fff;
  padding:6px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:.85rem;
  margin-bottom:6px;
}
.tl-title{
  color:var(--brand-dark);
  font-weight:800;
  margin:4px 0;
  line-height:1.35;
}
.tl-desc{
  color:var(--text-muted);
  font-size:.95rem;
  line-height:1.6;
  word-break:keep-all;
}

/* ===== 반응형 (2열 유지, 초소형에서만 1열) ===== */
@media (max-width:768px){
  /* 2열 계속 유지: 여백만 줄임 */
  .tl-side{ padding:0 10px; }
  .tl-info{ max-width:100%; }
}
@media (max-width:360px){
  /* 아주 좁을 때만 1열 스택 */
  .love-timeline::before{ left:24px; transform:none; }
  .tl-item{ grid-template-columns:1fr; }
  .tl-side{
    justify-content:flex-start !important;
    text-align:left !important;
    padding-left:54px;
    margin-bottom:20px;
  }
  .tl-info{ max-width:100%; }
}

/* “더 보기” 버튼 */
.love-more-wrap{ text-align:center; margin-top:22px; }
.love-more-btn{ display:inline-block; padding:10px 18px; border-radius:999px; background:var(--brand); color:#fff; font-weight:700; text-decoration:none; }
.love-more-btn:hover{ background:#5b54ff; color:#fff; }


/* === Love Timeline type scale & lock === */
.love-timeline .tl-badge{
  display:inline-block;
  background: var(--brand, #6c63ff) !important; /* 보라 */
  color:#fff !important;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 18px;        /* 날짜(텍스트) 가장 큼 */
  line-height: 1;
  box-shadow: none !important;
  border: 0 !important;
}

.love-timeline .tl-title{
  color: var(--brand-dark, #5148e5) !important; /* 주제: 진보라 */
  font-weight: 800;
  font-size: 16px;
  line-height: 1.35;
  margin: 6px 0 4px;
}

.love-timeline .tl-sub{
  color: var(--text-muted, #616977) !important; /* 설명: 회색 */
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
}

/* 혹시 전역 .badge 규칙이 있다면 완전히 무력화 */
.love-timeline .tl-badge.badge{
  background: var(--brand, #6c63ff) !important;
  color: #fff !important;
}


/* === Love Timeline: final lock (배지/타이틀/설명 + 카드 제거) === */
.love-timeline .tl-text,
.love-timeline .tl-info {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.love-timeline .tl-head .tl-badge {
  display: inline-block;
  background: var(--brand, #6c63ff) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.love-timeline .tl-title {
  color: var(--brand-dark, #5148e5) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  margin: 8px 0 4px !important;
}

.love-timeline .tl-sub {
  color: var(--text-muted, #616977) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.love-timeline .tl-badge.badge {
  background: var(--brand, #6c63ff) !important;
  color: #fff !important;
}

/* Love Timeline 텍스트 중앙 정렬 */
.love-timeline .tl-text {
  text-align: center !important;
}

/* 러브스토리 타임라인 이미지 고정 (범용) */
.love-timeline img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  object-fit: cover;
  object-position: center;
}

/* ===== 비율 박스 + 크롭 (★최종 적용) ===== */
.tl-media{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #f3f4f6;
}
.tl-media.ar-4x3{ aspect-ratio: 4 / 3; }
.tl-media.ar-16x9{ aspect-ratio: 16 / 9; }

.tl-media > img{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 구형 브라우저 폴백 (aspect-ratio 미지원) */
@supports not (aspect-ratio: 1 / 1) {
  .tl-media.ar-4x3::before{ content:""; display:block; padding-top:75%; }
  .tl-media.ar-16x9::before{ content:""; display:block; padding-top:56.25%; }
  .tl-media > img{ position:absolute; top:0; left:0; width:100% !important; height:100% !important; }
}

/* 모바일에서도 비율 유지 – 기존 높이 강제 완전 차단 */
@media (max-width:768px){
  .tl-photo{ height:auto !important; } /* 혹시 남아있으면 무력화 */
}