/* ============================================================
   GPay 디자인 토큰 (design system v1) — 루피 제안 2026-07-24
   전 화면 공통. 하드코딩 hex·로컬 font-family 금지, 이 토큰만 사용.
   연결: <link rel="stylesheet" href="gpay-tokens.css"> (경로는 노트북 계약 확정)
   ============================================================ */

:root {
    /* ---- 색: 브랜드/역할 (화면마다 다른 색 금지, 역할로 통일) ---- */
    --c-primary:        #2979ff;   /* 지페 기본 파랑 (기존 #2c7be5/#1f6feb/#3b82f6 통일) */
    --c-primary-press:  #1f60e0;
    --c-primary-weak:   #eaf1ff;   /* 옅은 파랑 배경 */
    --c-success:        #16a34a;   /* 완료/영업중/승인 (오직 이 역할) */
    --c-danger:         #ef4444;   /* 취소/삭제/경고 */
    --c-warn:           #f59e0b;   /* 별점·주의 */
    /* 섹션 액센트(전체 재도색 대신 포인트만) */
    --c-food:           #f97316;   /* 음식/메뉴 */
    --c-shop:           #ff6a00;   /* 쇼핑몰 */
    --c-order:          #8b5cf6;   /* 주문/클레임 */

    /* ---- 뉴트럴 (7가지 회색 → 통일). 배경을 살짝 진하게 + 카드 흰색 + 그림자로 '떠보이게'(bg에 안 묻힘) ---- */
    --bg:               #eef1f7;   /* 페이지 배경 (카드와 대비 확보) */
    --surface:          #ffffff;   /* 카드/시트 */
    --surface-2:        #f5f7fb;   /* 옅은 박스 */
    --text:             #111827;   /* 본문/제목 */
    --text-sub:         #6b7280;   /* 보조 */
    --text-mute:        #9ca3af;   /* 흐린 */
    --border:           #e5e8f0;   /* 카드 테두리/구분선 (보이게) */
    --border-input:     #d3dae6;   /* 입력 테두리 */

    /* ---- 반경 (12/14/16/18 혼재 → 통일) ---- */
    --r-btn:   12px;
    --r-card:  16px;
    --r-input: 10px;
    --r-pill:  999px;

    /* ---- 간격 (8 단위) ---- */
    --sp-1: 8px;  --sp-2: 12px;  --sp-3: 16px;  --sp-4: 24px;  --sp-5: 32px;
    --pad-page: 16px;

    /* ---- 그림자 (더 또렷하게 — 카드가 배경 위로 떠보이게) ---- */
    --sh-card: 0 2px 4px rgba(17,24,39,.04), 0 6px 16px rgba(17,24,39,.10);
    --sh-pop:  0 8px 24px rgba(17,24,39,.16);

    /* ---- 타이포 (5가지 스택 → 1개. Pretendard woff2 번들 후 활성) ---- */
    --font: "Pretendard", "Noto Sans KR", -apple-system, "Malgun Gothic", sans-serif;
    --fs-title: 20px;  --fs-head: 17px;  --fs-body: 15px;  --fs-sub: 13px;  --fs-cap: 12px;
    --fw-reg: 400;  --fw-med: 600;  --fw-bold: 800;

    /* 하단 시스템 안전영역(safe-area) — 고정 하단요소 공통 */
    --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Pretendard 로컬 번들 (인터넷 불필요, webroot/fonts/ 에 woff2 배치 후 주석 해제)
@font-face {
    font-family: "Pretendard";
    src: url("fonts/Pretendard-Regular.woff2") format("woff2");
    font-weight: 400; font-display: swap;
}
@font-face { font-family:"Pretendard"; src:url("fonts/Pretendard-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Pretendard"; src:url("fonts/Pretendard-Bold.woff2") format("woff2"); font-weight:800; font-display:swap; }
*/

/* ---- 리셋/베이스 ---- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.5;
    /* [잘림방지 공통 · 사장님 표준] 한글 단어는 통째 유지(keep-all) + 길어 넘칠 때만 어디서든 줄바꿈(anywhere)
       = 폰/태블릿/PC/POS 어디서도 글씨 잘림·overflow 방지. 3앱(회원/가맹점/사업부) 공통 자동적용.
       (노트북 canonical 승인 2026-07-26, 루피 제안) — 버튼 등 명시적 white-space:nowrap 요소엔 무영향 */
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* ---- 공통 앱바 (헤더 4종 → 1개: 흰 sticky + 원형 back + 중앙 제목) ----
 * [수정 07-27 · SHAKH님 지적] 제목이 화면마다 좌우로 어긋나던 문제:
 * 기존은 flex + margin-right:40px 로 back 버튼 폭을 "보정"하는 방식이라
 *  · 우측 액션 버튼이 있는 화면 → 제목이 왼쪽으로 밀림
 *  · back 이 없는 화면 / margin-right 를 0 으로 덮어쓴 화면 → 오른쪽으로 밀림
 * → **3열 그리드(44px | 1fr | 44px)** 로 변경해 제목을 항상 정중앙 열에 고정한다.
 *   좌우 슬롯이 비어도 폭이 유지되므로 모든 화면에서 제목 위치가 동일하다.
 *   제목이 길면 줄바꿈되도록 height→min-height (잘림 방지 표준 유지). */
.gp-appbar {
    position: sticky; top: 0; z-index: 20;
    min-height: 54px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    padding: 0 8px; background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.gp-appbar .gp-back {
    grid-column: 1; justify-self: start;
    width: 40px; height: 40px; border: none; background: none;
    border-radius: var(--r-pill); font-size: 22px; color: var(--text);
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}
.gp-appbar .gp-back:active { background: var(--surface-2); }
.gp-appbar .gp-title {
    grid-column: 2;
    text-align: center;
    font-size: var(--fs-head); font-weight: var(--fw-bold);
    margin: 0; padding: 6px 0;
    min-width: 0;
}
/* 우측 액션(있는 화면만) — 3열에 정렬. 여러 개면 .gp-act 로 묶어도 됨 */
.gp-appbar > *:not(.gp-back):not(.gp-title) { grid-column: 3; justify-self: end; }
.gp-appbar .gp-act { display: flex; align-items: center; gap: 4px; }

/* ---- 공통 카드 ---- */
.gp-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
}

/* ---- 공통 버튼 (제각각 hex 버튼 → .gp-btn + 변형) ---- */
.gp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 48px; border: none;
    border-radius: var(--r-btn);
    font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-bold);
    color: #fff; background: var(--c-primary); cursor: pointer;
    white-space: nowrap;   /* 버튼 글자 줄바꿈 금지 (우편번호 찾기 등 2줄로 깨지던 것 방지) */
    transition: background .15s ease, transform .06s ease;
}
.gp-btn:active { transform: scale(.985); }
.gp-btn:disabled { opacity: .45; }
.gp-btn--primary { background: var(--c-primary); }
.gp-btn--primary:active { background: var(--c-primary-press); }
.gp-btn--ghost { background: var(--surface); color: var(--c-primary); border: 1.5px solid var(--c-primary); }
.gp-btn--sub  { background: var(--surface-2); color: var(--text-sub); border: 1px solid var(--border-input); }
.gp-btn--danger { background: var(--c-danger); }
.gp-btn--food  { background: var(--c-food); }
.gp-btn--shop  { background: var(--c-shop); }

/* ---- 하단 고정 액션바 (safe-area 자동 반영) ---- */
.gp-bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 12px var(--pad-page) calc(12px + var(--safe-b));
}

/* ---- 입력 ---- */
.gp-input {
    width: 100%; height: 46px;
    border: 1px solid var(--border-input); border-radius: var(--r-input);
    padding: 0 12px; font-size: var(--fs-body); font-family: var(--font);
    background: var(--surface); color: var(--text);
}
.gp-input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-weak); }

/* ---- 배지 ---- */
.gp-badge { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-cap); font-weight: var(--fw-bold); }
.gp-badge--success { background: #e7f6ed; color: var(--c-success); }
.gp-badge--danger  { background: #fdecec; color: var(--c-danger); }
.gp-badge--primary { background: var(--c-primary-weak); color: var(--c-primary); }