/* AI 추천 검진항목 소개 페이지 전용 스타일 */

/* AI 서비스 소개 섹션 */

.ai-intro-section {flex-direction: column; background:#E6E9EF; border-radius: 15px; margin-bottom: 40px;display: flex;align-items: center;justify-content: space-between;gap: 6px;background: radial-gradient(100% 100% at 4% 3%, #FCB6CA 0%, transparent), radial-gradient( 100% 100% at var(--g2-1-x-position) var(--g2-1-y-position), #1d1ba7 -32%, transparent ), radial-gradient( 100% 100% at var(--g2-2-x-position) var(--g2-2-y-position), #af8eff 0%, transparent ), #7165e3;animation-name: g-2; animation-iteration-count: infinite; animation-duration: 10s; transition-timing-function: ease-in-out;}
@property --g2-1-x-position { syntax: "<percentage>"; inherits: false; initial-value: 87.96875%; }
@property --g2-1-y-position { syntax: "<percentage>"; inherits: false; initial-value: 91.1328125%; }
@property --g2-2-x-position { syntax: "<percentage>"; inherits: false; initial-value: 13.398437500000002%; }
@property --g2-2-y-position { syntax: "<percentage>"; inherits: false; initial-value: 82.734375%; }
:root {--g2-1-x-position: 87.96875%;
  --g2-1-y-position: 91.1328125%;
  --g2-2-x-position: 13.398437500000002%;
  --g2-2-y-position: 82.734375%;}
@keyframes g-2 { 50% { --g2-1-x-position: 15%; --g2-1-y-position: 15%; --g2-2-x-position: 61.21093749999999%; --g2-2-y-position: 13.750000000000002%; } }






.ai-intro-section .icon {position:relative; bottom:-117px; margin:0 auto;width: 450px;}
.ai-intro-header {flex: 1; margin-top: 50px}
.ai-intro-header h2 {font-size: 40px;font-weight: bold;color: #FFFFFF;margin-bottom: 6px;letter-spacing: -1.5px;text-align: center;}
.ai-intro-description {font-size: 20px;color: #FFFFFF;line-height: 1.2;letter-spacing: -0.5px; text-align: center}
.ai-intro-image {flex-shrink: 0;}
.ai-intro-image img {width: 400px;height: auto;display: block;}

/* AI 서비스 영역 */
.ai-service {background: #FFF;padding-top: 118px }
.ai-service-buttons {display: flex;gap: 5px;}
.ai-service-btn {flex: 1;padding: 20px 30px;font-size: 20px;font-weight: bold;text-align: center;border-radius: 35px;background-color: #F7F4FE;color: #666666;text-decoration: none;transition: all 0.3s ease;letter-spacing: -0.8px;}
.ai-service-btn.active {background-color: #BC9AF4;color: #ffffff;}

.ai-recommendation-intro {padding: 118px 0px 20px 0px;background-color: #ffffff;}
.main-title-section {text-align: center;margin-bottom: 40px;border-bottom: 1px solid #333333;}
.main-title {font-size: 45px;font-weight: normal;color: #000000;line-height: 1.3;letter-spacing: -3.6px;text-align: left;}
.title-highlight {color: #7d73f6;font-size: 45px;letter-spacing: -2.6px;font-weight: bold;}

.intro-content {display: flex;align-items: center;gap: 10px;}
.intro-text {flex: 1;text-align: left;}
.intro-text p {font-size: 20px;color: #666666;line-height: 1.3;letter-spacing: -0.8px;margin-bottom: 10px;}
.intro-image {flex-shrink: 0;}
.intro-image img {max-width: 200px;height: auto;}

.section-divider {text-align: center;margin: 60px 0;}
.section-divider hr {border: none;height: 1px;background-color: #e0e0e0;margin: 20px 0;}
.target-section
.tap-icon {position: absolute;left: 50%;top: 32px;transform: translateX(-50%);z-index: 1;}
.target-section .tap-icon img {width: 60px;height: auto;}

.section-title {font-size: 32px;font-weight: bold;color: #000000;text-align: center;letter-spacing: -1.2px;margin-bottom: 45px;}
.target-section {position: relative;margin-bottom: 50px;}
.target-list-box {background-color: #f5f5f5;border-radius: 10px;padding: 40px 20px 20px 30px;margin-bottom: 40px;}
.target-list {list-style: none;padding: 0;margin: 0;}
.target-list li {position: relative;padding-left: 15px;margin-bottom: 10px;font-size: 18px;color: #000000;line-height: 1.3;letter-spacing: -0.6px;}
.target-list li:before {content: "•";position: absolute;left: 0;color: #7d73f6;font-weight: bold;}
.features-section {margin: 50px 0;}
.feature-item {display: flex;align-items: flex-start;margin-bottom: 50px;}
.feature-number {flex-shrink: 0;width: 65px;height: 65px;background-color: #dbcffd;border-radius: 15px;display: flex;align-items: center;justify-content: center;margin-right: 20px;}
.feature-number span {font-size: 28px;font-weight: bold;color: #ffffff;}
.feature-content {flex: 1;}

.feature-title {font-size: 26px;font-weight: bold;color: #7d73f6;line-height: 1.3;letter-spacing: -1.3px;margin-bottom: 20px;}
.feature-description {font-size: 18px;color: #666666;line-height: 1.4;letter-spacing: -0.8px;}
.faq-section {margin: 60px 0;}
.faq-container {background-color: #51308e;border-radius: 10px;padding: 40px 30px;}
.faq-title {font-size: 48px;font-weight: bold;color: #ffffff;margin-bottom: 40px;}
.faq-item {margin-bottom: 40px;}
.faq-item:last-child {margin-bottom: 0;}
.faq-question {font-size: 20px;font-weight: bold;color: #ffffff;line-height: 1.4;letter-spacing: -1px;margin-bottom: 15px;}
.q-mark {font-size: 20px;color: #ff7733;}
.faq-answer {font-size: 16px;color: #dbcffd;line-height: 1.4;letter-spacing: -0.8px;margin-bottom: 10px;}
.faq-answer-list {list-style: none;padding: 0;margin: 15px 0;}
.faq-answer-list li {position: relative;padding-left: 20px;margin-bottom: 10px;font-size: 16px;color: #dbcffd;line-height: 1.6;letter-spacing: -0.8px;}
.faq-answer-list li:before {content: "•";position: absolute;left: 0;color: #ff7733;}
.notice-section {display: flex;align-items: flex-start;margin-top: 50px;}
.notice-content {flex: 1;}
.notice-title {font-size: 22px;font-weight: bold;color: #e46182;margin-bottom: 15px;}
.notice-text {font-size: 16px;color: #000000;line-height: 1.4;letter-spacing: -0.6px;}
.notice-sub-text {font-size: 15px;color: #000000;line-height: 1.6;letter-spacing: -0.6px;}
.notice-icon {text-align: right;}
.notice-icon img {width: 120px;height: auto;}
.cta-section {text-align: center;margin-bottom: 50px;}
.cta-button {background-color: #7d73f6;color: #ffffff;font-size: 26px;font-weight: bold;padding: 25px 0px;border: none;border-radius: 10px;letter-spacing: -1.3px;cursor: pointer;transition: background-color 0.3s ease;width: 100%;}
.cta-button:hover {background-color: #6b5ce7;}
.cta-button:active {background-color: #5a4bd6;}

.ai-description-text { position: relative; margin-bottom: 37px; }
.ai-description-text p { padding-left: 35px; font-weight: 400; font-size: 18px; line-height: 1.21; letter-spacing: -0.02em; color: #000000; margin: 0; max-width: 500px; }

.ai-illustration { position: absolute; right: 0; top: -55px; width: 200px; height: 200px; z-index: 10; }
.ai-illustration img { width: 100%; height: 100%; object-fit: contain; }

/* 반응형 디자인 */
@media (max-width: 768px) {
  .ai-recommendation-intro {padding: 100px 0px 15px 0px;}
  .main-title {font-size: 26px;line-height: 1.3;letter-spacing: -2px;}

  .title-highlight {font-size: 26px;letter-spacing: -2px;}
  .intro-content {flex-direction: column;text-align: center;margin-top: 20px;}
  .intro-image img {max-width: 130px;}
  .intro-text {text-align: left;}

  .intro-text p {font-size: 16px;}
  .section-title {font-size: 22px;}
  .target-list-box {padding: 40px 15px 20px 15px;}
  .target-list li {font-size: 15px;}
  .feature-item {flex-direction: column;align-items: center;text-align: center;}
  .feature-number {margin-right: 0;margin-bottom: 15px;width: 55px;height: 55px;}
  .feature-number span {font-size: 24px;}
  .feature-title {font-size: 22px;text-align: center;}
  .feature-description {font-size: 15px;text-align: center;}
  .faq-container {padding: 30px 20px;}
  .faq-title {font-size: 36px;}
  .faq-question {font-size: 18px;}
  .faq-answer {font-size: 15px;}
  .faq-answer-list li {font-size: 15px;}
  .notice-section {flex-direction: column;text-align: center;}
  .notice-icon img {width: 100px;}
  .notice-title {font-size: 20px;text-align: left;}
  .notice-text,
  .notice-sub-text {font-size: 14px;text-align: left;}
  .cta-button {font-size: 22px;padding: 20px 40px;}

  .ai-description-text { padding-top:10px; margin-bottom: 14px; }
  .ai-description-text p { padding-left: 0px; font-size: 13px; line-height: 1.21; letter-spacing: -0.02em; color: #000000; margin: 0; max-width: 230px; }
  .ai-illustration { position: absolute; right: 0; top: -26px; width: 120px; height: 200px; z-index: 10; }

  .ai-service {background: #FFF;padding-top: 80px }
  .ai-intro-header {margin-top: 30px}
  .ai-intro-header h2 {font-size: 30px;}
  .ai-intro-description {font-size: 16px;}
  .ai-intro-image img {width: 250px;height: auto;display: block;}

  .ai-service-buttons {gap: 0px;}
  .ai-service-btn {font-size: 16px;}
}