/* ==========================================================
   SEOHEUNG DOOR COLLECTION
   FINAL OVERRIDE
   ========================================================== */

:root {
    --brand-orange: #FD8505;

    --text-main: #222222;
    --text-sub: #666666;

    --line-light: #D6D6D6;

    --page-bg: #F5F5F5;

    --contents-label: #999999;
    --contents-copy: #DDDDDD;
}


/* ==========================================================
   PRODUCT DETAIL
   ========================================================== */

/* 제품 상단 영문 */
.fx-product-eyebrow,
.fx-product-eyebrow * {
    color: #222222 !important;
}

/* 제품 제목 */
.fx-product-title,
.fx-product-title * {
    color: #222222 !important;
}

/* 제품 설명 */
.fx-product-description,
.fx-product-description * {
    color: #222222 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
}

/* 사양 행 */
.fx-spec-row {
    display: grid !important;

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

    column-gap: 14px !important;

    min-height: 50px !important;

    align-items: center !important;

    padding-top: 10px !important;
    padding-bottom: 10px !important;

    box-sizing: border-box !important;

    color: #222222 !important;
}

/* 왼쪽:
   TYPE
   POINT
   SPACE
   VARIANT
   문틀 측면 등
*/
.fx-spec-label,
.fx-spec-label * {
    color: #222222 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1.45 !important;

    align-self: center !important;
}

/* 오른쪽 내용 */
.fx-spec-value,
.fx-spec-value *,
.fx-spec-value strong,
.fx-spec-value b {
    color: #222222 !important;

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

    line-height: 1.55 !important;

    align-self: center !important;

    margin: 0 !important;
}

/*
   기존 orange-theme.css 등의
   오렌지 텍스트 강제 규칙을 무력화
*/
.fx-product-eyebrow,
.fx-product-title,
.fx-product-description,
.fx-spec-label,
.fx-spec-value {
    --accent: #222222 !important;
    --point: #222222 !important;
    --primary: #222222 !important;
}


/* ==========================================================
   CHAPTER HERO
   사진 위 텍스트
   ========================================================== */

.fx-chapter .fx-chapter-eyebrow,
.fx-chapter .fx-chapter-eyebrow *,
.fx-chapter .fx-chapter-title,
.fx-chapter .fx-chapter-title *,
.fx-chapter .fx-chapter-scroll,
.fx-chapter .fx-chapter-scroll * {
    color: #FFFFFF !important;
}


/* ==========================================================
   WHY A MIDDLE DOOR
   짧은 리드선 제거
   ========================================================== */

.fx-why-leader {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    border: 0 !important;

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


/* pseudo element로 만든 리드선도 제거 */
.fx-why-card::before,
.fx-why-card::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   CONTENTS
   ========================================================== */

.fx-contents-label,
.fx-contents-label * {
    color: #999999 !important;
}

/* CONTENTS */
.fx-contents-title,
.fx-contents-title * {
    color: #FFFFFF !important;
}

/* CONTENTS 제목에 붙은 라인은 제거 */
.fx-contents-title {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.fx-contents-title::before,
.fx-contents-title::after {
    content: none !important;
    display: none !important;
}

/* CONTENTS 아래 설명 */
.fx-contents-copy,
.fx-contents-copy * {
    color: #DDDDDD !important;
}

/* 제목 바로 밑 쓸데없는 라인 */
.fx-contents-title-line {
    display: none !important;
}

/*
   설명 아래,
   01 리스트 시작 위치의 긴 라인은 유지
*/
.fx-contents-first-row {
    border-top: 1px solid #444444 !important;
}


/* CONTENTS 항목 */
.fx-contents-row {
    border-bottom-color: #333333 !important;
}


/* ==========================================================
   PATTERN PAGE
   27 / 28 / 29
   다른 밝은 페이지와 같은 배경
   ========================================================== */

.fx-pattern-page {
    background: #F5F5F5 !important;
}

.fx-pattern-page .fx-product-eyebrow,
.fx-pattern-page .fx-product-title,
.fx-pattern-page .fx-product-description {
    color: #222222 !important;
}


/* ==========================================================
   PAGE 30
   오렌지 페이지

   오렌지 배경이면 텍스트는 WHITE
   ========================================================== */

.fx-orange-page,
.fx-orange-page * {
    color: #FFFFFF !important;
}

.fx-orange-page {
    background-color: #FD8505 !important;
}

/* 하단 선도 흰색 계열 */
.fx-orange-page hr {
    border-color: rgba(255,255,255,.35) !important;
}


/* ==========================================================
   기존의 무분별한 오렌지 텍스트 덮어쓰기 방지
   ========================================================== */

.fx-product-eyebrow[class],
.fx-spec-label[class] {
    color: #222222 !important;
}


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

@media (max-width: 768px) {

    .fx-product-description,
    .fx-product-description * {
        font-size: 16px !important;
    }

    .fx-spec-row {
        grid-template-columns:
            72px
            minmax(0, 1fr) !important;

        min-height: 50px !important;

        column-gap: 12px !important;

        align-items: center !important;

        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .fx-spec-label,
    .fx-spec-label *,
    .fx-spec-value,
    .fx-spec-value * {
        font-size: 14px !important;
    }
}

/* ==========================================================
   LAST PAGE BACKGROUND FIX
   바깥 전체 배경 #222
   내부 오렌지 콘텐츠는 기존 유지
   ========================================================== */

.fx-orange-page {
    background: #222222 !important;
    background-color: #222222 !important;
}


/* ==========================================================
   CATALOG BACKGROUND FINAL FIX
   ========================================================== */


/* ----------------------------------------------------------
   27 / 28 / 29 PATTERN PAGE

   밤색 / 베이지 배경 제거
   전체 배경 #F5F6F5
   ---------------------------------------------------------- */

.fx-pattern-page {
    background: #F5F6F5 !important;
    background-color: #F5F6F5 !important;
}


/* 패턴 페이지의 상위/주변 배경까지 동일하게 */
body:has(.fx-pattern-page),
main:has(.fx-pattern-page) {
    background-color: #F5F6F5 !important;
}


/* 패턴 페이지 안의 텍스트 영역도 같은 배경 */
.fx-pattern-page > div,
.fx-pattern-page > section {
    background-color: #F5F6F5 !important;
}


/* 단, 실제 패턴 이미지 자체는 건드리지 않음 */
.fx-pattern-page img {
    background-color: transparent !important;
}


/* 패턴 텍스트 */
.fx-pattern-page .fx-product-eyebrow,
.fx-pattern-page .fx-product-eyebrow *,
.fx-pattern-page .fx-product-title,
.fx-pattern-page .fx-product-title *,
.fx-pattern-page .fx-product-description,
.fx-pattern-page .fx-product-description * {
    color: #222222 !important;
}


/* ----------------------------------------------------------
   LAST PAGE

   밤색 제거
   오렌지 제거
   전체 #222 통일
   ---------------------------------------------------------- */

.fx-orange-page {
    background: #222222 !important;
    background-color: #222222 !important;
}


/*
   마지막 페이지 내부에서 기존 오렌지/밤색 배경을
   가지고 있던 컨테이너도 #222로 통일
*/
.fx-orange-page > div,
.fx-orange-page > section,
.fx-orange-page > article {
    background: #222222 !important;
    background-color: #222222 !important;
}


/* 마지막 페이지 텍스트 전체 WHITE */
.fx-orange-page,
.fx-orange-page p,
.fx-orange-page span,
.fx-orange-page h1,
.fx-orange-page h2,
.fx-orange-page h3,
.fx-orange-page h4,
.fx-orange-page strong,
.fx-orange-page b,
.fx-orange-page a {
    color: #FFFFFF !important;
}


/* 하단 구분선 */
.fx-orange-page hr {
    border-color: rgba(255,255,255,.30) !important;
}


/* 하단 메뉴의 선 */
.fx-orange-page [class*="border"] {
    border-color: rgba(255,255,255,.25) !important;
}


/* ----------------------------------------------------------
   모바일에서도 동일
   ---------------------------------------------------------- */

@media (max-width: 768px) {

    .fx-pattern-page {
        background: #F5F6F5 !important;
        background-color: #F5F6F5 !important;
    }

    .fx-orange-page {
        background: #222222 !important;
        background-color: #222222 !important;
    }
}


/* WHY_ICON_90_FINAL_START */

.why-middle-door-icon {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    min-height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
    margin: 0 0 20px !important;
}

.why-middle-door-icon img {
    display: block !important;
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    min-height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
    object-fit: contain !important;
}

/* WHY_ICON_90_FINAL_END */

/* WHY_ICON_VISUAL_BALANCE_START */

/* 아이콘 박스는 모두 동일 */
.why-middle-door-icon {
    width: 90px !important;
    height: 90px !important;

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

    overflow: visible !important;
}

/* 기본 이미지 */
.why-middle-door-icon img {
    width: 90px !important;
    height: 90px !important;

    object-fit: contain !important;

    transform-origin: center center !important;
}

/* 실제 그림 면적 기준 시각적 크기 보정 */

/* 01 쾌적한 실내 환경 */
.why-middle-door-item:nth-child(1) .why-middle-door-icon img {
    transform: scale(1.20) !important;
}

/* 02 냉·난방 효율 */
.why-middle-door-item:nth-child(2) .why-middle-door-icon img {
    transform: scale(1.18) !important;
}

/* 03 깔끔한 현관분위기 */
.why-middle-door-item:nth-child(3) .why-middle-door-icon img {
    transform: scale(0.98) !important;
}

/* 04 사생활 보호 */
.why-middle-door-item:nth-child(4) .why-middle-door-icon img {
    transform: scale(0.96) !important;
}

/* 05 생활의 편리함 */
.why-middle-door-item:nth-child(5) .why-middle-door-icon img {
    transform: scale(1.07) !important;
}

/* 06 효율적인 공간 분리 */
.why-middle-door-item:nth-child(6) .why-middle-door-icon img {
    transform: scale(0.98) !important;
}

/* WHY_ICON_VISUAL_BALANCE_END */

/* WHY_ICON_ASSET_FINAL_START */

.why-middle-door-icon {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    min-height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;

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

    margin: 0 0 22px !important;
    overflow: visible !important;
}

.why-middle-door-icon img {
    display: block !important;
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    min-height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;

    object-fit: contain !important;
    transform: none !important;
    background: transparent !important;
}

.why-middle-door-item:nth-child(1) .why-middle-door-icon img,
.why-middle-door-item:nth-child(2) .why-middle-door-icon img,
.why-middle-door-item:nth-child(3) .why-middle-door-icon img,
.why-middle-door-item:nth-child(4) .why-middle-door-icon img,
.why-middle-door-item:nth-child(5) .why-middle-door-icon img,
.why-middle-door-item:nth-child(6) .why-middle-door-icon img {
    transform: none !important;
}

@media (max-width: 767px) {
    .why-middle-door-icon,
    .why-middle-door-icon img {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
    }
}

/* WHY_ICON_ASSET_FINAL_END */

/* WHY_ICON_IMAGE_FINAL_START */

.why-middle-door-icon {
    width: 90px !important;
    height: 90px !important;

    min-width: 90px !important;
    min-height: 90px !important;

    max-width: 90px !important;
    max-height: 90px !important;

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

    margin: 0 0 22px !important;

    overflow: visible !important;
}

.why-middle-door-icon img {
    display: block !important;

    width: 90px !important;
    height: 90px !important;

    min-width: 90px !important;
    min-height: 90px !important;

    max-width: 90px !important;
    max-height: 90px !important;

    object-fit: contain !important;

    transform: none !important;
    background: transparent !important;
}

/* 이전 개별 확대/축소 전부 무효화 */
.why-middle-door-item:nth-child(1) .why-middle-door-icon img,
.why-middle-door-item:nth-child(2) .why-middle-door-icon img,
.why-middle-door-item:nth-child(3) .why-middle-door-icon img,
.why-middle-door-item:nth-child(4) .why-middle-door-icon img,
.why-middle-door-item:nth-child(5) .why-middle-door-icon img,
.why-middle-door-item:nth-child(6) .why-middle-door-icon img {
    transform: none !important;
}

/* WHY_ICON_IMAGE_FINAL_END */

/* PRODUCT_LABEL_COLOR_777_START */

/* ==========================================================
   PRODUCT DETAIL LABEL COLOR
   TYPE / POINT / SPACE / VARIANT
   문틀 / 문짝 치수 라벨
   전체 #777 통일
   ========================================================== */

/* 기본 제품 상세 */
.product-page .product-facts li > span,
.product-page .specs li > span {
    color: #777777 !important;
}

/* JS 최종 재구성 제품 상세 */
.fx-spec-label,
.fx-spec-label *,
.fx-spec-label[class] {
    color: #777777 !important;
}

/* Variant gallery */
.seoheung-variant-copy .product-facts li > span {
    color: #777777 !important;
}

/* Variant split */
.variant-split-facts span {
    color: #777777 !important;
}

/* 기존 accent 변수의 브라운/오렌지 영향 제거 */
.product-page .product-facts li > span,
.product-page .specs li > span,
.fx-spec-label,
.seoheung-variant-copy .product-facts li > span,
.variant-split-facts span {
    --accent: #777777 !important;
    --point: #777777 !important;
    --primary: #777777 !important;

    font-weight: 400 !important;
}

/* PRODUCT_LABEL_COLOR_777_END */


/* CLOSING_SECTION_AND_QUICKNAV_REMOVE_START */
/* 마지막 검정 섹션 전체 삭제 */
#pEnd,
.closing-page,
.page.closing-page {
  display: none !important;
}

/* 우측 하단 이전/다음/인덱스 퀵네비 삭제 */
.quick-nav,
#prevPage,
#nextPage,
#indexButton {
  display: none !important;
}
/* CLOSING_SECTION_AND_QUICKNAV_REMOVE_END */


/* PATTERN_IMAGE_BLEND_AND_SIZE_FIX_START */
/* ----------------------------------------------------------
   패턴 페이지 일러스트 보정
   - 흰 배경 multiply 처리
   - 가로 폭 통일
   - 1번(원슬라이딩)만 약간 더 넓게
---------------------------------------------------------- */

/* 패턴 이미지 영역 정렬 */
#p30 .pattern-img,
#p31 .pattern-img,
#p32 .pattern-img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  overflow: visible !important;
}

/* 공통 이미지 처리 */
#p30 .pattern-img img,
#p31 .pattern-img img,
#p32 .pattern-img img {
  display: block !important;
  width: min(100%, 980px) !important;
  max-width: min(100%, 980px) !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  mix-blend-mode: multiply !important;
  isolation: isolate !important;
  margin: 0 auto !important;
}

/* 1번 원슬라이딩 패턴만 가로폭을 조금 더 넓혀서 시각적으로 통일 */
#p30 .pattern-img img {
  width: min(100%, 1080px) !important;
  max-width: min(100%, 1080px) !important;
}

/* 패턴 페이지 전체 비율도 안정화 */
#p30 .pattern-page,
#p31 .pattern-page,
#p32 .pattern-page {
  align-items: center !important;
}

/* 모바일에서도 무리 없게 */
@media (max-width: 1023px) {
  #p30 .pattern-img img,
  #p31 .pattern-img img,
  #p32 .pattern-img img {
    width: 100% !important;
    max-width: 100% !important;
  }

  #p30 .pattern-img img {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* PATTERN_IMAGE_BLEND_AND_SIZE_FIX_END */


/* PATTERN_FULL_WIDTH_FINAL_START */

/* =========================================================
   패턴 일러스트 최종 확대
   이미지 높이 제한 제거 → 실제 일러스트가 가로폭을 꽉 사용
========================================================= */

#p30,
#p31,
#p32 {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

/* 왼쪽 설명은 줄이고 이미지 영역을 최대한 확보 */
#p30 .pattern-page,
#p31 .pattern-page,
#p32 .pattern-page {
  width: calc(100vw - 80px) !important;
  max-width: none !important;
  margin: 0 auto !important;

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

  column-gap: 40px !important;
}

/* 이미지 칸 전체 사용 */
#p30 .pattern-img,
#p31 .pattern-img,
#p32 .pattern-img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;

  display: block !important;

  overflow: visible !important;
  background: transparent !important;
}

/* 핵심:
   max-height 완전 제거
   원본 비율 유지하면서 가로 100% */
#p30 .pattern-img img,
#p31 .pattern-img img,
#p32 .pattern-img img {
  display: block !important;

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

  height: auto !important;
  max-height: none !important;

  object-fit: initial !important;

  margin: 0 !important;

  background: transparent !important;
  mix-blend-mode: multiply !important;

  transform: none !important;
}

/* 원슬라이딩은 원본이 상대적으로 가로형이라 약간 더 확대 */
#p30 .pattern-img {
  width: 108% !important;
}

/* 모바일 */
@media (max-width: 1023px) {

  #p30 .pattern-page,
  #p31 .pattern-page,
  #p32 .pattern-page {
    width: calc(100vw - 32px) !important;
    grid-template-columns: 1fr !important;
    row-gap: 30px !important;
  }

  #p30 .pattern-img {
    width: 100% !important;
  }
}

/* PATTERN_FULL_WIDTH_FINAL_END */


/* PATTERN_TITLE_ALIGN_GAP_FIX_START */
/* =========================================================
   패턴 페이지 정렬 보정
   - 좌측 타이틀 시작점을 이미지 상단과 맞춤
   - 타이틀과 이미지 사이 간격 60px
   - 이미지 가로폭 약 60px 축소
========================================================= */

#p30 .pattern-page,
#p31 .pattern-page,
#p32 .pattern-page {
  width: calc(100vw - 80px) !important;
  max-width: none !important;
  margin: 0 auto !important;

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

  column-gap: 60px !important;
  row-gap: 0 !important;

  align-items: start !important;
}

/* 좌측 타이틀 블록을 이미지 상단 기준으로 맞춤 */
#p30 .pattern-copy,
#p31 .pattern-copy,
#p32 .pattern-copy {
  align-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 불필요한 상단 여백 제거 */
#p30 .pattern-copy .kicker,
#p31 .pattern-copy .kicker,
#p32 .pattern-copy .kicker {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

#p30 .pattern-copy h2,
#p31 .pattern-copy h2,
#p32 .pattern-copy h2 {
  margin-top: 0 !important;
  margin-bottom: 34px !important;
}

#p30 .pattern-copy p:not(.kicker),
#p31 .pattern-copy p:not(.kicker),
#p32 .pattern-copy p:not(.kicker) {
  margin-top: 0 !important;
}

/* 이미지 영역도 상단 정렬 */
#p30 .pattern-img,
#p31 .pattern-img,
#p32 .pattern-img {
  align-self: start !important;
  justify-self: start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

/* 이미지 자체는 가로폭을 60px 정도 줄여서 여유 확보 */
#p30 .pattern-img img,
#p31 .pattern-img img,
#p32 .pattern-img img {
  display: block !important;
  width: calc(100% - 60px) !important;
  max-width: calc(100% - 60px) !important;

  height: auto !important;
  max-height: none !important;

  margin: 0 !important;

  object-fit: contain !important;
  background: transparent !important;
  mix-blend-mode: multiply !important;
}

/* 모바일 대응 */
@media (max-width: 1023px) {
  #p30 .pattern-page,
  #p31 .pattern-page,
  #p32 .pattern-page {
    width: calc(100vw - 32px) !important;
    grid-template-columns: 1fr !important;
    row-gap: 28px !important;
    column-gap: 0 !important;
  }

  #p30 .pattern-img img,
  #p31 .pattern-img img,
  #p32 .pattern-img img {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* PATTERN_TITLE_ALIGN_GAP_FIX_END */


/* PRODUCT_TITLE_TOP_ALIGN_FIX_START */
/* =========================================================
   일반 제품 페이지 좌측 타이틀 상단 정렬
   - 좌측 타이틀 시작점을 우측 이미지 시작점과 맞춤
   - product-page 공통 적용
========================================================= */

/* 좌우 영역 전체를 상단 기준으로 정렬 */
.product-page .gallery-product-layout,
.product-page .combined-product {
  align-items: start !important;
}

/* 좌측 타이틀/설명 블록 상단 정렬 */
.product-page .product-copy,
.product-page .combined-copy {
  align-self: start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 우측 이미지 영역도 상단 정렬 */
.product-page .product-gallery,
.product-page .variant-stage,
.product-page .combined-stage {
  align-self: start !important;
  margin-top: 0 !important;
}

/* 타이틀 블록 내부 상단 여백 정리 */
.product-page .product-copy .kicker,
.product-page .combined-copy .kicker {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.product-page .product-copy h2,
.product-page .combined-copy h2 {
  margin-top: 0 !important;
}

/* 설명문 첫 문단도 타이틀과 너무 떨어지지 않게 유지 */
.product-page .product-copy .description,
.product-page .product-copy > p:not(.kicker),
.product-page .combined-copy > p:not(.kicker) {
  margin-top: 26px !important;
}

/* 모바일에서는 기본 흐름 유지 */
@media (max-width: 1023px) {
  .product-page .gallery-product-layout,
  .product-page .combined-product {
    align-items: start !important;
  }

  .product-page .product-copy,
  .product-page .combined-copy,
  .product-page .product-gallery,
  .product-page .variant-stage,
  .product-page .combined-stage {
    align-self: start !important;
  }
}
/* PRODUCT_TITLE_TOP_ALIGN_FIX_END */


/* INQUIRY_RADIUS_FIX_START */
/* =========================================================
   문의 페이지 입력폼 / 버튼 라운딩 보정
========================================================= */

/* 입력폼 */
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  border-radius: 12px !important;
}

/* 버튼 / 링크 버튼 */
.inquiry-actions button,
.inquiry-actions a {
  border-radius: 12px !important;
}

/* 조금 더 자연스럽게 보이도록 내부 여백/라인 정리 */
.inquiry-actions button,
.inquiry-actions a {
  min-height: 50px !important;
  padding: 0 22px !important;
}

.inquiry-form input,
.inquiry-form select {
  min-height: 54px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.inquiry-form textarea {
  padding: 16px !important;
}
/* INQUIRY_RADIUS_FIX_END */


/* POCKET_DOOR_CAPTION_START */
/* =========================================================
   2연동 포켓도어 before / after 캡션
========================================================= */

.has-pocket-caption {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.has-pocket-caption .pocket-caption {
  background: #ffffff !important;
  padding: 18px 16px 20px !important;
}

.has-pocket-caption .pocket-caption-head {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 12px !important;
}

.has-pocket-caption .pocket-caption-head strong {
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #3b3128 !important;
  white-space: nowrap !important;
}

.has-pocket-caption .pocket-caption-head i {
  display: block !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: rgba(118, 92, 66, 0.45) !important;
}

.has-pocket-caption .pocket-caption p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #6b5c4e !important;
  word-break: keep-all !important;
}

/* 모바일 */
@media (max-width: 1023px) {
  .has-pocket-caption .pocket-caption {
    padding: 16px 14px 18px !important;
  }

  .has-pocket-caption .pocket-caption-head strong {
    font-size: 16px !important;
    white-space: normal !important;
  }

  .has-pocket-caption .pocket-caption p {
    font-size: 13px !important;
  }
}
/* POCKET_DOOR_CAPTION_END */


/* POCKET_DOOR_OVERLAY_CAPTION_START */
/* =========================================================
   2연동 포켓도어
   텍스트를 이미지 위 좌측 상단으로 배치
========================================================= */

/* 캡션이 들어간 아이템 */
.has-pocket-caption {
  position: relative !important;
  display: block !important;
}

/* 캡션을 이미지 위로 올리기 */
.has-pocket-caption .pocket-caption {
  position: absolute !important;
  top: 26px !important;
  left: 26px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;

  width: auto !important;
  max-width: 72% !important;

  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 제목 줄 */
.has-pocket-caption .pocket-caption-head {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 0 10px 0 !important;
}

/* 제목 텍스트 */
.has-pocket-caption .pocket-caption-head strong {
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #3f352b !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.45) !important;
}

/* 옆의 가는 선 */
.has-pocket-caption .pocket-caption-head i {
  display: block !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 1px !important;
  background: rgba(103, 84, 66, 0.55) !important;
  flex: 0 0 auto !important;
}

/* 설명 문구 */
.has-pocket-caption .pocket-caption p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
  color: #6f6255 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.45) !important;
}

/* 이미지 자체는 기존처럼 보이게 */
.has-pocket-caption > img {
  display: block !important;
}

/* 모바일 */
@media (max-width: 1023px) {
  .has-pocket-caption .pocket-caption {
    top: 18px !important;
    left: 18px !important;
    max-width: 80% !important;
  }

  .has-pocket-caption .pocket-caption-head {
    gap: 12px !important;
    margin-bottom: 8px !important;
  }

  .has-pocket-caption .pocket-caption-head strong {
    font-size: 15px !important;
    white-space: normal !important;
  }

  .has-pocket-caption .pocket-caption-head i {
    width: 38px !important;
    min-width: 38px !important;
  }

  .has-pocket-caption .pocket-caption p {
    font-size: 12px !important;
    white-space: normal !important;
  }
}
/* POCKET_DOOR_OVERLAY_CAPTION_END */


/* POCKET_DOOR_OVERLAY_TUNE_START */
/* =========================================================
   2연동 포켓도어 오버레이 미세조정
   - 제목 옆 라인 삭제
   - 설명문 위로 이동
========================================================= */

/* 제목 줄 간격 정리 */
.has-pocket-caption .pocket-caption-head {
  gap: 0 !important;
  margin: 0 0 6px 0 !important;
}

/* 제목 옆 라인/대시 삭제 */
.has-pocket-caption .pocket-caption-head i {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* 설명문을 제목과 더 가깝게 */
.has-pocket-caption .pocket-caption p {
  margin-top: 0 !important;
  transform: translateY(-2px) !important;
  line-height: 1.5 !important;
}
/* POCKET_DOOR_OVERLAY_TUNE_END */


/* POCKET_TITLE_2LINE_FIX_START */

.variant-split-copy .pocket-door-title {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.variant-split-copy .pocket-door-title span {
  display: block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* POCKET_TITLE_2LINE_FIX_END */


/* POCKET_TITLE_FINAL_2LINE_START */

/* 2연동 / 3연동 포켓도어 제목을 정확히 2줄 고정 */
.variant-split-copy .pocket-door-title {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.02 !important;
}

.variant-split-copy .pocket-door-title span {
  display: block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* POCKET_TITLE_FINAL_2LINE_END */


/* LEFT_INFO_TABLE_UNIFIED_START */
/* =========================================================
   카탈로그 좌측 정보 테이블 전체 통일
   TYPE / POINT / SPACE / VARIANT / 치수표
========================================================= */

/* 테이블 전체 */
.product-facts,
.variant-split-facts,
.specs,
.combined-facts {
  list-style: none !important;

  margin-top: 28px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;

  border-top: 1px solid rgba(34,34,34,.18) !important;
}


/* 각 행 높이 통일 */
.product-facts li,
.variant-split-facts li,
.specs li,
.combined-facts li {
  display: grid !important;

  grid-template-columns: 86px minmax(0, 1fr) !important;
  gap: 18px !important;

  align-items: center !important;

  min-height: 40px !important;
  padding: 6px 0 !important;

  border-bottom: 1px solid rgba(34,34,34,.18) !important;
}


/* TYPE / POINT / SPACE / VARIANT 등 왼쪽 항목 */
.product-facts li > span,
.variant-split-facts li > span,
.specs li > span,
.combined-facts li > span {
  font-size: 12px !important;
  line-height: 1.4 !important;

  font-weight: 400 !important;
  letter-spacing: 0 !important;

  color: #555555 !important;
}


/* 오른쪽 내용 */
.product-facts li > b,
.variant-split-facts li > b,
.specs li > b,
.combined-facts li > b {
  font-size: 12px !important;
  line-height: 1.45 !important;

  font-weight: 400 !important;
  letter-spacing: 0 !important;

  color: #555555 !important;

  word-break: keep-all !important;
}


/* specs가 flex로 잡혀 있던 기존 설정도 강제로 같은 구조 */
.specs li {
  justify-content: initial !important;
}


/* 모바일 */
@media (max-width: 767px) {

  .product-facts li,
  .variant-split-facts li,
  .specs li,
  .combined-facts li {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    min-height: 38px !important;
    gap: 14px !important;
    padding: 5px 0 !important;
  }

}
/* LEFT_INFO_TABLE_UNIFIED_END */


/* POCKET_2TRACK_ARROW_OPACITY_TUNE_START */
/* =========================================================
   2연동 포켓도어 화살표
   기본은 연하게, hover 시 선명하게
========================================================= */

.pocket-2track-mobile-prev,
.pocket-2track-mobile-next {
  opacity: .28 !important;
  background: rgba(255,255,255,.58) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.06) !important;
  transform: translateY(-50%) scale(.96) !important;

  transition:
    opacity .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease !important;
}

/* 마우스 올렸을 때 더 선명하게 */
.pocket-2track-mobile-carousel:hover .pocket-2track-mobile-prev,
.pocket-2track-mobile-carousel:hover .pocket-2track-mobile-next,
.pocket-2track-mobile-prev:hover,
.pocket-2track-mobile-next:hover,
.pocket-2track-mobile-prev:focus-visible,
.pocket-2track-mobile-next:focus-visible {
  opacity: 1 !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.14) !important;
  transform: translateY(-50%) scale(1) !important;
}

/* 모바일은 hover가 없으니 너무 안 보이지 않게 */
@media (hover: none), (pointer: coarse) {
  .pocket-2track-mobile-prev,
  .pocket-2track-mobile-next {
    opacity: .62 !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.10) !important;
    transform: translateY(-50%) scale(1) !important;
  }
}
/* POCKET_2TRACK_ARROW_OPACITY_TUNE_END */


/* MOBILE_PRODUCT_VERTICAL_BALANCE_START */

/* =========================================================
   모바일 제품 상세 페이지 세로 간격 균형
   기존 : 위 54px / 아래 70px
   변경 : 위 84px / 아래 40px

   → 이전 콘텐츠와 충분히 분리
   → 현재 콘텐츠 아래의 과한 빈 공간 축소
========================================================= */

@media (max-width: 720px) {

  .page.product-page,
  .page.variant-split-static-page {
    padding-top: 84px !important;
    padding-bottom: 40px !important;
  }

  /* 페이지 번호가 너무 아래에 붙지 않도록 같이 조정 */
  .page.product-page .page-no,
  .page.variant-split-static-page .page-no {
    bottom: 18px !important;
  }

}

/* MOBILE_PRODUCT_VERTICAL_BALANCE_END */


/* MOBILE_SIDE_PADDING_15_FINAL_START */
/* =========================================================
   INDEX 모바일 좌우 여백 전체 통일
   LEFT 15px / RIGHT 15px
========================================================= */

@media (max-width: 767px) {

  /* 사이트 기본 여백 변수부터 15px */
  :root {
    --pad: 15px !important;
  }

  /* -------------------------------------------------------
     모든 일반 페이지
  ------------------------------------------------------- */
  main .page {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }


  /* -------------------------------------------------------
     일반 제품 상세
  ------------------------------------------------------- */
  .gallery-product-layout,
  .layout-reverse .gallery-product-layout,
  .combined-product,
  .pattern-page {
    width: 100% !important;
    max-width: none !important;

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

    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* -------------------------------------------------------
     포켓도어 / 미서기 특수 페이지
  ------------------------------------------------------- */
  .variant-split-static-page {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .variant-split-stack,
  .variant-split-panel {
    width: 100% !important;
    max-width: none !important;

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

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .variant-split-copy,
  .variant-static-carousel,
  .variant-static-stage {
    width: 100% !important;
    max-width: none !important;

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

    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* 이미지도 부모 폭 100% */
  .variant-static-item,
  .variant-static-item img,
  .gallery-main,
  .gallery-main img {
    max-width: 100% !important;
  }


  /* -------------------------------------------------------
     좌측 텍스트 / 테이블
  ------------------------------------------------------- */
  .product-copy,
  .combined-copy,
  .variant-split-copy,
  .pattern-copy {
    width: 100% !important;
    max-width: none !important;

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

    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* -------------------------------------------------------
     모바일 헤더도 좌우 15px
  ------------------------------------------------------- */
  .topbar {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }


  /* -------------------------------------------------------
     혹시 내부에서 강제로 폭을 줄이는 요소 방지
  ------------------------------------------------------- */
  .product-gallery,
  .variant-static-carousel {
    box-sizing: border-box !important;
  }
}

/* MOBILE_SIDE_PADDING_15_FINAL_END */


/* MOBILE_ARROW_TRANSPARENT_UNIFY_START */
/* =========================================================
   모바일/캐러셀 화살표 반투명 배경 통일
========================================================= */

@media (max-width: 767px) {

  /* 2연동 커스텀 화살표 + 일반 캐러셀 화살표 공통 */
  .pocket-2track-mobile-prev,
  .pocket-2track-mobile-next,
  .variant-static-carousel .variant-static-prev,
  .variant-static-carousel .variant-static-next,
  .variant-static-carousel button[aria-label*="이전"],
  .variant-static-carousel button[aria-label*="다음"],
  .variant-static-carousel button[aria-label*="prev"],
  .variant-static-carousel button[aria-label*="next"] {
    opacity: 1 !important;
    background: rgba(255,255,255,.62) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;

    color: #555 !important;
    border: 0 !important;

    box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
  }

  /* hover / focus 시에도 완전 흰색 되지 않게 */
  .pocket-2track-mobile-prev:hover,
  .pocket-2track-mobile-next:hover,
  .variant-static-carousel .variant-static-prev:hover,
  .variant-static-carousel .variant-static-next:hover,
  .variant-static-carousel button[aria-label*="이전"]:hover,
  .variant-static-carousel button[aria-label*="다음"]:hover,
  .variant-static-carousel button[aria-label*="prev"]:hover,
  .variant-static-carousel button[aria-label*="next"]:hover,
  .pocket-2track-mobile-prev:focus-visible,
  .pocket-2track-mobile-next:focus-visible,
  .variant-static-carousel .variant-static-prev:focus-visible,
  .variant-static-carousel .variant-static-next:focus-visible,
  .variant-static-carousel button[aria-label*="이전"]:focus-visible,
  .variant-static-carousel button[aria-label*="다음"]:focus-visible,
  .variant-static-carousel button[aria-label*="prev"]:focus-visible,
  .variant-static-carousel button[aria-label*="next"]:focus-visible {
    background: rgba(255,255,255,.74) !important;
    color: #333 !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.10) !important;
  }
}

/* MOBILE_ARROW_TRANSPARENT_UNIFY_END */


/* MOBILE_KICKER_TOP_LINE_REMOVE_START */
/* =========================================================
   모바일에서 리드글(kicker) 위 회색 라인 제거
========================================================= */

@media (max-width: 767px) {

  /* 제품 설명영역 상단 선 제거 */
  .product-copy,
  .variant-split-copy,
  .combined-copy,
  .pattern-copy {
    border-top: 0 !important;
  }

  /* 라인이 pseudo-element 로 들어간 경우 제거 */
  .product-copy::before,
  .product-copy::after,
  .variant-split-copy::before,
  .variant-split-copy::after,
  .combined-copy::before,
  .combined-copy::after,
  .pattern-copy::before,
  .pattern-copy::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
  }

  /* kicker 바로 위 선/여백 제거 */
  .product-copy .kicker,
  .variant-split-copy .kicker,
  .combined-copy .kicker,
  .pattern-copy .kicker {
    border-top: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* MOBILE_KICKER_TOP_LINE_REMOVE_END */


/* MOBILE_PATTERN_BOTTOM_SPACE_FIX_START */
/* =========================================================
   모바일 패턴 페이지 하단 과다 여백 제거
========================================================= */

@media (max-width: 767px) {

  /* 페이지 자체 높이를 내용 기준으로 */
  .page.pattern-page {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 20px !important;
  }

  /* 패턴 레이아웃 하단 여백 축소 */
  .pattern-page,
  .pattern-layout,
  .pattern-wrap {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* 패턴 설명 + 패턴 이미지 블록 */
  .pattern-copy,
  .pattern-visual,
  .pattern-grid,
  .pattern-stage {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 마지막 요소 아래 여백 제거 */
  .pattern-page > *:last-child,
  .pattern-layout > *:last-child,
  .pattern-wrap > *:last-child,
  .pattern-copy > *:last-child,
  .pattern-visual > *:last-child,
  .pattern-grid > *:last-child,
  .pattern-stage > *:last-child {
    margin-bottom: 0 !important;
  }

  /* 페이지 번호가 있다면 너무 아래로 붙지 않게 */
  .page.pattern-page .page-no {
    bottom: 12px !important;
  }
}

/* MOBILE_PATTERN_BOTTOM_SPACE_FIX_END */


/* LFRAME_IMAGE_CAPTION_START */
/* =========================================================
   ㄱ자 문틀 도어 설명 이미지 카피
   2연동 포켓도어와 동일한 이미지 위 배치
========================================================= */

#p28 .gallery-main {
  position: relative !important;
}

#p28 .lframe-image-caption {
  position: absolute !important;
  top: 26px !important;
  left: 26px !important;
  z-index: 10 !important;

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

  background: transparent !important;
  border: 0 !important;
}

#p28 .lframe-image-caption strong {
  display: block !important;

  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;

  color: #3f352b !important;

  text-shadow: 0 1px 1px rgba(255,255,255,.45) !important;
}


/* 모바일 */
@media (max-width: 767px) {

  #p28 .lframe-image-caption {
    top: 18px !important;
    left: 18px !important;
  }

  #p28 .lframe-image-caption strong {
    font-size: 15px !important;
  }
}

/* LFRAME_IMAGE_CAPTION_END */








/* LFRAME_3IMAGE_ARROW_FIX_START */
/* =========================================================
   ㄱ자 문틀 도어
   PC : 3장이 모두 보이므로 화살표 제거
   모바일 : 한 장씩 보이므로 화살표 유지
========================================================= */

@media (min-width: 768px) {
  #p28 .gallery-prev,
  #p28 .gallery-next,
  #p28 .gallery-arrow {
    display: none !important;
  }
}

/* 모바일은 화살표 다시 사용 */
@media (max-width: 767px) {
  #p28 .gallery-prev,
  #p28 .gallery-next,
  #p28 .gallery-arrow {
    display: flex !important;
  }
}

/* LFRAME_3IMAGE_ARROW_FIX_END */


/* VARIANT_DESKTOP_LEFT_ALIGN_START */
/* =========================================================
   미서기 / 포켓도어 좌측 시작점 통일
   일반 product-page와 동일한 시작선 사용
========================================================= */

@media (min-width: 1024px) {

  /* 가운데로 좁게 잡혀 있던 전체 폭 해제 */
  .variant-split-static-page .variant-split-stack {
    width: 100% !important;
    max-width: var(--content-max) !important;

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

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 각 제품도 일반 제품과 같은 전체 폭 */
  .variant-split-static-page .variant-split-panel {
    width: 100% !important;
    max-width: none !important;

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

    padding-left: 0 !important;
    padding-right: 0 !important;

    grid-template-columns:
      minmax(330px, .62fr)
      minmax(0, 1.72fr) !important;

    column-gap: clamp(34px, 4.2vw, 76px) !important;
  }

  /* 좌측 카피 시작 위치 */
  .variant-split-static-page .variant-split-copy {
    width: 100% !important;
    max-width: 520px !important;

    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 10px !important;
  }

  /* 우측 이미지도 일반 제품 이미지 시작점에 맞춤 */
  .variant-split-static-page .variant-static-carousel {
    width: 100% !important;
    max-width: none !important;

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

/* VARIANT_DESKTOP_LEFT_ALIGN_END */