/*
 * intr_meal_01.css
 * bzp 사이트 bzp 비플식권 상품 소개 페이지 스타일 (이 화면 전용, 다른 intr_*_01 과 공유하지 않는다)
 * 원안(bzp_식대관리.html)의 인라인 <style> 3블록(head / 섹션5 도입 문의 / RESPONSIVE)을 순서 그대로 옮기고,
 * 모든 선택자를 페이지 루트 클래스 .im01 로 스코프했다(공용 헤더/푸터/퀵네비 영향 방지).
 *   - 원안 body/html 규칙 -> .im01, 원안 * 규칙 -> .im01,.im01 *
 *   - 원안 헤더/푸터/퀵네비 <style> 은 공용 inc_bzp_main_header/footer 가 가지므로 제외
 *   - 문의 영역(s5)도 원안 값 그대로 이 파일에 포함(공용 bizpr_main.css 의존 제거)
 * 사용처: SPTL_PT/web/sp/bizpr/intr_meal_01_view.jsp
 * @History : 20261002, 박소현 - 신규
 *            20261002, 박소현 - 문의 영역(s5) 규칙 제거, 공용 bizpr_main.css 재사용(시안과 다른 값만 덮어씀)
 *            20261002, 박소현 - 원안 대조 재작업: 선택자 .im01 스코프(:where 제거), s5 규칙 원안값 이관(bizpr_main.css 의존 제거),
 *                               원안 임베드 Pretendard @font-face(PretendardMeal), reset.css 함정(table-layout/font/img/font-size) 화면 스코프 보정
 *            20261002, 박소현 - 원안 body 상단 여백(80px, 모바일 64px) 반영(.im01 padding-top)
 */

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

/* ===== 원안 임베드 폰트 ===== */
/* 20261002, 박소현 - 공용 헤더(inc_bzp_main_header.comm.jsp)의 Pretendard 가변폰트(45~920)가 reset.css 의 html *{font-family:Pretendard} 로 전 요소에 적용되어
   글자폭이 원안(정적 400~600 / 601~900 두 벌)과 달라지므로, 원안 base64 폰트 2벌을 파일로 뽑아 화면 전용 이름으로 선언 */
@font-face{font-family:"PretendardMeal";src:url("/font/PretendardMeal-400-600.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap;}
@font-face{font-family:"PretendardMeal";src:url("/font/PretendardMeal-601-900.woff2") format("woff2");font-weight:601 900;font-style:normal;font-display:swap;}

/* ===== 공용 css 함정 보정 (이 화면 스코프) ===== */
/* 20261002, 박소현 - reset.css 의 body{font-size:12px} 를 원안 기본(16px)으로 복원 */
.im01{font-size:16px;}
/* 20261002, 박소현 - reset.css 의 html *{font-family:Pretendard} 가 원안 font-family 지정 목록(h1~button) 밖 요소(section/svg text 등)에도 걸려 가변폰트가 섞이므로 상속으로 통일(원안과 동일) */
.im01 *{font-family:inherit;}
/* 20261002, 박소현 - reset.css 의 table{table-layout:fixed} -> 원안(브라우저 기본 auto). 현재 원안 본문엔 table 이 없으나 추가 대비로 스코프 보정 */
.im01 table{table-layout:auto;}
/* 20261002, 박소현 - reset.css 의 img{vertical-align:top} -> 원안(기본 baseline) */
.im01 img{vertical-align:baseline;}
/* 20261002, 박소현 - content.pc.css 의 .wrap{min-width:1240px;overflow:hidden} 는 원안 본문에 .wrap 이 없고 공용 헤더/푸터도 .wrap 을 쓰지 않아 해당 없음(컨테이너 폭은 원안 인라인 max-width 그대로) */

/* ===== 원안 head <style> (본문 컴포넌트) — .im01 스코프 ===== */
.im01,.im01 *{box-sizing:border-box;}
  /* 20261002, 박소현 - 원안 body 상단 여백(80px, 모바일 64px) 반영(.im01 padding-top). 공용 .site-header 가 fixed 80px 라 section1 이 가려짐 */
  .im01{margin:0;padding-top:80px;background:#ffffff;color:#00003B;line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;}
  @media (max-width:767px){ .im01{padding-top:64px;} }
  .im01,.im01 h1,.im01 h2,.im01 h3,.im01 p,.im01 ul,.im01 li,.im01 span,.im01 b,.im01 a,.im01 div,.im01 button{font-family:"PretendardMeal",system-ui,-apple-system,sans-serif;}
  .im01 a{color:#1A32D8;text-decoration:none;}
  .im01 a:hover{color:#001999;}
  .im01 .fcard{transition:box-shadow .3s cubic-bezier(.2,.7,.2,1),border-color .3s cubic-bezier(.2,.7,.2,1);}
  .im01 .fcard:hover{border-color:#6A88F5;box-shadow:0 4px 6px rgba(20,34,77,.04),0 22px 42px rgba(52,103,255,.16);}
  .im01 .hbtn:hover{background:#001999;}
  .im01 .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;}
  .im01 .tab[aria-selected="true"]{background:#1A32D8;color:#ffffff;font-weight:700;}
  .im01 .scard{transition:box-shadow .3s cubic-bezier(.2,.7,.2,1),border-color .3s cubic-bezier(.2,.7,.2,1),background .3s;}
  .im01 .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){
    .im01 .rtable{grid-template-columns:1fr !important;}
    .im01 .rtable > div{border-right:none !important;border-bottom:1px solid #e7ecf6 !important;}
    .im01 .rtable > [data-c="1"]{order:1;} .im01 .rtable > [data-c="2"]{order:2;} .im01 .rtable > [data-c="3"]{order:3;}
  }
  @media (max-width:900px){
    .im01 .stats{grid-template-columns:1fr !important;}
  }
  @media (max-width:1080px){
    .im01 .cards{grid-template-columns:1fr !important;}
  }
  @media (max-width:640px){
    .im01 .flist{grid-template-columns:1fr !important;}
  }
  @media (max-width:880px){
    .im01 .hero,.im01 .role,.im01 .role-rev,.im01 .cards,.im01 .cta-boxes{grid-template-columns:1fr !important;}
    .im01 .case{grid-template-columns:1fr !important;}
    .im01 .tabs{flex-wrap:wrap;}
    .im01 .tab{flex:1 0 30%;}
  }
  @media (max-width:640px){ .im01 section[data-variant] h1{font-size:30px !important;} }

/* ===== 섹션5 도입 문의 (원안 SECTION 5 <style>) — .im01 스코프 ===== */
.im01 .s5-section,.im01 .s5-section *,.im01 .s5-section *::before,.im01 .s5-section *::after{ box-sizing:border-box; }
  .im01 .s5-section *{ margin:0; padding:0; }
  .im01 .s5-section{
    
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    position:relative;
    width:100%;
    height:680px;
    margin:0 auto;
    padding:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#f0f0f3;   /* 그라데이션 → 단색 (브랜드 토큰 --bg-light 값) */
    overflow:hidden;
  }
  .im01 .s5-cta-wrap{ position:relative; max-width:1184px; width:100%; margin:0 auto; padding:0 32px; }
  .im01 .s5-cta-head{ text-align:center; margin-bottom:60px; }
  .im01 .s5-cta-eyebrow{
    display:inline-block;
    font-size:13px; font-weight:700; letter-spacing:.16em;
    color:#3467ff; text-transform:uppercase; margin-bottom:14px;
  }
  /* ===== 통합 헤드라인 스펙 (섹션2·3·5 공통): 32px / 700 / -.025em / 1.45 / #14224d ===== */
  .im01 .s5-cta-title{
    font-size:32px; font-weight:700; letter-spacing:-.025em;
    color:#14224d; line-height:1.45;
  }
  /* 첫 강조구: 단색 강조 (섹션2·3·5 공통 #2A55EE) */
  .im01 .s5-cta-title .s5-hl{ color:#2A55EE; }
  .im01 .s5-cta-sub{
    margin-top:14px; font-size:16px; font-weight:400; letter-spacing:-.02em;
    color:#4a5878; line-height:1.6;
  }
  .im01 .s5-cta-grid{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
  }
  .im01 .s5-ccard{
    position:relative;
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    padding:52px 28px;
    border-radius:16px;
    background:#ffffff;
    /* 두께는 평상시/hover 동일(1px) — hover 시 색만 바뀌므로 레이아웃 흔들림 없음 — hover 시 색만 바뀌므로 레이아웃 흔들림 없음 */
    border:1px solid #e7ecf6;
    box-shadow:0 2px 4px rgba(20,34,77,.03), 0 12px 28px rgba(20,34,77,.05);
    text-decoration:none; color:inherit;
    /* 카드 hover 통일 스펙: .3s / cubic-bezier(.2,.7,.2,1) — transform 이동 없음 */
    transition:box-shadow .3s cubic-bezier(.2,.7,.2,1), border-color .3s cubic-bezier(.2,.7,.2,1);
  }
  .im01 .s5-ccard-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .im01 .s5-ccard:hover{
    /* 통일: 카드 이동(translateY)·배경색 변화 없음 — 그림자 강화만 */
    box-shadow:0 4px 6px rgba(20,34,77,.04), 0 22px 42px rgba(52,103,255,.16);
  }
  /* 블루 테두리 강조는 흰 배경 카드 2개만 (primary 파란 카드는 제외) */
  .im01 .s5-ccard:not(.s5-is-primary):hover{ border-color:#6A88F5; }   /* #c5d0ff(1.52:1) → #6A88F5(3.25:1) */
  .im01 .s5-ccard-ico{
    flex:none;
    position:absolute; top:42px; right:28px;
    width:50px; height:50px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(140deg,#2cd3e6,#2f6dff);
    box-shadow:0 6px 16px rgba(52,103,255,.26);
  }
  .im01 .s5-ccard-ico svg{ width:25px; height:25px; }
  .im01 .s5-ccard-ico svg path,.im01 .s5-ccard-ico svg rect,.im01 .s5-ccard-ico svg circle{ stroke:#ffffff; }
  .im01 .s5-ccard-title{
    font-size:27px; font-weight:700; letter-spacing:-.035em; color:#14224d;
  }
  .im01 .s5-ccard-desc{
    margin-top:8px;
    font-size:14.5px; font-weight:400; letter-spacing:-.01em;
    color:#566075; line-height:1.5;
    transition:color .3s cubic-bezier(.2,.7,.2,1);
  }
  /* 통일: hover 시 설명문 색상만 진하게 (#566075 → #21222b) */
  .im01 .s5-ccard:hover .s5-ccard-desc{ color:#21222b; }
  .im01 .s5-cta-phone{
    margin-top:60px;
    display:flex; align-items:center; justify-content:center; gap:16px;
    flex-wrap:wrap;
  }
  .im01 .s5-cta-phone-ico{
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#3355E6;   /* 단색 — 섹션4 초대기업 패널(.s4-panel--blue) 중간 스톱 톤 */
    box-shadow:0 6px 16px rgba(52,103,255,.28);
  }
  .im01 .s5-cta-phone-ico svg{ width:23px; height:23px; }
  .im01 .s5-cta-phone-ico svg path{ stroke:#ffffff; }
  .im01 .s5-cta-phone-label{
    font-size:17px; font-weight:600; letter-spacing:-.02em; color:#46506a;
  }
  .im01 .s5-cta-phone-num{
    font-size:42px; font-weight:800; letter-spacing:-.02em;
    color:#333333;
    font-variant-numeric:tabular-nums;
    text-decoration:none; line-height:1;
  }
  .im01 .s5-ccard-arrow{
    margin-top:auto; padding-top:18px;
    display:inline-flex; align-items:center; gap:6px;      /* 통일: 기본 6px */
    font-size:15px; font-weight:600; color:#6b7794;                        /* 통일: 15px */
    transition:color .25s, gap .25s;
  }
  .im01 .s5-ccard-arrow svg{ width:17px; height:17px; transition:transform .25s; }
  .im01 .s5-ccard:hover .s5-ccard-arrow{ color:#1a32d8; gap:9px; }              /* 통일: 6px → 9px */
  .im01 .s5-ccard:hover .s5-ccard-arrow svg{ transform:translateX(3px); }       /* 통일: 3px */
  /* hover 시 텍스트에만 밑줄 (화살표 svg 제외) — 색상 전환으로 부드럽게 */
  .im01 .s5-more-txt{
    text-decoration:underline; text-decoration-color:transparent;
    text-decoration-thickness:1px; text-underline-offset:3px;
    transition:text-decoration-color .25s ease;
  }
  .im01 .s5-ccard:hover .s5-more-txt{ text-decoration-color:#1a32d8; }
  .im01 .s5-ccard.s5-is-primary{
    background:#3355E6;   /* 단색 — 섹션4 초대기업 패널(.s4-panel--blue) 중간 스톱 톤 */
    border:none;
    box-shadow:0 12px 30px rgba(52,103,255,.34);
  }
  .im01 .s5-ccard.s5-is-primary:hover{
    /* y×1.8 blur×1.5 alpha×1.25 (파란빛 그림자 색상 유지) */
    box-shadow:0 22px 45px rgba(52,103,255,.43);
  }
  .im01 .s5-ccard.s5-is-primary .s5-ccard-ico{
    background:rgba(255,255,255,.18);
    box-shadow:none;
  }
  .im01 .s5-ccard.s5-is-primary .s5-ccard-title{ color:#ffffff; text-shadow:0 1px 2px rgba(10,30,120,.22); }
  .im01 .s5-ccard.s5-is-primary .s5-ccard-desc{ color:rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(10,30,120,.18); }
  /* primary 카드는 파란 배경이므로 다크 컬러 대신 흰색 불투명도만 100%로 (.92 → 1) */
  .im01 .s5-ccard.s5-is-primary:hover .s5-ccard-desc{ color:#ffffff; }
  .im01 .s5-ccard.s5-is-primary .s5-ccard-arrow{ color:rgba(255,255,255,.95); }
  .im01 .s5-ccard.s5-is-primary:hover .s5-ccard-arrow{ color:#ffffff; }
  /* primary 카드는 흰 텍스트이므로 밑줄도 흰색 (파란 배경 위 #1a32d8 밑줄은 보이지 않음) */
  .im01 .s5-ccard.s5-is-primary:hover .s5-more-txt{ text-decoration-color:#ffffff; }
  @media (max-width:1350px) {
    .im01 .s5-section{ height:auto; padding:72px 0; }
  }
  @media (max-width:920px) {
    .im01 .s5-cta-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:520px) {
    .im01 .s5-section{ padding:48px 0 52px; }
    .im01 .s5-cta-title{ font-size:24px; }
    .im01 .s5-cta-phone-num{ font-size:34px; }
  }
  /* 카드 텍스트·여백·아이콘을 섹션2 카드 기준으로 축소 (헤딩 18 / 본문 13 / padding 18) */
  @media (max-width:767px) {
    .im01 .s5-ccard{ padding:18px; }
    .im01 .s5-ccard-ico{ top:18px; right:18px; width:36px; height:36px; border-radius:10px; }
    .im01 .s5-ccard-ico svg{ width:18px; height:18px; }
    .im01 .s5-ccard-title{ font-size:18px; }
    .im01 .s5-ccard-desc{ font-size:13px; margin-top:6px; line-height:1.5; }
    .im01 .s5-ccard-arrow{ padding-top:10px; font-size:13px; }
    /* 제목~첫 카드 간격 축소 */
    .im01 .s5-cta-head{ margin-bottom:28px; }
    /* 3번째 카드~전화상담 간격 축소 + 전화상담·번호 한 줄 배치 (번호 축소) */
    .im01 .s5-cta-phone{ margin-top:30px; gap:10px; }
    .im01 .s5-cta-phone-ico{ width:36px; height:36px; }
    .im01 .s5-cta-phone-ico svg{ width:18px; height:18px; }
    .im01 .s5-cta-phone-label{ font-size:15px; }
    .im01 .s5-cta-phone-num{ font-size:20px; font-weight:700; }
  }

  /* ===== 데스크탑(≥1240px) 섹션 높이 685px 통일 (섹션2·3·5 공통) =====
     섹션5는 원래 height 고정형(680px) + flex 세로중앙 정렬 → 685px 로만 변경.
     콘텐츠 417.1px 로 여유 충분(잘림 없음).
     ≤1350px 의 height:auto 규칙보다 뒤에 두어 1240~1350 구간도 685px 로 통일.
     ≤1239px 태블릿/모바일 규칙은 그대로 유지됨. */
  @media (min-width:1240px){
    .im01 .s5-section{ height:685px; padding-top:0; padding-bottom:0; }
  }

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