/* guide-library.html 전용 스타일 — 인라인 <style> 에서 옮겼다(라이트 테마 P3-C). 공용 크롬은 hub.css·nav.css. */
:root{ --r:20px } /* 페이지 레이아웃 토큰 */

.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:calc(var(--glow-opacity)*1.25);mix-blend-mode:var(--glow-blend)}
.blob.a{width:560px;height:560px;background:radial-gradient(circle,var(--glow1),transparent 65%);top:-220px;right:-120px;animation:d1 20s ease-in-out infinite alternate}
.blob.b{width:480px;height:480px;background:radial-gradient(circle,var(--glow3),transparent 60%);bottom:-220px;left:-140px;animation:d2 24s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(-60px,70px) scale(1.1)}}
@keyframes d2{to{transform:translate(70px,-50px) scale(1.12)}}
.grain{position:fixed;inset:0;z-index:-1;opacity:var(--grain-opacity);pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}


/* ===== 페이지 헤드 ===== */
.phead{padding:64px 0 36px;max-width:680px} /* 중앙 컬럼 헤드 — 로드맵과 동일한 사이트 공통 문법 */
.crumb{font-family:"Space Grotesk";font-size:12.5px;color:var(--txt-faint);letter-spacing:.04em;margin-bottom:22px}
.phead h1{font-size:clamp(40px,6vw,72px);font-weight:700;font-family:"Space Grotesk";letter-spacing:-.03em;line-height:1}
.phead h1 .it{font-family:"Instrument Serif";font-style:italic;font-weight:400;background:linear-gradient(100deg,var(--amber),var(--ember),var(--crim));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.16em}
.phead p{color:var(--txt-dim);font-size:16px;margin-top:18px;max-width:520px}

/* ===== 검색 + 필터 바 ===== */
.toolbar{display:flex;gap:14px;align-items:center;margin:34px 0 30px;flex-wrap:wrap}
.search{flex:1;min-width:240px;display:flex;align-items:center;gap:12px;background:var(--glass);border:1px solid var(--glass-line);border-radius:100px;padding:13px 22px;backdrop-filter:blur(14px)}
.search input{flex:1;background:none;border:0;outline:0;color:var(--txt);font-size:15px;font-family:var(--font-sans)}
.search input::placeholder{color:var(--txt-faint)}
.search svg{flex:0 0 18px;stroke:var(--txt-dim)}
.sortbtn{display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--glass-line);border-radius:100px;padding:13px 20px;font-size:13.5px;color:var(--txt-dim);font-family:"Space Grotesk";cursor:pointer;transition:border-color .2s}
.sortbtn:hover{border-color:rgba(var(--plasma-rgb),.4)}

.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:38px}
.chip{font-size:13px;color:var(--txt-dim);background:var(--glass);border:1px solid var(--glass-line);padding:9px 17px;border-radius:100px;cursor:pointer;transition:all .2s;font-weight:500}
.chip:hover{color:var(--txt);border-color:rgba(var(--plasma-rgb),.4)}
.chip.on{background:linear-gradient(120deg,var(--ember),var(--crim));color:var(--on-accent);border-color:transparent}
.chip .c{font-family:"Space Grotesk";opacity:.8;margin-left:6px;font-size:11.5px}

/* ===== 카드 그리드 ===== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:60px}
.card{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);padding:26px;backdrop-filter:blur(14px);position:relative;overflow:hidden;transition:transform .25s,border-color .25s;display:flex;flex-direction:column;min-height:248px}
.card:hover{transform:translateY(-5px);border-color:rgba(var(--plasma-rgb),.4)}
.card::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--glow1),transparent 70%);opacity:0;top:-60px;right:-60px;filter:blur(30px);transition:opacity .35s;mix-blend-mode:var(--glow-blend)}
.card:hover::after{opacity:.45}
.toprow{display:flex;justify-content:space-between;align-items:center;margin-bottom:auto;position:relative;z-index:2}
.lvl{font-family:"Space Grotesk";font-size:11px;letter-spacing:.08em;padding:5px 11px;border-radius:100px;border:1px solid var(--glass-line)}
.lvl.l1{color:var(--amber)}.lvl.l2{color:var(--ember)}.lvl.l3{color:var(--crim)}
.read{font-family:"Space Grotesk";font-size:12px;color:var(--txt-faint)}
.card h3{font-size:20px;font-weight:600;margin:22px 0 10px;letter-spacing:-.01em;position:relative;z-index:2;line-height:1.3}
.card .desc{font-size:14px;color:var(--txt-dim);position:relative;z-index:2;flex:1}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px;position:relative;z-index:2}
.tg{font-size:11.5px;color:var(--txt-faint);background:rgba(var(--ink-rgb),.04);padding:4px 10px;border-radius:6px}
.reviewline{margin-top:14px;position:relative;z-index:2}
.review-state{display:inline-flex;align-items:center;min-height:26px;padding:3px 9px;border:1px solid var(--glass-line);border-radius:100px;color:var(--txt-dim);font-family:"Space Grotesk";font-size:11.5px;font-weight:600}
.review-reviewed{color:var(--green)}
.foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;position:relative;z-index:2;border-top:1px solid rgba(var(--ink-rgb),.06);padding-top:16px}
.foot .by{font-size:12px;color:var(--txt-faint)}
.foot .arr{font-family:"Space Grotesk";font-size:13px;color:var(--txt);transition:transform .2s}
.card:hover .arr{transform:translateX(4px);color:var(--ember)}

/* featured */
.card.feat{grid-column:span 2;background:linear-gradient(135deg,rgba(var(--ember-rgb),.14),rgba(var(--crim-rgb),.07)),var(--glass);border-color:rgba(var(--plasma-rgb),.25)}
.card.feat h3{font-size:27px;font-family:"Space Grotesk"}
.card.feat .desc{font-size:15px;max-width:80%}
.fbadge{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ember)}

/* ===== 카테고리 색군(cg-*) — 안전=crim · 데이터=blue · LLM=ember · 현장=amber · 공공=green ===== */
.cg-ember{--cg:var(--ember);--cg-rgb:var(--ember-rgb)}
.cg-amber{--cg:var(--amber);--cg-rgb:var(--amber-rgb)}
.cg-blue{--cg:var(--blue);--cg-rgb:var(--blue-rgb)}
.cg-green{--cg:var(--green);--cg-rgb:var(--green-rgb)}
.cg-crim{--cg:var(--crim);--cg-rgb:var(--crim-rgb)}
/* 카드: 상단 그라디언트 바(::before — ::after는 호버 글로우가 사용) + 색군 배경 틴트 + 호버 색군 발광 */
.card[class*="cg-"]{background:linear-gradient(165deg,rgba(var(--cg-rgb),.085),rgba(var(--cg-rgb),.015) 52%),var(--glass)}
.card[class*="cg-"]::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cg) 0%,rgba(var(--cg-rgb),.55) 45%,rgba(var(--cg-rgb),0) 90%);z-index:3}
.card[class*="cg-"]::after{background:radial-gradient(circle,rgba(var(--cg-rgb),.8),transparent 70%)}
.card[class*="cg-"]:hover{border-color:rgba(var(--cg-rgb),.5);box-shadow:0 22px 52px -20px rgba(var(--cg-rgb),.5)}
.card[class*="cg-"]:hover .arr{color:var(--cg)}
.card.feat[class*="cg-"]{background:linear-gradient(135deg,rgba(var(--cg-rgb),.16),rgba(var(--cg-rgb),.05) 60%),var(--glass);border-color:rgba(var(--cg-rgb),.3)}
.card.feat[class*="cg-"] .fbadge{color:var(--cg)}
/* 칩: 색군 틴트 — 활성은 색군 글라스(틴트 배경+컬러 텍스트, AA 유지) */
.chip[class*="cg-"]{border-color:rgba(var(--cg-rgb),.32)}
.chip[class*="cg-"] .c{color:var(--cg);opacity:.85}
.chip[class*="cg-"]:hover{color:var(--cg);border-color:rgba(var(--cg-rgb),.65)}
.chip.on[class*="cg-"]{background:rgba(var(--cg-rgb),.16);border-color:var(--cg);color:var(--cg);box-shadow:0 0 18px -4px rgba(var(--cg-rgb),.45)}

.pager{display:flex;justify-content:center;gap:8px;margin:20px 0 80px}
.pg{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--glass);border:1px solid var(--glass-line);font-family:"Space Grotesk";font-size:14px;color:var(--txt-dim);cursor:pointer;transition:all .2s}
.pg:hover{color:var(--txt);border-color:rgba(var(--plasma-rgb),.4)}
.pg.on{background:linear-gradient(120deg,var(--ember),var(--crim));color:var(--on-accent);border-color:transparent}


@media (max-width:900px){.menu,.enter{display:none}.burger{display:block}.grid{grid-template-columns:repeat(2,1fr)}.card.feat{grid-column:span 2}}
@media (max-width:560px){.wrap{padding:0 18px}.grid{grid-template-columns:1fr}.card.feat{grid-column:span 1}.card.feat .desc{max-width:100%}}