/* CSS로 부모 컨테이너 폭을 억지로 뚫고 나가면(vw 기반 breakout) 테마마다
   헤더/페이지 제목 박스의 폭 계산 방식이 달라서 서로 어긋나는 문제가 생깁니다
   (예: GeneratePress는 페이지 제목 영역과 본문 영역의 폭 기준이 다름).
   그래서 breakout은 사용하지 않고, 그냥 부모 컨테이너 안에서 최대한 넓게(100%) 채웁니다.
   본문 자체를 더 넓히고 싶다면 테마(GeneratePress)의 자체 폭 설정을 사용하세요:
   외모 → 사용자 정의하기 → 레이아웃 → 콘텐츠 너비를 늘리거나,
   해당 페이지 편집 화면의 "페이지 속성" 박스에서 사이드바 없는 레이아웃을 선택하면
   테마가 페이지 제목 박스와 본문 폭을 동일한 기준으로 같이 넓혀줘서 어긋나지 않습니다. */
.etp-widewrap {
    width: 100%;
}
.etp-widewrap-inner {
    width: 100%;
    box-sizing: border-box;
}

.etp-exam-list {
    max-width: 100%;
}
.etp-exam-list .etp-round-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.etp-round-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    background: #f5f6f8;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    text-decoration: none;
    color: #1a1a1a;
    transition: border-color 0.15s, background 0.15s;
}
.etp-round-card:hover {
    background: #eef3ff;
    border-color: #2d6cdf;
}
.etp-round-card-title {
    font-weight: 700;
    font-size: 15px;
}
.etp-round-card-meta {
    font-size: 13px;
    color: #666;
}

.etp-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}
.etp-back-link {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 14px;
    color: #2d6cdf;
    text-decoration: none;
}
.etp-back-link:hover {
    text-decoration: underline;
}

.etp-quiz-form {
    max-width: 100%;
}


.etp-exam-page {
    padding-bottom: 40px;
    margin-bottom: 40px;
}
.etp-exam-page:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}
.etp-page-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    color: #999;
    font-size: 12px;
    letter-spacing: 0.5px;
}
.etp-page-footer::before,
.etp-page-footer::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #ccc;
}
.etp-exam-page:last-of-type .etp-page-footer {
    display: none;
}

/* 실제 시험지처럼 왼쪽 컬럼을 다 채운 뒤 오른쪽 컬럼으로 이어지는 2단 레이아웃 (페이지 단위) */
.etp-questions-columns {
    column-count: 2;
    column-gap: 36px;
    column-rule: 1px solid #ddd; /* 시험지 가운데 구분선 느낌 */
}
@media (max-width: 780px) {
    .etp-questions-columns {
        column-count: 1;
        column-rule: none;
    }
}

.etp-question {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
    break-inside: avoid; /* 문제가 컬럼 경계에서 잘리지 않도록 */
    -webkit-column-break-inside: avoid;
    display: inline-block;
    width: 100%;
}
.etp-q-title {
    font-size: 16px;
    margin-bottom: 8px;
}
.etp-q-number {
    font-weight: 700;
}
.etp-q-body p {
    margin: 0 0 10px;
}
.etp-q-body p:first-child {
    display: inline;
}
.etp-box {
    border: 1px solid #999;
    border-radius: 2px;
    padding: 10px 14px;
    margin: 8px 0 12px;
    background: #fafafa;
}
.etp-box-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.etp-box-list li {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.etp-q-body {
    margin-bottom: 12px;
}
.etp-q-body img {
    max-width: 100%;
    height: auto;
}
.etp-choices {
    list-style: none;
    margin: 0;
    padding: 0;
}
.etp-choices li {
    margin-bottom: 6px;
}
.etp-choices label {
    display: block;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
}
.etp-choices label:hover {
    background: #f7f7f7;
}
.etp-choice-mark {
    display: inline-block;
    width: 20px;
    font-weight: 700;
    color: #333;
}
.etp-choices label.etp-correct-choice {
    background: #e6f7ec;
    color: #1e7e34;
    font-weight: 600;
}
.etp-choices label.etp-wrong-choice {
    background: #fdeaea;
    color: #c0392b;
    font-weight: 600;
}
.etp-result {
    margin-top: 10px;
}
.etp-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
}
.etp-badge-correct {
    background: #1e7e34;
    color: #fff;
}
.etp-badge-wrong {
    background: #c0392b;
    color: #fff;
}
.etp-explanation {
    margin-top: 6px;
    font-size: 14px;
    color: #555;
}
.etp-submit-btn {
    display: block;
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: #2d6cdf;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.etp-submit-btn:hover {
    background: #245bc0;
}
.etp-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.etp-final-score {
    margin-top: 16px;
    padding: 16px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    background: #f0f4ff;
    border-radius: 6px;
}
.etp-retry-btn {
    margin-top: 12px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    color: #2d6cdf;
    background: #fff;
    border: 1px solid #2d6cdf;
    border-radius: 6px;
    cursor: pointer;
}
.etp-retry-btn:hover {
    background: #eef3ff;
}