/*
 * 오늘의 문제 · 가벼운 틀(fragments/lite.html). 시안: docs/features/sobang-quiz/mockup.html
 * 휴대폰 한 장 폭 세로 흐름 — 문제 카드가 주인공, 나머지는 조용히.
 * ⚠️ 규칙은 모두 .qz 안에 둔다(사이트 공통 CSS 와 섞이지 않게). 글자 크기는 px — html 글자 크기에 기대지 않는다.
 * 누르는 곳은 32px 이상, 폭 420 에서 가로 스크롤이 없어야 한다.
 */
body.qz-body { margin: 0; background: #f6f4f2; }

.qz {
    --qz-accent: var(--point, #ff6600);
    --qz-accent-soft: #fff3ea; --qz-accent-line: #ffd9bf;
    --qz-bg: #f6f4f2; --qz-card: #ffffff; --qz-fg: #1d1b19; --qz-muted: #7a726b; --qz-line: #ebe6e1; --qz-chip: #f1ede9;
    --qz-ok: #14864b; --qz-ok-soft: #e7f6ee; --qz-bad: #d63b3b; --qz-bad-soft: #fdeceb;
    --qz-shadow: 0 1px 2px rgba(40, 25, 10, .06), 0 4px 16px rgba(40, 25, 10, .05);
    box-sizing: border-box; max-width: 440px; margin: 0 auto; padding: 12px 16px 40px;
    display: flex; flex-direction: column; gap: 14px;
    color: var(--qz-fg); font-size: 15px; line-height: 1.6; letter-spacing: normal; word-break: keep-all; overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
}
.qz *, .qz *::before, .qz *::after { box-sizing: border-box; }
.qz a { color: inherit; text-decoration: none; }
.qz p, .qz h2, .qz h3, .qz ul { margin: 0; }
.qz ul { list-style: none; padding: 0; }
.qz button { font-family: inherit; }
.qz a:focus-visible, .qz button:focus-visible { outline: 2px solid var(--qz-accent); outline-offset: 2px; }

/* 위 줄: 브랜드 + 탭 */
.qz .qz-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* inline-flex 는 '소방' 과 <b> 사이 빈칸을 먹는다 — gap 으로 띄운다 */
.qz .qz-brand { font-weight: 900; font-size: 17px; letter-spacing: -.02em; min-height: 32px; display: inline-flex; align-items: center; gap: 5px; }
.qz .qz-brand b { color: var(--qz-accent); }
.qz .qz-tabs { display: flex; background: var(--qz-chip); border-radius: 999px; padding: 3px; }
.qz .qz-tabs a { font-size: 14px; font-weight: 700; color: var(--qz-muted); padding: 6px 12px; border-radius: 999px; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
.qz .qz-tabs a.is-on { background: var(--qz-card); color: var(--qz-fg); box-shadow: var(--qz-shadow); }

/* 날짜 띠 ‹ 10월 6일 (월) [오늘] › */
.qz .qz-day { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qz .qz-day-btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--qz-line); background: var(--qz-card); color: var(--qz-fg); font-size: 22px; line-height: 1; display: grid; place-items: center; box-shadow: var(--qz-shadow); }
.qz .qz-day-btn.is-off { opacity: .3; box-shadow: none; }
.qz .qz-day-d { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.qz .qz-day-d strong { font-size: 22px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.qz .qz-day-d span { font-size: 12px; font-weight: 700; color: var(--qz-muted); }
.qz .qz-day-d span.is-today { color: #fff; background: var(--qz-accent); border-radius: 999px; padding: 0 8px; }
.qz .qz-day-when { margin-top: 4px; font-size: 12px; color: var(--qz-muted); }

/* 오늘 문제가 아직 없어 지난 문제를 대신 보여 줄 때 */
.qz .qz-notice { font-size: 13px; text-align: center; color: var(--qz-fg); background: var(--qz-accent-soft); border: 1px solid var(--qz-accent-line); border-radius: 10px; padding: 8px 12px; }

/* 문제 카드 */
.qz .qz-card { background: var(--qz-card); border-radius: 16px; box-shadow: var(--qz-shadow); padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.qz .qz-chip { align-self: flex-start; font-size: 12px; background: var(--qz-accent-soft); color: var(--qz-accent); border: 1px solid var(--qz-accent-line); border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.qz .qz-q { font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: -.01em; white-space: pre-line; }
.qz .qz-opts { display: flex; flex-direction: column; gap: 8px; }
.qz .qz-opt { position: relative; display: block; width: 100%; min-height: 52px; text-align: left; border: 1.5px solid var(--qz-line); background: var(--qz-card); color: var(--qz-fg); border-radius: 12px; padding: 13px 14px 13px 44px; font-size: 15px; line-height: 1.5; cursor: pointer; overflow: hidden; }
.qz .qz-opt .qz-n { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--qz-chip); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.qz .qz-opt .qz-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--qz-chip); transition: width .6s ease; }
.qz .qz-opt .qz-t, .qz .qz-opt .qz-pct { position: relative; z-index: 1; }
.qz .qz-opt .qz-t { display: block; white-space: pre-line; }
.qz .qz-opt .qz-pct { float: right; margin-left: 8px; font-size: 13px; color: var(--qz-muted); font-variant-numeric: tabular-nums; }
.qz .qz-opt:disabled { cursor: default; opacity: 1; color: var(--qz-fg); }
.qz .qz-opt:not(:disabled):hover { border-color: var(--qz-accent); }
.qz .qz-opt.is-correct { border-color: var(--qz-ok); }
.qz .qz-opt.is-correct .qz-bar { background: var(--qz-ok-soft); }
.qz .qz-opt.is-correct .qz-n { background: var(--qz-ok); color: #fff; }
.qz .qz-opt.is-wrong { border-color: var(--qz-bad); }
.qz .qz-opt.is-wrong .qz-bar { background: var(--qz-bad-soft); }
.qz .qz-opt.is-wrong .qz-n { background: var(--qz-bad); color: #fff; }
@media (prefers-reduced-motion: reduce) { .qz .qz-opt .qz-bar { transition: none; } }
.qz .qz-hint { font-size: 13px; color: var(--qz-muted); text-align: center; }

/* 결과 */
.qz .qz-result { display: flex; flex-direction: column; gap: 10px; }
.qz .qz-result[hidden] { display: none; }
.qz .qz-verdict { font-weight: 900; font-size: 20px; }  /* 문제(18px)보다 작아 결과가 묻혔다 (2026-10-03) */
.qz .qz-verdict.is-ok { color: var(--qz-ok); }
.qz .qz-verdict.is-bad { color: var(--qz-bad); }
.qz .qz-stat { font-size: 13px; color: var(--qz-muted); font-variant-numeric: tabular-nums; }
.qz .qz-first { font-weight: 700; color: var(--qz-accent); }
.qz .qz-note { font-size: 13px; border-radius: 10px; padding: 8px 12px; background: var(--qz-accent-soft); border: 1px solid var(--qz-accent-line); }
.qz .qz-score { font-weight: 900; color: var(--qz-accent); }
.qz .qz-login { display: inline-flex; align-items: center; min-height: 32px; color: var(--qz-accent); font-weight: 700; text-decoration: underline; }
.qz .qz-explain { background: var(--qz-bg); border-radius: 12px; padding: 12px 14px; font-size: 14px; display: flex; flex-direction: column; gap: 8px; }
.qz .qz-explain h3 { font-size: 13px; color: var(--qz-muted); font-weight: 700; }
.qz .qz-explain p { white-space: pre-line; }
.qz .qz-quote { border-left: 3px solid var(--qz-accent-line); padding-left: 10px; font-size: 13px; color: var(--qz-muted); white-space: pre-line; }
.qz .qz-cite { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--qz-accent); }
.qz .qz-cite a { text-decoration: underline; }
/* 해설 접기 — 앞 2줄만 보이고 아래로 흐려진다. 원문 인용·근거는 펼친 뒤에 */
.qz .qz-explain.is-folded .qz-exp-body { max-height: 3.2em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.qz .qz-exp-body { display: flex; flex-direction: column; gap: 8px; }
.qz .qz-exp-toggle { align-self: flex-start; border: 0; background: none; padding: 4px 0; min-height: 32px; font: inherit; font-size: 13px; font-weight: 700; color: var(--qz-accent); cursor: pointer; }
/* 아래 떠 있는 댓글 단추 — 휴대폰 엄지가 닿는 자리, 화면 폭 가운데 */
.qz .qz-fab { position: fixed; right: max(16px, calc(50% - 204px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20; border: 0; border-radius: 999px; background: var(--qz-fg); color: #fff; font: inherit; font-size: 14px; font-weight: 700; padding: 0 16px; min-height: 44px; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); cursor: pointer; white-space: nowrap; opacity: .92; }
/* PC 는 화면이 넓어 댓글 칸까지 스크롤이 짧다 — 떠 있는 단추가 본문 가운데를 가리기만 했다 (2026-10-03 검토) */
@media (min-width: 900px) { .qz .qz-fab { display: none; } }
.qz .qz-fab[hidden] { display: none; }

/* 공유 */
.qz .qz-share { border-top: 1px dashed var(--qz-line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.qz .qz-share-q { font-weight: 700; font-size: 15px; text-align: center; }
.qz .qz-share-row { display: flex; gap: 8px; }
.qz .qz-btn { flex: 1; min-width: 0; min-height: 44px; border: 0; border-radius: 10px; padding: 11px 8px; font-size: 14px; font-weight: 700; cursor: pointer; text-align: center; }
.qz .qz-btn.is-kakao { background: #fee500; color: #191600; }
.qz .qz-btn.is-ghost { background: var(--qz-chip); color: var(--qz-fg); }
.qz .qz-share-msg { font-size: 12px; color: var(--qz-muted); text-align: center; white-space: pre-line; word-break: break-all; }
.qz .qz-more1 { align-self: center; color: var(--qz-accent); font-size: 14px; font-weight: 700; padding: 6px 8px; min-height: 32px; display: inline-flex; align-items: center; }

/* 한마디 — 시안 '한마디' 카드. 글은 모두 textContent 로 넣는다(quiz.js) */
.qz .qz-cpanel { background: var(--qz-card); border-radius: 16px; box-shadow: var(--qz-shadow); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qz .qz-cpanel:empty { display: none; }
.qz .qz-cpanel h2 { font-size: 16px; font-weight: 700; }
.qz .qz-cpanel h2 small { font-size: 12px; color: var(--qz-muted); font-weight: 400; }
.qz .qz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qz .qz-cform { display: flex; flex-direction: column; gap: 8px; }
.qz .qz-nickrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--qz-muted); min-height: 32px; }
.qz .qz-nickrow b { color: var(--qz-fg); font-size: 14px; }
.qz .qz-nickrow input { border: 1px solid var(--qz-line); border-radius: 8px; background: var(--qz-bg); color: var(--qz-fg); font: inherit; font-size: 14px; padding: 4px 8px; width: 9em; min-height: 32px; }
.qz .qz-linkbtn { border: 1px solid var(--qz-accent-line); background: var(--qz-accent-soft); color: var(--qz-accent); border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; padding: 2px 12px; min-height: 32px; cursor: pointer; display: inline-flex; align-items: center; }
.qz .qz-linkbtn.is-plain { background: none; border-color: transparent; color: var(--qz-muted); }
/* 한 줄 입력 + 오른쪽 등록 — 쓰기 시작하면 quiz.js 가 높이를 늘린다(최대 6줄쯤) */
.qz .qz-cbar { display: flex; gap: 8px; align-items: flex-end; min-width: 0; }
.qz .qz-cform textarea { flex: 1; min-width: 0; width: 100%; resize: none; border: 1px solid var(--qz-line); border-radius: 22px; background: var(--qz-bg); color: var(--qz-fg); font: inherit; font-size: 15px; line-height: 20px; padding: 11px 16px; height: 44px; min-height: 44px; max-height: 140px; overflow-y: auto; }
.qz .qz-cbar .qz-btn.is-primary { height: 44px; min-height: 44px; border-radius: 22px; padding: 0 18px; }
.qz .qz-clen { font-size: 12px; color: var(--qz-muted); text-align: right; font-variant-numeric: tabular-nums; }
.qz .qz-clen[hidden] { display: none; }
.qz .qz-cerr { color: var(--qz-bad); font-size: 12px; }
.qz .qz-chint { font-size: 12px; color: var(--qz-muted); }
.qz .qz-chint[hidden] { display: none; }
.qz .qz-cform textarea:disabled { opacity: .6; }
.qz .qz-cerr[hidden] { display: none; }
.qz .qz-crow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--qz-muted); font-variant-numeric: tabular-nums; }
.qz .qz-btn.is-primary { flex: 0 0 auto; background: var(--qz-accent); color: #fff; padding: 8px 18px; min-height: 40px; }
.qz .qz-btn:disabled { opacity: .6; cursor: default; }
.qz .qz-lock { position: relative; min-width: 0; }
.qz .qz-lock.is-blur .qz-clist { filter: blur(5px); user-select: none; pointer-events: none; }
.qz .qz-lockmsg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; text-align: center; font-size: 14px; font-weight: 700; }
.qz .qz-lockmsg[hidden] { display: none; }
.qz .qz-lockmsg span { background: var(--qz-card); border-radius: 999px; padding: 8px 14px; box-shadow: var(--qz-shadow); }
.qz .qz-clist { display: flex; flex-direction: column; min-width: 0; }
.qz .qz-clist > li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 2px; border-bottom: 1px solid var(--qz-line); min-width: 0; }
.qz .qz-clist > li:last-child { border-bottom: 0; }
.qz .qz-cempty { font-size: 13px; color: var(--qz-muted); text-align: center; padding: 12px 0; }
/* 잠긴 자리의 흐린 줄 — 실제 글은 서버가 주지 않는다 */
.qz .qz-clist > li.qz-cempty { display: block; padding: 18px 4px; text-align: center; font-size: 14px; color: var(--qz-muted); border: 0; }
.qz .qz-ghost { height: 14px; border-radius: 7px; background: var(--qz-chip); margin: 4px 0; }
.qz .qz-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 14px; font-weight: 700; color: #fff; background: hsl(var(--h, 18) 70% 52%); }
.qz .qz-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qz .qz-av.is-guest { background: var(--qz-accent-soft); }
.qz .qz-subs .qz-av { width: 28px; height: 28px; font-size: 12px; }
.qz .qz-cbox { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qz .qz-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--qz-muted); }
.qz .qz-who b { color: var(--qz-fg); font-size: 13px; }
.qz .qz-pick { font-size: 12px; border-radius: 4px; padding: 0 5px; background: var(--qz-chip); }
.qz .qz-cbody { font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; }
.qz .qz-cbody.is-gone { color: var(--qz-muted); font-style: italic; }
.qz .qz-cact { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.qz .qz-cact button { border: 0; background: none; color: var(--qz-muted); font: inherit; font-size: 13px; cursor: pointer; padding: 6px 0; min-height: 32px; }
.qz .qz-cact .is-liked { color: var(--qz-bad); font-weight: 700; }
.qz .qz-cact .qz-act { margin-left: auto; }
.qz .qz-cact .qz-confirm { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--qz-fg); }
.qz .qz-cact .qz-confirm .is-danger { color: var(--qz-bad); font-weight: 700; }
.qz .qz-subs { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--qz-line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qz .qz-subs > li { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.qz .qz-rform { display: flex; gap: 6px; min-width: 0; }
.qz .qz-rform input { flex: 1; min-width: 0; border: 1px solid var(--qz-line); border-radius: 10px; background: var(--qz-bg); color: var(--qz-fg); font: inherit; font-size: 14px; padding: 8px 10px; min-height: 40px; }
.qz .qz-rmsg { font-size: 12px; color: var(--qz-bad); }

/* 비교담에서 더 보기 (주황 띠) */
.qz .qz-more { margin-top: 10px; background: var(--qz-accent-soft); border: 1px solid var(--qz-accent-line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.qz .qz-more h2 { font-size: 15px; font-weight: 700; color: var(--qz-fg); }
.qz .qz-more h2 small { font-weight: 400; color: var(--qz-muted); font-size: 12px; }
.qz .qz-hub { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qz .qz-hub a { background: var(--qz-card); border: 1px solid var(--qz-accent-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 44px; }
.qz .qz-hub a b { font-size: 14px; }
.qz .qz-hub a span { font-size: 12px; color: var(--qz-muted); }
.qz .qz-foot { font-size: 12.5px; color: var(--qz-muted); text-align: center; }
.qz .qz-foot.qz-copy { margin-top: -6px; font-size: 12px; opacity: .9; word-break: keep-all; }

/* 이번 주 채용 (/jobs/this-week) — 시안 '이번 주 채용' 탭. 칩 줄은 제 안에서만 가로로 밀린다(화면은 가로 스크롤 없음) */
.qz .qz-job-head { background: var(--qz-card); border-radius: 16px; box-shadow: var(--qz-shadow); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.qz .qz-job-range { font-size: 12px; color: var(--qz-muted); }
.qz .qz-job-head h1 { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.4; letter-spacing: -.02em; }
.qz .qz-job-count { display: inline-block; vertical-align: middle; font-size: 13px; font-weight: 700; background: var(--qz-bad); color: #fff; border-radius: 999px; padding: 1px 9px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.qz .qz-job-sub { font-size: 13px; color: var(--qz-muted); }
.qz .qz-job-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; min-width: 0; -webkit-overflow-scrolling: touch; }
.qz .qz-job-chips::-webkit-scrollbar { display: none; }
.qz .qz-job-chips button { flex: 0 0 auto; border: 1px solid var(--qz-line); background: var(--qz-card); color: var(--qz-fg); border-radius: 999px; font-size: 13px; padding: 6px 12px; min-height: 34px; cursor: pointer; white-space: nowrap; }
.qz .qz-job-chips button i { font-style: normal; font-size: 12px; color: var(--qz-muted); margin-left: 2px; font-variant-numeric: tabular-nums; }
.qz .qz-job-chips button[aria-pressed="true"] { background: var(--qz-fg); color: var(--qz-bg); border-color: var(--qz-fg); font-weight: 700; }
.qz .qz-job-chips button[aria-pressed="true"] i { color: inherit; }
.qz .qz-job-list { display: flex; flex-direction: column; gap: 8px; }
.qz .qz-job { background: var(--qz-card); border-radius: 14px; box-shadow: var(--qz-shadow); overflow: hidden; min-width: 0; }
.qz .qz-job[hidden] { display: none; }
.qz .qz-job-btn { width: 100%; text-align: left; border: 0; background: none; color: var(--qz-fg); padding: 13px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; min-height: 44px; }
.qz .qz-job-t { font-size: 15px; font-weight: 700; line-height: 1.4; }
/* 가벼운 순번 — 몇 번째까지 봤는지 알게 (사용자 2026-10-02). 제목보다 흐리고 작게 */
.qz .qz-job-no { display: inline-block; min-width: 18px; font-size: 13px; font-weight: 800; color: var(--qz-muted); margin-right: 6px; font-variant-numeric: tabular-nums; }
.qz .qz-job-new { font-size: 11px; font-weight: 900; color: #fff; background: var(--qz-accent); border-radius: 4px; padding: 0 5px; margin-right: 5px; vertical-align: 1px; }
.qz .qz-job-m { font-size: 13px; color: var(--qz-muted); }
.qz .qz-job-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.qz .qz-job-tags span { font-size: 12px; background: var(--qz-chip); border-radius: 6px; padding: 1px 7px; }
.qz .qz-job-tags .is-urgent { background: var(--qz-bad-soft); color: var(--qz-bad); font-weight: 700; }
.qz .qz-job-more { border-top: 1px dashed var(--qz-line); padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.qz .qz-job-more[hidden] { display: none; }
.qz .qz-job-more dl { margin: 0; display: grid; grid-template-columns: 4.5em 1fr; gap: 4px 8px; }
.qz .qz-job-more dt { color: var(--qz-muted); }
.qz .qz-job-more dd { margin: 0; min-width: 0; }
.qz .qz-job-row { display: flex; gap: 8px; }
.qz .qz-job-row .qz-btn { display: inline-flex; align-items: center; justify-content: center; }
.qz .qz-job-msg { font-size: 12px; color: var(--qz-muted); text-align: center; white-space: pre-line; word-break: break-all; }
.qz .qz-job-msg[hidden] { display: none; }
.qz .qz-job-morebtn { flex: 0 0 auto; width: 100%; }
.qz .qz-job-morebtn[hidden] { display: none; }
.qz .qz-job-empty, .qz .qz-job-none { background: var(--qz-card); border-radius: 14px; box-shadow: var(--qz-shadow); text-align: center; font-size: 14px; color: var(--qz-muted); }
.qz .qz-job-none[hidden] { display: none; }
.qz .qz-job-empty a, .qz .qz-job-none a { display: block; padding: 16px; min-height: 44px; }

/* 2차 — 이벤트 배너·순위·정정 띠·오류 신고. 휴대폰 폭 420 에서 가로로 넘치지 않게 flex-wrap·min-width:0 */
/* 이벤트 배너 — 첫 시안(mockup.html .ev) 꼴 그대로 (사용자 2026-10-02) */
.qz .qz-ev{margin:12px 0;background:linear-gradient(135deg,#ff6a00,#e2341d);color:#fff;border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.qz .qz-ev-top{display:flex;justify-content:space-between;gap:8px;font-size:12px;flex-wrap:wrap}
.qz .qz-ev-tag{font-weight:900;letter-spacing:.12em;background:rgba(255,255,255,.22);border-radius:4px;padding:0 6px}
.qz .qz-ev-title{margin:0;font-size:18px;font-weight:900;line-height:1.35;letter-spacing:-.02em}
.qz .qz-ev-title small{font-size:13px;font-weight:500;opacity:.92}
.qz .qz-ev-me{background:rgba(0,0,0,.18);border-radius:12px;padding:10px 12px;font-size:13px;display:flex;align-items:center;gap:10px;justify-content:space-between;min-width:0}
.qz .qz-ev-me b{font-size:16px;font-variant-numeric:tabular-nums}
.qz .qz-ev-me small{opacity:.95;font-size:13px;font-weight:700}
.qz .qz-ev-rank{text-align:right}
.qz .qz-ev-login{background:#fff;color:#e2341d;font-size:14px;font-weight:900;border-radius:999px;padding:6px 16px;min-height:40px;display:inline-flex;align-items:center;flex:0 0 auto}
.qz .qz-ev-links{display:flex;gap:8px;flex-wrap:wrap}
.qz .qz-ev-links a{border:1px solid rgba(255,255,255,.55);color:#fff;font-size:14px;font-weight:700;border-radius:999px;padding:4px 14px;min-height:40px;display:inline-flex;align-items:center}
.qz .qz-ev-streak{margin:0;font-size:14px;font-weight:600;line-height:1.5}
.qz .qz-ev-streak b{font-weight:900}
/* 점수 안내 두 칸 (2026-10-03 사용자) — '오늘 맞히면 10점' | '매일 이어서 풀면 15점까지' */
.qz .qz-ev-chips{display:flex;gap:8px}
.qz .qz-ev-chips[hidden]{display:none}
.qz .qz-ev-chip{flex:1;min-width:0;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:8px 10px;line-height:1.3}
.qz .qz-ev-chip small{display:block;font-size:13px;font-weight:600}
.qz .qz-ev-chip b{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.qz .qz-ev-chip em{font-style:normal;font-size:13px;font-weight:700;margin-left:2px}
/* 카카오톡 공유 (2026-10-03) — 이벤트 띠 맨 아래. 노란 단추는 카카오톡 공유라는 것을 한눈에 */
.qz .qz-share{margin-top:2px;padding-top:12px;border-top:1px solid rgba(255,255,255,.25)}
.qz .qz-share-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;border:0;border-radius:12px;background:#fee500;color:#191919;font-family:inherit;font-size:15px;font-weight:900;cursor:pointer}
.qz .qz-share-btn:active{transform:translateY(1px)}
.qz .qz-share-note{margin:7px 0 0;font-size:13.5px;text-align:center}
.qz .qz-share-note a{color:#fff;text-decoration:underline}
.qz .qz-share-ask{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.2);text-align:center;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.qz .qz-share-ask[hidden]{display:none}
.qz .qz-share-ask p{flex-basis:100%;margin:0;font-size:13px;line-height:1.5}
.qz .qz-share-ask small{opacity:.85;font-size:12px}
.qz .qz-share-login,.qz .qz-share-plain{flex:1;min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none}
.qz .qz-share-login{background:#fff;color:#e8470f;border:0}
.qz .qz-share-plain{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}
.qz .qz-share-done{margin:6px 0 0;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.18);font-size:12.5px;text-align:center}
.qz .qz-rank-split{display:block;font-size:12.5px;color:var(--qz-muted,#7a726b);font-weight:500}
/* 상품 확인하기 (2026-10-03) — 이벤트 띠 안 흰 단추 + 창. 아이콘은 이모지 대신 선 아이콘(fragments/icons) */
.qz .qz-ev-prize{border:1px solid #fff;background:#fff;color:#e2341d;font-family:inherit;font-size:14px;font-weight:800;border-radius:999px;padding:4px 14px;min-height:40px;display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.qz .qz-ev-prize .ico{width:14px;height:14px}
.qz-prize{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000}  /* inset 은 iOS 14.4 이하에서 무시된다 */
.qz-prize[hidden]{display:none}
.qz-prize-dim{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.45)}
.qz-prize-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;box-sizing:border-box;padding:20px;border-radius:18px;background:var(--qz-card,#fff);color:var(--qz-fg,#1d1b19)}
.qz-prize-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.qz-prize-tit{margin:0;font-size:18px;font-weight:900;letter-spacing:-.02em}
.qz-prize-x{flex:none;width:32px;height:32px;margin-right:-6px;padding:0;border:0;background:none;color:#999;cursor:pointer;display:flex;align-items:center;justify-content:center}
.qz-prize-x .ico{width:20px;height:20px}
.qz-prize-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:0 0 12px;padding:0;list-style:none}  /* 1~10등을 따로 적으면 칸이 많아진다 — 줄을 넘겨 늘어선다 */
.qz-prize-list li{min-width:0;border:1px solid var(--qz-line,#ebe6e1);border-radius:12px;overflow:hidden;text-align:center}
.qz-prize-img{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:var(--qz-accent-soft,#fff3ea);color:var(--qz-accent,#ff6600)}
.qz-prize-img img{width:100%;height:100%;object-fit:cover;display:block}
.qz-prize-img .ico{width:40px;height:40px}
.qz-prize-name{display:block;padding:8px 6px;font-size:14px;line-height:1.4}
.qz-prize-info{margin:0;padding:10px 12px;border-radius:10px;background:var(--qz-chip,#f1ede9);font-size:13.5px;line-height:1.7}
.qz-prize-info div{display:flex;gap:8px}
.qz-prize-info dt{flex:none;font-weight:800}
.qz-prize-info dd{margin:0;min-width:0}
.qz-prize-go{display:flex;align-items:center;justify-content:center;height:50px;margin-top:14px;border-radius:12px;background:var(--qz-accent,#ff6600);color:#fff;font-size:16px;font-weight:800;text-decoration:none}
@media (max-width:840px){
  .qz-prize-box{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:90%;border-radius:18px 18px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
}
.qz .qz-fix{margin:0 0 8px;padding:7px 10px;border-radius:8px;background:#fff8d6;color:#7a5a00;font-size:13px;font-weight:700}
.qz .qz-fix-why{margin-top:6px;font-size:13px;color:#7a5a00}
.qz .qz-report{margin-top:12px;font-size:13px;color:#888}
.qz .qz-report button.qz-link{background:none;border:0;padding:6px 0;color:#888;text-decoration:underline;font-size:13px;min-height:32px}
.qz .qz-report textarea{width:100%;box-sizing:border-box;margin-top:6px;min-height:64px;font-size:14px}
.qz .qz-rank{margin:14px 0;padding:16px;border-radius:14px;background:#fff;border:1px solid #eee}
/* 안내 줄들이 서로 붙어 보였다 — 칸 사이를 띄운다 (2026-10-02 화면 확인) */
.qz .qz-rank > * + *{margin-top:10px}
.qz .qz-rank .qz-note + .qz-note{margin-top:8px}
.qz .qz-rank .qz-btn.is-primary{display:inline-flex;align-items:center;margin-top:16px}
.qz .qz-rank h1,.qz .qz-rank h2{font-size:18px;font-weight:800}
.qz .qz-rank h1 small,.qz .qz-rank h2 small{display:block;font-size:13px;color:#888;font-weight:600;margin-top:2px}
.qz .qz-rank-prize{margin-top:6px;font-size:14px;color:#c2410c;font-weight:700}
.qz .qz-rank-list{list-style:none;margin:12px 0 0;padding:0}
.qz .qz-rank-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #f2f2f2;font-size:14px}
.qz .qz-rank-list li.is-me{background:#fff8f0;font-weight:700}
.qz .qz-rank-no{flex:none;width:28px;text-align:center;font-weight:800;color:#c2410c}
.qz .qz-rank-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qz .qz-rank-pt{flex:none;color:#555}
.qz .qz-rank-me{margin-top:10px;font-size:14px}
.qz .qz-drawn{color:#888;font-size:12px}
/* 떠 있는 댓글 단추가 맨 아래 글(지난 문제 하나 더 풀기·더 보기 띠)을 가리지 않게 아래를 비워 둔다 */
.qz-body .qz { padding-bottom: 72px; }
/* 채용 제목이 두 줄이면 둘째 줄을 순번 뒤에 맞춘다 (순번 칸 18 + 6) */
.qz .qz-job-t { display: block; padding-left: 24px; text-indent: -24px; }
.qz .qz-job-no, .qz .qz-job-new { text-indent: 0; }
/* 🔥 인기 — 이번 주 조회수 많은 공고 최대 3건 (JobsThisWeekController.hotIdx) */
.qz .qz-job-hot { display: inline-block; text-indent: 0; font-size: 11px; font-weight: 900; color: #fff; background: #e2341d; border-radius: 4px; padding: 0 5px; margin-right: 5px; vertical-align: 1px; }

/* 2026-10-03 화면 손보기 — 답 전에는 띠를 접고(문제가 첫 화면에), 공유는 결과 아래 한 곳에 */
.qz .qz-ev-prizes{margin:0;font-size:15px;font-weight:800;line-height:1.45}
.qz .qz-ev-sub{margin:0;font-size:13.5px;font-weight:600;line-height:1.45}
/* 결과 아래로 옮겨 온 카카오 공유 묶음 — 띠와 같은 주황 바탕이라 안의 흰 글자 규칙(.qz-share-*)을 그대로 쓴다 */
.qz .qz-sharebox{background:linear-gradient(135deg,#ff6a00,#e2341d);color:#fff;border-radius:14px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:4px}
.qz .qz-sharebox[hidden]{display:none}
.qz .qz-sharebox-q{margin:0;font-size:15px;font-weight:800;text-align:center}
.qz .qz-sharebox .qz-share{margin-top:6px;padding-top:0;border-top:0}
.qz .qz-copylink{text-align:center}
.qz .qz-copylink button{border:0;background:none;color:#fff;font:inherit;font-size:13px;text-decoration:underline;min-height:36px;cursor:pointer;opacity:.95}
.qz .qz-copylink .qz-share-msg{color:#fff}
/* 내일 다시 — '내일 오전 10시 새 문제 · 내일 맞히면 N점 · 순위 보기' */
.qz .qz-next{margin:0;font-size:14px;line-height:1.6}
.qz .qz-next b{color:var(--qz-accent);font-weight:900}
.qz .qz-next-go{display:inline-flex;align-items:center;min-height:36px;margin-left:8px;color:var(--qz-accent);font-weight:700;text-decoration:underline}
/* 순위 화면 — 내 순위 상자·비회원 로그인 단추·점수 규칙 목록 (2026-10-03) */
.qz .qz-rank-mebox{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--qz-accent-soft);border:1px solid var(--qz-accent-line);font-size:16px}
.qz .qz-rank-mebox b{color:var(--qz-accent);font-weight:900}
.qz .qz-rank-mebox small{display:block;font-size:13px;color:var(--qz-muted)}
.qz .qz-rank-loginbtn{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:12px;border-radius:12px;background:var(--qz-accent);color:#fff !important;font-size:16px;font-weight:800}
.qz .qz-rules ul{margin:4px 0 0;padding-left:18px;list-style:disc}
.qz .qz-rules li{font-size:13.5px;line-height:1.6}
.qz .qz-rules p{margin-top:6px}
.qz-prize-rules{margin:0;padding-left:16px;list-style:disc}
/* 문제 글의 조건 상자 — 묻는 말(굵게)과 조건(보통 굵기·조금 작게)을 나눈다 (사용자 2026-10-04) */
.qz .qz-q{display:flex;flex-direction:column;gap:10px;white-space:normal}
.qz .qz-q-text{white-space:pre-line}
.qz .qz-cond{margin:0;padding:12px 14px;background:var(--qz-bg);border:1px solid var(--qz-line);border-radius:10px;font-size:15px;font-weight:400;line-height:1.6;letter-spacing:normal;color:#3a3530;display:flex;flex-direction:column;gap:5px}
.qz .qz-cond p{margin:0}
/* 목록 줄 — 주황 점. '(가) …' 줄도 같은 꼴 */
.qz .qz-cond-li{position:relative;padding-left:14px}
.qz .qz-cond-li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--qz-accent)}
.qz .qz-cond-note b{display:inline-block;margin-right:6px;padding:0 7px;border-radius:5px;background:var(--qz-chip);font-size:12.5px;font-weight:700;color:var(--qz-muted);vertical-align:1px}

/* 법령개정 소식 (/law-news, 2026-10-06) — 세 칸(곧 시행 · 최근 시행 · 바뀐 화재안전기준). 줄 하나가 소방정보 글 하나 */
.qz .qz-law { background: var(--qz-card); border-radius: 16px; box-shadow: var(--qz-shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.qz .qz-law h2 { font-size: 16px; font-weight: 900; letter-spacing: -.02em; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qz .qz-law-more { font-size: 12.5px; font-weight: 700; color: var(--qz-accent); min-height: 32px; display: inline-flex; align-items: center; }
.qz .qz-law-list { display: flex; flex-direction: column; }
.qz .qz-law-list li + li { border-top: 1px solid var(--qz-line); }
.qz .qz-law-list a { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; min-height: 44px; }
/* D-day 칩은 숫자 폭이 들쭉날쭉하지 않게 고정 폭·tabular */
.qz .qz-law-chip { flex: 0 0 auto; min-width: 52px; text-align: center; font-size: 12px; font-weight: 800; border-radius: 6px; padding: 2px 6px; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qz .qz-law-chip.is-soon { background: var(--qz-accent-soft); color: var(--qz-accent); border: 1px solid var(--qz-accent-line); }
.qz .qz-law-chip.is-live { background: var(--qz-ok-soft); color: var(--qz-ok); border: 1px solid transparent; }
.qz .qz-law-body { display: flex; flex-direction: column; min-width: 0; }
.qz .qz-law-tit { font-size: 15px; font-weight: 700; line-height: 1.4; }
.qz .qz-law-when { font-size: 12.5px; color: var(--qz-muted); }
/* 화재안전기준 묶음 — 날짜 한 줄 + 코드 칩들(한 칩이 글 하나). 코드 아래 설비 이름은 작게 */
.qz .qz-law-group { display: flex; flex-direction: column; gap: 6px; }
.qz .qz-law-group + .qz-law-group { border-top: 1px solid var(--qz-line); padding-top: 10px; }
.qz .qz-law-date { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.qz .qz-law-date .qz-law-chip { min-width: 0; margin-top: 0; }
.qz .qz-law-codes { display: flex; flex-wrap: wrap; gap: 6px; }
.qz .qz-law-codes a { display: flex; flex-direction: column; min-width: 0; max-width: 100%; background: var(--qz-chip); border-radius: 8px; padding: 5px 9px; min-height: 40px; justify-content: center; line-height: 1.3; }
.qz .qz-law-codes b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.qz .qz-law-codes span { font-size: 11.5px; color: var(--qz-muted); }

/* 지금 의견 받는 중 — 입법예고 토론 카드 (/law-news 맨 위, 2026-10-08). 시행 예정(주황)과 갈리게 초록 줄을 위에 */
.qz .lt { gap: 10px; }
.qz .lt-h { display: inline-flex; align-items: center; gap: 6px; }
.qz .lt-h .ico { width: 18px; height: 18px; color: var(--qz-ok); }
.qz .lt-lead { margin-top: -4px; font-size: 13.5px; color: var(--qz-muted); }
.qz .lt-lead b { color: var(--qz-ok); }
.qz .lt-card { border: 1px solid var(--qz-line); border-top: 4px solid var(--qz-ok); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.qz .lt-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.qz .lt-chip { font-size: 12px; font-weight: 800; color: var(--qz-ok); background: var(--qz-ok-soft); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.qz .lt-org { font-size: 12px; color: var(--qz-muted); text-align: right; }
.qz .lt-tit { font-size: 16px; font-weight: 800; line-height: 1.45; }
.qz .lt-pts { font-size: 14px; line-height: 1.5; }
/* 전역 리셋이 목록 점을 지운다 — 앞에 점을 직접 단다 */
.qz .lt-pts li { position: relative; margin: 2px 0; padding-left: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qz .lt-pts li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--qz-muted); }
.qz .lt-q { padding: 11px 12px; border-radius: 12px; background: var(--qz-accent-soft); border: 1px solid var(--qz-accent-line); font-size: 14px; font-weight: 700; line-height: 1.5; }
.qz .lt-q span { display: block; font-size: 11.5px; font-weight: 800; color: var(--qz-accent); margin-bottom: 2px; }
.qz .lt-cl > li { padding: 10px 2px; }
.qz .lt-cl .qz-cbody { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* 쓰기 상자 (2026-10-08 시안 B) — 이름표 · 쓰는 칸 · 아랫단(누구 이름으로 + 등록)을 한 상자에. 어디에 쓰고 무엇을 누르는지 한눈에 */
.qz .lt-box { border: 1.5px solid var(--qz-accent); border-radius: 14px; background: var(--qz-card); overflow: hidden; margin-top: 2px; }
.qz .lt-box:focus-within { box-shadow: 0 0 0 3px var(--qz-accent-soft); }
.qz .lt-label { display: flex; align-items: center; gap: 5px; padding: 10px 14px 0; font-size: 13px; font-weight: 800; color: var(--qz-accent); }
.qz .lt-label .ico { width: 15px; height: 15px; }
.qz .lt-box textarea { display: block; width: 100%; box-sizing: border-box; height: 72px; min-height: 0; resize: none; border: 0; outline: none; background: transparent; padding: 6px 14px 8px; font: inherit; font-size: 15px; line-height: 1.5; color: var(--qz-fg); }
.qz .lt-msg { padding: 0 14px 8px; font-size: 13px; color: var(--qz-ok); }
.qz .lt-msg.is-bad { color: var(--qz-bad); }
.qz .lt-msg:empty { display: none; }
.qz .lt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--qz-line); background: var(--qz-bg); padding: 8px 8px 8px 14px; }
.qz .lt-who { font-size: 12.5px; line-height: 1.45; color: var(--qz-muted); min-width: 0; }
.qz .lt-who b { color: var(--qz-fg); }
.qz .lt-who a { color: var(--qz-accent); font-weight: 700; text-decoration: underline; }
.qz .lt-go { flex: 0 0 auto; min-height: 44px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--qz-accent); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; }
.qz .lt-go:disabled { opacity: .6; }
/* 쓰기와 헷갈리지 않게 카드 맨 아래 얇은 선으로 뗀다 */
.qz .lt-more { display: flex; justify-content: center; align-items: center; min-height: 44px; margin: 2px -14px -6px; border-top: 1px solid var(--qz-line); font-size: 14px; font-weight: 700; color: var(--qz-muted); }
.qz .lt-cl[hidden] { display: none; }

/* 탭 (2026-10-08) — 의견 받는 중 · 법령 개정 · 화재안전기준. 위 알약 탭과 갈리게 밑줄 모양, 내려도 위에 붙어 있다 */
.qz .ln-tabs { position: sticky; top: 0; z-index: 5; display: flex; background: var(--qz-bg); border-bottom: 1px solid var(--qz-line); margin: 0 -16px; padding: 0 16px; }
.qz .ln-tabs a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 46px; margin-bottom: -1px; border-bottom: 3px solid transparent; font-size: 15px; font-weight: 700; color: var(--qz-muted); white-space: nowrap; }
.qz .ln-tabs a.is-on { color: var(--qz-fg); border-bottom-color: var(--qz-accent); }
/* 칸 상자는 display:flex 라 hidden 을 이긴다 — 탭에서 뺀 칸을 확실히 숨긴다 */
.qz .qz-law[hidden] { display: none; }
/* 탭 이름과 같은 제목을 뺀 칸 — 링크만 오른쪽에 */
.qz .qz-law h2.is-solo { justify-content: flex-end; margin-bottom: -6px; }