:root {
--primary: #2f6fed;
--primary-dark: #1f4fc4;
--danger: #e5484d;
--success: #12b76a;
--bg: #f4f6fb;
--card-bg: #ffffff;
--text: #1c2333;
--text-sub: #6b7280;
--border: #e5e8ef;
--radius: 14px;
}
* { box-sizing: border-box; }
/* overflow-x: hidden 대신 clip을 쓴다 - hidden은 overflow-y를 명시 안 하면 브라우저가 자동으로
overflow-y:auto로 강제 계산해서 html/body가 스크롤 컨테이너가 돼버리고, 그 안의 모든
position:sticky 요소(시험 풀이 화면의 답안지/진행률 게이지 등)가 완전히 먹통이 된다
(2026-08-17 확인 - 정보처리기사 "전체 풀기 모드"에서 스크롤하면 왼쪽 답안지/상단 게이지가
전혀 안 붙어있고 페이지랑 같이 그냥 스크롤되는 버그로 발견됨). clip은 이 부작용 없이
가로 스크롤만 막는다. */
html { overflow-x: clip; }
body {
margin: 0;
overflow-x: clip;
font-family: "Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
}
.container { max-width: 960px; margin: 0 auto; padding: 20px 16px 60px; }
.site-header {
background: linear-gradient(135deg, var(--primary), #6c8cff);
color: #fff; padding: 36px 16px; text-align: center;
}
.site-header .inner { max-width: 960px; margin: 0 auto; }
.logo { margin: 0 0 6px; font-size: 26px; }
.tagline { margin: 0; opacity: .92; font-size: 14px; }
/* 메인 첫화면 슬로건 - 이 사이트의 차별점(무가입·무구독·기출 아님)을 한 줄로 보여준다 */
.site-slogan { margin: 8px 0 0; font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.site-welcome { margin: 6px 0 0; opacity: .88; font-size: 13.5px; }
@media (max-width: 520px) {
.site-header { padding: 24px 16px; }
.site-slogan { font-size: 14.5px; }
.site-welcome { display: none; }
}
.badge-offline {
display: inline-block; margin-top: 10px; background: rgba(255,255,255,.18);
padding: 4px 12px; border-radius: 999px; font-size: 12px;
}
.visit-stats-bar {
margin-top: 12px; display: flex; justify-content: center; gap: 8px;
font-size: 12.5px; opacity: .92;
}
.visit-stats-bar .divider { opacity: .6; }
.visit-stats-bar b { font-weight: 800; }
.subscriber-toggle {
display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
background: rgba(255,255,255,.15); padding: 6px 12px; border-radius: 999px;
cursor: pointer; user-select: none; border: 1px solid rgba(255,255,255,.3);
}
.subscriber-toggle input { cursor: pointer; }
.site-footer { text-align: center; color: var(--text-sub); font-size: 12px; padding: 24px 16px 40px; }
.site-footer .footer-tagline { font-size: 13px; color: var(--text); font-weight: 600; margin: 0 0 6px; }
/* 시험종목 전용 페이지(회차/모드 선택) 헤더 */
.exam-home-header { padding: 30px 16px 34px; }
.exam-home-title-row { display: flex; align-items: center; gap: 16px; text-align: left; }
.exam-home-icon { font-size: 40px; flex-shrink: 0; }
.exam-home-title-row .tagline { opacity: .92; font-size: 13.5px; }
/* 결과화면 - 문제 리뷰 사이사이 인라인 광고 배너.
⚠️ 상하 여백을 줄이지 말 것 - 이 배너는 해설 항목 '안에' 삽입되고 같은 항목에 이의제기 버튼
(.dispute-btn)이 있어서, 여백이 좁으면 광고 오클릭을 유발한다(애드센스 정책 위반 → 계정 정지 위험).
예전엔 4px이었는데 클릭 요소와 너무 붙어 있어 24px로 늘렸다. */
/* 인라인 광고 배너 - 오클릭 방지가 이 규칙들의 존재 이유다(애드센스 정책).
1) 점선 테두리 + 별도 배경으로 본문 카드(.explain-item, 실선 테두리)와 확실히 구분한다.
2) 여백: 이 margin 24px에 더해 부모 .explain-list의 gap 14px이 붙어 실제 간격은 위아래 38px이다.
결과화면에서 광고 바로 아래에 오는 다음 문항 카드의 '이의제기' 버튼과는 카드 padding 16px까지
더해져 약 54px 떨어진다. 이 값을 줄이면 오클릭 위험이 생기므로 함부로 낮추지 말 것. */
.inline-ad-banner {
background: linear-gradient(135deg,#eef4ff,#f6f8fb); border: 1px dashed var(--border);
border-radius: 12px; padding: 18px 16px; text-align: center; margin: 24px 0;
overflow: hidden; /* 애드센스가 큰 사이즈로 렌더링해도 카드 밖으로 삐져나가지 않게 막는다(2026-08-19) */
}
/* 메인(첫화면) 광고 슬롯 규칙 - 현재 index.html에는 슬롯을 두지 않았지만, 나중에 다시 넣을 때
여백 없이 붙는 일이 없도록 규칙은 남겨둔다(:empty일 땐 빈 공간이 안 생기게 0). */
#mainAdTop, #mainAdBottom { margin: 24px 0; }
#mainAdTop:empty, #mainAdBottom:empty { margin: 0; }
.inline-ad-banner .ad-tag {
display: inline-block; font-size: 10.5px; font-weight: 800; color: #fff;
background: #9aa3b2; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; letter-spacing: .5px;
}
.inline-ad-banner .ad-body { font-size: 13px; color: var(--text-sub); width: 100%; overflow: hidden; }
/* 결과화면 띠형 인라인(2026-09-13 대표 피드백) - 고정 띠 크기에 맞춘 컴팩트 카드 */
.inline-ad-banner.inline-ad-strip { padding: 10px 12px 12px; margin: 16px 0; }
/* 카드 사이 띠 이중 제한(2026-09-14 긴급수정) - ins 인라인 스타일(90/100px)이 무시되는 경우를
대비해 .ad-body에도 CSS max-height를 따로 건다(top-card-strip/result-strip-ad와 동일 원칙). */
.inline-ad-banner.inline-ad-strip .ad-body { max-height: 110px; overflow: hidden; }
/* 광고 노출 쿨다운 초과 시 - 실제 광고 슬롯처럼 보이지 않도록(오클릭 유도 방지) 톤을 낮춤 */
.inline-ad-banner.ad-cooldown-notice { background: var(--bg); border-style: solid; }
.inline-ad-banner .ad-tag-notice { background: #b7bec9; }
/* ---------- 교시 구분 배너 (전체 풀기 화면에서 교시가 2개 이상일 때만 표시) ---------- */
.session-break-banner {
display: flex; align-items: center; gap: 12px;
background: linear-gradient(135deg,#fff7ed,#fffaf0); border: 1.5px dashed #f5c98a;
border-radius: 12px; padding: 16px; margin: 20px 0; font-size: 13.5px; color: #7a5c1e;
}
.session-break-banner .session-break-icon { font-size: 22px; }
.session-start-banner {
text-align: center; font-weight: 800; font-size: 14px; color: var(--primary);
background: #eef4ff; border-radius: 999px; padding: 8px 16px; margin: 16px 0; display: inline-block;
}
.card {
background: var(--card-bg); border-radius: var(--radius); padding: 22px 20px;
margin-top: 18px; box-shadow: 0 2px 10px rgba(20,30,60,.05); border: 1px solid var(--border);
}
.card h2 { font-size: 18px; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.step { font-size: 11px; background: var(--primary); color: #fff; padding: 3px 8px; border-radius: 20px; font-weight: 700; }
.sub-title { font-size: 15px; margin: 4px 0 10px; color: var(--text-sub); }
.info-card { background: #eef4ff; border-color: #d7e4ff; }
/* ---------- 오늘의 20문제 ---------- */
.daily-entry-card {
background: linear-gradient(135deg, #fff7ed, #ffedd5); border-color: #fed7aa;
}
.daily-entry-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.daily-entry-row h3 { margin: 0 0 4px; font-size: 15.5px; }
.daily-entry-desc { margin: 0; font-size: 12.5px; color: var(--text-sub); }
/* 카톡 1:1 도전장 - 도전 링크로 들어왔을 때 문제 목록 위에 뜨는 배너 */
.challenge-banner {
background: linear-gradient(135deg, #fef3c7, #fde68a); border: 1.5px solid #f59e0b; border-radius: 12px;
padding: 14px 16px; margin-bottom: 14px; font-size: 14px; color: #78350f; text-align: center;
}
.challenge-result-card { text-align: center; padding: 24px 20px; margin-top: 16px; }
.challenge-vs-row { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 16px 0; flex-wrap: wrap; }
.challenge-side { min-width: 110px; }
.challenge-side .name { font-size: 13px; color: var(--text-sub); margin-bottom: 4px; }
.challenge-side .score { font-size: 30px; font-weight: 800; }
.challenge-side.win .score { color: var(--success); }
.challenge-side.lose .score { color: var(--text-sub); }
.challenge-vs-divider { font-size: 13px; font-weight: 800; color: var(--text-sub); }
.challenge-verdict { font-size: 16px; font-weight: 800; margin-top: 6px; }
.daily-q-card {
border: 1.5px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 14px;
}
.daily-q-card .q-no-badge {
display: inline-block; font-size: 12px; font-weight: 800; color: #fff; background: #f97316;
padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
}
.daily-q-card .q-text { font-size: 14.5px; font-weight: 400; margin: 0 0 12px; line-height: 1.55; }
.daily-reveal-card { text-align: center; padding: 32px 20px; }
.daily-reveal-score { font-size: 42px; font-weight: 800; color: var(--primary); }
.daily-reveal-sub { font-size: 13.5px; color: var(--text-sub); margin: 4px 0 20px; }
.daily-reveal-stats { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
.daily-reveal-stats .stat-item { text-align: center; }
.daily-reveal-stats .label { display: block; font-size: 12px; color: var(--text-sub); margin-bottom: 4px; }
.daily-reveal-stats .value { display: block; font-size: 20px; font-weight: 800; color: var(--text); }
.daily-leaderboard-me td { background: #eef4ff; font-weight: 700; }
/* ============================================================
시험종목 대분류(시행기관) 카드 그리드 - 아코디언 스타일
============================================================ */
.exam-card-grid { display: flex; flex-direction: column; gap: 14px; }
.org-group {
background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 16px;
overflow: hidden;
}
.org-group-header {
padding: 16px 20px; cursor: pointer; user-select: none; transition: .12s;
}
.org-group-header:hover { background: #f8fafd; }
.org-group-title { display: flex; align-items: center; gap: 10px; }
.org-icon { font-size: 20px; flex-shrink: 0; }
.org-arrow { font-size: 13px; color: var(--primary); transition: transform .18s; flex-shrink: 0; }
.org-arrow.collapsed { transform: rotate(-90deg); }
.org-nm { font-size: 15.5px; font-weight: 800; color: var(--text); }
.org-count {
margin-left: auto; font-size: 12px; font-weight: 700; color: var(--primary);
background: #eef4ff; padding: 3px 10px; border-radius: 999px;
}
.org-desc { font-size: 12.5px; color: var(--text-sub); margin: 6px 0 0 30px; }
.org-group-body { padding: 4px 20px 18px; display: flex; flex-direction: column; gap: 14px; }
/* 대분류 안에 담기는 계열(소분류) 서브그룹 */
.category-group { padding-left: 4px; }
.category-title {
display: flex; align-items: center; gap: 8px; margin: 6px 0 10px;
font-size: 13px; font-weight: 700; color: var(--text-sub);
}
.category-icon { font-size: 15px; }
.category-body {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.exam-card {
background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 14px;
padding: 16px; cursor: pointer; text-align: left; transition: .15s; position: relative;
}
.exam-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.exam-card.active { border-color: var(--primary); background: #eef4ff; }
.exam-card .exam-icon { font-size: 24px; margin-top: 22px; margin-bottom: 8px; }
/* 위 margin-top: 즐겨찾기 별표(좌상단 절대배치, top:6px~약32px)와 아이콘이 카드 좌상단에서
겹쳐 보여 구분이 잘 안 간다는 지적(2026-08-19, 모바일에서 발견)에 따라 아이콘을 별표 아래로
내려서 간격을 확보함. */
.exam-card .exam-name { font-size: 15px; font-weight: 800; margin-bottom: 6px; color: var(--text); }
.exam-card .exam-desc { font-size: 12px; color: var(--text-sub); line-height: 1.5; }
/* 종목 카드 즐겨찾기 별표 - 카드 좌상단(우상단은 "오픈 예정" 배지 자리라 겹침). 클릭해도 카드 자체
이동 핸들러로 안 번지게 stopPropagation 처리(app.js) */
.exam-card-favorite-star {
position: absolute; top: 6px; left: 6px; border: none; background: transparent; cursor: pointer;
font-size: 18px; line-height: 1; padding: 4px; color: #cbd2e0; z-index: 1;
}
.exam-card-favorite-star:hover { color: #f5b400; }
.exam-card-favorite-star.favorited { color: #f5b400; }
/* 즐겨찾기한 종목만 모아 보여주는 섹션 - 시행기관 아코디언과 별개로 검색창 바로 아래 항상 펼쳐진 채로 노출 */
.favorite-exam-section {
background: #fffaf0; border: 1.5px solid #f5d98a; border-radius: 14px;
padding: 14px; margin-bottom: 14px;
}
.favorite-exam-title { font-size: 14px; font-weight: 800; color: #92650a; margin-bottom: 10px; }
.favorite-exam-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
padding: 10px 16px; border: 1.5px solid var(--border); border-radius: 999px;
background: #fff; cursor: pointer; font-size: 14px; transition: .15s; user-select: none;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.chip.disabled { opacity: .4; cursor: not-allowed; }
/* 콤보박스 (STEP 1/2/3 선택용) */
.combo-select {
width: 100%;
appearance: none;
-webkit-appearance: none;
background: #fff url('data:image/svg+xml;utf8,') no-repeat right 16px center;
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 13px 42px 13px 16px;
font-size: 14.5px;
color: var(--text);
cursor: pointer;
transition: .15s;
font-family: inherit;
}
.combo-select:hover { border-color: var(--primary); }
.combo-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,111,237,.12); }
.combo-select:disabled { background-color: var(--bg); color: var(--text-sub); cursor: not-allowed; }
.mode-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.btn-primary {
background: var(--primary); color: #fff; border: none; padding: 12px 22px; border-radius: 10px;
font-size: 15px; font-weight: 600; cursor: pointer; transition: .15s;
}
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-outline {
background: #fff; border: 1.5px solid var(--border); color: var(--text);
padding: 12px 20px; border-radius: 10px; font-size: 14px; cursor: pointer;
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-secondary {
background: #ffedd5; color: #b45309; border: none; padding: 12px 20px; border-radius: 10px;
font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn-secondary:disabled { opacity: .45; cursor: not-allowed; }
.btn-kakao {
background: #FEE500; color: #191919; border: none; padding: 12px 20px; border-radius: 10px;
font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn-kakao:hover { filter: brightness(.96); }
.btn-danger {
background: #fef2f2; color: var(--danger); border: 1.5px solid #fecdca; padding: 12px 20px;
border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; }
.btn-danger:disabled { opacity: .45; cursor: not-allowed; }
/* 문제풀이 */
.exam-header { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; padding: 14px 16px; }
.exam-header .inner { max-width: 1100px; margin: 0 auto; }
.exam-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.exam-title { font-size: 16px; margin: 0; }
.timer-box {
font-size: 14px; font-weight: 700; color: var(--text); background: var(--bg);
border: 1.5px solid var(--border); border-radius: 999px; padding: 5px 14px; flex-shrink: 0;
}
.timer-box.warning { color: var(--danger); border-color: var(--danger); background: #fef2f2; }
.progress-wrap { display: flex; align-items: center; gap: 10px; }
.progress-bar { flex: 1; height: 8px; background: #eef0f5; border-radius: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); width: 0%; transition: .2s; }
#progressText { font-size: 12.5px; color: var(--text-sub); white-space: nowrap; }
/* 업체 직접광고 자리(애드센스 아님) - 광고주 안 구해졌을 때 보여주는 문의 유도 플레이스홀더.
실제 광고주가 정해지면 이 블록을 배너 이미지+링크로 교체할 것. */
.top-sponsor-ad-placeholder {
max-width: 1100px; margin: 16px auto 0; padding: 14px 16px;
border: 1.5px dashed var(--border); border-radius: var(--radius);
display: flex; align-items: center; justify-content: center; gap: 10px;
background: var(--bg); color: var(--text-sub); font-size: 13px;
}
.top-sponsor-ad-label { font-weight: 700; color: var(--text); }
/* 실제 스폰서 배너가 등록된 경우(renderSponsorBanner) - 점선 플레이스홀더 대신 이 스타일로 바뀐다. */
.top-sponsor-ad-placeholder:has(.sponsor-banner-link) { border-style: solid; padding: 0; overflow: hidden; }
.sponsor-banner-link {
display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px;
text-decoration: none; color: inherit;
}
.sponsor-banner-image { max-height: 60px; border-radius: 6px; flex-shrink: 0; }
.sponsor-banner-title { font-weight: 700; color: var(--text); font-size: 14px; }
.sponsor-banner-desc { font-size: 12.5px; color: var(--text-sub); }
/* 상단 카드형 애드센스 광고. 설정 없으면 renderTopCardAd()가 내용을 안 채워서 빈 채로 높이 0. */
.top-card-ad { max-width: 1100px; margin: 16px auto 0; padding: 0 16px; text-align: center; overflow: hidden; }
.top-card-ad:empty { margin: 0; }
/* 결과화면 고정 띠형 모드(renderTopCardAd opts.strip, 2026-09-14 긴급수정) - JS가 에 이미
width/height를 명시 고정하지만, 애드센스 스크립트가 그 값을 무시하고 세로로 확장하는 사고를
막기 위해 컨테이너에도 CSS max-height를 한 번 더 걸어 이중으로 제한한다. */
.top-card-ad.top-card-strip { max-height: 110px; overflow: hidden; }
/* 결과화면 점수 직하단 가로 띠형 배너(2026-09-11) - 고정 높이(100px)만 확보, 세로로 안 커짐.
설정 없으면 renderResultStripAd()가 내용을 안 채워서 빈 채로 높이 0(top-card-ad와 동일 패턴). */
/* 하단 마진 12px + .roast-trigger의 margin-top 20px = 광고와 팩폭 버튼 사이 32px -
버튼 인접 광고의 우발클릭(애드센스 정책 지적 단골) 방지 간격(2026-09-11). */
.result-strip-ad { max-width: 320px; margin: 14px auto 12px; text-align: center; overflow: hidden; min-height: 0; max-height: 110px; }
/* PC 폭에선 728×90 리더보드(common.js renderResultStripAd가 화면폭 보고 클래스 부여, 2026-09-13) */
.result-strip-ad.strip-wide { max-width: 728px; }
.result-strip-ad:empty { margin: 0; }
/* no-fill(광고 미채움) 시 빈 슬롯 접기 - 애드센스가 미채움 상태를 data-ad-status="unfilled"로
표기해준다. 등수와 버튼 사이가 휑하게 비어 보이던 문제 해소(2026-09-11, 대표 실측 피드백). */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.result-strip-ad:has(> ins[data-ad-status="unfilled"]) { display: none; }
.exam-container {
max-width: 1100px; margin: 20px auto 60px; padding: 0 16px;
display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start;
}
.q-nav {
background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px;
display: grid; grid-template-columns: repeat(5,1fr); gap: 8px;
position: sticky; top: 90px; max-height: 70vh; overflow-y: auto;
}
.q-nav-item {
width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
border-radius: 8px; border: 1px solid var(--border); background: #fff;
font-size: 12.5px; cursor: pointer; color: var(--text-sub);
}
.q-nav-item.answered { background: #eef4ff; border-color: var(--primary); color: var(--primary); font-weight: 700; }
.q-nav-item.current { background: var(--primary); color: #fff; border-color: var(--primary); }
.q-panel { min-width: 0; }
/* ---------- 오늘의 20문제 풀이 레이아웃 (일반 시험화면의 좌측 네비 재사용) ---------- */
/* dailyQNav(문항점프 사이드 네비)는 daily.js가 "한 문제씩" 흐름으로 전체 확장되면서(2026-08-21)
항상 숨겨두는 죽은 요소가 됐다 - 그리드가 여전히 2단(200px 1fr)이라 숨겨진 첫 칸 자리에
문제 카드가 들어가고 실제 콘텐츠 칸은 비어버리는 문제가 있었다(PC 폭에서만 재현, 모바일은
아래 미디어쿼리 덕에 우연히 안 걸림). 항상 1단으로 고정한다. */
.daily-solve-layout {
display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start;
}
.daily-question-panel { min-width: 0; }
.q-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
/* 전체 풀기 모드 : 실제 시험지처럼 문제를 쭉 나열 */
#allQuestionList { display: flex; flex-direction: column; gap: 16px; }
.all-q-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; scroll-margin-top: 90px; }
/* 지문 하나를 여러 문항이 공유하는 경우(편입영어 독해 등) - 지문은 카드 상단에 한 번만, 문항들은
아래에 구분선으로 나눠서 순서대로 쌓는다(지문 중복 노출 방지). */
.all-q-group-body { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.all-q-subcard { padding-top: 18px; border-top: 1px dashed var(--border); scroll-margin-top: 90px; }
.all-q-subcard:first-child { padding-top: 0; border-top: none; }
.all-q-card .q-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.all-q-card .q-top .q-no { margin-left: auto; }
.all-q-card .q-text { font-size: 16px; font-weight: 400; margin: 10px 0 16px; white-space: pre-line; }
.q-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.q-top .q-no { margin-left: auto; }
.q-subject-badge { background: #eef4ff; color: var(--primary); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.q-score-badge { background: #fff7e6; color: #b45309; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.q-no { font-size: 13px; color: var(--text-sub); }
.q-text { font-size: 16.5px; font-weight: 400; margin: 10px 0 18px; white-space: pre-line; word-break: break-word; overflow-wrap: break-word; }
/* 문제 본문(지문) / 이미지 */
.q-passage {
background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
padding: 14px 16px; margin: 4px 0 16px; font-size: 14px; color: #374151;
white-space: pre-wrap; font-family: "Consolas","D2Coding","Pretendard",monospace; line-height: 1.6;
word-break: break-word; overflow-wrap: break-word;
}
/* ①~⑳ 마커는 항상 Pretendard로 강제 - Consolas/D2Coding이 이 글자를 못생기고 아주 작게 갖고 있어서
폰트 폴백이 안 걸리는 문제 대응(2026-09-02). 코드 지문 안에 낀 빈칸 마커도 이걸로 커버됨. */
.circled-num { font-family: "Pretendard",sans-serif; }
/* 진짜 코드/SQL이 아닌 일반 설명 지문(looksLikeCodePassage()가 false)엔 고정폭 코딩폰트 대신
사이트 기본 폰트를 쓴다 - 코드가 아닌데 고정폭을 씌우면 딱딱하고 읽기 불편하다(2026-09-02,
모바일 오늘의문제 화면에서 실사용자 신고로 확인됨). 줄바꿈/공백 보존(pre-wrap)은 그대로 유지. */
.q-passage.passage-plain-text { font-family: "Pretendard",sans-serif; }
/* 모두고르기(ㄱㄴㄷㄹ) 항목나열 - 원본이 줄바꿈 없이 뭉쳐 들어와도(발문뭉침 하자) 화면에서는
항목별로 구분해 보여준다(2026-09-08, formatItemMarksHtml). item-mark-lead는 항목 앞 발문.
formatItemMarksHtml()은 두 곳에서 쓰인다(2026-09-09 #10) - ① renderPassageHtml() 안에서
.q-passage(377~382줄, 이미 배경·테두리 박스 있음) 자식으로 렌더될 때(정상 케이스, passageText가
제대로 분리된 경우) ② renderQuestionTextHtml() 안에서 .q-text(박스 없는 일반 문단) 자식으로 렌더될
때(questionText에 ㄱㄴㄷㄹ이 크램된 폴백 케이스). 아래 기본 규칙(마진만)은 ①에 그대로 적용되고,
.q-text 범위로 한정한 두 번째 규칙 블록만 ②에 .q-passage와 같은 박스 느낌을 입힌다 - 이렇게
나누면 .q-passage 안에서 박스 안에 박스가 겹치는 이중박스 없이, .q-passage 밖(질문 발문에 바로
섞인 경우)에만 새 박스가 생긴다. */
.item-mark-lead { margin-bottom: 6px; }
.item-mark-line { margin: 2px 0 2px 2px; }
/* .q-passage 밖(questionText 크램 폴백)에서만 박스 처리 - 항목 전체를 하나로 이어붙인 박스처럼
보이게 첫/마지막 요소에만 위아래 모서리를 준다(각 줄이 따로따로 박스로 안 보이게). */
.q-text .item-mark-lead, .q-text .item-mark-line {
background: var(--bg); border-left: 1px solid var(--border); border-right: 1px solid var(--border);
padding: 6px 14px; margin: 0; font-size: 14px; color: #374151;
}
.q-text .item-mark-lead:first-child, .q-text .item-mark-line:first-child {
border-top: 1px solid var(--border); border-radius: 10px 10px 0 0; padding-top: 12px; margin-top: 6px;
}
.q-text .item-mark-lead:last-child, .q-text .item-mark-line:last-child {
border-bottom: 1px solid var(--border); border-radius: 0 0 10px 10px; padding-bottom: 12px; margin-bottom: 12px;
}
.q-text .item-mark-lead:first-child:last-child, .q-text .item-mark-line:first-child:last-child {
border-radius: 10px;
}
/* 지문 안 표(마크다운 |a|b|c| 를 렌더링) - white-space:pre-wrap을 물려받지 않도록 초기화 */
.passage-table { border-collapse: collapse; margin: 8px 0; white-space: normal; font-family: "Pretendard",sans-serif; width: 100%; }
.passage-table th, .passage-table td { border: 1px solid var(--border); padding: 6px 12px; text-align: center; }
.passage-table thead th { background: #eef2f7; font-weight: 700; }
.passage-table tbody tr:nth-child(even) { background: #fafafa; }
.q-image-wrap { margin: 4px 0 16px; text-align: center; }
.q-image {
max-width: 100%; max-height: 380px; border: 1px solid var(--border); border-radius: 10px;
display: inline-block;
}
.choice-list { display: flex; flex-direction: column; gap: 10px; }
/* 질문 이미지 + 텍스트 보기 좌우 배치 - common.js shouldSideBySideImage()가 문제별로 판단해서
.side-by-side 클래스를 붙인다(그림 보기 문제는 이미 그리드라 대상 아님). 좁은 화면은 어차피
좌우로 붙이면 이미지/글자가 너무 작아지므로 세로 배치로 되돌린다. */
.q-image-choice-row.side-by-side { display: flex; align-items: flex-start; gap: 20px; }
.q-image-choice-row.side-by-side .q-image-wrap { flex: 0 0 42%; margin: 0; }
.q-image-choice-row.side-by-side .q-image { max-height: none; width: 100%; }
.q-image-choice-row.side-by-side .choice-list,
.q-image-choice-row.side-by-side .exp-choices { flex: 1; min-width: 0; }
@media (max-width: 640px) {
.q-image-choice-row.side-by-side { display: block; }
.q-image-choice-row.side-by-side .q-image-wrap { margin: 4px 0 16px; }
}
.short-answer-wrap { margin-top: 4px; }
.short-answer-input {
width: 100%; padding: 13px 14px; border: 1.5px solid var(--border); border-radius: 10px;
font-size: 15px; font-family: inherit; resize: vertical; min-height: 48px; line-height: 1.5;
box-sizing: border-box;
}
.short-answer-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,111,237,.12); }
.short-answer-input.correct-border { border-color: var(--success); background: #ecfdf5; }
.short-answer-input.wrong-border { border-color: var(--danger); background: #fef2f2; }
.exp-short-answer { padding: 12px 14px; border-radius: 8px; background: var(--bg); font-size: 14px; margin-bottom: 8px; }
.exp-short-answer .label { font-weight: 700; color: var(--text-sub); margin-right: 6px; }
.exp-short-answer.correct { background: #ecfdf5; }
.exp-short-answer.wrong { background: #fef2f2; }
.choice-item {
display: flex; align-items: center; gap: 12px; padding: 13px 14px;
border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; transition: .12s;
}
/* 코드/URL처럼 공백 없이 긴 보기 텍스트(VBA 코드 등)가 flex 아이템 기본 min-width 때문에
줄바꿈 안 되고 컨테이너 밖으로 삐져나가던 문제(모바일에서 발견, 2026-08-20) - 텍스트 span은
min-width:0으로 줄여서 부모 폭 안에서 줄바꿈되게 한다. */
.choice-item > span:not(.num) { min-width: 0; overflow-wrap: anywhere; }
.choice-item:hover { border-color: var(--primary); }
.choice-item.selected { border-color: var(--primary); background: #eef4ff; }
.choice-item .num {
width: 24px; height: 24px; border-radius: 50%; background: #eef0f5;
display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.choice-item.selected .num { background: var(--primary); color: #fff; }
.choice-item.correct-answer { border-color: var(--success); background: #ecfdf3; }
.choice-item.wrong-answer { border-color: var(--danger); background: #fef2f2; }
/* 보기 자체가 그림인 문제(요양보호사 삽화형 등) - 세로로 쭉 나열하면 너무 길어지니
정사각형에 가까운 카드 그리드로 배치한다. common.js의 hasImageChoices()로 이 클래스를 붙인다. */
.choice-image { max-width: 100%; max-height: 160px; display: block; margin: 0 auto; }
.choice-text-label { display: block; margin-top: 6px; font-size: 13px; text-align: center; }
.choice-list.choice-grid, #choiceList.choice-grid, .dq-choice-list.choice-grid, .exp-choices.choice-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (min-width: 520px) {
.choice-list.choice-grid, #choiceList.choice-grid, .dq-choice-list.choice-grid, .exp-choices.choice-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.choice-grid .choice-item {
position: relative;
flex-direction: column; align-items: center; justify-content: center; text-align: center;
padding-top: 32px;
}
.choice-grid .choice-item .num { position: absolute; top: 8px; left: 8px; margin-bottom: 0; }
.choice-grid .exp-choice { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* 원본 삽화는 1024px인데 예전엔 120px로 줄여 보여줘서 체위/자세 구분이 안 됐다(실측 확인) - 180px로 키움.
width만 고정하면 좁은 화면에서 넘치므로 max-width:100%로 줄어들 수 있게 유지한다. */
.choice-grid .choice-image, .choice-grid.exp-choices .choice-image {
width: 180px; height: 180px; max-width: 100%; max-height: none; object-fit: contain;
background: #f8f9fc; border-radius: 8px; margin: 0 auto;
}
.instant-result { margin-top: 18px; padding: 14px 16px; border-radius: 10px; font-size: 14px; }
.instant-result.ok { background: #ecfdf3; color: #027a48; border: 1px solid #b7f0d3; }
.instant-result.no { background: #fef2f2; color: #b42318; border: 1px solid #fecdca; }
.instant-result .exp-title { font-weight: 700; margin-bottom: 6px; }
.q-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.q-actions button { flex: 1; min-width: 120px; }
/* 마스코트 - 헤더 타이틀 옆(작게), 결과화면(크게), 인라인(텍스트 옆 소형) 세 가지 크기로 재사용 */
.header-mascot { width: 52px; height: 52px; object-fit: cover; object-position: left top; border-radius: 14px; flex-shrink: 0; margin-left: 10px; }
.result-mascot { width: 84px; height: auto; display: block; margin: 0 auto 10px; }
.inline-mascot { width: 28px; height: 28px; object-fit: cover; object-position: left top; border-radius: 8px; vertical-align: middle; margin-right: 6px; flex-shrink: 0; }
/* 결과 */
.result-banner { text-align: center; }
.pass-badge { display: inline-block; font-size: 22px; font-weight: 800; padding: 10px 26px; border-radius: 999px; margin-bottom: 18px; }
.pass-badge.pass { background: #ecfdf3; color: var(--success); }
.pass-badge.fail { background: #fef2f2; color: var(--danger); }
.pass-badge.partial { background: #fffbeb; color: #b45309; }
/* 묶음(자격)별 판정 줄 - 생명보험·손해보험 설계사(2026-09-05) */
.track-result-box { display: flex; flex-direction: column; gap: 6px; margin: -6px 0 16px; font-size: 15px; }
.track-result-box .track-line.Y { color: var(--success); }
.track-result-box .track-line.N { color: var(--danger); }
.track-result-box .track-sub { font-size: 12px; color: var(--text-sub); font-weight: 400; }
.track-result-box .track-hint { font-size: 12.5px; color: var(--text-sub); margin: -2px 0 2px; padding-left: 22px; }
.pass-badge-tagline { margin: -8px 0 18px; font-size: 13px; font-weight: 600; color: var(--text-sub); display: flex; align-items: center; justify-content: center; gap: 6px; }
.result-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.summary-item { background: var(--bg); border-radius: 10px; padding: 14px 10px; }
.summary-item .label { display: block; font-size: 12px; color: var(--text-sub); margin-bottom: 6px; }
.summary-item .value { font-size: 19px; font-weight: 800; }
.table-wrap { overflow-x: auto; }
.score-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.score-table th, .score-table td { padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--border); }
.score-table th { background: var(--bg); font-weight: 700; }
.pass-tag { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pass-tag.Y { background: #ecfdf3; color: var(--success); }
.pass-tag.N { background: #fef2f2; color: var(--danger); }
.dispute-btn {
margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
background: #fff; border: 1px solid var(--border); color: var(--text-sub); cursor: pointer;
}
.dispute-btn:hover { border-color: var(--primary); color: var(--primary); }
/* 💡 힌트보기 ("오답 사슬 끊기") - dispute-btn이 margin-left:auto로 이미 오른쪽 정렬을 맡고 있어서
여기는 그 뒤에 붙는 간격만 신경 쓰면 된다 */
.concept-hint-btn {
margin-left: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
background: #fff7e6; border: 1px solid #f5d98a; color: #92650a; cursor: pointer;
}
.concept-hint-btn:hover { border-color: #e0a300; }
.concept-hint-panel {
margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: #fffaf0; border: 1px solid #f5d98a;
}
.concept-hint-loading, .concept-hint-empty { font-size: 13px; color: var(--text-sub); }
.concept-hint-title { font-size: 13.5px; font-weight: 800; color: #92650a; margin-bottom: 10px; }
.concept-hint-item {
background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;
}
.concept-hint-item:last-child { margin-bottom: 0; }
.concept-hint-q { font-size: 14px; font-weight: 600; margin-bottom: 8px; white-space: pre-line; }
.explain-list { display: flex; flex-direction: column; gap: 14px; }
.explain-item { border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
/* 같은 지문을 공유하는 문항들(편입영어 독해 등) - 지문은 그룹 상단에 한 번만, 문항들은 안쪽에
쌓는다(중복 노출 방지). exam.js의 .all-q-group-body/.all-q-subcard와 같은 목적. */
.explain-group { border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.explain-group-body { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.explain-group .explain-item { border: none; border-radius: 0; padding: 14px 0 0; border-top: 1px dashed var(--border); }
.explain-group .explain-item:first-child { padding-top: 0; border-top: none; }
.explain-item .exp-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.explain-item .exp-q { font-weight: 600; margin: 6px 0 10px; white-space: pre-line; }
.explain-item .exp-choices { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.explain-item .exp-choice { padding: 8px 10px; border-radius: 8px; font-size: 13.5px; border: 1px solid var(--border); }
.explain-item .exp-choice.answer { border-color: var(--success); background: #ecfdf3; }
.explain-item .exp-choice.my-wrong { border-color: var(--danger); background: #fef2f2; }
.explain-item .exp-text { background: var(--bg); border-radius: 8px; padding: 12px; font-size: 13.5px; color: #374151; white-space: pre-line; }
.explain-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.explain-header-row #explainToggleBtn { white-space: nowrap; }
/* 문제 좋아요/싫어요 - 카드 내부 맨 아래에 둬서 광고 배너와는 항상 카드 padding만큼 떨어지게 한다(오클릭 방지 규칙, 위 .dispute-btn 주석 참고) */
.vote-widget { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.vote-btn {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px;
font-size: 13px; font-weight: 600; background: #fff; border: 1px solid var(--border);
color: var(--text-sub); cursor: pointer;
}
.vote-btn:hover { border-color: var(--primary); }
.vote-btn.active.vote-like { background: #ecfdf3; border-color: var(--success); color: var(--success); }
.vote-btn.active.vote-dislike { background: #fef2f2; border-color: var(--danger); color: var(--danger); }
.vote-reason-picker { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; margin-top: 4px; }
.favorite-btn {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px;
font-size: 13px; font-weight: 600; background: #fff; border: 1px solid var(--border);
color: var(--text-sub); cursor: pointer; margin-top: 12px;
}
.favorite-btn:hover { border-color: var(--primary); }
.favorite-btn.active { background: #fffbeb; border-color: #f59e0b; color: #b45309; }
.vote-reason-chip {
padding: 4px 10px; border-radius: 999px; font-size: 12px; background: var(--bg);
border: 1px solid var(--border); color: var(--text-sub); cursor: pointer;
}
.vote-reason-chip:hover { border-color: var(--danger); color: var(--danger); }
.result-nav-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 30px 0; }
.result-nav-actions button { min-width: 160px; }
@media (max-width: 560px) {
.result-nav-actions { flex-direction: column; align-items: stretch; }
.result-nav-actions button { min-width: 0; }
}
.view { display: none; }
.view.active { display: block; }
/* ---------- 알림/확인 모달 (alert/confirm 대체) ---------- */
.modal-overlay {
position: fixed; inset: 0; background: rgba(15, 20, 35, .65);
display: flex; align-items: center; justify-content: center;
z-index: 1000; padding: 16px;
}
/* 원래 광고 팝업용으로 만든 adPopIn 애니메이션을 알림 모달이 같이 쓰고 있었다.
광고 팝업을 없애면서 이름을 용도에 맞게 modalPopIn으로 바꿨다. */
@keyframes modalPopIn { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-box {
background: #fff; width: 100%; max-width: 380px; border-radius: 16px;
padding: 28px 24px 22px; text-align: center;
box-shadow: 0 12px 40px rgba(0,0,0,.25);
animation: modalPopIn .18s ease-out;
}
.modal-icon { font-size: 40px; margin-bottom: 12px; }
.modal-message { font-size: 15px; line-height: 1.6; color: var(--text); white-space: pre-line; margin-bottom: 20px; }
.modal-prompt-input {
width: 100%; box-sizing: border-box; resize: vertical; font: inherit;
padding: 10px 12px; border: 1px solid #dde3ee; border-radius: 8px; margin-bottom: 16px;
}
.modal-actions { display: flex; gap: 10px; justify-content: center; }
.modal-actions button { flex: 1; max-width: 140px; }
/* 해설 크게 보기 모달 - 일반 alert 모달(짧은 메시지용)보다 넓고, 내용이 길면 스크롤되게 */
.explain-modal-box {
max-width: 640px; max-height: 80vh; overflow-y: auto; text-align: left; position: relative;
padding: 32px 28px 26px;
}
.explain-modal-message { font-size: 16px; line-height: 1.75; margin-bottom: 0; white-space: pre-line; }
.explain-modal-close {
position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
border: none; background: #f1f3f8; color: var(--text-sub); font-size: 15px; cursor: pointer;
display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.explain-modal-close:hover { background: #e4e7f0; }
/* exp-text/gk-explain을 눌러서 크게 볼 수 있다는 걸 알려주는 최소한의 표시 */
.exp-text, .gk-explain { cursor: pointer; }
.exp-text:hover, .gk-explain:hover { background: #f4f6fb; }
/* 직접 만든 광고 팝업(인터스티셜) 스타일은 전부 제거함 - 채점 전 전면광고를 없앴기 때문.
시험 페이지 위에 오버레이가 뜨는 구조라 "시험 화면엔 광고를 넣지 않는다"는 원칙과 어긋났고,
3초간 닫기를 잠그는 강제 전면광고는 애드센스 정책(Better Ads Standards)상 위험했다.
전면광고가 필요하면 직접 만들지 말고 애드센스 자동광고의 Vignette 형식을 쓸 것. */
@media (max-width: 720px) {
/* 과목별 채점결과 표 - 좁은 화면에서 표 너비를 100%로 강제하면 5개 컬럼이 억지로 눌려서
"정답수"/"획득점수 / 배점" 같은 헤더 글자가 한 글자씩 여러 줄로 쪼개져 보이는 문제가 있었다
(2026-08-14). table-wrap에 이미 overflow-x:auto가 있으니, 표 자체에 최소 너비를 줘서
진짜로 가로 스크롤이 뜨게 하고 텍스트는 안 쪼개지게 한다. */
.score-table { min-width: 480px; }
.score-table th, .score-table td { white-space: nowrap; }
.mode-grid { grid-template-columns: repeat(2,1fr); }
.result-summary { grid-template-columns: repeat(2,1fr); }
.exam-container { grid-template-columns: 1fr; }
/* 원래 HTML엔 q-nav(답안란)가 q-panel(문제)보다 먼저 나와서, 모바일 1단 레이아웃에서
답안란이 문제 위에 먼저 뜨는 문제가 있었다(국시원 테마는 이미 순서를 바꿔놨는데, 그 외
테마(편입영어 등 기본 테마)엔 빠져있었음) - 문제를 먼저, 답안란을 아래로 보낸다. */
.q-panel { order: 1; }
.q-nav { order: 2; position: static; grid-template-columns: repeat(8,1fr); max-height: none; }
.q-actions button { min-width: 45%; }
}
@media (max-width: 420px) {
.mode-grid { grid-template-columns: 1fr; }
.result-summary { grid-template-columns: repeat(2,1fr); }
.q-nav { grid-template-columns: repeat(6,1fr); }
}
/* ---------- 게시판 첨부파일 썸네일 ---------- */
.file-thumb {
position: relative; width: 90px; height: 90px; border-radius: 10px;
overflow: hidden; border: 1px solid var(--border); background: var(--bg);
}
.file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-thumb .file-thumb-remove {
position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
background: rgba(0,0,0,.6); color: #fff; border: none; font-size: 12px; cursor: pointer;
display: flex; align-items: center; justify-content: center; line-height: 1;
}
.file-thumb .file-thumb-uploading {
position: absolute; inset: 0; background: rgba(255,255,255,.75);
display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-sub);
}
.detail-file-item {
display: block; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
width: 160px; text-decoration: none; color: inherit;
}
.detail-file-item img { width: 100%; height: 120px; object-fit: cover; display: block; }
.detail-file-item .file-name {
display: block; padding: 6px 8px; font-size: 12px; color: var(--text-sub);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ---------- 간편모드 (요양보호사 등 어르신 응시자 배려) ----------
body.simple-mode 가 붙으면 종목홈 화면의 주요 글씨/버튼/입력요소를 확대한다. */
body.simple-mode .exam-home-header .logo { font-size: 30px !important; }
body.simple-mode .exam-home-header .tagline { font-size: 17px !important; }
body.simple-mode .exam-home-icon { font-size: 44px !important; }
body.simple-mode #view-exam-home .card h2 { font-size: 20px; }
body.simple-mode #view-exam-home .card .step { font-size: 13px; padding: 5px 12px; }
body.simple-mode .combo-select {
font-size: 19px; padding: 20px 46px 20px 20px; border-width: 2px; border-radius: 14px;
}
body.simple-mode #startBtn {
font-size: 22px; padding: 22px 30px; border-radius: 16px; width: 100%; font-weight: 800;
}
body.simple-mode #criteriaInfo { font-size: 16px; padding: 18px; }
body.simple-mode .sub-title { font-size: 17px; }
/* 문제풀이 화면도 간편모드에서는 글씨/버튼을 키운다 */
body.simple-mode .exam-title { font-size: 19px; }
body.simple-mode .q-text { font-size: 19px !important; line-height: 1.7; }
body.simple-mode .choice-item { font-size: 17px !important; padding: 16px 18px !important; }
body.simple-mode .choice-item .num { font-size: 17px !important; }
body.simple-mode .short-answer-input { font-size: 18px !important; padding: 16px !important; }
body.simple-mode .btn-primary, body.simple-mode .btn-outline, body.simple-mode .btn-secondary {
font-size: 17px; padding: 16px 24px;
}
body.simple-mode .timer-box { font-size: 17px; }
/* ============================================================
CBT 테마 (국시원 시행 종목 - 요양보호사/간호조무사)
실제 국시원 CBT 시험 화면(답안표기란/체크문제/글자크기조절)과 비슷한 UI를 보여준다.
============================================================ */
/* 헤더 배색 - 실제 CBT의 남색 계열 톤을 참고하되, 단색이 아닌 그라데이션으로 변형 */
body.cbt-theme-kuksiwon .exam-header { background: linear-gradient(120deg, #16304f, #2c5686); border-bottom-color: #0f2138; }
body.cbt-theme-kuksiwon .exam-header .exam-title { color: #fff; }
body.cbt-theme-kuksiwon .exam-header .progress-bar { background: rgba(255,255,255,.15); }
body.cbt-theme-kuksiwon .exam-header .progress-fill { background: #6fa8ff; }
body.cbt-theme-kuksiwon .exam-header #progressText { color: #cfe0f7; }
/* 좌측 "연습모드" 배지 - 실제 응시자 정보(응시번호/성명) 자리에, 개인정보 없이 서비스 성격만 표시 */
.cbt-practice-badge {
display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.22); border-radius: 10px; padding: 6px 12px 6px 8px;
}
.cbt-practice-badge-icon {
width: 26px; height: 26px; border-radius: 8px; background: #6fa8ff; color: #0b1f33;
display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
}
.cbt-practice-badge-text { display: flex; flex-direction: column; line-height: 1.3; }
.cbt-practice-badge-text strong { font-size: 12.5px; color: #fff; }
.cbt-practice-badge-text span { font-size: 10.5px; color: #cfe0f7; }
/* 글자크기 버튼 */
.cbt-fontsize-box { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 12px; }
.cbt-fontsize-label { font-size: 11.5px; color: #cfe0f7; margin-right: 2px; }
.cbt-fontsize-btn {
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #cfe0f7;
border-radius: 6px; padding: 5px 8px; font-size: 12.5px; cursor: pointer; line-height: 1;
}
.cbt-fontsize-btn em { font-style: normal; font-size: 10px; display: block; margin-top: 2px; }
.cbt-fontsize-btn.active { background: #6fa8ff; border-color: #6fa8ff; color: #0b1f33; font-weight: 700; }
/* 화면배치(1단/2단 보기) 토글 버튼 */
.cbt-layout-box { display: flex; align-items: center; gap: 6px; margin-right: 12px; }
.cbt-layout-label { font-size: 11.5px; color: #cfe0f7; margin-right: 2px; white-space: nowrap; }
.cbt-layout-btn {
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #cfe0f7;
border-radius: 6px; padding: 6px 11px; font-size: 13px; letter-spacing: 2px; cursor: pointer; line-height: 1;
}
.cbt-layout-btn.active { background: #6fa8ff; border-color: #6fa8ff; color: #0b1f33; font-weight: 700; }
/* 글자크기 스케일 - 문제 본문/보기에 적용 */
body.cbt-fontscale-80 .q-text, body.cbt-fontscale-80 .choice-item { font-size: 87% !important; }
body.cbt-fontscale-125 .q-text, body.cbt-fontscale-125 .choice-item { font-size: 128% !important; }
/* ---------- 전체 폭 - CBT 테마는 좌우 여백을 줄이고 시험지 영역을 더 넓게 쓴다 ---------- */
body.cbt-theme-kuksiwon .exam-header .inner,
body.cbt-theme-kuksiwon .exam-container,
body.cbt-theme-kuksiwon .cbt-filter-bar { max-width: 1320px; }
body.cbt-theme-kuksiwon .exam-container { padding: 0 12px; }
/* ---------- 답안 표기란 위치 (CBT 테마일 때 오른쪽으로 이동 - 실제 CBT처럼) ---------- */
body.cbt-theme-kuksiwon .exam-container { grid-template-columns: 1fr 310px; }
body.cbt-theme-kuksiwon .q-nav { order: 2; }
body.cbt-theme-kuksiwon .q-panel { order: 1; }
/* ---------- 답안 표기란 (CBT 테마일 때 #qNav를 이 스타일로 다시 그림) ----------
실제 국시원 CBT 화면 기준: 본문은 흰 배경이고, "답안 표기란" 제목 줄만 남색이다.
.cbt-item은 base .q-nav-item 클래스도 함께 갖고 있으므로, 정사각형 강제(aspect-ratio)나
기본 배경색 같은 base 스타일이 새어들어오지 않도록 필요한 속성을 전부 명시적으로 재정의한다. */
body.cbt-theme-kuksiwon .q-nav.cbt-answer-sheet {
background: #fff; border: 1px solid var(--border); padding: 0; grid-template-columns: none;
overflow: hidden; max-height: 70vh; display: flex; flex-direction: column;
}
.cbt-answer-sheet .cbt-sheet-title {
background: #4a6b96; color: #fff; font-size: 15px; font-weight: 700; text-align: center; padding: 13px 0;
margin: 0; flex-shrink: 0;
}
.cbt-answer-sheet .cbt-body { padding: 8px 14px 14px; overflow-y: auto; flex: 1; }
.cbt-answer-sheet .cbt-item {
width: auto; aspect-ratio: auto; display: flex; align-items: center; gap: 8px;
padding: 6px 4px; border-radius: 6px; border: none; background: transparent; font-size: 14.5px; color: var(--text);
font-weight: 400; cursor: pointer;
}
.cbt-answer-sheet .cbt-item.answered { background: transparent; border-color: transparent; color: var(--text); font-weight: 400; }
.cbt-answer-sheet .cbt-item.current { background: #eef4ff; border-color: transparent; color: var(--text); }
.cbt-answer-sheet .cbt-item .cbt-flag-icon {
width: 16px; height: 16px; border-radius: 4px; background: #e8748f; color: #fff; flex-shrink: 0;
display: none; align-items: center; justify-content: center; font-size: 10.5px; line-height: 1;
}
.cbt-answer-sheet .cbt-item.cbt-flagged .cbt-flag-icon { display: flex; }
.cbt-answer-sheet .cbt-item .cbt-qno {
width: 22px; font-size: 13px; color: var(--text-sub); flex-shrink: 0; text-align: right;
}
.cbt-answer-sheet .cbt-choices { display: flex; gap: 5px; }
.cbt-answer-sheet .cbt-choice {
width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-sub);
flex-shrink: 0; aspect-ratio: 1; background: #fff;
}
.cbt-answer-sheet .cbt-choice.selected { background: #2f5fa8; border-color: #2f5fa8; color: #fff; font-weight: 700; }
@media (max-width: 720px) {
body.cbt-theme-kuksiwon .exam-container { grid-template-columns: 1fr; }
body.cbt-theme-kuksiwon .q-nav.cbt-answer-sheet { order: 2; position: static; max-height: none; display: block; }
body.cbt-theme-kuksiwon .q-panel { order: 1; }
.cbt-answer-sheet .cbt-body { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; overflow-y: visible; }
body.cbt-theme-kuksiwon .exam-title-row { flex-wrap: wrap; row-gap: 8px; }
body.cbt-theme-kuksiwon .exam-title { order: -1; width: 100%; }
body.cbt-theme-kuksiwon .cbt-fontsize-box { margin-left: 0; }
}
/* ---------- 화면배치 "2단 보기" : 문제 2개를 좌우로 나란히 ---------- */
.cbt-dual-wrap { display: flex; align-items: stretch; gap: 18px; }
.cbt-dual-card { flex: 1 1 0; min-width: 0; }
.cbt-dual-divider { width: 1px; background: var(--border); flex-shrink: 0; }
@media (max-width: 760px) {
.cbt-dual-wrap { flex-direction: column; }
.cbt-dual-divider { display: none; }
}
/* ---------- 체크문제 배지 ---------- */
.cbt-flag-badge {
display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-sub);
border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; cursor: pointer; float: right;
user-select: none;
}
.cbt-flag-badge.flagged { background: #fff4e0; border-color: #ffb020; color: #b45309; font-weight: 700; }
/* ---------- 하단 고정 푸터 : 이전/다음 + 전체/체크/안 푼 문제 + 제출 ---------- */
.cbt-filter-bar {
position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--border);
display: flex; align-items: center; gap: 12px; row-gap: 8px; flex-wrap: wrap;
padding: 10px 16px; max-width: 1100px; margin: 0 auto; justify-content: space-between;
}
.cbt-footer-nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cbt-footer-nav .btn-outline { padding: 8px 14px; }
.cbt-footer-page-text { font-size: 13px; font-weight: 700; color: var(--text-sub); white-space: nowrap; }
.cbt-footer-filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; flex: 1 1 auto; }
#footerSubmitBtn { flex-shrink: 0; padding: 9px 18px; white-space: nowrap; }
.cbt-filter-btn {
background: #fff; border: 1.5px solid var(--border); border-radius: 8px; padding: 9px 16px;
font-size: 13px; cursor: pointer; color: var(--text);
}
.cbt-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.cbt-filter-box { width: min(760px, 92vw); max-width: 760px; max-height: 80vh; }
.cbt-filter-list { overflow-y: auto; max-height: 60vh; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .cbt-filter-list { grid-template-columns: 1fr; } }
.cbt-filter-item {
border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 13px;
}
.cbt-filter-item:hover { border-color: var(--primary); }
.cbt-filter-item .cbt-filter-item-no { font-weight: 700; color: var(--primary); margin-right: 6px; }
/* ---------- 회차 선택 카드 (드롭다운 대신) ---------- */
.round-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.round-card {
border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px 16px; cursor: pointer;
background: #fff; transition: border-color .15s, transform .1s;
}
.round-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.round-card.selected { border-color: var(--primary); background: #eef4ff; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.round-card .round-card-name { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.round-card .round-card-status { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.round-card .round-card-status.pass { color: var(--success); }
.round-card .round-card-status.fail { color: var(--danger); }
.round-card .round-card-status.partial { color: #b45309; }
.round-card .round-card-status.none { color: var(--text-sub); font-weight: 400; }
.round-card .round-card-sub { font-size: 11.5px; color: var(--text-sub); }
@media (max-width: 480px) { .round-card-grid { grid-template-columns: 1fr 1fr; } }
/* 구분(필기/실기) 필터 체크박스 - 콤보박스 단일선택 대신 둘 다 켜둘 수 있게 크게 만든 것(2026-08-29).
exam-home.html(회차 선택)과 practice.html(10문제 더풀기 시작 전)이 같이 쓴다. */
.exam-type-check-group { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.exam-type-check-label {
display: flex; align-items: center; gap: 10px; padding: 14px 20px;
border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer;
font-size: 16px; font-weight: 700; background: #fff; transition: all .15s ease; user-select: none;
}
.exam-type-check-label:has(input:checked) { border-color: var(--primary); background: #eef4ff; }
.exam-type-check-label input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--primary); cursor: pointer; }
/* 회차카드에 붙는 필기/실기 배지 - 구분을 체크박스로 둘 다 켜두면 카드가 섞여 나오므로 필요 */
.round-card-type-badge {
display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px;
border-radius: 999px; background: #eef4ff; color: var(--primary); margin-bottom: 8px;
}
/* 좁은 화면(휴대폰)에서는 글자크기/화면배치/타이머가 한 줄에 다 들어가면서 글씨가 너무 작아져
가독성이 떨어지는 문제가 있었다(특히 어르신 응시자가 많은 요양보호사 간편모드에서 치명적).
"화면배치"(2단 보기)는 폰 화면에서는 애초에 의미가 없어 숨기고, 남은 글자크기 버튼/타이머는
최소 가독 크기 이상으로 키운다. 반드시 파일 맨 끝에 둘 것 - 같은 우선순위(동일 클래스 선택자)일 땐
소스에서 나중에 나오는 규칙이 이기므로, 이 블록이 원본 규칙(.cbt-footer-filters 등)보다 앞에 있으면
덮어쓰기가 안 먹는다(실제로 이 문제로 한참 헤맸음 - 새 모바일 오버라이드는 항상 파일 끝에 추가할 것). */
@media (max-width: 480px) {
/* 헤더/카드 여백이 커서 폰에서 문제 지문이 스크롤 없이는 안 보이는 문제 - 글자 크기(가독성)는
그대로 두고 여백만 줄여서 "한눈에 안 들어온다"는 문제를 해결한다. */
.exam-header { padding: 8px 12px; }
.exam-title-row { margin-bottom: 6px; }
.q-card { padding: 14px; }
.q-top { margin-bottom: 8px; }
.choice-item { padding: 10px 12px !important; gap: 10px; }
body.simple-mode .choice-item { padding: 11px 13px !important; }
/* 하단 고정 푸터(이전/다음 + 제출)도 폰에서는 여백/글씨를 줄여 공간 확보.
전체/체크/안 푼 문제 버튼은 폰에서는 자리만 차지해서 숨기고, 남은 이전/다음/제출 3개를
줄바꿈 없이 한 줄에 맞춘다(제출 버튼이 남는 공간을 채움). */
.cbt-filter-bar { padding: 8px 10px; gap: 12px; row-gap: 6px; flex-wrap: nowrap; }
.cbt-footer-nav { gap: 8px; }
.cbt-footer-nav .btn-outline { padding: 7px 8px; font-size: 12.5px; }
.cbt-footer-page-text { font-size: 12px; }
.cbt-footer-filters { display: none; }
/* 남는 공간을 채우지 않고 오른쪽 끝에 고정, 글씨는 더 키움 */
#footerSubmitBtn { flex: 0 0 auto; margin-left: auto; padding: 9px 16px; font-size: 14.5px; }
/* exam.js가 jQuery .toggle()로 인라인 style="display:block"을 강제하므로 !important 필요 */
body.cbt-theme-kuksiwon .cbt-layout-box { display: none !important; }
/* "모의 연습모드 / 비회원 응시" 텍스트는 자리만 차지하고 안 봐도 그만인 정보라 폰에서는 숨김 */
body.cbt-theme-kuksiwon .cbt-practice-badge-text { display: none; }
body.cbt-theme-kuksiwon .cbt-fontsize-box { margin-right: 0; gap: 8px; }
body.cbt-theme-kuksiwon .cbt-fontsize-label { font-size: 13px; }
body.cbt-theme-kuksiwon .cbt-fontsize-btn { padding: 7px 10px; font-size: 14px; }
body.cbt-theme-kuksiwon .cbt-fontsize-btn em { font-size: 11.5px; }
body.cbt-theme-kuksiwon .timer-box { font-size: 15px; padding: 6px 10px; }
body.cbt-theme-kuksiwon .q-subject-badge, body.cbt-theme-kuksiwon .q-score-badge, body.cbt-theme-kuksiwon .q-no {
font-size: 13px;
}
}
/* 답안표기란(80문항 미니배지 전체)이 모바일에서 세로로 너무 길어 스크롤을 방해하는 문제 -
기본은 접어두고 "답안 표기란" 제목을 누르면 펼쳐지는 아코디언으로 만든다(exam.js 토글 클래스).
PC는 손 안 대고 항상 펼쳐진 그대로 둔다. */
@media (max-width: 480px) {
.cbt-sheet-title {
display: block; width: 100%; text-align: left; background: none; border: none;
cursor: pointer; font: inherit; padding: 0;
}
#qNav .cbt-body { display: none; }
#qNav.cbt-expanded .cbt-body { display: grid; }
}
/* 베타테스트 배지 - common.js가 모든 페이지 헤더에 자동 삽입(문제풀이 화면은 exam.html에 직접 넣음) */
.beta-badge {
display: inline-block; font-size: 11.5px; font-weight: 700; color: #fff;
background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4);
padding: 3px 10px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
}
.exam-title-row .beta-badge { margin-left: 6px; }
/* 회차/문제가 아직 없는 종목 카드 - 클릭 안 되고 톤을 낮춰서 "아직은 못 들어가는 카드"임을 보여줌 */
.exam-card-disabled { position: relative; cursor: default; opacity: .55; }
.exam-card-disabled:hover { border-color: var(--border); transform: none; }
.exam-card-badge {
position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 800; color: #fff;
background: #9aa3b2; padding: 3px 9px; border-radius: 999px;
}
/* 지문 그룹 퀵점프 바 ([지문][Q31][Q32]...) - 그 지문 섹션을 스크롤하는 동안만 헤더 바로 아래 붙어있다가
다음 지문 그룹으로 넘어가면 자연히 다음 퀵점프 바가 그 자리를 이어받는다(position:sticky 특성).
지문부터 읽는 사람은 그대로 읽고 버튼으로 원하는 문제로 이동, 문제부터 보는 사람은 진입하자마자
[Q31] 눌러서 바로 그 문제로 스크롤할 수 있다(2026-08-13, 지문 기본 접기 방식은 기각하고 이걸로 확정). */
.passage-quicknav {
position: sticky; z-index: 5; display: flex; gap: 6px; flex-wrap: wrap;
background: #fff; border: 1px solid var(--border); border-radius: 10px;
padding: 8px 10px; margin-bottom: 10px; box-shadow: 0 2px 6px rgba(20,30,60,.06);
}
.passage-quicknav-btn {
background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px;
padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--text-sub); cursor: pointer;
}
.passage-quicknav-btn:hover { border-color: var(--primary); color: var(--primary); }
.passage-quicknav-btn.passage-quicknav-passage { background: #eef4ff; border-color: #d7e4ff; color: var(--primary); }
/* 문제 본문 안에서 지문으로 돌아가는 링크 - 퀵점프 버튼과 톤은 같되 한 줄 통짜로 눈에 덜 띄게 */
.passage-back-link { display: inline-block; margin: 4px 0 12px; font-size: 12px; }
/* ---------- 지문 밑줄/동그라미 표시 ---------- */
.q-passage { cursor: text; user-select: text; -webkit-user-select: text; }
.passage-mark-popup {
position: absolute; z-index: 50; display: none; gap: 4px; background: #1c2333; border-radius: 8px;
padding: 5px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.passage-mark-popup button {
background: transparent; border: none; color: #fff; font-size: 12.5px; font-weight: 700;
padding: 6px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.passage-mark-popup button:hover { background: rgba(255,255,255,.15); }
.passage-mark-underline {
text-decoration: underline; text-decoration-color: #e5484d; text-decoration-thickness: 2.5px;
text-underline-offset: 3px; cursor: pointer;
}
.passage-mark-circle {
border: 2px solid #e5484d; border-radius: 999px; padding: 1px 6px; margin: 0 1px; cursor: pointer;
}
.passage-clear-marks {
display: block; margin: -6px 0 12px auto; background: none; border: none; color: var(--text-sub);
font-size: 11.5px; cursor: pointer; text-decoration: underline;
}
/* 모바일에서는 드래그 선택 시 OS 기본메뉴(복사/공유/사전 등)가 항상 같이 떠서 커스텀 팝업을
가리는 문제가 실측으로 확인돼(2026-08-13), 모드를 켜고 단어를 톡톡 눌러 표시하는 방식을 추가함.
PC 드래그+팝업 방식과 공존한다. */
.passage-mark-toolbar {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.passage-mark-toolbar-label { font-size: 12px; color: var(--text-sub); font-weight: 700; }
.passage-mark-mode-btn {
background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px;
padding: 5px 10px; font-size: 12.5px; font-weight: 700; color: var(--text-sub); cursor: pointer;
}
.passage-mark-mode-btn.passage-mark-mode-off { color: var(--text-sub); }
.passage-mark-mode-btn.active {
background: #fdeceb; border-color: #e5484d; color: #e5484d;
}
/* 모드가 켜져있을 때만 단어에 탭 가능한 느낌을 준다 - 평소엔 그냥 읽는 텍스트로 보이게 */
.q-passage.passage-mark-mode-on .passage-word { cursor: pointer; border-radius: 3px; }
.q-passage.passage-mark-mode-on .passage-word:hover { background: #f0f4ff; }
/* ---------- AI팩폭 (오늘의 문제 결과, 2026-08-15) ----------
자동 노출이 아니라 사용자가 직접 버튼을 눌러야만 뜬다 - 그래서 트리거 버튼도 눈에 띄게 강조한다. */
.roast-trigger { margin-top: 20px; }
/* 해설체류 개편(2026-09-12 #03, daily-result) - 점수 카드 축소·만점 축하·리더보드/맞은문제 접힘 */
.daily-reveal-card.compact .result-mascot { width: 44px; height: 44px; }
.daily-reveal-card.compact .daily-reveal-score { font-size: 26px; margin: 2px 0; }
.daily-reveal-card.compact .daily-reveal-sub { font-size: 12.5px; margin-bottom: 8px; }
.daily-reveal-card.compact .daily-reveal-stats { gap: 8px; }
.daily-reveal-card.compact .stat-item { padding: 8px 12px; }
.daily-reveal-card.compact .stat-item .value { font-size: 14px; }
.daily-reveal-card.compact .stat-item .label { font-size: 11px; }
.perfect-card { text-align: center; background: linear-gradient(135deg, #7c5cff, #5a7bff); color: #fff; border: none; }
.perfect-card .pc-emoji { font-size: 38px; margin-bottom: 4px; }
.perfect-card .pc-title { margin: 0 0 6px; font-size: 19px; color: #fff; }
.perfect-card .pc-sub { font-size: 13px; color: #eceafd; margin: 0 0 12px; }
.perfect-card .pc-sub b { color: #ffcf4d; }
.perfect-card .pc-next { background: rgba(255,255,255,.12); border-radius: 12px; padding: 12px 14px; margin-top: 12px; text-align: left; }
.perfect-card .pc-next-title { font-size: 13.5px; font-weight: 800; margin-bottom: 3px; }
.perfect-card .pc-next-sub { font-size: 12px; color: #e3e0fb; margin-bottom: 10px; }
.leaderboard-toggle { cursor: pointer; user-select: none; margin: 0; }
.leaderboard-toggle .lb-arrow { font-size: 13px; color: var(--text-sub); margin-left: 4px; }
.correct-fold-head { cursor: pointer; user-select: none; border: 1px solid var(--border); border-radius: 10px;
padding: 10px 14px; font-size: 13.5px; color: var(--text-sub); margin-top: 12px; }
.correct-fold-head:hover { background: var(--bg); }
/* 팩폭 반노출형(2026-09-11 #05, daily-result) - 점수 직하단 미리보기 박스: 템플릿 2줄 자동 노출 +
3줄째 블러 티저 + "참았던 말 마저 듣기" 버튼. 클릭 시 기존 roast-result(진짜 팩폭 3줄)로 교체. */
.roast-peek { margin: 18px auto 0; max-width: 420px; text-align: left; border: 1.5px solid #ffd9d9;
background: linear-gradient(180deg, #fff6f6, #fff); border-radius: 14px; padding: 14px 16px 12px; }
.roast-peek .rp-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800;
color: #e5484d; margin-bottom: 8px; }
.roast-peek .rp-tag { font-weight: 400; color: #c9a0a0; }
.roast-peek .roast-line { font-size: 14px; line-height: 1.65; margin: 3px 0; font-weight: 600; text-align: left; }
.roast-peek .roast-line-blur { filter: blur(5px); user-select: none; pointer-events: none; }
.roast-peek .roast-btn { display: block; width: 100%; margin-top: 12px; }
.roast-btn {
background: linear-gradient(135deg, #ff6b6b, #e5484d); border: none;
padding: 12px 28px; font-size: 15px; font-weight: 800; border-radius: 999px;
box-shadow: 0 4px 14px rgba(229,72,77,.35);
}
.roast-btn:hover:not(:disabled) { filter: brightness(1.05); }
.roast-loading { margin-top: 20px; padding: 24px 0; }
.roast-loading-spinner { font-size: 36px; animation: roast-pulse 0.8s ease-in-out infinite; }
.roast-loading-text { margin-top: 8px; font-size: 14px; color: var(--text-sub); font-weight: 700; }
@keyframes roast-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.25); opacity: .7; }
}
.roast-result {
margin-top: 20px; padding: 20px 18px; border-radius: 14px; text-align: left;
background: #fff5f5; border: 1.5px solid #ffd4d4;
animation: roast-reveal .35s ease-out;
}
@keyframes roast-reveal {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.roast-line { font-size: 15px; font-weight: 700; line-height: 1.6; color: #1c2333; margin-bottom: 6px; }
.roast-line:last-of-type { margin-bottom: 16px; }
.roast-share-btn { width: 100%; }
/* 나의 대시보드 - 카드 안 목록 행(즐겨찾기/오늘의문제 공통) */
.dash-item-row {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
padding: 12px 0; border-bottom: 1px solid var(--border);
}
.dash-item-row:last-child { border-bottom: none; }
.dash-item-icon { font-size: 18px; }
.dash-item-title { font-weight: 700; font-size: 14.5px; margin-right: auto; }
.dash-item-meta { font-size: 12.5px; color: var(--text-sub); width: 100%; }
.dash-item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-item-actions .btn-outline { font-size: 12.5px; padding: 6px 10px; }
/* D-day 카운트다운 배너(2026-09-15 #03-⑤ - 종목홈 상단, 시험일 설정된 종목만) */
.dday-banner { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #1c1e2b, #34395c);
color: #fff; border-radius: 14px; padding: 13px 18px; margin-bottom: 14px; font-size: 14px; }
.dday-banner .dday-ic { font-size: 18px; }
.dday-banner .dday-text { flex: 1; font-weight: 600; }
.dday-banner .dday-text b { color: #ffcf4d; }
.dday-banner .dday-badge { font-size: 17px; font-weight: 900; letter-spacing: .02em; background: #ffcf4d;
color: #5b4300; border-radius: 999px; padding: 4px 14px; white-space: nowrap; }
@media (max-width: 480px) { .dday-banner { flex-wrap: wrap; } .dday-banner .dday-badge { margin-left: auto; } }
/* 정규 모의고사 접수 배너(2026-09-15 긴급 - 접수 진입점) - 목업 확정 이벤트카드 톤 */
.regular-promo { border-radius: 18px; padding: 20px 18px; color: #fff; margin-bottom: 14px;
background: linear-gradient(135deg, #7c5cff, #5a7bff); }
.regular-promo .rp-flag { display: inline-block; background: #ffcf4d; color: #5b4300; font-size: 11.5px;
font-weight: 800; padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; }
.regular-promo .rp-title { font-size: 19px; font-weight: 800; margin-bottom: 5px; }
.regular-promo .rp-sub { font-size: 13px; color: #eceafd; margin-bottom: 12px; line-height: 1.6; }
.regular-promo .rp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.regular-promo .rp-btn { flex: 1; min-width: 150px; text-align: center; background: #fff; color: #5b5bf0;
border-radius: 12px; padding: 11px 0; font-size: 14px; font-weight: 800; text-decoration: none; }
.regular-promo.compact { padding: 13px 16px; }
.regular-promo.compact .rp-line { font-size: 13px; margin-bottom: 9px; }
.regular-promo.compact .rp-btn { padding: 9px 0; font-size: 13px; }
/* 접수 닉네임 중복 즉시검사 표시(2026-09-15 리허설 결함 ②) */
.nick-check-msg { font-size: 12.5px; font-weight: 700; margin: 6px 2px 0; }
.nick-check-msg.ok { color: #1a9b57; }
.nick-check-msg.bad { color: #e14b4b; }
.nick-auto-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: #f4f3ff; border: 1px solid #ddd9f6; border-radius: 12px; padding: 12px 14px;
font-size: 14px; margin-bottom: 4px; }
.nick-auto-row button { background: #fff; border: 1px solid #c9c4ee; color: #5b5bf0; border-radius: 8px;
padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }