@charset "UTF-8";

/* ===== Reset ===== */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body {
    background:#f7f8fa;
    font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Malgun Gothic',sans-serif;
    color:#191f28;
    line-height:1.5;
    word-break:keep-all;
    -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
ul,ol { list-style:none; }
img { display:block; max-width:100%; }

/* ===== 레이아웃 ===== */
.container { max-width:1200px; margin:0 auto; padding:15px 10px; }

/* ===== 헤더 ===== */
.header-wrap {
    background:#fff;
    padding:0;
    text-align:center;
    border-bottom:1px solid #e5e8eb;
}
.header-wrap img.logo { max-height:80px; margin:0 auto; }

/* ===== 네비게이션 ===== */
.nav-wrap {
    background:#fff;
    border-bottom:1px solid #e5e8eb;
}
.nav-inner {
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:repeat(4,1fr);
}
.nav-inner a {
    display:block; padding:14px 0; text-align:center;
    font-size:13.5px; font-weight:600; color:#6b7684;
    border-bottom:2px solid transparent;
    transition:color .12s, border-color .12s;
}
.nav-inner a:hover { color:#191f28; }
.nav-inner a.active { color:#3182f6; border-bottom-color:#3182f6; }
@media (max-width:640px) {
    .nav-inner a { padding:12px 0; font-size:12.5px; }
}

/* ===== 배너 섹션 ===== */
.banner-section { background:#eef1f6; border-bottom:1px solid #e5e8eb; }
.banner-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.banner-grid a { display:block; overflow:hidden; border-radius:4px; }
.banner-grid a img { width:100%; height:auto; }
@media (max-width:640px) {
    .banner-grid { grid-template-columns:1fr; }
}

/* ===== 카테고리 카드 그리드 (index) ===== */
.cat-cards-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}
@media (max-width:640px) {
    .cat-cards-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
}

/* ===== 카테고리 카드 ===== */
.cat-card-item {
    background:#fff;
    border:1px solid #e5e8eb;
    border-radius:4px;
    padding:16px 14px 10px;
}
.cat-card-title {
    font-size:14px; font-weight:700; color:#191f28;
    margin-bottom:10px; padding-bottom:8px;
    border-bottom:2px solid #191f28;
    letter-spacing:-0.2px;
}
@media (max-width:640px) {
    .cat-card-item { padding:12px 10px 8px; }
    .cat-card-title { font-size:13px; margin-bottom:8px; padding-bottom:6px; }
}

/* ===== 순위 리스트 (공용) ===== */
.shortcut-list { list-style:none; margin:0; padding:0; }
.shortcut-list li { padding:7px 0; }
.shortcut-list li + li { border-top:1px solid #f2f3f6; }
.shortcut-list li a {
    display:flex; align-items:center; gap:8px;
}
.shortcut-list li a:hover .site-name { color:#3182f6; }

.shortcut-rank {
    flex-shrink:0;
    width:20px; height:20px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800;
    color:#6b7684; background:#f2f3f6;
    border-radius:3px;
}
.shortcut-rank.top { color:#fff; background:#3182f6; }

.shortcut-list .site-name {
    font-size:14px; font-weight:600; color:#333d4b;
    transition:color .12s;
}
@media (max-width:640px) {
    .shortcut-list li { padding:6px 0; }
    .shortcut-rank { width:18px; height:18px; font-size:10px; }
    .shortcut-list .site-name { font-size:13px; }
}

/* ===== 카테고리 페이지 리스트 ===== */
.page-title {
    font-size:20px; font-weight:800; color:#191f28;
    margin-bottom:4px; letter-spacing:-0.3px;
}
.page-wrap {
    background:#fff; border:1px solid #e5e8eb;
    border-radius:4px; padding:0 20px;
}
.cat-list { list-style:none; }
.cat-list li {
    display:flex; align-items:center; gap:14px;
    padding:14px 0;
}
.cat-list li + li { border-top:1px solid #f2f3f6; }
.cat-list li .rank {
    flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px;
    font-size:12px; font-weight:800;
    color:#6b7684; background:#f2f3f6;
    border-radius:3px;
}
.cat-list li .rank.top { color:#fff; background:#3182f6; }
.cat-list li a {
    font-size:15px; font-weight:600; color:#333d4b;
    transition:color .12s;
}
.cat-list li a:hover { color:#3182f6; }
.cat-list li .cat-desc {
    font-size:13px; color:#8b95a1; margin-left:auto; flex-shrink:0;
}

/* ===== 상세 페이지 ===== */
.detail-wrap { max-width:1200px; margin:0 auto; }
.detail-card {
    background:#fff; border:1px solid #e5e8eb;
    border-radius:4px; padding:32px 28px;
}
.detail-card h1 {
    font-size:24px; font-weight:800; color:#191f28;
    margin-bottom:12px; letter-spacing:-0.5px;
}
.detail-desc {
    font-size:15px; color:#6b7684; line-height:1.75; margin-bottom:24px;
}
.detail-link {
    display:inline-flex; align-items:center; gap:6px;
    background:#3182f6; color:#fff; padding:11px 24px;
    border-radius:4px; font-size:14px; font-weight:700;
    transition:background .12s;
    margin-bottom:24px;
}
.detail-link:hover { background:#1b64da; }
.detail-img { width:100%; border-radius:4px; margin-bottom:28px; }
.detail-img-placeholder {
    background:#f7f8fa; border-radius:4px; border:1px dashed #d1d6db;
    padding:56px 0; text-align:center; color:#adb5bd; font-size:14px;
    margin-bottom:28px;
}
.detail-card h2 {
    font-size:18px; font-weight:700; color:#191f28;
    margin-bottom:12px; letter-spacing:-0.3px;
}
.detail-keywords { display:flex; flex-wrap:wrap; gap:6px; }
.detail-keywords span {
    display:inline-block; background:#f2f3f6; color:#6b7684;
    padding:5px 12px; border-radius:3px;
    font-size:13px; font-weight:500;
}
@media (max-width:640px) {
    .detail-card { padding:24px 18px; }
    .detail-card h1 { font-size:20px; }
}

/* ===== SEO 콘텐츠 ===== */
.seo-content {
    margin-bottom:20px; padding:0 2px;
}
.seo-content p {
    font-size:14px; color:#6b7684; line-height:1.8; margin-bottom:10px;
}
.seo-content p:last-child { margin-bottom:0; }

/* ===== SEO 하단 콘텐츠 ===== */
.seo-bottom {
    margin-top:28px; padding:24px 20px;
    background:#fff; border:1px solid #e5e8eb; border-radius:4px;
}
.seo-bottom h2 {
    font-size:16px; font-weight:700; color:#191f28;
    margin-top:20px; margin-bottom:8px; letter-spacing:-0.2px;
}
.seo-bottom h2:first-child { margin-top:0; }
.seo-bottom p {
    font-size:14px; color:#6b7684; line-height:1.8; margin-bottom:0;
}
.seo-bottom a { color:#3182f6; font-weight:600; }
.seo-bottom a:hover { text-decoration:underline; }

/* FAQ */
.faq-section { margin-top:24px; padding-top:20px; border-top:1px solid #f2f3f6; }
.faq-item { margin-bottom:16px; }
.faq-item:last-child { margin-bottom:0; }
.faq-item h3 {
    font-size:14px; font-weight:700; color:#333d4b;
    margin-bottom:6px;
}
.faq-item p {
    font-size:14px; color:#6b7684; line-height:1.7;
    padding-left:24px;
}

/* ===== 섹션 타이틀 ===== */
.section-title {
    font-size:18px; font-weight:800; color:#191f28;
    margin-bottom:14px; letter-spacing:-0.3px;
}

/* ===== 바로가기 링크 박스 ===== */
.link-box {
    display:flex; flex-direction:column;
    margin:20px 0 24px;
    border:1px solid #e5e8eb; border-radius:4px;
    overflow:hidden;
}
.link-box-label {
    background:#3182f6; color:#fff;
    font-size:13px; font-weight:700;
    padding:10px 16px;
    letter-spacing:0.5px;
}
.link-box-btn {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px;
    background:#f7f8fa;
    transition:background .12s;
    gap:12px;
}
.link-box-btn:hover { background:#eef1f6; }
.link-box-url {
    font-size:14px; font-weight:600; color:#333d4b;
    word-break:break-all;
}
.link-box-arrow {
    flex-shrink:0;
    font-size:18px; color:#3182f6; font-weight:700;
}
@media (max-width:640px) {
    .link-box-btn { padding:12px 14px; }
    .link-box-url { font-size:13px; }
}

/* ===== 콘텐츠 이미지 ===== */
.content-img { margin:16px 0; }
.content-img img { width:100%; border-radius:4px; }

/* ===== 최종 확인일 ===== */

/* ===== 푸터 ===== */
.footer-wrap {
    margin-top:48px; padding:28px 20px;
    background:#fff; border-top:1px solid #e5e8eb;
    text-align:center;
}
.footer-inner { max-width:1200px; margin:0 auto; }
.footer-brand { font-size:15px; font-weight:700; color:#191f28; margin-bottom:8px; }
.footer-wrap p { font-size:12px; color:#8b95a1; line-height:1.6; margin-bottom:4px; }
.footer-wrap a { color:#6b7684; }
.footer-wrap a:hover { color:#3182f6; }
.copyright { margin-top:12px; }