/* ===== main: 메인(index.php)에서만 로드 ===== */

/* ===== 공통 ===== */
.ctrl-btn {display: inline-flex;align-items: center;justify-content: center;width: 4.8rem;height: 4.8rem;border-radius: 50%;border: .2rem solid var(--color-ink);transition: background .3s, color .3s;}
.ctrl-btn svg {width: 2rem;height: 2rem;fill: none;stroke: currentColor;stroke-width: 2.2;stroke-linecap: round;stroke-linejoin: round;}
.ctrl-btn:hover {background: var(--color-ink);color: #fff;}
.ic-play {display: none;fill: currentColor !important;}
[aria-pressed="true"] .ic-play {display: block;}
[aria-pressed="true"] .ic-pause {display: none;}

/* ===== 01 히어로 ===== */
.hero {position: relative;padding: calc(var(--header-h) + 8rem) 0 8rem;overflow: hidden;}
.hero-bg {position: absolute;inset: 0;z-index: 0;pointer-events: none;}
.blob {position: absolute;border-radius: 50%;filter: blur(6rem);opacity: .55;}
.blob-a {top: -12rem;right: -8rem;width: 60rem;height: 60rem;background: var(--tint-1);}
.blob-b {bottom: -16rem;left: -10rem;width: 46rem;height: 46rem;background: var(--tint-2);}
.grid-dots {position: absolute;inset: 0;background-image: radial-gradient(rgba(18, 19, 26, .12) .1rem, transparent .1rem);background-size: 3.2rem 3.2rem;mask-image: linear-gradient(180deg, #000, transparent 75%);-webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);}
.hero .inner {position: relative;z-index: 1;}
.hero-slide {display: grid;grid-template-columns: .84fr 1.16fr;align-items: center;gap: 3rem;min-height: 60rem;}
.hero-title {font-size: 7.6rem;font-weight: 300;line-height: 1.25;letter-spacing: -.35rem;}
.hero-title em {position: relative;color: var(--color-primary);font-weight: 800;z-index: 0;}
.hero-title em::after {content: "";position: absolute;left: 0;right: 0;bottom: .8rem;height: .8rem;background: var(--color-accent);z-index: -1;border-radius: .4rem;}
.hero-desc {margin-top: 3.2rem;font-size: 2.4rem;line-height: 1.8;color: var(--color-muted);}
.w80 {width: 80%;}
.w70 {width: 70%;}
.w60 {width: 60%;}
.float-tag {position: absolute;padding: 1.2rem 2rem;border-radius: 10rem;background: var(--color-ink);color: #fff;font-size: 1.6rem;font-weight: 700;box-shadow: var(--shadow);animation: float 4s ease-in-out infinite;}
.hero-ctrl {display: flex;align-items: center;justify-content: space-between;gap: 3rem;margin-top: 5rem;padding-top: 4rem;border-top: .1rem solid var(--color-line);}
.hero-btns {display: flex;gap: 1.6rem;}
.hero-nav {display: flex;align-items: center;gap: 1.2rem;}
.hero-progress {width: 18rem;height: .4rem;border-radius: .4rem;background: var(--color-line);overflow: hidden;margin-right: 1rem;}
.hero-progress span {display: block;width: 0;height: 100%;background: var(--color-primary);}
.hero-count {font-size: 1.8rem;font-weight: 600;color: var(--color-muted);margin-right: 1rem;}
.hero-count b {color: var(--color-ink);}

/* ===== 03 가격 ===== */
.price {padding: 10rem 0;background: var(--color-white);}

/* ===== 04 합리적인 이유 ===== */
.why {padding: 12rem 0;}
.why-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 2.4rem;}
.why-card {padding: 3.6rem 3rem;border-radius: var(--radius);background: var(--color-white);border: .1rem solid var(--color-line);transition: transform .4s var(--ease), box-shadow .4s;}
.why-card:hover {transform: translateY(-.8rem);box-shadow: var(--shadow);}
.why-ico {display: flex;align-items: center;justify-content: center;width: 6.4rem;height: 6.4rem;border-radius: 1.8rem;background: var(--color-soft);color: var(--color-primary);margin-bottom: 2.6rem;}
.why-ico svg {width: 3rem;height: 3rem;fill: none;stroke: currentColor;stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;}
.why-card h3 {font-size: 2.6rem;font-weight: 800;line-height: 1.35;margin-bottom: 1.2rem;}
.why-card p {font-size: 1.8rem;color: var(--color-muted);}
.save-tip {display: flex;align-items: center;justify-content: space-between;gap: 4rem;margin-top: 3rem;padding: 4.4rem 5rem;border-radius: var(--radius);background: var(--color-accent);}
.save-tip h3 {font-size: 3.3rem;font-weight: 800;white-space: nowrap;}
.save-tip p {flex: 1;font-size: 2.0rem;}

/* ===== 05 제작 과정 ===== */
.process {padding: 12rem 0;background: var(--color-ink);color: #fff;}
.step-list {display: grid;grid-template-columns: repeat(4, 1fr);gap: 2.4rem;counter-reset: step;}
.step {position: relative;padding: 4rem 3rem;border-radius: var(--radius);background: rgba(255, 255, 255, .06);border: .1rem solid rgba(255, 255, 255, .12);transition: background .4s, transform .4s var(--ease);}
.step:hover {background: rgba(255, 255, 255, .12);transform: translateY(-.8rem);}
.step-no {display: block;font-size: 6.6rem;font-weight: 800;line-height: 1;letter-spacing: -.3rem;color: var(--color-accent);margin-bottom: 2.4rem;}
.step h3 {font-size: 2.6rem;font-weight: 800;margin-bottom: 1.2rem;}
.step p {font-size: 1.8rem;color: rgba(255, 255, 255, .75);}
.step-tag {display: inline-block;margin-top: 2.4rem;padding: .6rem 1.4rem;border-radius: 10rem;background: rgba(255, 255, 255, .12);font-size: 1.4rem;font-weight: 600;}

/* ===== 06 포트폴리오 ===== */
.work {padding: 12rem 0;overflow: hidden;}

/* ===== 07 FAQ ===== */
.faq {padding: 12rem 0;background: var(--color-white);}

/* ===== 랜딩페이지 50만원 ===== */
.w50 {width: 50%;}
.land {position: relative;padding: 11rem 0;overflow: hidden;background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2) 55%, var(--color-primary-3));color: #fff;}
.land .bg-word {color: transparent;-webkit-text-stroke: .2rem rgba(255, 255, 255, .14);}
.land-inner {display: grid;grid-template-columns: 1.15fr .85fr;align-items: center;gap: 6rem;}
.land-price {margin: 3.6rem 0 2.4rem;font-size: 2.6rem;font-weight: 700;}
.land-price strong {font-size: 8.8rem;font-weight: 800;line-height: 1;letter-spacing: -.4rem;color: var(--color-accent);}
.land-btns {display: flex;flex-wrap: wrap;gap: 1.6rem;margin-top: 4rem;}
.land-visual {position: relative;display: flex;justify-content: center;}
.land-phone {position: relative;width: 32rem;height: 58rem;border: 1rem solid var(--color-ink);border-radius: 4.6rem;background: var(--color-white);box-shadow: 0 3rem 8rem rgba(0, 0, 0, .35);overflow: hidden;transform: rotate(4deg);}
.land-phone::before {content: "";position: absolute;left: 50%;top: .8rem;z-index: 2;width: 8rem;height: 2.2rem;border-radius: 2rem;background: var(--color-ink);transform: translateX(-50%);}
.land-scroll {display: flex;flex-direction: column;gap: 1.6rem;padding: 3.6rem 1.8rem 2rem;color: var(--color-ink);animation: land-scroll 14s ease-in-out infinite alternate;}
.lp-hero {display: block;height: 18rem;border-radius: 1.8rem;background: linear-gradient(135deg, var(--tint-1), var(--tint-2));}
.lp-line {display: block;height: 1.2rem;border-radius: 1rem;background: var(--mock-line);}
.lp-row {display: flex;gap: 1rem;}
.lp-row i {flex: 1;height: 8rem;border-radius: 1.4rem;background: var(--color-soft);}
.lp-block {display: block;height: 14rem;border-radius: 1.8rem;background: linear-gradient(135deg, var(--tint-2), var(--tint-1));}
.lp-btn {display: block;padding: 1.4rem 0;border-radius: 10rem;background: var(--color-primary);color: #fff;text-align: center;font-size: 1.6rem;font-weight: 800;}
.tag-l1 {left: 4rem;top: 6rem;}
.tag-l2 {right: 2rem;bottom: 9rem;background: var(--color-accent);color: var(--color-ink);}

/* ===== 걱정과 약속 ===== */
.worry {padding: 12rem 0;}
.worry-list {border-top: .2rem solid var(--color-ink);}
.worry-item {display: grid;grid-template-columns: 8rem 1fr 1.1fr;gap: 4rem;align-items: start;padding: 5rem 0;border-bottom: .1rem solid var(--color-line);}
.worry-no {padding-top: 1rem;font-size: 1.8rem;font-weight: 700;letter-spacing: .1rem;color: var(--color-primary);}
.worry-q {font-size: 3.7rem;font-weight: 300;line-height: 1.5;letter-spacing: -.1rem;color: var(--color-muted);transition: color .3s;}
.worry-item:hover .worry-q {color: var(--color-ink);}
.worry-a h3 {margin-bottom: 1.2rem;font-size: 2.9rem;font-weight: 700;line-height: 1.4;}
.worry-a p {font-size: 2.0rem;line-height: 1.8;color: var(--color-muted);}
.text-link {display: inline-flex;align-items: center;gap: .8rem;margin-top: 2rem;padding-bottom: .2rem;border-bottom: .2rem solid currentColor;font-size: 1.8rem;font-weight: 700;color: var(--color-primary);transition: gap .3s var(--ease);}
.text-link::after {content: "→";}
.text-link:hover {gap: 1.4rem;}
@media (max-width: 1024px) {
  .worry-item {grid-template-columns: 6rem 1fr;gap: 2rem 2.4rem;}
  .worry-a {grid-column: 2;}
  .worry-q {font-size: 3.1rem;}
}
@media (max-width: 768px) {
  .worry {padding: 7rem 0;}
  .worry-item {grid-template-columns: 1fr;gap: 1.4rem;padding: 3.4rem 0;}
  .worry-a {grid-column: auto;}
  .worry-q {font-size: 2.6rem;}
  .worry-a h3 {font-size: 2.4rem;}
}

/* ===== 반응형 1280 ===== */
@media (max-width: 1280px) {
  .hero-title {font-size: 7.0rem;letter-spacing: -.3rem;}
  .step-list, .why-grid {grid-template-columns: repeat(2, 1fr);}
}

/* ===== 반응형 1024 ===== */
@media (max-width: 1024px) {
  .hero-slide {grid-template-columns: 1fr;gap: 3rem;min-height: 0;}
  .hero-ctrl {flex-direction: column;align-items: flex-start;}
  .save-tip {flex-direction: column;align-items: flex-start;gap: 2rem;}
}

/* ===== 반응형 768 ===== */
@media (max-width: 768px) {
  .hero {padding: calc(var(--header-h) + 4rem) 0 5rem;}
  .hero-title {font-size: 5.1rem;letter-spacing: -.2rem;}
  .hero-title em::after {height: .6rem;bottom: .4rem;}
  .hero-desc {font-size: 2.0rem;}
  .float-tag {font-size: 1.4rem;padding: 1rem 1.4rem;}
  .hero-btns {flex-direction: column;width: 100%;}
  .hero-progress {width: 10rem;}
  .price, .why, .process, .work, .faq {padding: 7rem 0;}
  .step-list, .why-grid {grid-template-columns: 1fr;}
  .save-tip {padding: 3.4rem 2.6rem;}
  .save-tip h3 {white-space: normal;font-size: 2.6rem;}
}

/* ===== 랜딩 반응형 ===== */
@media (max-width: 1024px) {
  .land-inner {grid-template-columns: 1fr;gap: 4rem;}
  .land-visual {order: -1;}
  .land-phone {height: 44rem;width: 26rem;}
}
@media (max-width: 768px) {
  .land {padding: 7rem 0;}
  .land-price strong {font-size: 6.6rem;}
}

/* ===== 움직임 줄이기 ===== */
@media (prefers-reduced-motion: reduce) {
  .float-tag {animation: none;}
  .why-card, .step, .work-thumb {transition: none;}
  .land-scroll {animation: none;}
}

/* ===== 전체 배경: 오로라 + 격자 ===== */
.price, .faq, .worry {background: rgba(255, 255, 255, .72);backdrop-filter: blur(1.2rem);}

/* ===== 타이틀 단어 마스크 등장 ===== */
.hero-title em::after {transform: scaleX(0);transform-origin: left;transition: transform .9s var(--ease) .75s;}
.swiper-slide-active .hero-title em::after {transform: none;}
.hero-desc {opacity: 0;transform: translateY(2rem);transition: opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s;}
.swiper-slide-active .hero-desc {opacity: 1;transform: none;}

/* ===== 큰 배경 글자(패럴랙스) ===== */
.price, .why, .work, .faq, .process, .worry {position: relative;overflow: hidden;}
.bg-word {position: absolute;right: -2rem;top: 4rem;z-index: 0;font-size: 26rem;font-weight: 800;line-height: 1;letter-spacing: -1rem;color: transparent;-webkit-text-stroke: .2rem rgba(var(--primary-rgb), .1);white-space: nowrap;pointer-events: none;user-select: none;will-change: transform;}
.process .bg-word {-webkit-text-stroke-color: rgba(255, 255, 255, .08);}
.price > .inner, .why > .inner, .work > .inner, .faq > .inner, .process > .inner, .worry > .inner {position: relative;z-index: 1;}

/* ===== 카드: 마우스 따라오는 빛 ===== */
.why-card, .step {position: relative;}
.why-card::after, .step::after {content: "";position: absolute;inset: 0;border-radius: inherit;background: radial-gradient(32rem circle at var(--mx, 50%) var(--my, 50%), rgba(var(--primary-rgb), .1), transparent 60%);opacity: 0;transition: opacity .3s;pointer-events: none;}
.step::after {background: radial-gradient(32rem circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), .18), transparent 60%);}
.why-card:hover::after, .step:hover::after {opacity: 1;}
.why-card:hover, .step:hover {transform: none;translate: 0 -.8rem;}

/* ===== 프로세스 / CTA ===== */
.process {background: radial-gradient(60rem circle at 85% 10%, rgba(var(--primary-rgb), .4), transparent 60%), var(--color-ink);}

/* ===== 반응형 ===== */
@media (max-width: 1280px) {
  .bg-word {font-size: 18rem;}
}
@media (max-width: 768px) {
  .bg-word {font-size: 11rem;top: 2rem;}
}

/* ===== 움직임 줄이기 ===== */
@media (prefers-reduced-motion: reduce) {
  .hero-desc, .hv, .hero-title em::after {transform: none !important;opacity: 1 !important;transition: none !important;}
}

/* ===== 키프레임 ===== */
@keyframes land-scroll {to {transform: translateY(-34%);}}

/* ===== 히어로 비주얼: 3:2 틀(.hero-visual) 안에 목업이 모두 들어온다 (잘리는 곳 없음) =====
   틀 폭을 90 등분한 값이 1em 이라(.hv 의 font-size) 모든 크기가 틀과 함께 커지고 작아진다. 위치는 틀 안쪽(0 이상)으로만 잡는다. */
/* 슬라이더 기본값(overflow: hidden)이 목업 그림자를 가장자리에서 잘라내므로 풀어 둔다 (넘치는 부분은 .hero 가 화면 가장자리에서 처리) */
.hero-swiper {overflow: visible;}
.hero-visual {position: relative;width: 100%;max-width: 80rem;margin-left: auto;aspect-ratio: 3 / 2;container-type: inline-size;}
.hero-visual::before {content: "";position: absolute;inset: 2% -2% -2% 4%;border-radius: 50%;background: radial-gradient(closest-side, rgba(var(--primary-rgb), .2), rgba(var(--accent-rgb), .1) 55%, transparent 75%);}
.hv {position: absolute;overflow: hidden;font-size: calc(100cqw / 90);border: .1em solid var(--color-line);background: var(--color-white);box-shadow: 0 1.2em 3.6em rgba(var(--shadow-rgb), .24);opacity: 0;transform: translateY(4em) scale(.96);transition: opacity 1s var(--ease), transform 1s var(--ease);}
.swiper-slide-active .hv {opacity: 1;transform: var(--hv-tf, none);}
.swiper-slide-active .hv:nth-child(1) {transition-delay: .3s;}
.swiper-slide-active .hv:nth-child(2) {transition-delay: .5s;}
.swiper-slide-active .hv:nth-child(3) {transition-delay: .7s;}
.hv-browser {width: 62em;border-radius: 2em;}
.hv-bar {display: flex;align-items: center;gap: .8em;padding: 1.4em 1.8em;border-bottom: .1em solid var(--color-line);background: var(--mock-bar);}
.hv-bar i {width: 1.1em;height: 1.1em;border-radius: 50%;background: var(--mock-dot);}
.hv-url {flex: 1;height: 2.2em;margin-left: 1.4em;border-radius: 10em;background: var(--color-white);}
.hv-page {padding: 2.4em 2.8em 2.8em;}
.hv-nav {display: flex;align-items: center;gap: 2em;margin-bottom: 2.4em;}
.hv-logo {width: 3em;height: 3em;border-radius: .8em;background: var(--color-primary);}
.hv-nav span {width: 5.6em;height: 1em;border-radius: 1em;background: var(--mock-line);}
.hv-cta {display: block;margin-left: auto;width: 10em;height: 3.2em;border-radius: 10em;background: var(--color-ink);}
.hv-burger {display: block;position: relative;margin-left: auto;width: 2.8em;height: 2em;border-top: .3em solid var(--color-ink);border-bottom: .3em solid var(--color-ink);}
.hv-burger::after {content: "";position: absolute;left: 0;right: 0;top: 50%;height: .3em;margin-top: -.15em;background: var(--color-ink);}
.hv-hero {display: flex;flex-direction: column;gap: 1.2em;padding: 3em;border-radius: 1.8em;background: linear-gradient(135deg, var(--tint-1), var(--tint-2));}
.hv-h1 {display: block;height: 3em;border-radius: 1em;background: var(--color-ink);}
.hv-p {display: block;height: 1.4em;border-radius: 1em;background: rgba(255, 255, 255, .8);}
.hv-btn {display: block;width: 14em;height: 4.2em;margin-top: 1.2em;border-radius: 10em;background: var(--color-primary);}
.hv-cards {display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.4em;margin-top: 2em;}
.hv-cards i {display: block;height: 8em;border-radius: 1.4em;background: var(--color-soft);}
.hv-price {z-index: 2;width: 30em;padding: 2.8em;border-radius: 2em;--hv-tf: rotate(-3deg);}
.hv-chip {display: inline-block;padding: .5em 1em;border-radius: 10em;background: var(--color-soft);color: var(--color-primary);font-size: 1.5em;font-weight: 800;}
.hv-big {display: block;margin: .3em 0 .2em;font-size: 8.6em;font-weight: 800;line-height: 1;letter-spacing: -.04em;}
.hv-big small {margin-left: .08em;font-size: .3em;letter-spacing: 0;}
.hv-line {display: block;height: 1.2em;margin-top: 1em;border-radius: 1em;background: var(--mock-line);}
.hv-phone {z-index: 3;width: 17em;height: 34em;border: .8em solid var(--color-ink);border-radius: 3.4em;}
.hv-phone .hv-page {padding: 3em 1.4em 1.4em;}
.hv-phone .hv-nav {margin-bottom: 1.4em;}
.hv-phone .hv-logo {width: 2.4em;height: 2.4em;}
.hv-phone .hv-hero {padding: 2em 1.4em;gap: .9em;}
.hv-phone .hv-h1 {height: 2em;}
.hv-phone .hv-p {height: 1em;}
.hv-phone .hv-btn {width: 10em;height: 2.6em;margin-top: 1em;}
.hv-phone .hv-cards {grid-template-columns: repeat(2, 1fr);gap: 1em;margin-top: 1.4em;}
.hv-phone .hv-cards i {height: 6em;}
.hv-tablet {z-index: 2;width: 28em;height: 40em;border: .8em solid var(--color-ink);border-radius: 2.6em;}
.hv-tablet .hv-page {padding: 2.2em 1.8em;}
.hv-tablet .hv-nav {margin-bottom: 1.8em;gap: 1.2em;}
.hv-tablet .hv-nav span {width: 3.6em;}
.hv-tablet .hv-cta {width: 6.4em;height: 2.6em;}
.hv-tablet .hv-hero {padding: 2.2em 1.8em;gap: 1em;}
.hv-tablet .hv-h1 {height: 2.4em;}
.hv-tablet .hv-btn {width: 10em;height: 3em;margin-top: 1em;}
.hv-tablet .hv-cards {margin-top: 1.8em;}
.hv-tablet .hv-cards i {height: 6em;}
.hv-s1 .hv-browser {top: 0;right: 0;}
.hv-s1 .hv-price {left: 1em;bottom: 1em;}
.hv-s1 .hv-phone {right: 5em;bottom: .6em;--hv-tf: rotate(2deg);}
.hv-s2 .hv-browser {top: 1em;left: 0;width: 56em;}
.hv-s2 .hv-tablet {top: 6em;right: 1em;--hv-tf: rotate(2deg);}
.hv-s2 .hv-phone {left: 24em;bottom: .6em;--hv-tf: rotate(-2deg);}
.hv-s3 .hv-browser {top: 0;left: 0;width: 66em;}
.hv-dash {display: grid;grid-template-columns: 12em 1fr;}
.hv-side {display: flex;flex-direction: column;gap: 1.4em;padding: 2.4em 1.8em;background: var(--color-soft);}
.hv-side b {display: block;width: 3.4em;height: 3.4em;margin-bottom: 1em;border-radius: 1em;background: var(--color-primary);}
.hv-side i {display: block;height: 1.1em;border-radius: 1em;background: rgba(var(--primary-rgb), .22);}
.hv-main {display: flex;flex-direction: column;padding: 2.2em 2.8em 2.6em;}
.hv-row {display: flex;align-items: center;gap: 1.8em;padding: 1.8em 0;border-bottom: .1em solid var(--color-line);}
.hv-row b {flex: none;width: 4.2em;height: 4.2em;border-radius: 1.2em;background: var(--tint-1);}
.hv-row i {flex: 1;height: 1.2em;border-radius: 1em;background: var(--mock-line);}
.hv-row em {flex: none;position: relative;width: 5em;height: 2.6em;border-radius: 10em;background: var(--color-primary);}
.hv-row em::after {content: "";position: absolute;right: .4em;top: .4em;width: 1.8em;height: 1.8em;border-radius: 50%;background: #fff;}
.hv-save {align-self: flex-end;margin-top: 2.4em;padding: .5em 1.8em;border-radius: 10em;background: var(--color-ink);color: #fff;font-size: 1.5em;font-weight: 800;}
.hv-s3 .hv-toast {right: 1em;top: 60%;z-index: 3;display: flex;align-items: center;gap: .8em;padding: .8em 1.4em;border-radius: 10em;background: var(--color-ink);color: #fff;font-size: calc(100cqw / 90 * 1.7);font-weight: 700;--hv-tf: rotate(-2deg);}
.hv-check {display: block;width: 1.2em;height: 1.2em;border-radius: 50%;background: var(--color-accent);}
.hv-s3 .hv-phone {right: 4em;bottom: .6em;--hv-tf: rotate(2deg);}

@media (max-width: 1024px) {
  .hero-slide {grid-template-columns: 1fr;gap: 2rem;min-height: 0;}
  .hero-visual {max-width: min(72rem, calc(100vw - 8rem));margin-inline: auto;}
}
@media (prefers-reduced-motion: reduce) {
  .hv {opacity: 1 !important;transform: var(--hv-tf, none) !important;transition: none !important;}
}
/* ===== sec-07 포트폴리오 슬라이드 (skin/latest/work_list 와 연동) =====
   카드 구조: .work-card > .work-link > (.work-thumb [이미지 + .work-no + .work-more]) + (.work-info [h3 + .work-tags]) */
.work-head {display: flex;align-items: flex-end;justify-content: space-between;gap: 3rem;margin-bottom: 6rem;}
.work-head .section-header {margin-bottom: 0;}
.work-nav {display: flex;flex: none;gap: 1.2rem;}
.work-swiper {overflow: visible;}
.work-swiper .work-card {width: 60rem;}
.work-link {display: block;}
.work-swiper .work-thumb {position: relative;border-radius: 2.8rem;box-shadow: var(--shadow);}
.work-swiper .work-thumb::after {content: "";position: absolute;inset: 0;background: linear-gradient(180deg, transparent 50%, rgba(var(--shadow-rgb), .55));opacity: 0;transition: opacity .4s;}
.work-swiper .work-card:hover .work-thumb::after, .work-swiper .work-link:focus-visible .work-thumb::after {opacity: 1;}
.work-no {position: absolute;left: 2.4rem;top: 2.4rem;z-index: 2;padding: .8rem 1.6rem;border-radius: 10rem;background: var(--color-ink);color: #fff;font-size: 1.6rem;font-weight: 800;letter-spacing: .12rem;}
.work-more {position: absolute;right: 2.4rem;bottom: 2.4rem;z-index: 2;display: inline-flex;align-items: center;gap: .8rem;padding: 1.3rem 2.2rem;border-radius: 10rem;background: var(--color-white);font-size: 1.7rem;font-weight: 800;opacity: 0;transform: translateY(1.2rem);transition: opacity .4s var(--ease), transform .4s var(--ease);}
.work-more svg {width: 2rem;height: 2rem;fill: none;stroke: currentColor;stroke-width: 2.4;stroke-linecap: round;stroke-linejoin: round;}
.work-swiper .work-card:hover .work-more, .work-swiper .work-link:focus-visible .work-more {opacity: 1;transform: none;}
.work-empty {font-size: 1.8rem;font-weight: 700;color: rgba(18, 19, 26, .45);}
.work-swiper .work-info h3 {margin-top: 2.6rem;font-size: 3.2rem;font-weight: 700;line-height: 1.35;letter-spacing: -.1rem;transition: color .3s;}
.work-swiper .work-card:hover h3 {color: var(--color-primary);}
.work-swiper .work-tags {display: flex;flex-wrap: wrap;gap: .8rem;margin-top: 1.4rem;}
.work-swiper .work-tags span {padding: .7rem 1.5rem;border: .1rem solid var(--color-line);border-radius: 10rem;background: var(--color-white);font-size: 1.5rem;font-weight: 700;color: var(--color-muted);}
.work-foot {display: flex;align-items: center;gap: 3rem;margin-top: 5rem;}
.work-scrollbar {position: relative;flex: 1;height: .6rem;border-radius: .6rem;background: var(--color-line);}
.work-scrollbar .swiper-scrollbar-drag {height: 100%;border-radius: .6rem;background: var(--color-ink);cursor: grab;}
.work-count {flex: none;font-size: 1.8rem;font-weight: 600;color: var(--color-muted);}
.work-count b {color: var(--color-ink);}
@media (hover: none) {
  .work-more {opacity: 1;transform: none;}
}
@media (max-width: 1280px) {
  .work-swiper .work-card {width: 48rem;}
}
@media (max-width: 768px) {
  .work-head {flex-direction: column;align-items: flex-start;gap: 2.4rem;margin-bottom: 4rem;}
  .work-swiper .work-card {width: 30rem;}
  .work-swiper .work-thumb {border-radius: 2rem;}
  .work-swiper .work-info h3 {margin-top: 2rem;font-size: 2.4rem;}
  .work-more {right: 1.6rem;bottom: 1.6rem;padding: 1rem 1.6rem;font-size: 1.5rem;}
  .work-no {left: 1.6rem;top: 1.6rem;font-size: 1.4rem;}
  .work-foot {flex-wrap: wrap;gap: 2rem;}
  .work-scrollbar {flex: 1 1 100%;order: -1;}
}
/* UPSTACK home content refresh: scoped to the main stylesheet. */

.home-hero .hero-slide {grid-template-columns:1.05fr .95fr;min-height:52rem;}
.home-hero .hero-title {font-size:clamp(4.2rem,4.5vw,7.2rem);font-weight:600;letter-spacing:-.22rem;word-break:keep-all;}
.home-hero .hero-desc {font-size:2.1rem;opacity:1;transform:none;}
.hero-price-note {margin:2.4rem 0 3rem;font-size:1.9rem;color:var(--color-ink);}
.hero-price-note strong {color:var(--color-primary);}
.hero-price-note small {display:block;margin-top:.8rem;font-size:1.5rem;color:var(--color-muted);}
.home-trust {display:flex;flex-wrap:wrap;gap:1.4rem 3rem;margin-top:5rem;padding-top:2.8rem;border-top:1px solid var(--color-line);font-size:1.7rem;color:var(--color-muted);}
.home-trust li::before {content:'✓';margin-right:.8rem;color:var(--color-primary);font-weight:800;}
.home-three-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem;}
.home-included {background:#f0f5ff;}
.home-support {background:#edf3ff;}
.feature-number {display:block;margin-bottom:2.2rem;font-size:1.6rem;font-weight:800;color:var(--color-primary);}













.home-hero .hero-visual {align-self:center;}
@media(max-width:1200px){.home-hero .hero-slide{grid-template-columns:1fr 1fr;}.home-three-grid{gap:1.6rem;}.why-card{padding:3rem 2.4rem;}}
@media(max-width:1024px){.home-hero .hero-slide{grid-template-columns:1fr;}.home-hero .hero-visual{max-width:65rem;margin:2rem auto 0;}.home-three-grid{grid-template-columns:1fr;}.custom-banner{align-items:flex-start;flex-direction:column;}.price-grid{max-width:none;}.plan-price strong{font-size:5.4rem;}}
@media(max-width:768px){.home-hero .hero-title{font-size:4.6rem;letter-spacing:-.16rem;}.home-hero .hero-desc{font-size:1.9rem;}.home-trust{gap:1.2rem;font-size:1.5rem;flex-direction:column;}.hero-price-note{font-size:1.7rem;}.price-terms,.custom-banner{padding:2.4rem;}.cta-price{font-size:1.8rem;}.plan-price strong{font-size:4.8rem;}}

@media(max-width:460px){.home-hero .hero-title{font-size:3.7rem;letter-spacing:-.12rem;}.home-hero .hero-desc{font-size:1.8rem;}.home-hero .hero-visual{margin-top:3rem;}}

/* ===== 재미 요소 모음 (히어로 3단 심볼 / 문구 띠 / 네이비 구간 / 가격 강조 / 포트폴리오 / 제작 과정 진행선) =====
   JS 는 main.js 의 "재미 요소" 구역. 움직임은 prefers-reduced-motion 에서 모두 멈춘다. */

/* ----- 히어로: 로고의 3단 심볼이 은은하게 떠다닌다 (마우스에 살짝 반응) ----- */
.hero-stack {position: absolute;overflow: visible;pointer-events: none;transition: transform .35s ease-out;transform: translate(calc(var(--px, 0) * 2.6rem), calc(var(--py, 0) * 2.6rem));}
.hs-a {right: -3rem;top: 3rem;width: 34rem;opacity: .95;}
.hs-b {left: -2rem;bottom: 4rem;width: 15rem;opacity: .7;transform: translate(calc(var(--px, 0) * -2rem), calc(var(--py, 0) * -2rem));}
.hs-l {transform-box: fill-box;animation: hs-float 5.5s ease-in-out infinite;}
.hs-l path {stroke: rgba(255, 255, 255, .7);stroke-width: 1.6;stroke-linejoin: round;}
.hs-l1 path {fill: var(--color-primary);}
.hs-l2 path {fill: var(--color-primary-2);}
.hs-l3 path {fill: var(--tint-1);}
.hs-l2 {animation-delay: -1.8s;}
.hs-l3 {animation-delay: -3.6s;}
@keyframes hs-float {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-1.4rem);}}

/* ----- 문구 흐름 띠 (히어로 아래, 마우스를 올리면 멈춘다) ----- */
.ticker {position: relative;z-index: 2;overflow: hidden;padding: 2.4rem 0;background: var(--color-deep);color: #fff;}
.ticker-track {display: inline-flex;white-space: nowrap;animation: ticker 40s linear infinite;}
.ticker:hover .ticker-track {animation-play-state: paused;}
.ticker span {display: inline-flex;align-items: center;font-size: 3.4rem;font-weight: 800;letter-spacing: -.1rem;}
.ticker span::after {content: "✦";margin: 0 3.2rem;font-size: 2rem;color: var(--color-pop);}
.ticker span:nth-child(even) {color: transparent;-webkit-text-stroke: .1rem rgba(255, 255, 255, .75);}
@keyframes ticker {to {transform: translateX(-25%);}}

/* ----- 핵심 단어 강조 (제목 안의 <em>) ----- */
.section-title em {color: var(--color-primary);font-weight: 800;background: linear-gradient(transparent 70%, rgba(var(--primary-rgb), .16) 70%);}
.process .section-title em, .home-included .section-title em {color: var(--color-pop);background: linear-gradient(transparent 70%, rgba(255, 255, 255, .14) 70%);}
.hero-price-note strong {font-size: 3.4rem;font-weight: 800;letter-spacing: -.1rem;}
.hero-price-note small {font-size: 1.4rem;}

/* ----- 네이비 구간 (밝은 구간 사이에서 대비를 만든다) ----- */
.home-included {background: radial-gradient(64rem circle at 8% 0, rgba(var(--primary-rgb), .5), transparent 60%), var(--color-deep);color: #fff;backdrop-filter: none;}
.home-included .section-desc {color: rgba(255, 255, 255, .72);}
.home-included .eyebrow, .home-included .feature-number {color: var(--color-pop);}
.home-included .why-card {background: rgba(255, 255, 255, .07);border-color: rgba(255, 255, 255, .16);}
.home-included .why-card h3 {color: #fff;}
.home-included .why-card p {color: rgba(255, 255, 255, .78);}
.home-included .why-card::after {background: radial-gradient(32rem circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), .22), transparent 60%);}

/* ----- 가격: 추천 상품은 진한 블루 카드, 나머지는 밝게 ----- */
.plan-best {scale: 1.03;border-color: transparent;background: linear-gradient(160deg, var(--color-primary), var(--color-deep));color: #fff;box-shadow: 0 3rem 7rem rgba(var(--primary-rgb), .4);}
.plan-best::before {content: "";position: absolute;inset: 0;border-radius: inherit;background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .2) 50%, transparent 62%) 150% 0 / 250% 100%;animation: shine 4.8s ease-in-out infinite;pointer-events: none;}
.plan-best .plan-name small, .plan-best .plan-for, .plan-best .plan-duration, .plan-best .plan-price small {color: rgba(255, 255, 255, .76);}
.plan-best .plan-duration strong, .plan-best .check-list li {color: #fff;}
.plan-best .plan-price {border-bottom-color: rgba(255, 255, 255, .22);}
.plan-best .plan-price strong {color: var(--color-accent);}
.plan-best .check-list li::before {background: rgba(255, 255, 255, .18);}
.plan-best .check-list li::after {background: var(--color-accent);}
.plan-best .badge {background: var(--color-accent);color: var(--color-ink);}
.plan-best .btn-primary {background: #fff;color: var(--color-primary);box-shadow: none;}
.plan-best .btn-primary:hover {background: var(--color-accent);}
@keyframes shine {0% {background-position: 150% 0;} 55%, 100% {background-position: -50% 0;}}

/* ----- 포트폴리오: 큰 이미지, 올리면 확대 + 따라다니는 VIEW 버튼 ----- */
.work-swiper .work-card {width: 72rem;}
.work-thumb img {transition: transform .9s var(--ease);}
.work-swiper .work-card:hover .work-thumb img {transform: scale(1.08);}
.work-cursor {position: fixed;left: 0;top: 0;z-index: 90;display: flex;align-items: center;justify-content: center;width: 9rem;height: 9rem;margin: -4.5rem 0 0 -4.5rem;border-radius: 50%;background: var(--color-primary);color: #fff;font-size: 1.6rem;font-weight: 800;letter-spacing: .1rem;opacity: 0;pointer-events: none;transition: opacity .25s, scale .35s var(--ease);scale: .4;will-change: transform;}
.work-cursor.is-on {opacity: 1;scale: 1;}

/* ----- 제작 과정: 스크롤하면 위쪽 선이 채워지고 단계가 켜진다 ----- */
.step-list {position: relative;padding-top: 5.6rem;}
.step-list::before, .step-list::after {content: "";position: absolute;left: 0;top: 0;height: .4rem;border-radius: .4rem;}
.step-list::before {right: 0;background: rgba(255, 255, 255, .14);}
.step-list::after {width: calc(var(--p, 0) * 100%);background: var(--color-accent);box-shadow: 0 0 2rem rgba(var(--accent-rgb), .6);}
.step {transition: background .4s, transform .4s var(--ease), border-color .5s;}
.step.is-lit {border-color: rgba(var(--accent-rgb), .55);}

/* ----- 버튼: 마우스 쪽으로 살짝 끌린다 ----- */
.is-magnet {transition: translate .25s var(--ease), transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;}

/* ----- 반응형 ----- */
@media (max-width: 1280px) {
  .work-swiper .work-card {width: 56rem;}
  .step-list {padding-top: 0;}
  .step-list::before, .step-list::after {display: none;}
}
@media (max-width: 1024px) {
  .hs-a {right: -2rem;top: 1rem;width: 24rem;}
  .plan-best {scale: 1;}
}
@media (max-width: 768px) {
  .hs-a {width: 17rem;opacity: .75;}
  .hs-b {display: none;}
  .ticker {padding: 1.6rem 0;}
  .ticker span {font-size: 2.4rem;}
  .ticker span::after {margin: 0 2rem;font-size: 1.5rem;}
  .work-swiper .work-card {width: 30rem;}
  .hero-price-note strong {font-size: 2.8rem;}
}
@media (hover: hover) and (pointer: fine) {
  .work-swiper .work-card:hover .work-more {opacity: 0;}
  .work-swiper .work-link:focus-visible .work-more {opacity: 1;transform: none;}
}
@media (prefers-reduced-motion: reduce) {
  .hs-l, .ticker-track, .plan-best::before {animation: none;}
  .hero-stack, .work-thumb img, .work-cursor, .is-magnet {transition: none;}
  .step-list::after {width: 100%;}
}

/* ===== 히어로 슬라이드 등장 애니메이션 (.home-hero .hero-slide) =====
   순서: 문구(눈썹 → 제목 단어 → 설명 → 가격 → 버튼 → 신뢰 문구) → 목업 3개가 차례로 튀어나옴 → 3단 심볼이 떨어짐.
   등장이 끝나면 목업은 위아래로 천천히 떠다닌다(translate 속성이라 기울기와 겹치지 않음). 시간은 아래 delay 숫자로 조절. */
.home-hero .eyebrow, .home-hero .hero-desc, .home-hero .hero-price-note, .home-hero .hero-btns, .home-hero .home-trust li {opacity: 1;transform: none;transition: none;animation: hero-up .9s var(--ease) both;}
.home-hero .eyebrow {animation-delay: .1s;}
.home-hero .hero-desc {animation-delay: .75s;}
.home-hero .hero-price-note {animation-delay: .9s;}
.home-hero .hero-btns {animation-delay: 1.05s;}
.home-hero .home-trust li {animation-delay: 1.2s;}
.home-hero .home-trust li:nth-child(2) {animation-delay: 1.3s;}
.home-hero .home-trust li:nth-child(3) {animation-delay: 1.4s;}
.home-hero .hero-title .wi {transform: none;transition: none;animation: hero-word 1s var(--ease) both;animation-delay: calc(var(--i, 0) * 90ms + .25s);}
.home-hero .hero-title em::after {transform: none;transition: none;animation: hero-line .9s var(--ease) 1s both;}
.home-hero .hv {opacity: 1;transform: var(--hv-tf, none);transition: none;animation: hv-in 1.1s cubic-bezier(.2, 1.15, .3, 1) both, hv-float 6.5s ease-in-out infinite;}
.home-hero .hv-browser {--hv-from: translateX(9em) scale(.94);animation-delay: .35s, 1.6s;}
.home-hero .hv-price {--hv-from: translate(-5em, 5em) rotate(-10deg) scale(.9);animation-delay: .7s, 2.4s;}
.home-hero .hv-phone {--hv-from: translateY(9em) scale(.92);animation-delay: 1s, 3.2s;}
.home-hero .hs-l {animation: hs-drop 1s cubic-bezier(.2, 1.1, .3, 1) both, hs-float 5.5s ease-in-out infinite;}
.home-hero .hs-l3 {animation-delay: .2s, 1.2s;}
.home-hero .hs-l2 {animation-delay: .35s, 1.2s;}
.home-hero .hs-l1 {animation-delay: .5s, 1.2s;}
@keyframes hero-up {from {opacity: 0;transform: translateY(2.4rem);}}
@keyframes hero-word {from {transform: translateY(115%);}}
@keyframes hero-line {from {transform: scaleX(0);transform-origin: left;}to {transform: scaleX(1);transform-origin: left;}}
@keyframes hv-in {from {opacity: 0;transform: var(--hv-from);}}
@keyframes hv-float {0%, 100% {translate: 0 0;}50% {translate: 0 -1.1em;}}
@keyframes hs-drop {from {opacity: 0;transform: translateY(-9rem);}}
@media (prefers-reduced-motion: reduce) {
  .home-hero .eyebrow, .home-hero .hero-desc, .home-hero .hero-price-note, .home-hero .hero-btns, .home-hero .home-trust li, .home-hero .hero-title .wi, .home-hero .hero-title em::after, .home-hero .hv, .home-hero .hs-l {animation: none;}
}