/**************************************
메인 공통
**************************************/
.main { font-family:'Pretendard',"Noto Sans KR",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; } 
.main-inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; } 

.br-block { display: none; } 
/**************************************
메인비주얼
**************************************/
.main-visual { position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; background:#05070b; color:#f4f7ff; } 
.main-visual-bg { position:absolute; inset:0; z-index:0; } 
.main-visual-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.05) brightness(.75); transform:scale(1.02); } 
.main-visual-overlay { position:absolute; inset:0; background:
 radial-gradient(60% 60% at 30% 30%, rgba(156,255,209,.12), transparent 55%),
 radial-gradient(70% 70% at 70% 60%, rgba(120,170,255,.10), transparent 55%),
 linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.55) 40%, rgba(0,0,0,.72)); } 

/* .main-visual-figure { position:absolute; right:-2vw; bottom:-2vh; width:min(720px, 55vw); height:auto; opacity:.55; filter:contrast(1.05) brightness(.9); z-index:1; pointer-events:none; } */
.main-visual-inner { position:relative; z-index:2; width:min(1180px, calc(100% - 40px)); padding:90px 0 70px; } 
.main-visual-title { margin:0; line-height:1.5; } 
.main-visual-q,
.main-visual-a { display:block; } 
.main-visual-q { font-size:40px; opacity:.95; text-shadow:0 14px 40px rgba(0,0,0,.35); } 
.main-visual-a { font-size:54px; margin-top:10px; opacity:0; transform:translateY(12px); filter:blur(6px); color:#fff; text-shadow:0 20px 60px rgba(0,0,0,.55); font-weight:900; } 
.main-visual.is-answer .main-visual-a { opacity:1; transform:translateY(0); filter:blur(0); transition:opacity .7s ease, transform .7s ease, filter .7s ease; } 
.main-visual.is-answer .main-visual-q { opacity:.78; font-weight:700; transition:opacity .7s ease; font-size:40px; } 
.main-visual-sub { margin:40px 0 0; font-size:22px; line-height:1.7; color:rgba(244,247,255,.75); max-width:62ch; } 
.main-visual-accent { color:#9cffd1; font-weight:800; } 

.main-visual-scroll { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); width:34px; height:54px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.18); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:grid; place-items:center; cursor:pointer; z-index:3; } 
.main-visual-dot { width:6px; height:6px; border-radius:99px; background:rgba(255,255,255,.75); animation:mainVisualDot 1.3s ease-in-out infinite; } 
@keyframes mainVisualDot { 
 0% { transform:translateY(-10px); opacity:.35; } 
 50% { transform:translateY(0); opacity:1; } 
 100% { transform:translateY(10px); opacity:.35; } 
 }

@media screen and (max-width:1024px){
 .main-visual.is-answer .main-visual-q { word-break:keep-all; } 
 .main-visual-q { font-size: 28px !important; } 
 .main-visual-a { font-size:38px; word-break:keep-all; } 
 .main-visual-sub { font-size:18px; } 
 }
@media screen and (max-width:980px){
 .main-visual-inner { padding:84px 0 64px; } 
/* .main-visual-figure { right:-6vw; width:min(640px, 70vw); opacity:.45; } */ } 
@media screen and (max-width:640px){
 .main-visual-inner { width:calc(100% - 32px); padding:76px 0 58px; } 
 .main-visual.is-answer .main-visual-q { word-break:keep-all; } 
 .main-visual-q { font-size:20px !important;; } 
 .main-visual-a { font-size:26px; word-break:keep-all; } 
/* .main-visual-figure { right:-18vw; bottom:-4vh; width:88vw; opacity:.36; } */
 .main-visual-sub { margin-top:14px; font-size:16px; } 
 .main-visual-scroll { bottom:14px; } 
 }
@media (prefers-reduced-motion:reduce){
 .main-visual-dot { animation:none; } 
 .main-visual.is-answer .main-visual-a,
 .main-visual.is-answer .main-visual-q { transition:none; } 
 }
@media screen and (max-width:430px){
 .main-visual-q .br-block { display: block; } 
 .main-visual-sub .br-block { display: block; } 
 }

/**************************************
문제제기 섹션
**************************************/
.problem { background: #f7f7f7; padding: 0; } 
.problem-inner { width:100%; height: 100vh; display: flex; align-items: center; max-width: 1400px; margin: 0 auto; padding: 0 5vw; gap: 6vw; } 
.problem-left { flex: 1; } 
.problem-kicker { font-size: 26px; letter-spacing: 0.1em; color: #999; margin-bottom: 20px; } 

.problem-lines { position: relative; height: 120px; } 
.problem-line { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(10px); will-change: transform, opacity; } 
/* .problem-line.active { opacity: 1; } */

.problem-text { font-size: 56px; font-weight: 800; } 
.problem-text b { color: #ff2b2b; } 
.problem-strike { position: absolute; left: 0; top: 52%; height: 6px; /* 굵기 */
background: #ff2b2b; width: 0; transform-origin: left center; border-radius: 999px; } 
.problem-copy { font-size: 26px; line-height: 1.7; font-weight: 500; color: #111; letter-spacing: -.7px; word-break: keep-all; } 

/* RIGHT 지도 */
.problem-right { flex: 1; } 
.problem-map { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #eaeaea; border-radius: 12px; overflow: hidden; } 
.map-wrapper { width: 100%; /* max-width: 900px; margin: 0 auto; */ padding: 20px; box-sizing: border-box; } 
.map-wrapper { --map-url: url("../../images/main4/map.png"); position: relative; width: 100%; max-width: 980px; margin: 0 auto; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background-image: var(--map-url); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 12px 40px rgba(0,0,0,.12); } 

.map-overlay { position: absolute; inset: 0; pointer-events: none; } 
.x-mark { position: absolute; width: clamp(58px, 7vw, 88px); height: auto; opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(.98); transition: opacity .25s ease; } 

/* 크레파스 */
.x-mark .stroke { fill: none; stroke: #e31919; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; opacity: .95; stroke-dasharray: 220; stroke-dashoffset: 220; } 
.x-mark .stroke.b { stroke-width: 14; opacity: .9; } 
.map-overlay.is-run .x-mark { opacity: 1; } 

/* 각 X가 "그려지는" 모션 */
.map-overlay.is-run .x-mark.is-draw .stroke { animation: drawStroke .55s ease forwards; } 

/* 두번째 선은 살짝 딜레이 */
.map-overlay.is-run .x-mark.is-draw .stroke.b { animation-delay: .10s; } 

@keyframes drawStroke { to { stroke-dashoffset: 0; } 
 }

/* X 전체 사라짐 */
.map-overlay.is-fadeout .x-mark { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(.98); transition: opacity .55s ease, transform .55s ease; } 

/* 빛나는 동그라미 */
.target-pin { position: absolute; width: clamp(20px, 2.4vw, 30px); height: clamp(20px, 2.4vw, 30px); border-radius: 999px; transform: translate(-50%, -50%); opacity: 0; scale: .9; transition: opacity .4s ease, scale .4s ease; } 

/* 중앙 원 */
.target-pin::before { content:""; position:absolute; inset: 0; border-radius: 999px; background: rgba(255, 60, 60, 1); box-shadow:
 0 0 0 6px rgba(255, 60, 60, .20),
 0 0 24px rgba(255, 60, 60, .55); } 

/* 바깥 펄스 링 */
.target-pin::after { content:""; position:absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 999px; transform: translate(-50%, -50%); border: 3px solid rgba(255, 60, 60, .55); opacity: 0; } 
.map-overlay.is-pin .target-pin { opacity: 1; scale: 1; animation: pinBlink 1.1s ease-in-out infinite; } 
.map-overlay.is-pin .target-pin::after { animation: ringPulse 1.1s ease-out infinite; } 

@keyframes pinBlink { 0%, 100% { filter: brightness(1); } 
 50% { filter: brightness(1.35); } 
 }

@keyframes ringPulse { 
 0% { width: 12px; height: 12px; opacity: .0; } 
 20% { opacity: .7; } 
 100% { width: 70px; height: 70px; opacity: 0; } 
 }

/* 모션 최소화 선호 시: 즉시 표시 */
@media (prefers-reduced-motion: reduce){
 .x-mark .stroke { animation: none !important; stroke-dashoffset: 0 !important; } 
 .map-overlay.is-pin .target-pin,
 .map-overlay.is-pin .target-pin::after { animation: none !important; } 
 }

@keyframes stroke { to { stroke-dashoffset: 0; } 
 }

@keyframes fillFade { to { fill-opacity: 1; } 
 }



@media screen and (max-width: 1280px){
 .problem-kicker { font-size: 20px; } 
.problem-text { font-size: 40px; } 
.problem-copy { font-size: 20px; } 
 }
@media screen and (max-width: 900px){
 .problem-right { width: 100%; } 
.problem-inner { align-items: flex-start; flex-direction: column; height: auto; padding: 80px 16px; } 
.problem-lines { height: auto; } 
.problem-line { position: relative; opacity: 1; margin-bottom: 20px; } 
.problem-strike { animation: mobileStrike 1s ease forwards; height: 3px; } 
 }
@media screen and (max-width: 640px){
 .problem-kicker { font-size: 16px; } 
 .problem-text { font-size: 24px; } 
 .problem-strike { height: 2px; } 
 .problem-copy { font-size: 16px; margin-top: 24px; } 
 .problem-strike { animation: mobileStrike2 1s ease forwards; } 
 }

@keyframes mobileStrike { to { width: 100%; } 
 }

@keyframes mobileStrike2 { to { width: 70%; } 
 }



/**************************************
가이드 소개 섹션
**************************************/
#guideSticky, 
#guideSticky * { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } 
#guideSticky { } 
.guide-section { background: #0c0f14; background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url(../../images/main4/guide_bg.jpg); background-position: center center; background-size: contain; /* background-repeat: inherit; */
 color: #fff; padding: 120px 0; } 
.guide-inner { width: min(1200px, calc(100% - 16px)); margin: 0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; box-sizing: border-box; } 

/* LEFT */
.guide-media { position:sticky; top:40px; height:65vh; border-radius:22px; overflow:hidden; background:#0a0d12; } 
.guide-media img { width: 100%; height: 100%; } 
.media-frame { width:100%; height:100%; border-radius:22px; overflow:hidden; } 

.media-grain { position:absolute; inset:-20%; opacity:.15; pointer-events:none; } 

/* RIGHT */
.guide-copy { min-height:75vh; } 
.copy-sticky { position:sticky; top:40px; padding-left: 20px; border-radius:22px;/*  background:rgba(12,15,20,.6); backdrop-filter:blur(8px); */ } 

.copy-eyebrow { font-size:26px; letter-spacing:.2em; opacity:.6; } 
.copy-title { font-size:36px; margin:12px 0 20px; word-break: keep-all; } 

.copy-panel { height:420px; overflow: hidden; } 
.panel-block { animation:fadeUp .4s ease both; } 

.step-title { font-size: 36px; margin: 60px 0 16px 0; } 
.step-list { margin:0; display:grid; gap:8px; opacity:.92; line-height:1.6; } 
.step-list li { font-size: 20px; line-height:1.6; word-break: keep-all; } 
.step-txt { font-size: 20px; line-height:1.6; word-break: keep-all !important; } 
.step-txt.fsb { font-size: 28px; margin-top: 120px; font-weight: 600; } 


.copy-progress { display:flex; gap:8px; margin-top:20px; } 
.dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); } 
.dot.is-on { background:#fff; } 

/* 스크롤 “트리거 높이” */
.copy-steps .step { height:55vh; } 

/* 데스크톱에서는 step-content는 숨기고(스크롤 트리거만 사용) 패널만 보이게 */
.step-content { display:none; } 
.copy-mobile { display:none; } 


@media screen and (max-width:980px){
 .guide-inner { grid-template-columns:1fr; } 
 .guide-media { height: 40vh; } 
 .guide-media,
 .copy-sticky { position:static; top:20px; } 

 .copy-panel,
 .copy-progress,
 .copy-steps { display:none; } 

 .copy-mobile { display:block; margin-top:20px; display:grid; gap:16px; } 
 .copy-mobile .panel-block { padding:18px; border-radius:18px; background:rgba(12,15,20,.45); border:1px solid rgba(255,255,255,.08); } 
 .copy-mobile .step-content { display:block; } 


 .step-title { margin: 12px 0 16px 0; } 
 .step-txt.fsb { margin-top: 0; } 
 }

 @media screen and (max-width:768px){
 .copy-eyebrow { font-size: 20px; } 
 .copy-title { font-size: 32px; line-height: 1.5; } 
 .step-txt { font-size: 18px; } 
 .step-title { font-size: 28px; } 
 .step-txt.fsb { font-size: 18px; } 
 }

@keyframes fadeUp { 
 from { opacity:0; transform:translateY(10px); } 
to { opacity:1; transform:translateY(0); } 
 }


 
 @media screen and (max-width:640px){
 .copy-eyebrow { font-size: 16px; } 
 .copy-title { font-size: 24px; } 
 .step-txt { font-size: 16px; } 
 .step-title { font-size: 20px; margin: 5px 0 5px 0; } 
 }

 @media screen and (max-width:480px){
 .step-txt .br-none { display: none; } 
 }


/**************************************
프로세스 섹션
**************************************/
.plan { background:#00573f; color:#fff; padding:clamp(70px,7vw,140px) 0; } 

.plan-inner { width:100%; } 

.plan-head { margin-bottom:28px; } 
.plan-eyebrow { display:inline-block; font-size:26px; letter-spacing:.28em; opacity:.6; } 
.plan-title { font-size:44px; margin:10px 0 10px; line-height:1.15; word-break: keep-all; } 
.plan-sub { margin:0; opacity:.78; line-height:1.6; max-width:64ch; } 

/* TIMELINE */
.timeline { position:relative; margin-top:34px; padding:26px 18px 26px; border-radius:22px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); overflow:hidden; } 
.tl-rail { position:absolute; left:28px; right:28px; top:66px; height:8px; border-radius:999px; background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); } 
.tl-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative; z-index:1; } 
.tl-item { position:relative; min-height:170px; display:flex; flex-direction:column; align-items:center; } 
.tl-node { width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.28); border:2px solid rgba(255,255,255,.18); box-shadow:0 0 0 6px rgba(255,255,255,.03); margin-top:32px; } 
.tl-card { margin-top:18px; width:min(240px, 100%); text-align:center; padding:16px 14px 18px; border-radius:18px; background:rgba(12,15,20,.55); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(8px); } 
.tl-step { font-size:13px; letter-spacing:.16em; opacity:.72; } 
.tl-name { display:block; margin-top:8px; font-size:24px; line-height:1.2; word-break: keep-all; } 
.tl-core { display:inline-block; font-style:normal; margin-left:8px; padding:3px 8px; border-radius:999px; font-size:12px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14); } 

/* STEP3 강조 */
.tl-item.is-core .tl-node { background:#fff; border-color:rgba(255,255,255,.55); box-shadow:0 0 0 8px rgba(255,255,255,.07), 0 0 22px rgba(255,255,255,.35); } 
.tl-item.is-core .tl-card { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.06); box-shadow:0 18px 45px rgba(0,0,0,.35); } 

/* 말풍선 + 하이라이트 스윕 */
.tl-bubble { position:relative; margin:14px auto 0; display:inline-flex; align-items:center; justify-content:center; word-break: keep-all; padding:12px 14px; border-radius:14px; font-size:22px; font-weight: bold; line-height:1.35; color:#0c0f14; background:#ffffff; max-width: 22ch; box-shadow:0 18px 45px rgba(0,0,0,.35); overflow:hidden; } 

.tl-bubble::before { content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(45deg); width:14px; height:14px; background:#fff; border-radius:3px; } 

.bubble-glow { position:absolute; inset:-40% -60%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.0), rgba(0,0,0,.08), rgba(255,255,255,.55), rgba(0,0,0,.08), rgba(255,255,255,.0),
transparent); transform:translateX(-40%); animation:shine 1.6s ease-in-out infinite; pointer-events:none; } 

/* 살짝 “펄스” */
.tl-item.is-core .tl-bubble { animation:bubblePulse 1.8s ease-in-out infinite; } 

@keyframes shine { 
 0% { transform:translateX(-55%) rotate(8deg); opacity:.0; } 
 20% { opacity:.65; } 
 50% { opacity:.9; } 
 80% { opacity:.55; } 
 100% { transform:translateX(55%) rotate(8deg); opacity:0; } 
 }

@keyframes bubblePulse { 0%,100% { transform:translateY(0); } 
 50% { transform:translateY(-3px); } 
 }

.tl-item.is-core.is-ignite .tl-card { animation:ignite 700ms ease both; } 
@keyframes ignite { 
 0% { transform:scale(.98); filter:brightness(1); } 
 55% { transform:scale(1.02); filter:brightness(1.25); } 
 100% { transform:scale(1); filter:brightness(1.05); } 
 }

 @media screen and (max-width: 1024px){
 .plan-eyebrow { font-size: 20px; } 
 .plan-title { font-size: 32px; } 
 }
@media screen and (max-width: 900px){
 .timeline { padding:22px 16px; } 
 .tl-rail { left:24px; right:auto; top:24px; bottom:24px; width:8px; height:auto; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); } 
 .tl-list { grid-template-columns:1fr; gap:14px; } 
 .tl-item { min-height:auto; align-items:flex-start; padding-left:36px; } 
 .tl-node { margin-top:0; position:absolute; left:4px; top:26px; } 
 .tl-card { text-align:left; width:100%; } 
 .tl-bubble { margin-left:0; width: 100%; max-width: 100%; } 
 .tl-bubble::before { left:18px; transform:translateX(0) rotate(45deg); } 
 }

 @media screen and (max-width: 640px){
 .plan-title { font-size: 24px; line-height: 1.5; } 
 .plan-eyebrow { font-size: 16px; } 
 .tl-name { font-size: 18px; } 
 .tl-bubble { font-size: 18px; line-height: 1.5; } 
 }

 @media screen and (max-width:430px){
 .plan-title .br-block { display: block; } 
 }

/**************************************
증거 카운팅 섹션
**************************************/
.success { position: relative; overflow: hidden; padding: clamp(130px, 5vw, 140px) 0; color: #fff; } 

/* 실제 매장 사진으로 교체 */
.success-bg { position:absolute; inset:0; background-image: url("../../images/main4/mv_slide1.jpg"); background-size: cover; background-position: center; transform: scale(1.03); filter: saturate(1.05) contrast(1.02); } 

.success-overlay { position:absolute; inset:0; background:
 radial-gradient(1800px 600px at 50% 30%, rgba(0,0,0,.3), rgba(0,0,0,.4)),
 linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.4)); pointer-events: none; } 

.success-inner { position: relative; width:100%; } 

.success-head { margin-bottom: 34px; text-align: center; } 

.success-title { margin: 0 0 10px; font-size: 38px; line-height: 1.15; font-weight: 800; word-break: keep-all; } 
.success-sub { margin-top: 30px; font-size: 22px; line-height: 1.75; opacity: .92; } 

.success-grid { margin-top: 30px; display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px, 2.4vw, 28px); align-items: start; } 

.success-copy { height: 100%; display: flex; background: rgba(0,0,0,.28); border: 3px solid rgba(255,255,255,1); border-radius: 18px; padding: clamp(18px, 2.2vw, 26px); backdrop-filter: blur(8px); } 
.success-copy p { margin: 0 0 14px; line-height: 1.85; font-size: 15px; opacity: .95; } 

.success-points { margin: 0; padding-left: 18px; display: grid; word-break: keep-all; gap: 10px; line-height: 1.7; opacity: .95; font-size: 14px; } 
.success-points li { font-size: 22px; } 
.success-points .result { list-style: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; } 
.success-points b { font-weight: 800; } 
.cl-ffcc00 { color: #ffcc00; } 
.success-points b.fp-txt { font-size: 34px; color: #00f3ae; } 

.success-metric { display:grid; gap: 14px; } 

.metric-card { border-radius: 18px; padding: clamp(18px, 2.2vw, 26px); background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); } 
.metric-label { margin: 0 0 10px; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; opacity: .9; } 
.metric-number { font-family: "Roboto", sans-serif; font-weight: 900; letter-spacing: -0.02em; line-height: 1.0; font-size: 64px; text-shadow: 0 12px 40px rgba(0,0,0,.45); } 
.metric-number .count { display:inline-block; /* background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.72)); */
 background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.72)); -webkit-background-clip: text; background-clip: text; color: transparent; } 
.metric-hint { margin: 10px 0 0; font-size: 14px; opacity: .75; } 

.table-card { border-radius: 18px; overflow: hidden; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); } 

.success-table { width:100%; border-collapse: collapse; font-size: 14px; } 
.success-table thead th { width: 50%; text-align: center; padding: 14px 16px; background: rgba(255,255,255,.10); font-weight: 800; letter-spacing: .02em; } 
.success-table tbody td { font-family: "Roboto", sans-serif; text-align: center; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08); opacity: .95; font-size: 18px; } 
.ta-r { font-weight: bold; font-size: 20px !important; } 

@media screen and (max-width: 1280px){
 .success-sub { font-size: 18px; word-break: keep-all; } 
 .success-points li { font-size: 18px; } 
 .metric-number { font-size: 56px; } 
 }
@media screen and (max-width: 980px){
 .success-title { font-size: 32px; line-height: 1.5; } 
 .success-grid { grid-template-columns: 1fr; } 
 .success-points { padding-left: 0; } 
 }

@media screen and (max-width: 640px){
 .success-inner { width:100%; } 
 .success-title { font-size: 24px; } 
 .success-sub { font-size: 16px; margin-top: 16px; } 
 .success-points li { font-size: 16px; } 
.metric-number { font-size: 40px; } 
.success-table tbody td { font-size: 16px; } 
.ta-r { font-size: 17px !important; } 
.success-points b.fp-txt { font-size: 24px; } 


 .success-sub .br-none { display: none; } 
 }

@media screen and (max-width:430px){
 .success-title .br-block { display: block; } 
 .success-points b.fp-txt { font-size: 18px; } 
 }
/**************************************
새로운 기회 섹션
**************************************/
.future-hero { width: 100%; height: 100%; padding: 120px 0; background: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)),url(../../images/main4/future_bg.jpg) center/cover no-repeat; position: relative; overflow: hidden; } 


/* layout */
.future-wrap { width: calc(100% - 40px); max-width: 1100px; margin: 0 auto; min-height: 520px; display: flex; align-items: center; justify-content: center; position: relative; } 

/* subtle grains / glow */
.future-hero::before { content:""; position:absolute; inset:0; background:
 radial-gradient(900px 600px at 18% 22%, rgba(210, 232, 255, .45), transparent 60%),
 radial-gradient(800px 520px at 80% 70%, rgba(255, 235, 210, .35), transparent 58%); pointer-events:none; } 
.future-hero::after { content:""; position:absolute; inset:0; opacity:.18; background-image: radial-gradient(rgba(0,0,0,.2) 1px, transparent 1px); background-size: 14px 14px; pointer-events:none; } 

/* center box */
.future-center { width: 100%; text-align: center; padding: 28px 18px; border-radius: 26px; position: relative; } 

/* eyebrow */
.future-eyebrow { display:flex; gap:10px; align-items:center; justify-content:center; margin-bottom: 12px; } 
.future-pill { display:inline-flex; align-items:center; justify-content:center; padding: 7px 10px; border-radius: 999px; background: #eef2ff; border: 1px solid rgba(0,0,0,.08); font-size: 12px; font-weight: 900; letter-spacing: .1em; } 
.future-eyebrow-text { font-size: 26px; font-weight: 800; letter-spacing: .08em; color: rgba(0,0,0,.62); } 

/* title */
.future-title { margin: 0 0 10px; line-height: 1.5; font-size: 44px; font-weight: 900; color:#0b1220; } 

/* 기본 상태: 실행 안 됨 */
.reveal-line { display:block; opacity: 0; transform: translateY(14px); filter: blur(6px); } 
.keyword-chip { display:inline-flex; align-items:center; justify-content:center; padding: 10px 12px; border-radius: 999px; background: #ffffff; border: 1px solid rgba(0,0,0,.08); color: rgba(0,0,0,.78); font-size: 22px; font-weight: 900; letter-spacing: -0.01em; box-shadow: 0 10px 22px rgba(15, 30, 60, .06); opacity: 0; transform: translateY(10px); } 
.keyword-chip i { padding-right: 12px; } 
.emphasis-underline { position:absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 999px; background: rgba(0,0,0,.18); transform-origin: left; transform: scaleX(0); } 

/* 섹션 진입 시 실행 */
.future-hero.is-inview .reveal-line { animation: future-rise .8s ease forwards; } 
.future-hero.is-inview .reveal-line.strong { animation-delay: .12s; } 

.future-hero.is-inview .keyword-chip { animation: chip-in .6s ease forwards; } 
.future-hero.is-inview .keyword-chip:nth-child(1) { animation-delay: .18s; } 
.future-hero.is-inview .keyword-chip:nth-child(2) { animation-delay: .26s; } 
.future-hero.is-inview .keyword-chip:nth-child(3) { animation-delay: .34s; } 

.future-hero.is-inview .emphasis-underline { animation: underline-draw .9s ease forwards; animation-delay: .36s; } 

/* keyframes */
@keyframes future-rise { to { opacity: 1; transform: translateY(0); filter: blur(0); } 
 }

@keyframes chip-in { to { opacity:1; transform: translateY(0); } 
 }

@keyframes underline-draw { to { transform: scaleX(1); } 
 }

/* quote & desc */
.future-quote { margin: 0 0 12px; color: #111; font-size: 32px; line-height: 1.85; font-weight: 700; word-break: keep-all; } 
.quote-mark { font-weight: 900; color: #111; word-break: keep-all; } 
.future-desc { margin: 0 auto 16px; color: #111; font-size: 24px; font-weight: 500; line-height: 1.95; word-break: keep-all; } 

/* keywords */
.future-keywords { display:flex; gap: 10px; justify-content:center; flex-wrap: wrap; margin-bottom: 16px; } 

/* emphasis */
.future-emphasis { position: relative; display:inline-block; margin: 0 auto 18px; padding-bottom: 8px; } 
.emphasis-text { font-weight: 900; letter-spacing: -0.02em; color: rgba(0,0,0,.78); font-size: 14px; } 


@media screen and (max-width: 980px){
 .future-eyebrow-text { font-size: 20px; } 
 .future-hero { padding: 70px 0; } 
 .future-title { font-size: 28px; } 
 .future-wrap { min-height: 480px; } 
 .future-quote { font-size: 24px; } 
 .future-desc { font-size: 18px; } 
 .keyword-chip { font-size: 18px; } 
 }
 @media screen and (max-width: 600px){
 .future-desc .br-none { display: none; } 
 }

@media screen and (max-width: 520px){
 .future-hero { padding: 54px 0; } 
 .future-wrap { width: calc(100% - 16px); min-height: auto; } 
 .future-center { padding: 22px 0; border-radius: 20px; } 
 .future-title { font-size: 25px; } 
 .future-eyebrow-text { font-size: 18px; } 
 .future-quote { font-size: 20px; } 
 .future-desc { font-size: 16px; } 
 .keyword-chip { font-size: 14px; } 
 }
@media (prefers-reduced-motion: reduce){
 .reveal-line,
 .keyword-chip { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; } 
 .emphasis-underline { transform: scaleX(1) !important; animation: none !important; } 
 }