/* 구성원(people.html) — 메인 '공앤유 소개·구성원'의 사진 톤(원래 색, 4:5, 같은 배경)을 크게 이어 쓴다.
   카드: 공앤유 PPT 8쪽(사진 + 이름 · 직함·전문분야 · 메일 · 전화, 사진의 + 로 이력). 이력은 오른쪽 패널(.pp-dlg). */

/* 구성원 격자 */
.pp-team{padding:0 0 clamp(88px,10.4vw,150px)}
.pp-gh{display:flex;justify-content:space-between;align-items:baseline;padding-top:26px;border-top:1px solid var(--line)}
.pp-gh h2{font-size:clamp(22px,1.9vw,27px);font-weight:700;color:var(--navy);letter-spacing:-.055em;line-height:1.3}
.pp-gh span{font-family:var(--sans);font-size:14px;color:var(--muted);letter-spacing:-.01em}
.pp-gh+.pp-grid,.pp-gh+.pp-cgrid{margin-top:34px}
.pp-grid+.pp-gh{margin-top:clamp(96px,10vw,148px)}
.pp-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:56px 24px}
.pp-ph{position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;background:#e3e1dc;overflow:hidden;cursor:pointer}
.pp-ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pp-ph:hover img{transform:scale(1.035)}
.pp-plus{position:absolute;right:0;bottom:0;width:44px;height:44px;display:grid;place-items:center;background:var(--navy);color:#fff;transition:background .25s,color .25s}
.pp-plus svg{width:14px;height:14px}
.pp-card:hover .pp-plus,.pp-ph:focus-visible .pp-plus{background:var(--gold);color:var(--navy)}
.pp-tx{margin-top:20px}
.pp-ti{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--gold-d);letter-spacing:-.01em}
.pp-card h3{margin-top:5px;font-size:clamp(21px,1.75vw,25px);font-weight:600;line-height:1.3;letter-spacing:-.05em;color:var(--navy)}
.pp-card h3 button{padding:0;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer;transition:color .2s}
.pp-card h3 button:hover{color:var(--gold-d)}
.pp-fd{margin-top:10px;font-size:15px;line-height:1.6;color:var(--body);min-height:3.2em}
.pp-ct{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:grid;grid-template-columns:32px 1fr;gap:5px 6px;font-family:var(--sans);font-size:13.5px;line-height:1.5;letter-spacing:-.005em}
.pp-ct dt{color:var(--muted)}
.pp-ct dd{color:var(--ink);min-width:0;overflow-wrap:anywhere}
.pp-ct a:hover{color:var(--gold-d)}
/* 협력 변호사: 같은 다섯 칸 격자의 앞 세 칸 + 남는 두 칸에 설명 */
.pp-cgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px}
.pp-cgrid .pp-grid{grid-column:1/4;grid-template-columns:subgrid}
.pp-cnote{grid-column:4/6;align-self:start;padding:22px 0 0 clamp(0px,2vw,24px);border-top:1px solid var(--line)}
.pp-cnote p{font-size:17px;line-height:1.85;color:var(--ink)}
.pp-cnote p+p{margin-top:12px;font-size:15px;color:var(--muted)}

/* 상담 — 공앤유 소개 페이지와 같은 금색 띠 */
.pp-call{background:var(--gold);color:var(--navy);padding:clamp(76px,7.6vw,110px) 0}
.pp-call .w{display:grid;grid-template-columns:1fr auto auto;align-items:end;gap:28px 64px}
.pp-tel{font-family:var(--lat);font-weight:700;font-size:clamp(40px,3.8vw,54px);line-height:1;letter-spacing:.01em}
.pp-btns{display:flex;gap:10px}

/* 이력 패널 */
.pp-dlg{position:fixed;inset:0;z-index:80}
.pp-dlg[hidden]{display:none}
.pp-scrim{position:absolute;inset:0;background:rgba(0,22,75,.56);opacity:0;transition:opacity .35s ease}
.pp-sheet{position:absolute;top:0;right:0;bottom:0;width:min(1000px,94vw);display:flex;flex-direction:column;background:var(--ivory);transform:translate3d(100%,0,0);transition:transform .42s var(--ease);outline:0}
.pp-dlg.open .pp-scrim{opacity:1}
.pp-dlg.open .pp-sheet{transform:none}
.pp-bar{flex:none;height:84px;display:flex;align-items:center;gap:24px;padding-left:64px;border-bottom:1px solid var(--line)}
.pp-pos{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--muted);letter-spacing:-.01em}
.pp-nav{margin-left:auto;display:flex;gap:30px}
.pp-nav button{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0;border:0;background:none;font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:-.03em;color:var(--navy);cursor:pointer;transition:gap .25s var(--ease),color .2s}
.pp-nav button svg{width:24px;height:10px}
.pp-nav button:hover{gap:18px;color:var(--gold-d)}
.pp-nav button[hidden]{display:none}
.pp-x{align-self:stretch;width:84px;flex:none;display:grid;place-items:center;border:0;background:var(--navy);color:#fff;cursor:pointer;transition:background .25s}
.pp-x svg{width:20px;height:20px}
.pp-x:hover{background:#0b2160}
.pp-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain}
.pp-pf{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-areas:"ph meta" "ph body";gap:0 56px;padding:56px 64px 96px}
.pp-pf[hidden]{display:none}
.pp-pp{grid-area:ph;align-self:start;position:sticky;top:48px;aspect-ratio:4/5;background:#e3e1dc;overflow:hidden}
.pp-pp img{width:100%;height:100%;object-fit:cover}
.pp-pm{grid-area:meta}
.pp-pm h2{margin-top:8px;font-size:clamp(36px,3.4vw,48px);font-weight:600;line-height:1.15;letter-spacing:-.058em;color:var(--navy)}
.pp-en{margin-top:6px;font-family:var(--lat);font-size:22px;line-height:1.3;color:var(--muted);letter-spacing:.01em}
.pp-pc{margin-top:30px;display:grid;grid-template-columns:52px 1fr;gap:8px 12px;align-items:baseline}
.pp-pc dt{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--muted)}
.pp-pc dd{font-family:var(--lat);font-size:23px;line-height:1.3;color:var(--ink);letter-spacing:.01em}
.pp-pc a:hover{color:var(--gold-d)}
.pp-note{margin-top:12px;font-family:var(--sans);font-size:13.5px;color:var(--muted)}
.pp-pb{grid-area:body;margin-top:52px}
.pp-pb section+section{margin-top:44px}
.pp-pb h3{padding-bottom:14px;border-bottom:1px solid var(--navy);font-size:19px;font-weight:700;color:var(--navy);letter-spacing:-.05em}
.pp-areas li{display:grid;grid-template-columns:176px 1fr;gap:16px;padding:15px 0 14px;border-bottom:1px solid var(--line)}
.pp-areas b{font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:-.045em;line-height:1.6}
.pp-areas span{font-size:15.5px;line-height:1.7;color:var(--body)}
.pp-list li{padding:13px 0 12px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.65;color:var(--ink)}
.pp-yr li{display:grid;grid-template-columns:132px 1fr;gap:16px}
.pp-yr span{font-family:var(--sans);font-size:13.5px;color:var(--muted);padding-top:2px}
/* 사람을 바꿀 때 내용이 차례로 올라온다 */
@keyframes ppUp{from{opacity:0;transform:translateY(8px)}}
.js .pp-pf.enter>*{animation:ppUp .45s ease both}
.js .pp-pf.enter>.pp-pm{animation-delay:.06s}
.js .pp-pf.enter>.pp-pb{animation-delay:.14s}
@media (prefers-reduced-motion:reduce){.pp-sheet,.pp-scrim{transition:none}}

@media (max-width:1240px){
  .pp-grid{gap:48px 18px}
  .pp-cgrid{gap:0 18px}
  .pp-plus{width:38px;height:38px}
  .pp-ct{grid-template-columns:1fr;gap:0}
  .pp-ct dt{display:none}
}
@media (max-width:900px){
  .pp-team{padding-bottom:84px}
  .pp-gh{padding-top:20px}
  .pp-gh h2{font-size:22px}
  .pp-gh+.pp-grid,.pp-gh+.pp-cgrid{margin-top:6px}
  .pp-grid+.pp-gh,.pp-cgrid .pp-grid+.pp-gh{margin-top:72px}
  .pp-grid{grid-template-columns:1fr;gap:0}
  .pp-card{display:grid;grid-template-columns:116px minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
  .pp-card:last-child{border-bottom:0}
  .pp-plus{width:30px;height:30px}.pp-plus svg{width:11px;height:11px}
  .pp-tx{margin-top:2px;min-width:0}
  .pp-card h3{font-size:22px;margin-top:3px}
  .pp-fd{margin-top:6px;font-size:14.5px;line-height:1.55;min-height:0}
  .pp-ct{margin-top:10px;padding-top:0;border-top:0;grid-template-columns:30px 1fr;gap:1px 6px;font-size:13.5px}
  .pp-ct dt{display:block}
  .pp-cgrid{grid-template-columns:1fr}
  .pp-cgrid .pp-grid{grid-column:auto;grid-template-columns:1fr}
  .pp-cnote{grid-column:auto;margin-top:18px;padding:20px 0 0}
  .pp-cnote p{font-size:16px}
  .pp-call .w{grid-template-columns:1fr;gap:22px}
  .pp-tel{font-size:42px}
  .pp-btns{margin-top:8px}
  .pp-btns .btn{flex:1;justify-content:center;padding:0 12px}
  /* 패널: 화면 전체 */
  .pp-sheet{width:100%}
  .pp-bar{height:60px;padding-left:20px;gap:12px}
  .pp-nav{gap:18px}
  .pp-nav button{font-size:14.5px;gap:8px}
  .pp-nav button svg{width:20px}
  .pp-x{width:60px}
  .pp-x svg{width:18px;height:18px}
  .pp-pf{grid-template-columns:112px minmax(0,1fr);grid-template-areas:"ph meta" "body body";gap:0 20px;padding:28px 24px 64px}
  .pp-pp{position:static}
  .pp-pm h2{font-size:30px;margin-top:4px}
  .pp-en{font-size:17px;margin-top:2px}
  .pp-pc{margin-top:14px;grid-template-columns:30px 1fr;gap:2px 8px}
  .pp-pc dt{font-size:12.5px}
  .pp-pc dd{font-size:17px;overflow-wrap:anywhere}
  .pp-note{font-size:12.5px}
  .pp-pb{margin-top:36px}
  .pp-pb section+section{margin-top:36px}
  .pp-pb h3{font-size:18px;padding-bottom:12px}
  .pp-areas li{grid-template-columns:1fr;gap:2px;padding:13px 0 12px}
  .pp-areas b{font-size:16px}
  .pp-areas span{font-size:15px}
  .pp-list li{font-size:15.5px}
  .pp-yr li{grid-template-columns:100px 1fr;gap:10px}
}