.product-detail-page{padding-top:176px;background:#f7f3ed}.product-buybox{display:grid;grid-template-columns:1.08fr .92fr;min-height:720px}.product-buybox-visual{background:#eee6dc}.product-buybox-visual img{height:100%;object-fit:cover}.product-buybox-copy{display:flex;flex-direction:column;justify-content:flex-end;padding:8vw}.product-buybox-copy h1{margin:0;font-family:Hahmlet,serif;font-size:clamp(42px,5vw,72px);font-weight:500;line-height:1.13;letter-spacing:-.06em}.product-lede{margin:26px 0;color:#6e665e;line-height:1.9}.product-price{display:flex;align-items:center;gap:18px;margin:20px 0 30px}.product-price strong{font-size:30px}.product-price del{color:#9a928a}.product-buybox dl{border-top:1px solid rgba(28,26,24,.15)}.product-buybox dl div{display:grid;grid-template-columns:90px 1fr;padding:15px 0;border-bottom:1px solid rgba(28,26,24,.15);font-size:13px}.product-buybox dt{font-weight:700}.product-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:35px}.product-actions a{padding:18px;text-align:center;color:white;background:#1c1a18}.product-actions a.outline{color:#1c1a18;background:transparent;border:1px solid #1c1a18}.product-review-top,.product-review-bottom{padding:45px 7vw;background:white;text-align:center}.product-review-top p{margin:0;color:#877f77;font-size:12px}.original-product-story{width:min(1120px,100%);margin:auto;padding:100px 0;background:white}.original-product-story header{padding:0 7vw 70px}.original-product-story h2,.product-answer h2,.product-faq h2,.product-review-bottom h2{margin:0;font-family:Hahmlet,serif;font-size:clamp(40px,5vw,68px);font-weight:500;line-height:1.18;letter-spacing:-.05em}.original-product-story>img{width:100%;height:auto}.product-answer{display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw;padding:120px 7vw;background:#e9ddce}.product-answer table{width:100%;border-collapse:collapse}.product-answer th,.product-answer td{padding:17px 10px;border-bottom:1px solid rgba(28,26,24,.18);text-align:left;font-size:13px;line-height:1.7}.product-answer th{width:105px}.product-faq{padding:120px 18vw;background:#f7f3ed}.product-faq details{padding:25px 0;border-bottom:1px solid rgba(28,26,24,.18)}.product-faq summary{font-weight:700;cursor:pointer}.product-faq details p{color:#655e57;line-height:1.9}.product-review-bottom a{display:inline-block;margin-top:20px;padding-bottom:6px;border-bottom:1px solid}.guide-detail-page .article-deck{margin:25px 0 0;color:#716a63;font-size:17px;line-height:1.8}.guide-detail-page .article-content>h1{display:none}.article-content blockquote{margin:45px 0;padding:30px 35px;background:#eee3d6;border-left:3px solid #9e704b}.article-content blockquote p{margin-bottom:0}.article-content ul{padding-left:22px}.article-content li{margin:10px 0}.article-content a{text-decoration:underline;text-underline-offset:4px}.article-content code{padding:2px 5px;background:#eee7df}.table-scroll{margin:35px 0;overflow-x:auto}.article-disclosure{margin-top:80px;padding:28px;border-top:1px solid #cfc5ba;border-bottom:1px solid #cfc5ba;color:#716a63;font-size:13px}.detail-next{width:min(900px,calc(100% - 40px));margin:60px auto 0;text-align:right}.detail-next a{display:inline-block;padding-bottom:7px;border-bottom:1px solid}
/* 구매 영역 2단 → 1단 전환 기준을 1080px 로 올린다.       (추가 2026-08-19)
   오른쪽 글 칸의 최소 폭이 562px 이라, 721~1080px 에서는 남는 폭을
   왼쪽 이미지가 다 뒤집어쓴다. 실측 : 721px 에서 이미지 143px / 글 562px,
   768px(아이패드 세로)에서 189px / 562px — 제품 사진이 손가락만 해진다.
   1080px 밑으로는 세로로 쌓는 것이 맞다.
   ※ 이 블록은 아래 720px 블록보다 먼저 와야 한다.
      720px 이하에서는 그쪽 값(글 여백 등)이 이겨야 하기 때문이다.
   되돌리기 : 이 블록 통째로 삭제 */
/* 2026-08-21 갤러리가 들어오면서 520px 고정 높이가 안 맞게 됐다.
   안에 1:1 큰 이미지 + 썸네일 줄이 들어 933px 가 되는데 상자는 520px 이라,
   780~900px 구간에서 썸네일이 오른쪽 글(배송비·적립금) 위로 올라왔다. 내용만큼 놓아둔다. */
@media(max-width:1080px){
  .product-buybox{grid-template-columns:1fr;min-height:0}
  .product-buybox-visual{height:auto;min-height:0}
  .product-buybox-copy{padding:64px 6vw}
}

@media(max-width:720px){.product-detail-page{padding-top:152px}.product-buybox{grid-template-columns:1fr;min-height:0}.product-buybox-visual{height:auto;min-height:0}.product-buybox-copy{padding:70px 22px}.product-buybox-copy h1{font-size:42px}.product-actions{grid-template-columns:1fr}.original-product-story{padding-top:75px}.original-product-story header{padding:0 22px 55px}.product-answer{grid-template-columns:1fr;padding:85px 22px}.product-faq{padding:85px 22px}.product-review-top,.product-review-bottom{padding:35px 20px}.article-page{padding-top:190px}.article-content{font-size:16px}.article-content h2{font-size:30px}.article-content table:not(.table-cards){min-width:680px}}


/* ===================== 카페24 에디봇 상세 접기 (추가 2026-08-19) =====================
   4종 SET 은 카페24 에디봇 상세 이미지가 67장이라 페이지가 약 19만px 이 된다.
   단품은 큐레이션된 상세를 써서 훨씬 짧다. 내용은 지우지 않고 접어서 길이만 맞춘다.
   되돌리기 : 이 블록과 site.js 의 짝 블록을 함께 삭제
   ================================================================================= */
.c24-detail-body.is-folded { position: relative; max-height: 2400px; overflow: hidden; }
.c24-detail-body.is-folded::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 240px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff); pointer-events: none;
}
.c24-detail-more {
  display: block; width: 100%; max-width: 360px; margin: 28px auto 0; padding: 15px 0;
  border: 1px solid #222; background: #fff; color: #222;
  font-family: inherit; font-size: 15px; letter-spacing: .02em; cursor: pointer;
  transition: background .2s, color .2s;
}
.c24-detail-more:hover { background: #222; color: #fff; }
/* ===================== 카페24 에디봇 상세 접기 끝 ===================== */



/* ===================== 가이드 표 모바일 카드형 (추가 2026-08-20) =====================
   문제: 모바일에서 표를 옆으로 밀어서 봐야 했다 (min-width:680px 때문에 가로 스크롤 강제).
   375px 에서 본문 실폭은 약 335px 이라 3열을 그대로 두면 열당 110px 이 되어 읽을 수 없다.
   그래서 720px 이하에서는 행 하나를 카드 하나로 쌓는다.
   표 HTML 은 가이드 플러그인이 thead/th scope="col" + td[data-label] 로 내보낸다.
   DOM 의 표 구조(thead/th/td)는 그대로라 답변엔진과 스크린리더에는 영향이 없다.
   data-label 이 없는 옛 표는 .table-cards 클래스가 없어 기존 가로 스크롤로 남는다.
   되돌리려면 이 블록을 지우고 위의 :not(.table-cards) 를 없애면 된다. */
@media(max-width:720px){
  .article-content table.table-cards,
  .article-content table.table-cards tbody,
  .article-content table.table-cards tr,
  .article-content table.table-cards td{display:block;width:100%}
  /* 가이드 플러그인 인라인 CSS 의 .guide-detail-page table{min-width:640px} 를 되돌린다 */
  .article-content table.table-cards{min-width:0;width:100%}
  .article-content table.table-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .article-content table.table-cards tr{padding:20px 0;border-top:1px solid #e3ddd4}
  .article-content table.table-cards tr:last-child{border-bottom:1px solid #e3ddd4}
  .article-content table.table-cards td{border:0;padding:7px 0;font-size:14px;line-height:1.7;word-break:keep-all}
  .article-content table.table-cards td::before{content:attr(data-label);display:block;font-size:11px;letter-spacing:.06em;color:#8a8378;margin-bottom:4px}
  .article-content table.table-cards td:first-child{font-weight:600;font-size:15px;padding-top:0}
  .article-content table.table-cards td:first-child::before{display:none}
}

/* 2026-08-24 상세페이지 buybox 하단 정렬
   오른쪽 컬럼(제목·가격·상담 버튼)이 왼쪽 크레마 포토리뷰 위젯 하단과 같은 선에서 끝나도록 맞추고,
   buybox 아래 상세 탭(.product-tabs)과의 여백을 확보한다. */
.product-buybox{margin-bottom:44px}

/* 오른쪽 컬럼 내용을 컬럼 하단에 붙인다 */
.product-buybox .product-buybox-copy{justify-content:flex-end!important}

/* 2컬럼 레이아웃(1081px 이상)에서만 오른쪽 컬럼 하단 패딩을 왼쪽 컬럼(패딩 0)에 맞춰 두 컬럼 끝선을 일치시킨다.
   1080px 이하는 1컬럼으로 쌓이므로 플러그인 기본 패딩(44px/34px)을 그대로 둔다. */
@media (min-width:1081px){
  .product-detail-page .product-buybox-copy{padding-bottom:2px!important}
}

/* 2026-08-24 buybox 좌우 컬럼 끝선 정렬 보강 (A.C 클렌저 어긋남 수정)
   기존에는 왼쪽 컬럼이 항상 더 길다는 전제였으나, A.C 클렌저는 갤러리가 낮아(670px)
   오른쪽 컬럼이 더 길어지면서 왼쪽 컬럼 하단에 여백(30px)이 생겨 상담 버튼이 리뷰 위젯보다 아래로 내려갔다.
   왼쪽 컬럼을 flex 컬럼으로 만들고 리뷰 위젯에 margin-top:auto 를 줘서
   남는 높이를 갤러리와 리뷰 위젯 '사이'로 밀어내고 리뷰 위젯을 항상 컬럼 하단에 붙인다.
   갤러리-리뷰 최소 간격 18px 은 .product-gallery 의 margin-bottom 으로 보존한다.
   (특정 상품 예외 처리가 아니라 5개 상품 모두에 동일하게 동작) */
@media (min-width:1081px){
  .product-detail-page .product-buybox-visual{display:flex;flex-direction:column}
  .product-detail-page .product-buybox-visual .product-gallery{margin-bottom:18px}
  .product-detail-page .product-buybox-visual .product-review-top{margin-top:auto!important}
}


/* 우측 구매정보 컬럼: 컬럼이 좌측(이미지+리뷰)보다 짧을 때 남는 여백이
   전부 상단에 몰려 상품마다 제목 시작선이 달라 보이던 문제를 정리한다.
   남는 여백을 아래쪽 블록들이 나눠 흡수해 모든 상품에서 상단·하단 끝선이 동일해진다.
   (3종 SET처럼 설명이 한 줄인 상품에서 특히 크게 벌어졌음) */
@media (min-width:1081px){
  .product-detail-page .product-buybox-copy > .product-newmember,
  .product-detail-page .product-buybox-copy > .product-buyinfo,
  .product-detail-page .product-buybox-copy > c24-wc-buybox,
  .product-detail-page .product-buybox-copy > .product-consult{margin-top:auto}
}