.chemistry-skin {
  color: var(--xet-theme-text-base-color);
}
.chemistry-skin .chemistry__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  height: 60px;
}
.chemistry-skin .chemistry__title .title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--xet-theme-text-strong-color);
}
.chemistry-skin .chemistry__title .title small {
  color: var(--xet-theme-text-base-color);
}
.chemistry-skin .chemistry__title .xet-btn {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.chemistry-skin .chemistry__title .xet-btn.close {
  left: auto;
  right: 0;
}
.chemistry-skin .chemistry__title .xet-btn.back {
  left: 0;
}
.chemistry-skin .chemistry__index form .control-group .controls {
  position: relative;
}
.chemistry-skin .chemistry__index form .control-group .controls input[type=text] {
  padding-right: 100px;
}
.chemistry-skin .chemistry__index form .control-group .radio-group {
  display: flex;
  align-items: center;
  padding: 4px;
  overflow: hidden;
  border-radius: 60px;
  background-color: #8080804D;
}
.chemistry-skin .chemistry__index form .control-group .radio-group > label {
  flex-grow: 1;
  border-radius: 60px;
}
.chemistry-skin .chemistry__index form .xet-btn.btn-submit {
  border-radius: 16px;
}
.chemistry-skin .chemistry__index section {
  display: block;
  padding: 20px;
  border-radius: 20px;
  background-color: #8080804D;
}
.chemistry-skin .chemistry__index .manse__log {
  margin-top: 20px;
}
.chemistry-skin .chemistry__view {
  margin-bottom: 20px;
}
.chemistry-skin .chemistry__view > header {
  margin-bottom: 20px;
}
.chemistry-skin .chemistry__view > header > div {
  display: flex;
  align-items: center;
  gap: 16px;
}
.chemistry-skin .chemistry__view > header > div .item {
  flex: 1;
  text-align: center;
}
.chemistry-skin .chemistry__view > header > div .item > img {
  height: 130px;
}
.chemistry-skin .chemistry__view > header > div .item > .subject {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  margin-top: 16px;
  color: var(--xet-theme-text-strong-color);
}
.chemistry-skin .chemistry__view > header > div .item > .subject > span {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 40px;
  background-color: #8080804D;
}
.chemistry-skin .chemistry__view .ach-border {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  width: 100%;
  height: 56px;
  border: 1px solid var(--xet-theme-border-color);
  color: var(--xet-theme-text-strong-color);
  background-color: #8080804D;
}
.chemistry-skin .chemistry__view .ach-border .ach-title {
  position: absolute;
  top: 0;
  left: 20px;
  display: flex;
  align-items: center;
  height: inherit;
  font-weight: bold;
}
.chemistry-skin .chemistry__view .ach-border .ach-score {
  position: absolute;
  top: 0;
  /* right: 20px; */
  display: flex;
  align-items: center;
  height: inherit;
  font-size: 20px;
  font-weight: 700;
}
.chemistry-skin .chemistry__view .ach-border .ach-line {
  background-color: #FF2D55;
  height: 100%;
}
.chemistry-skin .chemistry__view section {
  padding: 20px;
  border-radius: 20px;
  background-color: #8080804D;
}
.chemistry-skin .chemistry__view section.summary {
  padding: 0;
  display: flex;
  justify-content: center;
  background-color: transparent;
}
.chemistry-skin .chemistry__view section.summary > div > div + div {
  margin-top: 12px;
}
.chemistry-skin .chemistry__view section.summary strong {
  color: var(--xet-theme-text-strong-color);
}
.chemistry-skin .chemistry__view section.summary ul {
  display: flex;
  gap: 8px;
}
.chemistry-skin .chemistry__view section.summary ul li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  border-radius: 32px;
  overflow: hidden;
  padding: 0 8px;
  background-color: rgba(255, 255, 255, 0.12);
}
.chemistry-skin .chemistry__view section.summary ul li + li {
  margin-top: 0 !important;
}
.chemistry-skin .chemistry__view section + section {
  margin-top: 20px;
}
.chemistry-skin .chemistry__view section .__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--xet-theme-text-strong-color);
}
.chemistry-skin .chemistry__view section .__title small {
  font-size: 14px;
  font-weight: normal;
  color: var(--xet-theme-text-base-color);
}
.chemistry-skin .chemistry__view section .item + .item {
  margin-top: 16px;
}
.chemistry-skin .chemistry__view section .item .__small_title {
  position: relative;
  text-align: center;
  font-size: 12px;
}
.chemistry-skin .chemistry__view section .item .__small_title::after, .chemistry-skin .chemistry__view section .item .__small_title::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background-color: var(--xet-theme-border-color);
}
.chemistry-skin .chemistry__view section .item .__small_title::after {
  right: 0;
}
.chemistry-skin .chemistry__view section .item .__small_title::before {
  left: 0;
}
.chemistry-skin .chemistry__view section .item ul {
  display: flex;
  gap: 8px;
}
.chemistry-skin .chemistry__view section .item ul > li {
  flex-grow: 1;
  text-align: center;
}
.chemistry-skin .chemistry__view section .item ul > li > img {
  width: 100%;
}
.chemistry-skin .chemistry__view section .item ul.round > li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  border-radius: 32px;
  overflow: hidden;
  padding: 0 8px;
  color: var(--xet-theme-text-strong-color);
  background-color: rgba(255, 255, 255, 0.08);
}
.chemistry-skin .chemistry__view section .item .hang5_bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--xet-theme-text-strong-color);
}
.chemistry-skin .chemistry__view section .item .hang5_bar .bar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: center;
  height: 100px;
}
.chemistry-skin .chemistry__view section .item .hang5_bar .bar > div {
  width: 100%;
}
.chemistry-skin .chemistry__view section .item .hang5_bar .bar > span {
  display: block;
  width: 100%;
  border-radius: 12px;
  background-color: #777;
}
.chemistry-skin .chemistry__view section .item .hang5_bar .hangmok {
  border-radius: 10px;
}
.chemistry-skin .chemistry__view section .item .hang5_bar .hang-geum {
  background-color: #000;
}
.chemistry-skin .chemistry__view section .item .hang5_bar .hang-mok {
  background-color: #fff;
  color: #111;
}
.chemistry-skin .chemistry__view section .item .hang5_bar .hang-su {
  background-color: #FFD60A;
  color: #111;
}
.chemistry-skin .chemistry__view section .item .hang5_bar .hang-hwa {
  background-color: #FF453A;
}
.chemistry-skin .chemistry__view section .item .hang5_bar .hang-to {
  background-color: #30D158;
}
.chemistry-skin .chemistry__view table {
  width: 100%;
  border-collapse: collapse;
}
.chemistry-skin .chemistry__view table tr {
  padding: 12px 0;
}
.chemistry-skin .chemistry__view table tr td {
  text-align: center;
  padding: 4px;
  font-size: 12px;
  white-space: nowrap;
}
.chemistry-skin .chemistry__view table tr td.active {
  font-weight: 700;
  background-color: var(--xet-theme-primary-color);
  color: #111;
}
.chemistry-skin .chemistry__view table tr td.red {
  color: #990000;
}
.chemistry-skin .chemistry__view table tr td pre {
  margin: 0;
}

.chemistry-skin .chemistry__view .ach-border {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: rgba(255,255,255,0.08);
}

/* === �ִϸ��̼� �� === */
.chemistry-skin .chemistry__view .ach-border .ach-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 16px 0 0 16px; /* ������ ���� */
  background: linear-gradient(90deg, #ff2d55, #ff4d6e, #ff2d55);
  overflow: hidden;
  z-index: 1;
}

.chemistry-skin .chemistry__view .ach-border .ach-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-25deg);
  animation: ach-shimmer 2.5s infinite linear;
  z-index: 1;
}

@keyframes ach-shimmer {
  100% { left: 150%; }
}

/* === 텍스트 색상 === */
.chemistry-skin .chemistry__view .ach-border .ach-title,
.chemistry-skin .chemistry__view .ach-border .ach-score {
  position: relative;
  z-index: 2;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ==========================================================
   궁합테스트 결과 화면 — 앱 디자인 반응형 (2026-09-28)
   앱(궁합 정보) 화면과 톤을 맞춘 밝은 테마. 사이트 전체 다크
   테마와 무관하게 이 페이지(.chemistry-light) 안에서만 override.
   ========================================================== */
.chemistry-light.chemistry-skin {
  color: #1F1F1F;
}
.chemistry-light .chemistry__title .title {
  color: #1F1F1F;
}
.chemistry-light .chemistry__title .xet-btn {
  background-color: #F5F5F7;
  color: #1F1F1F;
}
.chemistry-light .chmistry_view {
  max-width: 480px;
  margin: 0 auto;
}

/* 캐릭터 헤더 */
.chemistry-light .chemistry__view > header > div .item > img {
  height: clamp(88px, 24vw, 130px);
  width: auto;
}
.chemistry-light .chemistry__view > header > div .item > .subject {
  color: #1F1F1F;
}
.chemistry-light .chemistry__view > header > div .item > .subject > span {
  background-color: #F5F5F7;
  color: #1F1F1F;
}

/* 서로의 궁합 — 진행바 + 하트 */
.chemistry-light .chemistry__view .ach-border {
  height: auto;
  padding: 18px 20px 22px;
  border-radius: 20px;
  border: none;
  background-color: #FDECEF;
  display: block;
}
.chemistry-light .chemistry__view .ach-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.chemistry-light .chemistry__view .ach-title {
  position: static;
  height: auto;
  font-size: 15px;
  font-weight: 700;
  color: #1F1F1F;
  text-shadow: none;
}
.chemistry-light .chemistry__view .ach-score {
  position: static;
  height: auto;
  font-size: 30px;
  font-weight: 800;
  color: #FF5B79;
  text-shadow: none;
}
.chemistry-light .chemistry__view .ach-score .unit {
  font-size: 18px;
  font-weight: 700;
  margin-left: 1px;
}
.chemistry-light .chemistry__view .ach-track {
  position: relative;
  height: 10px;
  border-radius: 10px;
  background-color: #FBD3DA;
}
.chemistry-light .chemistry__view .ach-track .ach-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #FF8FA3, #FF5B79);
}
.chemistry-light .chemistry__view .ach-track .ach-line::after {
  content: none;
}
.chemistry-light .chemistry__view .ach-heart {
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FF5B79;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(255, 91, 121, 0.5);
}

/* 끌림 / 결 / 보완 — 원형 게이지 3개 */
.chemistry-light .sub-scores {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 20px 0;
}
.chemistry-light .sub-score-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.chemistry-light .ring {
  --size: 84px;
  --thickness: 9px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(#FF5B79 calc(var(--pct) * 1%), #F2E7E9 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.chemistry-light .ring::before {
  content: "";
  position: absolute;
  inset: var(--thickness);
  border-radius: 50%;
  background: #fff;
}
.chemistry-light .ring span {
  position: relative;
  z-index: 1;
  font-size: 17px;
  font-weight: 800;
  color: #1F1F1F;
  white-space: nowrap;
}
.chemistry-light .ring span small {
  font-size: 11px;
  font-weight: 700;
  margin-left: 1px;
}
.chemistry-light .sub-score-label {
  font-size: 12px;
  font-weight: 600;
  color: #6B6B6B;
  text-align: center;
  line-height: 1.3;
  word-break: keep-all;
}

/* 궁합 특징 / 장점 / 단점 / 팁 카드 */
.chemistry-light .chemistry__view section {
  background-color: #F7F7F9;
  color: #1F1F1F;
}
.chemistry-light .chemistry__view section .__title {
  color: #1F1F1F;
}
.chemistry-light .chemistry__view section .__title small {
  color: #6B6B6B;
}
.chemistry-light .chemistry__view section > div > div {
  color: #3A3A3A;
  line-height: 1.6;
  font-size: 14px;
}

/* 좁은 화면(작은 폰) 대응 */
@media (max-width: 360px) {
  .chemistry-light .sub-scores {
    gap: 4px;
  }
  .chemistry-light .ring {
    --size: 72px;
    --thickness: 7px;
  }
  .chemistry-light .ring span {
    font-size: 14px;
  }
  .chemistry-light .chemistry__view > header > div {
    gap: 8px;
  }
}

/* 태블릿 이상 — 카드 폭 고정, 가운데 정렬 */
@media (min-width: 768px) {
  .chemistry-light .ring {
    --size: 96px;
  }
  .chemistry-light .sub-score-label {
    font-size: 13px;
  }
}

/* ==========================================================
   궁합테스트 배경 전체 화이트 전환 (2026-09-28)
   사이트 다크 테마(body.color_scheme_dark)와 무관하게, 이 페이지의
   콘텐츠 영역만 흰 배경으로 덮어쓴다. 헤더(사주연 로고바)는 그대로 둔다.
   ========================================================== */
body:has(.chemistry-light) .layout-content,
body:has(.chemistry-light) .xet-container,
body:has(.chemistry-light) .xet-content {
  background: #fff !important;
}
.chemistry-light .chemistry__title .xet-btn.back {
  background-color: #F5F5F7;
  color: #1F1F1F;
}
.chemistry-light .xet-btn.btn-submit {
  background: #FF5B79;
  color: #fff;
  border: none;
  height: 52px;
  font-size: 16px;
  font-weight: 700;
}
.chemistry-light input[type=text].goldglow {
  background: #fff;
  color: #1F1F1F;
  border: 1px solid #E3E3E8;
}