/* === Tokens === */
:root {
  --c-bg:#ffffff;
  --c-fg:#16181d;
  --c-muted:#5e6470;
  --c-line:#e6e8ec;
  --c-accent:#0f2e5e;
  --c-accent-2:#c79c47;
  --c-soft:#f6f7f9;
  --max:1180px;
  --radius:6px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --t-h:64px;
  --font-ko:"Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-en:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing:border-box }
html,body { margin:0; padding:0 }
body {
  font-family:var(--font-ko);
  color:var(--c-fg);
  background:var(--c-bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block }
a { color:inherit; text-decoration:none }
.container { width:100%; max-width:var(--max); margin:0 auto; padding:0 24px }

/* === Header === */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--c-line);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:var(--t-h);
}
.brand img { height:36px; width:auto }
.brand-text {
  font-family:var(--font-en); font-weight:800; font-size:20px; letter-spacing:.02em;
  color:var(--c-accent);
}
.primary-nav ul {
  display:flex; gap:28px; list-style:none; margin:0; padding:0;
}
.primary-nav a {
  font-size:14px; font-weight:500; color:var(--c-fg);
  padding:8px 2px; border-bottom:2px solid transparent; transition:border-color .15s;
}
.primary-nav a:hover { border-color:var(--c-accent) }
.nav-toggle {
  display:none; background:none; border:0; width:40px; height:40px; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; align-items:center;
}
.nav-toggle span {
  display:block; width:22px; height:2px; background:var(--c-fg); border-radius:2px;
  transition:transform .2s, opacity .2s;
}

/* === Sections === */
section.section { padding:96px 0; border-bottom:1px solid var(--c-line) }
section.section:last-of-type { border-bottom:0 }
.section-num {
  font-family:var(--font-en); font-size:14px; color:var(--c-accent-2); letter-spacing:.2em;
  text-transform:uppercase; margin-bottom:8px;
}
.section-title {
  font-size:34px; line-height:1.2; font-weight:700; margin:0 0 36px;
}
.section-lead {
  font-size:17px; color:var(--c-muted); max-width:680px;
}

/* === Hero — full-bleed slideshow === */
.hero {
  position:relative;
  height:clamp(480px, 70vh, 680px);
  overflow:hidden;
  background:#0b0f1a;
}

/* Slideshow backdrop */
.hero-slideshow { position:absolute; inset:0; }
.hero-slide {
  position:absolute; inset:0;
  opacity:0; transition:opacity .8s ease; z-index:0;
}
.hero-slide.active { opacity:1; z-index:1; }
.hero-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-slide--empty {
  background:linear-gradient(135deg, var(--c-accent) 0%, #1f3f74 55%, var(--c-accent-2) 100%);
}

/* Gradient overlay — darker on left for text readability */
.hero-overlay {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(
    to right,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.42) 50%,
    rgba(0,0,0,.12) 100%
  );
}

/* Text content */
.hero-content {
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center;
}
.hero-content .container { max-width:1280px; }

.hero h1 {
  font-size:52px; line-height:1.1; margin:0 0 18px; font-weight:800;
  letter-spacing:-.01em; color:#fff; max-width:560px;
}
.hero h1 .accent { color:var(--c-accent-2); }
.hero p.kicker {
  font-family:var(--font-en); color:var(--c-accent-2);
  letter-spacing:.3em; text-transform:uppercase; font-size:12px; margin:0 0 16px;
}
.hero-lead { color:rgba(255,255,255,.8); font-size:16px; max-width:480px; margin:0 0 28px; line-height:1.6; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; }

/* Ghost button on dark bg */
.btn-ghost-light {
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:var(--radius);
  font-weight:600; font-size:15px; cursor:pointer;
  border:1px solid rgba(255,255,255,.55); color:#fff; background:transparent;
  transition:background .15s;
}
.btn-ghost-light:hover { background:rgba(255,255,255,.15); }

/* Slide arrows */
.slide-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
  color:#fff; border-radius:50%; width:46px; height:46px;
  font-size:26px; line-height:1; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.slide-arrow:hover { background:rgba(255,255,255,.32); }
.slide-prev { left:20px; }
.slide-next { right:20px; }

/* Dots */
.slide-dots {
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:4;
}
.slide-dot {
  width:8px; height:8px; border-radius:50%; padding:0;
  background:rgba(255,255,255,.4); border:none; cursor:pointer;
  transition:background .2s, transform .2s;
}
.slide-dot.active { background:#fff; transform:scale(1.35); }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:var(--radius);
  font-weight:600; font-size:15px; transition:transform .1s, box-shadow .15s, background .15s;
  border:1px solid transparent; cursor:pointer; background:transparent; color:inherit;
}
.btn-primary { background:var(--c-accent); color:#fff }
.btn-primary:hover { background:#0a234a }
.btn-ghost { border-color:var(--c-fg); color:var(--c-fg) }
.btn-ghost:hover { background:var(--c-fg); color:#fff }

/* === Image placeholders (사진 자리 임시) === */
.img-placeholder {
  border-radius:var(--radius); box-shadow:var(--shadow);
  background:linear-gradient(135deg, #eef1f6 0%, #d6dde7 100%);
  position:relative; overflow:hidden; aspect-ratio:4/3;
}
.img-placeholder::after {
  content:'PHOTO'; position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--font-en); letter-spacing:.3em;
  color:rgba(15,46,94,.35); font-size:13px; font-weight:700;
}
.img-placeholder--about {
  background:linear-gradient(135deg, #eef1f6 0%, #c8d2e0 100%);
}
.img-placeholder--welcome {
  background:linear-gradient(135deg, #f4e7cc 0%, #d8b97a 100%);
}
.img-placeholder--welcome::after { color:rgba(99,67,18,.55); }

/* === About / Welcome === */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center }
.two-col img { border-radius:var(--radius); box-shadow:var(--shadow) }
.body-text p { font-size:16px; color:var(--c-fg); margin:0 0 14px }

/* === Business / Services grid === */
.card-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px }
.card {
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  padding:28px; transition:transform .15s, box-shadow .15s;
}
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow) }
.card h3 { font-size:18px; margin:0 0 8px }
.card p  { color:var(--c-muted); font-size:15px; margin:0 }
.card .icon {
  width:40px; height:40px; border-radius:8px; background:var(--c-soft);
  display:flex; align-items:center; justify-content:center; color:var(--c-accent);
  font-weight:800; margin-bottom:16px;
}

/* === Projects === */
.projects-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px }
.project-card {
  border-radius:var(--radius); overflow:hidden; background:#fff;
  border:1px solid var(--c-line);
}
.project-card .ph { aspect-ratio:4/3; background:#eaecef; overflow:hidden; position:relative }
.project-card .ph img { width:100%; height:100%; object-fit:cover; transition:transform .3s }
.project-card:hover .ph img { transform:scale(1.03) }
.project-card .ph--empty {
  background:linear-gradient(135deg, #eef1f6 0%, #c8d2e0 100%);
}
.project-card .ph--empty::after {
  content:'PROJECT'; position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--font-en); letter-spacing:.3em;
  color:rgba(15,46,94,.35); font-size:12px; font-weight:700;
}
.project-card .body { padding:18px 18px 22px }
.project-card h3 { font-size:17px; margin:0 0 6px }
.project-card .meta { color:var(--c-muted); font-size:13px }

/* === Project detail === */
.project-detail h1 { font-size:38px; margin:0 0 8px }
.project-detail .meta-bar { color:var(--c-muted); font-size:14px; margin-bottom:32px }
.gallery {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:24px 0;
}
.gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); cursor:zoom-in }

/* === Contact === */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px }
.contact-info dt { font-weight:600; color:var(--c-muted); font-size:13px; text-transform:uppercase; letter-spacing:.1em; margin-top:18px }
.contact-info dd { margin:4px 0 0; font-size:17px }

/* === Footer === */
.site-footer {
  background:#0b0f1a; color:#cfd4dc; padding:48px 0 32px; margin-top:64px;
}
.footer-inner {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:start;
}
.footer-brand strong { font-size:18px; color:#fff; display:block; margin-bottom:6px }
.footer-meta { text-align:right; color:#7a8497 }

/* === Lightbox === */
.lightbox {
  position:fixed; inset:0; background:rgba(10,12,18,.9); z-index:100;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.lightbox.on { opacity:1; pointer-events:auto }
.lightbox img { max-width:92vw; max-height:90vh; object-fit:contain }
.lightbox .close {
  position:absolute; top:24px; right:24px; color:#fff; font-size:24px;
  background:transparent; border:0; cursor:pointer;
}

/* === Responsive === */
@media (max-width: 900px) {
  .two-col, .contact-grid { grid-template-columns:1fr; gap:36px }
  .card-grid, .projects-grid, .gallery { grid-template-columns:repeat(2, 1fr) }
  .hero { height:clamp(400px, 62vh, 560px); }
  .hero h1 { font-size:38px; }
  .section-title { font-size:26px }
  section.section { padding:64px 0 }
  .footer-inner { grid-template-columns:1fr; text-align:left }
  .footer-meta { text-align:left }
  .nav-toggle { display:flex }
  .primary-nav {
    position:absolute; left:0; right:0; top:var(--t-h);
    background:#fff; border-bottom:1px solid var(--c-line);
    display:none;
  }
  .primary-nav.open { display:block }
  .primary-nav ul { flex-direction:column; gap:0; padding:8px 24px 16px }
  .primary-nav li { border-bottom:1px solid var(--c-line) }
  .primary-nav li:last-child { border-bottom:0 }
  .primary-nav a { display:block; padding:14px 0 }
}
@media (max-width: 600px) {
  .card-grid, .projects-grid, .gallery { grid-template-columns:1fr }
  .hero {
    height:clamp(360px, 65vh, 520px);
    /* 모바일: 그라디언트를 아래에서 위로, 텍스트를 하단 정렬 */
  }
  .hero-overlay {
    background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.1) 100%);
  }
  .hero-content { align-items:flex-end; padding-bottom:48px; }
  .hero h1 { font-size:30px; max-width:none; }
  .hero-lead { display:none; }
  .slide-arrow { width:36px; height:36px; font-size:20px; }
}