@charset "utf-8";
/* ======================================
   업무분야 서비스 페이지 리뉴얼 (2026-10-21 / 진행절차 다이어그램 v2)
   - 특허·실용신안(patent/service.php) 기본, 상표·브랜드(.pat-brand)·디자인·저작권(.pat-design)은 맨 아래 색상·배치만 덮어씀
   - 상단 비주얼: 해외출원(.ovr-hero)·비용안내(.cst-hero)와 같은 구성·수치
   - 업무분야·진행절차·신청하기 제목만 이 파일에서 정의
   - 요금제 카드(.svc-plans)·안내(.svc-notes)는 service.css 그대로 (고객 요청으로 유지)
   ====================================== */
.patPage{--pat-point:#14335A; --pat-deep:#0B1F3A; --pat-soft:#F2F7FC; --pat-bg:#F3F6FA; --pat-line:#E3E8EF; --pat-accent:#FFD179;}
.patPage .pat-hero *,.patPage .pat-field *,.patPage .pat-process *,.patPage .pat-secHead *{box-sizing:border-box;}
.pat-hero h1,.pat-hero p{margin:0; padding:0;}
.patPage .pat-secHead h2,.patPage .pat-secHead p,.patPage .pat-fieldList p,.patPage .pat-steps h3,.patPage .pat-steps p,.patPage .pat-after p{margin:0; padding:0;}
.patPage .pat-fieldList,.patPage .pat-steps{margin:0; padding:0; list-style:none;}
.patPage .pat-mBr{display:none;}

/* ① 상단 비주얼 */
.pat-hero{position:relative; height:46rem; overflow:hidden; color:#fff; word-break:keep-all;
	background:linear-gradient(90deg,#0B1F3A 0%,#14335A 38%,rgba(20,51,90,0.72) 60%,rgba(20,51,90,0.18) 100%), url(/public/img/visual/subVisual01.webp) no-repeat right center / cover;}
.pat-hero:before{content:''; position:absolute; left:-12rem; top:-16rem; width:52rem; height:52rem; border-radius:50%; border:1px solid rgba(255,255,255,0.08); box-shadow:0 0 0 6rem rgba(255,255,255,0.03), 0 0 0 12rem rgba(255,255,255,0.02);}
.pat-hero .inr{display:flex; align-items:center; z-index:1;}
.pat-hero .pat-heroTxt{max-width:64rem;}
.pat-hero .pat-eyebrow{display:inline-block; padding:0.6rem 1.4rem; border:1px solid rgba(255,255,255,0.3); border-radius:99px; background:rgba(255,255,255,0.08); font-family:'Pretendard-SemiBold'; font-size:1.3rem; line-height:1.8rem; letter-spacing:0.16em; color:rgba(255,255,255,0.9);}
.pat-hero .gnb_Tit{margin-top:2.4rem; font-size:5.6rem; line-height:6.4rem; color:#fff;}
.pat-hero .pat-heroLead{margin-top:1.6rem; font-family:'Pretendard-Bold'; font-size:2.6rem; line-height:3.6rem; color:#FFD179;}
.pat-hero .pat-heroSub{margin-top:1.4rem; font-family:'Pretendard-Medium'; font-size:1.8rem; line-height:3rem; color:rgba(255,255,255,0.82);}

/* 공통 섹션 제목 */
.patPage .pat-label{display:inline-block; font-family:'Pretendard-Bold'; font-size:1.4rem; line-height:2rem; letter-spacing:0.16em; color:var(--pat-point);}
.patPage .pat-tit{margin-top:1.2rem !important; font-family:'Pretendard-Bold'; font-size:4rem; line-height:5.2rem; letter-spacing:-0.02em; color:#111;}
.patPage .pat-secDesc{margin-top:2rem !important; font-family:'Pretendard-Medium'; font-size:1.8rem; line-height:3rem; color:#555; word-break:keep-all;}
.patPage .pat-center{text-align:center;}

/* ② 업무분야 */
.patPage .pat-field{padding:12rem 0;}
.patPage .pat-fieldTop{display:grid; grid-template-columns:1fr 46rem; gap:6rem; align-items:center; padding:5.6rem 6.4rem; border-radius:3.2rem; background:var(--pat-soft);}
.patPage .pat-ill{margin:0; height:26rem;}
.patPage .pat-ill .svc-ill{display:block; width:100%; height:100%; overflow:visible;}
.patPage .pat-fieldList{display:grid; grid-template-columns:repeat(5,1fr); gap:1.6rem; margin-top:2.4rem;}
.patPage .pat-fieldList li{display:flex; flex-direction:column; gap:2.4rem; min-height:20rem; padding:3rem 2.6rem; border:1px solid var(--pat-line); border-radius:2rem; background:#fff; transition:border-color .2s, box-shadow .2s, transform .2s;}
.patPage .pat-fieldList li:hover{border-color:var(--pat-point); box-shadow:0 1.6rem 3.2rem rgba(20,51,90,0.12); transform:translateY(-0.4rem);}
.patPage .pat-num{display:inline-flex; align-items:center; justify-content:center; width:4.8rem; height:4.8rem; border-radius:1.4rem; background:var(--pat-point); font-family:'Montserrat','Pretendard-Bold'; font-weight:700; font-size:1.8rem; color:#fff;}
.patPage .pat-fieldList p{font-family:'Pretendard-Bold'; font-size:2rem; line-height:3rem; color:#111; word-break:keep-all;}

/* ③ 진행절차 */
.patPage .pat-process{padding:11rem 0 12rem 0; background:var(--pat-bg);}

/* ④ 신청하기 제목 (요금제 카드는 service.css 그대로) */
.patPage .pat-apply{padding-top:12rem;}
.patPage .pat-apply .pat-secHead{margin-bottom:2.4rem;}

@media (max-width:1200px){
	.pat-hero .gnb_Tit{font-size:4.8rem; line-height:5.6rem;}
	.patPage .pat-tit{font-size:3.4rem; line-height:4.6rem;}
	.patPage .pat-fieldTop{grid-template-columns:1fr 36rem; padding:4.8rem;}
	.patPage .pat-fieldList{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:991px){
	.pat-hero{background:linear-gradient(90deg,#0B1F3A 0%,#14335A 55%,rgba(20,51,90,0.8) 100%), url(/public/img/visual/subVisual01.webp) no-repeat right center / cover;}
	.patPage .pat-pcBr{display:none;}
	.patPage .pat-field{padding:9rem 0;}
	.patPage .pat-fieldTop{grid-template-columns:1fr; gap:3.2rem;}
	.patPage .pat-fieldList{grid-template-columns:repeat(2,1fr);}
	.patPage .pat-process{padding:8rem 0 9rem 0;}
	.patPage .pat-apply{padding-top:9rem;}
}
@media (max-width:767px){
	.pat-hero{height:auto; padding:6.4rem 0 6rem 0;
		background:linear-gradient(180deg,rgba(11,31,58,0.92) 0%,rgba(20,51,90,0.96) 100%), url(/public/img/visual/subVisual01mo.webp) no-repeat center / cover;}
	.pat-hero:before{width:32rem; height:32rem; left:auto; right:-14rem; top:-12rem;}
	.pat-hero .pat-eyebrow{font-size:1.1rem; padding:0.5rem 1.2rem;}
	.pat-hero .gnb_Tit{margin-top:1.8rem; font-size:3.6rem; line-height:4.4rem;}
	.pat-hero .pat-heroLead{margin-top:1.2rem; font-size:2rem; line-height:2.8rem;}
	.pat-hero .pat-heroSub{font-size:1.5rem; line-height:2.5rem;}
	.patPage .pat-label{font-size:1.2rem; line-height:1.8rem;}
	.patPage .pat-tit{margin-top:0.8rem !important; font-size:2.6rem; line-height:3.6rem;}
	.patPage .pat-secDesc{margin-top:1.4rem !important; font-size:1.5rem; line-height:2.5rem;}
	.patPage .pat-field{padding:6.4rem 0;}
	.patPage .pat-fieldTop{padding:2.8rem 2rem; border-radius:2rem; gap:2rem;}
	.patPage .pat-ill{height:22rem;}
	.patPage .pat-fieldList{grid-template-columns:1fr; gap:0.8rem; margin-top:1.6rem;}
	.patPage .pat-fieldList li{flex-direction:row; align-items:center; gap:1.6rem; min-height:0; padding:1.8rem 2rem; border-radius:1.4rem;}
	.patPage .pat-num{flex:none; width:4rem; height:4rem; border-radius:1.2rem; font-size:1.5rem;}
	.patPage .pat-fieldList p{font-size:1.6rem; line-height:2.4rem;}
	.patPage .pat-process{padding:6.4rem 0;}
	.patPage .pat-apply{padding-top:6.4rem;}
	.patPage .pat-apply .pat-secHead{margin-bottom:1.6rem;}
}


/* ======================================
   ③ 진행절차 다이어그램 v2 : 3단계(출원 준비 → 특허청 심사 → 등록) 묶음 + 아이콘 + 기간 막대 + 거절 대응 루프
   ====================================== */
.patPage .pat-ph1{--ph:#3E6FB4; --ph-soft:#E8F0FA;}
.patPage .pat-ph2{--ph:#14335A; --ph-soft:#E6ECF3;}
.patPage .pat-ph3{--ph:#1E7A5A; --ph-soft:#E4F3EC;}
.patPage .pat-flow{display:grid; grid-template-columns:3fr 2fr 2fr; gap:3.2rem; margin-top:5.6rem; word-break:keep-all;}
.patPage .pat-phase{position:relative; display:flex; flex-direction:column; padding:0 2.4rem 2.8rem 2.4rem; border-top:0.6rem solid var(--ph); border-radius:2.4rem; background:#fff; box-shadow:0 1.6rem 3.2rem rgba(20,51,90,0.06);}
.patPage .pat-phase:not(:last-child):after{content:''; position:absolute; top:50%; right:-2.3rem; margin-top:-0.9rem; border-left:1.3rem solid #9FB0C5; border-top:0.9rem solid transparent; border-bottom:0.9rem solid transparent;}
.patPage .pat-phaseHead{display:flex; align-items:center; gap:1rem; padding:2.2rem 0 2rem 0; border-bottom:1px dashed #D5DDE7;}
.patPage .pat-phaseHead em{padding:0.3rem 1rem; border-radius:99px; background:var(--ph); font-style:normal; font-family:'Montserrat','Pretendard-Bold'; font-weight:700; font-size:1.2rem; line-height:1.8rem; letter-spacing:0.06em; color:#fff;}
.patPage .pat-phaseHead strong{font-family:'Pretendard-Bold'; font-size:1.9rem; line-height:2.6rem; color:#111;}
.patPage .pat-steps{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin-top:3.2rem !important;}
.patPage .pat-steps li{position:relative; display:flex; flex-direction:column; align-items:center; padding:0 0.6rem; text-align:center;}
.patPage .pat-steps li:not(:last-child):after{content:''; position:absolute; top:3.1rem; left:calc(50% + 4.4rem); right:calc(-50% + 4.4rem); height:2px; background:var(--ph); opacity:0.45;}
.patPage .pat-steps li:not(:last-child):before{content:''; position:absolute; top:2.65rem; right:calc(-50% + 4.2rem); border-left:0.8rem solid var(--ph); border-top:0.55rem solid transparent; border-bottom:0.55rem solid transparent; opacity:0.6;}
.patPage .pat-stepIcon{position:relative; display:flex; align-items:center; justify-content:center; width:6.4rem; height:6.4rem; border-radius:2rem; background:var(--ph-soft); color:var(--ph);}
.patPage .pat-stepIcon svg{width:3rem; height:3rem;}
.patPage .pat-stepIcon em{position:absolute; top:-0.8rem; right:-0.8rem; display:flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; border:2px solid #fff; border-radius:50%; background:var(--ph); font-style:normal; font-family:'Montserrat','Pretendard-Bold'; font-weight:700; font-size:1.1rem; color:#fff;}
.patPage .pat-stepLast .pat-stepIcon{background:var(--ph); color:#fff;}
.patPage .pat-stepLast .pat-stepIcon em{background:#FFD179; color:#14335A;}
.patPage .pat-steps h3{margin-top:1.8rem; font-family:'Pretendard-Bold'; font-size:1.8rem; line-height:2.6rem; color:#111;}
.patPage .pat-steps p{margin-top:0.6rem; font-family:'Pretendard-Medium'; font-size:1.4rem; line-height:2.2rem; color:#666;}
.patPage .pat-badge{display:none;}
.patPage .pat-loop{position:relative; height:5.2rem; margin-top:1.4rem;}
.patPage .pat-loop:before{content:''; position:absolute; left:25%; right:25%; top:0.4rem; height:3.4rem; border:2px dashed #8DA2BD; border-top:0; border-radius:0 0 1.6rem 1.6rem;}
.patPage .pat-loop:after{content:''; position:absolute; left:25%; top:-0.6rem; margin-left:-0.5rem; border-bottom:0.9rem solid var(--ph); border-left:0.6rem solid transparent; border-right:0.6rem solid transparent;}
.patPage .pat-loop span{position:absolute; left:50%; top:3.8rem; transform:translate(-50%,-50%); padding:0.3rem 1.4rem; border-radius:99px; background:#fff; border:1px solid #C9D4E2; white-space:nowrap; font-family:'Pretendard-SemiBold'; font-size:1.3rem; line-height:2rem; color:var(--ph);}
.patPage .pat-track{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0.8rem; margin-top:auto; padding-top:2.4rem;}
.patPage .pat-bar,.patPage .pat-flag{display:flex; align-items:center; justify-content:center; gap:0.8rem; height:4rem; border-radius:99px; font-family:'Pretendard-Medium'; font-size:1.3rem; line-height:2rem; white-space:nowrap;}
.patPage .pat-bar{background:var(--ph-soft); color:var(--ph);}
.patPage .pat-barLong{background:linear-gradient(90deg,var(--ph-soft) 0%,#D3DDEA 100%);}
.patPage .pat-bar b,.patPage .pat-flag b{font-family:'Pretendard-Bold'; font-weight:normal; font-size:1.5rem;}
.patPage .pat-flag{background:#FFD179; color:#14335A;}
.patPage .pat-flag:before{content:''; width:0.8rem; height:0.8rem; border-radius:50%; background:#14335A;}
.patPage .pat-after{display:flex; align-items:center; gap:1.6rem; margin-top:3.2rem; padding:2.4rem 3.2rem; border-radius:2rem; background:var(--pat-point); color:#fff;}
.patPage .pat-afterIcon{flex:none; display:flex; align-items:center; justify-content:center; width:4.8rem; height:4.8rem; border-radius:50%; background:rgba(255,255,255,0.12); color:#FFD179;}
.patPage .pat-afterIcon svg{width:2.6rem; height:2.6rem;}
.patPage .pat-after p{font-family:'Pretendard-Medium'; font-size:1.7rem; line-height:2.6rem; color:rgba(255,255,255,0.9); word-break:keep-all;}
.patPage .pat-after strong{display:inline-block; margin-right:1.2rem; padding:0.2rem 1.2rem; border-radius:99px; background:#FFD179; font-family:'Pretendard-Bold'; font-weight:normal; font-size:1.4rem; color:#14335A; vertical-align:0.1rem;}

@media (max-width:1200px){
	.patPage .pat-flow{grid-template-columns:1fr; gap:3.2rem;}
	.patPage .pat-phase:not(:last-child):after{top:auto; bottom:-2.4rem; right:auto; left:50%; margin:0 0 0 -0.9rem; border-left:0.9rem solid transparent; border-right:0.9rem solid transparent; border-top:1.3rem solid #9FB0C5; border-bottom:0;}
	.patPage .pat-loop{max-width:none;}
}
@media (max-width:767px){
	.patPage .pat-flow{gap:2.8rem; margin-top:3.2rem;}
	.patPage .pat-phase{padding:0 1.8rem 1.6rem 1.8rem; border-radius:1.8rem; border-top-width:0.5rem;}
	.patPage .pat-phaseHead{padding:1.6rem 0 1.4rem 0;}
	.patPage .pat-phaseHead strong{font-size:1.7rem; line-height:2.4rem;}
	.patPage .pat-steps{grid-auto-flow:row; margin-top:2rem !important;}
	.patPage .pat-steps li{display:grid; grid-template-columns:5.2rem 1fr; column-gap:1.6rem; align-items:start; padding:0 0 2.4rem 0; text-align:left;}
	.patPage .pat-steps li:last-child{padding-bottom:0.4rem;}
	.patPage .pat-steps li:not(:last-child):after{top:6rem; bottom:0.6rem; left:2.5rem; right:auto; width:2px; height:auto;}
	.patPage .pat-steps li:not(:last-child):before{display:none;}
	.patPage .pat-stepIcon{grid-row:1 / span 3; width:5.2rem; height:5.2rem; border-radius:1.6rem;}
	.patPage .pat-stepIcon svg{width:2.4rem; height:2.4rem;}
	.patPage .pat-stepIcon em{width:2.2rem; height:2.2rem; font-size:1rem; top:-0.6rem; right:-0.6rem;}
	.patPage .pat-steps h3{grid-column:2; margin-top:0.2rem; font-size:1.7rem; line-height:2.4rem;}
	.patPage .pat-steps p{grid-column:2; margin-top:0.2rem; font-size:1.4rem; line-height:2.2rem;}
	.patPage .pat-steps p br{display:none;}
	.patPage .pat-badge{grid-column:2; justify-self:start; display:inline-block; margin-top:0.8rem; padding:0.3rem 1.1rem; border-radius:99px; background:var(--ph); font-family:'Pretendard-SemiBold'; font-size:1.2rem; line-height:1.8rem; color:#fff;}
	.patPage .pat-badgeOk{background:#FFD179; color:#14335A;}
	.patPage .pat-loop,.patPage .pat-track{display:none;}
	.patPage .pat-after{align-items:flex-start; gap:1.2rem; margin-top:2.4rem; padding:2rem; border-radius:1.6rem;}
	.patPage .pat-afterIcon{width:4rem; height:4rem;}
	.patPage .pat-afterIcon svg{width:2.2rem; height:2.2rem;}
	.patPage .pat-after p{font-size:1.4rem; line-height:2.3rem;}
	.patPage .pat-after strong{display:table; margin:0 0 0.6rem 0; font-size:1.2rem;}
}


/* ======================================
   상표·브랜드(brand/service.php) · 디자인·저작권(design/service.php) 테마 (2026-10-21)
   ====================================== */
.patPage.pat-brand{--pat-point:#4E1D60; --pat-soft:#F8F4FA;}
.patPage.pat-design{--pat-point:#1E5542; --pat-soft:#F2F8F5;}
.pat-brand .pat-fieldList li:hover{box-shadow:0 1.6rem 3.2rem rgba(78,29,96,0.12);}
.pat-design .pat-fieldList li:hover{box-shadow:0 1.6rem 3.2rem rgba(30,85,66,0.12);}
.pat-brand .pat-hero{background:linear-gradient(90deg,#0B1F3A 0%,#14335A 38%,rgba(20,51,90,0.72) 60%,rgba(20,51,90,0.18) 100%), url(/public/img/visual/subVisual02.webp) no-repeat right center / cover;}
.pat-design .pat-hero{background:linear-gradient(90deg,#0B1F3A 0%,#14335A 38%,rgba(20,51,90,0.72) 60%,rgba(20,51,90,0.18) 100%), url(/public/img/visual/subVisual03.webp) no-repeat right center / cover;}
.pat-brand .pat-ph1{--ph:#8A5CA8; --ph-soft:#F3ECF7;}
.pat-brand .pat-ph2{--ph:#4E1D60; --ph-soft:#F0E9F3;}
.pat-design .pat-ph1{--ph:#3E9A78; --ph-soft:#E7F4EE;}
.pat-design .pat-ph2{--ph:#1E5542; --ph-soft:#E5EFEB;}
.pat-design .pat-ph3{--ph:#14335A; --ph-soft:#E6ECF3;}
.pat-brand .pat-barLong{background:linear-gradient(90deg,var(--ph-soft) 0%,#E2D5EA 100%);}
.pat-design .pat-barLong{background:linear-gradient(90deg,var(--ph-soft) 0%,#D3E6DD 100%);}
/* 8단계(상표): 심사 묶음이 3단계라 칸 비율·거절 루프 위치 조정 */
.patPage .pat-flow8{grid-template-columns:3fr 3fr 2fr;}
.patPage .pat-span2{grid-column:span 2;}
.patPage .pat-loop3:before{left:16.667%; right:50%;}
.patPage .pat-loop3:after{left:16.667%;}
.patPage .pat-loop3 span{left:33.333%;}

@media (max-width:1200px){
	.patPage .pat-flow8{grid-template-columns:1fr;}
}
@media (max-width:991px){
	.pat-brand .pat-hero{background:linear-gradient(90deg,#0B1F3A 0%,#14335A 55%,rgba(20,51,90,0.8) 100%), url(/public/img/visual/subVisual02.webp) no-repeat right center / cover;}
	.pat-design .pat-hero{background:linear-gradient(90deg,#0B1F3A 0%,#14335A 55%,rgba(20,51,90,0.8) 100%), url(/public/img/visual/subVisual03.webp) no-repeat right center / cover;}
}
@media (max-width:767px){
	.pat-brand .pat-hero{background:linear-gradient(180deg,rgba(11,31,58,0.92) 0%,rgba(20,51,90,0.96) 100%), url(/public/img/visual/subVisual02mo.webp) no-repeat center / cover;}
	.pat-design .pat-hero{background:linear-gradient(180deg,rgba(11,31,58,0.92) 0%,rgba(20,51,90,0.96) 100%), url(/public/img/visual/subVisual03mo.webp) no-repeat center / cover;}
}


/* ======================================
   서브 비주얼 (2026-10-23) — 헤더와 같은 가로폭·헤더 아래 배치·네이비 그라데이션 제거·라운드 30px
   ====================================== */
.pat-hero{margin:max(0px, calc(var(--hf-bottom, 10rem) + 2rem - 9.2rem)) 6rem 0 6rem; border-radius:30px; color:#111;}
.pat-hero{background:linear-gradient(90deg,rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.55) 45%,rgba(255,255,255,0) 70%), url(/public/img/visual/subVisual01.webp) no-repeat right center / cover;}
.pat-brand .pat-hero{background:linear-gradient(90deg,rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.55) 45%,rgba(255,255,255,0) 70%), url(/public/img/visual/subVisual02.webp) no-repeat right center / cover;}
.pat-design .pat-hero{background:linear-gradient(90deg,rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.55) 45%,rgba(255,255,255,0) 70%), url(/public/img/visual/subVisual03.webp) no-repeat right center / cover;}
.pat-hero:before{display:none;}
.pat-hero .pat-eyebrow{border-color:rgba(20,51,90,0.25); background:rgba(255,255,255,0.7); color:#14335A;}
.pat-hero .gnb_Tit{color:#111;}
.pat-hero .pat-heroLead{color:var(--pat-point,#14335A);}
.pat-hero .pat-heroSub{color:#444;}
@media (max-width:1100px){
	.pat-hero{margin:1.6rem 2rem 0 2rem;}
}
@media (max-width:991px){
	.pat-hero{background:linear-gradient(90deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.7) 60%,rgba(255,255,255,0.3) 100%), url(/public/img/visual/subVisual01.webp) no-repeat right center / cover;}
	.pat-brand .pat-hero{background:linear-gradient(90deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.7) 60%,rgba(255,255,255,0.3) 100%), url(/public/img/visual/subVisual02.webp) no-repeat right center / cover;}
	.pat-design .pat-hero{background:linear-gradient(90deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.7) 60%,rgba(255,255,255,0.3) 100%), url(/public/img/visual/subVisual03.webp) no-repeat right center / cover;}
}
@media (max-width:767px){
	.pat-hero{background:linear-gradient(180deg,rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.82) 100%), url(/public/img/visual/subVisual01mo.webp) no-repeat center / cover;}
	.pat-brand .pat-hero{background:linear-gradient(180deg,rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.82) 100%), url(/public/img/visual/subVisual02mo.webp) no-repeat center / cover;}
	.pat-design .pat-hero{background:linear-gradient(180deg,rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.82) 100%), url(/public/img/visual/subVisual03mo.webp) no-repeat center / cover;}
}


/* ======================================
   서브 비주얼 2차 (2026-10-23) — 영문 표기(.pat-eyebrow) 삭제에 맞춰 제목 위 여백 제거, 이미지 위 검정 3% 덮개
   ====================================== */
.pat-hero:after{content:''; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.03); pointer-events:none; z-index:0;}
.pat-hero .gnb_Tit{margin-top:0;}
@media (max-width:767px){
	.pat-hero .gnb_Tit{margin-top:0;}
}


/* ======================================
   특허 페이지 정리 (2026-10-23, patent/service.php 의 .pat-clean 만 해당 / 단계 아이콘은 흰 원 안에 / 단계 머리 오른쪽 화살표 / 단계별 흰 박스, 아이콘 원 #f6f6f6 / 등록 박스 네이비 보더 / 시안 반영: 업무분야 세로 구분선·사진, 섹션 경계 / 단계 항목 PC 가운데 정렬 / 등록 머리 체크 아이콘 / 상표·디자인 페이지도 .pat-clean 적용)
   장식 요소(영문 라벨·일러스트·색 띠·그림자·떠오르는 효과·알약 배지·점선·그라데이션) 제거, 단색·선 위주
   ====================================== */
.pat-clean{--ph:var(--pat-point); --ph-soft:var(--pat-bg);}
.pat-clean .pat-ph1,.pat-clean .pat-ph2,.pat-clean .pat-ph3{--ph:var(--pat-point); --ph-soft:var(--pat-bg);}
.pat-clean .pat-label{display:none;}
.pat-clean .pat-tit{margin-top:0 !important;}
.pat-clean .pat-center{text-align:left;}

/* 업무분야 */
.pat-clean .pat-fieldTop{display:block; padding:0; border-radius:0; background:none;}
.pat-clean .pat-ill{display:none;}
.pat-clean .pat-field{padding-bottom:0; background:linear-gradient(180deg,#fff calc(100% - 8rem),var(--pat-bg) calc(100% - 8rem));}
.pat-clean .pat-field .pat-label{display:inline-block; font-size:1.2rem; line-height:1.8rem; letter-spacing:0.12em;}
.pat-clean .pat-field .pat-tit{margin-top:0.8rem !important;}
.pat-clean .pat-field .pat-pcBr{display:none;}
.pat-clean .pat-secDesc{font-size:1.7rem; line-height:2.8rem; color:#333;}
.pat-clean .pat-fieldList{column-gap:0; row-gap:3.2rem; margin-top:6.4rem;}
.pat-clean .pat-fieldList li{gap:1.6rem; min-height:12rem; padding:0 2.8rem; border:0; border-left:1px solid var(--pat-line); border-radius:0; background:none; transition:none;}
.pat-clean .pat-fieldList li:first-child{padding-left:0; border-left:0;}
.pat-clean .pat-fieldList li:hover{border-color:var(--pat-line); box-shadow:none; transform:none;}
.pat-clean .pat-num{display:block; width:auto; height:auto; border-radius:0; background:none; font-size:1.8rem; line-height:2.4rem; color:var(--pat-point);}
.pat-clean .pat-fieldList p{font-family:'Pretendard-SemiBold'; font-size:1.9rem; line-height:2.8rem;}
.patPage .pat-photo{height:32rem; margin:4rem 0 0 0; border-radius:2rem; overflow:hidden;}
.patPage .pat-photo img{display:block; width:100%; height:100%; object-fit:cover;}

/* 진행절차 */
.pat-clean .pat-flow{gap:2.4rem; margin-top:6.4rem;}
.pat-clean .pat-phase{padding:0.8rem 3.2rem 3.2rem 3.2rem; border:0; border-radius:2rem; background:#fff; box-shadow:none;}
.pat-clean .pat-ph3{border:1px solid var(--pat-point);}
.pat-clean .pat-phase:not(:last-child):after{display:none;}
.pat-clean .pat-phaseHead{gap:1.2rem; padding:2rem 0; border-bottom:1px solid var(--pat-line);}
.pat-clean .pat-phaseHead em{padding:0; border-radius:0; background:none; font-size:1.4rem; letter-spacing:0; color:var(--pat-point);}
.pat-clean .pat-phaseHead strong{font-size:2rem; line-height:2.8rem;}
.pat-clean .pat-phase:not(:last-child) .pat-phaseHead:after{content:''; flex:none; width:2.4rem; height:2.4rem; margin-left:auto; background:var(--pat-point); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%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 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;}
.pat-clean .pat-phase:last-child .pat-phaseHead:after{content:''; flex:none; width:2.4rem; height:2.4rem; margin-left:auto; background:var(--pat-point); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%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 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/contain no-repeat;}
.pat-clean .pat-steps li{align-items:center; text-align:center; padding:0 0.8rem;}
.pat-clean .pat-steps p{text-align:center;}
.pat-clean .pat-steps li:not(:last-child):after,
.pat-clean .pat-steps li:not(:last-child):before{display:none;}
.pat-clean .pat-stepIcon,
.pat-clean .pat-stepLast .pat-stepIcon{flex-direction:column; align-items:center; gap:1.2rem; width:auto; height:auto; border-radius:0; background:none; color:var(--pat-point);}
.pat-clean .pat-stepIcon svg{width:5.6rem; height:5.6rem; padding:1.4rem; border-radius:50%; background:#f6f6f6;}
.pat-clean .pat-stepIcon em,
.pat-clean .pat-stepLast .pat-stepIcon em{order:-1; position:static; display:block; width:auto; height:auto; border:0; border-radius:0; background:none; font-size:1.3rem; line-height:1.8rem; color:#888;}
.pat-clean .pat-steps h3{margin-top:1.4rem;}
.pat-clean .pat-loop{height:auto; margin-top:2rem;}
.pat-clean .pat-loop:before,.pat-clean .pat-loop:after{display:none;}
.pat-clean .pat-loop span{position:static; display:block; transform:none; padding:0; border:0; border-radius:0; background:none; white-space:normal; font-family:'Pretendard-Medium'; font-size:1.4rem; color:#666;}
.pat-clean .pat-track{display:flex; gap:2.4rem; padding-top:2rem; margin-top:auto; border-top:1px solid var(--pat-line);}
.pat-clean .pat-track > span:empty{display:none;}
.pat-clean .pat-bar,.pat-clean .pat-flag,.pat-clean .pat-barLong{justify-content:flex-start; height:auto; border-radius:0; background:none; color:#555; font-size:1.4rem;}
.pat-clean .pat-bar b,.pat-clean .pat-flag b{font-size:1.5rem; color:var(--pat-point);}
.pat-clean .pat-flag:before{display:none;}
.pat-clean .pat-after{gap:0; margin-top:2.8rem; padding:0; border-top:0; border-radius:0; background:none; color:#333;}
.pat-clean .pat-afterIcon{display:none;}
.pat-clean .pat-after p{font-size:1.6rem; color:#555;}
.pat-clean .pat-after strong{display:inline; margin-right:1.2rem; padding:0; border-radius:0; background:none; font-size:1.6rem; color:#111;}

/* 신청하기: 요금제 카드 구성은 그대로, 움직임·그림자만 제거 */
.pat-clean .svc-info{padding:0; border-radius:0; background:none; color:#555;}
.pat-clean .svc-info svg{display:none;}
.pat-clean .svc-plan{transition:none;}
.pat-clean .svc-plan:hover{border-color:var(--svc-line); box-shadow:none;}
.pat-clean .svc-planBtn:hover svg{transform:none;}

@media (max-width:1200px){
	.pat-clean .pat-flow{gap:2.4rem;}
	.pat-clean .pat-fieldList li:nth-child(3n+1){padding-left:0; border-left:0;}
	.patPage .pat-photo{height:28rem;}
	.pat-clean .pat-phase:not(:last-child) .pat-phaseHead:after{transform:rotate(90deg);}
}
@media (max-width:991px){
	.pat-clean .pat-fieldList li:nth-child(2n){padding-left:2.8rem; border-left:1px solid var(--pat-line);}
	.pat-clean .pat-fieldList li:nth-child(2n+1){padding-left:0; border-left:0;}
	.patPage .pat-photo{height:24rem;}
}
@media (max-width:767px){
	.pat-clean .pat-fieldList{margin-top:2.4rem;}
	.pat-clean .pat-field{background:linear-gradient(180deg,#fff calc(100% - 6rem),var(--pat-bg) calc(100% - 6rem));}
	.pat-clean .pat-secDesc{font-size:1.5rem; line-height:2.5rem;}
	.pat-clean .pat-fieldList li,.pat-clean .pat-fieldList li:nth-child(n){flex-direction:row; align-items:baseline; gap:1.2rem; min-height:0; padding:1.6rem 0; border-left:0; border-top:1px solid var(--pat-line); border-radius:0;}
	.patPage .pat-photo{height:18rem; margin-top:2.8rem; border-radius:1.6rem;}
	.pat-clean .pat-fieldList li:first-child{border-top:2px solid #111;}
	.pat-clean .pat-fieldList li:hover{border-color:var(--pat-line);}
	.pat-clean .pat-fieldList li:first-child:hover{border-color:#111;}
	.pat-clean .pat-num{flex:none; width:2.4rem; font-size:1.4rem;}
	.pat-clean .pat-flow{gap:1.6rem; margin-top:2.8rem;}
	.pat-clean .pat-phase{padding:0.4rem 2rem 2rem 2rem; border-radius:1.6rem;}
	.pat-clean .pat-steps li{grid-template-columns:4.4rem 1fr; column-gap:1.4rem; padding:0 0 2rem 0; text-align:left;}
	.pat-clean .pat-steps p{text-align:left;}
	.pat-clean .pat-stepIcon,.pat-clean .pat-stepLast .pat-stepIcon{gap:0.6rem; align-items:flex-start;}
	.pat-clean .pat-stepIcon svg{width:4.4rem; height:4.4rem; padding:1.1rem;}
	.pat-clean .pat-badge,.pat-clean .pat-badgeOk{padding:0; border-radius:0; background:none; font-size:1.3rem; color:var(--pat-point);}
	.pat-clean .pat-loop,.pat-clean .pat-track{display:none;}
	.pat-clean .pat-after{margin-top:2.4rem; padding-top:0;}
	.pat-clean .pat-after p{font-size:1.4rem;}
	.pat-clean .pat-after strong{display:block; margin:0 0 0.4rem 0; font-size:1.5rem;}
}

/* ======================================
   서브 비주얼 모바일 (2026-10-23) — 767px 이하: 텍스트 위·이미지 아래로 분리, 이미지는 화면 좌우 꽉 차게 / 제목 2.6rem·부제 1.6rem
   ====================================== */
@media (max-width:767px){
	.pat-hero{margin:1.6rem 0 0 0; padding:2.4rem 0 calc(70vw + 2.8rem) 0; border-radius:0; background:#fff;}
	.pat-brand .pat-hero,.pat-design .pat-hero{background:#fff;}
	.pat-hero:before{content:''; display:block; position:absolute; left:0; right:0; top:auto; bottom:0; width:auto; height:70vw; border:0; border-radius:0; box-shadow:none; background:url(/public/img/visual/subVisual01mo.webp) no-repeat center / cover;}
	.pat-brand .pat-hero:before{background-image:url(/public/img/visual/subVisual02mo.webp);}
	.pat-design .pat-hero:before{background-image:url(/public/img/visual/subVisual03mo.webp);}
	.pat-hero:after{top:auto; height:70vw;}
	.pat-hero .gnb_Tit{font-size:2.6rem; line-height:3.4rem;}
	.pat-hero .pat-heroLead{margin-top:0.8rem; font-size:1.6rem; line-height:2.4rem;}
	.pat-hero .pat-heroSub{margin-top:1rem; font-size:1.4rem; line-height:2.3rem;}
}