/* =========================================================
   팜투어 회사소개 모바일 페이지 CSS
   - about_v2.css(전용 스타일) + 실제 사용되는 공용 요소(title, pdt-lg,
     px20, tab_slide, tab, contact, modal)를 한 파일로 정리했습니다.
   - 공용 태그/클래스는 전부 .about 경로로 스코프해서 다른 페이지의
     동일 클래스와 충돌하지 않게 했습니다.
   ⚠ :root 변수는 주신 색상표 그대로이고, 실제 쓰이는 것만 남겼습니다.
   ⚠ .orgc_teams li 의 color는 원본이 var(--color-slate-600)인데 주신 변수 목록에
     --color-slate-600 이 없어서(다른 slate 단계만 있음), 브라우저가 못 읽는 걸
     막으려고 var(--color-slate-600, var(--color-slate-700))로 폴백을 걸어뒀습니다.
     실제 --color-slate-600 값이 정의되어 있다면 그 값이 우선 적용됩니다.
========================================================= */

:root {
	--max-width: 720px;
	--px-20: 20px;
	--color-primary-50: rgba(238, 242, 255, 1);
	--color-primary-500: rgba(97, 95, 255, 1);
	--color-primary-600: rgba(79, 57, 246, 1);
	--color-primary-700: rgba(67, 45, 215, 1);
	--color-slate-900: rgba(15, 23, 43, 1);
	--color-slate-700: rgba(49, 65, 88, 1);
	--color-slate-500: rgba(98, 116, 142, 1);
	--color-slate-400: rgba(144, 161, 185, 1);
	--color-slate-300: rgba(202, 213, 226, 1);
	--color-slate-100: rgba(241, 245, 249, 1);
	--color-white: rgba(255, 255, 255, 1);
	--color-teal-600: rgba(0, 150, 137, 1);
	--border-line-color: rgba(226, 232, 240, 1);
	--border-button-color: rgba(209, 213, 220, 1);
	--text-12: 0.75rem;
	--text-13: 0.8125rem;
	--text-14: 0.875rem;
	--text-15: 0.9375rem;
	--text-16: 1rem;
	--text-18: 1.125rem;
	--text-20: 1.25rem;
	--text-22: 1.375rem;
	--text-24: 1.5rem;
	--text-28: 1.75rem;
	--text-32: 2rem;
	--text-40: 2.5rem;
}

/* ── 0. 기본 리셋/공용 클래스 (.about 경로로 스코프) ─────── */
.about, .about * {box-sizing: border-box; margin: 0; padding: 0;}
.about ul, .about li {list-style: none;}
.about a {text-decoration: none; color: inherit;}
.about img {vertical-align: top; max-width: 100%;}
.about {font-size: var(--text-15);} /* 사이트 body의 font-size:12px 상속 차단용 기본값 — 폰트 크기를 따로 안 정한 요소들이 이 값을 물려받습니다 */

.about .px20 {padding-left: var(--px-20) !important; padding-right: var(--px-20) !important;}
.about .pdt-lg {padding-top: 56px !important;}

.about .title {margin: 0 0 28px;}
.about .title .tit {font-size: var(--text-28); font-weight: 800; margin: 0 0 10px; word-break: keep-all; color: var(--color-slate-900);}
.about .title p:not(.tit) {font-weight: 500; color: var(--color-slate-700); word-break: keep-all;}
.about .title {text-align: center;}

/* ── 1. 언어 토글 ─────────────────────────────────────── */
.about_lang {display: flex; justify-content: flex-end; padding: 0 20px 22px; margin-bottom: -8px;}
.about_lang .lang_btn {display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1.5px solid var(--border-line-color); border-radius: 50px; font-size: var(--text-13); font-weight: 700; color: var(--color-slate-700); background: var(--color-white); text-decoration: none;}
.about_lang .lang_btn svg {flex-shrink: 0;}
.about_lang .lang_btn:active {border-color: var(--color-primary-500); color: var(--color-primary-600); background: var(--color-primary-50);}

/* ── 2. CEO 인사말 ────────────────────────────────────── */
.about .about_ceo {padding: 180px 20px 0;}
.about_ceo .ceo_wrap {display: flex; flex-direction: column; gap: 28px;}
.about_ceo .ceo_txt {width: 100%;}
.about_ceo .ceo_txt .title {margin: 0 0 24px; text-align: left;}
.about_ceo .ceo_txt .title .tit {font-size: var(--text-28); font-weight: 900; line-height: 1.3; letter-spacing: -1px; color: var(--color-slate-900);}
.about_ceo .ceo_body .ceo_slogan {padding: 0; background: none; border: none; margin: 0 0 20px;}
.about_ceo .ceo_body .ceo_key_message {background: linear-gradient(135deg, var(--color-primary-50) 0%, #f0eeff 100%); border-left: 4px solid var(--color-primary-600); border-radius: 0 12px 12px 0; padding: 20px 18px; margin: 0 0 24px;}
.about_ceo .ceo_body .ceo_key_message p {font-size: var(--text-18); font-weight: 700; color: var(--color-slate-900); line-height: 165%; margin: 0; word-break: keep-all;}
.about_ceo .ceo_km_highlight {color: var(--color-primary-600); font-weight: 900;}
.about_ceo .ceo_body .ceo_intro {font-size: var(--text-15); font-weight: 500; line-height: 1.9; color: var(--color-slate-700); margin: 0 0 16px; word-break: keep-all;}
.about_ceo .ceo_body .ceo_intro:last-child {margin: 0;}

.about_ceo .ceo_intro_photo {display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px;}
.about_ceo .ceo_intro_photo .ceo_intro {flex: 1; margin: 0;}
.about_ceo .ceo_intro_img {width: 118px; flex-shrink: 0; margin: 0;}
.about_ceo .ceo_intro_img img {display: block; width: 100%; aspect-ratio: 1/1.18; object-fit: cover; object-position: top center; border-radius: 12px;}
.about_ceo .ceo_intro_img figcaption {margin: 6px 0 0; text-align: center; font-size: var(--text-12); font-weight: 700; color: var(--color-slate-500);}

@media (max-width: 375px) {
	.about_ceo .ceo_intro_photo {flex-direction: column;}
	.about_ceo .ceo_intro_img {width: 100%;}
	.about_ceo .ceo_intro_img img {aspect-ratio: 16/10;}
}

/* ── 3. 브랜드 카드 (가로 스크롤) ──────────────────────── */
.about .about_brand_simple {padding: 56px 0 0; overflow: hidden;}
.about_brand_simple .brand_mosaic {display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 20px 8px 20px; scroll-padding-left: 20px; scrollbar-width: none; box-sizing: border-box;}
.about_brand_simple .brand_mosaic::-webkit-scrollbar {display: none;}
.about_brand_simple .bm_card {position: relative; overflow: hidden; border-radius: 10px; min-width: 76%; max-width: 76%; height: 296px; min-height: 296px; scroll-snap-align: start; padding: 30px 28px;}
.about_brand_simple .bm_card:first-child {margin-left: 0;}
.about_brand_simple .bm_bg {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}

.about_brand_simple .bm_year {font-size: var(--text-32); font-weight: 900; line-height: 1; color: var(--color-white); letter-spacing: -1.5px;}
.about_brand_simple .bm_title {font-size: var(--text-22); font-weight: 900; line-height: 1.25; margin: 8px 0 0; color: var(--color-white); letter-spacing: -1px;}
.about_brand_simple .bm_aw_title, .about_brand_simple .bm_rv_title {font-size: var(--text-22); font-weight: 900;}
.about_brand_simple .bm_no1_title {font-size: var(--text-20); font-weight: 900; color: var(--color-white); line-height: 1.35; margin: 0 0 8px; letter-spacing: -.9px;}
.about_brand_simple .bm_ins_num {font-size: var(--text-40); font-weight: 900;}
.about_brand_simple .bm_rv_num {font-size: var(--text-40); font-weight: 900;}
.about_brand_simple .bm_aw_year, .about_brand_simple .bm_aw_org, .about_brand_simple .bm_aw_cat, .about_brand_simple .bm_ins_label, .about_brand_simple .bm_no1_lbl {font-size: var(--text-18); font-weight: 700;}
.about_brand_simple .bm_desc, .about_brand_simple .bm_ins_desc, .about_brand_simple .bm_rv_desc {font-weight: 700; line-height: 140%;}
.about_brand_simple .bm_no1_sub {font-size: var(--text-13); font-weight: 700; color: rgba(255,255,255,.78); line-height: 1.6; margin: 0;}

.about_brand_simple .bm_photo {background: var(--color-slate-900); display: flex; flex-direction: column; justify-content: space-between; color: var(--color-white);}
.about_brand_simple .bm_photo::after {content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,36,.42) 0%, rgba(10,18,36,.08) 44%, rgba(10,18,36,.78) 100%); z-index: 1;}
.about_brand_simple .bm_photo_top {position: relative; z-index: 2;}
.about_brand_simple .bm_desc {position: relative; z-index: 2; color: rgba(255,255,255,.95); word-break: keep-all;}

.about_brand_simple .bm_award {background: linear-gradient(135deg, #432DD7 0%, #4F46E5 50%, #2563EB 100%); display: flex; flex-direction: column; justify-content: space-between; color: var(--color-white);}
.about_brand_simple .bm_aw_content {position: relative; z-index: 2;}
.about_brand_simple .bm_aw_year {color: rgba(255,255,255,.78); margin: 0 0 5px;}
.about_brand_simple .bm_aw_org {color: rgba(255,255,255,.88); margin: 0 0 2px;}
.about_brand_simple .bm_aw_cat {color: rgba(255,255,255,.78); margin: 0 0 14px;}
.about_brand_simple .bm_aw_title {line-height: 1.25; letter-spacing: -1.1px; color: var(--color-white); word-break: keep-all;}
.about_brand_simple .bm_aw_icon {position: absolute; right: 24px; bottom: 24px; width: 86px; height: auto; opacity: .95; pointer-events: none; z-index: 1;}

.about_brand_simple .bm_insurance {background: rgba(241,245,249,1); display: flex; flex-direction: column; justify-content: space-between; color: var(--color-slate-700);}
.about_brand_simple .bm_ins_content {position: relative; z-index: 2;}
.about_brand_simple .bm_ins_label {color: var(--color-slate-500); margin: 0 0 8px;}
.about_brand_simple .bm_ins_num {color: var(--color-primary-700); line-height: 1; letter-spacing: -1.8px; margin: 0 0 14px;}
.about_brand_simple .bm_ins_desc {color: var(--color-slate-500); line-height: 1.65; word-break: keep-all;}
.about_brand_simple .bm_ins_icon {position: absolute; right: 24px; bottom: 24px; width: 72px; flex-shrink: 0;}
.about_brand_simple .bm_ins_icon img {display: block; width: 100%; height: auto;}

.about_brand_simple .bm_no1 {background: var(--color-slate-900); display: flex; flex-direction: column; justify-content: flex-end; color: var(--color-white);}
.about_brand_simple .bm_no1::after {content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,36,.18) 0%, rgba(10,18,36,.1) 38%, rgba(10,18,36,.88) 100%); z-index: 1;}
.about_brand_simple .bm_no1_badge {position: absolute; top: 24px; left: 28px; z-index: 2; display: flex; align-items: center; gap: 7px;}
.about_brand_simple .bm_no1_dot {width: 6px; height: 6px; border-radius: 50%; background: var(--color-teal-600); flex-shrink: 0;}
.about_brand_simple .bm_no1_lbl {color: rgba(255,255,255,.9);}
.about_brand_simple .bm_no1_inner {position: relative; z-index: 2;}
.about_brand_simple .bm_no1_bar {display: block; width: 28px; height: 2px; background: var(--color-teal-600); margin: 0 0 12px;}

.about_brand_simple .bm_review {background: var(--color-teal-600); display: flex; flex-direction: column; justify-content: space-between; color: var(--color-white);}
.about_brand_simple .bm_review::after {content: ''; position: absolute; inset: 0; background: var(--color-teal-600); z-index: 1;}
.about_brand_simple .bm_rv_top {position: relative; z-index: 2;}
.about_brand_simple .bm_rv_desc {color: rgba(255,255,255,.82); line-height: 1.55; margin: 0 0 10px; letter-spacing: -.3px;}
.about_brand_simple .bm_rv_title {color: var(--color-white); line-height: 1.3; letter-spacing: -.9px;}
.about_brand_simple .bm_rv_bottom {position: relative; z-index: 2;}
.about_brand_simple .bm_rv_num {color: var(--color-white); line-height: 1; letter-spacing: -1.8px; margin: 0 0 14px;}
.about_brand_simple .bm_rv_unit {font-size: var(--text-16); font-weight: 800; vertical-align: bottom; display: inline-block; margin-bottom: 3px; letter-spacing: 0;}
.about_brand_simple .bm_rv_btn {display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-13); font-weight: 800; color: var(--color-white); background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.32); padding: 7px 14px; border-radius: 50px; text-decoration: none; width: fit-content;}

/* ── 4. SNS 채널 ──────────────────────────────────────── */
.about_sns {padding: 56px 20px 0;}
.about_sns .title {text-align: center;}
.about_sns .sns_cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.about_sns .sns_card {min-width: 0; max-width: none; height: auto; min-height: 0; border: 1.5px solid var(--border-line-color); border-radius: 14px; padding: 16px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; background: var(--color-white);}
.about_sns .sns_icon {width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; flex-shrink: 0;}
.about_sns .sns_youtube {background: #FF0000;}
.about_sns .sns_blog {background: #03C75A;}
.about_sns .sns_instagram {background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}
.about_sns .sns_channel {font-size: 10px; font-weight: 700; color: var(--color-slate-400); text-transform: uppercase; margin: 0 0 4px; line-height: 1.2; word-break: break-all;}
.about_sns .sns_name {font-size: var(--text-13); font-weight: 800; color: var(--color-slate-900); margin: 0; line-height: 1.3; letter-spacing: -.3px;}

@media (max-width: 375px) {
	.about_sns .sns_card {padding: 14px 6px;}
	.about_sns .sns_icon {width: 40px; height: 40px; margin: 0 auto 8px;}
	.about_sns .sns_channel {font-size: 9px;}
	.about_sns .sns_name {font-size: 12px;}
}

/* ── 5. 연혁 (탭 슬라이드 공통 클래스 포함) ─────────────── */
.about .tab_slide {display: flex; align-items: center; gap: 18px; width: 100%;}
.about .tab_view {flex: 1; min-width: 0; overflow: hidden;}
.about .tab_view > ul[class$="_tab"] {display: flex; width: max-content; will-change: transform; transition: transform .35s ease; transform: translateX(var(--tx, 0px));}
.about .tab_view > ul[class$="_tab"] > li {flex: 0 0 var(--tabw); display: flex; align-items: center; justify-content: center; cursor: pointer; white-space: nowrap;}
.about .tab_arrow {width: 24px; height: 24px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; opacity: .9;}
.about .tab_arrow:disabled {opacity: .25; cursor: default;}

.about .about_history .history_tab_wrap {display: flex; justify-content: space-between; border-top: 2px solid var(--color-slate-700); border-bottom: 1px solid var(--border-button-color); padding: 30px 0;}
.about .about_history .history_tab_wrap .history_tab_box {overflow: hidden;}
.about .about_history .history_tab_wrap .history_tab {display: grid; grid-template-columns: repeat(8, 1fr); align-items: center; gap: 14px;}
.about .about_history .history_tab_wrap .history_tab li {font-size: var(--text-20); font-weight: 800; text-align: center; color: var(--color-slate-400);}
.about .about_history .history_tab_wrap .history_tab li.active {color: var(--color-primary-600);}
.about .about_history .history_box {display: none; padding: 30px 20px; gap: 20px; border-bottom: 2px solid var(--color-slate-700); flex-direction: column;}
.about .about_history .history_box.active {display: flex;}
.about .about_history .history_box .month {display: flex; gap: 10px; margin: 0 0 32px; flex-direction: column;}
.about .about_history .history_box .month:last-child {margin: 0;}
.about .about_history .history_box .month h4 {font-size: var(--text-20); font-weight: 700; color: var(--color-slate-500); width: 80px;}
.about .about_history .history_box .month p {position: relative; font-weight: 700; color: var(--color-slate-500); margin: 0 0 14px; padding: 0 0 0 18px;}
.about .about_history .history_box .month p::before {content: "\2022"; position: absolute; top: 0; left: 0; display: block; line-height: 24px;}

/* ── 6. 조직도 ────────────────────────────────────────── */
.about .orgc {display: flex; flex-direction: column; align-items: center; width: 100%; gap: 0;}
.about .orgc_line {width: 2px; height: 18px; background: var(--border-line-color); flex-shrink: 0;}
.about .orgc_top {display: flex; justify-content: center; width: 100%;}
.about .orgc_ceo {background: var(--color-primary-600); color: var(--color-white); font-size: var(--text-15); font-weight: 900; padding: 11px 44px; border-radius: 8px; letter-spacing: .5px;}

.about .orgc_depts {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%;}
.about .orgc_dept {border: 1.5px solid var(--border-line-color); border-radius: 10px; overflow: hidden;}
.about .orgc_dept_hd {background: var(--color-teal-600); color: var(--color-white); text-align: center; font-size: var(--text-13); font-weight: 800; padding: 10px 6px;}
.about .orgc_teams li {text-align: center; font-size: var(--text-13); font-weight: 700; color: var(--color-slate-600, var(--color-slate-700)); padding: 9px 4px; border-top: 1px solid var(--border-line-color);}

.about .orgc_branch {width: 100%; border: 1.5px solid var(--border-line-color); border-radius: 10px; overflow: hidden;}
.about .orgc_branch_hd {background: var(--color-teal-600); color: var(--color-white); text-align: center; font-size: var(--text-14); font-weight: 800; padding: 10px 8px;}
.about .orgc_cities {display: grid; grid-template-columns: repeat(6, 1fr);}
.about .orgc_cities li {text-align: center; font-size: 12px; font-weight: 700; color: var(--color-slate-700); padding: 9px 3px; border-top: 1px solid var(--border-line-color); border-right: 1px solid var(--border-line-color);}
.about .orgc_cities li:nth-child(6n) {border-right: none;}
.about .orgc_cities_empty {background: var(--color-white);}

.about .orgc_team {display: flex; gap: 10px; width: 100%; margin-top: 16px;}
.about .orgc_team_photo {flex: 1; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3;}
.about .orgc_team_photo img {width: 100%; height: 100%; object-fit: cover;}
.about .orgc_team_count {width: 108px; flex-shrink: 0; background: var(--color-slate-700); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 8px; text-align: center; gap: 8px;}
.about .orgc_count_lbl {font-size: var(--text-12); font-weight: 600; color: rgba(255,255,255,.65); line-height: 1.5; word-break: keep-all;}
.about .orgc_count_num {font-size: var(--text-32); font-weight: 900; color: var(--color-white); line-height: 1; letter-spacing: -1px;}
.about .orgc_count_num span {font-size: var(--text-13); font-weight: 700; letter-spacing: 0;}

/* ── 7. 전국 지사 ─────────────────────────────────────── */
.about .tab {display: flex; gap: 10px; flex-wrap: wrap;}
.about .tab li {padding: 9px 14px; border-radius: 10px; font-weight: 700; cursor: pointer; border: 1px solid var(--border-line-color); color: var(--color-slate-500); text-align: center; font-size: var(--text-14);}
.about .tab li.active {background: var(--color-primary-600); border: 1px solid var(--color-primary-600); color: var(--color-white);}

.about .contact .contact_box {display: none; margin: 20px 0 0; position: relative; flex-direction: column; align-items: flex-end; gap: 20px;}
.about .contact .contact_box.active {display: flex;}
.about .contact .contact_box .map {height: 398px; position: relative;}
.about .contact .contact_box .map img {width: 100%; height: 100%; object-fit: cover; border-radius: 10px; cursor: pointer;}
.about .contact .contact_box .call {padding: 30px; background: var(--color-slate-100); border-radius: 10px; display: flex; flex-direction: column; gap: 26px; width: 100%;}
.about .contact .contact_box .call h5 {font-weight: 700; color: var(--color-slate-700); margin: 0 0 4px; font-size: var(--text-14);}
.about .contact .contact_box .call p {font-size: var(--text-18); font-weight: 700; color: var(--color-slate-700);}

.about .about_company .contact_box {height: auto;}
.about .about_company .contact_box .map {width: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 20px;}
.about .about_company .contact_box .company_img {width: 100%;}
.about .about_company .contact_box .company_img img {width: 100%;}

/* ── 8. 맺음말 슬로건 ─────────────────────────────────── */
.about .about_slogan {text-align: center;}
.about .about_slogan div {padding: 40px 30px; word-break: keep-all; background: var(--color-slate-50, #F8FAFC);}
.about .about_slogan div p {margin: 0 0 20px; line-height: 160%; color: var(--color-slate-700); font-weight: 500; word-break: keep-all;}

/* ── 9. 모달 (직원들의 약속 / 팜투어 이야기) ────────────── */
.about .modal_wrap {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: rgba(15,23,43,.9); z-index: 9999; align-items: center; justify-content: center;}
.about .modal {background: #fff; border-radius: 10px; width: calc(100% - 40px); max-height: 80dvh; overflow-y: auto;}
.about .modal._hg-fit {max-height: none;}
.about .modal .modal_header {padding: 14px 20px; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border-line-color);}
.about .modal .modal_header h3 {max-width: calc(100% - 32px); font-size: var(--text-16); font-weight: 700; word-break: keep-all;}
.about .modal .modal_header button img {width: 22px; height: 22px; max-width: none;}
.about .modal .modal_cont {padding: 20px;}
.about .modal h3 {font-size: var(--text-22); font-weight: 700; line-height: 140%; margin: 0 0 10px;}
.about .modal p {color: var(--color-slate-700); line-height: 160%; margin: 14px 0 0; font-size: var(--text-14);}
.about .modal img {display: block; margin: 0 0 10px; border-radius: 10px;}