@charset "utf-8";

/* ================================================================
   WHY LED  -  /en/whyled
   ---------------------------------------------------------------
   · 폰트는 선언하지 않는다. common.css 의 Pretendard 를 물려받는다.
   · 이 화면은 관리자 판(tone) 을 따르지 않는다. 값을 여기에 박아 둔다.
   · 관리자 「상단 배너 사용」은 N (히어로만 씀) 이어야 한다.
   ---------------------------------------------------------------
   2026-08-25 파랑 재개편   (인수인계서 v3 4-2 순서 2번)

   ★청록 #00CBB6 은 폐기되었다. 새 기준색은 파랑 #1385B8 이다.

   1. 청록 → 파랑
        #00CBB6 → #1385B8   (확정서 v4 파랑 08 · 기본색)
        #00A896 → #0D6C9B   (파랑 09 · 흰 배경 글씨)
        #E6F6F3 → #D4E8F7   (파랑 03 · 배지 바탕)
        강조    → #6CC3EE   (파랑 06 · 어두운 배경 전용)
   2. 먹색 → 어두운 파랑
        #062522 → #102838   (파랑 16 · 어두운 본문 구간)
        #0B3532 → #132B3C   (파랑 15 · 어두운 구간 안쪽 칸)
        rgba(6,37,34,X) → rgba(16,40,56,X)
   3. 무채를 확정서 10단 계단으로 맞춤
        #6E7C7B → #5B6A76   #8A9997 → #8F9DA8
        #C0CDCB → #C2CDD6   #E7EDEC → #E9EEF1
        #D6E0DE → #DAE1E7   #F4FBFA → #F5F8F9
   4. 문제 구간 바닥 #FCF7F4 → #EBF0F4
        따뜻한 회색은 청록의 보색으로 고른 값이었다.
        청록이 없어졌으므로 확정서 8-1 「옅은 구간」 값으로 바꾼다.
   5. 금색 · 주황은 그대로다
        금색 #D2AD54 · 주황 #D94D08 은 폐기되지 않았다.

   ★색만 바꿔서는 안 되는 곳 세 군데 — 아래 자리에 표시해 두었다
     ① 알약에 불이 켜질 때 글씨   먹색 → 흰색
        파랑은 청록보다 훨씬 어두워서 어두운 글씨가 사라진다
     ② 어두운 바탕 위의 파랑 3곳  --wl-teal → --wl-hi
        짧은 막대 · 소제목 앞 점 · 대리점 단추 테두리 선
     ③ 2023 금색 속도  7초 → 1.6초
        확정서 v4 10-4 값과 어긋나 있었다

   ★변수 이름은 바꾸지 않았다.
     --wl-teal 에 파랑이 들어가 어색하지만 다른 CSS 가
     이 이름을 참조할 수 있어 확인 전에는 손대지 않는다.
   ---------------------------------------------------------------
   2026-08-19 (3) 금색 속도 · 진하기 손질

   1. 금색 글씨가 느려 보이던 것
        밝은 마디 폭이 230px 고정인데 2023 은 글씨가 150px 라
        글자 폭이 350px 쯤 된다. 마디가 글자보다 좁아
        한 바퀴 도는 데 오래 걸린다.
          작은 글씨 (60,000-hour)  마디 230px · 1.4초
          큰 숫자   (2023)         마디 420px · 1.6초
        글자가 크면 마디도 커야 금속처럼 보인다.

   2. 단추에 효과가 안 보이던 것
        확정서 7-3 값은 12px 짜리 작은 단추 기준이다.
        이 화면 단추는 높이 62px · 글씨 16px 라 마디가 묻힌다.
          ::before 판 160% · 3.5초로 지나가게 한다
   ---------------------------------------------------------------
   2026-08-19 (2) 금색 손질

   1. 금색을 이 파일 안에 직접 넣었다
        en_style.css 의 .gold 를 쓰지 않는다.
        이유 두 가지 —
          ① .wl-reg .wl-big 과 .wl-adv .wl-item p .num 규칙이
             .gold 보다 셈이 세서 배경 오리기가 눌린다
          ② 두 파일 중 어느 쪽이 뒤에 불리는지에 따라 결과가 달라진다
        움직임 이름도 wlGoldWave · wlGoldWipe 로 따로 붙여
        en_style.css 의 goldWave · goldBtn 과 부딪히지 않게 했다.

   2. 맨 아래 LED 라인업 단추를 금색 채운 단추로 바꿨다
   3. 금색 자리가 3곳이 되었다 (2023 · 60,000 · 단추)
        확정서 7-1 의 「화면 하나에 1~2곳」을 한 곳 넘는다.
        담당자 지시로 넘긴 것이다. 더 늘리지 말 것.
   ---------------------------------------------------------------
   2026-08-12 전면 개편

   1. 남색 #0F1C2E · #1A2536 → 어두운 판
      하늘 #A8D5E5 #4DA3C7 #1E6B8C → 뺌
      초록 #0D9488 → 사이트 기준색

   2. 히어로 = 배너 규격 (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)

   3. 한 구간 = 한 장면
        1 히어로 → 2 문제 → 3 규제 → 4 이점
        → 5 비용 → 6 친환경+단추 → 7 푸터
      1024px 아래에서는 JS 가 스스로 꺼진다.

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

:root{
    --wl-ink:#102838;      /* 어두운 바탕 — 히어로 · 규제 · 마지막 띠 · 제목  (파랑 16) */
    --wl-ink2:#132B3C;     /* 사진 자리 바탕  (파랑 15) */
    --wl-teal:#1385B8;     /* ★값은 파랑이다 — 점 · 막대 · 01·02·03 · 1배 · 알약  (파랑 08) */
    --wl-teal-d:#0D6C9B;   /* 진한 파랑 — 꼬리표 글자 · 강조 글자  (파랑 09) */
    --wl-teal-bg:#D4E8F7;  /* 옅은 파랑 — 꼬리표 바닥  (파랑 03) */
    --wl-hi:#6CC3EE;       /* 밝은 파랑 — 어두운 바탕 위에서만 쓴다  (파랑 06)
                              히어로 강조 글자 · 빛줄기 · 스캔선 · 막대 · 점 */
    --wl-gold:#D2AD54;     /* 금색 단색 — 광택이 안 걸렸을 때의 대비용  (금색 06) */
    --wl-bad:#D94D08;      /* 주황 — 13배 숫자와 밑줄. 부정 비교 전용  (주황 09) */
    --wl-g:#5B6A76;        /* 회색 — 밝은 바탕 위 소제목 · 본문  (무채 08) */
    --wl-g-on:#8F9DA8;     /* 회색 — 어두운 바탕 위 소제목  (무채 06) */
    --wl-g-on2:#C2CDD6;    /* 밝은 회색 — 어두운 바탕 위 본문  (무채 04) */
    --wl-line:#E9EEF1;     /* 가는 선  (무채 02) */
    --wl-line2:#DAE1E7;    /* 조금 진한 선 — 알약 테두리 · 세로 구분선  (무채 03) */
    --wl-soft:#F5F8F9;     /* 연회색 — 5 비용 구간 바닥  (무채 01) */
    --wl-warm:#EBF0F4;     /* 옅은 구간 — 2 문제 구간 바닥  (확정서 8-1)
                              ★이름만 warm 이고 값은 옅은 파랑회색이다 */
}

/* ---------- 배너 자리 없애기 · 전체 폭 쓰기 ----------
   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;
}
/* ★2026-08-25  어두운 바탕 위에서는 밝은 파랑을 쓴다.
   기본색 #1385B8 은 #102838 위에서 거의 안 보인다. */
.wl-kick.on-dark .wl-dot{ background:var(--wl-hi); }
.wl-kick.on-dark .wl-dot:after{ border-color:var(--wl-hi); }

.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); }
/* ★2026-08-25  어두운 구간의 막대도 밝은 파랑으로 */
.wl-reg .wl-bar,
.wl-cta .wl-bar{ background:var(--wl-hi); }

@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-25
   어두운 바탕 위이므로 --wl-hi 를 쓴다.
   진하기를 바꾸고 싶으면 --wl-hi 한 줄만 고치면 된다. */
.hero-base .text h2 b{ color:var(--wl-hi); font-weight:600; }
.hero-base .text p{
    margin:16px 0 0;
    font-size:17px; line-height:1.55em; font-weight:400;
    color:var(--wl-g-on2); max-width:760px;
}
.hero-base .text p b{ color:var(--wl-hi); 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;
}
/* ★2026-08-25  덮개 rgba 를 #102838 로 바꿨다 */
.wl-hero .wl-veil{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg,rgba(16,40,56,.92) 0%,rgba(16,40,56,.74) 42%,rgba(16,40,56,.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-25
   #6CC3EE 는 108,195,238 이다. 시간은 11초 그대로. */
.wl-hero .wl-beam{
    position:absolute; top:0; bottom:0; width:26%; left:-40%; z-index:1;
    background:linear-gradient(90deg,transparent,rgba(108,195,238,.22),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-25  바닥이 따뜻한 회색 #FCF7F4 에서
   확정서 8-1 「옅은 구간」 #EBF0F4 로 바뀌었다.
   ================================================================ */
.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; }
/* 스캔선 — 밝은 파랑   ★2026-08-25 */
.wl-reg .wl-scan{
    position:absolute; left:0; right:0; height:2px; top:-10%;
    background:linear-gradient(90deg,transparent,rgba(108,195,238,.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; }
/* 2023 — 금색 자리 ①. index.php 에서 class="wl-big gold" 로 이름표가 붙는다.
   아래 색은 광택이 안 걸렸을 때의 대비용이다. */
.wl-reg .wl-big{ font-weight:200; font-size:clamp(72px,17vh,150px); line-height:.9; color:var(--wl-gold); 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:var(--wl-g-on2); 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; }
/* 60,000-hour — 금색 자리 ②. index.php 에서 class="num gold" 로 이름표가 붙는다.
   아래 색은 광택이 안 걸렸을 때의 대비용이다. */
.wl-adv .wl-item p .num{ color:var(--wl-gold); 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:var(--wl-line2); 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 var(--wl-line2); 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; }
/* ★2026-08-25  불이 켜졌을 때 글씨를 흰색으로 바꿨다.
   옛 청록 #00CBB6 은 아주 밝아서 어두운 글씨가 읽혔지만
   파랑 #1385B8 위에서는 어두운 글씨가 사라진다. */
.wl-eco .wl-pill.lit{ border-color:var(--wl-teal); background:var(--wl-teal); color:#fff; }

/* ---------- 알약 테두리 선이 그려지는 효과 ----------
   <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; }
/* 빛줄기 — 밝은 파랑   ★2026-08-25 */
.wl-cta .wl-beam{
    position:absolute; top:0; bottom:0; width:30%; left:-40%;
    background:linear-gradient(90deg,transparent,rgba(108,195,238,.15),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); }
/* ---------- 마지막 단추 ----------
   차오르는 움직임은 손대지 않는다. 색만 바뀐다.
   마우스를 올렸을 때 두 가지가 더해진다.
     ① 밑에서 위로 차오른다
     ② 테두리 선이 왼쪽 위에서 갈라져 반대편에서 만난다

   ★차오르는 판의 클래스 이름은 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; }

/* 대리점 신청 — 빈 바닥 · 밝은 파랑 선.   ★2026-08-25
   어두운 바탕이라 --wl-hi 를 쓴다.
   흰색이 차오르면 흰 글자가 안 보이므로 그때만 어두운 색으로 바꾼다 */
.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-hi); }
.wl-cta .wl-btn.b2 span{ transition:color .35s; }
.wl-cta .wl-btn.b2:hover span{ color:var(--wl-ink); }

/* ================================================================
   금색   ★2026-08-25 (속도만 확정서 값으로 정정)
   ----------------------------------------------------------------
   이 덩어리가 이 화면의 금색 전부다.
   en_style.css 의 .gold · .gold-btn 을 쓰지 않는다.
   금색은 폐기되지 않았다. 값도 그대로다.

   금색 자리는 세 곳뿐이다. 더 늘리지 말 것.
     ① 2023        (3 규제)   — 아주 큰 숫자
     ② 60,000-hour (4 이점)   — 작은 글씨
     ③ 맨 아래 LED 라인업 단추

   ★확정서 v4 10-4 의 값
       작은 글씨 (60,000-hour)  마디 230px · 1.4초
       큰 숫자   (2023)         마디 420px · 1.6초
       단추                     ::before 판 160% · 3.5초
     2023 이 7초로 어긋나 있어 1.6초로 되돌렸다.
   ================================================================ */

/* ---------- ①② 금색 글씨 · 숫자 (확정서 7-2 · 어두운 판) ----------
   글자를 투명으로 두고 배경을 글자 모양으로 오려 쓴다.
   color 에 !important 를 붙인 이유는 위쪽 규칙이 더 세기 때문이다. */
.whyled .gold{
    background-color:#D2A32B;
    background-image:
        linear-gradient(100deg,rgba(255,247,214,0) 0%,rgba(255,247,214,.85) 18%,
                        rgba(255,247,214,0) 36%,rgba(255,247,214,0) 100%),
        linear-gradient(76deg,rgba(255,252,235,0) 0%,rgba(255,252,235,.50) 24%,
                        rgba(255,252,235,0) 48%,rgba(255,252,235,0) 100%),
        linear-gradient(116deg,rgba(96,62,8,0) 0%,rgba(96,62,8,.55) 20%,
                        rgba(96,62,8,0) 40%,rgba(96,62,8,0) 100%);
    background-size:230px 100%,150px 100%,300px 100%;
    background-repeat:repeat;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent !important;
    -webkit-text-fill-color:transparent;
    animation:wlGoldWave 1.4s linear infinite;
}

@keyframes wlGoldWave{
    from{ background-position:0 0,0 0,0 0; }
    to  { background-position:230px 0,-300px 0,300px 0; }
}

/* ---------- ① 2023 만 따로 — 마디를 넓히고 더 빠르게 ----------
   글씨가 150px 라 글자 폭이 350px 쯤 된다.
   마디 230px 로는 글자를 다 덮지 못해 멈춘 것처럼 보인다.
   ★2026-08-25  7초 → 1.6초 (확정서 v4 10-4) */
.whyled .wl-reg .wl-big.gold{
    background-size:420px 100%,280px 100%,540px 100%;
    animation-name:wlGoldWaveBig;
    animation-duration:1.6s;
}

@keyframes wlGoldWaveBig{
    from{ background-position:0 0,0 0,0 0; }
    to  { background-position:420px 0,-560px 0,540px 0; }
}

/* ---------- ③ 금색 채운 단추 ----------
   단추 크기(높이 62px · 글씨 16px · 모서리 8px)는 지금 것을 지킨다.
   차오르는 판(.wl-fill)과 테두리 선(.wl-line)은
   위쪽 공통 규칙을 그대로 쓴다. 움직임은 손대지 않았다. */
.wl-cta .wl-btn.b1{
    color:#FFF6DC;
    text-shadow:0 1px 1px rgba(58,36,4,.5);
    border:1.5px solid #8F6718;
    box-shadow:inset 0 1px 0 rgba(255,249,238,.7),
               inset 0 -1px 0 rgba(50,32,4,.5);
    background-color:#AE801C;
    /* 세로 금속 막대는 움직이지 않는다. 5단 고정이다.
       위 밝음 · 가운데 어두움 · 아래 다시 밝음.
       위아래 밝기 차이가 없으면 금색이 아니라 갈색으로 보인다.
       확정서 7-1 「밝은 정점이 또렷할 것」.

       빛줄기는 아래 ::before 가 따로 맡는다.
       배경 무늬를 미는 방식은 버렸다.
       배경 겹 수와 @keyframes 의 자리 수가 안 맞으면
       브라우저가 움직임을 통째로 버리기 때문이다. */
    background-image:
        linear-gradient(180deg,
                        #E4C673   0%,
                        #C99F35  34%,
                        #AE801C  56%,
                        #C99F35  82%,
                        #E4C673 100%);
    background-repeat:no-repeat;
}

/* ---------- 단추 일렁임 ----------
   확정서 7-3 의 「지나가는 일렁임」이다.
   띠로 보였던 원인 두 가지를 함께 고친 값이다.
     ① 판이 단추보다 좁아 양 끝이 선으로 보였다
        → 판 폭을 단추의 160% 로 넓혔다
     ② 밝은 곳에서 투명으로 가는 구간이 짧아 경계가 섰다
        → 0%~50%~100% 로 길게 흐렸다. 뚜렷한 가장자리가 없다

   밝기는 손대지 않는다. 자리만 움직인다. 그래서 깜빡이지 않는다.
   단추에 걸린 overflow:hidden 이 삐져나온 부분을 잘라 준다.
   z-index 0 이라 차오르는 판(.wl-fill)이 위를 덮는다. */
.wl-cta .wl-btn.b1::before{
    content:'';
    position:absolute;
    top:0; bottom:0; left:0;
    width:160%;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(100deg,
                               rgba(250,225,150,0) 0%,
                               rgba(250,225,150,.5) 50%,
                               rgba(250,225,150,0) 100%);
    animation:wlGoldWipe 3.5s linear infinite;
}

@keyframes wlGoldWipe{
    from{ transform:translateX(-100%); }
    to  { transform:translateX(100%); }
}
/* 차오르는 색 — 밝은 금 (금색 05칸)
   차오른 뒤 글씨는 짙은 금 (금색 15칸) 으로 바꾼다 */
.wl-cta .wl-btn.b1 .wl-fill{ background:#DDBF74 !important; }
.wl-cta .wl-btn.b1 .wl-line .ln{ stroke:#FFF9EE; }
.wl-cta .wl-btn.b1 span{ transition:color .35s; }
.wl-cta .wl-btn.b1:hover span{ color:#35260A; }

/* ---------- 움직임 줄이기 대응 (확정서 7-5) ----------
   운영체제에서 「애니메이션 효과」를 꺼 둔 이용자에게는
   40초로 늦춘다. 멈추지는 않는다. 금속 질감이 살아 있어야 한다.
   이 덩어리는 반드시 금색 규칙보다 뒤에 있어야 한다.

   ★단추 번짐(::before)은 이 규칙에서 뺐다.
     여기 넣어 두면 !important 때문에 위쪽에서 정한
     속도가 전부 무시되어 멈춘 것처럼 보인다.
     인수인계서 8-4 에 같은 사고가 기록되어 있다. */
@media (prefers-reduced-motion: reduce){
    .whyled .gold,
    .whyled .wl-reg .wl-big.gold{ animation-duration:40s !important; }
}

/* ================================================================
   태블릿 · 모바일 — 장면 높이 제한을 푼다 (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; }
}