/* okul.css — v145 (2026-10-14) · Haeyo Korean on the Okulistik layout, haeyo colours
   v144 used Okulistik's orange; 대표: "주황 별로 — 같은 채도의 하늘색" → sky #42b0ff (hsl 205 100% 63%, the same saturation and
   lightness as Okulistik's #ff9343), with the sun-yellow of the logo and a little green as accents.
   Contrast: text on sky / yellow / green is navy #0f172a (7.5:1 or more); sky as TEXT is the deep sky #0b6fbd (5.2:1).
   Loaded after app.css: the token block re-colours every page and the study app; the rest is the header, home, sign-up, 1:1 and footer. */

:root{
  --ok-sky:#a8dcff; --ok-sky-hover:#8fd1ff; --ok-sky-deep:#0b6fbd; --ok-sky-ink:#075288; --ok-sky-soft:#ebf7ff; --ok-sky-line:#cfe7fb;
  --ok-yellow:#ffc111; --ok-yellow-soft:#fff6d9; --ok-green:#80cc45; --ok-green-soft:#eef8e6; --ok-cream:#fff9ec;
  --ok-navy:#0f172a; --ok-text:#334155; --ok-muted:#64748b; --ok-line:#e7edf3; --ok-bg:#f6f9fc;
  --ok-sh:0 6px 24px rgba(15,23,42,.06); --ok-sh-lg:0 18px 50px rgba(15,23,42,.10);
  --ok-ui:"Inter","Noto Sans KR",system-ui,-apple-system,sans-serif;

  /* the haeyo variables, mapped */
  --coral:var(--ok-sky); --coral-deep:var(--ok-sky-deep); --coral-soft:var(--ok-sky-soft);
  --honey:var(--ok-yellow); --honey-deep:#8a6400; --honey-soft:var(--ok-yellow-soft);
  --leaf:var(--ok-green); --leaf-deep:#3f7a12; --leaf-soft:var(--ok-green-soft);
  --sky:var(--ok-sky); --sky-deep:var(--ok-sky-deep); --sky-soft:var(--ok-sky-soft);
  --navy:var(--ok-navy); --navy-2:#1e293b;
  --ink:var(--ok-navy); --ink-2:var(--ok-text); --muted:var(--ok-muted); --faint:#6b7685;
  --paper:#fff; --card:#fff; --alt:var(--ok-bg); --alt2:#eef3f8;
  --line:var(--ok-line); --line-2:#d5dee8;
  --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:9999px;
  --sh:var(--ok-sh); --sh-lift:var(--ok-sh-lg);
  --h-btn:46px; --h-btn-sm:40px; --h-input:46px;
  --disp:"Barlow","Noto Sans KR",system-ui,sans-serif;
  --body:"Barlow","Noto Sans KR",system-ui,-apple-system,sans-serif;
}
body{font-family:var(--body);font-weight:500;color:var(--ok-text);background:#fff}
h1,h2,h3,h4{font-family:var(--disp);color:var(--ok-navy);letter-spacing:-.01em}
h1 .kr,h2 .kr,h3 .kr{font-family:var(--kr-disp)}
.eyebrow{color:var(--ok-sky-deep);font-family:var(--ok-ui)}
a{color:var(--ok-sky-deep)}

/* buttons — pill, sky with navy text, navy focus ring */
.btn{border-radius:var(--r-pill);font-family:var(--ok-ui);font-weight:600;letter-spacing:0}
.btn:focus-visible,.chipb:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.okmb:focus-visible{outline:3px solid var(--ok-navy);outline-offset:2px}
.btn-c,.nbeta{background:var(--ok-sky);color:var(--ok-navy);box-shadow:0 8px 18px -10px rgba(80,170,240,.6)}
.btn-c:hover{background:var(--ok-sky-hover);color:var(--ok-navy)}
.btn-k{background:var(--ok-navy);color:#fff}.btn-k:hover{background:#1e293b;color:#fff}
.btn-h{background:var(--ok-yellow);color:var(--ok-navy)}
.btn-o{background:#fff;border-color:var(--line-2);color:var(--ok-navy)}
.btn-o:hover{background:var(--ok-sky-soft);border-color:var(--ok-sky)}
/* text that used to be white on coral: navy on sky */
.band .btn-o:hover,.lchip.on,.lvtabs a.on i,.dnav button.pri,.bagbtn.has b,.adm-nav a b,.slide.cover .cv-g mark,.pch.full,.say.on,.minislide .opts span.on,:is(.slide,.tbook) .revall.on,.lcard2.going .n,.sp-stop,.rdph .beta,.nbeta,.gbk-v span{color:var(--ok-navy)}

/* ---------- header ---------- */
.oknav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--ok-line)}
.oknav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:80px}
.okmegas{display:flex;gap:6px;align-items:center}
.okmega{position:relative}
.okmb{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 14px 0 8px;border:0;border-radius:14px;background:transparent;font:600 15px/1 var(--ok-ui);color:var(--ok-navy);cursor:pointer;white-space:nowrap}
.okmb:hover,.okmega.open .okmb{background:var(--ok-bg)}
.okmega:first-child .okmb{background:var(--ok-cream)}
.okdot{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--ok-sky)}
.okdot.y{background:var(--ok-yellow)}
.okdot svg{width:18px;height:18px;fill:none;stroke:var(--ok-navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.okchev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.okmega.open .okchev{transform:rotate(180deg)}
.okpanel{position:absolute;left:0;top:calc(100% + 12px);width:min(720px,92vw);background:#fff;border-radius:22px;box-shadow:var(--ok-sh-lg);border:1px solid var(--ok-line);padding:22px;z-index:60}
.okmgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 24px}
.okmg>small{display:block;font:700 11px/16px var(--ok-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ok-muted);margin-bottom:6px}
.okmrow{display:flex;align-items:center;gap:12px;padding:4px 0;font:600 13px/20px var(--ok-ui)}
.okmrow a{color:var(--ok-navy);text-decoration:none}
.okmrow a:hover{color:var(--ok-sky-deep);text-decoration:underline}
.okmrow.off{color:var(--ok-muted);font-weight:500}
.oklv{display:inline-grid;place-items:center;min-width:40px;height:30px;border-radius:9999px;background:var(--ok-sky-soft);color:var(--ok-sky-ink)!important;font:700 13px/1 var(--ok-ui)}
.okmrow.off .oklv{background:var(--ok-bg);color:var(--ok-muted)!important}
.okmfoot{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;padding-top:14px;border-top:1px solid var(--ok-line)}
.okmfoot a{font:600 13px/20px var(--ok-ui);color:var(--ok-sky-deep);text-decoration:none}
.okmi{display:block;padding:8px 10px;margin:0 -10px 2px;border-radius:12px;text-decoration:none;color:var(--ok-navy)}
.okmi:hover{background:var(--ok-bg)}
.okmi b{display:block;font:600 15px/22px var(--ok-ui)}
.okmi span{display:block;font:500 13px/18px var(--body);color:var(--ok-muted)}
.okbdg{display:inline-block;padding:0 7px;border-radius:9999px;background:var(--ok-yellow);color:var(--ok-navy);font:700 11px/18px var(--ok-ui);vertical-align:2px}
.okbrand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ok-navy)}
.okbrand svg{width:42px;height:42px}
.okbrand b{display:block;font:800 27px/1 var(--disp);letter-spacing:-.02em;color:var(--ok-navy)}
.okbrand small{display:block;font:600 11px/1.3 var(--kr);color:var(--ok-muted);letter-spacing:.06em}
.okright{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.oklink{font:600 14px/20px var(--ok-ui);color:var(--ok-navy);text-decoration:underline;text-underline-offset:4px;padding:8px 8px;white-space:nowrap}
.okcta{white-space:nowrap;height:44px;padding:0 22px}
.oknav .langbtn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:9999px;border:1px solid var(--line-2);background:#fff;color:var(--ok-navy);font:600 13px var(--ok-ui)}
.oknav .langbtn:hover{border-color:var(--ok-sky);background:var(--ok-sky-soft)}
.oknav .langbtn svg{width:18px;height:18px;color:var(--ok-navy)}
.oknav .langbtn b{color:var(--ok-navy);font-weight:600}
.oknav .langbox{right:0;left:auto}
/* desktop: the feature card floats at the top left of the hero (Okulistik) */
.okhero .wrap{position:static}

/* ---------- home: hero ---------- */
.okhero{position:relative;overflow:hidden;padding:56px 0 30px;background:#fff;min-height:470px}
@media (max-width:1500px){.okh1{font-size:2.65rem}}
@media (max-width:1240px){.okhero{min-height:0}}
.okc{position:absolute;border-radius:50%;pointer-events:none}
.okc.c1{width:22px;height:22px;background:var(--ok-yellow);right:14%;top:120px}
.okc.c2{width:16px;height:16px;background:var(--ok-sky);left:30%;top:260px;opacity:.6}
.okc.c3{width:12px;height:12px;background:var(--ok-green);right:28%;top:300px}
.okc.c4{width:44px;height:44px;background:var(--ok-sky-soft);right:-12px;top:220px}
.okhero .wrap{position:relative;text-align:center}


.okspark{font-style:normal;color:var(--ok-yellow);font-size:22px;line-height:1}










.okh1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.18;font-weight:800;margin:0 auto;max-width:15em}
.okac{position:relative;display:inline-block;color:#4f86c6;padding-bottom:4px}
.okul{position:absolute;left:0;right:0;bottom:-6px;width:100%;height:14px;overflow:visible}
.okul path{fill:none;stroke:var(--ok-yellow);stroke-width:6;stroke-linecap:round}










/* ---------- home: the two panels ---------- */






























.okmi .okbdg{display:inline-block;font:700 11px/18px var(--ok-ui);color:var(--ok-navy)}


/* ---------- home: numbers · 1:1 · sign up ---------- */












.okwa{font:600 14px var(--ok-ui);color:var(--ok-sky-deep);text-decoration:none}
.okwa:hover{text-decoration:underline}
.okend{padding:64px 0 80px;text-align:center}
.okend h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:26px}
.okend .row{justify-content:center}

/* ---------- sign up · 1:1 ---------- */
.okauth{padding:56px 0 72px;background:linear-gradient(#fff,var(--ok-bg))}
.okauthbox{max-width:440px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--ok-line);border-radius:24px;box-shadow:var(--ok-sh-lg);padding:34px 28px}
.okauthbox h1{font-size:clamp(1.8rem,4vw,2.3rem);margin:8px 0 6px}
.okauthbox .lead{color:var(--ok-muted);margin:0 0 22px}
.okacct{display:grid;gap:14px;text-align:left}
.okacct .field{display:grid;gap:6px;margin:0}
.okacct .field span{font:600 13px/20px var(--ok-ui);color:var(--ok-navy)}
.okacct input{height:48px;padding:0 14px;border:1px solid #94a3b8;border-radius:12px;font:500 16px var(--body);color:var(--ok-navy);background:#fff}
.okacct input:focus-visible{outline:none;border-color:var(--ok-navy);box-shadow:0 0 0 3px var(--ok-sky-line)}
.okacct .okgo{height:50px;width:100%;font-size:16px}
.okacct .note{margin:0;text-align:center;font-size:.85rem}
.okacct .status{margin:0;min-height:0;color:#b91c1c;font:600 13px var(--ok-ui);text-align:center}
.okacct .status:empty{display:none}
.okor{display:flex;align-items:center;gap:10px;color:var(--ok-muted);font:600 12px var(--ok-ui)}
.okor::before,.okor::after{content:"";flex:1;height:1px;background:var(--ok-line)}
.okswap{margin:18px 0 0;font-size:.92rem;color:var(--ok-muted)}
.okey{display:inline-block;padding:4px 12px;border-radius:9999px;background:var(--ok-sky-soft);color:var(--ok-sky-ink);font:700 12px/18px var(--ok-ui);letter-spacing:.06em;text-transform:uppercase}
.okhd{text-align:center;max-width:680px;margin:0 auto 30px}
.okhd h1{margin:10px 0 8px}
.okhd p{color:var(--ok-muted);font-size:1.05rem;margin:0}
.okopts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:980px;margin:0 auto}
.okopt{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--ok-line);border-radius:20px;padding:22px;box-shadow:var(--ok-sh)}
.okopt.on{border-color:var(--ok-sky)}
.okopt .kr{font:600 12px var(--kr);color:var(--ok-muted)}
.okopt b{font:700 19px/1.25 var(--disp);color:var(--ok-navy)}
.okopt p{margin:0;font-size:.92rem;color:var(--ok-muted);flex:1}
.okopt .okamt{font:800 28px/1 var(--disp);color:var(--ok-navy)}
.okopt .okamt small{font:600 13px var(--ok-ui);color:var(--ok-muted);margin-left:4px}
.okgroup{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;max-width:980px;margin:22px auto 0;padding:18px 22px;border-radius:18px;background:var(--ok-cream)}
.okgroup b{font:700 16px var(--ok-ui);color:var(--ok-navy)}
.okgroup span{flex:1;min-width:220px;font-size:.95rem;color:var(--ok-text)}

/* teacher cards and old blocks on the new palette */
.tcard{border-radius:22px;box-shadow:var(--ok-sh)}
.tcard .pf{background:var(--ok-sky);color:var(--ok-navy)}

/* ---------- footer ---------- */
.okfoot{background:var(--ok-bg);border-top:1px solid var(--ok-line);padding:48px 0 28px;margin-top:0}
.okfoot .wrap{display:block}
.okfcols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.okfc{display:flex;flex-direction:column;gap:6px}
.okfc b{font:700 12px/20px var(--ok-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ok-navy);margin-bottom:4px}
.okfc a{font:500 14px/22px var(--body);color:var(--ok-muted);text-decoration:none}
.okfc a:hover{color:var(--ok-navy);text-decoration:underline}
.okfbase{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:34px;padding-top:20px;border-top:1px solid var(--ok-line);font:500 13px/20px var(--body);color:var(--ok-muted)}
.okfbase .okbrand b{font-size:20px}
.okfbase .okbrand svg{width:32px;height:32px}
.fab{background:#25D366;color:#0b2e17}

/* ---------- smaller screens ---------- */
@media (max-width:1240px){
  
  
  
  .okhero{padding-top:44px}
}

@media (max-width:900px){
  .oknav .wrap{grid-template-columns:auto 1fr;grid-template-areas:"brand right" "megas megas";row-gap:8px;padding-top:10px;padding-bottom:10px;min-height:0}
  .okbrand{grid-area:brand}.okright{grid-area:right}
  .okmegas{grid-area:megas;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .okmega{position:static}
  .okmb{width:100%;justify-content:flex-start;background:var(--ok-bg);padding:0 10px 0 6px}
  .okmb .okchev{margin-left:auto}
  .okpanel{left:12px;right:12px;width:auto;top:auto;margin-top:8px;max-height:72vh;overflow:auto}
  .okmgrid,.okmgrid.three{grid-template-columns:repeat(2,1fr)}
  .okopts{grid-template-columns:1fr}
  .okfcols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .okright{gap:4px;min-width:0}
  .oknav .langbtn b,.oknav .langbtn .cv{display:none}
  .oklink{padding:8px 4px;font-size:13px}
  .okcta{height:40px;padding:0 14px;font-size:13px}
  .okbrand b{font-size:22px}.okbrand svg{width:34px;height:34px}.okbrand small{display:none}
  .okmb{height:44px;font-size:14px;gap:8px}
  .okdot{width:28px;height:28px;border-radius:9px}
  .okmgrid,.okmgrid.three{grid-template-columns:1fr}
  .okhero{padding:30px 0 10px}
  .okh1{font-size:1.85rem;line-height:1.22}
  .okac{white-space:nowrap;font-size:.88em}
  .oknav .langbtn{width:40px;padding:0;justify-content:center}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .okend{padding:48px 0 64px}
  .okauth{padding:28px 0 48px}
  .okauthbox{padding:26px 18px;border-radius:20px}
  .okfcols{grid-template-columns:1fr 1fr}
}
@media (max-width:359px){
  .oklink{display:none}
  
  
  .okfcols{grid-template-columns:1fr}
}

/* ---------- v148 hero stage: the product itself, turning through book · workbook · AI reading ---------- */









@keyframes okscene{0%{opacity:0;transform:translateY(10px)}3%,30%{opacity:1;transform:none}32.5%,100%{opacity:0;transform:translateY(-8px)}}



















@keyframes okpick{0%,8%{border-color:var(--ok-line);background:#fff}12%,30%{border-color:var(--ok-green);background:var(--ok-green-soft)}}













@keyframes okdot{0%,33%{width:22px;background:var(--ok-sky)}34%,100%{width:8px;background:#e2e8f0}}





@keyframes okfloat{50%{translate:0 -8px}}
.okbub{position:absolute;z-index:3;padding:8px 14px;border-radius:18px;background:#fff;border:1px solid var(--ok-line);box-shadow:var(--ok-sh);font-weight:700;color:var(--ok-navy);white-space:nowrap;animation:okfloat 5s ease-in-out infinite}
.okbub::after{content:"";position:absolute;bottom:-6px;width:12px;height:12px;background:#fff;border-right:1px solid var(--ok-line);border-bottom:1px solid var(--ok-line);transform:rotate(45deg)}
.okbub.b1{left:118px;top:0;background:var(--ok-yellow-soft)}.okbub.b1::after{left:22px;background:var(--ok-yellow-soft)}
.okbub.b2{right:120px;top:-8px;animation-delay:-2s}.okbub.b2::after{right:24px}
.okbub.b3{right:-6px;bottom:44px;background:var(--ok-sky-soft);animation-delay:-1s}.okbub.b3::after{left:20px;background:var(--ok-sky-soft)}

@media (prefers-reduced-motion:reduce){
  .okbub{animation:none}
  
  
}

@media (max-width:640px){
  
  
  
  
  
  
  .okbub.b1{left:4px;top:0}.okbub.b2{right:4px;top:0}.okbub.b3{display:none}
  .okbub{font-size:13px;padding:6px 11px}
  
}

/* ---------- v149 (대표: 떠 있는 카드가 메인을 가림 · 버튼을 눌러도 변화가 안 보임 · 모바일에서 헤더 메뉴와 겹쳐 어색):
   hero = headline + stage only · the three features as a strip under the hero · the two tabs sit right on top of their panel ---------- */
.okhero{min-height:0;padding:48px 0 44px}







@media (max-width:640px){
  .okhero{padding:28px 0 28px}
  
  
  
  
}

/* ---------- v161 (2026-10-14, 대표: "하루 스터디 없애고 메인에서 더 잘 보이게"): one site. Signed-in header (photo + Continue),
   the member's home = My learning dashboard (.okdash), My account (.okmy), the phone tab bar for members ---------- */
.okav{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--ok-sky);color:var(--ok-navy);font:800 16px/1 var(--ok-ui)}
.okav img{width:100%;height:100%;object-fit:cover;display:block}
.okav.xl{width:64px;height:64px;font-size:26px}










































































.okapick{display:flex;flex-wrap:wrap;gap:8px}
.okapick button{padding:0;border:2px solid transparent;border-radius:50%;background:var(--ok-bg);width:52px;height:52px;overflow:hidden;cursor:pointer;display:grid;place-items:center}
.okapick button.on{border-color:var(--ok-sky-deep)}
.okapick img{width:100%;height:100%;object-fit:cover}
.okfree{display:inline-block;padding:2px 9px;border-radius:9999px;background:var(--ok-green-soft);color:#3f7a12;font:700 12px/18px var(--ok-ui)}
.wbhw .row{gap:8px}


@media (max-width:640px){
  
  .okav.xl{width:52px;height:52px;font-size:21px}
  
  
  
  
  
  
  .oknav.mem .okcta{padding:0 12px}
  
  
}
/* the bottom tab bar is for members only now — pad the page only when it is there */
@media (max-width:640px){
  body:not(:has(.tabbar)){padding-bottom:0}
  body:not(:has(.tabbar)) .fab{bottom:14px}
}


/* ---------- v163 (2026-10-14, 대표: "메인은 원래대로, 진도는 마이페이지 — 지금 내 레벨만, 게이미피케이션 참고") ----------
   header: one personal entry (photo + My page) · #/me = My page: tabs Learn · Purchases · My info; Learn = one level as a path */
.okmypg{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 4px;border-radius:9999px;background:var(--ok-sky);color:var(--ok-navy);text-decoration:none;font:600 14px var(--ok-ui);white-space:nowrap}
.okmypg .okav{width:36px;height:36px;font-size:14px;background:#fff}
.okmypg:hover{background:var(--ok-sky-hover)}
.okmypg.on{box-shadow:0 0 0 3px var(--ok-sky-line)}
.okmypg:focus-visible{outline:3px solid var(--ok-navy);outline-offset:2px}

.mypage{padding:22px 0 64px;background:var(--ok-bg);min-height:70vh}
.mptabs{display:flex;gap:4px;margin:0 0 18px;padding:4px;background:#fff;border:1px solid var(--ok-line);border-radius:9999px;width:max-content;max-width:100%;overflow-x:auto}
.mptabs a{padding:9px 18px;border-radius:9999px;font:600 14px var(--ok-ui);color:var(--ok-muted);text-decoration:none;white-space:nowrap}
.mptabs a.on{background:var(--ok-navy);color:#fff}
.mpc{background:#fff;border:1px solid var(--ok-line);border-radius:20px;padding:18px 20px;min-width:0}
.mpc h2{margin:0 0 12px;font-size:1.15rem}
.mpc p{margin:6px 0 0;color:var(--ok-muted);font-size:.93rem}
.mpk{display:block;font:700 12px/16px var(--ok-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ok-muted)}
.mpone{display:grid;gap:14px;max-width:860px}
.mpone .atab{margin:0}

.mptop{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.mphi{flex:1;min-width:0}
.mphi h1{margin:0 0 4px;font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.2}
.mplv{position:relative;display:inline-block}
.mplv summary{list-style:none;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:9999px;background:#fff;border:1px solid var(--ok-line);cursor:pointer;font:500 13px var(--ok-ui);color:var(--ok-muted)}
.mplv summary::-webkit-details-marker{display:none}
.mplv summary b{display:inline-grid;place-items:center;min-width:34px;height:26px;border-radius:9999px;background:var(--ok-sky);color:var(--ok-navy);font:800 13px var(--ok-ui)}
.mplv summary span{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mplv .cv{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-3px 2px 0}
.mplvbox{position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:240px;background:#fff;border:1px solid var(--ok-line);border-radius:16px;box-shadow:var(--ok-sh-lg);padding:6px}
.mplvbox a{display:block;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ok-navy);font:500 14px var(--ok-ui)}
.mplvbox a b{display:inline-block;min-width:30px;font-weight:800}
.mplvbox a:hover,.mplvbox a.on{background:var(--ok-sky-soft)}
.mplvbox a.more{color:var(--ok-sky-deep);font-weight:600;border-top:1px solid var(--ok-line);border-radius:0 0 10px 10px;margin-top:4px}






.mpgrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px;align-items:start}
.mpl,.mpr{display:grid;gap:14px;min-width:0}

.mpcont{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border-radius:22px;background:var(--ok-sky);color:var(--ok-navy);text-decoration:none;box-shadow:0 14px 30px -18px rgba(11,111,189,.6);transition:transform .15s}
.mpcont:hover{transform:translateY(-2px)}
.mpcont small{font:700 12px/16px var(--ok-ui);letter-spacing:.06em;color:var(--ok-sky-ink)}
.mpcont>b{font:800 clamp(1.4rem,2.6vw,1.9rem)/1.25 var(--kr-disp,var(--disp))}
.mpcont>.mpgr{font:600 14px/1.4 var(--kr,var(--body));margin:0}
.mpcont .btn{align-self:flex-start;margin-top:8px;background:var(--ok-navy);color:#fff;font-style:normal;box-shadow:none}
.mpcont.win{background:var(--ok-yellow)}
.mpcont.win span{font-size:.95rem}
.mpst{display:flex;flex-wrap:wrap;gap:6px}
.mpst i{font:600 12px/1 var(--ok-ui);font-style:normal;padding:6px 10px;border-radius:9999px;background:rgba(255,255,255,.55)}
.mpst i.on{background:#fff}
.mpst i.on::before{content:"✓ ";color:#3f7a12}

.mpweek{display:flex;gap:16px;align-items:center}
.mpring{position:relative;flex:none;width:84px;height:84px}
.mpring svg{width:100%;height:100%;transform:rotate(-90deg)}
.mpring circle{fill:none;stroke-width:8}
.mpring .bg{stroke:var(--ok-bg)}
.mpring .fg{stroke:var(--ok-sky);stroke-linecap:round}
.mpring .fg.full{stroke:var(--ok-green)}
.mpring b{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;padding-top:27px;font:800 24px/1 var(--disp);color:var(--ok-navy)}
.mpring b small{font:600 12px var(--ok-ui);color:var(--ok-muted)}
.mpdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.mpdays span{display:grid;justify-items:center;gap:4px;font:600 10.5px var(--ok-ui);color:var(--ok-muted)}
.mpdays i{width:22px;height:22px;border-radius:50%;background:var(--ok-bg);border:2px solid transparent}
.mpdays span.on i{background:#ffb020 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3c1 4 5 5.5 5 10a5 5 0 0 1-10 0c0-2 1-3.5 2-4.5 0 2 1 3 2 3-1-3 0-6 1-8.5z'/%3E%3C/svg%3E") center/14px no-repeat}
.mpdays span.today i{border-color:var(--ok-sky-deep)}
.mpdays span.fut i{opacity:.5}
.mpgoal{display:flex;align-items:center;gap:6px;margin-top:10px;font:600 12px var(--ok-ui);color:var(--ok-muted)}
.mpgoal button{min-width:30px;height:26px;border-radius:9999px;border:1px solid var(--ok-line);background:#fff;font:700 12px var(--ok-ui);color:var(--ok-navy);cursor:pointer}
.mpgoal button.on{background:var(--ok-navy);border-color:var(--ok-navy);color:#fff}

.mphd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mphd h2{margin:0;font-size:1.3rem}.mphd h2 span{font-weight:600;color:var(--ok-muted)}
.mphd>span{font:600 13px var(--ok-ui);color:var(--ok-muted)}
.mpbar{display:block;height:8px;border-radius:9999px;background:var(--ok-bg);overflow:hidden;margin:10px 0 6px}
.mpbar i{display:block;height:100%;border-radius:inherit;background:var(--ok-green)}
.mppath{list-style:none;margin:8px 0 0;padding:0;position:relative}
.mppath::before{content:"";position:absolute;left:27px;top:20px;bottom:20px;width:3px;background:var(--ok-line);border-radius:3px}
.mpn{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0}
.mpdot{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;text-decoration:none}
.mpdot svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mpdot circle{fill:none;stroke-width:5}
.mpdot .bg{stroke:var(--ok-line)}
.mpdot .fg{stroke:var(--ok-sky);stroke-linecap:round}
.mpdot b{position:relative;font:800 18px/1 var(--disp);color:var(--ok-navy)}
.mpn.done .mpdot{background:var(--ok-green)}
.mpn.done .mpdot .fg{stroke:#3f9a12}
.mpn.cur .mpdot{background:var(--ok-sky);box-shadow:0 0 0 6px var(--ok-sky-soft)}
.mpn.cur .mpdot .fg{stroke:var(--ok-sky-deep)}
.mpn.off .mpdot{background:var(--ok-bg)}.mpn.off .mpdot b{color:#94a3b8}
.mpnb{min-width:0}
.mpnb>b{display:block;font:700 16px/1.3 var(--kr,var(--body));color:var(--ok-navy)}
.mpn.off .mpnb>b{color:#94a3b8}
.mpnb small{color:var(--ok-muted);font-size:12px}
.mpnow{display:inline-block;margin-bottom:4px;padding:2px 9px;border-radius:9999px;background:var(--ok-navy);color:#fff;font:700 11px/18px var(--ok-ui)}
.mpgr{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.mpgr a{padding:2px 8px;border-radius:8px;background:var(--ok-bg);color:var(--ok-muted);text-decoration:none;font:600 12px/18px var(--kr,var(--body))}
.mpgr a.met{background:var(--ok-sky-soft);color:var(--ok-sky-ink)}
.mpgr a:hover{text-decoration:underline}
.mppips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mppips a{padding:3px 9px;border-radius:9999px;border:1px solid var(--ok-line);color:var(--ok-muted);text-decoration:none;font:600 11.5px/16px var(--ok-ui)}
.mppips a.on{background:var(--ok-green-soft);border-color:#cfe9b9;color:#3f7a12}
.mpstars{display:flex;gap:1px;font-size:17px;line-height:1}
.mpstars i{font-style:normal;color:#dbe3ec}.mpstars i.on{color:#ffb020}

.mpredo{display:grid;gap:4px;margin-top:8px}
.mpredo a{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;margin:0 -10px;border-radius:12px;text-decoration:none;color:var(--ok-navy)}
.mpredo a:hover{background:var(--ok-bg)}
.mpredo b{font:600 14px var(--kr,var(--body));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpredo span{font:700 13px var(--ok-ui);color:#c2410c;white-space:nowrap}
.mpnext{display:flex;gap:12px;align-items:center;margin-top:10px}
.mpnext>i,.mpgot i{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--ok-bg);color:#94a3b8;font:800 14px/1 var(--ok-ui);font-style:normal;border:2px dashed #cbd5e1}
.mpnext>div{flex:1;min-width:0}
.mpnext b{font:700 14px var(--ok-ui);color:var(--ok-navy)}
.mpnext .mpbar{margin:6px 0 2px;height:6px}.mpnext .mpbar i{background:var(--ok-yellow)}
.mpnext small{font:600 12px var(--ok-ui);color:var(--ok-muted)}
.mpgot{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.mpgot i{width:34px;height:34px;font-size:11px;background:var(--ok-yellow);color:var(--ok-navy);border:0}
.mpmore a{display:block;padding:9px 10px;margin:0 -10px;border-radius:12px;text-decoration:none}
.mpmore a:hover{background:var(--ok-bg)}
.mpmore a b{display:block;font:600 14px var(--ok-ui);color:var(--ok-navy)}
.mpmore a span{display:block;font-size:12.5px;color:var(--ok-muted)}

@media (max-width:900px){
  .mpgrid{grid-template-columns:1fr}
  .mpl,.mpr{display:contents}
  .mpcont{order:1}.mpweek{order:2}.mppathc{order:3}.mpredoc{order:4}.mpbadge{order:5}.mpmore{order:6}
}
@media (max-width:640px){
  .okmypg{padding:0 4px;height:42px}
  .okmypg>span:not(.okav){display:none}
  .mplv{max-width:100%}.mplv summary{max-width:100%}.mplv summary span{max-width:none;flex:1;min-width:0}
  .mypage{padding-top:14px}
  .mptabs{width:100%}.mptabs a{flex:1;text-align:center;padding:9px 8px}
  .mptop{gap:10px}
  
  .mpc{padding:16px}
  .mpcont{padding:18px}
  .mpn{grid-template-columns:48px minmax(0,1fr);gap:10px}
  .mpdot{width:48px;height:48px}
  .mppath::before{left:23px}
  .mpstars{grid-column:2;font-size:15px}
}

/* ---------- v164 (2026-10-15): My page cat instead of characters and the streak flame · one self-study plan with three terms ---------- */
.hcat{display:block;width:100%;height:100%}
.mpcat{flex:none;display:block;width:104px;height:104px;border-radius:50%;transition:transform .2s}
.mpcat:hover{transform:rotate(-4deg) scale(1.04)}
.mpbub{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 10px;margin-top:10px;padding:10px 14px;max-width:460px;background:#fff;border:1px solid var(--ok-line);border-radius:16px;font:500 13px/1.35 var(--ok-ui);color:var(--ok-text)}
.mpbub::before{content:"";position:absolute;left:-7px;top:16px;width:12px;height:12px;background:#fff;border-left:1px solid var(--ok-line);border-bottom:1px solid var(--ok-line);transform:rotate(45deg)}
.mpbub>b{font:800 14px var(--kr,var(--ok-ui));color:var(--ok-navy)}
.mpbub>span:first-of-type{grid-column:2 / 4}
.mpbub .mpbar{grid-column:1 / 3;margin:2px 0;height:6px}
.mpbub .mpbar i{background:var(--ok-yellow)}
.mpbub small{font:700 12px var(--ok-ui);color:var(--ok-muted)}
.mpdays span.on i{background:var(--ok-sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230f172a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/13px no-repeat}
.mpthings{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.mpthings span{position:relative;display:block;aspect-ratio:1;border-radius:50%}
.mpthings span:not(.on) .hcat{filter:grayscale(1);opacity:.35}
.mpthings span i{position:absolute;right:-2px;bottom:-2px;font-size:13px;font-style:normal}
.mpmorelink{display:inline-block;margin-top:10px;font:600 13px var(--ok-ui);text-decoration:none}
.catpage{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:18px;align-items:start}
.catbig{position:sticky;top:96px;display:grid;gap:12px;justify-items:center;text-align:center}
.catbig>.hcat{width:min(280px,70vw);height:auto;filter:drop-shadow(0 18px 30px rgba(15,23,42,.12))}
.catname{display:grid;gap:4px;width:min(280px,100%);text-align:left}
.catname input{height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;font:700 16px var(--kr,var(--ok-ui));color:var(--ok-navy);background:#fff}
.catbig .note{margin:0;font-size:.85rem;color:var(--ok-muted)}
.catopts{display:grid;gap:18px}
.catsw{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.catsw .dot{width:36px;height:36px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--ok-line);cursor:pointer}
.catsw .dot.on{box-shadow:0 0 0 3px var(--ok-navy)}
.catsw .mini{display:grid;justify-items:center;gap:4px;width:92px;padding:6px 4px 8px;border:1px solid var(--ok-line);border-radius:16px;background:#fff;cursor:pointer;font:600 12px var(--ok-ui);color:var(--ok-navy)}
.catsw .mini .hcat{width:64px;height:64px}
.catsw .mini.on{border-color:var(--ok-navy);box-shadow:0 0 0 2px var(--ok-navy)}
.catsw .mini.lock{cursor:default;background:var(--ok-bg)}
.catsw .mini.lock .hcat{filter:grayscale(1);opacity:.4}
.catsw .mini em{font:500 10.5px/1.25 var(--ok-ui);font-style:normal;color:var(--ok-muted);text-align:center}
.subterms{display:grid;gap:8px;margin:4px 0 10px}
.subterm{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:12px 14px;border:1px solid var(--ok-sky-line);border-radius:14px;background:#fff;text-decoration:none;color:var(--ok-navy);transition:background .15s,border-color .15s}
.subterm:hover{background:var(--ok-sky-soft);border-color:var(--ok-sky)}
.subterm b{font:700 15px var(--ok-ui)}
.subterm span{font:800 18px var(--disp)}
.subterm em{grid-column:1 / -1;font:600 12px var(--ok-ui);font-style:normal;color:#3f7a12}
@media (max-width:900px){
  .catpage{grid-template-columns:1fr}
  .catbig{position:static}
}
@media (max-width:640px){
  .mpcat{width:84px;height:84px}
  .mptop{align-items:flex-start}
  .mpthings{grid-template-columns:repeat(4,1fr)}
  .catsw .mini{width:calc(33.3% - 6px)}
}

/* ---------- v164 hero stage: four scenes in order (Student Book · PDF · AI reading · K-Culture), bigger and faster ---------- */
.okv{position:relative;max-width:1080px;margin:34px auto 0}
.okvtabs{display:flex;justify-content:center;gap:8px;margin:0 auto 14px;flex-wrap:wrap}
.okvtabs button{position:relative;display:grid;gap:6px;min-width:150px;padding:10px 16px 9px;border:1px solid var(--ok-line);border-radius:14px;background:#fff;cursor:pointer;font:700 14px var(--ok-ui);color:var(--ok-muted);text-align:left;transition:color .2s,border-color .2s}
.okvtabs button i{display:block;height:4px;border-radius:4px;background:var(--ok-bg);overflow:hidden}
.okvtabs button i::after{content:"";display:block;height:100%;width:100%;border-radius:inherit;background:var(--ok-sky-deep);transform:scaleX(0);transform-origin:0 50%}   /* v169: the story bar grows by transform, not width (width re-ran layout every frame) */
.okvtabs button.on{color:var(--ok-navy);border-color:var(--ok-sky);box-shadow:0 8px 20px -12px rgba(11,111,189,.5)}
.okvtabs button.on i::after{animation:okvprog 3.2s linear forwards}
.okv:hover .okvtabs button.on i::after{animation-play-state:paused}
@keyframes okvprog{to{transform:scaleX(1)}}
.okvframe{position:relative;z-index:2;height:470px;background:#fff;border:1px solid var(--ok-line);border-radius:26px;box-shadow:0 40px 90px -30px rgba(15,23,42,.35);overflow:hidden;text-align:left}
.okvbar{display:flex;align-items:center;gap:7px;height:40px;padding:0 18px;background:var(--ok-bg);border-bottom:1px solid var(--ok-line)}
.okvbar>i{width:11px;height:11px;border-radius:50%;background:#e2e8f0}
.okvbar>i:nth-child(1){background:#ff8a8a}.okvbar>i:nth-child(2){background:#ffd166}.okvbar>i:nth-child(3){background:#8bd17c}
.okvurl{margin-left:12px;padding:4px 14px;border-radius:9999px;background:#fff;border:1px solid var(--ok-line);font:500 12.5px var(--ok-ui);color:var(--ok-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.okvurl b{font-weight:600;color:var(--ok-navy)}
.okvscenes{position:relative;height:calc(100% - 40px)}
/* v169 (hero lag): opacity + translate only (the scale(.97) made the browser re-rasterise all the text at the start and end of every switch);
   the playing, the leaving (.off) and the next (.nx) scene keep their own layer; hidden scenes are not painted at all once faded; .idle (off screen / tab hidden) pauses everything */
.okvscenes{contain:layout paint}
.okvs{position:absolute;inset:0;padding:26px 32px;opacity:0;visibility:hidden;transform:translate3d(36px,0,0);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.85,.25,1),visibility 0s linear .5s;pointer-events:none}
.okvs.on{opacity:1;visibility:visible;transform:translate3d(0,0,0);pointer-events:auto;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.85,.25,1),visibility 0s}
.okvs.on,.okvs.off,.okvs.nx{will-change:opacity,transform}
.okv.idle *,.okv.idle *::after{animation-play-state:paused!important}
@keyframes okvUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes okvPop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes okvMark{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes okvIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

/* ① Student Book */
.okv-book{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:26px;height:100%}
.okv-pg{padding:20px 24px;border-radius:18px;background:#fffdf8;border:1px solid #f1e6cf;box-shadow:inset 0 0 0 6px #fff}
.okv-pghd{display:flex;align-items:center;gap:10px;font:600 13px var(--ok-ui);color:var(--ok-muted)}
.okv-pghd b{margin-left:auto;font:700 15px var(--kr-disp,var(--ok-ui));color:var(--ok-navy)}
.okv-lv{display:inline-grid;place-items:center;min-width:44px;height:28px;border-radius:9999px;background:var(--ok-sky);color:var(--ok-navy);font:800 14px var(--ok-ui)}
.okv-gram{margin-top:14px}
.okv-gram small{font:700 11px var(--ok-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ok-sky-deep)}
.okv-gram h4{margin:2px 0 2px;font:800 34px/1.15 var(--kr-disp,var(--disp));color:var(--ok-navy)}
.okv-gram p{margin:0;color:var(--ok-muted);font-size:15px}
.okv-form{display:flex;align-items:center;gap:10px;margin:14px 0 10px;font:700 17px var(--kr,var(--body))}
.okv-form span{padding:6px 12px;border-radius:10px;background:var(--ok-bg)}
.okv-form span b{color:var(--ok-sky-deep)}
.okv-form i{font-style:normal;color:var(--ok-muted)}
.okv-ex{margin:8px 0 0;padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--ok-line)}
.okv-ex b{display:block;font:700 18px/1.35 var(--kr,var(--body));color:var(--ok-navy)}
.okv-ex span{display:block;font-size:13.5px;color:var(--ok-muted)}
.okv-ex mark{background:linear-gradient(transparent 55%,#ffe08a 55%) no-repeat 0 0/0% 100%;color:inherit}
.okv-side{display:flex;flex-direction:column;gap:8px}
.okv-side small{font:700 11px var(--ok-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ok-muted)}
.okv-ladder{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(6,1fr);align-items:end;gap:6px;height:150px}
.okv-ladder li{display:grid;place-items:end center;padding-bottom:6px;border-radius:10px 10px 6px 6px;background:var(--ok-bg);font:800 12px var(--ok-ui);color:var(--ok-muted)}
.okv-ladder li:nth-child(1){height:30%}.okv-ladder li:nth-child(2){height:42%}.okv-ladder li:nth-child(3){height:56%}.okv-ladder li:nth-child(4){height:70%}.okv-ladder li:nth-child(5){height:84%}.okv-ladder li:nth-child(6){height:100%}
.okv-ladder li.on{background:var(--ok-sky);color:var(--ok-navy)}
.okv-tags{display:flex;flex-wrap:wrap;gap:6px}
.okv-tags span{padding:5px 10px;border-radius:9999px;background:#fff;border:1px solid var(--ok-line);font:600 12px var(--ok-ui);color:var(--ok-navy)}
.v1.on .okv-pghd{animation:okvUp .45s .05s both}
.v1.on .okv-gram h4{animation:okvPop .55s .2s both}
.v1.on .okv-gram p{animation:okvUp .4s .4s both}
.v1.on .okv-form{animation:okvUp .4s .6s both}
.v1.on .okv-ex.e1{animation:okvUp .4s .9s both}
.v1.on .okv-ex.e2{animation:okvUp .4s 1.35s both}
.v1.on .okv-ex.e1 mark{animation:okvMark .5s 1.25s both}
.v1.on .okv-ex.e2 mark{animation:okvMark .5s 1.7s both}
.v1.on .okv-ladder li{animation:okvUp .35s both}
.v1.on .okv-ladder li:nth-child(2){animation-delay:.08s}.v1.on .okv-ladder li:nth-child(3){animation-delay:.16s}.v1.on .okv-ladder li:nth-child(4){animation-delay:.24s}.v1.on .okv-ladder li:nth-child(5){animation-delay:.32s}.v1.on .okv-ladder li:nth-child(6){animation-delay:.4s}
.v1.on .okv-ladder li.on{animation:okvPop .5s .7s both;box-shadow:0 10px 24px -10px rgba(11,111,189,.6)}
.v1.on .okv-tags span{animation:okvPop .4s both}
.v1.on .okv-tags span:nth-child(1){animation-delay:1.5s}.v1.on .okv-tags span:nth-child(2){animation-delay:1.62s}.v1.on .okv-tags span:nth-child(3){animation-delay:1.74s}.v1.on .okv-tags span:nth-child(4){animation-delay:1.86s}

/* ② PDF — the cover opens on a real page */
.okv-pdf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:38px;align-items:center;height:100%;padding-left:20px}
.okv-flip{position:relative;width:250px;height:354px;perspective:1400px}
.okv-flip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6px 12px 12px 6px;box-shadow:0 26px 50px -20px rgba(15,23,42,.45)}
.okv-flip .cv{transform-origin:left center;backface-visibility:hidden;z-index:2}
.v2.on .okv-flip .cv{animation:okvOpen 1.1s .45s cubic-bezier(.45,.05,.25,1) both}
@keyframes okvOpen{0%{transform:rotateY(0)}100%{transform:rotateY(-158deg)}}
.v2.on .okv-flip{animation:okvUp .5s both}
.okv-tag{display:inline-block;padding:3px 10px;border-radius:9999px;background:var(--ok-navy);color:#fff;font:800 12px var(--ok-ui);letter-spacing:.06em}
.okv-tag.y{background:var(--ok-yellow);color:var(--ok-navy)}
.okv-pdfinfo h4{margin:10px 0 8px;font:800 30px/1.15 var(--disp);color:var(--ok-navy)}
.okv-pdfinfo ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.okv-pdfinfo li{font:500 15px var(--body);color:var(--ok-text);padding-left:22px;position:relative}
.okv-pdfinfo li::before{content:"✓";position:absolute;left:0;color:#3f9a12;font-weight:800}
.okv-price{display:flex;align-items:baseline;gap:8px;margin:14px 0 12px}
.okv-price b{font:800 34px var(--disp);color:var(--ok-navy)}
.okv-price span{font:500 14px var(--body);color:var(--ok-muted)}
.okv-mini{display:flex;gap:10px}
.okv-mini img{width:64px;height:90px;object-fit:cover;border-radius:6px;box-shadow:0 10px 20px -10px rgba(15,23,42,.45)}
.v2.on .okv-pdfinfo>*{animation:okvIn .45s both}
.v2.on .okv-pdfinfo>*:nth-child(2){animation-delay:.15s}.v2.on .okv-pdfinfo>*:nth-child(3){animation-delay:.3s}.v2.on .okv-pdfinfo>*:nth-child(4){animation-delay:.9s}
.v2.on .okv-mini img{animation:okvPop .45s both}
.v2.on .okv-mini img:nth-child(1){animation-delay:1.2s}.v2.on .okv-mini img:nth-child(2){animation-delay:1.35s}.v2.on .okv-mini img:nth-child(3){animation-delay:1.5s}

/* ③ AI reading — a tap, a ripple, the explanation slides up */
.okv-read{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:center;height:100%}
.okv-text small{display:flex;align-items:center;gap:10px;margin-bottom:10px;font:700 13px var(--kr,var(--ok-ui));color:var(--ok-muted)}
.okv-text small img{width:34px;height:48px;object-fit:cover;border-radius:4px}
.okv-text p{position:relative;margin:0 0 12px;padding:8px 12px;border-radius:12px;font:500 21px/1.55 var(--kr,var(--body));color:var(--ok-navy)}
.okv-text p:not(.tap){opacity:.55}
.okv-text u{text-decoration:none;background:linear-gradient(transparent 62%,rgba(66,176,255,.35) 62%) no-repeat 0 0/0% 100%}
.okv-rip{position:absolute;left:52%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:rgba(11,111,189,.35);opacity:0}
.okv-text p.tap{isolation:isolate}
.okv-text p.tap::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ok-sky-soft);box-shadow:inset 0 0 0 2px var(--ok-sky);opacity:0}
.v3.on .okv-text p.tap::before{animation:okvFade .45s .55s both}   /* v169: fades a ready-made box in, instead of animating background + box-shadow */
@keyframes okvFade{to{opacity:1}}
.okv-text u.tw{position:relative;padding:0 3px;border-radius:6px;background:none;box-shadow:inset 0 -3px 0 var(--ok-sky-deep)}
.okv-text u.tw .okv-rip{left:50%}
.v3.on .okv-rip{animation:okvRip .7s .45s ease-out both}
@keyframes okvRip{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(6)}}
.v3.on .okv-text u{animation:okvMark .45s 1.05s both}
.okv-pop{padding:18px 20px;border-radius:20px;background:#fff;border:1px solid var(--ok-line);box-shadow:0 26px 60px -24px rgba(15,23,42,.35)}
.okv-pophd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.okv-pophd b{font:800 19px var(--kr-disp,var(--ok-ui));color:var(--ok-navy)}
.okv-pophd span:last-child{margin-left:auto;font:700 12px var(--ok-ui);color:var(--ok-sky-deep)}
.okv-pop p{margin:8px 0 0;font:500 15px var(--body);color:var(--ok-text)}
.okv-pop p.tr{padding:8px 12px;border-radius:10px;background:var(--ok-bg);font-style:italic}
.okv-words{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.okv-words span{padding:5px 10px;border-radius:10px;background:var(--ok-yellow-soft);font:500 13px var(--body);color:var(--ok-text)}
.okv-words b{font-weight:800;color:var(--ok-navy)}
.v3.on .okv-pop{animation:okvPopUp .6s .95s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes okvPopUp{from{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:none}}
.v3.on .okv-words span{animation:okvPop .35s both}
.okv-lchip{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 12px;border-radius:9999px;background:var(--ok-navy);color:#fff;font:600 13px var(--ok-ui)}
.okv-lchip b{font:800 13px var(--kr,var(--ok-ui));color:var(--ok-yellow)}
.okv-cap{grid-column:1/-1;margin:0;font:600 16px/1.4 var(--body);color:var(--ok-navy);text-align:center}
.v3.on .okv-lchip{animation:okvPop .4s 1.95s both}
.v3.on .okv-cap{animation:okvUp .4s 2.1s both}
.v3.on .okv-words span:nth-child(1){animation-delay:1.5s}.v3.on .okv-words span:nth-child(2){animation-delay:1.62s}.v3.on .okv-words span:nth-child(3){animation-delay:1.74s}

/* ④ K-Culture — the chat that every learner gets wrong, and the three life courses */
.okv-kc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:26px;align-items:center;height:100%}
.okv-chat{display:grid;gap:10px;padding:18px;border-radius:20px;background:#f3f6fa}
.okv-chat small{font:700 12px var(--kr,var(--ok-ui));color:var(--ok-muted)}
.okv-chat p{margin:0;max-width:85%;padding:10px 14px;border-radius:16px;font:600 17px/1.4 var(--kr,var(--body))}
.okv-chat .b1{background:#fff;color:var(--ok-navy);border-top-left-radius:4px}
.okv-chat .b2{max-width:100%;background:var(--ok-yellow-soft);color:var(--ok-text);font:500 14px/1.45 var(--body);border-radius:12px}
.okv-chat .b3{justify-self:end;background:var(--ok-sky);color:var(--ok-navy);border-top-right-radius:4px}
.v4.on .okv-chat .b1{animation:okvUp .4s .2s both}.v4.on .okv-chat .b2{animation:okvPop .45s .75s both}.v4.on .okv-chat .b3{animation:okvUp .4s 1.3s both}
.okv-cards{position:relative;height:300px}
.okv-card{position:absolute;top:20px;width:46%;padding:10px 10px 14px;border-radius:18px;background:#fff;box-shadow:0 24px 50px -24px rgba(15,23,42,.45);border:1px solid var(--ok-line)}
.okv-card span{display:block;height:150px;border-radius:12px;background:center/cover no-repeat}
.okv-card b{display:block;margin-top:10px;font:800 16px var(--kr-disp,var(--ok-ui));color:var(--ok-navy)}
.okv-card small{font:600 12px var(--ok-ui);color:var(--ok-muted)}
.okv-card.c1{left:0;transform:rotate(-7deg)}.okv-card.c2{left:27%;top:0;z-index:2}.okv-card.c3{left:54%;transform:rotate(7deg)}
.v4.on .okv-card{animation:okvDeal .6s cubic-bezier(.2,.9,.3,1.2) both}
.v4.on .okv-card.c1{animation-delay:.35s}.v4.on .okv-card.c2{animation-delay:.55s}.v4.on .okv-card.c3{animation-delay:.75s}
@keyframes okvDeal{from{opacity:0;translate:0 60px;scale:.85}to{opacity:1;translate:0 0;scale:1}}

.okv .okbub{position:absolute;z-index:3}
.okv .okbub.b1{left:-34px;top:120px}
.okv .okbub.b2{right:-30px;top:auto;bottom:-14px}
@media (prefers-reduced-motion:reduce){
  .okvs{transition:none;transform:none}
  .okv *{animation:none!important}
  .okv-flip .cv{display:none}
}
@media (max-width:900px){
  .okvframe{height:520px}
  .okv-book{grid-template-columns:1fr}
  .okv-side{display:none}
  .okv-read,.okv-kc{grid-template-columns:1fr;align-content:start}
  .okv-cards{height:230px}
  .okv-card span{height:110px}
  .okv .okbub{display:none}
}
@media (max-width:640px){
  .okv{margin-top:22px}
  .okvtabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:2px 2px 6px;scrollbar-width:none}
  .okvtabs::-webkit-scrollbar{display:none}
  .okvtabs button{min-width:120px;flex:none;padding:8px 12px;font-size:13px}
  .okvframe{height:500px;border-radius:20px}
  .okvs{padding:16px}
  .okvurl{font-size:11px}
  .okv-pg{padding:14px}
  .okv-gram h4{font-size:26px}
  .okv-ex b{font-size:15.5px}
  .okv-pdf{grid-template-columns:1fr;justify-items:center;gap:14px;padding-left:0;align-content:start}
  .okv-flip{width:150px;height:212px}
  .okv-pdfinfo{text-align:center}
  .okv-pdfinfo h4{font-size:22px;margin:6px 0}
  .okv-pdfinfo ul{justify-content:center}
  .okv-pdfinfo li{font-size:13.5px}
  .okv-price{justify-content:center;margin:8px 0}
  .okv-price b{font-size:26px}
  .okv-mini{justify-content:center}
  .okv-mini img{width:44px;height:62px}
  .okv-text p{font-size:17px;margin-bottom:6px}
  .okv-pop{padding:14px}
  .okv-chat p{font-size:15px}
  .okv-cards{height:200px}
  .okv-card{width:48%;padding:8px 8px 10px}
  .okv-card span{height:90px}
  .okv-card b{font-size:13.5px}
}

/* ---------- the shelf under the hero: every cover on a slow conveyor ---------- */
.okshelf2{padding:64px 0 40px;overflow:hidden;background:linear-gradient(180deg,#fff, var(--ok-cream) 60%, #fff)}
.okshhd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.okshhd h2{margin:6px 0 6px;font-size:clamp(1.6rem,3vw,2.3rem);max-width:20em}
.okshhd p{margin:0;max-width:40em;color:var(--ok-muted)}
.okbelt{position:relative;padding:20px 0 34px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.okbelt::after{content:"";position:absolute;left:0;right:0;bottom:18px;height:14px;background:linear-gradient(#d8b98a,#b98f58);border-radius:4px;box-shadow:0 10px 18px -8px rgba(120,80,30,.5)}
.okbeltin{display:flex;gap:26px;width:max-content;animation:okbelt 60s linear infinite;perspective:1200px}
.okbelt:hover .okbeltin{animation-play-state:paused}
@keyframes okbelt{to{transform:translateX(-50%)}}
.okbk2{position:relative;z-index:1;display:grid;gap:6px;width:150px;text-decoration:none;color:var(--ok-navy);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.okbk2 .cv{display:block;height:212px;border-radius:4px 10px 10px 4px;overflow:hidden;transform:rotateY(-14deg);transform-origin:left center;box-shadow:-6px 0 0 -2px rgba(15,23,42,.18) inset, 10px 18px 26px -14px rgba(15,23,42,.55);transition:transform .35s}
.okbk2 .cv img{width:100%;height:100%;object-fit:cover;display:block}
.okbk2 b{font:700 13px/1.3 var(--kr,var(--ok-ui));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.okbk2 small{font:600 12px var(--ok-ui);color:var(--ok-muted)}
.okbk2:hover{transform:translateY(-14px)}
.okbk2:hover .cv{transform:rotateY(0)}
@media (prefers-reduced-motion:reduce){ .okbeltin{animation:none} .okbelt{overflow-x:auto} }
@media (max-width:640px){
  .okshelf2{padding:44px 0 24px}
  .okbk2{width:112px}
  .okbk2 .cv{height:158px}
  .okbeltin{gap:16px;animation-duration:45s}
}

/* ---------- v164 home: the "about us" sections (대표: "우리 사이트가 얼마나 대단한지 — about us 느낌으로, 더 길게") ---------- */
.oksub{max-width:40em;margin:14px auto 0;font:500 18px/1.5 var(--body);color:var(--ok-muted)}
.okherocta{justify-content:center;margin-top:20px;gap:10px}
.okwhy,.oklive,.oklife,.okfaq{padding:84px 0}
.okwhyhd{max-width:780px;margin:0 auto 36px;text-align:center}
.okwhyhd h2{margin:8px 0 10px;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.18}
.okwhyhd p{margin:0;font:500 17px/1.55 var(--body);color:var(--ok-muted)}
/* the six levels as a staircase */
.oksteps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;gap:10px;max-width:1000px;margin:0 auto}
.okstep{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:14px 14px 16px;border-radius:18px 18px 10px 10px;text-decoration:none;color:var(--ok-navy);transition:transform .25s,box-shadow .25s}
.okstep:hover{transform:translateY(-6px);box-shadow:0 18px 30px -18px rgba(15,23,42,.45)}
.okstep b{font:800 40px/1 var(--disp)}
.okstep span{font:700 15px/1.2 var(--ok-ui)}
.okstep small{font:600 12px var(--ok-ui);opacity:.75}
.okstep.s1{height:130px;background:#e6f5ff}.okstep.s2{height:160px;background:#cdeaff}.okstep.s3{height:190px;background:var(--ok-sky)}
.okstep.s4{height:220px;background:#7cc5ff}.okstep.s5{height:250px;background:#3c9ee6;color:#fff}.okstep.s6{height:280px;background:var(--ok-navy);color:#fff}
.okstep.soon{opacity:.6}
.okproofs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1100px;margin:44px auto 0}
.okpf{padding:22px;border-radius:22px;background:#fff;border:1px solid var(--ok-line)}
.okpf>b{display:block;margin-top:16px;font:800 20px/1.25 var(--disp);color:var(--ok-navy)}
.okpf>p{margin:8px 0 0;color:var(--ok-muted);font-size:15px;line-height:1.55}
.okpf-std{display:flex;flex-wrap:wrap;gap:6px}
.okpf-std span{padding:8px 12px;border-radius:12px;background:var(--ok-yellow-soft);font:800 16px var(--kr-disp,var(--ok-ui));color:var(--ok-navy)}
.okpf-tags,.okpf-lang{display:flex;flex-wrap:wrap;gap:6px}
.okpf-tags span{padding:6px 11px;border-radius:9999px;background:var(--ok-sky-soft);border:1px solid var(--ok-sky-line);font:700 12.5px var(--ok-ui);color:var(--ok-sky-ink)}
.okpf-lang span{padding:6px 11px;border-radius:9999px;background:var(--ok-green-soft);font:700 13px var(--ok-ui);color:#3f7a12}
.oknums2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;max-width:900px;margin:44px auto 0;padding:0;list-style:none}
.oknums2 li{display:grid;justify-items:center;gap:2px;padding:6px 10px;border-left:1px solid var(--ok-line)}
.oknums2 li:first-child{border-left:0}
.oknums2 b{font:800 40px/1 var(--disp);color:var(--ok-navy)}
.oknums2 span{font:600 14px var(--ok-ui);color:var(--ok-muted)}
/* the teacher */
.okteach{padding:90px 0;background:var(--ok-cream)}
.okteachin{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center;max-width:1100px;margin:0 auto}
.oktphoto{position:relative;aspect-ratio:4/5;border-radius:30px;overflow:hidden;background:linear-gradient(160deg,var(--ok-sky),#7cc5ff);box-shadow:0 40px 80px -40px rgba(15,23,42,.45)}
.oktphoto img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.oktmono{position:absolute;inset:0;display:none;place-items:center;font:800 180px/1 var(--kr-disp,var(--disp));color:rgba(255,255,255,.9)}
.oktphoto.nophoto .oktmono{display:grid}
.oktphoto.nophoto::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.45),transparent 40%),radial-gradient(circle at 85% 90%,rgba(255,193,17,.45),transparent 35%)}
.oktbody h2{margin:8px 0 12px;font-size:clamp(2rem,3.6vw,2.8rem)}
.oktbody h2 small{display:block;margin-top:4px;font:600 15px var(--ok-ui);color:var(--ok-muted)}
.oktbody .lead{font-size:17px;line-height:1.6;color:var(--ok-text)}
.oktcreds{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:10px}
.oktcreds li{position:relative;padding:10px 14px 10px 42px;border-radius:14px;background:#fff;font:600 14.5px/1.45 var(--ok-ui);color:var(--ok-navy)}
.oktcreds li::before{content:"✓";position:absolute;left:14px;top:9px;width:20px;height:20px;border-radius:50%;background:var(--ok-green);color:var(--ok-navy);font:800 12px/20px var(--ok-ui);text-align:center}
.oktbody .row{align-items:center;gap:16px}
/* three ways to learn */
.oklive{background:#fff}
.oklivegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1100px;margin:0 auto}
.oklc{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:24px;text-decoration:none;color:var(--ok-navy);border:1px solid var(--ok-line);background:#fff;transition:transform .2s,box-shadow .2s}
.oklc:hover{transform:translateY(-4px);box-shadow:var(--ok-sh-lg)}
.oklc .okey{align-self:flex-start;padding:4px 12px;border-radius:9999px;font:800 12px var(--ok-ui)}
.oklc.self .okey{background:var(--ok-sky)}.oklc.one .okey{background:var(--ok-yellow)}.oklc.grp .okey{background:var(--ok-green)}
.oklc b{font:800 22px/1.2 var(--disp)}
.oklc p{margin:0;flex:1;color:var(--ok-muted);font-size:15px;line-height:1.55}
.oklc em{font:800 26px var(--disp);font-style:normal}
.oklc em small{font:600 13px var(--ok-ui);color:var(--ok-muted)}
.oktrial{margin:22px 0 0;text-align:center;font:600 15px var(--ok-ui);color:var(--ok-muted)}
/* life courses */
.oklife{background:var(--ok-bg)}
.oklifegrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1100px;margin:0 auto}   /* v-origins: four life courses */
.oklf{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:#fff;text-decoration:none;color:var(--ok-navy);border:1px solid var(--ok-line);transition:transform .2s,box-shadow .2s}
.oklf:hover{transform:translateY(-4px);box-shadow:var(--ok-sh-lg)}
.oklf .im{display:block;height:190px;background:center/cover no-repeat}
.oklf .bd{display:flex;flex-direction:column;gap:4px;padding:18px 20px 20px}
.oklf small{font:700 11.5px var(--ok-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ok-muted)}
.oklf b{font:800 22px var(--kr-disp,var(--disp))}
.oklf em{font:600 14px var(--ok-ui);font-style:normal;color:var(--ok-sky-deep)}
.oklf p{margin:6px 0 8px;color:var(--ok-muted);font-size:14.5px}
.oklf i{font:700 13px var(--ok-ui);font-style:normal;color:var(--ok-navy)}
@media (max-width:1100px){.oklifegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 말의 뿌리 (origins, KO) — plum / ink, next to the colours of .k-cul .k-mom .k-biz in app.css */
.kcard.k-ori{border-top:6px solid #7a3e6e}.kcard.k-ori small,.kcard.k-ori .go{color:#5e2a55}
.khero.k-ori{background:linear-gradient(135deg,#F3E8F1 0%,#FBF4EA 100%)}
.khero.k-ori .eyebrow{color:#5e2a55}
.khero.k-ori .cswitch a.on{background:#5e2a55;border-color:#5e2a55}
.mcard.k-ori{border-top:4px solid #7a3e6e}.mcard.k-ori b{font-family:var(--kr-disp);font-size:1.05rem;color:#5e2a55}
.ppnote.k-ori{background:#F3E8F1;border-color:transparent}
/* the price — v165 value first: what the plan includes, three terms, one comparison (old dark strip .okpricein/.okpterms removed) */
/* FAQ */
.okfaq .faq2{max-width:820px;margin:0 auto}
.okfaq .note{text-align:center;margin-top:16px}
@media (max-width:900px){
  .okteachin{grid-template-columns:1fr;gap:28px}
  .oktphoto{max-width:420px;width:100%;margin:0 auto}
  .okproofs,.oklivegrid,.oklifegrid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .oksub{font-size:15.5px}
  .okwhy,.oklive,.oklife,.okfaq{padding:56px 0}
  .okteach{padding:56px 0}
  .oksteps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .okstep{padding:10px 10px 12px;border-radius:14px 14px 8px 8px}
  .okstep b{font-size:28px}.okstep span{font-size:12.5px}.okstep small{font-size:10.5px}
  .okstep.s1{height:96px}.okstep.s2{height:108px}.okstep.s3{height:120px}.okstep.s4{height:132px}.okstep.s5{height:144px}.okstep.s6{height:156px}
  .oknums2{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .oknums2 li:nth-child(3){border-left:0}
  .oknums2 b{font-size:30px}
  .oktmono{font-size:120px}
}

/* ---------- v164 admin · 방문 통계 ---------- */
.stper{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.stper button{padding:6px 14px;border-radius:9999px;border:1px solid var(--ok-line);background:#fff;font:700 13px var(--ok-ui);color:var(--ok-navy);cursor:pointer}
.stper button.on{background:var(--ok-navy);border-color:var(--ok-navy);color:#fff}
.stkpi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.stkpi div{padding:14px;border-radius:14px;background:var(--ok-bg)}
.stkpi b{display:block;font:800 26px/1.1 var(--disp);color:var(--ok-navy)}
.stkpi span{font:600 12.5px var(--ok-ui);color:var(--ok-muted)}
.stchart{display:flex;align-items:flex-end;gap:3px;height:170px;margin-top:18px;padding-bottom:20px;overflow-x:auto}
.stchart>div{position:relative;flex:1 0 14px;height:100%;display:flex;align-items:flex-end;justify-content:center}
.stchart i{position:absolute;bottom:0;width:70%;border-radius:4px 4px 0 0}
.stchart i.v{background:var(--ok-sky-line)}
.stchart i.u{background:var(--ok-sky-deep);width:44%}
.stchart span{position:absolute;bottom:-18px;font:600 9.5px var(--ok-ui);color:var(--ok-muted);white-space:nowrap}
.stchart>div:not(:nth-child(5n+1)) span{visibility:hidden}
.stleg{display:flex;gap:14px;align-items:center;margin:8px 0 0;font:600 12px var(--ok-ui);color:var(--ok-muted)}
.stleg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.stleg i.u{background:var(--ok-sky-deep)}.stleg i.v{background:var(--ok-sky-line)}
.stgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.stfun>div{display:grid;grid-template-columns:110px minmax(0,1fr) 44px 64px;align-items:center;gap:8px;padding:5px 0;font:600 13px var(--ok-ui)}
.stfun em{display:block;height:14px;border-radius:7px;background:var(--ok-sky)}
.stfun b{text-align:right}
.stfun small{color:var(--ok-muted);font-size:11.5px}
.stdev{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 0;font:600 13px var(--ok-ui);color:var(--ok-muted)}
.stdev b{color:var(--ok-navy)}
.stsess{padding:10px 0;border-top:1px solid var(--ok-line)}
.stsess .sh{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font:600 13px var(--ok-ui);color:var(--ok-muted)}
.stsess .sh b{color:var(--ok-navy)}
.stsess .sh .anon{padding:1px 8px;border-radius:9999px;background:var(--ok-bg)}
.stsess .ss{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px}
.stsess .ss i{padding:3px 8px;border-radius:8px;background:var(--ok-bg);font:600 12px var(--ok-ui);font-style:normal;color:var(--ok-navy)}
.stsess .ss i.k{background:var(--ok-yellow-soft);color:#7a5a00}
.stsess .ss span{color:var(--ok-muted);font-size:12px}
.steps2{margin:0;padding-left:20px;display:grid;gap:10px;line-height:1.55}
@media (max-width:900px){ .stkpi{grid-template-columns:repeat(3,minmax(0,1fr))} .stgrid{grid-template-columns:1fr} .stfun>div{grid-template-columns:90px minmax(0,1fr) 36px 52px} }

/* ---------- v164 live-class page (#/enrol): teacher · how a lesson works · 1:1 · group classes · FAQ ---------- */
.oklvtop{padding:64px 0 54px;text-align:center;background:linear-gradient(180deg,var(--ok-sky-soft),#fff)}
.oklvtop h1{margin:8px 0 10px;font-size:clamp(2.2rem,4.4vw,3.3rem)}
.oklvtop .lead{max-width:40em;margin:0 auto;color:var(--ok-muted);font-size:18px}
.oklvchips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:20px 0 22px}
.oklvchips span{padding:7px 14px;border-radius:9999px;background:#fff;border:1px solid var(--ok-sky-line);font:600 13.5px var(--ok-ui);color:var(--ok-navy)}
.oklvtop .row{justify-content:center;gap:10px}
.okhow{padding:80px 0}
.okhow3{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1100px;margin:0 auto;padding:0}
.okhow3 li{padding:24px;border-radius:24px;background:var(--ok-bg)}
.okhow3 i{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ok-sky);font:800 18px var(--disp);font-style:normal;color:var(--ok-navy)}
.okhow3 b{display:block;margin:14px 0 6px;font:800 22px var(--disp);color:var(--ok-navy)}
.okhow3 p{margin:0;color:var(--ok-text);line-height:1.55}
.okone1{padding:30px 0 80px}
.okgrp{padding:84px 0;background:var(--ok-cream)}
.okgrpin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;max-width:1100px;margin:0 auto}
.okgrptxt h2{margin:8px 0 10px;font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.18}
.okgrptxt>p{margin:0 0 18px;color:var(--ok-text);font-size:16.5px;line-height:1.6}
.okg3{list-style:none;counter-reset:g;margin:0 0 18px;padding:0;display:grid;gap:10px}
.okg3 li{counter-increment:g;position:relative;padding:12px 14px 12px 54px;border-radius:16px;background:#fff}
.okg3 li::before{content:counter(g);position:absolute;left:14px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--ok-green);font:800 14px/28px var(--ok-ui);text-align:center;color:var(--ok-navy)}
.okg3 b{display:block;font:700 15.5px var(--ok-ui);color:var(--ok-navy)}
.okg3 span{font-size:14px;color:var(--ok-muted)}
.okgprice{margin:0 0 10px;font:600 14.5px var(--ok-ui);color:var(--ok-text)}
.okgprice b{font:800 20px var(--disp);color:var(--ok-navy)}
.okgstat{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border-radius:12px;background:#fff;font:600 13.5px var(--ok-ui);color:var(--ok-muted)}
.okgstat i{width:9px;height:9px;border-radius:50%;background:var(--ok-yellow);box-shadow:0 0 0 4px var(--ok-yellow-soft)}
.okgform,.okgdone{padding:26px;border-radius:26px;background:#fff;box-shadow:var(--ok-sh-lg)}
.okgform .r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.okgform .field{display:grid;gap:6px;margin:0 0 14px;border:0;padding:0;min-width:0}
.okgform .field>span{font:700 13px var(--ok-ui);color:var(--ok-navy)}
.okgform input[type=text],.okgform select{height:46px;padding:0 12px;border:1px solid #94a3b8;border-radius:12px;font:500 15px var(--body);color:var(--ok-navy);background:#fff;min-width:0}
.okgtimes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.okgtimes label{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--ok-line);border-radius:12px;cursor:pointer;font:600 13.5px var(--ok-ui);color:var(--ok-navy)}
.okgtimes input{width:18px;height:18px;accent-color:var(--ok-sky-deep)}
.okgtimes label:has(input:checked){border-color:var(--ok-sky);background:var(--ok-sky-soft)}
.okgform .row{align-items:center;gap:12px}
.okgform .status{color:#b91c1c;font:600 13px var(--ok-ui)}
.okgform .note{margin:12px 0 0;font-size:13px}
.okgdone b{display:block;font:800 22px var(--disp);color:#3f7a12}
.okgdone p{color:var(--ok-text);line-height:1.55}
@media (max-width:900px){ .okgrpin{grid-template-columns:1fr} .okhow3{grid-template-columns:1fr} }
@media (max-width:640px){
  .oklvtop{padding:40px 0 36px}
  .okhow,.okgrp{padding:56px 0}
  .okgform,.okgdone{padding:18px}
  .okgform .r2,.okgtimes{grid-template-columns:1fr}
}
.cathide{display:flex;align-items:center;gap:8px;font:600 13px var(--ok-ui);color:var(--ok-muted);cursor:pointer}
.cathide input{width:16px;height:16px;accent-color:var(--ok-sky-deep)}
@media (max-width:640px){ .okvframe{height:552px} }

/* ---------- v165 price (value first) · New on haeyo · the teachers behind haeyo ---------- */
.okprice{padding:30px 0 84px;background:var(--ok-bg)}
.okprice.pg{padding:40px 0 64px}
.okpcard{max-width:1100px;margin:0 auto;padding:40px 40px 34px;border-radius:28px;background:#fff;border:1px solid var(--ok-line);box-shadow:var(--ok-sh)}
.okphd{max-width:760px;margin:0 auto 28px;text-align:center}
.okphd h2{margin:8px 0 0;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.2}
.okpgets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.okpg{padding:20px 22px;border-radius:20px;background:var(--ok-sky-soft);border:1px solid var(--ok-sky-line)}
.okpg.y{background:var(--ok-yellow-soft);border-color:#ffe08a}
.okpg small{display:block;font:800 12px/16px var(--ok-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ok-sky-ink)}
.okpg.y small{color:#8a6400}
.okpg p{margin:8px 0 0;font:500 15px/1.55 var(--body);color:var(--ok-text)}
.okpopts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.okpo{display:grid;justify-items:center;gap:4px;padding:20px 16px;border-radius:20px;border:2px solid var(--ok-line);background:#fff;color:var(--ok-navy);text-align:center;text-decoration:none;transition:transform .2s,border-color .2s}
.okpo:hover{transform:translateY(-3px);border-color:var(--ok-sky)}
.okpo b{font:700 15px var(--ok-ui);color:var(--ok-muted)}
.okpo strong{font:800 36px/1.1 var(--disp);color:var(--ok-navy)}
.okpo span{font:700 14px var(--ok-ui);color:var(--ok-sky-ink)}
.okpo em{font:600 12.5px var(--ok-ui);font-style:normal;color:var(--ok-muted)}
.okpcmp{margin:20px 0 0;text-align:center;font:600 16px/1.5 var(--ok-ui);color:var(--ok-navy)}
.okpcta{justify-content:center;gap:10px;margin-top:18px}
.oknew{padding:84px 0;background:#fff}
.oknewgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;max-width:1100px;margin:0 auto}
.oknc{position:relative;display:flex;flex-direction:column;gap:4px;padding:20px 20px 40px;border-radius:22px;border:1px solid var(--ok-line);background:#fff;color:var(--ok-navy);text-decoration:none;transition:transform .2s,box-shadow .2s}
.oknc:hover{transform:translateY(-4px);box-shadow:var(--ok-sh-lg)}
.oknc b{font:800 18px/1.25 var(--disp)}
.oknc span{font:700 13px var(--ok-ui);color:var(--ok-sky-deep)}
.oknc p{margin:4px 0 0;color:var(--ok-muted);font-size:14px;line-height:1.5}
.oknc i{position:absolute;left:20px;bottom:14px;font:700 15px var(--ok-ui);font-style:normal;color:var(--ok-sky-deep)}
.oknext{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;max-width:1100px;margin:20px auto 0;padding:16px 20px;border-radius:18px;background:var(--ok-bg)}
.oknext b{font:800 12px var(--ok-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ok-navy)}
.oknext ul{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none}
.oknext li{font:600 14px/1.45 var(--ok-ui);color:var(--ok-muted)}
.okteam{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1100px;margin:0 auto}
.oktm{padding:24px;border-radius:24px;background:#fff;border:1px solid var(--ok-line)}
.oktmhd{display:flex;align-items:center;gap:14px}
.oktmim{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--ok-sky);font:800 24px/1 var(--kr-disp,var(--disp));color:var(--ok-navy)}
.oktm.y .oktmim{background:var(--ok-yellow)}
.oktmhd b{display:block;font:800 20px/1.2 var(--disp);color:var(--ok-navy)}
.oktmhd small{font:600 13px var(--ok-ui);color:var(--ok-muted)}
.oktm>p{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--ok-text)}
.oktm .oktcreds{margin:14px 0 0}
.oktm .oktcreds li{background:var(--ok-bg);font-size:13.5px}
.okteamcta{justify-content:center;align-items:center;gap:16px;margin-top:24px}
@media (max-width:900px){
  .okpgets,.okteam{grid-template-columns:1fr}
  .oknewgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .okpcard{padding:24px 18px;border-radius:22px}
  .okpopts{grid-template-columns:1fr}
  .okpo{grid-template-columns:1fr auto;justify-items:start;text-align:left;column-gap:12px;padding:14px 16px}
  .okpo strong{grid-row:1/3;grid-column:2;align-self:center;font-size:28px}
  .oknew{padding:56px 0}
  .oknewgrid{grid-template-columns:1fr}
  .oknext{flex-direction:column}
}

/* ---------- v168 hero stage: six scenes (⑤ Word games · ⑥ Nuance), ② PDF open page · Level pass option · New on haeyo link ---------- */
.okvtabs button{min-width:132px}
/* ② PDF: an open chapter-1 page fills the right half on desktop */
.okv-pdf{grid-template-columns:auto minmax(220px,270px) minmax(0,1fr);gap:30px}
.okv-open{position:relative;align-self:center;padding:22px 20px 16px;border-radius:6px 14px 14px 6px;background:#fffdf8;border:1px solid #f1e6cf;box-shadow:0 26px 50px -24px rgba(15,23,42,.35)}
.okv-open small{display:block;font:700 11.5px var(--kr,var(--ok-ui));color:var(--ok-muted)}
.okv-open h5{margin:4px 0 10px;font:800 19px var(--kr-disp,var(--ok-ui));color:var(--ok-navy)}
.okv-open p{margin:0 0 7px;font:500 16px/1.55 var(--kr,var(--body));color:var(--ok-navy)}
.okv-open u{text-decoration:none;border-bottom:2px dotted var(--ok-sky-deep)}
.okv-foot{display:grid;gap:3px;margin-top:12px;padding-top:9px;border-top:1px solid #efe4cc;font:500 12.5px var(--body);color:var(--ok-muted)}
.okv-foot b{font-weight:800;color:var(--ok-navy);margin-right:4px}
.okv-sticker{position:absolute;top:-14px;right:-12px;padding:6px 12px;border-radius:9999px;background:var(--ok-yellow);color:var(--ok-navy);font:800 13px var(--ok-ui);box-shadow:0 10px 20px -10px rgba(15,23,42,.45);transform:rotate(6deg)}
.v2.on .okv-open{animation:okvIn .5s 1.05s both}
.v2.on .okv-sticker{animation:okvPop .45s 1.6s both}
/* ⑤ Word games */
.okv-play{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;align-items:center;height:100%}
.okv-chain>small,.okv-cho small{display:block;font:700 11px var(--ok-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ok-muted)}
.okv-lvs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 18px}
.okv-lvs span{padding:6px 12px;border-radius:9999px;border:1px solid var(--ok-line);background:#fff;font:700 12.5px var(--ok-ui);color:var(--ok-muted)}
.okv-lvs span.on{background:var(--ok-navy);border-color:var(--ok-navy);color:#fff}
.okv-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.okv-links li{position:relative;display:grid;gap:2px;padding:12px 12px 10px;border-radius:16px;background:#f3f6fa;text-align:center}
.okv-links li.you{background:var(--ok-sky-soft);box-shadow:inset 0 0 0 1.5px var(--ok-sky)}
.okv-links li+li::before{content:"→";position:absolute;left:-10px;top:50%;width:10px;margin-top:-10px;text-align:center;font:700 14px var(--ok-ui);color:var(--ok-muted)}
.okv-links small{font:700 11px var(--ok-ui);color:var(--ok-muted)}
.okv-links b{font:800 26px/1.2 var(--kr-disp,var(--ok-ui));color:var(--ok-navy);white-space:nowrap}
.okv-links span{font:500 12.5px var(--body);color:var(--ok-muted)}
.okv-links mark{background:none;color:var(--ok-sky-deep)}
.okv-links mark.n{color:#c2410c}
.okv-links mark.m{color:#3f9a12}
.okv-links .nx b i{display:inline-block;width:2px;height:22px;margin-left:2px;vertical-align:-3px;background:var(--ok-navy);animation:okvBlink 1s steps(2) infinite}
@keyframes okvBlink{50%{opacity:0}}
.okv-playside{display:grid;gap:12px}
.okv-playside p{margin:0;font:600 16px/1.45 var(--body);color:var(--ok-navy)}
.okv-playside .okv-fine{font:500 13.5px var(--body);color:var(--ok-muted)}
.okv-cho{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 16px;border-radius:16px;background:var(--ok-yellow-soft)}
.okv-cho small{flex-basis:100%}
.okv-cho b{font:800 24px var(--kr-disp,var(--ok-ui));color:var(--ok-navy)}
.okv-cho i{font-style:normal;color:var(--ok-muted)}
.v5.on .okv-lvs span{animation:okvPop .35s both}
.v5.on .okv-lvs span:nth-child(2){animation-delay:.08s}.v5.on .okv-lvs span:nth-child(3){animation-delay:.16s}.v5.on .okv-lvs span:nth-child(4){animation-delay:.24s}
.v5.on .okv-links li{animation:okvUp .4s both}
.v5.on .okv-links .w1{animation-delay:.3s}.v5.on .okv-links .w2{animation-delay:.75s}.v5.on .okv-links .w3{animation-delay:1.2s}.v5.on .okv-links .w4{animation-delay:1.6s}
.v5.on .okv-playside>*{animation:okvIn .45s both}
.v5.on .okv-playside>*:nth-child(1){animation-delay:.4s}.v5.on .okv-playside>*:nth-child(2){animation-delay:1s}.v5.on .okv-playside>*:nth-child(3){animation-delay:1.5s}
/* ⑥ Nuance */
.okv-nu{display:flex;flex-direction:column;justify-content:center;gap:16px;height:100%}
.okv-nuhd{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.okv-nuhd h4{margin:0;font:800 24px/1.2 var(--disp);color:var(--ok-navy)}
.okv-nulv{padding:4px 10px;border-radius:9999px;background:var(--ok-bg);font:700 12px var(--ok-ui);color:var(--ok-sky-deep)}
.okv-nurow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.okv-nuc{display:grid;align-content:start;gap:6px;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--ok-line);box-shadow:0 18px 40px -26px rgba(15,23,42,.4)}
.okv-nuc small{font:600 12.5px var(--ok-ui);color:var(--ok-muted)}
.okv-nuc small b{font:800 15px var(--kr-disp,var(--ok-ui));color:var(--ok-navy);margin-right:4px}
.okv-nuc p{margin:0;font:700 17px/1.45 var(--kr,var(--body));color:var(--ok-navy)}
.okv-nuc span{font:500 13px/1.45 var(--body);color:var(--ok-muted)}
.okv-nuc.c1{border-top:4px solid var(--ok-navy)}.okv-nuc.c2{border-top:4px solid var(--ok-sky)}.okv-nuc.c3{border-top:4px solid var(--ok-yellow)}
.okv-nusig{margin:0;padding:10px 14px;border-radius:12px;background:var(--ok-yellow-soft);font:600 14.5px/1.45 var(--body);color:var(--ok-text)}
.v6.on .okv-nuhd{animation:okvUp .4s .05s both}
.v6.on .okv-nuc{animation:okvDeal .55s cubic-bezier(.2,.9,.3,1.2) both}
.v6.on .okv-nuc.c1{animation-delay:.3s}.v6.on .okv-nuc.c2{animation-delay:.6s}.v6.on .okv-nuc.c3{animation-delay:.9s}
.v6.on .okv-nusig{animation:okvUp .4s 1.4s both}
@media (max-width:900px){
  .okv-pdf{grid-template-columns:auto minmax(0,1fr)}
  .okv-open{display:none}
  .okv-play{grid-template-columns:1fr;align-content:start;gap:16px}
  .okv-nurow{grid-template-columns:1fr;gap:8px}
  .okv-nu{justify-content:flex-start}
}
@media (max-width:640px){
  .okv-pdf{grid-template-columns:1fr}
  .okvtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:6px;padding:0}
  .okvtabs button{min-width:0;padding:7px 8px;font-size:12.5px}
  .okvtabs button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .okv-lvs{margin:8px 0 12px}
  .okv-lvs span{padding:5px 9px;font-size:11.5px}
  .okv-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
  .okv-links li{padding:8px}
  .okv-links li:nth-child(3)::before{display:none}
  .okv-links b{font-size:21px}
  .okv-playside p{font-size:14px}
  .okv-cho{padding:10px 12px}
  .okv-cho b{font-size:20px}
  .okv-nuhd h4{font-size:18px}
  .okv-nuc{padding:10px 12px;gap:3px}
  .okv-nuc p{font-size:14.5px}
  .okv-nuc span{font-size:12px}
  .okv-nusig{font-size:13px;padding:8px 12px}
}
/* Level pass: a fourth, smaller option under the three terms (shown only when sitedata levelPass is true) */
.okpass{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:12px 0 0;padding:14px 18px;border-radius:16px;border:1px dashed var(--ok-line);background:#fff}
.okpass-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.okpass-hd b{font:800 16px var(--ok-ui);color:var(--ok-navy)}
.okpass-hd span{font:500 14px var(--body);color:var(--ok-muted)}
.okpass-hd strong{font:800 20px var(--disp);color:var(--ok-navy)}
.okpass-lv{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.okpass-lv a{padding:5px 12px;border-radius:9999px;background:var(--ok-bg);border:1px solid var(--ok-line);font:800 13px var(--ok-ui);color:var(--ok-navy);text-decoration:none}
.okpass-lv a:hover{border-color:var(--ok-sky);background:var(--ok-sky-soft)}
@media (max-width:640px){ .okpass-lv{margin-left:0} }
/* New on haeyo: link to the whole hub */
.oknewgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.oknewall{max-width:1100px;margin:16px auto 0;text-align:right}
.oknewall a{font:700 15px var(--ok-ui);color:var(--ok-sky-deep);text-decoration:none}
.oknewall a:hover{text-decoration:underline}
@media (max-width:900px){ .oknewgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .oknewgrid{grid-template-columns:1fr} .oknewall{text-align:left} }
@media (min-width:901px){
  .okv-links{gap:14px}
  .okv-links li{padding:22px 12px 18px;border-radius:20px}
  .okv-links b{font-size:34px}
  .okv-links span{font-size:14px}
  .okv-links .nx b i{height:32px}
  .okv-lvs{margin:12px 0 24px}
  .okv-playside p{font-size:18px}
  .okv-cho{padding:18px 20px}
  .okv-cho b{font-size:30px}
  .okv-nu{gap:20px}
  .okv-nuhd h4{font-size:28px}
  .okv-nuc{padding:20px 20px 22px;gap:8px;min-height:190px}
  .okv-nuc p{font-size:20px}
  .okv-nuc span{font-size:14px}
  .okv-nusig{font-size:16px;padding:12px 16px}
}
@media (max-width:640px){ .okv-nusig{display:none} .okv-nu{gap:10px} }

/* v173: the WhatsApp icon inside the basket's "Send on WhatsApp too" button had no size and filled the button */
#sendWA svg,.btn > svg{width:20px;height:20px;flex:none;fill:currentColor}
#sendWA{display:inline-flex;align-items:center;gap:8px}

/* v169: level test — start-level chips (locked once chosen), the between-rounds card and the round history */
.quiz .atpick{display:grid;gap:12px;justify-items:center;text-align:center}
.quiz .atpick h2{margin:0;font:800 clamp(1.3rem,2.6vw,1.7rem)/1.25 var(--ok-ui,var(--disp));color:var(--ok-navy,var(--ink))}
.quiz .atpick p{margin:0;color:var(--ok-muted,var(--muted))}
.quiz .atchips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;margin:6px 0 4px}
.quiz .atchips button{display:grid;gap:4px;align-content:start;padding:12px 10px;border:1px solid var(--ok-line,#e2e8f0);border-radius:14px;background:#fff;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .15s,background-color .15s}
.quiz .atchips button:hover,.quiz .atchips button:focus-visible{border-color:var(--ok-sky,#42b0ff);background:var(--ok-sky-soft,#eaf6ff)}
.quiz .atchips b{font:800 20px var(--ok-ui,var(--disp));color:var(--ok-navy,var(--ink))}
.quiz .atchips small{font-size:12.5px;line-height:1.35;color:var(--ok-muted,var(--muted))}
.quiz .atmid{display:grid;gap:10px;justify-items:center;text-align:center}
.quiz .atmid .atsc{font:800 44px/1 var(--ok-ui,var(--disp));color:var(--ok-navy,var(--ink))}
.quiz .atmid p{margin:0;font-size:17px}
.quiz .athd{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint,#94a3b8)}
.quiz .athist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.quiz .athist li{display:flex;align-items:baseline;gap:6px;padding:5px 10px;border-radius:9999px;background:var(--alt2,#f1f5f9);font-size:13px}
.quiz .athist li span{color:var(--ok-muted,var(--muted))}
.quiz .athist li em{font-style:normal;font-weight:700}
.quiz .athist li.ok{background:#e7f6dd}.quiz .athist li.mid{background:#fff4d6}.quiz .athist li.no{background:#fde8e8}
.quiz .res .atwhy{font-weight:600}
@media (max-width:640px){ .quiz .atchips{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* v169: ③ Reading with grammar fits the phone frame (sentence, card, lesson chip and caption without clipping) */
@media (max-width:640px){
  .okv-read{gap:10px}
  .okv-text p:not(.tap):last-child,.okv-words span:nth-child(3){display:none}
  .okv-text small{margin-bottom:4px}
  .okv-pop p{margin-top:6px}
  .okv-pop p.tr{padding:6px 10px}
  .okv-words{margin-top:8px}
  .okv-lchip{margin-top:8px}
  .okv-cap{font-size:14px}
}
/* v169: phone tabs may wrap to two lines ("Reading with grammar" was cut to "Reading with…"); the story bars stay level */
@media (max-width:640px){
  .okvtabs button{grid-template-rows:1fr auto;align-items:end}
  .okvtabs button span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15}
}

/* v174: the mega-menu buttons are links now; hover bridge over the gap */
a.okmb{text-decoration:none}
a.okmb:visited{color:var(--ok-navy)}
.okpanel:before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
@media (hover:hover) and (pointer:fine) and (min-width:900px){.okmega:focus-within .okpanel[hidden]{display:block}.okmega:focus-within .okchev{transform:rotate(180deg)}}
/* v179: hero — speaking check strip in the games scene */
.okv-say{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;padding:12px 16px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ok-sky)}
.okv-say small{grid-column:1/-1;font:700 11px var(--ok-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ok-muted)}
.okv-say b.kr{font:800 22px var(--kr-disp,var(--ok-ui));color:var(--ok-navy)}
.okv-say .okv-mic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ok-sky);color:#fff;box-shadow:0 0 0 0 rgba(66,176,255,.45);animation:okvPulse 1.8s ease-out infinite}
.okv-say em{grid-column:1/-1;font:500 13px var(--body);font-style:normal;color:var(--ok-muted)}
.okv-say em b{color:#3f9a12}
@keyframes okvPulse{0%{box-shadow:0 0 0 0 rgba(66,176,255,.45)}70%{box-shadow:0 0 0 12px rgba(66,176,255,0)}100%{box-shadow:0 0 0 0 rgba(66,176,255,0)}}
@media (prefers-reduced-motion:reduce){.okv-say .okv-mic{animation:none}}
/* v186: K-Culture mega menu grows to four columns on wide screens (Live in Korea column) */
@media (min-width:961px){.okmgrid:has(> .okmg:nth-child(4)){grid-template-columns:repeat(4,1fr);gap:18px 20px}}
/* v190: hero scene 4 = Haeyo Korea magazine (small Issue 01 cover, same look as study.js .mc) */
.okv-mag{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:32px;align-items:center;height:100%;justify-content:center}
.mgh-cv{position:relative;display:block;aspect-ratio:3/4;width:100%;overflow:hidden;background:#1b2330;color:#fff;text-decoration:none;container-type:inline-size;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.12),0 18px 40px -18px rgba(15,23,42,.55);isolation:isolate}
.mgh-cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.mgh-sh{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.08) 26%,rgba(0,0,0,0) 42%,rgba(0,0,0,.25) 58%,rgba(0,0,0,.82) 100%)}
.mgh-mast{position:absolute;left:5.5cqw;top:4.5cqw;font:400 21cqw/.84 "Bebas Neue","Oswald",Impact,sans-serif;white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.mgh-bot{position:absolute;left:0;right:0;bottom:0;padding:0 5.5cqw 5cqw;display:flex;flex-direction:column}
.mgh-word{font:600 27cqw/1 "Noto Serif KR",serif;margin:0 0 3cqw -1cqw;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.mgh-ln{display:flex;flex-direction:column;gap:1.3cqw;font:600 4.2cqw/1.25 var(--ok-ui,system-ui)}
.mgh-ln span{padding-left:3cqw;border-left:.6cqw solid rgba(255,255,255,.85)}
.mgh-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.mgh-col h4{margin:0;font-size:22px;line-height:1.2}
.mgh-col p{margin:0;color:var(--ok-muted,#5b6472);font-size:15px;line-height:1.45}
.mgh-col p b{color:inherit}
@media (max-width:640px){.okv-mag{grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:14px;align-items:start}.mgh-col h4{font-size:17px}.mgh-col p{font-size:13px}.mgh-ln{display:none}.mgh-word{font-size:30cqw}}
/* v192: hero magazine scene — right column carries the three issues as small covers (desktop); phones keep the single cover */
.okv-mag{grid-template-columns:minmax(0,250px) minmax(0,1fr)}
.mgh-is{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;margin:6px 0 4px}
.mgh-i{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--ok-navy,#0f2a4a);min-width:0}
.mgh-th{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 22px -14px rgba(15,23,42,.55);transition:transform .2s}
.mgh-i:hover .mgh-th{transform:translateY(-3px)}
.mgh-th img{width:100%;height:100%;object-fit:cover;display:block}
.mgh-i b{font:800 12px/1.2 var(--ok-ui,system-ui);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.mgh-i span:not(.mgh-th){font:600 13px/1.25 var(--ok-ui,system-ui)}
.mgh-i small{font:500 12px var(--ok-ui,system-ui);color:var(--ok-muted,#5b6472)}
.mgh-act{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.mgh-all{font:700 15px var(--ok-ui,system-ui);color:var(--ok-navy,#0f2a4a);text-decoration:none}
.mgh-all:hover{text-decoration:underline}
@media (max-width:640px){.okv-mag{grid-template-columns:minmax(0,120px) minmax(0,1fr)}.mgh-is,.mgh-all{display:none}}
/* v192: About-haeyo level steps — one blue progression, no grey */
.okstep.s1{background:#dff1ff;color:var(--ok-navy)}.okstep.s2{background:#bfe3ff;color:var(--ok-navy)}.okstep.s3{background:#8fd0ff;color:var(--ok-navy)}
.okstep.s4{background:#42b0ff;color:#fff}.okstep.s5{background:#1f8fe0;color:#fff}.okstep.s6{background:#0f62b8;color:#fff}
/* v192: Korean Course panel — four quick buttons on top, six levels below, panel scrolls instead of being cut off */
.okmtop{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--ok-line)}
.okmtop .btn{height:auto;min-height:38px;padding:8px 16px;font-size:14px;line-height:20px}
.okpanel{max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain}
@media (max-width:640px){.okmtop .btn{flex:1 1 calc(50% - 8px);justify-content:center;text-align:center}}
/* v192: Sample lessons — big level chips, EN toggle marked with a red dot, one-line hint */
.lvtabs.smp{gap:10px;margin-bottom:8px}
.lvtabs.smp button{min-height:48px;padding:10px 22px;font-size:16px;line-height:1.2}
.smphint{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 14px;font:600 14px var(--ok-ui,system-ui);color:var(--ok-muted,#5b6472)}
.smpdot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#e5342b;flex:none}
.smp-pg .tb2 .tb2-entog::before{content:"";width:9px;height:9px;border-radius:50%;background:#e5342b;flex:none;box-shadow:0 0 0 3px rgba(229,52,43,.18)}
.smp-pg .tb2 .tb2-entog{font-weight:800;color:var(--ok-navy,#0f2a4a)}
@media (max-width:640px){.lvtabs.smp{flex-direction:column;align-items:stretch}.lvtabs.smp button{width:100%}}
/* v192: issue cards are thumbnail + text side by side so three of them fill the column and the scene keeps its height */
.mgh-is{gap:16px}
.mgh-i{display:grid;grid-template-columns:68px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:12px;row-gap:2px;align-items:start}
.mgh-i .mgh-th{grid-row:1 / span 3;grid-column:1}
.mgh-i b,.mgh-i span:not(.mgh-th),.mgh-i small{grid-column:2}
.mgh-i b{margin-top:2px}
/* v192: the six-level grid stays at 3 columns (the 4-column rule above is for the K-Culture panel and pushed Level 4 outside the 720px panel) */
@media (min-width:961px){.okmgrid:not(.three):has(> .okmg:nth-child(4)){grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 24px}}

/* v194: magazine hero scene — phone: no clipping (min-width 0, wrap) */
@media (max-width:640px){.okv-mag{grid-template-columns:104px minmax(0,1fr);gap:12px;width:100%;box-sizing:border-box}.okv-mag>*{min-width:0}.mgh-col h4,.mgh-col p{overflow-wrap:anywhere}}

/* v194: cat picture inside the round avatar (header My page pill, small My page spots) */
.okav.okcat{background:#fff}.okav.okcat svg{width:100%;height:100%;display:block}

/* v195 redesign A/B (2026-10-17, std/plan_site/03_REDESIGN A1–A7 · B) */
/* A1 hero: one trust line under the two buttons */
.oktrust{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 0;max-width:860px;margin:14px auto 0;font:600 14px/1.5 var(--ok-ui);color:var(--ok-muted)}
.oktrust span+span::before{content:"·";margin:0 10px;color:var(--ok-sky-deep)}
/* A4 one band of numbers (SITE.stats) */
.okstat{padding:30px 0 6px;background:#fff}
.okstatl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));max-width:1100px;margin:0 auto;padding:0;list-style:none}
.okstatl li{display:grid;justify-items:center;align-content:start;gap:2px;padding:6px 8px;border-left:1px solid var(--ok-line);text-align:center;min-width:0}
.okstatl li:first-child{border-left:0}
.okstatl b{font:800 clamp(26px,3.2vw,38px)/1.1 var(--disp);color:var(--ok-navy)}
.okstatl span{font:600 13.5px/1.3 var(--ok-ui);color:var(--ok-muted)}
.okstatn{max-width:720px;margin:12px auto 0;text-align:center;font:500 13px/1.5 var(--body);color:var(--ok-muted)}
/* A3 why us: four cells */
.okwhy.v195{padding:64px 0}
.okw4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1160px;margin:0 auto}
.okw{display:flex;flex-direction:column;min-width:0;padding:18px;border-radius:22px;background:#fff;border:1px solid var(--ok-line)}
.okw-vis{display:grid;place-items:center;height:124px;padding:12px;border-radius:16px;background:var(--ok-bg);overflow:hidden}
.okw>b{margin-top:14px;font:800 19px/1.25 var(--disp);color:var(--ok-navy)}
.okw>p{flex:1;margin:6px 0 8px;color:var(--ok-muted);font-size:14.5px;line-height:1.5}
.okw>a{display:inline-flex;align-items:center;min-height:44px;font:700 14.5px var(--ok-ui);color:var(--ok-sky-deep);text-decoration:none}
.okw>a:hover{text-decoration:underline}
.okw-band{display:flex;align-items:flex-end;gap:5px;width:100%;height:100%}
.okw-band span{flex:1;display:grid;place-items:end center;padding-bottom:4px;border-radius:8px 8px 4px 4px;font:800 15px/1 var(--disp);color:var(--ok-navy)}
.okw-band .b1{height:30%;background:#dff1ff}.okw-band .b2{height:44%;background:#bfe3ff}.okw-band .b3{height:58%;background:#8fd0ff}
.okw-band .b4{height:72%;background:#42b0ff;color:#fff}.okw-band .b5{height:86%;background:#1f8fe0;color:#fff}.okw-band .b6{height:100%;background:#0f62b8;color:#fff}
.okw-page{width:100%;max-width:210px;padding:10px 12px;border-radius:10px;background:#fff;box-shadow:0 10px 24px -14px rgba(15,23,42,.35);text-align:left}
.okw-pghd{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:12px;color:var(--ok-muted)}
.okw-pghd span{padding:1px 8px;border-radius:9999px;background:var(--ok-sky-soft);color:var(--ok-sky-ink);font:700 11px/18px var(--ok-ui)}
.okw-page small{display:block;font:700 10px/14px var(--ok-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ok-muted)}
.okw-page>b{display:block;font:800 17px/1.3 var(--ok-ui);color:var(--ok-navy)}
.okw-page p{margin:4px 0 0;font-size:14px}
.okw-page mark{background:var(--ok-yellow-soft,#fff4c2);color:inherit;border-radius:3px}
.okw-world{display:flex;flex-direction:column;align-items:center;gap:8px}
.okw-faces{display:flex;padding-left:6px}
.okface{width:40px;height:40px;margin-left:-6px;border:2px solid #fff;border-radius:50%;background:#fff}
.okw-covers{display:flex;gap:6px}
.okw-covers img{width:36px;height:50px;object-fit:cover;border-radius:3px 6px 6px 3px;box-shadow:0 6px 14px -8px rgba(15,23,42,.5)}
.okw-say{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;width:100%;max-width:220px;padding:10px 12px;border-radius:14px;background:#fff;text-align:left}
.okw-say small{grid-column:1/-1;font:700 10.5px var(--ok-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--ok-muted)}
.okw-say>b{font:800 18px/1.3 var(--ok-ui);color:var(--ok-navy)}
.okw-say .okv-mic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ok-sky);color:#fff}
.okw-say em{grid-column:1/-1;font:500 12px/1.4 var(--ok-ui);font-style:normal;color:var(--ok-muted)}
.okw-say em b{color:#3f7a12}
@media (max-width:1000px){.okw4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A5 New on haeyo: three cards in one row down to tablets */
@media (min-width:641px){.oknew.v195 .oknewgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* A2 scene stage: the phone line (two lines + one button) is hidden on wider screens */
.okv-m{display:none}
/* B navigation: Learn · Explore · Shop */
a.okmb.okshop{text-decoration:none;color:var(--ok-navy)}
.okmb.okshop.on{background:var(--ok-bg)}
.okdot.g{background:#e6f6da}
.okdot.g svg path{stroke:var(--ok-navy)}
@media (min-width:901px){
  .oknav .okmegas{position:relative}
  .oknav .okmega{position:static}
  .okpanel.okpx{width:min(980px,calc(100vw - 48px))}
}
@media (min-width:961px){.okmgrid.four:not(.three):has(> .okmg:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 20px}}
@media (max-width:900px){
  .okmegas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .okmb{min-width:0;height:48px}
  .okmb>span:not(.okdot){min-width:0;overflow:hidden;text-overflow:ellipsis}
  .okmgrid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .okmrow{min-height:48px}
  .okmrow a{display:inline-flex;align-items:center;min-height:44px}
  .okmi{display:flex;flex-direction:column;justify-content:center;min-height:48px;box-sizing:border-box}
  .okmfoot a{display:inline-flex;align-items:center;min-height:44px}
  .okmtop .btn{min-height:48px}
}
@media (max-width:640px){
  .okmb{height:48px;padding:0 8px;gap:6px;justify-content:center}
  .okmb .okdot{display:none}
  .okmb .okchev{margin-left:0}
  .okmgrid.four{grid-template-columns:1fr}
  /* A1 / A4 */
  .oktrust{font-size:12.5px;margin-top:10px}
  .oktrust span+span::before{margin:0 6px}
  .okstat{padding:22px 0 0}
  .okstatl{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}
  .okstatl li:nth-child(3n+1){border-left:0}
  .okstatl b{font-size:24px}
  .okstatl span{font-size:12px}
  .okstatn{font-size:12px}
  /* A3 */
  .okwhy.v195{padding:36px 0}
  .okw4{gap:10px}
  .okw{padding:12px;border-radius:18px}
  .okw-vis{height:88px;padding:8px}
  .okw>b{margin-top:10px;font-size:16px}
  .okw>p{font-size:13px;line-height:1.45}
  .okface{width:32px;height:32px}
  .okw-covers img{width:26px;height:36px}
  .okw-page{padding:6px 8px}.okw-page>b{font-size:14px}.okw-page p{font-size:12px}.okw-pghd{display:none}
  .okw-say{padding:6px 8px;gap:2px 6px}.okw-say>b{font-size:14px}.okw-say em{display:none}.okw-say .okv-mic{width:28px;height:28px}
  /* A2 scene stage ≤ 420px: no URL bar, picture part clipped, two lines + one button always visible */
  .okvframe{height:420px}
  .okvbar{display:none}
  .okvscenes{height:100%}
  .okvs{display:flex;flex-direction:column;padding:14px}
  .okvs>*{min-width:0}
  .okvs>:first-child{flex:1 1 auto;min-height:0;height:auto;overflow:hidden;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
  .okv-m{display:flex;align-items:center;gap:10px;flex:none;padding-top:10px;margin-top:6px;border-top:1px solid var(--ok-line)}
  .okv-m p{flex:1;min-width:0;margin:0;font:600 13px/1.4 var(--ok-ui);color:var(--ok-navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .okv-m .btn{flex:none;min-height:44px;padding:0 14px;font-size:13.5px;white-space:nowrap}
  .okv-cap,.mgh-act,.okv-nusig,.okv-fine{display:none}
  .okhero section.okvs{overflow:hidden}
}
/* v195 A7: phone home ≤ 7,000px — the two hero buttons side by side; teachers, plan contents and New cards as swipe rows (the next card peeks in as the hint) */
@media (max-width:640px){
  .okherocta{flex-wrap:nowrap;gap:8px}
  .okherocta .btn{flex:1 1 0;min-width:0;min-height:48px;padding:0 10px;font-size:14px;white-space:nowrap}
  .okteam,.okpgets,.oknew.v195 .oknewgrid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-right:-16px;padding-right:16px;-webkit-overflow-scrolling:touch}
  .okteam::-webkit-scrollbar,.okpgets::-webkit-scrollbar,.oknew.v195 .oknewgrid::-webkit-scrollbar{display:none}
  .okteam>*,.okpgets>*,.oknew.v195 .oknewgrid>*{flex:0 0 84%;min-width:0;scroll-snap-align:start;box-sizing:border-box}
}
@media (max-width:640px){
  .oknew.v195,.okteach,.okfaq{padding:36px 0}
  .okprice{padding-bottom:36px}
  .okend{padding:36px 0 40px}
  .okwhy.v195 .okwhyhd,.oknew.v195 .okwhyhd,.okteach .okwhyhd,.okfaq .okwhyhd{margin-bottom:20px}
}
@media (max-width:640px){
  .oktrust{display:grid;justify-items:center;gap:0}
  .oktrust span+span::before{content:none}
  .okv-m p{font-size:12.5px}
  .okv-m .btn{padding:0 12px;font-size:13px}
}
@media (max-width:640px){
  .okv-m{gap:8px}
  .okv-m .btn{padding:0 10px;font-size:12.5px}
}
@media (max-width:640px){
  .okv-m p{-webkit-line-clamp:3}
  .okmb{padding:0 6px;gap:4px;font-size:13.5px}
  .okmb .okchev{width:12px;height:12px;flex:none}
}
@media (max-width:640px){
  .okherocta .btn{flex:1 1 0;white-space:normal;line-height:1.2;text-align:center;justify-content:center}
  .okv-m{flex-wrap:wrap}
  .okv-m p{flex:1 1 170px}
}