/* Mobile-only refinements for EDIBOOKS.
   Intentionally scoped to <= 767px so desktop layouts stay untouched. */

@media screen and (max-width: 767px) {
  html {
    scroll-padding-top: 72px;
  }

  .section[id],
  .cta-section[id] {
    scroll-margin-top: 72px;
  }

  /* Korean mobile line breaking: keep words intact, but never force a line wider than the viewport. */
  p,
  .t-regular,
  .reviews-note,
  .clients-sub,
  .process-desc,
  .faq-a,
  .safety-desc,
  .price-desc,
  .pt-disclaimer,
  .pt-brand,
  .pt-industry,
  .pt-cat {
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .heading-2,
  .h-mid {
    line-height: 1.15;
  }

  /* 대표 작업 intro: desktop keeps one-line composition, mobile wraps naturally. */
  .works-wrapper .header-paragraph,
  .works-wrapper .header-paragraph .opacity-90,
  .works-wrapper .header-paragraph .t-regular {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .works-wrapper .header-paragraph .t-regular {
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.55 !important;
  }

  /* 서비스 종류: PC처럼 텍스트 카드만 보이게 하고 하단 포트폴리오 표지는 숨김. */
  .services .card-link {
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    gap: 0 !important;
    box-shadow: none !important;
  }

  .services .svc-card.is-second,
  .services .svc-card.is-third,
  .services .svc-card.is-fourth {
    display: none !important;
  }

  .services .svc-card.is-first {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding: 2rem 1.35rem !important;
    border-radius: 16px;
    border: 1px solid rgba(44, 45, 47, 0.08);
    box-shadow: 0 12px 32px rgba(44, 45, 47, 0.06);
  }

  .services .svc-card.is-first .svc-card-title,
  .services .svc-card.is-first .text-wrapper,
  .services .svc-card.is-first .go-portfolio {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
  }

  .services .svc-card.is-first .text-wrapper {
    white-space: normal !important;
    gap: 0.55rem;
  }

  .services .svc-card-title {
    font-size: clamp(28px, 8vw, 34px) !important;
    line-height: 1.18 !important;
  }

  .services .text-wrapper .t-regular {
    font-size: clamp(17px, 4.6vw, 20px) !important;
    line-height: 1.5 !important;
  }

  .services .text-wrapper .t-sub {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.55 !important;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .services .svc-card .go-portfolio {
    margin-top: 0.35rem;
    font-size: 0.95rem !important;
    opacity: 0.72;
  }

  /* 안심 보증: 검은 덩어리가 아니라 문장 뒤에 정확히 붙는 하이라이트 박스로 보이게. */
  .safety-inner {
    padding-top: 6rem;
    padding-bottom: 5.5rem;
    gap: 4rem;
  }

  .safety-header {
    width: 100%;
    max-width: 100%;
    gap: 1.4rem;
  }

  .safety-header .section-label {
    font-size: clamp(13px, 3.5vw, 15px);
  }

  .safety-header .h-mid {
    font-size: clamp(30px, 8.4vw, 36px) !important;
    line-height: 1.24 !important;
    letter-spacing: -0.04em;
    max-width: 100%;
    text-align: center;
  }

  .safety-header .h-mid span {
    display: inline !important;
    padding: 0.08em 0.32em 0.12em !important;
    margin-top: 0 !important;
    border-radius: 0.18em !important;
    line-height: 1.32 !important;
    background: #000000 !important;
    color: #ffffff !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .safety-desc {
    max-width: 20rem;
    margin: 0 auto;
    font-size: clamp(16px, 4.4vw, 18px) !important;
    line-height: 1.75 !important;
    text-align: center;
  }

  /* CTA headline: keep the two intended headline lines separate on mobile instead of flowing inline. */
  .cta-heading,
  .cta-heading .oh-cta,
  .cta-heading h2 {
    width: 100%;
    max-width: 100%;
  }

  .cta-heading .oh-cta {
    display: block !important;
    overflow: visible;
  }

  .cta-heading h2 {
    display: block !important;
    margin-right: 0 !important;
    line-height: 1.35 !important;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .cta-paragraph strong {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* Portfolio page: S25 Ultra mobile readability. */
  .pt-navbar {
    position: sticky;
    top: 0;
    z-index: 70;
    padding: 1rem 1.5rem !important;
    background: rgba(26, 27, 29, 0.98);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  }

  .pt-brand-logo {
    height: 30px !important;
    filter: brightness(0) invert(1);
  }

  .pt-year {
    display: none !important;
  }

  .pt-contact {
    font-size: 1rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em;
  }

  .pt-header {
    margin: 3.5rem auto 2.25rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .pt-title {
    font-size: clamp(48px, 15vw, 64px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.06em;
    margin-bottom: 1.35rem !important;
  }

  .pt-disclaimer {
    max-width: 22rem;
    margin: 0 auto 1.55rem !important;
    padding: 0 !important;
    font-size: clamp(16px, 4.4vw, 18px) !important;
    line-height: 1.58 !important;
    letter-spacing: -0.035em;
  }

  .pt-filters {
    gap: 0.45rem 0.65rem !important;
    max-width: 22rem;
    margin: 0 auto;
  }

  .pt-filter-btn {
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.15 !important;
    padding: 0.35rem 0.15rem !important;
    text-underline-offset: 4px !important;
    white-space: nowrap;
  }

  .pt-filter-divider {
    font-size: 0.95rem !important;
    opacity: 0.28;
  }

  .pt-grid-wrap {
    width: 100% !important;
    max-width: none !important;
    padding-left: max(18px, 4.8vw) !important;
    padding-right: max(18px, 4.8vw) !important;
    padding-bottom: 4.5rem !important;
  }

  .pt-grid {
    grid-template-columns: 1fr !important;
    gap: 1.35rem !important;
  }

  .pt-item {
    width: 100%;
    margin: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(44, 45, 47, 0.06);
  }

  .pt-item img {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    height: auto !important;
  }

  .pt-item figcaption {
    height: auto !important;
    min-height: 4.7rem;
    align-items: flex-start !important;
    gap: 0.9rem !important;
    padding: 1rem 1.05rem 1.1rem !important;
  }

  .pt-brand {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: clamp(18px, 5.2vw, 22px) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.04em;
    flex: 1 1 auto !important;
    min-width: 0;
  }

  .pt-tags {
    min-width: max-content;
    gap: 0.28rem !important;
  }

  .pt-industry {
    font-size: clamp(13px, 3.7vw, 15px) !important;
    line-height: 1.2 !important;
    max-width: 8.2rem;
    text-align: right;
  }

  .pt-cat {
    font-size: clamp(14px, 4.1vw, 16px) !important;
    line-height: 1.2 !important;
  }
}

@media screen and (max-width: 479px) {
  .cta-heading h2 {
    font-size: clamp(28px, 8vw, 34px) !important;
    line-height: 1.38 !important;
  }

  .pt-navbar {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .pt-grid-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}