/* All sizes come from the Figma file ([2026 v2] 인포디오 소개페이지 디자인) at a 1440px frame.
   Text uses SUIT with -0.04em tracking unless noted; vertical gaps were derived from Figma baselines. */
:root {
  --blue: #006aff;
  --blue2: #4291ff;
  --text: #333238;
  --line: #e0e3e8;
  --navy: #121c2e;
  --pale: #f1f6ff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
#page-content:focus { outline: none; } /* focused by the router after each page change, for screen readers */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height, 80px) + 64px); }
body { font-family: "SUIT Variable", "SUIT", system-ui, sans-serif; color: #000; background: #fff; line-height: 1.4; }
/* em tracking must be declared per element, an inherited em value would be frozen at the body size */
* { letter-spacing: -.04em; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; }
.wrap { width: min(1240px, 100% - 32px); margin: 0 auto; }
.hl { color: var(--blue); }
.ls0 { letter-spacing: 0; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
section { position: relative; }

/* section heading: 40/56 bold, 20/28 sub, 15px apart, 50px to content */
.head { text-align: center; margin-bottom: 50px; }
.head h1, .head h2 { font-size: 40px; line-height: 56px; font-weight: 700; }
.head p { margin-top: 15px; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text); }
/* Figma: SemiBold subtitles, except the zero-tracking Regular ones (festival, region data/compare) */
.head p.ls0, .r-data .head p { font-weight: 400; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 50px; padding: 0 26px 0 24px; border-radius: 25px; font-size: 16px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.i-up::after, .i-right::after { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
/* lucide arrow-up-right (stroke 1) and Figma Arrow-right */
.i-up { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 11V1H1M11 1L1 11'/%3E%3C/svg%3E"); }
.i-right { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M7 0l-.715.7L10.075 4.5H0v1h10.075L6.285 9.29 7 10l5-5z'/%3E%3C/svg%3E"); }
.i-right::after { height: 10px; }
/* Figma "Button_Glass": white 10% fill, 4px background blur, 0.5px gradient rim, drop + two inner shadows */
.btn-glass, .glass { color: #fff; background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  box-shadow: 0 2px 40px rgba(0,0,0,.1), inset 0 1.5px 1px rgba(255,255,255,.6), inset 0 .5px 0 rgba(0,0,0,.1); }
.btn-glass::before, .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: .5px; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.4), rgba(0,0,0,.1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.btn-glass:hover { background: rgba(255,255,255,.2); }
.btn-glass.ink { color: #000; }
.btn-blue { background: var(--blue); color: #fff; box-shadow: 0 0 20px rgba(0,0,0,.1); }
.btn-blue:hover { background: #0058d6; }
.btn-white { background: #fff; color: #000; }
.btn-line { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
.btn.sm { height: 36px; padding: 0 20px; font-size: 14px; box-shadow: none; }
.btn.md { height: 42px; padding: 0 20px; box-shadow: none; }

/* ---------- contact (도입문의, ported from infodio.kr/contact.html; orange -> site blue) ---------- */
.contact-layout {
  display: flex;
  max-width: 1240px;  
  margin: 0 auto;
  padding: 0 20px;
}
.contact-left {
  width: 420px;
  min-width: 420px;
  background: linear-gradient(180deg, #1a1a1a 0%, #333333 100%);
  border-radius: 20px;        
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 48px;
  position: relative;
  overflow: hidden;
  margin: 30px 0;
}
.contact-left::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 106, 255, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.contact-left::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(0, 106, 255, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.contact-left__inner {
  position: relative;
  z-index: 1;
}
.contact-left__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}
.contact-left__logo-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: contain;
}
.contact-left__logo-text {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.5px;
}
.contact-left__title {
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  line-height: 36.4px;
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}
.contact-left__subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 48px;
}
.contact-left__info {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-left__info-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.contact-left__info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
}
.contact-left__info-text {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: -0.2px;
}
.contact-right {
  flex: 1;
  background: #ffffff;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.contact-right__inner {
  padding: 40px 60px;
  max-width: 880px;
  width: 100%;
  margin: auto 0;             
}
.contact-right__back {
  display: inline-block;
  font-size: 18px;
  color: #999;
  text-decoration: none;
  margin-bottom: 24px;
  transition: color 0.2s ease;
}
.contact-right__back:hover {
  color: var(--blue);
}
.contact-right__title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.contact-right__subtitle {
  font-size: 18px;
  color: #999;
  margin-bottom: 32px;
  line-height: 1.5;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form__field--full {
  margin-bottom: 16px;
}
.contact-form__label {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}
.contact-form .required {
  color: #f64c4c;
  margin-left: 2px;
}
.contact-form__input {
  height: 42px;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0 15px;
  font-size: 18px;
  font-family: inherit;
  color: #333;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form__input::placeholder {
  color: #aaa;
}
.contact-form__input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 106, 255, 0.1);
}
.contact-form__input.is-invalid {
  border-color: #f64c4c;
  box-shadow: 0 0 0 3px rgba(246, 76, 76, 0.1);
}
.contact-form__select {
  height: 42px;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0 36px 0 15px;
  font-size: 18px;
  font-family: inherit;
  color: #333;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.contact-form__select:invalid,
.contact-form__select option[value=""][disabled] {
  color: #aaa;
}
.contact-form__select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 106, 255, 0.1);
}
.contact-form__textarea {
  height: 100px;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 18px;
  font-family: inherit;
  color: #333;
  outline: none;
  resize: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form__textarea::placeholder {
  color: #aaa;
}
.contact-form__textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 106, 255, 0.1);
}
.contact-form__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  color: #555;
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.contact-chip:hover {
  border-color: #ccc;
  background: #f9f9f9;
}
.contact-chip__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1.5px solid #ddd;
  background: #fff;
  font-size: 18px;
  line-height: 1;
  transition: all 0.2s ease;
}
.contact-chip.is-selected {
  background: #eef4ff;
  border-color: var(--blue);
  color: var(--blue);
}
.contact-chip.is-selected .contact-chip__check {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.contact-chip.is-selected .contact-chip__check::after {
  content: '✓';
  font-size: 18px;
  font-weight: 700;
}
.contact-form__privacy-box {
  background: #f9fafb;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.contact-form__privacy-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 6px;
}
.contact-form__privacy-notice {
  font-size: 14px;
  color: #999;
  margin-bottom: 16px;
  line-height: 1.5;
}
.contact-form__privacy-table {
  width: 100%;
  border-collapse: collapse;
}
.contact-form__privacy-table th,
.contact-form__privacy-table td {
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  vertical-align: top;
  line-height: 1.5;
}
.contact-form__privacy-table th {
  width: 80px;
  font-weight: 600;
  color: #555;
  text-align: left;
}
.contact-form__privacy-table td {
  color: #666;
}
.contact-form__privacy-table tr:last-child th,
.contact-form__privacy-table tr:last-child td {
  border-bottom: none;
}
.contact-form__agree {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 18px;
  color: #666;
  margin-top: 4px;
}
.contact-form__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.contact-form__checkbox-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 4px;
  border: 1.5px solid #ddd;
  background: #fff;
  transition: all 0.2s ease;
}
.contact-form__checkbox:checked + .contact-form__checkbox-visual {
  background: #333;
  border-color: #333;
}
.contact-form__checkbox:checked + .contact-form__checkbox-visual::after {
  content: '✓';
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.contact-form__agree-link {
  color: var(--blue);
  text-decoration: underline;
  font-weight: 500;
}
.contact-form__agree-link:hover {
  color: #0055d4;
}
.contact-form__agree-text {
  font-size: 18px;
  line-height: 1.4;
}
.contact-form__submit {
  width: 100%;
  height: 52px;
  margin-top: 24px;
  background: var(--blue);
  border: none;
  border-radius: 10px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.contact-form__submit:hover {
  background: #0055d4;
}
.contact-form__submit:active {
  transform: scale(0.99);
}
/* form error toast (script.js toast()) */
.toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 1000;
  max-width: calc(100% - 32px);
  padding: 14px 22px;
  border-radius: 10px;
  background: #f64c4c;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
  animation: toastIn 0.25s ease-out;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.contact-left__logo {
  animation: fadeInUp 0.5s ease-out 0.1s both;
}
.contact-left__title {
  animation: fadeInUp 0.5s ease-out 0.2s both;
}
.contact-left__subtitle {
  animation: fadeInUp 0.5s ease-out 0.3s both;
}
.contact-left__info {
  animation: fadeInUp 0.5s ease-out 0.4s both;
}
.contact-right__inner {
  animation: fadeInUp 0.4s ease-out 0.2s both;
}
@media (max-width: 1024px) {
  .contact-left {
    width: 380px;
    min-width: 380px;
    padding: 48px 36px;
  }
  .contact-right__inner {
    padding: 36px 40px 36px;
  }
}
@media (max-width: 768px) {
  .contact-layout {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }
  .contact-left {
    width: 100%;
    min-width: unset;
    padding: 36px 24px 32px;
  }
  .contact-left__title {
    font-size: 22px;
    line-height: 30px;
  }
  .contact-left__subtitle {
    margin-bottom: 28px;
  }
  .contact-right__inner {
    padding: 28px 20px 40px;
  }
  .contact-form__row {
    grid-template-columns: 1fr;
  }
  .contact-form__chips {
    gap: 8px;
  }
  .contact-chip {
    font-size: 18px;
    height: 32px;
    padding: 0 12px;
  }
}

/* site integration: the original was a fixed full-screen page; here it flows between header and footer */
.contact-section { padding: 20px 0 60px; }
@media (max-width: 768px) {
  .contact-layout { min-height: 0; padding: 0 16px; }
  .contact-left { margin: 0; }
  .contact-right__inner { margin: 0; padding: 32px 0 0; }
}

/* scroll fade-in (script.js reveal): same timing as infodio.kr; `translate` composes with any existing transform */
#page-content .fade-in { transition: opacity .6s ease-out var(--d, 0s), translate .6s ease-out var(--d, 0s); }
#page-content .fade-in:not(.is-visible) { opacity: 0; translate: 0 30px; }

/* ---------- header ---------- */
header { position: sticky; top: 0; z-index: 20; background: #fff; }
/* pages without the anchor bar (home, case): same 1px line under the header once scrolled */
body:not(:has(.anchor-bar)) header.scrolled { box-shadow: 0 1px 0 var(--line); }
header .wrap { display: flex; align-items: center; height: 80px; }
.logo img { width: 110.04px; height: 38px; object-fit: contain; }
header nav { display: flex; margin-left: 162px; font-size: 16px; color: #5c5c5c; }
header nav a { display: grid; place-items: center; width: 120px; height: 40px; }
header nav a:hover { color: #000; }
header nav a[aria-current="page"] { color: #000; font-weight: 700; }
.util { display: flex; align-items: center; margin-left: auto; font-size: 16px; color: #5c5c5c; }
.util .lang { display: flex; gap: 24px; margin-left: 78px; }
.util .lang a[aria-current] { color: #000; font-weight: 700; }

/* ---------- footer ---------- */
/* Figma footer: padding 50 120, gap 20, text boxes use leading-trim (cap), emulated with margins */
footer { padding: 50px 0 42.4px; font-size: 14px; line-height: 21px; color: #6d7882; }
footer .wrap { width: min(1200px, 100% - 32px); }
footer .logo img { display: block; width: 148px; height: 51px; }
footer .info { margin: 14.5px 0; }
footer .info span + span::before { content: "｜"; margin: 0 4px; }
footer .copy { border-top: 1px solid #6d7882; padding-top: 12.4px; line-height: 25.2px; }
.case-page footer { background: #f6f7f9; }

/* ---------- home: hero ---------- */
.hero { position: relative; height: 716px; color: #fff; overflow: hidden; background: #3a4a5c; }
.slides div { position: absolute; inset: 0; background: center bottom / cover; opacity: 0; transition: opacity 1s; }
.slides div.on { opacity: 1; }
/* Figma stacks the same 60% black → transparent fill twice */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(102,102,102,0)), linear-gradient(90deg, rgba(0,0,0,.6), rgba(102,102,102,0)); }
.hero .wrap { position: relative; z-index: 2; padding-top: 153px; }
.hero .eyebrow { font-size: 20px; line-height: 28px; font-weight: 600; }
.hero h2 { margin-top: 16.7px; font-size: 36px; line-height: 39.6px; font-weight: 900; }
.hero h1 { margin-top: 1px; font-size: 90px; line-height: 112px; font-weight: 900; }
.hero .desc { margin-top: 10px; font-size: 20px; line-height: 28px; font-weight: 600; }
.btns { display: flex; gap: 10px; margin-top: 30px; }
.steps { display: flex; align-items: flex-end; gap: 16px; margin-top: 56px; }
.steps button { all: unset; cursor: pointer; width: 184px; display: grid; opacity: .8; font-size: 16px; line-height: 22px; transition: opacity .3s; }
.steps button span { margin-bottom: 4px; }
.steps button span, .steps button b { font-weight: 800; }
.steps button.on span { font-weight: 900; }
.steps button::after { content: ""; height: 2px; margin-top: 4px; background: #fff; }
.steps button.on { opacity: 1; }
.steps button.on span { font-size: 20px; line-height: 28px; margin-bottom: 2px; }
.steps button.on b { font-size: 24px; line-height: 30px; }
.steps button.on::after { height: 3px; margin-top: 6px; }
.steps button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---------- home: features ---------- */
.features { padding: 150px 0; background: linear-gradient(180deg, #fff 70.52%, #e0edff 100%); }
.features .head { margin-bottom: 56px; }
.features .head p { margin-top: 14px; }
.feat-rows { display: flex; flex-direction: column; gap: 24px; width: min(1100px, 100%); margin: 0 auto; }
.feat-row { display: flex; align-items: center; gap: 20px; }
.feat-row.rev { justify-content: flex-end; }
/* phone mockup = navy card + app screen image (Figma render, clipped by the card); chip is live text */
.feat-phone { position: relative; flex: none; width: 500px; height: var(--h); border-radius: 30px; overflow: hidden; background: var(--navy); }
.feat-phone img { width: 100%; height: 100%; }
.feat-chip { position: absolute; top: var(--y); left: 50%; transform: translateX(calc(-50% + var(--x))); display: inline-flex; align-items: center; gap: 4px; height: 48px; padding: 6px 24px; border-radius: 100px; background: #fff; font-size: 20px; line-height: 20px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.feat-chip svg { width: 28px; height: 28px; fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.feat-txt { padding: 32px; border-radius: 24px; }
.feat-txt.boxed { background: #fff; }
/* Figma: this frame carries drop-shadow(0 0 20px rgba(0,0,0,.2)) but has no fill, so it renders nothing — omitted */
.feat-row.rev .feat-txt { width: 413px; }
.feat-txt h3 { font-size: 30px; line-height: 42px; color: #121212; }
.feat-txt p { margin-top: 16px; font-size: 20px; line-height: 28px; color: #6b6b6b; }
.feat-subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: min(1100px, 100%); margin: 56px auto 0; }
.feat-subs article { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 32px 28px; border-radius: 24px; background: #fff; box-shadow: 0 4px 24px rgba(0,106,255,.24); text-align: center; }
.feat-subs img { width: 130px; height: 130px; margin-bottom: -8px; }
.feat-subs h3 { font-size: 20px; line-height: 20px; color: #000; }
.feat-subs b { font-size: 16px; line-height: 22.4px; font-weight: 600; color: #121212; }
.feat-subs p { font-size: 14px; line-height: 20px; color: #6b6b6b; }
.features-all { padding: 150px 0 200px; background: linear-gradient(120.67deg, #ecf4ff, #d5e7ff); }
.feat-grid { display: grid; grid-template-columns: repeat(4, 295px); gap: 20px; justify-content: center; }
.feat { position: relative; height: 295px; padding: 24px; border-radius: 24px; overflow: hidden; background: rgba(255,255,255,.8); box-shadow: 0 4px 24px rgba(0,106,255,.24); }
.feat > img, .feat > .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.feat h3, .feat p { position: relative; }
.feat h3 { font-size: 18px; line-height: 25.2px; }
.feat p { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--text); }
/* Figma layer art: shapes come from images/*.webp, every label is live text placed at the Figma baseline */
.art { overflow: visible; }
.econ-visual, .auto-node, .scene .phone { height: auto; }
.art text { font-family: "SUIT Variable", "SUIT", sans-serif; }
.art text[stroke] { paint-order: stroke; }

/* ---------- home: types ---------- */
.types { padding: 150px 0; overflow: hidden; }
.type { position: relative; height: 465px; border-radius: 24px; overflow: hidden; background: linear-gradient(#e9efff, #eaf8f9 101%); }
.type + .type { margin-top: 20px; height: 498px; background: linear-gradient(#f4f2fd, #f3f3fb 101%); }
.type .img { position: absolute; left: 132px; top: -226px; width: 1446px; max-width: none; height: 723px; }
.type.festa .img { left: 401px; top: -27px; width: 1049px; height: 524px; }
.type .txt { position: relative; height: 100%; padding: 50px; display: flex; flex-direction: column; align-items: flex-start; }
.type h3 { font-size: 54px; line-height: 75.6px; }
.type .lead { margin-top: 10px; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text); }
.type .rec-title { margin-top: 44px; font-size: 16px; line-height: 22.4px; font-weight: 700; color: var(--blue); }
.type .rec li { margin-top: 7.6px; padding-left: 14px; position: relative; font-size: 16px; line-height: 22.4px; font-weight: 600; color: var(--text); }
.type .rec li::before { content: ""; position: absolute; left: 0; top: 7.2px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.type.festa .rec-title { color: #ad96f1; }
.type.festa .rec li::before { background: #ad96f1; }
.type .btn { margin-top: auto; }


/* ---------- home: flow ---------- */
.flow-section { position: relative; isolation: isolate; overflow: hidden; padding: 150px 0; }
.flow-section .glow { position: absolute; z-index: -1; left: calc(50% - 51px); top: 221px; width: 858px; height: 866px; border-radius: 50%; background: rgba(0,106,255,.1); filter: blur(250px); pointer-events: none; }
.flow { display: grid; gap: 20px; width: min(500px, 100%); margin: 0 auto; }
.flow > div { position: relative; height: 110px; padding: 0 24px; display: flex; align-items: center; border-radius: 24px; overflow: hidden; background: linear-gradient(170deg, #e8f3f9, #d0ddf7); }
.flow p { position: relative; z-index: 1; display: grid; gap: 4px; }
.flow b { font-size: 18px; line-height: 25.2px; }
.flow span { font-size: 14px; line-height: 20px; color: var(--text); }
.flow img { position: absolute; }
.flow .f1 img { left: 349px; top: 3px; width: 145px; height: 148px; }
.flow .f2 img { left: 348px; top: 9px; width: 138px; height: 92px; }
.flow .f3 img { left: 364px; top: -3px; width: 110px; height: 115px; }
.flow .f4 img { left: 361px; top: 5px; width: 103px; height: 101px; }

/* ---------- stats (home + case) ---------- */
.stats { padding: 150px 0; color: #fff; background: #222 url(images/stats-bg.jpg) center / cover; }
.stats .head p { color: #fff; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: min(1140px, 100%); margin: 0 auto; }
.stat { position: relative; padding: 24px; border-radius: 24px; min-height: 194px; }
.stat h4 { font-size: 16px; line-height: 22.4px; }
.stat strong { display: flex; align-items: baseline; margin-top: 13.6px; font-size: 58px; line-height: 56px; letter-spacing: -3px; }
.stat strong small { line-height: 1; margin-left: 12px; font-size: 20px; font-weight: 400; letter-spacing: 0; }
.stat p { margin-top: 14px; font-size: 14px; line-height: 20px; opacity: .8; }

/* ---------- home: cases ---------- */
.cases { padding: 150px 0; overflow: hidden; }
.cases .head { margin-bottom: 30px; }
.case-row { display: grid; grid-template-columns: repeat(4, 350px); gap: 20px; width: 1460px; margin-left: calc((100% - 1460px) / 2); }
.case { border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.24); }
.case > img { width: 100%; height: 200px; object-fit: cover; }
.case .body { padding: 24px; }
.case h4 { font-size: 18px; line-height: 25.2px; }
.case p { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--text); }
.case .tags { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 24px; font-size: 12px; line-height: 16.8px; color: #888; }

/* ---------- home: process ---------- */
.process { padding: 150px 0; }
.proc-grid { display: grid; grid-template-columns: repeat(4, 290px); gap: 20px; justify-content: center; }
.proc { position: relative; height: 286px; padding: 20px 20px 0; border-radius: 24px; background: #f3f3f3; text-align: center; }
.proc .no { display: inline-block; height: 22px; padding: 0 10px; border: 1px solid #c4c4c4; border-radius: 11px; font-size: 12px; line-height: 20px; font-weight: 700; color: #606060; }
.proc h4 { margin-top: 9px; font-size: 18px; line-height: 25.2px; }
.proc p { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--text); }
.proc img { position: absolute; left: 0; bottom: 0; width: 100%; }
.process .center { margin-top: 50px; text-align: center; }
.process .btn { padding: 0 24px; }
.process-note { margin-top: 20px; font-size: 14px; line-height: 20px; font-weight: 600; color: #6b7684; }

/* ---------- CTA ---------- */
.cta { height: 363px; padding-top: 96px; text-align: center; color: #fff; background: radial-gradient(50% 137.15% at 50% 50%, #006aff, #000); }
.cta h2 { font-size: 40px; line-height: 56px; }
.cta p { margin-top: 7px; font-size: 20px; line-height: 28px; font-weight: 600; }
.cta .btn { margin-top: 26px; }

/* ---------- detail pages: hero + anchor bar ---------- */
.d-hero { position: relative; height: 560px; padding-top: 99px; color: #fff; background: linear-gradient(90deg, rgba(0,0,0,.8), rgba(102,102,102,0) 100%), var(--hero) center / cover; }
.d-label { display: inline-block; height: 30px; padding: 0 14px; border-radius: 15px; background: rgba(255,255,255,.18); font-size: 16px; line-height: 30px; font-weight: 700; }
.d-hero h1 { margin-top: 28px; font-size: 54px; line-height: 71.28px; font-weight: 900; }
.d-hero p { margin-top: 28px; font-size: 20px; line-height: 28px; font-weight: 600; }
.d-hero .btns { margin-top: 28px; }
.anchor-bar { position: sticky; top: var(--header-height, 80px); z-index: 15; background: #fff; border-bottom: 1px solid var(--line); }
.anchor-bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 63px; gap: 24px; }
.anchor-bar nav { display: flex; gap: 36px; font-size: 16px; color: #606060; }
.anchor-bar nav a { white-space: nowrap; }
.anchor-bar nav a[aria-current="location"] { color: var(--blue); font-weight: 700; }
.d-sec { padding: 150px 0; }
.d-sec .head p { margin-top: 8px; }
.pale { background: var(--pale); }
.gray { background: #f6f7f9; }
.dark { background: var(--navy); color: #fff; }
.dark .head p { color: #fff; }
.chip { display: inline-block; height: 23px; padding: 0 12px; border-radius: 12px; background: #e6efff; color: var(--blue); font-size: 13px; line-height: 23px; font-weight: 700; }
.pill { display: inline-block; height: 28px; padding: 0 14px; border-radius: 14px; background: #e6efff; color: var(--blue); font-size: 16px; line-height: 28px; font-weight: 700; }
.blob { position: absolute; border-radius: 50%; background: #c3d9ff; filter: blur(100px); pointer-events: none; }

/* comparison table (region + festival) */
.table-scroll { overflow-x: auto; padding: 10px 0 30px; margin: 0 0 -30px; }
.cmp { width: 1000px; margin: 0 auto; border-spacing: 0; text-align: center; font-size: 16px; filter: drop-shadow(0 6px 24px rgba(0,0,0,.06)); }
.cmp th, .cmp td { height: 63px; padding: 0 16px; }
.cmp col, .cmp th:first-child { width: 200px; }
.cmp thead th { height: 68px; font-weight: 700; }
.cmp thead th:nth-child(1) { background: #fff; border-top-left-radius: 24px; padding-top: 12px; }
.cmp thead th:nth-child(2) { background: #d7d7d7; color: #555; vertical-align: top; padding-top: 22px; }
.cmp thead th:nth-child(3) { position: relative; z-index: 0; background: transparent; color: #fff; font-size: 20px; font-weight: 800; padding-top: 2px; }
/* Figma: the 인포디오 header is a 24px-radius tab rising 10px above the row */
.cmp thead th:nth-child(3)::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -10px; bottom: 0; background: var(--blue); border-radius: 24px 24px 0 0; }
.cmp tbody tr:first-child td:nth-child(3) { border-top: 0; }
.cmp tbody tr:last-child > * { height: 64px; }
.cmp tbody th { background: #fff; font-weight: 700; border-top: 1px solid var(--line); }
.cmp tbody td:nth-child(2) { width: 400px; background: #f5f5f5; color: #555; border-top: 1px solid var(--line); }
.cmp tbody td:nth-child(3) { width: 400px; background: #e6efff; color: var(--blue); font-weight: 700; border: 1px solid var(--blue); border-bottom: 0; }
.cmp tbody tr:last-child th { border-bottom-left-radius: 24px; }
.cmp tbody tr:last-child td:nth-child(3) { border-bottom: 1px solid var(--blue); border-radius: 0 0 24px 24px; }
.cmp.f tbody td:nth-child(2) { color: #606060; }

/* ---------- region ---------- */
.why-grid { display: grid; grid-template-columns: repeat(2, 486px); gap: 24px; justify-content: center; }
.why-card { min-height: 322px; padding: 40px; border-radius: 24px; background: #fff; box-shadow: 10px 10px 20px #c3d1eb; }
.why-card.muted { background: #f5f5f5; box-shadow: 0 6px 10px rgba(0,0,0,.06); }
.why-card h3 { display: flex; align-items: center; gap: 10px; font-size: 24px; line-height: 33.6px; }
.why-card .badge { height: 23px; padding: 0 12px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 13px; line-height: 23px; }
.why-card.muted .badge { background: #d4d4d7; color: #606060; }
.why-card ul { margin-top: 26px; display: grid; gap: 17.6px; }
.why-card li { position: relative; padding-left: 18px; font-size: 16px; line-height: 22.4px; color: var(--text); }
.why-card li::before { content: ""; position: absolute; left: 0; top: 8.2px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.why-card.muted li::before { background: #888; }

.r-service { background: linear-gradient(#fff, #ecf3ff); }
.move-grid { display: grid; grid-template-columns: repeat(2, 500px); gap: 24px; justify-content: center; }
.move { min-height: 327px; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 24px 0; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,.1); }
.move h3 { margin-top: 16px; font-size: 24px; line-height: 33.6px; }
.move p { margin-top: 4px; font-size: 16px; line-height: 22.4px; color: var(--text); }
.move > img { width: calc(100% + 48px); max-width: none; height: 180px; margin: auto -24px 0; object-fit: cover; }
.move.dark { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 32px; color: #fff; background: var(--navy); box-shadow: 0 0 20px rgba(18,28,46,.2); }
.move.dark h3 { margin: 0; line-height: 34px; }
.move.dark p { margin-top: 8px; color: #b8c4d6; line-height: 22px; }
.move.dark > img { width: 103px; height: 101px; margin: 0; }

.r-operation .head { margin-bottom: 70px; }
.r-operation { padding-bottom: 185px; background: linear-gradient(#ecf3ff, #e6efff); }
.auto-flow { display: grid; grid-template-columns: 350px 240px 550px; justify-content: center; align-items: center; }
.register { position: relative; z-index: 1; height: 386px; padding-top: 36px; border-radius: 20px; background: #fff; box-shadow: 0 0 30px 10px #bed5ff; text-align: center; }
.register h3 { margin-top: 10px; font-size: 32px; line-height: 44.8px; }
.register > img { width: 258px; margin: -17px auto -18px; filter: drop-shadow(0 0 20px #c9d7ef); }
.register .tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; width: 260px; margin: 6px auto 0; }
.register .tags span { height: 35px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; line-height: 33px; font-weight: 600; color: var(--text); }
.auto-node { width: 240px; }
.auto-grid { display: grid; grid-template-columns: repeat(2, 265px); gap: 20px; }
.auto-grid article { height: 183px; padding: 10px 26px 0; border-radius: 20px; background: #fff; box-shadow: 0 0 30px 10px #bed5ff; text-align: center; }
.auto-grid img { width: 80px; height: 80px; margin: 0 auto; }
.auto-grid h3 { font-size: 22px; line-height: 30.8px; color: var(--blue); }
.auto-grid p { margin-top: 4px; font-size: 16px; line-height: 22px; color: var(--text); }
.benefits { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 50px; margin-top: 62px; }
.benefits li { display: flex; align-items: center; gap: 8px; font-size: 22px; line-height: 30.8px; font-weight: 700; }
.benefits li::before { content: ""; width: 24px; height: 24px; background: url(images/icon-check-blue.webp) center / contain; }

.r-econ { overflow: hidden; background: #fff url(images/region-econ-bg.jpg) center top / 1440px auto no-repeat; }
.econ-visual { display: block; width: 680px; margin: -38px auto 0; }
.econ-steps { position: relative; display: flex; justify-content: center; gap: 40px; margin: -71px -15px 0; counter-reset: step; }
.econ-steps li { position: relative; flex: 0 0 180px; height: 156px; padding-top: 36px; display: grid; justify-items: center; align-content: start; gap: 8px; border-radius: 20px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.1); font-size: 20px; line-height: 28px; font-weight: 700; counter-increment: step; }
.econ-steps li:first-child { flex-basis: 170px; }
.econ-steps li img { width: 48px; height: 48px; }
.econ-steps li::before { content: counter(step); position: absolute; top: -15px; left: 50%; width: 35px; height: 35px; margin-left: -17.5px; border-radius: 50%; background: #454545; color: #fff; font-size: 20px; line-height: 35px; text-align: center; }
.econ-steps li + li::after { content: ""; position: absolute; left: -32px; top: 66px; width: 24px; height: 24px; background: url(images/region-arrow.webp) center / contain; }
.econ-steps li:last-child { background: var(--blue); color: #fff; }
.econ-steps li:last-child::after { filter: invert(27%) sepia(97%) saturate(4200%) hue-rotate(211deg) brightness(102%); }

.r-biz { background: #fff url(images/region-biz-bg.jpg) center top / 1440px 100% no-repeat; }
.r-biz .head { margin-bottom: 50px; }
.biz-grid { display: grid; grid-template-columns: repeat(3, 360px); gap: 20px; justify-content: center; }
.biz-grid article { position: relative; height: 300px; padding: 22px 24px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 10px rgba(5,65,150,.2); }
.biz-grid article.tall { height: 351px; }
.biz-grid img, .biz-grid .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.biz-grid h3, .biz-grid p { position: relative; }
.biz-grid h3 { font-size: 26px; line-height: 36.4px; }
.biz-grid p { margin-top: 5.6px; font-size: 16px; line-height: 22.4px; color: var(--text); }

.r-data .head p { letter-spacing: 0; }
.data-layout { display: grid; grid-template-columns: 754px 1fr 376px; align-items: center; }
.data-panel { padding: 32px; border-radius: 24px; background: #323d4e; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.data-panel h3 { font-size: 24px; line-height: 33.6px; }
.data-panel .dash { width: 730px; max-width: none; margin: 0 -20px -20px; }
.data-panel h3 + .data-chips { margin-top: 12px; }
.data-panel .dash + h3 { margin-top: 20px; }
.policy h3 { font-size: 24px; line-height: 33.6px; }
.data-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.data-chips li { display: flex; align-items: center; min-height: 64px; padding: 8px 20px; border-radius: 14px; background: var(--navy); font-size: 20px; line-height: 1.25; font-weight: 700; }
.data-layout > * { min-width: 0; }
.r-data .tri { width: 48px; justify-self: center; }
.policy { display: grid; gap: 12px; }
.policy article { display: flex; align-items: center; gap: 8px; height: 132px; padding: 0 24px; border-radius: 20px; background: var(--blue); }
.policy img { width: 100px; height: 100px; }
.policy h4 { font-size: 24px; line-height: 33.6px; }
.policy p { margin-top: 8px; font-size: 16px; line-height: 22.4px; }

/* ---------- festival ---------- */
.f-why .head { margin-bottom: 64px; }
.persona-grid { display: grid; grid-template-columns: repeat(2, 440px); gap: 50px; justify-content: center; }
.persona { position: relative; display: flex; align-items: center; justify-content: space-between; height: 208px; padding: 0 33px 0 36px; border-radius: 24px; background: #fff; box-shadow: 0 0 24px rgba(0,0,0,.06); }
.persona.wide { grid-column: 1 / -1; justify-self: center; width: 476px; }
.persona .tag { position: absolute; left: 36px; top: -16px; height: 40px; padding: 0 20px; border-radius: 20px; background: var(--blue2); color: #fff; font-size: 20px; line-height: 40px; font-weight: 700; }
.persona h3 { font-size: 24px; line-height: 34px; }
.persona p { margin-top: 16px; font-size: 16px; line-height: 22px; color: var(--text); }
.persona img { width: 150px; height: 150px; flex: none; }

.f-service { overflow: hidden; }
.f-service .wrap, .f-report .wrap, .f-price .wrap { position: relative; }
.f-service .b1 { left: calc(50% - 319px); top: 276px; width: 639px; height: 516px; opacity: .5; }
.f-service .b2 { left: calc(50% - 659px); top: 912px; width: 427px; height: 339px; opacity: .7; }
.f-service .b3 { left: calc(50% - 683px); top: 2273px; width: 427px; height: 339px; }
.f-service .b4 { left: calc(50% - 124px); top: 3019px; width: 386px; height: 383px; }
.f-service .head { margin-bottom: 64px; }
.stage .step { display: inline-block; height: 48px; padding: 0 24px; border-radius: 24px; background: var(--blue); color: #fff; font-size: 20px; line-height: 48px; font-weight: 700; }
.stage h3 { margin-top: 15.8px; font-size: 26px; line-height: 36.4px; }
.stage p { margin-top: 7.6px; font-size: 16px; line-height: 22.4px; }
.stage { margin-bottom: 24px; }
.stage.s1 { text-align: center; }
.stage.s2 { margin: 64px 0 24px 50px; }
.stage.s3 { margin: 40px 0 18px; }
.stage.s4 { margin: 40px 0 18px 544px; }
.scene { position: relative; padding: 36px 0 36px 48px; border: 1px solid var(--line); border-radius: 24px; background: var(--pale); }
.scene h4 { display: flex; align-items: center; gap: 8px; font-size: 24px; line-height: 33.6px; }
.scene h4 i { width: 36px; height: 36px; border-radius: 50%; background: var(--blue2); color: #fff; font-size: 16px; line-height: 36px; font-style: normal; font-weight: 700; text-align: center; letter-spacing: 0; }
.scene .body { display: flex; align-items: center; margin-top: 24px; }
.scene .phone { margin: -20px 8px -20px -20px; flex: none; }
.scene .copy p { margin-top: 7px; font-size: 16px; line-height: 22px; color: var(--text); }
.scene .chip { height: 28px; padding: 0 14px; border-radius: 14px; background: var(--blue2); color: #fff; font-size: 16px; line-height: 28px; }
.scene.wide { width: 854px; margin: 0 auto; height: 449px; }
.scene.wide h4 { gap: 10px; }
.scene.wide h4 i { width: 44px; height: 44px; line-height: 44px; }
.scene.wide .body { margin-top: 16px; }
.scene.wide .photo { width: 501px; height: 316px; border-radius: 16px; margin-right: 28px; }
.scene.wide .chip { height: 34px; padding: 0 14px; border-radius: 17px; line-height: 34px; }
.scene.wide .copy p { margin-top: 10px; }
.scene.wide .copy { margin-top: -60px; }
.scene-cols { display: grid; grid-template-columns: 560px 539px; gap: 19px; margin-left: 61px; align-items: start; }
.scene-cols .col { display: grid; gap: 19px; }
.scene-cols .col.shift { padding-top: 84px; }
.scene-cols .scene .body { position: static; }
.scene-cols .scene .copy { position: absolute; top: 50%; transform: translateY(-50%); }
.scene-cols .col:first-child .scene .copy { left: 326.5px; }
.scene-cols .col.shift .scene .copy { position: static; transform: none; }
.scene-cols .scene .phone { margin-right: 0; }
.scene-row { display: grid; grid-template-columns: 523px 539px; gap: 19px; }
.scene-row .scene { height: 547.2px; }
.scene-row .scene .phone { width: 250px; margin-right: 8px; }
.scene.survey { width: 745px; margin-left: 494.5px; height: 558px; }
.scene.survey .phone { width: 468px; margin-right: 8px; }
.scene.survey .body { margin-top: 16px; }
.extra-grid { display: grid; grid-template-columns: repeat(2, 600px); gap: 40px; margin-top: 40px; justify-content: center; }
.extra { height: 553px; padding-top: 30px; border-radius: 24px; text-align: center; color: #fff; }
.extra.blue { background: var(--blue2); }
.extra.navy { background: var(--navy); }
.extra .pill { height: 40px; padding: 0 20px; border-radius: 20px; background: var(--blue); color: #fff; font-size: 20px; line-height: 40px; }
.extra.navy .pill { background: #3c4556; }
.extra > img { margin: 12px auto 0; width: 520px; }
.extra.navy > img { width: 570px; margin-top: 0; }
.extra h3 { margin-top: 12px; font-size: 24px; line-height: 33.6px; }
.extra p { margin-top: 6px; font-size: 16px; line-height: 22px; }
.extra.navy h3 { margin-top: 0; }
.extra.navy p { color: #b8c4d6; }
.extra.navy p a:hover { color: #fff; }

.f-cms .head .pill { background: var(--blue); color: #fff; }
.f-cms .head h2 { margin-top: 8px; }
.f-cms .head p { margin-top: 8px; }
.f-cms .head { margin-bottom: 64px; }
.cms-layout { display: grid; grid-template-columns: 286px 516px 389px; gap: 24px; justify-content: center; align-items: center; }
.cms-menu { width: 326px; max-width: none; margin: -20px; }
.cms-card { height: 721px; padding: 32px 32px 0; border-radius: 24px; background: #fff; color: #000; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.cms-card h3 { font-size: 24px; line-height: 33.6px; }
.cms-card img { width: 492px; max-width: none; margin: 0 -20px; }
.cms-list { display: grid; gap: 13px; }
.cms-list article { height: 88px; padding: 18px 24px 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: #000; }
.cms-list h4 { font-size: 18px; line-height: 25.2px; }
.cms-list p { margin-top: 3px; font-size: 16px; line-height: 22.4px; color: var(--text); }

.f-report { overflow: hidden; }
.f-report .b5 { left: calc(50% - 588px); top: 345px; width: 415px; height: 413px; filter: blur(150px); }
.f-report .head { margin-bottom: 64px; }
.report-layout { display: grid; grid-template-columns: 480px 520px; gap: 20px; justify-content: center; align-items: start; }
.report-card { height: 485px; padding: 32px; border-radius: 24px; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.report-card .chip { height: 25px; border-radius: 13px; background: var(--pale); line-height: 25px; padding: 0 14px; }
.report-card h3 { margin-top: 18px; font-size: 24px; line-height: 33.6px; }
.report-card p { margin-top: 8px; font-size: 16px; line-height: 22.4px; color: var(--text); }
.report-card img { width: 456px; max-width: none; margin: -2px -20px 0; }
.report-grid { display: grid; grid-template-columns: repeat(2, 255px); gap: 10px; }
.report-grid article { height: 89px; padding: 20px 22px 0; border-radius: 16px; background: var(--pale); }
.report-grid h4 { font-size: 18px; line-height: 25.2px; color: var(--blue); }
.report-grid p { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--text); }

.f-type .head { margin-bottom: 64px; }
.type-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.type-tabs button { height: 47px; padding: 0 22px; border: 1px solid var(--line); border-radius: 24px; background: #fff; color: #606060; font-size: 16px; font-weight: 700; cursor: pointer; }
.type-tabs button[aria-selected="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }
.type-grid { display: grid; grid-template-columns: repeat(3, 402px); gap: 16px; justify-content: center; margin-top: 64px; }
.type-grid article { height: 195px; padding: 32px 30px 0; border-radius: 24px; background: #fff; transition: background .2s, color .2s; }
.type-grid h3 { font-size: 24px; line-height: 33.6px; }
.type-grid p { margin-top: 14px; font-size: 16px; line-height: 22px; color: var(--text); }
.type-grid .tags { display: flex; gap: 8px; margin-top: 14px; }
.type-grid .tags span { height: 25px; padding: 0 14px; border-radius: 13px; background: var(--pale); color: var(--blue); font-size: 13px; line-height: 25px; font-weight: 700; }
.type-grid article.on { background: var(--blue); color: #fff; }
.type-grid article.on p { color: #fff; }
.type-cta { margin-top: 64px; text-align: center; }
.type-cta h3 { font-size: 30px; line-height: 42px; font-weight: 600; }
.type-cta p { margin-top: 8px; font-size: 20px; line-height: 28px; color: var(--text); }
.type-cta .btn { margin-top: 16px; padding: 0 24px; }

.f-price { overflow: hidden; }
.f-price .b6 { left: calc(50% - 827px); top: 81px; width: 415px; height: 413px; filter: blur(150px); }
.f-price .b7 { left: calc(50% + 412px); top: 457px; width: 415px; height: 413px; filter: blur(150px); }
.f-price .head { margin-bottom: 64px; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.price { position: relative; padding: 40px 35px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 4px 28px rgba(0,106,255,.1); }
.price h3 { display: flex; align-items: center; justify-content: space-between; height: 29px; font-size: 20px; color: #606060; }
.price .amount { margin-top: 12px; margin-bottom: 4px; font-size: 40px; line-height: 48px; font-weight: 800; }
.price .amount small { margin-left: 12px; font-size: 16px; font-weight: 700; color: #888; }
.price p { margin-top: 16px; font-size: 16px; line-height: 22px; color: var(--text); }
.price ul { margin-top: 17px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 9.8px; }
.price li { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 25.2px; font-weight: 700; }
.price li::before { content: ""; width: 24px; height: 24px; background: url(images/icon-check-blue.webp) center / contain; }
.price .btn { letter-spacing: -.04em; display: flex; width: 100%; height: 52px; margin-top: 20px; border-radius: 26px; padding: 0; }
.price .btn-line { height: 53px; }
.price.standard, .price.premium { color: #fff; border: 0; }
.price.standard { background: linear-gradient(47deg, #121c2e 37%, #21437e); box-shadow: 0 4px 15px rgba(0,25,61,.3); }
.price.premium { background: linear-gradient(52deg, #121c2e 36%, #21437e); border: 1px solid var(--line); }
.price.standard h3, .price.premium h3, .price.standard p, .price.premium p, .price.standard .amount small { color: #fff; }
.price.premium .amount small { color: #fff; }
.price.standard ul { border-color: rgba(255,255,255,.3); }
.price.standard li::before, .price.premium li::before { background-image: url(images/icon-check-white.webp); }
.price .btn-blue { box-shadow: none; }
.best { height: 29px; padding: 0 14px; border-radius: 15px; background: var(--blue); color: #fff; font-size: 12px; line-height: 29px; }
.extra-cost { display: flex; align-items: center; gap: 16px; width: fit-content; max-width: 100%; height: 75px; margin: 64px auto 0; padding: 0 29px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 6px 24px #e6efff; font-size: 16px; color: var(--text); }
.extra-cost .chip { flex: none; height: 25px; padding: 0 14px; border-radius: 13px; background: var(--pale); line-height: 25px; }

/* ---------- case ---------- */
.c-hero { height: 643px; padding-top: 150px; color: #fff; background: #000 url(images/case-hero.jpg) center / cover; }
.c-hero .head p { color: #fff; }
.c-list { padding: 150px 0; }
.c-list-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; }
.c-list-head h2 { font-size: 40px; line-height: 56px; }
.c-list-head span { font-size: 16px; line-height: 22.4px; font-weight: 700; color: #888; }
.c-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.c-card { border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.c-card > img { width: 100%; height: 300px; object-fit: cover; }
.c-card .body { padding: 28px; }
.c-card .meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; color: #888; }
.c-card .meta b { font-weight: 700; height: 28px; padding: 0 14px; border-radius: 14px; background: #e6efff; color: var(--blue); font-size: 16px; line-height: 28px; letter-spacing: 0; white-space: nowrap; }
.c-card h3 { margin-top: 7.8px; font-size: 26px; line-height: 36.4px; }
.c-card p { margin-top: 7.8px; font-size: 20px; line-height: 28px; letter-spacing: 0; color: var(--text); }
.c-card .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.c-card .tags span { height: 26px; padding: 0 14px; border-radius: 13px; background: #f6f7f9; color: #606060; font-size: 14px; line-height: 26px; font-weight: 700; }
.c-banner { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; min-height: 382px; margin-top: 40px; padding: 69px 100px 0; border-radius: 24px; background: var(--navy); color: #fff; }
.c-banner .pill { background: #293347; color: #fff; letter-spacing: 0; }
.c-banner h3 { margin-top: 20px; font-size: 40px; line-height: 56px; }
.c-banner p { margin-top: 20px; font-size: 18px; line-height: 25px; font-weight: 700; color: #b8c4d6; }
.c-banner .btn { margin-top: 21px; }
.c-banner > img { width: 280px; margin: -29px 0 40px; flex: none; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .feat-grid { grid-template-columns: repeat(2, 295px); }
  header nav { margin-left: auto; }
  .util .lang { margin-left: 32px; }
  .util { margin-left: 32px; }
  .case-row { width: 100%; margin-left: 0; grid-template-columns: repeat(2, 1fr); }
  .proc-grid { grid-template-columns: repeat(2, 290px); }
  .move-grid, .biz-grid { grid-template-columns: repeat(2, minmax(0, 500px)); }
  .auto-flow { grid-template-columns: 1fr; justify-items: center; gap: 0; }
  .auto-node { width: 160px; transform: rotate(90deg); margin: -48px 0; }
  /* the connectors turn vertical; the circle (icon + label) is turned back upright around its own center */
  .auto-node .auto-face { transform-box: view-box; transform-origin: 619.5px 3794.75px; transform: rotate(-90deg); }
  .econ-steps { flex-wrap: wrap; gap: 40px 24px; margin: -71px 0 0; }
  .econ-steps li + li::after { display: none; }
  .data-layout { grid-template-columns: 1fr; gap: 40px; justify-items: center; }
  .r-data .tri { display: none; }
  .data-panel { width: min(754px, 100%); }
  .data-panel .dash { width: calc(100% + 40px); }
  .policy { width: min(560px, 100%); }
  .scene-cols, .scene-row { grid-template-columns: 1fr; margin-left: 0; justify-items: center; }
  .scene-cols .col.shift { padding-top: 0; }
  /* one column: all scene cards share one width (= card 01), even side padding, phone left + copy fills the rest */
  .scene-cols, .scene-row { justify-items: stretch; }
  .scene, .scene.wide, .scene.survey, .scene-cols .scene, .scene-row .scene { width: min(854px, 100%); height: auto; margin-left: auto; margin-right: auto; padding: 36px 48px; }
  .scene .body, .scene.wide .body, .scene.survey .body { gap: 40px; justify-content: center; } /* phone + copy centered as a pair */
  .scene h4 { justify-content: center; }
  .scene .phone, .scene-row .scene .phone, .scene.survey .phone, .scene.wide .photo { margin: 0; }
  .scene .copy, .scene-cols .scene .copy, .scene.wide .copy { position: static; transform: none; flex: 0 1 auto; min-width: 0; margin-top: 0; }
  .scene.wide .photo { width: min(501px, 58%); height: auto; aspect-ratio: 501 / 316; object-fit: cover; }
  .scene.survey .phone { width: min(468px, 60%); }
  .stage.s2, .stage.s3, .stage.s4 { margin-left: 0; text-align: center; } /* cards are one centered column here */
  .scene.survey { margin: 0 auto; }
  .extra-grid { grid-template-columns: minmax(0, 600px); }
  .cms-layout { grid-template-columns: 516px 389px; }
  .cms-menu { display: none; }
  .report-layout { grid-template-columns: 480px; }
  .type-grid { grid-template-columns: repeat(2, 402px); }
  .price-grid { grid-template-columns: minmax(0, 420px); justify-content: center; }
}
@media (max-width: 960px) {
  .feat-row, .feat-row.rev { flex-direction: column; align-items: stretch; }
  .feat-row.rev { flex-direction: column-reverse; }
  .feat-phone { width: 100%; max-width: 500px; height: auto; margin: 0 auto; }
  .feat-phone img { display: block; height: auto; }
  .feat-txt, .feat-row.rev .feat-txt { width: auto; padding: 0 8px; text-align: center; }
  header .wrap { height: 70px; }
  .util { margin-left: 16px; }
  .util > a { display: none; }
  .util .lang { margin-left: 0; gap: 14px; font-size: 14px; }
  header nav a { width: auto; padding: 0 12px; }
  .head h1, .head h2, .cta h2, .c-banner h3, .c-list-head h2 { font-size: 30px; line-height: 1.4; }
  .head p, .cta p { font-size: 17px; line-height: 1.5; }
  section, .d-sec, .features, .features-all, .types, .flow-section, .stats, .cases, .process, .c-list { padding: 88px 0; }
  .r-operation { padding-bottom: 88px; }
  .hero { height: 600px; }
  .hero::before { background: rgba(0,0,0,.45); }
  .hero .wrap { padding-top: 90px; }
  .hero h1 { font-size: 64px; line-height: 1.2; }
  .hero h2 { font-size: 28px; }
  .steps { display: none; }
  .type, .type + .type { height: auto; }
  .type .img { position: static; width: 100%; height: 260px; object-fit: cover; object-position: 75% center; }
  .type.festa .img { width: 100%; height: 260px; }
  .type .txt { padding: 40px 28px; }
  .type h3 { font-size: 40px; line-height: 1.4; }
  .type .btn { margin-top: 32px; }
  .flow-section .glow { display: none; }
  .stat-grid, .c-grid { grid-template-columns: 1fr; }
  .stat-grid { width: min(560px, 100%); }
  .move-grid, .biz-grid, .why-grid, .persona-grid { grid-template-columns: minmax(0, 500px); }
  .persona.wide { width: 100%; grid-column: auto; }
  .d-hero { height: auto; padding: 72px 0; }
  .d-hero h1 { font-size: 38px; line-height: 1.35; }
  .d-hero p { font-size: 17px; }
  .anchor-bar .wrap { overflow-x: auto; }
  .anchor-bar nav { gap: 24px; font-size: 15px; }
  .anchor-bar .btn { display: none; }
  .cms-layout, .report-layout { grid-template-columns: minmax(0, 516px); }
  .cms-card { height: auto; padding-bottom: 20px; }
  .cms-card img { width: calc(100% + 40px); }
  .report-card { height: auto; }
  .report-card img { width: calc(100% + 40px); }
  .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type-grid { grid-template-columns: minmax(0, 402px); }
  .c-hero { height: auto; padding: 88px 0; }
  .c-banner { flex-direction: column; align-items: center; padding: 48px 28px; }
  .c-banner > div { align-self: stretch; }
  .c-banner > img { margin: 0; width: 220px; }
  .cta { height: auto; padding: 72px 20px; }
}
@media (max-width: 760px) {
  header .wrap { height: auto; flex-wrap: wrap; padding: 12px 0 6px; }
  header .logo img { width: 90px; height: 31px; }
  header nav { width: 100%; margin: 6px 0 0; justify-content: space-between; font-size: 14px; }
  header .util { order: 1; margin-left: auto; }
  header nav { order: 2; }
  header nav a { flex: 1; padding: 0; height: 36px; }
  .hero .eyebrow, .hero .desc { font-size: 15px; line-height: 1.5; }
  .hero .desc br, .d-hero p br { display: none; }
  .hero h1 { font-size: 52px; }
  .hero h2 { font-size: 22px; line-height: 1.3; }
  .btns { flex-wrap: wrap; }
  .feat-subs { grid-template-columns: minmax(0, 400px); justify-content: center; }
  .feat-grid { grid-template-columns: minmax(0, 295px); }
  .feat-txt h3 { font-size: 24px; line-height: 34px; }
  .feat-txt p { font-size: 16px; line-height: 24px; }
  .case-row, .proc-grid { grid-template-columns: minmax(0, 320px); justify-content: center; }
  .stat strong { font-size: 46px; }
  .move { min-height: 0; }
  .move > img { margin-top: 24px; } /* min-height used to make this gap on desktop */
  .move h3, .why-card h3, .scene h4 { font-size: 21px; }
  .move.dark { padding: 28px; }
  .why-card, .register { padding-left: 24px; padding-right: 24px; }
  .register { height: auto; padding-bottom: 32px; }
  .auto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
  .auto-grid article { height: auto; padding: 8px 10px 16px; }
  .auto-grid h3 { font-size: 18px; }
  .auto-grid p { font-size: 14px; }
  .benefits li { font-size: 18px; }
  .econ-visual { width: 100%; margin-top: 0; }
  .econ-steps { margin: 24px 0 0; gap: 32px 12px; }
  .econ-steps li, .econ-steps li:first-child { flex-basis: calc(50% - 6px); height: 140px; font-size: 17px; }
  .data-panel { padding: 20px; width: 100%; }
  .data-panel .dash { width: calc(100% + 40px); }
  .data-chips { grid-template-columns: repeat(2, 1fr); }
  .data-chips li { font-size: 15px; min-height: 52px; padding: 6px 14px; }
  .policy article { height: auto; padding: 16px; }
  .policy img { width: 72px; height: 72px; }
  .policy h4 { font-size: 19px; }
  .persona { height: auto; padding: 40px 20px 24px; gap: 12px; }
  .persona img { width: 96px; height: 96px; }
  .persona h3 { font-size: 20px; }
  .scene, .scene.wide, .scene.survey, .scene-cols .scene, .scene-row .scene { width: 100%; height: auto; padding: 24px 20px; }
  .scene .body, .scene.wide .body, .scene.survey .body { flex-direction: column; align-items: center; gap: 20px; }
  .scene .copy { text-align: center; } /* title, phone and copy share one center line on phones */
  .scene .phone, .scene.wide .photo, .scene-row .scene .phone, .scene.survey .phone, .scene-cols .scene .phone { width: min(100%, 290px); margin: 0 auto; }
  .scene.wide .photo { width: 100%; }
  .scene-cols .scene .copy { position: static; transform: none; }
  .scene.wide .copy { margin-top: 0; }
  .flow .f1 img, .flow .f2 img, .flow .f3 img, .flow .f4 img { left: auto; right: 6px; }
  .flow p { padding-right: 90px; }
  .stage h3 { font-size: 22px; }
  .extra { height: auto; padding: 30px 20px; }
  .extra > img, .extra.navy > img { width: 100%; }
  .cms-layout { grid-template-columns: 1fr; }
  .cms-list article { height: auto; padding-bottom: 16px; }
  .report-grid { grid-template-columns: 1fr; }
  .type-tabs button { height: 40px; padding: 0 14px; font-size: 14px; }
  .type-grid article { height: auto; padding: 24px 22px; }
  .type-grid .tags { flex-wrap: wrap; }
  .type-cta h3 { font-size: 22px; }
  .type-cta p { font-size: 16px; }
  .extra-cost { height: auto; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 20px; font-size: 14px; }
  .c-card .meta { flex-wrap: wrap; }
  .c-card h3 { font-size: 22px; }
  .c-card p { font-size: 17px; }
  .c-banner p { font-size: 15px; }
  .cta p br { display: none; }
  footer .info span { display: block; }
  footer .info span + span::before { content: none; }
}
/* "운영 효율성 향상…" checks: when the single row wraps, 2 aligned columns (1 on phones), block centered */
@media (max-width: 1040px) {
  .benefits { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 12px 40px; }
}
@media (max-width: 560px) {
  .benefits { grid-template-columns: max-content; }
}

/* festival type tabs: once the single row no longer fits, an even grid so wrapped rows line up */
/* KO fits one row above ~1130px; EN labels never fit one row (1262px > 1240px), so EN always uses the grid */
html[lang="en"] .type-tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: min(720px, 100%); margin-left: auto; margin-right: auto; }
html[lang="en"] .type-tabs button { height: auto; min-height: 47px; padding: 6px 8px; line-height: 1.25; }
@media (max-width: 1140px) {
  .type-tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: min(720px, 100%); margin-left: auto; margin-right: auto; }
  .type-tabs button { height: auto; min-height: 47px; padding: 6px 8px; line-height: 1.25; }
}
@media (max-width: 560px) {
  .type-tabs, html[lang="en"] .type-tabs { grid-template-columns: repeat(2, 1fr); }
  .type-tabs button, html[lang="en"] .type-tabs button { min-height: 40px; }
}

/* comparison table → one card per row when the 1000px table no longer fits; #page-content outranks the desktop cell rules */
@media (max-width: 1040px) {
  #page-content .table-scroll { overflow: visible; padding: 0; margin: 0; }
  #page-content .cmp { display: block; width: 100%; filter: none; text-align: left; }
  #page-content .cmp thead { display: none; }
  #page-content .cmp tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
  #page-content .cmp tr { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
  #page-content .cmp tbody th, #page-content .cmp tbody td { display: block; width: auto; height: auto; padding: 12px 16px; border: 0; border-radius: 12px; font-size: 16px; line-height: 22.4px; }
  #page-content .cmp tbody th { padding: 0 0 4px; background: none; font-size: 18px; }
  #page-content .cmp tbody td:nth-child(3) { border: 1px solid var(--blue); }
  #page-content .cmp td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 13px; line-height: 18px; font-weight: 700; opacity: .75; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .slides div { transition: none; } }