/* 소개 — 홈(.impact)의 문법을 그대로 쓴다.
   전체 폭 사진 · 세 겹 그늘 · Playfair 이름표 · Noto 900 제목 · 윤곽선 글자 한 줄 · 아래 줄(설명 + 링크).
   홈과 다른 점은 둘뿐이다. 인물이 오른쪽에 있어 제목을 오른쪽으로 계단처럼 밀지 않고,
   스크롤 연출이 없어 높이를 100svh 대신 조금 낮게 둔다. 2026-09-18 */

body.brand-page.brand-about .home { padding-bottom:0; }
.brand-about .brand-breadcrumb { padding-block:20px; }
.brand-about main:focus { outline:none; }

/* ── 머리 (홈 .impact 와 같은 값) ── */
/* ⚠️ 글자를 top:%/bottom:% 로 띄우지 않는다. 화면이 낮으면 제목이 아래 글과 겹친다(2026-09-19 실제로 그랬다).
   세로 flex + min-height 로 두면 겹칠 수가 없다 */
.about-hero { position:relative; min-height:clamp(500px,64svh,660px); overflow:hidden; background:#090b09; color:#f1f0e8; display:flex; flex-direction:column; justify-content:center; padding:clamp(64px,8vh,96px) var(--edge); }
/* 전체 폭 사진. 오른쪽 절반만 두면 경계가 세로줄처럼 보인다(2026-09-19 은아님).
   세로 자리를 28% 로 올려 머리가 잘리지 않게 한다 — 가운데로 두면 위가 잘렸다 */
.about-hero__art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 28%; }
.about-hero__shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,11,9,.86),rgba(9,11,9,.52) 52%,rgba(9,11,9,.18) 100%),linear-gradient(180deg,rgba(9,11,9,.62),transparent 22%),linear-gradient(0deg,rgba(9,11,9,.9),transparent 40%); }
/* 참고 시안처럼 「칩 + 옆줄」. 칩은 브랜드 앰버, 글자는 잉크 */
.about-hero__eyebrow { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 26px; font-size:13px; color:#e8eadf; }
.about-hero__eyebrow b { background:#efbc70; color:#11120f; padding:6px 11px; font-family:'Playfair Display','Noto Sans KR',Georgia,serif; font-size:11px; font-weight:700; letter-spacing:.12em; }
.about-hero__eyebrow span { font-family:'Noto Sans KR',sans-serif; letter-spacing:.03em; font-size:13px; color:#f1f0e8; text-shadow:0 1px 2px rgba(9,11,9,.9), 0 2px 14px rgba(9,11,9,.85); }
.about-hero__title { position:relative; margin:0; font-family:'Noto Sans KR',sans-serif; font-size:clamp(42px,5.6vw,80px); line-height:1.34; letter-spacing:-.045em; font-weight:900; text-shadow:0 1px 1px rgba(9,11,9,.55), 0 3px 10px rgba(9,11,9,.5); }
.about-hero__title > span { display:block; }
/* 참고 시안의 형광 하이라이트. 홈은 윤곽선을 쓰지만 이 페이지의 바탕은 사진이라 윤곽선이 얇게 묻힌다 */
.about-hero__title > .about-hero__mark { display:inline-block; margin-left:9%; color:#11120f; background:#efbc70; padding:0 .1em .04em; text-shadow:none; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
/* 아래 줄은 왼쪽 글자 칸 안에만 둔다. 오른쪽은 인물이라 단추가 얼굴 위에 뜨면 안 된다 */
.about-hero__bottom { position:relative; margin-top:32px; width:min(430px,42%); }
.about-hero__bottom p { margin:0; font-size:15px; font-weight:500; line-height:1.75; color:#ebeadf; text-shadow:0 1px 2px rgba(9,11,9,.9), 0 2px 18px rgba(9,11,9,.95); }
.about-hero__scroll { margin-top:18px; display:inline-flex; align-items:center; gap:16px; color:#f1f0e8; font-size:13px; min-height:48px; padding:10px 18px; border-radius:30px; background:rgba(9,11,9,.62); border:1px solid rgba(241,240,232,.18); text-decoration:none; white-space:nowrap; }
.about-hero__scroll span { font-size:24px; line-height:1; }
.about-hero a:focus-visible { outline:3px solid #efbc70; outline-offset:6px; }

/* ── 분야 띠 ── */
.about-topics { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #393a32; margin-bottom:90px; }
.about-topics a { display:flex; justify-content:space-between; gap:15px; color:#eae7dd; text-decoration:none; padding:26px 22px; font-size:15px; }
.about-topics a:first-child { padding-left:0; }
.about-topics a:last-child { padding-right:0; }
.about-topics a + a { border-left:1px solid #393a32; }
.about-topics span { font-family:'Playfair Display',serif; color:#efbc70; font-size:12px; }
.about-topics a:hover { color:#efbc70; }

/* ── 섹션 머리 (홈 .edition-kicker · .edition-headingrow 와 같은 값) ── */
.about-kicker { display:flex; gap:24px; align-items:center; margin:0 0 30px; font-size:13px; font-weight:500; color:#b4b3a5; }
.about-kicker > span { font-family:'Playfair Display','Noto Sans KR',Georgia,serif; font-size:12px; letter-spacing:.1em; }
.about-section-label h2 { font-size:clamp(28px,2.7vw,42px); line-height:1.4; letter-spacing:-.05em; margin:0; font-weight:500; }
.about-section-label h2 > span,html body.brand-page.brand-about #path .home-section__title > span { color:#929889; }

body.brand-page.brand-about .about-introduction { display:grid; grid-template-columns:1fr 1.2fr; gap:6vw; margin-bottom:90px; }
html body.brand-page.brand-about .about-profile { max-width:none; margin:0; padding:0; background:none; border:0; border-radius:0; }
body.brand-page.brand-about .about-statement { text-align:left; max-width:none; margin:0; }
body.brand-page.brand-about .about-statement p { color:#d6d7cb; font-size:17px; line-height:1.95; margin-bottom:28px; }
body.brand-page.brand-about .about-statement__line { opacity:1; transform:none; animation:none; }

/* 사실 띠 — 원고가 말하지 않는 「무엇을 가르치나 · 누구를 만나나」를 한눈에. 값은 이미 공개된 화면에서 가져온다 */
.about-facts { grid-column:1 / -1; margin:58px 0 0; display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid #393a32; }
.about-facts > div { padding:28px 34px 4px 0; }
.about-facts > div + div { border-left:1px solid #393a32; padding-left:34px; }
.about-facts dt { font-family:'Playfair Display','Noto Sans KR',Georgia,serif; font-size:12px; letter-spacing:.1em; color:#b4b3a5; margin-bottom:14px; }
.about-facts dd { margin:0; font-size:16px; line-height:1.85; color:#eae7dd; }

/* ── 걸어온 길 ── */
body.brand-page.brand-about #path { padding-block:45px 55px; border-top:1px solid #393a32; margin-bottom:0; }
html body.brand-page.brand-about #path .home-section__title { font-size:clamp(28px,2.7vw,42px); line-height:1.4; letter-spacing:-.05em; font-weight:500; margin:0; }
/* 제목 왼쪽 · 문단 오른쪽 (홈 .edition-headingrow). 문단이 컨테이너 끝까지 닿게 한다 */
.about-headingrow { display:flex; justify-content:space-between; align-items:flex-end; gap:45px; }
html body.brand-page.brand-about .about-headingrow .home-section__title { flex:0 0 auto; }
body.brand-page.brand-about #path .home-section__desc { flex:1 1 auto; max-width:540px; margin:0 0 4px; font-size:16px; line-height:1.9; }
body.brand-page.brand-about .about-extra { text-align:left; margin-top:20px; }
body.brand-page.brand-about .about-extra a { color:#efbc70; text-underline-offset:6px; }

/* ── 마무리 ── */
/* 홈의 주황 구역(.edition-contact)과 같다 — main 의 바로 밑에 두어 화면 끝까지 차고, 안쪽만 --edge 로 들여쓴다 */
.about-closing { background:#d78b52; color:#11120f; padding:65px var(--edge) 70px; }
html body.brand-page.brand-about .about-closing .about-quote { color:#11120f; font-size:clamp(25px,2.8vw,43px); font-weight:500; line-height:1.55; letter-spacing:-.04em; }
html body.brand-page.brand-about .about-closing .home-closing__name { color:#292b23; margin-top:24px; }
.about-contact-link { display:inline-flex; justify-content:space-between; gap:50px; color:#11120f; font-size:15px; margin-top:24px; padding-block:12px; border-bottom:1px solid #44432f; text-decoration:none; }
body.brand-page.brand-about #galleryPreview { padding-top:65px; }
body.brand-page.brand-about .about-closing a:focus-visible { outline-color:#11120f; }

@media(max-width:1000px) {
 .about-hero__title { font-size:7.4vw; }
 .about-hero__eyebrow span { display:block; margin:0; }
}
/* 860px 아래는 사진과 글을 나눈다. 태블릿 세로(768)도 여기 들어온다 —
   인물 사진은 폭이 좁아질수록 크게 잘려서 제목이 얼굴에 겹친다 */
@media(max-width:860px) {
 /* 좁은 화면에서는 글과 사진을 위아래로 나눈다.
    홈은 모바일에서도 사진 위에 글을 얹지만(조형 사진이라 된다) 인물 사진은 제목이 얼굴 위에 놓인다.
    사진을 흐리게 해서 읽히게 하면 정작 사람이 안 보인다. 글은 잉크 바탕에서 15:1 로 읽고 사진은 사진대로 본다.
    ⚠️ position:static 으로 두면 안 된다 — 절대 배치된 사진·그늘이 위에 깔려 글자가 통째로 사라진다(2026-09-18 실제로 그랬다) */
 .about-hero { height:auto; min-height:0; justify-content:flex-start; padding:0; background:transparent; }
 .about-hero__shade { display:none; }

 .about-hero__eyebrow { order:0; margin:0; padding:30px var(--edge) 0; gap:8px; font-size:12px; text-shadow:none; }
 .about-hero__eyebrow span { font-size:12px; }
 .about-hero__title { order:1; padding:24px var(--edge) 0; font-size:clamp(34px,9.4vw,54px); line-height:1.45; text-shadow:none; }
 .about-hero__title > .about-hero__mark { margin-left:0; }
 .about-hero__bottom { order:2; display:block; width:auto; margin:0; padding:26px var(--edge) 30px; }
 .about-hero__bottom p { text-shadow:none; }
 .about-hero__scroll { margin-top:20px; background:transparent; }
 .about-hero__art { order:3; position:relative; inset:auto; width:100%; height:400px; object-position:58% 12%; }
 .about-topics { grid-template-columns:1fr; margin-bottom:50px; }
 .about-topics a,.about-topics a:first-child,.about-topics a:last-child { padding:18px 0; }
 .about-topics a + a { border-left:0; border-top:1px solid #393a32; }
 body.brand-page.brand-about .about-introduction { grid-template-columns:1fr; gap:30px; margin-bottom:45px; }
 .about-section-label h2 { font-size:29px; }
 .about-facts { grid-template-columns:1fr; margin-top:36px; }
 .about-facts > div { padding:22px 0 4px; }
 .about-facts > div + div { border-left:0; border-top:1px solid #393a32; padding-left:0; }
 .about-headingrow { display:block; }
 body.brand-page.brand-about #path .home-section__desc { max-width:none; margin-top:20px; }
 .about-closing { padding-block:45px 50px; }
}