@charset "utf-8";
/* H14-140 — 인사이트 (목록 · 글). 매뉴얼 카드 톤을 따르되 본문 타이포그래피는 읽기 전용으로 따로 잡는다. */

/* ── 목록 ── */
.insight-cats {display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px;}
.insight-cats a {display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--grayscale3); border-radius:999px; font-size:var(--fs-14); color:var(--grayscale8); background:var(--color-white); transition:all .15s;}
.insight-cats a i {font-style:normal; font-size:12px; color:var(--grayscale6);}
.insight-cats a:hover {border-color:var(--color-main); color:var(--color-main);}
.insight-cats a.on {border-color:var(--color-main); background:var(--color-main); color:var(--color-white);}
.insight-cats a.on i {color:rgba(255,255,255,.85);}

.insight-featured {display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; margin-bottom:32px;}
.insight-hero-card {display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--grayscale3); border-radius:12px; background:var(--color-white);}
.insight-hero-card .thumb-wrap {aspect-ratio:16 / 9; overflow:hidden; background:var(--grayscale1);}
.insight-hero-card .info-wrap {padding:22px 24px 24px;}
.insight-hero-card .card-tit {display:block; margin-top:8px; font-size:var(--fs-24); font-weight:600; line-height:1.4; color:var(--grayscale10);}
.insight-hero-card .card-txt {margin-top:8px; font-size:var(--fs-16); line-height:1.6; color:var(--grayscale7); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

.insight-list {display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.insight-card {display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--grayscale3); border-radius:10px; background:var(--color-white); transition:transform .2s, box-shadow .2s;}
.insight-card:hover, .insight-hero-card:hover {transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.06);}
.insight-card .thumb-wrap, .insight-hero-card .thumb-wrap {position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; background:var(--grayscale1); border-bottom:1px solid var(--grayscale3);}
.insight-card .thumb-wrap img, .insight-hero-card .thumb-wrap img {display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease;}
.insight-card:hover .thumb-wrap img, .insight-hero-card:hover .thumb-wrap img {transform:scale(1.04);}
.thumb-empty {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; letter-spacing:-.5px; color:var(--grayscale4); background:linear-gradient(135deg, #f5f5ff, #eef2ff);}
.thumb-empty i {font-style:normal; color:var(--color-main); opacity:.55;}
.insight-card .info-wrap {display:flex; flex-direction:column; flex:1; padding:18px 20px 20px;}
.insight-card .cat, .insight-hero-card .cat, .insight-head .cat {display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.2px; color:var(--color-main);}
.insight-card .card-tit {display:block; margin-top:6px; font-size:var(--fs-18); font-weight:600; line-height:1.45; color:var(--grayscale10); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.insight-card .card-txt {margin-top:6px; font-size:var(--fs-14); line-height:1.6; color:var(--grayscale7); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.insight-card .meta, .insight-hero-card .meta {display:block; margin-top:auto; padding-top:14px; font-size:13px; color:var(--grayscale6);}
.insight-empty {padding:60px 0; text-align:center; color:var(--grayscale6);}

/* ── 글 ── */
.insight-article {padding:40px 0 100px;}
.insight-crumb {display:flex; flex-wrap:wrap; gap:6px; font-size:13px; color:var(--grayscale6); margin-bottom:22px;}
.insight-crumb a {color:var(--grayscale7);}
.insight-crumb a:hover {color:var(--color-main);}
.insight-head {max-width:820px;}
.insight-head h1 {margin-top:10px; font-size:var(--fs-40); font-weight:700; line-height:1.3; letter-spacing:-.5px; color:var(--grayscale11); word-break:keep-all;}
.insight-head .lead {margin-top:14px; font-size:var(--fs-18); line-height:1.7; color:var(--grayscale7); word-break:keep-all;}
.insight-head .meta {display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:18px; font-size:14px; color:var(--grayscale6);}
.insight-head .meta .author {font-weight:600; color:var(--grayscale8);}
.insight-cover {margin:28px 0 8px; border-radius:14px; overflow:hidden; border:1px solid var(--grayscale3); max-width:1000px;}
.insight-cover img {display:block; width:100%; height:auto;}

.insight-layout {display:grid; grid-template-columns:minmax(0, 760px) 260px; gap:56px; align-items:start; margin-top:24px;}
.insight-main {min-width:0;}
.insight-side {position:sticky; top:96px;}
.insight-side-toc {padding:18px 18px 16px; border:1px solid var(--grayscale3); border-radius:12px; background:var(--grayscale1);}
.insight-side-toc strong, .insight-toc strong {display:block; margin-bottom:10px; font-size:13px; font-weight:700; letter-spacing:.3px; color:var(--grayscale6); text-transform:uppercase;}
.insight-side-toc ol, .insight-toc ol {display:flex; flex-direction:column; gap:6px;}
.insight-side-toc li a, .insight-toc li a {font-size:14px; line-height:1.5; color:var(--grayscale8); word-break:keep-all;}
.insight-side-toc li.lv3, .insight-toc li.lv3 {padding-left:14px;}
.insight-side-toc li.lv3 a, .insight-toc li.lv3 a {font-size:13px; color:var(--grayscale6);}
.insight-side-toc li a:hover, .insight-toc li a:hover {color:var(--color-main);}
.insight-toc {display:none; margin:8px 0 28px; padding:18px 20px; border:1px solid var(--grayscale3); border-radius:12px; background:var(--grayscale1);}

/* AEO: 핵심 요약 — 답을 먼저 */
.insight-keypoints {margin:8px 0 28px; padding:22px 24px; border-radius:14px; background:linear-gradient(135deg, #f5f5ff, #eef2ff); border:1px solid #e0e3ff;}
.insight-keypoints h2 {margin:0 0 12px; font-size:var(--fs-18); font-weight:700; color:var(--grayscale10);}
.insight-keypoints ul {display:flex; flex-direction:column; gap:8px;}
.insight-keypoints li {position:relative; padding-left:22px; font-size:var(--fs-16); line-height:1.65; color:var(--grayscale9); word-break:keep-all;}
.insight-keypoints li::before {content:''; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--color-main);}

/* 본문 타이포 */
.insight-body {font-size:var(--fs-18); line-height:1.85; color:var(--grayscale9); word-break:keep-all;}
.insight-body > * + * {margin-top:1.1em;}
.insight-body h2 {margin-top:2.2em; padding-top:.2em; font-size:var(--fs-28); font-weight:700; line-height:1.35; color:var(--grayscale11); letter-spacing:-.3px; scroll-margin-top:96px;}
.insight-body h3 {margin-top:1.8em; font-size:var(--fs-20); font-weight:700; line-height:1.4; color:var(--grayscale10); scroll-margin-top:96px;}
.insight-body h4 {margin-top:1.4em; font-size:var(--fs-18); font-weight:700; color:var(--grayscale10);}
.insight-body p {margin-top:1.1em;}
.insight-body strong {font-weight:700; color:var(--grayscale11);}
.insight-body a {color:var(--color-main); text-decoration:underline; text-underline-offset:3px;}
.insight-body ul, .insight-body ol {padding-left:1.4em;}
.insight-body ul {list-style:disc;}
.insight-body ol {list-style:decimal;}
.insight-body ul > li {list-style:disc; display:list-item;}   /* reset.css 가 li 의 list-style 을 지운다 */
.insight-body ol > li {list-style:decimal; display:list-item;}
.insight-body li {margin-top:.35em;}
.insight-body li > ul, .insight-body li > ol {margin-top:.3em;}
.insight-body blockquote {margin-top:1.4em; padding:14px 20px; border-left:4px solid var(--color-main); background:var(--grayscale1); border-radius:0 10px 10px 0; color:var(--grayscale8);}
.insight-body blockquote p {margin-top:0;}
.insight-body img {display:block; max-width:100%; height:auto; margin:1.6em auto; border-radius:12px; border:1px solid var(--grayscale3);}
.insight-body code {padding:2px 6px; border-radius:4px; background:var(--grayscale2); font-size:.9em; font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;}
.insight-body pre {margin-top:1.4em; padding:16px 18px; border-radius:10px; background:#111827; color:#e5e7eb; overflow:auto; font-size:14px; line-height:1.6;}
.insight-body pre code {padding:0; background:none; color:inherit; font-size:inherit;}
.insight-body hr {margin:2.4em 0; border:0; border-top:1px solid var(--grayscale3);}
.insight-body .tbl-scroll {margin-top:1.4em; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.insight-body table {width:100%; border-collapse:collapse; font-size:var(--fs-16); line-height:1.5;}
.insight-body th, .insight-body td {padding:10px 12px; border:1px solid var(--grayscale3); text-align:left; vertical-align:top;}
.insight-body th {background:var(--grayscale1); font-weight:700; color:var(--grayscale10);}

/* FAQ */
.insight-faq {margin-top:56px;}
.insight-faq h2 {margin-bottom:14px; font-size:var(--fs-24); font-weight:700; color:var(--grayscale11);}
.insight-faq details {border:1px solid var(--grayscale3); border-radius:10px; background:var(--color-white);}
.insight-faq details + details {margin-top:10px;}
.insight-faq summary {cursor:pointer; padding:16px 44px 16px 18px; position:relative; font-size:var(--fs-16); font-weight:600; line-height:1.5; color:var(--grayscale10); list-style:none; word-break:keep-all;}
.insight-faq summary::-webkit-details-marker {display:none;}
.insight-faq summary::after {content:''; position:absolute; right:18px; top:50%; width:9px; height:9px; border-right:2px solid var(--grayscale6); border-bottom:2px solid var(--grayscale6); transform:translateY(-70%) rotate(45deg); transition:transform .2s;}
.insight-faq details[open] summary::after {transform:translateY(-30%) rotate(225deg);}
.insight-faq details p {padding:0 18px 18px; font-size:var(--fs-16); line-height:1.75; color:var(--grayscale8); word-break:keep-all;}

.insight-tags {display:flex; flex-wrap:wrap; gap:8px; margin-top:32px;}
.insight-tags span {padding:6px 12px; border-radius:999px; background:var(--grayscale2); font-size:13px; color:var(--grayscale7);}

/* 작성자 · CTA */
.insight-author {display:flex; gap:16px; margin-top:40px; padding:20px 22px; border:1px solid var(--grayscale3); border-radius:14px;}
.insight-author .avatar {flex-shrink:0; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--color-main); color:#fff; font-size:20px; font-weight:700;}
.insight-author strong {font-size:var(--fs-16); font-weight:700; color:var(--grayscale10);}
.insight-author strong + span {margin-left:8px; font-size:13px; color:var(--grayscale6);}
.insight-author p {margin-top:6px; font-size:14px; line-height:1.65; color:var(--grayscale7); word-break:keep-all;}
.insight-cta {margin-top:28px; padding:28px 28px; border-radius:16px; background:linear-gradient(135deg, #4f46e5, #6366f1 55%, #8b5cf6); color:#fff;}
.insight-cta strong {display:block; font-size:var(--fs-24); font-weight:700; line-height:1.35; word-break:keep-all;}
.insight-cta p {margin-top:10px; font-size:var(--fs-16); line-height:1.65; color:rgba(255,255,255,.88); word-break:keep-all;}
.insight-cta .btns {display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.insight-cta .btns .primary-btn {background:#fff; color:var(--color-main); border-color:#fff;}
.insight-cta .btns .white-btn {background:transparent; color:#fff; border:1px solid rgba(255,255,255,.7);}

.insight-related {margin-top:72px;}
.insight-related h2 {margin-bottom:18px; font-size:var(--fs-24); font-weight:700; color:var(--grayscale11);}
.insight-nav {margin-top:56px;}
.insight-nav .empty {opacity:.5; display:flex; flex-direction:column; row-gap:20px; width:330px;}
.insight-nav .empty.next {align-items:flex-end; text-align:right;}

@media screen and (max-width: 1024px) {
    .insight-layout {grid-template-columns:minmax(0, 1fr); gap:0;}
    .insight-side {display:none;}
    .insight-toc {display:block;}
    .insight-list {gap:16px;}
}
@media screen and (max-width: 768px) {
    .insight-list {grid-template-columns:repeat(2, 1fr);}
    .insight-featured {grid-template-columns:1fr; gap:16px; margin-bottom:24px;}
    .insight-article {padding:24px 0 70px;}
    .insight-head h1 {font-size:var(--fs-30);}
    .insight-body {font-size:var(--fs-16);}
    .insight-cta {padding:22px 20px;}
    .insight-nav .empty {width:calc(50% - 12px);}
}
@media screen and (max-width: 480px) {
    .insight-list {grid-template-columns:1fr;}
    .insight-cats {gap:6px; margin-bottom:20px;}
    .insight-cats a {padding:7px 11px;}
    .insight-keypoints {padding:18px 16px;}
    .insight-author {flex-direction:column; gap:10px;}
}

/* ── H14-141 ── */
/* 카테고리 페이지 소개문·관련 서비스 */
.insight-cat-intro {max-width:820px;}
.insight-cat-service {margin-top:12px;}
.insight-cat-service a {font-size:var(--fs-16); font-weight:600; color:var(--color-main); text-decoration:underline; text-underline-offset:3px;}
/* 출처(참고 자료) */
.insight-sources {margin-top:44px; padding:18px 20px; border:1px solid var(--grayscale3); border-radius:12px; background:var(--grayscale1);}
.insight-sources h2 {margin-bottom:10px; font-size:var(--fs-18); font-weight:700; color:var(--grayscale10);}
.insight-sources ol {padding-left:20px; list-style:decimal; display:flex; flex-direction:column; gap:6px;}
.insight-sources li {list-style:decimal; display:list-item; font-size:14px; line-height:1.6; color:var(--grayscale8); word-break:break-all;}
.insight-sources li a {color:var(--color-main); text-decoration:underline; text-underline-offset:3px;}
.insight-sources li span {color:var(--grayscale6);}
/* 작성자 박스 보강 */
.insight-author img.avatar {object-fit:cover; width:52px; height:52px; border-radius:50%;}
.insight-author strong a {color:inherit; text-decoration:underline; text-underline-offset:3px;}
.insight-author .expertise {margin-top:4px; font-size:13px; color:var(--color-main); font-weight:600;}
.insight-author .more {display:inline-block; margin-top:8px; font-size:13px; color:var(--grayscale7); text-decoration:underline; text-underline-offset:3px;}
/* 작성자 페이지 */
.author-head {display:flex; gap:24px; align-items:flex-start; padding:8px 0 28px; border-bottom:1px solid var(--grayscale3);}
.author-head .avatar {flex-shrink:0; width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--color-main); color:#fff; font-size:32px; font-weight:700; object-fit:cover;}
.author-head h1 {font-size:var(--fs-32); font-weight:700; color:var(--grayscale11); line-height:1.3;}
.author-head .role {margin-top:4px; font-size:var(--fs-16); color:var(--grayscale7);}
.author-head .expertise {display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.author-head .expertise span {padding:5px 11px; border-radius:999px; background:#eef2ff; color:var(--color-main); font-size:13px; font-weight:600;}
.author-head .bio {margin-top:14px; max-width:760px; font-size:var(--fs-16); line-height:1.75; color:var(--grayscale8); word-break:keep-all;}
.author-posts {margin-top:36px;}
.author-posts h2 .cnt {margin-left:6px; font-size:14px; color:var(--grayscale6); font-weight:500;}
/* 서비스 페이지 → 관련 인사이트 */
.related-insights {padding:70px 0;}
.related-insights .ri-head {display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px;}
.related-insights .section-tit {font-size:var(--fs-28); font-weight:700; color:var(--grayscale11); word-break:keep-all;}
.related-insights .ri-more {flex-shrink:0; font-size:14px; color:var(--grayscale7); text-decoration:underline; text-underline-offset:3px;}
.related-insights .ri-more:hover {color:var(--color-main);}
@media screen and (max-width: 768px) {
    .author-head {gap:16px;}
    .author-head .avatar {width:64px; height:64px; font-size:26px;}
    .related-insights {padding:48px 0;}
    .related-insights .ri-head {flex-direction:column; align-items:flex-start; gap:8px;}
}