/* 10-09 ③ 꾸미기 · 출력 「나」 안 (원장님 확정) + 색 안 C(밝은 코발트). 시안 docs/output_mock/ → 앱.
   색 토큰은 .wz(학습지 · 테스트지 · 문제집 만들기 화면) 안에서만 바꿈 — 왼쪽 사이드바 남색 · 다른 화면은 그대로 */
.wz {
  --bg: #F5F8FE; --surface: #FFFFFF; --surface-2: #F8FAFF; --mute-soft: #EEF3FC;
  --line: #E1E8F4; --line-strong: #C7D3E8;
  --text: #0F172A; --text-2: #334155; --text-3: #5B6880;
  --p-acc: #2563EB; --p-acc-hover: #1D4FD8; --p-acc-text: #1D4ED8; --p-acc-soft: #EAF1FF; --p-acc-line: #93B4F5;
  --p-sub: #F59E0B; --p-sub-soft: #FFF5DB;
  --p-sky: #0EA5E9; --p-teal: #14B8A6; --p-coral: #F9735B; --p-yellow: #FACC15; --p-violet: #8B5CF6;
  --brand: var(--p-acc); --brand-soft: var(--p-acc-soft); --navy: #1E3A8A;
}
:root[data-theme="dark"] .wz { --bg: #0E1422; --surface: #151C2C; --surface-2: #1A2234; --mute-soft: #1F2840; --line: #26314A; --line-strong: #34405E; --text: #E7ECF5; --text-2: #B2BCCF; --text-3: #8B95AA; --p-acc: #6E9BFF; --p-acc-hover: #8AAFFF; --p-acc-text: #A9C3FF; --p-acc-soft: rgba(110,155,255,.14); --p-acc-line: rgba(110,155,255,.5); --navy: #0B1020; }
/* 밝은 머리띠: 흰 바탕 · 지금 단계만 파랑 */
.wz .wz-top { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--line); }
.wz .wz-title, .wz .wz-title .ic { color: var(--text); } .wz .wz-title .ic { background: var(--p-acc); }
.wz .wz-steps button { color: var(--text-3); }
.wz .wz-steps button.done { color: var(--text-2); } .wz .wz-steps button.done i { background: var(--p-acc-soft); color: var(--p-acc-text); border-color: transparent; }
.wz .wz-steps button.on { background: var(--p-acc); color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,.28); }
.wz .wz-steps button.on i { background: #fff; border-color: #fff; color: var(--p-acc); }
.wz .wz-steps li + li::before { background: var(--line-strong); }
.wz .wz-top .btn.ghost, .wz .wz-again .again-btn { background: var(--surface); color: var(--text-2); border: 1px solid var(--line-strong); }
.wz .wz-top .btn.ghost .ic { background: var(--text-2); } .wz .wz-again .again-btn small { color: var(--text-3); }
.wz .btn.primary { background: var(--p-acc); border-color: var(--p-acc); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.28); }
.wz .btn.primary:hover { background: var(--p-acc-hover); }
.wz .wz-cnt b { color: var(--text); }

/* ── ③ 틀: 미리보기 42% · 설정판 58% (넓은 화면 56:44) ── */
.wz[data-step="3"] .wz-body { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
@media (min-width: 1600px) { .wz[data-step="3"] .wz-body { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); } }
.wz[data-step="3"] .wz-l { background: var(--bg); overflow-x: hidden; }
.wz[data-step="3"] .wz-l-in { padding: 0 16px 20px; }
.wz[data-step="3"] .wz-l-in > .wz-card { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: none; padding: 12px 14px; }
.wz[data-step="3"] .wz-l-in > .wz-card h3 { font-size: 14px; margin: 0 0 8px; }
.wz[data-step="3"] .wz-l-in > .wz-card + .wz-card { margin-top: 10px; }
.wz[data-step="3"] .wz-l-in > .wz-card.wz-out-card { background: none; border: 0; padding: 0; }
.wz[data-step="3"] .wz-pv { border-radius: 16px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.wz[data-step="3"] .pv-live-h { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--line); }
.wz[data-step="3"] .pv-live-h b { color: var(--text); } .wz[data-step="3"] .pv-live-h small { color: var(--text-3); }
.wz[data-step="3"] .pv-fit { background: var(--surface); color: var(--text-2); border: 1px solid var(--line-strong); }
.wz[data-step="3"] #pvBig { background: var(--p-acc); color: #fff; border-color: var(--p-acc); }
.wz[data-step="3"] .pv-live-f { background: #EDF2FA; }

/* ── 지금 설정 띠 ── */
.wo-sum { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 -16px 12px; padding: 10px 16px 9px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.wo-sum-l { flex: none; font-size: 12px; font-weight: 800; color: var(--text-3); margin-right: 2px; white-space: nowrap; }
.wo-sum-c { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: 12.5px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.wo-sum-c:hover { border-color: var(--p-acc-line); color: var(--p-acc-text); text-decoration: none; }

/* ── 묶음 카드 ── */
.out-opts.wo { display: block; }
.wo-card { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 13px 14px 14px; scroll-margin-top: 60px; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.wo-h { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.wo-h > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.wo-h h3 { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--text); }
.wo-h p { margin: 0; font-size: 12px; color: var(--text-3); }
.wo-gi { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--ic, var(--p-acc)) 13%, #fff); }
.wo-gi .ic { background: var(--ic, var(--p-acc)); }
.wo-gi-print { --ic: var(--p-acc); } .wo-gi-paper { --ic: var(--p-sky); } .wo-gi-qr { --ic: var(--p-teal); } .wo-gi-shape { --ic: var(--p-violet); } .wo-gi-palette { --ic: var(--p-coral); } .wo-gi-book { --ic: var(--p-sub); }
.wo-wide + .wo-grid, .wo-grid + .wo-wide { margin-top: 12px; }
.wo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.wo-col { display: grid; gap: 12px; }
.wo-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: center; }
.wo-row.top { align-items: start; } .wo-row.top > .wo-l { padding-top: 6px; }
.wo-row + .wo-row, .wo-row + .wo-hint + .wo-row { margin-top: 9px; }
.wo-l { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.wo-hint { margin: 6px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.45; } .wo-ind { margin-left: 64px; }
.wo-note { margin: 8px 0 0; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11.5px; color: var(--text-2); line-height: 1.5; }

/* 그림 칩: 용지 · 분할 · 선택지 */
.wo-pick { display: grid; gap: 5px; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.wo-pk-size { --n: 4; max-width: 340px; } .wo-pk-split { --n: 6; } .wo-pk-chl { --n: 5; }
.wo-pick label { cursor: pointer; min-width: 0; } .wo-pick label.dim { opacity: .45; cursor: default; }
.wo-pick input { position: absolute; opacity: 0; pointer-events: none; }
.wo-pick span { display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text-2); transition: border-color .15s, background .15s; }
.wo-pick span b { font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-pick label:hover span { border-color: var(--p-acc-line); }
.wo-pick input:checked + span { background: var(--p-acc-soft); border-color: var(--p-acc); color: var(--p-acc-text); box-shadow: inset 0 0 0 1px var(--p-acc); }
.wo-pick input:checked + span b { font-weight: 800; }
.wo-pick input:focus-visible + span { outline: 2px solid var(--p-acc); outline-offset: 2px; }
.wo-pick svg { flex: none; width: 30px; height: 30px; fill: none; stroke: none; }
.wo-pp rect { fill: var(--surface); stroke: currentColor; stroke-width: 1.3; } input:checked + span .wo-pp rect { fill: color-mix(in srgb, var(--p-acc) 14%, #fff); }
.wo-sp .pg { fill: #fff; stroke: var(--line-strong); stroke-width: 1; } .wo-sp .hd { fill: var(--line-strong); } .wo-sp .bx { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: .7; } .wo-sp .ln { fill: #B7BFCC; }
input:checked + span .wo-sp .pg { stroke: var(--p-acc); } input:checked + span .wo-sp .hd { fill: var(--p-acc); } input:checked + span .wo-sp .bx { fill: #fff; stroke: var(--p-acc-line); } input:checked + span .wo-sp .ln { fill: var(--p-acc-line); }
.wo-ch circle { fill: none; stroke: currentColor; stroke-width: .9; } .wo-ch .ln { fill: #B7BFCC; } input:checked + span .wo-ch .ln { fill: var(--p-acc-line); }
.wo-ch text { fill: currentColor; font: 800 13px "Pretendard Variable", Pretendard, sans-serif; } .wo-ch .l2 { stroke: currentColor; stroke-width: 1; opacity: .4; }

/* 체크 칸 (이름 + 작은 설명) */
.wo-cks { display: grid; gap: 0; } .wo-cks.g2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; } .wo-cks.wo-sub { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.wo-ck { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; min-height: 30px; cursor: pointer; }
.wo-ck input { position: absolute; opacity: 0; pointer-events: none; }
.wo-ck > i { flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 5px; border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.wo-ck > i::after { content: ''; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.wo-ck input:checked + i { background: var(--p-acc); border-color: var(--p-acc); } .wo-ck input:checked + i::after { opacity: 1; }
.wo-ck input:focus-visible + i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-acc) 25%, transparent); }
.wo-ck span { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .wo-ck b { font-size: 13.5px; font-weight: 650; color: var(--text); } .wo-ck small { font-size: 11.5px; color: var(--text-3); line-height: 1.35; }
.wo-ck.dim { opacity: .45; cursor: default; }
.wo-qr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 4px 29px; }
.wo-qrl { flex: 1; display: flex; flex-direction: column; min-width: 90px; } .wo-qrl b { font-size: 13.5px; font-weight: 650; } .wo-qrl small { font-size: 11.5px; color: var(--text-3); }
.wo-seg.seg { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; border-radius: 11px; background: var(--mute-soft); border: 1px solid var(--line); }
.wo-seg.seg span { display: block; height: 30px; line-height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.wo-seg.seg input:checked + span { background: var(--surface); color: var(--p-acc-text); font-weight: 800; border: 0; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 0 0 1.5px var(--p-acc); }
/* 뽑을 것 타일 */
.wo-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .wo-tiles.t2 { grid-template-columns: 1fr 1fr; margin-bottom: 4px; }
.wo-tile { position: relative; display: grid; grid-template-columns: 17px minmax(0, 1fr); column-gap: 7px; row-gap: 2px; align-items: center; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); cursor: pointer; }
.wo-tiles.t2 .wo-tile { grid-template-columns: 1fr; cursor: default; }
.wo-tile input { position: absolute; opacity: 0; pointer-events: none; }
.wo-tile > i { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--line-strong); background: #fff; display: grid; place-items: center; }
.wo-tile > i::after { content: ''; width: 8px; height: 4.5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.wo-tile b { font-size: 13.5px; font-weight: 700; color: var(--text); } .wo-tile small { grid-column: 1 / -1; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-tile.on { background: var(--p-acc-soft); border-color: var(--p-acc); box-shadow: inset 0 0 0 1px var(--p-acc); } .wo-tile.on > i { background: var(--p-acc); border-color: var(--p-acc); } .wo-tile.on > i::after { opacity: 1; } .wo-tile.on b { color: var(--p-acc-text); }
/* 머리말 실물 칩 (그림은 fillThumbs 가 iframe 으로 넣음) */
.wo-heads.th-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wo-heads.th-pick > button[data-theme] { display: flex; flex-direction: column; gap: 5px; align-items: stretch; padding: 5px 5px 7px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 700; }
.wo-heads.th-pick > button[data-theme] .th-thumb { display: block; width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; }
.wo-heads.th-pick > button[data-theme].on { background: var(--surface); border-color: var(--p-acc); color: var(--p-acc-text); font-weight: 800; box-shadow: 0 0 0 2px var(--p-acc-soft), inset 0 0 0 1px var(--p-acc); }
.wo-heads .wo-allth { grid-column: 1 / -1; justify-self: start; }
/* 본문 색 */
.wo-bodyc .col-pick { margin-top: 8px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 2px; }
.wo-bodyc .col-pick button { flex-direction: column; gap: 3px; padding: 4px 0 3px; border: 0; border-radius: 9px; background: none; font-size: 11px; box-shadow: none; }
.wo-bodyc .col-pick button i { width: 26px; height: 26px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 2px #fff, 0 0 0 3px transparent; }
.wo-bodyc .col-pick button.on { color: var(--p-acc-text); box-shadow: none; } .wo-bodyc .col-pick button.on i { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 2px #fff, 0 0 0 4px var(--p-acc); }
/* 배합 칩 (표지 5색 · 본문 3색) */
.wo-recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .wo-recs.b3 { grid-template-columns: 1fr; margin-top: 8px; }
.wo-recs button { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; min-width: 0; font: inherit; cursor: pointer; }
.wo-recs button:hover { border-color: var(--p-acc-line); }
.wo-recs .band { flex: none; display: flex; width: 66px; height: 22px; border-radius: 5px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); }
.wo-recs .band i { flex: 1; } .wo-recs:not(.b3) .band i:nth-child(2) { flex: 1.7; } .wo-recs.b3 .band { width: 50px; height: 18px; }
.wo-recs b { font-size: 12.5px; font-weight: 650; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-recs button.on { border-color: var(--p-acc); background: var(--p-acc-soft); box-shadow: inset 0 0 0 1px var(--p-acc); } .wo-recs button.on b { color: var(--p-acc-text); font-weight: 800; }
/* 표지 판: 3×3 + 넘기기 · 올리면 앞뒤 펼침 */
.wo-slo { margin-left: 29px; }
.wo-cvsec { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
.wo-cvh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-height: 30px; } .wo-cvh b { font-size: 13.5px; font-weight: 800; white-space: nowrap; } .wo-cvh small { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.wo-pg { display: inline-flex; align-items: center; gap: 2px; height: 30px; border: 1px solid var(--line); border-radius: 9px; padding: 0 2px; font-size: 12.5px; color: var(--text-2); }
.wo-pg button { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 16px; color: var(--text-2); cursor: pointer; } .wo-pg button:disabled { opacity: .3; cursor: default; } .wo-pg > span { padding: 0 4px; white-space: nowrap; }
.wo-cvl { position: relative; min-width: 0; }
.wo-cvwin { overflow: hidden; }
.wo-cvtrack { display: flex; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.wo-cvgrid { flex: none; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 3px; align-content: start; }
.wo-cvc { display: flex; flex-direction: column; gap: 5px; padding: 5px 5px 7px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); text-align: center; font: inherit; cursor: pointer; min-width: 0; }
.wo-cvc b { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-cvc.on { border-color: var(--p-acc); box-shadow: inset 0 0 0 1px var(--p-acc); } .wo-cvc.on b { color: var(--p-acc-text); font-weight: 800; }
.wo-cvc:hover { border-color: var(--p-acc-line); }
.wo-cvt.cv-mini, .wo-peek .cv-mini { display: block; width: 100%; aspect-ratio: 210 / 297; border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(15,23,42,.08); }
.wo-dots { display: flex; gap: 5px; justify-content: center; margin-top: 8px; } .wo-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); } .wo-dots i.on { width: 16px; border-radius: 3px; background: var(--p-acc); }
.wo-peek { position: absolute; z-index: 6; top: 38px; left: calc(100% + 8px); width: 330px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 18px 44px rgba(15,23,42,.18); opacity: 0; transform: translateX(-10px); pointer-events: none; transition: opacity .2s, transform .25s; }
.wo-peek.show { opacity: 1; transform: none; }
.wo-peek-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .wo-peek-h b { font-size: 13.5px; font-weight: 800; } .wo-peek-h small { font-size: 11.5px; color: var(--text-3); }
.wo-peek-f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .wo-peek-f > div { display: flex; flex-direction: column; gap: 4px; align-items: center; } .wo-peek-f small { font-size: 11px; font-weight: 800; color: var(--text-3); }
.wo-cvr { min-width: 0; }
.wo-wide .out-more, .wo-wide .out-row { margin-top: 10px; }

@media (max-width: 1279px) {
  .wo-grid { grid-template-columns: minmax(0, 1fr); }
  .wo-pk-split { --n: 3; }
  .wo-cvsec { grid-template-columns: 1fr; } .wo-peek { left: auto; right: 0; }
}
@media (max-width: 899px) {
  .wz[data-step="3"] .wz-l-in { padding: 0 12px 20px; }
  .wo-sum { margin: 0 -12px 10px; padding: 9px 12px 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .wo-row { grid-template-columns: 1fr; gap: 6px; } .wo-ind { margin-left: 0; }
  .wo-pk-size { --n: 4; max-width: none; } .wo-pk-split { --n: 2; } .wo-pk-chl { --n: 3; }
  .wo-cks.g2 { grid-template-columns: 1fr; }
  .wo-tiles { grid-template-columns: 1fr; } .wo-tile { grid-template-columns: 17px auto minmax(0, 1fr); } .wo-tile small { grid-column: auto; }
  .wo-bodyc .col-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wo-cvwin { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .wo-cvtrack { transform: none !important; } .wo-cvgrid { scroll-snap-align: start; }
  .wo-peek { position: fixed; left: 12px; right: 12px; top: auto; bottom: 150px; width: auto; }
  .wo-cvh small { display: none; }
  .wo-qr .wo-seg { width: 100%; } .wo-qr .wo-seg label { flex: 1; text-align: center; }
}
/* 기존 견본 크기(hub.css · mobile.css) 덮기 */
.wz .wo-cvt.cv-mini, .wz .wo-peek .cv-mini { width: 100%; height: auto; box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(15,23,42,.08); }
.wz .wo-heads .th-thumb { display: block !important; width: 100%; height: 40px; }
.wz .out-opts.wo .out-more { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.wo-peek-f { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wo-peek-f > div { min-width: 0; }
.wz .wo-peek .cv-mini { max-width: 100%; }