/* 회사 소개(/about) 전용 — 1차 리디자인 시안 voicecheck-about 의 페이지 CSS. 모바일 덜어내기(.m-hide · .m-more · .m-snap)는 site.css 공통.
   시안은 대표 옆에 걸어온 길을 두었지만, 실제 화면은 고정 순서(회사 → 대표 → 사업 영역 → 경험·사례 → 기관 협업 → 문의)라 블록을 나눠 같은 모양으로 쓴다. */


/* 회사 소개 — 대담함은 한 곳: 걸어온 길 위의 법인 설립 지점 */
.about-head h1 span { display: block; }
.about-head .p-head-grid { align-items: end; }
.about-head .lede { margin-top: 0; }
.about-head .lede + .lede { margin-top: 12px; font-size: var(--fs-m); }

/* 대표 + 걸어온 길 */
.about-head + .band { padding-top: clamp(56px, 6vw, 88px); }
.story { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.fdr { position: sticky; top: 112px; }
.fdr .portrait { width: 132px; height: 132px; }
.fdr .photo-note { margin-top: 10px; font-size: var(--fs-xs); color: var(--slate); }
.fdr h2 { margin-top: 26px; font-size: var(--fs-2xl); line-height: 1.25; font-weight: 750; letter-spacing: -.04em; }
.fdr .role { margin-top: 4px; font-size: var(--fs-s); color: var(--slate); }
.fdr .bio { margin-top: 22px; color: var(--ink-2); line-height: 1.8; }
.fdr .bio + .bio { margin-top: 12px; }

.path-head p { margin-top: 10px; font-size: var(--fs-s); color: var(--slate); max-width: 34em; }
.path { --yr: 3.4em; margin-top: 40px; font-size: var(--fs-s); }
.path li { position: relative; display: grid; grid-template-columns: var(--yr) minmax(0, 1fr); column-gap: 52px; padding-bottom: 28px; }
/* 선과 점 — 설립 전은 옅은 선, 설립 뒤는 코발트 */
.path li::before { content: ""; position: absolute; left: calc(var(--yr) + 25px); top: 12px; bottom: -12px; width: 2px; background: var(--peri-soft); }
.path li::after { content: ""; position: absolute; left: calc(var(--yr) + 20px); top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--peri); }
.path li:has(.same)::after { width: 8px; height: 8px; left: calc(var(--yr) + 22px); top: 9px; background: var(--peri); box-shadow: none; }
.path time { font-size: var(--fs-s); line-height: 1.85; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.path b { display: block; font-size: var(--fs-m); line-height: 1.6; font-weight: 650; letter-spacing: -.025em; color: var(--ink); }
.path li span { display: block; margin-top: 2px; color: var(--slate); line-height: 1.65; }
.path li.corp::before { background: var(--cobalt); top: 12px; bottom: 0; }
.path .found + li::before { top: -44px; }
.path li.corp::after { background: var(--cobalt); box-shadow: none; }

/* 설립 지점 — 이 페이지의 한 장면 */
.path .found { display: block; margin: 4px 0 40px; padding: 0; }
.path .found::before, .path .found::after { content: none; }
.found-in { position: relative; margin-left: calc(var(--yr) + 16px); padding: 26px 30px 28px; border-radius: 22px; background: var(--cobalt); color: #fff; }
.found-in time { color: rgba(255, 255, 255, .82); font-size: var(--fs-s); font-weight: 500; }
.found-in strong { display: block; margin-top: 4px; font-size: var(--fs-xl); line-height: 1.35; font-weight: 750; letter-spacing: -.035em; }
.found-in p { margin-top: 8px; color: rgba(255, 255, 255, .86); }
.found-in .mark { position: absolute; right: 26px; top: 26px; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.found-in .mark img { width: 56%; }
.path-foot { margin-top: 8px; font-size: var(--fs-fine); color: var(--slate); }

/* 지금 하는 일 */
.biz { margin-top: 48px; border-top: 1px solid var(--line); }
.biz-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3.4fr); gap: 16px clamp(28px, 4vw, 56px); padding: 32px 0; border-bottom: 1px solid var(--line); align-items: start; }
.biz-row h3 { font-size: var(--fs-l); line-height: 1.4; font-weight: 700; letter-spacing: -.03em; }
.biz-row h3 small { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 500; color: var(--slate); letter-spacing: 0; }
.biz-desc { font-size: var(--fs-s); line-height: 1.8; color: var(--ink-2); }
.biz-side p { font-size: var(--fs-s); line-height: 1.7; color: var(--slate); }
.biz-side .link { display: inline-block; margin-top: 12px; font-size: var(--fs-s); }

/* 기관 문의 */
.ask-org { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; }
.ask-org .lede { margin-top: 14px; }
.ask-org .acts { display: grid; gap: 12px; justify-items: start; }
.ask-org .note { margin-top: 2px; }

@media (max-width: 960px) { .biz-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } .biz-side { grid-column: 2; } }
@media (max-width: 860px) {
    .story, .ask-org { grid-template-columns: minmax(0, 1fr); }
    .fdr { position: static; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: center; }
    .fdr .portrait { width: 96px; height: 96px; grid-row: 1 / span 3; }
    .fdr .photo-note { grid-column: 2; grid-row: 3; margin-top: 6px; }
    .fdr h2 { margin-top: 0; grid-column: 2; grid-row: 1; } .fdr .role { grid-column: 2; grid-row: 2; }
    .fdr .bio { grid-column: 1 / -1; }
    .biz-row { grid-template-columns: minmax(0, 1fr); padding: 28px 0; }
    .biz-side { grid-column: auto; }
}
@media (max-width: 560px) {
    .path { --yr: 2.9em; }
    .path li { column-gap: 40px; }
    .path li::before { left: calc(var(--yr) + 19px); } .path li::after { left: calc(var(--yr) + 14px); }
    .path li:has(.same)::after { left: calc(var(--yr) + 16px); }
    .found-in { margin-left: 0; padding: 22px 22px 24px; }
    .found-in .mark { display: none; }
    .ask-org .btn { width: 100%; } .ask-org .acts { justify-items: stretch; }
}
/* 모바일 덜어내기 */
.path li.mf { display: none; }
@media (max-width: 760px) {
    .path li.mf { display: grid; padding-bottom: 20px; }
    .path li.mf::after { width: 8px; height: 8px; left: calc(var(--yr) + 16px); top: 18px; background: var(--peri-soft); box-shadow: none; }
    .path li.mf .m-more { grid-column: 2; justify-self: start; margin-top: -2px; }
    .path li.mf[hidden] { display: none; }
    .path li.m-x:focus { outline-offset: 4px; }
    .fdr .bio { margin-top: 18px; }
    #business .lede { margin-top: 14px; }
    .biz { margin-top: 28px; border-top: 0; padding-bottom: 4px; }
    .biz-row { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px; border: 0; border-radius: 22px; background: var(--white); }
    .biz-row h3 { font-size: var(--fs-l); }
    .biz-side { margin-top: auto; }
    .biz-side p { display: none; }
    .biz-side .link { margin-top: 0; padding: 10px 0; }
}

/* ── 실제 화면에서 더한 것 (원고 전체를 싣느라) ── */
.about-head .p-head-grid { align-items: start; }   /* 소개 문단이 셋이라 제목을 위에 맞춘다 */
/* 대표 — 왼쪽 이름 · 숫자, 오른쪽 소개 글 · 주요 경력 */
.fdr .nums { margin-top: 28px; gap: 14px; }
.fdr .nums strong { font-size: var(--fs-l); min-width: 3em; }
.fdr .portrait.has-photo { overflow: hidden; background: var(--mist); }
.fdr .portrait.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.fdr-body .bio { color: var(--ink-2); line-height: 1.85; }
.fdr-body .bio + .bio { margin-top: 14px; }
.fdr-body .bio.lead { font-size: var(--fs-l); line-height: 1.7; font-weight: 500; letter-spacing: -.03em; color: var(--ink); text-wrap: pretty; }
.fdr-body .sub-title { margin-top: 40px; font-size: var(--fs-l); font-weight: 700; letter-spacing: -.03em; }
.career { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; border-top: 1px solid var(--line); padding-top: 18px; font-size: var(--fs-s); color: var(--ink-2); }
.career li { display: flex; gap: 10px; line-height: 1.6; }
.career li .tick { width: 16px; height: 16px; margin-top: 3px; }
.career .m-more-row { display: none; }
/* 사업 영역 — 자세한 목록은 작게 */
.biz-desc p + p { margin-top: 8px; }
.biz-pts { margin-top: 12px; display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--slate); }
.biz-pts li { position: relative; padding-left: 12px; }
.biz-pts li::before { content: ""; position: absolute; left: 0; top: .75em; width: 4px; height: 4px; border-radius: 50%; background: var(--peri); }
/* 기관 협업 방식 — 사업 영역과 같은 줄 모양 */
#partnership .lede { margin-top: 12px; }
.partner { margin-top: 32px; }
.partner .biz-row { padding: 24px 0; }
.partner .biz-side b { font-weight: 650; color: var(--ink-2); margin-right: 4px; }
.partner-note { margin-top: 18px; }
/* 문의 — 회사 연락처 한 줄 */
.ask-org .lede + .lede { margin-top: 10px; font-size: var(--fs-s); }
.ask-org .reach { margin-top: 18px; font-size: var(--fs-s); line-height: 1.7; color: var(--slate); }
.ask-org .reach a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.path-head { position: sticky; top: 112px; }
@media (max-width: 860px) {
    .path-head { position: static; }
    .fdr .nums { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; }
    .fdr .nums div { gap: 8px; }
    .fdr .nums strong { min-width: 0; }
    .fdr-body { margin-top: 4px; }
    .career { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .fdr-body .bio.lead { font-size: var(--fs-m); line-height: 1.8; }
    .fdr-body .sub-title { margin-top: 28px; }
    .career .m-more-row { display: block; }
    .partner .biz-row { padding: 22px; }
    .partner-note { display: none; }
}