/* 서브페이지 공통 (/about, /project, /guide) - 메인과 같은 폰트·색(#df6535)·rem 단위 사용 */

.sub-page .header.Fixed { background-color: rgba(10, 10, 10, .9); backdrop-filter: blur(8px); padding: 22rem 0; }

/* 강조 단어 */
.hl { color: var(--main-color); font-style: normal; }
.hl-u { font-style: normal; background: linear-gradient(transparent 62%, rgba(223, 101, 53, .28) 62%); }

/* ===== 히어로 ===== */
.sp-hero { position: relative; width: 100%; min-height: 760rem; display: flex; align-items: center; padding: 200rem 0 120rem; overflow: hidden; color: #fff;
    background:
        radial-gradient(circle at 85% 70%, rgba(223, 101, 53, .45) 0%, rgba(223, 101, 53, 0) 45%),
        radial-gradient(circle at 10% 10%, rgba(223, 101, 53, .12) 0%, rgba(223, 101, 53, 0) 35%),
        #050505; }
.sp-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 80rem 80rem; mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); }
.sp-hero-bg { position: absolute; right: -20rem; bottom: -40rem; font-family: 'Montserrat'; font-size: 260rem; font-weight: 800; line-height: 1; letter-spacing: -10rem; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .13); text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.sp-hero .sp-inner { display: flex; justify-content: space-between; align-items: center; gap: 60rem; }
.sp-hero-text { flex: 1; }
.sp-inner { width: 1200rem; margin: 0 auto; position: relative; z-index: 1; }
.sp-label { display: inline-flex; align-items: center; gap: 12rem; color: var(--main-color); font-family: 'Montserrat'; font-size: 18rem; font-weight: 700; letter-spacing: 2rem; text-transform: uppercase; margin-bottom: 26rem; }
.sp-label::before { content: ''; width: 34rem; height: 2px; background-color: var(--main-color); }
.sp-hero h1 { font-size: 66rem; font-weight: 800; line-height: 1.3; letter-spacing: -2.5rem; }
.sp-hero p.sp-desc { color: #bdbdbd; font-size: 22rem; line-height: 1.7; margin-top: 30rem; }
.sp-kw { display: flex; flex-wrap: wrap; gap: 12rem; margin-top: 40rem; }
.sp-kw li { padding: 11rem 22rem; border-radius: 100px; border: 1px solid rgba(255, 255, 255, .22); background-color: rgba(255, 255, 255, .04); color: #ddd; font-size: 16rem; font-weight: 500; }
.sp-kw li::before { content: '#'; color: var(--main-color); margin-right: 3rem; }
.sp-crumb { display: flex; gap: 10rem; color: #777; font-size: 15rem; margin-bottom: 36rem; }
.sp-crumb a:hover { color: #fff; }

/* 히어로 오른쪽 장식 */
.sp-hero-visual { position: relative; width: 420rem; flex-shrink: 0; }
.sp-hero-mark { width: 100%; padding: 70rem; border-radius: 40rem; background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .01)); border: 1px solid rgba(255, 255, 255, .12); }
.sp-hero-mark img { display: block; width: 100%; }
.sp-float { position: absolute; padding: 16rem 22rem; border-radius: 16rem; background-color: #fff; color: #111; font-size: 15rem; font-weight: 600; box-shadow: 0 20rem 40rem rgba(0, 0, 0, .35); animation: spFloat 4s ease-in-out infinite; }
.sp-float b { display: block; color: var(--main-color); font-family: 'Montserrat'; font-size: 30rem; line-height: 1.1; }
.sp-float.f1 { left: -60rem; top: 40rem; }
.sp-float.f2 { right: -40rem; bottom: 30rem; animation-delay: -2s; }
@keyframes spFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14rem); } }
.sp-hero-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16rem; transform: rotate(-4deg); }
.sp-hero-thumbs img { display: block; width: 100%; aspect-ratio: 9 / 13; object-fit: cover; object-position: top; border-radius: 18rem; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 25rem 50rem rgba(0, 0, 0, .5); }
.sp-hero-thumbs img:nth-child(2n) { transform: translateY(50rem); }
.sp-hero-qa { display: flex; flex-direction: column; gap: 16rem; }
.sp-hero-qa div { padding: 22rem 26rem; border-radius: 18rem; font-size: 18rem; line-height: 1.5; }
.sp-hero-qa .q { align-self: flex-start; background-color: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); border-bottom-left-radius: 4rem; }
.sp-hero-qa .a { align-self: flex-end; background-color: var(--main-color); border-bottom-right-radius: 4rem; font-weight: 600; }

/* ===== 섹션 공통 ===== */
.sp-sec { position: relative; width: 100%; padding: 140rem 0; background-color: #fff; color: #222; overflow: hidden; }
.sp-sec.gray { background-color: #f5f5f3; }
.sp-sec.dark { background-color: #050505; color: #fff; }
.sp-head { margin-bottom: 60rem; }
.sp-head.center { text-align: center; }
.sp-head.center .sp-label { justify-content: center; }
.sp-sec h2 { font-size: 46rem; font-weight: 800; line-height: 1.35; letter-spacing: -1.8rem; }
.sp-sec h3 { font-size: 25rem; font-weight: 700; line-height: 1.4; margin-bottom: 14rem; }
.sp-lead { color: #666; font-size: 20rem; line-height: 1.75; margin-top: 20rem; }
.sp-sec.dark .sp-lead { color: #9a9a9a; }
.sp-sec p { font-size: 19rem; line-height: 1.75; }
.sp-text p + p { margin-top: 22rem; }
.sp-text strong { color: var(--main-color); }
.sp-split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 80rem; align-items: start; }
.sp-split .sp-head { position: sticky; top: 140rem; margin-bottom: 0; }

.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28rem; }
.sp-grid.two { grid-template-columns: repeat(2, 1fr); }
.sp-grid.four { grid-template-columns: repeat(4, 1fr); }

/* 카드 */
.sp-card { position: relative; padding: 46rem 40rem; border-radius: 24rem; background-color: #fff; border: 1px solid #ececec; transition: transform .35s, box-shadow .35s, border-color .35s; overflow: hidden; }
.sp-card::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 4rem; background-color: var(--main-color); transform: scaleX(0); transform-origin: left; transition: transform .45s; }
.sp-card:hover { transform: translateY(-8rem); box-shadow: 0 30rem 60rem rgba(0, 0, 0, .08); border-color: transparent; }
.sp-card:hover::after { transform: scaleX(1); }
.sp-sec.gray .sp-card { border-color: #e7e7e4; }
.sp-ico { display: inline-flex; justify-content: center; align-items: center; width: 72rem; height: 72rem; margin-bottom: 26rem; border-radius: 20rem; background-color: rgba(223, 101, 53, .1); color: var(--main-color); font-size: 36rem; }
.sp-card p { color: #6a6a6a; font-size: 18rem; }
.sp-card .num { display: block; color: var(--main-color); font-family: 'Montserrat'; font-size: 44rem; font-weight: 800; line-height: 1; margin-bottom: 22rem; opacity: .9; }
.sp-card.dark { background-color: #111; border-color: #262626; color: #fff; }
.sp-card.dark p { color: #9a9a9a; }

/* 비교 카드 (타 대행사 vs 위드어스) */
.sp-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 28rem; }
.sp-vs > div { padding: 50rem 46rem; border-radius: 24rem; }
.sp-vs .bad { background-color: #ececea; color: #555; }
.sp-vs .good { background: linear-gradient(145deg, #e8703f, #c9501f); color: #fff; box-shadow: 0 30rem 60rem rgba(223, 101, 53, .3); }
.sp-vs h3 { display: flex; align-items: center; gap: 10rem; font-size: 24rem; margin-bottom: 30rem; }
.sp-vs ul li { display: flex; gap: 14rem; padding: 18rem 0; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 18rem; line-height: 1.6; }
.sp-vs .good ul li { border-top-color: rgba(255, 255, 255, .25); }
.sp-vs ul li i { font-size: 24rem; flex-shrink: 0; }
.sp-vs ul li b { display: block; font-size: 19rem; }

/* 숫자 */
.sp-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; }
.sp-stat { padding: 55rem 20rem; text-align: center; border-right: 1px solid #2a2a2a; }
.sp-stat:last-child { border-right: 0; }
.sp-stat strong { display: block; font-family: 'Montserrat'; font-size: 76rem; font-weight: 700; letter-spacing: -3rem; }
.sp-stat strong em { color: var(--main-color); font-style: normal; }
.sp-stat span { color: #9a9a9a; font-size: 18rem; }

/* 매체 로고 흐르는 띠 */
.sp-marquee { display: flex; overflow: hidden; margin-top: 10rem; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.sp-marquee-track { display: flex; gap: 24rem; padding-right: 24rem; flex-shrink: 0; animation: spMarquee 30s linear infinite; }
.sp-marquee-track div { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14rem; width: 210rem; height: 150rem; border-radius: 20rem; background-color: #fff; border: 1px solid #e7e7e4; font-size: 15rem; font-weight: 600; color: #555; }
.sp-marquee-track img { height: 50rem; width: auto; max-width: 140rem; object-fit: contain; }
@keyframes spMarquee { to { transform: translateX(-100%); } }

/* 표 */
.sp-table { width: 100%; border-collapse: collapse; border-top: 2px solid #222; background-color: #fff; }
.sp-table th, .sp-table td { padding: 26rem 24rem; border-bottom: 1px solid #e6e6e6; font-size: 18rem; text-align: left; }
.sp-table th { width: 220rem; color: #888; font-weight: 500; }

/* ===== 프로젝트 ===== */
.sp-case { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28rem; }
.sp-case figure { margin: 0; border-radius: 22rem; overflow: hidden; background-color: #fff; border: 1px solid #e7e7e4; transition: transform .35s, box-shadow .35s; }
.sp-case figure:hover { transform: translateY(-8rem); box-shadow: 0 30rem 60rem rgba(0, 0, 0, .1); }
.sp-case .thumb { position: relative; overflow: hidden; }
.sp-case img { display: block; width: 100%; aspect-ratio: 9 / 14; object-fit: cover; object-position: top; transition: transform .6s; }
.sp-case figure:hover img { transform: scale(1.06); }
.sp-case .tag { position: absolute; left: 16rem; top: 16rem; padding: 8rem 16rem; border-radius: 100px; background-color: rgba(0, 0, 0, .7); color: #fff; font-size: 14rem; font-weight: 600; backdrop-filter: blur(4px); }
.sp-case figcaption { padding: 26rem 26rem 30rem; }
.sp-case figcaption h3 { font-size: 21rem; margin-bottom: 8rem; }
.sp-case figcaption p { color: #777; font-size: 16rem; line-height: 1.6; }

.sp-result { padding: 46rem 42rem; border-radius: 24rem; background: linear-gradient(160deg, #161616, #0c0c0c); border: 1px solid #262626; }
.sp-result h3 { display: flex; justify-content: space-between; align-items: center; color: #fff; font-family: 'Montserrat'; font-size: 28rem; }
.sp-result h3 small { padding: 6rem 14rem; border-radius: 100px; background-color: rgba(223, 101, 53, .15); color: var(--main-color); font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 14rem; font-weight: 600; }
.sp-result dl { display: grid; grid-template-columns: 1fr 1fr; gap: 20rem; margin-top: 30rem; }
.sp-result dt { color: #8a8a8a; font-size: 15rem; margin-bottom: 8rem; }
.sp-result dd { margin: 0; font-family: 'Montserrat'; font-size: 44rem; font-weight: 700; letter-spacing: -1.5rem; }
.sp-result dd.down { color: #6e98ff; }
.sp-result dd.up { color: var(--main-color); }
.sp-bar { height: 8rem; margin-top: 30rem; border-radius: 10rem; background-color: #262626; overflow: hidden; }
.sp-bar span { display: block; height: 100%; border-radius: 10rem; background: linear-gradient(90deg, #8a3a1a, var(--main-color)); }
.sp-note { color: #777; font-size: 15rem; margin-top: 30rem; }

/* 진행 절차 */
.sp-steps { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.sp-steps::before { content: ''; position: absolute; left: 10%; right: 10%; top: 38rem; height: 2px; background: repeating-linear-gradient(90deg, var(--main-color) 0 10rem, transparent 10rem 18rem); opacity: .5; }
.sp-steps li { counter-increment: step; position: relative; padding: 0 16rem; text-align: center; }
.sp-steps li::before { content: '0' counter(step); display: flex; justify-content: center; align-items: center; width: 76rem; height: 76rem; margin: 0 auto 26rem; border-radius: 50%; background-color: #111; color: #fff; font-family: 'Montserrat'; font-size: 22rem; font-weight: 700; box-shadow: 0 0 0 8rem #fff; position: relative; z-index: 1; transition: background-color .3s; }
.sp-steps li:hover::before { background-color: var(--main-color); }
.sp-steps h3 { font-size: 20rem; margin-bottom: 8rem; }
.sp-steps p { color: #777; font-size: 16rem !important; }

/* FAQ */
.sp-faq details { margin-bottom: 14rem; border-radius: 18rem; background-color: #fff; border: 1px solid #e7e7e4; transition: border-color .3s, box-shadow .3s; }
.sp-faq details[open] { border-color: var(--main-color); box-shadow: 0 20rem 40rem rgba(223, 101, 53, .1); }
.sp-faq summary { display: flex; align-items: center; gap: 18rem; padding: 30rem 32rem; font-size: 21rem; font-weight: 700; cursor: pointer; list-style: none; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::before { content: 'Q'; display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; width: 40rem; height: 40rem; border-radius: 12rem; background-color: rgba(223, 101, 53, .12); color: var(--main-color); font-family: 'Montserrat'; font-size: 18rem; font-weight: 800; }
.sp-faq summary span { flex: 1; }
.sp-faq summary i { color: #999; font-size: 26rem; transition: transform .3s; }
.sp-faq details[open] summary i { transform: rotate(180deg); color: var(--main-color); }
.sp-faq .ans { padding: 0 32rem 32rem 90rem; color: #555; }

/* 목차 */
.sp-toc { display: flex; flex-wrap: wrap; gap: 12rem; margin-top: 40rem; }
.sp-toc a { padding: 13rem 24rem; border-radius: 100px; background-color: var(--main-color); color: #fff; font-size: 16rem; font-weight: 600; transition: background-color .3s; }
.sp-toc a:hover { background-color: #fff; color: #111; }

/* 정의 박스 */
.sp-define { padding: 50rem 54rem; border-radius: 24rem; background-color: #050505; color: #fff; position: relative; overflow: hidden; }
.sp-define::after { content: 'DB'; position: absolute; right: 20rem; bottom: -60rem; font-family: 'Montserrat'; font-size: 240rem; font-weight: 800; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .1); }
.sp-define p { font-size: 22rem !important; line-height: 1.7; position: relative; z-index: 1; }
.sp-define strong { color: var(--main-color); }

/* ===== 문의 유도 ===== */
.sp-cta { position: relative; width: 100%; padding: 150rem 0; background-color: #070707; color: #fff; text-align: center; overflow: hidden; }
.sp-cta::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1100rem; height: 1100rem; transform: translate(-50%, -30%); border-radius: 50%; background: radial-gradient(circle, rgba(223, 101, 53, .55) 0%, rgba(223, 101, 53, .15) 35%, rgba(223, 101, 53, 0) 65%); pointer-events: none; }
.sp-cta::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 80rem 80rem; mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); pointer-events: none; }
.sp-cta .sp-inner { z-index: 2; }
.sp-cta h2 { font-size: 52rem; font-weight: 800; line-height: 1.35; letter-spacing: -2rem; }
.sp-cta h2::before { content: "CONTACT"; display: block; width: fit-content; margin: 0 auto 28rem; padding: 9rem 20rem; border-radius: 100px; border: 1px solid rgba(223, 101, 53, .6); background-color: rgba(223, 101, 53, .12); color: var(--main-color); font-family: "Montserrat"; font-size: 15rem; font-weight: 700; letter-spacing: 3rem; }
.sp-cta p { color: #b5b5b5; font-size: 20rem; margin-top: 20rem; }
.sp-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12rem; margin-top: 48rem; padding: 26rem 60rem; border-radius: 100px; background: linear-gradient(135deg, #ef7a45, #d2541f); color: #fff; font-size: 20rem; font-weight: 700; transition: transform .3s, box-shadow .3s; box-shadow: 0 20rem 50rem rgba(223, 101, 53, .45); }
.sp-btn i { transition: transform .3s; }
.sp-btn:hover { transform: translateY(-4rem); box-shadow: 0 26rem 60rem rgba(223, 101, 53, .6); }
.sp-btn:hover i { transform: translateX(6rem); }

.sp-links { display: flex; flex-wrap: wrap; gap: 14rem; margin-top: 50rem; }
.sp-links a { display: inline-flex; align-items: center; gap: 8rem; padding: 17rem 30rem; border-radius: 100px; border: 1px solid #ccc; font-size: 17rem; font-weight: 600; transition: all .3s; }
.sp-links a:hover { border-color: var(--main-color); background-color: var(--main-color); color: #fff; }


/*==================================================*/
@media (max-width: 1300px) {
    .sp-inner { width: 100%; padding: 0 30px; }
}

@media (max-width: 1024px) {
    .sp-hero-visual { display: none; }
    .sp-split { grid-template-columns: 1fr; gap: 50rem; }
    .sp-split .sp-head { position: static; }
}

@media (max-width: 768px) {
    .sp-hero { min-height: 0; padding: 200rem 0 120rem; }
    .sp-hero h1 { font-size: 60rem; }
    .sp-hero p.sp-desc { font-size: 28rem; }
    .sp-hero-bg { font-size: 170rem; bottom: -20rem; }
    .sp-kw li { font-size: 23rem; padding: 12rem 24rem; }
    .sp-label { font-size: 23rem; }
    .sp-crumb { font-size: 23rem; }
    .sp-sec { padding: 120rem 0; }
    .sp-sec h2 { font-size: 52rem; }
    .sp-sec h3 { font-size: 34rem; }
    .sp-lead, .sp-sec p { font-size: 27rem; }
    .sp-grid, .sp-grid.two, .sp-grid.four, .sp-vs { grid-template-columns: 1fr; gap: 24rem; }
    .sp-card { padding: 54rem 44rem; }
    .sp-card p { font-size: 26rem; }
    .sp-ico { width: 96rem; height: 96rem; font-size: 48rem; }
    .sp-card .num { font-size: 56rem; }
    .sp-vs > div { padding: 56rem 44rem; }
    .sp-vs h3 { font-size: 34rem; }
    .sp-vs ul li { font-size: 26rem; }
    .sp-vs ul li b { font-size: 28rem; }
    .sp-vs ul li i { font-size: 34rem; }
    .sp-stats { grid-template-columns: repeat(2, 1fr); }
    .sp-stat { border-bottom: 1px solid #2a2a2a; }
    .sp-stat:nth-child(2n) { border-right: 0; }
    .sp-stat strong { font-size: 84rem; }
    .sp-stat span { font-size: 25rem; }
    .sp-marquee-track div { width: 260rem; height: 180rem; font-size: 22rem; }
    .sp-marquee-track img { height: 60rem; max-width: 170rem; }
    .sp-table th, .sp-table td { font-size: 26rem; padding: 28rem 18rem; }
    .sp-table th { width: 210rem; }
    .sp-case { grid-template-columns: repeat(2, 1fr); gap: 22rem; }
    .sp-case .tag { font-size: 20rem; }
    .sp-case figcaption h3 { font-size: 28rem; }
    .sp-case figcaption p { font-size: 23rem; }
    .sp-result h3 { font-size: 40rem; }
    .sp-result h3 small { font-size: 21rem; }
    .sp-result dt { font-size: 23rem; }
    .sp-result dd { font-size: 58rem; }
    .sp-note { font-size: 22rem; }
    .sp-steps { grid-template-columns: 1fr; gap: 40rem; }
    .sp-steps::before { left: 38rem; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--main-color) 0 10rem, transparent 10rem 18rem); }
    .sp-steps li { display: grid; grid-template-columns: 76rem 1fr; column-gap: 30rem; text-align: left; padding: 0; }
    .sp-steps li::before { grid-row: span 2; margin: 0; }
    .sp-steps h3 { font-size: 32rem; }
    .sp-steps p { font-size: 25rem !important; }
    .sp-faq summary { font-size: 29rem; padding: 34rem 28rem; }
    .sp-faq summary::before { width: 54rem; height: 54rem; font-size: 24rem; }
    .sp-faq .ans { padding: 0 28rem 34rem 28rem; }
    .sp-toc a { font-size: 23rem; padding: 16rem 28rem; }
    .sp-define { padding: 54rem 44rem; }
    .sp-define p { font-size: 29rem !important; }
    .sp-cta { padding: 130rem 0; }
    .sp-cta::before { width: 1400rem; height: 1400rem; }
    .sp-cta h2::before { font-size: 21rem; }
    .sp-cta h2 { font-size: 52rem; }
    .sp-cta p { font-size: 27rem; }
    .sp-btn { font-size: 28rem; padding: 28rem 60rem; }
    .sp-links a { font-size: 25rem; padding: 20rem 34rem; }
}


/* ===== SERVICE 목록·관련 서비스 ===== */
.sv-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24rem; }
.sv-item { position: relative; display: flex; flex-direction: column; padding: 40rem 34rem 34rem; border-radius: 24rem; background-color: #fff; border: 1px solid #e7e7e4; transition: transform .35s, box-shadow .35s, border-color .35s; }
.sv-item:hover { transform: translateY(-8rem); box-shadow: 0 30rem 60rem rgba(0, 0, 0, .08); border-color: var(--main-color); }
.sv-item h3 { font-size: 23rem; font-weight: 700; margin-bottom: 12rem; }
.sv-item p { flex: 1; color: #777; font-size: 16rem !important; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sv-more { display: inline-flex; align-items: center; gap: 6rem; margin-top: 24rem; color: var(--main-color); font-size: 16rem; font-weight: 700; }
.sv-more i { transition: transform .3s; }
.sv-item:hover .sv-more i { transform: translateX(6rem); }
.sv-chips { display: flex; flex-wrap: wrap; gap: 14rem; }
.sv-chips a { display: inline-flex; align-items: center; gap: 10rem; padding: 20rem 30rem; border-radius: 16rem; background-color: #f5f5f3; border: 1px solid #e7e7e4; font-size: 18rem; font-weight: 600; transition: all .3s; }
.sv-chips a i { color: var(--main-color); font-size: 22rem; }
.sv-chips a:hover { background-color: #111; border-color: #111; color: #fff; }

@media (max-width: 1024px) {
    .sv-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .sv-list { grid-template-columns: 1fr; }
    .sv-item { padding: 50rem 40rem 40rem; }
    .sv-item h3 { font-size: 34rem; }
    .sv-item p { font-size: 25rem !important; }
    .sv-more { font-size: 25rem; }
    .sv-chips a { font-size: 25rem; padding: 24rem 32rem; }
    .sv-chips a i { font-size: 30rem; }
}


/* ===== 서브페이지 문의 폼 (sub_contact.php) ===== */
.sp-contact { text-align: left; }
.spc-wrap { display: grid; grid-template-columns: 1fr 520rem; gap: 80rem; align-items: center; }
.spc-text h2::before { margin-left: 0; }
.spc-text ul { margin-top: 34rem; display: flex; flex-direction: column; gap: 14rem; }
.spc-text li { display: flex; align-items: center; gap: 12rem; color: #ddd; font-size: 18rem; }
.spc-text li i { display: inline-flex; justify-content: center; align-items: center; width: 28rem; height: 28rem; border-radius: 50%; background-color: var(--main-color); color: #fff; font-size: 17rem; }
.spc-text .spc-mail { margin-top: 30rem; font-size: 16rem; color: #999; }
.spc-text .spc-mail a { color: #fff; text-decoration: underline; }
.spc-form { position: relative; z-index: 1; padding: 44rem 40rem; border-radius: 26rem; background-color: #fff; color: #222; box-shadow: 0 30rem 80rem rgba(0, 0, 0, .45); }
.spc-field { display: block; margin-bottom: 18rem; }
.spc-field span { display: block; margin-bottom: 8rem; font-size: 15rem; font-weight: 700; color: #333; }
.spc-field input, .spc-field textarea { width: 100%; padding: 16rem 18rem; border-radius: 12rem; border: 1px solid #ddd; background-color: #fafafa; font-size: 17rem; color: #222; outline: none; transition: border-color .2s, background-color .2s; }
.spc-field textarea { height: 130rem; resize: vertical; }
.spc-field input:focus, .spc-field textarea:focus { border-color: var(--main-color); background-color: #fff; }
.spc-agree { display: flex; justify-content: space-between; align-items: center; gap: 10rem; margin: 6rem 0 22rem; font-size: 14rem; color: #555; }
.spc-agree label { display: flex; align-items: center; gap: 8rem; cursor: pointer; }
.spc-agree input { width: 18rem; height: 18rem; accent-color: var(--main-color); }
.spc-agree .fBtn { padding: 6rem 12rem; border-radius: 8rem; border: 1px solid #ddd; background: #fff; color: #666; font-size: 13rem; cursor: pointer; }
.spc-submit { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 10rem; padding: 22rem; border: 0; border-radius: 14rem; background: linear-gradient(135deg, #ef7a45, #d2541f); color: #fff; font-size: 19rem; font-weight: 700; cursor: pointer; transition: transform .2s, box-shadow .2s; box-shadow: 0 16rem 36rem rgba(223, 101, 53, .4); }
.spc-submit:hover { transform: translateY(-2rem); }
.spc-submit:disabled { background: #bbb; box-shadow: none; cursor: not-allowed; }

@media (max-width: 1024px) {
    .spc-wrap { grid-template-columns: 1fr; gap: 50rem; }
}
@media (max-width: 768px) {
    .spc-text li { font-size: 26rem; }
    .spc-text li i { width: 38rem; height: 38rem; font-size: 24rem; }
    .spc-text .spc-mail { font-size: 23rem; }
    .spc-form { padding: 50rem 36rem; }
    .spc-field span { font-size: 23rem; }
    .spc-field input, .spc-field textarea { font-size: 16px; padding: 22rem 22rem; }
    .spc-field textarea { height: 200rem; }
    .spc-agree { font-size: 21rem; }
    .spc-agree input { width: 26rem; height: 26rem; }
    .spc-agree .fBtn { font-size: 20rem; }
    .spc-submit { font-size: 27rem; padding: 28rem; }
}


/* ===== SERVICE 보강 섹션 ===== */
.sv-target { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24rem; }
.sv-tg { padding: 40rem 36rem; border-radius: 24rem; background: #fff; border: 1px solid #e7e7e4; border-top: 4rem solid var(--main-color); }
.sv-tg-tag { display: inline-block; margin-bottom: 18rem; padding: 7rem 14rem; border-radius: 100px; background: rgba(223, 101, 53, .1); color: var(--main-color); font-size: 14rem; font-weight: 700; }
.sv-tg p { color: #6a6a6a; font-size: 17rem !important; }
.sv-creative { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24rem; }
.sv-cr { padding: 40rem 38rem; border-radius: 24rem; background: #111; color: #bbb; }
.sv-cr-type { display: inline-block; color: var(--main-color); font-family: 'Montserrat', 'Pretendard Variable', sans-serif; font-size: 14rem; font-weight: 700; letter-spacing: 1rem; margin-bottom: 14rem; }
.sv-cr-copy { color: #fff; font-size: 24rem !important; font-weight: 700; line-height: 1.45 !important; margin-bottom: 14rem; }
.sv-cr p:last-child { font-size: 17rem !important; color: #9a9a9a; }
.sp-sec.gray .sv-cr, .sp-sec .sv-cr { box-shadow: 0 20rem 40rem rgba(0, 0, 0, .08); }
.sv-landing { counter-reset: ld; display: flex; flex-direction: column; gap: 14rem; }
.sv-landing li { counter-increment: ld; position: relative; padding: 26rem 28rem 26rem 86rem; border-radius: 18rem; background: #fff; border: 1px solid #e7e7e4; font-size: 17rem; color: #666; line-height: 1.65; }
.sv-landing li::before { content: counter(ld, decimal-leading-zero); position: absolute; left: 26rem; top: 24rem; color: var(--main-color); font-family: 'Montserrat'; font-size: 26rem; font-weight: 800; }
.sv-landing li b { display: block; color: #111; font-size: 20rem; margin-bottom: 4rem; }
.sv-check { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16rem 30rem; }
.sv-check li { display: flex; gap: 14rem; padding: 22rem 24rem; border-radius: 16rem; background: #fff; border: 1px solid #ececec; font-size: 17rem; color: #666; line-height: 1.6; }
.sv-check li i { color: var(--main-color); font-size: 26rem; flex-shrink: 0; }
.sv-check li b { display: block; color: #111; font-size: 19rem; margin-bottom: 2rem; }
.svs-intro .sp-text p { font-size: 20rem; }

@media (max-width: 1024px) {
    .sv-target { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .sv-creative, .sv-check { grid-template-columns: 1fr; }
    .sv-tg-tag, .sv-cr-type { font-size: 21rem; }
    .sv-tg p, .sv-cr p:last-child { font-size: 25rem !important; }
    .sv-cr-copy { font-size: 33rem !important; }
    .sv-landing li { font-size: 25rem; padding: 30rem 28rem 30rem 96rem; }
    .sv-landing li::before { font-size: 34rem; }
    .sv-landing li b { font-size: 29rem; }
    .sv-check li { font-size: 25rem; }
    .sv-check li i { font-size: 36rem; }
    .sv-check li b { font-size: 28rem; }
    .svs-intro .sp-text p { font-size: 28rem; }
}