/* ================================================================
   O.N.O FILTER — Global Stylesheet v5
   컨셉 : Precision Minimal  |  여백이 말하는 고급 산업 B2B
   팔레트: #fff 순백 / #0c1a2e 딥네이비 / #E8820A 앰버(단일 포인트)
   폰트 : Barlow Condensed(제목) + Noto Sans KR(본문)
================================================================ */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700&family=Barlow:wght@300;400;500;600&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* ── 토큰 ──────────────────────────────────────────────────── */
:root {
  --ink:      #0c1a2e;   /* 최심부 네이비 */
  --ink2:     #1e3454;   /* 중간 네이비 */
  --amber:    #E8820A;   /* 유일한 포인트 */
  --amber-d:  #c86d08;
  --white:    #ffffff;
  --off:      #f6f8fb;   /* 섹션 배경 교체용 */
  --line:     #e4eaf4;   /* 디바이더 */
  --muted:    #7a8fa8;   /* 보조 텍스트 */
  --body-txt: #2c3e55;
  --r:        4px;
  --ease:     cubic-bezier(.4,0,.2,1);
  --t:        .22s;
  --sh:       0 2px 16px rgba(12,26,46,.09);
  --sh2:      0 8px 40px rgba(12,26,46,.14);
}

/* ── 리셋 ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family:'Noto Sans KR',sans-serif;
  font-size:14.5px; font-weight:400;
  color:var(--body-txt); background:var(--white);
  line-height:1.75; -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; transition:color var(--t) var(--ease) }
img { display:block; max-width:100%; height:auto }
button { font-family:inherit; cursor:pointer }

/* ── 유틸 ──────────────────────────────────────────────────── */
.container { width:100%; max-width:1160px; margin:0 auto; padding:0 28px }

/* ── 공통 섹션 여백 ────────────────────────────────────────── */
.sec { padding:56px 0 }
.sec-sm { padding:44px 0 }
.sec-alt { background:var(--off) }

/* ── 타이포그래피 시스템 ────────────────────────────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Barlow',sans-serif; font-size:.66rem;
  font-weight:600; letter-spacing:3.5px; text-transform:uppercase;
  color:var(--amber); margin-bottom:8px;
}
.eyebrow::before {
  content:''; width:18px; height:2px; background:var(--amber);
  flex-shrink:0;
}

.h-display {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.8rem,3.5vw,3rem);
  font-weight:700; letter-spacing:1px;
  color:var(--ink); line-height:1.1;
}
.h-display .hi { color:var(--amber) }

.h-section {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.4rem,2.5vw,2.1rem);
  font-weight:700; letter-spacing:1px;
  color:var(--ink); line-height:1.15;
}

.lead {
  font-size:.9rem; color:var(--muted);
  line-height:1.78; max-width:540px;
}

/* ── 버튼 ──────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  border:none; border-radius:var(--r);
  font-family:'Barlow',sans-serif; font-size:.88rem;
  font-weight:600; letter-spacing:.4px;
  padding:.6rem 1.5rem;
  transition:all var(--t) var(--ease); white-space:nowrap; cursor:pointer;
}
.btn-primary {
  background:var(--ink); color:var(--white);
}
.btn-primary:hover {
  background:#0e2240; color:var(--white);
  box-shadow:0 4px 20px rgba(12,26,46,.3); transform:translateY(-2px);
}
.btn-amber {
  background:var(--amber); color:var(--white);
}
.btn-amber:hover {
  background:var(--amber-d); color:var(--white);
  box-shadow:0 4px 18px rgba(232,130,10,.35); transform:translateY(-1px);
}
.btn-ghost {
  background:transparent; color:var(--white);
  border:1.5px solid rgba(255,255,255,.42);
}
.btn-ghost:hover {
  background:rgba(255,255,255,.08); border-color:#fff; color:#fff;
}
.btn-outline {
  background:transparent; color:var(--ink);
  border:1.5px solid var(--line);
}
.btn-outline:hover {
  border-color:var(--ink); color:var(--ink);
  box-shadow:var(--sh);
}
.btn-sm { padding:.44rem 1.1rem; font-size:.8rem }
.btn-lg { padding:.75rem 2rem; font-size:.95rem }

/* ── 헤더 ──────────────────────────────────────────────────── */
#hdr {
  position:fixed; inset:0 0 auto 0; z-index:900;
  background:rgba(10,18,32,.96);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:box-shadow var(--t);
}
#hdr.shadow { box-shadow:0 2px 28px rgba(0,0,0,.3) }

.hdr-inner {
  display:flex; align-items:center;
  justify-content:space-between;
  height:80px;
}
.hdr-logo img { height:68px; width:auto; display:block }

/* 네비 */
.hdr-nav { display:flex; align-items:center; gap:2px }
.hdr-nav .n-item { position:relative }
.hdr-nav .n-link {
  display:flex; align-items:center; gap:5px;
  font-family:'Noto Sans KR',sans-serif;
  font-size:1rem; font-weight:600;
  letter-spacing:.3px;
  color:rgba(255,255,255,.72);
  padding:0 16px; height:80px;
  position:relative;
  transition:color var(--t);
}
/* 활성 메뉴 하단 앰버 강조 바 */
.hdr-nav .n-link::after {
  content:'';
  position:absolute; bottom:0; left:16px; right:16px;
  height:3px; border-radius:3px 3px 0 0;
  background:#E8820A;
  transform:scaleX(0);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.hdr-nav .n-link:hover { color:#fff }
.hdr-nav .n-link:hover::after { transform:scaleX(.6) }
.hdr-nav .n-link.on { color:#fff }
.hdr-nav .n-link.on::after {
  transform:scaleX(1);
  background:#ff9520;
  box-shadow:0 0 10px rgba(255,149,32,.7), 0 0 20px rgba(232,130,10,.4);
  height:4px;
}
.hdr-nav .n-link .arr {
  font-size:.55rem; opacity:.45;
  transition:transform var(--t);
}
.hdr-nav .n-item:hover .arr { transform:rotate(180deg); opacity:.7 }

/* 드롭다운 */
.dropdown {
  position:absolute; top:calc(100% + 1px); left:0;
  background:#fff; min-width:220px;
  border-top:2px solid var(--amber);
  border-radius:0 0 var(--r) var(--r);
  box-shadow:var(--sh2);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all .18s var(--ease); pointer-events:none;
}
.n-item:hover .dropdown {
  opacity:1; visibility:visible;
  transform:translateY(0); pointer-events:auto;
}
.dropdown a {
  display:flex; align-items:center;
  font-size:.9rem; font-weight:500;
  color:var(--body-txt);
  padding:.6rem 1.2rem;
  border-left:3px solid transparent;
  transition:all var(--t);
}
.dropdown a:hover {
  background:var(--off); color:var(--ink);
  border-left-color:var(--amber);
  padding-left:1.5rem;
}
/* 현재 서브메뉴 강조 */
.dropdown a.sub-on {
  background:#fff8f0;
  border-left-color:var(--amber);
  color:var(--amber);
  font-weight:700;
  padding-left:1.5rem;
}

/* ENG 버튼 */
.n-eng {
  font-family:'Barlow',sans-serif; font-size:.72rem;
  font-weight:600; letter-spacing:2px;
  color:var(--amber)!important; height:auto!important;
  border:1px solid rgba(232,130,10,.5); border-radius:3px;
  padding:.28rem .85rem!important; margin-left:8px;
  transition:all var(--t)!important;
}
.n-eng:hover {
  background:var(--amber)!important; color:#fff!important;
  border-color:var(--amber)!important;
}

/* 햄버거 */
.hdr-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:6px;
}
.hdr-toggle span {
  display:block; width:22px; height:1.5px;
  background:rgba(255,255,255,.8); border-radius:2px;
  transition:all var(--t);
}
.hdr-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(4.5px,4.5px) }
.hdr-toggle.open span:nth-child(2) { opacity:0 }
.hdr-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-4.5px) }

/* 모바일 메뉴 */
#mobile-nav {
  display:none; position:fixed; inset:80px 0 0 0; z-index:899;
  background:rgba(10,18,32,.98);
  overflow-y:auto; padding:24px 28px 40px;
}
#mobile-nav.open { display:block }
.mob-link {
  display:block; color:rgba(255,255,255,.78);
  font-size:1rem; font-weight:500;
  padding:.75rem 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.mob-link:hover { color:#fff }
.mob-sub { padding-left:16px }
.mob-sub a {
  display:block; font-size:.88rem;
  color:rgba(255,255,255,.5); padding:.5rem 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.mob-sub a:hover { color:var(--amber) }
.mob-sub a.sub-on {
  color:var(--amber); font-weight:700;
  border-left:3px solid var(--amber);
  padding-left:8px;
}
/* 모바일 활성 메인 메뉴 */
.mob-link.mob-on {
  color:#fff; font-weight:700;
}

/* ── 내부 페이지 히어로 ────────────────────────────────────── */
.page-hero {
  background:var(--ink); padding:88px 0 28px;
  position:relative; overflow:hidden;
}
.page-hero::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 100% at 100% 50%,rgba(232,130,10,.07) 0%,transparent 65%);
  pointer-events:none;
}
.page-hero h1 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:2.2rem; font-weight:700;
  letter-spacing:2px; color:#fff;
  position:relative; z-index:1;
}
.page-hero .bc { display:flex; gap:8px; margin-top:8px; font-size:.8rem; color:rgba(255,255,255,.4) }
.page-hero .bc a { color:rgba(255,255,255,.4) }
.page-hero .bc a:hover { color:var(--amber) }
.page-hero .bc .sep { opacity:.3 }
.page-hero .bc .cur { color:var(--amber) }

/* ── 게시판 ────────────────────────────────────────────────── */
.board-wrap { padding:0 }
.board-top {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:4px; padding-bottom:14px;
  border-bottom:2px solid var(--ink);
}
.board-count { font-size:.82rem; color:var(--muted) }
.board-table { width:100%; border-collapse:collapse }
.board-table th {
  background:#f0f4fb; font-size:.77rem; font-weight:700;
  color:var(--ink); padding:0 .9rem; height:44px;
  border-bottom:2px solid var(--line); text-align:center; letter-spacing:.3px;
  white-space:nowrap;
}
.board-table td {
  font-size:.85rem; padding:0 .9rem; height:44px;
  border-bottom:1px solid #f0f4f9; vertical-align:middle; line-height:1.55;
}
.board-table tr:hover td { background:#fafcff }
.board-table .td-title a { color:var(--body-txt) }
.board-table .td-title a:hover { color:var(--amber) }
.badge-n {
  background:var(--amber); color:#fff;
  font-size:.6rem; padding:1px 5px; border-radius:2px;
  font-weight:700; margin-left:5px; vertical-align:middle;
}
.board-view-hd {
  border-top:2px solid var(--ink);
  padding:1.1rem 0; border-bottom:1px solid var(--line);
}
.board-view-hd h2 { font-size:1.1rem; font-weight:600; color:var(--ink) }
.board-view-meta { font-size:.78rem; color:var(--muted); margin-top:4px }
.board-view-body {
  padding:1.4rem 0; min-height:180px;
  border-bottom:1px solid var(--line); line-height:1.9; font-size:.9rem;
}
.search-box { background:var(--off); border-radius:var(--r); padding:.7rem 1rem }
.board-form label { font-size:.82rem; font-weight:600; color:var(--ink) }
.board-form .form-control,
.board-form .form-select {
  border-radius:var(--r); border-color:var(--line);
  font-size:.87rem; font-family:'Noto Sans KR',sans-serif;
}
.board-form .form-control:focus {
  border-color:var(--ink2); box-shadow:0 0 0 3px rgba(30,52,84,.1);
}

/* 페이지네이션 */
.pagination-wrap { display:flex; justify-content:center; margin-top:24px; gap:4px }
.pg-btn {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r); font-size:.82rem; color:var(--muted);
  border:1px solid var(--line); transition:all var(--t);
}
.pg-btn:hover { border-color:var(--ink); color:var(--ink) }
.pg-btn.active { background:var(--ink); color:#fff; border-color:var(--ink) }

/* ── 제품 카드 ─────────────────────────────────────────────── */
.prod-card {
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:#fff;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  display:block; text-decoration:none;
}
.prod-card:hover { transform:translateY(-4px); box-shadow:var(--sh2); border-color:transparent }
.prod-card-thumb {
  height:160px; background:var(--off);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.prod-card-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s }
.prod-card:hover .prod-card-thumb img { transform:scale(1.06) }
.prod-card-num {
  position:absolute; top:10px; left:10px;
  font-family:'Barlow',sans-serif; font-size:.65rem; font-weight:700;
  background:var(--ink); color:#fff;
  padding:2px 7px; border-radius:2px; letter-spacing:1px;
}
.prod-card-body { padding:1rem 1.1rem 1.1rem }
.prod-card-cat {
  font-size:.65rem; color:var(--amber);
  font-family:'Barlow',sans-serif; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; margin-bottom:4px;
}
.prod-card-name {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1rem; font-weight:700;
  color:var(--ink); line-height:1.2; margin-bottom:6px;
}
.prod-card-more {
  font-size:.74rem; color:var(--muted);
  display:flex; align-items:center; gap:4px;
}
.prod-card:hover .prod-card-more { color:var(--amber) }

/* 제품 상세 모달 */
.modal-product .modal-header { background:var(--ink); color:#fff }
.modal-product .modal-title { font-family:'Barlow Condensed',sans-serif; font-size:1.2rem; letter-spacing:1px }
.modal-product .btn-close { filter:invert(1) }

/* ── 관리자 ────────────────────────────────────────────────── */
.admin-shell {
  min-height:100vh; background:var(--off);
  display:flex; align-items:center; justify-content:center; padding:40px 20px;
}
.admin-card {
  width:100%; max-width:380px; background:#fff;
  border-radius:8px; overflow:hidden; box-shadow:var(--sh2);
}
.admin-card-head {
  background:var(--ink); padding:24px 28px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.2rem; font-weight:700;
  letter-spacing:2px; color:#fff;
}
.admin-card-body { padding:28px }
.admin-field { margin-bottom:16px }
.admin-field label { display:block; font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:5px }
.admin-field input {
  width:100%; border:1.5px solid var(--line); border-radius:var(--r);
  padding:.55rem .85rem; font-size:.88rem; font-family:'Noto Sans KR',sans-serif;
  transition:border-color var(--t);
}
.admin-field input:focus { outline:none; border-color:var(--ink2) }

/* ── 푸터 ──────────────────────────────────────────────────── */
#ftr {
  background:var(--ink); color:rgba(255,255,255,.5);
  padding:0;
}
.ftr-grid {
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1.4fr;
  gap:36px; padding-bottom:36px;
}
.ftr-logo img { height:40px; width:auto }
.ftr-tagline {
  font-family:'Barlow',sans-serif; font-size:.64rem;
  letter-spacing:3px; color:var(--amber); margin-top:5px; text-transform:uppercase;
}
.ftr-desc { font-size:.8rem; margin-top:9px; color:rgba(255,255,255,.38); line-height:1.75 }
.ftr-h {
  font-family:'Barlow',sans-serif; font-size:.64rem;
  letter-spacing:2.5px; text-transform:uppercase;
  color:rgba(255,255,255,.28); margin-bottom:10px;
  padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.06);
}
.ftr-links { list-style:none }
.ftr-links li { margin-bottom:5px }
.ftr-links a { font-size:.8rem; color:rgba(255,255,255,.46); transition:color var(--t) }
.ftr-links a:hover { color:var(--amber) }
.ftr-info { list-style:none }
.ftr-info li {
  display:flex; gap:8px; font-size:.8rem;
  color:rgba(255,255,255,.46); margin-bottom:7px; align-items:flex-start;
}
.ftr-info i { color:var(--amber); margin-top:3px; flex-shrink:0; font-size:.82rem }
.ftr-info a { color:rgba(255,255,255,.46) }
.ftr-info a:hover { color:var(--amber) }
.ftr-bottom {
  border-top:1px solid rgba(255,255,255,.05);
  padding:14px 0; text-align:center;
  font-size:.72rem; color:rgba(255,255,255,.2);
}
.ftr-bottom a { color:rgba(255,255,255,.12) }

/* ── 회사연혁 타임라인 ─────────────────────────────────────── */
.timeline { position:relative; padding-left:22px }
.timeline::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:1.5px; background:var(--line);
}
.tl-item { position:relative; margin-bottom:20px }
.tl-item::before {
  content:''; position:absolute; left:-26px; top:5px;
  width:8px; height:8px; border-radius:50%;
  background:var(--amber); border:2px solid #fff;
  box-shadow:0 0 0 2px var(--amber);
}
.tl-year { font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:2px }
.tl-desc { font-size:.86rem; color:var(--muted); line-height:1.68 }

/* ── 반응형 ────────────────────────────────────────────────── */
@media(max-width:1024px) {
  .ftr-grid { grid-template-columns:1fr 1fr; gap:32px }
}
@media(max-width:768px) {
  .hdr-nav { display:none }
  .hdr-toggle { display:flex }
  .sec { padding:64px 0 }
  .ftr-grid { grid-template-columns:1fr 1fr; gap:28px }
  .board-table .hide-m { display:none }
}
@media(max-width:480px) {
  .ftr-grid { grid-template-columns:1fr }
  .sec { padding:52px 0 }
  .h-display { font-size:1.9rem }
}

/* ── 로고 GIF — 원본 이미지 사용 ───────────────────────────
   원본 로고는 검정(#111) 배경 + 흰글씨 구조.
   헤더 다크배경과 자연스럽게 융합되도록 처리.
────────────────────────────────────────────────────────── */
/* ── 헤더 로고: 배경색 매칭 PNG ──────────────────────────── */
.hdr-logo img {
  display:block;
  height:68px; width:auto;
  border:none; outline:none;
  box-shadow:none;
  transition:opacity .2s;
}
.hdr-logo img:hover { opacity:.84 }