/* 투명교정 전용 레이어. 공통 fg2 레이어 위에 얹고 공통 파일은 건드리지 않는다. */

.oc {
  --oc-mint: #74d5ca;
  --oc-line: #e4e4e4;
  --oc-line-soft: #dedede;
  --oc-ink: #0a0a0a;
  --oc-body: #333333;
  --oc-muted: #6b6b6b;
  --oc-white: #ffffff;
  --oc-gray: #f5f5f5;
}

/* ── 섹션 바탕 ─────────────────────────── */
.oc-sec { background: var(--oc-white); }
.oc-sec--gray { background: var(--oc-gray); }

.oc-sec--def { padding: 170px 0 170px; }
.oc-sec--char { padding: 140px 0 140px; }
.oc-sec--spec { padding: 130px 0 136px; }
.oc-sec--str { padding: 140px 0 140px; }
.oc-sec--sys { padding: 170px 0 170px; }
.oc-sec--shoot { padding: 170px 0 170px; }
.oc-sec--clinic { padding: 170px 0 277px; }

/* ── 섹션 머리(라벨 + 제목 + 리드) ───────── */
.oc-head { display: flex; flex-direction: column; gap: 16px; }
.oc-head__label {
  margin: 0;
  font-size: 12px;
  line-height: 14.32px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--oc-muted);
}
.oc-head__body { display: flex; flex-direction: column; gap: 5px; }
.oc-head__title {
  margin: 0;
  font-size: 40px;
  line-height: 52px;
  font-weight: 600 !important;
  letter-spacing: -0.6px;
  color: var(--oc-ink);
}
.oc-head__lead {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: -0.27px;
  color: var(--oc-body);
}

/* ── 정의 섹션 ─────────────────────────── */
.fg2 .oc-note {
  margin-top: 66px !important;
  width: fit-content;
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.255px;
  color: var(--oc-ink);
}
.oc-brands {
  margin: 20px 0 0;
  display: flex;
  gap: 16px;
  align-items: center;
}
.oc-brands__item {
  flex: 1 1 0;
  min-width: 0;
  height: 135px;
  display: block;
  object-fit: contain;
  object-position: 50% 50%;
  border: 1px solid var(--oc-line-soft);
  background: var(--oc-white);
}

/* ── 특징 카드 3열 ─────────────────────── */
.oc-cards3 {
  margin: 60px 0 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.oc-card {
  flex: 1 1 0;
  min-width: 0;
  padding: 30px;
  height: 122px;
  display: flex;
  flex-direction: column;
  background: var(--oc-white);
  border: 1px solid var(--oc-line);
}
.oc-card__title {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.255px;
  color: var(--oc-ink);
}
.oc-figure {
  display: block;
  width: 100%;
  margin: 20px 0 0;
  object-fit: cover;
}
.oc-figure--char { height: 264px; object-position: 50% 33.84%; }
.oc-figure--spec { height: 250px; margin: 60px 0 0; object-position: 50% 40.28%; }

/* ── 특별함 카드(테두리만) ───────────────── */
.oc-speclist {
  margin: 30px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.oc-specrow { display: flex; gap: 14px; align-items: flex-start; }
.oc-specitem {
  flex: 1 1 0;
  min-width: 0;
  padding: 30px;
  height: 92px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--oc-line);
}
.oc-specitem--wide { width: 100%; }
.oc-specitem__text {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.255px;
  color: var(--oc-ink);
}

/* ── 장점 카드(사진 + 제목 + 설명) ───────── */
.oc-merits {
  margin: 70px 0 0;
  display: flex;
  gap: 20px;
  align-items: center;
}
.oc-merits--center { width: fit-content; margin: 60px auto 0; }
.oc-merit {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.oc-merits--center .oc-merit { flex: 0 0 387px; width: 387px; }
.oc-merit__photo {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: 50% 50%;
  background: rgba(0, 0, 0, 0.06);
}
.oc-merit__body { display: flex; flex-direction: column; }
.oc-merit__title {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.255px;
  color: var(--oc-ink);
}
.oc-merit__desc {
  margin: 0;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--oc-muted);
}

/* ── 장비 2열 ──────────────────────────── */
.oc-devices {
  margin: 90px 0 0;
  display: flex;
  gap: 28px;
  align-items: center;
}
.oc-devices--top { align-items: flex-start; }
.oc-device {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.oc-device__photo {
  display: block;
  width: 100%;
  height: 470px;
  object-fit: cover;
  object-position: 50% 50%;
  border: 1px solid var(--oc-line-soft);
  background: rgba(0, 0, 0, 0.06);
}
.oc-device__body { display: flex; flex-direction: column; gap: 10px; }
.oc-device__body--tall { min-height: 154px; }
.oc-device__name {
  margin: 0;
  width: 310px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.255px;
  color: var(--oc-ink);
}
.oc-device__text { display: flex; flex-direction: column; }
.oc-device__sub {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.255px;
  color: var(--oc-ink);
}
.oc-device__desc {
  margin: 0;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--oc-muted);
}
.oc-device__desc--narrow { width: 351px; }

/* 장비 태그 칩 */
.oc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  align-content: center;
  height: 102px;
}
.oc-chips--top { align-content: flex-start; }
.oc-chip {
  margin: 0;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--oc-ink);
  background: var(--oc-white);
  border: 1px solid var(--oc-line);
}
.oc-chip--narrow { padding: 10px 14px; }

/* ── 병원 특별함 4열(가로 스크롤) ────────── */
.oc-clinic__scroll {
  margin: 60px 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.oc-clinic {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 1200px;
}
.oc-point {
  flex: 0 0 590px;
  width: 590px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.oc-point__photo {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: 50% 50%;
  background: rgba(0, 0, 0, 0.06);
}
.oc-point__body { display: flex; flex-direction: column; }
.oc-point__title {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.255px;
  color: var(--oc-ink);
}
.oc-point__desc {
  margin: 0;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--oc-muted);
}

/* ── 좁은 화면 ─────────────────────────── */
@media (max-width: 1023px) {
  .oc-sec--def,
  .oc-sec--char,
  .oc-sec--spec,
  .oc-sec--str,
  .oc-sec--sys,
  .oc-sec--shoot,
  .oc-sec--clinic { padding: 64px 0; }

  .oc-head { gap: 10px; }
  .oc-head__title { font-size: 26px; line-height: 36px; }
  .oc-head__lead { font-size: 15px; line-height: 26px; }

  .oc-note { margin: 32px 0 0; width: auto; font-size: 16px; }
  .oc-brands { margin: 16px 0 0; flex-wrap: wrap; }
  .oc-brands__item { flex: 1 1 140px; height: 84px; }

  .oc-cards3,
  .oc-merits,
  .oc-devices,
  .oc-specrow { flex-direction: column; align-items: stretch; }
  .oc-cards3 { margin: 32px 0 0; }
  .oc-card { height: auto; padding: 22px; }
  .oc-merits { margin: 36px 0 0; }
  .oc-merits--center { width: auto; margin: 36px 0 0; }
  .oc-merits--center .oc-merit { flex: 1 1 auto; width: auto; }
  .oc-device__body--tall { min-height: 0; }
  .oc-merit__photo { height: 220px; }
  .oc-devices { margin: 40px 0 0; gap: 40px; }
  .oc-device { gap: 22px; }
  .oc-device__photo { height: 240px; }
  .oc-device__name { width: auto; font-size: 20px; }
  .oc-device__sub { font-size: 16px; }
  .oc-device__desc,
  .oc-merit__desc,
  .oc-point__desc { font-size: 15px; line-height: 26px; }
  .oc-device__desc--narrow { width: auto; }
  .oc-chips { height: auto; }

  .oc-specitem { height: auto; padding: 22px; }
  .oc-specitem__text { font-size: 16px; }

  .oc-figure--char { height: 180px; margin: 24px 0 0; }
  .oc-figure--spec { height: 180px; margin: 32px 0 0; }

  .oc-clinic__scroll { margin: 36px 0 0; }
  .oc-clinic { width: max-content; gap: 14px; }
  .oc-point { flex: 0 0 82vw; width: 82vw; gap: 14px; }
  .oc-point__photo { height: 200px; }
}