/* Editorial rhythm, bento surfaces and product-stage presentation. */
.theme-light + .theme-light { border-top: 0; }
.theme-light .shead .accent { background-image: linear-gradient(90deg, #2997ff, #7d7aff 52%, #f064bd); }
.card, .hl__item, .stat, .case, .pain, .surface, .layer, .clause,
.strength, .ind, .price, .term, .probe, .kinds, .partner {
  border-color: var(--line-soft);
}

#highlights { background: #0b0b0c; }
#highlights .shead h2 { color: #f5f5f7; }
.hl { max-width: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hl__item {
  display: block;
  min-height: 390px;
  padding: 38px;
  border: 0;
  border-radius: 28px;
  background: #1c1c1e;
}
.hl__item:last-child { border: 0; }
.hl__icon { width: 44px; height: 44px; margin-bottom: 70px; color: #0066cc; }
.hl__item h3 { font-size: clamp(30px, 3vw, 42px); line-height: 1.05; }
.hl__body { font-size: 17px; color: #a1a1a6; }
.stats { margin-top: 88px; gap: 0; border-block: 1px solid rgba(255,255,255,.14); }
.stat { padding: 38px 24px; border: 0; border-right: 1px solid rgba(255,255,255,.14); background: transparent; border-radius: 0; }
.stat:last-child { border-right: 0; }
.stat__value { font-size: clamp(46px, 5vw, 64px); color: #f5f5f7; letter-spacing: -.05em; }
.industry-line { color: #86868b; }

#cases { background: #000; }
.case-grid { gap: 24px; }
.case-grid > .case { overflow: hidden; border: 0; border-radius: 28px; background: #1c1c1e; box-shadow: none; }
.case__media { aspect-ratio: 4 / 3; }
.case__media img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.case:hover .case__media img { transform: scale(1.025); }
.case__text { padding: 30px 30px 36px; }
.case__text h3 { font-size: 28px; }
.case__label { color: #0066cc; }

#why, #field, #faq { background: #000; }
#why .card {
  min-height: 300px;
  padding: 34px;
  border: 0;
  border-radius: 28px;
  background: #151516;
}
.timeline { gap: 0; }
.timeline__item { padding-inline: 22px; }
.timeline__when { font-size: 30px; }
.compare { max-width: 100%; }
.ctable { overflow: hidden; border-radius: 22px; background: #101011; }
.ctable th, .ctable td { padding: 18px 22px; border-color: rgba(255,255,255,.08); }
.ctable__new { color: #f5f5f7; }

#allbaro { background: #0b0b0c; }
.allbaro { gap: 24px; }
.astep { padding: 26px 0; border-color: rgba(255,255,255,.13); }
.probe { border: 0; border-radius: 28px; background: #1d1d1f; color: #f5f5f7; box-shadow: 0 25px 80px rgba(0,0,0,.15); }
.probe__msg, .probe__foot { color: #a1a1a6; }
.shot--sub { border: 0; border-radius: 26px; box-shadow: 0 24px 80px rgba(0,0,0,.12); }

#products { padding-bottom: 0; background: #000; }
#products > .wrap:first-child { padding-bottom: clamp(72px, 9vw, 120px); }
.product {
  margin: 0;
  padding-block: clamp(100px, 12vw, 170px);
  border: 0;
  background: #0b0b0c;
}
.product:nth-of-type(even) { background: #000; }
.product__inner { gap: clamp(56px, 7vw, 110px); }
.product__kicker { color: #0066cc; }
.product__name { font-size: clamp(44px, 5vw, 68px); letter-spacing: -.05em; }
.product__tagline { color: #a1a1a6; font-size: clamp(21px, 2.3vw, 28px); line-height: 1.35; }
.product .chips li { background: #242426; border: 0; color: #c7c7cc; }
.product__visual .shot { border: 0; border-radius: 26px; box-shadow: 0 30px 90px rgba(0,0,0,.18); }
.product__visual img { border-radius: inherit; }
.more { border-color: rgba(255,255,255,.13); }
.more summary { min-height: 48px; }
.surfaces { padding-block: 72px 120px; gap: 18px; background: #000; }
.surface { border: 0; border-radius: 22px; background: #1c1c1e; }

.field-story { gap: 24px; }
.field-photo, .field-story__aside { border: 0; border-radius: 28px; }
.field-photo img { filter: saturate(.75) contrast(1.05); transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.field-photo:hover img { transform: scale(1.025); }
.field-story__aside { background: #151516; }

#how { background: #0b0b0c; }
.sysmap { padding: 56px; border: 0; border-radius: 28px; background: #161617; }
.node { border: 0; border-radius: 22px; background: #242426; box-shadow: 0 8px 30px rgba(0,0,0,.22); }
.layers { gap: 18px; }
.layer { border: 0; border-radius: 24px; background: #1c1c1e; }
.flow__steps { gap: 22px; }

#lpr, #edge, #pricing { background: #0b0b0c; }
.lpr-photo, .kinds { border: 0; border-radius: 28px; }
.lpr-photo { overflow: hidden; }
.lpr-photo img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.lpr-photo:hover img { transform: scale(1.025); }
.kinds { background: #1c1c1e; }
.strengths { gap: 18px; }
.strength { min-height: 300px; padding: 32px; border: 0; border-radius: 26px; background: #1c1c1e; }
.partner { border: 0; border-radius: 28px; background: #1d1d1f; color: #f5f5f7; }
.partner__copy p, .partner__list span { color: #a1a1a6; }

#trust, #industries { background: #000; }
.rail__track { gap: 20px; }
.clause { min-height: 310px; padding: 32px; border: 0; border-radius: 26px; background: #151516; }
.clause h3 { font-size: 30px; }
.quote { border: 0; border-radius: 28px; background: linear-gradient(135deg, #111 10%, #11233a); }
.tier__list { gap: 18px; }
.ind { border: 0; border-radius: 24px; background: #151516; }
.axis__bar i { border-radius: 99px; }

/* ★단일 가격 상자 — 애플 판에서는 테두리 대신 면으로 세운다. */
.price { padding: 34px; border: 0; border-radius: 28px; background: #1c1c1e; box-shadow: none; }
.price__roadmap { border-left-color: rgba(255,255,255,.16); }
.terms { gap: 14px; }
.term { border: 0; border-radius: 22px; background: #1c1c1e; }

.faqs { border-top: 1px solid rgba(255,255,255,.16); }
.faq { border-color: rgba(255,255,255,.16); }
.faq summary { padding-block: 26px; }
.faq__q { font-size: clamp(18px, 2vw, 22px); }

#contact {
  --text: #f5f5f7;
  --text-strong: #fff;
  --text-muted: #a1a1a6;
  --text-faint: #86868b;
  --line-soft: rgba(255,255,255,.1);
  --accent: #2997ff;
  color: #f5f5f7;
  background: #000;
}
.contact { gap: clamp(50px, 8vw, 110px); }
.contact .shead h2 { font-size: clamp(44px, 6vw, 72px); }
.contact__steps li { border-color: rgba(255,255,255,.13); }
.cform { padding: clamp(26px, 4vw, 48px); border: 0; border-radius: 30px; background: #1c1c1e; box-shadow: none; }
.cform input, .cform select, .cform textarea {
  min-height: 48px;
  border: 1px solid #48484a;
  border-radius: 12px;
  /* ★★`background` 단축을 쓰지 않는다. 단축은 `background-image` 까지 함께 지워서
     `components.css` 가 선택 상자에 그려 둔 화살표를 통째로 없앤다. */
  background-color: #2c2c2e;
  color: #f5f5f7;
}
.cform input:focus, .cform select:focus, .cform textarea:focus { border-color: #0071e3; box-shadow: 0 0 0 3px rgba(0,113,227,.15); }
.cform__row > *, .cform .field input, .cform .field select, .cform .field textarea { min-width: 0; width: 100%; }
.ctaband { border: 0; background: #1d1d1f; }
.ctaband__inner { min-height: 110px; }
.ctaband__text strong { color: #fff; }
.qdock .btn { box-shadow: 0 10px 34px rgba(0,0,0,.28); }
.footer { background: #0b0b0c; color: #a1a1a6; border-color: rgba(255,255,255,.12); }
.footer__name, .footer__col h3, .footer__co strong { color: #f5f5f7; }
.footer__tagline, .footer__meta, .footer__note, .footer__copy, .footer__col a { color: #86868b; }

[data-reveal] { transform: translateY(28px); transition: opacity .7s ease, transform .85s cubic-bezier(.2,.8,.2,1); }
[data-reveal].is-in { transform: translateY(0); }

@media (max-width: 900px) {
  .hl { grid-template-columns: 1fr; }
  .hl__item { min-height: 300px; }
  .hl__icon { margin-bottom: 44px; }
  .stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); }
  .stat:last-child { border-bottom: 0; }
  .product__inner { gap: 60px; }
  .sysmap { padding: 34px 24px; }
}
@media (max-width: 640px) {
  .hl__item, #why .card, .case__text, .strength, .price, .cform { padding: 26px; }
  .hl__item { min-height: 280px; border-radius: 24px; }
  .stats { margin-top: 58px; }
  .product { padding-block: 90px; }
  .product__name { font-size: 44px; }
  .product__inner { gap: 42px; }
  .surfaces { padding-block: 54px 90px; }
  .ctable { border-radius: 16px; }
  .ctable th, .ctable td { padding: 14px 12px; }
  .field-photo, .field-story__aside, .probe, .kinds, .partner, .quote { border-radius: 22px; }
  .cform__row { grid-template-columns: 1fr; }
}
