.zuyeog_container {
  display: flex;
  flex-direction: column;

  width: 100%;
}
.zuyeog_gae_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  padding: 2rem 2.8rem;
  width: 100%;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border-radius: var(--border-radius-l);
  margin-top: 2rem;
  margin-bottom: 3rem;
  min-height: 50rem;
}

.zuyeog_gae_title_section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 2rem;
}

.zuyeog_gae_title {
  text-align: center;
  font-size: var(--size-3xl);
  font-weight: var(--weight-bold);
}

.zuyeog_gae_subTitle {
  font-size: var(--size-sm);
  color: var(--color-gray);
  text-align: center;
}

.zuyeog_gae_guide_section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-radius: var(--border-radius-l);
  padding: 2.8rem 2rem;
  margin-bottom: 1.6rem;
}
#zuyeog_gae_guide_btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.6rem;
}
#zuyeog_gae_guide_btn img {
  width: 16rem;
  height: 16rem;
}

.zuyeog_gae_guide_desc {
  font-size: var(--size-sm);
  color: var(--color-white);
  opacity: 0.9;
}
.zuyeog_gae_result_section {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--border-radius-l);
  background-color: var(--color-white);
  width: 100%;
  padding: 2rem;
}
.zuyeog_gae_result_my {
  font-size: var(--size-base);
  margin-bottom: 1.6rem;
  font-weight: var(--weight-large);
}
.zuyeog_gae_result_img_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 6px;
}
.zuyeog_gae_result_img {
  width: 11rem;
  height: 1.8rem;
}
#zuyeog_gae_result_desc {
  font-size: var(--size-xl);
  font-weight: var(--weight-bold);
}
.zuyeog_gae_result_title_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  margin: 1.6rem 0;
}
#zuyeog_gae_result_title {
  text-align: center;
  font-size: var(--size-base);
  font-weight: var(--weight-large);
  line-height: 1.8rem;
}
.zuyeog_gae_result_line {
  height: 1px;
  max-width: 40px;
  flex: 1;
}

.zuyeog_fortune_result_section {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  padding: 2rem 2.8rem;
  width: 100%;

  background-color: white;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border-radius: var(--border-radius-l);
}
#zuyeog_fortune_result {
  font-size: var(--size-base);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
/* ===== 부드러운 전환 ===== */
#zuyeog_gae_select {
  transition: opacity 0.35s ease-out;
}
#zuyeog_gae_select.zuyeog_gae_hiding {
  opacity: 0;
  pointer-events: none;
}

#zuyeog_gae_selected_result {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease-in;
}
#zuyeog_gae_selected_result.zuyeog_gae_visible {
  display: flex;
  opacity: 1;
}

.purple_section {
  background: linear-gradient(135deg, #5b21b6 0%, #4c1d95 100%);
}
.purple_txt {
  color: #6836b3;
}
.purple_container {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 1px solid rgba(139, 92, 246, 0.2);
}
.purple_result_border {
  border: 2px solid #8b5cf6;
}
.purple_left {
  background: linear-gradient(90deg, transparent, #8b5cf6);
}
.purple_right {
  background: linear-gradient(90deg, #8b5cf6, transparent);
}

.gold_section {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}
.gold_txt {
  color: #b8860b;
}
.gold_container {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.gold_result_border {
  border: 2px solid #d4a84b;
}
.gold_left {
  background: linear-gradient(90deg, transparent, #d4a84b);
}
.gold_right {
  background: linear-gradient(90deg, #d4a84b, transparent);
}

.pink_section {
  background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);
}
.pink_txt {
  color: #e11d48;
}
.pink_container {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  border: 1px solid rgba(251, 113, 133, 0.3);
}
.pink_result_border {
  border: 2px solid #fb7185;
}
.pink_left {
  background: linear-gradient(90deg, transparent, #fb7185);
}
.pink_right {
  background: linear-gradient(90deg, #fb7185, transparent);
}

.green_section {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
}
.green_txt {
  color: #059669;
}
.green_container {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid rgba(52, 211, 153, 0.3);
}
.green_result_border {
  border: 2px solid #34d399;
}
.green_left {
  background: linear-gradient(90deg, transparent, #34d399);
}
.green_right {
  background: linear-gradient(90deg, #34d399, transparent);
}

@media screen and (max-width: 400px) {
  #zuyeog_gae_guide_btn img {
    width: 12rem;
    height: 12rem;
  }
  .zuyeog_gae_result_img {
    width: 10rem;
    height: 1.6rem;
  }
}
/* 반응형 */
@media screen and (max-width: 320px) {
  #zuyeog_gae_guide_btn img {
    width: 10rem;
    height: 10rem;
  }
}