/* =====================================================================
   회사소개 페이지 전용 (about.html 목업 이식) — 공통 헤더/푸터와 함께 사용.
   모든 규칙을 .about-main 스코프로 한정해 공통 토큰/헤더/푸터와 충돌 방지.
   ===================================================================== */
.about-main{
  --blue-50:#EFF6FF; --blue-100:#DBEAFE; --blue-600:#2563EB; --blue-700:#1D4ED8;
  --gray-900:#171719; --gray-800:#1F2937; --gray-700:#374151; --gray-600:#4B5563;
  --gray-500:#6B7280; --gray-400:#71767F; --gray-300:#D1D5DB; --gray-200:#E5E7EB;
  --gray-100:#F3F4F6; --gray-50:#F9FAFB; --white:#FFFFFF;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;
  --r-8:8px; --r-10:10px; --r-12:12px; --r-16:16px; --r-20:20px; --r-full:9999px;
  max-width:720px; margin:0 auto; padding:0 20px 8px;
  color:var(--gray-900); line-height:1.65; letter-spacing:-.025em;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
@media (min-width:1024px){ .about-main{ max-width:1040px; } }
.about-main a{color:inherit;text-decoration:none}
.about-main ul{list-style:none;margin:0;padding:0}

/* HERO 배너 (풀블리드 이미지, 헤더 바로 아래 전체 너비) */
.about-hero-banner{width:100%;aspect-ratio:1714/854;background:#F3F4F6;overflow:hidden}
.about-hero-banner img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:768px){ .about-hero-banner{aspect-ratio:auto;height:539px} }

/* HERO */
.about-main .hero{padding:28px 0 20px;text-align:center}
.about-main .hero-title{font-size:27px;font-weight:var(--fw-extra);line-height:1.35}
.about-main .hero-title em{font-style:normal;color:var(--blue-600)}
.about-main .hero-lead{margin-top:14px;font-size:18px;font-weight:var(--fw-bold);color:var(--gray-800)}
.about-main .hero-desc{margin:18px auto 0;font-size:14.5px;line-height:1.65;color:var(--gray-500);max-width:520px}
@media (min-width:768px){
  .about-main .hero{padding:40px 0 24px}
  .about-main .hero-title{font-size:38px}
  .about-main .hero-lead{font-size:21px;margin-top:18px}
  .about-main .hero-desc{font-size:16px;margin-top:20px}
}

/* SECTION 박스 */
.about-main .sec{margin-bottom:22px}
.about-main .sec-box{background:var(--gray-50);border-radius:var(--r-16);padding:28px 22px}
.about-main .sec-label{display:block;font-size:13px;font-weight:var(--fw-bold);color:var(--blue-600);margin-bottom:10px}
.about-main .sec-title{font-size:19px;font-weight:var(--fw-extra);line-height:1.4;margin-bottom:14px}
.about-main .sec-body p{font-size:14.5px;line-height:1.3;color:var(--gray-600)}
.about-main .sec-body p + p{margin-top:4px}
.about-main .greeting-body p{font-size:13.5px;line-height:1.6}
.about-main .greeting-body p + p{margin-top:12px}
.about-main .sec-box--dark{background:var(--gray-900)}
.about-main .sec-box--dark .sec-title{color:var(--white)}
@media (min-width:768px){
  .about-main .sec-box{padding:36px 40px;border-radius:var(--r-20)}
  .about-main .sec-title{font-size:22px;margin-bottom:16px}
  .about-main .sec-body p{font-size:15.5px}
  .about-main .greeting-body p{font-size:14.5px}
}

/* 가치 리스트 */
.about-main .vlist{display:flex;flex-direction:column;gap:12px}
.about-main .vitem{background:var(--white);border-radius:var(--r-12);padding:18px}
.about-main .vitem-t{font-size:17px;font-weight:var(--fw-bold);line-height:1.4}
.about-main .vitem-t span{color:var(--blue-600)}
.about-main .vitem-d{margin-top:12px;font-size:13.5px;line-height:1.65;color:var(--gray-500)}
@media (min-width:768px){
  .about-main .vlist{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .about-main .vitem{padding:20px}
  .about-main .vitem-t{font-size:18px}
  .about-main .vitem-d{font-size:14px}
}

/* 인용(대표 인사말) */
.about-main .quote{font-size:18px;font-weight:var(--fw-bold);line-height:1.5;margin-bottom:16px}
.about-main .quote em{font-style:normal;color:var(--blue-600)}
.about-main .sign{margin-top:18px;display:flex;align-items:center;gap:8px}
.about-main .sign-role{font-size:13px;font-weight:var(--fw-medium);color:var(--gray-500)}
.about-main .sign-div{width:1px;height:12px;background:var(--gray-300)}
.about-main .sign-name{font-size:14.5px;font-weight:var(--fw-bold)}
@media (min-width:768px){ .about-main .quote{font-size:21px} }

/* 링크 리스트 */
.about-main .llist{display:flex;flex-direction:column;gap:10px}
.about-main .llist a{display:flex;align-items:center;gap:12px;min-height:58px;padding:14px 16px;background:var(--white);border-radius:var(--r-12);transition:background .15s}
.about-main .llist a:hover{background:var(--blue-50)}
.about-main .llist-t{font-size:14.5px;font-weight:var(--fw-bold)}
.about-main .llist-d{margin-top:2px;font-size:13px;color:var(--gray-500)}
.about-main .llist-tx{display:flex;flex-direction:column;min-width:0}
.about-main .llist-arrow{margin-left:auto;flex:0 0 auto;color:var(--gray-400)}
.about-main .llist a:hover .llist-t{color:var(--blue-700)}
.about-main .llist a:hover .llist-arrow{color:var(--blue-600)}
@media (min-width:600px){
  .about-main .llist a{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr) 20px;align-items:center;column-gap:16px}
  .about-main .llist-tx{display:contents}
}

/* 오시는 길 */
.about-main .dlist{display:flex;flex-direction:column;gap:0}
.about-main .dlist > div{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:12px;padding:11px 0;border-top:1px solid var(--gray-200)}
.about-main .dlist > div:first-child{border-top:0;padding-top:0}
.about-main .dlist dt{font-size:13px;font-weight:var(--fw-semibold);line-height:1.65;color:var(--gray-500)}
.about-main .dlist dd{font-size:14.5px;line-height:1.65;color:var(--gray-900)}
.about-main .dlist dd a{color:var(--blue-600);font-weight:var(--fw-bold)}
.about-main .dlist dd a:hover{color:var(--blue-700)}
@media (min-width:600px){ .about-main .dlist > div{grid-template-columns:100px minmax(0,1fr)} }

/* 텍스트 링크(지도) */
.about-main .tlinks{margin-top:16px;display:flex;flex-wrap:wrap;gap:16px 20px}
.about-main .tlinks a{display:inline-flex;align-items:center;gap:4px;min-height:40px;font-size:13.5px;font-weight:var(--fw-bold);color:var(--gray-900)}
.about-main .tlinks a:hover{color:var(--gray-600)}

/* 상담 CTA */
.about-main .contact{margin:28px 0 40px}
.about-main .contact-box{padding:8px 22px 0;text-align:center}
.about-main .contact-t{font-size:20px;font-weight:var(--fw-extra);line-height:1.4}
.about-main .contact-d{margin-top:8px;font-size:14px;line-height:1.65;color:var(--gray-500)}
.about-main .contact-acts{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.about-main .abt-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:var(--r-12);font-size:15px;font-weight:var(--fw-bold);cursor:pointer}
.about-main .abt-btn--white{background:var(--blue-600);color:var(--white)}
.about-main .abt-btn--white:hover{background:var(--blue-700)}
.about-main .abt-btn--outline{border:1.5px solid var(--gray-200);color:var(--gray-900)}
.about-main .abt-btn--outline:hover{background:var(--gray-50)}
@media (min-width:600px){
  .about-main .contact-box{padding:8px 40px 0}
  .about-main .contact-t{font-size:24px}
  .about-main .contact-d{font-size:15px}
  .about-main .contact-acts{flex-direction:row;justify-content:center;flex-wrap:wrap}
  .about-main .abt-btn{padding:0 26px}
}

/* 스크롤 등장 애니메이션 */
.about-main .reveal-target{opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.about-main .reveal-target.in-view{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){ .about-main .reveal-target{transition:none;opacity:1;transform:none} }