/* ==================================================
   WHY A MIDDLE DOOR
   Editorial Catalog Layout
================================================== */

.why-middle-door-editorial {
  box-sizing: border-box !important;

  background: #F5F6F6 !important;

  overflow: visible !important;
}

/* --------------------------------------------------
   전체 레이아웃
-------------------------------------------------- */

.why-middle-door-layout {
  box-sizing: border-box;

  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(330px, 0.78fr)
    minmax(0, 2fr);

  column-gap: clamp(70px, 6vw, 130px);

  align-items: start;

  padding:
    clamp(65px, 7vh, 100px)
    clamp(60px, 5vw, 100px);
}

/* ==================================================
   왼쪽 타이틀
================================================== */

.why-middle-door-intro {
  min-width: 0;

  padding-top: 8px;
}

.why-middle-door-intro .kicker {
  margin: 0 0 28px;

  color: #8a6d55;

  font-size: 11px;
  font-weight: 600;

  line-height: 1;

  letter-spacing: 2.4px;

  text-transform: uppercase;
}

.why-middle-door-intro h2 {
  max-width: 480px;

  margin: 0;

  color: #222;

  font-size: clamp(52px, 5vw, 78px);
  font-weight: 400;

  line-height: 1.04;

  letter-spacing: -3.5px;

  word-break: keep-all;
}

/* ==================================================
   오른쪽 6개 항목
================================================== */

.why-middle-door-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap: clamp(58px, 5vw, 100px);
  row-gap: clamp(58px, 7vh, 88px);

  width: 100%;
}

/* 기존 표 스타일 제거 */
.why-middle-door-item {
  position: relative;

  min-width: 0;

  margin: 0 !important;
  padding: 38px 0 0 !important;

  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;

  outline: 0 !important;
  box-shadow: none !important;

  background: transparent !important;
}

/* 짧은 포인트 라인 */
.why-middle-door-item::before {
  content: '';

  position: absolute;

  top: 0;
  left: 0;

  width: 28px;
  height: 1px;

  background: #8a6d55;
}

/* 번호 */
.why-middle-door-number {
  display: block;

  margin: 0 0 24px;

  color: #8a6d55;

  font-size: 12px;
  font-weight: 600;

  line-height: 1;

  letter-spacing: 1.5px;
}

/* 제목 */
.why-middle-door-item h3 {
  max-width: 440px;

  margin: 0 0 15px;

  color: #222;

  font-size: 20px;
  font-weight: 600;

  line-height: 1.45;

  letter-spacing: -0.45px;

  word-break: keep-all;
}

/* 본문 16px 통일 */
.why-middle-door-item p {
  max-width: 500px;

  margin: 0;

  color: #707070;

  font-size: 16px !important;
  font-weight: 400;

  line-height: 1.75 !important;

  letter-spacing: -0.15px;

  word-break: keep-all;
}

/* 모든 불필요한 가상선 제거 */
.why-middle-door-grid::before,
.why-middle-door-grid::after,
.why-middle-door-item::after {
  display: none !important;
  content: none !important;
}

/* ==================================================
   이 정보 페이지 안의 본문 16px 기준
================================================== */

.why-middle-door-editorial p:not(.kicker) {
  font-size: 16px !important;
}

/* ==================================================
   태블릿
================================================== */

@media (min-width: 768px) and (max-width: 1099px) {
  .why-middle-door-layout {
    grid-template-columns:
      300px
      minmax(0, 1fr);

    column-gap: 48px;

    padding:
      60px
      36px;
  }

  .why-middle-door-grid {
    column-gap: 40px;
    row-gap: 60px;
  }

  .why-middle-door-item h3 {
    font-size: 19px;
  }
}

/* ==================================================
   모바일
================================================== */

@media (max-width: 767px) {
  .why-middle-door-layout {
    display: block;

    padding:
      48px
      20px;
  }

  .why-middle-door-intro {
    margin-bottom: 64px;
  }

  .why-middle-door-intro h2 {
    max-width: none;

    font-size: 48px;

    line-height: 1.06;
  }

  .why-middle-door-grid {
    grid-template-columns: 1fr;

    row-gap: 52px;
  }

  .why-middle-door-item {
    padding-top: 28px !important;
  }

  .why-middle-door-item h3 {
    font-size: 20px;
  }

  .why-middle-door-item p {
    font-size: 16px !important;
  }
}
/* WHY_TITLE_SINGLE_LINE_20260906 */
.why-middle-door-item h3 {
    white-space: nowrap !important;
    word-break: keep-all !important;
}
/* WHY_MIDDLE_DOOR_CLEAN_3LINE_20260906 */

/* 항목 상단 리드 라인 삭제 */
.why-middle-door-item::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* 설명문은 지정한 <br> 기준 정확히 3줄 */
@media (min-width: 1100px) {
    .why-middle-door-item p {
        max-width: none !important;
        white-space: nowrap !important;
    }
}

/* WHY_MIDDLE_DOOR_ICON_SET_20260906_START */

/* 리드 라인 제거 */
.why-middle-door-item::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* 아이콘 */
.why-middle-door-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 34px;
  height: 34px;
  margin: 0 0 18px;
  color: #8a6d55;
}

.why-middle-door-icon svg {
  display: block;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* 타이틀 */
.why-middle-door-item h3 {
  white-space: nowrap !important;
  word-break: keep-all !important;
  margin-bottom: 16px !important;
}

/* 본문 */
.why-middle-door-item p {
  max-width: none !important;
  line-height: 1.75 !important;
}

@media (min-width: 1100px) {
  .why-middle-door-item p {
    white-space: nowrap !important;
  }
}

/* 모바일에서는 자연스럽게 */
@media (max-width: 767px) {
  .why-middle-door-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 14px;
  }

  .why-middle-door-icon svg {
    width: 30px;
    height: 30px;
  }

  .why-middle-door-item h3,
  .why-middle-door-item p {
    white-space: normal !important;
  }
}

/* WHY_MIDDLE_DOOR_ICON_SET_20260906_END */

/* WHY_MIDDLE_DOOR_PNG_ICONS_20260906_START */

/* 상단 리드 라인 제거 */
.why-middle-door-item::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* 아이템 상단 여백 정리 */
.why-middle-door-item {
  padding-top: 0 !important;
}

/* 번호 */
.why-middle-door-number {
  margin: 0 0 16px !important;
}

/* PNG 아이콘 영역 */
.why-middle-door-icon {
  width: 38px;
  height: 38px;
  margin: 0 0 18px;
}

.why-middle-door-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 타이틀 1줄 */
.why-middle-door-item h3 {
  white-space: nowrap !important;
  word-break: keep-all !important;
  margin: 0 0 14px !important;
}

/* 본문 3줄 */
.why-middle-door-item p {
  max-width: none !important;
  line-height: 1.75 !important;
}

@media (min-width: 1100px) {
  .why-middle-door-item p {
    white-space: nowrap !important;
  }
}

/* 모바일에서는 자연스럽게 */
@media (max-width: 767px) {
  .why-middle-door-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
  }

  .why-middle-door-item h3,
  .why-middle-door-item p {
    white-space: normal !important;
  }
}

/* WHY_MIDDLE_DOOR_PNG_ICONS_20260906_END */