@charset "utf-8";

/* ================================================================
   WHY LED  -  /en/whyled
   ---------------------------------------------------------------
   · 폰트는 선언하지 않는다. common.css 의 Pretendard 를 물려받는다.
   · 이 화면은 관리자 판(tone) 을 따르지 않는다. 값을 여기에 박아 둔다.
   · 관리자 「상단 배너 사용」은 N (히어로만 씀) 이어야 한다.
   ---------------------------------------------------------------
   2026-08-13 색 마무리

   1. 히어로 빛줄기      호박 .12 → .28 (더 진하게)
   2. 히어로 강조 글자   흰색 → 호박 #E8A33C
        청록을 쓰면 아래 01·02·03 의 청록이 죽는다.
        호박은 빛줄기와 같은 계열이라 위아래가 맞물린다.
   3. 2섹션 바닥         순백 → #FAF7F2 (아주 옅은 따뜻한 회색)
        청록의 보색 쪽이라 01·02·03 청록이 가장 세게 뜬다.
        비용 구간(#F4F7F6)과 색이 겹치지 않는다.
   ---------------------------------------------------------------
   2026-08-12 전면 개편

   1. 색 통일
      남색 #0F1C2E · #1A2536      → 먹색 #052424 · #0A3230
      초록 #0D9488                 → 청록 #14B89A (사이트 색)
      하늘 #A8D5E5 #4DA3C7 #1E6B8C → 뺌
      붉은 #B23A3A 유지 — 부정 비교(13배)에만
      호박 #E8A33C — 큰 숫자 · 마지막 단추 · 빛줄기 · 스캔선

   2. 문제 01·02·03 구간의 청록은 지시사항이므로 손대지 않는다

   3. 히어로 = 배너 규격 (hero-base)
        높이       360 / 360 / 290 / 290 / 180
        위 여백    75 / 65 / 65 / 58 / 42
        안쪽 폭    min(1560px,88%) → min(1360px,92%) → min(1200px,94%)
        좌우 여백  24·15 → 20·14 → 18·12
        소제목     14px 500 자간 1.5px line-height:1
        큰 제목    42px 600 줄간격 1.3em
        작은 설명  17px 400 1.55em
        줄 사이    소제목→제목 12/12/8   제목→설명 16/14/10
        세로       위 여백 뒤 남은 공간의 가운데
        가로       왼쪽 정렬
      글자 효과도 배너와 같다 (0.075초 간격 · 450ms · 650ms)

   4. 한 구간 = 한 장면
      index.php 안의 JS 가 굴린 것을 받아 다음 장면으로 옮긴다.
        1 히어로 → 2 문제 → 3 규제 → 4 이점
        → 5 비용 → 6 친환경+단추 → 7 푸터
      1024px 아래에서는 JS 가 스스로 꺼진다.

   5. 큰 글자·여백은 clamp() 로 화면 높이를 따라간다
   6. 스크롤 효과는 오갈 때마다 다시 뜬다
   7. 친환경 알약에 테두리 선 그려지는 효과
   ---------------------------------------------------------------
   색은 아래 :root 값만 고치면 화면 전체가 바뀐다.
   장면 넘기는 속도는 index.php 의 DUR 값에서 고친다.
   ================================================================ */

:root{
    --wl-ink:#052424;
    --wl-ink2:#0A3230;
    --wl-teal:#14B89A;
    --wl-teal-d:#0B7A66;
    --wl-teal-bg:#E7F7F4;
    --wl-amber:#E8A33C;
    --wl-amber-h:#F2B559;
    --wl-amber-up:#F7C062;
    --wl-bad:#B23A3A;
    --wl-g:#6B7A78;
    --wl-g-on:#8FA5A2;
    --wl-line:#E3E9E7;
    --wl-soft:#F4F7F6;
    --wl-warm:#FAF7F2;
}

/* ---------- 배너 자리 없애기 · 전체 폭 쓰기 ----------
   width 는 100vw 가 아니라 100% 를 쓴다.
   100vw 는 스크롤바 너비까지 먹어서 배너(.sub-top)보다
   15px 넓어지고, 가운데 정렬 기준이 어긋나 글자가 8px
   왼쪽으로 밀린다. */
#content:has(.whyled){ padding:0 !important; margin:0 !important; max-width:none !important; }

.whyled{
    width:100%;
    margin-left:0;
    color:var(--wl-ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
}
.whyled *{ box-sizing:border-box; }

/* ================================================================
   안쪽 폭 — 배너(.sub-top .inner) 규칙 그대로
   ================================================================ */
.whyled .wl-inner{
    width:min(1560px,88%);
    max-width:none;
    margin:0 auto;
    padding:0 15px 0 24px;
    box-sizing:border-box;
}
@media (max-width:1560px){ .whyled .wl-inner{ width:min(1360px,92%); } }
@media (max-width:1420px){ .whyled .wl-inner{ padding:0 14px 0 20px; } }
@media (max-width:1024px){ .whyled .wl-inner{ width:min(1200px,94%); padding:0 12px 0 18px; } }

/* ================================================================
   한 장면은 한 화면을 채운다 (히어로 제외)
   ================================================================ */
.wl-scene{
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
}

/* ---------- 공통 부품 ---------- */
.wl-kick{
    font-size:14px; letter-spacing:4px; text-transform:uppercase;
    color:var(--wl-g); font-weight:500;
}
.wl-kick.on-dark{ color:var(--wl-g-on); }

/* 소제목 앞 점 — 깜빡임 + 퍼지는 고리 */
.wl-dot{
    position:relative; display:inline-block; width:10px; height:10px;
    border-radius:50%; background:var(--wl-teal); margin-right:12px;
    vertical-align:1px; animation:wlbeat 1.4s ease-in-out infinite;
}
.wl-dot:after{
    content:''; position:absolute; inset:0; border-radius:50%;
    border:2px solid var(--wl-teal); animation:wlring 1.9s ease-out infinite;
}

.wl-h{ font-weight:200; letter-spacing:-1px; color:var(--wl-ink); line-height:1.15; }
.wl-h.on-dark{ color:#fff; }
.wl-h b{ font-weight:500; }
.wl-bar{ height:3px; width:56px; background:var(--wl-teal); }

@keyframes wlbeat{ 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes wlring{ 0%{transform:scale(1);opacity:.85} 70%{transform:scale(2.8);opacity:0} 100%{opacity:0} }
@keyframes wlsweep{ 0%{left:-40%} 100%{left:130%} }
@keyframes wlscan{ 0%{top:-10%} 100%{top:110%} }

/* ---------- 스크롤 등장 (오갈 때마다 다시 뜬다) ---------- */
.wl-up{ opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.wl-up.on{ opacity:1; transform:none; }

/* ================================================================
   1. 히어로 — 배너 규격 (hero-base)
   ================================================================ */
.hero-base{
    position:relative;
    height:360px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.hero-base .wl-inner{
    position:relative; z-index:2;
    height:100%;
    display:flex; align-items:center; justify-content:flex-start;
    padding-top:75px;
}
.hero-base .text{ width:100%; }

/* 소제목 — 배너와 같은 값.
   line-height:1 이 중요하다. 안 주면 .whyled 의 1.6 을 물려받아
   글자 높이가 14px → 22.4px 로 늘어나고 세 줄이 전부 밀린다. */
.hero-base .text .sbt-split{
    display:block;
    font-size:14px; font-weight:500; letter-spacing:1.5px; line-height:1;
    color:var(--wl-g-on); text-transform:uppercase;
}
.hero-base .text h2{
    margin:12px 0 0;
    font-size:42px; font-weight:600; line-height:1.3em;
    color:#fff;
}
/* 강조 글자 — 호박색   ★2026-08-13
   청록을 쓰면 아래 01·02·03 의 청록이 죽는다. */
.hero-base .text h2 b{ color:var(--wl-amber); font-weight:600; }
.hero-base .text p{
    margin:16px 0 0;
    font-size:17px; line-height:1.55em; font-weight:400;
    color:#C9D6D4; max-width:760px;
}
.hero-base .text p b{ color:var(--wl-amber); font-weight:500; }

@media (max-width:1420px){
    .hero-base{ height:360px; }
    .hero-base .wl-inner{ padding-top:65px; }
}
@media (max-width:1200px){
    .hero-base{ height:290px; }
    .hero-base .wl-inner{ padding-top:65px; }
    .hero-base .text h2{ font-size:34px; margin-top:12px; }
    .hero-base .text p{ font-size:15px; margin-top:14px; }
}
@media (max-width:1024px){
    .hero-base{ height:290px; }
    .hero-base .wl-inner{ padding-top:58px; }
}
@media (max-width:768px){
    .hero-base{ height:180px; }
    .hero-base .wl-inner{ padding-top:42px; }
    .hero-base .text .sbt-split{ font-size:12px; letter-spacing:1px; }
    .hero-base .text h2{ font-size:22px; line-height:1.35em; margin-top:8px; }
    .hero-base .text p{ font-size:12px; margin-top:10px; }
}

/* ---------- 히어로 배경 ---------- */
.wl-hero{ background:var(--wl-ink); }
.wl-hero>img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:left center; opacity:.9; z-index:0;
}
.wl-hero .wl-veil{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg,rgba(5,36,36,.92) 0%,rgba(5,36,36,.74) 42%,rgba(5,36,36,.34) 100%);
}
.wl-hero .wl-grid{
    position:absolute; inset:0; z-index:1;
    background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:56px 56px;
}
/* 빛줄기 — 더 진하게 · 더 느리게   ★2026-08-13
   진하기 .12 → .28 · 시간 5.5s → 11s */
.wl-hero .wl-beam{
    position:absolute; top:0; bottom:0; width:26%; left:-40%; z-index:1;
    background:linear-gradient(90deg,transparent,rgba(232,163,60,.28),transparent);
    animation:wlsweep 11s ease-in-out infinite;
}

/* ---------- 히어로 소제목 글자 하나씩 뜨기 ---------- */
.hero-base .sbt-split i{
    display:inline-block;
    font-style:normal;
    opacity:0;
    transform:translateY(22px);
    transition:opacity .6s cubic-bezier(.22,.7,.3,1),
               transform .6s cubic-bezier(.22,.7,.3,1);
}
.hero-base .sbt-split.on i{
    opacity:1;
    transform:translateY(0);
}

/* ================================================================
   2. 도입 문구 + 문제 3가지 (한 장면)
   ----------------------------------------------------------------
   바닥은 아주 옅은 따뜻한 회색이다.   ★2026-08-13
   청록의 보색 쪽이라 01·02·03 의 청록이 가장 세게 뜬다.
   ================================================================ */
.wl-prob{ background:var(--wl-warm); padding:clamp(36px,5vh,80px) 0; }
.wl-prob .wl-lead-t{ text-align:center; margin-bottom:clamp(20px,3.6vh,48px); }
.wl-prob .wl-lead-t .wl-h{ font-size:clamp(24px,4vh,46px); margin:clamp(10px,1.6vh,20px) 0; }
.wl-prob .wl-lead-t p{ font-weight:300; font-size:clamp(16px,1.9vh,19px); color:var(--wl-g); max-width:860px; margin:0 auto; line-height:1.7; }

.wl-prob .wl-row{
    display:grid; grid-template-columns:clamp(70px,8vh,110px) 1fr; gap:clamp(18px,2.6vw,34px);
    padding:clamp(14px,2.4vh,32px) 20px; border-top:1px solid var(--wl-line);
    border-left:4px solid var(--wl-teal); border-radius:0;
    align-items:start; transition:background .25s, padding-left .25s;
}
.wl-prob .wl-row:hover{ background:#fff; padding-left:32px; }
.wl-prob .wl-row:last-child{ border-bottom:1px solid var(--wl-line); }
.wl-prob .wl-num{ font-weight:200; font-size:clamp(36px,6vh,64px); color:var(--wl-teal); line-height:1; letter-spacing:-2px; }
.wl-prob h3{ font-weight:500; font-size:clamp(19px,2.5vh,26px); color:var(--wl-ink); margin:0 0 clamp(6px,1vh,12px); letter-spacing:-.4px; }
.wl-prob p{ font-weight:300; font-size:clamp(16px,2vh,21px); color:var(--wl-g); max-width:1100px; line-height:1.65; margin:0; }
.wl-prob p b{ color:var(--wl-ink); font-weight:500; }
.wl-prob .wl-tag{
    display:inline-block; margin-top:clamp(8px,1.4vh,18px);
    background:var(--wl-teal-bg); color:var(--wl-teal-d);
    font-size:13px; letter-spacing:.8px; text-transform:uppercase;
    font-weight:500; padding:8px 16px; border-radius:6px;
}

/* ================================================================
   3. 규제
   ================================================================ */
.wl-reg{ position:relative; background:var(--wl-ink); color:#fff; overflow:hidden; padding:clamp(50px,8vh,120px) 0; }
.wl-reg>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.14; }
.wl-reg .wl-scan{
    position:absolute; left:0; right:0; height:2px; top:-10%;
    background:linear-gradient(90deg,transparent,rgba(232,163,60,.55),transparent);
    animation:wlscan 9s linear infinite;
}
.wl-reg .wl-inner{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:center; }
.wl-reg .wl-big{ font-weight:200; font-size:clamp(72px,17vh,150px); line-height:.9; color:var(--wl-amber); letter-spacing:-4px; }
.wl-reg .wl-biglbl{ font-weight:300; font-size:clamp(17px,2.1vh,20px); color:var(--wl-g-on); margin-top:clamp(10px,1.8vh,18px); letter-spacing:-.2px; }
.wl-reg .wl-h{ font-size:clamp(27px,4.6vh,44px); margin:clamp(12px,2vh,20px) 0 clamp(16px,2.8vh,28px); }
.wl-reg p{ font-weight:300; font-size:clamp(16px,1.9vh,18px); color:#C1D0CE; margin-bottom:clamp(12px,1.9vh,20px); line-height:1.8; }
.wl-reg p b{ color:#fff; font-weight:500; }

/* ================================================================
   4. 이점
   ================================================================ */
.wl-adv{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.wl-adv .wl-ph{ background:var(--wl-ink2) center/cover no-repeat; }
.wl-adv .wl-txt{
    background:#fff; padding:clamp(50px,8vh,120px) clamp(30px,4.5vw,70px);
    display:flex; flex-direction:column; justify-content:center;
}
.wl-adv .wl-h{ font-size:clamp(26px,4.2vh,40px); margin:clamp(12px,2vh,20px) 0 clamp(20px,3.6vh,42px); }
.wl-adv .wl-item{ padding:clamp(14px,2.6vh,30px) 0; border-top:1px solid var(--wl-line); }
.wl-adv .wl-item:last-child{ border-bottom:1px solid var(--wl-line); }
.wl-adv .wl-item h3{ font-weight:500; font-size:clamp(18px,2.3vh,22px); color:var(--wl-ink); margin:0 0 8px; letter-spacing:-.4px; }
.wl-adv .wl-item p{ font-weight:300; font-size:clamp(16px,1.9vh,18px); color:var(--wl-g); line-height:1.7; margin:0; }
.wl-adv .wl-item p b{ color:var(--wl-teal-d); font-weight:500; }
.wl-adv .wl-item p .num{ color:var(--wl-amber); font-weight:400; }

/* ================================================================
   5. 비용
   ================================================================ */
.wl-tco{ background:var(--wl-soft); text-align:center; padding:clamp(50px,8vh,120px) 0; }
.wl-tco .wl-h{ font-size:clamp(27px,4.8vh,46px); margin:clamp(12px,2vh,20px) 0 clamp(28px,5.4vh,60px); }
.wl-tco .wl-cols{ display:grid; grid-template-columns:1fr 1px 1fr; max-width:900px; margin:0 auto; align-items:start; }
.wl-tco .wl-div{ background:#DDE5E3; width:1px; height:clamp(180px,30vh,280px); align-self:center; }
.wl-tco .wl-col{ padding:0 clamp(24px,3.5vw,50px); }
.wl-tco .wl-big{ font-weight:200; font-size:clamp(64px,13vh,120px); line-height:1; letter-spacing:-3px; }
.wl-tco .wl-big.bad{ color:var(--wl-bad); }
.wl-tco .wl-big.good{ color:var(--wl-teal); }
.wl-tco .wl-uline{ height:2px; width:44px; margin:clamp(12px,2vh,20px) auto; }
.wl-tco .wl-uline.bad{ background:var(--wl-bad); }
.wl-tco .wl-uline.good{ background:var(--wl-teal); }
.wl-tco .wl-cap{ font-weight:500; font-size:14px; letter-spacing:1.2px; text-transform:uppercase; color:var(--wl-g); }
.wl-tco ul{ list-style:none; margin:clamp(14px,2.6vh,26px) 0 0; padding:0; text-align:left; display:inline-block; }
.wl-tco li{ font-weight:300; font-size:clamp(15px,1.8vh,17px); color:var(--wl-g); padding:clamp(4px,.8vh,7px) 0; }
.wl-tco .wl-punch{ font-weight:200; font-size:clamp(21px,3.6vh,34px); color:var(--wl-ink); margin-top:clamp(28px,5.6vh,64px); line-height:1.5; letter-spacing:-1px; }
.wl-tco .wl-punch b{ font-weight:500; color:var(--wl-teal-d); }

/* ================================================================
   6. 친환경 + 마지막 단추 (한 장면)
   ================================================================ */
.wl-close{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; }

.wl-eco{ background:#fff; text-align:center; padding:clamp(40px,6.5vh,90px) 0; }
.wl-eco .wl-h{ font-size:clamp(26px,4.4vh,42px); margin:clamp(12px,2vh,20px) 0 clamp(20px,3.6vh,40px); }
.wl-eco .wl-pill{
    position:relative;
    display:inline-block; border:1px solid #D8E0DE; color:var(--wl-g);
    font-size:clamp(15px,1.9vh,19px); font-weight:400;
    padding:clamp(9px,1.5vh,12px) 26px; border-radius:8px;
    margin:7px 5px; transition:all .3s;
}
.wl-eco .wl-pill b{ position:relative; z-index:1; font-weight:inherit; }
.wl-eco .wl-pill.lit{ border-color:var(--wl-teal); background:var(--wl-teal); color:#052424; }

/* ---------- 알약 테두리 선이 그려지는 효과 ----------
   <svg> 사각형 두 개를 겹쳐 두고, 마우스를 올리면
   왼쪽 위 모서리에서 두 줄이 갈라져 시계 방향과
   반시계 방향으로 돌아 반대편에서 만난다.

   pathLength="100" 을 주면 알약 폭이 달라져도
   길이가 항상 100 으로 계산되어 두 줄이 정확히 만난다. */
.wl-eco .wl-pill .wl-line{
    position:absolute; left:0; top:0; width:100%; height:100%;
    overflow:visible; pointer-events:none; z-index:0;
}
.wl-eco .wl-pill .wl-line .ln{
    fill:none;
    stroke:var(--wl-teal);
    stroke-width:1.5;
    stroke-dasharray:0 100;
    stroke-dashoffset:0;
    transition:stroke-dasharray .55s cubic-bezier(.4,0,.2,1),
               stroke-dashoffset .55s cubic-bezier(.4,0,.2,1);
}
.wl-eco .wl-pill:hover .wl-line .ln-a{ stroke-dasharray:50 50; stroke-dashoffset:0; }
.wl-eco .wl-pill:hover .wl-line .ln-b{ stroke-dasharray:50 50; stroke-dashoffset:50; }
.wl-eco .wl-pill:hover{ color:var(--wl-teal-d); }

/* 불이 켜진 동안에는 선을 숨긴다 (배경이 청록이라 안 보인다) */
.wl-eco .wl-pill.lit .wl-line{ opacity:0; }

.wl-cta{ background:var(--wl-ink); text-align:center; padding:clamp(45px,7vh,100px) 0; position:relative; overflow:hidden; }
.wl-cta .wl-beam{
    position:absolute; top:0; bottom:0; width:30%; left:-40%;
    background:linear-gradient(90deg,transparent,rgba(232,163,60,.18),transparent);
    animation:wlsweep 12s ease-in-out infinite;
}
.wl-cta .wl-inner{ position:relative; }
.wl-cta .wl-bar{ margin:0 auto clamp(16px,2.8vh,30px); }
.wl-cta .wl-h{ font-size:clamp(26px,4.6vh,44px); color:#fff; margin:0 0 clamp(24px,4.2vh,44px); }
/* ---------- 마지막 단추 ----------
   평소 모습은 원래 그대로다. 색을 바꾸지 않는다.
   마우스를 올렸을 때만 두 가지가 더해진다.
     ① 흰색이 밑에서 위로 차오른다
     ② 테두리 선이 왼쪽 위에서 갈라져 반대편에서 만난다
   선 색은 단추마다 다르다. b1 호박 · b2 청록.

   ★차오르는 판의 클래스 이름은 wl-fill 이다.
     푸터 단추가 쓰는 fill 과 이름이 부딪혀서 바꿨다.
     en_style.css 의 .fill 규칙이 걸리면 흰색이 처음부터 꽉 찬다.

   overflow:hidden 때문에 선의 바깥쪽 절반이 잘린다.
   그래서 stroke-width 를 3 으로 주면 보이는 굵기가 1.5px 이 된다. */
.wl-cta .wl-btn{
    position:relative; overflow:hidden;
    display:inline-block; font-size:16px; font-weight:500; padding:0 40px;
    height:62px; line-height:60px; border-radius:8px; margin:8px;
    text-decoration:none;
}
.wl-cta .wl-btn .wl-fill{
    position:absolute !important;
    left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; height:0 !important;
    background:#fff !important;
    transform:none !important; opacity:1 !important;
    border-radius:0 !important;
    z-index:0;
    transition:height .45s cubic-bezier(.4,0,.2,1);
}
.wl-cta .wl-btn:hover .wl-fill{ height:100% !important; }

.wl-cta .wl-btn .wl-line{
    position:absolute; left:0; top:0; width:100%; height:100%;
    overflow:visible; pointer-events:none; z-index:1;
}
.wl-cta .wl-btn .wl-line .ln{
    fill:none;
    stroke-width:3;
    stroke-dasharray:0 100;
    stroke-dashoffset:0;
    transition:stroke-dasharray .55s cubic-bezier(.4,0,.2,1),
               stroke-dashoffset .55s cubic-bezier(.4,0,.2,1);
}
.wl-cta .wl-btn:hover .wl-line .ln-a{ stroke-dasharray:50 50; stroke-dashoffset:0; }
.wl-cta .wl-btn:hover .wl-line .ln-b{ stroke-dasharray:50 50; stroke-dashoffset:50; }

.wl-cta .wl-btn span{ position:relative; z-index:2; }

/* LED 라인업 — 밝은 호박이 차오르고 흰 테두리 선이 그려진다
   글자색은 그대로 둔다 (밝은 호박 위에서도 잘 읽힌다)
   더 어둡게 하려면 --wl-amber-up 값을 #B87519 쯤으로 바꾼다 */
.wl-cta .wl-btn.b1{ background:var(--wl-amber); color:#2B1A05; border:1.5px solid var(--wl-amber); }
.wl-cta .wl-btn.b1 .wl-fill{ background:var(--wl-amber-up) !important; }
.wl-cta .wl-btn.b1 .wl-line .ln{ stroke:#fff; }

/* 대리점 신청 — 빈 바닥 · 청록 선.
   흰색이 차오르면 흰 글자가 안 보이므로 그때만 먹색으로 바꾼다 */
.wl-cta .wl-btn.b2{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45); }
.wl-cta .wl-btn.b2 .wl-line .ln{ stroke:var(--wl-teal); }
.wl-cta .wl-btn.b2 span{ transition:color .35s; }
.wl-cta .wl-btn.b2:hover span{ color:var(--wl-ink); }

/* ================================================================
   태블릿 · 모바일 — 장면 높이 제한을 푼다 (JS 도 스스로 꺼진다)
   ================================================================ */
@media (max-width:1024px){
    .wl-scene, .wl-close{ min-height:0; display:block; }

    .wl-prob .wl-lead-t .wl-h{ font-size:34px; }
    .wl-prob .wl-lead-t p{ font-size:18px; }
    .wl-prob .wl-row{ grid-template-columns:80px 1fr; gap:22px; padding:30px 16px; }
    .wl-prob .wl-num{ font-size:46px; }
    .wl-prob h3{ font-size:22px; }
    .wl-prob p{ font-size:18px; }

    .wl-reg .wl-inner{ grid-template-columns:1fr; gap:40px; }
    .wl-reg .wl-big{ font-size:96px; }
    .wl-reg .wl-h{ font-size:34px; }

    .wl-adv{ grid-template-columns:1fr; }
    .wl-adv .wl-ph{ min-height:340px; }
    .wl-adv .wl-txt{ padding:70px 30px; }
    .wl-adv .wl-h{ font-size:32px; }

    .wl-tco .wl-h{ font-size:34px; }
    .wl-tco .wl-cols{ grid-template-columns:1fr; }
    .wl-tco .wl-div{ display:none; }
    .wl-tco .wl-col{ padding:30px 20px; }
    .wl-tco .wl-big{ font-size:88px; }
    .wl-tco .wl-punch{ font-size:26px; margin-top:40px; }

    .wl-eco .wl-h{ font-size:32px; }
    .wl-eco .wl-pill{ font-size:16px; padding:10px 20px; }

    .wl-cta .wl-h{ font-size:32px; }
}

@media (max-width:768px){
    .whyled .wl-inner{ width:90%; max-width:90%; padding:0 12px 0 18px; }

    .wl-kick{ font-size:12px; letter-spacing:3px; }

    .wl-prob .wl-lead-t .wl-h{ font-size:27px; }
    .wl-prob .wl-lead-t p{ font-size:17px; }
    .wl-prob .wl-row{ grid-template-columns:1fr; gap:10px; padding:26px 14px; }
    .wl-prob .wl-row:hover{ padding-left:14px; }
    .wl-prob .wl-num{ font-size:38px; }
    .wl-prob h3{ font-size:20px; }
    .wl-prob p{ font-size:16px; }
    .wl-prob .wl-tag{ font-size:11px; padding:6px 12px; }

    .wl-reg .wl-big{ font-size:72px; letter-spacing:-3px; }
    .wl-reg .wl-h{ font-size:27px; }
    .wl-reg p{ font-size:16px; }

    .wl-adv .wl-txt{ padding:60px 20px; }
    .wl-adv .wl-h{ font-size:26px; }
    .wl-adv .wl-item h3{ font-size:19px; }
    .wl-adv .wl-item p{ font-size:16px; }

    .wl-tco .wl-h{ font-size:27px; }
    .wl-tco .wl-big{ font-size:68px; }
    .wl-tco li{ font-size:15px; }
    .wl-tco .wl-punch{ font-size:21px; }

    .wl-eco .wl-h{ font-size:26px; }
    .wl-eco .wl-pill{ font-size:14px; padding:9px 16px; margin:5px 3px; }

    .wl-cta .wl-h{ font-size:27px; }
    .wl-btn{ font-size:15px; padding:0 28px; height:56px; line-height:54px; }
}