:root { --navy:#16246B; --teal:#12B5A6; --teal-text:#0B8276; --gray:#5A6075; --bg:#F4F5F8; --line:#E3E6EE; }
* { box-sizing:border-box; }
body { margin:0; font-family:Pretendard, "Apple SD Gothic Neo", sans-serif; color:#1d1f2b; line-height:1.65; word-break:keep-all; }
a { color:var(--teal-text); text-decoration:none; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }

/* 상단 메뉴 */
.top { position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line); z-index:10; }
.top .wrap { display:flex; align-items:center; justify-content:space-between; height:68px; }
.top img { height:34px; display:block; }
.top nav { display:flex; gap:28px; font-size:15px; font-weight:600; }
.top nav a { color:var(--navy); }
.top nav a.en { color:var(--gray); font-weight:500; }

/* 첫 화면 */
.hero { background:var(--navy); color:#fff; padding:88px 0 96px; }
.hero img { width:min(380px, 80%); display:block; margin-bottom:40px; }
.hero h1 { font-size:clamp(28px, 4.4vw, 44px); line-height:1.3; margin:0 0 18px; font-weight:800; }
.hero p { font-size:18px; color:#C9CFE8; margin:0 0 36px; max-width:560px; }
.btn { display:inline-block; padding:14px 26px; border-radius:10px; font-weight:700; font-size:16px; }
.btn.main { background:var(--teal); color:var(--navy); }
.btn.line { border:1.5px solid #6c78b5; color:#fff; margin-left:10px; }

/* 신뢰 띠 */
.trust { background:var(--bg); }
.trust .wrap { display:flex; flex-wrap:wrap; }
.trust .wrap > div { flex:1 1 200px; padding:28px 0; }
.trust b { display:block; font-size:28px; color:var(--navy); font-weight:800; }
.trust span { color:var(--gray); font-size:14px; }

section { padding:88px 0; }
h2 { font-size:30px; color:var(--navy); margin:0 0 10px; font-weight:800; }
.lead { color:var(--gray); font-size:17px; margin:0 0 40px; }

/* 사업 */
.groups { display:grid; grid-template-columns:1fr 1.4fr; gap:20px; }
.minis { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.group { border:1px solid var(--line); border-radius:16px; padding:26px 26px 22px; }
.group h3 { margin:0 0 14px; font-size:14px; color:var(--gray); font-weight:600; }
.svc { padding:14px 0; border-top:1px solid var(--line); }
.svc:first-of-type { border-top:0; padding-top:0; }
.svc b { font-size:18px; color:var(--navy); }
.svc p { margin:4px 0 6px; color:var(--gray); font-size:15px; }
.svc a { font-size:14px; font-weight:600; }
.svc .soon { white-space:nowrap; display:inline-block; font-size:13px; color:var(--gray); background:var(--bg); padding:2px 8px; border-radius:6px; margin-left:6px; font-weight:500; }

/* 개발 */
.dev { background:var(--bg); }
.dev-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start; }
.dev ul { list-style:none; padding:0; margin:0; }
.dev li { background:#fff; border-radius:12px; padding:16px 20px; margin-bottom:10px; font-weight:600; color:var(--navy); }
.dev li span { display:block; font-weight:400; color:var(--gray); font-size:14px; }
.steps { counter-reset:s; }
.steps div { counter-increment:s; display:flex; gap:14px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.steps div::before { content:counter(s); width:28px; height:28px; border-radius:50%; background:var(--navy); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
.dev .note { margin:22px 0 26px; font-size:16px; }
.btn.navy { background:var(--navy); color:#fff; }

/* 회사 이야기 */
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.story p { margin:0 0 14px; font-size:16px; }
.values div { padding:18px 0; border-top:1px solid var(--line); }
.values b { color:var(--navy); font-size:18px; }
.values p { margin:4px 0 0; color:var(--gray); font-size:15px; }

/* 문의 띠 */
.cta { background:var(--navy); color:#fff; padding:64px 0; }
.cta .wrap { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.cta h2 { color:#fff; margin:0 0 6px; }
.cta p { margin:0; color:#C9CFE8; }

/* 바닥글 */
footer { background:#0F1A52; color:#AEB5D6; font-size:13px; padding:44px 0 56px; }
footer img { height:28px; margin-bottom:18px; }
footer .links { margin-bottom:16px; display:flex; gap:18px; flex-wrap:wrap; }
footer .links a { color:#fff; font-weight:600; }
footer p { margin:2px 0; }

@media (max-width:760px) {
  .top nav a:not(.en):not(.cta-link) { display:none; }
  .hero { padding:56px 0 64px; }
  .btn.line { margin:10px 0 0; }
  .dev-grid, .story-grid, .groups, .minis { grid-template-columns:1fr; gap:28px; }
  section { padding:60px 0; }
}

/* ===== 하위 페이지 공통 ===== */
.page-hero { background:var(--navy); color:#fff; padding:64px 0 60px; }
.page-hero h1 { font-size:clamp(28px, 4vw, 40px); margin:0 0 10px; font-weight:800; }
.page-hero p { margin:0; color:#C9CFE8; font-size:17px; }
.top nav a.on { color:var(--teal-text); }
.narrow > * { max-width:820px; }
.alt { background:var(--bg); }

/* 회사 소개 */
.meaning { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.meaning div { border:1px solid var(--line); border-radius:14px; padding:22px; background:#fff; }
.meaning b { color:var(--navy); font-size:17px; display:block; margin-bottom:6px; }
.meaning p { margin:0; color:var(--gray); font-size:15px; }
.meaning svg { display:block; margin-bottom:12px; }
.timeline { border-left:2px solid var(--line); margin-left:8px; padding-left:28px; }
.timeline div { position:relative; padding-bottom:28px; }
.timeline div::before { content:""; position:absolute; left:-36px; top:6px; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--navy); }
.timeline div.now::before { background:var(--teal); border-color:var(--teal); }
.timeline .y { font-weight:800; color:var(--navy); font-size:18px; }
.timeline .y.tbd { color:#B04A4A; font-size:14px; font-weight:600; }
.timeline p { margin:2px 0 0; color:var(--gray); }
.info { width:100%; border-collapse:collapse; font-size:15px; background:#fff; border-radius:14px; overflow:hidden; }
.info th, .info td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); }
.info th { width:150px; color:var(--gray); font-weight:600; }

/* 문의 */
.contact-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:start; }
form .row { margin-bottom:18px; }
form label.t { display:block; font-weight:700; color:var(--navy); margin-bottom:6px; font-size:15px; }
form label.t small { color:var(--gray); font-weight:400; }
form input[type=text], form input[type=email], form input[type=tel], form select, form textarea { width:100%; padding:12px 14px; border:1px solid #C9CDD9; border-radius:10px; font:inherit; font-size:16px; background:#fff; }
form textarea { min-height:160px; resize:vertical; }
form input:focus, form select:focus, form textarea:focus { outline:2px solid var(--teal-text); border-color:transparent; }
.types { display:flex; gap:10px; flex-wrap:wrap; }
.types label { flex:1 1 140px; border:1.5px solid #C9CDD9; border-radius:10px; padding:14px; cursor:pointer; text-align:center; font-weight:600; color:var(--navy); }
.types input { display:none; }
.types label:has(input:checked) { border-color:var(--navy); background:var(--navy); color:#fff; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.agree { font-size:14px; color:var(--gray); display:flex; gap:8px; align-items:flex-start; }
.side { background:var(--bg); border-radius:16px; padding:26px; }
.side h3 { margin:0 0 12px; color:var(--navy); font-size:17px; }
.side p { margin:0 0 14px; font-size:15px; }
.side .k { display:block; color:var(--gray); font-size:13px; }
.privacy { font-size:14px; color:var(--gray); }
.privacy h2 { font-size:20px; }
.privacy table { width:100%; border-collapse:collapse; margin:10px 0 18px; }
.privacy th, .privacy td { border:1px solid var(--line); padding:8px 10px; text-align:left; }
.privacy th { background:var(--bg); color:var(--navy); }
button.btn { border:0; cursor:pointer; font:inherit; font-weight:700; }

/* 영문 */
.biz-en { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
.biz-en div { border:1px solid var(--line); border-radius:14px; padding:22px; background:#fff; }
.biz-en small { color:var(--gray); font-size:13px; font-weight:600; }
.biz-en b { display:block; color:var(--navy); font-size:18px; margin:4px 0 6px; }
.biz-en p { margin:0 0 8px; color:var(--gray); font-size:15px; }

@media (max-width:760px) {
  .meaning, .contact-grid, .two { grid-template-columns:1fr; }
}
.meaning.four { grid-template-columns:repeat(2, 1fr); }
@media (max-width:760px) { .meaning.four { grid-template-columns:1fr; } }

/* 첫 화면 오른쪽: 큰 아치(문) 안에 사업 팻말 — 문 높이는 팻말 수에 맞춰 늘어남 */
.hero-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:40px; align-items:center; }
.hero-visual { width:100%; max-width:340px; justify-self:end; border:30px solid #24358C; border-bottom:0; border-radius:999px 999px 0 0; padding:72px 20px 24px; }
.doors { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.doors li { background:#1F2E80; border:1px solid #2F3F96; color:#fff; border-radius:10px; padding:10px 14px; font-size:15px; font-weight:600; display:flex; align-items:center; gap:10px; }
.doors i { width:9px; height:9px; border-radius:50%; background:var(--teal); flex:none; }
.doors li.soon { color:#AEB5D6; font-weight:500; font-size:14px; }
.doors li.soon i { background:none; border:2px solid var(--teal); }
@media (max-width:900px) { .hero-grid { grid-template-columns:1fr; } .hero-visual { display:none; } }

/* 첫 화면 여백: 문이 바닥에 서 있게 */
@media (min-width:901px) {
  .hero { padding:48px 0 0; }
  .hero-grid { align-items:end; }
  .hero-grid > div:first-child { padding-bottom:56px; }
  .hero img { margin-bottom:32px; }
}

/* 실제 사이트용 추가 */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-errors { background:#FDECEC; border:1px solid #F5C2C2; color:#9B2C2C; border-radius:10px; padding:10px 14px; margin-bottom:18px; font-size:14px; }
.form-errors p { margin:2px 0; }
.sent-box { background:var(--bg); border-radius:16px; padding:36px 30px; }
.sent-box h2 { margin:0 0 8px; }
.sent-box p { color:var(--gray); margin:0 0 22px; }
.privacy h2 { font-size:18px; margin:28px 0 8px; }
.privacy { font-size:15px; }
.auth-box { max-width:420px; }
.auth-box input[type=text], .auth-box input[type=password] { width:100%; padding:12px 14px; border:1px solid #C9CDD9; border-radius:10px; font:inherit; font-size:16px; }
.auth-box .row { margin-bottom:18px; }
.auth-box label.t { display:block; font-weight:700; color:var(--navy); margin-bottom:6px; font-size:15px; }
.auth-box label.t small { color:var(--gray); font-weight:400; }
.top nav form { margin:0; display:inline; }
.top nav button.linklike { background:none; border:0; padding:0; font:inherit; font-size:15px; font-weight:500; color:var(--gray); cursor:pointer; }