/* 바로시험지 교육 화면 흐름 앱 — 레인 A (LA-001) · 목업 v3 Flow/Mobile 사본을 #eapp 안으로 옮김.
   이 파일은 src/edu.src.css를 prefix.py로 #eapp 범위로 좁혀 낸 결과다(편집은 src에서). */
#eapp {font-family: 'IBM Plex Sans KR', 'Gothic A1', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; color: #141B2D; background: #FFFFFF; line-height: 1.5; -webkit-text-size-adjust: 100%;}
#eapp *, #eapp *::before, #eapp *::after {box-sizing: border-box;}
#eapp button {font-family: inherit;}
#eapp h2, #eapp h3, #eapp h4, #eapp p {margin: 0;}
#eapp a {color: #2A3E78;}
#eapp [hidden] {display: none !important;}
#eapp button:focus-visible, #eapp input:focus-visible, #eapp textarea:focus-visible, #eapp a:focus-visible, #eapp [tabindex]:focus-visible {outline: 3px solid #D4A21A; outline-offset: 2px;}
#eapp .serif {font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif;}
/* 앱 머리 */
#eapp .top {border-bottom: 1px solid #ECE8E0; background: #FFFFFF;}
#eapp .toprow {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 32px; max-width: 1180px; margin: 0 auto;}
#eapp .logo-t {font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif; font-weight: 900; font-size: 22px; letter-spacing: -0.5px; color: #141B2D; text-decoration: none;}
#eapp .logo-t:hover {color: #141B2D;}
#eapp .logo-by {font-size: 12px; color: #5C6478; margin-left: 8px;}
#eapp .bal {display: flex; align-items: center; gap: 14px; background: #FFFFFF; border: 1px solid #E3DED3; border-radius: 12px; padding: 7px 10px 7px 16px;}
#eapp .bal-v {font-size: 22px; font-weight: 700; line-height: 1.1;}
#eapp .bal-k {font-size: 13px; font-weight: 600; color: #44506A; margin-right: 4px;}
#eapp .bal-s {font-size: 12px; color: #5C6478; margin-top: 2px;}
#eapp .chg {white-space: nowrap; font-size: 13px; font-weight: 600; color: #141B2D; background: #F6F4EF; border: 1px solid #DDD7CA; border-radius: 8px; padding: 8px 12px; min-height: 36px; cursor: pointer;}
#eapp .chg:hover {border-color: #141B2D;}
#eapp .scr {padding: 28px 32px 40px; min-height: 640px; max-width: 1180px; margin: 0 auto;}
#eapp .h2 {font-weight: 900; font-size: 28px; letter-spacing: -0.6px; margin: 0;}
#eapp .lead {font-size: 15px; color: #44506A; margin: 6px 0 0;}
#eapp .pbtn {font-size: 18px; font-weight: 700; color: #FFFFFF; background: #141B2D; border: 0; border-radius: 12px; padding: 16px 26px; min-height: 56px; cursor: pointer; text-decoration: none; display: inline-block; text-align: center;}
#eapp .pbtn:hover {background: #222C46; color: #FFFFFF;}
#eapp .pbtn[disabled] {opacity: 0.45; cursor: not-allowed;}
#eapp .sbtn {white-space: nowrap; font-size: 14px; font-weight: 600; color: #141B2D; background: #FFFFFF; border: 1px solid #CBD1DC; border-radius: 10px; padding: 9px 14px; cursor: pointer; text-decoration: none; display: inline-block;}
#eapp .sbtn:hover {border-color: #141B2D; color: #141B2D;}
#eapp .note {font-size: 13px; color: #5C6478;}
#eapp .hl {background: linear-gradient(transparent 62%, #F3DE8A 62%, #F3DE8A 90%, transparent 90%); padding: 0 2px;}
/* 랜딩 모드 올리기 카드 (앱 모드 전) */
#eapp .logo-ic {display: none;}
#eapp .logo-t .hl-h {}
#eapp.hm .logo-ic {display: inline-block; vertical-align: middle; margin-right: 10px;}
#eapp.hm .logo-t {font-size: 24px;}
#eapp.hm .logo-t .hl-h {background: linear-gradient(transparent 62%, #F3DE8A 62%, #F3DE8A 90%, transparent 90%); padding: 0 2px;}
#eapp.hm .toprow {padding-top: 18px; padding-bottom: 18px;}
#eapp .codebox {max-width: 760px; margin: 28px auto 0; display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; background: #FFFFFF; border: 1px solid #E3E6EE; border-radius: 16px; padding: 18px 22px;}
#eapp .codebox strong {font-size: 18px;}
#eapp .codebox .note {display: block; margin-top: 4px;}
#eapp .codebox .fi {width: 220px;}
#eapp .drop {border: 2px dashed #8E8674; border-radius: 14px; background: #FFFFFF; padding: 30px 16px; text-align: center; cursor: pointer;}
#eapp .drop strong {font-size: 18px;}
#eapp .drop .note {display: block; margin-top: 6px;}
#eapp .upc {display: flex; flex-direction: column; gap: 14px;}
#eapp .upc h2 {font-size: 30px;}
/* ① 올리기 */
#eapp .gbar {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 10px; flex-wrap: wrap;}
#eapp .quick {display: flex; align-items: center; gap: 8px;}
#eapp .fi {font-family: inherit; font-size: 14px; color: #141B2D; border: 1px solid #CBD1DC; border-radius: 8px; padding: 8px 10px; width: 100%; background: #FFFFFF;}
#eapp .quick .fi {width: 170px;}
#eapp .seg {display: flex; gap: 6px; flex-wrap: wrap;}
#eapp .sg {font-size: 13px; font-weight: 600; color: #44506A; background: #FFFFFF; border: 1px solid #DDE1EA; border-radius: 9px; padding: 9px 12px; cursor: pointer; text-align: left;}
#eapp .sg.on {border-color: #141B2D; color: #141B2D; box-shadow: inset 0 0 0 1px #141B2D;}
#eapp .sg small {display: block; font-size: 12px; font-weight: 500; color: #5C6478; margin-top: 2px;}
#eapp .grp {margin-top: 14px;}
#eapp .grp-h {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;}
#eapp .grp-h b {font-size: 15px; word-break: break-all;}
#eapp .gwrap {max-height: 640px; overflow-y: auto; padding: 10px 6px 4px 2px;}
#eapp .grid {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;}
#eapp .pc {position: relative; border: 2px solid #E3E6EE; border-radius: 12px; padding: 8px 8px 10px; background: #FFFFFF; cursor: pointer; text-align: left; font: inherit; color: inherit; display: block; width: 100%;}
#eapp .pc.on {border-color: #141B2D; box-shadow: 0 6px 16px rgba(20, 27, 45, 0.10);}
#eapp .pc .th {width: 100%; height: auto; display: block; border-radius: 6px; background: #FFFFFF; aspect-ratio: 120 / 160; object-fit: contain;}
#eapp .pc.off .th {opacity: 0.32; filter: grayscale(1);}
#eapp .pc .chk {position: absolute; top: -9px; right: -9px; width: 30px; height: 30px; border-radius: 50%; background: #141B2D; color: #FFFFFF; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center;}
#eapp .pc .out {position: absolute; left: 8px; right: 8px; top: 46%; text-align: center; font-size: 13px; font-weight: 700; color: #5C6478; background: rgba(255, 255, 255, 0.92); border: 1px solid #DDE1EA; border-radius: 6px; padding: 3px 0;}
#eapp .pc .pn {font-size: 14px; font-weight: 700; margin-top: 7px;}
#eapp .pc .pf {font-size: 12px; color: #5C6478;}
#eapp .opts {display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-top: 22px;}
#eapp .opts.h3 {grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 1fr);}
#eapp .ob {border: 1px solid #E3E6EE; border-radius: 14px; padding: 14px 16px; background: #FAFBFC;}
#eapp .ob-k {font-size: 13px; font-weight: 700; color: #44506A; margin: 0 0 10px;}
#eapp .tg {display: flex; gap: 6px; margin-top: 8px;}
#eapp .sumbar {margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #141B2D; color: #FFFFFF; border-radius: 16px; padding: 16px 18px 16px 24px;}
#eapp .sum-a {font-size: 19px; font-weight: 700;}
#eapp .sum-b {font-size: 13px; color: #B4BCCC; margin-top: 4px;}
#eapp .sumbar .pbtn, #eapp .rsum .pbtn {background: #F3DE8A; color: #141B2D;}
#eapp .sumbar .pbtn:hover, #eapp .rsum .pbtn:hover {background: #EBD372;}
#eapp .warn {display: flex; align-items: center; gap: 12px; font-size: 14px; color: #FFE7A6; font-weight: 600;}
#eapp .warn .chg {background: #F3DE8A; border: 0; white-space: nowrap; flex: none;}
#eapp .msg {font-size: 14px; color: #8A3A10; margin-top: 12px; min-height: 0;}
#eapp .msg:empty {display: none;}
/* 모달 · 시트 */
#eapp .mdim {position: fixed; inset: 0; background: rgba(20, 27, 45, 0.42); display: flex; align-items: flex-start; justify-content: center; padding: 70px 16px 16px; z-index: 50; overflow-y: auto;}
#eapp .modal {width: 760px; max-width: 100%; background: #FFFFFF; border-radius: 18px; padding: 24px 26px; box-shadow: 0 24px 60px rgba(20, 27, 45, 0.28);}
#eapp .mh {display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;}
#eapp .mh h3 {font-size: 21px; font-weight: 900;}
#eapp .mfoot {display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px;}
#eapp .qlist {display: grid; gap: 8px; margin-top: 16px;}
#eapp .qi {display: flex; align-items: center; gap: 14px; border: 2px solid #E3E6EE; border-radius: 12px; padding: 12px 14px; cursor: pointer; background: #FFFFFF; text-align: left; width: 100%; font-size: 15px;}
#eapp .qi.on {border-color: #141B2D;}
#eapp .qi .qst {font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: #141B2D; color: #FFFFFF;}
#eapp .qi .qtx {flex: 1;}
#eapp .dimbg {position: fixed; inset: 0; background: rgba(20, 27, 45, 0.38); z-index: 40;}
#eapp .sheet {position: fixed; left: 0; right: 0; bottom: 0; background: #FFFFFF; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(20, 27, 45, 0.22); padding: 10px 16px 18px; z-index: 50; max-height: 86vh; overflow-y: auto; max-width: 640px; margin: 0 auto;}
#eapp .grab {width: 40px; height: 4px; border-radius: 4px; background: #D6D9E0; margin: 0 auto 12px;}
/* ② 바꾸는 중 */
#eapp .prog {margin-top: 24px; background: #F3F5F9; border-radius: 18px; padding: 26px 28px;}
#eapp .pg-a {font-size: 30px; font-weight: 900; letter-spacing: -0.5px;}
#eapp .pg-a span {font-size: 17px; font-weight: 600; color: #44506A; margin-left: 10px;}
#eapp .bar {height: 12px; background: #DDE2EC; border-radius: 99px; margin-top: 16px; overflow: hidden;}
#eapp .bar i {display: block; height: 100%; background: #141B2D; border-radius: 99px; transition: width 0.6s ease;}
#eapp .crow {display: grid; grid-template-columns: repeat(3, 200px); gap: 16px; margin-top: 22px;}
#eapp .cc {border: 2px solid #E3E6EE; border-radius: 12px; padding: 8px; background: #FFFFFF; position: relative; overflow: hidden;}
#eapp .cc.done {border-color: #141B2D;}
#eapp .cc.run {border-color: #2A3E78;}
#eapp .cc.fail {border-color: #B4561E;}
#eapp .cc .th {width: 100%; height: auto; display: block;}
#eapp .cc.wait .th {opacity: 0.45;}
#eapp .cst {font-size: 13px; font-weight: 700; margin-top: 6px; display: flex; align-items: center; gap: 6px;}
#eapp .spin {width: 14px; height: 14px; border-radius: 50%; border: 2px solid #C9D2E6; border-top-color: #2A3E78; animation: kSpin 0.9s linear infinite;}
@keyframes kSpin { to { transform: rotate(360deg); } }
#eapp .scan {position: absolute; left: 8px; right: 8px; height: 3px; background: rgba(42, 62, 120, 0.55); top: 10px; animation: kScan 1.4s ease-in-out infinite;}
@keyframes kScan { 0% { top: 12px; } 50% { top: 70%; } 100% { top: 12px; } }
@media (prefers-reduced-motion: reduce) {
#eapp .spin, #eapp .scan {animation: none;}
#eapp .bar i {transition: none;}
 }
#eapp .away {margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;}
#eapp .away .ob {background: #FFFFFF;}
#eapp .arow {display: flex; gap: 8px; margin-top: 8px;}
#eapp .ok {font-size: 13px; color: #1F6B3A; font-weight: 600; margin-top: 8px;}
#eapp .failnote {margin-top: 14px; font-size: 14px; color: #8A3A10; background: #FBEDE3; border-radius: 10px; padding: 10px 14px;}
#eapp .stopnote {margin-top: 14px; font-size: 14px; color: #44506A; background: #F3F5F9; border-radius: 10px; padding: 10px 14px;}
#eapp .gone {text-align: center; padding: 90px 20px;}
#eapp .gone h3 {font-size: 24px; margin: 0 0 8px;}
/* ③ 결과 */
#eapp .rsum {display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #141B2D; color: #FFFFFF; border-radius: 16px; padding: 16px 18px 16px 24px;}
#eapp .rsum .sum-a {font-size: 21px;}
#eapp .rmeta {display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: #44506A; margin: 10px 2px 0;}
#eapp .rmeta b {color: #141B2D;}
#eapp .qpick {margin-top: 14px; border: 1px solid #E3E6EE; border-radius: 14px; padding: 14px 16px; background: #FAFBFC;}
#eapp .qpick-h {display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;}
#eapp .qpick-h b {font-size: 15px;}
#eapp .qrow {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;}
#eapp .qrow-k {font-size: 12.5px; font-weight: 700; color: #44506A; min-width: 64px;}
#eapp .qc {font-size: 13px; font-weight: 700; min-width: 40px; color: #FFFFFF; background: #141B2D; border: 0; border-radius: 8px; padding: 7px 9px; cursor: pointer;}
#eapp .qc.cut {background: #E3E6EE; color: #8A93A6; text-decoration: line-through;}
#eapp .qlines {margin-top: 10px; display: grid; gap: 4px;}
#eapp .ql {display: flex; gap: 10px; align-items: center; font-size: 13px; background: #FFFFFF; border: 1px solid #E3E6EE; border-radius: 8px; padding: 6px 10px; cursor: pointer; text-align: left; width: 100%;}
#eapp .ql.cut {opacity: 0.5; text-decoration: line-through;}
#eapp .ql b {min-width: 52px; font-size: 12.5px;}
#eapp .ql span {flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif;}
#eapp .zoom {font-size: 12.5px; font-weight: 700; color: #141B2D; background: #FFFFFF; border: 1px solid #CBD1DC; border-radius: 8px; padding: 6px 10px; cursor: pointer;}
#eapp .pair {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px;}
#eapp .pair.big {grid-template-columns: minmax(0, 1fr);}
#eapp .ph {display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: #44506A; margin-bottom: 8px;}
#eapp .ph small {font-weight: 500; color: #5C6478; font-size: 12px;}
#eapp .pager {display: flex; align-items: center; gap: 8px;}
#eapp .pager button {width: 32px; height: 32px; border-radius: 8px; border: 1px solid #CBD1DC; background: #FFFFFF; font-size: 16px; cursor: pointer;}
#eapp .pager button[disabled] {opacity: 0.4; cursor: default;}
#eapp .paper {border: 1px solid #E3E6EE; border-radius: 10px; padding: 18px 20px; min-height: 470px; font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif; font-size: 14px; line-height: 1.75; background: #FFFFFF; position: relative; overflow: auto;}
#eapp .pair.big .paper {min-height: 760px; font-size: 16px;}
#eapp .paper.orig {background: #F4F3EF; padding: 0; min-height: 470px; display: flex;}
#eapp .paper.orig iframe, #eapp .paper.orig img {width: 100%; border: 0; display: block; min-height: 470px; flex: 1; object-fit: contain; background: #F4F3EF;}
#eapp .paper.loading::after {content: '미리보기를 불러오는 중입니다…'; color: #5C6478; font-family: inherit; font-size: 14px;}
#eapp .cutq {font-family: 'IBM Plex Sans KR', 'Gothic A1', sans-serif; font-size: 12px; color: #6B5410; background: #F6EDCB; border-radius: 6px; padding: 4px 8px; display: inline-block; margin-bottom: 12px;}
#eapp .pv-na {text-align: center; padding: 70px 10px; font-family: 'IBM Plex Sans KR', 'Gothic A1', sans-serif; color: #8A3A10;}
/* 미리보기 조각(edu_preview) — 서버가 내는 <article class="bp"> 틀 */
#eapp .bp-head {border: 1.5px solid #141B2D; border-radius: 6px; padding: 6px 10px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 12px; font-family: 'IBM Plex Sans KR', 'Gothic A1', sans-serif;}
#eapp .bp-name {font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif; font-weight: 700; font-size: 14px;}
#eapp .bp-title {text-align: center; font-weight: 900;}
#eapp .bp-note {display: none;}
#eapp .bp-cols {column-gap: 22px; column-rule: 1px solid #E3E6EE;}
#eapp .bp .q {break-inside: avoid; margin-bottom: 14px; scroll-margin-top: 90px;}
#eapp .bp .q.hlq {background: #FFF6D6; box-shadow: 0 0 0 3px #F3DE8A; border-radius: 6px;}
#eapp .bp .q-t {margin: 0 0 4px;}
#eapp .bp .q.drop {display: none;}
#eapp .bp .f {margin: 6px 0; max-width: 260px; border: 1px solid #E3E6EE; border-radius: 6px; background: #FFFFFF;}
#eapp .pair.big .bp .f {max-width: 360px;}
#eapp .bp .f svg, #eapp .bp .f img {display: block; width: 100%; height: auto;}
#eapp .bp .ch {list-style: none; padding: 0; margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px 14px;}
#eapp .bp table {border-collapse: collapse; font-size: 13px; margin: 6px 0;}
#eapp .bp td, #eapp .bp th {border: 1px solid #C4C9D4; padding: 3px 8px;}
#eapp .bp .na {font-family: 'IBM Plex Sans KR', 'Gothic A1', sans-serif; font-size: 12px; color: #5C6478;}
#eapp .eq-check {display: inline-block; font-family: 'IBM Plex Sans KR', 'Gothic A1', sans-serif; font-size: 11.5px; font-weight: 700; color: #8A5A00; background: #FFF6D6; border: 1.5px solid #D4A21A; border-radius: 5px; padding: 0 5px; cursor: pointer; vertical-align: 1px;}
#eapp .eq-check.fixed {background: #EAF5EE; border-color: #1F6B3A; color: #1F6B3A;}
#eapp .eq-na {font-family: 'IBM Plex Sans KR', 'Gothic A1', sans-serif; font-size: 12px; color: #8A5A00; background: #FFF1CC; border-radius: 4px; padding: 0 5px;}
/* 그림 카드 */
#eapp .figs {margin-top: 24px;}
#eapp .figf {display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;}
#eapp .fgrid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
#eapp .fc2 {border: 1px solid #E3E6EE; border-radius: 14px; padding: 12px; background: #FAFBFC;}
#eapp .fc2.flagged {border-color: #F0DFA6; background: #FFFBEE;}
#eapp .fc2-h {display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px;}
#eapp .fc2-h b {font-size: 14px;}
#eapp .jump {font-size: 12.5px; font-weight: 700; color: #2A3E78; background: #E3E9F7; border: 0; border-radius: 7px; padding: 6px 9px; cursor: pointer;}
#eapp .fc2-i {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
#eapp .fimg {border: 1px solid #E3E6EE; border-radius: 8px; overflow: hidden; background: #FFFFFF; min-height: 40px;}
#eapp .fimg.o {background: #F4F3EF;}
#eapp .fimg svg, #eapp .fimg img {display: block; width: 100%; height: auto;}
#eapp .fk {font-size: 11.5px; font-weight: 700; color: #5C6478; margin-bottom: 4px;}
#eapp .badge {display: inline-block; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: #141B2D; color: #FFFFFF;}
#eapp .badge.ph {background: #E3E6EE; color: #44506A;}
#eapp .badge.ed {background: #EAF5EE; color: #1F6B3A; margin-left: 6px;}
#eapp .badge.flag {background: #FFF1CC; color: #8A5A00; margin-left: 6px;}
#eapp .fbtns {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;}
#eapp .fbtns .sbtn.main {background: #141B2D; color: #FFFFFF; border-color: #141B2D;}
#eapp .fbtns .sbtn[disabled] {opacity: 0.45; cursor: not-allowed;}
#eapp .keep {font-size: 12.5px; color: #1F6B3A; margin-top: 8px;}
#eapp .keep.warm {color: #8A5A00;}
#eapp .keep.cool {color: #44506A;}
#eapp .checks {margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;}
#eapp .ck {border-radius: 14px; padding: 14px 16px; background: #FFF9E6; border: 1px solid #F0DFA6;}
#eapp .ck.tip {background: #F3F5F9; border-color: #E3E6EE;}
#eapp .ck h4 {margin: 0 0 8px; font-size: 14px;}
#eapp .ck li {font-size: 13.5px; margin: 4px 0;}
#eapp .ck ul {margin: 0; padding-left: 18px;}
#eapp .ck .done {color: #1F6B3A; text-decoration: line-through;}
#eapp .rfoot {margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #5C6478;}
#eapp .toast {position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: #141B2D; color: #FFFFFF; border-radius: 12px; padding: 12px 18px; font-size: 14px; box-shadow: 0 12px 30px rgba(20, 27, 45, 0.3); z-index: 80; max-width: calc(100vw - 32px);}
#eapp .toast small {display: block; color: #B4BCCC; font-size: 12px; margin-top: 2px;}
/* ④ 충전 */
#eapp .payg {display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 22px; margin-top: 20px;}
#eapp .amts {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;}
#eapp .amt {border: 2px solid #E3E6EE; border-radius: 14px; padding: 14px; background: #FFFFFF; cursor: pointer; text-align: left;}
#eapp .amt.on {border-color: #141B2D; box-shadow: 0 6px 16px rgba(20, 27, 45, 0.10);}
#eapp .amt b {display: block; font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif; font-size: 22px;}
#eapp .amt small {font-size: 12px; color: #5C6478;}
#eapp .sect {margin-top: 20px;}
#eapp .sect h4 {font-size: 15px; margin: 0 0 10px;}
#eapp .rc {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;}
#eapp .rcf {margin-top: 12px; display: grid; gap: 10px; background: #FAFBFC; border: 1px solid #E3E6EE; border-radius: 12px; padding: 14px;}
#eapp .paywarn {font-size: 12.5px; color: #8A5A00; background: #FFF6D6; border-radius: 8px; padding: 8px 10px; margin-top: 10px;}
#eapp .pcard {background: #F3F5F9; border-radius: 18px; padding: 22px; align-self: start;}
#eapp .pcard .rl {display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 7px 0; border-bottom: 1px dashed #D3D8E2;}
#eapp .pcard .rt {display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px;}
#eapp .pcard .rt b {font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif; font-size: 28px;}
#eapp .pcard .pbtn {width: 100%; margin-top: 16px;}
/* ⑤ 환불 */
#eapp .rf {max-width: 680px; margin: 26px auto 0;}
#eapp .rule {background: #F3F5F9; border-radius: 14px; padding: 16px 18px; font-size: 14.5px; line-height: 1.7;}
#eapp .rres {margin-top: 18px; border-radius: 14px; padding: 18px 20px; font-size: 15px; line-height: 1.7;}
#eapp .rres.yes {background: #EAF5EE; border: 1px solid #BFDFCB;}
#eapp .rres.no {background: #FBF1E8; border: 1px solid #EBD0B8;}
#eapp .rres b {font-size: 18px;}
/* 휴대폰 전용 조각 (≤768에서만 보임) */
#eapp .m-only {display: none !important;}
#eapp .tabs {display: flex; background: #F1F2F5; border-radius: 10px; padding: 3px;}
#eapp .tabs button {flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: #5C6478; padding: 8px 0; border-radius: 8px; border: 0; background: transparent; cursor: pointer;}
#eapp .tabs button.on {background: #FFFFFF; color: #141B2D; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);}
#eapp .list {margin-top: 12px; border: 1px solid #E3E6EE; border-radius: 12px; overflow: hidden;}
#eapp .li {display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 14px; font-size: 14px; border-bottom: 1px solid #E3E6EE; background: #FFFFFF; width: 100%; text-align: left; border-left: 0; border-right: 0; border-top: 0; cursor: pointer;}
#eapp .li:last-child {border-bottom: 0;}
#eapp .li small {display: block; font-size: 12px; color: #5C6478; margin-top: 2px;}
#eapp .li .go {color: #8A93A6; font-size: 16px;}
#eapp .li.static {cursor: default;}
#eapp .mini {font-size: 12px; font-weight: 700; border-radius: 8px; padding: 7px 9px; border: 1px solid #CBD1DC; background: #FFFFFF; color: #141B2D; white-space: nowrap; cursor: pointer;}
#eapp .mini.dark {background: #141B2D; color: #FFFFFF; border-color: #141B2D;}
#eapp .frow {display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #E3E6EE; font-size: 13px;}
#eapp .frow:last-of-type {border-bottom: 0;}
#eapp .frow .th {border: 1px solid #E3E6EE; border-radius: 6px; overflow: hidden; min-height: 30px;}
#eapp .frow .th svg, #eapp .frow .th img {display: block; width: 100%; height: auto;}
#eapp .frow .why {font-size: 12px; color: #5C6478;}
#eapp .frow .side {text-align: right; font-size: 12px; font-weight: 700; color: #44506A;}
#eapp .dock {position: fixed; left: 0; right: 0; bottom: 0; background: #141B2D; color: #FFFFFF; padding: 12px 14px 16px; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 20px rgba(20, 27, 45, 0.16); z-index: 30;}
#eapp .dock .a {font-size: 15px; font-weight: 700;}
#eapp .dock .b {font-size: 12px; color: #B4BCCC; margin: 3px 0 10px; line-height: 1.45;}
#eapp .dock .pbtn {background: #F3DE8A; color: #141B2D; width: 100%; padding: 13px 0; font-size: 15px; min-height: 48px;}
#eapp .dock.light {background: #FFFFFF; color: #141B2D; border-top: 1px solid #E3E6EE;}
#eapp .dock.light .b {color: #5C6478;}
#eapp .dock.light .pbtn {background: #141B2D; color: #FFFFFF;}
#eapp .btn3 {display: grid; gap: 8px; margin-top: 12px;}
#eapp .obtn {width: 100%; font-size: 14.5px; font-weight: 700; color: #141B2D; background: #FFFFFF; border: 1.5px solid #141B2D; border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; cursor: pointer; text-align: left;}
#eapp .obtn span {font-weight: 500; color: #5C6478; font-size: 12.5px;}
#eapp .opt {display: flex; justify-content: space-between; align-items: center; border: 1.5px solid #E3E6EE; border-radius: 11px; padding: 12px 14px; font-size: 14px; margin-top: 8px; width: 100%; background: #FFFFFF; cursor: pointer; text-align: left;}
#eapp .opt.on {border-color: #141B2D;}
#eapp .opt i {font-style: normal; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #CBD1DC; display: inline-block; flex: none;}
#eapp .opt.on i {border: 6px solid #141B2D;}
#eapp .pcnote {font-size: 13px; color: #44506A; margin: 10px 0 0;}
#eapp .pcnote u {cursor: pointer;}
#eapp .mpad {height: 150px;}
/* 휴대폰 ≤768 — 한 화면에 할 일 하나 */
@media (max-width: 768px) {
#eapp .m-only {display: block !important;}
#eapp .tabs.m-only {display: flex !important;}
#eapp .d-only {display: none !important;}
#eapp .toprow {padding: 8px 14px 10px; gap: 8px;}
#eapp.hm .toprow {padding: 8px 14px 10px;}
#eapp.hm .logo-ic {display: none;}
#eapp.hm .logo-t {font-size: 17px;}
#eapp .bal-s {white-space: nowrap;}
#eapp .logo-t {font-size: 17px;}
#eapp .logo-by {display: none;}
#eapp .bal {gap: 6px; padding: 4px 4px 4px 10px; border-radius: 10px;}
#eapp .bal-v {font-size: 14px;}
#eapp .bal-k {display: none;}
#eapp .bal-s {font-size: 12px; margin-top: 0; line-height: 1.15;}
#eapp .chg {font-size: 12px; padding: 5px 8px; min-height: 32px; border-radius: 7px;}
#eapp .scr {padding: 16px 16px 20px; min-height: 0;}
#eapp .scr.pad {padding-bottom: 170px;}
#eapp .h2 {font-size: 20px; letter-spacing: -0.3px;}
#eapp .lead {font-size: 13px;}
#eapp .pbtn {font-size: 16px; padding: 14px 0; min-height: 52px; width: 100%;}
#eapp .sbtn {font-size: 13px; padding: 9px 10px;}
#eapp .gbar {margin: 10px 0 0;}
#eapp .gbar .quick, #eapp .gbar .seg {display: none;}
#eapp .gwrap {max-height: none; overflow: visible; padding: 6px 4px 0 2px;}
#eapp .grid {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px;}
#eapp .pc {padding: 5px 5px 7px; border-radius: 10px;}
#eapp .pc .chk {width: 24px; height: 24px; font-size: 13px; top: -8px; right: -8px;}
#eapp .pc .pn {font-size: 12px; margin-top: 4px;}
#eapp .pc .pf {font-size: 12px;}
#eapp .pc .out {font-size: 12px; left: 5px; right: 5px;}
#eapp .grp-h .sbtn {display: none;}
#eapp .opts, #eapp .away, #eapp .payg, #eapp .checks, #eapp .pair, #eapp .fgrid, #eapp .rc {grid-template-columns: minmax(0, 1fr);}
#eapp .opts {display: none;}
#eapp .sumbar {display: none;}
#eapp .prog {padding: 16px; border-radius: 14px; margin-top: 12px;}
#eapp .pg-a {font-size: 22px;}
#eapp .pg-a span {font-size: 13px;}
#eapp .bar {height: 10px; margin-top: 12px;}
#eapp .crow {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 12px;}
#eapp .cc {padding: 5px; border-radius: 10px;}
#eapp .cst {font-size: 12px; margin-top: 3px;}
#eapp .away {display: block; margin-top: 12px;}
#eapp .away > .ob {display: none;}
#eapp .rsum, #eapp .rmeta, #eapp .qpick, #eapp .figs, #eapp .checks, #eapp .rfoot.d-only {display: none;}
#eapp .pair {margin-top: 12px; display: block;}
#eapp .pair .orig-col, #eapp .pair .pv-col {display: none;}
#eapp .pair.show-orig .orig-col {display: block;}
#eapp .pair.show-pv .pv-col {display: block;}
#eapp .paper {padding: 12px; min-height: 0; max-height: 340px; font-size: 12px; line-height: 1.7;}
#eapp .paper.orig, #eapp .paper.orig iframe, #eapp .paper.orig img {min-height: 360px;}
#eapp .bp-head {font-size: 12px; padding: 4px 8px;}
#eapp .bp-cols {columns: 1 !important;}
#eapp .bp .ch {font-size: 12px;}
#eapp .amts {grid-template-columns: 1fr 1fr; gap: 8px;}
#eapp .amt {padding: 10px; border-radius: 12px;}
#eapp .amt b {font-size: 18px;}
#eapp .pcard {display: none;}
#eapp .mdim {align-items: flex-end; padding: 0;}
#eapp .modal {width: 100% !important; padding: 18px 16px 22px; border-radius: 20px 20px 0 0; margin-top: 0;}
#eapp .toast {bottom: 130px;}
#eapp .rf {margin-top: 12px;}
#eapp .rule {font-size: 13px; padding: 12px 14px;}
#eapp .gone {padding: 50px 10px;}
#eapp .upc h2 {font-size: 24px;}

}
/* LA-013 — 동의 문장 · 원본 삭제 안내 · 바닥글 (edu_legal_ui 켠 때만 그려짐) */
#eapp .gowrap {display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none;}
#eapp .agree-note {font-size: 12px; line-height: 1.45; color: #B4BCCC; text-align: right;}
#eapp .agree-note a {color: #F3DE8A;}
#eapp .dock .agree-note {text-align: center; margin: 8px 0 0;}
#eapp .legal-note {margin: 12px 2px 0; font-size: 13px; color: #44506A; line-height: 1.55;}
#eapp .agree-row {display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 10px; font-size: 13px; line-height: 1.5; color: #141B2D; cursor: pointer;}
#eapp .agree-row input {width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: #141B2D; cursor: pointer;}
#eapp .agree-row a {color: #2A3E78; text-decoration: underline;}
#eapp .dock .agree-row {margin: 8px 0 10px; font-size: 12px;}
#eapp .lfoot {background: #141B2D; padding: 28px 0 40px; color: #B4BCCC; font-size: 13px; line-height: 1.8;}
#eapp .lfoot .lin {max-width: 1180px; margin: 0 auto; padding: 0 32px;}
#eapp .lfoot b {color: #FFFFFF;}
#eapp .lfoot a {color: #D3D9E6;}
#eapp .lfoot a:hover {color: #FFFFFF;}
#eapp .lrow {display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; font-size: 14px;}
#eapp .llinks {display: flex; flex-wrap: wrap; gap: 6px 20px;}
#eapp .lbiz {margin: 10px 0 0; font-size: 12px; color: #98A2B8; line-height: 1.85;}
#eapp.lf .s8 .foot {display: none;}
@media (max-width: 768px) {
#eapp .lfoot {padding: 22px 0 120px;}
#eapp .lfoot .lin {padding: 0 16px;}

}

#eapp .s8 {font-family: 'IBM Plex Sans KR', sans-serif; color: #141B2D; background: #FFFFFF;}
#eapp .s8 * {box-sizing: border-box;}
#eapp .s8 .wrap {max-width: 1180px; margin: 0 auto; padding: 0 40px;}
#eapp .s8 .serif {font-family: 'Noto Serif KR', serif;}
#eapp .s8 .hl {background: linear-gradient(transparent 62%, #F3DE8A 62%, #F3DE8A 90%, transparent 90%); padding: 0 2px;}
#eapp .s8 .hero {display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 88px;}
#eapp .s8 .eyebrow {font-size: 14px; font-weight: 600; color: #44506A; margin: 0 0 18px;}
#eapp .s8 .h1 {font-weight: 900; font-size: 50px; line-height: 1.28; letter-spacing: -1.2px; margin: 0;}
#eapp .s8 .hero > div:first-child {container-type: inline-size;}
#eapp .s8 .h1 {font-size: min(50px, 9.2cqw); word-break: keep-all;}
#eapp .s8 .nw {white-space: nowrap;}
#eapp .s8 .sub {font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 22px; margin: 22px 0 0;}
#eapp .s8 .sub2 {font-size: 16px; line-height: 1.7; color: #44506A; margin: 14px 0 0; max-width: 460px;}
#eapp .s8 .cta {font-family: inherit; display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; font-size: 20px; font-weight: 700; color: #FFFFFF; background: #141B2D; border: 0; border-radius: 14px; padding: 20px 30px; min-height: 64px; cursor: pointer;}
#eapp .s8 .cta:hover {background: #222C46;}
#eapp .s8 .cta-note {font-size: 14px; color: #44506A; margin: 14px 0 0;}
#eapp .s8 .demo {background: #F4F2ED; border-radius: 22px; padding: 18px;}
#eapp .s8 .stage {width: 100%; height: auto; display: block;}
#eapp .s8 .steps {list-style: none; margin: 14px 2px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;}
#eapp .s8 .steps li {font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid #E3DED3; color: #44506A; background: #FFFFFF; animation-duration: 16s; animation-iteration-count: infinite;}
#eapp .s8 .steps .s1 {animation-name: kS1;}
#eapp .s8 .steps .s2 {animation-name: kS2;}
#eapp .s8 .steps .s3 {animation-name: kS3;}
#eapp .s8 .steps .s4 {animation-name: kS4;}
#eapp .s8 .steps .s5 {animation-name: kS5;}
@keyframes kS1 { 0%, 16% { background: #141B2D; color: #FFFFFF; border-color: #141B2D; } 18%, 100% { background: #FFFFFF; color: #44506A; border-color: #E3DED3; } }
@keyframes kS2 { 0%, 16% { background: #FFFFFF; color: #44506A; border-color: #E3DED3; } 18%, 31% { background: #141B2D; color: #FFFFFF; border-color: #141B2D; } 33%, 100% { background: #FFFFFF; color: #44506A; border-color: #E3DED3; } }
@keyframes kS3 { 0%, 31% { background: #FFFFFF; color: #44506A; border-color: #E3DED3; } 33%, 50% { background: #141B2D; color: #FFFFFF; border-color: #141B2D; } 52%, 100% { background: #FFFFFF; color: #44506A; border-color: #E3DED3; } }
@keyframes kS4 { 0%, 50% { background: #FFFFFF; color: #44506A; border-color: #E3DED3; } 52%, 68% { background: #141B2D; color: #FFFFFF; border-color: #141B2D; } 70%, 100% { background: #FFFFFF; color: #44506A; border-color: #E3DED3; } }
@keyframes kS5 { 0%, 68% { background: #FFFFFF; color: #44506A; border-color: #E3DED3; } 70%, 98% { background: #141B2D; color: #FFFFFF; border-color: #141B2D; } 100% { background: #FFFFFF; color: #44506A; border-color: #E3DED3; } }
/* stage */
#eapp .s8 .win {fill: #F9F8F5; stroke: #E3DED3; stroke-width: 1.5;}
#eapp .s8 .winbar {fill: #EEEBE4;}
#eapp .s8 .t {font-family: 'IBM Plex Sans KR', sans-serif;}
#eapp .s8 .wt {font-size: 13px; fill: #44506A; font-weight: 600;}
#eapp .s8 .tbi {fill: #DCD7CC;}
#eapp .s8 .page {fill: #FFFFFF; stroke: #E8E4DC;}
#eapp .s8 .pq {font-family: 'Noto Serif KR', serif; font-size: 13.5px; fill: #141B2D;}
#eapp .s8 .e {fill: none; stroke: #141B2D; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
#eapp .s8 .eh {fill: none; stroke: #141B2D; stroke-width: 1.6; stroke-dasharray: 6 5;}
#eapp .s8 .hexG {fill: #C9CDD6; opacity: 0.85;}
#eapp .s8 .hexY {fill: #F3DE8A; opacity: 0.9;}
#eapp .s8 .hs {fill: none; stroke: #141B2D; stroke-width: 1.6;}
#eapp .s8 .hd2 {fill: none; stroke: #141B2D; stroke-width: 1.4; stroke-dasharray: 4 4;}
#eapp .s8 .vl {font-family: 'Noto Serif KR', serif; font-size: 16px; fill: #141B2D;}
#eapp .s8 .vli {font-family: 'Noto Serif KR', serif; font-size: 15px; fill: #141B2D; text-anchor: middle;}
#eapp .s8 .rasC {filter: url(#rough8);}
#eapp .s8 .rasC .e, #eapp .s8 .rasC .eh, #eapp .s8 .rasC .hs, #eapp .s8 .rasC .hd2 {stroke: #555555; stroke-width: 2.8;}
#eapp .s8 .rasC .hexG {fill: #B9B9B9;}
#eapp .s8 .rasC .vl, #eapp .s8 .rasC .vli {fill: #555555;}
#eapp .s8 .dim {fill: #FFFFFF; opacity: 0.9;}
#eapp .s8 .lensbg {fill: #FFFFFF;}
#eapp .s8 .lensring {fill: none; stroke: #141B2D; stroke-width: 3;}
#eapp .s8 .clipA {clip-path: url(#lens8A);}
#eapp .s8 .clipB {clip-path: url(#lens8B);}
#eapp .s8 .lenst {font-size: 14px; font-weight: 700; fill: #141B2D; text-anchor: middle;}
#eapp .s8 .lensh {font-size: 15px; font-weight: 700; fill: #141B2D; text-anchor: middle;}
#eapp .s8 .popb {fill: #FFFFFF; stroke: #E3DED3; filter: drop-shadow(0 8px 18px rgba(20, 27, 45, 0.14));}
#eapp .s8 .popt {font-size: 13px; font-weight: 700; fill: #141B2D;}
#eapp .s8 .popl {font-size: 12.5px; fill: #44506A;}
#eapp .s8 .sw {stroke: #C9C3B6; stroke-width: 1;}
#eapp .s8 .swg {fill: #C9CDD6;}
#eapp .s8 .swy {fill: #F3DE8A;}
#eapp .s8 .swb {fill: #C8D6F5;}
#eapp .s8 .swn {fill: #FFFFFF;}
#eapp .s8 .swx {stroke: #B03A2E; stroke-width: 1.5;}
#eapp .s8 .ring {fill: none; stroke: #141B2D; stroke-width: 2;}
#eapp .s8 .inp {fill: #F9F8F5; stroke: #141B2D; stroke-width: 1.2;}
#eapp .s8 .inpt {font-family: 'Noto Serif KR', serif; font-size: 15px; fill: #141B2D;}
#eapp .s8 .caret {fill: #2F6FEB; animation: kBlink 1s steps(1) infinite;}
#eapp .s8 .selr {fill: none; stroke: #2F6FEB; stroke-width: 1.5; stroke-dasharray: 5 4;}
#eapp .s8 .hd {fill: #FFFFFF; stroke: #2F6FEB; stroke-width: 1.5;}
#eapp .s8 .cur path {fill: #FFFFFF; stroke: #141B2D; stroke-width: 1.4; stroke-linejoin: round;}
#eapp .s8 .rip {fill: none; stroke: #2F6FEB; stroke-width: 2.2; transform-box: fill-box; transform-origin: center;}
#eapp .s8 .pillRb {fill: #ECEAE5;}
#eapp .s8 .pillVb {fill: #141B2D;}
#eapp .s8 .pillt {font-size: 12px; font-weight: 700; text-anchor: middle;}
#eapp .s8 .pillR .pillt {fill: #5C6478;}
#eapp .s8 .pillV .pillt {fill: #FFFFFF;}
#eapp .s8 .endr {fill: #141B2D;}
#eapp .s8 .endt {font-size: 15px; font-weight: 700; fill: #FFFFFF;}
#eapp .s8 .endp {fill: #F3DE8A;}
#eapp .s8 .endpt {font-size: 13.5px; font-weight: 700; fill: #141B2D; text-anchor: middle;}
#eapp .s8 .beam {fill: url(#beam8);}
#eapp .s8 .bm0 {stop-color: #F3DE8A; stop-opacity: 0;}
#eapp .s8 .bm1 {stop-color: #F3DE8A; stop-opacity: 0.7;}
#eapp .s8 .ras-l {opacity: 0; animation: kRas 16s infinite;}
#eapp .s8 .beam {opacity: 0; animation: kBeam 16s infinite linear;}
#eapp .s8 .draw {stroke-dasharray: 700; animation: kDraw 16s infinite ease-out;}
#eapp .s8 .vf {opacity: 0; animation: kVf 16s infinite;}
#eapp .s8 .hexGa {opacity: 0; animation: kHexG 16s infinite;}
#eapp .s8 .hexYa {opacity: 0; animation: kHexY 16s infinite;}
#eapp .s8 .selH {opacity: 0; animation: kSelH 16s infinite;}
#eapp .s8 .pop {opacity: 0; animation: kPop 16s infinite;}
#eapp .s8 .ringG {animation: kOff44 16s infinite;}
#eapp .s8 .ringY {opacity: 0; animation: kOn44 16s infinite;}
#eapp .s8 .selT {opacity: 0; animation: kSelT 16s infinite;}
#eapp .s8 .tpop {opacity: 0; animation: kTpop 16s infinite;}
#eapp .s8 .txt6 {animation: kOff61 16s infinite;}
#eapp .s8 .txt8 {opacity: 0; animation: kOn61 16s infinite;}
#eapp .s8 .lab6 {animation: kLab6 16s infinite;}
#eapp .s8 .lab8 {opacity: 0; animation: kLab8 16s infinite;}
#eapp .s8 .cur {opacity: 0; animation: kCur 16s infinite ease-in-out;}
#eapp .s8 .r1 {opacity: 0; animation: kR1 16s infinite;}
#eapp .s8 .r2 {opacity: 0; animation: kR2 16s infinite;}
#eapp .s8 .r3 {opacity: 0; animation: kR3 16s infinite;}
#eapp .s8 .lens {opacity: 0; animation: kLens 16s infinite;}
#eapp .s8 .endb {opacity: 0; animation: kEnd 16s infinite;}
#eapp .s8 .pillR {opacity: 0; animation: kRas 16s infinite;}
#eapp .s8 .pillV {opacity: 0; animation: kPillV 16s infinite;}
@keyframes kRas { 0%, 15% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes kBeam { 0%, 11% { opacity: 0; transform: translateX(110px); } 13% { opacity: 1; transform: translateX(130px); } 22% { opacity: 1; transform: translateX(420px); } 24%, 100% { opacity: 0; transform: translateX(440px); } }
@keyframes kDraw { 0%, 16% { stroke-dashoffset: 700; opacity: 0; } 17% { stroke-dashoffset: 700; opacity: 1; } 29% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes kVf { 0%, 24% { opacity: 0; } 29%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kHexG { 0%, 25% { opacity: 0; } 30%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes kHexY { 0%, 44% { opacity: 0; } 45%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kSelH { 0%, 35.5% { opacity: 0; } 36.5%, 49% { opacity: 1; } 50.5%, 100% { opacity: 0; } }
@keyframes kPop { 0%, 37.5% { opacity: 0; transform: translateY(8px); } 39.5%, 49% { opacity: 1; transform: translateY(0); } 50.5%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes kOn44 { 0%, 44% { opacity: 0; } 45%, 100% { opacity: 1; } }
@keyframes kOff44 { 0%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes kSelT { 0%, 54.5% { opacity: 0; } 55.5%, 67% { opacity: 1; } 68.5%, 100% { opacity: 0; } }
@keyframes kTpop { 0%, 56% { opacity: 0; transform: translateY(6px); } 58%, 67% { opacity: 1; transform: translateY(0); } 68.5%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes kOn61 { 0%, 61% { opacity: 0; } 61.5%, 100% { opacity: 1; } }
@keyframes kOff61 { 0%, 61% { opacity: 1; } 61.5%, 100% { opacity: 0; } }
@keyframes kLab6 { 0%, 24% { opacity: 0; } 29%, 65.5% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes kLab8 { 0%, 65.5% { opacity: 0; } 66.5%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kCur {
  0%, 30% { opacity: 0; transform: translate(480px, 400px); }
  32% { opacity: 1; transform: translate(480px, 400px); }
  35.5%, 40% { opacity: 1; transform: translate(265px, 262px); }
  43%, 46% { opacity: 1; transform: translate(439px, 202px); }
  52%, 55% { opacity: 1; transform: translate(222px, 390px); }
  58%, 66% { opacity: 1; transform: translate(290px, 335px); }
  69%, 100% { opacity: 0; transform: translate(290px, 335px); }
}
@keyframes kR1 { 0%, 35.5% { opacity: 0; transform: scale(0.3); } 36% { opacity: 0.9; transform: scale(0.4); } 38.5%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes kR2 { 0%, 43.6% { opacity: 0; transform: scale(0.3); } 44.1% { opacity: 0.9; transform: scale(0.4); } 46.6%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes kR3 { 0%, 54.6% { opacity: 0; transform: scale(0.3); } 55.1% { opacity: 0.9; transform: scale(0.4); } 57.6%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes kLens { 0%, 70% { opacity: 0; } 72.5%, 85% { opacity: 1; } 87%, 100% { opacity: 0; } }
@keyframes kEnd { 0%, 87.5% { opacity: 0; transform: translateY(10px); } 90%, 97.5% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes kPillV { 0%, 18% { opacity: 0; } 21%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
#eapp .s8 .stage *, #eapp .s8 .steps li {animation: none !important;}
#eapp .s8 .draw, #eapp .s8 .vf, #eapp .s8 .hexYa, #eapp .s8 .lab8, #eapp .s8 .pillV {opacity: 1;}
 }
/* bands + sections */
#eapp .s8 .band {clip-path: inset(0 -100vmax);}
#eapp .s8 .bWarm {background: #F6F4EF; box-shadow: 0 0 0 100vmax #F6F4EF;}
#eapp .s8 .bCool {background: #F3F5F9; box-shadow: 0 0 0 100vmax #F3F5F9;}
#eapp .s8 .sec {padding-top: 88px; padding-bottom: 88px;}
#eapp .s8 .kicker {display: inline-block; font-size: 13px; font-weight: 700; color: #6B5410; background: #F6EDCB; border-radius: 6px; padding: 4px 10px; margin: 0 0 14px;}
#eapp .s8 .bCool .kicker {color: #2A3E78; background: #E3E9F7;}
#eapp .s8 .h2 {font-weight: 900; font-size: 36px; letter-spacing: -0.8px; margin: 0; line-height: 1.3;}
#eapp .s8 .lead {font-size: 16px; color: #44506A; margin: 12px 0 0; line-height: 1.7; max-width: 760px;}
#eapp .s8 .pillars {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px;}
#eapp .s8 .pl {background: #FFFFFF; border: 1px solid #E3E6EE; border-radius: 20px; padding: 26px;}
#eapp .s8 .pl svg {width: 100%; height: auto; display: block; margin-bottom: 18px; background: #F9F8F5; border-radius: 14px;}
#eapp .s8 .pl .num {font-size: 12px; font-weight: 700; color: #5C6478;}
#eapp .s8 .pl h3 {font-family: 'Noto Serif KR', serif; font-size: 21px; font-weight: 900; margin: 6px 0 8px;}
#eapp .s8 .pl p {font-size: 15px; color: #44506A; line-height: 1.7; margin: 0;}
#eapp .s8 .cmp {position: relative; margin-top: 36px; border-radius: 22px; overflow: hidden; border: 1px solid #E8E3D8; background: #FFFFFF;}
#eapp .s8 .cmpin {position: relative; aspect-ratio: 16 / 9;}
#eapp .s8 .layer {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 3%;}
#eapp .s8 .pgx {width: min(80%, 960px); height: 100%; background: #FFFFFF; color: #141B2D; border-radius: 6px; padding: 3% 4%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 4%; font-family: 'Noto Serif KR', serif; font-size: 14px; line-height: 1.75; box-shadow: 0 10px 30px rgba(20, 27, 45, 0.08);}
#eapp .s8 .pgx p {margin: 0 0 0.6em;}
#eapp .s8 .pgx .hdr {grid-column: 1 / -1; display: flex; justify-content: space-between; border-bottom: 2px solid currentColor; padding-bottom: 6px; font-size: 0.8em; align-self: start;}
#eapp .s8 .pgx .fig {display: flex; align-items: center; justify-content: center; min-height: 0;}
#eapp .s8 .pgx .fig svg {width: 100%; height: auto; max-height: 100%;}
#eapp .s8 .scanP {background: #E7E4DD; color: #3A3A3A; filter: blur(0.6px) contrast(0.9);}
#eapp .s8 .c-e {fill: none; stroke: currentColor; stroke-width: 2;}
#eapp .s8 .c-h {fill: none; stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 6 5;}
#eapp .s8 .c-f {fill: #E9EDF6;}
#eapp .s8 .c-fY {fill: #F7EBC0;}
#eapp .s8 .c-t {font-family: 'Noto Serif KR', serif; font-size: 16px; fill: currentColor;}
#eapp .s8 .rasx {filter: url(#rough8b);}
#eapp .s8 .rasx .c-e, #eapp .s8 .rasx .c-h {stroke-width: 2.8;}
#eapp .s8 .rasx .c-f {fill: #CFCFCF;}
#eapp .s8 .split {position: absolute; top: 0; bottom: 0; width: 2px; background: #141B2D;}
#eapp .s8 .split span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: #141B2D; color: #F3DE8A; font-size: 16px; font-weight: 900; display: flex; align-items: center; justify-content: center;}
#eapp .s8 .cmpl {position: absolute; top: 16px; font-size: 12.5px; font-weight: 700; background: #FFFFFF; color: #141B2D; border: 1px solid #E3DED3; border-radius: 999px; padding: 4px 11px;}
#eapp .s8 .rng {display: block; padding: 14px 18px; background: #FBFAF7; border-top: 1px solid #E8E3D8;}
#eapp .s8 .rng label {font-size: 13px; color: #5C6478; display: block; margin-bottom: 6px;}
#eapp .s8 .rng input {width: 100%; accent-color: #141B2D;}
#eapp .s8 .gal {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px;}
#eapp .s8 .gcard {margin: 0; background: #FFFFFF; border: 1px solid #ECE8E0; border-radius: 18px; padding: 22px 22px 24px;}
#eapp .s8 .gcard svg {width: 100%; height: auto; display: block; background: #F9F8F5; border-radius: 12px;}
#eapp .s8 .gt {font-family: 'Noto Serif KR', serif; font-size: 19px; font-weight: 900; margin: 18px 0 6px;}
#eapp .s8 .gd {font-size: 14.5px; color: #44506A; line-height: 1.65; margin: 0;}
#eapp .s8 .g-edge {fill: none; stroke: #141B2D; stroke-width: 1.8; stroke-linejoin: round;}
#eapp .s8 .g-thin {fill: none; stroke: #141B2D; stroke-width: 1.3;}
#eapp .s8 .g-hid {fill: none; stroke: #141B2D; stroke-width: 1.5; stroke-dasharray: 5 4;}
#eapp .s8 .g-front {fill: #FFFFFF;}
#eapp .s8 .g-top {fill: #F0EEE9;}
#eapp .s8 .g-side {fill: #E3E0D9;}
#eapp .s8 .g-w1 {fill: #8F97A9;}
#eapp .s8 .g-w2 {fill: #B6BCC9;}
#eapp .s8 .g-hole {fill: #F9F8F5;}
#eapp .s8 .g-holeclip {clip-path: url(#holeClip8);}
#eapp .s8 .g-txt {font-family: 'Noto Serif KR', serif; font-size: 13px; fill: #141B2D; text-anchor: middle;}
#eapp .s8 .g-it {font-style: italic;}
#eapp .s8 .g-circ {fill: #F7EBC0; stroke: #141B2D; stroke-width: 1.6;}
#eapp .s8 .g-sel {fill: none; stroke: #2F6FEB; stroke-width: 1.3; stroke-dasharray: 4 3;}
#eapp .s8 .g-hd {fill: #FFFFFF; stroke: #2F6FEB; stroke-width: 1.3;}
#eapp .s8 .g-cv {fill: none; stroke: #141B2D; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;}
#eapp .s8 .g-dot {fill: #141B2D;}
#eapp .s8 .price {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center;}
#eapp .s8 .rcpt {background: #FFFFFF; border-radius: 18px; border: 1px solid #E3E6EE; padding: 30px 34px; box-shadow: 0 14px 34px rgba(20, 27, 45, 0.07);}
#eapp .s8 .rrow {display: flex; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid #ECEEF3;}
#eapp .s8 .rrow:last-of-type {border-bottom: 0;}
#eapp .s8 .rk {font-size: 18px; font-weight: 600;}
#eapp .s8 .rk small {font-size: 13px; font-weight: 500; color: #5C6478; margin-left: 6px;}
#eapp .s8 .rdots {flex: 1 1 auto; border-bottom: 2px dotted #D3D8E2; transform: translateY(-5px); min-width: 20px;}
#eapp .s8 .rv {font-family: 'Noto Serif KR', serif; font-size: 30px; font-weight: 900; white-space: nowrap;}
#eapp .s8 .rfoot {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #141B2D; font-size: 14px; color: #44506A;}
#eapp .s8 .rfoot b {color: #141B2D;}
#eapp .s8 .faq {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px;}
#eapp .s8 .faq details {background: #FFFFFF; border: 1px solid #E8E3D8; border-radius: 14px; padding: 0 22px;}
#eapp .s8 .faq summary {list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; padding: 20px 0; min-height: 44px;}
#eapp .s8 .faq summary::-webkit-details-marker {display: none;}
#eapp .s8 .faq .qmark {font-family: 'Noto Serif KR', serif; font-weight: 900; margin-right: 8px; color: #8A6A12;}
#eapp .s8 .faq p {margin: 0 0 20px; font-size: 15px; line-height: 1.75; color: #44506A;}
#eapp .s8 .foot {background: #141B2D; padding: 32px 0 44px;}
#eapp .s8 .footrow {display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; font-size: 14px; color: #B4BCCC;}
#eapp .s8 .footrow b {color: #FFFFFF;}
#eapp .s8 .foot a {color: #D3D9E6;}
#eapp .s8 .foot a:hover {color: #FFFFFF;}
#eapp .s8 .footlinks {display: flex; gap: 20px;}
@media (max-width: 960px) {
#eapp .s8 .hero, #eapp .s8 .price {grid-template-columns: minmax(0, 1fr); gap: 40px;}
#eapp .s8 .pillars, #eapp .s8 .gal, #eapp .s8 .faq {grid-template-columns: minmax(0, 1fr);}
#eapp .s8 .cmpin {aspect-ratio: 3 / 4;}
#eapp .s8 .pgx {width: 100%; grid-template-columns: minmax(0, 1fr);}

}
@media (max-width: 560px) {
#eapp .s8 .cta {width: 100%; justify-content: center;}
#eapp .s8 .rcpt {padding: 22px 18px;}
 }
/* HOME-M 휴대폰 ≤768 : 시연·예시는 PC에만 — 올리기·값·자주 묻는 것만 */
@media (max-width: 768px) {
#eapp .s8 .demo {display: none;}
#eapp .s8 .hero {padding-top: 26px; padding-bottom: 30px; gap: 22px;}
#eapp .s8 .h1 {font-size: min(30px, 9.2cqw); letter-spacing: -0.6px;}
#eapp .s8 .sub {font-size: 17px; margin-top: 14px;}
#eapp .s8 .sub2 {font-size: 14px;}
#eapp .s8 .cta {width: 100%; justify-content: center; padding: 16px 20px; font-size: 18px; min-height: 56px; margin-top: 22px;}
#eapp .s8 .wrap {padding: 0 16px;}
#eapp .s8 .sec {padding-top: 36px; padding-bottom: 36px;}
#eapp .s8 .h2 {font-size: 24px;}
#eapp .s8 .rk {font-size: 15px;}
#eapp .s8 .rv {font-size: 22px;}
#eapp .s8 .rrow {padding: 12px 0; flex-wrap: wrap;}
#eapp .s8 .faq summary {font-size: 15px; padding: 14px 0;}
#eapp .s8 .eyebrow {font-size: 13px; margin-bottom: 10px;}
#eapp .s8 .foot {padding: 22px 0 30px;}
#eapp .s8 .footrow {font-size: 13px;}

}