/* Neutral hub (/) — from the approved chooser draft docs/re_site/drafts/pracexam_landing_draft.html (reviewer-only parts removed). */
/* Layout: logo bar on top, one question, two exam doors side by side (stack on phone); reviewer notes sit below a dashed line. */
:root{
  --bg:#EEF2F3; --surface:#FFFFFF; --ink:#232E30; --ink-mid:#4B5759; --line:#D3DCDE;
  --ea:#354649; --ea-acc:#6FA39E; --ea-tint:#EDF4F3;
  --re:#10304C; --re-acc:#4F7CAC; --re-tint:#E8EFF7;
  --cta:#DD8F75; --cta-deep:#B85F3F; --note-bg:#FFF8E8; --note-line:#E3C77A;
  --f-display:'Poppins','IBM Plex Sans KR','Pretendard Variable','Noto Sans KR',-apple-system,sans-serif;
  --f-body:'Inter','IBM Plex Sans KR','Pretendard Variable','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-brand:'Poppins','IBM Plex Sans KR','Pretendard Variable','Noto Sans KR',-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121A1C; --surface:#1B2527; --ink:#E4EBEC; --ink-mid:#A9B6B8; --line:#2E3B3E;
  --ea-tint:#1F2D2C; --re-tint:#1A2533; --note-bg:#2A2416; --note-line:#7A6630; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121A1C; --surface:#1B2527; --ink:#E4EBEC; --ink-mid:#A9B6B8; --line:#2E3B3E;
  --ea-tint:#1F2D2C; --re-tint:#1A2533; --note-bg:#2A2416; --note-line:#7A6630; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:18px}
.logo img{height:38px;width:auto;display:block}
.logo .w{display:none}
/* 2026-10-28 boss: the premium-study block below forces light colours, so phone dark mode must NOT switch to the white logo */
:root[data-theme="dark"] .logo .d{display:none}:root[data-theme="dark"] .logo .w{display:block}
.hdr-r{display:flex;gap:10px;align-items:center}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.lang button{background:none;border:0;color:var(--ink-mid);font:500 13px var(--f-body);padding:6px 11px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.btn{font:600 15px var(--f-body);border-radius:10px;padding:10px 18px;cursor:pointer;border:0;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-line{background:var(--surface);color:var(--ink);border:1.5px solid var(--ink)}
.btn-cta{background:var(--cta);color:#2A1A14}
.btn-cta:hover{background:var(--cta-deep);color:#fff}
.btn:focus-visible,.door:focus-visible,.chip:focus-visible{outline:3px solid var(--cta);outline-offset:3px}
.hero{padding-block:28px 26px;text-align:left}
.eyebrow{font:600 12px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mid)}
h1{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-size:clamp(34px,5vw,54px);line-height:1.08;margin:8px 0 10px;text-wrap:balance;max-width:16ch}
.lede{color:var(--ink-mid);max-width:58ch;margin:0}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding-block:8px 24px}
@media (max-width:760px){.doors{grid-template-columns:1fr}}
.door{display:flex;flex-direction:column;background:var(--surface);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(16,48,76,.08);transition:transform .2s ease,box-shadow .2s ease;min-width:0}
.door:focus-within{box-shadow:0 2px 4px rgba(0,0,0,.08),0 14px 34px rgba(16,48,76,.14)}
.door:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(0,0,0,.08),0 14px 34px rgba(16,48,76,.14)}
@media (prefers-reduced-motion:reduce){.door{transition:none}.door:focus-within{box-shadow:0 2px 4px rgba(0,0,0,.08),0 14px 34px rgba(16,48,76,.14)}
.door:hover{transform:none}}
.photo{display:block;position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.tag{position:absolute;left:14px;top:14px;font:700 13px var(--f-brand);color:#fff;padding:5px 12px;border-radius:999px;letter-spacing:.02em}
.ea .tag{background:var(--ea)} .re .tag{background:var(--re)}
.new{position:absolute;right:14px;top:14px;background:var(--cta);color:#2A1A14;font:700 12px var(--f-body);padding:4px 10px;border-radius:999px;letter-spacing:.06em}
.body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1;border-top:5px solid}
.ea .body{border-color:var(--ea-acc)} .re .body{border-color:var(--re-acc)}
.door h2{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-size:26px;line-height:1.1;margin:0}
.ea h2{color:var(--ea)} .re h2{color:var(--re)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ea h2{color:var(--ea-acc)}:root:not([data-theme="light"]) .re h2{color:#8DB0D6}}
:root[data-theme="dark"] .ea h2{color:var(--ea-acc)}:root[data-theme="dark"] .re h2{color:#8DB0D6}
.door p{margin:0;color:var(--ink-mid)}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
html[lang=en] .ko-only{display:none}
.facts li{border-radius:10px;padding:9px 10px;font-size:13px;line-height:1.3;color:var(--ink-mid)}
.ea .facts li{background:var(--ea-tint)} .re .facts li{background:var(--re-tint)}
.facts b{display:block;font:700 18px var(--f-brand);color:var(--ink);font-variant-numeric:tabular-nums}
.states{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.states span.lbl{font-size:13px;color:var(--ink-mid);margin-right:2px}
.chip{font:600 13px var(--f-body);border:1.5px solid var(--re-acc);color:var(--ink);background:none;border-radius:999px;padding:4px 12px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--re-acc);color:#fff}
.go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:4px}
.go .path{font:500 12px ui-monospace,Consolas,monospace;color:var(--ink-mid)}
.member{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:28px;text-align:center}
.member p{margin:0}
footer{color:var(--ink-mid);font-size:13px;padding-block:6px 30px}

/* ---- 2026-10-24 hub fix: real login modal, resume bar, switch, SEO sections ---- */
body{margin:0}
.scrim{position:fixed;inset:0;background:rgba(10,20,25,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100}
.scrim[hidden]{display:none}
.modal{background:var(--surface);color:var(--ink);border-radius:16px;width:100%;max-width:420px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal h3{font-family:var(--f-display);font-weight:700;font-size:28px;margin:0 0 4px}
.modal .sub{margin:0 0 6px;color:var(--ink-mid);font-size:14px}
.modal label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px}
.modal input[type=email],.modal input[type=password]{width:100%;font:15px var(--f-body);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.modal input:focus-visible{outline:3px solid var(--cta);outline-offset:1px}
.mrow{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.login-msg{display:none;margin-top:12px;font-size:13.5px;padding:9px 11px;border-radius:8px;background:rgba(220,38,38,.1);color:#B91C1C}
.login-msg.show{display:block}
.login-msg a{color:inherit;font-weight:700}

.btn:disabled{opacity:.6;cursor:default}
.resume-bar{display:flex;align-items:center;justify-content:center;width:100%;margin:18px 0 0;padding:14px 18px;background:var(--ea);color:#fff;border-radius:12px;font:700 16px var(--f-body);text-decoration:none;box-shadow:0 12px 26px -16px rgba(16,48,76,.6)}
.resume-bar[hidden]{display:none}
.resume-bar:hover{background:var(--re)}

/* header exam switch (exams.js + exam-switch.css) borrows the draft's colors, also in dark mode */
body[data-exam="hub"]{--white:var(--surface);--navy:var(--ink);--border-strong:var(--line);--text-mid:var(--ink-mid);--text-main:var(--ink);--accent:var(--ea-acc);--accent-tint:var(--ea-tint);--terracotta:var(--cta);--navy-rgb:16,48,76;--border-clr:var(--line)}
.nav-inner .exam-switch{margin-left:12px}
/* text sections below the chooser (crawlable) */
.hub-text{padding-block:8px 8px}
.hub-card{background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--acc);border-radius:14px;padding:26px 28px;margin-bottom:20px}
.hub-card.ea{--acc:var(--ea-acc)} .hub-card.re{--acc:var(--re-acc)}
.hub-card h2{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-size:clamp(22px,3.2vw,30px);line-height:1.2;margin:6px 0 10px}
.hub-card p{color:var(--ink-mid);margin:0 0 10px;max-width:70ch}
.hub-card ul{margin:0 0 16px;padding-left:20px;color:var(--ink-mid)}
.hub-card .btn{margin-top:4px}
.about-strip{text-align:center;color:var(--ink-mid);font-size:13px;padding:22px 0 8px;border-top:1px solid var(--line);margin-top:10px}
.about-strip h2{font-size:13px;margin:0 0 6px;font-family:var(--f-body);font-weight:700}
.about-strip p{margin:0 0 8px;max-width:70ch;margin-inline:auto}
.about-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:0;font-size:12px}
.about-facts div{display:flex;gap:5px} .about-facts dt{font-weight:600} .about-facts dd{margin:0}
.about-facts a{color:inherit}
footer .links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
footer a{color:var(--ink-mid)}
@media (max-width:560px){.hub-card{padding:22px 18px}}
.path{display:none}
.go{justify-content:flex-end}
/* ko/en spans inside the header switch (drawn by exams.js) follow <html lang> */
html[lang="en"] .exam-switch .ko, html[lang="ko"] .exam-switch .en{display:none !important}


/* ---- 2026-10-24 boss: old EA-style top menu + hero message with a big login card ---- */
header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.nav .nav-inner{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
header.nav .logo img{height:28px;width:auto}
.nav-right{display:flex;align-items:center;gap:20px;flex:0 1 auto;min-width:0}
.nav-menu{display:contents}
.nav-links{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:600;color:var(--ink-mid)}
.nav-links a{text-decoration:none;color:inherit}
.nav-links a:hover{color:var(--ink)}
.nav-links a.hi{color:var(--ea-acc);font-weight:700}
.nav-actions{display:flex;align-items:center;gap:10px}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--ea-tint)}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:var(--re)}
.lang-toggle{display:flex;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;flex:0 0 auto}
.lang-toggle button{font:700 12px var(--f-body);letter-spacing:.05em;padding:6px 11px;border:0;background:var(--surface);color:var(--ink-mid);cursor:pointer}
.lang-toggle button.active{background:var(--ink);color:var(--bg)}
.nav-toggle{display:none;flex:0 0 auto;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;border:0;background:none;cursor:pointer}
.nav-toggle svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round}
.nav-toggle .icon-close{display:none}
.nav-toggle.open .icon-bars{display:none}
.nav-toggle.open .icon-close{display:block}
@media (max-width:860px){
  .nav-right{gap:10px}
  .nav-toggle{display:flex}
  .nav-menu{display:none;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);padding:4px 24px 20px;box-shadow:0 16px 30px -14px rgba(16,48,76,.25)}
  .nav-menu.open{display:flex}
  .nav-links{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav-links a{display:block;padding:13px 2px;border-bottom:1px solid var(--line)}
  .nav-actions{flex-direction:column;align-items:stretch;width:100%;padding-top:14px}
  .nav-actions .btn{width:100%;justify-content:center;padding:13px 18px;font-size:14px}
}
@media (max-width:560px){
  header.nav .nav-inner{padding:12px 16px;gap:8px;flex-wrap:wrap}
  header.nav .nav-brand{display:contents}
  header.nav .logo{order:1}
  .nav-right{order:2}
  .nav-inner .exam-switch{margin-left:0;order:3;flex:1 0 100%}
  .nav-menu{padding:4px 16px 18px}
}
.hub-hero{padding-block:48px 34px;background:linear-gradient(135deg,var(--surface) 0%,var(--surface) 55%,var(--re-tint) 100%)}
.hub-grid{max-width:1120px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:44px;align-items:center}
.hub-hero h1{max-width:none;margin:12px 0 16px;font-size:clamp(38px,5.6vw,64px)}
.hub-hero h1 em{display:inline-block;margin-top:6px;font-style:italic;font-weight:800;font-size:clamp(27px,4.2vw,44px);letter-spacing:0;color:var(--re-acc)}
.hub-hero .lede{font-size:18px;max-width:560px}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px 22px;box-shadow:0 16px 36px -22px rgba(16,48,76,.4)}
.login-card h2{font-family:var(--f-display);font-weight:700;font-size:24px;margin:0 0 4px}
.login-card .sub{font-size:13.5px;color:var(--ink-mid);margin:0 0 6px}
.login-card label{display:block;font-size:13px;font-weight:600;color:var(--ink-mid);margin:12px 0 5px}
.login-card input{width:100%;padding:11px 12px;font:15px var(--f-body);color:var(--ink);border:1.5px solid var(--line);border-radius:9px;background:var(--bg)}
.login-card input:focus-visible{outline:3px solid var(--cta);outline-offset:1px}
.login-card .btn{width:100%;justify-content:center;margin-top:16px;padding:12px 18px}
.login-foot{margin:14px 0 0;font-size:13px;color:var(--ink-mid);text-align:center}
@media (max-width:900px){.hub-grid{grid-template-columns:1fr;gap:26px}.hub-hero{padding-block:32px 24px}}
@media (max-width:560px){.hub-grid{padding:0 16px}}

/* ---- 2026-10-24 boss: more air between hero and doors; doors are for choosing only ---- */
.hub-hero{padding-block:56px 64px}
.choose{padding-top:56px;padding-bottom:40px}
.choose-h{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-size:clamp(24px,3vw,32px);text-align:center;margin:0 0 28px}
.doors{gap:32px;padding-block:0}
.body{padding:24px 26px 26px;gap:14px}
.hub-text{padding-top:24px}
@media (max-width:900px){.hub-hero{padding-block:36px 44px}.choose{padding-top:40px}}
@media (max-width:760px){.doors{gap:24px}}

/* ---- 2026-10-24 boss: hub hero type = exactly the EA/RE landing hero (landing.css) ---- */
.hub-hero .eyebrow{font-weight:700}
.hub-hero h1{font-size:clamp(34px,5.5vw,58px);line-height:1.12;letter-spacing:-.02em;font-weight:700}
.hub-hero h1 em{font-size:clamp(27px,4.4vw,40px);margin-top:5px;text-shadow:0 2px 8px rgba(79,124,172,.15)}
@media (max-width:600px){.hub-hero h1 em{font-size:.82em}}

/* ---- 2026-10-24 boss (correction): the hub hero has no photo, so its type is LARGER than the landings ---- */
.hub-hero h1{font-size:clamp(40px,6.2vw,74px);line-height:1.08}
.hub-hero h1 em{font-size:clamp(30px,4.6vw,50px)}
.hub-hero .lede{font-size:19.5px}
@media (max-width:600px){.hub-hero h1 em{font-size:.8em}.hub-hero .lede{font-size:17px}}

/* ---- 2026-10-24 boss: the EA / RE text cards sit side by side, lined up with the photo doors above ---- */
.hub-text{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch}
.hub-text > #about{grid-column:1 / -1}
.hub-card{margin-bottom:0;display:flex;flex-direction:column;border-left:0;border-top:5px solid var(--acc);border-radius:16px;padding:26px 26px 24px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(16,48,76,.08)}
.hub-card .btn{margin-top:auto;align-self:flex-start}
.hub-card ul{margin-bottom:20px}
@media (max-width:760px){.hub-text{grid-template-columns:1fr;gap:24px}}

/* state labels on the RE door: shown, not selectable (boss 2026-10-24) */
.chip-static{cursor:default;background:var(--re-tint);border-color:transparent;color:var(--ink-mid)}

/* signed-in visitor: the login card turns into a «Welcome back» card (boss 2026-10-24) */
.resume-card[hidden],#hub-login[hidden]{display:none}
.resume-card .btn{width:100%;justify-content:center;margin-top:18px;padding:12px 18px}

/* ---- 2026-10-24 boss approved the premium study (site fonts): one ink, one accent, hairlines, more air ---- */
/* premium study: one ink colour, one accent, serif display, hairlines instead of shadows/stripes */
:root{--bg:#FBFAF7;--surface:#FFFFFF;--ink:#1C2326;--ink-mid:#5A6468;--line:#E6E3DC;--accent:#1F4E5A}
body{background:var(--bg)}
header.nav{background:rgba(251,250,247,.9);border-bottom:1px solid var(--line)}
.nav-links{font-weight:500;color:var(--ink-mid);gap:34px}
.nav-links a:hover{color:var(--ink)}
.btn-ghost{border:1px solid var(--ink);color:var(--ink);border-radius:999px;padding:7px 16px}
.lang-toggle{border:1px solid var(--line);border-radius:999px}
.lang-toggle button.active{background:var(--ink)}
.hub-hero{background:none;padding-block:88px 96px}
.hub-hero .eyebrow{color:var(--accent);font-weight:600;letter-spacing:.2em}
.hub-hero h1{font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;line-height:1.06;font-size:clamp(42px,6vw,76px);color:var(--ink)}
.hub-hero h1 em{display:block;font-family:var(--f-display);font-style:normal;font-weight:400;color:var(--ink-mid);text-shadow:none;font-size:clamp(26px,3.2vw,38px);margin-top:14px;letter-spacing:-.01em}
.hub-hero .lede{color:var(--ink-mid);font-size:18px;line-height:1.7;margin-top:22px;max-width:520px}
.login-card{border:1px solid var(--line);box-shadow:none;border-radius:4px;padding:30px 28px}
.login-card h2{font-family:var(--f-display);font-weight:600;font-size:26px}
.login-card input{border:1px solid var(--line);border-radius:2px;background:#fff}
.btn-primary,.login-card .btn{background:var(--ink);color:#fff;border-radius:2px;letter-spacing:.02em}
.btn-primary:hover{background:var(--accent)}
.choose{border-top:1px solid var(--line);padding-top:88px}
.choose-h{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,3.4vw,40px);margin-bottom:48px}
.doors{gap:48px}
.door{background:none;box-shadow:none;border-radius:0}
.door:hover,.door:focus-within{transform:none;box-shadow:none}
.photo{border-radius:4px}
.body{border-top:0;padding:26px 0 0;gap:12px}
.door h2{font-family:var(--f-display);font-weight:600;font-size:30px;color:var(--ink)!important}
.door p{font-size:16px;line-height:1.65}
.chip-static{background:none;border:1px solid var(--line);color:var(--ink-mid);font-weight:500}
.go{justify-content:flex-start;padding-top:8px}
.go .btn-cta{background:none;color:var(--ink);padding:0 0 3px;border-radius:0;border-bottom:1px solid var(--ink);font-weight:600}
.go .btn-cta:hover{background:none;color:var(--accent);border-color:var(--accent)}
.hub-text{padding-top:88px;gap:48px}
.hub-card{background:none;box-shadow:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:32px 0 0}
.hub-card h2{font-family:var(--f-display);font-weight:600}
.hub-card .eyebrow{color:var(--accent)}
.about-strip{border-top:1px solid var(--line);margin-top:56px;padding-top:40px}
.hero-cta{margin-top:28px;padding:13px 26px;font-size:15px}
@media (max-width:600px){.hero-cta{width:100%;justify-content:center}}

/* ---- 2026-10-24 boss: rounded corners like the rest of the site (EA/RE landings, app) ---- */
.btn-primary,.login-card .btn,.hero-cta{border-radius:10px}
.btn-ghost{border-radius:8px}
.lang-toggle{border-radius:8px}
.login-card{border-radius:14px}
.login-card input{border-radius:9px}
.photo{border-radius:16px}

/* ---- 2026-10-24 boss: less space above «Choose your license» ---- */
.hub-hero{padding-bottom:64px}
.choose{padding-top:56px}
@media (max-width:900px){.hub-hero{padding-bottom:40px}.choose{padding-top:36px}}

/* ---- 2026-10-24 boss: hero colour = D3 (navy band, soft glow) + smaller hero text ---- */
.hub-hero{background:radial-gradient(circle at 85% 15%,rgba(120,170,220,.38) 0%,rgba(120,170,220,0) 45%),radial-gradient(circle at 10% 100%,rgba(221,143,117,.18) 0%,rgba(221,143,117,0) 40%),linear-gradient(135deg,#0E2A45 0%,#1E3A4F 60%,#354649 100%)}
.hub-hero h1{color:#fff;font-size:clamp(32px,4.6vw,56px)}
.hub-hero h1 em{color:#BFD3E6;font-size:clamp(21px,2.5vw,30px);margin-top:10px}
.hub-hero .lede{color:rgba(255,255,255,.8);font-size:16.5px}
@media (max-width:600px){.hub-hero .lede{font-size:15.5px}}
.hub-hero .eyebrow{color:#DD8F75}
.hero-cta{background:#DD8F75;color:#2A1A14}
.hero-cta:hover{background:#E9A58D;color:#2A1A14}
.login-card{border-color:transparent;box-shadow:0 24px 50px -20px rgba(0,0,0,.45)}

/* ---- 2026-10-24 boss: smaller «Which exam are you preparing for?» ---- */
.choose-h{font-size:clamp(23px,2.7vw,32px)}

/* ---- 2026-10-24 boss: way back to the login form from the welcome card ---- */
.resume-switch{display:block;margin-top:14px;text-align:center;font-size:13.5px;color:var(--ink-mid);text-decoration:underline;text-underline-offset:3px}
.resume-switch:hover{color:var(--ink)}

/* ---- 2026-10-24 boss: centred footer like pracexam.com (links · social per exam · copyright) ---- */
.hub-foot{border-top:1px solid var(--line);padding:32px 0 36px;text-align:center}
.hub-foot .links{justify-content:center;gap:8px 22px;margin:0}
.hub-foot .links a{text-decoration:none}
.hub-foot .links a:hover{color:var(--ink)}
.foot-social{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;margin-top:18px}
.social-group{display:flex;align-items:center;gap:4px}
.social-label{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--ink-mid);margin-right:6px}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--ink-mid)}
.social-link svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.social-link:hover{background:var(--line);color:var(--ink)}
.social-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hub-foot .copy{margin-top:16px;font-size:12.5px}

/* ---- 2026-10-24 boss: long text cards removed; 3 check lines inside each door (app-icon check), no state chips ---- */
.hub-text{padding-top:8px}
.door-list{list-style:none;margin:16px 0 8px;padding:0;display:grid;gap:10px}
.door-list li{position:relative;padding-left:30px;color:var(--ink-mid);font-size:15px;line-height:1.5}
.door-list li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;background:url(/img/check-mark.png) center/contain no-repeat}

/* ---- 2026-10-24 boss: «More states on the way» under the RE states line ---- */
.door-list li.door-note{margin-top:-6px;font-size:13px;font-style:italic;color:var(--ink-mid);opacity:.8}
.door-list li.door-note::before{content:none}
.door-list .dl-t{display:block;font-weight:700;color:var(--ink);font-size:15.5px;line-height:1.45}
.door-list .dl-d{display:block;margin-top:2px;font-size:14px;line-height:1.55;color:var(--ink-mid)}
.door-list{align-content:start}

/* ---- 2026-10-26 boss: door links become real buttons (each exam's own colour) + the whole card is clickable ---- */
.door{position:relative;cursor:pointer}
.door .go .btn-cta{display:inline-flex;align-items:center;gap:6px;padding:13px 24px;border:0;border-radius:10px;font-weight:600;font-size:15px;letter-spacing:.01em;color:#fff;box-shadow:0 6px 16px -8px rgba(0,0,0,.35);transition:background .15s,transform .15s}
.door.ea .go .btn-cta{background:#3E716C}          /* EA teal, dark enough for white text */
.door.ea .go .btn-cta:hover{background:#2F5A56;color:#fff;transform:translateY(-1px)}
.door.re .go .btn-cta{background:#10304C}          /* RE navy */
.door.re .go .btn-cta:hover{background:#2F5F8F;color:#fff;transform:translateY(-1px)}
.door .go .btn-cta::after{content:"";position:absolute;inset:0;z-index:1}   /* stretched link: click anywhere on the card */
.photo img{transition:transform .35s}
.door:hover .photo img{transform:scale(1.03)}
@media (max-width:600px){.door .go .btn-cta{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.door:hover .photo img,.door .go .btn-cta:hover{transform:none}}

/* ---- 2026-10-26 boss: hub colour review — match the new logo (navy #10304C + salmon #DD8F75 on warm cream) ----
   Before: ink #1C2326 (green-black) + accent #1F4E5A (dark teal) from the EA family → login button black, hover green.
   Light theme only; the dark theme keeps its own values. EA teal / RE navy stay on their own door buttons. */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--ink:#16283A;--ink-mid:#4A5866;--accent:#2F5F8F}}
:root[data-theme="light"]{--ink:#16283A;--ink-mid:#4A5866;--accent:#2F5F8F}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .login-card .btn{background:#10304C;color:#fff}
  :root:not([data-theme="dark"]) .login-card .btn:hover{background:#2F5F8F}
  :root:not([data-theme="dark"]) .btn-ghost:hover{background:#E8EFF7}
  :root:not([data-theme="dark"]) .lang-toggle button.active{background:#10304C;color:#fff}}
:root[data-theme="light"] .login-card .btn{background:#10304C;color:#fff}
:root[data-theme="light"] .login-card .btn:hover{background:#2F5F8F}
:root[data-theme="light"] .lang-toggle button.active{background:#10304C;color:#fff}
/* 2026-10-26 boss: the photo must not move when the mouse is only over the card — no photo zoom on hover */
.door:hover .photo img{transform:none}
/* 2026-10-26 boss: one button colour for both doors (navy), so the hub has only salmon (hero) + navy (login, doors) */
.door.ea .go .btn-cta{background:#10304C}
.door.ea .go .btn-cta:hover{background:#2F5F8F}
/* 2026-10-26 boss: door buttons in salmon, the same as the hero «Select Your Exam» button — salmon = start here, navy = log in */
.door.ea .go .btn-cta,.door.re .go .btn-cta{background:#DD8F75;color:#2A1A14}
.door.ea .go .btn-cta:hover,.door.re .go .btn-cta:hover{background:#B85F3F;color:#fff}
/* 2026-10-26 boss: text blinked when the mouse was NEXT to the button. Cause: the stretched-link ::after made the whole card
   count as «hovering the button», and the hover translateY turned the button into the containing block, shrinking ::after
   back to the button → hover off → back on → loop. Fix: drop the stretched link and the hover lift. The photo stays a link. */
.door .go .btn-cta::after{content:none}
.door{cursor:auto}
.door.ea .go .btn-cta:hover,.door.re .go .btn-cta:hover{transform:none}
/* 2026-10-26 boss: lift the person photo when the mouse is ON the photo (only). No flicker: the rounding moves to the img,
   the link keeps overflow visible, and an invisible strip under the lifted photo keeps the hover while it is raised. */
.door .photo{overflow:visible;border-radius:16px;transition:transform .25s ease,box-shadow .25s ease}
.door .photo img{border-radius:16px}
.door .photo::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px}
.door .photo:hover{transform:translateY(-6px);box-shadow:0 18px 32px -14px rgba(16,48,76,.45)}
@media (prefers-reduced-motion:reduce){.door .photo:hover{transform:none}}
/* 2026-10-26 boss: the lifted photo was clipped at the card top (the card had overflow:hidden), so the top corners looked square */
.door{overflow:visible}
/* 2026-10-26 boss: Korean words were split across lines (자/신). Break Korean only between words. */
body{word-break:keep-all;overflow-wrap:break-word}
/* ---- 2026-10-31 boss: a soft vertical divider between the EA and RE columns (desktop only) ---- */
@media (min-width:761px){
  .doors{position:relative}
  .doors::before{content:"";position:absolute;top:8px;bottom:8px;left:50%;width:1px;transform:translateX(-.5px);background:rgba(16,48,76,.14);pointer-events:none}
}
/* ---- 2026-10-31 boss (iPhone dark mode): login inputs had a fixed white background (#fff) while the text took the dark-theme
   light ink, so typed text was white on white. Same for the login button (light ink background + white text).
   Dark theme only: inputs use the dark page colour, buttons use navy with white text. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .login-card input{background:var(--bg);color:var(--ink);-webkit-text-fill-color:var(--ink)}
  :root:not([data-theme="light"]) .login-card .btn,:root:not([data-theme="light"]) .btn-primary{background:#2F5F8F;color:#fff}
  :root:not([data-theme="light"]) .login-card .btn:hover,:root:not([data-theme="light"]) .btn-primary:hover{background:#4F7CAC}
  :root:not([data-theme="light"]) .lang-toggle button.active{background:#2F5F8F;color:#fff}
}
:root[data-theme="dark"] .login-card input{background:var(--bg);color:var(--ink);-webkit-text-fill-color:var(--ink)}
:root[data-theme="dark"] .login-card .btn,:root[data-theme="dark"] .btn-primary{background:#2F5F8F;color:#fff}
:root[data-theme="dark"] .login-card .btn:hover,:root[data-theme="dark"] .btn-primary:hover{background:#4F7CAC}
:root[data-theme="dark"] .lang-toggle button.active{background:#2F5F8F;color:#fff}