@charset "utf-8";
/* =========================================================================
 * company.css — About us > 그날 소개 (피그마 5296:399)
 * ========================================================================= */

.sv_company { background-color: #b9c0c6; }

/* 이미지 플레이스홀더 (관리자 이미지 등록 전) */
.cp_ph { display: block; width: 100%; height: 100%; background: #e9edf0 center/cover no-repeat;  }
.cp_ph.dark { background-color: #23282d; }
.cp_img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================ 인트로 3이미지 ============================ */
.cp_intro { padding: 100px 0 0; }
.cp_intro_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 85px; }
.cp_intro_list li { position: relative; aspect-ratio: 508 / 580; overflow: hidden; border-radius: 15px; }
.cp_intro_list .cp_ph { height: 100%; border-radius: 0; }
.cp_intro_txt {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1;
    padding: 0 26px; text-align: center;
    color: #fff; font-size: 24px; font-weight: 600; line-height: 1.45;
}

/* ============================ 운영체계 (sticky) ============================ */
.ops { padding: 210px 0; }
.ops_inner { display: flex; align-items: flex-start; gap: 60px; }
.ops_head { flex: 0 0 420px; position: sticky; top: 130px; }
.ops_head .sec_tit { margin-top: 20px; }

.ops_list { flex: 1 1 auto; min-width: 0; counter-reset: none; }
.ops_item { display: flex; gap: 50px; padding: 34px 0; border-top: 1px solid #ececec; opacity: .35; transition: opacity .4s ease; }
.ops_item:first-child { border-top: 0; padding-top: 0; }
.ops_item.active { opacity: 1; }   /* 화면 중앙 항목 강조(service p5와 동일) */
.ops_num { flex: 0 0 auto; font-size: 42px; font-weight: 400; line-height: 1.3; color: #c8ced3; font-family: 'UnShinmun', serif; }
.ops_body { flex: 1 1 auto; min-width: 0; }
.ops_t { display: block; font-size: 20px; font-weight: 700; color: #111; line-height: 1.5; }
.ops_d { display: block; margin-top: 8px; font-size: 16px; color: #666; line-height: 1.5; }
/* 이미지는 처음부터 노출(펼침/접힘 없음) */
.ops_img { margin-top: 26px; overflow: hidden; }
.ops_img .cp_ph, .ops_img .cp_img { height: 340px; }

/* ============================ 연혁 History ============================ */
.hist { position: relative; color: #fff; padding: 110px 0 0; overflow: hidden; background: #161617; }
.hist::before { content: ''; position: absolute; inset: 0; z-index: 0;
    background: url("../img/about/hist-bg.jpg") center/cover no-repeat; filter: blur(6px); transform: scale(1.08); }
.hist::after { content: ''; position: absolute; inset: 0; z-index: 0;
   
background: linear-gradient(90deg, rgba(32, 38, 43, 0.64) 0%, rgba(76, 93, 106, 0.64) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.74) 100%);
background-blend-mode: overlay, normal, normal, normal;
filter: blur(6px);
}


.hist > .inner { position: relative; z-index: 1; }
.hist .sec_tit { color: #fff; font-size: 35px; }
.hist .sec_label { color: #fff; }
.hist .sec_label .dot { background: #78838a; }
.hist .sec_head { margin-bottom: 120px; }
.hist .sw_nav button { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.hist .sw_nav button:hover { background: #fff; color: #15191d; }

/* 좌측 정렬은 JS의 slidesOffsetBefore(=inner 좌측 라인), 우측은 화면 끝까지 */
.hist_swiper { overflow: hidden; }
/* .swiper-slide(width:100%) 보다 우선순위 높게 — 카드 고정폭 유지 */
.hist_swiper .swiper-wrapper { align-items: stretch; }
.hist_swiper .swiper-slide.hist_card { width: 715px; height: auto; flex-shrink: 0; min-height: 610px; box-sizing: border-box;
    display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,0.10); }
@media (max-width: 1024px) { .hist_swiper .swiper-slide.hist_card { width: 68vw; } }
@media (max-width: 768px)  {
     /* 768px 이하: 연혁 카드 1개만 보이게 (좌측 offset 20 + 우측 여백 20) */
     .hist_swiper .swiper-slide.hist_card { width: calc(100vw - 40px); } }
.hist_body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 100px; padding: 0px 30px 40px; justify-content: space-between;}
.hist_year { font-family: 'UnShinmun', 'SIMPLECANDY', serif; font-size: 80px; line-height: 1.1; color: #fff; }
.hist_events { display: flex; flex-direction: column; gap: 24px; }
.hist_events li { display: flex; gap: 20px; font-size: 18px; }
.hist_events em { flex: 0 0 40px; font-style: normal; color: #fff; font-weight: 600; line-height: 1.4; letter-spacing: -0.36px; }
.hist_events span { color: #fff; font-weight: 400; line-height: 1.5; letter-spacing: -0.18px; }
/* 연혁 월/내용 — 관리자 에디터(HTML) 출력 */
.hist_rich { color: #fff; font-size: 18px; line-height: 1.6; letter-spacing: -0.18px; word-break: keep-all; overflow-wrap: break-word; }
.hist_rich > *:first-child { margin-top: 0; }
.hist_rich > *:last-child { margin-bottom: 0; }
.hist_rich p { margin: 0 0 14px; display: flex; align-items: flex-start; }
/* p 안 3개 구성: 1↔2 = 20px, 2↔3 = 5px (gap은 균일 적용이라 개별 margin 사용) */
.hist_rich p > * + * { margin-left:5px; }
.hist_rich p > *:nth-child(1) { margin-right:20px; }
.hist_rich strong, .hist_rich b { font-weight: 600; }
/* 내용이 빈 strong/b는 숨김(자리·마진도 제거) */
.hist_rich strong:empty, .hist_rich b:empty { display: none; }
.hist_rich ul, .hist_rich ol { margin: 0 0 14px; padding-left: 1.2em; }
.hist_rich li { margin: 0 0 8px; }
.hist_rich a { color: #fff; text-decoration: underline; }
.hist_rich img { max-width: 100%; width:30px; height: auto; }
.hist_img { flex-shrink: 0; height: 220px; }
.hist_img .cp_ph { height: 220px; border-radius: 0; }

/* ============================ 인증서 ============================ */
.cert { padding: 210px 0 250px; }
/* 좌측은 inner 좌측 라인(JS slidesOffsetBefore), 우측은 화면 끝까지 */
.cert_swiper { overflow: hidden; }
/* .swiper-slide(width:100%) 보다 우선순위 높게 — 카드 고정폭 유지 */
.cert_swiper .swiper-slide.cert_card { width: 255px; flex-shrink: 0; height: auto; box-sizing: border-box; }
.cert_img { aspect-ratio: 255 / 360; overflow: hidden; background: #e9edf0; border: 1px solid #e8e8e8; border-bottom: 0; }
.cert_img .cp_ph, .cert_img .cp_img { height: 100%; }
/* 캡션: 이미지 하단에 붙는 그라데이션 바(1줄 고정 EN + 2줄 관리자 분야명) */
.cert_cap { display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 55px; padding: 0 10px; text-align: center; color: #fff;
    background: linear-gradient(90deg, #20262b 0%, #4c5d6a 50%, #7894a8 100%); }
.cert_cap_en { font-family: 'SIMPLECANDY', 'Times New Roman', serif; font-size: 15px; line-height: 1.2; }
.cert_cap_kr { font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: -0.3px; margin-top: 2px; }
/* 하단 중앙 슬라이더 바(스크롤바) — 트랙 #c0ccd2 / 썸 #78838a */
.cert_bar { position: relative; width: 242px; height: 4px; margin: 46px auto 0; border-radius: 2px; background: #c0ccd2; overflow: hidden; }
.cert_bar .swiper-scrollbar-drag { background: #78838a; border-radius: 2px; cursor: grab; }
.cert_bar .swiper-scrollbar-drag:active { cursor: grabbing; }

/* ============================ 조직도 ============================ */
.org { position: relative; overflow: hidden; padding: 120px 0 130px;
    --org-line: rgba(255,255,255,.6);
    background:
        linear-gradient(0deg, rgba(215,209,201,.5), rgba(215,209,201,.5)),
        linear-gradient(0deg, rgba(17,17,17,.3), rgba(17,17,17,.3)),
        url("../img/about/org-bg.png") center bottom / cover no-repeat; }
.org_inner { position: relative; max-width: 1750px; }   /* 조직도만 1750(8열×210 + 7×10) */

/* 인물 pill 공통 (사진 좌측 + 텍스트 우측정렬) */
.org_pill { display: flex; align-items: center; height: 60px; box-sizing: border-box;
    padding: 8px 24px 8px 8px; border-radius: 50px;
    background: rgba(255,255,255,1);/* -webkit-backdrop-filter: blur(6px); */}
/* 리더십 pill은 시안처럼 고정폭 235px → 홀수 변호사 시 가운데가 부대표와 일자 정렬 */
.org_lead_pill { width: 235px; }
.org_ava { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; overflow: hidden;  margin-right:10px}
.org_ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.org_ava.is-empty { background: #c7ccd1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-9 2.2-9 5.5V22h18v-2.5C21 16.2 16.4 14 12 14Z'/%3E%3C/svg%3E") center/60% no-repeat; }
.org_txt { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 18px; color: #111; line-height: 1.4; white-space: nowrap; }
.org_txt span{font-size: 14px;}
.org_role { font-weight: 400; }
.org_nm { font-weight: 700; }

/* 리더십 트리 — 연결선: 흰색 점선 */
.org_lead { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.org_v { width: 0; height: 34px; border-left: 2px dotted #fff; }
.org_lawyers { position: relative; display: flex; flex-wrap: nowrap; justify-content: center; gap: 40px; padding-top: 34px; }
.org_hbar { position: absolute; top: 0; height: 0; border-top: 2px dotted #fff; }
.org_lw { position: relative; }
.org_lw::before { content: ''; position: absolute; top: -34px; left: 50%; margin-left: -1px; width: 0; height: 34px; border-left: 2px dotted #fff; }

/* 워터마크 (SIMPLE CANDY · 시안 색/자간 그대로) — 아래 팀 박스가 살짝 겹침 */
.org_wm { position: relative; z-index: 1; text-align: center; margin: -45px 0 0;
    font-family: 'SIMPLECANDY', 'Times New Roman', serif; font-weight: 400;
    font-size: clamp(40px, 9vw, 160px); letter-spacing: .03em; line-height: 1.05;
    color: rgba(70,70,70,.4); white-space: nowrap; overflow: hidden; text-overflow: clip; pointer-events: none;  -webkit-backdrop-filter: blur(6px);  }

/* 팀 패널 — 팀별 독립 유리 카드(고정 높이) + 상단 다크 헤더 pill (공용 컨테이너 제거) */
.org_panel { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top:50px; backdrop-filter: blur(9px); }
.org_col { flex: 0 0 205px; width: 205px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.org_col_hd { width: 100%; height: 55px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: rgba(0,0,0,.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: #fff; font-size: 18px; font-weight: 600; }
.org_col_v { display: none; }   /* 헤더-패널 사이 세로선 제거(디자인상 간격만) */
/* 각 팀 = 프로스티드 유리 카드, 시안처럼 고정 높이(멤버 수 무관 하단 정렬) */
.org_col_list { width: 100%; box-sizing: border-box; min-height: 399px; padding: 9px 14px;
    display: flex; flex-direction: column; align-items: center; gap: 0;
    border-radius: 10px; background: rgba(255,255,255,.3);
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
/* 멤버: 개별 pill 배경 없이 아바타(40) + 우측정렬 텍스트 */
.org_mem_pill { width: 100%; height: 54px; padding: 0 6px 0 0; border: 0; border-radius: 0; background: transparent; }
.org_mem_pill .org_ava { width: 40px; height: 40px; margin-right:5px}
.org_mem_pill .org_txt { font-size: 15px; text-align: center; }
.org_mem_pill .org_role { font-weight: 400; }
.org_mem_pill .org_nm { font-weight: 700; }

/* PC: 팀 패널을 콘텐츠 폭으로 축소(가운데) → 리더십(org_lead) 폭을 JS로 여기에 맞추고,
   변호사 줄은 그 폭 안에서 space-between 으로 균등 분배(시안처럼 팀 줄과 좌우 끝 정렬) */
@media (min-width: 1151px) {
    .org_panel   { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
    .org_lead    { margin-left: auto; margin-right: auto; }   /* width 는 JS가 팀 패널 폭으로 설정 */
    .org_lawyers { width: 100%; justify-content: space-between; }
}

/* =============================== 반응형 =============================== */
@media (max-width: 1650px) {
.org_lawyers {gap:20px}
}

@media (max-width: 1550px) {
.org_lawyers {gap:10px}
}


@media (max-width: 1450px)  {
 /* 팀/헤더/멤버 글자 크기는 유지(축소 안 함) — 변호사 pill만 폭·글자를 조정해 한 줄 유지 */
 .org_ava {width: 40px; height: 40px}
 .org_lawyers .org_lead_pill {width:180px;}
 .org_lawyers .org_txt {font-size:14px}
 .org_lawyers .org_txt span {font-size:12px}
 .org_pill {padding: 8px 8px 8px 8px;}
}

/* 조직도: 변호사 세로 배치(좌측 레일+엘보) — 1150부터 아래로 쭉 */
@media (max-width: 1150px) {
    .org_hbar { display: none; }
    .org_v2 { height: 18px; }
    .org_lawyers { flex-direction: column; align-items: stretch; gap: 26px;
        padding: 24px 0 0 34px; max-width: 360px; margin: 0 auto; }
    .org_lawyers .org_lead_pill { width: 100%; max-width: none; }
    
    .org_lawyers::before { content: ''; position: absolute; left: 14px; top: 0; bottom: 27px;
        border-left: 2px dotted #fff; }
    .org_lawyers::after { content: ''; position: absolute; top: 0; left: 14px;
        width: calc(50% - 14px); height: 0; border-top: 2px dotted #fff; }
    .org_lw::before { content: ''; position: absolute; top: 50%; left: -20px; margin-left: 0;
        width: 20px; height: 0; border-left: 0; border-top: 2px dotted #fff; }
}

@media (max-width: 1024px) {
    .cp_intro { padding-top: 60px; }
    .cp_intro_list { gap: 20px; }
    .ops { padding: 70px 0; }
    .ops_inner { flex-direction: column; gap: 30px; }
    .ops_head { position: static; flex: none; width: 100%; }
    .ops_item { gap: 24px; padding: 24px 0; opacity: 1; }   /* 모바일: 전부 표시 */
    .ops_img .cp_ph { height: 52vw; }
    .hist { padding: 70px 0 0px; }
    .hist_card { width: 82%; }
    .hist_year { font-size: 64px; }
    .cert { padding: 70px 0; }
    .sec_tit { font-size: 24px; }
    .sec_head { margin-bottom: 28px; }
    
    .hist_body {padding:0px 20px 0px }
    .ops_list  {padding:0px; width:100%}
    .org { padding: 70px 0; }
    .org_wm { font-size: clamp(28px, 9vw, 60px); margin: -20px 0 0; }
    .org_panel { gap: 10px; }
    .org_col_list { min-height: 0; }   /* 모바일: 고정 높이 해제 */
    /* 조직도 폰트 축소 */
    .org_txt { font-size: 16px; }
    .org_col_hd { font-size: 16px; }
    .org_mem_pill .org_txt { font-size: 14px; }
}

/* 조직도: 태블릿/모바일 — 변호사 세로 배치 + 좌측 세로 레일 + 각 카드 가지(엘보) */
@media (max-width: 768px) {
    .org_pill { max-width: 100%; height: 54px; padding: 7px 20px 7px 7px; }
    .org_txt { white-space: normal; font-size: 15px; }
    .org_ava { width: 42px; height: 42px; }
    .org_col_hd { font-size: 15px; height: 48px; }
    .org_col { flex: 0 0 46%; width: 46%; min-width: 160px; }
    .org_mem_pill { height: 48px; }
    .org_mem_pill .org_ava { width: 34px; height: 34px; }
    .org_mem_pill .org_txt { font-size: 13.5px; }
    .hist_swiper .swiper-slide.hist_card {min-height: unset;}
    .hist_body {gap:50px}
    .hist .sec_head {margin-bottom:60px;}
    /* 폰트 축소 (768) */
    .cp_intro_txt { font-size: 17px; }
    .ops_num { font-size: 36px; }
    .ops_t { font-size: 19px; }
    .ops_d { font-size: 15px; }
    .hist .sec_tit { font-size: 24px; }
    .hist_year { font-size: 60px; }
    .hist_events li { font-size: 16px; }
    .hist_rich { font-size: 16px; }
    /* 인증서: 모바일 한 장씩(좌 offset 20 + spaceBetween 34로 다음 카드 화면 밖) */
    .cert_swiper .swiper-slide.cert_card { width: calc(100vw - 40px); }
    .cert_cap_kr { font-size: 16px; }
    .cert_cap_en { font-size: 14px; }

}
@media (max-width: 486px) {
    .org_col { flex: 0 0 100%; width: 100%; }
    /* 소형: 한 단계 더 축소 */
    .org_wm { font-size: clamp(22px, 8vw, 40px); }
    .org_txt { font-size: 14px; }
    .org_col_hd { font-size: 14px; }
    .org_mem_pill .org_txt { font-size: 13px; }
    .org_lead_pill { width: 100%; max-width: 300px; }
}

@media (max-width: 486px) {
    .cp_intro_list { grid-template-columns: 1fr; gap: 14px; }
    .cp_intro_txt { font-size: 15px; }
    .hist .sec_tit { font-size: 20px; }
    .ops_num { font-size: 32px; }
    .ops_t { font-size: 17px; }
    .ops_d { font-size: 14px; }
    .hist_year { font-size: 48px; }
    .hist_events li { font-size: 15px; gap: 12px; }
    .hist_rich { font-size: 15px; }
    .cert_swiper .swiper-slide.cert_card { width: calc(100vw - 40px); }
    .cert_cap_kr { font-size: 15px; }
    .cert_cap_en { font-size: 13px; }
    .sec_tit { font-size: 20px; }
    .sw_nav button { width: 42px; height: 42px; }
    .sw_nav button .sw_ico { width: 22px; }
	.ops_item {flex-wrap: wrap;         gap: 10px;}
	.hist_body {padding:0px 0px 20px}
}