/* v2-case.css — 제작 사례 페이지 (v2-guide.css 위에 얹는 작은 추가분) */
.cs-tags{display:flex;flex-wrap:wrap;gap:8px}
.cs-tags a.gd-cat:hover{filter:brightness(.97)}
.gd-cat.cs-tag-rescue,.cs-tag-rescue{color:#9a3412;background:#fff1e6}
.cs-tag{display:inline-flex;font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px}
/* 스크린샷 */
.cs-shots{margin:28px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:end}
.cs-shots.has-m{grid-template-columns:minmax(0,1fr) 150px}
.cs-shots a{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);box-shadow:var(--shadow-2)}
.cs-shots img{display:block;width:100%;height:auto}
.cs-shot-m{border-radius:22px!important}
.cs-shots figcaption{grid-column:1/-1;font-size:13.5px;color:var(--muted)}
.cs-shots figcaption a{display:inline;border:0;box-shadow:none;background:none;border-radius:0;color:var(--brand-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;margin-right:6px}
.cs-visit{margin-top:24px}
/* 본문 */
.cs-h3{margin-top:22px;font-size:16px;font-weight:740}
.cs-feats{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.cs-feats li{padding:9px 14px;border:1px solid var(--line);border-radius:999px;font-size:14.5px;font-weight:620;color:var(--ink-2);background:#fff}
.cs-tbl table{min-width:0}
.cs-tbl th{width:120px;white-space:nowrap}
.cs-tbl td a{color:var(--brand-ink);font-weight:650;word-break:break-all}
.cs-ba{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:12px;align-items:stretch}
.cs-ba>div:not(.cs-arrow){padding:18px 20px;border-radius:14px}
.cs-ba b{display:block;font-size:13px;font-weight:780;margin-bottom:8px}
.cs-ba ul{display:grid;gap:6px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.cs-ba li{padding-left:14px;position:relative}
.cs-ba li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45}
.cs-before{background:#fff7f0;border:1px solid #fbd9bf}.cs-before b{color:#9a3412}
.cs-after{background:#f3f8f6;border:1px solid #cfe9dd}.cs-after b{color:var(--brand-ink)}
.cs-arrow{display:grid;place-items:center;font-size:20px;color:var(--muted-2)}
.gd-note a{color:var(--brand-ink);font-weight:650;text-decoration:underline;text-underline-offset:3px}
/* 카드 그리드 (관련 사례·허브) */
.cs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:8px}
.cs-grid-sm{margin-top:14px}
.cs-rel a.cs-card{display:flex;padding:0;gap:0;align-items:stretch}
.cs-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s;min-width:0}
.cs-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.cs-thumb{display:block;aspect-ratio:16/10;background:var(--bg-2);border-bottom:1px solid var(--line);overflow:hidden}
.cs-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.cs-noimg{display:grid;place-items:center;height:100%;font-size:18px;font-weight:760;color:var(--muted-2);padding:16px;text-align:center}
.cs-body{display:flex;flex-direction:column;padding:16px 18px 18px;gap:8px;flex:1}
.cs-meta{display:flex;flex-wrap:wrap;gap:6px}
.cs-card h2,.cs-card h3{font-size:16.5px;line-height:1.4;font-weight:740;letter-spacing:-.02em}
.cs-card p{font-size:14px;line-height:1.6;color:var(--muted)}
.cs-rel .cs-card{flex-direction:column}
.cs-more{margin-top:14px}
.cs-more a{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700;color:var(--brand-ink)}
.cs-side-visit{margin-top:8px!important}
/* 허브 */
.cs-hub .gd-crumb{margin-bottom:22px}
.cs-hub .sec-head{margin-bottom:32px}
.cs-hubnav{margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.cs-hubnav b{display:block;font-size:14px;font-weight:750;color:var(--muted);margin-bottom:12px}
.cs-hubnav div{display:flex;flex-wrap:wrap;gap:8px}
.cs-hubnav a{padding:7px 13px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:620;color:var(--ink-2)}
.cs-hubnav a:hover,.cs-hubnav a[aria-current]{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)}
.cs-hub-cta{margin-top:40px}
@media (max-width:1000px){.cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .cs-grid{grid-template-columns:minmax(0,1fr)}
  .cs-shots.has-m{grid-template-columns:minmax(0,1fr) 96px;gap:10px}
  .cs-shot-m{border-radius:14px!important}
  .cs-ba{grid-template-columns:minmax(0,1fr)}
  .cs-arrow{transform:rotate(90deg);height:20px}
  .cs-tbl th{width:auto;white-space:normal}
}