/* === 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 === */
.hero {
  padding:120px 0 96px;
  background:linear-gradient(180deg, var(--c-soft) 0%, #ffffff 100%);
}
.hero-grid {
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
}
.hero h1 {
  font-size:54px; line-height:1.1; margin:0 0 24px; font-weight:800;
  letter-spacing:-.01em;
}
.hero h1 .accent { color:var(--c-accent) }
.hero p.kicker {
  font-family:var(--font-en); color:var(--c-accent-2);
  letter-spacing:.3em; text-transform:uppercase; font-size:13px; margin:0 0 16px;
}
.hero-cta { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap }
.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 }
.hero-photo {
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:4/5; background:#ddd;
}
.hero-photo img { width:100%; height:100%; object-fit:cover }
.hero-photo--placeholder {
  background:linear-gradient(135deg, var(--c-accent) 0%, #1f3f74 55%, var(--c-accent-2) 100%);
  position:relative;
}
.hero-photo--placeholder::after {
  content:'PHOTO'; position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--font-en); letter-spacing:.3em;
  color:rgba(255,255,255,.55); font-size:13px; font-weight:700;
}

/* === 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) {
  .hero-grid, .two-col, .contact-grid { grid-template-columns:1fr; gap:36px }
  .card-grid, .projects-grid, .gallery { grid-template-columns:repeat(2, 1fr) }
  .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: 560px) {
  .card-grid, .projects-grid, .gallery { grid-template-columns:1fr }
  .hero { padding:72px 0 56px }
  .hero h1 { font-size:32px }
}