/* 바빠스마트 클래스: 로그인과 학습 화면 전용 */
.bascl-ui { --bg:#f4f7fc; --ink:#202d45; --accent:#2260db; --accent2:#2260db; --good:#176747; --radius:20px; background:var(--bg); color:var(--ink); font-size:17px; line-height:1.65; }
.bascl-ui .topbar { z-index:20; min-height:88px; padding:18px max(28px,calc((100vw - 1200px)/2)); border-bottom:1px solid #e5eaf3; background:#fffffff5; gap:20px; backdrop-filter:blur(16px); }
.brand-link { display:flex; align-items:center; gap:18px; text-decoration:none; flex-shrink:0; }
.brand-link img { width:220px; height:auto; display:block; }
.brand-divider { height:22px; width:1px; background:#dce2eb; }
.brand-service { font-size:13px; font-weight:600; color:#66758d; }
.bascl-ui .topbar nav { display:flex; gap:24px; align-items:center; }
.bascl-ui .topbar nav a { font-size:14px; color:#57657b; margin:0; font-weight:600; }
.bascl-ui .topbar nav a:hover { color:#2260db; }
.bascl-ui .who { font-size:14px; color:#57657b; }
.bascl-ui main { margin:40px auto 64px; }
.bascl-ui .card { border:1px solid #e2e8f2; box-shadow:0 5px 24px #263b6310; padding:30px; margin-bottom:22px; }
.bascl-ui h1 { font-size:28px; letter-spacing:-1px; line-height:1.4; }
.bascl-ui h2 { font-size:23px; letter-spacing:-.7px; }
.bascl-ui .muted { font-size:15px; color:#63728a; }
.bascl-ui label { font-size:15px; margin:18px 0 7px; }
.bascl-ui input,.bascl-ui select,.bascl-ui textarea { font:inherit; font-size:17px; min-height:54px; border:1px solid #d9e1ed; border-radius:11px; padding:13px 16px; color:var(--ink); transition:border-color .15s,box-shadow .15s; }
.bascl-ui input::placeholder { color:#78869a; }
.bascl-ui :focus-visible { outline:3px solid #8caffc; outline-offset:4px; }
.bascl-ui input:focus,.bascl-ui select:focus,.bascl-ui textarea:focus { border-color:#2260db; box-shadow:0 0 0 3px #2260db12; outline:0; }
.bascl-ui .bigbtn { font:inherit; font-size:17px; font-weight:700; padding:15px 20px; border:1px solid #d9e3f5; border-radius:12px; color:#2458b6; background:#f2f6ff; transition:background .15s,transform .15s; }
.bascl-ui .bigbtn:hover { background:#e6edfc; transform:translateY(-1px); }
.bascl-ui .bigbtn.green,.bascl-ui .bigbtn.blue { border-color:#2260db; background:#2260db; color:#fff; box-shadow:0 5px 12px #2260db20; }
.bascl-ui .bigbtn.green:hover,.bascl-ui .bigbtn.blue:hover { background:#174bb8; }
.bascl-ui .err { background:#fff0f0; border-radius:10px; padding:12px 16px; font-size:15px; color:#b32c3a; }
.bascl-ui .ok-banner { font-size:15px; }
.auth-page { background:radial-gradient(ellipse at 10% 80%,#e5eeff 0,transparent 50%),#f7f9fd; }
.bascl-ui .auth-main { max-width:1120px; display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:90px; padding:24px; margin:48px auto 30px; }
.eyebrow { display:inline-block; color:#2260db; font-size:12px; letter-spacing:1.5px; font-weight:800; }
.auth-story h1 { font-size:48px; line-height:1.3; letter-spacing:-2px; margin:22px 0 20px; }
.auth-story h1 span { color:#2260db; }
.auth-story > p { font-size:18px; color:#61718b; margin:0; }
.subject-tags { display:flex; gap:9px; margin-top:22px; }
.subject-tags span { background:#fff; border:1px solid #dce6f6; border-radius:50px; padding:5px 17px; font-size:13px; font-weight:700; color:#42618f; }
.friends-stage { position:relative; margin-top:28px; min-height:245px; display:flex; align-items:center; justify-content:center; }
.friends-stage::before { content:''; position:absolute; width:90%; height:210px; background:#e4edff; border-radius:50%; bottom:0; }
.friends-stage img { position:relative; width:100%; max-width:450px; height:auto; transform:rotate(-3deg); }
.character-note { position:absolute; bottom:0; right:12px; padding:9px 16px; border-radius:14px 14px 14px 3px; background:#fff; color:#315ca6; box-shadow:0 5px 20px #20345212; font-weight:700; font-size:13px; }
.auth-story .story-caption { font-size:12px; margin-top:24px; color:#657898; }
.auth-panel { padding:38px; background:white; border:1px solid #e2e8f3; border-radius:24px; box-shadow:0 16px 60px #314a7910; }
.auth-panel h2 { font-size:28px; margin:10px 0 8px; letter-spacing:-1px; }
.auth-description { font-size:15px; color:#64748c; margin:0 0 26px; }
.form-row { display:grid; grid-template-columns:1.5fr 1fr; gap:14px; }
.auth-panel .bigbtn { margin:28px 0 0; display:flex; justify-content:space-between; align-items:center; }
.auth-help { margin-top:24px; padding-top:20px; border-top:1px solid #edf0f5; color:#69788f; font-size:12px; text-align:center; }
.brand-footer { text-align:center; color:#70809a; font-size:12px; padding:22px 20px 30px; }.brand-footer span { margin:0 8px; color:#a2afc3; }
.study-banner { display:flex; align-items:center; justify-content:space-between; gap:24px; background:#e9f0ff; border:1px solid #dce7fb; border-radius:20px; padding:26px 32px; margin-bottom:26px; }
.study-banner h1 { margin:6px 0 4px; }.study-banner p { margin:0; color:#61728f; font-size:16px; }
.study-banner img { width:110px; height:110px; object-fit:contain; flex-shrink:0; }
.bascl-ui .exam-main { width:100%; max-width:1440px; padding:0 24px; }
.exam-summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.exam-summary span { padding:4px 12px; border-radius:8px; background:white; color:#3d5e95; font-size:13px; font-weight:600; }
.bascl-ui .exam-wrap { gap:28px; }
.bascl-ui .qcard { padding:30px 34px; scroll-margin-top:112px; }
.bascl-ui .qno { display:inline-block; font-size:13px; font-weight:800; color:#2260db; background:#edf3ff; border-radius:7px; padding:4px 10px; margin:0; }
.bascl-ui .question { font-size:23px; letter-spacing:-.5px; line-height:1.7; margin:16px 0; white-space:pre-line; }
.bascl-ui .passage { background:#f7f9fc; border:1px solid #e2e8f2; border-radius:12px; padding:22px; font-size:20px; line-height:1.9; }
.bascl-ui .opts { display:grid; grid-template-columns:1fr; gap:10px; margin-top:22px; }
.bascl-ui .opt { position:relative; min-height:58px; margin:0; border:1px solid #dfe6f1; font-size:20px; font-weight:500; padding:14px 18px; border-radius:12px; gap:14px; transition:background .15s,border-color .15s; }
.bascl-ui .opt:hover { background:#f6f9ff; border-color:#9bb8eb; }
.bascl-ui .opt:has(input:checked) { background:#edf3ff; border-color:#2260db; box-shadow:inset 0 0 0 1px #2260db; color:#184eaf; }
.bascl-ui .opt input { display:block; position:absolute; width:1px; height:1px; min-height:0; opacity:0; padding:0; }
.bascl-ui .opt:focus-within { outline:3px solid #8caffc; outline-offset:3px; }
.bascl-ui .opt-no { font-size:21px; color:#577095; }
.bascl-ui .omr { width:280px; top:112px; max-height:calc(100dvh - 132px); overflow:auto; border:1px solid #dee6f2; padding:24px; box-shadow:0 8px 30px #263b6310; }
.omr-heading { font-size:16px!important; font-weight:800; margin:0 0 16px!important; }.clock-label { font-size:12px; color:#687b95; text-align:center; }
.bascl-ui .omr-clock { font-size:38px; letter-spacing:1px; color:#203d72; font-variant-numeric:tabular-nums; line-height:1.4; }.bascl-ui .omr-clock.time-warning { color:#be3541; }
.bascl-ui .omr-who { border-bottom:1px solid #edf0f5; padding:10px 0 18px; margin:0 0 18px; font-size:14px; color:#586b87; }
.answer-status { display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:10px; }.answer-status strong { color:#2260db; }
.exam-progress { width:100%; height:6px; border:0; display:block; margin-bottom:18px; accent-color:#2260db; }.exam-progress::-webkit-progress-bar { background:#edf1f7; border-radius:10px; }.exam-progress::-webkit-progress-value { background:#2260db; border-radius:10px; }
.bascl-ui .omr-grid { grid-template-columns:repeat(5,1fr); gap:7px; }
.bascl-ui .omr-cell { border:1px solid #dce4f0; border-radius:9px; font-size:12px; padding:7px 2px; background:#fafbfd; }.bascl-ui .omr-no { font-size:13px; }.bascl-ui .omr-mark { font-size:12px; min-height:20px; color:#2260db; overflow-wrap:anywhere; }
.bascl-ui .omr-cell.done { background:#edf3ff; border-color:#8fb3f6; color:#174fb5; }
.omr-hint { font-size:12px; color:#687b95; margin:12px 0 0; text-align:center; }
.bascl-ui th,.bascl-ui td { font-size:16px; border-bottom:1px solid #e5ebf4; }
@media(max-width:1000px) { .bascl-ui .auth-main { gap:36px; }.auth-story h1 { font-size:40px; }.auth-panel { padding:28px; }.brand-service,.brand-divider { display:none; }.bascl-ui .topbar { padding:16px 24px; }.bascl-ui .omr { width:250px; } }
@media(max-width:800px) { .bascl-ui .topbar { gap:12px; min-height:76px; }.brand-link img { width:190px; }.bascl-ui .topbar nav { gap:16px; }.bascl-ui .topbar nav a { font-size:12px; }.bascl-ui .auth-main { grid-template-columns:1fr; max-width:520px; gap:24px; margin-top:20px; }.auth-story h1 { font-size:34px; margin:12px 0; }.auth-story > p { font-size:15px; }.friends-stage { position:absolute; width:145px; right:0; bottom:26px; min-height:85px; margin:0; }.friends-stage::before { height:80px; }.character-note,.story-caption { display:none; }.auth-story { position:relative; padding-right:135px; }.subject-tags { gap:5px; margin-top:14px; }.subject-tags span { font-size:11px; padding:4px 10px; }.auth-story .eyebrow { font-size:10px; letter-spacing:.5px; }.bascl-ui .exam-wrap { display:flex; flex-direction:column; }.bascl-ui .omr { width:100%; position:static; order:0; }.exam-questions { width:100%; order:1; }.bascl-ui .omr-grid { grid-template-columns:repeat(8,minmax(0,1fr)); }.bascl-ui .omr-who { padding-bottom:10px; }.bascl-ui .omr-clock { font-size:30px; }.bascl-ui .exam-main { padding:0 16px; }.study-banner { padding:22px; }.study-banner h1 { font-size:24px; }.study-banner img { width:80px; height:80px; }.bascl-ui .qcard { padding:24px; }.bascl-ui .question { font-size:22px; }.bascl-ui .passage { font-size:19px; }.bascl-ui .opt { font-size:19px; } }
@media(max-width:440px) { .bascl-ui .topbar { position:relative; padding:16px 20px; }.bascl-ui .topbar nav { width:100%; }.bascl-ui .auth-main { padding:0 18px; }.auth-panel { padding:26px 22px; }.auth-panel h2 { font-size:25px; }.auth-story h1 { font-size:29px; }.friends-stage { width:125px; }.auth-story { padding-right:110px; }.auth-story > p { font-size:13px; }.bascl-ui .omr-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }.bascl-ui .card { padding:22px; }.study-banner { gap:8px; }.study-banner h1 { font-size:22px; }.study-banner p { font-size:14px; }.study-banner img { width:66px; height:80px; }.bascl-ui .qcard { scroll-margin-top:16px; }.bascl-ui .passage { padding:16px; } }
@media(max-width:800px) { .auth-story > p { max-width:205px; }.friends-stage { bottom:0; }.bascl-ui .omr { max-height:none; overflow:visible; } }
@media(max-width:440px) { .auth-story > p { max-width:190px; }.friends-stage { width:110px; }.bascl-ui .auth-panel label { margin-top:14px; } }
@media(prefers-reduced-motion:reduce) { .bascl-ui * { transition:none!important; } }