/* ============================================================
   DOWON TECH — Design tokens
   Palette:  --navy (brand/header/footer), --blue (accent/links),
             --ink (body text), --mute (secondary text),
             --line (hairline borders), --paper (section bg), --white
   Type:     Noto Sans KR (Korean body/headings)
             Jost (English display labels — VISION / R&D / etc.)
   Signature: "caliper tick" divider under section titles, referencing
             precision-measurement tools used in metal-cutting machining.
   ============================================================ */
:root{
  --navy: #1c3a5e;
  --navy-deep: #132a45;
  --blue: #3f7cc4;
  --blue-light: #eaf2fb;
  --ink: #202830;
  --mute: #6c7684;
  --line: #e3e7ee;
  --paper: #f4f6f9;
  --white: #ffffff;
  --accent: #d3572e;
  --radius: 4px;
  --shadow: 0 10px 30px -14px rgba(20,40,70,0.25);
  --maxw: 1200px;
  --font-kr: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  --font-en: 'Jost', var(--font-kr);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-kr);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:700; }

.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 24px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------------- Top utility bar ---------------- */
.topbar{ background: var(--navy-deep); }
.topbar__inner{ display:flex; justify-content:flex-end; }
.topbar__links{ display:flex; gap:20px; font-size:12.5px; }
.topbar__links a{ color:#c3d0e0; padding:8px 0; display:inline-block; }
.topbar__links a:hover{ color:#fff; }

/* ---------------- Header / Nav ---------------- */
.site-header{
  position: sticky; top:0; z-index:100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo__text{ font-family: var(--font-en); font-size:20px; letter-spacing:.5px; color:var(--navy); font-weight:600; }
.logo__text b{ font-weight:700; color: var(--blue); }
.logo__text--light{ color:#fff; font-size:22px; }
.logo__text--light b{ color:#8fb9e8; }

.main-nav > ul{ display:flex; gap:44px; height:76px; }
.main-nav > ul > li{ position:relative; display:flex; align-items:center; }
.main-nav > ul > li > a{
  font-size:16.5px; font-weight:700; color: var(--ink);
  padding: 8px 2px; position:relative;
}
.main-nav > ul > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background: var(--blue); transform: scaleX(0); transform-origin:left;
  transition: transform .2s ease;
}
.main-nav > ul > li:hover > a::after,
.main-nav > ul > li.active > a::after{ transform: scaleX(1); }
.main-nav > ul > li.active > a{ color: var(--blue); }

.sub-nav{
  position:absolute; top:100%; left:50%; transform: translateX(-50%);
  min-width:170px; background:#fff; border:1px solid var(--line); border-top:3px solid var(--blue);
  box-shadow: var(--shadow); border-radius: var(--radius);
  padding:8px 0; opacity:0; visibility:hidden; translate: 0 6px;
  transition: opacity .18s ease, translate .18s ease, visibility .18s;
}
.main-nav > ul > li:hover .sub-nav{ opacity:1; visibility:visible; translate:0 0; }
.sub-nav li a{ display:block; padding:9px 18px; font-size:14px; color:var(--mute); white-space:nowrap; }
.sub-nav li a:hover{ background: var(--blue-light); color: var(--blue); }

.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:none; padding:0;
}
.hamburger span{ width:24px; height:2px; background: var(--navy); transition: transform .25s, opacity .25s; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav-backdrop{
  display:none; position:fixed; inset:0; background:rgba(15,25,40,.45); z-index:98;
}
.mobile-nav-backdrop.show{ display:block; }

/* ---------------- Hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  min-height: 420px;
  background: linear-gradient(160deg, #24466f 0%, #16283f 100%);
  display:flex; align-items:center;
}
.hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5;
}
.hero__overlay{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(20,40,66,.72) 0%, rgba(20,40,66,.15) 75%); }
.hero__content{ position:relative; z-index:2; padding: 60px 24px; }
.hero__box{
  background: rgba(28,58,94,0.82);
  backdrop-filter: blur(2px);
  padding: 34px 40px;
  max-width: 620px;
  border-left: 4px solid var(--blue);
}
.hero__title{
  color:#fff; font-size: clamp(30px, 4.4vw, 46px); line-height:1.25; letter-spacing:-.5px;
}
.hero__subtitle{ color:#cfe0f5; font-size: clamp(15px, 1.9vw, 19px); margin-top:14px; font-weight:500; }

/* ---------------- Quick links (4 boxes) ---------------- */
.quick-links{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  border-top:1px solid var(--line);
}
.quick-links__item{
  padding: 34px 30px; border-right:1px solid var(--line); background:#fff;
  transition: background .2s ease;
}
.quick-links__item:last-child{ border-right:none; }
.quick-links__item:hover{ background: var(--paper); }
.quick-links__eyebrow{ font-size:14px; color:var(--mute); font-weight:700; margin-bottom:2px; }
.quick-links__title{
  font-family: var(--font-en); font-size:25px; color:var(--navy); font-weight:700; letter-spacing:.5px;
}
.quick-links__desc{ color:var(--mute); font-size:13.5px; margin:14px 0 16px; min-height:60px; }
.quick-links__go{ font-size:13px; font-weight:700; color:var(--blue); }
.quick-links__go::after{ content:" ›"; }

/* ---------------- Sections (generic) ---------------- */
.section{ padding: 72px 0; }
.section--alt{ background: var(--paper); }
.section__head{ margin-bottom: 38px; }
.section__eyebrow{
  font-family: var(--font-en); font-size:14px; letter-spacing:3px; color: var(--blue);
  font-weight:600; text-transform:uppercase;
}
.section__title{ font-size: clamp(24px,3vw,32px); margin-top:8px; color:var(--navy); }

/* Signature "caliper tick" divider — evokes a measurement scale */
.tick-divider{
  display:flex; align-items:center; gap:4px; margin-top:16px; height:14px;
}
.tick-divider span{ display:block; width:1px; height:8px; background: var(--line); }
.tick-divider span:nth-child(4n){ height:14px; background: var(--blue); }
.tick-divider::after{ content:""; flex:1; height:1px; background: var(--line); margin-left:6px; }

/* ---------------- Cards / grids ---------------- */
.grid{ display:grid; gap:24px; }
.grid--2{ grid-template-columns: repeat(2,1fr); }
.grid--3{ grid-template-columns: repeat(3,1fr); }
.grid--4{ grid-template-columns: repeat(4,1fr); }

.card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow: var(--shadow); transform: translateY(-3px); }
.card__img{ aspect-ratio: 4/3; background: linear-gradient(135deg,#dbe6f2,#c3d5e8); position:relative; overflow:hidden;}
.card__img img{ width:100%; height:100%; object-fit:cover; }
.card__body{ padding:18px 20px 22px; }
.card__tag{ font-size:12px; color:var(--blue); font-weight:700; letter-spacing:.5px; }
.card__title{ font-size:17px; margin-top:6px; color:var(--ink); }
.card__desc{ font-size:13.5px; color:var(--mute); margin-top:8px; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 26px;
  border-radius: var(--radius); font-weight:700; font-size:14.5px; border:1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.btn--primary{ background: var(--navy); color:#fff; }
.btn--primary:hover{ background: var(--blue); }
.btn--outline{ border-color: var(--line); color: var(--ink); }
.btn--outline:hover{ border-color: var(--navy); }
.btn--sm{ padding:8px 16px; font-size:13px; }

/* ---------------- Tables ---------------- */
.table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.table th, .table td{ padding:13px 14px; border-bottom:1px solid var(--line); text-align:left; }
.table th{ background: var(--paper); color:var(--navy); font-weight:700; }
.table tr:hover td{ background: #fafbfd; }

/* ---------------- Board list ---------------- */
.board-list{ border-top:2px solid var(--navy); }
.board-list li{ border-bottom:1px solid var(--line); }
.board-list a{ display:flex; justify-content:space-between; gap:16px; padding:16px 6px; }
.board-list__title{ flex:1; }
.board-list__badge{ display:inline-block; font-size:11px; background:var(--blue-light); color:var(--blue); padding:2px 8px; border-radius:10px; margin-right:8px; font-weight:700; }
.board-list__meta{ color:var(--mute); font-size:13px; white-space:nowrap; }
.board-list a:hover .board-list__title{ color: var(--blue); }

/* ---------------- Forms ---------------- */
.form-row{ margin-bottom:18px; }
.form-row label{ display:block; font-size:14px; font-weight:700; margin-bottom:7px; color:var(--navy); }
.form-row input[type=text], .form-row input[type=email], .form-row input[type=tel],
.form-row input[type=password], .form-row textarea, .form-row select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; font-size:14.5px; background:#fff;
}
.form-row textarea{ min-height:150px; resize:vertical; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  outline:2px solid var(--blue); outline-offset:1px; border-color: var(--blue);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-note{ font-size:13px; color:var(--mute); }
.alert{ padding:14px 18px; border-radius: var(--radius); font-size:14px; margin-bottom:20px; }
.alert--success{ background:#e9f6ee; color:#1c7a3f; border:1px solid #bfe6cd; }
.alert--error{ background:#fbeaea; color:#b3261e; border:1px solid #f2c6c4; }

/* ---------------- Breadcrumb / page banner ---------------- */
.page-banner{
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff; padding: 46px 0;
}
.page-banner__title{ font-size: clamp(24px,3vw,32px); }
.breadcrumb{ margin-top:10px; font-size:13px; color:#b9c9dd; }
.breadcrumb a{ color:#b9c9dd; }
.breadcrumb a:hover{ color:#fff; }

/* ---------------- Footer ---------------- */
.site-footer{ background: var(--navy-deep); color:#a9b8cb; padding: 44px 0 30px; }
.footer__inner{ display:grid; grid-template-columns: 1fr 2fr 1fr; gap:30px; align-items:start; }
.footer__brand p{ margin:10px 0 0; font-size:13px; color:#8ea1ba; }
.footer__info p{ margin:4px 0; font-size:13px; }
.footer__info .copyright{ margin-top:14px; color:#7488a3; }
.footer__links{ display:flex; flex-direction:column; gap:8px; text-align:right; font-size:13px; }
.footer__links a:hover{ color:#fff; }

.to-top{
  position:fixed; right:24px; bottom:24px; width:44px; height:44px; border-radius:50%;
  background: var(--navy); color:#fff; border:none; box-shadow: var(--shadow);
  opacity:0; pointer-events:none; transition: opacity .25s, transform .25s; z-index:60;
}
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top:hover{ background: var(--blue); }

/* ---------------- Utility ---------------- */
.mt-0{margin-top:0;} .text-center{text-align:center;}
.section__foot{ margin-top:32px; text-align:center; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px){
  .grid--4{ grid-template-columns: repeat(2,1fr); }
  .grid--3{ grid-template-columns: repeat(2,1fr); }
  .footer__inner{ grid-template-columns:1fr; text-align:left; }
  .footer__links{ text-align:left; flex-direction:row; flex-wrap:wrap; gap:16px; }
}

@media (max-width: 860px){
  .main-nav{
    position:fixed; top:0; right:0; height:100%; width:min(320px,84vw);
    background:#fff; z-index:99; padding: 90px 0 30px;
    transform: translateX(100%); transition: transform .28s ease;
    overflow-y:auto; box-shadow: -10px 0 30px rgba(0,0,0,.15);
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav > ul{ flex-direction:column; height:auto; gap:0; }
  .main-nav > ul > li{ flex-direction:column; align-items:stretch; height:auto; border-bottom:1px solid var(--line); }
  .main-nav > ul > li > a{ padding:16px 28px; display:block; }
  .main-nav > ul > li > a::after{ display:none; }
  .sub-nav{
    position:static; transform:none; opacity:1; visibility:visible; box-shadow:none;
    border:none; border-top:none; background:var(--paper); display:none; padding:4px 0 10px;
  }
  .main-nav > ul > li.open .sub-nav{ display:block; }
  .hamburger{ display:flex; }
  .topbar__links{ font-size:11.5px; gap:14px; }
}

@media (max-width: 760px){
  .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr; }
  .quick-links{ grid-template-columns: 1fr 1fr; }
  .quick-links__item{ border-right:1px solid var(--line); }
  .quick-links__item:nth-child(2n){ border-right:none; }
  .quick-links__item:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .hero__box{ padding:24px 22px; max-width:100%; }
  .form-grid{ grid-template-columns:1fr; }
  .site-header__inner{ height:64px; }
  .topbar__inner{ justify-content:center; }
}

@media (max-width: 480px){
  .quick-links{ grid-template-columns: 1fr; }
  .quick-links__item{ border-right:none !important; border-bottom:1px solid var(--line); }
  .hero{ min-height:320px; }
  .section{ padding:48px 0; }
}