@charset "utf-8";
/* ============================================================
   MEGA X 2026 — 구성원 스킨 (new-mx-staff)
   레이아웃 타입: 초기 제안 members.html (대표 풀와이드 / 파트너 2열 / 위원·고문 4열)
   색·타이포     : V132_VER01_Final (군청 #0F2350 · 골드 #C8A45C · Noto Serif KR)
   ============================================================ */

/* ---------- 섹션 ---------- */
.ms-sec{padding:104px 0}
.ms-sec.is-alt{background:#F8F9FB}
/* 위 여백을 접는 것은 배경이 같은 섹션끼리 붙을 때뿐이다.
   `.ms-sec + .ms-sec` 로 뭉뚱그리면 배경이 바뀌는 경계에서도 여백이 사라져
   태국 섹션처럼 제목이 위에 딱 붙는다. */
.ms-sec.is-alt + .ms-sec.is-alt{padding-top:0}
.ms-sec:not(.is-alt):not(.is-thai) + .ms-sec:not(.is-alt):not(.is-thai){padding-top:0}
/* 사진 배경 섹션은 위쪽에 스카이라인 띠가 오므로 여백을 더 준다 */
.ms-sec.is-thai{padding:136px 0 116px}
.ms-sec-head{margin-bottom:44px}
.ms-sec-head h2{font-family:"Noto Serif KR",serif;font-size:clamp(26px,3vw,40px);font-weight:400;
  color:var(--ink);letter-spacing:-.01em;line-height:1.35}
.ms-sec-head p{margin-top:16px;font-size:16px;line-height:1.85;color:var(--muted);max-width:820px}
.ms-sec-head .ms-hair{width:46px;height:2px;background:var(--gold);margin-top:22px}

/* ---------- 인물 카드 (대표 · 파트너 · 변호사) ---------- */
.ms-cards{display:grid;grid-template-columns:1fr 1fr;gap:26px}
/* align-items 는 기본값(stretch)을 유지한다. end 로 바꾸면 자식의 height:100% 기준이
   사라져 사진이 원본 크기로 렌더되고 카드가 통째로 늘어난다. */
.ms-card{position:relative;display:grid;grid-template-columns:1fr .92fr;
  min-height:342px;overflow:hidden;border-radius:16px;
  background:linear-gradient(105deg,#0B1428 0%,#14264A 52%,#1D3765 100%);
  box-shadow:0 14px 34px rgba(9,20,45,.22)}
.ms-card::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 88% 20%,rgba(43,63,107,.55) 0%,rgba(10,17,32,0) 62%);pointer-events:none}
.ms-card.is-lead{grid-column:1 / -1;grid-template-columns:1fr 1fr;min-height:420px;
  box-shadow:0 18px 44px rgba(9,20,45,.28)}

.ms-card-txt{position:relative;z-index:2;align-self:center;padding:40px 22px 40px 46px}
.ms-card.is-lead .ms-card-txt{padding:52px 30px 52px 60px}
.ms-role{display:block;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--gold-l)}
.ms-card.is-lead .ms-role{font-size:15px}
.ms-name{margin-top:12px;font-family:"Noto Serif KR",serif;font-size:38px;font-weight:300;
  letter-spacing:.14em;line-height:1.2;color:#F4F1EA}
.ms-card.is-lead .ms-name{font-size:clamp(38px,4vw,52px);letter-spacing:.16em}
.ms-en{display:block;margin-top:6px;font-size:11.5px;font-weight:700;letter-spacing:.2em;color:#8FA0BE;text-transform:uppercase}
.ms-cv{margin-top:22px;display:flex;flex-direction:column;gap:9px}
.ms-card.is-lead .ms-cv{margin-top:30px;gap:11px}
.ms-cv li{position:relative;padding-left:13px;font-size:14.5px;line-height:1.55;color:#D5DCEA}
.ms-card.is-lead .ms-cv li{font-size:16px}
.ms-cv li::before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.85}
.ms-more{margin-top:26px;display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;
  color:var(--gold-l);border-bottom:1px solid rgba(227,201,143,.5);padding-bottom:5px;transition:gap .2s ease}
.ms-card.is-lead .ms-more{margin-top:34px;font-size:14px}
.ms-more:hover{gap:15px;color:#fff;border-bottom-color:#fff}

/* 사진칸은 카드 높이에 맞춰 늘어나고, 인물은 그 안에서 축소되어 바닥에 정렬된다.
   img 를 absolute 로 빼는 이유: 흐름 안에 두면 이미지의 고유 비율이 행 높이를 결정해
   카드가 통째로 늘어난다(대표 카드 420 -> 728px 사례). absolute 는 높이 계산에서 빠진다.
   object-fit:contain + object-position:bottom 이라 어떤 비율의 누끼도 잘리지 않는다. */
.ms-card-ph{position:relative;overflow:hidden}
.ms-card-ph img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 16px 30px rgba(4,9,20,.5));
  -webkit-mask-image:linear-gradient(#000 calc(100% - 30px),transparent);
          mask-image:linear-gradient(#000 calc(100% - 30px),transparent)}
.ms-card-ph .ms-noph{padding:18px 14px 0;opacity:.75;filter:none}
/* 대표 카드는 인물이 화면의 주인공이므로 사진칸을 조금 더 넓게 쓴다 */
.ms-card.is-lead .ms-card-ph img{object-position:bottom right;padding-right:2%}

/* ---------- 소형 카드 (전문위원 · 고문 · 태국) : 사진 위 / 글 아래 ---------- */
.ms-minis{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ms-mini{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:14px;
  background:linear-gradient(180deg,#14264A 0%,#0B1428 100%);
  border:1px solid rgba(255,255,255,.10);box-shadow:0 12px 30px rgba(9,20,45,.20);
  transition:transform .24s ease,border-color .24s ease}
.ms-mini:hover{transform:translateY(-5px);border-color:rgba(200,164,92,.55)}
.ms-mini-ph{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;
  background:radial-gradient(120% 110% at 50% 22%,#26365C 0%,#101E3A 58%,#0A1122 100%)}
.ms-mini-ph img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:bottom center;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);
          mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
.ms-mini-body{display:block;border-top:1px solid rgba(255,255,255,.14);padding:16px 16px 18px;text-align:center}
.ms-mini-role{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--gold-l)}
.ms-mini-name{display:block;margin-top:7px;font-size:20px;font-weight:800;color:#fff;letter-spacing:.02em}
.ms-mini-en{display:block;margin-top:4px;font-size:10.5px;font-weight:700;letter-spacing:.16em;color:#8FA0BE;text-transform:uppercase}
.ms-mini-f{display:block;margin-top:9px;font-size:12.5px;line-height:1.55;color:#A9B6CE}
.ms-mini-more{display:block;margin-top:12px;font-size:12px;font-weight:700;color:var(--gold-l)}

/* ---------- 태국 사무소 (네이비 밴드 + 방콕 야경) ---------- */
.ms-sec.is-thai{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff}
/* 카드 4장이 섹션의 아래 58%를 덮는다. cover 로 깔면 스카이라인이 통째로 카드 뒤로
   숨어 배경이 없는 것과 같아진다. 그래서 스카이라인 띠만 잘라 화면 위쪽에 붙인다. */
.ms-sec.is-thai::before{content:"";position:absolute;inset:0;
  background:url(../../../img/thailand-band.jpg) center top/100% auto no-repeat}
/* 두 겹. 위: 띠 아래를 배경색으로 자연스럽게 녹인다.
   아래: 제목이 놓이는 왼쪽만 눌러 오른쪽 스카이라인은 그대로 보이게 한다. */
.ms-sec.is-thai::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,17,39,0) 0%,rgba(8,17,39,0) 34%,rgba(8,17,39,.55) 48%,var(--navy-deep) 60%),
    linear-gradient(90deg,rgba(6,12,26,.93) 0%,rgba(6,12,26,.78) 30%,rgba(6,12,26,.30) 60%,rgba(6,12,26,.08) 100%)}
.ms-sec.is-thai>.wrap{position:relative;z-index:2}
.ms-sec.is-thai .ms-sec-head h2{color:#fff}
.ms-sec.is-thai .ms-sec-head p{color:#9FABC4}
.ms-sec.is-thai .ms-eyebrow{display:block;font-size:13px;font-weight:800;letter-spacing:.24em;color:var(--gold)}
.ms-sec.is-thai .ms-sec-head h2{margin-top:16px}
.ms-sec.is-thai .ms-mini{background:linear-gradient(180deg,#1C2A4D 0%,#101B33 100%)}

/* ---------- 비어있을 때 ---------- */
.ms-empty{padding:70px 0;text-align:center;font-size:15px;color:var(--muted)}

/* ============================================================
   관리자 전용 도구 (로그인한 관리자에게만 노출)
   ============================================================ */
.ms-adminbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:-42px 0 34px;padding:14px 20px;border-radius:12px;
  background:#FFF7ED;border:1px solid #F0DCBB}
.ms-adminbar .ms-ab-txt{font-size:13.5px;line-height:1.6;color:#8A5A12}
.ms-adminbar .ms-ab-txt b{color:#7A4A08}
.ms-ab-acts{display:flex;gap:9px;flex-wrap:wrap}
.ms-ab-btn{height:38px;padding:0 16px;border-radius:9px;display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:700;border:1px solid #E0D2BB;background:#fff;color:#6B4A14}
.ms-ab-btn:hover{border-color:#C9B48F;color:#6B4A14}
.ms-ab-btn.pri{background:var(--navy);border-color:var(--navy);color:#fff}
.ms-ab-btn.pri:hover{background:#16305f;color:#fff}

.ms-tools{position:absolute;top:10px;right:10px;z-index:5;display:flex;gap:5px;opacity:.92}
.ms-tools button,.ms-tools a{height:28px;min-width:28px;padding:0 9px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;line-height:1;
  background:rgba(255,255,255,.94);border:1px solid rgba(9,20,45,.16);color:#2B3A53}
.ms-tools button:hover,.ms-tools a:hover{background:#fff;border-color:var(--gold)}
.ms-tools button:disabled{opacity:.32;cursor:default}
.ms-tools .is-del{color:#B04A4A}
.ms-mini .ms-tools{top:8px;right:8px}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1200px){
  .ms-minis{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .ms-sec{padding:80px 0}
  .ms-card-txt{padding:36px 18px 36px 32px}
  .ms-card.is-lead .ms-card-txt{padding:42px 22px 42px 38px}
  .ms-name{font-size:32px}
  .ms-cards{gap:20px}
  .ms-minis{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media (max-width:860px){
  .ms-cards{grid-template-columns:1fr}
  .ms-card,.ms-card.is-lead{grid-template-columns:1fr .85fr;min-height:300px}
  .ms-card.is-lead .ms-name{font-size:36px}
  .ms-minis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .ms-sec{padding:64px 0}
  .ms-sec-head{margin-bottom:30px}
  .ms-card,.ms-card.is-lead{grid-template-columns:1fr;min-height:0}
  /* 1열로 접히면 텍스트가 카드 상단으로 올라와 우상단 관리 버튼과 겹친다.
     이 폭에서는 관리 버튼을 흐름 배치로 바꿔 카드 첫 줄에 따로 놓는다. */
  .ms-card .ms-tools{position:static;justify-content:flex-end;padding:10px 12px 0}
  .ms-card-txt,.ms-card.is-lead .ms-card-txt{padding:22px 24px 8px}
  .ms-card-ph,.ms-card.is-lead .ms-card-ph{height:280px;margin-top:6px}
  .ms-name,.ms-card.is-lead .ms-name{font-size:30px;letter-spacing:.12em}
  .ms-cv li,.ms-card.is-lead .ms-cv li{font-size:14px}
  .ms-minis{gap:12px}
  .ms-mini-name{font-size:18px}
}