@charset "utf-8";

/*
 * 마이페이지 계열 폰 목업 공통 셸
 *
 * 퍼블리싱 원본: .publishing_ref/styles/mypage.css + membership-management.css 의 셸 부분
 *
 * 구조
 *   .page > .desktop-shell > ( aside.promo-panel + section.phone-stage > .phone-frame > .screen-scale > article.app-screen )
 *
 * 셸 변형 2종
 *   - detail : .app-screen 자체가 스크롤. 상단 .detail-topbar (sticky). 하단탭 없음.  <- 서브 화면 3종
 *   - main   : .app-screen 안에 .scroll-content 가 스크롤. 상단 .topbar + 하단 .bottom-tabs. <- mypage (후속 단계)
 *
 * ⚠️ 높이 처리
 *   원본은 100vh / --phone-visible-height 에만 의존한다. 앱 WebView 는 초기 innerHeight 가
 *   0 으로 잡히는 경우가 있어 화면이 통째로 안 보이는 사고가 난다.
 *   page/js/mypage_shell.js 가 --app-viewport-height 를 주입하고, 아래 모바일 블록에서
 *   그 값을 우선 사용한다 (publishing-webview-height 스킬 규약).
 */

:root {
    --red: #d62329;
    --accent: #ee555a;
    --pink: #fff1f0;
    /* 정보성 안내용. 레드는 돈이 걸린 경고에만 쓰고 안내는 이쪽으로 뺀다. */
    --info: #2a5fd0;
    --ink: #313131;
    --muted: #7a7a7a;
    --line: #e2e2e2;
    --light: #f5f5f5;
    --phone-scale: 1;
    --phone-visible-height: 740px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
}

body { background: #f5f5f5; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; color: inherit; cursor: pointer; }

/* ── 데스크톱 셸 ──────────────────────────────────── */

.page, .desktop-shell { min-height: 100vh; }

.desktop-shell {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

/* ── 좌측 프로모션 패널 ───────────────────────────── */

.promo-panel {
    width: 540px;
    padding: 32px 44px 32px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
}

.promo-card-crop {
    width: 320px;
    height: 400px;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .12);
}

.promo-card-crop > img { display: block; width: 320px; height: auto; }

.promo-qr {
    width: 472px;
    height: 108px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.promo-copy { display: flex; flex-direction: column; gap: 4px; }

.promo-copy p,
.promo-copy strong {
    margin: 0;
    color: #202020;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
}

.promo-copy strong { color: #e43737; }

.promo-copy a {
    margin-top: 10px;
    color: #4a4a4a;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

/* 상담사 페이지와 같은 화살표 */
.promo-copy a::after { content: " ->"; }

.promo-qr > img { width: 108px; height: 108px; }

/* ── 폰 프레임 ────────────────────────────────────── */

.phone-stage {
    width: calc(100vh * 360 / 740);
    min-height: 100vh;
    margin-right: 120px;
    display: flex;
    align-items: center;
}

.phone-frame {
    position: relative;
    width: calc(100vh * 360 / 740);
    min-width: calc(100vh * 360 / 740);
    height: 100vh;
    overflow: hidden;
    background: #fff;
}

.screen-scale {
    position: absolute;
    inset: 0 auto auto 0;
    width: 360px;
    height: var(--phone-visible-height);
    transform: scale(var(--phone-scale));
    transform-origin: top left;
}

.app-screen {
    width: 360px;
    height: var(--phone-visible-height);
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    scrollbar-width: none;
}

.app-screen::-webkit-scrollbar { display: none; }

/* ── main 변형 : 상단바 + 스크롤 본문 + 하단탭 ──────── */

/*
 * detail 과 달리 .app-screen 은 스크롤하지 않는다. 안쪽 .scroll-content 가
 * 스크롤하고, .bottom-tabs 는 .app-screen 바닥에 붙어 함께 밀리지 않는다.
 * 이렇게 해야 하단탭이 항상 보인다.
 */
.app-screen--main {
    position: relative;
    overflow: hidden;
}

.topbar {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ececec;
    background: #fff;
}

.topbar .brand {
    position: relative;
    width: 122px;
    height: 100%;
    padding-left: 21px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.topbar .brand > img { display: block; width: 89px; height: 18px; object-fit: contain; }

/* 로고·검색 양옆의 세로 구분선 */
.topbar .brand::after,
.topbar .search::before {
    content: "";
    position: absolute;
    top: 16px;
    width: 1px;
    height: 18px;
    background: #d7d7d7;
}

.topbar .brand::after { right: 0; }
.topbar .search::before { left: 0; }

.topbar .topic-select {
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.topbar .topic-select span {
    width: 9px;
    height: 9px;
    border-right: 2px solid;
    border-bottom: 2px solid;
    transform: rotate(45deg) translateY(-2px);
}

.topbar .search {
    position: relative;
    width: 60px;
    height: 100%;
    display: grid;
    place-items: center;
}

.topbar .search > img { display: block; width: 17px; height: 18px; object-fit: contain; }

/*
 * ⚠️ 높이는 --phone-visible-height 기준이다. .screen-scale 이 scale 대상이라
 * 미보정 뷰포트 높이를 쓰면 프레임 밖으로 잘린다 (파일 하단 경고 참조).
 */
.scroll-content {
    height: calc(var(--phone-visible-height, 740px) - 50px);
    padding-bottom: 72px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.scroll-content::-webkit-scrollbar { display: none; }


/* ── 하단 탭 기준 단위 ──────────────────────────────
 * 메인 화면과 마이페이지는 크기를 정하는 법칙이 서로 다르다.
 *   메인      : rem 기준. html font-size 가 창 너비에 따라 계단식으로 바뀐다 (mob.css)
 *   마이페이지 : 360px 캔버스를 창 너비 ÷ 360 배로 통째로 확대 (mypage_shell.js)
 * 그래서 같은 창에서 목업 쪽 탭바가 훨씬 커 보였다. 창 912px 기준으로
 * 메인은 1.6배(rem 16), 목업은 2.53배라 1.6배 차이가 났다.
 *
 * 탭바만 메인의 rem 을 따라가게 보정한다. 캔버스가 --phone-scale 배로
 * 확대되므로 그만큼 나눠 두면 화면에 찍히는 크기가 메인과 같아진다.
 * 메인 탭바를 rem 으로 환산한 값: 높이 6.2 / 좌우 4.2 / 상하 0.9 / 간격 0.5 /
 * 글자 1 / 행간 1.3 / 아이콘 2.6 rem.
 */
:root { --main-rem: 16px; }
@media (max-width: 1560px) { :root { --main-rem: 15.5px; } }
@media (max-width: 1440px) { :root { --main-rem: 15px; } }
@media (max-width: 1380px) { :root { --main-rem: 14.5px; } }
@media (max-width: 1200px) { :root { --main-rem: 14px; } }
@media (max-width: 1080px) { :root { --main-rem: 16px; } }
@media (max-width: 900px)  { :root { --main-rem: 14px; } }
@media (max-width: 700px)  { :root { --main-rem: 11.5px; } }
@media (max-width: 599px)  { :root { --main-rem: 11px; } }
@media (max-width: 480px)  { :root { --main-rem: 10px; } }

/* 넓은 화면(폰이 축소되어 놓이는 데스크톱 배치)에서는 메인에 탭바 자체가 없다.
   그때는 실제 폰에서의 값(rem 10px 기준)을 그대로 쓴다. */
:root { --tab-unit: 10px; }

@media (max-width: 1180px), (hover: none) and (pointer: coarse) {
    :root { --tab-unit: calc(var(--main-rem) / var(--phone-scale, 1)); }
}

/* ── 하단 탭 ──
 * 예전에는 상담사 페이지(counselor_v3.css 의 .bottom-tabs--asset) 값을 옮겨 썼다.
 * 그런데 고객이 오가는 곳은 상담사 화면이 아니라 메인 화면이라, 같은 폭에서
 * 메인보다 높고 아이콘도 커 보이는 문제가 있었다. 기준을 메인으로 바꾼다.
 * (상담사 화면은 .bottom-tabs--asset 로 별도이므로 영향받지 않는다)
 *
 * 메인 화면(.navigaion)의 하단 탭과 같은 치수로 맞춘다. 퍼블리싱 시안에서
 * 따로 잡은 값이라 같은 폭에서 메인보다 높고 아이콘도 컸다.
 *
 * 메인은 rem 기준이고 모바일(≤480px)에서 html font-size 가 10px 이 되므로,
 * 360px 캔버스에서의 실치수는 이렇다 (page/css/common.css + mob.css:2985):
 *   .nav          padding 0 4.2rem = 0 42px, space-between
 *   .nav > li     padding 0.9rem 0 = 9px 0
 *   .link         gap 0.5rem = 5px, font-size 1rem = 10px, line-height 1.3 = 13px
 *   .icon         width 2.6rem = 26px (1:1)
 * 높이 = 9 + 26 + 5 + 13 + 9 = 62px
 */
.bottom-tabs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    height: calc(var(--tab-unit) * 6.2);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    padding: 0 calc(var(--tab-unit) * 4.2);
    border-top: 0;
    background: #fff;
    box-shadow: 0 1px 19px 0 rgba(0, 0, 0, 0.13);
}

.bottom-tabs a {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--tab-unit) * 0.5);
    padding: calc(var(--tab-unit) * 0.9) 0;
    color: #535353;
    font-size: calc(var(--tab-unit) * 1);
    font-weight: 400;
    line-height: calc(var(--tab-unit) * 1.3);
    white-space: nowrap;
    text-decoration: none;
}

.bottom-tabs img {
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
    filter: none;
    opacity: 1;
}

/*
 * 메인은 26px 상자에 PNG 를 넣는데 그림마다 상자 안 여백이 달라, 실제로 보이는
 * 획 크기는 19.9~25.4px 로 제각각이다. 여기서는 SVG 를 쓰므로 상자를 맞추는
 * 대신 '보이는 획'을 메인 PNG 와 같게 맞춘다. 각 파일의 잉크 비율을 재서
 * 목표 잉크 크기 ÷ 잉크 비율 로 상자를 역산한 값이다.
 *   home 19.9x21.7 / content 22.3x25.6 / date 22.5x23.3
 *   star 25.4x24.1 / profile 21.7x22.3  (메인 PNG 잉크, 단위 px)
 */
.bottom-tabs img[src*="home.svg"]    { width: calc(var(--tab-unit) * 2.01); height: calc(var(--tab-unit) * 2.22); }
.bottom-tabs img[src*="content.svg"] { width: calc(var(--tab-unit) * 2.32); height: calc(var(--tab-unit) * 2.65); }
.bottom-tabs img[src*="date.svg"]    { width: calc(var(--tab-unit) * 2.27); height: calc(var(--tab-unit) * 2.4); }
.bottom-tabs img[src*="star.svg"]    { width: calc(var(--tab-unit) * 2.63); height: calc(var(--tab-unit) * 2.49); }
.bottom-tabs img[src*="profile.svg"] { width: calc(var(--tab-unit) * 2.25); height: calc(var(--tab-unit) * 2.25); }

.bottom-tabs .is-active { color: var(--red); }

.bottom-tabs .is-active img {
    filter: invert(20%) sepia(94%) saturate(2617%) hue-rotate(343deg) brightness(88%) contrast(101%);
    opacity: 1;
}

/* ── detail 변형 : 상단바 + 본문 ──────────────────── */

/*
 * 상단 바는 부가서비스(page/css/my_additional_service.css 의 .addon-topbar)를
 * 정본으로 삼는다. 구조·치수·색을 그대로 옮겨 왔다 —
 *   grid 48 / 1fr / 48, 높이 50, 제목 16px 700 가운데, 화살표 24 stroke 2.2,
 *   밑줄 1.5px #f0f0f0.
 * 예전에는 flex + 뒤로가기 절대 위치로 결과만 같게 맞춰 뒀다. 보이는 것이 같아도
 * 정의가 둘로 갈려 있으면 한쪽만 고쳐져 어긋난다. 실제로 그렇게 어긋난 적이 있다.
 * 고칠 일이 생기면 부가서비스를 먼저 고치고 이쪽을 따라 맞춘다.
 *
 * 두 가지만 다르고, 둘 다 셸의 사정이라 부가서비스에 맞출 수 없다.
 *   - position: sticky — 이 셸은 .app-screen 이 스크롤하므로 상단 바가 붙어 있어야
 *     한다. 부가서비스는 본문만 따로 스크롤해서 relative 로 충분하다.
 *   - flex: none — 세로 flex 인 화면(.review-write-screen)에서 상단 바가 flex
 *     아이템이 되는데, 본문이 화면보다 길어지면 flex-shrink 기본값(1)이 height 를
 *     이겨 50px 이 21px 로 눌렸다. 부가서비스는 부모가 flex 가 아니라 겪지 않는다.
 */
.detail-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    flex: none;
    width: 360px;
    height: 50px;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    background: #fff;
    border-bottom: 1.5px solid #f0f0f0;
}

.detail-topbar h1 {
    grid-column: 2;
    margin: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.back {
    grid-column: 1;
    width: 48px;
    height: 50px;
    display: grid;
    place-items: center;
    color: var(--ink);
}

.back svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.content { width: 360px; padding: 22px 20px 32px; }

/* ── 좁은 화면 / 터치 기기 ────────────────────────── */

/*
 * 원본과 동일한 경계: 1180px 이하 또는 hover 불가 + 거친 포인터(터치).
 * 프로모션 패널을 숨기고 폰 화면이 뷰포트를 채운다.
 */
@media (max-width: 1180px), (hover: none) and (pointer: coarse) {
    html, body,
    .page,
    .desktop-shell,
    .phone-stage,
    .phone-frame {
        width: 100vw;
        min-width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        margin: 0;
    }

    .desktop-shell,
    .phone-stage {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .promo-panel { display: none; }
    .phone-frame { box-shadow: none; }

    .screen-scale {
        top: 0;
        left: 50%;
        transform: translateX(-50%) scale(var(--phone-scale));
        transform-origin: top center;
    }
}

/*
 * WebView 높이 0 보정.
 * 위 100dvh 선언보다 뒤에 와야 우선한다. mypage_shell.js 가 --app-viewport-height 를
 * 주입하지 못한 경우에도 100vh 로 안전하게 떨어진다.
 */
@media (max-width: 1180px), (hover: none) and (pointer: coarse) {
    html, body,
    .page,
    .desktop-shell,
    .phone-stage,
    .phone-frame {
        height: 100vh;
        height: var(--app-viewport-height, 100vh);
        min-height: 100vh;
        min-height: var(--app-viewport-height, 100vh);
    }

    /*
     * ⚠️ .screen-scale 은 transform: scale(--phone-scale) 대상이다.
     * 여기에 미보정 뷰포트 높이(--app-viewport-height)를 넣으면 렌더 높이가
     * scale 배로 부풀어 overflow:hidden 인 .phone-frame 밖으로 잘려나간다
     * (480px 폭에서 약 25% 클리핑 -> 하단 페이지네이션 도달 불가).
     * 스케일 대상에는 반드시 scale 로 나눈 --phone-visible-height 를 쓴다.
     * mypage_shell.js:91 이 size.height / scale 로 그 값을 계산한다.
     * 같은 패턴: page/css/fan_membership_detail.css:2314-2326
     */
    .screen-scale,
    .app-screen {
        height: var(--phone-visible-height, 740px);
        min-height: var(--phone-visible-height, 740px);
    }
}

/* ── 페이지네이션 (상담사 페이지 기준) ──────────────── */

/*
 * 기준: page/css/counselor_v3.css:9523-9584
 * 신규 3화면이 각기 다른 접두사(message- / detail- / addon-)를 쓰고 값도
 * 조금씩 달랐다. 여기서 세 접두사를 모두 받아 한 규격으로 맞춘다.
 * 화면별 CSS 에 남아 있던 개별 규칙보다 뒤에 로드되지 않으므로,
 * 화면별 CSS 에서 해당 규칙을 제거하는 것과 함께 적용해야 한다.
 */
.detail-pagination,
.message-pagination,
.addon-pagination {
    width: 320px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
    color: #555;
}

.detail-pagination button,
.message-pagination button,
.addon-pagination button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #555;
    font-family: Pretendard, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

/* 첫/마지막 페이지에서 화살표를 흐리게 해 눌리지 않는 상태를 드러낸다. */
.detail-pagination button:disabled,
.message-pagination button:disabled,
.addon-pagination button:disabled {
    cursor: default;
    opacity: .42;
}

.detail-page-total, .detail-page-divider,
.message-page-total, .message-page-divider,
.page-total, .page-divider {
    color: #999;
    font-family: Pretendard, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

/*
 * font 계열까지 !important 를 붙인다. `.detail-pagination button` 이 타입
 * 셀렉터를 포함해 특이도가 더 높아서, 그냥 두면 화살표용 600 이 현재
 * 페이지의 700 을 눌러버린다. (상담사 CSS 의 동일 주석 참조)
 */
.detail-page-current,
.message-page-current,
.page-current {
    border-radius: 7px !important;
    background: #f3f3f3 !important;
    color: #313131 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.detail-page-arrow svg,
.message-page-arrow svg,
.page-arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}