/* PUFFINGRAF — Nike About 스타일 공통 스타일
   블랙 히어로 → 화이트 본문, 브랜드 블루 포인트 */
:root{
  --ink:#0a0a0a; --paper:#ffffff; --sub:#575e6b; --line:#e8eaee;
  --blue:#0074E0; --blue-bright:#4DA3FF; --blue-deep:#005BB0;
  --blue-soft:#E6F1FC;
}
*{margin:0;padding:0;box-sizing:border-box}
/* 기준 글자 크기 1rem = 1rem. 아래 값은 전부 rem (16으로 나눈 값) */
html{font-size:100%;scroll-behavior:smooth}
body{font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
.en{font-family:'Archivo','Pretendard',sans-serif}
a{text-decoration:none;color:inherit}
img{max-width:100%}
strong,b{font-weight:600}

/* ===== 헤더 ===== */
.gf-header{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:.0625rem solid transparent;transition:background .25s,border-color .25s,backdrop-filter .25s}
/* 헤더 래퍼(#gf-header)도 sticky — 래퍼가 static이면 sticky 헤더가 스크롤 시 사라짐 */
#gf-header{position:relative;z-index:50}
.gf-header-in{max-width:92.5rem;margin:0 auto;padding:0 1.5rem;height:4.25rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.gf-header.on-dark{background:transparent;border-bottom-color:transparent}
/* 히어로 · 영상을 지나면 흰 배경 */
.gf-header.solid{background:rgba(255,255,255,.95);backdrop-filter:blur(.75rem);border-bottom-color:var(--line)}
.gf-header.on-dark ~ .hero-full ~ * {}
.gf-logo{display:flex;align-items:center;gap:.75rem}
.gf-logo img{height:1.875rem;width:auto;display:block}
.gf-logo .logo-dark{display:none}
.gf-header.on-dark .logo-dark{display:block}
.gf-header.on-dark .logo-light{display:none}
.gf-header.on-dark .gf-logo-tx{color:#fff}
.gf-nav{display:flex;gap:3rem}
.gf-nav-link{font-size:1rem;font-weight:600;color:var(--sub);position:relative;padding:.375rem 0;transition:color .2s}
.gf-nav-link:hover{color:var(--ink)}
.gf-nav-link.active{color:var(--ink);font-weight:600}
.gf-nav-link.active::after{content:'';position:absolute;left:0;right:0;bottom:-.125rem;height:.125rem;background:currentColor;border-radius:.125rem}
.gf-header.on-dark .gf-nav-link{color:rgba(255,255,255,.72)}
.gf-header.on-dark .gf-nav-link:hover,.gf-header.on-dark .gf-nav-link.active{color:#fff}
.gf-cta-sm{display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:#fff;font-size:1rem;font-weight:600;padding:.625rem 1.25rem;border-radius:6.25rem;transition:all .2s}
.gf-cta-sm:hover{background:var(--blue-deep)}
.gf-header.on-dark .gf-cta-sm{background:#fff;color:var(--ink)}
.gf-burger{display:none;background:none;border:none;font-size:1.375rem;color:inherit;cursor:pointer;width:2.75rem;height:2.75rem}
@media(max-width:60rem){.gf-nav{display:none}.gf-cta-sm{display:none}.gf-burger{display:block;color:var(--ink)}.gf-header.on-dark .gf-burger{color:#fff}}

/* 모바일 메뉴 */
.gf-mmenu{position:fixed;inset:0;z-index:60;background:#0a0a0a;color:#fff;transform:translateX(100%);transition:transform .3s;display:flex;flex-direction:column}
.gf-mmenu.open{transform:translateX(0)}
.gf-mmenu-top{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;font-weight:600;font-size:1.125rem}
.gf-mmenu-top button{background:none;border:none;color:#fff;font-size:1.625rem;width:2.75rem;height:2.75rem;cursor:pointer}
.gf-mmenu-links{flex:1;padding:.5rem 2rem;display:flex;flex-direction:column;font-weight:600;font-size:1.375rem}
.gf-mmenu-links a{padding:1.125rem 0;border-bottom:.0625rem solid rgba(255,255,255,.12)}
.gf-mmenu-links a.accent{color:var(--blue-bright)}
.gf-mmenu-foot{padding:1.5rem 2rem;font-size:.875rem;color:rgba(255,255,255,.6)}

/* ===== 블랙 히어로 ===== */
.hero-full{position:relative;min-height:100vh;background:#0a0a0a;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:0 1.5rem 10vh;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.55}
.hero-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.64) 12%,rgba(10,10,10,0));z-index:1}
.hero-full .hero-kicker{position:relative;z-index:2;font-size:.8125rem;letter-spacing:.25rem;font-weight:600;color:var(--blue-bright);margin-bottom:1.125rem;text-transform:uppercase}
.hero-full h1{position:relative;z-index:2;font-size:clamp(2.3rem,6.8vw,5.8rem);font-weight:700;line-height:1.2;letter-spacing:0;text-transform:uppercase}
.hero-full h1 em{font-style:normal;color:var(--blue-bright)}
.hero-full .hero-sub{position:relative;z-index:2;margin-top:1.625rem;font-size:clamp(.875rem,1.5vw,1.125rem);color:rgba(255,255,255,.75);line-height:1.7;font-weight:500}
.hero-full .hero-ctas{position:relative;z-index:2;margin-top:2.125rem;display:flex;gap:.875rem;flex-wrap:wrap}
.hero-full .hbtn{display:inline-flex;align-items:center;gap:.625rem;padding:1rem 2rem;border-radius:6.25rem;font-weight:600;font-size:.9375rem;transition:all .2s}
.hero-full .hbtn.w{background:#fff;color:#0a0a0a}.hero-full .hbtn.w:hover{transform:translateY(-.125rem)}
.hero-full .hbtn.o{border:.0938rem solid rgba(255,255,255,.4);color:#fff}.hero-full .hbtn.o:hover{border-color:#fff}
.hero-scroll{position:absolute;bottom:1.75rem;right:1.5rem;font-size:.6875rem;letter-spacing:.1875rem;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:.625rem}
.hero-scroll .ln{display:inline-block;width:.0625rem;height:2.75rem;background:linear-gradient(to bottom,rgba(255,255,255,.6),transparent);animation:gfdrop 1.8s infinite}
@keyframes gfdrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 히어로 위 헤더 대응: 페이지 최상단 히어로가 있으면 헤더를 absolute로 */

/* ===== 페이지 헤드 (서브페이지 블랙 영상 히어로) ===== */
.pagehead-video{min-height:44vh;justify-content:center;padding:7rem 1.5rem 3.5rem}
/* 상단 헤더 영역 대비 강화: 영상이 밝은 컷에서도 메뉴(흰 글씨)가 보이도록 상단 그라데이션 추가 */
.pagehead-video::before{content:"";position:absolute;inset:0 0 auto 0;height:9.375rem;background:linear-gradient(to bottom,rgba(10,10,10,.45),rgba(10,10,10,0));z-index:1;pointer-events:none}
.pagehead-video .gf-pagehead-in{max-width:92.5rem;margin:0 auto;position:relative;z-index:2}
.gf-kicker{font-size:.75rem;letter-spacing:.25rem;font-weight:600;color:var(--blue-bright);display:block;margin-bottom:.875rem}
/* 서브페이지 머리 문구: 메인 히어로의 거대 제목(7.25rem · 대문자 · 자간 -.1563rem)을 물려받지 않게 따로 잡는다 */
.pagehead-video h1{font-size:clamp(1.7rem,4vw,3rem);font-weight:700;letter-spacing:0;line-height:1.2;text-transform:none}
.pagehead-video p{margin-top:1.125rem;color:rgba(255,255,255,.8);font-size:clamp(.9375rem,1.3vw,1.0625rem);line-height:1.8;letter-spacing:-.0125rem;font-weight:500}
.pagehead-video .gf-kicker{letter-spacing:.1875rem}

/* ===== 본문 공통 (흰 바탕 + 검정 텍스트) ===== */
.gf-sec{padding:6.25rem 1.5rem}
.gf-sec.gray{background:#f7f8fa}
.gf-sec-in{max-width:92.5rem;margin:0 auto}
.gf-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:.125rem solid var(--ink);padding-bottom:1rem;margin-bottom:3rem}
.gf-sec-head h2{font-size:clamp(1.5rem,3.6vw,2.5rem);font-weight:700;letter-spacing:-.0625rem}
.gf-sec-head .en{font-size:.75rem;letter-spacing:.1875rem;font-weight:600;color:#9aa2ad}
.gf-blue{color:var(--blue)}

/* 카드 */
.gf-grid{display:grid;gap:1.375rem;list-style:none}
.gf-grid.g2{grid-template-columns:repeat(2,1fr)}
.gf-grid.g3{grid-template-columns:repeat(3,1fr)}
.gf-grid.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:60rem){.gf-grid.g3,.gf-grid.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:40rem){.gf-grid.g2,.gf-grid.g3,.gf-grid.g4{grid-template-columns:1fr}}
.gf-card{background:#fff;border:.0938rem solid var(--line);border-radius:1.25rem;padding:2rem 1.625rem;transition:all .25s;position:relative}
.gf-card:hover{border-color:var(--ink);transform:translateY(-.3125rem);box-shadow:0 1.125rem 2.5rem rgba(10,10,10,.08)}
.gf-card .ico{width:3.25rem;height:3.25rem;border-radius:.875rem;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1.375rem;margin-bottom:1.125rem}
.gf-card h3{font-size:1.1875rem;font-weight:700;margin-bottom:.625rem;letter-spacing:-.025rem}
.gf-card p{font-size:.875rem;line-height:1.7;color:var(--sub)}
.gf-card .num{font-size:.75rem;font-weight:600;color:var(--blue);letter-spacing:.125rem;margin-bottom:.75rem;display:block}

/* 숫자 지표 */
.gf-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;text-align:center}
@media(max-width:47.5rem){.gf-facts{grid-template-columns:repeat(2,1fr)}}
.gf-facts .f b{display:block;font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700;letter-spacing:-.0625rem;color:var(--ink)}
.gf-facts .f b .en{color:var(--blue)}
.gf-facts .f small{font-size:.8125rem;color:var(--sub);font-weight:600}

/* 블랙 밴드 섹션 */
.gf-band{background:#0a0a0a;color:#fff;padding:6.25rem 1.5rem}
.gf-band-in{max-width:92.5rem;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:3.5rem;align-items:center}
@media(max-width:53.75rem){.gf-band-in{grid-template-columns:1fr}}
.gf-band h2,.gf-band h3{font-size:clamp(1.75rem,4vw,3rem);font-weight:700;letter-spacing:-.0938rem;line-height:1.08;text-transform:uppercase}
.gf-band h2 em,.gf-band h3 em{font-style:normal;color:var(--blue-bright)}
.gf-band p{margin-top:1.375rem;color:rgba(255,255,255,.65);font-size:.9375rem;line-height:1.8}
.gf-chips{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.625rem}
.gf-chip{border:.0625rem solid rgba(255,255,255,.28);border-radius:6.25rem;padding:.5625rem 1.125rem;font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.85)}

/* CTA */
.gf-cta-sec{text-align:center;padding:7.5rem 1.5rem;background:#fff}
.gf-cta-sec h2{font-size:clamp(1.875rem,5.5vw,4rem);font-weight:700;letter-spacing:-.125rem;line-height:1.05;text-transform:uppercase}
.gf-cta-sec h2 em{font-style:normal;color:var(--blue)}
.gf-cta-sec p{margin:1.375rem auto 2.25rem;color:var(--sub);font-size:1rem;line-height:1.8}
.gf-btns{display:flex;gap:.875rem;justify-content:center;flex-wrap:wrap}
.gf-btn{display:inline-flex;align-items:center;gap:.625rem;padding:1rem 2.125rem;border-radius:6.25rem;font-weight:600;font-size:.9375rem;transition:all .2s}
.gf-btn.dark{background:var(--ink);color:#fff}.gf-btn.dark:hover{background:var(--blue-deep);transform:translateY(-.125rem)}
.gf-btn.line{border:.0938rem solid var(--ink);color:var(--ink)}.gf-btn.line:hover{background:var(--ink);color:#fff}
.gf-btn.blue{background:var(--blue);color:#fff}.gf-btn.blue:hover{background:var(--blue-deep);transform:translateY(-.125rem)}

/* 리스트형 행 (뉴스/채용) */
.gf-row{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.375rem;border:.0938rem solid var(--line);border-radius:1rem;background:#fff;transition:all .2s;margin-bottom:.75rem}
.gf-row:hover{border-color:var(--ink)}
.gf-row .tag{flex-shrink:0;font-size:.6875rem;font-weight:600;color:var(--blue);background:var(--blue-soft);border-radius:6.25rem;padding:.375rem .8125rem}
.gf-row .tx{flex:1;font-weight:600;font-size:.9063rem}
.gf-row .dt{font-size:.75rem;color:#9aa2ad}
@media(max-width:40rem){.gf-row .dt{display:none}}

/* 폼 */
.gf-form{background:#fff;border:.0938rem solid var(--line);border-radius:1.5rem;padding:2.5rem}
.gf-form h3{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}
.gf-form .fm-sub{color:var(--sub);font-size:.875rem;margin-bottom:1.75rem}
.gf-form label{display:block;font-size:.75rem;font-weight:600;color:var(--sub);margin-bottom:.4375rem}
.gf-form input,.gf-form select,.gf-form textarea{width:100%;border:.0938rem solid var(--line);border-radius:.75rem;padding:.8125rem .9375rem;font-size:.875rem;font-family:inherit;margin-bottom:1rem;transition:border-color .2s;background:#fff}
.gf-form input:focus,.gf-form select:focus,.gf-form textarea:focus{outline:none;border-color:var(--blue)}
.gf-form .frow{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:40rem){.gf-form .frow{grid-template-columns:1fr}}
.gf-form .submit{width:100%;background:var(--ink);color:#fff;border:none;border-radius:6.25rem;padding:1rem;font-weight:600;font-size:.9375rem;cursor:pointer;transition:background .2s}
.gf-form .submit:hover{background:var(--blue-deep)}

/* 연혁 타임라인 */
.gf-tl{width:100%}
.gf-tl .row{display:flex;gap:1.75rem;align-items:flex-start;padding-bottom:1.75rem;border-bottom:.0625rem solid var(--line);margin-bottom:1.75rem}
.gf-tl .yr{flex-shrink:0;width:6rem;font-weight:700;font-size:1.25rem;color:var(--blue)}
.gf-tl .row p.t{font-weight:600;font-size:1rem}
.gf-tl .row p.d{color:var(--sub);font-size:.875rem;margin-top:.25rem;line-height:1.6}

/* 푸터 */
.gf-footer{background:#0a0a0a;color:rgba(255,255,255,.55);padding:3.75rem 1.5rem 2.5rem;font-size:.8125rem;line-height:2}
.gf-footer-in{max-width:92.5rem;margin:0 auto}
.gf-footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1.875rem;flex-wrap:wrap;border-bottom:.0625rem solid rgba(255,255,255,.12);padding-bottom:1.875rem;margin-bottom:1.625rem}
.gf-footer-brand .en{font-size:1.375rem;font-weight:700;color:#fff}
.gf-footer-brand .en em{font-style:normal;color:var(--blue-bright)}
.gf-footer-brand p{font-size:.7813rem;margin-top:.375rem}
.gf-footer-links{display:flex;gap:1.375rem;font-size:.8125rem;font-weight:600}
.gf-footer-links a:hover{color:#fff}
.gf-footer-links .strong{color:rgba(255,255,255,.85);font-weight:600}
.gf-footer-legal p{margin:0}
.gf-footer-legal .copy{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.625rem;color:rgba(255,255,255,.35);margin-top:.625rem}

/* 갤러리 */
.gf-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1.125rem}
.gf-gal-item{position:relative;border-radius:1.125rem;overflow:hidden;background:#e9ecf0;aspect-ratio:4/3;margin:0}
.gf-gal-item.big{grid-column:span 3;aspect-ratio:21/9}
.gf-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gf-gal-item:hover img{transform:scale(1.04)}
.gf-gal-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:.875rem 1.125rem;background:linear-gradient(to top,rgba(0,0,0,.65),transparent);color:#fff;font-size:.8125rem;font-weight:600}
@media(max-width:47.5rem){.gf-gal{grid-template-columns:repeat(2,1fr)}.gf-gal-item.big{grid-column:span 2;aspect-ratio:16/9}}

/* 히어로 이미지 변형 (이미지 배경 히어로) */
.hero-img{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-img img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-img .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.68),rgba(0,0,0,.12))}
.hero-img .hero-img-in{position:relative;z-index:2;padding:3.5rem 1.5rem;width:100%;max-width:92.5rem;margin:0 auto;color:#fff}
.hero-img h2{font-size:clamp(1.75rem,4.5vw,3.5rem);font-weight:700;letter-spacing:-.0938rem;line-height:1.05}
.hero-img p{margin-top:1rem;color:rgba(255,255,255,.8);line-height:1.7}

/* 제품 4타일 */
.gf-prod{display:grid;grid-template-columns:repeat(4,1fr);gap:1.125rem}
.gf-prod figure{margin:0;border-radius:1.125rem;overflow:hidden;position:relative;aspect-ratio:1}
.gf-prod img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gf-prod figure:hover img{transform:scale(1.05)}
.gf-prod figcaption{position:absolute;left:0;right:0;bottom:0;padding:.75rem 1rem;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);color:#fff;font-size:.8438rem;font-weight:600}
@media(max-width:53.75rem){.gf-prod{grid-template-columns:repeat(2,1fr)}}

/* 사업영역: 동별 사진 목록 */
.gf-bld{display:grid;grid-template-columns:repeat(3,1fr);gap:1.375rem}
.gf-bld figure{margin:0;border-radius:1.125rem;overflow:hidden;border:.0938rem solid var(--line);background:#fff}
.gf-bld img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.gf-bld figcaption{padding:1.125rem 1.25rem 1.25rem;font-size:.9375rem;font-weight:600;letter-spacing:-.0187rem}
.gf-bld figcaption b{display:inline-block;color:var(--blue);margin-right:.5rem}
.gf-bld figcaption span{display:block;margin-top:.375rem;font-size:.8438rem;font-weight:500;color:var(--sub);line-height:1.65}
@media(max-width:60rem){.gf-bld{grid-template-columns:repeat(2,1fr)}}
@media(max-width:40rem){.gf-bld{grid-template-columns:1fr}}

/* 사업영역: 공정 순서 */
.gf-steps{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;counter-reset:step}
.gf-steps li{background:#fff;border:.0938rem solid var(--line);border-radius:1.125rem;padding:1.5rem 1.25rem;min-height:10.625rem}
.gf-steps li>.en{display:block;font-size:.75rem;letter-spacing:.1875rem;font-weight:600;color:var(--blue);margin-bottom:.875rem}
.gf-steps h3{font-size:1rem;font-weight:700;letter-spacing:-.025rem;margin-bottom:.5rem}
.gf-steps p{font-size:.8438rem;line-height:1.65;color:var(--sub)}
@media(max-width:68.75rem){.gf-steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:40rem){.gf-steps{grid-template-columns:repeat(2,1fr)}}

/* 가로형 브랜드 배너(1400×990) · 설비 4열 */
/* 배너 그림 안에 이미 문구가 있으므로 설명은 그림 아래에 */
.gf-prod.wide figure{aspect-ratio:auto;border:.0938rem solid var(--line);background:#fff}
.gf-prod.wide img{aspect-ratio:1400/990;height:auto}
.gf-prod.wide figure:hover img{transform:none}
.gf-prod.wide figcaption{position:static;background:none;color:var(--ink);padding:.75rem 1rem .875rem;font-size:.875rem}
.gf-gal.eq{grid-template-columns:repeat(4,1fr)}
@media(max-width:60rem){.gf-gal.eq{grid-template-columns:repeat(2,1fr)}}
.hero-img .gf-kicker{margin-bottom:.625rem}

/* 블랙 밴드 안 정의 목록 */
.gf-plain{list-style:none;display:flex;flex-direction:column;gap:.875rem}
.gf-plain li{border-top:.0625rem solid rgba(255,255,255,.14);padding-top:.875rem}
.gf-plain b{display:block;font-size:.75rem;letter-spacing:.125rem;color:var(--blue-bright);margin-bottom:.25rem}
.gf-plain span{font-size:.9375rem;color:rgba(255,255,255,.85);line-height:1.7}

/* ===== 공통 유틸 (인라인 style 대신 쓰는 클래스) ===== */
/* 본문 바로가기 (키보드 · 스크린리더) */
.skip{position:absolute;left:-624.9375rem;top:0;z-index:100;background:var(--ink);color:#fff;padding:.75rem 1.125rem;font-weight:600;border-radius:0 0 .75rem 0}
.skip:focus{left:0}
/* 나타나는 순서 지연 */
.d1{transition-delay:.05s}.d2{transition-delay:.1s}.d3{transition-delay:.15s}.d4{transition-delay:.2s}.d5{transition-delay:.25s}.d6{transition-delay:.3s}
.d7{transition-delay:.35s}.d8{transition-delay:.4s}.d9{transition-delay:.45s}.d10{transition-delay:.5s}.d11{transition-delay:.55s}.d12{transition-delay:.6s}
.d13{transition-delay:.65s}.d14{transition-delay:.7s}.d15{transition-delay:.75s}.d16{transition-delay:.8s}
/* 섹션 머리 아래 안내 문장 */
.sec-lead{color:var(--sub);margin:-1.75rem 0 2.5rem;line-height:1.8}
/* 주석 · 안내 */
.note{font-size:.75rem;color:#9aa2ad;margin-top:1.25rem;line-height:1.7}
.note.center{text-align:center;margin-top:.5rem}
.note.tiny{font-size:.6875rem;margin-top:1.5rem;text-align:center}
/* 버튼 줄 정렬 */
.gf-btns.left{justify-content:flex-start;margin-top:1.75rem}
.gf-btn.white{background:#fff;color:#0a0a0a}
.hero-img .gf-btn{margin-top:1.5rem}
.gf-band .gf-btn.start{justify-self:start}
/* 카드 변형 */
.gf-card.pad-lg{padding:2.75rem 2.5rem}
.gf-card.pad-lg h3{font-size:1.5rem}
.gf-card.pad-lg .body{line-height:2;margin-top:.875rem}
.gf-card.pad-lg .sign{margin-top:1.25rem;font-weight:600}
.gf-card.pad-md{padding:1.75rem 2rem;margin-top:1.375rem}
.gf-card.pad-md p,.gf-card.pad-lg p{max-width:none}
.gf-card.info{margin:0;display:grid;grid-template-columns:8.75rem 1fr;gap:1.25rem;align-items:center;padding:1.375rem}
.gf-card.info img{border-radius:.75rem}
.gf-card .num.big{font-size:1.625rem}
.gf-card h3.sm{font-size:1rem}
.gf-grid.center{text-align:center}
.gf-grid.mt{margin-top:1.375rem}
.ico-l{margin-right:.5rem}
/* 블랙 밴드 변형 */
.gf-band-in.center{text-align:center;display:block}
.gf-band-in.center p{margin:1.125rem auto 1.75rem}
.gf-band figure{margin:0}
.gf-band figure img{border-radius:1.25rem;width:100%}
.gf-band .gf-kicker{margin-bottom:.625rem}
/* 목록형 행 변형 (채용) */
.gf-row .tx.col{display:flex;flex-direction:column;gap:.125rem}
.gf-row .tx .sub{font-weight:500;color:#9aa2ad;font-size:.75rem}
/* 갤러리 */
.gf-gal-item.mb{margin-bottom:1.75rem}
/* 폼 완료 메시지 */
.gf-form .done{display:none;text-align:center;padding:2.25rem 0}
.gf-form .done.show{display:block}
.gf-form.sent form{display:none}
.gf-form .done .ok{width:4rem;height:4rem;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 1rem}
.gf-form .done .t{font-weight:600}
.gf-form .done .d{color:var(--sub);font-size:.875rem;margin-top:.25rem}
/* 연혁 목록 */
.gf-tl{list-style:none}
/* 헤더 · 푸터 로고 */
.gf-mmenu-top img{height:1.375rem}
.gf-footer-brand img{height:1.5rem}
.gf-footer address{font-style:normal}
/* 히어로 제목 포인트 */
.hero-img h2 em{font-style:normal;color:var(--blue-bright)}

/* reveal */
.reveal{opacity:0;transform:translateY(1.5rem);transition:all .6s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===== 콘텐츠 폭: 모든 블록이 1480px(92.5rem) 끝에서 끝까지 ===== */
/* 메인 히어로 안의 글 · 버튼도 1480px 틀에 맞춘다 (영상 · 그라데이션 · SCROLL 표시는 제외) */
.hero-full>:not(.hero-video):not(.hero-ov):not(.hero-scroll){width:100%;max-width:92.5rem;margin-left:auto;margin-right:auto}
.gf-cta-sec>*{width:100%;max-width:92.5rem;margin-left:auto;margin-right:auto}
.gf-cta-sec p{margin-top:1.375rem;margin-bottom:2.25rem}

/* ===== 메인 페이지 (레퍼런스형: 흰 · 옅은 회색 바탕, 큰 검정 제목, 둥근 판, 스크롤 연출) =====
   블루는 헤더 「파트너 지원」 버튼 한 곳만 쓴다. 나머지는 검정 · 회색 */
:root{--m-gray:#f4f5f7;--m-r:1.75rem}
.gf-header.solid .gf-cta-sm{background:var(--blue)}
.gf-header.solid .gf-cta-sm:hover{background:var(--blue-deep)}

/* 히어로: 작은 문장 + 화면 폭만큼 큰 영문 회사명 */
.m-hero{padding-bottom:7vh}
.m-hero .hero-video{opacity:.7}
.m-hero .hero-ov{background:linear-gradient(to top,rgba(10,10,10,.7) 8%,rgba(10,10,10,0) 60%)}
.m-hero-title{position:relative;z-index:2;display:flex;flex-direction:column;gap:.5rem;letter-spacing:0;line-height:1.2}
.m-hero-title .sm{font-size:clamp(1.125rem,2vw,1.625rem);font-weight:600}
.m-hero-title .xl{font-size:clamp(3.25rem,13vw,12.5rem);font-weight:700}
.m-hero .hero-ctas{margin-top:2.5rem}

/* 소개: 가운데 문장 + 흩어져 떠 있는 둥근 사진 */
.m-float{position:relative;height:240vh;background:#fff}
.m-float-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0 1.5rem}
.m-float-text{position:relative;z-index:2;max-width:46rem;text-align:center;font-size:clamp(1.5rem,3.2vw,2.75rem);font-weight:700;line-height:1.45;letter-spacing:-.02em;word-break:keep-all}
.m-float-text .w{color:#c9cdd3;transition:color .35s}
.m-float-text .w.on{color:var(--ink)}
.m-fc{position:absolute;margin:0;z-index:1;opacity:0;transform:translateY(calc(var(--y,0vh) + 3rem));transition:opacity .8s ease,transform .25s linear}
.m-fc.in{opacity:1;transform:translateY(var(--y,0vh))}
.m-fc img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1.25rem;box-shadow:0 1.5rem 3rem rgba(10,10,10,.12)}
.m-fc figcaption{position:absolute;white-space:nowrap;padding:.625rem 1rem;border-radius:.875rem;background:rgba(255,255,255,.82);backdrop-filter:blur(.75rem);-webkit-backdrop-filter:blur(.75rem);border:.0625rem solid rgba(10,10,10,.06);box-shadow:0 .75rem 2rem rgba(10,10,10,.1);font-size:.875rem;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.m-fc.c1{top:9%;left:4%;width:17rem;aspect-ratio:16/9}
.m-fc.c1 figcaption{right:-2.5rem;bottom:-1.25rem}
.m-fc.c2{top:5%;right:7%;width:12rem;aspect-ratio:1}
.m-fc.c2 figcaption{left:-3rem;bottom:1rem}
.m-fc.c3{bottom:13%;left:9%;width:13rem;aspect-ratio:4/3}
.m-fc.c3 figcaption{right:-3.5rem;top:-1rem}
.m-fc.c4{bottom:8%;right:4%;width:16rem;aspect-ratio:16/9}
.m-fc.c4 figcaption{left:-3rem;top:-1.25rem}
.m-fc.c5{bottom:-2%;left:41%;width:12rem;aspect-ratio:4/3}
@media(max-width:60rem){
  .m-fc.c1{width:10rem;left:3%}.m-fc.c2{width:7rem}.m-fc.c3{width:8rem;left:4%}.m-fc.c4{width:10rem}.m-fc.c5{display:none}
  .m-fc figcaption{font-size:.75rem;padding:.5rem .75rem}
  .m-fc.c1 figcaption{right:-1rem}.m-fc.c2 figcaption{left:-2rem}.m-fc.c3 figcaption{right:-2rem}.m-fc.c4 figcaption{left:-1.5rem}
}

/* 섹션 공통: 가운데 작은 영문 + 큰 제목 */
.m-sec{padding:8rem 1.5rem;background:#fff}
.m-sec.gray{background:var(--m-gray)}
.m-sec.tight{padding-top:0;padding-bottom:0}
.m-head{text-align:center;margin-bottom:3.5rem}
.m-head .en{display:block;font-size:.875rem;font-weight:600;color:var(--ink);margin-bottom:1rem}
.m-head h2{font-size:clamp(1.75rem,3.4vw,2.75rem);font-weight:700;line-height:1.35;letter-spacing:-.02em;word-break:keep-all}

/* 누구에게: 큰 둥근 판 두 장 */
.m-pick{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.m-pick-card{position:relative;display:flex;flex-direction:column;background:var(--m-gray);border-radius:var(--m-r);overflow:hidden;transition:transform .3s,box-shadow .3s}
.m-pick-card img,.m-pick-card video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#e9ecef;transition:transform .6s}
.m-pick-card .tx{padding:2rem 6rem 2.25rem 2.25rem}
.m-pick-card h3{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.5rem}
.m-pick-card p{color:var(--sub);font-size:1rem;line-height:1.6}
.m-pick-card .go{position:absolute;right:2rem;bottom:2.25rem;width:3rem;height:3rem;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .3s}
.m-pick-card:hover{box-shadow:0 1.5rem 3rem rgba(10,10,10,.08)}
.m-pick-card:hover img,.m-pick-card:hover video{transform:scale(1.04)}
.m-pick-card:hover .go{transform:translateX(.25rem)}
@media(max-width:47.5rem){.m-pick{grid-template-columns:1fr}.m-pick-card .tx{padding:1.5rem 5rem 1.75rem 1.5rem}.m-pick-card .go{right:1.5rem;bottom:1.75rem}}

/* 캠퍼스: 둥근 큰 사진 판 */
.m-media-wrap{padding:0 1.5rem 8rem;background:#fff}
.m-media{position:relative;max-width:92.5rem;margin:0 auto;min-height:72vh;border-radius:var(--m-r);overflow:hidden;display:flex;align-items:flex-end;color:#fff}
.m-media img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-media .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.2) 55%,rgba(0,0,0,0) 80%),linear-gradient(to right,rgba(0,0,0,.35),rgba(0,0,0,0) 60%)}
.m-media-in{position:relative;z-index:2;padding:3.5rem}
.m-media h2{font-size:clamp(1.75rem,3.6vw,3rem);font-weight:700;letter-spacing:-.02em;line-height:1.25}
.m-media p{margin-top:1rem;max-width:40rem;color:rgba(255,255,255,.85);line-height:1.7}
.m-media .gf-btn{margin-top:1.75rem}
@media(max-width:47.5rem){.m-media{min-height:60vh}.m-media-in{padding:1.75rem}}

/* 4대 서비스: 겹쳐 있다가 부채꼴로 펼쳐지는 카드 */
.m-fan{list-style:none;display:flex;justify-content:center;padding:1rem 0 2rem}
.m-fan li{position:relative;flex:0 1 19rem;margin:0 -.75rem;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.m-fan li:nth-child(1){transform:translateX(150%)}
.m-fan li:nth-child(2){transform:translateX(50%)}
.m-fan li:nth-child(3){transform:translateX(-50%)}
.m-fan li:nth-child(4){transform:translateX(-150%)}
.m-fan.open li:nth-child(1){transform:rotate(-6deg) translateY(1.5rem)}
.m-fan.open li:nth-child(2){transform:rotate(-2deg)}
.m-fan.open li:nth-child(3){transform:rotate(2deg)}
.m-fan.open li:nth-child(4){transform:rotate(6deg) translateY(1.5rem)}
.m-fan.open li:hover,.m-fan.open li:focus-within{transform:rotate(0) translateY(-.75rem);z-index:2}
.m-fan-card{display:flex;flex-direction:column;height:100%;padding:1rem 1rem 1.75rem;background:#fff;border-radius:1.5rem;box-shadow:0 1.25rem 3rem rgba(10,10,10,.08);border:.0625rem solid rgba(10,10,10,.05)}
.m-fan-card .pic{display:block;aspect-ratio:4/3;border-radius:1rem;overflow:hidden;background:#eceef1;margin-bottom:1.5rem}
.m-fan-card .pic img{display:block;width:100%;height:100%;object-fit:cover}
.m-fan-card .pic.phone img{width:64%;height:auto;margin:1.25rem auto 0;border-radius:.75rem .75rem 0 0;box-shadow:0 .5rem 1.5rem rgba(10,10,10,.12)}
.m-fan-card .num{padding:0 1rem;font-size:.875rem;font-weight:600;color:var(--sub);line-height:1}
.m-fan-card h3{padding:0 1rem;margin-top:.75rem;font-size:1.375rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.625rem}
.m-fan-card p{padding:0 1rem;font-size:.9375rem;line-height:1.65;color:var(--sub);word-break:keep-all}
@media(max-width:60rem){
  .m-fan{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:0}
  .m-fan li,.m-fan.open li,.m-fan li:nth-child(n),.m-fan.open li:nth-child(n){margin:0;transform:none}
  .m-fan-card{height:100%}
}
@media(max-width:40rem){.m-fan{grid-template-columns:1fr}}

/* 숫자 지표: 큰 숫자, 가는 구분선 */
.m-facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:.0625rem solid var(--ink)}
.m-facts>div{padding:2rem 1.5rem 0;border-left:.0625rem solid var(--line)}
.m-facts>div:first-child{border-left:0;padding-left:0}
.m-facts dt{font-size:1rem;font-weight:600;color:var(--sub)}
.m-facts dd{margin-top:1.5rem;font-size:clamp(3rem,6vw,5.5rem);font-weight:700;letter-spacing:-.04em;line-height:1}
.m-facts dd span{font-size:.6em}
@media(max-width:47.5rem){.m-facts{grid-template-columns:1fr 1fr}.m-facts>div{padding:1.5rem 1rem}.m-facts>div:nth-child(3){border-left:0;padding-left:0}.m-facts>div:nth-child(n+3){border-top:.0625rem solid var(--line)}}

/* 밸런스키트: 회색 둥근 판 안에 사진 + 설명 + 체크 목록 */
.m-panel{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;background:var(--m-gray);border-radius:var(--m-r);padding:3rem}
.m-panel figure{margin:0}
.m-panel figure img{display:block;width:100%;border-radius:1.25rem}
.m-pill{display:inline-block;background:var(--ink);color:#fff;font-size:.8125rem;font-weight:600;padding:.375rem .875rem;border-radius:6.25rem}
.m-panel h2{margin-top:1.25rem;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;line-height:1.35;letter-spacing:-.02em}
.m-panel-tx>p{margin-top:1.25rem;color:var(--sub);line-height:1.75;word-break:keep-all}
.m-checks{list-style:none;margin-top:2rem}
.m-checks li{position:relative;padding:1rem 0 1rem 2.25rem;border-top:.0625rem solid #dfe2e6;font-weight:600}
.m-checks li:last-child{border-bottom:.0625rem solid #dfe2e6}
.m-checks li::before{content:"";position:absolute;left:0;top:50%;width:1.25rem;height:1.25rem;margin-top:-.625rem;border-radius:.3125rem;background:var(--ink)}
.m-checks li::after{content:"";position:absolute;left:.4375rem;top:50%;width:.3125rem;height:.625rem;margin-top:-.4375rem;border:solid #fff;border-width:0 .125rem .125rem 0;transform:rotate(45deg)}
@media(max-width:53.75rem){.m-panel{grid-template-columns:1fr;gap:2rem;padding:1.5rem}}

/* 라인업: 둥근 사진 + 아래 이름 */
.m-prod{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.m-prod figure{margin:0}
.m-prod img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:1.25rem;transition:transform .5s}
.m-prod figure:hover img{transform:translateY(-.375rem)}
.m-prod figcaption{margin-top:1rem;font-size:.9375rem;color:var(--sub)}
.m-prod figcaption b{display:block;font-size:1.125rem;font-weight:600;color:var(--ink);margin-bottom:.25rem;letter-spacing:-.02em}
@media(max-width:53.75rem){.m-prod{grid-template-columns:1fr 1fr}}

/* 문의: 회색 둥근 판 */
.m-cta{padding:0 1.5rem 8rem;background:#fff}
.m-cta-in{max-width:92.5rem;margin:0 auto;text-align:center;background:var(--m-gray);border-radius:var(--m-r);padding:6rem 1.5rem}
.m-cta h2{font-size:clamp(2rem,5vw,4rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.m-cta p{margin:1.375rem auto 2.25rem;color:var(--sub);line-height:1.8;word-break:keep-all}

/* 키보드 초점 표시 */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:.1875rem solid var(--ink);outline-offset:.25rem}
.m-hero a:focus-visible,.m-media a:focus-visible{outline-color:#fff}

@media(prefers-reduced-motion:reduce){
  .m-float{height:auto}.m-float-stage{position:relative;height:auto;min-height:100vh}
  .m-fc,.m-fc.in{opacity:1;transform:none;transition:none}
  .m-fan li,.m-fan.open li{transition:none}
}

/* ===== 서브페이지 (메인과 같은 컨셉: 흰 · 옅은 회색 바탕, 둥근 판, 제목 700 · 나머지 600 이하) ===== */
/* 첫 화면: 왼쪽 제목 · 설명, 오른쪽 둥근 사진 */
.s-hero{padding:9rem 1.5rem 4rem;background:#fff}
.s-hero-in{max-width:92.5rem;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.s-hero .en.kick{display:block;font-size:.875rem;font-weight:600;color:var(--sub);margin-bottom:1.25rem}
.s-hero h1{font-size:clamp(2.5rem,5.5vw,4.5rem);font-weight:700;line-height:1.2;letter-spacing:0}
.s-hero p{margin-top:1.5rem;font-size:clamp(1rem,1.4vw,1.1875rem);line-height:1.75;color:var(--sub);word-break:keep-all;max-width:34rem}
.s-hero-media{margin:0;border-radius:var(--m-r);overflow:hidden;aspect-ratio:4/3;background:var(--m-gray)}
.s-hero-media img,.s-hero-media video{display:block;width:100%;height:100%;object-fit:cover;background:var(--m-gray)}
.s-hero-media.phone{display:flex;align-items:flex-end;justify-content:center}
.s-hero-media.phone img{width:46%;height:auto;border-radius:1.25rem 1.25rem 0 0;box-shadow:0 1.5rem 3rem rgba(10,10,10,.15)}
@media(max-width:53.75rem){.s-hero{padding:7rem 1.5rem 2.5rem}.s-hero-in{grid-template-columns:1fr;gap:2rem}.s-hero-media.phone img{width:58%}}

/* 하위 메뉴 탭: 헤더 아래에 붙어 따라온다 */
.s-tabs{position:sticky;top:4.25rem;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(.75rem);-webkit-backdrop-filter:blur(.75rem);border-bottom:.0625rem solid var(--line)}
.s-tabs ul{list-style:none;max-width:92.5rem;margin:0 auto;padding:0 1.5rem;display:flex;gap:2.25rem;overflow-x:auto;scrollbar-width:none}
.s-tabs ul::-webkit-scrollbar{display:none}
.s-tabs a{display:flex;align-items:center;min-height:3.25rem;white-space:nowrap;font-size:1rem;font-weight:500;color:var(--sub);border-bottom:.125rem solid transparent;transition:color .2s,border-color .2s}
.s-tabs a:hover{color:var(--ink)}
.s-tabs a[aria-current="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.page-sub [id]{scroll-margin-top:8rem}

/* 섹션 머리를 왼쪽에 두는 변형 (긴 글 · 2단 구성용) */
.m-head.left{text-align:left}
.m-head p{margin-top:1.25rem;color:var(--sub);line-height:1.8;word-break:keep-all;max-width:46rem}
.m-head:not(.left) p{margin-left:auto;margin-right:auto}

/* 카드 묶음 */
.s-grid{display:grid;gap:1.5rem;list-style:none}
.s-grid.g2{grid-template-columns:repeat(2,1fr)}
.s-grid.g3{grid-template-columns:repeat(3,1fr)}
.s-grid.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:60rem){.s-grid.g3,.s-grid.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:40rem){.s-grid.g2,.s-grid.g3,.s-grid.g4{grid-template-columns:1fr}}
.s-card{display:flex;flex-direction:column;background:var(--m-gray);border-radius:1.5rem;padding:2rem;margin:0}
.m-sec.gray .s-card{background:#fff}
a.s-card{transition:box-shadow .3s,transform .3s}
a.s-card:hover{box-shadow:0 1.25rem 3rem rgba(10,10,10,.08);transform:translateY(-.25rem)}
.s-card .pic{display:block;margin:-1rem -1rem 1.5rem;border-radius:1rem;overflow:hidden;aspect-ratio:16/10;background:#e9ecef}
.s-card .pic img{display:block;width:100%;height:100%;object-fit:cover}
.s-card .pic.contain img{object-fit:contain;background:#fff}
.s-card .num{font-size:.875rem;font-weight:600;color:var(--sub);margin-bottom:.75rem}
.s-card h3{font-size:1.375rem;font-weight:700;letter-spacing:-.02em;line-height:1.4;margin-bottom:.625rem;word-break:keep-all}
.s-card p{font-size:.9375rem;line-height:1.7;color:var(--sub);word-break:keep-all}
.s-card .more{margin-top:auto;padding-top:1.25rem;font-size:.9375rem;font-weight:600;color:var(--ink)}

/* 2단: 글 + 사진 */
.s-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.s-split.rev>figure{order:2}
.s-split figure{margin:0;border-radius:var(--m-r);overflow:hidden;background:var(--m-gray)}
.s-split figure img{display:block;width:100%;height:auto}
.s-split h2{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;line-height:1.35;letter-spacing:-.02em;word-break:keep-all}
.s-split .body{margin-top:1.5rem;color:var(--sub);line-height:1.9;word-break:keep-all}
.s-split .sign{margin-top:1.75rem;font-weight:600;color:var(--ink)}
@media(max-width:53.75rem){.s-split{grid-template-columns:1fr;gap:2rem}.s-split.rev>figure{order:0}}

/* 연혁 */
.s-tl{list-style:none;border-top:.0625rem solid var(--ink)}
.s-tl li{display:grid;grid-template-columns:12rem 1fr;gap:2rem;padding:2rem 0;border-bottom:.0625rem solid var(--line)}
.s-tl .yr{font-size:clamp(1.5rem,2.6vw,2.25rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.s-tl .t{font-size:1.125rem;font-weight:600;line-height:1.5}
.s-tl .d{margin-top:.375rem;color:var(--sub);line-height:1.7}
@media(max-width:40rem){.s-tl li{grid-template-columns:1fr;gap:.5rem}}

/* CI */
.s-ci{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.5rem}
.s-ci figure{margin:0;border-radius:1.5rem;background:var(--m-gray);display:flex;flex-direction:column;justify-content:space-between;min-height:16rem;padding:2rem}
.s-ci figure.dark{background:var(--ink);color:#fff}
.s-ci figure img{display:block;max-width:80%;max-height:6rem;margin:auto}
.s-ci figcaption{font-size:.875rem;font-weight:600;color:var(--sub)}
.s-ci figure.dark figcaption{color:rgba(255,255,255,.7)}
.s-colors{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.5rem;list-style:none}
.s-colors li{border-radius:1.5rem;padding:1.5rem 2rem;min-height:9rem;display:flex;flex-direction:column;justify-content:flex-end;font-weight:600;border:.0625rem solid var(--line)}
.s-colors li span{display:block;font-size:.875rem;font-weight:500;margin-top:.25rem;opacity:.8}
.s-colors .c1{background:#0074E0;color:#fff;border-color:#0074E0}
.s-colors .c2{background:#212426;color:#fff;border-color:#212426}
.s-colors .c3{background:#fff;color:var(--ink)}
@media(max-width:53.75rem){.s-ci{grid-template-columns:1fr}.s-colors{grid-template-columns:1fr}}

/* 정보 목록 (주소 · 표 같은 내용) */
.s-dl{margin-top:1.5rem;border-top:.0625rem solid #dfe2e6}
.s-dl>div{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:1rem 0;border-bottom:.0625rem solid #dfe2e6}
.s-dl dt{font-weight:600}
.s-dl dd{color:var(--sub);line-height:1.6;word-break:keep-all}
.s-link{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;margin-top:1.25rem;font-weight:600;color:var(--ink);border-bottom:.0625rem solid var(--ink)}

/* 공정 단계 */
.s-steps{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.s-steps li{background:#fff;border-radius:1.5rem;padding:1.75rem 1.5rem;min-height:12rem;display:flex;flex-direction:column}
.s-steps .en{font-size:.875rem;font-weight:600;color:var(--sub)}
.s-steps h3{margin-top:auto;font-size:1.125rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.5rem;word-break:keep-all}
.s-steps p{font-size:.875rem;line-height:1.65;color:var(--sub);word-break:keep-all}
@media(max-width:68.75rem){.s-steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:40rem){.s-steps{grid-template-columns:repeat(2,1fr)}}

/* 사진 모음: 둥근 사진 + 아래 설명 */
.s-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem 1.25rem}
.s-gal.g3{grid-template-columns:repeat(3,1fr)}
.s-gal figure{margin:0}
.s-gal img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:1.25rem;background:var(--m-gray)}
.s-gal.wide img{aspect-ratio:1400/990;object-fit:cover}
.s-gal figcaption{margin-top:.875rem;font-size:.9375rem;color:var(--sub);line-height:1.5;word-break:keep-all}
.s-gal figcaption b{display:block;color:var(--ink);font-weight:600;font-size:1rem;margin-bottom:.125rem}
.s-gal .big{grid-column:span 2}
.s-gal .big img{aspect-ratio:auto;height:100%;max-height:30rem}
@media(max-width:60rem){.s-gal,.s-gal.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:40rem){.s-gal,.s-gal.g3{grid-template-columns:1fr}.s-gal .big{grid-column:auto}}

/* 목록 행 (공지 · 채용) */
.s-list{list-style:none;border-top:.0625rem solid var(--ink)}
.s-list li{display:grid;grid-template-columns:7rem 1fr auto;gap:1.5rem;align-items:center;padding:1.5rem 0;border-bottom:.0625rem solid var(--line)}
.s-list .tag{justify-self:start;font-size:.8125rem;font-weight:600;padding:.375rem .875rem;border-radius:6.25rem;background:var(--m-gray);color:var(--ink)}
.s-list .tx{font-size:1.0625rem;font-weight:600;line-height:1.5;word-break:keep-all}
.s-list .tx small{display:block;font-size:.875rem;font-weight:500;color:var(--sub);margin-top:.125rem}
.s-list .dt{font-size:.9375rem;color:var(--sub)}
@media(max-width:40rem){.s-list li{grid-template-columns:1fr;gap:.5rem}}

/* 자주 묻는 질문 */
.s-faq{border-top:.0625rem solid var(--ink)}
.s-faq details{border-bottom:.0625rem solid var(--line)}
.s-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:4.5rem;padding:1rem 0;font-size:1.125rem;font-weight:600;word-break:keep-all}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:"";flex-shrink:0;width:.75rem;height:.75rem;border-right:.125rem solid var(--ink);border-bottom:.125rem solid var(--ink);transform:rotate(45deg) translateY(-.25rem);transition:transform .25s}
.s-faq details[open] summary::after{transform:rotate(-135deg)}
.s-faq details p{padding:0 0 1.5rem;color:var(--sub);line-height:1.8;word-break:keep-all;max-width:56rem}

/* 문의 폼 (메인 컨셉에 맞춘 변형) */
.page-sub .gf-form{border:0;background:#fff;border-radius:var(--m-r);padding:3rem}
.page-sub .gf-form h3{font-weight:700}
.page-sub .gf-form label{font-size:.875rem;font-weight:600;color:var(--ink)}
.page-sub .gf-form input,.page-sub .gf-form select,.page-sub .gf-form textarea{min-height:3rem;font-size:1rem;border-color:#dfe2e6}
.page-sub .gf-form input:focus,.page-sub .gf-form select:focus,.page-sub .gf-form textarea:focus{border-color:var(--ink)}
.page-sub .gf-form .submit{min-height:3.25rem;font-weight:600}
.page-sub .gf-form .submit:hover{background:#333}
.page-sub .gf-form .done .ok{background:var(--m-gray);color:var(--ink)}
@media(max-width:40rem){.page-sub .gf-form{padding:1.75rem 1.25rem}}

/* 서브페이지 보조 클래스 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mt-pill{margin-top:1.25rem}
.mt-lg{margin-top:4rem}
.m-cta.pt{padding-top:8rem}
.m-panel figure.phone-fig{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:4/3;background:#e9ecef;border-radius:1.25rem;overflow:hidden}
.m-panel figure.phone-fig img{width:48%;border-radius:1rem 1rem 0 0;box-shadow:0 1.25rem 2.5rem rgba(10,10,10,.15)}
.m-checks li{font-weight:600}
.m-checks.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0 2rem;margin-top:2.5rem}
.m-checks.cols li:last-child{border-bottom:0}
.m-checks.cols li{border-bottom:.0625rem solid #dfe2e6}
@media(max-width:60rem){.m-checks.cols{grid-template-columns:1fr 1fr}}
@media(max-width:40rem){.m-checks.cols{grid-template-columns:1fr}}
.s-steps.four{grid-template-columns:repeat(4,1fr)}
.s-steps.on-white li,.m-sec:not(.gray) .s-steps li{background:var(--m-gray)}
@media(max-width:60rem){.s-steps.four{grid-template-columns:repeat(2,1fr)}}
.page-sub .gf-form.gray-box{background:var(--m-gray)}
.page-sub .gf-form.gray-box input,.page-sub .gf-form.gray-box select,.page-sub .gf-form.gray-box textarea{background:#fff}
.m-sec.gray .s-list .tag{background:#fff}
.s-card .pic.phone{display:flex;align-items:flex-end;justify-content:center}
.s-card .pic.phone img{width:46%;height:auto;margin-top:1.5rem;border-radius:.875rem .875rem 0 0;box-shadow:0 .75rem 2rem rgba(10,10,10,.15)}
.s-card .pic.small{display:flex;align-items:center;justify-content:center;background:#fff}
.s-card .pic.small img{width:auto;height:auto;max-width:13rem;max-height:90%}
.s-card.wide{padding:3rem;align-items:flex-start}
.s-card.wide h2{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.35}
.s-card.wide p{margin-top:1rem;font-size:1rem;max-width:46rem}
@media(max-width:40rem){.s-card.wide{padding:1.75rem}}
@media(max-width:40rem){.s-dl>div{grid-template-columns:4.5rem 1fr}}

/* 메뉴 7개: 글자가 꺾이지 않게, 좁은 PC 폭에서는 간격을 줄이고 1100px 아래는 햄버거 메뉴 */
.gf-nav-link,.gf-cta-sm{white-space:nowrap}
@media(max-width:90rem){.gf-nav{gap:2rem}}
@media(max-width:68.75rem){.gf-nav{display:none}.gf-cta-sm{display:none}.gf-burger{display:block;color:var(--ink)}.gf-header.on-dark .gf-burger{color:#fff}}

/* ===== 카드 속 카드 없애기 =====
   판 · 카드 안에 또 둥근 상자를 넣지 않는다. 사진은 판 · 카드 가장자리까지 채우고, 판의 둥근 모서리로만 자른다 */
/* 1) 회색 판 + 사진: 사진이 판의 한쪽 절반을 가장자리까지 채운다 */
.m-panel{padding:0;gap:0;overflow:hidden;align-items:stretch}
.m-panel>figure{margin:0;min-height:100%}
.m-panel>figure img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.m-panel-tx{padding:3.5rem}
/* 휴대폰 화면: 상자 없이 판 바닥에서 휴대폰이 올라온다 */
.m-panel>figure.phone-fig{background:none;border-radius:0;aspect-ratio:auto;display:flex;align-items:flex-end;justify-content:center;padding:3.5rem 2rem 0}
.m-panel>figure.phone-fig img{width:min(62%,20rem);height:auto;object-fit:contain;border-radius:1.25rem 1.25rem 0 0;box-shadow:0 1.5rem 3rem rgba(10,10,10,.14)}
@media(max-width:53.75rem){
  .m-panel{gap:0}
  .m-panel>figure img{height:auto;aspect-ratio:4/3}
  .m-panel>figure.phone-fig{order:2;padding-top:0}
  .m-panel>figure.phone-fig img{aspect-ratio:auto;width:min(70%,18rem)}
  .m-panel-tx{padding:1.75rem}
}
/* 2) 카드 속 사진: 안쪽 상자 대신 카드 윗부분을 가장자리까지 채운다 */
.s-card,.m-fan-card{overflow:hidden}
.s-card .pic{margin:-2rem -2rem 1.75rem;border-radius:0}
.m-fan-card{padding:0 0 1.75rem}
.m-fan-card .pic{margin:0 0 1.5rem;border-radius:0}
.m-fan-card .num,.m-fan-card h3,.m-fan-card p{padding-left:1.75rem;padding-right:1.75rem}
/* 휴대폰 화면이 들어간 카드: 회색 윗부분에서 휴대폰이 올라온다 (카드와 한 몸) */
.s-card .pic.phone,.m-fan-card .pic.phone{background:#e9ecef}
/* 3) 회색 구역 안의 회색 상자는 흰색으로 (CI) */
.m-sec.gray .s-ci figure:not(.dark){background:#fff}

/* 선 아이콘: 굵기 1.75 고정, 기본 검정 + 한 부분만 포인트 블루 */
.s-ico{display:block;width:3rem;height:3rem;margin-bottom:1.5rem;fill:none;stroke:var(--ink);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.s-ico .pt{stroke:var(--blue)}

/* 자간은 메인 · 서브 모든 글자 -0.02rem (제목 · 본문 · 메뉴 · 버튼 전부) */
body,body *{letter-spacing:-.02rem !important}

/* ===== 단계형 카드: 스크롤하면 하나씩 (PC만, .s-step-on은 common.js gfStepper가 붙인다) ===== */
.s-step-nav{display:none}
.m-sec.s-step-on{height:calc(100vh + (var(--n) - 1) * 55vh);padding-top:0;padding-bottom:0}
.s-step-on>.gf-sec-in{position:sticky;top:7.5rem;height:calc(100vh - 7.5rem);display:flex;flex-direction:column;justify-content:center;padding-bottom:2rem}
.s-step-on .m-head{margin-bottom:2.5rem}
.s-step-on .s-step-stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:4.5rem;align-items:center}
/* 왼쪽: 카드를 한 자리에 겹쳐 두고 지금 것만 보인다 */
.s-step-on [data-step]{display:grid !important;grid-template-columns:1fr !important;gap:0 !important}
.s-step-on [data-step]>*,.s-step-on [data-step]>.reveal.is-visible{grid-area:1/1;opacity:0;transform:translateY(2rem);transition:opacity .5s ease,transform .5s ease;pointer-events:none;min-height:20rem}
.s-step-on [data-step]>.on,.s-step-on [data-step]>.reveal.is-visible.on{opacity:1;transform:none;pointer-events:auto}
.s-step-on [data-step] h3{font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1.35}
.s-step-on [data-step] p{font-size:1.0625rem;line-height:1.8;max-width:34rem}
.s-step-on [data-step] .num,.s-step-on [data-step] li>.en{font-size:1rem}
.s-step-on .s-card{padding:2.75rem}
.s-step-on .s-card .pic{margin:-2.75rem -2.75rem 2rem;aspect-ratio:16/7}
.s-step-on .s-steps li{padding:2.75rem}
.s-step-on .s-steps h3{margin-top:auto}
/* 오른쪽: 전체 목록, 지금 항목만 진하게 */
.s-step-on .s-step-nav{display:block;list-style:none;border-top:.0625rem solid var(--line)}
.s-step-nav li{position:relative;display:flex;gap:1.25rem;align-items:baseline;padding:1.125rem 0 1.125rem 1.25rem;border-bottom:.0625rem solid var(--line);cursor:pointer;color:#9aa2ad;transition:color .3s}
.s-step-nav .n{font-family:'Archivo','Pretendard',sans-serif;font-size:.875rem;font-weight:600;min-width:1.5rem}
.s-step-nav .t{font-size:1.0625rem;font-weight:600;line-height:1.5;word-break:keep-all}
.s-step-nav .bar{position:absolute;left:0;top:.75rem;bottom:.75rem;width:.125rem;background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform .4s ease}
.s-step-nav li.done{color:var(--sub)}
.s-step-nav li.on{color:var(--ink)}
.s-step-nav li.on .bar{transform:scaleY(1)}
.s-step-nav li:hover{color:var(--ink)}

/* 메인 첫 화면 제목 다듬기
   - 큰 영문(PUFFINGRAF)은 글꼴의 왼쪽 여백(약 0.064em) 때문에 안으로 들어가 보인다 → 그만큼 왼쪽으로 당겨 작은 문장과 첫 글자 선을 맞춘다
   - 두 줄이 한 덩어리로 보이게, 작은 문장 아래 끝과 큰 글자 윗선 사이를 약 0.1em(PC 20px 안팎)으로 좁힌다 */
.m-hero-title{gap:0}
.m-hero-title .xl{line-height:1;margin-top:.02em;margin-left:-.064em}
/* 서브 첫 화면도 같은 원리로: 작은 영문과 제목 사이를 좁힌다 */
.s-hero .en.kick{margin-bottom:.5rem}

/* 소개 구간 떠 있는 사진: 더 크게, 가운데 문장 쪽으로 더 가깝게 (배치 구조는 그대로) */
@media(min-width:60.0625rem){
  .m-fc.c1{top:7%;left:7%;width:min(26vw,26rem)}
  .m-fc.c2{top:5%;right:11%;width:min(18vw,18rem)}
  .m-fc.c3{bottom:11%;left:11%;width:min(19vw,19rem)}
  .m-fc.c4{bottom:8%;right:7%;width:min(24vw,24rem)}
  .m-fc.c5{bottom:-3%;left:43%;width:min(17vw,16rem)}
  .m-fc figcaption{font-size:.9375rem;padding:.75rem 1.125rem}
}
@media(max-width:60rem){
  .m-fc.c1{width:13rem}.m-fc.c2{width:9rem}.m-fc.c3{width:10.5rem}.m-fc.c4{width:12.5rem}
}
.s-step-on [data-step]>.s-card h3{margin-top:auto}
.s-step-on [data-step]>.s-card .pic+.num{margin-top:0}
.s-step-on [data-step]>.s-card .pic~h3{margin-top:0}

/* 메인 h1 두 줄 간격: 작은 문장 글자 크기의 1.2배로 어느 화면에서나 같은 비율 (PC 약 31px · 휴대폰 약 22px) */
.m-hero-title{--sm:clamp(1.125rem,2vw,1.625rem);--xl:clamp(3.25rem,13vw,12.5rem);gap:calc(1.2 * var(--sm) - .11 * var(--xl))}
.m-hero-title .sm{font-size:var(--sm)}
.m-hero-title .xl{font-size:var(--xl);margin-top:-.04em}

/* 메인 h1 작은 문장: 굵기 500, PC 2.625rem(42px). 화면이 좁으면 5vw로 줄어든다(휴대폰 약 19px)
   두 줄 간격은 글자 크기와 떼어서 PC 32px · 휴대폰 22px 안팎으로 유지 */
.m-hero-title{--sm:clamp(1.125rem,5vw,2.625rem);--g:clamp(1.375rem,2.2vw,2rem);gap:calc(var(--g) - .11 * var(--xl))}
.m-hero-title .sm{font-weight:500;font-size:var(--sm)}

/* ===== GNB 가독성 =====
   메뉴와 「창업 문의」를 같은 무게로: 메뉴는 진한 검정 500, 버튼은 채우지 않고 얇은 테두리만.
   영상 위에서는 흰 글자 100%, 영상 위쪽에 옅은 어두운 막을 깔아 밝은 장면에서도 읽히게 한다 */
.gf-nav-link{color:var(--ink);font-weight:500}
.gf-nav-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.375rem;text-decoration-thickness:.0625rem}
.gf-nav-link.active{font-weight:600}
.gf-cta-sm,.gf-header.solid .gf-cta-sm{background:transparent;color:var(--ink);border:.0625rem solid rgba(10,10,10,.28);font-size:.9375rem;font-weight:500;padding:0 1.125rem;min-height:2.5rem}
.gf-cta-sm:hover,.gf-header.solid .gf-cta-sm:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.gf-header.on-dark .gf-nav-link{color:#fff}
.gf-header.on-dark .gf-nav-link.active{color:#fff}
.gf-header.on-dark .gf-cta-sm{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.gf-header.on-dark .gf-cta-sm:hover{background:#fff;color:var(--ink);border-color:#fff}
.m-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:12rem;background:linear-gradient(to bottom,rgba(10,10,10,.45),rgba(10,10,10,0));z-index:1;pointer-events:none}

/* ===== 프라이머리 버튼: 마우스를 올리면 화살표가 옆으로 밀리며 버튼이 길어진다 =====
   화살표는 글꼴 아이콘이 아니라 CSS로 그린 선 화살표 (굵기 1.75) */
.gf-btn.dark,.gf-btn.white,.hbtn.w,.gf-form .submit{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;transition:gap .35s cubic-bezier(.2,.8,.2,1),background .2s,color .2s}
.gf-btn.dark::after,.gf-btn.white::after,.hbtn.w::after,.gf-form .submit::after{content:"";flex-shrink:0;width:1rem;height:1rem;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.gf-btn.dark:hover,.gf-btn.white:hover,.hbtn.w:hover,.gf-form .submit:hover,
.gf-btn.dark:focus-visible,.gf-btn.white:focus-visible,.hbtn.w:focus-visible,.gf-form .submit:focus-visible{gap:1.375rem;transform:none}
.gf-btn.dark:hover::after,.gf-btn.white:hover::after,.hbtn.w:hover::after,.gf-form .submit:hover::after{transform:translateX(.25rem)}
.gf-btn.dark:hover{background:#333}
@media(prefers-reduced-motion:reduce){.gf-btn.dark,.gf-btn.white,.hbtn.w,.gf-form .submit,.gf-btn.dark::after,.gf-btn.white::after,.hbtn.w::after,.gf-form .submit::after{transition:none}}
/* 메인 h1 작은 문장 크기 재조정: 큰 영문(PC 187px)의 약 1/6 = 2rem(32px). 좁은 화면은 4.6vw로 줄어든다 */
.m-hero-title{--sm:clamp(1.0625rem,4.6vw,2rem)}

/* ===== 회색 반복 줄이기: 표현 세 가지를 더 섞는다 ===== */
/* 1) 선 목록: 상자 없이 위에 검은 선 하나 */
.s-grid.lines .s-card{background:none;border-radius:0;border-top:.0625rem solid var(--ink);padding:1.75rem 0 0;overflow:visible}
.s-grid.lines .s-card:hover{box-shadow:none;transform:none}
.s-grid.lines .s-card .num{margin-bottom:1.25rem}
.s-step-on .s-grid.lines .s-card{padding:2.25rem 0 0;justify-content:flex-start}
.s-step-on .s-grid.lines .s-card h3{margin-top:1.25rem;font-size:clamp(1.75rem,2.8vw,2.5rem)}
/* 2) 테두리 카드: 흰 바탕 + 얇은 테두리 */
.s-grid.outline .s-card,.s-steps.outline li,.m-sec .s-steps.outline li{background:#fff;border:.0625rem solid var(--line)}
/* 3) 검정 띠: 구역 전체 검정 바탕, 흰 글자 (쪽마다 한 번만) */
.m-sec.dark{background:var(--ink);color:#fff}
.m-sec.dark .m-head .en,.m-sec.dark .m-pill{color:#fff}
.m-sec.dark .m-pill{background:rgba(255,255,255,.12)}
.m-sec.dark .m-head p,.m-sec.dark p{color:rgba(255,255,255,.72)}
.m-sec.dark .s-card{background:rgba(255,255,255,.07)}
.m-sec.dark .s-card .num{color:rgba(255,255,255,.6)}
.m-sec.dark .s-card h3{color:#fff}
.m-sec.dark .s-ico{stroke:#fff}
.m-sec.dark .s-ico .pt{stroke:var(--blue-bright)}
.m-sec.dark .m-checks li{border-color:rgba(255,255,255,.18)}
.m-sec.dark .m-checks li::before{background:#fff}
.m-sec.dark .m-checks li::after{border-color:var(--ink)}
.m-sec.dark .s-card.wide{background:none;padding:0}
.m-cta-in.dark{background:var(--ink);color:#fff}
.m-cta-in.dark p{color:rgba(255,255,255,.72)}
.m-cta-in.dark .gf-btn.dark{background:#fff;color:var(--ink)}
.m-cta-in.dark .gf-btn.dark:hover{background:#e9ecef}
.m-cta-in.dark .gf-btn.line{border-color:rgba(255,255,255,.6);color:#fff}
.m-cta-in.dark .gf-btn.line:hover{background:#fff;color:var(--ink)}
.m-sec.dark a:focus-visible,.m-cta-in.dark a:focus-visible{outline-color:#fff}

/* 섹션 머리 작은 영문(Our Services 등): 16px · 600 · 회색으로 제목(검정)과 한 단계 차이를 둔다 */
.m-head .en{font-size:1rem;font-weight:600;color:var(--sub);margin-bottom:.875rem}
.m-sec.dark .m-head .en{color:rgba(255,255,255,.65)}
.s-hero .en.kick{font-size:1rem;color:var(--sub)}

/* 메인 4대 서비스 카드 경계 또렷하게: 보이는 테두리 1px + 가까운 그림자와 먼 그림자 두 겹 */
.m-fan-card{border:.0625rem solid #dfe3e8;box-shadow:0 .0625rem .125rem rgba(10,10,10,.06),0 .75rem 2rem rgba(10,10,10,.08)}
.m-fan.open li:hover .m-fan-card,.m-fan.open li:focus-within .m-fan-card{border-color:#c9cfd6;box-shadow:0 .125rem .25rem rgba(10,10,10,.08),0 1.25rem 2.5rem rgba(10,10,10,.12)}

/* ===== 카드 마우스 올림 효과 (조용하게 한 가지만 확실히) =====
   카드 6px 들림 + 그림자 조금 깊게, 사진은 0.9초 동안 4% 확대, 오른쪽 아래에 화살표 동그라미가 나타난다.
   테두리 색 변화 · 크기 키우기 없음. 움직임 곡선은 끝에서 부드럽게 멈추는 것 하나로 통일 */
:root{--ease:cubic-bezier(.22,1,.36,1)}
.m-fan li,.m-fan-card,.m-pick-card,a.s-card,.m-prod figure img,.s-gal figure img{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.m-fan-card .pic img,.m-pick-card img,.m-pick-card video,a.s-card .pic img{transition:transform .9s var(--ease)}
/* 화살표 동그라미 (버튼 화살표와 같은 선 화살표) */
.m-fan-card,a.s-card{position:relative}
.m-fan-card::after,a.s-card::after{content:"";position:absolute;right:1.5rem;bottom:1.5rem;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/1rem no-repeat;opacity:0;transform:translateX(-.5rem);transition:opacity .4s var(--ease),transform .5s var(--ease);pointer-events:none}
.m-fan-card p,a.s-card p{padding-right:3.25rem}
/* 4대 서비스 카드 */
.m-fan.open li:hover,.m-fan.open li:focus-within{transform:rotate(0) translateY(-.75rem)}
.m-fan.open li:hover .m-fan-card,.m-fan.open li:focus-within .m-fan-card{border-color:#dfe3e8;box-shadow:0 .125rem .25rem rgba(10,10,10,.06),0 1.25rem 2.75rem rgba(10,10,10,.12)}
.m-fan.open li:hover .pic img,.m-fan.open li:focus-within .pic img{transform:scale(1.04)}
.m-fan.open li:hover .pic.phone img{transform:translateY(-.375rem)}
.m-fan.open li:hover .m-fan-card::after,.m-fan.open li:focus-within .m-fan-card::after{opacity:1;transform:none}
/* 누구에게 카드 (화살표 동그라미가 원래 있음 → 옆으로 살짝 밀린다) */
.m-pick-card:hover,.m-pick-card:focus-visible{transform:translateY(-.375rem);box-shadow:0 1.25rem 2.75rem rgba(10,10,10,.1)}
.m-pick-card:hover img,.m-pick-card:hover video{transform:scale(1.04)}
.m-pick-card .go{transition:transform .5s var(--ease)}
.m-pick-card:hover .go{transform:translateX(.25rem)}
/* 서브 링크 카드 */
a.s-card:hover,a.s-card:focus-visible{transform:translateY(-.375rem);box-shadow:0 1.25rem 2.75rem rgba(10,10,10,.1)}
a.s-card:hover .pic img{transform:scale(1.04)}
a.s-card:hover::after,a.s-card:focus-visible::after{opacity:1;transform:none}
.s-grid.lines a.s-card:hover{transform:none;box-shadow:none}
.s-grid.lines a.s-card::after{bottom:auto;top:1.75rem;right:0}
/* 제품 · 갤러리 사진: 4px만 들림 */
.m-prod figure:hover img,.s-gal figure:hover img{transform:translateY(-.25rem)}
@media(prefers-reduced-motion:reduce){.m-fan li,.m-fan-card,.m-pick-card,a.s-card,.m-prod figure img,.s-gal figure img,.m-fan-card .pic img,.m-pick-card img,a.s-card .pic img,.m-fan-card::after,a.s-card::after{transition:none}}

/* 문단 끝에 한두 글자만 떨어지지 않게: 브라우저가 줄을 고르게 나눈다(지원 안 하는 브라우저는 그대로) */
p,dd,figcaption,.s-card h3{text-wrap:pretty}
h1,h2{text-wrap:balance}
/* 메인 캠퍼스 판 설명은 PC에서 한 줄로 */
.m-media p{max-width:none}

/* ===== 카드 경계는 테두리(border) 대신 그림자(box-shadow)로 =====
   아주 옅은 바깥 고리 + 가까운 그림자 + 먼 그림자, 세 겹으로 가장자리를 세운다.
   (입력칸 · 테두리형 버튼 · 구분선은 쓰임이 달라서 그대로 둔다) */
:root{--shadow-card:0 0 0 .0625rem rgba(10,10,10,.035),0 .125rem .375rem rgba(10,10,10,.05),0 .875rem 2rem rgba(10,10,10,.08);--shadow-card-hover:0 0 0 .0625rem rgba(10,10,10,.035),0 .25rem .625rem rgba(10,10,10,.06),0 1.5rem 3rem rgba(10,10,10,.13)}
.m-fan-card{border:0;box-shadow:var(--shadow-card)}
.m-fan.open li:hover .m-fan-card,.m-fan.open li:focus-within .m-fan-card{border:0;box-shadow:var(--shadow-card-hover)}
.m-pick-card{border:0}
.s-grid.outline .s-card,.s-steps.outline li,.m-sec .s-steps.outline li{border:0;box-shadow:var(--shadow-card)}
.s-colors li{border:0;box-shadow:var(--shadow-card)}
.s-colors .c1,.s-colors .c2{box-shadow:none}
.m-sec.gray .s-card,.m-sec.gray .s-steps li,.m-sec.gray .s-ci figure:not(.dark){box-shadow:var(--shadow-card)}
.m-sec.gray .s-grid.lines .s-card{box-shadow:none}
.m-fc figcaption{border:0;box-shadow:0 0 0 .0625rem rgba(10,10,10,.04),0 .5rem 1.5rem rgba(10,10,10,.12)}

/* ===== 상품 사진: 칸에 꽉 채우지 않고 통째로 보이게 =====
   상품 사진(bk_*)은 칸 모양과 상관없이 상품 전체가 들어가도록 줄이고(contain),
   남는 자리는 사진 바탕색과 같은 색으로 채워 이어 보이게 한다. 칸 안 여백 8% */
img[src*="/bk_"]{object-fit:contain !important;padding:8%;background:#f5f5f5}
img[src*="/bk_all"]{background:#fff;padding:6%}
/* 확대 효과가 있는 칸에서도 상품이 잘리지 않게 확대 폭을 줄인다 */
.m-fan.open li:hover .pic img[src*="/bk_"],a.s-card:hover .pic img[src*="/bk_"]{transform:scale(1.02)}
/* 매장 사장님 사진: 사람이 오른쪽에 있어서 잘릴 때 사람 쪽을 남긴다 */
img.owner{object-position:68% 45%}
.m-panel>figure img.owner{object-position:55% 50%}

/* ===== 메인 ① 첫 화면 카드 확대 (main.js gfZoomHero가 크기를 바꾼다) ===== */
.z-hero{position:relative;height:280vh;background:#fff}
.z-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.z-title{position:absolute;left:0;right:0;top:calc(4.25rem + 6vh);z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;line-height:1.2;will-change:transform,opacity}
.z-title .sm{font-size:clamp(1.0625rem,2vw,1.75rem);font-weight:500;color:var(--sub)}
.z-title .xl{font-size:clamp(3.5rem,14vw,14rem);font-weight:700;line-height:.95}
.z-cards{position:absolute;inset:0;z-index:2;pointer-events:none}
.z-card{position:absolute;margin:0;overflow:hidden;border-radius:1.5rem;background:#e9ecef;box-shadow:var(--shadow-card)}
.z-card img,.z-card video{display:block;width:100%;height:100%;object-fit:cover}
.z-card.main{z-index:3}
.z-card.side{z-index:2;will-change:transform,opacity}
.z-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.6),rgba(10,10,10,.1) 60%);opacity:0}
.z-end{position:absolute;left:0;right:0;bottom:8vh;z-index:4;max-width:92.5rem;margin:0 auto;padding:0 1.5rem;opacity:0;visibility:hidden;transform:translateY(1.5rem);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .5s}
.z-end.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.z-end .hero-ctas{display:flex;gap:.875rem;flex-wrap:wrap}
.z-end .hbtn{display:inline-flex;align-items:center;padding:1rem 2rem;border-radius:6.25rem;font-weight:600;font-size:.9375rem;min-height:3rem}
.z-end .hbtn.w{background:#fff;color:var(--ink)}
.z-end .hbtn.o{border:.0625rem solid rgba(255,255,255,.6);color:#fff}
.z-end .hbtn.o:hover{background:#fff;color:var(--ink)}
.z-scroll{position:absolute;left:50%;bottom:1.5rem;z-index:4;transform:translateX(-50%);font-size:.75rem;letter-spacing:.2em !important;text-transform:uppercase;color:var(--sub);transition:opacity .3s}
/* 움직임 줄이기: 연출 없이 제목 아래 영상 카드 한 장 + 버튼 */
@media(prefers-reduced-motion:reduce){
  .z-hero{height:auto}
  .z-stage{position:relative;height:auto;padding:calc(4.25rem + 4rem) 1.5rem 4rem}
  .z-title{position:relative;top:0}
  .z-cards{position:relative;inset:auto;height:auto;margin-top:2.5rem}
  .z-card.side{display:none}
  .z-card.main{position:relative;width:100%;aspect-ratio:16/9}
  .z-shade{opacity:1}
  .z-end{position:relative;bottom:auto;margin-top:-6rem;opacity:1;visibility:visible;transform:none}
  .z-scroll{display:none}
}

/* ===== 메인 ② 4대 서비스 가로 카드 넘김 (main.js gfHScroll) ===== */
.h-scroll{position:relative;background:var(--m-gray);height:calc(100vh + 4 * 60vh)}
.h-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:minmax(18rem,30%) 1fr;gap:4rem;align-items:center;max-width:100%;padding:4.25rem 0 0 max(1.5rem,calc((100vw - 92.5rem) / 2))}
.h-side{padding-right:1rem}
.h-side .m-head{margin-bottom:3rem}
.h-now .n{display:block;font-size:.9375rem;font-weight:600;color:var(--sub)}
.h-now .t{margin-top:1rem;font-size:clamp(1.5rem,2.4vw,2.25rem);font-weight:700;line-height:1.35;transition:opacity .3s}
.h-now .d{margin-top:.75rem;color:var(--sub);line-height:1.75;word-break:keep-all;transition:opacity .3s}
.h-now.swap .t,.h-now.swap .d{opacity:0}
.h-bar{margin-top:2.5rem;height:.125rem;background:#dfe3e8;border-radius:1rem;overflow:hidden;max-width:16rem}
.h-bar span{display:block;height:100%;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(.25)}
.h-view{overflow:visible;height:100%;display:flex;align-items:center}
.h-track{list-style:none;display:flex;gap:1.5rem;will-change:transform}
.h-card{position:relative;display:block;width:clamp(16rem,24vw,22rem);aspect-ratio:3/4;border-radius:1.5rem;overflow:hidden;background:#fff;box-shadow:var(--shadow-card);transition:transform .6s var(--ease),box-shadow .5s var(--ease)}
.h-card>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .6s var(--ease)}
.h-card.phone{background:#e9ecef}
.h-card.phone>img{width:62%;height:auto;margin:12% auto 0;border-radius:1rem 1rem 0 0;box-shadow:0 1rem 2rem rgba(10,10,10,.15);object-fit:contain}
/* 카드 아래 정보: 평소에는 번호 · 제목만, 맨 앞 카드는 유리판이 올라오며 설명까지 */
.h-info{position:absolute;left:.75rem;right:.75rem;bottom:.75rem;display:flex;flex-direction:column;gap:.375rem;padding:1.25rem 1.375rem;border-radius:1.125rem;background:rgba(255,255,255,.72);backdrop-filter:blur(1rem) saturate(1.2);-webkit-backdrop-filter:blur(1rem) saturate(1.2);box-shadow:0 .5rem 1.5rem rgba(10,10,10,.08);color:var(--ink)}
.h-info .num{font-size:.8125rem;font-weight:600;color:var(--sub)}
.h-info .tt{font-size:1.25rem;font-weight:700;line-height:1.35}
.h-info .dd{font-size:.9375rem;line-height:1.65;color:var(--sub);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .4s var(--ease)}
.h-card.on .dd{max-height:6rem;opacity:1}
.h-card.on{transform:translateY(-.75rem);box-shadow:var(--shadow-card-hover)}
.h-card:hover>img{transform:scale(1.04)}
.h-card.phone:hover>img{transform:translateY(-.375rem)}
/* 휴대폰 · 움직임 줄이기: 붙이지 않고, 카드를 옆으로 밀어 보는 목록 */
@media(max-width:53.75rem),(prefers-reduced-motion:reduce){
  .h-scroll{height:auto;padding:6rem 0}
  .h-stage{position:relative;height:auto;display:block;padding:0}
  .h-side{padding:0 1.5rem}
  .h-now,.h-bar{display:none}
  .h-side .m-head{margin-bottom:2rem}
  .h-view{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem 1.5rem 2rem;scrollbar-width:none}
  .h-view::-webkit-scrollbar{display:none}
  .h-track{transform:none !important}
  .h-track li{scroll-snap-align:start}
  .h-card{width:min(78vw,20rem)}
  .h-info .dd{max-height:none;opacity:1}
  .h-card.on{transform:none}
}
/* 지나간 카드는 왼쪽 글 영역으로 넘어가지 않고, 카드 줄 왼쪽 끝에서 부드럽게 사라진다 */
@media(min-width:53.8125rem) and (prefers-reduced-motion:no-preference){
  .h-view{overflow:hidden;padding-left:1rem;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 3rem);mask-image:linear-gradient(to right,transparent 0,#000 3rem)}
  .h-track{padding:1.5rem 0}
}
.h-scroll{height:calc(100vh + 3 * 55vh)}
@media(max-width:53.75rem),(prefers-reduced-motion:reduce){.h-scroll{height:auto}}
.h-now.swap .t,.h-now.swap .d{opacity:1;animation:hNowIn .5s var(--ease) both}
.h-now.swap .d{animation-delay:.06s}
@keyframes hNowIn{from{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.h-now.swap .t,.h-now.swap .d{animation:none}}
.h-info,.h-now{word-break:keep-all}
@media(max-width:53.75rem),(prefers-reduced-motion:reduce){.h-view{padding-left:1.5rem;scroll-padding-left:1.5rem}}
/* 카드 쌓임: 사라지는 흐림 대신, 왼쪽 끝에서 카드가 겹쳐 쌓이며 그림자가 층층이 보인다 */
@media(min-width:53.8125rem) and (prefers-reduced-motion:no-preference){
  .h-view{-webkit-mask-image:none;mask-image:none;padding-left:4rem}
  .h-track li{position:relative;transform-origin:left center;will-change:transform}
  .h-track li .h-card{box-shadow:0 0 0 .0625rem rgba(10,10,10,.04),0 .25rem .75rem rgba(10,10,10,.08),0 1.5rem 3rem rgba(10,10,10,.14)}
}
@media(min-width:53.8125rem) and (prefers-reduced-motion:no-preference){.h-view{padding-left:1rem}}

/* ===== FAQ (메인 · 쇼핑몰 창업): 질문은 글 길이만큼의 둥근 상자 + 오른쪽 끝 네모 단추.
   열면 질문 상자가 끝까지 늘어나 옅은 블루 판이 되고, 그 안에 답이 펼쳐진다 ===== */
.q-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3rem}
.q-head h2{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;line-height:1}
.q-head p{color:var(--ink);font-size:clamp(1.0625rem,1.5vw,1.375rem);font-weight:600;line-height:1.5;text-align:right}
.q-list{display:flex;flex-direction:column;gap:.875rem}
.q-item{--qb:5.25rem;interpolate-size:allow-keywords}
.q-item summary{display:flex;gap:.875rem;align-items:stretch;list-style:none;cursor:pointer}
.q-item summary::-webkit-details-marker{display:none}
.q-item .q{flex:0 1 auto;max-width:calc(100% - var(--qb) - .875rem);display:flex;align-items:center;min-height:var(--qb);padding:1.25rem 1.75rem;border-radius:1.125rem;background:var(--m-gray);font-size:1.125rem;font-weight:600;line-height:1.5;word-break:keep-all;transition:background .3s var(--ease),flex-grow .4s var(--ease)}
.q-item .q-btn{position:relative;flex:0 0 var(--qb);margin-left:auto;min-height:var(--qb);border-radius:1.125rem;background:var(--m-gray);transition:background .3s var(--ease)}
.q-item .q-btn::before,.q-item .q-btn::after{content:"";position:absolute;left:50%;top:50%;width:1.25rem;height:.125rem;margin:-.0625rem 0 0 -.625rem;border-radius:1rem;background:var(--ink);transition:transform .4s var(--ease)}
.q-item .q-btn::after{transform:rotate(90deg)}
.q-item summary:hover .q,.q-item summary:hover .q-btn{background:#eceef1}
.q-item[open] .q{flex-grow:1;background:var(--blue-soft);border-radius:1.125rem 1.125rem 0 0}
.q-item[open] .q-btn{background:var(--blue-soft)}
.q-item[open] .q-btn::after{transform:rotate(0)}
.q-item .a{margin-right:calc(var(--qb) + .875rem);padding:0 1.75rem 1.75rem;border-radius:0 0 1.125rem 1.125rem;background:var(--blue-soft);color:var(--sub);line-height:1.8;word-break:keep-all}
.q-item .a p+p{margin-top:.25rem}
/* 열고 닫을 때 부드럽게 (지원하는 브라우저만) */
.q-item::details-content{height:0;overflow:hidden;transition:height .45s var(--ease),content-visibility .45s allow-discrete}
.q-item[open]::details-content{height:auto}
@media(max-width:40rem){
  .q-head{flex-direction:column;align-items:flex-start}
  .q-head p{text-align:left}
  .q-item{--qb:3.5rem}
  .q-item .q{font-size:1rem;padding:1rem 1.25rem}
  .q-item .a{padding:0 1.25rem 1.25rem}
}
@media(prefers-reduced-motion:reduce){.q-item::details-content{transition:none}.q-item .q,.q-item .q-btn::before,.q-item .q-btn::after{transition:none}}
/* 쇼핑몰 창업 문의 폼: FAQ 회색 상자 바로 뒤라 흰 판 + 그림자로 */
.page-sub .gf-form.raised{background:#fff;box-shadow:var(--shadow-card)}
/* 쌓일 때 위아래도 정확히 맞게: 맨 앞 카드도 들어 올리지 않는다 */
@media(min-width:53.8125rem) and (prefers-reduced-motion:no-preference){.h-card.on{transform:none}}
/* 04 쇼핑몰 카드: 회색 바탕 위 작은 휴대폰 대신, 쇼핑몰 화면이 카드 전체를 채운다(화면 비율이 카드와 거의 같음) */
.h-card.phone{background:#fff}
.h-card.phone>img{width:100%;height:100%;margin:0;border-radius:0;box-shadow:none;object-fit:cover;object-position:top center}
.h-card.phone:hover>img{transform:scale(1.04)}
/* 카드가 이제 왼쪽으로 넘어가지 않으므로 자르지 않는다 → 그림자가 네모 띠로 잘려 보이던 것 없앰 */
@media(min-width:53.8125rem) and (prefers-reduced-motion:no-preference){.h-view{overflow:visible}}

/* ===== 메디랩과 다르게 ①: 첫 화면 = 왼쪽 아래 큰 제목 + 오른쪽 카드 묶음 ===== */
@media(min-width:64rem){
  .z-title{top:auto;bottom:11vh;left:max(1.5rem,calc((100vw - 92.5rem) / 2));right:auto;align-items:flex-start;text-align:left;gap:.5rem}
  .z-title .xl{font-size:clamp(4rem,8.2vw,9.5rem);margin-left:-.06em}
  .z-scroll{left:auto;right:max(1.5rem,calc((100vw - 92.5rem) / 2));transform:none}
}

/* ===== 메디랩과 다르게 ②: 4대 서비스 카드 = 유리판 대신 사진 아래 흰 띠 + 큰 번호 ===== */
.h-card{display:flex;flex-direction:column;background:#fff}
.h-card>img{flex:1 1 auto;min-height:0;height:auto}
.h-card.phone>img{height:auto}
.h-info{position:relative;left:auto;right:auto;bottom:auto;flex:0 0 auto;border-radius:0;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:1.25rem 1.5rem 1.375rem;gap:.25rem}
.h-info .num{position:absolute;right:1.25rem;top:-.25rem;font-size:3.75rem;font-weight:700;line-height:1;color:#e6e9ed;pointer-events:none}
.h-info .tt{position:relative;padding-right:4rem}
.h-info .dd{position:relative}

/* ===== 메디랩과 다르게 ③: FAQ = 한 줄 전체 회색 줄 + Q 번호 + 안쪽 동그라미 단추, 열면 흰 판으로 떠오름 ===== */
.q-list{counter-reset:faq;gap:.75rem}
.q-item{--qb:2.75rem;background:var(--m-gray);border-radius:1.25rem;transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.q-item summary{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.25rem;padding:1.375rem 1.5rem 1.375rem 1.75rem}
.q-item summary::before{counter-increment:faq;content:"Q" counter(faq);font-family:'Archivo','Pretendard',sans-serif;font-size:1rem;font-weight:600;color:var(--sub);min-width:2rem}
.q-item .q{max-width:none;min-height:0;padding:0;border-radius:0;background:none !important;font-size:1.125rem}
.q-item .q-btn{flex:none;margin:0;width:var(--qb);min-height:var(--qb);height:var(--qb);border-radius:50%;background:#fff !important;box-shadow:var(--shadow-card)}
.q-item .q-btn::before,.q-item .q-btn::after{width:.875rem;margin-left:-.4375rem}
.q-item summary:hover .q,.q-item summary:hover .q-btn{background:inherit}
.q-item:hover{background:#eceef1}
.q-item[open]{background:#fff;box-shadow:var(--shadow-card)}
.q-item[open] .q{border-radius:0}
.q-item[open] .q-btn{background:var(--ink) !important}
.q-item[open] .q-btn::before{background:#fff}
.q-item .a{margin:0;padding:0 5.75rem 1.75rem 5rem;border-radius:0;background:none}
@media(max-width:40rem){
  .q-item summary{gap:.75rem;padding:1.125rem 1rem 1.125rem 1.25rem}
  .q-item .a{padding:0 1.25rem 1.25rem 3.75rem}
}
.q-item[open]:hover{background:#fff}
.m-head .en{font-size:1rem;font-weight:600;color:var(--sub);margin-bottom:.875rem}
/* FAQ 단추: 열렸을 때 「−」가 검정 단추 위에 흰 선으로 또렷하게 (전에는 한 줄이 검정이라 안 보였음) */
.q-item .q-btn::before,.q-item .q-btn::after{width:.875rem;height:.125rem;margin:-.0625rem 0 0 -.4375rem}
.q-item[open] .q-btn::before,.q-item[open] .q-btn::after{background:#fff}
.q-item[open] .q-btn::after{transform:rotate(0)}

/* 사업영역 개인쇼핑몰 판: 체크 목록 대신 「이름표 | 설명」 표 모양 */
.p-dl{margin-top:2.25rem;border-top:.0625rem solid var(--ink)}
.p-dl>div{display:grid;grid-template-columns:9.5rem 1fr;gap:1.5rem;padding:1.125rem 0;border-bottom:.0625rem solid #dfe2e6}
.p-dl dt{font-size:1rem;font-weight:600;color:var(--ink);line-height:1.6;word-break:keep-all}
.p-dl dd{font-size:.9375rem;color:var(--sub);line-height:1.7;word-break:keep-all}
.m-panel-tx .gf-btns.left{margin-top:2.25rem}
.m-panel-tx .note{margin-top:1.5rem;font-size:.8125rem;line-height:1.7;color:#8a919b}
.m-panel-tx>p:not(.note){font-size:1.0625rem}
@media(max-width:40rem){.p-dl>div{grid-template-columns:1fr;gap:.25rem}}

/* 사업영역 01 개인쇼핑몰: 회색 판 없이 사진과 글이 여백 속에 놓이는 배치 (사진은 위아래로 길게, 글은 아래로 내려 엇갈리게) */
.p-mall{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:6rem;align-items:end}
.p-mall-pic{margin:0;border-radius:var(--m-r);overflow:hidden;aspect-ratio:4/5}
.p-mall-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:55% 50%}
.p-mall-tx{padding-bottom:.5rem}
.p-no{display:block;font-size:1rem;font-weight:600;color:var(--sub);margin-bottom:1.25rem}
.p-mall-tx h2{font-size:clamp(2rem,3.6vw,3.25rem);font-weight:700;line-height:1.25}
.p-mall-tx .lead{margin-top:1.5rem;font-size:1.0625rem;line-height:1.85;color:var(--sub);word-break:keep-all;max-width:36rem}
.p-mall-tx .gf-btns.left{margin-top:2.25rem}
.p-mall-tx .note{margin-top:1.5rem;font-size:.8125rem;line-height:1.7;color:#8a919b}
@media(max-width:53.75rem){.p-mall{grid-template-columns:1fr;gap:2.5rem}.p-mall-pic{aspect-ratio:4/3}}

/* ===== 글자 크기 한 단계 키우기 (10/27 팀장 「폰트가 너무 작아」) =====
   레퍼런스(메디랩) PC 본문 18px · 소제목 22~26px에 맞춘다. PC에서는 rem 기준을 16→18px로 올려 글자 · 여백이 함께 커진다 */
@media(min-width:64rem){ html{font-size:112.5%} }
.s-step-nav li{padding:1.375rem 0 1.375rem 1.5rem}
.s-step-nav .n{font-size:1.0625rem}
.s-step-nav .t{font-size:1.375rem;line-height:1.45}

/* ===== 푸터: 플래닛(검정 바탕 · 큰 문장 · 굵은 메뉴 줄) + 메디랩(연락처 굵게 · 오른쪽 아래 큰 워드마크) ===== */
.gf-footer{background:#000;color:#fff;padding:7.5rem 1.5rem 3rem;font-size:1rem;line-height:1.6}
.gf-footer a{color:inherit}
.ft-pill{display:inline-flex;align-items:center;gap:1rem;font-size:1.125rem;font-weight:700}
.ft-pill span{background:#fff;color:#000;border-radius:6.25rem;padding:.4375rem 1rem .375rem;font-size:.875rem;font-family:'Archivo','Pretendard',sans-serif}
.ft-slogan{margin-top:1.5rem;font-size:clamp(2.25rem,4.2vw,3.5rem);font-weight:700;line-height:1.15}
.ft-nav{display:flex;flex-wrap:wrap;align-items:center;column-gap:2rem;margin-top:8rem;padding-bottom:2rem;border-bottom:.0625rem solid rgba(255,255,255,.18)}
.ft-nav>a,.ft-policy a{padding:.75rem 0;font-size:1.125rem;font-weight:700;transition:opacity .3s}
.ft-policy{display:flex;column-gap:2rem}
.ft-policy a{font-weight:500;color:rgba(255,255,255,.6)}
.ft-policy a.strong{color:rgba(255,255,255,.85)}
.ft-nav a:hover{opacity:.6}
.ft-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:2.5rem;margin-top:2.5rem}
.ft-info{font-style:normal}
.ft-contact{font-size:1.125rem;font-weight:700;margin-bottom:.75rem}
.ft-co{color:#8b9099;font-size:.9375rem;line-height:1.8}
.ft-co span+span::before{content:"|";margin:0 .75rem;color:#4a4e55}
.ft-mark{flex-shrink:0;font-size:clamp(3rem,8vw,7.5rem);font-weight:700;line-height:.8;color:#fff}
.ft-copy{margin-top:2.5rem;padding-top:1.5rem;border-top:.0625rem solid rgba(255,255,255,.12);font-size:.8125rem;color:#6c6c6c}
@media(max-width:53.75rem){
  .gf-footer{padding:5rem 1.5rem 2.5rem}
  .ft-pill{flex-wrap:wrap;gap:.625rem;font-size:1rem}
  .ft-nav{margin-top:4.5rem;column-gap:1.5rem}
  .ft-nav>a,.ft-policy a{font-size:1rem;padding:.5rem 0}
  .ft-policy{width:100%;column-gap:1.5rem}
  .ft-bottom{flex-direction:column;align-items:flex-start}
  .ft-co span+span::before{content:none}
  .ft-co span{display:block}
}

/* ===== 쇼핑몰 창업 (이야기 순서만 plan-et.kr/about, 모양 · 연출은 우리 사이트 방식. assets/partner.js) ===== */
.page-partner [id]{scroll-margin-top:4.25rem}
.pt-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;padding-top:4.25rem}
.pt-in{width:100%;max-width:92.5rem;margin:0 auto;padding:0 1.5rem}
.pt-split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.pt-split .m-head{margin-bottom:0}
/* 밑줄 긋기: 블루 띠가 왼쪽부터 그어진다 (--u 0→1) */
.pt-ul{background:linear-gradient(var(--blue),var(--blue)) no-repeat 0 92%/calc(var(--u,0) * 100%) .16em;padding-bottom:.05em}
.pt-sol .reveal.is-visible .pt-ul{--u:1;transition:background-size 1s var(--ease) .3s}
.pt-sol .pt-ul{transition:background-size 1s var(--ease) .3s}

/* ① 첫 화면 (흰 바탕) */
.pt-hero{height:220vh;background:#fff}
.pt-hero .pt-stage{display:block;padding-top:0}
.pt-hero-title{position:absolute;left:max(1.5rem,calc((100vw - 92.5rem) / 2 + 1.5rem));bottom:18vh;z-index:2;display:flex;flex-direction:column;gap:1rem}
.pt-hero-title .sm{font-size:1.125rem;font-weight:600;color:var(--blue)}
.pt-hero-title .xl{font-size:clamp(2.75rem,6vw,6rem);font-weight:700;line-height:1.1}
.pt-hero-desc{position:absolute;left:max(1.5rem,calc((100vw - 92.5rem) / 2 + 1.5rem));bottom:calc(18vh - 4.5rem);z-index:2;font-size:1.125rem;line-height:1.7;color:var(--sub)}
.pt-hero-art{position:absolute;left:52vw;top:0;bottom:0;width:40vw;display:flex;align-items:center;justify-content:center;will-change:transform}
.pt-phone{position:relative;z-index:2;margin:0;height:min(64vh,36rem);aspect-ratio:9/13.6;border-radius:2.5rem;padding:.5rem;background:#fff;box-shadow:0 0 0 .0625rem #e3e6ea,0 2rem 4rem rgba(10,10,10,.14);transform:rotate(8deg);will-change:transform}
.pt-phone img{display:block;width:100%;height:100%;object-fit:contain;object-position:top center;border-radius:2rem;background:#fff}
.pt-chip{position:absolute;z-index:3;margin:0;border-radius:1.25rem;overflow:hidden;background:#fff;box-shadow:var(--shadow-card);will-change:transform}
.pt-chip img{display:block;width:100%;height:100%;object-fit:cover}
.pt-chip.c1{width:11rem;aspect-ratio:3/4;left:2%;top:20%;transform:rotate(-6deg)}
.pt-chip.c2{width:9rem;aspect-ratio:1;right:4%;top:16%;transform:rotate(6deg)}
.pt-chip.c3{width:9.5rem;aspect-ratio:1;right:0;bottom:16%;transform:rotate(6deg)}
.pt-hero-btn{position:absolute;left:50%;bottom:6vh;z-index:4;opacity:0;visibility:hidden;transform:translate(-50%,1rem);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s .5s}
.pt-hero-btn.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .5s var(--ease),transform .5s var(--ease)}

/* ② 손님이 사는 순서 */
.pt-journey{height:240vh;background:var(--m-gray)}
.pt-bar{height:.25rem;margin-top:1rem;border-radius:1rem;background:#dfe3e8;overflow:hidden}
.pt-bar span{display:block;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(0)}
.pt-jn{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.pt-jn li{padding:2.5rem 2.25rem;border-radius:var(--m-r);background:#fff;opacity:.4;transform:translateY(1.5rem);transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.pt-jn li.on{opacity:1;transform:none;box-shadow:var(--shadow-card)}
.pt-jn .no{font-size:3.5rem;font-weight:700;line-height:1;color:#e6e9ed;transition:color .5s}
.pt-jn li.on .no{color:var(--blue)}
.pt-jn h3{margin-top:1.5rem;font-size:1.625rem;font-weight:700}
.pt-jn p{margin-top:.75rem;font-size:1.0625rem;line-height:1.7;color:var(--sub);word-break:keep-all}

/* ③ 손님을 데려오는 길 */
.pt-route{height:220vh;background:#fff}
.pt-hub{position:relative;aspect-ratio:1;width:min(30rem,62vh,100%);justify-self:center;margin-top:2rem}
.pt-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}
.pt-lines path{fill:none;stroke:var(--blue);stroke-width:.45;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
.pt-way{position:absolute;z-index:2;width:12rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:1.25rem 1rem;border-radius:1.25rem;background:#fff;box-shadow:var(--shadow-card);opacity:.25;transform:scale(.9);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pt-way.on{opacity:1;transform:none}
.pt-way i{font-size:1.75rem;color:var(--blue)}
.pt-way b{font-size:1.125rem;font-weight:700}
.pt-way span{font-size:.875rem;color:var(--sub);line-height:1.5;word-break:keep-all}
.pt-way.w1{left:18%;top:18%;transform-origin:center;translate:-50% -50%}
.pt-way.w2{left:82%;top:18%;translate:-50% -50%}
.pt-way.w3{left:50%;top:96%;translate:-50% -50%}
.pt-core{position:absolute;left:50%;top:56%;z-index:1;translate:-50% -50%;width:9rem;display:flex;flex-direction:column;align-items:center;gap:.625rem;transform:scale(.9);transition:transform .6s var(--ease)}
.pt-core img{width:100%;aspect-ratio:1;object-fit:cover;object-position:top;border-radius:50%;border:.375rem solid #fff;box-shadow:0 0 0 .125rem var(--blue-soft),var(--shadow-card);transition:box-shadow .6s var(--ease)}
.pt-core b{font-size:1.25rem;font-weight:700;padding:.375rem 1rem;border-radius:6.25rem;background:#fff;transition:background .4s,color .4s}
.pt-core.on{transform:scale(1.12)}
.pt-core.on img{box-shadow:0 0 0 .5rem var(--blue-soft),var(--shadow-card)}
.pt-core.on b{background:var(--blue);color:#fff}

/* ④ 고민과 답 (말풍선) */
.pt-chat{height:300vh;background:var(--m-gray)}
.pt-talk-win{height:56vh;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%);mask-image:linear-gradient(to bottom,transparent,#000 12%)}
.pt-chat .pt-split{align-items:center}
.pt-talk{display:flex;flex-direction:column;gap:1rem;padding-top:8vh;transition:transform .6s var(--ease)}
.pt-talk .b{max-width:80%;padding:1.125rem 1.5rem;font-size:1.1875rem;font-weight:600;line-height:1.55;word-break:keep-all;opacity:0;transform:translateY(1.25rem) scale(.96);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.pt-talk .b.on{opacity:1;transform:none}
.pt-talk .me{align-self:flex-start;background:#fff;border-radius:1.25rem 1.25rem 1.25rem .25rem;color:var(--ink)}
.pt-talk .hq{align-self:flex-end;background:var(--blue);color:#fff;border-radius:1.25rem 1.25rem .25rem 1.25rem}
.pt-talk-win{position:relative}

/* ⑤ 해법 */
.pt-sol{background:#fff}
.pt-sol-media{margin:0;border-radius:var(--m-r);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shadow-card)}
.pt-sol-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.pt-sol .gf-btn{margin-top:2.5rem}

/* ⑥ 누가 무엇을 */
.pt-role{height:240vh;background:var(--m-gray)}
.pt-fill{max-width:56rem;margin:0 auto;text-align:center;font-size:clamp(1.625rem,3vw,2.625rem);font-weight:700;line-height:1.45;word-break:keep-all}
.pt-fill .w{color:#c9cdd3;transition:color .3s}
.pt-fill .w.on{color:var(--ink)}
.pt-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3.5rem}
.pt-side{padding:2.75rem 3rem;border-radius:var(--m-r);background:#fff;box-shadow:var(--shadow-card);opacity:0;will-change:transform}
.pt-side.hq{background:var(--blue);color:#fff}
.pt-side .en{font-size:1rem;font-weight:600;color:var(--sub)}
.pt-side.hq .en{color:rgba(255,255,255,.75)}
.pt-side h3{margin-top:.5rem;font-size:1.875rem;font-weight:700}
.pt-side ul{list-style:none;margin-top:1.5rem;display:flex;flex-direction:column;gap:.75rem}
.pt-side li{position:relative;padding-left:1.5rem;font-size:1.125rem;line-height:1.5}
.pt-side li::before{content:"";position:absolute;left:0;top:.6em;width:.5rem;height:.5rem;border-radius:50%;background:var(--blue)}
.pt-side.hq li::before{background:#fff}

/* ⑦ 이런 분께 */
.pt-who{height:260vh;background:#fff}
.pt-who-nav{list-style:none;margin-top:2.5rem;border-top:.0625rem solid var(--line)}
.pt-who-nav li{position:relative;padding:1.5rem 0 1.5rem 1.5rem;border-bottom:.0625rem solid var(--line);font-size:clamp(1.375rem,2vw,1.75rem);font-weight:700;color:#c4c9d0;transition:color .4s}
.pt-who-nav li::before{content:"";position:absolute;left:0;top:1.25rem;bottom:1.25rem;width:.1875rem;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.pt-who-nav li.on{color:var(--ink)}
.pt-who-nav li.on::before{transform:scaleY(1)}
.pt-who-board{position:relative;display:grid;min-height:24rem;border-radius:var(--m-r);background:var(--m-gray)}
.pt-who-board article{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;padding:3.5rem;opacity:0;transform:translateY(1.5rem);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pt-who-board article.on{opacity:1;transform:none}
.pt-who-board .no{font-size:4.5rem;font-weight:700;line-height:1;color:var(--blue)}
.pt-who-board .say{margin-top:2rem;font-size:clamp(1.5rem,2.2vw,2rem);font-weight:700;line-height:1.45;word-break:keep-all}
.pt-who-board .tx{margin-top:1.25rem;font-size:1.125rem;line-height:1.7;color:var(--sub)}

/* ⑧ 시작 절차: 가로 줄로 이어진 세 단계 */
.pt-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;position:relative}
.pt-steps::before{content:"";position:absolute;left:0;right:0;top:1.75rem;height:.0625rem;background:var(--line)}
.pt-steps li{position:relative}
.pt-steps .no{position:relative;display:inline-flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--blue);color:#fff;font-size:1.125rem;font-weight:700}
.pt-steps h3{margin-top:1.75rem;font-size:1.625rem;font-weight:700}
.pt-steps p{margin-top:.75rem;font-size:1.0625rem;line-height:1.7;color:var(--sub);word-break:keep-all}

/* ⑨ 본사가 준비한 것 */
.pt-offer{padding-top:0}
.pt-offer-box{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem 4rem;align-items:center;padding:4.5rem;border-radius:var(--m-r);background:var(--blue-soft)}
.pt-offer-tx .en{display:block;font-size:1rem;font-weight:600;color:var(--blue);margin-bottom:.875rem}
.pt-offer-tx h2{font-size:clamp(1.875rem,3.2vw,2.75rem);font-weight:700;line-height:1.3}
.pt-offer-tx p{margin-top:1.25rem;font-size:1.125rem;line-height:1.75;color:var(--sub);word-break:keep-all}
.pt-offer-tx p.strong{margin-top:1rem;color:var(--ink);font-weight:600}
.pt-offer-num{justify-self:end;text-align:right}
.pt-offer-num .k{font-size:1.125rem;font-weight:600;color:var(--sub)}
.pt-offer-num .big{display:flex;align-items:flex-end;justify-content:flex-end;gap:.5rem;margin-top:.5rem}
.pt-offer-num .big .en{font-size:clamp(5rem,9vw,8rem);font-weight:700;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.pt-offer-num .u{font-size:2rem;font-weight:700;padding-bottom:.75rem}
.pt-offer-num .s{margin-top:.75rem;font-size:1rem;color:var(--sub)}
.pt-offer-prod{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.pt-offer-prod figure{margin:0;aspect-ratio:1;border-radius:1.25rem;overflow:hidden;background:#fff}
.pt-offer-prod img{display:block;width:100%;height:100%}

/* ⑪ 마무리 */
.pt-cta{background:var(--blue) !important;color:#fff}
.pt-cta p{color:rgba(255,255,255,.8) !important}
.pt-cta .gf-btn.white{background:#fff;color:var(--ink)}

/* 휴대폰 */
@media(max-width:53.75rem){
  .pt-split{grid-template-columns:1fr;gap:2rem}
  .pt-hero-title{bottom:auto;top:calc(4.25rem + 5vh)}
  .pt-hero-desc{bottom:auto;top:calc(4.25rem + 5vh + 9rem);font-size:1rem}
  .pt-hero-art{left:0;right:0;width:auto;top:38vh;bottom:4vh}
  .pt-phone{height:min(46vh,26rem)}
  .pt-chip.c1{width:7rem}
  .pt-chip.c2,.pt-chip.c3{width:6rem}
  .pt-jn{grid-template-columns:1fr;gap:.75rem;margin-top:1.5rem}
  .pt-jn li{padding:1.25rem 1.5rem;display:grid;grid-template-columns:auto 1fr;column-gap:1.25rem;align-items:center}
  .pt-jn .no{font-size:2rem;grid-row:1/3}
  .pt-jn h3{margin-top:0;font-size:1.25rem}
  .pt-jn p{margin-top:.25rem;font-size:.9375rem}
  .pt-hub{width:min(22rem,100%)}
  .pt-way{width:8.5rem;padding:.875rem .625rem}
  .pt-way span{display:none}
  .pt-core{width:6rem}
  .pt-talk-win{height:44vh}
  .pt-chat .m-head p,.pt-route .m-head p{display:none}
  .pt-stage .m-head h2{font-size:1.625rem}
  .pt-core b{white-space:nowrap;font-size:1rem}
  .pt-talk .b{font-size:1rem;max-width:88%}
  .pt-duo{grid-template-columns:1fr;gap:1rem;margin-top:2rem}
  .pt-side{padding:1.75rem}
  .pt-side h3{font-size:1.5rem}
  .pt-side ul{margin-top:1rem;gap:.5rem}
  .pt-side li{font-size:1rem}
  .pt-who-nav{margin-top:1.25rem}
  .pt-who-nav li{padding:1rem 0 1rem 1.25rem;font-size:1.25rem}
  .pt-who-board{min-height:16rem}
  .pt-who-board article{padding:2rem}
  .pt-who-board .no{font-size:3rem}
  .pt-who-board .say{margin-top:1rem;font-size:1.25rem}
  .pt-steps{grid-template-columns:1fr;gap:2rem}
  .pt-steps::before{left:1.75rem;right:auto;top:0;bottom:0;width:.0625rem;height:auto}
  .pt-offer-box{grid-template-columns:1fr;padding:2.5rem 1.5rem}
  .pt-offer-num{justify-self:start;text-align:left}
  .pt-offer-num .big{justify-content:flex-start}
  .pt-offer-prod{grid-template-columns:repeat(2,1fr)}
}
/* 움직임 줄이기: 붙이지 않고 완성된 화면을 차례로 보여 준다 */
.pt-still .pt-hero,.pt-still .pt-journey,.pt-still .pt-route,.pt-still .pt-chat,.pt-still .pt-role,.pt-still .pt-who{height:auto}
.pt-still .pt-stage{position:relative;height:auto;overflow:visible;padding:8rem 0}
.pt-still .pt-hero .pt-stage{min-height:100vh}
.pt-still .pt-hero-btn{opacity:1;visibility:visible;transform:translate(-50%,0)}
.pt-still .pt-ul{--u:1}
.pt-still .pt-bar span{transform:none}
.pt-still .pt-jn li,.pt-still .pt-way,.pt-still .pt-talk .b,.pt-still .pt-side{opacity:1;transform:none}
.pt-still .pt-lines path{stroke-dashoffset:0}
.pt-still .pt-talk-win{height:auto;-webkit-mask-image:none;mask-image:none}
.pt-still .pt-fill .w{color:var(--ink)}
.pt-still .pt-who-board{display:flex;flex-direction:column}
.pt-still .pt-who-board article{opacity:1;transform:none}

/* ===== pt- 부품을 모든 서브페이지로 (10/27 팀장 「쇼핑몰 창업 구성을 다른 페이지에도」) ===== */
/* 붙어 있는 길이는 항목 수(--n, scenes.js)에 맞춘다 */
.pt-journey{height:calc(100vh + var(--n,3) * 47vh)}
.pt-who{height:calc(100vh + var(--n,3) * 45vh)}
.pt-role.short{height:180vh}
/* 첫 화면 큰 카드: 휴대폰(.pt-phone) 대신 사진 · 영상 카드 */
.pt-photo{position:relative;z-index:2;margin:0;height:min(62vh,34rem);aspect-ratio:4/5;border-radius:var(--m-r);overflow:hidden;background:#e9ecef;box-shadow:0 2rem 4rem rgba(10,10,10,.14);transform:rotate(8deg);will-change:transform}
.pt-photo img,.pt-photo video{display:block;width:100%;height:100%;object-fit:cover}
.pt-photo img[src*="/br_"]{object-position:30% 50%}
/* 단계 카드: 4개 · 6개 · 사진 */
.pt-jn.c4{grid-template-columns:repeat(4,1fr)}
.pt-jn.compact{gap:1rem}
.pt-jn.compact li{padding:1.5rem 1.75rem}
.pt-jn.compact .no{font-size:2.25rem}
.pt-jn.compact h3{margin-top:.875rem;font-size:1.25rem}
.pt-jn.compact p{margin-top:.5rem;font-size:1rem}
.pt-jn .pic{display:block;margin:-1rem -1rem 1.25rem;aspect-ratio:2/1;border-radius:1.125rem;overflow:hidden;background:var(--m-gray)}
.pt-jn .pic img{display:block;width:100%;height:100%;object-fit:cover}
.pt-jn .pic.phone img{object-fit:cover;object-position:top}
.pt-jn li:has(.pic){padding:2rem 2rem 2.25rem}
.pt-jn li:has(.pic) .no{font-size:2.25rem}
.pt-jn li:has(.pic) h3{margin-top:.75rem;font-size:1.375rem}
.pt-jn li:has(.pic) p{font-size:1rem}
.pt-journey .m-head p{max-width:52rem}
/* 목록 + 판: 긴 목록 · 사진 판 */
.pt-who-nav.sm li{padding:.875rem 0 .875rem 1.25rem;font-size:clamp(1.0625rem,1.4vw,1.25rem)}
.pt-who-nav.sm li::before{top:.75rem;bottom:.75rem}
.pt-who-nav.en li{font-family:'Archivo','Pretendard',sans-serif}
.pt-who .note{margin-top:1.5rem}
.pt-who-board.photo{background:none;min-height:0}
.pt-who-board.photo article{padding:0;justify-content:flex-start}
.pt-who-board.photo figure{margin:0;aspect-ratio:4/3;border-radius:var(--m-r);overflow:hidden;background:var(--m-gray);box-shadow:var(--shadow-card)}
.pt-who-board.photo figure img{display:block;width:100%;height:100%;object-fit:cover}
.pt-who-board.photo .tx{margin-top:1.25rem;font-size:1.125rem}
.wide-board .pt-who-board.photo figure{aspect-ratio:16/10}
/* 맞붙는 판: 세 장 · 사진 · 표 */
.pt-kick{display:block;text-align:center;font-size:1rem;font-weight:600;color:var(--blue);margin-bottom:1.25rem}
.pt-duo.c3{grid-template-columns:repeat(3,1fr)}
.pt-role .m-head{margin-bottom:0}
.pt-role .m-head+.pt-duo{margin-top:2.5rem}
.pt-side p{margin-top:.875rem;font-size:1.0625rem;line-height:1.7;color:var(--sub);word-break:keep-all}
.pt-side.hq p{color:rgba(255,255,255,.85)}
.pt-side .pic{display:block;margin:-1rem -1.25rem 1.5rem;aspect-ratio:16/9;border-radius:1.25rem;overflow:hidden;background:var(--m-gray)}
.pt-side .pic img{display:block;width:100%;height:100%;object-fit:cover}
.pt-side .pic.contain img{object-fit:contain;padding:1rem}
.pt-side .s-ico{display:block;width:3rem;height:3rem;margin-bottom:1.25rem}
.pt-side.hq .s-ico,.pt-side.hq .s-ico .pt{stroke:#fff}
.pt-side h3{word-break:keep-all;line-height:1.35}
.pt-duo.c3 .pt-side h3{font-size:1.375rem}
.pt-side .s-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;font-weight:600}
.pt-side.hq .s-link{color:#fff}
.pt-foot{margin-top:2rem;text-align:center;font-size:1.0625rem;line-height:1.7;color:var(--sub);word-break:keep-all}
.pt-dl{margin-top:1.25rem;display:flex;flex-direction:column;gap:.625rem}
.pt-dl div{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;font-size:1rem;line-height:1.6}
.pt-dl dt{font-weight:600;color:var(--sub)}
.pt-side.hq .pt-dl dt{color:rgba(255,255,255,.7)}
.pt-dl.lg{margin-top:2rem;border-top:.125rem solid var(--ink)}
.pt-dl.lg div{grid-template-columns:9rem 1fr;padding:1.125rem 0;border-bottom:.0625rem solid var(--line);font-size:1.0625rem}
.pt-dl.lg dt{color:var(--ink);font-weight:700}
.pt-dl.lg dd{color:var(--sub)}
/* 글 + 사진 · 글 + 글 */
.pt-split.top{align-items:start}
.pt-sol .m-head p{max-width:none}
.pt-sol .gf-btns{margin-top:2.5rem}
.pt-sol .note{margin-top:1.5rem}
.pt-sol-media.tall{aspect-ratio:4/5}
.pt-body p{font-size:1.125rem;line-height:1.85;color:var(--sub);word-break:keep-all}
.pt-body p+p{margin-top:1.25rem}
.pt-body .sign{margin-top:2rem;color:var(--ink);font-weight:700}
/* 숫자 줄 */
.pt-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:5rem}
.pt-counts div{padding:2rem 2.25rem;border-radius:var(--m-r);background:var(--blue-soft)}
.pt-counts dt{font-size:1.0625rem;font-weight:600;color:var(--sub)}
.pt-counts dd{margin-top:.5rem;font-size:clamp(3rem,5vw,4.5rem);font-weight:700;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
/* 준비 판의 브랜드 배너 사진 */
.pt-offer-prod.photo figure{aspect-ratio:auto;background:none}
.pt-offer-prod.photo img{aspect-ratio:4/3;object-fit:cover;border-radius:1.25rem}
.pt-offer-prod.photo figcaption{margin-top:.875rem;font-size:1rem;color:var(--sub)}
.pt-offer-prod.photo figcaption b{display:block;color:var(--ink);font-size:1.125rem}
/* 블루 마무리 판의 테두리 버튼 */
.pt-cta .gf-btn.line{border-color:rgba(255,255,255,.7);color:#fff}
.pt-cta .gf-btn.line:hover{background:#fff;color:var(--ink)}
.pt-cta h2 .en{display:block;margin-top:.5rem}
@media(max-width:53.75rem){
  .pt-photo{height:min(44vh,24rem)}
  .pt-jn.c4,.pt-duo.c3{grid-template-columns:1fr}
  .pt-jn.compact{grid-template-columns:1fr 1fr;gap:.5rem}
  .pt-jn.compact li{display:block;padding:1rem}
  .pt-jn.compact .no{font-size:1.5rem}
  .pt-jn.compact h3{font-size:1rem;margin-top:.375rem}
  .pt-jn li:has(.pic){padding:1.25rem 1.5rem}
  .pt-who-nav.sm li{padding:.5rem 0 .5rem 1rem;font-size:.9375rem}
  .pt-who-board.photo .tx{font-size:.9375rem;margin-top:.75rem}
  .pt-who .pt-split{gap:1.25rem}
  .pt-duo.c3 .pt-side{padding:1.25rem 1.5rem}
  .pt-duo.c3 .pt-side h3{font-size:1.125rem}
  .pt-side p{font-size:.9375rem}
  .pt-fill{font-size:1.375rem}
  .pt-dl.lg div{grid-template-columns:1fr;gap:.25rem}
  .pt-counts{grid-template-columns:1fr 1fr;gap:.75rem;margin-top:3rem}
  .pt-counts div{padding:1.25rem}
}
.pt-still .pt-journey,.pt-still .pt-who,.pt-still .pt-role.short{height:auto}
.pt-still .pt-photo{transform:none}
.pt-sol.gray{background:var(--m-gray)}
.pt-role.white{background:#fff}
/* 휴대폰: 단계 카드 · 목록 · 맞붙는 판은 붙이지 않고 다 펼친다 (scenes.js가 data-flat을 붙임) */
@media(max-width:53.75rem){
  [data-flat]{height:auto !important}
  [data-flat] .pt-stage{position:relative;height:auto;overflow:visible;padding:5rem 0}
  [data-flat] .pt-bar,[data-flat] .pt-who-nav{display:none}
  [data-flat] .pt-jn li,[data-flat] .pt-side{opacity:1;transform:none}
  [data-flat] .pt-who-board{display:flex;flex-direction:column;gap:1rem;min-height:0;background:none}
  [data-flat] .pt-who-board article{opacity:1;transform:none;padding:1.75rem;border-radius:var(--m-r);background:var(--m-gray)}
  [data-flat] .pt-who-board.photo article{padding:0;background:none}
  [data-flat] .pt-who-board .say{margin-top:.75rem}
  [data-flat] .pt-jn.compact li{display:block}
  [data-flat] .pt-jn.compact p{display:block;font-size:.875rem}
  [data-flat] .pt-jn li:has(.pic){display:block}
  [data-flat] .pt-jn li:has(.pic) .pic{display:block;margin:-.25rem -.5rem 1rem}
}
.pt-counts.flush{margin-top:0}
.pt-offer-box>.pt-dl.lg{margin-top:0;align-self:center}
.pt-offer-more{grid-column:1/-1;margin-top:0}
/* 앞 구역이 회색 · 붙는 구역이면 블루 판 위에 흰 여백을 둔다 (10/27 사업영역 흰 띠) */
:is(.pt-role,.pt-journey,.pt-who,.pt-chat,.m-sec.gray,.pt-sol.gray)+.pt-offer{padding-top:8rem}

/* ===== 창업 · 비즈니스 문의 팝업 (common.js gfLead) ===== */
.gf-lead{width:min(40rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);margin:auto;padding:0;border:0;border-radius:var(--m-r);background:#fff;color:var(--ink);box-shadow:0 2rem 5rem rgba(10,10,10,.25);overflow:auto}
.gf-lead::backdrop{background:rgba(10,10,10,.55);backdrop-filter:blur(.25rem)}
.gf-lead[open]{animation:gfLeadIn .35s var(--ease)}
@keyframes gfLeadIn{from{opacity:0;transform:translateY(1.5rem) scale(.98)}}
.gf-lead-in{position:relative;padding:3rem}
.gf-lead-x{position:absolute;right:1.25rem;top:1.25rem;width:2.75rem;height:2.75rem;border:0;border-radius:50%;background:var(--m-gray);color:var(--ink);font-size:1.125rem;cursor:pointer}
.gf-lead-x:hover{background:#e6e9ed}
.gf-lead-kick{display:block;font-size:1rem;font-weight:600;color:var(--blue)}
.gf-lead h2{margin-top:.5rem;font-size:1.875rem;font-weight:700}
.gf-lead-sub{margin-top:.75rem;font-size:1rem;line-height:1.7;color:var(--sub);word-break:keep-all}
.gf-lead form{margin-top:2rem}
.gf-lead .frow{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.gf-lead label{display:block;margin-bottom:.4375rem;font-size:.9375rem;font-weight:600}
.gf-lead input,.gf-lead select,.gf-lead textarea{width:100%;min-height:3rem;margin-bottom:1rem;padding:.75rem 1rem;border:.0625rem solid #dfe2e6;border-radius:.75rem;background:#fff;font:inherit;font-size:1rem;transition:border-color .2s}
.gf-lead input:focus,.gf-lead select:focus,.gf-lead textarea:focus{outline:0;border-color:var(--blue)}
.gf-lead textarea{resize:vertical}
.gf-lead .gf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.gf-lead .gf-agree{display:flex;align-items:center;gap:.625rem;margin:.25rem 0 0;font-weight:600;cursor:pointer}
.gf-lead .gf-agree input{width:1.25rem;height:1.25rem;min-height:0;margin:0;accent-color:var(--blue)}
.gf-agree-tx{margin-top:.5rem;font-size:.875rem;line-height:1.6;color:var(--sub);word-break:keep-all}
.gf-lead-err{margin-top:1rem;padding:.875rem 1rem;border-radius:.75rem;background:#fdecec;color:#b42318;font-size:.9375rem;line-height:1.6}
.gf-lead-err a{text-decoration:underline}
.gf-lead .submit{width:100%;min-height:3.5rem;margin-top:1.5rem;border:0;border-radius:6.25rem;background:var(--blue);color:#fff;font:inherit;font-size:1.0625rem;font-weight:600;cursor:pointer;transition:background .3s}
.gf-lead .submit:hover{background:var(--blue-deep)}
.gf-lead .submit:disabled{opacity:.6;cursor:wait}
.gf-lead .note{margin-top:1.25rem}
.gf-lead-done{padding:3rem 0 1rem;text-align:center}
.gf-lead-done .ok{width:4.5rem;height:4.5rem;margin:0 auto 1.25rem;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1.75rem}
.gf-lead-done .t{font-size:1.375rem;font-weight:700}
.gf-lead-done .d{margin-top:.5rem;color:var(--sub)}
.gf-lead-done .gf-btn{margin-top:2rem;border:0;cursor:pointer}
@media(max-width:40rem){
  .gf-lead-in{padding:2.25rem 1.25rem 1.75rem}
  .gf-lead .frow{grid-template-columns:1fr}
  .gf-lead h2{font-size:1.5rem}
}

/* ===== 회사소개 CI — 작게 (10/27 팀장 「카드 영역이 너무 커」) ===== */
.ci-wrap{align-items:center}
.ci-colors{list-style:none;margin-top:2rem;display:flex;flex-direction:column;border-top:.0625rem solid #dfe3e8}
.ci-colors li{display:flex;align-items:center;gap:1rem;padding:.875rem 0;border-bottom:.0625rem solid #dfe3e8;font-size:1.0625rem;font-weight:600}
.ci-colors i{width:1.5rem;height:1.5rem;border-radius:50%;flex-shrink:0}
.ci-colors .c1{background:#0074E0}
.ci-colors .c2{background:#212426}
.ci-colors .c3{background:#fff;box-shadow:inset 0 0 0 .0625rem #d5d9de}
.ci-colors span{margin-left:auto;font-size:.9375rem;font-weight:500;color:var(--sub)}
.ci-logos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ci-logos figure{margin:0;display:flex;flex-direction:column;gap:.875rem;padding:1.5rem;border-radius:1.25rem;background:#fff}
.ci-logos figure.wide{grid-column:1/-1}
.ci-logos figure.dark{background:var(--ink)}
.ci-logos img{display:block;height:3.25rem;max-width:100%;margin:.75rem auto;object-fit:contain}
.ci-logos figure.wide img{height:3.75rem}
.ci-logos figure:not(.wide) img{height:2.75rem}
.ci-logos figcaption{font-size:.875rem;font-weight:600;color:var(--sub)}
.ci-logos figure.dark figcaption{color:rgba(255,255,255,.7)}

/* 10/27 판 안 버튼은 늘 판 맨 아래에 붙인다 · 블루 판의 밑줄은 흰색 */
.pt-side{display:flex;flex-direction:column}
.pt-side .s-link{align-self:flex-start;margin-top:auto;padding-top:1.5rem}
.pt-side .pt-dl+.s-link,.pt-side p+.s-link{margin-top:auto}
.pt-side.hq .s-link{border-bottom-color:#fff}
/* 10/27 명함 로고(가로형 영문 SVG)로 교체 — 가로가 길어 높이를 조금 낮춤 */
.gf-logo img{height:1.5rem}