/* ================================================================
   청춘배낭 상품 상세 — 시안 반영판 (shop/item2_2.php 전용)
   토큰·리셋은 youth-tokens / youth-main / youth-about 을 그대로 쓴다.
   여기서는 이 화면 고유 요소(.it2-*)와 공용 회차 카드(.ccb-round)만 정의한다.

   주의: youth-about.css 뒤에 로드되어야 한다. .ccb-about 의 h1/h2/p 규칙을
   여기서 한 단계 위 특이성(.ccb-item2)으로 덮기 때문이다.
   ================================================================ */

.ccb-item2 {
  padding: 0 0 48px;
}

/* hidden 이 레이아웃 display 에 밀리지 않게 못을 박는다. */
.ccb-item2 [hidden] {
  display: none !important;
}

/* ---- 히어로 ---- */

/* 포스터 칸은 고정폭이다. 비율(fr)로 두면 화면이 넓어질수록 같이 커진다.

   좌우 여백을 48px -> 30px 로 줄이고 줄어든 만큼(36px)을 전부 포스터에 줬다.
   오른쪽 칸은 504px 그대로다:  1200 - 30*2 - 80(간격) = 1060 = 556 + 504

   0 으로 없애지 않은 이유: 왼쪽 노란 별이 포스터 밖으로 26px 나가 있는데
   .ccb-main 이 overflow:hidden 이라 여백이 0 이면 별이 잘려 사라진다.
   30px 은 그 별이 딱 들어가는 최소값이다. */
.ccb-item2 .it2-hero {
  display: grid;
  grid-template-columns: minmax(0, 556px) minmax(0, 1fr);
  align-items: start;
  gap: 80px;
  padding: 56px 30px 46px;
}

/* ---- 포스터 ---- */

.ccb-item2 .it2-art {
  position: relative;
}

.ccb-item2 .it2-photo {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #fffdf8;
  box-shadow: 0 16px 34px rgba(31, 49, 68, 0.16);
  transform: rotate(-1.1deg);
}

.ccb-item2 .it2-photo img {
  width: 100%;
  height: auto;
}

/* 종이 테이프. 에셋이 세로 포스터용으로 없어 CSS 로 만든다 —
   시안의 찢어진 프레임은 전부 가로 사진 전용이라 세로에 씌우면 비율이 깨진다.

   기준은 .it2-photo 가 아니라 .it2-art 다. 사진 상자는 둥근 모서리를 위해
   overflow:hidden 이라, 그 안에 두면 위로 나온 절반이 잘려 '사진 속 베이지 네모'가 된다.
   사진이 -1.1deg 기울어 있어도 회전축이 가운데라 한가운데의 윗변 높이는 그대로다.
   그래서 가운데 정렬만 하면 기울기와 어긋나 보이지 않는다. */
.ccb-item2 .it2-tape {
  position: absolute;
  z-index: 3;
  top: -17px;
  left: 50%;
  width: 138px;
  height: 40px;
  transform: translateX(-50%) rotate(-2.4deg);
  background: rgba(224, 209, 186, 0.82);
  box-shadow: 0 2px 5px rgba(31, 49, 68, 0.14);
}

.ccb-item2 .it2-deco {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* 장식은 포스터 '여백'에 둔다. 사진 위로 올리면 장식이 아니라 얼룩으로 읽힌다 —
   오른쪽 아래 파란 선이 그래서 빠졌다. 같은 이유로 별도 대부분을 바깥에 걸친다. */
.ccb-item2 .it2-deco--star  { left: -26px;  top: -30px; width: 48px; }
.ccb-item2 .it2-deco--blue  { right: -30px; top: 6px;   width: 44px; }

/* 손글씨 문구 */
.ccb-item2 .it2-hand {
  margin: 26px 0 0;
  color: #0a418d;
  font-family: var(--handwriting-font);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.5px;
  text-align: center;
}

/* ---- 제목 묶음 ---- */

.ccb-item2 .it2-tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--yellow);
  color: #4a3000;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.3px;
}

/* 제목과 아이콘을 양 끝으로 벌린다(아이콘 우측 정렬).
   flex 로 하는 이유: 제목 길이가 상품마다 달라서 float 나 여백으로는 자리가 흔들린다. */
.ccb-item2 .it2-title {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  color: var(--navy);
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 950;
  line-height: 1.3;
  letter-spacing: -2px;
  word-break: keep-all;
}

.ccb-item2 .it2-mark {
  position: relative;
  display: inline-block;
  min-width: 0;   /* flex 안에서 긴 제목이 줄바꿈되도록 */
}

/* 마커 이미지(303x66)는 가로로만 늘린다. height:auto 로 두면 글자가 길수록
   세로도 같이 커져서 윗줄까지 노란 띠가 덮는다 — 소개 페이지에서 겪은 함정이다. */
.ccb-item2 .it2-mark img {
  position: absolute;
  z-index: -1;
  left: -4%;
  bottom: -0.1em;
  width: 108%;
  height: 0.62em;
}

/* 제목 줄 오른쪽 끝의 아이콘(청춘미팅=하트 / 입영전야=별).
   flex 아이템이라 vertical-align 은 먹지 않는다 — 첫 줄 높이에 margin 으로 맞춘다. */
.ccb-item2 .it2-sparkle {
  flex: none;
  align-self: flex-start;
  display: block;
  width: 32px;
  height: auto;
  margin-top: 0.16em;
}

.ccb-item2 .it2-lead {
  margin: 16px 0 0;
  color: #0a418d;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: -0.5px;
  word-break: keep-all;
}

/* ---- 아이콘 한 줄 (장소 · 소요 · 남은 자리) ---- */

.ccb-item2 .it2-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 20px 0 0;
  padding: 0 0 22px;
  border-bottom: 1.5px solid var(--line);
  list-style: none;
}

.ccb-item2 .it2-meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.4px;
  white-space: nowrap;
}

.ccb-item2 .it2-meta svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: #0c5ab9;
}

/* ---- 구매박스 ---- */

.ccb-item2 .it2-buy {
  margin-top: 24px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fffdf8;
  box-shadow: 0 10px 26px rgba(31, 49, 68, 0.07);
  scroll-margin-top: 24px;
}

.ccb-item2 .it2-closed {
  margin: 0;
  padding: 18px 0;
  color: #6b7a8f;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.ccb-item2 .it2-field {
  margin-bottom: 18px;
}

.ccb-item2 .it2-field__label {
  display: block;
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.4px;
}

/* JS 가 꺼졌을 때 보이는 원본 select */
.ccb-item2 .it2-fallback select {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
}

.ccb-item2 .it2-fallback label {
  display: none; /* 위에 .it2-field__label 이 이미 있다 */
}

/* ---- 회차 카드 (js/ccb-item-rounds.js 가 만든다. item2_1 과 클래스가 같다) ---- */

.ccb-item2 .it2-rounds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

/* 한 줄에 [날짜] [요일] [시간], 그 아래 줄에 [남은 자리].
   전에는 시간이 따로 줄을 먹어 카드가 세 줄이었는데, 날짜·요일·시간은 한 호흡으로
   읽히는 정보라 굳이 끊을 이유가 없었다. 남은 자리만 아래로 뺀다(성격이 다른 정보다). */
.ccb-item2 .ccb-round {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  justify-content: start;
  align-items: baseline;
  gap: 2px 7px;
  padding: 15px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ccb-item2 .ccb-round:hover:not(:disabled),
.ccb-item2 .ccb-round:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--navy);
  box-shadow: 0 8px 16px rgba(31, 49, 68, 0.13);
}

.ccb-item2 .ccb-round__date {
  color: var(--navy);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.7px;
}

.ccb-item2 .ccb-round__dow {
  color: #6b7a8f;
  font-size: 13px;
  font-weight: 800;
}

.ccb-item2 .ccb-round__time {
  margin-left: 2px;
  color: #0a418d;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.ccb-item2 .ccb-round__left {
  grid-column: 1 / -1;
  margin-top: 8px;
  color: #c0563f;
  font-family: var(--handwriting-font);
  font-size: 16px;
}

.ccb-item2 .ccb-round.is-full {
  cursor: default;
  opacity: 0.5;
}

.ccb-item2 .ccb-round.is-full .ccb-round__left {
  color: #6b7a8f;
}

/* ---- 고른 회차 ---- */

.ccb-item2 .it2-picked {
  margin-top: 4px;
}

.ccb-item2 .it2-picked__empty {
  margin: 0;
  padding: 14px 0;
  color: #6b7a8f;
  font-size: 14px;
  font-weight: 600;
}

.ccb-item2 #sit_sel_option ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 고른 회차 한 줄. 밑줄만 있던 것을 작은 카드로 바꿨다 —
   위 회차 카드와 같은 생김새라 '고른 것이 여기 담겼다' 가 눈으로 이어진다. */
.ccb-item2 #sit_sel_option li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.ccb-item2 #sit_sel_option li:last-child {
  margin-bottom: 0;
}

/* 담겼다는 표시. 마크업을 못 건드리니(shop.js 가 만든다) 글자 앞에 붙인다. */
.ccb-item2 #sit_sel_option .opt_sel_div_ul1_txt::before {
  /* 체크 표시를 글자(✓)로 넣으면 Pretendard 에 없어서 루트 기호처럼 떨어진다.
     폰트에 기대지 않도록 테두리로 직접 그린다. */
  content: "";
  display: inline-block;
  width: 6px;
  height: 11px;
  margin: 0 10px 3px 2px;
  border: solid #0c5ab9;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  vertical-align: middle;
}

.ccb-item2 #sit_sel_option .opt_sel_div_ul1 {
  min-width: 0;
}

/* shop.js 는 float 시절 관습대로 빈 <div class="cb">(clear both)를 끼워 넣는다.
   float 이면 높이만 잡고 사라지지만, 여기는 grid 라 그 빈 div 가 칸을 하나 차지해서
   삭제(X) 버튼이 셋째 칸을 못 얻고 둘째 줄로 밀려 내려갔다.
   마크업은 못 건드리니(shop.js 소관) 화면에서 뺀다. */
.ccb-item2 #sit_sel_option li > .cb,
.ccb-item2 #sit_sel_option .opt_sel_div_ul2 > .cb {
  display: none;
}

/* mobile_layout.css 가 전역으로 이 두 줄을 걸어 둔다 (477~479행, 미디어쿼리 밖이다):
     .opt_sel_div_ul1     { width: 70% }
     .opt_sel_div_ul1_txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 90% }
   좁은 화면에서 '9월 12일 (토) 오후 3시' 가 여기서 잘렸다. 게다가 70% 고정폭이
   grid 의 1fr 칸보다 넓어 삭제(X) 버튼이 셋째 칸을 못 얻고 다음 줄로 밀렸다.
   이 화면에서는 두 줄 다 풀어 준다 — 자리가 모자라면 잘리는 대신 줄바꿈한다. */
.ccb-item2 #sit_sel_option .opt_sel_div_ul1 {
  width: auto;
}

.ccb-item2 #sit_sel_option .opt_sel_div_ul1_txt {
  margin: 0;
  width: auto;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  color: var(--navy);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.4px;
  word-break: keep-all;
}

/* 날짜 줄 / 시간 줄. 위 회차 카드와 같은 구조다 —
   좁은 화면에서 한 줄로 이어 붙이면 '오후 / 3시' 처럼 아무 데서나 접힌다. */
.ccb-item2 #sit_sel_option .ccb-pick__date {
  font-weight: 900;
}

.ccb-item2 #sit_sel_option .ccb-pick__time {
  display: block;
  margin-top: 2px;
  color: #0a418d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

@media (max-width: 560px) {
  .ccb-item2 #sit_sel_option li {
    gap: 8px;
    padding: 12px;
  }

  .ccb-item2 #sit_sel_option .opt_sel_div_ul1_txt {
    font-size: 15px;
  }
}

/* 추가금 0원 표기는 프로그램에서 의미가 없다 — 자리만 차지한다. */
.ccb-item2 #sit_sel_option .opt_sel_div_ul1_pri {
  margin: 2px 0 0;
  color: #6b7a8f;
  font-size: 12px;
  font-weight: 700;
}

.ccb-item2 #sit_sel_option .ops_nums {
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.ccb-item2 #sit_sel_option .ops_nums_inp {
  width: 42px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.ccb-item2 #sit_sel_option .ops_nums button,
.ccb-item2 #sit_sel_option .sit_opt_del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #6b7a8f;
  cursor: pointer;
}

.ccb-item2 #sit_sel_option .sit_opt_del {
  width: 34px;
  border-radius: 9px;
}

.ccb-item2 #sit_sel_option .sit_opt_del:hover {
  background: rgba(192, 86, 63, 0.1);
  color: #c0563f;
}

.ccb-item2 #sit_sel_option .cb {
  display: none;
}

/* ---- 총 금액 ---- */

/* 점선 구분선을 뺐다. 고른 회차 줄이 카드(테두리 있음)로 바뀌면서
   바로 아래 점선과 선이 두 줄로 겹쳐 보였다. 금액은 글자가 크고 굵어
   선 없이도 충분히 구분되므로 여백으로만 끊는다. */
/* 금액 상자 — 단가 줄과 합계 줄을 한 덩어리로 묶는다.
   회차 목록과 버튼 사이에서 '여기가 돈 이야기' 라는 경계가 생긴다. */
.ccb-item2 .it2-sum {
  margin-top: 22px;
  padding: 14px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.ccb-item2 .it2-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ccb-item2 .it2-total__label {
  color: var(--navy);
  font-size: 16px;
  font-weight: 900;
}

/* shop.js 가 '총 금액 : / 숫자 / 원' 을 넣는다. 앞 라벨은 우리가 이미 왼쪽에 뒀으니 가린다. */
/* shop.js 가 넣는 줄은 <dd><span>총 금액 :</span><strong>숫자</strong> 원</dd> 다.
   '원' 은 태그 없는 맨 텍스트라 직접 잡을 수가 없다. dd 를 flex 로 두면 그 맨 텍스트가
   익명 항목이 되어 baseline 정렬에 참여한다 — 숫자와 '원' 의 밑선이 정확히 맞는다.
   (기본 인라인 배치에서는 30px 숫자와 17px '원' 의 line-height 차 때문에
    '원' 이 살짝 떠 보였다.) */
.ccb-item2 #sit_tot_price dd {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
  margin: 0;
  /* 테마 기본 CSS 가 이 dd 에 padding-right:20px 을 걸어 둔다.
     그만큼 '원' 이 오른쪽 끝에서 안으로 들어가 윗줄(단가) 오른쪽 끝과 어긋났다. */
  padding: 0;
  color: var(--navy);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
}

.ccb-item2 #sit_tot_price dd span {
  display: none;
}

.ccb-item2 #sit_tot_price strong {
  font-size: 30px;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: -1.2px;
}


/* 고르기 전 / 고른 뒤 — 무엇을 보일지. 폼의 .is-picked 하나로 갈린다. */
.ccb-item2 .it2-label--picked,
.ccb-item2 #sit_tot_price,
.ccb-item2 .it2-unit {
  display: none;
}

.ccb-item2 .is-picked .it2-label--idle,
.ccb-item2 .is-picked .it2-price {
  display: none;
}

.ccb-item2 .is-picked .it2-label--picked {
  display: block;
}

/* 단가 줄은 flex — 라벨과 값을 좌우로 벌린다. */
.ccb-item2 .is-picked .it2-unit {
  display: flex;
}

.ccb-item2 .is-picked #sit_tot_price {
  display: block;
}

/* 고르기 전에 보이는 참가비. 고른 뒤의 총 금액과 같은 크기로 둬서
   숫자가 바뀌어도 줄 높이가 튀지 않게 한다. */
.ccb-item2 .it2-price {
  color: var(--navy);
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -1.2px;
}

/* 단가 줄 — '1인 참가비 … 160,000원 × 3인'.
   합계 위에 놓고 아래에 실선을 그어, 합계가 이 줄에서 나온 값으로 읽히게 한다.
   숨겨질 때는 선까지 같이 사라지므로 한 명일 때는 상자에 합계 한 줄만 남는다. */
.ccb-item2 .it2-unit {
  display: none;   /* .is-picked 일 때만 켠다 */
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  color: #6b7a8f;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.ccb-item2 .it2-unit__k {
  color: #8a97a8;
  font-weight: 700;
  white-space: nowrap;
}

.ccb-item2 .it2-unit__v {
  text-align: right;
}

.ccb-item2 .it2-unit__v span {
  margin: 0 2px;
  color: #a6b1c0;
  font-weight: 700;
}

/* 총액과 값이 같을 때(1회차 1명) 는 같은 숫자가 두 번 찍히므로 감춘다.
   .is-picked 규칙이 display:block 을 걸어 두기 때문에 그보다 뒤에, 더 구체적으로 쓴다. */
.ccb-item2 .is-picked .it2-unit.is-hide {
  display: none;
}

.ccb-item2 .it2-unit strong {
  color: var(--navy);
  font-weight: 900;
}

/* ---- 버튼 ---- */

.ccb-item2 .it2-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  margin-top: 18px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: #3d2800;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: -0.5px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(255, 184, 0, 0.32);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.ccb-item2 .it2-cta:hover,
.ccb-item2 .it2-cta:focus-visible {
  transform: translateY(-2px);
  background: #ffc529;
  box-shadow: 0 11px 22px rgba(255, 184, 0, 0.4);
}

.ccb-item2 .it2-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  margin-top: 10px;
  padding: 0 18px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.4px;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.ccb-item2 .it2-sub:hover,
.ccb-item2 .it2-sub:focus-visible {
  border-color: var(--navy);
  background: rgba(7, 59, 134, 0.04);
}

.ccb-item2 .it2-sub svg {
  flex: none;
  width: 18px;
  height: 18px;
}

/* 카카오 오픈채팅 버튼.
   카카오 노랑(#FEE500)을 배경으로 쓰지 않는다 — 주 버튼이 이미 노랑이라
   둘이 부딪히면 정작 눌러야 할 결제 버튼이 묻힌다.
   말풍선 아이콘과 글자로 카톡임을 알리고, hover 에서만 노랑을 살짝 비친다. */
.ccb-item2 .it2-sub--kakao svg {
  width: 20px;
  height: 20px;
  color: #3c1e1e;
}

.ccb-item2 .it2-sub--kakao:hover,
.ccb-item2 .it2-sub--kakao:focus-visible {
  border-color: #f2d600;
  background: #fffbe6;
}

/* ---- 상세 ---- */

/* 위 히어로와 왼쪽 선을 맞춘다. 여기만 48px 이면 제목 줄이 어긋나 보인다. */
.ccb-item2 .it2-detail {
  padding: 26px 30px 20px;
}

.ccb-item2 .it2-detail h2 {
  margin-bottom: 22px;
  font-size: clamp(24px, 2.6vw, 32px);
}

/* 상세설명은 관리자가 넣은 HTML 이다. 폭만 잡아주고 내용은 건드리지 않는다. */
.ccb-item2 .it2-detail__body {
  overflow-x: auto;
  border-radius: 18px;
  background: #fff;
}

.ccb-item2 .it2-detail__body img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}


/* ---- 좁은 화면 ---- */

/* 1120px 에서 끊는 이유는 item2_1 과 같다 — 포스터 520 + 간격 80 + 여백 96 을 빼면
   오른쪽 칸이 424px 남는다. 그보다 좁아지면 구매박스가 눌린다. */
@media (max-width: 1120px) {
  .ccb-item2 .it2-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding: 40px 22px 32px;
  }

  /* 쌓이면 포스터가 화면 폭만큼 벌어진다. 2단일 때와 같은 520px 로 묶는다. */
  .ccb-item2 .it2-art {
    max-width: 520px;
    margin: 0 auto;
  }

  .ccb-item2 .it2-photo { transform: none; }

  .ccb-item2 .it2-deco--star  { left: -14px; top: -22px; }
  .ccb-item2 .it2-deco--blue  { right: -16px; }

  .ccb-item2 .it2-detail {
    padding-left: 22px;
    padding-right: 22px;
  }
}

@media (max-width: 560px) {
  .ccb-item2 .it2-rounds {
    grid-template-columns: minmax(0, 1fr);
  }

  .ccb-item2 .it2-buy {
    padding: 20px 18px;
  }

  .ccb-item2 .it2-hand {
    font-size: 21px;
  }

  /* 세 칸(이름 · 수량 · 삭제)을 좁은 화면에서도 유지한다.
     예전에는 두 칸으로 줄여 삭제(X)를 아래로 흘렸는데, 그러면 카드가 두 줄이 되고
     X 가 이름 아래 덩그러니 놓여 무엇을 지우는 버튼인지 읽히지 않았다.
     이름은 자리가 모자라면 두 줄로 접힌다(잘리지 않는다). */
  .ccb-item2 #sit_sel_option li {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
}

/* ---- 고른 회차 줄: 테마 기본 CSS 되돌리기 ----
   theme/basic/css/style.css 476~488 이 이 조각(shop.js 가 만드는 마크업)을
   옛날 float 레이아웃으로 잡아 둔다.

     .opt_sel_div       margin-top:30px; padding-top:30px; border-top:1px solid #eee
     .opt_sel_div_ul1   float:left
     .opt_sel_div_ul2   float:right; width:20%
     .opt_sel_div_ul3   float:right; width:10%; margin-top:10px
     .ops_nums          width:100%; float:right
     .ops_nums_btn-up/down  position:absolute

   그 위에 grid 를 얹으면 인원 조절기 칸이 9px 로 찌그러지고 +/- 버튼은 absolute 라
   밖으로 떠서 사라진다. 화면에는 빈 알약 하나만 남는다(실제로 겪었다).
   그래서 여기서 float/width/position 을 원위치시킨 뒤에야 grid 가 제대로 먹는다.
   파일 끝에 두는 이유: 위쪽 #sit_sel_option 규칙들과 특이성이 같아 뒤에 와야 이긴다. */

.ccb-item2 #sit_sel_option .opt_sel_div {
  /* 테마가 이 줄에 margin-top:30px 를 준다(옛 float 레이아웃 잔재). 그것만 되돌린다.
     여기서 padding-top / border-top 까지 0 으로 밀면 위 카드 규칙의
     padding 과 테두리 윗변까지 같이 지워진다 — 실제로 윗줄 border 가 사라졌었다. */
  margin-top: 0;
}

.ccb-item2 #sit_sel_option .opt_sel_div_ul1,
.ccb-item2 #sit_sel_option .opt_sel_div_ul2,
.ccb-item2 #sit_sel_option .opt_sel_div_ul3,
.ccb-item2 #sit_sel_option .ops_nums {
  float: none;
  width: auto;
  margin-top: 0;
  text-align: left;
}

.ccb-item2 #sit_sel_option .ops_nums_btn-up,
.ccb-item2 #sit_sel_option .ops_nums_btn-down {
  position: static;
}

/* shop.js 가 만드는 DOM 순서는 [이름] [삭제] [수량] 이라 X 가 수량 왼쪽에 온다.
   지우는 버튼은 맨 끝이 맞다. 마크업은 못 건드리니 순서만 바꾼다. */
.ccb-item2 #sit_sel_option .opt_sel_div_ul2 { order: 2; }
.ccb-item2 #sit_sel_option .opt_sel_div_ul3 { order: 3; }

/* ---- 후기 ----
   프로그램은 글로 설명해도 안 와닿는다. 다녀온 사람 한 줄이 그걸 대신한다. */

.ccb-item2 .it2-reviews {
  padding: 10px 30px 24px;
}

/* 평점 요약 — 왼쪽 큰 평점 / 오른쪽 별점 분포 막대 */
.ccb-item2 .it2-rv-summary {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  margin: 18px 0 22px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdf8;
}

.ccb-item2 .it2-rv-summary__score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.ccb-item2 .it2-rv-summary__score .it2-stars {
  flex: 0 0 100%;
  margin-bottom: 4px;
}

.ccb-item2 .it2-rv-summary__score strong {
  color: var(--navy);
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -1.4px;
}

.ccb-item2 .it2-rv-summary__score span {
  color: #6b7a8f;
  font-size: 16px;
  font-weight: 800;
}

.ccb-item2 .it2-rv-summary__score em {
  flex: 0 0 100%;
  margin-top: 2px;
  color: #6b7a8f;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.ccb-item2 .it2-rv-bars {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccb-item2 .it2-rv-bars li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.ccb-item2 .it2-rv-bars li:last-child {
  margin-bottom: 0;
}

.ccb-item2 .it2-rv-bars__label {
  color: #6b7a8f;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.ccb-item2 .it2-rv-bars__track {
  height: 7px;
  border-radius: 999px;
  background: rgba(97, 88, 75, 0.14);
  overflow: hidden;
}

.ccb-item2 .it2-rv-bars__track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--yellow);
}

.ccb-item2 .it2-rv-bars__num {
  color: #6b7a8f;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

/* 후기 제목. 라이브 후기 화면에서 가져온 요소 — 본문보다 이 한 줄이 먼저 읽힌다. */
.ccb-item2 .it2-review__title {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.45;
  word-break: keep-all;
}

.ccb-item2 .it2-reviews h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
}

.ccb-item2 .it2-reviews__score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #6b7a8f;
  font-size: 14px;
  font-weight: 700;
}

.ccb-item2 .it2-reviews__score strong {
  color: var(--navy);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.6px;
}

/* 별점. ★ 글자가 아니라 SVG 라 폰트에 따라 모양이 갈리지 않는다. */
.ccb-item2 .it2-stars {
  display: inline-flex;
  gap: 2px;
}

.ccb-item2 .it2-star {
  width: 15px;
  height: 15px;
  fill: rgba(97, 88, 75, 0.22);
}

.ccb-item2 .it2-star.is-on {
  fill: var(--yellow);
}

.ccb-item2 .it2-review-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccb-item2 .it2-review {
  display: flex;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffdf8;
}

.ccb-item2 .it2-review__photo {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.ccb-item2 .it2-review__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ccb-item2 .it2-review__body {
  min-width: 0;
}

.ccb-item2 .it2-review__text {
  margin: 6px 0 0;
  color: #0a418d;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: -0.3px;
  word-break: keep-all;
}

/* 이름 · 날짜 · [도움이 됐어요] 한 줄.
   좁은 화면에서 이 줄이 213px 까지 줄어드는데(사진 썸네일이 폭을 먹는다),
   그대로 두면 '최○○' 가 '최 / ○○' 로, 날짜가 '2026-07- / 24' 로 쪼개졌다.
   이름·날짜는 자르지 않고, 자리가 모자라면 버튼을 다음 줄로 내린다. */
.ccb-item2 .it2-review__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 12px 0 0;
  color: #6b7a8f;
  font-size: 13px;
  font-weight: 700;
}

.ccb-item2 .it2-review__meta strong,
.ccb-item2 .it2-review__meta > span {
  white-space: nowrap;
}

.ccb-item2 .it2-review__meta strong {
  color: var(--navy);
  font-weight: 900;
}

@media (max-width: 1120px) {
  .ccb-item2 .it2-reviews {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 560px) {
  .ccb-item2 .it2-review-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 사진을 카드 위로 올린다.
     좁은 화면에서 사진을 왼쪽에 두면 글이 210px 짜리 좁은 기둥에 갇혀 여섯 줄로 늘어지고,
     사진 없는 카드는 폭을 다 쓰기 때문에 카드마다 글 폭이 달라져 목록이 들쭉날쭉해 보인다.
     세로로 쌓으면 모든 카드의 글 폭이 같아진다. */
  .ccb-item2 .it2-review {
    flex-direction: column;
    gap: 12px;
  }

  .ccb-item2 .it2-review__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .ccb-item2 .it2-review__photo img {
    height: 100%;
  }

  .ccb-item2 .it2-review__more {
    right: 8px;
    bottom: 8px;
    font-size: 12px;
  }

  /* 정렬 4개가 한 줄에 꽉 차 좌우가 답답했다. 살짝 줄여 숨통을 준다. */
  .ccb-item2 .it2-rv-sort {
    gap: 6px;
  }

  .ccb-item2 .it2-rv-sort__btn {
    padding: 6px 11px;
    font-size: 12.5px;
  }

  /* 좁은 화면에서는 버튼을 오른쪽 끝으로 밀지 않는다 —
     밀면 이름·날짜와 같은 줄에 억지로 끼려다 줄이 깨진다. */
  .ccb-item2 .it2-rv-help {
    margin-left: 0;
  }
}

/* 후기 사진 — 여러 장이면 첫 장 위에 '+N'.
   누르면 제목을 누른 것과 같은 후기 전문 팝업이 열리고, 사진은 그 안 슬라이드에서 넘긴다. */
.ccb-item2 .it2-review__photo a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.ccb-item2 .it2-review__more {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(7, 59, 134, 0.82);
  color: #fffdf8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

/* ajax 로 후기를 갈아끼우는 동안. 화면은 그대로 두고 이 구역만 살짝 흐려서
   바뀌는 중이라는 것만 알린다 — 스피너를 넣으면 오히려 화면이 들썩인다. */
.ccb-item2 #it2-rv-zone {
  transition: opacity 0.12s linear;
}

.ccb-item2 #it2-rv-zone.is-loading {
  opacity: 0.45;
  pointer-events: none;
}

/* 정렬 — 라이브 후기 화면의 4버튼(최신·추천·별점높은·별점낮은)을 시안 톤으로.
   후기가 2건 이상일 때만 나온다. 1건이면 눌러도 결과가 같아 자리만 차지한다. */
/* 한 줄을 지킨다. 줄바꿈 대신 가로 스크롤 — 모바일 필터 칩의 보통 방식이다.
   좌우 패딩(22px)을 줄여 자리를 만드는 방법도 있지만, 벌 수 있는 건 12px 남짓이라
   글자가 조금만 길어지면 다시 깨지고, 그 패딩은 위아래 섹션과 좌우선을 맞추는
   기준이라 후기 영역만 줄이면 경계가 어긋나 보인다.
   지금 4개는 390px 에서도 다 들어가서 실제로 스크롤이 생기는 일은 거의 없다 —
   문구가 길어지거나 항목이 늘어날 때를 위한 안전장치다. */
.ccb-item2 .it2-rv-sort {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 16px 0 14px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.ccb-item2 .it2-rv-sort::-webkit-scrollbar {
  display: none;
}

.ccb-item2 .it2-rv-sort__btn {
  flex: 0 0 auto;
}

.ccb-item2 .it2-rv-sort__btn {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf8;
  color: #6b7a8f;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.3px;
  text-decoration: none;
  white-space: nowrap;
}

.ccb-item2 .it2-rv-sort__btn:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.ccb-item2 .it2-rv-sort__btn.is-on {
  border-color: var(--navy);
  background: var(--navy);
  color: #fffdf8;
}

/* 카드의 제목·본문 — 누르면 전문 팝업. <p> 였던 것이 <a> 안의 <span> 이 되어
   display 를 되돌려 준다(안 하면 제목과 본문이 한 줄로 붙는다). */
.ccb-item2 .it2-rv-open {
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.ccb-item2 .it2-rv-open .it2-review__title,
.ccb-item2 .it2-rv-open .it2-review__text {
  display: block;
}

.ccb-item2 .it2-rv-open:hover .it2-review__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ccb-item2 .it2-review__replied {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(12, 90, 185, 0.1);
  color: #0c5ab9;
  font-size: 12px;
  font-weight: 800;
}

/* 페이징 — 한 페이지 6건. 정렬을 유지한 채 페이지만 옮긴다. */
.ccb-item2 .it2-rv-page {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 18px 0 0;
}

.ccb-item2 .it2-rv-page__num,
.ccb-item2 .it2-rv-page__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdf8;
  color: #6b7a8f;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.ccb-item2 .it2-rv-page__num:hover,
.ccb-item2 .it2-rv-page__btn:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.ccb-item2 .it2-rv-page__num.is-on {
  border-color: var(--navy);
  background: var(--navy);
  color: #fffdf8;
}

/* ---- 후기 전문 팝업 ----
   주의: 이 아래 블록만 .ccb-item2 스코프를 붙이지 않는다.
   magnific 은 팝업을 열 때 이 노드를 body 밑(.mfp-content)으로 옮긴다.
   스코프를 붙이면 옮겨진 순간 스타일이 전부 빠진다. */
.it2-rv-modal {
  position: relative;
  max-width: 720px;
  margin: 26px auto;
  padding: 30px 32px 26px;
  border-radius: 20px;
  background: #fffdf8;
  color: #0a418d;
}

.it2-rv-modal .it2-stars {
  display: inline-flex;
  gap: 2px;
}

.it2-rv-modal .it2-star {
  width: 17px;
  height: 17px;
  fill: rgba(97, 88, 75, 0.22);
}

.it2-rv-modal .it2-star.is-on {
  fill: var(--yellow);
}

.it2-rv-modal__title {
  margin: 10px 0 0;
  color: var(--navy);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1.4;
  word-break: keep-all;
}

.it2-rv-modal__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 0;
  color: #6b7a8f;
  font-size: 13px;
  font-weight: 700;
}

.it2-rv-modal__meta strong {
  color: var(--navy);
  font-weight: 900;
}

.it2-rv-modal__body {
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: -0.3px;
  word-break: keep-all;
}

/* 후기 본문에 붙은 사진. 원본이 커도 팝업 폭을 넘지 않게 못을 박는다. */
.it2-rv-modal__body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* 팝업 안 사진 슬라이드. 라이브러리 없이 스크롤 스냅으로 만든다 —
   모바일은 손가락으로 밀면 그대로 넘어가고, PC 는 좌우 화살표를 쓴다.
   (이 블록도 팝업 안이라 .ccb-item2 스코프를 붙이지 않는다.) */
.it2-rv-slide {
  position: relative;
  margin: 18px 0 0;
}

.it2-rv-slide__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: 14px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.it2-rv-slide__track::-webkit-scrollbar {
  display: none;
}

.it2-rv-slide__item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.it2-rv-slide__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.it2-rv-slide__nav {
  position: absolute;
  top: 50%;
  width: 38px;
  height: 38px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(7, 59, 134, 0.72);
  color: #fffdf8;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}

.it2-rv-slide__nav:hover {
  background: var(--navy);
}

.it2-rv-slide__nav--prev { left: 10px; }
.it2-rv-slide__nav--next { right: 10px; }

.it2-rv-slide__count {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(7, 59, 134, 0.78);
  color: #fffdf8;
  font-size: 12px;
  font-weight: 800;
}

.it2-rv-slide__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0;
}

.it2-rv-slide__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(97, 88, 75, 0.25);
}

.it2-rv-slide__dots i.is-on {
  background: var(--navy);
}

.it2-rv-modal__reply {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(7, 59, 134, 0.05);
}

.it2-rv-modal__reply > strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.it2-rv-modal__replytitle {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: 15px;
  font-weight: 800;
}

.it2-rv-modal__replybody {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.75;
}

.it2-rv-modal__replybody img {
  max-width: 100%;
  height: auto;
}

.it2-rv-modal__foot {
  margin: 20px 0 0;
}

/* 도움이 됐어요 — 카드와 팝업 양쪽에 같은 버튼이 있다.
   팝업 쪽이 body 로 옮겨지므로 이 규칙도 스코프를 붙이지 않는다. */
.it2-rv-help {
  margin-left: auto;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #0c5ab9;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.3px;
  cursor: pointer;
}

.it2-rv-modal .it2-rv-help {
  margin-left: 0;
  padding: 7px 16px;
  font-size: 13.5px;
}

.it2-rv-help:hover {
  border-color: #0c5ab9;
}

.it2-rv-help.is-done {
  background: rgba(12, 90, 185, 0.08);
}

.it2-rv-help.is-busy {
  opacity: 0.5;
  pointer-events: none;
}

/* 팝업 바깥 여백 — 모바일에서 좌우가 화면에 붙지 않게. */
.it2-mfp .mfp-content {
  padding: 0 14px;
}

/* 닫기(×) — magnific 기본값이 흰색이다. 어두운 딤 위에 뜨는 사진 갤러리는 그게 맞지만
   이 팝업은 바탕이 흰색이라 흰 × 는 보이지 않는다. mainClass(it2-mfp)로 이 팝업에만
   색을 바꾼다 — 사진 갤러리 쪽은 손대지 않는다. */
.it2-mfp .mfp-close {
  top: 6px;
  right: 8px;
  color: var(--navy);
  opacity: 1;
  font-size: 32px;
  font-weight: 400;
}

.it2-mfp .mfp-close:hover,
.it2-mfp .mfp-close:focus {
  color: #0c5ab9;
  opacity: 1;
}

/* 취소 시점별 환불 표 — 관리자에 '교환/반품 안내' 가 비어 있을 때 쓰는 시안 초안. */
.ccb-item2 .it2-policy__table {
  width: 100%;
  margin: 18px 0 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fffdf8;
}

.ccb-item2 .it2-policy__table th,
.ccb-item2 .it2-policy__table td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  letter-spacing: -0.3px;
  text-align: left;
  word-break: keep-all;
}

.ccb-item2 .it2-policy__table thead th {
  background: rgba(7, 59, 134, 0.06);
  color: var(--navy);
  font-weight: 900;
}

.ccb-item2 .it2-policy__table tbody th {
  width: 46%;
  color: #0a418d;
  font-weight: 700;
}

.ccb-item2 .it2-policy__table tbody td {
  color: var(--navy);
  font-weight: 800;
}

.ccb-item2 .it2-policy__table tr:last-child th,
.ccb-item2 .it2-policy__table tr:last-child td {
  border-bottom: 0;
}

/* 안내 문구. ul 기본 padding-left(18px)를 그대로 두면 표보다 안쪽으로 더 들어가
   왼쪽 선이 어긋난다. 점을 직접 그려서 글줄을 표의 셀 글자(13px)에 맞춘다. */
.ccb-item2 .it2-policy__notes {
  margin: 14px 0 0;
  padding: 0;
  color: #6b7a8f;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: -0.3px;
  word-break: keep-all;
  list-style: none;
}

.ccb-item2 .it2-policy__notes li {
  position: relative;
  padding-left: 13px;
}

.ccb-item2 .it2-policy__notes li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.78em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

@media (max-width: 560px) {
  .ccb-item2 .it2-policy__table th,
  .ccb-item2 .it2-policy__table td {
    padding: 11px 13px;
    font-size: 13.5px;
  }

  .ccb-item2 .it2-policy__table tbody th {
    width: 50%;
  }
}

/* ---- 취소 · 환불 안내 ----
   관리자 > 쇼핑몰 기본설정의 '교환/반품 안내' 를 그대로 싣는다. 비어 있으면 뜨지 않는다. */
.ccb-item2 .it2-policy {
  padding: 10px 30px 24px;
}

.ccb-item2 .it2-policy h2 {
  margin: 0 0 16px;
  font-size: clamp(22px, 2.2vw, 28px);
}

.ccb-item2 .it2-policy__body {
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdf8;
  color: #0a418d;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: -0.3px;
  word-break: keep-all;
}

.ccb-item2 .it2-policy__body img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1120px) {
  .ccb-item2 .it2-policy {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* ---- 좌우 여백 이중 적용 정리 (2026-07-30) ----
   바깥 컨테이너 .inner.subs_wrap 이 1024px 이하에서 좌우 20px 를 이미 준다
   (mobile_layout.css:52). 그 위에 섹션이 또 22px 를 얹어서 실제로는 42px 씩
   들어가 있었다 — 390px 화면에서 좌우로 84px 를 여백에 쓰던 셈이다.

   그래서 1024px 이하에서는 섹션 좌우 패딩을 0 으로 두고 바깥 20px 에 맡긴다.
   1025~1120px 구간은 .subs_wrap 패딩이 아직 없으므로 위쪽 @media(1120px) 의
   섹션 패딩이 그대로 살아 있어야 한다. 이 블록을 그보다 뒤에 두는 이유다. */
@media (max-width: 1024px) {
  .ccb-item2 .it2-hero,
  .ccb-item2 .it2-detail,
  .ccb-item2 .it2-reviews,
  .ccb-item2 .it2-policy {
    padding-left: 0;
    padding-right: 0;
  }

  /* 제목 뒤 노란 마커도 같은 이유로 잘렸다 — 글자보다 왼쪽으로 4% 나가 있는데
     여백이 0 이라 그만큼 화면 밖이다. 왼쪽은 글자에 맞추고 오른쪽으로만 흘린다. */
  .ccb-item2 .it2-mark img {
    left: 0;
    width: 104%;
  }

  /* 위 여백을 0 으로 만들면서 별 장식이 갈 자리가 없어졌다.
     포스터 밖으로 26px 걸쳐 있던 것이 .ccb-main 의 overflow:hidden 에 잘렸다.
     좁은 화면에서는 포스터 모서리에 붙여 둔다 — 잘리는 것보다 낫다. */
  .ccb-item2 .it2-deco--star {
    left: 0;
    top: -22px;
    width: 42px;
  }

  .ccb-item2 .it2-deco--blue {
    right: 0;
    width: 38px;
  }
}