@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');

:root {
    color-scheme: light;
    font-family: 'Gowun Batang', serif;
    color: #171717;
    background: #f3f4f6;
}

* { box-sizing: border-box; }
body { margin: 0; padding: 20px; }
button, input, textarea { font: inherit; }

.site-home-button { position: fixed; z-index: 900; top: 18px; left: 18px; display: grid; width: 42px; height: 42px; padding: 5px; border: 1px solid #c9c9c9; border-radius: 6px; background: rgba(255,255,255,0.95); place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.site-home-button img { display: block; width: 26px; height: 26px; object-fit: contain; }
.site-home-button:hover { border-color: #111; background: #fff; }
.home-confirmation { position: fixed; z-index: 3000; inset: 0; display: grid; padding: 20px; background: rgba(0,0,0,0.55); place-items: center; }
.home-confirmation[hidden] { display: none; }
.home-confirmation-box { width: min(360px, 100%); padding: 28px; border: 1px solid #333; background: #fff; text-align: center; box-shadow: 0 12px 36px rgba(0,0,0,0.3); }
.home-confirmation-box p { margin: 0 0 24px; font-size: 18px; font-weight: 700; white-space: pre-line; }
.home-confirmation-actions { display: flex; justify-content: center; gap: 12px; }
.home-confirmation-actions .button { min-width: 100px; }

.admin-shell { width: min(1100px, 100%); min-height: 900px; margin: 0 auto; padding: 40px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.admin-header { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 28px; text-align: center; }
.admin-brand { display: inline-flex; align-items: center; justify-content: center; gap: 20px; color: #171717; text-decoration: none; }
.admin-brand img { width: 104px; height: 104px; object-fit: contain; }
.admin-brand-copy { display: flex; width: 196px; flex-direction: column; align-items: stretch; text-align: center; line-height: 1.1; }
.admin-acronym { display: block; width: 100%; font-family: 'Gowun Batang', serif; font-size: 68px; font-weight: bold; line-height: 0.95; letter-spacing: 0; text-align: center; white-space: nowrap; }
.admin-acronym span { display: inline; }
.admin-english { width: 100%; margin-top: 7px; font-family: Arial, sans-serif; font-size: 7.36px; line-height: 1; letter-spacing: 0; text-align: center; white-space: nowrap; }
.admin-korean { width: 100%; margin-top: 8px; font-family: 'Gowun Batang', serif; font-size: 19px; font-weight: 700; line-height: 1.1; letter-spacing: 0; text-align: center; white-space: nowrap; }
.admin-thick-line { width: 100%; border: 0; border-top: 3px solid #000; border-bottom: 1px solid #000; height: 3px; }
.admin-credits { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin: 0; font-size: 13px; color: #555; }

.panel, .question-card, .editor-toolbar { background: #fff; border: 1px solid #d8d8d8; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.05); }
.login-panel { width: min(440px, 100%); margin: 80px auto 0; padding: 32px; }
.login-panel h2 { margin-top: 0; }
.login-panel form { display: grid; gap: 18px; margin-top: 24px; }
label { display: grid; gap: 7px; font-size: 14px; font-weight: 700; }
input, textarea { width: 100%; border: 1px solid #bbb; border-radius: 6px; padding: 10px 12px; background: #fff; }
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus { outline: 3px solid rgba(37,99,235,0.16); border-color: #2563eb; }

.button { border: 1px solid #aaa; border-radius: 6px; padding: 9px 14px; background: #fff; color: #222; cursor: pointer; font-weight: 700; }
.button:hover { background: #f2f2f2; }
.button:disabled { opacity: 0.55; cursor: wait; }
.button.primary { border-color: #111827; background: #111827; color: #fff; }
.button.primary:hover { background: #374151; }
.button.danger { border-color: #b91c1c; color: #b91c1c; }
.button.small { padding: 6px 9px; font-size: 12px; }

.editor-toolbar { position: sticky; z-index: 10; top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; margin-bottom: 18px; }
#save-state { margin-left: 10px; color: #777; font-size: 13px; }
#save-state.dirty { color: #b91c1c; font-weight: 700; }
.save-state { margin-left: 10px; color: #777; font-size: 13px; }
.save-state.dirty { color: #b91c1c; font-weight: 700; }
.operations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }
.operations-panel { padding: 22px; }
.notice-panel { grid-column: 1 / -1; }
.operations-panel h2 { margin-top: 0; font-size: 20px; }
.operations-panel p { color: #666; font-family: 'Noto Sans KR', sans-serif; font-size: 13px; line-height: 1.6; }
.grade-settings-list { display: grid; gap: 10px; margin-bottom: 12px; }
.grade-setting-row { display: grid; grid-template-columns: 1fr 120px; align-items: end; gap: 10px; }
.grade-setting-row label { font-size: 12px; }
.grade-cutoff { padding: 10px 8px; color: #555; font-family: 'Noto Sans KR', sans-serif; font-size: 12px; text-align: right; white-space: nowrap; }
.operations-panel > .button.primary { margin-top: 16px; }
.roster-input { min-height: 220px; margin-bottom: 12px; font-family: 'Noto Sans KR', sans-serif; }
.exam-notice-input { min-height: 140px; font-family: 'Noto Sans KR', sans-serif; line-height: 1.7; }
.toolbar-actions, .card-actions, .option-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.help-button { display: grid; flex: 0 0 38px; width: 38px; min-width: 38px; max-width: 38px; height: 38px; min-height: 38px; max-height: 38px; padding: 0; border-radius: 50%; place-items: center; font-family: Georgia, serif; font-size: 18px; font-weight: 700; font-style: italic; line-height: 1; }
.question-list { display: grid; gap: 18px; }
.question-card { padding: 22px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #e5e7eb; }
.card-header h2 { margin: 0; font-size: 20px; }
.field-grid { display: grid; grid-template-columns: 130px 1fr; gap: 16px; margin-bottom: 18px; }
.field-grid label:nth-child(n+3) { grid-column: 1 / -1; }
.passage-input { min-height: 180px; }
.passage-editor { display: grid; gap: 8px; }
.shared-passage-editor, .shared-passage-content { display: grid; gap: 10px; }
.shared-passage-content { margin-top: 4px; padding: 14px; border: 1px solid #d1d5db; border-radius: 8px; background: #f8fafc; }
.shared-passage-content[hidden] { display: none; }
.shared-passage-content > strong { font-size: 13px; }
.shared-question-input { min-height: 90px; }
.passage-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.table-editor, .view-editor { display: grid; gap: 10px; }
.table-editor > .button { justify-self: start; }
.question-table-editor { display: grid; gap: 8px; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; background: #f8fafc; }
.table-editor-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.table-editor-header strong { color: #166534; font-family: 'Noto Sans KR', sans-serif; font-size: 13px; }
.table-editor-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.table-input { min-height: 130px; font-family: 'Noto Sans KR', sans-serif; }
.view-input { min-height: 130px; }
.view-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.view-toggle input { width: 18px; height: 18px; margin: 0; accent-color: #166534; }
.view-input[hidden] { display: none; }
.image-attachment-editor { display: grid; gap: 10px; }
.image-path-text { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 6px; background: #f8fafc; color: #4b5563; font-family: 'Noto Sans KR', sans-serif; font-size: 13px; overflow-wrap: anywhere; }
.image-attachment-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.question-image-list { display: grid; gap: 10px; }
.question-image-item { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid #d1d5db; border-radius: 8px; background: #f8fafc; }
.question-image-item .image-preview { width: 110px; height: 80px; max-width: none; max-height: none; margin: 0; object-fit: contain; background: #fff; }
.question-image-details { display: grid; min-width: 0; gap: 5px; font-family: 'Noto Sans KR', sans-serif; font-size: 13px; }
.question-image-details strong { color: #166534; }
.question-image-details span { overflow-wrap: anywhere; }
.image-width-field { display: flex; align-items: center; grid-template-columns: none; gap: 8px; font-size: 12px; font-weight: 500; }
.image-width-field input { width: 100px; padding: 6px 8px; }
.image-item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.format-hint { color: #666; font-size: 12px; font-weight: 400; }
.options-heading { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.options-heading h3 { margin: 0; font-size: 16px; }
.option-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; margin-bottom: 9px; }
.option-row input[type='radio'] { width: 18px; height: 18px; accent-color: #166534; }
.correct-hint { color: #166534; font-size: 12px; font-weight: 700; }
.image-preview { display: block; max-width: 260px; max-height: 160px; margin-top: 10px; border: 1px solid #ddd; }
.empty-state { padding: 60px 20px; text-align: center; color: #666; }
.notice { position: fixed; right: 24px; bottom: 24px; max-width: 420px; padding: 14px 18px; border-radius: 8px; background: #166534; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.notice.error { background: #b91c1c; }
.preview-modal { position: fixed; z-index: 2000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,0.82); }
.preview-modal[hidden] { display: none; }
.preview-window { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(900px, 100%); height: min(88vh, 820px); overflow: hidden; border: 1px solid #555; background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.preview-header, .preview-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #ccc; background: #f7f7f7; }
.preview-navigation { border-top: 1px solid #ccc; border-bottom: 0; }
.preview-content { display: grid; grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); min-height: 0; gap: 12px; padding: 14px; }
.preview-question, .preview-options { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border: 1px solid #bbb; padding: 20px; }
.preview-question-title { margin-bottom: 18px; font-size: 17px; font-weight: 700; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; }
.preview-shared-box { margin-bottom: 26px; padding: 18px; border: 1px solid #777; border-radius: 8px; background: #fff; }
.preview-shared-title { margin-bottom: 14px; font-size: 17px; font-weight: 700; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; }
.preview-shared-passage { margin: 0; }
.preview-passage { font-size: 16px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; }
.preview-table-wrap { max-width: 100%; margin: 18px 0 24px; overflow-x: auto; }
.preview-table-wrap table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.preview-table-wrap th, .preview-table-wrap td { min-width: 76px; padding: 8px 10px; border: 1px solid #333; text-align: center; white-space: pre-wrap; }
.preview-table-wrap th { background: #f5f5f5; }
.preview-view-box { margin: 20px 0 24px; padding: 0 18px 16px; border: 1px solid #333; font-size: 16px; line-height: 1.85; }
.view-box-title { margin: -1px auto 10px; padding: 0 12px; text-align: center; font-weight: 700; }
.view-box-content { white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; }
.preview-image { display: block; width: 100%; max-width: 100%; height: auto; margin: 18px auto; border: 1px solid #ccc; }
.preview-options { display: flex; flex-direction: column; gap: 10px; background: #fafafa; }
.preview-option { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.7; }
.preview-option input { width: 18px; margin-top: 4px; flex: 0 0 auto; }
.preview-option.correct { color: #166534; font-weight: 700; }
.preview-correct-label { margin-left: 6px; font-size: 12px; }
body.preview-open { overflow: hidden; }
body.help-open { overflow: hidden; }
.help-modal { position: fixed; z-index: 2100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,0.72); }
.help-modal[hidden] { display: none; }
.help-window { width: min(760px, 100%); max-height: min(88vh, 820px); overflow-y: auto; border: 1px solid #555; border-radius: 10px; background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
.help-header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #ddd; background: #fff; }
.help-header h2 { margin: 0; font-size: 21px; }
.help-content { display: grid; gap: 0; margin: 0; padding: 8px 20px 24px; }
.help-content > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid #e5e7eb; }
.help-content > div:last-child { border-bottom: 0; }
.help-content dt { font-weight: 700; }
.help-content dd { margin: 0; color: #333; line-height: 1.75; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; }
.help-content code { color: #166534; font-family: Consolas, monospace; font-weight: 700; }

@media (max-width: 720px) {
    body { padding: 0; }
    .site-home-button { top: 10px; left: 10px; }
    .admin-shell { min-height: 100vh; padding: 24px 18px; }
    .editor-toolbar { align-items: stretch; flex-direction: column; }
    .admin-brand { gap: 12px; }
    .admin-brand img { width: 78px; height: 78px; }
    .admin-brand-copy { width: 153px; }
    .admin-acronym { font-size: 53px; }
    .admin-english { margin-top: 5px; font-size: 5.75px; }
    .admin-korean { margin-top: 6px; font-size: 15px; }
    .operations-grid { grid-template-columns: 1fr; }
    .toolbar-actions .button { flex: 1; }
    .toolbar-actions .help-button { flex: 0 0 38px; }
    .field-grid { grid-template-columns: 1fr; }
    .card-header { align-items: flex-start; flex-direction: column; }
    .option-row { grid-template-columns: 26px 1fr; }
    .option-row .button { grid-column: 2; justify-self: end; }
    .question-image-item { grid-template-columns: 76px 1fr; }
    .question-image-item .image-preview { width: 76px; height: 64px; }
    .image-item-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .preview-modal { padding: 0; }
    .help-modal { padding: 0; }
    .help-window { width: 100%; max-height: 100vh; min-height: 100vh; border: 0; border-radius: 0; }
    .help-content > div { grid-template-columns: 1fr; gap: 6px; }
    .preview-window { width: 100%; height: 100vh; }
    .preview-content { gap: 8px; padding: 8px; }
    .preview-question, .preview-options { padding: 14px; }
}