/*
reference 첫 페이지 는 guide-article 이다.
그렇기 때문에 article 클래스명을 따로 적지 않고 여기다가 적겠음.
*/
article section div.intro-sub-box { background-color : #f0f5fc; padding : 20px 20px;}
article section div.intro-sub-box > p {margin : 0;}
article section div.intro-sub-box span {font-weight : 500;}
article section div.intro-sub-box span + p {margin-top : 0;}
article section div.intro-sub-box ul>li:last-child{margin-bottom : 0;}
article section div.intro-sub-box ul li ul li:after {content:none;}
article section div.api-list div.list-title {padding : 30px 0 15px; font-size : 18px;}
article section div.api-list div.list-title:first-child {padding : 0 0 15px;}
article section div.api-list ul > li{padding-left : 0;}
article section div.api-list ul > li:after{display: none;}

article.api-article { counter-reset : objectTitle; }
article.api-article section h6 {font-size: 18px; margin-bottom: 0;}
article.api-article section ul > li { line-height: 1.4; font-size: 15px; margin-bottom: 5px; }
article.api-article section ul > li::after { width: 4px; height: 4px; top: 8px; left: 5px; }
article.api-article section > p { margin-bottom: 30px; }
article.api-article section > p.api-description { margin-bottom: 10px; }
article.api-article section ul > li p { font-size: 0.9em; margin: 0; }
article.api-article section p.api-description > span { display: block; font-size: 0.85em; line-height: 1.5; margin: 0; }

article.api-article section a[data-object-name] { color: rgb(77, 100, 228); position: relative;}
article.api-article section table a[data-object-name]::after {content: ''; background: url("/images/common/document/icon_open_arrow.svg") no-repeat; display: inline-block; width: 12px; height: 15px; transform: rotate(0); transition: transform 0.2s ease;}
article.api-article section tr:has(+ tr.nested-wrapper) td:first-child {box-shadow: inset 0 0 0 #3A53DB; transition: box-shadow 0.2s ease;}
article.api-article section tr:has(+ tr.nested-wrapper.open) td:first-child {box-shadow: inset 4px 0 0 #3A53DB;}
article.api-article section tr:has(+ tr.nested-wrapper.open) td a[data-object-name]::after {transform: rotate(-90deg);}
article.api-article section a:hover { text-decoration: underline; }
article.api-article section div.caution-box { margin-top: 28px; padding: 18px 28px 19px 27px; }
article.api-article section h6.parameters { margin-top: 30px; }
article.api-article section div.panel-box > ul > li{padding-left : 0;}
article.api-article section div.panel-box > ul > li:after{display: none;}

article.api-article section > div.popup-content {display: flex; margin-top: 20px;}
article.api-article section > div.popup-content > .thumbnail {position: relative; display: inline-block; width: 110px; height: 110px; overflow: hidden; border: solid 1px #000000; border-radius: 3px; }
article.api-article section > div.popup-content > div > .thumbnail-image {cursor: pointer; display: block; width: 100%; height: 100%; object-fit: cover; }
article.api-article section > div.popup-content > div > .thumbnail-overlay {cursor: pointer; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 1; }
article.api-article section > div.popup-content > div > div > img.preview-image {width: 30px; height: 30px; margin-bottom: 7px;}
article.api-article section > div.popup-content > div > div > img.preview-text-image {width: 52px; height: 20px;}
article.api-article section > div.popup-content > ul.popup-explain {display: block; margin: 0 0 0 20px;}
article.api-article section > div.popup-content > ul li {margin-bottom: 7px;}
article.api-article section > div.popup-content > ul li:first-child {font-weight: 600; padding-left: 0; margin-bottom: 12px;}
article.api-article section > div.popup-content > ul li:first-child::after {display: none;}

main.api-page > div.popup-modal {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999997; background-color: rgba(51,51,51,0.88); justify-content: center; align-items: center;}
main.api-page > div > .modal-content {position: relative; max-width: 80vw; max-height: 40vw; z-index: 999998; opacity: 1; border: none; border-radius: 5px;}
main.api-page > div > .modal-close { position: absolute; top: calc(50% + 21vw); left: 50%; transform: translateX(-50%); z-index: 999999; width: 4.5vw; height: 2.2vw; background-color: #FFFFFF; border-radius: 3vw; color: #0d59ff; font-size: 0.85vw; font-weight: bold; padding: 0 0.8vw 0.1vw 0; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); border: solid 0.15vw #000000;}
main.api-page > div > .modal-close::after {content:""; position:absolute; background: url('/images/reference/common/close.svg') no-repeat; background-size: contain; width: 0.53vw; height: 0.53vw; right: 1vw; transform: translateY(34%)}
article.api-article table tbody tr td > div > dl.img-explain {display: grid; grid-template-columns: 70px minmax(0, 1fr); }
article.api-article table tbody tr td > div > dl.img-explain > dt {margin : 0 0 3px 0; position: relative; line-height: 1.4; font-weight: 400;}
article.api-article table tbody tr td > div > dl.img-explain > dt:after {content: " : "; position: absolute; right: 0;}
article.api-article table tbody tr td > div > dl.img-explain > dd {margin : 0 0 3px 10px; min-width:0; line-height: 1.4; font-weight: 400;}

article.api-article section .accordion-wrapper {margin: 12px 0 20px; background: #fff; border: solid 1px #d3dce4; border-radius: 5px; overflow: hidden; transition: background-color 0.2s ease;}
article.api-article section .accordion-wrapper .accordion-header {display: flex; align-items: center; gap: 6px; padding: 16px; font-weight: 600; font-size: 16px; user-select: none; cursor: pointer; background-color: #fff; transition: background-color 0.2s ease;}
article.api-article section .accordion-wrapper .accordion-header:hover {background-color: #FAFAFA;}
article.api-article section .accordion-wrapper:has(.accordion-header:hover) {border-color: #D0D0D0;}
article.api-article section .accordion-wrapper .accordion-header::before {content: ''; background: url("/images/common/document/icon_accordion_arrow.svg") center/contain no-repeat; transform: rotate(-90deg); display: block; width: 16px; height: 16px; transition: transform 0.2s ease-in-out;}
article.api-article section .accordion-wrapper .accordion-content {display: grid; grid-template-rows: minmax(0, 0fr); transition: grid-template-rows 0.2s ease-in-out;}
article.api-article section .accordion-wrapper .accordion-content > * {overflow: hidden;}
article.api-article section .accordion-wrapper .accordion-content table {margin-top: 0;}
article.api-article section .accordion-wrapper .accordion-content table{counter-reset:tr; font-size: 14px; table-layout: fixed;}
article.api-article section .accordion-wrapper .accordion-content table tr:not(.nested-wrapper) td:first-child::before{counter-increment : tr;content : counter(tr);}
article.api-article section .accordion-wrapper .accordion-content table thead tr th {padding: 8px 10px;}
article.api-article section .accordion-wrapper .accordion-content table tbody tr td {padding: 10px;}
article.api-article section .accordion-wrapper .accordion-content table tr td:not([colspan]):nth-child(1),
article.api-article section .accordion-wrapper .accordion-content table tr td:not([colspan]):nth-child(4),
article.api-article section .accordion-wrapper .accordion-content table tr td:not([colspan]):nth-child(5) {text-align: center; padding: 10px 0;}
article.api-article section .accordion-wrapper .accordion-content table tr td:not([colspan]):last-child {text-align: left; padding: 10px;}
article.api-article section .accordion-wrapper .accordion-content table thead tr th:nth-child(1) { width: 5%; max-width: 5%; min-width: 5%; padding: 0;}
article.api-article section .accordion-wrapper .accordion-content table thead tr th:nth-child(2) { min-width: 15%; }
article.api-article section .accordion-wrapper .accordion-content table thead tr th:nth-child(3) { min-width: 13%; }
article.api-article section .accordion-wrapper .accordion-content table thead tr th:nth-child(4) { width: 6.5%; max-width: 6.5%; min-width: 6.5%; padding: 0; }
article.api-article section .accordion-wrapper .accordion-content table thead tr th:nth-child(5) { width: 6.5%; max-width: 6.5%; min-width: 6.5%; padding: 0; }
article.api-article section .accordion-wrapper .accordion-content table thead tr th:last-child { width: 43%; max-width: 43%; }
article.api-article section .accordion-wrapper .accordion-content table tr:hover {background: #F6F9FE;}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper + tr td {border-top: 0;}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper > td {border: 0;}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper > td {padding: 0;}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper > td > .nested-table-wrapper {padding: 0 15px; display: grid; grid-template-rows: minmax(0, 0fr); transition: all 0.2s ease-in-out;}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper > td > .nested-table-wrapper > .nested-table-content {overflow: hidden;}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper > td > .nested-table-wrapper > .nested-table-content.scroll-polyfill {overflow: visible;}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper > td > .nested-table-wrapper > .nested-table-content > .header {margin-bottom: 13px; background: url("/images/common/document/icon_depth_arrow.svg") left center no-repeat; padding-left: 20px; font-weight: 500; font-size: 15px; color: #424a57;}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper > td > .nested-table-wrapper > .nested-table-content > .body {border: 1px solid rgb(224,224,224); overflow: clip; border-radius: 3px;}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper.depth1 > td > .nested-table-wrapper {background: #FAFBFB; scroll-margin-top: var(--headerHeight) + var(--snbHeight, 0px);}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper.depth2 > td > .nested-table-wrapper {background: #F2F2F3;}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper.open > td {border-bottom: 1px solid rgb(224, 224, 224);}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper.open > td > .nested-table-wrapper {grid-template-rows: minmax(0, 1fr); padding: 15px;}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper table thead tr th:nth-child(1) { width: 4%; max-width: 4%; min-width: 4%; padding: 0;}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper table thead tr th {border-top: 0;}
article.api-article section .accordion-wrapper .accordion-content table tr.nested-wrapper table tbody tr:last-child td {border-bottom: 0;}
article.api-article section .accordion-wrapper .accordion-content table tr:has(+ tr.nested-wrapper:not(.open)):nth-last-child(2) td {border-bottom: 0;}
article.api-article section .accordion-wrapper .accordion-content > table > tbody > tr:last-child > td {border-bottom: 0;}
article.api-article section .accordion-wrapper.open .accordion-header::before {transform: rotate(0);}
article.api-article section .accordion-wrapper.open .accordion-content {grid-template-rows: minmax(0, 1fr);}

article.api-article section table thead td {font-weight: 500;}
#popbill-url-info {margin: 20px 0;}


@media (max-width: 980px) {
    article section div.agency-list ul > li {width : 50%;}
    article.api-article section .accordion-wrapper.open .accordion-content {overflow-x: auto}
    article.api-article section .accordion-wrapper.open .accordion-content::-webkit-scrollbar { width: 6px; height: 6px; }
    article.api-article section .accordion-wrapper.open .accordion-content::-webkit-scrollbar-thumb { background-color: #e0e0e0; border-radius: 3px; }
    article.api-article section .accordion-wrapper.open .accordion-content::-webkit-scrollbar-track {background-color: transparent;}
    article.api-article section .accordion-wrapper .accordion-content > table {min-width: 880px;}
}

@media (max-width: 500px) {
    article section div.intro-sub-box{padding : 10px;}
    article section div.agency-list ul > li {padding-left : 40px;}
    article section div.agency-list ul > li img{left : 0;}
}

@media print {
    article.api-article section:has(h3) {break-after: page}
    article.api-article section tr:has(+ tr.nested-wrapper) td:first-child {box-shadow: inset 4px 0 0 #3A53DB;}
    article.api-article section tr:has(+ tr.nested-wrapper) td a[data-object-name]::after {transform: translateY(-50%) rotate(-90deg);}
    article.api-article section .accordion-wrapper .accordion-header::before {transform: rotate(0);}
    article.api-article section .accordion-wrapper .accordion-content {display: block; grid-template-rows: unset;}
    article.api-article section .accordion-wrapper .accordion-content > * {overflow: visible;}
    article.api-article section .accordion-wrapper .accordion-content > table {min-width: unset;}
    article.api-article section .accordion-wrapper .accordion-content > table tr td:nth-child(2) {word-break: break-all; padding: 5px;}
    article.api-article section .accordion-wrapper .accordion-content > table tr td:not([colspan]) {break-inside: avoid; page-break-inside: avoid;}
    article.api-article section table tr.nested-wrapper > td {border-bottom: 1px solid rgb(224, 224, 224);}
    article.api-article section table tr.nested-wrapper > td > .nested-table-wrapper {display: block; grid-template-rows: unset; padding: 15px;}
    article.api-article section table tr.nested-wrapper > td > .nested-table-wrapper .header {display: none;}
}