.wrapper{display:grid;grid-template-columns:20% 80%}
.wrap{padding: 25px 45px;display:flex;flex-direction:column;height:100vh;justify-content:space-between;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#form1 .list{display:block}
.contentMain{overflow-y:auto;height:100%;}
.cidGrid{display:grid;gap:24px;grid-template-columns:repeat(4,1fr)}
.cidCard{text-align:left;border:2px solid #e9eef3;border-radius:18px;background:#fff;padding:22px 22px 18px;cursor:pointer;position:relative;box-shadow:0 8px 18px rgba(16,24,40,.06);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.cidCard:hover{transform:translateY(-1px);border-color:#d7e3ee;box-shadow:0 12px 26px rgba(16,24,40,.10)}
.cidIcon{width:54px;height:54px;border-radius:15px;background:#f2f3f6;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.cidCard.active .cidIcon{background:var(--primary)}
.cidIcon svg{stroke:#555}
.cidCard.active .cidIcon svg{stroke:#ffffff}
.cidTitle{margin:0 0 8px;font-size:20px;line-height:1.25;letter-spacing:.02em;color:#2a2a2c;font-weight:600}
.cidDesc{margin:0 0 16px;font-size:13px;line-height:1.6;color:#64748b;min-height:20px}
.cidMeta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;color:#94a3b8;font-size:12px}
.cidMetaItem{display:flex;align-items:center;gap:5px;white-space:nowrap;color:#94A3B8;font-weight:400;font-size:12px}
.cidMetaItem svg{width:15px;height:15px;color:#94A3B8}
.cidMetaItem b{color:#94A3B8;font-weight:400;font-size:12px}
.cidMetaItem .dot{width:18px;height:18px;border-radius:999px;border:1px solid #e2e8f0;display:inline-block}
.cidCard.active{border-color:var(--primary);box-shadow:0 14px 30px rgb(243 152 0 / 18%)}
#form1 p.send_box{margin: 60px 0 10px;width: 100%;}
#form1 p.send_box a{display:block;background:#0f1425;padding:12px 0;border-radius:12px}
#form1 p.send_box a font{color: white;}

/* epaperstarts */
.epaperstarts{border: 1px solid #dedddd;border-radius: 8px;height: auto;}
.epaperstarts #sideNav h1{font-size: 18px;}
.epaperstarts .catBox{padding: 20px;border-bottom: 1px solid #dedddd;position: relative;display: flex;flex-direction: column;justify-content: flex-end;}
.epaperstarts .catBox .clockbox{position:absolute;right: 50px;display: flex;gap: 5px;align-items: center;}
.epaperstarts .catBox .clockbox svg{width: 22px;height: 22px;}
.epaperstarts .catBox .clockbox *{    color: #64748b;}
.epaperstarts #form1{position: relative;}
.epaperstarts #form1 .box{background:white;padding: 30px;}
#qBadge{background:#e2e8f0;color: #475569;display: inline-block;font-size: 14px;font-weight: 600;padding: 4px 15px 2px;border-radius: 50px;}
.epaperstarts #form1 .updown{width: 100%;display: flex;align-items: center;justify-content: space-between;border-top: 1px solid #dedddd;padding: 20px 20px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.epaperstarts #form1 .updown p{margin:0;width: auto;}
.epaperstarts #form1 .updown p a{padding: 12px 35px;}
.epaperstarts #form1 .updown p a.is-disabled{background:none;border: 1px solid #cbd5e1;}
.epaperstarts #form1 .updown p a.is-disabled svg{stroke:#475569}
.epaperstarts #form1 .updown p a.is-disabled font{color:#475569;font-weight: 500;}
.epaperstarts #form1 .updown p a svg{stroke: white;}
.epaperstarts #form1 .question{width: auto;margin: 15px 0 0;display: flex;align-items: center;justify-content: space-between;}
.epaperstarts #form1 .question p *{font-size: 22px;font-weight: 600;}
.epaperstarts #form1 .question p { width: calc(100% - 280px); }
.epaperstarts #form1 .question .gpt-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 14px; text-decoration: none; font-weight: 400; font-size: 16px; letter-spacing: .2px; background: #eaeaea; box-shadow: 0 10px 24px rgb(0 0 0/0%); transition: transform .15s ease,box-shadow .15s ease,filter .15s ease; user-select: none; -webkit-tap-highlight-color: transparent; }
.epaperstarts #form1 .question .gpt-cta-btn span { color: #424242; }
.epaperstarts #form1 .question .gpt-cta-btn:hover span { color: var(--white); }
.epaperstarts #form1 .question .gpt-cta-btn:hover { transform: translateY(-7px); box-shadow: 0 14px 34px rgb(0 0 0/10%); filter: brightness(1.02); background: var(--primary); }
.epaperstarts #form1 .question .gpt-cta-btn:active { transform: translateY(0px) scale(.99); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.epaperstarts #form1 .question .gpt-cta-btn:focus-visible { outline: 3px solid rgba(47,128,237,.35); outline-offset: 3px; }
.ansList{ list-style:none; padding:0;  margin:16px 0 0;  width:100%;  display:flex;  flex-direction:column;  gap:16px;}
.ansItem{margin:0;padding:0}
.ansCard{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:18px 18px;border-radius:16px;border:2px solid #e6edf5;background:#fff;cursor:pointer;user-select:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease,transform .12s ease;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.ansCard:hover{transform:translateY(-1px);border-color:#cececd}
.ansRadio{position:absolute;opacity:0;pointer-events:none}
.ansBadge{width:32px;height:32px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;letter-spacing:.02em;background:#fff;border:2px solid #c8d3df;color:#7a8a9a;flex:0 0 auto}
.ansText{font-size:16px;line-height:1.5;color:#334155;font-weight:500}
.ansCard.is-active{border-color:var(--primary);background:#fff9f0}
.ansCard.is-active .ansBadge{background:var(--primary);border-color:var(--primary);color:#fff}
.ansRadio:checked + .ansBadge{background:var(--primary);border-color:var(--primary);color:#fff}
.ansRadio:checked + .ansBadge + .ansText{color:#334155}

/* testreport */
.testreport .catBox{display:flex;flex-direction:column;align-items:center}
.testreport .catBox span{width:60px;display:flex;aspect-ratio:1/1;background:var(--primary);border-radius:50px;justify-content:center;align-items:center;margin-bottom:20px;margin-top:2%}
.testreport .catBox span svg{color:white}
.resultGrid{display:grid;gap:18px;margin:40px 10%;grid-template-columns:repeat(4,1fr)}
.resultCard{background:#fff;border:1px solid #e6edf5;border-radius:18px;padding:18px 16px;box-shadow:0 10px 24px rgba(16,24,40,.06);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.resultCard *{text-align:center}
.resultLabel{font-size:12px;color:#94a3b8;font-weight:700;letter-spacing:.08em;margin-bottom:10px}
.resultValue{font-weight:900;color:#1E293B;line-height:1.1}
.resultTitle{font-size:22px;font-weight:700}
.resultScore{font-size:44px;color:#00b3a4}
.resultCorrect{font-size:44px}
.resultRank{font-size:44px;color:#f59e0b}
.resultMeta{display:flex;gap:16px;align-items:center;justify-content:space-between;color:#64748b;font-size:13px;margin:0 10%}
.resultMeta .again a,.quiz_finish_notice .result_btn{background:#1e293b;display:inline-flex;align-items:center;gap:10px;color:white;padding:10px 20px;border-radius:10px}
.resultMeta .again a svg{color:white}
.resultMeta .metaItem{color:#64748B;display:flex;align-items:center;gap:5px}
.resultMeta .metaItem svg{color:#64748B;width:20px;height:20px}


.resultMeta .quiz_finish_notice { display: flex; gap: 20px; }
.quiz_finish_notice .result_btn { background: #eaeaea; color: #1e293b; border: 1px solid #1e293b3d; }
.resultMeta .again a:hover,.quiz_finish_notice .result_btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(153 153 153/22%); }
.quiz_finish_notice .result_btn svg,.resultMeta .again a svg {width: 22px;}

@media (max-width: 1280px){
    .wrapper{grid-template-columns: 25% 75%;}
}
@media (max-width: 1024px){
	.cidGrid { grid-template-columns: repeat(2,1fr); }
	.epaperstarts #form1 .question { display: flex; flex-direction: column; }
	.epaperstarts #form1 .question p { width: auto; margin: 10px 0px; }
}
@media (max-width: 980px){
	.wrap,.contentMain { height: auto; }
	.wrapper { grid-template-columns: 1fr; }
	.resultGrid { grid-template-columns: repeat(2,1fr); margin: 0 0% 30px; }
	.resultMeta { display: flex; flex-direction: column; gap: 15px; margin: 0 0%; }
	.resultMeta .again a,.quiz_finish_notice .result_btn { padding: 15px 13px; }
}
@media (max-width: 680px){
    .epaperstarts #form1 .question p *{font-size: 19px;}
    .epaperstarts .catBox .clockbox{position:relative;right: unset;display: flex;justify-content: flex-end;}
    .wrap{padding: 45px 25px 0;}
}