/* okul.css — v145 (2026-10-14) · haru Korean on the Okulistik layout, haru 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 haru 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,.okpills button: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,.okpi 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}
.okfeat{position:absolute;left:24px;top:22px;z-index:2;width:216px;text-align:left;background:#fff;border-radius:22px;box-shadow:var(--ok-sh-lg);border:1px solid var(--ok-line);padding:16px 14px 14px}
.okfh{display:flex;gap:10px;align-items:center;margin:0 4px 12px}
.okspark{font-style:normal;color:var(--ok-yellow);font-size:22px;line-height:1}
.okfh small{display:block;font:700 10px/12px var(--ok-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ok-sky-deep)}
.okfh b{display:block;font:700 16px/1.2 var(--disp);color:var(--ok-navy)}
.okfeat ol{list-style:none;margin:0;padding:0 0 0 12px;display:grid;gap:8px;border-left:2px dotted var(--ok-sky-line);margin-left:6px}
.okfeat li{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--ok-line);border-radius:14px;background:#fff}
.okfeat li b{display:block;font:700 13px/17px var(--ok-ui);color:var(--ok-navy)}
.okfeat li small{display:block;font:500 12px/16px var(--body);color:var(--ok-muted)}
.okic{flex:none;width:36px;height:36px;border-radius:11px;background:center/20px no-repeat}
.okic.ok-a{background-color:var(--ok-sky);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5C7 4.5 9.5 4.7 12 6.5v13c-2.5-1.8-5-2-8-1z'/%3E%3Cpath d='M20 5.5c-3-1-5.5-.8-8 1v13c2.5-1.8 5-2 8-1z'/%3E%3C/svg%3E")}
.okic.ok-b{background-color:var(--ok-green);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.okic.ok-c{background-color:var(--ok-yellow);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z'/%3E%3Cpath d='M18 15l.8 2.2L21 18l-2.2.8L18 21l-.8-2.2L15 18l2.2-.8z'/%3E%3C/svg%3E")}
.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}
.okpills{display:flex;justify-content:center;gap:14px;margin:38px auto 0;flex-wrap:wrap}
.okpills button{display:flex;align-items:center;gap:14px;min-width:260px;padding:12px 22px 12px 12px;border:2px solid transparent;border-radius:18px;background:var(--ok-cream);cursor:pointer;text-align:left;transition:background .2s,border-color .2s,box-shadow .2s}
.okpills button:hover{background:#fff3d6}
.okpills button.on{background:#fff;border-color:var(--ok-sky);box-shadow:var(--ok-sh)}
.okpi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--ok-sky);flex:none}
.okpi.bk{background:var(--ok-yellow)}
.okpi svg{width:22px;height:22px}
.okpills b{display:block;font:700 17px/1.2 var(--ok-ui);color:var(--ok-navy)}
.okpills small{display:block;font:500 13px/1.3 var(--body);color:var(--ok-muted);margin-top:2px}

/* ---------- home: the two panels ---------- */
.okpanels{padding:26px 0 56px}
.okpanels .wrap{max-width:1100px}
.okph{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;margin-bottom:16px}
.okph h2{font-size:1.45rem}
.okph a{font:600 14px/20px var(--ok-ui);color:var(--ok-sky-deep);text-decoration:none}
.okph a:hover{text-decoration:underline}
.okltg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.oklt{display:flex;flex-direction:column;border:1px solid var(--ok-line);border-radius:18px;background:#fff;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.oklt:hover{border-color:var(--ok-sky-line);box-shadow:var(--ok-sh)}
.okltm{display:block;padding:16px 14px 10px;text-decoration:none;color:inherit;flex:1}
.okcode{display:block;font:800 28px/1 var(--disp);color:var(--ok-navy);margin-bottom:6px}
.oklt.g1 .okcode{color:var(--ok-sky-deep)}
.okltm small{display:block;font:500 12.5px/1.35 var(--body);color:var(--ok-muted)}
.okla{display:flex;border-top:1px solid var(--ok-line)}
.okla a{flex:1;text-align:center;padding:9px 4px;font:600 12.5px/1 var(--ok-ui);color:var(--ok-navy);text-decoration:none}
.okla a+a{border-left:1px solid var(--ok-line)}
.okla a:hover{background:var(--ok-sky-soft);color:var(--ok-sky-ink)}
.oklt.off{background:var(--ok-bg);border-style:dashed}
.oklt.off .okcode{color:#94a3b8}
.okshelf{display:grid;grid-auto-flow:column;grid-auto-columns:132px;gap:16px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory}
.okbook{scroll-snap-align:start;text-decoration:none;color:var(--ok-navy)}
.okbook img{display:block;width:132px;height:176px;object-fit:cover;border-radius:10px;box-shadow:0 8px 20px rgba(15,23,42,.14);margin-bottom:10px;transition:transform .2s}
.okbook:hover img{transform:translateY(-3px)}
.okbook b{display:block;font:700 13px/1.35 var(--kr);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.okbook small{display:block;font:600 12px/1.4 var(--ok-ui);color:var(--ok-muted);margin-top:2px}
.okmore{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.okmore a{display:block;padding:16px;border:1px solid var(--ok-line);border-radius:16px;text-decoration:none;color:var(--ok-navy);transition:border-color .2s,box-shadow .2s}
.okmore a:hover{border-color:var(--ok-sky-line);box-shadow:var(--ok-sh)}
.okmore b{display:block;font:700 15px/1.3 var(--ok-ui);margin-bottom:4px}
.okmore span{display:block;font:500 13px/1.4 var(--body);color:var(--ok-muted)}
.okmore .okbdg,.okmi .okbdg{display:inline-block;font:700 11px/18px var(--ok-ui);color:var(--ok-navy)}
.okshelf{scrollbar-width:thin;scrollbar-color:var(--ok-sky-line) transparent}

/* ---------- home: numbers · 1:1 · sign up ---------- */
.oknums{padding:30px 0;border-top:1px solid var(--ok-line);border-bottom:1px solid var(--ok-line);background:var(--ok-bg)}
.oknums ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.oknums li{text-align:center;padding:4px 10px}
.oknums li+li{border-left:1px solid var(--ok-line)}
.oknums b{display:block;font:800 34px/1.1 var(--disp);color:var(--ok-navy)}
.oknums li span{font:600 14px var(--ok-ui);color:var(--ok-muted)}
.oknums p{margin:14px 0 0;text-align:center;font-size:.92rem;color:var(--ok-muted)}
.okone{padding:44px 0 0}
.okonebox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;max-width:1100px;margin:0 auto;padding:22px 26px;border:1px solid var(--ok-line);border-radius:20px}
.okonebox b{display:block;font:700 18px/1.3 var(--disp);color:var(--ok-navy)}
.okonebox span{display:block;font-size:.95rem;color:var(--ok-muted)}
.okonebox .row{align-items:center;gap:16px}
.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){
  .okfeat{position:static;width:auto;max-width:860px;margin:30px auto 0;padding:12px}
  .okfh{display:none}
  .okfeat ol{grid-template-columns:repeat(3,1fr);border:0;margin:0;padding:0}
  .okhero{padding-top:44px}
}
@media (max-width:1080px){
  .okltg{grid-template-columns:repeat(4,minmax(0,1fr))}
  .okmore{grid-template-columns:repeat(2,1fr)}
}
@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}
  .okpills{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
  .okpills button{min-width:0;flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
  .okpills b{font-size:15px}
  .okpi{width:40px;height:40px;border-radius:12px}
  .okfeat{margin:22px 0 0;padding:0;border:0;box-shadow:none;background:none;max-width:100%}
  .okfeat ol{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px}
  .okfeat li{flex:0 0 74%;scroll-snap-align:start}
  .okpanels{padding:18px 0 40px}
  .okltg{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .okcode{font-size:24px}
  .okshelf{grid-auto-columns:112px;gap:12px}
  .okbook img{width:112px;height:150px}
  .okmore{grid-template-columns:1fr}
  .oknums ul{grid-template-columns:1fr 1fr;row-gap:14px}
  .oknums li:nth-child(3){border-left:0}
  .oknums b{font-size:28px}
  .okonebox{padding:18px}
  .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}
  .okpills{grid-template-columns:1fr}
  .okltg{grid-template-columns:1fr}
  .okfcols{grid-template-columns:1fr}
}

/* ---------- v148 hero stage: the product itself, turning through book · workbook · AI reading ---------- */
.okstage{position:relative;max-width:760px;height:410px;margin:44px auto 0}
.okscreen{position:relative;z-index:2;width:min(500px,100%);height:372px;margin:0 auto;background:#fff;border-radius:24px;border:1px solid var(--ok-line);box-shadow:0 30px 70px -20px rgba(15,23,42,.25);overflow:hidden;text-align:left}
.okbar{display:flex;align-items:center;gap:6px;height:38px;padding:0 16px;background:var(--ok-bg);border-bottom:1px solid var(--ok-line)}
.okbar i{width:10px;height:10px;border-radius:50%;background:#e2e8f0}
.okbar i:first-child{background:#ffd3cf}.okbar i:nth-child(2){background:var(--ok-yellow-soft)}.okbar i:nth-child(3){background:var(--ok-green-soft)}
.okbar span{margin-left:auto;font:800 14px var(--disp);color:var(--ok-navy)}
.okscenes{position:relative;height:300px}
.oks{position:absolute;inset:0;padding:16px 26px;opacity:0;transform:translateY(10px);animation:okscene 12s infinite}
.oks.s2{animation-delay:4s}.oks.s3{animation-delay:8s}
@keyframes okscene{0%{opacity:0;transform:translateY(10px)}3%,30%{opacity:1;transform:none}32.5%,100%{opacity:0;transform:translateY(-8px)}}
.okst{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.okst small{font:600 12px var(--ok-ui);color:var(--ok-muted)}
.okstag{padding:3px 11px;border-radius:9999px;background:var(--ok-sky);color:var(--ok-navy);font:700 12px/18px var(--ok-ui)}
.okstag.g{background:var(--ok-green)}.okstag.y{background:var(--ok-yellow)}
.oks h3{font-size:1.5rem;margin:0 0 10px}
.okex{display:flex;flex-direction:column;margin:0 0 6px;padding:6px 12px;border-radius:12px;background:var(--ok-bg)}
.okex b{font-size:1.1rem;color:var(--ok-navy)}
.okex span{font-size:.85rem;color:var(--ok-muted)}
.okform{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.okform div{padding:8px 12px;border:1px dashed var(--ok-sky-line);border-radius:12px}
.okform small{display:block;font:600 11px var(--ok-ui);color:var(--ok-muted)}
.okform b{font-size:1.05rem;color:var(--ok-navy)}
.okq{font-size:1.45rem;font-weight:700;color:var(--ok-navy);margin:18px 0 18px}
.okq i{display:inline-block;width:72px;border-bottom:3px solid var(--ok-sky);margin:0 4px;font-style:normal}
.okq mark{background:var(--ok-yellow-soft);box-shadow:inset 0 -.45em 0 var(--ok-yellow);border-radius:3px;padding:0 2px;color:inherit}
.okopts2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.okopts2 span{padding:12px;border:1.5px solid var(--ok-line);border-radius:14px;text-align:center;font-size:1.15rem;font-weight:700;color:var(--ok-navy)}
.okopts2 .ok{border-color:var(--ok-green);background:var(--ok-green-soft);animation:okpick 12s infinite 4s}
.okopts2 em{font-style:normal;color:#3f7a12}
@keyframes okpick{0%,8%{border-color:var(--ok-line);background:#fff}12%,30%{border-color:var(--ok-green);background:var(--ok-green-soft)}}
.okscore{display:flex;align-items:center;gap:12px;margin-top:22px}
.okscore span{flex:1;height:10px;border-radius:9999px;background:var(--ok-bg);position:relative;overflow:hidden}
.okscore span::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--ok-green);border-radius:inherit}
.okscore b{font:700 14px var(--ok-ui);color:var(--ok-navy)}
.okpop{position:relative;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--ok-line);box-shadow:var(--ok-sh-lg)}
.okpop::before{content:"";position:absolute;left:110px;top:-7px;width:12px;height:12px;background:#fff;border-left:1px solid var(--ok-line);border-top:1px solid var(--ok-line);transform:rotate(45deg)}
.okpop b{font-size:1.15rem;color:var(--ok-navy);margin-right:8px}
.okpop small{font:700 11px var(--ok-ui);color:var(--ok-sky-ink);background:var(--ok-sky-soft);padding:2px 8px;border-radius:9999px}
.okpop span{display:block;margin:6px 0 4px;font-size:.92rem;color:var(--ok-text)}
.okpop i{display:block;font-style:normal;font-size:.85rem;color:var(--ok-muted)}
.okdots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px}
.okdots i{width:8px;height:8px;border-radius:9999px;background:#e2e8f0;animation:okdot 12s infinite}
.okdots i:nth-child(2){animation-delay:4s}.okdots i:nth-child(3){animation-delay:8s}
@keyframes okdot{0%,33%{width:22px;background:var(--ok-sky)}34%,100%{width:8px;background:#e2e8f0}}
.okcov{position:absolute;z-index:1;width:118px;height:158px;object-fit:cover;border-radius:12px;box-shadow:0 18px 36px -12px rgba(15,23,42,.35);animation:okfloat 6s ease-in-out infinite}
.okcov.k1{left:0;top:30px;transform:rotate(-8deg)}
.okcov.k2{left:58px;top:190px;width:104px;height:140px;transform:rotate(5deg);animation-delay:-2s}
.okcov.k3{right:0;top:20px;transform:rotate(7deg);animation-delay:-1s}
.okcov.k4{right:52px;top:186px;width:104px;height:140px;transform:rotate(-5deg);animation-delay:-3s}
@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)}
.okstage:hover .oks,.okstage:hover .okdots i,.okstage:hover .okopts2 .ok{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .oks,.okdots i,.okcov,.okbub,.okopts2 .ok{animation:none}
  .oks.s1{opacity:1;transform:none}
  .okdots i:first-child{width:22px;background:var(--ok-sky)}
}
@media (max-width:900px){
  .okstage{max-width:520px}
  .okcov.k2,.okcov.k4{display:none}
  .okcov{width:96px;height:128px}
  .okcov.k1{left:-30px}.okcov.k3{right:-30px}
}
@media (max-width:640px){
  .okstage{height:auto;margin-top:30px;padding-top:26px}
  .okscreen{height:372px;border-radius:20px}
  .okscenes{height:304px}
  .oks h3{font-size:1.3rem;margin-bottom:8px}
  .oks{padding:16px 18px}
  .okcov{display:none}
  .okbub.b1{left:4px;top:0}.okbub.b2{right:4px;top:0}.okbub.b3{display:none}
  .okbub{font-size:13px;padding:6px 11px}
  .okq{font-size:1.25rem;margin:12px 0}
}

/* ---------- 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}
.okfeats{padding:0 0 4px}
.okfeat{position:static;width:auto;max-width:1100px;margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border:0;box-shadow:none;background:none;text-align:left}
.okfeat li{padding:14px 16px;border-radius:16px;background:var(--ok-bg);border:0}
.okpanels{padding:40px 0 56px}
.okpanels .okpills{margin:0 auto 24px}
.okpanels .okph{justify-content:flex-end;margin-bottom:12px}
@media (max-width:1240px){ .okfeat{max-width:1100px;margin:0 auto} }
@media (max-width:640px){
  .okhero{padding:28px 0 28px}
  .okfeat{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 0 8px;margin:0}
  .okfeat li{flex:0 0 78%;scroll-snap-align:start}
  .okpanels{padding:28px 0 40px}
  .okpanels .okpills{margin-bottom:18px}
}