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



:root {

  --navy: #0F1628;

  --navy2: #1A2340;

  --orange: #FF6B35;

  --orange2: #FF9A00;

  --gold: #FFB800;

  --cream: #F8F5F0;

  --cream2: #F0EDE8;

  --charcoal: #2D2D2D;

  --gray: #888;

  --light: #E8E4DF;

  --crypto: #26D0CE;

  --crypto2: #1A8FE3;

  --green: #00C48C;

}



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

body { font-family:'DM Sans',sans-serif; background:var(--cream); color:var(--charcoal); }



/* ===== TOP BAR (tnb) ===== */

#tnb { background:var(--navy); padding:7px 0; border-bottom:none; }

#tnb .inner { max-width:1280px; margin:0 auto; padding:0 32px; display:flex; justify-content:space-between; align-items:center; }

#hd_qnb { display:flex; gap:0; list-style:none; }

#hd_qnb li a { color:rgba(255,255,255,0.35); font-size:11px; text-decoration:none; padding:0 12px; letter-spacing:0.5px; transition:color 0.2s; }

#hd_qnb li a:hover { color:white; }

#hd_qnb li.bd { border-left:1px solid rgba(255,255,255,0.1); }

#hd_define { display:none; }



/* ===== HEADER (hd_wrapper) ===== */

#hd { background:linear-gradient(135deg,#080E1C 0%,var(--navy2) 100%); border-bottom:2px solid rgba(255,107,53,0.25); box-shadow:0 4px 24px rgba(0,0,0,0.4); }

#hd_wrapper { max-width:1280px; margin:0 auto; padding:16px 32px; display:flex; align-items:center; gap:28px; }

#hd_h1 { display:none; }

#skip_to_container { display:none; }



/* Logo */

#logo { flex-shrink:0; }

#logo a { display:flex; align-items:center; text-decoration:none; }

#logo img { height:58px; width:auto; }



/* Search */

.hd_sch_wr { flex:1; max-width:680px; }

#hd_sch { border:none; padding:0; }

#hd_sch legend { display:none; }

#hd_sch form { display:flex; position:relative; }

#sch_str {

  width:100%; padding:13px 110px 13px 22px;

  background:rgba(255,255,255,0.08);

  border:1px solid rgba(255,255,255,0.12);

  border-radius:30px; color:white;

  font-size:15px; font-family:'DM Sans',sans-serif;

  outline:none; transition:all 0.3s;

}

#sch_str::placeholder { color:rgba(255,255,255,0.3); }

#sch_str:focus { background:rgba(255,255,255,0.12); border-color:var(--orange); }

#sch_submit {

  position:absolute; right:5px; top:50%; transform:translateY(-50%);

  background:linear-gradient(135deg,var(--orange),var(--orange2));

  border:none; border-radius:24px;

  padding:9px 24px; color:white;

  font-weight:700; font-size:13px;

  font-family:'Outfit',sans-serif; cursor:pointer;

}



/* Login/Cart */

.hd_login { display:flex; align-items:center; gap:12px; list-style:none; margin-left:auto; flex-shrink:0; }

.hd_login .login a {

  background:transparent; border:1px solid rgba(255,255,255,0.2);

  border-radius:8px; padding:8px 16px;

  color:rgba(255,255,255,0.65); font-size:13px;

  text-decoration:none; transition:all 0.2s;

  font-family:'DM Sans',sans-serif;

}

.hd_login .login a:hover { border-color:white; color:white; }

.hd_login .shop_cart a {

  background:linear-gradient(135deg,var(--orange),var(--orange2));

  border-radius:8px; padding:8px 18px;

  color:white; font-size:13px; font-weight:700;

  text-decoration:none; font-family:'Outfit',sans-serif;

  display:flex; align-items:center; gap:8px;

  box-shadow:0 4px 14px rgba(255,107,53,0.35);

}

.hd_login .shop_cart .count {

  background:white; color:var(--orange);

  border-radius:10px; padding:1px 7px;

  font-size:11px; font-weight:900;

}



/* Cashback pill */

#hd_wrapper::after {

  content:'Up to 9% CASHBACK';

  background:rgba(255,184,0,0.1);

  border:1px solid rgba(255,184,0,0.3);

  border-radius:20px; padding:6px 14px;

  font-size:11px; font-weight:700; color:var(--gold);

  font-family:'Outfit',sans-serif; letter-spacing:0.5px;

  flex-shrink:0;

  animation: pulse 2.5s ease-in-out infinite;

}

@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.65} }



/* ===== NAV MENU ===== */

#hd_menu {

  background:linear-gradient(135deg,#080E1C 0%,var(--navy2) 100%);

  border-top:1px solid rgba(255,255,255,0.05);

  padding:0;

}

#hd_menu > .inner, #hd_menu { max-width:100%; }

#menu_open {

  background:linear-gradient(135deg,var(--orange),var(--orange2));

  border:none; padding:12px 22px;

  color:white; font-size:13px; font-weight:700;

  font-family:'Outfit',sans-serif; cursor:pointer;

  letter-spacing:0.5px;

}

.hd_menu { display:flex; list-style:none; padding:0; margin:0; }

.hd_menu li a {

  display:block; padding:12px 22px;

  color:rgba(255,255,255,0.55); font-size:13px;

  text-decoration:none; transition:color 0.2s;

  font-family:'DM Sans',sans-serif;

}

.hd_menu li a:hover { color:white; }

.hd_menu li:last-child a { color:var(--gold); font-weight:600; }



/* ===== MAIN LAYOUT ===== */

#wrapper { max-width:1280px; margin:0 auto; padding:32px; display:grid; grid-template-columns:240px 1fr; gap:28px; }

#aside { }

#container { }



/* ===== SIDEBAR ===== */

#aside .boxcategory, #aside section {

  background:white; border-radius:16px; padding:20px;

  border:1px solid var(--light); margin-bottom:16px;

}

#aside h2, #aside h2 a {

  font-family:'Outfit',sans-serif; font-size:14px; font-weight:700;

  color:var(--charcoal); text-decoration:none; margin-bottom:14px; display:block;

}



/* ===== PRODUCT ITEMS ===== */

.item_photo_box, .shop-content { }

ul.item_photo_list { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; list-style:none; padding:0; margin:0; }

ul.item_photo_list li { }



.item_photo_box {

  background:white; border-radius:16px; overflow:hidden;

  border:1px solid var(--light); transition:all 0.3s; cursor:pointer;

}

.item_photo_box:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.1); border-color:var(--orange); }

.item_photo_box .item_photo { width:100%; aspect-ratio:1; background:var(--cream2); display:flex; align-items:center; justify-content:center; overflow:hidden; }

.item_photo_box .item_photo img { width:100%; height:100%; object-fit:cover; }

.item_photo_box .item_info { padding:14px; }

.item_photo_box .item_name { font-size:13px; font-weight:500; color:var(--charcoal); margin-bottom:8px; line-height:1.4; }

.item_photo_box .item_name a { text-decoration:none; color:inherit; }

.item_photo_box .item_price { font-family:'Outfit',sans-serif; font-size:17px; font-weight:800; color:var(--charcoal); }

.item_photo_box .item_cust { font-size:12px; color:var(--gray); text-decoration:line-through; }



/* Cashback badge on items */

.item_photo_box .item_info::after {

  content:'ํ ฝํฒฐ Earn USDT Cashback';

  display:block; margin-top:8px; padding:6px 10px;

  background:rgba(255,184,0,0.08);

  border:1px solid rgba(255,184,0,0.2);

  border-radius:8px; font-size:11px;

  color:#996600; font-weight:600;

  font-family:'Outfit',sans-serif;

}



/* Add to cart button */

.item_photo_box .btn_cart, .btn_basket {

  width:100%; padding:10px;

  background:var(--navy2); color:white;

  border:none; font-size:12px; font-weight:600;

  font-family:'Outfit',sans-serif; cursor:pointer;

  transition:background 0.2s; letter-spacing:0.5px;

}

.item_photo_box .btn_cart:hover, .btn_basket:hover { background:var(--orange); }



/* ===== SHOP CONTENT TITLES ===== */

.shop-content h2, .shop-content h3 {

  font-family:'Outfit',sans-serif; font-size:22px; font-weight:800;

  color:var(--charcoal); margin-bottom:20px; padding-bottom:12px;

  border-bottom:2px solid var(--light);

}



/* ===== SIDE QUICK MENU ===== */

#side_menu { position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:999; }

#quick { list-style:none; display:flex; flex-direction:column; gap:4px; }

#quick .btn_sm {

  width:52px; height:52px; border-radius:12px 0 0 12px;

  background:var(--navy2); border:none; color:white;

  cursor:pointer; display:flex; flex-direction:column;

  align-items:center; justify-content:center; gap:3px;

  font-size:10px; transition:all 0.2s;

}

#quick .btn_sm:hover, #quick .btn_sm_on { background:var(--orange); }

#quick .qk_tit { font-size:9px; font-family:'Outfit',sans-serif; }

#top_btn {

  width:52px; height:52px; border-radius:12px 0 0 12px;

  background:rgba(255,107,53,0.8); border:none; color:white;

  cursor:pointer; margin-top:8px; font-size:16px;

}



/* ===== FOOTER ===== */

#hd_wrap + #wrapper + #footer,

#footer {

  background:var(--navy); color:rgba(255,255,255,0.45);

  padding:48px 32px 24px; margin-top:60px;

}



/* ===== RESPONSIVE ===== */

@media (max-width: 1024px) {

  #wrapper { grid-template-columns:1fr; }

  #aside { display:none; }

  ul.item_photo_list { grid-template-columns:repeat(3,1fr); }

}

@media (max-width: 768px) {

  ul.item_photo_list { grid-template-columns:repeat(2,1fr); }

  #hd_wrapper { flex-wrap:wrap; }

}




/* ===== ๋ฉ”์ธ ๋ ˆ์ด์•„์›ƒ ํ’€๋„ˆ๋น„ ์ˆ˜์ • ===== */

#wrapper { 

  max-width: 100% !important; 

  padding: 0 !important; 

  display: block !important;

  grid-template-columns: unset !important;

}

#container { 

  width: 100% !important; 

  max-width: 100% !important;

  padding: 0 !important;

}

#aside { display: none !important; }



/* ํžˆ์–ด๋กœ ์„น์…˜ ํ’€๋„ˆ๋น„ */

.spb-hero { width: 100% !important; }

.spb-trust-bar { width: 100% !important; }

.spb-cashback-banner { width: 100% !important; }

.spb-seo-block { width: 100% !important; }



/* ์„น์…˜๋“ค์€ max-width๋กœ ์ œํ•œ */

.spb-section { 

  max-width: 1280px; 

  margin: 0 auto; 

  padding: 48px 32px; 

}



/* ์ด๋ชจ์ง€ ๊นจ์ง ์ˆ˜์ • */

.spb-hero-badge { font-family: 'DM Sans', sans-serif; }



/* shop-content ํ’€๋„ˆ๋น„ */

.shop-content { 

  width: 100% !important; 

  max-width: 100% !important;

  padding: 0 !important;

}




/* ===== SPB HERO ===== */

.spb-hero { background:linear-gradient(135deg,#080E1C 0%,#1A2340 50%,#0A1020 100%); padding:70px 32px 60px; text-align:center; position:relative; overflow:hidden; }

.spb-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 25% 100%,rgba(255,107,53,0.1) 0%,transparent 50%),radial-gradient(ellipse at 75% 0%,rgba(38,208,206,0.08) 0%,transparent 50%); pointer-events:none; }

.spb-hero-inner { max-width:820px; margin:0 auto; position:relative; z-index:1; }

.spb-hero-badge { display:inline-flex; align-items:center; gap:10px; background:rgba(255,184,0,0.1); border:1px solid rgba(255,184,0,0.25); border-radius:20px; padding:7px 18px; font-size:12px; color:#FFB800; font-weight:600; font-family:'Outfit',sans-serif; letter-spacing:1px; margin-bottom:22px; }

.spb-hero-title { font-family:'Outfit',sans-serif; font-size:50px; font-weight:900; color:white; line-height:1.1; margin-bottom:16px; letter-spacing:-1px; }

.accent-orange { color:#FF6B35; }

.accent-crypto { background:linear-gradient(135deg,#26D0CE,#1A8FE3); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

.spb-hero-desc { color:rgba(255,255,255,0.5); font-size:17px; line-height:1.75; margin-bottom:36px; }

.spb-hero-desc strong { color:white; }



/* Search */

.spb-search-wrap { max-width:680px; margin:0 auto 22px; }

.spb-search-wrap form { display:flex; position:relative; }

.spb-search-input { width:100%; padding:18px 150px 18px 26px; background:white; border:3px solid transparent; border-radius:16px; font-size:16px; font-family:'DM Sans',sans-serif; outline:none; color:#2D2D2D; box-shadow:0 8px 40px rgba(0,0,0,0.3); transition:border-color 0.3s; }

.spb-search-input:focus { border-color:#FF6B35; }

.spb-search-input::placeholder { color:#aaa; }

.spb-search-btn { position:absolute; right:6px; top:50%; transform:translateY(-50%); background:linear-gradient(135deg,#FF6B35,#FF9A00); border:none; border-radius:12px; padding:12px 28px; color:white; font-weight:800; font-size:15px; font-family:'Outfit',sans-serif; cursor:pointer; box-shadow:0 4px 20px rgba(255,107,53,0.4); }



/* Quick Tags */

.spb-quick-tags { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; align-items:center; }

.qt-label { font-size:12px; color:rgba(255,255,255,0.35); font-family:'Outfit',sans-serif; }

.spb-tag { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); border-radius:20px; padding:6px 14px; font-size:13px; color:rgba(255,255,255,0.55); text-decoration:none; transition:all 0.2s; }

.spb-tag:hover { background:rgba(255,107,53,0.15); border-color:#FF6B35; color:white; }



/* Stats */

.spb-stats { display:flex; justify-content:center; align-items:center; }

.stat-item { padding:0 36px; text-align:center; }

.stat-num { font-family:'Outfit',sans-serif; font-size:32px; font-weight:900; color:white; }

.stat-num span { color:#FF6B35; font-size:20px; }

.stat-label { font-size:11px; color:rgba(255,255,255,0.35); letter-spacing:1.5px; margin-top:4px; }

.stat-divider { width:1px; height:40px; background:rgba(255,255,255,0.1); }



/* Trust Bar */

.spb-trust-bar { background:white; border-bottom:1px solid #E8E4DF; padding:16px 32px; }

.spb-trust-inner { max-width:1280px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }

.trust-item { display:flex; align-items:center; gap:12px; }

.ti { font-size:11px; font-weight:800; color:white; background:#1A2340; padding:5px 8px; border-radius:6px; font-family:'Outfit',sans-serif; }

.trust-item div { display:flex; flex-direction:column; }

.trust-item strong { font-size:13px; font-weight:700; color:#2D2D2D; font-family:'Outfit',sans-serif; }

.trust-item span { font-size:11px; color:#888; }

.trust-div { width:1px; height:36px; background:#E8E4DF; }



/* Categories */

.spb-cat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }

.spb-cat-card { background:white; border-radius:16px; padding:24px 16px; text-align:center; border:1px solid #E8E4DF; cursor:pointer; transition:all 0.3s; text-decoration:none; color:#2D2D2D; display:flex; flex-direction:column; align-items:center; gap:6px; }

.spb-cat-card:hover { transform:translateY(-3px); border-color:#FF6B35; box-shadow:0 8px 24px rgba(255,107,53,0.12); }

.spb-cat-card strong { font-size:13px; font-weight:700; font-family:'Outfit',sans-serif; }

.spb-cat-card span { font-size:11px; color:#888; }



/* Section */

.spb-section { max-width:1280px; margin:0 auto; padding:48px 32px; }

.spb-section-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; }

.spb-section-title { font-family:'Outfit',sans-serif; font-size:26px; font-weight:800; color:#2D2D2D; }

.spb-section-title span { color:#FF6B35; }

.spb-section-sub { font-size:13px; color:#888; margin-top:4px; }

.spb-see-all { font-size:13px; color:#FF6B35; text-decoration:none; font-weight:700; font-family:'Outfit',sans-serif; }



/* Cashback Banner */

.spb-cashback-banner { background:linear-gradient(135deg,#0F1628 0%,#1A2340 50%,#1a1440 100%); padding:56px 64px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; overflow:hidden; }

.spb-cashback-banner::before { content:''; position:absolute; top:-50%; right:-5%; width:500px; height:500px; background:radial-gradient(circle,rgba(38,208,206,0.1) 0%,transparent 70%); border-radius:50%; pointer-events:none; }

.cb-badge { display:inline-block; background:rgba(255,184,0,0.15); border:1px solid rgba(255,184,0,0.3); color:#FFB800; font-size:11px; font-weight:700; padding:5px 12px; border-radius:20px; letter-spacing:2px; font-family:'Outfit',sans-serif; margin-bottom:18px; }

.spb-cb-left h2 { font-family:'Outfit',sans-serif; font-size:40px; font-weight:900; color:white; line-height:1.15; margin-bottom:16px; }

.pct { color:#FF6B35; font-size:56px; }

.spb-cb-left p { color:rgba(255,255,255,0.5); font-size:15px; line-height:1.7; margin-bottom:28px; }

.spb-cb-left p strong { color:white; }

.spb-btn-primary { display:inline-block; background:linear-gradient(135deg,#FF6B35,#FF9A00); color:white; text-decoration:none; padding:14px 32px; border-radius:12px; font-size:15px; font-weight:700; font-family:'Outfit',sans-serif; box-shadow:0 6px 24px rgba(255,107,53,0.35); transition:all 0.3s; }

.spb-cb-right { display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; }

.roadmap-item { display:flex; align-items:center; gap:16px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:16px 20px; }

.rm-step { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; color:white; flex-shrink:0; font-family:'Outfit',sans-serif; }

.s1 { background:rgba(255,107,53,0.3); }

.s2 { background:rgba(255,184,0,0.3); }

.s3 { background:rgba(38,208,206,0.3); }

.rm-info { flex:1; }

.rm-info strong { display:block; font-size:14px; font-weight:700; color:white; font-family:'Outfit',sans-serif; }

.rm-info span { font-size:12px; color:rgba(255,255,255,0.4); }

.rm-status { font-family:'Outfit',sans-serif; font-size:12px; font-weight:800; }

.live { color:#FF6B35; }

.soon { color:#FFB800; }

.future { color:#26D0CE; }



/* SEO Block */

.spb-seo-block { background:white; border-top:1px solid #E8E4DF; padding:56px 32px; }

.spb-seo-inner { max-width:1280px; margin:0 auto; }

.spb-seo-inner > h2 { font-family:'Outfit',sans-serif; font-size:22px; font-weight:800; color:#2D2D2D; margin-bottom:12px; }

.spb-seo-inner > p { color:#666; font-size:14px; line-height:1.8; margin-bottom:32px; max-width:800px; }

.spb-seo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }

.spb-seo-grid h3 { font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; color:#2D2D2D; margin-bottom:10px; }

.spb-seo-grid p { font-size:13px; color:#666; line-height:1.8; }




/* ===== RESPONSIVE MOBILE ===== */

@media (max-width: 768px) {

  /* Header */

  #tnb { display: none; }

  #hd_wrapper { padding: 10px 16px; flex-wrap: wrap; gap: 10px; }

  #logo img { height: 40px; }

  .hd_sch_wr { order: 3; width: 100%; }

  #hd_sch { width: 100%; }

  #hd_sch input { width: calc(100% - 70px); padding: 10px 14px; font-size: 14px; }

  #hd_sch button { padding: 10px 16px; }

  .hd_login_wr { gap: 6px; }

  .cashback-badge { display: none; }



  /* Nav */

  #hd_menu { overflow-x: auto; scrollbar-width: none; }

  #hd_menu::-webkit-scrollbar { display: none; }

  #hd_menu .inner { display: flex; white-space: nowrap; padding: 0 8px; }

  #hd_menu ul { display: flex; flex-wrap: nowrap; }



  /* Hero */

  .spb-hero { padding: 32px 16px 28px; }

  .spb-hero-title { font-size: 28px; }

  .spb-hero-desc { font-size: 14px; }

  .spb-search-input { padding: 14px 110px 14px 16px; font-size: 14px; }

  .spb-search-btn { padding: 9px 16px; font-size: 13px; }

  .spb-stats { gap: 0; flex-wrap: wrap; }

  .stat-item { padding: 0 16px; }

  .stat-num { font-size: 22px; }



  /* Trust Bar */

  .spb-trust-inner { flex-wrap: wrap; gap: 12px; justify-content: center; }

  .trust-div { display: none; }



  /* Categories */

  .spb-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }

  .spb-section { padding: 24px 16px; }



  /* Cashback Banner */

  .spb-cashback-banner { grid-template-columns: 1fr; gap: 24px; padding: 32px 16px; }

  .spb-cb-left h2 { font-size: 28px; }

  .pct { font-size: 40px; }



  /* SEO Block */

  .spb-seo-grid { grid-template-columns: 1fr; gap: 20px; }



  /* Footer */

  .ft-top { grid-template-columns: 1fr 1fr; gap: 24px; }

  .ft-brand { grid-column: 1 / -1; }

  .ft-bottom { flex-direction: column; text-align: center; gap: 8px; }



  /* Quick Tags */

  .spb-quick-tags { gap: 6px; }

  .spb-tag { padding: 5px 10px; font-size: 12px; }

}



@media (max-width: 480px) {

  .spb-hero-title { font-size: 24px; }

  .spb-cat-grid { grid-template-columns: repeat(2, 1fr); }

  .ft-top { grid-template-columns: 1fr; }

  .stat-divider { display: none; }

  .spb-stats { gap: 16px; }

}




/* ===== MOBILE RESPONSIVE - FORCE OVERRIDE ===== */

@media (max-width: 768px) {

  #tnb { display: none !important; }

  

  #hd_wrapper { 

    padding: 10px 16px !important; 

    flex-wrap: wrap !important; 

    gap: 8px !important;

  }

  

  #logo img { height: 38px !important; }

  

  .hd_sch_wr { 

    order: 3 !important; 

    width: 100% !important;

    padding: 0 !important;

  }

  

  #hd_sch { width: 100% !important; }

  

  #hd_sch input { 

    width: calc(100% - 70px) !important; 

    padding: 10px 14px !important; 

    font-size: 14px !important;

  }

  

  /* Hero */

  .spb-hero { padding: 28px 16px 24px !important; }

  .spb-hero-title { font-size: 26px !important; letter-spacing: -0.5px !important; }

  .spb-hero-desc { font-size: 14px !important; margin-bottom: 20px !important; }

  .spb-hero-badge { font-size: 10px !important; padding: 5px 12px !important; }

  

  /* Search */

  .spb-search-wrap { padding: 0 !important; }

  .spb-search-input { 

    padding: 14px 100px 14px 16px !important; 

    font-size: 14px !important;

    border-radius: 12px !important;

  }

  .spb-search-btn { 

    padding: 9px 14px !important; 

    font-size: 13px !important;

    border-radius: 9px !important;

  }

  

  /* Stats */

  .spb-stats { flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; }

  .stat-item { padding: 0 12px !important; }

  .stat-num { font-size: 20px !important; }

  .stat-divider { display: none !important; }

  

  /* Quick Tags */

  .spb-quick-tags { gap: 6px !important; margin-bottom: 20px !important; }

  .spb-tag { padding: 5px 10px !important; font-size: 11px !important; }

  

  /* Trust Bar */

  .spb-trust-bar { padding: 12px 16px !important; overflow-x: auto !important; }

  .spb-trust-inner { gap: 16px !important; justify-content: flex-start !important; }

  .trust-div { display: none !important; }

  .trust-item strong { font-size: 12px !important; }

  .trust-item span { font-size: 10px !important; }

  

  /* Section */

  .spb-section { padding: 20px 16px !important; }

  .spb-section-title { font-size: 20px !important; }

  

  /* Categories */

  .spb-cat-grid { 

    grid-template-columns: repeat(3, 1fr) !important; 

    gap: 8px !important;

  }

  .spb-cat-card { padding: 16px 8px !important; border-radius: 12px !important; }

  .cat-icon { font-size: 28px !important; }

  .spb-cat-card strong { font-size: 11px !important; }

  .spb-cat-card span { display: none !important; }

  

  /* Cashback Banner */

  .spb-cashback-banner { 

    grid-template-columns: 1fr !important; 

    gap: 20px !important; 

    padding: 28px 16px !important;

  }

  .spb-cb-left h2 { font-size: 26px !important; }

  .pct { font-size: 38px !important; }

  

  /* SEO Block */

  .spb-seo-block { padding: 28px 16px !important; }

  .spb-seo-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  

  /* Footer */

  #ft { padding: 32px 16px 0 !important; }

  .ft-top { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }

  .ft-brand { grid-column: 1 / -1 !important; }

  .ft-bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; }

  

  /* Wrapper */

  #wrapper { display: block !important; padding: 0 !important; }

  #container { width: 100% !important; padding: 0 !important; }

}



@media (max-width: 480px) {

  .spb-hero-title { font-size: 22px !important; }

  .spb-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .ft-top { grid-template-columns: 1fr !important; }

  .spb-cashback-banner { padding: 24px 14px !important; }

}




/* ===== MOBILE FIXES ===== */

@media (max-width: 768px) {

  /* ์ƒ๋‹จ ๋ฉ”๋‰ด๋ฐ” ์ˆจ๊ธฐ๊ธฐ */

  #tnb { display: none !important; }

  

  /* ํ—ค๋” ์ •๋ฆฌ */

  #hd_wrapper { padding: 8px 12px !important; gap: 6px !important; }

  #logo img { height: 36px !important; }

  

  /* ๊ฒ€์ƒ‰์ฐฝ ํ’€width */

  .hd_sch_wr { width: 100% !important; padding: 8px 12px !important; }

  #hd_sch { width: 100% !important; display: flex !important; }

  #hd_sch input[type=text] { flex: 1 !important; width: auto !important; font-size: 14px !important; padding: 10px 12px !important; }

  

  /* ๋กœ๊ทธ์ธ/์บ์‹œ๋ฐฑ ๋ฒ„ํŠผ ์ •๋ฆฌ */

  .cashback-badge span { display: none !important; }

  .cashback-badge { padding: 6px 10px !important; font-size: 11px !important; }

  

  /* ์นดํ…Œ๊ณ ๋ฆฌ 3์—ด๋กœ */

  .spb-cat-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }

  .spb-cat-card { padding: 14px 6px !important; }

  .cat-icon { font-size: 26px !important; }

  .spb-cat-card strong { font-size: 11px !important; }

  .spb-cat-card span { display: none !important; }

  

  /* Trust bar ์Šคํฌ๋กค */

  .spb-trust-bar { overflow-x: auto !important; padding: 10px 12px !important; }

  .spb-trust-inner { width: max-content !important; gap: 20px !important; }

  .trust-div { display: none !important; }

  

  /* Hero ํฐํŠธ */

  .spb-hero-title { font-size: 26px !important; }

  .spb-hero-badge { font-size: 10px !important; }

  

  /* ์บ์‹œ๋ฐฑ ๋ฐฐ๋„ˆ 1์—ด */

  .spb-cashback-banner { grid-template-columns: 1fr !important; }

  

  /* SEO 1์—ด */

  .spb-seo-grid { grid-template-columns: 1fr !important; }

  

  /* ํ‘ธํ„ฐ 2์—ด */

  .ft-top { grid-template-columns: 1fr 1fr !important; }

  .ft-brand { grid-column: 1/-1 !important; }

}




/* ===== SHOWPINGBACK MOBILE COMPLETE FIX ===== */

@media (max-width: 768px) {

  /* How It Works */

  .spb-how-grid { grid-template-columns: 1fr !important; padding: 0 16px !important; gap: 16px !important; }

  .spb-how-card { padding: 24px 20px !important; }

  .spb-how-card h3 { font-size: 16px !important; }

  .spb-how-card p { font-size: 13px !important; }

  .how-num { font-size: 36px !important; }



  /* Calculator */

  .spb-calc-section { padding: 32px 16px !important; }

  .spb-calc-inner { grid-template-columns: 1fr !important; gap: 24px !important; }

  .spb-calc-text h2 { font-size: 24px !important; }

  .spb-calc-text p { font-size: 13px !important; }

  .spb-calc-box { padding: 20px !important; }

  .calc-res-total strong { font-size: 20px !important; }



  /* Influencer */

  .spb-influencer { padding: 32px 16px !important; }

  .spb-inf-inner { grid-template-columns: 1fr !important; gap: 24px !important; }

  .spb-influencer h2 { font-size: 24px !important; }

  .spb-influencer p { font-size: 13px !important; }

  .tier-row { padding: 10px 14px !important; }

  .tier-pct { font-size: 14px !important; }



  /* Section Headers */

  .spb-section-header h2,

  .spb-section-title { font-size: 22px !important; }

  .spb-section-sub { font-size: 13px !important; }



  /* Hero title force */

  .spb-hero-title { font-size: 26px !important; line-height: 1.2 !important; }

  .spb-hero-desc { font-size: 13px !important; line-height: 1.6 !important; }

  .spb-hero-desc br { display: none !important; }



  /* Trust bar items smaller */

  .trust-item { gap: 6px !important; }

  .ti { width: 28px !important; height: 28px !important; font-size: 10px !important; }



  /* Cashback badge text */

  .cb-badge { font-size: 10px !important; padding: 6px 10px !important; }

}



@media (max-width: 480px) {

  .spb-how-card { padding: 20px 16px !important; }

  .spb-how-card h3 { font-size: 15px !important; }

  .spb-calc-text h2 { font-size: 20px !important; }

  .spb-influencer h2 { font-size: 20px !important; }

  .spb-hero-title { font-size: 22px !important; }

  .tier-info strong { font-size: 12px !important; }

}




/* ===== MOBILE FINAL FIX ===== */

@media (max-width: 768px) {

  .spb-how-grid {

    display: grid !important;

    grid-template-columns: 1fr !important;

    padding: 0 16px !important;

    gap: 16px !important;

  }

  .spb-calc-inner {

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 24px !important;

  }

  .spb-calc-section {

    padding: 32px 16px !important;

  }

  .spb-inf-inner {

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 24px !important;

  }

  .spb-influencer {

    padding: 32px 16px !important;

  }

  .spb-cat-grid {

    display: grid !important;

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 8px !important;

  }

}




/* === SPB Community Skin === */

.spb_community { font-family: DM Sans, sans-serif !important; color: #E0E0E0 !important; background: #0F1628 !important; padding: 20px !important; }

.spb_community a { color: #26D0CE !important; text-decoration: none !important; }

.spb_community a:hover { color: #FF6B35 !important; }

.spb_community .board-header { background: linear-gradient(135deg, #1A2340 0%, #0F1628 100%) !important; border: 1px solid rgba(255,107,53,0.2) !important; border-radius: 16px !important; padding: 30px !important; margin-bottom: 24px !important; }

.spb_community .board-header h2 { font-family: Outfit, sans-serif !important; font-size: 28px !important; font-weight: 700 !important; color: #FFFFFF !important; margin-bottom: 8px !important; }

.spb_community .board-header p { color: #8892A8 !important; font-size: 14px !important; }

.spb_community .board-search { display: flex !important; gap: 12px !important; margin-bottom: 24px !important; }

.spb_community .board-search input { flex: 1 !important; background: #1A2340 !important; border: 1px solid rgba(255,107,53,0.2) !important; border-radius: 12px !important; padding: 12px 16px !important; color: #E0E0E0 !important; font-size: 14px !important; outline: none !important; }

.spb_community .board-search .btn-search { background: linear-gradient(135deg, #FF6B35, #FF9A00) !important; color: #fff !important; border: none !important; border-radius: 12px !important; padding: 12px 24px !important; font-weight: 600 !important; cursor: pointer !important; }


.spb_community .board-list { width: 100% !important; border-collapse: separate !important; border-spacing: 0 8px !important; }

.spb_community .board-list thead th { font-family: Outfit, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; color: #8892A8 !important; text-transform: uppercase !important; letter-spacing: 1px !important; padding: 12px 16px !important; text-align: left !important; border-bottom: 1px solid rgba(255,107,53,0.15) !important; background: transparent !important; }

.spb_community .board-list tbody tr { background: #1A2340 !important; transition: all 0.2s !important; }

.spb_community .board-list tbody tr:hover { background: #1E2A4A !important; }

.spb_community .board-list tbody td { padding: 16px !important; vertical-align: middle !important; border: none !important; }

.spb_community .td-num { color: #8892A8 !important; font-size: 13px !important; text-align: center !important; width: 60px !important; }

.spb_community .td-subject a { font-weight: 500 !important; color: #FFFFFF !important; font-size: 15px !important; }

.spb_community .td-subject a:hover { color: #FF6B35 !important; }

.spb_community .td-subject .comment-count { color: #FF6B35 !important; font-size: 12px !important; font-weight: 700 !important; }

.spb_community .td-name { color: #26D0CE !important; font-size: 13px !important; }

.spb_community .td-date { color: #8892A8 !important; font-size: 12px !important; }

.spb_community .td-hit { color: #8892A8 !important; font-size: 12px !important; text-align: center !important; }

.spb_community .btn-write { display: inline-block !important; background: linear-gradient(135deg, #FF6B35, #FF9A00) !important; color: #fff !important; border: none !important; border-radius: 12px !important; padding: 12px 28px !important; font-family: Outfit, sans-serif !important; font-weight: 600 !important; font-size: 14px !important; cursor: pointer !important; }

.spb_community .btn-write:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(255,107,53,0.4) !important; }

.spb_community .board-paging { display: flex !important; justify-content: center !important; gap: 6px !important; margin-top: 24px !important; }

.spb_community .board-paging a { background: #1A2340 !important; color: #8892A8 !important; border: 1px solid rgba(255,107,53,0.15) !important; border-radius: 10px !important; width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

.spb_community .board-paging strong { background: linear-gradient(135deg, #FF6B35, #FF9A00) !important; color: #fff !important; border-radius: 10px !important; width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }


.spb_community .view-wrap { background: #1A2340 !important; border: 1px solid rgba(255,107,53,0.2) !important; border-radius: 16px !important; overflow: hidden !important; margin-bottom: 24px !important; }

.spb_community .view-header { padding: 30px !important; border-bottom: 1px solid rgba(255,107,53,0.1) !important; }

.spb_community .view-header h1 { font-family: Outfit, sans-serif !important; font-size: 24px !important; font-weight: 700 !important; color: #FFFFFF !important; line-height: 1.4 !important; }

.spb_community .view-meta { display: flex !important; gap: 20px !important; color: #8892A8 !important; font-size: 13px !important; }

.spb_community .view-content { padding: 30px !important; line-height: 1.8 !important; font-size: 15px !important; color: #D0D0D0 !important; min-height: 200px !important; }

.spb_community .view-buttons { display: flex !important; justify-content: space-between !important; padding: 20px 30px !important; border-top: 1px solid rgba(255,107,53,0.1) !important; }

.spb_community .btn-list { background: #1E2A4A !important; color: #8892A8 !important; border: 1px solid rgba(255,107,53,0.2) !important; border-radius: 10px !important; padding: 10px 20px !important; font-size: 13px !important; cursor: pointer !important; }

.spb_community .btn-list:hover { border-color: #FF6B35 !important; color: #FF6B35 !important; }

.spb_community .comment-wrap { background: #1A2340 !important; border: 1px solid rgba(255,107,53,0.2) !important; border-radius: 16px !important; padding: 24px !important; margin-bottom: 24px !important; }

.spb_community .comment-title { font-family: Outfit, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; color: #FFFFFF !important; }

.spb_community .comment-item { padding: 16px 0 !important; border-bottom: 1px solid rgba(255,107,53,0.08) !important; }

.spb_community .comment-name { color: #26D0CE !important; font-weight: 600 !important; font-size: 13px !important; }

.spb_community .comment-date { color: #8892A8 !important; font-size: 12px !important; }

.spb_community .comment-text { color: #D0D0D0 !important; font-size: 14px !important; line-height: 1.6 !important; }

.spb_community .comment-form textarea { width: 100% !important; background: #0F1628 !important; border: 1px solid rgba(255,107,53,0.2) !important; border-radius: 12px !important; padding: 14px !important; color: #E0E0E0 !important; font-size: 14px !important; min-height: 100px !important; }

.spb_community .write-wrap { background: #1A2340 !important; border: 1px solid rgba(255,107,53,0.2) !important; border-radius: 16px !important; padding: 30px !important; }

.spb_community .write-wrap label { font-family: Outfit, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #8892A8 !important; text-transform: uppercase !important; }

.spb_community .write-wrap input[type="text"], .spb_community .write-wrap select, .spb_community .write-wrap textarea { width: 100% !important; background: #0F1628 !important; border: 1px solid rgba(255,107,53,0.2) !important; border-radius: 12px !important; padding: 12px 16px !important; color: #E0E0E0 !important; font-size: 14px !important; }

.spb_community .btn-submit { background: linear-gradient(135deg, #FF6B35, #FF9A00) !important; color: #fff !important; border: none !important; border-radius: 12px !important; padding: 14px 32px !important; font-family: Outfit, sans-serif !important; font-weight: 600 !important; font-size: 15px !important; cursor: pointer !important; }

/* === End SPB Community Skin === */


/* SPB Account Dropdown */

#spb_account_menu.spb_show { display:block !important; }

#spb_account_menu a:hover { background:rgba(255,107,53,0.1) !important; }