/* 전역 스타일 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #f5f7fa;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 버튼 스타일 */
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #1976d2;
    color: white;
}

.btn-primary:hover {
    background-color: #1565c0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.btn-secondary {
    background-color: #ff5722;
    color: white;
}

.btn-secondary:hover {
    background-color: #f4511e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
}

.btn-large {
    padding: 16px 32px;
    font-size: 18px;
}

/* 헤더 */
.header {
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background-color: #1976d2;
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
}

.logo-text {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.header-buttons {
    display: flex;
    gap: 12px;
}

/* 히어로 섹션 */
.hero {
    padding: 60px 0;
    background: linear-gradient(135deg, #e3f2fd 0%, #f5f7fa 100%);
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.hero-title {
    font-size: 48px;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 16px;
    color: #333;
}

.text-primary {
    color: #1976d2;
}

.text-secondary {
    color: #ff5722;
}

.hero-subtitle {
    font-size: 18px;
    color: #666;
    margin-bottom: 32px;
}

.service-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.service-card {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.service-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #333;
}

.service-card p {
    font-size: 14px;
    color: #666;
}

.features {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.feature-icon {
    font-size: 32px;
}

.feature-item strong {
    display: block;
    font-size: 18px;
    color: #333;
}

.feature-item p {
    font-size: 14px;
    color: #666;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.cta-buttons.center {
    justify-content: center;
}

.hero-card {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    color: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(25, 118, 210, 0.3);
}

.hero-card h2 {
    font-size: 28px;
    margin-bottom: 8px;
}

.hero-card h3 {
    font-size: 20px;
    margin-bottom: 24px;
    opacity: 0.9;
}

.hero-card-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-card-item {
    background: rgba(255, 255, 255, 0.15);
    padding: 20px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.hero-card-item p {
    font-size: 14px;
    margin-bottom: 8px;
    opacity: 0.9;
}

.hero-card-item strong {
    font-size: 18px;
    display: block;
}

/* 섹션 공통 스타일 */
section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 48px;
}

.section-badge {
    display: inline-block;
    background: #e3f2fd;
    color: #1976d2;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.section-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #333;
}

.section-subtitle {
    font-size: 18px;
    color: #666;
}

/* 추천 대상 섹션 */
.recommend {
    background: white;
}

.recommend-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.recommend-card {
    background: #f5f7fa;
    padding: 32px 24px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.recommend-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.recommend-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.recommend-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.recommend-card h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: #333;
}

.recommend-card p {
    font-size: 14px;
    color: #666;
}

/* 이용 방법 섹션 */
.process {
    background: #f5f7fa;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.process-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.process-number {
    width: 60px;
    height: 60px;
    background: #1976d2;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
}

.process-card h3 {
    font-size: 24px;
    margin-bottom: 24px;
    color: #333;
}

.process-step {
    display: flex;
    align-items: start;
    gap: 16px;
    margin-bottom: 20px;
}

.step-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.process-step strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
    color: #333;
}

.process-step p {
    font-size: 14px;
    color: #666;
}

.warning-box {
    background: #fff9e6;
    border: 2px dashed #ffc107;
    padding: 16px 24px;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    color: #f57c00;
    margin-top: 32px;
}

/* 강점 섹션 */
.strengths {
    background: white;
}

.strengths-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.strength-card {
    background: #f5f7fa;
    padding: 32px 24px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.strength-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.strength-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.strength-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #333;
}

.strength-card p {
    font-size: 14px;
    color: #666;
}

.trust-banner {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    color: white;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
}

.trust-banner h3 {
    font-size: 28px;
    margin-bottom: 8px;
}

.trust-banner p {
    font-size: 18px;
    opacity: 0.9;
}

/* 후기 섹션 */
.reviews {
    background: #f5f7fa;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.review-card {
    background: white;
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.review-stars {
    font-size: 20px;
    margin-bottom: 16px;
}

.review-text {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-name {
    font-weight: 600;
    color: #333;
}

.author-badge {
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.stat-item {
    text-align: center;
}

.stat-item h3 {
    font-size: 36px;
    color: #1976d2;
    margin-bottom: 8px;
}

.stat-item p {
    font-size: 16px;
    color: #666;
}

/* FAQ 섹션 */
.faq {
    background: white;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 16px;
    border: 2px dashed #ffc107;
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

.faq-question {
    width: 100%;
    padding: 20px 24px;
    background: white;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-align: left;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: #fffbf0;
}

.faq-icon {
    color: #1976d2;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

.faq-answer p {
    padding: 0 24px 20px 24px;
    color: #666;
    line-height: 1.6;
}

/* 푸터 */
.footer {
    background: #263238;
    color: white;
    padding: 60px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h4 {
    font-size: 18px;
    margin-bottom: 16px;
    color: white;
}

.footer-section p {
    font-size: 14px;
    color: #b0bec5;
    margin-bottom: 8px;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #37474f;
}

.footer-bottom p {
    font-size: 14px;
    color: #b0bec5;
    margin-bottom: 8px;
}

/* 반응형 디자인 */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
    }
    
    .recommend-grid,
    .strengths-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .process-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 36px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .service-cards {
        grid-template-columns: 1fr;
    }
    
    .features {
        flex-direction: column;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .recommend-grid,
    .strengths-grid,
    .reviews-grid,
    .stats {
        grid-template-columns: 1fr;
    }
    
    .header-buttons {
        flex-direction: column;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
}


/* === PC hero 블루박스 높이 24px 축소 보정 === */
@media (min-width: 1025px) {
  .hero-content {
    align-items: stretch;
  }

  .hero-left,
  .hero-right {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* 기준선 하단 정렬 */
  .features {
    margin-top: auto;
  }

  
      .hero-card {
    margin-top: auto;
    transform: translateY(-24px);
    padding: 25px;
  }
}


/* === hero-card 상단 문구 중앙 정렬 === */
.hero-card > h2,
.hero-card > h3 {
  text-align: center;
}

.hero-card > h2 {
  margin-bottom: 1px;
}


/* === ChannelTalk Pre-Chat Modal Design (anyticket365 style) === */
.chat-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.chat-modal.active {
  display: flex;
}

.chat-modal-content {
  background: #fff;
  padding: 32px;
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0,0,0,.2);
}

.chat-modal-content h3 {
  font-size: 22px;
  margin-bottom: 8px;
  color: #1976d2;
}

.chat-modal-content p {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.chat-modal-content input {
  width: 100%;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 15px;
}

.chat-modal-content input:focus {
  outline: none;
  border-color: #1976d2;
}

/* === PC 전용 전화하기 버튼 가로폭 통일 === */
@media (min-width: 1025px) {
  .btn-phone,
  .btn-phone-secondary,
  .btn-phone-large {
    min-width: 260px;
    justify-content: center;
  }
}


/* === PC 전용 두번째·세번째 채팅 상담하기 버튼 가로폭 통일 === */
@media (min-width: 1025px) {
  .cta-buttons .btn-secondary,
  .process .btn-secondary {
    min-width: 280px;
    justify-content: center;
    text-align: center;
  }
}



/* === PC hero 하단 박스 가로폭 정렬 === */
@media (min-width: 1025px) {
  /* service 카드 기준 폭 */
  .service-cards {
    max-width: 560px;
  }

  /* feature 박스 동일 폭 */
  .features {
    max-width: 560px;
  }

  .feature-item {
    flex: 1;
  }

  /* 채팅 상담 버튼은 service 카드 2개 전체 폭 */
  .cta-buttons .btn-chat {
    width: 560px;
    justify-content: center;
  }
}

/* ================================
   모바일 전용 문자 상담 버튼 (1개)
================================ */
.mobile-only-sms {
  display: none;
}

.btn-sms {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media (max-width: 768px) {
  .mobile-only-sms {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
  }
}

/* ================================
   문자 상담 버튼 디자인 통일 보정
================================ */

/* 링크 기본 밑줄 제거 */
.btn-sms {
  text-decoration: none;
}

/* 채팅 버튼과 동일한 크기/폰트 유지 */
.btn-sms.btn-large {
  font-size: 18px;
  padding: 16px 32px;
}

/* 문자/채팅 버튼 간격 축소 */
@media (max-width: 768px) {
  .mobile-only-sms {
    margin-bottom: 6px;
  }
}

/* ================================
   문자 상담 버튼 크기 완전 통일 (최종)
================================ */

/* 모든 환경에서 채팅 버튼과 동일하게 */
.btn-sms {
  padding: 12px 24px; /* 기본 btn */
  font-size: 16px;
  font-weight: 600;
}

/* large 버튼 영역에서는 large 기준으로 */
.btn-large.btn-sms {
  padding: 16px 32px;
  font-size: 18px;
}

/* 헤더 영역에서도 동일 크기 강제 */
.header .btn-sms {
  padding: 12px 24px;
  font-size: 16px;
}

/* ================================
   헤더 문자/채팅 버튼 간격 추가 축소
================================ */
@media (max-width: 768px) {
  .header .mobile-only-sms {
    margin-bottom: 2px; /* 거의 붙여서 */
  }

  .header .header-buttons {
    gap: 4px; /* 버튼 자체 간격도 축소 */
  }
}

/* ================================
   모바일 전체 문자/채팅 버튼 간격 통일 축소
================================ */
@media (max-width: 768px) {
  /* 문자 → 채팅 버튼 사이 */
  .mobile-only-sms {
    margin-bottom: 2px;
  }

  /* CTA 버튼 묶음 전체 간격 축소 */
  .cta-buttons {
    gap: 4px;
  }

  /* 중앙 CTA(process 섹션)도 동일 */
  .cta-buttons.center {
    gap: 4px;
  }
}

/* ================================
   문자 상담 버튼 컬러 (짙은 블루)
================================ */
.btn-sms {
  background-color: #1f4fd8; /* 짙은 블루 */
  border-color: #1f4fd8;
}

.btn-sms:hover {
  background-color: #173cb0;
  border-color: #173cb0;
}

/* ================================
   문자 상담 버튼 최종 미세조정
================================ */

/* 포토샵 기준 색상 #135192 */
.btn-sms {
  background-color: #135192;
  border-color: #135192;
}

/* hover 컬러 살짝 어둡게 */
.btn-sms:hover {
  background-color: #0f3f4d;
  border-color: #0f3f4d;
}

/* 채팅 버튼과 높이 완전 동일 (2px 보정) */
.btn-sms {
  padding-top: 14px;
  padding-bottom: 14px;
  line-height: 1.2;
}

.btn-large.btn-sms {
  padding-top: 15px;
  padding-bottom: 15px;
  line-height: 1.2;
}

/* ================================
   문자 상담 버튼 높이 최종 통일 (위/중간/하단)
================================ */

/* 기본 버튼 영역 (헤더 제외한 모든 영역) */
.btn-sms {
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 18px;
  line-height: 1.2;
}

/* btn-large가 붙은 영역과 정확히 동일 */
.btn-large.btn-sms {
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 18px;
}

/* 헤더 영역은 기존 채팅 버튼 기준 유지 */
.header .btn-sms {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 16px;
}

/* =========================================================
   Chat Widget (iframe) - ChannelTalk 대체
   - PC: 우하단 fixed
   - Mobile: 풀스크린(100dvh/100svh 기반)
   - X 버튼: 4가지 상태(PC/모바일 × 로그인전/후) 별 위치 조정 가능
   ========================================================= */

:root{
  /* 위젯(PC) 크기/위치 */
  --chat-widget-desktop-width: 550px;
  --chat-widget-desktop-height: 820px;
  --chat-widget-desktop-right: 24px;
  --chat-widget-desktop-bottom: 50px;

  /* 위젯(모바일) */
  --chat-widget-mobile-inset: 0px; /* 0이면 완전 풀스크린 */

  /* X 버튼 공통 */
  --chat-x-size: 28px;
  --chat-x-font-size: 16px;
  --chat-x-color: #ffffff;

  /* X 버튼 배경색 */
  --chat-x-bg-guest: linear-gradient(135deg, #a592da, #b2a7cf);
  --chat-x-bg-auth: #856ac9;

  /* X 버튼 위치 (4가지 상태) */
  --chat-x-top-desktop-login: 12px;
  --chat-x-right-desktop-login: 12px;

  --chat-x-top-desktop-chat: 18px;
  --chat-x-right-desktop-chat: 100px;

  --chat-x-top-mobile-login: 12px;
  --chat-x-right-mobile-login: 12px;

  --chat-x-top-mobile-chat: 19px;
  --chat-x-right-mobile-chat: 95px;
}

/* 모바일에서 위젯 열렸을 때 배경 스크롤 잠금 */
html.chat-widget-lock,
html.chat-widget-lock body{
  overflow: hidden !important;
  height: 100% !important;
}

.chat-widget{
  position: fixed;
  inset: auto;
  z-index: 99999;
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
  background: rgba(0,0,0,0.0);
}

.chat-widget.is-open{
  display: flex;
}

.chat-widget-inner{
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--chat-widget-desktop-width);
  height: var(--chat-widget-desktop-height);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
  background: #ffffff;
}

/* PC 위치 */
@media (min-width: 769px){
  .chat-widget{
    right: var(--chat-widget-desktop-right);
    bottom: var(--chat-widget-desktop-bottom);
  }
}

/* 모바일 풀스크린 */
@media (max-width: 768px){
  .chat-widget{
    inset: var(--chat-widget-mobile-inset);
    right: var(--chat-widget-mobile-inset);
    left: var(--chat-widget-mobile-inset);
    top: var(--chat-widget-mobile-inset);
    bottom: var(--chat-widget-mobile-inset);
    background: rgba(0,0,0,0.15); /* 살짝 딤 */
    align-items: stretch;
    justify-content: stretch;
  }
  .chat-widget-inner{
    width: 100%;
    /*
      모바일 브라우저(특히 iOS)에서 100vh가 주소창/툴바 때문에 실제 화면보다 커져
      하단 입력창이 잘리는 문제가 있어, JS로 계산한 --chat-vh(=innerHeight 기반)를 우선 사용.
      - --chat-vh는 script.js에서 0.01px 단위로 주입됨
    */
    height: 100vh;  /* fallback */
    height: 100svh; /* iOS 대응 */
    height: 100dvh; /* 최신 */
    height: calc(var(--chat-vh, 1vh) * 100); /* 최우선(스크립트 주입 시) */

    /* iPhone 홈 인디케이터 영역 때문에 하단이 가려지는 것 방지 */
    padding-bottom: env(safe-area-inset-bottom);
    padding-top: env(safe-area-inset-top);
    border-radius: 0;
  }
}

#chatWidgetFrame{
  width: 100%;
  /* padding이 있는 모바일에서도 남는 영역을 꽉 채우기 위해 flex 사용 */
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  border: 0;
  display: block;
  background: #ffffff;
}

/* X 버튼 디자인 */
.chat-widget-close{
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--chat-x-size);
  height: var(--chat-x-size);
  border-radius: 999px;

  border: 0;
  padding: 0;
  cursor: pointer;

  color: var(--chat-x-color);
  font-size: var(--chat-x-font-size);
  line-height: 1;

  /* 기본은 로그인 전 그라데이션 */
  background: var(--chat-x-bg-guest);

  z-index: 2;
}

/* 로그인 후 배경색 */
.chat-widget.state-chat .chat-widget-close{
  background: var(--chat-x-bg-auth);
}

/* 4가지 상태별 위치 적용 */
.chat-widget.is-desktop.state-login .chat-widget-close{
  top: var(--chat-x-top-desktop-login);
  right: var(--chat-x-right-desktop-login);
}
.chat-widget.is-desktop.state-chat .chat-widget-close{
  top: var(--chat-x-top-desktop-chat);
  right: var(--chat-x-right-desktop-chat);
}
.chat-widget.is-mobile.state-login .chat-widget-close{
  top: var(--chat-x-top-mobile-login);
  right: var(--chat-x-right-mobile-login);
}
.chat-widget.is-mobile.state-chat .chat-widget-close{
  top: var(--chat-x-top-mobile-chat);
  right: var(--chat-x-right-mobile-chat);
}

/* 접근성: 포커스 표시 */
.chat-widget-close:focus-visible{
  outline: 2px solid rgba(133,106,201,0.55);
  outline-offset: 2px;
}