/*
 * bizpr_plan.css
 * 요금제 상세페이지(Standard/Premium/Enterprise/Enterprise Custom) 공통 스타일
 * 원본 상세페이지 인라인 style(고유 60종)을 .plan-* 클래스로 정리한 것으로,
 * 색상/수치 등 값은 원안을 그대로 옮겼다 (변경 금지 대상).
 * 사용처: SPTL_PT/web/sp/bizpr/bizpr_0002_01~04_view.jsp
 */

/* ===== Poppins : 등급 배지(STANDARD/PREMIUM/ENTERPRISE...) 전용 =====
   마케팅 원안이 base64 로 내장하고 있던 서브셋 폰트(600 only, 8KB)를 정적 파일로 분리한 것.
   이 선언이 없으면 sans-serif 로 폴백되어 원안과 글꼴이 달라 보인다. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/font/Poppins-600.woff2") format("woff2");
}

/* ===== page wrapper : 헤더/푸터까지 포함해 0.95배 축소, 링크 색상/box-sizing 스코프 ===== */
.plan-page {
  zoom: 0.95;
  font-family: Pretendard, "Malgun Gothic", -apple-system, sans-serif;
  color: #231815;
}
.plan-page * { box-sizing: border-box; }
.plan-page a { color: #1A32D8; text-decoration: none; }
.plan-page a:hover { color: #14259F; }

/* ===== hero ===== */
.plan-hero { padding: 160px 20px 60px; }
.plan-container { max-width: 1320px; margin: 0 auto; }

.plan-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px; border-radius: 999px; background: #EDEEFD;
  margin-bottom: 22px;
}
.plan-badge-dot { width: 6px; height: 6px; border-radius: 999px; background: #1A32D8; }
.plan-badge-txt {
  font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600;
  color: #1A32D8; letter-spacing: 0.04em;
}
.plan-badge-txt-nowrap {
  font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600;
  color: #1A32D8; letter-spacing: 0.04em; white-space: nowrap;
}

.plan-h1 {
  margin: 0; max-width: 900px; font-size: 30px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.45; color: #231815; text-wrap: pretty;
}
.plan-h1-keepall {
  margin: 0; max-width: 900px; font-size: 30px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.45; color: #231815; text-wrap: pretty;
  word-break: keep-all;
}

/* ===== section wraps (배경색 변형) ===== */
.plan-sect { padding: 95px 20px; }
.plan-sect-white { padding: 95px 20px; background: #fff; }
.plan-sect-fafafd { padding: 95px 20px; background: #FAFAFD; }
.plan-sect-f4f5fb { padding: 95px 20px; background: #F4F5FB; }

.plan-sect-tit { text-align: center; margin-bottom: 68px; }
.plan-sect-tit2 { text-align: center; margin-bottom: 49px; }
.plan-sect-tit3 { text-align: center; margin-bottom: 52px; }

.plan-h2 { margin: 0 0 14px; font-size: 38px; font-weight: 800; letter-spacing: -0.035em; color: #231815; }
.plan-h2-tight { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -0.035em; color: #231815; }
.plan-sect-desc { margin: 0; font-size: 14px; line-height: 1.6; color: #A5A9B8; }

/* ===== 기능 소개 행 (이미지 + 텍스트, 좌우 반전 포함) ===== */
.plan-feat-grid { display: grid; gap: 104px; }

.plan-feat-row { display: grid; grid-template-columns: 1.32fr 1fr; gap: 53px; align-items: center; }
.plan-feat-row-rev { display: grid; grid-template-columns: 1fr 1.32fr; gap: 53px; align-items: center; }

.plan-feat-media { order: 1; display: flex; align-items: center; justify-content: center; }
.plan-feat-media-rev { order: 2; display: flex; align-items: center; justify-content: center; }
.plan-feat-txt { order: 2; }
.plan-feat-txt-rev { order: 1; }

.plan-feat-img { width: 100%; height: auto; max-height: 560px; object-fit: contain; display: block; }
.plan-feat-img-sm { width: 100%; height: auto; max-height: 430px; object-fit: contain; display: block; }
.plan-feat-img-blend { width: 100%; height: auto; max-height: 560px; object-fit: contain; display: block; mix-blend-mode: multiply; }
.plan-feat-img-blend-b { width: 100%; height: auto; max-height: 560px; object-fit: contain; mix-blend-mode: multiply; }
.plan-feat-img-sm-blend { width: 100%; height: auto; max-height: 430px; object-fit: contain; mix-blend-mode: multiply; }
.plan-feat-img-plain { width: 100%; height: auto; max-height: 560px; object-fit: contain; }

.plan-feat-bar { width: 32px; height: 4px; border-radius: 2px; background: #1A32D8; margin-bottom: 14px; }
.plan-feat-h3 { margin: 0 0 16px; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.35; color: #231815; }
.plan-feat-h3-keepall { margin: 0 0 16px; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.35; color: #231815; word-break: keep-all; }
.plan-feat-desc { margin: 0 0 30px; font-size: 17px; line-height: 1.7; color: #4A4F63; }

.plan-feat-list { display: grid; gap: 16px; }
.plan-bullet { display: flex; gap: 11px; align-items: flex-start; }
.plan-bullet-dot { width: 5px; height: 5px; border-radius: 999px; background: #1A32D8; margin-top: 10px; flex-shrink: 0; }
.plan-bullet-txt { font-size: 16px; line-height: 1.65; color: #4A4F63; }
.plan-bullet-strong { color: #231815; font-weight: 700; }

/* ===== 확장/부가 기능 카드 ===== */
.plan-card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 648px; margin: 0 auto; }
.plan-card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 984px; margin: 0 auto; }
.plan-card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.plan-card-free,
.plan-card-paid {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid #E4E6F2; border-radius: 16px;
  padding: 30px 26px; cursor: pointer; transition: all .18s;
}
.plan-card-free:hover { border-color: #1A32D8; box-shadow: 0 12px 30px rgba(26,50,216,0.10); transform: translateY(-3px); }
.plan-card-paid:hover { border-color: #433EDD; box-shadow: 0 12px 30px rgba(67,62,221,0.12); transform: translateY(-3px); }

.plan-card-icon { width: 52px; height: 52px; border-radius: 13px; margin-bottom: 22px; display: block; object-fit: cover; }
.plan-card-tit { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #231815; margin-bottom: 11px; }
.plan-card-desc { font-size: 15px; line-height: 1.65; color: #4A4F63; }
.plan-card-desc-pretty { font-size: 15px; line-height: 1.65; color: #4A4F63; text-wrap: pretty; }
.plan-card-foot { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 20px; }

.plan-tag-free { padding: 5px 11px; border-radius: 5px; background: #EDEEFD; color: #1A32D8; font-size: 12px; font-weight: 700; }
.plan-tag-paid { padding: 5px 11px; border-radius: 5px; background: #ECEBFB; color: #433EDD; font-size: 12px; font-weight: 700; }

/* ===== 가격 정보 ===== */
.plan-price-sect { padding: 44px 20px 56px; border-top: 1px solid #EDEEF1; }
.plan-price-row { display: flex; flex-wrap: wrap; gap: 28px 44px; }
.plan-price-item { display: flex; align-items: baseline; gap: 10px; }
.plan-price-label { font-size: 13px; font-weight: 500; color: #A5A9B8; }
.plan-price-value { font-size: 14px; font-weight: 600; color: #6E7385; font-variant-numeric: tabular-nums; }
.plan-price-unit { font-size: 13px; font-weight: 400; color: #A5A9B8; }

/* 미연결 부가기능(앱 미등록) : 클릭 동작이 없으므로 손가락 커서만 표시하지 않는다.
   hover 시각 효과는 원안 그대로 유지한다. */
.plan-card-off { cursor: default; }