/* ---------------------------------------------------------------
   21-v1989-conversion.css
   시안 v1.9.89 의 새 <style id> 블록을 기능 묶음 안에서 시안 순서대로 담는다
   (SPEC-SAJU-PROTO-V1989-001 design.md §6).
   M1: Layer2 결제 유도 3단 — v1979-conversion-cta · v1980-final-cta-fix ·
       v1982 의 다시 테스트하기 카드 · v1987-layer2-cta-refresh · v1988 의 마지막 카피 ·
       v1989-final-cta-emphasis.
   M2: Layer3 결제 카드 — v1979 의 Layer3 줄 · v1983-layer3-payment-only · v1984 의 화살표 간격 ·
       v1988 의 Layer3 줄. 시안 전용 선택자를 라이브 클래스로 다시 써서 #viewPaidPreview 로 한정한다
       (design.md §2.2).
   M3: Layer1 적응형 질문 UI — v1981-layer1-question-redesign · v1982 의 진행 줄 ·
       v1984-layer1-headrow-and-weight · v1985-layer1-question-font · v1986-layer1-question-lineheight.
   M4: 푸터 고객센터 — v1982 의 푸터 줄(이메일 문의 안내·제목 간격·연락처 줄).
   색은 시안 값이 아니라 대비 기준(4.5:1)을 넘기는 확정 값이다 (D7, design.md §5):
   코랄 #C0554C · 눌림 #AD4C44 · "결제 후 바로…" 안내 #604E4B ·
   Layer1 답변 글 #6A7473 · 문항 번호 #4C7872 · 선택 배경 #4C7F7A · 진행 배지·완료 안내 #457974 ·
   푸터 안내 #6C7779.
   시안 블록이 서로 덮어 쓴 뒤의 실효 값만 남겼다 — v1979 의 중간 색과 v1987 이 지운
   원·점 장식은 옮기지 않았다.
   ⚠ 이 파일은 index.html 의 맨 뒤 <link> 다. 앞 파일의 !important 를 같은 특정도로 이기려고
     시안의 긴 선택자를 그대로 쓴다.
   --------------------------------------------------------------- */

/* ===== v1.9.79 · CTA motion + visual system refinement (v1.9.87 의 실효 색으로) ===== */
#viewFreeResult{
  --cta-coral:#C0554C;
  --cta-coral-dark:#AD4C44;
  --cta-coral-soft:#F3B8B1;
  --cta-coral-soft-2:#F8CBC6;
  --cta-coral-line:#E58B83;
}

#viewFreeResult .l2v1977-top-cta,
#viewFreeResult .l2v1977-mid-cta,
#viewFreeResult .l2v1977-final-cta{
  position:relative;
  border:1px solid var(--cta-coral-line)!important;
  background:linear-gradient(145deg,var(--cta-coral-soft) 0%,var(--cta-coral-soft-2) 100%)!important;
  box-shadow:0 10px 24px rgba(179,75,67,.13)!important;
  overflow:hidden!important;
}

#viewFreeResult .l2v1977-top-cta{
  margin:2px 0 34px;
  padding:24px 22px 21px;
  border-radius:25px;
  text-align:left;
  animation:l2v1979TopFloat 3.2s ease-in-out infinite;
}
#viewFreeResult .l2v1977-top-cta p{
  position:relative;z-index:1;
  margin:0 0 18px;
  font-family:var(--font-reading)!important;
  font-size:15px;
  line-height:1.78;
  color:#543532!important;
  word-break:keep-all;
}
#viewFreeResult .l2v1977-top-cta p strong{
  display:inline-block;
  margin-bottom:3px;
  font-size:16.5px;
  font-weight:900;
  color:#3F2927!important;
}

#viewFreeResult .l2v1977-mid-cta{
  margin:-6px 0 34px;
  padding:18px 16px 17px;
  border-radius:19px;
  text-align:center;
  animation:l2v1979MidFloat 3.6s ease-in-out infinite;
}
#viewFreeResult .l2v1977-mid-cta p{
  position:relative;z-index:1;
  margin:0 0 11px;
  font-size:14px;
  font-weight:800;
  line-height:1.55;
  color:#543532!important;
  word-break:keep-all;
}

#viewFreeResult .l2v1977-final-cta{
  display:block!important;
  margin:30px 0 14px!important;
  padding:0!important;
  border-radius:25px!important;
}
/* Layer3 머리 사진의 원천이라 마크업에는 남기고 화면에서만 숨긴다 (REQ-005). */
#viewFreeResult .l2v1977-hidden-source{display:none!important}
#viewFreeResult .l2v1977-final-cta .l2v194-content{
  position:relative;
  z-index:1;
  padding:25px 22px 22px!important;
}
#viewFreeResult .l2v1977-final-cta .l2v194-content h3{
  margin:0 0 14px!important;
  font-family:var(--font-display)!important;
  font-size:23px!important;
  line-height:1.42!important;
  color:#3F2927!important;
}

#viewFreeResult .l2v1977-top-btn,
#viewFreeResult .l2v1977-mid-cta button,
#viewFreeResult .l2v1977-final-cta .l2-cta{
  position:relative;
  z-index:1;
  width:100%;
  border:0!important;
  border-radius:16px!important;
  background:var(--cta-coral)!important;
  color:#FFFFFF!important;
  font-family:var(--font-reading)!important;
  font-weight:900!important;
  cursor:pointer;
  box-shadow:0 5px 13px rgba(195,78,70,.22)!important;
}
#viewFreeResult .l2v1977-top-btn{
  min-height:56px;
  padding:15px 16px;
  font-size:16px;
}
#viewFreeResult .l2v1977-top-btn span[aria-hidden="true"]{margin-left:4px;font-size:18px}
#viewFreeResult .l2v1977-mid-cta button{
  min-height:50px;
  padding:13px 14px;
  font-size:14.5px;
}
#viewFreeResult .l2v1977-final-cta .l2-cta{
  min-height:58px!important;
  font-size:16px!important;
}
#viewFreeResult .l2v1977-top-btn:active,
#viewFreeResult .l2v1977-mid-cta button:active,
#viewFreeResult .l2v1977-final-cta .l2-cta:active{
  transform:translateY(1px);
  background:var(--cta-coral-dark)!important;
}
#viewFreeResult .l2v1977-after-pay-note{
  margin:10px 0 0;
  font-size:11.5px;
  line-height:1.5;
  text-align:center;
  color:#604E4B;
}

@keyframes l2v1979TopFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes l2v1979MidFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

@media(max-width:390px){
  #viewFreeResult .l2v1977-top-cta{padding:22px 18px 19px;border-radius:22px}
  #viewFreeResult .l2v1977-top-cta p{font-size:14px;line-height:1.75}
  #viewFreeResult .l2v1977-top-cta p strong{font-size:16px}
  #viewFreeResult .l2v1977-top-btn{font-size:15px;min-height:54px}
  #viewFreeResult .l2v1977-mid-cta{padding:16px 13px}
  #viewFreeResult .l2v1977-mid-cta p{font-size:13.5px}
  #viewFreeResult .l2v1977-mid-cta button{font-size:13.5px}
  #viewFreeResult .l2v1977-final-cta .l2v194-content{padding:22px 18px 20px!important}
  #viewFreeResult .l2v1977-final-cta .l2v194-content h3{font-size:21px!important}
}

/* ===== v1.9.80 · final CTA specificity + motion fix ===== */
#viewFreeResult .l2v8-final.l2v194-final.l2v1977-final-cta{
  position:relative!important;
  display:block!important;
  margin:30px 0 14px!important;
  padding:0!important;
  border:1px solid var(--cta-coral-line)!important;
  border-radius:25px!important;
  background:linear-gradient(145deg,var(--cta-coral-soft) 0%,var(--cta-coral-soft-2) 100%)!important;
  box-shadow:0 10px 24px rgba(179,75,67,.13)!important;
  overflow:hidden!important;
  animation:l2v1980FinalFloat 3.4s ease-in-out infinite;
}
#viewFreeResult .l2v8-final.l2v194-final.l2v1977-final-cta .l2-cta{
  background:var(--cta-coral)!important;
  color:#FFFFFF!important;
  border-color:transparent!important;
  box-shadow:0 5px 13px rgba(195,78,70,.22)!important;
}
#viewFreeResult .l2v8-final.l2v194-final.l2v1977-final-cta .l2-cta:active{
  background:var(--cta-coral-dark)!important;
}
#viewFreeResult .l2v8-final.l2v194-final.l2v1977-final-cta .l2-cta span[aria-hidden="true"]{
  margin-left:4px;
  font-size:18px;
}

@keyframes l2v1980FinalFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* ===== v1.9.82 · Layer2 아래 다시 테스트하기 카드 (D4 — 옛 .again 버튼을 대체) ===== */
#viewFreeResult .l2-retest-card{
  margin:22px 0 4px;
  padding:0;
}
#viewFreeResult .l2-retest-card button{
  width:100%;
  min-height:48px;
  padding:13px 16px;
  border:1px solid #D6E1E0;
  border-radius:14px;
  background:#FFFFFF;
  color:#355F5C;
  font-family:'Nanum Gothic',sans-serif;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  cursor:pointer;
  box-shadow:none;
  transition:background .15s ease,border-color .15s ease,transform .08s ease;
}
#viewFreeResult .l2-retest-card button:hover{
  background:#F8FBFA;
  border-color:#BFD2D0;
}
#viewFreeResult .l2-retest-card button:active{
  transform:translateY(1px);
  background:#F2F7F6;
}
@media(max-width:390px){
  #viewFreeResult .l2-retest-card button{
    min-height:46px;
    font-size:13.5px;
  }
}

/* ===== v1.9.87 · Layer2 CTA: 장식 삭제 (앞 파일에 남은 의사 요소까지 끈다) ===== */
#viewFreeResult .l2v1977-top-cta::before,
#viewFreeResult .l2v1977-top-cta::after,
#viewFreeResult .l2v1977-mid-cta::before,
#viewFreeResult .l2v1977-mid-cta::after,
#viewFreeResult .l2v8-final.l2v194-final.l2v1977-final-cta::before,
#viewFreeResult .l2v8-final.l2v194-final.l2v1977-final-cta::after{
  display:none!important;
  content:none!important;
}
#viewFreeResult .l2v8-final.l2v194-final.l2v1977-final-cta p{
  color:#543532!important;
}
#viewFreeResult .l2v8-final.l2v194-final.l2v1977-final-cta h3{
  color:#3F2927!important;
}
#viewFreeResult .l2v1987-category-list{
  font-weight:900!important;
  color:#452B28!important;
}

/* ===== v1.9.88 · 마지막 CTA 본문: 요청한 줄바꿈 유지 + 아주 살짝 큰 본문 ===== */
#viewFreeResult .l2v1977-final-cta .l2v1988-final-copy,
#viewFreeResult .l2v8-final.l2v194-final.l2v1977-final-cta .l2v1988-final-copy{
  margin:0 0 18px!important;
  font-family:var(--font-reading)!important;
  font-size:14.6px!important;
  line-height:1.76!important;
  color:#543532!important;
  word-break:keep-all!important;
  letter-spacing:-.08px!important;
}
#viewFreeResult .l2v1977-final-cta .l2v1988-final-copy strong,
#viewFreeResult .l2v8-final.l2v194-final.l2v1977-final-cta .l2v1988-final-copy strong{
  font-weight:900!important;
  color:#452B28!important;
}
@media(max-width:390px){
  #viewFreeResult .l2v1977-final-cta .l2v1988-final-copy,
  #viewFreeResult .l2v8-final.l2v194-final.l2v1977-final-cta .l2v1988-final-copy{
    font-size:14.1px!important;
    line-height:1.74!important;
  }
}

/* ===== v1.9.89 · final CTA emphasis ===== */
#viewFreeResult .l2v1977-final-cta .l2v1989-final-bold,
#viewFreeResult .l2v8-final.l2v194-final.l2v1977-final-cta .l2v1989-final-bold{
  font-weight:900!important;
  color:#452B28!important;
}

/* ===== 라이브 추가 · 비활성 CTA 는 비활성으로 보인다 (design.md §1.4 — 시안에는 없다) =====
   준비 상태 확인 전·준비 안 됨에서 세 버튼은 disabled 다. 코랄 배경에 !important 가 걸려 있어
   그대로 두면 활성 버튼과 똑같이 보이므로 흐리게 하고 떠오르는 그림자·눌림을 뺀다. */
#viewFreeResult .l2v1977-top-btn:disabled,
#viewFreeResult .l2v1977-mid-cta button:disabled,
#viewFreeResult .l2v8-final.l2v194-final.l2v1977-final-cta .l2-cta:disabled{
  opacity:.62;
  cursor:not-allowed;
  transform:none;
  box-shadow:none!important;
}

/* 움직임을 줄이도록 설정한 사용자에게는 세 카드의 떠오르는 움직임을 끈다 (REQ-007). */
@media (prefers-reduced-motion:reduce){
  #viewFreeResult .l2v1977-top-cta,
  #viewFreeResult .l2v1977-mid-cta{animation:none}
  #viewFreeResult .l2v8-final.l2v194-final.l2v1977-final-cta{animation:none!important}
}

/* ===== v1.9.79 · v1.9.83 · v1.9.84 · v1.9.88 · Layer3 결제 카드 (M2 — 시안 선택자를 라이브 클래스로) =====
   대응 (design.md §2.2 표 — 시안 클래스 이름은 이 파일에 적지 않는다, AC-009): 시안 상품 카드 → .payment-product-card ·
   입력 카드 → .payment-checkout-form · 휴대폰 라벨·입력 → label[for="checkoutPhone"]·#checkoutPhone ·
   개인정보 안내 → .payment-privacy·.payment-privacy p · 동의 줄 → .payment-privacy-ack · 가격 → #checkoutProductAmount ·
   조회 버튼 → .payment-lookup-link · 결제 전 돌아가기 → .l3-back.
   값은 시안 블록이 서로 덮어 쓴 뒤의 실효 값이고(v1988 이 v1983 을 덮는다), 대비 미달 값은 D7 확정 값으로 바꿨다:
   코랄 → #C0554C · 눌림 → #AD4C44 (포커스 테두리·체크 상자 색도 같은 코랄).
   결제 전 무료 미리보기 본문은 SPEC-SAJU-FLOW-NOBLUR-001 D3(2026-10-08)이 마크업·요청·렌더째 걷어냈다
   (그 전에는 M6 D10 이 이 파일의 숨김 규칙으로 가렸다).
   옮기지 않은 것: 결제 후 잠금 해제·개별 토글 숨김 — 결제 후 본문은 조회 화면에서 서버가 그린다(REQ-013) ·
   카드 다음 머리 사진 간격 — 라이브 Layer3 에는 결제 전 머리 사진이 없어 대상이 없다 · 요약줄 ::before 색 —
   라이브 요약줄에는 그 의사 요소가 없다. */
#viewPaidPreview{
  padding-top:8px!important;
}

/* Layer2 CTA 카드와 같은 코랄 카드 (v1988 이 v1983 의 연한 바탕을 덮는다) */
#viewPaidPreview .l3-paywall{
  position:relative!important;
  margin:4px 0 14px!important;
  padding:22px!important;
  border:1px solid #E58B83!important;
  border-radius:25px!important;
  background:linear-gradient(145deg,#F3B8B1 0%,#F8CBC6 100%)!important;
  box-shadow:0 10px 24px rgba(179,75,67,.13)!important;
  text-align:center!important;
  overflow:hidden!important;
}
/* v1979 — 카드가 본문 위로 올라오면서 위 여백을 없앤다 (위 규칙보다 특정도가 높아 이긴다) */
#viewPaidPreview .l3-report>.l3-paywall{
  margin-top:0!important;
  margin-bottom:24px!important;
}
/* CTA 카드에서 장식을 뺀 것과 같이 Layer3 도 장식을 뺀다 */
#viewPaidPreview .l3-paywall::before,
#viewPaidPreview .l3-paywall::after{
  display:none!important;
  content:none!important;
}
/* 라이브 추가 · 카드 머리의 "DETAIL REPORT" 표지는 시안에 없다. 코랄 바탕 위 대비를 위해 조회 링크와 같은 색을 쓴다 */
#viewPaidPreview .payment-checkout-head>span{
  color:#70433F!important;
}

/* 안쪽 결제 정보는 읽기 쉬운 흰 카드.
   라이브 추가 · 결제창 준비 뒤 보이는 .payment-widget-shell(시안에 없는 실제 결제 단계)도 같은 흰 카드로 둔다 —
   코랄 바탕에 바로 놓이면 결제 금액 줄(#4F5D5B)의 대비가 4.5 아래로 떨어진다. */
#viewPaidPreview .payment-product-card,
#viewPaidPreview .payment-checkout-form,
#viewPaidPreview .payment-widget-shell{
  position:relative!important;
  z-index:1!important;
  background:#FFFFFF!important;
  border-color:#E7B1AB!important;
  box-shadow:none!important;
}
#viewPaidPreview .payment-widget-shell{
  padding:18px!important;
  border:1px solid #E7B1AB!important;
  border-radius:20px!important;
}
/* 시안의 상품 카드 아래 여백 20px 은 라이브 결제 카드의 grid 간격(20px)이 이미 만든다 — 따로 더하지 않는다 */

#viewPaidPreview .payment-product-card>span,
#viewPaidPreview .payment-checkout-form label[for="checkoutPhone"]{
  color:#49302D!important;
}
#viewPaidPreview .payment-product-card>strong{
  color:#3F2927!important;
}
#viewPaidPreview .payment-product-card p,
#viewPaidPreview .payment-product-card small{
  color:#674541!important;
}
#viewPaidPreview .payment-product-card #checkoutProductAmount{
  color:#C34E46!important;
}

#viewPaidPreview #checkoutPhone{
  border-color:#E7B1AB!important;
  color:#4D3A37!important;
}
#viewPaidPreview #checkoutPhone:focus{
  border-color:#C0554C!important;
  box-shadow:0 0 0 3px rgba(192,85,76,.13)!important;
}
#viewPaidPreview .payment-privacy{
  border-color:#EBC0BB!important;
  background:#FFF9F8!important;
}
#viewPaidPreview .payment-privacy summary{
  color:#543532!important;
}
#viewPaidPreview .payment-privacy p{
  color:#75615E!important;
}
#viewPaidPreview .payment-privacy-ack{
  color:#543532!important;
}
#viewPaidPreview .payment-privacy-ack input{
  accent-color:#C0554C!important;
}

/* M5 수정 · 입력 카드 글자·정렬·간격을 시안 v1.9.89 의 계산 값으로 맞춘다 (운영자 결정 2026-10-06).
   17·18번(PRESERVE)의 13px·가운데 정렬·grid 간격 10px 이 남아 390px 에서 동의 문구가 "체크해주 / 세요." 로 끊기고,
   1280px 에서는 체크 상자와 글이 벌어졌다. 시안 입력 카드는 grid 간격 없이 아래 여백만 쓴다
   (라벨 6 · 번호 칸 12 · 개인정보 안내 12 · 동의 줄 15px). 색은 위 M2 규칙(D7) 그대로다.
   라이브 전용 · 개인정보 안내 칸 높이는 터치 44px(18번 summary min-height)를 지켜 시안보다 약 3px 높다. */
#viewPaidPreview .payment-checkout-form{
  row-gap:0!important;
}
#viewPaidPreview .payment-checkout-form label[for="checkoutPhone"]{
  margin:0 0 6px!important;
  font-size:11.5px!important;
  line-height:1.35!important;
  text-align:left!important;
}
#viewPaidPreview #checkoutPhone{
  margin:0 0 12px!important;
}
#viewPaidPreview .payment-privacy{
  margin:0 0 12px!important;
}
/* 17번 label 의 space-between 이 넓은 화면에서 동의 글을 오른쪽 끝으로 밀어내므로 앞으로 붙인다 */
#viewPaidPreview .payment-privacy-ack{
  justify-content:flex-start!important;
  gap:9px!important;
  margin:0 0 15px!important;
  font-size:11.8px!important;
  font-weight:700!important;
  line-height:1.55!important;
  text-align:left!important;
  word-break:keep-all!important;
}
/* 라이브 전용 · 결제 진행 안내 줄(#checkoutStatus)은 시안에 없다. 글이 있을 때만 버튼 아래 10px 에 자리를 차지하고,
   비어 있으면 흐름에서 뺀다. display:none 으로 숨기지 않는 것은 role=status 낭독 영역을 접근성 트리에 남겨
   app.js 의 checkoutMessage() 가 글을 넣는 순간 알리게 하려는 것이다(JS 는 그대로). */
#viewPaidPreview .payment-checkout-status{
  margin-top:10px!important;
}
#viewPaidPreview .payment-checkout-status:empty{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}

/* 결제 버튼도 Layer2 CTA 버튼과 같다 (#createCheckoutButton·#requestPaymentButton) */
#viewPaidPreview .l3-paywall .report-cta{
  position:relative;
  z-index:1;
  width:100%!important;
  min-height:58px!important;
  margin:0!important;
  padding:15px 16px!important;
  border:0!important;
  border-color:transparent!important;
  border-radius:16px!important;
  background:#C0554C!important;
  color:#FFFFFF!important;
  font-family:'Nanum Gothic',sans-serif!important;
  font-size:16px!important;
  font-weight:900!important;
  box-shadow:0 5px 13px rgba(195,78,70,.22)!important;
}
/* 라이브 추가 · 앞 파일(18번)의 :hover 가 민트 바탕으로 바꾸므로 코랄을 지킨다 (시안에는 hover 규칙이 없다) */
#viewPaidPreview .l3-paywall .report-cta:hover:not(:disabled){
  background:#C0554C!important;
}
#viewPaidPreview .l3-paywall .report-cta:active{
  transform:translateY(1px);
  background:#AD4C44!important;
}
/* v1984 — 화살표 간격. 시안의 `.report-cta span` 은 라이브의 글 요소(.cta-label)까지 고르므로 화살표로 좁힌다 */
#viewPaidPreview .l3-paywall .report-cta span[aria-hidden="true"]{
  display:inline-block;
  margin-left:5px;
  font-size:18px;
  line-height:1;
}
/* 하단 조회 링크 — 시안 간격 24px = 결제 카드 grid 간격 20px + 4px */
#viewPaidPreview .payment-lookup-link{
  position:relative;
  z-index:1;
  margin-top:4px!important;
  color:#70433F!important;
  font-size:12px!important;
  text-underline-offset:4px!important;
}

/* 결제 카드 바로 아래 돌아가기 (터치 높이 44px 는 16번의 min-height 가 지킨다) */
#viewPaidPreview .l3-back{
  width:100%!important;
  margin:18px 0 0!important;
  padding:12px!important;
  border:0!important;
  background:transparent!important;
  color:#7A6663!important;
  font-size:13px!important;
  font-weight:700!important;
  cursor:pointer!important;
}

/* REQ-010 · Layer3 진입 초점은 결제 카드(tabindex="-1")다. 프로그램 초점이라 마우스 이용자에게는 테두리를
   보이지 않고, 키보드 이용자의 :focus-visible 표시는 그대로 둔다 */
#viewPaidPreview #paidPreviewPaywall:focus:not(:focus-visible){
  outline:none;
}

@media(max-width:390px){
  #viewPaidPreview .l3-paywall{
    padding:18px 16px!important;
    border-radius:22px!important;
  }
  #viewPaidPreview .payment-product-card{
    padding:16px!important;
  }
  #viewPaidPreview .payment-checkout-form{
    padding:18px 15px 17px!important;
  }
  #viewPaidPreview .l3-paywall .report-cta{
    min-height:56px!important;
    font-size:15.5px!important;
  }
}

/* ===== v1.9.81 · v1.9.82 · v1.9.84 · v1.9.85 · v1.9.86 · Layer1 적응형 질문 UI (M3) =====
   시안 블록 순서 그대로 옮긴다 — 같은 선택자가 !important 로 겹쳐 순서가 값을 정한다
   (v1986 의 행간 1.48 이 v1981 의 390px 행간을 덮는 것까지 시안과 같다).
   색은 대비 기준을 넘기는 확정 값이다 (D7, design.md §5): 답변 글 #6A7473 · 문항 번호 #4C7872 ·
   선택 배경 #4C7F7A(흰 글자) · 진행 배지·완료 안내 #457974.
   옮기지 않은 줄: v1981 의 마지막 CTA 카피 리듬(.l2v1977-cta-desc2/3 — 라이브 마크업에 없다, M1 판단과 같다),
   v1984 의 Layer3 화살표 간격(M2 가 화살표 span 으로 좁혀 이미 옮겼다).
   앞 파일(05·06·13·20)의 Layer1 규칙보다 특정도가 높은 시안 선택자를 그대로 써서 이긴다 —
   질문 버튼의 터치 높이는 06 의 50px 대신 이 파일의 44px 가 된다(REQ-017·021 의 하한 44px). */

/* v1981 — 큰 종이 한 장보다, 질문 카드가 또렷하게 보이도록 */
#viewInput .l1-mini-section{
  margin:4px 0 24px!important;
  padding:2px 0 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#viewInput .l1-mini-section::before,
#viewInput .l1-mini-section::after{
  display:none!important;
  content:none!important;
}
#viewInput .l1-mini-section>.l1-mini-head{
  margin:0 2px 12px!important;
  font-family:'Jua',sans-serif!important;
  font-size:25px!important;
  line-height:1.35!important;
  color:#2F3938!important;
  letter-spacing:-.25px!important;
}

/* v1981 — 진행 상태는 작고 기능적으로 */
#viewInput .l1-question-progress{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 2px 14px;
  padding:0 2px 10px;
  border-bottom:1px solid #E8EFEE;
  font-family:'Nanum Gothic',sans-serif;
  color:#84908F;
}
#viewInput .l1-question-progress span{
  font-size:12px;
  font-weight:700;
}
#viewInput .l1-question-progress strong{
  min-width:56px;
  padding:5px 9px;
  border-radius:999px;
  background:#EEF6F4;
  color:#457974;
  font-size:12px;
  font-weight:900;
  text-align:center;
}

/* v1981 — 질문 리스트. 번호 배지는 v1.9.116(v1990)부터 CSS 카운터가 아니라 data-step 속성을 그린다 —
   한 문항만 보이면 display:none 인 형제는 카운터를 올리지 않아 모두 "01" 이 된다(SPEC-SAJU-PROTO-V19116-001 M1). */
#viewInput #adaptiveCommonList,
#viewInput #adaptiveExtraList{
  display:grid;
  gap:12px;
}
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q{
  position:relative;
  margin:0!important;
  padding:18px 16px 15px!important;
  border:1px solid #E2EAE9!important;
  border-radius:19px!important;
  background:#FFFFFF!important;
  box-shadow:0 5px 16px rgba(57,78,77,.045)!important;
}
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q::before{
  content:attr(data-step);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:29px;
  height:25px;
  margin:0 0 10px;
  padding:0 7px;
  border-radius:8px;
  background:#EEF6F4;
  color:#4C7872;
  font-family:'Nanum Gothic',sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
}
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q label{
  display:block!important;
  margin:0 0 14px!important;
  color:#34403F!important;
  font-family:'Nanum Gothic',sans-serif!important;
  font-size:15.5px!important;
  font-weight:800!important;
  line-height:1.68!important;
  letter-spacing:-.1px!important;
  word-break:keep-all!important;
  text-wrap:pretty!important;
}

/* v1981 — 세 답변을 하나의 세그먼트 컨트롤처럼 */
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q .l1-seg{
  display:grid!important;
  grid-template-columns:1fr 1.22fr 1fr!important;
  gap:6px!important;
  padding:4px!important;
  border:1px solid #E3EBEA!important;
  border-radius:15px!important;
  background:#F6F9F8!important;
}
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q .l1-seg button{
  min-width:0!important;
  min-height:44px!important;
  padding:9px 6px!important;
  border:0!important;
  border-radius:11px!important;
  background:transparent!important;
  color:#6A7473!important;
  font-family:'Nanum Gothic',sans-serif!important;
  font-size:12.5px!important;
  font-weight:800!important;
  line-height:1.35!important;
  box-shadow:none!important;
  transition:background .16s ease,color .16s ease,transform .08s ease,box-shadow .16s ease!important;
}
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q .l1-seg button:hover{
  background:#FFFFFF!important;
  color:#53615F!important;
}
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q .l1-seg button.on{
  background:#4C7F7A!important;
  color:#FFFFFF!important;
  box-shadow:0 4px 10px rgba(76,127,122,.17)!important;
}
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q .l1-seg button:active{
  transform:translateY(1px)!important;
}

/* v1981 — 추가 질문은 같은 시스템을 쓰되, 전환부만 명확하게. 간격은 v1.9.116(v1990)의 14px·16px */
#viewInput .adaptive-extra-section{
  margin-top:14px!important;
  padding-top:16px!important;
  border-top:1px dashed #DCE7E5!important;
}
#viewInput .adaptive-extra-section .adaptive-extra-head{
  margin:0 2px 14px!important;
  padding:0!important;
  font-family:'Jua',sans-serif!important;
  font-size:20px!important;
  line-height:1.4!important;
  color:#4C5A58!important;
}
#viewInput .adaptive-extra-section .adaptive-extra-head::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin:0 8px 2px 1px;
  border-radius:50%;
  background:#7EAAA5;
}

/* v1981 — 완료 안내도 카드처럼 과하게 보이지 않게 */
#viewInput #adaptiveQuestionStatus.quick-result{
  margin:18px 0 12px!important;
  padding:12px 14px!important;
  border:1px solid #D6E7E4!important;
  border-radius:14px!important;
  background:#EEF6F4!important;
  color:#457974!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1.5!important;
}

@media(max-width:390px){
  #viewInput .l1-mini-section>.l1-mini-head{font-size:23px!important}
  #viewInput .adaptive-question-list .l1-choice-field.adaptive-q{
    padding:16px 13px 13px!important;
    border-radius:17px!important;
  }
  #viewInput .adaptive-question-list .l1-choice-field.adaptive-q label{
    font-size:15px!important;
    line-height:1.65!important;
  }
  #viewInput .adaptive-question-list .l1-choice-field.adaptive-q .l1-seg{
    gap:4px!important;
    padding:4px!important;
  }
  #viewInput .adaptive-question-list .l1-choice-field.adaptive-q .l1-seg button{
    font-size:12px!important;
    padding:8px 4px!important;
  }
}

/* v1982 — 진행 줄: 설명 글을 빼고 숫자만 남긴다 */
#viewInput .l1-question-progress{
  justify-content:flex-end!important;
}
#viewInput .l1-question-progress span{
  display:none!important;
}

/* v1984 — 제목과 진행 배지를 한 줄에 */
#viewInput .l1-question-headrow{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0 2px 14px!important;
  padding:0 2px 10px!important;
  border-bottom:1px solid #E8EFEE!important;
}
/* 질문 머리 제목 글꼴은 v1.9.116(cc106)의 나눔고딕 800·자간 −0.7px */
#viewInput .l1-question-headrow>.l1-mini-head{
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  font-family:'Nanum Gothic',sans-serif!important;
  font-weight:800!important;
  font-size:23px!important;
  line-height:1.35!important;
  color:#2F3938!important;
  letter-spacing:-.7px!important;
}
#viewInput .l1-question-headrow>.l1-question-progress{
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  display:block!important;
}
#viewInput .l1-question-headrow .l1-question-progress strong{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:56px!important;
  height:28px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  background:#EEF6F4!important;
  color:#457974!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1!important;
}

/* v1984 — 질문 글: 굵기를 한 단계 낮춘다 */
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q label{
  font-weight:600!important;
  color:#3E4948!important;
}

@media(max-width:390px){
  #viewInput .l1-question-headrow{
    gap:8px!important;
  }
  #viewInput .l1-question-headrow>.l1-mini-head{
    font-size:21px!important;
  }
  #viewInput .l1-question-headrow .l1-question-progress strong{
    min-width:52px!important;
    height:27px!important;
    font-size:11.5px!important;
  }
}

/* v1985 — 질문 글을 단정한 시스템 고딕으로 */
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q label{
  font-family:Arial,'Malgun Gothic','Apple SD Gothic Neo',sans-serif!important;
  font-weight:500!important;
  letter-spacing:-.15px!important;
  color:#374342!important;
}

/* v1986 — 두 줄 질문 행간 축소 */
#viewInput .adaptive-question-list .l1-choice-field.adaptive-q label{
  line-height:1.48!important;
}

/* ===== v1.9.82 · 푸터 고객센터 (M4) =====
   고객센터 묶음은 항상 보이고(D3) 제목 → 이메일 문의 안내 → 연락처 줄 순서다. 안내는 정적 마크업이라
   사이트 정보를 받기 전(aria-busy)에도 보인다. 연락처 줄은 지금처럼 고객센터 설정값을 따른다.
   안내 글자색은 시안 값(흰 바탕 4.37 로 미달)이 아니라 .cc-footer-info 와 같은 #6C7779(4.61)다 (D7).
   19-v1952-service-footer.css 는 그대로 두고 같은 선택자를 !important 로 덮는다. */
.cc-service-footer .cc-footer-support-title{
  margin-bottom:10px!important;
}
.cc-service-footer .cc-footer-support-copy{
  margin:0 0 4px!important;
  padding:0!important;
  border:0!important;
  font-size:13px!important;
  font-weight:400!important;
  line-height:1.7!important;
  color:#6C7779!important;
  word-break:keep-all!important;
}
.cc-service-footer .cc-footer-contact{
  margin-top:0!important;
  font-size:13.5px!important;
  line-height:1.7!important;
  color:#687476!important;
}

@media(max-width:390px){
  .cc-service-footer .cc-footer-support-copy{
    font-size:12.5px!important;
  }
}