@charset "utf-8";
/* ═══════════════════════════════════════════════
   40 대성정밀 DAESUNG PRECISION — 정밀부품 제조기업
   컨셉: 블루프린트(도면) 모티프 — 도면 그리드/치수선 장식/스틸 그레이+세이프티 옐로
   (01~39 에 없던 신규 스타일)
   ═══════════════════════════════════════════════ */
:root{
  --steel:#eef1f4;
  --bp:#0e2c52;        /* 블루프린트 딥블루 */
  --bp-line:rgba(122,170,235,.28);
  --safety:#ffc400;
  --ink:#16222e;
  --dim:#5e6f80;
  --line:#d8dfe6;
  --card:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif;background:var(--steel);color:var(--ink);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font-family:inherit}
.num{font-family:'Consolas','SF Mono',monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wrap{max-width:1220px;margin:0 auto;padding:0 24px}
html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
html.js .reveal.on{opacity:1;transform:none}

/* ── 헤더: 좌측 세로 라벨 + 상단 바 ── */
.hd{position:sticky;top:0;z-index:100;background:var(--card);border-bottom:2px solid var(--ink)}
.hd-in{max-width:1220px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:34px;height:72px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo .mk{width:38px;height:38px;background:var(--bp);color:var(--safety);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%)}
.logo b{font-size:19px;font-weight:900;letter-spacing:-.01em}
.logo small{display:block;font-size:9.5px;color:var(--dim);letter-spacing:.3em;font-weight:700}
.gnb{display:flex;gap:2px;margin-left:auto}
.gnb a{font-size:15px;font-weight:700;padding:25px 16px;position:relative;color:var(--dim)}
.gnb a::after{content:"";position:absolute;left:16px;right:16px;bottom:-2px;height:3px;background:var(--safety);transform:scaleX(0);transition:transform .2s}
.gnb a:hover{color:var(--ink)}
.gnb a:hover::after,.gnb a.active::after{transform:scaleX(1)}
.gnb a.active{color:var(--ink)}
.hd .tel{font-size:14px;font-weight:900;background:var(--ink);color:#fff;padding:10px 18px}
.hd .tel:hover{background:var(--bp)}
.m-burger{display:none}
#mNav{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:var(--card);z-index:300;padding:64px 28px;transform:translateX(100%);transition:transform .28s ease;box-shadow:-12px 0 44px rgba(22,34,46,.2)}
#mNav.open{transform:none}
#mNav a{display:block;padding:15px 4px;font-size:17px;font-weight:700;border-bottom:1px solid var(--line)}
#mNav .m-close{position:absolute;top:16px;right:18px;font-size:26px;color:var(--dim)}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 30px;font-size:15px;font-weight:800;transition:.18s}
.btn-yl{background:var(--safety);color:var(--ink)}
.btn-yl:hover{background:#e6b000}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--bp)}
.btn-ol{border:2px solid var(--ink);color:var(--ink)}
.btn-ol:hover{background:var(--ink);color:#fff}

/* ── 히어로: 풀폭 + 도면 코너 마크 ── */
.hero{position:relative;height:min(82vh,700px);min-height:460px;overflow:hidden;background:var(--bp)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .scrim{position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(180deg,rgba(14,44,82,0),rgba(14,44,82,.78))}
.hero .corner{position:absolute;width:46px;height:46px;border:3px solid var(--safety);z-index:3}
.hero .c1{top:22px;left:22px;border-right:0;border-bottom:0}
.hero .c2{top:22px;right:22px;border-left:0;border-bottom:0}
.hero .c3{bottom:22px;left:22px;border-right:0;border-top:0}
.hero .c4{bottom:22px;right:22px;border-left:0;border-top:0}
.hero .inner{position:absolute;left:0;right:0;bottom:0;padding-bottom:58px;z-index:2}
.hero .dwg{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.26em;color:var(--safety);text-shadow:0 1px 8px rgba(14,44,82,.6)}
.hero .dwg::before{content:"";width:34px;height:2px;background:var(--safety)}
.hero h1{font-size:clamp(32px,4.6vw,58px);font-weight:900;letter-spacing:-.04em;line-height:1.22;color:#fff;margin-top:14px;text-shadow:0 2px 18px rgba(14,44,82,.5)}
.hero h1 .num{color:var(--safety)}
.hero p{font-size:16.5px;color:rgba(255,255,255,.9);margin-top:12px;max-width:560px;text-shadow:0 1px 10px rgba(14,44,82,.55)}
.hero .cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

/* 스펙 스트립 (치수선 느낌) */
.spec-strip{background:var(--ink);color:#fff;padding:34px 0}
.spec-in{max-width:1220px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.spec{position:relative;text-align:center;padding:6px 10px}
.spec:not(:last-child)::after{content:"";position:absolute;right:0;top:12%;bottom:12%;width:1px;background:rgba(255,255,255,.18)}
.spec b{font-size:clamp(24px,2.8vw,38px);font-weight:900;display:block;letter-spacing:-.02em}
.spec b i{font-style:normal;color:var(--safety)}
.spec span{font-size:12.5px;color:#9fb0c0;letter-spacing:.06em}

/* ── 섹션 헤드 ── */
.sec{padding:88px 0}
.sec-head{margin-bottom:42px}
.sec-head .dwg{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.26em;color:var(--bp)}
.sec-head .dwg::before{content:"";width:34px;height:2px;background:var(--safety)}
.sec-head h2{font-size:clamp(26px,3.2vw,40px);font-weight:900;letter-spacing:-.035em;margin-top:12px;line-height:1.3}
.sec-head .ds{margin-top:10px;font-size:15.5px;color:var(--dim);max-width:620px}

/* ── 분야 카드 (도면 라벨) ── */
.field-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fd{background:var(--card);border:1px solid var(--line);display:block;transition:.2s;position:relative}
.fd:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(22,34,46,.14)}
.fd .ph{overflow:hidden;position:relative}
.fd .ph img{width:100%;aspect-ratio:4/2.9;object-fit:cover;transition:transform .55s}
.fd:hover .ph img{transform:scale(1.04)}
.fd .no{position:absolute;top:0;left:0;background:var(--safety);color:var(--ink);font-size:11.5px;font-weight:900;letter-spacing:.14em;padding:6px 13px;z-index:2}
.fd .bd{padding:20px 24px 24px;border-top:2px solid var(--ink)}
.fd h3{font-size:18.5px;font-weight:900}
.fd p{font-size:13.5px;color:var(--dim);margin-top:5px}
.fd .meta{margin-top:12px;font-size:12px;font-weight:800;color:var(--bp);letter-spacing:.04em}

/* ── 블루프린트 밴드 ── */
.bp-band{background:var(--bp);color:#dce8f8;position:relative;overflow:hidden;padding:90px 0}
.bp-band::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,var(--bp-line) 0 1px,transparent 1px 36px),
  repeating-linear-gradient(90deg,var(--bp-line) 0 1px,transparent 1px 36px)}
.bp-band .wrap{position:relative}
.bp-band .dwg{color:var(--safety)}
.bp-band h2{color:#fff}
.bp-band .ds{color:#9db8da}
.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:14px}
.pc-step{position:relative;padding:24px 18px;border:1.5px dashed rgba(122,170,235,.45)}
.pc-step:not(:first-child){border-left:0}
.pc-step .n{font-size:12px;font-weight:900;color:var(--safety);letter-spacing:.2em}
.pc-step b{display:block;font-size:16.5px;font-weight:900;color:#fff;margin-top:7px}
.pc-step p{font-size:12.5px;color:#9db8da;margin-top:5px;line-height:1.6}
.pc-step::after{content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:var(--safety);font-weight:900;z-index:2}
.pc-step:last-child::after{content:""}

/* ── 설비 테이블 ── */
.eq-tbl{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--card);border-top:2px solid var(--ink)}
.eq-tbl th{background:#f4f7fa;color:var(--dim);font-size:12px;font-weight:800;letter-spacing:.08em;text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
.eq-tbl td{padding:14px 16px;border-bottom:1px solid var(--line)}
.eq-tbl tr:hover td{background:#f8fafc}
.eq-tbl .cnt{font-weight:900}
.eq-tbl .spec-td{color:var(--dim);font-size:13.5px}

/* 인증 배지 */
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cert{background:var(--card);border:1px solid var(--line);padding:26px 24px;position:relative}
.cert::before{content:"";position:absolute;top:0;left:0;width:42px;height:3px;background:var(--safety)}
.cert b{font-size:17px;font-weight:900;display:block}
.cert span{font-size:13px;color:var(--dim);margin-top:4px;display:block}

/* CTA 밴드 */
.cta-band{background:var(--ink);color:#fff;padding:58px 0}
.cta-band .in{max-width:1220px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(23px,3vw,34px);font-weight:900;letter-spacing:-.03em;line-height:1.3}
.cta-band h2 i{font-style:normal;color:var(--safety)}
.cta-band p{font-size:14.5px;color:#9fb0c0;margin-top:7px}

/* ── 푸터 ── */
.footer{background:#0b1620;color:#7f93a6;padding:50px 0 36px;font-size:14px}
.ft-in{max-width:1220px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px}
.ft-in .lg{font-size:20px;font-weight:900;color:#fff}
.ft-in .lg i{font-style:normal;color:var(--safety)}
.ft-in p{margin-top:12px;line-height:1.85;font-size:13px;color:#5d7184}
.ft-in h4{color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.08em;margin-bottom:12px}
.ft-in li{margin-bottom:8px;font-size:13.5px}
.ft-in li a:hover{color:#fff}
.ft-in .tel{font-size:23px;font-weight:900;color:#fff}
.ft-bot{max-width:1220px;margin:34px auto 0;padding:20px 24px 0;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#46586a;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ── 서브 비주얼 ── */
.sub-visual{position:relative;height:300px;overflow:hidden;background:var(--bp)}
.sub-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sub-visual .scrim{position:absolute;left:0;right:0;bottom:0;height:64%;background:linear-gradient(180deg,rgba(14,44,82,0),rgba(14,44,82,.72))}
.sub-visual .in{position:absolute;left:0;right:0;bottom:0;padding-bottom:40px;color:#fff}
.sub-visual .dwg{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:800;letter-spacing:.26em;color:var(--safety);text-shadow:0 1px 8px rgba(14,44,82,.6)}
.sub-visual .dwg::before{content:"";width:30px;height:2px;background:var(--safety)}
.sub-visual h1{font-size:clamp(27px,3.4vw,44px);font-weight:900;letter-spacing:-.03em;margin-top:8px;text-shadow:0 2px 16px rgba(14,44,82,.55)}

/* ── COMPANY ── */
.ceo{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center;margin-bottom:74px}
.ceo>*{min-width:0}
.ceo .ph{position:relative}
.ceo .ph img{width:100%;aspect-ratio:4/4.6;object-fit:cover}
.ceo .ph::after{content:"";position:absolute;right:-12px;bottom:-12px;width:60%;height:60%;border:3px solid var(--safety);z-index:-1}
.ceo h2{font-size:clamp(23px,2.8vw,34px);font-weight:900;letter-spacing:-.03em;line-height:1.4}
.ceo p{font-size:15.5px;color:var(--dim);line-height:1.95;margin-top:14px}
.ceo p b{color:var(--ink)}
.ceo .sign{margin-top:18px;font-size:14px;color:var(--dim)}
.ceo .sign b{font-size:17px;color:var(--ink);font-weight:900;margin-left:8px}
.hist{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hs{background:var(--card);border:1px solid var(--line);padding:28px 26px;border-top:3px solid var(--safety)}
.hs b{font-size:24px;font-weight:900;color:var(--bp);display:block}
.hs h3{font-size:16px;font-weight:800;margin:8px 0 5px}
.hs p{font-size:13px;color:var(--dim)}

/* ── PRODUCTS ── */
.prod-rows{display:grid;gap:60px}
.pr-row{display:grid;grid-template-columns:1.1fr 1fr;gap:46px;align-items:center}
.pr-row>*{min-width:0}
.pr-row:nth-child(2n) .ph{order:2}
.pr-row .ph{position:relative}
.pr-row .ph img{width:100%;aspect-ratio:16/10.5;object-fit:cover}
.pr-row .ph .tag{position:absolute;top:0;left:0;background:var(--safety);color:var(--ink);font-size:11.5px;font-weight:900;letter-spacing:.14em;padding:6px 13px}
.pr-row h2{font-size:clamp(22px,2.6vw,31px);font-weight:900;letter-spacing:-.03em;margin:8px 0 10px}
.pr-row .dwg{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:800;letter-spacing:.24em;color:var(--bp)}
.pr-row .dwg::before{content:"";width:30px;height:2px;background:var(--safety)}
.pr-row p{font-size:15px;color:var(--dim);line-height:1.9}
.pr-row .specs{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pr-row .specs li{font-size:13.5px;font-weight:600;color:var(--ink);padding-left:18px;position:relative}
.pr-row .specs li::before{content:"▸";position:absolute;left:0;color:var(--safety)}

/* ── QUALITY ── */
.q-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:60px}
.qs{background:var(--card);border:1px solid var(--line);padding:30px 28px;text-align:center;border-bottom:3px solid var(--safety)}
.qs b{font-size:clamp(26px,3vw,40px);font-weight:900;color:var(--bp);display:block}
.qs span{font-size:13.5px;color:var(--dim)}
.q-flow{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.q-flow>*{min-width:0}
.q-flow .ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.q-list{display:grid;gap:14px}
.q-list .it{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--safety);padding:16px 20px}
.q-list b{font-size:15.5px;font-weight:900;display:block}
.q-list span{font-size:13px;color:var(--dim)}

/* ── CONTACT ── */
.ct-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:start}
.ct-grid>*{min-width:0}
.ct-info h2{font-size:clamp(22px,2.6vw,32px);font-weight:900;letter-spacing:-.02em;line-height:1.45}
.ct-info h2 i{font-style:normal;background:var(--safety);padding:0 6px}
.ct-info .rows{margin-top:28px;display:grid;gap:16px;font-size:15px}
.ct-info .it{background:var(--card);border:1px solid var(--line);padding:16px 20px;display:flex;gap:13px;align-items:flex-start}
.ct-info .it .em{font-size:20px}
.ct-info .it b{display:block;font-weight:800}
.ct-info .it span{font-size:13px;color:var(--dim)}
.consult-form{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--ink);padding:34px 36px}
.consult-form .fld{margin-bottom:16px}
.consult-form label{display:block;font-size:13px;font-weight:800;color:var(--dim);margin-bottom:7px}
.consult-form label .req{color:#d04b35}
.consult-form input,.consult-form select,.consult-form textarea{width:100%;background:var(--steel);border:1px solid var(--line);color:var(--ink);font-size:15px;padding:13px 15px;outline:0;transition:.15s;border-radius:0}
.consult-form input:focus,.consult-form select:focus,.consult-form textarea:focus{border-color:var(--bp);background:#fff}
.consult-form textarea{min-height:110px;resize:vertical}
.consult-form .fld-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.consult-form .submit{width:100%;background:var(--safety);color:var(--ink);padding:16px;font-size:16px;font-weight:900;margin-top:6px;transition:.2s;cursor:pointer;border:0}
.consult-form .submit:hover{background:var(--ink);color:#fff}
.consult-form .note{font-size:12px;color:var(--dim);margin-top:11px;text-align:center}

/* ── 반응형 ── */
@media (max-width:1024px){
  .gnb,.hd .tel{display:none}
  .m-burger{display:block;font-size:23px;margin-left:auto}
  .spec-in{grid-template-columns:1fr 1fr;gap:22px}
  .spec:nth-child(2)::after{display:none}
  .field-grid{grid-template-columns:1fr 1fr}
  .proc{grid-template-columns:1fr}
  .pc-step{border:1.5px dashed rgba(122,170,235,.45) !important}
  .pc-step::after{content:"↓";right:auto;left:50%;top:auto;bottom:-13px;transform:translateX(-50%)}
  .pc-step:last-child::after{content:""}
  .certs{grid-template-columns:1fr 1fr}
  .ceo,.pr-row,.q-flow,.ct-grid{grid-template-columns:1fr}
  .pr-row:nth-child(2n) .ph{order:0}
  .hist{grid-template-columns:1fr 1fr}
  .q-stats{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hero{height:66vh}
  .sec{padding:58px 0}
  .field-grid,.certs,.hist{grid-template-columns:1fr}
  .spec-in{grid-template-columns:1fr 1fr}
  .consult-form{padding:26px 20px}
  .consult-form .fld-row{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr}
  .ft-bot{flex-direction:column}
}