/* =========================================================
   PROBLEM SECTION — JW MEDIA "CLIENT PROBLEM" 구조 재현
   prototype.html 의 .jw-problem 에만 적용 (다른 섹션 영향 없음)

   레퍼런스 실측 (1440px):
   - 배경 #EEECE6, padding 128 / 24 / 144, 컨텐츠 1280px
   - 좌 631px(49.3%) | gap 64px | 우 585px(48%)
   - 라벨 12px/400 #C84A0A  → 54px → (좌)인트로 14px/500 → 22px → 제목 78px/900 lh1.3 ls-2.5px
   - (우) 항목: 상단 1px #B8B0A8, padding 25/0/27, 항목 간 20px
          소제목 20px/600 lh27 → 8px → 본문 15px/400 lh1.75 #5B554F
   ========================================================= */

@font-face{font-family:"Paperlogy";font-weight:400;font-style:normal;font-display:swap;
  src:url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2") format("woff2")}
@font-face{font-family:"Paperlogy";font-weight:500;font-style:normal;font-display:swap;
  src:url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2") format("woff2")}
@font-face{font-family:"Paperlogy";font-weight:600;font-style:normal;font-display:swap;
  src:url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2") format("woff2")}
@font-face{font-family:"Paperlogy";font-weight:900;font-style:normal;font-display:swap;
  src:url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2") format("woff2")}

.jw-problem{
  --pb-bg:#EEECE6;
  --pb-ink:#0B0A09;
  --pb-sub:#5B554F;
  --pb-orange:#8E2536; /* 아이보리 위 버건디 */
  --pb-rule:#B8B0A8;
  --pb-content:1280px;

  background:var(--pb-bg);
  color:var(--pb-ink);
  padding:128px 24px 144px;
  font-family:"Paperlogy",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  word-break:keep-all;
}
.jw-problem *{box-sizing:border-box}
.jw-problem__inner{max-width:var(--pb-content);margin-inline:auto}

/* LEVEL 5 — 라벨 */
.jw-problem__kicker{margin:0 0 54px;font-size:12px;font-weight:400;line-height:1.3;letter-spacing:.8px;text-transform:uppercase;color:var(--pb-orange)}

/* 2-column: 좌 49.3% / gap 64 / 우 48% */
.jw-problem__layout{display:flex;align-items:flex-start;gap:44px 64px}
.jw-problem__head{flex:0 0 49.322%;min-width:0;display:flex;flex-direction:column;gap:22px}
.jw-problem__list{flex:0 1 48%;min-width:0;display:flex;flex-direction:column;gap:20px}

/* LEVEL 3 — 인트로 */
.jw-problem__intro{margin:0;font-size:14px;font-weight:500;line-height:1.3;letter-spacing:.1px;color:var(--pb-sub)}

/* LEVEL 1 — 메인 제목 (굵은 글자 + 넉넉한 행간) */
.jw-problem__title{margin:0;font-size:78px;font-weight:900;line-height:1.3;letter-spacing:-2.5px;color:var(--pb-ink)}

/* 우측 항목 — 얇은 선만으로 구분 */
.jw-problem__item{border-top:1px solid var(--pb-rule);padding:25px 0 27px;display:flex;flex-direction:column;gap:8px}
/* LEVEL 2 — 소제목 */
.jw-problem__item-title{margin:0;font-size:20px;font-weight:600;line-height:1.35;letter-spacing:.1px;color:var(--pb-ink)}
/* LEVEL 4 — 본문 */
.jw-problem__item-body{margin:0;font-size:15px;font-weight:400;line-height:1.75;letter-spacing:normal;color:var(--pb-sub)}

/* TABLET (≤1024) — 레퍼런스 실측: padding 96/32/108, 제목 62px */
@media (max-width:1024px){
  .jw-problem{padding:96px 32px 108px}
  .jw-problem__title{font-size:62px}
}

/* MOBILE (≤767) — 1열: 라벨 → 인트로 → 제목 → 항목 01~03 */
@media (max-width:767px){
  .jw-problem{padding:80px 20px 88px}
  .jw-problem__kicker{margin-bottom:40px}
  .jw-problem__layout{flex-direction:column}
  .jw-problem__head,.jw-problem__list{flex:0 0 auto;width:100%}
  .jw-problem__title{font-size:40px;line-height:1.35;letter-spacing:-1.5px}
  .jw-problem__title br,.jw-problem__item-body br{display:none} /* 모바일은 자연 줄바꿈 */
  .jw-problem__item-title{font-size:18px}
  .jw-problem__item-body{font-size:14px}
}