@charset "utf-8";

/* ============================================================
   수기결제 페이지 테마 토큰
   클라이언트별로 아래 :root 값만 바꾸면 전체 색상이 따라옵니다.
   현재 테마: 라이트(화이트) + 가지몰 브랜드 보라/하늘
   ------------------------------------------------------------
   색값 출처 = img/logo.gif 에서 추출
     보라 #725381 (워드마크) / 하늘 #00A5E7 (별)
     레드 #B02029, 차콜 #191919 는 심볼 전용이라 UI 에 미사용
   ------------------------------------------------------------
   ★ 하늘색 #00A5E7 은 흰 배경 대비 2.79:1 이라 글자로 쓰면 안 됨.
     텍스트·아이콘에는 --pay-accent-2-ink (#0577A5, 5.01:1) 사용.
   ============================================================ */
:root {
    /* 바탕 / 카드 */
    --pay-bg:            #f4f5f8;  /* 페이지 배경 */
    --pay-card-bg:       #ffffff;  /* 카드 배경 */
    --pay-border:        #e3e6ec;  /* 카드/구분선 테두리 */

    /* 포인트 1 — 보라 (주) : 버튼·금액·강조 */
    --pay-accent:        #725381;  /* 흰 글자 대비 6.42:1 */
    --pay-accent-ink:    #ffffff;  /* 포인트 버튼 위 글자색 */
    --pay-accent-hover:  #5e4269;  /* 버튼 hover */
    --pay-accent-soft:   #f4eff7;  /* 연보라 틴트 (아이콘 원형 배경) */

    /* 포인트 2 — 하늘 (보조) : 장식·포커스 */
    --pay-accent-2:        #00a5e7;  /* 원색. 그라데이션·장식 전용 */
    --pay-accent-2-ink:    #0577a5;  /* 텍스트/아이콘용 (5.01:1) */
    --pay-accent-2-border: #0090c9;  /* 포커스 링 (3.60:1) */

    /* 안내 박스 — 하늘 틴트 */
    --pay-notice-bg:     #eff8fd;
    --pay-notice-border: #cde9f7;

    /* 입력창 */
    --pay-input-bg:      #ffffff;
    --pay-input-border:  #d6dae1;

    /* 글자 단계 (진함 → 연함) */
    --pay-text:          #1f2530;  /* 제목·입력값 */
    --pay-text-strong:   #333b45;  /* 확인 리스트 값 */
    --pay-text-label:    #4a505a;  /* 폼 라벨 */
    --pay-text-muted:    #5a616b;  /* 안내 문구 */
    --pay-text-dim:      #6b717b;  /* 보조 라벨 (4.91:1) */
    --pay-text-faint:    #8b919b;  /* 약한 보조 */
    --pay-text-faintest: #949ba6;  /* placeholder */
    --pay-footer-text:   #6f757f;  /* 푸터 (배경 대비 4.26:1) */

    /* 그림자 */
    --pay-shadow: 0 1px 3px rgba(31,37,48,.06), 0 8px 24px rgba(31,37,48,.07);

    /* 서체 */
    --pay-font: 'Inter', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

* { margin: 0; box-sizing: border-box; }

body {
    background: var(--pay-bg) !important;
    color: var(--pay-text);
    font-family: var(--pay-font);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* 전체 래퍼 */
.pay-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px 60px;
    min-height: 100vh;
}

/* 카드 — 상단 3px 은 보라→하늘 그라데이션 */
.pay-card {
    position: relative;
    background: var(--pay-card-bg);
    border: 1px solid var(--pay-border);
    border-radius: 16px;
    box-shadow: var(--pay-shadow);
    padding: 36px 28px 28px;
    width: 100%;
    max-width: 480px;
    overflow: hidden;
}
.pay-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pay-accent) 0%, var(--pay-accent-2) 100%);
}

/* 상단 헤더 */
.pay-header { text-align: center; margin-bottom: 24px; }

/* 거래처 로고 (img/logo.gif — 308x124) */
.pay-logo {
    display: block;
    width: auto;
    max-width: 170px;
    height: auto;
    margin: 0 auto 18px;
}

/* 로고 대신 아이콘 원형을 쓸 경우 (현재 미사용) */
.pay-icon-wrap {
    width: 64px; height: 64px;
    background: var(--pay-accent-soft);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.pay-icon-wrap i { font-size: 26px; color: var(--pay-accent); }

.pay-title { font-size: 22px; font-weight: 700; color: var(--pay-text); margin-bottom: 6px; letter-spacing: -.2px; }
.pay-subtitle { font-size: 14px; color: var(--pay-text-dim); }

/* 안내 박스 */
.pay-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--pay-notice-bg);
    border: 1px solid var(--pay-notice-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--pay-text-muted);
    line-height: 1.6;
}
.pay-notice i { color: var(--pay-accent-2-ink); margin-top: 2px; flex-shrink: 0; }

/* 필드 그룹 (index.php) */
.field-group { margin-bottom: 16px; }
.field-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pay-text-label);
    margin-bottom: 7px;
}
.label-opt { font-weight: 400; color: var(--pay-text-dim); font-size: 12px; }

/* 2컬럼 */
.field-row { display: flex; gap: 12px; }
.field-row .field-group { flex: 1; }

/* 인풋 */
.form-control {
    width: 100%;
    padding: 13px 14px;
    background: var(--pay-input-bg);
    border: 1px solid var(--pay-input-border);
    border-radius: 10px;
    color: var(--pay-text);
    font-size: 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    font-family: var(--pay-font);
}
.form-control:focus {
    border-color: var(--pay-accent-2-border);
    box-shadow: 0 0 0 3px rgba(0,165,231,.15);
}
.form-control::placeholder { color: var(--pay-text-faintest); }

/* 금액 suffix */
.input-suffix-wrap { position: relative; }
.input-suffix-wrap .form-control { padding-right: 76px; }
.input-suffix {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--pay-text-dim);
    pointer-events: none;
}

/* 결제 확인 리스트 (pay.php) */
.confirm-list {
    margin-bottom: 24px;
    border: 1px solid var(--pay-border);
    border-radius: 10px;
    overflow: hidden;
}
.confirm-row {
    display: flex;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--pay-border);
}
.confirm-row:last-child { border-bottom: none; }
.confirm-label {
    width: 90px;
    font-size: 13px;
    color: var(--pay-text-dim);
    flex-shrink: 0;
}
.confirm-value {
    font-size: 14px;
    color: var(--pay-text-strong);
    flex: 1;
}
.confirm-value.amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--pay-accent);
}
.confirm-value.amount small {
    font-size: 12px;
    color: var(--pay-text-dim);
    font-weight: 400;
    margin-left: 4px;
}

/* 결제 버튼 (index.php — button) */
.btn-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 15px;
    margin-top: 8px;
    background: var(--pay-accent);
    color: var(--pay-accent-ink);
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s;
    font-family: var(--pay-font);
    text-decoration: none;
}
.btn-pay:hover { background: var(--pay-accent-hover); color: var(--pay-accent-ink); }
.btn-pay i { font-size: 14px; }

/* 버튼 그룹 (pay.php 확인 페이지) */
.btn-group {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.btn-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 15px;
    background: transparent;
    border: 1px solid var(--pay-input-border);
    border-radius: 10px;
    color: var(--pay-text-muted);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s, color .2s;
    font-family: var(--pay-font);
}
.btn-back:hover { border-color: var(--pay-text-dim); color: var(--pay-text); }
.btn-group .btn-pay { width: auto; margin-top: 0; }

/* SSL 텍스트 */
.pay-ssl {
    text-align: center;
    margin-top: 14px;
    font-size: 12px;
    color: var(--pay-text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.pay-ssl i { color: var(--pay-accent-2-ink); }

/* 카드 하단 푸터 */
.pay-footer {
    margin-top: 18px;
    text-align: center;
    width: 100%;
    max-width: 480px;
}
.pay-footer-copy {
    font-size: 12px;
    color: var(--pay-footer-text);
}
.pay-footer-powered {
    margin-top: 5px;
    font-size: 11px;
    color: var(--pay-footer-text);
}
.pay-footer-powered a {
    color: var(--pay-accent);
    text-decoration: none;
    font-weight: 600;
}
.pay-footer-powered a:hover { text-decoration: underline; }

/* 모바일 */
@media (max-width: 520px) {
    .pay-wrapper { padding: 24px 12px 40px; }
    .pay-card { padding: 28px 18px 22px; }
    .field-row { flex-direction: column; gap: 0; }
    .pay-title { font-size: 19px; }
    .pay-logo { max-width: 140px; margin-bottom: 14px; }
}