body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.75;
      color: #0b0d18;
      background-color: #f5f7fb;
      font-size: 16px;
    }
  header {
  background-color: #f5f7fb;
  color: #0b0d18;
  padding: 16px 20px;
  display: flex; /* Flexbox 레이아웃 */
  align-items: center;
  font-weight: bold;
  border-radius: 0 0 10px 10px;
}
.logo_color{
    color: #0b0d18;
}

header h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: bold;
  margin-left: 16px; /* 버튼과 타이틀 사이 간격 */
}
.header-link {
  /* <a> 태그의 기본 스타일 초기화 */
  color: inherit;         /* 부모 요소(h1)의 글자색 상속 */
  text-decoration: none;  /* 밑줄 제거 */
}

.logohead {
  background-color: transparent;
  color: #0b0d18;
  border: none;
  cursor: pointer;
width: 39px;
height: 39px;
}
.logo-link {
    display: inline-block; /* a 태그를 인라인-블록 요소로 변경 */
    /* 이미지 아래의 미세한 여백을 없애기 위한 추가 설정 */
    font-size: 0;
    line-height: 0;
}
.smalltitle{
    display: none;
}

    .container {
      max-width: 960px;
      margin: 0 auto;
      padding: 20px 24px 0px 24px;
    }
    .intro {
      display: flex;
      justify-content: center;
      text-align: left;
      margin-bottom: 60px;
    }
    .intro-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      width: 100%;
    }
    .intro img {
      max-width: 100%;
      width: 100%;
      border-radius: 12px;
      height: auto;
    }
    .intro p {
      padding: 0 12px;
      font-size: 1rem;
      line-height: 1.8;
    }
    @media (min-width: 768px) {
      .intro-inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 48px;
      }
      .intro img {
        width: 50%;
        max-width: 420px;
      }
      .intro p {
        width: 50%;
        padding: 0;
      }
    }
    h2 {
      color: #0b0d18;
      font-size: 1.2rem;
      margin-bottom: 20px;
      /* border-bottom: 2px solid #1c3950; */
      padding-bottom: 6px;
    } 
    
  
    
    .vision p, .vision ul {
      margin-bottom: 1em;
      font-size: 0.98rem;
    }
    footer {
      text-align: center;
     padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
      padding: 14px 0;
     
    }
    .footer-links {
      margin-bottom: 8px;
    }
    .footer-links a {
      margin: 0 10px;
      font-size: 0.95rem;
      color: #555;
      text-decoration: none;
    }
    .footer-links a:hover {
      text-decoration: underline;
    }
.copyright-wrapper {
    display: flex;
    justify-content: center; /* 가운데 정렬 */
    gap: 10px;
    font-size: 11px;
    color: #434242;
    margin-bottom: 10px;
}

/* 각각 링크 스타일 */
.copyright-note {
  color: #434242;
  text-decoration: none;
}

.copyright-note:hover {
  text-decoration: underline;
  color: #666;
}

       .inline-link {
  color: #0b0d18;
  font-weight: 500;
text-decoration: underline;
  margin-left: 4px;
}

.inline-link:hover {
  color: #0c2233;
  text-decoration: none;
    
}

 .footer-island {
      position: fixed;
      bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translate3d(-50%, var(--footer-island-nudge, 0px), 0);
      -webkit-transform: translate3d(-50%, var(--footer-island-nudge, 0px), 0);
      width: 85%;
      max-width: 500px;
      background-color: #247fc0d6;
      border-radius: 40px;
      padding: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 1000; /* 다른 요소 위에 오도록 설정247fc0e3 #0b0d18ad*/
      will-change: transform, bottom;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .footer-island nav {
      display: flex;
      justify-content: space-around;
      align-items: center;
      gap: 10px;
    }

    .footer-island nav .button-group {
      display: flex;
      justify-content: space-around;
      width: 100%;
    }

  /* 기존 .footer-island nav a { ... } 스타일 아래에 추가 */
.footer-island nav a {
  display: flex; /* Flexbox를 사용하여 아이콘과 텍스트를 나란히 배치 */
  flex-direction: column; /* 세로 방향으로 정렬 */
  align-items: center; /* 가로 중앙 정렬 */
  flex-grow: 1;
  text-align: center;
  padding: 6px 0; /* 패딩을 약간 줄여 아이콘과 텍스트 사이 간격 확보 */
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.7rem; /* 글자 크기 축소 */
  border-radius: 30px;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.footer-island nav a .ai-icon-animation {
  /* 1. 다른 SVG 아이콘과 동일한 크기/여백 적용 */
  width: 22px;
  height: 20px;
  margin-bottom: 1px;

  /* 2. [유지] 유체 애니메이션을 위한 필수 속성 */
  position: relative; 
}
.footer-island nav a svg {
  width: 20px;
  height: 20px;
  margin-bottom: 1px; /* 아이콘과 텍스트 사이 간격 */
  stroke: #fff; /* 아이콘 색상 설정 */
  transition: stroke 0.2s ease;
}

.footer-island nav a:hover {
  background-color: rgba(255, 255, 255, 1);
  color: #0b0d18;
}

.footer-island nav a:hover svg,
.footer-island nav a.active svg {
  stroke: #0b0d18; /* 호버 시 아이콘 색상 반전 */
}

/* 텍스트만 있는 경우를 위한 스타일 (선택사항) */
.footer-island nav a .button-label {
  display: block;
}

/* 로그인 버튼 내 아이콘 컨테이너 */
.icon-container {
    /* 기존 아이콘과 동일한 크기 및 여백 유지 */
    width: 20px;
    height: 20px;
    margin-bottom: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 구글 프로필 썸네일 스타일 */
.profile-thumbnail {
    width: 100%; /* 부모(icon-container) 크기에 맞춤 */
    height: 100%;
    border-radius: 50%; /* 원형으로 만들기 */
    object-fit: cover; /* 이미지가 찌그러지지 않도록 설정 */
}
/*유체ai*/
/* --- ▼▼▼ 기존 /*유체ai*/ 블록을 이 코드로 교체 ▼▼▼ --- */

/* 1. AI 아이콘 컨테이너 (부모, 애니메이션 없음) */
.ai-icon-animation {
  width: 24px;
  height: 24px; 
  position: relative;
  /* 부모는 투명하며, 자식들을 담는 기준점 역할만 합니다. */
}

/* 2. 푸른 원 (자식 1, 배경 레이어, 정지 상태) */
.ai-icon-animation::before {
  content: '';
  position: absolute;
  z-index: 2; /* 뒤쪽 레이어 */

  /* 요청대로 꿈틀이(24px)보다 작은 크기 */
  width: 13px; 
  height: 13px;
  
  /* 부모(24px)의 정중앙에 배치 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 중앙 정렬 */

  /* 푸른 원 스타일 */
  background: #4693c9;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8); 
  
  /* [중요] 여기에는 'pulse-scale' 애니메이션이 없습니다. */
}
.footer-island nav a.active .ai-icon-animation::before {
  background: #ffffff; 

  /* box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);  */
}

/* 3. 꿈틀이 (자식 2, 전경 레이어, 모든 애니메이션 적용) */
.ai-icon-animation::after {
  content: '';
  position: absolute;
  z-index: 1; /* 앞쪽 레이어 */

  /* 부모와 동일한 크기 */
  width: 100%; 
  height: 100%;
  top: 0;
  left: 0;
  
  /* 그라데이션 및 효과 */
  background: linear-gradient(135deg, 
      hsl(154, 100%, 99%), 
      hsl(308, 100%, 80%), 
      hsl(0, 0%, 100%)
  );
  background-size: 300% 300%;
  opacity: 0.9;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.6),
              0 0 10px rgba(173, 216, 230, 0.4);

  /* [중요] 4개의 모든 애니메이션을 여기에 적용합니다. */
  animation: 
      l1 4s infinite linear,
      move-gradient 3s infinite alternate ease-in-out,
      pulse-scale 5s infinite ease-in-out,
      spin-slow 10s infinite linear;
}

/* 4. 모든 @keyframes는 변경 없이 그대로 둡니다. */
@keyframes move-gradient {
  0%    { background-position: 0% 0%; }
  100%  { background-position: 100% 100%; }
}

@keyframes l1 {
  0%    { border-radius: 50%; }
  12.5% { border-radius: 40% 60% 65% 35% / 35% 60% 40% 65%; }
  25%   { border-radius: 65% 35% 70% 30% / 30% 70% 30% 70%; }
  37.5% { border-radius: 30% 70% 45% 55% / 60% 40% 60% 40%; }
  50%   { border-radius: 60% 40% 30% 70% / 70% 30% 70% 30%; }
  62.5% { border-radius: 45% 55% 60% 40% / 40% 60% 40% 60%; }
  75%   { border-radius: 35% 65% 30% 70% / 70% 30% 70% 30%; }
  87.5% { border-radius: 60% 40% 70% 30% / 30% 70% 30% 70%; }
  100%  { border-radius: 50%; }
}

@keyframes pulse-scale {
  0%, 100% { scale: 1.0; }
  50%      { scale: 0.85; }
}

@keyframes spin-slow {
  from  { rotate: 0deg; }
  to    { rotate: 360deg; }
}

/* --- ▲▲▲ 여기까지 교체 /*유체ai*/
/*유체ai*/
/* --- Modal Styles --- */
/* 화면 전체를 덮는 반투명 배경 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* footer-island 보다 위에 표시 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 팝업창 본체 */
.modal-content {
    background-color: #fff;
    padding: 25px 30px;
    border-radius: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    width: 80%;
    max-width: 400px;
    text-align: center;
    transform: translateY(-30px);
    transition: transform 0.5s ease;
}

.modal-google-logo {
    width: 38px;  /* 원하는 너비로 조절하세요 */
    height: 38px; /* 원하는 높이로 조절하세요. (가로세로 비율 유지를 위해 너비와 동일하게 설정하는 것이 좋습니다.) */
    display: block; /* 이미지를 블록 레벨 요소로 만들어 다음 요소와 분리 */
    margin: 6px auto 25px auto; /* 중앙 정렬 및 아래 여백 추가 */
}

/* 팝업창 보일 때의 스타일 */
.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.modal-overlay.visible .modal-content {
    transform: translateY(0);
}


.modal-content h2 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
    font-size: 1.5rem;
    border-bottom: none; /* 기존 h2 스타일 덮어쓰기 */
}

.modal-content .modal-description {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 25px;
}

/* 닫기 버튼 */
.close-button {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 1.8rem;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s;
}

.close-button:hover {
    color: #333;
}

/* 약관 동의 영역 */

/* 구글 로그인 버튼 컨테이너 */
#google-signin-button-container {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}



/* 법적 고지 문구 (업그레이드 버전) */
.implied-consent-notice {
    font-size: 0.85rem; /* 12px -> 약 13.6px로 약간 키움 (가독성 확보) */
    color: #444;        /* #666(연회색) -> #444(진회색)으로 명도 대비 높임 */
    
    margin-top: 0;      /* 위쪽 여백 제거 */
    margin-bottom: 20px;/* 버튼과의 간격 확보 */
    
    padding: 0 5px;
    line-height: 1.5;
    text-align: center;
    letter-spacing: -0.01em;
}

/* 링크 스타일 강화 */
.implied-consent-notice a {
    color: #007aff;     /* 브랜드 컬러 사용 (눈에 띔) */
    font-weight: 600;   /* 굵게 처리하여 '중요 문서'임을 강조 */
    text-decoration: none; /* 평소엔 밑줄 없음 (깔끔함) */
    border-bottom: 1px solid transparent; /* 호버 효과 준비 */
    transition: border-bottom 0.2s;
}

.implied-consent-notice a:hover {
    border-bottom: 1px solid #007aff; /* 마우스 올리면 밑줄 생김 */
}

.footer-island nav a.active {
  /* 여기에 원하는 hover/active 스타일을 정의하세요 */
  background-color: #f0f0f0; /* 예시 */
  color: #0b0d18; /* 예시 */
}

/* 로그인용 로딩 컨테이너 기본 스타일 */
.loading-container {
  text-align: center;
}

/* 로딩 SVG 스피너 */
.logo-spinner {
  width: 80px;  /* 모달 안에 들어가므로 크기를 80px 정도로 조절 */
  height: 90px;

}

/* "Loading..." 텍스트 */
.loading-text {
  margin-top: 0px;
  margin-left: 10px;
  font-size: 16px;
  color: #555;
}

/* --- ▼▼▼ 1. 점(dot) 순차 깜빡임 애니메이션 ▼▼▼ --- */
@keyframes blink {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.1; }
}

.bubble-dot {
  /* 1.8초 동안 깜빡임 애니메이션을 무한 반복 */
  animation: blink 1.8s infinite ease-in-out;
}

/* animation-delay를 다르게 주어 순차적으로 보이게 함 */
.dot-1 { animation-delay: 0s; }
.dot-2 { animation-delay: 0.3s; }
.dot-3 { animation-delay: 0.6s; }


/* --- ▼▼▼ 2. 그라데이션 색상 흐름 애니메이션 ▼▼▼ --- */
/* (stop-color를 서로 교환하여 색상이 흐르는 것처럼 보이게 함) */

@keyframes flow-stop-1 {
  0%, 100% { stop-color: #7B3FF2; }
  33%      { stop-color: #5B6FE8; }
  66%      { stop-color: #4FC3DC; }
}
@keyframes flow-stop-2 {
  0%, 100% { stop-color: #5B6FE8; }
  33%      { stop-color: #4FC3DC; }
  66%      { stop-color: #7B3FF2; }
}
@keyframes flow-stop-3 {
  0%, 100% { stop-color: #4FC3DC; }
  33%      { stop-color: #7B3FF2; }
  66%      { stop-color: #5B6FE8; }
}

/* 4초 동안 색상 흐름 애니메이션을 무한 반복 */
.grad-stop-1 {
  animation: flow-stop-1 4s infinite linear;
}
.grad-stop-2 {
  animation: flow-stop-2 4s infinite linear;
}
.grad-stop-3 {
  animation: flow-stop-3 4s infinite linear;
}
/* --- ▼▼▼ 3. Accent Circles 애니메이션 (수정됨) ▼▼▼ --- */

/* (pulse 애니메이션은 .accent-circle-small만 사용) */
@keyframes scale-pulse {
  0%, 100% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.25);
  }
}

/* ▼▼▼ NEW: 공전(orbit)을 위한 keyframes ▼▼▼ */
@keyframes orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ▼▼▼ MODIFIED: 큰 원은 이제 공전(orbit)합니다 ▼▼▼ */
.accent-circle-large {
  /*
    [핵심!] 회전의 중심을 말풍선 중앙(x=100, y=102.5)으로 설정
  */
  transform-origin: 100px 102.5px;
  
  /* 4초에 한 바퀴씩 부드럽게(linear) 무한 회전 */
  animation: orbit 1.6s infinite linear;
}

/* ▼▼▼ MODIFIED: 작은 원은 기존처럼 pulse 유지 ▼▼▼ */
.accent-circle-small {
  transform-origin: center;
  transform-box: fill-box;
  animation: scale-pulse 1s infinite ease-in-out;
  animation-delay: 0.5s;
}
 /* .menu-overlay {
            position: fixed;
            top: 0;
            left: -100%; 
            width: 100%;
            height: 100%;
            background-color: #f4f4f8;
            z-index: 3000;
            transition: left 0.4s ease-in-out;
            display: flex;
            flex-direction: column;
            padding: 20px;
            box-sizing: border-box;
        }

        .menu-overlay.visible {
            left: 0; 
        } */
.sidebar { /* 이름 변경 */
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%; /* 너비 조정 */
   /*  max-width: 320px; /* 최대 너비 추가 */
    height: 100%;
    background-color: #f4f4f8;
    z-index: 3000;
    transition: left 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
}
.sidebar.visible { /* 이름 변경 */
    left: 0;
}
.menu-header-logo {
    display: none;
}
.logoheadsmall {
  background-color: transparent;
  color: #0b0d18;
  border: none;
  cursor: pointer;
width: 26px;
height: 26px;
}
@media (min-width: 1024px) {

    /* body {
        display: flex; 
    } */
      /* 1. body가 화면 높이를 꽉 채우고, 스크롤을 막습니다. */
    body {
        display: flex;
        height: 100vh;       /* 화면 높이 100% */
        overflow: hidden;    /* body 자체의 스크롤 방지 */
    }

  
    .smalltitle{
    display: block;
    margin-bottom: 10px;
    }
     /* 1. main-content는 이제 flex 컨테이너가 됩니다. */
    .main-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column; /* 자식 요소들을 세로로 배치 */
        overflow: hidden; /* 중요: 내부 요소가 넘치지 않게 함 */
    }
    /* 2. 새로 만든 content-wrapper가 스크롤을 담당합니다. */
    .content-wrapper {
        flex-grow: 1; /* 남은 공간을 모두 차지 */
        overflow-y: auto; /* 세로 스크롤 생성 */
    }
  
       /* 3. footer-island는 더 이상 absolute가 아닙니다. */
    .footer-island {
        /* position, left, transform 속성 모두 제거 */
        width: 30% !important;
        padding: 6px;
        max-width: 600px;
        margin: 20px auto; /* 위아래, 좌우 자동 마진으로 중앙 정렬 */
        flex-shrink: 0; /* 크기가 줄어들지 않도록 함 */
        background-color: #247fc0e3;
    }

    .main-content header {
        display: none;
    }
    

    .delmenu {
        display: none !important;
    }
    .menu-header-logo {
        display: flex;          /* 로고와 텍스트를 나란히 배치 */
        align-items: center;    /* 세로 중앙 정렬 */
        padding: 16px;          /* 안쪽 여백 */
        margin-bottom: 26px;    /* 메뉴 항목과의 아래쪽 간격 */
    }
    
    .menu-header-logo .logoheadsmall {
        margin-right: 12px; /* 로고와 제목 사이 간격 */
    }
    
    .menu-header-logo h1 {
        margin: 0;
        font-size: 1.2rem;
    }


  .menu-nav a {
            font-size: 1rem !important; 
        }
    .sidebar {
        position: static;  /* 떠다니는 속성 해제 */
        left: 0 !important; /* visible 클래스 효과 무시 */
        width: 280px; /* PC용 고정 너비 */
        max-width: none;
        height: 100vh; /* 화면 전체 높이 */
        transition: none; /* 슬라이드 애니메이션 제거 */
            border-top-right-radius: 30px;   /* 상단 오른쪽 모서리를 둥글게 */
    border-bottom-right-radius: 30px; /* 하단 오른쪽 모서리를 둥글게 */
     box-shadow: 
        6px 0 25px -3px rgba(0, 0, 0, 0.1); 
        /* border-right: 1px solid #e0e0e0; */
    }

    .main-content {
        flex-grow: 1; /* 남은 공간을 모두 차지 */
        height: 100vh;
        overflow-y: auto; /* 메인 콘텐츠만 스크롤되도록 설정 */
         position: relative;
    }
    .confirm-modal-overlay,
    .modal-overlay,
    .modal-overlay-qr,
     .footer-island {
        position: absolute ; 
       
    }
      .main-content .modal-overlay2 { /* ✨ 이렇게 부모 요소를 추가하여 더 구체적으로 만듭니다. */
        position: absolute;
    }

    /* PC에서는 모바일용 하단 메뉴와 사이드바의 헤더/푸터 버튼 숨기기 */
    /* .footer-island, */
    .sidebar .menu-header,
    .sidebar .menu-close-button-bottom {
        display: none;
    }

    /* PC에서 container의 좌우 패딩을 조금 더 넓게 조정 */
    .container {
        padding-left: 40px;
        padding-right: 40px;
    }

     .footer-links a {
            font-size: 0.75rem !important; 
        }
}


        .menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }

        .menu-header h2 {
            font-size: 1.8rem;
            color: #333;
            margin: 0;
        }

        .menu-close-button {
            background: none;
            border: none;
            font-size: 2.3rem;
            color: #333;
            cursor: pointer;
        }

        .menu-nav {
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex-grow: 1;
        }

        .menu-nav a {
            color: #333;
            text-decoration: none;
            font-size: 1.2rem;
            font-weight: 500;
            padding: 12px 20px;
            border-radius: 30px;
            transition: background-color 0.2s ease;
            display: flex;
            align-items: center;
            gap: 19px;
        }

        .menu-nav a svg {
            width: 22px;
            height: 22px;
            flex-shrink: 0;
            display: block;
            stroke: currentColor;
        }

        .menu-nav a .menu-link-label {
            display: inline-flex;
            align-items: center;
            min-width: 0;
        }

        .menu-nav a:hover {
            background-color: #ffffff;
        }
        .mainmenuactive {
    background-color: #ffffff; /* 배경을 흰색으로 변경 */
}

        /* .menu-footer {
            padding-top: 20px;
            border-top: 1px solid #ddd;
        }

        .menu-footer a {
            display: block;
            color: #666;
            text-decoration: none;
            padding: 10px 0;
            font-size: 0.95rem;
        } */

           .menu-footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding-top: 20px;
            border-top: 1px solid #ddd;
        }
        .footer-links a {
            display: block;
            color: #666;
            text-decoration: none;
            padding: 8px 0;
            font-size: 0.95rem;
        }
        .menu-close-button-bottom {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            margin-bottom: 8px;
            border-radius: 25px;
            background-color: #e9e9f2;
            color: #333;
            font-weight: 500;
            text-decoration: none;
            transition: background-color 0.2s ease;
            cursor: pointer;
        }
        .menu-close-button-bottom:hover {
            background-color: #dcdcf0;
        }
        .menu-close-button-bottom svg {
            width: 20px;
            height: 20px;
        }

        /* --- 로그아웃 확인 모달 스타일 --- */
.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4000; /* 다른 모달보다 위에 표시 */

       /* ▼▼▼ 애니메이션 추가 ▼▼▼ */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* ▲▲▲ 애니메이션 추가 ▲▲▲ */
}

/* ▼▼▼ 애니메이션 추가 ▼▼▼ */
.confirm-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.confirm-modal-overlay.visible .confirm-modal-content {
    transform: translateY(0);
}
/* ▲▲▲ 애니메이션 추가 ▲▲▲ */

.confirm-modal-content {
    background-color: white;
    padding: 24px;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    width: 90%;
    max-width: 320px;
    text-align: center;

      /* ▼▼▼ 애니메이션 추가 ▼▼▼ */
    transform: translateY(-30px);
    transition: transform 0.3s ease;
    /* ▲▲▲ 애니메이션 추가 ▲▲▲ */
}
.confirm-modal-content h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.1rem;
    font-weight: 600;
}
.confirm-modal-content p {
    margin-bottom: 24px;
    color: #555;
    font-size: 0.95rem;
}
.confirm-modal-buttons {
    display: flex;
    gap: 12px;
}
.modal-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}
.modal-btn.primary {
    background-color: #70b6db;
    color: white;
}
.modal-btn.primary:hover { background-color: #63a6ca; }
.modal-btn.secondary {
    background-color: #f0f0f0;
    color: #333;
}
.modal-btn.secondary:hover { background-color: #e0e0e0; }


/* 로그아웃용 심플 스피너 */
.simple-spinner {
  width: 28px;
  height: 28px;
  border: 4px solid #f0f0f0; /* 스피너 트랙 색상 */
  border-top: 4px solid #70b6db; /* 스피너 메인 색상 (버튼과 동일) */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 스피너 회전 애니메이션 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




/* vision 클래스 스타일: 흰색 네모에 둥근 모서리 ,아래 css는 html 스크립트 페이지로 이동 예정 */
.vision {
    background-color: #ffffff;
    border-radius: 30px;
    padding: 26px 20px 28px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* width와 margin 속성을 제거하여 부모 너비를 따르도록 함 */
    margin-top: 0px; /* 위쪽 여백이 필요하면 추가 */
    margin-bottom: 20px; /* 아래쪽 여백이 필요하면 추가 */
}
.titl{
    margin-top: 0px;
    margin-bottom: 10px;
    color: #7c7c7c;
}
.titl2{
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 30px;
    margin-right: 30px;
    font-style: italic !important;
    color: #7c7c7c;
    font-size: 14px;
}

/* 폼 내부 스타일 */
.ai-form {
    display: flex;
    flex-direction: column;
    gap: 24px; /* 입력 그룹 사이의 간격 */
}

.input-group {
    display: flex;
    flex-direction: column;
}
.input-group label {
    font-size: 15px;
    font-weight: bold;
    color: #0b0d18;
    margin-bottom: 8px;
}
/* 👇 [추가] label과 카운터를 감싸는 div에 대한 스타일 */
.label-wrapper {
    display: flex;
    justify-content: space-between; /* 양쪽 끝으로 요소를 밀어 정렬 */
    align-items: baseline;        /* 텍스트의 기준선에 맞춰 정렬 */
    margin-bottom: 0px;             /* input과의 간격을 이 곳에서 설정 */
}
.char-counter {
    font-size: 14px;
    color: #555;
}
/* label 스타일 */
/* .input-group label {
    font-size: 15px;
    font-weight: bold;
    color: #0b0d18;
    margin-bottom: 8px;
} */
      /* 라벨과 옵션 버튼을 담는 헤더 컨테이너 */
        .input-group-header {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            margin-bottom: 6px;
        }

        /* 기존 label 스타일 (margin-bottom은 헤더에서 관리) */
        .input-group-header label {
            font-size: 15px;
            font-weight: bold;
            color: #0b0d18;
        }

        /* 오른쪽 옵션 버튼들을 담는 컨테이너 */
        .input-options {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            margin: 0 0 10px;
        }

        .starter-template-card {
            margin: 6px 0 12px;
            padding: 13px 17px 15px;
            border: 1px solid rgba(36, 28, 21, 0.08);
            border-radius: 20px;
            background: linear-gradient(180deg, rgba(252, 251, 249, 0.98) 0%, rgba(248, 246, 242, 0.98) 100%);
            box-shadow: 0 10px 22px rgba(36, 28, 21, 0.05);
            display: flex;
            flex-direction: column;
            gap: 9px;
            transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
        }

        .starter-template-card:hover {
            border-color: rgba(36, 28, 21, 0.12);
            box-shadow: 0 12px 28px rgba(36, 28, 21, 0.065);
            background: linear-gradient(180deg, rgba(253, 252, 250, 0.98) 0%, rgba(249, 247, 244, 0.98) 100%);
        }

        .starter-template-copy {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .starter-template-title-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .starter-template-title {
            margin: 0;
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #7a736b;
        }

        .starter-template-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 22px;
            padding: 0 9px;
            border-radius: 999px;
            border: 1px solid rgba(121, 103, 85, 0.18);
            background: linear-gradient(180deg, rgba(255, 250, 243, 0.98) 0%, rgba(248, 240, 230, 0.96) 100%);
            color: #7a6551;
            font-size: 0.62rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            white-space: nowrap;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
        }

        .vision p.starter-template-helper {
            margin: 0;
            font-size: 0.97rem;
            line-height: 1.42;
            color: #756d66;
            max-width: 52ch;
        }

        .starter-template-controls {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .starter-template-label {
            display: none;
        }

        .starter-template-action-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: stretch;
            gap: 9px;
        }

        .starter-template-select {
            min-width: 0;
            min-height: 46px;
            border: 1px solid rgba(121, 103, 85, 0.14);
            border-radius: 15px;
            padding: 0 13px;
            background: rgba(255, 255, 255, 0.86);
            color: #221f1b;
            font-size: 0.81rem;
            box-sizing: border-box;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
            transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
        }

        .starter-template-select:hover {
            border-color: rgba(121, 103, 85, 0.22);
            background: rgba(255, 255, 255, 0.92);
        }

        .starter-template-select:focus {
            outline: none;
            border-color: rgba(69, 56, 46, 0.32);
            box-shadow: 0 0 0 4px rgba(87, 69, 55, 0.06);
        }

        .starter-template-button {
            min-height: 46px;
            border: none;
            border-radius: 15px;
            background: linear-gradient(180deg, #1d1a18 0%, #151311 100%);
            color: #fff;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            padding: 0 15px;
            white-space: nowrap;
            cursor: pointer;
            box-shadow: 0 10px 22px rgba(30, 24, 20, 0.14);
            transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
        }

        .starter-template-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 12px 24px rgba(30, 24, 20, 0.17);
            filter: none;
        }

        .starter-template-button:active {
            transform: translateY(0);
            box-shadow: 0 7px 16px rgba(30, 24, 20, 0.11);
        }

        .starter-template-button:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px rgba(87, 69, 55, 0.08), 0 12px 24px rgba(30, 24, 20, 0.15);
        }
        
        /* 옵션 버튼 (공통 스타일) */
        .option-btn {
            background-color: transparent;
            border: 1px solid #e0e0e0;
            border-radius: 16px; /* 더 부드러운 모서리 */
            padding: 3px 10px;
            font-size: 13px;
            font-weight: 600;
            color: #666;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }

        .option-btn:hover {
            background-color: #f0f0f0;
            border-color: #ccc;
        }
        
        /* 활성화된 버튼 스타일 */
        .option-btn.active {
            background-color: #e8eaf6; /* 은은한 푸른빛 배경 */
            color: #3f51b5; /* 메인 컬러와 유사한 색상 */
            border-color: transparent;
        }

        /* 'OR' 구분자 스타일 */
        .option-separator {
            font-size: 12px;
            font-weight: 500;
            color: #aaa;
        }

        /* 파일 업로드 라벨을 버튼처럼 보이게 함 */
        .upload-label {
            display: inline-block; /* 버튼처럼 보이도록 */
        }
        
        /* 실제 파일 입력창은 숨김 */
        .file-input-hidden {
            display: none;
        }

        /* --- 🎈 수정된 부분 끝 --- */

/* 🎈 input과 textarea의 폰트를 시스템 UI 폰트로 통일합니다. */
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="url"],
textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    width: 100%;
    padding: 12px;
    border: 0px solid #ddd;
    border-radius: 20px;
    font-size: 15px;
    transition: border-color 0.3s;
    box-sizing: border-box;
    background-color: #f5f7fb; 
}

body.rtl-lang {
    direction: rtl;
}

body.rtl-lang header h1 {
    margin-left: 0;
    margin-right: 16px;
}

body.rtl-lang .sidebar {
    left: auto;
    right: -100%;
    transition: right 0.4s ease-in-out;
}

body.rtl-lang .sidebar.visible {
    left: auto;
    right: 0;
}

body.rtl-lang .menu-header-logo .logoheadsmall {
    margin-right: 0;
    margin-left: 12px;
}

body.rtl-lang .menu-nav a,
body.rtl-lang .menu-close-button-bottom,
body.rtl-lang .menu-footer,
body.rtl-lang .vision {
    direction: rtl;
}

body.rtl-lang .label-wrapper,
body.rtl-lang .input-options,
body.rtl-lang .copyright-wrapper {
    flex-direction: row-reverse;
}

body.rtl-lang .input-group-header {
    align-items: flex-end;
}

body.rtl-lang .starter-template-copy,
body.rtl-lang .starter-template-controls,
body.rtl-lang .starter-template-card {
    text-align: right;
}

body.rtl-lang .starter-template-title-row {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

body.rtl-lang .starter-template-action-row {
    flex-direction: row-reverse;
}

@media (min-width: 900px) {
    .starter-template-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(330px, 372px);
        align-items: center;
        gap: 16px;
    }

    .starter-template-copy {
        padding-right: 8px;
    }

    body.rtl-lang .starter-template-copy {
        padding-right: 0;
        padding-left: 10px;
    }
}

@media (max-width: 480px) {
    .starter-template-card {
        padding: 12px 14px 14px;
    }

    .vision p.starter-template-helper {
        font-size: 0.8rem;
    }

    .starter-template-button {
        padding: 0 12px;
    }
}

@media (max-width: 768px) {
    .vision {
        padding: 22px 16px 24px;
    }
}

body.rtl-lang .titl2,
body.rtl-lang .titl2pc,
body.rtl-lang .input-group label,
body.rtl-lang .vision {
    text-align: right;
}

@media (min-width: 1024px) {
    body.rtl-lang .sidebar {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        box-shadow: -6px 0 25px -3px rgba(0, 0, 0, 0.1);
    }
}


/* textarea에만 필요한 추가 스타일은 따로 지정합니다. */
textarea {
    resize: vertical;
    min-height: 220px; 
}

/* 포커스 시 테두리 색상 변경 */
input[type="text"]:focus,
textarea:focus {
    outline: none;
    border-color: #007bff;
}

/* 플레이스홀더 스타일 (font-family: inherit; 는 이제 자동으로 해결됩니다) */
input::placeholder,
textarea::placeholder {
    color: #aaa;
}
/* textarea가 미리보기 모드일 때 적용될 스타일 */
textarea.preview-mode {
    background-color: #ffffff; /* 배경을 흰색으로 변경 */
    box-shadow: none;          /* 포커스 시 생기는 그림자 제거 */
    cursor: default;           /* 마우스 커서를 기본값으로 변경하여 편집 불가 느낌 전달 */
    color: #333;              /* 텍스트 색상을 더 진하게 하여 가독성 확보 */
}
.upload-status-hint {
    font-size: 0.8rem;
    color: #747474;
    /* margin-top: -15px; */
    padding: 0 10px;
    text-align: right;
}

/* --- 🎈 추가된 스타일 --- */

/* textarea를 감싸는 래퍼에 상대 위치 기준점 설정 */
.textarea-wrapper {
    position: relative;
}

/* 페이드 효과를 담당할 가상 요소 */
.textarea-wrapper::after {
    content: ''; /* 가상 요소 필수 속성 */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 160px; /* 페이드 효과의 높이 */

    /* 핵심: 아래에서 위로 흰색 -> 투명 그라데이션 적용 */
    background: linear-gradient(to top, #ffffff 20%, rgba(255, 255, 255, 0));

    /* 중요: 이 오버레이가 마우스 클릭을 방해하지 않도록 설정 */
    pointer-events: none;

    /* 평소에는 보이지 않도록 투명하게 처리 */
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* 부드러운 전환 효과 */
}

/* 부모(.input-group)에 is-previewing 클래스가 추가되면 페이드 효과를 보여줌 */
.input-group.is-previewing .textarea-wrapper::after {
    opacity: 1;
}

/* 오렌지색 결제 버튼 스타일 */
/* .hire-button {
 
    background-color: #FF8C00; 
    color: #ffffff;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 30px; 
    width: 100%; 
    transition: transform 0.2s ease, background-color 0.2s ease;
} */

/* 마우스 호버 시 효과 */
/* .hire-button:hover {
    background-color: #E69500; 
} */

/* 버튼 클릭(누를 때) 시 애니메이션 효과 */
.hire-button:active {
    transform: scale(0.98); /* 버튼을 98% 크기로 살짝 축소 */
}


/* ============================ */
/* 🎈 결제 모달 스타일 (Payment Modal) */
/* ============================ */

/* 1. 뒷 배경 (오버레이) */
.modal-payment-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 5000;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* 모달을 하단에 배치 */
    
    /* 초기 상태: 숨김 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 2. 모달 콘텐츠 (흰색 패널) */
.modal-payment-content {
    background-color: #f5f7fb;
    width: 100%;
    max-width: 600px; /* PC에서 너무 넓어지지 않게 */
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    max-height: 80vh; /* 화면의 80% 이상은 안넘어가게 */

    /* 애니메이션 설정 */
    transform: translateY(100%); /* 아래쪽 화면 밖에 숨김 */
    transition: transform 0.4s ease-in-out;
}

/* 3. 모달이 보일 때의 스타일 */
.modal-payment-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.modal-payment-overlay.visible .modal-payment-content {
    transform: translateY(0); /* 제자리로 올라옴 */
}
.titl2pc{
    display: none;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 30px;
    margin-right: 30px;
    font-style: italic !important;
    color: #7c7c7c;
    font-size: 14px;
}
@media (min-width: 1024px) {

      .modal-payment-header{
          display: flex !important;
    }
    .titl2{
        display: none;
    }
    .titl2pc{
        display: block;
    }
}
/* 4. 모달 내부 요소 스타일 */
.modal-payment-header {
    display: flex; /* 🎈 Flexbox 레이아웃 적용 */
    align-items: center; /* 🎈 세로 중앙 정렬 */
    padding: 15px 20px;
    background-color: #f5f7fb;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  /*   border-bottom: 1px solid #f0f0f0; 🎈 헤더와 본문 구분선 추가 */
    position: relative; /* 🎈 제목 중앙 정렬을 위한 기준점 */
}

.modal-back-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 2; /* 🎈 제목 위에 위치하도록 설정 */
}

.modal-back-button svg {
    width: 28px;
    height: 28px;
    color: #c4c4c4;
}

/* 🎈 새로 추가된 제목 스타일 */
.modal-payment-title {
    position: absolute; /* 🎈 헤더 중앙에 위치시키기 위함 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.1rem; /* 🎈 폰트 크기 조정 */
    font-weight: 600;
    margin: 0;
    color: #333;
    z-index: 1; /* 🎈 버튼보다 아래에 위치 */
}

/* .modal-payment-body {
    padding: 20px 25px; 
    padding-bottom: 40px;
    overflow-y: auto;
    flex-grow: 1;
} */
/* 1. body가 위치 기준점이 되도록 설정 */
.modal-payment-body {
    padding: 20px 25px;
    overflow-y: auto;
    flex-grow: 1;
    position: relative; /* 🎈 자식 요소(버튼)의 위치 기준점이 됨 */
    
}


.product-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.billing-benefit-strip {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px 16px;
    border-radius: 22px;
    border: 1px solid rgba(77, 55, 184, 0.12);
    background: linear-gradient(180deg, rgba(249, 251, 255, 0.98) 0%, rgba(239, 245, 255, 0.98) 100%);
    box-shadow: 0 14px 28px rgba(104, 94, 176, 0.08);
}

.billing-benefit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(77, 55, 184, 0.12);
    color: #5a4cb2;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.billing-benefit-copy {
    color: #485366;
    font-size: 0.88rem;
    line-height: 1.45;
    font-weight: 600;
}
.product-row {
    display: flex;
    gap: 12px; /* 버튼 사이의 간격 */
}

/* 🎈 .product-row 안의 버튼 스타일 */
.product-row .product-item {
    flex-direction: column; /* 아이콘과 텍스트를 세로로 배치 */
    justify-content: center; /* 세로 중앙 정렬 */
    flex: 1; /* 동일한 너비를 나눠 가짐 */
    padding: 20px 10px; /* 내부 여백 조정 */
    height: 130px; /* 정사각형에 가까운 높이 지정 */
}

.product-row .product-item .product-icon {
    margin-right: 0; /* 오른쪽 여백 제거 */
    margin-bottom: 10px; /* 아이콘과 텍스트 사이 간격 */
}

.product-row .product-item .product-info {
    align-items: center; /* 텍스트 중앙 정렬 */
    text-align: center;
}

.product-row .product-item .product-select-icon {
    display: none; /* 가로 배치 버튼에서는 선택 아이콘 숨기기 (선택사항) */
}
/* .product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px;
    border: 0px solid #e0e0e0;
    border-radius: 12px;
    background-color: white;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s;
} */
.product-item {
    display: flex;
    /* justify-content: space-between; 이 라인은 삭제하거나 주석 처리 */
    align-items: center;
    width: 100%;
    padding: 15px;
    border: 0px solid #e0e0e0; /* 🎈 테두리를 다시 추가하여 구분감을 줍니다 */
    border-radius: 26px; /* 🎈 좀 더 둥글게 */
    background-color: #ffffff; /* 🎈 배경색 변경 */
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
        box-shadow: 0px 12px 25px rgba(233, 232, 255, 0.35);
       
}
.product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;  /* 아이콘 크기 */
    height: 48px; /* 아이콘 크기 */
    margin-right: 15px; /* 아이콘과 텍스트 사이 간격 */
    /* background-color: #007bff; /* 기존 배경색은 제거하거나 주석 처리 */
    color: white; /* 글자색 */
    font-size: 19px;
    font-weight: bold;
    border-radius: 12px; /* 모서리 둥글게 */
    flex-shrink: 0; /* 크기가 줄어들지 않도록 고정 */

    /* ----- 수정/추가된 속성들 ----- */

    /* 그라데이션 배경 */
    background: linear-gradient(
        135deg,          /* 45도 각도로 그라데이션 */
        #7ed3f6,        /* 시작 색상: 메인 컬러 */
        #9996e5          /* 끝 색상: 메인 컬러보다 살짝 밝은 블루 */
    );
    /* 참고: linear-gradient(to right, #00508C, #007ACC); 와 같이 방향을 지정할 수도 있습니다. */
    
    /* 검은색 테두리 */
    border: 0px solid #000000; /* 1px 두께의 검은색 실선 테두리 */
}

/* .product-item:hover {
    border-color: #777;
}

.product-info {
    display: flex;
    flex-direction: column;
} */

.product-item:hover {
    background-color: #ffffff; /* 🎈 호버 시 배경색 변경 */
}

.product-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 🎈 남은 공간을 모두 차지하도록 설정 */
}


.product-info strong {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}
.product-info span {
    font-size: 0.9rem;
    color: #666;
}

/* 상품 선택 시 아이콘 스타일 */
.product-select-icon {
    width: 24px;
    height: 24px;
    border: 0px solid #ccc;
    border-radius: 50%;
    transition: background-color 0.2s, border-color 0.2s;
}
.product-item.selected {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}
.product-item.selected .product-select-icon {
    background-color: #0b0d18;
    border-color: #007bff;
}

/* .modal-payment-footer {
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-top: 10px;

} */

/* .pay-button-final {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
       background: linear-gradient(270deg, #5E5CE6 0%, #4D81E8 100%);
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.pay-button-final:hover {
   
    transform: translateY(-2px);
    box-shadow: 0px 12px 25px rgba(94, 92, 230, 0.35);
}

.pay-button-final:disabled {
    background: #ccc;
    cursor: not-allowed;
} */

/* 1. 버튼을 감싸는 footer의 기본 스타일 */
.modal-payment-footer {
   /* padding: 10px 25px 25px 25px;  상하좌우 여백 */
    background-color: #f5f7fb; /* 모달 배경색과 동일하게 */
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
}
/* 3. ✅ [핵심] 플로팅 상태일 때의 스타일 */
.modal-payment-footer.is-floating {
    position: sticky; /* 스크롤 컨테이너(.modal-payment-content) 하단에 고정 */
    bottom: 0;
    left: 0;
    right: 0;
    /* 플로팅될 때 배경에 약간의 블러 효과나 그림자를 추가하여 구분감을 줌 */
    background-color: rgba(245, 247, 251, 0);
  
    /* box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
    border-top: 1px solid rgba(0,0,0,0.05); */
}
/* 3. 결제 버튼을 플로팅 형태로 스타일링 */
.pay-button-final {
   /* position: sticky;  🎈 스크롤 영역 내에서 하단에 고정 */
  /*  bottom: 1px;      🎈 하단에서 20px 띄움 */
    width: 100%; /* 🎈 부모의 좌우 패딩(25px*2)만큼 너비 감소 */
   /* margin: 20px auto 0;  🎈 위쪽 여백 추가 및 중앙 정렬 */
      backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 15px;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    background: linear-gradient(270deg, #5E5CE6b3 0%, #4D81E8b3 100%);
    
    border: none;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0px 8px 20px rgba(94, 92, 230, 0.3); /* 🎈 그림자 효과 추가 */
    transition: all 0.2s ease-in-out;
        position: relative; /* 🎈 자식처럼 쓸 가상 요소의 기준점이 됨 */
    overflow: hidden;   /* 🎈 버튼 밖으로 나가는 애니메이션을 숨김 */
}

/* main.css 파일에 추가 */

/* 1. 빛나는 웨이브 효과를 담당할 가상 요소(::before) 스타일 */
.pay-button-final::before {
    content: ''; /* 가상 요소에는 content 속성이 필수입니다. */
    position: absolute;
    top: 0;
    left: -75%; /* 시작 위치를 버튼 왼쪽 밖으로 설정 */
    width: 50%; /* 웨이브의 너비 */
    height: 100%;

    /* 🎈 빛나는 부분 그라데이션 */
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    
    transform: skewX(-25deg); /* 🎈 웨이브를 살짝 기울여서 더 역동적으로 보이게 함 */
}

/* .pay-button-final.processing {
    display: flex;
    align-items: center;
    justify-content: center;
} */
/* 🎈 버튼 내 자물쇠 아이콘 스타일 */
.lock-icon {
    margin-right: 8px; /* 아이콘과 텍스트 사이 간격 */
    vertical-align: middle; /* 텍스트와 세로 중앙 정렬 (flex 환경에서는 보조 역할) */
}
/* 🎈 점(.)이 표시될 span의 스타일 */
.loading-dots {
    display: inline-block; /* 너비와 정렬을 적용하기 위해 block 요소처럼 만듦 */
    min-width: 18px;       /* 점 4개가 들어갈 최소 너비를 미리 확보 (폰트에 따라 값 조절) */
    text-align: left;      /* 점이 왼쪽부터 찍히도록 설정 */
    margin-left: 2px;
}

/* 2. 버튼이 'processing' 상태일 때 웨이브 애니메이션을 실행 */
.pay-button-final.processing::before {
    animation: wave 1.5s linear infinite; /* 🎈 'wave' 애니메이션을 1.5초 동안 무한 반복 */
}

.pay-button-final.processing {
   background: #ffc29e; 
    cursor: not-allowed;
       display: flex;
    align-items: center;
    justify-content: center;
}


/* 3. 'wave' 애니메이션의 실제 움직임 정의 */
@keyframes wave {
    0% {
        left: -75%;
    }
    100% {
        left: 125%; /* 웨이브가 버튼을 완전히 가로질러 오른쪽 밖으로 나가도록 설정 */
    }
}

/* 🎈 기존 disabled 스타일은 JavaScript에서 disabled 속성을 직접 제어하므로, 
   processing 상태와 시각적으로 통일하는 것이 좋습니다. */
.pay-button-final:disabled:not(.processing) {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.pay-button-final:hover {
    transform: translateY(-2px);
    box-shadow: 0px 12px 25px rgba(94, 92, 230, 0.35);
}

/* .pay-button-final:disabled {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
} */

.product-tag {
    padding: 4px 12px;
   border-radius: 20px;
    background: linear-gradient(270deg, #5E5CE6 0%, #1c97f2 100%);
  color: white !important;
      font-size: 0.8rem !important;
          margin-bottom: 10px !important;
   /* box-shadow: 0px 8px 20px rgba(94, 92, 230, 0.3);  🎈 그림자 효과 추가 */

}
.product-tagspan {
    margin-bottom: 20px;
    color: #a5a2ab;

}


/* Hire Your AI 버튼 스타일 */
.hire-button {
    background-color: #181818;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
       transition: transform 0.2s ease, background-color 0.2s ease;
}
.hire-button:hover {
    background-color: #212121;

}

/* main.css의 결제 모달 스타일 섹션 맨 아래에 추가 */

/* ================================= */
/* 🎈 커스텀 플랜 버튼 스타일 (Custom Plan) */
/* ================================= */

.product-item-custom {
    flex-direction: row; /* 내부 요소들을 가로로 배치 (기본값) */
    justify-content: space-between; /* 양쪽 끝으로 정렬 */
    align-items: center;
    padding: 20px; /* 내부 여백을 더 넉넉하게 */
    background-color: #ffffff; /* 다른 버튼과 구분되는 배경색 */
     transition: all 0.2s ease;
}

.product-item-custom:hover {
    background-color: #ffffff;
}

/* 왼쪽 텍스트 영역 */
.product-info-custom {
    display: flex;
    flex-direction: column;
    gap: 2px; /* 줄 간격 */
}
.product-info-custom strong {
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}
.product-info-custom span {
    font-size: 0.9rem;
    color: #a5a2ab;
}

/* 오른쪽 가격 영역 */
.product-price-custom {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 오른쪽 정렬 */
    text-align: right;
}
.product-price-custom span {
    font-size: 0.85rem;
    /* margin-bottom: 4px; */
    color: #a5a2ab;
}
.product-price-custom strong {
    font-size: 1.4rem;
    font-weight: bold;
    color: #4d37b8; /* 포인트 컬러 */
}

/* 선택되었을 때 스타일 */
/* .product-item-custom.selected {
    background-color: #cfcffe;
    border: 1px solid #4d37b8aa;
    box-shadow: 0px 18px 40px rgb(161 157 255 / 72%);
} */

/* 선택되었을 때 스타일 */
/* 선택되었을 때 스타일 */
.product-item-custom.selected {
    /* 1. border를 투명하게 설정하여 공간만 확보합니다. */
    border: 4px solid transparent;
    border-radius: 26px; /* 기존의 border-radius 유지 */

    /* 2. background-image에 배경과 테두리를 모두 정의합니다. */
    background-image: 
        /* 안쪽 배경 (단색) */
        linear-gradient(#c1c1fb, #c6c6fb), 
        /* 바깥쪽 배경 (테두리가 될 그라데이션) */
        linear-gradient(to right,  #1c95f2b9,#892be2bf);

    /* 3. 배경의 원점을 테두리까지 확장합니다. */
    background-origin: border-box;

    /* 4. 이것이 핵심! 배경을 어디까지 보여줄지 결정합니다. */
    /* 안쪽 배경은 패딩까지만, 바깥 배경은 테두리까지 보이도록 잘라냅니다. */
    background-clip: padding-box, border-box;

    /* 그림자 효과는 그대로 유지합니다. */
    box-shadow: 0px 18px 40px rgb(161 157 255 / 72%);
}
/* 🎈 .selected가 적용된 버튼 내부의 텍스트 색상을 흰색으로 변경 */
.product-item-custom.selected .product-info-custom strong,
.product-item-custom.selected .product-info-custom span,
.product-item-custom.selected .product-price-custom span {
    color: #ffffff;
}

.highvol{
    display: none;
    flex-direction: column; /* 아이템들을 세로로 나열 */
    gap: 12px; /* 각 아이템(버튼) 사이의 간격을 12px로 설정 */
    /* --- 추가된 스타일 (구분선 담당) --- */
    position: relative;   /* 구분선의 위치 기준점 */
    padding-top: 30px;  /* 구분선이 들어갈 상단 여백 확보 */
    margin-top: 15px;   /* 이전 요소와의 간격 */
}

/* 구분선 스타일은 그대로 유지 */
.highvol::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 5px;
    background-color: #ffffff;
    border-radius: 2px;
    opacity: 1;
}

.pay-list-more{
background-color: #fff;
    color: #333;
    border: 0px solid #4d37b8aa;
    font-size: 1rem;
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 30px;
     border-radius: 20px;
     padding: 10px;
 font-weight: bold;

  transition: all 0.2s ease-in-out; /* 모든 속성 변화를 0.4초 동안 부드럽게 */
    transform-origin: center;       /* 변형의 중심축 설정 */
    overflow: hidden;               /* 내용이 줄어들 때 삐져나오지 않도록 */

      display: flex; /* 텍스트와 아이콘을 가로로 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 (필요에 따라 조절) */
    gap: 8px; /* 텍스트와 아이콘 사이의 간격 */
 

}

.pay-list-more svg {
    width: 1.2em; /* 폰트 크기에 맞춰 아이콘 크기 조절 */
    height: 1.2em;
    /* stroke="currentColor" 덕분에 아이콘 색상은 버튼의 color 속성을 자동으로 상속받습니다. */
}

.pay-list-more:hover {
    transform: translateY(-1px);
    box-shadow: 0px 12px 25px rgba(94, 92, 230, 0.35);
}

/* --- 🎈 버튼이 사라질 때 적용될 스타일 클래스 --- */
.pay-list-more.hiding {
    opacity: 0;          /* 투명하게 만들기 */
    max-height: 0;       /* 최대 높이를 0으로 만들어 접히는 효과 */
    padding-top: 0;      /* 패딩 제거 */
    padding-bottom: 0;   /* 패딩 제거 */
    margin-top: 0;       /* 마진 제거 */
    border: 0;           /* 테두리 제거 (선택사항) */
}


/* General Modal Overlay Style (You already have this, but ensure it's here) */
.modal-overlay2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
      background-color: rgba(0, 0, 0, 0.6);

         /* ✨ 1. 기본 상태를 투명하게 설정 */
    opacity: 0;
    visibility: hidden; /* 보이지 않을 때 클릭되지 않도록 설정 */

    /* ✨ 2. opacity와 visibility에 전환 효과 적용 */
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;

}

/* ✨ 3. 모달이 열렸을 때(.is-open) 오버레이를 보이게 함 */
.modal-overlay2.is-open {
    opacity: 1;
    visibility: visible;
}

/* 기존 코드는 그대로 둡니다 */
.modal-overlay2.is-open .info-modal-content {
    opacity: 1;
    transform: scale(1);
}

/* Info Modal Specific Styles */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #7c8593;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.info-icon:hover,
.info-icon:focus-visible {
    color: #3f51b5;
    outline: none;
}

.info-modal-content {
    background-color: #ffffff;
    padding: 2.5rem 2rem 1rem 2rem;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    max-width: 350px;
    width: 70%;
    font-family: sans-serif;
    color: #333e42;
    border: 1px solid rgba(0,0,0,0.05);
    /* ✨ Flexbox 속성 추가 */
    display: flex;
    flex-direction: column; /* 아이템을 세로로 정렬 */
    align-items: center; /* 아이콘과 제목을 중앙 정렬 */
     /* ✨ 1. 애니메이션을 위한 기본 상태 설정 (작고 투명하게) */
    opacity: 0;
    transform: scale(0.5);
    transform-origin: bottom right; /* 기준점은 그대로 유지 */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
/* ✨ 2. 모달이 열렸을 때(.is-open) 적용될 스타일 */
.modal-overlay2.is-open .info-modal-content {
    opacity: 1;
    transform: scale(1);
}


.info-modal-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #d7e9ef; /* Light green circle background */
    margin: 0 auto 1.5rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-modal-checkmark {
    color: #8fb7c4; /* Darker green for checkmark */
}

.info-modal-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 0 0.1rem 0;
}

.info-modal-text {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.info-modal-button {
    background: transparent;      /* 배경을 투명하게 설정 */
    border: none;                 /* 테두리 제거 */
    padding: 8px;                 /* 클릭 영역을 위한 약간의 여백 */
    cursor: pointer;              /* 마우스 커서 유지 */
    align-self: flex-end;         /* 오른쪽 정렬 유지 */
    margin-top: 1rem;             /* 상단 여백 유지 */
    color: #888888;               /* 아이콘 색상 (SVG의 stroke="currentColor"가 이 색을 사용) */
    transition: opacity 0.2s;     /* 부드러운 효과를 위한 transition */
}

.info-modal-button:hover {
    opacity: 0.7;                 /* 마우스를 올리면 살짝 투명해지는 효과 */
}

/* 🇯🇵 일본 법적 고지 링크: 기본적으로 숨김 */
.japan-only {
    display: none !important;
}

body.landing-home {
    background:
        radial-gradient(circle at top left, rgba(131, 197, 255, 0.16), transparent 28%),
        radial-gradient(circle at 85% 10%, rgba(255, 205, 143, 0.16), transparent 24%),
        linear-gradient(180deg, #f7fbff 0%, #eef4fb 48%, #f7f8fc 100%);
}

body.landing-home .container {
    max-width: 1120px;
    padding-top: 10px;
}

body.landing-home .smalltitle {
    display: none;
}

body.landing-home .vision.landing-page {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    overflow: visible;
}

body.landing-home .home-hero,
body.landing-home .home-section,
body.landing-home .trust-grid {
    position: relative;
    z-index: 1;
}

body.landing-home .home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 22px;
    padding: 28px;
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(244, 249, 255, 0.92));
    box-shadow: 0 20px 48px rgba(22, 34, 63, 0.08);
    border: 1px solid rgba(164, 184, 210, 0.18);
}

body.landing-home .hero-eyebrow,
body.landing-home .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0f6fd8;
    background: rgba(15, 111, 216, 0.08);
}

body.landing-home .home-hero-title,
body.landing-home .section-title {
    margin: 0;
    font-size: clamp(2rem, 4.8vw, 3.45rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: #0f172a;
    border: none;
    padding: 0;
}

body.landing-home .section-title {
    font-size: clamp(1.5rem, 3vw, 2.35rem);
}

body.landing-home .hero-lead,
body.landing-home .section-subtitle,
body.landing-home .manifesto-body,
body.landing-home .hero-support-copy {
    margin: 18px 0 0;
    font-size: 1rem;
    line-height: 1.75;
    color: #475569;
}

body.landing-home .hero-support-copy strong {
    color: #0f172a;
}

body.landing-home .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

body.landing-home .hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

body.landing-home .hero-button:hover {
    transform: translateY(-1px);
}

body.landing-home .hero-button-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #0f6fd8 0%, #0d8ea3 100%);
    box-shadow: 0 14px 30px rgba(15, 111, 216, 0.24);
}

body.landing-home .hero-button-secondary {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

body.landing-home .hero-preview-card,
body.landing-home .home-section,
body.landing-home .metric-card,
body.landing-home .closing-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(164, 184, 210, 0.16);
    box-shadow: 0 16px 32px rgba(22, 34, 63, 0.06);
}

body.landing-home .hero-preview-card {
    border-radius: 28px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: linear-gradient(180deg, rgba(244, 249, 255, 0.98), rgba(255, 255, 255, 0.96));
}

body.landing-home .preview-kicker,
body.landing-home .pricing-kicker,
body.landing-home .manifesto-card-label,
body.landing-home .insight-highlight {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f6fd8;
}

body.landing-home .preview-stack {
    display: grid;
    gap: 12px;
}

body.landing-home .preview-row,
body.landing-home .insight-point-card,
body.landing-home .industry-detail-card,
body.landing-home .pricing-list-card {
    padding: 14px 16px;
    border-radius: 20px;
    background: #f8fbff;
    border: 1px solid rgba(15, 111, 216, 0.08);
}

body.landing-home .preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.landing-home .preview-label {
    font-size: 0.88rem;
    color: #475569;
}

body.landing-home .preview-value {
    font-size: 0.92rem;
    color: #0f172a;
}

body.landing-home .preview-callout {
    padding: 16px 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(15, 111, 216, 0.08), rgba(13, 142, 163, 0.08));
}

body.landing-home .preview-callout-body {
    margin: 8px 0 0;
    font-size: 0.93rem;
    color: #475569;
}

body.landing-home .trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

body.landing-home .metric-card {
    border-radius: 24px;
    padding: 18px 18px 16px;
}

body.landing-home .metric-value {
    display: block;
    font-size: 1.18rem;
    font-weight: 800;
    color: #0f172a;
}

body.landing-home .metric-label {
    margin: 8px 0 0;
    font-size: 0.9rem;
    color: #475569;
}

body.landing-home .home-section {
    margin-top: 18px;
    padding: 24px;
    border-radius: 30px;
}

body.landing-home .section-heading {
    margin-bottom: 20px;
}

body.landing-home .manifesto-grid,
body.landing-home .pricing-panel,
body.landing-home .insight-grid {
    display: grid;
    gap: 16px;
}

body.landing-home .manifesto-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    align-items: start;
}

body.landing-home .manifesto-card,
body.landing-home .insight-feature-card,
body.landing-home .pricing-card,
body.landing-home .value-card {
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    border: 1px solid rgba(164, 184, 210, 0.16);
}

body.landing-home .manifesto-card-body {
    margin: 10px 0 0;
    color: #334155;
}

body.landing-home .value-grid,
body.landing-home .industry-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

body.landing-home .industry-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

body.landing-home .value-index {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 0.82rem;
    font-weight: 800;
    color: #0f6fd8;
}

body.landing-home .value-card h4,
body.landing-home .insight-feature-card h4,
body.landing-home .insight-point-card h4,
body.landing-home .industry-detail-card h4,
body.landing-home .pricing-card h4 {
    margin: 0;
    font-size: 1.08rem;
    color: #0f172a;
}

body.landing-home .value-card p,
body.landing-home .insight-feature-card p,
body.landing-home .insight-point-card p,
body.landing-home .industry-detail-card p,
body.landing-home .pricing-note,
body.landing-home .pricing-list li {
    margin: 10px 0 0;
    color: #475569;
}

body.landing-home .insight-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

body.landing-home .insight-stack {
    display: grid;
    gap: 12px;
}

body.landing-home .industry-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.landing-home .industry-chip {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: #f5f9ff;
    color: #1e293b;
    font-size: 0.88rem;
    font-weight: 700;
    border: 1px solid rgba(15, 111, 216, 0.08);
}

body.landing-home .pricing-panel {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
    align-items: stretch;
}

body.landing-home .pricing-card,
body.landing-home .pricing-list-card {
    border-radius: 24px;
}

body.landing-home .pricing-value {
    margin-top: 10px;
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 800;
    color: #0f172a;
}

body.landing-home .pricing-caption {
    margin: 8px 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f6fd8;
}

body.landing-home .pricing-list {
    margin: 0;
    padding-left: 18px;
}

body.landing-home .pricing-list li + li {
    margin-top: 10px;
}

body.landing-home .closing-card {
    border-radius: 30px;
    padding: 26px;
    background: linear-gradient(140deg, #0f172a 0%, #12385d 55%, #0d8ea3 100%);
}

body.landing-home .closing-card .section-title,
body.landing-home .closing-card .section-subtitle {
    color: #f8fafc;
}

body.landing-home .closing-card .hero-button-primary {
    background: #ffffff;
    color: #0f172a;
    box-shadow: none;
}

body.landing-home .closing-card .hero-button-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 960px) {
    body.landing-home .home-hero,
    body.landing-home .manifesto-grid,
    body.landing-home .insight-grid,
    body.landing-home .pricing-panel,
    body.landing-home .value-grid,
    body.landing-home .industry-detail-grid,
    body.landing-home .trust-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    body.landing-home .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    body.landing-home .home-hero,
    body.landing-home .home-section,
    body.landing-home .closing-card {
        padding: 20px 18px;
        border-radius: 26px;
    }

    body.landing-home .hero-actions {
        flex-direction: column;
    }

    body.landing-home .hero-button {
        width: 100%;
    }

    body.landing-home .preview-row {
        flex-direction: column;
        align-items: flex-start;
    }
}