/* 유지비 절감 — 가격표 + 스택 팝업.
   오너가 시안 비교 페이지에서 고른 조합(가격표 디자인 ⑩ + 모션 ④)을 그대로 옮겨 왔다.
   원본: reports/2026-08-20 - 모션적용 - 1차 - 여윳돈카드+가격표/{base-price.css, m10-04.css}
   시안 페이지의 스코프 표식(data-t="10" / data-m="04")을 그대로 유지한다 —
   이름을 바꾸면 고른 것과 같은 화면이라는 보장이 사라진다.

   .stage 는 이 블록 안쪽의 받침일 뿐이고, 사이트의 암전 섹션(.band.stage)과는
   선택자가 겹치지 않는다(그쪽은 .band 와 함께 쓰는 복합 선택자다). */

/* 시안 페이지의 무대 폭. 본문 기둥이 넓어도 가격표는 이 폭 안에서만 선다. */
[data-t="10"].stage{max-width:44rem;margin-inline:auto;}

/* 시안 ⑩ 가격표 — 이 시안의 스타일 전부. 선택자는 모두 [data-t="10"] 로 시작한다.
   등장 모션은 넣지 않는다(이번 라운드는 생김새만 고른다). */

/* 지면은 실제 섹션과 같은 따뜻한 백색으로 깔았다.
   가격표를 흰 종이로 세우려면 그 밑이 흰색이 아니어야 형태가 선다. */
[data-t="10"].stage{
  background:var(--warm);
  border-radius:var(--r-card);
  padding:clamp(1.75rem,5vw,3rem) clamp(1.25rem,4vw,2.5rem) clamp(1.5rem,4vw,2.25rem);
  text-align:center;
}

/* 가운데 한 장을 세우는 조판이라 전체를 가운데로 모은다.
   좁은 기둥(25rem)에 담아 두면 44rem 지면에서도 가격표가 흩어지지 않는다. */
[data-t="10"] .t10-col{max-width:25rem;margin:0 auto;}

[data-t="10"] .t10-eyebrow{
  margin:0;
  font-size:.75rem;font-weight:700;letter-spacing:0.06em;
  color:var(--bus-ink);   /* 밝은 지면 위 노란 계열 글자는 원색이 아니라 이 색 */
}
[data-t="10"] .t10-title{
  margin:.5rem 0 clamp(1.75rem,5vw,2.5rem);
  font-size:clamp(1.5rem,4.2vw,2.15rem);font-weight:700;letter-spacing:-0.03em;line-height:1.25;
}

/* 다른 차종의 값. 취소선도 판촉 표기도 쓰지 않고, 라벨과 작은 활자로만 구분한다. */
[data-t="10"] .t10-was{
  margin:0 0 .85rem;
  font-size:.8125rem;font-weight:600;line-height:1.5;color:var(--muted);
}

/* ---------- 가격표 한 장 ---------- */
[data-t="10"] .t10-tagwrap{position:relative;}

/* 끈. 반타원 호의 아래 끝이 구멍 한가운데(위에서 1.5rem)에 닿게 세웠다 —
   그래야 끈이 구멍을 통과한 것처럼 보인다. 도형뿐이라 이미지가 필요 없다. */
[data-t="10"] .t10-string{
  position:absolute;left:50%;top:-.2rem;
  width:3.1rem;height:1.7rem;margin-left:-1.55rem;
  border:1.5px solid var(--line);
  border-bottom:0;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
}

[data-t="10"] .t10-tag{
  position:relative;
  padding:2.75rem 1.25rem 1.6rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);

  /* 구멍은 색을 덧칠한 원이 아니라 진짜 구멍이어야 한다 —
     지면 색이 바뀌어도 따라오게 mask 로 판을 뚫는다.
     no-repeat 를 명시하지 않으면 마스크가 되풀이돼 상자 밖에도 구멍이 생긴다. */
  -webkit-mask-image:radial-gradient(circle at 50% 1.5rem, #0000 0 .34rem, #000 calc(.34rem + 1px));
          mask-image:radial-gradient(circle at 50% 1.5rem, #0000 0 .34rem, #000 calc(.34rem + 1px));
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
}

[data-t="10"] .t10-label{
  margin:0 0 .35rem;
  font-size:.8125rem;font-weight:600;letter-spacing:0.01em;line-height:1.5;color:var(--muted);
}

/* 가격표는 금액이 압도적으로 커야 가격표로 읽힌다. 색은 쓰지 않는다 —
   이 지면의 색 한 자리는 아래 '남는 돈'의 몫이다. */
[data-t="10"] .t10-price{
  margin:0;
  font-size:clamp(3.4rem,13vw,5.25rem);
  font-weight:700;line-height:.95;color:var(--text);
}
[data-t="10"] .t10-fig{letter-spacing:-0.045em;}
[data-t="10"] .t10-won{
  font-size:.3em;font-weight:700;letter-spacing:-0.02em;margin-left:.08em;
}

/* ---------- 남는 돈 ---------- */
/* 노란 면 위 글자는 규칙대로 --text. 알약 곡률 말고 카드 곡률을 쓴 이유는
   좁은 화면에서 이 줄이 두 줄로 접힐 때 알약 곡률이 어그러져 보이기 때문이다. */
[data-t="10"] .t10-save{
  margin:1.5rem 0 0;
  padding:.8rem 1.1rem;
  background:var(--bus);color:var(--text);
  border-radius:var(--r-card);
  font-size:clamp(.95rem,2.6vw,1.0625rem);font-weight:700;line-height:1.45;letter-spacing:-0.01em;
}
[data-t="10"] .t10-save-fig{font-size:1.45em;font-weight:700;letter-spacing:-0.03em;}

/* ---------- 누적 두 칸 ---------- */
[data-t="10"] .t10-acc{
  width:100%;margin-top:1.1rem;
  border-collapse:collapse;table-layout:fixed;
}
[data-t="10"] .t10-acc caption{
  padding-bottom:.5rem;
  font-size:.75rem;font-weight:700;letter-spacing:0.04em;color:var(--muted);
  text-align:center;
}
[data-t="10"] .t10-acc th{
  padding:0 0 .1rem;
  font-size:.75rem;font-weight:600;color:var(--muted);text-align:center;
}
[data-t="10"] .t10-acc td{
  padding:0;
  font-size:clamp(1.15rem,3.4vw,1.4rem);font-weight:700;letter-spacing:-0.03em;
  color:var(--bus-ink);   /* 남는 돈 계열은 노랑으로 묶되, 글자는 언제나 잉크색으로 */
  text-align:center;
}
/* 두 칸을 나누는 건 상자가 아니라 얇은 세로선 하나면 충분하다. */
[data-t="10"] .t10-acc th+th,
[data-t="10"] .t10-acc td+td{border-left:1px solid var(--line);}

/* ---------- 근거 ---------- */
[data-t="10"] .t10-basis{
  margin:.5rem 0 0;
  font-size:.75rem;font-weight:500;line-height:1.6;color:var(--muted);
}
[data-t="10"] .t10-basis+.t10-basis{margin-top:.15rem;}

[data-t="10"] .t10-note{
  margin:1.4rem auto 0;max-width:34rem;
  font-size:.6875rem;line-height:1.65;color:var(--muted);
}

/* ---------- 좁은 화면 ---------- */
/* 무너질 만한 곳은 두 군데다: 가격표 안쪽 여백과 누적 두 칸.
   두 칸은 세로로 세우지 않는다 — '3년 / 5년'은 나란히 놓여야 늘어난다는 게 읽힌다. */
@media (max-width:30rem){
  [data-t="10"] .t10-tag{padding:2.6rem .9rem 1.35rem;}
  [data-t="10"] .t10-save{padding:.75rem .9rem;}
  [data-t="10"] .t10-acc th+th,
  [data-t="10"] .t10-acc td+td{padding-left:.4rem;}
  [data-t="10"] .t10-acc th,
  [data-t="10"] .t10-acc td{padding-right:.4rem;}
}


/* ⑩ 가격표 × 모션 ④ 스택 팝업(스프링 반동)
   ────────────────────────────────────────────────────────────
   ⑤ 가 '아래에서 쌓이는' 안이라면 ⑩ 은 '위에서 매달려 내려오는' 안이다.
   같은 back-out 곡선을 쓰되 방향을 뒤집었다 — 가격표는 끈에 걸린 물건이라
   아래에서 솟아오르면 물성이 어긋난다.

   ── 반동을 받는 요소는 셋뿐 ──
   ① .t10-tag  가격표 한 장이 위에서 내려와 제자리를 조금 지나쳤다가 앉는다
   ② .t10-save '해마다 153만원이 남습니다'가 아래에서 튀어 오른다
   ③ .t10-acc  누적 두 칸이 마지막에 낮게 따라 올라온다
   나머지(머리줄·LPG였다면·근거·각주)는 페이드만. 반동이 넷을 넘으면
   화면이 통째로 출렁이는 것처럼 보여서 무엇이 주인공인지 사라진다.

   ── 기준점(transform-origin)을 구멍에 두는 이유 ──
   태그를 가운데 기준으로 회전시키면 판 전체가 도는 '판때기'가 되고,
   구멍 자리(위에서 1.5rem, base-price.css 의 mask 중심과 같은 좌표)를
   기준으로 돌리면 그 점에 걸려 흔들리는 '매달린 물건'이 된다.
   최종 상태는 transform:none 이라 이 기준점은 화면에 아무 흔적도 남기지 않는다.

   ── 끈은 고정한다(판단 근거) ──
   끈(.t10-string)은 태그를 따라 움직이지 않는다. 끈은 매다는 쪽(고정점)이고
   흔들리는 쪽은 매달린 물건이다 — 둘이 함께 움직이면 끈이 물건에 그려진
   무늬처럼 보인다. 게다가 이 지면에서 태그는 끈 위에 덮여 그려지므로(DOM 순서),
   태그가 .85rem 위에서 시작하면 끈이 태그 뒤에 완전히 가려졌다가
   태그가 내려앉으면서 호(弧)의 윗부분이 드러난다.
   결과적으로 '끈에 매달려 내려오는' 그림이 공짜로 나온다. 그래서 끈에는
   투명도만 주고 이동은 주지 않는다.

   ── 상태 전환 규약 ──
   transition 은 .is-in 쪽에만 둔다. .is-in 을 뗄 때는 전이 없이 즉시
   초기 상태로 돌아가야 재생 버튼을 연타해도 되감기 잔상이 남지 않는다. */

[data-t="10"][data-m="04"]{
  /* 넘치는 양이 이동 거리의 약 13%. 매달린 물건의 반동으로는 이 정도가 상한이다. */
  --m1004-back:cubic-bezier(.34,1.56,.64,1);
  --m1004-soft:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 조연: 머리줄과 'LPG였다면' (페이드만) ---------- */
[data-t="10"][data-m="04"]:not(.is-in) .t10-eyebrow,
[data-t="10"][data-m="04"]:not(.is-in) .t10-title,
[data-t="10"][data-m="04"]:not(.is-in) .t10-was{
  opacity:0;
  transition:none;
}
[data-t="10"][data-m="04"].is-in .t10-eyebrow{
  opacity:1;
  transition:opacity .38s var(--m1004-soft) 0s;
}
[data-t="10"][data-m="04"].is-in .t10-title{
  opacity:1;
  transition:opacity .42s var(--m1004-soft) .06s;
}
[data-t="10"][data-m="04"].is-in .t10-was{
  opacity:1;
  transition:opacity .38s var(--m1004-soft) .16s;
}

/* ---------- 주인공 ①: 가격표 한 장 ----------
   시작점을 .85rem 위로 잡은 건 'LPG였다면 244만원' 줄과의 간격(.85rem)과 정확히 같다.
   더 올리면 내려오는 도중 태그의 흰 면이 그 줄을 덮어 글자를 지운다.
   기울기 -2.6deg 는 구멍을 축으로 한 흔들림 — 곡선이 back-out 이라
   0deg 를 조금 지나 반대쪽으로 갔다가 제자리로 돌아온다(추가 진자처럼). */
[data-t="10"][data-m="04"] .t10-tag{
  transform-origin:50% 1.5rem;
}
[data-t="10"][data-m="04"]:not(.is-in) .t10-tag{
  opacity:0;
  transform:translateY(-.85rem) rotate(-2.6deg);
  transition:none;
}
[data-t="10"][data-m="04"].is-in .t10-tag{
  opacity:1;
  transform:none;
  transition:opacity .34s var(--m1004-soft) .18s,
             transform .62s var(--m1004-back) .18s;
}

/* 끈 — 이동 없이 켜지기만. 위 주석의 근거대로 고정이 자연스럽다. */
[data-t="10"][data-m="04"]:not(.is-in) .t10-string{
  opacity:0;
  transition:none;
}
[data-t="10"][data-m="04"].is-in .t10-string{
  opacity:1;
  transition:opacity .40s var(--m1004-soft) .30s;
}

/* ---------- 주인공 ②: 남는 돈 ----------
   태그가 앉은 뒤 노란 줄이 아래에서 올라온다. 방향이 반대라 두 반동이
   섞이지 않고 '내려온 값 → 남는 값'의 순서로 읽힌다.
   확대는 .97 로 아주 얕게 — 노란 면은 넓어서 크게 부풀리면 면적이 출렁인다. */
[data-t="10"][data-m="04"]:not(.is-in) .t10-save{
  opacity:0;
  transform:translateY(1.15rem) scale(.97);
  transition:none;
}
[data-t="10"][data-m="04"].is-in .t10-save{
  opacity:1;
  transform:none;
  transition:opacity .34s var(--m1004-soft) .62s,
             transform .56s var(--m1004-back) .62s;
}

/* ---------- 주인공 ③: 누적 두 칸 ----------
   같은 곡선, 더 짧은 거리. 앞의 둘을 따라오는 꼬리라 반동이 눈에 띄면 안 된다. */
[data-t="10"][data-m="04"]:not(.is-in) .t10-acc{
  opacity:0;
  transform:translateY(.8rem);
  transition:none;
}
[data-t="10"][data-m="04"].is-in .t10-acc{
  opacity:1;
  transform:none;
  transition:opacity .36s var(--m1004-soft) .82s,
             transform .52s var(--m1004-back) .82s;
}

/* ---------- 조연: 근거와 각주 ---------- */
[data-t="10"][data-m="04"]:not(.is-in) .t10-basis,
[data-t="10"][data-m="04"]:not(.is-in) .t10-note{
  opacity:0;
  transition:none;
}
[data-t="10"][data-m="04"].is-in .t10-basis{
  opacity:1;
  transition:opacity .40s var(--m1004-soft) .92s;
}
[data-t="10"][data-m="04"].is-in .t10-note{
  opacity:1;
  transition:opacity .40s var(--m1004-soft) 1s;    /* 전체 재생 1.40s 에서 끝난다 */
}

/* ---------- 모션을 원치 않는 사람 ----------
   내려오고 튀는 동작은 전정기관을 건드리므로 예외 없이 끈다.
   초기 상태 규칙(:not(.is-in))의 명시도가 더 높아 !important 로 확실히 덮는다. */
@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) [data-t="10"][data-m="04"] .t10-eyebrow,
  html:not(.force-motion) [data-t="10"][data-m="04"] .t10-title,
  html:not(.force-motion) [data-t="10"][data-m="04"] .t10-was,
  html:not(.force-motion) [data-t="10"][data-m="04"] .t10-string,
  html:not(.force-motion) [data-t="10"][data-m="04"] .t10-tag,
  html:not(.force-motion) [data-t="10"][data-m="04"] .t10-save,
  html:not(.force-motion) [data-t="10"][data-m="04"] .t10-acc,
  html:not(.force-motion) [data-t="10"][data-m="04"] .t10-basis,
  html:not(.force-motion) [data-t="10"][data-m="04"] .t10-note{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}