/* PC(index.html)와 폰(mobile.html)이 **같이 쓰는** 작은 부품 — 작은 단추(xc-mini), 창(xc-modal),
고르는 창(xc-modal-choose), 설명 쪽지(ui-tip).
원래 styles.css 의 시험지 작성기 절에 있었는데, 영단어 시험 화면을 폰에서도 그대로 쓰게 되면서
(2026-09-25) 폰도 읽어야 해 떼어 냈다. index.html 에서는 styles.css **앞에** 읽는다 — 원래 자리보다
뒤에 있던 styles.css 의 덮어쓰기(.xc-mini.is-primary 등)가 그대로 이기게. */
.xc-mini {
padding: 5px 11px; border-radius: 999px; cursor: pointer;
border: 1px dashed var(--border-color); background: transparent;
font-size: 12px; font-weight: 600; color: var(--text-muted);
transition: border-color .12s, background-color .12s, color .12s;
}
.xc-mini:hover {
border-style: solid; border-color: var(--primary-color);
background: var(--primary-light); color: var(--primary-color);
}
.xc-hint { font-size: 11.5px; color: var(--text-muted); }
.xc-hint.is-warn {
display: inline-flex; align-items: center; align-self: flex-start;
padding: 3px 10px; border-radius: 999px;
background: var(--warning-light); color: #b45309; font-weight: 700;
}
/* ─── 작성기 안의 모달(일괄 배점) ─── */
/* 고르는 일이라 확인 상자로는 안 된다. 브라우저 기본 대화상자는 이 프로젝트에서
쓰지 않으므로 제 모달을 만든다. */
.xc-modal-back {
position: fixed; inset: 0; z-index: 1400;
display: flex; align-items: center; justify-content: center;
background: rgba(15, 23, 42, .45); padding: 24px;
}
.xc-modal {
width: 100%; max-width: 520px; max-height: 80vh; max-height: 80dvh;
display: flex; flex-direction: column; gap: 10px;
padding: 18px; border-radius: 14px;
background: var(--card-bg); border: 1px solid var(--border-color);
box-shadow: 0 20px 60px rgba(15, 23, 42, .28);
}
.xc-modal-head { font-size: 15px; font-weight: 800; color: var(--text-main); }
.xc-modal-sub { font-size: 12.5px; color: var(--text-muted); }
.xc-modal-bar { display: flex; align-items: center; gap: 6px; }
.xc-modal-bar .xc-hint { margin-left: auto; }
.xc-modal-list {
flex: 1; overflow: auto; min-height: 120px;
border: 1px solid var(--border-color); border-radius: 10px; padding: 4px;
}
.xc-modal-row {
display: grid; grid-template-columns: 18px 74px minmax(0, 1fr) 52px;
align-items: center; gap: 8px;
padding: 7px 8px; border-radius: 8px; cursor: pointer;
}
.xc-modal-row:hover { background: var(--bg-color); }
.xc-modal-row input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--primary-color); }
.xc-modal-badge {
padding: 2px 8px; border-radius: 999px; text-align: center;
background: var(--primary-light); color: var(--primary-color);
font-size: 11px; font-weight: 700;
}
.xc-modal-peek {
font-size: 12.5px; color: var(--text-main);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xc-modal-pts { font-size: 12px; color: var(--text-muted); text-align: right; }
.xc-modal-foot { display: flex; align-items: flex-end; gap: 8px; }
.xc-modal-foot-spacer { flex: 1; }
.xc-modal-ok {
height: 34px; padding: 0 16px; border-radius: 8px;
border: 1px solid var(--primary-color); font-size: 13px; font-weight: 700; cursor: pointer;
}
.xc-modal-ok:disabled { opacity: .45; cursor: not-allowed; }
/* 확인 상자 안에 곁들이는 잔글씨. */
.xc-note { display: block; margin-top: 8px; font-size: 12px; color: var(--text-muted); line-height: 1.6; }
/* ─── 손을 얹으면 뜨는 쪽지 ───────────────────────────────────────── */
/* body 바로 아래에 하나만 두고 fixed 로 띄운다 — 조상의 overflow:hidden 이
자르지 못하게. 경위는 src/ui/tooltip.js 머리말. */
.ui-tip {
position: fixed; z-index: 3000;
max-width: 320px; padding: 9px 12px; border-radius: 9px;
background: var(--text-main); color: var(--card-bg);
font-size: 12px; font-weight: 500; line-height: 1.65;
white-space: pre-line; text-align: left;
box-shadow: 0 10px 30px rgba(15, 23, 42, .32);
pointer-events: none;
opacity: 0; transform: translateY(4px);
transition: opacity .13s ease, transform .13s ease;
}
.ui-tip.is-on { opacity: 1; transform: translateY(0); }
.ui-tip::after {
content: ''; position: absolute; left: var(--tip-arrow, 50%);
top: 100%; margin-left: -5px;
border: 5px solid transparent; border-top-color: var(--text-main);
}
.ui-tip.is-below::after {
top: auto; bottom: 100%;
border-top-color: transparent; border-bottom-color: var(--text-main);
}
[data-theme="dark"] .ui-tip { background: #e2e8f0; color: #0f172a; }
[data-theme="dark"] .ui-tip::after { border-top-color: #e2e8f0; }
[data-theme="dark"] .ui-tip.is-below::after { border-top-color: transparent; border-bottom-color: #e2e8f0; }
/* ─── 고르는 모달 ─── */
/* 고르는 것은 가운데에 같은 무게로 나란히 둔다. 취소와 나란히 놓으면 어느 것이
고르는 것이고 어느 것이 그만두는 것인지 한눈에 안 들어온다. */
.xc-modal-choose { max-width: 460px; text-align: center; }
.xc-modal-choose .xc-modal-head, .xc-modal-choose .xc-modal-sub { text-align: center; }
.xc-choice-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px; padding: 6px 0 2px;
}
.xc-choice-grid:has(> :nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xc-choice {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; min-height: 92px; padding: 14px 12px;
border: 1px solid var(--border-color); border-radius: 12px;
background: var(--card-bg); color: var(--text-main); cursor: pointer;
transition: border-color .12s, background-color .12s, transform .06s;
}
.xc-choice:hover { border-color: var(--primary-color); background: var(--primary-light); }
.xc-choice:active { transform: translateY(1px); }
.xc-choice i { width: 22px; height: 22px; color: var(--text-muted); }
.xc-choice:hover i { color: var(--primary-color); }
.xc-choice .xc-choice-title { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.xc-choice .xc-choice-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.xc-modal-foot-center { justify-content: center; }
/* 확인 단추(넣기·고르기). 고르는 단추와 달리 이것은 하나뿐이라 강조해도 된다. */
.xc-modal-ok {
height: 34px; padding: 0 16px; border-radius: 8px; cursor: pointer;
border: 1px solid var(--primary-color); background: var(--primary-color); color: #fff;
font-size: 13px; font-weight: 700;
}
.xc-modal-ok:disabled { opacity: .45; cursor: not-allowed; }
.xc-modal-row-top {
grid-template-columns: 18px minmax(0, 1fr);
margin-bottom: 4px; border-bottom: 1px dashed var(--border-color); border-radius: 8px 8px 0 0;
}
.xc-modal-toplabel { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
/* ─── 출제 선생님 확인(src/ui/authorCheck.js) ─────────────────────── */
/* «○○ 선생님 맞으신가요?» → 아니면 이름·비밀번호로 로그인 바꾸기. PC·폰이 같이 쓴다. */
.xc-who { max-width: 420px; position: relative; }
.xc-who-card {
display: flex; align-items: center; gap: 12px;
padding: 14px; border-radius: 12px;
background: var(--primary-light); color: var(--text-main);
font-size: 14px; line-height: 1.6;
}
/* lucide 가 를