@charset "UTF-8";
.sub_tt01 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8090d0;
}

.sub_arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  filter: none;
}

.con02.ocon02 {
  padding-bottom: 6.2vw; /* (2496-2378)/1915 — body 끝 → banner 사이, clarity_img bottom -3.5vw 여유 포함 */
}
.con02.ocon02 .con02_head {
  padding-top: 7.5vw;
  padding-bottom: 6.8vw;
}
.con02.ocon02 .head_desc {
  color: #282828;
}
.con02.ocon02 .con02_body {
  margin-top: 2vw;
}
.con02.ocon02 .con02_left {
  width: 50.3%; /* 963/1915 */
  height: 43.5vw; /* 834/1915 */
  background-color: #0e1220;
  background-image: url(/images/ocon02_02.png);
  background-size: cover;
  background-position: center;
}
.con02.ocon02 .con02_right {
  width: 42.5%;
  padding-top: 6.7vw;
}
.con02.ocon02 .right_eyebrow {
  color: #23284c;
}
.con02.ocon02 .right_desc {
  color: #282828;
}
.con02.ocon02 .right_desc b {
  font-weight: 800;
}
.con02.ocon02 .right_desc + .right_desc {
  margin-top: 1.2vw;
}

.ocon02_clarity_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 724); /* ocon02_03.png 원본 */
  aspect-ratio: 724/262;
  left: 0;
  bottom: -3.5vw;
}

.ocon02_banner {
  padding-top: 8.7vw;
  padding-bottom: 8.7vw;
  background-color: #131628;
  background-image: url(/images/ocon02_04.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.banner_tt01 {
  font-size: calc(var(--px) * 18);
  font-weight: 500;
  line-height: 1.61;
  letter-spacing: -0.025em;
  color: #fff;
  text-align: center;
  font-family: "Pretendard Variable", sans-serif;
}
.banner_tt01 b {
  font-weight: 800;
}

.gcon04.ocon03 {
  background-color: #212635;
  padding-top: 5.5vw; /* (2977-2871)/1915 */
  padding-bottom: 8.3vw; /* (4535-4376)/1915 + buffer */
}

.ocon03_kp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 227); /* ocon03_01.png 원본 */
  aspect-ratio: 227/29;
}

.ocon03_card01 .gcon04_card_row02 {
  padding-top: 9.8vw; /* (3281-3093)/1915 — text 우측, photo box 다음 위치 */
  padding-left: 3.9vw; /* (1033-959)/1915 → text row left 959 + 74 = 1033 */
}

.ocon03_card02 .gcon04_card_row02 {
  padding-top: 10vw; /* (3928-3736)/1915 — card02 top 3736 + 192 = 3928 */
  padding-left: 5.3vw; /* (281-179)/1915 → text 좌측 */
  order: 1;
}

.ocon03_card01 .gcon04_card_row01 {
  background-color: #131628;
  overflow: hidden;
}
.ocon03_card01 .gcon04_card_row01 > img {
  width: 100%;
}

.ocon03_card02 .gcon04_card_row01 {
  background-color: #000004;
  overflow: hidden;
  order: 2;
}
.ocon03_card02 .gcon04_card_row01 > img {
  width: 100%;
}

.ocon03_eye {
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #5a66a0;
  font-family: "cofo-raffine", sans-serif;
}

/* ocon03 desc — c4a_body 공통 + margin delta */
.ocon03_desc {
  margin-top: 3.1vw; /* (3469-3402)/1915 — title bottom → desc */
}

.gcon05.ocon04 .gcon05_num {
  color: #5a66a0;
}

.gcon07.ocon05 {
  background: #f5f7fe;
  padding-top: 5.7vw;
  padding-bottom: 6vw;
}
.gcon07.ocon05 .gcon07_eyebrow {
  color: #5a66a0;
}
.gcon07.ocon05 .gcon07_num {
  color: #5a66a0;
}

@media (max-width: 599px) {
  /* ----- ocon02 — 미라젯 소개 ----- */
  .con02.ocon02 {
    padding-bottom: 14vw;
  }
  .con02.ocon02 .con02_head {
    padding-top: 16vw;
    padding-bottom: 14vw;
  }
  .con02.ocon02 .head_title {
    font-size: 5.5vw;
    line-height: 1.4;
  }
  .con02.ocon02 .head_desc {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 1.65;
    padding: 0 6%;
    box-sizing: border-box;
  }
  .con02.ocon02 .con02_body {
    flex-direction: column;
    align-items: center;
    margin-top: 0;
  }
  .con02.ocon02 .con02_left {
    width: 100%;
    height: 86.6vw;
  }
  .con02.ocon02 .con02_right {
    width: 100%;
    align-items: center;
    text-align: center;
    padding: 12vw 6% 0;
    box-sizing: border-box;
  }
  .con02.ocon02 .right_eyebrow {
    font-size: 3.5vw;
    line-height: 1.5;
    text-align: center;
  }
  .con02.ocon02 .right_title {
    margin-top: 3vw;
    font-size: 6.5vw;
    line-height: 1.3;
  }
  .con02.ocon02 .right_desc {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 1.65;
    text-align: center;
  }
  .con02.ocon02 .right_desc + .right_desc {
    margin-top: 3vw;
  }
  /* Mirajet 큰 영문 deco — PC absol → 모바일 자연 흐름 + 가운데 */
  .ocon02_clarity_img {
    position: static;
    width: 90vw;
    margin-top: 6vw;
    bottom: auto;
    left: auto;
  }
  /* br.mobile-pc 전역 override */
  br.mobile-pc {
    display: block;
  }
  /* ----- ocon02_banner — 다크 배너 ----- */
  .ocon02_banner {
    padding-top: 14vw;
    padding-bottom: 14vw;
  }
  .banner_tt01 {
    font-size: 3.3vw;
    line-height: 1.65;
    padding: 0 6%;
    box-sizing: border-box;
  }
  /* ----- ocon03 — Mirajet Key point (gcon04 + 2카드 지그재그) ----- */
  .gcon04.ocon03 {
    padding-top: 14vw;
    padding-bottom: 14vw;
  }
  .ocon03_kp {
    width: 42vw;
    aspect-ratio: 227/29;
  }
  /* Card01 photo 좌/text 우 → 세로 스택 (HTML 순서 그대로) */
  .ocon03_card01 {
    flex-direction: column;
    align-items: stretch;
  }
  /* Card02 text 좌/photo 우 → 사진 위 텍스트 아래 (zigzag 풀어서 일관성) */
  .ocon03_card02 {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  /* 모든 카드 row width 100% */
  .ocon03_card .gcon04_card_row {
    width: 100%;
  }
  .ocon03_card01 .gcon04_card_row02,
  .ocon03_card02 .gcon04_card_row02 {
    width: 100%;
    padding: 8vw 6%;
    box-sizing: border-box;
    align-items: center;
    text-align: center;
  }
  /* eyebrow / title / desc 모바일 사이즈 */
  .ocon03_eye {
    font-size: 3.5vw;
  }
  .ocon03_title {
    margin-top: 3vw;
  }
  .ocon03_desc {
    margin-top: 4vw;
  }
  /* ----- ocon04 — 추천대상 모바일 순서 재배치 -----
     PC 는 2-col 이라 DOM 이 01/04 → 02/05 → 03/06 순서. 그대로 stack 하면 모바일에서 01·04·02·05·03·06 으로 나옴.
     row 래퍼를 display:contents 로 펼친 뒤 item 별 order 지정 → 모바일 01→02→03→04→05→06 */
  .ocon04 .gcon05_row,
  .ocon04 .gcon05_row_2 {
    display: contents;
  }
  .ocon04 .gcon05_item:has(.gcon05_num_01) {
    order: 1;
  }
  .ocon04 .gcon05_item:has(.gcon05_num_02) {
    order: 2;
  }
  .ocon04 .gcon05_item:has(.gcon05_num_03) {
    order: 3;
  }
  .ocon04 .gcon05_item:has(.gcon05_num_04) {
    order: 4;
  }
  .ocon04 .gcon05_item:has(.gcon05_num_05) {
    order: 5;
  }
  .ocon04 .gcon05_item:has(.gcon05_num_06) {
    order: 6;
  }
  /* ----- ocon05 — 시술 후 주의사항 (공통 gcon07 PC override 재지정) ----- */
  .ocon05 .gcon07_text {
    white-space: normal;
  }
}