@charset "UTF-8";
/* =============================================================================
   포털 공통 셸 레이아웃 (최종 로드 — 레거시/퍼블 CSS 충돌 정리 계층)
   =============================================================================
   기본 틀
     1) 좌우 여백 확보      : --portal-gutter
     2) 가운데 배치         : --portal-max + margin auto
     3) 사이드바-내용 여백  : --portal-lnb + --portal-gap

   포털에는 두 종류의 화면 셸이 공존한다. 아래 규칙으로 둘을 동일하게 정렬한다.
     A. 레거시 셸 : body.user .user-content > (.lnb-wrap + .content-wrap)
     B. 퍼블 셸   : .mz-main > .container.sub-main > (.lnb-wrap + 본문)

   ※ 퍼블 common.css는 .lnb-wrap을 position:absolute, .container를 width:1200px로
     정의해 레거시 화면을 깨뜨린다. 이 파일에서 두 셸 모두 flex 모델로 통일한다.
   ============================================================================= */

:root {
    --portal-max: 1440px;   /* 콘텐츠 최대 폭 */
    --portal-gutter: 40px;  /* 화면 좌우 여백 */
    --portal-lnb: 250px;    /* 좌측 사이드바 폭 */
    --portal-gap: 40px;     /* 사이드바 ↔ 본문 간격 */
}

/* -----------------------------------------------------------------------------
   0) 퍼블 base.css 전역 리셋 중화
      base.css는 html/body에 height:100%·overflow:hidden을 걸어 포털의 페이지
      스크롤과 헤더/푸터 배치를 깨뜨린다. 폰트·타이포 규칙만 살리고 되돌린다.
   -------------------------------------------------------------------------- */
html {
    height: auto;
}
body {
    height: auto;
    overflow: auto;
    display: block;
}

/* -----------------------------------------------------------------------------
   A. 레거시 셸 — body.user .user-content > (.lnb-wrap + .content-wrap)
      ※ 퍼블 페이지는 LNB가 contentFragment 안(.container.sub-main)에 있어 이 셸에
        해당하지 않는다. :has()로 구분해 좌우 여백/최대폭이 이중 적용되지 않게 한다.
   -------------------------------------------------------------------------- */
body.user .user-content:has(> .lnb-wrap) {
    padding-top: 40px;                    /* 레거시 main.css body.user .user-content{padding-top:100px} → 퍼블 셸(.mz-main .lnb-wrap/.inner-contents-wrap 40px)과 동일 */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--portal-gap);               /* 3) 사이드바 ↔ 본문 여백 */
    max-width: var(--portal-max);
    width: 100%;                          /* 퍼블 common.css body{display:flex;flex-direction:column} 로드 페이지(/apiservice)에서
                                             좌우 auto 마진 + column flex 조합이 fit-content 로 수축하지 않도록 (B 섹션과 동일 이유) */
    margin-left: auto;                    /* 2) 가운데 배치 */
    margin-right: auto;
    padding-left: var(--portal-gutter);   /* 1) 좌우 여백 */
    padding-right: var(--portal-gutter);
}

/* 퍼블 셸(.mz-main)만 들어있는 경우 — 바깥은 통과시키고 안쪽 컨테이너가 정렬을 담당 */
body.user .user-content:not(:has(> .lnb-wrap)) {
    display: block;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

body.user .user-content > .lnb-wrap {
    position: static;                     /* 퍼블 absolute 무력화 */
    flex: 0 0 var(--portal-lnb);
    width: var(--portal-lnb);
    height: auto;
}

body.user .user-content > .content-wrap {
    flex: 1 1 auto;
    min-width: 0;                         /* 긴 코드/표가 폭을 밀어내지 않도록 */
    max-width: 100%;
}

/* -----------------------------------------------------------------------------
   B. 퍼블 셸 — .mz-main > .container.sub-main
      (about / howto / samplecode / stock-info / mcp)
   -------------------------------------------------------------------------- */
.mz-main > .container.sub-main {
    position: static;                     /* 퍼블 relative + padding-left 모델 해제 */
    display: flex;
    align-items: flex-start;
    gap: var(--portal-gap);               /* 3) 사이드바 ↔ 내용 여백 */
    /* 퍼블 .container width:1200px 해제.
       ※ auto가 아닌 100%인 이유: 부모 .mz-main이 column flex 컨테이너라
          auto + 좌우 auto 마진 조합은 fit-content로 수축한다(내용이 적으면
          페이지 폭이 쪼그라듦). 100%는 부모를 채우고 max-width가 상한을 건다. */
    width: 100%;
    max-width: var(--portal-max);
    margin: 0 auto;                       /* 2) 가운데 배치 */
    padding-left: var(--portal-gutter);   /* 1) 좌우 여백 */
    padding-right: var(--portal-gutter);
}

.mz-main > .container.sub-main > .lnb-wrap {
    position: static;                     /* 퍼블 absolute 무력화 */
    flex: 0 0 var(--portal-lnb);
    width: var(--portal-lnb);
    height: auto;
    /* 간격은 컨테이너 flex gap 으로 처리 */
}

/* 본문 영역 — inner-contents-wrap(일반) / [data-mcp-panel](MCP 전환 패널) 공통 */
.mz-main > .container.sub-main > *:not(.lnb-wrap) {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}
/* 퍼블 inner-contents-wrap의 좌측 패딩은 위 gap으로 대체 */
.mz-main .inner-contents-wrap {
    padding-left: 0;
}

/* 넘치는 코드 블록·표는 내부에서 가로 스크롤 */
.mz-main .code-wrap,
body.user .user-content .code-wrap,
body.user .user-content .table-wrap {
    overflow-x: auto;
}

/* -----------------------------------------------------------------------------
   C. 공용 푸터 (web/fragment/footer.html)
      퍼블 디자인 클래스를 쓰는데 정의는 assets/css/common.css에만 있어,
      해당 CSS를 로드하지 않는 페이지에서 푸터가 깨졌다. footer 하위로만 재정의한다.
   -------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   B2. 메뉴 건너뛰기(#wrap_skip) — 접근성(키보드 사용자용) 스킵 링크.
       레거시 common.css가 마우스 hover에도 표시해 상단에 회색 바가 튀어나오던 것을
       키보드 포커스/활성 시에만 나타나도록 제한한다. (요소 자체는 접근성 요건상 유지)
   -------------------------------------------------------------------------- */
#wrap_skip a:hover:not(:focus):not(:active) {
    display: block;
    top: -1000px;
    background: none;
}

/* 푸터 배경 — 퍼블(.footer)과 동일한 #171719 (레거시 main.css의 #444 대체).
   margin/padding 0 은 퍼블 260904 common.css footer{margin:0;padding:0} 와 동일값 — 레거시 main.css footer{padding:20px 0}
   가 비퍼블 페이지에만 남아 푸터 높이가 페이지마다 달라지지 않도록 전 페이지 통일 */
footer {
    background-color: #171719;
    margin: 0;
    padding: 0;
}
/* 레거시 layout css(body.user/my/register/admin footer{height:88px})의 고정 높이 해제 —
   새 푸터 내용이 88px를 넘어 아래쪽 배경이 잘려 보이던 문제(/mcp 등). 내용만큼 늘어난다. */
body.user footer,
body.my footer,
body.register footer,
body.admin footer {
    height: auto;
    min-height: 88px;
}
footer .container-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
    max-width: 1920px;
    padding: 40px;
}
footer .container-footer .container {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}
footer .logo-footer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
    flex-wrap: nowrap;
    position: absolute;
}
footer .logo-api-footer {
    font-family: 'Montserrat';
    color: #fff;
    font-weight: 700;
}
footer .link-wrap {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}
footer .link-wrap a {
    font-size: 13px;
    font-size: .8125rem;
    color: #858688;
    font-weight: 500;
    line-height: 1.38;
    letter-spacing: .2px;
}
/* hover 밑줄 — reset.css의 `a:hover{text-decoration:none!important; color:#006085}` 가
   전역 !important로 눌러버려 동일하게 !important + 상위 특이도로 복원한다 */
footer .link-wrap a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}
footer .fs-11 { font-size: 11px; font-size: .6875rem; }
footer .font-medium { font-weight: 500 !important; }
footer .color-black02 { color: #47484B !important; }
footer .mt-15 { margin-top: 15px !important; }

@media (max-width: 1590px) {
    footer .logo-footer { position: relative; margin-bottom: 16px; }
}

/* -----------------------------------------------------------------------------
   D. 모바일 — 사이드바 숨김, 여백 축소 (레거시 미디어쿼리와 동일 분기점)
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    body.user .user-content:has(> .lnb-wrap),
    .mz-main > .container.sub-main {
        display: block;
        max-width: none;
        padding-left: 20px;
        padding-right: 20px;
    }
    body.user .user-content:has(> .lnb-wrap) > .lnb-wrap,
    .mz-main > .container.sub-main > .lnb-wrap {
        display: none;
    }
}

/* -----------------------------------------------------------------------------
   E. 레거시 규칙이 퍼블 화면(.mz-main)을 덮어쓰지 않도록 차단
      user 레이아웃의 .user-content 하위 규칙들은 특이도가 높아(예:
      `body.user .user-content .page-title h2` = 0,0,3,2) 퍼블 제목(.title-h2)을
      회색(#DDD)·70px 고정 높이·float:left 로 밀어내고 있었다.
      퍼블 영역에 한해 원래 디자인 값으로 되돌린다.
   -------------------------------------------------------------------------- */
body.user .user-content .mz-main .page-title,
body.main .main-content .mz-main .page-title {
    position: static;
    height: auto;
}
body.user .user-content .mz-main .page-title::after,
body.main .main-content .mz-main .page-title::after {
    content: none;
}
body.user .user-content .mz-main .page-title h2,
body.user .user-content .mz-main h2.title-h2,
body.main .main-content .mz-main h2.title-h2 {
    float: none;
    font-size: 32px;
    font-size: 2rem;
    line-height: 1.3;
    font-weight: 700;
    color: #171719;
    padding-left: 0;
}
body.user .user-content .mz-main h3.title-h3,
body.user .user-content .mz-main h4.title-h4,
body.user .user-content .mz-main h5.title-h5 {
    color: #171719;
    float: none;
}

/* -----------------------------------------------------------------------------
   F. breadcrumb 구분자 중복 제거
      Bootstrap의 `.breadcrumb-item + .breadcrumb-item::before { content:"/" }`(0,0,2,1)가
      퍼블의 화살표 아이콘 규칙(0,0,1,1)을 이겨 '/'와 '>'가 겹쳐 보였다.
      같은 특이도로 재정의해 아이콘만 남긴다. (레거시는 .breadscrumb-item 이라 무관)
   -------------------------------------------------------------------------- */
.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    content: '';
    padding-right: 0;
    width: 20px;
    height: 20px;
    background: url('/assets/img/ico-arr-right-gr.png') no-repeat center;
}
.breadcrumb-item:first-child::before {
    display: none;
}

/* Bootstrap `.breadcrumb`의 회색 알약 배경·패딩이 퍼블 breadcrumb에 남던 문제 해제 */
.mz-main .breadcrumb {
    padding: 0;
    margin-bottom: 0;
    background-color: transparent;
    border-radius: 0;
    list-style: none;
}

/* -----------------------------------------------------------------------------
   G. 퍼블 서브 페이지 마무리 정리
   -------------------------------------------------------------------------- */
/* openapi.css의 .mz-main{overflow:auto}가 서브 페이지에서 중첩 스크롤바를 만들지 않도록 */
.mz-main:has(> .container.sub-main) {
    overflow: visible;
}

/* 좌측 LNB — 본문이 길어도 구분선이 끝까지 이어지도록, 상단 정렬 유지 */
.mz-main > .container.sub-main > .lnb-wrap {
    align-self: auto;
    padding-top: 40px;
}

/* 카드형 그리드(종목정보 등) — 카드 높이를 서로 맞추고 내부 버튼을 하단 정렬 */
.mz-main .flex-row > .col-1.border-grey01 {
    display: flex;
    flex-direction: column;
}
.mz-main .flex-row > .col-1.border-grey01 > ul {
    flex: 1 1 auto;
}

/* 표·코드가 좁은 화면에서 넘칠 때 내부 스크롤 */
.mz-main .table-wrap01,
.mz-main .api-code-wrap {
    overflow-x: auto;
}

/* -----------------------------------------------------------------------------
   H. Bootstrap 그리드 ↔ 퍼블 flex 유틸 클래스명 충돌 해제
      Bootstrap: `.col-1{flex:0 0 8.333333%; max-width:8.333333%}` +
                 `.col,.col-1,…{position:relative; width:100%; padding:0 15px}`
      퍼블     : `.col-1{flex:1 !important}` … `.col-5{flex:5 !important}`
      퍼블은 flex 비율 유틸로 쓰는데 Bootstrap의 max-width(8.33%)·좌우 패딩이 그대로 남아
      카드/컬럼이 가로로 찌그러졌다. 퍼블 영역(.mz-main)에서만 Bootstrap 제약을 해제한다.
      (관리자 등 레거시 화면의 Bootstrap 그리드는 그대로 둔다)
   -------------------------------------------------------------------------- */
.mz-main .col-1,
.mz-main .col-2,
.mz-main .col-3,
.mz-main .col-4,
.mz-main .col-5 {
    max-width: none;
    width: auto;
}
/* Bootstrap 그리드가 얹는 좌우 15px 패딩 제거.
   단, 퍼블 자체 패딩 유틸(pa- 또는 px- 계열)을 쓴 요소는 그 값을 살려야 하므로 제외한다.
   (제외하지 않으면 카드 안쪽 여백 pa-30 이 0으로 죽는다) */
.mz-main .col-1:not([class*="pa-"]):not([class*="px-"]),
.mz-main .col-2:not([class*="pa-"]):not([class*="px-"]),
.mz-main .col-3:not([class*="pa-"]):not([class*="px-"]),
.mz-main .col-4:not([class*="pa-"]):not([class*="px-"]),
.mz-main .col-5:not([class*="pa-"]):not([class*="px-"]) {
    padding-left: 0;
    padding-right: 0;
}

/* -----------------------------------------------------------------------------
   I. 좌측 LNB 우측 구분선 제거
      퍼블 common.css의 `.lnb-wrap{border-right:1px solid #E0E0E2}`가 본문 높이만큼
      길게 그어져 보이는 회색 세로선. 요청에 따라 표시하지 않는다.
   -------------------------------------------------------------------------- */
.mz-main > .container.sub-main > .lnb-wrap,
body.user .user-content > .lnb-wrap {
    border-right: 0 !important; /* 퍼블 260904 common.css `.mz-main .lnb-wrap{border-right:… !important}` 를 이기기 위해 !important */
}

/* -----------------------------------------------------------------------------
   J. 샘플코드 블록 가독성
      레거시 main.css `.code-wrap{background:#555565}`(진회색)에
      퍼블 `.api-code-wrap pre{color:#171719}`(검정)가 겹쳐 대비가 거의 없었다.
      코드 블록에 어울리는 다크 테마 + 고정폭 글꼴로 통일한다.
   -------------------------------------------------------------------------- */
.mz-main .code-wrap {
    background-color: #1E1E1E;   /* VS Code Dark+ editor.background */
    border-radius: 8px;
    padding: 16px 18px;
    overflow-x: auto;
}
.mz-main .code-wrap pre,
.mz-main .api-code-wrap .code-wrap pre {
    margin: 0;
    color: #D4D4D4;              /* VS Code Dark+ 기본 텍스트 */
    font-family: "D2Coding", "Consolas", "Menlo", "Monaco", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.75;
    white-space: pre;
    tab-size: 4;
}
/* 코드 내 강조(<em>) — 값·엔드포인트 하이라이트 */
.mz-main .code-wrap pre em {
    color: #CE9178;              /* VS Code Dark+ 문자열 색 — 값/엔드포인트 강조 */
    font-style: normal;
    font-weight: 500;
}
.mz-main .code-wrap pre a,
.mz-main .code-wrap pre a em {
    color: #4FC1FF;              /* VS Code Dark+ 링크 색 */
}
/* 코드 블록을 감싸는 카드 — 다크 블록과 겹쳐 답답해 보이지 않도록 여백만 유지 */
.mz-main .api-code-wrap {
    background-color: #F7F7F8;
}
/* 퍼블 260904 common.css `.mz-main .api-code-wrap{background:#1e1e1e}`(동일 특이도·후순위 로드) 대응 —
   설명 문단(p)이나 .code-wrap 을 품은 '복합' 블록은 밝은 카드로 되돌린다(링크 #222 가 다크 위에서 안 보이고
   code-wrap 다크 경계가 사라지던 문제). (0,4,0)으로 로드 순서와 무관하게 이긴다. :has() 는 중첩 없이 단일 단계로 작성 */
.mz-main .api-code-wrap:has(> .api-code p),
.mz-main .api-code-wrap:has(> .api-code .code-wrap) {
    background-color: #F7F7F8;
}
.mz-main .api-code-wrap:has(> .api-code p) > .api-code,
.mz-main .api-code-wrap:has(> .api-code .code-wrap) > .api-code {
    color: #171719;
}

/* MCP처럼 pre 자체가 .api-code인 경우도 동일 다크 테마 적용 */
.mz-main pre.api-code {
    background-color: #1E1E1E;   /* VS Code Dark+ editor.background */
    border-radius: 8px;
    padding: 16px 18px;
    overflow-x: auto;
    margin: 0;
    color: #D4D4D4;              /* VS Code Dark+ 기본 텍스트 */
    font-family: "D2Coding", "Consolas", "Menlo", "Monaco", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.75;
    white-space: pre;
}
.mz-main pre.api-code em { color: #CE9178; font-style: normal; }
/* 복사 버튼이 다크 블록 위에 겹칠 때 잘 보이도록 우상단 고정 유지 */

/* -----------------------------------------------------------------------------
   K. 퍼블 버튼 hover 색 정리
      레거시 main.css의 `.btn-meritz-new-account:hover{background:#877aef!important}`(보라),
      `.btn-meritz-go:hover{background:#e2dffe}`(연보라)가 퍼블 버튼(btn-red/black-common)의
      hover에 그대로 적용되어 빨간/검정 버튼이 호버 시 보라로 바뀌었다.
      퍼블 버튼은 각자 기본색의 명도만 살짝 바꾼 hover로 통일한다.
   -------------------------------------------------------------------------- */
.mz-main .btn-red-common,
.mz-main .btn-red-common.btn-meritz-new-account,
.mz-main .btn-red-common.btn-meritz-go {
    background-color: #E52222 !important;
    border: 0 !important;
    color: #fff !important;
}
.mz-main .btn-red-common:hover,
.mz-main .btn-red-common.btn-meritz-new-account:hover,
.mz-main .btn-red-common.btn-meritz-go:hover {
    background-color: #C41C1C !important;   /* 기본색보다 한 단계 어두운 빨강 */
    border: 0 !important;
    color: #fff !important;
}

.mz-main .btn-black-common,
.mz-main .btn-black-common.btn-meritz-new-account,
.mz-main .btn-black-common.btn-meritz-go {
    background-color: #171719 !important;
    border: 0 !important;
    color: #fff !important;
}
.mz-main .btn-black-common:hover,
.mz-main .btn-black-common.btn-meritz-new-account:hover,
.mz-main .btn-black-common.btn-meritz-go:hover {
    background-color: #34343A !important;   /* 기본색보다 살짝 밝은 검정 */
    border: 0 !important;
    color: #fff !important;
}

/* -----------------------------------------------------------------------------
   L. VS Code Dark+ 구문 하이라이팅 토큰 (js/py-highlight.js 가 부여)
   -------------------------------------------------------------------------- */
.mz-main .code-wrap pre .tok-com   { color: #6A9955; }  /* 주석 */
.mz-main .code-wrap pre .tok-str   { color: #CE9178; }  /* 문자열 */
.mz-main .code-wrap pre .tok-kw    { color: #C586C0; }  /* 제어 키워드 if/for/return… */
.mz-main .code-wrap pre .tok-kw2   { color: #569CD6; }  /* 선언 키워드 def/class/import… */
.mz-main .code-wrap pre .tok-const { color: #569CD6; }  /* True/False/None/self */
.mz-main .code-wrap pre .tok-num   { color: #B5CEA8; }  /* 숫자 */
.mz-main .code-wrap pre .tok-fn    { color: #DCDCAA; }  /* 함수 호출명 */

/* 공통부 코드처럼 pre 없이 div.api-code + <br> 로만 구성된 '순수 코드' 블록도 동일 다크 테마.
   (설명 문단·code-wrap 을 품은 복합 api-code 는 제외 — 코드가 아닌 본문까지 어두워지는 것 방지) */
.mz-main .api-code-wrap > .api-code:not(:has(.code-wrap)):not(:has(p)) {
    background-color: #1E1E1E;
    border-radius: 8px;
    padding: 16px 18px;
    overflow-x: auto;
    color: #D4D4D4;
    font-family: "D2Coding", "Consolas", "Menlo", "Monaco", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.75;
}
.mz-main .api-code-wrap > .api-code:not(:has(.code-wrap)):not(:has(p)) em {
    color: #CE9178;
    font-style: normal;
}
.mz-main .api-code-wrap > .api-code:not(:has(.code-wrap)):not(:has(p)) a,
.mz-main .api-code-wrap > .api-code:not(:has(.code-wrap)):not(:has(p)) a em {
    color: #4FC1FF;
}
/* 토큰 색 (py-highlight.js) — pre 블록과 동일 */
.mz-main .api-code .tok-com   { color: #6A9955; }
.mz-main .api-code .tok-str   { color: #CE9178; }
.mz-main .api-code .tok-kw    { color: #C586C0; }
.mz-main .api-code .tok-kw2   { color: #569CD6; }
.mz-main .api-code .tok-const { color: #569CD6; }
.mz-main .api-code .tok-num   { color: #B5CEA8; }
.mz-main .api-code .tok-fn    { color: #DCDCAA; }

/* div.api-code(<br> 줄바꿈 방식)의 white-space:pre 해제 — 마크업 개행/들여쓰기가
   그대로 렌더되어 생기던 위아래 빈 줄·이중 줄간격 제거. (pre 요소는 개행 보존이 필요해 유지) */
.mz-main .api-code-wrap div.api-code {
    white-space: normal;
}

/* 순수 코드(div.api-code 다크 블록)를 감싸는 api-code-wrap 의 중복 프레임 제거 —
   container(8px) + wrap(12px) + 다크 블록(16px) 3중 여백으로 1~2줄 코드가 과하게 부풀던 문제.
   다크 블록이 자체 패딩·배경을 가지므로 wrap 은 투명·무패딩으로 둔다. */
/* ※ :has() 안에 :has() 를 중첩하면 규칙 전체가 무효(Chrome) — 순수 코드 블록 판정은 wrap 기준 단일 :has 로 작성
   (wrap 안에 .code-wrap 도 p 도 없으면 순수 코드) */
.mz-main .api-code-wrap:has(> div.api-code):not(:has(.code-wrap)):not(:has(p)) {
    background-color: transparent;
    padding: 0;
}
/* 다크 블록 위 복사 버튼 위치 보정 (wrap 패딩 제거 후에도 우상단 안쪽 유지) */
.mz-main .api-code-wrap:has(> div.api-code):not(:has(.code-wrap)):not(:has(p)) .btn-copy-red {
    right: 10px;
    top: 10px;
}
/* 다크 블록 자체 상하 패딩도 소폭 축소 — 짧은 코드에서 컴팩트하게 */
.mz-main .api-code-wrap > .api-code:not(:has(.code-wrap)):not(:has(p)) {
    padding: 12px 16px;
}

/* -----------------------------------------------------------------------------
   M. 퍼블 LNB → Q&A(레거시 셸) 사이드바 스타일 통일
      Q&A 등 레거시 셸의 LNB는 fintech-theme.css가 .sub-title/.second-depth 를
      카드형으로 꾸미는데, 퍼블 마크업은 클래스명이 달라(.second-depth-tit/
      .second-depth-menu) 항목 스타일이 적용되지 않았다. 같은 값으로 매핑한다.
      (카드 프레임 자체는 fintech-theme의 `.lnb-wrap nav.lnb` 규칙이 이미 적용됨)
      대상: about-openapi / howto-use / samplecode-py / samplecode-trading /
            mcp / stock-info
   -------------------------------------------------------------------------- */
/* 그룹 타이틀 — fintech-theme `.lnb-wrap .sub-title` 과 동일.
   ※ 퍼블 260904 common.css 가 같은 셀렉터(.mz-main .lnb-wrap …)를 본문에서 후순위 로드하므로 !important 로 고정
     (카드형 LNB 유지 결정 — 레거시 셸 /apiservice·Q&A 와 통일) */
.mz-main .lnb-wrap .second-depth-tit {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #101828 !important;
    letter-spacing: -.01em !important;
    padding: 6px 12px 14px !important;
    margin: 0 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #e4e7ec !important;
    line-height: 1.4 !important;
}

/* 메뉴 항목 — fintech-theme `.lnb-wrap .second-depth li a` 와 동일 */
.mz-main .lnb-wrap .second-depth-menu > li {
    margin: 3px 0;
}
.mz-main .lnb-wrap .second-depth-menu > li > a {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #475467 !important;
    line-height: 1.5 !important;
    background: transparent !important;
}
.mz-main .lnb-wrap .second-depth-menu > li > a:hover {
    background: #f9fafb !important;
    color: #101828 !important;
}
/* 활성 항목 — fintech-theme `.lnb-wrap a.submenu-active` 와 동일.
   hover 규칙보다 뒤에 두어(동일 특이도) 활성 항목은 hover 시에도 붉은 표시 유지 */
.mz-main .lnb-wrap .second-depth-menu > li.active > a {
    background: #fef3f2 !important;
    color: #e2231a !important;
    font-weight: 800 !important;
}

/* -----------------------------------------------------------------------------
   N. 퍼블 게시판 테이블 폭 보정
      contents.css의 .board01에 width 선언이 없어 행 내용이 짧으면 테이블이
      내용 폭으로 수축하고 colgroup의 나머지(*) 컬럼도 늘어나지 않는다.
      래퍼를 항상 가득 채우도록 고정한다. (공지사항/FAQ/Q&A 목록)
      table02(문의작성 폼)도 동일하게 width가 없어 함께 보정한다.
   -------------------------------------------------------------------------- */
.mz-main .board-wrap01 .board01,
.mz-main .table02 {
    width: 100%;
}
/* 게시판 정렬/줄바꿈 정책 —
   ① 전 컬럼(헤더 포함) 좌측 정렬
   ② 제목(.txt-left) 외 컬럼(번호·작성자·답변상태·작성일·비고)은 줄바꿈 없이 한 줄
   ③ 빈 목록 안내 행(colspan)은 가운데 정렬 유지 */
.mz-main .board01 th,
.mz-main .board01 td {
    text-align: left;
}
.mz-main .board01 td:not(.txt-left) {
    white-space: nowrap;
}
.mz-main .board01 td[colspan] {
    text-align: center;
    white-space: normal;
}

/* -----------------------------------------------------------------------------
   O. 퍼블 container02 (960px 중앙 셸 — Open API 관리 등)
      마크업이 .container02.col-1 이라 H의 `.mz-main .col-1{width:auto}`(Bootstrap
      충돌 해제)가 퍼블 고정폭(960px)까지 풀어버린다 — column flex(.mz-main) 안에서
      auto 폭 + 좌우 auto 마진은 fit-content로 수축하므로 폭을 되살린다.
      (H보다 뒤에 두어 동일 특이도에서 이 규칙이 이긴다)
   -------------------------------------------------------------------------- */
.mz-main > .container02 {
    width: 960px;
    max-width: 100%;
}

/* -----------------------------------------------------------------------------
   R. 폰트 폴백 시 버튼/탭 줄바꿈 방지
      Pretendard 로드 실패·지연 시 폴백 글꼴(맑은 고딕 등)은 글자 폭이 더 넓어
      고정 폭 버튼 라벨이 두 줄로 꺾일 수 있다 — 한 줄로 고정한다.
      (.oa-btn과 퍼블 btn-*-common 계열은 자체 nowrap 보유 — 누락분만 보강)
   -------------------------------------------------------------------------- */
.mz-btn,
.qr-btn-red,
.qr-btn-white,
.qr-modal-tab {
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Q. 인트로 섹션 좌측 정렬 통일 (/intro)
      .mz-main(column flex) 안에서 .mz-section의 `margin:0 auto`가 stretch 정렬을
      무효화해 각 섹션이 '내용 폭'으로 수축 — 메리츠증권/API SERVICE/고객지원의
      좌측 시작점이 제각각이 되던 문제. 폭을 채우고 max-width로 상한을 걸어
      히어로(1200px 중앙)와 같은 좌측 기준선에 정렬한다.
   -------------------------------------------------------------------------- */
.mz-main > .mz-section {
    width: 100%;
    max-width: 1200px;
}

/* -----------------------------------------------------------------------------
   P. 퍼블 폼 요소(select01/input01) 스타일 복원
      레거시 reset.css의 `input,select{height:inherit!important; letter-spacing:-.6px;
      font-size:14px; ...}` 가 퍼블 셀렉트/인풋의 높이(42px)·타이포를 죽이고,
      fintech-theme.css의 `select{border:...!important}` 가 테두리·포커스 링을 덮어
      퍼블리시 결과물과 다르게 보였다. !important + 상위 특이도로 퍼블 값을 되살린다.
      (대상: Open API 관리 계좌 선택, Q&A 검색/필터, 문의작성 입력 등 .mz-main 안 전부)
   -------------------------------------------------------------------------- */
.mz-main .select01 select {
    height: 42px !important;
    padding: 0 30px 0 8px !important;
    border: 1px solid #E0E0E2 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 1rem !important;
    letter-spacing: normal !important;
    color: #171719 !important;
    box-shadow: none !important;
}
.mz-main .select01 select:focus {
    border-color: #E85E65 !important;
    box-shadow: none !important;
    outline: none !important;
}
.mz-main .input01 input {
    height: 42px !important;
    padding: 8px 12px !important;
    border: 1px solid #E0E0E2 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 1rem !important;
    letter-spacing: normal !important;
    color: #222 !important;
    box-shadow: none !important;
}
.mz-main .input01 input:focus {
    border-color: #E85E65 !important;
    box-shadow: none !important;
    outline: none !important;
}
.mz-main .input01 input:disabled {
    color: #C7C7C8 !important;
    background-color: #f6f7f8 !important;
}
.mz-main .input01 textarea {
    border: 1px solid #E0E0E2 !important;
    border-radius: 8px !important;
    background: #fff !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}
.mz-main .input01 textarea:focus {
    border-color: #222 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ===== S) 퍼블 페이지(layout/user + mz-main) 본문 타이포 보정 =====
   레거시 css/common.css `.content-wrap .contents h4{24px/800}` · `.content-wrap .contents{margin-top:30px}` 가
   퍼블 .title-h5/.title-h4(16/18px, 700)를 덮어 카드 제목이 커지고 본문이 30px 밀리던 문제 (mcp·testbed-lab 공통).
   select 라벨은 bootstrap label{margin-bottom:.5rem}·레거시 label{margin-right:10px} 제거로 퍼블 정렬 복원 */
body.user .user-content .mz-main .contents { margin-top: 0; }
body.user .user-content .mz-main .contents h4.title-h5 { font-size: 1rem; font-weight: 700; margin-bottom: 0; }
body.user .user-content .mz-main .contents h4.title-h4 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0; }
.mz-main .select-wrap > label { margin: 0; }

/* ===== T) API 가이드(/apiservice·/apiguide) 헤더 아래 타이틀 행을 퍼블 셸(/mcp)과 통일 =====
   레거시 main.css .page-title{height:70px}+::after 회색 밑줄, h2 float/padding, breadscrumb float 를 해제해
   /mcp의 .page-title(flex, 밑줄 없음)과 같은 모양으로. 글자 크기/굵기/색은 fintech-theme !important가
   양쪽을 이미 동일하게 맞추므로 건드리지 않는다 */
body.user .user-content .apiguide-wrap .page-title { position: static; height: auto; display: flex; justify-content: space-between; align-items: flex-end; }
body.user .user-content .apiguide-wrap .page-title::after { content: none; }
body.user .user-content .apiguide-wrap .page-title h2 { float: none; line-height: 1.3; padding-left: 0; }
/* 제목 타이포 — 퍼블 260904 common.css `.mz-main .title-h2{32px/700 !important}` 로 퍼블 페이지 제목이 커져
   fintech-theme .page-title h2(28px/800 !important) 기준의 API 가이드와 갈라짐 → 퍼블 값으로 통일 */
body.user .user-content .apiguide-wrap .page-title h2 { font-size: 2rem !important; font-weight: 700 !important; color: #171719 !important; }
body.user .user-content .apiguide-wrap .page-title .breadscrumb { float: none; padding-top: 0; }

/* ===== U) 헤더 높이 통일 — 퍼블 260904 common.css `header{border:0;height:auto}` 를 전 페이지에 동일 적용 =====
   레거시 main.css header{height:80px;border-bottom:1px solid #dadada} 로 퍼블 CSS 미로드 페이지(/apiservice 등)만
   헤더가 16px 높고 밑선이 남아 퍼블 페이지와 어긋나던 차이 제거 (헤더 실높이는 .oa-header-inner 64px) */
header { border: 0; height: auto; }

/* ===== V) API 가이드(/apiservice)에 퍼블 CSS(assets/css/common·contents·openapi) 로드 보정 =====
   퍼블 CSS 는 본문(contentFragment)에서 이 파일보다 뒤에 로드되므로 같은 특이도면 퍼블이 이긴다.
   레거시 셸(body.user .user-content > .lnb-wrap + .content-wrap)에서 실제로 부딪히는 규칙만 되돌린다.
   · openapi.css `#content{padding:0}` (1,0,0) 이 A 섹션의 상단 40px·좌우 여백을 지움 → id 포함 특이도(1,3,1)로 복원.
     같은 특이도가 D 섹션(≤1080px 좌우 20px, (0,3,1))도 덮으므로 미디어쿼리 안에서 id 특이도로 재선언(아래 V-1)
   · common.css `.mt-5{5px !important}` 가 bootstrap .mt-5(3rem) 를 쓰는 #apiList(API 목록) 간격을 붕괴
   · common.css `.mt-2{2px !important}` 가 LNB 검색 결과 없음 안내(apiservice-subMenu.html 이 본문 .title-depth02 에 주입,
     bootstrap .mt-2 .5rem) 간격을 붕괴
   · 표(.table01): 퍼블 th 배경/글자색/38px 는 적용되지만 레거시 main.css `.table-wrap .table-apiguide th/td{13px !important}`(0,2,1),
     `.table-wrap .table-type-*>tbody>tr>td{padding:4px 5px}`·`thead tr th{text-align:center}`(0,2,3) 가 퍼블 `.table01 th/td`(0,1,1) 보다
     특이도가 높아 글자/여백/정렬은 레거시로 남고, bootstrap `.table th/td{vertical-align:top}`·`thead th{bottom}` 이 38px 셀에서
     머리글은 아래·본문은 위로 갈리며, main.css `thead th:not(:last-child):after` 세로 의사선이 퍼블 border-left 와 겹쳐 이중선이 됨
     → 퍼블 표 규격(14px / 8px 16px / 좌측 정렬 / 중앙 수직정렬 / 1px #E8E9EA 구분선)으로 통일 */
body.user #content.user-content:has(> .lnb-wrap) {
    padding-top: 40px;
    padding-left: var(--portal-gutter);
    padding-right: var(--portal-gutter);
}
body.user .user-content .apiguide-wrap .apiguide-list.mt-5 { margin-top: 3rem !important; }
body.user .user-content .apiguide-wrap .title-depth02 .mt-2 { margin-top: .5rem !important; }
body.user .user-content .apiguide-wrap .table01 th,
body.user .user-content .apiguide-wrap .table01 td {
    font-size: .875rem !important;   /* main.css .table-wrap .table-apiguide th/td{.8125rem !important}(0,2,1) 보다 높은 특이도 */
    padding: 8px 16px;               /* main.css .table-wrap .table-type-*>tbody>tr>td{4px 5px}(0,2,3) */
    text-align: left;                /* main.css thead th{center}(0,2,3) 및 td align="center" 속성 — 퍼블 표는 전부 좌측 정렬 */
    vertical-align: middle;          /* bootstrap .table th/td{top}·.table thead th{bottom} */
}
body.user .user-content .apiguide-wrap .table01 thead th { border-bottom: 1px solid #E8E9EA; }
body.user .user-content .apiguide-wrap .table01 thead th::after { content: none; } /* main.css 세로 의사선 제거 — 퍼블 border-left 만 남김 */

/* #apiList(TR 목록) 머리글 표 — 아래 행은 <td>가 아닌 .cardApi-header(main.css: 이름 좌측·코드/TPS/버튼 중앙 정렬 table-cell)이고
   퍼블 원안(apiservice/oauthauthentication.html table01.txt-center)도 중앙 정렬이므로, 첫 열(TR명) 외 머리글은 V 의 좌측 정렬에서 제외.
   #apiList > .table-wrap .table01 은 apiservice.html 에만 있어 다른 페이지 영향 없음 */
body.user .user-content .apiguide-wrap #apiList > .table-wrap .table01 thead th:not(:first-child) { text-align: center; }
body.user .user-content .apiguide-wrap #apiList:has(> .table-wrap .table01) .cardApi-header .apiName { padding-left: 16px; } /* 머리글 TR명(16px)과 이름 들여쓰기 일치 */

/* V-1) ≤1080px — D 섹션의 좌우 20px 을 V 와 같은 id 특이도(1,3,1)로 재선언 (V 뒤에 있어야 소스 순서로 이김.
   /apiservice 는 openapi.css #content{padding:0}(1,0,0) 도 이겨야 하므로 id 유지) */
@media (max-width: 1080px) {
    body.user #content.user-content:has(> .lnb-wrap) {
        padding-left: 20px;
        padding-right: 20px;
    }
}