.gmx{--ink:#0b0d10;--card:#14181d;--ln:rgba(255,255,255,.1);--o:#fba303;--o2:#ffd27a;--mu:#a3aab3;--tx:#f2f3f5;
  position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--tx);
  font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Noto Sans",system-ui,sans-serif;padding:120px 0;-webkit-font-smoothing:antialiased}
.gmx *{box-sizing:border-box}
.gmx em{font-style:normal;color:var(--o)}.gmx b{font-weight:700;color:#fff}
.gmx .gmx__glow{position:absolute;inset:-30% auto auto -10%;width:60%;height:90%;z-index:-1;background:radial-gradient(closest-side,rgba(251,163,3,.13),transparent 70%)}
.gmx h2{margin:0;font-size:36px;line-height:1.45;font-weight:700;letter-spacing:-.34px;word-break:keep-all;color:#fff}
.gmx p{word-break:keep-all}
.gmx .gmx__num{font-family:Manrope,"Pretendard Variable",sans-serif;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,var(--o),var(--o2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.gmx .gmx__num small{font-size:.4em;margin-left:4px;font-family:"Pretendard Variable","Noto Sans KR",sans-serif;font-weight:700;letter-spacing:0}
.gmx .gmx__rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.gmx.in-view .gmx__rv{opacity:1;transform:none}
.gmx.in-view .gmx__rv:nth-child(2){transition-delay:.12s}.gmx.in-view .gmx__rv:nth-child(3){transition-delay:.24s}

/* D — 큰 문구 + 숫자: 왼쪽 글, 오른쪽 사진이 바탕으로 번진다 */
.gmx--d .gmx__photo{position:absolute;top:0;right:0;bottom:0;width:58%;z-index:-1;background:right 12%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
.gmx--d .gmx__copy{max-width:620px}
.gmx--d .gmx__stats{display:flex;gap:44px;margin:0 0 36px;padding:0;list-style:none}
.gmx--d .gmx__stats li{display:grid;gap:6px}
.gmx--d .gmx__stats .gmx__num{font-size:72px;line-height:.95}
.gmx--d .gmx__stats span:last-child{font-size:15px;color:var(--mu)}
.gmx--d h2{margin-bottom:28px}
.gmx--d p{margin:0 0 14px;font-size:16px;line-height:1.8;color:var(--mu)}
.gmx--d p em{background:linear-gradient(transparent 62%,rgba(251,163,3,.28) 0)}
.gmx--d .gmx__side{position:absolute;right:28px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center;
  font:700 12px/1 Manrope,sans-serif;letter-spacing:.32em;color:rgba(255,255,255,.55)}

/* E — 검사 흐름: 왼쪽 장비 사진, 오른쪽 글 + 68% + 세 단계 + 단추 */
.gmx--e .gmx__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.gmx--e .gmx__pic{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:620/899;max-height:640px;background:#0e1520}
.gmx--e .gmx__pic img{width:100%;height:100%;object-fit:cover;display:block}
.gmx--e .gmx__pic:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(11,13,16,.6))}
.gmx--e .gmx__kick{margin:0 0 10px;font-size:18px;font-weight:600;color:#fff}
.gmx--e p.gmx__body{margin:22px 0 0;font-size:16px;line-height:1.8;color:var(--mu)}
.gmx--e .gmx__big{display:flex;align-items:center;gap:20px;margin:28px 0 30px;padding:22px 0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.gmx--e .gmx__big .gmx__num{font-size:84px;line-height:.9}
.gmx--e .gmx__big p{margin:0;font-size:16px;line-height:1.6;color:#d7dbe0}
.gmx--e .gmx__flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 28px;padding:0;list-style:none;counter-reset:f}
.gmx--e .gmx__flow li{position:relative;padding:20px 18px;border-radius:16px;background:var(--card);border:1px solid rgba(251,163,3,.35);text-align:center;font-weight:700;font-size:15px;word-break:keep-all}
.gmx--e .gmx__flow li:before{counter-increment:f;content:"0" counter(f);display:block;margin-bottom:8px;font:800 13px/1 Manrope,sans-serif;letter-spacing:.1em;color:var(--o)}
.gmx--e .gmx__flow li+li:after{content:"";position:absolute;left:-14px;top:50%;width:14px;height:2px;background:rgba(251,163,3,.55)}
.gmx--e .gmx__btn{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 26px;border-radius:12px;background:var(--o);color:#16110a;font-weight:700;font-size:16px;text-decoration:none}
.gmx--e .gmx__btn:hover{background:#ffb52b}
.gmx--e .gmx__btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* F — 두 가지 확인: 가운데 사진, 양옆 질문 카드 */
.gmx--f .gmx__head{text-align:center;max-width:760px;margin:0 auto 56px}
.gmx--f .gmx__head p{margin:18px 0 0;font-size:16px;line-height:1.8;color:var(--mu)}
.gmx--f .gmx__head p em{font-weight:700}
.gmx--f .gmx__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:center}
.gmx--f .gmx__pic{border-radius:50%/42%;overflow:hidden;aspect-ratio:740/550;box-shadow:0 0 0 1px var(--ln),0 30px 60px rgba(0,0,0,.5)}
.gmx--f .gmx__pic img{width:100%;height:100%;object-fit:cover;display:block}
.gmx--f .gmx__q{padding:30px 28px;border-radius:22px;background:var(--card);border:1px solid rgba(251,163,3,.4);position:relative}
.gmx--f .gmx__q .gmx__num{display:block;font-size:44px;line-height:1;margin-bottom:14px}
.gmx--f .gmx__q b{display:block;font-size:20px;line-height:1.45;word-break:keep-all}
.gmx--f .gmx__q p{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:var(--mu)}

@media (max-width:860px){
  .gmx{padding:64px 0 72px}
  .gmx h2{font-size:23px;letter-spacing:-.28px}
  /* 휴대폰: 사진을 글 뒤에 흐리게 깔면 얼굴과 글이 겹친다 → 사진을 맨 위 한 덩어리로, 글은 그 아래 */
  .gmx--d{padding-top:0}
  .gmx--d .gmx__photo{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:4/3;z-index:auto;opacity:1;
    background-position:60% 8%;margin-bottom:-56px;
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .gmx--d .gmx__copy{position:relative}
  .gmx--d .gmx__stats{justify-content:space-between;padding:18px 0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
  .gmx--d .gmx__stats{gap:28px;margin-bottom:24px}.gmx--d .gmx__stats .gmx__num{font-size:46px}
  .gmx--d p{font-size:14.5px}.gmx--d .gmx__side{display:none}
  .gmx--e .gmx__grid{grid-template-columns:1fr;gap:28px}
  .gmx--e .gmx__pic{aspect-ratio:16/11}
  .gmx--e .gmx__big .gmx__num{font-size:56px}
  .gmx--e .gmx__flow{grid-template-columns:1fr;gap:10px}
  .gmx--e .gmx__flow li{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px}
  .gmx--e .gmx__flow li:before{margin:0}
  .gmx--e .gmx__flow li+li:after{left:34px;top:-10px;width:2px;height:10px}
  .gmx--f .gmx__head{margin-bottom:28px;text-align:left}
  .gmx--f .gmx__head p{font-size:14.5px}
  .gmx--f .gmx__stage{grid-template-columns:1fr;gap:14px}
  .gmx--f .gmx__pic{order:-1;border-radius:20px}
  .gmx--f .gmx__q{padding:22px}.gmx--f .gmx__q b{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.gmx .gmx__rv{opacity:1;transform:none;transition:none}}

/* ── 모션 (화면에 들어올 때 한 번) ── */
/* D: 사진이 천천히 다가오고, 숫자가 올라가고, 강조 밑줄이 그어진다 */
.gmx--d .gmx__photo{transform:scale(1.12);opacity:0;transition:transform 2.4s cubic-bezier(.2,.7,.2,1),opacity 1.2s}
.gmx--d.in-view .gmx__photo{transform:scale(1);opacity:1}
.gmx--d p em{background-size:0% 100%;background-repeat:no-repeat;background-image:linear-gradient(transparent 62%,rgba(251,163,3,.32) 0);transition:background-size 1.2s .9s cubic-bezier(.2,.7,.2,1)}
.gmx--d.in-view p em{background-size:100% 100%}
/* E: 장비 사진에 빛 띠가 한 번 지나가고, 세 단계가 차례로 켜지며 잇는 선이 찬다 */
.gmx--e .gmx__pic:before{content:"";position:absolute;inset:-20% -60%;z-index:1;background:linear-gradient(100deg,transparent 40%,rgba(120,190,255,.28) 50%,transparent 60%);transform:translateX(-70%)}
.gmx--e.in-view .gmx__pic:before{animation:gmxScan 2.2s .4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes gmxScan{to{transform:translateX(70%)}}
.gmx--e .gmx__flow li{border-color:var(--ln);transition:border-color .5s,background .5s,box-shadow .5s}
.gmx--e .gmx__flow li.lit{border-color:rgba(251,163,3,.7);background:linear-gradient(180deg,rgba(251,163,3,.12),var(--card));box-shadow:0 0 0 1px rgba(251,163,3,.25),0 10px 30px rgba(251,163,3,.12)}
.gmx--e .gmx__flow li+li:after{transform:scaleX(0);transform-origin:left;transition:transform .5s}
.gmx--e .gmx__flow li.lit+li:after{transform:scaleX(1)}
.gmx--e .gmx__btn span{display:inline-block;transition:transform .3s}
.gmx--e .gmx__btn:hover span{transform:translateX(6px)}
/* F: 사진이 타원으로 열리고, 양옆 카드가 바깥에서 들어오며 사진 쪽으로 선이 그어진다 */
.gmx--f .gmx__pic{clip-path:ellipse(0% 0% at 50% 50%);transition:clip-path 1.4s .2s cubic-bezier(.2,.7,.2,1)}
.gmx--f.in-view .gmx__pic{clip-path:ellipse(50% 50% at 50% 50%)}
.gmx--f .gmx__q{opacity:0;transition:opacity .9s .7s,transform 1s .7s cubic-bezier(.2,.7,.2,1)}
.gmx--f .gmx__q:first-child{transform:translateX(-40px)}.gmx--f .gmx__q:last-child{transform:translateX(40px)}
.gmx--f.in-view .gmx__q{opacity:1;transform:none}
.gmx--f .gmx__q:after{content:"";position:absolute;top:50%;width:28px;height:2px;background:var(--o);transform:scaleX(0);transition:transform .6s 1.5s}
.gmx--f .gmx__q:first-child:after{right:-28px;transform-origin:left}.gmx--f .gmx__q:last-child:after{left:-28px;transform-origin:right}
.gmx--f.in-view .gmx__q:after{transform:scaleX(1)}
@media (max-width:860px){
  .gmx--f .gmx__q:after{display:none}
  .gmx--f .gmx__q:first-child,.gmx--f .gmx__q:last-child{transform:translateY(24px)}
  .gmx--e .gmx__flow li+li:after{transform:scaleY(0);transform-origin:top}
  .gmx--e .gmx__flow li.lit+li:after{transform:scaleY(1)}
}
@media (prefers-reduced-motion:reduce){
  .gmx--d .gmx__photo,.gmx--f .gmx__pic,.gmx--f .gmx__q{transition:none;transform:none;opacity:1;clip-path:none}
  .gmx--d p em{background-size:100% 100%;transition:none}
  .gmx--e .gmx__pic:before{display:none}
}

/* 2026-10-08: 조직검사 페이지의 옛 배너 단추 규칙(sub2.css .in-bg.bg-mri-biopsy a)이 이 단추에 걸렸다 */
.in-bg .gmx--e a.gmx__btn{position:static;opacity:1;width:auto;height:auto;font-size:16px;right:auto;bottom:auto}

/* 2026-10-12 조직검사 페이지 'AI 3T MRI' 블록(.gmx--e) 글자 체계 정리 — 이 블록만 적용(수술비교·재수술 페이지 .gmx 는 그대로)
   PC: 머리말 18 / 제목 48 / 본문 19 / 숫자 88 / 단계 17 / 버튼 18 (사용자 "PC 글씨 작다" 반영)
   모바일: 머리말 13 / 제목 28 / 본문 16 / 숫자 52 / 단계 15 / 버튼 16. 본문 색 한 가지, 강조는 흰색·주황 두 가지. */
section.gmx.gmx--e .gmx__kick { font-size: 18px; font-weight: 700; letter-spacing: .06em; color: #FBA303; margin: 0 0 16px; }
section.gmx.gmx--e h2 { font-size: 48px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; margin: 0 0 24px; }
section.gmx.gmx--e h2 em { font-style: normal; font-weight: 700; color: #fff; }
section.gmx.gmx--e .gmx__body { font-size: 19px; line-height: 1.7; color: #B4BAC3; margin: 0 0 30px; word-break: keep-all; text-wrap: pretty; }
section.gmx.gmx--e .gmx__body em { font-style: normal; font-weight: 600; color: #FBA303; }
section.gmx.gmx--e .gmx__big { display: flex; align-items: center; gap: 28px; padding: 26px 0; margin: 0 0 30px; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
section.gmx.gmx--e .gmx__num { font-size: 88px; line-height: 1; font-weight: 800; letter-spacing: -.03em; flex: none; }
section.gmx.gmx--e .gmx__num small { font-size: .45em; font-weight: 700; margin-left: 2px; }
section.gmx.gmx--e .gmx__big p { font-size: 19px; line-height: 1.6; color: #B4BAC3; margin: 0; }
section.gmx.gmx--e .gmx__big b { color: #fff; font-weight: 700; }
section.gmx.gmx--e .gmx__flow li { font-size: 17px; font-weight: 600; color: #fff; }
section.gmx.gmx--e a.gmx__btn { font-size: 18px; font-weight: 700; }
@media screen and (max-width: 768px) {
  section.gmx.gmx--e .gmx__kick { font-size: 13px; letter-spacing: .08em; margin-bottom: 10px; }
  section.gmx.gmx--e h2 { font-size: 28px; line-height: 1.35; margin-bottom: 16px; }
  section.gmx.gmx--e .gmx__body { font-size: 16px; line-height: 1.75; margin-bottom: 22px; }
  section.gmx.gmx--e .gmx__big { gap: 16px; padding: 20px 0; margin-bottom: 22px; }
  section.gmx.gmx--e .gmx__num { font-size: 52px; }
  section.gmx.gmx--e .gmx__big p { font-size: 16px; }
  section.gmx.gmx--e .gmx__flow li { font-size: 15px; }
  section.gmx.gmx--e a.gmx__btn { font-size: 16px; }
}