@charset "utf-8";

/* ************************************************************
 * GEO · AEO · SEO 최적화 페이지 전용 스타일
 * 경로 : /service/css/geo.css
 ************************************************************ */

/*** 공통 ***/
span.tx_yellow {color:var(--base4);}
span.tx_blue {color:var(--blue);}
span.tx_red {color:var(--base1);}
span.tx_redline {text-decoration:underline!important; color:var(--base1); text-underline-offset:3px;}

.service .subpart {padding:120px 0;}
.service .titWrap h2 {font-size:64px; font-weight:700; color:#000; text-align:center; line-height:1.2; }
.service .horizon .titWrap h2 {text-align:left; }
.service .titWrap h2 strong {font-weight:700;}
.service .titWrap > p {padding-top:30px; position:relative; font-size:17px; color:#000;}
.service .titWrap > p:before {content:""; width:50px; height:2px; position:absolute;}
.service .sec-label {font-size:24px;}
/* ====== HERO 인트로 ====== */
.geo_hero {background:var(--bg1);}
.geo_hero .hero-grid {display:grid; grid-template-columns:1fr 40vw; gap:80px; align-items:center;}
.geo_hero .hero-left .hero-tag {
	display:inline-flex; align-items:center; gap:8px;
	background:rgba(234,34,39,.08); border:1px solid rgba(234,34,39,.25);
	color:var(--base1); font-size:13px; font-weight:700;
	letter-spacing:.08em; text-transform:uppercase;
	padding:6px 16px; border-radius:50px; margin-bottom:28px;
}
.geo_hero .hero-left h2 {
	font-size:clamp(28px,3.5vw,50px); font-weight:900; line-height:1.2;
	color:#000; letter-spacing:-.03em; margin-bottom:24px;
}
.geo_hero .hero-left h2 strong {color:var(--base1); font-weight:900;}
.geo_hero .hero-left > p {color:var(--gray1); font-size:17px; line-height:1.8; margin-bottom:36px;}

.geo_hero .hero-right .platform-panel {
	background:#fff; border:1px solid var(--border); border-radius:20px;
	padding:32px; box-shadow:0 10px 40px rgba(11,31,74,.06);
}
.platform-panel .panel-title {
	display:block; color:var(--gray1); font-size:18px; font-weight:700;
	letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px;
}
.platform-panel .platform-list {display:flex; flex-direction:column; gap:10px;}
.platform-panel .platform-list li {
	display:flex; align-items:center; gap:12px;
	background:var(--bg1); border:1px solid var(--border);
	border-radius:12px; padding:13px 16px;
	transition:all .25s ease;
}
.platform-panel .platform-list li:hover {
	background:#fff; border-color:var(--base1); transform:translateX(4px);
}
.platform-panel .p-icon {
	width:40px; height:40px; background:var(--base2); color:#fff;
	border-radius:8px; display:flex; align-items:center; justify-content:center;
	flex-shrink:0; font-weight:800; font-size:12px;
}
.platform-panel .p-info {flex:1; min-width:0;}
.platform-panel .p-info strong {display:block; color:#000; font-weight:700; transform:translateY(3px);}
.platform-panel .p-info em {color:var(--gray1); font-size:14px;}
.platform-panel .p-badge {
	background:var(--base1); color:#fff; font-size:12px; font-weight:600;
	padding:3px 8px; border-radius:4px; flex-shrink:0;
}

/* ====== 통계 바 ====== */
.stats_bar {background:var(--base2); padding:60px 0!important;}
.stats_bar .stats-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.stats_bar .stats-grid li {
	text-align:center; padding:20px;
	border-right:1px solid rgba(255,255,255,.1);
}
.stats_bar .stats-grid li:last-child {border-right:none;}
.stats_bar .stats-grid strong {
	display:block; color:#fff; font-size:clamp(32px,5vw,80px);
	letter-spacing:-.04em; line-height:1.05;
}
.stats_bar .stats-grid strong span {font-size:.5em; margin-left:4px;}
.stats_bar .stats-grid p {color:rgba(255,255,255,.7); font-size:14px; margin-top:8px; line-height:1.5;}

/* ====== GEO 인트로 ====== */
.geo_intro {background:#fff;}
.geo_intro .geo-intro-grid {
	display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-top:50px;
}
.geo_intro .geo-intro-text p {
	color:var(--gray1); margin-bottom:20px;
}
.geo_intro .geo-intro-text strong {color:#000; font-weight:700;}
.geo_intro .geo-keywords {display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.geo_intro .geo-keywords span {
	background:rgba(234,34,39,.06); color:var(--base1);
	border:1px solid rgba(234,34,39,.2);
	 font-weight:700; padding:8px 18px; border-radius:50px;
}

.geo_intro .geo-visual {
	background:var(--base2); border-radius:20px; padding:36px 32px;
	position:relative; overflow:hidden;
}
.geo_intro .geo-visual:before {
	content:""; position:absolute; top:-60px; right:-60px;
	width:200px; height:200px; border-radius:50%;
	background:radial-gradient(circle,rgba(255,213,45,.18) 0%,transparent 70%);
}
.geo_intro .geo-visual-label {
	color:rgba(255,255,255,.5); font-size:12px; font-weight:700;
	letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px; display:block;
}
.geo_intro .chat-bubble {
	background:rgba(255,255,255,.07); border-radius:14px; padding:20px; position:relative; z-index:1;
}
.geo_intro .chat-q,
.geo_intro .chat-a {display:flex; align-items:flex-start; gap:12px;}
.geo_intro .chat-q {margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.1);}
.geo_intro .chat-q p {color:rgba(255,255,255,.7); font-size:14px;}
.geo_intro .chat-a p {color:#fff; font-size:15px; line-height:1.7;}
.geo_intro .chat-a em {color:var(--base4); font-weight:700; background:rgba(255,213,45,.15); padding:2px 6px; border-radius:4px; font-style:normal;}
.geo_intro .chat-icon {
	width:28px; height:28px; border-radius:50%;
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
	font-size:12px; font-weight:800; color:#fff;
}
.geo_intro .chat-icon.q {background:rgba(255,255,255,.15);}
.geo_intro .chat-icon.a {background:var(--base1);}
.geo_intro .visual-caption {display:block; text-align:center; margin-top:14px; color:rgba(255,255,255,.4); font-size:12px;}

/* ====== 플랫폼 카드 ====== */
.platforms {background:var(--bg1);}
.platforms .platform-cards {
	display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:60px;
}
.platforms .platform-cards li {
	background:#fff; border:1.5px solid var(--border); border-radius:16px;
	padding:40px; text-align:center; transition:all .25s ease;
}
.platforms .platform-cards li:hover {
	border-color:var(--base1); transform:translateY(-6px);
	box-shadow:0 16px 40px rgba(234,34,39,.12);
}
.platforms .pcard-icon {
	display:flex; align-items:center; justify-content:center;
	width:80px; height:80px; margin:0 auto 16px;
	background:var(--base2); color:#fff; border-radius:12px;
	font-weight:800; font-size:14px; transition:all .25s ease;
}
.platforms .platform-cards li:hover .pcard-icon {background:var(--base1);}
.platforms .platform-cards strong {display:block; font-size:18px; font-weight:600; color:#000; margin-bottom:6px;}
.platforms .platform-cards p {color:var(--gray1); font-size:15px; line-height:1.5;}

/* ====== SEO vs GEO 비교 ====== */
.compare_seo_geo {background:transparent; position:relative; overflow:hidden;}
.compare_seo_geo:before {
	content:""; position:absolute; top:-200px; right:-200px;
	width:600px; height:600px; border-radius:50%;
	background:radial-gradient(circle,rgba(255,213,45,.1) 0%,transparent 65%);
}
.compare_seo_geo .titWrap h2 {color:#fff;}
.compare_seo_geo .titWrap p {color:rgba(255,255,255,.7);}
.compare_seo_geo .sec-label {color:var(--base4)!important;}
.compare_seo_geo .sec-label:before {background:var(--base4)!important;}

.compare_seo_geo .compare-wrap {
	display:grid; grid-template-columns:1fr 1fr; gap:20px; position:relative; z-index:1; margin-top:60px;
}
.compare_seo_geo .cmp-col {border-radius:20px; overflow:hidden; backdrop-filter: blur(10px);}
.compare_seo_geo .cmp-col.seo {background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);}
.compare_seo_geo .cmp-col.geo {background:rgba(255,213,45,.08); border:1px solid rgba(255,213,45,.25);}

.compare_seo_geo .cmp-col-head {
	padding:24px 28px; display:flex; align-items:center; gap:14px;
	border-bottom:1px solid rgba(255,255,255,.08);
}
.compare_seo_geo .cmp-col.geo .cmp-col-head {background:rgba(255,213,45,.15); border-bottom-color:rgba(255,213,45,.2);}
.compare_seo_geo .cmp-head-icon {
	width:60px; height:60px; border-radius:12px;
	display:flex; align-items:center; justify-content:center;
	font-size:12px; font-weight:800; color:#fff;
}
.compare_seo_geo .cmp-col.seo .cmp-head-icon {background:rgba(255,255,255,.1);}
.compare_seo_geo .cmp-col.geo .cmp-head-icon {background:var(--base4); color:#000;}
.compare_seo_geo .cmp-col-head em {
	display:block; font-size:14px; font-weight:700; letter-spacing:.1em; line-height:1;
	text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:3px; font-style:normal;
	transform: translateY(5px);
}
.compare_seo_geo .cmp-col-head strong {
	font-size:40px; font-weight:900; color:#fff; letter-spacing:-.02em; line-height:1.2;
	display:flex; align-items:center; gap:8px;
}
.compare_seo_geo .new-badge {
	background:var(--base4); color:#000; font-size:12px;
	padding:7px 14px; border-radius:20px;
}

.compare_seo_geo .cmp-col dl {
	display:grid; grid-template-columns:140px 1fr; gap:16px; align-items:center;
	padding:18px 28px; border-top:1px solid rgba(255,255,255,.06);
}
.compare_seo_geo .cmp-col dl dt {
	color:rgba(255,255,255,.5); font-size:14px; font-weight:700;
	letter-spacing:.08em; text-transform:uppercase;
}
.compare_seo_geo .cmp-col.geo dl dt {color:rgba(255,213,45,.7);}
.compare_seo_geo .cmp-col dl dd {color:rgba(255,255,255,.85); font-size:16px; font-weight:600; line-height:1.5;}
.compare_seo_geo .cmp-col.geo dl dd {color:#fff;}

/* ====== 왜 지금? ====== */
.why_now {background:#fff;}
.why_now .why-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:60px;}
.why_now .why-grid li {
	position:relative; background:var(--bg1); border:1.5px solid var(--border);
	border-radius:20px; padding:40px; transition:all .25s ease;
}
.why_now .why-grid li:hover {
	border-color:var(--base1); box-shadow:0 12px 40px rgba(234,34,39,.1);
	transform:translateY(-4px); background:#fff;
}
.why_now .why-num {
	position:absolute; top:20px; right:24px; font-size:52px; font-weight:900;
	color:rgba(35,65,125,.06); line-height:1; letter-spacing:-.04em;
}
.why_now .why-grid h3 {
	font-size:20px; font-weight:800; line-height:1.25;
	color:#000; margin-bottom:12px; letter-spacing:-.02em; position:relative;
}
.why_now .why-grid p {color:var(--gray1); font-size:15px; line-height:1.75;}

/* ====== 최적화 항목 ====== */
.optim_items {background:var(--bg1);}
.optim_items .optim-grid {display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:60px;}
.optim_items .optim-grid li {
	background:#fff; border:1.5px solid var(--border); border-radius:16px;
	padding:40px; display:flex; gap:20px; align-items:flex-start;
	transition:all .25s ease;
}
.optim_items .optim-grid li:hover {
	border-color:var(--base1); box-shadow:0 8px 32px rgba(234,34,39,.08);
	transform:translateX(4px);
}
.optim_items .optim-icon {
	width:48px; height:48px; background:var(--base2); color:#fff;
	border-radius:12px; display:flex; align-items:center; justify-content:center;
	flex-shrink:0; font-weight:800; font-size:16px; transition:all .25s ease;
}
.optim_items .optim-grid li:hover .optim-icon {background:var(--base1);}
.optim_items .optim-body h3 {font-size:18px; font-weight:800; color:#000; margin-bottom:8px;}
.optim_items .optim-body p {color:var(--gray1); font-size:15px; line-height:1.7;}
.optim_items .optim-tags {display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.optim_items .optim-tags span {
	background:rgba(234,34,39,.06); color:var(--base1);
	border:1px solid rgba(234,34,39,.2);
	font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px;
}

/* ====== 기대 효과 ====== */
.effects {background:#fff;}
.effects .effects-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:60px;}
.effects .effects-grid li {
	background:linear-gradient(140deg,var(--base2) 0%,var(--blue) 100%);
	border-radius:20px; padding:clamp(40px,5vw,60px); position:relative; overflow:hidden;
	border:1px solid rgba(255,255,255,.06);
	transition:all .25s ease;
}
.effects .effects-grid li:hover {
	transform:translateY(-6px); box-shadow:0 20px 56px rgba(11,31,74,.25);
}
.effects .effects-grid li:before {
	content:""; position:absolute; top:-40px; right:-40px;
	width:120px; height:120px; border-radius:50%;
	background:rgba(255,255,255,.04); transition:transform .4s ease;
}
.effects .effects-grid li:hover:before {transform:scale(2.5);}
.effects .effect-icon {
	width:56px; height:56px; background:rgba(255,255,255,.12);
	color:var(--base4); border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	margin-bottom:20px;
	transition:all .25s ease; position:relative; z-index:1;
}
.effects .effect-icon svg {width:28px; height:28px; display:block;}
.effects .effects-grid li:hover .effect-icon {background:#fff; color:var(--base2);}
.effects .effects-grid h3 {color:#fff; font-size:24px; font-weight:600; line-height:1.25; margin-bottom:10px; position:relative; z-index:1;}
.effects .effects-grid p {color:rgba(255,255,255,.65); fline-height:1.7; position:relative; z-index:1;}
.effects .effect-metric {
	margin-top:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12);
	display:flex; align-items:baseline; gap:8px; position:relative; z-index:1;
}
.effects .effect-metric strong {color:var(--base4); font-size:28px; font-weight:600; letter-spacing:-.04em;}
.effects .effect-metric em {color:rgba(255,255,255,.45); font-size:13px; font-style:normal;}

/* ====== 진행 과정 ====== */
.process {background:var(--bg1);}
.process .process-steps {
	display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; margin-top:60px;
}
.process .process-steps li {
	text-align:center; padding:0 12px; position:relative; z-index:1;
}
.process .pstep-circle {
	width:120px; aspect-ratio:1/1; border-radius:50%;
	background:var(--base2); border:3px solid transparent; color:#fff;
	display:flex; align-items:center; justify-content:center;
	margin:0 auto 20px; font-size:18px; font-weight:800;
	transition:all .25s ease;
}
.process .process-steps li:hover .pstep-circle {
	background:var(--base1); transform:scale(1.1);
	box-shadow:0 0 0 8px rgba(234,34,39,.15);
}
.process .process-steps strong {display:block; font-size:20px; font-weight:600; color:#000; margin-bottom:8px;}
.process .process-steps p {color:var(--gray1); font-size:15px; line-height:1.6;}

/* ====== 캐치프레이즈 ====== */
.s_catchphrase {
	background:transparent;
	padding:100px 0!important; text-align:center;
}
.s_catchphrase h2 {
	color:#fff; font-size:clamp(28px,3.5vw,48px); font-weight:900;
	line-height:1.3; letter-spacing:-.03em;
}

/* ====== FAQ (사이트 공통 .faq_st 보강) ====== */
.faq_st .right .q-Wrap dl {padding-bottom:30px;}

/* ====== CTA ====== */
.cta_geo {background:transparent;}
.cta_geo .cta-box {
	background:#fff;
	border-radius:clamp(15px,2vw,30px); padding:80px 60px; text-align:center;
	position:relative; overflow:hidden;
}
.cta_geo .cta-box:before {
	content:""; position:absolute; top:-100px; left:50%; transform:translateX(-50%);
	width:800px; height:600px;
	background:radial-gradient(ellipse,rgba(255,213,45,.15) 0%,transparent 70%);
	pointer-events:none;
}
.cta_geo .cta-box h2 {
	color:#000; font-size:clamp(24px,3vw,40px); font-weight:900;
	line-height:1.3; letter-spacing:-.03em; margin-bottom:20px; position:relative; z-index:1;
}
.cta_geo .cta-box p {font-size:17px; line-height:1.7; position:relative; z-index:1;}
.cta_geo .cta-box .btnWrap {position:relative; z-index:1; margin-top:40px!important;}


/* ============================================================
 * 태블릿 (~1249)
 ============================================================ */
@media screen and (max-width:1249px) {
	.contents .subpart {padding:70px 0;}
	.contents .subpart .titWrap {margin-bottom:40px;}
	
	.geo_hero .hero-grid {grid-template-columns:1fr; gap:50px;}
	.geo_hero .hero-right .platform-panel {padding:24px;}
	
	.platforms .platform-cards {grid-template-columns:repeat(3,1fr);}
	
	.compare_seo_geo .compare-wrap {grid-template-columns:1fr; gap:16px;}
	.compare_seo_geo .cmp-col dl {grid-template-columns:120px 1fr; padding:16px 22px;}
	
	.why_now .why-grid {grid-template-columns:repeat(2,1fr); gap:20px;}
	
	.effects .effects-grid {grid-template-columns:repeat(2,1fr);}
	
	.process .process-steps {grid-template-columns:1fr; gap:20px;}
	.process .process-steps:before {display:none;}
	.process .process-steps li {
		display:flex; align-items:center; gap:20px; text-align:left;
		padding:20px; background:#fff; border-radius:16px; border:1.5px solid var(--border);
	}
	.process .pstep-circle {margin:0; flex-shrink:0;}
	
	.cta_geo .cta-box {padding:60px 30px;}
}

/* ============================================================
 * 모바일 (~991)
 ============================================================ */
@media screen and (max-width:991px) {
	.contents .subpart {padding:60px 0;}
	.geo_hero .hero-left h2 {font-size:28px;}
	.service .titWrap h2 {font-size:40px;}
	.service .titWrap > p {padding-top:20px;}
	.compare_seo_geo .cmp-col-head strong {font-size:px;}
	.stats_bar {padding:40px 0!important;}
	.stats_bar .stats-grid {grid-template-columns:repeat(2,1fr); gap:0;}
	.stats_bar .stats-grid li {padding:20px 10px; border-bottom:1px solid rgba(255,255,255,.1);}
	.stats_bar .stats-grid li:nth-child(2) {border-right:none;}
	.stats_bar .stats-grid li:nth-child(3),
	.stats_bar .stats-grid li:nth-child(4) {border-bottom:none;}
	
	.geo_intro .geo-intro-grid {grid-template-columns:1fr; gap:40px;}
	
	.platforms .platform-cards {grid-template-columns:repeat(2,1fr);}
	
	.optim_items .optim-grid {grid-template-columns:1fr;}
	
	.effects .effects-grid {grid-template-columns:1fr;}
	
	.why_now .why-grid {grid-template-columns:1fr;}
}

/* ============================================================
 * 모바일 (~767)
 ============================================================ */
@media screen and (max-width:767px) {
	.geo_hero .hero-left h2 {font-size:24px;}
	.geo_hero .hero-right .platform-panel {padding:20px;}
	.effects .effects-grid {margin-top:30px;}
	.optim_items .optim-grid {margin-top:30px;}
	.geo_intro .geo-visual {padding:24px 20px;}
	.effects .effects-grid li {padding:24px 20px;}
	.process .process-steps {margin-top:20px;}
	.platforms .platform-cards {grid-template-columns:1fr; gap:12px;}
	.service .titWrap h2 {font-size:32px;}
	.service .sec-label {font-size:18px;}
	.compare_seo_geo .cmp-col dl {grid-template-columns:1fr; gap:4px; padding:14px 20px;}
	.compare_seo_geo .cmp-col-head {padding:20px;}
	
	.why_now .why-grid li {padding:28px 22px;}
	
	.optim_items .optim-grid li {padding:24px 20px; flex-direction:column; gap:14px;}
	
	.process .process-steps li {flex-direction:column; text-align:center; gap:10px;}
	.process .pstep-circle {width:60px; height:60px; font-size:16px;}
	
	.s_catchphrase {padding:60px 0!important;}
	
	.cta_geo .cta-box {padding:40px 20px;}
	.cta_geo .cta-box h2 {font-size:22px;}
	.cta_geo .cta-box p {font-size:15px;}
}