@charset "utf-8";

/*
 * 마이페이지 본문 (폰 목업 셸 main 변형).
 *
 * 퍼블리싱 원본: .publishing_ref/mypage.html + styles/mypage.css
 * 셸(프레임·프로모션·스케일·상단바·하단탭)은 page/css/mypage_shell.css 가 갖는다.
 * 이 파일은 본문 컴포넌트만 담는다.
 *
 * 기존 웹 CSS(common/style/mob.css)는 셸과 충돌해 로드하지 않는다.
 * 다만 user_footer.php 는 GTM·Hackle·네이버·페이스북 트래킹 스크립트를 함께
 * 들고 있어 계속 include 하고, 눈에 보이는 푸터만 여기서 감춘다.
 */

/*
 * ⚠️ 전제: user_footer.php:1 의 <footer class="footer"> 가 .wrap 의 직계 자식이다.
 * 그 파일에 래퍼 <div> 가 하나라도 생기면 이 셀렉터가 빗나가 레거시 푸터가
 * 마이페이지 하단에 무스타일로 노출된다.
 */
.wrap > .footer,
.mob_top_banner,
.mob_top_banner_app { display: none !important; }

/* ── 페이지 제목 바 ───────────────────────────────── */

/* 제목 위에 보이는 여백을 바로가기 영역 하단 여백(.section-gap 의 margin-top)과
   같은 22px 로 맞춘다. 제목이 상단바가 아니라 아래 콘텐츠에 속해 보이게 하는 값이다.
   align-items: center 가 h1(21px)을 더 큰 로그아웃 버튼(27px) 기준 콘텐츠 박스에
   세로 중앙 정렬하면서 3px 을 더하므로, padding 은 3px 뺀 19px 로 준다. */
.page-titlebar {
    padding: 19px 19px 16px;
    display: flex;
    align-items: center;
}

/* 탭 루트 화면이라 뒤로가기 화살표를 두지 않는다. 하단 탭이 이동을 맡고,
   제목은 아래 콘텐츠와 같은 19px 기준선에 맞춰 페이지 정체성을 갖는다. */
.page-titlebar h1 { margin: 0 0 0 2px; font-size: 18px; font-weight: 700; }

/* 로그아웃은 빈도가 낮은 보조 동작이라 캡슐(버튼 형태) 대신 글자 + 아이콘으로 둔다. */
.page-titlebar .logout_btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 3px;
    min-height: 0;
    padding: 6px 0 6px 10px;
    border: 0;
    background: none;
    color: var(--red);
    font-family: Pretendard, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

/* 터치 영역 확장. 아래쪽은 배너 닫기 버튼과 부딪히지 않게 6px 만 준다. */
.page-titlebar .logout_btn::after {
    content: "";
    position: absolute;
    inset: -9px -6px -6px;
}

.page-titlebar .logout_icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── 이용 안내 배너 ───────────────────────────────── */

.mypage_guide_banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    /* 위 5px — 제목 줄이 이미 아래로 16px 을 두고 있어 글자에서 배너까지 24px 이 된다.
       배너 아래(포인트 상자와의 10px)를 벌린 만큼 여기서 되돌려, 배너가 있든 없든
       제목 아래 덩어리가 같은 자리에서 시작하게 한다. */
    margin: 5px 19px 0;
    padding: 22px 18px;
    border: 1px solid var(--third, #ffcacc);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 12px 0 rgba(214, 35, 41, 0.15);
}

.mypage_guide_banner .guide_link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

/* 화살표 대신 눌러야 할 곳을 글자로 알려 준다. */
.mypage_guide_banner .guide_badge {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--pink, #fff1f0);
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
}

.mypage_guide_banner .guide_icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 26px;
    line-height: 1;
}
.mypage_guide_banner .guide_body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mypage_guide_banner .guide_text { font-size: 15px; font-weight: 700; }

.mypage_guide_banner .guide_sub {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

/* 보이는 원은 22px 그대로 두고, 투명 테두리로 터치 영역만 44 x 36px 로 넓힌다.
   위쪽은 로그아웃 버튼의 터치 영역과 부딪히지 않도록 4px 만 준다.
   right / top 은 테두리 두께만큼 당겨서 원의 위치를 -9px 로 유지한다.
   box-shadow 는 테두리 상자를 따라가 그림자가 같이 커지므로 drop-shadow 로 바꾼다. */
.mypage_guide_banner .guide_close {
    position: absolute;
    right: -20px;
    top: -12px;
    z-index: 1;
    box-sizing: content-box;
    width: 22px;
    height: 22px;
    /* 브라우저 기본 버튼 여백(1px 6px)이 남으면 원이 타원이 된다. */
    padding: 0;
    border: 11px solid transparent;
    border-top-width: 3px;
    /* border-radius 는 테두리 상자 기준이라 50% 를 쓰면, 테두리 두께를 뺀 안쪽
       모서리 반지름이 위아래로 달라져 원이 달걀 모양이 된다.
       안쪽(보이는 원)이 정확히 지름 22px 이 되도록 모서리마다
       '11px + 그 방향 테두리 두께' 로 직접 적는다. */
    border-radius: 22px / 14px 14px 22px 22px;
    background: #fff;
    background-clip: padding-box;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.22));
    cursor: pointer;
}

.mypage_guide_banner .guide_close::before,
.mypage_guide_banner .guide_close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 1.6px;
    border-radius: 1px;
    background: var(--muted);
}

.mypage_guide_banner .guide_close::before { transform: translate(-50%, -50%) rotate(45deg); }
.mypage_guide_banner .guide_close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ── 비로그인 안내 ────────────────────────────────── */

.mypage_login {
    margin: 18px 19px 14px;
    padding: 20px;
    border-radius: 12px;
    background: var(--pink, #fff1f0);
    text-align: center;
}

.mypage_login .desc { margin: 0 0 12px; font-size: 14px; }

.mypage_login .link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--red);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.mypage_login .arrow {
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

/* ── 보유 포인트 카드 ─────────────────────────────── */

/* 배너·포인트 박스·바로가기를 각각 독립된 블록으로 세로로 쌓는다. 카드로
   감싸면 포인트 박스가 한 겹 더 들어가 화면 가장자리에서 31px 떨어지는데,
   배너는 19px 이라 좌측 선이 어긋났다. 카드는 껍데기만 남긴다. */
.account-card {
    margin: 0;
    border: 0;
    background: #fff;
}

.point-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 19px 0;
    padding: 11px 18px;
    border-radius: 10px;
    background: var(--light, #f5f5f5);
    /* 바닥값일 뿐이라 등급 표기 등으로 라벨이 두 줄이 되면 알아서 늘어난다. */
    min-height: 50px;
}

/* 배너가 있을 때만 위를 조금 더 띄운다. 배너를 닫으면 제목 줄 바로 아래라
   같은 여백이면 허전해 보인다.
   ⚠️ 이 규칙은 배너와 포인트 줄이 둘 다 로그인 상태에서만 뜬다는 전제에 기댄다.
   mypage.php 의 $show_mypage_guide_banner 에서 mb_id 조건을 빼면 조용히 깨진다. */
.mypage_guide_banner ~ .account-card .point-card { margin-top: 16px; }

.point-card p { margin: 0; font-size: 14px; }
.point-card p strong { display: flex; min-width: 0; color: var(--ink); font-weight: 700; }

/* 이름만 줄어들고 뒷말은 그대로 남는다. */
.point-card .label_name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.point-card .label_suffix { flex: 0 0 auto; }
.point-card .level { color: var(--muted); font-size: 12px; }
.point-card .level a { color: var(--muted); }

/* 관리자·온보딩 줄이 있을 때만 여러 줄이 된다. 평소에는 한 줄. */
.point-card__label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.point-card .coin {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--red);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}

.point-card .coin .unit { color: var(--ink); font-size: 12px; font-weight: 600; }

/* 미납 상태 — 조치가 필요하므로 글자만 레드로 올린다. 카드 테두리는 그대로. */
.account-card--unpaid .point-card p strong { color: var(--red); }
.account-card--unpaid .point-card .coin { color: var(--red); }
.account-card--unpaid .point-card .coin .unit { display: none; }

.point-card .coin_btn {
    margin-left: 2px;
    padding: 5px 9px;
    border: 0;
    border-radius: 6px;
    background: var(--red);
    color: #fff;
    font-family: Pretendard, sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ── 바로가기 3종 ─────────────────────────────────── */

.quick-links {
    position: relative;
    height: 82px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 6px 19px 2px;
}

.quick-links a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.quick-links a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 34px;
    background: #ddd;
}

.quick-links img { width: 25px; height: 25px; margin-top: 4px; object-fit: contain; }

/* 뷰박스 비율이 24x22 / 26x21 / 28x20 로 제각각이라 같은 상자에 넣으면
   가로가 넓은 그림일수록 세로가 눌려 작아 보인다. 높이를 기준으로 맞춘다.
   (메뉴 목록 아이콘도 같은 방식으로 보정돼 있다) */
.quick-links img[src*="review"]          { transform: scale(1.0); }
.quick-links img[src*="inquiry-history"] { transform: scale(1.09); }
.quick-links img[src*="usage-history"]   { transform: scale(1.16); }

/* ── 구역 구분 띠 ─────────────────────────────────── */

.section-gap {
    height: 8px;
    margin-top: 22px;
    background: var(--light);
}

/* ── 메뉴 목록 ────────────────────────────────────── */

.menu-list { padding: 8px 19px 0; background: #fff; }

.menu-list a {
    box-sizing: border-box;
    width: 100%;
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 7px;
    border-bottom: 0;
    color: var(--ink);
    text-align: left;
    text-decoration: none;
}

.menu-list .menu-icon {
    width: 30px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/*
 * 아이콘 규격 통일. 파일마다 비율이 달라 그대로 두면 크기가 제각각이라
 * 정사각 박스 + contain 으로 고정한다. 색(#313131)과 시각 두께(1.8px)는
 * SVG 파일 자체에서 맞춰 두었다.
 */
.menu-list .menu-icon img {
    width: 21px;
    height: 21px;
    object-fit: contain;
}

/*
 * 시각 크기 균일화.
 * object-fit: contain 은 파일의 '경계 상자'만 맞춘다. 아이콘마다 내부 여백과
 * 비율이 달라 실제 보이는 크기가 제각각이었다(잉크 기하평균 17.6~22.8px).
 * 각 파일의 잉크 영역을 측정해 기하평균 18.5px(박스 21px 기준)로 수렴하도록 배율을 걸었다.
 * transform 은 레이아웃 박스(23x23)를 바꾸지 않아 텍스트 정렬이 흔들리지 않는다.
 */
.menu-list .menu-icon img[src*="package.svg"]         { transform: scale(1.153); }
.menu-list .menu-icon img[src*="message.svg"]         { transform: scale(1.091); }
.menu-list .menu-icon img[src*="badge.svg"]           { transform: scale(1.019); }
.menu-list .menu-icon img[src*="coupon.svg"]          { transform: scale(1.018); }
.menu-list .menu-icon img[src*="payment.svg"]         { transform: scale(1.073); }
.menu-list .menu-icon img[src*="notice.svg"]          { transform: scale(1.0); }
.menu-list .menu-icon img[src*="star.svg"]            { transform: scale(0.92); }
.menu-list .menu-icon img[src*="column.svg"]          { transform: scale(0.975); }
.menu-list .menu-icon img[src*="customer-center.svg"] { transform: scale(0.962); }
.menu-list .menu-icon img[src*="partner-apply.svg"]   { transform: scale(0.938); }
.menu-list .menu-icon img[src*="faq.svg"]             { transform: scale(0.902); }
.menu-list .menu-icon img[src*="profile-edit.svg"]    { transform: scale(0.92); }

.menu-list b { font-size: 14px; font-weight: 600; }

.menu-list .menu-chevron {
    width: 21.33px;
    height: 21.33px;
    flex: 0 0 21.33px;
    margin-left: auto;
    fill: none;
    stroke: #949494;
    /* viewBox 가 16 인데 박스가 24px 이라 화면상 굵기는 이 값의 1.5배로 렌더된다. */
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 선생님 입점 신청 — 글자만 강조 */
.menu-list .apply-row b { color: var(--red); font-weight: 700; }

/* 받은 메시지 안읽음 배지 */
.message-menu-count {
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 4px;
    border-radius: 9px;
    background: #d62329;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    line-height: 18px;
}

.message-menu-count[hidden] { display: none; }
.menu-list a .message-menu-count:not([hidden]) + .menu-chevron { margin-left: 10px; }

/* ── 사업자 정보 푸터 ─────────────────────────────── */

.business-footer {
    margin-top: 8px;
    padding: 18px 28px 22px;
    background: #f3f3f3;
    color: #aaa;
    text-align: center;
}

.footer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.footer-brand img { display: block; width: 89px; height: 18px; object-fit: contain; filter: grayscale(1); opacity: .48; }

.footer-head a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #999;
    font-size: 9px;
    text-decoration: none;
}

.footer-head a i {
    width: 5px;
    height: 5px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    transform: rotate(45deg);
}

.business-footer p { margin: 9px 0; font-size: 8px; line-height: 1.5; word-break: keep-all; }

/* ═════════════════════════════════════════════════════════════════════════
   마이페이지 개편 v2 (SPEC-20260915-01) — 한시적 부분 공개

   ⚠️ body.mypage-v2 가 붙은 회원에게만 적용된다. 게이트는 page/mypage.php 의
   $mypage_v2_ids 이며, 지금은 dinga24 한 명뿐이다. 그 밖의 회원은 이 파일
   위쪽의 기존 규칙만 적용받아 화면이 전혀 바뀌지 않는다.

   담고 있는 것
     · 상단 알림 슬롯(배너) — 후보 교체 연출 포함
     · 포인트 + 바로가기 묶음(.pointpack) — 기존 .point-card/.quick-links 대체
     · 알림 바텀시트(.sheet)
     · 하위 메뉴 크기·여백 재조정, 로그아웃 버튼 색

   전면 공개 때는 body.mypage-v2 접두사를 걷어내고 위쪽의 낡은 규칙
   (.point-card / .quick-links / 옛 .menu-list 값)을 지운다.
   ═════════════════════════════════════════════════════════════════════════ */

/* 로그아웃은 빈도가 낮은 보조 동작이라 캡슐(버튼 형태) 대신 글자 + 아이콘으로 둔다. */
body.mypage-v2 .page-titlebar .logout_btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 3px;
    min-height: 0;
    padding: 6px 0 6px 10px;
    border: 0;
    background: none;
    /* 로그아웃은 빈도가 낮은 보조 동작이라 브랜드 레드를 쓰면 과하게 눈에 띈다. */
    color: #b0b4b8;
    font-family: Pretendard, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

/* ── 알림 슬롯 교체 연출 (SPEC-20260915-01) ───────────────────────────────
   DOM 상으로는 같은 상자의 내용만 바뀌지만, 보기에는 카드 한 장이 빠지고
   다음 카드가 올라오는 것처럼 보여야 한다. 그래서 안쪽 글자가 아니라
   상자 자체를 움직이고 흐린다.
   높이는 배너마다 다를 수 있어 JS 가 px 을 직접 물려 주고, 여기서는 그 변화만
   전환한다. auto 로는 전환이 걸리지 않는다. */
body.mypage-v2 .mypage_guide_banner {
    transition:
        height 0.22s ease,
        margin 0.22s ease,
        padding 0.22s ease,
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 높이를 px 로 줄이는 동안 안쪽 글자가 테두리 밖으로 삐져나오지 않게 한다. */
body.mypage-v2 .mypage_guide_banner.is-animating { overflow: hidden; }

/* 마지막 후보를 닫을 때. 높이·여백을 함께 0 으로 접어야 아래 내용이
   끊기지 않고 따라 올라온다. */
body.mypage-v2 .mypage_guide_banner.is-closing {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
}

body.mypage-v2 .mypage_guide_banner.is-closing .guide_close { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    body.mypage-v2 .mypage_guide_banner,
    body.mypage-v2 .mypage_guide_banner .guide_close {
        transition: none;
    }
}

/* ── 메뉴 목록 ────────────────────────────────────── */

/* 위아래 여백을 행 사이 간격과 같게 맞춘다.
   행 높이 45px 안에서 콘텐츠(아이콘 박스)가 24px 이므로 행과 행 사이에 21px 이 뜬다.
   첫 행 위에는 이미 (45-24)/2 = 10.5px 이 들어 있으니, 나머지 10.5px 만 패딩으로 채우면
   첫 행 위 여백도 21px 이 되어 행 간격과 같아진다. 마지막 행 아래도 같은 이유로 10.5px. */
body.mypage-v2 .menu-list { padding: 10.5px 19px; background: #fff; }

body.mypage-v2 .menu-list a {
    box-sizing: border-box;
    width: 100%;
    /* 당근 실측 48px 을 우리 캔버스 폭으로 환산한 값.
       당근 스크린샷은 414pt 기준, 우리 .app-screen 은 360px 기준이라
       같은 크기로 나란히 놓으면 우리 쪽이 414/360 = 1.15배로 커 보인다.
       그래서 당근 수치에 360/414 = 0.87 을 곱해 옮긴다. 48 * 0.87 = 41.8
       여기에 한 톤만 더 벌린 값(414 환산 52pt). */
    height: 45px;
    display: flex;
    align-items: center;
    padding: 0 7px;
    border-bottom: 0;
    color: var(--ink);
    text-align: left;
    text-decoration: none;
}

/*
 * 아이콘 규격 통일. 파일마다 비율이 달라 그대로 두면 크기가 제각각이라
 * 정사각 박스 + contain 으로 고정한다. 색(#313131)과 시각 두께(1.8px)는
 * SVG 파일 자체에서 맞춰 두었다.
 */
body.mypage-v2 .menu-list .menu-icon img {
    /* 당근 실측(2x): 아이콘 잉크 30~36, 라벨 잉크 높이 28~29 → 비율 약 1.19.
       우리는 잉크 18.5px / 라벨 잉크 14.5px = 1.28 로 아이콘이 7% 컸다.
       박스를 21 -> 19.5 로 줄여 비율을 1.19 에 맞춘다.
       (아래 파일별 scale 은 상대값이라 그대로 따라 줄어든다.) */
    /* 19.5 * 0.87 = 17.0 (화면 폭 환산) */
    width: 17px;
    height: 17px;
    object-fit: contain;
}

/*
 * 시각 크기 균일화.
 * object-fit: contain 은 파일의 '경계 상자'만 맞춘다. 아이콘마다 내부 여백과
 * 비율이 달라 실제 보이는 크기가 제각각이었다(잉크 기하평균 17.6~22.8px).
 * 각 파일의 잉크 영역을 측정해 기하평균 18.5px(박스 21px 기준)로 수렴하도록 배율을 걸었다.
 * transform 은 레이아웃 박스(23x23)를 바꾸지 않아 텍스트 정렬이 흔들리지 않는다.
 */
body.mypage-v2 .menu-list .menu-icon img[src*="package.svg"] { transform: scale(1.206); }

body.mypage-v2 .menu-list .menu-icon img[src*="message.svg"] { transform: scale(0.956); }

body.mypage-v2 .menu-list .menu-icon img[src*="badge.svg"] { transform: scale(0.998); }

body.mypage-v2 .menu-list .menu-icon img[src*="coupon.svg"] { transform: scale(0.924); }

body.mypage-v2 .menu-list .menu-icon img[src*="payment.svg"] { transform: scale(0.949); }

body.mypage-v2 .menu-list .menu-icon img[src*="notice.svg"] { transform: scale(0.924); }

body.mypage-v2 .menu-list .menu-icon img[src*="star.svg"] { transform: scale(0.934); }

body.mypage-v2 .menu-list .menu-icon img[src*="column.svg"] { transform: scale(0.952); }

body.mypage-v2 .menu-list .menu-icon img[src*="customer-center.svg"] { transform: scale(0.935); }

body.mypage-v2 .menu-list .menu-icon img[src*="partner-apply.svg"] { transform: scale(0.935); }

body.mypage-v2 .menu-list .menu-icon img[src*="faq.svg"] { transform: scale(0.921); }

body.mypage-v2 .menu-list .menu-icon img[src*="profile-edit.svg"] { transform: scale(0.938); }

body.mypage-v2 .menu-list .menu-icon img[src*="profile-card.svg"] { transform: scale(0.956); }

/* 선물 상자는 가로로 넓어 같은 박스에서 잉크가 커 보인다. package.svg 의 배율에
   잉크 면적비를 물려 줄인 값이다 (SPEC-20260915-02). */
body.mypage-v2 .menu-list .menu-icon img[src*="gift.svg"] { transform: scale(1.158); }

body.mypage-v2 .menu-list b { font-size: 14px; font-weight: 500; }

body.mypage-v2 .menu-list .menu-chevron {
    /* 당근 실측(2x): 화살표 잉크 15 x 26 = 7.5 x 13pt.
       우리는 박스 21.33px 일 때 잉크가 9 x 15.8pt 로 21% 컸다.
       아이콘을 줄인 만큼 여기도 맞춘다. 21.33 * 0.81 = 17.25 */
    width: 17.25px;
    height: 17.25px;
    flex: 0 0 17.25px;
    margin-left: auto;
    fill: none;
    stroke: #949494;
    /* viewBox 가 16 인데 박스가 24px 이라 화면상 굵기는 이 값의 1.5배로 렌더된다. */
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ══ 알림 배너 (SPEC-20260915-01) ═══════════════════════════════════════
   유아이볼 조사(토스·카카오골프예약·디맨드 등)를 거쳐 정한 형태.
     구조 — 작은 안내 줄 + 굵은 메인 줄 + 우측 배지 (토스의 배지형)
     겉모습 — 흰 배경 + 밝은 단색 테두리 + 아래로 떨어지는 그림자 (카카오골프형)
   원본 이식 때는 variant-d / bg-7 을 .mypage_guide_banner 본체로 접어 넣는다.
   ───────────────────────────────────────────────────────────────────────── */

/* 3번째 줄과 화살표는 기본적으로 감춘다. 쓰는 변형에서만 켠다. */
body.mypage-v2 .mypage_guide_banner .guide_meta,
body.mypage-v2 .mypage_guide_banner .guide_chevron { display: none; }

/* 내용이 비면 display:block 이어도 자리를 차지하지 않게 한다.
   안 그러면 body 의 gap 만큼 아래 여백이 생긴다. */
body.mypage-v2 .mypage_guide_banner .guide_meta:empty { display: none !important; }

/* 숫자를 따로 굵게 하지 않고 본문 두께를 따른다.
   조각 구조(guide_num)는 남겨 둔다 — 나중에 강조가 필요하면 여기만 바꾸면 된다. */
body.mypage-v2 .mypage_guide_banner .guide_num { font-weight: inherit; }

/* ── 알림 배너 바탕 ──
   원래의 분홍 테두리·그림자를 걷고 여백을 다시 잡는다.
   겉모습(배경·테두리·그림자)은 아래 bg-7 이 덮는다. */
body.mypage-v2 .mypage_guide_banner.variant-d {
    border: 0;
    box-shadow: none;
    border-radius: 12px;
    padding: 17px 16px;
    /* 아이콘 PNG 자체에 투명 여백이 있어 눈에 보이는 틈은 이 값보다 넓다.
       글이 아이콘 쪽으로 붙도록 좁힌다. */
    gap: 6px;
}

/* 작은 안내 줄 / 굵은 메인 줄 두 겹으로 앉힌다. 토스의 배지형과 같은 골격. */
body.mypage-v2 .mypage_guide_banner.variant-d .guide_body { gap: 2px; }

body.mypage-v2 .mypage_guide_banner.variant-d .guide_text { font-size: 12px; font-weight: 500; color: var(--muted); }

body.mypage-v2 .mypage_guide_banner.variant-d .guide_sub {
    font-size: 16px;
    /* 한 단계 얇게. 16px 로 키운 뒤라 700 은 과했다. */
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    /* 한 줄로 묶고 넘치면 말줄임. 문구가 길어져도 배너 높이가 흔들리지 않는다.
       flex 안에서 말줄임이 먹으려면 조상마다 min-width:0 이 필요한데,
       .guide_link 와 .guide_body 에 이미 걸려 있다. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.mypage-v2 .mypage_guide_banner.variant-d .guide_meta {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #a5a9ad;
}

/* ── D. C 와 같은 3줄이되 오른쪽을 배지로 ── */
/* E 와 같은 크기로 맞춘다. 48px 은 3줄 높이에도 과했다. 이후 10% 축소. */
body.mypage-v2 .mypage_guide_banner.variant-d .guide_icon {
    width: 34px;
    height: 34px;
    font-size: 25px;
}

body.mypage-v2 .mypage_guide_banner.variant-d .guide_badge {
    background: var(--pink, #fff1f0);
    color: var(--red);
    font-size: 11.5px;
    padding: 5px 10px;
}

/* 3D 아이콘을 넣으면 이모지 자리를 그림이 그대로 차지한다.
   이모지는 글자라 line-height 에 붙지만 그림은 박스라, 크기를 직접 준다. */
body.mypage-v2 .mypage_guide_banner .guide_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 아이콘마다 여백과 형태가 달라 같은 px 이어도 크기가 달라 보인다.
   쓰는 손은 대각선이라 꽉 차고, 돋보기는 손잡이 때문에 여백이 많다.
   돋보기만 조금 키워 시각적 크기를 맞춘다. */
body.mypage-v2 .mypage_guide_banner[data-notice-key="guide"] .guide_icon { width: 34px; height: 34px; }

/* ── 겉모습: 밝은 단색 외곽선 + 하단 드롭섀도우 ──
   카카오골프예약 '설치하고 바로 받기' 배너의 방식. 그라데이션 없이 한 색으로
   윤곽을 긋고, 그림자를 아래로만 떨궈 카드가 얹혀 있는 인상을 준다. */
body.mypage-v2 .mypage_guide_banner.bg-7 {
    border: 1px solid #ff8a8e;
    border-radius: 12px;
    background: #fff;
    /* y 축으로만 내리고 번짐을 좁게 잡아야 '아래 그림자'로 읽힌다. */
    box-shadow: 0 4px 10px 0 rgba(214, 35, 41, 0.14);
}

/* ══ 포인트 + 바로가기 묶음 시안 (목업 전용) ═════════════════════════════
   유아이볼 마이페이지 조사 결과를 옮긴 것.
     · 메가커피 '스탬프 2/10 │ 쿠폰 0 │ 바코드' — 여러 지표를 한 줄에 세로선으로 나눔
     · 해피문데이 '좋아요/쿠폰/코인' — 라벨은 작게, 숫자를 크게
     · 당근 '🥕pay … 0원 >' — 잔액이 줄을 독점
   공통점은 (1) 채워진 카드 안에 들어가고 (2) 숫자가 가장 큰 요소이며
   (3) 바로가기를 없애지 않고 같은 덩어리 안에 얇게 붙인다는 것.
   ───────────────────────────────────────────────────────────────────────── */

/* 확정안(C)이 쓰는 묶음. 기존 두 블록은 이 묶음이 대신하므로 감춘다.
   (원본 이식 때는 .point-card / .quick-links 마크업 자체를 걷어낸다) */
body.mypage-v2 .point-card,
body.mypage-v2 .quick-links { display: none; }

body.mypage-v2 .pointpack {
    display: block;
    /*
     * 위 간격. 배너를 닫으면 이 값이 그대로 '마이페이지' 제목과 상자 사이가 된다.
     * 제목 줄 아래 여백(16px)이 이미 붙어 있어 둘을 더하면 글자에서 상자까지 30px 이
     * 떠, 상자가 제목에 딸린 것으로 안 읽혔다. 11 → 5 로 줄여 24px 로 맞춘다.
     */
    margin: 5px 19px 0;
}

/* 배너가 떠 있을 때는 이 값이 배너와 상자 사이가 된다. 제목과의 간격(24px)을
   그대로 쓰면 배너에 상자가 붙어 버려, 배너 몫으로 따로 준다.
   배너는 테두리와 그림자를 두르고 있어 같은 수치라도 상자보다 가까워 보인다. */
body.mypage-v2 .mypage_guide_banner ~ .account-card .pointpack {
    margin-top: 14px;
}

/* ── 머리: 포인트 ── */
body.mypage-v2 .pointpack__head {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 박스형(A·B·C) 내부 위아래 여백. 16/14 에서 4px 씩 늘렸다. */
    padding: 20px 16px 14px;
}

/* 라벨이 두 줄이 될 수 있다(관리자 레벨 표기). 세로로 쌓고 금액은 가운데 정렬을 유지한다. */
body.mypage-v2 .pointpack__labelbox { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

body.mypage-v2 .pointpack__label {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    /* 기본값이면 '미납 금액' 이 '미납 금 / 액' 으로 갈라진다. 어절로 끊는다. */
    word-break: keep-all;
    line-height: 1.35;
}

/* 아이디가 길면 이름만 줄이고 '님의 보유 포인트'는 남긴다. */
body.mypage-v2 .pointpack__who { display: inline-block; max-width: 120px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; }

body.mypage-v2 .pointpack__level { color: var(--muted); font-size: 11px; font-weight: 500; }

body.mypage-v2 .pointpack__level[hidden] { display: none; }

/* 금액과 액션 버튼을 한 묶음으로 둔다. 평소엔 가로, 미납+박스형에서는 세로로 쌓는다. */
body.mypage-v2 .pointpack__right { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 8px; }

body.mypage-v2 .pointpack__amount { display: flex; align-items: baseline; gap: 7px; }

/* 카드에서 가장 큰 요소. 위계를 여기로 옮기는 게 이번 작업의 목적이다. */
body.mypage-v2 .pointpack__num { font-size: 24px; font-weight: 600; letter-spacing: -0.4px; color: var(--ink); }

body.mypage-v2 .pointpack__unit { font-size: 12px; font-weight: 600; color: var(--ink); }

body.mypage-v2 .pointpack__act[hidden] { display: none; }

body.mypage-v2 .pointpack__act {
    flex: 0 0 auto;
    padding: 7px 12px;
    border: 0;
    border-radius: 999px;
    /* 당근 실측: 카드 안 액션은 #f4f5f6 회색 알약. 회색은 여기에만 남긴다. */
    background: #f2f3f5;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* ── 발: 바로가기 3분할 ── */
body.mypage-v2 .pointpack__links { display: flex; align-items: stretch; }

/* 카드 아래쪽도 같은 만큼 띄운다. */
body.mypage-v2 .pointpack__links a {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 11px 0;
    /* 하위 메뉴 라벨과 같은 색·두께로 맞춘다. */
    color: var(--ink);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
}

/* 칸 사이 세로 구분선. 메가커피·해피문데이가 쓰는 방식. */
body.mypage-v2 .pointpack__links a + a { border-left: 1px solid rgba(0,0,0,.07); }

/* ── A: 한 카드, 텍스트만 ── */
/* ── B: 한 카드, 작은 무채색 아이콘 ── */
/* 필터로 색을 눌렀더니 SVG 안의 fill="white" 도형까지 회색이 되어
   아이콘 뒤에 배경 상자가 생겼다. 색은 파일에서 바꾸고 필터는 쓰지 않는다.
   (quick-icons/*.svg — #D62329 를 #313131 로 치환한 사본) */

/* ── C: 포인트 카드와 바로가기 카드를 분리 ── */
body.mypage-v2 .pointpack__head {
    /*
     * 테두리를 걷고 연분홍 면으로 세운다. 회색 선 + 흰 바탕은 흰 화면 위에서
     * 거의 사라져, 화면에서 가장 먼저 봐야 할 상자가 가장 흐렸다.
     * 면으로 칠하면 선 없이도 상자가 서고, 이 화면에서 분홍은 이미 혜택·배지에
     * 쓰는 색이라 새 색을 들이지 않는다.
     */
    border: 0;
    border-radius: 12px;
    background: var(--pink, #fff1f0);
    margin-bottom: 8px;
}

/* C: 아래 묶음은 상자를 두지 않는다. 칸 사이 세로선으로만 나눈다. */
body.mypage-v2 .pointpack__links {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0 4px;
}

body.mypage-v2 .pointpack__links a img { width: 15px; height: 15px; }

/* ── 미납 ── */
/* 단위(포인트·원)도 상태색을 같이 받는다. 숫자만 빨갛고 단위가 검으면
   두 글자가 한 덩어리로 안 읽힌다. */
body.mypage-v2 .pointpack.is-unpaid .pointpack__num,
body.mypage-v2 .pointpack.is-unpaid .pointpack__unit { color: var(--red, #d62329); }

body.mypage-v2 .pointpack.is-unpaid .pointpack__act { background: var(--red, #d62329); color: #fff; }

/* ── D: 박스 없이 좌우 패딩만 (카카오 'MY 쇼핑' 참고) ──
   카드도 테두리도 없다. 왼쪽 끝에 아이디·상태, 오른쪽 끝에 금액.
   바로가기는 세로 구분선을 없애고 아이콘을 작게 내려 글자와 세로로 쌓는다. */

/* 하위 메뉴 글자는 .menu-list(19px) + a(7px) = 화면 끝에서 26px 에서 시작한다.
   박스가 없는 D 는 그 선에 맞춰야 한 줄로 떨어진다. margin 19 + padding 7 = 26. */

/* 구분선 제거 */

/* 라벨을 단으로 쌓는다 (전 시안 공통).
     1단  아이디 + 님        (크게)
     2단  보유 포인트 / 미납 금액
     3단  (관리자, 레벨: 10)  — 있을 때만
   카카오 'MY 쇼핑'의 '현경님 / 내 쇼핑포인트 0P' 구성을 따른 것. */

/* '의' 는 한 줄로 이어질 때만 필요하다. 단으로 쪼개면 군더더기가 된다. */
body.mypage-v2 .pointpack__josa { display: none; }

/* 2단도 1단과 같은 크기·두께로 쓴다. 두 줄이 한 덩어리로 읽힌다. */
/* 2단은 1단과 같은 크기·두께로 쓴다. 두 줄이 한 덩어리로 읽힌다. */
body.mypage-v2 .pointpack__what { display: block; margin-top: 2px; }

/* B·C 라벨: 두께 한 단계 위로, 행간 1.35 -> 1.62 (20% 증량) */

/* D 에서는 알림 배너도 같은 선에 세운다. 배너 상자 안쪽 여백을 7px 로 줄여
   글자 시작점을 하위 메뉴·포인트와 맞춘다. */

/* 미납 버튼은 금액과 한 줄에 둔다. (2단으로 내렸더니 버튼이 붕 떠 보였다) */

/* ── 바로가기: 하위 메뉴와 같은 크기 ── */
body.mypage-v2 .pointpack__links a { font-size: 14px; font-weight: 500; }

/* 하위 메뉴 아이콘과 시각 크기를 맞춘다.
   잉크 기하평균이 16.7px 로 메뉴(15.6px)보다 7% 컸다. 0.934 배로 줄이고,
   그만큼 얇아지는 획은 SVG 의 stroke-width 를 키워 보정했다. */
body.mypage-v2 .pointpack__links a img { width: 17px; height: 17px; transform: scale(0.934); }

/* ── D: 알림 배너 상자를 하위 메뉴 폭에 맞춘다 ──
   안쪽 여백은 다른 시안과 같게 두고, 상자 자체를 26px 선까지 좁힌다. */

/* 하위 메뉴와의 경계는 이미 페이지 배경이 만들어 준다.
   여기서 필요한 건 아이디·상태와 바로가기 사이를 나누는 선 하나뿐이다. */

/* ── 미납: 아이디·상태 텍스트도 빨강 ── */
body.mypage-v2 .pointpack.is-unpaid .pointpack__label { color: var(--red, #d62329); }

/* ── 바로가기 칸 사이 세로 구분선 (C·D-2 공통) ──
   세 칸이 붙어 있으면 어디까지가 한 버튼인지 안 읽힌다. */
body.mypage-v2 .pointpack__links a { position: relative; }

body.mypage-v2 .pointpack__links a + a { border-left: 0; }

body.mypage-v2 .pointpack__links a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    /* 아이콘(17px)과 글자 줄 높이를 합친 만큼. 칸 전체 높이로 그으면 선이 길어 보인다. */
    height: 20px;
    background: rgba(0, 0, 0, .09);
}

/* 배너가 있을 때는 선을 그리지 않는다. */

/* 배너가 모두 닫힌 뒤: 회색 띠로 경계를 세운다. */

/* C: 바로가기 위 여백이 아래보다 9px 넓었다(20 vs 11). 머리 아래를 줄여 맞춘다. */
/* 박스 안쪽(머리 패딩)은 손대지 않는다.
   C의 흰 박스는 .pointpack__head 에만 걸려 있고 바로가기 행은 그 아래 투명 영역에
   떠 있다. 즉 행이 놓이는 공간은 "박스 아래 끝 ~ 회색 구분바 위 끝"(=60px) 이고,
   앵커 패딩(11/11)만으로는 위 11 / 아래 33 이 되어 박스에 붙어 보인다.
   위쪽에 11px 을 더하고 아래 구분바 여백을 22→11 로 줄이면 22/22 로 맞으면서
   구분바 위치(전체 높이)는 그대로 유지된다. */
body.mypage-v2 .pointpack__head { margin-bottom: 0; }

body.mypage-v2 .pointpack__links { margin-top: 11px; padding-bottom: 0; }

body.mypage-v2 .account-card + .section-gap { margin-top: 11px; }

/* D 계열은 상태 줄(.pointpack__what)에 색을 직접 지정해 두어 상속을 막는다.
   미납일 때는 아이디와 같이 빨강으로 맞춘다. */

/* C: 숫자 오른쪽 단위를 밑줄(baseline)이 아니라 숫자 높이의 한가운데에 건다.
   24px 숫자 옆 12px 단위는 baseline 정렬이면 아래로 처져 보인다. */
body.mypage-v2 .pointpack__amount { align-items: center; }

/* ── C: 아이디·상태 줄을 D 계열과 같은 규격으로 ──
   두 시안을 나란히 볼 때 글자 크기가 달라 비교가 안 됐다. 1단(아이디)·2단(상태)
   모두 16px/700 으로 맞춘다(.pointpack__josa 숨김은 이미 전역). */
/* 배너 메인 줄(16px/600)과 같은 값이면 화면 위쪽에 같은 등급의 덩어리가 둘이 된다.
   한 단계 낮춰 배너와 위계를 나눈다. */
body.mypage-v2 .pointpack__label { font-size: 15px; font-weight: 600; line-height: 1.3; }

body.mypage-v2 .pointpack__what { font-size: 15px; font-weight: 600; color: var(--ink); }

body.mypage-v2 .pointpack__who { max-width: 160px; }

body.mypage-v2 .pointpack__level { margin-top: 1px; }

/* 글자가 커진 만큼 상자 위아래 숨통도 6px 씩 더 튼다.
   (박스 아래 바로가기 행 중앙 정렬은 박스 아래 끝 기준이라 그대로 유지된다) */
body.mypage-v2 .pointpack__head { padding-top: 26px; padding-bottom: 20px; }

/* 바로가기 바 아래 여백이 위(23px)의 두 배 가까이(41px) 됐다.
   앵커 패딩 11 + 이 값 12 = 23 으로 위아래를 맞춘다. */

/* ── 하위 메뉴: 좌우 여백을 '보이는 획' 기준으로 맞춘다 ──
   아이콘·화살표의 상자는 양쪽 다 26px 로 같지만, 화살표 SVG 는 viewBox(16) 안에서
   x 5.25~11.25 에만 획이 있어 상자 오른쪽에 5px 가까운 빈 칸이 남는다.
   그래서 눈으로는 오른쪽이 더 비어 보인다. 그 빈 칸만큼 밖으로 밀어
   실제 획이 왼쪽 아이콘과 같은 26px 선에서 끝나게 한다. */
body.mypage-v2 .menu-chevron { margin-right: -5px; }

/* ── 미납: 상자까지 상태색을 입는다 ──
   금액만 빨갛고 상자가 평소와 같으면 '미납'이 숫자 하나의 속성으로만 읽힌다.
   상태 줄(.pointpack__what)은 위에서 색을 직접 지정해 두어 상속이 막히므로 다시 건다. */
body.mypage-v2 .pointpack.is-unpaid .pointpack__what { color: var(--red, #d62329); }

/* 바탕은 평소와 같은 연분홍이고 레드 테두리만 더 두른다.
   평소에는 테두리가 없으므로(border: 0) 굵기부터 다시 지정해야 한다.
   면을 따로 어둡게 하지 않는 것은, 미납을 알리는 일을 글자·버튼·테두리가
   이미 셋이나 맡고 있어 바탕까지 바꾸면 경고가 과해지기 때문이다. */
body.mypage-v2 .pointpack.is-unpaid .pointpack__head {
    border: 1px solid var(--red, #d62329);
}

/* 미납일 때는 오른쪽에 재결제 버튼이 붙는다. 단위(원)가 숫자와 버튼 사이
   한가운데 놓여 어느 쪽 것인지 흐려지므로, 숫자 쪽으로 당기고 버튼은 밀어낸다. */
body.mypage-v2 .pointpack.is-unpaid .pointpack__amount { gap: 3px; }

body.mypage-v2 .pointpack.is-unpaid .pointpack__right { gap: 12px; }

/* ─────────────────────────────────────────────────────────────────────────
   알림 바텀시트 (SPEC-20260915-01 UC-06/07)

   레퍼런스(연픽 추천 시트)의 골격을 그대로 따른다.
     · 상단 알약 배지 하나로 보상을 먼저 말하고
     · 본문은 위계 없이 같은 크기 세 줄
     · 바닥은 거절/수락 두 알약 버튼, 수락 쪽이 두 배 넓다
     · 닫기 X 도 그림도 없다 — 높이가 화면의 3 분의 1 을 넘지 않는다
   컬러만 우리 브랜드(레드/연분홍)로 바꿔 쓴다.

   ⚠️ 위치 기준: .app-screen--main 이 position: relative 라 absolute 가 폰 화면에
   정확히 맞는다. fixed 를 써도 목업에서는 transform 이 걸린 .screen-scale 이
   기준이 되어 같은 결과지만, 하단탭 위에 겹치는 순서를 확실히 하려고 absolute 를 쓴다.
   ───────────────────────────────────────────────────────────────────────── */
body.mypage-v2 .sheet {
    position: absolute;
    inset: 0;
    z-index: 30;
}

body.mypage-v2 .sheet[hidden] { display: none; }

body.mypage-v2 .sheet__dim {
    position: absolute;
    inset: 0;
    /* 이 프로젝트의 고객 화면 모달 딤 값과 같게 쓴다.
       (my_additional_service.css .delivery-modal__dim / .form-modal__dim,
        my_membership.css .payment-modal__dim / .cancel-modal__dim = 모두 .34) */
    background: rgba(0, 0, 0, .34);
    opacity: 0;
    transition: opacity .2s ease;
}

/* 시트 자체가 올라온다. 닫기·다시 보지 않기가 모두 시트 안에 있어
   뒤 메뉴 글자와 겹칠 일이 없다. */
body.mypage-v2 .sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* 내용만큼만 차지한다. 상한은 안전장치다. */
    max-height: 70vh;
    overflow-y: auto;
    /*
     * 위아래를 리뷰 작성 화면의 시트와 같은 값으로 맞춘다.
     * 아래는 18px 이다 — 마지막 줄인 '그만 보기' 두 칸이 눌리는 면을 넓히려고
     * 아래로 6px 을 더 갖고 있어, 24px 을 그대로 주면 글자 밑이 30px 로 벌어진다.
     * 보이는 글자 기준으로 24px 이 되게 그만큼 뺀다.
     */
    padding: 36px 20px 18px;
    border-radius: 22px 22px 0 0;
    background: #fff;
    text-align: center;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

body.mypage-v2 .sheet.is-open .sheet__dim { opacity: 1; }

body.mypage-v2 .sheet.is-open .sheet__panel { transform: translateY(0); }

/* CTA 아래 중앙. 텍스트 버튼이라 CTA 와 무게가 확실히 갈린다.
   밑줄이 있어야 회색 글자가 '누를 수 있는 것'으로 읽힌다. */
/*
 * 그만 보기 두 칸. 얇은 바를 좌우로 나누고 가운데 세로선으로 가른다
 * (차봇·카카오골프예약이 쓰는 구조).
 * 버튼처럼 칠하지 않고 평평한 글자로 둔다 — 거절 선택지가 CTA 와 같은 무게로
 * 보이면 눈이 그쪽으로 간다.
 */
body.mypage-v2 .sheet__dismiss {
    /* 칸을 반씩 나누면(1fr 1fr) 글자가 각 칸 가운데로 밀려 둘이 멀찍이 떨어진다.
       두 글자를 가운데로 모으고 사이 간격만 gap 으로 준다. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 14px;
}

body.mypage-v2 .sheet__dismiss-btn {
    position: relative;
    /* 위아래를 같은 값으로 둔다. 상자 가운데와 글자 가운데가 어긋나면
       사이 구분선도 따라 어긋난다. */
    padding: 6px 0;
    border: 0;
    background: none;
    color: #b9bcc0;
    font-family: Pretendard, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
}

/* 두 글자를 가르는 선. 버튼에 테두리로 걸면 눌리는 면(위아래 여백 포함) 높이만큼
   길어져 글자보다 훌쩍 커진다. 글자 높이에 맞춘 조각을 사이 간격 한가운데 놓는다. */
body.mypage-v2 .sheet__dismiss-btn + .sheet__dismiss-btn::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 1px;
    height: 12px;
    margin-top: -6px;
    background: #e7e8ea;
}


/* 세 줄이 같은 무게다. 제목·설명을 나누지 않는 것이 이 형식의 핵심. */
body.mypage-v2 .sheet__text {
    margin: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    word-break: keep-all;
}

body.mypage-v2 .sheet__foot {
    /* 배지 아래 14px / 여기 20px 로 숫자가 달랐고, 본문의 반행간(4.5px)이
       위아래 모두에 더해져도 차이가 그대로 남아 본문이 위로 쏠려 보였다.
       보이는 글자 기준으로 배지 아래와 같은 값에 맞춘다. 이후 양쪽 2px 증량. */
    margin-top: 18.35px;
}

body.mypage-v2 .sheet__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 버튼이 하나뿐이라 시트 폭을 꽉 채우면 띠처럼 보인다.
       (둘일 때는 나란히 채우는 게 맞았다) 가운데로 모은다. */
    width: 240px;
    max-width: 100%;
    margin: 0 auto;
    height: 47px;
    padding: 0;
    border: 0;
    /* 알약. 높이의 절반이면 좌우 끝이 정확한 반원이 된다. */
    border-radius: 23.5px;
    font-family: Pretendard, sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

/* 레드(--red)는 돈이 걸린 경고 자리다(미납·재결제). 리뷰 쓰기는 권유라
   이 프로젝트가 확정 버튼에 쓰는 --accent(#ee555a)를 쓴다.
   (같은 규칙: page/css/review_list.css 의 .modal_btn_txt_btn) */
body.mypage-v2 .sheet__btn--main {
    background: var(--accent, #ee555a);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    body.mypage-v2 .sheet__dim,
    body.mypage-v2 .sheet__panel { transition: none; }
}