@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');

:root {
  --orange: #eb711b;
  --blue:   #1376ba;
  --black:  #1a1a1a;
  --white:  #ffffff;
  --bg:     #f7f8f9;
  --g50:    #fafafa;
  --g100:   #f2f2f2;
  --g200:   #e4e4e4;
  --g300:   #cccccc;
  --g500:   #8c8c8c;
  --g700:   #595959;
  --font:   'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --tr:     0.18s ease;
  --max:    1200px;
  --r-sm:   6px;
  --r:      10px;
  --r-lg:   14px;
  --shadow: 0 2px 8px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.13);
}

* { margin:0; padding:0; box-sizing:border-box; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--font); cursor:pointer; }

body {
  font-family: var(--font);
  color: var(--black);
  background: var(--bg);
  line-height: 1.7;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ── HEADER ─────────────────────────────────── */
.header {
  position: sticky; top:0; z-index:200;
  background: var(--orange);
}
.header-inner {
  max-width: var(--max); margin:0 auto;
  padding: 0 40px; height:64px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo {
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:17px; letter-spacing:-0.3px;
  color: #fff;
}
.logo img { height:34px; width:auto; }

.nav { display:flex; gap:28px; }
.nav-link {
  font-size:14px; color:rgba(255,255,255,0.85);
  position:relative; padding-bottom:2px;
  font-weight:500;
  transition: color var(--tr);
}
.nav-link::after {
  content:''; position:absolute;
  bottom:-2px; left:0; width:0; height:1px;
  background:#fff; transition:width var(--tr);
}
.nav-link:hover, .nav-link.active { color:#fff; background:none; }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

.cart-btn {
  display:flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,0.6); background:none;
  padding:8px 18px; font-size:13px; font-weight:600;
  color:#fff; border-radius:var(--r);
  transition: border-color var(--tr);
}
.cart-btn:hover { border-color:#fff; }
.cart-count {
  background:#fff; color:var(--orange);
  font-size:11px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* ── LAYOUT ──────────────────────────────────── */
.container { max-width:var(--max); margin:0 auto; padding:0 40px; }

.section {
  padding:80px 0;
  border-bottom:1px solid var(--g200);
}
.section-header {
  display:flex; align-items:flex-end;
  justify-content:space-between; margin-bottom:40px;
}
.section-title {
  font-size:22px; font-weight:700; letter-spacing:-0.5px;
  position:relative;
}
.section-link {
  font-size:13px; color:var(--blue);
  font-weight:600;
  transition: color var(--tr);
}
.section-link:hover { color:var(--orange); }
.section-desc {
  color:var(--g700); font-size:15px; font-weight:400;
  margin-top:8px; margin-bottom:32px;
}

/* ── BUTTONS ─────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 28px; font-family:var(--font);
  font-size:14px; font-weight:600;
  border:1.5px solid transparent; border-radius:var(--r);
  transition:all var(--tr); cursor:pointer;
}
.btn-primary  { background:var(--black); color:var(--white); border-color:var(--black); }
.btn-primary:hover { background:var(--orange); border-color:var(--orange); }
.btn-outline  { background:transparent; color:var(--black); border-color:var(--g300); }
.btn-outline:hover { background:var(--black); color:var(--white); border-color:var(--black); }
.btn-orange   { background:var(--orange); color:var(--white); border-color:var(--orange); }
.btn-orange:hover { background:#d4640f; border-color:#d4640f; }
.btn-blue     { background:var(--blue); color:var(--white); border-color:var(--blue); }
.btn-blue:hover { background:#0f63a0; border-color:#0f63a0; }
.btn-full { width:100%; }
.btn-sm   { padding:6px 14px; font-size:12px; }
.btn:disabled { opacity:0.45; cursor:not-allowed; }

/* ── PRODUCT GRID ────────────────────────────── */
.goods-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; background:transparent; border:none;
}
.product-card {
  background:var(--white); cursor:pointer;
  border-radius:var(--r-lg);
  border:1px solid var(--g200);
  box-shadow:var(--shadow);
  transition:box-shadow var(--tr), transform var(--tr);
  display:flex; flex-direction:column; overflow:hidden;
}
.product-card:hover {
  box-shadow:var(--shadow-hover);
  transform:translateY(-2px);
}
.product-image-wrap {
  aspect-ratio:1; overflow:hidden;
  background:var(--g100);
}
.product-image {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.38s ease;
}
.product-card:hover .product-image { transform:scale(1.05); }
.product-info {
  padding:16px 16px 8px;
  border-top:1px solid var(--g100);
  flex:1;
}
.product-name {
  font-size:14px; font-weight:600;
  margin-bottom:8px; line-height:1.45;
}
.product-price-row { display:flex; align-items:baseline; gap:6px; }
.product-price { font-size:16px; font-weight:700; }
.product-price-note { font-size:12px; color:var(--g500); }
.product-price-pack { font-size:12px; color:var(--blue); margin-top:4px; }
.product-options-preview { font-size:11px; color:var(--g500); margin-top:6px; }
.product-add-btn {
  display:block; width:calc(100% - 24px);
  margin:0 12px 12px; padding:10px;
  background:transparent; border:1.5px solid var(--g200);
  border-radius:var(--r-sm);
  font-size:13px; font-weight:600; color:var(--black);
  transition:all var(--tr);
}
.product-add-btn:hover {
  background:var(--orange); border-color:var(--orange); color:var(--white);
}

/* ── CATEGORY FILTER ─────────────────────────── */
.category-filter {
  display:flex; gap:6px; margin-bottom:28px;
  flex-wrap:wrap;
}
.category-btn {
  padding:8px 20px; background:var(--white);
  border:1.5px solid var(--g200); border-radius:100px;
  font-size:13px; font-weight:600; color:var(--g700);
  transition:all var(--tr);
}
.category-btn.active, .category-btn:hover {
  background:var(--black); color:var(--white); border-color:var(--black);
}

/* ── MODAL ───────────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5); z-index:500;
  align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.active { display:flex; }
.modal {
  background:var(--white); width:100%; max-width:800px;
  max-height:90vh; overflow-y:auto; border-radius:var(--r-lg);
  display:grid; grid-template-columns:1fr 1fr; position:relative;
  box-shadow:var(--shadow-hover);
}
.modal-close {
  position:absolute; top:16px; right:16px;
  background:var(--g100); border:none; border-radius:50%;
  width:32px; height:32px; font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  color:var(--g700); z-index:10; transition:all var(--tr);
}
.modal-close:hover { background:var(--black); color:var(--white); }
.modal-image-wrap { aspect-ratio:1; background:var(--g100); overflow:hidden; border-radius:var(--r-lg) 0 0 var(--r-lg); }
.modal-image { width:100%; height:100%; object-fit:cover; }
.modal-content { padding:36px; display:flex; flex-direction:column; overflow-y:auto; }
.modal-name { font-size:20px; font-weight:700; margin-bottom:8px; }
.modal-desc {
  font-size:13px; color:var(--g700); font-weight:400;
  line-height:1.8; margin-bottom:24px;
  padding-bottom:20px; border-bottom:1px solid var(--g200);
}

.option-group { margin-bottom:18px; }
.option-label {
  display:block; font-size:11px; font-weight:700;
  color:var(--g500); text-transform:uppercase;
  letter-spacing:0.8px; margin-bottom:8px;
}
.option-buttons { display:flex; flex-wrap:wrap; gap:6px; }
.option-btn {
  padding:7px 14px; border:1.5px solid var(--g200);
  background:transparent; font-size:13px; font-weight:500; color:var(--black);
  border-radius:var(--r-sm);
  transition:all var(--tr);
}
.option-btn:hover { border-color:var(--black); }
.option-btn.selected { background:var(--black); border-color:var(--black); color:var(--white); }

.qty-control {
  display:flex; align-items:center;
  border:1.5px solid var(--g200); border-radius:var(--r-sm);
  width:fit-content; overflow:hidden;
}
.qty-btn {
  width:36px; height:36px; background:none; border:none;
  font-size:18px; display:flex; align-items:center; justify-content:center;
  color:var(--black); transition:background var(--tr);
}
.qty-btn:hover { background:var(--g100); }
.qty-input {
  width:48px; height:36px; text-align:center;
  border:none; border-left:1.5px solid var(--g200); border-right:1.5px solid var(--g200);
  font-family:var(--font); font-size:14px; font-weight:600; outline:none;
  background:var(--white);
}

.phone-model-select {
  width:100%; padding:10px 12px;
  font-family:var(--font); font-size:14px;
  border:1.5px solid var(--g200); background:var(--white); color:var(--black);
  border-radius:var(--r-sm); cursor:pointer; outline:none;
}
.phone-model-select:focus { border-color:var(--black); }

.modal-footer { margin-top:auto; padding-top:20px; border-top:1px solid var(--g200); }
.modal-total { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.modal-total-label { font-size:13px; color:var(--g700); }
.modal-total-price { font-size:22px; font-weight:700; }

.keyring-pack-row { padding:12px 0; border-bottom:1px solid var(--g100); }
.keyring-pack-row:last-child { border-bottom:none; }
.keyring-pack-num { font-size:12px; font-weight:600; color:var(--g700); margin-bottom:8px; }

/* ── PACKAGE CARDS ───────────────────────────── */
.package-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--g200); border-radius:var(--r-lg); overflow:hidden;
}
.package-value { font-size:12px; color:var(--blue); font-weight:600; margin-top:8px; }
.package-card {
  padding:28px 24px; border-right:1px solid var(--g200);
  position:relative; overflow:hidden; transition:background var(--tr);
  background:var(--white);
}
.package-card:last-child { border-right:none; }
.package-card::before {
  content:''; position:absolute; top:0; left:0; width:3px; height:100%;
  background:var(--g300); transition:background var(--tr);
}
.package-card:hover::before, .package-card.top::before { background:var(--orange); }
.package-badge {
  display:inline-block; background:var(--orange); color:var(--white);
  font-size:10px; font-weight:700; letter-spacing:0.8px;
  padding:2px 8px; margin-bottom:10px; border-radius:4px;
}
.package-amount { font-size:22px; font-weight:700; margin-bottom:8px; }
.package-amount span { color:var(--orange); }
.package-gift { font-size:13px; color:var(--g700); font-weight:400; line-height:1.6; }

/* ── PROCESS STEPS ───────────────────────────── */
.process-steps { display:flex; gap:12px; }
.process-step {
  flex:1; padding:24px;
  background:var(--white); border:1px solid var(--g200);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
}
.step-number {
  font-size:32px; font-weight:700; color:var(--g200);
  margin-bottom:16px; font-variant-numeric:tabular-nums;
}
.step-title { font-size:15px; font-weight:700; margin-bottom:8px; }
.step-desc { font-size:13px; color:var(--g700); font-weight:400; line-height:1.7; }

/* ── ORDER PAGE ──────────────────────────────── */
.page-header {
  padding:48px 0 32px;
  border-bottom:1px solid var(--g200);
  margin-bottom:48px;
}
.page-title { font-size:28px; font-weight:700; letter-spacing:-0.5px; margin-bottom:6px; }
.page-subtitle { font-size:14px; color:var(--g700); font-weight:400; }

.order-layout {
  display:grid; grid-template-columns:1fr 380px;
  gap:60px; align-items:flex-start;
}
.order-block { margin-bottom:40px; }
.order-block-title {
  font-size:15px; font-weight:700;
  padding-bottom:12px; margin-bottom:20px;
  border-bottom:1px solid var(--g200);
}

/* Cart table */
.cart-table { width:100%; border-collapse:collapse; margin-bottom:16px; }
.cart-table th {
  padding:10px 12px; text-align:left;
  font-size:11px; font-weight:700; color:var(--g700);
  background:var(--g100); border-bottom:1px solid var(--g200);
  letter-spacing:0.5px; text-transform:uppercase;
}
.cart-table td { padding:16px 12px; border-bottom:1px solid var(--g100); vertical-align:middle; }
.cart-item-info { display:flex; align-items:center; gap:12px; }
.cart-item-img { width:52px; height:52px; object-fit:cover; background:var(--g100); flex-shrink:0; border-radius:var(--r-sm); }
.cart-item-name { font-weight:600; font-size:13px; }
.cart-item-options { font-size:12px; color:var(--g500); margin-top:2px; }
.cart-remove {
  background:none; border:none; color:var(--g300);
  font-size:20px; line-height:1; padding:4px;
  transition:color var(--tr);
}
.cart-remove:hover { color:var(--black); }

/* Order Summary Sidebar */
.order-summary {
  background:var(--white); border:1px solid var(--g200);
  border-radius:var(--r-lg); padding:28px;
  box-shadow:var(--shadow);
  position:sticky; top:80px;
}
.summary-title {
  font-size:15px; font-weight:700;
  padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid var(--g200);
}
.summary-row {
  display:flex; justify-content:space-between;
  padding:9px 0; font-size:14px;
  border-bottom:1px solid var(--g100);
}
.summary-row:last-of-type { border-bottom:none; }
.summary-total {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 0 0; margin-top:8px;
  border-top:2px solid var(--black);
  font-size:18px; font-weight:700;
}
.gift-box {
  background:var(--orange); color:var(--white);
  padding:12px 14px; margin:12px 0;
  font-size:13px; font-weight:500; border-radius:var(--r-sm);
}
.next-tier-info {
  border:1.5px solid var(--blue); background:#f0f7ff;
  padding:10px 12px; margin:12px 0;
  font-size:12px; color:var(--blue); line-height:1.6; border-radius:var(--r-sm);
}
.payment-info {
  background:var(--g50); border:1px solid var(--g200);
  border-radius:var(--r); padding:18px; margin:20px 0;
  font-size:13px; line-height:1.9;
}
.payment-account { font-size:15px; font-weight:700; color:var(--blue); margin-top:6px; }

/* Form */
.form-group { margin-bottom:18px; }
.form-group label {
  display:block; font-size:13px; font-weight:700;
  color:var(--g700); margin-bottom:7px;
}
.required { color:var(--orange); }
.form-control {
  width:100%; padding:12px 14px;
  border:1.5px solid var(--g200); background:var(--white);
  font-family:var(--font); font-size:14px; color:var(--black);
  outline:none; transition:border-color var(--tr);
  border-radius:var(--r-sm);
}
.form-control:focus { border-color:var(--black); }
textarea.form-control { resize:vertical; min-height:80px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-help { font-size:13px; color:var(--g500); margin-top:5px; }
.radio-group { display:flex; gap:20px; padding:4px 0; }
.radio-label { display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.radio-label input { accent-color:var(--orange); width:16px; height:16px; }
.address-row { display:flex; gap:8px; }
.address-row .form-control { flex:1; }
.address-row .btn { flex-shrink:0; white-space:nowrap; }

/* Order Success */
.order-success {
  text-align:center; padding:80px 40px;
  border:1px solid var(--g200); border-radius:var(--r-lg);
  max-width:600px; margin:0 auto;
  background:var(--white); box-shadow:var(--shadow);
}
.success-icon { font-size:48px; margin-bottom:24px; }
.success-title { font-size:24px; font-weight:700; margin-bottom:12px; }
.success-desc { color:var(--g700); font-size:14px; line-height:1.8; margin-bottom:32px; }
.success-info {
  background:var(--g50); border:1px solid var(--g200);
  border-radius:var(--r-sm); padding:20px; margin:24px 0;
  text-align:left; font-size:14px; line-height:2;
}

/* Empty state */
.empty-state { text-align:center; padding:80px 40px; color:var(--g500); }
.empty-state-icon { font-size:48px; margin-bottom:16px; }
.empty-state-text { font-size:16px; margin-bottom:24px; }

/* ── ADMIN ───────────────────────────────────── */
.admin-login { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.login-box {
  background:var(--white); border:1px solid var(--g200);
  border-radius:var(--r-lg); padding:48px;
  width:100%; max-width:400px; text-align:center;
  box-shadow:var(--shadow-md);
}
.login-title { font-size:20px; font-weight:700; margin-bottom:8px; }
.login-desc { font-size:13px; color:var(--g700); margin-bottom:28px; }

.admin-stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; margin-bottom:32px;
}
.stat-card {
  background:var(--white); padding:24px;
  border:1px solid var(--g200); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.stat-label { font-size:11px; color:var(--g500); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:8px; }
.stat-value { font-size:28px; font-weight:700; }
.stat-value.orange { color:var(--orange); }

.admin-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.admin-title { font-size:16px; font-weight:700; }

.orders-table {
  width:100%; border-collapse:collapse;
  border:1px solid var(--g200); border-radius:var(--r-lg); overflow:hidden;
}
.orders-table th {
  padding:12px 14px; background:var(--g100);
  font-size:11px; font-weight:700; color:var(--g700);
  text-align:left; border-bottom:1px solid var(--g200);
  white-space:nowrap;
}
.orders-table td { padding:14px; border-bottom:1px solid var(--g100); font-size:13px; vertical-align:top; }
.order-summary-row:hover td { background:#fff8f5; }
.order-summary-row td { transition:background 0.15s; }

.badge { display:inline-block; padding:3px 10px; font-size:11px; font-weight:600; border-radius:100px; }
.badge-pending   { background:#FFF3E0; color:#e65100; }
.badge-confirmed { background:#E8F5E9; color:#2e7d32; }

/* ── NOTIFICATION ────────────────────────────── */
.notification {
  position:fixed; bottom:-70px; left:50%;
  transform:translateX(-50%);
  background:var(--black); color:var(--white);
  padding:14px 28px; font-size:13px; font-weight:500;
  z-index:9999; white-space:nowrap;
  transition:bottom 0.28s ease; pointer-events:none;
  border-radius:100px; box-shadow:var(--shadow-md);
}
.notification.show { bottom:28px; }

@keyframes optAlertAnim {
  0%   { opacity:0; transform:translate(-50%,-45%) scale(0.92); }
  12%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  80%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1); }
}
.opt-required { outline:2.5px solid var(--orange) !important; border-radius:6px; animation:optRequiredPulse 0.6s ease 2; }
@keyframes optRequiredPulse {
  0%, 100% { outline-color:var(--orange); }
  50% { outline-color:#ff4500; box-shadow:0 0 0 4px rgba(235,113,27,0.15); }
}

/* ── FOOTER ──────────────────────────────────── */
.footer { background:#1a1f2e; color:#fff; padding:56px 0 0; }
.footer-inner {
  max-width:var(--max); margin:0 auto; padding:0 40px;
  display:grid; grid-template-columns:1fr auto;
  gap:40px; align-items:start;
}
.footer-brand { font-size:20px; font-weight:700; margin-bottom:8px; color:#fff; }
.footer-desc { font-size:13px; color:#888; font-weight:400; margin-bottom:24px; }
.footer-sns { display:flex; gap:10px; flex-wrap:wrap; }
.footer-sns-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:var(--r);
  font-size:13px; font-weight:600; text-decoration:none; transition:opacity 0.18s;
}
.footer-sns-btn:hover { opacity:0.8; }
.footer-sns-btn.instagram { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:#fff; }
.footer-sns-btn.youtube { background:#FF0000; color:#fff; }
.footer-sns-btn.kakao { background:#FEE500; color:#3C1E1E; }
.footer-links { display:flex; gap:20px; }
.footer-link { font-size:13px; color:#888; transition:color var(--tr); }
.footer-link:hover { color:#fff; }
.footer-info { text-align:right; font-size:13px; line-height:1.9; color:#aaa; }
.footer-info strong { color:#fff; }
.footer-bottom {
  max-width:var(--max); margin:40px auto 0;
  padding:20px 40px; border-top:1px solid #2b3147;
}
.footer-bottom p { font-size:12px; color:#6b7394; }

/* ── PRODUCT DETAIL PANEL ───────────────────────── */
.product-detail-panel { background:var(--white); border-radius:var(--r-lg); overflow:hidden; }
.detail-layout {
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--g200); border-top:none;
}
.detail-image-wrap {
  overflow:hidden; border-right:1px solid var(--g200);
  background:var(--g100); display:flex; flex-direction:column;
}
.detail-image { width:100%; height:100%; object-fit:cover; display:block; }
.detail-content {
  padding:40px; display:flex;
  flex-direction:column; max-height:640px; overflow-y:auto;
}
.detail-name { font-size:22px; font-weight:700; margin-bottom:12px; letter-spacing:-0.5px; }
.detail-desc {
  font-size:13px; color:var(--g700); font-weight:400;
  line-height:1.9; margin-bottom:24px;
  padding-bottom:20px; border-bottom:1px solid var(--g200);
}
.detail-footer { margin-top:auto; padding-top:20px; border-top:1px solid var(--g200); }

/* ── GALLERY ─────────────────────────────────────── */
.gallery-slider { display:flex; flex-direction:column; flex:1; }
.gallery-main-wrap { flex:1; position:relative; overflow:hidden; background:var(--g100); aspect-ratio:1; }
.gallery-main-img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.38); color:#fff; border:none;
  width:36px; height:56px; font-size:26px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.18s; z-index:2; border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.gallery-nav.gallery-prev { border-radius:var(--r-sm) 0 0 var(--r-sm); }
.gallery-nav:hover { background:rgba(0,0,0,0.65); }
.gallery-prev { left:0; }
.gallery-next { right:0; }
.gallery-counter {
  position:absolute; bottom:8px; right:10px;
  background:rgba(0,0,0,0.38); color:#fff;
  font-size:11px; padding:2px 8px; border-radius:100px;
  pointer-events:none;
}
.gallery-thumbs {
  display:flex; gap:4px; padding:8px;
  background:var(--g100); overflow-x:auto;
  border-top:1px solid var(--g200);
}
.gallery-thumb {
  flex-shrink:0; width:58px; height:58px;
  cursor:pointer; border:2.5px solid transparent;
  overflow:hidden; background:var(--g200);
  transition:border-color 0.18s; border-radius:var(--r-sm);
}
.gallery-thumb.active { border-color:var(--orange); }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── DETAIL DESC IMAGES ─────────────────────────── */
.detail-desc-section { border:1px solid var(--g200); border-top:none; border-radius:0 0 var(--r-lg) var(--r-lg); }
.detail-desc-header {
  padding:14px 20px; font-size:13px; font-weight:700;
  color:#333; border-bottom:1px solid var(--g200);
  background:var(--g50);
}
.detail-desc-slot { width:100%; }
.detail-desc-slot img { width:100%; display:block; }
.detail-desc-empty {
  padding:56px 0; text-align:center;
  color:var(--g300); font-size:13px; background:var(--g50);
}

/* ── MOBILE NAV TOGGLE ───────────────────────── */
.nav-toggle {
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; padding:8px; cursor:pointer;
  width:40px; height:40px; flex-shrink:0;
}
.nav-toggle span {
  display:block; width:22px; height:2px;
  background:#fff; border-radius:2px;
  transition:transform var(--tr), opacity var(--tr);
  transform-origin:center;
}
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-nav-popup {
  display:none; background:var(--white);
  border-top:1px solid var(--g200);
}
.mobile-nav-popup.open { display:block; }
.mobile-nav-link {
  display:block; padding:16px 20px;
  font-size:15px; color:var(--g700); font-weight:500;
  border-bottom:1px solid var(--g100);
  transition:background var(--tr), color var(--tr);
}
.mobile-nav-link:last-child { border-bottom:none; }
.mobile-nav-link:active { background:var(--g50); }
.mobile-nav-link.active { color:var(--orange); }

/* ── 결제 수단 선택 ─────────────────────────────────── */
.payment-method-group { display:flex; gap:10px; margin-top:6px; }
.payment-method-btn {
  flex:1; padding:14px; border:2px solid var(--g200);
  border-radius:var(--r); text-align:center; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--g700); transition:all var(--tr);
}
.payment-method-btn.active { border-color:var(--orange); color:var(--orange); background:#fff8f3; }

/* ── 토스페이먼츠 박스 ──────────────────────────────── */
.toss-pay-box {
  border:1px solid var(--g200); border-radius:var(--r-lg);
  padding:32px; text-align:center;
  background:#f8f9ff; margin-bottom:8px;
}
.toss-pay-logo { font-size:28px; font-weight:900; color:#0064ff; letter-spacing:-1px; margin-bottom:12px; }
.btn-toss {
  display:inline-block; width:100%; max-width:320px;
  padding:16px; border:none; border-radius:var(--r);
  background:#0064ff; color:#fff;
  font-size:16px; font-weight:700; cursor:not-allowed; opacity:0.5;
}

/* ── 동의 체크박스 ──────────────────────────────── */
.checkbox-label {
  display:flex; align-items:flex-start; gap:10px;
  font-size:14px; cursor:pointer; line-height:1.6;
  font-weight:400; text-transform:none; letter-spacing:0; color:var(--black);
}
.checkbox-label input[type="checkbox"] { width:18px; height:18px; flex-shrink:0; margin-top:2px; accent-color:var(--orange); cursor:pointer; }
.agree-link { color:var(--blue); text-decoration:underline; }

/* ── FAQ / 정책 페이지 ─────────────────────────── */
.faq-list { border-top:1px solid var(--g200); }
.faq-item { border-bottom:1px solid var(--g200); }
.faq-item summary {
  padding:18px 4px; font-size:15px; font-weight:500;
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'＋'; color:var(--g500); font-size:18px; flex-shrink:0; }
.faq-item[open] summary::after { content:'－'; color:var(--orange); }
.faq-item[open] summary { color:var(--orange); }
.faq-answer { padding:0 4px 20px; font-size:14px; color:var(--g700); line-height:1.9; white-space:pre-line; }
.policy-section {
  background:var(--g50); border:1px solid var(--g200);
  border-radius:var(--r); padding:32px; margin-bottom:20px;
}
.policy-section h3 { font-size:14px; font-weight:700; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--g200); }
.policy-section p, .policy-section li { font-size:13px; color:var(--g700); line-height:1.9; }
.policy-section ul { padding-left:18px; margin-top:6px; }
.policy-section li { margin-bottom:4px; }

/* ── 패키지 섹션 ─────────────────────────────────── */
.pack-section-header { font-size:11px; font-weight:700; color:#999; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:16px; padding-top:8px; }
.pack-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin-bottom:48px;
}
.pack-card {
  position:relative; border:1.5px solid var(--g200);
  padding:20px; cursor:pointer; border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  transition:box-shadow var(--tr), transform var(--tr), border-color var(--tr);
  display:flex; flex-direction:column; gap:6px; background:var(--white);
}
.pack-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-2px); border-color:var(--g300); }
.pack-card-best { border-color:var(--orange); }
.pack-card-best:hover { border-color:var(--orange); }
.pack-best-label {
  position:absolute; top:12px; right:12px;
  background:var(--orange); color:#fff;
  font-size:10px; font-weight:700;
  padding:3px 10px; letter-spacing:0.8px; border-radius:100px;
}
.pack-card-badge { font-size:11px; font-weight:700; color:var(--orange); letter-spacing:0.5px; }
.pack-card-name { font-size:16px; font-weight:700; margin-top:2px; }
.pack-card-desc { font-size:12px; color:var(--g700); line-height:1.5; }
.pack-card-items { font-size:11px; color:var(--g500); line-height:1.7; margin-top:2px; }
.pack-card-prices { display:flex; align-items:baseline; gap:8px; margin-top:8px; }
.pack-card-original { font-size:12px; color:var(--g500); text-decoration:line-through; }
.pack-card-price { font-size:20px; font-weight:700; color:var(--orange); }
.pack-card-saving { font-size:12px; color:var(--blue); font-weight:600; }
.pack-card-gift {
  font-size:11px; font-weight:700; color:#8B5E00;
  background:#fff8e6; border:1px solid #ffe08a;
  padding:3px 10px; display:inline-block; border-radius:100px; margin-top:2px;
}
.pack-card-gift-empty { height:22px; }
.pack-card-btn {
  margin-top:10px; background:none; border:1.5px solid var(--black);
  padding:9px 0; font-size:13px; font-weight:600;
  width:100%; border-radius:var(--r-sm);
  transition:background var(--tr), color var(--tr);
}
.pack-card:hover .pack-card-btn, .pack-card-best .pack-card-btn { background:var(--black); color:#fff; }

/* ── 패키지 상세 패널 ───────────────────────────── */
.pack-item-row { padding:16px 0; border-bottom:1px solid var(--g200); }
.pack-item-row:first-child { border-top:1px solid var(--g200); }
.pack-item-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.pack-item-name { font-size:14px; font-weight:600; }
.pack-item-price { font-size:13px; color:var(--g500); }
.pack-item-note { font-size:12px; color:var(--g500); font-style:italic; }
.pk-opt-group { margin-bottom:8px; }
.pk-opt-label { font-size:11px; color:var(--g700); font-weight:600; margin-bottom:6px; }

/* ── 추가 상품 (애드온) ─────────────────────────── */
.addon-section { border-top:2px solid var(--g200); margin-top:40px; padding-top:32px; padding-bottom:40px; }
.addon-section-title { font-size:16px; font-weight:700; margin-bottom:14px; }
.addon-hint {
  background:var(--g100); border:1.5px solid var(--g200);
  border-radius:var(--r-sm); padding:12px 16px;
  font-size:13px; color:var(--g700); margin-bottom:20px; line-height:1.6;
}
.addon-hint.achieved { background:#e8f5e9; border-color:#a5d6a7; color:#2e7d32; }
.addon-tier {
  font-size:11px; color:var(--g500); font-weight:600;
  background:var(--g100); padding:3px 9px; border-radius:100px; display:inline-block; margin-left:6px;
}
.addon-tier.achieved { color:#2e7d32; background:#e8f5e9; }
.addon-opts { display:flex; flex-direction:column; gap:6px; margin-top:2px; }
.addon-opt-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.addon-opt-lbl { font-size:11px; color:var(--g700); font-weight:600; min-width:36px; }
.addon-opt-row .option-buttons { flex-wrap:wrap; }
.addon-opt-row .option-btn { font-size:11px; padding:4px 9px; }
.addon-list { border-top:1px solid var(--g200); }
.addon-row { padding:11px 0; border-bottom:1px solid var(--g100); transition:background var(--tr); }
.addon-row:last-child { border-bottom:none; }
.addon-row.addon-selected { background:#fff8f3; border-radius:var(--r-sm); padding-left:6px; padding-right:6px; }
.addon-row-main { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.addon-row-left { flex:1; min-width:0; }
.addon-row-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.addon-row-name { font-size:14px; font-weight:600; }
.addon-row-price { font-size:14px; font-weight:700; color:var(--orange); white-space:nowrap; }
.addon-row-btn { border:1.5px solid #e0e0e0; background:#fff; padding:5px 14px; font-size:12px; font-weight:600; color:#aaa; cursor:pointer; font-family:var(--font); white-space:nowrap; border-radius:var(--r-sm); transition:all var(--tr); }
.addon-row-btn:hover,
.addon-row.addon-selected .addon-row-btn:hover { border-color:var(--orange) !important; color:#fff !important; background:var(--orange) !important; }
.addon-row.addon-selected .addon-row-btn { border:1.5px solid #e0e0e0; background:#fff; color:#aaa; }
.addon-qty-ctrl { gap:4px; }
.addon-qty-ctrl .qty-btn { width:28px; height:28px; font-size:14px; }
.addon-qty-ctrl .qty-input { width:30px; height:28px; font-size:13px; }
.addon-slot-count { font-size:11px;font-weight:700;color:var(--orange);background:#fff0e6;padding:2px 8px;border-radius:10px;margin-left:8px; }
.addon-slots { padding-top:4px; }
.addon-slot { background:var(--g50,#fafafa); border:1px solid var(--g200); border-radius:var(--r-sm); padding:10px 12px; margin-top:8px; }
.addon-slot-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.addon-slot-num { font-size:12px; font-weight:700; color:var(--g700); }
.addon-slot-remove { background:none; border:1px solid var(--g200); padding:3px 10px; font-size:11px; color:var(--g500); cursor:pointer; border-radius:var(--r-sm); font-family:var(--font); transition:all var(--tr); }
.addon-slot-remove:hover { border-color:#e00; color:#e00; }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width:1024px) {
  .goods-grid { grid-template-columns:repeat(2,1fr); }
  .package-grid { grid-template-columns:repeat(2,1fr); }
  .package-card { border-bottom:1px solid var(--g200); }
  .order-layout { grid-template-columns:1fr; gap:40px; }
  .order-summary { position:static; }
  .admin-stats { grid-template-columns:repeat(2,1fr); }
  .modal { grid-template-columns:1fr; }
  .modal-image-wrap { aspect-ratio:16/9; border-radius:var(--r-lg) var(--r-lg) 0 0; }
}

@media (max-width:768px) {
  .header-inner { padding:0 20px; }
  .nav { display:none; }
  .nav-toggle { display:flex; }
  .container { padding:0 20px; }
  .section { padding:48px 0; }
  .goods-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .category-filter { overflow-x:auto; width:100%; flex-wrap:nowrap; }
  .category-btn { flex-shrink:0; }
  .page-header { padding:28px 0 18px; margin-bottom:24px; }
  .page-title { font-size:22px; }
  .detail-layout { grid-template-columns:1fr; }
  .detail-image-wrap { border-right:none; border-bottom:1px solid var(--g200); }
  .detail-content { max-height:none; padding:24px 20px; overflow-y:visible; }
  .detail-name { font-size:18px; }
  .package-grid { grid-template-columns:1fr; }
  .process-steps { flex-direction:column; }
  .form-row { grid-template-columns:1fr; }
  .br-desktop { display:none; }

  /* 상품 카드 모바일 압축 */
  .product-info { padding:10px 10px 4px; }
  .product-name { font-size:12px; margin-bottom:4px; }
  .product-price { font-size:13px; }
  .product-price-pack { font-size:10px; }
  .product-options-preview { display:none; }
  .product-add-btn { font-size:11px; padding:8px; margin:0 8px 8px; width:calc(100% - 16px); }

  /* 패키지 카드 모바일 압축 */
  .pack-card { padding:14px; gap:4px; }
  .pack-card-desc { display:none; }
  .pack-card-items { display:none; }
  .pack-card-saving { display:none; }
  .pack-card-gift-empty { display:none; }
  .pack-card-name { font-size:14px; }
  .pack-card-price { font-size:17px; }
  .pack-card-gift { font-size:10px; padding:2px 8px; }
  .pack-card-btn { margin-top:6px; padding:8px 0; font-size:12px; }
  .mobile-submit {
    display:block !important;
    position:fixed; bottom:0; left:0; right:0;
    background:var(--white); padding:12px 20px;
    border-top:1px solid var(--g200);
    z-index:150; box-shadow:0 -4px 16px rgba(0,0,0,0.08);
  }
  #orderFormSection { padding-bottom:80px; }
  .order-success { padding:40px 20px; }
  .footer-inner { grid-template-columns:1fr; padding:0 20px; }
  .footer-links { flex-wrap:wrap; gap:12px; }
  .footer-info { text-align:left; }
  .footer-bottom { padding:16px 20px 0; }
  .admin-stats { grid-template-columns:1fr 1fr; }
  .modal-content { padding:24px; }
  .notification { white-space:normal; max-width:calc(100% - 40px); text-align:center; }
  .hero-title-big { font-size:36px !important; }
  .pack-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .pack-card { padding:16px; }

  /* 3열 카드 모바일 최적화 */
  .product-info { padding:10px 10px 4px; }
  .product-name { font-size:12px; margin-bottom:5px; }
  .product-price { font-size:13px; }
  .product-price-pack { font-size:10px; }
  .product-options-preview { font-size:10px; }
  .product-add-btn { font-size:11px; padding:8px; margin:0 8px 8px; width:calc(100% - 16px); }
}

@media (max-width:480px) {
  .goods-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .section-title { font-size:18px; }
  .pack-grid { grid-template-columns:1fr; }
}

/* ── 전광판 티커 ────────────────────────────────── */
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex;
  animation: tickerScroll 90s linear infinite;
}
.ticker-item {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.05em;
}

/* ── 타이프라이터 인용구 ────────────────────────── */
@keyframes cursorBlink {
  0%, 100% { opacity:1; }
  50%       { opacity:0; }
}
@keyframes highlightSlide {
  from { background-size:0% 38%; }
  to   { background-size:100% 38%; }
}
.typewriter-quote {
  display:inline;
}
.typewriter-quote.typing::after {
  content:'|';
  color:var(--orange);
  font-weight:300;
  margin-left:1px;
  animation:cursorBlink 0.65s infinite;
}
.typewriter-quote.typed {
  background-image: linear-gradient(transparent 62%, rgba(235,113,27,0.22) 62%);
  background-repeat: no-repeat;
  background-size: 0% 38%;
  background-position: left bottom;
  animation: highlightSlide 0.6s ease forwards;
  border-radius:2px;
  padding-bottom:1px;
}

/* ── 옵션 알림 / 필수항목 강조 ─────────────────── */
@keyframes optAlertAnim {
  0%   { opacity:0; transform:translate(-50%,-45%) scale(0.92); }
  12%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  80%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1); }
}
.opt-required { outline:2.5px solid #eb711b !important; border-radius:6px; animation:optRequiredPulse 0.6s ease 2; }
@keyframes optRequiredPulse {
  0%, 100% { outline-color:#eb711b; }
  50% { outline-color:#ff4500; box-shadow:0 0 0 4px rgba(235,113,27,0.15); }
}

/* ── 인포 카드 애니메이션 ───────────────────────── */
@keyframes infoCardIn {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes emojiFloat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  40%     { transform:translateY(-7px) rotate(-8deg); }
  75%     { transform:translateY(-3px) rotate(4deg); }
}
@keyframes livePulse {
  0%,100% { opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(235,113,27,0.5); }
  50%     { opacity:0.6; transform:scale(0.75); box-shadow:0 0 0 4px rgba(235,113,27,0); }
}
@keyframes cdDigitPop {
  0%   { transform:scale(1); }
  30%  { transform:scale(1.35) translateY(-2px); color:#ff4d00; }
  60%  { transform:scale(0.9); }
  100% { transform:scale(1); }
}
@keyframes truckDrive {
  0%,100% { transform:translateX(0); }
  30%     { transform:translateX(4px); }
  60%     { transform:translateX(-2px); }
}
.info-card {
  opacity:0;
  animation:infoCardIn 0.5s ease forwards;
  transition:transform 0.22s ease, box-shadow 0.22s ease;
  position:relative;
}
.info-card:nth-child(1) { animation-delay:0.05s; }
.info-card:nth-child(2) { animation-delay:0.15s; }
.info-card:nth-child(3) { animation-delay:0.25s; }
.info-card:nth-child(4) { animation-delay:0.35s; }
.info-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,0.09); z-index:1; }
.info-emoji {
  display:inline-block;
  animation:emojiFloat 3.2s ease-in-out infinite;
  transform-origin:bottom center;
}
.info-card:nth-child(1) .info-emoji { animation-delay:0s; }
.info-card:nth-child(2) .info-emoji { animation-delay:0.7s; }
.info-card:nth-child(3) .info-emoji { animation-name:truckDrive; animation-duration:2s; animation-delay:1.4s; }
.info-card:nth-child(4) .info-emoji { animation-delay:2.1s; }
.live-dot {
  display:inline-block;
  width:7px; height:7px;
  background:var(--orange);
  border-radius:50%;
  vertical-align:middle;
  margin-left:5px;
  animation:livePulse 1.1s ease-in-out infinite;
}
.cd-pop { animation:cdDigitPop 0.32s ease !important; }