:root{color-scheme:light;--ink:#15263c;--muted:#617084;--blue:#145dc5;--blue-soft:#edf4ff;--line:#dce3ec;--bg:#f6f8fb;--red:#c92334;font-family:system-ui,-apple-system,'Segoe UI','Malgun Gothic','Apple SD Gothic Neo',sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-text-size-adjust:100%}button,input,textarea{font:inherit}button,a,input,label{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:var(--blue);text-underline-offset:3px}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.4;letter-spacing:-.04em}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #68a5ff;outline-offset:3px}[hidden]{display:none!important}.shell{max-width:720px;margin:auto;padding:0 22px 44px}.brand{display:flex;align-items:center;gap:9px;min-height:82px;border-bottom:1px solid var(--line);font-size:15px;font-weight:700}.brand svg{width:25px;height:25px;color:var(--blue)}.badge{font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line);padding:2px 9px;border-radius:5px;margin-left:auto;letter-spacing:0}.intro{padding:52px 0 20px;text-align:center}.intro h1{font-size:38px;font-weight:800}.intro .lead{font-size:20px;color:var(--muted);margin-top:20px}.rule-line{display:flex;justify-content:center;align-items:center;gap:18px;margin:32px 0 28px;font-size:18px}.rule-line strong{font-size:25px;font-weight:750}.rule-line .separator{width:1px;height:22px;background:var(--line)}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:58px;border-radius:12px;border:1px solid transparent;padding:12px 21px;font-weight:750;font-size:20px;text-decoration:none;transition:background .12s,box-shadow .12s}.primary{background:var(--blue);color:white}.primary:hover:not(:disabled){background:#104fa8}.primary:disabled{background:#e1e6ed;color:#748296}.secondary{background:white;color:var(--ink);border-color:var(--line)}.secondary:hover{background:#f1f5fa}.full{width:100%}.intro .primary{max-width:460px}.helper{color:var(--muted);font-size:15px;margin-top:18px;text-align:center;word-break:keep-all}.error{background:#fff3f3;border:1px solid #f2c5cb;color:#a82030;padding:13px 16px;border-radius:10px;font-size:16px;margin:18px 0;white-space:pre-wrap}.notice{background:#f0f5ff;border:1px solid #c7d8f7;color:#224d81;border-radius:10px;padding:13px 16px;font-size:15px;white-space:pre-wrap}.warning{background:#fff8e9;border:1px solid #edd59a;color:#714d10;border-radius:10px;padding:14px 17px;font-size:15px;white-space:pre-wrap}.exam-top{position:sticky;top:0;z-index:2;background:var(--bg);padding:18px 0 12px;box-shadow:0 1px 0 var(--line);margin-bottom:18px}.exam-line{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.exam-line h1{font-size:22px}.count{font-size:16px;color:var(--blue);font-weight:750}.exam-top progress{display:block;width:100%;height:5px;border:0;border-radius:5px;overflow:hidden;appearance:none}.exam-top progress::-webkit-progress-bar{background:#dfe7f2}.exam-top progress::-webkit-progress-value{background:var(--blue)}.exam-top progress::-moz-progress-bar{background:var(--blue)}.question-card{background:white;border:1px solid var(--line);border-radius:15px;margin:0 0 18px;padding:24px 21px}.question-card fieldset{border:0;margin:0;padding:0;min-width:0}.question-card legend{width:100%;padding:0;margin-bottom:17px;font-size:21px;font-weight:750;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;letter-spacing:-.025em}.question-num{display:inline-block;color:var(--blue);margin-right:8px;font-size:17px;letter-spacing:0}.option{position:relative;display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:10px;padding:16px;margin-top:10px;line-height:1.6;font-size:18px;word-break:keep-all;overflow-wrap:anywhere;cursor:pointer;background:white}.option input{margin:5px 0 0;min-width:23px;width:23px;height:23px;accent-color:var(--blue)}.option:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}.option-text{flex:1}.submit-bar{position:sticky;bottom:0;z-index:3;background:rgba(246,248,251,.97);padding:12px 0 16px;border-top:1px solid var(--line)}.submit-bar .helper{font-size:14px;margin:0 0 8px}.result{padding:38px 0 0;text-align:center}.result h1{font-size:29px}.score{font-size:86px;color:var(--blue);line-height:1.2;letter-spacing:-.06em;font-weight:800;margin:24px 0 12px}.score small{font-size:28px;margin-left:5px;letter-spacing:0}.result-sub{font-size:19px;color:var(--muted)}.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}.text-button{padding:9px;border:0;background:none;color:var(--muted);font-size:15px;text-decoration:underline;text-underline-offset:4px;margin-top:15px}.review{margin-top:32px;text-align:left}.review-heading{font-size:21px;margin-bottom:16px}.review .option{cursor:default}.review .correct{color:var(--red);background:#fff6f6;border-color:#f0c7cd;font-weight:750}.answer-tag{display:inline-block;font-size:13px;font-weight:700;border-radius:5px;padding:1px 6px;margin-left:8px;background:#ffe6e8;color:#a51a2b;white-space:nowrap}.selected-tag{display:inline-block;font-size:12px;color:#526273;margin-left:8px;font-weight:500;white-space:nowrap}.status-message{font-size:15px;color:#275c44;padding:10px 0;min-height:25px}.admin-shell{max-width:980px}.admin-login{max-width:460px;margin:50px auto}.admin-login h1{font-size:29px}.form-label{display:block;font-size:16px;font-weight:700;margin:22px 0 8px}.input{width:100%;min-height:52px;border:1px solid #b8c5d5;border-radius:9px;padding:12px 14px;font-size:18px;background:white;color:var(--ink)}textarea.input{min-height:108px;resize:vertical}.admin-login .button{margin-top:26px}.admin-toolbar{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:28px 0 12px}.admin-toolbar h1{font-size:28px}.admin-tools{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.small-button{font-size:15px;min-height:42px;padding:8px 14px;border-radius:8px}.stats{font-size:16px;color:var(--muted);margin-bottom:16px}.bank-list{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:16px}.bank-row{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:16px;justify-content:space-between}.bank-row:last-child{border-bottom:0}.bank-title{font-size:17px;font-weight:650;overflow-wrap:anywhere;word-break:keep-all}.bank-state{margin-top:5px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.bank-state .active-label{color:#225b44}.bank-state .review-label{color:#926008}.bank-actions{display:flex;gap:6px;flex-shrink:0}.danger{color:#b12434}.edit-panel{max-width:720px;margin:30px auto;background:white;border:1px solid var(--line);border-radius:14px;padding:25px}.edit-panel h1{font-size:27px}.edit-option{display:flex;align-items:flex-start;gap:11px;margin:12px 0}.edit-option input[type=radio]{width:24px;height:24px;margin-top:15px;accent-color:var(--blue);flex-shrink:0}.edit-option .input{min-height:68px;font-size:17px}.edit-option .option-letter{padding-top:12px;font-size:18px}.checkbox-label{display:flex;align-items:flex-start;gap:10px;font-size:17px;margin-top:20px}.checkbox-label input{width:22px;height:22px;margin:3px 0 0;accent-color:var(--blue);flex-shrink:0}.detail-panel{border:1px solid var(--line);border-radius:10px;padding:17px 20px;margin:22px 0;background:white}.detail-panel summary{font-size:16px;font-weight:700;cursor:pointer}.detail-panel p{font-size:15px;color:var(--muted);margin-top:12px}.share-url{overflow-wrap:anywhere;word-break:break-all}
@media(max-width:560px){.shell{padding:0 18px 28px}.brand{min-height:68px}.intro{padding-top:40px}.intro h1{font-size:34px}.intro .lead{font-size:18px}.question-card{padding:21px 16px}.question-card legend{font-size:20px}.option{font-size:18px;padding:14px 12px;gap:10px}.actions{grid-template-columns:1fr}.score{font-size:80px}.admin-toolbar{align-items:flex-start}.admin-toolbar h1{font-size:25px}.bank-row{flex-direction:column;gap:12px;padding:17px}.bank-actions{align-self:flex-end}.edit-panel{padding:20px 16px}.admin-tools .button{font-size:14px}.form-label{font-size:15px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* 2026-10: six-digit education access gate, tidy exam alignment */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pin-form{max-width:420px;margin:40px auto 0}
.pin-input{display:block;width:100%;height:78px;border-radius:13px;border:2px solid #c6d3e3;background:white;color:var(--ink);
text-align:center;font-size:34px;letter-spacing:.40em;font-weight:700;font-variant-numeric:tabular-nums;padding:10px 0 10px .4em}
.pin-input::placeholder{color:#bec9d5;font-size:24px;letter-spacing:.24em;font-weight:400}
.pin-input:focus{outline:3px solid #9cc8fa;outline-offset:2px;border-color:#1768c5}
.pin-form .button{margin-top:16px}
.intro .lead{margin-bottom:0}
#start .primary{margin-top:64px}
#start .helper{margin-top:24px}
.question-card fieldset{min-width:0}
.question-heading{display:grid;grid-template-columns:33px minmax(0,1fr);gap:12px;align-items:start;
margin:0 0 20px;font-size:21px;font-weight:750;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;letter-spacing:-.025em}
.question-heading .question-num{display:block;margin:0;font-size:19px;line-height:1.8}
.question-heading .question-copy{min-width:0}
.option{display:grid;grid-template-columns:24px 28px minmax(0,1fr);column-gap:11px;align-items:start}
.option input{grid-column:1;grid-row:1;margin-top:5px}
.option-letter{grid-column:2;grid-row:1;display:block;white-space:nowrap}
.option-text{grid-column:3;grid-row:1;min-width:0;display:block}
.review .option .option-empty{grid-column:1;grid-row:1}
.review .question-heading{font-size:20px}
.review .option{align-items:start}
@media(max-width:560px){
 .question-heading{grid-template-columns:30px minmax(0,1fr);gap:9px;font-size:20px}
 .question-heading .question-num{font-size:17px;line-height:1.85}
 .option{grid-template-columns:23px 25px minmax(0,1fr);column-gap:9px}
 .pin-input{font-size:31px;height:72px}
}

/* 프로그램에서 이동한 읽기용 제목에는 입력 포커스 테두리를 표시하지 않습니다. */
h1[tabindex='-1']:focus{outline:none}

/* 교육생 화면: 열차감시원 교육 시스템 + 공식 CI 기반 KORAIL 로고 배치 */
.brand-title{min-width:0;white-space:nowrap;font-size:clamp(12px,3.7vw,15px);font-weight:750;letter-spacing:-.04em}
.brand-logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-left:auto;width:122px;height:40px;background:#fff;border:1px solid #d5e2ee;border-radius:7px;padding:7px 9px}
.brand-logo img{display:block;object-fit:contain;width:100%;height:auto;max-height:27px}
@media(max-width:380px){.brand{gap:7px}.brand svg{width:21px;height:21px;flex-shrink:0}.brand-logo{width:105px;height:36px;padding:6px 8px}.brand-title{font-size:clamp(11.3px,3.65vw,13.5px)}}
@media(max-width:340px){.brand{gap:5px}.brand-logo{width:95px;height:33px}.brand-title{font-size:11.4px}.shell{padding-inline:14px}}

/* CI 적용: 별도 테두리/배경 없이 공식 로고를 보여줍니다. */
.brand-logo,.brand-logo:hover{flex:0 0 124px;width:124px;height:auto;min-height:38px;border:0!important;background:transparent!important;border-radius:0!important;padding:0!important;margin-left:auto;box-shadow:none!important;display:flex;align-items:center;justify-content:flex-end}
.brand-logo img{display:block;width:100%;height:auto;max-height:42px;object-fit:contain;mix-blend-mode:multiply}
/* 한 줄로 표기하면서 모바일 폭에도 들어가는 글자 크기 */
#start h1{font-size:clamp(22px,7.3vw,33px);white-space:nowrap;letter-spacing:-.052em;line-height:1.4}
@media(max-width:420px){.brand{gap:8px}.brand-logo{flex-basis:116px;width:116px}.brand-title{font-size:clamp(11px,3.55vw,14px)}}
@media(max-width:355px){.shell{padding-inline:14px}.brand{gap:5px}.brand svg{width:20px;flex-shrink:0}.brand-logo{flex-basis:103px;width:103px}.brand-title{font-size:11.3px}}

/* KORAIL logo: transparent original asset, no JPG fallback or white background */
.brand-logo img{mix-blend-mode:normal!important;object-fit:contain}
.exam-back{display:inline-flex;align-items:center;padding:4px 0;margin:0 0 10px;border:0;background:transparent;color:var(--blue);font-size:15px;font-weight:700}
.exam-back:hover{text-decoration:underline}

/* 2026-10-24 update: white monochrome KORAIL wordmark in a navy header.
   No box, border, backing plate, or opacity on the brand image itself. */
.brand {background:#132a46 !important;color:#ffffff !important;
  border-bottom:1px solid #2a4564 !important;border-radius:0 0 9px 9px;
  padding:0 12px;min-height:78px;gap:8px}
.brand svg {color:#5baeff !important;flex-shrink:0}
.brand-title {color:#ffffff !important;flex:1 1 auto;min-width:0}
.brand-logo,.brand-logo:hover {display:flex;flex:0 0 105px !important;
  width:105px !important;height:34px !important;min-height:0 !important;
  margin:0 !important;padding:0 !important;justify-content:center;
  align-items:center;background:transparent !important;border:0 !important;
  border-radius:0 !important;box-shadow:none !important}
.brand-logo img {width:100% !important;height:auto !important;max-height:28px !important;
  object-fit:contain !important;mix-blend-mode:normal !important;
  background:transparent !important;filter:none !important}
@media(max-width:560px) {
  .brand{min-height:72px;gap:7px;padding:0 10px}
  .brand-logo,.brand-logo:hover {width:97px !important;flex-basis:97px !important;height:32px !important}
  .brand-logo img{max-height:25px !important}
}
@media(max-width:360px) {
  .brand{min-height:66px;gap:5px;padding:0 7px}
  .brand svg{width:20px !important;height:20px !important}
  .brand-title{font-size:clamp(11px,3.4vw,12px) !important;letter-spacing:-.055em}
  .brand-logo,.brand-logo:hover {width:87px !important;flex-basis:87px !important;height:28px !important}
  .brand-logo img{max-height:23px !important}
}

/* 2026-10-24: compact, clear pure-white CI at the same visual scale as header text */
.brand-logo,.brand-logo:hover{flex:0 0 80px !important;width:80px !important;
 height:24px !important;min-height:0 !important}
.brand-logo img{display:block;width:100% !important;height:auto !important;
 max-height:22px !important;opacity:1 !important;filter:none !important;
 mix-blend-mode:normal !important;object-fit:contain !important}
@media(max-width:360px){.brand-logo,.brand-logo:hover{flex-basis:72px !important;
 width:72px !important;height:22px !important}.brand-logo img{max-height:20px !important}}

/* In-page non-blocking confirmation: avoids Android native confirm() Back bugs. */
.back-dialog-open{overflow:hidden}
.back-dialog-overlay{position:fixed;inset:0;z-index:100;background:rgba(12,23,39,.68);display:flex;align-items:center;justify-content:center;padding:18px}
.back-dialog{width:min(420px,100%);background:#fff;color:var(--ink);border-radius:16px;padding:26px 22px;box-shadow:0 16px 45px rgba(8,28,54,.23)}
.back-dialog h2{font-size:23px;line-height:1.4;font-weight:800;margin:0}
.back-dialog p{font-size:16px;line-height:1.6;color:var(--muted);margin:14px 0 24px}
.back-dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.back-dialog-actions .button{min-width:0;font-size:17px;min-height:52px}

/* R8 native confirmation dialog. No artificial history guard is used. */
dialog.back-dialog-overlay{border:0;margin:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;color:var(--ink);overflow:auto}
dialog.back-dialog-overlay::backdrop{background:transparent}
dialog.back-dialog-overlay:not([open]):not([hidden]){display:flex}
#examLoading{padding:45px 15px}