/* ===========================================================
   PROGRAM — 웰니스 네 영역 · 진행 방식 · 월별 프로그램 · 클래스 신청
   프로그램마다 따로 신청하므로, 카드는 저마다 신청 버튼을 갖는다.
   =========================================================== */

:root{
  /* 웰니스 네 영역 */
  --ax-care:#c39a86; --ax-learn:#a09aa8;
  /* 프로그램 장르 */
  --ax-wellness:#7b96a4; --ax-culture:#c39a86; --ax-club:#93a7b0;
}
.pillar[data-axis="care"] { --ax:var(--ax-care); }
.pillar[data-axis="learn"]{ --ax:var(--ax-learn); }
.prog[data-axis="wellness"],.pcard[data-axis="wellness"]{ --ax:var(--ax-wellness); }
.prog[data-axis="culture"] ,.pcard[data-axis="culture"] { --ax:var(--ax-culture); }
.prog[data-axis="insight"] ,.pcard[data-axis="insight"] { --ax:var(--ax-insight); }
.prog[data-axis="club"]    ,.pcard[data-axis="club"]    { --ax:var(--ax-club); }

.format,.programs{
  padding:clamp(96px,15vh,200px) var(--pad); max-width:var(--maxw); margin-inline:auto;
  position:relative; z-index:2;
}

/* ───────── GO → DO → KEEP ───────── */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:clamp(20px,3vw,44px); }
.step{ padding-top:26px; border-top:1px solid var(--line); }
.step__en{
  font-family:var(--display); font-style:italic; font-size:clamp(26px,3.2vw,44px);
  color:var(--peach-deep); display:block;
}
.step h3{ font-size:clamp(19px,1.9vw,25px); font-weight:400; margin:14px 0 12px; }
.step p{ color:var(--body); font-size:14px; line-height:1.85; }
.format__note{
  margin-top:clamp(46px,7vh,90px); padding-top:34px; border-top:1px solid var(--line);
  color:var(--body); font-size:clamp(14px,1.15vw,16px); max-width:62ch;
}
.format__note b{ font-weight:400; color:var(--ink); }

/* ───────── 월 선택 ───────── */
.months{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.months .chip,.jtabs .chip{
  display:inline-flex; align-items:baseline; gap:8px; cursor:pointer;
  padding:9px 18px; border:1px solid var(--line); border-radius:99px; background:transparent;
  font-size:12.5px; letter-spacing:.04em; color:var(--body);
  transition:background-color .4s var(--ease), border-color .4s var(--ease), color .4s;
}
.months .chip span,.jtabs .chip span{ font-family:var(--display); font-size:11px; color:var(--muted); }
.months .chip:hover,.jtabs .chip:hover{ border-color:var(--peach-deep); }
.months .chip.is-on,.jtabs .chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--warm-white); }
.months .chip.is-on span,.jtabs .chip.is-on span{ color:rgba(250,248,243,.6); }
.months__note{ margin-bottom:clamp(34px,5vh,56px); font-size:12.5px; color:var(--muted); }

/* ───────── 프로그램 카드 ───────── */
/* 카드가 유리라 격자선 판이 필요 없다. 각각 떠 있게 띄워 둔다 */
.plist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:clamp(13px,1.6vw,20px); }
.prog{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(26px,2.4vw,38px);
}
/* 위쪽 선으로 장르를 표시한다 — 색 면을 넓게 쓰면 팔레트 비율이 깨진다 */
.prog::before{
  content:''; position:absolute; inset:0 0 auto; height:2px; background:var(--ax);
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.prog:hover::before{ transform:scaleX(1); }
.prog__kicker{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  font-family:var(--display); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.prog__kicker em{ font-style:italic; text-transform:none; letter-spacing:0; font-size:16px; color:var(--ax); }
.prog__kicker i{ display:block; width:16px; height:1px; background:rgba(44,49,52,.2); }
.prog h3{ font-size:clamp(19px,1.9vw,25px); font-weight:400; line-height:1.36; margin:16px 0 12px; }
.prog__desc{ color:var(--body); font-size:13.5px; line-height:1.85; flex:1; }
.prog__tags{ margin-top:18px; font-size:11.5px; letter-spacing:.06em; color:var(--muted); }
.prog__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:24px; padding-top:16px; border-top:1px solid var(--line);
}
.prog__date{ font-size:12.5px; color:var(--body); white-space:nowrap; }  /* 결제 버튼이 둘일 때 날짜가 밀려 줄바꿈되던 것 */
/* 날짜가 아직 확정되지 않은 것은 톤을 낮춰 구분한다 */
.prog__date i{ font-style:normal; color:var(--muted); font-size:11.5px; margin-left:6px; }

/* ───────── 신청 버튼 (프로그램 · 클래스 공용) ───────── */
.prog__apply{
  display:inline-flex; align-items:center; gap:7px; flex:none; cursor:pointer;
  padding:9px 16px; border:1px solid var(--line); border-radius:99px; background:transparent;
  font-family:inherit; font-size:12.5px; color:var(--ink);
  transition:background-color .4s var(--ease), border-color .4s var(--ease), color .4s;
}
.prog__apply em{ display:inline-block; transition:transform .4s var(--ease); }
.prog__apply:hover{ background:var(--ink); border-color:var(--ink); color:var(--warm-white); }
.prog__apply:hover em{ transform:translateX(3px); }

/* 클래스 카드 바닥 — 회차와 신청 버튼 */
.pcard__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:24px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12px; color:var(--body);
}

/* 신청 폼에서 방금 채워진 프로그램이 보이도록 잠깐 강조한다 */
.field select.is-filled{ border-color:var(--peach-deep); background:var(--peach); }

@media (max-width:600px){
  .prog__foot{ flex-direction:column; align-items:flex-start; }
  .prog__apply{ width:100%; justify-content:center; }
}

/* 고른 달만 남긴다 — 숨김은 CSS 가, 어떤 달인지만 JS 가 적는다 */
.plist[data-month="9"]  .prog:not([data-month="9"]),
.plist[data-month="10"] .prog:not([data-month="10"]),
.plist[data-month="11"] .prog:not([data-month="11"]),
.plist[data-month="12"] .prog:not([data-month="12"]){ display:none; }

/* ───────── 결제 (페이앱) ─────────
   페이앱은 링크 하나에 금액이 고정으로 묶인다. 그래서 프로그램마다 링크가 따로 필요하고,
   얼리버드/일반을 나누려면 링크를 두 개 만들어 나란히 둔다.
   링크가 있는 카드만 결제로 바로 가고, 없는 카드는 신청 폼으로 간다. */
.prog__pay{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  padding:9px 16px; border:1px solid var(--ink); border-radius:99px;
  background:var(--ink); color:var(--warm-white);
  font-size:12.5px; white-space:nowrap;
  transition:background-color .4s var(--ease), color .4s;
}
.prog__pay em{ display:inline-block; transition:transform .4s var(--ease); }
.prog__pay:hover{ background:transparent; color:var(--ink); }
.prog__pay:hover em{ transform:translateX(3px); }
/* 얼리버드가 함께 걸릴 땐 일반가를 보조로 낮춘다 */
.prog__pay--base{ background:transparent; color:var(--ink); border-color:var(--line); }
.prog__pay--base:hover{ background:var(--ink); color:var(--warm-white); border-color:var(--ink); }
.prog__pays{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }

@media (max-width:600px){
  .prog__pay{ width:100%; justify-content:center; }
  .prog__pays{ width:100%; }
}