/* ===================================================================
   WOOJANG — home.css v5 "Forged Metal / Storyboard"
   메인: 3D 히어로 / 스펙 스트립 / 핵심역량 / 실적 카운터 / 제품 /
         품질 밴드 / 공정 아코디언 / About  (Site.css v5 토큰 사용)
   =================================================================== */

/* ---------- 인트로 (3D 히어로 + 폴백) — 카피 좌하단 (스토리보드 §03 와이어프레임) ---------- */
.intro{
    position:relative;min-height:100vh;display:flex;align-items:flex-end;
    text-align:left;color:#fff;overflow:hidden;background:#12161d;
}
.intro-bg{
    position:absolute;inset:0;
    background:url(images/factory-press.jpg) center/cover no-repeat;
    filter:brightness(.4) saturate(.7);
}
.intro-bg::after{content:"";position:absolute;inset:0;background:rgba(8,9,12,.4)}
.intro-inner{
    position:relative;z-index:3;width:100%;
    padding:calc(var(--hh) + 40px) 5% 15vh clamp(24px,5vw,76px);
}
.intro-eyebrow{
    font-family:var(--mono);font-size:12px;letter-spacing:.34em;
    color:var(--silver);margin-bottom:20px;text-transform:uppercase;
}
.intro-title{
    font-weight:800;font-size:clamp(2.4rem,4.8vw,3.9rem);
    line-height:1.22;letter-spacing:-.03em;margin-bottom:26px;word-break:keep-all;
    max-width:700px;
}
.intro-title em{color:var(--silver)}
.intro-sub{
    font-size:17px;color:rgba(236,238,242,.82);
    max-width:540px;margin:0 0 34px;word-break:keep-all;
}
.intro-cta{margin:0}
.intro-scroll{
    position:absolute;left:50%;transform:translateX(-50%);bottom:34px;z-index:3;
    display:flex;flex-direction:column;align-items:center;gap:12px;
    color:rgba(236,238,242,.75);font-size:12px;letter-spacing:1px;
}
.intro-scroll .sc-label{writing-mode:vertical-rl;transform:rotate(180deg)}
.intro-scroll .sc-arrow{
    width:1px;height:52px;background:rgba(188,200,216,.7);position:relative;
    animation:wjScroll 2s infinite var(--ease);
}
.intro-scroll .sc-arrow::after{
    content:"";position:absolute;bottom:0;left:-3.5px;
    width:8px;height:8px;border-right:1px solid rgba(188,200,216,.7);border-bottom:1px solid rgba(188,200,216,.7);
    transform:rotate(45deg);
}
@keyframes wjScroll{
    0%{transform:translateY(0);opacity:1}
    70%{transform:translateY(10px);opacity:.4}
    100%{transform:translateY(0);opacity:1}
}

/* 3D 캔버스 / 비네트 / 스킵 */
.intro-3d{position:absolute;inset:0;z-index:1;display:none}
.intro-3d canvas{display:block;width:100%;height:100%}
.intro-vignette{
    position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
    background:radial-gradient(ellipse at 50% 55%,transparent 55%,rgba(188,200,216,.10) 100%);
}
.intro-skip{
    position:absolute;right:28px;bottom:28px;z-index:4;display:none;
    background:rgba(19,22,29,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid rgba(188,200,216,.28);color:var(--txt-dim);
    font-size:11px;letter-spacing:.14em;padding:9px 20px;border-radius:100px;
    cursor:pointer;transition:color .25s,border-color .25s;
}
.intro-skip:hover{color:var(--silver);border-color:var(--silver)}

.intro.wj-3d .intro-bg{opacity:0;transition:opacity .6s}
.intro.wj-3d .intro-3d{display:block}
/* 카피 가독성 스크림: 좌하단을 어둡게 눌러줌 (씬 위, 텍스트 아래) */
.intro.wj-3d::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
        linear-gradient(78deg, rgba(8,9,12,.66) 0%, rgba(8,9,12,.3) 32%, transparent 58%),
        linear-gradient(to top, rgba(8,9,12,.55), transparent 42%);
}
.intro.wj-3d .intro-skip{display:inline-flex;align-items:center;gap:6px}
.intro.wj-3d .intro-inner,
.intro.wj-3d .intro-scroll{
    opacity:0;transform:translateY(26px);
    transition:opacity 1.2s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.intro.wj-3d.wj-hero-on .intro-inner,
.intro.wj-3d.wj-hero-on .intro-scroll{opacity:1;transform:none}
.intro.wj-3d.wj-hero-on .intro-scroll{transition-delay:.35s}
.intro.wj-3d .intro-title,
.intro.wj-3d .intro-sub{text-shadow:0 2px 26px rgba(8,9,12,.65)}
.intro.wj-no3d .intro-3d,
.intro.wj-no3d .intro-skip,
.intro.wj-no3d .intro-vignette{display:none}

/* ---------- 스펙 스트립 (도면 표제란 · 모노) ---------- */
.spec-strip{
    border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
    background:var(--bg-panel);
}
.spec-strip-inner{
    width:min(1180px,90%);margin:0 auto;
    display:flex;justify-content:space-between;align-items:center;gap:18px;
    padding:16px 0;overflow-x:auto;scrollbar-width:none;
}
.spec-strip-inner::-webkit-scrollbar{display:none}
.spec-strip span{
    font-family:var(--mono);font-size:12px;letter-spacing:.2em;
    color:var(--txt-dim);white-space:nowrap;
}
.spec-strip span b{color:var(--silver);font-weight:600}

/* ---------- 공통 섹션 ---------- */
.home-sec{padding:130px 0}
.home-sec .sec-title{margin-bottom:64px;font-size:clamp(2rem,4vw,3.2rem)}
.home-sec .sec-title.center{text-align:center}
.home-sec .sec-no.center{text-align:center}

/* ---------- 핵심역량 3카드 ---------- */
.core3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.core3-card{position:relative;border-top:1px solid var(--line)}
.core3-card .cc-img{overflow:hidden;margin-bottom:26px}
.core3-card .cc-img img{
    width:100%;height:300px;object-fit:cover;filter:saturate(.8) brightness(.9);
    transition:transform .8s var(--ease),filter .5s;
}
.core3-card:hover .cc-img img{transform:scale(1.05);filter:saturate(.95) brightness(1)}
.core3-card .cc-no{
    font-family:var(--mono);font-size:12px;color:var(--silver);
    letter-spacing:.24em;display:block;margin-bottom:10px;
}
.core3-card h3{font-size:24px;font-weight:700;margin-bottom:12px;letter-spacing:-.02em}
.core3-card p{color:var(--txt-dim);font-size:14px;line-height:1.75;margin-bottom:18px}

/* ---------- 실적 카운터 밴드 ---------- */
.stats-band{
    background:var(--bg-panel);
    border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
    padding:96px 0;
}
.stats-grid{
    width:min(1180px,90%);margin:0 auto;
    display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
}
.stat .st-label{
    font-family:var(--mono);font-size:12px;letter-spacing:.22em;
    color:var(--txt-dim);text-transform:uppercase;display:block;margin-bottom:14px;
}
.stat .st-value{
    font-size:clamp(2.6rem,4.6vw,4rem);font-weight:800;color:var(--txt);
    line-height:1;letter-spacing:-.03em;
}
.stat .st-value small{font-size:.42em;font-weight:600;color:var(--silver);margin-left:6px}
.stat .st-desc{color:var(--txt-faint);font-size:14px;margin-top:12px}

/* ---------- 제품 3카드 ---------- */
.prod3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.prod3-card{display:block;border-top:1px solid var(--line)}
.prod3-card .p-img{
    background:var(--bg-card);overflow:hidden;margin-bottom:22px;
    display:flex;align-items:center;justify-content:center;padding:34px;height:260px;
}
.prod3-card .p-img img{
    max-height:100%;object-fit:contain;transition:transform .7s var(--ease);
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
}
.prod3-card:hover .p-img img{transform:scale(1.06)}
.prod3-card .p-meta{
    font-family:var(--mono);font-size:11px;letter-spacing:.08em;
    color:var(--steel);margin-bottom:8px;
}
.prod3-card .p-meta .sep{margin:0 8px;opacity:.4}
.prod3-card h4{font-size:17px;font-weight:700;margin-bottom:12px;letter-spacing:-.01em}
.prod3-card .txt-link{font-size:14px}
.prod3-more{text-align:center;margin-top:64px}

/* ---------- 다크 밴드 (텍스트 좌 + 블리드 사진) ---------- */
.band{background:var(--bg-panel);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.band-inner{
    width:min(1320px,92%);margin:0 auto;
    display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:center;
    padding:120px 0;
}
.band-copy h3{
    font-size:clamp(1.7rem,3vw,2.5rem);font-weight:700;
    letter-spacing:-.03em;line-height:1.35;margin-bottom:28px;word-break:keep-all;
}
.band-copy p{color:var(--txt-dim);font-size:16px;margin-bottom:18px;max-width:520px}
.band-copy .txt-link{margin-top:10px}
.band-photo{position:relative;min-height:420px}
.band-photo img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:saturate(.8) brightness(.88);border:1px solid var(--line-soft);
}

/* ---------- 공정 아코디언 ---------- */
.proc-accordion{border-top:1px solid var(--line)}
.eq-item{border-bottom:1px solid var(--line)}
.eq-head{
    width:100%;display:flex;align-items:center;gap:26px;
    background:none;border:none;cursor:pointer;text-align:left;
    padding:26px 8px;transition:background .25s;color:var(--txt);
}
.eq-head:hover{background:rgba(188,200,216,.03)}
.eq-no{
    font-family:var(--mono);font-size:13px;color:var(--silver);
    letter-spacing:.12em;min-width:40px;
}
.eq-title{font-size:19px;font-weight:600;flex:1;letter-spacing:-.01em}
.eq-head::after{
    content:"+";font-size:24px;color:var(--txt-faint);font-weight:300;
    transition:transform .35s var(--ease),color .25s;
}
.eq-item.open .eq-head::after{transform:rotate(45deg);color:var(--silver)}
.eq-body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.eq-item.open .eq-body{max-height:520px}
.eq-body-inner{
    display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
    padding:10px 8px 40px 74px;
}
.eq-body-inner img{width:100%;height:240px;object-fit:cover;filter:saturate(.8) brightness(.9)}
.eq-desc p{color:var(--txt-dim);font-size:15px;margin:0}

/* ---------- About (텍스트 좌 + 콜라주 우) ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center}
.about-copy h2{
    font-size:clamp(2rem,4vw,3.2rem);font-weight:800;
    letter-spacing:-.03em;margin-bottom:26px;
}
.about-copy p{color:var(--txt-dim);font-size:16px;margin-bottom:26px;max-width:500px}
.about-collage{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:210px 210px;gap:16px}
.about-collage img{
    width:100%;height:100%;object-fit:cover;
    filter:saturate(.8) brightness(.88);border:1px solid var(--line-soft);
}
.about-collage .col-tall{grid-row:1/3;height:100%}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
    .core3-grid{gap:24px}
    .core3-card .cc-img img{height:230px}
}
@media(max-width:900px){
    .home-sec{padding:90px 0}
    .core3-grid{grid-template-columns:1fr;gap:50px}
    .core3-card .cc-img img{height:280px}
    .stats-grid{grid-template-columns:1fr 1fr;gap:44px}
    .band-inner{grid-template-columns:1fr;padding:90px 0;gap:40px}
    .band-photo{min-height:300px}
    .band-photo img{position:relative;width:100%;height:300px}
    .about-grid{grid-template-columns:1fr;gap:44px}
    .prod3-grid{grid-template-columns:1fr;gap:44px;max-width:520px;margin:0 auto}
    .eq-body-inner{grid-template-columns:1fr;gap:20px;padding-left:8px}
    .eq-item.open .eq-body{max-height:760px}
    .spec-strip-inner{justify-content:flex-start;gap:28px}
}
@media(max-width:600px){
    .home-sec{padding:72px 0}
    .home-sec .sec-title{margin-bottom:40px}
    .intro-title{font-size:clamp(1.9rem,8.5vw,2.5rem)}
    .intro-inner{padding-bottom:13vh}
    .intro-scroll{bottom:20px}
    .stats-grid{grid-template-columns:1fr 1fr;gap:34px}
    .about-collage{grid-template-rows:150px 150px;gap:10px}
    .prod3-more{margin-top:40px}
    .core3-card .cc-img img{height:240px}
    .band-inner{padding:64px 0}
    .band-photo{min-height:240px}
    .band-photo img{height:240px}
    .spec-strip-inner{gap:22px}
}

/* ---------- 모서리 라운드 (이미지·카드 자연스러운 radius) ---------- */
/* 이미지 래퍼(overflow:hidden 이미 지정) — radius만 추가 */
.core3-card .cc-img,
.prod3-card .p-img{border-radius:12px}
/* 단일 이미지 */
.band-photo img,
.about-collage img,
.eq-body-inner img{border-radius:12px}