@charset "utf-8";
/* CSS Document */

/* =========================
   0) QUICK CONTROL (여기만 건드리면 됨)
   ========================= */
:root{
  /* Layout */
  --maxw: 780px;        /* 게시물 최대 폭 */
  --pad-x: 18px;        /* 좌우 여백(모바일) */
  --sec-y: 34px;        /* 섹션 기본 상하 여백 */
  --radius: 14px;

  /* Typography */
  --font: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --fs-h1: clamp(26px, 5.6vw, 40px);
  --fs-h2: clamp(22px, 4.8vw, 32px);
  --fs-h3: clamp(18px, 3.8vw, 22px);
  --fs-body: clamp(14px, 3.2vw, 16px);
  --fs-small: 12px;

  --lh-title: 1.18;
  --lh-body: 1.7;

  /* Colors */
  --bg: #ffffff;
  --tint: #f6f3ef;      /* 밝은 베이지 느낌 섹션 */
  --text: #141414;
  --muted: #6b6b6b;
  --line: #e9e4dc;
  --pink: #cc7468; 
	
  --dark: #0f0f0f;      /* 블랙 밴드 배경 */
  --darkText: #ffffff;

  --accent: #c99a45;    /* 포인트 컬러 (필요 시 변경) */

  /* Media */
  --img-fit: cover;
  /* 단어 중간 깨짐 방지 */
  word-break: keep-all;
  overflow-wrap: normal;
  word-wrap: normal;
}	


/* =========================
   1) RESET / BASE
   ========================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* 한글/영문 줄바꿈 안정 */
  word-break: keep-all;
  overflow-wrap: normal;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

.post{ width:100%; }

/* 공통 컨테이너: 이미지/텍스트 여백 유지 */
.container{
  width: min(var(--maxw), 100%);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* 섹션 간격 */
.sec{ padding: var(--sec-y) 0; }
.sec--tint{ background: var(--tint); }

/* =========================
   2) TYPOGRAPHY
   ========================= */
.eyebrow{
  margin: 0 0 10px;
  font-size: var(--fs-small);
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: none;
}

.h1{
  margin: 0 0 12px;
  font-size: var(--fs-h1);
  line-height: var(--lh-title);
  font-weight: 800;
}
.h2{
  margin: 0 0 10px;
  font-size: var(--fs-h2);
  line-height: var(--lh-title);
  font-weight: 800;
}
.h3{
  margin: 0 0 10px;
  font-size: var(--fs-h3);
  line-height: var(--lh-title);
  font-weight: 800;
}

.desc{
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
}

/* =========================
   3) MEDIA BLOCKS
   ========================= */
.media{
  margin: 18px 0 0;
  border-radius: var(--radius);
  overflow:hidden;
  background:#eee;
}
.media img{
  width: 100%;
  height: auto;
  object-fit: var(--img-fit);
}

/* 간격 유틸 */
.gap-md{ height: 18px; }
.gap-lg{ height: 28px; }

/* =========================
   4) BAND
   ========================= */
.band{ padding: 26px 0; }
.band--dark{
  background: var(--dark);
  color: var(--darkText);
}
.band--dark .h2{ margin:0; color: var(--darkText); }

/* =========================
   5) GRID / CARD
   ========================= */
.grid{
  display:grid;
  gap: 12px;
}
.grid-3{
  grid-template-columns: 1fr 1fr 1fr;
}
.card{
  margin:0;
  border-radius: var(--radius);
  overflow:hidden;
  background:#eee;
}
.card img{
  width:100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 모바일에서 3열이 빡빡하면 2열로 */
@media (max-width: 520px){
  .grid-3{ grid-template-columns: 1fr 1fr; }
}

/* =========================
   6) REVIEW
   ========================= */
.review{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.review__card{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.review__title{
  margin:0 0 8px;
  font-weight: 800;
  color: var(--text);
}
.review__body{
  margin:0;
  color: var(--muted);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
}
@media (max-width: 640px){
  .review{ grid-template-columns: 1fr; }
}

/* =========================
   7) NOTE GRID (6개)
   ========================= */
.note-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.note{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  background:#fff;
}
.note img{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.note__name{
  margin: 0;
  padding: 10px 10px 12px;
  font-weight: 700;
  font-size: var(--fs-body);
}
@media (max-width: 520px){
  .note-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================
   8) PRICE BAR
   ========================= */
.pricebar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px;
  background:#fff;
}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.price{
  margin:0;
  display:flex;
  align-items:baseline;
  gap: 10px;
}
.price__label{
  color: var(--muted);
  font-size: 13px;
}
.price__value{
  font-size: clamp(18px, 4vw, 22px);
}

/* =========================
   9) FAQ (details)
   ========================= */
.faq{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  overflow:hidden;
  margin: 10px 0 0;
}
.faq__q{
  list-style:none;
  cursor:pointer;
  padding: 14px 14px;
  font-weight: 800;
  position: relative;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{
  content: "＋";
  position:absolute;
  right: 14px;
  top: 12px;
  font-weight: 900;
  color: var(--muted);
}
details[open] .faq__q::after{ content:"－"; }
.faq__a{
  padding: 0 14px 14px;
  color: var(--muted);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
}

/* =========================
   10) LIST
   ========================= */
.list{
  margin: 14px 0 0;
  padding: 0 0 0 18px;
  color: var(--muted);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
}
.list li{ margin: 6px 0; }

/* =========================
   11) FOOTER
   ========================= */
.footer{
  padding: 22px 0 34px;
  border-top: 1px solid var(--line);
}
.footer__txt{
  margin:0;
  color: var(--muted);
  font-size: 12px;
}
/* 화면이 좁을 때는 2열로 */

/* =========================
   Image 위 텍스트(상/하) 섹션
   ========================= */
.cB-imgText{
  width: 100%;
  padding: var(--sec-y) var(--pad-x);
}

.cB-imgText__frame{
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f3f3f3;
}

/* 이미지 */
.cB-imgText__img{
  display: block;
  width: 100%;
  height: auto;
}

/* 상단/하단 텍스트 공통 */
.cB-imgText__top,
.cB-imgText__bottom{
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;

  padding:
    clamp(36px, 10vw, 100px)   /* top */
    clamp(16px, 5vw, 50px)    /* right */
    clamp(20px, 6vw, 50px)    /* bottom */
    clamp(16px, 5vw, 50px);   /* left */
}

/* 상단 텍스트 영역 */
.cB-imgText__top{
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.28),
    rgba(0,0,0,.14),
    rgba(0,0,0,0)
  );
}

/* 하단 텍스트 영역 */
.cB-imgText__bottom{
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.26),
    rgba(0,0,0,.12),
    rgba(0,0,0,0)
  );
}

/* 텍스트 스타일 */
.cB-imgText__p{
  margin: 0;
  color: #fff;
  font-family: var(--font);
  font-size: clamp(14px, 2.8vw, 18px);
  line-height: 1.55;
  letter-spacing: -0.01em;

  /* 한글/영문 단어 단위 줄바꿈 */
  word-break: keep-all;
  overflow-wrap: break-word;

  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.cB-imgText__p + .cB-imgText__p{
  margin-top: 10px;
}

/* 하단 문구는 살짝 강조(원하면 삭제 가능) */
.cB-imgText__p--bottom{
  font-weight: 600;
}

/* 모바일에서 패딩 살짝 자동 조정 */
@media (max-width: 420px){
  .cB-imgText__top,
  .cB-imgText__bottom{
    padding: 14px 14px;
  }
}

/* PRICE BAR 전체 링크용 */
.pricebar-link{
  display: block;
  text-decoration: none;
  color: inherit;
}

.pricebar-link:visited,
.pricebar-link:hover,
.pricebar-link:active{
  color: inherit;
}

/* 클릭 가능하다는 UX 힌트 (선택) */
.pricebar-link .pricebar{
  cursor: pointer;
}

.accent{
  color: var(--accent);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.h1 .accent,
.h2 .accent,
.h3 .accent{
  color: var(--accent);
  font-size: inherit;
  font-weight: inherit;
}

/* =========================
   PRODUCT SET 2-COLUMN
   ========================= */
.review--set-2col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* 모바일에서는 1단 */
@media (max-width: 500px){
  .review--set-2col{
    grid-template-columns: 1fr;
  }
}

/* 카드 내부 여백 균형 */
.review--set-2col .review__card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 구매 버튼을 카드 하단에 자연스럽게 */
.review--set-2col .pricebar{
  margin-top: 16px;
}

.review--set-1col{
	width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}