/* 후기 AI 요약 (experience/list.skin.php > board_ai_review_summary.inc.php) */

.ai-review-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  position: relative;

  padding: 20px;
  margin-top: 30px;

  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(76, 0, 238, 0.06) 0%, rgba(76, 0, 238, 0) 100%);
}
/* gradient border */
.ai-review-summary::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(166deg, var(--main-color) 17%, var(--sub-color) 65%, #68edf5 113%) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* 스크롤 래퍼 (모바일 상세 뷰에서 카드 전체 스크롤 영역) */
.ai-review-summary .summary-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  width: 100%;
}

/* 헤더 (로고 + 타이틀 + BETA + 안내) */
.ai-review-summary .summary-header {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
}
.ai-review-summary .summary-header .summary-title-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-review-summary .summary-header .ai-logo {
  width: 16px;
  height: 16px;
}
.ai-review-summary .summary-header .summary-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  color: #181c34;
}
.ai-review-summary .summary-header .beta-badge {
  width: 39px;
  height: 16px;
}
.ai-review-summary .summary-header .info-wrap {
  display: flex;
  position: relative;
}
.ai-review-summary .summary-header .btn-info {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: url("../../img/renew/icon/2026/i_info_gray_16.svg") no-repeat center / 16px 16px;
  cursor: pointer;
}

/* 안내 툴팁 */
.ai-review-summary .summary-header .info-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;

  width: 127px;

  padding: 4px 8px;
  border-radius: 8px;
  background: var(--orange-color);

  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: #fff;

  transform: translateX(-50%);
  box-sizing: border-box;
  z-index: 10;
}
.ai-review-summary .summary-header .info-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;

  border: 4px solid transparent;
  border-top: 6px solid var(--orange-color);
  border-bottom: none;

  transform: translateX(-50%);
}
.ai-review-summary .summary-header .info-wrap.is-open .info-tooltip {
  display: block;
}

/* 요약 ↔ 주차별 상세 전환 버튼 (카드 하단 중앙) */
.ai-review-summary .btn-detail {
  display: flex;
  align-items: center;
  gap: 2px;

  padding: 4px 6px 4px 10px;
  border: none;
  border-radius: 900px;
  background: #181c34;

  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.12px;
  color: #fff;

  cursor: pointer;
}
.ai-review-summary .btn-detail::after {
  content: "";
  display: block;

  width: 12px;
  height: 12px;
  background: url("../../img/renew/icon/i_next_white_20.svg") no-repeat center / 12px 12px;

  transform: rotate(90deg);
}
.ai-review-summary .btn-detail .label-detail {
  display: none;
}
.ai-review-summary.is-detail .btn-detail .label-summary {
  display: none;
}
.ai-review-summary.is-detail .btn-detail .label-detail {
  display: block;
}
.ai-review-summary.is-detail .btn-detail::after {
  transform: rotate(-90deg);
}

/* 요약 본문 */
.ai-review-summary .summary-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  width: 100%;
}
.ai-review-summary .product-wrap {
  display: flex;
  align-items: center;
  gap: 2px;

  padding: 4px 10px;
  border-radius: 90px;
  background: #fff;
}
.ai-review-summary .product-wrap .product-name {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.12px;
  color: #181c34;
}
.ai-review-summary .product-wrap .product-score {
  display: flex;
  align-items: center;
  gap: 2px;

  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  color: var(--main-color);
}
.ai-review-summary .product-wrap .product-score::before {
  content: "";
  display: block;

  width: 16px;
  height: 16px;
  background: url("../../img/renew/icon/i_star1_on_blue_16.svg") no-repeat center / 16px 16px;
}
.ai-review-summary .headline {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: #181c34;
}

/* 요약(기본) 뷰 */
.ai-review-summary .summary-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  width: 100%;
}

/* 요약 리스트 — PC 2열 (3개 + 세로 구분선 + 3개) */
.ai-review-summary .summary-list {
  columns: 2;
  column-gap: 41px;
  column-rule: 1px solid #e6e8ec;
}
.ai-review-summary .summary-list li {
  display: flex;
  align-items: flex-start;
  gap: 4px;

  break-inside: avoid;

  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.14px;
  color: #181c34;
}
.ai-review-summary .summary-list li:not(:last-child) {
  margin-bottom: 6px;
}
.ai-review-summary .summary-list li::before {
  content: "";
  display: block;
  flex-shrink: 0;

  width: 2px;
  height: 2px;
  margin-top: 9px;
  background: var(--main-color);
}

/* 주차별 상세 뷰 */
.ai-review-summary .detail-view {
  display: none;
  flex-direction: column;
  gap: 10px;

  width: 100%;
}
.ai-review-summary .detail-view .headline {
  align-self: center;
}
.ai-review-summary.is-detail .detail-view {
  display: flex;
}
.ai-review-summary.is-detail .summary-view,
.ai-review-summary.is-detail .summary-feedback {
  display: none;
}

/* 주차별 타임라인 */
.ai-review-summary .weekly-list {
  display: flex;
  flex-direction: column;
  gap: 24px;

  width: 100%;
}
.ai-review-summary .weekly-list li {
  position: relative;

  padding-left: 58px;
}
.ai-review-summary .weekly-list .week-label {
  position: absolute;
  top: 4px;
  left: 0;

  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.12px;
  color: var(--main-color);
}
/* 타임라인 점 */
.ai-review-summary .weekly-list li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 40px;

  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--main-color);
}
/* 타임라인 연결선 */
.ai-review-summary .weekly-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 43.5px;

  width: 1px;
  height: calc(100% + 8px);
  background: var(--border-color);
}
.ai-review-summary .weekly-list .week-text {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.15px;
  color: #181c34;
}

/* FAQ */
.ai-review-summary .faq-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;

  width: 100%;
  margin-top: 10px;
}
.ai-review-summary .faq-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;

  padding: 2px 10px;
  border-radius: 90px;
  background: var(--sub-color);

  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  color: #fff;
}
.ai-review-summary .faq-item {
  display: flex;
  flex-direction: column;
  gap: 4px;

  width: 100%;
}
.ai-review-summary .faq-question {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.14px;
  color: #181c34;
}
.ai-review-summary .faq-answer {
  padding: 8px 14px;
  border-radius: 8px;
  background: #f3f5f8;

  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.15px;
  color: #181c34;
}

/* 상세 뷰 하단 안내문구 */
.ai-review-summary .detail-notice {
  margin-top: 10px;

  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.12px;
  color: var(--gray-font-color);
}

/* 요약 피드백 */
.ai-review-summary .summary-feedback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
}
.ai-review-summary .summary-feedback span {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.12px;
  color: var(--gray-font-color);
}
.ai-review-summary .summary-feedback .btn-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-review-summary .summary-feedback .btn-good,
.ai-review-summary .summary-feedback .btn-hate {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: url("../../img/renew/icon/i_good_gray_16.svg") no-repeat center / 16px 16px;
  cursor: pointer;
}
.ai-review-summary .summary-feedback .btn-hate {
  background-image: url("../../img/renew/icon/i_hate_gray_16.svg");
}
.ai-review-summary .summary-feedback .btn-good.is-active {
  background-image: url("../../img/renew/icon/i_good_off_blue_16.svg");
}
.ai-review-summary .summary-feedback .btn-hate.is-active {
  background-image: url("../../img/renew/icon/i_hate_off_blue_16.svg");
}

/* -----------------------------------------------------------
  ------ mobile ------
--------------------------------------------------------------  */
/* 1열 리스트 + 상세 뷰 카드 전체 스크롤 */
.mobile .ai-review-summary {
  gap: 10px;
  padding: 14px 16px;
  margin: 0 5%;
  margin-top: 20px;
}
.mobile .ai-review-summary .summary-body {
  gap: 10px;
}
.mobile .ai-review-summary .summary-view {
  gap: 10px;
}
.mobile .ai-review-summary .headline {
  text-align: center;
}
.mobile .ai-review-summary .summary-body .summary-list {
  columns: auto;
  column-gap: normal;
  column-rule: none;

  width: 100%;
}
.mobile .ai-review-summary .detail-view .headline {
  font-size: 14px;
  letter-spacing: -0.14px;
}
.mobile .ai-review-summary .weekly-list {
  gap: 16px;
  margin-bottom: 0;
}
.mobile .ai-review-summary .weekly-list .week-label {
  top: 1%;
}
/* 스크롤 하단 여백*/
.mobile .ai-review-summary .detail-view {
  padding-bottom: 10px;
}
/* 상세 뷰 — 카드 전체(헤더 포함) 스크롤, 버튼은 하단 고정 */
.mobile .ai-review-summary.is-detail .summary-inner {
  overflow-y: auto;

  max-height: 350px;
  margin-bottom: 34px; /* 하단 고정 버튼(24px) + 간격(10px) 영역 — 스크롤 콘텐츠와 버튼이 겹치지 않게 확보 */
}
.mobile .ai-review-summary.is-detail .btn-detail {
  position: absolute;
  bottom: 14px;
  left: 50%;

  transform: translateX(-50%);
  z-index: 1;
}
/* 스크롤 하단 페이드 — 스크롤 잘림선(패딩 14px + 버튼 영역 34px 위)에 맞춤 */
.mobile .ai-review-summary.is-detail::after {
  content: "";
  position: absolute;
  bottom: 48px;
  left: 0;

  width: 100%;
  height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);

  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s;
}
/* 스크롤 최하단 도달 시 페이드 숨김 (js에서 is-scroll-end 토글) */
.mobile .ai-review-summary.is-detail.is-scroll-end::after {
  opacity: 0;
}
.mobile .ai-review-summary .weekly-list .week-text {
  font-size: 14px;
  letter-spacing: -0.14px;
  margin-bottom: 0;
}
.mobile .ai-review-summary .faq-question {
  font-size: 13px;
  letter-spacing: -0.13px;
}
.mobile .ai-review-summary .faq-answer {
  margin-bottom: 0;
  font-size: 14px;
  letter-spacing: -0.14px;
}
.mobile .ai-review-summary .btn-detail {
  padding: 3px 4px 3px 8px;
}
.mobile .ai-review-summary .detail-notice {
  margin-bottom: 0;
}