/* ==========================================================================
   웹 폰트 불러오기 (Pretendard & Paperlogy)
   ========================================================================== */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* ==========================================================================
   1. Variables & Global Styles
   ========================================================================== */
:root {
    /* Colors */
    --color-primary: #0055FF; /* 메인 블루 (앱소개, 쇼핑몰 등) */
    --color-primary-dark: #2563eb;
    --color-navy: #0A3162; /* 헤더/푸터 등 짙은 네이비 */
    --color-navy-dark: #0f172a; /* 푸터 배경 */
    --color-black: #111111;
    --color-text-main: #333333;
    --color-text-sub: #64748b;
    --color-bg-light: #f8fafc;
    --color-bg-blue-light: #eff6ff; /* 다운로드 배너 배경 */
    --color-border: #e2e8f0;
    --color-white: #ffffff;

    /* Fonts */
    --font-main: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    --font-point: 'Paperozi', sans-serif;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 9999px;

    /* Layout */
    --max-width: 1856px;
}

body {
    font-family: var(--font-main);
    color: var(--color-text-main);
}

.inner {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   2. Typography (타이포그래피)
   ========================================================================== */
.txt-h1 { font-family: var(--font-point); font-size: 48px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.txt-h2 { font-family: var(--font-point); font-size: 36px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; }
.txt-h3 { font-family: var(--font-point); font-size: 24px; font-weight: 700; line-height: 1.4; }
.txt-body1 { font-size: 18px; font-weight: 500; }
.txt-body2 { font-size: 16px; font-weight: 400; color: var(--color-text-sub); }
.txt-point { color: var(--color-primary); }

/* ==========================================================================
   3. Buttons (버튼 컴포넌트)
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    transition: all 0.2s ease;
    gap: 8px;
}
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.btn-primary:hover { background-color: var(--color-primary-dark); }

.btn-dark {
    background-color: var(--color-black);
    color: var(--color-white);
}
.btn-dark:hover { background-color: var(--color-navy); }

.btn-outline {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
}
.btn-outline:hover { border-color: var(--color-text-main); }

.btn-store { /* 앱스토어, 구글플레이 버튼 */
    background-color: var(--color-white);
    color: var(--color-black);
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ==========================================================================
   4. Header (글로벌 네비게이션)
   ========================================================================== */
.gotcha-header {
    background: transparent;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.gotcha-header .inner {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 110px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    transition: height 0.3s ease-in-out;
}
/* 스크롤을 내릴 때 헤더를 위로 숨기는 클래스 */
.gotcha-header.hidden-up {
    transform: translateY(-100%);
}
/* 스크롤을 올릴 때 나타나는 그림자 클래스 */
.gotcha-header.show-shadow {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
}
/* 스크롤을 올릴 때 헤더 높이를 줄이는 클래스 */
.gotcha-header.show-shadow .inner {
    height: 80px;
}
/* 스크롤이 내려갔을 때 배경을 흰색으로 채우는 클래스 */
.gotcha-header.bg-white {
    background: var(--color-white);
}

/* 로고를 좌측에 고정하고 우측으로 나머지 요소들을 밀어냄 */
.logo { 
    margin-right: auto;
    display: flex; 
    align-items: center; 
    font-family: var(--font-point); 
    font-size: 24px; 
    font-weight: 700; 
    color: var(--color-primary); 
    letter-spacing: -1px; 
}
.logo img { height: 24px; width: auto; display: block; }

/* GNB (메인 메뉴) 및 서브 메뉴 */
.gnb { 
    display: flex; 
    gap: 90px; 
    align-items: center; 
    margin-right: 220px; /* 메뉴와 앱 다운로드 버튼 사이의 간격 */
}
.gnb > li { position: relative; height: 80px; display: flex; align-items: center; }
.gnb a { font-size: 18px; font-weight: 600; color: var(--color-black); transition: color 0.2s; display: block; }
.gnb > li > a:hover { color: var(--color-primary); }

/* 서브 메뉴 (드롭다운) */
.sub-menu {
    position: absolute;
    top: 90px; /* 초기 위치 (아래로 내려가 있음) */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    min-width: 140px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    text-align: center;
}
/* 마우스 오버 시 서브 메뉴 노출 (위로 부드럽게 올라옴) */
.gnb > li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    top: 70px; 
}
.sub-menu li { width: 100%; height: auto; display: block; }
.sub-menu a {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-sub);
}
.sub-menu a:hover {
    color: var(--color-primary);
    background-color: var(--color-bg-light);
}

/* 헤더 우측 유틸 (앱 다운로드 버튼 등) */
.header-util { display: flex; align-items: center; }
.header-util .btn { padding: 15px 24px; font-size: 17px; font-weight: 500; }

/* ==========================================================================
   5. Hero Section (페이지 상단 비주얼 영역) - 회사소개, 앱소개
   ========================================================================== */
.hero-section {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    max-width: var(--max-width);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px;
    height: 657px;
    margin-top: 110px; /* 헤더 높이만큼 상단 여백 추가 */
}

.hero-title {
    font-size: 64px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
}

/* ==========================================================================
   5-1. Hero Section (페이지 상단 비주얼 영역) - 서비스
   ========================================================================== */
.hero-section.service {
    height: 713px;
    margin: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    box-sizing: border-box;
}

.hero-section .hero-content {
    /* display: flex; */
    align-items: center;
    width: 1080px;
}

.sub-banner-text {
    flex: 1;
    text-align: left;
}

.sub-banner-title {
    font-family: var(--font-point);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 52px;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
}

.sub-banner-desc {
    font-size: 22px;
    color: #333;
    line-height: 1.6;
    font-weight: 500;
}

.sub-banner-img {
    display: flex;
    justify-content: center;
}

.sub-banner-img img {
    width: 100%;
}

/* ==========================================================================
   6. Cards (카드 UI - 앱소개, 회사소개 등에서 주로 쓰임)
   ========================================================================== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 40px;
}
.card-basic {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}
.card-basic:hover { transform: translateY(-5px); }
.card-icon {
    width: 80px; height: 80px;
    margin: 0 auto 20px;
    background-color: var(--color-bg-light);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
}
.card-title { font-family: var(--font-point); font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.card-desc { font-size: 16px; color: var(--color-text-sub); line-height: 1.5; }

/* 이미지+텍스트 수평 카드 */
.card-horizontal {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-horizontal:nth-child(even) { flex-direction: row-reverse; }
.card-h-img img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   7. Pricing Table (요금표 - 원데이/정기구독)
   ========================================================================== */
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin: 40px 0;
    text-align: center;
}
.pricing-table th, .pricing-table td {
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
}
.pricing-table th { background-color: var(--color-bg-light); font-weight: 600; }
.pricing-table tr:last-child td { border-bottom: none; }
.price-num { font-size: 24px; font-weight: 700; color: var(--color-primary); }

/* ==========================================================================
   8. Download Banner (하단 공통 배너)
   ========================================================================== */
.download-banner {
    background: linear-gradient(to right, #e0e7ff, #bae6fd);
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
}
.banner-text { font-family: var(--font-point); font-size: 28px; font-weight: 700; color: var(--color-navy); }
.qr-box {
    background: var(--color-white);
    padding: 10px;
    border-radius: var(--radius-sm);
    width: 100px; height: 100px;
    display: flex; justify-content: center; align-items: center;
    font-size: 40px;
}
.banner-btns { display: flex; flex-direction: column; gap: 10px; }

/* ==========================================================================
   9. Footer (공통 하단)
   ========================================================================== */
.gotcha-footer {
    background-color: #1a1d24; /* 어두운 네이비톤 블랙 배경 */
    color: var(--color-white);
    padding: 80px 0;
    font-size: 18px;
}
.gotcha-footer .inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

/* 좌측 정보 영역 */
.f-left {
    display: flex;
    flex-direction: column;
}
.f-logo {
    color: var(--color-white);
    margin-bottom: 40px;
}
.f-logo img{
    height: 24px;
}
.f-info {
    line-height: 1.8;
    margin-bottom: 40px;
}
.f-info strong {
    color: #d5e7ff; /* 강조 텍스트를 살짝 밝게 */
    font-weight: 500;
    margin-right: 8px;
}
.f-info span {
    margin-right: 16px;
}
.f-links {
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
}
.f-links a {
    color: #d5e7ff;
    font-weight: 500;
}
.f-copy {
    color: #6b7280;
    margin-bottom: 16px;
}
.f-disclaimer {
    color: #6b7280;
    line-height: 1.5;
    max-width: 600px;
    font-size: 16px;
}

/* 우측 유틸 영역 */
.f-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: end;
    gap: 30px;
}
.f-select {
    background-color: #374151; /* 버튼 배경 */
    color: #e5e7eb;
    border: none;
    padding: 18px;
    border-radius: 6px;
    width: 230px;
    font-family: inherit;
    font-size: 18px;
    appearance: none; /* 기본 화살표 제거 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5e7eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}
.f-social {
    display: flex;
    gap: 10px;
    margin-bottom: 10px; /* 로고 하단 문구와 라인을 맞추기 위한 여백 */
}
.f-social-icon {
    width: 50px; height: 50px;
    border-radius: 50%;
    background-color: #374151;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-white);
    transition: background 0.3s;
}
.f-social-icon:hover { background-color: #4b5563; }
.f-social-icon img{
    width: 35px;
}

/* ==========================================================================
   10. Footer Banners (하단 CTA 배너 - 기본 / 특수 페이지용)
   ========================================================================== */
/* 1) 첫 번째 기본 배너 (연한 파란색 배경) */
.footer-banner-default {
    background-color: #cce7ff;
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 300px;
}
.fb-default-text {
    font-family: var(--font-main);
    font-size: 38px;
    font-weight: 500;
    color: var(--color-navy);
    line-height: 1.4;
}
.fb-default-text span{
    font-weight: 700;
}
.fb-default-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.fb-qr {
    width: 148px; height: 148px;
    background: var(--color-white);
    border-radius: 8px;
    padding: 8px;
    display: flex; align-items: center; justify-content: center;
}
.fb-qr img{
    width: 100%;
}
.fb-store-btns {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.btn-store.btn-appstore {
    background-color: var(--color-white);
    color: var(--color-black);
    border-radius: var(--radius-sm);
    padding: 20px 40px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-store.btn-appstore img{
    height: 25px;
}

/* 2) 두 번째 특수 배너 (쨍한 파란색 배경) - 기본적으론 숨겨둠 */
.footer-banner-special {
    background-color: #2196F3;
    padding: 80px 20px;
    display: none;
    justify-content: center;
    align-items: center;
    gap: 375px;
}
.fb-special-text {
    font-family: var(--font-main);
    font-size: 38px;
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.4;
    margin-bottom: 30px;
}
.fb-special-text span{
    font-weight: 700;
}
.fb-special-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.btn-white-pill {
    font-family: var(--font-main);
    background-color: var(--color-white);
    font-size: 22px;
    font-weight: 500;
    padding: 16px 55px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease;
    width: 250px;
}
.btn-white-pill:hover {
    transform: translateY(-5px);
}
.fb-special-img {
    width: 180px;
    height: auto;
}
/* CSS로 화살표 모양 생성 */
.btn-white-pill::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    margin-bottom: 1px;
}

/* ★ 핵심: 특정 페이지의 body 태그에 class가 있을 때만 배너를 교체 */
body.page-business .footer-banner-default {
    display: none; /* 기본 배너 숨김 */
}
body.page-business .footer-banner-special {
    display: flex; /* 특수 배너 노출 */
}

/* ==========================================================================
   11. Footer Banners (하단 CTA 배너 - 기본 / 특수 페이지용)
   ========================================================================== */
/* 플로팅 버튼 그룹 */
.floating-btn-group {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 990;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

/* 스크롤 시 나타나는 클래스 */
.floating-btn-group.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 팝업이 열렸을 때 위로 살짝 올라가는 효과 */
.floating-btn-group.popup-opened {
    bottom: 260px; /* 팝업 높이에 맞춰서 더 위로 이동하도록 수정 */
}

/* 공통 버튼 스타일 */
.float-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.float-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* 앱 다운로드 플로팅 버튼 */
.app-download-btn {
    background-color: #222; /* 짙은 검정/회색 */
    color: var(--color-white);
    font-weight: 800;
    font-size: 0.875rem;
}

.app-download-btn img{
    width: 58px;
    height: 58px;
}

/* Top 플로팅 버튼 */
.top-btn {
    background-color: var(--color-white);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    font-size: 1.5rem;
}

/* 하단 앱 다운로드 팝업 (수정본) */
.app-download-popup {
    position: fixed;
    bottom: -100%; /* 초기엔 화면 밖으로 숨김 */
    left: 0;
    width: 100%;
    background-color: #1a1d24;
    color: var(--color-white);
    z-index: 999;
    transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* 부드럽게 올라오는 애니메이션 */
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1);
}

.app-download-popup.show {
    bottom: 0; /* 클래스가 추가되면 화면 위로 올라옴 */
}

.app-download-popup .popup-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 40px 20px; /* 상하 여백 확대 */
    position: relative;
    max-width: 1080px; /* 컨테이너 너비 제한 적용 */
    margin: 0 auto;
}

/* 팝업 좌측 이미지 (QR) */
.popup-img-area {
    width: 160px;
    flex-shrink: 0;
    position: relative;
}

.popup-img-area img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* 팝업 우측 텍스트 영역 */
.popup-text-area {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.popup-title {
    font-size: 28px;
    margin-bottom: 30px;
    letter-spacing: -0.02em;
    line-height: 1.4;
}

.popup-title span{
    font-weight: 700;
}

.popup-desc {
    font-size: 1rem; /* 16px */
    color: rgba(255,255,255,0.7);
    letter-spacing: -0.02em;
    margin-bottom: 30px;
}

/* 팝업 버튼 영역 (시안에서는 없는 것으로 보여 제외 가능하지만 필요시 유지) */
.popup-btns {
    display: flex;
    gap: 12px;
}

.app-download-popup .btn-store {
    border-color: rgba(255,255,255,0.3);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #eaeaea;
}

.app-download-popup .btn-store:hover {
    transform: translateY(-2px);
}

.app-download-popup .btn-store img{
    width: 24px;
}

.popup-badge {
    display: inline-block;
    background-color: #3b8ef6; /* 파란색 뱃지 */
    color: var(--color-white);
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    align-self: flex-start; /* 텍스트 정렬에 맞춤 */
}

/* 닫기 버튼 */
.btn-popup-close {
    position: absolute;
    right: 20px;
    top: 20px; /* 상단 모서리에 배치 */
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.btn-popup-close:hover {
    color: var(--color-white);
}

/* ==========================================================================
   FAQ Section (자주 묻는 질문)
   ========================================================================== */
.faq-section {
    padding: 200px 0;
}

.faq-container {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.faq-title-area {
    width: 320px; /* 좌측 고정 너비 */
    flex-shrink: 0;
}

.faq-main-title {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 23px;
    letter-spacing: -0.02em;
}

.faq-sub-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.02em;
}

.faq-list {
    flex: 1;
    width: 100%;
}

/* 아코디언 버튼 스타일 */
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 27px 0;
    background: none;
    border: none;
    text-align: left;
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
    border-bottom: 1px solid #F4F4F4; /* 하단 구분선 */
}

/* 꺾쇠 아이콘 CSS로 구현 */
.faq-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 16px;
}

.faq-icon::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-text-main);
    border-bottom: 2px solid var(--color-text-main);
    transform: rotate(45deg);
    transition: transform 0.3s ease, top 0.3s ease;
}

/* 활성화 시 화살표 방향 위로 변경 */
.faq-item.active .faq-icon::before {
    transform: rotate(-135deg);
    top: 9px; /* 시각적 중심 맞추기 */
}

/* 답변 컨텐츠 영역 (기본적으로 숨김) */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

.faq-answer-inner {
    padding: 27px 32px;
    background-color: #F8F8F8; /* 시안과 일치하는 연한 회색 바탕 */
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 22px;
    color: #666;
    line-height: 1.6;
    letter-spacing: -0.02em;
}

/* 활성화 시 답변 컨텐츠 노출 */
.faq-item.active .faq-answer {
    max-height: 500px; /* 충분히 넉넉한 공간 부여 */
    opacity: 1;
}

.faq-item.active .faq-question{
    border: none;
}