/* =========================================================
   buttons.css - iOS Style "Deep & Chewy" Interaction
   ========================================================= */

.btn-ios {
    /* 1. 레이아웃 & 크기 */
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    /* 컨텐츠 상단 정렬 */

    height: 50px;
    padding: 0 32px;
    margin: 0;

    /* 2. 디자인 */
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 100px;

    /* 유리 효과 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* 3. 동작 설정 */
    overflow: hidden;
    cursor: pointer;
    text-decoration: none !important;
    box-sizing: border-box;

    /* [핵심 수정 1] 놓았을 때(Release)의 쫀득한 텐션
       - transform 시간을 0.6s로 늘리고, 오버슈트(1.56)를 주어 '팅~' 하고 돌아오게 함
    */
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------------------------------------------------
   [클릭/터치] Active State (꾹 눌리는 느낌)
   --------------------------------------------------------- */
.btn-ios:active {
    /* [핵심 수정 2] 더 깊이 눌리도록 크기 축소 
       - 0.96 -> 0.90 (확실한 타격감)
    */
    transform: scale(0.90);

    background: rgba(255, 255, 255, 0.3);
    /* 눌렀을 때 좀 더 밝게 */
    border-color: rgba(255, 255, 255, 0.8);

    /* [핵심 수정 3] 누를 때는 즉각적으로 반응 (딜레이 없이)
       - transition을 0.1s로 짧게 덮어써서 '팍' 눌리는 느낌 구현
    */
    transition: transform 0.1s ease-out, background 0.1s;
}

/* ---------------------------------------------------------
   내부 텍스트 컨테이너 (움직이는 엘리베이터)
   --------------------------------------------------------- */
.btn-ios__content {
    display: flex;
    flex-direction: column;
    width: 100%;

    /* 텍스트 모션도 쫀득하게 */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 개별 텍스트 라벨 */
.btn-ios__label {
    height: 48px;
    /* 높이 보정 (50px - border 2px) */

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;

    /* 텍스트 드래그 방지 */
    user-select: none;
    -webkit-user-select: none;
}

.btn-ios__label:nth-child(2) {
    font-weight: 700;
}

/* ---------------------------------------------------------
   [빨간 점] Red Dot
   --------------------------------------------------------- */
.btn-ios .dot {
    display: block;
    width: 6px;
    height: 6px;
    background: #ff3b30;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.5);
}

/* ---------------------------------------------------------
   [인터랙션] Hover
   --------------------------------------------------------- */
.btn-ios:hover .btn-ios__content {
    transform: translateY(-48px);
}

.btn-ios:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
}

/* sideToggle.css - Sticker Tab + iPhone Minimal */

.side-toggle-menu {
    position: fixed;
    top: 75%;
    /* 우측 하단 1/3 지점 */
    right: 0;
    z-index: 10001;
    display: flex;
    flex-direction: row-reverse;
    /* 버튼이 오른쪽에 고정 */
    align-items: center;
    transform: translateY(-50%);
}

/* [버튼] 스티커 탭 디자인 */
.side-toggle-btn {
    width: 32px;
    /* 툭 튀어나온 너비 고정 */
    height: 52px;
    /* 높이 고정 */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    border-right: none;
    border-radius: 12px 0 0 12px;
    /* 왼쪽만 둥글게 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px 0 0;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
    /* 버튼 크기 자체는 변하지 않도록 설정 */
    transition: background 0.3s ease;
}

/* [아이콘 래퍼] 내부 막대기들을 가두는 박스 */
.icon-wrapper {
    width: 14px;
    height: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* [막대기] 절대 고정 (변형 금지) */
.icon-wrapper span {
    display: block;
    width: 14px !important;
    /* 가로 고정 */
    height: 1.5px !important;
    /* 세로 두께 고정 */
    background: rgba(0, 0, 0, 0.4);
    border-radius: 1px;
    /* !!! 중요: transition에서 width, height를 절대 쓰지 않음 !!! */
    transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}

/* 클릭 시 X자로 변할 때도 '두께'는 유지함 */
.side-toggle-menu.is-open .icon-wrapper span:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}

.side-toggle-menu.is-open .icon-wrapper span:nth-child(2) {
    opacity: 0;
}

.side-toggle-menu.is-open .icon-wrapper span:nth-child(3) {
    transform: translateY(-4.5px) rotate(-45deg);
}

/* [내용] 주르륵 펼쳐지는 캡슐 */
.side-content {
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

.side-toggle-menu.is-open .side-content {
    width: 280px;
    /* 주르륵 펼쳐질 너비 */
    opacity: 1;
}

.side-inner {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    border-right: none;
    padding: 12px 24px;
    border-radius: 16px 0 0 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
}


/* 텍스트 스타일 */
.side-link .en {
    font-family: -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #000;
    transition: all 0.3s ease;
}

.side-link:hover .en {
    /* 제시하신 그라데이션 색상 적용 (#001A8E -> #00A859) */
    background: linear-gradient(90deg, #001A8E, #00A859);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 국문 텍스트: 호버 시 블루톤으로 변경 */
.side-link .ko {
    font-size: 10px;
    color: rgba(0, 0, 0, 0.45);
    transition: color 0.3s ease;
}

.side-link:hover .ko {
    /* 그라데이션의 시작점인 딥 블루톤 계열로 변경 */
    color: #001A8E;
    opacity: 0.7;
}

/* 얇은 구분선 (호버 중인 아이템 옆의 선도 같이 반응하게 하고 싶다면) */
.side-divider {
    width: 0.5px;
    height: 16px;
    background: rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}

/* [추가] 흰색 배경 전용 다크 스타일 */
.btn-ios.is-dark {
    background: rgba(0, 0, 0, 0.05);
    /* 아주 연한 회색 배경 */
    border: 1px solid rgba(0, 0, 0, 0.15);
    /* 선명한 테두리 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.btn-ios.is-dark .btn-ios__label {
    color: #111;
    /* 글자색을 검정색으로 변경 */
}

/* 다크 스타일 호버/액티브 상태 */
.btn-ios.is-dark:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.3);
}

.btn-ios.is-dark:active {
    background: rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.5);
    transform: scale(0.92);
    /* 쫀득한 클릭감 유지 */
}

/* 점(Dot) 그림자 조정 */
.btn-ios.is-dark .dot {
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.3);
}

/* ---------------------------------
 * 버튼: 하이엔드 은은한 유도 애니메이션
 * --------------------------------- */

/* 1. 버튼 전체의 느린 부유 효과 (기본 상태에서 작동) */
.hero-btn-bottom {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    /* 아주 느리고 부드럽게 위아래로 움직임 */
    animation: btnFloat 4s ease-in-out infinite;
}

@keyframes btnFloat {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, -10px);
    }
}

/* 2. 버튼 내부 빛줄기(Shimmer) 효과 */
.btn-shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer-line {
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transform: skewX(-25deg);
    /* 5초마다 한 번씩 슥 지나가며 눈길을 끎 */
    animation: shimmerSwipe 5s infinite;
    pointer-events: none;
}

@keyframes shimmerSwipe {
    0% {
        left: -150%;
    }

    30%,
    100% {
        left: 250%;
    }
}

/* 3. 호버 시엔 조용히 엘리베이터 모션만 작동 */
#btnWarp:hover {
    background: rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    transition: all 0.4s ease;
}

/* 4. 불필요하게 튀는 글자 애니메이션(char-pop) 제거 */
.btn-ios__label {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}