/* ================================================================
   EMD 공통 스타일시트 — emd-common.css
   이엠디 주식회사 | emdeng.com
   ================================================================ */

/* ── CSS 변수 ── */
:root {
  --navy:    #0f172a;
  --blue:    #2563eb;
  --accent:  #d97706;
  --muted:   #64748b;
  --border:  #e2e8f0;
  --offwhite:#f8fafc;
  --bg:      #ffffff;
}

/* ── 리셋 & 기본 ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{font-family:'Noto Sans KR',sans-serif;color:var(--navy);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* ── 레이아웃 ── */
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}

/* ── 버튼 ── */
.btn-red{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:var(--accent);color:#fff;font-size:14px;font-weight:700;border-radius:6px;transition:.2s;letter-spacing:.3px}
.btn-red:hover{background:#b45309;transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border:1.5px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.75);font-size:14px;font-weight:600;border-radius:6px;transition:.2s}
.btn-ghost:hover{border-color:rgba(255,255,255,0.65);color:#fff}
.btn-accent{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:var(--accent);color:#fff;font-size:14px;font-weight:700;border-radius:6px;transition:.2s}
.btn-accent:hover{background:#b45309;transform:translateY(-1px)}

/* ── 내비게이션 ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,border-color .3s,box-shadow .3s}

/* 상단(투명) 상태 */
.nav.top{background:transparent;border-bottom:1px solid transparent;box-shadow:none}

/* 스크롤 후(흰 배경) 상태 */
.nav.scrolled{background:#fff;border-bottom:1px solid var(--border);box-shadow:0 2px 16px rgba(0,0,0,0.06)}

.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
/* 로고 — display 대신 opacity로 전환해 위치 밀림 방지 */
.nav-logo{display:flex;align-items:center;flex-shrink:0;position:relative}
.logo-svg-nav{height:44px;width:auto;transition:opacity .3s}
.logo-top{opacity:1;transition:opacity .3s}
.logo-scrolled{opacity:0;position:absolute;left:0;top:0;transition:opacity .3s;pointer-events:none}
.nav.scrolled .logo-top{opacity:0;pointer-events:none}
.nav.scrolled .logo-scrolled{opacity:1;pointer-events:auto}

/* ── 메뉴 링크 ── */
.nav-links{display:flex;align-items:center;gap:2px}

/* 메뉴 링크 기본값 — 흰색으로 시작 */
.nav-links{display:flex;align-items:center;gap:2px}

/* 최상위 메뉴 링크만 흰색 — 드롭다운 제외 */
.nav-links > a,
.nav-links > .has-drop > a {
  font-size:14px;font-weight:500;padding:8px 13px;border-radius:6px;
  transition:color .15s,background .15s;white-space:nowrap;
  color:rgba(255,255,255,0.85) !important;
}
.nav.top .nav-links > a,
.nav.top .nav-links > .has-drop > a { color:rgba(255,255,255,0.85) !important; }
.nav.top .nav-links > a:hover,
.nav.top .nav-links > .has-drop > a:hover { color:#fff !important; background:rgba(255,255,255,0.1); }
.nav.top .nav-links > a.active,
.nav.top .nav-links > .has-drop > a.active { color:#fff !important; font-weight:700; }

.nav.scrolled .nav-links > a,
.nav.scrolled .nav-links > .has-drop > a { color:var(--muted) !important; background:transparent; }
.nav.scrolled .nav-links > a:hover,
.nav.scrolled .nav-links > .has-drop > a:hover { color:var(--navy) !important; background:var(--offwhite); }
.nav.scrolled .nav-links > a.active,
.nav.scrolled .nav-links > .has-drop > a.active { color:var(--navy) !important; font-weight:700; }

/* CTA 버튼 */
.nav-cta,.nav.top .nav-links a.nav-cta,.nav.scrolled .nav-links a.nav-cta{
  padding:9px 18px !important;
  background:var(--accent) !important;
  color:#fff !important;
  border-radius:6px !important;
  font-size:13px !important;
  font-weight:700 !important;
  margin-left:8px;
  transition:background .2s !important;
}
.nav-cta:hover,.nav.top .nav-links a.nav-cta:hover,.nav.scrolled .nav-links a.nav-cta:hover{
  background:#b45309 !important;
  color:#fff !important;
}

/* 회사명 텍스트 — 기본값을 흰색으로 (nav는 항상 어두운 배경에서 시작) */
.nav-company-name{font-family:'Noto Sans KR',sans-serif;font-size:13px;font-weight:700;line-height:1.3;transition:color .3s;color:#fff !important;white-space:nowrap}
.nav-company-full{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;margin-top:1px;transition:color .3s;color:rgba(255,255,255,0.42) !important;white-space:nowrap}

/* 투명 배경일 때 회사명 색 */
.nav.top .nav-company-name{color:#fff !important}
.nav.top .nav-company-full{color:rgba(255,255,255,0.42) !important}
.nav.top .nav-company-border{border-left-color:rgba(255,255,255,0.18) !important}

/* 스크롤 후 회사명 색 */
.nav.scrolled .nav-company-name{color:var(--navy) !important}
.nav.scrolled .nav-company-full{color:rgba(15,23,42,0.4) !important}
.nav.scrolled .nav-company-border{border-left-color:rgba(15,23,42,0.15) !important}

/* ── 드롭다운 ── */
.has-drop{position:relative}
.has-drop>a{display:flex;align-items:center;gap:4px;cursor:pointer}
.has-drop>a::after{content:'▾';font-size:9px;opacity:0.5;transition:transform .2s,opacity .2s}
.has-drop.open>a::after{transform:rotate(180deg);opacity:1}

/* 드롭다운 메뉴 — 기본 숨김 */
.drop-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 12px 32px rgba(0,0,0,0.12);
  min-width:180px;
  padding:8px 0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s;
  z-index:200;
}
/* 열렸을 때만 보임 */
.has-drop.open .drop-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.drop-label{padding:8px 16px 4px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
/* 드롭다운 내부 링크 — 항상 다크색 (흰색 덮어씌움 방지) */
.drop-menu a,
.nav .drop-menu a,
.nav.top .drop-menu a,
.nav.scrolled .drop-menu a {
  display:block !important;
  padding:9px 16px !important;
  font-size:13px !important;
  color:var(--navy) !important;
  transition:color .15s, background .15s, padding .15s;
  white-space:nowrap;
  background:transparent !important;
  border-radius:0 !important;
}
.drop-menu a:hover,
.nav .drop-menu a:hover,
.nav.top .drop-menu a:hover,
.nav.scrolled .drop-menu a:hover {
  background:var(--offwhite) !important;
  color:var(--accent) !important;
  padding-left:20px !important;
}
.drop-divider{height:1px;background:var(--border);margin:6px 0}

@media(max-width:900px){
  .nav-links>div:not(:last-child),.nav-links>a:not(.nav-cta){display:none}
}

/* ── 페이지 히어로 (서브페이지) ── */
.page-hero{position:relative;background:var(--navy);padding:160px 0 80px;overflow:hidden}
.page-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.page-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.page-title{font-family:'Inter',sans-serif;font-size:clamp(28px,4vw,52px);font-weight:900;color:#fff;letter-spacing:-1.5px;line-height:1.1;margin-bottom:16px}
.page-title em{font-style:italic;color:var(--accent)}
.page-desc{font-size:15px;color:rgba(255,255,255,0.52);line-height:1.8;max-width:560px}

/* ── 섹션 공통 ── */
.section{padding:88px 0}
.section-alt{padding:88px 0;background:var(--offwhite)}
.s-eyebrow{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.s-title{font-family:'Inter',sans-serif;font-size:clamp(22px,2.8vw,36px);font-weight:900;color:var(--navy);letter-spacing:-1px;line-height:1.1;margin-bottom:12px}
.s-desc{font-size:15px;color:var(--muted);line-height:1.8;max-width:600px}

/* ── 브레드크럼 ── */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,0.4);margin-bottom:20px}
.breadcrumb a{color:rgba(255,255,255,0.5);transition:.2s}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{color:rgba(255,255,255,0.25)}

/* ── CTA 섹션 ── */
.cta{background:var(--navy);padding:80px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta h2{font-family:'Inter',sans-serif;font-size:clamp(20px,2.6vw,34px);font-weight:900;color:#fff;letter-spacing:-1px;line-height:1.15;margin-bottom:10px}
.cta h2 em{font-style:italic;color:var(--accent)}
.cta p{font-size:14px;color:rgba(255,255,255,0.48);line-height:1.7}

/* ── 푸터 ── */
.footer{background:#0a1120;padding:64px 0 0}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,0.07)}
.footer-brand svg{height:42px;width:auto;margin-bottom:12px}
.footer-brand>span{font-size:14px;font-weight:700;color:#fff;display:block;margin-bottom:8px}
.footer-brand p{font-size:12px;color:rgba(255,255,255,0.28);line-height:1.8}
.footer-col h5{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.28);margin-bottom:14px}
.footer-col a,.footer-col p{display:block;font-size:13px;color:rgba(255,255,255,0.42);margin-bottom:8px;transition:.2s;line-height:1.6}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:20px 0;font-size:11px;color:rgba(255,255,255,0.18)}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:480px){.footer-top{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:6px;text-align:center}}

/* ── 플로팅 버튼 ── */
.float-btn{position:fixed;bottom:28px;right:28px;z-index:90}
.float-cta{display:flex;align-items:center;gap:8px;padding:11px 18px;background:var(--accent);color:#fff;font-size:13px;font-weight:700;border-radius:50px;box-shadow:0 4px 20px rgba(217,119,6,0.38);transition:.2s}
.float-cta:hover{background:#b45309;transform:translateY(-2px)}
.float-cta svg{width:15px;height:15px}

/* ── Reveal 애니메이션 ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}
.reveal.d4{transition-delay:.4s}
.reveal.d5{transition-delay:.5s}
.reveal.d6{transition-delay:.6s}
.reveal-left{opacity:0;transform:translateX(-22px);transition:opacity .6s ease,transform .6s ease}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(22px);transition:opacity .6s ease,transform .6s ease}
.reveal-right.visible{opacity:1;transform:translateX(0)}

/* ── 제품 상세 ── */
.detail-img-wrap{width:100%;height:400px;background:var(--offwhite);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:48px;border:1px solid var(--border)}
.detail-img-wrap img{width:100%;height:100%;object-fit:contain}
.detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.detail-tag{display:inline-block;padding:5px 14px;background:var(--offwhite);border:1px solid var(--border);border-radius:50px;font-size:12px;font-weight:600;color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:32px}
.feature-card{background:#fff;padding:24px}
.feature-n{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--accent);margin-bottom:8px}
.feature-card h4{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:6px}
.feature-card p{font-size:13px;color:var(--muted);line-height:1.7}
.spec-table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:32px}
.spec-table tr{border-bottom:1px solid var(--border)}
.spec-table tr:last-child{border-bottom:none}
.spec-table th{background:var(--offwhite);padding:12px 20px;font-size:13px;font-weight:700;color:var(--navy);width:160px;text-align:left}
.spec-table td{padding:12px 20px;font-size:13px;color:#374151;line-height:1.7}
.detail-cta{margin-top:48px;padding:32px;background:var(--navy);border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.detail-cta h3{font-size:18px;font-weight:700;color:#fff;margin-bottom:4px}
.detail-cta p{font-size:13px;color:rgba(255,255,255,0.48)}
.detail-bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:64px}
.prod-nav{display:flex;justify-content:space-between;gap:16px;margin-top:64px;padding-top:32px;border-top:1px solid var(--border)}
.prod-nav a{display:flex;align-items:center;gap:10px;padding:14px 20px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;color:var(--navy);transition:.2s;flex:1;max-width:48%}
.prod-nav a:hover{border-color:var(--accent);color:var(--accent)}
.prod-nav-placeholder{flex:1;max-width:48%}
.info-row{margin-bottom:24px}
.info-row-body{font-size:13px;color:var(--muted);line-height:1.8}
.info-block{background:var(--offwhite);border-radius:8px;padding:20px 24px;margin-top:16px}
.info-dot{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#374151;margin-bottom:8px}
.info-dot::before{content:'·';color:var(--accent);font-weight:900;flex-shrink:0;margin-top:1px}
@media(max-width:768px){.feature-grid{grid-template-columns:1fr 1fr}.detail-bottom{grid-template-columns:1fr}.detail-img-wrap{height:240px}}
@media(max-width:480px){.feature-grid{grid-template-columns:1fr}.prod-nav{flex-direction:column}.prod-nav a,.prod-nav-placeholder{max-width:100%}}

/* ── 문의 폼 ── */
.contact-wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;margin-top:48px}
.address-card{background:var(--offwhite);border:1px solid var(--border);border-radius:10px;padding:28px}
.address-card h4{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.address-card p{font-size:14px;color:#374151;line-height:2}
.form-panel{background:#fff;border:1px solid var(--border);border-radius:10px;padding:36px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:6px;font-size:14px;font-family:inherit;color:var(--navy);transition:.2s;background:#fff}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
.form-group textarea{resize:vertical;min-height:120px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:12px;color:var(--muted);margin-top:4px}
.form-sub{font-size:12px;color:var(--muted);margin-bottom:20px;line-height:1.7}
.submit-btn{width:100%;padding:14px;background:var(--accent);color:#fff;font-size:15px;font-weight:700;border-radius:6px;transition:.2s;border:none;cursor:pointer}
.submit-btn:hover{background:#b45309}
@media(max-width:900px){.contact-wrap{grid-template-columns:1fr}}
@media(max-width:480px){.form-grid{grid-template-columns:1fr}}

/* ── 게시판 ── */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:48px}
.app-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:24px;transition:.2s}
.app-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.07);transform:translateY(-2px)}

/* ── 기타 ── */
.full{width:100%}