/* ===================================================================
   WOOJANG — premium.css
   "Depth & Gloss" 레이어 — 색상/구조 변경 없음.
   Site.css 뒤에 로드되어 전 페이지에 깊이감·광택·질감을 더한다.
   (팔레트 토큰 그대로 사용: --bg / --silver / --steel / --line ...)
   =================================================================== */

/* ── 1. 배경 깊이감: 상단 은은한 광원 + 코너 글로우 (균일 검정 해소) ── */
body::before{
    content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:
        radial-gradient(58% 42% at 50% -6%, rgba(188,200,216,.085), transparent 68%),
        radial-gradient(46% 40% at 88% 4%,  rgba(125,147,178,.07),  transparent 70%),
        radial-gradient(60% 55% at 8% 102%, rgba(125,147,178,.055), transparent 72%);
}
/* ── 미세 그레인: 배경 밴딩을 없애고 질감을 더함 ── */
body::after{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px 180px;
}

/* ── 2. 패널 밴드: '위에서 비친 듯' 상단 광택 + 헤어라인 ── */
.spec-strip,.stats-band,.band,.wj-footer{
    background:
        linear-gradient(180deg, rgba(188,200,216,.035), rgba(188,200,216,0) 180px),
        var(--bg-panel);
    box-shadow:inset 0 1px 0 rgba(188,200,216,.09);
}

/* ── 3. 메탈릭 헤딩 (차가운 화이트→티타늄 실버 광택) ── */
.sec-title,
.about-copy h2,
.band-copy h3,
.stat .st-value,
.wj-foot-cta h2{
    background:linear-gradient(176deg,#ffffff 0%,#e9ecf1 42%,#c2cad7 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
}
/* 숫자 옆 단위(small)는 실버로 다시 표시(투명 상속 방지) */
.stat .st-value small{
    -webkit-text-fill-color:var(--silver);color:var(--silver);
}
/* background-clip:text 미지원 브라우저 대비 — 제목이 사라지지 않도록 */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
    .sec-title,.about-copy h2,.band-copy h3,.stat .st-value,.wj-foot-cta h2{
        color:var(--txt);-webkit-text-fill-color:currentColor;
    }
}

/* ── 4. 제품 이미지 타일: 부품을 비추는 스포트라이트 + 유리 질감 ── */
.prod3-card .p-img,
.wj-prods .pd .pd-img{
    position:relative;
    background:
        radial-gradient(120% 92% at 50% 38%, rgba(188,200,216,.10), rgba(188,200,216,0) 62%),
        linear-gradient(180deg,#191d26 0%,#0e1116 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(35,39,52,.6);
    transition:box-shadow .4s var(--ease),transform .4s var(--ease);
}
.prod3-card:hover .p-img,
.wj-prods .pd:hover .pd-img{
    box-shadow:0 30px 60px -28px rgba(0,0,0,.85),
               inset 0 1px 0 rgba(255,255,255,.10),
               inset 0 0 0 1px rgba(188,200,216,.18);
}

/* ── 5. 카드 공통: 상단 하이라이트 + 호버 부양감 ── */
.core3-card,.prod3-card,.stat,
.wj-cards .wc,.wj-prods .pd{
    position:relative;transition:transform .4s var(--ease);
}
.wj-cards .wc,.wj-prods .pd{
    background:linear-gradient(180deg,rgba(188,200,216,.04),rgba(188,200,216,0) 46%),var(--bg-panel);
}
.wj-cards .wc:hover,.wj-prods .pd:hover{
    background:linear-gradient(180deg,rgba(188,200,216,.07),rgba(188,200,216,0) 52%),var(--bg-card);
    transform:translateY(-3px);
}
.core3-card:hover,.prod3-card:hover{transform:translateY(-3px)}
/* 상단 라인 카드의 얇은 실버 글로우 강조 */
.core3-card::before,.prod3-card::before{
    content:"";position:absolute;top:-1px;left:0;width:56px;height:2px;
    background:linear-gradient(90deg,var(--silver),transparent);
    opacity:.55;transition:width .5s var(--ease),opacity .3s;
}
.core3-card:hover::before,.prod3-card:hover::before{width:100%;opacity:.85}

/* ── 6. 버튼: 은은한 그라디언트 + 호버 글로우 ── */
.btn-line,.wj-cta{
    background:linear-gradient(180deg,rgba(188,200,216,.10),rgba(188,200,216,.015));
    transition:background .3s,color .3s,box-shadow .35s var(--ease),border-color .3s;
}
.btn-line:hover,.wj-cta:hover{
    box-shadow:0 10px 34px -10px rgba(188,200,216,.45),inset 0 0 0 1px rgba(255,255,255,.25);
}
.btn-submit{transition:background .3s,border-color .3s,box-shadow .35s var(--ease)}
.btn-submit:hover{box-shadow:0 14px 40px -12px rgba(188,200,216,.5)}

/* ── 7. 커스텀 스크롤바 (프리미엄 디테일) ── */
*{scrollbar-width:thin;scrollbar-color:#2a2f3c #0a0b0e}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0a0b0e}
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#2c313d,#191d26);
    border-radius:10px;border:2px solid #0a0b0e;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3a4150,#232734)}

/* ── 8. 섹션 넘버 미세 글로우 ── */
.sec-no{text-shadow:0 0 22px rgba(188,200,216,.25)}

/* ── 9. 모션 최소화 사용자 배려 ── */
@media(prefers-reduced-motion:reduce){
    .core3-card,.prod3-card,.stat,.wj-cards .wc,.wj-prods .pd{transition:none}
}

/* ── 10. 헤더 로고: 항상 흰색 유지 (컬러 로고는 숨김) ── */
.wj-brand .brand-logo--color{display:none}
.wj-brand .brand-logo--white{display:block}

/* ── 11. 푸터 브랜드 로고: 컬러 로고를 밝은 플레이트에 올려 가독성 확보 ── */
.wj-fcol-brand .foot-logo-wrap{
    display:inline-block;background:#dbe3ee;border-radius:10px;
    padding:12px 16px;margin-bottom:20px;line-height:0;
    box-shadow:0 10px 26px -14px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.6);
}
.wj-fcol-brand .foot-logo{width:132px;height:auto;max-width:100%}

/* ── 12. 밴드(품질) CTA — 밴드 전체 폭 하단 중앙 배치(위/아래 섹션 CTA와 동일 패턴) ── */
.band-inner .band-cta{grid-column:1 / -1;text-align:center;margin-top:20px}

/* ── 13. 언어 토글 (KOR / ENG 드롭다운 · 제니스 참고) ── */
.wj-lang{position:relative}
.wj-lang-btn{
    display:flex;align-items:center;gap:7px;
    background:none;border:1px solid var(--line);color:var(--txt-dim);
    padding:7px 15px;border-radius:100px;cursor:pointer;
    font-family:var(--mono);font-size:12px;letter-spacing:.08em;
    transition:background .3s var(--ease),color .3s,border-color .3s;
}
.wj-lang-globe{font-size:11px;opacity:.8}
.wj-lang-btn::after{
    content:"\f078";font-family:"Font Awesome 7 Free";font-weight:900;
    font-size:9px;opacity:.65;transition:transform .28s var(--ease),opacity .28s;
}
.wj-lang-btn:hover,
.wj-lang-btn[aria-expanded="true"]{color:var(--txt);border-color:var(--silver)}
.wj-lang-btn[aria-expanded="true"]::after{transform:rotate(180deg);opacity:1}

/* Bootstrap dropdown-menu — 헤어라인 다크 패널 */
.wj-lang-list.dropdown-menu{
    --bs-dropdown-min-width:170px;
    --bs-dropdown-spacer:12px;
    background:rgba(14,16,21,.96);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid var(--line);border-radius:12px;
    padding:7px;transform-origin:top right;box-shadow:var(--shadow);
}
.wj-lang-list .dropdown-item{
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding:9px 13px;border-radius:8px;font-size:14px;color:var(--txt-dim);
    transition:background .2s,color .2s,padding-left .2s var(--ease);
}
.wj-lang-list .dropdown-item .li-code{
    font-family:var(--mono);font-size:11px;letter-spacing:.5px;opacity:.55;
    transition:opacity .2s,color .2s;
}
.wj-lang-list .dropdown-item:hover:not(.active),
.wj-lang-list .dropdown-item:focus:not(.active){
    background:rgba(188,200,216,.06);color:var(--txt);padding-left:17px;
}
.wj-lang-list .dropdown-item:hover .li-code{opacity:.85}
.wj-lang-list .dropdown-item.active{background:rgba(188,200,216,.12);color:var(--silver)}
.wj-lang-list .dropdown-item.active .li-code{opacity:1;color:var(--silver)}

.wj-mlang{display:flex;gap:20px;margin-top:24px;font-family:var(--mono);font-size:16px;letter-spacing:.06em}
.wj-mlang a{color:var(--txt-dim)}
.wj-mlang a.on{color:var(--silver);font-weight:700}
@media(max-width:820px){.wj-lang{display:none}}

/* ── 14. 셀렉트 드롭다운 화살표: 반복 제거, 우측 1개만 ── */
.form-select{
    -webkit-appearance:none;-moz-appearance:none;appearance:none;
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:13px 13px;
    padding-right:40px;
}