@charset "UTF-8";
/* 공통 */
@media (hover: hover){
 :where(a, button, .btn) { transition: color 0.25s ease, background-color 0.25s ease; cursor: pointer; } 
 }
:root { --color-primary: #1f6ceb; --color-text: #1d1d1d; --shadow: 0 12px 40px 0 rgba(53, 58, 82, 0.1); } 
h3 { font-size: 44px; font-weight: 700; text-align: center; margin: 0 0 48px 0; } 
*{ -webkit-tap-highlight-color: transparent; }
html,
body { height: 100%; margin: 0; font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, "Noto Sans KR", "Helvetica Neue", Arial, sans-serif; color: var(--text-color); background: #fff; line-height: 1.3; letter-spacing: -0.02em; word-break: keep-all; } 
body { display: flex; flex-direction: column; min-height: 100vh; } 
main { flex: 1; padding-top: 100px; } 
.sr-only { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } 
.container { width: min(1280px, 100% - 48px); margin-inline: auto; } 
.eyebrow { font-size: 24px; font-weight: 700; color: var(--color-primary); margin: 0 0 20px 0; } 
.txt-center { text-align: center; } 
.txt-left { text-align: left; } 
.txt-red { color: #ef4444; } 
.color-primary { color: var(--color-primary); } 

/* 헤더 */
.site-header { position: fixed; top: 0; width: 100%; z-index: 1000; background: #fff; border-bottom: 1px solid #dce2eb; } 
.header-wrap { display: flex; align-items: center; justify-content: space-between; height: 100px; } 
.logo { flex: 0 0 auto; width: 104px; } 
.ghost { flex: 0 0 auto; width: auto; width: 104px; } 
.logo img { width: 104px; } 
.global-nav { flex: 0 0 auto; margin: 0 auto; } 
.global-nav ul { display: flex; gap: 100px; } 
.global-nav a { display: block; padding: 6px; font-size: 22px; font-weight: 600; } 
.global-nav a:hover { color: var(--color-primary); } 
.btn-gnb { display: none; z-index: 1300; } 

/* 푸터 */
.site-footer { background: #212539; color: rgba(255, 255, 255, 0.6); font-size: 14px; padding: 60px 0; margin-top: auto; } 
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; } 
.corp-wrap { display: flex; flex-direction: column; gap: 40px; } 
.corp { display: flex; align-items: center; gap: 12px; } 
.corp img { height: 17px; filter: none; } 
.corp span { font-size: 19px; font-weight: 600; color: rgba(255, 255, 255, 0.6); } 
.corp-info { font-size: 15px; font-weight: 500; } 
.corp-info address { margin: 10px 0 12px; } 
.addr { margin-bottom: 8px; } 
.corp-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 24px; } 
.corp-list li { display: flex; gap: 6px; } 
.corp-list .label { color: rgba(255, 255, 255, 0.3); font-weight: 500; } 
.copyright { margin-top: 8px; color: rgba(255, 255, 255, 0.3); } 
.footer-nav { display: flex; align-items: center; gap: 40px; margin-left: auto; white-space: nowrap; } 
.footer-nav .footer-policies { display: flex; gap: 32px; } 
.footer-nav .footer-policies a { font-size: 16px; font-weight: 500; } 
.footer-nav .footer-policies a:hover { opacity: 0.85; } 
.family { position: relative; } 
.family-trigger { display: flex; align-items: center; justify-content: space-between; width: 280px; height: 56px; padding: 16px 28px; border: 1px solid #3a4154; border-radius: 999px; color: #a6a8b0; font-size: 16px; line-height: 1; font-weight: 600; } 
.family-plus { width: 16px; height: 16px; transition: transform 0.2s ease; } 
.family[aria-expanded="true"] .family-plus { transform: rotate(45deg); } 
.family-list { position: absolute; right: 0; bottom: 70px; width: 280px; padding: 8px; border-radius: 16px; background: #fff; color: #1d1d1d; border: 1px solid #bec6da; display: none; } 
.family-list.is-open { display: block; } 
.family-list a { display: flex; align-items: center; gap: 8px; padding: 12px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; } 
.family-list a:hover { background: #f1f3f7; color: var(--color-primary); } 
.site-footer a { text-decoration: none; } 
.site-footer a:hover { opacity: 0.9; } 

/*****************************************************************
 PC
*****************************************************************/

/* 메인 */
section.hero { padding: 110px 0; } 
.hero-wrap { display: flex; justify-content: space-between; align-items: center; gap: 40px; } 
.hero-text h2 { font-size: clamp(32px, 4vw, 54px); font-weight: 700; line-height: 1.3; margin: 0 0 24px 0; width: max-content; } 
.hero-text p { font-size: 20px; color: #4e5968; line-height: 1.6; margin: 0 0 80px 0; } 
.hero-wrap .btn-wrap { display: flex; gap: 12px; align-items: center; } 
.hero-wrap .btn-wrap .btn { width: 194px; height: 56px; font-size: 18px; } 
.hero-wrap .btn.ghost { width: 194px; border: 1px solid #bec6da; height: 56px; } 
.hero-wrap .btn.ghost:hover { background: #f5f5f5; } 
.hero-visual { background: url("../images/main_illust.png") no-repeat center / cover; width: 100%; max-width: 699px; aspect-ratio: 699/512; height: auto; justify-self: end; } 
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 600; gap: 8px; } 
.hero-wrap .btn.primary { background: var(--color-primary); color: #fff; } 
.hero-wrap .btn.primary:hover { background: #1155c5; } 
.chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; } 
.chip { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; padding: 12px 20px; border-radius: 999px; background: #fff; color: #4e5968; transition: background-color 0.25s ease; } 
.chip:hover { background: #d5e6ff; } 
.chip img { width: 24px; height: 24px; } 

section.search { padding: 96px 0; background: #f7f8fa; } 
.search-headline { font-weight: 600; font-size: 44px; text-align: center; margin: 0 0 40px 0; } 
.search-headline br.hidden { display: none; } 
.search-bar { display: flex; gap: 8px; align-items: center; background: #fff; border: 3px solid var(--color-primary); border-radius: 999px; box-shadow: var(--shadow); width: 100%; max-width: 880px; height: 88px; margin: 0 auto; } 
.search-field { flex: 1; display: flex; align-items: center; cursor: text; } 
.search-field input { width: 100%; flex: 1; border: 0; outline: 0; padding: 28px 48px; font-size: 22px; } 
.search-field input::placeholder { font-size: 22px; font-weight: 500; color: #98a2bd; } 
.icon-btn { display: flex; align-items: center; justify-content: center; padding: 28px 48px 28px 10px; border: 0; background: none; cursor: pointer; } 
.icon-btn img { width: 32px; height: 32px; z-index: 1; } 

section.benefits { padding: 120px 0; } 
.benefits-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; align-items: start; } 
.benefit-title { font-size: 48px; margin: 8px 0 0 0; } 
.benefit-cards { display: grid; gap: 24px; } 
.benefit-cards li { display: flex; gap: 40px; align-items: center; max-width: 776px; padding: 48px 64px; border: 1px solid #dce2eb; border-radius: 20px; background: #fff; } 
.benefit-cards img { width: 80px; height: 80px; } 
.benefit-cards strong { display: block; font-size: 24px; font-weight: 700; margin-bottom: 12px; } 
.benefit-cards p { font-size: 20px; font-weight: 500; color: #4e5968; } 

section.products { padding: 120px 0; } 
.products { background: #f7f8fa; } 
.products .container { width: 100%; overflow: hidden; } 
.product-swiper { overflow: visible !important; padding: 0; margin-bottom: 70px; } 
.product-swiper .swiper-wrapper { overflow: visible; } 
.product-swiper .swiper-slide { height: auto; width: auto; overflow: visible; } 
.card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; background: #fff; border: 1px solid #e9eef6; border-radius: 28px; padding: 36px 32px; width: 320px !important; height: 367px !important; box-shadow: var(--shadow); transition: background-color 0.2s ease, color 0.2s ease, transform 0.4s ease; cursor: pointer; z-index: 1; } 
.card-text { display: flex; flex-direction: column; gap: 15px; } 
.card h4 { margin: 0; font-size: 24px; line-height: 1.3; } 
.card p { margin: 0; color: #4e5968; font-size: 16px; font-weight: 500; line-height: 1.4; } 
.card-icon img { width: 140px; height: auto; } 
.card:hover { background: var(--color-primary); color: #fff; border-color: transparent; transform: translateY(-6px); z-index: 5; } 
.card:hover p { color: rgba(255, 255, 255, 0.95); } 

.swiper-button-prev::after,
.swiper-button-next::after { content: none !important; } 
.swiper-button-prev > svg,
.swiper-button-next > svg { display: none; } 
.swiper-button-prev,
.swiper-button-next { width: 44px; height: 44px; background: url("../images/ico_arrow_right_swiper.svg") no-repeat center/44px; } 
.swiper-button-prev { transform: scaleX(-1); } 
.swiper-button-disabled { display: none !important; } 
.swiper-button-prev:after,
.swiper-button-next:after { font-size: 16px; color: #1d2740; } 
.products .btn.ghost { width: 194px; height: 56px; border: 1px solid #bec6da; font-size: 18px; gap: 4px; padding: 0 0 0 12px; } 
.products .btn.ghost:hover { background: #e5e9f0; } 

section.steps { padding: 120px 0; } 
.steps { background: #fff; } 
.steps .container { max-width: 1280px; } 
.step-grid { display: flex; align-items: center; justify-content: center; } 
.step-grid li { display: flex; justify-content: space-between; gap: 6px; flex: 1; border-radius: 32px; background: #f7f8fa; padding: 36px; height: 200px; } 
.step-grid img { width: 40px; height: 40px; } 
.step-txt { display: flex; flex-direction: column; gap: 24px; } 
.step-txt p { font-size: 20px; font-weight: 700; } 
.step-txt span { font-size: 16px; font-weight: 500; color: #4e5968; } 
.step-txt em { font-size: 13px; font-weight: 600; } 
.step-arrow { padding: 0; background: transparent; border: none; padding: 16px; } 
.step-arrow img { width: 16px; height: 16px; } 

section.cta { padding-bottom: 160px; } 
.cta-wrap { background: var(--color-primary); display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 80px; border-radius: 32px; } 
.cta-text p { font-size: 32px; font-weight: 600; color: #fff; margin: 0 0 64px 0; line-height: 1.4; } 
.cta-text p br.hidden { display: none; } 
.cta-row { display: flex; gap: 16px; } 
.cta-text .btn { width: 166px; height: 56px; font-size: 18px; } 
.cta-text .btn.primary { background: #0049c4; color: #fff; } 
.cta-text .btn.primary:hover { background: #00368f; } 
.cta-row .btn.ghost { background: #fff; color: var(--color-text); } 
.cta-row .btn.ghost:hover { background: #ddd; } 
.cta-visual { background: url("../images/cta_illust.svg") no-repeat center / cover; width: 100%; max-width: 414px; aspect-ratio: 414/288; height: auto; justify-self: end; } 

/* API 상품조회 */
.search-page .search { background: url(../images/bg_search.png) no-repeat center/cover; } 
.search-page .search-headline { font-size: clamp(32px, 4vw, 64px); font-weight: 700; color: #fff; } 
.search-page .chip { background: rgba(255, 255, 255, 0.1); color: #fff; } 
.search-page .chip:hover { background: rgba(255, 255, 255, 0.17); } 
.search-page .chip img { filter: brightness(0) invert(1); } 
.api-list-section { padding: 96px 0 180px; } 
.tabs { display: flex; gap: clamp(16px, 3vw, 40px); margin-bottom: 74px; } 
.tabs button { background: none; border: none; font-size: clamp(18px, 4vw, 36px); font-weight: 600; color: #bec6da; cursor: pointer; transition: color 0.3s ease; } 
.tabs button:hover { color: #7d8db5; } 
.tabs button.active { font-weight: 700; color: var(--color-text); border-bottom: 4px solid var(--color-text); padding-bottom: 4px; } 
.result-count { font-size: 20px; font-weight: 600; margin-bottom: 24px; color: #292e35; } 
.result-count em { font-weight: 700; color: var(--color-primary); } 
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 50px; } 
.search-card { position: relative; height: 464px; background: #f0f6ff no-repeat right 26px top 20px; border-radius: 32px; padding: 56px 48px; transition: all 0.3s ease; overflow: hidden; cursor: pointer; } 
.search-card h3 { margin: 0 0 24px 0; font-size: 32px; font-weight: 700; text-align: left; } 
.search-card p { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--color-text); } 
.search-card .tag-list { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; padding: 0; list-style: none; } 
.search-card .tag-list li { display: inline-block; background: #e6eef9; color: #7d88a4; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; width: max-content; } 
.search-card img.card-icon { position: absolute; bottom: 40px; right: 40px; width: 120px; height: 120px; object-fit: contain; transition: filter 0.3s ease; } 
.search-card:hover { background: var(--color-primary) url(../images/ico_go.svg) no-repeat right 20px top 20px; box-shadow: 4px 4px 8px 0 rgba(0, 82, 236, 0.3); color: #fff; transform: scale(1.02); } 
.search-card:hover .tag-list li { background: rgba(255, 255, 255, 0.1); color: #fff; } 
.search-card:hover h3,
.search-card:hover p { color: #fff; } 
.search-card::before { content: ""; position: absolute; width: 460px; height: 460px; opacity: 0; transition: opacity 0.4s ease; z-index: -1; } 
.search-card::after { content: ""; position: absolute; width: 500px; height: 500px; opacity: 0; transition: opacity 0.4s ease; z-index: -1; } 
.search-card::before { top: 0; left: 0; background: url("../images/card-bg-white.png") no-repeat -170px -170px / cover; } 
.search-card::after { bottom: 0; right: 0; background: url("../images/card-bg-blue.png") no-repeat 170px 170px / cover; } 
.search-card:hover::before,
.search-card:hover::after { opacity: 1; } 
.result-empty { display: flex; flex-direction: column; align-items: center; gap: 48px; margin-top: 100px; } 
.result-empty p { font-size: 24px; font-weight: 600; color: var(--color-text); } 
.result-empty em { color: var(--color-primary); } 
.result-empty .api-cta-row { margin: 0; } 

/* API 상품 상세페이지 */
.api-hero .container,
.inquiry-wrap .container { padding: 96px 0 160px; } 
.container h2,
h2.inquiry-title { font-size: clamp(32px, 4vw, 56px); font-weight: 700; margin-bottom: 20px; } 
.hero-text h2.main-tit { font-size: clamp(32px, 4vw, 54px); font-weight: 700; margin-bottom: 24px; } 
.api-page-desc { font-size: 24px; font-weight: 500; color: #292e35; margin-bottom: 72px; } 
.api-hero-panel { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #1f6ceb; border-radius: 24px; padding: 50px 80px; } 
.api-hero-inner .eyebrow.small { font-size: 18px; font-weight: 600; color: #b8d1ff; margin-bottom: 16px; } 
.api-hero-head { display: block; font-size: clamp(24px, 4vw, 36px); line-height: 1.4; color: #fff; margin-bottom: 64px; } 
.api-hero-tags { display: flex; gap: 40px; } 
.api-hero-tags li p { width: 100px; padding: 8px 0; border-radius: 999px; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: clamp(13px, 3vw, 15px); font-weight: 700; text-align: center; margin-bottom: 16px; } 
.api-hero-tags .tags-wrap { display: flex; gap: 6px; padding-left: 4px; } 
.api-sec-title { font-size: clamp(24px, 4vw, 32px); font-weight: 700; text-align: left; margin-bottom: 24px; } 
.api-hero-tags li span { font-size: clamp(13px, 3vw, 15px); color: #fff; white-space: nowrap; } 
.api-hero-visual { width: 100%; max-width: 489px; aspect-ratio: 489/350; justify-self: end; min-height: 220px; } 
.api-hero-visual,
.mo-api-hero-visual { background-repeat: no-repeat; background-position: center; background-size: contain; } 
.api_debit_transfer .api-hero-visual,
.api_debit_transfer .mo-api-hero-visual { background-image: url("../images/api_debit_transfer_illust.png"); } 
.api_credit_transfer .api-hero-visual,
.api_credit_transfer .mo-api-hero-visual { background-image: url("../images/api_credit_transfer_illust.png"); } 
.api_virtual_account .api-hero-visual,
.api_virtual_account .mo-api-hero-visual { background-image: url("../images/api_virtual_account_illust.png"); } 
.api_name_check .api-hero-visual,
.api_name_check .mo-api-hero-visual { background-image: url("../images/api_name_check_illust.png"); } 
.api-account-verify .api-hero-visual,
.api-account-verify .mo-api-hero-visual { background-image: url("../images/api_account_verify_illust.png"); } 
.api-ars-verify .api-hero-visual,
.api-ars-verify .mo-api-hero-visual { background-image: url("../images/api_ars_verify_illust.png"); } 
.api-txn-notice .api-hero-visual,
.api-txn-notice .mo-api-hero-visual { background-image: url("../images/api_txn_notice_illust.png"); } 
.api-cashreceipt .api-hero-visual,
.api-cashreceipt .mo-api-hero-visual { background-image: url("../images/api_cashreceipt_illust.png"); } 
.api-tax .api-hero-visual,
.api-tax .mo-api-hero-visual { background-image: url("../images/api_tax_illust.png"); } 
.api-account-pay .api-hero-visual,
.api-account-pay .mo-api-hero-visual { background-image: url("../images/api_account_pay_illust.png"); } 
.api-card-pay .api-hero-visual,
.api-card-pay .mo-api-hero-visual { background-image: url("../images/api_card_pay_illust.png"); } 
.api-pg .api-hero-visual,
.api-pg .mo-api-hero-visual { background-image: url("../images/api_pg_illust.png"); } 
.api-sec-title { font-size: clamp(24px, 4vw, 32px); font-weight: 700; text-align: left; margin-bottom: 24px; } 
.api-sec-title .br_hidden { display: none; } 
.api-case { padding: 40px; } 
.api-benefit { margin-bottom: 96px; } 
.api-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } 
.api-card { background: #fff; border: 1px solid #dce2eb; border-radius: 24px; } 
.api-card > strong { width: 100%; display: block; font-size: 18px; padding: 20px 40px; background: #f1f3f7; text-align: center; border-radius: 24px 24px 0 0; } 
.api-bullets { display: grid; gap: 8px; color: #292e35; font-size: 16px; font-weight: 500; padding: 32px; } 
.api-bullets li { position: relative; padding-left: 10px; } 
.api-bullets li::before { content: ""; position: absolute; left: 0; top: 8px; display: block; width: 3px; height: 3px; border-radius: 999px; background-color: #292e35; } 
.pc-api-provide { display: block; margin-bottom: 96px; } 
.mo-api-provide { display: none; } 
.api-table-wrap { overflow: hidden; background: #fff; } 
.api-table { width: 100%; border-top: 2px solid var(--color-text); } 
.api-table thead th { background: #f1f3f7; padding: 21px 24px; font-size: 18px; font-weight: 600; border-bottom: 1px solid #dce2eb; text-align: center; } 
.api-table thead th:first-child { border-right: 1px solid #dce2eb; } 
.api-table tbody td { font-size: 16px; font-weight: 500; padding: 21px 24px; border-bottom: 1px solid #dce2eb; color: #292e35; } 
.api-table tbody td:first-child { text-align: center; border-right: 1px solid #dce2eb; } 
.api-table tbody tr:first-child td { border-top: none; } 
span.table-desc { display: inline-block; font-size: 16px; font-weight: 500; color: #7d88a4; padding-top: 12px; } 
.api-cases { margin-bottom: 96px; } 
.api-card-3,
.api-card-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } 
.api-card-1 { list-style: none; margin: 0; padding: 0; } 
.api-card-1 .api-case { display: flex; align-items: center; gap: 80px; } 
.case-left { display: flex; flex-direction: column; align-items: center; text-align: center; flex-shrink: 0; padding: 0 70px; } 
.api-case-illust { width: 80px; height: 80px; background: url("icon-store.png") no-repeat center / contain; margin-bottom: 10px; } 
.case-left strong { font-size: 22px; line-height: 1.4; color: #222; } 
.case-right ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 50px; } 
.case-right li { display: flex; align-items: flex-start; gap: 12px; } 
.num-img { width: 28px; height: 28px; background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } 
.num-1 { background-image: url("../images/num_1.svg"); } 
.num-2 { background-image: url("../images/num_2.svg"); } 
.text-wrap { text-align: left; } 
.text-wrap p.sub_tit { font-size: 24px; font-weight: 600; } 
.text-wrap span.sub_desc { display: inline-block; font-size: 16px; font-weight: 500; color: #292e35; padding-top: 8px; } 
.api-case { border-radius: 18px; padding: 40px; text-align: center; } 
.api-case:nth-child(1) { background: #dcf8fc; } 
.api-case:nth-child(2) { background: #e4f0ff; } 
.api-case:nth-child(3) { background: #f5ebff; } 
.api-card-6 .api-case:nth-child(odd) { background: #e8f6ff; } 
.api-card-6 .api-case:nth-child(even) { background: #ebf1ff; } 
.api-card-1 .api-case { flex-direction: row; background: #e4f0ff; } 
.api-case strong { display: block; font-size: clamp(20px, 4vw, 24px); font-weight: 700; margin-bottom: 8px; } 
.api-case p { font-size: clamp(14px, 4vw, 16px); font-weight: 500; color: #292e35; } 
.api-case-illust { width: 120px; height: 120px; margin: 0 auto 20px; } 
.illust-edu { background: url("../images/ex_edu.png") no-repeat center/contain; } 
.illust-bank { background: url("../images/ex_bank.png") no-repeat center/contain; } 
.illust-fintech { background: url("../images/ex_fintech.png") no-repeat center/contain; } 
.illust-subs { background: url("../images/ex_subs.png") no-repeat center/contain; } 
.illust-corp { background: url("../images/ex_corp.png") no-repeat center/contain; } 
.illust-mall { background: url("../images/ex_mall.png") no-repeat center/contain; } 
.illust-hospital { background: url("../images/ex_hospital.png") no-repeat center/contain; } 
.illust-b2b { background: url("../images/ex_b2b.png") no-repeat center/contain; } 
.illust-gov { background: url("../images/ex_gov.png") no-repeat center/contain; } 
.illust-retail { background: url("../images/ex_retail.png") no-repeat center/contain; } 
.illust-creditcard { background: url("../images/pg_creditcard.png") no-repeat center/contain; } 
.illust-simplepay { background: url("../images/pg_simplepay.png") no-repeat center/contain; } 
.illust-account-transfer { background: url("../images/pg_account_transfer.png") no-repeat center/contain; } 
.illust-virtual-account { background: url("../images/pg_virtual_account.png") no-repeat center/contain; } 
.illust-mobilepay { background: url("../images/pg_mobilepay.png") no-repeat center/contain; } 
.illust-easypay { background: url("../images/pg_easypay.png") no-repeat center/contain; } 
.api-rec { padding: 80px 0; background: #f1f3f7; } 
.api-rec-wrap { display: flex; gap: 24px; } 
.api-rec-wrap a { flex: 1; } 
.api-rec-item { display: flex; height: 100%; background: #fff; border: 1px solid #e9eef6; border-radius: 16px; padding: 40px; gap: 32px; } 
.api-rec-item strong { display: inline-flex; align-items: center; font-size: clamp(16px, 4vw, 20px); } 
.api-rec-item strong::after { content: ""; display: inline-block; width: 24px; height: 24px; background: url("../images/rec_ico_arrow_right.svg") no-repeat center; background-size: contain; } 
.api-rec-item p { font-size: clamp(14px, 4vw, 16px); line-height: 1.4; color: #4e5968; margin-top: 16px; } 
.api-rec-ico { flex: none; width: 64px; height: 64px; background-size: contain; } 
.api-text { width: 100%; } 
.rec_vaccount { background: url("../images/rec_vaccount.svg") no-repeat center; } 
.rec_credit_transfer { background: url("../images/rec_credit_transfer.svg") no-repeat center; } 
.rec_name_check { background: url("../images/rec_name_check.svg") no-repeat center; } 
.rec_debit_transfer { background: url("../images/rec_debit_transfer.svg") no-repeat center; } 
.rec_txn_notice { background: url("../images/rec_txn_notice.svg") no-repeat center; } 
.rec_name_check { background: url("../images/rec_name_check.svg") no-repeat center; } 
.rec_account_verify { background: url("../images/rec_account_verify.svg") no-repeat center; } 
.rec_tax { background: url("../images/rec_tax.svg") no-repeat center; } 
.rec_cashreceipt { background: url("../images/rec_cashreceipt.svg") no-repeat center; } 
.rec_card_pay { background: url("../images/rec_card_pay.svg") no-repeat center; } 
.rec_account_pay { background: url("../images/rec_account_pay.svg") no-repeat center; } 
.api-cta-row { display: flex; gap: 16px; justify-content: center; margin: 80px 0 160px 0; } 
.api-cta-row .btn { width: 240px; height: 64px; font-size: 20px; border-radius: 16px; padding: 18px 0; } 
.api-cta-row .btn.ghost { border: 1px solid #bec6da; } 
.api-cta-row .btn.primary { background: #1c223c; color: #fff; } 
.api-cashreceipt .api-hero-head .br_hidden { display: none; } 
.api-tax .api-hero-head .br_hidden { display: none; } 
.api-pg .api-hero-head .br_hidden { display: none; } 

/* 문의하기 */
h2.inquiry-title { margin-bottom: 96px; } 
.inquiry-form { display: flex; gap: 120px; } 
.form-left,
.form-right { flex: 1; display: flex; flex-direction: column; gap: 48px; } 
.form-group { position: relative; display: flex; flex-direction: column; gap: 16px; font-size: 16px; } 
.form-group label { width: max-content; position: relative; display: inline-flex; align-items: center; font-size: 18px; font-weight: 600; color: var(--color-text); } 
.form-group input:focus,
.form-group textarea:focus { border-color: #777; } 
.form-group.error input { border-bottom: 1.5px solid #e82121; } 
.form-group.error .error-msg { color: #e82121; font-size: 16px; font-weight: 500; } 
.required { color: #e82121; margin-left: 2px; margin-bottom: 4px; vertical-align: text-bottom; } 
.textarea-group textarea::placeholder { font-size: 18px; color: #98a2bd; } 
.textarea-group textarea { border: 1px solid #dce2eb; border-radius: 24px; padding: 32px; } 
.form-group.error.textarea-group textarea { border: 1.5px solid #e82121; } 
.tooltip { margin-left: 5px; height: 33px; } 
.agree-wrap { display:inline-flex; flex-direction: column; align-items: flex-start; gap:5px; } 
.agree-wrap .tooltip { height:36px; cursor:default; pointer-events:auto; } 
.btm-text { display: flex; justify-content: space-between; align-items: center; } 
input,
textarea { border-bottom: 1px solid #dce2eb; padding: 14px 0; font-size: 20px; font-weight: 500; } 
textarea { min-height: 200px; resize: none; } 
.char-count { text-align: right; font-size: 14px; color: #999; margin-left: 8px; } 
.select-box { position: relative; } 
.select-btn { width: 100%; padding: 12px 0; border-bottom: 1px solid #dce2eb; background: #fff; text-align: left; font-size: 20px; font-weight: 500; color: #98a2bd; cursor: pointer; } 
.form-group.error .select-btn { border-bottom: 1.5px solid #e82121; } 
.select-btn.selected { color: var(--color-text); } 
.select-btn::after { content: ""; position: absolute; right: 12px; top: 50%; width: 24px; height: 24px; background: url("../images/ico_arrow_down.svg") no-repeat center/contain; transform: translateY(-50%); } 
.select-options { display: flex; flex-direction: column; gap: 8px; position: absolute; top: calc(100% + 10px); left: 0; width: 100%; background: #fff; border: 1px solid #dce2eb; padding: 12px; border-radius: 16px; box-shadow: 0 12px 24px 0 rgba(53, 58, 82, 0.1); z-index: 100; } 
.select-options li { padding: 12px; font-size: 20px; font-weight: 500; cursor: pointer; } 
.select-options li:hover { background: #f7f8fa; color: var(--color-primary); border-radius: 8px; } 
.file-group .file-box { border: 1px dashed #bec6da; border-radius: 24px; padding: 40px; text-align: center; } 
.file-group .file-box img { display: inline-block; } 
.file-drop { color: #777; font-size: 15px; margin-bottom: 24px; } 
.btn-file { display: inline-block; padding: 9px 17px; border: 1px solid #dce2eb; border-radius: 12px; cursor: pointer; font-size: 16px; font-weight: 600; color: #292e35; } 
.btn-file::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; background: url("../images/ico_plus.svg") no-repeat center 2px / contain; } 
.btn-file:hover { background-color: #f2f5f9; } 
.file-desc { font-size: 13px; color: #7d88a4; } 
.file-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } 
.file-list li { display: flex; align-items: center; justify-content: space-between; border: 1px solid #e3e8f0; border-radius: 12px; background: #fff; padding: 12px 16px; } 
.file-list img { width: 24px; height: 24px; margin-right: 10px; flex-shrink: 0; } 
.file-list .file-name { flex: 1; font-size: 15px; font-weight: 500; color: #292e35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.file-box.attached { text-align: left; border: none; padding: 0; } 
.btn-file-del { width: 16px; height: 16px; background: url("../images/ico_del.svg") no-repeat center / 16px; cursor: pointer; flex-shrink: 0; transition: opacity 0.2s; padding: 14px; } 
.btn-file-del:hover { opacity: 1; } 
.privacy-cont { background: #f7f8fa; border-radius: 24px; padding: 32px 40px; font-size: 15px; } 
.privacy strong { display: block; font-size: 20px; font-weight: 600; margin-bottom: 20px; } 
.privacy ul { padding-top: 20px; list-style: none; border-top: 1px solid #dce2eb; } 
.privacy li { font-size: 16px; font-weight: 500; margin-bottom: 4px; } 
.privacy span { display: inline-block; font-size: 16px; font-weight: 500; color: #7d88a4; margin-top: 24px; } 
.agree { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 18px; font-weight: 500; margin-left: 8px; } 
.agree input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; width: 20px; height: 20px; border: 2px solid #dce2eb; border-radius: 6px; background-color: #fff; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; padding: 0; } 
.agree input[type="checkbox"]:hover { border-color: #b8c0d4; } 
.agree input[type="checkbox"]::before,
.agree input[type="checkbox"]::after { content: ""; position: absolute; } 
.agree input[type="checkbox"]::after { opacity: 0; transition: opacity 0.1s; width: 16px; height: 16px; background: url("../images/ico_checkbox_on.svg") no-repeat 0.5px / contain; } 
.agree input[type="checkbox"]:checked { background-color: #2970ff; border-color: #2970ff; } 
.agree input[type="checkbox"]:checked::after { opacity: 1; } 
.form-submit { text-align: center; margin-top: 96px; } 
.form-submit .btn { width: 240px; height: 56px; border-radius: 12px; font-size: 18px; background: #1c223c; color: #fff; font-weight: 600; } 
.inquiry-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 40px 60px; border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); z-index: 2000; text-align: center; } 
.inquiry-modal-content { display: flex; flex-direction: column; align-items: center; gap: 40px; } 
.inquiry-modal-text { font-size: 24px; font-weight: 600; line-height: 1.5; color: #1d1d1d; } 
.inquiry-modal-text span { display: block; margin-top: 16px; font-size: 18px; font-weight: 400; color: #555; } 
.inquiry-modal-actions { display: flex; width: 100%; gap: 8px; } 
.inquiry-modal .btn { border: none; flex: 1; border-radius: 16px; padding: 18px 40px; font-size: 20px; font-weight: 600; cursor: pointer; } 
.inquiry-modal .btn.cancel { border: 1px solid #dce2eb; } 
.inquiry-modal .btn.confirm { background: #1c223c; color: #fff; } 
.inquiry-dimmed { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1500; } 
.inquiry-modal { position: fixed; width: 480px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 32px 36px; border-radius: 16px; z-index: 1600; } 

/* FAQ */
.search-page.faq .search { background: url(../images/bg_faq.png) no-repeat center/cover; } 
.search-page.faq .search-headline { text-align: left; } 
.search-page.faq .search-bar { max-width: 770px; margin: 0; } 
.section.faq-wrap { padding: 96px 0 180px; } 
.faq-content { width: min(1100px, 90%); margin: 100px auto 180px; } 
.faq-tabs { display: flex; gap: 40px; margin-bottom: 60px; } 
.faq-tabs button { background: none; border: none; font-size: clamp(18px, 4vw, 36px); font-weight: 600; color: #bec6da; padding-bottom: 4px; cursor: pointer; } 
.faq-tabs button:hover { color: #7d8db5; } 
.faq-tabs button.active { color: var(--color-text); border-bottom: 4px solid var(--color-text); font-weight: 700; } 
.faq-item { border-bottom: 1px solid #dce2eb; } 
.faq-item-wrap { border-top: 1px solid var(--color-text); } 
.faq-header { display: flex; align-items: center; gap: 20px; padding: 40px 24px 40px 48px; font-size: 18px; cursor: pointer; transition: background-color 0.3s ease; } 
.faq-header:hover { background: #f1f3f7; } 
.faq-header:hover .faq-question { color: var(--color-primary); } 
.faq-category { flex-shrink: 0; width: 100px; font-weight: 500; color: #292e35; } 
.faq-question { flex: 1; background: none; border: none; text-align: left; font-weight: 600; color: var(--color-text); cursor: pointer; position: relative; padding-right: 40px; } 
.faq-question::after { content: ""; position: absolute; top: 50%; right: 0; width: 24px; height: 24px; background: url("../images/ico_arrow_down.svg") no-repeat center/contain; transform: translateY(-50%); transition: transform 0.3s ease; } 
.faq-item.open .faq-question { color: var(--color-primary); } 
.faq-item.open .faq-question::after { transform: translateY(-50%) rotate(180deg); } 
.faq-answer { height: 0; overflow: hidden; background: #f1f3f7; } 
.faq-item.open .faq-answer { height: auto; padding: 40px 48px; } 
.faq-answer p { font-size: 16px; font-weight: 500; color: var(--color-text); line-height: 1.6; } 
.faq-bottom { text-align: center; margin-top: 96px; } 
.faq-btn { display: inline-block; background: #1c223c; color: #fff; border: none; padding: 18px 48px; border-radius: 12px; font-size: 18px; font-weight: 600; cursor: pointer; } 
.faq-btn:hover { background: #14182b; } 

/* 이용약관 */
.service .container { padding: 96px 0 160px; color: var(--color-text); } 
.service .container h2 { margin-bottom: 96px; } 
.terms-content { font-size: 17px; font-weight: 500; line-height: 1.5; } 
.terms-content h3 { font-size: 24px; font-weight: 700; text-align: left; margin: 32px 0 16px; } 
.terms-content p { margin-bottom: 14px; } 
.terms-content ol li { margin-bottom: 8px; } 
.terms-content ol li ol li { margin-left: 20px; margin-top: 2px; } 
.terms-content ul li { margin-left: 20px; margin-bottom: 2px; } 

/*****************************************************************
 모바일
*****************************************************************/

/* mo_메뉴 */
.mobile-menu { width: 100%; position: fixed; top: 56px; padding: 30px; background: #fff; border-radius: 0 0 24px 24px; transform: translateY(-50px); opacity: 0; pointer-events: none; transition: transform 0.2s ease, opacity 0.1s ease; z-index: 1200; } 
.mobile-menu.open { width: 100%; transform: translateY(0); opacity: 1; pointer-events: auto; } 
.mobile-head { display: none; } 
.mobile-nav ul { display: grid; gap: 20px; font-size: 20px; font-weight: 600; text-align: center; } 
.mobile-nav ul li a { display: inline-block; width: 100%; padding: 6px; } 
.dimmed { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1100; } 
.dimmed[hidden] { display: none !important; } 

@media (min-width: 768px){
 #mobileMenu { display: none !important; } 
 .dimmed { display: none !important; } 
 }

@media (min-width: 768px) and (max-width: 1279px){
 .step-grid li { height: -webkit-fill-available; flex-direction: column-reverse; } 
 .footer-top { flex-direction: column; } 
 }

@media (max-width: 1240px){
 .api-hero-inner { width: 100%; } 
 .api-hero-tags { gap: 20px; } 
 .api-hero-tags .tags-wrap { flex-direction: column; } 
 .api-rec-item { flex-direction: column; } 
 }

@media (max-width: 767px) { main { padding-top: 56px; } 
 .section { padding: 56px 0; } 
 .header-wrap { position: sticky; width: 100%; height: 56px; padding: 24px; background: #fff; z-index: 1300; } 
 .logo { width: 80px; } 
 .logo img { width: 100%; } 
 .global-nav { display: none; } 
 .btn-gnb { display: inline-grid; place-items: center; } 
 h3 { font-size: 26px; } 

 /* mo_푸터 */
 .site-footer { padding: 40px 0; } 
 .footer-top { display: flex; flex-direction: column; gap: 40px; } 
 .corp-wrap { gap: 16px; } 
 .corp img { height: 15px; } 
 .corp span { font-size: 16px; } 
 .corp-info { font-size: 13px; } 
 .corp-list { gap: 0; } 
 .corp-list li { padding: 0 16px 6px 0; } 
 .footer-nav { width: 100%; flex-direction: column; align-items: flex-start; justify-content: space-between; margin-left: 0; } 
 .footer-nav .footer-policies { flex-direction: column; gap: 20px; } 
 .footer-nav .footer-policies a { font-size: 13px; } 
 .family { width: 100%; } 
 .family-trigger { width: 100%; max-width: 200px; height: 48px; padding: 14px 20px; font-size: 14px; } 
 .family-list { left: 0; bottom: 60px; width: 200px; } 

 /* mo_메인 */
 section.hero { padding: 48px 0; } 
 .hero-wrap { flex-direction: column; align-items: flex-start; gap: 20px; } 
 .hero-inner { width: 100%; } 
 .hero-text h2.main-tit { line-height: 1.35; margin: 0 0 12px 0; width: auto; } 
 .hero-text p { font-size: 15px; font-weight: 500; line-height: 1.6; margin: 0 0 24px 0; } 
 .hero-wrap .btn-wrap { width: 100%; gap: 8px; } 
 .hero-wrap .btn-wrap .btn { flex: 1; height: 48px; font-size: 16px; } 
 .hero-visual { margin: 60px 0; width: min(400px, 100%); aspect-ratio: 699/512; justify-self: center; } 

 section.search { padding: 48px 0; } 
 .search-headline { font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0 0 32px 0; text-align: left; } 
 .search-headline br.hidden { display: block; } 
 .search-bar { height: 56px; max-width: none; border-width: 2px; } 
 .search-field input { padding: 20px 0 20px 24px; font-size: 16px; } 
 .search-field input::placeholder { font-size: 16px; } 
 .icon-btn { padding: 12px 24px 12px 6px; } 
 .icon-btn img { width: 24px; height: 24px; } 
 .chip-row { justify-content: flex-start; gap: 8px; margin-top: 32px; } 
 .chip { padding: 8px 14px; font-size: 13px; gap: 4px; } 
 .chip img { width: 20px; height: 20px; } 

 section.benefits { padding: 56px 0; } 
 .benefits-wrap { grid-template-columns: 1fr; gap: 24px; } 
 .benefits-wrap .eyebrow { font-size: 16px; } 
 .benefit-title { font-size: 26px; margin: 4px 0 0 0; } 
 .benefit-cards { gap: 12px; } 
 .benefit-cards li { gap: 20px; padding: 32px; border-radius: 16px; } 
 .benefit-cards img { width: 48px; height: 48px; } 
 .benefit-cards strong { font-size: 18px; margin-bottom: 6px; } 
 .benefit-cards p { font-size: 14px; } 

 section.products { padding: 64px 0; } 
 .products .container { width: 100%; overflow: hidden; } 
 .product-title { font-size: 26px; margin: 0 0 24px 0; text-align: center; } 
 .product-swiper { padding: 0; margin-bottom: 60px; } 
 .product-swiper .swiper-wrapper { margin-left: 0 !important; gap: 24px; } 
 .product-swiper .swiper-slide { flex: 0 0 270px !important; display: flex; justify-content: center; gap: 30px; margin-right: 0 !important; } 
 .card { width: 100% !important; height: auto !important; min-height: 300px; padding: 40px 24px; } 
 .card h4 { font-size: 20px; } 
 .card p { font-size: 14px; } 
 .card-icon img { width: 120px; } 
 .swiper-button-prev,
 .swiper-button-next { display: none !important; } 
 .products .btn.ghost { width: 160px; height: 48px; font-size: 16px; } 
 .result-empty { gap: 40px; margin-top: 60px; } 
 .result-empty img { width: 64px; height: 64px; } 
 .result-empty p { font-size: 16px; } 
 .api-cta-row .btn.primary { width: 140px; } 

 section.steps { padding: 64px 0; } 
 #stepTitle { margin: 0 0 24px 0; text-align: center; } 
 .step-grid { flex-direction: column; gap: 10px; } 
 .step-grid li { width: 100%; height: auto; padding: 24px; border-radius: 20px; } 
 .step-grid li img { width: 48px; height: 48px; } 
 .step-grid br.hidden { display: none; } 
 .step-txt { gap: 12px; } 
 .step-txt p { font-size: 16px; } 
 .step-txt span { font-size: 13px; } 
 .step-txt em { font-size: 12px; } 
 .step-arrow { transform: rotate(90deg); padding: 0; } 

 section.cta { padding-bottom: 0; } 
 .cta-wrap { flex-direction: column; width: 100%; padding: 64px 32px; gap: 20px; border-radius: 0; } 
 .cta-text { width: 100%; } 
 .cta-text br.hidden { display: block; } 
 .cta-text p { font-size: 24px; font-weight: 600; line-height: 1.3; color: #fff; margin-bottom: 32px; } 
 .cta-text p br.hidden { display: block; } 
 .cta-row { flex-direction: column; gap: 12px; } 
 .cta-text .btn { width: 120px; height: 40px; font-size: 14px; padding: 0; } 
 .cta-text .btn img { width: 16px; height: 16px; } 
 .cta-visual { width: min(320px, 90%); aspect-ratio: 414/288; justify-self: center; } 

 /* mo_API 상품조회 */
 .search-page .api-list-section { padding: 40px 0 80px; } 
 .search-page .tabs { margin-bottom: 32px; } 
 .search-page .tabs button.active { border-bottom: 2px solid var(--color-text); padding-bottom: 2px; } 
 .search-page .search-card { height: 350px; padding: 40px 32px; } 
 .search-page .search-card h3 { font-size: 20px; } 
 .search-card p { font-size: 14px; } 
 .search-card img.card-icon { width: 96px; height: 96px; } 
 .search-card:hover { background-size: 40px; } 
 .card-grid { grid-template-columns:auto; gap: 24px; } 
 .result-count { font-size: 14px; } 

 /* mo_출금이체 */
 .api-hero .container { padding: 0; margin-top: 24px; } 
 .api-page-title { margin-bottom: 12px; } 
 .api-hero { padding: 0; } 
 .api-page-desc { font-size: 16px; margin-bottom: 24px; } 
 .api-hero-panel { padding: 44px 26px; border-radius: 16px; margin: 0 -24px 64px; border-radius: 0; } 
 .api-hero-inner .eyebrow.small { font-size: 14px; margin-bottom: 8px; } 
 .api-hero-head { margin-bottom: 0; } 
 .api-hero-tags { flex-wrap: wrap; gap: 12px; } 
 .api-rec-wrap { flex-direction: column; gap: 16px; } 
 .api-hero-tags .tags-wrap { flex-direction: column; } 
 .api-hero-tags li { font-size: 12px; } 
 .api-hero-tags li p { width: 88px; height: 34px; margin-bottom: 8px; } 
 .api-hero-visual { display: none; } 
 .mo-api-hero-visual { width: 100%; max-width: 490px; min-height: 220px; aspect-ratio: 560/360; justify-self: end; margin: 34px auto; } 
 .api-sec-title { margin-bottom: 22px; } 
 .api-benefit { padding: 0; margin-bottom: 64px; } 
 .api-benefit-grid { grid-template-columns: 1fr; gap: 16px; } 
 .api-card { border-radius: 16px; } 
 .api-card > strong { font-size: 16px; padding: 12px 16px; border-radius: 16px 16px 0 0; } 
 .api-bullets { font-size: 13px; gap: 6px; padding: 24px; } 
 .pc-api-provide { display: none; } 
 .mo-api-provide { display: block; padding: 0; margin-bottom: 54px; } 
 .mo-api-provide .text-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } 
 .mo-api-provide .text-wrap button { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; padding: 6px 0; } 
 .mo-api-provide .text-wrap button::after { content: ""; display: inline-block; width: 16px; height: 16px; background: url("../images/mo_ico_arrow_right.svg") no-repeat center; background-size: contain; } 
 .mo-api-provide .api-sec-title { margin-bottom: 0; } 
 .api-table thead th { padding: 12px; font-size: 13px; } 
 .api-table tbody td { padding: 12px; font-size: 13px; } 
 .mo-api-provide span.table-desc { font-size: 14px; } 

 /* mo_제공 정보 모달 */
 .no-scroll { overflow: hidden; } 
 .provide-modal { position: fixed; inset: 0; display: none; background: rgba(0, 0, 0, 0.6); z-index: 2000; display: grid; place-items: center center; } 
 .provide-modal[hidden] { display: none; } 
 .provide-dim { position: absolute; inset: 0; background: transparent; } 
 .provide-panel { position: relative; display: flex; flex-direction: column; width: min(680px, calc(100% - 48px)); max-height: min(86vh, 720px); background: #fff; border-radius: 12px; margin: 0; overflow: hidden; } 
 .provide-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: #fff; z-index: 1; } 
 .provide-title { font-size: 20px; font-weight: 700; color: #1d1d1d; } 
 .provide-close { width: 24px; height: 24px; background: url("../images/mo_ico_close.svg") no-repeat center/24px; cursor: pointer; border: none; } 
 .provide-divider { flex: 0 0 auto; width: 100%; height: 1px; background: #eceff3; } 
 .provide-body { position: relative; flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; padding: 32px 24px; } 
 .provide-table { width: 100%; border-collapse: separate; border-spacing: 0 0; } 
 .stack-rows tr { display: block; margin-bottom: 24px; } 
 .stack-rows th { display: block; text-align: left; padding: 0; } 
 .stack-rows td { display: block; padding: 16px; color: #292e35; font-size: 14px; font-weight: 500; line-height: 1.7; } 
 .provide-badge { display: inline-block; width: 100%; padding: 12px 16px; background: #f0f6ff; font-weight: 600; border-radius: 8px; font-size: 16px; } 
 .api-cases { padding: 0; margin-bottom: 64px; } 
 .api-card-3,
 .api-card-6 { grid-template-columns: 1fr; gap: 16px; } 
 .api-case { padding: 24px; border-radius: 14px; } 
 .api-case-illust { width: 96px; height: 96px; } 
 .api-rec { padding: 40px 0; } 
 .api-rec-item p { margin-top: 8px; } 
 .api-sec-title .br_hidden { display: block; } 
 .api-rec-grid { grid-template-columns: 1fr; gap: 12px; } 
 .api-rec-item { flex-direction: row; padding: 30px; border-radius: 14px; gap: 24px; } 
 .api-cta-row { gap: 8px; margin: 40px 24px 80px; } 
 .api-cta-row .btn { flex: 1; height: 56px; font-size: 16px; border-radius: 12px; } 

 /* mo_활용 사례 */
 .api-card-1 .api-case { flex-direction: column; gap: 48px; padding: 24px 40px; } 
 .case-left { padding: 0; } 
 .text-wrap p.sub_tit { font-size: 16px; } 
 .text-wrap span.sub_desc { font-size: 14px; } 
 .case-right ul { gap: 40px; } 

 /* mo_기타 줄바꿈 */
 .api-cashreceipt .api-hero-head .br_hidden { display: block; } 
 .api-tax .api-hero-head .br_hidden { display: block; } 
 .api-pg .api-hero-head .br_hidden { display: block; } 
 
 /* mo_문의하기 */
 .api-hero .container,
 .inquiry-wrap { padding: 24px 0 80px; } 
 .api-hero .container,
 .inquiry-wrap .container { padding: 0; } 
 h2.inquiry-title { font-size: 32px; margin-bottom: 56px; } 
 .inquiry-form { flex-direction: column; gap: 32px; } 
 .form-left,
 .form-right { gap: 40px; } 
 .form-group { gap: 16px; } 
 .form-group label { font-size: 14px; } 
 .tooltip { height: 30px; } 
 .form-group input { font-size: 16px; padding: 12px 0; } 
 .form-group.error .error-msg { font-size: 14px; } 
 .textarea-group textarea { font-size: 14px; padding: 20px; border-radius: 12px; } 
 .textarea-group textarea::placeholder { font-size: 14px; } 
 textarea { min-height: 120px; } 
 .select-btn { font-size: 16px; } 
 .select-options li { font-size: 15px; } 
 .file-group .file-box { padding: 32px 16px; border-radius: 12px; } 
 .file-box.attached { padding: 0; } 
 .file-list li { padding: 12px 14px; } 
 .file-list .file-name { font-size: 14px; } 
 .btn-file { font-size: 14px; } 
 .file-drop { font-size: 15px; } 
 .privacy strong { font-size: 16px; } 
 .privacy-cont { padding: 24px; border-radius: 12px; } 
 .privacy li { font-size: 13px; } 
 .privacy span { font-size: 13px; margin-top: 20px; } 
 .agree-wrap { flex-direction: column; align-items: flex-start; } 
 .form-submit { margin-top: 40px; } 
 .form-submit .btn { width: 100%; height: 56px; font-size: 16px; } 
 .inquiry-modal { width: 86%; padding: 24px; } 
 .inquiry-modal-content { gap: 24px; } 
 .inquiry-modal-text { font-size: 20px; } 
 .inquiry-modal-text span { font-size: 15px; margin-top: 8px; } 
 .inquiry-modal .btn { height: 48px; font-size: 16px; } 

 /* mo_FAQ */
 .section.faq-wrap { padding: 40px 0 80px; } 
 .search-page.faq .search { background-position: 0; } 
 .faq-tabs { gap: clamp(16px, 3vw, 40px); margin-bottom: 30px; } 
 .faq-tabs button.active { color: var(--color-text); border-bottom: 2px solid var(--color-text); } 
 .faq-header { font-size: 14px; padding: 20px 8px; gap: 12px; } 
 .faq-category { width: 56px; font-size: 13px; } 
 .faq-item.open .faq-answer { padding: 24px 20px; } 
 .faq-answer p { font-size: 14px; } 
 .faq-bottom { margin-top: 40px; } 
 .faq-btn { width: 100%; font-size: 16px; padding: 18px 40px; } 

 /* mo_이용약관 */
 .service .section { padding-top: 24px; } 
 .service .container { padding: 0; } 
 .service .container h2 { margin-bottom: 56px; } 
 .service .terms-content { font-size: 14px; } 
 .service .terms-content h3 { margin-bottom: 16px; font-size: 20px; } 
 .terms-content p { margin-bottom: 20px; } 
 }