/* ============================================================================
   서경석의 다이어트 한국사능력검정시험 - 한국사 레벨테스트
   스타일시트 (css/style.css)

   - 이 파일은 기획 프로토타입(260826-한국사 레벨테스트-시안.html)의 <style>을
     그대로 옮긴 것입니다. 디자인은 프로토타입을 유지합니다.
   - 폰트: 웹폰트를 쓰지 않고 각 OS의 기본 고딕(맑은고딕 계열)으로 표시합니다.
     Windows=맑은 고딕, macOS/iOS=Apple SD Gothic Neo, Android=Roboto/Noto.
     별도 폰트 파일 업로드가 필요 없습니다.
   - 맨 아래 '학습 추천 표지 배너' 블록만 새로 추가했습니다(도서 표지가
     세로로 길어, 표지+설명을 좌우로 배치하는 레이아웃).
   ============================================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

/* [추가] 클릭 전용 요소는 텍스트 선택 방지.
   연타할 때 O/X·모름·버튼 글자가 드래그 선택된 것처럼 파랗게 칠해지는 것을 막음.
   (문제 문장/해설 등 '읽는' 텍스트는 선택 가능하도록 여기 포함하지 않음) */
.ox,.dk,.nav,.cta,.mbtn,.rbtns button,.lb2,.freelec,.tog button,.oxl,.oxs,.qlabel{
	-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
	-webkit-tap-highlight-color:transparent;
}
/* 시스템 폰트 스택: 운영체제별 기본 고딕을 순서대로 사용
   - Apple SD Gothic Neo : macOS / iOS 기본 한글 고딕
   - Malgun Gothic       : Windows 기본 한글 고딕(맑은 고딕)
   - Roboto              : Android 기본
   - 'Noto Sans KR'      : Android 등에 시스템 설치돼 있으면 사용(웹폰트 아님)
   - -apple-system 등     : 각 OS UI 기본 산세리프 폴백 */
body{-webkit-tap-highlight-color:rgba(37,99,235,.12);
     font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',Roboto,'Noto Sans KR','Segoe UI',sans-serif;
     background:#fff;color:#1a1a1a;-webkit-font-smoothing:antialiased}
.wrap{max-width:560px;margin:0 auto;background:#fff;position:relative}
.scr{display:none;padding:24px 20px 40px}
.scr.on{display:block}

/* ===== 1. 상단 로고 바 (스크롤해도 고정) ===== */
.topbar{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #eef2f7}
.tin{max-width:560px;margin:0 auto;height:52px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-size:14px;font-weight:800;letter-spacing:-.6px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.brand .b1{color:#1a1a1a}
.brand .b2{color:#2563eb}
.dlogo{height:22px;width:auto;display:block}
.dlogo-ph{height:22px;display:flex;align-items:center;padding:0 10px;border:1px dashed #b9c6da;border-radius:5px;background:#eff6ff;color:#2563eb;font-size:10.5px;font-weight:800;white-space:nowrap}

/* ===== 이미지 자리 ===== */
.slotimg{display:block;width:100%;height:auto;border-radius:10px}
.ph{position:relative;border:2px dashed #b9c6da;border-radius:12px;background:linear-gradient(180deg,#dbeafe,#eff6ff);display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 14px 14px;overflow:hidden}
.phs{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:#2563eb;color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:4px 12px;letter-spacing:.3px;z-index:2}
.phin{width:100%}
.phin h2{font-size:30px;font-weight:900;line-height:1.25;letter-spacing:-1px}
.bubble{display:inline-block;background:#2563eb;color:#fff;font-size:12px;font-weight:700;border-radius:12px;padding:8px 14px;margin-top:16px;line-height:1.5}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.badge{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:14px 4px;text-align:center;font-size:13px;font-weight:700}
.badge b{display:block;font-size:20px;margin-bottom:4px}
.phin.pb2{text-align:left;padding:0 6px}
.phin.pb2 b{display:block;font-size:15px;font-weight:800;color:#1a1a1a;line-height:1.4;margin-bottom:6px}
.phin.pb2 span{font-size:12.5px;color:#5b6b80}
.phin.lv{text-align:center}
.phin.lv .lvtag{display:inline-block;background:#fbbf24;color:#5b3600;font-size:13px;font-weight:900;border-radius:999px;padding:6px 14px;margin-bottom:10px}
.phin.lv b{display:block;font-size:18px;font-weight:900;color:#12325f;margin-bottom:8px}
.phin.lv .lvd{display:block;font-size:12.5px;color:#41556f;line-height:1.65}

/* ===== 첫 화면 ===== */
.disc{font-size:11.5px;color:#9aa7b5;text-align:center;line-height:1.7;margin-top:12px}
.cta{display:block;width:100%;margin-top:18px;background:#2563eb;color:#fff;border:0;border-radius:10px;padding:16px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit}
.cta:active{opacity:.85}

/* ===== 이름 작성 화면 ===== */
.namebox{border:1px solid #e5eaf0;border-radius:14px;padding:32px 20px;margin-top:8px}
.ntitle{font-size:20px;font-weight:800;text-align:center;line-height:1.45}
.ndesc{font-size:12.5px;color:#94a3b8;text-align:center;line-height:1.7;margin-top:10px}
.ninput{display:block;width:100%;margin-top:22px;border:1px solid #cbd5e1;border-radius:9px;padding:15px 14px;font-size:16px;font-family:inherit;color:#1a1a1a;background:#fff}
.ninput:focus{outline:0;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.ninput.err{border-color:#dc2626}
.nerr{font-size:12.5px;color:#dc2626;min-height:18px;line-height:1.5;margin-top:8px}
.namebox .cta{margin-top:6px}

/* ===== 문제 화면 ===== */
.qtop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.qnum{font-size:14px;font-weight:700;color:#334155}
.timer{font-size:14px;color:#475569;font-weight:600;white-space:nowrap}
.timer.warn{color:#dc2626}
.pbwrap{margin-bottom:18px}
.pb{height:6px;background:#e8edf3;border-radius:3px;position:relative}
.pbf{position:absolute;left:0;top:0;height:6px;background:#2563eb;border-radius:3px;transition:width .25s}
.pbd{position:absolute;top:-3px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#2563eb;transition:left .25s}

.qrow{display:flex;align-items:center;gap:8px}
.navcol{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;position:relative;padding-top:18px}
.navlabel{position:absolute;top:0;right:0;font-size:11px;font-weight:700;color:#2563eb;white-space:nowrap;line-height:1.2;height:13px}
.nav{width:30px;height:30px;flex:0 0 30px;border:1px solid #cbd5e1;background:#fff;border-radius:6px;color:#2563eb;font-size:13px;cursor:pointer;font-family:inherit}
.nav:disabled{opacity:.25;cursor:default}
.nav.submit{background:#2563eb;border-color:#2563eb;color:#fff;font-weight:700}
.card{flex:1;min-width:0;background:#fff;border:1px solid #e5eaf0;border-radius:14px;padding:22px 16px;min-height:400px;display:flex;flex-direction:column}
.qlabel{font-size:13px;color:#64748b;text-align:center;margin-bottom:14px;line-height:1.5}
.qtext{font-size:16px;font-weight:700;line-height:1.6;text-align:center;margin-bottom:18px;white-space:pre-line}

/* O·X 버튼: 세로 132px 로 크게 잡아 4지선다 화면과 높이를 맞춥니다 */
.oxgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ox{height:132px;border:1px solid #dbe2ea;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;background:#fff;transition:.12s}
.ox:hover{border-color:#93b4e8}
.oxs{font-size:44px;font-weight:300;color:#94a3b8;line-height:1}
.oxl{font-size:13.5px;color:#64748b}
.ox.sel{background:#eff5ff;border-color:#2563eb}
.ox.sel .oxs,.ox.sel .oxl{color:#2563eb;font-weight:600}
/* 모름 버튼: 얇게 52px */
.dk{height:52px;margin-top:12px;border:1px solid #dbe2ea;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-size:14.5px;color:#1a1a1a;cursor:pointer;transition:.12s;font-family:inherit}
.dk:hover{border-color:#93b4e8}
.dk.sel{background:#eff5ff;border-color:#2563eb;color:#1d4ed8;font-weight:600}
.ck{width:17px;height:17px;flex:0 0 17px;border-radius:4px;border:1px solid #cbd5e1;position:relative}
.dk.sel .ck{background:#2563eb;border-color:#2563eb}
.dk.sel .ck:after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
@keyframes wsh{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.warn{font-size:12.5px;color:#dc2626;text-align:center;margin-top:10px;min-height:16px;line-height:1.5}

/* ===== 안내창 / 영상 ===== */
.mask{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:40;align-items:center;justify-content:center;padding:24px}
.mask.on{display:flex}
.modal{background:#fff;border-radius:14px;padding:28px 22px;max-width:320px;width:100%;text-align:center;position:relative}
.modal h3{font-size:18px;font-weight:800;line-height:1.5;margin-bottom:18px}
.modal h3 b{color:#2563eb}
.modal .art{font-size:46px;margin-bottom:18px}
.mbtn{width:100%;background:#2563eb;color:#fff;border:0;border-radius:8px;padding:14px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
/* 무료 강의: 새 창이 아니라 화면 안에서 바로 재생됩니다 */
.vbox{margin-top:10px}
.vwrap{background:#000;border-radius:12px;overflow:hidden;width:100%;position:relative;padding-top:56.25%}
.vwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vfall{color:#94a3b8;font-size:12px;margin-top:8px;text-align:center}
.vfall a{color:#2563eb}

/* ===== 결과 화면 =====
   구역과 구역 사이 26px / 한 묶음 안은 10px, 두 가지만 씁니다. */
.rname{text-align:center;font-size:13.5px;color:#94a3b8;margin-bottom:10px}
.rgrade{text-align:center;font-size:24px;font-weight:900;line-height:1.4;letter-spacing:-.5px;margin-bottom:10px}
.rcountwrap{text-align:center;margin-bottom:26px}
.rcount{display:inline-block;font-size:13.5px;color:#94a3b8}
.rcount b{color:#94a3b8;font-weight:600}
.rgrade b{color:#2563eb;font-weight:900}
.rbox{background:#fff;border:1px solid #e8edf3;border-radius:10px;padding:18px 16px;text-align:left;font-size:14px;line-height:1.85;color:#41505f;margin-bottom:26px}
.eras{display:flex;gap:6px;margin-bottom:10px}
.era{text-align:center}
.era .et{font-size:11.5px;font-weight:700;color:#fff;border-radius:6px 6px 0 0;padding:6px 2px}
.era .en{display:flex;border:1px solid #e5eaf0;border-top:0}
.era .en div{flex:1;font-size:11px;padding:5px 0;border-right:1px solid #eef2f7;color:#64748b}
.era .en div:last-child{border-right:0}
.era .ea{display:flex;border:1px solid #e5eaf0;border-top:0;border-radius:0 0 6px 6px}
.era .ea div{flex:1;font-size:12px;font-weight:800;padding:6px 0;border-right:1px solid #eef2f7}
.era .ea div:last-child{border-right:0}
.o{color:#2563eb}.x{color:#dc2626}
.legend{font-size:11.5px;color:#94a3b8;text-align:center;margin-bottom:26px}
.rbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rbtns button{padding:14px;border-radius:8px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit}
.retry{border:1px solid #2563eb;background:#fff;color:#2563eb}
.see{border:0;background:#2563eb;color:#fff}

.rec{margin-top:26px;padding-top:26px;border-top:1px solid #e8edf3}
.rec h4{font-size:15px;font-weight:800;margin-bottom:10px}
.pkgs{display:grid;grid-template-columns:1fr;gap:10px}
.pkgb{display:block;text-decoration:none;color:inherit}
.livewrap{margin-top:26px}
.lb2{display:block;width:100%;margin-top:10px;background:#2563eb;border:0;color:#fff;border-radius:9px;padding:15px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit}
.lb2:active{opacity:.85}
.vidsec{margin-top:26px}
.freelec{display:block;width:100%;margin:0 0 10px;background:#fff;border:1px solid #2563eb;color:#2563eb;border-radius:8px;padding:13px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.freelec:last-child{margin-bottom:0}
.freelec:active{background:#eff5ff}

/* ===== 해설 화면 ===== */
.exhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px}
.exhead h4{font-size:16px;font-weight:800}
.tog{display:flex;border:1px solid #2563eb;border-radius:20px;overflow:hidden;flex:0 0 auto}
.tog button{border:0;background:#fff;color:#2563eb;font-size:12.5px;padding:7px 14px;cursor:pointer;font-family:inherit;font-weight:600}
.tog button.on{background:#2563eb;color:#fff}
.ex{border-bottom:1px solid #eef2f7;padding:18px 0}
.ex .eq{font-size:14px;font-weight:700;line-height:1.6;margin-bottom:10px;white-space:pre-line}
.ex .eo{font-size:13px;color:#64748b;line-height:1.9}
.ex .eo .cor{color:#2563eb;font-weight:700}
.ex .pick{font-size:12.5px;margin-top:10px;color:#475569}
.ex .pick b{color:#2563eb}
.ex .exp{background:#f7f9fc;border-radius:8px;padding:12px;font-size:12.5px;color:#475569;line-height:1.8;margin-top:10px;white-space:pre-line}
.tag{display:inline-block;font-size:11px;font-weight:700;border-radius:4px;padding:2px 7px;margin-right:6px;vertical-align:2px}
.tag.ok{background:#eff5ff;color:#2563eb}
.tag.no{background:#fef2f2;color:#dc2626}
.exvid{margin-top:22px}

/* ===== PC (가로 900px 이상): 글자와 버튼도 함께 커집니다 ===== */
@media (min-width:900px){
 .wrap{max-width:848px}
 .tin{max-width:848px;height:60px;padding:0 24px}
 .brand{font-size:18px}
 .scr{padding:34px 24px 64px}
 .cta{padding:20px;font-size:19px;border-radius:12px}
 .disc{font-size:13px;margin-top:16px}
 .ntitle{font-size:26px}
 .ndesc{font-size:14px}
 .ninput{padding:18px 16px;font-size:17px}
 .nerr{font-size:14px}
 .qnum{font-size:17px}
 .timer{font-size:17px}
 .pbwrap{margin-bottom:24px}
 .qrow{gap:16px}
 .nav{width:40px;height:40px;flex:0 0 40px;font-size:16px}
 .navcol{padding-top:21px}
 .navlabel{font-size:13px;height:16px}
 .card{padding:36px 32px;min-height:470px}
 .qlabel{font-size:15px}
 .qtext{font-size:20px;margin-bottom:28px}
 .ox{height:170px}
 .oxs{font-size:56px}
 .oxl{font-size:15px}
 .dk{height:58px;font-size:16px}
 .warn{font-size:14px}
 .rname{font-size:15px}
 .rgrade{font-size:30px}
 .rcount{font-size:15px}
 .rbox{font-size:15.5px;padding:22px 20px}
 .era .et{font-size:13px}
 .era .en div{font-size:12.5px}
 .era .ea div{font-size:14px}
 .rbtns button{padding:16px;font-size:16px}
 .rec h4{font-size:18px}
 .freelec,.lb2{font-size:16px;padding:16px}
 .modal{max-width:400px;padding:34px 28px}
 .modal h3{font-size:21px}
 .phs{font-size:14px;padding:6px 16px}
 .phin.lv b{font-size:24px}
 .phin.lv .lvtag{font-size:15px;padding:8px 18px}
 .phin.lv .lvd{font-size:14.5px}
 .phin.pb2 b{font-size:20px}
 .phin.pb2 span{font-size:14px}
}
@media (max-width:400px){
 .tin{padding:0 14px}
 .brand{font-size:11.5px;letter-spacing:-.7px}
 .scr{padding:20px 12px 36px}
 .card{padding:18px 10px;min-height:360px}
 .qrow{gap:5px}
 .nav{width:26px;height:26px;flex:0 0 26px}
 .navcol{padding-top:16px}
 .navlabel{font-size:10px}
 .ox{height:112px}
 .oxs{font-size:38px}
 .qtext{font-size:15px}
 .phin h2{font-size:26px}
 .badges{gap:5px}
 .badge{font-size:12px;padding:12px 2px}
 .badge b{font-size:17px}
 .phin.lv b{font-size:16px}
 .phin.lv .lvtag{font-size:11.5px;padding:5px 11px;margin-bottom:8px}
 .phin.lv .lvd{font-size:11px;line-height:1.55}
 .rgrade{font-size:21px}
 .rcount{font-size:12.5px}
 .era .et{font-size:10.5px}
 .era .en div{font-size:10px}
 .era .ea div{font-size:11px}
 .modal{padding:24px 16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================================
   [추가] 학습 추천 표지 배너
   도서 표지가 세로로 긴 이미지라, 기획서의 가로 배너 자리에 그대로 넣으면
   찌그러집니다. 대신 왼쪽에 표지(고정폭), 오른쪽에 도서명+설명을 두는
   좌우 배치로 만들어 표지 비율을 살립니다. 폭은 내용 영역에 꽉 차고,
   높이는 표지에 맞춰 자연스럽게 결정됩니다.
   ============================================================================ */
.pkgcard{display:flex;gap:14px;align-items:stretch;border:1px solid #e5eaf0;border-radius:12px;padding:12px;background:#fff}
.pkgcard .cover{flex:0 0 92px;width:92px;border-radius:8px;overflow:hidden;background:#f1f5f9;align-self:center}
.pkgcard .cover img{display:block;width:100%;height:auto}
.pkgcard .pinfo{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.pkgcard .pinfo b{font-size:15px;font-weight:800;color:#1a1a1a;line-height:1.4;margin-bottom:6px}
.pkgcard .pinfo span{font-size:12.5px;color:#5b6b80;line-height:1.6}
@media (min-width:900px){
 .pkgcard{gap:18px;padding:16px}
 .pkgcard .cover{flex:0 0 120px;width:120px}
 .pkgcard .pinfo b{font-size:18px}
 .pkgcard .pinfo span{font-size:14px}
}
@media (max-width:400px){
 .pkgcard .cover{flex:0 0 76px;width:76px}
 .pkgcard .pinfo b{font-size:13.5px}
 .pkgcard .pinfo span{font-size:11.5px}
}