/* 홈 / 01 '무엇을 하려고 하나요?' — AI로 하는 일 15가지 목록(2026-10-26, BUILD:WORKLIST · builders/work-list.js).
 * 옛 업무 노선도(usage-map.css·usage-map.js)를 바꾼 자리. 네 묶음을 유리 카드로, 카드마다 일 아이콘(묶음 색 — work-icons.css 의 [data-wgroup])·
 * 이름·한 줄 요약·그 일 페이지 링크, 그리고 줄 오른쪽에 그 일의 프롬프트 복사 단추(2026-10-26 기획 12절 2 — 줄 링크와 따로 놓인 형제).
 * 복사 단추는 '복사했습니다'로 글자가 바뀌어도 폭이 같게 min-width, 누르는 칸 44px. 복사 아이콘은 단추 밖 겹에서 누름을 가로채지 않는다.
 * wl- 접두사 규칙만 둔다(.blob·.wrap·.hero-* 같은 페이지 공용 선택자 금지). 색은 토큰만(theme-ratchet 0) — 라이트에서는 라이트 토큰으로 그린다.
 * 긴 이름·요약은 390px 에서도 카드 안에서 줄바꿈한다(한글은 낱말 사이에서만 — keep-all). 560px 이하는 복사 단추가 글 아래로 내려온다.
 * 시험: scripts/lib/builders/work-list.test.js */
.wl-section{scroll-margin-top:96px}
#usage .shead{margin-top:72px}
.wl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.wl-group{min-width:0;scroll-margin-top:110px;padding:24px 22px 12px;border:1px solid var(--glass-line);border-radius:20px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-card)}
.wl-gname{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--txt)}
.wl-gname::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--wg-c,var(--ember));box-shadow:0 0 0 4px var(--glass-line)}
.wl-kits{list-style:none;margin:0;padding:0}
.wl-kits li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px}
.wl-kits li+li{border-top:1px solid var(--glass-line)}
.wl-kit{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:14px;min-width:0;margin:0 -10px;padding:13px 10px;border-radius:12px;color:var(--txt);transition:background .2s}
.wl-ico{--wi-size:40px}
.wl-txt{min-width:0}
.wl-kit strong{display:block;font-size:15.5px;font-weight:650;line-height:1.45;letter-spacing:-.015em;word-break:keep-all;overflow-wrap:anywhere;transition:color .2s}
.wl-kit strong::after{content:"→";display:inline-block;margin-left:6px;font-weight:400;color:var(--txt-faint);transition:transform .2s,color .2s}
.wl-sum{display:block;margin-top:3px;font-size:13.5px;line-height:1.65;color:var(--txt-dim);word-break:keep-all;overflow-wrap:anywhere}
.wl-kit:hover,.wl-kit:focus-visible{background:rgba(var(--ember-rgb),.07)}
.wl-kit:hover strong,.wl-kit:focus-visible strong{color:var(--ember)}
.wl-kit:hover strong::after,.wl-kit:focus-visible strong::after{color:var(--ember);transform:translateX(3px)}
.wl-kit:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
/* 프롬프트 복사 — 줄 링크 옆의 따로 놓인 단추 */
.wl-copybox{position:relative;display:inline-flex}
.wl-copy-ico{position:absolute;top:50%;left:12px;width:15px;height:15px;margin-top:-7.5px;color:var(--txt-dim);pointer-events:none;transition:color .2s}
.wl-copy{display:inline-flex;align-items:center;justify-content:center;min-width:9.6em;min-height:44px;padding:8px 14px 8px 34px;border:1px solid var(--glass-line);border-radius:10px;background:var(--glass);color:var(--txt);font-size:13px;font-weight:600;white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.wl-copy:hover{border-color:rgba(var(--ember-rgb),.55);background:rgba(var(--ember-rgb),.08)}
.wl-copybox:hover .wl-copy-ico,.wl-copy:focus-visible+.wl-copy-ico{color:var(--ember)}
.wl-copy:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
/* 목록에 없는 일 한 줄(2026-10-26) — 네 묶음 밖, 카드 아래. 링크는 운영 사항으로 가는 한 줄(.intro-next)과 같은 밑줄 글 */
@media (max-width:860px){.wl-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .wl-group{padding:20px 16px 10px}
  .wl-kits li{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:12px}
  .wl-kit{grid-template-columns:34px minmax(0,1fr);gap:12px;margin:0 -8px;padding:12px 8px 8px}
  .wl-ico{--wi-size:34px}
  .wl-copybox{margin-left:46px}
}
@media (prefers-reduced-motion:reduce){.wl-kit,.wl-kit strong,.wl-kit strong::after,.wl-copy,.wl-copy-ico{transition:none}}