:root{--bg:#f7f8fb;--panel:#fff;--text:#14161a;--muted:#626874;--line:#e4e7ec;--accent:#111827;--soft:#eef1f6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",Arial,sans-serif;line-height:1.7}.wrap{max-width:1120px;margin:0 auto;padding:0 24px}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-weight:900;font-size:22px;letter-spacing:.12em;color:var(--text);text-decoration:none}.topbar nav{display:flex;gap:22px}.topbar nav a,.footer-links a,footer a{color:var(--muted);text-decoration:none}.topbar nav a:hover,.footer-links a:hover,footer a:hover{color:var(--text)}.hero{padding:110px 0 96px;max-width:900px}.eyebrow,.kicker{font-size:12px;font-weight:800;letter-spacing:.18em;color:#5d6470}.hero h1{font-size:clamp(44px,7vw,78px);line-height:1.08;letter-spacing:-.045em;margin:18px 0 28px}.lead{font-size:20px;color:var(--muted);max-width:820px}.status{display:inline-block;margin-top:24px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:14px;font-weight:700}.section{padding:76px 0;border-top:1px solid var(--line)}.section h2{font-size:34px;line-height:1.2;margin:8px 0 28px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:28px}.card h3{margin:0 0 10px}.card p{margin:0;color:var(--muted)}dl{margin:0;max-width:720px}dl div{display:grid;grid-template-columns:160px 1fr;padding:17px 0;border-bottom:1px solid var(--line)}dt{color:var(--muted)}dd{margin:0;font-weight:700}.mail{display:inline-block;margin-top:10px;font-size:22px;font-weight:800;color:var(--text)}footer{padding:34px 0 50px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}.footer-links{display:flex;gap:18px;margin-bottom:8px}.legal{max-width:900px}.legal .section{border-top:0;padding-top:70px}.legal h1{font-size:46px;line-height:1.15}.legal h2{font-size:22px;margin-top:42px;margin-bottom:8px}.legal p{color:#343942}.legal .muted{color:var(--muted);font-size:14px}.legal a{color:inherit}@media(max-width:760px){.topbar nav{gap:12px;font-size:14px}.hero{padding:74px 0 64px}.lead{font-size:17px}.cards{grid-template-columns:1fr}.section{padding:56px 0}dl div{grid-template-columns:1fr;gap:4px}.legal h1{font-size:36px}}

/* LOTBI official company footer */

.lotbi-footer {
  padding: 32px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
}

.lotbi-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 14px;
  font-weight: 700;
}

.lotbi-footer .footer-links a,
.lotbi-footer .company-legal a {
  color: var(--muted);
  text-decoration: none;
}

.lotbi-footer .footer-links a:hover,
.lotbi-footer .company-legal a:hover {
  color: var(--text);
  text-decoration: underline;
}

.company-legal {
  max-width: 1050px;
  font-size: 11px;
  line-height: 1.9;
  color: #7a808b;
  word-break: keep-all;
}

.footer-service {
  margin-top: 10px;
  font-size: 11px;
  color: #8a909a;
}

@media (max-width: 760px) {
  .lotbi-footer {
    padding: 28px 0 40px;
    font-size: 11px;
  }

  .lotbi-footer .footer-links {
    gap: 8px 14px;
  }

  .company-legal {
    font-size: 10px;
    line-height: 1.8;
  }

  .footer-service {
    font-size: 10px;
  }
}



/* SITE-LOGO-01 — approved LOTBI character + wordmark header lockup */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}


@media (max-width: 760px) {
  }

/* SITE-BRAND-01 — LOTBI brand accent + header presence */
:root {
  --brand-navy: #182A46;
  --brand-pink: #EC6685;
  --brand-violet: #7B62BB;
  --brand-blue: #4F78C5;
  --brand-soft: #F8F8FC;
  --brand-line: #DDE3EE;
}

/* Tight-cropped approved character lockup; only the wordmark color was changed. */

.topbar {
  height: 112px;
  border-bottom-color: var(--brand-line);
}

.topbar nav {
  flex-shrink: 0;
}

.topbar nav a {
  transition: color 160ms ease;
}

.topbar nav a:hover,
.topbar nav a:focus-visible,
.mail:hover,
.mail:focus-visible,
.lotbi-footer .footer-links a:hover,
.lotbi-footer .footer-links a:focus-visible,
.lotbi-footer .company-legal a:hover,
.lotbi-footer .company-legal a:focus-visible {
  color: var(--brand-blue);
}

.eyebrow,
.kicker {
  color: var(--brand-navy);
}

.eyebrow::before,
.kicker::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 12px 2px 0;
  border-radius: 999px;
  background: var(--brand-pink);
  box-shadow: 7px 0 0 var(--brand-blue);
}

.lotbi-word {
  color: var(--brand-navy);
  white-space: nowrap;
}

.lotbi-o {
  display: inline-block;
  background: linear-gradient(90deg, var(--brand-pink) 0%, var(--brand-violet) 52%, var(--brand-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.status {
  color: var(--brand-navy);
  border-color: #DDDFF0;
  background: var(--brand-soft);
}

.status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--brand-violet);
  vertical-align: 1px;
}

.section h2,
.mail {
  color: var(--brand-navy);
}

@media (max-width: 760px) {
  .topbar {
    height: 92px;
  }

  
  .topbar nav {
    gap: 9px;
    font-size: 13px;
  }
}






/* SITE-USER-FACING-LOGO-CONSISTENCY-01
   Every rendered LOTBI brand slot uses the single approved image asset.
   Do not recreate or recolor the official wordmark with text/CSS. */
.topbar {
  height: 100px;
  border-bottom: 0;
}

.lotbi-official-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
  text-decoration: none;
}

.lotbi-official-brand-logo {
  display: block;
  width: auto;
  height: 48px;
  object-fit: contain;
  border: 0;
  box-shadow: none;
  filter: none;
}

.auth-callback-brand .lotbi-official-brand-logo {
  height: 54px;
}

@media (max-width: 760px) {
  .topbar {
    height: 88px;
  }

  .lotbi-official-brand-logo {
    height: 42px;
  }

  .auth-callback-brand .lotbi-official-brand-logo {
    height: 48px;
  }
}

/* SITE-PUBLIC-02 — accessibility and support-page utilities */
.skip-link {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--brand-navy);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 140ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.lead-small {
  max-width: 760px;
  margin: 0 0 30px;
  color: var(--muted);
  font-size: 18px;
}

.notice-card,
.support-card {
  border: 1px solid var(--brand-line);
  border-radius: 20px;
  background: var(--panel);
  padding: 26px;
}

.notice-card {
  margin: 30px 0 44px;
}

.notice-card h2,
.support-card h2 {
  margin: 0 0 10px;
  color: var(--brand-navy);
}

.primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--brand-navy);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none !important;
}

.primary-link:hover,
.primary-link:focus-visible {
  background: #243b61;
}

.steps-list {
  max-width: 780px;
  padding-left: 24px;
}

.steps-list li {
  margin: 10px 0;
  padding-left: 4px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.support-card p {
  margin: 8px 0 0;
  color: var(--muted);
}

.support-card a:not(.primary-link),
.legal .section a:not(.primary-link) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .lead-small {
    font-size: 16px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .notice-card,
  .support-card {
    padding: 22px;
  }
}