/*
 * intr_expense_01.css
 * bzp 사이트 bzp 경비지출관리 상품 소개 페이지 스타일
 * 문의 영역(s5) 규칙은 메인 화면 /bzp/css/bizpr_main.css 를 함께 로드해 재사용한다(뷰 JSP 에서 이 파일보다 먼저 link).
 * 원안(bzp_경비지출관리.html)의 인라인 <style> 중 본문/섹션5(도입 문의)/반응형 규칙만 옮겼다.
 * (원안 헤더/푸터/퀵네비 규칙은 공용 inc_bzp_main_header/footer 가 가지므로 제외, 원안 임베드 Pretendard 는 이 화면 전용 PretendardIexp 로 선언)
 * 원안 body/html/a/* 등 전역 규칙은 .ie01 스코프로 한정했다(공용 헤더/푸터 영향 방지).
 * 사용처: SPTL_PT/web/sp/bizpr/intr_expense_01_view.jsp (이 화면 전용, 다른 intr_*_01 과 공유하지 않는다)
 * @History : 20261002, 박소현 - 신규
 *            20261002, 박소현 - 문의 영역(s5) 규칙 제거, 공용 bizpr_main.css 재사용(시안과 다른 값만 덮어씀)
 *            20261002, 박소현 - 원안 임베드 폰트 추출(PretendardIexp), 공용 reset.css 폰트/table/a 색 함정 대응
 *            20261002, 박소현 - 원안 body 상단 여백(80px, 모바일 64px) 반영(.ie01 padding-top)
 */

/* ===== 헤더 (이 화면 한정 보정) ===== */
/* 스크롤 0(.scrolled 없음)에서도 스크롤 상태 헤더(공용 .site-header.scrolled 값과 동일) 유지. 공용 헤더 파일은 수정하지 않음 */
.site-header.hdr-onlight:not(.scrolled){background:#ffffff;box-shadow:0 2px 8px rgba(8,18,60,.08)}

/* ===== 화면 기본 + 본문 컴포넌트 (원안 head <style>, .ie01 스코프) ===== */
/* 20261002, 박소현 - 원안 임베드 Pretendard(woff2 2종, 400~600 / 601~900)를 그대로 추출해 이 화면 전용 PretendardIexp 로 선언(공용 가변 Pretendard 와 자형·메트릭이 달라 굵기가 다르게 보임) */
@font-face{font-family:"PretendardIexp";font-style:normal;font-weight:400 600;font-display:swap;src:url('/font/PretendardIexp-Regular.woff2') format('woff2')}
@font-face{font-family:"PretendardIexp";font-style:normal;font-weight:601 900;font-display:swap;src:url('/font/PretendardIexp-Bold.woff2') format('woff2')}
:where(.ie01) *{box-sizing:border-box;}
@media (max-width:767px){ .ie01{padding-top:64px;} }
/* 20261002, 박소현 - 원안 body{padding-top:80px}(모바일 767px 이하 64px) 이관. 공용 헤더(.site-header)는 fixed 이고 body 여백을 주지 않아 section1 이 헤더 밑에 가려졌음 */
.ie01{margin:0;padding-top:80px;background:#ffffff;color:#00003B;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;}
/* 공용 reset.css:63 'html *, body *{font-family:"Pretendard"}'(특이도 0,0,1)를 이기도록 .ie01 * 로 지정 */
.ie01,.ie01 *{font-family:"PretendardIexp","Pretendard",system-ui,-apple-system,sans-serif;}
/* 전화번호는 모바일만 a(tel) 링크, PC 는 span 텍스트라 hover 색 변화 없음(링크로 오인 방지) */
/* 공용 reset.css:59 table{table-layout:fixed} 대응 - 원안 테이블은 auto(현재 본문에 table 없음, 방어용) */
.ie01 table{table-layout:auto;}
:where(.ie01) .fcard{transition:box-shadow .3s cubic-bezier(.2,.7,.2,1),border-color .3s cubic-bezier(.2,.7,.2,1);}
:where(.ie01) .fcard:hover{border-color:#6A88F5;box-shadow:0 4px 6px rgba(20,34,77,.04),0 22px 42px rgba(52,103,255,.16);}
:where(.ie01) .hbtn:hover{background:#001999;}
:where(.ie01) .tab{flex:1;text-align:center;font-size:14px;padding:11px 8px;border-radius:999px;white-space:nowrap;cursor:pointer;border:none;background:transparent;color:#8B8B8B;font-weight:500;font-family:inherit;}
:where(.ie01) .tab[aria-selected="true"]{background:#1A32D8;color:#ffffff;font-weight:700;}
:where(.ie01) .scard{transition:box-shadow .3s cubic-bezier(.2,.7,.2,1),border-color .3s cubic-bezier(.2,.7,.2,1),background .3s;}
:where(.ie01) .scard:hover{background:#131A63;border-color:#6A88F5;box-shadow:0 3px 5px rgba(0,0,40,.34),0 12px 22px rgba(30,50,140,.26);}
@media (max-width:880px){
  :where(.ie01) .rtable{grid-template-columns:1fr !important;}
  :where(.ie01) .rtable > div{border-right:none !important;border-bottom:1px solid #e7ecf6 !important;}
  :where(.ie01) .rtable > [data-c="1"]{order:1;}
  :where(.ie01) .rtable > [data-c="2"]{order:2;}
  :where(.ie01) .rtable > [data-c="3"]{order:3;}
}
@media (max-width:900px){
  :where(.ie01) .stats{grid-template-columns:1fr !important;}
}
@media (max-width:1080px){
  :where(.ie01) .cards{grid-template-columns:1fr !important;}
}
@media (max-width:640px){
  :where(.ie01) .flist{grid-template-columns:1fr !important;}
}
@media (max-width:880px){
  :where(.ie01) .hero,:where(.ie01) .role,:where(.ie01) .role-rev,:where(.ie01) .cards,:where(.ie01) .cta-boxes{grid-template-columns:1fr !important;}
  :where(.ie01) .case{grid-template-columns:1fr !important;}
  :where(.ie01) .tabs{flex-wrap:wrap;}
  :where(.ie01) .tab{flex:1 0 30%;}
}
@media (max-width:640px){
  :where(.ie01) section[data-variant] h1{font-size:30px !important;}
}

/* ===== 섹션5 도입 문의 — 규칙은 메인 화면 /bzp/css/bizpr_main.css(SECTION 5)를 같이 불러 쓴다. 여기는 시안과 다른 값만 덮는다 ===== */
/* 전화번호 색: 메인은 #3355E6, 시안(bizpr_0002_01~03 과 동일)은 #333333 */
.ie01 .s5-cta-phone-num{color:#333333;}

/* ===== 본문 반응형 (원안 RESPONSIVE, .ie01 스코프) ===== */
@media (max-width:1080px){
  :where(.ie01) section:has(> .hero){height:auto !important;padding:56px 0 0 !important;}
  :where(.ie01) .hero{width:auto !important;max-width:100% !important;height:auto !important;grid-template-columns:1fr !important;gap:32px !important;justify-items:center;text-align:center;}
  :where(.ie01) .hero > div:first-child{margin:0 !important;width:auto !important;max-width:640px;}
  :where(.ie01) .hero > div:nth-child(2):empty{display:none;}
  :where(.ie01) .hero > div:nth-child(2){height:auto !important;width:100%;}
  :where(.ie01) .hero img,:where(.ie01) .hero > [role="img"]{position:static !important;transform:none !important;width:100% !important;max-width:600px !important;height:auto !important;display:block;margin:0 auto;}
  :where(.ie01) .hero > [role="img"]{aspect-ratio:628/471;}
  :where(.ie01) .hero > [role="img"] svg{width:100%;height:100%;}
}
:where(.ie01) .tabs-bar{display:none;position:relative;max-width:880px;height:3px;margin:8px auto 0;background:#E3E5EA;border-radius:3px;overflow:hidden;}
:where(.ie01) .tabs-bar i{position:absolute;top:0;bottom:0;left:0;background:#8B8B8B;border-radius:3px;}
@media (max-width:880px){
  :where(.ie01) .case{gap:20px !important;justify-items:start;}
  :where(.ie01) .case b{white-space:normal !important;}
}
@media (max-width:640px){
  :where(.ie01) section[data-variant]{padding:64px 20px 48px !important;}
  :where(.ie01) section[data-variant] h1 img{height:38px !important;}
  :where(.ie01) section[data-variant] > p{font-size:17px !important;word-break:keep-all;}
  :where(.ie01) .hero > div:first-child > div{font-size:22px !important;line-height:1.5 !important;}
  :where(.ie01) section h2{font-size:23px !important;}
  :where(.ie01) .fcard{padding:26px 22px !important;}
  :where(.ie01) .fcard h3{font-size:20px !important;}
  :where(.ie01) #specLines,:where(.ie01) #mainLines{font-size:19px !important;}
}
@media (max-width:1080px){
  :where(.ie01) .hero img,:where(.ie01) .hero > [role="img"]{margin-bottom:-80px !important;}
}
@media (max-width:880px){
  :where(.ie01) .case{justify-items:center !important;text-align:center;}
  :where(.ie01) .case > div:first-child{width:100%;justify-self:stretch;}
  :where(.ie01) .case b{justify-self:center !important;text-align:center;}
  :where(.ie01) .case{row-gap:8px !important;}
  :where(.ie01) .case > div:first-child{margin-bottom:12px;}
  :where(.ie01) .case li{font-size:15px !important;letter-spacing:-.04em;}
  :where(.ie01) .case li b{font-size:15px !important;}
  :where(.ie01) .case{padding:28px 0 !important;}
  :where(.ie01) .case:last-child{padding-bottom:12px !important;}
  :where(.ie01) section:has(#cases){padding-bottom:36px !important;}
  :where(.ie01) .case ul{justify-self:start;text-align:left;}
}
@media (max-width:767px){
  :where(.ie01) .tabs{position:relative;flex-wrap:nowrap !important;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  :where(.ie01) .tabs::-webkit-scrollbar{display:none;}
  :where(.ie01) .tab{flex:none !important;padding:11px 18px !important;}
}
@media (max-width:400px){
  :where(.ie01) section[data-variant] h1{font-size:26px !important;}
  :where(.ie01) section[data-variant] h1 img{height:32px !important;}
}
@media (max-width:640px){
  :where(.ie01) .h2-pc{display:none !important;}
  :where(.ie01) .h2-mo{display:block !important;}
}
@media (max-width:640px){
  :where(.ie01) .hero > div:first-child > div{display:inline !important;}
  :where(.ie01) .hero > div:first-child > div::after{content:" ";}
}
@media (max-width:640px){
  :where(.ie01) .hero > div:first-child{font-size:22px !important;line-height:1.5 !important;}
}
:where(.ie01) .tabs-track{display:flex;flex:1;gap:4px;min-width:0;}
@media (max-width:767px){
  :where(.ie01) .tabs{display:block !important;background:transparent !important;padding:0 !important;border-radius:0 !important;}
  :where(.ie01) .tabs-track{display:inline-flex;flex:none;width:max-content;background:#EEEEF1;border-radius:999px;padding:6px;gap:4px;vertical-align:top;}
}
@media (max-width:1080px){
  :where(.ie01) .hero img{margin-bottom:-60px !important;}
}