/* =========================================================
   Project Name landing — design tokens (from Figma "font / color")
   ========================================================= */
:root {
  --white: #ffffff;
  --black: #000000;
  --logo-blue: #2337cb;
  --gray-black: #121212;
  --gray: #c4c4c4;
  --dark-gray: #777777;
  --yellow: #f7ea47;
  --sky-blue: #bde0ff;
  --blue: #1961f2;

  /*
    PC design is drawn at 1315px.
    1315px 이상: 1u = 1px (실제 크기)
    768 ~ 1314px (태블릿): PC 디자인을 화면 폭 비율대로 축소
    --u는 .page(컨테이너) 폭 기준이라 스크롤바 폭이 빠진 값으로 계산됨
    + 화면 높이가 낮으면(860px 미만) 높이 기준으로도 축소 → 섹션 하나가 한 화면에 꽉 차게
  */
  --u: min(1px, 100cqw / 1315, 100svh / 860);
  --line: calc(1.5 * var(--u));

  /* 모션 공통 곡선 */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1); /* 급하지 않게 서서히 감속 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--gray-black);
  color: var(--white);
  font-family: "Funnel Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
img { display: block; }
picture { display: block; }
ul { list-style: none; }

.page {
  container-type: inline-size;
  overflow-x: clip;
}
.mo-only { display: none; }

/* =========================================================
   Header
   ========================================================= */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(94 * var(--u));
  padding: 0 calc(50 * var(--u));
}
/* 텍스트 로고 (Project Name) */
.logo-text {
  display: block;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}
.header__nav {
  display: flex;
  justify-content: space-between;
  width: calc(238 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.header__nav a { transition: opacity .3s ease; }
.header__nav a:hover { opacity: .6; }

/* CONTACT US: 기능 버튼이라 계속 은은하게 깜빡임 (호버 시 멈추고 선명하게) */
@keyframes blink { 50% { opacity: .25; } }
.cta-blink { animation: blink 1.6s ease-in-out infinite; }
.cta-blink:hover, .cta-blink:focus-visible { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cta-blink { animation: none; } }
.header__menu-btn { display: none; }
.mobile-menu { display: none; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  /* 히어로는 화면 폭을 꽉 채움(fill container).
     --hu: 폭 기준 배율, 단 한 화면 높이 안에 들어가도록 높이로도 제한 */
  --hu: min(100cqw / 1315, (100svh - 94 * var(--u)) / 700);
  position: relative;
  height: calc(100svh - 94 * var(--u)); /* 헤더 + 히어로 = 한 화면 */
  padding: 0 calc(50 * var(--u));
}
.hero__lines {
  position: relative;
  height: calc(263 * var(--hu));
}
.hero__intro {
  position: absolute;
  left: 0;
  top: calc(140.5 * var(--hu));
  width: calc(538 * var(--hu));
  font-size: calc(18 * var(--hu));
  font-weight: 700;
  line-height: 1.3;
}
.hline {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--line);
  background: var(--white);
}
.hline--top { top: 0; }
.hline--bottom { bottom: 0; }
.vline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--line);
  margin-left: calc(var(--line) / -2);
  background: var(--white);
}
/* 세로선 위치는 선 박스 폭 대비 비율(디자인 1215 기준) → 폭이 늘어나도 비율 유지 */
.v1 { left: 57.318%; }
.v2 { left: 70.535%; }
.v3 { left: 87.243%; }
.v4 { left: 90.505%; }
.v5 { left: 92.263%; }
.v6 { display: none; }

/* ---- Intro animation (약 4.4초) ----
   1) 윗선 왼→오  2) 세로선 왼쪽부터 차례로 내려옴  3) 아랫선 왼→오
   4) 소개 글 등장  5) 도형 + 타이틀이 왼쪽에서 들어옴 */
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes draw-y { from { transform: scaleY(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(calc(16 * var(--hu))); } }
/* 도형·타이틀: 짧은 거리를 길고 완만하게 이동 + 투명도는 앞쪽에서 천천히 채워짐 */
@keyframes shape-in {
  0%   { opacity: 0; transform: translateX(calc(-120 * var(--hu))); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes title-in {
  0%   { opacity: 0; transform: translateX(calc(-70 * var(--hu))); clip-path: inset(0 100% 0 0); }
  50%  { opacity: 1; }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes intro-in { from { opacity: 0; transform: translateX(calc(-80 * var(--hu))); } }

.hline { transform-origin: left center; animation: draw-x .85s var(--ease-in-out) both; }
.hline--top { animation-delay: .15s; }
.hline--bottom { animation-delay: 1.4s; }
.vline {
  transform-origin: top center;
  animation: draw-y .6s var(--ease-in-out) both;
  animation-delay: calc(.65s + var(--d) * .1s);
}
.v1 { --d: 0; } .v2 { --d: 1; } .v3 { --d: 2; } .v4 { --d: 3; } .v5 { --d: 4; } .v6 { --d: 5; }
.hero__intro { animation: intro-in 1.2s var(--ease-out) 1.9s both; }
.hero__shape { animation: shape-in 2.2s var(--ease-soft) 1.85s both; }
.hero__title h1 { animation: title-in 2.3s var(--ease-soft) 2.1s both; }

@media (prefers-reduced-motion: reduce) {
  .hline, .vline, .hero__intro, .hero__shape, .hero__title h1 { animation: none; }
}

.hero__title {
  display: flex;
  align-items: center;
  gap: calc(65 * var(--hu));
  height: calc(348 * var(--hu));
  margin-top: calc(34 * var(--hu));
}
/* 원본 SVG(352×272)를 90° 회전해 272×352 박스에 배치 */
.hero__shape {
  position: relative;
  flex-shrink: 0;
  width: calc(272 * var(--hu));
  height: calc(352 * var(--hu));
}
.hero__shape img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(352 * var(--hu));
  height: calc(272 * var(--hu));
  transform: translate(-50%, -50%) rotate(90deg);
}
.hero__title h1 {
  font-size: calc(100 * var(--hu));
  font-weight: 700;
  line-height: .9;
  letter-spacing: calc(4 * var(--hu));
  white-space: nowrap;
}

/* =========================================================
   Folders — 스크롤 시 탭(폴더 라벨)이 위에 층층이 쌓임
   ========================================================= */
.folders { position: relative; }
.folder {
  --tab-h: calc(40 * var(--u)); /* 폴더 탭 높이 (디자인 원본 20) — 이 숫자로 조절 */
  display: flex;
  flex-direction: column;
  height: calc(802 * var(--u));
}
/* 폴더 4개: 모두 top 0에 붙어서 쌓임.
   탭 줄의 빈 곳은 투명 → 아래 폴더의 탭이 비쳐 보여 탭이 한 줄로 나란히 정렬됨 */
.folder--stack {
  position: sticky;
  top: 0;
  height: 100svh; /* 폴더 하나 = 한 화면 */
}
.folder__tab {
  flex-shrink: 0;
  height: var(--tab-h);
  background: transparent no-repeat 0 0 / 100% 100%;
}
.folder--white .folder__tab { background-image: url(assets/folder-top-white.svg); }
.folder--yellow .folder__tab { background-image: url(assets/folder-top-yellow.svg); }
.folder--skyblue .folder__tab { background-image: url(assets/folder-top-skyblue.svg); }
.folder--blue .folder__tab { background-image: url(assets/folder-top-blue.svg); }

.folder__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--black);
}
.folder--white .folder__body { background: var(--white); }
.folder--yellow .folder__body { background: var(--yellow); }
.folder--skyblue .folder__body { background: var(--sky-blue); }
.folder--blue .folder__body { background: var(--blue); color: var(--white); }

/* ---- White folder: solution ---- */
.solution {
  display: flex;
  flex-direction: column;
  gap: calc(70 * var(--u));
  width: calc(1125 * var(--u));
}
.solution__heading {
  font-size: calc(46 * var(--u));
  font-weight: 600;
  line-height: 1;
}
.solution__row {
  display: flex;
  align-items: center;
  gap: calc(60 * var(--u));
}
.solution__icon img { width: calc(390 * var(--u)); height: calc(247 * var(--u)); }
.solution__list {
  display: flex;
  flex-direction: column;
  gap: calc(45 * var(--u));
  width: calc(635 * var(--u));
}
.solution__list li {
  position: relative;
  height: calc(98 * var(--u));
  padding-top: calc(26 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 600;
  line-height: 1.2;
}
.solution__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(635 * var(--u));
  height: var(--line);
  background: currentColor;
}
/* 디자인상 두 번째 문장의 텍스트 폭은 664 (선은 635) */
.solution__list li:nth-child(2) { width: calc(664 * var(--u)); }
/* 스크롤하면 회색 → 검정 (--p: 0~1, script.js에서 계산) */
/* 흰 섹션에 들어오자마자: 선1 → 문구1 → 선2 → 문구2 순서로 왼쪽에서 오른쪽으로 등장
   (script.js가 섹션 진입 시 .solution__list에 .is-in 부여) */
.solution__list li::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s var(--ease-in-out) var(--line-delay);
}
.solution__list li > span {
  display: block;
  opacity: 0;
  transform: translateX(calc(-60 * var(--u)));
  clip-path: inset(0 100% 0 0);
  transition:
    opacity .6s ease-out var(--text-delay),
    transform 1s var(--ease-out) var(--text-delay),
    clip-path 1s var(--ease-out) var(--text-delay);
}
.solution__list li:nth-child(1) { --line-delay: 0s;   --text-delay: .35s; }
.solution__list li:nth-child(2) { --line-delay: .75s; --text-delay: 1.1s; }
.solution__list.is-in li::before { transform: none; }
.solution__list.is-in li > span { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
/* 섹션을 벗어날 때는 지연 없이 조용히 리셋 → 다시 들어오면 재생 */
.solution__list:not(.is-in) li { --line-delay: 0s; --text-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .solution__list li::before, .solution__list li > span { transform: none; opacity: 1; clip-path: none; transition: none; }
}

/* ---- Yellow / Sky blue / Blue folders: feature ---- */
.feature {
  display: flex;
  flex-direction: column;
  gap: calc(58 * var(--u));
  width: calc(1174 * var(--u));
}
.feature__bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: calc(103 * var(--u));
  border-top: var(--line) solid currentColor;
  border-bottom: var(--line) solid currentColor;
  font-size: calc(54 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.feature__title,
.feature__num {
  display: flex;
  align-items: center;
  border-left: var(--line) solid currentColor;
  border-right: var(--line) solid currentColor;
  font: inherit;
}
.feature__title { padding: 0 calc(27 * var(--u)); }
.feature__num { padding: 0 calc(50 * var(--u)); }

.feature__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: calc(1172 * var(--u));
}
.feature--reverse .feature__row { flex-direction: row-reverse; }
/* 특장점 그림 = 원래 선(SVG) + 원래 도형 자리에 GIF */
.feature__icon {
  position: relative;
  flex-shrink: 0;
  width: calc(297 * var(--u));
  height: calc(372.6 * var(--u));
}
.feature__lines img { width: 100%; height: 100%; }
.feature__gif {
  position: absolute;
  left: var(--gx); top: var(--gy); width: var(--gw); height: var(--gh);
}
/* 도형 자리 (원본 SVG 안 도형 영역 비율) */
.feature__icon--1 { --gx: 4.366%;  --gy: 8.625%;  --gw: 80.605%; --gh: 61.071%; }
.feature__icon--2 { --gx: 19.347%; --gy: 29.39%;  --gw: 80.402%; --gh: 59.911%; }
.feature__icon--3 { --gx: 19.395%; --gy: 16.048%; --gw: 80.605%; --gh: 59.913%; }
.feature__text {
  display: flex;
  align-items: center;
  min-height: calc(372 * var(--u));
  width: calc(793.2 * var(--u));
  padding: calc(45 * var(--u));
  border: var(--line) solid currentColor;
  font-size: calc(27 * var(--u));
  font-weight: 500;
  line-height: 1.3;
}
.folder--yellow .feature__text { min-height: 0; }

/* =========================================================
   Gradient + Footer
   ========================================================= */
.gradient__svg { display: block; width: 100%; height: calc(177.516 * var(--u)); }
.gradient__svg--mo { display: none; }

/* ---- Outro: 띠 → 로고 → 푸터 폴더 순서로 등장 (script.js가 스크롤에 따라 .is-on 부여) ---- */
.band {
  opacity: 0;
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: center top;
  transition: opacity .8s ease-out, transform .9s var(--ease-out);
}
.band.is-on { opacity: 1; transform: none; }

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(160 * var(--u));
  height: calc(100svh - 177.516 * var(--u)); /* 띠 + 푸터 = 한 화면 */
  padding-top: calc(67 * var(--u));
  overflow: hidden;
}
.footer__logo {
  position: relative;
  flex-shrink: 0;
  width: calc(1087 * var(--u));
  height: calc(197.636 * var(--u));
}
.footer__wordmark {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -.5em;
  font-size: calc(134 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
/* 로고: 왼→오로 닦이듯 드러남 / 저작권 문구: 로고가 거의 다 나온 뒤 살짝 올라오며 등장 */
.footer__logo-img {
  clip-path: inset(0 100% 0 0);
  transform: translateX(calc(-40 * var(--u)));
  transition: clip-path 2.1s var(--ease-in-out), transform 2.4s var(--ease-out);
}
.footer__copy {
  opacity: 0;
  transform: translateY(calc(12 * var(--u)));
  transition: opacity 1.2s ease-out, transform 1.4s var(--ease-out);
}
.footer__logo.is-on .footer__logo-img { clip-path: inset(0 0 0 0); transform: none; }
.footer__logo.is-on .footer__copy { opacity: 1; transform: none; transition-delay: 1.5s; }
.footer__copy {
  position: absolute;
  top: 28.7%; /* 줄 간격을 늘린 만큼 위로 올려 로고 세로 중앙 유지 */
  right: .22%;
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
}
.footer__folders {
  position: relative;
  flex-shrink: 0;
  width: calc(1051.719 * var(--u));
  height: calc(552 * var(--u));
  /* 화면 높이와 상관없이 항상 화면 맨 아래에서 도형 중간이 잘리게:
     552 중 위쪽 260만 보이고 나머지 292는 푸터 밖으로 */
  margin-top: auto;
  margin-bottom: calc(-292 * var(--u));
}
.footer__logo { margin-top: auto; }
.footer__folder {
  position: absolute;
  top: calc(-0.48 * var(--u));
  width: calc(484.62 * var(--u));
  height: calc(552 * var(--u));
  opacity: 0;
  transform: translateY(calc(120 * var(--u)));
  transition: opacity .9s ease-out, transform 1.2s var(--ease-out);
}
.footer__folder.is-on { opacity: 1; transform: none; }
.footer__folder--1 { left: 0; }
.footer__folder--2 { left: calc(283.55 * var(--u)); }
.footer__folder--3 { left: calc(567.1 * var(--u)); }
.footer__folder span {
  position: absolute;
  top: calc(1 * var(--u));
  right: calc(441.62 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 600;
  letter-spacing: calc(-0.54 * var(--u));
  white-space: nowrap;
}
.footer__folder picture {
  position: absolute;
  left: calc(57.62 * var(--u));
  top: 0;
  width: calc(427.003 * var(--u));
  height: 100%;
}
.footer__folder > * { transition: transform .6s var(--ease-out); }
.footer__folder img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(552 * var(--u));
  height: calc(427.003 * var(--u));
  transform: translate(-50%, -50%) rotate(90deg);
}
/* 호버하면 도형과 글자가 같이 위로 올라옴 */
.footer__folder:hover > *,
.footer__folder:focus-visible > * { transform: translateY(calc(-80 * var(--u))); }

@media (prefers-reduced-motion: reduce) {
  .band, .footer__logo-img, .footer__copy, .footer__folder { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* =========================================================
   Contact page (PC)
   ========================================================= */
.contact {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - 94 * var(--u));
  padding: calc(40 * var(--u)) 0 calc(89 * var(--u));
}
.contact__form-view {
  display: flex;
  align-items: center;
  gap: calc(104 * var(--u));
}
.contact__intro {
  display: flex;
  flex-direction: column;
  gap: calc(53 * var(--u));
  width: calc(504 * var(--u));
}
.contact__intro img { width: calc(497 * var(--u)); height: calc(167 * var(--u)); }
.contact__title,
.contact__done-title {
  font-size: calc(54 * var(--u));
  font-weight: 700;
  line-height: 1.3;
}

.form {
  display: flex;
  flex-direction: column;
  gap: calc(69 * var(--u));
  width: calc(503 * var(--u));
}
.form__fields {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(53 * var(--u));
}
.form__input {
  display: block;
  width: 100%;
  height: calc(45 * var(--u));
  padding: 0 0 calc(4 * var(--u));
  background: none;
  border: 0;
  border-bottom: var(--line) solid var(--gray);
  border-radius: 0;
  outline: none;
  color: var(--gray);
  font: 400 calc(24 * var(--u)) / 1.3 "Funnel Sans", sans-serif;
  caret-color: var(--gray);
}
.form__input::placeholder { color: var(--dark-gray); opacity: 1; }
.form__input:focus::placeholder { color: var(--gray); }

.form__warning {
  position: absolute;
  left: 0;
  top: calc(54 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding-left: calc(1 * var(--u));
  opacity: .6;
  color: var(--gray);
  font-size: calc(18 * var(--u));
  font-weight: 600;
  letter-spacing: calc(-0.54 * var(--u));
  white-space: nowrap;
}
.form__warning[hidden] { display: none; }
.form__warning img { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(67 * var(--u));
  border: var(--line) solid var(--white);
  color: var(--white);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover,
.btn:focus-visible { background: var(--white); color: var(--black); outline: none; }
.btn:disabled {
  border-color: var(--dark-gray);
  color: var(--dark-gray);
  background: none;
  cursor: default;
}

.contact__done {
  display: flex;
  flex-direction: column;
  gap: calc(45 * var(--u));
  width: calc(572 * var(--u));
}
.contact__done[hidden], .contact__form-view[hidden] { display: none; }
.contact__done-body {
  display: flex;
  flex-direction: column;
  gap: calc(45 * var(--u));
}
.contact__done-body img { width: 100%; height: calc(196 * var(--u)); }

/* =========================================================
   Mobile (360 ~ 767px)
   ========================================================= */
@media (max-width: 767px) {
  .mo-only { display: inline; }

  /* Header */
  .header {
    height: 45px;
    padding: 0 20px;
    max-width: none;
  }
  .logo-text { font-size: 14px; }
  .header__nav { display: none; }
  .header__menu-btn { display: block; width: 24px; height: 24px; }
  .header__menu-btn img { width: 24px; height: 24px; }
  .header--bordered { border-bottom: 1px solid var(--white); }

  /* Mobile menu (full screen) */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--gray-black);
    overflow-y: auto;
  }
  .mobile-menu[hidden] { display: none; }
  @keyframes menu-in { from { opacity: 0; } }
  @keyframes menu-item-in { from { opacity: 0; transform: translateY(12px); } }
  .mobile-menu { animation: menu-in .35s ease-out both; }
  .mobile-menu__list a { animation: menu-item-in .6s var(--ease-out) both; }
  .mobile-menu__list a:nth-child(2) { animation-delay: .06s; }
  .mobile-menu__list a:nth-child(3) { animation-delay: .12s; }
  .mobile-menu__list a.cta-blink { animation: menu-item-in .6s var(--ease-out) .12s both, blink 1.6s ease-in-out .8s infinite; }
  .mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    flex-shrink: 0;
    height: 45px;
    padding: 0 20px;
    border-bottom: 1px solid var(--white);
  }

  .mobile-menu__close,
  .mobile-menu__close img { width: 24px; height: 24px; }
  .mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: stretch;
    margin: 41px 20px 0;
  }
  .mobile-menu__list a {
    height: 52px;
    border-bottom: 1px solid var(--white);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
  }
  .mobile-menu__pattern {
    flex-shrink: 0;
    width: 305px;
    height: 312px;
    margin: 35px 0 24px;
  }

  /* Hero — 모바일도 폭에 맞춰 커짐 (360 기준, 최대 1.8배, 한 화면 높이 안) */
  .hero {
    --hu: clamp(1px, min(100cqw / 360, (100svh - 45px) / 672), 1.8px);
    height: max(calc(672 * var(--hu)), 100svh - 45px);
    padding: 0;
  }
  .hero__lines {
    height: calc(111 * var(--hu));
    margin: 0 3.06%;
  }
  .hline { height: 1px; }
  .hero__intro {
    top: calc(156 * var(--hu));
    left: 50%;
    width: calc(310 * var(--hu));
    transform: translateX(-50%);
    font-size: calc(12 * var(--hu));
    font-weight: 500;
    text-align: center;
  }
  @keyframes intro-in-mo { from { opacity: 0; transform: translateX(calc(-50% - 60px)); } }
  .hero__intro { animation-name: intro-in-mo; }
  .vline { width: 1px; margin-left: -.5px; }
  /* 선 박스 폭(디자인 338) 대비 비율 */
  .v1 { left: 57.216%; }
  .v2 { left: 70.222%; }
  .v3 { left: 86.666%; }
  .v4 { left: 89.876%; }
  .v5 { left: 91.607%; }
  .v6 { display: block; left: 89.941%; }
  /* 모바일에서는 v6이 v4와 v5 사이에 있으므로 순서 조정 */
  .v6 { --d: 4; } .v5 { --d: 5; }

  .hero__title {
    flex-direction: column;
    justify-content: center;
    gap: calc(27 * var(--hu));
    height: auto;
    margin-top: calc(138 * var(--hu));
  }
  .hero__shape { width: calc(144 * var(--hu)); height: calc(185 * var(--hu)); }
  .hero__shape img { width: calc(185 * var(--hu)); height: calc(144 * var(--hu)); }
  .hero__title h1 {
    font-size: calc(32 * var(--hu));
    line-height: 1;
    letter-spacing: calc(1.28 * var(--hu));
    text-align: center;
  }

  /* Folders */
  .folder { --tab-h: 28px; height: 632px; } /* 모바일 탭 높이 (디자인 원본 17) */
  .folder--stack { height: max(600px, 100svh); }
  .folder--white .folder__tab { background-image: url(assets/mo-folder-white.svg); }
  .folder--yellow .folder__tab { background-image: url(assets/mo-folder-yellow.svg); }
  .folder--skyblue .folder__tab { background-image: url(assets/mo-folder-skyblue.svg); }
  .folder--blue .folder__tab { background-image: url(assets/mo-folder-blue.svg); }

  .solution { gap: 0; width: 253px; }
  .solution__row { display: contents; }
  .solution__icon { order: -1; margin-bottom: 58px; }
  .solution__icon img { width: 253px; height: 159px; }
  .solution__heading {
    margin-bottom: 36px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
  }
  .solution__list { gap: 20px; width: 100%; }
  .solution__list li {
    height: auto;
    min-height: 70px;
    padding-top: 12px;
    font-size: 16px;
  }
  .solution__list li::before { width: 100%; height: 1px; }
  .solution__list li:nth-child(2) { width: auto; min-height: 89px; }

  .feature { align-items: center; gap: 25px; width: 322px; }
  .feature__bar {
    align-self: stretch;
    height: 31px;
    border-width: 1px;
    font-size: 14px;
  }
  .feature__title, .feature__num { border-width: 0 1px; }
  .feature__title { padding: 0 8px; }
  .feature__num { padding: 0 13px; }
  .feature__row,
  .feature--reverse .feature__row {
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
  }
  .feature__icon--1 { width: 187px; height: 222px; --gx: 0%;      --gy: 10.787%; --gw: 84.312%; --gh: 67.419%; }
  .feature__icon--2 { width: 207px; height: 229px; --gx: 23.261%; --gy: 30.131%; --gw: 76.259%; --gh: 64.629%; }
  .feature__icon--3 { width: 216px; height: 239px; --gx: 21.478%; --gy: 12.105%; --gw: 76.674%; --gh: 65.535%; }
  .feature__text {
    min-height: 0;
    width: 100%;
    padding: 14px 20px;
    border-width: 1px;
    font-size: 16px;
  }

  /* Gradient + Footer */
  .gradient__svg--pc { display: none; }
  .gradient__svg--mo { display: block; height: 46.083px; }
  .footer {
    gap: 42px;
    height: 189px;
    padding-top: 17.632px;
  }
  .footer__logo { width: 286px; height: 52px; }
  .footer__copy { top: 28.7%; right: 0; font-size: 4px; }
  .footer__folders { width: 406px; height: 225px; margin-bottom: -148px; }
  .footer__folder { top: 0; height: 225px; }
  .footer__folder--1 { left: 18px; width: 159.1px; }
  .footer__folder--2 { left: 123px; width: 159.9px; }
  .footer__folder--3 { left: 230px; width: 158px; }
  .footer__folder span {
    top: 58.3px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: -0.3px;
  }
  .footer__folder--1 span { right: 61.1px; }
  .footer__folder--2 span { right: 59.9px; }
  .footer__folder--3 span { right: 12px; }
  .footer__folder picture { left: 0; top: 10.37px; width: 100%; height: 205px; }
  .footer__folder img { width: 205px; height: 158px; }
  .footer__folder:hover > *,
  .footer__folder:focus-visible > * { transform: translateY(-24px); }

  /* Contact (mobile) */
  .contact {
    align-items: flex-start;
    min-height: calc(100svh - 45px);
    padding: 68px 0 40px;
  }
  .contact__form-view { flex-direction: column; gap: 68px; }
  .contact__intro { align-items: center; gap: 30px; width: 313px; }
  .contact__intro img { width: 301px; height: 102px; }
  .contact__title,
  .contact__done-title {
    width: 305px;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: 0.64px;
  }
  .form { gap: 40px; width: 304px; }
  .form__fields { gap: 25px; }
  .form__input {
    height: 30px;
    padding-bottom: 2px;
    border-bottom-width: 1px;
    font-size: 16px;
  }
  .form__warning {
    top: 31px;
    gap: 4px;
    font-size: 12px;
    letter-spacing: -0.36px;
  }
  .form__warning img { width: 12px; height: 12px; }
  .btn {
    height: 46px;
    border-width: 1px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
  }
  .contact__done { align-items: center; gap: 0; width: 313px; }
  .contact__done-body { align-items: center; gap: 30px; }
  .contact__done-body img { width: 301px; height: 102px; }
  .contact__done .btn { width: 304px; margin-top: 130px; }
}

/* 폴더 안 내용 패럴랙스 (script.js에서 transform 계산) */
[data-depth] { will-change: transform; }

/* GIF 그림: 정해진 자리 안에서 비율 유지 (잘리지 않게) */
.solution__icon img,
.feature__gif,
.contact__intro img,
.contact__done-body img { object-fit: contain; }
/* Contact GIF 배경(#101010)을 페이지 배경(#121212)에 자연스럽게 녹임 */
.contact__intro img,
.contact__done-body img { mix-blend-mode: lighten; }

@media (max-width: 767px) {
  .footer__wordmark { font-size: 34px; }
}