* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
button { font: inherit; }
[hidden] { display: none !important; }
.page { min-height: 100vh; background: #f6f3ea; color: #202c46; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.shell { max-width: 1440px; margin: 0 auto; padding: 0 5vw 56px; }
.header { height: 84px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d9d5ca; }
.wordmark { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; letter-spacing: .02em; }
.mark { display: grid; place-items: center; width: 31px; height: 31px; background: #1d4ab4; color: #fff; border-radius: 50%; font-size: 23px; line-height: 1; }
.headerNote { color: #647087; font-size: 14px; }
.grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); min-height: calc(100vh - 84px); gap: clamp(32px, 5vw, 88px); align-items: center; }
.quizArea { min-width: 0; padding: 38px 0 18px; }
.intro { margin-bottom: 30px; }
.kicker { margin: 0 0 17px; color: #1e4fb7; font-size: 13px; font-weight: 800; letter-spacing: .17em; }
.intro h1, .resultCard h1 { margin: 0; font-size: clamp(35px, 3.7vw, 57px); line-height: 1.18; letter-spacing: -.055em; font-weight: 850; }
.intro h1 em, .resultCard h1 em { color: #e66737; font-style: normal; }
.introText { margin: 18px 0 0; max-width: 34em; color: #5c6779; font-size: 16px; line-height: 1.8; }
.questionCard { max-width: 720px; padding: clamp(24px, 3.2vw, 42px); background: #fffdf8; border: 1px solid #ded8c9; border-radius: 24px; box-shadow: 0 22px 64px rgba(36, 49, 70, .08); }
.progressHead { display: flex; justify-content: space-between; gap: 12px; color: #586982; font-size: 13px; font-weight: 700; }
.progressTrack { height: 6px; margin-top: 12px; background: #e8e8e6; border-radius: 99px; overflow: hidden; }
.progressTrack span { display: block; height: 100%; background: #e66737; border-radius: inherit; transition: width .25s ease; }
.questionCard h2 { margin: 29px 0 21px; font-size: clamp(21px, 2vw, 27px); letter-spacing: -.025em; line-height: 1.45; font-weight: 800; }
.choices { display: grid; gap: 10px; }
.choice { width: 100%; display: flex; align-items: center; gap: 15px; padding: 15px 17px; text-align: left; background: #fff; border: 1.5px solid #d9dedf; border-radius: 13px; color: #2a354b; font-size: 15px; line-height: 1.5; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.choice:hover { border-color: #2b55af; transform: translateY(-1px); }
.choice:focus-visible, .nextButton:focus-visible, .backButton:focus-visible, .restartButton:focus-visible { outline: 3px solid #e66737; outline-offset: 3px; }
.choiceSelected { border-color: #1e4fb7; background: #edf2ff; }
.choiceLetter { flex: 0 0 30px; display: grid; place-items: center; height: 30px; border: 1px solid #cbd5e5; border-radius: 8px; color: #355687; font-size: 13px; font-weight: 800; }
.choiceSelected .choiceLetter { background: #1e4fb7; color: #fff; border-color: #1e4fb7; }
.choiceCheck { margin-left: auto; color: #1e4fb7; font-size: 17px; font-weight: 800; }
.actions { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 26px; }
.backButton, .nextButton, .restartButton { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; border-radius: 99px; font-size: 15px; font-weight: 700; cursor: pointer; }
.backButton { padding: 0 12px; background: transparent; border: 0; color: #365174; }
.backButton:disabled { opacity: .35; cursor: default; }
.nextButton, .restartButton { padding: 0 23px; background: #1e4fb7; border: 1px solid #1e4fb7; color: #fff; box-shadow: 0 8px 20px rgba(30, 79, 183, .19); }
.nextButton:hover:not(:disabled), .restartButton:hover { background: #163e98; }
.nextButton:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.disclaimer { max-width: 720px; margin: 17px 0 0; color: #747d8d; font-size: 12px; line-height: 1.6; }
.visual { align-self: stretch; display: flex; flex-direction: column; min-height: 600px; margin: 30px 0; padding: 22px; border-radius: 20px; background: #1d4ab4; color: #fff; overflow: hidden; }
.visualTop, .visualBottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 800; letter-spacing: .13em; }
.visualTop { padding-bottom: 20px; }
.imageWrap { position: relative; min-height: 420px; flex: 1; overflow: hidden; border-radius: 12px; background: #f3c84e; }
.imageWrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visualBottom { padding-top: 19px; font-size: 14px; letter-spacing: .02em; }
.visualBottom span:last-child { font-size: 26px; line-height: 1; }
.resultCard { max-width: 720px; min-height: 540px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(30px, 4vw, 54px); border: 1px solid #ded8c9; border-radius: 24px; background: #fffdf8; box-shadow: 0 22px 64px rgba(36, 49, 70, .08); }
.resultIcon { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 30px; border-radius: 20px; background: #fff0dc; color: #e66737; font-size: 35px; }
.resultCard h2 { margin: 16px 0 0; font-size: clamp(20px, 2.1vw, 29px); font-weight: 800; }
.resultDescription { max-width: 33em; margin: 19px 0 0; color: #58647a; font-size: 17px; line-height: 1.9; }
.signature { margin-top: 26px; padding: 10px 15px; border-radius: 99px; background: #edf2ff; color: #1e4fb7; font-size: 14px; font-weight: 700; }
.restartButton { margin-top: 38px; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; gap: 0; } .quizArea { padding-top: 42px; } .visual { min-height: 320px; max-height: 420px; margin: 20px 0 0; } .imageWrap { min-height: 245px; } }
@media (max-width: 600px) { .shell { padding: 0 18px 28px; } .header { height: 64px; } .headerNote { font-size: 12px; } .quizArea { padding-top: 30px; } .intro { margin-bottom: 22px; } .introText { margin-top: 12px; font-size: 15px; } .questionCard { padding: 20px; border-radius: 18px; } .questionCard h2 { margin: 23px 0 18px; } .choice { padding: 13px; gap: 11px; font-size: 14px; } .choiceLetter { flex-basis: 27px; height: 27px; } .visual { min-height: 260px; max-height: 320px; padding: 14px; } .visualTop { padding-bottom: 11px; } .visualBottom { padding-top: 10px; } .resultCard { min-height: 490px; padding: 29px 23px; } }
@media (prefers-reduced-motion: reduce) { .choice, .progressTrack span { transition: none; } }