@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800;900&family=Space+Grotesk:wght@600;700&display=swap");

:root{
  --codeai-ink:#0F172A;
  --codeai-ink-soft:#475569;
  --codeai-brand:#2563EB;
  --codeai-brand-bright:#3B82F6;
  --codeai-purple:#5B21B6;
  --codeai-brand-deep:#4C1D95;
  --codeai-lavender:#A78BFA;
  --codeai-bg:#F8FAFC;
  --codeai-card:#FFFFFF;
  --codeai-line:rgba(15,23,42,.10);
  --codeai-line-strong:rgba(37,99,235,.14);
  --codeai-shadow:0 24px 60px rgba(37,99,235,.12);
  --codeai-shadow-soft:0 16px 34px rgba(15,23,42,.08);
  --codeai-radius-xl:32px;
  --codeai-radius-lg:24px;
  --codeai-radius-md:18px;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Noto Sans KR", sans-serif !important;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.12), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(167,139,250,.16), transparent 22%),
    linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 44%,#F8FAFC 100%) !important;
  color:var(--codeai-ink);
}

a{
  color:inherit;
}

h1,h2,h3,h4,h5,h6,
.section-title h2,
.breadcrumbs h2,
.hero-title,
.svc-title,
.roadmap-title{
  color:var(--codeai-ink);
  font-family:"Space Grotesk","Noto Sans KR",sans-serif;
  font-weight:700;
  letter-spacing:-.04em;
}

p,
li,
.breadcrumbs p,
.section-title p,
.description,
.member p,
.icon-box p,
.footer-top p{
  color:var(--codeai-ink-soft);
}

#header{
  background:rgba(248,250,252,.9) !important;
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(16,37,63,.08);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

#header.header-transparent{
  background:rgba(248,250,252,.86);
}

#header .logo img,
#header .logo .logo-img img{
  max-height:42px;
}

.navbar ul{
  gap:4px;
}

.navbar a,
.navbar a:focus{
  padding:10px 14px;
  border-radius:16px;
  color:var(--codeai-ink);
  font-weight:800;
  letter-spacing:-.02em;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a{
  color:var(--codeai-brand-deep);
  background:rgba(37,99,235,.07);
}

.mobile-nav-toggle{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:12;
  border:1px solid rgba(91,33,182,.12);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  color:transparent;
  font-size:0 !important;
  line-height:0;
  box-shadow:0 10px 24px rgba(37,99,235,.08);
}

.mobile-nav-toggle::before{
  content:"☰";
  color:var(--codeai-brand-deep);
  font-size:24px;
  font-weight:900;
  line-height:1;
}

.mobile-nav-toggle.bi-x::before{
  content:"✕";
  font-size:18px;
}

.navbar-mobile{
  position:fixed !important;
  top:76px;
  left:14px;
  right:14px;
  width:auto !important;
  padding:12px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(91,33,182,.14);
  border-radius:24px;
  box-shadow:0 24px 50px rgba(15,23,42,.16);
}

.navbar-mobile ul{
  display:flex !important;
  flex-direction:column;
  gap:6px;
  position:static !important;
  inset:auto !important;
  margin:0;
  padding:8px 0;
}

.navbar-mobile a,
.navbar-mobile a:focus{
  padding:14px 16px;
}

.breadcrumbs{
  margin-top:0;
  padding:34px 0 24px;
  background:linear-gradient(180deg, rgba(37,99,235,.08), rgba(167,139,250,.06));
  border-bottom:1px solid rgba(37,99,235,.08);
}

.breadcrumbs .d-flex{
  gap:16px;
  align-items:flex-start !important;
}

.breadcrumbs h2{
  margin:0 0 10px;
  font-size:clamp(28px,5vw,44px);
  line-height:1.08;
}

.breadcrumbs p{
  margin:0;
  line-height:1.75;
}

.breadcrumbs ol{
  background:rgba(255,255,255,.76);
  border:1px solid rgba(37,99,235,.10);
  border-radius:999px;
  padding:10px 14px;
  gap:8px;
}

.breadcrumbs ol li,
.breadcrumbs ol li a{
  color:var(--codeai-ink-soft);
  font-weight:700;
}

main section,
.about,
.services,
.team,
.portfolio,
.blog,
.blog-single,
.contact,
.portfolio-details,
.service-details{
  padding:32px 0;
}

.section-bg{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(237,244,255,.94));
}

.section-title{
  padding-bottom:8px;
}

.section-title h2{
  font-size:clamp(26px,4vw,40px);
  line-height:1.1;
  margin-bottom:10px;
}

.section-title p{
  line-height:1.8;
}

.icon-box,
.member,
.roadmap-card,
.visual-card,
.svc-visual-card,
.svc-shot,
.goal-card,
.ach-card,
.portfolio-wrap,
.blog-entry,
.blog-author,
.sidebar,
.reply-form,
.card,
.portal-topbar,
.section-box,
.report-top,
.report-body,
.mini-card{
  background:var(--codeai-card) !important;
  border:1px solid var(--codeai-line) !important;
  border-radius:var(--codeai-radius-lg) !important;
  box-shadow:var(--codeai-shadow-soft) !important;
}

.icon-box,
.member,
.blog-entry,
.sidebar,
.reply-form,
.card{
  padding:22px;
}

.icon-box .icon,
.goal-card__icon,
.course-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(37,99,235,.14), rgba(167,139,250,.16));
  color:var(--codeai-brand-deep);
  box-shadow:none;
}

.icon-box h4,
.member h4,
.goal-card__text h4,
.visual-card__body h3,
.svc-shot-cap strong,
.ach-content h3,
.blog-entry .entry-title{
  color:var(--codeai-ink);
  font-family:"Space Grotesk","Noto Sans KR",sans-serif;
  font-weight:700;
  letter-spacing:-.03em;
}

.icon-box h4 a,
.member h4 a,
.blog-entry .entry-title a{
  color:inherit;
}

.icon-box ul,
.member ul,
.ach-content ul,
.mini-list{
  margin:12px 0 0;
  padding-left:18px;
}

.icon-box li,
.member li,
.ach-content li,
.mini-list li{
  color:var(--codeai-ink-soft);
  line-height:1.75;
  margin-top:6px;
}

.member{
  align-items:flex-start !important;
  gap:16px;
}

.member .member-img,
.member img,
.portfolio-wrap img,
.visual-card__media img,
.svc-shot img,
.ach-thumb img{
  border-radius:20px;
}

.roadmap-card,
.visual-card,
.svc-visual-card,
.svc-shot,
.ach-card{
  overflow:hidden;
}

.roadmap-card__head,
.visual-card__body,
.svc-visual-caption,
.svc-shot-cap,
.ach-content{
  padding:20px 22px;
}

.visual-card,
.svc-visual-card{
  background:linear-gradient(180deg,#FFFFFF 0%,rgba(59,130,246,.04) 100%);
}

.pill,
.badge.rounded-pill,
.tag,
.course-modules li,
.instructor-badge,
.badge-soft{
  border-radius:999px !important;
}

.pill,
.badge.rounded-pill,
.tag,
.badge-soft{
  background:rgba(37,99,235,.08) !important;
  color:var(--codeai-brand-deep) !important;
  border:1px solid rgba(91,33,182,.10) !important;
  font-weight:800;
}

.btn,
button,
input[type="submit"]{
  border-radius:18px !important;
  font-weight:800;
  letter-spacing:-.02em;
}

.btn-primary,
.btn.btn-primary{
  background:linear-gradient(135deg,#2563EB 0%,#5B21B6 100%);
  border-color:transparent;
  box-shadow:0 18px 36px rgba(37,99,235,.18);
}

.btn-primary:hover,
.btn.btn-primary:hover{
  background:linear-gradient(135deg,#1d4ed8 0%,#4c1d95 100%);
}

.btn-outline-primary{
  color:var(--codeai-brand-deep);
  border-color:rgba(91,33,182,.18);
  background:rgba(255,255,255,.82);
}

.btn-outline-primary:hover{
  background:rgba(91,33,182,.08);
  color:var(--codeai-brand-deep);
  border-color:rgba(91,33,182,.24);
}

.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-success{
  border-width:1px;
}

.form-control,
.form-select,
textarea{
  border-radius:18px !important;
  border:1px solid rgba(16,37,63,.14) !important;
  box-shadow:none !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus{
  border-color:rgba(37,99,235,.45) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12) !important;
}

.table{
  --bs-table-bg:transparent;
}

.table thead th{
  color:var(--codeai-ink-soft);
  font-weight:800;
}

.table tbody td{
  color:var(--codeai-ink);
}

#footer{
  background:linear-gradient(135deg,#0F172A 0%,#1E293B 32%,#2563EB 100%);
  color:#fff;
  margin-top:32px;
}

#footer .footer-top{
  background:transparent;
  border-top:1px solid rgba(255,255,255,.08);
  padding:42px 0 18px;
}

#footer h4,
#footer a,
#footer .copyright,
#footer .footer-tagline{
  color:#fff;
}

#footer p,
#footer li,
#footer .footer-business,
#footer .footer-contact p{
  color:rgba(255,255,255,.78);
}

#footer .footer-links ul i{
  color:#A78BFA;
}

.back-to-top{
  background:linear-gradient(135deg,#5B21B6 0%,#4C1D95 100%);
  box-shadow:0 18px 36px rgba(76,29,149,.26);
}

.report-top{
  background:linear-gradient(135deg,#2563EB 0%,#5B21B6 55%,#4C1D95 100%) !important;
  color:#fff;
}

.report-top h1,
.report-top p,
.report-top a{
  color:#fff;
}

.report-body{
  padding:30px;
  background:linear-gradient(180deg,#FFFFFF 0%,rgba(241,245,249,.98) 100%) !important;
}

.code-box,
.console,
.report-console,
.report-box{
  background:#091626 !important;
  color:#d9efff !important;
  border-radius:24px !important;
  border:1px solid rgba(37,99,235,.08);
}

.portal-topbar,
.section-box,
#loginCard,
#app,
#changePwCard{
  border-radius:24px !important;
  box-shadow:var(--codeai-shadow-soft) !important;
  border:1px solid var(--codeai-line) !important;
}

.portal-topbar,
.section-login-bg,
#loginCard{
  background:linear-gradient(180deg,#FFFFFF 0%,rgba(241,245,249,.98) 100%) !important;
}

.kpi-card,
.chart-card,
.trust-item,
.helper-box,
.status-note{
  border-radius:20px !important;
  border:1px solid var(--codeai-line) !important;
}

.helper-box,
.status-note,
.trust-item{
  background:rgba(37,99,235,.08);
  color:var(--codeai-ink-soft);
}

.status-note.is-success{
  background:#edf8f1;
}

.status-note.is-error{
  background:#fff1f1;
}

@media (max-width:991.98px){
  .breadcrumbs .d-flex{
    flex-direction:column;
  }
}

@media (max-width:767.98px){
  .breadcrumbs{
    padding:28px 0 20px;
  }

  .breadcrumbs h2,
  .section-title h2{
    font-size:clamp(24px,8vw,34px);
  }

  .icon-box,
  .member,
  .blog-entry,
  .sidebar,
  .reply-form,
  .card{
    padding:18px;
  }
}