/* =============================================
   Google Play × SteelSeries — style.css v2
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;900&display=swap');

/* ── Variables ── */
:root {
  --orange:       #f04e23;
  --orange-hover: #d9421a;
  --orange-light: #fff4f1;
  --green:        #1a9e5c;
  --green-light:  #eaf7f0;
  --blue-15:      #1a73e8;   /* 플래티넘 */
  --purple-20:    #7b2ff7;   /* 다이아몬드 */
  --red-25:       #f04e23;   /* 다이아몬드 VIP */
  --gray-50:  #f9f9f9;
  --gray-100: #f2f2f2;
  --gray-200: #e4e4e4;
  --gray-300: #cccccc;
  --gray-400: #999999;
  --gray-600: #555555;
  --gray-800: #1a1a1a;
  --white:    #ffffff;
  --black:    #0d0d0d;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif; background: var(--white); color: var(--gray-800); }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
input { font-family: inherit; outline: none; }
ul, ol { list-style: none; }

/* ── Layout ── */
.page-wrapper { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* ── NAVBAR ── */
.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky; top: 0; z-index: 200;
}
.navbar-inner {
  max-width: 1320px; margin: 0 auto;
  height: 58px; display: flex; align-items: center;
  padding: 0 32px; gap: 0;
}
.navbar-brand {
  display: flex; align-items: center; gap: 8px;
  margin-right: auto;
}
.navbar-logo-link { display: flex; align-items: center; }
.navbar-logo { display: none; height: 26px; width: auto; }
/* 기본(밝은 배경) 상태에서는 검은색 로고 표시 — 어두운 배경(.navbar-dark)일 때는 header.php에서 흰색 로고로 전환 */
.navbar-logo-white { display: block; }

.navbar-links { display: flex; align-items: center; }
.navbar-links li a {
  display: block; padding: 0 20px; height: 58px; line-height: 58px;
  font-size: 14px; font-weight: 500; color: var(--gray-600);
  position: relative; transition: color .15s;
}
.navbar-links li a:hover { color: var(--gray-800); }
.navbar-links li a.active {
  color: var(--gray-800); font-weight: 700;
}
.navbar-links li a.active::after {
  content: ''; position: absolute; bottom: 0; left: 20px; right: 20px;
  height: 2px; background: var(--orange);
}
.navbar-icons { display: flex; gap: 2px; margin-left: 16px; }
.navbar-icons button {
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; color: var(--gray-600); font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.navbar-icons button:hover { background: var(--gray-100); }
.cart-badge {
  position: absolute; top: 0; right: 0;
  min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 8px; background: var(--orange); color: var(--white);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  pointer-events: none;
}

/* ── Tier Badges ── */
.tier { display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; font-size: 11px; font-weight: 700;
  color: var(--white); padding: 2px 6px; white-space: nowrap; }
.tier-15 { background: var(--blue-15); }
.tier-20 { background: var(--purple-20); }
.tier-25 { background: var(--red-25); }

/* ── Price colors ── */
.price-blue   { color: var(--blue-15);   font-weight: 700; }
.price-purple { color: var(--purple-20); font-weight: 700; }
.price-red    { color: var(--red-25);    font-weight: 700; }
.price-orange { color: var(--orange);    font-weight: 700; }
.price-gray   { color: var(--gray-400); text-decoration: line-through; font-size: 13px; }
.price-green  { color: var(--green);     font-weight: 700; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 24px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700; transition: all .15s; cursor: pointer;
}
.btn-orange  { background: var(--orange); color: var(--white); border: none; }
.btn-orange:hover { background: var(--orange-hover); }
.btn-outline { background: var(--white); color: var(--gray-800); border: 1.5px solid var(--gray-800); }
.btn-outline:hover { background: var(--gray-50); }
.btn-outline-orange { background: var(--white); color: var(--orange); border: 1.5px solid var(--orange); }
.btn-outline-orange:hover { background: var(--orange-light); }
.btn-full { width: 100%; }

/* ── Form ── */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-600); margin-bottom: 6px; }
.form-input {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--gray-800); transition: border-color .15s;
}
.form-input:focus { border-color: var(--orange); }

/* ── Card ── */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

/* ── Divider ── */
.divider { height: 1px; background: var(--gray-200); margin: 20px 0; }

/* ── Google Play SVG ── */
.gp-svg { width: 26px; height: 26px; flex-shrink: 0; }

/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */
.site-footer {
  margin-top: 64px;
  background: #f8f8f8;
  border-top: 1px solid var(--gray-200);
}

/* Top links bar */
.footer-top {
  border-bottom: 1px solid var(--gray-200);
}
.footer-top-inner {
  max-width: 1320px; margin: 0 auto; padding: 16px 32px;
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
}
.footer-top-inner a {
  font-size: 13px; font-weight: 600; color: var(--gray-800);
  padding: 4px 16px; border-right: 1px solid var(--gray-300);
  transition: color .15s;
}
.footer-top-inner a:first-child { padding-left: 0; }
.footer-top-inner a:last-child  { border-right: none; }
.footer-top-inner a:hover { color: var(--orange); }
.footer-top-inner a.highlight { color: var(--orange); }

/* Main info area */
.footer-main {
  max-width: 1320px; margin: 0 auto; padding: 32px 32px 28px;
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: start;
}

/* Company info */
.footer-brand {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.footer-brand-name { font-size: 14px; font-weight: 700; color: var(--gray-800); }

.footer-info-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.footer-info-row  { display: flex; flex-wrap: wrap; gap: 0; font-size: 12px; color: var(--gray-400); line-height: 1.6; }
.footer-info-row .fi-item { display: flex; align-items: center; }
.footer-info-row .fi-item + .fi-item::before {
  content: '|'; margin: 0 10px; color: var(--gray-300);
}
.footer-info-row strong { color: var(--gray-600); margin-right: 6px; }

.footer-copyright { font-size: 12px; color: var(--gray-300); margin-top: 8px; }

/* Customer center */
.footer-cs { text-align: right; }
.footer-cs-title { font-size: 13px; font-weight: 700; color: var(--gray-800); margin-bottom: 6px; }
.footer-cs-tel   { font-size: 26px; font-weight: 900; color: var(--gray-800); letter-spacing: -0.5px; margin-bottom: 4px; }
.footer-cs-hours { font-size: 12px; color: var(--gray-400); margin-bottom: 14px; line-height: 1.6; }
.footer-cs-btns  { display: flex; gap: 8px; justify-content: flex-end; }
.footer-cs-btn {
  padding: 9px 16px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s;
  border: 1.5px solid var(--gray-300); background: var(--white); color: var(--gray-600);
}
.footer-cs-btn:hover { border-color: var(--orange); color: var(--orange); }

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid var(--gray-200);
  background: #f0f0f0;
}
.footer-bottom-inner {
  max-width: 1320px; margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.footer-bottom-inner p { font-size: 11px; color: var(--gray-400); line-height: 1.6; }
.footer-sns { display: flex; gap: 8px; }
.footer-sns a {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gray-300); display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: background .15s;
}
.footer-sns a:hover { background: var(--gray-400); }