/* ============================================================
   masterExam 전용 추가 스타일. promoExam.css 뒤에 얹는다.
   promoExam.css / promoExam.js 는 세 페이지가 공유하므로 건드리지 않는다.
   브레이크포인트는 promoExam 과 같은 1023px / 719px 를 쓴다
   (.ticket 이 1023px 에서 1열로 바뀐다).
   ============================================================ */

/* ---------- 기간 선택 (4주 / 3주 / 2주 / 1주) ---------- */
.plan-dur {
  position: relative;
  margin-top: 18px;                /* 위로 뜨는 추천 배지 자리 */
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 5px; border-radius: 14px; background: #f1f5f9;
}
.plan-dur__b {
  position: relative;
  appearance: none; border: 0; cursor: pointer;
  padding: 10px 4px; border-radius: 10px; background: transparent;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--muted-2);
  transition: background .2s, color .2s, box-shadow .2s;
}
.plan-dur__b:hover { color: var(--ink-2); }
.plan-dur__b.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(17,22,36,.12); }
.plan-dur__b:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

/* 4주 추천 배지. 버튼 위 말풍선으로 뜨고 천천히 오르내린다.
   pointer-events 를 끄지 않으면 배지가 버튼 클릭을 가로챈다 */
.plan-dur__rec {
  position: absolute; left: 50%; bottom: calc(100% + 7px);
  padding: 3px 9px; border-radius: 999px;
  background: var(--blue-text); color: #fff;
  font-size: 11px; font-weight: 700; font-style: normal; line-height: 1.5;
  letter-spacing: -0.01em; white-space: nowrap; pointer-events: none;
  transform: translateX(-50%);
  animation: recFloat 2.4s ease-in-out infinite;
}
.plan-dur__rec::after {                 /* 말풍선 꼬리 */
  content: ''; position: absolute; left: 50%; top: 100%; margin-left: -4px;
  border: 4px solid transparent; border-top-color: var(--blue-text);
}
@keyframes recFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}

/* ---------- 반별 가격 ---------- */
.plan-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.plan {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
}
.plan__i { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.plan__i b { font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; color: var(--ink-2); letter-spacing: -0.01em; }
.plan__i span { font-size: 13px; color: var(--muted-2); }
.plan__p { display: flex; align-items: baseline; gap: 1px; white-space: nowrap; }
.plan__p strong {
  font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums;

}
.plan__p small { font-size: 14px; font-weight: 600; color: var(--ink); }

/* ---------- 통합 반 강조 ----------
   테두리 없이 배경·그림자·상단 띠·글자 크기로만 앞세운다.
   가격 색은 기존 .ticket__price-line 체계를 그대로 쓴다
   (정상가 #858d96, 특가 var(--blue-text)) */
.plan--all {
  position: relative; border: 0;
  background: #f8fcff;                  /* .ticket__l 라이트 버전과 같은 틴트 */
  padding: 22px 18px 18px;
  filter: drop-shadow(0 12px 14px rgba(49,130,246,.08));   /* .pcard / .ccard 와 동일 */
}
.plan--all .plan__i b { font-size: clamp(19px, 1.6vw, 22px); color: var(--ink); }
.plan--all .plan__i span { font-size: 14px; color: var(--blue-text); font-weight: 600; }
.plan--all .plan__p { flex-direction: column; align-items: flex-end; gap: 3px; }
.plan--all .plan__p strong { font-size: clamp(23px, 2.1vw, 29px); color: var(--blue-text); }
.plan--all .plan__p small { font-size: 16px; color: var(--blue-text); }

.plan__was {                            /* 할인 전 금액 */
  font-size: 15px; font-weight: 600; color: #858d96;
  text-decoration-thickness: 1.5px; font-variant-numeric: tabular-nums;
}
.plan__now { display: flex; align-items: baseline; gap: 1px; }
.plan__save {                           /* 절약 금액 배지 */
  font-style: normal; padding: 4px 11px; border-radius: 999px;
  background: var(--blue-text); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
}

/* ---------- 반응형 ---------- */
/* 1023px: .ticket 이 1열이 되어 가로 폭이 오히려 넓어진다. 글자만 살짝 줄인다 */
@media (max-width: 1023px) {
  .plan-dur__b { font-size: 14px; padding: 9px 2px; }
  .plan { padding: 14px 16px; }
  .plan__i b { font-size: 18px; }
  .plan__i span { font-size: 12px; }
  .plan--all { padding: 20px 16px 16px; }
  .plan--all .plan__i b { font-size: 20px; }
}
/* 719px: 폰. 통합 반은 가격이 3줄이라 가로로 두면 이름이 눌린다 → 세로로 쌓는다 */
@media (max-width: 719px) {
  .plan-dur { gap: 4px; padding: 4px; }
  .plan-dur__b { font-size: 13px; padding: 9px 0; }
  .plan { padding: 13px 14px; gap: 10px; }
  .plan__i b { font-size: 17px; }
  .plan__p strong { font-size: 19px; }

  .plan--all { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 14px 14px; }
  .plan--all .plan__i b { font-size: 19px; }
  .plan--all .plan__p { flex-direction: row; align-items: baseline; align-self: stretch; gap: 8px; flex-wrap: wrap; }
  .plan--all .plan__p strong { font-size: 26px; }
  .plan--all .plan__was { font-size: 13px; }
  .plan--all .plan__save { font-size: 12px; padding: 3px 9px; margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .plan-dur__rec { animation: none; }
}

/* ------------------------------------------------------------
   기간 전환 피드백. 숫자가 굴러가는 동안 통합 반 카드가 한 번 반짝이고
   절약 배지가 살짝 튄다. opacity / transform 만 건드려 리페인트를 피한다.
   ------------------------------------------------------------ */
.plan--all::after {
  content: ''; position: absolute; inset: 0; border-radius: 16px;
  box-shadow: 0 0 0 2px var(--sky);
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;          /* 켜질 땐 즉시, 꺼질 땐 천천히 */
}
.plan--all.is-flash::after { opacity: 1; transition: opacity .06s ease; }

.plan__save.is-pop { animation: savePop .3s ease-out; }
@keyframes savePop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .plan--all::after { transition: none; }
  .plan__save.is-pop { animation: none; }
}