/* ============================================
   pages.css — 서브페이지 공통 (Products / Consulting / About / Contact / Blog)
   common.css 다음에 로드 · 헤더/푸터/색상/변수는 common.css 사용
============================================ */

/* ===== 헤더 활성 메뉴 (현재 페이지 표시) ===== */
.nav-item.active > a{color:var(--sky);}
.nav-item.active > a::after{transform:scaleX(1);}

/* ===== 사진 히어로 (PRODUCTS) — 슬라이드쇼 ===== */
/* 하이닉스식: 헤더 아래 흰 영역 250px(빵부스러기 상단+제목) + 이미지 띠 280px */
.hero-banner{margin-top:var(--header-h);}
.hero-banner .hb-head{max-width:var(--max);margin:0 auto;height:250px;padding:12px 50px 0;
  display:flex;flex-direction:column;justify-content:flex-start;}
.hero-banner h1{color:var(--ink);font-size:48px;font-weight:800;
  letter-spacing:-.5px;line-height:1.1;margin-top:auto;margin-bottom:90px;}
/* === 히어로 부제 - .hb-head.has-sub 스코프 (2026-08-24) === */
.hero-banner .hb-head.has-sub{height:auto;min-height:250px;}
.hero-banner .has-sub h1{margin-bottom:14px;}
.hero-banner .hb-sub{font-size:15px;color:#5a6672;line-height:1.6;margin-bottom:76px;}
@media(max-width:860px){
  .hero-banner .has-sub h1{margin-bottom:8px;}
  .hero-banner .hb-sub{font-size:14px;margin-bottom:28px;}
}
.hero-banner .hb-strip{position:relative;height:280px;overflow:hidden;background:#1b2735;}
.hb-slides{position:absolute;inset:0;z-index:0;}
.hb-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.2s ease;}
.hb-slide.on{opacity:1;}
.hero-banner.hb-parallax .hb-slide{background-attachment:fixed;}

/* ===== 히어로 띠 슬로건 오버레이 (2026-08-25) ===== */
.hero-banner .hb-slogan{
  position:absolute;z-index:1;left:0;right:0;top:50%;transform:translateY(-50%);
  max-width:var(--max);margin:0 auto;padding:0 50px;pointer-events:none;
}
.hero-banner .hb-slogan .bar{width:54px;height:4px;background:#fff;margin:0 0 18px;}
.hero-banner .hb-slogan h2{
  margin:0;color:#fff;font-weight:900;line-height:1.05;
  font-size:clamp(26px,3.2vw,40px);text-transform:uppercase;letter-spacing:-1px;
}
@media(max-width:860px){
  .hero-banner .hb-slogan{padding:0 22px;}
  .hero-banner .hb-slogan .bar{width:40px;height:3px;margin-bottom:12px;}
  .hero-banner .hb-slogan h2{font-size:22px;}
  .hero-banner.hb-parallax .hb-slide{background-attachment:scroll;}
}

/* ===== 콘텐츠 섹션 (제목 + 설명 + 다이어그램 이미지) ===== */
.lc-head .bar{width:54px;height:4px;background:var(--orange);margin-bottom:20px;}
.lc-head h2{font-size:clamp(24px,2.9vw,36px);font-weight:800;letter-spacing:-.7px;color:var(--ink);margin-bottom:14px;}
.lc-head .desc{font-size:clamp(15px,1.2vw,17px);color:var(--ink-soft);line-height:1.8;max-width:1000px;}
.lc-head h3{font-size:18px;font-weight:800;color:var(--ink);margin:28px 0 8px;}
.lc-img{margin-top:40px;text-align:center;}
.lc-img img{width:100%;max-width:1040px;height:auto;display:inline-block;}
.lc-note{font-size:13px;color:#9a9a9a;line-height:1.7;margin-top:18px;max-width:1040px;}

/* ===== MIGRATE & MODERNIZE (가운데 카피) ===== */
.mm{max-width:var(--max);margin:0 auto;padding:30px 50px 0;text-align:center;}
.mm .small{font-size:clamp(16px,1.6vw,22px);font-weight:700;color:var(--ink);margin-bottom:12px;}
.mm .big{font-size:clamp(28px,4vw,48px);font-weight:800;color:var(--sky);letter-spacing:.5px;}

@media(max-width:1024px){.hero-banner .hb-head,.mm{padding-left:22px;padding-right:22px;}}
@media(max-width:860px){.hero-banner .hb-head{height:auto;padding:16px 22px 0;}.hero-banner h1{font-size:32px;margin-top:18px;margin-bottom:36px;}.hero-banner .hb-strip{height:200px;}}

/* ===== 디핑고란? 인포그래픽 (상단 로고/제목 + 좌 박스 / 우 difingo 원형) ===== */
.difingo-info{margin-top:40px;max-width:1040px;}
.difingo-info .di-top{display:block;margin:0 auto 28px;max-width:560px;width:100%;height:auto;}
.difingo-info .di-row{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;}
.difingo-info .di-row img{display:block;width:100%;height:auto;max-width:580px;margin:0 auto;}
@media(max-width:820px){.difingo-info .di-row{grid-template-columns:1fr;}}

/* ===== 아이콘 피처 행 (큰 원 + 스크롤 진입 애니메이션, difingo 등) ===== */
.icon-row{
  display:flex;justify-content:center;align-items:flex-start;flex-wrap:nowrap;gap:24px;
  margin:56px auto 0;max-width:1280px;
}
.ir-item{
  flex:1;min-width:0;max-width:220px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  /* 등장 전 상태 */
  opacity:0;transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.ir-item img{
  width:170px;height:170px;border-radius:50%;object-fit:contain;
  background:#f4f4f4;padding:34px;
  transition:transform .25s, box-shadow .25s;
}
.ir-item span{font-size:clamp(15px,1.3vw,19px);font-weight:800;color:var(--ink);letter-spacing:-.3px;line-height:1.3;}
.ir-item:hover img{transform:scale(1.05);box-shadow:0 18px 36px -18px rgba(0,0,0,.3);}

/* 진입 전 방향별 오프셋: 왼쪽2개 ←, 오른쪽2개 →, 가운데 ↑ */
.ir-item:nth-child(1),.ir-item:nth-child(2){transform:translateX(-60px);}
.ir-item:nth-child(4),.ir-item:nth-child(5){transform:translateX(60px);}
.ir-item:nth-child(3){transform:translateY(-60px);}
/* 화면에 들어오면(.in) 제자리로 */
.icon-row.in .ir-item{opacity:1;transform:none;}
.icon-row.in .ir-item:nth-child(2){transition-delay:.08s;}
.icon-row.in .ir-item:nth-child(3){transition-delay:.16s;}
.icon-row.in .ir-item:nth-child(4){transition-delay:.24s;}
.icon-row.in .ir-item:nth-child(5){transition-delay:.32s;}

@media(max-width:860px){
  .icon-row{flex-wrap:wrap;gap:18px;}
  .ir-item{min-width:130px;max-width:46%;}
  .ir-item img{width:120px;height:120px;padding:24px;}
  /* 모바일은 방향 애니메이션 단순화(아래에서 위로) */
  .ir-item:nth-child(n){transform:translateY(30px);}
  .icon-row.in .ir-item{transform:none;}
}

/* ===== 구성 비교 표 ===== */
.cmp-wrap{margin-top:40px;max-width:1280px;overflow-x:auto;}
.cmp-table{width:100%;min-width:860px;border-collapse:collapse;font-size:15.5px;line-height:1.65;}
.cmp-table th,.cmp-table td{border:1px solid #cccccc;padding:14px 16px;vertical-align:middle;color:var(--ink);text-align:left;}
.cmp-table thead th{background:#4d8bdd;color:#fff;text-align:center;font-weight:700;border-color:#fff;}
.cmp-table .cat{background:#f2f2f2;text-align:center;font-weight:700;}
.cmp-table .sup{text-align:center;font-weight:800;white-space:nowrap;}
@media(max-width:760px){.cmp-table{font-size:12.5px;}.cmp-table th,.cmp-table td{padding:7px 8px;}}

/* ===== 2단 이미지 + 설명 (좌/우 컬럼) ===== */
.feat-2col{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;max-width:1040px;}
.feat-2col .col .desc{margin-bottom:16px;}
.feat-2col .col img{width:100%;height:auto;display:block;}
@media(max-width:820px){.feat-2col{grid-template-columns:1fr;}}

/* ===== {Devpack}N 특징 (좌 사진 / 중앙 도식 / 우 아이콘 3개) ===== */
.feat-info{
  margin-top:40px;max-width:var(--max);
  display:grid;grid-template-columns:1fr 1.5fr 0.9fr;gap:30px;align-items:center;
}
.feat-info .feat-photo{margin:0;text-align:center;}
.feat-info .feat-photo figcaption{margin-bottom:16px;font-size:18px;font-weight:800;color:var(--ink);}
.feat-info .feat-photo img{width:100%;max-width:340px;height:auto;display:inline-block;border-radius:8px;}
.feat-info .feat-center{text-align:center;}
.feat-info .feat-center img{width:100%;height:auto;display:block;}
.feat-info .feat-icons{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:34px;
}
.feat-info .feat-icons li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;}
.feat-info .feat-icons img{width:88px;height:88px;object-fit:contain;}
.feat-info .feat-icons span{font-size:15px;font-weight:700;color:var(--ink);line-height:1.4;}
@media(max-width:900px){
  .feat-info{grid-template-columns:1fr;gap:36px;}
  .feat-info .feat-icons{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:28px;}
  .feat-info .feat-icons li{max-width:200px;}
}

/* ===== OTP 적용방안 / 정보자산 카드 (상단 풀폭 바 배지 + 설명 + 큰 스크린샷) ===== */
.otp-cards{
  margin-top:40px;max-width:1280px;
  display:grid;gap:24px;align-items:stretch;
}
.otp-cards.c3{grid-template-columns:repeat(3,1fr);}
.otp-cards.c4{grid-template-columns:repeat(4,1fr);}
.otp-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;
}
/* 상단 풀폭 바 배지 — 기본(적용방안)은 짙은 회색 */
.otp-card .oc-badge{
  display:block;width:100%;background:#3a3a3a;color:#fff;
  font-size:15px;font-weight:800;text-align:center;line-height:1.3;
  padding:14px 12px;
}
/* 정보자산(c4)은 파란 바 */
.otp-cards.c4 .otp-card .oc-badge{background:#3a8ddd;}
.otp-card .oc-sub{
  font-size:14px;color:var(--ink-soft);line-height:1.7;text-align:center;
  padding:18px 16px 14px;background:#f4f4f4;
}
.otp-card img{width:100%;height:auto;display:block;margin-top:auto;}
@media(max-width:900px){
  .otp-cards.c3,.otp-cards.c4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .otp-cards.c3,.otp-cards.c4{grid-template-columns:1fr;}
}

/* ===== 소제목 (파란 화살표 + 작은 제목, 오렌지 바 없음) ===== */
.lc-head h2.sub-head{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(20px,2vw,26px);font-weight:800;color:var(--ink);
  letter-spacing:-.5px;margin-bottom:14px;
}
.lc-head h2.sub-head::before{
  content:"\25B8";flex:0 0 auto;
  width:24px;height:24px;border-radius:50%;
  background:var(--sky);color:#fff;
  font-size:13px;line-height:24px;text-align:center;
  padding-left:2px;
}

/* ===== 도입의 필요성 (좌 텍스트 3항목 / 우 이미지) ===== */
.need-2col{
  margin-top:40px;max-width:1280px;
  display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start;
}
.need-list{list-style:none;margin:0;padding:0;counter-reset:need;}
.need-list li{counter-increment:need;margin-bottom:28px;padding-left:30px;position:relative;}
.need-list li:last-child{margin-bottom:0;}
.need-list li::before{
  content:counter(need)".";position:absolute;left:0;top:0;
  font-weight:800;color:var(--ink);
}
.need-list .nl-title{font-size:clamp(16px,1.25vw,18px);font-weight:700;color:var(--ink);line-height:1.6;margin:0 0 6px;}
.need-list .nl-desc{font-size:clamp(15px,1.2vw,16px);color:var(--ink-soft);line-height:1.7;margin:0;}
.need-img{text-align:center;}
.need-img img{width:100%;max-width:380px;height:auto;display:inline-block;}
@media(max-width:820px){
  .need-2col{grid-template-columns:1fr;gap:28px;}
  .need-img img{max-width:320px;}
}

/* ===== 모더나이제이션 적용사례 카드 그리드 (로고 + 제목 + note + Devpack 배지) ===== */
.md-cases{margin-top:36px;max-width:1280px;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.md-case{display:flex;flex-direction:column;text-align:center;}
.md-case .mc-logo{
  display:block;width:100%;height:auto;
}
.md-case .mc-body{padding:14px 4px 0;display:flex;flex-direction:column;gap:4px;}
.md-case .mc-title{font-size:15px;font-weight:800;color:var(--ink);line-height:1.4;}
.md-case .mc-note{font-size:13px;color:var(--ink-soft);line-height:1.5;}
.md-case .mc-devpack{display:block;height:15px;width:auto;margin:6px auto 0;}
@media(max-width:1024px){.md-cases{grid-template-columns:repeat(4,1fr);}}
@media(max-width:760px){.md-cases{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.md-cases{grid-template-columns:repeat(2,1fr);}}

/* === modernization SAP/IBM CTA 버튼 === */
.md-cta{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:36px;}
.md-cta-btn{display:inline-block;padding:18px 52px;background:#4d8bdd;color:#fff;
  font-size:18px;font-weight:600;border-radius:6px;text-decoration:none;
  transition:background .2s,transform .2s;}
.md-cta-btn:hover{background:#3a78c8;transform:translateY(-2px);}
@media(max-width:560px){.md-cta{gap:14px;}
  .md-cta-btn{padding:16px 32px;font-size:16px;width:100%;text-align:center;}}

/* === 히어로 eyebrow (큰 h1 위 작은 라벨) === */
.hero-banner .hero-eyebrow{
  color:var(--orange);font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  font-size:clamp(13px,1.1vw,15px);margin-bottom:10px;
}

/* === SAP × difingo 인트로 3-이미지 행 (로고 | 도식 | 로고) === */
.sap-logos{margin-top:40px;max-width:1080px;display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:28px;align-items:center;}
.sap-logos img{display:block;max-width:100%;height:auto;margin:0 auto;}
.sap-logos .sl-logo{max-width:220px;}
@media(max-width:760px){.sap-logos{grid-template-columns:1fr;gap:22px;}}



/* === IBM 버튼 비활성(라이브 404) === */
.md-cta-btn.is-disabled{
  background:#9fbfe0;cursor:default;pointer-events:none;opacity:.7;
}
.md-cta-btn.is-disabled:hover{background:#9fbfe0;transform:none;}

/* === SAP step 번호 라벨 (/ 01 ~ / 05) — 빨강 굵게 + 밑줄 바 === */
.lc-head .e.step-no{
  display:inline-block;color:#cf2e2e;font-weight:800;
  font-size:clamp(18px,1.8vw,24px);letter-spacing:.04em;
  margin-bottom:18px;padding-bottom:10px;position:relative;
}
.lc-head .e.step-no::after{
  content:"";position:absolute;left:0;bottom:0;
  width:54px;height:3px;background:#cf2e2e;
}

/* === SAP 인트로 세로 적층 (로고 위 / 도식 풀폭 아래) === */
.sap-intro{margin-top:40px;max-width:1080px;margin-left:auto;margin-right:auto;text-align:center;}
.sap-intro .sap-logo-top{display:block;max-width:340px;width:60%;height:auto;margin:0 auto 28px;}
.sap-intro .sap-diagram{display:block;width:100%;max-width:1000px;height:auto;margin:0 auto;}
.difingo-logo{display:block;max-width:360px;width:70%;height:auto;margin:0 auto 28px;}
@media(max-width:760px){.sap-intro .sap-logo-top{width:55%;}}

/* === conversion 벤다이어그램 축소 === */
.lc-img.venn img{max-width:620px;}

/* === contact 페이지 (지도 / 약관링크 / 폼 / 연락처 정보) === */
.contact-map{margin-top:40px;max-width:1040px;}
.contact-map iframe{width:100%;height:420px;border:0;display:block;border-radius:8px;}
.contact-policy{margin:18px 0 0;display:flex;gap:24px;flex-wrap:wrap;}
.contact-policy a{color:var(--ink-soft);font-size:14px;text-decoration:none;}
.contact-policy a:hover{color:var(--sky);}
.contact-form{margin-top:32px;max-width:760px;display:grid;gap:18px;}
.contact-form .cf-row{display:flex;flex-direction:column;gap:7px;}
.contact-form label{font-size:14px;font-weight:700;color:var(--ink);}
.contact-form input,.contact-form textarea{
  width:100%;box-sizing:border-box;padding:12px 14px;font-size:15px;
  border:1px solid var(--line);border-radius:6px;font-family:inherit;color:var(--ink);background:#fff;
}
.contact-form textarea{min-height:140px;resize:vertical;}
.contact-form .cf-submit{
  justify-self:start;margin-top:6px;padding:14px 44px;border:0;border-radius:6px;
  background:#4d8bdd;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:background .2s;
}
.contact-form .cf-submit:hover{background:#3a78c8;}
/* 동의 체크박스: cf-row(세로 스택) 대신 인라인 — 체크박스+문구 한 줄, 수직 중앙, 문구는 블록 내 줄바꿈 */
.contact-form .cf-consent{display:flex;align-items:center;gap:8px;}
.contact-form .cf-consent input{width:auto;flex:0 0 auto;padding:0;}
.contact-form .cf-consent span{flex:1 1 auto;min-width:0;}
.contact-info{margin-top:32px;display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--ink);}
.contact-info a{color:var(--sky);text-decoration:none;}

/* === contact 반응형 (모바일) — 끝에 추가, 기존 .contact-* 규칙 미수정 === */
@media(max-width:760px){
  .contact-map{margin-top:28px;}
  .contact-map iframe{height:340px;}
  .contact-policy{gap:16px;}
  .contact-form{margin-top:24px;}
  /* iOS Safari 입력 포커스 시 자동 확대(zoom) 방지: 16px 이상 */
  .contact-form input,.contact-form textarea{font-size:16px;}
  /* 좁은 화면에선 제출 버튼 풀폭(탭 영역 확보) */
  .contact-form .cf-submit{justify-self:stretch;width:100%;text-align:center;}
  .contact-info{margin-top:24px;}
}
@media(max-width:480px){
  .contact-map iframe{height:280px;}
}

/* === blog 목록 (카드 그리드) — 끝에 추가 === */
.blog-grid{margin-top:8px;max-width:1280px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;color:var(--ink);transition:transform .25s ease,box-shadow .25s ease;}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -20px rgba(0,0,0,.3);}
.blog-card .bc-thumb{margin:0;overflow:hidden;background:#f2f2f2;}
.blog-card .bc-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .35s ease;}
.blog-card:hover .bc-thumb img{transform:scale(1.04);}
.blog-card .bc-body{padding:18px 18px 22px;display:flex;flex-direction:column;gap:8px;}
.blog-card .bc-date{font-size:13px;color:#9a9a9a;}
.blog-card .bc-title{font-size:16px;font-weight:800;line-height:1.45;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.blog-card .bc-excerpt{font-size:14px;color:var(--ink-soft);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);gap:22px;}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr;}}

/* === 약관/방침 본문 목록 === */
.pv-list{margin:8px 0 0;padding-left:22px;max-width:1000px;}
.pv-list li{font-size:clamp(15px,1.2vw,17px);color:var(--ink-soft);line-height:1.8;margin-bottom:4px;}

/* === 히어로 빵부스러기 (Home > 현재) — 끝에 추가 === */
.hero-banner .hb-crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14px;color:#666666;margin-bottom:8px;
}
.hero-banner .hb-crumb a{color:#666666;}
.hero-banner .hb-crumb a:hover{text-decoration:underline;}
.hero-banner .hb-crumb .sep{color:#bbb;font-size:12px;}
.hero-banner .hb-crumb .cur{color:#3e3e3e;font-weight:600;}

/* ===== 섹션 제목 바 빨강 (라이브 동일 · 메뉴 밑줄/본문 파랑은 유지) ===== */
.lc-head .bar{background:#cf2e2e;}

/* ===== contact LOCATION 지도 확대 ===== */
.contact-map{
  width:100%;
  max-width:none;     /* 본문 폭 제한 해제 → 섹션 전체폭 사용 */
  margin-top:28px;
}
.contact-map iframe{
  display:block;
  width:100%;
  height:600px;       /* 기존보다 크게 (라이브 높이에 맞춤) */
  border:0;
}
@media (max-width:860px){
  .contact-map iframe{ height:380px; }
}
/* ===== [append] about — 슬로건 다크 띠 + mission/vision 강조 ===== */
/* 슬로건: 풀블리드 다크 배경 + 큰 대문자 흰 글씨 */
.about-slogan{position:relative;}
.about-slogan::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);
  width:100vw;z-index:0;background:#0e0a26;
  background-image:linear-gradient(rgba(8,6,24,.5),rgba(8,6,24,.7)),
    url("../assets/images/about-slogan-bg.jpg");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-attachment:fixed;   /* 스크롤 시 배경 고정(parallax) */
}
.about-slogan > *{position:relative;z-index:1;}
.about-slogan .bar{width:54px;height:4px;background:#fff;margin-bottom:26px;}
.about-slogan h2{
  font-size:clamp(40px,5.5vw,68px);font-weight:900;color:#fff;
  text-transform:uppercase;letter-spacing:-1px;line-height:1.05;margin:0;
}
/* mission / vision: 거대 대문자 */
.about-mv h2{
  font-size:clamp(48px,6vw,84px);font-weight:900;
  text-transform:uppercase;letter-spacing:-1.5px;line-height:1;margin-bottom:18px;
}
.about-mv .desc{font-size:clamp(15px,1.3vw,18px);}
@media(max-width:860px){
  .about-slogan h2{font-size:34px;}
  .about-mv h2{font-size:40px;}
  .about-slogan::before{background-attachment:scroll;}
}

/* blog-post v1.2 — 블로그 상세 본문 여백 보정 (마커: blog-post-v1.2) */
.blog-post .lc-note{margin-top:0;margin-bottom:28px}
.blog-post .bar{margin-top:0}
.blog-post h2{margin-top:48px}
.blog-post .pv-list{margin-bottom:28px}
.blog-post .pv-list{list-style:disc}

/* ===== [M2] 고객사례 — cases.html 전용 (ez2-cs) ===== */
/* 원문(restyler) 규칙을 본체로 옮기며 클래스만 ez2-cs 로 바꿨다.
   색 리터럴 2종(#256ef4 · #222)은 이 블록 안에만 둔다 — R2 토큰화 때 흡수한다.
   #256ef4 는 공통·메인 CSS 에 이미 쓰이는 값이라 새 색이 아니다. */

/* ① 도입 기업 로고 카드 — 5열 */
.ez2-cs-grid{margin-top:36px;max-width:1280px;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;}
.ez2-cs-cell{display:flex;flex-direction:column;padding:20px 14px 18px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  transition:border-color .2s ease, box-shadow .2s ease;}
.ez2-cs-cell:hover{border-color:#256ef4;box-shadow:inset 0 0 0 1px #256ef4;}
.ez2-cs-clogo{height:96px;display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;}
.ez2-cs-clogo img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.ez2-cs-cname{font-size:15px;font-weight:700;letter-spacing:-.3px;color:var(--ink);
  text-align:center;margin-bottom:6px;}
.ez2-cs-cdesc{font-size:13.5px;line-height:1.55;color:#222;text-align:center;}

/* ② 레퍼런스 카드 — 세로 배치. 연혁 앵커로 이동 */
.ez2-cs-label{display:flex;align-items:center;gap:10px;margin-top:32px;
  font-size:15px;font-weight:700;letter-spacing:1px;color:#256ef4;}
.ez2-cs-dot{width:8px;height:8px;border-radius:50%;background:#256ef4;}
.ez2-cs-refs{margin-top:16px;max-width:1280px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.ez2-cs-ref{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease;}
.ez2-cs-ref:hover{border-color:#256ef4;box-shadow:inset 0 0 0 1px #256ef4;}
.ez2-cs-rlogo{width:100%;height:150px;display:flex;align-items:center;
  justify-content:center;padding:12px;border-bottom:1px solid var(--line);}
.ez2-cs-rlogo img{max-width:100%;max-height:100%;object-fit:contain;}
.ez2-cs-rfb{display:none;font-size:26px;font-weight:800;letter-spacing:-.5px;color:#0067ac;}
.ez2-cs-rbody{flex:1;display:flex;flex-direction:column;gap:18px;padding:20px 24px 22px;}
.ez2-cs-rdesc{margin:0;font-size:15px;line-height:1.65;color:var(--ink);}
.ez2-cs-rmeta{margin-top:auto;display:flex;align-items:center;gap:10px;font-size:15px;}
.ez2-cs-rname{font-weight:600;color:#222;letter-spacing:-.2px;}
.ez2-cs-vbar{width:1px;height:13px;background:#cdd1d5;display:inline-block;}
.ez2-cs-rtag{font-weight:700;color:#256ef4;}

/* ③④⑥ 연혁 — 좌측 축 + 카드 + 메타 줄 */
.ez2-cs-tl{position:relative;margin-top:46px;max-width:1280px;padding-left:34px;}
.ez2-cs-tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;
  background:var(--line);}
.ez2-cs-yr{position:relative;padding:6px 0 18px 24px;font-size:26px;font-weight:800;
  letter-spacing:-.5px;color:var(--ink);}
.ez2-cs-yr::before{content:"";position:absolute;left:-32px;top:16px;width:16px;height:16px;
  border-radius:50%;background:#256ef4;box-shadow:0 0 0 4px rgba(37,110,244,.15);}
.ez2-cs-item{position:relative;padding:0 0 42px 24px;
  scroll-margin-top:calc(var(--header-h) + 20px);}
.ez2-cs-item:last-child{padding-bottom:6px;}
.ez2-cs-item::before{content:"";position:absolute;left:-32px;top:5px;width:16px;height:16px;
  border-radius:50%;background:#fff;border:3px solid #256ef4;
  box-shadow:0 0 0 4px rgba(37,110,244,.12);}
.ez2-cs-card{margin-top:10px;padding:24px 26px;background:var(--section-bg);
  border:1px solid var(--line);border-radius:12px;
  transition:box-shadow .3s ease, border-color .3s ease;}
.ez2-cs-card:hover{border-color:#256ef4;box-shadow:inset 0 0 0 1px #256ef4;}
.ez2-cs-tag{display:inline-block;font-size:15px;font-weight:700;letter-spacing:1.2px;
  color:#256ef4;background:rgba(37,110,244,.10);border-radius:999px;
  padding:4px 12px;margin-bottom:10px;}
.ez2-cs-card h3{margin:0 0 8px;font-size:20px;font-weight:700;letter-spacing:-.5px;
  color:var(--ink);line-height:1.35;}
.ez2-cs-card p{margin:0;font-size:15px;line-height:1.7;color:#222;}
.ez2-cs-meta{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:15px;font-weight:600;color:#222;letter-spacing:.1px;}
.ez2-cs-ing{color:#256ef4;}

/* ⑤ 성과 요약 — 카드가 아니라 구분선으로 나눈 한 덩어리 */
.ez2-cs-stats{margin-top:36px;max-width:1280px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));}
.ez2-cs-stat{text-align:center;padding:26px 24px;}
.ez2-cs-stat + .ez2-cs-stat{border-left:1px solid var(--line);}
.ez2-cs-num{font-size:clamp(46px,5vw,60px);font-weight:700;line-height:1;
  letter-spacing:-2.5px;color:#256ef4;}
.ez2-cs-unit{font-size:.48em;font-weight:700;letter-spacing:-.5px;margin-left:3px;}
.ez2-cs-lab{margin-top:14px;font-size:17px;font-weight:600;color:var(--ink);}
.ez2-cs-sub{margin-top:5px;font-size:15px;color:#222;}

@media(max-width:1024px){
  .ez2-cs-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
  .ez2-cs-refs{gap:14px;}
  .ez2-cs-rlogo{height:120px;}
}
@media(max-width:768px){
  .ez2-cs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .ez2-cs-cell{padding:16px 10px 14px;}
  .ez2-cs-clogo{height:72px;}
  .ez2-cs-refs{grid-template-columns:minmax(0,1fr);}
  .ez2-cs-rlogo{height:130px;}
  .ez2-cs-tl{padding-left:26px;}
  .ez2-cs-item{padding-left:16px;}
  .ez2-cs-card{padding:20px 18px;}
  .ez2-cs-yr{font-size:22px;}
  .ez2-cs-stats{grid-template-columns:minmax(0,1fr);}
  .ez2-cs-stat + .ez2-cs-stat{border-left:none;border-top:1px solid var(--line);}
}
/* 로고 그리드 그룹 라벨 — 원문의 muted 변형 */
.ez2-cs-label--muted{color:#222;}
.ez2-cs-label--muted .ez2-cs-dot{background:#222;}
.ez2-cs-cnt{color:#222;font-weight:600;letter-spacing:0;}
/* ===== [M2] 고객사례 끝 ===== */

/* [M2-U3A] mega css — main.css 이식 */
/* pages 는 main.css 를 로드하지 않는다. 메가 레이아웃 규칙이 그쪽에만 있어
   마크업만 바꾸면 무너지므로 규칙을 먼저 옮겨 둔다.
   원문은 main.css 와 같고, 그 파일 :root 전용 토큰 6종만 2단계 폴백을 준다.
   공통 CSS 에 있는 토큰(line·ink·ink-soft·bg·max·sky)은 그대로 쓴다.
   ※ main.css 는 손대지 않는다. 같은 규칙이 두 곳에 있게 되며,
      index 는 main.css 를, 하위 페이지는 이 블록을 쓴다. */

/* 공통 CSS 의 메가 규칙(고정 위치·그림자·여백·전환)을 상속하고
   여기서는 배경과 레이아웃만 덮는다. */
.ez3-mega{
  --ez3-mega-line:var(--line);
  background:var(--k-gray-5, #f5f6f7);
  box-shadow:none;
}
/* 열림 = hover + focus-within (공통 규칙은 hover 만 — 접근성 보강) */
.nav-item:focus-within .ez3-mega{opacity:1;visibility:visible;transform:translateY(0);}

/* 안쪽 래퍼의 flex 중앙 정렬을 grid 로 덮는다 (병기 요소라 뒤 선언이 승리) */
.ez3-mega-in{display:grid;
  grid-template-columns:220px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  max-width:var(--max);margin:0 auto;
  gap:0;align-items:stretch;text-align:left;}

.ez3-mega-intro{background:transparent;
  padding:4px 24px 6px 0;display:flex;flex-direction:column;gap:10px;}
.ez3-mega-intro h5{margin:0;font-size:18px;font-weight:700;line-height:1.45;color:var(--ink);}
.ez3-mega-intro p{margin:0;font-size:14px;line-height:1.7;color:var(--ink-soft);}

/* 좌측 CTA — 히어로 주 버튼과 같은 시각.
   셀렉터를 겹쳐 쓴 이유: 공통 CSS 의 메가 링크 규칙이 클래스1+요소1 이라
   클래스1 뿐인 규칙보다 우선해 글자·여백·모서리를 덮는다.
   hover 글자색을 명시하는 것도 그 규칙을 넘기 위해서다. */
.mega a.ez3-mega-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;height:52px;padding:0 28px;border-radius:var(--ez2-r-btn, 6px);
  border:1px solid transparent;
  align-self:flex-start;   /* 세로 flex 부모의 교차축 stretch 를 끊어 내용 폭으로 */
  font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;
  background:var(--k-primary, #256ef4);color:var(--bg);
  transition:background .18s ease,border-color .18s ease,color .18s ease;}
.mega a.ez3-mega-cta:hover{background:var(--k-primary-60, #0b50d0);color:var(--bg);}
/* 포커스 아웃라인 — main.css 에서는 히어로 버튼과 한 그룹이라 여기서는 단독으로 둔다 */
.mega a.ez3-mega-cta:focus-visible{outline:2px solid var(--k-primary, #256ef4);outline-offset:2px;}

/* 칼럼 구분선 — 가로선. 헤더 아래 1선 + 항목 사이 선 */
.ez3-mega-col{padding:4px 24px;border-left:0;min-width:0;}
.ez3-mega-col li + li > a{border-top:1px solid var(--ez3-mega-line);}
.ez3-mega-col h6{margin:0 0 10px;padding-bottom:10px;font-size:13px;font-weight:700;
  letter-spacing:.08em;color:var(--k-gray-40, #8a949e);
  border-bottom:1px solid var(--ez3-mega-line);}
.ez3-mega-col ul{list-style:none;margin:0;padding:0;}
/* 공통 CSS 의 메가 링크 여백을 칼럼용으로 덮는다 */
.ez3-mega-col li > a{display:block;padding:10px 10px;margin:0 -10px;
  max-width:290px;   /* 설명 13px 기준 약 22자/줄 — 콘텐츠 폭 305px 대비 억제 */
  border-radius:8px;font-size:16px;font-weight:700;color:var(--ink);white-space:normal;}
.ez3-mega-col li > a:hover{color:var(--sky);}
.ez3-mega-col li > a span{display:block;margin-top:3px;
  font-size:13.5px;font-weight:400;line-height:1.6;color:var(--k-gray-50, #6d7882);}

@media(max-width:1024px){
  .ez3-mega-in{grid-template-columns:190px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}
}
/* [M2-U3A:END] */

/* [M2-S3] AI 사례 — 서사 3단 .case-* (ai-reference 원문 이식) */
/* reveal JS·mod-panel 을 이식하지 않았다. 등장 연출과 활성 상태 계열은
   함께 빼야 한다 — 남기면 카드가 영영 안 보이거나 눌리지 않는 링크가 남는다.
   색은 restyler/css/common.css 실측값을 리터럴로 넣었다(본체는 그 CSS 를 로드하지 않는다). */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.case-card{background:#fff;border:1px solid #e5e5ea;border-radius:16px;padding:34px 32px;}
.case-card[data-mod="0"]{--sc:#256ef4;}
.case-card[data-mod="1"]{--sc:#8e44ad;}
.case-card[data-mod="2"]{--sc:#27ae60;}
.case-top{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.case-tag{font-size:12px;font-weight:700;letter-spacing:1.2px;color:var(--sc,var(--k-primary,#256ef4));white-space:nowrap;}
.case-bar{flex:1;height:3px;border-radius:3px;background:var(--sc,var(--k-primary,#256ef4));}
.case-card h3{font-size:21px;font-weight:700;letter-spacing:-.5px;line-height:1.35;color:#111;margin-bottom:12px;}
.case-card p{font-size:15px;line-height:1.7;color:#222;}
.case-metric{margin-top:22px;padding-top:18px;border-top:1px solid #e5e5ea;font-size:32px;font-weight:800;letter-spacing:-.5px;color:var(--k-primary,#256ef4);font-variant-numeric:tabular-nums;}
.case-metric span:last-child{font-size:15px;font-weight:600;color:#222;margin-left:8px;letter-spacing:0;}
@media(max-width:768px){.case-grid{grid-template-columns:1fr;}}
/* [M2-S3b] 통계·시뮬레이터·ROI — ai-reference 원문 이식 */
/* 색은 restyler/css/common.css 실측값 리터럴. 본체는 그 CSS 를 로드하지 않는다.
   .sim-track .bar 의 margin:0 은 본체 .lc-head .bar 의 margin-bottom 차단용이다. */
.sim-box{margin-top:56px;background:#f7f7f9;border:1px solid #e5e5ea;border-radius:16px;padding:34px 34px 38px;}
.sim-title{font-size:20px;font-weight:700;letter-spacing:-.4px;color:#111;margin-bottom:6px;}
.sim-sub{font-size:15px;color:#222;margin-bottom:24px;max-width:760px;line-height:1.7;}
.sim-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px;align-items:stretch;}
.sim-panel{background:#fff;border:1px solid #e5e5ea;border-radius:14px;padding:22px 22px 24px;display:flex;flex-direction:column;}
.sim-panel h4{font-size:14px;font-weight:700;color:#111;margin-bottom:14px;letter-spacing:-.2px;}
.sim-field{margin-bottom:14px;}
.sim-field label{display:block;font-size:12px;font-weight:600;color:#222;margin-bottom:6px;}
.sim-field input, .sim-field select{width:100%;box-sizing:border-box;background:#fff;border:1px solid #e5e5ea;border-radius:9px;padding:10px 12px;font-size:13px;font-weight:500;color:#111;font-family:inherit;}
.sim-field input:disabled{background:#f7f7f9;color:#222;font-weight:600;}
.sim-field select{cursor:pointer;}
.sim-actions{margin-top:auto;padding-top:18px;border-top:1px solid #e5e5ea;display:flex;flex-direction:column;gap:10px;}
.sim-run{width:100%;height:48px;background:#256ef4;color:#fff;border:none;border-radius:11px;padding:0 16px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .2s ease, transform .1s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.sim-run:hover:not(:disabled){background:#0b50d0;}
.sim-run:active:not(:disabled){transform:translateY(1px);}
.sim-run:disabled{background:#8a949e;cursor:not-allowed;}
.sim-run .spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:simSpin .7s linear infinite;}
.sim-reset{width:100%;height:48px;background:#fff;border:1px solid #e5e5ea;color:#222;border-radius:11px;padding:0 16px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s ease, color .2s ease, border-color .2s ease;display:inline-flex;align-items:center;justify-content:center;}
.sim-reset:hover:not(:disabled){background:#f7f7f9;}
.sim-reset:disabled{background:#e6e8ea;border-color:#cdd1d5;color:#8a949e;cursor:not-allowed;}
.sim-term{background:#0c1222;border:1px solid #1e293b;border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;min-height:420px;box-shadow:0 12px 30px rgba(8,14,30,.28);}
.sim-term-bar{display:flex;align-items:center;justify-content:space-between;padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid #1e293b;}
.sim-dots{display:flex;align-items:center;gap:7px;}
.sim-dots i{width:11px;height:11px;border-radius:50%;display:block;}
.sim-dots i:nth-child(1){background:#ef5f56;}
.sim-dots i:nth-child(2){background:#f6bd3b;}
.sim-dots i:nth-child(3){background:#5cc65b;}
.sim-dots .tlabel{margin-left:8px;font-size:11px;color:#5b6b82;letter-spacing:.3px;}
.sim-status{font-size:11px;font-weight:600;color:#63b3ed;background:rgba(37,110,244,.14);border:1px solid rgba(37,110,244,.3);padding:3px 10px;border-radius:6px;}
.sim-log{flex:1;overflow-y:auto;max-height:300px;padding-right:6px;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:12.5px;line-height:1.75;display:flex;flex-direction:column;gap:7px;text-align:left;scrollbar-width:thin;scrollbar-color:#334155 transparent;}
.sim-log::-webkit-scrollbar{width:6px;}
.sim-log::-webkit-scrollbar-thumb{background:#334155;border-radius:3px;}
.sim-log .ln{color:#cbd5e1;}
.sim-log .ln.muted{color:#64748b;}
.sim-log .ln.info{color:#cbd5e1;}
.sim-log .ln.s1{color:#6cb8ee;}
.sim-log .ln.s2{color:#c79fe8;}
.sim-log .ln.s3{color:#63d693;}
.sim-log .ln.success{color:#4ade80;font-weight:700;}
.sim-log .ln.error{color:#f87171;}
.sim-progress{border-top:1px solid #1e293b;padding-top:12px;margin-top:12px;}
.sim-steps{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.sim-steps .st{display:flex;align-items:center;gap:6px;font-size:11px;color:#64748b;}
.sim-steps .st .dot{width:9px;height:9px;border-radius:50%;background:#334155;transition:background .3s ease, box-shadow .3s ease;}
.sim-steps .st[data-sc="1"]{--sc:#4da3e0;}
.sim-steps .st[data-sc="2"]{--sc:#b06fd8;}
.sim-steps .st[data-sc="3"]{--sc:#3ecf7f;}
.sim-steps .st.on .dot{background:var(--sc,#4ade80);box-shadow:0 0 0 3px rgba(255,255,255,.12);box-shadow:0 0 0 3px color-mix(in srgb, var(--sc,#4ade80) 22%, transparent);}
.sim-steps .st.on{color:var(--sc,#94a3b8);font-weight:600;}
.sim-time{font-size:11px;color:#64748b;margin-left:auto;}
.sim-track{height:4px;border-radius:4px;background:#1e293b;margin-top:12px;overflow:hidden;}
.sim-track .bar{height:100%;width:0;border-radius:4px;background:#256ef4;transition:width .5s cubic-bezier(.22,1,.36,1), background-color .4s ease;margin:0;}
.roi-box{margin-top:56px;background:#f7f7f9;border:1px solid #e5e5ea;border-radius:16px;padding:34px 34px 38px;}
.roi-title{font-size:20px;font-weight:700;letter-spacing:-.4px;color:#111;margin-bottom:6px;}
.roi-sub{font-size:15px;color:#222;margin-bottom:24px;}
.roi-presets{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.roi-presets button{padding:9px 18px;border-radius:999px;border:1px solid #e5e5ea;background:#fff;font-size:14px;font-weight:600;color:#111;cursor:pointer;transition:all .2s ease;font-family:inherit;}
.roi-presets button:hover{border-color:#256ef4;color:#256ef4;}
.roi-presets button.on{background:#256ef4;border-color:#256ef4;color:#fff;}
.roi-slider{width:100%;accent-color:#256ef4;margin:6px 0 26px;}
.roi-bars{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;}
.roi-bar-row{display:grid;grid-template-columns:120px 1fr 150px;align-items:center;gap:14px;}
.roi-bar-row .rb-lbl{font-size:14px;font-weight:600;color:#222;}
.roi-bar-track{height:26px;border-radius:8px;background:#eef1f6;overflow:hidden;}
.roi-bar-fill{height:100%;border-radius:8px;transition:width .5s cubic-bezier(.22,1,.36,1);}
.roi-bar-fill.manual{background:#94a3b8;}
.roi-bar-fill.ai{background:#256ef4;}
.roi-bar-row .rb-val{font-size:15px;font-weight:700;color:#111;font-variant-numeric:tabular-nums;text-align:right;}
.roi-result{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:22px;border-top:1px solid #e5e5ea;}
.roi-result .rr{text-align:center;}
.roi-result .rr .v{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.8px;color:#256ef4;font-variant-numeric:tabular-nums;}
.roi-result .rr .v.mut{color:#111;}
.roi-result .rr .k{margin-top:4px;font-size:14px;font-weight:600;color:#222;}
.ai-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
.ai-stat{background:#fff;border:1px solid #e5e5ea;border-radius:14px;padding:26px 24px;text-align:center;}
.ai-stat .num{font-size:clamp(30px,3.4vw,42px);font-weight:800;letter-spacing:-1px;color:var(--k-primary,#256ef4);font-variant-numeric:tabular-nums;line-height:1.1;}
.ai-stat .num span{font-size:.5em;font-weight:700;color:#222;margin-left:4px;letter-spacing:0;}
.ai-stat .lbl{margin-top:8px;font-size:15px;font-weight:600;color:#222;}
.ai-note{margin-top:18px;font-size:15px;line-height:1.6;color:#222;}
@keyframes simSpin { to { transform:rotate(360deg); } }
@media(max-width:768px){
  .sim-box{padding:24px 20px 28px;}
  .sim-grid{grid-template-columns:1fr;}
  .sim-term{min-height:360px;}
  .sim-steps{gap:10px;}
  .roi-box{padding:24px 20px 28px;}
  .roi-bar-row{grid-template-columns:86px 1fr 110px;}
  .roi-result{grid-template-columns:1fr;gap:12px;}
  .ai-stats{grid-template-columns:1fr;gap:14px;}
}
/* [M2-S3b:END] */
/* [M2-S3:END] */

/* [M2-S4] 고객사례 메가 — 비링크 항목 + 2칼럼 트랙 */
/* 비링크 항목(사례 미확보)이라 a 가 없다. 항목 스타일은 전부
   .ez3-mega-col li > a 에 걸려 있어 그대로 두면 라벨과 부제가 한 줄로 붙는다.
   값은 그 규칙에서 복제하되 hover 는 주지 않는다 — 눌리지 않으니 반응도 없어야 한다.
   :has() 대신 --c2 메가의 마지막 칼럼으로 범위를 좁혀 서비스 메가에 닿지 않게 한다. */
/* 인트로 + 칼럼 2 = 3트랙. 기본·@1024 각각의 트랙 값을 그대로 줄인다. */
.ez3-mega-in.ez3-mega-in--c2{grid-template-columns:220px minmax(0,1fr) minmax(0,1fr);}
@media(max-width:1024px){
  .ez3-mega-in.ez3-mega-in--c2{grid-template-columns:190px minmax(0,1fr) minmax(0,1fr);}
}
/* [M2-S4:END] */

/* [U7-1R] 오시는 길 — pages/about/location.html (ez2-loc) */
/* breadcrumb·h1 은 .hero-banner 골격이 대신한다(U7-2). */
.ez2-loc-map{margin-top:28px;max-width:1280px;border:1px solid var(--line);
  border-radius:var(--ez2-r-btn,6px);overflow:hidden;line-height:0;}
.ez2-loc-map iframe{display:block;width:100%;height:420px;border:0;}
.ez2-loc-info{margin-top:32px;max-width:1280px;border-top:2px solid var(--ink);}
.ez2-loc-row{display:flex;align-items:baseline;padding:16px 4px;
  border-bottom:1px solid var(--line);font-size:16px;}
.ez2-loc-lab{flex:0 0 130px;font-size:15px;color:var(--k-gray-50, #6d7882);}
.ez2-loc-val{min-width:0;color:var(--ink);}
.ez2-loc-val a{color:var(--k-primary, #256ef4);}
.ez2-loc-note{margin-left:10px;font-size:13px;color:var(--k-gray-40, #8a949e);}
/* 지하철 3호선 표기색 — 브랜드색이 아니라 노선 고유색이라 리터럴로 둔다 */
.ez2-badge-line{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:#ef7c1c;color:#fff;
  font-size:12px;font-weight:700;margin-right:8px;vertical-align:-3px;}
@media(max-width:768px){
  .ez2-loc-map iframe{height:320px;}
  .ez2-loc-row{font-size:15px;padding:14px 2px;flex-wrap:wrap;}
  .ez2-loc-lab{flex:0 0 92px;font-size:14px;}
  .ez2-loc-note{display:block;margin:4px 0 0 0;flex-basis:100%;}
}
/* [U7-1R:END] */

/* [U7-2A] 회사소개 메가 1칼럼 — 2트랙 변형 */
/* 인트로 + 칼럼 1 = 자식 2개다. --c2(3트랙) 를 쓰면 오른쪽 1트랙이 빈다.
   값은 --c2 원문에서 앞 2개만 잘라 왔다 — 맨 1fr 은 minmax(auto,1fr) 이라
   메가 폭 폭주가 되살아나므로 minmax(0,1fr) 을 그대로 유지한다.
   비링크 항목 규칙(:last-child 2종)은 --c2 전용이라 여기서 건드리지 않는다. */
.ez3-mega-in.ez3-mega-in--c1{grid-template-columns:220px minmax(0,1fr);}
@media(max-width:1024px){
  .ez3-mega-in.ez3-mega-in--c1{grid-template-columns:190px minmax(0,1fr);}
}
/* [U7-2A:END] */

/* [U7-2B] 메가 비링크 항목 — 링크 항목과 같은 시각, hover 없음 */
/* 항목 스타일이 전부 li > a 에 걸려 있어 비링크 항목은 아무것도 못 받는다.
   값은 그 규칙에서 복제하되 hover 는 주지 않는다 — 눌리지 않으니 반응도 없어야 한다.
   --c2 :last-child 로 칼럼을 통째로 잡던 방식은 실링크가 섞인 칼럼에서
   li 와 그 안 a 가 padding 을 이중으로 받아 못 쓴다. 항목 단위로 거른다. */
.ez3-mega-col li:not(:has(> a)){display:block;padding:10px 10px;margin:0 -10px;max-width:290px;border-radius:8px;font-size:16px;font-weight:700;color:var(--ink);white-space:normal;}
.ez3-mega-col li:not(:has(> a)) > span{display:block;margin-top:3px;font-size:13.5px;font-weight:400;line-height:1.6;color:var(--k-gray-50, #6d7882);}
/* 구분선도 a 가 있어야 걸린다 — 비링크 앞줄만 선이 끊기지 않게 같은 값을 준다. */
.ez3-mega-col li + li:not(:has(> a)){border-top:1px solid var(--ez3-mega-line);}
/* [U7-2B:END] */

/* MEGA-IA:START — 메가 IA v1 (2026-08-31) · _dev/mockups/mega-ia-v1.html
   main.css 와 같은 규칙. 이 파일 관례대로 :root 전용 토큰에만 폴백을 준다. */
.ez3-mega-col .ez3-mega-more{display:block;margin:0 -10px;padding:10px 10px;border-bottom:1px solid var(--ez3-mega-line);
  font-size:14px;font-weight:700;color:var(--k-gray-50, #6d7882);}
.ez3-mega-col .ez3-mega-more:hover{color:var(--sky);}
.ez3-mega-col .ez3-mega-h6-2{margin-top:26px;}
/* MEGA-IA:END */

/* [U7-4] CI 페이지 — pages/about/ci.html (ci-*) */
/* 자산 미확보 구간은 점선 박스로 자리만 잡는다. 경계는 점선 테두리가 담당한다. */
.ci-symbol{margin-top:28px;max-width:1280px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start;}
.ci-symbol-text h3{margin:0 0 10px;font-size:20px;font-weight:700;color:var(--ink);}
.ci-symbol-text p{margin:0;font-size:15px;line-height:1.8;color:var(--ink-soft);}
.ci-stage{display:flex;align-items:center;justify-content:center;min-height:220px;
  border:1px dashed var(--line);border-radius:var(--ez2-r-btn,6px);
  background:#fff;}
.ci-stage--dark{background-color:#101828;border-color:#2a3444;}
.ci-stage--dark .ci-ph{color:#8a949e;}
.ci-ph{padding:8px 14px;border-radius:var(--ez2-r-btn,6px);background:rgba(255,255,255,.86);
  font-size:15px;font-weight:600;color:var(--k-gray-50, #6d7882);}
.ci-sig{margin-top:28px;max-width:1280px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.ci-sig-item{min-width:0;}
.ci-cap{margin-top:10px;font-size:15px;font-weight:600;color:var(--ink);}
.ci-color{margin-top:28px;max-width:1280px;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.ci-chip{min-width:0;display:flex;gap:18px;padding:18px;background:#fff;
  border:1px solid var(--line);border-radius:var(--ez2-r-btn,6px);}
.ci-swatch{flex:none;width:96px;height:96px;border-radius:var(--ez2-r-btn,6px);
  border:1px solid var(--line);}
.ci-chip-body{min-width:0;}
.ci-chip-body h3{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--ink);}
.ci-spec{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:2px 12px;font-size:15px;}
.ci-spec dt{color:var(--k-gray-50, #6d7882);}
.ci-spec dd{margin:0;color:var(--ink);}
.ci-note{margin:10px 0 0;font-size:15px;color:var(--k-gray-50, #6d7882);}
.ci-rule{margin-top:28px;max-width:1280px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.ci-rule-item{min-width:0;padding:20px 18px;background:#fff;
  border:1px solid var(--line);border-radius:var(--ez2-r-btn,6px);}
.ci-rule-item h3{margin:0 0 8px;font-size:16px;font-weight:700;color:var(--ink);}
/* 다운로드 버튼 — 원본 미확보라 전부 비활성. a 가 아니라 span 이다(죽은 링크 0). */
.ci-dl-btn{display:inline-block;margin:0 8px 8px 0;padding:8px 16px;
  border:1px solid var(--line);border-radius:var(--ez2-r-btn,6px);
  font-size:15px;font-weight:600;color:var(--k-gray-40, #8a949e);
  background:var(--k-gray-5, #f5f6f7);cursor:not-allowed;}
@media(max-width:1024px){
  .ci-rule{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:768px){
  .ci-symbol{grid-template-columns:minmax(0,1fr);}
  .ci-sig{grid-template-columns:minmax(0,1fr);}
  .ci-color{grid-template-columns:minmax(0,1fr);}
  .ci-rule{grid-template-columns:minmax(0,1fr);}
  .ci-chip{flex-direction:column;}
  .ci-swatch{width:100%;height:72px;}
}
/* [U7-4:END] */
/* ===== [U9-D1] 고객사례 허브 D형 히어로 ===== */
/* 상하 여백은 .ez2-dh, 좌우 거터는 .ez2-dh-in 이 단독 소유한다.
   padding 단축을 쓰면 좌우가 0 으로 초기화되므로 방향별로만 선언한다. */
.ez2-dh{
  background:linear-gradient(135deg,#0B2545 0%,#1B4E8F 55%,#256EF4 100%);
  padding-top:calc(var(--header-h,84px) + 46px);
  padding-bottom:42px;
}
.ez2-dh-in{max-width:var(--max);margin:0 auto;padding-left:50px;padding-right:50px;}
.ez2-dh-crumb{font-size:13px;color:rgba(255,255,255,.6);margin:0 0 18px;}
.ez2-dh-crumb a{color:rgba(255,255,255,.6);}
.ez2-dh-crumb .sep{color:rgba(255,255,255,.34);}
.ez2-dh-crumb .cur{color:rgba(255,255,255,.92);}
.ez2-dh h1{color:#fff;font-size:38px;font-weight:800;letter-spacing:-1px;margin:0 0 10px;}
.ez2-dh-lead{color:rgba(255,255,255,.82);font-size:15.5px;line-height:1.7;margin:0;max-width:780px;}
/* 히어로 그라디언트 종점이 #256EF4 라 hover 테두리가 배경에 묻힌다(대비 1.00:1).
   허브 히어로 안에서만 흰색으로 덮는다 — 원 규칙(pages.css:414)은 무수정. */
.ez2-dh .ez2-cs-ref:hover{border-color:#fff;}
@media(max-width:1024px){ .ez2-dh-in{padding-left:22px;padding-right:22px;} }
@media(max-width:768px){ .ez2-dh h1{font-size:27px;} }
/* [U9-D1:END] */
/* ===== MDZ-C:START — 모더나이제이션 C안 (2026-08-21) ===== */
/* 목업 _dev/mockups/mock-modernization-abc.html 의 v-c 규칙 이식.
   목업 CSS 변수(--k/--navy/--ink/--sub/--line)는 hex 로 풀어 기입한다. */
.mdz-icards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.mdz-icard{background:#fff;border:1px solid #e4e7ea;border-radius:12px;padding:26px 18px;text-align:center;}
.bg-beige .mdz-icard{border-color:#e7e2d8;}
.mdz-ic-cir{width:84px;height:84px;border-radius:50%;border:1.5px solid #d7e3f8;background:#f4f8ff;
  margin:0 auto 14px;display:flex;align-items:center;justify-content:center;}
.mdz-ic-cir svg{width:38px;height:38px;stroke:#256EF4;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}
.mdz-icard h4{font-size:20px;font-weight:800;margin-bottom:6px;}
.mdz-icard p{font-size:15px;color:#5a6672;line-height:1.65;}

.mdz-duo-worry{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;}
.mdz-worry{background:#fff;border:1px solid #e4e7ea;border-radius:12px;padding:20px 22px;}
.bg-beige .mdz-worry{border-color:#e7e2d8;}
.mdz-worry h5{font-size:18px;font-weight:800;color:#0B2545;margin-bottom:8px;}
.mdz-worry ul{list-style:none;font-size:15px;color:#49525b;}
.mdz-worry li{padding-left:14px;position:relative;margin-bottom:4px;}
.mdz-worry li::before{content:'\B7';position:absolute;left:2px;color:#256EF4;font-weight:900;}

.mdz-vsgrid{display:grid;grid-template-columns:1fr 56px 1fr;gap:0;align-items:stretch;}
.mdz-vs-col{border:1px solid #e4e7ea;border-radius:12px;background:#fff;overflow:hidden;}
.mdz-vs-col .hd{padding:12px;text-align:center;font-weight:800;font-size:18px;color:#fff;}
.mdz-vs-col.mdz-grad .hd{background:#f0a04b;}
.mdz-vs-col.mdz-rapid .hd{background:#7ba7dd;}
.mdz-vs-col .bd{padding:18px 20px;}
.mdz-vs-col .t{font-size:20px;font-weight:800;color:#0B2545;margin-bottom:8px;}
.mdz-vs-col ul{list-style:none;font-size:15px;color:#49525b;}
.mdz-vs-col li{padding-left:14px;position:relative;margin-bottom:5px;}
.mdz-vs-col li::before{content:'\2713';position:absolute;left:0;color:#256EF4;font-size:11px;top:1px;}
.mdz-vs-mid{display:flex;align-items:center;justify-content:center;font-weight:800;color:#8a949e;font-size:20px;}
.mdz-steps{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.mdz-step{background:#F4F8FF;color:#0B2545;border:1px solid #D7E3F8;border-radius:8px;padding:12px 16px;font-size:15px;font-weight:600;}
.mdz-step b{color:#256EF4;margin-right:8px;}

.mdz-sum3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.mdz-sum{border:1px solid #e4e7ea;border-radius:12px;background:#fff;padding:30px 28px;
  display:flex;flex-direction:column;}
.mdz-sum .tag{font-size:14px;font-weight:800;color:#256EF4;letter-spacing:1px;margin-bottom:6px;}
.mdz-sum h4{font-size:20px;font-weight:800;margin-bottom:10px;}
.mdz-sum p{font-size:15px;color:#5a6672;line-height:1.65;margin-bottom:14px;flex:1;}
.mdz-chips{display:flex;gap:6px;flex-wrap:wrap;}
.mdz-chips span,.mdz-chips a{background:#f4f8ff;border:1px solid #d7e3f8;color:#2d6cb5;border-radius:14px;
  font-size:13px;padding:4px 10px;font-weight:700;}
.mdz-sum-note{margin-top:32px;text-align:center;font-size:15px;color:#5a6672;}
.mdz-sum-note b{color:#212121;}

@media(max-width:900px){
  .mdz-icards,.mdz-sum3{grid-template-columns:1fr 1fr;}
  .mdz-vsgrid{grid-template-columns:1fr;gap:12px;}
  .mdz-vs-mid{padding:4px;}
}
@media(max-width:600px){
  .mdz-icards,.mdz-sum3,.mdz-duo-worry{grid-template-columns:1fr;}
}

/* 사례 안내 밴드 — 목업 .band 이식 */
.cslb{border-radius:14px;background:#fff;border:1px solid #e4e7ea;
  color:#1e2124;padding:34px 40px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.cslb-txt h3{font-size:21px;font-weight:800;color:#1e2124;}
.cslb-txt p{font-size:15px;color:#5a6672;margin-top:4px;}
.cslb-bt{margin-left:auto;display:flex;gap:12px;}
.cslb-btn{display:inline-block;border-radius:8px;padding:14px 34px;font-size:18px;
  font-weight:600;text-align:center;white-space:nowrap;}
.cslb-btn.sec{background:#fff;color:#256ef4;border:1.5px solid #256ef4;}
.cslb-btn.pri{background:#256ef4;color:#fff;}
@media(max-width:600px){
  .cslb{padding:26px 22px;}
  .cslb-bt{margin-left:0;width:100%;}
  .cslb-btn{flex:1;padding:13px 16px;font-size:16px;}
}
.mdz-chips a{text-decoration:none;}
.mdz-chips a:hover{border-color:#256EF4;}
.mdz-sum h4 a{color:inherit;text-decoration:none;border-bottom:1.5px solid #D7E3F8;}
.mdz-sum h4 a:hover{color:#256EF4;border-bottom-color:#256EF4;} }
/* 카드 호버 — pages.css:410-414 .ez2-cs-ref 의 transition/hover 값을 그대로 이식.
   비링크 카드라 cursor 는 주지 않는다(클릭 어포던스 오해 방지). */
.mdz-icard,.mdz-worry,.mdz-sum{transition:border-color .2s ease, box-shadow .2s ease;}
.mdz-icard:hover,.mdz-worry:hover,.mdz-sum:hover{
  border-color:#256EF4;box-shadow:inset 0 0 0 1px #256EF4;}

/* AS-IS -> TO-BE 3경로 다이어그램 — _dev/mockups/mock-mdz-asis-tobe.html A블록 이식.
   목업 CSS 변수는 hex 로 풀었다. 정보색은 회색 + 하늘(#7ba7dd) 계열, primary 는 링크에만. */
.mdz-atb{background:#fff;border:1px solid #e4e7ea;border-radius:12px;padding:36px;margin-top:36px;}
table.mdz-atb-t{width:100%;border-collapse:separate;border-spacing:28px 0;table-layout:fixed;}
td.mdz-atb-rail{width:86px;vertical-align:middle;text-align:center;}
.mdz-atb-railchip{display:block;background:#f4f5f6;color:#464c53;border:1px solid #e6e8ea;
  font-size:14px;font-weight:800;border-radius:8px;padding:9px 0;letter-spacing:1px;}
.mdz-atb-railchip--to{background:#7ba7dd;color:#fff;border-color:#7ba7dd;}
.mdz-atb-arrow{height:168px;position:relative;}
.mdz-atb-arrow::before{content:"";position:absolute;left:50%;top:8px;bottom:20px;width:3px;
  background:#cfdff0;transform:translateX(-50%);border-radius:2px;}
.mdz-atb-arrow::after{content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #7ba7dd;}
td.mdz-atb-col{vertical-align:top;}
.mdz-atb-cap{font-size:13px;font-weight:800;color:#0b50d0;letter-spacing:.5px;text-align:center;margin-bottom:18px;}
/* AS-IS·TO-BE 칩 높이를 맞춰 3열 상·하단 라인을 PATH 03(2행 칩) 기준으로 정렬한다. */
.mdz-atb-asis,.mdz-atb-tobe{min-height:66px;display:flex;align-items:center;justify-content:center;}
.mdz-atb-asis{background:#f4f5f6;color:#1e2124;border:1px solid #e6e8ea;font-size:15px;
  font-weight:700;border-radius:8px;padding:12px 14px;text-align:center;line-height:1.4;}
.mdz-atb-tobe{background:#7ba7dd;color:#fff;font-size:15px;font-weight:600;border-radius:8px;
  padding:12px 14px;text-align:center;line-height:1.4;}
.mdz-atb-mix{height:168px;margin:20px 0;border-radius:10px;overflow:hidden;display:flex;
  flex-direction:column;border:1px solid #e6e8ea;}
.mdz-atb-reuse,.mdz-atb-rede{gap:8px;}
.mdz-atb-reuse{background:#fff;color:#464c53;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;text-align:center;line-height:1.4;}
.mdz-atb-rede{background:#e8f0f9;color:#3f6ca6;border-top:1px solid #cfdff0;display:flex;
  align-items:center;justify-content:center;font-size:15px;font-weight:700;text-align:center;
  line-height:1.4;padding:4px;}
.mdz-atb-mix .mdz-atb-rede:first-child{border-top:0;}
.mdz-atb-rede small{font-size:12.5px;font-weight:500;display:block;color:#3f6ca6;}
.mdz-atb-reuse svg,.mdz-atb-rede svg{flex:none;}
.mdz-atb-note{margin-top:30px;text-align:center;font-size:14px;color:#6d7882;}
.mdz-atb-lg{display:inline-block;margin:0 8px;font-size:13px;color:#6d7882;}
.mdz-atb-lg i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:5px;}
.mdz-atb-lg--reuse{background:#fff;border:1px solid #cdd1d5;}
.mdz-atb-lg--rede{background:#e8f0f9;border:1px solid #7ba7dd;}

/* difingo 마무리 라인 — 목업 B블록 이식 */
.mdz-dfg{margin-top:22px;background:#fff;border:1px solid #e6e8ea;border-left:4px solid #7ba7dd;
  border-radius:0 10px 10px 0;padding:16px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.mdz-dfg-logo{height:26px;width:auto;display:block;}
.mdz-dfg p{font-size:15px;color:#464c53;line-height:1.6;}
.mdz-dfg a{color:#256ef4;font-weight:700;text-decoration:none;border-bottom:1.5px solid #d8e5fd;
  white-space:nowrap;font-size:15px;}

@media(max-width:600px){
  .mdz-atb{padding:20px 16px;}
  .mdz-atb-t,.mdz-atb-t tbody,.mdz-atb-t tr,.mdz-atb-t td{display:block;width:100%;}
  .mdz-atb-rail{display:none;}
  .mdz-atb-col{margin-bottom:26px;}
  .mdz-atb-cap{text-align:left;}
  .mdz-atb-mix{height:42px;flex-direction:row;margin:10px 0;}
  .mdz-atb-mix svg{display:none;}
  .mdz-atb-rede{border-top:0;border-left:1px solid #cfdff0;}
  .mdz-atb-mix .mdz-atb-rede:first-child{border-left:0;}
  .mdz-atb-asis,.mdz-atb-tobe{min-height:48px;}
}
/* ④ 제안 섹션 리드 — 공용 .lc-head .desc 는 두고 이 페이지에서만 하단 여백을 준다. */
.mdz-lead{margin-bottom:32px;}
/* 슬롯① 임시 숨김 — 전환 전/후 실캡처 확보 시 아래 1행 삭제 */
/* ===== MDZ-C:END ===== */
/* ===== [M2-CSP2] 고객사례 — restyler case.html 원본 구조 이식 =====
   원본: restyler/pages/case.html 인라인 style 92-141행
   변수 치환: --color-accent #256ef4 / --color-text #111
              --color-text-light #222 / --color-border #e5e5ea
   (루트 common.css 에 --color-* 계열 정의 없음 — 리터럴로 고정)          */

.ez2-csp-lead{max-width:1280px;margin:0 auto 22px;color:#222;font-size:15px;}
.ez2-csf{max-width:1280px;margin:0 auto 24px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.ez2-csf-chip{height:32px;padding:0 16px;border:1px solid #e5e5ea;border-radius:16px;background:#fff;font:inherit;font-size:14px;color:#111;cursor:pointer;transition:border-color .2s ease,color .2s ease;}
.ez2-csf-chip:hover{border-color:#256ef4;color:#256ef4;}
.ez2-csf-chip.on{background:#256ef4;border-color:#256ef4;color:#fff;font-weight:700;}
.ez2-csf-chip:focus-visible{outline:2px solid #256ef4;outline-offset:2px;}
.ez2-csf-cnt{margin-left:auto;font-size:14px;color:#222;}
.ez2-csf-cnt b{color:#256ef4;font-size:18px;}

/* ── 주요 실적 = 원본 .ref-featured / .ref-feat 계승 ── */
.ez2-csp{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ez2-csp-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e5e5ea;border-radius:16px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;}
.ez2-csp-card[hidden]{display:none;}
.ez2-csp-card:hover{border-color:#256ef4;box-shadow:inset 0 0 0 1px #256ef4;}
.cf-logo{width:100%;height:150px;display:flex;align-items:center;justify-content:center;padding:12px;border-bottom:1px solid #e5e5ea;}
.cf-logo img{max-width:100%;max-height:100%;object-fit:contain;}
.cf-logo .cf-fb{display:none;font-size:26px;font-weight:800;letter-spacing:-.5px;color:#0067ac;}
.cf-logo img+.cf-fb{display:none;}
.cf-logo > .cf-fb:only-child{display:block;font-size:15px;font-weight:600;color:#8d98a8;border:1px dashed #c3ccd8;border-radius:8px;padding:10px 18px;}
.cf-body{flex:1;display:flex;flex-direction:column;gap:18px;padding:20px 24px 22px;}
.cf-desc{font-size:15px;line-height:1.65;color:#111;margin:0;}
.cf-meta{margin-top:auto;display:flex;align-items:center;gap:10px;font-size:15px;}
.cf-name{font-weight:600;color:#222;letter-spacing:-.2px;}
.cf-meta .bar{width:1px;height:13px;background:#cdd1d5;display:inline-block;margin:0;}
.cf-tag{font-weight:700;color:#256ef4;}

/* ── 로고월 = 원본 .logo-grid / .logo-cell 계승 ── */
.ez2-csw{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.ez2-csw-cell{display:flex;flex-direction:column;padding:20px 14px 18px;background:#fff;border:1px solid #e5e5ea;border-radius:12px;transition:border-color .2s ease,box-shadow .2s ease;}
.ez2-csw-cell:hover{border-color:#256ef4;box-shadow:inset 0 0 0 1px #256ef4;}
.cw-logo{height:96px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.cw-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.cw-name{font-size:15px;font-weight:700;letter-spacing:-.3px;color:#111;text-align:center;margin-bottom:6px;}
.cw-desc{font-size:13.5px;line-height:1.55;color:#222;text-align:center;}

@media (max-width:1024px){
  .ez2-csp{grid-template-columns:repeat(2,1fr);gap:14px;}
  .cf-logo{height:120px;}
  .ez2-csw{grid-template-columns:repeat(4,1fr);gap:14px;}
}
@media (max-width:768px){
  .ez2-csp{grid-template-columns:1fr;}
  .cf-logo{height:130px;}
  .ez2-csw{grid-template-columns:repeat(2,1fr);gap:10px;}
  .ez2-csw-cell{padding:16px 12px 14px;}
  .cw-logo{height:64px;}
  .ez2-csf-cnt{margin-left:0;width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .ez2-csf-chip,.ez2-csp-card,.ez2-csw-cell{transition:none;}
}
/* ===== [M2-CSP2:END] ===== */

/* ── cases 허브 B형 히어로 앵커 (08-26 B-1) ── */
.ez2-hbl{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(to top,rgba(8,18,34,.55),rgba(8,18,34,0));}
.ez2-hbl>div{display:flex;gap:10px;flex-wrap:wrap;padding:40px 50px 22px;
  max-width:1380px;margin:0 auto;}
.ez2-hbl-a{display:flex;flex-direction:column;gap:2px;text-decoration:none;
  padding:11px 18px;border-radius:10px;min-width:186px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s;}
a.ez2-hbl-a:hover{background:rgba(255,255,255,.2);border-color:#fff;}
.ez2-hbl-a strong{color:#fff;font-size:15px;font-weight:800;letter-spacing:-.2px;}
.ez2-hbl-a small{color:#c9d9f2;font-size:12.5px;}
.ez2-hbl-a.is-mut{opacity:.62;}
@media(max-width:720px){
  .ez2-hbl{position:static;background:#1e2124;}
  .ez2-hbl>div{padding:14px 24px;}
  .ez2-hbl-a{min-width:0;flex:1 1 100%;}
}

/* PROCESS:START — pages/consulting/process.html 전용 (_dev/mockups/process-v1.html 이식)
   .po-* 는 이 페이지 한 곳에서만 쓴다. 폭은 사이트 토큰 var(--max) 를 그대로 따른다. */
.po-wrap{max-width:var(--max);margin:0 auto;padding:0 50px}
/* 섹션 제목부 = index.html 과 같은 .sec-head(common.css:141-143) — 가운데 정렬
   + 파란 아이브로우 .e. 리드문은 index 의 .ez2-sec-sub(main.css:157) 값을 그대로
   옮긴다(이 파일 관례대로 :root 전용 토큰에만 폴백). */
.sec-head .ez2-sec-sub{margin-top:10px;font-size:16px;color:#5a6672}
.po-flow{background:var(--k-gray-5, #f5f6f7);padding:clamp(56px,8vh,96px) 0}
.po-flow-row{display:flex;align-items:stretch;gap:0}
.po-node{flex:1;background:#fff;border:1px solid #e4e7ea;border-radius:12px;padding:22px 18px;text-align:center;position:relative;display:flex;flex-direction:column;justify-content:center;min-height:150px}
.po-node + .po-node{margin-left:38px}
.po-node + .po-node::before{content:"\2192";position:absolute;left:-27px;top:50%;transform:translateY(-50%);font-size:17px;color:#256EF4}
.po-node-t{font-size:20px;font-weight:800;line-height:1.35;color:var(--ink);margin:0 0 10px}
.po-node-s{font-size:15px;line-height:1.65;color:#5a6672;margin:0;word-break:keep-all}
.po-node.is-src{background:transparent;border:1px dashed var(--k-gray-20, #cdd1d5)}
.po-node.is-src .po-node-t{color:var(--k-gray-70, #464c53)}
.po-node.is-src .po-node-s{color:var(--k-gray-50, #6d7882)}
.po-node.is-dst{background:#256EF4;border-color:#256EF4}
.po-node.is-dst .po-node-t{color:#fff}
.po-node.is-dst .po-node-s{color:rgba(255,255,255,.8)}
.po-node.is-step{border-color:#b9cffb}
.po-node-k{position:absolute;top:12px;left:0;right:0;margin:0;font-size:12px;font-weight:800;line-height:1;color:#256EF4;letter-spacing:1px}
.po-steps{padding:96px 0 40px}
.po-step{display:grid;grid-template-columns:250px 1fr;gap:36px;padding:40px 0;border-top:1px solid var(--k-gray-10, #e6e8ea)}
/* 호버 강조 = index .ez2-c3:hover(main.css:617) 원값 — 카드에만 건다(스텝 행은 호버 없음).
   transition 은 pages.css 가 common.css 뒤에 와서 .reveal 의 transition 을 덮으므로
   .po-card 에 한해 두 연출을 한 선언에 합친다. */
.po-card{transition:opacity .7s,transform .7s,border-color .2s ease,box-shadow .2s ease}
.po-step:last-child{border-bottom:1px solid var(--k-gray-10, #e6e8ea)}
.po-step-num{font-size:14px;font-weight:800;color:#256EF4;letter-spacing:1px;margin:0 0 6px}
.po-step-name{font-size:24px;font-weight:800;margin:0 0 4px;letter-spacing:.02em}
.po-step-sub{font-size:15px;font-weight:700;color:var(--k-gray-70, #464c53);margin:0}
.po-step-desc{font-size:16px;line-height:1.8;color:#5a6672;margin:0 0 18px;word-break:keep-all}
.po-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.po-chips li{font-size:13px;font-weight:600;color:var(--k-gray-90, #1e2124);background:var(--k-gray-5, #f5f6f7);border:1px solid var(--k-gray-10, #e6e8ea);border-radius:999px;padding:7px 14px 5px}
.po-split{background:var(--k-gray-5, #f5f6f7);padding:clamp(56px,8vh,96px) 0}
.po-split-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 52px}
.po-card{background:#fff;border:1px solid #e4e7ea;border-radius:12px;padding:30px 28px}
.po-card:hover{border-color:#256EF4;box-shadow:inset 0 0 0 1px #256EF4}
.po-card-h{font-size:20px;font-weight:800;line-height:1.35;color:var(--ink);margin:0 0 10px}
.po-card ul{margin:0;padding:0;list-style:none}
.po-card li{font-size:15px;line-height:1.65;color:#5a6672;padding:7px 0 7px 22px;position:relative;word-break:keep-all}
.po-card li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--k-gray-50, #6d7882)}
.po-motto{font-size:clamp(19px,2.2vw,26px);line-height:1.5;font-weight:600;color:var(--k-gray-70, #464c53);text-align:center;margin:0;word-break:keep-all}
.po-motto strong{font-weight:800;color:var(--ink)}
.po-legacy{padding:96px 0}
.po-legacy-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 26px;padding:0;list-style:none}
.po-legacy-chips li{font-size:14px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--k-gray-20, #cdd1d5);border-radius:10px;padding:11px 18px 9px}
.po-legacy-line{font-size:16px;line-height:1.7;color:#5a6672;margin:0;text-align:center;word-break:keep-all}
.po-exitsec{padding:0 0 96px}
.po-exit{background:#131A26;border-radius:12px;padding:40px;text-align:center}/* = main --ez2-dark (main.css:151), pages는 main.css 미로드라 리터럴 */
.po-exit-h{font-size:clamp(18px,2vw,24px);line-height:1.5;font-weight:800;color:#fff;margin:0 0 10px;word-break:keep-all}
.po-exit-p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.72);margin:0;word-break:keep-all}
.po-ctasec{padding:96px 0;text-align:center}
.po-cta-h{font-size:clamp(24px,3vw,36px);line-height:1.4;font-weight:800;margin:0 0 14px;word-break:keep-all}
.po-cta-p{font-size:16px;line-height:1.7;color:#5a6672;margin:0 0 30px;word-break:keep-all}
.po-btns a{display:inline-block;padding:14px 28px;border-radius:8px;font-size:15px;font-weight:700;text-decoration:none;margin:0 6px 10px}
.po-btn-primary{background:var(--k-primary, #256ef4);color:#fff}
.po-btn-primary:hover{background:var(--k-primary-60, #0b50d0)}
.po-btn-ghost{border:1px solid var(--k-primary, #256ef4);color:var(--k-primary, #256ef4)}
.po-cta-micro{font-size:13px;color:var(--k-gray-40, #8a949e);margin:14px 0 0}
@media (max-width:1024px){
  .po-wrap{padding:0 22px}
  .po-flow{padding:56px 0}
  .po-flow-row{flex-direction:column}
  .po-node{min-height:auto}
  .po-node + .po-node{margin-left:0;margin-top:34px}
  .po-node + .po-node::before{content:"\2193";left:50%;top:-26px;transform:translateX(-50%)}
  .po-steps{padding:72px 0 28px}
  .po-step{grid-template-columns:1fr;gap:14px;padding:32px 0}
  .po-split{padding:72px 0}
  .po-split-cards{grid-template-columns:1fr;gap:16px}
  .po-legacy{padding:72px 0}
  .po-exitsec{padding:0 0 72px}
  .po-exit{padding:28px 22px}
  .po-ctasec{padding:72px 0}
}
/* PROCESS:END */

/* ===== CONVERSION 전체 (.il-*) — INK & LINE 표준안 · 목업 _dev/mockups/conversion-page-inkline-mockup.html · 2026-09-01 =====
   토큰: 잉크 #1a1a1a(--ink) · 다크 #131A26(--ez2-dark) · 본문 #5a6672 · 뮤트 #6d7580 · 헤어라인 #e4e7ea · 링 #cdd1d5(gray-20) · 블록 #f5f6f7(gray-5)
         시안 #12B3D6 · 시안 글자 #0B7F98 · 시안 바탕 #E6F6FA (신규 3단, 인포그래픽 포인트 전용)
   규칙: 본문 16px · 라벨 13px 이상 · 아이콘 1.5px 라인 + 시안 한 획(.a) · 검정 면(--il-dark)은 결론 자리에만 · 유색 면은 분류 그래프(venn)만 · 상표 로고 금지 */
.il-sec{--il-ink:#1a1a1a;--il-dark:#131A26;--il-body:#5a6672;--il-muted:#6d7580;--il-hair:#e4e7ea;--il-ring:#cdd1d5;--il-block:#f5f6f7;--il-acc:#256EF4;--il-acc2:#5B9DF5;--il-acc-ink:#1f5fd8;--il-acc-soft:#e8f0fe;background:#fff;padding:clamp(72px,10vh,120px) 0;color:var(--il-ink)}
.il-sec.is-block{background:var(--il-block)}
.il-sec .sec-head{margin-bottom:56px}
.il-sec .sec-head .e{color:var(--il-acc-ink)}
.il-sec .sec-head h2{font-size:38px;letter-spacing:-.3px}
.il-sec .sec-head .ez2-sec-sub{font-size:17px}
.il-sec svg text{font-family:inherit}
.il-ic{stroke:var(--il-ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.il-ic.a,.il-ic .a{stroke:var(--il-acc2)}
.il-mt{margin-top:64px}
/* §1 비교 카드 */
.il-cmp{display:grid;grid-template-columns:1fr 72px 1fr;align-items:stretch}
.il-vs{display:flex;align-items:center;justify-content:center}
.il-vs span{width:44px;height:44px;border-radius:50%;border:1px solid var(--il-ring);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--il-acc-ink);letter-spacing:1px;background:#fff}
.il-cc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--il-hair);border-radius:16px;padding:40px 40px 0}
.il-cc.is-si{border:1px dashed var(--il-ring)}
.il-cc.is-key{border-color:var(--il-dark)}
.il-cc .il-k{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--il-acc-ink)}
.il-cc h3{margin:0 0 8px;font-size:24px;font-weight:800;letter-spacing:-.2px;color:var(--il-ink)}
.il-cc.is-si h3{color:var(--il-body)}
.il-cc.is-si .il-k{color:var(--il-muted)}
.il-cc.is-si .il-pts li::before{background:var(--il-ring)}
.il-cc .il-s{margin:0 0 22px;font-size:16px;line-height:1.65;color:var(--il-body)}
.il-chips{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.il-chips li{font-size:13px;font-weight:700;padding:7px 12px 5px;border-radius:999px;border:1px solid var(--il-hair);color:var(--il-body);background:#fff}
.il-cc.is-si .il-chips li{border-color:var(--il-ring);color:var(--il-muted)}
.il-cc.is-key .il-chips li{border-color:var(--il-acc2);color:var(--il-acc-ink);background:var(--il-acc-soft)}
.il-dia{display:block;width:100%;height:auto;margin:0 0 26px}
.il-pts{list-style:none;margin:0;padding:0}
.il-pts li{position:relative;padding:10px 0 10px 18px;font-size:16px;line-height:1.6;color:var(--il-body);border-top:1px solid var(--il-hair)}
.il-pts li::before{content:"";position:absolute;left:0;top:20px;width:5px;height:5px;border-radius:50%;background:var(--il-acc2)}
.il-cc .il-foot{margin:auto -40px 0;padding:18px 40px;font-size:16px;font-weight:700;line-height:1.5;border-top:1px solid var(--il-hair);color:var(--il-body);background:var(--il-block);border-radius:0 0 16px 16px}
.il-cc.is-key .il-foot{background:var(--il-dark);color:#fff;border-top-color:var(--il-dark)}
/* §2 솔루션 */
.il-sol{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:center}
.il-sol .il-pts li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;padding:16px 0}
.il-sol .il-pts li::before{display:none}
.il-sol .il-pts li:first-child{border-top:0;padding-top:0}
.il-sol .il-pts svg{width:48px;height:48px}
.il-sol .il-pts b{display:block;margin-bottom:2px;font-size:20px;font-weight:800;color:var(--il-ink)}
.il-sol .il-pts span{font-size:16px;line-height:1.6;color:var(--il-body)}
.il-venn{display:block;width:100%;max-width:680px;height:auto;margin:0 auto}
.il-venn .c{fill:var(--il-acc2);fill-opacity:.18}
/* §3 컨설팅: 링 서클 · 알약 바 · KPI */
.il-rings{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.il-ring{text-align:center;position:relative}
.il-o{width:264px;height:264px;margin:0 auto;border-radius:50%;border:1px solid var(--il-ring);display:flex;align-items:center;justify-content:center;position:relative;background:#fff}
.il-o::before{content:"";position:absolute;inset:18px;border-radius:50%;background:#fff;box-shadow:0 10px 30px rgba(19,26,38,.06)}
.il-o svg{position:relative;width:72px;height:72px}
.il-o .dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--il-acc2);top:22px;right:26px}
.il-ring.is-key .il-o{border-color:var(--il-dark);border-width:2px}
.il-ring h3{margin:24px 0 6px;font-size:24px;font-weight:800;color:var(--il-ink)}
.il-ring p{margin:0;font-size:16px;line-height:1.6;color:var(--il-body)}
.il-tag{display:inline-block;margin-top:12px;font-size:13px;font-weight:800;letter-spacing:1px;color:var(--il-acc-ink);background:var(--il-acc-soft);padding:6px 12px 4px;border-radius:999px}
.il-ring.is-key .il-tag{background:var(--il-dark);color:#fff}
.il-ring-arw{position:absolute;right:-24px;top:120px;color:var(--il-ring);font-size:22px;letter-spacing:-6px}
.il-ring-arw b{color:var(--il-acc)}
.il-stack{display:flex;flex-direction:column}
.il-bar{background:var(--il-block);border-radius:999px;padding:20px 32px;text-align:center;font-size:18px;font-weight:700;color:var(--il-ink)}
.il-sec.is-block .il-bar{background:#fff}
.il-bar small{display:block;margin-top:2px;font-size:16px;font-weight:500;color:var(--il-muted)}
.il-dn{text-align:center;color:var(--il-ink);font-size:12px;line-height:1;padding:10px 0}
.il-kpi{display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px;border-top:1px solid var(--il-hair);border-bottom:1px solid var(--il-hair)}
.il-kpi div{padding:36px 16px;text-align:center;border-left:1px solid var(--il-hair)}
.il-kpi div:first-child{border-left:0}
.il-kpi svg{width:54px;height:54px;margin-bottom:14px}
.il-kpi p{margin:0;font-size:20px;font-weight:800;color:var(--il-ink)}
.il-kpi p b{color:var(--il-acc);margin-left:2px}
/* §4 방법론: 검정 블록 · 루프 · 연번 5 */
.il-blk{border:1.5px solid var(--il-dark);border-radius:24px;overflow:hidden;background:#fff}
.il-blk-h{background:var(--il-dark);color:#fff;text-align:center;font-size:18px;font-weight:700;padding:16px 32px}
.il-blk-b{padding:44px 40px 40px}
.il-loop{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;max-width:820px;margin:0 auto}
.il-loop .il-o{width:200px;height:200px}
.il-loop .il-o::before{inset:14px}
.il-loop .il-o svg{width:54px;height:54px}
.il-loop h4{margin:14px 0 0;font-size:17px;font-weight:700;color:var(--il-ink)}
.il-loop p{margin:4px 0 0;font-size:16px;color:var(--il-muted)}
.il-loop .il-arw{color:var(--il-ring);font-size:18px;padding:0 10px;letter-spacing:-4px;margin-top:-30px}
.il-loop .il-arw b{color:var(--il-acc)}
.il-loop-note{position:relative;max-width:820px;margin:8px auto 0;height:54px}
.il-loop-note svg{position:absolute;inset:0;width:100%;height:100%}
.il-badge{position:absolute;left:50%;top:26px;transform:translateX(-50%);background:var(--il-acc);color:#fff;font-size:14px;font-weight:800;padding:7px 14px 5px;border-radius:999px;white-space:nowrap}
.il-nums{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:64px}
.il-num .n{margin:0 0 6px;font-size:52px;font-weight:200;line-height:1;letter-spacing:-2px;color:var(--il-ring)}
.il-num .n b{font-weight:200;color:var(--il-acc)}
.il-num h3{margin:0 0 14px;font-size:20px;font-weight:800;line-height:1.35;color:var(--il-ink)}
.il-num ul{margin:0;padding:0;list-style:none}
.il-num li{position:relative;padding:6px 0 6px 16px;font-size:16px;line-height:1.55;color:var(--il-body)}
.il-num li::before{content:"";position:absolute;left:0;top:15px;width:5px;height:5px;border-radius:50%;background:var(--il-acc2)}
.il-who{display:inline-block;margin-top:12px;font-size:13px;font-weight:800;letter-spacing:.5px;color:var(--il-muted);border:1px solid var(--il-hair);border-radius:999px;padding:5px 10px 3px}
.il-who.is-key{color:#fff;background:var(--il-dark);border-color:var(--il-dark)}
/* §5 도구: 솔루션 카드 · 파이프 */
.il-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.il-card{background:#fff;border:1px solid var(--il-hair);border-radius:16px;padding:36px 36px 32px}
.il-card .il-k{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--il-acc-ink)}
.il-card svg{width:48px;height:48px;margin-bottom:18px}
.il-card h3{margin:0 0 6px;font-size:24px;font-weight:800;color:var(--il-ink)}
.il-card .il-s{margin:0 0 20px;font-size:16px;color:var(--il-muted)}
.il-card ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
.il-card li{position:relative;padding:5px 0 5px 14px;font-size:16px;color:var(--il-body)}
.il-card li::before{content:"";position:absolute;left:0;top:14px;width:4px;height:4px;border-radius:50%;background:var(--il-ring)}
.il-card li.a::before{background:var(--il-acc2)}
.il-pipe{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;margin-top:40px}
.il-pipe .p{background:var(--il-block);border-radius:999px;padding:18px 20px;text-align:center;font-size:17px;font-weight:700;color:var(--il-ink)}
.il-pipe .p small{display:block;margin-top:2px;font-size:16px;font-weight:500;color:var(--il-muted)}
.il-pipe .p.is-key{background:var(--il-dark);color:#fff}
.il-pipe .p.is-key small{color:rgba(255,255,255,.6)}
.il-pipe .a{color:var(--il-ring);font-size:16px;padding:0 12px;letter-spacing:-3px}
.il-pipe .a b{color:var(--il-acc)}
.il-note{margin:28px 0 0;font-size:14px;color:var(--il-muted);text-align:center}
@media (max-width:1024px){
  .il-cmp,.il-sol,.il-rings,.il-nums,.il-cards,.il-kpi,.il-loop,.il-pipe{grid-template-columns:1fr}
  .il-vs{padding:14px 0}
  .il-ring-arw,.il-loop .il-arw,.il-pipe .a{display:none}
  .il-kpi div{border-left:0;border-top:1px solid var(--il-hair)}
  .il-sec .sec-head h2{font-size:28px}
}


/* ===== MODERNIZATION 전용 변형 (.il-mdz-*) — INK & LINE · 공용 .il-* 위에 얹음 ===== */
.il-mdz-rings{grid-template-columns:repeat(4,1fr);gap:20px}
.il-mdz-rings .il-o{width:200px;height:200px}
.il-mdz-rings .il-o::before{inset:14px}
.il-mdz-rings .il-o svg{width:56px;height:56px}
.il-mdz-rings h3{font-size:20px;margin-top:20px}
.il-mdz-rings p{font-size:16px;max-width:240px;margin:0 auto}
.il-mdz-worry{margin-top:56px}
.il-mdz-worry .il-card ul{grid-template-columns:1fr}
.il-mdz-worry .il-card li{font-size:16px;padding:7px 0 7px 16px}
.il-mdz-worry .il-card h3{font-size:22px}
.il-mdz-worry .il-card .il-s{margin-bottom:14px}
.il-mdz-pipe3{grid-template-columns:1fr auto 1fr auto 1fr;margin-top:56px}
.il-mdz-pipe3 .p{font-size:17px}
.il-mdz-pipe3 .p b{display:block;font-size:13px;font-weight:800;letter-spacing:1px;color:var(--il-acc-ink);margin-bottom:4px}
.il-mdz-dfg{margin:28px auto 0;max-width:820px;text-align:center;font-size:16px;line-height:1.7;color:var(--il-body)}
.il-mdz-dfg b{color:var(--il-ink);font-weight:800}
.il-mdz-dfg a{color:var(--il-acc-ink);font-weight:700;text-decoration:none;border-bottom:1px solid var(--il-acc)}
.il-mdz-cards3{grid-template-columns:repeat(3,1fr)}
.il-mdz-cards3 .il-card ul{grid-template-columns:1fr}
.il-mdz-cards3 .il-card .il-s{min-height:0}
.il-mdz-cards3 .il-card h3 a{color:inherit;text-decoration:none}
.il-mdz-cards3 .il-card.is-key{border-color:var(--il-dark)}
.il-card .il-mdz-chips{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.il-card .il-mdz-chips li,.il-card .il-mdz-chips a{font-size:13px;font-weight:700;padding:7px 12px 5px;border-radius:999px;border:1px solid var(--il-hair);color:var(--il-body);background:#fff;text-decoration:none}
.il-card .il-mdz-chips li::before{display:none}
.il-card .il-mdz-chips a{border-color:var(--il-acc2);color:var(--il-acc-ink)}
/* AS-IS → TO-BE 재사용/재설계 비율 */
.il-mdz-atb{margin-top:40px;background:#fff;border:1px solid var(--il-hair);border-radius:16px;padding:8px 32px}
.il-mdz-row{display:grid;grid-template-columns:170px 1fr 220px;gap:20px;align-items:center;padding:22px 0}
.il-mdz-row + .il-mdz-row{border-top:1px solid var(--il-hair)}
.il-mdz-row .cap{font-size:13px;font-weight:800;letter-spacing:1px;color:var(--il-acc-ink);margin:0 0 6px}
.il-mdz-row .asis{font-size:16px;font-weight:700;color:var(--il-ink);margin:0}
.il-mdz-row .asis small{display:block;font-size:14px;font-weight:500;color:var(--il-muted);margin-top:2px}
.il-mdz-bar{display:flex;gap:6px;height:52px}
.il-mdz-bar > span{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-size:15px;font-weight:700;white-space:nowrap;padding:0 14px}
.il-mdz-bar .reuse{background:var(--il-block);color:var(--il-body)}
.il-mdz-bar .rede{background:var(--il-acc-soft);border:1px solid var(--il-acc2);color:var(--il-acc-ink)}
.il-mdz-bar > span svg{width:18px;height:18px;flex:none}
.il-mdz-bar > span small{font-weight:500;color:var(--il-muted)}
.il-mdz-tobe{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;color:var(--il-ink)}
.il-mdz-tobe::before{content:"\2192";color:var(--il-acc);font-size:22px;font-weight:400}
.il-mdz-lg{display:flex;justify-content:center;gap:24px;margin:22px 0 0;font-size:14px;color:var(--il-muted)}
.il-mdz-lg i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px}
.il-mdz-lg .r1{background:var(--il-block);border:1px solid var(--il-hair)}
.il-mdz-lg .r2{background:var(--il-acc-soft);border:1px solid var(--il-acc2)}
@media (max-width:1024px){
  .il-mdz-rings,.il-mdz-pipe3,.il-mdz-cards3{grid-template-columns:1fr}
  .il-mdz-pipe3 .a{display:none}
  .il-mdz-row{grid-template-columns:1fr;gap:10px}
  .il-mdz-bar > span{font-size:13px;padding:0 10px}
}


/* 공용 보정 — 카드(.il-card) 안 칩: ul 그리드·불릿 상속 차단 (conversion 블록엔 없던 규칙, 다음 정리 때 공용으로 이동) */
.il-card .il-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.il-card .il-chips li{padding:7px 12px 5px;font-size:15px}
.il-card .il-chips li::before{display:none}
/* ===== PROCESS 전용 변형 (.il-po-*) — INK & LINE · 공용 .il-* 위에 얹음 (기존 .po-* 블록 대체) ===== */
.il-po-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:start;gap:0}
.il-po-flow .il-ring{padding:0 4px}
.il-po-flow .il-o{width:184px;height:184px}
.il-po-flow .il-o::before{inset:13px}
.il-po-flow .il-o svg{width:54px;height:54px}
.il-po-flow .il-ring h3{font-size:19px;margin-top:16px}
.il-po-flow .il-ring p{font-size:15px}
.il-po-flow .il-ring .il-k{margin:14px 0 -10px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--il-acc-ink)}
.il-po-flow .il-ring.is-src .il-o{border-style:dashed}
.il-po-flow .il-ring.is-src h3,.il-po-flow .il-ring.is-src p{color:var(--il-muted)}
.il-po-flow .il-ring.is-src svg{stroke:var(--il-muted)}
.il-po-flow .a{color:var(--il-ring);font-size:16px;padding:0 4px;letter-spacing:-3px;margin-top:86px}
.il-po-flow .a b{color:var(--il-acc)}
/* 단계 상세: index 카드 3장 어휘 */
.il-po-cards3{grid-template-columns:repeat(3,1fr);gap:24px}
.il-po-cards3 .il-card{display:flex;flex-direction:column;padding:32px 32px 30px}
.il-po-cards3 .il-card h3{font-size:22px;margin-bottom:14px}
.il-po-cards3 .il-card h3 small{display:block;font-size:16px;font-weight:700;color:var(--il-ink);margin-top:6px}
.il-po-cards3 .il-card .il-s{font-size:16px;line-height:1.7;color:var(--il-body);margin-bottom:22px}
.il-po-cards3 .il-card .il-chips{margin:auto 0 0}
.il-po-cards{grid-template-columns:1fr 1fr}
.il-po-cards .il-card ul{grid-template-columns:1fr}
.il-po-cards .il-card li{font-size:16px;padding:7px 0 7px 16px}
.il-po-motto{margin:56px auto 0;max-width:880px;text-align:center;font-size:clamp(20px,2.2vw,26px);line-height:1.5;font-weight:600;color:var(--il-body)}
.il-po-motto strong{color:var(--il-ink);font-weight:800;border-bottom:3px solid var(--il-acc2)}
.il-po-legacy{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0}
.il-po-legacy li{font-size:16px;font-weight:700;padding:13px 22px 11px;border-radius:999px;border:1px solid var(--il-ring);color:var(--il-ink);background:#fff;list-style:none}
.il-po-legacy li.is-key{border-color:var(--il-acc2);color:var(--il-acc-ink);background:var(--il-acc-soft)}
.il-po-line{margin:32px auto 0;max-width:760px;text-align:center;font-size:17px;color:var(--il-body)}
.il-po-exit{background:var(--il-dark);color:#fff;border-radius:24px;padding:64px 56px;text-align:center}
.il-po-exit h3{margin:0 0 14px;font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.4;color:#fff}
.il-po-exit p{margin:0 auto;max-width:760px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.72)}
.il-po-exit p strong{color:var(--il-acc);font-weight:800}
@media (max-width:1024px){
  .il-po-flow{grid-template-columns:1fr}.il-po-flow .a{display:none}.il-po-flow .il-ring{padding:16px 0}
  .il-po-cards3,.il-po-cards{grid-template-columns:1fr}
  .il-po-exit{padding:40px 24px}
}


/* ===== ABOUT 전용 변형 (.il-ab-*) — INK & LINE ===== */
.il-ab-2col{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.il-ab-2col.is-rev{grid-template-columns:1fr 1.05fr}
.il-ab-2col.is-rev > :first-child{order:2}
.il-ab-lead{font-size:18px;line-height:1.75;color:var(--il-body);margin:0}
.il-ab-lead + .il-ab-lead{margin-top:18px}
.il-ab-lead b{color:var(--il-ink);font-weight:800}
.il-ab-legacy{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.il-ab-legacy ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.il-ab-legacy li{font-size:15px;font-weight:700;color:var(--il-muted);background:#fff;border:1px dashed var(--il-ring);border-radius:999px;padding:11px 12px 9px;text-align:center}
.il-ab-legacy .a{color:var(--il-ring);font-size:18px;letter-spacing:-4px;padding:0 4px}
.il-ab-legacy .a b{color:var(--il-acc)}
.il-ab-legacy .il-ring .il-o{width:220px;height:220px}
.il-ab-legacy .il-ring .il-o::before{inset:16px}
.il-ab-legacy .il-ring .il-o svg{width:64px;height:64px}
.il-ab-legacy .il-ring h3{font-size:20px;margin-top:16px}
.il-ab-legacy .il-ring p{font-size:15px}
.il-ab-quote{background:#fff;border:1px solid var(--il-hair);border-radius:24px;padding:48px 44px;text-align:center}
.il-ab-quote .q{font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.45;color:var(--il-ink);margin:0 0 18px;letter-spacing:-.3px}
.il-ab-quote .q em{font-style:normal;color:var(--il-acc);border-bottom:3px solid var(--il-acc2)}
.il-ab-quote .m{display:flex;justify-content:center;gap:10px;align-items:center;font-size:15px;color:var(--il-muted)}
.il-ab-quote .m span{padding:7px 14px 5px;border-radius:999px;background:var(--il-block);font-weight:700;color:var(--il-ink)}
.il-ab-quote .m i{color:var(--il-acc2);font-style:normal;font-weight:800}
.il-ab-mv{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.il-ab-mv .il-card{text-align:center;padding:44px 36px}
.il-ab-mv .il-card svg{margin:0 auto 18px}
.il-ab-mv .il-card h3{font-size:14px;letter-spacing:3px;color:var(--il-acc-ink);margin-bottom:12px}
.il-ab-mv .il-card p{margin:0;font-size:clamp(20px,2vw,26px);font-weight:800;line-height:1.4;color:var(--il-ink)}
.il-ab-area{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.il-ab-area .il-card .il-s{min-height:0}
.il-ab-area .il-card ul{grid-template-columns:1fr}
.il-ab-area .il-card li a{color:var(--il-ink);text-decoration:none;border-bottom:1px solid var(--il-acc2);font-weight:700}
.il-ab-partner{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;margin-top:8px}
.il-ab-partner .p{background:var(--il-block);border-radius:999px;padding:20px 22px;text-align:center;font-size:17px;font-weight:800;color:var(--il-ink)}
.il-ab-partner .p small{display:block;font-size:15px;font-weight:500;color:var(--il-muted);margin-top:2px}
.il-ab-partner .p.is-key{background:var(--il-dark);color:#fff}
.il-ab-partner .p.is-key small{color:rgba(255,255,255,.65)}
.il-ab-partner .a{color:var(--il-ring);font-size:16px;padding:0 12px;letter-spacing:-3px}
.il-ab-partner .a b{color:var(--il-acc)}
@media (max-width:1024px){.il-ab-2col,.il-ab-2col.is-rev,.il-ab-mv,.il-ab-area,.il-ab-partner,.il-ab-legacy{grid-template-columns:1fr}.il-ab-2col.is-rev > :first-child{order:0}.il-ab-partner .a,.il-ab-legacy .a{display:none}}


/* ===== MOBILE OTP 전용 변형 (.il-otp-*) — INK & LINE ===== */
.il-otp-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.il-otp-two .il-card{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start}
.il-otp-two .il-card svg{margin:0;width:56px;height:56px}
.il-otp-two .il-card h3{font-size:20px;margin-bottom:6px}
.il-otp-two .il-card p{margin:0;font-size:16px;color:var(--il-body);line-height:1.65}
.il-otp-need{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
.il-otp-need .il-nums{grid-template-columns:1fr;gap:0;margin:0}
.il-otp-need .il-num{padding:22px 0;border-top:1px solid var(--il-hair);display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:start}
.il-otp-need .il-num:first-child{border-top:0;padding-top:0}
.il-otp-need .il-num .n{margin:0;font-size:44px}
.il-otp-need .il-num h3{font-size:18px;margin:6px 0 8px;line-height:1.4}
.il-otp-need .il-num p{margin:0;font-size:16px;line-height:1.65;color:var(--il-body)}
.il-otp-shot{border:0;border-radius:0;padding:0;background:transparent;margin:0}
.il-otp-shot figcaption{display:none}
.il-otp-shot img{display:block;width:60%;height:auto;border-radius:12px;margin:0 auto}
.il-otp-shot .img{height:320px;border-radius:8px;background:repeating-linear-gradient(0deg,#f5f6f7 0 8px,#fff 8px 16px);display:flex;align-items:center;justify-content:center;color:var(--il-muted);font-size:13px;text-align:center;padding:16px}
.il-otp-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.il-otp-plans .il-card{text-align:center;padding:40px 32px 36px}
.il-otp-plans .il-card h3{font-size:24px;margin:0 0 10px}
.il-otp-plans .il-card .il-s{font-size:17px;min-height:0;margin-bottom:26px}
.il-otp-f{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.il-otp-f span{font-size:17px;font-weight:800;padding:14px 20px 12px;border-radius:999px;background:var(--il-block);color:var(--il-ink);border:1px solid var(--il-hair)}
.il-otp-f span.k{background:var(--il-acc-soft);border-color:var(--il-acc2);color:var(--il-acc-ink)}
.il-otp-f span.x{background:#fff;border:1px dashed var(--il-ring);color:var(--il-muted);text-decoration:line-through}
.il-otp-f span.g{background:var(--il-dark);color:#fff;border-color:var(--il-dark)}
.il-otp-f i{font-style:normal;font-weight:800;color:var(--il-acc2);font-size:20px}
.il-otp-sum{margin-top:28px;background:#fff;border:1px solid var(--il-hair);border-radius:16px;padding:8px 28px}
.il-otp-sum table{width:100%;border-collapse:collapse;font-size:17px}
.il-otp-sum th,.il-otp-sum td{padding:20px 10px;text-align:center;border-top:1px solid var(--il-hair)}
.il-otp-sum tr:first-child th{border-top:0;font-size:13px;font-weight:800;letter-spacing:1px;color:var(--il-muted)}
.il-otp-sum td:first-child{text-align:left;font-weight:800;color:var(--il-ink)}
.il-otp-sum .y{display:inline-block;width:30px;height:30px;border-radius:50%;background:var(--il-acc-soft);color:var(--il-acc-ink);font-weight:800;line-height:30px}
.il-otp-sum .n{color:var(--il-ring)}
.il-otp-assets{grid-template-columns:repeat(4,1fr);gap:20px}
.il-otp-assets .il-o{width:200px;height:200px}
.il-otp-assets .il-o::before{inset:14px}
.il-otp-assets .il-o svg{width:56px;height:56px}
.il-otp-assets h3{font-size:20px;margin-top:20px}
.il-otp-assets p{font-size:16px;max-width:240px;margin:0 auto}
@media (max-width:1024px){.il-otp-two,.il-otp-need,.il-otp-plans,.il-otp-assets{grid-template-columns:1fr}}


/* ===== LOWCODE 전용 변형 (.il-lc-*) — INK & LINE ===== */
.il-lc-mm{text-align:center;margin:-16px 0 44px}
.il-lc-mm small{display:block;font-size:16px;color:var(--il-muted);margin-bottom:8px}
.il-lc-mm b{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:1px;color:var(--il-ink)}
.il-lc-mm b em{font-style:normal;color:var(--il-acc)}
.il-lc-shift{display:grid;grid-template-columns:1fr auto auto auto 1fr;align-items:center;gap:16px}
.il-lc-shift ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.il-lc-shift li{font-size:17px;font-weight:700;padding:15px 14px 13px;border-radius:999px;text-align:center;background:#fff}
.il-lc-shift .old li{border:1px dashed var(--il-ring);color:var(--il-muted)}
.il-lc-shift .new li{border:1px solid var(--il-acc2);color:var(--il-acc-ink);background:var(--il-acc-soft)}
.il-lc-shift .lab{font-size:14px;font-weight:800;letter-spacing:2px;color:var(--il-muted);text-align:center;margin:0 0 12px}
.il-lc-shift .new .lab{color:var(--il-acc-ink)}
.il-lc-shift .a{color:var(--il-ring);font-size:18px;letter-spacing:-4px}
.il-lc-shift .a b{color:var(--il-acc)}
.il-lc-shift .il-ring .il-o{width:232px;height:232px}
.il-lc-shift .il-ring .il-o::before{inset:16px}
.il-lc-shift .il-ring .il-o svg{width:68px;height:68px}
.il-lc-shift .il-ring h3{font-size:22px;margin-top:16px}
.il-lc-def{max-width:880px;margin:0 auto 44px;background:#fff;border:1px solid var(--il-hair);border-radius:16px;padding:28px 32px}
.il-lc-def b{display:block;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--il-acc-ink);margin-bottom:8px}
.il-lc-def p{margin:0;font-size:18px;line-height:1.7;color:var(--il-ink)}
.il-lc-adv{grid-template-columns:repeat(3,1fr)}
.il-lc-adv .il-card ul{grid-template-columns:1fr}
.il-lc-adv .il-card{padding:40px 40px 34px}
.il-lc-adv .il-card h3{font-size:26px}
.il-lc-adv .il-card svg{width:56px;height:56px}
.il-lc-adv .il-card li{font-size:18px;font-weight:700;color:var(--il-ink);padding:13px 0 13px 20px;border-top:1px solid var(--il-hair)}
.il-lc-adv .il-card li:first-child{border-top:0}
.il-lc-adv .il-card li::before{width:6px;height:6px;top:18px;background:var(--il-acc2)}
.il-lc-need{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:40px}
.il-lc-need .il-card h3{font-size:20px}
.il-lc-need .il-card p{margin:0;font-size:16px;line-height:1.7;color:var(--il-body)}
.il-lc-stack{display:flex;flex-direction:column;align-items:stretch;margin:0 0 32px}
.il-lc-stack .s{border-radius:999px;padding:16px 20px;text-align:center;font-size:16px;font-weight:700;background:#fff;border:1px dashed var(--il-ring);color:var(--il-muted)}
.il-lc-stack .s.mid{border:0;background:var(--il-block);color:var(--il-body)}
.il-lc-stack .s.top{border:1px solid var(--il-hair);color:var(--il-ink);font-size:18px;font-weight:800}
.il-cc.is-key .il-lc-stack .s.mid{background:var(--il-acc-soft);color:var(--il-acc-ink)}
.il-cc.is-key .il-lc-stack .s.top{border-color:var(--il-acc2);color:var(--il-acc-ink)}
.il-lc-stack .d{text-align:center;color:var(--il-ring);font-size:12px;line-height:1;padding:8px 0}
.il-cc.is-key .il-lc-stack .d{color:var(--il-acc2)}
.il-lc-asis{background:#fff;border:1px solid var(--il-hair);border-radius:16px;padding:32px 32px 26px}
.il-lc-asis .lab{font-size:13px;font-weight:800;letter-spacing:2px;color:var(--il-muted);margin:0 0 14px}
.il-lc-asis .row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.il-lc-asis .col h4{margin:0 0 12px;font-size:17px;font-weight:800;text-align:center;padding:13px 10px 11px;border-radius:999px;background:var(--il-block);color:var(--il-ink)}
.il-lc-asis .col p{margin:8px 0 0;font-size:16px;text-align:center;color:var(--il-body);padding:12px 8px;border:1px solid transparent;border-radius:10px;line-height:1.45}
.il-lc-asis .col p.h{border-color:var(--il-acc2);background:var(--il-acc-soft);color:var(--il-acc-ink);font-weight:700}
.il-lc-asis .lg{margin:18px 0 0;font-size:15px;color:var(--il-muted);text-align:right}
.il-lc-asis .lg i{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--il-acc-soft);border:1px solid var(--il-acc2);vertical-align:-1px;margin-right:6px}
.il-lc-down{text-align:center;padding:14px 0;font-size:14px;font-weight:800;color:var(--il-acc-ink);letter-spacing:1px}
.il-lc-down::before{content:"\25BC";display:block;color:var(--il-acc2);font-size:14px;margin-bottom:4px}
.il-lc-tobe{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:#fff;border:1.5px solid var(--il-dark);border-radius:24px;padding:22px 28px}
.il-lc-tobe .lab{font-size:13px;font-weight:800;letter-spacing:2px;color:var(--il-ink);margin:0}
.il-lc-tobe .il-pipe{margin:0;grid-template-columns:1fr auto 1.4fr auto 1fr}
.il-lc-tobe .il-pipe .p{padding:16px 18px}
.il-lc-tobe .gain{display:flex;flex-direction:column;gap:8px}
.il-lc-tobe .gain span{font-size:14px;font-weight:800;padding:8px 14px 6px;border-radius:999px;border:1px solid var(--il-acc2);color:var(--il-acc-ink);background:var(--il-acc-soft);white-space:nowrap}
.il-lc-rec{grid-template-columns:repeat(3,1fr)}
.il-lc-rec .il-card ul{grid-template-columns:1fr}
.il-lc-rec .il-card .il-s{min-height:0}
@media (max-width:1024px){.il-lc-shift,.il-lc-adv,.il-lc-need,.il-lc-rec,.il-lc-tobe{grid-template-columns:1fr}.il-lc-shift .a{display:none}.il-lc-asis .row{grid-template-columns:1fr 1fr}.il-lc-tobe .il-pipe{grid-template-columns:1fr}.il-lc-tobe .il-pipe .a{display:none}}


/* ===== SAP ERP MODERNIZATION 전용 변형 (.il-sap-*) — INK & LINE ===== */
.il-sap-pts{max-width:920px;margin:0 auto 40px;background:#fff;border:1px solid var(--il-hair);border-radius:16px;padding:22px 30px}
.il-sap-pts .il-pts li{border-top:0;padding:8px 0 8px 18px;font-size:17px;color:var(--il-ink)}
.il-sap-mx{background:#fff;border:1px solid var(--il-hair);border-radius:16px;padding:32px}
.il-sap-mx .r{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.il-sap-mx .r + .r{margin-top:10px}
.il-sap-mx .pill{border-radius:999px;padding:18px 14px 16px;text-align:center;font-size:18px;font-weight:800;color:var(--il-ink);background:var(--il-block)}
.il-sap-mx .pill small{display:block;font-size:15px;font-weight:600;color:var(--il-muted);margin-top:2px}
.il-sap-mx .pill.b{background:var(--il-acc-soft);color:var(--il-acc-ink)}
.il-sap-mx .opt{border:1px solid var(--il-hair);border-radius:12px;padding:18px 20px;font-size:17px;color:var(--il-body);line-height:1.6}
.il-sap-mx .opt.w2{grid-column:span 2}
.il-sap-mx .dn{text-align:center;color:var(--il-acc2);font-size:12px;line-height:1;padding:8px 0}
.il-sap-mx .bar{background:var(--il-dark);color:#fff;border-radius:999px;padding:20px;text-align:center;font-size:19px;font-weight:800;margin:12px 0}
.il-sap-lic{max-width:920px;margin:0 auto;display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:start;background:#fff;border:1.5px solid var(--il-dark);border-radius:24px;padding:36px 40px}
.il-sap-lic svg{width:72px;height:72px}
.il-sap-lic h3{margin:0 0 10px;font-size:24px;font-weight:800}
.il-sap-lic .il-pts li{font-size:16px}
.il-sap-env{display:grid;grid-template-columns:1fr 56px 1fr 56px 1fr;gap:0;align-items:stretch}
.il-sap-env .a{display:flex;align-items:center;justify-content:center;color:var(--il-acc);font-size:24px}
.il-sap-col{background:#fff;border:1px solid var(--il-hair);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.il-sap-col.is-si{border-style:dashed;border-color:var(--il-ring)}
.il-sap-col.is-key{border-color:var(--il-dark)}
.il-sap-col .h{padding:18px 24px;font-size:16px;font-weight:800;letter-spacing:1px;background:var(--il-block);color:var(--il-sub, #464c53)}
.il-sap-col .h small{display:block;font-size:15px;font-weight:600;letter-spacing:0;color:var(--il-muted);margin-top:2px}
.il-sap-col.is-key .h{background:var(--il-dark);color:#fff}
.il-sap-col.is-key .h small{color:rgba(255,255,255,.65)}
.il-sap-col .top{padding:22px 24px 6px;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;align-content:flex-start}
.il-sap-col .top span{font-size:15px;font-weight:800;padding:9px 13px 7px;white-space:nowrap;border-radius:999px;border:1px solid var(--il-acc2);color:var(--il-acc-ink);background:var(--il-acc-soft)}
.il-sap-col .top span.g{border-color:var(--il-hair);background:#fff;color:var(--il-body);font-weight:600}
.il-sap-col .mods{padding:8px 24px 18px;display:flex;flex-wrap:wrap;gap:6px}
.il-sap-col .mods span{font-size:15px;font-weight:700;padding:7px 11px 5px;border-radius:999px;background:var(--il-block);color:var(--il-sub, #464c53)}
.il-sap-col .mods span.n{border:1px dashed var(--il-ring);background:#fff;color:var(--il-muted)}
.il-sap-col .lay{margin:auto 0 0;padding:0 20px 20px;display:flex;flex-direction:column;gap:6px}
.il-sap-col .lay span{font-size:16px;font-weight:700;text-align:center;padding:14px;border-radius:8px;border:1px solid var(--il-hair);color:var(--il-body)}
.il-sap-col .lay span.d{background:var(--il-block)}
.il-sap-caps{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.il-sap-caps li{font-size:15px;font-weight:700;padding:9px 14px 7px;white-space:nowrap;border-radius:999px;border:1px solid var(--il-hair);background:#fff;color:var(--il-body)}
.il-sap-caps li.k{border-color:var(--il-acc2);color:var(--il-acc-ink);background:var(--il-acc-soft)}
.il-sap-flow{display:grid;grid-template-columns:1fr auto 1.3fr auto 1fr;gap:0;align-items:start}
.il-sap-flow .role{font-size:14px;font-weight:800;letter-spacing:1px;color:var(--il-muted);text-align:center;margin:0 0 12px;padding:8px;border-radius:999px;background:var(--il-block)}
.il-sap-flow .il-ring .il-o{width:232px;height:232px}
.il-sap-flow .il-ring .il-o::before{inset:14px}
.il-sap-flow .il-ring .il-o svg{width:64px;height:64px}
.il-sap-flow .il-ring h3{font-size:22px;margin-top:16px}
.il-sap-flow .il-ring p{font-size:16px;max-width:300px;margin:0 auto}
.il-sap-flow .aw{padding:112px 10px 0;text-align:center}
.il-sap-flow .aw b{display:block;color:var(--il-acc);font-size:18px;letter-spacing:-3px}
.il-sap-flow .aw small{display:block;font-size:15px;font-weight:700;color:var(--il-acc-ink);margin-top:6px;line-height:1.35}
.il-sap-logic{display:grid;grid-template-columns:1fr 1.6fr;gap:24px;align-items:start}
.il-sap-logic .il-card.is-key{border-color:var(--il-dark)}
.il-sap-logic .il-card ul{grid-template-columns:1fr}
.il-sap-rows{display:flex;flex-direction:column;gap:10px}
.il-sap-rows .rw{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center}
.il-sap-rows .rw b{font-size:17px;font-weight:800;text-align:center;padding:16px 12px 14px;border-radius:999px;border:1px solid var(--il-acc2);color:var(--il-acc-ink);background:#fff}
.il-sap-rows .rw p{margin:0;font-size:17px;color:var(--il-ink);background:var(--il-block);border-radius:12px;padding:18px 22px;line-height:1.5}
.il-sap-ux{grid-template-columns:1fr 1fr}
.il-sap-ux .il-card ul{grid-template-columns:1fr}
.il-sap-ux .il-card .il-s{min-height:0}
.il-sap-ux .chips{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.il-sap-ux .chips li{font-size:15px;font-weight:800;padding:10px 14px 8px;text-align:center;border-radius:999px;border:1px solid var(--il-acc2);color:var(--il-acc-ink);background:var(--il-acc-soft)}
.il-sap-ux .chips li::before{display:none}
@media (max-width:1024px){.il-sap-mx .r{grid-template-columns:1fr 1fr}.il-sap-mx .opt.w2{grid-column:auto}.il-sap-env,.il-sap-flow,.il-sap-logic,.il-sap-ux{grid-template-columns:1fr}.il-sap-env .a,.il-sap-flow .aw{display:none}.il-sap-lic{grid-template-columns:1fr}.il-sap-rows .rw{grid-template-columns:1fr}}

/* IL:TUNE 09-02 --- process cards + lowcode diagram */
.il-po-cards .il-card .il-k{font-size:14px}
.il-po-cards .il-card h3{font-size:26px}
.il-po-cards .il-card li{font-size:17px;line-height:1.65}
.il-po-cards .il-card li::before{top:19px}
.il-po-cards3 .il-card h3{font-size:24px}
.il-po-cards3 .il-card h3 small{font-size:17px}
.il-po-cards3 .il-card .il-s{font-size:17px;line-height:1.75}
.il-lc-shift{max-width:1180px;margin:0 auto;gap:20px}
.il-lc-shift li{font-size:19px;padding:17px 18px 15px}
.il-lc-shift .lab{font-size:15px}
.il-lc-shift .a{font-size:22px;letter-spacing:-5px}
.il-lc-shift .il-ring .il-o{width:264px;height:264px}
.il-lc-shift .il-ring .il-o::before{inset:18px}
.il-lc-shift .il-ring .il-o svg{width:72px;height:72px}
.il-lc-shift .il-ring h3{font-size:24px}
.il-lc-shift .il-ring p{font-size:17px}

/* [U7-4b] CI 페이지 자산 확보 — 09-02. 점선 해제 · 신규 섹션(서체) · 다운로드 활성 */
.ci-stage{border-style:solid;padding:28px}
.ci-stage .ci-art{display:block;width:100%;max-width:340px;height:auto}
.ci-stage--sym .ci-art{max-width:150px}
.ci-stage--tall .ci-art{max-width:170px}
.ci-sig--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ci-color--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ci-web-h{margin:28px 0 0;max-width:1280px;font-size:15px;font-weight:700;color:var(--k-gray-50,#6d7882)}
.ci-web{margin-top:18px;max-width:1280px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ci-web .ci-chip{background:var(--k-gray-5,#f5f6f7)}
.ci-web .ci-swatch{width:56px;height:56px}
.ci-type{margin-top:28px;max-width:1280px;display:grid;gap:18px}
.ci-type-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--ez2-r-btn,6px);align-items:center}
.ci-type-row h3{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--ink)}
.ci-type-row .ci-spec{font-size:14px}
.ci-type-sp{font-size:22px;line-height:1.5;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.ci-type-sp.is-title{font-family:"LotteMart Dream Bold","LotteMartDream",inherit;font-weight:800;color:rgba(26,26,26,.8)}
.ci-type-sp.is-body{font-family:"SanDol Gothic M","SandollGothic",inherit}
.ci-type-sp.is-en{font-family:"Futura Bold BT","Futura",inherit;font-weight:800;letter-spacing:-.01em}
.ci-rule-item ul{margin:6px 0 0;padding:0 0 0 14px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.ci-rule-item .ci-note{margin-top:8px;font-size:13px}
.ci-grid{display:block;width:100%;height:auto;margin:6px 0 10px}
.ci-min{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-end;margin:10px 0 6px;padding:14px;background:var(--k-gray-5,#f5f6f7);border-radius:6px}
.ci-min figure{margin:0;text-align:center}
.ci-min figcaption{font-size:12px;color:var(--k-gray-50,#6d7882);margin-top:6px}
.ci-min .ci-art{display:block;height:auto}
a.ci-dl-btn{color:var(--ink);background:#fff;cursor:pointer;text-decoration:none;border-color:#cdd1d5}
a.ci-dl-btn:hover{border-color:var(--sky);color:var(--sky)}
.ci-dl-sub{display:block;margin-top:6px;font-size:13px;color:var(--k-gray-40,#8a949e)}
@media(max-width:1024px){.ci-sig--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.ci-sig--4{grid-template-columns:minmax(0,1fr)}.ci-color--3{grid-template-columns:minmax(0,1fr)}.ci-web{grid-template-columns:minmax(0,1fr)}.ci-type-row{grid-template-columns:minmax(0,1fr)}}
/* [U7-4b:END] */

/* ===== [U9-CS] cases 허브 — INK & LINE 셸 (09-02). 카드·로고월 컴포넌트(.ez2-csp/.cf-*/.ez2-csw/.cw-*)는 원본 규칙 그대로, 셸·필터 래퍼만 추가 ===== */
.il-sec .il-cs-stats{margin-top:0;background:#fff;border:1px solid var(--il-hair);border-radius:16px}
.il-cs-filter{max-width:1280px;margin:0 auto 24px;padding:16px 24px;background:#fff;border:1px solid var(--il-hair);border-radius:16px}
.il-cs-filter .ez2-csf{margin:0;max-width:none}
.il-cs-lab{font-size:13px;font-weight:800;letter-spacing:1px;color:var(--il-muted);margin-right:8px}
.il-sec .ez2-csp-card,.il-sec .ez2-csw-cell{border-color:var(--il-hair)}
.il-sec .cf-logo{border-bottom-color:var(--il-hair)}
.il-sec .cf-desc,.il-sec .cw-desc{color:var(--il-body)}
.il-sec .cw-desc{font-size:14px}
@media(max-width:768px){.il-cs-filter{padding:14px 16px}.il-cs-lab{width:100%;margin:0 0 4px}}
/* [U9-CS:END] */

/* [U9-CS2] cases 전체 통합 — 필터 2행 (09-02) */
.il-cs-filter{display:grid;gap:10px}
.il-cs-filter .ez2-csf+.ez2-csf{padding-top:10px;border-top:1px solid var(--il-hair)}
/* [U9-CS2:END] */

/* [U9-DP] cases/devpack 사례 페이지 (09-02) */
.il-cs-note{max-width:1280px;margin:24px auto 0;font-size:14px;color:var(--il-muted)}
.il-cs-note a{color:var(--il-acc-ink);font-weight:700;text-decoration:none;border-bottom:1px solid var(--il-acc2)}
/* [U9-DP:END] */

/* [U9-CS3] cases filter ? box removed, chips only (09-02) */
.il-cs-filter{background:transparent;border:0;border-radius:0;padding:0}
/* [U9-CS3:END] */

/* [U10-BLOG] blog chip filter */
.blog-card[hidden]{display:none!important}

/* [GUIDE] 가이드 본문·진입 링크 — common.css a{color:inherit;text-decoration:none} 로 링크가 안 보여서.
   값은 .mdz-dfg a (pages.css:952) 에서 색·굵기·밑줄만 가져옴 */
.ez2-guide a{color:#256ef4;font-weight:700;text-decoration:none;border-bottom:1.5px solid #d8e5fd;}
/* [GUIDE:END] */