:root{
  --sk-red:#EA002C; --sk-red-dark:#B80022;
  --bg:#FFFFFF; --bg-soft:#F7F8FA; --line:#E5E7EB;
  --text:#1A1A1A; --text-soft:#6B7280;
}
*{box-sizing:border-box} body{margin:0;font-family:Pretendard,system-ui,sans-serif;color:var(--text);background:var(--bg-soft)}
.screen.hidden{display:none}
.primary-btn{background:var(--sk-red);color:#fff;border:0;border-radius:8px;padding:12px 24px;font-size:16px;cursor:pointer}
.primary-btn:hover{background:var(--sk-red-dark)}
.ad-slot{min-height:90px;margin:16px 0;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--text-soft)}
.ad-slot:empty::after{content:"광고 영역 (승인 후 표시)"}

/* 작업영역 레이아웃 */
#runningScreen{min-height:100vh}
/* 자유 창 배치: 패널을 절대 위치로 띄워 한 패널을 옮겨도 다른 패널은 안 움직임.
   기본 위치/크기는 panels.js DEFAULT_LAYOUT에서 적용(아래 px값은 JS 미적용시 폴백). */
.workspace{position:relative;min-height:100vh;padding:16px}
.panel{position:absolute;display:flex;flex-direction:column;
  resize:both;overflow:hidden;min-width:160px;min-height:80px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:10px;background:#fff}
/* 모서리에 크기조절 가능 표시(우하단 빗금). 네이티브 resize 그립 위에 겹쳐 보이게 */
.panel::after{content:"";position:absolute;right:2px;bottom:2px;width:12px;height:12px;
  pointer-events:none;
  background:linear-gradient(135deg,transparent 0 6px,var(--text-soft) 6px 7px,
    transparent 7px 9px,var(--text-soft) 9px 10px,transparent 10px)}
/* 제목줄 드래그 핸들 */
.panel-drag{cursor:move;user-select:none;flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px;font-size:12px;font-weight:700;color:var(--text-soft);
  background:var(--bg-soft);border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.panel-drag:hover{background:#eef0f4;color:var(--text)}
.panel-drag .drag-grip{font-weight:400;font-size:11px;color:var(--text-soft);letter-spacing:.5px}
.panel-body{flex:1;min-height:0;overflow:auto;padding:10px}
/* 패널 조작 안내 배너 */
.panel-hint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:12px;max-width:90vw;
  padding:10px 14px;font-size:13px;color:var(--text);
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.12)}
.panel-hint.hidden{display:none}
.panel-hint b{color:var(--sk-red)}
.panel-hint-close{flex:0 0 auto;cursor:pointer;font-size:12px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:5px 10px}
.panel-omr{width:380px;height:560px}
.panel-timer{width:360px;height:150px}
.panel-scratch{width:360px;height:300px}
.panel-calc{width:360px;height:360px}
/* 메모장/그림판 탭 */
.scratch-tabs{display:flex;gap:4px;padding:8px 8px 0;border-bottom:1px solid var(--line)}
.scratch-tabs .tab{background:transparent;border:1px solid var(--line);border-bottom:none;
  border-radius:6px 6px 0 0;padding:5px 12px;cursor:pointer;font-size:13px;color:var(--text-soft)}
.scratch-tabs .tab.active{color:var(--text);font-weight:700;background:#fff}
.scratch-tabs .tab-clear{margin-left:auto;border:1px solid var(--line);background:#fff;
  border-radius:6px;padding:4px 10px;cursor:pointer;font-size:12px;color:var(--text-soft)}
.scratch-tabs .tab-clear.hidden{display:none}
.scratch-pane{flex:1;min-height:0;overflow:auto;padding:8px}
.scratch-pane.hidden{display:none}
/* 타이머 */
.timer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.timer.is-break{color:var(--text-soft)}
.timer-clock{display:block;font-weight:700;color:var(--sk-red);
  font-size:var(--font-timer-clock,48px);line-height:1.1;margin:2px 0}
.timer-controls{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.ghost-btn{background:transparent;border:1px solid var(--line);border-radius:6px;padding:4px 8px;cursor:pointer;font-size:13px}
.ghost-btn:disabled{opacity:.4;cursor:default}
/* 쉬는시간 안내 */
.break-notice{padding:32px;text-align:center;border:1px dashed var(--line);border-radius:8px}
.break-notice h3{font-size:22px;margin:0 0 8px;color:var(--sk-red)}
.btn-sm{padding:6px 12px;font-size:14px}
/* 시간 설정 모달 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50}
.modal.hidden{display:none}
.modal-box{background:#fff;padding:24px;border-radius:10px;min-width:300px;display:flex;flex-direction:column;gap:14px}
.modal-box h3{margin:0;font-size:18px}
.settings-subhead{margin:6px 0 0;font-size:14px;color:var(--text);border-top:1px solid var(--line);padding-top:12px}
.modal-box label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--text-soft)}
.modal-box input{padding:8px;border:1px solid var(--line);border-radius:6px;font-size:15px}
/* OMR */
.q-row{display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--line)}
.q-row.correct{background:#ECFDF3}.q-row.wrong{background:#FEF2F2}
.q-num{width:28px;color:var(--text-soft)}
/* 정답 선택지 — 정답란 UI 폰트(--font-omr)에 맞춰 함께 커짐(버튼은 폰트 상속 안 하므로 1em 명시) */
.q-opt{width:2em;height:2em;font-size:1em;border:1px solid var(--line);background:#fff;border-radius:50%;cursor:pointer}
.q-opt.selected{background:var(--sk-red);color:#fff;border-color:var(--sk-red)}
.q-verdict{margin-left:8px;font-size:.8em;color:var(--text-soft)}
/* 계산기 (패널 크기에 맞춰 스케일) */
.calc{width:100%}
.calc-display{text-align:right;min-height:34px}
/* 기록 영역: 폰트 기준 3줄 높이 고정 + 하단 정렬 → 기록이 쌓여도 현재줄/결과 위치가 안 바뀜 */
.calc-hist-area{display:flex;flex-direction:column;justify-content:flex-end;
  min-height:calc(var(--font-calc,16px) * .6 * 1.5 * 3)}
.calc-hist{text-align:right;min-height:16px}
.calc-hist:empty{min-height:0}   /* 빈 줄은 접되, 영역 높이는 calc-hist-area가 유지 */
.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.calc-btn{padding:14px 0;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer}
.calc-btn[data-k="="]{background:var(--sk-red);color:#fff;border-color:var(--sk-red)}
/* 그림판 */
#paintCanvas{display:block;border:1px solid var(--line);border-radius:8px;background:#fff;touch-action:none}
.paint-tools{display:flex;gap:10px;align-items:center;margin-bottom:6px;font-size:12px;flex-wrap:wrap}
/* 메모 (탭 패널 안을 채움) */
.memo-area{width:100%;height:100%;min-height:120px;border:1px solid var(--line);border-radius:8px;padding:8px;resize:none;box-sizing:border-box}
/* 결과 */
.weak-table{border-collapse:collapse;width:100%;margin-top:8px}
.weak-table th,.weak-table td{border:1px solid var(--line);padding:6px 10px;text-align:center}
.weak-table tr.weakest{background:#FEF2F2;font-weight:700}

/* 현재 문항 강조 + OMR 헤더 */
.q-row.current{outline:2px solid var(--sk-red);outline-offset:-2px;background:#FFF1F2}
.omr-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px;gap:8px}
/* 정답 입력 화면 */
#introScreen,#answersScreen,#resultsScreen{padding:24px}
.answer-form{margin:10px 0;display:flex;flex-direction:column;gap:6px;max-width:560px}
.answer-groups{display:flex;gap:8px;flex-wrap:wrap}
.answer-input{padding:8px;border:1px solid var(--line);border-radius:6px;font-size:15px;
  width:6.5em;text-align:center;letter-spacing:2px}
.muted{color:var(--text-soft);font-size:12px}
/* 결과 → 엑셀 내보내기 */
.export-box{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:8px;max-width:560px}
.export-box label{display:block;font-size:14px;margin-bottom:10px}
.round-input{display:block;width:100%;margin-top:4px;padding:8px;border:1px solid var(--line);border-radius:6px;font-size:14px;box-sizing:border-box}
.export-btns{display:flex;gap:8px;flex-wrap:wrap}
.export-hint{margin:10px 0 0}

/* intro 랜딩 레이아웃 */
#introScreen{max-width:860px;margin:0 auto}
#introScreen h1{font-size:32px;margin:8px 0}
.lead{color:var(--text-soft);font-size:17px;margin:0 0 16px}
/* 콘텐츠 본문 */
.content{margin-top:32px;line-height:1.7;color:var(--text)}
.content h2{font-size:22px;margin:28px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--sk-red);display:inline-block}
.content h3{font-size:16px;margin:16px 0 4px}
.content p{margin:8px 0}
.content ul,.content ol{margin:8px 0;padding-left:22px}
.content li{margin:6px 0}
.content a{color:var(--sk-red);text-decoration:none}
.content a:hover{text-decoration:underline}
/* 화면 예시(스크린샷) — 도구 화면은 1열로 크게, 나머지는 작은 그리드. 반응형 */
.screenshots{display:flex;flex-direction:column;gap:20px;margin:12px 0}
.screenshots-small{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:14px 0}
/* 엑셀 통계·상세를 한 행에 크게(좁아지면 1열로) */
.screenshots-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:14px 0}
/* 채점결과는 따로, 과하게 커지지 않게 폭 제한 */
.screenshots-solo .shot{max-width:400px}
/* 아코디언(접이식 소제목) — 소제목만 쭉 나열, 클릭하면 펼침/접힘 */
.accordion{margin-top:24px}
.acc{border-top:1px solid var(--line)}
.acc:last-of-type{border-bottom:1px solid var(--line)}
.acc>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
  padding:14px 2px;font-size:20px;font-weight:700;color:var(--text)}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::before{content:"▸";color:var(--sk-red);font-size:24px;line-height:1;flex:0 0 auto}
.acc[open]>summary::before{content:"▾"}
.acc>summary:hover{color:var(--sk-red)}
.acc[open]{padding-bottom:14px}
.shot{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.07)}
.shot a{display:block}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:10px 14px;font-size:14px;color:var(--text-soft);border-top:1px solid var(--line)}
.shot--missing img{display:none}
.shot--missing::before{content:"스크린샷 준비 중";display:block;padding:32px 12px;text-align:center;color:var(--text-soft);font-size:13px;background:var(--bg-soft)}
/* 사이트 푸터 */
.site-footer{margin-top:48px;padding:24px 0;border-top:1px solid var(--line);text-align:center}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-bottom:10px}
.footer-links a{color:var(--text-soft);text-decoration:none;font-size:14px}
.footer-links a:hover{color:var(--sk-red)}
.footer-copy{color:var(--text-soft);font-size:12px;margin:0}
/* 문서(정책/가이드) 페이지 */
.doc-page{max-width:760px;margin:0 auto;padding:24px}
.doc-nav{padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:8px}
.doc-nav a{color:var(--sk-red);text-decoration:none;font-weight:700}
.doc-page h1{font-size:26px;margin:16px 0 4px}
.doc-updated{color:var(--text-soft);font-size:13px;margin:0 0 16px}

/* 폰트 크기 변수(설정에서 #runningScreen에 주입, innerHTML 재렌더에도 유지) */
#omrBody{font-size:var(--font-omr,15px)}
.timer-area-name{font-size:var(--font-timer-ui,14px)}
.timer-controls .ghost-btn{font-size:var(--font-timer-ui,14px)}
.calc-display{font-size:var(--font-calc,16px)}
.calc-btn{font-size:var(--font-calc,16px)}
.calc-hist{font-size:calc(var(--font-calc,16px) * .6);color:rgba(0,0,0,.5)}
.memo-area{font-size:var(--font-memo,14px)}

/* OMR 스크롤 영역 — #omrGrid가 실제 스크롤 컨테이너(헤더는 omr-head로 고정).
   position:relative로 q-row의 offsetTop이 #omrGrid 기준이 되게 함(auto 스크롤 계산용). */
#omrBody{display:flex;flex-direction:column;overflow:hidden}
.omr-head{flex:0 0 auto}
#omrGrid{flex:1;min-height:0;overflow:auto;position:relative}
.q-opt:disabled{opacity:.4;cursor:default}
.omr-spacer{flex:0 0 auto}   /* auto 스크롤용 위/아래 여백(현재 문항을 고정 위치로) */
/* OMR 다음/스킵 버튼 — 붉은색 계열 + Bold */
/* 글자는 읽기 좋은 고정 크기, 버튼은 컴팩트하게(정답란 폰트와 분리 — 폰트 키워도 버튼은 안 커짐) */
.omr-btn{font-weight:700;border-radius:5px;padding:2px 7px;cursor:pointer;font-size:13px;line-height:1.3;white-space:nowrap;
  border:1px solid var(--sk-red);background:#fff;color:var(--sk-red)}
.omr-next{background:var(--sk-red);color:#fff}
.q-row .omr-next{margin-left:auto}
.q-row .omr-btn{margin-left:4px}
.omr-skip-row{padding:4px 0 8px 34px}
.omr-focus-grip{margin-left:6px;cursor:ns-resize;color:var(--sk-red);user-select:none;font-weight:700}
.omr-head.sticky{position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid var(--line)}

.tool-topbar{position:sticky;top:0;z-index:40;display:flex;gap:8px;
  padding:8px 16px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.settings-popup{position:fixed;left:80px;top:80px;z-index:60;width:340px;max-height:80vh;
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.18)}
.settings-popup.hidden{display:none}
.settings-drag{cursor:move;user-select:none;display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;font-weight:700;background:var(--bg-soft);border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.settings-close{border:0;background:transparent;font-size:15px;cursor:pointer;color:var(--text-soft)}
.settings-body{overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.settings-body label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--text-soft)}
.settings-body label.radio{flex-direction:row;align-items:flex-start;gap:6px;font-size:13px}
.settings-body input[type=number]{padding:8px;border:1px solid var(--line);border-radius:6px;font-size:15px}
.settings-group{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:0}
.settings-group legend{font-size:13px;color:var(--text);font-weight:700;padding:0 4px}
.font-val{color:var(--sk-red);font-weight:700;font-size:12px}