﻿/* ===== Moncler product spec sandbox ===== */
.moncler-spec { --mc-text:#111; --mc-muted:#666; --mc-gap:12px; color:inherit; font-size:inherit; line-height:1.6; }
.moncler-spec * { box-sizing:border-box; }

/* 탭 상태 속성 존중 (원문과 동일 동작) */


/* 기본 타이포/여백 보정 */
.moncler-spec p { margin:0 0 8px; }
.moncler-spec ul, .moncler-spec ol { margin:0 0 10px 1.25em; padding:0; }
.moncler-spec li { margin:4px 0; }
.moncler-spec img { display:inline-block; max-width:100%; height:auto; }

/* 레이블(좌측), 내용(우측) 2단이 들어온 경우를 위한 기본 그리드 (유틸리티 없을 경우 대비) */
.moncler-spec .mc-row { display:grid; grid-template-columns:180px 1fr; gap:16px 20px; align-items:flex-start; }
@media (max-width:640px){
  .moncler-spec .mc-row { grid-template-columns:1fr; }
}

/* ===== 몽클레어 유틸리티 클래스 재현 (scope: .moncler-spec) ===== */
/* layout */
.moncler-spec .d_flex { display:flex; }
.moncler-spec .flex-d_row { flex-direction:row; }
.moncler-spec .flex-d_column { flex-direction:column; }
.moncler-spec .flex-wrap_wrap { flex-wrap:wrap; }

.moncler-spec .ai_center { align-items:center; }
.moncler-spec .ai_start,
.moncler-spec .ai_flex-start { align-items:flex-start; }
.moncler-spec .jc_center { justify-content:center; }
.moncler-spec .jc_flex-start { justify-content:flex-start; }

.moncler-spec .w_full,
.moncler-spec .w_100% { width:100%; }
.moncler-spec .min-w_172px { min-width:172px; }

.moncler-spec .flex_1\.5 { flex:1.5 1 0%; }
.moncler-spec .flex_3\.5 { flex:3.5 1 0%; }

/* gap 유틸 (필요 수치만 매핑) */
.moncler-spec .gap_ { gap:var(--mc-gap); }
.moncler-spec .gap_6 { gap:1.5rem; }
.moncler-spec .gap_4 { gap:1rem; }
.moncler-spec .gap_3 { gap:.75rem; }
.moncler-spec .gap_2 { gap:.5rem; }
.moncler-spec .gap_10px { gap:10px; }
.moncler-spec .gap_60px { gap:60px; }

/* padding 유틸 (좌우 px_*, 상하 py_* 일부만) */
.moncler-spec .px_4 { padding-left:1rem; padding-right:1rem; }
.moncler-spec .px_20 { padding-left:5rem; padding-right:5rem; }
.moncler-spec .px_9 { padding-left:2.25rem; padding-right:2.25rem; }
.moncler-spec .px_14 { padding-left:3.5rem; padding-right:3.5rem; }
.moncler-spec .py_10 { padding-top:2.5rem; padding-bottom:2.5rem; }

/* position */
.moncler-spec .pos_relative { position:relative; }

/* text */
.moncler-spec .ta_left { text-align:left; }
.moncler-spec .fw_300 { font-weight:300; }
.moncler-spec .fw_400 { font-weight:400; }
.moncler-spec .textStyle_body-2 { font-size:.95rem; line-height:1.7; color:var(--mc-text); }
.moncler-spec .textStyle_base-sm { font-size:.95rem; line-height:1.7; }
.moncler-spec .c_black\.tint55 { color:var(--mc-muted); }

/* 아이콘+텍스트 수평 정렬 (세탁 아이콘 행) */
.moncler-spec .care-row,
.moncler-spec .d_flex.ai_center.gap_3.flex-d_row { display:flex; align-items:center; gap:.75rem; }
.moncler-spec .d_flex.ai_center.gap_3.flex-d_row img { width:24px; height:24px; }

/* 잘못된 중첩 보정: p 안에 ul이 들어온 경우(원문 종종 있음) */
.moncler-spec p > ul { margin-top:0; margin-bottom:10px; }
.moncler-spec p > ul:last-child { margin-bottom:0; }

/* 구분선이 필요하면(옵션) */
.moncler-spec .mc-sep { border-top:1px solid #eee; margin:16px 0; }

/* 반응형 프리픽스 유틸 (원문 클래스명을 그대로 지원) */
@media (min-width:640px){ /* sm: */
  .moncler-spec .sm\:flex-d_row { flex-direction:row; }
  .moncler-spec .sm\:flex-d_column { flex-direction:column; }
  .moncler-spec .sm\:gap_2 { gap:.5rem; }
  .moncler-spec .sm\:px_20 { padding-left:5rem; padding-right:5rem; }
}
@media (min-width:768px){ /* md: */
  .moncler-spec .md\:flex-d_row { flex-direction:row; }
  .moncler-spec .md\:flex-d_column { flex-direction:column; }
  .moncler-spec .md\:px_9 { padding-left:2.25rem; padding-right:2.25rem; }
}
@media (min-width:1280px){ /* xl: */
  .moncler-spec .xl\:flex-d_row { flex-direction:row; }
  .moncler-spec .xl\:px_14 { padding-left:3.5rem; padding-right:3.5rem; }
}

/* 탭 패널 접근성: 탭으로 들어왔을 때 outline 보이게 */
.moncler-spec [role="tabpanel"]:focus { outline:2px solid #d0d0d0; outline-offset:2px; }
