/* ==========================================================================
   NOGNOFLEX 수정 패치
   --------------------------------------------------------------------------
   적용법: 이 파일을 public/css/nognoflex-patch.css 로 저장한 뒤,
          index.html 의 </head> 바로 위에 아래 한 줄을 추가하세요.

          <link rel="stylesheet" href="/css/nognoflex-patch.css">

   반드시 기존 CSS보다 "뒤에" 와야 덮어쓰기가 됩니다.
   기존 파일은 하나도 수정하지 않습니다. 문제가 생기면 이 한 줄만 지우면
   즉시 원래대로 돌아갑니다.

   폭 기준: 759px (기존 사이트 미디어쿼리와 동일하게 맞춤)
   ========================================================================== */


/* ==========================================================================
   1. 챗봇 — 우측 하단 고정 + 좌우 30도 회전
   --------------------------------------------------------------------------
   원인: 돌아다니는 애니메이션이 transform 을 점유해서 회전이 무시됨.
        transform 은 한 요소에 하나만 적용되므로 위치와 회전을 분리함.
   ========================================================================== */

/* 바깥 = 위치 담당. transform 을 쓰지 않음 */
[class*="chatbot"],
[class*="chat-bot"],
[id*="chatbot"],
[class*="floating"][class*="btn"],
[class*="fab"] {
  position: fixed !important;
  right: 16px !important;
  bottom: 84px !important;   /* 안드로이드 하단 내비게이션 바 회피 */
  left: auto !important;
  top: auto !important;
  transform: none !important;
  animation: none !important; /* 돌아다니는 동작 강제 종료 */
  z-index: 9999 !important;
}

/* 안쪽 = 회전 담당 */
[class*="chatbot"] > *,
[class*="chat-bot"] > *,
[id*="chatbot"] > *,
[class*="fab"] > * {
  display: block;
  transform-origin: 50% 50%;
  animation: nfWobble 2.4s ease-in-out infinite;
}

@keyframes nfWobble {
  0%, 50%, 100% { transform: rotate(0deg); }
  25%           { transform: rotate(-30deg); }
  75%           { transform: rotate(30deg); }
}

/* 어지럼증에 민감한 사용자 배려 (접근성) */
@media (prefers-reduced-motion: reduce) {
  [class*="chatbot"] > *,
  [class*="chat-bot"] > *,
  [id*="chatbot"] > *,
  [class*="fab"] > * {
    animation: none !important;
  }
}


/* ==========================================================================
   2. PC 푸터 — 여백 축소
   --------------------------------------------------------------------------
   min-width: 760px 으로 감싸서 모바일에는 영향이 가지 않게 함.
   ========================================================================== */

@media (min-width: 760px) {

  footer,
  [class*="footer"]:not([class*="footer-"]) {
    padding-top: 36px !important;
    padding-bottom: 28px !important;
  }

  /* 구분선 위아래 여백 */
  footer hr,
  [class*="footer"] hr,
  [class*="divider"] {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  /* 사업자정보 행 간격 압축 */
  footer dl,
  footer dt,
  footer dd,
  [class*="footer"] dl {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
  }

  /* 로고 / 태그라인 묶음 */
  footer h2,
  footer h3,
  [class*="footer"] [class*="brand"],
  [class*="footer"] [class*="logo"] {
    margin-bottom: 6px !important;
  }

  /* 하단 저작권 줄 */
  [class*="footer"] [class*="bottom"],
  [class*="footer"] [class*="copyright"] {
    margin-top: 18px !important;
    padding-top: 14px !important;
  }
}


/* ==========================================================================
   3. 모바일 푸터 — 한 줄 흐름 배치
   --------------------------------------------------------------------------
   핵심: white-space: nowrap 으로 항목 하나가 중간에 쪼개지지 않게 함.
        "744-10-" / "01563" 처럼 끊기던 문제를 막음.
        자리가 부족하면 항목 통째로 다음 줄로 내려감.
   ========================================================================== */

@media (max-width: 759px) {

  /* 사업자정보 묶음을 가로 흐름으로 */
  footer dl,
  [class*="footer"] [class*="biz"],
  [class*="footer"] [class*="info"],
  [class*="footer"] [class*="company"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px 10px !important;
    padding: 0 16px !important;
    margin: 0 0 10px !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    text-align: center !important;
  }

  /* 라벨 + 값을 한 덩어리로 묶고 절대 쪼개지지 않게 */
  footer dt,
  footer dd {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  /* 라벨은 값보다 흐리게 */
  footer dt {
    font-size: 11px !important;
    opacity: .6 !important;
    margin-right: 4px !important;
  }

  /* 값 다음에 구분자 */
  footer dd::after {
    content: "|";
    margin-left: 10px;
    opacity: .25;
  }
  footer dd:last-of-type::after {
    content: "";
  }

  /* 주소·긴 문장은 예외로 줄바꿈 허용 */
  footer [class*="addr"],
  footer [class*="address"] {
    white-space: normal !important;
    word-break: keep-all !important;
    flex-basis: 100% !important;
    justify-content: center !important;
  }

  /* 푸터 전체 여백도 모바일에 맞게 */
  footer,
  [class*="footer"]:not([class*="footer-"]) {
    padding: 28px 16px 24px !important;
  }

  /* 약관 링크 줄 */
  footer nav,
  [class*="footer"] [class*="link"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 14px !important;
    font-size: 12px !important;
  }
}


/* ==========================================================================
   4. 한글 줄바꿈 전역 보정
   --------------------------------------------------------------------------
   "자세히 보 / 기", "경추베개 전문 / 가" 처럼 단어 중간이 끊기는 문제 해결.
   한글은 글자 단위로 끊지 않고 단어(어절) 단위로 넘김.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
button, a[class*="btn"], [class*="button"],
[class*="card"] p, [class*="card"] h3, [class*="card"] h4,
[class*="title"], [class*="heading"] {
  word-break: keep-all;
  overflow-wrap: break-word;
}


/* ==========================================================================
   5. 전자책 배너 v2 — 프롤로그 발췌 + 대형 CTA
   --------------------------------------------------------------------------
   HTML 교체가 필요합니다. ebook-banner.html 파일을 참고하세요.
   클래스명을 nf-ebook-* 으로 새로 부여하므로 기존과 충돌하지 않습니다.
   ========================================================================== */

.nf-ebook {
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 52px 56px;
  border-radius: 22px;
}

.nf-ebook__cover {
  flex: 0 0 auto;
}

.nf-ebook__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.nf-ebook__eyebrow {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0 0 12px;
}

/* 제목 — 화면 폭 따라 자동 조절 */
.nf-ebook__title {
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -.02em;
  word-break: keep-all;
  margin: 0 0 22px;
}

.nf-ebook__title em {
  font-style: normal;
  color: #FF7A1A;
}

/* ---- 프롤로그 발췌 ------------------------------------------------------ */

.nf-ebook__prologue {
  position: relative;
  margin: 0 0 22px;
  padding: 20px 24px 20px 26px;
  border-left: 3px solid #FF7A1A;
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, .05);
}

.nf-ebook__prologue-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #FF7A1A;
  opacity: .9;
  margin: 0 0 12px !important;
}

.nf-ebook__prologue p {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.75;
  color: rgba(255, 255, 255, .78);
  word-break: keep-all;
  margin: 0 0 10px;
}

.nf-ebook__prologue p:last-child {
  margin-bottom: 0;
}

.nf-ebook__prologue strong {
  color: rgba(255, 255, 255, .98);
  font-weight: 700;
}

/* ---- 훅 ---------------------------------------------------------------- */

.nf-ebook__hook {
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 600;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
  word-break: keep-all;
  margin: 0 0 24px;
}

.nf-ebook__hook strong {
  color: #FF7A1A;
  font-weight: 800;
}

/* ---- 대형 CTA 버튼 ------------------------------------------------------ */

.nf-ebook__cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 280px;
  padding: 20px 44px;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  background: #FF7A1A;
  color: #fff;
  box-shadow: 0 6px 20px rgba(255, 122, 26, .32);
  transition: transform .18s ease, box-shadow .18s ease;
}

.nf-ebook__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(255, 122, 26, .45);
}

.nf-ebook__cta-main {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  word-break: keep-all;
}

.nf-ebook__cta-sub {
  font-size: 12px;
  font-weight: 500;
  opacity: .82;
  word-break: keep-all;
}

/* ---- 배너 모바일 -------------------------------------------------------- */

@media (max-width: 759px) {
  .nf-ebook {
    flex-direction: column;
    text-align: center;
    gap: 22px;
    padding: 32px 20px;
  }

  .nf-ebook__cover img {
    width: 150px;
    height: auto;
  }

  .nf-ebook__title {
    font-size: 24px;
    margin-bottom: 18px;
  }

  .nf-ebook__prologue {
    text-align: left;
    padding: 16px 18px 16px 20px;
    margin-bottom: 18px;
  }

  .nf-ebook__prologue p {
    font-size: 14px;
    line-height: 1.7;
  }

  /* 모바일에서는 발췌 마지막 문단만 남겨 길이 절약 */
  .nf-ebook__prologue p:nth-of-type(3) {
    display: none;
  }

  .nf-ebook__hook {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .nf-ebook__cta {
    width: 100%;
    min-width: 0;
    padding: 18px 20px;
  }

  .nf-ebook__cta-main { font-size: 18px; }
  .nf-ebook__cta-sub  { font-size: 11px; }
}


/* ==========================================================================
   6. 육각벌집 — PC 제자리 뒤집기 + 제목 보강
   --------------------------------------------------------------------------
   nf-hex.js 의 NF_PC_FLIP = true 와 짝입니다.
   JS 가 <div id="nfHexRows"> 에 .nf-flip 클래스를 붙여줍니다.
   ========================================================================== */

@media (min-width: 760px) {

  /* --- 제자리 뒤집기: 바깥으로 나가는 문을 감춤 --- */
  .nf-flip .nf-door {
    display: none !important;
  }

  /* 셀은 left/top 으로 배치되므로 transform 을 회전에 써도 안전함 */
  .nf-flip .nf-cell {
    transform-style: preserve-3d;
  }
  .nf-flip .nf-cell.nf-on {
    transform: rotateY(180deg);
  }
  .nf-flip .nf-cell .nf-back {
    transform: rotateY(180deg);
  }

  /* --- 글자 크기: 벌집이 커진 만큼 상한을 올림 --- */
  .nf-hex-section .nf-cell,
  .nf-hex-section .nf-center {
    font-size: clamp(13px, calc(var(--hw) * .125), 26px);
  }
  .nf-hex-section .nf-num {
    font-size: clamp(10px, calc(var(--hw) * .072), 15px);
  }
  .nf-hex-section .nf-name {
    font-weight: 700;
    letter-spacing: -.02em;
    word-break: keep-all;
  }
  .nf-hex-section .nf-vals {
    line-height: 1.65;
  }

  /* --- 제목("체형" / "수면환경") 보강 + 벌집과 붙이기 --- */
  .nf-hex-section .nf-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0 0 2px !important;   /* 벌집과 가깝게 */
  }
  .nf-hex-section .nf-caption::after {
    content: "";
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: #2E7BD6;
  }
}

/* --- 모바일 제목도 같이 다듬음 (배치는 기존 유지) --- */
@media (max-width: 759px) {
  .nf-hex-section .nf-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0 0 2px !important;
  }
  .nf-hex-section .nf-caption::after {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: #2E7BD6;
  }
}
/* ==========================================================================
   7. QR 모달 병원 로고 크기
   ========================================================================== */

#nfPropagatorQrHospitalLogo,
#nfHospitalQrBrandLogo {
  width: 76px !important;
  height: 76px !important;
  object-fit: contain;
}

#nfPropagatorQrHospitalLogoWrap,
#nfHospitalQrBrandLogoWrap {
  margin: 0 0 12px !important;
}

/* 인쇄물은 조금 더 크게 */
@media print {
  #nfPropagatorQrHospitalLogo,
  #nfHospitalQrBrandLogo {
    width: 92px !important;
    height: 92px !important;
  }
}