/* 'AI로 하는 일' 일 페이지(work/<id>.html, 2026-10-26) — tokens.css·hub.css·work-icons.css 위에 얹는다. 생성 페이지(templates/work.html, builders/work-kits.js).
 * 섬이 아니다 — 히어로도 바탕을 칠하지 않아 페이지 배경(오로라·그레인)이 그대로 보이고, 라이트 테마에서는 라이트 토큰으로 그린다.
 * 그래서 section-hero 클래스·section-hero.css 를 쓰지 않고 부품 이름(section-hero-copy·hero-eyebrow·hero-actions·hero-btn)만 빌려
 * 여기서 토큰으로 그린다(운영 사항 operations.css 와 같은 방식). 색은 토큰만(theme-ratchet 상한 0).
 * 시각 요소(2026-10-26 기획 12절 1 — 운영자 '박스와 글만 있어 피로감'): 묶음 색 --wg-c(main[data-wgroup], 표는 work-icons.css)로
 * h1 옆 일 아이콘·절 머리 아이콘·결과 모양 그림(.wk-shape — SVG 도식, 그림 칸 f-* 는 아래)을 칠한다. 960px 이하는 그림이 글 아래로 작게.
 * 프롬프트는 단계 흐름(.wk-step — 번호 표지·종류 아이콘·이어 그은 선)으로 보이되 글자는 그대로(줄바꿈 글자는 숨긴 .wk-nl).
 * 준비할 것·넣지 않을 것·점검표는 상자 대신 아이콘 글머리와 옅은 바탕으로 나눈다.
 * 주황(--ember)은 실행 단추(프롬프트 복사)와 라벨에만, 번호는 --amber, 넣지 않을 것은 --amber, 점검표 표시는 --green.
 * 긴 프롬프트 줄·주소는 줄을 바꿔 390px 에서도 가로로 넘치지 않는다(.wk-prompt-text·.wk-fill overflow-wrap:anywhere — 한글은 keep-all 로 낱말 안에서 끊지 않는다).
 * 실측 비교(#compare): 'AI가 낸 답 그대로' 틀은 머리를 오목한 칸(--well)으로 나눠 사이트 글과 구별하고, A·B 두 칸은 나란히(860px 이하 위아래),
 * 답은 이스케이프한 글을 줄바꿈 그대로(pre-wrap) — 공백 없는 긴 주소도 칸 안에서 끊는다. 표시(틀린 곳·확인되지 않은 곳)는 --pending 한 가지.
 * 규칙: .claude/rules/hubs/work-kits.md · 시험: scripts/lib/builders/work-kits.test.js */
.blob{position:absolute;border-radius:50%;filter:blur(95px);opacity:var(--glow-opacity);mix-blend-mode:var(--glow-blend)}
.blob.a{width:600px;height:600px;background:radial-gradient(circle,var(--glow1),transparent 65%);top:-240px;left:-180px;animation:wkb1 22s ease-in-out infinite alternate}
.blob.b{width:480px;height:480px;background:radial-gradient(circle,var(--glow3),transparent 60%);top:48%;right:-200px;animation:wkb2 26s ease-in-out infinite alternate}
@keyframes wkb1{to{transform:translate(70px,60px) scale(1.08)}}
@keyframes wkb2{to{transform:translate(-60px,-50px) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.blob.a,.blob.b{animation:none}}

.wk-main{padding-bottom:24px}

/* ── 히어로: 경로 → 라벨 → (일 아이콘 + 제목) → 설명 → 단추 | 결과 모양 그림 ── */
.wk-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:32px 56px;align-items:center;padding-top:52px;padding-bottom:8px}
.wk-hero .section-hero-copy{min-width:0;max-width:720px}
.wk-hero .hero-eyebrow{margin:0 0 16px;font:600 11px/1.5 "Space Grotesk",var(--font-sans);letter-spacing:.16em;color:var(--ember)}
.wk-title{display:flex;align-items:center;gap:18px}
.wk-kit-ico{--wi-size:64px}
.wk-kit-ico>.wi{stroke-width:1.5}
.wk-hero h1{margin:0;min-width:0;font-size:clamp(34px,4.6vw,58px);font-weight:700;letter-spacing:-.035em;line-height:1.1;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
.wk-lede{margin:20px 0 0;max-width:60ch;font-size:17px;line-height:1.85;color:var(--read);text-wrap:pretty}
.wk-gives{margin:16px 0 0;max-width:64ch;padding:14px 18px;border:1px solid var(--glass-line);border-left:2px solid rgba(var(--ember-rgb),.7);border-radius:4px 14px 14px 4px;background:var(--glass);backdrop-filter:blur(14px);font-size:15px;line-height:1.8;color:var(--read)}
.wk-gives p{margin:0}
.wk-gives .wk-gives-k{margin:0 0 2px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--txt)}
.wk-hero .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.wk-hero .hero-btn{display:inline-flex;align-items:center;min-height:46px;padding:12px 20px;border:1px solid var(--glass-line);border-radius:10px;background:var(--glass);backdrop-filter:blur(10px);color:var(--txt);font-size:14px;font-weight:600;transition:border-color .2s,transform .2s,box-shadow .2s}
.wk-hero .hero-btn:hover{border-color:rgba(var(--ember-rgb),.55);transform:translateY(-2px)}
.wk-hero .hero-btn.is-primary{border-color:var(--accent-fill);background:var(--accent-fill);color:var(--on-accent)}
.wk-hero .hero-btn.is-primary:hover{box-shadow:0 12px 26px -14px rgba(var(--ember-rgb),.75)}

/* 결과 모양 그림 — 받게 될 결과물의 꼴(장식 SVG, 설명은 figcaption). 그림 칸 뒤에 묶음 색 옅은 빛 */
.wk-shape{min-width:0;margin:0;color:var(--wg-c)}
.wk-shape-art{position:relative;padding:12px;border:1px solid var(--glass-line);border-radius:22px;background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--shadow-card);overflow:hidden}
.wk-shape-art::before{content:"";position:absolute;inset:-30% -10%;background:radial-gradient(closest-side,currentColor,transparent);opacity:.09;pointer-events:none}
.wk-shape-svg{position:relative;display:block;width:100%;height:auto}
.wk-shape figcaption{display:flex;flex-direction:column;gap:2px;margin:12px 6px 0;font-size:13.5px;line-height:1.65;color:var(--txt-dim);word-break:keep-all;overflow-wrap:anywhere}
.wk-shape-k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--txt)}
.wk-shape-k::before{content:"";width:14px;height:2px;border-radius:2px;background:currentColor;color:var(--wg-c)}
/* 그림 칸(f-*) — 종이·카드는 옅은 면, 글 줄은 굵은 둥근 선, 강조는 묶음 색, 확인 표시는 --green, 글자는 프롬프트의 낱말만 */
.f-card,.f-panel,.f-thumb,.f-sh{fill:rgba(var(--ink-rgb),.05);stroke:rgba(var(--ink-rgb),.2);stroke-width:1}
.f-cur{fill:none;stroke:var(--wg-c);stroke-width:1.6}
.f-ln,.f-ln2,.f-ttl,.f-ttl2,.f-ttl3,.f-dot,.f-cmd,.f-out,.f-lead{fill:none;stroke-linecap:round}
.f-ln{stroke:rgba(var(--ink-rgb),.3);stroke-width:3.2}
.f-ln2{stroke:rgba(var(--ink-rgb),.17);stroke-width:2.6}
.f-ttl{stroke:var(--wg-c);stroke-width:5}
.f-ttl2{stroke:var(--wg-c);stroke-width:3.2;stroke-opacity:.7}
.f-ttl3{stroke:var(--wg-c);stroke-width:9}
.f-dot{stroke:rgba(var(--ink-rgb),.24);stroke-width:1.2;stroke-dasharray:1 3}
.f-lead{stroke:rgba(var(--ink-rgb),.28);stroke-width:1}
.f-grid{fill:none;stroke:rgba(var(--ink-rgb),.12);stroke-width:1}
.f-dash{fill:none;stroke:rgba(var(--ink-rgb),.34);stroke-width:1.2;stroke-dasharray:4 3}
.f-col{fill:var(--wg-c);fill-opacity:.26}
.f-chip{fill:var(--wg-c);fill-opacity:.55}
.f-acs{fill:var(--wg-c);fill-opacity:.14;stroke:var(--wg-c);stroke-opacity:.45;stroke-width:1}
.f-ac{fill:none;stroke:var(--wg-c);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.f-ic{fill:none;stroke:var(--wg-c);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.f-ok{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-badge{fill:var(--bg);stroke:var(--green);stroke-width:1.4}
.f-dotf{fill:var(--wg-c)}
.f-box{fill:none;stroke:var(--green);stroke-width:1.2}
.f-bar{fill:var(--wg-c);fill-opacity:.38}
.f-bar2{fill:var(--wg-c);fill-opacity:.9}
.f-trk{fill:none;stroke:rgba(var(--ink-rgb),.1);stroke-width:12}
.f-arc{fill:none;stroke:var(--wg-c);stroke-width:12;stroke-opacity:.9}
.f-arc2{fill:none;stroke:var(--wg-c);stroke-width:12;stroke-opacity:.4}
.f-bub{fill:rgba(var(--ink-rgb),.06);stroke:var(--wg-c);stroke-width:1.2}
.f-bubt{fill:none;stroke:var(--wg-c);stroke-width:1.2;stroke-linecap:round}
.f-trkr{fill:rgba(var(--ink-rgb),.08)}
.f-seg{fill:var(--wg-c);fill-opacity:.85}
.f-seg2{fill:var(--wg-c);fill-opacity:.4}
.f-err{fill:var(--pending);fill-opacity:.8}
.f-head{fill:var(--bg);stroke:var(--wg-c);stroke-width:2}
.f-total{fill:var(--wg-c);fill-opacity:.12;stroke:var(--wg-c);stroke-width:1.2}
.f-file{fill:rgba(var(--ink-rgb),.06);stroke:rgba(var(--ink-rgb),.34);stroke-width:1.1;stroke-linejoin:round}
.f-file2{fill:var(--wg-c);fill-opacity:.12;stroke:var(--wg-c);stroke-width:1.1;stroke-linejoin:round}
.f-num{fill:var(--wg-c);fill-opacity:.22;stroke:var(--wg-c);stroke-width:1}
.f-tx{fill:var(--txt-dim);font:600 8.5px/1 var(--font-sans)}
.f-tx2{fill:var(--txt-faint);font:500 8.5px/1 var(--font-sans)}
.f-toc,.f-lab{fill:var(--read);font:500 9px/1 var(--font-sans)}
.f-strong,.f-on{fill:var(--txt)}
.f-sm{font-size:7px;font-weight:500}
.f-n{fill:var(--txt);font-size:7px;font-weight:700}
/* 터미널 창은 다크 섬(.theme-dark — 라이트에서도 어둡다, 사이트의 터미널 그림과 같은 약속) */
.f-term{fill:var(--inst);stroke:rgba(var(--ink-rgb),.16);stroke-width:1}
.f-prompt{fill:var(--green);font:700 10px/1 var(--font-sans)}
.f-cmd{stroke:var(--green);stroke-width:3.2;stroke-opacity:.85}
.f-out{stroke:rgba(var(--ink-rgb),.3);stroke-width:2.6}
.f-caret{fill:var(--green)}

/* ── 절 ── */
.wk-sec{margin-top:80px;scroll-margin-top:96px}
.wk-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.wk-head-ico{--wi-size:40px}
.wk-no{font:600 13px/1 "Space Grotesk",var(--font-sans);letter-spacing:.1em;color:var(--amber);font-variant-numeric:tabular-nums}
.wk-head h2{margin:0;font-size:clamp(24px,2.6vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--txt)}
.wk-intro{margin:0 0 22px;max-width:68ch;font-size:15.5px;line-height:1.85;color:var(--txt-dim)}

/* 01 바로 쓰는 프롬프트 — 붙여 넣는 글을 단계 흐름으로(글자는 그대로) */
.wk-prompt{min-width:0;border:1px solid var(--glass-line);border-radius:18px;background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--shadow-card);overflow:hidden}
.wk-prompt-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 22px;border-bottom:1px solid var(--glass-line);font-size:13px;font-weight:600;color:var(--txt-dim)}
.wk-copy{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:9px;background:var(--accent-fill);color:var(--on-accent);font-size:13.5px;font-weight:700;transition:box-shadow .2s,transform .2s}
.wk-copy:hover{box-shadow:0 10px 22px -12px rgba(var(--ember-rgb),.75);transform:translateY(-1px)}
.wk-flow-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:14px 22px 0;list-style:none;font-size:12.5px;line-height:1.5;color:var(--txt-dim)}
.wk-flow-key li{display:inline-flex;align-items:center;gap:6px}
.wk-key-ico{width:15px;height:15px}
.wk-flow-key [data-kind="open"],.wk-step[data-kind="open"]{--wk-k:var(--blue)}
.wk-flow-key [data-kind="find"],.wk-step[data-kind="find"]{--wk-k:var(--viz-2)}
.wk-flow-key [data-kind="write"],.wk-step[data-kind="write"]{--wk-k:var(--amber)}
.wk-flow-key [data-kind="check"],.wk-step[data-kind="check"]{--wk-k:var(--green)}
.wk-key-ico,.wk-step-ico{color:var(--wk-k)}
.wk-prompt-text{margin:0;padding:6px 22px 10px;max-height:none;font:14.5px/1.8 var(--font-sans);color:var(--txt);white-space:pre-wrap;overflow-wrap:anywhere;word-break:keep-all;scroll-margin-top:110px}
.wk-nl{display:none}
.wk-lead{display:block;padding:12px 0 10px;font-size:15.5px;font-weight:600;color:var(--txt)}
.wk-steps{display:block}
.wk-step{position:relative;display:grid;grid-template-columns:28px 18px minmax(0,1fr);column-gap:12px;align-items:start;padding:7px 0}
.wk-step::before{content:"";position:absolute;left:13.5px;top:38px;bottom:-6px;width:1px;background:rgba(var(--ink-rgb),.14)}
.wk-step:last-child::before{display:none}
.wk-step-no{grid-column:1;grid-row:1;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--glass-line);border-radius:50%;background:var(--well);font:600 12.5px/1 "Space Grotesk",var(--font-sans);color:var(--txt);font-variant-numeric:tabular-nums}
.wk-step-dot{font-size:0}
.wk-step-ico{grid-column:2;grid-row:1;width:18px;height:18px;margin-top:5px}
.wk-step-t{grid-column:3;grid-row:1;min-width:0;padding-top:1px}
.wk-url{padding:0 .3em;border-radius:5px;background:rgba(var(--ink-rgb),.07);color:var(--txt-dim);font-size:.93em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wk-fill-label{margin:14px 22px 6px;font:600 11px/1.5 "Space Grotesk",var(--font-sans);letter-spacing:.14em;color:var(--txt-faint)}
.wk-fill{margin:0 22px 20px;padding:12px 16px;border:1px dashed var(--glass-line);border-radius:10px;background:var(--well);font:14px/1.8 var(--font-sans);color:var(--read);white-space:pre-wrap;overflow-wrap:anywhere;word-break:keep-all}
/* 다음에 보낼 말 — 확인을 기다리는 일만(데이터 reply), 프롬프트 상자 아래 */
.wk-reply{margin:14px 0 0;max-width:72ch;padding:12px 16px;border:1px solid var(--glass-line);border-left:2px solid var(--wg-c);border-radius:4px 12px 12px 4px;background:var(--glass);font-size:14.5px;line-height:1.8;color:var(--read);overflow-wrap:anywhere;word-break:keep-all}
.wk-reply p{margin:0}
.wk-reply .wk-reply-k{margin:0 0 2px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--txt)}

/* 02 붙여 넣기 전에 — 준비할 것(full)·넣지 않을 것: 상자 대신 위 선 하나와 옅은 바탕, 아이콘 글머리 */
.wk-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.wk-two.is-one{grid-template-columns:minmax(0,1fr)}
.wk-two.is-one .wk-card{max-width:78ch}
.wk-card{min-width:0;padding:22px 24px 18px;border-top:2px solid var(--wk-c);border-radius:3px 3px 18px 18px;background:linear-gradient(180deg,var(--glass),transparent 92%)}
.wk-prepare{--wk-c:var(--wg-c)}
.wk-never{--wk-c:var(--amber)}
.wk-card h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--txt)}
.wk-h3-ico{width:22px;height:22px;color:var(--wk-c)}
.wk-card ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wk-card li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start;padding:7px 0;font-size:15px;line-height:1.75;color:var(--read)}
.wk-li-ico{width:17px;height:17px;margin-top:5px;color:var(--wk-c)}
.wk-basis{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--glass-line);font-size:13px;line-height:1.75;color:var(--txt-dim);overflow-wrap:anywhere}
.wk-basis a,.wk-next a,.wk-back a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.wk-next{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;font-size:13.5px;line-height:1.7}

/* 03 결과 점검표 — 사람이 확인할 것: 두 칸, 줄마다 초록 확인 아이콘(낱낱의 상자 없음) */
.wk-check{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.wk-check li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--glass-line);font-size:15px;line-height:1.75;color:var(--read)}
.wk-check .wk-li-ico{width:30px;height:30px;margin-top:0;padding:6px;border-radius:9px;color:var(--green);background:rgba(var(--green-rgb),.12)}

/* 더 깊게 — 이 일에 쓰는 사이트 자료(종류 아이콘) */
.wk-refs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.wk-ref{display:flex;flex-direction:column;gap:6px;height:100%;min-width:0;padding:16px 18px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--shadow-card);transition:border-color .2s,transform .2s,box-shadow .2s}
.wk-ref:hover,.wk-ref:focus-visible{border-color:rgba(var(--ember-rgb),.42);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.wk-ref-k{display:inline-flex;align-items:center;gap:7px;font:600 11px/1.5 "Space Grotesk",var(--font-sans);letter-spacing:.1em;color:var(--amber)}
.wk-ref-k .wi{width:15px;height:15px;color:var(--wg-c)}
.wk-ref-t{font-size:16px;font-weight:700;line-height:1.45;color:var(--txt)}
.wk-ref:hover .wk-ref-t{color:var(--link)}
/* 안내서 요약은 길어 같은 줄 카드보다 크게 늘어난다 — 세 줄까지만 보이고 전문은 그 안내서에 있다 */
.wk-ref-d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:13.5px;line-height:1.7;color:var(--txt-dim);overflow-wrap:anywhere}
.wk-back{margin:26px 0 0;font-size:14px}

/* 그냥 했을 때와 견주어 보기 — 틀 밖: 센 값 표('이 시험에서는')·센 사람 / 틀 안: AI가 낸 답 그대로 */
.wk-cmp-stale{margin:0 0 18px;max-width:68ch;padding:10px 14px;border:1px solid rgba(var(--amber-rgb),.4);border-radius:10px;background:var(--warn-tint);font-size:14px;line-height:1.75;color:var(--read)}
.wk-cmp-table-wrap{max-width:80ch;overflow-x:auto;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(14px)}
.wk-cmp-table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.6;color:var(--read)}
.wk-cmp-table caption{padding:14px 18px 6px;text-align:left;font:700 12.5px/1.5 var(--font-sans);letter-spacing:.01em;color:var(--amber)}
.wk-cmp-table th,.wk-cmp-table td{padding:10px 18px;border-top:1px solid var(--glass-line);text-align:left;vertical-align:top}
.wk-cmp-table thead th{font-size:12.5px;font-weight:600;color:var(--txt-dim)}
.wk-cmp-table tbody th{font-weight:600;color:var(--txt)}
.wk-cmp-table td{min-width:7em;font-variant-numeric:tabular-nums;color:var(--txt)}
.wk-cmp-exec{margin-top:0}
.wk-cmp-table-wrap+.wk-cmp-table-wrap{margin-top:12px}
.wk-cmp-exec-notes{list-style:none;margin:8px 0 0;padding:0;max-width:80ch;display:grid;gap:4px;font-size:13.5px;line-height:1.7;color:var(--read);overflow-wrap:anywhere}
.wk-cmp-exec-notes b{margin-right:8px;font:700 12px/1 "Space Grotesk",var(--font-sans);color:var(--txt-dim)}
.wk-cmp-by{margin:10px 0 0;font-size:13px;line-height:1.7;color:var(--txt-faint)}
/* 같은 일의 판 둘 — 주제 범위 이름표(사이트에 자료가 있는 주제·거의 없는 주제), 둘째 블록은 위에 선 하나로 나눈다 */
.wk-cmp-case{margin:34px 0 14px;padding-top:22px;border-top:1px solid var(--glass-line);font-size:17px;font-weight:600;line-height:1.5;color:var(--txt)}
.wk-cmp-case:first-of-type{margin-top:18px;padding-top:0;border-top:0}
.wk-cmp{min-width:0;margin-top:22px;border:1px solid var(--glass-line);border-radius:18px;background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--shadow-card);overflow:hidden}
.wk-cmp-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:16px 22px;border-bottom:1px dashed var(--glass-line);background:var(--well)}
.wk-cmp-label{margin:0;font:700 13.5px/1.5 var(--font-sans);letter-spacing:.01em;color:var(--txt)}
/* 메타 한 줄 — 항목마다 앞에 점을 둬서, 좁은 화면에서 줄이 바뀌어도 줄 머리가 구분점으로 시작하지 않는다 */
.wk-cmp-meta{display:flex;flex-wrap:wrap;gap:2px 16px;margin:0;font-size:12.5px;line-height:1.7;color:var(--txt-dim)}
.wk-cmp-meta span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 7px 0 0;border-radius:50%;background:var(--txt-faint);vertical-align:middle}
.wk-cmp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.wk-cmp-col{min-width:0;padding:18px 22px 22px}
.wk-cmp-col+.wk-cmp-col{border-left:1px solid var(--glass-line)}
.wk-cmp-col h4{display:flex;align-items:center;gap:10px;margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.4;color:var(--txt)}
.wk-cmp-tag{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border:1px solid var(--glass-line);border-radius:8px;font:700 13px/1 "Space Grotesk",var(--font-sans);color:var(--txt-dim)}
.wk-cmp-b .wk-cmp-tag{border-color:rgba(var(--ember-rgb),.55);color:var(--ember)}
.wk-cmp-sub{margin:6px 0 0;font-size:13.5px;line-height:1.7;color:var(--txt-dim)}
.wk-cmp-sent{margin:12px 0 0;font-size:13.5px;line-height:1.75;color:var(--read);overflow-wrap:anywhere}
.wk-cmp-sent b{margin-right:8px;font-size:12px;font-weight:600;color:var(--txt-dim)}
.wk-cmp-sent summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--link)}
.wk-cmp-sent pre{margin:8px 0 0;padding:10px 12px;border:1px dashed var(--glass-line);border-radius:10px;background:var(--well);font:12.5px/1.75 var(--font-sans);color:var(--read);white-space:pre-wrap;overflow-wrap:anywhere;word-break:keep-all}
.wk-cmp-open{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:var(--txt-faint)}
/* 이 시험에서 채운 칸(B)·이어 보낸 글(두 쪽 같은 둘째 턴) — 보낸 글과 같은 작은 이름표 */
.wk-cmp-fill,.wk-cmp-turn{margin:10px 0 0;font-size:13px;line-height:1.75;color:var(--read);overflow-wrap:anywhere}
.wk-cmp-fill b,.wk-cmp-turn b{margin-right:8px;font-size:12px;font-weight:600;color:var(--txt-dim)}
.wk-cmp-turn{padding-top:10px;border-top:1px dashed var(--glass-line)}
.wk-answer{margin:14px 0 0;padding:14px 16px;border-radius:12px;background:var(--well);font:14px/1.85 var(--font-sans);color:var(--read);white-space:pre-wrap;overflow-wrap:anywhere;word-break:keep-all}
.wk-cmp-linknote{flex-basis:100%;margin:0;font-size:12px;line-height:1.6;color:var(--txt-faint)}
/* AI 답 속 링크(운영자 결정 2026-10-26) — 사이트 링크와 구별되게 점선 밑줄과 ↗ */
.wk-ai-link{color:var(--txt-dim);text-decoration:underline dotted;text-underline-offset:3px;overflow-wrap:anywhere}
.wk-ai-link:hover{color:var(--txt)}
.wk-ai-link:focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-radius:2px}
.wk-ai-link-mark{margin-left:2px;font-size:.85em;color:var(--txt-faint)}
.wk-flag{padding:0 2px;border-radius:3px;background:rgba(var(--pending-rgb),.16);box-shadow:inset 0 -2px 0 rgba(var(--pending-rgb),.7);color:var(--txt);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wk-flag sup{margin-left:2px;font:700 10.5px/1 "Space Grotesk",var(--font-sans);color:var(--pending)}
.wk-flags{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.wk-flags li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border:1px solid rgba(var(--pending-rgb),.3);border-radius:10px;background:rgba(var(--pending-rgb),.06);font-size:13.5px;line-height:1.7;color:var(--read);overflow-wrap:anywhere}
.wk-flags li p{margin:0}
.wk-flags q{color:var(--txt-dim)}
.wk-flags .wk-flag-no{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:6px;background:rgba(var(--pending-rgb),.16);font:700 11.5px/1 "Space Grotesk",var(--font-sans);color:var(--pending)}

@media (max-width:960px){
  .wk-hero{grid-template-columns:minmax(0,1fr)}
  .wk-shape{width:100%;max-width:420px}
}
@media (max-width:860px){
  .wk-two{grid-template-columns:minmax(0,1fr)}
  .wk-check{grid-template-columns:minmax(0,1fr)}
  .wk-cmp-cols{grid-template-columns:minmax(0,1fr)}
  .wk-cmp-col+.wk-cmp-col{border-left:0;border-top:1px solid var(--glass-line)}
}
@media (max-width:600px){
  .wk-hero{padding-top:34px}
  .wk-title{gap:14px}
  .wk-hero h1{text-wrap:wrap} /* 좁은 화면은 앞에서부터 채운다 — 균형 맞추기가 '카드뉴스 / ·SNS 게시물'처럼 가운뎃점 앞에서 끊었다 */
  .wk-kit-ico{--wi-size:48px}
  .wk-shape{max-width:340px}
  .wk-lede{font-size:16px}
  .wk-sec{margin-top:60px}
  .wk-head-ico{--wi-size:34px}
  .wk-prompt-text{padding:4px 16px 8px;font-size:14px}
  .wk-flow-key{padding:12px 16px 0;gap:4px 14px}
  .wk-step{grid-template-columns:26px 16px minmax(0,1fr);column-gap:9px}
  .wk-step-no{width:26px;height:26px;font-size:12px}
  .wk-step::before{left:12.5px;top:36px}
  .wk-step-ico{width:16px;height:16px}
  .wk-fill-label{margin:12px 16px 6px}
  .wk-fill{margin:0 16px 16px}
  .wk-prompt-bar{padding:12px 16px}
  .wk-card{padding:18px 16px 14px}
  .wk-refs{grid-template-columns:minmax(0,1fr)}
  .wk-cmp-head{padding:14px 16px}
  .wk-cmp-col{padding:16px}
  .wk-answer{padding:12px 13px;font-size:13.5px}
  .wk-cmp-table th,.wk-cmp-table td{padding:9px 12px}
  .wk-cmp-table caption{padding:12px 12px 4px}
}
@media print{
  .wk-prompt,.wk-card,.wk-ref,.wk-gives,.wk-cmp,.wk-cmp-table-wrap,.wk-shape-art{box-shadow:none;backdrop-filter:none}
  .wk-copy,.wk-hero .hero-actions,.wk-shape{display:none}
}