/*
 * 핀플 요금안내 (preview)
 * 색 · 크기 · 간격은 시안 값 그대로 마크업의 인라인 스타일에 있다.
 * 이 파일은 인라인으로 못 쓰는 것만 담는다: 공통 CSS 차단, hover, 반응형 전환, 인쇄.
 * 모든 선택자는 .pp-price 아래에 둔다(다른 페이지와 충돌 방지).
 */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ── 공통 CSS(bootstrap · theme · mobile)가 요소 단위로 거는 규칙 차단 ──
   theme.css 의 `* { font-family }` 때문에 상속만으로는 글꼴이 바뀌지 않는다. */
.pp-price,
.pp-price * {
  font-family: Pretendard, 'Pretendard Variable', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  box-sizing: border-box;
}
.pp-price { word-break: keep-all; -webkit-font-smoothing: antialiased; }

/* 공통 헤더(subHeader.jsp)가 높이 80px 고정 배치라 본문을 그만큼 내린다 */
.pp-price { padding-top: 80px; }

.pp-price h1,
.pp-price h2,
.pp-price h3,
.pp-price h4 { margin: 0; line-height: inherit; text-align: inherit; }
.pp-price p,
.pp-price ul,
.pp-price figure { margin: 0; }
.pp-price p { font-size: inherit; }
.pp-price span { font-weight: inherit; }
.pp-price label { margin: 0; max-width: none; font-weight: inherit; }
.pp-price small { font-weight: inherit; }

.pp-price a { color: #0B2E52; }
.pp-price a:hover,
.pp-price a:focus { color: #18395C; }
.pp-price summary::-webkit-details-marker { display: none; }
.pp-price :focus-visible { outline: 2px solid #0B2E52; outline-offset: 2px; }

/* 고정 헤더에 앵커 이동 위치가 가리지 않게 */
.pp-price section[id],
.pp-price article[id] { scroll-margin-top: 96px; }

/* ── hover (인라인 값을 이겨야 해서 !important) ── */
.pp-price .pp-btn-fill:hover { background: #0B2E52 !important; color: #fff !important; }
.pp-price .pp-btn-line:hover { background: #F5F7FA !important; color: #18395C !important; }
.pp-price .pp-btn-orange:hover { background: #E04A20 !important; border-color: #E04A20 !important; color: #fff !important; }
.pp-price .pp-play-badge:hover { background: #E5262E !important; }

/* aspect-ratio 를 모르는 구형 브라우저(iOS 14 이하 등)에서 영상 칸이 접히지 않게 */
@supports not (aspect-ratio: 16 / 9) {
  .pp-price .pp-video-box { height: 0; padding-top: 56.25%; }
}

@keyframes pinblink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ── 반응형: 760px 미만 = 모바일 ── */
.pp-price .pp-mo { display: none; }
@media (max-width: 759.98px) {
  .pp-price .pp-pc { display: none !important; }
  .pp-price .pp-mo { display: block; }
}

/* ── 인쇄: 견적서만 A4 한 장으로 출력 ──
   틀(194×266mm)을 고정하고, 넘치는 내용은 js qFit() 이 잰 배율(--qz)로 틀 안에서 축소한다. */
@media print {
  @page { size: A4; margin: 8mm; }
  body { background: #fff !important; }
  .pp-price { padding-top: 0 !important; }
  [data-print-hide] { display: none !important; }
  [data-quote-overlay] { position: static !important; background: none !important; padding: 0 !important; display: block !important; overflow: visible !important; }
  [data-quote-panel] { box-shadow: none !important; border: 0 !important; max-width: none !important; width: 100% !important; }
  html, body { width: auto !important; min-width: 0 !important; overflow: visible !important; }
  [data-quote-scroll] { width: 194mm !important; height: 266mm !important; overflow: hidden !important; position: relative !important; break-inside: avoid; page-break-inside: avoid; }
  [data-quote-doc] { padding: 0 !important; min-width: 0 !important; font-size: 12px !important; }
  [data-quote-doc] h1 { font-size: 26px !important; margin: 0 !important; }
  [data-quote-doc] { position: absolute !important; left: 0; top: 0; width: calc(194mm / var(--qz, 1)) !important; height: calc(266mm / var(--qz, 1)) !important; transform: scale(var(--qz, 1)); transform-origin: 0 0; overflow: hidden !important; box-sizing: border-box; }
  [data-qrow] { break-inside: avoid; page-break-inside: avoid; }
  [data-qrow] span { padding-top: 2px !important; padding-bottom: 2px !important; }
  [data-quote-doc] * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* 부트스트랩 인쇄 규칙(* { color:#000; background:transparent } !important)이 지운 색을 되살린다 */
  .pp-price [data-quote-doc] .q-bg-gray { background: #F5F7FA !important; }
  .pp-price [data-quote-doc] .q-bg-blue { background: #F3F7FF !important; }
  .pp-price [data-quote-doc] .q-sub { color: #4B5563 !important; }
  .pp-price [data-quote-doc] .q-ink { color: #2B3544 !important; }
  .pp-price [data-quote-doc] .q-navy { color: #18395C !important; }
  .pp-price [data-quote-doc] .q-red { color: #C81E1E !important; }
  .pp-price [data-quote-doc] .q-green { color: #1C7ED6 !important; }
}