/* 스미스 연구소 꾸미기 — 유령 캐릭터·상황별 모음·인기/새 도구 (content/postbuild.py 가 assets/css/lab.css 로 복사) */

/* ── 유령 + 말풍선 */
.ghost-say { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; margin: 18px 0; }
.ghost-say img { width: 112px; height: auto; filter: drop-shadow(0 6px 10px rgba(42,31,77,.15)); }
.ghost-say .gs-bubble { min-width: 0; color: var(--text); position: relative; padding: 14px 16px; background: var(--panel); border: 2px solid var(--line); border-radius: 16px; font-size: 15px; line-height: 1.65; }
.ghost-say .gs-bubble::before { content: ''; position: absolute; left: -11px; top: 50%; width: 18px; height: 18px; background: var(--panel); border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); transform: translateY(-50%) rotate(45deg); }
.ghost-say .gs-bubble p { margin: 0 0 8px; } .ghost-say .gs-bubble p:last-child { margin: 0; }
.ghost-say.sm { grid-template-columns: 72px 1fr; } .ghost-say.sm img { width: 72px; }
@media (max-width: 520px) { .ghost-say { grid-template-columns: 76px 1fr; } .ghost-say img { width: 76px; } }

/* 홈 히어로 옆 유령 */
.site-hero { position: relative; }
.hero-ghost { position: absolute; right: 18px; bottom: -6px; width: 150px; height: auto; pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.25)); }
.hero-ghost-say { position: absolute; right: 150px; bottom: 96px; max-width: 220px; padding: 8px 12px; background: #fff; color: #2a1f4d; border-radius: 14px 14px 2px 14px; font-size: 13.5px; font-weight: 700; line-height: 1.4; box-shadow: 0 6px 16px rgba(0,0,0,.15); transition: opacity .3s; }
@media (min-width: 761px) { .site-hero > p, .site-hero > h1 { max-width: calc(100% - 400px); } }
@media (max-width: 760px) { .hero-ghost { width: 92px; right: 8px; bottom: -4px; opacity: .95; } .hero-ghost-say { display: none; } .site-hero .hero-links { padding-right: 84px; } }

/* ── 홈 구역 */
.lab-block { margin: 30px 0; }
.lab-block .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lab-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
.lab-card { display: grid; grid-template-columns: 40px 1fr; column-gap: 10px; row-gap: 2px; align-items: start; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); position: relative; }
.lab-card:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.lab-card .i { grid-row: span 2; font-size: 26px; line-height: 40px; text-align: center; }
.lab-card b { font-size: 15px; line-height: 1.3; padding-right: 40px; } .lab-card small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.lab-card .tag { position: absolute; top: 8px; right: 8px; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--accent-2); color: #fff; }
.lab-card .tag.hot { background: var(--accent-3); color: #2a1f4d; }

/* 상황별 모음 카드 */
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.col-card { display: flex; gap: 12px; padding: 16px; border-radius: 16px; color: var(--text); background: linear-gradient(135deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); position: relative; overflow: hidden; }
.col-card:hover { text-decoration: none; border-color: var(--accent); box-shadow: 0 8px 22px rgba(124,58,237,.14); }
.col-card .ci { font-size: 34px; line-height: 1; }
.col-card b { display: block; font-size: 16px; line-height: 1.35; margin-bottom: 4px; } .col-card small { color: var(--muted); font-size: 13px; line-height: 1.45; display: block; }
.col-card em { font-style: normal; font-size: 12px; color: var(--accent); font-weight: 700; display: inline-block; margin-top: 6px; }

/* ── 모음 페이지 */
.col-steps { list-style: none; padding: 0; margin: 16px 0; counter-reset: s; display: grid; gap: 10px; }
.col-steps li { counter-increment: s; }
.col-steps a { display: grid; grid-template-columns: 34px 40px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; color: var(--text); }
.col-steps a:hover { border-color: var(--accent); text-decoration: none; }
.col-steps a::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 14px; }
.col-steps .i { font-size: 26px; text-align: center; } .col-steps b { display: block; font-size: 15.5px; } .col-steps small { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.col-steps .go { font-size: 13px; color: var(--accent); font-weight: 700; white-space: nowrap; }
@media (max-width: 520px) { .col-steps a { grid-template-columns: 30px 32px 1fr; } .col-steps .go { display: none; } }

/* ── 도구 페이지: 이 도구가 들어 있는 모음 */
.in-col { margin: 22px 0; padding: 14px 16px; border: 2px dashed var(--line); border-radius: 16px; }
.in-col .links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.in-col .links a { padding: 6px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); font-size: 13.5px; }
.in-col .links a:hover { border-color: var(--accent); text-decoration: none; }