/* MYEONGRIGYEOL_PREMIUM_V124_R4_CENTER_WIDTH_FIX */

:root{
  --mg124r4-rail:1180px;
  --mg124r4-hero:1180px;
  --mg124r4-form:820px;
  --mg124r4-aside:280px;
  --mg124r4-result:980px;
  --mg124r4-home-main:980px;
  --mg124r4-gap:24px;
  --mg124r4-x:24px;
}

/* ============================================================
   1) 공통 중앙축
============================================================ */
.shell,
.mg-v12-products,
.mg-v12-service-intro,
.mg-v12-life-teaser,
.mg-v12-detail-hero,
body.mg-v12-home main.layout,
body.mg-v12-report main.layout,
body.mg-v12-lifebook main.layout,
#lifeBookPreview,
.mg-v12-life-book,
.mg-v12-result-shell{
  width:min(var(--mg124r4-rail),calc(100% - (var(--mg124r4-x) * 2)))!important;
  max-width:var(--mg124r4-rail)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

.shell{padding-left:0!important;padding-right:0!important;}
.top{width:100%!important;max-width:none!important;margin:0 auto!important;}

/* ============================================================
   2) 홈 - 상단 히어로 폭 통일
   기존 R3는 hero가 1080, 아래는 1180이라 불편했음.
============================================================ */
body.mg-v12-home .hero{
  width:min(var(--mg124r4-rail),calc(100% - (var(--mg124r4-x) * 2)))!important;
  max-width:var(--mg124r4-rail)!important;
  min-height:318px!important;
  margin:18px auto 20px!important;
  padding:32px 40px!important;
  border-radius:20px!important;
  box-sizing:border-box!important;
}
body.mg-v12-home .hero > *{
  max-width:min(560px,54%)!important;
}
body.mg-v12-home .hero h1{
  font-size:clamp(42px,4vw,58px)!important;
  line-height:1.05!important;
  letter-spacing:-1.8px!important;
}
body.mg-v12-home .hero p{
  font-size:14px!important;
  line-height:1.6!important;
}
body.mg-v12-home .hero .mg-hero-actions{
  width:min(500px,100%)!important;
}

/* 홈 상품영역 폭 일관성 */
.mg-v12-products{
  width:min(var(--mg124r4-rail),calc(100% - (var(--mg124r4-x) * 2)))!important;
  max-width:var(--mg124r4-rail)!important;
  margin:0 auto 34px!important;
}
.mg-v12-products .mg-product-grid{
  width:100%!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
  margin:0 auto!important;
}
.mg-v12-product-card{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  justify-self:stretch!important;
}

/* ============================================================
   3) 홈 - 무료사주 입력/결과 섹션
   좌우 2분할이 아니라 센터축 1열 기준으로 정렬
============================================================ */
body.mg-v12-home main.layout{
  width:min(var(--mg124r4-home-main),calc(100% - (var(--mg124r4-x) * 2)))!important;
  max-width:var(--mg124r4-home-main)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:18px!important;
  justify-content:center!important;
  align-items:start!important;
  margin:0 auto 62px!important;
}
body.mg-v12-home main.layout > .form-card,
body.mg-v12-home main.layout > .report{
  grid-column:1!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0 auto!important;
  justify-self:stretch!important;
}
body.mg-v12-home main.layout.mg-v124-empty-state{
  width:min(var(--mg124r4-home-main),calc(100% - (var(--mg124r4-x) * 2)))!important;
  max-width:var(--mg124r4-home-main)!important;
}
body.mg-v12-home main.layout.mg-v124-empty-state > .report{
  display:none!important;
}

/* ============================================================
   4) 정밀리포트 / 인생서 - 상단 히어로 폭 통일
============================================================ */
.mg-v12-detail-hero{
  width:min(var(--mg124r4-rail),calc(100% - (var(--mg124r4-x) * 2)))!important;
  max-width:var(--mg124r4-rail)!important;
  min-height:268px!important;
  margin:18px auto 22px!important;
  padding:30px 38px!important;
  border-radius:20px!important;
  box-sizing:border-box!important;
}
.mg-v12-detail-copy{
  max-width:600px!important;
}
.mg-v12-detail-copy h1{
  font-size:clamp(36px,3.2vw,50px)!important;
  line-height:1.1!important;
}
.mg-v12-detail-copy p{
  max-width:560px!important;
}
.mg-v12-detail-price{
  min-width:150px!important;
}

/* ============================================================
   5) 정밀리포트 / 인생서 - 폼 + 우측 가격박스
   상단은 2열 유지하되 전체를 중앙 정렬
============================================================ */
body.mg-v12-report main.layout,
body.mg-v12-lifebook main.layout{
  width:min(var(--mg124r4-rail),calc(100% - (var(--mg124r4-x) * 2)))!important;
  max-width:var(--mg124r4-rail)!important;
  display:grid!important;
  grid-template-columns:minmax(0,var(--mg124r4-form)) minmax(0,var(--mg124r4-aside))!important;
  gap:var(--mg124r4-gap)!important;
  justify-content:center!important;
  align-items:start!important;
  margin:0 auto 64px!important;
}

/* 폼 카드는 좌측 컬럼 */
body.mg-v12-report main.layout > .form-card,
body.mg-v12-lifebook main.layout > .form-card{
  grid-column:1!important;
  width:100%!important;
  max-width:var(--mg124r4-form)!important;
  min-width:0!important;
  margin:0!important;
  justify-self:stretch!important;
  box-sizing:border-box!important;
}

/* 우측 구매 어사이드 */
.mg-v123-purchase-aside{
  grid-column:2!important;
  grid-row:1!important;
  width:100%!important;
  max-width:var(--mg124r4-aside)!important;
  min-width:0!important;
  margin:0!important;
  justify-self:stretch!important;
  align-self:start!important;
  position:sticky!important;
  top:18px!important;
  box-sizing:border-box!important;
}

/* ============================================================
   6) 정밀리포트 / 인생서 - 결과/결읽기 영역
   기존엔 좌측 컬럼만 차지해서 왼쪽 쏠림 느낌 강했음.
   -> 전체 그리드 span 후 중앙 배치
============================================================ */
body.mg-v12-report main.layout > .report,
body.mg-v12-lifebook main.layout > .report{
  grid-column:1 / -1!important;
  width:min(var(--mg124r4-result),100%)!important;
  max-width:var(--mg124r4-result)!important;
  min-width:0!important;
  margin:0 auto!important;
  justify-self:center!important;
  box-sizing:border-box!important;
}

.mg-v12-result-shell,
.mg-v12-result,
.mg-v12-result-card,
.mg-v12-paybox,
.locked,
.classical-card,
.year-preview,
#lifeBookPreview,
.mg-v12-life-book{
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* 결과 미리보기 박스도 가운데 */
#lifeBookPreview,
.mg-v12-life-book,
.mg-v12-result-shell{
  width:min(var(--mg124r4-result),100%)!important;
  max-width:var(--mg124r4-result)!important;
}

/* 폼 내부 정렬 */
.mg-v12-form-card{
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
  padding:26px 28px!important;
  box-sizing:border-box!important;
}
.mg-v12-form-card .row2,
.mg-v12-form-card .mg-v12-two,
.mg-v12-form-card .mg-v12-field-row,
.mg-v12-form-card .field-row{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}

/* ============================================================
   7) 인생서 소개 박스 폭 통일
============================================================ */
.mg-v12-life-book,
#lifeBookPreview{
  width:min(var(--mg124r4-result),100%)!important;
  max-width:var(--mg124r4-result)!important;
}

/* ============================================================
   8) 모바일
============================================================ */
@media (max-width: 760px){
  :root{
    --mg124r4-x:12px;
  }

  .shell,
  .mg-v12-products,
  .mg-v12-service-intro,
  .mg-v12-life-teaser,
  .mg-v12-detail-hero,
  body.mg-v12-home main.layout,
  body.mg-v12-report main.layout,
  body.mg-v12-lifebook main.layout,
  #lifeBookPreview,
  .mg-v12-life-book,
  .mg-v12-result-shell{
    width:calc(100% - 24px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.mg-v12-home .hero,
  .mg-v12-detail-hero{
    width:calc(100% - 24px)!important;
    max-width:none!important;
    margin:12px auto 16px!important;
    padding:20px 17px!important;
  }

  body.mg-v12-home .hero{
    min-height:320px!important;
  }
  body.mg-v12-home .hero > *{
    width:100%!important;
    max-width:100%!important;
  }
  body.mg-v12-home .hero h1{
    font-size:clamp(36px,10vw,46px)!important;
  }

  .mg-v12-products .mg-product-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  body.mg-v12-home main.layout,
  body.mg-v12-report main.layout,
  body.mg-v12-lifebook main.layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    justify-content:stretch!important;
  }

  body.mg-v12-home main.layout > .form-card,
  body.mg-v12-home main.layout > .report,
  body.mg-v12-report main.layout > .form-card,
  body.mg-v12-report main.layout > .report,
  body.mg-v12-lifebook main.layout > .form-card,
  body.mg-v12-lifebook main.layout > .report{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    grid-column:1!important;
    margin:0!important;
    justify-self:stretch!important;
  }

  .mg-v123-purchase-aside{
    display:none!important;
  }

  .mg-v12-form-card{
    padding:20px 16px!important;
  }

  .mg-v12-form-card .row2,
  .mg-v12-form-card .mg-v12-two,
  .mg-v12-form-card .mg-v12-field-row,
  .mg-v12-form-card .field-row{
    grid-template-columns:1fr!important;
  }

  #lifeBookPreview,
  .mg-v12-life-book,
  .mg-v12-result-shell{
    width:100%!important;
    max-width:none!important;
  }
}

@media (max-width: 420px){
  :root{
    --mg124r4-x:10px;
  }

  .shell,
  .mg-v12-products,
  .mg-v12-service-intro,
  .mg-v12-life-teaser,
  .mg-v12-detail-hero,
  body.mg-v12-home main.layout,
  body.mg-v12-report main.layout,
  body.mg-v12-lifebook main.layout,
  #lifeBookPreview,
  .mg-v12-life-book,
  .mg-v12-result-shell,
  body.mg-v12-home .hero{
    width:calc(100% - 20px)!important;
  }
}

/* === MYEONGRIGYEOL V12.4 R4.1 UNIFIED RAIL START === */

/*
   핵심 원칙:
   PC의 주요 시각 박스는 전부 같은 1180px 중앙 레일을 사용한다.

   HOME
   Hero = 상품 3카드 = 무료사주 입력 = 결과

   REPORT
   Hero = 기본정보 입력 = 질문입력 = 결제 = 결과

   LIFEBOOK
   Hero = 인생서 소개 = 기본정보 입력 = 결과/인생서
*/

:root{
  --mg124-r41-rail:1180px;
  --mg124-r41-side:24px;
  --mg124-r41-mobile-side:12px;
}

/* ============================================================
   01. 모든 주요 PC 컨테이너의 중심축 통일
============================================================ */

body.mg-v12-home .hero,

.mg-v12-products,
.mg-v12-service-intro,
.mg-v12-life-teaser,

.mg-v12-detail-hero,

body.mg-v12-home main.layout,
body.mg-v12-report main.layout,
body.mg-v12-lifebook main.layout,

#lifeBookPreview,
.mg-life-book,
.mg-v12-life-book,

.mg-v12-result-shell{
  width:min(
    var(--mg124-r41-rail),
    calc(100% - (var(--mg124-r41-side) * 2))
  )!important;

  max-width:var(--mg124-r41-rail)!important;

  margin-left:auto!important;
  margin-right:auto!important;

  box-sizing:border-box!important;
}


/* ============================================================
   02. HOME
   Hero와 상품 3개 박스를 정확히 동일 폭으로
============================================================ */

body.mg-v12-home .hero{
  width:min(
    var(--mg124-r41-rail),
    calc(100% - (var(--mg124-r41-side) * 2))
  )!important;

  max-width:var(--mg124-r41-rail)!important;
}

.mg-v12-products{
  width:min(
    var(--mg124-r41-rail),
    calc(100% - (var(--mg124-r41-side) * 2))
  )!important;

  max-width:var(--mg124-r41-rail)!important;
}

.mg-v12-products .mg-product-grid{
  width:100%!important;
  max-width:none!important;

  margin-left:auto!important;
  margin-right:auto!important;

  grid-template-columns:
    repeat(3,minmax(0,1fr))!important;

  gap:16px!important;
}

.mg-v12-product-card{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}


/* ============================================================
   03. HOME 무료사주
   기본정보 작성칸과 아래 결과칸 모두 동일 폭
============================================================ */

body.mg-v12-home main.layout{
  display:grid!important;

  grid-template-columns:
    minmax(0,1fr)!important;

  gap:18px!important;

  width:min(
    var(--mg124-r41-rail),
    calc(100% - (var(--mg124-r41-side) * 2))
  )!important;

  max-width:var(--mg124-r41-rail)!important;

  justify-content:center!important;
  align-items:start!important;
}

body.mg-v12-home main.layout > .form-card,
body.mg-v12-home main.layout > .report{
  grid-column:1!important;

  width:100%!important;
  max-width:none!important;
  min-width:0!important;

  margin-left:auto!important;
  margin-right:auto!important;

  justify-self:stretch!important;

  box-sizing:border-box!important;
}

body.mg-v12-home main.layout.mg-v124-empty-state{
  width:min(
    var(--mg124-r41-rail),
    calc(100% - (var(--mg124-r41-side) * 2))
  )!important;

  max-width:var(--mg124-r41-rail)!important;
}

body.mg-v12-home main.layout.mg-v124-empty-state > .form-card{
  width:100%!important;
  max-width:none!important;
}

body.mg-v12-home main.layout.mg-v124-empty-state > .report{
  display:none!important;
}


/* ============================================================
   04. REPORT / LIFEBOOK
   기존 820 + 우측 280 구조 제거
   기본정보 작성 박스 자체를 Hero와 동일한 전체 폭으로
============================================================ */

body.mg-v12-report main.layout,
body.mg-v12-lifebook main.layout{
  display:grid!important;

  grid-template-columns:
    minmax(0,1fr)!important;

  width:min(
    var(--mg124-r41-rail),
    calc(100% - (var(--mg124-r41-side) * 2))
  )!important;

  max-width:var(--mg124-r41-rail)!important;

  gap:18px!important;

  justify-content:center!important;
  align-items:start!important;

  margin-left:auto!important;
  margin-right:auto!important;
}


/* 기본정보 작성 패널 */
body.mg-v12-report main.layout > .form-card,
body.mg-v12-lifebook main.layout > .form-card{
  grid-column:1!important;

  width:100%!important;
  max-width:none!important;
  min-width:0!important;

  margin:0 auto!important;

  justify-self:stretch!important;

  box-sizing:border-box!important;

  order:2;
}


/* ============================================================
   05. 우측에 있던 구매요약 카드를
   전체폭의 가로형 프리미엄 요약바로 전환
============================================================ */

body.mg-v12-report .mg-v123-purchase-aside,
body.mg-v12-lifebook .mg-v123-purchase-aside{
  grid-column:1!important;
  grid-row:auto!important;

  order:1;

  width:100%!important;
  max-width:none!important;
  min-width:0!important;

  margin:0 auto!important;
  padding:18px 20px!important;

  position:static!important;
  top:auto!important;

  display:grid!important;

  grid-template-columns:
    minmax(150px,.75fr)
    minmax(120px,.55fr)
    minmax(300px,1.7fr)
    minmax(210px,.8fr)!important;

  grid-template-areas:
    "kicker price features action"
    "title  price features action"!important;

  column-gap:24px!important;
  row-gap:2px!important;

  align-items:center!important;

  border-radius:18px!important;

  box-sizing:border-box!important;
}


/* 타이틀 */
body.mg-v12-report .mg-v123-purchase-aside > small,
body.mg-v12-lifebook .mg-v123-purchase-aside > small{
  grid-area:kicker!important;

  margin:0!important;
}


/* 상품명 */
body.mg-v12-report .mg-v123-purchase-aside > h3,
body.mg-v12-lifebook .mg-v123-purchase-aside > h3{
  grid-area:title!important;

  margin:4px 0 0!important;
}


/* 가격 */
body.mg-v12-report .mg-v123-purchase-aside > strong,
body.mg-v12-lifebook .mg-v123-purchase-aside > strong{
  grid-area:price!important;

  margin:0!important;

  align-self:center!important;
}


/* 특징 */
body.mg-v12-report .mg-v123-purchase-aside > ul,
body.mg-v12-lifebook .mg-v123-purchase-aside > ul{
  grid-area:features!important;

  display:grid!important;

  grid-template-columns:
    repeat(3,minmax(0,1fr))!important;

  gap:8px!important;

  margin:0!important;
  padding:0!important;

  border:0!important;
}


/* 특징 한 줄 */
body.mg-v12-report .mg-v123-purchase-aside > ul > li,
body.mg-v12-lifebook .mg-v123-purchase-aside > ul > li{
  margin:0!important;

  padding:7px 4px 7px 17px!important;

  line-height:1.45!important;
}


/* 버튼 */
body.mg-v12-report .mg-v123-purchase-aside > button,
body.mg-v12-lifebook .mg-v123-purchase-aside > button{
  grid-area:action!important;

  width:100%!important;
  max-width:none!important;

  min-height:48px!important;

  margin:0!important;
}


/* ============================================================
   06. 입력 FORM 자체도 1180 레일을 꽉 사용
============================================================ */

body.mg-v12-report .mg-v12-form-card,
body.mg-v12-lifebook .mg-v12-form-card,
body.mg-v12-home .mg-v12-form-card,

body.mg-v12-report #birthForm,
body.mg-v12-lifebook #birthForm,
body.mg-v12-home #birthForm{
  width:100%!important;
  max-width:none!important;

  margin-left:auto!important;
  margin-right:auto!important;

  box-sizing:border-box!important;
}


/* 폼 안의 큰 블록도 가운데 */
body.mg-v12-report .mg-v12-form-card > *,
body.mg-v12-lifebook .mg-v12-form-card > *,
body.mg-v12-home .mg-v12-form-card > *{
  max-width:none!important;
}


/* ============================================================
   07. REPORT / LIFEBOOK 결과
   결 읽기/해석 결과도 폼과 정확히 동일 폭
============================================================ */

body.mg-v12-report main.layout > .report,
body.mg-v12-lifebook main.layout > .report{
  grid-column:1!important;

  order:3;

  width:100%!important;
  max-width:none!important;
  min-width:0!important;

  margin-left:auto!important;
  margin-right:auto!important;

  justify-self:stretch!important;

  box-sizing:border-box!important;
}


body.mg-v12-home .mg-v12-result-shell,
body.mg-v12-report .mg-v12-result-shell,
body.mg-v12-lifebook .mg-v12-result-shell,

body.mg-v12-home .mg-v12-result,
body.mg-v12-report .mg-v12-result,
body.mg-v12-lifebook .mg-v12-result{
  width:100%!important;
  max-width:none!important;

  margin-left:auto!important;
  margin-right:auto!important;

  box-sizing:border-box!important;
}


body.mg-v12-home .mg-v12-result-card,
body.mg-v12-report .mg-v12-result-card,
body.mg-v12-lifebook .mg-v12-result-card,

body.mg-v12-home .mg-v12-paybox,
body.mg-v12-report .mg-v12-paybox,
body.mg-v12-lifebook .mg-v12-paybox,

body.mg-v12-home .locked,
body.mg-v12-report .locked,
body.mg-v12-lifebook .locked,

body.mg-v12-home .classical-card,
body.mg-v12-report .classical-card,
body.mg-v12-lifebook .classical-card,

body.mg-v12-home .year-preview,
body.mg-v12-report .year-preview,
body.mg-v12-lifebook .year-preview{
  width:100%!important;
  max-width:none!important;

  margin-left:auto!important;
  margin-right:auto!important;

  box-sizing:border-box!important;
}


/* ============================================================
   08. LIFEBOOK
   "한 번 보는 운세가 아니라..." 박스를
   위 Hero와 정확히 같은 1180 폭으로
============================================================ */

body.mg-v12-lifebook #lifeBookPreview,
body.mg-v12-lifebook .mg-life-book,
body.mg-v12-lifebook .mg-v12-life-book{
  width:min(
    var(--mg124-r41-rail),
    calc(100% - (var(--mg124-r41-side) * 2))
  )!important;

  max-width:var(--mg124-r41-rail)!important;

  margin-left:auto!important;
  margin-right:auto!important;

  box-sizing:border-box!important;
}


/* 인생서 내부 2단 구조도 넉넉하게 */
body.mg-v12-lifebook .mg-life-book,
body.mg-v12-lifebook .mg-v12-life-book{
  grid-template-columns:
    minmax(300px,.82fr)
    minmax(0,1.38fr)!important;

  gap:54px!important;

  padding-left:46px!important;
  padding-right:46px!important;
}


/* 표지 */
body.mg-v12-lifebook .mg-book-cover,
body.mg-v12-lifebook .mg-v12-book-cover{
  width:100%!important;
  max-width:350px!important;

  margin-left:auto!important;
  margin-right:auto!important;
}


/* 오른쪽 글 영역 */
body.mg-v12-lifebook .mg-book-content,
body.mg-v12-lifebook .mg-v12-book-content{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}


/* 제목이 기존처럼 너무 좁아서
   "아 / 니라" 식으로 찢어지지 않게 */
body.mg-v12-lifebook .mg-book-content h2,
body.mg-v12-lifebook .mg-v12-book-content h2{
  width:100%!important;
  max-width:720px!important;

  font-size:clamp(34px,3.05vw,48px)!important;

  line-height:1.34!important;

  word-break:keep-all!important;
  overflow-wrap:normal!important;
}


/* 설명문 */
body.mg-v12-lifebook .mg-book-lead{
  width:100%!important;
  max-width:720px!important;

  word-break:keep-all!important;
}


/* 챕터도 우측 영역 전체 사용 */
body.mg-v12-lifebook .mg-chapters{
  width:100%!important;
  max-width:none!important;
}


/* ============================================================
   09. 상단 DETAIL HERO 역시 정확히 동일 레일
============================================================ */

body.mg-v12-report .mg-v12-detail-hero,
body.mg-v12-lifebook .mg-v12-detail-hero{
  width:min(
    var(--mg124-r41-rail),
    calc(100% - (var(--mg124-r41-side) * 2))
  )!important;

  max-width:var(--mg124-r41-rail)!important;

  margin-left:auto!important;
  margin-right:auto!important;
}


/* ============================================================
   10. TABLET
============================================================ */

@media(max-width:1000px){

  body.mg-v12-report .mg-v123-purchase-aside,
  body.mg-v12-lifebook .mg-v123-purchase-aside{
    grid-template-columns:
      minmax(150px,.8fr)
      minmax(110px,.55fr)
      minmax(0,1.4fr)!important;

    grid-template-areas:
      "kicker price features"
      "title  price features"
      "action action action"!important;

    gap:10px 18px!important;
  }

  body.mg-v12-report .mg-v123-purchase-aside > button,
  body.mg-v12-lifebook .mg-v123-purchase-aside > button{
    margin-top:8px!important;
  }

}


/* ============================================================
   11. MOBILE
============================================================ */

@media(max-width:760px){

  :root{
    --mg124-r41-mobile-side:12px;
  }

  body.mg-v12-home .hero,

  .mg-v12-products,
  .mg-v12-service-intro,
  .mg-v12-life-teaser,

  .mg-v12-detail-hero,

  body.mg-v12-home main.layout,
  body.mg-v12-report main.layout,
  body.mg-v12-lifebook main.layout,

  #lifeBookPreview,
  .mg-life-book,
  .mg-v12-life-book,
  .mg-v12-result-shell{

    width:calc(
      100% - (var(--mg124-r41-mobile-side) * 2)
    )!important;

    max-width:none!important;

    margin-left:auto!important;
    margin-right:auto!important;
  }


  /* 모바일은 한 줄 */
  body.mg-v12-home main.layout,
  body.mg-v12-report main.layout,
  body.mg-v12-lifebook main.layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
  }


  body.mg-v12-home main.layout > .form-card,
  body.mg-v12-home main.layout > .report,

  body.mg-v12-report main.layout > .form-card,
  body.mg-v12-report main.layout > .report,

  body.mg-v12-lifebook main.layout > .form-card,
  body.mg-v12-lifebook main.layout > .report{
    grid-column:1!important;

    width:100%!important;
    max-width:none!important;

    margin:0!important;
  }


  /* 모바일 구매요약은 중복 UI라 숨김 */
  body.mg-v12-report .mg-v123-purchase-aside,
  body.mg-v12-lifebook .mg-v123-purchase-aside{
    display:none!important;
  }


  /* 인생서 소개 */
  body.mg-v12-lifebook .mg-life-book,
  body.mg-v12-lifebook .mg-v12-life-book{
    grid-template-columns:1fr!important;

    gap:28px!important;

    padding:30px 18px!important;
  }


  body.mg-v12-lifebook .mg-book-cover,
  body.mg-v12-lifebook .mg-v12-book-cover{
    max-width:260px!important;
  }


  body.mg-v12-lifebook .mg-book-content h2,
  body.mg-v12-lifebook .mg-v12-book-content h2{
    max-width:none!important;

    font-size:clamp(28px,8vw,38px)!important;

    line-height:1.35!important;
  }


  /* 모바일 입력폼 */
  .mg-v12-form-card{
    width:100%!important;
    max-width:none!important;
  }

}


/* === MYEONGRIGYEOL V12.4 R4.1 UNIFIED RAIL END === */

/* === MYEONGRIGYEOL V12.4 R4.2 MOBILE HOME FIX START === */

/*
  R4.1에서 PC용 3열 product grid가 파일 후반부에 추가되면서
  기존 V12.3 모바일 1열 규칙을 덮어쓴 문제 수정.
*/

@media (max-width:760px){

  /* ---------------------------------------------------------
     상품 3개 = 모바일에서는 반드시 세로 1열
  --------------------------------------------------------- */
  body.mg-v12-home .mg-v12-products{
    width:calc(100% - 24px)!important;
    max-width:none!important;

    margin-left:auto!important;
    margin-right:auto!important;
    margin-bottom:34px!important;

    overflow:visible!important;
  }

  body.mg-v12-home .mg-v12-products .mg-product-grid{
    display:grid!important;

    grid-template-columns:minmax(0,1fr)!important;

    width:100%!important;
    max-width:100%!important;

    gap:10px!important;

    margin:0 auto!important;

    overflow:visible!important;
  }


  /* ---------------------------------------------------------
     각 상품카드
     왼쪽 이미지 + 오른쪽 정보 형태
  --------------------------------------------------------- */
  body.mg-v12-home .mg-v12-product-card{
    position:relative!important;

    display:block!important;

    width:100%!important;
    max-width:none!important;
    min-width:0!important;

    min-height:124px!important;

    margin:0!important;

    padding:
      15px
      15px
      15px
      128px!important;

    border-radius:14px!important;

    overflow:hidden!important;

    box-sizing:border-box!important;

    writing-mode:horizontal-tb!important;
  }


  /* ---------------------------------------------------------
     카드 이미지
  --------------------------------------------------------- */
  body.mg-v12-home .mg-v12-product-card .mg-v12-product-art{
    position:absolute!important;

    top:0!important;
    bottom:0!important;

    left:0!important;
    right:auto!important;

    width:114px!important;
    height:100%!important;

    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;

    opacity:1!important;
  }


  /* 이미지와 글 사이 그라데이션 */
  body.mg-v12-home .mg-v12-product-card::after{
    content:""!important;

    position:absolute!important;
    inset:0!important;

    pointer-events:none!important;

    background:
      linear-gradient(
        90deg,
        rgba(4,13,18,.05) 0%,
        rgba(4,13,18,.22) 20%,
        rgba(4,13,18,.91) 38%,
        rgba(4,13,18,.99) 60%,
        rgba(4,13,18,.99) 100%
      )!important;
  }


  /* ---------------------------------------------------------
     카드 내부 모든 텍스트
     세로 찢어짐 방지
  --------------------------------------------------------- */
  body.mg-v12-home .mg-v12-product-card > *:not(.mg-v12-product-art){
    position:relative!important;
    z-index:2!important;

    width:auto!important;
    max-width:100%!important;
    min-width:0!important;

    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;

    word-break:keep-all!important;
    overflow-wrap:break-word!important;

    white-space:normal!important;
  }


  body.mg-v12-home .mg-v12-product-card .mg-product-top{
    display:flex!important;

    align-items:center!important;
    justify-content:space-between!important;

    gap:8px!important;

    margin:0 0 5px!important;
  }


  body.mg-v12-home .mg-v12-product-card .mg-product-top span{
    font-size:7px!important;
    line-height:1.2!important;

    letter-spacing:1.5px!important;

    white-space:nowrap!important;
  }


  body.mg-v12-home .mg-v12-product-card .mg-product-top b{
    flex:0 0 auto!important;

    font-size:8px!important;

    padding:3px 6px!important;
  }


  body.mg-v12-home .mg-v12-product-card h3{
    display:block!important;

    width:100%!important;

    margin:0 0 4px!important;

    font-size:20px!important;
    line-height:1.2!important;

    letter-spacing:-.4px!important;

    word-break:keep-all!important;
  }


  body.mg-v12-home .mg-v12-product-card > p{
    width:100%!important;
    max-width:100%!important;

    margin:0!important;

    font-size:9px!important;
    line-height:1.5!important;

    color:rgba(225,230,229,.70)!important;

    word-break:keep-all!important;
  }


  /* 모바일에서는 상세 bullet 숨김 */
  body.mg-v12-home .mg-v12-product-card .mg-product-lines{
    display:none!important;
  }


  /* CTA는 하단 작은 텍스트 링크형 */
  body.mg-v12-home .mg-v12-product-card .mg-product-button{
    position:static!important;

    display:flex!important;

    width:auto!important;

    min-height:28px!important;

    margin:8px 0 0!important;

    padding:0!important;

    align-items:center!important;
    justify-content:flex-start!important;

    gap:7px!important;

    border:0!important;

    background:transparent!important;

    box-shadow:none!important;

    color:#dfbc7d!important;

    font-size:9px!important;
  }


  body.mg-v12-home .mg-v12-product-card .mg-product-button strong{
    font-size:9px!important;

    white-space:nowrap!important;
  }


  /* ---------------------------------------------------------
     HOME 전체 모바일 폭 통일
  --------------------------------------------------------- */
  body.mg-v12-home .hero,
  body.mg-v12-home .mg-v12-products,
  body.mg-v12-home .mg-v12-service-intro,
  body.mg-v12-home .mg-v12-life-teaser,
  body.mg-v12-home main.layout{
    width:calc(100% - 24px)!important;

    max-width:none!important;

    margin-left:auto!important;
    margin-right:auto!important;

    box-sizing:border-box!important;
  }


  /* 무료사주 입력/결과도 세로 1열 */
  body.mg-v12-home main.layout{
    display:grid!important;

    grid-template-columns:minmax(0,1fr)!important;

    gap:12px!important;
  }

  body.mg-v12-home main.layout > .form-card,
  body.mg-v12-home main.layout > .report{
    grid-column:1!important;

    width:100%!important;
    max-width:none!important;
    min-width:0!important;

    margin:0!important;

    justify-self:stretch!important;
  }

}


/* 더 작은 휴대폰 */
@media (max-width:390px){

  body.mg-v12-home .mg-v12-product-card{
    min-height:118px!important;

    padding-left:112px!important;
  }

  body.mg-v12-home .mg-v12-product-card .mg-v12-product-art{
    width:100px!important;
  }

  body.mg-v12-home .mg-v12-product-card h3{
    font-size:18px!important;
  }

}


/* === MYEONGRIGYEOL V12.4 R4.2 MOBILE HOME FIX END === */