@charset "utf-8";

#content {
    padding: 0;
}

/* ===== 메인(/intro) 모던 핀테크 리뉴얼 — 애니메이션 미사용 ===== */
.mz-main {
    font-family: inherit;
    color: #101828;
    overflow: auto;
}

.mz-section {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 80px 0;
}
@media (max-width: 900px) {
    .mz-section {
        padding: 40px 20px;
    }
}

.mz-eyebrow {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02%;
    color: #FF4242;
}
.mz-eyebrow > span {
    color: #c7c7c8;
}

.mz-h {
    font-size: 40px;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin: 8px 0 0;
    line-height: 1.4;
}

.mz-desc {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 400;
    color: #47484B;
    margin: 12px 0 0;
    letter-spacing: 0.2px;
    line-height: 1.4;
}

/* ---- 히어로 (풀블리드 그라데이션) ---- */
.mz-hero-bleed {
    background: url('../img/img-bg-main-dark.jpg') no-repeat center;
    background-size: cover;
}

.mz-hero {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* 모바일: 버튼 아래에 여백을 둬 배경 이미지(타일 그림)가 보이게 한다 */
@media (max-width: 900px) {
    .mz-hero {
        padding: 40px 20px 120px;
    }
}

.mz-hero-copy {
    padding: 80px 0;
}
@media (max-width: 900px) {
    .mz-hero-copy {
        padding: 0;
    }
}

.mz-hero-copy h2 {
    font-size: 60px;
    font-size: 3.75rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1.3;
    margin: 8px 0 0;
    color: #f7f7f8;
}

.mz-hero-copy p.lead {
    font-size: 20px;
    font-size: 1.25rem;
    color: #c7c7c8;
    line-height: 1.4;
    margin: 16px 0 0;
}

.mz-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
}
.mz-hero-bleed .mz-btn-line {
    background: transparent;
    color: #c7c7c8 !important;
    border-color: #c7c7c8;
}
.mz-hero-bleed .mz-btn-line:hover {
    background: transparent;
    color: #c7c7c8 !important;
    border-color: #c7c7c8;
}

.mz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 32px;
    border-radius: 8px;
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: 0.2s;
}
.mz-btn-sm {
    padding: 8px 24px;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
}
.mz-btn-red {
    background: #E52222;
    color: #fff !important;
}

.mz-btn-line {
    background: #fff;
    color: #171719 !important;
    border-color: #E0E0E2;
}

.mz-btn-line:hover {
    border-color: #FE7171;
}

/* ---- 카드 공통 ---- */
.mz-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}

@media (max-width: 900px) {
    .mz-cards {
        grid-template-columns: 1fr;
    }
}

.mz-card {
    background: #fff;
    border: 1px solid #E0E0E2;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
    cursor: pointer;
}

.mz-card:hover {
    border-color: #FE7171;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
}

.mz-card .tit {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.4;
    color: #000;
}

.mz-card .txt {
    font-size: 16px;
    font-size: 1rem;
    color: #666;
    margin: 6px 0 0;
    line-height: 1.5;
}

.mz-ico {
    width: 100px;
    height: 100px;
}
.mz-ico-md {
    width: 120px;
    height: 120px;
}
/* 카드 아이콘 이미지는 칸(120x120)에 맞춘다. 국내주식 아이콘(120x120)은 그대로이고,
   원본이 368x368 인 MCP 카드 이미지도 같은 크기로 줄어든다 */
.mz-ico-md img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- API 서비스 섹션 ----
   소개 글을 위에, 국내주식/해외주식/계좌 카드를 그 아래 한 줄에 둔다.
   '자세히 보기'는 제목과 같은 줄 오른쪽 끝에 고객지원의 '더보기'와 같은 밑줄 링크로 표시한다 */
.mz-svc {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.mz-svc .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
}

.mz-svc .head .mz-h {
    margin: 0;
}

.mz-svc .head .more {
    flex: none;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.2px;
    color: #47484B;
    text-decoration: underline;
    cursor: pointer;
}

/* API 명세서 다운로드. 소개 글 아래 연한 빨강 둥근 사각형 안에 왼쪽 제목, 오른쪽 버튼 두 개 */
.mz-spec-dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: 24px;
    padding: 24px 32px;
    background: #FFF3F3;
    border-radius: 16px;
}

/* 인트로 화면의 다운로드 상자에만 아래 카드(.mz-svc-card)와 같은 얇은 테두리. API 가이드 사이드바 카드(.is-lnb)는 .mz-svc 밖이라 적용되지 않는다 */
.mz-svc .mz-spec-dl {
    border: 1px solid #E0E0E2;
}

.mz-spec-dl .tit {
    margin: 0;
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: #171719;
}

.mz-spec-dl .sub {
    margin: 4px 0 0;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #858688;
}

.mz-spec-dl .btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mz-spec-dl .mz-btn {
    gap: 6px;
    white-space: nowrap;
}

/* 다운로드 아이콘 (assets/img/ico-download-bk.png, 원본 24x24 검정 정사각형).
   가로세로를 같은 값으로 고정하고 flex 안에서 줄거나 늘지 않게 해 찌그러지지 않게 한다 */
.mz-spec-dl .ico {
    flex: none;
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* 빨간 'JSON 다운로드' 위에서는 흰색 (검은 이미지를 필터로 흰색 처리) */
.mz-spec-dl .mz-btn-red .ico {
    filter: brightness(0) invert(1);
}

/* '엑셀 다운로드'(흰 버튼): 테두리와 다운로드 아이콘을 빨강으로 (글자는 검정 유지). 인트로와 API 가이드 사이드바 카드 공통 */
.mz-spec-dl .mz-btn-line {
    border-color: #E52222;
}

.mz-spec-dl .mz-btn-line .ico {
    /* 검은 이미지를 #E52222 로 (계산한 필터 조합. 결과 rgb(229, 34, 30)) */
    filter: brightness(0) saturate(100%) invert(28%) sepia(55%) saturate(5712%) hue-rotate(347deg) brightness(88%) contrast(105%);
}

/* 인트로 MCP 영역 '모바일 AI 앱' 안내. API 명세서 다운로드 상자(.mz-spec-dl)와 같은 상자(분홍 바탕, 얇은 테두리, 둥근 모서리)를
   MCP 카드 두 개 아래에 두 칸을 가로질러 놓는다. 오른쪽 그림(노트북, 휴대폰 채팅)은 장식이고 768px 이상에서만 보이며, 글은 그림 자리를 비워 둔다 */
.mz-support .mz-mobile-ai {
    grid-column: 1 / -1;
    margin-top: 0;
}

.mz-mobile-ai {
    position: relative;
    min-height: 156px;
    overflow: hidden;
}

.mz-mobile-ai .txt {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.mz-mobile-ai .eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #E52222;
}

.mz-mobile-ai .tit {
    margin-top: 6px;
}

.mz-mobile-ai .tit em {
    font-style: normal;
    color: #E52222;
}

.mz-mobile-ai .note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #858688;
}

.mz-mobile-ai .note svg {
    flex: none;
    margin-top: 3px;
}

.mz-mobile-ai .art {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 32px;
    width: 260px;
    pointer-events: none;
}

@media (min-width: 768px) {
    .mz-mobile-ai .txt {
        max-width: calc(100% - 300px);
    }
    .mz-mobile-ai .art {
        display: block;
    }
}

@media (max-width: 900px) {
    .mz-mobile-ai {
        padding: 24px 20px;
    }
}

.mz-mobile-ai .art-laptop {
    position: absolute;
    bottom: 28px;
    left: 0;
    opacity: 0.4;
}

.mz-mobile-ai .art-badge {
    position: absolute;
    bottom: 12px;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid #ECECEC;
    border-radius: 999px;
    background: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    color: #666;
}

.mz-mobile-ai .art-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #12A150;
}

.mz-mobile-ai .art-link {
    position: absolute;
    bottom: 58px;
    left: 72px;
    width: 80px;
    height: 50px;
}

.mz-mobile-ai .art-phone {
    position: absolute;
    top: 24px;
    right: 16px;
    width: 118px;
    height: 230px;
    padding: 5px;
    border-radius: 22px;
    background: #101010;
    box-shadow: 0 6px 16px rgba(16, 16, 16, 0.08);
    box-sizing: border-box;
}

.mz-mobile-ai .art-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
    background: #FAFAFA;
}

.mz-mobile-ai .art-head {
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid #EEEEEE;
    text-align: center;
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0;
    color: #8A8A8A;
}

.mz-mobile-ai .art-chat {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 10px 8px 0;
}

.mz-mobile-ai .art-ask {
    align-self: flex-end;
    padding: 4px 8px;
    border-radius: 8px 8px 2px 8px;
    background: #EBEBEE;
    font-size: 7px;
    font-weight: 500;
    letter-spacing: 0;
    color: #101010;
}

.mz-mobile-ai .art-tool {
    margin: 0;
    font-size: 5.5px;
    font-weight: 600;
    letter-spacing: 0;
    color: #9A9A9A;
}

.mz-mobile-ai .art-quote {
    padding: 8px;
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    background: #fff;
}

.mz-mobile-ai .art-quote-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mz-mobile-ai .art-name {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0;
    color: #101010;
}

.mz-mobile-ai .art-code {
    font-size: 5.5px;
    letter-spacing: 0;
    color: #9A9A9A;
}

.mz-mobile-ai .art-price {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    color: #101010;
}

.mz-mobile-ai .art-price small {
    font-size: 7px;
}

.mz-mobile-ai .art-diff {
    margin: 2px 0 0;
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0;
    color: #E52222;
}

.mz-mobile-ai .art-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px;
    padding: 4px 8px;
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    background: #fff;
    font-size: 6.5px;
    letter-spacing: 0;
    color: #B5B5B5;
}

.mz-mobile-ai .art-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #E52222;
    font-size: 7px;
    color: #fff;
}

/* API 가이드(/apiservice) 왼쪽 메뉴의 페이지 이동 항목 'API 문서', '종목정보'.
   /stock-info 사이드바 항목(portal-layout.css M 절)과 같은 값이고, 현재 페이지(is-active)는 빨간 굵은 글씨에 분홍 배경이다.
   전용 클래스에만 걸어 메뉴의 다른 항목(그룹, API 목록)에는 영향이 없다 */
.lnb-wrap .lnb-page-item {
    margin: 3px 0;
}

.lnb-wrap .lnb-page-link {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #475467;
    text-decoration: none;
    background: transparent;
}

.lnb-wrap .lnb-page-link:hover,
.lnb-wrap .lnb-page-link:focus {
    background: #f9fafb;
    color: #101828;
}

.lnb-wrap .lnb-page-link.is-active,
.lnb-wrap .lnb-page-link.is-active:hover,
.lnb-wrap .lnb-page-link.is-active:focus {
    background: #fef3f2;
    color: #e2231a;
    font-weight: 800;
}

/* MCP(/mcp) 사이드바 'MCP 시작하기' 아래 소메뉴 (Coding Assistant MCP, Trading MCP).
   지금 보이는 탭은 글자만 빨갛게 하고(배경 없음), 오른쪽 끝에 breadcrumb 과 같은 > 표시를 둔다 */
.mz-main .lnb-wrap .mcp-sub-menu {
    margin: 2px 0 4px;
}

.mz-main .lnb-wrap .mcp-sub-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 8px 4px 8px 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #667085;
    text-decoration: none;
    background: transparent;
}

.mz-main .lnb-wrap .mcp-sub-menu > li > a::after {
    content: '';
    flex: none;
    width: 20px;
    height: 20px;
    background: url('../img/ico-arr-right-gr.png') no-repeat center;
}

.mz-main .lnb-wrap .mcp-sub-menu > li > a:hover {
    color: #101828;
}

.mz-main .lnb-wrap .mcp-sub-menu > li.active > a {
    color: #e2231a;
}

/* API 가이드(/apiservice) 왼쪽 메뉴 카드(#lnb) 안, 종목정보 아래의 다운로드 영역.
   위에 구분선(메뉴 제목 밑줄과 같은 색)을 두고 흰 바탕으로 제목, 부제, 버튼 줄을 위아래로 쌓는다.
   제목과 부제는 메뉴 글자와 같은 12px 들여쓰기, 버튼 두 개는 메뉴 폭을 반씩 나눠 쓴다 */
.mz-spec-dl.is-lnb {
    display: block;
    margin-top: 12px;
    padding: 16px 0 0;
    border-top: 1px solid #e4e7ec;
    border-radius: 0;
    background: #fff;
}

.mz-spec-dl.is-lnb .tit,
.mz-spec-dl.is-lnb .sub {
    padding: 0 12px;
}

.mz-spec-dl.is-lnb .tit {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
}

.mz-spec-dl.is-lnb .sub {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    word-break: keep-all;
}

.mz-spec-dl.is-lnb .btns {
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 14px;
}

.mz-spec-dl.is-lnb .btns .mz-btn {
    flex: 1 1 0;
    min-width: 0;
    gap: 4px;
    padding: 8px 4px;
    font-size: 13px;
    line-height: 1.5;
}

/* 사이드바(API 가이드, 종목정보)의 '엑셀 다운로드' 글자도 빨강. .mz-btn-line 의 글자색이 !important 라 같이 !important 로 덮는다 (인트로 버튼은 검정 유지) */
.mz-spec-dl.is-lnb .mz-btn-line {
    color: #E52222 !important;
}

.mz-spec-dl.is-lnb .ico {
    width: 16px;
    height: 16px;
}

/* 종목정보(/stock-info) 전체 종목정보 일괄 다운로드. 인트로의 API 명세서 다운로드 상자처럼 연한 빨강 바탕에 얇은 테두리.
   왼쪽 흰 원 안에 빨간 다운로드 아이콘, 가운데 제목과 부제, 오른쪽 끝에 빨간 '일괄 다운로드' 버튼 */
.mz-bulk-dl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 20px;
    padding: 24px 32px;
    background: #FEF3F2;
    border: 1px solid #E0E0E2;
    border-radius: 16px;
}

.mz-bulk-dl .circle {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
}

/* 다운로드 아이콘 (assets/img/ico-download-bk.png, 원본 24x24 검정 정사각형). 가로세로를 같게 고정해 찌그러지지 않게 한다 */
.mz-bulk-dl .ico {
    flex: none;
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* 원 안의 아이콘은 크게, 빨강으로 (엑셀 다운로드 아이콘과 같은 필터. 결과 rgb(229, 34, 30)) */
.mz-bulk-dl .circle .ico {
    width: 28px;
    height: 28px;
    filter: brightness(0) saturate(100%) invert(28%) sepia(55%) saturate(5712%) hue-rotate(347deg) brightness(88%) contrast(105%);
}

.mz-bulk-dl .txt {
    flex: 1 1 240px;
    min-width: 0;
}

.mz-bulk-dl .tit {
    margin: 0;
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: #171719;
}

.mz-bulk-dl .sub {
    margin: 4px 0 0;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #858688;
}

/* 오른쪽 끝 버튼. 좁은 화면에서 줄이 바뀌어도 오른쪽에 붙는다 */
.mz-bulk-dl .mz-btn {
    flex: none;
    margin-left: auto;
    gap: 6px;
    white-space: nowrap;
}

/* 빨간 버튼 위의 아이콘은 흰색 */
.mz-bulk-dl .mz-btn-red .ico {
    filter: brightness(0) invert(1);
}

/* 종목정보 파일이 하나도 없을 때 버튼 대신 보이는 글 */
.mz-bulk-dl .pending {
    flex: none;
    margin-left: auto;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
    color: #858688;
}

.mz-svc .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .mz-svc .grid {
        grid-template-columns: 1fr;
    }
}

.mz-svc-card {
    background: #fff;
    border: 1px solid #E0E0E2;
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: #171719;
    font-weight: 800;
    font-size: 15px;
    min-width: 260px;
    cursor: pointer;
    transition: 0.3s;
}

.mz-svc-card:hover {
    border-color: #FE7171;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
}

/* 인트로 MCP 섹션 카드. API 서비스 카드처럼 소개 글 아래 40px 에 두고(고객지원용 위 여백 32px 은 뺀다),
   아이콘을 위, 글자를 그 아래 가운데에 붙여 놓는다 (.mz-card 의 위아래 벌림은 쓰지 않는다) */
.mz-svc .mz-support {
    margin-top: 0;
}
.mz-svc .mz-svc-card.mz-card {
    justify-content: flex-start;
}

/* 게시글 상세 팝업 제목 자리의 게시판 이름 (공지사항, FAQ). 분홍 배경 알약에 빨간 굵은 글씨.
   색은 사이드바 활성 항목과 같다. 팝업 머리글 h2 의 글자 크기와 색(css/common.css)을 알약 안에서는 따로 정한다 */
.mz-board-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 999px;
    background: #FEF3F2;
    color: #E2231A;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: middle;
}

/* 공지사항, FAQ 게시글 상세 팝업 (community$detail.html, intro$forumDetail.html 의 .mz-post-modal).
   레거시 모달 스타일(css/common.css, main.css, meritz.css, fintech-theme.css 의 !important 규칙)을 이 팝업 안에서만 덮는다.
   여백을 넉넉히 하고, 본문은 회색 둥근 상자, 첨부 파일은 구분선 아래 흰 바탕, 닫기는 검은 버튼, X 는 작게 */
.mz-post-modal .modal-content {
    border-radius: 16px !important;
    overflow: hidden;
}
.mz-post-modal .modal-header {
    padding: 28px 32px 0 !important;
    border-bottom: 0 !important;
}
.mz-post-modal .modal-header h2 {
    margin: 0;
    line-height: 1 !important;
}
.mz-post-modal .modal-header .close {
    width: 16px;
    height: 16px;
    background-size: 16px 16px !important;
    background-position: center !important;
    opacity: .55;
}
.mz-post-modal .modal-header .close:hover {
    opacity: 1;
}
.mz-post-modal .modal-body {
    padding: 16px 32px 0 !important;
}
.mz-post-modal .table-wrap .table-type-view {
    width: 100%;
    border: 0;
}
/* 항목명 칸(마크업 colgroup 의 15%)을 좁혀 첨부 파일 이름이 항목명 가까이 오게 한다 */
.mz-post-modal .table-wrap .table-type-view colgroup col:first-child {
    width: 96px;
}
.mz-post-modal .table-wrap .table-type-view tbody tr th,
.mz-post-modal .table-wrap .table-type-view tbody tr td {
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    vertical-align: middle;
}
/* 제목, 작성일과 조회수 */
.mz-post-modal .table-wrap .table-type-view tbody tr td[name="title"] {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    color: #171719;
    overflow: visible;
}
.mz-post-modal .table-wrap .table-type-view tbody tr td.meta {
    padding-top: 8px !important;
}
.mz-post-modal .table-wrap .table-type-view tbody tr td.meta span {
    font-size: 14px;
    color: #858688;
}
.mz-post-modal .table-wrap .table-type-view tbody tr td.meta span + span {
    margin-left: 12px;
}
.mz-post-modal .table-wrap .table-type-view tbody tr td.meta .view-label + span {
    margin-left: 4px;
}
/* FAQ 'A 답변' 표시: 회색 본문 상자 안 맨 위. 빨간 원 안 흰 굵은 A, 옆에 빨간 굵은 '답변' */
.mz-post-modal .mz-answer-mark {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #E2231A;
}
.mz-post-modal .mz-answer-mark .mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #E2231A;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}
/* 본문: 회색 둥근 상자(.mz-post-content) 안에 'A 답변'(FAQ)과 본문. 길면 본문만 스크롤되고 'A 답변'은 위에 남는다 */
.mz-post-modal .mz-post-content {
    margin: 24px 0 28px;
    padding: 24px 28px;
    background: #F7F7F7;
    border-radius: 16px;
}
.mz-post-modal .mz-post-content > div[name="content"] {
    min-height: 112px;
    max-height: 352px;
    overflow: auto;
    font-size: 15px;
    line-height: 1.7;
    color: #171719;
}
/* 본문에 넣은 이미지(공지사항 작성 화면의 이미지 첨부)는 상자 폭에 맞춰 줄인다 */
.mz-post-modal .mz-post-content > div[name="content"] img {
    max-width: 100%;
    height: auto;
}
/* 본문 링크(편집기의 링크 버튼)는 파란 밑줄로. 전역 a 스타일(검정, 밑줄 없음)로는 링크인지 알 수 없다.
   본문이 표 안에 있어 main.css 의 .table-wrap table td a(한 줄 말줄임 상자)도 함께 되돌린다 */
.mz-post-modal .mz-post-content > div[name="content"] a {
    display: inline;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-height: inherit;
    color: #0B63CE;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}
/* 관리자 팝업 설정 행, 첨부 파일 행: 흰 바탕에 검은 굵은 항목명 */
.mz-post-modal .table-wrap .table-type-view tbody tr th {
    width: 96px;
    padding: 8px 0 !important;
    font-size: 15px;
    font-weight: 700 !important;
    color: #171719 !important;
    white-space: nowrap;
}
.mz-post-modal .table-wrap .table-type-view tbody tr:not(.mz-attach-row) th + td {
    padding: 8px 0 !important;
    font-size: 15px;
    color: #171719;
}
.mz-post-modal .table-wrap .table-type-view tbody tr.mz-attach-row > th,
.mz-post-modal .table-wrap .table-type-view tbody tr.mz-attach-row > td {
    padding: 20px 0 !important;
    border-top: 1px solid #E0E0E2 !important;
}
.mz-post-modal #attachFile a {
    font-size: 15px;
    font-weight: 500;
    color: #171719;
    text-decoration: none;
}
.mz-post-modal #attachFile a:hover {
    text-decoration: underline;
}
.mz-post-modal #attachFile:empty::before {
    content: "등록된 첨부파일이 없습니다";
    font-size: 15px;
    color: #858688;
}
/* 닫기: 검은 둥근 사각형에 흰 굵은 글씨 */
.mz-post-modal .modal-footer {
    padding: 8px 32px 32px !important;
    border-top: 0 !important;
    justify-content: center !important;
}
.mz-post-modal .modal-footer .mz-post-close {
    min-width: 120px;
    height: 44px;
    padding: 0 28px;
    border: 0 !important;
    border-radius: 8px !important;
    background: #171719 !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
}
.mz-post-modal .modal-footer .mz-post-close:hover {
    background: #000 !important;
}

/* ---- 고객지원 섹션 ---- */
.mz-support {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
}

@media (max-width: 900px) {
    .mz-support {
        grid-template-columns: 1fr;
    }
}

.mz-board {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    padding: 24px 26px;
}

.mz-board .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.mz-board .head h4 {
    margin: 0;
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #171719;
    line-height: 1.4;
}

.mz-board .head .more {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.2px;
    color: #47484B;
    text-decoration: underline;
    cursor: pointer;
}

.mz-board.notice ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mz-board.notice ul li {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
}

.mz-board.notice ul li a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: #344054;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mz-board.notice ul li a:hover p {
    text-decoration: underline;
}

.mz-board.notice ul li span {
    color: #98a2b3;
    font-size: 13px;
    flex: none;
    text-align: right;
}
.mz-board.faq {
    cursor: pointer;
}
.mz-board:hover {
    border-color: #FE7171;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
}

.mz-board .faq-text {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 500;
    color: #47484B;
    margin: 6px 0 0;
    line-height: 1.5;
    letter-spacing: -0.2px;
}


/* FAQ 분류 칩 (community.html, FAQ 게시판만). 전체 + 분류 + 기타, 칩 옆 숫자는 분류별 글 수 */
.faq-cat-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.faq-cat-bar .faq-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid #DCDCDC;
    border-radius: 20px;
    background: #fff;
    color: #333;
    font-size: 15px;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}
.faq-cat-bar .faq-cat:hover { border-color: #101010; }
/* 전역 button:focus(굵은 outline) 대신 키보드 포커스만 얇게 */
.faq-cat-bar .faq-cat:focus { outline: none; }
.faq-cat-bar .faq-cat:focus-visible { outline: 2px solid #FF4655; outline-offset: 2px; }
.faq-cat-bar .faq-cat .cnt { font-size: 13px; font-size: 0.8125rem; font-weight: 500; color: #8A8A8A; }
.faq-cat-bar .faq-cat.active { border-color: #101010; background: #101010; color: #fff; font-weight: 700; }
.faq-cat-bar .faq-cat.active .cnt { color: rgba(255, 255, 255, .7); }
/* FAQ 표의 분류 열. 모바일에서 제목 위에 보이는 분류(.cat-short)는 데스크톱에서 숨긴다 */
#communityTable td.cat-cell { color: #858688; font-size: 14px; font-size: 0.875rem; }
#communityTable .cat-short { display: none; }
/* 글쓰기·수정 창의 분류 선택. form-control 을 쓰면 common.css 의 .was-validated .form-control:valid 체크 아이콘(!important)이 반복 무늬로 깔려서 따로 둔다 */
.mz-cat-select { width: 100%; max-width: 240px; height: 32px; padding: 0 10px; border: 1px solid #D0D5DD; border-radius: 8px; background-color: #fff; font-size: 14px; color: #101828; }
.mz-cat-select:focus { outline: none; border-color: #858688; }
/* common.css 의 유효 입력 체크 아이콘(.was-validated .form-control:valid)은 반복 지정이 없어 입력칸 전체에 무늬로 깔린다 → 한 개만 */
.was-validated .form-control:valid, .form-control.is-valid { background-repeat: no-repeat !important; }
/* 목록 아래 버튼 줄 (분류 관리 + 글쓰기) */
.community-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Open API 신청(api-apply) 제목 위 안내 띠 — ⓘ 아이콘 + 이용 요금 안내 (figma /apply) */
.oa-fee-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #FAFAFA;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #555;
    word-break: keep-all;
}
.oa-fee-note svg { flex: none; width: 16px; height: 16px; color: #8A8A8A; }

/* =============================================================================
   퍼블 페이지 모바일(≤1080px) — qna / mcp / about-openapi / stock-info 등 "한 화면" 맞춤
   분기점 1080px 은 portal-layout.css 가 LNB 를 숨기는 값과 동일.
   이 파일은 퍼블 페이지에서 common.css → contents.css → openapi.css 순으로 마지막에 로드되므로
   같은 특이도면 여기 규칙이 이긴다. common.css 의 !important 유틸(.flex-row/.col-1 등)만 !important 로 맞선다.
   ============================================================================= */
/* 게시판 목록의 축약 표기 — 데스크톱은 전체(답변완료 / yyyy.MM.dd HH:mm), 모바일은 축약(완료 / yy.MM.dd).
   목록 JS 가 두 span 을 모두 렌더링하고 CSS 로 토글한다 */
.st-short, .d-short { display: none; }

@media (max-width: 1080px) {
    .st-full, .d-full { display: none; }
    .st-short, .d-short { display: inline; }

    /* 1) 컨테이너 고정폭 해제 — 가로 스크롤(페이지가 1200px 로 넘침)의 근본 원인 */
    .container, .container02 { width: auto; max-width: 100%; }
    /* .mz-main(세로 flex)의 자식 — shrink-to-fit 이라 내용의 min-content 폭(줄바꿈 안 되는 가로 행)만큼 커져 화면을 넘긴다.
       portal-layout.css 가 max-width:none 을 주므로 같은 특이도로 폭을 부모 기준 100% 로 확정 */
    .mz-main > .container.sub-main { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
    /* 컨테이너(가로 flex)의 직계 콘텐츠 아이템 — mcp 의 패널(div[data-mcp-panel])처럼 flex 속성이 없는 아이템은
       shrink-to-fit 으로 좁아진다 → 보이는 아이템이 남는 폭을 모두 차지하도록 */
    .mz-main > .container.sub-main > *:not(.lnb-wrap) { flex: 1 1 100%; min-width: 0; max-width: 100%; }
    .inner-contents-wrap { padding: 24px 0 64px; min-width: 0; }
    .contents { min-width: 0; }
    .contents img { max-width: 100%; }
    /* 제목 계열은 common.css 가 .mz-main .title-hN { white-space: nowrap !important } — 긴 제목이 줄바꿈되지 않으면
       레이아웃 뷰포트가 그 폭(600px+)으로 넓어져 페이지 전체가 잘려 보인다(크롬 모바일). 같은 특이도·!important 로 줄바꿈 허용 */
    .mz-main .title-h2, .mz-main .title-h3, .mz-main .title-h4, .mz-main .title-h5 { white-space: normal !important; }
    .title-h2, .title-h3, .title-h4, .title-h5, .tit02, .text01 { overflow-wrap: anywhere; }
    /* 남은 가로 넘침이 뷰포트를 넓히지 못하도록 컨텐츠 컨테이너에서 차단 */
    .mz-main > .container.sub-main { overflow-x: hidden; }
    .contents .flex-row > img { flex: none; align-self: flex-start; }

    /* 2) 페이지 제목 — 좌측 정렬. 제목 아래 줄에 브레드크럼 (space-between 가로 배치 → 세로) */
    .page-title {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        text-align: left;
    }
    .page-title .title-h2, .page-title h2 { width: 100%; text-align: left; font-size: 24px; font-size: 1.5rem; }
    .page-title nav { width: 100%; }
    .page-title .breadcrumb { flex-wrap: wrap; justify-content: flex-start; }

    /* 3) 가로 카드/컬럼 행 → 세로 쌓기. 아이콘+텍스트 같은 작은 행(.flex-nowrap, gap-xs/sm)은 가로 유지 */
    .flex-row:not(.flex-nowrap):not(.gap-xs):not(.gap-sm) > .col-1 {
        flex: 0 0 100% !important;
        width: 100%;
        min-width: 0;
    }
    .gap-4xl { gap: 24px !important; }
    .pa-30 { padding: 20px !important; }

    /* 4) mcp — 화면 캡쳐 자리(인라인 width/height 400x250 고정) → 폭 100%, 높이 자동 */
    .flex-row > .img-capture-wrap {
        width: 100% !important;
        max-width: 400px;
        height: auto !important;
        min-height: 160px;
        margin: 0 auto;
    }
    /* 캡쳐 이미지(howto 등) — .img-capture-wrap 은 세로 flex(align-items:center)라 img 폭이 fit-content 로 계산되고,
       그때 대체요소의 min-content 는 퍼센트 max-width 를 무시해 원본 폭(1282px)으로 넘친다 → 폭을 컨테이너 기준 100% 로 확정 */
    .img-capture-wrap img { width: 100%; max-width: 100%; height: auto; }
    .img-capture-wrap { min-width: 0; max-width: 100%; }

    /* mcp — 코드 블록은 줄바꿈해 가로 스크롤 없이 표시 */
    .api-code-container { overflow-x: auto; }
    .mz-main .api-code-wrap pre, .mz-main .api-code-wrap .api-code, .api-code-wrap pre, .api-code-wrap .api-code {
        white-space: pre-wrap !important;
        word-break: break-all !important;
        font-size: 13px;
        font-size: 0.8125rem;
    }

    /* 5) about-openapi — 5단계 아이콘 행: 한 줄 5개(100px 아이콘+화살표) → 3개씩 줄바꿈, 화살표 숨김 */
    .ico-step-list01 { flex-wrap: wrap; justify-content: center; row-gap: 16px; }
    .ico-step-list01 > li { flex: 0 0 33.333%; }
    .ico-step-list01 > li::before { display: none; }
    .ico-step-list01 .ico-step { width: 72px; }
    .ico-step-list01 .step-tit { font-size: 14px; font-size: 0.875rem; text-align: center; }
    .ico-step-list02 { flex-wrap: wrap; justify-content: center; row-gap: 16px; }
    .ico-step-list02 > li { flex: 0 0 33.333%; box-sizing: border-box; min-width: 0; } /* padding 포함 3개가 한 줄, 긴 설명은 안에서 줄바꿈 */
    .ico-step-list02 .step-txt { overflow-wrap: anywhere; }
    .ico-step-list02 > li::before { display: none; }
    .ico-step-list02 .step-tit, .ico-step-list02 .step-txt { text-align: center; }

    /* 6) qna — 검색어 + 상태 select 행: 세로로, 입력창은 가로 채움 */
    .contents > .flex-row.justify-between.align-end {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
    }
    .contents > .flex-row.justify-between.align-end > .flex-row { flex-wrap: nowrap !important; }
    .contents > .flex-row.justify-between.align-end .input01 { flex: 1; min-width: 0; }
    .contents > .flex-row.justify-between.align-end .input01 input { width: 100%; }
    .contents > .flex-row.justify-between.align-end .select01,
    .contents > .flex-row.justify-between.align-end .select01 select { width: 100%; }

    /* 게시판 표(.board01) 공통 — 폭 100%, 셀 축소. 열 숨김은 표마다 열 순서가 달라 표 id 별로 지정한다
       (qna: 번호|제목|상담분류|답변상태|작성일 / 공지·FAQ: 제목|조회수|[댓글수]|작성일|비고) */
    .board-wrap01 { overflow-x: hidden; }
    .board01 { width: 100%; table-layout: auto; }
    .board01 col { width: auto !important; }
    .board01 th, .board01 td { padding: 12px 6px; font-size: 14px; font-size: 0.875rem; height: auto; white-space: nowrap; }
    .board01 td[colspan] { white-space: normal; }
    /* qna(#qnaTable) — 번호(1)·상담분류(3) 숨김, 제목(2)은 남는 폭 전부 + 말줄임 (auto 레이아웃 말줄임 기법: width:100% + max-width:0) */
    #qnaTable th:nth-child(1), #qnaTable th:nth-child(3),
    #qnaTable td:not([colspan]):nth-child(1), #qnaTable td:not([colspan]):nth-child(3) { display: none; }
    #qnaTable th:nth-child(2), #qnaTable td:not([colspan]):nth-child(2) { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
    /* 공지사항·FAQ(#communityTable) — 제목(첫 열)과 작성일(뒤에서 두 번째 열)만 표시. 댓글수 열 유무와 무관하게 동작.
       조회수·댓글수·비고(관리자 수정/삭제 버튼)는 모바일에서 숨긴다 */
    #communityTable th:not(:first-child):not(:nth-last-child(2)),
    #communityTable td:not([colspan]):not(:first-child):not(:nth-last-child(2)) { display: none; }
    #communityTable th:first-child, #communityTable td:not([colspan]):first-child { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
    /* FAQ(#communityTable.has-cat: 분류|제목|조회수|작성일|비고) — 분류 열은 숨기고 제목(2열)과 작성일을 표시.
       분류는 제목 칸 위에 작은 회색 글씨로 (.cat-short). 같은 특이도라 위 규칙보다 뒤에 둔다 */
    #communityTable.has-cat th:first-child, #communityTable.has-cat td:not([colspan]):first-child { display: none; }
    #communityTable.has-cat th:nth-child(2), #communityTable.has-cat td:not([colspan]):nth-child(2) { display: table-cell; width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
    #communityTable .cat-short { display: block; margin-bottom: 2px; font-size: 12px; font-size: 0.75rem; line-height: 1.4; color: #858688; }
    /* FAQ 분류 칩 — 한 줄 가로 스크롤 (스크롤바 숨김), 칩 높이 36px */
    .faq-cat-bar { flex-wrap: nowrap; overflow-x: auto; margin-top: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .faq-cat-bar::-webkit-scrollbar { display: none; }
    .faq-cat-bar .faq-cat { flex: none; height: 36px; font-size: 14px; font-size: 0.875rem; }
    /* Open API 신청 안내 띠 — 줄바꿈되면 아이콘을 첫 줄에 맞춘다 */
    .oa-fee-note { align-items: flex-start; }
    .oa-fee-note svg { margin-top: 2px; }

    /* howto-use — 탭 바: li 마다 min-width 140px(3개 = 420px) 라 335px 화면을 넘겨 뷰포트 전체가 넓어진다.
       모바일에서는 최소폭을 풀고 탭 글자를 줄바꿈해 한 줄(3등분)에 맞춘다 */
    .tabType01 .tab > li { min-width: 0; }
    .tabType01 .tab > li > a, .tabType01 .tab > li > button {
        height: auto; min-height: 58px; padding: 10px 6px; /* 두 줄 탭(58px)과 한 줄 탭 높이 통일 */
        font-size: 14px; font-size: 0.875rem; line-height: 1.3; text-align: center; white-space: normal; word-break: keep-all;
    }

    /* 공지·FAQ 게시글 상세 모달(#detailModal, bootstrap .modal-xl) — 화면 폭에 맞추고 본문(이미지·표·긴 URL)이 넘치지 않도록 */
    .modal-dialog.modal-xl { width: auto !important; max-width: none !important; margin: 8px !important; }
    .modal-body { padding: 10px 14px; }
    .notice-view-wrap { overflow-x: hidden; }
    .notice-view-wrap .table-type-view { width: 100%; table-layout: fixed; }
    .notice-view-wrap .table-type-view th { width: 84px; white-space: nowrap; }
    .notice-view-wrap .table-type-view td { overflow-wrap: anywhere; }
    .notice-view-wrap .title { font-size: 18px; font-size: 1.125rem; }
    .notice-view-wrap [name="content"] { overflow-wrap: anywhere; }
    .notice-view-wrap [name="content"] img, .notice-view-wrap [name="content"] video, .notice-view-wrap [name="content"] iframe { max-width: 100% !important; height: auto; }
    .notice-view-wrap [name="content"] table { display: block; max-width: 100%; overflow-x: auto; }

    /* qna — 페이저 우측에 절대배치된 '문의하기' → 페이저 아래 한 줄로 (겹침 방지).
       전역 bootstrap.css 의 .position-absolute{position:absolute!important} 를 이기려면 !important 필요 */
    .position-relative > .position-absolute.top-right { position: static !important; margin-top: 12px; text-align: right; }
}