main,
.container {
    padding: 11rem var(--space-md) var(--space-xl);
    max-width: 1120px;
    margin: 0 auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-md);
}

.icon {
    width: 2.4rem;
    height: 2.4rem;
    fill: currentColor;
}

.tabs {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.tab {
    flex: 1;
    text-align: center;
    padding: 1.2rem 0;
    background: var(--surface-muted);
    border: var(--pixel-border);
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    transition: transform 140ms ease, box-shadow 140ms ease,
        background-color 140ms ease, color 140ms ease;
    border-radius: var(--radius-sm);
    box-shadow: 0.3rem 0.3rem 0 var(--border-strong);
    min-width: 11rem;
}
.tab.active {
    background: var(--primary-strong);
    color: var(--text-light);
    transform: translate(-0.15rem, -0.15rem);
    box-shadow: 0.4rem 0.4rem 0 var(--border-strong);
    border: var(--pixel-border);
}

.tab:hover {
    transform: translate(-0.12rem, -0.12rem);
    box-shadow: 0.45rem 0.45rem 0 var(--border-strong);
}

.tab:active {
    transform: translate(0.2rem, 0.2rem);
    box-shadow: 0.12rem 0.12rem 0 var(--border-strong);
}
/* Blur titles for disabled sections in Practical model */
/* Generic blur for disabled tabs across all model subjects */
.tabs .tab.practical-disabled {
    filter: blur(8px);
    opacity: 0.2;
    pointer-events: none;
}

/* Generic blur for disabled sections across all model subjects */
section.practical-section-disabled {
    filter: blur(8px);
}

.accordion {
    display: flex;
    flex-direction: column;
}

section {
    display: none;
}
section.active {
    display: block;
    animation: section-enter 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

h2 {
    text-align: center;
    color: var(--text-light);
    margin: 2rem 0 3rem 0;
    font-size: 2.4rem;
    font-weight: 900;
    background: var(--surface);
    padding: 1.4rem 1.6rem;
    border: var(--pixel-border);
    border-left: 0.8rem solid var(--primary);
    border-radius: var(--radius-md);
    box-shadow: 0.4rem 0.4rem 0 var(--border-strong);
}

.grade-container {
    display: flex;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.grade-container > div {
    flex: 1;
    min-width: 280px;
    background: var(--surface);
    border: var(--pixel-border);
    padding: 2rem;
    border-radius: var(--radius-md);
    box-shadow: 0.5rem 0.5rem 0 var(--border-strong);
}
.grade-title {
    background: var(--surface-muted);
    padding: 1rem;
    font-size: 1.8rem;
    font-weight: 900;
    text-align: center;
    color: var(--text-light); /* 크림색 텍스트 */
    margin: -2rem -2rem 2rem -2rem;
    border-bottom: var(--pixel-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 1.5rem;
    table-layout: fixed; /* prevent wide content from expanding container */
}
th,
td {
    padding: 0;
    text-align: left;
    vertical-align: top;
    border-bottom: none;
    font-size: 1.6rem;
    font-weight: 700;
}
th {
    padding-right: 1.5rem;
    color: var(--text-dark);
    min-width: 7rem; /* Ensure header text is fully visible */
    width: 11rem; /* Reduce header column width so inputs can expand */
    white-space: nowrap;
}

td {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Consistent spacing between inputs */
    word-break: break-word; /* ensure long text wraps within cell */
}

.two-col-answers,
td.two-col-answers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.three-col-answers,
td.three-col-answers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

td.one-col-answers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

td.one-col-answers input {
    width: 100%;
    box-sizing: border-box;
}

/* Force one-column layout for model topic sections */
#ethics-quiz-main td.two-col-answers,
#practical-quiz-main td.two-col-answers {
    display: flex;
    flex-direction: column;
}

@media (max-width: 480px) {
    .two-col-answers,
    td.two-col-answers,
    .three-col-answers,
    td.three-col-answers {
        grid-template-columns: 1fr;
    }
}

td input {
    width: 100%;
    padding: 1.2rem;
    font-size: 1.4rem;
    border: var(--pixel-border);
    background: var(--surface-muted);
    color: var(--text-light);
    font-family: 'Noto Sans KR', sans-serif;
    caret-color: var(--primary);
    margin-bottom: 0; /* Removed margin as gap is used now */
    transition: transform 120ms ease, border-color 140ms ease,
        background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
    border-radius: var(--radius-sm);
    box-shadow: 0.3rem 0.3rem 0 var(--border-strong);
}
td input.fit-answer {
    width: auto;
    display: inline-block;
    min-width: 14ch;
}

.curriculum-order-toolbar {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.curriculum-order-toolbar.hidden {
    display: none;
}

.curriculum-order-toolbar button,
.curriculum-order-row-tools button {
    border: 2px solid #000000;
    background: var(--secondary);
    color: var(--text-light);
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 800;
}

.curriculum-order-toolbar button {
    padding: 0.8rem 1rem;
    font-size: 1.3rem;
}

.curriculum-order-row-tools {
    display: none;
}

.curriculum-order-row-tools button {
    align-self: flex-start;
    padding: 0.5rem 0.8rem;
    font-size: 1.1rem;
}

[data-inline-order-editor] {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 1.2rem 1.4rem;
    position: relative;
    overflow: visible;
    padding-bottom: 4.4rem;
}

.curriculum-inline-order-label {
    align-self: start;
    padding-top: 0.7rem;
    white-space: nowrap;
}

.curriculum-inline-order-items {
    display: grid;
    grid-template-columns: repeat(4, minmax(10rem, 1fr));
    gap: 1rem 1.4rem;
    min-width: 0;
}

.curriculum-inline-order-toggle {
    position: absolute;
    left: 1.2rem;
    bottom: 1rem;
    border: 2px solid #000000;
    background: var(--secondary);
    color: var(--text-light);
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    padding: 0.45rem 0.7rem;
}

.curriculum-inline-order-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 0;
    vertical-align: middle;
}

[data-inline-order-editor] .curriculum-inline-order-item input {
    margin: 0;
    width: 100% !important;
    min-width: 0 !important;
}

.curriculum-inline-order-item:not(:last-child)::after {
    content: ',';
    flex: 0 0 auto;
    margin-left: 0.45rem;
}

.curriculum-order-editing .curriculum-inline-order-item {
    cursor: grab;
    outline: 1px dashed rgba(109, 93, 252, 0.45);
    outline-offset: 3px;
}

.curriculum-order-editing .curriculum-inline-order-item:active {
    cursor: grabbing;
}

.curriculum-order-editing
    .curriculum-inline-order-item
    input.curriculum-order-preview {
    border-color: #6d5dfc;
    color: #d7d2ff;
    box-shadow: none;
}

.curriculum-order-item {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.curriculum-order-editing .curriculum-order-item {
    cursor: grab;
}

.curriculum-order-editing .curriculum-order-item:active {
    cursor: grabbing;
}

.curriculum-order-dragging {
    opacity: 0.55;
}

.curriculum-order-item input {
    flex: 1 1 auto;
    min-width: 0;
}

.curriculum-order-editing
    .curriculum-order-item
    input.curriculum-order-preview {
    border-color: #6d5dfc;
    color: #d7d2ff;
    box-shadow: none;
}

.curriculum-order-editing .curriculum-order-item {
    outline: 1px dashed rgba(109, 93, 252, 0.45);
    outline-offset: 3px;
}

.curriculum-order-editing .curriculum-order-row-tools {
    display: flex;
}

/* 홈 프로젝트 파트 빈칸 너비 강제 고정 - 최고 우선순위 */
.home-project-part input,
.home-project-part input.correct,
.home-project-part input.incorrect,
.home-project-part input.retrying,
.home-project-part input.revealed,
.home-project-part input.fit-answer,
.home-project-part input[style] {
    width: 100% !important;
    display: block !important;
}
td input:focus {
    outline: none;
    border-color: var(--text-light);
    background: var(--secondary);
    transform: translate(-0.1rem, -0.1rem);
    box-shadow: 0.3rem 0.3rem 0 var(--border-strong),
        0 0 0 0.3rem rgba(255, 255, 255, 0.24);
}
td input.correct {
    border-color: var(--correct);
    color: var(--correct);
    background: transparent;
    box-shadow: 0.25rem 0.25rem 0 var(--border-strong),
        0 0 0 0.25rem rgba(0, 200, 83, 0.18);
}
td input.incorrect {
    border-color: var(--incorrect);
    color: var(--incorrect);
    background: transparent;
    box-shadow: 0.25rem 0.25rem 0 var(--border-strong),
        0 0 0 0.25rem rgba(239, 68, 68, 0.18);
}
td input.retrying {
    border-color: var(--retrying);
    color: var(--retrying);
    background: transparent;
    animation: retry-breathe 950ms ease-in-out infinite;
}
td input.revealed {
    color: var(--revealed);
    border-color: var(--revealed);
    background: rgba(142, 68, 173, 0.1);
    box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.2);
}

td input.shake {
    animation: dori-dori 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes dori-dori {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-4px);
    }
    75% {
        transform: translateX(4px);
    }
}

td input.correct.correct-pulse {
    animation: answer-lock-pop 520ms cubic-bezier(0.18, 0.9, 0.2, 1.35);
    background: rgba(0, 200, 83, 0.08) !important;
}

@keyframes correct-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0.25rem 0.25rem 0 var(--border-strong),
            0 0 0 rgba(0, 200, 83, 0);
    }
    40% {
        transform: scale(1.03);
        box-shadow: 0.38rem 0.38rem 0 var(--border-strong),
            0 0 18px rgba(0, 200, 83, 0.48);
    }
    100% {
        transform: scale(1);
        box-shadow: 0.25rem 0.25rem 0 var(--border-strong),
            0 0 0 rgba(0, 200, 83, 0);
    }
}

@keyframes answer-lock-pop {
    0% {
        transform: scale(0.96);
    }
    45% {
        transform: scale(1.045);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes retry-breathe {
    0%,
    100% {
        box-shadow: 0.25rem 0.25rem 0 var(--border-strong),
            0 0 0 rgba(255, 159, 28, 0);
    }
    50% {
        box-shadow: 0.25rem 0.25rem 0 var(--border-strong),
            0 0 16px rgba(255, 159, 28, 0.32);
    }
}

@keyframes section-enter {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.992);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

th.sub-area-cell {
    min-width: 22rem;
}

/* Make sub-area inputs styled consistently regardless of container */
input.sub-area-input {
    width: 100%;
    padding: 1.2rem;
    font-size: 1.4rem;
    border: 3px solid var(--accent);
    background: var(--surface-muted);
    color: var(--text-light);
    border-radius: 0;
    font-weight: 600;
    transition: none;
}

/* Universal sub-area input state styles - CRITICAL OVERRIDE */
.sub-area-input.correct,
input.sub-area-input.correct,
th.sub-area-cell .sub-area-input.correct {
    border: 3px solid var(--correct) !important;
    color: var(--correct) !important;
    background: transparent !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18) !important;
}

.sub-area-input.incorrect,
input.sub-area-input.incorrect,
th.sub-area-cell .sub-area-input.incorrect {
    border: 3px solid var(--incorrect) !important;
    color: var(--incorrect) !important;
    background: transparent !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

.sub-area-input.retrying,
input.sub-area-input.retrying,
th.sub-area-cell .sub-area-input.retrying {
    border: 3px solid var(--retrying) !important;
    color: var(--retrying) !important;
    background: transparent !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2) !important;
}

.sub-area-input.revealed,
input.sub-area-input.revealed,
th.sub-area-cell .sub-area-input.revealed {
    border: 3px solid var(--revealed) !important;
    color: var(--revealed) !important;
    background: rgba(34, 211, 238, 0.1) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18) !important;
}

.grade-container table tr:not(:last-child) > * {
    border-bottom: 3px dotted var(--secondary);
    padding-bottom: 1.5rem;
}

/* 영역/역량 주제의 과목 박스에 빨간색 테두리 적용 */
#area-quiz-main .grade-container > div,
#competency-quiz-main .grade-container > div {
    border: 3px solid var(--primary);
}