/*
 * 오토메이트 - After Service
 * /after-service/ 전용 스타일
 * 기존 /assets/style.css 와 분리하여 관리합니다.
 */

.after-page {
  background:#0a0d13;
}

.after-page .site-header {
  z-index:100;
}

.after-hero {
  position:relative;
  overflow:hidden;
  padding:150px 0 112px;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px),
    radial-gradient(circle at 80% 18%,rgba(94,119,255,.2),transparent 30%),
    linear-gradient(180deg,#090c13 0%,#0c111b 100%);
  background-size:52px 52px,52px 52px,auto,auto;
}

.after-hero:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(126,148,255,.4),transparent);
}

.after-hero-glow {
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  filter:blur(95px);
}

.after-hero-glow-one {
  width:430px;
  height:430px;
  top:60px;
  right:-110px;
  background:rgba(91,124,255,.18);
}

.after-hero-glow-two {
  width:260px;
  height:260px;
  left:7%;
  bottom:-125px;
  background:rgba(65,219,255,.065);
}

.after-hero-inner {
  position:relative;
  z-index:2;
}

.after-breadcrumbs {
  margin-bottom:42px;
}

.after-kicker,
.after-label {
  display:inline-block;
  color:#6f87f3;
  font-size:1rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.17em;
}

.after-hero h1 {
    font-size: 2.5rem;
    line-height: 1.15;
    letter-spacing: -.05em;
    margin: 12px 0 20px;
    max-width: 850px;
}

.after-hero h1 span {
  background:linear-gradient(90deg,#8297ff 0%,#60dfff 58%,#9aa8ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.after-hero-lead {
    max-width: 820px;
    color: #a2acbd;
    font-size: 1.15rem;
    line-height: 1.5;
}

.after-hero-copy {
  max-width:900px;
  margin:17px 0 0;
  color:#7f8ba0;
  font-size:1rem;
  line-height:1.78;
}

.after-hero-copy strong {
  color:#e8edf7;
  font-weight:700;
}

.after-hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:40px;
}

.after-text-link {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#b9c2d3;
  font-size:1.15rem;
  font-weight:700;
  transition:.2s ease;
}

.after-text-link span {
  color:#8196ff;
  transition:.2s ease;
}

.after-text-link:hover {
  color:#fff;
}

.after-text-link:hover span {
  transform:translateY(2px);
}

.after-principle {
  padding:118px 0 126px;
  background:#f6f7fa;
  color:#111724;
}

.after-principle-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:92px;
  align-items:start;
}

.after-principle h2,
.after-section-head h2,
.after-separate-head h2,
.after-faq-heading h2,
.after-cta h2 {
  margin:15px 0 0;
  font-size:2.5rem;
  line-height:1.15;
  letter-spacing:-.055em;
}

.after-principle h2 span {
  color:#6279eb;
}

.after-principle-copy {
  padding-top:7px;
}

.after-principle-copy p {
  margin:0 0 20px;
  color:#5f6979;
  font-size:1.15rem;
  line-height:1.5;
  letter-spacing:-.012em;
}

.after-principle-copy p:last-child {
  margin-bottom:0;
}

.after-value-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:76px;
}

.after-value-card {
  position:relative;
  min-height:290px;
  padding:30px 30px 32px;
  overflow:hidden;
  border:1px solid #e1e5ed;
  border-radius:22px;
  background:#fff;
  box-shadow:0 15px 40px rgba(30,42,67,.05);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.after-value-card:after {
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  right:-48px;
  bottom:-62px;
  border-radius:50%;
  background:rgba(97,121,238,.06);
}

.after-value-card:hover {
  transform:translateY(-5px);
  border-color:#ccd4f7;
  box-shadow:0 22px 52px rgba(30,42,67,.085);
}

.after-card-index {
  position:absolute;
  top:25px;
  right:26px;
  color:#b0b8c6;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.08em;
}

.after-value-icon {
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  margin-bottom:42px;
  border-radius:15px;
  background:#111827;
  color:#8599ff;
  font-size:1.15rem;
  font-weight:800;
}

.after-value-card h3 {
  margin:0 0 12px;
  font-size:1.25rem;
  letter-spacing:-.03em;
}

.after-value-card p {
  margin:0;
  color:#6a7484;
  font-size:1.15rem;
  line-height:1.5;
}

.after-care {
  padding:120px 0 126px;
  background:#0c1018;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.after-section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:54px;
}

.after-section-head > div {
  max-width:680px;
}

.after-section-head > p {
  max-width:520px;
  margin:0 0 4px;
  color:#737e90;
  font-size:.95rem;
  line-height:1.75;
}

.after-section-head-light h2 {
  color:#f5f7fc;
}

.after-section-head-light > p {
  color:#858fa2;
}

.after-care-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

.after-care-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:520px;
  padding:34px 30px 30px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  background:#111722;
  box-shadow:0 22px 45px rgba(0,0,0,.14);
}

.after-care-card.is-featured {
  border-color:rgba(117,141,255,.58);
  background:
    radial-gradient(circle at 84% 5%,rgba(91,121,255,.17),transparent 31%),
    #121927;
  box-shadow:0 28px 60px rgba(39,56,124,.2);
}

.after-care-badge {
  position:absolute;
  top:22px;
  right:22px;
  padding:7px 10px;
  border:1px solid rgba(130,151,255,.35);
  border-radius:999px;
  color:#92a3ff;
  background:rgba(94,119,255,.08);
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.1em;
}

.after-care-type {
  display:block;
  margin-bottom:18px;
  color:#6e83ee;
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.14em;
}

.after-care-card h3 {
  margin:0 0 12px;
  color:#f2f5fb;
  font-size:1.75rem;
  letter-spacing:-.045em;
}

.after-care-top p {
  min-height:52px;
  margin:0;
  color:#798599;
  font-size:1.15rem;
  line-height:1.5;
}

.after-care-card ul {
  display:grid;
  gap:0;
  margin:30px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(255,255,255,.09);
}

.after-care-card li {
  position:relative;
  padding:15px 0 15px 22px;
  border-bottom:1px solid rgba(255,255,255,.075);
  color:#aab4c5;
  font-size:1rem;
  line-height:1.5;
}

.after-care-card li:before {
  content:"";
  position:absolute;
  left:0;
  top:21px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#6f87f3;
  box-shadow:0 0 0 4px rgba(111,135,243,.09);
}

.after-care-note {
  margin-top:auto;
  padding-top:25px;
  color:#637086;
  font-size:1rem;
  line-height:1.5;
}

.after-care-caption {
  margin:24px 4px 0;
  color:#616c80;
  font-size:1rem;
  line-height:1.5;
}

.after-scope {
  padding:120px 0 128px;
  background:#fff;
  color:#111724;
}

.after-scope-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.after-scope-item {
  min-height:260px;
  padding:28px 25px;
  border:1px solid #e1e5ed;
  background:#fff;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.after-scope-item:hover {
  transform:translateY(-4px);
  border-color:#cfd7f8;
  box-shadow:0 18px 42px rgba(34,46,73,.075);
}

.after-scope-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin-bottom:42px;
  border:1px solid #dfe4ef;
  border-radius:14px;
  color:#647bea;
  background:#f7f8fc;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.05em;
}

.after-scope-item h3 {
  margin:0 0 12px;
  font-size:1.25rem;
  letter-spacing:-.028em;
}

.after-scope-item p {
  margin:0;
  color:#747e8e;
  font-size:1.15rem;
  line-height:1.5;
}

.after-separate {
  padding:118px 0 124px;
  background:#f5f6f9;
  color:#111724;
}

.after-separate-head {
  max-width:850px;
  margin-bottom:50px;
}

.after-separate-head > p {
  max-width:760px;
  margin:18px 0 0;
  color:#747e8d;
  font-size:.96rem;
  line-height:1.76;
}

.after-separate-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.after-separate-grid article {
  min-height:220px;
  padding:27px 27px 28px;
  border:1px solid #e0e4ec;
  border-radius:18px;
  background:#fff;
}

.after-separate-grid article > span {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  margin-bottom:34px;
  border-radius:12px;
  background:#111827;
  color:#8297ff;
  font-size:.78rem;
  font-weight:800;
}

.after-separate-grid h3 {
  margin:0 0 10px;
  font-size:1.25rem;
  letter-spacing:-.026em;
}

.after-separate-grid p {
  margin:0;
  color:#747e8d;
  font-size:1.15rem;
  line-height:1.5;
}

.after-process {
  padding:118px 0 122px;
  background:#0b0f17;
}

.after-process-list {
  margin-top:14px;
  border-top:1px solid rgba(255,255,255,.11);
}

.after-process-list article {
  display:grid;
  grid-template-columns:110px 1fr;
  gap:24px;
  padding:32px 0 34px;
  border-bottom:1px solid rgba(255,255,255,.095);
  transition:padding .22s ease,background .22s ease;
}

.after-process-list article:hover {
  padding-left:14px;
  background:linear-gradient(90deg,rgba(104,128,245,.07),transparent 56%);
}

.after-process-list article > span {
  padding-top:3px;
  color:#59667e;
  font-size:1rem;
  font-weight:800;
}

.after-process-list small {
  color:#7188f4;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.15em;
}

.after-process-list h3 {
  margin:7px 0 8px;
  color:#eff3fa;
  font-size:1.25rem;
  letter-spacing:-.027em;
}

.after-process-list p {
  max-width:790px;
  margin:0;
  color:#788398;
  font-size:1.15rem;
  line-height:1.5;
}

.after-faq {
  padding:120px 0 124px;
  background:#fff;
  color:#111724;
}

.after-faq-heading {
  margin-bottom:48px;
}

.after-faq-list {
  border-top:1px solid #dfe3ea;
}

.after-faq-list details {
  border-bottom:1px solid #dfe3ea;
}

.after-faq-list summary {
  position:relative;
  padding:27px 55px 27px 0;
  cursor:pointer;
  list-style:none;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:-.024em;
}

.after-faq-list summary::-webkit-details-marker {
  display:none;
}

.after-faq-list summary:after {
  content:"+";
  position:absolute;
  top:50%;
  right:6px;
  width:30px;
  height:30px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border:1px solid #e0e4ec;
  border-radius:50%;
  color:#647aeb;
  font-size:1.15rem;
  font-weight:400;
  transition:transform .2s ease;
}

.after-faq-list details[open] summary:after {
  transform:translateY(-50%) rotate(45deg);
}

.after-faq-list details p {
  max-width:920px;
  margin:-3px 0 28px;
  color:#717b8b;
  font-size:1.15rem;
  line-height:1.5;
}

.after-cta {
  padding:92px 0;
  background:
    radial-gradient(circle at 80% 35%,rgba(90,120,255,.18),transparent 32%),
    #101621;
  border-top:1px solid rgba(255,255,255,.06);
}

.after-cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
}

.after-cta h2 {
  color:#f5f7fc;
}

.after-cta p {
  max-width:650px;
  margin:17px 0 0;
  color:#7f8a9f;
  font-size:.95rem;
  line-height:1.7;
}

@media (max-width:1100px) {
  .after-principle-grid {
    gap:55px;
  }

  .after-care-grid {
    grid-template-columns:1fr;
  }

  .after-care-card {
    min-height:auto;
  }

  .after-care-top p {
    min-height:0;
  }

  .after-care-note {
    margin-top:25px;
  }

  .after-scope-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:820px) {
  .after-hero {
    padding:126px 0 86px;
  }

  .after-hero h1 {
    font-size:1.75rem;
  }

  .after-hero-lead,
  .after-hero-copy {
    font-size:1rem;
  }

  .after-hero-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
  }

  .after-kicker, .after-label{font-size:.85rem;}
  .after-principle-copy p{font-size:1rem;}
  .after-value-card h3{font-size:1.15rem;}
  .after-card-index{font-size:.85rem;}
  .after-value-card p{font-size:1rem;}
  .after-care-card h3{font-size:1.5rem;}
  .after-care-note{font-size:1rem;}
  .after-scope-icon{font-size:.85rem;}
  .after-scope-item h3{font-size:1.15rem;}
  .after-scope-item p{font-size:1rem;}
  .after-separate-grid h3{font-size:1.15rem;}
  .after-separate-grid p{font-size:1rem;}
  .after-process-list article > span{font-size:.85rem;}
  .after-process-list small{font-size:.85rem;}
  .after-process-list h3{font-size:1.15rem;}
  .after-process-list p{font-size:1rem;}

  .btn-lg{font-size:1rem;}
  .after-text-link{font-size:1rem; justify-content: center;}

  .after-principle,
  .after-care,
  .after-scope,
  .after-separate,
  .after-process,
  .after-faq {
    padding-top:88px;
    padding-bottom:92px;
  }

  .after-principle-grid {
    grid-template-columns:1fr;
    gap:34px;
  }

  .after-value-grid {
    grid-template-columns:1fr;
    margin-top:52px;
  }

  .after-value-card {
    min-height:245px;
  }

  .after-section-head {
    align-items:flex-start;
    flex-direction:column;
    gap:20px;
    margin-bottom:42px;
  }

  .after-section-head > p {
    max-width:680px;
    margin:0;
  }

  .after-separate-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .after-process-list article {
    grid-template-columns:70px 1fr;
  }

  .after-cta {
    padding:76px 0;
  }

  .after-cta-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:32px;
  }
}

@media (max-width:560px) {
  .after-hero {
    padding:112px 0 76px;
  }

  .after-breadcrumbs {
    margin-bottom:30px;
  }

  .after-hero h1 {
    margin-top:14px;
    letter-spacing:-.052em;
  }

  .after-principle h2,
  .after-section-head h2,
  .after-separate-head h2,
  .after-faq-heading h2,
  .after-cta h2 {
    font-size:1.75rem;
  }

  .after-value-card,
  .after-care-card {
    padding-left:23px;
    padding-right:23px;
  }

  .after-care-badge {
    position:static;
    display:inline-flex;
    width:max-content;
    margin-bottom:20px;
  }

  .after-scope-grid,
  .after-separate-grid {
    grid-template-columns:1fr;
  }

  .after-scope-item {
    min-height:225px;
  }

  .after-process-list article {
    grid-template-columns:1fr;
    gap:12px;
    padding:27px 0 29px;
  }

  .after-process-list article:hover {
    padding-left:0;
  }

  .after-faq-list summary {
    padding-right:46px;
    font-size:1rem;
  }
  .after-faq-list details p{font-size:1rem;}
}