.toeic-page { --study-blue:#1d4ed8; --study-ink:#17233d; --study-muted:#586980; color:var(--study-ink); background:#f6f8fc; font-size:16px; line-height:1.65; }
.toeic-shell { width:min(1140px,calc(100% - 48px)); margin-inline:auto; }
.toeic-skip { position:fixed; left:12px; top:-80px; z-index:50; padding:12px; background:#fff; }.toeic-skip:focus { top:8px; }
.toeic-header { position:relative; background:#fff; border-bottom:1px solid #e0e7f1; backdrop-filter:none; }
.toeic-header nav { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px; }
.toeic-brand { display:flex; align-items:center; gap:12px; text-decoration:none; }.toeic-brand img { width:35px; height:35px; }.toeic-brand strong { font-size:21px; }.toeic-brand span { border-left:1px solid #ccd8eb; padding-left:14px; font-size:14px; color:var(--study-muted); }
.toeic-nav { display:flex; gap:20px; }.toeic-nav a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:650; text-decoration:none; }
.toeic-page :is(button,input,select,textarea,a):focus-visible { outline:3px solid #2563eb; outline-offset:3px; }
.toeic-hero { padding:74px 0 40px; text-align:center; background:radial-gradient(ellipse at 18% 12%,#e4eaff,transparent 55%),radial-gradient(ellipse at 88% 10%,#e4f4f1,transparent 55%),#f6f8fc; }
.toeic-hero h1 { font-size:clamp(36px,5.3vw,60px); line-height:1.2; letter-spacing:-.045em; max-width:none; }
.toeic-lead { font-size:19px; color:var(--study-muted); line-height:1.8; margin:22px auto 26px; }.toeic-lead strong { color:#243f7a; }
.toeic-trust { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 26px; margin:20px 0 28px; font-size:14px; color:#4a5e76; }.toeic-trust span::before { content:'✓'; margin-right:8px; color:#08765a; }
.study-button,.toeic-page button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:9px 19px; border:1px solid #cbd8ec; border-radius:11px; background:#fff; color:#29436a; font-size:15px; font-weight:700; text-decoration:none; cursor:pointer; gap:8px; line-height:1.4; }
.study-button.primary { color:#fff; border-color:var(--study-blue); background:var(--study-blue); }.study-button.quiet { border-color:transparent; background:transparent; }
.study-button:hover,.toeic-page button:hover { border-color:#4673d2; box-shadow:0 3px 12px #1d4ed810; }.study-button:disabled,.toeic-page button:disabled { cursor:default; opacity:.5; box-shadow:none; }
.toeic-hero>.toeic-shell>.study-button { margin:4px; }.hero-stats { display:flex; justify-content:center; gap:56px; margin-top:42px; color:var(--study-muted); font-size:13px; }.hero-stats span { display:grid; }.hero-stats strong { color:#253e69; font-size:28px; line-height:1.4; }
.toeic-main { padding-top:30px; padding-bottom:68px; min-height:48vh; }.catalog-section { margin:28px 0 48px; }.catalog-section h2 { font-size:25px; margin-bottom:22px; letter-spacing:-.02em; }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.form-card { padding:26px; border:1px solid #dce5f1; border-radius:18px; background:#fff; box-shadow:0 8px 25px #20396704; display:flex; align-items:stretch; flex-direction:column; gap:10px; }
.form-card h3,.form-card h2 { font-size:25px; margin:0; }.form-card p { margin:0; color:var(--study-muted); font-size:14px; }.form-card .form-type { color:var(--study-blue); font-size:11px; font-weight:800; letter-spacing:.08em; }.form-card .form-count { color:#304d78; font-weight:650; margin-top:5px; }
.part-progress { display:flex; flex-wrap:wrap; gap:5px; margin:5px 0; }.part-progress span { background:#f1f5fb; color:#4e6280; padding:4px 7px; border-radius:5px; font-size:12px; }.form-card select { width:100%; min-height:46px; padding:8px 12px; border:1px solid #ccd9e9; border-radius:9px; background:#fff; color:#334966; }
.resume-card { display:flex; align-items:center; justify-content:space-between; gap:18px; background:#eaf1ff; border:1px solid #cadcfc; padding:21px 25px; border-radius:16px; font-weight:650; }.local-data { border-top:1px solid #dbe5f1; padding-top:22px; color:var(--study-muted); font-size:14px; }.local-data a { margin-right:18px; }.local-data .text-link { color:#1d4ed8; }
.study-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:15px; }.study-top h1 { margin:0; font-size:30px; max-width:none; line-height:1.35; }.study-top .eyebrow { font-size:11px; margin:0 0 7px; }
.study-metrics { display:flex; flex-wrap:wrap; align-items:center; gap:12px 25px; padding:15px 20px; background:#fff; border:1px solid #e0e7f1; border-radius:12px; font-size:14px; }.study-metrics p { margin:0; }.study-status { color:#25704f; font-size:13px; }.study-note { font-size:13px; color:var(--study-muted); }
.study-error,.storage-warning,.lock-notice { border:1px solid #e5c27b; background:#fffaed; padding:14px 18px; border-radius:10px; color:#765117; }.study-error { border-color:#efb5b5; background:#fff4f3; color:#9d2525; }
.question-map { margin:20px 0; border:1px solid #dce5f1; border-radius:12px; background:#fff; padding:12px 16px; }.question-map summary,.transcript summary { min-height:44px; cursor:pointer; font-weight:650; display:list-item; padding:8px; }.question-navigator { display:flex; flex-wrap:wrap; gap:7px; max-height:265px; overflow:auto; padding:12px 3px; }.toeic-page button.question-dot { min-width:44px; min-height:44px; padding:5px; font-size:13px; border-radius:8px; }.question-dot.answered { background:#e3edff; }.question-dot[aria-current] { outline:2px solid #1d4ed8; outline-offset:1px; }
.study-audio { border:1px solid #d9e3f0; border-radius:14px; background:#eef3fd; padding:17px 22px; margin-bottom:20px; }.study-audio strong { display:block; font-size:14px; margin-bottom:8px; }.study-audio audio { display:block; width:min(100%,650px); height:42px; }.audio-actions { display:flex; gap:8px; margin-top:10px; }.audio-actions button { min-height:44px; font-size:13px; padding:7px 12px; }.audio-status { font-size:13px; color:#50617b; margin:8px 0 0; }
.study-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:25px; align-items:start; }.study-material { padding:26px; border:1px solid #dce5f1; border-radius:15px; background:#fff; }.passage-text { white-space:pre-wrap; overflow-wrap:anywhere; font-size:16px; line-height:1.85; margin:12px 0; }.reading-document+.reading-document { border-top:1px solid #dce5f1; padding-top:20px; margin-top:22px; }.reading-document h3 { margin-top:0; font-size:18px; }.material-hint { margin:0; color:var(--study-muted); }.image-zoom { display:block!important; width:100%; padding:0!important; border:0!important; overflow:hidden; background:transparent!important; }.image-zoom span { display:block; padding:8px; font-size:13px; }.question-image { display:block; width:100%; max-height:460px; object-fit:contain; }.image-dialog { max-width:95vw; max-height:95vh; width:1000px; border:0; border-radius:14px; padding:18px; }.image-dialog img { display:block; max-width:100%; max-height:78vh; margin:15px auto 0; object-fit:contain; }dialog::backdrop { background:#14203c99; }
.question-graphic { margin:10px 0; }.question-graphic figcaption { font-weight:700; margin-bottom:10px; }.table-scroll { overflow-x:auto; }.question-graphic table { border-collapse:collapse; width:100%; font-size:14px; }.question-graphic :is(th,td) { text-align:left; padding:10px; border:1px solid #d4dfef; }.question-graphic th { background:#eaf0fa; }
.question-card { padding:24px; background:#fff; border:1px solid #dce5f1; border-radius:15px; margin-bottom:18px; }.question-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }.question-number { font-size:14px; color:#37537e; font-weight:750; }.toeic-page .flag-button { border:0; background:#f0f4fa; font-size:12px; padding:7px 10px; }.flag-button[aria-pressed=true] { color:#785c12; background:#fff4cd; }
.question-card fieldset { min-width:0; border:0; margin:0; padding:0; }.question-prompt { font-size:17px; font-weight:650; line-height:1.7; margin-bottom:17px; width:100%; white-space:pre-wrap; }.answer-choice { display:flex; align-items:center; gap:10px; border:1px solid #d6dfed; border-radius:10px; min-height:52px; padding:12px; margin-bottom:9px; cursor:pointer; }.answer-choice:has(input:checked) { border-color:#4777d7; background:#edf3ff; }.answer-choice input { width:18px; height:18px; accent-color:#1d4ed8; margin:0; flex-shrink:0; }.choice-key { font-weight:750; color:#405879; }.choice-copy { font-size:15px; flex:1; overflow-wrap:anywhere; }.answer-choice.correct-choice { border-color:#73b69d; background:#eef9f3; }.answer-choice.wrong-choice { border-color:#d5a09d; background:#fff4f3; }.choice-outcome { color:#386b56; font-size:11px; font-weight:700; flex-shrink:0; }.wrong-choice .choice-outcome { color:#9b3a35; }.answer-review { border-top:1px solid #dce7e1; padding-top:12px; margin-top:16px; }.answer-review h3 { font-size:16px; color:#215c44; }.answer-review .passage-text { font-size:15px; }.learning-focus { border-radius:7px; background:#edf3ff; padding:10px 12px; font-size:13px; color:#345781; }.transcript { background:#edf2fa; border-radius:10px; padding:8px 15px; margin:20px 0; }.transcript p { font-size:15px; }
.study-bottom { display:flex; gap:12px; justify-content:flex-end; margin-top:25px; padding:18px 0; }.study-bottom button:first-child { margin-right:auto; }.submit-dialog { max-width:480px; width:calc(100% - 40px); border:0; border-radius:18px; padding:28px; box-shadow:0 18px 60px #14203c30; }.submit-dialog h2 { font-size:22px; }.submit-dialog button { margin:12px 7px 0 0; }
.result-panel { border:1px solid #cddbf4; background:#fff; border-radius:18px; margin-top:24px; padding:28px; }.result-panel h2 { margin:0 0 24px; font-size:26px; }.result-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }.result-metrics>div { display:flex; flex-direction:column; padding:15px; background:#f1f5fc; border-radius:10px; }.result-metrics strong { font-size:22px; }.result-metrics span { font-size:13px; color:var(--study-muted); }.part-results { display:flex; flex-wrap:wrap; gap:10px; font-size:13px; }.part-results span { border:1px solid #dce5f1; border-radius:8px; padding:8px 12px; }.result-app { padding-top:18px; margin-top:20px; border-top:1px solid #dce5f1; }.result-app p { font-size:15px; }.review-filter { display:flex; gap:10px; align-items:center; min-height:46px; margin-top:20px; }.review-filter input { width:20px; height:20px; accent-color:#1d4ed8; }
.app-intro,.toeic-prose { max-width:850px; margin:25px auto; padding:45px; background:#fff; border:1px solid #dce5f1; border-radius:20px; }.app-intro h1,.toeic-prose h1 { font-size:clamp(30px,4vw,44px); margin:0; line-height:1.3; }.app-english { color:#4b6ba6; font-size:17px; letter-spacing:.03em; }.app-launch-status { display:inline-block; padding:13px 20px; border-radius:12px; color:#71521e; background:#fff7e7; border:1px solid #ecd6aa; }.app-facts { display:grid; gap:18px; margin:30px 0; }.app-facts section { background:#f3f6fc; padding:20px; border-radius:12px; }.app-facts p { margin:6px 0 0; font-size:15px; color:var(--study-muted); }.app-download { display:flex; align-items:center; gap:35px; margin:25px 0; }.download-qr { text-align:center; font-size:12px; }.download-qr img { width:184px; height:184px; }.toeic-prose h2 { margin-top:28px; font-size:21px; }
.toeic-footer { border-top:1px solid #dce5f1; padding:28px 0; color:var(--study-muted); font-size:13px; }.toeic-footer .toeic-shell { display:block; }.toeic-footer p { max-width:800px; margin:10px 0; }
@media(max-width:900px) { .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.study-columns { gap:16px; }.question-card,.study-material { padding:18px; }.toeic-brand span { display:none; } }
@media(max-width:680px) { .toeic-shell { width:calc(100% - 28px); }.toeic-header nav { min-height:66px; gap:12px; }.toeic-nav { gap:12px; }.toeic-nav a { font-size:12px; }.toeic-brand { gap:7px; }.toeic-brand img { width:28px; height:28px; }.toeic-brand strong { font-size:17px; }.toeic-hero { padding:45px 0 30px; }.toeic-lead { font-size:16px; }.toeic-trust { gap:8px 16px; font-size:12px; }.hero-stats { gap:45px; margin-top:26px; }.form-grid { grid-template-columns:1fr; }.form-card { padding:23px; }.catalog-section h2 { font-size:22px; }.resume-card { align-items:stretch; flex-direction:column; }.study-top { align-items:flex-start; }.study-top h1 { font-size:23px; }.study-top>.study-button { font-size:12px; padding:8px; }.study-columns { grid-template-columns:1fr; }.study-main { padding-top:20px; }.study-metrics { gap:8px 18px; padding:12px; }.study-audio { padding:14px; }.study-bottom { position:sticky; bottom:0; background:#f6f8fcef; backdrop-filter:blur(8px); border-top:1px solid #d4def0; padding:12px 0 calc(12px + env(safe-area-inset-bottom)); gap:8px; }.study-bottom button { padding:10px; font-size:13px; }.result-metrics { grid-template-columns:repeat(2,1fr); gap:10px; }.result-panel { padding:20px; }.result-panel h2 { font-size:22px; }.app-intro,.toeic-prose { padding:25px 20px; margin:10px 0; }.download-qr { display:none; }.passage-text { font-size:16px; }.toeic-footer { padding-bottom:30px; } }
@media(prefers-reduced-motion:no-preference) { .study-button,.answer-choice { transition:background-color .15s,border-color .15s; } }

.toeic-home-teaser { padding:54px 0; background:#edf3ff; border-block:1px solid #dbe5f5; }.toeic-home-teaser h2 { font-size:clamp(26px,3vw,36px); margin:0 0 16px; color:#17233d; }.toeic-home-teaser p:not(.eyebrow) { color:#4c6280; max-width:760px; line-height:1.8; }.toeic-home-teaser .study-button { margin:8px 10px 0 0; }

.toeic-header .toeic-brand { display:flex; }.toeic-app-identity { display:flex; align-items:center; justify-content:center; gap:13px; margin:0 auto 28px; text-align:left; color:#4d6585; font-size:12px; line-height:1.7; }.toeic-app-identity img,.app-main-icon,.teaser-app-icon,.result-app-icon { border-radius:22%; border:1px solid #d2dfed; box-shadow:0 5px 16px #1b3e6020; object-fit:contain; }.toeic-app-identity strong { font-size:15px; color:#243a60; }.app-main-icon { display:block; margin-bottom:25px; }.teaser-app-icon { display:block; margin-bottom:18px; }.result-app-icon { width:52px; height:52px; float:left; margin:3px 14px 10px 0; }

.study-columns.single-column { grid-template-columns:minmax(0,840px); justify-content:center; }.form-card .explanation-reminder { color:#215d4d; font-size:13px; background:#eef8f3; padding:8px 10px; border-radius:7px; }

.question-heading { flex-wrap:wrap; }.question-heading .question-number { margin-right:auto; }.question-feedback { font-size:12px; padding:7px 10px; }
.toeic-nav { flex-wrap:wrap; }.toeic-footer a { display:inline-flex; align-items:center; min-height:44px; margin-right:20px; }
.feedback-notice { margin:24px 0; padding:18px 20px; border:1px solid #cadcfc; border-radius:12px; background:#edf3ff; color:#29436a; }.feedback-notice p { margin:8px 0 0; font-size:14px; }
.feedback-form { display:grid; gap:22px; margin:28px 0; }.feedback-form label { display:grid; align-content:start; gap:8px; font-weight:650; }.feedback-form .study-note { font-weight:400; margin:0; }.feedback-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.feedback-form :is(input,select,textarea) { box-sizing:border-box; width:100%; min-height:46px; padding:10px 12px; border:1px solid #bccde4; border-radius:9px; background:#fff; color:var(--study-ink); font:inherit; font-weight:400; }.feedback-form textarea { min-height:180px; resize:vertical; }.feedback-form .study-button { justify-self:start; max-width:100%; }
@media(max-width:680px) { .toeic-header nav { flex-wrap:wrap; padding-block:8px; }.toeic-nav { gap:4px 12px; }.feedback-fields { grid-template-columns:1fr; } }

/* Submission status remains on-page; hidden controls must not inherit button display. */
.feedback-form [hidden], .feedback-honey { display: none !important; }
.feedback-status { overflow-wrap: anywhere; }

.toeic-locale { display:grid; gap:4px; min-width:130px; color:var(--study-muted); font-size:12px; font-weight:600; }
.toeic-locale select { box-sizing:border-box; min-height:44px; max-width:170px; padding:8px 10px; border:1px solid #bccde4; border-radius:9px; color:var(--study-ink); background:#fff; font:inherit; font-size:14px; }
.toeic-header .toeic-brand { flex-shrink:0; }
.app-intro>.study-button { margin:6px 10px 6px 0; }
@media(max-width:680px) { .toeic-locale { margin-left:auto; }.toeic-nav { order:3; flex-basis:100%; justify-content:space-between; }.toeic-nav a { font-size:13px; }.toeic-locale select { max-width:150px; } }