/* 오늘배움 체험 구간: 내려 보면 빼꼼이 수업 보드를 눌러 가며 보여 준다. */
.lt-xp {
  --xp-ink: #1a365d;
  --xp-ink-strong: #0f2442;
  --xp-line: #dde3ea;
  --xp-soft: #f2f5f9;
  --xp-muted: #4a5868;
  --xp-sun: #ffd965;
  --xp-sun-soft: #fff6d8;
  margin: 56px 0 64px;
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1c2836;
}
.lt-xp-head { max-width: 640px; margin: 0 0 28px; }
.lt-xp-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--xp-ink); font-size: 14px; font-weight: 700; }
.lt-xp-kicker::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--xp-sun); box-shadow: 0 0 0 2px var(--xp-ink); }
.lt-xp-head h2 { margin: 0 0 8px; color: var(--xp-ink); font-size: clamp(26px, 3.2vw, 36px); line-height: 1.3; letter-spacing: -0.02em; font-weight: 800; }
.lt-xp-head p { margin: 0; color: var(--xp-muted); font-size: 16px; line-height: 1.7; }

.lt-xp-body { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 48px; align-items: start; }
.lt-xp-steps { list-style: none; margin: 0; padding: 0; }
.lt-xp-steps > li { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; opacity: .38; transition: opacity .3s ease; }
.lt-xp-steps > li:first-child { min-height: 46vh; justify-content: flex-start; padding-top: 40px; }
.lt-xp-steps > li:last-child { min-height: 54vh; }
.lt-xp-steps > li.is-on { opacity: 1; }
.lt-xp-steps .xp-no { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 12px; border-radius: 50%; border: 2px solid var(--xp-ink); color: var(--xp-ink); font-size: 14px; font-weight: 800; }
.lt-xp-steps > li.is-on .xp-no { background: var(--xp-ink); color: #fff; }
.lt-xp-steps h3 { margin: 0 0 8px; color: var(--xp-ink); font-size: 22px; line-height: 1.4; letter-spacing: -0.01em; }
.lt-xp-steps p { margin: 0; color: var(--xp-muted); font-size: 16px; line-height: 1.75; }
.lt-xp-steps .xp-tools { margin-top: 10px; color: var(--xp-muted); font-size: 14px; }
.lt-xp-steps .xp-tools a { color: var(--xp-ink); font-weight: 700; }
.lt-xp-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lt-xp-cta a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1px solid var(--xp-ink); border-radius: 8px; color: var(--xp-ink); font-size: 15px; font-weight: 700; text-decoration: none; }
.lt-xp-cta a.is-main { background: var(--xp-ink); color: #fff; }
.lt-xp-cta a:hover { background: var(--xp-ink-strong); border-color: var(--xp-ink-strong); color: #fff; }
/* Product-wide link colors must not override the primary button's contrast. */
body[data-lt-theme="unified"] .pd-page .lt-xp .lt-xp-cta a.is-main { color: #fff; }
body[data-lt-theme="unified"] .pd-page .lt-xp .lt-xp-cta a.is-main:is(:hover, :focus-visible) { background: var(--xp-ink-strong); border-color: var(--xp-ink-strong); color: #fff; }

/* 무대: 실제 제품 화면 */
.lt-xp-stage { position: sticky; top: 96px; }
.xs { position: relative; margin: 0; border: 1px solid var(--xp-line); border-radius: 12px; background: #fff; box-shadow: 0 24px 48px -32px rgb(15 36 66 / 45%); }
.xs-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--xp-line); border-radius: 12px 12px 0 0; background: var(--xp-soft); }
.xs-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #c9d2dd; }
.xs-tool { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: var(--xp-ink); font-size: 13px; }
.xs-tool img { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; }
.xs-bar small { margin-left: auto; color: var(--xp-muted); font-size: 12px; }
.xs-view { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 0 0 12px 12px; background: #f3f3f3; }
.xs-layer { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.3,.7,.2,1), transform-origin .8s cubic-bezier(.3,.7,.2,1); will-change: transform; }
.xs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity .45s ease; }
.xs-img.is-on { opacity: 1; }
.xs-hot { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid var(--xp-ink); box-shadow: 0 0 0 4px rgb(255 217 101 / 90%); transition: left .8s cubic-bezier(.3,.7,.2,1), top .8s cubic-bezier(.3,.7,.2,1), opacity .3s; pointer-events: none; }
.xs-hot.is-off { opacity: 0; }
.xs-hot.is-ping { animation: xs-ping 1.2s ease .5s 2; }
@keyframes xs-ping { 0% { transform: scale(1); } 40% { transform: scale(.82); } 100% { transform: scale(1); } }

/* 빼꼼과 말풍선: 화면 아래에서 빼꼼 */
.xs-pk { position: absolute; left: 6%; bottom: -10px; width: 112px; transition: left .8s cubic-bezier(.3,.7,.2,1); z-index: 3; }
.xs-face .pk { display: block; width: 100%; height: auto; animation: xb-bob 2.8s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgb(15 36 66 / 18%)); }
@keyframes xb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.xs-say { position: absolute; left: 50%; bottom: calc(100% - 4px); width: max-content; max-width: 230px; padding: 9px 12px; border: 2px solid var(--xp-ink); border-radius: 12px; background: #fff; color: var(--xp-ink); font-size: 13px; font-weight: 700; line-height: 1.45; transform: translateX(-30%); }
.xs-say::after { content: ""; position: absolute; left: 30%; top: 100%; width: 10px; height: 10px; margin-top: -5px; border-right: 2px solid var(--xp-ink); border-bottom: 2px solid var(--xp-ink); background: #fff; transform: rotate(45deg); }

@media (max-width: 960px) {
  .lt-xp { margin: 40px 0 48px; }
  .lt-xp-body { display: flex; flex-direction: column; }
  .lt-xp-stage { order: -1; align-self: stretch; top: 64px; z-index: 2; padding: 8px 0 14px; background: linear-gradient(#fff 90%, rgb(255 255 255 / 0)); }
  .xs-bar small { display: none; }
  .xs-pk { width: 78px; bottom: -8px; }
  .xs-say { font-size: 12px; max-width: 180px; padding: 7px 10px; }
  .xs-hot { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .lt-xp-steps > li, .lt-xp-steps > li:first-child, .lt-xp-steps > li:last-child { min-height: 52vh; padding: 16px 0; justify-content: flex-start; }
  .lt-xp-steps h3 { font-size: 19px; }
}
@media (max-width: 480px) {
  /* Keep narration in the frame while JS continues moving the screen hotspot. */
  .xs-pk { left: 12px !important; }
  .xs-say { left: 0; max-width: min(220px, calc(100vw - 72px)); box-sizing: border-box; overflow-wrap: anywhere; transform: none; }
  .xs-say::after { left: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .xs *, .xs-layer { animation: none !important; transition: none !important; }
}

/* ===== 말랑말랑 3D 모션 (2026-11-14) =====
   길잡이(빼꼼·해내온 봇)가 단계마다 통통 뛰어 옮겨 가고, 가만히 있을 때는 젤리처럼 숨 쉰다.
   화면 틀은 짚는 곳을 향해 아주 조금 기운다. 눌러 보면 '뽀잉' 한다. */
.xs { transform: perspective(1400px) rotateX(var(--xs-rx, 0deg)) rotateY(var(--xs-ry, 0deg)); transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.xs-pk { --dir: 1; }
.xs-hop, .xs-face { transform-origin: 50% 100%; }
.xs-face { cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.xs-face .pk { transform-origin: 50% 100%; animation: xb-jelly 2.6s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgb(15 36 66 / 20%)); }
@keyframes xb-jelly {
  0%, 100% { transform: scale(1, 1); }
  30% { transform: scale(1.04, .96); }
  62% { transform: scale(.97, 1.035) translateY(-2px); }
}
/* 뛰기: 움츠렸다가 → 길쭉하게 솟고 → 납작하게 내려앉고 → 출렁 */
.xs-pk.is-hop .xs-hop { animation: xb-hop .95s cubic-bezier(.3, .6, .3, 1) both; }
@keyframes xb-hop {
  0% { transform: translateY(0) scale(1, 1) rotate(0deg); }
  14% { transform: translateY(0) scale(1.22, .74) rotate(0deg); }
  40% { transform: translateY(-38px) scale(.86, 1.18) rotate(calc(var(--dir) * 9deg)); }
  62% { transform: translateY(0) scale(1.26, .72) rotate(0deg); }
  76% { transform: translateY(-9px) scale(.93, 1.09); }
  88% { transform: translateY(0) scale(1.07, .94); }
  100% { transform: translateY(0) scale(1, 1); }
}
.xs-pk.is-boing .xs-hop { animation: xb-boing .75s cubic-bezier(.3, .6, .3, 1) both; }
@keyframes xb-boing {
  0% { transform: scale(1, 1); }
  18% { transform: scale(1.3, .68); }
  42% { transform: scale(.82, 1.24) translateY(-14px); }
  62% { transform: scale(1.14, .88); }
  80% { transform: scale(.96, 1.05); }
  100% { transform: scale(1, 1); }
}
/* 바닥 그림자: 뜨면 작아지고 옅어진다 */
.xs-shadow { position: absolute; left: 50%; bottom: -3px; z-index: -1; width: 64%; height: 12px; margin-left: -32%; border-radius: 50%; background: radial-gradient(closest-side, rgb(15 23 42 / 30%), rgb(15 23 42 / 0%)); pointer-events: none; }
.xs-pk.is-hop .xs-shadow { animation: xb-shadow .95s cubic-bezier(.3, .6, .3, 1) both; }
@keyframes xb-shadow {
  0%, 62%, 100% { transform: scale(1); opacity: 1; }
  14% { transform: scale(1.16); opacity: 1; }
  40% { transform: scale(.5); opacity: .4; }
}
/* 얼굴 속 작은 움직임 */
.pk .pk-eyes, .pk .pk-sprout, .pk .pk-head { transform-box: fill-box; }
.pk .pk-eyes { transform-origin: 50% 50%; animation: pk-blink 4.4s infinite; }
@keyframes pk-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
.pk .pk-sprout { transform-origin: 50% 100%; animation: pk-sway 3.2s ease-in-out infinite; }
@keyframes pk-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
.pk:not(.pk-hn) .pk-head { transform-origin: 50% 85%; animation: pk-tilt 5.2s ease-in-out infinite; }
@keyframes pk-tilt { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
.xs-pk.is-hop .pk .pk-sprout { animation-duration: .5s; }
/* 말풍선: 톡 튀어나온다 */
.xs-say.is-pop { animation: xs-pop .55s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes xs-pop { 0% { scale: .5; opacity: 0; } 100% { scale: 1; opacity: 1; } }
.xs-say { transform-origin: 30% 100%; }
/* 짚는 고리: 말랑하게 눌렸다 퍼지고, 바깥으로 물결 */
.xs-hot.is-ping { animation: xs-ping-jelly 1.1s cubic-bezier(.3, .6, .3, 1) .45s 1 both; }
@keyframes xs-ping-jelly { 0% { transform: scale(1, 1); } 25% { transform: scale(1.3, .74); } 50% { transform: scale(.82, 1.2); } 72% { transform: scale(1.1, .93); } 100% { transform: scale(1, 1); } }
.xs-hot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--xp-sun); animation: xs-ripple 1.9s ease-out infinite; }
@keyframes xs-ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
/* 단계 번호와 글: 켜질 때 통 */
.lt-xp-steps > li { transition: opacity .3s ease, translate .45s cubic-bezier(.3, .7, .2, 1); translate: 0 10px; }
.lt-xp-steps > li.is-on { translate: 0 0; }
.lt-xp-steps > li.is-on .xp-no { animation: xp-no-pop .55s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes xp-no-pop { 0% { scale: .6; } 100% { scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  .xs { transform: none; }
  .lt-xp-steps > li { translate: none; transition: none; }
  .lt-xp-steps > li.is-on .xp-no, .xs-hot::after { animation: none; }
}