/* ============================================================
   tapsight 수정안 반영 패치
   반드시 styles.css "다음"에 로드할 것
   (index.html / contact.html 양쪽에 링크 추가됨)
   ============================================================ */


/* ------------------------------------------------------------
   2026-07-24 클라이언트 수정안
   ------------------------------------------------------------ */

/* [뉴스레터] 배너 글자 크기 확대 (상하 여백 대비 작다는 피드백) */
.newsletter-copy h2 {
  font-size: clamp(30px, 2.8vw, 40px);
}

.newsletter-copy p {
  font-size: 17.5px;
}

.newsletter-btn {
  min-width: 160px;
  height: 50px;
  font-size: 16.5px;
}

@media (max-width: 760px) {
  .newsletter-copy h2 {
    font-size: 27px;
  }

  .newsletter-copy p {
    font-size: 15.5px;
  }
}

/* [뉴스레터] 팝업 이미지도 새 아이콘 사용 시 크기 보정 */
.newsletter-visual img,
.newsletter-modal-visual img {
  object-fit: contain;
}

/* [모바일 상품안내] 플랜별 상세 기능 비교표 가운데 하얀 라인 오류
   원인: background-clip: padding-box 가 보더 영역을 배경에서 제외해
   보더가 투명/없는 지점에 흰 줄이 생김 → border-box로 되돌리고
   컬럼 구분 보더를 투명 처리해 배경이 이어지게 함 */
@media (max-width: 760px) {
  #platform .plan-comparison__table th,
  #platform .plan-comparison__table td {
    background-clip: border-box;
  }

  #platform .plan-comparison__table thead th:nth-child(3),
  #platform .plan-comparison__table thead th:nth-child(4),
  #platform .plan-comparison__table tbody td:nth-last-child(2),
  #platform .plan-comparison__table tbody td:last-child {
    border-left-color: transparent;
  }

  #platform .plan-comparison__table th:first-child {
    border-right-color: transparent;
  }
}

/* [모바일] 우측 고정 아이콘(카카오/인스타/진단/탑) 크기 축소
   — 위치 관련 조정은 아래 07-27 섹션 참고 */
@media (max-width: 760px) {
  .fixed-action-btn,
  .scroll-top-btn {
    width: 48px;
    height: 48px;
  }
}


/* ------------------------------------------------------------
   2026-07-27 [문의하기] 하단 동의 영역 레이아웃 통일
   index.html 무료진단 폼(.free-diagnosis-check)과 동일하게
   아코디언 타이틀 제거 + 필수/선택 체크박스 2줄 구성
   → contact.html 의 .contact-inquiry-consent 에
     contact-inquiry-consent--plain 클래스 추가 필요
   ------------------------------------------------------------ */

.contact-inquiry-consent--plain {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

/* 아코디언 타이틀 버튼이 남아 있어도 노출되지 않도록 */
.contact-inquiry-consent--plain .contact-inquiry-consent-title {
  display: none;
}

.contact-inquiry-consent--plain .contact-inquiry-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  cursor: pointer;
}

.contact-inquiry-consent--plain .contact-inquiry-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
  accent-color: #6b4eff; /* styles.css 의 .free-diagnosis-check 값과 맞출 것 */
  cursor: pointer;
}

.contact-inquiry-consent--plain .contact-inquiry-check--optional {
  color: #555;
}

@media (max-width: 760px) {
  .contact-inquiry-consent--plain .contact-inquiry-check {
    align-items: flex-start;
    font-size: 14px;
  }

  .contact-inquiry-consent--plain .contact-inquiry-check input[type="checkbox"] {
    margin-top: 2px;
  }
}


/* ------------------------------------------------------------
   2026-07-27 [뉴스레터] 배너 우측 일러스트 확대
   ------------------------------------------------------------ */

.newsletter-visual {
  flex: 0 0 auto;
  width: clamp(240px, 26vw, 360px);
  margin: 0;
}

.newsletter-visual img {
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
}

@media (max-width: 760px) {
  .newsletter-visual {
    width: clamp(180px, 55vw, 260px);
    margin: 0 auto;
  }
}


/* ------------------------------------------------------------
   2026-07-27 [모바일 상품안내] 비교표 우측 페이드 그라데이션 제거
   원인: ::after 가 스크롤 컨테이너 자신을 기준으로 absolute 배치되어
   right:0 이 뷰포트가 아닌 스크롤 콘텐츠 끝에 붙음 → 스크롤 시 함께 이동
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  #platform .plan-comparison__scroll::after {
    content: none;
    display: none;
  }
}


/* ------------------------------------------------------------
   2026-07-27 [모바일 1페이지] 대화 영역 좌측 쏠림 + send 아이콘 겹침
   07-24 padding-right:72px / right:-8px 임시조치 폐기 후 재정리
   ------------------------------------------------------------ */
@media (max-width: 760px) {

  /* 1) 좌측 쏠림 해제 — 콘텐츠가 폭을 다 쓰도록 */
  #main-insight .problem-row,
  #main-insight .problem-row.reverse {
    padding-right: 0;
  }

  #main-insight .problem-question,
  #main-insight .problem-card {
    width: 100%;
    max-width: none;
  }

  /* 2) send 아이콘 — 카드 우하단 바깥에 배치 (devtools 실측값) */
  #main-insight .problem-card {
    position: relative;
    overflow: visible;
  }

  #main-insight .problem-send-icon {
    left: auto;
    top: auto;
    right: 25px;
    bottom: -70px;
    z-index: 1;
  }

  /* 3) 아이콘이 아래 말풍선과 겹치지 않도록 하단 여백 확보 */
  #main-insight .problem-row {
    margin-bottom: 78px;
  }

  #main-insight .problem-row:last-child {
    margin-bottom: 0;
  }

  #main-insight .problem-question,
  #main-insight .problem-bubble {
    position: relative;
    z-index: 2;
  }
}


/* ------------------------------------------------------------
   2026-07-27 [모바일] 우측 고정 아이콘 스택을 화면 하단으로 이동
   세로 가운데 정렬 시 스크롤 중 콘텐츠와 계속 간섭되어 변경
   ※ 원래 가운데 정렬을 유지하려면 이 블록 전체 삭제
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .fixed-action-stack {
    top: auto;
    bottom: 16px;
    right: 8px;
    transform: none;
  }
}


/* ------------------------------------------------------------
   2026-07-27 [뉴스레터 팝업] 동의 문구 사파리에서 넘침
   원인: flex 자식의 기본 min-width:auto 로 인해 사파리에서
   텍스트가 줄바꿈 없이 부모 폭 밖으로 밀려나감
   ------------------------------------------------------------ */
.newsletter-modal-consent {
  align-items: flex-start;
}

.newsletter-modal-consent input[type="checkbox"] {
  flex: 0 0 auto;
}

.newsletter-modal-consent span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: keep-all;   /* 한글/일본어 단어 단위 줄바꿈 우선, 필요시 break-all로 */
}

.free-diagnosis-check span,
.service-deck-consent span,
.contact-inquiry-check span {
  min-width: 0;
  overflow-wrap: break-word;
}