/* 모눈종이 위의 매일 훈련: 첫 화면의 연산 연습 카드가 단 하나의 주인공, 나머지는 조용하게.
   로고 4색(+ − ÷ Fx)은 과정 표지에만 쓴다. 빨간펜(손글씨)은 코치의 한마디로 세 번만. */
:root{
  --paper:#fbfcf8; --grid:#e3ece7; --grid-strong:#cddcd4;
  --ink:#1f2a44; --ink-soft:#4a566e; --line:#dfe5e1;
  --plus:#7fb52f; --minus:#0f9cc0; --divide:#f2a516; --fx:#dc2f2a; --times:#5b5fc7;
  --go:#2a7f34; --go-press:#226b2b; --kakao:#fee500; --pen:#d7322b;
  --f-body:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-pen:"Nanum Pen Script","Pretendard Variable",cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*:not(.motion-ok):not(.motion-ok *),*:not(.motion-ok):not(.motion-ok *)::before,*:not(.motion-ok):not(.motion-ok *)::after{animation:none!important;transition:none!important}}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--minus);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.pen{font-family:var(--f-pen);color:var(--pen);font-weight:400;line-height:1.1;display:inline-block}

/* 상단 */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;height:58px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:19px}
.brand img{width:30px;height:30px;border-radius:4px}
.top nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:15px;font-weight:600}
.top nav a{text-decoration:none;color:var(--ink-soft)}
.top nav a:hover{color:var(--ink)}
.top .btn-top{background:var(--go);color:#fff;padding:8px 14px;border-radius:8px}
.top .btn-top:hover{background:var(--go-press);color:#fff}
@media (max-width:760px){.top nav a:not(.btn-top){display:none}}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 24px;border-radius:12px;font-size:17px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.btn-go{background:var(--go);color:#fff}
.btn-go:hover{background:var(--go-press)}
.btn-kakao{background:var(--kakao);color:#191919}
.btn-line{background:#fff;color:var(--ink);border:1.5px solid var(--line)}

/* 첫 화면: 모눈종이 */
.hero{background-color:var(--paper);
  background-image:linear-gradient(var(--grid-strong) 1px,transparent 1px),linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-block:64px 72px}
.hero h1{font-size:clamp(34px,5.6vw,56px);font-weight:800}
.hero .note{font-size:28px;transform:rotate(-3deg);margin:14px 0 0 4px}
.hero .lead{margin-top:20px;font-size:18px;color:var(--ink-soft);max-width:34em}
.hero .lead b{color:var(--ink)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero .fine{margin-top:14px;font-size:14.5px;color:var(--ink-soft)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:36px;padding-block:40px 48px}.hero .ctas .btn{flex:1 1 220px}}

/* 연산 체험: 실제 수피온 학습 창(CalcSelf2)과 같은 모양·동작 */
.trywrap{display:flex;flex-direction:column;gap:12px;max-width:390px;width:100%;justify-self:center}
.trytabs{display:flex;gap:6px;flex-wrap:wrap}
.trytabs button{font:600 14px var(--f-body);padding:7px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.trytabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.app{background:#f8f9fb;border:2px solid var(--ink);border-radius:26px;box-shadow:8px 8px 0 var(--grid-strong);overflow:hidden;width:100%}
.app-bar{background:#0866d6;color:#fff;display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:8px;padding:12px 12px;min-height:62px}
.app-back{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
.app-title{font-weight:700;font-size:14.5px;text-align:center;line-height:1.35}
.app-body{padding:14px 16px 10px;text-align:center;position:relative}
.app-timer{font-size:46px;font-weight:800;color:#0000e6;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.02em}
.app-tbar{height:8px;margin:10px 4px 0;border-radius:4px;position:relative}
.app-tbar i{position:absolute;left:0;top:0;height:8px;border-radius:4px;background:#00ffff;width:0;transition:width .25s linear,background .25s}
.app-dots{display:flex;justify-content:center;gap:6px;margin:12px 0 4px}
.app-dots i{width:21px;height:21px;border-radius:50%;background:#b5d334}
.app-dots i.used{background:#f39a4f}
.app-retake{font-size:11px;color:#6f6f6f}
.app-q{min-height:96px;display:flex;align-items:center;justify-content:center;gap:12px;font-family:"Times New Roman",Times,serif;font-size:30px;color:#111;margin-top:6px}
.app-q:empty{min-height:12px;margin:0}
.app-q .no{font-family:var(--f-body);font-size:15px;font-weight:700;color:#1a57d6;background:#e8f0fe;border:1px solid #c9dcfb;border-radius:5px;padding:0 6px;line-height:1.5}
.app-q .cnt{color:#777}.app-q .cnt b{color:#d0021b;font-weight:400}
.app-q var{font-style:italic}
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;font-size:.82em;margin:0 2px}
.fr>span:first-child{border-bottom:1.5px solid currentColor;padding:0 4px 2px;min-width:.8em}
.fr>span:last-child{padding:2px 4px 0;min-width:.8em}
.app-ans{display:flex;justify-content:center;align-items:center;min-height:56px;margin:2px 0 8px}
.app-box{min-width:38px;min-height:40px;padding:2px 8px;border:1.5px solid #e00;border-radius:4px;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:"Times New Roman",Times,serif;font-size:26px;color:#7a0b0b}
.app-ans.flat{min-height:0;margin:0}
.app-ans.flat .app-box{display:none}
.app-q .typed{color:#7a0b0b;min-width:1em;display:inline-block;border-bottom:1.5px dashed #e7a1a1}
.app-keys{background:#ddeefc;padding:12px 14px 14px;display:grid;gap:8px}
.app-keys button{min-height:46px;border:0;border-radius:10px;background:#f4f8fd;font:600 19px var(--f-body);color:#333;cursor:pointer;touch-action:manipulation}
.app-keys button:active{background:#e3edf9}
.app-keys button.en{background:#0a7cff;color:#fff}
.app-keys button.en.bad{background:#e6007e}
.app-keys .gap{visibility:hidden}
.k3{grid-template-columns:repeat(3,1fr)}.k4{grid-template-columns:repeat(4,1fr)}.k5{grid-template-columns:repeat(5,1fr)}
.app-start{padding:4px 16px 16px}
.app-start .btn{width:100%}
.app-panel{padding:6px 18px 18px;text-align:left}
.app-panel .pen{font-size:30px;transform:rotate(-2deg);margin:4px 0 8px}
.app-panel p{font-size:15px;color:var(--ink-soft);margin-bottom:10px}
.app-panel .row{display:flex;gap:8px;flex-wrap:wrap}
.app-panel .row .btn{flex:1 1 150px;min-height:48px;font-size:15.5px}
.app-panel .rec{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:15px;margin:2px 0 12px;font-variant-numeric:tabular-nums}
.app-panel .rec b{color:var(--ink)}
.gdot{display:inline-block;width:11px;height:11px;border-radius:50%;margin:0 5px 0 2px;vertical-align:0;border:1px solid rgba(0,0,0,.15)}
.try-note{font-size:13.5px;color:var(--ink-soft)}

/* 반복 효과 (실제 기록) */
.effect{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;align-items:end}
.echart{margin:0}
.ebars{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:end;height:220px;border-bottom:2px solid var(--ink);padding:0 4px}
.ebars div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;min-width:0}
.ebars b{font-size:15px;font-variant-numeric:tabular-nums}
.ebars i{display:block;width:100%;max-width:58px;background:#f39a4f;border-radius:6px 6px 0 0}
.ebars-x{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;text-align:center;font-size:14px;color:var(--ink-soft);margin-top:8px;padding:0 4px}
.echart figcaption{margin-top:10px;font-weight:600}
.estats{display:flex;flex-direction:column;gap:18px}
.estat{border-left:4px solid var(--go);padding:2px 0 2px 16px}
.estat span{display:block;color:var(--ink-soft);font-size:15px}
.estat strong{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.estats .pen{font-size:29px;transform:rotate(-2deg)}
@media (max-width:820px){.effect{grid-template-columns:1fr;gap:32px}}
.compare{grid-template-columns:minmax(0,760px)!important}

/* 섹션 공통 */
section{padding-block:84px}
section + section{border-top:1px solid var(--line)}
.sec-head{max-width:640px;margin-bottom:36px}
.sec-head h2{font-size:clamp(27px,3.6vw,38px);font-weight:800}
.sec-head p{margin-top:12px;color:var(--ink-soft)}
@media (max-width:640px){section{padding-block:60px}}

/* 학년 고르기 */
.grades{display:flex;flex-wrap:wrap;gap:8px}
.grades button{font:600 16px var(--f-body);padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.grades button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.reco{margin-top:24px;border:2px solid var(--ink);border-radius:16px;padding:26px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:end;background:var(--paper)}
.reco h3{font-size:22px}
.reco ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.reco li{display:flex;gap:10px;align-items:baseline}
.reco .why{color:var(--ink-soft);font-size:15.5px}
.reco .hint{grid-column:1/-1;font-size:14px;color:var(--ink-soft)}
@media (max-width:700px){.reco{grid-template-columns:1fr}.reco .btn{width:100%}}

/* 과정 표지 (로고 기호) */
.sym{flex:none;width:28px;height:28px;border-radius:6px;color:#fff;font-weight:800;font-size:17px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.s-calc{background:var(--plus)} .s-think{background:var(--minus)} .s-concept{background:var(--divide)} .s-middle{background:var(--times)} .s-func{background:var(--fx);font-size:13px}

/* 1년 문제 수 비교 */
.compare{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:start}
.bars{display:flex;flex-direction:column;gap:22px}
.bar-row .label{display:flex;justify-content:space-between;gap:12px;font-weight:700;margin-bottom:8px}
.bar-row .label span:last-child{font-variant-numeric:tabular-nums}
.bar{height:34px;background:#f1f4f2;border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px}
.bar-book i{background:#9aa5a0;width:10%}
.bar-soop i{background:var(--go);width:100%}
.bar-row small{display:block;margin-top:6px;color:var(--ink-soft);font-size:14.5px}
.compare .pen{font-size:30px;transform:rotate(-2deg);margin-top:4px}
.table-mini{width:100%;border-collapse:collapse;margin-top:28px;font-size:15.5px;font-variant-numeric:tabular-nums}
.table-mini th,.table-mini td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right}
.table-mini th:first-child,.table-mini td:first-child{text-align:left}
.table-mini th{color:var(--ink-soft);font-weight:600}
.results{display:flex;flex-direction:column;gap:18px}
.result{border-left:4px solid var(--go);padding:4px 0 4px 18px}
.result strong{display:block;font-size:44px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.result span{color:var(--ink-soft);font-size:15.5px}
.src{font-size:13.5px;color:var(--ink-soft);margin-top:18px}
@media (max-width:820px){.compare{grid-template-columns:1fr;gap:36px}}

/* 여섯 과정: 줄 전체가 상세 페이지 링크 */
.courses{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.courses li{border-bottom:1px solid var(--line)}
.courses .crow{display:grid;grid-template-columns:48px minmax(0,220px) minmax(0,1fr) auto;gap:8px 20px;align-items:center;padding:22px 12px;margin:0 -12px;border-radius:12px;color:inherit;text-decoration:none;transition:background-color .15s}
.courses .crow:hover{background:var(--paper)}
.courses .crow:focus-visible{outline-offset:-3px}
.courses .sym{width:40px;height:40px;font-size:22px;border-radius:9px}
.courses .s-func{font-size:16px}
.courses h3{font-size:21px}
.courses .desc{color:var(--ink-soft);font-size:16px}
.courses .desc b{color:var(--ink);font-weight:600}
.courses .go{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;white-space:nowrap}
.courses .go i{display:inline-block;width:9px;height:9px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);font-size:0;transform:rotate(-45deg);transition:transform .15s}
.courses .crow:hover .go i{transform:translateX(3px) rotate(-45deg)}
@media (max-width:760px){.courses .crow{grid-template-columns:44px minmax(0,1fr) 28px;align-items:start;margin:0;padding:20px 0}.courses .sym,.courses h3{align-self:center}.courses .desc{grid-column:2}.courses .go{grid-column:3;grid-row:1/span 2;align-self:center;justify-self:end}.courses .go span{display:none}.courses .go i{width:11px;height:11px;margin-right:6px}}

/* 학습 관리 */
.coach{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.coach-shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}
.coach-shots figure{margin:0}
.coach-shots figcaption{font-size:14px;color:var(--ink-soft);text-align:center;margin-top:6px}
.coach-shots .pen{grid-column:1/-1;justify-self:start;font-size:30px;transform:rotate(-2deg);margin-bottom:-4px}
.coach ol{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:18px;counter-reset:c}
.coach li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px}
.coach li::before{counter-increment:c;content:counter(c);width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.coach li b{display:block;font-size:18px}
.coach li span{color:var(--ink-soft);font-size:16px}
@media (max-width:860px){.coach{grid-template-columns:1fr}.coach-shots{max-width:440px;margin:24px auto 0}}

/* 영상 */
.videos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.yt{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;max-width:100%}
.yt button{all:unset;cursor:pointer;position:absolute;inset:0;display:block}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.9}
.yt .play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;background:#e62117;border-radius:12px;display:flex;align-items:center;justify-content:center}
.yt .play::after{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videos h3{font-size:17px;margin-top:10px;font-weight:600}
@media (max-width:700px){.videos{grid-template-columns:1fr}}

/* 후기 */
.reviews{columns:2 320px;column-gap:20px}
.review{break-inside:avoid;margin:0 0 20px;padding:22px 22px 18px;border:1px solid var(--line);border-radius:14px;background:#fff}
.review blockquote{margin:0;font-size:19px;font-weight:500;line-height:1.55}
.review footer{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:14.5px;color:var(--ink-soft)}
.review footer a{margin-left:auto;font-weight:600;color:var(--ink)}
.more{margin-top:8px}

/* 체험 안내 */
.trial{background:var(--paper)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:s}
.steps li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.steps li::before{counter-increment:s;content:counter(s) "단계";display:block;font-weight:800;color:var(--go);margin-bottom:8px}
.steps b{display:block;font-size:18px;margin-bottom:6px}
.steps span{color:var(--ink-soft);font-size:15.5px}
.promise{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px 28px;font-weight:600}
.promise span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--go);margin-right:9px;vertical-align:1px}
.trial .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
@media (max-width:980px){.steps{grid-template-columns:1fr}.steps li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:2px 12px;padding:16px 18px}.steps li::before{grid-row:span 2;margin:2px 0 0}}
@media (max-width:520px){.steps{grid-template-columns:1fr}.trial .ctas .btn{flex:1 1 100%}}

/* FAQ */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 36px 20px 0;font-weight:700;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:26px;font-weight:400;color:var(--ink-soft)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 20px;color:var(--ink-soft)}

/* 하단 */
.site-foot{background:#f4f6f5;border-top:1px solid var(--line);padding-block:40px 120px;font-size:14px;color:var(--ink-soft)}
.site-foot .links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:16px;font-weight:600;color:var(--ink)}
.site-foot .links a{text-decoration:none}
.site-foot .links a:hover{text-decoration:underline}
.site-foot .corp-intro{color:var(--ink);font-size:15px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.site-foot address{font-style:normal;line-height:2}
.site-foot .corp span{display:inline-block;margin-right:22px}
.site-foot .corp b{color:var(--ink);font-weight:700;margin-right:6px}

/* 휴대폰 하단 고정 바 */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;gap:8px;padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(31,42,68,.08)}
.dock .btn{flex:1;min-height:50px;font-size:16px;padding:0 10px}
.dock .btn-kakao{flex:0 0 38%}
@media (max-width:760px){.dock{display:flex;transform:translateY(115%);transition:transform .25s ease}.dock.on{transform:none}.top .btn-top{display:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 261016 실측 결과(300%·150%)와 문제 수 비교 */
.r300{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:40px}
.result small{display:block;font-size:14px;color:var(--ink-soft);margin-top:6px;line-height:1.55}
.sub-h{font-size:21px;margin:0 0 20px}
.grounds{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px;font-size:20px;font-weight:800}
.grounds b{color:var(--go)}
@media (max-width:640px){.r300{grid-template-columns:1fr}}

/* 261016 모든 방향은 고등 · 기본기는 수피온 */
.why3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.why-card{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff;display:flex;flex-direction:column;gap:10px;min-width:0}
.why-card h3{font-size:19px}
.why-card p{color:var(--ink-soft);font-size:15.5px}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}
.role{border:1.5px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:6px;background:#fff}
.role b{font-size:17px}
.role span{font-size:19px;font-weight:800}
.role small{color:var(--ink-soft);font-size:14.5px}
.role-soop{border-color:var(--go);background:var(--paper)}
.role-soop span{color:var(--go)}
.base4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.base4>div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 10px;min-width:0}
.base4 h3{font-size:18px}
.base4 p{grid-column:1/-1;color:var(--ink-soft);font-size:15px}
.promise-line{margin-top:30px;font-size:clamp(19px,2.6vw,23px);font-weight:700}
.promise-line b{color:var(--go)}
.note-line{margin-top:8px;color:var(--ink-soft)}
@media (max-width:900px){.why3{grid-template-columns:1fr}.base4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.roles{grid-template-columns:1fr}.base4{grid-template-columns:1fr}}

/* ===== 과정 상세 페이지 공통 (연산·함수·사고력·개념·중등) ===== */
.c-hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.c-hero .kicker{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink-soft);margin-bottom:14px}
.c-hero .kicker .sym{width:34px;height:34px;font-size:20px;border-radius:8px}
.c-hero .yt{box-shadow:8px 8px 0 var(--grid-strong);border:2px solid var(--ink)}
.c-hero figcaption{font-size:14px;color:var(--ink-soft);margin-top:8px}
@media (max-width:860px){.c-hero .wrap{grid-template-columns:1fr}}
.reasons{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.reason{border:1px solid var(--line);border-radius:14px;padding:20px;background:#fff;display:flex;flex-direction:column;gap:8px;min-width:0}
.reason h3{font-size:18.5px;color:#1a63c7;display:flex;align-items:center;gap:8px}
.reason h3::before{content:"";width:14px;height:8px;border-left:3px solid var(--pen);border-bottom:3px solid var(--pen);transform:rotate(-45deg) translateY(-3px);flex:none}
.reason p{font-size:15.5px;color:var(--ink-soft)}
.vids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:620px){.vids{grid-template-columns:1fr}}
.why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.why .big{font-size:clamp(22px,3vw,28px);font-weight:800;line-height:1.45}
.why .big b{color:var(--pen)}
.why p{color:var(--ink-soft);margin-top:14px}
.why p b{color:var(--ink)}
.why img{border-radius:12px}
@media (max-width:820px){.why{grid-template-columns:1fr}}
.steps6{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;counter-reset:s6}
.steps6 li{border:1.5px solid var(--line);border-radius:12px;padding:16px 10px;text-align:center;font-weight:700;font-size:16.5px;background:#fff;position:relative}
.steps6 li::before{counter-increment:s6;content:counter(s6);display:flex;width:30px;height:30px;margin:0 auto 8px;border-radius:50%;background:#ea2f5b;color:#fff;align-items:center;justify-content:center;font-size:15px}
@media (max-width:820px){.steps6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.core{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.core div{border-radius:14px;padding:22px;background:var(--paper);border:1px solid var(--line)}
.core b{display:block;font-size:22px;color:#ea2f5b}
.core span{color:var(--ink-soft)}
@media (max-width:560px){.core{grid-template-columns:1fr}}
.challenge{border:2px solid var(--ink);border-radius:18px;padding:26px;background:#fff;box-shadow:8px 8px 0 var(--grid-strong);text-align:center;max-width:460px}
.challenge .q{font-family:"Times New Roman",Times,serif;font-size:42px;display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0}
.challenge .fr{font-size:.9em}
.challenge .ans{color:#ea2f5b;min-width:1.4em}
.challenge .cd{font-size:15px;color:var(--ink-soft);min-height:24px}
.challenge .pen{font-size:30px}
.chain{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chain li{background:#d41f4c;color:#fff;font-weight:700;border-radius:999px;padding:10px 18px;font-size:16px}
.chain li+li::before{content:"";display:inline-block}
.chain .to{background:none;color:var(--ink-soft);padding:0 2px;font-weight:400}
.hstrip{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,420px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.hstrip>*{scroll-snap-align:start;margin:0}
.hstrip img{border-radius:10px;border:1px solid var(--line);width:100%;height:auto;display:block;background:#f1f4f2}
.hstrip figcaption{font-size:14px;color:var(--ink-soft);margin-top:6px}
.hstrip.tall{grid-auto-columns:min(62%,260px)}
.strip-hint{font-size:13.5px;color:var(--ink-soft);margin-top:4px}
.grounds{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px;font-size:20px;font-weight:800}
.grounds b{color:#ea2f5b}
.audios{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:8px}
.audios figure{margin:0;border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;display:flex;flex-direction:column;gap:10px}
.audios figcaption{font-weight:700}
.audios audio{width:100%}
.others{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.others a{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px 8px 8px;text-decoration:none;font-weight:600}
.cta-band{background:var(--paper)}
.cta-band .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.tag-chip{display:inline-block;font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink-soft)}
.cmp{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.cmp table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px}
.cmp th,.cmp td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp tr:last-child td{border-bottom:0}
.cmp th{font-size:14px;color:var(--ink-soft);background:var(--paper);font-weight:600}
.cmp td.n{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.cmp .yes{color:var(--go);font-weight:800}
.cmp .no{color:#6b7772}
.stepsN{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:sn}
.stepsN>li{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:#fff;display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 16px}
.stepsN>li::before{counter-increment:sn;content:counter(sn);grid-row:span 3;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:17px}
.stepsN h3{font-size:19px}
.stepsN p{color:var(--ink-soft);font-size:15.5px}
.stepsN .meta{font-size:14px;color:var(--ink-soft)}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cards3>div,.cards4>div,.cards2>div{border:1px solid var(--line);border-radius:14px;padding:20px;background:#fff;display:flex;flex-direction:column;gap:8px;min-width:0}
.cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cards3 h3,.cards4 h3,.cards2 h3{font-size:18px}
.cards3 p,.cards4 p,.cards2 p{color:var(--ink-soft);font-size:15.5px}
.big-num{font-size:40px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
@media (max-width:900px){.cards3,.cards4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards3,.cards4,.cards2{grid-template-columns:1fr}}

/* ---------- 10-16 보강: 문장제 표지 · 과정 학년 범위 ---------- */
.s-word{background:#2a9d8f}
.courses .range{display:block;font-size:13.5px;font-weight:600;color:var(--ink-soft);margin-top:4px;letter-spacing:0}
@media (max-width:760px){.courses .range{display:inline-block;margin:0 0 0 8px;vertical-align:2px}}

/* 메인: 왜 5,500개 (ib-) — 400 막대는 5,570 대비 실제 비율 */
.ib{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.ib-row{display:grid;grid-template-columns:120px minmax(0,1fr) 96px;gap:14px;align-items:center}
.ib-label{font-weight:700;font-size:15.5px}
.ib-num{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;font-size:18px}
.ib-bar{height:40px;border-radius:8px;background:#eef2f0;display:flex;overflow:hidden}
.ib-bar i{display:flex;align-items:center;justify-content:center;color:#fff;font-style:normal;font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;min-width:0}
.ib-bar .k-plain{background:#9aa5a0;flex:none}
.ib-bar .k-calc{background:var(--plus);color:var(--ink)} .ib-bar .k-word{background:#2a9d8f} .ib-bar .k-think{background:var(--minus)} .ib-bar .k-mid{background:var(--times)} .ib-bar .k-fx{background:var(--fx)}
.ib-legend{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px;color:var(--ink-soft)}
.ib-legend li{display:flex;align-items:center;gap:8px}
.ib-legend b{color:var(--ink)}
.ib-legend .sym{width:24px;height:24px;font-size:14px;border-radius:5px}
.ib-note{margin-top:22px;max-width:760px;color:var(--ink-soft)}
.ib-note b{color:var(--ink)}
@media (max-width:560px){.ib-row{grid-template-columns:1fr auto}.ib-num{grid-column:2;grid-row:1}.ib-bar{grid-column:1/-1}.ib-bar i span{display:none}}

/* 연산: 보자마자 나와야 하는 답 (fl-) */
.fl4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fl4>div{border:1px solid var(--line);border-radius:14px;padding:20px;background:#fff;display:flex;flex-direction:column;gap:10px;min-width:0}
.fl4>.fl-main{border:2px solid var(--ink)}
.fl4 h3{font-size:18px;display:flex;align-items:center;gap:8px}
.fl4 p{color:var(--ink-soft);font-size:15px}
.fl-ex{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fl-ex li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:"Times New Roman",Times,serif;font-size:21px;background:var(--paper);border-radius:8px;padding:6px 12px}
.fl-ex .to{font-family:var(--f-body);color:var(--ink-soft);font-size:14px}
.fl-ex b{color:var(--go)}
.fl4 a{font-weight:600;font-size:15px;margin-top:auto;text-underline-offset:3px}
@media (max-width:560px){.fl4{grid-template-columns:1fr}}

/* 연산: 2026 단원표 접기 */
.unit-more{margin-top:24px;border:1px solid var(--line);border-radius:14px;background:#fff}
.unit-more summary{cursor:pointer;list-style:none;padding:16px 48px 16px 20px;font-weight:700;font-size:17px;position:relative}
.unit-more summary::-webkit-details-marker{display:none}
.unit-more summary::after{content:"+";position:absolute;right:18px;top:11px;font-size:24px;font-weight:400;color:var(--ink-soft)}
.unit-more[open] summary::after{content:"−"}
.unit-more .cmp{margin:0 16px 16px}

/* 연산: 자가 진단 (sc-) */
.sc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.sc-timer{border:2px solid var(--ink);border-radius:16px;padding:22px;background:#fff;display:flex;flex-direction:column;gap:8px}
.sc-timer h3{font-size:19px}
.sc-goal{color:var(--ink-soft);font-size:15px}
.sc-time{font-size:46px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
.sc-res{min-height:1.7em;font-weight:700}
.sc-res.ok{color:var(--go)} .sc-res.no{color:var(--pen)}
.sc-timer .btn{align-self:flex-start}
.sc-list{grid-column:1/-1;border:1px solid var(--line);border-radius:16px;padding:14px 22px;background:var(--paper)}
.sc-list label{display:flex;gap:12px;align-items:flex-start;padding:8px 0;font-size:16.5px;cursor:pointer}
.sc-list input{width:22px;height:22px;margin-top:3px;accent-color:var(--go);flex:none}
.sc-list .sc-goal{display:block;font-size:14.5px}
.sc-sum{grid-column:1/-1;border:2px solid var(--ink);border-radius:16px;padding:22px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;background:#fff}
.sc-sum p{font-size:18px;font-weight:700;max-width:620px}
.sc-sum .sc-score{display:block;font-size:15px;color:var(--ink-soft);font-weight:600;margin-bottom:4px}
@media (max-width:700px){.sc{grid-template-columns:1fr}.sc-sum .btn{width:100%}}

/* 효과: 평가 5단계 비율 이동 (gs-) — 색은 학습 화면 시간 막대와 같다 */
.gs-lead{color:var(--ink-soft);margin:-6px 0 18px;max-width:720px}
.gshift{margin:0}
.gs-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:10px}
.gs-label{font-weight:700;font-size:15px}
.gs-bar{display:flex;height:36px;border-radius:8px;overflow:hidden;background:#eef2f0}
.gs-bar i,.gs-legend i{display:block;min-width:0}
.g5{background:#00ffff}.g4{background:#b3dd02}.g3{background:#fff656}.g2{background:#f89a5b}.g1{background:#EC008C}.g0{background:#9aa5a0}
.gs-legend{list-style:none;margin:16px 0 8px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px;gap:8px 18px;font-size:14.5px;color:var(--ink-soft)}
.gs-legend li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.gs-legend i{width:12px;height:12px;border-radius:3px;flex:none}
.gs-legend b{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.gshift figcaption{font-size:13.5px;color:var(--ink-soft)}
.estat small{display:block;font-size:14px;color:var(--ink-soft);margin-top:2px}
@media (max-width:560px){.gs-legend{gap:8px 12px;font-size:13.5px}.gs-row{grid-template-columns:84px minmax(0,1fr)}}

/* 첫 화면: 수학 자기화 + 고등까지 쌓는 기본기 */
.self-badge{display:inline-block;font-weight:800;font-size:15px;color:var(--go);background:#e5f2e6;border-radius:999px;padding:6px 14px;margin-bottom:16px}
.self-line{margin-top:20px;font-size:clamp(25px,3.4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.35}
.self-line .strike{position:relative;color:var(--ink-soft)}
.self-line .strike::after{content:"";position:absolute;left:-6%;right:-6%;top:50%;height:4px;border-radius:2px;background:var(--pen);transform:rotate(-8deg)}
.self-line .pen{font-size:1.45em;transform:rotate(-3deg);margin-left:4px;vertical-align:-2px}
.self-def{margin-top:4px;font-size:15.5px;color:var(--ink-soft)}
.hero-proof{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero-proof a{display:inline-flex;align-items:baseline;gap:5px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:14.5px;color:var(--ink-soft);text-decoration:none}
.hero-proof a:hover{border-color:var(--ink)}
.hero-proof b{color:var(--ink);font-size:16px}
.iso{margin:0;max-width:460px;width:100%;justify-self:center}
.iso-svg{width:100%;height:auto;display:block}
.iso-svg text{font-family:var(--f-body)}
.iso-legend{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.iso-legend li{display:grid;grid-template-columns:26px auto minmax(0,1fr);align-items:center;gap:4px 10px}
.iso-legend .n{width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:#fff}
.iso-legend b{font-size:16.5px;white-space:nowrap}
.iso-legend span:last-child{font-size:14px;color:var(--ink-soft)}
.iso figcaption{margin-top:12px;font-size:14.5px;color:var(--ink-soft)}
.iso figcaption b{color:var(--ink)}
@keyframes isoRise{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes isoFade{from{opacity:0}to{opacity:1}}
.iso-soil,.iso-f1{animation:isoFade .5s ease-out both}
.iso-f2{animation:isoRise .55s .25s cubic-bezier(.2,.8,.3,1) both}
.iso-f3{animation:isoRise .55s .55s cubic-bezier(.2,.8,.3,1) both}
.iso-mark{animation:isoFade .4s .95s both}
@media (max-width:560px){.iso-legend li{grid-template-columns:26px minmax(0,1fr)}.iso-legend span:last-child{grid-column:2}}
.try-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,390px);gap:48px;align-items:center}
@media (max-width:860px){.try-sec{grid-template-columns:1fr;gap:28px}}

/* 메인 타이틀: 이해(빨간펜으로 긋기)가 아닌 자기화(빨간펜 밑줄) */
.hero h1 .strike{position:relative;color:var(--ink-soft)}
.hero h1 .strike::after{content:"";position:absolute;left:-7%;right:-7%;top:31%;height:.42em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath fill='%23d7322b' d='M1.5 11.6C2 10.4 5 10.2 12 10.1C40 9.6 70 9.4 100 8.4C130 7.5 160 6.8 186 5.6C192 5.3 197 4.6 199 4.9C199.6 5.6 196 6.8 190 7.5C165 9.4 135 10.8 102 11.9C72 12.9 42 13.4 14 14.3C6 14.6 1.2 13.4 1.5 11.6Z'/%3E%3C/svg%3E") no-repeat center/100% 100%;transform:rotate(-7deg);animation:penDraw .42s cubic-bezier(.3,.7,.4,1) .35s both}
.hero h1 .self-word{position:relative;white-space:nowrap}
.hero h1 .self-word::after{content:"";position:absolute;left:-3%;right:-4%;bottom:-.2em;height:.3em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath fill='%23d7322b' d='M2.5 8.6C3.5 6.8 9 7.4 20 8.6C55 11.6 100 12.3 145 10.6C166 9.8 183 7.6 195 3.6C198 2.8 199.6 4 198.4 5.6C190 11.4 171 14.6 147 15.8C101 18 54 17.4 18 14.6C8 13.8 1.6 11.6 2.5 8.6Z'/%3E%3C/svg%3E") no-repeat center/100% 100%;opacity:.95;animation:penDraw .5s cubic-bezier(.3,.7,.4,1) .95s both}
@keyframes penDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} /* 펜으로 왼쪽에서 오른쪽으로 긋는 느낌 */
.hero-sub{margin-top:14px;font-size:clamp(24px,3.3vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.hero .self-def{margin-top:10px}

.hero-note{margin-top:14px;padding:2px 0 2px 14px;border-left:4px solid var(--fx);font-size:16.5px;line-height:1.65;color:var(--ink-soft);max-width:34em}
.hero-note b{color:var(--ink)}
.hero .hero-note + .self-def{margin-top:14px}

/* 자기화 이야기 플레이어 (영상처럼 자동 재생) */
.player2{max-width:760px;margin:0 auto;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(31,42,68,.10)}
.player2 .story-stage{position:relative;padding:14px 14px 4px;background:#fff}
.story-svg{width:100%;height:auto;display:block}
.story-svg text{font-family:var(--f-body)}
.story-svg .st-pen{font-family:var(--f-pen)}
.sp-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:800 16px/1.2 var(--f-body);box-shadow:0 10px 26px rgba(31,42,68,.32);cursor:pointer;white-space:nowrap}
.sp-big:hover{background:#2b3a5c}
.player2.silent .sp-big{left:auto;top:auto;right:14px;bottom:10px;transform:none;padding:10px 16px;font-size:14px;box-shadow:0 6px 16px rgba(31,42,68,.25)}
@media (max-width:420px){.player2.silent .sp-big{right:8px;bottom:8px;padding:8px 12px;font-size:12.5px;gap:6px}}
.sp-ico{width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.sp-cap{margin:0;min-height:5.2em;padding:14px 20px;background:var(--ink);color:#fff;font-size:17px;line-height:1.6;font-weight:600}
.sp-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f6f8f7}
.player2.voice-on .sp-cap{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* 소리 켜고 볼 때는 자막 띠를 숨긴다(화면 낭독기에는 남김) */
.player2.ended .story-svg .fin{opacity:0!important} /* 끝나면 체험 버튼이 손글씨 자리에 뜬다 */
.sp-btn{flex:none;height:40px;padding:0 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:700 14px var(--f-body);cursor:pointer}
#spSound{background:var(--ink);border-color:var(--ink);color:#fff}
#spSound[aria-pressed="true"]{background:#fff;border-color:var(--go);color:var(--go)}
.sp-vrow{padding:8px 12px;background:#f6f8f7;border-top:1px dashed var(--line);font:700 13px var(--f-body);color:var(--ink)}.sp-vrow span{margin-right:8px;color:#4a566e}.sp-vb{height:34px;padding:0 12px;margin-right:6px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:700 13px var(--f-body);cursor:pointer}.sp-vrow em{font-style:normal;font-weight:600;color:#7a8499;margin-left:4px}
.sp-vb.on{border-color:var(--go);color:var(--go);box-shadow:inset 0 0 0 1px var(--go)}
.sp-seg{flex:1;display:flex;gap:5px;min-width:0}
.sp-seg button{flex:1;position:relative;height:26px;padding:0;border:0;background:none;cursor:pointer}
.sp-seg button::before,.sp-seg button::after{content:"";position:absolute;left:0;right:0;top:9px;height:8px;border-radius:4px}
.sp-seg button::before{background:#dfe5e1}
.sp-seg button.done::before{background:var(--go)}
.sp-seg button.on::after{background:var(--go);transform-origin:left center;animation:spFill var(--dur,5s) linear forwards}
.sp-seg.paused button.on::after{animation-play-state:paused}
@keyframes spFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sp-script{max-width:760px;margin:14px auto 0;border-bottom:1px solid var(--line)}
.sp-script summary{cursor:pointer;padding:12px 0;font-weight:700;color:var(--ink-soft)}
.sp-script ol{margin:0 0 14px;padding-left:22px;color:var(--ink-soft);display:flex;flex-direction:column;gap:6px}
@media (max-width:560px){.sp-cap{font-size:15.5px;padding:12px 14px}.sp-bar{gap:6px;padding:8px}.sp-btn{padding:0 10px;font-size:13px}.sp-big{font-size:15px;padding:12px 18px}}
.story-stage.gsap-on .story-svg *{transition:none!important;animation:none!important} /* GSAP 이 움직일 때는 CSS 전환·지연(요소별 transition-delay)을 모두 끈다 */
/* 장면 전환 — GSAP(js/story-fx.js)이 없을 때의 예비 동작 (data-scene 1~11): 1 체화 2 운동·학습 3 요령≠실력 4 어색함 5 고등 기초 6 두 방식 7 고등에서 차이 8 진짜 실력 9 많은 양? 10 수피온 11 20분 400문제 */
.story-stage:not(.gsap-on) .story-svg .sc,.story-stage:not(.gsap-on) .story-svg .st-ground{opacity:0;transition:opacity .5s}
.story-stage:not(.gsap-on)[data-scene="1"] .sc1,.story-stage:not(.gsap-on)[data-scene="2"] .sc2,.story-stage:not(.gsap-on)[data-scene="3"] .scA,.story-stage:not(.gsap-on)[data-scene="4"] .scB,.story-stage:not(.gsap-on)[data-scene="5"] .sc3,.story-stage:not(.gsap-on)[data-scene="6"] .sc45,.story-stage:not(.gsap-on)[data-scene="7"] .sc45,.story-stage:not(.gsap-on)[data-scene="8"] .sc45,.story-stage:not(.gsap-on)[data-scene="5"] .st-ground,.story-stage:not(.gsap-on)[data-scene="6"] .st-ground,.story-stage:not(.gsap-on)[data-scene="7"] .st-ground,.story-stage:not(.gsap-on)[data-scene="8"] .st-ground,.story-stage:not(.gsap-on)[data-scene="9"] .scC,.story-stage:not(.gsap-on)[data-scene="10"] .scD,.story-stage:not(.gsap-on)[data-scene="11"] .scE,.story-stage:not(.gsap-on)[data-scene="12"] .scF{opacity:1}
.story-stage:not(.gsap-on) .story-svg .st-soil{transition:opacity .6s .2s}
.story-stage:not(.gsap-on)[data-scene="7"] .st-soil,.story-stage:not(.gsap-on)[data-scene="8"] .st-soil{opacity:.32}
.story-stage:not(.gsap-on) .story-svg .bar,.story-stage:not(.gsap-on) .story-svg .prog{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.story-stage:not(.gsap-on)[data-scene="1"] .bar,.story-stage:not(.gsap-on)[data-scene="2"] .prog{transform:none}
.story-stage:not(.gsap-on) .story-svg .done{opacity:0;transition:opacity .4s}
.story-stage:not(.gsap-on)[data-scene="2"] .done{opacity:1}
.story-stage:not(.gsap-on) .story-svg .wheel{transform-box:fill-box;transform-origin:center}
.story-stage:not(.gsap-on)[data-scene="2"] .wheel{animation:stSpin 1.1s linear infinite}
.story-stage:not(.gsap-on) .story-svg .key-hit{opacity:0}
.story-stage:not(.gsap-on)[data-scene="2"] .key-hit{animation:stKey 1s ease-in-out infinite}
.story-stage:not(.gsap-on)[data-scene="2"] .ans56{animation:stPop 1.6s ease-in-out infinite}
@keyframes stSpin{to{transform:rotate(360deg)}}
@keyframes stKey{0%,100%{opacity:0}40%,60%{opacity:.9}}
@keyframes stPop{0%,30%{opacity:0}45%,100%{opacity:1}}
.story-stage:not(.gsap-on)[data-scene="3"] .tapk{animation:stTap 1.4s ease-in-out infinite}
.story-stage:not(.gsap-on) .story-svg .tk1{animation-delay:.35s!important}.story-stage:not(.gsap-on) .story-svg .tk2{animation-delay:.7s!important}.story-stage:not(.gsap-on) .story-svg .tk3{animation-delay:1.05s!important}
@keyframes stTap{0%,100%{fill:#dfe5e1}20%{fill:#2a7f34}}
.story-stage:not(.gsap-on) .story-svg .wob{transform-box:fill-box;transform-origin:center}
.story-stage:not(.gsap-on)[data-scene="4"] .wob{animation:stWob .9s ease-in-out infinite}
@keyframes stWob{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-4px) rotate(-8deg)}75%{transform:translateX(4px) rotate(8deg)}}
.story-stage:not(.gsap-on) .story-svg .fl3{opacity:0;transform:translateY(-40px);transition:transform .6s cubic-bezier(.2,.8,.3,1),opacity .5s}
.story-stage:not(.gsap-on)[data-scene="5"] .fl3{opacity:1;transform:none}
.story-stage:not(.gsap-on) .story-svg .hi{opacity:0;transform:translateY(-50px);transition:transform .6s cubic-bezier(.2,.8,.3,1),opacity .5s}
.story-stage:not(.gsap-on)[data-scene="7"] .hi{opacity:1;transform:none;transition-delay:.5s}
.story-stage:not(.gsap-on)[data-scene="8"] .hi{opacity:1;transform:none}
.story-stage:not(.gsap-on) .story-svg .bldR{transform-origin:280px 250px;transition:transform .8s ease,opacity .6s}
.story-stage:not(.gsap-on)[data-scene="7"] .bldR{transform:rotate(6deg);transition-delay:1.2s}
.story-stage:not(.gsap-on)[data-scene="8"] .bldR{transform:rotate(6deg);opacity:.25}
.story-stage:not(.gsap-on) .story-svg .crack,.story-stage:not(.gsap-on) .story-svg .lbl5,.story-stage:not(.gsap-on) .story-svg .lbl5b,.story-stage:not(.gsap-on) .story-svg .lbl6,.story-stage:not(.gsap-on) .story-svg .tag{transition:opacity .5s}
.story-stage:not(.gsap-on) .story-svg .crack,.story-stage:not(.gsap-on) .story-svg .lbl5,.story-stage:not(.gsap-on) .story-svg .lbl5b,.story-stage:not(.gsap-on) .story-svg .lbl6{opacity:0}
.story-stage:not(.gsap-on)[data-scene="7"] .crack{opacity:1;transition-delay:1.5s}
.story-stage:not(.gsap-on)[data-scene="8"] .crack,.story-stage:not(.gsap-on)[data-scene="8"] .lbl5{opacity:1}
.story-stage:not(.gsap-on)[data-scene="7"] .lbl5{opacity:1;transition-delay:.4s}
.story-stage:not(.gsap-on)[data-scene="7"] .lbl5b{opacity:1;transition-delay:1.8s}
.story-stage:not(.gsap-on)[data-scene="8"] .tag{opacity:0}
.story-stage:not(.gsap-on)[data-scene="8"] .lbl6{opacity:1;transition-delay:.3s}
.story-stage:not(.gsap-on) .story-svg .book{opacity:0;transform:translateY(-30px);transition:transform .5s cubic-bezier(.2,.8,.3,1),opacity .4s}
.story-stage:not(.gsap-on)[data-scene="9"] .book{opacity:1;transform:none}
.story-stage:not(.gsap-on) .story-svg .hand1{transform-origin:385px 130px}
.story-stage:not(.gsap-on)[data-scene="9"] .hand1{animation:stSpin 2s linear infinite}
.story-stage:not(.gsap-on)[data-scene="10"] .fly{animation:stFly 2.4s ease-in infinite}
.story-stage:not(.gsap-on) .story-svg .f1{animation-delay:.6s!important}.story-stage:not(.gsap-on) .story-svg .f2{animation-delay:1.2s!important}.story-stage:not(.gsap-on) .story-svg .f3{animation-delay:1.8s!important}
@keyframes stFly{0%{transform:translateX(0);opacity:1}70%{opacity:1}100%{transform:translateX(160px);opacity:0}}
.story-stage:not(.gsap-on) .story-svg .okmark{transform-box:fill-box;transform-origin:center}
.story-stage:not(.gsap-on)[data-scene="10"] .okmark{animation:stOk 1.2s ease-in-out infinite}
@keyframes stOk{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.story-stage:not(.gsap-on) .story-svg .pot{transform:scaleY(.08);transform-box:fill-box;transform-origin:center bottom;transition:transform 2.6s cubic-bezier(.25,.8,.3,1)}
.story-stage:not(.gsap-on)[data-scene="11"] .pot{transform:none}
.sp-cta{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:999px;background:var(--go);color:#fff;font:800 16px/1.2 var(--f-body);text-decoration:none;box-shadow:0 10px 24px rgba(42,127,52,.35);white-space:nowrap}
.sp-cta:hover{background:var(--go-press);color:#fff}
/* 오리지널 띠 */
.original{background:var(--ink);color:#fff}
.orig-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 48px;align-items:center}
.orig-year{font-weight:800;font-size:22px;color:#ffd36b;line-height:1}
.orig-year span{display:block;font-size:clamp(56px,8vw,88px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.original h2{font-size:clamp(26px,3.6vw,38px);font-weight:800}
.original p{margin-top:10px;color:#d6dbe6;max-width:40em}
@media (max-width:640px){.orig-in{grid-template-columns:1fr}}
/* 학년 추천 버튼 두 개 */
.reco-btns{display:flex;flex-direction:column;gap:8px}

/* 후기 모션 그래픽 (func) — 플레이어는 js/mg-player.js, 연출은 js/review-fx.js */
.rv-player .sp-sound{background:var(--ink);border-color:var(--ink);color:#fff}
.rv-player .sp-sound[aria-pressed="true"]{background:#fff;border-color:var(--go);color:var(--go)}
.story-stage:not(.gsap-on)[data-scene="1"] .r1,.story-stage:not(.gsap-on)[data-scene="2"] .r2,.story-stage:not(.gsap-on)[data-scene="3"] .r3,.story-stage:not(.gsap-on)[data-scene="4"] .r4,.story-stage:not(.gsap-on)[data-scene="5"] .r5,.story-stage:not(.gsap-on)[data-scene="6"] .r6,.story-stage:not(.gsap-on)[data-scene="7"] .r7,.story-stage:not(.gsap-on)[data-scene="8"] .r8,.story-stage:not(.gsap-on)[data-scene="9"] .r9,.story-stage:not(.gsap-on)[data-scene="10"] .r10,.story-stage:not(.gsap-on)[data-scene="11"] .r11{opacity:1}
.rv-player{margin-bottom:10px}
.rv-src{max-width:760px;margin:0 auto 26px;font-size:13px;line-height:1.6;color:var(--ink-soft,#4a566e)}
.rv-src a{color:inherit;font-weight:700}
.review.has-video{border-color:var(--go);box-shadow:0 0 0 1px var(--go) inset}
.review footer .rv-watch{margin-left:auto;padding:6px 12px;border:0;border-radius:999px;background:var(--go);color:#fff;font:800 13.5px/1.2 var(--f-body);cursor:pointer;white-space:nowrap}
.review footer .rv-watch:hover{background:var(--go-press)}
.review footer .rv-watch + a{margin-left:12px}
.review footer a{white-space:nowrap}
@media (max-width:420px){.review.has-video footer{flex-wrap:wrap}.review footer .rv-watch{margin-left:0;order:3;width:100%;text-align:center;padding:9px 12px}.review.has-video footer a{margin-left:auto}}
.rv-modal{width:min(760px,calc(100% - 24px));max-width:none;max-height:calc(100% - 24px);padding:44px 0 0;border:0;background:transparent;overflow:visible}
.rv-modal::backdrop{background:rgba(15,23,42,.72)}
.rv-modal .player2{margin:0;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.rv-close{position:absolute;top:0;right:0;padding:8px 14px;border:0;border-radius:999px;background:#fff;color:var(--ink);font:800 14px/1.2 var(--f-body);cursor:pointer}
.rv-close:hover{background:#eef2f0}
@media (max-height:640px){.rv-modal{width:min(560px,calc(100% - 24px))}}
.rv-modal .rv-src{margin:10px 4px 0;color:#e8edf3}.rv-modal .rv-src a{color:#fff}
.story-stage:not(.gsap-on)[data-scene="1"] .q1,.story-stage:not(.gsap-on)[data-scene="2"] .q2,.story-stage:not(.gsap-on)[data-scene="3"] .q3,.story-stage:not(.gsap-on)[data-scene="4"] .q4,.story-stage:not(.gsap-on)[data-scene="5"] .q5,.story-stage:not(.gsap-on)[data-scene="6"] .q6,.story-stage:not(.gsap-on)[data-scene="7"] .q7,.story-stage:not(.gsap-on)[data-scene="8"] .q8,.story-stage:not(.gsap-on)[data-scene="9"] .q9,.story-stage:not(.gsap-on)[data-scene="10"] .q10{opacity:1} /* 후기 2 예비 동작 */
.story-stage:not(.gsap-on)[data-scene="1"] .w1,.story-stage:not(.gsap-on)[data-scene="2"] .w2,.story-stage:not(.gsap-on)[data-scene="3"] .w3,.story-stage:not(.gsap-on)[data-scene="4"] .w4,.story-stage:not(.gsap-on)[data-scene="5"] .w5,.story-stage:not(.gsap-on)[data-scene="6"] .w6,.story-stage:not(.gsap-on)[data-scene="7"] .w7,.story-stage:not(.gsap-on)[data-scene="8"] .w8,.story-stage:not(.gsap-on)[data-scene="9"] .w9,.story-stage:not(.gsap-on)[data-scene="10"] .w10{opacity:1} /* 후기 3 예비 동작 */
.story-stage:not(.gsap-on)[data-scene="1"] .v1,.story-stage:not(.gsap-on)[data-scene="2"] .v2,.story-stage:not(.gsap-on)[data-scene="3"] .v3,.story-stage:not(.gsap-on)[data-scene="4"] .v4,.story-stage:not(.gsap-on)[data-scene="5"] .v5,.story-stage:not(.gsap-on)[data-scene="6"] .v6,.story-stage:not(.gsap-on)[data-scene="7"] .v7,.story-stage:not(.gsap-on)[data-scene="8"] .v8,.story-stage:not(.gsap-on)[data-scene="9"] .v9{opacity:1} /* 후기 4 예비 동작 */
.story-stage:not(.gsap-on)[data-scene="1"] .u1,.story-stage:not(.gsap-on)[data-scene="2"] .u2,.story-stage:not(.gsap-on)[data-scene="3"] .u3,.story-stage:not(.gsap-on)[data-scene="4"] .u4,.story-stage:not(.gsap-on)[data-scene="5"] .u5,.story-stage:not(.gsap-on)[data-scene="6"] .u6,.story-stage:not(.gsap-on)[data-scene="7"] .u7,.story-stage:not(.gsap-on)[data-scene="8"] .u8,.story-stage:not(.gsap-on)[data-scene="9"] .u9,.story-stage:not(.gsap-on)[data-scene="10"] .u10{opacity:1} /* 후기 5 예비 동작 */
.admin-only{display:none!important}.is-admin .admin-only{display:block!important} /* 관리자 모드(js/common.js)에서만 보임 */
.iso.iso-out .iso-soil,.iso.iso-out .iso-f1,.iso.iso-out .iso-f2,.iso.iso-out .iso-f3,.iso.iso-out .iso-mark{animation:none;opacity:0} /* 화면 밖이면 내려 두었다가, 돌아오면 클래스를 빼서 다시 재생(js/common.js) */
.story-stage:not(.gsap-on)[data-scene="1"] .rv6-svg .t1,.story-stage:not(.gsap-on)[data-scene="2"] .rv6-svg .t2,.story-stage:not(.gsap-on)[data-scene="3"] .rv6-svg .t3,.story-stage:not(.gsap-on)[data-scene="4"] .rv6-svg .t4,.story-stage:not(.gsap-on)[data-scene="5"] .rv6-svg .t5,.story-stage:not(.gsap-on)[data-scene="6"] .rv6-svg .t6,.story-stage:not(.gsap-on)[data-scene="7"] .rv6-svg .t7,.story-stage:not(.gsap-on)[data-scene="8"] .rv6-svg .t8,.story-stage:not(.gsap-on)[data-scene="9"] .rv6-svg .t9,.story-stage:not(.gsap-on)[data-scene="10"] .rv6-svg .t10{opacity:1} /* 후기6(메인) 움직임 줄이기·GSAP 없을 때 장면 */
/* 여섯 과정 — 과정 색 글 링크 + 동그라미 버튼 (2026-10-17) */
.courses .crow{--cc:var(--ink)}
.courses .desc{grid-column:3;grid-row:1}
.courses .more-l{grid-column:3;grid-row:2;justify-self:start;color:var(--cc);font-weight:700;font-size:15px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--cc) 45%,transparent)}
.courses .more-l i{font-style:normal;display:inline-block;transition:transform .15s}
.courses .crow:hover .more-l{text-decoration-color:var(--cc)}.courses .crow:hover .more-l i{transform:translateX(3px)}
.courses .sym,.courses h3{grid-row:1/span 2}
.courses .go{grid-column:4;grid-row:1/span 2;width:44px;height:44px;border-radius:50%;border:2px solid var(--cc);background:#fff;justify-content:center;transition:background-color .15s}
.courses .go i{width:10px;height:10px;border-color:var(--cc);margin:0 4px 0 0}
.courses .crow:hover .go,.courses .crow:focus-visible .go{background:var(--cc)}.courses .crow:hover .go i,.courses .crow:focus-visible .go i{border-color:#fff}
@media (max-width:760px){.courses .crow{grid-template-columns:44px minmax(0,1fr) 40px}.courses .sym,.courses h3{grid-row:1}.courses .desc{grid-column:2;grid-row:2}.courses .more-l{grid-column:2;grid-row:3;font-size:14.5px}.courses .go{grid-column:3;grid-row:1/span 3;width:38px;height:38px}.courses .go i{width:9px;height:9px;margin:0 3px 0 0}}
.challenge{margin-inline:auto} @media (max-width:820px){.why img{justify-self:center}} /* 3초 도전·아이 그림 가운데 (2026-10-17) */
.story-stage:not(.gsap-on)[data-scene="1"] .rv7-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv7-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv7-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv7-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv7-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv7-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv7-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv7-svg .p8,.story-stage:not(.gsap-on)[data-scene="9"] .rv7-svg .p9,.story-stage:not(.gsap-on)[data-scene="10"] .rv7-svg .p10{opacity:1} /* 후기7 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv8-svg .g1,.story-stage:not(.gsap-on)[data-scene="2"] .rv8-svg .g2,.story-stage:not(.gsap-on)[data-scene="3"] .rv8-svg .g3,.story-stage:not(.gsap-on)[data-scene="4"] .rv8-svg .g4,.story-stage:not(.gsap-on)[data-scene="5"] .rv8-svg .g5,.story-stage:not(.gsap-on)[data-scene="6"] .rv8-svg .g6,.story-stage:not(.gsap-on)[data-scene="7"] .rv8-svg .g7,.story-stage:not(.gsap-on)[data-scene="8"] .rv8-svg .g8,.story-stage:not(.gsap-on)[data-scene="9"] .rv8-svg .g9,.story-stage:not(.gsap-on)[data-scene="10"] .rv8-svg .g10{opacity:1} /* 후기8 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv9-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv9-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv9-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv9-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv9-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv9-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv9-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv9-svg .p8,.story-stage:not(.gsap-on)[data-scene="9"] .rv9-svg .p9,.story-stage:not(.gsap-on)[data-scene="10"] .rv9-svg .p10,.story-stage:not(.gsap-on)[data-scene="1"] .rv10-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv10-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv10-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv10-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv10-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv10-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv10-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv10-svg .p8,.story-stage:not(.gsap-on)[data-scene="9"] .rv10-svg .p9,.story-stage:not(.gsap-on)[data-scene="10"] .rv10-svg .p10{opacity:1} /* 후기9·10 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv11-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv11-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv11-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv11-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv11-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv11-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv11-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv11-svg .p8,.story-stage:not(.gsap-on)[data-scene="9"] .rv11-svg .p9,.story-stage:not(.gsap-on)[data-scene="10"] .rv11-svg .p10{opacity:1} /* 후기11 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv12-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv12-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv12-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv12-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv12-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv12-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv12-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv12-svg .p8,.story-stage:not(.gsap-on)[data-scene="9"] .rv12-svg .p9,.story-stage:not(.gsap-on)[data-scene="10"] .rv12-svg .p10{opacity:1} /* 음성후기1 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv13-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv13-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv13-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv13-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv13-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv13-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv13-svg .p7,.story-stage:not(.gsap-on)[data-scene="1"] .rv14-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv14-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv14-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv14-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv14-svg .p5{opacity:1} /* 음성후기2·3 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv15-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv15-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv15-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv15-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv15-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv15-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv15-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv15-svg .p8,.story-stage:not(.gsap-on)[data-scene="9"] .rv15-svg .p9,.story-stage:not(.gsap-on)[data-scene="10"] .rv15-svg .p10{opacity:1} /* 후기15 폴백 */
.audios figure.has-video{border-color:var(--go);box-shadow:0 0 0 1px var(--go) inset}.av-btns{display:flex;gap:8px;flex-wrap:wrap}.av-btns .rv-watch{padding:6px 12px;border:0;border-radius:999px;background:var(--go);color:#fff;font:800 13.5px/1.2 var(--f-body);cursor:pointer;white-space:nowrap}.av-btns .rv-watch:hover{background:var(--go-press)} /* 음성 후기 모션 단추 */
.review footer{flex-wrap:wrap;white-space:nowrap;row-gap:8px}.review footer .rv-watch + .rv-watch{margin-left:0} /* 단추가 넘치면 찌그러지지 않고 다음 줄로 (2026-10-18) */
.review footer .rv-watch + a{margin-left:auto;padding-left:6px}
@media (max-width:420px){.review footer .rv-watch,.review.has-video footer .rv-watch{width:auto;order:0;padding:6px 12px;font-size:13px}.review.has-video footer{row-gap:8px}} /* 휴대폰에서도 모션 단추는 작게, 한 줄에 여러 개 (2026-10-18) */
.story-stage:not(.gsap-on)[data-scene="1"] .rv16-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv16-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv16-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv16-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv16-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv16-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv16-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv16-svg .p8,.story-stage:not(.gsap-on)[data-scene="9"] .rv16-svg .p9,.story-stage:not(.gsap-on)[data-scene="10"] .rv16-svg .p10{opacity:1} /* 후기16 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv17-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv17-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv17-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv17-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv17-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv17-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv17-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv17-svg .p8,.story-stage:not(.gsap-on)[data-scene="9"] .rv17-svg .p9{opacity:1} /* 후기17 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv18-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv18-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv18-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv18-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv18-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv18-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv18-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv18-svg .p8{opacity:1} /* 후기18 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv19-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv19-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv19-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv19-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv19-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv19-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv19-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv19-svg .p8,.story-stage:not(.gsap-on)[data-scene="9"] .rv19-svg .p9,.story-stage:not(.gsap-on)[data-scene="10"] .rv19-svg .p10{opacity:1} /* 후기19 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv20-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv20-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv20-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv20-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv20-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv20-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv20-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv20-svg .p8,.story-stage:not(.gsap-on)[data-scene="9"] .rv20-svg .p9,.story-stage:not(.gsap-on)[data-scene="10"] .rv20-svg .p10{opacity:1} /* 후기20 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv21-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv21-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv21-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv21-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv21-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv21-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv21-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv21-svg .p8,.story-stage:not(.gsap-on)[data-scene="9"] .rv21-svg .p9,.story-stage:not(.gsap-on)[data-scene="10"] .rv21-svg .p10{opacity:1} /* 후기21 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv22-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv22-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv22-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv22-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv22-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv22-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv22-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv22-svg .p8,.story-stage:not(.gsap-on)[data-scene="9"] .rv22-svg .p9,.story-stage:not(.gsap-on)[data-scene="10"] .rv22-svg .p10{opacity:1} /* 후기22 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv23-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv23-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv23-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv23-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv23-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv23-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv23-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv23-svg .p8,.story-stage:not(.gsap-on)[data-scene="9"] .rv23-svg .p9,.story-stage:not(.gsap-on)[data-scene="10"] .rv23-svg .p10{opacity:1} /* 후기23 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv24-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv24-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv24-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv24-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv24-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv24-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv24-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv24-svg .p8,.story-stage:not(.gsap-on)[data-scene="9"] .rv24-svg .p9,.story-stage:not(.gsap-on)[data-scene="10"] .rv24-svg .p10{opacity:1} /* 후기24 폴백 */
.story-stage:not(.gsap-on)[data-scene="1"] .rv25-svg .p1,.story-stage:not(.gsap-on)[data-scene="2"] .rv25-svg .p2,.story-stage:not(.gsap-on)[data-scene="3"] .rv25-svg .p3,.story-stage:not(.gsap-on)[data-scene="4"] .rv25-svg .p4,.story-stage:not(.gsap-on)[data-scene="5"] .rv25-svg .p5,.story-stage:not(.gsap-on)[data-scene="6"] .rv25-svg .p6,.story-stage:not(.gsap-on)[data-scene="7"] .rv25-svg .p7,.story-stage:not(.gsap-on)[data-scene="8"] .rv25-svg .p8{opacity:1} /* 후기25 폴백 */