/* 형사사건 Q&A — 기존 사이트 디자인 토큰 활용 */

.cases-cat-card {
    display: block;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 1.75rem;
    height: 100%;
    transition: box-shadow .25s var(--ani), border-color .25s;
}
.cases-cat-card:hover {
    border-color: #000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.cases-cat-name { display: block; margin-bottom: .5rem; font-weight: 700;}
.cases-cat-desc { display: block; line-height: 1.6; margin-bottom: .75rem; min-height: 3em; font-weight: 400;}
.cases-cat-count { font-weight: 600; font-family: var(--pointfont); letter-spacing: 0;}

.cases-recent-list { list-style: none; padding: 0; margin: 0; }
.cases-recent-list li { border-bottom: 1px solid rgba(0,0,0,.08); }
.cases-recent-list a { 
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem 0;
    color: inherit;
}
.cases-recent-list a:hover .cases-title { color: var(--pointcolor); }
.cases-tag { color: var(--pointcolor); font-weight: 600; font-size: .875rem; }
.cases-title { font-size: 1.05rem; font-weight: 600; line-height: 1.5; }

.cases-breadcrumb {font-weight: 400; letter-spacing: 0;}
.cases-breadcrumb a { color: var(--gray); position: relative; padding-right: 1.2rem;}
.cases-breadcrumb a:after {content:'>'; color: var(--gray); position: absolute; right: .2rem; top: 0;}
.cases-breadcrumb a:hover { color: var(--black); }

.cases-post-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.cases-post-list li { border-bottom: 1px solid rgba(0,0,0,.08); }
.cases-post-list a {
    display: block;
    padding: 1.25rem 0;
    color: inherit;
}

.cases-post-list strong { display: inline; margin-bottom: .35rem; line-height: 1.4; position: relative; padding-bottom: 2px;}
.cases-post-list strong:after {content:''; width: 0; height: 1px; background-color: #000; position: absolute; left: 0; bottom: 0; transition: width .3s;}
.cases-post-list a:hover strong:after {width: 100%; transition: width .3s;}
.cases-post-list span { display: block; font-weight: 400;}

/* ── Q&A 상세 페이지 ── */
.cases-post-view { padding: 2rem 0 4rem; }
.cases-post-inner { max-width: 860px; margin: 0 auto; padding: 0 1.25rem; }
.cases-post-badge {
    display: inline-block;
    background: #000;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding: .3rem .75rem;
    letter-spacing: .04em;
    margin-bottom: 1rem;
}
.cases-post-header { margin-bottom: 2rem; }
.cases-post-cate {
    display: inline-block;
    color: #b82903;
    font-size: .9375rem;
    font-weight: 800;
    margin-bottom: .5rem;
}
.cases-post-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #000;
    line-height: 1.4;
    margin: 0;
    word-break: keep-all;
}
.cases-post-body { margin-top: .5rem; }

.cases-q-box {
    background: rgba(3, 110, 184, 0.06);
    border-left: 4px solid var(--pointcolor);
    padding: 1.5rem 1.75rem;
    margin-bottom: 2rem;
    border-radius: 0 .5rem .5rem 0;
}
.cases-q-label {
    display: flex; align-items: center; gap: .75rem;
    font-weight: 700; margin-bottom: 1rem;
}
.cases-q-label span {
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--pointcolor); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--pointfont); font-size: .85rem;
    flex-shrink: 0;
}
.cases-q-text {
    font-size: 1.1rem;
    line-height: 1.75;
    margin: 0;
    color: #222;
    word-break: keep-all;
}
.cases-answer-content { padding: 1.75rem 1.75rem 2rem; }
.cases-back-link { margin-top: 2.5rem; text-align: center; }

/* Q/A 영역 — 박스 없이 가독성 중심 */
.cases-qa { margin-bottom: 2rem; }
.cases-q-heading,
.cases-a-heading {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    color: #000;
    padding: .5rem 0;
    margin: 0;
    word-break: keep-all;
}
.cases-q-heading, .cases-a-heading {margin-bottom: 1.5rem; font-weight: 700; font-size: 1.375rem; color: #000; position: relative; padding-left: 1.6rem;} 
.cases-q-heading:after {content:'Q. '; font-weight: 700; font-size: 1.375rem; position: absolute; left: 0; top: 7px;}
.cases-a-heading:after {content:'A. '; font-weight: 700; font-size: 1.375rem; position: absolute; left: 0; top: 7px;}

.cases-a-heading {
    margin-bottom: 1.25rem;
}
.cases-answer-prose {
    font-size: .975rem;
    line-height: 1.8;
}
.cases-answer-prose .cases-h2 {
    font-size: 1.125rem;
    margin: 1.75rem 0 .85rem;
    padding: .55rem 0 .55rem .85rem;
}
.cases-answer-prose .cases-h2:first-child { margin-top: 0; }
.cases-answer-prose .cases-p {
    margin-bottom: .85rem;
    font-size: 1rem;
}
.cases-answer-prose .cases-list {
    margin: .35rem 0 1rem;
    padding-left: 1.2rem;
}
.cases-answer-prose .cases-list li {
    margin-bottom: .45rem;
    font-size: .975rem;
    line-height: 1.75;
}
.cases-answer-prose .cases-h2-key + .cases-list {
    border: 1px solid rgba(0, 0, 4, 0.5);  
    background: rgba(0, 0, 0, 0.02);
    padding: 1rem 1.15rem 1rem 1.35rem;
    margin-top: .5rem;
}

/* ── 본문 타이포그래피 ── */
.cases-article-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--subcolor);
    line-height: 1.35;
    margin: 0 0 .75rem;
    letter-spacing: -.02em;
}
.cases-article-meta {
    font-size: .95rem;
    color: var(--gray);
    margin: 0 0 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(3, 110, 184, 0.12);
}

.cases-prose { color: #222; font-size: 1.05rem; line-height: 1.85; }
.cases-prose .cases-h2 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 2rem 0 1rem;
    padding: .65rem 0 .65rem 1rem;
    background: rgba(0, 0, 0, 0.04);
    line-height: 1.45;
}
.cases-prose .cases-h2:first-child { margin-top: 0; position: relative; padding-left: 2rem;}
.cases-prose .cases-h2:first-child:after {content:''; width: .5rem; height: .5rem; border-radius: 50%; background-color: #000; position: absolute; left: 1rem; top: 0; bottom: 0; margin: auto;}
.cases-prose .cases-h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 1.75rem 0 .75rem;
    line-height: 1.45;
}
.cases-prose .cases-p {
    margin: 0 0 1rem;
    line-height: 1.85;
    word-break: keep-all; font-weight: 400;
}
.cases-prose .cases-list {
    margin: .5rem 0 1.25rem;
    padding-left: 1.35rem;
}
.cases-prose .cases-list li {
    margin-bottom: .55rem;
    line-height: 1.75;
    padding-left: .25rem;
}
.cases-prose .cases-list li::marker { color: var(--pointcolor); }
.cases-prose strong {
    font-weight: 700;
    /* background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.2) 100%); */
}

/* ── 표 ── */
.cases-table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0 1.75rem;
    border-radius: .5rem;
    border: 1px solid rgba(3, 110, 184, 0.15);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.cases-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    min-width: 480px;
    background: #fff;
}
.cases-table th,
.cases-table td {
    border: 1px solid rgba(3, 110, 184, 0.12);
    padding: .85rem 1rem;
    text-align: left;
    vertical-align: middle;
    line-height: 1.55;
}
.cases-table th {
    background: rgba(3, 110, 184, 0.1);
    color: var(--subcolor);
    font-weight: 700;
    white-space: nowrap;
}
.cases-table tbody tr:nth-child(even) { background: rgba(3, 110, 184, 0.03); }
.cases-table tbody tr:hover { background: rgba(3, 110, 184, 0.06); }

.cases-info-banner {
    display: flex; align-items: center; gap: 1rem;
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.5);
    padding: 1rem 1.25rem;
    margin-bottom: 2rem; font-weight: 400;
    flex-wrap: wrap;
}

.cases-info-banner .LL_Btn {
    border: 1px solid #000; background-color: #000; color:#fff;
}


.cases-info-icon {
    width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: #000; color: #fff; font-size: .875rem;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
    flex-shrink: 0;
}
.cases-info-banner p { flex: 1; margin: 0; min-width: 200px; }

.cases-related { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(0,0,0,.08); font-weight: 400;}
.cases-related-links { list-style: none; padding: 0; margin: 0; }
.cases-related-links li { border-bottom: 1px solid rgba(0,0,0,.08);}
.cases-related-links a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem .5rem; color: inherit; font-size: 1rem;
}

.cases-related > a {font-weight: 700; color: #000 !important; margin-left: .5rem;}
.cases-related > a:hover {border-bottom: solid 1px #000;}
.cases-related-links a:hover { color: #fff; background-color: #000; transition: .3s;}

.cases-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: .5rem; flex-wrap: wrap; margin: 2.5rem 0 1rem;
}
.cases-pagination .page-current {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; height: 2.5rem;
    background: var(--pointcolor); color: #fff; border-radius: .35rem; font-weight: 700;
}
.cases-pagination .page-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; height: 2.5rem;
    border: 1px solid rgba(0,0,0,.12); border-radius: .35rem;
}

@media (max-width: 768px) {
    .cases-recent-list a { grid-template-columns: 1fr; gap: .25rem; }
    .cases-info-banner { flex-direction: column; text-align: center; }
    .cases-post-inner { padding: 0 1rem; }
    .cases-answer-content { padding-left: 1.25rem; padding-right: 1.25rem; }
    .cases-table { font-size: .85rem; min-width: 360px; }
    .cases-table th, .cases-table td { padding: .65rem .75rem; }
}



[data-aos*="mark-line2"]{position: relative;background: linear-gradient(to right, rgba(97, 97, 97, 0) 50%, #cacaca 50%); background-size: 200% 2em; background-repeat: no-repeat;background-position: 200% 100%; padding: 0;}
[data-aos*="mark-line2"].aos-animate{background-position: 100% 100%;}


[data-aos*="mark-line3"]{position: relative;background: linear-gradient(to right, rgba(97, 97, 97, 0) 50%, #aad2ff 50%); background-size: 200% 2em; background-repeat: no-repeat;background-position: 200% 100%; padding: 0;}
[data-aos*="mark-line3"].aos-animate{background-position: 100% 100%;}