:root {--bg: #161616; --bg-deep: #000000; --intro-bg: #ffffff; --key-color: #3885F4; --key-color-light: #2F97FF;}

/* Registers --p as a real animatable number (used by .main-process .line-fill's
   transform: scaleX(var(--p))). Without this, the browser treats --p as an
   opaque token, so gsap-init.js tweening it every scrub tick forces a full
   style recalc instead of a cheap composited transform — visible as scroll
   stutter through row6, worse the more pixels there are to repaint (bigger
   monitor). inherits:true matches how it's actually used: gsap-init.js sets
   --p on the parent .line, and .line-fill (its child) picks it up by
   inheritance. */
@property --p {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

* {box-sizing: border-box;}

body {margin: 0; background: radial-gradient(120% 140% at 50% 0%, var(--bg-deep) 0%, var(--bg) 55%, var(--bg) 100%); font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, sans-serif; color: #fff; overflow-x: hidden;}
/* GSAP ScrollSmoother clips html/body to the viewport height and moves the
   real (full-height) page via a transform on #smooth-content, so a
   background painted only on body gets clipped off after the first
   viewport height. Repeating it here keeps the gradient covering the whole
   scrollable page when the smoother is active. */
#smooth-content {background: radial-gradient(120% 140% at 50% 0%, var(--bg-deep) 0%, var(--bg) 55%, var(--bg) 100%);}

.intro-overlay {position: fixed; inset: 0; z-index: 1000; background: var(--intro-bg); transition: opacity var(--intro-curtain, 0.5s) ease;}
.intro-overlay--open {opacity: 0; pointer-events: none;}
.intro-text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; max-width: 95vw; white-space: nowrap; text-align: center; font-weight: 500; font-size: clamp(20px, 4vw, 68px); color: #111; z-index: 2; transition: opacity var(--intro-exit, 0.5s) ease, transform var(--intro-exit, 0.5s) ease;}
.intro-text--exit {opacity: 0; transform: translate(-50%, -50%) translateY(-30px);}
.intro-plus {color: var(--key-color);}
.intro-cursor {display: inline-block; width: 0.08em; height: 1em; margin-left: 3px; background: #111; vertical-align: -0.15em; animation: cursor-blink 1s step-end infinite;}
@media (min-width: 1025px) {
    .intro-text {font-size: clamp(32px, 3.6vw, 60px);}
}
@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}
/* Skip button — same pill shape/icon as the reference, colors inverted
   since the intro overlay's own background is white (--intro-bg), not
   dark. Removed from the DOM the instant it's used or the intro finishes
   typing on its own, whichever comes first — see intro.js goToClose(). */
.intro-skip {position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px 12px 26px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 999px; background: #fff; color: #111; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease;}
.intro-skip:hover {background: #f5f5f5;}
.intro-skip svg {width: 16px; height: 16px; flex-shrink: 0;}
@media (max-width: 1024px) {
    .intro-skip {bottom: 36px; gap: 6px; padding: 12px 20px 12px 22px; font-size: 14px;}
    .intro-skip svg {width: 16px; height: 16px;}
}
@media (max-width: 640px) {
    .intro-skip {bottom: calc(28px + env(safe-area-inset-bottom, 0px)); gap: 5px; padding: 9px 15px 9px 17px; font-size: 13px;}
    .intro-skip svg {width: 14px; height: 14px;}
}




/* Shared section header style — reused across main-page sections, not just
   .about. Title font-size/weight is shared with .main-solution .title too
   (row5) via the grouped selector below — same heading treatment, one
   place to resize both instead of two copies drifting apart. */
.section_intro {text-align: center; margin-bottom: 40px;}
.section_intro .title, .main-solution .title {font-size: clamp(28px, 3.2vw, 42px); font-weight: 500; }
.section_intro .title {margin: 0 0 10px; color:rgba(255,255,255,1);}
.section_intro .desc, .main-solution .left .desc {font-size: 16px; font-weight: 400; line-height: 1.6;}
.section_intro .desc {margin: 0; color:rgba(255,255,255,1);}
.section_intro.dark .title{color:rgba(0,0,0,1);}
.section_intro.dark .desc{color:rgba(0,0,0,1);}
@media (min-width: 1025px) {
    .section_intro .title, .main-solution .title {font-size: clamp(38px, 3.8vw, 56px);}
    .section_intro .desc, .main-solution .left .desc {font-size: 20px;}
}




.hero {width: 100%; padding-bottom: 13.5px;}
.board-wrap {width: 100%; height: 100vh; position: relative; overflow: hidden;}
#board {display: block; cursor: pointer; touch-action: none;} /* 폭/높이를 주지 않음 → 캔버스 그림 크기(script.js가 창 크기로 맞춤) 그대로 보여서 리사이즈 중에도 늘어나거나 찌그러지지 않음 */

.outro-reveal {position: absolute; inset: 0; pointer-events: none; z-index: 2; display: flex; align-items: center;}
.outro-wrap {display: flex; align-items: center; gap: 32px; transform: translateY(-50px);}
.outro-text {margin: 0; padding: 0; text-align: left; font-weight: 600; font-size: clamp(28px, 3.6vw, 64px); line-height: 1.3; color: #fff;} /* line-height: 640px 이하에서 body 가 22px 고정값을 걸어 28px 글자의 두 줄이 겹쳤음 → 글자 크기에 비례하는 값으로 지정 */
.outro-line {display: block; white-space: nowrap; opacity: 0; transform: translateY(16px); transition: opacity 1.2s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);}
.outro-line .hl {color: var(--key-color-light);}
.outro-line--show {opacity: 1; transform: translateY(0); animation: outroBounce 0.9s ease 1.2s 1;}
/* 다 나타난 뒤(페이드 1.2초 끝난 시점) 살짝 통통 튀고 제자리로 — 감쇠 바운스(위로 10px → 4px → 정지). 줄마다 클래스가 붙는 시점(outro.js, 둘째 줄은 0.4초 뒤)에 맞춰 각자 튐 */
@keyframes outroBounce {
    0%, 100% {transform: translateY(0);}
    30% {transform: translateY(-10px);}
    55% {transform: translateY(0);}
    72% {transform: translateY(-4px);}
    88% {transform: translateY(0);}
}
@media (prefers-reduced-motion: reduce) {
    .outro-line--show {animation: none;}
}

#header {opacity: 0; pointer-events: none; transition: opacity 0.3s ease;}
#header.header--visible {opacity: 1; pointer-events: auto;}




.about { padding:100px 0 60px 0; overflow: hidden;}
.about .item_group_wrap {position: relative; margin-top:80px;}
.about .item_group {position: relative; z-index: 2; display: flex; margin: 0; padding: 0; list-style: none;}
/* 카드는 서로 30px씩 겹침(.li + .li {margin-left:-30px}) → 3장 전체 폭 = 3w - 60 = 컨테이너 폭 이 되도록 w = (100% + 60px) / 3. (예전 grid 1fr 은 겹침을 반영하지 못해 마지막 카드가 .wrap 오른쪽으로 30px 튀어나왔고, 화면이 좁으면 그만큼 잘렸음) */
.about .item_group .li {flex: 0 0 calc((100% + 60px) / 3); min-width: 0; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 5 / 4; padding: 0 20px; background: var(--key-color); text-align: center;}
.about .item_group .li + .li {margin-left: -30px;}
.about .item_group .li:nth-child(1) {border-radius: 25px 200px 200px 25px;}
.about .item_group .li:nth-child(2) {border-radius: 999px 999px 100px 100px;}
.about .item_group .li:nth-child(3) {border-radius: 200px 25px 25px 200px;}
.about .item_group .ico {display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 22px;}
.about .item_group .ico svg, .about .item_group .ico img {width: 100%; height: 100%;}
.about .item_group .tit {display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: clamp(28px, 2.8vw, 40px); font-weight: 600; letter-spacing: 0.02em; color: #fff;}
.about .item_group .txt {margin: 16px 0 0; font-size: clamp(14px, 1.15vw, 17px); font-weight: 500; line-height: 1.55; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.88);}
/* The heavy one-sided border-radius on cards 1 and 3 makes the centered text
   look visually off-balance toward the rounded side — nudge it back the
   other way so it reads as centered. */
.about .item_group .li:nth-child(1) .ico, .about .item_group .li:nth-child(1) .tit, .about .item_group .li:nth-child(1) .txt {transform: translateX(-14px);}
.about .item_group .li:nth-child(3) .ico, .about .item_group .li:nth-child(3) .tit, .about .item_group .li:nth-child(3) .txt {transform: translateX(14px);}

/* Icon animations — each .shape is one traced layer, grouped with its own transform-origin (see about_icon_*.svg) */
.about .item_group .ico .shape {transform-box: fill-box;}

/* 1. 디자인: 레이어들이 벌어졌다가 제자리로 돌아오는 반복 */
.ico-design .shape-1 {animation: iconDesignSpread1 1.3s ease-in-out infinite;}
.ico-design .shape-2 {animation: iconDesignSpread2 1.3s ease-in-out infinite;}
.ico-design .shape-3 {animation: iconDesignSpread3 1.3s ease-in-out infinite;}
@keyframes iconDesignSpread1 {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-9px);}}
@keyframes iconDesignSpread2 {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-1px);}}
@keyframes iconDesignSpread3 {0%, 100% {transform: translateY(0);} 50% {transform: translateY(9px);}}

/* 2. 홈페이지 제작: 위로 한두번 튀고, 오른쪽으로 살짝 돌아서 그 방향으로 또 튀는 반복 */
.ico-hompage .shape-1 {animation: iconHompageBounce 2.2s ease-in-out infinite;}
@keyframes iconHompageBounce {
    0%, 100% {transform: translateY(0) rotate(0deg);}
    8% {transform: translateY(-14px) rotate(0deg);}
    16% {transform: translateY(0) rotate(0deg);}
    24% {transform: translateY(-9px) rotate(0deg);}
    32%, 40% {transform: translateY(0) rotate(14deg);}
    48% {transform: translateY(-14px) rotate(14deg);}
    56% {transform: translateY(0) rotate(14deg);}
    64% {transform: translateY(-9px) rotate(14deg);}
    72%, 84% {transform: translateY(0) rotate(0deg);}
}

/* 3. 솔루션 개발: 도형마다 제자리에서 돌다가 잠깐 멈췄다 다시 도는 반복, 위상만 어긋나게 */
.ico-solution .shape {animation: iconSolutionRotate 2.2s ease-in-out infinite;}
.ico-solution .shape-2 {animation-delay: -0.55s;}
.ico-solution .shape-3 {animation-delay: -1.1s;}
.ico-solution .shape-4 {animation-delay: -1.65s;}
@keyframes iconSolutionRotate {
    0% {transform: rotate(0deg);}
    60% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}

.value-banner {padding: 50px 0 100px 0; overflow: hidden;}
.value-banner .title {margin: 0 0 32px; font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.5; color: #fff;}
.value-banner .accent {color: var(--key-color-light);}
.value-banner .desc {margin: 0; font-size: 16px; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, 0.85); opacity: 0; transform: translateY(24px);}
.value-banner .desc + .desc {margin-top:24px;}
@media (min-width: 1025px) {
    .value-banner .title {font-size: clamp(30px, 2.8vw, 42px);}
    .value-banner .desc {font-size: 18px;}
}

.main-design {position: relative; z-index: 2; padding: 80px 0; background:#fff; box-shadow: 0 2px 0 #fff;}
.main-design .section_intro {text-align: left;}
.main-design .section_intro .title, .main-design .section_intro .desc {color: #111;}

/* 디자인 제작 사례 벤토 그리드 — PC 4열 × 4행, 11칸. 열마다 칸 조합이 4행을 채움 (a: 긴-짧-짧 / b: 짧-긴-짧 / c: 긴-긴 / d: 짧-긴-짧).
   칸 비율 고정(어떤 폭에서도 동일): 모든 치수를 .wrap 폭(100cqw, 1400px 기준 1360px)에 비례시킨다. .wrap은 container-type: inline-size.
   기준 1400px: 열 322px, 간격 24px, 행 216.5px → 긴 칸(2행) 322×457 = 0.705:1, 짧은 칸 약 1.49:1.
   간격도 24/1360 = 1.7647cqw로 같이 줄어서 폭이 달라져도 비율이 변하지 않는다. 행 높이 = 216.5/1360 = 15.9166cqw. */
.main-design .wrap {container-type: inline-size;}
.main-design .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 15.9166cqw);
    gap: 1.7647cqw;
}

.main-design .item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #e5e5e5;
    cursor: pointer;
    border:1px solid #eee;
}
.main-design .item img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 칸 배치 */
.main-design .item--a1 {grid-column: 1; grid-row: 1 / 3;}
.main-design .item--a2 {grid-column: 1; grid-row: 3 / 4;}
.main-design .item--a3 {grid-column: 1; grid-row: 4 / 5;}
.main-design .item--b1 {grid-column: 2; grid-row: 1 / 2;}
.main-design .item--b2 {grid-column: 2; grid-row: 2 / 4;}
.main-design .item--b3 {grid-column: 2; grid-row: 4 / 5;}
.main-design .item--c1 {grid-column: 3; grid-row: 1 / 3;}
.main-design .item--c2 {grid-column: 3; grid-row: 3 / 5;}
.main-design .item--d1 {grid-column: 4; grid-row: 1 / 2;}
.main-design .item--d2 {grid-column: 4; grid-row: 2 / 4;}
.main-design .item--d3 {grid-column: 4; grid-row: 4 / 5;}

/* hover: 이미지가 천천히 살짝 커지고(1.08배), 어두운 막이 덮이며 가운데에 프로젝트명 / 카테고리가 올라옴.
   막 안의 글자는 .cap(마크업: <div class="cap"><strong class="tit">프로젝트명</strong><span class="cat">카테고리</span></div>) */
.main-design .item .cap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px 8%;
    text-align: center;
    background: linear-gradient(180deg, rgba(8, 12, 22, 0.62), rgba(8, 12, 22, 0.78));
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}
.main-design .item .cap .tit {
    display: block;
    max-width: 100%;
    font-size: clamp(15px, 1.5vw, 21px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #fff;
    transform: translateY(14px);
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* 카테고리: 포트폴리오 페이지의 카드 라벨(.portfolio .tags li)과 같은 알약 + 파란 점 */
.main-design .item .cap .cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #111;
    transform: translateY(14px);
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s;
}
/* 카테고리 앞의 파란 점(display를 직접 지정: default.css가 :before를 숨김) */
.main-design .item .cap .cat::before {
    content: "";
    display: block;
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--key-color);
}
@media (hover: hover) {
    .main-design .item:hover img {transform: scale(1.08);}
    .main-design .item:hover .cap {opacity: 1;}
    .main-design .item:hover .cap .tit, .main-design .item:hover .cap .cat {transform: none;}
}
/* hover가 없는 터치 기기(모바일/태블릿): 프로젝트명/카테고리 캡션은 숨김. 나중에 다시 보여줄 때는 아래 규칙을 지우거나,
   이전 버전(칸 아래쪽에 항상 작게 보이는 캡션)은 백업 style.before-capoff.css 의 같은 위치를 참고 */
@media (hover: none) {
    .main-design .item .cap {display: none;}
}

/* 모바일(≤640px): 2열 벤토. 칸 비율은 PC와 동일(짧은 칸 1.487:1, 긴 칸 0.705:1).
   2열에서 두 비율을 동시에 맞추려면 간격이 열 폭의 약 0.0734배: 열 = 48.23cqw, 간격 = 3.54cqw, 행 = 32.43cqw(열÷1.487).
   긴 칸(a1, b2, c1, c2, d2)만 2행(span 2)을 차지하며, 11칸 = 16셀이 8행에 빈칸 없이 채워짐(DOM 순서대로 흐름). 간격은 2.5cqw(직접 조정한 값; 3.54cqw면 비율이 PC와 정확히 같음). */
@media (max-width: 640px) {
    .main-design .grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        grid-auto-rows: 32.43cqw;
        grid-auto-flow: dense;
        gap: 2.5cqw;
    }
    .main-design .item {
        grid-column: auto;
        grid-row: auto;
        border-radius: 12px;
    }
    .main-design .item--a1,
    .main-design .item--b2,
    .main-design .item--c1,
    .main-design .item--c2,
    .main-design .item--d2 {
        grid-row: span 2;
    }
}

/* 디자인 제작 사례 아래 "포트폴리오 전체보기" 버튼 (파트너 "더보기" 버튼과 같은 알약형: 테두리 → hover 시 검정 채움 + 화살표 이동) */
.main-design .more {display: flex; justify-content: center; margin-top: 56px;}
.main-design .btn_all {display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 30px 0 36px; border: 1px solid #111; border-radius: 999px; background: #fff; font-size: 17px; font-weight: 700; color: #111; text-decoration: none !important; transition: background-color 0.3s ease, color 0.3s ease;}
.main-design .btn_all .arw {display: block; flex: none; width: 20px; height: 20px; transition: transform 0.3s ease;}
.main-design .btn_all:hover {background: #111; color: #fff;}
.main-design .btn_all:hover .arw {transform: translate(3px, -3px);}
@media (max-width: 640px) {
    .main-design .more {margin-top: 32px;}
    .main-design .btn_all {width: 100%; justify-content: center; height: 54px; font-size: 16px;}
}

/* row5 — main-solution: laid out inside the standard 1400px .wrap, same as
   every other section — `.main-solution .wrap` just adds the flex-row
   layout on top of the global .wrap (common.css) rather than replacing it.
   Sub-element classes are short (.left/.right/.card/.ico/.tit/...) and only
   ever used scoped under .main-solution, same convention as .about's
   .ico/.tit/.txt (6절). These rules are the REST / no-JS layout: cards in
   normal flow, a plain gapped list. On desktop, assets/js/gsap-init.js
   switches .main-solution .right and the cards over to position:absolute
   (inline styles) and drives each card's position by hand every frame via
   `transform: translateY(...)` (not `top` — see that file's comment for
   why) — that's the only thing actually animated per-frame, while `top`
   is set once to its final resting value and never touched again. Below
   1025px that JS never runs (matchMedia guard), so this plain gapped list
   is what actually ships. */
.main-solution {position: relative; z-index: 2; background: #fff; padding: 76px 0 80px; box-shadow: 0 -2px 0 #fff;}
/* will-change:transform promotes this to its own compositor layer ahead of
   time. It needs one anyway once ScrollTrigger pins it (pinType:"transform"
   here, since ScrollSmoother transforms #smooth-content) — pinning holds
   this at a DIFFERENT transform than its surroundings (which keep moving
   via the shared #smooth-content transform underneath), and without an
   existing layer the browser has to repaint the overlap on every scroll
   frame instead of just recompositing it. That repaint cost scales with
   viewport pixel area, which is why this only visibly stutters on bigger
   monitors. */
.main-solution .wrap {display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; will-change: transform;}
.main-solution .left {flex: 0 0 420px;}
/* font-size/weight for both .title and .desc come from the shared rules
   up top (grouped with .section_intro's) — same heading+subtext treatment
   as row4's "Design Work" intro, controlled from one place. Only the bits
   specific to sitting in this narrow left column (margin, color) live here. */
.main-solution .title {margin: 0; line-height: 1.15; color: #111;}
.main-solution .left .desc {margin: 8px 0 0; color: #111;}
.main-solution .right {flex: 1 1 auto; max-width: 960px; display: flex; flex-direction: column; gap: 20px;}

/* Darkest card first, lightening toward the last one; z-index rising to
   match so once stacked (JS sets these to position:absolute, overlapping),
   each later card paints over the ones already resting. will-change:
   transform (JS animates each card's position via transform, see
   gsap-init.js) gives each card its own compositor layer so moving one
   doesn't force repainting the others, or anything behind this whole
   pinned section — see the bigger perf comment on .main-solution .wrap. */
.main-solution .card {position: relative; padding: 44px 56px; border-radius: 24px; overflow: hidden; color: #fff; will-change: transform;}
.main-solution .card--01 {background: #050505; z-index: 1;}
.main-solution .card--02 {background: #1e1e1e; z-index: 2;}
.main-solution .card--03 {background: #3c3c3c; z-index: 3;}
.main-solution .card--04 {background: #565656; z-index: 4;}
.main-solution .ico {display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff;}
.main-solution .ico svg {width: 22px; height: 22px;}
.main-solution .tit {display: block; font-size: clamp(22px, 2vw, 32px); font-weight: 700; color: #fff; line-height:1.4;}
.main-solution .txt {margin: 16px 0 0; font-size: 15px; font-weight: 400; line-height: 1.7; color: rgba(255, 255, 255, 0.75);}
.main-solution .note {display: block; margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, 0.45);}

/* Below 1025px the pin JS doesn't run (see the matchMedia guard in
   inc/bottom.php) — it's already a plain gapped list at rest, this just
   stacks the title above the cards instead of beside them. */
@media (max-width: 1024px) {
    .main-solution {padding: 56px 0 60px;}
    .main-solution .wrap {flex-direction: column; gap: 24px;}
    .main-solution .left {flex: none;}
    .main-solution .right {width: 100%; max-width: none; gap: 16px;}
    .main-solution .card {padding: 32px 36px;}
    .main-solution .txt{font-size:14px;}
}




/* row6 — main-process: 진행 과정 4단계. 위쪽 선(.line-fill)이 스크롤에 맞춰 차오르고 단계 점(.dot)이 차례로 켜짐 (gsap-init.js). 바깥 div에 position:relative + .main-solution(z-index:2)보다 큰 z-index 필수 (10절) */
.main-process {position: relative; z-index: 3; padding: 80px 0 86px; background: #161616;}
.main-process .section_intro {margin-bottom: 50px; text-align: left;}
.main-process .steps {position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 40px; margin: 0; padding: 0; list-style: none;}
.main-process .line {position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(255, 255, 255, 0.15);}
.main-process .line-fill {display: block; width: 100%; height: 100%; background: var(--key-color-light); transform: scaleX(var(--p, 1)); transform-origin: left top;}
.main-process .step {position: relative; padding-top: 44px;}
.main-process .dot {display: block; position: absolute; top: -6px; left: 0; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: #161616;}
.main-process .num {display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: var(--key-color-light);}
.main-process .tit {display: block; margin-top: 16px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; color: #fff;}
.main-process .txt {margin: 18px 0 0; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.65);}

@media (max-width: 1024px) {
    .main-process {padding: 60px 0 64px;}
    .main-process .section_intro {margin-bottom: 64px;}
    .main-process .steps {display: block;}
    .main-process .line {top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto;}
    .main-process .line-fill {transform: scaleY(var(--p, 1));}
    .main-process .step {padding: 0 0 48px 44px;}
    .main-process .step:last-child {padding-bottom: 0;}
    .main-process .dot {top: 2px; left: 0;}
    .main-process .num {font-size: 12px;}
    .main-process .tit {margin-top: 8px; font-size: 19px;}
    .main-process .txt {margin-top: 8px; font-size: 14px; line-height: 1.6;}
}
@media (max-width: 640px) {
    .main-process .section_intro {margin-bottom: 40px;}
    .main-process .step {padding: 0 0 36px 36px;}
    .main-process .num {font-size: 11px;}
    .main-process .tit {margin-top: 6px; font-size: 16px;}
    .main-process .txt {margin-top: 6px; font-size: 13px; line-height: 1.55;}
}


/* row7 — main-marquee: 키워드가 양방향으로 흐르는 배너 (CSS만). 그룹 2개를 이어 붙이고 -50%까지 이동 → 끊김 없이 반복. hover해도 멈추지 않고 계속 흐름 */
.main-marquee {position: relative; z-index: 3; display: flex; flex-direction: column; gap: 12px; overflow: hidden; padding: 70px 0; background: var(--key-color); user-select: none;}
.main-marquee .row {overflow: hidden;}
.main-marquee .track {display: flex; width: max-content; animation: marqueeMove 45s linear infinite;}
.main-marquee .row--rev .track {animation-direction: reverse; animation-duration: 55s;}
.main-marquee .group {display: flex; flex: none; align-items: center; font-size: clamp(56px, 8vw, 128px);}
.main-marquee .word {font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #fff;}
.main-marquee .row--rev .word {color: transparent; -webkit-text-stroke: 2px #fff;}
.main-marquee .dot {display: block; flex: none; width: 0.16em; height: 0.16em; margin: 0 0.45em; border-radius: 50%; background: #fff;}
@keyframes marqueeMove {
    from {transform: translateX(0);}
    to {transform: translateX(-50%);}
}
@media (min-width: 641px) and (max-width: 1024px) {
    .main-marquee {padding: 56px 0;}
    .main-marquee .group {font-size: clamp(44px, 5.6vw, 58px);}
    .main-marquee .track {animation-duration: 34s;}
    .main-marquee .row--rev .track {animation-duration: 42s;}
}
@media (max-width: 640px) {
    .main-marquee {gap: 4px; padding: 32px 0;}
    .main-marquee .group {font-size: 36px;}
    .main-marquee .track {animation-duration: 30s;}
    .main-marquee .row--rev .track {animation-duration: 36s;}
    .main-marquee .row--rev .word {-webkit-text-stroke-width: 1px;}
}
@media (prefers-reduced-motion: reduce) {
    .main-marquee .track {animation: none;}
}


/* row8 — main-cta: 문의 유도 배너. 배경에서 얇은 원형 파동(.ring)이 중심에서 퍼져 나가고, 내용은 스크롤로 들어오면 순서대로 올라옴 (gsap-init.js, .reveal) */
.main-cta {position: relative; z-index: 3; overflow: hidden; padding: 100px 0; background: #000; text-align: center;}
.main-cta .wrap {position: relative; z-index: 1;}
.main-cta .ring {display: block; position: absolute; top: 50%; left: 50%; width: min(1200px, 120vw); aspect-ratio: 1; border: 1.5px solid var(--key-color-light); border-radius: 50%; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.2); animation: ctaRing 12s linear infinite;}
.main-cta .ring--2 {animation-delay: -3s;}
.main-cta .ring--3 {animation-delay: -6s;}
.main-cta .ring--4 {animation-delay: -9s;}
@keyframes ctaRing {
    0% {opacity: 0; transform: translate(-50%, -50%) scale(0.2);}
    8% {opacity: 1;}
    60% {opacity: 0.8;}
    100% {opacity: 0; transform: translate(-50%, -50%) scale(1);}
}
.main-cta .title {margin: 0; font-size: clamp(28px, 3.4vw, 52px); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: #fff;}
.main-cta .accent {color: var(--key-color-light);}
.main-cta .desc {margin: 32px 0 0; font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, 0.7);}
@media (min-width: 1025px) {
    .main-cta .title {font-size: clamp(40px, 4.2vw, 64px);}
    .main-cta .desc {font-size: 20px;}
}
.main-cta .btns {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 56px;}
.main-cta .btn {display: inline-flex; align-items: center; gap: 18px; height: 72px; border-radius: 999px; font-size: 19px; font-weight: 700; text-decoration: none !important; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;}
.main-cta .btn--main {padding: 0 14px 0 38px; background: #fff; color: #111;}
.main-cta .btn--main:hover {background: var(--key-color); color: #fff;}
.main-cta .btn--main .arw {display: block; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / 22px; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);}
.main-cta .btn--main:hover .arw {transform: rotate(45deg);}
.main-cta .btn--sub {padding: 0 38px; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff;}
.main-cta .btn--sub:hover {border-color: #fff; background: rgba(255, 255, 255, 0.1); color: #fff;}

@media (max-width: 1024px) {
    .main-cta {padding: 76px 0;}
}
@media (max-width: 640px) {
    .main-cta {padding: 60px 0;}
    .main-cta .desc {margin-top: 24px; font-size: 16px;}
    .main-cta .btns {flex-direction: column; margin-top: 40px;}
    .main-cta .btn {width: 100%; max-width: 340px; height: 62px; font-size: 17px;}
    .main-cta .btn--main {justify-content: space-between; padding: 0 10px 0 30px;}
    .main-cta .btn--main .arw {width: 42px; height: 42px;}
    .main-cta .btn--sub {justify-content: center; padding: 0;}
}
@media (prefers-reduced-motion: reduce) {
    .main-cta .ring {animation: none; opacity: 0.25; transform: translate(-50%, -50%) scale(0.6);}
}


/* row8 — main-partners: 파트너사 로고. 슬라이드 없이 전부 한 번에 보이는 격자. 데스크톱 5열 x 3줄(15개)만 보이고 .item--more는 "더보기"(.is-open)로 한 번에 펼침 (gsap-init.js). 태블릿/모바일은 3열 x 5줄(같은 15개). 바깥 div z-index 규칙은 10절과 동일 */
.main-partners {position: relative; z-index: 3; padding: 80px 0 76px; background: #fff;}
.main-partners .section_intro {margin-bottom: 64px; text-align: left;}
.main-partners .list {display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none;}
.main-partners .list:not(.is-open) .item--more {display: none;}
.main-partners .logo {position: relative; display: flex; align-items: center; justify-content: center; height: 85px; padding: 0 28px; border: 1px solid #e6e8ec; border-radius: 16px; background: #fff; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;}
.main-partners .logo:hover {border-color: transparent; box-shadow: 0 12px 32px rgba(17, 24, 39, 0.1); transform: translateY(-4px);}
.main-partners .logo::after {content: ""; display: block; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; border-radius: 2px; background: var(--key-color); transform: translateX(-50%); transition: width 0.35s ease;}
.main-partners .logo:hover::after {width: 32px;}
.main-partners .logo img {display: block; max-width: 100%; max-height: 40px; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter 0.3s ease, opacity 0.3s ease;}
.main-partners .logo:hover img {filter: none; opacity: 1;}
.main-partners .ph {font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: #c2c6cd;}
.main-partners .more {display: flex; justify-content: center; margin-top: 56px;}
.main-partners .more[hidden] {display: none;}
.main-partners .btn_more {display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 30px 0 34px; border: 1px solid #111; border-radius: 999px; background: #fff; font-size: 17px; font-weight: 700; color: #111; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease;}
.main-partners .btn_more:hover {background: #111; color: #fff;}
.main-partners .btn_more .cnt {font-size: 14px; font-weight: 600; color: var(--key-color);}
.main-partners .btn_more:hover .cnt {color: var(--key-color-light);}
.main-partners .btn_more .cnt:empty {display: none;}
.main-partners .btn_more .ico {display: block; position: relative; flex: none; width: 14px; height: 14px; margin-left: 4px;}
.main-partners .btn_more .ico::before, .main-partners .btn_more .ico::after {content: ""; display: block; position: absolute; top: 6px; left: 0; width: 14px; height: 2px; border-radius: 1px; background: currentColor; transition: transform 0.35s ease;}
.main-partners .btn_more .ico::after {transform: rotate(90deg);}
.main-partners .btn_more[aria-expanded="true"] .ico::after {transform: rotate(0deg);}

@media (max-width: 1024px) {
    .main-partners {padding: 60px 0 60px;}
    .main-partners .section_intro {margin-bottom: 44px;}
    .main-partners .list {grid-template-columns: repeat(3, 1fr); gap: 12px;}
    .main-partners .logo {height: 65px; padding: 0 20px;}
    .main-partners .logo img {max-height: 34px;}
}
@media (max-width: 640px) {
    .main-partners {padding: 48px 0 48px;}
    .main-partners .section_intro .title {font-size: 26px;}
    .main-partners .section_intro .desc {font-size: 14px;}
    .main-partners .list {gap: 8px;}
    .main-partners .logo {height: 46px; padding: 0 10px; border-radius: 10px;}
    .main-partners .logo img {max-height: 26px;}
    .main-partners .ph {font-size: 11px; letter-spacing: 0.04em;}
    .main-partners .more {margin-top: 36px;}
    .main-partners .btn_more {height: 54px; font-size: 16px;}
}


/* About 반응형 — 3열 카드는 글자 때문에 열이 화면보다 넓어져 오른쪽이 잘렸음(grid 1fr 의 min-content).
   1024px 이하: 글자/아이콘을 줄여 3열 유지 / 860px 이하: 카드를 세로로 쌓고 모서리 곡선도 화면에 맞게 줄임 */
@media (max-width: 1024px) {
    .about {padding: 70px 0 48px;}
    .about .item_group_wrap {margin-top: 56px;}
    .about .item_group .li {padding: 0 14px;}
    .about .item_group .ico {width: 38px; height: 38px; margin-bottom: 12px;}
    .about .item_group .tit {font-size: clamp(17px, 2.3vw, 24px);}
    .about .item_group .txt {margin-top: 10px; font-size: clamp(11px, 1.45vw, 14px);}
}
@media (max-width: 860px) {
    .about .item_group {display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;}
    .about .item_group .li {aspect-ratio: auto; padding: 32px 22px;}
    .about .item_group .li + .li {margin-left: 0;}
    .about .item_group .li:nth-child(1) {border-radius: 28px 120px 120px 28px;}
    .about .item_group .li:nth-child(2) {border-radius: 120px 120px 28px 28px;}
    .about .item_group .li:nth-child(3) {border-radius: 120px 28px 28px 120px;}
    .about .item_group .li:nth-child(1) .ico, .about .item_group .li:nth-child(1) .tit, .about .item_group .li:nth-child(1) .txt, .about .item_group .li:nth-child(3) .ico, .about .item_group .li:nth-child(3) .tit, .about .item_group .li:nth-child(3) .txt {transform: none;}
    .about .item_group .ico {width: 44px; height: 44px; margin-bottom: 14px;}
    .about .item_group .tit {font-size: 22px;}
    .about .item_group .txt {margin-top: 10px; font-size: 14px;}
}
@media (max-width: 640px) {
    .about {padding: 56px 0 40px;}
    .about .item_group_wrap {margin-top: 40px;}
    .about .item_group .li {padding: 28px 18px;}
    .about .item_group {gap: 12px;}
    .about .item_group .ico {width: 38px; height: 38px; margin-bottom: 12px;}
    .about .item_group .tit {font-size: 19px;}
    .about .item_group .txt {margin-top: 8px; font-size: 13px;}
}


/* PC 전용: row3~row6 섹션 상하 여백 확대 (≥1025px). 태블릿/모바일은 위쪽 기존 값 유지 */
@media (min-width: 1025px) {
    .value-banner {padding: 70px 0 130px;}
    .main-design {padding: 110px 0;}
    .main-solution {padding: 104px 0 110px;}
    .main-process {padding: 110px 0 116px;}
}