/* 더하이엔드 아카데미 v2 — 서대표님 피그마 문구 + 예일식 구성. 색은 로고·피그마에서 가져옴 */
:root{
  --or:#F07826; --or-d:#D9631A; --or-l:#FFF3EA;
  --gr:#12C55A; --rd:#EE2219; --bl:#2B1BFF;
  --ink:#111; --sub:#4a4a4a; --mute:#8a8a8a; --line:#e6e6e6; --bg2:#f6f5f3;
  --hd:84px; --pad:clamp(20px,5vw,96px);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--ink);background:#fff;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
em{font-style:normal}
.or{color:var(--or)} .gr{color:var(--gr)} .rd{color:var(--rd)} .bl{color:var(--bl)}
.wrap{position:relative;width:100%;max-width:1600px;margin:0 auto;padding:0 var(--pad)}

/* ── 머리글 (피그마 그대로: 로고 + 메뉴 상자 7개) ── */
.hd{position:fixed;inset:0 0 auto;height:var(--hd);z-index:60;display:flex;align-items:center;gap:24px;padding:0 clamp(16px,2.6vw,48px);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd-logo img{height:clamp(32px,2.8vw,46px);width:auto}
.gnb{display:flex;gap:8px;margin-left:auto}
.gnb a{padding:10px clamp(10px,1.2vw,22px);border:1px solid #ececec;border-radius:8px;font-size:15px;font-weight:500;white-space:nowrap;transition:.2s}
.gnb a:hover,.gnb a.on{border-color:var(--or);color:var(--or)}
.hd-cta{padding:11px 22px;border-radius:999px;background:var(--or);color:#111;font-weight:700;font-size:15px;white-space:nowrap}
.hd-cta:hover{background:var(--or-d);color:#fff}
.hd-menu{display:none;width:44px;height:44px;place-content:center;gap:6px;margin-left:auto}
.hd-menu span{display:block;width:24px;height:2px;background:var(--ink);transition:.3s}
.hd-menu[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hd-menu[aria-expanded=true] span:nth-child(2){opacity:0}
.hd-menu[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.drawer{position:fixed;inset:var(--hd) 0 0;z-index:59;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,20px)}
.drawer a{font-size:clamp(26px,6vw,44px);font-weight:700;letter-spacing:-.03em}
.drawer a.em{color:var(--or)}

/* ── 오른쪽 빠른 메뉴 (예일식) ── */
.quick{position:fixed;right:clamp(10px,1.4vw,24px);top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:6px}
.quick a{width:72px;height:72px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px -14px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11.5px;font-weight:600;color:#333;transition:.2s}
.quick a:hover{transform:translateX(-4px);border-color:var(--or)}
.quick svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.quick a.q-or{background:var(--or);border-color:var(--or);color:#111}
.quick a.q-top{height:52px;background:#111;color:#fff;border-color:#111}

/* ── 왼쪽 위치 표시 ── */
.dots{position:fixed;left:clamp(10px,1.4vw,26px);top:50%;transform:translateY(-50%);z-index:40;display:none;flex-direction:column;gap:7px}
.dots a{display:flex;align-items:center;gap:10px;height:12px}
.dots a i{display:block;width:14px;height:2px;background:#cfcfcf;transition:.3s}
.dots a span{font-size:11px;color:var(--mute);opacity:0;transform:translateX(-4px);transition:.25s;white-space:nowrap;background:#fff;padding:0 4px}
.dots a:hover span{opacity:1;transform:none}
.dots a.on i{width:30px;background:var(--or)}

/* ── 첫 화면 슬라이드 ── */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#fff}
.slides,.slide{position:absolute;inset:0}
.slide{opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 1s}
.slide::before{content:"";position:absolute;inset:0;background:url(../img/tile-room.svg) center bottom/cover no-repeat}
.slide.on{opacity:1;visibility:visible}
.slide .mark{position:absolute;top:50%;translate:0 -46%;width:min(36vw,640px);filter:drop-shadow(0 30px 40px rgba(0,0,0,.14));transition:transform 6s ease-out}
.slide .m1{left:calc(50% - min(38vw,680px));transform:scale(.94)}
.slide .m2{right:calc(50% - min(38vw,680px));transform:scale(.94)}
.slide.on .mark{transform:scale(1)}
.s-txt{position:absolute;top:50%;translate:0 -52%;max-width:min(880px,48vw)}
.s-txt.right{left:calc(50% - 1vw);max-width:min(880px,calc(50vw - 110px))}
.s-txt.left{right:calc(50% - 1vw);text-align:right}
.s-txt.center{left:50%;translate:-50% -52%;text-align:center;max-width:min(1100px,80vw)}
.s-txt h1,.s-txt h2{text-wrap:balance;font-size:clamp(34px,3.9vw,72px);font-weight:600;line-height:1.22;letter-spacing:-.045em}
.s-txt b{font-weight:800}
.s-txt p{text-wrap:pretty;margin-top:clamp(18px,3vh,34px);font-size:clamp(15px,1.3vw,22px);line-height:1.75;color:#333}
.slide.on .s-txt>*{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
.slide.on .s-txt p{text-wrap:pretty;animation-delay:.25s}
@keyframes up{from{opacity:0;transform:translateY(30px)}}
.arw{position:absolute;top:50%;width:56px;height:56px;margin-top:-28px;z-index:3;opacity:.45;transition:.2s}
.arw::before{content:"";position:absolute;inset:16px;border-left:2px solid #333;border-bottom:2px solid #333;transform:rotate(45deg)}
.arw.next::before{transform:rotate(-135deg)}
.arw:hover{opacity:1}
.arw.prev{left:clamp(44px,4vw,72px)} .arw.next{right:clamp(96px,8vw,130px)}
.pager{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);z-index:3;display:flex;gap:10px}
.pager button{width:36px;height:4px;border-radius:2px;background:#d0d0d0;transition:.3s}
.pager button[aria-current=true]{background:var(--or);width:56px}
.board{position:absolute;right:clamp(110px,8.5vw,140px);bottom:24px;z-index:4;width:340px;background:rgba(255,255,255,.96);border-radius:16px;box-shadow:0 24px 50px -28px rgba(0,0,0,.4);padding:14px;display:none;grid-template-columns:118px 1fr;gap:10px 12px;align-items:center}
.b-tit{grid-column:1/-1;font-weight:800;font-size:15px}
.b-tit small{font-weight:500;color:var(--mute);font-size:13px;margin-left:4px}
.b-photos{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#eee}
.b-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.b-photos img.on{opacity:1}
.b-list{display:grid;gap:4px;font-size:13px;color:var(--sub)}
.b-list b{color:var(--ink)}
.board .btn{grid-column:1/-1;width:100%;min-height:42px;font-size:15px}
.scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;color:var(--mute)}
.scroll i{width:20px;height:31px;border:2px solid #9a9a9a;border-radius:11px;position:relative}
.scroll i::after{content:"";position:absolute;left:50%;top:5px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--or);animation:wheel 1.8s infinite}
@keyframes wheel{70%{transform:translateY(9px);opacity:0}100%{opacity:0}}

/* ── 장면 (피그마 한 장 = 한 화면) ── */
.scene{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--hd) + 20px) 0 28px;overflow:hidden}
.scene .wrap{display:flex;align-items:center;min-height:calc(100svh - var(--hd) - 48px)}
/* 글 + 선 그림: 화면 가운데 높이에 나란히 (내려앉지 않게) */
.scene.l .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:clamp(16px,2.4vw,48px)}
.scene.r .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:clamp(16px,2.4vw,48px)}
.scene .txt{position:relative;z-index:2}
.scene .art{position:relative;z-index:1;width:100%;height:auto;max-height:min(76vh,860px);object-fit:contain;pointer-events:none}
.scene.l .art{justify-self:end;width:122%;max-width:none;margin-right:-6%}
.scene.r .art{order:-1;justify-self:start;width:122%;max-width:none;margin-left:-14%}
.scene.r .wrap{justify-content:flex-end}
.scene.r .txt{text-align:right}
.scene.r .tag{margin-left:auto}
.tag{display:table;padding:8px 26px;border:2.5px solid var(--or);border-radius:999px;color:var(--or);font-weight:800;font-size:clamp(15px,1.3vw,22px);margin-bottom:clamp(24px,5vh,56px)}
.scene h2{font-size:clamp(28px,3.7vw,70px);font-weight:500;line-height:1.3;letter-spacing:-.04em}
.scene h2.big{font-size:clamp(44px,5.6vw,104px);font-weight:800;letter-spacing:-.05em;line-height:1.1}
.eyebrow{font-size:clamp(16px,1.4vw,24px);font-weight:600;margin-bottom:12px}
.body{margin-top:clamp(20px,3.5vh,40px);font-size:clamp(15px,1.25vw,21px);line-height:1.9;color:var(--sub)}
.body b{color:var(--ink)}
.lines{margin-top:28px;display:grid;gap:6px}
.lines li{font-size:clamp(16px,1.3vw,21px);color:#666}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,5vh,52px)}
.scene.r .pills{justify-content:flex-end}
.pills.center{justify-content:center}
.pills a{padding:9px 20px;border:2px solid #d5d5d5;border-radius:999px;color:#777;font-size:15px;font-weight:500;transition:.2s}
.pills a:hover{border-color:var(--or);color:var(--or)}

/* 아카데미는 (주황 동그라미) */
.acad.l .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.acad .art{justify-self:start}
.icons{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,48px);margin-top:clamp(28px,5vh,56px)}
.icons li{display:flex;flex-direction:column;align-items:center;gap:12px;font-weight:600;font-size:clamp(14px,1.1vw,18px)}
.icons span{width:clamp(88px,8.4vw,140px);height:clamp(88px,8.4vw,140px);border-radius:50%;background:#F39A4B;display:grid;place-items:center;transition:transform .3s}
.icons li:hover span{transform:translateY(-6px)}
.icons svg{width:46%;height:46%;fill:none;stroke:#222;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 올인원 */
.allin .wrap{flex-direction:column;justify-content:center;text-align:center}
.allin h2{font-size:clamp(26px,3vw,54px);line-height:1.45}
.brands{margin-top:clamp(40px,8vh,96px);width:min(100%,1100px)}

/* 커리큘럼 24강 */
.curri .wrap{gap:clamp(24px,5vw,96px);justify-content:space-between}
.curri .txt{max-width:640px}
.lessons{counter-reset:k;display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(12,auto);gap:clamp(6px,1.2vh,12px) clamp(24px,4vw,64px);font-size:clamp(14px,1.15vw,19px)}
.lessons li{counter-increment:k;display:flex;gap:12px;align-items:baseline;white-space:nowrap}
.lessons li::before{content:counter(k) "강";min-width:44px;font-weight:700;color:var(--or)}

/* 과정 3종 */
.plans{background:var(--bg2)}
.plans .wrap{flex-direction:column;align-items:stretch;justify-content:center}
.plans .tag{align-self:flex-start}
#who h2.big{font-size:clamp(40px,4.4vw,84px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);margin-top:clamp(28px,5vh,48px)}
.card{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:clamp(22px,2.2vw,34px);display:flex;flex-direction:column}
.card.best{border:3px solid var(--or);box-shadow:0 24px 50px -24px rgba(240,120,38,.45)}
.ribbon{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--or);color:#111;font-weight:800;padding:6px 18px;border-radius:999px;font-size:14px}
.card h3{font-size:clamp(24px,2vw,32px);font-weight:800}
.card .days{margin-top:6px;font-weight:700;color:var(--sub)}
.card .price{margin:14px 0 16px;font-size:clamp(26px,2.4vw,38px);font-weight:800}
.card .price:empty{display:none}
.card ul{display:grid;gap:9px;margin:14px 0 22px;flex:1}
.card li{font-size:16px;color:var(--sub);padding-left:22px;position:relative;line-height:1.5}
.card li::before{content:"";position:absolute;left:2px;top:.45em;width:11px;height:6px;border-left:2.5px solid var(--gr);border-bottom:2.5px solid var(--gr);transform:rotate(-45deg)}
.card li b{color:var(--ink)}
.card .btn{width:100%}
.note{margin-top:22px;color:var(--sub);font-size:15px}

/* Who, Why */
.dots-list{margin-top:clamp(28px,5vh,52px);display:grid;gap:clamp(8px,1.4vh,14px);font-size:clamp(15px,1.2vw,20px);color:#333}
.dots-list li::before{content:"• ";color:var(--or)}

/* 수강후기: 사진 띠 */
.review{flex-direction:column;justify-content:center;gap:clamp(28px,5vh,56px)}
.review .wrap{display:block;min-height:0}
.review h2{text-align:center}
.review .tag{margin:0 auto clamp(20px,4vh,40px)}
.reel{width:100%;overflow:hidden}
.reel-in{display:flex;gap:12px;width:max-content;animation:reel 70s linear infinite}
.reel:hover .reel-in{animation-play-state:paused}
.reel img{height:clamp(220px,40vh,440px);width:auto;border-radius:16px;object-fit:cover}
@keyframes reel{to{transform:translateX(-50%)}}

/* 소개 */
.talk .txt{max-width:min(860px,60%)}
.letter{margin-top:clamp(20px,3.5vh,36px);display:grid;gap:14px;font-size:clamp(14px,1.02vw,17px);line-height:1.85;color:#333}
.history .wrap{flex-direction:column;align-items:flex-start;justify-content:center}
.years{margin-top:clamp(24px,4vh,44px);display:grid;grid-template-columns:1fr 1fr;gap:12px clamp(28px,5vw,80px);font-size:clamp(15px,1.15vw,19px);color:#333}
.years li{display:flex;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.years b{color:var(--or);font-weight:800;min-width:48px}
.place .wrap{justify-content:space-between;gap:clamp(24px,5vw,80px)}
.nums{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(16px,3vw,48px);margin-top:clamp(24px,4vh,44px)}
.nums dt{font-size:clamp(38px,4.4vw,76px);font-weight:800;letter-spacing:-.05em;line-height:1}
.nums dt small{font-size:.38em;margin-left:2px}
.nums dd{margin-top:8px;color:var(--sub);font-size:14px}
.cert{flex:none;transform:rotate(2deg)}
.cert img{max-height:72vh;width:auto;border-radius:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}

/* 상담 신청 */
.apply{background:var(--bg2)}
.apply .wrap{justify-content:space-between;gap:clamp(28px,5vw,96px)}
.apply .txt{max-width:520px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btns.col{flex-direction:column;align-items:flex-start}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:999px;font-weight:700;font-size:clamp(15px,1.1vw,18px);transition:.2s;text-align:center}
.btn-or{background:var(--or);color:#111} .btn-or:hover{background:var(--or-d);color:#fff}
.btn-ln{border:2px solid var(--ink);background:#fff} .btn-ln:hover{background:var(--ink);color:#fff}
.btn.big{width:100%;min-height:64px;font-size:19px}
.form{flex:1;max-width:680px;background:#fff;border-radius:26px;padding:clamp(22px,3vw,44px);box-shadow:0 30px 70px -40px rgba(0,0,0,.3);display:grid;gap:8px}
.form>label,.form legend{font-weight:700;font-size:16px;display:block}
.form>label{display:grid;gap:8px;margin-top:8px}
.form input:not([type=radio]):not([type=checkbox]){width:100%;height:54px;border:1.5px solid #d9d9d9;border-radius:12px;padding:0 16px;font:inherit;font-size:17px}
.form input:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 4px var(--or-l)}
.form fieldset{border:0;margin-top:12px}
.form legend{margin-bottom:8px}
.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.opts label{cursor:pointer}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:62px;border:1.5px solid #d9d9d9;border-radius:12px;text-align:center;font-weight:700;font-size:15px;line-height:1.25;padding:6px;transition:.15s}
.opts small{font-weight:500;color:var(--mute);font-size:13px}
.opts input:checked+span{border-color:var(--or);background:var(--or-l);box-shadow:inset 0 0 0 1.5px var(--or)}
.opts input:focus-visible+span{outline:3px solid var(--or);outline-offset:2px}
.form small{font-weight:500;color:var(--mute)}
.agree{display:flex!important;align-items:flex-start;gap:10px!important;font-weight:500!important;font-size:14px!important;color:var(--sub);line-height:1.6;margin-top:14px!important}
.agree input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--or)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{display:none;color:#d23a1d;font-size:14px;font-weight:600}
.err.show{display:block}
.form .btn{margin-top:16px}
.done,.fail{margin-top:10px;padding:16px;border-radius:12px;font-weight:600;line-height:1.6}
.done{background:#eaf8f0;color:#0b6b33} .fail{background:#fdecea;color:#a12a14}
.done a,.fail a{text-decoration:underline}

/* 맨 아래 */
.ft{background:#fff;border-top:1px solid var(--line);padding:48px 0 calc(48px + env(safe-area-inset-bottom));font-size:14px;line-height:1.9;color:#555}
.ft .wrap{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px 56px}
.ft img{height:40px;width:auto}
.ft-info{flex:1;min-width:280px}
.ft .maker{font-size:12px;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.fill{display:inline-block;border:2px dashed var(--or);background:var(--or-l);color:var(--or-d);border-radius:8px;padding:0 8px}

/* 휴대폰 하단 바 */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--line)}
.bar a{flex:1;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:700;border:1.5px solid var(--ink)}
.bar a.em{flex:1.6;background:var(--or);border-color:var(--or);color:#111}

/* 나타나는 움직임 */
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.scene .art.rv{transform:translateY(40px) scale(.97)}
.scene .art.rv.in{transform:none}
.no-js .rv,.still .rv{opacity:1;transform:none;transition:none}
html.still{scroll-behavior:auto}

/* 큰 화면 */
@media (min-width:1024px){ .dots{display:flex} .scene .wrap{padding-right:calc(var(--pad) + 88px)} }
@media (min-width:1360px) and (min-height:760px){ .board{display:grid} .hero.flip .board{right:auto;left:clamp(56px,4vw,80px)} }
/* 스크롤 붙잡기(snap)는 쓰지 않는다: 맥 트랙패드에서 튕김 (2026-10-14 서대표님) */

/* 메뉴가 길어지는 폭 */
@media (max-width:1180px){
  .gnb,.hd-cta{display:none}
  .hd-menu{display:grid}
}
/* 태블릿 이하 */
@media (max-width:1023px){
  .quick{display:none}
  .scene .wrap,.scene.l .wrap,.scene.r .wrap{display:flex;flex-direction:column;align-items:stretch;min-height:0}
  .scene .txt,.scene.r .txt,.talk .txt{max-width:none;text-align:left}
  .scene.r .tag{margin-left:0}
  .scene.r .pills{justify-content:flex-start}
  .scene .art,.acad .art,.scene.l .art,.scene.r .art{position:static;width:100%;max-width:100%;max-height:44vh;margin:28px auto 0;order:2}
  .acad .txt{order:1}
  .curri .wrap{gap:28px}
  .cards{grid-template-columns:1fr}
  .card.best{order:-1}
  .years{grid-template-columns:1fr}
  .nums{grid-template-columns:repeat(2,auto)}
  .place .cert{margin:20px auto 0}
  .apply .form{max-width:none}
  .s-txt,.s-txt.left,.s-txt.right,.s-txt.center{left:var(--pad);right:var(--pad);max-width:none!important;text-align:left;top:calc(var(--hd) + 8vh);translate:none}
  .slide .mark{top:auto;bottom:-4vh;translate:none;width:56vw}
  .slide .m1{left:-6vw} .slide .m2{right:-6vw;left:auto}
  .arw{display:none}
}
/* 휴대폰 */
@media (max-width:767px){
  :root{--hd:64px}
  .hd-logo img{height:32px}
  .scene{min-height:0;padding:calc(var(--hd) + 40px) 0 56px}
  .hero{min-height:560px}
  .slide{background-size:180% auto;background-position:30% 80%}
  .slide .mark{width:min(82vw,420px)}
  .slide .m1,.slide .m2{left:50%;right:auto;translate:-50% 0;bottom:calc(84px + 3vh)}
  .s-txt{top:calc(var(--hd) + 7vh)}
  .pager{bottom:30px}
  .pager button{width:28px;height:5px}
  .pager button[aria-current=true]{width:44px}
  .scroll{display:none}
  .lessons{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;white-space:normal}
  .lessons li{white-space:normal}
  .opts{grid-template-columns:repeat(2,1fr)}
  .btns.col .btn{width:100%}
  .reel img{height:240px}
  .bar{display:flex}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .reel-in,.scroll i::after,.slide.on .s-txt>*{animation:none}
}

/* ── 페이지 끝 "다음" 안내 (끝없이 내려가지 않게) ── */
.nextp{position:relative;min-height:62vh;display:flex;align-items:center;padding:calc(var(--hd) + 20px) 0 60px;background:linear-gradient(180deg,#fff 0%,#fff6ee 100%);overflow:hidden;text-align:center}
.nextp::before,.nextp::after{content:"";position:absolute;width:42vw;height:9vw;border-radius:999px;transform:rotate(-45deg);opacity:.12;pointer-events:none}
.nextp::before{background:var(--or);left:-12vw;bottom:-2vw}
.nextp::after{background:var(--gr);right:-12vw;top:4vw}
.nextp .wrap{display:flex;flex-direction:column;align-items:center}
.np-k{font-weight:800;letter-spacing:.3em;color:var(--or);font-size:clamp(14px,1.1vw,18px)}
.np-go{display:inline-flex;align-items:center;gap:clamp(14px,2vw,32px);margin-top:14px;font-size:clamp(48px,7.4vw,140px);font-weight:800;letter-spacing:-.05em;line-height:1.05;transform:scale(.86);opacity:.4;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity 1s,color .2s}
.nextp.in .np-go{transform:none;opacity:1}
.np-go i{position:relative;width:clamp(56px,6vw,110px);height:clamp(56px,6vw,110px);border-radius:50%;background:var(--or);flex:none;box-shadow:0 18px 40px -14px rgba(240,120,38,.7);animation:nudge 1.6s ease-in-out infinite}
.np-go i::after{content:"";position:absolute;inset:32%;border-top:4px solid #111;border-right:4px solid #111;transform:translateX(-12%) rotate(45deg)}
.np-go:hover{color:var(--or)}
@keyframes nudge{50%{transform:translateX(10px)}}
.np-q{margin-top:clamp(18px,3vh,30px);font-size:clamp(17px,1.6vw,26px);color:#333;max-width:900px;line-height:1.6}
.np-sub{margin-top:8px;color:var(--mute);font-size:15px}
.np-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(24px,4vh,40px)}
/* 다음 메뉴 칸 반짝 */
.gnb a.pulse{border-color:var(--or);background:var(--or);color:#111;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(240,120,38,.55);transform:scale(1)}50%{box-shadow:0 0 0 10px rgba(240,120,38,0);transform:scale(1.08)}}
/* 페이지 바뀔 때 부드럽게 */
@media (max-width:767px){ .nextp{min-height:0;padding:calc(var(--hd) + 32px) 0 48px} }
@media (prefers-reduced-motion:reduce){ .np-go i,.gnb a.pulse,main.swap{animation:none} .np-go{transform:none;opacity:1} }

/* 줄 나눔 고정: PC는 <br> 자리에서만 줄이 바뀜, 휴대폰은 자연스럽게 이어 씀 */
.ln{white-space:nowrap}
.flow .ln{white-space:normal}
.flow .body br,.flow .s-txt p br,.flow .letter p br,.flow .np-q br{display:none}
.flow .body .ln::after,.flow .s-txt p .ln::after,.flow .letter p .ln::after,.flow .np-q .ln::after{content:" "}
.flow h1,.flow h2{text-wrap:balance}
.flow .body,.flow .letter p,.flow .s-txt p{text-wrap:pretty}
.scene .txt{min-width:0}
.flow .pb{display:block;height:.7em}

/* ── 첫 장면: 진짜 로고 4조각이 날아와 맞춰짐 (2026-10-14) ── */
.mark.build{aspect-ratio:1;height:auto}
.build .pc{position:absolute;inset:0;width:100%;height:100%;opacity:0;will-change:transform,opacity}
.build::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;
  -webkit-mask:url(../img/mark-3d.webp) center/100% no-repeat;mask:url(../img/mark-3d.webp) center/100% no-repeat;opacity:0}
.slide.on .build .pc{animation:fly .7s cubic-bezier(.18,1.25,.32,1) both}
.slide.on .build .p1{--x:-75%;--y:-55%;--r:-35deg;animation-delay:0s}
.slide.on .build .p2{--x:80%;--y:-65%;--r:28deg;animation-delay:.08s}
.slide.on .build .p3{--x:-70%;--y:75%;--r:22deg;animation-delay:.16s}
.slide.on .build .p4{--x:85%;--y:70%;--r:-26deg;animation-delay:.24s}
@keyframes fly{0%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.7)}35%{opacity:1}100%{opacity:1;transform:none}}
.slide.on .mark.build{animation:snap .5s ease-out 1.85s both, bob 5s ease-in-out 2.6s infinite}
.slide.on .build::after{animation:shine .9s ease-in-out .95s both}
@keyframes snap{0%{scale:1}40%{scale:1.06}100%{scale:1}}
@keyframes bob{50%{translate:0 calc(-46% - 12px)}}
@keyframes shine{0%{opacity:1;background-position:150% 0}100%{opacity:1;background-position:-60% 0}}
@media (max-width:1023px){ @keyframes bob{50%{translate:-50% -12px}} }
.still .build .pc{animation:none!important;opacity:1}
@media (prefers-reduced-motion:reduce){ .build .pc{animation:none!important;opacity:1} .mark.build,.build::after{animation:none!important} }

/* ── 첫 장면 연출: 가운데서 로고 조립 → 왼쪽으로 이동 → 글·숫자·버튼 순서대로 (2026-10-14) ── */
.intro .glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.28;pointer-events:none}
.intro .g1{width:42vw;height:42vw;background:#F07826;left:8vw;top:12vh}
.intro .g2{width:34vw;height:34vw;background:#16C55A;left:22vw;top:40vh;opacity:.2}
.slide.intro.on::before{animation:roomIn 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes roomIn{from{clip-path:circle(0% at 50% 55%);opacity:0}to{clip-path:circle(120% at 50% 55%);opacity:1}}
.slide.intro.on .glow{animation:glowIn 1.4s ease .2s both}
@keyframes glowIn{from{opacity:0;scale:.6}}
.intro .mark.build{--dx:calc(min(38vw,680px) - min(18vw,320px))}
.slide.intro.on .mark.build{animation:glide .75s cubic-bezier(.7,0,.2,1) .9s both, snap .35s ease-out .94s both, bob 5s ease-in-out 1.8s infinite}
@keyframes glide{from{transform:translateX(var(--dx)) scale(1.22)}to{transform:none}}
.intro .s-txt h1{position:relative}
.slide.intro.on .s-txt>*{animation:none}
.slide.intro.on .s-txt h1{animation:rise .7s cubic-bezier(.2,.7,.2,1) 1s both}
.slide.intro.on .s-txt p{animation:rise .6s cubic-bezier(.2,.7,.2,1) 1.12s both}
.slide.intro.on .h-stats li{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
.slide.intro.on .h-stats li:nth-child(1){animation-delay:1.22s}.slide.intro.on .h-stats li:nth-child(2){animation-delay:1.28s}
.slide.intro.on .h-stats li:nth-child(3){animation-delay:1.34s}.slide.intro.on .h-stats li:nth-child(4){animation-delay:1.4s}
.slide.intro.on .h-btns{animation:rise .6s cubic-bezier(.2,.7,.2,1) 1.45s both}
@keyframes rise{from{opacity:0;transform:translateY(34px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 -20% 0)}}
.h-stats{display:flex;flex-wrap:wrap;gap:clamp(14px,1.8vw,30px);margin-top:clamp(22px,3.4vh,40px);padding-top:clamp(16px,2.4vh,26px);border-top:1px solid #e6e6e6}
.h-stats li{display:flex;flex-direction:column;gap:2px}
.h-stats b{font-size:clamp(26px,2.4vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.h-stats li:nth-child(odd) b{color:var(--or)}
.h-stats small{font-size:.45em;margin-left:2px;font-weight:700}
.h-stats em{font-size:clamp(12px,.85vw,14px);color:var(--mute)}
.h-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,3vh,34px)}
.hero.s0 .board{display:none!important}
.still .slide.intro *, .still .slide.intro::before{animation:none!important}
@media (max-width:1023px){
  .intro .mark.build{--dx:0px}
  .slide .intro .m1, .slide.intro .mark{width:min(58vw,300px)}
  .intro .g1{width:80vw;height:80vw;left:-10vw;top:auto;bottom:0}
  .intro .g2{width:60vw;height:60vw;left:40vw;top:auto;bottom:10vh}
  .h-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  .h-btns{display:none}
}
@media (prefers-reduced-motion:reduce){ .slide.intro.on *, .slide.intro.on::before{animation:none!important} }

/* 한 장짜리 첫 화면: 아래로 내리기 표시 */
.hero .scroll{bottom:22px;color:var(--ink);font-weight:700;font-size:11px;animation:fadeIn .6s ease 1.8s both}
@keyframes fadeIn{from{opacity:0}}
.hero .scroll i{border-color:var(--ink)}
.hero .scroll::after{content:"";width:10px;height:10px;border-right:2px solid var(--or);border-bottom:2px solid var(--or);transform:rotate(45deg);animation:down 1.4s ease-in-out infinite}
@keyframes down{50%{translate:0 6px}}

/* ── 멈추지 않는 화면: 자리 잡은 뒤에도 천천히 계속 움직임 (2026-10-14 서대표님) ── */
/* 배경: 소실점 쪽으로 천천히 다가감 */
.slide.intro.on::before{animation:roomIn 1.1s cubic-bezier(.2,.7,.2,1) both, walk 18s ease-in-out 1.1s infinite alternate}
@keyframes walk{from{scale:1}to{scale:1.16}}
.slide.intro::before{transform-origin:50% 42%}
/* 로고: 이동이 끝난 뒤 숨 쉬듯 커졌다 작아지며 살짝 돎 (transform 마지막 애니메이션이 이어받음) */
.slide.intro.on .mark.build{animation:glide .75s cubic-bezier(.7,0,.2,1) .9s both, snap .35s ease-out .94s both, bob 5s ease-in-out 1.8s infinite, breathe 7s ease-in-out 1.65s infinite alternate none}
@keyframes breathe{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.045) rotate(1.6deg)}100%{transform:scale(1.07) rotate(-1.2deg)}}
/* 빛: 6초마다 한 번씩 */
.slide.on .build::after{animation:shine .9s ease-in-out .95s both, shine2 6s ease-in-out 4s infinite}
@keyframes shine2{0%,82%{opacity:0;background-position:150% 0}83%{opacity:1;background-position:150% 0}100%{opacity:1;background-position:-60% 0}}
/* 주황·초록 빛 번짐이 천천히 흐름 */
.slide.intro.on .glow{animation:glowIn 1.4s ease .2s both, drift 14s ease-in-out 1.6s infinite alternate}
.slide.intro.on .g2{animation:glowIn 1.4s ease .2s both, drift2 17s ease-in-out 1.6s infinite alternate}
@keyframes drift{0%{translate:0 0}50%{translate:6vw -4vh}100%{translate:-3vw 5vh}}
@keyframes drift2{0%{translate:0 0}50%{translate:-5vw 3vh}100%{translate:7vw -2vh}}
/* 아래 장면 선 그림: 화면에 들어오면 서서히 커지며 흐름 */
.scene .art.in{animation:float 16s ease-in-out .9s infinite alternate}
@keyframes float{0%{scale:1;translate:0 0}50%{scale:1.04;translate:0 -10px}100%{scale:1.07;translate:0 4px}}
.nextp .np-go i{animation:nudge 1.6s ease-in-out infinite}
.still *,.still *::before,.still *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){ .slide.intro::before,.mark.build,.glow,.scene .art,.build::after{animation:none!important} }

/* ── 5장 넘김 + 계속 움직임 (2026-10-14) ── */
/* 장면 막대: 머무는 시간 동안 주황색이 차오름 */
.pager button{position:relative;overflow:hidden;width:44px;height:4px;background:#d6d6d6}
.pager button[aria-current=true]{width:72px;background:#d6d6d6}
.pager button i{position:absolute;inset:0;background:var(--or);transform-origin:left;transform:scaleX(0)}
.pager button.run i{animation:fill var(--d) linear forwards}
.pager button[aria-current=true]:not(.run) i{transform:none}
@keyframes fill{to{transform:scaleX(1)}}
/* 모든 장면: 배경이 천천히 다가오고, 로고는 들어온 뒤 숨 쉬듯 계속 움직임 */
.slide.on::before{animation:walk 9s ease-out both}
.slide.intro.on::before{animation:roomIn 1.1s cubic-bezier(.2,.7,.2,1) both, walk 9s ease-out 1.1s both}
.slide:not(.intro) .mark{transition:transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .8s}
.slide:not(.intro):not(.on) .m1{transform:translateX(-12%) scale(.9) rotate(-6deg);opacity:0}
.slide:not(.intro):not(.on) .m2{transform:translateX(12%) scale(.9) rotate(6deg);opacity:0}
.slide.on:not(.intro) .mark{animation:breathe 7s ease-in-out 1.2s infinite alternate none}
.slide.on .s-txt h1,.slide.on .s-txt h2{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
.slide.on:not(.intro) .s-txt>*{animation:up .9s cubic-bezier(.2,.7,.2,1) both, sway 8s ease-in-out 1s infinite alternate}
@keyframes sway{to{translate:0 -8px}}
.slide{transition:opacity .9s ease,visibility .9s}
.hero .arw{display:block}
@media (max-width:1023px){ .hero .arw{display:none} }
.hero .pager{bottom:104px}
@media (max-width:767px){ .hero .pager{bottom:30px} }

/* 오른쪽 빠른 메뉴: 위아래로 천천히 떠다님 (예일식, 2026-10-14) */
.quick{animation:qfloat 3.2s ease-in-out infinite}
@keyframes qfloat{0%,100%{translate:0 -10px}50%{translate:0 10px}}
.quick a{animation:qwave 3.2s ease-in-out infinite}
.quick a:nth-child(2){animation-delay:.12s}.quick a:nth-child(3){animation-delay:.24s}
.quick a:nth-child(4){animation-delay:.36s}.quick a:nth-child(5){animation-delay:.48s}.quick a:nth-child(6){animation-delay:.6s}
@keyframes qwave{0%,100%{translate:0 -3px}50%{translate:0 3px}}
.quick:hover,.quick:hover a{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .quick,.quick a{animation:none} }

/* 오픈 준비중 표시 */
.soon{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 10px;border-radius:999px;background:#111;color:#fff;font-size:12px;font-weight:700;letter-spacing:0}
/* 오시는 길 지도 */
.map-card{margin-top:clamp(20px,3vh,32px);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 20px 40px -30px rgba(0,0,0,.35);max-width:640px}
.map{display:block;width:100%;height:clamp(200px,28vh,280px);border:0;filter:saturate(.85)}
.map-info{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
.map-addr{display:grid;gap:2px;font-size:15px}
.map-addr span{font-size:13px;color:var(--mute)}
.map-btns{display:flex;gap:8px}
.map-btns .btn{min-height:42px;padding:0 16px;font-size:14px}

/* 첫 화면 배경 주황·초록 번짐 삭제: 다른 장면처럼 깨끗한 흰 바탕 (2026-10-14 서대표님) */
.intro .glow{display:none!important}

/* ── 파트 나눔: 얇은 줄눈 선 + 번호·이름 (큰 NEXT 띠 대신, 2026-10-14) ── */
.nextp{min-height:0!important;padding:clamp(56px,9vh,96px) 0!important;background:#fff!important;text-align:left!important}
.nextp::before,.nextp::after{display:none!important}
.np-row{display:flex;align-items:center;gap:clamp(14px,2vw,28px);color:var(--ink)}
.np-no{font-weight:800;font-size:clamp(28px,2.6vw,44px);color:var(--or);letter-spacing:-.04em;min-width:2ch}
.np-line{position:relative;flex:1;height:3px;background:#e5e5e5;border-radius:2px;overflow:hidden}
.np-line i{position:absolute;inset:0;background:var(--or);transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .15s}
.nextp.in .np-line i{transform:scaleX(1)}
.np-name{font-weight:800;font-size:clamp(26px,2.6vw,44px);letter-spacing:-.04em;white-space:nowrap}
.np-arrow{position:relative;width:clamp(44px,3.6vw,60px);height:clamp(44px,3.6vw,60px);border-radius:50%;border:2px solid var(--ink);flex:none;transition:.25s}
.np-arrow::after{content:"";position:absolute;inset:34%;border-top:2.5px solid var(--ink);border-right:2.5px solid var(--ink);transform:translateX(-12%) rotate(45deg)}
.np-row:hover .np-arrow{background:var(--or);border-color:var(--or)}
.np-row:hover .np-name{color:var(--or)}
@media (max-width:767px){ .np-row{gap:12px} .np-arrow{display:none} }
.nextp .wrap{display:block!important}
.np-row{width:100%}
.still .nextp .np-line i{transform:scaleX(1)}
.tbd{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:#f1f1f1;color:#888;font-size:12px;font-weight:600}

/* ── 마지막 장면: 로고가 팡 터지고 다시 맞춰짐 (2026-10-14 서대표님) ── */
.finale .mark.burst{aspect-ratio:1;width:min(36vw,72vh,640px);filter:drop-shadow(0 26px 34px rgba(0,0,0,.14))}
.burst .pc{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.slide.finale.on .burst{animation:rise2 .9s cubic-bezier(.2,.7,.2,1) .1s both, breathe 7s ease-in-out 2.2s infinite alternate none}
@keyframes rise2{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.05);opacity:0}60%{opacity:1}100%{transform:scale(1)}}
.slide.finale.on .burst .pc{animation:blast 1.6s cubic-bezier(.6,0,.2,1) .3s both}
.burst .b1{--x:-12%;--y:-12%;--r:0deg}.burst .b2{--x:12%;--y:-12%;--r:0deg}
.burst .b3{--x:-12%;--y:12%;--r:0deg}.burst .b4{--x:12%;--y:12%;--r:0deg}
@keyframes blast{0%{opacity:1;transform:translate(var(--x),var(--y))}45%{opacity:1;transform:translate(var(--x),var(--y))}88%{transform:translate(calc(var(--x)*-.04),calc(var(--y)*-.04))}100%{opacity:1;transform:none}}
.sparks{position:absolute;inset:0;pointer-events:none}
.sparks i{position:absolute;left:50%;top:50%;width:9%;height:3.4%;margin:-1.7% 0 0 -4.5%;border-radius:999px;background:var(--c);opacity:0;transform:rotate(var(--a)) translateX(0) rotate(var(--r)) scale(var(--s))}
.slide.finale.on .sparks i{animation:spark 1.3s cubic-bezier(.15,.8,.3,1) calc(.5s + var(--t)) both}
@keyframes spark{0%{opacity:1;transform:rotate(var(--a)) translateX(0) rotate(var(--r)) scale(var(--s))}70%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(calc(var(--d)*2.2)) rotate(calc(var(--r) + 120deg)) scale(calc(var(--s)*.6))}}
.still .finale .burst,.still .finale .burst .pc{opacity:1;animation:none!important}
.still .finale .sparks{display:none}
@media (max-width:1023px){
  .finale .mark.burst{width:min(82vw,420px)}
}
@media (prefers-reduced-motion:reduce){ .burst,.burst .pc,.sparks i{animation:none!important;opacity:1} .sparks{display:none} }

/* 마지막 장면: 불꽃 조각 없앰(유아틱, 서대표님), 맞물린 뒤 빛 한 번 */
.finale .sparks{display:none!important}
.finale .burst::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.8) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;-webkit-mask:url(../img/mark-3d.webp) center/100% no-repeat;mask:url(../img/mark-3d.webp) center/100% no-repeat;opacity:0}
.slide.finale.on .burst::after{animation:shine 1s ease-in-out 1.85s both}

/* 마지막 장면: 로고가 위에서 떨어져 통통통 튕기며 자리 잡음 (2026-10-14 서대표님, 터짐 없음) */
.slide.finale.on .burst .pc{animation:none!important;opacity:1}
.slide.finale.on .burst{animation:drop 1.6s linear .15s both, breathe 7s ease-in-out 2.2s infinite alternate none!important}
@keyframes drop{
  0%{transform:translateY(-120vh);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  38%{transform:translateY(0) scale(1.06,.92);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  56%{transform:translateY(-24%) scale(1);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  70%{transform:translateY(0) scale(1.03,.96);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  80%{transform:translateY(-9%);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  89%{transform:translateY(0) scale(1.015,.985);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  95%{transform:translateY(-3%);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  100%{transform:none}
}
.slide.finale.on .burst::after{animation:shine 1s ease-in-out 1.8s both}
.finale .burst{transform-origin:50% 100%}

/* 2~4번 장면: 로고가 옆에서 굴러 들어와 들어온 쪽으로 통통통 (2026-10-14 서대표님)
   2·4번(로고 오른쪽) = 오른쪽에서 왼쪽으로, 3번(로고 왼쪽) = 왼쪽에서 오른쪽으로 */
.slide:not(.intro):not(.finale) .mark{transition:none!important}
.slide:not(.intro):not(.finale):not(.on) .mark{opacity:0}
.slide.on:not(.intro):not(.finale) .mark{opacity:1}
.slide.on:not(.intro):not(.finale) .m2{animation:inR 1.7s linear .1s both, breathe 7s ease-in-out 2.1s infinite alternate none!important}
.slide.on:not(.intro):not(.finale) .m1{animation:inL 1.7s linear .1s both, breathe 7s ease-in-out 2.1s infinite alternate none!important}
@keyframes inR{
  0%{transform:translateX(110vw) rotate(10deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  38%{transform:translateX(0) scale(.93,1.04);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  56%{transform:translateX(18%) rotate(2deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  70%{transform:translateX(0) scale(.96,1.02);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  80%{transform:translateX(7%);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  89%{transform:translateX(0) scale(.985,1.01);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  95%{transform:translateX(2%);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  100%{transform:none}
}
@keyframes inL{
  0%{transform:translateX(-110vw) rotate(-10deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  38%{transform:translateX(0) scale(.93,1.04);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  56%{transform:translateX(-18%) rotate(-2deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  70%{transform:translateX(0) scale(.96,1.02);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  80%{transform:translateX(-7%);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  89%{transform:translateX(0) scale(.985,1.01);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  95%{transform:translateX(-2%);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  100%{transform:none}
}
@media (prefers-reduced-motion:reduce){ .slide.on:not(.intro):not(.finale) .mark{animation:none!important} }

/* 통통을 가볍게 (2026-10-14 서대표님: 툭툭 말고 통통): 찌그러짐 없앰, 부드러운 튕김 4번 */
@keyframes drop2{
  0%{transform:translateY(-120vh);animation-timing-function:cubic-bezier(.4,0,.9,.6)}
  40%{transform:translateY(0);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  55%{transform:translateY(-14%);animation-timing-function:cubic-bezier(.11,0,.5,0)}
  68%{transform:translateY(0);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  77%{transform:translateY(-6%);animation-timing-function:cubic-bezier(.11,0,.5,0)}
  85%{transform:translateY(0);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  90%{transform:translateY(-2.4%);animation-timing-function:cubic-bezier(.11,0,.5,0)}
  95%{transform:translateY(0);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  97.5%{transform:translateY(-.8%);animation-timing-function:cubic-bezier(.11,0,.5,0)}
  100%{transform:none}
}
@keyframes inR2{
  0%{transform:translateX(110vw) rotate(8deg);animation-timing-function:cubic-bezier(.4,0,.9,.6)}
  40%{transform:translateX(0);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  55%{transform:translateX(14%);animation-timing-function:cubic-bezier(.11,0,.5,0)}
  68%{transform:translateX(0);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  77%{transform:translateX(6%);animation-timing-function:cubic-bezier(.11,0,.5,0)}
  85%{transform:translateX(0);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  90%{transform:translateX(2.4%);animation-timing-function:cubic-bezier(.11,0,.5,0)}
  95%{transform:translateX(0);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  97.5%{transform:translateX(.8%);animation-timing-function:cubic-bezier(.11,0,.5,0)}
  100%{transform:none}
}
@keyframes inL2{
  0%{transform:translateX(-110vw) rotate(-8deg);animation-timing-function:cubic-bezier(.4,0,.9,.6)}
  40%{transform:translateX(0);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  55%{transform:translateX(-14%);animation-timing-function:cubic-bezier(.11,0,.5,0)}
  68%{transform:translateX(0);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  77%{transform:translateX(-6%);animation-timing-function:cubic-bezier(.11,0,.5,0)}
  85%{transform:translateX(0);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  90%{transform:translateX(-2.4%);animation-timing-function:cubic-bezier(.11,0,.5,0)}
  95%{transform:translateX(0);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  97.5%{transform:translateX(-.8%);animation-timing-function:cubic-bezier(.11,0,.5,0)}
  100%{transform:none}
}
.slide.finale.on .burst{animation:drop2 1.5s linear .15s both, breathe 7s ease-in-out 2s infinite alternate none!important}
.slide.on:not(.intro):not(.finale) .m2{animation:inR2 1.5s linear .1s both, breathe 7s ease-in-out 1.9s infinite alternate none!important}
.slide.on:not(.intro):not(.finale) .m1{animation:inL2 1.5s linear .1s both, breathe 7s ease-in-out 1.9s infinite alternate none!important}
.slide.finale.on .burst::after{animation:shine 1s ease-in-out 1.6s both}
.reel img{flex:none;min-width:160px;background:#eee}

/* ── 수강 후기 벽 ── */
.hwall{background:var(--bg2)}
.hwall .wrap{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center}
.hw-hint{margin-top:18px;font-size:14px;color:var(--mute)}
.hw-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;height:min(80vh,820px);overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
.hw-track{display:flex;flex-direction:column;gap:14px;animation:hwup 60s linear infinite}
.hw-col.c1 .hw-track{animation-duration:72s;animation-delay:-20s}
.hw-col.c2 .hw-track{animation-duration:66s;animation-delay:-38s}
.hw-cols:hover .hw-track{animation-play-state:paused}
@keyframes hwup{to{transform:translateY(-50%)}}
.hw-card{display:block;padding:0;border:0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 10px 26px -16px rgba(0,0,0,.35);cursor:zoom-in;transition:transform .2s}
.hw-card:hover{transform:scale(1.03)}
.hw-card img{width:100%;height:auto}
.hw-zoom{position:fixed;inset:0;z-index:80;background:rgba(17,17,17,.82);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.hw-zoom img{max-height:92vh;width:auto;max-width:94vw;border-radius:8px;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.hw-x{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;background:#fff}
.hw-x::before,.hw-x::after{content:"";position:absolute;left:12px;right:12px;top:21px;height:2px;background:#111;transform:rotate(45deg)}
.hw-x::after{transform:rotate(-45deg)}
@media (max-width:1023px){
  .hwall .wrap{grid-template-columns:1fr}
  .hw-cols{grid-template-columns:repeat(2,1fr);height:70vh}
}
@media (prefers-reduced-motion:reduce){ .hw-track{animation:none} .hw-cols{overflow:auto} }
.still .hw-track{animation:none}

/* ── 첫 화면 후기 창 (예일식 한켠) ── */
.hero-reviews{position:absolute;z-index:4;right:clamp(110px,8.5vw,140px);bottom:28px;width:210px;background:#fff;border-radius:16px;box-shadow:0 24px 50px -26px rgba(0,0,0,.45);padding:12px;display:none;color:var(--ink)}
.hero.flip .hero-reviews{right:auto;left:clamp(56px,4vw,80px)}
.hero.s0 .hero-reviews{display:none!important}
.hr-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-bottom:8px}
.hr-head em{font-style:normal;font-weight:800;color:#fff;background:var(--or);border-radius:999px;padding:1px 8px;font-size:12px}
.hr-win{display:block;height:250px;overflow:hidden;border-radius:8px;border:1px solid var(--line)}
.hr-track{display:block;height:100%;transition:transform .9s cubic-bezier(.6,0,.2,1)}
.hr-track img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.hr-more{display:block;margin-top:8px;font-size:12px;font-weight:700;color:var(--or)}
.hero-reviews:hover{transform:translateY(-3px);transition:.2s}
@media (min-width:1360px) and (min-height:820px){ .hero-reviews{display:block} }

/* ── 리뉴얼 이벤트 팝업 (가운데 큰 창 + 선물 상자, 화면을 움직이면 왼쪽 아래 버튼으로 들어감) ── */
.ev-dim{position:fixed;inset:0;z-index:69;background:rgba(17,17,17,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .4s}
.ev-dim.in{opacity:1}
.ev{position:fixed;inset:0;margin:auto;z-index:70;width:min(480px,calc(100vw - 32px));height:max-content;max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:28px;box-shadow:0 50px 120px -30px rgba(0,0,0,.6);transform-origin:var(--evx,10%) var(--evy,95%);transform:scale(.6) translateY(60px);opacity:0;transition:transform .6s cubic-bezier(.2,1.35,.4,1),opacity .35s}
.ev.in{transform:none;opacity:1}
.ev.out{transform:scale(.08);opacity:0;transition:transform .5s cubic-bezier(.6,0,.4,1),opacity .45s .05s}
.ev-x{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9)}
.ev-x::before,.ev-x::after{content:"";position:absolute;left:11px;right:11px;top:18px;height:2px;background:#333;transform:rotate(45deg)}
.ev-x::after{transform:rotate(-45deg)}
.ev-hero{position:relative;overflow:hidden;padding:26px 20px 18px;text-align:center;background:radial-gradient(120% 90% at 50% 40%,#FFE3CC 0%,#FFC79C 45%,#F5A066 100%)}
.ev-rays{position:absolute;left:50%;top:44%;width:720px;height:720px;margin:-360px 0 0 -360px;background:repeating-conic-gradient(rgba(255,255,255,.4) 0 8deg,transparent 8deg 20deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 60%);mask:radial-gradient(circle,#000 0,transparent 60%);animation:evRays 24s linear infinite}
@keyframes evRays{to{transform:rotate(360deg)}}
.ev-gift{position:relative;display:block;width:min(240px,62%);margin:0 auto;overflow:visible}
.g-sh{fill:rgba(91,58,34,.25);transform-origin:130px 206px;animation:evSh 2.6s ease-in-out infinite}
.g-box,.g-lid{transform-box:view-box}
.ev.in .g-box{animation:evBob 2.6s ease-in-out infinite}
.ev.in .g-lid{transform-origin:40px 100px;animation:evLid 2.6s ease-in-out infinite}
.ev.in .ev-gift{animation:evDrop .9s cubic-bezier(.3,1.5,.5,1) both}
.g-sp path{transform-box:fill-box;transform-origin:center;animation:evTw 1.8s ease-in-out infinite}
.g-sp path:nth-child(2){animation-delay:.5s}.g-sp path:nth-child(3){animation-delay:.9s}.g-sp path:nth-child(4){animation-delay:1.3s}
@keyframes evBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes evLid{0%,40%,100%{transform:translateY(0) rotate(0)}52%{transform:translateY(-22px) rotate(-6deg)}62%{transform:translateY(-14px) rotate(-3deg)}72%{transform:translateY(-6px) rotate(0)}}
@keyframes evSh{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.9);opacity:.7}}
@keyframes evTw{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1.15);opacity:1}}
@keyframes evDrop{0%{transform:translateY(-120px) scale(.7);opacity:0}100%{transform:none;opacity:1}}
.ev-k{position:relative;margin-top:10px;display:inline-block;padding:7px 16px;border-radius:999px;background:#5B3A22;color:#fff;font-size:14px;font-weight:700;letter-spacing:-.01em}
.ev-k b{color:#FFC79C}
.ev-body{padding:22px 26px 20px}
.ev-t{font-size:clamp(24px,6.4vw,30px);font-weight:800;line-height:1.3;letter-spacing:-.035em;text-align:center}
.ev-t b{color:var(--or)}
.ev-t em{font-style:normal;color:var(--or);display:inline-block}
.ev-l{margin:18px 0 8px;display:grid;gap:10px}
.ev-l li{position:relative;font-size:15.5px;line-height:1.5;color:#333;padding:14px 16px 13px;background:var(--bg2);border-radius:16px}
.ev-l li b{color:var(--ink)}
.ev-n{display:inline-block;margin-right:6px;padding:2px 9px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;vertical-align:2px}
.ev-l small{display:block;font-size:13px;color:var(--or-d);font-weight:700;margin-top:3px}
.ev-l .ev-p{background:#FFF3EA;box-shadow:inset 0 0 0 1.5px var(--or)}
.ev-l .ev-p .ev-n{background:var(--or)}
.ev-note{font-size:13px;color:var(--mute);text-align:center;margin-bottom:14px}
.ev .btn{width:100%;min-height:58px;font-size:18px;animation:evBtn 2.6s ease-in-out infinite}
@keyframes evBtn{0%,100%{box-shadow:0 0 0 0 rgba(240,120,38,.5)}50%{box-shadow:0 0 0 10px rgba(240,120,38,0)}}
.ev-today{display:block;margin:12px auto 0;font-size:13px;color:var(--mute);text-decoration:underline}
.ev-tab{position:fixed;left:clamp(16px,3vw,56px);bottom:24px;z-index:60;display:flex;align-items:center;gap:8px;padding:9px 18px 9px 10px;border-radius:999px;background:var(--or);color:#111;font-weight:800;font-size:14.5px;box-shadow:0 14px 30px -10px rgba(217,99,26,.7);transition:transform .3s}
.ev-tab:hover{transform:translateY(-3px)}
.ev-tab-g{width:28px;height:26px;flex:none;overflow:visible;transform-origin:50% 90%;animation:evTab 3s ease-in-out infinite}
@keyframes evTab{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-12deg)}88%{transform:rotate(10deg)}92%{transform:rotate(-6deg)}96%{transform:rotate(3deg)}}
@media (max-width:767px){
  .ev{border-radius:24px}
  .ev-hero{padding:22px 16px 14px}
  .ev-body{padding:18px 18px 16px}
  .ev-l li{font-size:14.5px;padding:12px 14px}
  .ev-tab{bottom:calc(84px + env(safe-area-inset-bottom));left:12px;padding:8px 14px 8px 9px;font-size:13px}
}
@media (max-height:700px){ .ev-gift{width:min(170px,46%)} .ev-hero{padding-top:16px} }
  .ev-tab{bottom:calc(84px + env(safe-area-inset-bottom));left:12px;padding:8px 14px;font-size:13px}
}