@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&family=Oswald:wght@500;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Noto+Serif+SC:wght@300&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Special+Gothic+Expanded+One&display=swap');
        :root {
            /* Sans 계열 (UI / 본문용) */
            --font-sans: 'Red Hat Display', system-ui, -apple-system, sans-serif;
            /* Serif 계열 (타이틀 / 강조용) */
            --font-serif: 'Noto Serif', 'Noto Serif SC', serif;
            /* Display 계열 (포인트 타이틀용) */
            --font-display: 'Special Gothic Expanded One', cursive;
        }




/* 1. Red Hat Display 폰트 정의 */

/* Regular (400) */
@font-face {
    font-family: 'Red Hat Display';
    src: url('http://cocopa.kr/font/RedHatDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Light (300) */
@font-face {
    font-family: 'Red Hat Display';
    src: url('http://cocopa.kr/font/RedHatDisplay-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* Medium (500) */
@font-face {
    font-family: 'Red Hat Display';
    src: url('http://cocopa.kr/font/RedHatDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* SemiBold (600) */
@font-face {
    font-family: 'Red Hat Display';
    src: url('http://cocopa.kr/font/RedHatDisplay-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* Bold (700) */
@font-face {
    font-family: 'Red Hat Display';
    src: url('http://cocopa.kr/font/RedHatDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* ExtraBold (800) */
@font-face {
    font-family: 'Red Hat Display';
    src: url('http://cocopa.kr/font/RedHatDisplay-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

/* Black (900) */
@font-face {
    font-family: 'Red Hat Display';
    src: url('http://cocopa.kr/font/RedHatDisplay-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}



        
        p,
        span,
        li,
        a {
            font-family: var(--font-sans);
            font-weight: 400;
        }
        
        small {
            font-size: 13px;
            color: #666;
        }
        
        .display-title {
            font-family: var(--font-sans);
            font-size: 48px;
            letter-spacing: 0.02em;
        }
        
        .numeric {
            font-family: 'Red Hat Display', var(--font-sans);
            font-variant-numeric: tabular-nums;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: var(--font-sans);
            font-size: 16px;
            line-height: 1.6;
            font-weight: 400;
            background: #191919;
            color: #fff;
            height: 100%;
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        html {
            font-size: 62.5%;
            height: 100%;
        }
        
        body,
        th,
        td,
        input,
        select,
        textarea,
        button {
            color: #fff;
            font-size: 1.6rem;
            line-height: 1.4;
            /*
            font-family: 'Montserrat', "Pretendard Variable", sans-serif;
            -webkit-font-smoothing: antialiased;
*/
            letter-spacing: 0.06rem;
        }
        /* 헤더 스타일 */
        
        header {
            position:relative;
            top: 0;
            left: 0;
            width: 100%;
            padding: 30px 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
        }
        
        .logo img {
            height: 43px;
        }
        
        nav a:hover {
            opacity: 1;
        }
        
        nav ul {
            list-style: none;
            display: flex;
        }
        
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        nav>ul {
            display: flex;
            align-items: center;
        }
        
        nav>ul>li {
            position: relative
        }
        
        nav>ul>li>a {
            color: #fff;
            font-size: 16px;
            opacity: 0.7;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            height: 4.5rem;
            padding: 0 4rem;
            font-weight: 400;
            letter-spacing: 0.09rem;
            transition: all ease .3s;
            text-decoration: none;
        }
        
        nav>ul>li>a:after {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: 1px;
            background-color: #fff;
            content: '';
            transition: all ease .3s
        }
        
        nav>ul>li>a:hover,
        nav>ul>li.on>a {
            color: #fff
        }
        
        nav>ul>li>a:hover:after,
        nav>ul>li.on>a:after {
            right: auto;
            left: 0;
            width: 100%
        }

/* 기존 CSS 아래에 추가 혹은 수정 */

nav > ul > li.on > a {
    opacity: 1; /* 활성화된 메뉴는 불투명도를 1로 해서 선명하게 */
    font-weight: 700; /* 좀 더 강조하고 싶을 때 */
}

/* 선 색상을 코코파 레드로 바꾸고 싶다면 이 부분만 수정하세요 */
nav > ul > li.on > a:after {
    background-color: #ff0000; /* 흰색 선 대신 빨간색 선 */
    height: 1px; /* 선 두께를 살짝 두껍게 */
}
        



        

        /* ===== Mobile Responsive ===== */
        
        @media (max-width: 768px) {
            html {
                font-size: 56%;
            }
            /* 헤더 */
            header {
                padding: 20px 0 0 0;
                display: flex;
                flex-direction: column;
            }

            .logo img {
                height: 28px;
            }

            nav {
                display;
                flex: auto;
            }

            nav > ul > li > a {
                color: #fff;
                font-size: 13px;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                height: 4.5rem;
                padding: 0 2rem;
            }
            
            

        }
        


/* --- 모바일 대응 (768px 이하) --- */
@media (max-width: 768px) {
    header {
        /* 모바일에서는 좌우 여백을 줄여 메뉴 공간 확보 */
        padding: 20px 15px 0; 
        flex-direction: column; /* 로고와 메뉴를 세로로 배치하고 싶을 때 활성화 */
        gap: 15px;
    }

    nav {
        width: 100%; /* 네비게이션이 전체 너비 차지 */
    }

    nav > ul {
        width: 100%; /* UL도 전체 너비 */
        display: flex;
        padding: 0;
        margin: 0;
    }

    nav > ul > li {
        /* 정확히 1/3씩 등분 */
        flex: 1; 
        text-align: center;
    }

    nav > ul > li > a {
        /* 기존 4rem 패딩을 제거하고 너비를 100%로 */
        padding: 0; 
        width: 100%;
        font-size: 13px; 
        height: 4rem;   /* 높이도 살짝 조정 */
        justify-content: center;
    }
}




.introduce-container {
    max-width: 1700px;
    margin: 0 auto;
    padding: 80px 50px;
    text-align: center;
}

.introduce-container .profile-section {     display: flex;
    flex-direction: column;}


/* 타이틀 스타일 */
.section-title {
    font-size: 64px;
    font-weight: 800;
    margin-bottom: 50px;
    letter-spacing: 1px;
}



/* 프로필 정보 */
.master-info {
    margin-bottom: 30px;
}

.profile-img img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 20px;
    border: 2px solid #333;
}

.role {
    font-size: 20px;
    font-weight: 600;
    /* color: #bbb; */
    margin-bottom: 15px;
}

.name {
    font-size: 48px;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.real-name {
    font-size: 16px;
    font-weight: 400;
    color: #888;
    margin-left: 10px;
        display: inline-block;
    text-align: left;
}

.real-name em { font-style: normal; font-size: 11px;}

.handle {
    /* color: #666; */
    font-size: 16px;
    font-weight: 600;
}

/* 텍스트 내용 */
.bio, .closing-bio {
    max-width: 680px;
    margin: 50px auto 30px;
    line-height: 1.6;
    font-size: 12px;
    letter-spacing: 0.06rem;
    color: #d3d3d3;
    text-transform: uppercase;
}

.bio {}

.closing-bio {   font-size: 11px; margin: 20px auto 0;}


/* 상세 리스트 */
.details {
    max-width: 840px;
    margin: 60px auto;
    text-align: left;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    row-gap: 45px;
        color: #d3d3d3;
}
.detail-item {
    display: flex;
    column-gap: 60px;
}
.detail-item h3 {
    font-size: 16px;
    /* border-bottom: 1px solid #333; */
    /* padding-bottom: 10px; */
    /* margin-bottom: 20px; */
    color: #fff;
    min-width: 240px;
    position: relative;
}

.detail-item ul {
    list-style: none;
    padding: 0;
}

.detail-item ul li {
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.5;
    list-style: disc;
}




/* 1. 제목 앞 플러스(+) 아이콘 구현 */
.plus_icon {
    position: relative;
    padding-left: 20px; /* 기호가 들어갈 공간 확보 */
}

.plus_icon::before {
    content: '+'; /* 텍스트 방식 */
    position: absolute;
    left: 0;
    top: 10px;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 600; /* 얇은 느낌 */
    color: #fff;
}

/* 2. 링크 뒤 빨간 화살표(↗) 구현 */
.arrow_red {
    text-decoration: none;
    color: #d3d3d3;
    position: relative;
    padding-right: 20px; /* 화살표 공간 */
    display: inline-block;
    transition: color 0.3s;
}

.arrow_red::after {
    /* unicode ↗ 활용 또는 폰트 아이콘 */
    content: '\2197';
    position: absolute;
    right: 0;
    top: 0;
    color: #D3544E; /* 이미지의 붉은색 */
    font-size: 16px;
    font-weight: 400;
    transition: transform 0.3s;
}

/* 호버 효과: 화살표가 살짝 움직이는 디테일 */
.arrow_red:hover {
    color: #fff;
}

.arrow_red:hover::after {
    transform: translate(2px, -2px);
    color: #ff0000;
}

/* (보너스) 리스트 앞의 점(·)도 가상 요소로 구현 시 */
.detail-item ul li {
    list-style: none;
    position: relative;
    padding-left: 15px;
}

.detail-item ul li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: #888;
    font-weight: bold;
}



.masterpieces li a {
    text-decoration: none;
    transition: color 0.3s;
}

.masterpieces li a:hover {
    color: #ff0000; /* 강조색 */
}

.divider {
    border: 0;
    border-top: 1px solid #666;
    margin: 100px 0;
}

/* 인스타그램 섹션 */
.insta-header {
    margin-bottom: 40px;
}

.insta-icon {
/*    width: 40px;*/
    height: 165px;
    margin-bottom: 10px;
}

.insta-title { display: none;
    font-size: 28px;
    font-family: 'Billabong', sans-serif; /* 인스타 느낌의 폰트 */
}

.insta-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5열 구성 */
    gap: 10px;
    margin-bottom: 40px;
}

.insta-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #111;
}

.insta-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
    cursor: pointer;
}

.insta-item img:hover {
    transform: scale(1.05);
}

.insta-item a {
    display: block; /* 링크 영역을 박스 전체로 확장 */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.insta-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않게 꽉 채움 */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 마우스를 올렸을 때 살짝 커지며 투명해지는 효과 */
.insta-item a:hover img {
    transform: scale(1.08);
    opacity: 0.8;
}



/* 더보기 버튼 */
.btn-more {
    display: inline-block;
    padding: 10px 40px;
    border: 1px solid #999;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    border-radius: 30px;
    transition: all 0.3s;
    width: 240px;
}

.btn-more:hover {
    background-color: #fff;
    color: #000;
}

/* 반응형 처리 */
@media (max-width: 768px) {
    .details {
        flex-direction: column;
    }
    .insta-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    
    .detail-item { flex-direction: column;}
}



/* 푸터 전체 배경 및 폰트 설정 */
.footer {
    /* background-color: #111; */ /* 이미지의 어두운 배경색 */
    color: #888; /* 기본 텍스트 색상 */
    font-family: 'Red Hat Display', sans-serif;
    padding: 60px 0 40px 0;
}

.footer a { color: #fff; text-decoration: none;  }

.footer-container {
    /* max-width: 100%; */
    margin: 0 auto;
    padding: 0 50px;
}

.footer-line {
    border: 0;
    border-top: 1px solid #717171;
    margin-bottom: 50px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* 좌측 로고 */
.footer-logo img {
    width: 140px; /* 로고 사이즈 조절 */
    height: auto;
    opacity: 0.9;
}

/* 중앙 정보 */
.footer-info {
    flex: 1;
    margin-left: 60px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
}

.company-name {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 5px 0;
    letter-spacing: 0.5px;
}

.footer-info strong {
    color: #bbb;
    font-weight: 600;
}

.copyright {
    margin-top: 20px;
    font-size: 11px;
    color: #cfcfcf;
}

/* 우측 링크 및 SNS */
.footer-right {
    text-align: right;
}

.footer-links {
    margin-bottom: 20px;
}

.footer-links a {
    color: #bbb;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    margin-left: 25px;
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #fff;
}

/* SNS 아이콘 원형 스타일 */
.footer-sns {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.sns-icon img {
    width: 36px; /* 아이콘 크기 */
    height: 36px;
    transition: transform 0.3s, opacity 0.3s;
}

.sns-icon:hover img {
    transform: translateY(-3px);
    opacity: 1;
}


    .sns-wrap {
    display: flex;
    justify-content: flex-end;
        gap: 9px;
        flex-wrap: wrap;

    }

    .sns-item {
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.25s ease;
        cursor: pointer;
    }

    .sns-item svg {
        width: 40px;
        height: 40px;
        fill: #fff;
        opacity: 0.9;
        transition: 0.25s ease;
    }

    .sns-item img {
        width: 24px;
        height: 24px;
        opacity: 0.9;
        transition: 0.25s ease;
    }

    /* 호버 시 강조 */

    .sns-item:hover {
        border-color: #fff;
    }

    .sns-item:hover svg {
        opacity: 1;
        transform: scale(1.08);
    }




/* 반응형 처리 */
@media (max-width: 1024px) {
    
    .footer-container { padding: 0 20px;}
    .footer-content {
    }
    .footer-info {
        margin-left: 0;
    }
    .footer-right {
        text-align: left;
    }
    .footer-sns {
        justify-content: flex-start;
    }
    .footer-links a {
        margin-left: 0;
        margin-right: 25px;
    }
}





/* 태블릿 및 모바일 통합 대응 (1024px 이하) */
@media (max-width: 1024px) {
    .introduce-container {
        padding: 60px 20px;
    }
    
    .details {
        gap: 30px;
        padding: 0 10px;
    }
}

/* 모바일 전용 대응 (768px 이하) */
@media (max-width: 768px) {
    /* 1. 상단 타이틀 및 프로필 */
    .section-title {
        font-size: 32px; /* 타이틀 크기 축소 */
        margin-bottom: 40px;
    }

    .profile-img img {
        width: 100px;
        height: 100px;
    }

    .name {
        font-size: 26px;
    }
    
    .real-name {
display: block;
        font-size: 12px;
    }

    /* 2. 본문 텍스트 */
    .bio {
        line-height: 1.6;
        margin: 30px auto;
        padding: 0 10px;
/*        text-align: justify; */
    }
    
    

    /* 3. 경험 및 작품 리스트 (세로 배치) */
    .details {
        flex-direction: column; /* 가로 배열을 세로로 변경 */
        gap: 40px;
        margin: 50px auto;
    }

    .detail-item h3 {
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .detail-item ul { margin-left: 4px;}
    .detail-item ul li { margin-bottom: 3px;}
    
    .closing-bio br { display: none; }

    /* 4. 인스타그램 그리드 변경 */
    .insta-grid {
        grid-template-columns: repeat(2, 1fr); /* 5열에서 2열로 변경 */
        gap: 8px;
    }

    .insta-title {
        font-size: 24px;
    }
    
    .insta-icon { height: 100px;}

    /* 5. 푸터(Footer) 최적화 */
    
    .footer { padding-top: 0}
    
    .footer-content {
        flex-direction: column; /* 로고, 정보, SNS를 세로로 배치 */
        align-items: center;
        text-align: center;
        
    }

    .footer-logo {
        margin-bottom: 30px;
    }

    .footer-info {
        margin-left: 0;
        margin-bottom: 40px;
        width: 100%;
    }

    .footer-right {
        text-align: center;
        width: 100%;
    }

    .footer-links {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 20px;
    }

    .footer-links a {
        margin-left: 0;
        font-size: 11px;
    }

    .footer-sns {
        justify-content: center;
    }
    
    .sns-wrap { justify-content: center;}

    .btn-more {
        width: 80%; /* 버튼을 모바일에서 클릭하기 쉽게 넓힘 */
        padding: 12px 0;
    }
}

/* 초소형 모바일 (480px 이하) */
@media (max-width: 480px) {
    .section-title {
   
    }
    
    .role { font-size: 16px;}
    .handle { font-size: 14px; color: #999}
    
    .insta-grid {
        grid-template-columns: repeat(2, 1fr); /* 작은 화면에서도 2열 유지 */
    }
    
    .footer-info {
        font-size: 10px; /* 텍스트가 깨지지 않도록 소폭 축소 */
    }
    
}



/* 기본 배경 및 레이아웃 */
.support-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 20px;
    
    color: #fff;
    font-family: 'Red Hat Display', sans-serif;
}

.support-header {
    text-align: center;
    margin-bottom: 80px;
}

.inquiry-section { max-width: 600px; margin: 0 auto;}

.support-subtitle {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 600;
}

/* 인콰이어 폼 */
.inquiry-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 40px;
}

.inquiry-form .input-group {
    margin-bottom: 25px;
    position: relative;
}

.inquiry-form input, 
.inquiry-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #444;
    padding: 15px 0;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    outline: none;
}



/* 1. 입력창 기본 상태 보완 */
.inquiry-form input, 
.inquiry-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #444; /* 기본 선 색상 */
    padding: 15px 0;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    outline: none; /* 브라우저 기본 파란 테두리 제거 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 부드러운 변화 효과 */
}

/* 2. 포커스(선택) 되었을 때 스타일 */
.inquiry-form input:focus, 
.inquiry-form textarea:focus {
    border-bottom: 1px solid #fff; /* 선택 시 흰색으로 강조 */
    /* 선택 사항: 하단에 미세한 광채 효과를 주고 싶을 때 */
    /* box-shadow: 0 1px 0 0 #fff; */
}

/* 3. 에러 발생 시 (필수 입력 미기입 등) 활용할 스타일 (선택사항) */
.inquiry-form input:invalid:focus {
    border-bottom: 1px solid #ff4d4d; /* 잘못된 입력 시 빨간색 */
}

/* 4. 플레이스홀더 색상 (글씨 쓰기 전 안내 문구) */
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder {
    color: #666;
    transition: color 0.3s;
}

/* 포커스 시 플레이스홀더를 더 흐리게 하거나 숨김 */
.inquiry-form input:focus::placeholder,
.inquiry-form textarea:focus::placeholder {
    color: #333;
}


/* 1. 입력창 그룹 레이아웃 설정 */
.inquiry-form .input-group {
    margin-bottom: 25px;
    position: relative; /* 가상 요소의 기준점이 됩니다 */
    overflow: hidden;   /* 선이 영역 밖으로 나가지 않게 설정 */
}

/* 2. 기본 입력창 스타일 (가이드라인) */
.inquiry-form input, 
.inquiry-form textarea {
    width: 100%;
    background: transparent;
    border: none; /* 전체 테두리 제거 */
    /* 아래 한 줄을 추가하여 기본 가이드라인만 흐리게 표시 */
    border-bottom: 1px solid #888; 
    padding: 15px 0;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    display: block;
    transition: color 0.3s;
}

/* 3. 애니메이션 효과를 줄 가상 선 (밑줄) */
.inquiry-form .input-group::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px; /* 선 두께 1px */
    background: #fff; /* 붉은색 대신 깔끔한 흰색 적용 */
    
    /* 선을 왼쪽 밖으로 숨김 */
    transform: translateX(-101%); 
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 4. 입력창에 포커스가 갔을 때 선이 이동 */
.inquiry-form .input-group:focus-within::after {
    transform: translateX(0);
}

/* 5. 마우스를 올렸을 때(Hover) 미세하게 밝아지는 효과 (선택사항) */
.inquiry-form .input-group:hover::after {
    background: #888; /* 호버 시에는 약간 회색으로 미리 표시 가능 */
    transform: translateX(-100%); /* 포커스 전까지는 숨김 유지 */
}

/* 포커스 시 호버 효과보다 우선순위 높게 설정 */
.inquiry-form .input-group:focus-within::after {
    background: #fff;
    transform: translateX(0);
}

.inquiry-form input:invalid, 
.inquiry-form input:invalid:focus,
.inquiry-form textarea:invalid:focus {
    box-shadow: none;
    border-bottom: 1px solid #888; /* 에러 시에도 기존 선 유지 */
}


.inquiry-form textarea {
    height: 120px;
    resize: none;
}

.char-count {
    text-align: right;
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

#currentChar { font-weight: 600; color: #FF5353}

/* 개인정보 동의 박스 */
.privacy-box {
    margin-top: 40px;
    text-align: left;
}

.privacy-box h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}

.privacy-box p {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #888;
}

.checkbox-container {
    display: flex;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
    color: #fff;
}

.checkbox-container input {
    width: auto;
    margin-right: 10px;
}

/* 하단 버튼 */
.form-buttons {
    display: flex;
    gap: 15px;
    margin-top: 50px;
}

.form-buttons button {
    flex: 1;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: 0.3s;
}

.btn-cancel {
    background-color: #333;
    color: #fff;
}

.btn-submit {
    background-color: #fff;
    color: #000;
}

.btn-submit:hover {
    background-color: #ddd;
}

/* 팝업 스타일 */
.popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    display: none; /* 기본 숨김 */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
    background: #fff;
    color: #000;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    max-width: 400px;
    width: 90%;
}

.popup-title {
    font-weight: 900;
    font-size: 22px;
    margin-bottom: 20px;
}

.popup-text {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 30px;
}

.btn-close {
    background: #333;
    color: #fff;
    border: none;
    padding: 12px 60px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .section-title { font-size: 36px; }
    .form-buttons { flex-direction: column; }
}


.product-detail-container {
    
    color: #fff;
    font-family: 'Red Hat Display', sans-serif;
    padding-top: 50px;
}

.product-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 60px;
    padding: 0 40px;
}

/* 메인 비주얼 컨테이너 */
.main-visual {
    width: 100%;
    /* PC 기준 4:3 비율 설정 */
    aspect-ratio: 4 / 3; 
    overflow: hidden;
    background-color: #111; /* 이미지 로딩 전 배경색 */
    margin-bottom: 40px;
}



.main-visual img {
    width: 100%;
    height: 100%;
    /* 이미지가 찌그러지지 않고 영역을 꽉 채우도록 설정 (커버 모드) */
    object-fit: cover; 
    /* 이미지의 중심을 기준으로 배치 */
    object-position: center; 
    display: block;
}

/* 모바일 최적화 (768px 이하) */
@media (max-width: 768px) {
    .main-visual {
        /* 모바일 기준 1:1 비율 설정 */
        aspect-ratio: 1 / 1;
    }
}

/* 좌측 이미지 영역 */
.product-images {
    flex: 1.2;
}

.product-images img {
    width: 100%;
    display: block;
    margin-bottom: 20px;
}

/* 우측 정보 사이드바 (스크롤 시 고정) */
.product-info-sidebar {
    flex: 0.8;
}

.sticky-content {
    position: sticky;
    top: 100px; /* 헤더 높이에 맞춰 조정 */
}

.product-name {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.badge-icons {
    display: inline-flex;
    gap: 10px;
    margin-left: 15px;
    vertical-align: middle;
}

.link-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #333; /* 아이콘 배경 원형 처리 (선택사항) */
    border-radius: 50%;
    transition: background-color 0.3s, transform 0.2s;
}

.link-item:hover {
    background-color: #555;
    transform: scale(1.1);
}

.link-item img {
    width: 16px; /* 아이콘 크기 적절히 조절 */
    height: auto;
    filter: invert(0);
}





.quick-spec {
    margin-top: 30px;
}

.quick-spec dl {
    margin: 0;
}

/* 상단 항목 이름 (작은 텍스트) */
.quick-spec dt {
    font-size: 12px;
    font-weight: 400;
    color: #888; /* 이미지의 어두운 회색 */
    margin-bottom: 6px;
    text-transform: capitalize; /* 첫 글자만 대문자 */
}

/* 하단 데이터 (굵고 흰 텍스트) */
.quick-spec dd {
    font-size: 13px;
    font-weight: 600; /* Bold */
    color: #fff;
    margin-left: 0; /* 기본 마진 제거 */
    margin-bottom: 22px; /* 다음 항목과의 간격 */
    text-transform: uppercase; /* 전체 대문자 */
}

/* 무게 수치 강조 */
.quick-spec dd strong {
    font-weight: 800;
}

/* 숫자 강조 (웨이트 수치) */
.quick-spec dd strong {
    font-weight: 800;
    color: #fff;
}

/* 설명 텍스트 (괄호 부분) - 요청하신 스타일 적용 */
.quick-spec dd .desc {
    font-weight: 400; /* 폰트 굵기 400 */
    color: #fff;      /* 색상 #888 */
    font-size: 11px;  /* 숫자보다 살짝 작게 조절 (선택 사항) */
    text-transform: uppercase;
}


/* 다시 숫자는 흰색으로 */
.quick-spec dd strong {
    color: #fff;
}


/* 마지막 항목 마진 제거 */
.quick-spec dl dt:last-of-type + dd {
    margin-bottom: 0;
}

/* 모바일 가독성 최적화 */
@media (max-width: 768px) {
    .quick-spec dt {
        font-size: 11px;
    }
    .quick-spec dd {
        font-size: 13px;
        margin-bottom: 18px;
    }
}





/* 버튼 스타일 */
.action-buttons {
    display: flex;
    gap: 10px;
    margin: 40px 0;
}

.action-buttons button {
    flex: 1;
    padding: 11px 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: 0.3s;
    border-radius: 0 20px 0 0;
}

.btn-buy { background-color: #333; color: #fff; }
.btn-inquiry { background-color: #fff; color: #000; }
.btn-buy:hover { background-color: #444; }

/* 아코디언 스타일 (HTML <details> 태그 활용) */
.accordion-container {
    border-top: 1px solid #333;
    margin: 80px auto;
}

details {
}

summary {
    padding: 0 10px 0 20px;
    height: 36px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #6e6e6e;
    margin-bottom: 5px;
}

summary::after {
    content: '+';
color: #999;
    font-size: 30px;
    font-weight: 100;
    line-height: 30px;
}

details[open] summary::after {
    content: '-';
}

.details-content {
    padding: 24px;
    font-size: 11px;
    line-height: 1.8;
    color: #dbdbdb;
    margin-bottom: 5px;
    background-color: #2c2c2c;
}

.details-content ul {
    list-style: none;
    padding: 0;
}

/* 모바일 대응 */
@media (max-width: 1024px) {
    .product-inner {
        flex-direction: column;
        padding: 0;
        gap: 30px
    }
    .sticky-content {
        position: static;
    }
    .product-name {
        font-size: 32px;
    }
    .product-info-sidebar { padding: 0 20px;}
}


.store_banner {position: fixed;bottom: 30px;right: 50px;z-index: 100;display: flex;column-gap: 10px}
.store_banner a {position: relative;display: flex;padding: 3px 36px 3px 18px;background-color: #fff;align-items: center;border-radius: 4px;}
.store_banner a img { height: 36px }
.store_banner a::after {content: '';grid-area: arrow;justify-self: center;width: 8px;height: 8px;border-top: 1px solid #888;border-right: 1px solid #888;transform: rotate(45deg);transition: all 0.3s ease;position: absolute;right: 13px;}
.store_banner a:hover::after { border-color: var(--primary-green); transform: rotate(45deg) translate(5px, -5px); }

@media (max-width: 1024px) {
    
.store_banner {position: relative;
        bottom: unset;
        right: unset;
        z-index: 100;
        display: flex;
        column-gap: 5px;
        justify-content: center;
        padding: 20px 0 0;}

}