@charset "utf-8";

/* =============================================================================
   Tokens
============================================================================= */
:root{
    --main-navi:#204B62;
    --main-white:#fff;

    --sticky-top: 88px; /* 고정 헤더 높이 + 여백 */

    --ink:#273d4e;
    --muted:#556677;
    --line:#BABABA;
    --card:#fff;
    --soft:#f6fbfe;

    --brand:#18495c;
    --brand-dark:#273D4E;
}

/* =============================================================================
   Banner
============================================================================= */
.txt{
    background: url(/img/banner_16.png) center/cover no-repeat;
    height: 400px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.txt h1,
.txt span{
    color:#fff;
    font-size:60px;
    font-weight:800;
}

/* =============================================================================
   Container
============================================================================= */
.wrap-inner{
    max-width:1600px;
    margin:40px auto 80px;
    padding:0 20px;
}

/* =============================================================================
   Header (meta/title)
============================================================================= */
.view-head{
    border-bottom:1px solid var(--line);
    padding-bottom:16px;
    margin-bottom:18px;
}
.view-head .meta{
    color:var(--muted);
    font-size:16px;
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}
.view-head .badge{
    display:inline-block;
    padding:3px 10px;
    border-radius:16px;
    background:#e6eef4;
    color:#144056;
    font-weight:700;
}
.view-head .title{
    font-size:28px;
    color:var(--ink);
    margin:10px 0 0;
}

/* =============================================================================
   Layout
============================================================================= */
.layout{
    display:grid;
    grid-template-columns: 300px 1fr; /* aside + article */
    gap:24px;
    align-items:start;
}

/* =============================================================================
   TOC (sidebar)
============================================================================= */
.toc-wide{
    border-top:5px solid var(--main-navi);
    border-bottom:5px solid var(--main-navi);
    padding:14px 16px;
    margin:0 0 14px;
    background:var(--card);
}
.toc-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}
.toc-head #tocHeadTxt{
    font-size:30px;
    margin-bottom:30px;
    font-weight:800;
    color:#133a53;
}
.toc-head .more{
    font-size:13px;
    color:#0b3b5a;
    text-decoration:underline;
}

#toc ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:20px;
}
#toc a{
    display:flex;
    gap:8px;
    color:#173a52;
    text-decoration:none;
    font-size:18px;
}
#toc a .num{ font-weight:800; }
#toc a .dash{ opacity:.7; margin-left:15px; }
#toc a.active{ text-decoration:underline; }
.toc-empty{ color:#99a; }

/* 사이드바 sticky (데스크톱에서만 유지) */
.layout > aside{
    position: sticky;
    top: var(--sticky-top, 88px);
    align-self: start;
    height: max-content;
}

/* =============================================================================
   Article
============================================================================= */
.article{
    min-height:400px;
    counter-reset: section; /* ✅ h2 번호 카운터 초기화 */
}
.muted{ color:#99a; }
.error{ color:#c55; }

/* 제목 스타일 */
.article h1{
    background:var(--main-navi);
    color:var(--main-white);
    padding:10px 15px;
    border-radius:50px;
    margin:45px 0 30px;
    font-size:25px;
}

/* ✅ h2 자동번호 */
.article h2{
    background:var(--main-navi);
    display:inline-block;
    color:var(--main-white);
    padding:10px 25px 10px 15px;
    border-radius:50px;
    margin:45px 0 10px;
    font-size:25px;
    counter-increment: section;
}
.article h2::before{
    content: counter(section) ". ";
    font-weight:800;
    margin-right:4px;
}

/* ✅ 선택자 오타 수정: article h3 → .article h3 */
.article h3{
    position:relative;
    padding:10px 10px 10px 40px;
    font-size:20px;
    font-weight:800;
    margin-top:30px;
    color:var(--main-navi);
}
.article h3::before{
    content:"";
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    background:url("/img/contentIcon.png") no-repeat center/contain;
}

.article h4{
    font-size:20px;
    margin-top:20px;
}
.article h5{
    margin:10px 0 0;
    line-height:1.8;
    background:#f1f1f1;
    padding:10px 12px;
    font-size:15px;
    border-left:4px solid var(--main-navi);
    font-weight:400;
}

/* 본문 텍스트 */
.article p{
    font-size:18px;
    line-height:1.8;
    margin-left:25px;
}

/* 리스트(본문 영역) */
.wrap .article #article ul{
    list-style:disc !important;
    padding-left:1.25rem;
    margin:0 0 15px 25px;
}
.wrap .article #article ol{
    list-style:decimal !important;
    padding-left:1.5rem;
    margin:.5rem 0 0 20px;
}
.wrap .article #article ul ul{ list-style:circle !important; }
.wrap .article #article li{
    list-style-position:outside;
    margin:10px 0 0 10px;
    line-height:1.6;
}
.wrap .article #article li p{ margin-left:0 !important; }

/* =============================================================================
   Article tables (공통)
============================================================================= */
#article table{
    width:95%;
    border-collapse:collapse;
    border:1px solid #e8eef3;
    margin-top:15px;
    margin-left:25px;
}
#article th,
#article td{
    border:1px solid #e8eef3;
    padding:10px;
    text-align:left;
    vertical-align:middle;
}
#article thead th{
    background:var(--main-navi);
    color:var(--main-white);
    font-weight:800;
}
#article tbody tr:nth-child(even){
    background:#fafcff;
}

/* =============================================================================
   Side cards
============================================================================= */
.side-box{
    border:1px solid #e8eef3;
    border-radius:12px;
    padding:14px;
    background:var(--card);
}
.side-box + .side-box{ margin-top:14px; }

.side-title{
    font-weight:800;
    color:#133a53;
    font-size:20px;
    margin-bottom:30px;
}
.side-title .more{
    float:right;
    font-size:12px;
    color:#0b3b5a;
    text-decoration:underline;
}

/* 성공사례 리스트(기본) */
.case-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.case-item a{
    color:#173a52;
    text-decoration:none;
    font-size:18px;
}
.case-list .case-item a::before{
    content:"- ";
    color:#7a8b97;
}
.case-item .date{
    display:none;
    font-size:16px;
    color:#778;
}

/* 관련업무 */
.cat-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.cat-item{
    display:flex;
    gap:6px;
    align-items:center;
    color:#173a52;
    text-decoration:none;
}
.cat-item .dash{ color:#7a8b97; }
.cat-item .active{
    font-weight:800;
    color:#0b3b5a;
}

/* 변호사 카드 */
.lawyer-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.lawyer-item{
    display:flex;
    gap:10px;
    text-decoration:none;
    color:#233;
}
.lawyer-item .avatar{
    width:150px;
    height:150px;
    object-fit:contain;
    background:#f2f4f7;
}
.lawyer-info .name{
    font-weight:800;
    font-size:20px;
    display:inline;
    margin-right:6px;
}
.lawyer-info .role{
    display:inline;
    font-size:15px;
    color:#6b7a88;
}
.lawyer-info .specialty{
    display:block;
    margin-top:4px;
    color:#6b7a88;
}

/* =============================================================================
   Prev/Next
============================================================================= */
.view-foot{
    border-top:3px solid var(--brand-dark);
    border-bottom:3px solid var(--brand-dark);
    margin-top:20px;
}
.view-foot a{
    display:flex;
    text-decoration:none;
    color:#333;
    font-size:20px;
    margin-left:30px;
}
.view-foot a p{ margin-right:80px; }
.view-foot div{
    padding:30px 0;
    border-bottom:2px dashed #BFD0D9;
}
.view-foot div:last-child{ border-bottom:none; }
.pv-btn.empty,
.nx-btn.empty{ color:#99a; }

/* =============================================================================
   CTA Buttons
============================================================================= */
.consult-links{
    display:flex;
    gap:24px;
    margin:48px 0;
    justify-content:center;
    flex-wrap:wrap;
}
.consult-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:20px 48px;
    border-radius:50px;
    font-size:1.25rem;
    font-weight:800;
    border:none;
    background:#222;
    color:#fff;
    text-decoration:none;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    transition:filter .16s, background .18s, color .16s;
    cursor:pointer;
    min-width:260px;
    letter-spacing:.5px;
}
.consult-btn .btn-icon{
    width:34px;
    height:34px;
    margin-right:14px;
}
.phone-btn{ background:var(--main-navi); }
.phone-btn:hover{ filter:brightness(.94); background:var(--brand-dark); }

.kakao-btn{ background:#FFE812; color:#181600; }
.kakao-btn:hover{ filter:brightness(.96); background:#ffe56b; color:#000; }

/* =============================================================================
   Wide related cases box (optional)
============================================================================= */
.rc-wide{
    margin-top:50px;
    border:1px solid #e6eef4;
    background:var(--soft);
    border-radius:10px;
    padding:18px 20px 14px;
}
.rc-wide .side-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight:800;
    color:#0e384a;
    font-size:30px;
    margin-bottom:10px;
}
.rc-picked{ font-size:20px; }
.rc-wide .side-title .more{
    font-size:16px;
    color:#2563eb;
    text-decoration:none;
}
.rc-wide hr{
    border:0;
    border-top:2px solid #0e384a;
    margin:8px 0 12px;
    opacity:.6;
}

.rc-wide #caseList ul,
.rc-wide #relatedLegalList ul{
    list-style: disc inside;
    margin:0;
    padding:0;
}

.rc-wide #caseList ul li,
.rc-wide #relatedLegalList ul li{
    list-style: disc inside;
    padding: 10px;
    font-size: 18px ;
}

.rc-wide #caseList a,
.rc-wide #relatedLegalList a{
    color:inherit;
    text-decoration:none;
}

.rc-wide #caseList a:hover,
.rc-wide #relatedLegalList a:hover{
    text-decoration:underline;
}
/* =============================================================================
   Floating list button (cta + list)
   - 하드코딩 right:88px는 환경마다 겹침 가능 → clamp로 안전하게
============================================================================= */
.ctaWithFa-barsButton{
    position:relative;
    max-width:1500px;
    margin:0 auto 72px;
}
.ctaWithFa-barsButton .circle-button{
    position:absolute;
    right: clamp(16px, 3vw, 88px);
    bottom: -4rem;
    width:48px;
    height:48px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--brand);
    color:#fff;
    border:none;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
    text-decoration:none;
    font-size:18px;
}

/* =============================================================================
   Minor fix
============================================================================= */
#toc a .num + span{ font-weight:800; } /* 구조가 맞을 때만 적용 */

/* =============================================================================
   Responsive (Tablet / Mobile)
============================================================================= */
@media (max-width: 1024px){
    /* 1열로 바뀔 때 sticky 해제(모바일에서 튀는 문제 방지) */
    .layout{ grid-template-columns:1fr; gap:16px; }
    .layout > aside{ position: static; top:auto; }

    .wrap-inner{ margin:20px auto 40px; padding:0 16px; }

    .side-box .lawyer-list .lawyer-item .lawyer-info,
    .lawyer-item .avatar{
        width:220px;
        height:130px;
    }

    .article p{ margin-left:0; }
    .phone-btn, .kakao-btn{ display:none; }
}

@media (max-width: 480px) and (orientation: portrait){
    .txt{ height:250px; }
    .txt h1, .txt span{ font-size:40px; }

    .view-head .meta{ font-size:12px; }
    .view-head .title{ font-size:20px; }

    .toc-head #tocHeadTxt{ font-size:20px; margin-bottom:12px; }
    #toc a{ font-size:15px; }

    .article h2{ font-size:20px; }
    .article h3{ font-size:18px; }

    #article table{ margin-left:0; width:100%; display:block; overflow-x:auto; }
    .article p{ font-size:15px; }

    .side-title{ font-size:18px; }
    .case-item a{ font-size:15px; }
    .lawyer-info .name{ font-size:15px; }
    .lawyer-info .role{ font-size:13px; }

    .view-foot{ display:flex; flex-direction:column; }
    .rc-wide .side-title{ font-size:20px; }
    .rc-picked{ font-size:15px; }
}