/* 블로그 서이추 상세(v2) 전용. 모든 규칙이 .sx2 / .sx2-hero 안에서만 적용된다.
   밤 책상의 블라인드 빛(앰버)이 포인트, 프로그램 '완료' 초록은 프로그램 화면 안에서만. */
.sx2-hero, .sx2 { --sx2-ink: #121315; --sx2-ink2: #1B1C1F; --sx2-paper: #F4F3EF; --sx2-td: #EEECE7; --sx2-md: #A6A39C; --sx2-ld: #2D2E32; --sx2-tl: #161616; --sx2-ml: #5C5A55; --sx2-ll: #DDDAD3; --sx2-amber: #FFB547; --sx2-amber-ink: #8A5300; font-family: inherit; letter-spacing: -0.02em; }
.sx2-hero *, .sx2 * { box-sizing: border-box; }
.sx2 h2, .sx2 h3, .sx2 p, .sx2-hero h1, .sx2-hero p { margin: 0; }

/* 상단 */
.sx2-hero.bas-detail-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--sx2-ink); color: var(--sx2-td); }
.sx2-hero-photo { position: absolute; inset: 0 0 auto 0; height: 660px; z-index: -1; overflow: hidden; }
.sx2-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; display: block; }
.sx2-motion .sx2-hero-photo img { animation: sx2-drift 18s ease-out both; }
.sx2-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, .55) 0%, rgba(10, 10, 11, .38) 38%, rgba(18, 19, 21, .78) 72%, var(--sx2-ink) 100%); }
@keyframes sx2-drift { from { transform: scale(1.12); } to { transform: none; } }
.sx2-hero-in { position: relative; width: min(1080px, 100%); margin: 0 auto; padding: 16px max(22px, env(safe-area-inset-right, 0px)) 52px max(22px, env(safe-area-inset-left, 0px)); }
.sx2-crumbs { display: flex; gap: 7px; align-items: center; font-size: 12px; color: rgba(238, 236, 231, .78); }
.sx2-crumbs a { color: inherit; text-decoration: none; }
.sx2-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.sx2-name { margin-top: 96px !important; font-size: 13px; font-weight: 650; color: rgba(238, 236, 231, .85); }
.sx2-hero h1 { margin-top: 14px; font-size: 54px; line-height: 1.04; font-weight: 900; letter-spacing: -.055em; color: var(--sx2-td) !important; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.sx2-line { display: block; overflow: hidden; padding-bottom: 4px; }
.sx2-line > span { display: inline-block; }
.sx2-line:nth-child(3) > span { color: var(--sx2-amber); }
.sx2-motion .sx2-line > span { animation: sx2-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.sx2-motion .sx2-line:nth-child(2) > span { animation-delay: .12s; }
.sx2-motion .sx2-line:nth-child(3) > span { animation-delay: .24s; }
@keyframes sx2-rise { from { transform: translateY(105%); } to { transform: none; } }
.sx2-lede { margin-top: 18px !important; font-size: 16px; line-height: 1.7; color: rgba(238, 236, 231, .9); }
.sx2-price.bas-detail-price-hint { margin-top: 24px; font-size: 14px; color: var(--sx2-md); }
.sx2-price strong { font-size: 28px; font-weight: 850; letter-spacing: -.04em; color: var(--sx2-td); margin-inline: 2px; }
.sx2-hero .fc-line { margin-top: 12px; background: rgba(250, 249, 246, .96); }
.sx2-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.sx2-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border: 0; border-radius: 14px; font: inherit; font-size: 17px; font-weight: 750; cursor: pointer; }
.sx2-btn-amber { background: var(--sx2-amber); color: #1B1306; }
.sx2-btn:focus-visible, .sx2 button:focus-visible, .sx2-link:focus-visible { outline: 3px solid var(--sx2-amber); outline-offset: 3px; }
.sx2-links { display: flex; gap: 22px; justify-content: center; }
.sx2-link { font-size: 14.5px; color: var(--sx2-td); text-decoration: underline; text-underline-offset: 4px; }
.sx2-rating { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--sx2-md); font: inherit; font-size: 13px; cursor: pointer; }
.sx2-rating strong { color: var(--sx2-td); }
.sx2-stars { color: var(--sx2-amber); letter-spacing: 1px; }
.sx2-fav.bas-detail-favorite { position: absolute; top: 10px; right: max(18px, env(safe-area-inset-right, 0px)); z-index: 3; }
.sx2-stage { position: relative; perspective: 1200px; padding-top: 26px; min-width: 0; }
.sx2-window { border-radius: 12px; overflow: hidden; background: #0E0E19; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }
.sx2-tilt { transform: rotateX(8deg) rotateY(-10deg) rotateZ(1deg); transform-origin: 60% 50%; }
.sx2-motion .sx2-tilt { animation: sx2-float 6s ease-in-out infinite; }
@keyframes sx2-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.sx2-bar { height: 30px; display: flex; align-items: center; justify-content: space-between; padding-inline: 12px; background: #1F2030; color: #C9C7D6; font-size: 11.5px; font-weight: 600; }
.sx2-bar i { display: inline-flex; gap: 6px; }
.sx2-bar i::before, .sx2-bar i::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #3A3B50; }
.sx2-window video { display: block; width: 100%; height: auto; }
.sx2-toasts { position: absolute; left: -6px; right: 28px; top: 0; display: flex; flex-direction: column; gap: 8px; z-index: 2; pointer-events: none; }
.sx2-toast { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: rgba(250, 249, 246, .95); color: #151515; box-shadow: 0 12px 28px rgba(0, 0, 0, .35); font-size: 13.5px; font-weight: 600; }
.sx2-motion .sx2-toast { animation: sx2-pop .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.sx2-motion .sx2-toast.is-out { animation: sx2-leave .35s ease-in both; }
.sx2-toast small { margin-left: auto; color: #7A776F; font-weight: 500; font-size: 12px; }
.sx2-dot { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: #E8F8F2; }
.sx2-toast.is-wait .sx2-dot { background: #FFF1DB; }
@keyframes sx2-pop { from { transform: translateY(-12px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sx2-leave { to { transform: translateY(6px) scale(.97); opacity: 0; } }
.sx2-note { margin-top: 12px !important; font-size: 12px; color: var(--sx2-md); }
.sx2-hero .sx2-note { text-align: right; }

/* 본문 공통 */
.sx2 { background: var(--sx2-ink); color: var(--sx2-td); }
.sx2-in { width: min(640px, 100%); margin: 0 auto; padding-inline: max(22px, env(safe-area-inset-left, 0px)) max(22px, env(safe-area-inset-right, 0px)); }
.sx2-sec { padding-block: 84px 72px; }
.sx2 h2 { font-size: 34px; line-height: 1.22; font-weight: 850; letter-spacing: -.04em; text-wrap: balance; color: inherit !important; }
.sx2 h3 { color: inherit !important; }
.sx2-lead { margin-top: 12px !important; font-size: 16px; line-height: 1.7; color: var(--sx2-md); }
.sx2-light { background: var(--sx2-paper); color: var(--sx2-tl); }
.sx2-light .sx2-lead, .sx2-light .sx2-note-l { color: var(--sx2-ml); }
.sx2-dark { background: var(--sx2-ink); }
.sx2-mark { font-style: normal; background: linear-gradient(transparent 60%, rgba(255, 181, 71, .55) 60%) no-repeat; background-size: 100% 100%; }
.sx2-light .sx2-mark { background-image: linear-gradient(transparent 60%, rgba(255, 181, 71, .72) 60%); }
.sx2-motion .sx2-settle.is-in { animation: sx2-settle .6s ease-out both; }
.sx2-motion .sx2-mark.is-in, .sx2-motion .is-in .sx2-mark { animation: sx2-sweep .9s .25s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes sx2-settle { from { transform: translateY(14px); } to { transform: none; } }
@keyframes sx2-sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

.sx2-ticker { overflow: hidden; border-block: 1px solid var(--sx2-ld); background: var(--sx2-ink2); }
.sx2-ticker-track { display: flex; width: max-content; }
.sx2-motion .sx2-ticker-track { animation: sx2-slide 22s linear infinite; }
.sx2-ticker span { padding: 14px 0; font-size: 15px; font-weight: 700; white-space: nowrap; }
.sx2-ticker em { font-style: normal; color: var(--sx2-amber); margin-inline: 14px; }
@keyframes sx2-slide { to { transform: translateX(-50%); } }

/* 손 vs 프로그램 */
.sx2-lanes { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sx2-lane { border-radius: 16px; padding: 18px 16px 16px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sx2-hand { background: #FFFFFF; border: 1px solid var(--sx2-ll); }
.sx2-auto { background: var(--sx2-ink); color: var(--sx2-td); }
.sx2-lane h3 { margin: 0; font-size: 14px; font-weight: 750; }
.sx2-clock { font-size: 36px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.sx2-hand .sx2-clock { color: #B23B22; }
.sx2-auto .sx2-clock { color: var(--sx2-amber); }
.sx2-act { min-height: 40px; font-size: 13px; line-height: 1.5; color: var(--sx2-ml); }
.sx2-auto .sx2-act { color: var(--sx2-md); }
.sx2-meter { height: 6px; border-radius: 6px; background: #ECEAE4; overflow: hidden; }
.sx2-auto .sx2-meter { background: #2A2B30; }
.sx2-meter i { display: block; height: 100%; width: 100%; background: #B23B22; transform-origin: left; }
.sx2-auto .sx2-meter i { background: var(--sx2-amber); }
.sx2-who { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sx2-fakebtn { border-radius: 10px; padding: 10px 8px; font-size: 12.5px; font-weight: 700; text-align: center; background: #1F6B4F; color: #FFFFFF; }
.sx2-motion .sx2-fakebtn.is-pressed { animation: sx2-press .5s ease both; }
@keyframes sx2-press { 40% { transform: scale(.94); filter: brightness(1.3); } }
.sx2-race-foot { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12.5px; color: var(--sx2-ml); }
.sx2-replay { border: 1px solid var(--sx2-ll); background: #FFFFFF; color: var(--sx2-tl); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }

/* 영상 */
.sx2-film { margin-top: 28px; }

/* 스크롤 이야기: 화면·설명은 한 틀에 고정, 내리는 만큼 다음 단계 */
.sx2-story { padding-top: 84px; background: linear-gradient(var(--sx2-ink), var(--sx2-ink2)); }
.sx2-track { position: relative; height: calc(100vh + 5 * 48vh); height: calc(100svh + 5 * 48svh); margin-top: 8px; }
.sx2-pin { --sx2-top: 0px; --sx2-dock: 0px; position: sticky; top: var(--sx2-top); height: calc(100vh - var(--sx2-top)); height: calc(100svh - var(--sx2-top)); width: min(640px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding: 18px max(22px, env(safe-area-inset-right, 0px)) calc(var(--sx2-dock) + 18px) max(22px, env(safe-area-inset-left, 0px)); }
.sx2-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sx2-progress button { position: relative; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.sx2-progress button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: #34353A; }
.sx2-progress i { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--sx2-amber); width: 0; }
.sx2-screen { position: relative; flex: 1 1 auto; min-height: 0; container-type: size; }
.sx2-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; z-index: 0; transition: opacity 0s linear .4s; }
.sx2-layer.is-on { opacity: 1; z-index: 1; transition: opacity .35s ease; }
.sx2-shot { position: relative; width: min(100cqw, calc(100cqh * var(--r))); aspect-ratio: var(--r); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 24px 50px rgba(0, 0, 0, .5); }
.sx2-shot img { display: block; width: 100%; height: 100%; }
.sx2-spot { position: absolute; border: 2px solid var(--sx2-amber); border-radius: 8px; box-shadow: 0 0 0 9999px rgba(8, 8, 9, .5); transition: left .6s cubic-bezier(.3, .8, .2, 1), top .6s cubic-bezier(.3, .8, .2, 1), width .6s cubic-bezier(.3, .8, .2, 1), height .6s cubic-bezier(.3, .8, .2, 1); }
.sx2-caps { position: relative; flex: none; height: 132px; }
.sx2-cap { position: absolute; inset: 0; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.sx2-cap.is-on { opacity: 1; transform: none; }
.sx2-k { font-size: 12.5px; font-weight: 700; color: var(--sx2-amber); }
.sx2-cap h3 { margin: 6px 0 0; font-size: 21px; line-height: 1.35; font-weight: 820; letter-spacing: -.035em; }
.sx2-cap p { margin-top: 6px !important; font-size: 14px; line-height: 1.6; color: var(--sx2-md); }

/* 안전 */
.sx2-pace { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.sx2-pace-row h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--sx2-ml) !important; }
.sx2-pace-row.is-prog h3 { color: var(--sx2-tl) !important; }
.sx2-line-box { position: relative; margin-top: 10px; height: 34px; overflow: hidden; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--sx2-ll); }
.sx2-strip { position: absolute; inset: 0 auto 0 0; width: 200%; }
.sx2-motion .sx2-strip { animation: sx2-slide 16s linear infinite; }
.sx2-tick { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #B9B5AC; }
.is-prog .sx2-tick { background: var(--sx2-amber); box-shadow: 0 0 0 4px rgba(255, 181, 71, .25); }
.sx2-facts { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sx2-fact { padding: 16px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--sx2-ll); min-width: 0; }
.sx2-fact > b { display: block; font-size: 30px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.sx2-fact > b small { font-size: 15px; font-weight: 750; margin-left: 2px; }
.sx2-fact > span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--sx2-ml); }
.sx2-fact.is-wide { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; }
.sx2-fact.is-wide > b { font-size: 20px; white-space: nowrap; }
.sx2-fact.is-wide > span { margin-top: 0; }
.sx2-honest { margin-top: 16px !important; padding: 16px 18px; border-radius: 14px; border: 1px dashed #C9C5BC; font-size: 14.5px; line-height: 1.7; color: #3C3A36; }
.sx2-incl { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--sx2-ll); }
.sx2-incl li { display: flex; gap: 12px; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--sx2-ll); font-size: 15px; color: var(--sx2-tl); }
.sx2-incl svg { flex: none; color: var(--sx2-amber-ink); }

/* 공통 꼬리(가격·질문·후기·마감)를 이 페이지 톤으로 */
.sx2 .sx2-tail.bas-plan-section, .sx2 .sx2-tail.bas-faq-section, .sx2 .sx2-tail.bas-reviews-section { background: #FFFFFF; color: var(--sx2-tl); }
.sx2 .sx2-tail.bas-close-section { position: relative; isolation: isolate; overflow: hidden; background: #0A0A0B url("/web/uploads/products/detail/seoichu-v2/photo-sunset.jpg") center / cover no-repeat; color: var(--sx2-td); padding-block: 120px 96px; }
.sx2 .sx2-tail.bas-close-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 11, .35), rgba(10, 10, 11, .85) 70%); }
.sx2 .sx2-tail.bas-close-section .bas-close-title { font-size: 42px; line-height: 1.12; font-weight: 900; letter-spacing: -.05em; color: var(--sx2-td) !important; }
.sx2 .sx2-tail.bas-close-section .bas-close-title .bl2-line { display: block; }
.sx2 .sx2-tail.bas-close-section .bas-close-note { color: rgba(238, 236, 231, .85); }
.sx2 .sx2-tail.bas-close-section .bas-close-btn { background: var(--sx2-amber); color: #1B1306; border-color: var(--sx2-amber); }
.sx2 .sx2-tail.bas-close-section .bas-close-link { color: rgba(238, 236, 231, .88); }

/* 넓은 화면: 상단은 글·화면 두 칸, 스크롤 이야기는 화면·설명 두 칸 */
@media (min-width: 960px) {
  .sx2-hero-photo { height: 100%; }
  .sx2-hero-photo::after { background: linear-gradient(90deg, rgba(10, 10, 11, .82) 0%, rgba(10, 10, 11, .5) 48%, rgba(10, 10, 11, .35) 100%); }
  .sx2-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; padding-bottom: 24px; }
  .sx2-name { margin-top: 64px !important; }
  .sx2-hero h1 { font-size: 64px; }
  .sx2-actions { flex-direction: row; align-items: center; gap: 22px; }
  .sx2-btn { width: auto; padding-inline: 34px; }
  .sx2-stage { padding-top: 64px; }
  .sx2-pin { width: min(1080px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr); column-gap: 40px; }
  .sx2-progress { grid-column: 1 / -1; }
  .sx2-caps { height: 220px; align-self: center; }
}
@media (max-width: 359px) { .sx2-hero h1 { font-size: 44px; } .sx2 h2 { font-size: 30px; } .sx2-clock { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { .sx2-hero *, .sx2 * { animation: none !important; transition: none !important; } }