/* 자료실 자동 썸네일: 제목에서 도구와 숫자를 뽑아 카드마다 다르게 그린다 */
.guides-page .article-row.auto-row{grid-template-columns:220px minmax(0,1fr) 2.5rem;align-items:center;gap:28px}
.article-row-meta-inline{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted)}
.article-row-meta-inline em{font-style:normal;font-weight:700;color:var(--accent-strong)}
.auto-thumb{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:140px;padding:14px 16px;border-radius:16px;overflow:hidden;box-sizing:border-box;isolation:isolate}
.auto-thumb::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55}
.auto-thumb::after{content:"";position:absolute;width:150px;height:150px;right:-50px;bottom:-60px;border-radius:50%;z-index:-1;opacity:.55;filter:blur(2px)}
.t-c1{background:#efe8fb;color:#4a2a9c}.t-c1::after{background:#c9b4f5}
.t-c2{background:#e5f0ec;color:#1f5c48}.t-c2::after{background:#a9dcc8}
.t-c3{background:#fbe8ef;color:#8e2753}.t-c3::after{background:#f5b3cd}
.t-c4{background:#fdf1df;color:#8a4a10}.t-c4::after{background:#f7cd94}
.t-c5{background:#e6ebfb;color:#2a3f9c}.t-c5::after{background:#b4c3f5}
.t-v1::before{background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);background-size:22px 22px;opacity:.07}
.t-v2::before{background:repeating-radial-gradient(circle at 100% 0,transparent 0 18px,currentColor 18px 19px);opacity:.1}
.t-v3::before{background:repeating-linear-gradient(135deg,transparent 0 12px,currentColor 12px 13px);opacity:.07}
.t-v4::before{background-image:radial-gradient(currentColor 1.2px,transparent 1.4px);background-size:14px 14px;opacity:.14}
.auto-thumb-tool{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:5px 10px 5px 6px;border-radius:999px;background:rgba(255,255,255,.75);font-size:12px;font-weight:700;letter-spacing:-.01em;color:currentColor}
.auto-thumb-tool img{width:20px;height:20px;border-radius:6px;object-fit:contain}
.auto-thumb-hook{font-family:Pretendard,sans-serif;font-weight:900;font-size:40px;line-height:1;letter-spacing:-.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auto-thumb-hook.is-long{font-size:26px;line-height:1.15;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.article-row.auto-row:hover .auto-thumb{transform:translateY(-2px)}
.auto-thumb{transition:transform .2s ease}
@media (max-width:760px){
.guides-page .article-row.auto-row{grid-template-columns:112px minmax(0,1fr);gap:14px;padding-block:18px}
.guides-page .article-row.auto-row>b{display:none}
.auto-thumb{height:96px;padding:9px 10px;border-radius:12px}
.auto-thumb-tool{font-size:10px;padding:3px 7px 3px 4px}.auto-thumb-tool img{width:14px;height:14px}
.auto-thumb-hook{font-size:26px}.auto-thumb-hook.is-long{font-size:16px}
.guides-page .article-row-copy strong{font-size:17px !important}
}
@media (prefers-reduced-motion:reduce){.auto-thumb{transition:none}}
/* 라이브 사이트 모바일 규칙(.article-row-copy grid-column:1)을 덮어 썸네일 옆에 본문을 둔다 */
@media (max-width:860px){
.guides-page .article-row.auto-row{grid-template-columns:112px minmax(0,1fr);gap:14px;padding-block:18px}
.guides-page .article-row.auto-row>.auto-thumb{grid-column:1;grid-row:1}
.guides-page .article-row.auto-row>.article-row-copy{grid-column:2;grid-row:1;align-self:center}
.guides-page .article-row.auto-row>b{display:none}
.auto-thumb{height:96px;padding:9px 10px;border-radius:12px}
.auto-thumb-tool{font-size:10px;padding:3px 7px 3px 4px}.auto-thumb-tool img{width:14px;height:14px}
.auto-thumb-hook{font-size:26px}.auto-thumb-hook.is-long{font-size:16px}
.article-row-meta-inline{font-size:12px;flex-wrap:wrap;gap:6px}
.guides-page .article-row-copy strong{font-size:16px !important}
.guides-page .article-row.auto-row:hover{padding-inline:.35rem}
}

/* 목록 쪽 이동 */
.guide-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:32px 0 8px}
.pager-button{min-width:40px;height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line,#e5e5ea);background:#fff;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.pager-button:hover:not(:disabled){border-color:currentColor}
.pager-button.is-current{background:var(--ink,#111);border-color:var(--ink,#111);color:#fff}
.pager-button:disabled{opacity:.35;cursor:default}