:root {
  --paper: #eef0ee;
  --board: #ffffff;
  --key: #202020;
  --grey: #5c5f5e;
  --cyan: #00a9e0;
  --magenta: #e6007e;
  --a2-ink: #15222a;
  --a2-green: #1bff8f;
  --content: 1120px;
  --gutter: max(clamp(20px, 4vw, 56px), calc((100vw - var(--content)) / 2));
  --section: clamp(48px, 5.5vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--key);
  font-family: "Wanted Sans Variable", "Wanted Sans", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }

h2 { font-size: clamp(1.125rem, 1.4vw, 1.25rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }

/* 머리글 */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding: 16px var(--gutter);
}
.site-logo { display: block; width: clamp(260px, 26vw, 340px); }
.site-header nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-header nav a { text-decoration: none; font-weight: 500; font-size: .9375rem; }
.site-header nav .lang { padding-left: 24px; border-left: 1px solid #b9bcba; }
.site-header nav a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* 히어로 */
.hero {
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px clamp(24px, 4vw, 64px);
  padding: clamp(12px, 1.5vw, 24px) var(--gutter) clamp(24px, 3vw, 40px);
}
.hero h1 {
  font-size: clamp(2rem, 3.7vw, 3.5rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero-sub { margin-top: .8em; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); font-weight: 600; line-height: 1.4; }
.hero-sub + .hero-body { margin-top: .75em; }
.hero-body { margin-top: 1.25em; max-width: 34em; color: var(--grey); font-size: 1rem; }

/* 전개도와 상자 */
.stage {
  --u: 7.35px;
  position: relative;
  display: block;
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 43);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  perspective: calc(var(--u) * 180);
  touch-action: manipulation;
}
.tilt, .box, .p, .paper, .ink { display: block; }
.tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s ease-out;
}
.box {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: calc(var(--u) * 16) calc(var(--u) * 21.5);
  transform: translate3d(0, 0, 0) scale(1) rotateX(0deg) rotateY(0deg) translateZ(0);
  transition: transform 1.5s cubic-bezier(.6, 0, .2, 1);
}
.box.is-folded {
  transform: translate3d(calc(var(--u) * 8), 0, 0) scale(1.7) rotateX(-24deg) rotateY(-34deg) translateZ(calc(var(--u) * 4.5));
  transition-delay: .9s;
}

.net-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateZ(1px);
  pointer-events: none;
  transition: opacity .4s;
}
.net-lines path { fill: none; vector-effect: non-scaling-stroke; }
.net-lines .cut { stroke: var(--magenta); stroke-width: 1.5px; stroke-linejoin: round; }
.net-lines .fold { stroke: var(--cyan); stroke-width: 1.25px; stroke-dasharray: 6 5; }
.is-folded .net-lines { opacity: 0; }

.p {
  position: absolute;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.5, 0, .2, 1);
}
.paper, .ink { position: absolute; inset: 0; }
.paper { background: var(--board); transition: background-color .9s ease .3s; }
.is-folded .paper { background: #0089b8; transition-delay: 1s; }
.ink {
  opacity: 0;
  backface-visibility: hidden;
  transform: translateZ(.2px);
  transition: opacity .9s ease .3s;
}
.is-folded .ink { opacity: 1; transition-delay: 1s; }

.ink-front { background: var(--cyan); }
.ink-side { background: #0089b8; }
.ink-top { background: #3fbfe9; }
.ink img { position: absolute; }
.ink-front img { left: 16%; right: 16%; top: 36%; width: 68%; }
.ink-top img { left: 34%; top: 26%; width: 32%; }
.barcode {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 7%;
  height: 13%;
  border: solid #fff;
  border-width: 2px 3px;
  background: #fff repeating-linear-gradient(90deg, #202020 0 2px, #fff 2px 3px, #202020 3px 4px, #fff 4px 7px, #202020 7px 10px, #fff 10px 12px);
}

/* 전개도 위치: 앞면이 기준, 나머지 면은 접히는 선에 매달려 있다 */
.front { left: calc(var(--u) * 9); top: calc(var(--u) * 12); width: calc(var(--u) * 14); height: calc(var(--u) * 19); }
.left { right: 100%; top: 0; width: calc(var(--u) * 9); height: 100%; transform-origin: right center; }
.right { left: 100%; top: 0; width: calc(var(--u) * 9); height: 100%; transform-origin: left center; }
.back { left: 100%; top: 0; width: calc(var(--u) * 14); height: 100%; transform-origin: left center; }
.glue { left: 100%; top: 0; width: calc(var(--u) * 2); height: 100%; transform-origin: left center; }
.glue .paper { clip-path: polygon(0 0, 100% 6.3%, 100% 93.7%, 0 100%); }
.lid { left: 0; bottom: 100%; width: 100%; height: calc(var(--u) * 9); transform-origin: center bottom; }
.base { left: 0; top: 100%; width: 100%; height: calc(var(--u) * 9); transform-origin: center top; }
.tuck { left: 0; width: 100%; height: calc(var(--u) * 3); }
.tuck-t { bottom: 100%; transform-origin: center bottom; }
.tuck-t .paper { clip-path: polygon(0 100%, 3.6% 33%, 9% 0, 91% 0, 96.4% 33%, 100% 100%); }
.tuck-b { top: 100%; transform-origin: center top; }
.tuck-b .paper { clip-path: polygon(0 0, 3.6% 67%, 9% 100%, 91% 100%, 96.4% 67%, 100% 0); }
.dust { left: 0; width: 100%; height: calc(var(--u) * 5.5); }
.dust-t { bottom: 100%; transform-origin: center bottom; }
.dust-t .paper { clip-path: polygon(0 100%, 11% 0, 91% 0, 100% 100%); }
.dust-b { top: 100%; transform-origin: center top; }
.dust-b .paper { clip-path: polygon(0 0, 11% 100%, 91% 100%, 100% 0); }

/* 접는 순서. 안쪽 날개는 92도로 접어 겉면과 겹치지 않게 한다 */
.is-folded .dust,
.is-folded .glue,
.is-folded .tuck {
  visibility: hidden; /* 다 접히면 안쪽 날개는 숨겨 겉면을 뚫고 보이지 않게 한다 */
  transition: transform .8s cubic-bezier(.5, 0, .2, 1), visibility 0s linear 2.8s;
}
.is-folded .dust-t, .is-folded .tuck-t { transform: rotateX(92deg); }
.is-folded .dust-b, .is-folded .tuck-b { transform: rotateX(-92deg); }
.is-folded .glue { transform: rotateY(92deg); }
.is-folded .back { transform: rotateY(90deg); transition-delay: .55s; }
.is-folded .right { transform: rotateY(90deg); transition-delay: 1s; }
.is-folded .left { transform: rotateY(-90deg); transition-delay: 1s; }
.is-folded .base { transform: rotateX(-90deg); transition-delay: 1.45s; }
.is-folded .lid { transform: rotateX(90deg); transition-delay: 1.9s; }

.shadow {
  position: absolute;
  left: 22%;
  right: 12%;
  bottom: 1%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(32, 32, 32, .28), rgba(32, 32, 32, 0));
  opacity: 0;
  transition: opacity .6s;
}
.is-folded-stage .shadow { opacity: 1; transition-delay: 2.1s; }

/* 서비스 */
.services { padding: var(--section) var(--gutter) 0; }
.panels {
  --cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28 3 1H97L100 28' fill='%23fff' stroke='%23e6007e' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: calc(16px + 18px);
  background: var(--board);
  border: solid var(--magenta);
  border-width: 0 1.5px 1.5px;
}
.panels li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 20px);
  padding: clamp(18px, 1.8vw, 26px);
  background-image: linear-gradient(90deg, var(--cyan) 6px, transparent 6px);
  background-size: 11px 1.25px;
  background-repeat: repeat-x;
}
.panels li::before {
  content: "";
  position: absolute;
  left: -1.5px;
  right: -1.5px;
  bottom: 100%;
  height: 18px;
  background: var(--cut) center / 100% 100% no-repeat;
}
.panels li + li { border-left: 1.25px dashed var(--cyan); }
.panels li:nth-child(n + 2)::before { left: 0; }
.panels h3 {
  font-size: clamp(1.1875rem, 1.6vw, 1.4375rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  word-break: normal;
}
.panels p { color: var(--grey); font-size: .9375rem; margin-top: auto; max-width: 30em; }

/* 플랫폼 */
.platform { margin-top: var(--section); background: var(--a2-ink); color: #fff; }
.platform-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px clamp(32px, 5vw, 80px);
  align-items: center;
  padding: var(--section) var(--gutter);
}
.platform-brand img { margin-top: 20px; width: min(100%, 360px); }
.platform-copy p { max-width: 38em; }
.demo {
  display: inline-block;
  margin-top: 20px;
  padding: 9px 30px;
  background: var(--a2-green);
  color: var(--a2-ink);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s;
}
.demo:hover { background: #fff; }
.platform :focus-visible { outline-color: #fff; }

/* 회사소개 */
.company {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(0, 5fr);
  gap: 12px clamp(24px, 3vw, 48px);
  padding: var(--section) var(--gutter);
}
.company p {
  max-width: 46em;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.75;
}

/* 바닥글 */
.site-footer {
  display: grid;
  gap: 4px;
  padding: 24px var(--gutter) 28px;
  background: var(--key);
  color: #fff;
  font-size: .875rem;
}
.footer-name { font-weight: 600; }
.site-footer address { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 32px; font-style: normal; color: #d4d6d5; }
.site-footer a { text-underline-offset: 4px; }
.site-footer :focus-visible { outline-color: #fff; }

/* 화면 크기별 조정 */
@media (max-width: 1240px) {
  .stage { --u: 6.3px; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .stage { --u: min(6.3px, calc((100vw - 2 * var(--gutter)) / 48)); margin-inline: auto; }
  .platform-inner { grid-template-columns: minmax(0, 1fr); }
  .company { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .panels { grid-template-columns: minmax(0, 1fr); }
  .panels li + li { border-left: 0; }
  .panels li:not(:first-child) { background-image: linear-gradient(90deg, var(--cyan) 6px, transparent 6px); }
  .panels li:not(:first-child)::before { display: none; }
  .panels li { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tilt, .box, .p, .paper, .ink, .net-lines, .shadow, .demo { transition: none !important; }
}