body.eg-site #main .mb-card-panel{
 position:relative;overflow:hidden;isolation:isolate;border-radius:14px;box-sizing:border-box;
 background:#15160f;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start;
 padding:28px 20px;margin:var(--space-12,48px) 0;
}
body.eg-site #main .mb-card-panel::before{
 content:'';position:absolute;inset:0;z-index:0;
 background:url('/assets/briefingbook-1008/founding-membership-night.jpg') center 30%/cover no-repeat;
}
body.eg-site #main .mb-card-panel::after{
 content:'';position:absolute;inset:0;z-index:0;
 background:linear-gradient(180deg,rgba(13,14,11,.4),rgba(13,14,11,.62));
}
body.eg-site #main .mb-card-panel>*{position:relative;z-index:1;}

/* ── 카드 덱: 카드사 홈페이지처럼 카드가 주인공이 되도록 크게, 간격도 넉넉하게.
   그리드 대신 flex-wrap — 열렸을 때 활성 카드만 flex-basis:100%로 부드럽게 커지게 하기
   위해(아래 열림 블록), 트랙 수를 바꾸지 않고 폭만 바뀌는 쪽을 쓴다. ── */
body.eg-site #main .review-membership-options.mb-card-stack{display:flex;flex-wrap:wrap;gap:40px;margin:0;padding:0;max-width:600px;}
body.eg-site #main .mb-card-stack .mb-card{
 position:relative;display:block;flex:0 1 calc(50% - 20px);aspect-ratio:1.586;
 border-radius:10px;text-decoration:none;word-break:keep-all;box-sizing:border-box;
 box-shadow:0 14px 34px -18px rgba(0,0,0,.6);
 transition:transform .2s ease,box-shadow .2s ease;cursor:pointer;
 border-top:0;padding:0;
}
body.eg-site #main .mb-card-stack .mb-card:is(:hover,:focus-visible){transform:translateY(-4px);box-shadow:0 20px 38px -18px rgba(0,0,0,.65);text-decoration:none;}
body.eg-site #main .mb-card-stack .mb-card.is-active{box-shadow:0 0 0 2px var(--troon-ink,#232726),0 20px 38px -18px rgba(0,0,0,.65);}
.mb-card-face{display:flex;flex-direction:column;justify-content:space-between;height:100%;width:100%;padding:clamp(18px,3.4vw,30px);border-radius:10px;box-sizing:border-box;background-size:cover;background-position:center;background-repeat:no-repeat;}
/* 밝은 카드(Resident·Member·Club): 기존 troon-symbol-ink.png 로고 + 아이보리 바탕 */
body.eg-site #main .mb-card-stack .mb-card .mb-card-face{background-color:var(--troon-ivory,#F4F1EA);border:1px solid rgba(53,58,52,.18);color:var(--troon-ink,#232726);}
/* Founder만 무광 블랙 + 절제된 muted gold 테두리(어두운 배경 사진 위에서도 윤곽이 보이도록), troon-symbol-ivory.png 로고 */
body.eg-site #main .mb-card-stack .mb-card-founder .mb-card-face{background-color:#171814;border:1px solid rgba(201,169,121,.35);color:#F4F1EA;}
.mb-card-logo{display:block;width:clamp(72px,14%,104px);height:auto;max-height:clamp(24px,5%,34px);object-fit:contain;object-position:left;}
.mb-card-grade{display:block;font-family:var(--troon-font-display,serif);font-weight:400;font-size:clamp(18px,3.2vw,26px);line-height:1.22;}
.mb-card-grade-ko{display:block;margin-top:4px;font-family:var(--troon-font-ko,inherit);font-size:clamp(12px,1.6vw,15px);font-weight:400;letter-spacing:.01em;opacity:.75;}
.mb-card-founder .mb-card-grade-ko{color:#c9a979;opacity:1;}
.mb-card-meta{display:flex;justify-content:space-between;gap:12px;}
.mb-card-field{display:flex;flex-direction:column;gap:4px;min-width:0;}
.mb-card-label{font-size:clamp(10px,1.3vw,12px);letter-spacing:.06em;opacity:.6;white-space:nowrap;}
.mb-card-value{display:block;width:clamp(48px,10%,72px);height:1px;border-bottom:1px dashed currentColor;opacity:.4;}

/* 열렸을 때는 PC·모바일 모두 고른 카드만 남기고 나머지 셋은 숨긴다(재선택은 -91 원문대로
   "다시 누르면 닫히고 카드 덱 안으로" 돌아간 뒤 고르는 흐름) — 고른 카드는 flex-basis:100%로
   칸을 꽉 채워 커진다. 모바일은 이미 카드 한 장이 한 줄(100%)이라 숫자만 그대로 유지되고,
   나머지 세 장이 사라지는 만큼만 스크롤이 줄어든다(390×844 첫 화면 조건용). */
body.eg-site #main .mb-card-panel.is-open .mb-card-stack .mb-card:not(.is-active){display:none;}
body.eg-site #main .mb-card-panel.is-open .mb-card-stack .mb-card.is-active{flex-basis:100%;}


@media(max-width:700px){
 body.eg-site #main .mb-card-panel{padding:24px 20px;gap:20px;}
 body.eg-site #main .review-membership-options.mb-card-stack{gap:20px;max-width:320px;margin-inline:auto;}
 body.eg-site #main .mb-card-stack .mb-card{flex-basis:100%;max-width:320px;}
}
@media(max-width:900px){
 body.eg-site #main .mb-card-panel.is-open{padding:20px;gap:20px;}
 body.eg-site #main .mb-card-panel.is-open .mb-card-stack .mb-card.is-active{max-width:286px;margin-inline:auto;}
}

/* ── 열림 상태(PC ≥901px): 바깥 틀은 항상 2트랙(카드열/설명열)이라 트랙 수 변화 없이 폭만
   transition — 닫힘 1fr/0px → 열림 360px/680px. 활성 카드는 flex-basis:100%로 같이 커져
   왼쪽 칸을 가득 채우며 "왼쪽으로 밀려나는" 느낌을 만들고, 나머지 카드는 숨긴다(재선택은
   -91 원문대로 "다시 누르면 닫히고 덱 안으로" 돌아간 뒤 고르는 흐름). 모바일은 항상 1열
   (카드 위·설명 아래) — 별도 트랙 규칙 불필요, 지금 구조 그대로 유지. ── */
@media(min-width:901px){
 body.eg-site #main .mb-card-panel{padding:56px;grid-template-columns:minmax(0,1fr) 0px;gap:0;}
 body.eg-site #main .review-membership-options.mb-card-stack{max-width:none;}
 /* MB-09 파운더 첫 화면 조건(열자마자 '파운더 전용'+3혜택이 1440×900 안에 다 보여야 함):
    열림 패딩을 닫힘(56px)보다 줄여 위쪽 여백만큼 본문이 더 올라오게 한다(예전 padding:0과
    같은 취지, 다만 카드·둥근 모서리가 안 잘리게 약간만 남김). */
 body.eg-site #main .mb-card-panel.is-open{grid-template-columns:360px minmax(0,1fr);gap:48px;padding:20px 20px 32px;}
 body.eg-site #main .mb-card-panel.is-open .review-membership-options.mb-card-stack{max-width:360px;}
}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 body.eg-site #main .mb-card-panel{transition:grid-template-columns .38s cubic-bezier(.22,.61,.36,1),gap .38s cubic-bezier(.22,.61,.36,1),padding .38s cubic-bezier(.22,.61,.36,1);}
 body.eg-site #main .mb-card-stack .mb-card{transition:transform .2s ease,box-shadow .2s ease,flex-basis .38s cubic-bezier(.22,.61,.36,1);}
}

/* ── 본문 등급 상세(#founder 등)는 js-widget-active일 때만 숨김 — 스크립트 비활성 시 그대로 보임(no-JS 대비). ── */
html.js-widget-active .detail-deck,
html.js-widget-active #founder,
html.js-widget-active #resident,
html.js-widget-active #member,
html.js-widget-active #club{display:none;}

body.eg-site #main .review-membership-intro{grid-template-columns:minmax(0,.65fr) minmax(0,1fr);}
@media(max-width:700px){
 body.eg-site #main .review-membership-intro{grid-template-columns:minmax(0,1fr);}
}

@media(max-width:700px){
 body.eg-site #main .review-membership-overview .review-table-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;}
 body.eg-site #main .review-membership-overview .review-grade-comparison{display:table;min-width:640px;width:max-content;}
 body.eg-site #main .review-membership-overview .review-grade-comparison caption{display:table-caption;}
 body.eg-site #main .review-membership-overview .review-grade-comparison thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none;}
 body.eg-site #main .review-membership-overview .review-grade-comparison tbody{display:table-row-group;}
 body.eg-site #main .review-membership-overview .review-grade-comparison tr{display:table-row;border-top:0;margin-bottom:0;}
 body.eg-site #main .review-membership-overview .review-grade-comparison :is(th,td){display:table-cell;width:auto;min-width:140px;max-width:62vw;white-space:normal;}
 body.eg-site #main .review-membership-overview .review-grade-comparison td::before{content:none;}
 body.eg-site #main .review-membership-overview .review-grade-comparison th[scope="row"]{position:sticky;left:0;background:var(--troon-ivory,#F4F1EA);z-index:1;min-width:0;}
 body.eg-site #main .review-membership-overview .review-table-scroll{box-shadow:inset -18px 0 14px -14px rgba(35,39,38,.28);}
}

/* ── S24 인라인 설명 패널(예전 <dialog>를 대체) ── */
.mb-panel-desc{position:relative;background:var(--troon-ivory,#F4F1EA);color:var(--troon-ink,#232726);
 border-radius:14px;border:1px solid rgba(53,58,52,.14);overflow:hidden;
 box-shadow:0 20px 50px -30px rgba(10,12,10,.4);}
.mb-panel-desc[hidden]{display:none;}
/* S23/§9-4: 패널 위쪽에 지정 배경(침실 사진)의 작은 띠(~160px) — 긴 글은 그 위에 얹지 않고
   아래 단색(.mb-widget-body) 패널에 그대로 둔다. 닫기 버튼은 띠 위에 겹쳐 뜬다. */
.mb-panel-photo{margin:0;height:120px;overflow:hidden;}
.mb-panel-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;}
.mb-widget-close{position:absolute;top:14px;right:14px;z-index:1;padding:8px 14px;font-size:13px;
 background:rgba(244,241,234,.92);border:1px solid rgba(255,255,255,.4);border-radius:999px;
 color:var(--troon-ink,#232726);cursor:pointer;backdrop-filter:blur(2px);}
.mb-widget-close:hover{background:#fff;}
.mb-widget-body{max-height:min(80svh,820px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px clamp(24px,4vw,56px) clamp(32px,4vw,56px);}
body.eg-site #mb-panel-desc .mb-widget-body:has(.fg-founder-stage){padding:0;}
@media(prefers-reduced-motion:no-preference){
 .mb-card-panel.is-open .mb-panel-desc{animation:mb-panel-in .32s cubic-bezier(.22,.61,.36,1);}
}
@keyframes mb-panel-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

.mb-widget-reveal{margin:18px 0 24px;padding:0 24px;box-sizing:border-box;}
.mb-widget-reveal[hidden]{display:none;}
.mb-reveal-line{margin:0 0 4px;overflow:hidden;}
.mb-reveal-line span{display:block;font-family:var(--troon-font-display,serif);font-weight:400;
 font-size:clamp(19px,2.6vw,29px);line-height:1.35;opacity:1;transform:none;}
.mb-reveal-line:last-child span{color:#a9875f;font-weight:600;}
@media(prefers-reduced-motion:no-preference){
 .mb-widget-reveal.is-playing .mb-reveal-line span{opacity:0;transform:translateY(100%);animation:mb-line-up .62s cubic-bezier(.22,.61,.36,1) forwards;}
 .mb-widget-reveal.is-playing .mb-reveal-line:nth-child(1) span{animation-delay:.05s;}
 .mb-widget-reveal.is-playing .mb-reveal-line:nth-child(2) span{animation-delay:.32s;}
 .mb-widget-reveal.is-playing .mb-reveal-line:nth-child(3) span{animation-delay:.59s;}
 .mb-widget-reveal.is-playing .mb-reveal-line:nth-child(4) span{animation-delay:.86s;}
}
@keyframes mb-line-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}

.mb-founder-emphasis{margin:12px 0 0;}
.mb-founder-badge{display:block;font-size:13px;line-height:1.5;letter-spacing:.04em;color:#a9875f;margin:0 0 10px;}
.mb-founder-perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.mb-founder-perks li{font-size:18px;line-height:1.5;font-weight:500;color:inherit;}
@media(max-width:900px){
 .mb-founder-perks li{font-size:17px;}
}

/* 본문 #founder(위젯 복제 전 원본)의 2단 그리드(founder-main-1013/adapter.css)에
   새 블록을 heading과 info 사이에 끼워 넣는다. 그 파일은 .fg-home(홈 미리보기)과도
   공유하는 컴포넌트라 직접 고치지 않고, #founder로 범위를 좁혀 id 하나를 더해
   명시도로 이긴다(id 2개 > id 1개, 소스 순서 무관). */
body.fg-membership #main #founder .fg-founder-stage{grid-template-rows:auto auto 1fr;}
body.fg-membership #main #founder .fg-founder-stage>figure{grid-row:1/4;}
body.fg-membership #main #founder .mb-founder-emphasis{grid-column:2;grid-row:2;margin:0;}
body.fg-membership #main #founder .mo-founder-information{grid-row:3;}
@media(max-width:700px){
 body.fg-membership #main #founder .fg-founder-heading{order:0;}
 body.fg-membership #main #founder .mb-founder-emphasis{order:1;}
 body.fg-membership #main #founder .fg-founder-stage>figure{order:2;}
 body.fg-membership #main #founder .mo-founder-information{order:3;}
}

/* 기존 책 기반 설명(복제해 넣음) — 위젯 안에서는 어두운 바탕 없이 그대로 읽히게 색만 보정 */
.mb-widget-desc{color:inherit;}
.mb-widget-desc :is(h1,h2){font-family:var(--troon-font-display,serif);font-weight:400;font-size:clamp(20px,2.4vw,27px);margin:0 0 16px;}
.mb-widget-desc .om-en{display:block;margin-top:6px;font-size:12px;letter-spacing:.06em;opacity:.7;}
.mb-widget-desc .fg-founder-stage,
.mb-widget-desc .rf-founder-ko,
.mb-widget-desc dl,
.mb-widget-desc p{color:inherit;}
.mb-widget-desc dl{margin:16px 0 0;padding:0;}
.mb-widget-desc dl>div{padding:12px 0;border-top:1px solid var(--troon-line,rgba(140,136,128,.4));display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;}
.mb-widget-desc dt{font-size:12px;color:#a9875f;}
.mb-widget-desc dd{font-size:13px;line-height:1.8;margin:0;}
.mb-widget-desc figure.rf-grade-photo{margin:0 0 16px;border-radius:10px;overflow:hidden;}
.mb-widget-desc figure.rf-grade-photo img{display:block;width:100%;height:auto;max-height:50vh;object-fit:cover;}
/* .mb-widget-close(닫기, 패널 오른쪽 위 고정 position:absolute, 실측 33.5px 높이)가 이제
   맨 위로 올라온 등급명과 같은 줄에서 겹친다 — 위쪽만 더 띄워(56px) 등급명이 닫기 버튼
   아래에서 시작하게 한다(묶음 높이 예산에 더해도 여유가 큼, 실측 1440 396<900·390
   672<844). */
body.eg-site #mb-panel-desc .fg-founder-stage{display:flex;flex-direction:column;gap:0;border-radius:10px;overflow:hidden;padding:56px 24px 24px;}
body.eg-site #mb-panel-desc .fg-founder-heading{display:none;}
/* 등급명(기존 "에스테이트 파운더" 텍스트 그대로, 새 문장 0) — 24px/1.3로 통일 */
body.eg-site #mb-panel-desc .fg-founder-ko{font-family:var(--troon-font-display,serif);font-weight:400;font-size:24px;line-height:1.3;margin:0;}
body.eg-site #mb-panel-desc .fg-founder-stage>figure{margin:24px 0 0;width:100%;}
body.eg-site #mb-panel-desc .mo-founder-information{margin-top:24px;}
body.eg-site #mb-panel-desc .mo-founder-information .oc-section-intro{display:block;max-width:none;margin:0;}
body.eg-site #mb-panel-desc .mo-founder-information .oc-section-number{display:none;}
body.eg-site #mb-panel-desc .mo-founder-information .oc-section-intro p{font-size:14px;line-height:1.85;margin:0 0 16px;}
body.eg-site #mb-panel-desc .fg-founder-stage .mb-facts :is(dt,dd){color:#d2d3cb;}
body.eg-site #mb-panel-desc .fg-founder-stage .mb-facts dt{color:var(--fg-gold);}
@media(max-width:900px){
 /* padding-top은 56 유지(닫기 버튼 겹침 방지, 위 참고) — 다른 세 변만 20으로. */
 body.eg-site #mb-panel-desc .fg-founder-stage{padding:56px 20px 20px;}
}
/* 핵심정보(위) 다음에 기존 4줄 문구·사진 띠가 이어지도록 — #mb-panel-desc 자체를 flex로
   바꿔 .mb-widget-body(핵심정보+본문 전체)를 .mb-widget-reveal·.mb-panel-photo보다 앞에
   둔다. :has()로 Founder가 로드된 상태(.fg-founder-stage가 있을 때)만 — Resident 등은
   원래 사진 띠가 맨 위인 지금 구조 그대로(ST에서 이미 맞은 부분, 안 건드림). */
body.eg-site #mb-panel-desc:has(.fg-founder-stage){display:flex;flex-direction:column;}
body.eg-site #mb-panel-desc:has(.fg-founder-stage) .mb-widget-body{order:0;}
body.eg-site #mb-panel-desc:has(.fg-founder-stage) .mb-widget-reveal{order:1;}
body.eg-site #mb-panel-desc:has(.fg-founder-stage) .mb-panel-photo{order:2;}
body.eg-site #mb-panel-desc:has(.fg-founder-stage) .mb-widget-cta{order:3;}

.mb-widget-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:28px 24px 24px;
 padding:14px 28px;background:var(--troon-ink,#232726);color:var(--troon-ivory,#F4F1EA);
 border-radius:999px;font-size:14px;text-decoration:none;white-space:nowrap;}
.mb-widget-cta:hover{background:#121412;}
@media(max-width:640px){
 .mb-widget-cta{width:calc(100% - 48px);}
}