@charset "UTF-8"; :root { --sky-top: #b3e8ff; --sky-bottom: #dcf5ff; --sea-light: #0a96df; --sea-deep: #0077be; --sea-wave: rgba(255, 255, 255, 0.65); --card-bg: #ffffff; --option-bg: #f8fafc; --option-border: #e5ebf2; --option-hover-bg: #f0f7ff; --primary-blue: #2282dc; --primary-blue-dark: #1668b8; --primary-blue-glow: rgba(34, 130, 220, 0.22); --sun-yellow: #ffd43b; --coral-wrong: #ef5350; --mint-correct: #12b886; --text-strong: #111827; --text-body: #1e293b; --text-muted: #52667a; --text-on-primary: #ffffff; --radius-sheet: 32px; --radius-card: 24px; --radius-pill: 9999px; --shadow-sheet: 0 -10px 30px rgba(0, 60, 115, 0.14); --shadow-option: 0 3px 10px rgba(15, 23, 42, 0.05); --shadow-selected: 0 4px 16px rgba(34, 130, 220, 0.24); --shadow-cta: 0 6px 18px rgba(34, 130, 220, 0.34); --mobile-max-width: 480px; } *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; min-height: 100%; min-height: 100dvh; font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif; font-size: 16px; line-height: 1.5; color: var(--text-strong); background: linear-gradient(180deg, #bcebff 0%, #8fd8ff 100%); background-attachment: fixed; } button, input, select, textarea { font: inherit; touch-action: manipulation; } button { cursor: pointer; border: none; background: none; } button:disabled { cursor: not-allowed; opacity: 0.55; } button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--primary-blue); outline-offset: 2px; } [hidden] { display: none !important; } .wrap, .mobile-app { width: 100%; max-width: var(--mobile-max-width); min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; position: relative; overflow-x: hidden; background: linear-gradient( 180deg, var(--sky-top) 0%, var(--sky-bottom) 24%, var(--sea-light) 24.1%, var(--sea-deep) 56%, #ffffff 56.1% ); box-shadow: 0 0 40px rgba(0, 65, 120, 0.18); } header, .quiz-header { padding: 20px 20px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-bottom: none; background: transparent; z-index: 2; } .brand, .quiz-header-title, .quiz-top h1 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-strong); text-decoration: none; margin: 0; text-align: center; display: inline-flex; align-items: center; gap: 8px; } .brand-icon { display: none; } .brand small { display: none; } .head-right { display: flex; gap: 8px; align-items: center; font-size: 0.78rem; } .date, .chip { background: rgba(255, 255, 255, 0.85); color: var(--primary-blue-dark); font-weight: 700; font-size: 0.78rem; padding: 4px 12px; border-radius: var(--radius-pill); backdrop-filter: blur(4px); } .progress-track { width: 82%; max-width: 340px; height: 11px; background: rgba(255, 255, 255, 0.92); border-radius: var(--radius-pill); overflow: hidden; margin: 10px auto 6px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); } .progress-fill { height: 100%; width: 10%; background: linear-gradient(90deg, #1b74ce 0%, #3997f5 100%); border-radius: var(--radius-pill); transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .progress-counter, #progress-text { display: block; text-align: center; font-size: 1.05rem; font-weight: 800; color: var(--text-strong); letter-spacing: 0.02em; margin: 0 auto 8px; } .illustration-banner, .island-art { position: relative; width: 100%; min-height: 220px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; z-index: 1; } .illustration-banner img, .illustration-banner svg, .island-art svg { width: 100%; height: auto; display: block; object-fit: cover; } .gangchi-mascot { position: absolute; right: 16px; bottom: 12px; width: 130px; height: auto; filter: drop-shadow(0 6px 12px rgba(0, 40, 80, 0.2)); animation: floatMascot 3s ease-in-out infinite; } @keyframes floatMascot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } main { flex: 1; display: flex; flex-direction: column; } .quiz-shell { flex: 1; display: flex; flex-direction: column; width: 100%; padding: 0; margin: 0; } .quiz-layout { flex: 1; display: flex; flex-direction: column; } .question-card, .entry-card, .result-summary { flex: 1; background: var(--card-bg); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; padding: 30px 22px 32px; box-shadow: var(--shadow-sheet); border: none; margin-top: -18px; position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; } .q-meta { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.8rem; font-weight: 700; color: var(--primary-blue); margin-bottom: 6px; } .question-card h2, #question-title { font-size: 1.35rem; font-weight: 800; line-height: 1.42; letter-spacing: -0.03em; color: var(--text-strong); text-align: center; margin: 4px 0 22px; word-break: keep-all; } .options { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-bottom: 22px; } .option, .option-pill { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 14px 22px; background: var(--option-bg); border: 2px solid var(--option-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-option); font-size: 1.05rem; font-weight: 700; color: var(--text-strong); text-align: center; cursor: pointer; transition: all 0.18s ease; user-select: none; } .option:hover, .option-pill:hover { background: var(--option-hover-bg); border-color: #9ec8f3; } .option:active, .option-pill:active { transform: scale(0.985); } .option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .option:has(input:checked), .option.selected, .option-pill.selected { background: #ffffff; border: 2.5px solid var(--primary-blue); color: var(--primary-blue); box-shadow: var(--shadow-selected); font-weight: 800; } .options.ox-mode { flex-direction: row; gap: 14px; } .options.ox-mode .option { flex: 1; min-height: 110px; border-radius: 24px; font-size: 1.6rem; flex-direction: column; gap: 6px; } .quiz-nav { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; } .primary, .btn-next { flex: 1; width: 100%; min-height: 56px; padding: 15px 24px; border-radius: var(--radius-pill); background: linear-gradient(180deg, #2b8be6 0%, #1c76ce 100%); color: var(--text-on-primary); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--shadow-cta); transition: transform 0.15s ease, filter 0.15s ease; } .primary:hover, .btn-next:hover { filter: brightness(1.05); } .primary:active, .btn-next:active { transform: scale(0.985); } .secondary, .btn-prev { min-height: 56px; padding: 14px 18px; border-radius: var(--radius-pill); background: #f1f5f9; color: var(--text-muted); font-size: 0.95rem; font-weight: 700; border: 1.5px solid #e2e8f0; transition: background 0.15s ease; } .secondary:hover, .btn-prev:hover { background: #e2e8f0; } .hero { display: flex; flex-direction: column; padding: 12px 20px 0; text-align: center; } .eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: #0b5394; background: rgba(255, 255, 255, 0.75); padding: 4px 12px; border-radius: var(--radius-pill); margin: 0 auto 8px; } .hero h1 { font-size: 1.75rem; font-weight: 900; line-height: 1.28; letter-spacing: -0.04em; color: var(--text-strong); margin: 6px 0 10px; } .hero h1 em { font-style: normal; color: #0959a8; } .intro { font-size: 0.9rem; color: #1e3a5f; margin: 0 0 12px; line-height: 1.6; } .facts { display: flex; justify-content: center; gap: 14px; font-size: 0.8rem; color: #1e3a5f; margin-bottom: 10px; } .facts b { color: var(--text-strong); font-weight: 800; margin-right: 2px; } .form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } label.field { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text-body); margin-bottom: 14px; text-align: left; } input[type="text"], input[type="number"], select, #student-name { width: 100%; min-height: 48px; padding: 11px 14px; margin-top: 6px; border: 1.5px solid var(--option-border); border-radius: 14px; background: var(--option-bg); color: var(--text-strong); font-size: 0.95rem; font-weight: 600; } input:focus, select:focus { background: #ffffff; border-color: var(--primary-blue); } .privacy { display: flex; align-items: flex-start; gap: 8px; font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; margin: 4px 0 18px; text-align: left; } .privacy input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary-blue); flex-shrink: 0; } .q-sidebar { padding: 14px 20px 20px; background: #ffffff; } .q-sidebar p, .side-note { display: none; } .question-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; } .q-dot { aspect-ratio: 1; border-radius: var(--radius-pill); border: 1.5px solid var(--option-border); background: var(--option-bg); color: var(--text-muted); font-size: 0.75rem; font-weight: 700; padding: 0; } .q-dot.answered { background: #e1f0ff; color: var(--primary-blue); border-color: #9ec8f3; } .q-dot.current { background: var(--primary-blue); color: #ffffff; border-color: var(--primary-blue); } .result { width: 100%; padding: 0; margin: 0; } .score { font-size: 3.6rem; font-weight: 900; color: var(--primary-blue); line-height: 1.2; } .review-title { font-size: 1.1rem; font-weight: 800; margin: 24px 20px 12px; } .review { margin: 0 20px 10px; border: 1.5px solid var(--option-border); border-radius: 16px; background: #ffffff; overflow: hidden; } .review summary { padding: 15px 16px; font-size: 0.92rem; font-weight: 700; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .mark { color: var(--primary-blue); font-weight: 900; } .mark.wrong { color: var(--coral-wrong); } .review-body { padding: 0 16px 16px 38px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; } .notice { margin: 8px 16px 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(34, 130, 220, 0.25); font-size: 0.78rem; color: #1e3a5f; } .error { background: #fff1f2; border: 1px solid #fecdd3; color: #be123c; padding: 12px 14px; border-radius: 14px; font-size: 0.85rem; font-weight: 600; margin: 12px 0; text-align: center; } footer { background: #ffffff; padding: 18px 20px 26px; text-align: center; font-size: 0.75rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #f1f5f9; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } .mobile-app{background:linear-gradient(180deg,#b3e8ff 0,#dcf5ff 145px,#0a96df 330px,#fff 410px);overflow-x:clip} .quiz-header{padding-top:max(18px,env(safe-area-inset-top));gap:8px}.quiz-header-title{line-height:1.35;display:block;font-size:clamp(18px,4.6vw,22px)} #quiz-progress{width:100%}.progress-track{width:88%;margin-top:5px}.progress-fill{width:0}.progress-counter{font-size:18px;margin:5px 0 0}.illustration-banner{min-height:0;height:auto;aspect-ratio:480/260;margin-top:-4px}.illustration-banner img{height:100%;object-fit:contain} .entry-card{margin-top:-14px}.entry-intro{text-align:center}.entry-intro h2{font-size:24px;letter-spacing:-1px;margin:9px 0}.entry-intro .intro{font-size:14px}.entry-intro .facts{margin-bottom:24px} .question-card{justify-content:flex-start;min-height:440px;padding-top:26px}.q-meta{font-size:11px;flex-wrap:wrap;margin-bottom:12px;gap:7px}.q-type{color:#637a90;font-size:10px}.question-card h2{font-size:clamp(19px,4.5vw,22px);margin:3px 0 24px}.option{font-size:16px;gap:7px;min-height:55px}.option-number{font-variant-numeric:tabular-nums}.option:has(input:focus-visible){outline:3px solid #135d9f;outline-offset:3px}.option input:focus-visible{outline:none}.option[aria-disabled=true]{pointer-events:none;opacity:.65}.quiz-nav{padding-top:20px}.quiz-nav .primary{font-size:17px;padding-inline:15px}.quiz-nav .secondary{min-width:70px;padding-inline:13px}.q-sidebar{padding-top:4px;text-align:center}.question-grid{gap:5px}.q-dot{min-height:32px}.text-button{font-size:12px;color:#58718b;text-decoration:underline;padding:16px 5px 0}.short-answer label{font-size:13px;font-weight:700;color:#52667a}.short-answer input{font-size:19px;min-height:60px;text-align:center}.hint{font-size:12px;color:#52667a;line-height:1.7;margin-top:12px}.privacy{font-size:12px}.status-line{font-size:12px;color:#52667a;line-height:1.7;text-align:center;min-height:0;margin-top:9px}.status-line:empty{margin:0}.under-button{font-size:11px;text-align:center;color:#637a90;margin:13px 0 0}.notice{position:relative;z-index:4;text-align:center;font-size:11px;margin-top:0;margin-bottom:9px}.result{background:white}.result-summary{align-items:center;gap:8px;min-height:300px;text-align:center;padding-bottom:25px}.result-summary h2{font-size:26px;margin:5px 0}.result-summary p{font-size:13px;color:#52667a;margin:3px 0}.result-badge{background:#e3f3ff;color:#2282dc;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;font-size:29px;font-weight:900}.score{margin:8px 0}.score small{font-size:20px;margin-left:6px}.saved{font-size:12px;background:#e8f7f1;color:#087957;padding:10px 14px;border-radius:12px;line-height:1.7}.result-summary .sync-note{font-size:11px}.review-title{margin-top:12px}.review-hint{font-size:12px;color:#637a90;margin:0 20px 15px}.review summary{font-size:13px}.review summary:after{content:'+';margin-left:auto;flex-shrink:0}.review[open] summary:after{content:'−'}.review-body p{margin:8px 0}.review-body a{color:#1668b8;font-size:11px}.review-answer{font-weight:700;color:#111827}.result-actions{padding:20px;display:flex;flex-direction:column;gap:18px;text-align:center}.learn-link{font-size:12px;color:#1668b8}.art-note{font-size:10px;color:#7e90a2}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:360px){.question-card,.entry-card{padding-inline:18px}.question-grid{gap:3px}.q-dot{min-height:29px}.option{font-size:15px}.head-right{font-size:11px}.chip{font-size:10px}} .question-panel, .answer-panel { min-width: 0; } .answer-panel { display: flex; flex: 1; flex-direction: column; } .question-guide, .question-art, .answer-heading { display: none; } @media (min-width: 900px) and (orientation: landscape) { .mobile-app { max-width: 1440px; padding: 0 32px; background: linear-gradient(155deg, #c7edff 0%, #eaf8ff 55%, #d6f1ff 100%); box-shadow: none; } .quiz-header { flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: max(20px, env(safe-area-inset-top)) 0 20px; } .quiz-header-title { text-align: left; font-size: 20px; } .head-right { margin-left: auto; } #quiz-progress { width: 180px; display: flex; align-items: center; gap: 12px; } .progress-track { flex: 1; width: auto; margin: 0; height: 9px; } .progress-counter { margin: 0; flex-shrink: 0; font-size: 16px; } .illustration-banner { width: 320px; max-height: 170px; margin: -12px auto 0; } body[data-view="quiz"] .illustration-banner { display: none; } main { width: 100%; } .entry-card { flex: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding: 36px; border-radius: 28px; margin: 0 0 24px; box-shadow: 0 10px 35px #10588412; } .entry-intro h2 { font-size: 30px; } .entry-intro .facts { margin-bottom: 0; } .quiz-layout { gap: 16px; } .question-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); flex: 1; min-height: 460px; padding: 0; margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 12px 40px #10588412; } .question-panel { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 32px 0; background: linear-gradient(165deg, #f4fbff, #e6f5ff); border-right: 1px solid #dcecf6; } .q-meta { justify-content: flex-start; margin: 0 0 18px; gap: 10px; font-size: 13px; } #q-category { background: #d7edff; padding: 6px 12px; border-radius: 999px; } .q-type { font-size: 12px; } .question-card #question-title { text-align: left; font-size: clamp(25px, 2.5vw, 34px); line-height: 1.5; letter-spacing: -.04em; margin: 0 0 16px; overflow-wrap: anywhere; } .question-guide { display: block; font-size: 13px; color: #637a90; margin: 0 0 16px; } .question-art { display: block; width: 100%; max-width: 420px; height: auto; margin: auto auto 0; } .answer-panel { padding: 30px 32px; } .answer-heading { display: block; color: #52667a; font-size: 14px; font-weight: 700; margin: 0 0 18px; } .options { gap: 12px; margin-bottom: 0; } .option { justify-content: flex-start; text-align: left; min-height: 68px; font-size: 18px; padding: 14px 20px; border-radius: 18px; gap: 14px; } .option-number { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; background: #e8eff6; color: #637a90; border-radius: 50%; font-size: 14px; } .option:has(input:checked) { border-width: 2px; background: #eff7ff; } .option:has(input:checked) .option-number { background: var(--primary-blue); color: white; } .options.ox-mode { gap: 16px; } .options.ox-mode .option { min-height: 220px; justify-content: center; font-size: 52px; } .quiz-nav { padding-top: 24px; } .quiz-nav .primary, .quiz-nav .secondary { min-height: 56px; border-radius: 16px; } .q-sidebar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 8px 18px; background: transparent; } .question-grid { gap: 10px; } .q-dot { width: 40px; min-height: 40px; font-size: 14px; background: #ffffffb3; } .text-button { padding: 12px 0; font-size: 13px; } footer { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 8px 20px; background: transparent; padding: 12px 0 18px; border-top: 1px solid #cfe5f1; } .result { background: white; border-radius: 28px; overflow: hidden; margin-bottom: 24px; } .result-summary { margin-top: 0; box-shadow: none; } } @media (min-width: 900px) and (orientation: landscape) and (max-height: 700px) { .quiz-header { padding-block: 12px; } .question-card { min-height: 400px; } .question-panel { padding: 24px 26px 0; } .question-card #question-title { font-size: 26px; } .question-art { max-width: 300px; } .answer-panel { padding: 24px; } .answer-heading { margin-bottom: 12px; } .option { min-height: 60px; padding-block: 10px; } .quiz-nav { padding-top: 18px; } .q-sidebar { padding-bottom: 12px; } .illustration-banner { max-height: 110px; } .entry-card { padding: 28px; } } .entry-ranking-link { display: flex; justify-content: flex-end; margin: 0 0 14px; } .entry-ranking-link a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid #d0e5fb; border-radius: 999px; background: #eff7ff; color: #1668b8; font-size: 12px; font-weight: 700; text-decoration: none; } .entry-ranking-link a:hover { background: #e1f0ff; } body[data-view="home"] > .mobile-app > .illustration-banner { display: none; } .entry-art { display: block; width: 100%; height: auto; margin: 18px auto 24px; border-radius: 22px; } .nickname-field { grid-column: 1 / -1; } @media (min-width: 900px) and (orientation: landscape) { #home-view.entry-card { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding: 0; background: transparent; box-shadow: none; margin: 0 0 20px; } .entry-intro { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 36px; min-height: clamp(300px,42dvh,400px); text-align: left; } .entry-copy { padding-left: 28px; } .entry-intro h2 { font-size: clamp(28px,3vw,40px); margin: 12px 0 16px; } .entry-intro .intro { font-size: 15px; line-height: 1.8; } .entry-intro .facts { justify-content: flex-start; gap: 24px; margin-top: 20px; } .entry-art { width: 100%; max-width: 800px; max-height: 420px; object-fit: contain; margin: 0 auto; border-radius: 26px; } #student-form { display: grid; grid-template-columns: minmax(0,1fr) 260px; align-items: center; column-gap: 26px; padding: 20px 28px; border-radius: 28px; background: white; box-shadow: 0 12px 40px #10588412; } .entry-ranking-link { grid-column: 1 / -1; margin-bottom: 8px; } #student-form .form-row { grid-column: 1 / -1; grid-template-columns: .8fr .8fr .8fr 1.6fr; gap: 16px; } #student-form .nickname-field { grid-column: auto; } #student-form .privacy { margin: 0; } #start-button { grid-column: 2; min-height: 54px; border-radius: 16px; } #student-form .under-button { grid-column: 2; margin: 8px 0 0; } #start-error, #start-status { grid-column: 1 / -1; } } @media (min-width: 900px) and (orientation: landscape) and (max-height: 700px) { .entry-intro { min-height: 280px; } .entry-art { max-height: 300px; } #student-form { padding: 16px 24px; } }