/* ============================================================
 * mobile-fixes.css — defensive mobile layout patches
 *
 * cnolad-landing/index.html 은 imweb + 수기 카드 + 인라인 SVG 가 섞인
 * 44k 라인 정적 페이지. 직접 수정은 회귀 위험이 크고, 위젯이 동적으로
 * 재생성되면 패치도 함께 날아간다. 본 파일은 **마지막에 로드돼 모든
 * imweb-generated CSS 를 override** 하는 안전망.
 *
 * 적용 원칙:
 *   1) PC 1024px+ 는 절대 손대지 않는다 (selectors 모두 @media 안)
 *   2) 글로벌 overflow guard — 화면 밖으로 튀는 요소 방지
 *   3) Tap target — 인터랙티브 요소 최소 44×44px
 *   4) Korean 한국어 줄바꿈 — word-break: keep-all 로 어절 단위 줄바꿈
 *   5) Hero/Counter/Diff/Process/Portfolio 별 mobile 미세 조정
 * ============================================================ */

/* ===== 글로벌 overflow guard ===== */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
  /* imweb 위젯이 음수 margin / fixed width 로 튀어나오는 케이스 차단 */
  .section_wrap, .pc_section, .mobile_section, .doz_row {
    max-width: 100vw;
  }
}

/* ===== Tap target — 44×44px 최소 보장 ===== */
@media (max-width: 768px) {
  .btn-more,
  .btn-primary,
  .btn-secondary,
  .ms-btn,
  .ms-button,
  a.btn,
  button.btn,
  .faq-question,
  .nav-cta,
  header a[href],
  .footer-cta {
    min-height: 44px;
    /* 텍스트 link 는 inline-flex 로 center 정렬 (탭 영역 유지) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* 햄버거/오프캔버스 트리거 */
  .btn-burger,
  .navbar-toggler,
  [data-toggle="offcanvas"] {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ===== Hero 영역 (mstitle) — 한국어 줄바꿈 + 패딩 ===== */
@media (max-width: 768px) {
  .mstitle {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .mstitle h1,
  .mstitle .hero-title,
  .mstitle p,
  .mstitle .hero-subtitle {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* ===== Section 2: counter-grid (히어로 KPI) ===== */
@media (max-width: 480px) {
  /* 360px 화면에서 padding 40px 20px 너무 답답 → 24px 16px */
  .counter-item {
    padding: 24px 16px !important;
  }
  .counter-number {
    font-size: 32px !important;
  }
  .counter-label {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}

/* ===== Section 02 Collab Venn — 추가 안전 ===== */
@media (max-width: 768px) {
  /* PC painpoints (절대값 width:317px) 가 모바일에 실수로 노출될 케이스 차단 */
  .painpoints {
    display: none !important;
  }
  /* 모바일 painpointsM 변형이 있다면 스택 + 폭 100% */
  .painpointsM,
  .painpoint-mobile {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .indvPPM,
  .indvPPL {
    width: 100% !important;
    max-width: 100% !important;
  }
  .indvPPM p,
  .indvPP p {
    width: auto !important;
    max-width: calc(100vw - 40px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* ===== Section 05: sec-diff 차이 카드 한국어 줄바꿈 ===== */
@media (max-width: 768px) {
  .diff-card-text,
  .diff-num-v2,
  .diff-tags-v2 span {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .diff-card-v2 {
    padding: 20px !important;
  }
}

/* ===== Section 06: portfolio 카드 ===== */
@media (max-width: 480px) {
  .portfolio-grid {
    gap: 8px !important;
  }
  .btn-more {
    padding: 12px 32px !important;
    font-size: 14px !important;
  }
}

/* ===== Section 07: reviews 카드 ===== */
@media (max-width: 768px) {
  .reviews-grid,
  .review-card,
  .review-item {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* ===== Section 08: process-steps ===== */
@media (max-width: 768px) {
  .sec-process-steps .section-title.light,
  .sec-process-steps p {
    word-break: keep-all;
    overflow-wrap: anywhere;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ===== FAQ 한국어 줄바꿈 ===== */
@media (max-width: 768px) {
  .faq-question,
  .faq-answer,
  .faq-section-header .title,
  .faq-section-header .description {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .faq-section-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ===== imweb-generated 위젯 한국어 줄바꿈 안전망 ===== */
@media (max-width: 768px) {
  .widget_text_wrap .fr-view h1,
  .widget_text_wrap .fr-view h2,
  .widget_text_wrap .fr-view h3,
  .widget_text_wrap .fr-view p,
  .widget_text_wrap .fr-view span {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* ===== fixed-width 이미지 안전망 ===== */
@media (max-width: 480px) {
  /* 인라인 SVG / 이미지 폭 화면 초과 차단 */
  svg, img {
    max-width: 100% !important;
    height: auto;
  }
}

/* ============================================================
 * Mobile Hero 시각 보강 (사용자 보고: "텍스트만 있어 빈약")
 *
 * 모바일 hero #s2023050632462ed0585c8 (mobile_section_first):
 *   0) 콘텐츠 공장 배경 비디오 (PC msVidContainer 와 동일 src) — section bg
 *      위에 cover 로 깔고 어두운 overlay 입혀 텍스트 가독성 보장
 *   1) glow blob 2개 (top-right + bottom-left) — 부드러운 그라데이션 광원
 *   2) decorative grid pattern overlay — 미세한 격자
 * PC 무영향 (≤768px 안에서만 적용).
 * ============================================================ */
@media (max-width: 768px) {
  /* PC hero msVidContainer 의 콘텐츠 공장 비디오를 모바일 hero 배경에 깔기 */
  .mobile_section_first .mobile_hero_bg_video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* opacity 0.65 — 사용자 요청으로 15% 더 뚜렷하게 (0.5 → 0.65)
       multiply blend 로 #0063FF 와 겹쳐 컨텐츠 공장 윤곽 더 잘 드러남 */
    opacity: 0.65;
    mix-blend-mode: multiply;
    pointer-events: none;
  }
}

/* ============================================================
 * '대표님들의 고민은 똑같습니다' / WHY SUBSCRIBE 두 모바일 섹션의
 * padding 위젯들 일괄 축소. PC 는 두 영역이 tight 하게 이어지는 흐름인데
 * 모바일은 70/30/90 등 padding 위젯이 누적돼 빈 공간 과다.
 * ============================================================ */
@media (max-width: 768px) {
  /* 섹션 자체의 section_wrap 외곽 margin/padding 제거 — imweb 기본
     section_wrap 이 자체 vertical padding 을 가져 widget padding 압축만으로는
     섹션 간 큰 갭이 남는다. 두 섹션 모두 외곽 reset. */
  #s2023022010dcb3ba0010d,
  #s202302209dd23259eed31 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #s2023022010dcb3ba0010d > main,
  #s202302209dd23259eed31 > main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  #s2023022010dcb3ba0010d .inside,
  #s202302209dd23259eed31 .inside {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* 대표님들 고민 — 가운데 title 위주 짧은 섹션. 모든 padding 위젯 4px */
  #s2023022010dcb3ba0010d .widget.padding {
    max-height: 4px !important;
    margin: 0 !important;
  }
  #s2023022010dcb3ba0010d .widget.padding > div[id^="padding_"] {
    height: 4px !important;
    min-height: 1px !important;
  }

  /* '대표님들의 고민은 똑같습니다' 모바일 섹션의 painpoint 이미지(.ppM) 3장 +
     그 사이 padding 위젯들 모두 숨김. section_2(#s202302209dd23259eed31) 의
     .indvPPM 카드가 동일 painpoint 내용을 텍스트로 다루므로 시각 중복.
     사용자 요청: 제목 ↔ WHY SUBSCRIBE 사이 여백을 제목의 상부 여백(4px)
     수준으로 축소. */
  #w202302208bcef619fe8c9,
  #w20230220f8388872f1fe2,
  #w202302205a9af188942a5,
  #w20230220393870f8a00e0,
  #w2023022066ba18b080c18,
  #w20230220597b432076e56,
  #w20230220b5a6a01c823c1 {
    display: none !important;
  }

  /* WHY SUBSCRIBE — indvPPM 사이 16px 유지, top/bottom 은 4px */
  #s202302209dd23259eed31 .widget.padding {
    max-height: 16px !important;
    margin: 0 !important;
  }
  #s202302209dd23259eed31 .widget.padding > div[id^="padding_"] {
    height: 16px !important;
    min-height: 1px !important;
  }
  /* 첫번째/마지막 padding 만 추가로 4px */
  #padding_w20230220bca61e8dd3a55,
  #padding_w20230220874da3266a3e4 {
    height: 4px !important;
    min-height: 1px !important;
  }
  #w20230220bca61e8dd3a55 .widget.padding,
  #w20230220874da3266a3e4 .widget.padding {
    max-height: 4px !important;
  }

  /* '직접 섭외한 크리에이터도, / 광고대행사도 / 비용 대비 성과가 불만족스럽나요?'
     3줄 (사용자 명시 줄바꿈 — br 2개). 모바일에서 30px 폰트는 oversize → 22px
     + line-height 30 + keep-all 로 자연 어절 줄바꿈. */
  #w20230220b821853c60377 .widget_text_wrap .fr-view p span {
    font-size: 22px !important;
    line-height: 30px !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
  /* 위 패딩 컨테이너의 default_padding 도 좌우 16 으로 통일 */
  #w20230220b821853c60377 .widget_text_wrap.default_padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* indvPPM 들이 fadeIn animation 으로 숨겨져 있다면 강제 노출 */
  #s202302209dd23259eed31 .wg_animated,
  #s202302209dd23259eed31 .indvPPM,
  .indvPPM,
  .indvPPM * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* 전역 word-break 의 overflow-wrap: anywhere 가 한글 중간을 끊을 수 있어,
     widget_text_wrap 의 한글 텍스트는 break-word 로 완화 (어절 단위 줄바꿈). */
  .widget_text_wrap .fr-view p,
  .widget_text_wrap .fr-view span {
    overflow-wrap: break-word !important;
  }
}

/* ============================================================
 * .indvPPM 모바일 캐릭터 말풍선 보강 — PC painpoints SVG 와 동일 시각
 *
 * PC .painpoints 의 SVG 말풍선:
 *   · 둥근 직사각형 (radius 15px)
 *   · bg #F9FBFC, border 1px #78ADFC
 *   · 우측 하단 모서리 근처에 작은 삼각 꼬리 (캐릭터 가리킴)
 *   · drop shadow (3,3 offset, blur 4.5, 15% opacity)
 *
 * 모바일 indvPPM 에 동일 패턴 + ::after 로 우측 하단 꼬리 적용.
 * ============================================================ */
@media (max-width: 768px) {
  .indvPPM {
    position: relative !important;
    padding: 18px 16px !important;
    margin: 4px 16px 12px !important;
    box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.15) !important;
  }

  /* PC 와 동일: 우측 하단 모서리에 말풍선 꼬리 (캐릭터 위치 가리킴).
     border-bottom + border-right 가 카드 본체 border 와 연결되도록 layout. */
  .indvPPM::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -8px;
    width: 14px;
    height: 14px;
    background: #F9FBFC;
    border-bottom: 1px solid #78ADFC;
    border-right: 1px solid #78ADFC;
    transform: rotate(45deg);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  }

  .indvPPM h1 {
    line-height: 26px !important;
    margin: 0 0 6px !important;
  }
  .indvPPM p {
    margin: 0 !important;
    font-size: 12px !important;
    color: #6c757d !important;
  }
}

/* PC 에서는 모바일 배경 비디오 element 숨김 (PC 는 별도 msVidContainer 사용) */
@media (min-width: 769px) {
  .mobile_hero_bg_video {
    display: none !important;
  }
}
@media (max-width: 768px) {
  /* mobile hero 컨테이너 positioning */
  .mobile_section_first {
    position: relative !important;
    overflow: hidden !important;
  }

  /* ── glow blob top-right ── */
  .mobile_section_first::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 1;
  }

  /* ── glow blob bottom-left + 미세 grid pattern (배경) ── */
  .mobile_section_first::after {
    content: "";
    position: absolute;
    bottom: -160px;
    left: -160px;
    width: 420px;
    height: 420px;
    background:
      radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%),
      repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.04) 0,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px,
        transparent 32px
      ),
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px,
        transparent 32px
      );
    pointer-events: none;
    z-index: 1;
  }

  /* hero 안 컨텐츠는 blob 위로 띄움 */
  .mobile_section_first > main,
  .mobile_section_first .inside,
  .mobile_section_first #govMon {
    position: relative;
    z-index: 2;
  }

  /* CTA 프로모션 배너 (#govMon) 강조 — drop shadow */
  #govMon {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    border-radius: 12px;
  }
}

/* ============================================================
 * 모바일 hero — Persona character video strip
 *
 * PC 의 .people (3 캐릭터 비디오 — 뷰티 크리에이터 / 브랜드 캠페인 /
 * 콘텐츠 매칭) 를 모바일에서도 작게 노출. PC 컨테이너는 .pc_section
 * .mobile_hide 라 동일 DOM 재사용 불가 → mobile_section_first 안에 별도
 * .peopleMobile div 를 직접 인젝트.
 * ============================================================ */
@media (max-width: 768px) {
  /* PC .people 와 동일한 시각 패턴 — flex row, 라벨이 비디오 우측 하단
     모서리에 겹치는 파란 라운드 pill. PC CSS:
       .indvPPL div { bottom: 38px; right: -90px; background: #0063FF;
         border-radius: 20px; color: #fff; ... }
     모바일은 비례 축소. */
  .peopleMobile {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    padding: 24px 16px 32px; /* 라벨이 video 밖으로 겹치므로 bottom padding 여유 */
    position: relative;
    z-index: 3;
  }
  .peopleMobile .indvPPL-mobile {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
  }
  .peopleMobile .indvPPL-mobile video {
    display: block;
    width: 100%;
    aspect-ratio: 7/8;
    border-radius: 14px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  }
  .peopleMobile .indvPPL-mobile-label {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    padding: 4px 10px;
    background: #0063FF;
    border-radius: 999px;
    color: #fff;
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
}

@media (max-width: 360px) {
  /* 360px 미만 — 더 작게 */
  .peopleMobile {
    padding: 16px 12px 28px;
    gap: 6px;
  }
  .peopleMobile .indvPPL-mobile-label {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* PC 1024px+ 에서는 .peopleMobile 숨김 (PC 는 원본 .people 사용) */
@media (min-width: 769px) {
  .peopleMobile {
    display: none !important;
  }
}

/* (Removed: '500+ 브랜드와 함께' trust badge — PC 에 없는 가짜 콘텐츠라
    사용자 요청으로 제거됨) */

/* ============================================================
 * sideBTN / m_sideBTN — writing-mode: vertical-lr 에서 Latin (AI)
 * 글자가 90도 회전(가로눕음) 되는 문제 fix. text-orientation: upright
 * 로 모든 글자(한글+영문)를 세로 정방향 정렬. "AI 매칭 받기" 의
 * "AI" 가 다른 한글 글자와 동일 방향으로 표시됨.
 * PC + Mobile 공통 적용 (no media query).
 * ============================================================ */
.sideBTN a,
.m_sideBTN a {
  text-orientation: upright !important;
  -webkit-text-orientation: upright !important;
  letter-spacing: 1px !important;
}