/* ============================================================
   기업 홈페이지 스타일
   - 넓은 여백 + 큰 타이포 + 절제된 색 (현재 기업사이트 흐름)
   - 색은 CSS 변수 한 곳에서만 바꾸면 전체가 따라온다
   ============================================================ */
:root{
  --bg:#ffffff;
  --bg-soft:#f6f7f9;
  --bg-dark:#0f1115;
  --line:#e6e8ec;
  --ink:#12151a;
  --ink-2:#4b5563;
  --ink-3:#8b929e;
  --brand:#1a56db;
  --brand-dark:#1444b0;
  --brand-soft:#eef3ff;
  --logo:#7A3433;        /* 명함 로고 적갈색 — 심볼과 로고 영문 표기에 사용 */
  --radius:14px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --shadow-lg:0 12px 40px rgba(16,24,40,.12);
  --header-h:72px;
  --max:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Pretendard','Noto Sans KR','Malgun Gothic',-apple-system,system-ui,sans-serif;
  font-size:16px; line-height:1.7; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

/* ───────── 헤더 ───────── */
.topbar{
  background:var(--bg-dark); color:#cbd2dc; font-size:13px;
  padding:8px 0; display:flex; justify-content:flex-end;
}
.topbar .wrap{display:flex; justify-content:flex-end; gap:20px; width:100%;}
.topbar a:hover{color:#fff;}

header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
  transition:box-shadow .2s;
}
header.scrolled{box-shadow:0 4px 20px rgba(16,24,40,.07);}
.nav{height:var(--header-h); display:flex; align-items:center; gap:32px;}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:21px; letter-spacing:-.02em;}
.logo .mark{height:32px; width:auto; flex:none;}
.logo .tx{display:flex; align-items:baseline; gap:9px; white-space:nowrap;}
.logo .en{font-size:12px; font-weight:700; color:var(--logo); letter-spacing:.12em;}
/* 네비게이션은 ul/li 로 짜여 있다 — 기본 불릿과 안쪽 여백을 없앤다 */
.gnb, .sub{list-style:none; margin:0; padding:0;}
.gnb li{list-style:none;}
.gnb{display:flex; gap:6px; margin-left:auto;}
.gnb > li{position:relative;}
.gnb > li > a{
  display:block; padding:0 18px; line-height:var(--header-h);
  font-weight:700; font-size:15.5px; color:var(--ink);
}
.gnb > li > a:hover{color:var(--brand);}
.gnb > li::after{
  content:''; position:absolute; left:18px; right:18px; bottom:18px; height:2px;
  background:var(--brand); transform:scaleX(0); transition:transform .22s;
}
.gnb > li:hover::after{transform:scaleX(1);}
.sub{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px;
  min-width:180px; box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transition:.2s;
}
.gnb > li:hover .sub{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.sub a{display:block; padding:9px 14px; border-radius:8px; font-size:14.5px; color:var(--ink-2); white-space:nowrap;}
.sub a:hover{background:var(--brand-soft); color:var(--brand);}
.nav-cta{
  margin-left:8px; background:var(--brand); color:#fff; padding:11px 20px;
  border-radius:999px; font-weight:700; font-size:14.5px; transition:.2s;
}
.nav-cta:hover{background:var(--brand-dark); transform:translateY(-1px);}
.burger{display:none; margin-left:auto; background:none; border:0; font-size:24px; padding:6px;}

/* ───────── 히어로 ───────── */
.hero{
  position:relative; padding:110px 0 120px; overflow:hidden;
  background:
    radial-gradient(1000px 500px at 78% -10%, #dbe6ff 0%, transparent 60%),
    linear-gradient(180deg,#fbfcfe 0%, #ffffff 100%);
}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; background:var(--brand-soft);
  color:var(--brand); font-weight:700; font-size:13.5px; padding:8px 16px; border-radius:999px;
}
.hero h1{
  font-size:clamp(34px, 5.4vw, 62px); line-height:1.18; letter-spacing:-.035em;
  font-weight:800; margin:22px 0 20px; white-space:pre-line;
}
.hero p{font-size:clamp(16px,1.6vw,19px); color:var(--ink-2); max-width:600px; margin:0 0 36px;}
.hero-btns{display:flex; gap:12px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:15px 30px; border-radius:999px;
  font-weight:700; font-size:16px; border:1.5px solid transparent; transition:.2s;
}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-dark); transform:translateY(-2px); box-shadow:0 10px 26px rgba(26,86,219,.28);}
.btn-ghost{border-color:var(--line); background:#fff; color:var(--ink);}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand);}
/* ── 첫 화면 대표 이미지 위치 ──
   관리자 → 메인 화면 → [이미지 위치] 에서 고른다.
   이미지가 있을 때만 .hero 에 hp-bg / hp-right / hp-left / hp-below 중 하나가 붙는다. */
.hero-text{position:relative; z-index:1;}
.hero-visual img{width:100%; height:100%; object-fit:cover;}

/* ① 상단 전체 배경 — 글자가 이미지 위에 얹힌다 */
.hero.hp-bg{display:flex; align-items:center; min-height:min(72vh, 620px); padding:130px 0 140px;}
.hero.hp-bg > .wrap{width:100%;}
.hp-bg .hero-text{max-width:720px;}
.hp-bg .hero-visual{position:absolute; inset:0; z-index:0;}
.hp-bg .hero-visual::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(8,12,20,.80) 0%, rgba(8,12,20,.62) 42%, rgba(8,12,20,.28) 100%);
}
.hp-bg h1{color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.32);}
.hp-bg p{color:rgba(255,255,255,.92);}
.hp-bg .hero-badge{background:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(6px);}
.hp-bg .btn-ghost{border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12); color:#fff;}
.hp-bg .btn-ghost:hover{background:#fff; border-color:#fff; color:var(--ink);}

/* ②③ 좌·우 카드 — 콘텐츠 폭(--max) 안에서 문구와 2단으로 나란히.
   화면 끝에 붙이지 않아 사진이 잘리지 않는다. 좁은 화면에서는 문구 아래로 내려간다. */
.hp-right > .wrap,
.hp-left > .wrap{display:flex; align-items:center; gap:48px;}
.hp-left > .wrap{flex-direction:row-reverse;}   /* 사진이 왼쪽, 문구가 오른쪽 */
.hp-right .hero-text,
.hp-left .hero-text{flex:1 1 auto; min-width:0;}
.hp-right .hero-visual,
.hp-left .hero-visual{
  flex:0 0 50%; max-width:640px; aspect-ratio:4/3; border-radius:24px;
  background:linear-gradient(140deg,#c7d7fb,#eef3ff 60%,#dfe7f7);
  box-shadow:var(--shadow-lg); overflow:hidden;
}

/* ④ 문구 아래 가로 전체 */
.hp-below .hero-visual{
  margin-top:52px; width:100%; aspect-ratio:21/9; border-radius:24px;
  background:linear-gradient(140deg,#c7d7fb,#eef3ff 60%,#dfe7f7);
  box-shadow:var(--shadow-lg); overflow:hidden;
}

/* ───────── 공통 섹션 ───────── */
section{padding:96px 0;}
.sec-soft{background:var(--bg-soft);}
.sec-head{max-width:660px; margin-bottom:52px;}
.sec-head .eyebrow{
  color:var(--brand); font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
}
.sec-head h2{font-size:clamp(26px,3.4vw,40px); letter-spacing:-.03em; font-weight:800; margin:12px 0 14px; line-height:1.25;}
.sec-head p{color:var(--ink-2); margin:0; font-size:17px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ───────── 숫자 지표 ───────── */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 24px; text-align:center;}
.stat .v{font-size:40px; font-weight:800; letter-spacing:-.03em; color:var(--brand); line-height:1.1;}
.stat .v small{font-size:18px; margin-left:3px;}
.stat .l{color:var(--ink-2); font-size:14.5px; margin-top:8px;}

/* ───────── 카드 그리드 ───────── */
.grid{display:grid; gap:24px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; transition:.24s;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#d7dde8;}
.card .ico{
  width:52px; height:52px; border-radius:14px; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px;
}
.card h3{font-size:19px; font-weight:800; margin:0 0 10px; letter-spacing:-.02em;}
.card p{color:var(--ink-2); margin:0; font-size:15.3px;}
.card-img{
  aspect-ratio:4/3; border-radius:12px; overflow:hidden; margin-bottom:18px;
  background:linear-gradient(135deg,#e8edf6,#f6f8fc); display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); font-size:13px;
}
.card-img img{width:100%; height:100%; object-fit:cover;}
.card.tight{padding:20px;}

/* ───────── 서브 페이지 ───────── */
.page-hero{
  background:linear-gradient(140deg,#141922,#1f2937 55%,#243044); color:#fff;
  padding:74px 0 62px; position:relative; overflow:hidden;
}
.page-hero::after{
  content:''; position:absolute; right:-120px; top:-120px; width:420px; height:420px;
  border-radius:50%; background:rgba(26,86,219,.28); filter:blur(20px);
}
.page-hero h1{font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-.03em; margin:10px 0 12px;}
.page-hero p{color:#b9c2d0; margin:0; font-size:17px;}
.crumb{font-size:13.5px; color:#93a0b4; display:flex; gap:8px; align-items:center;}

.tabs{display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding:22px 0 0; margin-bottom:52px;}
.tabs a{
  padding:13px 24px; font-weight:700; font-size:15.5px; color:var(--ink-3);
  border-bottom:3px solid transparent; margin-bottom:-1px;
}
.tabs a:hover{color:var(--ink);}
.tabs a.on{color:var(--brand); border-bottom-color:var(--brand);}

.block{margin-bottom:64px;}
.block h2{font-size:26px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px;}
.block .bar{width:44px; height:3px; background:var(--brand); border-radius:2px; margin-bottom:24px;}
.block .body{white-space:pre-line; color:var(--ink-2); font-size:16.5px;}
.block .thumb{margin-top:24px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);}
/* 이미지 위치 — 좌/우 배치용 2단 */
.block .split{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.block .split .thumb{margin-top:0;}
.block .split .body{margin-top:2px;}
/* 본문 위(above)일 때는 위쪽 여백 제거 */
.block > .thumb:first-of-type{margin-top:0;}
.block .thumb.wide img{width:100%;}

/* 지도 */
.map-wrap{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff;}
.map{width:100%; height:420px; background:var(--bg-soft);}
.map iframe{width:100%; height:100%; border:0; display:block;}

/* 퍼가기 코드는 고정 크기(예: 450×350)로 만들어진다.
   높이를 강제하면 빈 공간이 생기므로 내용 크기에 맞추고 가운데로 모은다. */
.map.embed{height:auto; min-height:0; display:flex; justify-content:center; background:#fff; padding:0;}
.map.embed > *{max-width:100%;}
/* 가로 폭 채우기 옵션 — 퍼가기 지도를 컨테이너 폭에 맞춘다 */
.map.embed.fill, .map.embed.fill .root_daum_roughmap{width:100% !important;}
.map.embed.fill .root_daum_roughmap .wrap_map{width:100% !important;}
.map.embed.fill iframe{width:100% !important;}
.map-empty{display:flex; align-items:center; justify-content:center; text-align:center; color:var(--ink-3);}
.map-empty .ic{font-size:38px; margin-bottom:10px;}
.map-empty p{margin:0; font-size:15px;}
.map-empty .sub{font-size:13px; margin-top:8px; color:var(--ink-3);}
.map-info{padding:20px 22px; border-top:1px solid var(--line);}
.map-info .addr{font-weight:700; font-size:16.5px; margin-bottom:14px;}
.map-links{display:flex; gap:9px; flex-wrap:wrap;}
.map-links .btn{padding:11px 20px; font-size:14.5px;}

/* ───────── 연혁 ─────────
   관리자 → 페이지 내용 → 연혁 블록의 [연혁 스타일] 에서 고른다.
   .timeline 에 tl-line / tl-center / tl-card / tl-plain 중 하나가 붙는다.   */
.timeline{position:relative;}
.tl .y{font-weight:800; color:var(--brand); font-size:17px;}
.tl .t{color:var(--ink-2); margin-top:2px;}

/* ① 세로선 — 기본 */
.tl-line{padding-left:28px;}
.tl-line::before{content:''; position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:var(--line);}
.tl-line .tl{position:relative; padding-bottom:28px;}
.tl-line .tl:last-child{padding-bottom:0;}
.tl-line .tl::before{
  content:''; position:absolute; left:-28px; top:9px; width:12px; height:12px; border-radius:50%;
  background:#fff; border:3px solid var(--brand);
}

/* ② 좌우 교차 — 가운데 선을 두고 번갈아 배치 */
.tl-center::before{
  content:''; position:absolute; left:50%; margin-left:-1px; top:8px; bottom:8px; width:2px; background:var(--line);
}
.tl-center .tl{position:relative; width:50%; padding:0 34px 32px 0; text-align:right;}
.tl-center .tl::before{
  content:''; position:absolute; right:-9px; top:9px; width:12px; height:12px; border-radius:50%;
  background:#fff; border:3px solid var(--brand);
}
.tl-center .tl:nth-child(even){margin-left:50%; padding:0 0 32px 34px; text-align:left;}
.tl-center .tl:nth-child(even)::before{right:auto; left:-9px;}

/* ③ 카드 — 연도 뱃지 + 카드 한 장씩 */
.tl-card{display:grid; gap:12px;}
.tl-card .tl{
  display:flex; gap:18px; align-items:flex-start;
  padding:18px 22px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius);
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tl-card .tl:hover{background:#fff; box-shadow:var(--shadow); transform:translateY(-2px);}
.tl-card .tl .y{
  flex:0 0 auto; min-width:76px; text-align:center; font-size:15px;
  padding:4px 14px; border-radius:999px; background:var(--brand-soft);
}
.tl-card .tl .t{flex:1; margin-top:4px;}

/* ④ 간결한 목록 — 선·점 없이 연도 / 내용 두 칸 */
.tl-plain .tl{
  display:flex; gap:26px; align-items:baseline;
  padding:16px 2px; border-bottom:1px solid var(--line);
}
.tl-plain .tl:first-child{border-top:1px solid var(--line);}
.tl-plain .tl .y{flex:0 0 92px; font-size:16px;}
.tl-plain .tl .t{flex:1; margin-top:0;}

/* 표 */
table.tbl{width:100%; border-collapse:collapse; font-size:15px;}
table.tbl th{background:var(--bg-soft); font-weight:800; font-size:14px; padding:14px 16px; border-bottom:2px solid var(--line); text-align:left;}
table.tbl td{padding:14px 16px; border-bottom:1px solid var(--line); color:var(--ink-2);}
table.tbl tr:hover td{background:#fafbfd;}

/* ───────── 갤러리 ───────── */
.filters{display:flex; gap:8px; margin-bottom:32px; flex-wrap:wrap;}
.chip{
  padding:9px 20px; border-radius:999px; border:1.4px solid var(--line); background:#fff;
  font-weight:700; font-size:14.5px; color:var(--ink-2);
}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink);}

/* ───────── 게시판 ───────── */
.list{border-top:2px solid var(--ink);}
.list .row{
  display:flex; gap:18px; align-items:center; padding:20px 8px;
  border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s;
}
.list .row:hover{background:var(--bg-soft);}
.list .row .no{width:52px; color:var(--ink-3); font-size:14px; text-align:center; flex:none;}
.list .row .ti{flex:1; font-weight:600;}
.list .row .dt{color:var(--ink-3); font-size:14px; flex:none;}
.pin{background:var(--brand); color:#fff; font-size:11px; font-weight:800; border-radius:4px; padding:2px 7px; margin-right:8px;}
.detail{border-top:2px solid var(--ink); padding:28px 8px; display:none;}
.detail.on{display:block;}
.detail h3{margin:0 0 6px; font-size:21px;}
.detail .meta{color:var(--ink-3); font-size:14px; margin-bottom:20px;}
.detail .cont{white-space:pre-line; color:var(--ink-2);}

/* ───────── 폼 ───────── */
.form{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px;}
.field{margin-bottom:20px;}
.field label{display:block; font-weight:700; font-size:14.5px; margin-bottom:8px;}
.field label .req{color:#dc2626; margin-left:3px;}
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:10px;
  font-size:15.5px; outline:none; transition:.15s; background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 4px rgba(26,86,219,.1);
}
.field textarea{min-height:150px; resize:vertical; line-height:1.7;}
.two{display:grid; grid-template-columns:1fr 1fr; gap:20px;}

/* ───────── CTA · 푸터 ───────── */
.cta{background:linear-gradient(120deg,#12203c,#1a56db 120%); color:#fff; text-align:center; padding:88px 0;}
.cta h2{font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-.03em; margin:0 0 14px;}
.cta p{color:#c3d2f2; margin:0 0 30px; font-size:17px;}
.cta .btn-primary{background:#fff; color:var(--brand);}
.cta .btn-primary:hover{background:#eef3ff;}

footer{background:var(--bg-dark); color:#98a1af; padding:60px 0 40px; font-size:14.5px;}
.f-top{display:flex; gap:60px; flex-wrap:wrap; padding-bottom:32px; border-bottom:1px solid #232a35;}
.f-logo{color:#fff; font-weight:800; font-size:20px; margin-bottom:12px; display:flex; align-items:center; gap:9px;}
/* 어두운 배경이라 단색 마크를 흰색으로 반전시킨다 */
.f-logo .mark{height:26px; width:auto; flex:none; filter:brightness(0) invert(1);}
.f-info div{margin-bottom:5px;}
.f-menu{display:flex; gap:50px; margin-left:auto; flex-wrap:wrap;}
.f-menu h4{color:#fff; font-size:14.5px; margin:0 0 12px;}
.f-menu a{display:block; padding:4px 0; color:#98a1af;}
.f-menu a:hover{color:#fff;}
.f-bot{padding-top:24px; font-size:13.5px; color:#6b7482;}

/* ───────── 스크롤 등장 ───────── */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

/* ───────── 반응형 ───────── */
@media (max-width:1024px){
  .g4{grid-template-columns:repeat(2,1fr);}
  .g3{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);}
  /* 좌·우 카드는 폭이 좁으면 2단이 답답해져 문구 아래 가로 배치로 바꾼다 */
  .hp-right > .wrap,
  .hp-left > .wrap{flex-direction:column; align-items:stretch; gap:0;}
  .hp-right .hero-visual,
  .hp-left .hero-visual{
    flex:none; width:100%; max-width:none;
    margin-top:44px; aspect-ratio:16/9;
  }
}
@media (max-width:768px){
  section{padding:64px 0;}
  .hero{padding:70px 0 78px;}
  .hero.hp-bg{padding:88px 0 96px; min-height:auto;}
  .hp-bg .hero-visual::after{
    background:linear-gradient(180deg, rgba(8,12,20,.52) 0%, rgba(8,12,20,.78) 100%);
  }
  .hp-below .hero-visual{margin-top:36px; aspect-ratio:16/9;}
  .hp-right .hero-visual,
  .hp-left .hero-visual{margin-top:36px;}
  .burger{display:block;}
  .logo{font-size:18px; gap:8px;}
  .logo .mark{height:27px;}
  .logo .en{display:none;}      /* 좁은 화면에서는 영문 표기를 접는다 */
  .gnb{
    display:none; position:absolute; top:var(--header-h); left:0; right:0; background:#fff;
    flex-direction:column; padding:12px; border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);
  }
  .gnb.open{display:flex;}
  .gnb > li > a{line-height:2.6; padding:0 12px;}
  .sub{position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:0; padding:0 0 8px 12px; min-width:0;}
  .nav-cta{display:none;}
  .g2,.g3,.g4{grid-template-columns:1fr;}
  .two{grid-template-columns:1fr;}
  .block .split{grid-template-columns:1fr; gap:22px;}
  .block .split .col-img{order:2;}   /* 모바일에서는 글 먼저, 이미지 아래 */
  /* 연혁 — 좁은 화면에서는 좌우 교차를 세로선 한 줄로 */
  .tl-center{padding-left:28px;}
  .tl-center::before{left:6px; margin-left:0;}
  .tl-center .tl,
  .tl-center .tl:nth-child(even){width:auto; margin-left:0; padding:0 0 26px 0; text-align:left;}
  .tl-center .tl::before,
  .tl-center .tl:nth-child(even)::before{left:-28px; right:auto;}
  .tl-card .tl{flex-direction:column; gap:8px; padding:16px 18px;}
  .tl-card .tl .y{min-width:0;}
  .tl-plain .tl{display:block; padding:14px 2px;}
  .tl-plain .tl .t{margin-top:2px;}
  .f-menu{gap:28px;}
  .topbar{display:none;}
}