/* ==================================================================
 /prd/common.css
 - prd 전용 공통 css
 - ex) Layout, header, footer, logo 등
================================================================== */

/* -- variant -------------------- */
body { --headerH : 144px; --footerH : 120px; --breadCrumbsH : 38px; --depth2H : 349px; --contentsW: 1424px; } 



/* -- Common -------------------- */
.logo { display: inline-block; width: 272px; height: 43px; background:url('../images/logo.svg') no-repeat 0 center / contain; font-size: 0; } 
.dimmed { position: fixed; top: 153px; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.3s; } 
.dimmed.active { opacity: 1; visibility: visible; } 
.onlyMobile { display: none !important; } 

.colGapInTb1 { column-gap: 8px; } /* Table에서 colGap 8px */
.colGapInTb2 { column-gap: 16px; } /* Table에서 colGap 16px */
.rowGapInTb2 { row-gap : 8px; } /* Table에서 rowGap 12px(M) */
.borderedBox { padding: 24px 32px; margin: 8px 0; background: var(--txtBg100); border-radius: 24px; border: solid 1px var(--gray400); } 

.searchResult { position: relative; padding-left: 12px; margin-bottom: 8px; font-size:18px; line-height:1.56; } 
.searchResult::before { position: absolute; top:12px; left:0; display:inline-block; width: 4px; height: 4px; background-color: var(--gray600); content: ''; } 



/* -- Section Spacing -------------------- */
section { margin-bottom: 48px; } 



/* -- Layout -------------------- */
body { height: auto; min-height: 100vh; } 
#header { position: relative; z-index: 15; } 
body.isVisibleModal #header { z-index: 1; } 
#contents { position: relative; z-index: 14; min-height: calc(100vh - var(--headerH) - var(--footerH)); } 
#contents .contsWrap { overflow: hidden; position: relative; z-index: 13; display: flex; width: 100%; min-height: calc(100% - var(--breadCrumbsH)); max-width: var(--contentsW); margin: 0 auto; } 
#contents .contsWrap .conts { width: 100%; flex-grow: 1; margin-left: 16px; background: #fff; } 
#footer { position: relative; z-index: 13; } 
.subPage { height: 100%; } 
.bradcrumbsWrap { height: var(--breadCrumbsH); background-color:var(--txtBg200); } 
.breadcrumbs { height: 100%; } 
.bradcrumbsWrap .breadcrumbs { width: 100%; max-width: var(--contentsW); margin: 0 auto; } 
.subPage .lnb { width: 272px; flex-shrink: 0; } 
#contents .fullWPage .contsWrap { min-height: 100%; } 
.fullWPage { height: 100%; } 


/* -- Header -------------------- */
.headerWrap .btnClose { display: none; } 



/* Desktop Header */
@media (min-width: 1025px){
 .headerWrap { position: relative; z-index: 20; display: flex; flex-wrap: wrap; font-size: 0; } 
 .headerWrap.active { background-color: var(--txtBg100); } 
 .headerWrap .header { width: 100%; height: 76px; display: flex; align-items: center; justify-content: space-between; max-width: var(--contentsW); margin: 0 auto; } 
 .headerWrap .logo a { display: inline-block; width: 100%; height: 100%; } 
 .headerWrap .btnMenu { display:none; } 
 .authMenu { display: flex; margin-left:auto; column-gap: 26px; } 
 .authMenu li + li { position: relative; } 
 .authMenu li + li::before { position: absolute; left:-13px; top: 50%; margin-top: -1px; display: inline-block; width: 2px; height: 2px; background-color: var(--txtBg600); content: ''; } 
 .authMenu a { display: flex; font-size:16px; line-height:1.625; } 
 .gnb { width: 100%; height: 68px; border-top: solid 1px transparent; } 
 .gnb:hover { border-color: var(--gray400); } 
 .gnb:hover::before { position: absolute; top: calc(76px + 68px); left: 50%; width: 100%; height: var(--depth2H); border-top: solid 1px var(--txtBg100); border-bottom: solid 1px var(--gray400); background: var(--txtBg100); transform: translateX(-50%); content: ''; } 
 .gnb .depth1 { display: flex; max-width: var(--contentsW); margin: 0 auto; margin-left: auto; } 
 .gnb .depth1 > li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: start; width: calc(100% / 6); } 
 .gnb .depth1 > li > .toggle-sub { display: flex; align-items: center; justify-content: center; width: 100%; height: 68px; font-size: clamp(16px, 1.458vw, 28px); line-height:1.357; font-weight: bold; text-align: center; color: var(--txtBg500); } 
 .gnb .depth1 > li > .toggle-sub,
 .gnb .depth2 { border-style: solid; border-width: 0 1px 0 0; border-color: transparent; } 
 .gnb .depth1 > li:first-child > .toggle-sub,
 .gnb .depth1 > li:first-child .depth2 { border-style: solid; border-width: 0 1px; border-color: transparent; } 
 .gnb:hover,
 .gnb:hover .depth1 { background-color: var(--txtBg100); } 
 .gnb:hover .depth1 > li > .toggle-sub,
 .gnb:hover .depth1 > li .depth2 { border-color: var(--gray400); } 
 .gnb .depth2 { display: none; position: absolute; top: 68px; width: 100%; height: var(--depth2H); background: transparent; } 
 .gnb .depth2 li a { display: flex; align-items: center; padding:8px 0 8px 24px; font-size: clamp(16px, 0.937vw, 18px); line-height: 1.56; font-weight: 400; text-align: left; color: var(--txtBg500); } 
 .gnb .depth2 li:first-child a { padding-top: 9px; } 
 .gnb .depth2 a:hover,
 .gnb .depth2 a.active { text-decoration: underline; } 
 .gnb:hover .depth2 { display: block; } 
 .gnb .depth1 > li > .toggle-sub:hover { color: var(--primary600); cursor: pointer; } 
 }



/* -- LNB -------------------- */
.lnb { } 
.lnb .has-sub.open .submenu { display: block; } 
.lnb a.active { font-weight: bold; } 



/* -- Footer -------------------- */
.footerWrap { border-top: solid 1px var(--gray400); padding: 16px 0; } 
.footer { display: flex; max-width:var(--contentsW); margin: 0 auto; column-gap: 160px; } 
.footer .footerConts { font-weight: 700; font-size:14px; line-height:1.57; } 
.footer .footerLinks ul { display: flex; column-gap: 30px; } 
.footer .footerLinks ul li { position: relative; } 
.footer .footerLinks ul li + li:before { position: absolute; top: 50%; left: -15px; display:inline-block; width: 1px; height: 14px; margin-top: -7px; background-color: var(--gray400); content: ''; } 
.footer .footerAddress .label { position: relative; flex-shrink: 0; } 
.footer .footerAddress .label:after { position: absolute; top: 3px; right: -8px; display:inline-block; width: 1px; height: 14px; background-color: var(--gray400); content: ''; } 




/* -- LNB -------------------- */
.lnb .depth1 { display: flex; align-items: center; justify-content: center; min-height: 96px; background-color: var(--primary600); font-size:20px; line-height:1.6; color: var(--txtBg100) } 
.lnb .submenu .active { background-color: var(--txtBg200); } 
.lnb .submenu a { display: flex; padding: 16px; border-bottom: solid 1px var(--gray500); font-size:20px; line-height:1.6; } 



/* -- Sub Page -------------------- */
.subPage .contsWrap { padding-bottom: 100px; } 
.subPage .title { margin: 80px 0 80px; text-align: center; } 
.subPage .guideTxt { margin-bottom: 8px; font-size:18px; line-height:1.56; } 
.subPage .title + .searchWrap { margin-top: -24px; margin-bottom: 24px; } 
.subPage .title + form > .searchWrap { margin-top: -24px; margin-bottom: 24px; } /*20250813 form 추가 kej*/
.subPage .title + .infoBox { margin-top: -24px; margin-bottom: 24px; } 
.subPage h3 { position: relative; padding-left: 12px; margin-bottom: 16px; font-size: 26px; line-height: 1.46; font-weight: 700; } 
.subPage h3 .num { font-size:22px; line-height:1.545; font-weight: 700; } 
.subPage h3::before { position: absolute; top: 50%; left: 0; display: inline-block; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--gray600); content: ''; } 
.subPage h3.number { padding-left: 0; } 
.subPage h3.number::before { display: none; } 
.subPage h3.cAccent500::before { background: var(--accent500); } 
.subPage table .required { display: block; position: relative; padding-left: 10px; color: var(--accent500); } 
.subPage table .required::before { display: inline-block; position: absolute; top: 50%; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: currentColor; margin-top: -2px; content: ''; } 
.subPage table .selected { background-color: rgba(30, 144, 255, 0.2); } 



/* -- 예외) 컨텐츠가 Lnb 영역 까지 그려짐 (증표 사용내역 조회·수정, 수임사건 상세 조회) -------------------- */
.fullConts.subPage .lnb { position:absolute; } 
#contents .subPage.fullConts .conts { margin-left: 0; } 
.fullConts.subPage .hasLeftSpacing { margin-left: calc(272px + 16px) } 
.fullConts.subPage .formTableVertical th { width: 272px } 
.fullConts.subPage .tableBasic th,
.fullConts.subPage .tableBasic td { padding : 18px 8px; font-size:16px; line-height:1.625; } 



/* -- Mobile responsive -------------------- */
@media (max-width: 1024px){
    .mLineBreak { display: block; } 

    .onlyMobile { display: initial !important; } 

    .colGapInTb1 { column-gap: 4px; } /* Table에서 colGap 4px(M) */
    .colGapInTb2 { column-gap: 8px; } /* Table에서 colGap 8px(M) */
    .rowGapInTb1 { row-gap : 4px; } /* Table에서 rowGap 4px(M) */
    .rowGapInTb2 { row-gap : 12px; } /* Table에서 rowGap 12px(M) */

    .searchResult { padding-left: 12px; font-size:14px; line-height:1.57; } 
    .searchResult::before { top:6px; left:0; width: 4px; height: 4px; background-color: var(--gray600); content: ''; } 

    .flexGrow1M { flex-grow: 1; } 
    body { --headerH : 64px; } 


    /* -- Section Spacing(M) -------------------- */
    section { margin-bottom: 32px; }    


    /* -- Common(M) -------------------- */
    .logo { width: 202px; height: 32px; } 

    /* -- Layout(M) -------------------- */
    .lnb { display: none; } 
    #contents .contsWrap { max-width: 100%; } 
    #contents .contsWrap .conts { margin-left: 0; padding: 0 16px; } 

    /* -- Sub Page(M) -------------------- */
    .subPage .guideTxt { font-size:14px; line-height:1.57; } 
    .subPage h3 .num { font-size:12px; line-height:1.5; } 

    /* -- Header(M) -------------------- */
    .headerWrap {
        position: relative;
        z-index: 20;
    }
    .headerWrap .header { height: 64px; padding: 16px; } 
    .headerWrap .btnMenu { display:block; } 
    .headerWrap .authMenu { display: none; align-items: center; column-gap: 2.22vw; position:fixed; top:0; left:0; width: 100%; height: 64px; padding: 12px 16px; background-color: var(--txtBg200); } 
    .headerWrap .authMenu a { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 76px; height: 48px; padding: 0 24px; font-size: 16px; line-height: 1.625; border: none; border-radius: 10px; cursor: pointer; fill: currentColor; stroke: currentColor; } 
    .headerWrap .authMenu .btnLogin { background-color: var(--primary500); color: var(--txtBg100); } 
    .headerWrap .authMenu .btnSignUp { background-color: var(--txtBg100); color: var(--primary500); border: solid 1px currentColor; } 
    .headerWrap .gnb { display: none; overflow: auto; position:fixed; top: var(--headerH); left: 0; width: 100%; height: calc(100vh - var(--headerH)); background-color: var(--txtBg100); } 
    .headerWrap .gnb .depth1 { flex-direction: column; } 
    .headerWrap .gnb .depth1 > li > .toggle-sub { display: flex; align-items: center; width: 100%; height: 72px; padding: 24px; font-weight: 700; color: var(--txtBg500); font-size:18px; line-height:1.56; border-top: solid 1px var(--gray400); background: url(../../../static/shared/icons/icon-arrow_down.svg) no-repeat calc(100% - 24px) center / 24px 24px; } 
    .headerWrap .gnb .depth1 > li.has-sub.open .toggle-sub { color: var(--primary600); background-image:url(../../../static/shared/icons/icon-arrow_up.svg) } 
    .headerWrap .gnb .depth1 .outerLink { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 72px; padding: 24px; font-weight: 700; color: var(--txtBg100); font-size:18px; line-height:1.56; border-top: solid 1px var(--gray400); background-color: var(--primary500); } 
    .headerWrap .gnb .depth1 .outerLink .icoArrowRight { width: 24px; height: 24px; } 
    .headerWrap .gnb .depth1 .outerLink .icon * { fill: var(--txtBg100); stroke: var(--txtBg100); } 
    .headerWrap .gnb .depth2 { display: none; flex-direction: column; width: 100%; row-gap: 16px; padding: 0 32px 24px 32px; } 
    .headerWrap .gnb .has-sub.open .depth2 { display: flex; } 
    .headerWrap .gnb .has-sub.open .depth2 li > a { display: flex; font-size:18px; line-height:1.56; color: var(--txtBg600); } 
    .headerWrap.open + .dimmed { display: none; } 
    .headerWrap.open .btnClose { display:inline-block; width: 24px; height: 24px; position: absolute; top: 20px; right: 16px; } 
    .headerWrap.open .authMenu { display: flex; } 
    .headerWrap.open .gnb { display:block; z-index: 20;} 
    .subPage .contsWrap { flex-direction: column; padding-bottom: 80px; } 
    .subPage h3 { margin-bottom: 8px; font-size:16px; line-height:1.625; } 

    /* -- Footer(M) -------------------- */
    .footer { flex-direction: column-reverse; align-items: center; justify-content: center; row-gap: 16px; padding: 0; } 
    .footer .footerConts { display: flex; flex-direction: column; align-items: center; font-weight: 400; font-size:11px; line-height:1.45; } 
    .footer .footerConts .footerAddress { margin-top: 16px; } 
    .footer .footerConts .footerAddress > div { justify-content: center; column-gap : 8px; } 
    .footer .footerAddress .label:after { right: -4px; } 

    /* -- Subpage(M) -------------------- */
    .subPage .title { margin: 32px 0; font-size:24px; line-height:1.58; } 
    .subPage .title + .searchWrap { margin-top: 0; margin-bottom: 16px; } 
    .subPage .infoBox + .searchWrap { margin-top: 8px; margin-bottom: 16px; } 
    .subPage table .required::before { top: 8px; margin-top: 0; } 

    .tableWrap.mbSp9 { margin-bottom: 32px; } 
    .tableWrap.mbSp7 { margin-bottom: 24px; } 
    .tableWrap.mbSp5 { margin-bottom: 16px; } 
    .tableWrap.mbSp4 { margin-bottom: 8px; } 

    .searchWrap .selectWrapper { width: auto; } 
    .searchWrap .mlSp2 { margin-left: 0; } 


    /* -- 예외) 컨텐츠가 Lnb 영역 까지 그려짐 (증표 사용내역 조회·수정, 수임사건 상세 조회) -------------------- */
    .fullConts.subPage .lnb { position:initial; } 
    .fullConts.subPage .hasLeftSpacing { margin-left: 0 } 
 }