@charset "UTF-8";
:root {
}

* {
  padding: 0;
  margin: 0;
  box-sizing: unset;
}

p {
  word-break: break-all;
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* flex 는 전역이 아니라 필요한 섹션이 직접 소유한다 — HTML 에 flex/flex-col/align-c 유틸을 붙일 것 */
section {
  overflow: hidden;
  width: 100%;
}

html {
  scroll-behavior: smooth;
}

.flowhid {
  overflow: hidden;
}

.hide {
  display: none !important;
}

.hideopa {
  opacity: 0 !important;
}

.show {
  opacity: 1 !important;
}

@keyframes ddm3 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: rotate(-8deg);
  }
  65% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ddm4 {
  0% {
    transform: scale(1);
  }
  25% {
    transform: rotate(-2deg);
  }
  50% {
    transform: scale(1.05);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blk3 {
  0% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rotate_image {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes scaleOpa {
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}
@keyframes scaleOpa2 {
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
@keyframes ddm {
  0% {
    transform: scale(1);
  }
  50% {
    transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -30);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes rotate_imageY {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes ddm2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: translateY(20px);
  }
  75% {
    transform: scale(1.02);
    transform: translateY(10px);
  }
  100% {
    transform: scale(1);
    transform: translateY(0px);
  }
}
@keyframes scaleOpa3 {
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}
@keyframes smoke {
  0% {
    transform: translateY(30%) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-30%) scale(1.1);
    opacity: 0;
  }
}
.smoke {
  animation: smoke 4s infinite linear;
}

@keyframes light {
  0%, 31%, 34%, 39%, 42%, 47% {
    opacity: 0;
  }
  5%, 30%, 35%, 38%, 43%, 46% {
    opacity: 0.4;
  }
  50%, 55%, 60%, 67%, 51%, 54%, 68%, 100% {
    opacity: 1;
  }
  70% {
    opacity: 0.2;
  }
}
@keyframes marqueeX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes marqueeX_r {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes marqueeY {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes marqueeY_r {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes opa {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes shakeAndFall {
  0% {
    transform: translate(0, -50%) rotate(0);
    opacity: 0;
  }
}
.shakeTwice {
  animation: shakeTwice 2s ease-in-out infinite;
  transform-origin: center;
}

.shakeTwices {
  animation: shakeTwices 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes shakeTwice {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(5deg);
  }
  20% {
    transform: rotate(-5deg);
  }
  30% {
    transform: rotate(4deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes shakeTwices {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(3deg);
  }
  20% {
    transform: rotate(-3deg);
  }
  30% {
    transform: rotate(2deg);
  }
  40% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
div.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.swiper-wrapper.flow {
  pointer-events: none;
  transition-timing-function: linear;
}

section {
  font-family: var(--font-pretendard);
  font-weight: 300;
  font-size: var(--bodyL);
  letter-spacing: -0.04vw;
}

section img {
  width: 100%;
}

section:not(.map_section) img {
  pointer-events: none;
}

.swiper-button-disabled {
  opacity: 0.3;
}

.noto {
  font-family: var(--font-noto-serif);
}

.notokr {
  font-family: var(--font-noto-serif);
}

.exbold {
  font-weight: 800;
}

.bold {
  font-weight: 700;
}

.sebold {
  font-weight: 600;
}

.medium {
  font-weight: 500;
}

.regular {
  font-weight: 400;
}

.flight {
  font-weight: 200;
}

.thin {
  font-weight: 100;
}

.animate-blk {
  animation: blk 1s infinite ease-in-out;
}

.scaleOpa {
  animation: scaleOpa infinite 2s;
}

.scaleOpa2 {
  animation: scaleOpa2 infinite 2s;
}

.light {
  animation: light infinite 5s;
}

.rotate_img {
  animation: rotate_image 10s infinite linear;
}

.white {
  color: white;
}

.txct {
  text-align: center;
}

.lh {
  line-height: 1.5;
}

/* reveal 대신 사용 start */
/* 왼쪽부터 나타나기 */
.clip_off02 {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: all 0.8s;
}

/* 가운데에서 나타나기 */
.clip_off {
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  transition: all 0.8s;
}

/* gsap에서 넣을 class */
.clip_on {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}

/* reveal 대신 사용 end */
.absol_cover {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.max_width {
  width: unset !important;
  max-width: 101%;
}

.back_img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

/* image_sd */
.image_sd_wrap {
  overflow: hidden;
}

.image_sd {
  animation: marqueeX 20s infinite linear;
}

.image_sd .absol {
  left: 100%;
}

.image_sd_r {
  animation: marqueeX_r 20s infinite linear;
}

.image_sd_r .absol {
  right: 100%;
}

/* image_sd end */
/* y_slide start */
.slide_y_wrap {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0%;
  overflow: hidden;
}

.slide_y {
  animation: marqueeY 20s infinite linear;
}

.slide_y img.absol {
  top: 100%;
}

.slide_y_r {
  animation: marqueeY_r 20s infinite linear;
}

.slide_y_r img.absol {
  bottom: 100%;
}

/* y_slide end */
/* flow_sd 가로 (여러 이미지 마퀴) start */
.flow_sd {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
.flow_sd_move {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeX 20s infinite linear;
}
.flow_sd_move_r {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeX_r 20s infinite linear;
}
.flow_sd_move_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flow_sd_move_item02 {
  left: 100%;
}
.flow_sd_move_item02_r {
  right: 100%;
}
.flow_sd_img {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* flow_sd 가로 end */
/* flow_sd 세로 (여러 이미지 마퀴) start */
.flow_sd_y {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
.flow_sd_y_move {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeY 10s infinite linear;
}
.flow_sd_y_move_r {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeY_r 10s infinite linear;
}
.flow_sd_y_move_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}
.flow_sd_y_move_item02 {
  top: 100%;
}
.flow_sd_y_move_item02_r {
  bottom: 100%;
}
.flow_sd_y_img {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* flow_sd 세로 end */
/* swiper-arr */
.btn_arr {
  z-index: 2;
  cursor: pointer;
}

.arr_next {
  transform: rotateY(180deg);
}

/* swiper-arr */
iframe {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-lock {
  display: none !important;
}

.swiper {
  margin: 0;
  z-index: 0;
}

b {
  font-weight: 700;
}

.obj > img {
  height: 100%;
  object-fit: cover;
}

/* 마커디자인 */
.map_marker {
  position: relative;
  display: inline-block;
}

/* 말풍선 텍스트 박스 */
.map_marker_text {
  background: #711835;
  border: 1px solid #fff;
  padding: calc(var(--px)*9) calc(var(--px)*19);
  border-radius: 100px;
  font-size: var(--bodyS);
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* 말풍선 꼬리 (삼각형 테두리) */
.map_marker_tail {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}

/* 말풍선 꼬리 내부 (흰색 채우기) */
.map_marker_tail::after {
  content: "";
  position: absolute;
  top: -9px;
  left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #711835;
}

/* 퍼블시작 */

/* ===== 모바일 지도 터치 잠금 오버레이 (map-zoom 스킬 §3) ===== */
.map-touch-lock-parent {
  position: relative;
}
.map-touch-lock {
  position: absolute;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.58);
  border: 0;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.map-touch-lock-text {
  display: block;
  padding: 0 calc(var(--px) * 20);
  font-size: var(--bodyM);
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
}
.is-map-touch-unlocked .map-touch-lock {
  opacity: 0;
  pointer-events: none;
}

/* IMG:AUTO acon08 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.acon08__card-emblem--about {
    width: calc(var(--px)*101);
    aspect-ratio: 101 / 153;
}

.acon08__card-emblem--program {
    width: calc(var(--px)*123);
    aspect-ratio: 123 / 160;
}

.acon08__card-emblem--portfolio {
    width: calc(var(--px)*123);
    aspect-ratio: 123 / 161;
}
/* /IMG:AUTO acon08 */

/* IMG:AUTO acon06 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.acon06__card-emblem--b2b {
    width: calc(var(--px)*109);
    aspect-ratio: 109 / 99;
}

.acon06__card-emblem--uptime {
    width: calc(var(--px)*130);
    aspect-ratio: 130 / 97;
}

.acon06__card-emblem--pricing {
    width: calc(var(--px)*116);
    aspect-ratio: 116 / 86;
}

.acon06__card-emblem--made-to-order {
    width: calc(var(--px)*109);
    aspect-ratio: 109 / 89;
}

.acon06__card-emblem--small-batch {
    width: calc(var(--px)*113);
    aspect-ratio: 113 / 87;
}

.acon06__card-emblem--repeat {
    width: calc(var(--px)*131);
    aspect-ratio: 131 / 86;
}

.acon06__card-emblem--b2g {
    width: calc(var(--px)*119);
    aspect-ratio: 119 / 106;
}

.acon06__card-emblem--channel {
    width: calc(var(--px)*128);
    aspect-ratio: 128 / 96;
}

.acon06__card-emblem--custom {
    width: calc(var(--px)*109);
    aspect-ratio: 109 / 74;
}

.acon06__nav-arrow {
    width: calc(var(--px)*56);
    aspect-ratio: 56 / 56;
}
/* /IMG:AUTO acon06 */

/* IMG:AUTO acon09 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.acon09__profile-photo--01 {
    width: calc(var(--px)*257);
    aspect-ratio: 257 / 395;
}

.acon09__profile-photo--02 {
    width: calc(var(--px)*258);
    aspect-ratio: 258 / 385;
}
/* /IMG:AUTO acon09 */

/* IMG:AUTO acon10 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.acon10__card-star {
    width: calc(var(--px)*23);
    aspect-ratio: 128 / 128;
}
/* /IMG:AUTO acon10 */

@media (max-width: 599px) {
  .map-touch-lock-text {
    font-size: 4.3vw;
    padding: 0 4vw;
  }
}

/* FONT:AUTO main */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.main__inner {
    font-family: var(--font-pretendard);
}

.main__title {
    font-size: calc(var(--px)*70);
    font-weight: 700;
    line-height: 1.2;
}

.main__title-line {
    letter-spacing: -0.05em;
    color: #ffffff;
}

.main__title-accent {
    letter-spacing: -0.05em;
    color: #18ebd4;
}

.main__desc {
    font-size: var(--bodyXL);
    line-height: 1.5;
    color: #ffffff;
}

.main__desc-lead {
    font-weight: 700;
    letter-spacing: -0.05em;
}

.main__desc-body {
    font-weight: 300;
    letter-spacing: -0.05em;
}
/* /FONT:AUTO main */

.main {
  justify-content: flex-start;
  height: calc(var(--px) * 980);
  background-color: #ffffff;
  margin-top: calc(var(--px) * 100);
}
.main__inner {
  gap: calc(var(--px) * 26);
  z-index: 1;
}
.main__frame {
  width: calc(var(--px) * 1800);
  height: calc(var(--px) * 900);
  padding-top: calc(var(--px) * 257);
  overflow: visible;
}
.main__bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--px) * 50);
  overflow: hidden;
  z-index: 0;
}
.main__bg img {
  height: 100%;
}
.main__scroll-down {
  bottom: calc(var(--px) * -62);
}
/* img 를 block 으로 — inline 이면 baseline 아래 여백 7px 이 a 박스에 붙어(102→109)
   bottom 앵커 기준 img 가 7px 위로 밀린다(실측 top 850 vs 정본 857) */
.main__scroll-down img {
  display: block;
}

/* FONT:AUTO acon01 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.acon01__eyebrow {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 300;
    letter-spacing: 0.2em;
    line-height: 0.81;
    color: #ffffff;
}

.acon01__title {
    font-family: var(--font-pretendard);
    font-size: var(--titleL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.05;
}

.acon01__title-lead {
    color: #ffffff;
}

.acon01__title-accent {
    color: #18ebd4;
}

.acon01__desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #ffffff;
}

.acon01__desc-strong {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #ffffff;
}
/* /FONT:AUTO acon01 */

.acon01 {
  position: relative;
  z-index: 1;
  justify-content: flex-start;
  height: calc(var(--px) * 1040);
  /* 프린터 flow 초과분(40px)을 섹션 하단에서 자른다 — 통짜 시안이 acon01 하단에서 하드 컷이다 */
  overflow: hidden;
  background-color: #02000a;
  background-image: url(/images/acon01_bg.webp);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
.acon01__inner {
  width: calc(var(--px) * 834);
  margin-top: calc(var(--px) * 150);
}
.acon01__eyebrow {
  text-transform: uppercase;
}
.acon01__title-lead,
.acon01__title-accent {
  /* inline-block 이면 lead 2줄이 원자 박스가 돼 accent 가 3번째 줄로 감긴다 */
  display: inline;
}
.acon01__title {
  /* spec 의 1.045 는 렌더 줄간격 57.75px — 시안 실측은 약 65.75px(SAD: L1 아래4 / L2 위4) */
  line-height: 1.2;
  margin-top: calc(var(--px) * 42);
}
.acon01__desc {
  /* PSD bbox 834 로는 2번째 문장 렌더폭(835)이 1px 넘쳐 3줄이 된다 — 텍스트는 중앙정렬이라 잉크 위치는 불변 */
  width: calc(var(--px) * 848);
  /* PSD bbox 는 잉크 기준이라 line-height leading(6px)만큼 위로 당겨야 잉크가 시안과 맞는다 */
  margin-top: calc(var(--px) * 22);
}
.acon01__desc-strong {
  margin-top: calc(var(--px) * 30);
}
.acon01__printer {
  position: relative;
  z-index: 1;
  /* 위 텍스트를 6px 당긴 만큼 되돌림 — 프린터 자체는 시안과 0px 정합 */
  margin-top: calc(var(--px) * 73);
}
.acon01__marquee {
  left: calc(var(--px) * -166.5);
  top: calc(var(--px) * 740);
  z-index: 0;
  /* 2벌(원본+복제) + 간격 60 을 담는 폭 — -50% 이동량이 정확히 1벌+간격이 되어야 seamless */
  width: calc(var(--px) * (3077 + 60) * 2);
  height: calc(var(--px) * 218);
}
.acon01__marquee-item {
  flex-shrink: 0;
  margin-right: calc(var(--px) * 60);
}
.acon01__marquee-word {
  flex-shrink: 0;
}
/* 노즐 스파크 — 발원점 = 프린터 이미지 로컬 (290,195) / 586×528 = 49.5% · 37%.
   길이가 아니라 부모 대비 앵커라 %. 이미지가 모바일에서 86vw 로 줄어도 노즐에 자동 정합한다.
   ★ 속성 소유권: 래퍼(.acon01__spark)의 autoAlpha 는 GSAP, 파티클의 transform/opacity 는
   CSS @keyframes 가 각각 단독 소유한다. 같은 요소를 두 엔진이 겹쳐 만지지 않는다. */
.acon01__spark {
  left: 49.5%;
  top: 37%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.acon01__spark-p {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 8);
  border-radius: 50%;
  background: #fff;
  /* 사진 자체가 청록 하이라이트 투성이라 코어만으론 묻힌다 — 3단 글로우로 띄운다(raw px = shadow 예외) */
  box-shadow: 0 0 4px 1px #fff, 0 0 12px 3px rgba(150, 240, 255, 0.95), 0 0 28px 8px rgba(45, 190, 255, 0.55);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  animation: acon01-spark 1.8s infinite ease-out;
  animation-delay: var(--sd);
  animation-duration: var(--sdur);
}
/* 파티클마다 튀는 방향·거리·타이밍만 다르다 — keyframe 은 1개 재사용.
   vweb-anim.css 가 아니라 여기 사는 이유 = 이동량이 좌표(--px) 의존이라 라이브러리 제외 대상. */
.acon01__spark-p:nth-child(1)  { --dx: calc(var(--px) *  22); --dy: calc(var(--px) * -46); --sd: 0s;    --sdur: 1.6s; }
.acon01__spark-p:nth-child(2)  { --dx: calc(var(--px) * -26); --dy: calc(var(--px) * -38); --sd: 0.25s; --sdur: 1.9s; }
.acon01__spark-p:nth-child(3)  { --dx: calc(var(--px) *  40); --dy: calc(var(--px) * -18); --sd: 0.5s;  --sdur: 1.7s; }
.acon01__spark-p:nth-child(4)  { --dx: calc(var(--px) * -44); --dy: calc(var(--px) * -12); --sd: 0.15s; --sdur: 2.1s; }
.acon01__spark-p:nth-child(5)  { --dx: calc(var(--px) *  12); --dy: calc(var(--px) * -60); --sd: 0.7s;  --sdur: 1.8s; }
.acon01__spark-p:nth-child(6)  { --dx: calc(var(--px) * -14); --dy: calc(var(--px) * -54); --sd: 0.95s; --sdur: 1.5s; }
.acon01__spark-p:nth-child(7)  { --dx: calc(var(--px) *  52); --dy: calc(var(--px) *  16); --sd: 0.4s;  --sdur: 2s;   }
.acon01__spark-p:nth-child(8)  { --dx: calc(var(--px) * -50); --dy: calc(var(--px) *  22); --sd: 0.85s; --sdur: 1.75s; }
.acon01__spark-p:nth-child(9)  { --dx: calc(var(--px) *  30); --dy: calc(var(--px) * -32); --sd: 1.1s;  --sdur: 1.95s; }
.acon01__spark-p:nth-child(10) { --dx: calc(var(--px) * -34); --dy: calc(var(--px) *   8); --sd: 0.6s;  --sdur: 1.65s; }
@keyframes acon01-spark {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.15); }
}

/* ===== acon02 : 3D프린팅으로 무엇을 만들 수 있을까요 ===== */
.acon02 {
    box-sizing: border-box;
    /* 전역 section{justify-content:center} 해제 — 높이 정본이 cropHeight 고정이라 세로중앙이면 flow 전체가 밀린다 */
    justify-content: flex-start;
    height: calc(var(--px)*859);
    /* 정본 y276 은 시안 잉크 top — line-box top 은 half-leading 8px 만큼 위다 */
    padding-top: calc(var(--px)*268);
    background-color: #ffffff;
    /* 좌우 레인이 섹션 위·아래로 의도적으로 흘러나간다 — overflow 를 잠그면 그 bleed 가 사라진다 */
    overflow: visible;
}

.acon02__rail {
    top: 0;
    width: 1px;
    height: calc(var(--px)*859);
    background-color: rgb(214, 210, 227);
}

.acon02__rail--left {
    left: calc(var(--px)*362);
}

.acon02__rail--right {
    right: calc(var(--px)*363);
}

.acon02__lane {
    overflow: hidden;
}

.acon02__lane--left {
    left: calc(var(--px)*171.5);
    top: 0;
    width: fit-content;
    height: fit-content;
}

.acon02__lane--right {
    right: calc(var(--px)*173.5);
    top: 0;
    width: fit-content;
    height: fit-content;
}

.acon02__lane--left .acon02__track {
    gap: calc(var(--px)*211);
}

.acon02__lane--right .acon02__track {
    gap: calc(var(--px)*176);
}

.acon02__photo {
    flex-shrink: 0;
    width: calc(var(--px)*317);
    aspect-ratio: 1;
}

.acon02__lane--left .acon02__photo:first-child {
    width: calc(var(--px)*382);
}

.acon02__lane--right .acon02__photo:first-child {
    width: calc(var(--px)*383);
}

.acon02__inner {
    /* 정본 gap 57 은 잉크 간격 — desc line-box 가 잉크보다 아래로 5px 더 차지한다 */
    gap: calc(var(--px)*52);
}

.acon02__head {
    /* 정본 gap 39 는 잉크 간격 — title line-box 하단 + desc line-box 상단 leading 15px 을 뺀다 */
    gap: calc(var(--px)*24);
}

.acon02__portfolio-btn {
    width: calc(var(--px)*290);
    height: calc(var(--px)*74);
    background-color: #3b02f8;
}

/* aura 후광색 = 버튼 배경색. currentColor 로 쓰이므로 래퍼가 소유한다 */
.aura:has(> .acon02__portfolio-btn) {
    --aura: 59 2 248;
}

/* FONT:AUTO acon02 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.acon02__inner {
    font-family: var(--font-pretendard);
}

.acon02__title {
    font-size: var(--titleL);
    font-weight: 700;
    line-height: 1.2;
}

.acon02__title-plain {
    letter-spacing: -0.05em;
    color: #000000;
}

.acon02__title-accent {
    letter-spacing: -0.05em;
    color: #3b02f8;
}

.acon02__desc {
    font-size: var(--bodyL);
    line-height: 1.67;
    color: #000000;
}

.acon02__desc-plain {
    font-weight: 300;
    letter-spacing: -0.05em;
}

.acon02__desc-strong {
    font-weight: 700;
    letter-spacing: -0.05em;
}

.acon02__portfolio-btn {
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #ffffff;
}
/* /FONT:AUTO acon02 */

/* ===== acon03 ===== */
.acon03 {
    box-sizing: border-box;
    height: calc(var(--px)*1021);
    /* 정본 y135 는 시안 잉크 top — line-box top 은 half-leading 8px 만큼 위다 */
    padding-top: calc(var(--px)*127);
    background-color: #f5f2ff;
    /* 카드 겹침을 3D 깊이로 정렬하기 위한 컨텍스트 — 아래 호버 규칙 주석 참조.
       perspective 가 없어 투영은 그대로라 정지 화면은 flat 일 때와 동일하다.
       ★ 모바일에서는 flat 으로 되돌린다(Swiper 가 슬라이드에 자체 3D transform 을
       쓰므로 3D 컨텍스트에 넣지 않는다) — 아래 media 블록. */
    transform-style: preserve-3d;
    /* ★ preserve-3d 를 살리기 위한 필수 해제 — overflow 는 3D 컨텍스트를 강제로
       flatten 시킨다(실측: 이것 때문에 z 정렬이 통째로 무효였다). 전역 `section {
       overflow: hidden }`(library.css·style.css 상단, 가로 bleed 안전장치)을 이 섹션만
       되돌린다. acon03 은 카드 우단 1721 / 하단 913 으로 캔버스 1905·높이 1021 안에
       완전히 들어와서 넘칠 것이 없다. 모바일은 아래 media 블록에서 hidden 으로 복구. */
    overflow: visible;
}

.acon03__inner {
    /* 정본 gap 38 은 잉크 간격 — title line-box 하단 8px + desc line-box 상단 6px 을 뺀 실효값 */
    gap: calc(var(--px)*23);
}

.acon03__card {
    box-sizing: border-box;
    top: calc(var(--px)*413);
    width: calc(var(--px)*430);
    height: calc(var(--px)*500);
    border-radius: calc(var(--px)*30);
    box-shadow: 0 calc(var(--px)*4) calc(var(--px)*35) rgba(0, 0, 0, .5);
}

/* PC 카드 호버 — 디자이너 주석 "호버 시 카드 맨 앞으로"(2026-08-05 유저 확정).
   ★ 겹침 순서를 z-index 로 바꾸지 않는다. z-index 는 정수라 보간이 안 돼서 호버한
   0초에 앞뒤가 통째로 뒤집히고("순식간에 딱 바뀌는 느낌"), 그 뒤 카드만 따로 올라온다.
   대신 실제 3D 깊이를 쓴다 — 카드마다 base translateZ 를 계단식으로 깔아두고(아래),
   호버 카드가 그보다 큰 z 로 이동하는 동안 옆 카드 평면을 하나씩 통과하게 한다.
   그래서 겹침이 이동 도중에 연속적으로 바뀐다.
   · perspective 는 쓰지 않는다 → 원근 왜곡·크기 변화 없이 정렬만 3D 로 결정된다.
   · base z 순서 = 기존 DOM 겹침 순서와 동일 → 정지 화면은 시안과 완전히 같다.
   ★ 이동(z·y)은 CSS 가 아니라 GSAP 소유다 — js/animation.js 의 ani_acon03 참조.
     처음엔 transform 을 피하려고 CSS `translate` 개별 속성으로 짰는데, GSAP CSSPlugin 이
     transform 을 단독 소유하려고 인라인에 `translate:none; rotate:none; scale:none` 을
     박아버려서(실측) CSS 규칙이 통째로 무시됐다. 인라인이라 특이도로도 못 이긴다.
     그래서 이동은 GSAP 로 넘기고, 여기엔 GSAP 가 안 건드리는 box-shadow 만 남긴다.
     ⚠️ 여기에 translate/transform 을 다시 쓰지 말 것 — 조용히 무시된다.
   · 직계 자식 셀렉터인 이유: 모바일 카드(.acon03__slider 안 Swiper 슬라이드) 제외. */
.acon03>.acon03__card {
    transition: box-shadow .35s ease;
}

/* ★ :hover 가 아니라 클래스다 — 마지막에 호버한 카드가 마우스를 뗀 뒤에도 맨 앞에
   머문다(유저 확정 2026-08-05). z 는 GSAP 가, 그림자는 이 클래스가 같이 따라가야
   "선택된 카드" 표시가 어긋나지 않는다. 토글 주체 = js/animation.js 의 ani_acon03. */
.acon03>.acon03__card--active {
    box-shadow: 0 calc(var(--px)*14) calc(var(--px)*50) rgba(0, 0, 0, .6);
}

.acon03__card-badge {
    margin-top: calc(var(--px)*42);
    width: calc(var(--px)*78);
    height: calc(var(--px)*34);
    border-radius: calc(var(--px)*10);
    background-color: #ffffff;
}

.acon03__card-desc {
    margin-top: calc(var(--px)*15.6);
}

.acon03__card--manufacturing {
    left: calc(var(--px)*169.5);
    background-color: #4b19f2;
    transform: rotate(-7.36deg);

    .acon03__card-fig {
        margin-top: calc(var(--px)*72);
    }

    .acon03__card-title {
        margin-top: calc(var(--px)*39.1);
    }
}

.acon03__card--gov-support {
    left: calc(var(--px)*529);
    background-color: #6953d7;
    transform: rotate(3.4deg);

    .acon03__card-fig {
        margin-top: calc(var(--px)*61);
    }

    .acon03__card-title {
        margin-top: calc(var(--px)*57.1);
    }
}

.acon03__card--b2b {
    left: calc(var(--px)*913.4);
    background-color: #240b88;
    transform: rotate(-5.47deg);

    .acon03__card-fig {
        margin-top: calc(var(--px)*68);
    }

    .acon03__card-title {
        margin-top: calc(var(--px)*61.1);
    }
}

.acon03__card--b2g {
    left: calc(var(--px)*1291.2);
    background-color: #0f053b;
    transform: rotate(5.34deg);

    .acon03__card-fig {
        margin-top: calc(var(--px)*65);
    }

    .acon03__card-title {
        margin-top: calc(var(--px)*59.1);
    }
}

/* FONT:AUTO acon03 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.acon03__inner {
    font-family: var(--font-pretendard);
    letter-spacing: -0.05em;
}

.acon03__title {
    font-size: var(--titleL);
    font-weight: 700;
    line-height: 1.05;
}

.acon03__title-lead {
    color: #000000;
}

.acon03__title-accent {
    color: #3b02f8;
}

.acon03__desc {
    font-size: var(--bodyXL);
    line-height: 1.5;
    color: #000000;
}

.acon03__desc-lead {
    font-weight: 300;
}

.acon03__desc-strong {
    font-weight: 700;
}

.acon03__card-badge--manufacturing {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.88;
    color: #4b19f2;
}

.acon03__card-title {
    font-family: var(--font-pretendard);
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.2;
    color: #ffffff;
}

.acon03__card-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.56;
    color: #ffffff;
}

.acon03__card-badge--gov-support {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.88;
    color: #7359f6;
}

.acon03__card-badge--b2b {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.88;
    color: #240b88;
}

.acon03__card-badge--b2g {
    font-family: var(--font-pretendard);
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.88;
    color: #0f053b;
}
/* /FONT:AUTO acon03 */

/* spec 의 1.045 는 잉크 bbox 역산값 — 실제 행간은 55x1.2 = 66px 이다 */
.acon03__title {
    line-height: 1.2;
}


/* ===== acon04 ===== */
.acon04 {
    height: calc(var(--px) * 962);
    padding-top: calc(var(--px) * 159);
    /* 배경 자산은 1920×960 원본. 캔버스 1905 = 1920 − 스크롤바 15 라
       100% 로 늘리면 곡선이 가로로 0.8% 압축된다 → 원폭 유지 + center-crop. */
    background:
        url(/images/acon04_bg_2.webp) no-repeat center top / calc(var(--px) * 1920) auto,
        url(/images/acon04_bg.webp) no-repeat center top / calc(var(--px) * 1920) auto,
        #02000a;

    & .acon04__head {
        text-align: center;
        /* letter-spacing -0.05em 이 마지막 글자 뒤에도 붙어 중앙정렬이 그만큼 우측으로 밀린다. */
        text-indent: -0.05em;

        & span {
            display: inline;
        }
    }

    & .acon04__lead {
        margin-top: calc(var(--px) * 36);
    }

    & .acon04__now {
        left: calc(var(--px) * 1642);
        top: calc(var(--px) * 234);
        width: calc(var(--px) * 88);
        height: calc(var(--px) * 132);
    }

    & .acon04__now-badge {
        left: 0;
        top: 0;
        z-index: 1;
    }

    & .acon04__now-dot {
        left: 0;
        top: calc(var(--px) * 44);
        z-index: 0;
    }

    /* 링 전용 오버레이 — 원본 점(.acon04__now-dot > img 첫 번째)은 정지 유지, .v-scale-opa-2 는
       이 링에만 걸어 원본이 그 keyframe 의 fade-out 구간에 절반 사라져 보이는 걸 막는다. */
    & .acon04__now-ring {
        left: 0;
        top: 0;
    }

    & .acon04__track {
        width: max-content;
        margin-top: calc(var(--px) * 92);
        padding-left: calc(var(--px) * 704);
        gap: calc(var(--px) * 37);
        align-items: flex-start;
    }

    & .acon04__card {
        flex-shrink: 0;
        width: calc(var(--px) * 600);
        height: calc(var(--px) * 400);
        padding: calc(var(--px) * 59) calc(var(--px) * 60);
        align-items: flex-start;
        border-radius: calc(var(--px) * 30);
        background: #ffffff;
        box-shadow: inset 0 0 calc(var(--px) * 81) rgba(24, 235, 212, 0.1);

        /* ★ 계단 margin-top(2번째 34 / 3번째 68 / 4번째 102 = 시안 우하향 배치)을
           걷어냈다(유저 확정 2026-08-05, 애니 phase). 4장을 같은 기준선에 놓아야
           "가로로 흐르는 동안 화면 가운데에 온 카드만 위로 뜬다"(js/animation.js
           ani_acon04 의 중앙부각 웨이브)가 유일한 세로 변화로 읽힌다. 계단을 남기면
           카드마다 높이가 달라 부각인지 원래 자리인지 구분이 안 됐다.
           → 이 섹션의 정지 프레임은 이제 시안과 다르다(의도된 이탈). */

        /* 실렌더 텍스트 높이가 PSD 박스보다 커 내용 합이 카드 높이를 11px 넘는다.
           shrink 를 허용하면 그 초과분이 자식마다 나뉘어 위치가 누적으로 밀린다. */
        & > * {
            flex-shrink: 0;
        }
    }

    & .acon04__card-thumb {
        display: flex;
        align-self: flex-end;
        overflow: hidden;
        border-radius: calc(var(--px) * 16);
    }

    & .acon04__card-year {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        height: calc(var(--px) * 42);
        padding-inline: calc(var(--px) * 20);
        border: 1px solid #0d897b;
        border-radius: calc(var(--px) * 999);
        background: #d1fbf7;
    }

    & .acon04__card-title {
        margin-top: calc(var(--px) * 31);
    }

    & .acon04__card-desc {
        margin-top: calc(var(--px) * 21);
    }
}

/* FONT:AUTO acon04 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.acon04__head {
    font-family: var(--font-pretendard);
}

.acon04__title {
    font-size: var(--titleL);
    font-weight: 700;
    line-height: 1.11;
}

.acon04__title-accent {
    letter-spacing: -0.05em;
    color: #18ebd4;
}

.acon04__title-plain {
    letter-spacing: -0.05em;
    color: #ffffff;
}

.acon04__lead {
    font-size: var(--bodyXL);
    line-height: 1.5;
    color: #ffffff;
}

.acon04__lead-plain {
    font-weight: 300;
    letter-spacing: -0.05em;
}

.acon04__lead-strong {
    font-weight: 700;
    letter-spacing: -0.05em;
}

.acon04__card-year {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.36;
    color: #0d897b;
}

.acon04__card-title {
    font-family: var(--font-pretendard);
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.96;
    color: #000000;
}

.acon04__card-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.56;
    color: #000000;
}
/* /FONT:AUTO acon04 */

/* ===== acon05 ===== */
.acon05 {
    height: calc(var(--px) * 1027);
    /* 잉크 top 144 = line-box top + half-leading(8.125) — 시안은 글자 윤곽 기준 */
    padding-top: calc(var(--px) * 135.875);
    overflow: hidden;
    background: #ffffff;

    & .acon05__bg {
        left: calc(var(--px) * -7.5);
        top: calc(var(--px) * 121);
        width: calc(var(--px) * 1920);
    }

    & .acon05__dome {
        left: calc(var(--px) * 444.5);
        top: calc(var(--px) * 444);
        width: calc(var(--px) * 1016);
    }

    & .acon05__inner {
        width: calc(var(--px) * 686);
        margin-inline: auto;
        gap: calc(var(--px) * 189.5);
    }

    & .acon05__head {
        gap: calc(var(--px) * 22.625);
        text-align: center;

        & span {
            display: inline;
        }
    }

    /* 시안 실측 줄간격 66 / 55 = 1.2 (spec 의 PSD leading 1.045 는 실렌더와 불일치) */
    & .acon05__title {
        line-height: 1.2;
    }

    & .acon05__title-accent {
        background: linear-gradient(90deg, #255ff1, #3b08f8);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }

    & .acon05__stats {
        width: 100%;
        gap: calc(var(--px) * 45.35);
    }

    & .acon05__stat {
        gap: calc(var(--px) * 16.5);
    }

    & .acon05__stat-label {
        width: calc(var(--px) * 165);
        height: calc(var(--px) * 53);
        border-radius: calc(var(--px) * 25);
        background: #3b08f8;
    }

    /* spec 의 -0.05em(=-4px)은 자간 9개에 걸쳐 2px 이 누적돼 시안보다 좁아진다.
       시안 잉크 폭 370 에 맞춘 실측값 (-3.778px / 80px) */
    & .acon05__amount-value {
        letter-spacing: -0.0472em;
    }

    & .acon05__amount-unit {
        left: calc(var(--px) * 375);
        top: calc(var(--px) * 24);
        width: calc(var(--px) * 52);
        height: calc(var(--px) * 52);
        border-radius: 50%;
        background: #3b08f8;
    }

    & .acon05__divider {
        width: 100%;
        height: calc(var(--px) * 1);
        background: #dddddd;
    }

    & .acon05__bubbles {
        pointer-events: none;
    }

    /* 하단 곡선 = acon06 배경으로 넘어가는 경계. 타원 바깥만 칠해 ∪ 형태를 만든다
       (border-radius 로는 ∩ 만 가능). 실측 경계: 좌우끝 y908 · 중앙 y1003 */
    & .acon05__curve {
        left: 0;
        bottom: 0;
        width: 100%;
        height: calc(var(--px) * 119);
        z-index: 2;
        /* acon06 과 이어지는 배경판을 그대로 쓴다 — PSD 상 이 판(acon06_bg.webp)은 y6499 = acon05 로컬 896 부터 시작해 acon06 까지 한 장으로 걸친다.
           curve top 908 기준 오프셋 = 896 − 908 = −12 → curve 하단(acon05 로컬 1027)이 판의 y131 이 되어 acon06 의 background-position -131 과 정확히 연속.
           선형 linear-gradient 는 시안의 비선형 분포를 재현하지 못해 경계에 띠가 생겼다(x600 에서 시안 2,0,11 vs 렌더 12,9,26). */
        background-color: #02000b;
        background-image: url(/images/acon06_bg.webp);
        background-repeat: no-repeat;
        background-size: calc(var(--px) * 1920) calc(var(--px) * 1003);
        background-position: center calc(var(--px) * -12);
        -webkit-mask-image: radial-gradient(circle closest-side at 50% calc(var(--px) * -4727.5), transparent calc(var(--px) * 4821.7), #000 calc(var(--px) * 4823.3));
        mask-image: radial-gradient(circle closest-side at 50% calc(var(--px) * -4727.5), transparent calc(var(--px) * 4821.7), #000 calc(var(--px) * 4823.3));
    }

    & .acon05__bubble {
        width: calc(var(--px) * 123);
        height: calc(var(--px) * 123);
        border-radius: 50%;
        background: #3b82f6;
        box-shadow: inset 0 0 calc(var(--px) * 29) rgba(59, 8, 248, 0.15);
        text-align: center;
        pointer-events: auto;
    }

    & .acon05__bubble--event {
        left: calc(var(--px) * 447.5);
        top: calc(var(--px) * 499);
    }

    & .acon05__bubble--custom {
        right: calc(var(--px) * 477.5);
        top: calc(var(--px) * 563);
    }

    & .acon05__bubble--outsourcing {
        right: calc(var(--px) * 165.5);
        top: calc(var(--px) * 563);
    }

    & .acon05__bubble--goods {
        left: calc(var(--px) * 178.5);
        top: calc(var(--px) * 603);
    }

    & .acon05__bubble--store {
        left: calc(var(--px) * 410.5);
        top: calc(var(--px) * 694);
    }

    & .acon05__bubble--promotion {
        right: calc(var(--px) * 324.5);
        top: calc(var(--px) * 711);
    }
}


/* FONT:AUTO acon05 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.acon05__head {
    font-family: var(--font-pretendard);
}

.acon05__title {
    font-size: var(--titleL);
    font-weight: 700;
    line-height: 1.05;
}

.acon05__title-lead {
    letter-spacing: -0.05em;
    color: #000000;
}

.acon05__title-accent {
    letter-spacing: -0.05em;
    color: #255ff1;
}

.acon05__title-tail {
    letter-spacing: -0.05em;
    color: #000000;
}

.acon05__desc {
    font-size: var(--bodyXL);
    line-height: 1.5;
    color: #000000;
}

.acon05__desc-lead {
    font-weight: 700;
    letter-spacing: -0.05em;
}

.acon05__desc-body {
    font-weight: 300;
    letter-spacing: -0.05em;
}

.acon05__stat {
    font-weight: 700;
}

.acon05__stat-label {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    letter-spacing: -0.05em;
    line-height: 0.91;
    color: #ffffff;
}

.acon05__amount-value {
    font-family: var(--font-proxima);
    font-size: calc(var(--px)*80);
    letter-spacing: -0.05em;
    line-height: 0.81;
    color: #02000a;
}

.acon05__amount-unit {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    letter-spacing: -0.05em;
    line-height: 0.9;
    color: #ffffff;
}

.acon05__bubbles {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 600;
    color: #ffffff;
}

.acon05__bubble--event {
    letter-spacing: -0.05em;
    line-height: 1.08;
}

.acon05__bubble--custom {
    letter-spacing: -0.05em;
    line-height: 0.94;
}

.acon05__bubble--outsourcing {
    letter-spacing: -0.05em;
    line-height: 1.08;
}

.acon05__bubble--goods {
    letter-spacing: -0.05em;
    line-height: 1.08;
}

.acon05__bubble--store {
    letter-spacing: -0.05em;
    line-height: 1.08;
}

.acon05__bubble--promotion {
    letter-spacing: -0.05em;
    line-height: 1.08;
}
/* /FONT:AUTO acon05 */

/* ===== acon06 : 높은 수익률, 왜 가능했을까요? ===== */
.acon06 {
    background-color: #02000a;
    background-image: url(/images/acon06_bg.webp);
    background-repeat: no-repeat;
    background-size: calc(var(--px) * 1920) calc(var(--px) * 1003);
    background-position: center calc(var(--px) * -131);

    & .acon06__inner {
        /* 131 = spec 127 + 4 — line-height 0.92 라 타이틀 line-box 가 글자보다 작아 렌더가 4px 위로 뜬다(5b shift dy4 SAD24.5). 아래 slider margin 에서 4 를 되돌려 섹션 총고는 불변 */
        padding-top: calc(var(--px) * 131);
        /* lead 박스 실렌더가 spec 대비 +9 커서(90 vs 81) 하단에서 흡수 — cropHeight 871 정합 */
        padding-bottom: calc(var(--px) * 95);
    }

    & .acon06__title {
        text-indent: -0.05em;
        /* FONT:AUTO 는 spec.json 의 PSD leading(1.25)을 그대로 내지만 시안 실제 배치는 2줄 h115 = 줄당 57.5 / 55 = 1.045 다.
           FONT:AUTO 블록은 직접 수정 금지라 특이도가 높은 섹션 스코프에서 override 한다(--check 드리프트 0 유지). */
        line-height: 1.045;

        & span {
            display: inline;
        }
    }

    & .acon06__slider {
        /* 60 = spec 64 − 4 — inner padding-top 에서 더한 4 를 여기서 상쇄(슬라이더 y306 유지) */
        margin-top: calc(var(--px) * 60);
        width: calc(var(--px) * 1905);
        height: calc(var(--px) * 252);
        overflow: hidden;
    }

    & .acon06__card {
        width: calc(var(--px) * 528);
        height: calc(var(--px) * 252);
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: stretch;
        gap: calc(var(--px) * 28);
        padding-top: calc(var(--px) * 30);
        padding-left: calc(var(--px) * 52);
        border-radius: calc(var(--px) * 30);
        background-color: rgba(255, 255, 255, 0.102);
        /* 활성 카드 스타일(배경·글로우·글자색)이 슬라이드 이동과 동시에 스냅되던 것을
           Swiper speed(js/main.js 500ms)와 같은 길이로 이어준다. transform 은 여기서
           쓰지 않는다 — 슬라이드 이동은 Swiper, 진입 트윈은 GSAP 단독 소유다. */
        transition: background-color 0.5s ease, box-shadow 0.5s ease;
    }

    /* color 는 상속되므로 desc 하위 span 은 부모 전환값을 그대로 따라간다 */
    & .acon06__card-title,
    & .acon06__card-desc {
        transition: color 0.5s ease;
    }

    & .acon06__card-emblem img {
        display: block;
    }

    & .acon06__card.is-active {
        background-color: #afcbfd;
        box-shadow: inset 0 0 calc(var(--px) * 54) rgba(244, 244, 244, 0.35);
    }

    & .acon06__card-head {
        min-height: calc(var(--px) * 99);
        padding-right: calc(var(--px) * 52);
    }

    & .acon06__card--b2b .acon06__card-head {
        padding-right: calc(var(--px) * 50);
    }

    & .acon06__card--uptime .acon06__card-head {
        /* 42 = spec 40 + 2 — 시안 실렌더의 아이콘 우측 여백이 43 이라(PSD 레이어 기준 40 과 3 차이) 5b 가 dx-2 를 잡았다 */
        padding-right: calc(var(--px) * 42);
    }

    & .acon06__card--pricing .acon06__card-head {
        padding-right: calc(var(--px) * 44);
    }

    & .acon06__card-desc span {
        display: inline;
    }

    & .acon06__nav {
        margin-top: calc(var(--px) * 22);
        gap: calc(var(--px) * 10);
    }

    & .acon06__nav-btn {
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    & .acon06__nav-arrow--next {
        transform: scaleX(-1);
    }

    & .acon06__lead {
        margin-top: calc(var(--px) * 50);
        text-indent: -0.05em;

        & span {
            display: inline;
        }
    }
}

/* FONT:AUTO acon06 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.acon06__title {
    font-family: var(--font-pretendard);
    font-size: var(--titleL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.25;
}

.acon06__title-lead {
    color: #ffffff;
}

.acon06__title-accent {
    color: #afcbfd;
}

.acon06__card-title {
    font-family: var(--font-pretendard);
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.92;
    color: #ffffff;
}

.acon06__card-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    letter-spacing: -0.05em;
    line-height: 1.56;
    color: #ffffff;
}

.acon06__card-desc-text {
    font-weight: 300;
}

.acon06__card-desc-strong {
    font-weight: 700;
}

.acon06__card.is-active .acon06__card-title {
    font-family: var(--font-pretendard);
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.92;
    color: #000000;
}

.acon06__card.is-active .acon06__card-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    letter-spacing: -0.05em;
    line-height: 1.56;
    color: #000000;
}

.acon06__card.is-active .acon06__card-desc-text {
    font-weight: 300;
}

.acon06__card.is-active .acon06__card-desc-strong {
    font-weight: 700;
}

.acon06__lead {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #ffffff;
}

.acon06__lead-text {
    font-weight: 300;
}

.acon06__lead-strong {
    font-weight: 700;
}
/* /FONT:AUTO acon06 */

/* ===== acon07 : 처음이어도 괜찮습니다 ===== */
.acon07 {
    background-color: #000000;
    background-image: url(/images/acon07_bg.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: calc(var(--px) * 1920) calc(var(--px) * 1125);

    & .acon07__slide {
        position: absolute;
        top: calc(var(--px) * 401);
        left: 0;
        width: 100%;
        height: calc(var(--px) * 340);
        z-index: 0;
        mask-image: linear-gradient(90deg, #000 0, #000 22%, transparent 26%, transparent 74%, #000 78%, #000 100%);
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 22%, transparent 26%, transparent 74%, #000 78%, #000 100%);
    }

    /* 마퀴형 무한 흐름(모션 트랙 D) — 선형 등속을 위해 Swiper 기본 easing 을 덮는다.
       .swiper-wrapper 자체는 GSAP 트윈 대상이 아니라 CSS transition-timing-function 만 지정. */
    & .acon07__slide-track {
        transition-timing-function: linear;
    }

    & .acon07__slide-photo {
        width: calc(var(--px) * 300);
        height: calc(var(--px) * 340);
        flex-shrink: 0;
    }

    & .acon07__rings {
        left: calc(var(--px) * 452);
        top: calc(var(--px) * 56);
        width: calc(var(--px) * 1006);
        height: calc(var(--px) * 1006);
    }

    & .acon07__orbit-dot {
        left: calc(var(--px) * 500);
        top: calc(var(--px) * 234);
        width: calc(var(--px) * 82);
        height: calc(var(--px) * 82);
    }

    & .acon07__inner {
        /* 199 − 10 = 헤드라인 half-leading 흡수(line-height 1.25 기준 · 5b 실측 확정).
           아래 logo margin 으로 되돌려 총 높이 1123 은 그대로 유지한다. */
        padding-top: calc(var(--px) * 189);
        padding-bottom: calc(var(--px) * 139);
    }

    & .acon07__headline {
        color: #585b5b;
        line-height: 1.25;
    }

    & .acon07__headline-accent {
        color: #ffffff;
        display: inline;
    }

    /* 디자이너 주석 "글자 써지는 모션" = 회색 헤드라인이 좌→우로 밝게 채워지는 모션이고,
       시안이 선두 3글자('처음이')만 흰 것은 그 모션의 중간 프레임이다(유저 지적 2026-08-05).
       그래서 accent 3글자 고정점등은 애니가 흡수한다 — ani_acon07 이 라인 span 에 이 클래스를
       부착하고 background-position 을 100%→0% 로 밀어 흰 구간이 왼쪽부터 덮이게 한다.
       -webkit-text-fill-color 는 상속 속성이라 안쪽 accent span 의 #ffffff 까지 무효화돼
       라인 전체가 gradient 한 벌로 칠해진다(마크업 원복 불필요).
       GSAP 미로드/스플릿 실패 시엔 이 클래스가 안 붙어 시안과 같은 정적 상태로 폴백. */
    /* ★ 45.5%/54.5% + size 220% 은 임의값이 아니라 연립해서 나온 짝이다. background-position
       의 % offset = (요소폭 − 배경폭) × pct 이므로 배경 220% 에서
         pct 100% → 요소에 배경 1.2W~2.2W(= gradient 54.5~100%) = 전부 회색
         pct   0% → 요소에 배경    0~W  (= gradient 0~45.5%)    = 전부 흰색
       즉 두 stop 이 양 끝 상태를 각각 완전히 덮어야 해서 54.5 / 45.5 로 맞물린다.
       그 사이 9%(≈텍스트 폭 20%)가 흰↔회 페더 = 칼선 대신 스며드는 경계.
       하드엣지(50%/50%)로 되돌리면 글자 위를 셔터가 지나가는 모양이 된다. */
    & .acon07__headline-fill {
        background-image: linear-gradient(90deg, #ffffff 45.5%, #585b5b 54.5%);
        background-size: 220% 100%;
        background-repeat: no-repeat;
        background-position: 100% 0;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    & .acon07__logo {
        /* 위 padding-top 에서 당긴 분 보상 → logo top 369.5 불변 */
        margin-top: calc(var(--px) * 43);

        & img {
            display: block;
        }
    }

    & .acon07__desc {
        /* 60(시안 여백) − 6 = line-height 1.5 의 half-leading 흡수.
           layout-spec 의 y 는 잉크 기준, margin 은 line box 기준이라 그만큼 당긴다. */
        margin-top: calc(var(--px) * 54);

        & span {
            display: inline;
        }
    }

    /* margin 은 aura 래퍼가 소유한다 — 버튼에 두면 래퍼 안쪽에 갇혀 빛 테두리가 그만큼 벌어진다 */
    & .aura:has(> .acon07__cta) {
        /* 61 − 6.5 = desc line box 아래쪽 half-leading 흡수(위와 같은 사유) */
        margin-top: calc(var(--px) * 54.5);
        --aura: 24 235 212;
    }

    & .acon07__cta {
        padding: calc(var(--px) * 22) calc(var(--px) * 48);
        background-color: var(--sc);
    }
}

/* FONT:AUTO acon07 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.acon07__headline {
    font-family: var(--font-pretendard);
    font-size: var(--titleL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.05;
    color: #ffffff;
}

.acon07__desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #ffffff;
}

.acon07__desc-text {
    font-weight: 300;
}

.acon07__desc-strong {
    font-weight: 700;
}

.acon07__cta-label {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #000000;
}
/* /FONT:AUTO acon07 */

/* ===== acon08 : 더 많은 이야기를 확인해보세요 ===== */
.acon08 {
    padding-top: calc(var(--px) * 159);
    padding-bottom: calc(var(--px) * 137);
    /* 좌우 비대칭 = 시안 실측(좌 228.5 / 우 232.5). 시안이 캔버스 중심에서 2px 좌편향이라
       중앙정렬로는 구조적으로 못 맞는다 — 여백을 부모가 소유해 흡수한다(자식 밀기 아님).
       전역이 content-box 라 이 섹션만 border-box 로 폭 1905 를 지킨다 */
    box-sizing: border-box;
    padding-left: calc(var(--px) * 228.5);
    padding-right: calc(var(--px) * 232.5);
    background-color: #ffffff;

    & .acon08__inner {
        gap: calc(var(--px) * 60);
    }

    & .acon08__title span {
        display: inline;
    }

    & .acon08__cards {
        gap: calc(var(--px) * 26);
    }

    & .acon08__card {
        width: calc(var(--px) * 464);
        height: calc(var(--px) * 404);
        border: calc(var(--px) * 1) solid #dddddd;
        border-radius: calc(var(--px) * 30);
        background-color: #ffffff;
        /* 시안 주석 "호버 시 테두리, 배경색 변경" — 색 두 개만 부드럽게 넘긴다.
           그림자·이동은 시안에 없어 넣지 않는다(유저 확정 2026-08-05).
           transform 은 여기서 쓰지 않는다 — 진입 트윈이 GSAP 단독 소유다. */
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    /* 시안에서 첫 카드가 보라 배경인 건 "호버 상태 예시"다(유저 확정 2026-08-05).
       기본 상태로 박아두면 안 되므로 --active 는 쓰지 않는다 — 이 색은 호버 전용.
       ⚠️ 시안 대조 시 첫 카드 배경이 흰색이라 diff 가 나는 게 정상이다. */
    & .acon08__card:hover {
        background-color: #f6f4ff;
        border-color: #3b08f8;
    }

    & .acon08__card-media {
        height: calc(var(--px) * 161);
        margin-top: calc(var(--px) * 37);
    }

    & .acon08__card-title {
        margin-top: calc(var(--px) * 42);
    }

    & .acon08__card-desc {
        margin-top: calc(var(--px) * 25);
    }

    & .acon08__card-desc span {
        display: inline;
    }
}

/* IMG:AUTO acon01 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.acon01__printer {
    width: calc(var(--px)*586);
    aspect-ratio: 586 / 528;
}

.acon01__marquee-word {
    width: calc(var(--px)*3077);
    aspect-ratio: 3077 / 218;
}
/* /IMG:AUTO acon01 */

/* IMG:AUTO acon02 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.acon02__photo--01 {
    width: calc(var(--px)*382);
    aspect-ratio: 1 / 1;
}

.acon02__photo--02 {
    width: calc(var(--px)*317);
    aspect-ratio: 1 / 1;
}

.acon02__photo--03 {
    width: calc(var(--px)*317);
    aspect-ratio: 1 / 1;
}

.acon02__photo--06 {
    width: calc(var(--px)*317);
    aspect-ratio: 1 / 1;
}

.acon02__photo--08 {
    width: calc(var(--px)*383);
    aspect-ratio: 1 / 1;
}

.acon02__photo--04 {
    width: calc(var(--px)*317);
    aspect-ratio: 1 / 1;
}

.acon02__photo--05 {
    width: calc(var(--px)*317);
    aspect-ratio: 1 / 1;
}

.acon02__photo--07 {
    width: calc(var(--px)*317);
    aspect-ratio: 1 / 1;
}
/* /IMG:AUTO acon02 */

/* IMG:AUTO acon03 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.acon03__card-fig--manufacturing {
    width: calc(var(--px)*167);
    aspect-ratio: 244 / 203;
}

.acon03__card-fig--gov-support {
    width: calc(var(--px)*144);
    aspect-ratio: 211 / 194;
}

.acon03__card-fig--b2b {
    width: calc(var(--px)*185);
    aspect-ratio: 277 / 180;
}

.acon03__card-fig--b2g {
    width: calc(var(--px)*162);
    aspect-ratio: 251 / 193;
}
/* /IMG:AUTO acon03 */

/* IMG:AUTO acon04 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.acon04__now-badge {
    width: calc(var(--px)*85);
    aspect-ratio: 85 / 56;
}

.acon04__now-dot {
    width: calc(var(--px)*88);
    aspect-ratio: 88 / 88;
}

.acon04__card-thumb {
    width: calc(var(--px)*200);
    aspect-ratio: 200 / 120;
}
/* /IMG:AUTO acon04 */

/* IMG:AUTO main */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.main__scroll-down {
    width: calc(var(--px)*104);
    aspect-ratio: 104 / 102;
}
/* /IMG:AUTO main */

/* FONT:AUTO acon08 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.acon08__title {
    font-family: var(--font-pretendard);
    font-size: var(--titleL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.25;
}

.acon08__title-accent {
    color: #3b02f8;
}

.acon08__title-body {
    color: #000000;
}

.acon08__card-title {
    font-family: var(--font-pretendard);
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.96;
    color: #000000;
}

.acon08__card-desc {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    letter-spacing: -0.05em;
    line-height: 1.56;
    color: #000000;
}

.acon08__card-desc-text {
    font-weight: 300;
}

.acon08__card-emphasis {
    font-weight: 700;
}
/* /FONT:AUTO acon08 */

.acon09 {
    background-color: #e8f3ff;
    height: calc(var(--px)*863);
}

.acon09__marquee {
    height: calc(var(--px)*81);
    background-image: url(/images/acon09_02.webp);
    background-position: center top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.acon09__marquee-track {
    gap: calc(var(--px)*218);
    margin-left: calc(var(--px)*-2.5);
    flex-shrink: 0;
}

.acon09__marquee-group {
    gap: calc(var(--px)*102.5);
    flex-shrink: 0;
}

.acon09__inner {
    width: calc(var(--px)*1381);
    margin-left: calc(var(--px)*292.5);
    margin-top: calc(var(--px)*155);
}

/* intro 세로 체인: 정본 간격(41/39)은 잉크 bbox 기준이라, 라인박스 높이가 얹히는 렌더에서는
   gap 균일값이 아래로 갈수록 누적된다(측정: title +3 / desc +6 / cta +13). 개별 margin 으로 소유. */
.acon09__intro {
    margin-top: calc(var(--px)*99);
}

.acon09__title {
    margin-bottom: calc(var(--px)*37);
    margin-left: calc(var(--px)*-1);
}

.acon09__desc {
    margin-bottom: calc(var(--px)*33);
}

.acon09__cta {
    width: calc(var(--px)*266);
    height: calc(var(--px)*74);
    background-color: #255ff1;
}

.aura:has(> .acon09__cta) {
    --aura: 37 95 241;
}

.acon09__profile-list {
    gap: calc(var(--px)*16);
    height: calc(var(--px)*503);
}

.acon09__profile-card {
    box-sizing: border-box;
    width: calc(var(--px)*387);
    height: 100%;
    padding-top: calc(var(--px)*25);
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: calc(var(--px)*30);
}

.acon09__profile-media {
    width: calc(var(--px)*337);
    height: calc(var(--px)*322);
    background-color: #f7f7f7;
    border-radius: calc(var(--px)*30);
}

.acon09__profile-media::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url(/images/acon01_04.webp);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 0;
}

.acon09__profile-media:hover::after {
    opacity: 1;
}

.acon09__profile-photo {
    position: relative;
    z-index: 1;
}

.acon09__profile-name {
    margin-top: calc(var(--px)*30);
}

.acon09__profile-divider {
    margin-top: calc(var(--px)*17);
    width: calc(var(--px)*269);
    height: 1px;
    background-color: #dddddd;
}

.acon09__profile-role {
    margin-top: calc(var(--px)*24);
}

/* FONT:AUTO acon09 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.acon09__marquee-track {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
    color: #ffffff;
}

.acon09__intro {
    font-family: var(--font-pretendard);
    letter-spacing: -0.05em;
}

.acon09__title {
    font-size: var(--titleL);
    font-weight: 700;
    line-height: 1.06;
}

.acon09__title-base {
    color: #000000;
}

.acon09__title-accent {
    color: #255ff1;
}

.acon09__desc {
    font-size: var(--bodyXL);
    line-height: 1.5;
    color: #000000;
}

.acon09__desc-base {
    font-weight: 300;
}

.acon09__desc-strong {
    font-weight: 700;
}

.acon09__cta-label {
    font-size: var(--bodyXL);
    font-weight: 700;
    line-height: 1.5;
    color: #ffffff;
}

.acon09__profile-name {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.91;
    color: #000000;
}

.acon09__profile-role {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.56;
    color: #000000;
}
/* /FONT:AUTO acon09 */

/* acon09 — em 자간 상속 보정: FONT:AUTO 가 -0.05em 을 .acon09__intro(18px 기준 -0.9px)로 hoist 하는데,
   em 은 상속 시 px 로 resolve 되어 자식의 실제 font-size 기준이 무시된다. 자식이 자기 크기로 재계산하도록 재선언. */
.acon09__title,
.acon09__desc,
.acon09__cta-label {
    letter-spacing: -0.05em;
}

/* FONT:AUTO acon10 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.acon10__inner {
    font-family: var(--font-pretendard);
}

.acon10__title {
    font-size: var(--titleL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.2;
}

.acon10__title-accent {
    color: #255ff1;
}

.acon10__title-lead {
    color: #000000;
}

.acon10__desc {
    font-size: var(--bodyXL);
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #000000;
}

.acon10__desc-strong {
    font-weight: 700;
}

.acon10__desc-lead {
    font-weight: 300;
}

.acon10__card-score {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.2;
    color: #255ff1;
}

.acon10__card-name {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.2;
    color: #255ff1;
}

.acon10__card-text {
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.56;
    color: #000000;
}
/* /FONT:AUTO acon10 */

/* ===== acon10 : 수강생들이 말하는 제이엠 프로젝트 ===== */
.acon10 {
    padding: calc(var(--px)*131.5) 0 calc(var(--px)*72);
    background: url(/images/acon10_bg.webp) 0 calc(var(--px)*4) / 100% calc(var(--px)*1018) no-repeat;
}

/* 세로 간격은 전부 시안 잉크 bbox 에서 half-leading 을 뺀 CSS 박스 기준 */
.acon10__inner {
    gap: calc(var(--px)*23.5);
}

.acon10__slider {
    margin-top: calc(var(--px)*60);
}

.acon10__empty {
    margin-top: calc(var(--px)*60);
    padding-bottom: calc(var(--px)*180);
    font-size: var(--bodyXL);
    color: #888888;
}

/* 카드 간격은 Swiper spaceBetween 이 소유한다 — gap 을 같이 주면 loop 경계에서 어긋난다 */
.acon10__track {
    display: flex;
}

.acon10__card {
    box-sizing: border-box;
    flex-shrink: 0;
    width: calc(var(--px)*464);
    height: calc(var(--px)*516);
    /* 좌우 비대칭 = PSD rect 464 가 stroke 중심 기준이라 시안 내부 중앙축이 카드 중앙보다 2px 왼쪽이다 */
    padding: calc(var(--px)*28) calc(var(--px)*32) calc(var(--px)*49.3) calc(var(--px)*28);
    border: 1px solid #dddddd;
    border-radius: calc(var(--px)*30);
    background: #ffffff;
    transition: border-color .3s;
}

.acon10__card:hover {
    border-color: #255ff1;
}

.acon10__card-fig {
    flex-shrink: 0;
    width: calc(var(--px)*401);
    height: calc(var(--px)*222);
    border-radius: calc(var(--px)*20);
    overflow: hidden;
}

.acon10__card-fig img {
    height: 100%;
}

.acon10__card-meta {
    margin-top: calc(var(--px)*28.8);
    gap: calc(var(--px)*6);
}

/* inline img 의 baseline gap 이 meta 행 높이를 26.4 → 30 으로 늘려 아래 체인을 밀어낸다 */
.acon10__card-star {
    display: flex;
}

.acon10__card-divider {
    flex-shrink: 0;
    width: calc(var(--px)*3);
    height: calc(var(--px)*21);
    background: #dddddd;
}

/* 카드 높이 516 고정 + 내부 가용 142.4px ÷ 한 줄 28.08px = 5줄이 상한(6줄이면 넘침) */
.acon10__card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    margin-top: calc(var(--px)*19.1);
    max-width: calc(var(--px)*318);
}


/* acon01 mobile: approved vertical content flow with decorative marquee overlay */
/* marquee seamless loop (v-marquee-half): .acon01__marquee-item 간격 = 원본/복제 공통 gap */
@media (max-width:599px) {
    /* main mobile: approved portrait hero card with overlapping scroll control */
    .main {
        height: auto;
        margin-top: 15vw;
        padding-bottom: 12vw;
    }

    .main__frame {
        width: 92%;
        height: 134vw;
        margin-top: 0;
        padding: 0 7vw 7vw;
        justify-content: center;
        box-sizing: border-box;
        overflow: visible;
    }

    .main__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .main__inner {
        gap: 5vw;
    }

    .main__title {
        max-width: 92%;
        font-size: var(--titleXL);
        white-space: normal;
        word-break: keep-all;
    }

    .main__title-line,
    .main__title-accent {
        white-space: nowrap;
    }

    .main__desc {
        max-width: 100%;
        width: 100%;
        font-size: var(--bodyM);
        white-space: normal;
        word-break: keep-all;
    }

    .main__scroll-down {
        bottom: -8vw;
        width: 17.6vw;
    }

    .acon01 {
        height: auto;
        padding: 14.4vw 0 25vw;
        box-sizing: border-box;
    }

    .acon01__inner {
        width: auto;
        max-width: 92vw;
        width: 92vw;
        margin-top: 0;
    }

    .acon01__title {
        margin-top: 8vw;
        white-space: normal;
    }

    .acon01__desc {
        width: auto;
        max-width: 100%;
        margin-top: 5.87vw;
        white-space: normal;
    }

    .acon01__desc-strong {
        max-width: 92%;
        margin-top: 8vw;
        white-space: normal;
    }

    .acon01__printer {
        width: auto;
        margin-top: 10.67vw;
    }

    .acon01__printer img {
        width: 86vw !important;
        height: auto !important;
    }

    /* 모바일은 파티클 절반만 — 프린터가 86vw 로 커져 스파크 밀도가 과해지고
       동시 합성 레이어 수도 줄인다. 위치는 % 앵커라 노즐에 그대로 붙는다. */
    .acon01__spark-p:nth-child(n+6) {
        display: none;
    }

    .acon01__marquee {
        top: 188vw;
        left: -100vw;
        width: auto;
        height: auto;
    }

    .acon01__marquee-item {
        margin-right: 6vw;
    }

    .acon01__marquee-word {
        width: 300vw !important;
        height: auto !important;
    }

    /* acon02 mobile: approved edge-cropped portfolio collage behind central content */
    .acon02 {
        height: 150vw;
        padding-top: 43vw;
        overflow: hidden;
    }

    .acon02__lane {
        overflow: visible;
    }

    .acon02__lane--left {
        top: -6vw;
        left: -13.5vw;
    }

    .acon02__lane--right {
        top: auto;
        right: -13.5vw;
        bottom: -6vw;
    }

    .acon02__track {
        flex-direction: row;
    }

    .acon02__lane--left .acon02__track {
        gap: 5vw;
    }

    .acon02__lane--right .acon02__track {
        gap: 5vw;
    }

    .acon02__photo,
    .acon02__lane--left .acon02__photo:first-child,
    .acon02__lane--right .acon02__photo:first-child {
        width: auto;
    }

    .acon02 .acon02__photo > img {
        width: 28vw !important;
        height: auto !important;
    }

    .acon02__inner {
        position: relative;
        width: 92vw;
        z-index: 1;
        gap: 8vw;
    }

    .acon02__head {
        gap: 5vw;
    }

    .acon02__title,
    .acon02__desc {
        max-width: 100%;
        width: 100%;
        white-space: normal;
        word-break: keep-all;
    }

    .acon02__portfolio-btn {
        width: 76vw;
        height: 15vw;
    }

    /* acon03 mobile: PC card set is replaced by this full-bleed Swiper. */
    .acon03 {
        height: auto;
        padding: 18vw 0 13vw;
        overflow: hidden;
        /* PC 카드 호버용 3D 컨텍스트를 모바일에선 되돌린다 — Swiper 가 슬라이드에
           자체 translate3d 를 걸므로 3D 정렬 컨텍스트 안에 두지 않는다.
           overflow 도 전역 section 룰(hidden)로 복구 — 위 PC 블록에서 3D flatten 을
           피하려고 visible 로 열어둔 것이라 모바일엔 필요 없다. */
        transform-style: flat;
        overflow: hidden;
    }

    .acon03__inner {
        width: auto;
        max-width: 92vw;
        width: 92vw;
        gap: 5vw;
    }

    .acon03__title,
    .acon03__desc {
        max-width: 100%;
        width: 100%;
        white-space: normal;
        word-break: keep-all;
    }

    .acon03__slider {
        width: 100%;
        margin-top: 13vw;
        padding: 0 0 10vw;
        overflow: visible;
    }

    .acon03__slider .swiper-slide {
        height: auto;
    }

    .acon03__slider .acon03__card {
        width: 100%;
        height: auto;
        border-radius: 9vw;
        box-shadow: 0 1vw 8vw rgba(0, 0, 0, .4);
        transition: transform 0.3s ease;
        padding: 0 0 10vw;
    }

    .acon03__slider .swiper-slide-active .acon03__card {
        transform: rotate(0deg);
    }

    .acon03__slider .acon03__card-badge {
        width: 16.2vw;
        height: 7.1vw;
        margin-top: 8.8vw;
        border-radius: 2.1vw;
    }

    .acon03__slider .acon03__card-fig--manufacturing { width: 34.7vw; }
    .acon03__slider .acon03__card-fig--gov-support { width: 29.9vw; }
    .acon03__slider .acon03__card-fig--b2b { width: 38.4vw; }
    .acon03__slider .acon03__card-fig--b2g { width: 33.6vw; }

    .acon03__slider .acon03__card-fig img {
        width: 100% !important;
        height: auto !important;
    }

    .acon03__slider .acon03__card-desc {
        margin-top: 3.2vw;
        white-space: nowrap;
        word-break: keep-all;
    }

    .acon03__slider .acon03__card--manufacturing .acon03__card-fig { margin-top: 15vw; }
    .acon03__slider .acon03__card--manufacturing .acon03__card-title { margin-top: 8.1vw; }
    .acon03__slider .acon03__card--gov-support .acon03__card-fig { margin-top: 12.7vw; }
    .acon03__slider .acon03__card--gov-support .acon03__card-title { margin-top: 11.9vw; }
    .acon03__slider .acon03__card--b2b .acon03__card-fig { margin-top: 14.2vw; }
    .acon03__slider .acon03__card--b2b .acon03__card-title { margin-top: 12vw; }
    .acon03__slider .acon03__card--b2g .acon03__card-fig { margin-top: 13.6vw; }
    .acon03__slider .acon03__card--b2g .acon03__card-title { margin-top: 11.6vw; }

    .acon03__slider-pagination {
        bottom: 0;
        left: 0 !important;
        width: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .acon03__slider-pagination .swiper-pagination-bullet {
        width: 2vw;
        height: 2vw;
        margin: 0 1vw !important;
        opacity: .35;
    }

    .acon03__slider-pagination .swiper-pagination-bullet:nth-child(1) { background-color: #4b19f2; }
    .acon03__slider-pagination .swiper-pagination-bullet:nth-child(2) { background-color: #6953d7; }
    .acon03__slider-pagination .swiper-pagination-bullet:nth-child(3) { background-color: #240b88; }
    .acon03__slider-pagination .swiper-pagination-bullet:nth-child(4) { background-color: #0f053b; }

    .acon03__slider-pagination .swiper-pagination-bullet-active {
        opacity: 1;
    }

    /* acon04 mobile: approved chronological touch track over the retained grid and curve layers */
    .acon04 {
        height: auto;
        min-height: 172vw;
        padding: 18vw 0;
        background-size: auto 100%, auto 100%, auto;
        background-position: center bottom, center bottom, center bottom;
    }

    .acon04__head {
        width: 100%;
        padding: 0 6vw;
        box-sizing: border-box;
    }

    .acon04__title {
        max-width: 76vw;
        margin-inline: auto;
        white-space: normal;
        word-break: keep-all;
    }

    .acon04__lead {
        max-width: 92vw;
        width: 92vw;
        margin-inline: auto;
        white-space: normal;
        word-break: keep-all;
    }

    .acon04 .acon04__now {
        left: 77vw;
        top: auto;
        bottom: 23vw;
        width: 18vw;
        height: 27vw;
    }

    .acon04 .acon04__now-badge {
        width: 17vw;
    }

    .acon04 .acon04__now-dot {
        top: 8vw;
        width: 18vw;
    }

    .acon04 .acon04__now--mobile {
        left: 50%;
        top: -15.2vw;
        right: auto;
        bottom: auto;
        height: 11.2vw;
        transform: translateX(-50%);
        z-index: 2;
    }

    /* ★ 핀 스크럽 → Swiper + autoplay 로 전환(유저 지시 2026-08-07). 그 전엔 터치 가로
       스크롤이었고(2026-08-06 에 핀 스크럽으로 통일), 이제 트랙 이동은 Swiper 가 소유한다.
       .acon04__slider = 컨테이너 · .acon04__track = wrapper · .acon04__card = slide 로,
       표준 swiper 클래스 대신 wrapperClass/slideClass 로 매핑한다(PC 가 같은 DOM 을 GSAP
       핀 트랙으로 쓰기 때문 — 마크업 주석 참조). 그래서 swiper-bundle.css 가 컨테이너·
       wrapper 에 주던 최소 3줄(overflow/width/transition-property)을 여기서 직접 공급한다. */
    .acon04 .acon04__slider {
        overflow: hidden;
    }

    .acon04 .acon04__track {
        width: 100%;
        margin-top: 9vw;
        /* ★ 좌우 padding·gap 금지 — Swiper 는 슬라이드 폭 + spaceBetween 만으로 translate 을
           계산해서 wrapper 의 CSS padding/gap 은 계산에 안 잡히고, 그만큼 센터링이 어긋난다.
           카드 간격은 spaceBetween(4vw 상당 px, js/main.js), 좌우 여백은 centeredSlides 소유.
           padding-top 은 카드4 의 NOW 배지(top:-15.2vw)가 잘리지 않게 유지. */
        padding: 15.2vw 0 3vw;
        gap: 0;
        align-items: stretch;
        transition-property: transform;
    }

    .acon04 .acon04__card {
        position: relative;
        width: 78vw;
        height: auto;
        min-height: 78vw;
        padding: 7vw;
        border-radius: 9vw;
    }

    .acon04 .acon04__card-thumb {
        width: 100%;
        border-radius: 4vw;
    }

    .acon04__card-thumb img {
        width: 100% !important;
        height: auto !important;
    }

    .acon04 .acon04__card-year {
        height: 8vw;
        padding-inline: 4vw;
        margin-top: 5vw;
    }

    .acon04 .acon04__card-title {
        margin-top: 5vw;
        white-space: normal;
        word-break: keep-all;
    }

    .acon04 .acon04__card-desc {
        margin-top: 3.5vw;
        white-space: normal;
        word-break: keep-all;
    }

    /* acon05 mobile: separate bubble carousel above the retained dome-backed stats. */
    .acon05 {
        height: auto;
        padding: 18vw 0 19.2467vw;
    }

    .acon05 .acon05__bg {
        top: 0;
        left: 50%;
        width: auto !important;
        max-width: none;
        height: 100% !important;
        transform: translateX(-50%);
    }

    .acon05 .acon05__dome {
        display: none;
    }

    .acon05 .acon05__inner {
        width: 100%;
        gap: 0;
        padding: 0 6vw;
        box-sizing: border-box;
    }

    .acon05 .acon05__head {
        gap: 5vw;
    }

    .acon05 .acon05__title,
    .acon05 .acon05__desc {
        max-width: 92vw;
        width: 92vw;
        white-space: normal;
        word-break: keep-all;
    }

    .acon05 .acon05__mobile-swiper {
        order: 2;
        width: 100vw;
        margin-top: 10vw;
        padding: 1vw 0 0;
        overflow: visible;
    }

    .acon05 .acon05__mobile-swiper .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .acon05 .acon05__mobile-bubble {
        width: 39vw;
        height: 39vw;
        border-radius: 50%;
        background: #3b82f6;
        box-shadow: inset 0 0 9vw rgba(59, 8, 248, 0.15);
        font-family: var(--font-pretendard);
        font-size: var(--bodyM);
        font-weight: 600;
        line-height: 1.08;
        letter-spacing: -0.05em;
        color: #ffffff;
        text-align: center;
    }

    .acon05 .acon05__stats {
        order: 1;
        width: 100%;
        gap: 7vw;
        margin-top: 7vw;
    }

    .acon05 .acon05__stat {
        gap: 3vw;
    }

    .acon05 .acon05__stat-label {
        width: 32vw;
        height: 10vw;
        border-radius: 5vw;
    }

    .acon05 .acon05__amount-value {
        font-size: var(--displayM);
    }

    .acon05 .acon05__amount {
        padding-right: 8vw;
        box-sizing: content-box;
    }

    .acon05 .acon05__amount-unit {
        top: 2vw;
        right: 0;
        left: auto;
        width: 8vw;
        height: 8vw;
    }

    .acon05 .acon05__divider {
        width: 82vw;
        height: 1px;
    }

    .acon05 .acon05__curve {
        display: none;
    }

    /* acon06 mobile: approved centered title, horizontal card carousel, and visible conclusion */
    .acon06 {
        padding: 17vw 0 15vw;
        box-sizing: border-box;
        background-size: cover;
        background-position: center;
    }

    .acon06 .acon06__inner {
        width: 100%;
        padding: 0;
    }

    .acon06 .acon06__title {
        max-width: 88vw;
        line-height: 1.2;
        white-space: normal;
        word-break: keep-all;
    }

    .acon06 .acon06__slider {
        width: 100vw;
        height: 56vw;
        margin-top: 10vw;
        overflow: visible;
    }

    .acon06 .acon06__slider-track {
        flex-direction: row;
    }

    .acon06 .acon06__card {
        width: 84vw;
        height: 56vw;
        gap: 4vw;
        padding: 6vw;
        border-radius: 8vw;
    }

    .acon06 .acon06__card-head {
        min-height: 22vw;
        padding-right: 0;
    }

    .acon06 .acon06__card--b2b .acon06__card-head,
    .acon06 .acon06__card--uptime .acon06__card-head,
    .acon06 .acon06__card--pricing .acon06__card-head {
        padding-right: 0;
    }

    .acon06 .acon06__card-emblem {
        flex: 0 0 22vw;
    }

    .acon06 .acon06__card-emblem img {
        width: 22vw !important;
        height: auto !important;
    }

    .acon06 .acon06__nav {
        margin-top: 7vw;
        gap: 3vw;
    }

    .acon06 .acon06__nav-btn {
        width: 12vw;
        height: 12vw;
    }

    .acon06 .acon06__nav-arrow {
        width: 12vw !important;
        height: auto !important;
    }

    .acon06 .acon06__lead {
        width: 88vw;
        margin-top: 10vw;
        text-indent: 0;
        white-space: normal;
        word-break: keep-all;
    }

    /* acon07 mobile: approved centered content with the retained photo Swiper in bottom flow. */
    .acon07 {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        padding-top: 18vw;
        padding-bottom: 8vw;
    }

    .acon07 .acon07__inner {
        order: 1;
        width: 100%;
        padding: 0 6vw;
        box-sizing: border-box;
    }

    .acon07 .acon07__headline {
        max-width: 92%;
        white-space: normal;
        word-break: keep-all;
    }

    .acon07 .acon07__logo {
        margin-top: 8vw;
    }

    .acon07 .acon07__logo img {
        width: 65vw !important;
        height: auto !important;
    }

    .acon07 .acon07__desc {
        max-width: 100%;
        width: 100%;
        margin-top: 8vw;
        white-space: normal;
        word-break: keep-all;
    }

    .acon07 .aura:has(> .acon07__cta) {
        margin-top: 8vw;
    }

    .acon07 .acon07__cta {
        padding: 4vw 8vw;
    }

    .acon07 .acon07__slide {
        position: relative;
        top: auto;
        left: auto;
        order: 2;
        height: 48vw;
        margin-top: 7vw;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .acon07 .acon07__slide-photo {
        width: 37vw;
        height: 48vw;
    }

    /* acon08 mobile: approved centered title followed by three cards in DOM order. */
    .acon08 {
        padding: 18vw 0;
        box-sizing: border-box;
    }

    .acon08 .acon08__inner {
        width: 100%;
        gap: 10vw;
    }

    .acon08 .acon08__title {
        max-width: 92%;
        white-space: normal;
        word-break: keep-all;
    }

    .acon08 .acon08__cards {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 5vw;
    }

    .acon08 .acon08__card {
        width: 88vw;
        height: auto;
        padding: 8vw 6vw;
        box-sizing: border-box;
        border-radius: 8vw;
    }

    .acon08 .acon08__card-media {
        height: auto;
        margin-top: 0;
        align-items: center;
    }

    .acon08 .acon08__card-emblem {
        width: 24vw !important;
        height: auto !important;
    }

    .acon08 .acon08__card-title {
        max-width: 100%;
        margin-top: 6vw;
        white-space: normal;
        word-break: keep-all;
    }

    .acon08 .acon08__card-desc {
        max-width: 100%;
        margin-top: 4vw;
        white-space: normal;
        word-break: keep-all;
    }

    /* acon09 mobile: approved marquee, centered introduction, and two-card instructor row. */
    .acon09 {
        height: auto;
        padding-bottom: 16vw;
        box-sizing: border-box;
    }

    .acon09 .acon09__marquee {
        height: 16vw;
        overflow: visible;
        contain: paint;
    }

    .acon09 .acon09__marquee-track {
        gap: 32vw;
        margin-left: 0;
    }

    .acon09 .acon09__marquee-group {
        gap: 16vw;
    }

    .acon09 .acon09__inner {
        width: 100%;
        margin-top: 12vw;
        margin-left: 0;
        flex-direction: column;
        align-items: center;
        gap: 12vw;
    }

    .acon09 .acon09__intro {
        width: 88vw;
        margin-top: 0;
        align-items: center;
    }

    .acon09 .acon09__title {
        max-width: 92%;
        margin-bottom: 5vw;
        margin-left: 0;
        white-space: normal;
        word-break: keep-all;
    }

    .acon09 .acon09__desc {
        max-width: 100%;
        margin-bottom: 6vw;
        white-space: normal;
        word-break: keep-all;
    }

    .acon09 .acon09__cta {
        width: 58vw;
        height: 14vw;
    }

    .acon09 .acon09__profile-list {
        width: 92vw;
        height: auto;
        gap: 4vw;
        align-items: stretch;
    }

    .acon09 .acon09__profile-card {
        width: 44vw;
        height: auto;
        padding-top: 3vw;
        padding-bottom: 4vw;
        border-radius: 4vw;
    }

    .acon09 .acon09__profile-media {
        width: 38vw;
        height: 37vw;
        border-radius: 4vw;
    }

    .acon09 .acon09__profile-photo {
        width: 31vw !important;
        height: auto !important;
    }

    .acon09 .acon09__profile-name {
        margin-top: 4vw;
    }

    .acon09 .acon09__profile-divider {
        width: 32vw;
        margin-top: 3vw;
    }

    .acon09 .acon09__profile-role {
        max-width: 35vw;
        margin-top: 3vw;
        white-space: normal;
        word-break: keep-all;
        text-align: center;
    }

    /* acon10: PC 와 동일한 가로 마퀴 유지 — 카드 폭만 줄인다(열 수 전환 없음) */
    .acon10 {
        height: auto;
        padding: 18vw 0 16vw;
        background-size: 100% 100%;
        background-position: 0 0;
    }

    /* vw 는 스크롤바를 포함한 375 기준이라 92vw=345 인데 실제 콘텐츠 폭은 360 이다 —
       부모 section 이 block 이라 그 15px 차이만큼 왼쪽으로 쏠린다(실측 중심 -7.5px) */
    .acon10__inner {
        width: 92vw;
        margin-inline: auto;
        gap: 4vw;
    }

    .acon10__slider {
        margin-top: 9vw;
    }

    .acon10__card {
        width: 74vw;
        height: auto;
        padding: 5vw 4.5vw 7vw;
        border-radius: 5vw;
    }

    .acon10__card-fig {
        width: 100%;
        height: 36vw;
        border-radius: 3.5vw;
    }

    .acon10__card-meta {
        margin-top: 4.5vw;
        gap: 1.2vw;
    }

    /* IMG:AUTO 의 PC 폭(23px)은 모바일 --px 스케일에서 4.5px 로 접혀 별이 안 보인다 */
    .acon10__card-meta > .acon10__card-star {
        width: 4.2vw;
    }

    .acon10__card-divider {
        width: 0.4vw;
        height: 3.4vw;
    }

    /* 모바일은 카드 height:auto 라 리뷰 길이에 따라 카드마다 높이가 갈린다 — 클램프 상한과
       같은 5줄로 min-height 를 잡아 슬라이드 높이를 균일하게 만든다(em 기반이라 폰트 무관) */
    .acon10__card-text {
        min-height: calc(1.56em * 5);
        margin-top: 3.5vw;
        max-width: 100%;
    }

    .acon10__empty {
        margin-top: 10vw;
        padding-bottom: 20vw;
    }
}