@charset "utf-8";
/* ============================================================
   sub-common.css — 서브페이지 공통 상단 규격 (단일 관리 파일)
   · index.html 을 제외한 모든 서브페이지에서 "맨 마지막"에 로드한다.
   · 여기 있는 3가지(서브비주얼 sv_v4 / 경로바 / cont_head + 본문 상단여백)는
     페이지별 CSS(speech.css, vision.css, greeting.css …)에서 절대 재정의하지 않는다.
   · 페이지 클래스(.sp_page, .vs_page …)를 쓰지 않으므로 새 페이지를 추가해도
     이 파일만 로드하면 자동으로 동일한 규격이 적용된다.
   ============================================================ */

/* ── 1) 서브 비주얼 sv_v4 규격 ───────────────────────────── */
.sub_visual.sv_v4{height:34rem !important;}
.sub_visual.sv_v4 .sv_inner{padding-bottom:2.6rem;}
.sub_visual.sv_v4 .sv_tit{margin-top:0; font-size:5rem; line-height:1.15; letter-spacing:-.1rem;}
@media (max-width:1440px){
	.sub_visual.sv_v4{height:32rem !important;}
	.sub_visual.sv_v4 .sv_inner{padding-bottom:2.4rem;}
	.sub_visual.sv_v4 .sv_tit{font-size:4.8rem;}
}
@media (max-width:1280px){
	.sub_visual.sv_v4{height:30rem !important;}
	.sub_visual.sv_v4 .sv_inner{padding-bottom:2.2rem;}
	.sub_visual.sv_v4 .sv_tit{font-size:4.4rem;}
}
@media (max-width:1024px){
	.sub_visual.sv_v4{height:28rem !important;}
	.sub_visual.sv_v4 .sv_inner{padding-bottom:2.2rem;}
	.sub_visual.sv_v4 .sv_tit{font-size:4rem; letter-spacing:-.08rem;}
}
@media (max-width:768px){
	.sub_visual.sv_v4{height:auto !important; min-height:0 !important;}
	.sub_visual.sv_v4 .sv_inner{padding:9.6rem 0 3rem;}
	.sub_visual.sv_v4 .sv_head{gap:2.6rem;}
	.sub_visual.sv_v4 .sv_tit{margin-top:0; font-size:min(3.8rem, calc((100vw - 2 * var(--gutter)) / 5.2));}
}
@media (max-width:480px){
	.sub_visual.sv_v4 .sv_inner{padding:8.6rem 0 2.6rem;}
	.sub_visual.sv_v4 .sv_head{gap:2.2rem;}
	.sub_visual.sv_v4 .sv_tit{font-size:min(3.4rem, calc((100vw - 2 * var(--gutter)) / 4.8)); letter-spacing:-.06rem;}
}
@media (max-width:380px){
	.sub_visual.sv_v4 .sv_tit{font-size:min(3rem, calc((100vw - 2 * var(--gutter)) / 4.4));}
}

/* ── 2) 경로바(크럼) — 최소 44px 탭 영역 ─────────────────── */
.sub_visual .sv_path .path_btn,
.sub_visual .sv_path .path_item:first-of-type .path_btn{font-size:1.7rem;}
.sub_visual .sv_path .path_list a{padding:1.2rem 1.6rem; font-size:1.6rem;}
@media (min-width:1281px) and (max-width:1599px){
	.sub_visual .sv_path{gap:1rem;}
	.sub_visual .sv_path .path_home{width:5.6rem; height:5.6rem;}
	.sub_visual .sv_path .path_home svg{width:2.1rem; height:2.1rem;}
	.sub_visual .sv_path .path_item{height:5.6rem;}
	.sub_visual .sv_path .path_btn,
	.sub_visual .sv_path .path_item:first-of-type .path_btn{min-width:19rem; padding:0 2.2rem 0 2.6rem; gap:1.8rem; font-size:1.75rem; border-radius:2.8rem;}
	.sub_visual .sv_path .path_btn .arw{width:.95rem; height:.95rem;}
	.sub_visual .sv_path .path_list a{padding:1.2rem 1.7rem; font-size:1.7rem;}
}
@media (min-width:1025px) and (max-width:1280px){
	.sub_visual .sv_path{gap:.9rem;}
	.sub_visual .sv_path .path_home{width:5.2rem; height:5.2rem;}
	.sub_visual .sv_path .path_item{height:5.2rem;}
	.sub_visual .sv_path .path_btn,
	.sub_visual .sv_path .path_item:first-of-type .path_btn{min-width:18.5rem; padding:0 2rem 0 2.4rem; gap:1.6rem; font-size:1.7rem;}
}
@media (max-width:1024px){
	.sub_visual .sv_path{gap:.9rem;}
	.sub_visual .sv_path .path_home{width:5.2rem; height:5.2rem;}
	.sub_visual .sv_path .path_home svg{width:1.9rem; height:1.9rem;}
	.sub_visual .sv_path .path_item{height:5.2rem;}
	.sub_visual .sv_path .path_btn,
	.sub_visual .sv_path .path_item:first-of-type .path_btn{padding:0 2rem 0 2.4rem; gap:1.4rem; font-size:1.65rem;}
}
@media (max-width:768px){
	.sub_visual .sv_path{gap:.8rem;}
	.sub_visual .sv_path .path_home{width:5rem; height:5rem;}
	.sub_visual .sv_path .path_home svg{width:1.8rem; height:1.8rem;}
	.sub_visual .sv_path .path_item{height:5rem;}
	.sub_visual .sv_path .path_btn,
	.sub_visual .sv_path .path_item:first-of-type .path_btn{padding:0 1.4rem 0 1.7rem; gap:.9rem; font-size:1.6rem; letter-spacing:-.03rem;}
	.sub_visual .sv_path .path_list a{padding:1.25rem 1.6rem; font-size:1.6rem;}
}
@media (max-width:480px){
	.sub_visual .sv_path .path_home{width:4.8rem; height:4.8rem;}
	.sub_visual .sv_path .path_item{height:4.8rem;}
	.sub_visual .sv_path .path_btn,
	.sub_visual .sv_path .path_item:first-of-type .path_btn{padding:0 1.2rem 0 1.5rem; font-size:1.55rem;}
}
@media (max-width:380px){
	.sub_visual .sv_path{gap:.6rem;}
	.sub_visual .sv_path .path_home{width:4.6rem; height:4.6rem;}
	.sub_visual .sv_path .path_item{height:4.6rem;}
	.sub_visual .sv_path .path_btn,
	.sub_visual .sv_path .path_item:first-of-type .path_btn{padding:0 1rem 0 1.2rem; gap:.6rem; font-size:1.5rem; border-radius:2.4rem;}
}

/* ── 3) 콘텐츠 상단 유틸바(cont_head) ────────────────────── */
.sub_content .cont_head{position:relative; z-index:9;
	display:flex; align-items:center; justify-content:flex-end; margin-bottom:2.4rem;}
.sub_content .cont_head .head_util{display:flex; gap:.8rem;}
.sub_content .cont_head .util_btn{display:grid; place-items:center; width:4.6rem; height:4.6rem; border-radius:50%; color:#1c3a5e;
	background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9);
	backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:background .25s,transform .25s;}
.sub_content .cont_head .util_btn:hover{background:#fff; color:var(--point); transform:translateY(-2px);}
.sub_content .cont_head .util_btn svg{width:2rem; height:2rem;}
.sub_content .cont_head .util_btn.is_copied::after{top:calc(100% + .8rem); right:0; left:auto; transform:none;
	z-index:9; pointer-events:none; white-space:nowrap;
	box-shadow:0 .8rem 2rem -.6rem rgba(16,44,84,.4);}
@media (max-width:1024px){
	.sub_content .cont_head{display:none;}
}

/* ── 4) 서브비주얼 → 본문 상단 여백 ──────────────────────
   1024px 이하에서는 cont_head(4.6rem + 여백 2.4rem)가 숨겨지므로
   그만큼을 본문 상단 여백으로 되돌려준다. 페이지별로 다르게 두지 않는다. */
.container .sv_v4 ~ .sub_content{padding-top:2.4rem;}
@media (max-width:1280px){ .container .sv_v4 ~ .sub_content{padding-top:2.2rem;} }
@media (max-width:1024px){ .container .sv_v4 ~ .sub_content{padding-top:7.2rem;} }
@media (max-width:768px){  .container .sv_v4 ~ .sub_content{padding-top:6rem;} }
@media (max-width:480px){  .container .sv_v4 ~ .sub_content{padding-top:5rem;} }
@media (max-width:380px){  .container .sv_v4 ~ .sub_content{padding-top:4.4rem;} }