/* linguaedu.online 공통 부품 (A · B 공통) — tokens.css 다음에 읽는다 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs-15);line-height:var(--lh-ui);color:var(--ink);background:var(--canvas);
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--navy-700);text-underline-offset:3px;text-decoration-thickness:1px}
::selection{background:var(--mint-300);color:var(--navy-950)}
:focus{outline:none}
:focus-visible{box-shadow:var(--focus);border-radius:var(--r-ctl)}
*{scrollbar-width:thin;scrollbar-color:var(--navy-200) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--navy-200);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
input,textarea{caret-color:var(--navy-700)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.en{font-feature-settings:"kern";letter-spacing:0}

/* ---------- 아이콘 (직접 그린 선 아이콘 · 굵기 1.75 하나) */
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:15px;height:15px}

/* ---------- 단추 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--ctl-h);padding:0 14px;border-radius:var(--r-ctl);
  border:1px solid transparent;font-size:var(--fs-14);font-weight:600;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy-800);color:#fff}
.btn-primary:hover{background:var(--navy-900)}
.btn-secondary{background:var(--surface);color:var(--navy-800);border-color:var(--line-2)}
.btn-secondary:hover{background:var(--navy-50);border-color:var(--navy-300)}
.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--canvas-2);color:var(--ink)}
.btn-ok{background:var(--ok);color:#fff}
.btn-ok:hover{background:#085a3c}
.btn-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.btn-warn:hover{background:#ffe7ad}
.btn-bad{background:var(--surface);color:var(--bad);border-color:var(--bad-line)}
.btn-bad:hover{background:var(--bad-bg)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn-lg{height:48px;padding:0 20px;font-size:var(--fs-16)}
.btn .kbd{margin-left:2px}
.btn-primary .kbd,.btn-ok .kbd{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.08)}

/* ---------- 키 모양 */
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border:1px solid var(--line-2);
  border-bottom-width:2px;border-radius:5px;background:var(--surface);color:var(--ink-2);font-size:var(--fs-12);font-weight:600;line-height:1}

/* ---------- 칩 (알약) */
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font-size:var(--fs-12);font-weight:600;white-space:nowrap}
.chip-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.chip-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.chip-bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.chip-wait{background:var(--wait-bg);color:var(--wait);border-color:var(--wait-line)}
.chip-info{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.chip-mint{background:var(--mint-200);color:var(--mint-ink);border-color:var(--mint-400)}
button.chip{cursor:pointer;transition:background-color var(--t-fast),border-color var(--t-fast)}
button.chip:hover{border-color:var(--navy-300)}
button.chip[aria-pressed="true"]{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
button.chip[aria-pressed="true"] .kbd{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.chip .kbd{height:18px;min-width:18px;padding:0 4px;font-size:12px;border-bottom-width:1px}

/* ---------- 난도 4단계 표 */
.lv{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 4px;border-radius:var(--r-pill);font-size:var(--fs-12);font-weight:600;white-space:nowrap}
.lv b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:12px;font-weight:800;background:rgba(255,255,255,.55)}
.lv1{background:var(--lv1-bg);color:var(--lv1-ink)}
.lv2{background:var(--lv2-bg);color:var(--lv2-ink)}
.lv3{background:var(--lv3-bg);color:var(--lv3-ink)} .lv3 b{background:rgba(15,31,61,.35)}
.lv4{background:var(--lv4-bg);color:var(--lv4-ink)} .lv4 b{background:rgba(210,249,232,.18)}

/* ---------- 원고 난도(3단계) 글자 표 */
.d3{font-size:var(--fs-12);font-weight:600;color:var(--ink-2)}

/* ---------- 정답 이중 확인 표 (API · 검수) */
.dual{display:inline-flex;align-items:center;gap:4px}
.dual span{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 7px;border-radius:5px;font-size:12px;font-weight:600;border:1px solid var(--line)}
.dual .y{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.dual .n{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.dual .w{background:var(--wait-bg);color:var(--wait);border-color:var(--wait-line)}

/* ---------- 입력 */
.field{display:flex;flex-direction:column;gap:8px}
.field>label,.field>.lab{font-size:var(--fs-14);font-weight:600;color:var(--ink)}
.field .help{font-size:var(--fs-12);color:var(--ink-3)}
.input,.select,.textarea{height:var(--ctl-h);width:100%;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--surface);
  font-size:var(--fs-14);color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.textarea{height:auto;min-height:88px;padding:10px 12px;line-height:var(--lh-ui);resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--navy-600)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{border-color:var(--navy-700);box-shadow:0 0 0 3px var(--navy-100)}
.select{appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}

/* ---------- 나뉜 단추(세그먼트) */
.seg{display:inline-flex;padding:3px;gap:3px;border-radius:calc(var(--r-ctl) + 3px);background:var(--canvas-2)}
.seg button{border:0;height:calc(var(--ctl-h) - 6px);padding:0 12px;border-radius:var(--r-ctl);background:transparent;font-size:var(--fs-14);font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--navy-800);box-shadow:var(--sh-1)}

/* ---------- 카카오 로그인 단추 (카카오 디자인 가이드: 노랑 #FEE500 · 말풍선 심볼 · 글자 검정 85%) */
.kakao{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;border:0;border-radius:12px;background:var(--kakao-bg);
  color:var(--kakao-ink);font-size:var(--fs-16);font-weight:600;cursor:pointer;text-decoration:none;position:relative;transition:filter var(--t-fast)}
.kakao:hover{filter:brightness(.97)}
.kakao:active{transform:translateY(1px)}
.kakao svg{width:20px;height:20px;fill:#000;flex:none}

/* ---------- 지문 · 선지 공통 */
.passage{font-size:var(--fs-17);line-height:var(--lh-read);color:var(--ink)}
.passage .s{display:inline}
.passage .sn{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-right:4px;border-radius:5px;background:var(--navy-100);color:var(--navy-800);
  font-size:12px;font-weight:800;vertical-align:2px}
.blank{display:inline-block;min-width:11em;border-bottom:2px solid var(--navy-800);height:1.1em;vertical-align:-2px}
.quote-hl{background:linear-gradient(transparent 55%,var(--mint-300) 55%);padding:0 1px}
.ul{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.circ{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-2);font-size:var(--fs-12);font-weight:800;flex:none;color:var(--ink-2)}

/* ---------- 시안 표지 (대표 보기용 · 기능 쪽은 쓰지 않음) */
.mock-note{position:fixed;right:12px;bottom:10px;z-index:90;font-size:12px;font-weight:600;color:var(--ink-2);background:rgba(255,255,255,.92);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;box-shadow:var(--sh-1);pointer-events:none}
@media (max-width:767px){.mock-note{bottom:auto;top:auto;display:none}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- 글자 인식(OCR) · 필기 지움 표지 — 색과 모양(테두리 · 끝 아이콘)으로 함께 가른다 (10-20 추가) */
.ocr,.hw{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:3px 7px;line-height:1.2;border-radius:6px;font-size:12px;font-weight:700;white-space:nowrap;border:1px solid;flex:none}
.ocr .ic,.hw .ic{width:14px;height:14px}
.ocr .os,.hw .os{stroke-width:2.2}
.ocr-done{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.ocr-run{background:var(--info-bg);color:var(--info);border-style:dashed;border-color:var(--navy-600)}
.ocr-low{background:var(--warn-bg);color:var(--warn);border-width:2px;border-color:var(--warn-line)}
.hw-wait{background:var(--surface);color:var(--ink-2);border-style:dotted;border-color:var(--line-strong)}
.hw-run{background:var(--info-bg);color:var(--info);border-style:dashed;border-color:var(--navy-600)}
.hw-done{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.hw-check{background:var(--warn-bg);color:var(--warn);border-width:2px;border-color:var(--warn-line)}
.marks{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.legend{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--surface)}
.legend .lg{font-size:var(--fs-12);font-weight:800;color:var(--ink-2);margin:0 2px 0 6px}
.legend .lg:first-child{margin-left:0}
.legend .ex-tag{margin-left:auto}
.ex-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:99px;border:1px dashed var(--line-strong);font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}