@charset "utf-8";
/* biz_01 (NOVA) 테마 · 일반페이지 전용 스타일 */

.b01-page{--blue:#2E6BFF;--blue2:#4C8DFF;--navy:#0B1220;--line:#E5E7EB;--gray:#6B7280;--bg:#F6F8FB}

/* 일반페이지는 자체 여백을 쓰므로 콘텐츠 래퍼의 기본 여백을 줄인다 */
.b01-content:has(.b01-page){padding:0 0 0}
.b01-content:has(.b01-page)>.wrap{max-width:none;padding:0}

/* ── 묶음 탭 ─────────────────────────────────── */
.b01-pgtabs{background:#fff;border-bottom:1px solid var(--line)}
.b01-pgtabs ul{display:flex;gap:4px;max-width:1280px;margin:0 auto;padding:0 24px;overflow-x:auto}
.b01-pgtabs a{display:block;padding:16px 22px;font-size:15px;color:#6B7280;white-space:nowrap;border-bottom:2px solid transparent}
.b01-pgtabs a.on{color:#2E6BFF;border-bottom-color:#2E6BFF;font-weight:700}
.b01-pgtabs a:hover{color:#111827}

/* ── 공통 ────────────────────────────────────── */
.b01-page .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.b01-page .pg-sec{padding:86px 0}
.b01-page .pg-sec.tone-gray{background:var(--bg)}
.b01-page .pg-sec.tone-dark{background:var(--navy);color:rgba(255,255,255,.78)}
.b01-page .pg-sec.tone-dark .pg-h,.b01-page .pg-sec.tone-dark h3,.b01-page .pg-sec.tone-dark h4{color:#fff}
.b01-page .pg-lb{display:block;font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:14px;color:var(--blue2)}
.b01-page .pg-lb.b{color:var(--blue)}
.b01-page .pg-h{font-size:clamp(24px,2.9vw,38px);font-weight:900;line-height:1.35;letter-spacing:-.01em;margin-bottom:36px}
.b01-page .pg-text{font-size:16.5px;line-height:1.95;color:#374151}
.b01-page .pg-text strong{color:var(--blue)}
.b01-page .ph{font-family:'Space Grotesk',sans-serif;letter-spacing:.28em;font-size:12px;color:#A7B0BE}

/* ── lead : 다크 도입부 ──────────────────────── */
.b01-page .pg-lead{background:
  radial-gradient(at 18% 30%, #16306B 0, transparent 55%),
  radial-gradient(at 82% 70%, #123C8F 0, transparent 50%), var(--navy);
  color:#fff;padding:92px 0}
.b01-page .pg-lead h3{font-size:clamp(26px,3.4vw,44px);font-weight:900;line-height:1.4;letter-spacing:-.02em}
.b01-page .pg-lead h3 em{font-style:normal;color:var(--blue2)}
.b01-page .pg-lead p{margin-top:22px;max-width:760px;font-size:17px;font-weight:300;line-height:1.9;color:rgba(255,255,255,.72)}

/* ── media : 이미지 + 글 ─────────────────────── */
.b01-page .pg-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.b01-page .pg-media.rev .fig{order:2}
.b01-page .pg-media .fig{aspect-ratio:4/3;border-radius:20px;background:#EDF1F7;display:flex;align-items:center;justify-content:center;overflow:hidden}
.b01-page .pg-media h3{font-size:clamp(22px,2.4vw,30px);font-weight:900;line-height:1.4}
.b01-page .pg-media p{margin-top:16px;font-size:16px;line-height:1.9;color:#4B5563}
.b01-page .pg-sec.tone-dark .pg-media p{color:rgba(255,255,255,.72)}
.b01-page .pg-checks{margin-top:22px}
.b01-page .pg-checks li{position:relative;padding-left:28px;margin-bottom:11px;font-size:15.5px;color:#374151}
.b01-page .pg-checks li::before{content:'';position:absolute;left:0;top:8px;width:14px;height:8px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.b01-page .pg-sec.tone-dark .pg-checks li{color:rgba(255,255,255,.8)}

/* ── imggrid ─────────────────────────────────── */
.b01-page .pg-imggrid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:24px}
.b01-page .pg-imggrid .fig{aspect-ratio:4/3;border-radius:16px;background:#EDF1F7;display:flex;align-items:center;justify-content:center;overflow:hidden}
.b01-page .pg-imggrid figcaption{padding-top:14px}
.b01-page .pg-imggrid figcaption b{display:block;font-size:16px}
.b01-page .pg-imggrid figcaption span{display:block;margin-top:5px;font-size:13.5px;color:var(--gray)}

/* ── points ──────────────────────────────────── */
.b01-page .pg-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.b01-page .pg-points .pt{border:1px solid var(--line);border-radius:16px;padding:32px 28px;background:#fff;transition:.3s}
.b01-page .pg-points .pt:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(17,24,39,.1);border-color:transparent}
.b01-page .pg-points .no{display:block;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--blue);margin-bottom:14px}
.b01-page .pg-points h4{font-size:18px;margin-bottom:10px}
.b01-page .pg-points p{font-size:14.5px;color:var(--gray);line-height:1.8}

/* ── steps : 세로 타임라인 (연혁) ───────────── */
/* 왼쪽 라벨 칸 너비는 --lab 하나로 관리한다.
   연도(2026)면 110px, '03 기술면접' 처럼 긴 라벨이면 page.section.php 가 .wide 를 붙여 넓힌다. */
.b01-page .pg-steps{--lab:110px;position:relative;padding-left:8px}
.b01-page .pg-steps.wide{--lab:172px}
.b01-page .pg-steps::before{content:'';position:absolute;left:var(--lab);top:8px;bottom:8px;width:2px;background:linear-gradient(to bottom,var(--blue),rgba(46,107,255,.12))}
.b01-page .pg-steps li{position:relative;display:grid;grid-template-columns:var(--lab) minmax(0,1fr);gap:38px;padding-bottom:32px}
.b01-page .pg-steps li::before{content:'';position:absolute;left:calc(var(--lab) - 6px);top:9px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--blue);z-index:1}
/* padding-right 는 라벨이 세로선·점에 달라붙지 않게 띄우는 것입니다 (점이 선 위에 걸쳐 있음) */
.b01-page .pg-steps .yr{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:700;color:var(--navy);text-align:right;line-height:1.4;padding-right:26px}
.b01-page .pg-steps.wide .yr{font-size:18px;white-space:nowrap}
.b01-page .pg-steps .d{font-size:15.5px;line-height:1.9;color:#374151}
.b01-page .pg-sec.tone-dark .pg-steps .yr{color:#fff}
.b01-page .pg-sec.tone-dark .pg-steps .d{color:rgba(255,255,255,.72)}
.b01-page .pg-sec.tone-dark .pg-steps li::before{background:var(--navy)}

/* ── stats ───────────────────────────────────── */
.b01-page .pg-stats{background:var(--navy);color:#fff;padding:76px 0}
.b01-page .pg-stats .pg-h{text-align:center;color:#fff}
.b01-page .pg-stats ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.b01-page .pg-stats b{display:block;font-family:'Space Grotesk',sans-serif;font-size:clamp(34px,4vw,52px);font-weight:700;color:var(--blue2)}
.b01-page .pg-stats b small{font-size:.5em;margin-left:4px;color:rgba(255,255,255,.8)}
.b01-page .pg-stats span{display:block;margin-top:8px;font-size:14.5px;color:rgba(255,255,255,.62)}

/* ── table : 비교표·재무표 ───────────────────── */
.b01-page .pg-tblwrap{overflow-x:auto}
.b01-page .pg-tbl{width:100%;min-width:560px;border-collapse:collapse;border-top:2px solid var(--navy);background:#fff;font-size:15px}
.b01-page .pg-tbl th{padding:15px 16px;background:var(--bg);border-bottom:1px solid var(--line);font-family:'Space Grotesk',sans-serif;font-size:13.5px;letter-spacing:.04em;color:var(--navy);text-align:center;white-space:nowrap}
.b01-page .pg-tbl td{padding:15px 16px;border-bottom:1px solid var(--line);text-align:center;color:#374151;line-height:1.7}
.b01-page .pg-tbl td.c1{text-align:left;font-weight:700;color:var(--navy)}
.b01-page .pg-tbl tbody tr:hover{background:#F9FBFF}
.b01-page .pg-tbl strong{color:var(--blue)}
.b01-page .pg-tblnote{margin-top:14px;font-size:13.5px;color:var(--gray);line-height:1.8}
.b01-page .pg-sec.tone-dark .pg-tbl{background:transparent;border-top-color:var(--blue2)}
.b01-page .pg-sec.tone-dark .pg-tbl th{background:rgba(255,255,255,.06);color:#fff;border-bottom-color:rgba(255,255,255,.14)}
.b01-page .pg-sec.tone-dark .pg-tbl td{color:rgba(255,255,255,.78);border-bottom-color:rgba(255,255,255,.1)}
.b01-page .pg-sec.tone-dark .pg-tbl td.c1{color:#fff}
.b01-page .pg-sec.tone-dark .pg-tbl tbody tr:hover{background:rgba(255,255,255,.04)}

/* ── map ─────────────────────────────────────── */
.b01-page .pg-map{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:36px;align-items:start}
.b01-page .pg-map .m{aspect-ratio:16/10;border-radius:18px;background:#EDF1F7;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center;padding:20px}
.b01-page .pg-map .m iframe,.b01-page .pg-map .m img{width:100%;height:100%;border:0;border-radius:18px}
.b01-page .pg-map dl{border-top:2px solid var(--navy)}
.b01-page .pg-map dt{padding:16px 4px 4px;font-family:'Space Grotesk',sans-serif;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.b01-page .pg-map dd{padding:0 4px 16px;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.8}

/* ── cta ─────────────────────────────────────── */
.b01-page .pg-cta{background:
  radial-gradient(at 80% 20%, #123C8F 0, transparent 50%),
  radial-gradient(at 15% 80%, #16306B 0, transparent 55%), var(--navy);
  color:#fff;padding:96px 0;text-align:center}
.b01-page .pg-cta h3{font-size:clamp(26px,3.4vw,42px);font-weight:900;line-height:1.35}
.b01-page .pg-cta p{margin-top:16px;color:rgba(255,255,255,.7)}
.b01-page .pg-cta .act{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.b01-page .pg-cta .btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 32px;border-radius:999px;font-size:16px;font-family:'Space Grotesk',sans-serif;font-weight:700;border:1px solid transparent;transition:.25s}
.b01-page .pg-cta .btn.blue{background:var(--blue);color:#fff}
.b01-page .pg-cta .btn.blue:hover{background:#1f56e0}
.b01-page .pg-cta .btn.ghost{border-color:rgba(255,255,255,.45);color:#fff}
.b01-page .pg-cta .btn.ghost:hover{background:rgba(255,255,255,.12)}

/* ── note ────────────────────────────────────── */
.b01-page .pg-note{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:22px 26px}
.b01-page .pg-note b{display:block;font-size:15px;margin-bottom:8px}
.b01-page .pg-note p{font-size:13.5px;line-height:1.85;color:var(--gray)}

/* ── 반응형 ──────────────────────────────────── */
@media (max-width:1024px){
  .b01-page .pg-points{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b01-page .pg-map{grid-template-columns:minmax(0,1fr)}
  .b01-page .pg-stats ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px}
}
@media (max-width:768px){
  .b01-page .pg-sec{padding:60px 0}
  .b01-page .pg-lead{padding:62px 0}
  .b01-page .pg-media,.b01-page .pg-imggrid{grid-template-columns:minmax(0,1fr);gap:26px}
  .b01-page .pg-media.rev .fig{order:0}
  .b01-page .pg-steps::before{left:6px}
  .b01-page .pg-steps li{grid-template-columns:minmax(0,1fr);gap:6px;padding-left:32px;padding-bottom:26px}
  .b01-page .pg-steps li::before{left:0}
  .b01-page .pg-steps .yr{text-align:left;font-size:18px;padding-right:0}
  .b01-page .pg-cta{padding:66px 0}
}
@media (max-width:480px){
  .b01-page .pg-points{grid-template-columns:minmax(0,1fr)}
}