/* ============================================================
   LLM Capsule — /request-a-demo
   2026-08-05: 공홈 /contact 2단 구조(좌 콘텐츠 / 우 폼)를 채택하되,
   스타일은 캡슐 사이트 디자인 언어(아키텍처·제품 페이지와 동일 — 블루
   eyebrow·Pretendard 제목·번호 스텝·캡슐 카드·블루 CTA)로 재스타일.
   좌측 메인 = 4단계 진행 방식(전하 지시). 정보레일은 압축해 하단 보조.
   input/select/textarea·제목은 전역 !important 규칙을 이기려 !important 사용.
   ============================================================ */

.rpov-page {
  overflow-x: clip;
  --rq-ink:      var(--c-ink, #0f1130);
  --rq-ink-soft: var(--c-ink-soft, #3a3d5e);
  --rq-muted:    var(--c-muted, #6b7280);
  --rq-rule:     var(--c-rule, #e9edf3);
  --rq-rule-soft: var(--c-rule-soft, #eef1f6);
  --rq-bg:       var(--c-bg, #ffffff);
  --rq-bg-soft:  var(--c-bg-soft, #f7f8fb);
  --rq-primary:  var(--c-primary, #1A6FFF);
  --rq-primary-dark: var(--color-primary-hover, #1458D4);
  --rq-eyebrow:  var(--color-eyebrow, #1458D4);
  --rq-tint:     var(--color-accent-green-tint, #E0EEFF);
  --rq-f-sans:   var(--f-display, var(--font-primary, 'Pretendard', system-ui, sans-serif));
  --rq-f-mono:   var(--f-mono, var(--font-mono, 'JetBrains Mono', monospace));
  --rq-wrap:     var(--container-max, 1280px);
  --rq-px:       var(--s-page, clamp(20px, 4vw, 40px));

  color: var(--rq-ink);
  font-family: var(--rq-f-sans);
  background: var(--rq-bg);
  /* 한국어 줄바꿈: keep-all은 어절 중간에서 끊기지 않게 해(예: 'LLM/Capsule을'
     쪼개짐, 조사만 다음 줄로 넘어가는 현상 방지) 공백 단위로 자연스럽게 흐른다. */
  word-break: keep-all;
}
.rpov-page *, .rpov-page *::before, .rpov-page *::after { box-sizing: border-box; }

/* ── 섹션 + 은은한 블루 글로우 ──
   overflow는 여기 두지 않는다. overflow:hidden/clip을 섹션에 걸면 이 섹션이
   sticky 스크롤 컨테이너가 되어, 우측 폼이 sticky top(96px)만큼 아래로 밀려
   헤드카피 상단과 어긋난다. 가로 넘침(글로우)은 부모 .rpov-page의
   overflow-x:clip이 막으므로 섹션은 visible로 둔다. */
.rpov-contact { position: relative; padding: clamp(64px, 8vw, 112px) 0 clamp(56px, 8vw, 112px); }
.rpov-contact::before {
  content: ""; position: absolute; top: -4%; right: -6%;
  width: 680px; max-width: 90vw; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(26, 111, 255, 0.08), rgba(26, 111, 255, 0) 62%);
  pointer-events: none; z-index: 0;
}
.rpov-contact__inner {
  position: relative; z-index: 1;
  max-width: var(--rq-wrap); margin: 0 auto; padding: 0 var(--rq-px);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
/* 좌측은 3개 그룹(인트로 / 데모 진행 방식 / 일반 문의)으로 명확히 분리한다.
   각 후속 그룹은 상단 hairline + 대칭 여백(위 margin ≈ 아래 padding)으로
   구분해 "한 덩어리 텍스트"가 아니라 3개 블록으로 읽히게 한다. */
.rpov-intro      { grid-column: 1; grid-row: 1; }
.rpov-expect     { grid-column: 1; grid-row: 2; margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--rq-rule); }
.rpov-info       { grid-column: 1; grid-row: 3; margin-top: 48px; }
.rpov-form-shell { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 96px; }

/* ── 인트로 ── */
.rpov-intro__eyebrow {
  display: inline-block; font-family: var(--rq-f-mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rq-eyebrow); margin-bottom: 16px;
}
.rpov-intro__title {
  font-family: var(--rq-f-sans);
  font-size: clamp(32px, 4vw, 46px) !important;
  font-weight: 700 !important; letter-spacing: -0.025em; line-height: 1.1 !important;
  color: var(--rq-ink); margin: 0 0 18px !important; text-wrap: balance;
}
.rpov-intro__body { font-size: 17px; line-height: 1.7; color: var(--rq-ink-soft); text-wrap: pretty; }

/* ── 4단계 (좌측 메인) ──
   편집 디자인: 원형 배지를 걷어내고 번호(모노 숫자)만 마커로 쓴다. 스텝
   사이는 그룹 구분선(--rq-rule)보다 옅은 헤어라인(--rq-rule-soft)으로 나눠
   위계를 만든다. 본문은 컬럼 풀폭이라 타이틀·서브타이틀과 오른쪽 끝이 맞는다. */
.rpov-expect__h {
  font-family: var(--rq-f-sans);
  font-size: 21px !important; font-weight: 700 !important; letter-spacing: -0.015em;
  color: var(--rq-ink); margin: 0 0 10px !important;
}
.rpov-expect__intro { font-size: 15px; line-height: 1.65; color: var(--rq-ink-soft); margin: 0 0 36px; text-wrap: pretty; }
.rpov-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rpov-step { display: flex; gap: 16px; align-items: baseline; }
.rpov-step:not(:first-child) {
  margin-top: 26px; padding-top: 26px;
  border-top: 1px solid var(--rq-rule-soft);
}
.rpov-step__num {
  flex: 0 0 auto; min-width: 26px;
  font-family: var(--rq-f-mono); font-size: 15px; font-weight: 700;
  color: var(--rq-eyebrow); letter-spacing: 0.02em;
}
.rpov-step__c { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rpov-step__name { font-size: 16.5px; font-weight: 650; color: var(--rq-ink); letter-spacing: -0.01em; }
.rpov-step__copy { font-size: 14.5px; line-height: 1.72; color: var(--rq-ink-soft); text-wrap: pretty; }
.rpov-expect__note {
  margin: 34px 0 0; padding: 16px 18px; border-radius: 12px;
  background: var(--rq-bg-soft); border: 1px solid var(--rq-rule);
  font-size: 13px; line-height: 1.6; color: var(--rq-muted);
}

/* ── 폼 카드 (캡슐 카드 문법) ── */
.rpov-form-shell {
  background: var(--rq-bg); border: 1px solid var(--rq-rule); border-radius: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 24px 48px -20px rgba(15, 23, 42, 0.12);
}
.rpov-form { display: flex; flex-direction: column; gap: 16px; }
.rpov-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rpov-form__flash { padding: 12px 16px; border-radius: 8px; font-size: 14px; background: #fef2f2; color: #991b1b; margin-bottom: 4px; }

.rpov-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rpov-field { display: flex; flex-direction: column; gap: 6px; }
.rpov-lbl { font-size: 13.5px; color: var(--rq-ink-soft); font-weight: 600; }
.rpov-req { color: #ef4444; margin-left: 2px; }

.rpov-form .rpov-field input,
.rpov-form .rpov-field select,
.rpov-form .rpov-field textarea {
  width: 100%;
  padding: 11px 14px !important;
  border: 1px solid var(--rq-rule) !important;
  border-radius: 8px !important;
  background-color: var(--rq-bg) !important;
  font-family: inherit; font-size: 15px !important; color: var(--rq-ink) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rpov-form .rpov-field input:focus,
.rpov-form .rpov-field select:focus,
.rpov-form .rpov-field textarea:focus {
  outline: none;
  border-color: var(--rq-primary) !important;
  box-shadow: 0 0 0 3px rgba(26, 111, 255, 0.12) !important;
}
.rpov-form .rpov-field input::placeholder,
.rpov-form .rpov-field textarea::placeholder { color: rgba(15, 17, 48, 0.38) !important; opacity: 1; }
.rpov-form .rpov-field textarea { resize: vertical; min-height: 96px; }
.rpov-form .rpov-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 38px !important;
}
.rpov-form .rpov-field select:has(option[value=""]:checked) { color: rgba(15, 17, 48, 0.38) !important; }
.rpov-field option { color: var(--rq-ink); }

/* ── 동의 ── */
.rpov-consent { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.rpov-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--rq-muted); line-height: 1.45; cursor: pointer; }
.rpov-check input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--rq-primary); flex: none; }
.rpov-check__copy a { color: var(--rq-primary); text-decoration: underline; }

/* ── 제출 (캡슐 블루 CTA) ── */
.rpov-submit {
  margin-top: 6px; width: 100%; padding: 13px 24px;
  background: var(--rq-primary); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 600;
  border: none; border-radius: 8px; cursor: pointer; transition: background 0.15s;
}
.rpov-submit:hover { background: var(--rq-primary-dark); }
.rpov-reassure { margin: 4px 0 0; font-size: 13px; color: var(--rq-muted); text-align: center; }

/* ── 정보 레일 (압축·보조) ── */
.rpov-info { display: flex; flex-direction: column; gap: 24px; padding-top: 28px; border-top: 1px solid var(--rq-rule); }
.rpov-info__block { }
.rpov-info__label {
  font-family: var(--rq-f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rq-eyebrow); margin-bottom: 10px;
}
.rpov-info__name { font-size: 15px; font-weight: 650; color: var(--rq-ink); margin: 0 0 4px; }
.rpov-info__body { font-size: 13.5px; line-height: 1.55; color: var(--rq-ink-soft); margin: 0 0 8px; }
.rpov-info__email {
  display: inline-block; font-size: 15px; font-weight: 600; color: var(--rq-primary);
  text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s;
}
.rpov-info__email:hover { border-color: var(--rq-primary); }
.rpov-info__office { font-size: 13.5px; }
.rpov-info__office + .rpov-info__office { margin-top: 14px; }
.rpov-info__office-label { font-size: 12px; color: var(--rq-muted); margin-bottom: 3px; }
.rpov-info__phone { display: inline-block; margin-top: 3px; font-size: 13.5px; color: var(--rq-muted); text-decoration: none; }
.rpov-info__phone:hover { color: var(--rq-primary); }
.rpov-info__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rpov-info__social a { display: inline-flex; transition: transform 0.15s ease; }
.rpov-info__social img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; display: block; opacity: 0.55; transition: opacity 0.15s ease; }
.rpov-info__social a:hover { transform: translateY(-2px); }
.rpov-info__social a:hover img { opacity: 1; }

/* ── 반응형: 1단 (인트로 → 4단계 → 폼 → 정보) ── */
@media (max-width: 900px) {
  .rpov-contact__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 40px; }
  .rpov-intro, .rpov-expect, .rpov-info, .rpov-form-shell { grid-column: auto; grid-row: auto; margin-top: 0; }
  .rpov-form-shell { position: static; order: 3; }
  .rpov-expect { order: 2; }
  .rpov-info { order: 4; }
}
@media (max-width: 520px) {
  .rpov-field-row { grid-template-columns: 1fr; }
}