/* ============ Content Pages (SEO 페이지) — 네오 브루탈리즘 ============ */
:root{--c-bg:#fef3c7;--c-paper:#fff;--c-ink:#1a1325;--c-line:#1a1325;
      --c-primary:#7c3aed;--c-pink:#f472b6;--c-yellow:#fde047;--c-lime:#bef264;
      --c-shadow:4px 4px 0 var(--c-line);--c-shadow-lg:6px 6px 0 var(--c-line);
}
.content-header,.content-main{position:relative;z-index:1}
.content-inner{max-width:980px;margin:0 auto;padding:24px 18px}

.content-header{background:var(--c-paper);border-bottom:1.5px solid var(--c-line);box-shadow:0 4px 0 var(--c-line)}
.content-header h1{font-size:2rem;font-weight:900;letter-spacing:-.01em;margin:8px 0;color:var(--c-ink)}
.content-header .content-lead{color:var(--c-ink);opacity:.75;font-weight:600;margin:0}
.bc{font-size:.84rem;color:var(--c-ink);opacity:.7;margin-bottom:8px;font-weight:600}
.bc a{color:var(--c-primary);text-decoration:none;font-weight:700}
.bc a:hover{text-decoration:underline}

.content-grid{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:flex-start;padding-top:30px}
@media (max-width:780px){.content-grid{grid-template-columns:1fr}}

.content-side{position:sticky;top:24px;align-self:flex-start}
.card-hero{width:100%;max-width:260px;border:1.5px solid var(--c-line);border-radius:12px;box-shadow:var(--c-shadow-lg);display:block}

.content-body{background:var(--c-paper);border:1.5px solid var(--c-line);border-radius:14px;padding:28px 30px;box-shadow:var(--c-shadow);font-size:1rem;line-height:1.75;color:var(--c-ink)}
.content-body.wide{max-width:none}
.content-body h2{font-size:1.35rem;font-weight:900;letter-spacing:-.01em;margin:28px 0 12px;color:var(--c-ink)}
.content-body h2:first-child{margin-top:0}
.content-body p{margin:0 0 14px}
.content-body ul,.content-body ol{padding-left:24px}
.content-body li{margin-bottom:8px}

.meaning-box{background:var(--c-yellow);border:1.5px solid var(--c-line);border-radius:12px;padding:16px 20px;margin:14px 0 8px;box-shadow:var(--c-shadow)}
.meaning-box.upright{background:var(--c-lime)}
.meaning-box.reversed{background:#fda4af}
.meaning-box p{margin:0;font-size:1.02rem;font-weight:600}

.hint{font-size:.86rem;color:var(--c-ink);opacity:.7;margin-top:8px}

.type-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.type-pill{display:inline-block;background:var(--c-paper);border:1.5px solid var(--c-line);border-radius:999px;padding:6px 14px;font-size:.86rem;font-weight:700;text-decoration:none;color:var(--c-ink);box-shadow:2px 2px 0 var(--c-line);transition:transform .12s,box-shadow .12s}
.type-pill:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--c-line);background:var(--c-yellow)}

.cta-section{background:var(--c-pink);border:1.5px solid var(--c-line);border-radius:14px;padding:28px;margin-top:28px;text-align:center;box-shadow:var(--c-shadow-lg)}
.cta-section h2{margin-top:0;color:var(--c-ink)}
.cta-section p{margin:0 0 18px;font-weight:600}
.cta-btn{display:inline-block;font-size:1rem;padding:14px 28px}

.ad-block{margin:24px 0;text-align:center}
.ad-block:empty{display:none}

/* Card index grid */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin:24px 0}
.card-grid.small{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.card-tile{display:block;background:var(--c-paper);border:1.5px solid var(--c-line);border-radius:12px;padding:10px;text-decoration:none;color:var(--c-ink);box-shadow:var(--c-shadow);transition:transform .12s,box-shadow .12s}
.card-tile:hover{transform:translate(-3px,-3px);box-shadow:var(--c-shadow-lg)}
.card-tile img{width:100%;height:auto;aspect-ratio:200/320;object-fit:cover;border:1.5px solid var(--c-line);border-radius:8px;margin-bottom:8px;display:block}
.tile-name{font-weight:800;font-size:.92rem;margin-bottom:2px}
.tile-theme{font-size:.78rem;opacity:.7;font-weight:600}

/* Type index grid */
.type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:24px 0}
.type-tile{background:var(--c-paper);border:1.5px solid var(--c-line);border-radius:12px;padding:18px 20px;text-decoration:none;color:var(--c-ink);box-shadow:var(--c-shadow);transition:transform .12s,box-shadow .12s}
.type-tile:nth-child(8n+1){background:#fce7f3}
.type-tile:nth-child(8n+2){background:#dcfce7}
.type-tile:nth-child(8n+3){background:#fef9c3}
.type-tile:nth-child(8n+4){background:#dbeafe}
.type-tile:nth-child(8n+5){background:#fed7aa}
.type-tile:nth-child(8n+6){background:#e9d5ff}
.type-tile:nth-child(8n+7){background:#ccfbf1}
.type-tile:nth-child(8n+0){background:#fecaca}
.type-tile:hover{transform:translate(-3px,-3px);box-shadow:var(--c-shadow-lg)}
.type-tile h3{margin:0 0 6px;font-size:1.08rem;font-weight:900}
.type-tile p{margin:0;font-size:.86rem;font-weight:600;opacity:.8}

/* FAQ items */
.faq-item{background:var(--c-paper);border:1.5px solid var(--c-line);border-radius:12px;padding:16px 20px;margin-bottom:12px;box-shadow:2px 2px 0 var(--c-line)}
.faq-item h2{font-size:1rem;margin:0 0 8px;color:var(--c-primary)}
.faq-item p{margin:0;font-weight:500;line-height:1.7}

.static-page p,.static-page li{font-size:.96rem}

/* Footer */
.site-footer{background:var(--c-ink);color:#fef3c7;border-top:1.5px solid var(--c-line);margin-top:48px;padding:32px 0 18px}
.footer-inner{max-width:980px;margin:0 auto;padding:0 18px}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-bottom:20px}
.footer-col h4{font-size:.95rem;margin:0 0 10px;color:var(--c-yellow);font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:6px}
.footer-col a{color:#fef3c7;text-decoration:none;font-size:.88rem;font-weight:600;opacity:.9}
.footer-col a:hover{color:var(--c-yellow);opacity:1}
.footer-col p{font-size:.85rem;margin:0;opacity:.8}
.footer-bottom{text-align:center;font-size:.78rem;opacity:.6;border-top:1px dashed rgba(254,243,199,.3);padding-top:14px;margin-top:14px}

/* (.seo-content 숨김 규칙은 style.css 에서 정의 — 모든 페이지 공통 적용) */

@media (max-width:640px){
  .content-header h1{font-size:1.5rem}
  .content-body{padding:20px 18px;border-radius:12px}
  .content-body h2{font-size:1.15rem}
  .cta-section{padding:22px 16px}
}