/* แบบแนะนำตัว (นักเรียน) — ทุกกฎอยู่ใต้ .if · หัวพื้นน้ำเงินแนว A */
.if{--if-navy:var(--navy,#14275C);--if-sky:var(--sky,#38BDF8);padding-bottom:96px}
.if-wrap{max-width:640px;margin:0 auto;padding:0 16px}
.if-head{background:var(--if-navy);color:#fff;padding:28px 0 22px}
.if-head small{display:block;color:#AFC0E6;letter-spacing:.14em;font-size:13px}
.if-head h1{margin:4px 0 0;font:800 30px/1.3 'Noto Sans Thai',sans-serif;color:#fff}
.if-head p{margin:6px 0 0;color:#C9D4EE;font-size:14px}
.if-body{padding-top:20px;padding-bottom:12px}
.if-body h2{margin:0 0 6px;font-size:20px}
.if .muted{color:#6b7385;font-size:13px}
.if-steps{display:flex;gap:4px;margin-bottom:8px}
.if-steps span{flex:1;height:4px;background:#E3E8F2}
.if-steps span.on{background:var(--if-sky)}
.if-stepname{font-size:13px;color:#6b7385;margin-bottom:14px}
.if-photo{display:grid;justify-items:center;gap:10px;padding:10px 0}
.if-pbox{width:180px;height:180px;background:#F3F6FB;border:1px dashed #9fb0d6;display:grid;place-items:center;font-size:44px;color:var(--if-navy);overflow:hidden}
.if-pbox img{width:100%;height:100%;object-fit:cover}
.if-pbox span{font-size:15px}
.if-pick{cursor:pointer}
.if-l{display:block;margin:14px 0 4px;font-weight:600}
.if-req{color:#b42318;font-style:normal;font-size:13px;font-weight:600;border:1px solid #f0b4b4;background:#fff5f5;padding:0 6px;margin-left:4px;white-space:nowrap}
.if-q{margin:0 0 18px}
.if-q-t{font-weight:600;margin-bottom:8px;display:flex;gap:8px;align-items:baseline}
.if-q-n{font:600 13px 'Outfit',sans-serif;color:#fff;background:var(--if-navy);min-width:22px;height:22px;display:inline-grid;place-items:center}
.if .opt{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid #D9DEE8;margin-bottom:6px;cursor:pointer}
.if .scale{display:flex;gap:6px}
.if .scale label{flex:1}
.if .scale input{position:absolute;opacity:0}
.if .scale span{display:flex;flex-direction:column;align-items:center;border:1px solid #D9DEE8;padding:10px 0;cursor:pointer}
.if .scale span small{font-size:13px;color:#6b7385}
.if .scale input:checked+span{background:var(--if-navy);color:#fff;border-color:var(--if-navy)}
.if .scale input:checked+span small{color:#C9D4EE}
.if-err{margin-top:12px;border:1px solid #f0b4b4;background:#fff5f5;color:#b42318;padding:8px 10px;font-size:13px}
.if-revise{border:1px solid #f0b4b4;background:#fff5f5;color:#8a1c12;padding:10px 12px;margin-bottom:14px;font-size:14px}
.if-warn{font-weight:600;color:#8a5a00;background:#fffaf0;border:1px solid #f0d9a8;padding:8px 10px}
.if-sum{display:grid;grid-template-columns:1fr;gap:2px;margin:12px 0 0}
.if-sum dt{font-size:13px;color:#6b7385;margin-top:10px}
.if-sum dd{margin:0;font-weight:500;word-break:break-word}
.if-thumb{width:96px;height:96px;object-fit:cover;display:block}
.if-bar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #D9DEE8;padding:10px 0;z-index:30}
.if-barin{display:flex;gap:8px;align-items:center;justify-content:space-between}
.if-draft{display:flex;flex-direction:column;align-items:center;gap:2px;margin-right:auto;min-width:0;flex:1 1 auto}
.if-draft small{font-size:13px;line-height:1.25;color:#6b7385;text-align:center}
.if-barin [data-next]{min-width:104px;flex:none}
.if-barin [data-back]{flex:none}
.if-barin .btn{padding-left:12px;padding-right:12px}
@media (max-width:420px){.if-head h1{font-size:25px}.if-pbox{width:150px;height:150px}}

.if-why{color:#AFC0E6 !important;font-size:13px !important}
.if-bad{outline:2px solid #b42318;outline-offset:2px}
.if-fielderr{color:#b42318;font-size:14px;font-weight:600;margin:6px 0 0}
.if-crop{width:260px;height:260px;overflow:hidden;background:#F3F6FB;border:2px solid var(--if-navy);cursor:grab;margin:0 auto}
.if-crop img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none}
.if-croprow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.if-sumrow{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;padding:10px 0;border-bottom:1px solid #EEF1F6}
.if-sumrow dt{font-size:13px;color:#6b7385}
.if-sumrow dd{margin:2px 0 0;font-weight:500;word-break:break-word}
.if-slow{margin:6px 0 0;color:#8a5a00;font-size:13px;text-align:center}