@charset "utf-8";
/* ============================================================
   MEGA X 2026 — 서브페이지 추가분
   ------------------------------------------------------------
   토큰 · 헤더 · 전체메뉴 · 퀵바 · 푸터 · 상담바 · 섹션 공통은
   megax-main.css(V132 원본)에 이미 들어 있다. 여기에는 서브페이지에서만
   쓰는 것만 둔다. 로드 순서는 megax-main.css -> megax2026.css.
   ============================================================ */

/* 헤더 높이를 다른 곳에서 계산에 쓰기 위한 변수 */
:root{--head-h:76px}

/* ============================================================
   버튼 .btn 계열
   ------------------------------------------------------------
   V132 원본에는 .btn 규칙이 없다. 시안이 버튼마다 따로 클래스를 쓴 탓이다.
   그래서 index.php 의 '패키지 자세히 보기' 는 지금 배경도 높이도 없이
   그냥 글자로만 보인다(실측 높이 19px · 배경 투명). 여기서 한 번 정의해
   메인과 게시판 스킨이 같은 버튼을 쓰게 한다.
   크기·색은 시안의 .p3-btn(군청 52px)과 .loc-btns(선버튼 48px)을 따랐다.
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-width:190px;height:52px;padding:0 26px;
  font-size:15.5px;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;transition:background .2s ease,border-color .2s ease,color .2s ease}
.btn-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-soft);border-color:var(--navy-soft);color:#fff}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#1B1305}
.btn-gold:hover{background:var(--gold-l);border-color:var(--gold-l)}
.btn-line{background:transparent;border-color:var(--line);color:#5D6579}
.btn-line:hover{border-color:var(--navy);color:var(--navy)}
@media (max-width:760px){
  .btn{min-width:0;height:50px;padding:0 20px;font-size:15px}
}

/* ============================================================
   스크롤 등장이 본문을 지워 버리지 않게 하는 안전장치
   ------------------------------------------------------------
   megax-main.css 의 [data-rv]{opacity:0} 은 자바스크립트가 .in 을 붙여 주기를
   전제로 한다. 그래서 스크립트가 늦게 오거나 실행되지 않으면 본문 전체가
   빈 화면으로 보인다. 실제로 그 화면을 겪었다.
   megax2026.js 가 실행되면 html 에 mx-js 가 붙는다. 그 클래스가 없는 동안에는
   아무것도 숨기지 않는다. 선택자 무게가 [data-rv] 와 [data-rv].in 보다 크므로
   !important 없이 이긴다.
   ============================================================ */
html:not(.mx-js) [data-rv]{opacity:1;transform:none;transition:none}

/* ============================================================
   수정요청서(20260728) 1 — 하단 상담바 20% 확대
   ------------------------------------------------------------
   바 높이는 본문 하단 여백과 히어로 롤링의 아래 여백에도 같은 값이 들어간다.
   세 곳에 숫자를 흩어 두면 다음에 또 어긋나므로 변수 하나로 묶는다.
   84px -> 101px (x1.2), 입력칸·버튼 48 -> 58, 글자 16/13 -> 19/15.5
   ============================================================ */
:root{--sb-h:101px}

#stickybar .wrap{height:var(--sb-h)}
#stickybar .sb-txt b{font-size:19px}
#stickybar .sb-txt span{font-size:15.5px}
#stickybar input{height:58px;padding:0 19px;font-size:18px}
#stickybar button{height:58px;font-size:19px}

/* 본문 끝이 상담바에 가리지 않게 비워 두는 자리.
   바 높이(101px) + 위 테두리(1px) 와 정확히 같아야 한다.
   여유를 더 주면 그만큼이 푸터 아래에 흰 띠로 드러난다.
   (여유 12px 을 줬을 때 실제로 푸터 아래 흰 12줄이 보였다) */
body{padding-bottom:calc(var(--sb-h) + 1px)}

/* 히어로 롤링 카드의 아래 여백도 상담바 높이를 따라간다.
   원본은 calc(6% + 84px) 였는데, 카드가 커진 만큼(아래 크롭 수정) 6% 를 2.2% 로 줄였다. */
.hero-team{padding-bottom:calc(2.2% + var(--sb-h))}
.hero-inner{padding-top:clamp(112px,12.5vh,158px)}

/* 원본은 #hero 에 min-height:900px 이 걸려 있어 화면이 900 보다 낮으면
   히어로가 화면 밖으로 넘치고, 그러면 카드 아랫부분이 고정된 상담바 뒤로 들어갔다.
   (1366x768 에서 이전 설계도 52px 가려졌고, 바를 20% 키우면 103px 로 늘어난다.)
   히어로가 화면 높이를 넘지 않게 잡아 두면 margin-top:auto 가 정상 동작해
   카드가 항상 상담바 위에 놓인다.
   1024 이하는 원본이 height:auto / min-height:0 으로 내려 쌓는 구조이므로
   이 규칙을 걸면 안 된다. 그래서 min-width:1025px 안에만 둔다.

   아래 두 단계는 화면이 낮을 때 카피 여백을 줄여 카드 자리를 확보한다.
   실측 결과(카드가 상담바에 가려진 양 / 사진 아래 여유):
     1920x1080 0/31   1920x900 0/31   1680x1050 0/27
     1600x900  0/26   1440x900 0/23   1366x768  0/26   1280x800 0/25 */
@media (min-width:1025px){
  #hero{min-height:min(900px,100vh)}
}
@media (min-width:1025px) and (max-height:980px){
  .hero-inner{padding-top:86px;padding-bottom:26px}
  .hero-sub{margin-top:24px}
  .hero-tf{margin-top:10px}
}
@media (min-width:1025px) and (max-height:850px){
  .hero-inner{padding-top:52px;padding-bottom:14px}
  .hero-copy h1{font-size:clamp(32px,3.3vw,46px)}
  .hero-sub{margin-top:16px;font-size:15.5px}
  .hero-tf{margin-top:8px;font-size:14.5px}
}

/* ============================================================
   히어로 썸네일 — 사진칸을 사진 원본 비율에 맞춘다
   ------------------------------------------------------------
   V132 는 사진칸이 정사각형(1/1)이라 세로로 긴 사진의 아래가 잘렸다.
   V9 에서 3/4 로 세워 잘림을 줄였지만, 그때는 원본이 550x650 한 종류라고
   본 것이 잘못이었다. 실제로는 430x600 · 486x600 · 550x650 · 702x770 네 가지가
   섞여 있어서 사람마다 잘리는 위치가 달랐다.

   사진 17장을 550x650 한 규격으로 다시 맞춰 올렸다(같은 압축의 data/file/members).
   그래서 칸도 550:650 과 같은 11/13 으로 둔다. 가로 100% 로 넣으면
   세로가 칸 높이와 정확히 같아져 잘리는 부분이 없다.
     1920 화면 기준 : 칸 240 x 284, 사진 240 x 284  (잘림 0)

   아래 페이드는 사진 바닥이 카드 경계에 딱 닿는 것을 부드럽게 하려고 남긴다.
   ============================================================ */
.ht-photo{aspect-ratio:11/13}
.ht-photo img{
  -webkit-mask-image:linear-gradient(#000 calc(100% - 18px),transparent);
  mask-image:linear-gradient(#000 calc(100% - 18px),transparent)}

/* ------------------------------------------------------------
   마우스를 올리면 카드가 5px 위로 뜨는데(.ht-card:hover),
   카드를 담은 .ht-clip 에 overflow:hidden 이 걸려 있어 뜬 만큼이 잘렸다.
   그래서 금색 테두리의 위쪽 선만 사라져 보였다.

   가로 잘라내기(좌우 롤링)는 그대로 두어야 하므로 overflow 를 풀 수는 없다.
   대신 클립 상자를 위로 8px 넓히고(padding-top) 같은 값만큼 끌어올려서
   (margin-top:-8px) 차지하는 높이와 보이는 위치는 그대로 두고,
   위쪽 여유 8px 안에서 카드가 5px 뜨도록 한다. 3px 여유가 남는다.

   .ht-wrap 의 display:flow-root 는 함께 있어야 한다. 이것이 없으면
   자식의 위쪽 여백(-8px)이 부모로 흘러나가(마진 상쇄) .ht-wrap 자체가
   8px 올라가고, 그 안에 top:50% 로 붙어 있는 좌우 화살표가 4px 어긋난다.
   flow-root 로 여백을 안쪽에 가두면 화살표 위치가 그대로 유지된다.

   실측(1920 화면, 세 번째 카드) :
     적용 전  호버 시 카드 상단이 클립 밖으로 5.0px → 금색 위쪽 선 잘림
     적용 후  호버 시 잘림 0.0px, .ht-wrap 상단·높이·화살표 중심 모두 변동 없음
   ------------------------------------------------------------ */
.ht-wrap{display:flow-root}
.ht-clip{padding-top:8px;margin-top:-8px}

/* ============================================================
   담당 변호사 칩 — megaxlaw.com 성공사례와 같은 사진+이름 표기
   성공사례·고객후기의 목록 카드와 상세에서 함께 쓴다.
   사진은 550x650 누끼라 원형으로 자를 때 머리가 오도록 위쪽 20% 기준.
   ============================================================ */
/* 한 줄에 2명씩 최대 2줄(2x2) — 5명 이상이면 3명 + '+N' (2026-08-16 지시) */
.mx-laws{display:inline-flex;align-items:flex-start;gap:10px;min-width:0;max-width:100%}
/* '담당' 라벨은 첫 줄 칩과 같은 높이로 맞춘다 (2줄이 되어도 위로 정렬) */
.mx-laws>u{flex:0 0 auto;text-decoration:none;font-size:12.5px;font-weight:700;color:#8A91A1;line-height:28px}
.mx-law-grid{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));
  gap:6px 8px;min-width:0}
.mx-law{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 3px;
  border-radius:999px;background:#F4F6FA;border:1px solid #E7EBF2;
  font-size:13px;font-weight:700;color:#3F4759;white-space:nowrap}
.mx-law img{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 18%;
  background:#E8ECF4;border:1px solid var(--line);flex:0 0 22px}
.mx-law.is-more{padding:0 11px;background:#EEF1F7;color:#5D6579;cursor:default}

/* 상세 페이지 상단 '담당 변호사' 섹션 — megaxlaw.com 성공사례 상세와 같은 구성.
   세로 사진 카드(이름·직함)가 구성원 상세로 링크된다. 성공사례·고객후기 공용.
   위치가 페이지 상단(사건정보 표 아래)이라 구분선 없이 여백만 둔다.
   (하단에 있던 V20 은 구분선이 있었으나, 상단에서는 사건정보 표의
    아래 선과 이중선이 되어 뺐다) */
.mx-lawsec{margin-top:44px}
.mx-lawsec-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:18px}
.mx-lawsec-h h2{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.mx-lawsec-h .mx-all{font-size:13.5px;font-weight:700;color:#8A91A1;text-decoration:none;white-space:nowrap}
.mx-lawsec-h .mx-all:hover{color:var(--navy)}
.mx-lawcards{display:flex;flex-wrap:wrap;gap:14px}
.mx-lawcard{display:flex;flex-direction:column;width:138px;text-decoration:none;
  border:1px solid var(--line);background:#fff;transition:.2s ease}
a.mx-lawcard:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 10px 24px rgba(11,20,40,.10)}
.mx-lawcard .ph{display:block;aspect-ratio:11/13;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0,#E8EDF6 0%,#D6DEEC 100%)}
.mx-lawcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.mx-lawcard b{padding:10px 12px 2px;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.mx-lawcard i{padding:0 12px 12px;font-style:normal;font-size:12px;font-weight:700;color:#8A91A1}
.mx-lawcard.is-plain b{padding-bottom:12px}
@media (max-width:760px){
  .mx-lawcards{gap:10px}
  .mx-lawcard{width:calc((100% - 20px)/3)}
}

/* 등록 화면의 담당 변호사 선택 — 여러 명을 함께 고르는 체크칩 */
.sw-laws{display:flex;flex-wrap:wrap;gap:8px}
.sw-laws label{display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 10px;
  border:1px solid var(--line);background:#fff;font-size:14px;font-weight:600;color:#3F4759;cursor:pointer}
.sw-laws label.on{border-color:var(--navy);background:#F2F5FB;color:var(--navy);font-weight:700}
.sw-laws input{accent-color:var(--navy);margin:0}
.sw-laws img{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:50% 18%;background:#E8ECF4}
.sw-laws em{font-style:normal;font-size:12px;font-weight:600;color:#8A91A1;margin-left:2px}

/* ---------- 하단 상담바 : 문자 발송 연동 (V27) ---------- */
/* 허니팟 — 화면 밖으로. display:none 은 단순한 봇도 안 채우므로 offscreen 방식 */
.sb-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* 개인정보 동의 — 바 안에서 한 줄로 붙는 작은 체크 */
#stickybar .sb-agree{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:#C7D0E2;white-space:nowrap;cursor:pointer}
#stickybar .sb-agree input{flex:0 0 auto;width:17px;height:17px;padding:0;
  accent-color:var(--gold);background:none;border:0}
#stickybar .sb-agree span{line-height:1.3}
@media (max-width:1024px){
  /* 좁은 화면에서 동의 문구까지 한 줄에 들어가도록 입력칸을 살짝 줄인다 */
  #stickybar input{flex-basis:20%}
  #stickybar .sb-agree{font-size:12px}
}
@media (max-width:760px){
  #stickybar .sb-agree{flex:1 1 100%;order:3;justify-content:center;font-size:12px;padding-bottom:2px}
  #stickybar .sb-agree input{width:15px;height:15px}
  /* body padding-bottom 은 아래 모바일 상담바 블록에서 170px 로 함께 관리한다 */
}

/* ---------- 메인 인증서·표창장 흐르는 띠 (V32) ----------
   megaxlaw.com 수상 구간과 같은 방식. 4칸 그리드(.cert-grid)를 대신한다.
   자문사 띠(.adv-marquee)와 같은 동작: -50% 까지 밀고 처음으로,
   양끝 페이드, 마우스를 올리면 멈춤(눌러서 상세로 갈 수 있게). */
.cert-marquee{margin-top:50px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cert-track{display:flex;gap:20px;width:max-content;animation:mxCertRoll 60s linear infinite}
.cert-marquee:hover .cert-track{animation-play-state:paused}
@keyframes mxCertRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cert-track .cert{flex:0 0 auto;width:280px;text-decoration:none;transition:border-color .2s ease}
.cert-track .cert:hover{border-color:rgba(200,164,92,.6)}
@media (prefers-reduced-motion:reduce){
  .cert-track{animation:none}
}
@media (max-width:760px){
  .cert-marquee{margin-top:34px}
  .cert-track{gap:12px;animation-duration:44s}
  .cert-track .cert{width:210px;padding:12px}
  .cert-track .ct-img{height:220px}
}

/* ---------- 자문기업 띠의 로고 카드 (V34) ----------
   partner 게시판에서 로고 썸네일을 올린 기관은 텍스트 대신 로고로 나온다.
   카드 크기(230x96)는 기존 텍스트 카드(.adv)와 같아 섞여도 줄이 맞는다. */
.adv{text-decoration:none}
a.adv:hover{border-color:var(--gold);color:var(--navy)}
.adv.has-logo{padding:10px 18px}
.adv.has-logo img{max-width:100%;max-height:100%;object-fit:contain}

/* 메인 성공사례·후기 슬라이더 — 글이 없는 분야의 준비중 안내 */
.p3-none{flex:0 0 100%;display:flex;align-items:center;justify-content:center;
  min-height:220px;border:1px dashed var(--line);background:#F8F9FB;
  font-size:15px;font-weight:600;color:#8A91A1}

/* 서브페이지는 히어로가 없으므로 헤더가 처음부터 흰 배경이다 */
#head.is-sub{background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom-color:var(--line)}

/* ---------- 서브 히어로 ---------- */
.mx-subhero{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden;
  padding:calc(var(--head-h) + 96px) 0 92px}
.mx-subhero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 76% 26%,#2B3F6B 0%,#1A2B4D 36%,#0E1A33 64%,#070D1A 100%)}
.mx-subhero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,13,26,.72) 0%,rgba(7,13,26,.28) 52%,rgba(7,13,26,0) 100%)}
.mx-subhero .wrap{position:relative;z-index:2}
.mx-subhero .sh-eyebrow{display:block;font-size:13px;font-weight:800;letter-spacing:.24em;color:var(--gold)}
.mx-subhero h1{margin-top:18px;font-family:"Noto Serif KR",serif;font-size:clamp(34px,4.4vw,58px);
  font-weight:300;letter-spacing:.05em;line-height:1.25}
.mx-subhero .sh-lead{margin-top:22px;max-width:760px;font-size:16.5px;line-height:1.95;color:#BCC6DB}

/* 사진 배경을 쓰는 서브 히어로.
   .mx-subhero 에 --mx-hero-img 를 인라인으로 주면 ::before 가 사진으로 바뀐다.
   ::after 는 글자가 얹히는 좌측을 진하게 눌러 가독성을 지키는 베일이다. */
.mx-subhero.has-photo::before{
  background:var(--mx-hero-img) center/cover no-repeat;
  background-position:var(--mx-hero-pos,center)}
.mx-subhero.has-photo::after{
  background:linear-gradient(90deg,rgba(6,12,26,.88) 0%,rgba(6,12,26,.76) 34%,rgba(6,12,26,.40) 66%,rgba(6,12,26,.26) 100%)}

/* ---------- 브레드크럼 ---------- */
.mx-crumb{display:flex;align-items:center;gap:10px;margin-top:30px;font-size:13px;color:#93A2C0}
.mx-crumb a{color:#93A2C0}
.mx-crumb a:hover{color:var(--gold-l)}
.mx-crumb i{font-style:normal;opacity:.5}
.mx-crumb strong{font-weight:700;color:#fff}

/* ============================================================
   메인 — 시안에서 자리표시자였던 칸에 실제 사진이 들어갈 때의 규칙
   ------------------------------------------------------------
   V132 시안은 인증서·언론·유튜브·자필후기가 전부 빈 칸(data-ph)이라
   img 에 대한 규칙이 없다. 게시판 사진이 들어가면 넘치므로 여기서 잡는다.
   ============================================================ */

/* 인증서 — 스캔본은 비율이 제각각이라 잘리지 않게 담는다 */
.cert{display:block}
.cert .ct-img{overflow:hidden}
.cert .ct-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  display:block;transition:transform .3s ease}
.cert:hover .ct-img img{transform:scale(1.04)}
.cert .ct-cap{transition:color .2s ease}
.cert:hover .ct-cap{color:var(--gold-l)}

/* 언론보도 썸네일 */
.press .pz-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.press:hover .pz-thumb img{transform:scale(1.05)}

/* 유튜브 썸네일 — 유튜브가 주는 hqdefault 는 4:3 이라 위아래를 잘라 16:9 로 맞춘다 */
.yt .y-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.yt .y-thumb .y-play{position:relative;z-index:2}

/* 자필후기 스캔 */
.p3-card .rv-scan{overflow:hidden}
.p3-card .rv-scan img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* 성공사례·자필후기 카드는 상세로 이어지는 링크다 */
a.p3-card{text-decoration:none;color:inherit}

/* ── 변호사 소개 좌측 프로필 스택 ──
   V132 시안은 .lw-item 을 absolute 로 겹쳐 놓고 .lw-info 의 min-height(284px)로
   자리를 잡았다. 시안 문구는 길이가 고정이라 문제가 없었지만, 게시판에서 읽어오는
   경력요약은 한 줄이 두 줄로 접힐 수 있어 가장 긴 항목이 아래 '담당 성공사례'를
   덮는다(간격 13px). 그래서 겹침을 grid 한 칸으로 바꿔, 칸 높이가 항상 가장 긴
   항목을 따라가게 한다. 크로스페이드(opacity)와 시안 여백은 그대로 유지된다. */
.lw-info{display:grid;grid-template-columns:1fr}
.lw-item{position:relative;grid-area:1 / 1 / 2 / 2;left:auto;top:auto;right:auto}

@media (max-width:1024px){
  .mx-subhero{padding:calc(var(--head-h) + 72px) 0 68px}
  /* 1024 이하는 히어로가 height:auto 라 아래 여백이 필요 없다(원본과 동일) */
  .hero-team{padding-bottom:0}
  .hero-inner{padding-top:150px}
}
@media (max-width:760px){
  :root{--head-h:66px}
  .mx-subhero{padding:calc(var(--head-h) + 54px) 0 52px}
  .hero-inner{padding-top:120px}

  /* 상담바 모바일도 같은 비율(x1.2)로 키운다.
     megax-main.css 의 모바일 값이 이 파일보다 먼저 로드되므로 여기서 다시 잡는다. */
  #stickybar .wrap{height:auto;gap:12px;padding:14px 19px}
  #stickybar .sb-txt b{font-size:17px}
  #stickybar .sb-txt span{font-size:14px}
  #stickybar input{height:58px;padding:0 14px;font-size:17px}
  #stickybar button{flex:0 0 101px;height:58px;font-size:17px;padding:0}
  /* 모바일 바는 높이가 auto 다. 예전 두 줄(문구 + 입력) 실측 142px.
     V27 에서 개인정보 동의 줄이 하나 늘어 세 줄이 되었다.
     동의 줄 높이 = 12px 글자(줄높이 1.3 ≈ 16px) + 줄 간격 gap 10px + 아래 padding 2px ≈ 28px.
     142 + 28 = 170. 여유를 주면 푸터 아래 흰 띠가 생기므로 계산값 그대로 둔다. */
  body{padding-bottom:170px}
}