@charset "utf-8";

:root {
    /*color*/
    --white: #ffffff !important;
    --BGGray: rgba(255, 255, 255, 0.7) !important;
    --red:#FF3E3E !important;

    /* gray */
    --gray-900: #222222 !important;
    --gray-800: #505050 !important;
    --gray-700: #767676 !important;
    --gray-600: #A9A9A9 !important;
    --gray-500: #BFBFBF !important;
    --gray-400: #EEEEEE !important;
    --gray-300: #eaeaea !important;

    /* main */
    --main-900: #346D08 !important;
    --main-800: #4E9B12 !important;
    --main-700: #889D78 !important;
    --main-600: #7EAC37 !important;
    --main-500: #52B646 !important;
    --main-400: #89D480 !important;
    --main-300: #BBDCB7 !important;
    --main-200: #B9E4A9 !important;
    --main-100: #E8F7E6 !important;

    /* POINT (Brown) */
    --brown-900: #9A540E !important;
    --brown-800: #CF8916 !important;
    --brown-700: #DA9523 !important;
    --brown-600: #E0BA7C !important;
    --brown-500: #E5C9A4 !important;
    --brown-400: #F5E6C6 !important;
    --brown-300: #FCF1DC !important;
    --brown-200: #FDF4E6 !important;
    --brown-100: #FCF7EE !important;

    /* POINT (Blue) */
    --blue-900: #1654A6 !important;
    --blue-800: #1570B7 !important;
    --blue-700: #3171C4 !important;
    --blue-600: #0672FF !important;
    --blue-500: #4C8CE0 !important;
    --blue-400: #34ACFD !important;
    --blue-300: #C2DAF8 !important;
    --blue-200: #E9F5FF !important;
    --blue-100: #F1F7FA !important;

    /* POINT (Yellow) */
    --yellow-900: #FF9D00 !important;
    --yellow-800: #FBBE08 !important;
    --yellow-700: #FFD56B !important;
    --yellow-600: #FFEFC6 !important;

    /* fonts */
    /* 앱 전체 서체를 메이플스토리체로 (QA #21). 변수 이름은 쓰는 곳이 많아 그대로 두고 값만 바꿨다. 폰트 로드 전엔 Pretendard */
    --font-pretendard: 'Maplestory', 'Pretendard', sans-serif !important;
    --font-blackhansans: 'BlackHanSans', sans-serif !important;

    /* V2 공통 헤더 배경: 위는 불투명, 아래로 갈수록 투명해지는 그라디언트 */
    --v2-header-fade: linear-gradient(180deg, rgba(142, 221, 248, .98) 0%, rgba(142, 221, 248, .86) 52%, rgba(142, 221, 248, 0) 100%);

    color-scheme: light only !important;
}

/* 맨 위/아래에서 더 끌어당겨도 검은 여백이 안 보이게 — 상품 상세(QA #127)와 같은 처리를 전 페이지에.
   html/body 배경을 화면색으로 맞추고 문서 끝 튕김(rubber band)을 끈다. 페이지별 배경은 그 위에 덮인다 */
html, body {
    background-color: #2e90d1;
    overscroll-behavior-y: none;
}
html {
    position: relative;
    height: 100%;
    min-height: 100%;
    margin: 0;
    -webkit-text-size-adjust: none;
    color-scheme: light only !important;
}

/* 시스템다크모드 대응 */
@media (prefers-color-scheme: dark) {
    :root {
        --white: #ffffff !important;
        --gray-900: #222222 !important;
        color-scheme: light only !important;
    }
    body {
        color: var(--gray-900) !important;
    }
}

body {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100%;
    font-family: var(--font-pretendard);
    overflow-y: auto;
    overflow-x: hidden;
    letter-spacing: -0.5px;
    color: var(--gray-900);
    word-break: keep-all;
    background: var(--BGPink);
    max-width: 767px;
    margin: 0 auto;
    font-size: 16px;
}
body * {
    font-size:16px;
}

/* Vue가 초기화되기 전에 {{ template }} 문구가 화면에 노출되지 않도록 한다. */
[v-cloak] {
    display: none !important;
}

/* V2 화면에서는 레거시(심쿵박스) 헤더/메뉴를 노출하지 않는다.
   페이지별 CSS 가 아닌 공통 CSS 에서 숨겨야 로딩 순서와 무관하게 겹쳐 보이지 않는다. */
.modujang-v2-home > .header-home:not(.home-header),
.modujang-v2-storage > .header-home,
.modujang-v2-mypage > .header-home,
.modujang-v2-support > .header-home,
.modujang-v2-account > .header-home,
.modujang-v2-market > .header-home,
.modujang-v2-community > .header-home,
.modujang-v2-aquarium > .header-home,
.modujang-v2-box-purchase > .header-home,
.modujang-v2-home > .home-menu-wrap,
.modujang-v2-storage > .home-menu-wrap,
.modujang-v2-mypage > .home-menu-wrap,
.modujang-v2-support > .home-menu-wrap,
.modujang-v2-account > .home-menu-wrap,
.modujang-v2-market > .home-menu-wrap,
.modujang-v2-community > .home-menu-wrap,
.modujang-v2-aquarium > .home-menu-wrap,
.modujang-v2-box-purchase > .home-menu-wrap {
    display: none;
}

/* 모두의어장 V2 공통 상단 헤더 */
.storage-v2-header {
    position: sticky;
    top: 0;
    z-index: 22;
    width: 100%;
    height: var(--v2-header-height, clamp(64px, 17.44vw, 76px));
}

/* 본문이 헤더 아래로 스크롤되며 반투명 배경 뒤로 사라지도록 처리 */
.storage-v2-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    height: calc(100% + clamp(12px, 3.59vw, 20px));
    background: var(--v2-header-fade);
    pointer-events: none;
}
.storage-v2-header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: min(100%, 576px);
    height: 100%;
    margin: 0 auto;
    padding: clamp(7px, 2.05vw, 10px) clamp(14px, 5.13vw, 28px) 0;
}
.storage-v2-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(36px, 10.26vw, 48px);
    height: clamp(36px, 10.26vw, 48px);
    margin-left: clamp(-12px, -2.56vw, -8px);
    padding: 0;
    border: 0;
    background: transparent;
}
.storage-v2-back img {
    width: clamp(8px, 2.56vw, 12px);
}
.storage-v2-header-links {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 3.08vw, 16px);
}
.storage-v2-header-links a {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    min-width: clamp(30px, 8.21vw, 42px);
    color: #174d73;
    text-align: center;
}
/* 링크 폭이 아이콘 크기(약 34px)뿐이라 사이 여백을 누르면 안 눌림.
   모양은 두고 눌리는 영역만 좌우 간격 절반과 헤더 위아래 여백까지 넓혀줌 */
.storage-v2-header-links a::after {
    content: '';
    position: absolute;
    top: -9px;
    right: calc(clamp(4px, 1.54vw, 8px) * -1);
    bottom: -9px;
    left: calc(clamp(4px, 1.54vw, 8px) * -1);
}
.storage-v2-header-links a:last-child::after {
    right: calc(clamp(14px, 5.13vw, 28px) * -1);
}
.storage-v2-header-links span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(27px, 7.18vw, 36px);
    height: clamp(27px, 7.18vw, 36px);
    border: 1px solid var(--brown-600);
    border-radius: 50%;
    background: #fff;
    box-shadow: 1px 2px 1px rgba(255, 255, 255, .7) inset, -1px -1px 2px rgba(0, 0, 0, .2) inset;
}
.storage-v2-header-links img {
    width: clamp(21px, 5.64vw, 28px);
    max-height: clamp(21px, 5.64vw, 28px);
    object-fit: contain;
}
.storage-v2-header-links em {
    display: block;
    margin-top: clamp(3px, 1.03vw, 6px);
    color: #fff;
    font-size: clamp(10px, 2.56vw, 13px);
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(27, 87, 128, .35);
}

/* 모두의어장 V2 공통 하단 메뉴: 홈 화면 여백과 크기를 기준으로 통일 */
.bng-wrap.modujang-v2-bottom-nav {
    left: 50%;
    bottom: clamp(8px, 2.56vw, 14px);
    z-index: 30;
    width: min(calc(100% - clamp(16px, 5.13vw, 28px)), var(--modujang-v2-bottom-nav-max-width, 548px));
    height: clamp(62px, 16.41vw, 82px);
    padding: clamp(17px, 4.87vw, 25px) clamp(16px, 5.13vw, 28px) clamp(8px, 2.56vw, 13px);
    transform: translateX(-50%);
    border-radius: clamp(20px, 6.15vw, 30px);
}
.bng-wrap.modujang-v2-bottom-nav a {
    display: flex;
    flex: 1 1 20%;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.bng-wrap.modujang-v2-bottom-nav img {
    width: auto;
    height: clamp(30px, 8.72vw, 42px);
    object-fit: contain;
}
.bng-wrap.modujang-v2-bottom-nav a:nth-child(3) img {
    width: clamp(48px, 13.08vw, 66px);
    height: clamp(48px, 13.08vw, 66px);
}
.bng-wrap.modujang-v2-bottom-nav span {
    margin-top: clamp(2px, .77vw, 4px);
    font-size: clamp(9px, 2.56vw, 12px);
    white-space: nowrap;
}
.bng-wrap.modujang-v2-bottom-nav a.active span {
    color: var(--blue-700);
    font-weight: 800;
}

/* 하단 메뉴 '보관함' 배지: 아직 확인하지 않은 보관 항목 수 */
.bng-wrap a.has-storage-badge {
    position: relative;
}
.bng-wrap a.has-storage-badge span.storage-nav-badge,
.bng-wrap a.has-storage-badge.active span.storage-nav-badge {
    display: inline-flex;
    position: absolute;
    /* 아이콘 오른쪽 위 모서리 기준 */
    top: -5px;
    left: calc(50% + clamp(12px, 3.6vw, 17px));
    right: auto;
    z-index: 2;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    transform: translateX(-50%);
    margin: 0;
    padding: 0 4px;
    border: 1px solid #fff;
    border-radius: 999px;
    background: #ff3b30;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    color: #fff;
    font-family: var(--font-pretendard);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.bng-wrap a.has-storage-badge span.storage-nav-badge[hidden],
.bng-wrap a.has-storage-badge.active span.storage-nav-badge[hidden] {
    display: none;
}

/* 하단 메뉴 '홈'/'소식' 새 소식 점 */
.bng-wrap a.has-nav-dot {
    position: relative;
}
.bng-wrap a.has-nav-dot span.nav-new-dot,
.bng-wrap a.has-nav-dot.active span.nav-new-dot {
    display: block;
    position: absolute;
    /* 배지와 같은 기준 */
    top: -1px;
    left: calc(50% + clamp(12px, 3.6vw, 17px));
    right: auto;
    z-index: 2;
    width: 9px;
    height: 9px;
    margin: 0;
    transform: translateX(-50%);
    padding: 0;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.bng-wrap a.has-nav-dot span.nav-new-dot[hidden],
.bng-wrap a.has-nav-dot.active span.nav-new-dot[hidden] {
    display: none;
}

/* 고정 하단 메뉴를 사용하는 V2 화면의 공통 스크롤 셸 */
.modujang-v2-storage.is__bng,
.modujang-v2-mypage.is__bng,
.modujang-v2-support.is__bng,
.modujang-v2-account.is__bng,
.modujang-v2-aquarium.is__bng,
.modujang-v2-box-purchase.is__bng {
    --v2-header-height: clamp(64px, 17.44vw, 76px);
    --modujang-v2-bottom-nav-max-width: 548px;
    --modujang-v2-bottom-nav-height: clamp(62px, 16.41vw, 82px);
    --modujang-v2-bottom-nav-offset: clamp(8px, 2.56vw, 14px);
    --modujang-v2-bottom-nav-half-height: clamp(31px, 8.205vw, 41px);
    --modujang-v2-scroll-clip-bottom: calc(var(--modujang-v2-bottom-nav-offset) + var(--modujang-v2-bottom-nav-half-height));
    --modujang-v2-scroll-bottom-space: clamp(104px, 25.64vw, 142px);
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
}
.modujang-v2-storage > .storage-v2-header,
.modujang-v2-mypage > .storage-v2-header,
.modujang-v2-support > .storage-v2-header,
.modujang-v2-account > .storage-v2-header,
.modujang-v2-aquarium > .aquarium-header,
.modujang-v2-box-purchase > .box-purchase-header {
    flex: 0 0 auto;
}
/* 스크롤 영역이 헤더 뒤까지 올라오도록 헤더가 차지하는 자리를 비움 */
.modujang-v2-storage > .storage-v2-header,
.modujang-v2-mypage > .storage-v2-header,
.modujang-v2-support > .storage-v2-header,
.modujang-v2-account > .storage-v2-header,
.modujang-v2-account > .warp > .storage-v2-header {
    margin-bottom: calc(var(--v2-header-height) * -1);
}
.modujang-v2-scroll-region {
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    margin-bottom: var(--modujang-v2-scroll-clip-bottom);
    padding-top: var(--v2-header-height);
    padding-bottom: var(--modujang-v2-scroll-bottom-space);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    /* -webkit-overflow-scrolling 은 옛 iOS 전용 속성인데,
       안드로이드 브라우저가 이걸 레이어 힌트로 받아 스크롤 영역을 따로 합성함.
       그 여파로 위에 겹친 헤더/하단 메뉴 터치가 씹히는 일이 있어 뺌 (iOS 13+ 는 기본 동작) */
}
.modujang-v2-scroll-region::-webkit-scrollbar {
    display: none;
}
.modujang-v2-account > .warp {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.modujang-v2-account > .warp > .storage-v2-header {
    flex: 0 0 auto;
}

/* 모두의어장 V2 공통 팝업 레이어
   inc_pop.php 의 팝업들은 레거시 style.css 의 기본 스타일에 의존하는데
   V2 테마는 그 파일을 불러오지 않아 팝업이 본문에 그대로 노출된다. 기본값을 여기서 정의한다. */
.dim-layer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    width: 100%;
    height: 100%;
}
.dim-layer .dimBg,
.dim-layer .dimBg2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 18, 27, .56);
}
.dim-layer .pop-layer {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(calc(100% - 40px), 360px);
    max-width: 95%;
    border-radius: 20px;
    background: var(--blue-100);
    overflow: hidden;
    transform: translate(-50%, -50%);
}
.dim-layer .pop_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dim-layer .pop_title .btn_close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.dim-layer .pop_title .btn_close img {
    width: 100%;
    height: auto;
}

/* V2 선물하기 팝업 (inc_pop.php #gift_box_pop)
   레거시 heartbox style.css 의 #gift_box_pop 규칙을 V2 디자인으로 대체한다.
   스크롤 컨테이너는 .pop-container 로 둔다 (상품 무한스크롤 JS가 여기에 바인딩됨). */
.gift_box_pop .dimBg {
    background: rgba(8, 29, 48, .64);
    backdrop-filter: blur(2px);
}
.gift_box_pop .pop-layer {
    display: flex;
    width: min(calc(100% - 32px), 400px);
    max-width: none;
    max-height: calc(100dvh - 32px);
    flex-direction: column;
    border: 1px solid #b9d8f1;
    border-radius: 22px;
    background: #f5faff;
    box-shadow: 0 18px 50px rgba(8, 46, 82, .28);
    overflow: hidden;
}
.gift_box_pop .pop-container {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    padding: 0;
    background: transparent;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.gift_box_pop .pop_title {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: center;
    min-height: 58px;
    padding: 0 58px 0 20px;
    border-bottom: 1px solid #cfe4f5;
    background: #e7f4ff;
}
.gift_box_pop .pop_title h2 {
    margin: 0;
    color: #173c5c;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
}
.gift_box_pop .pop_title .btn_close {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    transform: translateY(-50%);
}
.gift_box_pop .pop_title .btn_close img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
.gift_box_pop .pop_in,
.gift_box_pop .pop_in.mt_20 {
    margin: 0;
    padding: 18px 20px 20px;
}
.gift_box_pop .emt30 { display: none; }

/* 친구 선택 */
.gift_box_pop .box_input_title p {
    color: #223f57;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}
.gift_box_pop select.custom_select.friend {
    width: 100%;
    height: 50px;
    margin-top: 8px;
    padding: 0 42px 0 15px;
    border: 1px solid #bed6e9;
    border-radius: 15px;
    outline: 0;
    background: #fff url(../img/select.png) right 15px center / 16px no-repeat;
    color: #1f3446;
    font-size: 15px;
    font-weight: 500;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.gift_box_pop .friend_list {
    margin-top: 12px;
}
.gift_box_pop .friend_list li {
    padding: 10px 12px;
    border: 1px solid #d8e7f2;
    border-radius: 14px;
    background: #fff;
}
.gift_box_pop .friend_list li .left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gift_box_pop .friend_list li .left .thum {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eef5fb;
    overflow: hidden;
}
.gift_box_pop .friend_list li .left .thum img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gift_box_pop .friend_list li .left .txt {
    min-width: 0;
    color: #1f3446;
    text-align: left;
}
.gift_box_pop .friend_list li .left .txt p {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}
.gift_box_pop .friend_list li .left .txt p.date {
    margin-top: 2px;
    color: #7b8b99;
    font-size: 12px;
    font-weight: 500;
}

/* 상품/박스 탭 */
.gift_box_pop .tab {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}
.gift_box_pop .tab .tab__item span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    border: 1px solid #bed6e9;
    border-radius: 12px;
    background: #fff;
    color: #40627e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.gift_box_pop .tab .tab__item.active span {
    border-color: transparent;
    background: var(--blue-600);
    color: #fff;
}
.gift_box_pop .tab__content-wrapper { padding-top: 16px; }
.gift_box_pop .tab__content { display: none; }
.gift_box_pop .tab__content.active { display: block; }
.gift_box_pop .box_input_title .p1 {
    margin-bottom: 5px;
    color: #173c5c;
    font-size: 15px;
    font-weight: 800;
}
.gift_box_pop .box_input_title .p2 {
    color: #7b8b99;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    word-break: keep-all;
}

/* 상품 검색 */
.gift_box_pop .search_pop_input {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
}
.gift_box_pop .search_pop_input .select {
    flex: 0 0 96px;
}
.gift_box_pop .search_pop_input select.select01 {
    width: 100%;
    height: 44px;
    padding: 0 28px 0 12px;
    border: 1px solid #bed6e9;
    border-radius: 12px;
    background: #fff url(../img/select.png) right 10px center / 13px no-repeat;
    color: #1f3446;
    font-size: 12px;
    font-weight: 600;
}
.gift_box_pop .search_pop_input .search-wrap {
    flex: 1 1 auto;
    min-width: 0;
}
.gift_box_pop .search_pop_input .search-wrap input.textfield01 {
    height: 44px;
    padding: 0 40px 0 12px;
    border: 1px solid #bed6e9;
    border-radius: 12px;
    color: #1f3446;
    font-size: 13px;
}
.gift_box_pop .search_pop_input .search-wrap input.textfield01::placeholder {
    color: #a1b0bd !important;
    font-size: 13px;
}
.gift_box_pop .search_pop_input .search-wrap .btn-search {
    right: 8px;
    width: 24px;
    height: 24px;
    border: 0;
    background: none !important;
}
.gift_box_pop .search_pop_input .search-wrap .btn-search img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: .72;
}

/* 선물 팝업 드롭다운. 목록까지 직접 그림 (gift-popup-select.js) */
.gift_box_pop .gift-select {
    position: relative;
    width: 100%;
}
.gift_box_pop .gift-select.is-open { z-index: 30; }
.gift_box_pop .gift-select > select {
    display: none;
}
.gift_box_pop .gift-select__trigger {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid #bed6e9;
    outline: 0;
    background: #fff url(../img/select.png) no-repeat;
    color: #1f3446;
    text-align: left;
    cursor: pointer;
}
.gift_box_pop .gift-select__trigger span {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.gift_box_pop .gift-select__trigger.is-placeholder { color: #a1b0bd; }
.gift_box_pop .gift-select.is-open .gift-select__trigger { border-color: #6fb6ea; }
.gift_box_pop .gift-select__list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 5;
    width: 100%;
    max-height: 210px;
    padding: 6px;
    border: 1px solid #bed6e9;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(8, 46, 82, .18);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.gift_box_pop .gift-select.is-flipped .gift-select__list {
    top: auto;
    bottom: calc(100% + 6px);
}
.gift_box_pop .gift-select__list li { padding: 0; }
.gift_box_pop .gift-select__option {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: #1f3446;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.gift_box_pop .gift-select__option.is-selected {
    background: #e9f5ff;
    color: #1570b7;
    font-weight: 700;
}
/* 친구선택 */
.gift_box_pop .gift-select--friend { margin-top: 8px; }
.gift_box_pop .gift-select--friend .gift-select__trigger {
    height: 50px;
    padding: 0 42px 0 15px;
    border-radius: 15px;
    background-position: right 15px center;
    background-size: 16px;
    font-size: 15px;
    font-weight: 500;
}
/* 브랜드명 / 상품명 */
.gift_box_pop .gift-select--compact .gift-select__trigger {
    height: 44px;
    padding: 0 28px 0 12px;
    border-radius: 12px;
    background-position: right 10px center;
    background-size: 13px;
    font-size: 12px;
    font-weight: 600;
}
.gift_box_pop .gift-select--compact .gift-select__option {
    padding: 9px 10px;
    font-size: 13px;
}

/* 체크박스 */
.gift_box_pop .ck_box input { display: none; }
.gift_box_pop .ck_box label {
    display: inline-flex;
    position: relative;
    align-items: center;
    min-height: 20px;
    padding-left: 26px;
    color: #2b4c66;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.gift_box_pop .ck_box label::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    background: url(../img/check-off.png) center / 100% no-repeat;
    transform: translateY(-50%);
}
.gift_box_pop .ck_box input:checked + label::before {
    background-image: url(../img/check-on.png);
}
.gift_box_pop .select_all_bar {
    display: flex;
    align-items: center;
    margin: 14px 0 9px;
}
.gift_box_pop .select_all_bar .sel_count {
    margin-left: 5px;
    color: var(--blue-600);
    font-weight: 700;
}

/* 선물할 상품 목록 */
.gift_box_pop .cart_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gift_box_pop .cart_list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #d8e7f2;
    border-radius: 14px;
    background: #fff;
}
.gift_box_pop .cart_list li:empty { display: none; }
.gift_box_pop .cart_list li .ck_box {
    flex: 0 0 20px;
}
.gift_box_pop .cart_list li .ck_box label {
    width: 20px;
    height: 20px;
    padding-left: 0;
}
.gift_box_pop .cart_list li .thum {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border: 1px solid #e2ecf4;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.gift_box_pop .cart_list li .thum img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.gift_box_pop .cart_list li .txt {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
.gift_box_pop .cart_list li .txt h4 {
    display: -webkit-box;
    margin-bottom: 4px;
    color: #1f3446;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gift_box_pop .cart_list li .txt p {
    color: var(--blue-600);
    font-size: 13px;
    font-weight: 800;
}
.gift_box_pop .cart_list li.no-data,
.gift_box_pop .cart_list li.no-data2,
.gift_box_pop .cart_list li.loading-row {
    display: block;
    padding: 26px 0;
    border: 0;
    background: transparent;
    color: #7b8b99;
    font-size: 13px;
    text-align: center;
}

/* 박스 선물 탭 */
.gift_box_pop .no-box-msg {
    padding: 26px 0;
    color: #7b8b99;
    font-size: 13px;
    text-align: center;
}
.gift_box_pop .no-box-msg img {
    display: block;
    width: 70px;
    height: auto;
    margin: 0 auto 8px;
}
.gift_box_pop .box_form li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.gift_box_pop .box_form li:last-child { margin-bottom: 0; }
.gift_box_pop .box_form li .box_input_title {
    flex: 0 0 66px;
}
.gift_box_pop .box_form li .box_input_title p {
    font-size: 13px;
}
.gift_box_pop .box_type_ck {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.gift_box_pop .box_type_ck label {
    white-space: nowrap;
}
.gift_box_pop .box_type_ck label b { font-weight: 600; }
.gift_box_pop .box_type_ck label .gift_box_cnt {
    margin-left: 3px;
    color: #697386;
    font-size: 11px;
    font-style: normal;
}
/* 보유하지 않은 박스 종류는 선택 불가 */
.gift_box_pop .box_type_ck input:disabled + label { opacity: .45; cursor: default; }
.gift_box_pop .box_form li .input_flex {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 9px;
}
.gift_box_pop .counter-box {
    display: flex;
    align-items: center;
}
.gift_box_pop .counter-box .gift_box_minus,
.gift_box_pop .counter-box .gift_box_plus {
    width: 30px;
    height: 32px;
    padding: 0;
    border: 1px solid #bed6e9;
    background: #fff;
    color: var(--blue-600);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.gift_box_pop .counter-box .gift_box_minus { border-radius: 9px 0 0 9px; }
.gift_box_pop .counter-box .gift_box_plus { border-radius: 0 9px 9px 0; }
.gift_box_pop .counter-box #gift_box_quantity {
    width: 46px;
    height: 32px;
    border: 1px solid #bed6e9;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    outline: 0;
    background: #fff;
    color: #1f3446;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
}
.gift_box_pop .counter-box #gift_box_quantity::-webkit-outer-spin-button,
.gift_box_pop .counter-box #gift_box_quantity::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}
.gift_box_pop .gift_box_max {
    height: 32px;
    padding: 0 12px;
    border: 1px solid #b8d1e6;
    border-radius: 9px;
    background: #eaf4ff;
    color: #2c5c85;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* 하단 버튼 */
.gift_box_pop .bottom_btn.flex_wrap {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid #dbe9f4;
    background: #f5faff;
}
.gift_box_pop .bottom_btn.flex_wrap input {
    width: 100%;
    height: 46px;
    min-width: 0;
    padding: 0;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.gift_box_pop .bottom_btn.flex_wrap .close_btn.btn_close {
    border: 1px solid #b8d1e6;
    background: #fff;
    color: #315a7b;
}
.gift_box_pop .bottom_btn.flex_wrap .common_btn {
    border: 0;
    background: var(--blue-600);
    color: #fff;
}
.gift_box_pop .bottom_btn.flex_wrap .common_btn.is-loading {
    opacity: .6;
}

/* V2 선물 받기 확인 팝업 (inc_pop.php #gift_ok_pop) */
.gift_ok_pop .dimBg,
.gift_cancel_pop .dimBg,
.app_confirm_pop .dimBg {
    background: rgba(8, 29, 48, .64);
    backdrop-filter: blur(2px);
}
.gift_ok_pop .pop-layer,
.gift_cancel_pop .pop-layer,
.app_confirm_pop .pop-layer {
    width: min(calc(100% - 32px), 360px);
    max-width: none;
    border: 1px solid #b9d8f1;
    border-radius: 22px;
    background: #f5faff;
    box-shadow: 0 18px 50px rgba(8, 46, 82, .28);
    overflow: hidden;
}
.gift_ok_pop .pop_title,
.gift_cancel_pop .pop_title,
.app_confirm_pop .pop_title {
    display: flex;
    position: relative;
    align-items: center;
    min-height: 58px;
    padding: 0 58px 0 20px;
    border-bottom: 1px solid #cfe4f5;
    background: #e7f4ff;
}
.gift_ok_pop .pop_title h2,
.gift_cancel_pop .pop_title h2,
.app_confirm_pop .pop_title h2 {
    margin: 0;
    color: #173c5c;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
}
.gift_ok_pop .pop_title .btn_close,
.gift_cancel_pop .pop_title .btn_close,
.app_confirm_pop .pop_title .btn_close {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
}
.gift_ok_pop .pop_title .btn_close img,
.gift_cancel_pop .pop_title .btn_close img,
.app_confirm_pop .pop_title .btn_close img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
/* 선물 받기(gift_ok_pop) 와 선물 발송 취소(gift_cancel_pop) 는 같은 .certifi_wrap 구조인데
   스타일이 받기 팝업에만 걸려 있어서 발송 취소 쪽은 글씨·아이콘이 왼쪽으로 쏠려 보였다 (QA #11).
   두 팝업에 같이 적용한다 */
.gift_ok_pop .certifi_wrap,
.gift_cancel_pop .certifi_wrap,
.app_confirm_pop .certifi_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 20px 22px;
    text-align: center;
}
.gift_ok_pop .certifi_wrap .gift_ok_icon,
.gift_cancel_pop .certifi_wrap .gift_ok_icon,
.app_confirm_pop .certifi_wrap .gift_ok_icon {
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    object-fit: contain;
}
/* 선물 받기·발송 취소 확인창의 문어 선물 그림은 크게 (QA #68) */
.gift_ok_pop .certifi_wrap .gift_ok_icon,
.gift_cancel_pop .certifi_wrap .gift_ok_icon {
    width: 90px;
    height: 90px;
}
.gift_ok_pop .certifi_wrap h3,
.gift_cancel_pop .certifi_wrap h3,
.app_confirm_pop .certifi_wrap h3 {
    color: #173c5c;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}
.gift_ok_pop .certifi_wrap h3 span,
.gift_cancel_pop .certifi_wrap h3 span,
.app_confirm_pop .certifi_wrap h3 span {
    color: var(--blue-600);
    font-weight: 800;
}
.gift_ok_pop .certifi_wrap p,
.gift_cancel_pop .certifi_wrap p,
.app_confirm_pop .certifi_wrap p {
    margin-top: 6px;
    color: #697386;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}
.gift_ok_pop .bottom_btn.flex_wrap,
.gift_cancel_pop .bottom_btn.flex_wrap,
.app_confirm_pop .bottom_btn.flex_wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid #dbe9f4;
    background: #f5faff;
}
.gift_ok_pop .bottom_btn.flex_wrap input,
.gift_cancel_pop .bottom_btn.flex_wrap input,
.app_confirm_pop .bottom_btn.flex_wrap input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.gift_ok_pop .bottom_btn.flex_wrap .close_btn.btn_close,
.gift_cancel_pop .bottom_btn.flex_wrap .close_btn.btn_close,
.app_confirm_pop .bottom_btn.flex_wrap .close_btn.btn_close {
    border: 1px solid #b8d1e6;
    background: #fff;
    color: #315a7b;
}
.gift_ok_pop .bottom_btn.flex_wrap .common_btn,
.gift_cancel_pop .bottom_btn.flex_wrap .common_btn,
.app_confirm_pop .bottom_btn.flex_wrap .common_btn {
    border: 0;
    background: var(--blue-600);
    color: #fff;
}
.gift_ok_pop .bottom_btn.flex_wrap .common_btn.adv-loading,
.gift_cancel_pop .bottom_btn.flex_wrap .common_btn.adv-loading,
.app_confirm_pop .bottom_btn.flex_wrap .common_btn.adv-loading {
    opacity: .6;
}

/* V2 삭제 확인 팝업 (inc_pop.php #del_pop) */
.del_pop .dimBg {
    background: rgba(8, 29, 48, .64);
    backdrop-filter: blur(2px);
}
.del_pop .pop-layer {
    width: min(calc(100% - 32px), 340px);
    max-width: none;
    border: 1px solid #b9d8f1;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(8, 46, 82, .28);
    overflow: hidden;
}
.del_pop .pop_title {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 26px 20px 0;
    background: transparent;
}
.del_pop .pop_title h2 {
    margin: 0;
    color: #173c5c;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
}
.del_pop .pop_title .btn_close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
}
.del_pop .pop_title .btn_close img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.del_pop .pop-conts {
    padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
}
.del_pop .pop_memo {
    padding: 0;
    text-align: center;
}
.del_pop .pop_memo p {
    color: #4b5b6b;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}
.del_pop .pop_memo .pop_memo_sub {
    margin-top: 7px;
    color: #8a95a3;
    font-size: 13px;
    font-weight: 500;
}
.del_pop .pop_memo .pop_memo_sub[hidden] { display: none; }
.del_pop .pop_btn.pop_btn2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 20px;
}
.del_pop .pop_btn.pop_btn2 > .btn_close,
.del_pop .pop_btn.pop_btn2 > .btn-del {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 46px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.del_pop .pop_btn.pop_btn2 > .btn_close {
    border: 1px solid #b8d1e6;
    background: #fff;
    color: #315a7b;
}
.del_pop .pop_btn.pop_btn2 > .btn-del {
    border: 0;
    background: var(--blue-600);
    color: #fff;
}

.video_pop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
}
.video_pop .video_are {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 480px;
    height: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.video_pop .video_are .close_top {
    position: absolute;
    top: 25px;
    right: 20px;
    z-index: 2;
}
.video_pop .video_are .vido_box {
    height: 100%;
    overflow: hidden;
}
.video_pop .video_are .vido_box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video_pop .video_are .skip_btn {
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 15px;
    margin-top: 15px;
    padding: 8px 15px;
    border-radius: 50px;
    background: #fff;
    color: #333;
    font-size: 12px;
}

/* Component --------------------------------------- */
.textfield01 {
    width: 100%;
    height: 50px;
    border-radius: 16px;
    border: 0;
    background: var(--white);
    outline: none;
    padding: 0 20px;
    font-weight: 500;
    border:1px solid var(--gray-400);
}
input::placeholder {
    color:var(--gray-600) !important;
}
.textfield-error {
    color: var(--red);
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
}
.textfield-error span {
    font-weight: 600;
}

.btn-textfield01 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    min-width: 95px;
    outline: none;
    padding: 0 20px;
    font-size: 16px;
    border-radius: 16px;
    color: var(--white);
    border: 0;
    background: var(--blue-400);
    border: 1px solid var(--blue-500);
}

.btn-textfield02 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    border: 0;
    background: #E9F5FF;
    min-width: 95px;
    outline: none;
    padding: 0 20px;
    font-size: 16px;
    border-radius: 16px;
    font-weight: 500;
    color: #C2DAF8;
    border: 1px solid #C2DAF8;
}
.select01 {
    width: 100%;
    height: 56px;
    border-radius: 16px;
    border: 0;
    background: var(--white);
    outline: none;
    padding: 0 20px;
    background: #fff url(../img/select.png) right 20px center /20px no-repeat;
    font-size: 16px;
    border:1px solid var(--gray-400);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.select01.arrow-green {
    background: #fff url(../img/select-green.png) right 20px center /11px no-repeat !important;
}
textarea {
    width: 100%;
    height: 140px;
    border-radius: 16px;
    border: 0;
    background: var(--white);
    outline: none;
    padding: 16px 20px 32px;
    color: var(--gray-900);
    font-size: 16px;
    font-family: var(--font-pretendard);
    border:1px solid var(--gray-400);
    resize: none;
}

textarea::placeholder {
    color:var(--gray-600) !important;
    font-size: 16px;
    font-family: var(--font-pretendard);
}

.textarea-wrap {
    position: relative;
    width: 100%;
}

.textarea-count {
    position: absolute;
    bottom: 14px;
    right: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    pointer-events: none;
}
.textarea-count em {
    font-size:12px;
}
.btn-common01 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 45px;
    line-height: 45px;
    border-radius: 10px;
    border: 0;
    min-width: 95px;
    outline: none;
    padding: 0 5px;
    font-size: 18px;
    border-radius: 16px;
    font-weight: 700;
    color: var(--white);
    background: var(--blue-600);
    border: 1px solid var(--blue-900);
    box-shadow:
        rgba(255,255,255,0.1) 1px 1px 1px 0 inset,
        rgba(255,255,255,0.4) 1px 1px 1px 0 inset,
        rgba(6, 114, 255, 0.7) -1px -1px 1px 0 inset;
}

.btn-common02 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 49px;
    line-height: 49px;
    border-radius: 10px;
    border: 0;
    min-width: auto;
    outline: none;
    padding: 0 5px;
    font-size: 18px;
    border-radius: 16px;
    font-weight: 500;
    color: var(--gray-800);
    background: var(--gray-600);
    border: 1px solid var(--gray-800);
    box-shadow:rgba(0,0,0,0.3) -1px -2px 2px 0px inset;
}

.btnbox-title button {
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    max-width: 80px;
    width: 100%;
    padding: 0;
    border-radius:8px;
    font-weight: 600;
}

.btnbox-title .btn-common02 {
    background: var(--brown-100);
    color: var(--gray-800);
    border:1px solid #E5C9A4;
    box-shadow: 1px 4px 20px rgba(165, 175, 190, 0.25),
        1px 2px 2px rgba(255, 255, 255, 0.3) inset,
        -1px -2px 6px rgba(0, 0, 0, 0.3) inset;
}

.btnbox-title .btn-common01 {
    border:1px solid var(--blue-400);
}
.btnbox-title .btn-common03 {
    background: var(--gray-600);
    color: var(--gray-800);
    border:1px solid var(--gray-800);
    box-shadow: 1px 4px 20px rgba(165, 175, 190, 0.25),
        1px 2px 2px rgba(255, 255, 255, 0.3) inset,
        -1px -2px 6px rgba(0, 0, 0, 0.3) inset;
}
button.icon-check {
    padding-left:15px;
    max-width:100px;
    background-image: url(../img/icon-check.png) !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    background-size: 13px !important;
}
button.type02 {
    width:105px;
    min-width:105px;
    height:42px;
    border-radius:8px;
    font-size:16px;

}
.btn-common02.type02 {
    box-shadow:none;
}

.btn-common01.type02 {
    border:1px solid var(--blue-900);
}

.tab-wrap {
    position:relative;
    display:flex;
    justify-content: flex-start;
    align-items: center;
}
.tab-wrap::before {
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
    background:var(--brown-100);
    z-index:0;
    border-radius:16px;
}
.tab-wrap button {
    width:100%;
    height:42px;
    line-height:42px;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:14px;
    font-weight:bold;
    color:var(--brown-600);
    border:1px solid #F5E6C6;
    border-left:0;
    border-top:1px solid #F5E6C6;
    border-radius:0 16px 0 0;
    border-bottom:2px solid var(--brown-500);
    background:#fff;
    position:relative;
    font-family: "Maplestory", sans-serif;
    font-weight:bold;

}
.tab-wrap button.active {
    color:var(--brown-900);
    border-top:1px solid #fff;
    border-bottom:2px solid var(--brown-900);
}
.tab-wrap button:first-child {
    border-left:1px solid #F5E6C6;
    border-radius:16px 16px 0 16px;
}
.tab-wrap button:last-child {
    border-left:1px solid #F5E6C6;
    border-radius:0 16px 16px 0;
}
.tab-wrap-img {
    display:flex;
    justify-content: center;
    align-items: center;
}
.tab-wrap-img img:first-child {
    position:absolute;
    left:-10px;
    bottom:-10px;
    width:33px;
}
.tab-wrap-img img:last-child {
    position:absolute;
    right:-10px;
    bottom:-10px;
    width:33px;
}

.btn-sorting {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    padding-right: 5px;
}

.btn-sorting span {
    font-size: 14px;
    color:var(--gray-700);
    font-weight:600;
}

.btn-sorting img {
    width: auto;
    height: 7px;
}

.sorting-popup {
    position: absolute;
    top: 25px;
    right: 0;
    min-width: 136px;
    background: #fff;
    border-radius: 16px;
    z-index: 10;
    display: none;
    border:1px solid var(--blue-300);
    overflow:hidden;
}

.sorting-popup.open {
    display: block;
}

.sorting-popup button {
    width: 100%;
    height:36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    font-size: 16px;
    font-weight: 500;
}

.sorting-popup button span {
    font-size: 14px;
    white-space: nowrap;
    font-weight: 500;
}

.sorting-popup button.active {
    background:var(--blue-100);
}

.sorting-popup button img {
    height: 20px;
}

.textfield01[readonly]::placeholder {
    color: var(--main-300);
    font-size: 16px;
    font-weight: 500;
}

.textfield01[readonly] {
    width: 100%;
    height: 56px;
    border-radius: 16px;
    border: 0;
    color: var(--main-300);
    background: var(--main-200);
    outline: none;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 500;

    box-shadow:
        1px 4px 20px rgba(165, 175, 190, 0.25),
        2px 2px 1px rgba(255, 255, 255, 0.7) inset,
        1px 2px 2px rgba(255, 255, 255, 0.3) inset,
        -1px -2px 6px rgba(195, 205, 220, 0.7) inset;
}


.textfield01::placeholder {
    color: var(--main-300);
    font-size: 16px;
    font-weight: 500;
}


.textfield-success {
    color: var(--point);
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
}

.box-textfield {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}






.btn-common03 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 49px;
    line-height: 49px;
    border-radius: 10px;
    border: 0;
    background: var(--main-200);
    min-width: auto;
    outline: none;
    padding: 0 2px;
    font-size: 18px;
    border-radius: 16px;
    font-weight: 500;
    color: var(--main-300);
    box-shadow:
        1px 4px 20px rgba(165, 175, 190, 0.25),
        1px 2px 2px rgba(255, 255, 255, 0.3) inset,
        -1px -2px 6px rgba(0, 0, 0, 0.3) inset;
}

.btnbox {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
}

.btnbox-popup {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.btnbox-popup button {
    height: 46px;
    line-height: 46px;
    font-size: 16px;
}

.btnbox-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}


.search-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.search-wrap .btn-search {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url(../img/icon-search.png) center /20px  no-repeat !important;
}

.search-wrap .btn-search.on {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border:1px solid var(--blue-900);
    background: url(../img/icon-search-on.png) center /20px  no-repeat !important;
}
.search-wrap:hover .btn-search,
.search-wrap.on .btn-search {
    background: url(../img/icon-search-on.png) center /20px  no-repeat !important;
}

.search-wrap:hover input,
.search-wrap.on input {
    border:1px solid var(--blue-900);
}
.search-wrap:hover input::placeholder,
.search-wrap.on input::placeholder {
    color: var(--gray-900) !important;
}

.search-wrap input {
    padding-right: 60px;
}

.bng-wrap {
    z-index: 8;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 19px 20px 10px;

    width: calc(100% - 20px);
    left:10px;
    bottom:10px;
    height: 64px;
    border-radius: 24px;
    border: 0;
    background: var(--white);
    outline: none;
    font-weight: 500;
    box-shadow:-1px -2px 2px rgba(49, 113, 196, 0.3);
}

.bng-wrap a {
    display: block;
}

/* 하단 메뉴는 align-items:flex-end 라 링크가 아이콘+라벨 높이만큼만 잡힘.
   메뉴 바 안쪽 여백과 화면 맨 아래를 눌렀을 때 반응이 없어서 눌리는 영역만 넓혀줌.
   보이는 모양은 그대로 두려고 가상 요소로만 확장함. */
.bng-wrap a {
    position: relative;
}
.bng-wrap a::after {
    content: '';
    position: absolute;
    top: -8px;
    right: 0;
    /* 메뉴 바 아래 패딩 + 화면 바닥까지 띄운 만큼 */
    bottom: calc(clamp(16px, 5.12vw, 27px) * -1);
    left: 0;
}
/* 양 끝 링크는 메뉴 바 좌우 패딩까지 */
.bng-wrap a:first-child::after {
    left: calc(clamp(16px, 5.13vw, 28px) * -1);
}
.bng-wrap a:last-child::after {
    right: calc(clamp(16px, 5.13vw, 28px) * -1);
}

.bng-wrap a.active span {
    color: var(--gray-900);
}

/* 눌러도 눌린 티가 안 나서 반응이 없다고 느끼는 문제.
   reset.css 가 브라우저 기본 터치 하이라이트를 !important 로 꺼둔 데다
   :active 스타일도 없어서, 다음 페이지가 뜰 때까지(길면 2초 남짓) 화면이 그대로임 */
.bng-wrap a,
.market-header-links a,
.storage-v2-header-links a,
.box-purchase-header-links a {
    /* 더블탭 확대를 기다리느라 탭이 늦게 먹는 것도 같이 막아줌 */
    touch-action: manipulation;
    transition: transform .12s ease, opacity .12s ease;
}
.bng-wrap a:active,
.market-header-links a:active,
.storage-v2-header-links a:active,
.box-purchase-header-links a:active {
    transform: scale(.88);
    opacity: .55;
}
/* 손을 뗀 뒤에도 다음 페이지가 올 때까지 눌린 티를 유지해 줌 */
.bng-wrap a.is-navigating,
.market-header-links a.is-navigating,
.storage-v2-header-links a.is-navigating,
.box-purchase-header-links a.is-navigating {
    transform: scale(.92);
    opacity: .6;
}

.bng-wrap img {
    height: 28px;
}
.bng-wrap a:nth-child(3) img {
    width:51px;
    height:51px;
    position:relative;
}

.bng-wrap span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: var(--gray-900);
}

.items02 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
    flex-wrap: wrap;
}

.items02 .item {
    position: relative;
    width: 100%;
    border-radius: 10px;
    border: 0;
    background: var(--BGPink);
    min-width: 150px;
    max-width: 150px;
    padding: 12px;
    font-size: 18px;
    border-radius: 16px;
    overflow: hidden;
    font-weight: 500;
    color: var(--main-300);
    border:1px solid var(--blue-900);
    background:var(--blue-200);
}

.item-soldout {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    z-index: 2;
}

.item-soldout .btn-common01 {
    width:109px;
    height:42px;
    border-radius: 8px;
    border: 1px solid var(--gray-800);;
    background: var(--gray-gray-600-A9A9A9, #A9A9A9);

    /* gray_box yhadow_S */
    box-shadow: -1px -2px 2px 0 rgba(0, 0, 0, 0.30) inset;

    color: var(--gray-800);
    text-align: center;

    /* Body2/16px_700_Bold */
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 22.4px */
    letter-spacing: -0.4px;
}

.item-soldout button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 56px;
    line-height: 56px;
    border-radius: 10px;
    border: 0;
    background: var(--main-400);
    min-width: 95px;
    outline: none;
    padding: 0 20px;
    font-size: 16px;
    border-radius: 16px;
    font-weight: 600;
    color: var(--white);
    box-shadow:
        1px 4px 20px rgba(165, 175, 190, 0.25),
        2px 2px 1px rgba(255, 255, 255, 0) inset,
        1px 2px 2px rgba(255, 255, 255, 0.3) inset,
        -1px -2px 6px rgba(0, 0, 0, 0.3) inset;
}


.item-soldout .btn-common01.other {
    padding: 0 20px;
}

.items02 .item-img {
    background-color: #fff;
    border:1px solid var(--blue-900);
    padding: 18px 0;
    border-radius: 16px;
}

.items02 .item-img img {
    max-width: 100px;
    max-height: 100px;
    display: block;
    margin: 0 auto;
}

.items02 .item-info span {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-700);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.items02 .item-info h2 {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-900);
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 5px 0;
    height:18px;
}

.items02 .item-info p {
    font-size: 14px;
    font-weight: bold;
    color: var(--blue-600);
}

.upgradebox {
    position: relative;
    width: 100%;
    border-radius: 10px;
    border: 0;
    background: var(--BGPink);
    padding: 20px;
    font-size: 18px;
    border-radius: 16px;
    overflow: hidden;
    font-weight: 500;
    color: var(--main-300);
    box-shadow:
        1px 4px 20px rgba(165, 175, 190, 0.25),
        2px 2px 1px rgba(255, 255, 255, 0) inset,
        1px 2px 2px rgba(255, 255, 255, 0.3) inset,
        -1px -2px 6px rgba(195, 205, 220, 0.7) inset;
}

.upgradebox-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 10px;
    gap: 10px;
}

.upgradebox-info img {
    max-width: 90px;
}

.upgradebox-text {}

.upgradebox-text h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
    padding-bottom: 5px;
}

.upgradebox-text p {
    font-size: 14px;
    color: var(--gray-800);
    padding-bottom: 3px;
}

.upgradebox-text span {
    font-size: 12px;
    color: var(--gray-800);
}

.commonbox-wrap {
    position: relative;
    width: 100%;
    border-radius: 10px;
    border: 0;
    background: var(--BGPink);
    padding: 0 20px 20px;
    font-size: 18px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    font-weight: 500;
    color: var(--main-300);
    box-shadow:
        1px 4px 20px rgba(165, 175, 190, 0.25),
        2px 2px 1px rgba(255, 255, 255, 0) inset,
        1px 2px 2px rgba(255, 255, 255, 0.3) inset,
        -1px -2px 6px rgba(195, 205, 220, 0.7) inset;
}

.commonbox-wrap .commonbox-header {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
}

.commonbox-wrap .commonbox-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--main-900);
}

.commonbox-wrap .commonbox-header .btn-close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.commonbox-wrap .commonbox-header .btn-close img {
    width: 15px;
}

.commonbox-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.commonbox-body.pwd {
    gap: 20px;
}

.commonbox-body.pwd .pwdbox {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.commonbox-info {
    padding: 20px;
    border-radius: 24px;
    background-color: var(--main-200);
    box-shadow:
        1px 1px 2px rgba(255, 255, 255, 0.9) inset,
        -1px -1px 4px rgba(165, 175, 190, 0.1) inset,
        -2px 1px 10px rgba(255, 255, 255, 0.4),
        1px 2px 2px rgba(165, 175, 190, 0.2),
        -2px -2px 2px rgba(255, 255, 255, 0.9),
        1px 4px 20px rgba(165, 175, 190, 0.25);
}

.commonbox-info p {
    color: var(--main-900);
    font-size: 12px;
    padding-bottom: 6px;
}

.commonbox-info ul li {
    font-size: 12px;
    color: var(--gray-900);
}

.popup.popup-confirm {
    z-index: 11;
}

.popup.popup-confirm .cont {
    z-index: 10;
    text-align: center;
    width: 100%;
    border-radius: 10px;
    border: 0;
    background: var(--BGPink);
    padding: 20px;
    font-size: 18px;
    border-radius: 16px;
    overflow: hidden;
    font-weight: 500;
    color: var(--main-300);
    box-shadow:
        1px 4px 20px rgba(165, 175, 190, 0.25),
        2px 2px 1px rgba(255, 255, 255, 0) inset,
        1px 2px 2px rgba(255, 255, 255, 0.3) inset,
        -1px -2px 6px rgba(195, 205, 220, 0.7) inset;
}

.popup-confirm h2 {
    font-size: 16px;
    color: var(--main-900);
}

.popup-confirm p {
    padding: 4px 0 16px;
    font-size: 14px;
}

.popup-confirm button {
    max-width: 105px;
}

.personbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    position: relative;
    width: 100%;
    border-radius: 16px;
    border: 0;
    background: var(--white);
    padding: 24px 20px;
    font-size: 18px;
    overflow: hidden;
    font-weight: 500;
    color: var(--main-300);
    box-shadow:
        1px 4px 20px rgba(165, 175, 190, 0.25),
        2px 2px 1px rgba(255, 255, 255, 0) inset,
        1px 2px 2px rgba(255, 255, 255, 0.3) inset,
        -1px -2px 6px rgba(195, 205, 220, 0.7) inset;
}

.personbox>img {
    width: 40px;
}

.personbox-text {
    width: 100%;
}

.personbox-text h3 {
    font-size: 14px;
    color: var(--gray-900);
    font-weight: 500;
}

.personbox-text p {
    font-size: 12px;
    color: var(--gray-700);
    padding-top: 5px;
}

.personbox-btn {
    height: 33px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.personbox-btn button {
    height: 25px;
    min-width: 41px;
    font-size: 12px;
    border-radius: 8px;
    font-weight:600;
}

.personbox-btn .btn-common02 {
    border-radius: 8px;
    border: 1px solid #E5C9A4;
    background: var(--point-brown-point-100-fcf-7-ee, #FCF7EE);

    /* ivory_inner_box chip_S */
    box-shadow: 1px -2px 1px 0 rgba(255, 255, 255, 0.10) inset, 1px 2px 1px 0 rgba(255, 255, 255, 0.40) inset, -1px -1px 1px 0 #E5C9A4 inset;
}
.personbox-btn .btn-common02.stay {
    padding:0 10px;
    color:var(--gray-700);
}

/* Gauge Bar --------------------------------------- */
.gauge {
    width: 100%;
}

.gauge h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.gaugebar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gaugebar-track {
    position: relative;
    flex: 1;
    height: 20px;
    border-radius: 100px;
    background: #FFE4E1;
    box-shadow:
        -1px -1px 2px rgba(195, 205, 220, 0.2),
        1px -1px 2px rgba(195, 205, 220, 0.2),
        -1px -1px 2px rgba(255, 255, 255, 0.7),
        2px 2px 2px rgba(255, 255, 255, 0.8) inset,
        -1px -1px 2px rgba(165, 175, 190, 0.5) inset;
    overflow: visible;
}

.gaugebar-fill {
    position: relative;
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(to right, #FF9A97, #FF6763);
    display: flex;
    align-items: center;
    min-width: 28px;
    height: 20px;
    box-shadow: -1px -1px 2px rgba(165, 175, 190, 0.2),
        1px -1px 2px rgba(165, 175, 190, 0.2),
        -1px -1px 2px rgba(255, 255, 255, 0.7),
        -1px -1px 2px rgba(165, 175, 190, 0.5) inset;
}

.gauge-circle img {
    width: 28px;
    height: 28px;
}

.gaugebar b {
    font-size: 14px;
    font-weight: 700;
    color: var(--main-600);
    white-space: nowrap;
    min-width: 38px;
    text-align: left;
}

.gauge h2 {
    font-size: 12px;
    color: var(--main-900);
}

.collapse {
    border-radius: 12px;
    box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3) inset,
        -1px -1px 4px rgba(165, 175, 190, 0.8) inset,
        -2px 1px 10px rgba(255, 255, 255, 0.4),
        1px 2px 2px rgba(165, 175, 190, 0.2),
        -2px -2px 2px rgba(255, 255, 255, 0.9),
        1px 4px 20px rgba(165, 175, 190, 0.25);
}

.collapse.other {
    background-color: var(--main-200);
}

.collapse-header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    width: 100%;
}

.collapse-header h2 {
    font-size: 14px;
    color: var(--main-900);
    font-weight: 500;
}

.collapse-header .btn-collapse {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collapse-header img {
    height: 10px;
    transition: transform 0.3s ease;
}

.collapse.open .collapse-header img {
    transform: rotate(180deg);
}

.collapse-body {
    display: none;
    padding: 0 20px 20px;
}

.collapse.open .collapse-body {
    display: block;
}

.collapse-body h2:first-child {
    padding-top: 0;
}

.collapse-body h2 {
    color: var(--gray-gray-800-505050, #505050);

    /* Caption/12px_600_Semibold */
    font-family: var(--font-pretendard);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 16.8px */
    letter-spacing: -0.3px;
    padding-bottom:5px;
}

.collapse-body p {
    color: var(--gray-gray-700-767676, #767676);

    /* Caption/12px_500_Medium */
    font-family: var(--font-pretendard);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 16.8px */
    letter-spacing: -0.3px;
}



.items01 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    white-space: nowrap;
    overflow: auto;
}

.items01 .item {
    position: relative;
    border-radius: 10px;
    border: 0;
    background: var(--main-200);
    min-width: 290px;
    width: 290px;
    padding: 20px;
    font-size: 18px;
    border-radius: 16px;
    overflow: hidden;
    font-weight: 500;
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    align-items: center;
    color: var(--main-300);
    box-shadow:
        1px 4px 20px rgba(165, 175, 190, 0.25),
        2px 2px 1px rgba(255, 255, 255, 0) inset,
        1px 2px 2px rgba(255, 255, 255, 0.3) inset,
        -1px -2px 6px rgba(195, 205, 220, 0.7) inset;
}

.items01 .item-img {
    padding: 7px;
    border-radius: 50%;
    width: 70px;
    min-width: 70px;
    height: 70px;
}

.items01 .item-img img {
    width: 100%;
}

.items01 .item-info p.info-msg b {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-900);

}

.items01 .item-info p.info-msg span {
    font-size: 14px;
    color: var(--gray-900);
}

.items01 .item-info p.info-brand {
    font-size: 12px;
    color: var(--gray-800);
    margin: 2px 0 0;
}

.items01 .item-info p.info-title {
    font-size: 12px;
    color: var(--gray-900);
    margin: 2px 0 4px;
}

.items01 .item-info p.info-price {
    font-size: 14px;
    color: var(--main-600);
    font-weight: bold;
}

.is__bng {
    padding-bottom: 80px;
}


.bg-pink {
    background: var(--BGPink);
}

.select02 {
    font-size: 14px;
    color: var(--gray-900);
    border: 0;
    padding-right: 20px;
    background-image: url(../img/select02.png);
    background-size: 12px;
    background-position: right;
    background-repeat: no-repeat;
    background-color: var(--BGPink);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.head__tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
}

.head__tab button {
    width: 100%;
    min-width: auto;
    height: 46px;
    font-size: 16px;
    box-shadow: 1px 4px 20px rgba(165, 175, 190, 0.25),
        1px 2px 2px rgba(255, 255, 255, 0.3) inset,
        -1px -2px 6px rgba(0, 0, 0, 0.3) inset;
}

.head__tab.other {
    gap: 5px;
}

.out-title {
    margin: 20px 0 10px;
    color: var(--main-900);
    font-weight: 500;
}

.GmarketSans {
    font-family:"Maplestory", sans-serif !important;
}

/* 체크박스 공통 모양. .checkbox / .checkbox-item / .ck_box 다 같은 모양 */
/* 숨긴 input 위치 기준. 없으면 빈 여백 생기고 포커스 때 화면 튐 */
.checkbox,
.checkbox-item,
.ck_box {
    position: relative;
}

.checkbox > input[type="checkbox"],
.checkbox-item > input[type="checkbox"],
.ck_box > input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.checkbox > input[type="checkbox"] + i,
.checkbox-item > input[type="checkbox"] + i,
.ck_box > input[type="checkbox"] + label::before {
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 2px solid #b8c2cc;
    border-radius: 50%;
    background: #fff;
    background-image: none;
    content: "";
    transition: border-color .15s ease, background-color .15s ease;
}

.checkbox > input[type="checkbox"]:checked + i,
.checkbox-item > input[type="checkbox"]:checked + i,
.ck_box > input[type="checkbox"]:checked + label::before {
    border-color: #0672ff;
    background-color: #0672ff;
    background-image: none;
}

/* 체크 표시 */
.checkbox > input[type="checkbox"] + i,
.checkbox-item > input[type="checkbox"] + i,
.ck_box > input[type="checkbox"] + label {
    position: relative;
}

.checkbox > input[type="checkbox"]:checked + i::after,
.checkbox-item > input[type="checkbox"]:checked + i::after,
.ck_box > input[type="checkbox"]:checked + label::after {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 5px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    content: "";
    transform: translate(-50%, -60%) rotate(45deg);
}

/* i 는 테두리 안쪽이 기준이라 가운데 다시 맞춤 */
.checkbox > input[type="checkbox"]:checked + i::after,
.checkbox-item > input[type="checkbox"]:checked + i::after {
    top: 50%;
    left: 50%;
}

.checkbox > input[type="checkbox"]:focus-visible + i,
.checkbox-item > input[type="checkbox"]:focus-visible + i,
.ck_box > input[type="checkbox"]:focus-visible + label::before {
    outline: 3px solid rgba(6, 114, 255, .2);
    outline-offset: 2px;
}

/* on/off 클래스 쓰는 화면도 같은 모양 */
.checkbox.off > input[type="checkbox"] + i,
.checkbox.on > input[type="checkbox"] + i { background-image: none; }
.checkbox.on > input[type="checkbox"] + i { border-color: #0672ff; background-color: #0672ff; }

/* 티켓발송 팝업(#t_send_pop). 전용 규칙이 없어 제목·입력·체크 문구가 왼쪽으로 쏠려 경계 밖까지 나갔다 (QA #13).
   선물받기 팝업과 같은 틀(테두리·제목줄·여백·버튼)을 준다 */
.t_send_pop .dimBg { background: rgba(8, 29, 48, .64); }
.t_send_pop .pop-layer { width: min(calc(100% - 32px), 360px); max-width: none; border: 1px solid #b9d8f1; border-radius: 22px; background: #f5faff; box-shadow: 0 18px 50px rgba(8, 46, 82, .28); overflow: hidden; }
.t_send_pop .pop_title { display: flex; position: relative; align-items: center; min-height: 58px; padding: 0 58px 0 20px; border-bottom: 1px solid #cfe4f5; background: #e7f4ff; }
.t_send_pop .pop_title h2 { margin: 0; color: #173c5c; font-size: 18px; font-weight: 800; line-height: 1.2; text-align: left; }
.t_send_pop .pop_title .btn_close { position: absolute; top: 50%; right: 14px; width: 30px; height: 30px; transform: translateY(-50%); }
.t_send_pop .pop_title .btn_close img { width: 16px; height: 16px; object-fit: contain; }
.t_send_pop .pop_in { padding: 20px 20px 4px !important; margin: 0 !important; }
.t_send_pop .pop_in .textfield01 { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #cfe4f5; border-radius: 12px; background: #fff; }
.t_send_pop .ck_box { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #315a7b; font-size: 14px; }
.t_send_pop .ck_box label { line-height: 1.4; }
.t_send_pop .common_btn { display: block; width: calc(100% - 40px); height: 46px; margin: 12px 20px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 13px; background: var(--blue-600); color: #fff; font-size: 15px; font-weight: 700; }
/* 티켓발송 팝업: 체크박스와 문구를 한 줄에 둔다 */
.t_send_pop .ck_box input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; }
.t_send_pop .ck_box label { flex: 1 1 auto; display: inline; width: auto; }
/* 체크 표시는 label::before 가 그리는 원이다. 그 원이 block 으로 한 줄을 차지해 문구가 아래로 내려갔다.
   원과 문구를 같은 줄에 나란히 두고, 실제 input 은 화면에서 숨긴다(label for 로 클릭됨) */
.t_send_pop .ck_box input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.t_send_pop .ck_box label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.t_send_pop .ck_box label::before { flex: 0 0 auto; margin: 0; }

/* 앱 공용 확인창(app-confirm.js). 닉네임 팝업·선물 모달 위에 떠야 하므로 z-index 를 높게 둔다 */
.app_confirm_pop { z-index: 2147483647; }  /* 선물 모달이 z-index 상한(2147483647)으로 잘려 있어 같은 값을 주고, 문서 뒤쪽(body 끝)에 붙여 그 위에 올린다 */
.app_confirm_pop .pop-layer { z-index: 2147483647; }
.app_confirm_pop .pop_title .app-confirm-x { position: absolute; top: 50%; right: 14px; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; transform: translateY(-50%); }
.app_confirm_pop .pop_title .app-confirm-x img { width: 16px; height: 16px; object-fit: contain; }
.app_confirm_pop .certifi_wrap p:empty { display: none; }

/* 상단 알림 아이콘의 안 읽은 알림 수 배지 (QA #45). alarm-badge.js 가 아이콘을 감싼 요소에 붙인다 */
.has-alarm-badge { position: relative; }
.header-alarm-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 10px;
    background: #ff4d4f;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    pointer-events: none;
}

/* 보관함 브랜드명 앞 진주 아이콘 (QA #166). 임시 파일, 디자인 파일로 교체 예정 */
.brand-pearl { display: inline-block; width: 1em; height: 1em; margin-right: 3px; vertical-align: -0.12em; }