body, html { margin: 0; padding: 0; min-height: 100%; font-family: 'Arial', sans-serif; background: linear-gradient(rgba(245, 247, 250, 0.8), rgba(195, 207, 226, 0.8)), url('sub_bg.jpg'); background-size: cover; background-position: center; background-attachment: fixed; overflow-y: auto; } body { display: flex; flex-direction: column; align-items: center; padding: 20px 0; } .nav-container { position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15); z-index: 1000; padding: 10px 0; } .main-nav { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; } .desktop-menu { display: flex; list-style: none; margin: 0; padding: 0; justify-content: center; align-items: center; height: 70px; } .main-nav li { margin: 0; padding: 0; display: flex; align-items: center; } .logo-item { margin-right: 30px; cursor: pointer; } .nav-logo { height: 60px; vertical-align: middle; cursor: pointer; } .nav-logo:hover { transform: none; } .nav-link { display: block; padding: 20px 28px; color: #333; text-decoration: none; font-weight: bold; transition: all 0.3s ease; position: relative; font-size: 17px; } .nav-link::after { content: ''; position: absolute; width: 0; height: 3px; bottom: 8px; left: 50%; background-color: #0b3a73; transition: all 0.3s ease; transform: translateX(-50%); } .nav-link:hover { color: #0b3a73; } .nav-link:hover::after { width: 70%; } .nav-link.active { color: #0b3a73; } .nav-link.active::after { width: 70%; } .container { background-color: white; padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 30px rgba(11, 58, 115, 0.1); width: 350px; text-align: center; position: relative; overflow: hidden; margin-top: 120px; } .container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(to right, #0b3a73, #4a90e2); } .logo { margin-bottom: 20px; } .logo-image { width: auto; height: 80px; border-radius: 50%; display: block; margin: 0 auto; box-shadow: 0 5px 15px rgba(11, 58, 115, 0.2); object-fit: contain; background-color: #f0f5ff; padding: 10px; } h1 { margin-bottom: 30px; color: #333; font-size: 24px; font-weight: bold; position: relative; display: inline-block; } h1::after { content: ''; position: absolute; width: 50%; height: 3px; bottom: -10px; left: 25%; background-color: #0b3a73; opacity: 0.5; border-radius: 2px; } .form-group { margin-bottom: 20px; text-align: left; } label { display: block; margin-bottom: 8px; color: #555; font-weight: bold; } input, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; transition: border-color 0.3s; } input:focus, select:focus { border-color: #4CAF50; } select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; background-color: white; color: #333; appearance: none; -webkit-appearance: none; -moz-appearance: none; text-align: left; } select option { background-color: white; color: #333; text-align: left; } button { width: 100%; padding: 12px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 18px; transition: background-color 0.3s; } button:hover { background-color: #45a049; } .custom-select { position: relative; width: 100%; } .custom-select input[type="text"] { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; cursor: pointer; background-color: white; font-size: 14px; } .clear-button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #999; font-size: 14px; display: none; } .clear-button:hover { color: #333; } .custom-select.has-value .clear-button { display: block; } .select-items { position: absolute; background-color: white; top: 100%; left: 0; right: 0; z-index: 99; max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 0 0 5px 5px; } .select-hide { display: none; } .select-items div { color: #333; padding: 8px 16px; cursor: pointer; user-select: none; font-size: 14px; } .select-items div:hover { background-color: #f1f1f1; } .selected { background-color: #e6e6e6; } .custom-alert { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 10000; justify-content: center; align-items: center; } .custom-alert.show { display: flex; } .custom-alert-content { background-color: white; border-radius: 10px; padding: 20px; width: 80%; max-width: 400px; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); animation: fadeIn 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .custom-alert-message { margin-bottom: 20px; font-size: 16px; color: #333; } .custom-alert button { padding: 8px 30px; background-color: #0b3a73; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } .custom-alert button:hover { background-color: #092c57; } .button-group { display: flex; gap: 10px; } .button-group button { flex: 1; font-size: 14px; } button[type="submit"] { background-color: #0b3a73; } button[type="submit"]:hover { background-color: #092c57; } #resetButton { background-color: #777; } #resetButton:hover { background-color: #666; } #suneungButton { background-color: #9c27b0; } #suneungButton:hover { background-color: #7b1fa2; } .select-items div strong { font-weight: bold; color: #000; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 9000; } .modal { background-color: white; border-radius: 10px; padding: 20px; width: 90%; max-width: 800px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); max-height: 90vh; overflow-y: auto; position: relative; } .modal-header { position: relative; text-align: center; border-bottom: 2px solid #0b3a73; padding-bottom: 10px; margin-bottom: 20px; } .modal-header h1 { font-size: 24px; color: #0b3a73; margin: 0; padding: 10px 0; } .close-button { background-color: #777; } .close-button:hover { background-color: #666; } .score-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .score-table th, .score-table td { border: 1px solid #ddd; padding: 10px; text-align: center; } .score-table th { background-color: #6a75b3; color: white; } .score-table tr:nth-child(even) { background-color: #f5f5f5; } .score-table tr:nth-child(odd) { background-color: #f9f9f9; } .score-table select, .score-table input { width: 100%; padding: 5px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 14px; font-weight: bold; text-align: left; font-family: 'Arial', sans-serif; color: #333; } .score-table select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3a73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 5px center; background-size: 16px; padding-right: 25px; } .score-table select option:first-child { color: #999; font-weight: normal; } .score-table select option { color: #333; font-weight: normal; } .score-table input::placeholder { color: #999; font-weight: normal; } .notes { font-size: 12px; color: #555; margin-bottom: 20px; line-height: 1.5; } .notes p { margin: 5px 0; } .button-group { display: flex; justify-content: flex-end; gap: 10px; } .submit-button { background-color: #0b3a73; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; } .submit-button:hover { background-color: #092c57; } .close-icon { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-size: 24px; cursor: pointer; color: #0b3a73; } .modal-close-icon { position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; color: #0b3a73; cursor: pointer; z-index: 1001; } .modal-close-icon:hover { color: #092c57; } .percentile-input { width: 100%; text-align: center; font-weight: bold; font-size: 14px; font-family: 'Arial', sans-serif; color: #333; } .percentile-input::-webkit-inner-spin-button, .percentile-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .percentile-input[type=number] { -moz-appearance: textfield; } .jungsi-only { display: inline-block; } .susi-only { display: inline-block; } .common-button { display: inline-block; } .hamburger-menu { display: none; cursor: pointer; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 30px; height: 22px; flex-direction: column; justify-content: space-between; z-index: 1001; } .hamburger-menu span { display: block; height: 3px; width: 100%; background-color: #0b3a73; transition: all 0.3s ease; } .hamburger-menu.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .hamburger-menu.active span:nth-child(2) { opacity: 0; } .hamburger-menu.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } .mobile-menu { display: none; position: absolute; top: 90px; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.98); list-style: none; margin: 0; padding: 0; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); z-index: 1000; } .mobile-menu li { width: 100%; text-align: center; border-bottom: 1px solid #eee; } .mobile-menu li:last-child { border-bottom: none; } .mobile-menu .nav-link { padding: 15px 20px; display: block; width: 100%; box-sizing: border-box; } .mobile-menu.active { display: block; animation: slideDown 0.3s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .desktop-menu li:not(.logo-item) { display: none; } .hamburger-menu { display: flex; } .logo-item { margin-right: 0; } .main-nav { justify-content: space-between; } } .grade-notice { font-size: 0.8rem; color: #777; margin-top: 5px; line-height: 1.4; display: flex; } .notice-symbol { flex-shrink: 0; } .notice-text { padding-left: 3px; } .grade-notice a { color: #5A6BC4; text-decoration: none; font-weight: 500; } .grade-notice a:hover { text-decoration: underline; } .checkbox-cell { text-align: center; vertical-align: middle; width: 80px; min-width: 80px; } .checkbox-label { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; width: 100%; height: 100%; min-height: 40px; } .no-exam-checkbox { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { position: relative; display: inline-block; width: 20px; height: 20px; background-color: #fff; border: 2px solid #ddd; border-radius: 4px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .checkbox-label:hover .checkmark { border-color: #0b3a73; box-shadow: 0 2px 8px rgba(11, 58, 115, 0.2); transform: translateY(-1px); } .no-exam-checkbox:checked + .checkmark { background-color: #0b3a73; border-color: #0b3a73; box-shadow: 0 2px 8px rgba(11, 58, 115, 0.3); } .no-exam-checkbox:checked + .checkmark:after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); animation: checkmarkAppear 0.3s ease; } @keyframes checkmarkAppear { 0% { opacity: 0; transform: rotate(45deg) scale(0); } 50% { transform: rotate(45deg) scale(1.2); } 100% { opacity: 1; transform: rotate(45deg) scale(1); } } .no-exam-checkbox:checked ~ * input, .no-exam-checkbox:checked ~ * select { background-color: #f5f5f5; color: #999; cursor: not-allowed; opacity: 0.6; } .row-disabled input, .row-disabled select { background-color: #f5f5f5 !important; color: #999 !important; cursor: not-allowed !important; opacity: 0.6 !important; pointer-events: none; } .score-table tbody tr:hover { background-color: #f8f9ff; transition: background-color 0.2s ease; } .score-table tbody tr:hover .checkmark { border-color: #0b3a73; } .score-table th:last-child { background-color: #5a6bc4; color: white; font-weight: bold; text-align: center; font-size: 13px; } .score-table tbody tr.has-no-exam { background-color: #f0f0f0; opacity: 0.8; } .score-table tbody tr.has-no-exam td { color: #999; }