article.api-article section > p.api-description { margin-bottom: 10px; }
article.api-article section p.api-description > span { display: block; font-size: 0.85em; line-height: 1.5; margin: 0; }

article.api-article section .accordion-wrapper .accordion-content table tr td:not([colspan]):nth-last-child(2) {text-align: center; padding: 10px 0;}
article.api-article section .accordion-wrapper .accordion-content table thead tr th:nth-last-child(2) { width: 6.5%; max-width: 6.5%; min-width: 6.5%; padding: 0; }
article.api-article section .accordion-wrapper .accordion-content pre {margin: 0;}
article.api-article section .accordion-wrapper .accordion-content pre code.hljs {border: 0; border-radius: 0;}

article.api-article section .accordion-wrapper .accordion-content table .clickable {color: rgb(77, 100, 228); position: relative; cursor: pointer;}
article.api-article section .accordion-wrapper .accordion-content table .clickable:hover {text-decoration: underline;}
article.api-article section .accordion-wrapper .accordion-content table .clickable::after {content: ''; background: url("/images/common/document/icon_open_arrow.svg") no-repeat; display: block; width: 12px; height: 15px; position: absolute; top: 50%; right: -12px; transform: translateY(-50%) rotate(0); transition: transform 0.2s ease;}
article.api-article section tr:has(+ tr.nested-wrapper.open) td .clickable::after {transform: translateY(-50%) rotate(-90deg);}

.api-endpoint:has(.post) {--EndPointbgColor: #EAF9EA; --EndPointMethodColor: #00BC59;}
.api-endpoint:has(.get) {--EndPointbgColor: #EAF5FF; --EndPointMethodColor: #1E90FF;}
.api-endpoint {display: flex; flex-direction: column; border-radius: 5px; margin-bottom: 20px; background: var(--EndPointbgColor);}
.api-endpoint .tabs {display: flex; padding: 0 8px; border-bottom: solid 1px #D3DCE4; height: 44px;}
.api-endpoint .tabs button {margin: 0 8px -1px; background: transparent; flex: 0 0 108px; text-align: center; font-weight: 600; font-size: 14px; letter-spacing: -0.03em; color: #7D8498; border-bottom: solid 3px transparent;}
.api-endpoint .tabs button[aria-selected=true] { color: #121212; border-bottom-color: var(--EndPointMethodColor);}
.api-endpoint div[role=tabpanel] {display: none; align-items: center; padding: 0 16px; gap: 12px; height: 52px;}
.api-endpoint div[role=tabpanel].active {display: flex;}
.api-endpoint div[role=tabpanel] .api-method {display: flex; padding: 6px 8px; color: #fff; font-weight: 600; font-size: 12px; border-radius: 4px; background: var(--EndPointMethodColor);}
.api-endpoint div[role=tabpanel] .api-url {padding-bottom: 2px; font-size: 15px; color: #444; position: relative;}
.api-endpoint div[role=tabpanel] .api-url .copyButton {position: absolute; top: 50%; right: -22px; transition: background 0.2s ease-in-out; transform: translateY(-50%); display: block; width: 16px; height: 16px; background: url("/images/common/document/ic_copy.svg") no-repeat;}
.api-endpoint div[role=tabpanel] .api-url .copyButton::after {content: ''; opacity: 0; position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); display: block; border-radius: 4px; padding: 5px 6px 7px; background: #303540; font-weight: 500; font-size: 11px; letter-spacing: -0.03em; color: #fff; user-select: none; pointer-events: none;}
.api-endpoint div[role=tabpanel] .api-url .copyButton:hover::after {content: 'Copy'; opacity: 1; transition: opacity 0.2s ease-in-out;}
.api-endpoint div[role=tabpanel] .api-url .copyButton.copied {background-image: url("/images/common/document/ic_copied.svg");}
.api-endpoint div[role=tabpanel] .api-url .copyButton.copied::after {content: 'Copied!'; opacity: 1; transition: opacity 0.2s ease-in-out;}

.selected {box-shadow: inset 4px 0 0 #3A53DB;}
.api-product-name {margin-top: 15px;}

/* code script 설정 */
.code-snippet .hljs { background-color: #122440; font-weight: 400; color: #EEFFFF; }
.code-snippet .hljs .hljs-meta { color: #EEFFFF; }
.code-snippet .hljs .hljs-built_in { color: #EEFFFF; }
.code-snippet .hljs .hljs-variable { color: #00A661; }
.code-snippet .hljs .hljs-keyword { color: #4593FC; }
.code-snippet .hljs .hljs-literal { color: #FFB74D; }
.code-snippet .hljs .hljs-string { color: #FFB74D; }
.code-snippet .hljs .hljs-symbol { color: #FFB74D; }
.code-snippet .hljs .hljs-attr { color: #00A661; }
.code-snippet .hljs .hljs-punctuation { color: #89DDFF; }
.code-snippet .hljs .hljs-number { color: #F78C6C; }

/* 인쇄 설정 */
@media print {
    .code-snippet .hljs { background-color: transparent; color: #121212; }
    .code-snippet .hljs .hljs-meta,
    .code-snippet .hljs .hljs-built_in,
    .code-snippet .hljs .hljs-variable,
    .code-snippet .hljs .hljs-keyword,
    .code-snippet .hljs .hljs-literal,
    .code-snippet .hljs .hljs-string,
    .code-snippet .hljs .hljs-symbol,
    .code-snippet .hljs .hljs-attr,
    .code-snippet .hljs .hljs-punctuation,
    .code-snippet .hljs .hljs-number { color: #121212; }
}