/* =====================================================================
   landing.css — 판매용 첫 화면(index.html · body.lp) 한 곳. (D1 · 10-21 밤, s4.css 의 ① 첫 화면 부분을 옮겨 와 새로 짬)
   색 · 크기 · 간격은 tokens.css 변수만 + 아래 「밤 하늘」 묶음(첫 화면 어두운 띠 전용) 한 곳.
   글자 18px 이상(작은 숫자 배지만 16). 흐림 덮개 없음. 움직임은 prefers-reduced-motion 이면 모두 멈춤.
   ===================================================================== */

/* 0. 공용 — 셸이 없는 쪽(알림 · 숨김) */
[hidden] { display: none !important; }
#tk-toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 16px); background: var(--ink); color: #fff; padding: 14px 28px; border-radius: var(--r-l); font-size: var(--t-m); font-weight: 700; opacity: 0; pointer-events: none; transition: opacity var(--m-mid) var(--ease), transform var(--m-mid) var(--ease); z-index: 60; max-width: calc(100vw - 32px); text-align: center; box-shadow: var(--sh-3); }
#tk-toast.on { opacity: 1; transform: translate(-50%, 0); }

.lp {
  /* 맑은 하늘 + 주황 (10-21 원장님 「너무 진해. 하늘색하고 주황색 섞어서」) — 이 쪽만의 색 묶음 한 곳 */
  --sky-1: #EAF6FD; --sky-2: #D6EEFB; --sky-3: #BFE3F7; --sky-deep: #0E6C96;      /* sky-deep 위 흰 글자 5.6:1 · 흰 바탕 위 글자 5.6:1 */
  --or: #F2711C; --or-deep: #B9480B; --or-soft: #FFE8D4; --cream: #FFF8EE;        /* or-deep 흰 바탕 글자 5.3:1 · or 는 꾸밈에만 */
  --brand: var(--sky-deep); --brand-deep: #0A4F70; --brand-soft: #E1F2FB;         /* 이 쪽 부품(단추 · 칩 · 표)이 하늘색을 따름 */
  --bezel: #1B2440;
  --lp-w: 1240px;
  background: var(--card);
}
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
.lp main { overflow-x: clip; }
.lp a { color: inherit; }
.lp .btn { text-decoration: none; }
.lp .btn-main, .lp .btn-go { color: #fff; }
.lp-in { max-width: var(--lp-w); margin: 0 auto; padding: 0 32px; }
.lp img { max-width: 100%; }
.lp-mt { margin-top: var(--s6); }
.lp-small { font-size: var(--t-s); color: var(--ink-2); margin-top: var(--s5); line-height: 1.6; }

/* ───── 맨 위 고정 머리 ───── */
.lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 80px; display: flex; align-items: center; color: var(--ink); transition: background var(--m-slow) var(--ease), box-shadow var(--m-slow) var(--ease), color var(--m-slow) var(--ease), height var(--m-slow) var(--ease); }
.lp-nav .lp-in { display: flex; align-items: center; gap: var(--s5); width: 100%; }
.lp-nav.solid { background: rgba(255,255,255,.95); color: var(--ink); box-shadow: 0 1px 0 var(--line), 0 12px 32px -24px rgba(21,33,59,.45); height: 72px; }
.lp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.lp-brand img { height: 40px; width: auto; display: block; }
.lp-brand span { display: flex; flex-direction: column; line-height: 1; }
.lp-brand b { font-size: 24px; font-weight: 900; letter-spacing: -0.03em; }
.lp-brand i { font-style: normal; font-size: 13px; letter-spacing: .32em; font-weight: 800; color: var(--sky-deep); margin-top: 5px; }
.lp-nav.solid .lp-brand i { color: var(--brand); }
.lp-grow { flex: 1; }
.lp-links { display: flex; gap: 4px; }
.lp-links a { text-decoration: none; font-size: var(--t-s); font-weight: 700; padding: 10px 16px; border-radius: var(--r-pill); color: var(--ink-2); transition: color var(--m-fast) var(--ease), background var(--m-fast) var(--ease); }
.lp-links a:hover { color: var(--or-deep); background: var(--or-soft); }
.lp-nav.solid .lp-links a { color: var(--ink-2); }

/* ───── 첫 화면 ───── */
.hx { position: relative; overflow: hidden; color: var(--ink); padding: 152px 0 150px; min-height: min(100vh, 1000px);
  background:
    radial-gradient(900px 560px at 80% 20%, rgba(126,200,240,.45), transparent 62%),
    radial-gradient(640px 460px at 4% 96%, rgba(255,176,102,.30), transparent 62%),
    radial-gradient(520px 360px at 50% 110%, rgba(255,214,140,.35), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, var(--sky-1) 52%, var(--sky-2) 100%); }
.hx::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(14,108,150,.25), transparent); }
.hx-sky { position: absolute; inset: 0; pointer-events: none; }
.hx-sky .glow { position: absolute; border-radius: 50%; }
.hx-sky .g1 { width: 520px; height: 520px; right: 6%; top: -12%; background: radial-gradient(closest-side, rgba(56,170,230,.22), transparent); }
.hx-sky .g2 { width: 420px; height: 420px; left: -6%; top: 30%; background: radial-gradient(closest-side, rgba(255,160,80,.20), transparent); }
.hx-sky .g3 { width: 280px; height: 280px; left: 40%; top: 6%; background: radial-gradient(closest-side, rgba(255,210,120,.30), transparent); }
.hx-sky .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(14,108,150,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(14,108,150,.06) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%); }
.fl { position: absolute; display: block; filter: drop-shadow(0 16px 20px rgba(14,60,100,.18)); animation: fl-a 11s ease-in-out infinite alternate; translate: calc(var(--mx, 0) * var(--d, 12px)) calc(var(--my, 0) * var(--d, 12px)); transition: translate .6s var(--ease); opacity: .95; }
.f1 { width: 70px; left: 3%; top: 17%; --d: 26px; }
.f2 { width: 54px; left: 1.5%; bottom: 6%; --d: 18px; animation-duration: 13s; animation-name: fl-b; }
.f3 { width: 42px; left: 44%; top: 12%; --d: 34px; animation-duration: 9s; }
.f4 { width: 84px; left: 36%; bottom: 7%; --d: 22px; animation-name: fl-b; animation-duration: 15s; }
.f5 { width: 44px; right: 2.5%; top: 15%; --d: 30px; animation-duration: 10s; animation-name: fl-c; }
.f6 { width: 56px; right: 4%; bottom: 10%; --d: 20px; animation-duration: 12s; }
.f7 { width: 36px; left: 52%; bottom: 20%; --d: 40px; animation-name: fl-c; animation-duration: 14s; opacity: .7; }
.f8 { width: 40px; left: 24%; top: 9%; --d: 16px; animation-name: fl-b; animation-duration: 12s; opacity: .8; }
@keyframes fl-a { 0% { transform: translateY(0) rotate(-6deg); } 100% { transform: translateY(-26px) rotate(8deg); } }
@keyframes fl-b { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(14px, -20px) rotate(-18deg); } }
@keyframes fl-c { 0% { transform: translateY(-10px) rotate(12deg); } 100% { transform: translateY(18px) rotate(-10deg); } }

.hx-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.24fr); gap: 48px; align-items: center; }
.hx-eye { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--sky-3); background: #fff; font-size: var(--t-s); font-weight: 700; color: var(--ink); box-shadow: 0 8px 20px -14px rgba(14,108,150,.5); }
.hx-eye .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 4px rgba(242,113,28,.2); }
.hx h1 { margin-top: var(--s5); font-size: clamp(40px, 3.8vw, 64px); line-height: 1.18; letter-spacing: -0.045em; font-weight: 900; color: var(--ink); }
.hx h1 em { font-style: normal; position: relative; z-index: 0; display: inline-block; color: var(--or-deep); }
.hx h1 .nw { white-space: nowrap; }
.hx h1 em::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .08em; height: .24em; border-radius: .1em; background: var(--or); opacity: .3; z-index: -1; }
.hx-lead { margin-top: var(--s5); font-size: 21px; line-height: 1.65; color: var(--ink-2); max-width: 560px; }
.hx-acts { display: flex; gap: var(--s3); margin-top: var(--s6); flex-wrap: wrap; }
.hx-acts .btn { min-width: 188px; }
.hx-acts .btn:not(.btn-go):not(.hx-ghost) { color: var(--ink); }
.hx-ghost { background: #fff; border-color: var(--or); color: var(--or-deep); }
.hx-ghost:hover { background: var(--or-soft); border-color: var(--or-deep); }
.hx-trust { list-style: none; padding: 0; margin: var(--s6) 0 0; display: flex; gap: 12px 28px; flex-direction: column; font-size: var(--t-s); color: var(--ink); font-weight: 700; }
.hx-trust li { display: flex; align-items: center; gap: 8px; }
.hx-trust .ico { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--or-soft); color: var(--or-deep); stroke-width: 2.8; }

/* 기기 셋 — 살짝 기울기 · 그림자 · 마우스 따라 미세 움직임(--mx · --my 는 landing.js) */
.hx-stage { position: relative; aspect-ratio: 1.2; perspective: 1800px; }
.hx-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(-10deg + var(--mx, 0) * 5deg)) rotateX(calc(5deg - var(--my, 0) * 4deg)); transition: transform .7s var(--ease); }
.dv { position: absolute; margin: 0; }
.dv .scr { position: relative; overflow: hidden; background: #fff; }
.dv img { display: block; width: 100%; height: auto; }
.dv-board { top: 0; right: 0; width: 84%; transform: translateZ(-70px); }
.dv-board > .scr { border-radius: 16px; border: 12px solid var(--bezel); box-shadow: 0 40px 80px -36px rgba(14,60,100,.45); }
.dv-board .leg, .rm-board .leg { display: block; width: 9%; height: 34px; margin: 0 auto; background: linear-gradient(90deg, #1B2240, #2A3460 50%, #1B2240); border-radius: 0 0 6px 6px; }
.dv-laptop { left: 0; bottom: 7%; width: 70%; transform: translateZ(50px); }
.dv-laptop .lid { padding: 12px 12px 16px; background: linear-gradient(180deg, #232C4A, #141A30); border-radius: 18px 18px 6px 6px; }
.dv-laptop .scr { border-radius: 6px; }
.dv-laptop .base { display: block; height: 16px; width: 116%; margin-left: -8%; background: linear-gradient(180deg, #D5DAE6, #9CA5BB); border-radius: 2px 2px 16px 16px; box-shadow: 0 30px 50px -22px rgba(14,60,100,.5); position: relative; }
.dv-laptop .base::before { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: 6px; border-radius: 0 0 8px 8px; background: #8A93A9; }
.dv-phone { right: 2%; bottom: 0; width: 21%; transform: translateZ(110px); }
.dv-phone .scr { border: 9px solid var(--bezel); border-radius: 30px; box-shadow: 0 40px 60px -24px rgba(14,60,100,.55); }
.tag { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 10px 16px; border-radius: var(--r-pill); background: #fff; color: var(--ink); font-size: var(--t-s); font-weight: 800; box-shadow: 0 0 0 1px var(--sky-3), 0 16px 32px -16px rgba(14,60,100,.45); animation: tag-b 5s ease-in-out infinite alternate; }
.tag .ico { width: 22px; height: 22px; color: var(--or-deep); }
.t-board { top: -22px; left: 10%; }
.t-laptop { top: -26px; left: -2%; animation-delay: -2s; }
.t-phone { top: -24px; right: 30%; animation-delay: -3.5s; }
@keyframes tag-b { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }
.hx-down { position: absolute; z-index: 1; left: 50%; bottom: 72px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-s); font-weight: 700; color: var(--ink-2); text-decoration: none; }
.hx-down .ico { animation: dn 1.8s ease-in-out infinite; }
@keyframes dn { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ───── 숫자 띠 ───── */
.nums { position: relative; z-index: 2; margin-top: -64px; }
.nums .lp-in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nums .lp-in { background: var(--card); border-radius: var(--r-xl); box-shadow: 0 30px 60px -34px rgba(14,60,100,.4), 0 0 0 1px var(--sky-3); padding: 36px 24px; max-width: calc(var(--lp-w) - 64px); }
.nm { text-align: center; padding: 0 12px; border-left: 1px solid var(--line); }
.nm:first-child { border-left: 0; }
.nm b { display: flex; align-items: baseline; justify-content: center; gap: 4px; font-weight: 900; color: var(--or-deep); line-height: 1; }
.nm b .num { font-size: 56px; letter-spacing: -0.04em; background: linear-gradient(180deg, var(--or) 0%, var(--or-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nm b small { font-size: 24px; font-weight: 800; color: var(--ink); }
.nm > span { display: block; margin-top: 10px; font-size: var(--t-s); color: var(--ink-2); font-weight: 600; }

/* ───── 섹션 공통 ───── */
.sec { padding: 128px 0; position: relative; }
.sec-sky { background: linear-gradient(180deg, var(--sky-1) 0%, #F5FBFF 100%); }
.sec-cream { background: var(--cream); }
.sh .eye, .pilot .eye { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-s); font-weight: 800; color: var(--sky-deep); margin-bottom: var(--s4); }
.sh .eye::before, .pilot .eye::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--or), #FFB066); }
.sh h2 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.22; letter-spacing: -0.04em; font-weight: 900; }
.sh p { margin-top: var(--s4); font-size: 21px; line-height: 1.65; color: var(--ink-2); max-width: 680px; }
.ul { list-style: none; padding: 0; margin: var(--s6) 0 0; display: flex; flex-direction: column; gap: var(--s4); }
.ul li { display: flex; gap: var(--s3); align-items: flex-start; font-size: 20px; line-height: 1.55; }
.ul li .ico { width: 28px; height: 28px; color: var(--ok); flex: none; margin-top: 1px; }
.ul li b { font-weight: 800; }
.ul-s li { font-size: var(--t-s); }
.ul-s li .ico { width: 24px; height: 24px; color: var(--brand); }
.sp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }

/* 나타나기(스크롤) — landing.js 가 html.rv-on 을 붙일 때만 숨겼다가 보임 */
.rv-on .rv { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv-on .rv.in { opacity: 1; transform: none; }
.rv-on .kits .rv:nth-child(4n+2), .rv-on .nums .rv:nth-child(2), .rv-on .rm-3 .rv:nth-child(2) { transition-delay: .08s; }
.rv-on .kits .rv:nth-child(4n+3), .rv-on .nums .rv:nth-child(3), .rv-on .rm-3 .rv:nth-child(3) { transition-delay: .16s; }
.rv-on .kits .rv:nth-child(4n), .rv-on .nums .rv:nth-child(4) { transition-delay: .24s; }
.rv-on .nums .rv:nth-child(5) { transition-delay: .32s; }

/* 창 틀(실제 화면 그림) */
.win { border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(21,33,59,.5); }
.win-bar { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.win-bar i { width: 12px; height: 12px; border-radius: 50%; background: #E0735A; }
.win-bar i:nth-child(2) { background: var(--spark); } .win-bar i:nth-child(3) { background: var(--ok-line); }
.win-bar span { margin: 0 auto; padding: 2px 20px; border-radius: var(--r-pill); background: var(--card); font-size: var(--t-s); font-weight: 700; color: var(--ink-2); }
.win-scr { position: relative; aspect-ratio: 16 / 10; background: var(--bg); }
.win-scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transform: scale(1.015); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.win-scr img.on { opacity: 1; transform: none; }
.win-tilt { transform: perspective(1800px) rotateY(9deg) rotateX(3deg); transition: transform .7s var(--ease); }
.win-tilt:hover { transform: none; }

/* ───── ① 선생님 하루 ───── */
.tl { margin-top: 64px; }
.tl-row { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.tl-line { position: absolute; left: 10%; right: 10%; top: 34px; height: 4px; border-radius: 2px; background: var(--line); z-index: 0; }
.tl-line i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: 2px; background: linear-gradient(90deg, var(--sky-deep), var(--or)); transition: width .6s var(--ease); }
.tl-st { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 8px 8px; border: 0; background: transparent; font: inherit; color: var(--ink); cursor: pointer; text-align: center; }
.tl-st .ico { width: 72px; height: 72px; padding: 20px; border-radius: 50%; background: var(--card); border: 3px solid var(--line-2); color: var(--ink-2); margin-bottom: 8px; transition: all var(--m-slow) var(--ease); }
.tl-st .n { position: absolute; top: -6px; left: calc(50% + 18px); min-width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: var(--t-badge); font-weight: 800; z-index: 2; }
.tl-st b { font-size: 22px; font-weight: 800; }
.tl-st small { font-size: var(--t-s); color: var(--ink-2); font-weight: 600; }
.tl-st:hover .ico { border-color: var(--brand); color: var(--brand); }
.tl-st.done .ico { border-color: var(--brand); color: var(--brand); }
.tl-st.on .ico { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 8px rgba(14,108,150,.14), 0 14px 28px -10px rgba(14,108,150,.6); transform: translateY(-4px); }
.tl-st.on .n { background: var(--or); color: var(--ink); }
.tl-st:focus-visible { outline: var(--line-w3) solid var(--brand); outline-offset: 4px; border-radius: var(--r-l); }
.tl-view { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 48px; }
.tl-say { padding: 32px; border-radius: var(--r-xl); background: var(--bg); border: 1px solid var(--line); }
.tl-say b { display: block; font-size: 26px; font-weight: 900; letter-spacing: -0.02em; }
.tl-say p { margin-top: 12px; font-size: 20px; line-height: 1.7; color: var(--ink-2); }

/* ───── ② 문제 뽑기 (움직이는 설명) ───── */
.pk { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.pk-steps { list-style: none; padding: 0; margin: var(--s6) 0 0; display: flex; flex-direction: column; gap: 12px; }
.pk-steps li { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--r-l); border: 2px solid transparent; transition: all var(--m-slow) var(--ease); }
.pk-steps .n { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-deep); font-size: 22px; font-weight: 900; transition: all var(--m-slow) var(--ease); }
.pk-steps b { display: block; font-size: 22px; font-weight: 800; }
.pk-steps span { font-size: var(--t-s); color: var(--ink-2); }
.pk-steps li.on { background: var(--card); border-color: var(--brand); box-shadow: var(--sh-2); }
.pk-steps li.on .n { background: var(--brand); color: #fff; }
.pk-demo { position: relative; }
.pk-demo::before { content: ""; position: absolute; inset: 8% -6% -8% 12%; border-radius: 40px; background: radial-gradient(closest-side, rgba(242,113,28,.16), transparent); z-index: 0; }
.pd-card { position: relative; z-index: 1; background: var(--card); border-radius: 28px; padding: 28px; display: grid; gap: 22px; box-shadow: 0 0 0 1px var(--line), 0 50px 90px -40px rgba(21,33,59,.5); }
.pd-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pd-h b { font-size: 26px; font-weight: 900; }
.pd-h .stg { font-size: var(--t-s); font-weight: 700; color: var(--ink-2); padding: 6px 14px; border-radius: var(--r-m); box-shadow: inset 4px 0 0 #138FB2; background: var(--bg); }
.pd-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-themes .th { font-size: var(--t-s); font-weight: 700; color: var(--ink-2); padding: 12px 16px; border-radius: var(--r-m); border: 2px solid var(--line); transition: all .45s var(--ease); }
.pk-demo:not([data-st="0"]) .th.pick { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); font-weight: 800; transform: scale(1.03); box-shadow: var(--sh-2); }
.pd-sl { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pd-sl > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 14px; }
.pd-sl span { font-size: var(--t-s); font-weight: 700; color: var(--ink-2); }
.pd-sl b { font-size: 22px; font-weight: 900; color: var(--brand); }
.pd-sl .rail { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 5px; background: var(--line); }
.pd-sl .fill { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--brand); transition: all .8s var(--ease); }
.pd-sl .knob { position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: var(--sh-2); transition: left .8s var(--ease); }
.f-cnt { left: 0; width: 66%; } .k-cnt { left: 66%; }
.f-lv { left: 0; width: 100%; } .k-lv1 { left: 0; } .k-lv2 { left: 100%; }
.pk-demo[data-st="2"] .f-cnt, .pk-demo[data-st="3"] .f-cnt { width: 0; }
.pk-demo[data-st="2"] .k-cnt, .pk-demo[data-st="3"] .k-cnt { left: 0; }
.pk-demo[data-st="2"] .f-lv, .pk-demo[data-st="3"] .f-lv { width: 66%; }
.pk-demo[data-st="2"] .k-lv2, .pk-demo[data-st="3"] .k-lv2 { left: 66%; }
.pd-list { display: grid; gap: 8px; min-height: 290px; align-content: start; }
.pd-list .q { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-m); background: var(--bg); font-size: var(--t-s); font-weight: 600; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.pd-list .q span { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-deep); font-size: var(--t-badge); font-weight: 800; }
.pd-list .q .lvb { margin-left: auto; flex: none; width: 30px; height: 18px; background: linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 8px, var(--line-2) 8px 14px, transparent 14px 16px, var(--line-2) 16px 22px, transparent 22px 24px, var(--line-2) 24px 30px); }
.pd-list .q .l2 { background: linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 8px, var(--ink) 8px 14px, transparent 14px 16px, var(--line-2) 16px 22px, transparent 22px 24px, var(--line-2) 24px 30px); }
.pd-list .q .l3 { background: linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 8px, var(--ink) 8px 14px, transparent 14px 16px, var(--ink) 16px 22px, transparent 22px 24px, var(--line-2) 24px 30px); }
.pk-demo[data-st="2"] .q, .pk-demo[data-st="3"] .q { opacity: 1; transform: none; }
.pd-list .q:nth-child(2) { transition-delay: .1s; } .pd-list .q:nth-child(3) { transition-delay: .2s; } .pd-list .q:nth-child(4) { transition-delay: .3s; } .pd-list .q:nth-child(5) { transition-delay: .4s; }
.pd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.pd-foot .sent { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-s); font-weight: 800; color: var(--ok); opacity: 0; transform: translateX(-8px); transition: all .5s var(--ease) .25s; }
.pd-foot .sent .ico { width: 24px; height: 24px; }
.pk-demo[data-st="3"] .sent { opacity: 1; transform: none; }
.pd-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--r-m); background: var(--brand); color: #fff; font-size: var(--t-s); font-weight: 800; transition: transform .2s var(--ease); }
.pd-btn .ico { width: 22px; height: 22px; }
.pk-demo[data-st="3"] .pd-btn { animation: press .5s var(--ease) 1; }
@keyframes press { 40% { transform: scale(.94); } 100% { transform: none; } }
.pd-cur { position: absolute; z-index: 3; width: 34px; height: 34px; left: 62%; top: 62%; transition: left .9s var(--ease), top .9s var(--ease); filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.pk-demo[data-st="1"] .pd-cur { left: 72%; top: 24%; }
.pk-demo[data-st="2"] .pd-cur { left: 6%; top: 40%; }
.pk-demo[data-st="3"] .pd-cur { left: 90%; top: 94%; }

/* ───── ③ 교구 ───── */
.kits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.kit { border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 10px; transition: transform var(--m-slow) var(--ease), box-shadow var(--m-slow) var(--ease), border-color var(--m-slow) var(--ease); }
.kit .pic { height: 156px; display: grid; place-items: center; border-radius: var(--r-l); background: radial-gradient(circle at 30% 20%, #fff, var(--k-bg) 70%); border: 1px solid var(--line); margin-bottom: 6px; overflow: hidden; }
.kit .pic svg { max-height: 124px; width: auto; max-width: 86%; transition: transform .6s var(--ease); }
.kit h3 { font-size: 22px; font-weight: 800; }
.kit p { font-size: var(--t-s); color: var(--ink-2); }
.kit:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -30px rgba(21,33,59,.45); border-color: var(--brand); }
.kit:hover .pic svg { transform: scale(1.08) rotate(-4deg); }

/* ───── ④ 전자칠판 + 패드 ───── */
.rm { display: grid; grid-template-columns: minmax(0, 1.7fr) 72px minmax(0, .75fr); align-items: center; margin-top: 64px; }
.rm-board .scr { border: 12px solid var(--bezel); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px -36px rgba(14,60,100,.5); }
.rm-board img { display: block; width: 100%; height: auto; }
.rm-wire { width: 100%; height: 70%; overflow: visible; }
.rm-wire path { fill: none; stroke: var(--or); stroke-width: 2; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; animation: wire 1.2s linear infinite; opacity: .8; }
@keyframes wire { to { stroke-dashoffset: -28; } }
.rm-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rm-pads .tile { min-height: 116px; border-radius: 20px; padding: 16px; box-shadow: 0 0 0 6px var(--bezel), 0 24px 40px -22px rgba(14,60,100,.55); color: var(--ink); }
.rm-pads .tile .who { font-size: 22px; }
.rm-pads .tile:nth-child(2) { animation: busy 2.4s ease-in-out infinite; }
@keyframes busy { 50% { transform: translateY(-4px); } }
.rm-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.rm-3 > div { padding: 24px 28px; border-radius: var(--r-xl); border: 1px solid var(--sky-3); background: #fff; display: flex; flex-direction: column; gap: 8px; }
.rm-3 b { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; }
.rm-3 b .ico { color: var(--sky-deep); }
.rm-3 span { font-size: var(--t-s); color: var(--ink-2); line-height: 1.6; }
.rm-end { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 32px; }
.rm-note { font-size: var(--t-s); color: var(--ink-2); display: flex; gap: 10px; align-items: center; flex: 1; min-width: 280px; }
.rm-note::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--or); }

/* ───── ⑤ 종이 꾸러미 ───── */
.pp { position: relative; height: 580px; }
.pp img { position: absolute; width: 54%; height: auto; display: block; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 30px 50px -28px rgba(21,33,59,.55); transition: transform .7s var(--ease); }
.pp .p1 { left: 0; top: 56px; transform: rotate(-9deg); }
.pp .p2 { left: 22%; top: 0; transform: rotate(-1deg); z-index: 1; }
.pp .p3 { left: 44%; top: 64px; transform: rotate(8deg); z-index: 2; }
.pp:hover .p1 { transform: rotate(-13deg) translateX(-18px); }
.pp:hover .p3 { transform: rotate(12deg) translateX(18px); }

/* ───── ⑥ 엄마 휴대폰 ───── */
.ph2 { position: relative; height: 640px; }
.phone { position: absolute; width: 290px; padding: 10px; border-radius: 44px; background: var(--bezel); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 50px 80px -36px rgba(21,33,59,.7); }
.phone .scr { border-radius: 34px; overflow: hidden; aspect-ratio: 390 / 844; background: #fff; position: relative; }
.phone img { display: block; width: 100%; height: auto; }
.phone.back { left: 4%; top: 64px; transform: rotate(-8deg); opacity: .96; }
.phone.front { left: 42%; top: 0; transform: rotate(3deg); }
.roll img { animation: roll 16s ease-in-out infinite; }
@keyframes roll { 0%, 14% { transform: translateY(0); } 46%, 62% { transform: translateY(-45.7%); } 94%, 100% { transform: translateY(0); } }

/* ───── ⑦ 원장 한눈 ───── */
.kp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: var(--s6); }
.kp > div { padding: 20px 22px; border-radius: var(--r-l); background: var(--bg); border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; align-items: center; }
.kp .ico { color: var(--brand); width: 28px; height: 28px; }
.kp b { font-size: 21px; font-weight: 800; }
.kp span { grid-column: 1 / -1; font-size: var(--t-s); color: var(--ink-2); }

/* ───── ⑧ 6단계 사다리 ───── */
.ladder { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; align-items: end; margin-top: 64px; }          /* [Q56] 초5 · 초6 더해 8단계 — 6칸이면 7 · 8단계가 아랫줄로 떨어짐 */
.lad { position: relative; height: calc(190px + var(--i) * 34px); border-radius: 22px 22px 10px 10px; background: var(--card); border: 1px solid var(--line); border-top: 0; box-shadow: 0 30px 50px -36px rgba(21,33,59,.5); padding: 22px 14px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; transition: transform var(--m-slow) var(--ease); }
.lad::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--sc); }
.lad::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sc) 14%, transparent)); }
.lad:hover { transform: translateY(-6px); }
.lad .cube { width: 44px; height: auto; margin-bottom: 6px; }
.lad .age { align-self: flex-start; font-size: var(--t-badge); font-weight: 800; padding: 4px 12px; border-radius: var(--r-pill); color: var(--ink); background: color-mix(in srgb, var(--sc) 18%, #fff); }
.lad b { font-size: 21px; word-break: keep-all; font-weight: 900; letter-spacing: -0.01em; line-height: 1.15; margin-top: 8px; }
.lad small { font-size: var(--t-s); color: var(--ink-2); font-weight: 700; }
.lad .step { position: relative; z-index: 1; margin-top: auto; font-size: var(--t-s); font-weight: 800; color: var(--ink-2); }

/* ───── ⑨ 비교 표 ───── */
.cmp { margin-top: 56px; border-radius: var(--r-xl); overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(21,33,59,.45); }
.cmp .r { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.5fr); border-top: 1px solid var(--line); }
.cmp .r:first-child { border-top: 0; }
.cmp .r > div { padding: 20px 28px; font-size: var(--t-s); line-height: 1.55; display: flex; gap: 10px; align-items: flex-start; }
.cmp .r > div:first-child { font-weight: 800; font-size: 20px; }
.cmp .r > div:nth-child(2) { color: var(--ink-2); background: #FAFBFD; }
.cmp .r > div:last-child { background: var(--brand-soft); color: var(--brand-deep); font-weight: 700; }
.cmp .r > div:last-child .ico { flex: none; margin-top: 1px; color: var(--brand); }
.cmp .hd > div { font-weight: 900; font-size: 20px; align-items: center; }
.cmp .hd > div:nth-child(2) { background: var(--bg-2); color: var(--ink-2); }
.cmp .hd > div:last-child { background: var(--brand); color: #fff; }
.cmp .hd img { width: 28px; height: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }

/* ───── ⑩ 요금 (s4.css 에서 옮김 · 다시 꾸밈) ───── */
.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: 56px; align-items: stretch; }
.lp-plan { position: relative; border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3); background: var(--card); align-items: flex-start; box-shadow: var(--sh-1); transition: transform var(--m-slow) var(--ease), box-shadow var(--m-slow) var(--ease); }
.lp-plan:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(21,33,59,.4); }
.lp-plan.mid { border: 2px solid var(--brand); box-shadow: 0 30px 60px -30px rgba(43,63,184,.5); }
.lp-plan.mid::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 8px; border-radius: var(--r-xl) var(--r-xl) 0 0; background: linear-gradient(90deg, var(--sky-deep), #38A9E0, var(--or)); }
.lp-plan h3 { font-size: 26px; font-weight: 900; }
.lp-plan .price { font-size: var(--t-s); font-weight: 700; color: var(--ink-2); padding: var(--s2) 0; }
.lp-plan .price b { font-size: 30px; color: var(--ink); font-weight: 900; margin-right: 6px; letter-spacing: -0.02em; }
.lp-plan ul { margin: 0; padding: var(--s4) 0 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: var(--t-s); border-top: 1px solid var(--line); width: 100%; }
.lp-plan li { display: flex; gap: 10px; } .lp-plan li .ico { color: var(--ok); flex: none; margin-top: 2px; }
.lp-calc { margin-top: var(--s5); padding: var(--s6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; border-radius: var(--r-xl); }
.lp-calc h3 { font-size: var(--t-l); margin-bottom: var(--s4); }
.lp-calc .label b { color: var(--brand); margin-left: 8px; }
.lp-calc .lp-seg { margin-top: var(--s4); }
.lp-calc-r .ln { display: flex; justify-content: space-between; padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-s); }
.lp-calc-r .tot { margin-top: var(--s3); padding: var(--s4); border-radius: var(--r-m); background: var(--brand-soft); color: var(--brand-deep); display: flex; justify-content: space-between; align-items: center; font-size: var(--t-l); font-weight: 900; }
.lp-calc-r .sub { margin-top: var(--s2); }
.lp-range { width: 100%; height: 48px; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; --p: 20%; }
.lp-range::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--brand) var(--p), var(--line) var(--p)); }
.lp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 36px; margin-top: -12px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: var(--sh-2); }
.lp-range::-moz-range-track { height: 12px; border-radius: 6px; background: var(--line); }
.lp-range::-moz-range-progress { height: 12px; border-radius: 6px; background: var(--brand); }
.lp-range::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); }

/* ───── 후기 자리 ───── */
.pilot { display: flex; align-items: center; gap: 40px; padding: 44px 52px; border-radius: 32px; border: 2px dashed color-mix(in srgb, var(--brand) 45%, transparent); background: linear-gradient(120deg, var(--brand-soft) 0%, #fff 55%, var(--spark-soft) 100%); }
.pl-ic { flex: none; width: 104px; height: 104px; border-radius: 28px; display: grid; place-items: center; background: #fff; box-shadow: var(--sh-3); }
.pl-ic svg { width: 64px; animation: fl-a 6s ease-in-out infinite alternate; }
.pl-t { flex: 1; }
.pl-t .eye { margin-bottom: 8px; }
.pl-t h2 { font-size: 36px; font-weight: 900; letter-spacing: -0.03em; }
.pl-t p { margin-top: 10px; font-size: 20px; color: var(--ink-2); line-height: 1.65; max-width: 680px; }

/* ───── ⑪ 자주 묻는 것 ───── */
.faq-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); margin-bottom: 12px; transition: box-shadow var(--m-slow) var(--ease), border-color var(--m-slow) var(--ease); }
.faq details[open] { border-color: var(--brand); box-shadow: var(--sh-2); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; font-size: 21px; font-weight: 800; cursor: pointer; min-height: var(--hit); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { flex: none; color: var(--brand); transition: transform var(--m-slow) var(--ease); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq summary:focus-visible { outline: var(--line-w3) solid var(--brand); outline-offset: 2px; border-radius: var(--r-l); }
.faq details p { padding: 0 26px 24px; font-size: 19px; line-height: 1.75; color: var(--ink-2); }

/* ───── ⑫ 상담 신청 (s4.css 에서 옮김) ───── */
.lp-ask { background: radial-gradient(700px 400px at 90% 0%, rgba(43,63,184,.08), transparent 70%), var(--card); }
.lp-ask .lp-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.lp-form { background: var(--card); border-radius: 28px; border: 1px solid var(--line); padding: 36px; display: grid; gap: var(--s5); box-shadow: 0 40px 80px -40px rgba(21,33,59,.45); }
.lp-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.lp-form .lp-send { width: 100%; }
.lp-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.lp-dcol { width: 168px; }
.lp-err { color: var(--no); font-size: var(--t-s); font-weight: 700; margin: 0; }
.lp-done { display: flex; gap: var(--s4); align-items: center; padding: var(--s5); border-radius: var(--r-l); background: var(--ok-bg); color: var(--ok); }
.lp-done .ico { width: 40px; height: 40px; flex: none; }
.lp-done b { display: block; font-size: var(--t-l); }
.lp-done span { font-size: var(--t-s); color: var(--ink); }

/* ───── ⑬ 바닥글 ───── */
.ft { background: linear-gradient(180deg, var(--sky-2), var(--sky-3)); color: var(--ink-2); padding: 80px 0 40px; }
.ft-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.ft .lp-brand { color: var(--ink); }
.ft-brand p { margin-top: 18px; font-size: var(--t-s); line-height: 1.7; }
.ft-col b { display: block; color: var(--ink); font-size: var(--t-s); font-weight: 800; margin-bottom: 14px; }
.ft-col a { display: block; font-size: var(--t-s); text-decoration: none; padding: 6px 0; color: var(--ink-2); }
.ft-col a:hover { color: var(--or-deep); }
.ft-biz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 56px 0 0; padding: 28px 0; border-top: 1px solid rgba(14,108,150,.22); border-bottom: 1px solid rgba(14,108,150,.22); }
.ft-biz div { display: flex; flex-direction: column; gap: 4px; }
.ft-biz dt { font-size: var(--t-s); font-weight: 700; color: var(--brand-deep); }
.ft-biz dd { margin: 0; font-size: var(--t-s); color: var(--ink); }
.ft-bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; font-size: var(--t-s); }

/* 함께 하는 수업 — 세 장면 */
.tg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.tg { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 28px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--sky-3); box-shadow: 0 30px 60px -40px rgba(14,60,100,.45); }
.tg-pic { position: relative; border-radius: var(--r-l); background: linear-gradient(180deg, var(--sky-1), #fff); border: 1px dashed var(--sky-3); padding: 36px 12px 12px; margin-bottom: 10px; }
.tg-pic .ph { position: absolute; left: 12px; top: 8px; font-size: var(--t-badge); font-weight: 700; color: var(--sky-deep); }
.scn { display: block; width: 100%; height: auto; }
.tg-n { position: absolute; right: 24px; top: 18px; min-width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center; background: var(--or); color: var(--ink); font-size: var(--t-badge); font-weight: 900; }
.tg h3 { font-size: 24px; font-weight: 900; }
.tg p { font-size: var(--t-s); color: var(--ink-2); line-height: 1.65; }
.tg-note { margin-top: 24px; font-size: var(--t-s); color: var(--ink-2); display: flex; gap: 10px; align-items: center; }
.tg-note::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--or); }
.scn .wire { fill: none; stroke: var(--or); stroke-width: 2; stroke-dasharray: 5 6; animation: wire 1.2s linear infinite; }
.scn .ok, .scn .pop, .scn .chip { transform-box: fill-box; transform-origin: center; }
.scn .ok { animation: s-ok 6s var(--ease) infinite; }
.scn .ans { animation: s-ans 6s var(--ease) infinite; }
.scn .pop { animation: s-pop 6s var(--ease) infinite; }
.s3 .pop, .s3 .chip { animation-name: s-pop3; }
.s3 .big { transform-box: fill-box; transform-origin: center; animation: s-big 3s ease-in-out infinite; }
.scn .pn { animation: s-pn 7.2s var(--ease) infinite; }
.scn .ring { animation: s-ring 7.2s var(--ease) infinite; }
.scn .q2 { animation-delay: .7s; } .scn .q3 { animation-delay: 1.4s; }
.s2 .q2 { animation-delay: 2.4s; } .s2 .q3 { animation-delay: 4.8s; }
@keyframes s-ok { 0%, 12% { opacity: 0; transform: scale(.5); } 20%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes s-ans { 0%, 44% { opacity: 0; } 52%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes s-pop { 0%, 54% { opacity: 0; transform: scale(0); } 62% { opacity: 1; transform: scale(1.35); } 70%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes s-pop3 { 0%, 10% { opacity: 0; transform: scale(0) translateY(10px); } 20% { opacity: 1; transform: scale(1.3); } 28%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes s-big { 50% { transform: scale(1.12) rotate(6deg); } }
@keyframes s-pn { 0% { opacity: 0; transform: translateY(40px); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes s-ring { 0%, 2% { opacity: 0; } 5%, 18% { opacity: 1; } 24%, 100% { opacity: 0; } }

/* 수업 설계 — 분 단위 띠(첫 화면 미리 보기 · lesson-view 같이 씀) */
.band { position: relative; margin-top: 28px; }
.band-parts { position: relative; height: 34px; margin-bottom: 6px; }
.band-parts span { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 10px; border-left: 3px solid var(--or); font-size: var(--t-s); font-weight: 800; color: var(--or-deep); }
.band-row { display: flex; gap: 4px; min-height: 84px; }
.band.big .band-row { min-height: 104px; }
.bk { min-width: 0; border-radius: 12px; background: var(--bc); color: #fff; padding: 10px 8px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); }
.bk b { font-size: var(--t-s); font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: clip; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.bk span { font-size: var(--t-badge); font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.bk b .f { display: none; }
.bk.rest { background: repeating-linear-gradient(135deg, #E4E8F0 0 8px, #F4F6FA 8px 16px); color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--line-2); }
.bk.rest b, .bk.rest span { color: var(--ink-2); text-shadow: none; }
.band-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--t-badge); color: var(--ink-2); font-weight: 700; }
.lvw-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 48px; }
.lvw-tabs .stage { width: 100%; cursor: pointer; font: inherit; padding: 10px 14px 10px 16px; min-height: 64px; justify-content: center; transition: transform var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease); }
.lvw-tabs .stage.on { border: 2px solid var(--or); box-shadow: inset 6px 0 0 var(--sc), 0 14px 28px -16px rgba(185,72,11,.5); transform: translateY(-2px); }
.lvw-tabs .stage:focus-visible { outline: var(--line-w3) solid var(--brand); outline-offset: 3px; }
.lvw-card { margin-top: 16px; padding: 36px; border-radius: 28px; background: #fff; border: 2px solid var(--sky-3); box-shadow: 0 40px 80px -44px rgba(14,60,100,.5); min-height: 420px; }
.lvw-load, .lv-load { font-size: var(--t-m); color: var(--ink-2); padding: 40px 0; }
.lvw-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.lvw-tag { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lvw-h h3 { font-size: 32px; font-weight: 900; letter-spacing: -0.03em; margin-top: 14px; }
.lvw-h p { font-size: 20px; color: var(--ink-2); margin-top: 6px; max-width: 720px; }
.lvw-peek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.lvw-peek > div { padding: 18px 20px; border-radius: var(--r-l); background: var(--sky-1); box-shadow: inset 5px 0 0 var(--bc); display: flex; flex-direction: column; gap: 6px; }
.lvw-peek span { font-size: var(--t-s); font-weight: 800; color: var(--sky-deep); }
.lvw-peek b { font-size: 21px; font-weight: 800; }
.lvw-peek p { font-size: var(--t-s); color: var(--ink-2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lvw-prep { margin-top: 20px; display: flex; gap: 10px; align-items: center; font-size: var(--t-s); color: var(--ink-2); font-weight: 600; }
.lvw-prep .ico { color: var(--or-deep); }

/* lesson-view.html */
.lvp { background: var(--cream); }
.lvx { padding-top: 72px; min-height: 70vh; display: block; height: auto; }
.lv-top { padding: 40px 0 56px; background: linear-gradient(180deg, #fff, var(--sky-1)); }
.lv-back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); font-weight: 700; color: var(--sky-deep); text-decoration: none; }
.lv-badges { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.lv-top h1 { font-size: clamp(34px, 3.4vw, 52px); font-weight: 900; letter-spacing: -0.035em; margin-top: 14px; }
.lv-sum { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 14px; margin: 24px 0 0; }
.lv-sum > div { padding: 18px 22px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--sky-3); }
.lv-sum dt { display: flex; align-items: center; gap: 8px; font-size: var(--t-s); font-weight: 800; color: var(--or-deep); }
.lv-sum dd { margin: 6px 0 0; font-size: 19px; line-height: 1.6; }
.lv-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.lv-body { padding: 56px 0 96px; }
.lv-h2 { font-size: 30px; font-weight: 900; letter-spacing: -0.03em; margin: 0 0 20px; }
.lv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lv-st { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 22px 24px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: inset 6px 0 0 var(--bc); }
.lv-t { display: flex; flex-direction: column; gap: 4px; padding-left: 8px; }
.lv-t b { font-size: 22px; font-weight: 900; }
.lv-t span { font-size: var(--t-s); color: var(--ink-2); font-weight: 700; }
.lv-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-k { font-size: var(--t-badge); font-weight: 800; padding: 4px 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--bc) 16%, #fff); color: var(--ink); }
.lv-h h3 { font-size: 22px; font-weight: 800; }
.lv-fs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 14px 0 0; }
.lv-f { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: var(--t-s); line-height: 1.6; }
.lv-f:first-child { grid-column: 1 / -1; }
.lv-f dt { font-weight: 800; color: var(--sky-deep); }
.lv-f dd { margin: 0; }
.lv-f.wr dt { color: var(--hint); }
.lv-qs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.lv-q { margin: 0; padding: 14px; border-radius: var(--r-l); background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.lv-fig { background: #fff; border-radius: var(--r-m); padding: 8px; display: grid; place-items: center; }
.lv-fig svg { max-width: 100%; height: auto; max-height: 160px; }
.lv-q figcaption { font-size: var(--t-s); line-height: 1.55; }
.lv-qk { display: inline-block; margin-right: 6px; font-size: var(--t-badge); font-weight: 800; color: var(--sky-deep); }
.lv-ch { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.lv-note { margin-top: 16px; font-size: var(--t-s); color: var(--ink-2); }
.lv-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.lv-body .lv-h2 + .lv-more { margin-top: 0; }
.lv-more a { padding: 14px 18px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line); text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.lv-more a span { font-size: var(--t-badge); font-weight: 800; color: var(--or-deep); }
.lv-more a b { font-size: var(--t-s); font-weight: 800; }
.lv-more a.on { border: 2px solid var(--or); }
.lv-stg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.lv-stg .stage { width: 100%; text-decoration: none; }
.lv-stg .stage.on { border: 2px solid var(--or); }
.lv-body .lv-steps + .lv-note + .lv-h2 { margin-top: 56px; }
.lv-empty { padding: 120px 32px; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.ft-s { padding: 32px 0; }

/* 두 번째 칸 · 덧붙인 링크 */
.pl3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.pl3c { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); text-decoration: none; box-shadow: var(--sh-1); transition: transform var(--m-slow) var(--ease), box-shadow var(--m-slow) var(--ease), border-color var(--m-slow) var(--ease); }
.pl3c:hover { transform: translateY(-6px); border-color: var(--or); box-shadow: 0 30px 50px -30px rgba(185,72,11,.35); }
.pl3c .pi { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 6px; }
.pl3c .pi .ico { width: 30px; height: 30px; }
.pi-o { background: var(--or-soft); color: var(--or-deep); } .pi-s { background: var(--sky-1); color: var(--sky-deep); } .pi-b { background: #FFF1C9; color: #7A4F00; }
.pl3c b { font-size: 22px; font-weight: 800; }
.pl3c > span:not(.pi) { font-size: var(--t-s); color: var(--ink-2); line-height: 1.6; }
.pl3c em { margin-top: auto; padding-top: 8px; font-style: normal; font-size: var(--t-s); font-weight: 800; color: var(--or-deep); display: inline-flex; align-items: center; gap: 4px; }
.pl3c em .ico { width: 22px; height: 22px; }
.sh-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.acts2 { display: flex; gap: 12px; flex-wrap: wrap; }
.lk { color: var(--sky-deep); font-weight: 700; text-underline-offset: 4px; }
.fl.f2 path:first-child { fill: var(--or); } .fl.f2 path:last-child { fill: #C4520C; }
.fl.f4 path:first-child { fill: #38A9E0; } .fl.f4 path:last-child { fill: #1B7BAD; }
.fl.f7 path { fill: #FFB066; }
.fl.f8 path:nth-child(1) { fill: #BFE3F7; } .fl.f8 path:nth-child(2) { fill: #38A9E0; } .fl.f8 path:nth-child(3) { fill: #1B7BAD; }

/* ───── 큰 화면 1920 ───── */
@media (min-width: 1700px) {
  .lp { --lp-w: 1400px; }
  .hx { padding-top: 176px; }
  .hx-lead { font-size: 22px; }
}

/* ───── 가운데 폭 ───── */
@media (max-width: 1180px) {
  .lvw-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lv-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk b { white-space: normal; }
  .tg3 { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .lp-links { display: none; }
  .hx-in { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .hx-copy { max-width: 720px; }
  .hx-stage { max-width: 860px; width: 100%; margin: 0 auto; }
  .hx-down { display: none; }
  .ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lad { height: auto; min-height: 220px; }
  .kits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ───── 휴대폰 390 ───── */
@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  .lp-in { padding: 0 16px; }
  .lp-nav, .lp-nav.solid { height: 64px; }
  .lp-brand img { height: 32px; } .lp-brand b { font-size: 20px; } .lp-brand i { font-size: 12px; }
  .lp-nav .btn { min-height: 46px; padding: 0 14px; font-size: 18px; }
  .lp-nav .btn .ico { width: 22px; height: 22px; }
  .hx { padding: 104px 0 96px; min-height: 0; }
  .hx-in { gap: 48px; }
  .hx-eye { font-size: 18px; padding: 6px 14px 6px 12px; }
  .hx h1 { font-size: 40px; margin-top: 18px; }
  .hx-lead { font-size: 19px; }
  .hx-acts .btn { flex: 1 1 100%; }
  .hx-trust { flex-direction: column; gap: 8px; }
  .hx-stage { aspect-ratio: 1.1; }
  .hx-tilt { transform: rotateY(-5deg) rotateX(4deg); }
  .dv-board > .scr { border-width: 6px; border-radius: 10px; }
  .dv-laptop .lid { padding: 6px 6px 8px; border-radius: 10px 10px 4px 4px; }
  .dv-laptop .base { height: 8px; }
  .dv-phone .scr { border-width: 5px; border-radius: 16px; }
  .dv-board .leg { height: 18px; }
  .tag { display: none; }
  .f1, .f3, .f7, .f8 { display: none; }
  .nums { margin-top: -40px; }
  .nums .lp-in { grid-template-columns: 1fr 1fr; row-gap: 24px; padding: 24px 8px; max-width: calc(100% - 32px); }
  .nm { border-left: 0; } .nm:last-child { grid-column: 1 / -1; }
  .nm b .num { font-size: 44px; } .nm b small { font-size: 20px; }
  .sec { padding: 80px 0; }
  .sh h2 { font-size: 30px; }
  .sh p { font-size: 19px; }
  .ul li { font-size: 19px; }
  .sp, .pk, .faq-in, .lp-ask .lp-in, .tl-view { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tl { margin-top: 40px; }
  .tl-row { gap: 4px; }
  .tl-st { padding: 0 2px 4px; }
  .tl-st .ico { width: 56px; height: 56px; padding: 14px; border-width: 2px; }
  .tl-st .n { min-width: 26px; height: 26px; left: calc(50% + 12px); }
  .tl-st b { font-size: 18px; line-height: 1.25; }
  .tl-st small { display: none; }
  .tl-line { top: 27px; }
  .tl-view { margin-top: 24px; gap: 20px; }
  .tl-say { padding: 20px; } .tl-say b { font-size: 22px; } .tl-say p { font-size: 18px; }
  .win-bar { height: 36px; } .win-bar span { font-size: 18px; padding: 0 12px; } .win-bar i { width: 9px; height: 9px; }
  .win-tilt { transform: none; }
  .pd-card { padding: 18px; gap: 16px; border-radius: 22px; }
  .pd-h { flex-wrap: wrap; } .pd-h b { font-size: 22px; }
  .pd-themes { grid-template-columns: 1fr; gap: 6px; } .pd-themes .th { padding: 8px 12px; }
  .pd-sl { grid-template-columns: 1fr; gap: 18px; }
  .pd-list { min-height: 0; }
  .pd-list .q { padding: 8px 10px; }
  .pd-foot { flex-wrap: wrap; }
  .kits { gap: 12px; margin-top: 40px; }
  .kit { padding: 12px 12px 16px; } .kit .pic { height: 104px; } .kit .pic svg { max-height: 84px; } .kit h3 { font-size: 20px; }
  .rm { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; }
  .rm-wire { display: none; }
  .rm-board .scr { border-width: 6px; border-radius: 10px; }
  .rm-pads .tile { min-height: 96px; }
  .rm-3 { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
  .rm-3 > div { padding: 18px 20px; }
  .pp { height: 330px; order: 2; }
  .ph2 { height: 470px; }
  .phone { width: 200px; padding: 7px; border-radius: 32px; } .phone .scr { border-radius: 26px; }
  .phone.back { left: 0; top: 50px; } .phone.front { left: auto; right: 0; }
  .lvw-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 32px; }
  .lvw-card { padding: 20px 16px; border-radius: 22px; }
  .lvw-h h3 { font-size: 26px; } .lvw-h p { font-size: 18px; } .lvw-h .btn { width: 100%; }
  .band-row, .band.big .band-row { flex-direction: column; min-height: 0; gap: 4px; }
  .band-parts, .band-axis { display: none; }
  .bk b .s { display: none; } .bk b .f { display: inline; }
  .bk { justify-content: space-between; flex: none !important; flex-direction: row; align-items: center; min-height: calc(36px + var(--h, 0px)); padding: 8px 14px; }
  .lvw-peek { grid-template-columns: minmax(0, 1fr); }
  .lv-sum { grid-template-columns: minmax(0, 1fr); }
  .lv-st { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 16px 18px 20px; }
  .lv-t { flex-direction: row; gap: 10px; align-items: baseline; padding-left: 0; }
  .lv-fs { grid-template-columns: minmax(0, 1fr); }
  .lv-f { grid-template-columns: 84px minmax(0, 1fr); }
  .lv-more { grid-template-columns: minmax(0, 1fr); }
  .lv-stg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-acts .btn { flex: 1 1 100%; }
  .kp { grid-template-columns: minmax(0, 1fr); }
  .pl3, .tg3 { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 36px; }
  .hx h1 { font-size: 36px; }
  .pl3c { padding: 20px; }
  .sh-row .btn, .acts2 .btn, .rm-end .btn { width: 100%; }
  .ladder { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 40px; }
  .lad { height: auto; min-height: 0; width: calc(52% + var(--i) * 6.8%); padding: 14px 16px 14px 22px; border-radius: 10px 18px 18px 10px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; }
  .lad::before { right: auto; bottom: 0; width: 6px; height: auto; }
  .lad::after { display: none; }
  .lad .cube { grid-row: 1 / span 3; width: 34px; margin: 0; }
  .lad .age { grid-column: 2; justify-self: start; }
  .lad b { font-size: 20px; margin: 0; grid-column: 2; }
  .lad small { grid-column: 2; }
  .lad .step { display: none; }
  .cmp { margin-top: 40px; }
  .cmp .r { grid-template-columns: minmax(0, 1fr); }
  .cmp .hd { display: none; }
  .cmp .r > div { padding: 12px 18px; }
  .cmp .r > div:first-child { padding-top: 18px; }
  .cmp .r > div:nth-child(2)::before { content: "흔한 방식 · "; font-weight: 700; white-space: nowrap; }
  .lp-plans { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .lp-plan { padding: var(--s5); }
  .lp-calc { grid-template-columns: minmax(0, 1fr); padding: var(--s4); gap: var(--s5); }
  .pilot { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 22px; border-radius: 24px; }
  .pl-ic { width: 80px; height: 80px; border-radius: 22px; } .pl-ic svg { width: 48px; }
  .pl-t h2 { font-size: 28px; } .pl-t p { font-size: 19px; }
  .pilot .btn { width: 100%; }
  .faq summary { padding: 18px 18px; font-size: 19px; } .faq details p { padding: 0 18px 18px; font-size: 18px; }
  .lp-form { padding: 20px; grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .lp-form .two { grid-template-columns: minmax(0, 1fr); }
  .lp-form .drum { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .lp-form .drum-col { width: 46px; } .lp-form .drum-col[data-col="h"] { width: 66px; } .lp-form .lp-dcol { width: 122px; }
  .lp-form .drum-col div { white-space: nowrap; font-size: var(--t-m); }
  .ft { padding: 56px 0 32px; }
  .ft-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ft-brand { grid-column: 1 / -1; }
  .ft-biz { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 36px; }
}

/* ───── 움직임 끄기 ───── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fl, .tag, .hx-down .ico, .rm-wire path, .rm-pads .tile, .roll img, .pl-ic svg, .pd-btn { animation: none !important; }
  .scn *, .hx-tilt, .win-scr img, .pd-cur, .pd-sl .fill, .pd-sl .knob, .pd-list .q, .tl-line i, .kit, .lad, .lp-plan, .pp img { transition: none !important; }
  .rv-on .rv { opacity: 1; transform: none; }
  .scn * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .scn .ring { opacity: 0 !important; }
}

/* [B2 10-21] 함께 하는 수업 — 실제 강의 화면 그림 */
.tg-pic.tg-shot { padding: 0; border: var(--line-w, 1px) solid var(--sky-3); background: var(--sky-1); overflow: hidden; aspect-ratio: 16 / 9; }
.tg-pic.tg-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.tg:has(.tg-shot) { padding-top: 16px; }
.tg:has(.tg-shot) .tg-n { position: absolute; left: 30px; right: auto; top: 26px; z-index: 1; box-shadow: 0 0 0 3px var(--bg, #fff); }

/* [RA] 이달의 큰 주제 · 연산 미리 익히기 */
.lvw-big { margin-top: 8px; font-size: var(--t-s); line-height: 1.5; }
.lvw-big b { font-weight: 800; }
.lv-calc { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--t-s); }
.lv-calc span { padding: 4px 12px; border-radius: 999px; background: var(--spark-soft, #FFF3D6); }

/* [W50] 수업 설계 보기 — 주 1회 100분 / 주 2회 50분 나눠 보기 */
.lv-plan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: 28px; }
.lv-plan-k { font-size: var(--t-s); font-weight: 800; color: var(--or-deep); }
.lv-plan-s { font-size: var(--t-s); color: var(--ink-2); }
.lv-plan .seg { background: #fff; border: 1px solid var(--sky-3); }
.lv-dayh { font-size: var(--t-l); font-weight: 900; margin: 28px 0 0; color: var(--sky-deep); }
.lv-dayh + .band { margin-top: 12px; }
.lv-body .lv-steps + .lv-h2 { margin-top: 48px; }

/* [W50] 단계 사다리 위 과정 묶음(생각오름 · 교과 사고력) — 이름은 config.js 한 곳 */
.lad-tracks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; margin-top: 56px; }
.lad-trk { grid-column: span var(--n, 1); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 4px 12px; border-bottom: var(--line-w3) solid var(--ink-2); }
.lad-trk b { font-size: var(--t-m); font-weight: 900; color: var(--ink); }
.lad-trk span { font-size: var(--t-s); font-weight: 700; color: var(--ink-2); }
.lad-tracks + .ladder { margin-top: 16px; }
@media (max-width: 1180px) {
  .lad-tracks { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  .lad-trk { border-bottom: 0; border-left: var(--line-w3) solid var(--ink-2); padding: 2px 0 2px 12px; }
}