@charset "utf-8";
/* ===========================================
   인사이트 (/insight, /insight/{slug})
   ===========================================
   service.css 를 먼저 싣고 그 위에 얹는다.
   .svc 래퍼·배경 고정·헤더 바탕·본문 색은 service.css 가 이미 잡고 있어
   여기서는 목록 카드와 긴 본문에 필요한 것만 둔다.

   모든 선택자에 .insight_page 또는 .ins_ 접두사를 두어
   다른 페이지 CSS 와 섞이지 않게 한다.
   =========================================== */

/* 본문이 길어 읽는 폭을 서비스 페이지보다 좁게 잡는다.
   한 줄이 너무 길면 다음 줄 첫머리를 찾기 어렵다. */
.insight_page .ins_article {
    max-width: 780px;
}

/* ---------- 목록 ---------- */
.ins_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 8px;
}

.ins_card {
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.ins_card:hover {
    border-color: rgba(188, 178, 255, .6);
    background: rgba(255, 255, 255, .07);
    transform: translateY(-2px);
}
.ins_card > a {
    display: block;
    padding: 26px 24px 24px;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.ins_cat {
    font-size: 12px;
    letter-spacing: .06em;
    color: #bcb2ff;
    font-weight: 600;
    margin-bottom: 12px;
}
.ins_dot { margin: 0 6px; color: rgba(255, 255, 255, .4); }

.ins_card_h2 {
    font-size: 19px;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.ins_card_def {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .68);
    /* 카드 높이를 맞추려고 넉 줄에서 자른다. 전문은 낱장에 그대로 있다. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ins_more {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    color: #bcb2ff;
    font-weight: 600;
}

/* ---------- 용어 목록 ---------- */
.ins_terms_sec { margin-top: 72px; }

.ins_terms {
    border-top: 1px solid rgba(255, 255, 255, .14);
    margin-top: 8px;
}
.ins_terms dt {
    padding-top: 20px;
    font-size: 17px;
    font-weight: 700;
}
.ins_terms dt a { color: #fff; text-decoration: none; }
.ins_terms dt a:hover { color: #bcb2ff; text-decoration: underline; }
.ins_terms dd {
    padding: 8px 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .7);
}

/* ---------- 낱장 ---------- */
.ins_meta {
    margin-top: 26px;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
}

/* 정의 문단 — 본문 맨 앞. 개념을 묻는 질문에 답할 내용이라 눈에 띄게 둔다. */
.ins_def {
    margin: 48px 0 8px;
    padding: 26px 26px 24px;
    border-left: 3px solid #bcb2ff;
    border-radius: 0 12px 12px 0;
    background: rgba(255, 255, 255, .05);
}
.ins_def_h2 {
    font-size: 15px;
    font-weight: 700;
    color: #bcb2ff;
    margin-bottom: 10px;
}
.ins_def p {
    font-size: 16px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .88);
}

.ins_body { margin-top: 56px; }

.ins_p {
    font-size: 16px;
    line-height: 1.95;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 18px;
}
.ins_p:last-child { margin-bottom: 0; }

.ins_points {
    margin-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.ins_points > li {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.ins_points h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}
.ins_points p {
    font-size: 15px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .72);
}

/* ---------- 자주 묻는 질문 ---------- */
.ins_faq { margin-top: 72px; }
.ins_qa {
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.ins_qa:first-of-type { border-top: 1px solid rgba(255, 255, 255, .14); }
.ins_q {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}
.ins_q::before {
    content: "Q.";
    color: #bcb2ff;
    margin-right: 8px;
    font-weight: 700;
}
.ins_a {
    font-size: 15px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .76);
}

/* ---------- 관련 링크 ---------- */
.ins_rel { margin-top: 56px; }

.ins_chiplist {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}
.ins_chiplist a {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
.ins_chiplist a:hover { border-color: #bcb2ff; color: #fff; }

.ins_seealso {
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.ins_seealso li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ins_seealso a {
    display: block;
    padding: 18px 0;
    color: inherit;
    text-decoration: none;
}
.ins_seealso a:hover .ins_seealso_t { color: #bcb2ff; text-decoration: underline; }
.ins_seealso .ins_cat { margin-bottom: 6px; }
.ins_seealso_t {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

.ins_back { margin-top: 34px; font-size: 14px; }
.ins_back a { color: rgba(255, 255, 255, .66); text-decoration: none; }
.ins_back a:hover { color: #fff; text-decoration: underline; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 768px) {
    .ins_list { grid-template-columns: 1fr; gap: 14px; }
    .ins_card > a { padding: 22px 20px; }
    .ins_def { padding: 20px 20px 18px; margin-top: 36px; }
    .ins_body { margin-top: 44px; }
    .ins_p, .ins_def p { font-size: 15px; }
    .ins_faq, .ins_terms_sec { margin-top: 52px; }
}

/* ---------- 확인할 질문 목록 ---------- */
/* 같은 제목이 반복되는 항목은 h3 를 하나만 두고 질문을 목록으로 늘어놓는다. */
.ins_ask {
    margin-top: 26px;
    padding: 22px 24px 20px;
    border: 1px solid rgba(188, 178, 255, .3);
    border-radius: 12px;
    background: rgba(188, 178, 255, .07);
}
.ins_ask_h3 {
    font-size: 14px;
    font-weight: 700;
    color: #bcb2ff;
    margin-bottom: 12px;
}
.ins_ask ul { margin: 0; }
.ins_ask li {
    position: relative;
    padding-left: 16px;
    font-size: 15px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .82);
}
.ins_ask li + li { margin-top: 8px; }
.ins_ask li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #bcb2ff;
}

@media (max-width: 768px) {
    .ins_ask { padding: 18px 18px 16px; }
    .ins_ask li { font-size: 14px; }
}