/* BP-L18 · shortt 구역 4 · 7 · 8을 하위 페이지에 옮긴 공용 모양(도경 10/12 고름, v0 검토안).
   원본 시안: reviews/shortt/d4-bars.html · d7-guide.html · d8-words.html (+ draft.css).
   ④ pricing.html 매월 크레딧 막대 · ⑦ guide.html 가이드 넘기기 · ⑧ features/* 첫 화면 바뀌는 낱말.
   바탕 #060D19 · 흰 글 · 하늘색은 네모 마침표와 포커스만. 블러 · 빛 번짐 · 보라 · 작은 머리글 · 알약 없음. */

.sx {
  --sx-fg: #F4F6FA; --sx-mute: #9AA4B6; --sx-faint: #7D8799;
  --sx-line: rgba(244, 246, 250, .14); --sx-line-strong: rgba(244, 246, 250, .32);
  --sx-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative; background: #060D19; color: var(--sx-fg);
}
.sx h2, .sx h3, .sx p { margin: 0; }
.sx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sx :focus-visible, .page-shell main .sx :focus-visible { outline: 3px solid var(--cyan, #7EE0FF); outline-offset: 4px; border-radius: 6px; }

/* 구역 제목 — 각 페이지의 h2 크기 · 굵기 그대로, 끝은 하늘색 네모 마침표 */
.sx .sx-title { font-size: clamp(32px, 3.7vw, 54px); line-height: 1.3; font-weight: 700; letter-spacing: -.035em; color: var(--sx-fg); }
.sx-sq { display: inline-block; width: .17em; height: .17em; margin-left: .07em; background: var(--cyan, #7EE0FF); vertical-align: baseline; }

/* ── ④ 매월 크레딧 막대 + 굴러가는 숫자 (pricing.html, 요금 카드 아래) ── */
.sx-br { padding: clamp(72px, 11vh, 120px) 0 clamp(96px, 14vh, 152px); }
.sx-br-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.sx-br-big { margin-top: 48px; font-size: 18px; color: var(--sx-mute); }
.sx-br-name { display: block; margin-bottom: 6px; font-size: 20px; font-weight: 700; color: var(--sx-fg); }
.sx-br-num { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; color: var(--sx-fg); }
.sx-br-num .sx-odo { font-size: clamp(52px, 6vw, 84px); line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sx-br-num .sx-u { font-size: 20px; font-weight: 700; }
.sx .sx-br-sub { margin-top: 14px; font-size: 17px; color: var(--sx-fg); font-variant-numeric: tabular-nums; }
.sx .sx-br-note { margin-top: 6px; font-size: 15px; color: var(--sx-mute); }
.sx-br-chart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2vw, 28px); align-items: end; height: 420px; border-bottom: 1px solid var(--sx-line); }
.sx-br-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; min-width: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: center; }
.sx-br-val { display: block; margin-bottom: 10px; font-size: 16px; font-weight: 700; color: var(--sx-mute); font-variant-numeric: tabular-nums; transition: color .3s; }
.sx-br-col { display: block; height: calc(var(--h) * 3.3px); min-height: 6px; border-radius: 6px 6px 0 0; background: rgba(244, 246, 250, .16); transform-origin: 50% 100%; transition: background-color .3s; }
.sx-br-bar:hover .sx-br-col { background: rgba(244, 246, 250, .3); }
.sx-br-bar[aria-pressed="true"] .sx-br-col { background: var(--sx-fg); }
.sx-br-bar[aria-pressed="true"] .sx-br-val { color: var(--sx-fg); }
.sx-br-labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2vw, 28px); margin-top: 12px; text-align: center; }
.sx-br-labels span { font-size: 16px; font-weight: 700; color: var(--sx-mute); }
.sx-br-labels span.is-on { color: var(--sx-fg); }
.sx-br-labels small { display: block; font-size: 13px; font-weight: 500; color: var(--sx-faint); }
.sx-odo .odometer-digit, .sx-odo .odometer-formatting-mark { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .sx-br-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sx-br-big { margin-top: 28px; }
  .sx-br-chart { height: 270px; }
  .sx-br-col { height: calc(var(--h) * 2px); }
  .sx-br-val { font-size: 14px; margin-bottom: 8px; }
  .sx-br-labels span { font-size: 15px; }
  .sx-br-labels small { font-size: 13px; }
}

/* ── ⑦ 가이드 넘기기 (guide.html, 첫 화면 바로 아래) ── */
.sx-gd { padding: 0 0 clamp(88px, 13vh, 136px); }
.sx-gd-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.sx-gd-nav { display: flex; gap: 10px; flex: none; }
.sx-gd-btn { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; border: 1px solid var(--sx-line-strong); background: transparent; color: var(--sx-fg); cursor: pointer; transition: border-color .2s, opacity .2s; }
.sx-gd-btn:hover:not([aria-disabled="true"]) { border-color: var(--sx-fg); }
.sx-gd-btn[aria-disabled="true"] { opacity: .3; cursor: default; }
.sx-gd-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-gd-view { overflow: hidden; margin-top: 48px; }
.sx-gd-track { display: flex; touch-action: pan-y pinch-zoom; margin-left: -28px; }
.sx-gd-slide { flex: 0 0 33.3333%; min-width: 0; padding-left: 28px; }
.sx-gd-in { display: flex; flex-direction: column; height: 100%; min-height: 300px; padding-top: 26px; border-top: 1px solid var(--sx-line-strong); }
.sx .sx-gd-cat { font-size: 15px; color: var(--sx-mute); }
.sx .sx-gd-in h3 { margin-top: 14px; font-size: 26px; line-height: 1.32; font-weight: 800; letter-spacing: -.035em; color: var(--sx-fg); }
.sx .sx-gd-desc { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--sx-mute); }
.sx-gd-foot { margin-top: auto; padding-top: 24px; }
.sx-gd-read { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--sx-fg); font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 6px; cursor: pointer; }
.sx-gd-state { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--sx-faint); }
.sx-gd-progress { position: relative; height: 1px; margin-top: 40px; background: var(--sx-line); overflow: hidden; }
.sx-gd-progress i { position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--sx-fg); }
@media (min-width: 721px) and (max-width: 1000px) { .sx-gd-slide { flex-basis: 50%; } }
@media (max-width: 720px) {
  .sx-gd-btn { width: 46px; height: 46px; }
  .sx-gd-view { margin-top: 32px; }
  .sx-gd-track { margin-left: -16px; }
  .sx-gd-slide { flex-basis: 84%; padding-left: 16px; }
  .sx-gd-in { min-height: 270px; }
  .sx .sx-gd-in h3 { font-size: 23px; }
  .sx .sx-gd-desc { font-size: 15px; }
}
/* 넘기기 스크립트를 못 읽었을 때만: 화살표 없이 모두 펼쳐 보임 */
.sx-gd.is-static .sx-gd-nav, .sx-gd.is-static .sx-gd-progress { display: none; }
.sx-gd.is-static .sx-gd-track { flex-wrap: wrap; row-gap: 44px; }
@media (max-width: 720px) { .sx-gd.is-static .sx-gd-slide { flex-basis: 100%; } .sx-gd.is-static .sx-gd-in { min-height: 0; } }

/* ── ⑧ 바뀌는 낱말 (features/* 첫 화면 h1) — '하나의 기획으로 [글 · 카드뉴스 · 숏폼 · 포스터].'
   한 바퀴 돌고 그 페이지의 형식에서 멈춘다. 화면 읽기 프로그램은 .sx-sr의 최종 문장 하나만 읽는다. */
.sx-wr-row { --F: clamp(52px, 5.2vw, 76px); --L: clamp(22px, 2vw, 30px); --row: 1.18em;
  display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: clamp(14px, 1.4vw, 22px); }
.sx-wr-lead { font-size: var(--L); line-height: 1.3; font-weight: 700; letter-spacing: -.03em; white-space: nowrap;
  transform: translateY(calc((var(--F) - var(--L)) * .3)); }
.sx-wr-drum { display: block; position: relative; height: calc(var(--row) * 3); overflow: hidden; font-size: var(--F); line-height: var(--row); font-weight: 800; letter-spacing: -.05em; }
.sx-wr-list { display: block; transform: translateY(calc(var(--row) * (1 - var(--i, 1)))); }
.sx-wr-list.is-moving { transition: transform var(--dur, .7s) var(--sx-ease, cubic-bezier(.22, 1, .36, 1)); }
.sx-wr-w { display: block; height: var(--row); white-space: nowrap; opacity: 0; transition: opacity var(--dur, .7s) cubic-bezier(.22, 1, .36, 1); }
.sx-wr-w.is-near { opacity: .16; }
.sx-wr-w.is-cur { opacity: 1; }
.sx-wr-w:not(.is-cur) .sx-sq { visibility: hidden; }
@media (max-width: 720px) {
  .sx-wr-row { --F: 52px; --L: 22px; grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: 4px; }
  .sx-wr-lead { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sx *, .sx-wr-list, .sx-wr-w { transition: none !important; animation: none !important; }
  .sx-br-col { transform: none !important; }
}

/* Plan identity stays consistent in the interactive comparison. */
.sx-br { --selected-tier:#7EE0FF; }
.sx-br-bar:nth-child(1) { --tier:#7EE0FF; }
.sx-br-bar:nth-child(2) { --tier:#91B4FF; }
.sx-br-bar:nth-child(3) { --tier:#BC9AFF; }
.sx-br-bar:nth-child(4) { --tier:#ED9CFF; }
.sx-br-bar[aria-pressed="true"] .sx-br-col { background:var(--tier); }
.sx-br-bar[aria-pressed="true"] .sx-br-val { color:var(--tier); }
.sx-br-name,.sx-br-labels span.is-on { color:var(--selected-tier); }

/* Same row height, smaller neighbors: movement never shifts the layout. */
.sx-wr-w { transform:scale(.72); transform-origin:left center; transition:opacity .65s ease, color .65s ease, transform .65s cubic-bezier(.22,1,.36,1); }
.sx-wr-w.is-cur { transform:scale(1); color:#a8e8ff; }
.sx-wr-w.is-near { opacity:.3; }
/* 도경 10/13: 요금 비교를 카드보다 먼저 배치, 상단 메뉴와 간격 확보. */
.pricing-page main > .sx-br:first-child { padding-top:calc(var(--header-h, 80px) + 64px); }