/* ==========================================================================
   pages/data.css — 데이터 서비스(DaaS·IaaS·RaaS) 전용
   ========================================================================== */

.data-intro { text-align: center; }
.data-intro__title {
  font-size: clamp(26px, 1.5625vw + 10px, 40px);
  font-weight: var(--font-weight-bold); line-height: 1.4;
  color: var(--color-neutral-900);
}
.data-intro__title mark { background: none; color: var(--color-blue-500, #3182f6); }
.data-hero-intro { padding-bottom: min(32px, 1.6667vw); }
.data-hero-intro + .page-section { padding-top: 0; }
.data-chip {
  display: inline-block; margin: 0 0 var(--space-16); padding: 12px 32px;
  border-radius: var(--radius-full); background: #3182f6; color: var(--color-white);
  font-size: 1.25rem; font-weight: var(--font-weight-bold);
}
.data-chip-title {
  margin: var(--space-48) auto 0; width: max-content; padding: 12px 32px;
  border-radius: var(--radius-full); background: #3182f6; color: var(--color-white);
  font-size: 1.125rem; font-weight: var(--font-weight-bold); text-align: center;
}

.data-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16);
  margin-top: var(--space-48); list-style: none;
}
.data-cards:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
.data-card { text-align: center; }
.data-card__img { display: block; width: 100%; height: auto; border-radius: var(--radius-16); background: #e8f3ff; }
.data-card__title {
  margin-top: var(--space-24); font-size: clamp(20px, 1.25vw, 24px); font-weight: var(--font-weight-bold);
  line-height: 1.4; color: var(--color-neutral-900); text-align: center;
}
.data-card__desc {
  margin-top: var(--space-8); font-size: clamp(16px, 0.9375vw, 18px); font-weight: var(--font-weight-medium);
  line-height: 1.6; color: var(--color-neutral-700); text-align: center;
}

.data-persona-section { background: #e8f3ff; }
.data-persona-section .data-intro__title { margin-bottom: var(--space-48); }
.persona-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24);
  max-width: 1040px; margin: 0 auto; list-style: none;
}
.persona-card { border: 2px solid #3182f6; border-radius: var(--radius-16); overflow: hidden; background: var(--color-white); }
.persona-card__head { padding: 28px 24px; background: #3182f6; color: var(--color-white); text-align: center; }
.persona-card__ko { font-size: clamp(22px, 1.4584vw, 28px); font-weight: var(--font-weight-bold); line-height: 1.4; color: var(--color-white); }
.persona-card__en { margin-top: var(--space-8); font-size: clamp(16px, 1.0417vw, 20px); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-white); }
.persona-card__body { padding: 28px 24px; text-align: center; }
.persona-card__count {
  display: inline-block; padding: 4px 16px; border-radius: var(--radius-full);
  background: #e8f3ff; color: var(--color-neutral-900); font-size: 0.875rem; font-weight: var(--font-weight-bold);
}
.persona-card__desc { margin-top: var(--space-16); font-size: clamp(16px, 0.9375vw, 18px); font-weight: var(--font-weight-medium); line-height: 1.6; color: var(--color-neutral-700); text-align: center; }

.data-area-section { background: var(--color-blue-50, #E8F3FF); }
.data-area-section .data-intro__title { margin-bottom: var(--space-48); }
.area-panel__img { display: block; width: 100%; height: auto; }

.lime-card {
  max-width: 560px; margin: var(--space-48) auto 0; padding: var(--space-48) var(--space-24);
  background: var(--color-neutral-100); border-radius: var(--radius-16); text-align: center;
}
.lime-card__logo { display: block; width: 104px; height: 104px; margin: 0 auto; border-radius: var(--radius-16); }
.lime-card__title {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: min(24px, 1.25vw);
  margin-top: var(--space-16); color: var(--color-blue-500); text-align: center; font-weight: var(--font-weight-bold);
}
.lime-card__title mark { background: none; color: inherit; font-size: clamp(32px, 2.5vw, 48px); line-height: 1.3; }
.lime-card__title span { font-size: clamp(20px, 1.4584vw, 28px); line-height: 1.4; }
.lime-card__desc { margin-top: var(--space-8); font-size: clamp(16px, 0.9375vw, 18px); font-weight: var(--font-weight-medium); line-height: 1.6; color: var(--color-neutral-700); text-align: center; }

.panel-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16);
  margin: var(--space-24) 0 0; list-style: none;
}
.panel-stat { padding: var(--space-32) var(--space-24); background: #e8f3ff; border-radius: var(--radius-16); text-align: center; }
.panel-stat img { display: block; margin: 0 auto var(--space-12); }
.panel-stat__label { font-size: clamp(14px, 0.8334vw, 16px); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-neutral-700); text-align: center; }
.panel-stat__value { margin-top: 4px; font-size: clamp(24px, 1.6667vw, 32px); font-weight: var(--font-weight-bold); line-height: 1.4; color: var(--color-neutral-900); text-align: center; }
.panel-stat__note { margin-top: var(--space-8); font-size: 10px; font-weight: var(--font-weight-semibold); line-height: 1.2; color: var(--color-neutral-700); text-align: center; }
.gender-split { display: flex; justify-content: center; gap: min(48px, 2.5vw); margin-top: var(--space-16); }
.gender-split__item { display: flex; flex-direction: column; align-items: center; }
.gender-split dt { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); font-size: clamp(14px, 0.8334vw, 16px); font-weight: var(--font-weight-medium); line-height: 1; color: var(--color-neutral-700); text-align: center; }
.panel-stat .gender-split__icon { display: block; width: 20px; height: 44px; margin: 0; }
.gender-split dd { margin-top: 4px; font-size: clamp(22px, 1.4584vw, 28px); font-weight: var(--font-weight-bold); line-height: 1.4; color: var(--color-neutral-900); text-align: center; }
.gender-split__unit { margin-left: 1px; font-size: clamp(16px, 1.0417vw, 20px); font-weight: var(--font-weight-bold); line-height: 1.4; }

.age-bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; margin: var(--space-16) calc(-1 * var(--space-12)) 0; list-style: none; }
.age-bars li { display: flex; flex-direction: column; align-items: center; }
.age-bar__value { order: 1; margin-bottom: 4px; font-size: 12px; font-weight: var(--font-weight-semibold); line-height: 1; color: var(--color-neutral-900); text-align: center; }
.age-bar__bar { order: 2; display: block; width: 60%; height: calc(var(--v) * 1.6px); background: #3182f6; border-radius: 2px 2px 0 0; }
.age-bar__label {
  order: 3; align-self: stretch; padding-top: 6px; border-top: 1px solid var(--color-neutral-900);
  font-size: 10px; font-weight: var(--font-weight-semibold); line-height: 1; color: var(--color-neutral-700); text-align: center; white-space: nowrap;
}
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .age-bar__label { line-height: 1.2; white-space: normal; word-break: keep-all; min-height: calc(2.4em + 7px); }
}
.age-bars li:nth-child(2) { --i: 1; }
.age-bars li:nth-child(3) { --i: 2; }
.age-bars li:nth-child(4) { --i: 3; }
.age-bars li:nth-child(5) { --i: 4; }
.js-enabled .age-bar__bar {
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: calc(var(--slide-up-delay, 0ms) + 500ms + var(--i, 0) * 100ms);
}
.js-enabled .age-bar__value {
  opacity: 0; transition: opacity 0.4s ease;
  transition-delay: calc(var(--slide-up-delay, 0ms) + 1000ms + var(--i, 0) * 100ms);
}
.js-enabled .panel-stat.is-in-view .age-bar__bar { transform: scaleY(1); }
.js-enabled .panel-stat.is-in-view .age-bar__value { opacity: 1; }
/* [Mod] 261020  */

.trait-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-12);
  margin: var(--space-32) 0 0; list-style: none;
}
.trait-card { padding: var(--space-32) var(--space-16); background: #e8f3ff; border-radius: var(--radius-16); text-align: center; }
.trait-card__icon { display: block; width: 48px; height: 48px; margin: 0 auto 10px; }
.trait-card__text { font-size: clamp(14px, 0.8334vw, 16px); font-weight: var(--font-weight-semibold); line-height: 1.6; color: var(--color-neutral-900); text-align: center; }

.data-lime-section { padding-bottom: 0; }
.data-trait-section { padding-top: min(48px, 2.5vw); }
.data-trait-section > .container > .data-chip-title:first-child { margin-top: 0; }

.data-partner-rows { display: grid; gap: var(--space-16); margin-top: var(--space-32); }
.data-partners { display: flex; flex-wrap: nowrap; justify-content: center; gap: var(--space-16); margin: 0; min-width: 0; }
.data-partners .partner-tile { flex: 0 1 min(128px, 6.6667vw); height: min(150px, 7.8125vw); padding: 0 var(--space-4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.data-partners--cols-10 {
  width: calc(10 * var(--pt-w, 128px) + 9 * var(--space-16));
  margin-inline: calc((var(--header-w) - (10 * var(--pt-w, 128px) + 9 * var(--space-16))) / 2);
}
.data-partners .partner-tile { min-width: 0; }
.data-partners .partner-tile__logo { width: min(88px, 4.5833vw); height: min(88px, 4.5833vw); margin-inline: auto; }

.services-faq-title { font-size: 2rem; font-weight: var(--font-weight-bold); color: var(--color-neutral-900); line-height: 1.4; }

@media (max-width: 63.99rem) {
  .data-cards { grid-template-columns: 1fr; }
  .data-cards:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
  .persona-grid { grid-template-columns: 1fr; }
  .panel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.js-enabled .data-page main .slide-up {
  transform: translate(0, 48px);
  transition: opacity 0.9s cubic-bezier(0.33, 1, 0.68, 1), transform 0.9s cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: var(--slide-up-delay, 0ms);
}
.js-enabled .data-page main .slide-up.is-in-view { transform: translate(0, 0); }
.js-enabled .data-page .data-cards .data-card:nth-child(2),
.js-enabled .data-page .persona-grid .persona-card:nth-child(2),
.js-enabled .data-page .trait-grid .trait-card:nth-child(2),
.js-enabled .data-page .panel-stats .panel-stat:nth-child(2) { --slide-up-delay: 120ms; }
.js-enabled .data-page .data-cards .data-card:nth-child(3),
.js-enabled .data-page .persona-grid .persona-card:nth-child(3),
.js-enabled .data-page .trait-grid .trait-card:nth-child(3),
.js-enabled .data-page .panel-stats .panel-stat:nth-child(3) { --slide-up-delay: 240ms; }
.js-enabled .data-page .persona-grid .persona-card:nth-child(4),
.js-enabled .data-page .trait-grid .trait-card:nth-child(4),
.js-enabled .data-page .panel-stats .panel-stat:nth-child(4) { --slide-up-delay: 360ms; }
.js-enabled .data-page .trait-grid .trait-card:nth-child(5) { --slide-up-delay: 420ms; }
.js-enabled .data-page .trait-grid .trait-card:nth-child(6) { --slide-up-delay: 480ms; }

@media (max-width: 63.99rem) {
  .data-hero-intro { padding-bottom: 0; }
  .data-chip { margin-bottom: 8px; padding: 6px 12px; font-size: min(4.4444vw, 0.8044vw + 13.11px); }
  .data-intro__title { font-size: min(5.5556vw, 1.0055vw + 16.38px); }
  .data-hero-intro .data-intro__title { font-size: min(8.8889vw, 1.6089vw + 26.2px); }
  .data-cards { gap: 32px; margin-top: 32px; }
  .data-card__img { border-radius: var(--radius-12); }
  .data-card__title { margin-top: 16px; font-size: min(6.6667vw, 1.2066vw + 19.66px); }
  .data-card__desc { font-size: min(4.4444vw, 0.8044vw + 13.11px); }

  .data-persona-section .data-intro__title, .data-area-section .data-intro__title { margin-bottom: 32px; }
  .persona-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .persona-card__head { padding: 16px; }
  .persona-card__ko { font-size: 18px; }
  .persona-card__en { margin-top: 4px; font-size: min(3.8889vw, 0.7039vw + 11.46px); }
  .persona-card__body { padding: 20px 16px; }
  .persona-card__count { font-size: min(3.8889vw, 0.7039vw + 11.46px); }
  .persona-card__desc { margin-top: 12px; font-size: min(4.4444vw, 0.8044vw + 13.11px); }

  .lime-card { margin-top: 32px; padding: 32px 20px; }
  .lime-card__logo { width: 80px; height: 80px; }
  .lime-card__title { gap: 8px; }
  .lime-card__title mark { font-size: 24px; }
  .lime-card__title span { font-size: 18px; }
  .lime-card__desc { font-size: min(4.4444vw, 0.8044vw + 13.11px); }
  .data-chip-title { margin-top: 40px; padding: 8px 20px; font-size: min(4.4444vw, 0.8044vw + 13.11px); }

  .panel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  .panel-stat { padding: 20px 8px; }
  .panel-stat img { width: 40px; height: 40px; margin-bottom: 8px; }
  .panel-stat__label { font-size: min(3.8889vw, 0.7039vw + 11.46px); }
  .panel-stat__value { font-size: 20px; }
  .panel-stat__note { font-size: min(3.3333vw, 0.6033vw + 9.83px); line-height: 1.3; letter-spacing: -0.04em; }
  .gender-split { gap: 20px; margin-top: 8px; }
  .panel-stat:has(> .gender-split) { display: flex; flex-direction: column; }
  .panel-stat > .gender-split { flex: 1 1 auto; align-items: center; }
  .gender-split dt { font-size: min(3.8889vw, 0.7039vw + 11.46px); }
  .panel-stat .gender-split__icon { width: 14px; height: 30px; }
  .gender-split dd { font-size: 20px; }
  .gender-split__unit { font-size: min(4.4444vw, 0.8044vw + 13.11px); }
  .age-bars { margin-inline: -4px; }
  .age-bar__bar { height: calc(var(--v) * 1.2px); }
  .age-bar__label { font-size: min(2.7778vw, 0.5028vw + 8.19px); line-height: 1.2; letter-spacing: -0.04em; white-space: normal; word-break: keep-all; box-sizing: border-box; min-height: calc(2.4em + 7px); }
  .age-bar__value { font-size: min(3.3333vw, 0.6033vw + 9.83px); }

  .trait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  .trait-card { padding: 24px 12px; }
  .trait-card__icon { width: 40px; height: 40px; }
  .trait-card__text { font-size: min(4.4444vw, 0.8044vw + 13.11px); }
  .data-trait-section { padding-top: min(11.1111vw, 2.0111vw + 32.76px); }
}