:root{
      --brand:#2563eb;      /* Indigo-600 */
      --brand-2:#1d4ed8;    /* Indigo-700 */
      --accent:#10b981;     /* Emerald-500 */
      --ink:#0f172a;        /* Slate-900 */
      --muted:#475569;      /* Slate-600 */
      --bg:#ffffff;
      --card:#f8fafc;       /* Slate-50 */
      --ring: rgba(37,99,235,.35);
    }
    @media (prefers-color-scheme: dark){
      :root{
        --bg:#ffffff;
        --ink:#0f172a;
        --muted:#475569;
        --card:#f8fafc;
      }
      body{ background: var(--bg); background-image: none; }
    }
    *{ box-sizing: border-box; }
    html,body{ height:100%; }
    body{
      margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans KR, Arial, sans-serif;
      color:var(--ink); background:var(--bg);
      line-height:1.6;
    }
    a{ color:inherit; text-decoration:none; }
    .container{ max-width:1100px; margin:0 auto; padding:0 20px; }
    header{
      position:sticky; top:0; z-index:50;
      backdrop-filter: saturate(140%) blur(8px);
      background: color-mix(in oklab, var(--bg) 85%, transparent);
      border-bottom: 1px solid color-mix(in oklab, var(--muted), var(--bg) 80%);
    }
    .nav{ display:flex; align-items:center; justify-content:space-between; height:64px; }
    .brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
    .brand .logo{ width:28px; height:28px; }
    .brand span{ letter-spacing:.2px; }
    .menu{ display:flex; gap:20px; align-items:center; }
    .menu a{ color:var(--muted); font-weight:600; }
    .menu a:hover{ color:var(--ink); }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:10px 16px; border-radius:10px; border:1px solid transparent;
      font-weight:700; cursor:pointer; transition: .2s ease;
    }
    .btn.primary{ background:var(--brand); color:white; }
    .btn.primary:hover{ background:var(--brand-2); transform: translateY(-1px); }
    .btn.ghost{ border-color: color-mix(in oklab, var(--brand), var(--bg) 70%); color:var(--brand); background: color-mix(in oklab, var(--brand) 8%, transparent); }
    .btn.ghost:hover{ background: color-mix(in oklab, var(--brand) 14%, transparent); }
    .hamburger{ display:none; background:none; border:none; padding:8px; }
    .mobile{ display:none; flex-direction:column; gap:12px; padding:16px 0 24px; }
    .hero{
      padding:72px 0 40px;
    }
    .hero-grid{ display:grid; grid-template-columns: 1.25fr 1fr; gap:32px; align-items:center; }
    .eyebrow{ color:var(--brand); font-weight:800; letter-spacing:.4px; }
    h1{ font-size:44px; line-height:1.1; margin:10px 0 12px; }
    .lead{ color:var(--muted); font-size:18px; margin-bottom:22px; }
    .hero-card{
      background:var(--card); border:1px solid color-mix(in oklab, var(--ink), var(--bg) 90%);
      border-radius:16px; padding:18px; box-shadow: 0 8px 24px rgba(2,8,23,.08);
    }
    .hero-card .row{ display:flex; align-items:center; gap:14px; padding:12px; border-radius:12px; }
    .hero-card .row + .row{ margin-top:10px; }
    .hero-card .row svg{ width:26px; height:26px; flex:0 0 auto; }
    .section{ padding:60px 0; }
    .grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
    .card{ background:var(--card); border:1px solid color-mix(in oklab, var(--ink), var(--bg) 90%); border-radius:14px; padding:20px; }
    .card h3{ margin:6px 0 8px; }
    .pill{ display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 10px; font-size:12px; background: color-mix(in oklab, var(--brand) 10%, transparent); color: var(--brand-2); font-weight:800; letter-spacing:.3px; }
    .process{ display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:20px; margin-top:22px; }
    .process .step{ display:flex; flex-direction:column; align-items:center; gap:10px; }
    .process .circle{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; border:2px dashed color-mix(in oklab, var(--brand), var(--bg) 50%); }
    .process svg{ width:30px; height:30px; }
    .logos{ display:grid; grid-template-columns: repeat(6, 1fr); gap:18px; align-items:center; filter: grayscale(1) contrast(.9); opacity:.9; }
    .logos svg{ width:100%; height:auto; }
    .cta{ text-align:center; padding:64px 0; }
    form{ display:grid; gap:12px; max-width:640px; margin:0 auto; }
    input, textarea{
      width:100%; padding:12px 14px; border-radius:12px; border:1px solid color-mix(in oklab, var(--ink), var(--bg) 86%);
      background:var(--bg); color:var(--ink); font: inherit;
      outline: none; box-shadow:none;
    }
    input:focus, textarea:focus{ border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
    footer{ padding:28px 0 44px; color:var(--muted); border-top:1px solid color-mix(in oklab, var(--muted), var(--bg) 80%); }
    .foot{ display:flex; align-items:start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
    .foot small{ opacity:.9; }
    .sns{ display:flex; gap:10px; }
    .sns a{ display:inline-flex; padding:8px; border-radius:10px; border:1px solid color-mix(in oklab, var(--ink), var(--bg) 90%); }
    /* Responsive */
    @media (max-width: 900px){
      .hero-grid{ grid-template-columns: 1fr; }
      .grid-3{ grid-template-columns: 1fr; }
      .process{ grid-template-columns: repeat(4,1fr); }
      .menu{ display:none; }
      .hamburger{ display:inline-flex; }
      .mobile.show{ display:flex; }
    }
    @media (max-width: 520px){
      h1{ font-size:34px; }
      .process{ grid-template-columns: repeat(3,1fr); }
    }
    
  .photo-preview {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
  }

  .photo-preview img {
    width: 30%;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    object-fit: cover;
  }

  .flow-scroll {
  overflow-x: auto;
  padding: 10px;
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
}

.flow {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
}

.flow .step {
  padding: 10px 20px;
  background: #2563eb;
  color: white;
  border-radius: 6px;
  font-weight: bold;
}

.flow .arrow {
  margin: 0 10px;
  font-size: 1.5rem;
  color: #555;
}