/*
 * www.mypayper.com 공통 (PC·모바일 반응형, 기준 폭 768px · 1024px)
 * 대표색은 앱(public_app-mypayper custom.css)과 같은 값
 */
:root {
    --payper-main-active-color: #111827;
    --payper-main-active-color-rgb: 17, 24, 39;
    --payper-main-inactive-color: #e5e7eb;
    --payper-main-accent-color: #496cdb;
    --payper-main-accent-color-rgb: 73, 108, 219;
    --payper-sub-text-color: #4b5563;
    --site-border-color: #e5e7eb;
    --site-soft-background: #f6f7f9;
    --site-max-width: 1120px;
    --site-side-padding: 20px;
    --site-header-height: 64px;
    --site-dark-background: #0b0f19;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--payper-main-active-color);
    background: #fff;
    word-break: keep-all;
    overflow-wrap: break-word;
}

a {
    color: inherit;
}

img, svg {
    display: block;
    max-width: 100%;
}

h1, h2, h3, p {
    margin: 0;
}

.site-container {
    width: 100%;
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 var(--site-side-padding);
}

.site-main {
    min-height: calc(100vh - var(--site-header-height) - 160px);
}

/* 머리글: 기본은 흰 배경. 첫 화면(.is-home)은 어두운 히어로 위에 투명, 내리면(.is-scrolled, site.js) 흰 배경 */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--site-border-color);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    transition: background-color 0.25s, border-color 0.25s;
}

.is-home .site-header {
    position: fixed;
    left: 0;
    right: 0;
}

.is-home .site-header:not(.is-scrolled) {
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--site-header-height);
}

.site-logo img {
    width: auto;
    height: 22px;
    transition: filter 0.25s;
}

.is-home .site-header:not(.is-scrolled) .site-logo img {
    filter: invert(1);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 메뉴 글자·언어 버튼은 넓은 화면에서만 (휴대폰은 처음 시작하기 + 메뉴 버튼 .site-menu) */
.site-nav-link {
    display: none;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    color: var(--payper-sub-text-color);
}

.site-nav-link:hover,
.site-nav-link[aria-current="page"] {
    color: var(--payper-main-active-color);
}

.site-nav-link[aria-current="page"] {
    font-weight: 700;
}

.is-home .site-header:not(.is-scrolled) .site-nav-link {
    color: rgba(255, 255, 255, 0.78);
}

.is-home .site-header:not(.is-scrolled) .site-nav-link:hover {
    color: #fff;
}

/* 머리글 언어 선택 (details): 약자 + 작은 꺾쇠, 펼치면 오른쪽 아래 목록 */
.site-lang {
    display: none;
    position: relative;
}

/* 언어 버튼: 테두리 있는 둥근 버튼(지구 모양 + 약자 + 꺾쇠). 처음 시작하기(채운 버튼)보다 한 단계 약하게 */
.site-lang summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 18px;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--payper-main-active-color);
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s, background-color 0.2s;
}

.site-lang summary::-webkit-details-marker {
    display: none;
}

.site-lang summary svg {
    width: 15px;
    height: 15px;
}

.site-lang summary::after {
    content: "";
    width: 5px;
    height: 5px;
    margin: -3px 0 0 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.site-lang[open] summary::after {
    margin-top: 3px;
    transform: rotate(-135deg);
}

.site-lang summary:hover,
.site-lang[open] summary {
    border-color: var(--payper-main-active-color);
}

/* 첫 화면 어두운 히어로 위(투명 머리글): 흰 테두리·글자 */
.is-home .site-header:not(.is-scrolled) .site-lang summary {
    border-color: rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #fff;
}

.is-home .site-header:not(.is-scrolled) .site-lang summary:hover,
.is-home .site-header:not(.is-scrolled) .site-lang[open] summary {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.site-lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 148px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--site-border-color);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(var(--payper-main-active-color-rgb), 0.12);
}

.site-lang-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 15px;
    color: var(--payper-main-active-color);
    text-decoration: none;
}

.site-lang-menu a:hover {
    background: var(--site-soft-background);
}

.site-lang-menu a[aria-current] {
    font-weight: 700;
}

.site-nav-start {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border-radius: 19px;
    background: var(--payper-main-active-color);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.is-home .site-header:not(.is-scrolled) .site-nav-start {
    background: #fff;
    color: var(--payper-main-active-color);
}

/*
 * 휴대폰 메뉴 (768px 미만): 가는 줄 두 개 → 펼치면 ✕, 머리글 바로 아래에 흰 판
 * 판: 큰 글자 메뉴 3개(사이 가는 선) + 아래 언어 목록
 */
.site-menu summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    padding: 0 9px;
    list-style: none;
    cursor: pointer;
    color: var(--payper-main-active-color);
}

.site-menu summary::-webkit-details-marker {
    display: none;
}

.site-menu summary i {
    display: block;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s;
}

.site-menu[open] summary i:first-child {
    transform: translateY(3.75px) rotate(45deg);
}

.site-menu[open] summary i:last-child {
    transform: translateY(-3.75px) rotate(-45deg);
}

.is-home .site-header:not(.is-scrolled) .site-menu:not([open]) summary {
    color: #fff;
}

/* 메뉴가 열리면 첫 화면의 투명 머리글도 흰 배경으로 (판과 이어지게) */
.is-home .site-header:has(.site-menu[open]) {
    background: #fff;
    border-bottom-color: var(--site-border-color);
}

.is-home .site-header:has(.site-menu[open]) .site-logo img {
    filter: none;
}

.is-home .site-header:has(.site-menu[open]) .site-nav-start {
    background: var(--payper-main-active-color);
    color: #fff;
}

.site-menu-panel {
    position: fixed;
    top: var(--site-header-height);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--site-header-height));
    overflow-y: auto;
    padding: 8px var(--site-side-padding) calc(24px + env(safe-area-inset-bottom));
    border-bottom: 1px solid var(--site-border-color);
    background: #fff;
    box-shadow: 0 24px 40px rgba(var(--payper-main-active-color-rgb), 0.08);
}

.site-menu-panel > a {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--site-border-color);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--payper-main-active-color);
    text-decoration: none;
}

.site-menu-panel > a[aria-current] {
    color: var(--payper-main-accent-color);
}

.site-menu-languages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-top: 20px;
    font-size: 14px;
}

.site-menu-languages a {
    color: var(--payper-sub-text-color);
    text-decoration: none;
}

.site-menu-languages a[aria-current] {
    font-weight: 700;
    color: var(--payper-main-active-color);
}

/* 버튼 */
.site-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 12px;
    background: var(--payper-main-active-color);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

/* 스토어 버튼 (_Template/_global/store-buttons.php) */
.store-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.store-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 168px;
    height: 56px;
    padding: 0 18px;
    border-radius: 12px;
    background: var(--payper-main-active-color);
    color: #fff;
    text-decoration: none;
}

.store-button svg {
    flex: none;
    width: 26px;
    height: 26px;
}

.store-button-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.store-button-text small {
    font-size: 11px;
    opacity: 0.85;
}

.store-button-text strong {
    font-size: 17px;
    font-weight: 600;
}

.store-button.is-disabled {
    background: var(--payper-main-inactive-color);
    color: var(--payper-sub-text-color);
    cursor: default;
}

.store-button.is-disabled .store-button-text small {
    opacity: 1;
}

/* 휴대폰(560px 미만): 두 버튼을 한 줄에 반씩 (위아래로 쌓지 않게) — 아이콘·글자를 조금 줄임 */
@media (max-width: 559.98px) {
    .store-buttons {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .store-button {
        flex: 1 1 0;
        min-width: 0;
        height: 52px;
        gap: 8px;
        padding: 0 12px;
    }

    .store-button svg {
        width: 22px;
        height: 22px;
    }

    .store-button-text {
        min-width: 0;
    }

    .store-button-text small,
    .store-button-text strong {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .store-button-text small {
        font-size: 10px;
    }

    .store-button-text strong {
        font-size: 15px;
    }
}

/* 금액: 동전 아이콘 + 숫자 (Libs\PointUtil::html, 앱 custom.css 의 .payper-coin 과 같음) */
.payper-point {
    display: inline-flex;
    align-items: center;
    gap: 0.22em;
    white-space: nowrap;
}

.payper-coin {
    flex: none;
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    border-radius: 50%;
    background: var(--payper-main-active-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M8.1 6.5h4.2a3.6 3.6 0 0 1 0 7.2h-2.2v3.8h-2zM10.1 8.4v3.4h2.2a1.7 1.7 0 0 0 0-3.4z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    font-style: normal;
}

/* 화면에 들어오면 아래에서 떠오르기 (.js--reveal → .is-visible, site.js). JS 가 없거나 움직임 줄이기 설정이면 그냥 보임 */
@media (prefers-reduced-motion: no-preference) {
    .has-js .js--reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .has-js .js--reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* 안내 화면 (404 등) */
.site-message {
    padding: 96px var(--site-side-padding);
    text-align: center;
}

.site-message h1 {
    font-size: 24px;
}

.site-message p {
    margin: 8px 0 24px;
    color: var(--payper-sub-text-color);
}

/* 바닥글 */
.site-footer {
    padding: 32px 0 calc(32px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--site-border-color);
    background: var(--site-soft-background);
    font-size: 13px;
    color: var(--payper-sub-text-color);
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 12px;
}

.site-footer-links a {
    color: var(--payper-main-active-color);
    text-decoration: none;
}

.site-footer-languages {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--site-border-color);
}

.site-footer-languages a {
    color: var(--payper-sub-text-color);
    text-decoration: none;
}

.site-footer-languages a:hover,
.site-footer-languages a[aria-current] {
    color: var(--payper-main-active-color);
}

.site-footer-languages a[aria-current] {
    font-weight: 700;
}

.site-footer-company a {
    text-decoration: none;
}

.site-footer-copyright {
    margin-top: 4px;
}

/* 약관이 한국어로만 있다는 안내 (_global/policy-language-notice.php) */
.policy-language-notice {
    margin: 12px 0 20px;
    padding-left: 12px;
    border-left: 2px solid var(--payper-main-accent-color);
    font-size: 14px;
    line-height: 1.6;
    color: var(--payper-sub-text-color);
}

/* 약관 본문 (application/v2/_Common/Policy/*.php, 앱 custom.css 의 .payper-policy 와 같은 모양) */
.payper-policy {
    font-size: 15px;
    line-height: 1.75;
    color: #374151;
}

.payper-policy h6 {
    margin: 28px 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--payper-main-active-color);
}

.payper-policy p,
.payper-policy ol {
    margin: 0 0 10px;
}

.payper-policy ol {
    padding-left: 22px;
}

.payper-policy table {
    width: 100%;
    margin: 0 0 10px;
    border-collapse: collapse;
    font-size: 14px;
}

.payper-policy th,
.payper-policy td {
    padding: 8px 10px;
    border: 1px solid var(--site-border-color);
    vertical-align: top;
    text-align: left;
}

.payper-policy th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.payper-policy a {
    color: var(--payper-main-accent-color);
}

.payper-policy-meta {
    margin-top: 28px !important;
    padding-top: 16px;
    border-top: 1px solid var(--site-border-color);
    font-size: 13px;
    color: var(--payper-sub-text-color);
}

@media (min-width: 768px) {
    :root {
        --site-side-padding: 32px;
        --site-header-height: 72px;
    }

    .site-logo img {
        height: 26px;
    }

    .site-nav-link {
        display: inline;
    }

    .site-lang {
        display: block;
    }

    .site-menu {
        display: none;
    }

    .site-nav {
        gap: 28px;
    }
}