:root {
  --primary: #002147;
  --bg: #f8f8f8;
  --white: #fff;
}

* { box-sizing: border-box; margin:0; padding:0; }
body {
  font-family: 'Pretendard', sans-serif;
  background: var(--bg);
  color: #333;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }

/* Hero */
.contact-hero {
  height: 40vh;
  background: url('../img/567.png') center/cover no-repeat;
  display: flex; align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 60px;
}
.contact-hero .hero-content h1 {
  font-size: 48px; color: var(--white); margin-bottom: 8px;
}
.contact-hero .hero-content p {
  font-size: 18px; color: var(--white);
}

/* Inner 컨테이너 */
.inner {
  max-width: 1000px;
  margin: auto;
  padding: 60px 20px;
}

/* Contact Info Cards */
.contact-info {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.info-card {
  flex: 1 1 280px;
  background: #fff;
  padding: 24px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform .3s;
}
.info-card:hover {
  transform: translateY(-6px);
}
.info-card i {
  color: var(--primary);
  margin-bottom: 12px;
}
.info-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

/* Contact Form */
.contact-form-section .section-title {
  text-align: center;
  font-size: 32px;
  color: var(--primary);
  margin-bottom: 32px;
}
.contact-form {
  background: #fff;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.form-row input {
  flex: 1 1 240px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  margin-bottom: 20px;
}
.contact-form .btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}
.contact-form .btn:hover {
  background: #03306b;
}

/* 반응형 */
@media (max-width: 768px) {
  .contact-info {
    flex-direction: column;
    align-items: center;
  }
  .form-row {
    flex-direction: column;
  }
}
@media (max-width: 400px) {
  .contact-info div{
    width: 300px;
  }
}