/*     1655085 : HTML 편집기      */
/* product_deicer_kr.css */

/* ====== 기본 타이포 & 리듬 ====== */
.product_detail {
  /* 베이스 폰트: 요청값 */
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.85;          /* 행간 넉넉하게 */
  letter-spacing: -0.01em;     /* 살짝 타이트 */
}

.product_detail * {
  color: #0b1b34;
  box-sizing: border-box;
  word-break: keep-all;
}

/* ====== 컨테이너 ====== */
.product_detail .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 2.2vw, 2.25rem); /* 좌우 여백 살짝 UP */
}

/* ====== 헤드 ====== */
.product_detail h1 {
  margin: 0 0 clamp(.8em, 1.1vw, 1.1rem);
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);   /* 타이틀 키움 */
  line-height: 1.35;
  text-align: center;
}

.product_detail .lead {
    max-width: 1080px;
    margin: 0 auto 2.2rem;
    text-align: center;
    font-size: clamp(1rem, 1.15vw, 1.18rem);
    line-height: 2.05;
    opacity: .95;
}

/* ====== 비주얼 + 스펙 ====== */
.product_detail .pd-visual-spec {
  margin-top: clamp(2.4rem, 5.5vw, 5.5rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(1.8rem, 3.2vw, 3.2rem);          /* 갭 확대 */
}

.product_detail .pd-visual {
  flex: 0 0 58%;
  display: flex;
  gap: clamp(1.1rem, 2vw, 2rem);
}

.product_detail .pd-visual figure { flex: 1; margin: 0; }

.product_detail .pd-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(0.9rem, 1.8vw, 1.8rem);
  box-shadow: 10px 12px 24px rgba(0, 0, 0, 0.09);
  object-fit: cover;
}

.product_detail .pd-spec { flex: 1; }

.product_detail .pd-spec .spec-title {
  font-weight: 800;
  margin: 0 0 0.75rem;
  font-size: 1.25rem;                          /* 베이스 대비 + */
}

.product_detail .pd-spec table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: clamp(0.9rem, 1.8vw, 1.8rem);
  overflow: hidden;
  box-shadow: 10px 12px 24px rgba(0, 0, 0, 0.07);
}

.product_detail .pd-spec th,
.product_detail .pd-spec td {
  padding: clamp(1rem, 1.35vw, 1.4rem) clamp(1.1rem, 1.6vw, 1.6rem);
  font-size: 1.02rem;                           /* 살짝 키움 */
  line-height: 1.8;
  text-align: left;
}

.product_detail .pd-spec th {
  width: 30%;
  background: #f3f7ff;
  font-weight: 800;
  white-space: nowrap;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.product_detail .pd-spec tr + tr th,
.product_detail .pd-spec tr + tr td {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ====== 공통 섹션 타이틀 & 리스트 ====== */
.product_detail .sec { margin-top: clamp(2.7rem, 6.2vw, 6.2rem); }

.product_detail .sec .sec-title {
  margin: 0 0 1.1rem;
  text-align: center;
  font-weight: 800;
  font-size: 1.6rem;                            /* 눈에 잘 띄게 */
}

.product_detail .sec .desc {
  max-width: 920px;
  margin: .4rem auto 0;
  text-align: center;
  color: #565656;
  font-size: .98rem;
}

.product_detail .dot-list {
  max-width: 920px;
  margin: 1.1rem auto 0;
  padding-left: 0;
  list-style: none;
}

.product_detail .dot-list > li {
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.95;
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
}

.product_detail .dot-list > li + li { margin-top: .28rem; }

.product_detail .dot-list > li::before {
  content: "•";
  position: absolute;
  left: 0; top: 0;
  line-height: 1.95;
  font-weight: 900;
  color: #1d6fcd;
}

.product_detail .dot-list .sub {
  margin: .4rem 0 0 1.25rem;
  padding-left: 0;
  list-style: none;
}

.product_detail .dot-list .sub li {
  position: relative;
  padding-left: 1rem;
  color: #555;
  line-height: 1.9;
  font-size: .98rem;
}

.product_detail .dot-list .sub li::before {
  content: "–";
  position: absolute;
  left: 0; top: 0;
}

/* ====== 인증서 썸네일 ====== */
.product_detail .pd-certs {
  margin-top: 1.3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.9rem, 1.3vw, 1.4rem);
}

.product_detail .pd-certs figure {
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: .7rem;
  overflow: hidden;
  background: #fff;
}

.product_detail .pd-certs img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform .25s ease, box-shadow .25s ease;
}

.product_detail .pd-certs figure:hover img {
  transform: scale(1.02);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.product_detail .note {
  margin: .7rem auto 0;
  max-width: 920px;
  text-align: center;
  color: #777;
  font-size: .94rem;
}

/* ====== 반응형 ====== */
@media (max-width: 1023px) {
  .product_detail .pd-visual-spec { flex-direction: column; }
  .product_detail .pd-visual,
  .product_detail .pd-spec { width: 100%; }
  .product_detail .pd-certs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .product_detail .lead { text-align: left; }
  .product_detail .pd-visual { flex-direction: column; }
  .product_detail .pd-spec th,
  .product_detail .pd-spec td { font-size: 1rem; }
  .product_detail .dot-list { margin-left: 0; margin-right: 0; }
  
}


/* ---------- 섹션(특징/성능/보관) 레이아웃 개선: 기존 CSS 끝에 추가 ---------- */
.product_detail .sec{
  display:grid;
  grid-template-columns:minmax(160px,240px) 1fr;
  gap:clamp(1.2rem,2.2vw,2.2rem);
  align-items:start;
  border-top:1px solid rgba(0,0,0,.06);
  padding-top:clamp(1.4rem,2vw,2rem);
}

.product_detail .sec .sec-title{
  grid-column:1;
  margin:0;
  text-align:left;           /* ← 가운데 정렬 덮어쓰기 */
  font-weight:800;
  font-size:clamp(1.3rem, 1.5vw, 1.5rem);
  line-height:1.35;
}
.product_detail .sec .sec-title::after{
  content:"";
  display:block;
  width:28px; height:2px;
  background:linear-gradient(275deg,#1d6fcd,#1983c2,#419fbb);
  margin-top:.6rem; border-radius:2px;
}

/* 본문을 우측 컬럼으로 */
.product_detail .sec .desc,
.product_detail .sec .dot-list,
.product_detail .sec .note{
  grid-column:2;
  margin:0;
  max-width:900px;
}

/* (옵션) 짧은 항목일 때 2열 리스트 */
.product_detail .dot-list.is-2col{
  display:grid;
  grid-template-columns:repeat(2,minmax(280px,1fr));
  column-gap:clamp(1rem,2vw,2rem);
  row-gap:.28rem;
}

/* 반응형: 태블릿↓ 한 열로 스택 */
@media (max-width:1023px){
  .product_detail .sec{ grid-template-columns:1fr; gap:.8rem; }
  .product_detail .sec .sec-title,
  .product_detail .sec .desc,
  .product_detail .sec .dot-list,
  .product_detail .sec .note{ grid-column:1; }
  .product_detail .dot-list.is-2col{ grid-template-columns:1fr; }

.product_detail .dot-list > li {line-height:1.65;}
}