/* ===== 좌우 여백을 회색으로 통일 ===== */
/* 헤더/푸터/좌측메뉴는 원본 유지, 좌우 배경만 변경 */

html, body {
  background: #666666 !important; /* 요청하신 회색 계열 */
}

/* 본문 바깥 여백(섹션 배경)도 동일 회색 */
section {
  background: #666666 !important;
}

/* 실제 본문 영역만 흰색 유지 */
#img.detail-img,
#con_wrap.detail-body,
.detail-stack {
  background: #ffffff !important;
}

/* ============================================= */


/* new-css.css (override)
   목적:
   - style293.css(헤더/푸터/좌측메뉴/기본 레이아웃)는 그대로 사용
   - 상세페이지 본문(#img, #con_wrap)만 "1칸 세로 스크롤" 형태로 변경
   - 좌측 메뉴(#main_menu)가 데스크탑에서 정상 노출되도록(섹션 높이 auto 이슈 보정)
*/

/* =========================
   0) 기본 안전장치
========================= */
#img, #con_wrap, #main_menu { box-sizing: border-box; }
#img img { max-width: 100%; height: auto; display: block; }

/* =========================
   1) SECTION: 고정 height 해제(긴 스크롤 가능)
   - 단, 좌측메뉴가 %height(100%)로 사라지는 문제를 막기 위해
     #main_menu를 top/bottom 기반으로 잡습니다.
========================= */
section{
  height: auto !important;
  overflow: visible !important;
  background-color: initial !important;
  padding-bottom: 0 !important; /* 하단 깨짐/여백 이슈 방지 */
}

/* =========================
   2) 좌측 메뉴: 데스크탑에서 항상 보이게 고정
   - style293.css는 #main_menu { height:100%; }라서
     section 높이가 auto가 되면 메뉴 높이가 0처럼 계산될 수 있습니다.
   - 그래서 데스크탑에서는 top/bottom으로 높이를 잡고 스크롤 가능하게 합니다.
========================= */
@media (min-width: 1281px){
  #main_menu{
    height: auto !important;
    top: 0.1px !important;     /* 기존과 동일한 기준 유지 */
    bottom: 0 !important;      /* 하단까지 채우기 */
    overflow-y: auto !important;
  }
}

/* =========================
   3) 본문: 한 칸(세로 스크롤) 구조
========================= */
#img.detail-img{
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  height: auto !important;
  background-color: #fff;
}

#img.detail-img ul{ margin:0; padding:0; }
#img.detail-img li{ list-style:none; margin:0 0 16px 0; }

/* 대표이미지: 페이지마다 이미지 크기가 달라도 깔끔하게 보이도록 */
#img.detail-img img{
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* 본문 텍스트 영역 */
#con_wrap.detail-body{
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  height: auto !important;
  margin-top: 0 !important;
  background-color: #fff;
}

/* 가독성 컨테이너 */
.detail-stack{
  width: min(980px, calc(100% - 30px));
  margin: 0 auto;
  padding: 22px 0 60px;
}

/* =========================
   4) 데스크탑 레이아웃 정렬
   - 원본 style293.css의 데스크탑 배치:
     #main_menu: left 21.7% / width 12% (끝=33.7%)
     #img & #con_wrap: right 22.3% / width 44% (시작=33.7%)
   - 새 레이아웃도 "메뉴 오른쪽 컬럼"에 정확히 맞추기 위해
     데스크탑에서는 본문 컬럼을 width 44%로 제한하고 left로 고정합니다.
========================= */
@media (min-width: 1281px){
  #img.detail-img,
  #con_wrap.detail-body{
    width: 44% !important;
    left: 33.7% !important;  /* 메뉴 끝 위치에 맞춤 */
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 본문 폭도 컬럼 안에 자연스럽게 맞추기 */
  .detail-stack{
    width: min(760px, calc(100% - 24px)); /* 44% 컬럼 내부에서 과도하게 넓어지지 않게 */
  }
}

/* =========================
   5) 카드/타이포
========================= */
.detail-header{ padding: 14px 2px 8px; }
.detail-eyebrow{
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #666;
}
.detail-title{
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.2;
  color: #111;
}
.detail-lead{ margin: 0; color:#333; }

.detail-section{
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
}
.detail-h2{ margin:0 0 10px; font-size:18px; color:#111; }
.detail-muted{ margin:6px 0 0; color:#777; font-size:13px; }

/* 스펙 DL */
.spec-dl{ margin:0; display:grid; gap:10px; }
.spec-dl > div{
  display:grid;
  grid-template-columns: 190px 1fr;
  gap:10px;
  padding:10px 12px;
  border:1px solid #eee;
  border-radius:10px;
  background:#fafafa;
}
.spec-dl dt{ margin:0; color:#666; font-size:13px; }
.spec-dl dd{ margin:0; font-weight:600; color:#111; }
.spec-warn{
  border-color: rgba(255,0,0,0.25) !important;
  background: rgba(255,0,0,0.03) !important;
}
.spec-warn dd strong{ color:#c40000; }

/* 적용 아이콘 */
.icon-list{
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.icon-list li{ list-style:none; }
.icon-list img{
  width: 92px;
  height: 62px;
  object-fit: cover;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: #f2f2f2;
}

/* 옵션 */
.option-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.option-card{
  border:1px solid #eee;
  border-radius:12px;
  padding:14px;
  background:#fafafa;
}
.option-card h3{ margin:0 0 8px; font-size:14px; color:#111; }
.option-card ul{ margin:0; padding-left:18px; }
.option-card li{ margin:6px 0; }

/* =========================
   6) 반응형(깨짐 방지)
   - 1280px 이하에서는 원본(style293.css)이 모바일/태블릿 레이아웃로 전환하면서
     #main_menu를 숨기고(#m_menu 사용), #img/#con_wrap을 width:100%로 바꿉니다.
   - 따라서 여기서는 "한 칸 구조"만 유지하고, 폭/배치는 원본을 존중합니다.
========================= */
@media (max-width: 1280px){
  /* 태블릿/모바일에서는 원본이 #main_menu를 숨기므로, 별도 강제하지 않음 */
  .spec-dl > div{ grid-template-columns: 1fr; }
  .option-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  #img.detail-img li{ margin-bottom: 12px; }
  .detail-section{ padding: 14px; }
  .detail-title{ font-size: 22px; }
}


/* ===== PRODUCT DETAIL 헤더 박스 스타일 개선 =====
   - 'PRODUCT DETAIL' 영역을 연한 그레이 박스로
   - 텍스트는 검정
   - 한줄 설명(.detail-lead) 겹침 방지 + 글씨 크게
*/
.detail-header{
  background: #f1f1f1 !important;
  border: 1px solid #e2e2e2 !important;
  border-radius: 12px !important;
  padding: 18px 18px 16px !important;
  margin: 18px 0 12px !important;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* PRODUCT DETAIL 라벨 */
.detail-eyebrow{
  color: #111 !important;
  font-weight: 700 !important;
}

/* 제품명 */
.detail-title{
  color: #111 !important;
}

/* 한줄 설명: 확실히 구역 분리 + 폰트 키우기 */
.detail-lead{
  display: block !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #d8d8d8 !important;

  font-size: 17px !important;
  line-height: 1.6 !important;
  color: #111 !important;
  word-break: keep-all;
}

/* 헤더 다음 섹션과 간격을 더 확보해서 겹침 방지 */
.detail-header + .detail-section{
  margin-top: 18px !important;
}

/* 모바일에서 한줄 설명 더 편하게 */
@media (max-width: 520px){
  .detail-lead{
    font-size: 16px !important;
  }
}


/* ===== 한줄 설명 ↔ DESCRIPTION 간격 분리(겹침 해결) ===== */

/* 한줄 설명 아래 여백 확보 */
.detail-lead{
  margin-bottom: 22px !important;
}

/* DESCRIPTION 제목(원본 h2 또는 strong 처리) 위에 확실한 간격 확보 */
.detail-lead + h2,
.detail-lead + strong,
.detail-lead + .detail-h2{
  margin-top: 22px !important;
}

/* 혹시 구조가 다를 경우를 대비한 안전 규칙 */
.detail-header + .detail-section h2:first-child,
.detail-header + .detail-section strong:first-child{
  margin-top: 22px !important;
}


/* ===== 요청 반영 v4 =====
   1) PRODUCT DETAIL 하단의 제품명(h1.detail-title) 숨김
   2) PRODUCT DETAIL 바로 아래에 한줄 설명(detail-lead) 노출(구역 분리 강화)
   3) DESCRIPTION 제목(h2)과 한줄 설명 겹침 방지(원본 h2 스타일 오버라이드)
*/

/* 제품명 제거 */
.detail-title{
  display: none !important;
}

/* 한줄 설명을 PRODUCT DETAIL 바로 아래로 */
.detail-lead{
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 10px !important;
  margin-bottom: 26px !important;

  position: relative;
  z-index: 3;
}

/* PRODUCT DETAIL 박스 내부 간격 보정(제품명 숨김 후) */
.detail-header{
  padding-bottom: 18px !important;
}

/* DESCRIPTION / 섹션 제목 겹침 방지 */
.detail-section{
  position: relative;
  z-index: 1;
}

.detail-section h2,
.detail-section .detail-h2{
  display: block !important;
  margin-top: 0 !important;
  padding-top: 18px !important;
  clear: both !important;

  position: relative;
  z-index: 2;
}

/* 혹시 원본에서 h2에 음수 마진/절대배치가 있을 때 강제 해제 */
.detail-section h2{
  top: auto !important;
  left: auto !important;
  right: auto !important;
}


/* ===== v5: 한줄 설명 자동 높이 + DESCRIPTION 상단 공백 축소 ===== */

/* PRODUCT DETAIL 박스가 내용(여러 줄)에 맞춰 자연스럽게 늘어나도록 */
.detail-header{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* 한줄 설명이 여러 줄이면 자연스럽게 늘어나도록 (고정 높이/라인클램프 방지) */
.detail-lead{
  height: auto !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: visible !important;

  /* 박스 안에서 줄 간격/패딩을 조금 더 자연스럽게 */
  line-height: 1.7 !important;
}

/* DESCRIPTION 상단 공백(패딩) 줄이기 */
.detail-section h2,
.detail-section .detail-h2{
  padding-top: 8px !important; /* 기존 18px -> 8px */
}

/* 혹시 섹션 카드 자체 margin이 커서 공백이 생긴 경우도 같이 축소 */
.detail-header + .detail-section{
  margin-top: 12px !important; /* 기존 18px -> 12px */
}


/* ===== v6: 메인이미지 ↔ PRODUCT DETAIL 사이 빈공간 제거 + 이하 섹션 밀림 완화 ===== */

/* 1) #img 영역의 '고정 높이'를 풀어 이미지 높이만큼만 차지하게 (빈공간 제거) */
#img{
  height: auto !important;
}

/* 갤러리 마지막 아이템 아래 여백 제거 */
#img.detail-img li:last-child{
  margin-bottom: 0 !important;
}

/* 2) #con_wrap을 absolute(top:700px)에서 흐름 레이아웃으로 전환
      -> 한줄 설명이 길어져도 아래 섹션이 '밀려도' 정상적으로 따라오게 */
@media (min-width: 1281px){
  #img,
  #con_wrap{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
  }

  /* 원본 컬럼 위치(좌측메뉴 오른쪽) 유지: left 33.7% / width 44% */
  #img,
  #con_wrap{
    width: 44% !important;
    margin-left: 33.7% !important;
    margin-right: 0 !important;
  }

  /* 이미지와 PRODUCT DETAIL이 딱 붙게 */
  #con_wrap{
    margin-top: 0 !important;
  }
}

/* 3) DESCRIPTION 상단 여백을 더 줄이고(밀린 느낌 완화) 헤더 아래 간격도 압축 */
.detail-lead{
  margin-bottom: 18px !important;
}

.detail-header + .detail-section{
  margin-top: 10px !important;
}

.detail-section h2,
.detail-section .detail-h2{
  padding-top: 6px !important;
}


/* ===== v13: 누적 충돌 정리(강제 오버라이드) =====
   목표:
   - 하단 공백 없음
   - 각 '행 박스'(SPEC 각 줄, OPTIONS 카드) 텍스트는 상하 센터
   - 섹션 카드(.detail-section) 내부 내용이 아래로 붙지 않게(기본 상단부터 자연스럽게)
*/

/* 하단 공백 제거(최소만) */
section{ padding-bottom: 0 !important; min-height: 0 !important; }
.detail-stack{ padding-bottom: 16px !important; }
#options{ margin-bottom: 0 !important; }

/* 섹션 카드 자체는 flex 금지(아래로 붙는 원인 제거) */
.detail-section{
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}

/* 섹션 카드 내부 여백은 넉넉히(원하신 '박스 안 공간') */
.detail-section{
  padding: 26px 22px !important;
}

/* DESCRIPTION 제목 위쪽 공백 과다 방지 */
.detail-section .detail-h2{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===== SPECIFICATIONS: 각 줄(rounded box) 안에서 텍스트 상하 센터 ===== */
.spec-dl > div{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
}
.spec-dl dt{
  width: 190px !important;
  flex: 0 0 190px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.spec-dl dd{
  flex: 1 1 auto !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* ===== OPTIONS: 카드 안 텍스트 상하 센터 ===== */
.option-card{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 150px; /* 카드 높이가 좀 있어야 센터가 눈에 보임 */
}

/* ===== APPLICATIONS(아이콘 섹션): 불필요한 아래 밀림 방지 ===== */
.icon-list{
  margin-top: 12px !important;
}

/* PRODUCT DETAIL 박스는 내용에 맞춰 자동 높이 */
.detail-header{ height: auto !important; overflow: visible !important; }
.detail-lead{ height: auto !important; overflow: visible !important; }