@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap');

:root {
  --h-font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --h-font-eng: 'Outfit', var(--h-font-sans);
  
  --h-pri: #111111;
  --h-pri-l: #333333;
  --h-acc: #222222;
  --h-dark: #ffffff;
  
  --h-card: #ffffff;
  --h-card-h: #f9f9f9;
  --h-card-border: #111111;
  
  --h-txt: #111111;
  --h-muted: #555555;
  --h-red: #ff4757;
  --h-grn: #2ed573;
  --h-gold: #ffa502;
  
  --h-r: 0px;
  --h-r-lg: 0px;
}

* { box-sizing: border-box; }
body, #page, .site-content, .inside-article, .site-main { 
  font-family: var(--h-font-sans); 
  background-color: var(--h-dark) !important; 
  color: var(--h-txt) !important; 
}

/* GP 테마 콘텐츠 래퍼 풀와이드 강제 — 치우침 근본 수정 */
.site-content, .content-area, .site-main,
.inside-article, .entry-content,
.generate-columns-container,
.page .inside-article .entry-content,
.single .inside-article .entry-content,
#content, .container, .grid-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

h1, h2, h3, h4, h5, h6, .ho12-logo-text, .ho12-bal-num, .ho12-pd-price, .ho12-gamtae-price, .ho12-planet-num {
  font-family: var(--h-font-eng);
}

.ho12-hover-effect { transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); cursor: pointer; }
.ho12-hover-effect:hover { transform: translateY(-4px); }

.ho12-btn {
  display: inline-block; padding: 12px 28px; border-radius: 12px;
  border: 1px solid var(--h-card-border); background: var(--h-card);
  color: #fff !important; font-size: 15px; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: all 0.4s ease; backdrop-filter: blur(10px);
}
.ho12-btn:hover {
  color: #fff !important;
  background: var(--h-card-h);
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  text-decoration: none !important;
}

.ho12-btn-primary { background: var(--h-pri); border-color: var(--h-pri); color: #fff !important; }
.ho12-btn-primary:hover {
  color: #fff !important;
  background: var(--h-pri-l) !important;
  border-color: var(--h-pri-l) !important;
}
.ho12-btn-full { width: 100%; text-align: center; }

.ho12-btn-glow {
  background: linear-gradient(135deg, var(--h-pri), var(--h-acc));
  border: none; font-weight: 700; letter-spacing: 0.5px;
  box-shadow: 0 0 20px rgba(108, 92, 231, 0.5), inset 0 0 10px rgba(255,255,255,0.2);
  color: #fff !important;
}
.ho12-btn-glow:hover {
  color: #fff !important;
  box-shadow: 0 0 35px rgba(108, 92, 231, 0.8), inset 0 0 15px rgba(255,255,255,0.4);
  transform: translateY(-3px) scale(1.02);
}
.ho12-btn.disabled { opacity: 0.4; pointer-events: none; }

.ho12-notice { padding: 20px; border-radius: var(--h-r); margin: 20px 0; background: var(--h-card); color: var(--h-txt); text-align: center; backdrop-filter: blur(12px); border: 1px solid var(--h-card-border); }
.ho12-empty { text-align: center; padding: 60px 20px; color: var(--h-muted); font-size: 16px; }

.ho12-tag { display: inline-block; padding: 4px 12px; border-radius: 20px; background: rgba(162, 155, 254, 0.15); color: var(--h-pri-l); font-size: 12px; font-weight: 600; margin: 3px; border: 1px solid rgba(162, 155, 254, 0.3); }

.pos { color: var(--h-grn); font-weight: 600; }
.neg { color: var(--h-red); font-weight: 600; }

/* ═══ 전역: 검정/어두운 배경 위 글자 보호 ═══ */
/* 배경이 어두운 버튼/링크 안의 글자를 항상 흰색으로 */
button[type="submit"],
input[type="submit"],
.button,
.alt,
.wp-element-button,
.woocommerce-Button,
.woocommerce-button,
.wc-block-components-button,
.wp-block-button__link,
.single_add_to_cart_button,
.add_to_cart_button,
.wc-forward,
.checkout-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .cart .button,
.woocommerce .wc-proceed-to-checkout a,
.woocommerce #respond input#submit,
.woocommerce .return-to-shop a,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.ho12-btn-glow,
.ho12-btn-primary,
.ho12-mp-action-btn {
  color: #ffffff !important;
}
button[type="submit"]:hover,
input[type="submit"]:hover,
.button:hover,
.alt:hover,
.wp-element-button:hover,
.woocommerce-Button:hover,
.woocommerce-button:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.wc-forward:hover,
.checkout-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .cart .button:hover,
.woocommerce .return-to-shop a:hover,
.ho12-btn-glow:hover,
.ho12-btn-primary:hover {
  color: #ffffff !important;
}

/* WooCommerce 기본 페이지 (비밀번호 찾기, 장바구니, 체크아웃 등) 스타일 */
.woocommerce-ResetPassword p,
.woocommerce-lost-password p,
.woocommerce form.lost_reset_password p,
.woocommerce .lost_reset_password label {
  color: #111111 !important;
  font-size: 15px !important;
}
.woocommerce form.lost_reset_password input[type="text"],
.woocommerce form.lost_reset_password input[type="email"] {
  border: 1.5px solid #111111 !important;
  background: #ffffff !important;
  color: #111111 !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
}
.woocommerce form.lost_reset_password button[type="submit"],
.woocommerce form.lost_reset_password input[type="submit"],
.woocommerce .woocommerce-Button {
  background: #111111 !important;
  color: #ffffff !important;
  border: 2px solid #111111 !important;
  padding: 14px 36px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  cursor: pointer !important;
}
/* 장바구니 & 상점 버튼 */
.woocommerce .return-to-shop a,
.woocommerce .wc-proceed-to-checkout a,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background: #111111 !important;
  color: #ffffff !important;
  border: 2px solid #111111 !important;
  font-weight: 700 !important;
}
.woocommerce .return-to-shop a:hover,
.woocommerce .wc-proceed-to-checkout a:hover {
  background: #333333 !important;
  color: #ffffff !important;
}
/* 상품 호버 시 텍스트 흰색 보장 */
.ho12-goods-card:hover .ho12-goods-name,
.ho12-goods-card:hover .ho12-goods-price,
.woocommerce ul.products li.product a:hover h2,
.woocommerce ul.products li.product a:hover .price,
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
  color: #111111 !important;
}
/* 상품 장바구니 담기 버튼 */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce .related.products .button,
.woocommerce .related.products .add_to_cart_button {
  display: none !important;
}
/* WooCommerce 알림 메시지 내 버튼 */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.woocommerce-message .button,
.woocommerce-notices-wrapper a.button {
  background: #111111 !important;
  color: #ffffff !important;
  border: 1.5px solid #111111 !important;
  font-weight: 700 !important;
}
.woocommerce-message a.button:hover {
  background: #333333 !important;
  color: #ffffff !important;
}

.ho12-fg { margin-bottom: 18px; }
.ho12-fg label { display: block; margin-bottom: 8px; color: var(--h-txt); font-size: 14px; font-weight: 500; }
.ho12-fg input, .ho12-fg textarea, .ho12-fg select { width: 100%; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--h-card-border); background: rgba(0,0,0,0.3); color: #fff; font-size: 15px; transition: 0.3s; }
.ho12-fg input:focus, .ho12-fg textarea:focus { outline: none; border-color: var(--h-pri); box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.2); background: rgba(0,0,0,0.5); }

@keyframes ho12Vib { 0%, 100% { transform: rotate(0); } }
.ho12-vibrate-icon { display: inline-block; }

.ho12-adult-badge { background: linear-gradient(135deg, #ff4757, #ff6b81); color: #fff; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; margin-left: 8px; cursor: pointer; box-shadow: 0 2px 10px rgba(255, 71, 87, 0.4); }

/* User Icon & Float */
.ho12-user-float { position: fixed; top: 24px; right: 24px; z-index: 9999; }
.ho12-user-icon { color: rgba(255,255,255,0.7); display: block; transition: 0.3s; }
.ho12-user-icon:hover { color: var(--h-pri-l); filter: drop-shadow(0 0 10px var(--h-pri-l)); }
.ho12-user-menu { display: none; position: absolute; top: calc(100% + 15px); right: 0; background: rgba(15, 15, 25, 0.85); backdrop-filter: blur(16px); border: 1px solid var(--h-card-border); border-radius: 14px; padding: 10px 0; min-width: 180px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; }
.ho12-user-float:hover .ho12-user-menu { display: block; opacity: 1; transform: translateY(0); }
.ho12-user-menu a { display: block; padding: 12px 20px; color: var(--h-txt); text-decoration: none; font-size: 14px; transition: 0.2s; font-weight: 500; }
.ho12-user-menu a:hover { background: rgba(255,255,255,0.06); padding-left: 24px; color: #fff; }
.ho12-menu-badge { float: right; font-size: 12px; color: var(--h-gold); font-weight: 600; font-family: var(--h-font-eng); }

/* Search */
.ho12-search-float { position: fixed; top: 24px; right: 75px; z-index: 9998; display: flex; align-items: center; }
.ho12-search-icon { font-size: 20px; padding: 8px; color: rgba(255,255,255,0.7); transition: 0.3s; }
.ho12-search-icon:hover { color: #fff; filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)); }
.ho12-search-expand { max-width: 0; overflow: hidden; visibility: hidden; transition: max-width 0.5s cubic-bezier(0.25, 1, 0.5, 1), padding 0.5s, visibility 0.5s; }
.ho12-search-float:hover .ho12-search-expand, .ho12-search-expand:focus-within { max-width: 320px; padding-left: 10px; visibility: visible; }
.ho12-search-expand input { width: 280px; padding: 12px 18px; border-radius: 25px; border: 1px solid rgba(255,255,255,0.15); background: rgba(20,20,35,0.7); backdrop-filter: blur(10px); color: #fff; font-size: 14px; }
.ho12-search-expand input:focus { border-color: var(--h-pri-l); box-shadow: 0 0 0 4px rgba(162, 155, 254, 0.2); }
.ho12-search-results { position: absolute; top: calc(100% + 15px); right: 0; width: 360px; max-height: 420px; overflow-y: auto; background: rgba(15, 15, 25, 0.9); backdrop-filter: blur(20px); border-radius: 16px; border: 1px solid var(--h-card-border); box-shadow: 0 20px 50px rgba(0,0,0,0.7); display: none; }
.ho12-search-results.active { display: block; animation: ho12FadeIn 0.3s ease; }
@keyframes ho12FadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.ho12-sr-group h4 { padding: 14px 18px 6px; font-size: 12px; color: var(--h-pri-l); letter-spacing: 1px; text-transform: uppercase; margin: 0; }
.ho12-sr-item { display: flex; align-items: center; gap: 14px; padding: 12px 18px; color: var(--h-txt); text-decoration: none; transition: 0.2s; border-bottom: 1px solid rgba(255,255,255,0.03); }
.ho12-sr-item:hover { background: rgba(255,255,255,0.08); padding-left: 22px; }
.ho12-sr-item img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

/* Common Pages — 콘텐츠 중앙정렬 전체 페이지 */
.ho12-mypage, .ho12-library, .ho12-charge, .ho12-contact, .ho12-search-page {
  width: 100%;
  max-width: 960px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 60px 24px;
  animation: ho12FadeIn 0.6s ease;
  box-sizing: border-box;
}
/* GP 테마 콘테이너를 풀와이드로 강제 — 중앙정렬 근본 해결 */
.page-template-default .entry-content,
.entry-content, .site-main, .content-area, #primary, #content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}
/* 로그인 필요 안내 컨테이너 */
.ho12-notice-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 40px 24px;
  width: 100%;
  text-align: center;
}
.ho12-notice {
  padding: 36px 40px;
  border-radius: 20px;
  font-size: 15px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  max-width: 420px;
  width: 100%;
  line-height: 1.8;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.ho12-notice a { color: var(--h-pri-l); text-decoration: none; font-weight: 600; }
.ho12-notice-ok { background: rgba(46,213,115,0.1); color: var(--h-grn); border-color: rgba(46,213,115,0.2); }
.ho12-notice-err { background: rgba(255,71,87,0.1); color: var(--h-red); border-color: rgba(255,71,87,0.2); }

/* My Page — Premium */
.ho12-mp-hero { position: relative; border-radius: var(--h-r-lg); overflow: hidden; margin-bottom: 28px; border: 1px solid rgba(255,255,255,0.06); }
.ho12-mp-hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(108,92,231,0.3), rgba(0,206,201,0.15), rgba(253,203,110,0.1)); filter: blur(0); }
.ho12-mp-hero-inner { position: relative; display: flex; align-items: center; gap: 24px; padding: 36px; z-index: 2; }
.ho12-mp-avatar img { width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--h-pri); box-shadow: 0 0 25px rgba(108,92,231,0.5); object-fit: cover; }
.ho12-mp-profile h2 { margin: 0 0 4px; color: #fff; font-size: 24px; font-weight: 700; }
.ho12-mp-email { color: var(--h-muted); font-size: 13px; margin: 0 0 14px; }
.ho12-mp-stats-row { display: flex; gap: 24px; }
.ho12-mp-stat { text-align: center; }
.ho12-mp-stat-num { display: block; font-size: 22px; font-weight: 800; color: #fff; font-family: var(--h-font-eng); }
.ho12-mp-stat-label { font-size: 12px; color: var(--h-muted); }

/* 빠른 메뉴 */
.ho12-mp-quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 28px; }
.ho12-mp-qcard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; text-decoration: none; color: var(--h-txt); font-size: 13px; font-weight: 500; transition: all 0.3s ease; cursor: pointer; }
.ho12-mp-qcard:hover { background: rgba(108, 92, 231, 0.25) !important; transform: translateY(-4px) !important; box-shadow: 0 8px 25px rgba(108, 92, 231, 0.3) !important; border-color: rgba(108, 92, 231, 0.5) !important; }
.ho12-mp-qcard:hover span { color: #ffffff !important; text-shadow: 0 0 10px rgba(255,255,255,0.8) !important; }
.ho12-mp-qicon { font-size: 28px; }

/* 마이페이지 탭 */
.ho12-mp-tabs { display: flex; gap: 4px; border-bottom: 2px solid rgba(255,255,255,0.06); margin-bottom: 0; }
.ho12-mp-tab { padding: 12px 24px; background: none; border: none; color: var(--h-muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.3s; position: relative; border-radius: 10px 10px 0 0; }
.ho12-mp-tab:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.08) !important; text-shadow: 0 0 8px rgba(255,255,255,0.5) !important; }
.ho12-mp-tab.active { color: #fff; background: rgba(255,255,255,0.05); }
.ho12-mp-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--h-pri), var(--h-acc)); }
.ho12-mp-panel { display: none; padding: 28px 0; animation: ho12FadeIn 0.4s ease; }
.ho12-mp-panel.active { display: block; }

/* 감태 잔액 카드 */
.ho12-mp-bal-card { padding: 24px 28px; background: linear-gradient(135deg, rgba(108,92,231,0.2), rgba(0,206,201,0.15)); border: 1px solid rgba(108,92,231,0.3); border-radius: 16px; margin-bottom: 24px; }
.ho12-mp-bal-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ho12-mp-bal-label { color: rgba(255,255,255,0.6); font-size: 14px; }
.ho12-mp-charge-link { color: var(--h-pri-l); text-decoration: none; font-size: 14px; font-weight: 600; transition: 0.2s; }
.ho12-mp-charge-link:hover { color: #fff; }
.ho12-mp-bal-amount { font-size: 36px; font-weight: 800; color: #fff; font-family: var(--h-font-eng); }

/* History/Spec Tables */
.ho12-hist-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ho12-hist-table th { padding: 12px 14px; text-align: left; color: var(--h-muted); font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.ho12-hist-table td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); color: rgba(255,255,255,0.8); }
.ho12-hist-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.ho12-hist-table .pos { color: var(--h-grn); font-weight: 700; font-family: var(--h-font-eng); }
.ho12-hist-table .neg { color: var(--h-red); font-weight: 700; font-family: var(--h-font-eng); }
.ho12-empty { text-align: center; padding: 48px 24px; color: var(--h-muted); font-size: 14px; }

/* Works Grid */
.ho12-works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 50px 24px; animation: ho12FadeIn 0.6s ease; }
.ho12-work-card { border-radius: var(--h-r-lg); overflow: hidden; background: rgba(20,20,35,0.5); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.06); text-decoration: none; color: var(--h-txt); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); display: block; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.ho12-work-card:hover { transform: none; box-shadow: none; }
.ho12-work-card.completed .ho12-wc-img { height: 320px; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 20px; position: relative; transition: 0.5s; }
.ho12-work-card:hover.completed .ho12-wc-img { transform: scale(1.05); }
.ho12-wc-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%); pointer-events: none; }
.ho12-wc-img .ho12-wc-title { position: relative; z-index: 2; background: rgba(10,10,20,0.6); padding: 8px 16px; border-radius: 10px; color: #fff; font-size: 16px; font-weight: 700; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); }
.ho12-work-card.ongoing .ho12-wc-text { padding: 30px 24px; }
.ho12-wc-text h3 { margin: 0 0 10px; color: #fff; font-size: 20px; }
.ho12-wc-text p { color: var(--h-muted); font-size: 14px; margin: 0; line-height: 1.6; }

/* Single Work (Details) */
.ho12-single-work { max-width: 1100px !important; margin: 0 auto; padding: 0 24px 60px; animation: ho12FadeIn 0.6s ease; }
.ho12-sw-hero { position: relative; border-radius: var(--h-r-lg); overflow: hidden; margin-bottom: 40px; margin-top: 40px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); }
.ho12-sw-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(30px) brightness(0.4); }
.ho12-sw-inner { position: relative; display: flex; gap: 40px; padding: 50px; background: linear-gradient(to right, rgba(10,10,20,0.8), rgba(20,20,35,0.4)); }
.ho12-sw-cover { width: 220px; border-radius: 16px; box-shadow: 0 15px 35px rgba(0,0,0,0.6); transition: 0.4s; }
.ho12-sw-cover:hover { transform: scale(1.03) rotate(1deg); }
.ho12-sw-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ho12-sw-info h1 { color: #fff; margin: 0 0 12px; font-size: 38px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.ho12-sw-author { color: var(--h-pri-l); margin: 0 0 16px; font-size: 16px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.ho12-sw-desc { color: rgba(255,255,255,0.8); font-size: 16px; line-height: 1.8; margin-top: 20px; background: rgba(0,0,0,0.3); padding: 20px; border-radius: 12px; }

/* Planets (Episodes) */
.ho12-planets { display: flex; flex-wrap: wrap; justify-content: center !important; gap: 20px; padding: 20px 0; }
.ho12-planet { position: relative; width: 140px; height: 140px; border-radius: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 2px solid transparent; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); cursor: pointer; }
.ho12-planet::before { content: ''; position: absolute; inset: 2px; border-radius: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent); pointer-events: none; }
.ho12-planet:hover { transform: scale(1.1) translateY(-5px); z-index: 5; }

.ho12-planet.free { border-color: rgba(46, 213, 115, 0.5); background: radial-gradient(circle at 30% 30%, #2ed573, #05c46b); box-shadow: 0 0 20px rgba(46, 213, 115, 0.3), inset -5px -5px 15px rgba(0,0,0,0.3); }
.ho12-planet.free:hover { box-shadow: 0 0 30px rgba(46, 213, 115, 0.6), inset -5px -5px 15px rgba(0,0,0,0.3); }

.ho12-planet.locked { border-color: rgba(255, 165, 2, 0.5); background: radial-gradient(circle at 30% 30%, #ffa502, #eccc68); box-shadow: 0 0 20px rgba(255, 165, 2, 0.3), inset -5px -5px 15px rgba(0,0,0,0.3); }
.ho12-planet.locked:hover { box-shadow: 0 0 30px rgba(255, 165, 2, 0.6), inset -5px -5px 15px rgba(0,0,0,0.3); }

.ho12-planet.owned { border-color: rgba(108, 92, 231, 0.5); background: radial-gradient(circle at 30% 30%, #a29bfe, #6c5ce7); box-shadow: 0 0 20px rgba(108, 92, 231, 0.3), inset -5px -5px 15px rgba(0,0,0,0.3); }
.ho12-planet.owned:hover { box-shadow: 0 0 30px rgba(108, 92, 231, 0.6), inset -5px -5px 15px rgba(0,0,0,0.3); }

/* 성인 에피소드 미세 요동치듯 흔들리는 진동 효과 */
@keyframes ho12AdultPlanetVibe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.03) rotate(-2.5deg) translate(-0.5px, 0.5px); }
  40% { transform: scale(0.97) rotate(2deg) translate(0.5px, -0.5px); }
  60% { transform: scale(1.03) rotate(-1.5deg) translate(-0.5px, -0.5px); }
  80% { transform: scale(0.97) rotate(1.5deg) translate(0.5px, 0.5px); }
}
.ho12-planet.adult-ep { animation: ho12AdultPlanetVibe 0.6s infinite ease-in-out; }
.ho12-planet.adult-ep:hover { animation-play-state: paused; } /* 마우스 올렸을 땐 클릭의 편리성을 위해 일시정지 */

.ho12-planet-inner { text-decoration: none; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }
.ho12-planet-num { font-size: 22px; font-weight: 800; }
.ho12-planet-days { font-size: 11px; color: rgba(255,255,255,0.8); font-weight: 500; margin-top: 2px; }

/* 툴팁 공통 - 프리미엄 다크 타원형 말풍선 */
.ho12-tooltip {
  display: none;
  position: absolute;
  z-index: 10;
  background: rgba(15, 15, 30, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px; /* 극단적으로 둥글게 */
  padding: 6px 19px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.05);
  align-items: center;
  gap: 4px;
  animation: ho12FadeIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

/* 툴팁 내 물음표(배지) 스타일 */
.ho12-tooltip .ho12-tt-btn {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  margin-left: 2px;
  transition: all 0.2s ease;
}

/* 1. 일반 비활성화 툴팁 - 좌우 대칭 배치 */
.ho12-tt-left {
  bottom: 85%;
  right: 52%;
  left: auto;
  transform: none;
  border-color: rgba(46, 213, 115, 0.25);
}
.ho12-tt-left .ho12-tt-btn {
  border: 1px solid rgba(46, 213, 115, 0.6);
  color: rgb(46, 213, 115);
  background: rgba(46, 213, 115, 0.08);
}
.ho12-tt-left::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 20px; /* 오른쪽 끝 아래에 꼬리 배치 */
  border-width: 6px 6px 0 0;
  border-style: solid;
  border-color: rgba(15, 15, 30, 0.96) transparent transparent transparent;
  display: block;
  width: 0;
  height: 0;
}

.ho12-tt-right {
  bottom: 85%;
  left: 52%;
  right: auto;
  transform: none;
  border-color: rgba(46, 213, 115, 0.25);
}
.ho12-tt-right .ho12-tt-btn {
  border: 1px solid rgba(46, 213, 115, 0.6);
  color: rgb(46, 213, 115);
  background: rgba(46, 213, 115, 0.08);
}
.ho12-tt-right::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 20px; /* 왼쪽 끝 아래에 꼬리 배치 */
  border-width: 6px 0 0 6px;
  border-style: solid;
  border-color: rgba(15, 15, 30, 0.96) transparent transparent transparent;
  display: block;
  width: 0;
  height: 0;
}

/* 2. 성인 비활성화 툴팁 - 정중앙 배치 */
.ho12-tt-adult {
  bottom: 85%;
  left: 50%;
  transform: translateX(-50%);
  border-color: rgba(255, 71, 87, 0.4);
}
.ho12-tt-adult .ho12-tt-btn {
  border: 1px solid rgba(255, 71, 87, 0.6);
  color: rgb(255, 71, 87);
  background: rgba(255, 71, 87, 0.08);
}
.ho12-tt-adult::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: rgba(15, 15, 30, 0.96) transparent transparent transparent;
  display: block;
  width: 0;
  height: 0;
}

.ho12-planet.locked:hover .ho12-tt-left,
.ho12-planet.locked:hover .ho12-tt-right,
.ho12-planet.adult-ep:hover .ho12-tt-adult {
  display: inline-flex;
}

/* Contact Premium Layout */
.ho12-contact-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    margin: 40px auto;
    max-width: 1100px;
    align-items: stretch;
}

@media (max-width: 900px) {
    .ho12-contact-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.ho12-contact-dashboard {
    background: linear-gradient(135deg, rgba(20, 15, 38, 0.65), rgba(8, 8, 20, 0.85));
    border: 1px solid rgba(108, 92, 231, 0.25);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(108, 92, 231, 0.05);
    backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.ho12-contact-dashboard::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 206, 201, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

.ho12-dashboard-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
}

.ho12-signal-pulse {
    width: 10px;
    height: 10px;
    background-color: var(--h-grn);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px var(--h-grn);
    animation: ho12SignalPulse 1.5s infinite;
}

@keyframes ho12SignalPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(46, 213, 115, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 213, 115, 0); }
}

.ho12-signal-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--h-grn);
    text-shadow: 0 0 5px rgba(46, 213, 115, 0.3);
}

.ho12-dashboard-title h2 {
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.ho12-dashboard-subtitle {
    color: var(--h-pri-l);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.ho12-dashboard-desc {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    font-size: 14.5px;
    margin-bottom: 30px;
}

.ho12-cosmic-stats {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ho12-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
    font-size: 13px;
}

.ho12-stat-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ho12-stat-label {
    color: var(--h-muted);
    font-weight: 500;
}

.ho12-stat-val {
    color: #fff;
    font-family: monospace;
    font-weight: 600;
}

.ho12-stat-val.val-green {
    color: var(--h-grn);
    text-shadow: 0 0 5px rgba(46, 213, 115, 0.2);
}

.ho12-dashboard-footer-decor {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 10px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
}

.ho12-decor-line {
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), transparent);
}

/* Right Panel form styling */
.ho12-contact-form-panel {
    background: linear-gradient(135deg, rgba(12, 10, 24, 0.75), rgba(5, 5, 12, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(15px);
}

.ho12-form-panel-title {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 6px;
}

.ho12-form-panel-desc {
    color: var(--h-muted);
    font-size: 14px;
    margin-bottom: 25px;
}

/* Contact Result Improvements */
.ho12-ct-result {
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
}

.ho12-ct-result.success {
    background: rgba(46, 213, 115, 0.08);
    border: 1px solid rgba(46, 213, 115, 0.3);
    color: #fff;
}

.ho12-ct-result.success h3 {
    color: var(--h-grn);
    font-size: 20px;
    margin: 15px 0 8px;
    font-weight: 700;
}

.ho12-ct-result.success p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13.5px;
    margin-bottom: 0;
}

.ho12-ct-result.fail {
    background: rgba(255, 71, 87, 0.08);
    border: 1px solid rgba(255, 71, 87, 0.3);
    color: var(--h-red);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
}

/* Animated Success Icon */
.ho12-ct-success-icon-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ho12-ct-success-icon {
    font-size: 40px;
    z-index: 2;
    animation: ho12UfoFloat 3s ease-in-out infinite;
}

.ho12-ct-pulse-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(46, 213, 115, 0.4);
    border-radius: 50%;
    animation: ho12SuccessPulse 2s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

@keyframes ho12UfoFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(5deg); }
}

@keyframes ho12SuccessPulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* Form Input Cosmic Focus & Button Animations */
.ho12-ct-form .ho12-fg input, 
.ho12-ct-form .ho12-fg textarea {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 14.5px;
    border-radius: 12px;
    padding: 14px 18px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ho12-ct-form .ho12-fg input::placeholder, 
.ho12-ct-form .ho12-fg textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.ho12-ct-form .ho12-fg input:focus, 
.ho12-ct-form .ho12-fg textarea:focus {
    border-color: #a29bfe;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 15px rgba(162, 155, 254, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.5);
    outline: none;
}

.ho12-btn-submit {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-weight: 700;
    letter-spacing: 1px;
}

.ho12-btn-submit:hover {
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.5);
    transform: translateY(-2px);
}

.ho12-btn-submit:hover span {
    display: inline-block;
    animation: ho12RocketShake 0.5s ease infinite alternate;
}

@keyframes ho12RocketShake {
    0% { transform: translate(0, 0); }
    100% { transform: translate(1px, -2px) scale(1.02); }
}

.ho12-btn-success-back {
    transition: all 0.3s;
}
.ho12-btn-success-back:hover {
    box-shadow: 0 0 20px rgba(0, 206, 201, 0.5);
    transform: translateY(-2px);
}

/* About Galaxy - Full Width */
.ho12-about { position: relative; width: 100vw !important; min-height: 100vh; overflow: hidden; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; }
.ho12-galaxy-bg { position: relative; width: 100%; min-height: 100vh; background: radial-gradient(ellipse at center, #1a0533 0%, #070712 60%, #000 100%); display: flex; align-items: center; justify-content: center; }
.ho12-stars { position: absolute; inset: 0; background: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1.5px 1.5px at 40px 70px, rgba(255,255,255,0.8), transparent), radial-gradient(1px 1px at 90px 40px, #fff, transparent), radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.9), transparent); background-size: 250px 150px; animation: ho12Star 100s linear infinite; }
.ho12-stars.s2 { background: radial-gradient(1.5px 1.5px at 50px 60px, rgba(162, 155, 254, 0.8), transparent), radial-gradient(2px 2px at 100px 20px, rgba(108, 92, 231, 0.6), transparent); background-size: 300px 200px; animation: ho12Star 150s linear infinite reverse; }
.ho12-stars.s3 { background: radial-gradient(2.5px 2.5px at 70px 50px, rgba(253, 203, 110, 0.8), transparent); background-size: 400px 250px; animation: ho12Star 200s linear infinite; }
.ho12-nebula { position: absolute; width: 600px; height: 600px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(108, 92, 231, 0.2), rgba(0, 206, 201, 0.1) 40%, transparent 70%); border-radius: 50%; filter: blur(60px); animation: ho12Neb 10s ease-in-out infinite alternate; }

@keyframes ho12Star { from { transform: translateY(0); } to { transform: translateY(-200px); } }
@keyframes ho12Neb { 0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(1.3) rotate(15deg); opacity: 1; } }

.ho12-about-center { position: relative; z-index: 2; text-align: center; padding: 60px; max-width: 800px; background: rgba(10,10,20,0.3); backdrop-filter: blur(15px); border-radius: 30px; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
.ho12-about-center h1 { font-size: 56px; font-weight: 800; color: #fff; margin: 0 0 16px; text-shadow: 0 0 40px rgba(108, 92, 231, 0.8); letter-spacing: -1px; }
.ho12-about-sub { font-size: 22px; color: var(--h-pri-l); margin: 0 0 30px; font-weight: 500; }
.ho12-about-desc { color: rgba(255,255,255,0.85); line-height: 1.9; margin-bottom: 40px; font-size: 16px; }

/* Charge Page & Cosmic UI */

/* 호버 시 외부 테마 등으로 글자가 안 보이는 현상 완벽 방지 */
.ho12-btn:hover,
.ho12-btn-primary:hover,
.ho12-btn-glow:hover,
.ho12-charge-btn:hover,
#ho12-gift-send:hover,
#ho12-gift-claim:hover,
.ho12-hover-effect:hover {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
}

/* 충전 팩 카드 내부 텍스트 호버 가독성 강제 유지 */
.ho12-charge-btn:hover .ho12-charge-pack-badge,
.ho12-charge-btn:hover .ho12-charge-amount-value strong,
.ho12-charge-btn:hover .ho12-charge-amount-value small,
.ho12-charge-btn:hover .ho12-charge-action-btn,
.ho12-charge-btn:hover .ho12-popular-badge {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7) !important;
}

/* 감태 충전 2컬럼 컨테이너 */
.ho12-charge-container {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 40px;
  margin: 40px auto;
  max-width: 1100px;
  align-items: start;
}

@media (max-width: 960px) {
  .ho12-charge-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* 좌측 사이드바 영역 */
.ho12-charge-wallet-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 가상 지갑 신분증 카드 */
.ho12-wallet-card {
  position: relative;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.15) 0%, rgba(0, 206, 201, 0.04) 100%);
  border: 1px solid rgba(108, 92, 231, 0.35);
  border-radius: 24px;
  padding: 30px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), inset 0 0 25px rgba(108, 92, 231, 0.1);
  backdrop-filter: blur(16px);
  z-index: 1;
}

/* 지갑 내부 발광 오로라 효과 */
.ho12-wallet-card-bg-effect {
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.08) 0%, rgba(0, 206, 201, 0.03) 40%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  animation: ho12Neb 15s ease-in-out infinite alternate;
}

.ho12-wallet-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}

.ho12-wallet-status-light {
  width: 8px;
  height: 8px;
  background-color: var(--h-grn);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px var(--h-grn);
  animation: ho12SignalPulse 1.8s infinite;
}

.ho12-wallet-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--h-muted);
  text-transform: uppercase;
}

.ho12-wallet-balance-wrap {
  margin-bottom: 20px;
}

.ho12-bal-label {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.ho12-balance-display {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ho12-bal-num {
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 15px rgba(255, 255, 255, 0.15);
  line-height: 1.1;
}

.ho12-bal-icon {
  font-size: 28px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.ho12-wallet-decor-lines {
  font-size: 10px;
  font-family: monospace;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 1px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
}

/* 최근 이동 내역 판넬 */
.ho12-wallet-history-panel {
  background: linear-gradient(135deg, rgba(15, 15, 25, 0.6), rgba(8, 8, 15, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 24px;
  backdrop-filter: blur(12px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.ho12-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 12px;
}

.ho12-panel-header h3 {
  color: #fff;
  font-size: 16px;
  margin: 0;
  font-weight: 700;
}

.ho12-count-badge {
  font-size: 11px;
  background: rgba(108, 92, 231, 0.2);
  color: var(--h-pri-l);
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid rgba(108, 92, 231, 0.3);
}

.ho12-hist-table-wrap {
  max-height: 330px;
  overflow-y: auto;
  margin-top: 12px;
  padding-right: 4px;
}

/* 거래내역 전용 스크롤바 디자인 */
.ho12-hist-table-wrap::-webkit-scrollbar {
  width: 5px;
}
.ho12-hist-table-wrap::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.01);
}
.ho12-hist-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
}
.ho12-hist-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(108, 92, 231, 0.4);
}

.ho12-hist-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.ho12-hist-table th, 
.ho12-hist-table td {
  padding: 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
  background: transparent !important;
}

.ho12-hist-table th {
  color: var(--h-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ho12-hist-table tr:hover td {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* 우측 샵 영역 */
.ho12-charge-shop-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ho12-shop-header h2 {
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 8px;
}

.ho12-shop-header p {
  color: var(--h-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.ho12-charge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 600px) {
  .ho12-charge-grid {
    grid-template-columns: 1fr;
  }
}

/* 프리미엄 3D 충전 카드 */
.ho12-charge-btn {
  position: relative;
  padding: 28px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 185px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* BEST VALUE, POPULAR 리본 뱃지 */
.ho12-popular-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, var(--h-gold), #ffbe76);
  color: #070712 !important;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(255, 165, 2, 0.4);
}

.ho12-charge-btn.popular {
  border-color: rgba(255, 165, 2, 0.3);
  background: rgba(255, 165, 2, 0.02);
}

/* 등급 배지 */
.ho12-charge-pack-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--h-pri-l);
  background: rgba(108, 92, 231, 0.12);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(108, 92, 231, 0.2);
}

.ho12-charge-amount-value {
  margin: 15px 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ho12-charge-amount-value strong {
  font-size: 36px;
  font-weight: 800;
  font-family: var(--h-font-eng);
  color: #fff;
  line-height: 1;
}

.ho12-charge-amount-value small {
  font-size: 13px;
  color: var(--h-muted);
  font-weight: 600;
}

/* 카드 하단 버튼 데코 */
.ho12-charge-action-btn {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

/* 3D 충전 카드 마우스 호버 */
.ho12-charge-btn:hover {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.85) 0%, rgba(0, 206, 201, 0.75) 100%) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(108, 92, 231, 0.55) !important;
}

.ho12-charge-btn:hover * {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

.ho12-charge-btn:hover .ho12-charge-pack-badge {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.ho12-charge-btn:hover .ho12-charge-action-btn {
  background: #ffffff !important;
  color: #020208 !important;
  border-color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3) !important;
}

/* 선물하기 대시보드 */
.ho12-gift-dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .ho12-gift-dashboard {
    grid-template-columns: 1fr;
  }
}

.ho12-gift-panel-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 24px;
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.ho12-gift-panel-title h4 {
  color: #fff;
  font-size: 16px;
  margin: 0 0 6px;
  font-weight: 700;
}

.ho12-gift-panel-title p {
  color: var(--h-muted);
  font-size: 12.5px;
  margin: 0;
  line-height: 1.5;
}

.ho12-gift-row {
  display: flex;
  gap: 10px;
  margin: 0;
}

.ho12-gift-row select, 
.ho12-gift-row input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 14px;
  transition: all 0.3s ease;
  height: 48px;
  outline: none;
}

.ho12-gift-row select:focus, 
.ho12-gift-row input:focus {
  border-color: var(--h-pri-l);
  box-shadow: 0 0 10px rgba(162, 155, 254, 0.3);
  background: rgba(0, 0, 0, 0.5);
}

.ho12-gift-row select option {
  background: var(--h-dark);
  color: #fff;
}

.ho12-gift-row .ho12-btn {
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 14px;
  white-space: nowrap;
}

/* Goods */
.ho12-goods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 50px 24px; }
.ho12-goods-card { overflow: hidden; background: #ffffff; padding: 14px 14px 20px 14px; text-decoration: none; color: #111111; transition: all 0.3s ease; border: 1.5px solid #111111; border-radius: 0px; display: flex; flex-direction: column; box-shadow: none; transform: none !important; }
.ho12-goods-card:nth-child(even) { transform: none !important; }
.ho12-goods-card:hover { transform: scale(1.02) !important; box-shadow: none; z-index: 10; background: #ffffff; }
.ho12-goods-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: 0.3s; border-radius: 0px; border: 1.5px solid #111111; box-shadow: none; }
.ho12-goods-card:hover img { transform: scale(1.01); }
.ho12-goods-card h4 { padding: 14px 4px 6px; margin: 0; color: #111111 !important; font-size: 16px; font-weight: 800; text-align: center; letter-spacing: -0.5px; }
.ho12-goods-card .ho12-gamtae-price { padding: 0; display: block; font-size: 14px; color: #111111 !important; font-weight: 700; font-family: var(--h-font-eng); text-align: center; }

/* ═══ Single Product Page — Premium ═══ */

/* 브레드크럼 */
.ho12-pd-breadcrumb { max-width: 1100px; margin: 0 auto; padding: 20px 24px 0; animation: ho12FadeIn 0.5s ease; }
.ho12-pd-bread-inner { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--h-muted); flex-wrap: wrap; }
.ho12-pd-bread-inner a { color: var(--h-muted); text-decoration: none; transition: 0.2s; }
.ho12-pd-bread-inner a:hover { color: var(--h-pri-l); }
.ho12-bread-sep { opacity: 0.4; }
.ho12-bread-current { color: var(--h-txt); font-weight: 500; }

/* 메인 레이아웃 */
.ho12-pd-wrap { display: flex; gap: 48px; max-width: 1100px; margin: 0 auto; padding: 40px 24px 60px; animation: ho12FadeIn 0.6s ease; }

/* 갤러리 */
.ho12-pd-gallery { flex: 1; min-width: 0; position: sticky; top: 100px; align-self: flex-start; }
.ho12-pd-main-wrap { position: relative; border-radius: var(--h-r-lg); overflow: hidden; background: rgba(20,20,35,0.4); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.ho12-pd-main { overflow: hidden; cursor: zoom-in; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.ho12-pd-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, opacity 0.2s ease; }
.ho12-pd-soldout-badge { position: absolute; top: 20px; left: 20px; z-index: 5; padding: 8px 18px; background: rgba(255,71,87,0.9); color: #fff; font-size: 13px; font-weight: 800; border-radius: 8px; letter-spacing: 1px; backdrop-filter: blur(6px); box-shadow: 0 4px 15px rgba(255,71,87,0.4); }
.ho12-pd-fullscreen { position: absolute; bottom: 16px; right: 16px; z-index: 5; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.ho12-pd-fullscreen:hover { background: var(--h-pri); border-color: var(--h-pri); transform: scale(1.1); }

/* 썸네일 */
.ho12-pd-thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.ho12-pd-thumb { width: 72px; height: 72px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; transition: all 0.3s ease; opacity: 0.5; flex-shrink: 0; overflow: hidden; }
.ho12-pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ho12-pd-thumb.active, .ho12-pd-thumb:hover { border-color: var(--h-pri); opacity: 1; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(108,92,231,0.3); }

/* 상품 정보 */
.ho12-pd-info { flex: 1; min-width: 0; padding: 10px 0; }
.ho12-pd-category { font-size: 13px; color: var(--h-pri-l); font-weight: 600; margin-bottom: 10px; letter-spacing: 0.5px; }
.ho12-pd-category a { color: var(--h-pri-l); text-decoration: none; }
.ho12-pd-title { color: #fff; margin: 0 0 16px; font-size: 36px; line-height: 1.25; font-weight: 800; letter-spacing: -0.5px; }

/* 별점 */
.ho12-pd-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.ho12-pd-stars { color: var(--h-gold); font-size: 18px; letter-spacing: 2px; }
.ho12-pd-rate-num { color: var(--h-gold); font-weight: 700; font-size: 15px; font-family: var(--h-font-eng); }
.ho12-pd-review-count { color: var(--h-muted); font-size: 13px; }

/* 가격 */
.ho12-pd-price-wrap { display: flex; align-items: baseline; gap: 10px; margin-bottom: 24px; padding: 20px 24px; background: linear-gradient(135deg, rgba(108,92,231,0.12), rgba(0,206,201,0.08)); border-radius: 16px; border: 1px solid rgba(108,92,231,0.2); }
.ho12-pd-price-icon { font-size: 28px; }
.ho12-pd-price-num { font-size: 38px; font-weight: 800; color: var(--h-gold); font-family: var(--h-font-eng); text-shadow: 0 2px 10px rgba(255,165,2,0.3); }
.ho12-pd-price-unit { font-size: 18px; color: var(--h-gold); font-weight: 600; opacity: 0.8; }

/* 짧은 설명 */
.ho12-pd-short { color: rgba(255,255,255,0.75); font-size: 15px; line-height: 1.7; margin-bottom: 20px; }
.ho12-pd-short p { margin: 0 0 8px; }

/* 상태 뱃지 */
.ho12-pd-status { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.ho12-pd-status-item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; font-size: 13px; color: var(--h-muted); font-weight: 500; }
.ho12-pd-status-dot { width: 8px; height: 8px; border-radius: 50%; }
.ho12-pd-status-dot.in { background: var(--h-grn); box-shadow: 0 0 8px rgba(46,213,115,0.6); }
.ho12-pd-status-dot.out { background: var(--h-red); box-shadow: 0 0 8px rgba(255,71,87,0.6); }

/* 수량 */
.ho12-pd-qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ho12-pd-qty-row label { color: var(--h-txt); font-size: 15px; font-weight: 600; min-width: 40px; }
.ho12-pd-qty-control { display: flex; align-items: center; gap: 0; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.3); }
.ho12-qty-btn { width: 44px; height: 44px; border: none; background: rgba(255,255,255,0.05); color: #fff; font-size: 20px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.ho12-qty-btn:hover { background: var(--h-pri); }
.ho12-pd-qty-control .qty { width: 60px; text-align: center; padding: 10px; border: none; border-left: 1px solid rgba(255,255,255,0.08); border-right: 1px solid rgba(255,255,255,0.08); background: transparent; color: #fff; font-size: 16px; font-weight: 700; font-family: var(--h-font-eng); outline: none; -moz-appearance: textfield; }
.ho12-pd-qty-control .qty::-webkit-inner-spin-button { -webkit-appearance: none; }

/* 가격 계산 */
.ho12-pd-calc { padding: 20px 24px; background: linear-gradient(145deg, rgba(30,30,50,0.6), rgba(15,15,25,0.6)); backdrop-filter: blur(10px); border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); margin-bottom: 24px; }
.ho12-pd-calc-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; color: rgba(255,255,255,0.7); }
.ho12-pd-calc-row strong { font-family: var(--h-font-eng); }
.ho12-pd-calc-total { font-size: 18px; font-weight: 800; color: var(--h-gold); border-top: 1px solid rgba(255,255,255,0.08); padding-top: 16px; margin-top: 8px; }
.ho12-pd-calc-total strong { font-size: 22px; }

/* 액션 버튼 */
.ho12-pd-actions { display: flex; gap: 12px; }
.ho12-pd-cart-btn { flex: 1; padding: 16px 28px; border-radius: 14px; border: none; background: linear-gradient(135deg, var(--h-pri), #8b7cf7); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1); display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 25px rgba(108,92,231,0.4); }
.ho12-pd-cart-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(108,92,231,0.6); background: linear-gradient(135deg, #8b7cf7, var(--h-acc)); }
.ho12-pd-cart-btn.disabled { opacity: 0.4; pointer-events: none; }
.ho12-pd-wish-btn { width: 54px; height: 54px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; flex-shrink: 0; }
.ho12-pd-wish-btn:hover { border-color: var(--h-red); color: var(--h-red); background: rgba(255,71,87,0.1); }
.ho12-pd-wish-btn.wished { color: var(--h-red); background: rgba(255,71,87,0.15); border-color: var(--h-red); }
.ho12-pd-wish-btn.wished svg { fill: var(--h-red); }

/* ═══ 탭 섹션 ═══ */
.ho12-pd-tabs-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px 60px; opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.ho12-pd-tabs-wrap.ho12-visible { opacity: 1; transform: translateY(0); }
.ho12-pd-tabs { display: flex; gap: 4px; border-bottom: 2px solid rgba(255,255,255,0.06); margin-bottom: 0; }
.ho12-pd-tab { padding: 14px 28px; background: none; border: none; color: var(--h-muted); font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.3s; position: relative; border-radius: 12px 12px 0 0; }
.ho12-pd-tab:hover { color: var(--h-txt); background: rgba(255,255,255,0.03); }
.ho12-pd-tab.active { color: #fff; background: rgba(255,255,255,0.05); }
.ho12-pd-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--h-pri), var(--h-acc)); border-radius: 2px; }
.ho12-pd-tab-panels { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-top: none; border-radius: 0 0 16px 16px; }
.ho12-pd-panel { display: none; padding: 36px 32px; animation: ho12FadeIn 0.4s ease; }
.ho12-pd-panel.active { display: block; }
.ho12-pd-desc-content { color: rgba(255,255,255,0.8); font-size: 15px; line-height: 1.9; }
.ho12-pd-desc-content p { margin: 0 0 12px; }
.ho12-pd-desc-content img { max-width: 100%; border-radius: 12px; margin: 16px 0; }
.ho12-pd-no-content { text-align: center; padding: 40px 20px; color: var(--h-muted); font-size: 15px; }

/* 스펙 테이블 */
.ho12-pd-spec-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ho12-pd-spec-table tr { transition: 0.2s; }
.ho12-pd-spec-table tr:hover { background: rgba(255,255,255,0.03); }
.ho12-pd-spec-table th, .ho12-pd-spec-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 14px; }
.ho12-pd-spec-table th { color: var(--h-muted); font-weight: 600; width: 140px; white-space: nowrap; }
.ho12-pd-spec-table td { color: var(--h-txt); }
.ho12-pd-spec-table td a { color: var(--h-pri-l); text-decoration: none; }

/* ═══ 관련 상품 ═══ */
.ho12-pd-related { max-width: 1100px; margin: 0 auto; padding: 0 24px 80px; }
.ho12-pd-related-title { color: #fff; font-size: 24px; font-weight: 700; margin: 0 0 28px; display: flex; align-items: center; gap: 10px; }
.ho12-pd-related-icon { font-size: 22px; }
.ho12-pd-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ho12-pd-related-card { border-radius: var(--h-r-lg); overflow: hidden; background: rgba(20,20,35,0.5); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.06); text-decoration: none; color: var(--h-txt); transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1); display: block; opacity: 0; transform: translateY(20px); }
.ho12-pd-related-card.ho12-visible { opacity: 1; transform: translateY(0); }
.ho12-pd-related-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.15); }
.ho12-pd-related-img { overflow: hidden; aspect-ratio: 1/1; }
.ho12-pd-related-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.ho12-pd-related-card:hover .ho12-pd-related-img img { transform: scale(1.08); }
.ho12-pd-related-info { padding: 16px 18px; }
.ho12-pd-related-info h4 { margin: 0 0 8px; color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ho12-pd-related-price { font-size: 14px; color: var(--h-gold); font-weight: 700; font-family: var(--h-font-eng); }

/* ═══ 라이트박스 ═══ */
.ho12-pd-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.92); backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.4s ease; }
.ho12-pd-lightbox.active { opacity: 1; visibility: visible; }
.ho12-pd-lb-img-wrap { max-width: 85vw; max-height: 85vh; display: flex; align-items: center; justify-content: center; }
.ho12-pd-lb-img-wrap img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.ho12-pd-lb-close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); color: #fff; font-size: 22px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.ho12-pd-lb-close:hover { background: var(--h-red); border-color: var(--h-red); transform: rotate(90deg); }
.ho12-pd-lb-prev, .ho12-pd-lb-next { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: #fff; font-size: 28px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.ho12-pd-lb-prev { left: 24px; }
.ho12-pd-lb-next { right: 24px; }
.ho12-pd-lb-prev:hover, .ho12-pd-lb-next:hover { background: var(--h-pri); border-color: var(--h-pri); }
.ho12-pd-lb-counter { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 600; font-family: var(--h-font-eng); }

/* Viewer */
.ho12-viewer { max-width: 800px; margin: 0 auto; min-height: 100vh; position: relative; background: #000; box-shadow: 0 0 50px rgba(0,0,0,0.8); }
.ho12-v-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 16px; padding: 16px 24px; background: rgba(10,10,20,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08); transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.ho12-v-controls { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; gap: 16px; padding: 20px; background: rgba(10,10,20,0.85); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,0.08); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 -10px 30px rgba(0,0,0,0.5); }
.ho12-v-body { padding: 40px 24px 80px; line-height: 2.2; color: #e0e0e0; font-size: 17px; letter-spacing: 0.3px; }
.ho12-v-progress { position: fixed; bottom: 40px; right: 30px; z-index: 100; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
#ho12-v-pct { background: linear-gradient(135deg, rgba(108, 92, 231, 0.9), rgba(0, 206, 201, 0.9)); color: #fff; padding: 8px 18px; border-radius: 20px; font-size: 14px; font-weight: 700; box-shadow: 0 8px 20px rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
.ho12-locked { text-align: center; padding: 120px 24px; background: linear-gradient(to bottom, transparent, rgba(10,10,20,0.9)); border-radius: 20px; }
.ho12-locked h2 { color: #fff; font-size: 32px; margin-bottom: 12px; }

/* ═══ Login Page — Premium Cosmic Design ═══ */
.ho12-login { display: flex; align-items: center; justify-content: center; min-height: 75vh; padding: 60px 20px; width: 100%; margin: 0 auto; }
.ho12-center-login { justify-content: center !important; text-align: center; }
.ho12-login-box { 
  width: 100%; 
  max-width: 440px; 
  background: rgba(10, 10, 20, 0.75); 
  backdrop-filter: blur(25px); 
  -webkit-backdrop-filter: blur(25px); 
  border: 1px solid rgba(255, 255, 255, 0.08); 
  border-radius: var(--h-r-lg); 
  padding: 48px 40px; 
  box-shadow: 0 30px 70px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06); 
  animation: ho12FadeIn 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

/* 우주선 브랜드 세로형 헤더 및 데코 아이콘 라인 */
.ho12-login-orbit-wrap {
  position: relative;
  margin-bottom: 40px;
  text-align: center;
}
.ho12-login-brand-korean {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ho12-brand-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 25px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 8px;
  margin-bottom: 24px;
  text-shadow: 0 4px 20px rgba(255,255,255,0.2);
  line-height: 1.35;
  text-indent: 8px; /* 자간 균형 조정 */
}
.ho12-brand-vertical span {
  display: block;
}
.ho12-brand-num {
  font-family: var(--h-font-eng);
  letter-spacing: 6px;
  text-indent: 6px;
}
.ho12-brand-cosmic-line {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  user-select: none;
}
.ho12-cosmic-icon {
  font-size: 19px;
  opacity: 0.6;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: default;
}
.ho12-cosmic-icon:hover {
  opacity: 1;
  transform: scale(1.3) rotate(15deg);
  filter: drop-shadow(0 0 10px rgba(255, 234, 167, 0.8));
}

/* 밑줄형 입력 폼 스타일 */
.ho12-fg-underline-group {
  margin-bottom: 28px;
}
.ho12-fg-underline {
  display: flex;
  align-items: center;
  border-bottom: 2px solid rgba(255,255,255,0.08);
  padding: 10px 4px;
  margin-bottom: 24px;
  position: relative;
  transition: border-color 0.4s ease;
}
.ho12-fg-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--h-pri), var(--h-acc));
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translateX(-50%);
}
.ho12-fg-underline:focus-within::after {
  width: 100%;
}
.ho12-fg-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  width: 65px;
  text-align: left;
  letter-spacing: 6px;
  flex-shrink: 0;
  user-select: none;
  text-indent: 6px;
}
.ho12-fg-underline input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 15px !important;
  padding: 8px 10px !important;
  width: 100% !important;
  outline: none !important;
  font-weight: 500;
}
.ho12-fg-underline input::placeholder {
  color: rgba(255, 255, 255, 0.15) !important;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* 깨어나기 & 깨어있기 수평 코스믹 마이크로 액션 영역 */
.ho12-cosmic-actions {
  display: flex;
  gap: 36px;
  justify-content: center;
  align-items: center;
  margin: 32px 0 24px;
}
.ho12-action-item {
  display: flex;
  align-items: center;
  position: relative;
}
.ho12-cosmic-btn-label, .ho12-cosmic-check-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 8px 18px;
  border-radius: 24px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.ho12-cosmic-btn-label:hover, .ho12-cosmic-check-label:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.ho12-action-icon {
  font-size: 24px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  filter: grayscale(85%) opacity(0.5);
  display: inline-block;
  user-select: none;
}
.ho12-cosmic-btn-label:hover .ho12-action-icon, .ho12-cosmic-check-label:hover .ho12-action-icon {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.2) rotate(15deg);
}
.ho12-action-text {
  font-size: 13px;
  color: var(--h-muted);
  font-weight: 600;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.ho12-action-item:hover .ho12-action-text {
  max-width: 80px;
  opacity: 1;
  margin-left: 10px;
  color: #fff;
}

/* 깨어있기 활성화(체크) 스타일 */
#ho12-remember:checked + label {
  background: rgba(255, 165, 2, 0.08);
  border-color: rgba(255, 165, 2, 0.25);
  box-shadow: 0 0 15px rgba(255, 165, 2, 0.15);
}
#ho12-remember:checked + label .ho12-action-icon {
  filter: grayscale(0%) opacity(1) drop-shadow(0 0 10px rgba(255, 165, 2, 0.8));
  transform: rotate(15deg) scale(1.2);
}
#ho12-remember:checked + label .ho12-action-text {
  color: var(--h-gold);
  max-width: 80px;
  opacity: 1;
  margin-left: 10px;
}

/* SNS 로그인 및 좌측 로고 병렬 레이아웃 */
.ho12-sns-split-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 28px;
  gap: 16px;
}
.ho12-sns-logo-side {
  flex: 0 0 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
}
.ho12-sns-side-logo-img {
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.ho12-sns-side-logo-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.ho12-fallback-icon {
  font-size: 20px;
  filter: drop-shadow(0 0 8px rgba(108, 92, 231, 0.6));
}
.ho12-fallback-text {
  font-size: 10px;
  color: var(--h-muted);
  font-weight: 700;
  letter-spacing: 2px;
}
.ho12-sns-divider {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.08) 80%, transparent);
  flex-shrink: 0;
}
.ho12-sns-buttons-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 10px;
}
.ho12-sns-side-title {
  color: var(--h-muted);
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 12px 0 !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  align-self: flex-start;
  opacity: 0.8;
}
.ho12-sns-row-custom {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.ho12-sns-buttons-side .ho12-sns {
  flex: 1;
  min-width: 75px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: none;
}
.ho12-sns-kakao { background: #fee500; color: #3c1e1e; }
.ho12-sns-kakao:hover { background: #fdd835; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(254,229,0,0.4); }
.ho12-sns-naver { background: #03c75a; color: #fff; }
.ho12-sns-naver:hover { background: #02b351; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(3,199,90,0.4); }
.ho12-sns-google { background: #fff; color: #333; }
.ho12-sns-google:hover { background: #f1f1f1; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }

/* 하단 3단 링크 정렬 및 네온 민트 그린 */
.ho12-login-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.ho12-link-item {
  color: var(--h-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.ho12-link-item:hover {
  color: #55efc4;
  text-shadow: 0 0 10px rgba(85, 239, 196, 0.6);
  transform: translateY(-1px);
}
.ho12-link-sep {
  color: rgba(255,255,255,0.08);
  font-size: 11px;
  user-select: none;
}

.ho12-notice { padding: 12px 18px; border-radius: 12px; font-size: 14px; margin-bottom: 16px; background: rgba(255,255,255,0.05); color: var(--h-muted); }
.ho12-notice-ok { background: rgba(46,213,115,0.12); color: var(--h-grn); border: 1px solid rgba(46,213,115,0.2); }
.ho12-notice-err { background: rgba(255,71,87,0.12); color: var(--h-red); border: 1px solid rgba(255,71,87,0.2); }

/* ═══ Library ═══ */
.ho12-lib-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.ho12-lib-header h2 { color: #fff; margin: 0; font-size: 28px; }
.ho12-lib-bal { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; background: linear-gradient(135deg, var(--h-pri), var(--h-acc)); border-radius: 20px; font-size: 14px; font-weight: 700; color: #fff; box-shadow: 0 4px 15px rgba(108,92,231,0.35); }
.ho12-lib-filter { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.ho12-filt { padding: 10px 20px; border-radius: 25px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--h-muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(6px); }
.ho12-filt:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.2); }
.ho12-filt.active { background: linear-gradient(135deg, var(--h-pri), var(--h-acc)); color: #fff; border-color: transparent; box-shadow: 0 4px 15px rgba(108,92,231,0.4); }
.ho12-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.ho12-lib-item { border-radius: var(--h-r); overflow: hidden; background: rgba(20,20,35,0.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.06); transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1); }
.ho12-lib-item:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.15); }
.ho12-lib-item a { text-decoration: none; color: var(--h-txt); display: block; }
.ho12-lib-thumb { height: 220px; background-size: cover; background-position: center; position: relative; }
.ho12-lib-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%); }
.ho12-lib-info { padding: 14px 16px; position: relative; }
.ho12-lib-info h4 { margin: 0 0 4px; color: #fff; font-size: 16px; font-weight: 600; }
.ho12-lib-info span { color: var(--h-pri-l); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

/* ═══ Modal (Adult Verify) ═══ */
.ho12-modal-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; animation: ho12FadeIn 0.3s ease; }
.ho12-modal { position: relative; width: 90%; max-width: 400px; background: rgba(20,20,40,0.85); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--h-r-lg); padding: 48px 36px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06); }
.ho12-modal-x { position: absolute; top: 16px; right: 20px; background: none; border: none; color: rgba(255,255,255,0.5); font-size: 28px; cursor: pointer; transition: 0.3s; line-height: 1; }
.ho12-modal-x:hover { color: #fff; transform: rotate(90deg); }
.ho12-modal-body h3 { color: #fff; font-size: 22px; margin: 16px 0 10px; }
.ho12-modal-body p { color: var(--h-muted); font-size: 14px; margin: 0 0 24px; line-height: 1.6; }
.ho12-adult-icon { font-size: 56px; filter: drop-shadow(0 4px 12px rgba(255,71,87,0.5)); }

/* ═══ Viewer Extras ═══ */
.ho12-v-header a { color: var(--h-pri-l); text-decoration: none; font-weight: 600; font-size: 15px; transition: 0.2s; }
.ho12-v-header a:hover { color: #fff; }
.ho12-v-header span { color: rgba(255,255,255,0.7); font-size: 14px; }
.ho12-next-wrap { position: relative; display: inline-block; }
.ho12-next-wrap .ho12-tt-next { display: none; position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: rgba(10,10,20,0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600; color: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.ho12-next-wrap:hover .ho12-tt-next { display: block; animation: ho12FadeIn 0.2s ease; }
.ho12-v-body img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* ═══ Planet Nav Label ═══ */
.ho12-pnav-label { font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 500; transition: 0.3s; letter-spacing: 0.3px; margin-top: 2px; }

/* ═══ Device Management ═══ */
.ho12-devices { margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.06); }
.ho12-dev-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.ho12-dev-header h2 { color: #fff; margin: 0; font-size: 24px; }
.ho12-dev-stats { display: flex; gap: 16px; }
.ho12-dev-stat { padding: 8px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; font-size: 13px; color: var(--h-muted); }
.ho12-dev-stat strong { color: var(--h-pri-l); font-family: var(--h-font-eng); }
.ho12-dev-notice { padding: 16px 20px; background: rgba(108,92,231,0.08); border: 1px solid rgba(108,92,231,0.2); border-radius: 14px; margin-bottom: 28px; }
.ho12-dev-notice p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.7; }
.ho12-dev-notice strong { color: var(--h-pri-l); }
.ho12-dev-current { padding: 24px; background: linear-gradient(145deg, rgba(30,30,50,0.6), rgba(15,15,25,0.6)); backdrop-filter: blur(10px); border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); margin-bottom: 28px; }
.ho12-dev-current h3 { color: #fff; margin: 0 0 16px; font-size: 16px; }
.ho12-dev-current-info { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ho12-dev-current-icon { font-size: 36px; }
.ho12-dev-current-name { color: #fff; font-weight: 600; font-size: 15px; }
.ho12-dev-current-fp { color: var(--h-muted); font-size: 12px; font-family: var(--h-font-eng); margin-top: 2px; }
.ho12-dev-register-row { display: flex; gap: 12px; align-items: center; }
.ho12-dev-input { flex: 1; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.3); color: #fff; font-size: 14px; }
.ho12-dev-input:focus { border-color: var(--h-pri); outline: none; box-shadow: 0 0 0 3px rgba(108,92,231,0.2); }
.ho12-dev-registered { color: var(--h-grn); font-size: 14px; font-weight: 600; }
.ho12-dev-list { display: flex; flex-direction: column; gap: 10px; }
.ho12-dev-item { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; transition: 0.3s; }
.ho12-dev-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.ho12-dev-item.current { border-color: rgba(108,92,231,0.3); background: rgba(108,92,231,0.06); }
.ho12-dev-item-left { display: flex; align-items: center; gap: 14px; }
.ho12-dev-item-icon { font-size: 28px; }
.ho12-dev-item-name { color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.ho12-dev-current-badge { padding: 3px 10px; background: linear-gradient(135deg, var(--h-pri), var(--h-acc)); border-radius: 12px; font-size: 11px; font-weight: 700; color: #fff; }
.ho12-dev-item-meta { color: var(--h-muted); font-size: 12px; margin-top: 4px; }
.ho12-dev-remove-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,71,87,0.2); background: rgba(255,71,87,0.06); color: var(--h-red); font-size: 16px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ho12-dev-remove-btn:hover { background: rgba(255,71,87,0.2); border-color: var(--h-red); transform: scale(1.1); }
.ho12-dev-empty { text-align: center; padding: 40px; color: var(--h-muted); font-size: 14px; }
.ho12-dev-msg { margin-top: 12px; }

/* ═══ WooCommerce Checkout & Cart ═══ */
body.woocommerce-checkout .woocommerce, body.woocommerce-cart .woocommerce {
  max-width: 1200px !important;
  margin: 40px auto 80px !important;
  padding: 50px 40px !important;
  background: rgba(8, 8, 18, 0.88) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 28px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7) !important;
  box-sizing: border-box !important;
}

body.woocommerce-checkout h3, body.woocommerce-cart h2 {
  color: #fff !important;
  font-size: 24px !important;
  margin-bottom: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  border-left: 4px solid var(--h-pri) !important;
  padding-left: 14px !important;
}

/* 입력 필드 */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .input-text,
.woocommerce-cart .input-text {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  color: #fff !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-family: 'Pretendard', sans-serif !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--h-pri) !important;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.25) !important;
  outline: none !important;
}

.woocommerce form .form-row label {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  display: inline-block !important;
}

/* 주문 요약 테이블 */
.woocommerce-checkout-review-order-table,
.woocommerce table.shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  margin-bottom: 30px !important;
}

.woocommerce table.shop_table th {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 18px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  text-align: left !important;
}

.woocommerce table.shop_table td {
  padding: 18px 20px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  font-size: 14px !important;
}

.woocommerce table.shop_table tfoot th {
  color: rgba(255, 255, 255, 0.7) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  background: rgba(108, 92, 231, 0.08) !important;
}

/* 결제 수단 */
.woocommerce-checkout-payment {
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 18px !important;
  padding: 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.woocommerce-checkout-payment ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
}

.woocommerce-checkout-payment ul.payment_methods li {
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.woocommerce-checkout-payment ul.payment_methods li label {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.woocommerce-checkout-payment .payment_box {
  background: rgba(108, 92, 231, 0.08) !important;
  border: 1px solid rgba(108, 92, 231, 0.15) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-top: 12px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.woocommerce-checkout-payment .payment_box::before {
  display: none !important;
}

/* 주문하기 버튼 */
#place_order {
  width: 100% !important;
  padding: 18px !important;
  background: linear-gradient(135deg, var(--h-pri), #a29bfe) !important;
  border: none !important;
  border-radius: 16px !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 8px 25px rgba(108, 92, 231, 0.4) !important;
  letter-spacing: 1px !important;
}

#place_order:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 35px rgba(108, 92, 231, 0.6) !important;
  color: #ffffff !important;
}

/* 장바구니 */
.woocommerce .cart-collaterals,
.woocommerce-cart .cart-collaterals {
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 18px !important;
  padding: 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  margin-top: 30px !important;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--h-pri) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  font-size: 14px !important;
  display: inline-block !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: #a29bfe !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3) !important;
}

/* 쿠폰 */
.woocommerce .coupon input {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: 12px 16px !important;
}

/* 수량 */
.woocommerce .quantity .qty {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: 10px !important;
  width: 65px !important;
  text-align: center !important;
}

/* 알림/메시지 */
.woocommerce-message, .woocommerce-info {
  background: rgba(108, 92, 231, 0.12) !important;
  border-top-color: var(--h-pri) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 14px !important;
  padding: 16px 24px !important;
  border: 1px solid rgba(108, 92, 231, 0.25) !important;
}

.woocommerce-error {
  background: rgba(255, 71, 87, 0.12) !important;
  border-top-color: var(--h-red) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 71, 87, 0.25) !important;
}

.woocommerce-message::before, .woocommerce-info::before {
  color: var(--h-pri) !important;
}

/* 상품 제거 */
.woocommerce a.remove {
  color: var(--h-red) !important;
  font-size: 22px !important;
}

.woocommerce a.remove:hover {
  background: var(--h-red) !important;
  color: #fff !important;
}

/* 상품 이미지 */
.woocommerce table.shop_table img {
  border-radius: 10px !important;
  width: 70px !important;
  height: auto !important;
}

/* Select2 (WC가 사용하는 드롭다운) */
.select2-container--default .select2-selection--single {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  height: 52px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #fff !important;
  line-height: 52px !important;
  padding: 0 18px !important;
}

.select2-dropdown {
  background: rgba(15, 15, 30, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
}

.select2-results__option {
  color: rgba(255, 255, 255, 0.8) !important;
  padding: 12px 18px !important;
}

.select2-results__option--highlighted {
  background: var(--h-pri) !important;
  color: #ffffff !important;
}

/* 📦 주문/배송 내역 전용 스타일 */
.ho12-orders-table {
  margin-top: 15px !important;
}

.ho12-order-status {
  padding: 5px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-block !important;
  text-align: center !important;
}

.ho12-order-status.status-completed {
  background: rgba(46, 213, 115, 0.15) !important;
  color: #2ed573 !important;
  border: 1px solid rgba(46, 213, 115, 0.25) !important;
}

.ho12-order-status.status-processing {
  background: rgba(108, 92, 231, 0.15) !important;
  color: #a29bfe !important;
  border: 1px solid rgba(108, 92, 231, 0.25) !important;
}

.ho12-order-status.status-pending {
  background: rgba(255, 165, 2, 0.15) !important;
  color: #ffa502 !important;
  border: 1px solid rgba(255, 165, 2, 0.25) !important;
}

.ho12-order-status.status-on-hold {
  background: rgba(255, 165, 2, 0.12) !important;
  color: #ffa502 !important;
  border: 1px solid rgba(255, 165, 2, 0.2) !important;
}

.ho12-order-status.status-cancelled,
.ho12-order-status.status-failed {
  background: rgba(255, 71, 87, 0.15) !important;
  color: #ff4757 !important;
  border: 1px solid rgba(255, 71, 87, 0.25) !important;
}

/* ═══ Responsive ═══ */
@media(max-width: 768px) {
  /* 마이페이지 */
  .ho12-mp-hero-inner { flex-direction: column; text-align: center; padding: 24px 20px; }
  .ho12-mp-stats-row { justify-content: center; }
  .ho12-mp-quick { grid-template-columns: repeat(3, 1fr); }
  .ho12-mp-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ho12-mp-tab { white-space: nowrap; font-size: 13px; padding: 10px 16px; }
  .ho12-charge-grid { grid-template-columns: repeat(2, 1fr); }
  .ho12-sw-inner { flex-direction: column; align-items: center; text-align: center; padding: 30px 20px; }
  .ho12-about-center h1 { font-size: 40px; }
  /* 싱글 상품 */
  .ho12-pd-wrap { flex-direction: column; gap: 32px; padding: 24px 16px 40px; }
  .ho12-pd-gallery { position: static; }
  .ho12-pd-title { font-size: 28px; }
  .ho12-pd-price-num { font-size: 30px; }
  .ho12-pd-price-wrap { padding: 16px 20px; }
  .ho12-pd-related-grid { grid-template-columns: repeat(2, 1fr); }
  .ho12-pd-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ho12-pd-tab { padding: 12px 20px; font-size: 14px; white-space: nowrap; }
  .ho12-pd-panel { padding: 24px 20px; }
  .ho12-pd-breadcrumb { padding: 16px 16px 0; }
  .ho12-pd-tabs-wrap { padding: 0 16px 40px; }
  .ho12-pd-related { padding: 0 16px 60px; }
  .ho12-pd-lb-prev, .ho12-pd-lb-next { width: 40px; height: 40px; font-size: 22px; }
  .ho12-pd-lb-prev { left: 12px; }
  .ho12-pd-lb-next { right: 12px; }
  .ho12-search-expand input { width: 200px; }
  .ho12-charge-bal { flex-direction: column; padding: 20px; }
  .ho12-login-box { padding: 36px 24px; }
  .ho12-sns-row { flex-direction: column; }
  .ho12-sns { width: 100%; }
  .ho12-lib-grid { grid-template-columns: repeat(2, 1fr); }
  .ho12-lib-thumb { height: 180px; }
  .ho12-v-body { padding: 20px 16px 60px; font-size: 16px; line-height: 2; }
  /* 기기관리 */
  .ho12-dev-header { flex-direction: column; align-items: flex-start; }
  .ho12-dev-stats { flex-direction: column; gap: 8px; width: 100%; }
  .ho12-dev-register-row { flex-direction: column; }
  .ho12-dev-item { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ho12-dev-remove-btn { align-self: flex-end; }
}
@media(max-width: 480px) {
  .ho12-mp-quick { grid-template-columns: repeat(2, 1fr); }
  .ho12-charge-grid { grid-template-columns: 1fr; }
  .ho12-search-expand input { width: 160px; }
  .ho12-lib-grid { grid-template-columns: 1fr; }
  .ho12-lib-thumb { height: 200px; }
  .ho12-sw-info h1 { font-size: 26px; }
  .ho12-pd-title { font-size: 24px; }
  .ho12-pd-price-num { font-size: 26px; }
  .ho12-pd-related-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ho12-pd-actions { flex-direction: column; }
  .ho12-pd-wish-btn { width: 100%; height: 48px; }
  .ho12-pd-spec-table th { width: 100px; }
  .ho12-about-center { padding: 30px 20px; }
  .ho12-about-center h1 { font-size: 32px; }
}

/* ═══ Works Page — Filter & Grid ═══ */
.ho12-works-page, .ho12-works-container { max-width: 1200px; margin: 0 auto; padding: 40px 24px 80px; }

/* 필터바 */
.ho12-filter-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.ho12-filter-left { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ho12-filter-title { margin: 0; color: #fff; font-size: 28px; font-weight: 800; }
.ho12-filter-count { color: var(--h-pri-l); font-size: 18px; font-weight: 600; margin-left: 8px; }
.ho12-filter-right { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.ho12-filter-group { display: flex; gap: 6px; align-self: flex-end; }
.ho12-filter-btn { padding: 8px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--h-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.3s; }
.ho12-filter-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ho12-filter-btn.active { background: linear-gradient(135deg,var(--h-pri),var(--h-acc)); color: #fff; border-color: transparent; box-shadow: 0 4px 15px rgba(108,92,231,0.4); }
.ho12-sort-view-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ho12-sort-select { padding: 8px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.4); color: #fff; font-size: 13px; cursor: pointer; }
.ho12-view-toggle { display: flex; gap: 4px; }
.ho12-view-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--h-muted); font-size: 18px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.ho12-view-btn.active { background: var(--h-pri); color: #fff; border-color: var(--h-pri); }

/* 장르 태그 */
.ho12-genre-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.ho12-genre-tag { padding: 6px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: var(--h-muted); font-size: 13px; cursor: pointer; transition: 0.3s; }
.ho12-genre-tag:hover { background: rgba(255,255,255,0.07); color: #fff; }
.ho12-genre-tag.active { background: rgba(108,92,231,0.2); color: var(--h-pri-l); border-color: rgba(108,92,231,0.4); }

/* 작품 그리드 */
.ho12-works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; max-width: 1100px; margin: 0 auto; justify-content: center; }
.ho12-work-card { border-radius: 16px; overflow: hidden; background: rgba(20,20,35,0.6); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.07); text-decoration: none; color: var(--h-txt); transition: all 0.35s cubic-bezier(0.25,0.8,0.25,1); display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(0,0,0,0.25); }
.ho12-work-card:hover { transform: none; box-shadow: none; }

/* 썸네일 */
.ho12-wc-thumb { position: relative; aspect-ratio: 3/4; overflow: hidden; background: rgba(0,0,0,0.4); flex-shrink: 0; }
.ho12-wc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.ho12-work-card:hover .ho12-wc-thumb img { transform: scale(1.07); }
.ho12-wc-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; background: linear-gradient(135deg,rgba(108,92,231,0.2),rgba(0,206,201,0.1)); }
.ho12-wc-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.ho12-badge-status { padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; backdrop-filter: blur(8px); }
.ho12-badge-status.ongoing { background: rgba(46,213,115,0.85); color: #fff; }
.ho12-badge-status.completed { background: rgba(108,92,231,0.85); color: #fff; }
.ho12-badge-adult { padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; background: rgba(255,71,87,0.85); color: #fff; backdrop-filter: blur(8px); }
.ho12-wc-ep-count { position: absolute; bottom: 10px; right: 10px; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; background: rgba(0,0,0,0.7); color: rgba(255,255,255,0.9); backdrop-filter: blur(6px); }

/* 카드 정보 */
.ho12-wc-info { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ho12-wc-title { margin: 0; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ho12-wc-author { margin: 0; color: var(--h-muted); font-size: 12px; }
.ho12-wc-genres { display: flex; gap: 4px; flex-wrap: wrap; }
.ho12-wc-genre-tag { padding: 2px 8px; border-radius: 6px; font-size: 11px; background: rgba(108,92,231,0.15); color: var(--h-pri-l); border: 1px solid rgba(108,92,231,0.2); }
.ho12-wc-excerpt { margin: 0; color: var(--h-muted); font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 리스트 뷰 */
.ho12-works-list { grid-template-columns: 1fr !important; }
.ho12-works-list .ho12-work-card { flex-direction: row; height: 120px; }
.ho12-works-list .ho12-wc-thumb { aspect-ratio: unset; width: 90px; height: 120px; flex-shrink: 0; }
.ho12-works-list .ho12-wc-info { padding: 16px 20px; justify-content: center; }
.ho12-works-list .ho12-wc-title { font-size: 17px; -webkit-line-clamp: 1; }
.ho12-works-list .ho12-wc-excerpt { -webkit-line-clamp: 2; }

/* 결과 없음 */
.ho12-no-results { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; color: var(--h-muted); }
.ho12-no-results-icon { font-size: 56px; margin-bottom: 16px; }

/* ═══ 구매 팝업 (행성 클릭 시) ═══ */
.ho12-buy-popup { position: fixed; inset: 0; z-index: 99998; background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; animation: ho12FadeIn 0.25s ease; }
.ho12-buy-popup-inner { position: relative; background: rgba(20,20,40,0.95); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; padding: 36px 32px; max-width: 360px; width: 90%; box-shadow: 0 30px 80px rgba(0,0,0,0.7); text-align: center; }
.ho12-buy-popup-close { position: absolute; top: 14px; right: 18px; background: none; border: none; color: rgba(255,255,255,0.4); font-size: 22px; cursor: pointer; transition: 0.2s; line-height: 1; }
.ho12-buy-popup-close:hover { color: #fff; transform: rotate(90deg); }
.ho12-buy-popup-ep { font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 8px; font-family: var(--h-font-eng); }
.ho12-buy-popup-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.ho12-buy-single { background: linear-gradient(135deg,var(--h-pri),#8b7cf7); }
.ho12-buy-bulk { background: linear-gradient(135deg,var(--h-acc),#00b894); }
.ho12-buy-popup-actions .ho12-btn { padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; width: 100%; }
.ho12-buy-popup-actions .buy-label { font-weight: 700; }
.ho12-buy-popup-actions .buy-price,
.ho12-buy-popup-actions .buy-price-bulk { font-size: 13px; opacity: 0.9; }

/* ═══ 반응형 추가 ═══ */
@media(max-width: 768px) {
  .ho12-works-page, .ho12-works-container { padding: 24px 16px 60px; }
  .ho12-filter-bar { flex-direction: column; align-items: flex-start; }
  .ho12-filter-right { width: 100%; justify-content: flex-start; align-items: flex-start; }
  .ho12-sort-view-wrap { align-items: flex-start; }
  .ho12-works-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .ho12-works-list .ho12-work-card { height: 100px; }
  .ho12-works-list .ho12-wc-thumb { width: 70px; height: 100px; }
  .ho12-genre-tags { gap: 6px; }
}
@media(max-width: 480px) {
  .ho12-works-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ho12-wc-info { padding: 10px 12px; }
  .ho12-wc-title { font-size: 13px; }
  .ho12-wc-excerpt { display: none; }
  .ho12-filter-right { gap: 8px; }
}

/* ═══ 싱글 상품 — 프리미엄 다크 테마 개선 ═══ */
.ho12-pd-breadcrumb { padding: 32px 24px 0; max-width: 1000px; margin: 0 auto; }
.ho12-pd-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; max-width: 1000px; margin: 0 auto; padding: 36px 24px 80px; }
.ho12-pd-gallery { position: sticky; top: 110px; align-self: flex-start; }
.ho12-pd-main-wrap { border-radius: 28px; overflow: hidden; background: linear-gradient(145deg, rgba(30,30,45,0.8), rgba(15,15,25,0.9)); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.15); backdrop-filter: blur(20px); }
.ho12-pd-main { aspect-ratio: 1/1; overflow: hidden; cursor: zoom-in; position: relative; }
.ho12-pd-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1); display: block; }
.ho12-pd-main:hover img { transform: scale(1.06); }
.ho12-pd-soldout-badge { position: absolute; top: 20px; left: 20px; z-index: 3; padding: 8px 18px; background: rgba(255,71,87,0.95); color: #fff; font-size: 13px; font-weight: 800; border-radius: 12px; letter-spacing: 1.5px; backdrop-filter: blur(8px); box-shadow: 0 8px 20px rgba(255,71,87,0.4); }
.ho12-pd-thumbs { display: flex; gap: 12px; margin-top: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }
.ho12-pd-thumb { width: 80px; height: 80px; border-radius: 16px; border: 2px solid transparent; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0.6; flex-shrink: 0; overflow: hidden; scroll-snap-align: start; }
.ho12-pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ho12-pd-thumb.active, .ho12-pd-thumb:hover { border-color: var(--h-pri); opacity: 1; transform: translateY(-4px); box-shadow: 0 8px 16px rgba(108,92,231,0.3); }

/* 상품 정보 패널 */
.ho12-pd-info { display: flex; flex-direction: column; gap: 24px; padding: 12px 0; }
.ho12-pd-category { font-size: 13px; color: var(--h-pri-l); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.ho12-pd-category a { color: inherit; text-decoration: none; }
.ho12-pd-title { margin: 0; color: #fff; font-size: 38px; font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; text-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.ho12-pd-rating { display: flex; align-items: center; gap: 10px; }
.ho12-pd-stars { color: #fdcb6e; font-size: 18px; letter-spacing: 2px; }
.ho12-pd-rate-num { color: #fdcb6e; font-weight: 800; font-size: 15px; }
.ho12-pd-review-count { color: rgba(255,255,255,0.5); font-size: 14px; }

/* 가격 */
.ho12-pd-price-wrap { display: flex; align-items: center; gap: 12px; padding: 24px 28px; background: linear-gradient(135deg, rgba(108,92,231,0.2), rgba(0,206,201,0.1)); border-radius: 20px; border: 1px solid rgba(108,92,231,0.4); box-shadow: 0 12px 30px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.ho12-pd-price-wrap::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 60%); pointer-events: none; }
.ho12-pd-price-icon { font-size: 30px; }
.ho12-pd-price-num { font-size: 42px; font-weight: 800; color: #fdcb6e; font-family: 'Outfit',sans-serif; text-shadow: 0 4px 15px rgba(253,203,110,0.4); }
.ho12-pd-price-unit { font-size: 18px; color: #fdcb6e; opacity: 0.9; font-weight: 700; margin-top: 8px; }

.ho12-pd-short { color: rgba(255,255,255,0.8); font-size: 16px; line-height: 1.8; margin: 0; font-weight: 400; }
.ho12-pd-status { display: flex; flex-wrap: wrap; gap: 10px; }
.ho12-pd-status-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); backdrop-filter: blur(10px); }
.ho12-pd-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ho12-pd-status-dot.in { background: #2ed573; box-shadow: 0 0 10px rgba(46,213,115,0.8); }
.ho12-pd-status-dot.out { background: var(--h-red); box-shadow: 0 0 10px rgba(255,71,87,0.8); }

/* 수량 + 계산 */
.ho12-pd-qty-row { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.ho12-pd-qty-row label { color: rgba(255,255,255,0.7); font-size: 15px; font-weight: 700; }
.ho12-pd-qty-control { display: flex; align-items: center; border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; overflow: hidden; background: rgba(0,0,0,0.4); box-shadow: inset 0 2px 10px rgba(0,0,0,0.3); }
.ho12-qty-btn { width: 48px; height: 48px; border: none; background: rgba(255,255,255,0.05); color: #fff; font-size: 22px; cursor: pointer; transition: 0.25s; }
.ho12-qty-btn:hover { background: var(--h-pri); }
.ho12-pd-qty-control .qty { width: 64px; text-align: center; padding: 12px; border: none; border-left: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.1); background: transparent; color: #fff; font-size: 18px; font-weight: 800; outline: none; -moz-appearance: textfield; }
.ho12-pd-qty-control .qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.ho12-pd-calc { background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 24px 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.ho12-pd-calc-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 15px; color: rgba(255,255,255,0.65); }
.ho12-pd-calc-row strong { font-family: 'Outfit',sans-serif; color: rgba(255,255,255,0.9); }
.ho12-pd-calc-total { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px; margin-top: 10px; font-size: 18px; font-weight: 700; color: #fff; }
.ho12-pd-calc-total strong { font-size: 24px; color: #fdcb6e; }

/* 액션 버튼 */
.ho12-pd-actions { display: flex; gap: 16px; margin-top: 10px; }
.ho12-pd-cart-btn { flex: 1; padding: 18px 32px; border-radius: 16px; border: none; background: linear-gradient(135deg, var(--h-pri), #8b7cf7); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: 0.5px; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 10px 30px rgba(108,92,231,0.4), inset 0 1px 0 rgba(255,255,255,0.2); }
.ho12-pd-cart-btn:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(108,92,231,0.6), inset 0 1px 0 rgba(255,255,255,0.2); background: linear-gradient(135deg, #7d6df0, #988afe); }
.ho12-pd-cart-btn.disabled, .ho12-pd-cart-btn:disabled { opacity: 0.5; pointer-events: none; filter: grayscale(100%); }
.ho12-pd-wish-btn { width: 60px; height: 60px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.2); font-size: 20px; }
.ho12-pd-wish-btn:hover, .ho12-pd-wish-btn.wished { color: var(--h-red); background: rgba(255,71,87,0.15); border-color: rgba(255,71,87,0.4); box-shadow: 0 10px 25px rgba(255,71,87,0.3); }

/* 탭 */
.ho12-pd-tabs-wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px 80px; }
.ho12-pd-tabs { display: flex; gap: 4px; border-bottom: 2px solid rgba(255,255,255,0.08); }
.ho12-pd-tab { padding: 16px 32px; background: none; border: none; color: rgba(255,255,255,0.5); font-size: 16px; font-weight: 700; cursor: pointer; transition: 0.3s; position: relative; border-radius: 12px 12px 0 0; letter-spacing: 0.5px; }
.ho12-pd-tab:hover { color: #fff; background: rgba(255,255,255,0.04); }
.ho12-pd-tab.active { color: #fff; }
.ho12-pd-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--h-pri),var(--h-acc)); border-radius: 3px; box-shadow: 0 -2px 10px rgba(108,92,231,0.5); }
.ho12-pd-tab-panels { background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent); border-radius: 0 0 20px 20px; border: 1px solid rgba(255,255,255,0.05); border-top: none; padding-bottom: 20px; }
.ho12-pd-panel { display: none; padding: 40px 32px; animation: ho12FadeIn 0.4s ease; }
.ho12-pd-panel.active { display: block; }
.ho12-pd-desc-content { color: rgba(255,255,255,0.85); font-size: 16px; line-height: 2; font-weight: 400; }
.ho12-pd-desc-content img { max-width: 100%; border-radius: 16px; margin: 24px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.ho12-pd-no-content { text-align: center; padding: 60px; color: rgba(255,255,255,0.4); font-size: 15px; }
.ho12-pd-spec-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.02); border-radius: 12px; overflow: hidden; }
.ho12-pd-spec-table th, .ho12-pd-spec-table td { padding: 18px 24px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 15px; }
.ho12-pd-spec-table th { color: rgba(255,255,255,0.5); font-weight: 700; width: 160px; white-space: nowrap; background: rgba(255,255,255,0.02); }
.ho12-pd-spec-table td { color: rgba(255,255,255,0.9); }
.ho12-pd-spec-table td a { color: var(--h-pri-l); text-decoration: none; font-weight: 600; }

/* 관련 상품 */
.ho12-pd-related { max-width: 1000px; margin: 0 auto; padding: 0 24px 100px; }
.ho12-pd-related-title { color: #fff; font-size: 26px; font-weight: 800; margin: 0 0 32px; display: flex; align-items: center; gap: 12px; text-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.ho12-pd-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ho12-pd-related-card { border-radius: 20px; overflow: hidden; background: linear-gradient(145deg, rgba(30,30,45,0.6), rgba(15,15,25,0.8)); border: 1px solid rgba(255,255,255,0.08); text-decoration: none; color: var(--h-txt); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); display: block; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.ho12-pd-related-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.2); }
.ho12-pd-related-img { aspect-ratio: 1/1; overflow: hidden; position: relative; }
.ho12-pd-related-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.ho12-pd-related-card:hover .ho12-pd-related-img img { transform: scale(1.08); }
.ho12-pd-related-info { padding: 20px; background: rgba(0,0,0,0.2); backdrop-filter: blur(8px); }
.ho12-pd-related-info h4 { margin: 0 0 8px; color: #fff; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.5px; }
.ho12-pd-related-price { font-size: 15px; color: #fdcb6e; font-weight: 800; font-family: 'Outfit',sans-serif; }

/* 모바일 고정 구매바 */
@media(max-width: 768px) {
  .ho12-pd-wrap { grid-template-columns: 1fr; gap: 32px; padding: 20px 16px 120px; }
  .ho12-pd-gallery { position: static; }
  .ho12-pd-title { font-size: 30px; }
  .ho12-pd-price-num { font-size: 34px; }
  .ho12-pd-related-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .ho12-pd-actions { position: fixed; bottom: 0; left: 0; right: 0; z-index: 990; padding: 16px; background: rgba(10,10,22,0.98); backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,0.1); margin: 0; flex-direction: row; }
}
  .ho12-pd-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ho12-pd-tab { padding: 11px 18px; font-size: 13px; white-space: nowrap; }
  .ho12-pd-panel { padding: 22px 18px; }
  .ho12-pd-tabs-wrap { padding: 0 16px 40px; }
  .ho12-pd-related { padding: 0 16px 60px; }
  .ho12-pd-breadcrumb { padding: 20px 16px 0; }
  /* 모바일 구매 고정바 */
  .ho12-pd-actions { position: fixed; bottom: 0; left: 0; right: 0; z-index: 990; padding: 12px 16px; background: rgba(10,10,22,0.95); backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,0.08); margin: 0; }
  .ho12-pd-cart-btn { border-radius: 12px; padding: 14px; font-size: 15px; }
}
@media(max-width: 480px) {
  .ho12-pd-related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ho12-pd-related-info h4 { font-size: 13px; }
}

/* ═══════════════════════════════════════════════
   WooCommerce 다크 테마 전체 오버라이드 (Classic + Blocks)
   ═══════════════════════════════════════════════ */

/* 1. 전역 WC 배경/색 리셋 */
.woocommerce,.woocommerce-page,.woocommerce-cart .woocommerce,.woocommerce-checkout .woocommerce,.woocommerce-account .woocommerce,.woocommerce-order-received .woocommerce,.wc-block-cart,.wc-block-checkout,.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{background:transparent!important;color:var(--h-txt)!important}

/* WC Blocks 컨테이너 */
.wc-block-cart__main,.wc-block-checkout__main,.wc-block-cart__sidebar,.wc-block-checkout__sidebar,.wc-block-components-order-summary,.wc-block-components-checkout-order-summary,.wp-block-woocommerce-cart-items-block,.wp-block-woocommerce-cart-totals-block,.wp-block-woocommerce-checkout-fields-block,.wp-block-woocommerce-checkout-order-summary-block{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.08)!important;border-radius:16px!important;color:var(--h-txt)!important}

/* 2. WC 폼/박스 */
.woocommerce-form,.woocommerce-checkout #customer_details,.woocommerce-checkout #order_review,.woocommerce table.shop_table,.woocommerce-cart-form,.cart_totals,.woocommerce-billing-fields,.woocommerce-shipping-fields,.woocommerce-additional-fields{background:rgba(255,255,255,0.04)!important;color:var(--h-txt)!important;border:1px solid rgba(255,255,255,0.08)!important;border-radius:16px!important;padding:24px!important}

/* 3. 테이블 */
.woocommerce table.shop_table{border-collapse:separate!important;border-spacing:0!important;overflow:hidden!important;padding:0!important;border:1px solid rgba(255,255,255,0.08)!important}
.woocommerce table.shop_table thead tr{background:rgba(108,92,231,0.15)!important}
.woocommerce table.shop_table th{background:transparent!important;color:rgba(255,255,255,0.6)!important;font-size:12px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;padding:14px 18px!important;border-bottom:1px solid rgba(255,255,255,0.06)!important}
.woocommerce table.shop_table td{background:transparent!important;color:var(--h-txt)!important;padding:16px 18px!important;border-bottom:1px solid rgba(255,255,255,0.05)!important;vertical-align:middle!important}
.woocommerce table.shop_table tr:last-child td{border-bottom:none!important}
.woocommerce table.shop_table .product-name a{color:var(--h-pri-l)!important;text-decoration:none!important;font-weight:600!important}
.woocommerce table.shop_table .product-name a:hover{color:#fff!important}
.woocommerce table.shop_table .amount{color:#fff!important;font-weight:700!important}
.woocommerce table.shop_table tfoot tr:last-child td,.woocommerce table.shop_table tfoot tr:last-child th{font-size:16px!important;color:var(--h-pri-l)!important}

/* 4. 인풋/폼 필드 */
.woocommerce .coupon input.input-text,.woocommerce input.input-text,.woocommerce textarea,.woocommerce select,.woocommerce-page input.input-text,.woocommerce-page select,.wc-block-components-text-input input,.wc-block-components-select select,.wc-block-components-textarea textarea,.wc-block-checkout__add-note textarea{background:rgba(255,255,255,0.06)!important;border:1px solid rgba(255,255,255,0.12)!important;color:var(--h-txt)!important;border-radius:10px!important;padding:12px 16px!important;font-family:var(--h-font-sans)!important;font-size:14px!important;transition:border-color .3s,box-shadow .3s!important;width:100%!important}
.woocommerce input.input-text:focus,.woocommerce select:focus,.wc-block-components-text-input input:focus,.wc-block-components-select select:focus{border-color:var(--h-pri)!important;outline:none!important;box-shadow:0 0 0 3px rgba(108,92,231,0.2)!important;background:rgba(255,255,255,0.08)!important}
.woocommerce input::placeholder,.wc-block-components-text-input input::placeholder{color:rgba(255,255,255,0.3)!important}

/* 5. 라벨 */
.woocommerce-checkout label,.woocommerce-billing-fields label,.woocommerce form .form-row label,.wc-block-components-form-label,.wc-block-components-checkbox__label,.wc-block-components-text-input label{color:rgba(255,255,255,0.65)!important;font-size:13px!important;font-weight:600!important;margin-bottom:6px!important}

/* 6. 버튼 */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce .button.alt,.woocommerce button.button.alt,.wc-block-components-button,.wc-block-cart__submit-button,.wc-block-checkout__actions .wc-block-components-checkout-place-order-button{background:var(--h-pri)!important;color:#fff!important;border-radius:12px!important;border:none!important;padding:14px 28px!important;font-weight:700!important;font-size:14px!important;font-family:var(--h-font-sans)!important;transition:all .3s!important;cursor:pointer!important}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce button.button.alt:hover,.wc-block-components-button:hover,.wc-block-cart__submit-button:hover{background:#7d6df0!important;transform:translateY(-2px)!important;box-shadow:0 8px 20px rgba(108,92,231,0.4)!important;color:#fff!important}

/* 7. 알림 */
.woocommerce .woocommerce-message,.wc-block-components-notice--info{background:rgba(46,213,115,0.1)!important;border-color:rgba(46,213,115,0.3)!important;color:var(--h-grn)!important;border-radius:12px!important}
.woocommerce .woocommerce-error,.wc-block-components-notice--error{background:rgba(255,71,87,0.1)!important;border-color:rgba(255,71,87,0.3)!important;color:var(--h-red)!important;border-radius:12px!important}
.woocommerce .woocommerce-info{background:rgba(108,92,231,0.1)!important;border-color:rgba(108,92,231,0.3)!important;color:var(--h-pri-l)!important;border-radius:12px!important}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before,.woocommerce .woocommerce-error::before{color:inherit!important}

/* 8. 결제 수단 */
#payment{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.08)!important;border-radius:16px!important;color:var(--h-txt)!important}
#payment .payment_methods{list-style:none!important;margin:0!important;padding:0!important}
#payment .payment_methods li{border-bottom:1px solid rgba(255,255,255,0.06)!important;padding:16px 20px!important}
#payment .payment_methods li:last-child{border-bottom:none!important}
#payment .payment_methods li label{color:var(--h-txt)!important;font-weight:600!important;cursor:pointer!important}
#payment .payment_box{background:rgba(255,255,255,0.03)!important;color:rgba(255,255,255,0.6)!important;border-radius:10px!important;padding:14px 16px!important;margin-top:10px!important;font-size:13px!important}
#payment .place-order{padding:20px!important}
.wc-block-components-payment-method-label,.wc-block-components-radio-control__label{color:var(--h-txt)!important}
.wc-block-components-radio-control__option{border-bottom:1px solid rgba(255,255,255,0.06)!important;padding:14px!important}
.wc-block-components-radio-control-accordion-content{background:rgba(255,255,255,0.03)!important;border-radius:10px!important;color:rgba(255,255,255,0.6)!important}

/* 9. 주문 요약 */
.wc-block-components-order-summary-item,.wc-block-components-totals-item{border-bottom:1px solid rgba(255,255,255,0.06)!important;padding:12px 0!important;color:var(--h-txt)!important}
.wc-block-components-totals-item__label,.wc-block-components-order-summary-item__individual-prices{color:rgba(255,255,255,0.65)!important}
.wc-block-components-totals-item__value,.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{color:#fff!important;font-weight:700!important}
.wc-block-components-totals-footer-item{border-top:1px solid rgba(255,255,255,0.1)!important;margin-top:8px!important}
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount{font-size:20px!important;color:var(--h-pri-l)!important}

/* 10. 장바구니 블록 아이템 */
.wc-block-cart-item,.wc-block-cart-items__row{border-bottom:1px solid rgba(255,255,255,0.06)!important;padding:16px 0!important}
.wc-block-cart-item__image img{border-radius:10px!important;width:80px!important;height:80px!important;object-fit:cover!important}
.wc-block-cart-item__prices .price{color:var(--h-pri-l)!important;font-weight:700!important;font-size:16px!important}
.wc-block-cart-item__product-name a{color:#fff!important;text-decoration:none!important;font-weight:600!important}
.wc-block-cart-item__product-name a:hover{color:var(--h-pri-l)!important}

/* 11. 수량 */
.woocommerce .quantity input.qty,.wc-block-components-quantity-selector input{background:rgba(255,255,255,0.06)!important;border:1px solid rgba(255,255,255,0.12)!important;color:var(--h-txt)!important;border-radius:8px!important;text-align:center!important;width:60px!important;padding:8px!important}
.wc-block-components-quantity-selector{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.12)!important;border-radius:10px!important}
.wc-block-components-quantity-selector__button{color:rgba(255,255,255,0.7)!important;background:transparent!important}
.wc-block-components-quantity-selector__button:hover{color:#fff!important;background:rgba(255,255,255,0.08)!important}

/* 12. 상품 썸네일 */
.woocommerce table.cart .product-thumbnail img{border-radius:10px!important;width:80px!important;height:80px!important;object-fit:cover!important}

/* 13. 제목들 */
.cart_totals h2,.woocommerce-checkout #order_review_heading,.woocommerce-checkout h3,.woocommerce-checkout h2,.woocommerce-billing-fields h3,.woocommerce-shipping-fields h3,.wc-block-components-checkout-order-summary__title{color:var(--h-txt)!important;font-size:16px!important;font-weight:700!important;margin-bottom:16px!important}

/* 14. 땡큐 페이지 */
.woocommerce-order{max-width:800px!important;margin:0 auto!important;padding:40px 24px!important}
.woocommerce-thankyou-order-received{background:rgba(46,213,115,0.1)!important;border:1px solid rgba(46,213,115,0.25)!important;border-radius:20px!important;padding:32px!important;text-align:center!important;color:var(--h-grn)!important;font-size:18px!important;font-weight:700!important;margin-bottom:32px!important}
.woocommerce-order-overview{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important;gap:12px!important;margin-bottom:32px!important;list-style:none!important;padding:0!important;background:transparent!important;border:none!important;border-radius:0!important}
.woocommerce-order-overview li{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.08)!important;border-radius:14px!important;padding:18px!important;text-align:center!important;color:var(--h-txt)!important;font-size:13px!important}
.woocommerce-order-overview li strong{display:block!important;color:var(--h-pri-l)!important;font-size:16px!important;margin-top:6px!important}
.woocommerce-order .woocommerce-order-details,.woocommerce-order .woocommerce-customer-details{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.08)!important;border-radius:16px!important;padding:24px!important;margin-bottom:20px!important}
.woocommerce-order .woocommerce-order-details h2,.woocommerce-order .woocommerce-customer-details h2{color:var(--h-txt)!important;font-size:15px!important;font-weight:700!important;margin-bottom:16px!important;border-bottom:1px solid rgba(255,255,255,0.06)!important;padding-bottom:12px!important}
.woocommerce-order address{color:rgba(255,255,255,0.65)!important;font-style:normal!important;line-height:1.8!important}

/* 15. 마이 어카운트 */
.woocommerce-MyAccount-navigation{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.08)!important;border-radius:16px!important;overflow:hidden!important;padding:8px 0!important;margin-bottom:20px!important}
.woocommerce-MyAccount-navigation ul{list-style:none!important;margin:0!important;padding:0!important}
.woocommerce-MyAccount-navigation li a{display:block!important;padding:12px 20px!important;color:rgba(255,255,255,0.6)!important;text-decoration:none!important;font-size:14px!important;transition:.2s!important}
.woocommerce-MyAccount-navigation li a:hover{color:#fff!important;background:rgba(255,255,255,0.06)!important}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--h-pri-l)!important;background:rgba(108,92,231,0.15)!important;font-weight:700!important;border-left:3px solid var(--h-pri)!important}
.woocommerce-MyAccount-content{color:var(--h-txt)!important}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{color:var(--h-txt)!important}

/* 16. 체크박스 */
.wc-block-components-checkbox input[type="checkbox"],.woocommerce input[type="checkbox"]{accent-color:var(--h-pri)!important;width:16px!important;height:16px!important}
.wc-block-components-checkbox__label{color:rgba(255,255,255,0.7)!important;font-size:13px!important}

/* 17. 브레드크럼 */
.woocommerce .woocommerce-breadcrumb{display:none!important}
.woocommerce .woocommerce-breadcrumb a{display:none!important}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--h-pri-l)!important}

/* 18. 레이아웃 */
.woocommerce-page .woocommerce{padding:32px 24px!important;max-width:1100px!important;margin:0 auto!important}
.wc-block-cart,.wc-block-checkout{max-width:1100px!important;margin:0 auto!important;padding:32px 24px!important}

/* 19. 구분선 */
.wc-block-components-totals-wrapper{background:transparent!important}
hr.wc-block-components-separator{border-color:rgba(255,255,255,0.06)!important}

/* 20. 모바일 */
@media(max-width:768px){
  .woocommerce-page .woocommerce{padding:20px 16px!important}
  body.woocommerce-checkout .woocommerce, body.woocommerce-cart .woocommerce { padding: 20px 16px !important; margin: 20px auto 40px !important; border-radius: 16px !important; }
  .wc-block-cart,.wc-block-checkout{padding:20px 16px!important}
  .woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:12px!important}
  .woocommerce-checkout .col2-set{display:block!important}
  .woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2{float:none!important;width:100%!important;margin-bottom:16px!important}
  .woocommerce-order-overview{grid-template-columns:1fr 1fr!important}
  .woocommerce-order{padding:24px 16px!important}
}


/* ═══════════════════════════════════════════════
   우커머스 블록스(WooCommerce Blocks) 초강력 다크 테마 덮어쓰기
   ═══════════════════════════════════════════════ */

/* 블록스 메인 영역 완전 투명화 & 다크 배경화 */
body .wp-block-woocommerce-checkout,
body .wp-block-woocommerce-cart {
    background: transparent !important;
}

body .wc-block-checkout__main,
body .wc-block-checkout__sidebar,
body .wc-block-cart__main,
body .wc-block-cart__sidebar,
body .wc-block-components-checkout-step,
body .wc-block-components-sidebar,
body .wc-block-components-order-summary {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--h-txt) !important;
}

/* 텍스트 색상 강제 다크/화이트 모드 */
body .wc-block-checkout * {
    color: var(--h-txt) !important;
}
body .wc-block-checkout h1,
body .wc-block-checkout h2,
body .wc-block-checkout h3,
body .wc-block-checkout h4 {
    color: #fff !important;
}

/* 인풋/셀렉트 박스 다크화 */
body .wc-block-components-text-input input,
body .wc-block-components-select select,
body .wc-block-components-textarea textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}
body .wc-block-components-text-input input:focus {
    border-color: var(--h-pri) !important;
    box-shadow: 0 0 0 1px var(--h-pri) !important;
}

/* 라벨 색상 */
body .wc-block-components-text-input label,
body .wc-block-components-checkbox__label,
body .wc-block-components-radio-control__label {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 플레이스홀더 텍스트 보이기 (원래 흰 배경에 맞춰져 있어서 다크에서 안 보임) */
body .wc-block-components-text-input input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* 주문 요약 / 사이드바 선 정리 */
body .wc-block-components-totals-item,
body .wc-block-components-order-summary-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body .wc-block-components-totals-item__value {
    color: #fff !important;
}
body .wc-block-components-totals-footer-item {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 체크아웃 결제수단 박스 (흰색 배경 제거) */
body .wc-block-components-payment-method-accordion {
    background: transparent !important;
    border: none !important;
}
body .wc-block-components-radio-control__option {
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
body .wc-block-components-radio-control__option-layout {
    color: var(--h-txt) !important;
}
body .wc-block-components-payment-method-accordion-content {
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 버튼 색상 */
body .wc-block-components-checkout-place-order-button,
body .wc-block-cart__submit-button {
    background: var(--h-pri) !important;
    color: #fff !important;
    border-radius: 12px !important;
    border: none !important;
}
body .wc-block-components-checkout-place-order-button:hover,
body .wc-block-cart__submit-button:hover {
    background: #7d6df0 !important;
}

/* 로딩 스피너 및 알림 배경 제거 */
body .wc-block-components-loading-mask {
    background: rgba(7, 7, 18, 0.8) !important;
}
body .wc-block-components-notice-banner {
    background: rgba(255, 71, 87, 0.1) !important;
    border: 1px solid rgba(255, 71, 87, 0.3) !important;
    color: var(--h-red) !important;
}

/* ==========================================================================
   🚀 장거리 우주선 12호 - 첫화면(메인페이지) 개편 전용 스타일
   ========================================================================== */

/* 1. 메인 브랜드 헤더 & 세로 타이틀 레이아웃 */
.ho12-main-home-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 60px;
}

.ho12-main-brand-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
  width: 100%;
}

.ho12-brand-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 35px;
  user-select: none;
}

.ho12-v-text {
  font-family: var(--h-font-sans);
  font-size: 46px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 12px;
  text-indent: 12px; /* 자간 정렬 보정 */
  line-height: 1.3;
  text-shadow: 0 4px 20px rgba(255, 255, 255, 0.15), 0 0 40px rgba(108, 92, 231, 0.2);
}

.ho12-brand-num {
  font-family: var(--h-font-eng);
  font-size: 42px;
  letter-spacing: 8px;
  text-indent: 8px;
  margin-top: 5px;
  background: linear-gradient(135deg, #fff 30%, var(--h-pri-l) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 2. 6개 데코 아이콘 라인 & 궤도 모션 */
.ho12-main-deco-icons {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 600px;
  padding: 15px;
  margin: 0 auto;
}

.ho12-main-deco-icon-item {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0.4;
  filter: grayscale(100%);
}

.ho12-main-deco-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: transform 0.4s ease;
}

.ho12-main-deco-emoji {
  font-size: 28px;
  line-height: 1;
  transition: transform 0.4s ease;
}

/* OnMouseOver (Hover) 흐림 -> 선명 진동 모션 */
.ho12-main-deco-icon-item:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.25);
  animation: cosmic-shake 0.5s infinite linear;
}

@keyframes cosmic-shake {
  0% { transform: scale(1.25) translate(0, 0) rotate(0deg); }
  20% { transform: scale(1.25) translate(-1px, 1px) rotate(-0.5deg); }
  40% { transform: scale(1.25) translate(1px, -1px) rotate(0.5deg); }
  60% { transform: scale(1.25) translate(-1px, -1px) rotate(-0.5deg); }
  80% { transform: scale(1.25) translate(1px, 1px) rotate(0.5deg); }
  100% { transform: scale(1.25) translate(0, 0) rotate(0deg); }
}

/* 3. 극미니멀 콤팩트 카드 그리드 */
.ho12-main-works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 20px !important;
  width: 100%;
  max-width: 1000px !important;
  margin: 0 auto 80px auto !important;
  padding: 0 24px !important;
}

.ho12-compact-card {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.ho12-compact-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 메인 콤팩트 카드의 썸네일 비율을 극대화 */
.ho12-compact-card .ho12-wc-thumb {
  aspect-ratio: 4/5 !important;
}

/* 메인 콤팩트 카드의 정보란: 오직 제목만 노출 */
.ho12-compact-card .ho12-wc-info {
  padding: 10px 12px !important;
  text-align: center;
  background: rgba(10, 10, 20, 0.4);
}

.ho12-compact-card .ho12-wc-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.4 !important;
  display: -webkit-box;
  -webkit-line-clamp: 1 !important; /* 한 줄로 미니멀화 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 4. 코스믹 Copyright 푸터 (네온 연두빛 테마) */
.ho12-cosmic-footer {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 40px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 20, 0.9) 100%);
  border-top: 1px solid rgba(46, 213, 115, 0.08); /* 미세한 연두빛 선 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 10px 30px rgba(0,0,0,0.8);
}

/* 우주선 테마의 네온 연두빛 광선 글로우 효과 */
.ho12-cosmic-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #2ed573, transparent);
  box-shadow: 0 0 15px #2ed573, 0 0 30px #2ed573;
  opacity: 0.7;
}

.ho12-footer-copy {
  margin: 0;
  font-family: var(--h-font-sans);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
  text-align: center;
  transition: color 0.3s ease;
}

.ho12-cosmic-footer:hover .ho12-footer-copy {
  color: rgba(46, 213, 115, 0.8); /* 호버 시 네온 연두로 살짝 활성화 */
  text-shadow: 0 0 10px rgba(46, 213, 115, 0.4);
}

/* 5. 반응형 예외 처리 */
@media (max-width: 768px) {
  .ho12-main-works-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 12px !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .ho12-main-works, .ho12-works-container {
    overflow-x: hidden !important;
  }
  .ho12-works-container, 
  .ho12-mypage, 
  .ho12-library, 
  .ho12-charge-container, 
  .ho12-contact, 
  .ho12-search-page, 
  .ho12-single-work, 
  .ho12-pd-wrap {
    margin-left: 10px !important;
    margin-right: 10px !important;
    width: calc(100% - 20px) !important;
    padding: 20px 10px !important;
    border-radius: 16px !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
  }
  
  .ho12-v-text {
    font-size: 32px;
    letter-spacing: 8px;
    text-indent: 8px;
  }
  
  .ho12-brand-num {
    font-size: 28px;
    letter-spacing: 6px;
    text-indent: 6px;
  }
  
  .ho12-main-deco-icons {
    gap: 14px;
  }
  
  .ho12-main-deco-icon-item {
    width: 36px;
    height: 36px;
  }
  
  .ho12-main-deco-emoji {
    font-size: 20px;
  }
}

/* ==========================================
   콘텐츠 가독성 보강 - 프리미엄 다크 글래스 패널
   ========================================== */
.ho12-works-container, 
.ho12-mypage, 
.ho12-library, 
.ho12-charge-container, 
.ho12-contact, 
.ho12-search-page, 
.ho12-single-work, 
.ho12-pd-wrap {
  background: rgba(8, 8, 18, 0.88) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 28px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7) !important;
  margin-top: 30px !important;
  margin-bottom: 50px !important;
  box-sizing: border-box !important;
}

/* 숏코드 박스의 경우 미세 패딩 보강 */
.ho12-works-container,
.ho12-charge-container {
  padding: 50px 40px !important;
}

/* 독서 뷰어 완벽한 불투명 가독성 */
.ho12-viewer {
  background: #070714 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
}

/* Sticky Footer 완벽 정합 (더블 세로스크롤 방지 고도화) */
html {
  height: auto !important;
  overflow-y: scroll !important;
}
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  margin: 0 !important;
  overflow: visible !important;
}
#page {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  min-height: 100vh !important;
  overflow: visible !important;
}
#content, .site-content {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}
#primary, .content-area {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}
#main, .site-main {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}
.ho12-notice,
.ho12-empty {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}

/* ==========================================================================
   STRICT BLACK & WHITE OVERRIDES FOR WOOCOMMERCE & GUTENBERG BLOCKS
   Ensures absolute legibility (black text, white backgrounds, 1px black borders)
   ========================================================================== */
body .wc-block-cart *,
body .wc-block-checkout *,
body .woocommerce *,
body .woocommerce-page *,
body .wc-block-grid *,
body .woocommerce-cart *,
body .woocommerce-checkout *,
body .woocommerce-account *,
body .woocommerce-order-received *,
body .wc-block-components-totals-item * {
    color: #111111 !important;
    border-color: #111111 !important;
    text-shadow: none !important;
}

/* Ensure critical label colors and cart details are readable */
body .woocommerce-checkout label,
body .woocommerce-billing-fields label,
body .woocommerce form .form-row label,
body .wc-block-components-form-label,
body .wc-block-components-checkbox__label,
body .wc-block-components-text-input label,
body .wc-block-components-totals-item__label,
body .wc-block-components-order-summary-item__individual-prices,
body .woocommerce-order address,
body .woocommerce-MyAccount-navigation li a,
body .woocommerce table.shop_table th,
body .wc-block-components-radio-control-accordion-content,
body .woocommerce-checkout-review-order-table th,
body .woocommerce-checkout-review-order-table td {
    color: #111111 !important;
}

/* Solid white background for fields and dropdowns */
body .woocommerce input.input-text,
body .woocommerce textarea,
body .woocommerce select,
body .wc-block-components-text-input input,
body .wc-block-components-select select,
body .wc-block-components-textarea textarea,
body .woocommerce-page input.input-text,
body .woocommerce-page select,
body .wc-block-checkout__add-note textarea,
body .woocommerce .quantity input.qty,
body .wc-block-components-quantity-selector input {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #111111 !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

/* Field focus state */
body .woocommerce input.input-text:focus,
body .woocommerce textarea:focus,
body .woocommerce select:focus,
body .wc-block-components-text-input input:focus,
body .wc-block-components-select select:focus,
body .wc-block-components-textarea textarea:focus {
    border-color: #111111 !important;
    outline: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

/* Readable placeholders */
body .woocommerce input::placeholder,
body .wc-block-components-text-input input::placeholder,
body .woocommerce textarea::placeholder {
    color: #777777 !important;
    opacity: 1 !important;
}

/* Premium solid B&W Buttons */
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body .woocommerce .button.alt,
body .woocommerce button.button.alt,
body .wc-block-components-button,
body .wc-block-cart__submit-button,
body .wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
    background: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #111111 !important;
    border-radius: 0px !important;
    text-shadow: none !important;
    transition: all 0.25s ease-in-out !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce button.button.alt:hover,
body .wc-block-components-button:hover,
body .wc-block-cart__submit-button:hover,
body .wc-block-checkout__actions .wc-block-components-checkout-place-order-button:hover {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #111111 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Clean transparent grids and tables with no default background */
body #payment,
body #payment .payment_box,
body .wc-block-components-radio-control-accordion-content,
body .wc-block-components-totals-wrapper,
body .wc-block-components-sidebar,
body .wc-block-components-main,
body .wc-block-cart__layout,
body .wc-block-checkout__layout,
body .woocommerce-order-overview li {
    background: transparent !important;
    border: 1px solid #111111 !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

/* Thin black dividers and borders instead of thick gray lines */
body hr.wc-block-components-separator,
body .wc-block-components-order-summary-item,
body .wc-block-components-totals-item,
body .woocommerce table.shop_table td,
body .woocommerce table.shop_table th {
    border-bottom: 1px solid #111111 !important;
}

body .woocommerce-order-overview {
    border: none !important;
}

.ho12-footer, .ho12-cosmic-footer {
  margin-top: auto !important;
  width: 100% !important;
}

/* ==========================================
   🚨 전역 호버 가독성 개선 및 우커머스 복구 고도화 
   ========================================== */

/* 1. 충전소 팩 카드 호버 시 텍스트 및 버튼 가독성 완전 강제 */
body .ho12-charge-btn:hover {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.95) 0%, rgba(0, 206, 201, 0.9) 100%) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 20px 45px rgba(108, 92, 231, 0.3) !important;
}

/* 2. 통합 우커머스 룩앤필 (클래식 + 블록스 통합) */
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce,
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
  background: linear-gradient(145deg, rgba(20, 20, 35, 0.75), rgba(10, 10, 22, 0.93)) !important;
  border: 1px solid rgba(108, 92, 231, 0.22) !important;
  border-radius: 28px !important;
  backdrop-filter: blur(35px) !important;
  -webkit-backdrop-filter: blur(35px) !important;
  box-shadow: 0 45px 120px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  padding: 50px 40px !important;
  margin-top: 30px !important;
  margin-bottom: 60px !important;
  box-sizing: border-box !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
  color: #ffffff !important;
}

/* 내부 컨테이너 이중 배경/테두리 거품 및 Blocks 고유 회색 박스 소멸 */
body.woocommerce-cart .wc-block-cart,
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart_totals,
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review,
body.woocommerce-thankyou-order-received,
body.woocommerce-cart .wc-block-cart__main,
body.woocommerce-cart .wc-block-cart__sidebar,
body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-checkout__sidebar,
body.woocommerce-checkout .wc-block-checkout__form,
.wc-block-components-checkout-step,
.wc-block-components-checkout-step__container,
.wc-block-components-checkout-step__content,
.wc-block-components-sidebar,
.wc-block-checkout__payment-methods,
.wc-block-cart__layout,
.wc-block-checkout__layout,
body.woocommerce-cart .woocommerce .wp-block-woocommerce-cart,
body.woocommerce-checkout .woocommerce .wp-block-woocommerce-checkout,
body.woocommerce-cart .woocommerce .wc-block-cart,
body.woocommerce-checkout .woocommerce .wc-block-checkout,
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout .wc-block-checkout {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 12호 타이틀 네온 글로우 */
body.woocommerce-cart h2,
body.woocommerce-checkout h3,
body.woocommerce-checkout h2,
body.woocommerce-billing-fields h3,
body.woocommerce-shipping-fields h3,
body.woocommerce-order-details__title,
.wc-block-components-title,
.wc-block-components-checkout-step-title,
.wc-block-cart__empty-cart__title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 15px rgba(108, 92, 231, 0.6) !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 14px !important;
  margin-bottom: 24px !important;
  margin-top: 0 !important;
}

/* 테이블(클래식 장바구니) 디자인 */
body .woocommerce table.shop_table {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  background: rgba(5, 5, 15, 0.3) !important;
  overflow: hidden !important;
  backdrop-filter: blur(15px) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

body .woocommerce table.shop_table thead {
  background: linear-gradient(90deg, rgba(108, 92, 231, 0.25), rgba(0, 206, 201, 0.15)) !important;
}

body .woocommerce table.shop_table th {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body .woocommerce table.shop_table td {
  padding: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  vertical-align: middle !important;
}

body .woocommerce table.shop_table tr:last-child td {
  border-bottom: none !important;
}

/* 블록스 아이템 리스트 SF 크리스탈 카드화 (중첩 구조 원천 차단) */
.wc-block-cart-items {
  background: rgba(5, 5, 15, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
  color: #ffffff !important;
}

.wc-block-cart-items__row,
.wc-block-cart-item {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 16px 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* 결제 메인 액션 버튼 - 초월적인 SF 그라데이션 글로우 */
body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body .wc-block-cart__submit-button,
body .wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
body #place_order {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 20px 30px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, var(--h-pri, #6c5ce7), #8c7ae6) !important;
  color: #ffffff !important;
  box-shadow: 0 15px 35px rgba(108, 92, 231, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

/* 모바일 반응형 완전 대응 */
@media (max-width: 768px) {
  body.woocommerce-cart .woocommerce,
  body.woocommerce-checkout .woocommerce {
    padding: 30px 20px !important;
  }
  
  body.woocommerce-cart .wc-block-cart__layout,
  body.woocommerce-checkout .wc-block-checkout__layout {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  body.woocommerce-cart .cart_totals {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(108, 92, 231, 0.15) !important;
    border-radius: 20px !important;
    padding: 24px !important;
  }
}

/* 데스크탑 2컬럼 레이아웃 강제 지정 (우커머스 블록스용) */
@media (min-width: 769px) {
  body.woocommerce-cart .wc-block-cart__layout,
  body.woocommerce-checkout .wc-block-checkout__layout {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    gap: 40px !important;
    align-items: start !important;
  }
}

/* 6. 체크아웃(결제) 페이지 폼 인풋 프리미엄 보완 */
body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row textarea,
body .woocommerce form .form-row select {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  padding: 15px 18px !important;
  font-size: 15px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4) !important;
}

body .woocommerce form .form-row input.input-text:focus,
body .woocommerce form .form-row textarea:focus,
body .woocommerce form .form-row select:focus {
  border-color: var(--h-pri) !important;
  box-shadow: 0 0 20px rgba(108, 92, 231, 0.5), inset 0 2px 4px rgba(0,0,0,0.4) !important;
  background: rgba(0, 0, 0, 0.6) !important;
  outline: none !important;
}

/* 결제페이지 2컬럼 데스크탑 배치 */
@media (min-width: 992px) {
  body.woocommerce-checkout form.checkout {
    display: flex !important;
    gap: 48px !important;
    align-items: flex-start !important;
  }
  body.woocommerce-checkout #customer_details {
    flex: 1.4 !important;
    width: 58% !important;
  }
  body.woocommerce-checkout #order_review_heading,
  body.woocommerce-checkout #order_review {
    flex: 1 !important;
    width: 42% !important;
  }
  body.woocommerce-checkout #order_review {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(108, 92, 231, 0.2) !important;
    border-radius: 24px !important;
    padding: 35px !important;
    position: sticky !important;
    top: 100px !important;
  }
}

/* 결제 수단 영역 (#payment) */
body #payment {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  padding: 10px !important;
}

body #payment ul.payment_methods li {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
  padding: 18px 20px !important;
  transition: all 0.3s ease !important;
}

body #payment ul.payment_methods li:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(108, 92, 231, 0.25) !important;
}

body #payment ul.payment_methods li input[type=radio] {
  accent-color: var(--h-pri) !important;
  transform: scale(1.1) !important;
  margin-right: 12px !important;
}

body #payment .payment_box {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-top: 14px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* 주문 배송 상태 뱃지 디테일 개선 */
body .ho12-order-status {
  padding: 6px 14px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

/* ==========================================================================
   🌌 장거리 우주선 12호 - 장바구니 블록(WooCommerce Block Cart) 프리미엄 개선
   ========================================================================== */

/* 1. 장바구니 전역 텍스트 색상 및 링크/메타 명암비 완전 강제 (배송비, 쿠폰 영역 완벽 가독성) */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-cart .wc-block-cart,
body.woocommerce-cart .wc-block-cart * {
  color: var(--h-txt, rgba(255, 255, 255, 0.85)) !important;
}

/* 상품명 및 중요 링크 강조 */
body.woocommerce-cart .wc-block-cart-item__product-name a {
  color: #ffffff !important;
  font-weight: 700 !important;
}
body.woocommerce-cart .wc-block-cart-item__product-name a:hover {
  color: var(--h-pri-l, #a29bfe) !important;
}

/* 캡쳐 상의 "어두운 상품설명" 가독성 강제 극대화 */
body.woocommerce-cart .wc-block-cart-item__description,
body.woocommerce-cart .wc-block-cart-item__metadata,
body.woocommerce-cart .wc-block-cart-item__description * {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 13px !important;
}

/* 배송비 값 및 링크 복구 */
body.woocommerce-cart .wc-block-components-totals-shipping,
body.woocommerce-cart .wc-block-components-totals-shipping * {
  color: rgba(255, 255, 255, 0.9) !important;
}
body.woocommerce-cart .wc-block-components-totals-shipping__price-and-address {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* 예상 합계 금액 네온 옐로우/그라데이션 강조 */
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
  color: #fdcb6e !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  text-shadow: 0 0 15px rgba(253, 203, 110, 0.45) !important;
}

/* 2. 기괴한 3중 중첩 카드 구조 완전 정돈 (SF 크리스탈 리스트화) */
/* 전체 목록 컨테이너만 크리스탈 다크 카드 형태로 지정 */
html body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items,
html body.woocommerce-cart .wc-block-cart-items {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-bottom: 24px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 개별 상품 카드 및 행 중첩 스타일 극단적 리셋 (절대 겹치지 않게 강제) */
html body.woocommerce-cart .wc-block-cart-items__row,
html body.woocommerce-cart .wc-block-cart-item,
html body.woocommerce-cart .wc-block-cart-items .wc-block-cart-item,
html body.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item,
html body.woocommerce-cart .wp-block-woocommerce-cart-items-block .wc-block-cart-item,
html body.woocommerce-cart .wp-block-woocommerce-cart-items-block .wc-block-cart-items__row {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  padding: 24px 0 !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08) !important; /* 각 상품 사이의 경계선만 은은하게 남김 */
}

html body.woocommerce-cart .wc-block-cart-items__row:last-child,
html body.woocommerce-cart .wc-block-cart-item:last-child,
html body.woocommerce-cart .wc-block-cart-items .wc-block-cart-item:last-child {
  border-bottom: none !important; /* 마지막 상품 하단 선 제거 */
}

/* 3. 개별 아이템 내부 요소의 수평 센터 정렬 & 레이아웃 보정 (데스크탑 1줄 정렬 완벽 보장) */
html body.woocommerce-cart .wc-block-cart-item {
  display: flex !important;
  flex-direction: row !important; /* 무조건 가로 정렬 */
  align-items: center !important; /* 상하 중앙 정렬 */
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: nowrap !important; /* 데스크탑에서는 절대 아래로 떨어지지 않게 강제 */
  width: 100% !important;
}

/* 상품 썸네일 이미지 및 명칭 부위 정렬 */
html body.woocommerce-cart .wc-block-cart-item__image {
  flex-shrink: 0 !important;
  width: 70px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body.woocommerce-cart .wc-block-cart-item__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

/* 상품명 + 설명 블록 */
html body.woocommerce-cart .wc-block-cart-item__info {
  flex: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  justify-content: center !important;
  min-width: 180px !important;
}

/* 수량 선택기 영역 */
html body.woocommerce-cart .wc-block-cart-item__quantity {
  flex: 1 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 110px !important;
}

/* 수량 선택기 UI 프리미엄 오버라이딩 */
html body.woocommerce-cart .wc-block-components-quantity-selector {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  height: 40px !important;
  overflow: hidden !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.3) !important;
}
html body.woocommerce-cart .wc-block-components-quantity-selector input.qty,
html body.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  height: 100% !important;
  width: 45px !important;
  padding: 0 !important;
}
html body.woocommerce-cart .wc-block-components-quantity-selector__button {
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  width: 36px !important;
  height: 100% !important;
  border: none !important;
  font-size: 16px !important;
  transition: all 0.2s !important;
}
html body.woocommerce-cart .wc-block-components-quantity-selector__button:hover {
  background: rgba(108, 92, 231, 0.2) !important;
  color: #ffffff !important;
}

/* 소계 가격 영역 */
html body.woocommerce-cart .wc-block-cart-item__totals {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  min-width: 90px !important;
}
html body.woocommerce-cart .wc-block-cart-item__prices .price,
html body.woocommerce-cart .wc-block-cart-item__totals .price {
  color: #fdcb6e !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  text-shadow: 0 0 10px rgba(253, 203, 110, 0.2) !important;
}

/* 휴지통 삭제 버튼을 정렬에 맞추고 붉은 은하수 글로우 효과 */
html body.woocommerce-cart .wc-block-cart-item__remove {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body.woocommerce-cart .wc-block-cart-item__remove-link,
html body.woocommerce-cart .wc-block-cart-item__remove button {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.3s ease !important;
}
html body.woocommerce-cart .wc-block-cart-item__remove-link:hover,
html body.woocommerce-cart .wc-block-cart-item__remove button:hover {
  background: rgba(255, 71, 87, 0.15) !important;
  border-color: rgba(255, 71, 87, 0.4) !important;
  box-shadow: 0 0 12px rgba(255, 71, 87, 0.3) !important;
}
html body.woocommerce-cart .wc-block-cart-item__remove-link svg,
html body.woocommerce-cart .wc-block-cart-item__remove button svg {
  fill: #ff4757 !important;
}

/* 4. 장바구니 합계(우측 사이드바) 영역 디테일 개선 */
html body.woocommerce-cart .wc-block-cart__sidebar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 쿠폰 추가 영역 인풋/선택상자 완전 보정 */
html body.woocommerce-cart .wc-block-components-select select,
html body.woocommerce-cart .wc-block-components-combobox select {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  height: auto !important;
}
html body.woocommerce-cart .wc-block-components-select select option {
  background: #0f0f1e !important;
  color: #ffffff !important;
}

/* 결제진행 버튼 - 우주선 발사 네온 그라디언트 빔 */
html body.woocommerce-cart .wc-block-cart__submit-button {
  background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%) !important;
  color: #ffffff !important;
  border-radius: 16px !important;
  padding: 18px 24px !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 2px !important;
  box-shadow: 0 12px 30px rgba(108, 92, 231, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  border: none !important;
  cursor: pointer !important;
}
html body.woocommerce-cart .wc-block-cart__submit-button:hover {
  transform: translateY(-3px) !important;
  background: linear-gradient(135deg, #7d6df0 0%, #b3adff 100%) !important;
  box-shadow: 0 18px 40px rgba(108, 92, 231, 0.6), 0 0 15px rgba(108, 92, 231, 0.3) !important;
}

/* 모바일에서의 반응형 정렬 유연화 (768px 이하 대응) */
@media (max-width: 768px) {
  html body.woocommerce-cart .wc-block-cart-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 20px 0 !important;
  }
  html body.woocommerce-cart .wc-block-cart-item__image {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto !important;
  }
  html body.woocommerce-cart .wc-block-cart-item__info {
    text-align: center !important;
    width: 100% !important;
  }
  html body.woocommerce-cart .wc-block-cart-item__quantity {
    width: 100% !important;
    justify-content: center !important;
  }
  html body.woocommerce-cart .wc-block-cart-item__totals {
    width: 100% !important;
    justify-content: center !important;
  }
  html body.woocommerce-cart .wc-block-cart-item__remove {
    align-self: center !important;
  }
}

/* ─── 우커머스 블록스(WooCommerce Blocks) 프리미엄 다크 테마 (Glassmorphism) ─── */
body .wp-block-woocommerce-checkout,
body .wp-block-woocommerce-cart,
body .wc-block-checkout__form,
body .wc-block-components-checkout-step__container,
body .wc-block-components-checkout-step__content,
body .wc-block-components-checkout-step { background: transparent !important; }

body .wc-block-checkout__main,
body .wc-block-checkout__sidebar,
body .wc-block-cart__main,
body .wc-block-cart__sidebar,
body .wc-block-components-sidebar,
body .wc-block-components-order-summary { 
    background: linear-gradient(145deg, rgba(30,30,45,0.7), rgba(15,15,25,0.85)) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(20px) !important;
    color: #fff !important; 
    padding: 32px !important;
}

body .wc-block-checkout *, body .wc-block-cart * { color: rgba(255,255,255,0.85) !important; }
body .wc-block-checkout h1, body .wc-block-checkout h2,
body .wc-block-checkout h3, body .wc-block-checkout h4,
body .wc-block-components-title { color: #fff !important; font-weight: 800 !important; letter-spacing: -0.5px !important; }

/* 폼 컨트롤 (Input, Select, Textarea) - 프리미엄 다크 글래스 */
body .wc-block-components-text-input input,
body .wc-block-components-select select,
body .wc-blocks-components-select__select,
body .wc-block-components-select,
body .wc-block-components-textarea textarea { 
    background: rgba(0,0,0,0.3) !important; 
    background-color: rgba(0,0,0,0.3) !important; 
    background-image: none !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    border-radius: 12px !important;
    color: #fff !important; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2) !important;
    padding: 14px 18px !important;
    transition: all 0.3s ease !important;
}

body .wc-block-components-text-input input:focus,
body .wc-block-components-select select:focus,
body .wc-blocks-components-select__select:focus { 
    border-color: #a29bfe !important; 
    box-shadow: 0 0 0 1px #a29bfe, 0 0 15px rgba(108,92,231,0.4), inset 0 2px 5px rgba(0,0,0,0.2) !important; 
    background-color: rgba(0,0,0,0.5) !important; 
}

body .wc-block-components-text-input label,
body .wc-block-components-checkbox__label,
body .wc-block-components-radio-control__label,
body .wc-blocks-components-select__label { color: rgba(255, 255, 255, 0.6) !important; font-weight: 600 !important; }

body .wc-block-components-text-input input::placeholder { color: rgba(255, 255, 255, 0.25) !important; }

/* 테이블 선 정리 */
body .wc-block-components-totals-item,
body .wc-block-components-order-summary-item { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 16px 0 !important; }
body .wc-block-components-totals-item__value { color: #fff !important; font-weight: 700 !important; }
body .wc-block-components-totals-footer-item { border-top: 1px solid rgba(255, 255, 255, 0.15) !important; padding-top: 20px !important; margin-top: 10px !important; }

/* 결제 방식 라디오 버튼 박스 */
body .wc-block-components-payment-method-accordion { background: transparent !important; border: none !important; }
body .wc-block-components-radio-control__option { 
    background: rgba(255, 255, 255, 0.03) !important; 
    border: 1px solid rgba(255, 255, 255, 0.06) !important; 
    border-radius: 14px !important;
    margin-bottom: 8px !important;
    padding: 16px !important;
    transition: all 0.25s !important;
}
body .wc-block-components-radio-control__option:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.15) !important; }
body .wc-block-components-radio-control__option-layout { color: #fff !important; font-weight: 600 !important; }
body .wc-block-components-payment-method-accordion-content { background: rgba(0,0,0,0.2) !important; color: rgba(255, 255, 255, 0.6) !important; border-radius: 12px !important; padding: 16px !important; margin-top: 8px !important; }

/* 버튼 (주문/장바구니) - 그라데이션 및 네온 섀도우 */
body .wc-block-components-checkout-place-order-button,
body .wc-block-cart__submit-button { 
    background: linear-gradient(135deg, #6c5ce7, #8b7cf7) !important; 
    color: #fff !important; 
    border-radius: 16px !important; 
    border: none !important; 
    padding: 18px 32px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 30px rgba(108,92,231,0.4), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
body .wc-block-components-checkout-place-order-button:hover,
body .wc-block-cart__submit-button:hover { 
    background: linear-gradient(135deg, #7d6df0, #988afe) !important; 
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 40px rgba(108,92,231,0.6), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

body .wc-block-components-loading-mask { background: rgba(15, 15, 25, 0.8) !important; backdrop-filter: blur(8px) !important; }
body .wc-block-components-notice-banner { background: rgba(255, 71, 87, 0.1) !important; border: 1px solid rgba(255, 71, 87, 0.3) !important; color: #ff4757 !important; border-radius: 12px !important; box-shadow: 0 5px 15px rgba(255,71,87,0.2) !important; }

/* WooCommerce Blocks: 특수 컨테이너 화이트 배경 강제 제거 및 디테일 보정 */
.wp-block-woocommerce-checkout *,
.wp-block-woocommerce-cart *,
.wc-block-components-combobox-control,
.wc-block-components-combobox-control * {
    background-color: transparent !important;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-select select,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select,
.wp-block-woocommerce-checkout .wc-block-components-textarea textarea,
.wp-block-woocommerce-checkout .components-combobox-control input,
.wp-block-woocommerce-checkout .components-combobox-control select,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control input,
.wp-block-woocommerce-cart .wc-block-components-text-input input,
.wp-block-woocommerce-cart .wc-block-components-select select,
.wc-block-checkbox .wc-block-components-checkbox__input {
    background-color: rgba(0,0,0,0.3) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}
.wp-block-woocommerce-checkout .wc-block-checkout__main,
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar,
.wp-block-woocommerce-cart .wc-block-cart__main,
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
    background-color: rgba(255,255,255,0.04) !important;
}
/* 상품 플레이스홀더 이미지 화이트 배경 제거 */
.wc-block-components-product-image,
.wc-block-components-product-image img,
.wc-block-cart-item__image,
.wc-block-cart-item__image img {
    background-color: transparent !important;
    border-radius: 8px !important;
}

/* ═══ 감태 선물 코드 내역 테이블 (다크 글래스모피즘) ═══ */
.ho12-gift-history-box {
  background: linear-gradient(135deg, rgba(20, 15, 38, 0.45), rgba(8, 8, 20, 0.75)) !important;
  border: 1px solid rgba(108, 92, 231, 0.2) !important;
  border-radius: 20px !important;
  padding: 28px !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
}

.ho12-gift-history-wrap {
  width: 100%;
  margin-top: 15px;
  overflow-x: auto;
}

.ho12-gift-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ho12-gift-history-table th {
  padding: 14px 16px;
  text-align: left;
  color: var(--h-muted);
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ho12-gift-history-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  vertical-align: middle;
}

.ho12-gift-history-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* 상태 배지 */
.ho12-gift-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.ho12-gift-status-badge.pending {
  background: rgba(255, 165, 2, 0.15) !important;
  color: #ffa502 !important;
  border: 1px solid rgba(255, 165, 2, 0.3);
}

.ho12-gift-status-badge.claimed {
  background: rgba(46, 213, 115, 0.12) !important;
  color: #2ed573 !important;
  border: 1px solid rgba(46, 213, 115, 0.25);
}

/* 복사 버튼 */
.ho12-btn-copy {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.7) !important;
  border-radius: 8px !important;
}

.ho12-btn-copy:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px);
}

.ho12-btn-copy.copied {
  background: var(--h-pri) !important;
  color: #fff !important;
  border-color: var(--h-pri) !important;
  box-shadow: 0 0 10px rgba(108, 92, 231, 0.5) !important;
  animation: ho12CopiedPulse 0.4s ease;
}

@keyframes ho12CopiedPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes ho12ScaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ho12Float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}

/* ═══ 소설/웹툰 뷰어 이전/다음 Chevron SVG 화살표 스타일 ═══ */
.vr-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  vertical-align: middle !important;
  color: #111111 !important; /* 기본 검정색 글자 강제 */
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 테마 링크 호버 색상 충돌 방지를 위한 강제 색상 지정 */
.vr-nav-btn:hover {
  color: #111111 !important;
  background: rgba(108, 92, 231, 0.35) !important;
  border-color: rgba(108, 92, 231, 0.6) !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3) !important;
}

.vr-nav-btn.locked {
  border-color: rgba(255, 165, 2, 0.4) !important;
  color: #ffa502 !important;
}

.vr-nav-btn.locked:hover {
  background: rgba(255, 165, 2, 0.15) !important;
  color: #ffa502 !important;
}

.vr-nav-svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* 호버 시 Chevron 미끄러지는 마이크로 인터랙션 */
.vr-nav-btn:hover .vr-prev-svg {
  transform: translateX(-4px) !important;
}

.vr-nav-btn:hover .vr-next-svg {
  transform: translateX(4px) !important;
}

.vr-nav-btn.disabled .vr-nav-svg {
  opacity: 0.5 !important;
}

/* ==========================================================================
   🌌 장거리 우주선 12호 - 장바구니 모든 선 완벽 제거 (다른 페이지 영향 없이 오직 장바구니에서만)
   ========================================================================== */

/* 1. 장바구니 개별 아이템 및 테이블 구조 내부의 모든 실선/구분선 완전 박멸 */
.woocommerce-cart .wc-block-cart-item,
.woocommerce-cart .wc-block-cart-item > *,
.woocommerce-cart .wc-block-cart-item__totals,
.woocommerce-cart .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-item__info,
.woocommerce-cart .wc-block-cart-item__quantity,
.woocommerce-cart .wc-block-cart-item__remove,
.woocommerce-cart .wc-block-cart-items,
.woocommerce-cart .wc-block-cart-items th,
.woocommerce-cart .wc-block-cart-items td,
.woocommerce-cart .wc-block-cart-items tr,
.woocommerce-cart .wc-block-cart-items thead,
.woocommerce-cart .wc-block-cart-items tbody,
.woocommerce-cart .wc-block-cart-items__header,
.woocommerce-cart .wc-block-cart-items__row,
.woocommerce-cart .wc-block-cart-items__row-divider {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* 2. 우측 사이드바 장바구니 합계(Totals) 및 하위 영역의 모든 구분선 완전 박멸 */
.woocommerce-cart .wc-block-components-totals-item,
.woocommerce-cart .wc-block-components-totals-footer-item,
.woocommerce-cart .wc-block-components-totals-shipping,
.woocommerce-cart .wc-block-components-totals-coupon,
.woocommerce-cart .wc-block-components-panel,
.woocommerce-cart .wc-block-components-panel__title,
.woocommerce-cart .wc-block-components-panel__content,
.woocommerce-cart .wc-block-cart__sidebar,
.woocommerce-cart .wc-block-cart__main,
.woocommerce-cart .wc-block-cart__sidebar-container {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* 내용이 비어 있거나 값(Value)이 매칭되지 않는 빈 테이블 행들의 테두리와 패딩을 원천 격리 */
.woocommerce-cart .wc-block-components-totals-item:not(:has(.wc-block-components-totals-item__value)),
.woocommerce-cart .wc-block-components-totals-item:empty,
.woocommerce-cart .wc-block-components-totals-item[style*="display: none"] {
  display: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 예상 합계 위의 구분선 제거 후 여백만 정돈 */
.woocommerce-cart .wc-block-components-totals-footer-item {
  padding-top: 20px !important;
  margin-top: 16px !important;
}


/* ==========================================================================
   🌌 비어 있는 장바구니 페이지 (Empty Cart Page) 프리미엄 갤럭시 카드화
   ========================================================================== */

/* 1. 비어있는 장바구니 메인 컨테이너 카드 스타일 */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
  background: linear-gradient(145deg, rgba(20, 20, 35, 0.75), rgba(10, 10, 22, 0.93)) !important;
  border: 1px solid rgba(108, 92, 231, 0.22) !important;
  border-radius: 28px !important;
  backdrop-filter: blur(35px) !important;
  -webkit-backdrop-filter: blur(35px) !important;
  box-shadow: 0 45px 120px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  padding: 50px 40px !important;
  margin: 40px auto 80px !important;
  max-width: 1200px !important;
  box-sizing: border-box !important;
  color: #ffffff !important;
  text-align: center !important;
}

/* 2. 비어있는 장바구니 제목 튜닝 */
body.woocommerce-cart .wc-block-cart__empty-cart__title {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 15px rgba(108, 92, 231, 0.6) !important;
  margin-bottom: 24px !important;
  border: none !important;
  padding: 0 !important;
}

/* 3. 구분선 도트 무늬 은은하게 */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block hr.wp-block-separator {
  border-color: rgba(255, 255, 255, 0.1) !important;
  margin: 30px auto !important;
  max-width: 200px !important;
}

/* 4. 신상품 제목 */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  margin-top: 20px !important;
  margin-bottom: 30px !important;
  display: inline-block !important;
  position: relative !important;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title)::after {
  content: '' !important;
  position: absolute !important;
  bottom: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 50px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #6c5ce7, #00cec9) !important;
  border-radius: 2px !important;
}

/* 5. 상품 목록 리드 & 개별 카드 프리미엄 갤럭시 룩 */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 20px !important;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden !important;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(108, 92, 231, 0.4) !important;
  box-shadow: 0 15px 35px rgba(108, 92, 231, 0.25) !important;
  transform: translateY(-5px) !important;
}

/* 6. 상품 썸네일 이미지 및 마이크로 스케일 효과 */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
  width: 100% !important;
  margin-bottom: 14px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover .wc-block-grid__product-image img {
  transform: scale(1.05) !important;
}

/* 7. 상품 제목 가독성 100% 보장 (흰색 강조) */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
  text-decoration: none !important;
  color: #ffffff !important;
  display: block !important;
  width: 100% !important;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 10px 0 6px 0 !important;
  transition: color 0.25s ease !important;
  text-align: center !important;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link:hover .wc-block-grid__product-title {
  color: var(--h-pri-l, #a29bfe) !important;
}

/* 8. 상품 가격 가독성 극대화 (골드빛 감태포인트) */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price.price,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price .ho12-gamtae-price {
  color: #fdcb6e !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  margin-bottom: 14px !important;
  text-shadow: 0 0 10px rgba(253, 203, 110, 0.3) !important;
  text-align: center !important;
  display: block !important;
}

/* 9. 장바구니 AJAX 추가 버튼 SF 네온 그라디언트 빔 */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
  width: 100% !important;
  margin-top: auto !important;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a.add_to_cart_button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: linear-gradient(135deg, #6c5ce7 0%, #8b7cf7 100%) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  box-shadow: 0 5px 15px rgba(108, 92, 231, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  border: none !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-sizing: border-box !important;
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a.add_to_cart_button:hover {
  background: linear-gradient(135deg, #7d6df0 0%, #988afe 100%) !important;
  box-shadow: 0 8px 25px rgba(108, 92, 231, 0.6), 0 0 10px rgba(108, 92, 231, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* 모바일 모드 반응형 패딩 튜닝 (768px 이하) */
@media (max-width: 768px) {
  body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
    padding: 30px 20px !important;
    margin: 20px 12px 40px !important;
    border-radius: 20px !important;
  }
  body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important; /* 모바일에서 2열 배치로 깔끔하게 */
    gap: 16px !important;
  }
  body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
    padding: 12px !important;
    border-radius: 14px !important;
  }
  body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
    font-size: 13.5px !important;
  }
  body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price.price {
    font-size: 13px !important;
  }
  body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a.add_to_cart_button {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

/* ==========================================================================
   🪐 에피소드 행성 텍스트 아래 표시 & 성인 19금 손그림 타원형 말풍선 커스텀
   ========================================================================== */

/* 1. 화수 텍스트 행성 아래 정렬 */
.ho12-planet.text-under {
  margin-bottom: 35px !important;
}

.ho12-planet-info-under {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Outfit', 'Pretendard', sans-serif;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ho12-planet.free .ho12-planet-info-under {
  color: #2ed573;
  text-shadow: 0 0 8px rgba(46, 213, 115, 0.4);
}

.ho12-planet.owned .ho12-planet-info-under {
  color: #a29bfe;
  text-shadow: 0 0 8px rgba(108, 92, 231, 0.4);
}

.ho12-planet.locked .ho12-planet-info-under {
  color: #eccc68;
  text-shadow: 0 0 8px rgba(255, 165, 2, 0.3);
}

.ho12-planet.locked.adult-ep .ho12-planet-info-under {
  color: #ff4757;
  text-shadow: 0 0 8px rgba(255, 71, 87, 0.3);
}

.ho12-planet:hover .ho12-planet-info-under {
  transform: translateX(-50%) scale(1.1);
  color: #ffffff;
}

/* 2. 성인 비활성화 툴팁 - 기획서 손그림 느낌의 타원형 말풍선 (19 ?) */
.ho12-tt-adult {
  background: #ffffff !important;
  color: #222222 !important;
  border: 2.5px solid #222222 !important;
  /* 손그림 느낌의 울퉁불퉁한 타원형 테두리 구현 */
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2) !important;
  padding: 6px 14px !important;
  font-family: 'Outfit', 'Pretendard', sans-serif !important;
  bottom: 105% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.ho12-tt-adult .ho12-tt-text {
  color: #ff3838 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  font-family: 'Outfit', sans-serif !important;
}

.ho12-tt-adult .ho12-tt-btn {
  color: #222222 !important;
  border: none !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  margin-left: 4px !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  font-family: 'Outfit', sans-serif !important;
}

/* 말풍선 꼬리표도 손그림 보더 색상에 맞춰 수정 */
.ho12-tt-adult::after {
  border-color: #222222 transparent transparent transparent !important;
  border-width: 8px 8px 0 8px !important;
  bottom: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* 성인 행성 마우스 접근 시 진동 일시정지하지 않고 계속 신나게 떨리게 조정 */
.ho12-planet.adult-ep:hover {
  animation: ho12AdultPlanetVibe 0.4s infinite ease-in-out !important;
}





/* ==========================================
   B&W PAPER STYLE GLOBAL OVERRIDES (PDF MATCH)
   ========================================== */

/* 1. Global Reset to Pure White Background & Solid Borders */
*, *::before, *::after {
    text-shadow: none !important;
    box-shadow: none !important;
}

html, body, #page, .site, .site-content, #content, #primary, #main, .content-area, .inside-article, .entry-content, article,
.ho12-single-work, .ho12-about, .ho12-viewer-container, .ho12-mypage-container, .ho12-charge-container, .ho12-contact-container,
.ho12-goods-container, .wc-block-cart, .wc-block-checkout, .woocommerce-checkout, .woocommerce-cart,
.ho12-modal-content, .ho12-qcard, .ho12-mp-bal-card, .ho12-mp-qcard, .ho12-work-card, .ho12-pd-info, .ho12-ep-card,
.ho12-btn, input, textarea, select, .ho12-viewer-sidebar, .ho12-viewer-header, .ho12-viewer-footer,
.ho12-header, .ho12-footer, .ho12-planet-nav, .ho12-sw-hero {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Force body and html to be solid white */
html, body {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111111;
}

/* 어두운 계열의 그라디언트 및 우주 배경 이미지 원천 차단 */
#page div:not(.ho12-planet):not(.ho12-lib-thumb):not(.ho12-mp-field-group):not(.ho12-gt-line-bg):not(.ho12-contact-fg):not(.ho12-contact-lines-wrap div), #page section, #page header, #page footer, #page aside, #page nav, #page article, #page p, #page span, #page a, #page button, #page input:not(#ho12-search-input), #page select, #page textarea,
.ho12-modal-overlay div:not(.ho12-planet):not(.ho12-lib-thumb):not(.ho12-mp-field-group):not(.ho12-gt-line-bg):not(.ho12-contact-fg):not(.ho12-contact-lines-wrap div), .ho12-modal-overlay section, .ho12-modal-overlay header, .ho12-modal-overlay footer, .ho12-modal-overlay aside, .ho12-modal-overlay nav, .ho12-modal-overlay article, .ho12-modal-overlay p, .ho12-modal-overlay span, .ho12-modal-overlay a, .ho12-modal-overlay button, .ho12-modal-overlay input:not(#ho12-search-input), .ho12-modal-overlay select, .ho12-modal-overlay textarea {
    background-image: none !important;
}

/* 모든 텍스트 색상 및 그림자 리셋 */
#page h1, #page h2, #page h3, #page h4, #page h5, #page h6, #page p, #page span, #page a, #page div, #page li, #page td, #page th, #page label, #page input, #page textarea, #page select, #page button,
.ho12-modal-overlay h1, .ho12-modal-overlay h2, .ho12-modal-overlay h3, .ho12-modal-overlay h4, .ho12-modal-overlay h5, .ho12-modal-overlay h6, .ho12-modal-overlay p, .ho12-modal-overlay span, .ho12-modal-overlay a, .ho12-modal-overlay div, .ho12-modal-overlay li, .ho12-modal-overlay td, .ho12-modal-overlay th, .ho12-modal-overlay label, .ho12-modal-overlay input, .ho12-modal-overlay textarea, .ho12-modal-overlay select, .ho12-modal-overlay button {
    color: #111111 !important;
    text-shadow: none !important;
}

/* Clear all cosmic star particles, glows, neons and space canvas */
#ho12-space-canvas, .ho12-stars, .ho12-stars2, .ho12-stars3, .ho12-nebula, .ho12-space-bg {
    display: none !important;
    background: transparent !important;
}

/* Force thin black borders and zero curvature for precise proposal feel */
.ho12-work-card, .ho12-mp-bal-card, .ho12-mp-qcard, .ho12-pd-info, .ho12-ep-card, .ho12-qcard,
.ho12-btn, input, textarea, select, .ho12-tag, .ho12-badge-status, .ho12-modal-content,
.ho12-viewer-sidebar, .ho12-viewer-header, .ho12-viewer-footer, .ho12-sw-cover, .ho12-sw-desc {
    border: 1px solid #111111 !important;
    border-radius: 0px !important;
}

/* 2. Desktop Grid Layout Override (Strictly 3 Columns Above 768px) */
@media (min-width: 769px) {
    .ho12-works-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }
    .ho12-main-works-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }
    .ho12-lib-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
    .ho12-charge-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }
    .ho12-goods-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }
}

/* 3. Mobile Layout Grid Adjustment (Exactly 2 columns on mobile so text never wraps vertically) */
@media (max-width: 768px) {
    .ho12-works-grid, .ho12-main-works-grid, .ho12-lib-grid, .ho12-charge-grid, .ho12-goods-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 480px) {
    .ho12-works-grid, .ho12-main-works-grid, .ho12-lib-grid, .ho12-charge-grid, .ho12-goods-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* 4. Episode Planet B&W Circle Formatting */
.ho12-planet:not([style*="background-image"]) {
    background-color: #ffffff !important;
    background-image: none !important;
}
.ho12-planet {
    border: 1.5px solid #111111 !important;
    box-shadow: none !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.ho12-planet::before {
    display: none !important;
}

.ho12-planet.free:not([style*="background-image"]), 
.ho12-planet.locked:not([style*="background-image"]), 
.ho12-planet.owned:not([style*="background-image"]) {
    background-color: #ffffff !important;
    background-image: none !important;
    border-color: #111111 !important;
}

.ho12-planet:hover:not([style*="background-image"]) {
    background-color: #f0f0f0 !important;
}
.ho12-planet:hover {
    transform: scale(1.05) !important;
}

.ho12-planet-num {
    text-shadow: none !important;
    font-weight: 800 !important;
}
/* 무료/구매 행성 번호: 녹색 */
#page .ho12-planet.free .ho12-planet-num,
#page .ho12-planet.owned .ho12-planet-num,
#page .ho12-planet.free .ho12-planet-text,
#page .ho12-planet.owned .ho12-planet-text,
#page .ho12-planet.free .ho12-planet-inner,
#page .ho12-planet.owned .ho12-planet-inner {
    color: #2d8a4e !important;
}
/* 잠금 행성 번호: 노란색 */
#page .ho12-planet.locked .ho12-planet-num,
#page .ho12-planet.locked .ho12-planet-text,
#page .ho12-planet.locked .ho12-planet-inner {
    color: #d4a017 !important;
}
/* 행성 텍스트 안쪽으로 5px */
#page .ho12-planet .ho12-planet-inner {
    padding-top: 5px !important;
}

.ho12-planet-days {
    color: #555555 !important;
    text-shadow: none !important;
}

.ho12-planet-info-under {
    text-shadow: none !important;
}
#page .ho12-planet.free .ho12-planet-info-under,
#page .ho12-planet.owned .ho12-planet-info-under {
    color: #2d8a4e !important;
}
#page .ho12-planet.locked .ho12-planet-info-under {
    color: #d4a017 !important;
}

/* Remove grayscales and transparency filter entirely for user icons */
.ho12-planet[style*="background-image"] {
    background-color: transparent !important;
    border-color: transparent !important;
    filter: none !important;
}

/* 5. Tooltip (Locked Indicator bubbles) sketch formatting */
.ho12-tooltip {
    background: #ffffff !important;
    border: 1px solid #111111 !important;
    color: #111111 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 4px !important;
}

.ho12-tt-btn, .ho12-tt-price, .ho12-tt-text {
    color: #111111 !important;
}

/* 6. Typography B&W outline fixes */
#page h1, #page h2, #page h3, #page h4, #page h5, #page h6, #page p, #page span, #page a, #page div, #page td, #page th,
.ho12-modal-overlay h1, .ho12-modal-overlay h2, .ho12-modal-overlay h3, .ho12-modal-overlay h4, .ho12-modal-overlay h5, .ho12-modal-overlay h6, .ho12-modal-overlay p, .ho12-modal-overlay span, .ho12-modal-overlay a, .ho12-modal-overlay div, .ho12-modal-overlay td, .ho12-modal-overlay th {
    color: #111111 !important;
    text-shadow: none !important;
}

a:hover {
    color: #000000 !important;
}

/* Clean transparent elements, hero backdrops & cover image overlays */
.ho12-sw-hero {
    background: #ffffff !important;
    border: 1px solid #111111 !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

.ho12-sw-bg {
    display: none !important;
}

.ho12-tag {
    background: #ffffff !important;
    color: #111111 !important;
}

.ho12-badge-status {
    background: #ffffff !important;
    color: #111111 !important;
}

/* 7. Buttons: clean B&W style */
.ho12-btn, .ho12-btn-pri, button, input[type="submit"] {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #111111 !important;
    transition: all 0.2s ease !important;
}

.ho12-btn:hover, .ho12-btn-pri:hover, button:hover, input[type="submit"]:hover {
    background: #111111 !important;
    color: #ffffff !important;
}

/* Input Fields and boxes */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #111111 !important;
}

/* Header & Footer clean */
.ho12-header {
    background: #ffffff !important;
    border-bottom: none !important;
}

.ho12-footer {
    background: #ffffff !important;
    border-top: none !important;
}

/* Fix notice login button and make it visible with white text on black background */
#page .ho12-notice a,
#page .ho12-notice-wrap a {
    color: #ffffff !important;
    background: #111111 !important;
    border: 1px solid #111111 !important;
    transition: all 0.2s ease !important;
    border-radius: 0px !important;
}
#page .ho12-notice a:hover,
#page .ho12-notice-wrap a:hover {
    color: #111111 !important;
    background: #ffffff !important;
    border: 1px solid #111111 !important;
}

/* 8. Mobile Bottom Navigation bar complete removal & Top header force placement */
.ho12-bottom-bar, .ho12-bottom-nav, .ho12-mobile-bottom-bar, .ho12-bottom-bar-wrapper, #ho12-bottom-bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    .ho12-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        border-bottom: none !important;
        z-index: 99999 !important;
    }
    .ho12-planet-nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        gap: 8px !important;
        padding: 8px 10px 12px 10px !important;
        max-width: 100% !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        background: #ffffff !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .ho12-pnav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        min-width: 48px !important;
        gap: 2px !important;
        opacity: 0.9 !important;
    }
    .ho12-pnav-planet {
        width: 34px !important;
        height: 34px !important;
        border-width: 1.2px !important;
    }
    .ho12-pnav-svg {
        width: 16px !important;
        height: 16px !important;
    }
    .ho12-pnav-label {
        font-size: 8px !important;
    }
}

/* 9. Grid and Card Transparent Backgrounds (pure B&W theme) */
.ho12-mp-grid, 
.ho12-mp-card, 
.ho12-work-card, 
.ho12-lib-item, 
.ho12-mypage-left, 
.ho12-orders-box, 
.ho12-bw-table th, 
.ho12-bw-table td,
.ho12-mp-desc-box, 
.ho12-login-box, 
.ho12-mp-qcard, 
.ho12-qcard, 
.ho12-ep-card, 
.ho12-mp-bal-card, 
.ho12-pd-info, 
.ho12-product-card,
.product,
ul.products li.product,
.woocommerce ul.products li.product,
.ho12-notice,
.ho12-works-container, 
.ho12-mypage, 
.ho12-library, 
.ho12-charge-container, 
.ho12-contact, 
.ho12-search-page, 
.ho12-single-work, 
.ho12-pd-wrap,
.ho12-viewer,
.ho12-viewer-sidebar, 
.ho12-viewer-header, 
.ho12-viewer-footer {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* 10. Search and WooCommerce Premium B&W transparent overrides */
.ho12-search-icon {
    color: #111111 !important;
}
.ho12-search-icon:hover {
    color: #000000 !important;
    filter: none !important;
}
.ho12-search-expand input {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #111111 !important;
    border-radius: 0px !important;
}
.ho12-search-expand input::placeholder {
    color: #777777 !important;
}
.ho12-search-results {
    background: #ffffff !important;
    border: 1px solid #111111 !important;
    border-radius: 0px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}
.ho12-sr-group h4 {
    color: #111111 !important;
    font-weight: bold !important;
    border-bottom: 1px solid #111111 !important;
    padding-bottom: 4px !important;
}
.ho12-sr-item {
    color: #111111 !important;
    border-bottom: 1px solid #eeeeee !important;
}
.ho12-sr-item:hover {
    background: #f5f5f5 !important;
    color: #000000 !important;
}
.ho12-sr-item img {
    border: 1px solid #111111 !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

/* Force WooCommerce and standard tables/grids to have transparent backgrounds */
.woocommerce-cart-form,
.cart-collaterals,
.cart_totals,
.cart_totals table,
.cart_totals table tr,
.cart_totals table td,
.cart_totals table th,
table.shop_table,
table.shop_table tr,
table.shop_table td,
table.shop_table th,
.woocommerce-checkout,
.woocommerce-checkout tr,
.woocommerce-checkout td,
.woocommerce-checkout th,
#order_review,
#order_review_heading,
.woocommerce-checkout-payment,
ul.payment_methods,
.place-order,
li.wc_payment_method,
.woocommerce-billing-fields,
.woocommerce-additional-fields,
.woocommerce-input-wrapper,
.ho12-works-grid,
.ho12-main-works-grid,
.ho12-works-list,
.ho12-works-item,
.ho12-work-card,
.ho12-goods-grid,
.ho12-goods-card,
.ho12-pd-wrap,
.ho12-pd-related-grid,
.ho12-pd-related-card,
.ho12-compact-card,
.ho12-lib-grid,
.ho12-lib-item,
.ho12-mypage-right,
.ho12-mp-right,
.ho12-mypage-left,
.ho12-mypage-right-panel,
.ho12-mypage-desc,
.ho12-intro-container,
.ho12-viewer-container,
.ho12-about-container,
.ho12-goods-container,
.ho12-viewer-sidebar,
.ho12-viewer-header,
.ho12-viewer-footer,
.ho12-charge-bal,
.ho12-charge-grid,
.ho12-charge-card,
.ho12-wallet-card,
.ho12-wallet-card-bg-effect,
.ho12-mp-qcard,
.ho12-mp-bal-card,
.wc-block-grid__product,
.wc-block-grid__products,
.wc-block-grid,
.wc-block-cart,
.wc-block-checkout,
.wc-block-cart__layout,
.wc-block-checkout__layout,
.woocommerce-cart-form__contents,
.woocommerce-cart-form__contents td,
.woocommerce-cart-form__contents th,
.wc-block-components-sidebar,
.wc-block-components-main,
.wc-block-components-totals-wrapper,
.wc-block-components-totals-item,
.ho12-notice,
.ho12-empty {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* 작품 카드 외곽 네모 테두리 및 배경 삭제 - 아이콘 그대로 공중부유 */
#page .ho12-work-card {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 10px !important;
    text-decoration: none !important;
    transition: transform 0.25s ease-in-out !important;
}
#page .ho12-work-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border: none !important;
    transition: none !important;
}
#page .ho12-wc-thumb {
    width: 140px !important;
    height: 140px !important;
    aspect-ratio: 1/1 !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}
#page .ho12-wc-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    transition: transform 0.3s ease-in-out !important;
}
#page .ho12-work-card:hover .ho12-wc-thumb img {
    transform: none !important;
}
#page .ho12-wc-text-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 5px !important;
}
#page .ho12-wc-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}
#page .ho12-wc-author {
    font-size: 13px !important;
    color: #777777 !important;
    font-weight: 600 !important;
}
#page .ho12-wc-thumb .ho12-badge-adult {
    position: absolute !important;
    bottom: 5px !important;
    right: 5px !important;
    background: #ff4757 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 20px !important;
    line-height: 1 !important;
    border: 1.5px solid #111111 !important;
    box-shadow: none !important;
    z-index: 5 !important;
}

@media (max-width: 768px) {
    #page .ho12-wc-thumb {
        width: 100px !important;
        height: 100px !important;
    }
    #page .ho12-wc-title {
        font-size: 14px !important;
    }
}

/* ═══ 우커머스 장바구니 B&W 스케치 스타일화 및 깨짐 완전 방지 ═══ */
.ho12-in-page-cart {
    border: 2.5px solid #111111 !important;
    border-radius: 8px 4px 12px 6px / 6px 12px 4px 8px !important;
    padding: 24px !important;
    background: #ffffff !important;
    box-shadow: 4px 4px 0px #111111 !important;
    box-sizing: border-box !important;
}

/* 장바구니 테이블 기본 리셋 및 B&W화 */
.ho12-in-page-cart table.shop_table {
    border-collapse: collapse !important;
    border: 2px solid #111111 !important;
    width: 100% !important;
    margin-bottom: 24px !important;
    background: #ffffff !important;
}

.ho12-in-page-cart table.shop_table th {
    background: #ffffff !important;
    color: #111111 !important;
    border-bottom: 2.5px solid #111111 !important;
    padding: 12px 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.ho12-in-page-cart table.shop_table td {
    border-bottom: 1.5px solid #111111 !important;
    padding: 16px 10px !important;
    color: #111111 !important;
    vertical-align: middle !important;
}

.ho12-in-page-cart table.shop_table tr.cart_item:hover {
    background: #f9f9f9 !important;
}

/* 상품 썸네일 숨기기 (모바일 깨짐 방지 및 극적인 심플함 확보) */
.ho12-in-page-cart table.shop_table td.product-thumbnail,
.ho12-in-page-cart table.shop_table th.product-thumbnail {
    display: none !important;
}

/* 수량 조절 및 폼 컨트롤 다듬기 */
.ho12-in-page-cart .quantity input.qty {
    width: 50px !important;
    height: 36px !important;
    border: 2px solid #111111 !important;
    border-radius: 0px !important;
    text-align: center !important;
    color: #111111 !important;
    background: #ffffff !important;
    font-weight: 700 !important;
}

.ho12-in-page-cart .actions {
    background: #ffffff !important;
    text-align: right !important;
    padding: 15px 10px !important;
}

.ho12-in-page-cart input[name="update_cart"],
.ho12-in-page-cart button[name="update_cart"] {
    background: #ffffff !important;
    border: 2px solid #111111 !important;
    color: #111111 !important;
    padding: 8px 16px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.ho12-in-page-cart input[name="update_cart"]:hover,
.ho12-in-page-cart button[name="update_cart"]:hover {
    background: #111111 !important;
    color: #ffffff !important;
}

/* 쿠폰 영역 심플 B&W화 */
.ho12-in-page-cart .coupon {
    float: left !important;
    display: flex !important;
    gap: 8px !important;
}

.ho12-in-page-cart .coupon input[type="text"] {
    border: 2px solid #111111 !important;
    background: #ffffff !important;
    color: #111111 !important;
    padding: 8px 12px !important;
    width: 140px !important;
    outline: none !important;
}

.ho12-in-page-cart .coupon button.button,
.ho12-in-page-cart .coupon input[type="submit"] {
    background: #ffffff !important;
    border: 2px solid #111111 !important;
    color: #111111 !important;
    padding: 8px 16px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.ho12-in-page-cart .coupon button.button:hover {
    background: #111111 !important;
    color: #ffffff !important;
}

/* 결제 요약 영역 (Cart Collaterals) */
.ho12-in-page-cart .cart-collaterals {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 30px !important;
}

.ho12-in-page-cart .cart_totals {
    width: 100% !important;
    max-width: 450px !important;
    float: none !important;
    border: 2px solid #111111 !important;
    padding: 20px !important;
    background: #ffffff !important;
    box-shadow: 4px 4px 0px #111111 !important;
}

.ho12-in-page-cart .cart_totals h2 {
    font-size: 18px !important;
    font-weight: 800 !important;
    border-bottom: 2px solid #111111 !important;
    padding-bottom: 8px !important;
    margin-bottom: 15px !important;
    color: #111111 !important;
}

.ho12-in-page-cart .cart_totals table.shop_table {
    border: none !important;
    margin-bottom: 20px !important;
}

.ho12-in-page-cart .cart_totals table.shop_table tr th,
.ho12-in-page-cart .cart_totals table.shop_table tr td {
    border-bottom: 1px dashed #111111 !important;
    padding: 10px 0 !important;
}

.ho12-in-page-cart .cart_totals table.shop_table tr.order-total th,
.ho12-in-page-cart .cart_totals table.shop_table tr.order-total td {
    border-bottom: none !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.ho12-in-page-cart .wc-proceed-to-checkout a.checkout-button {
    display: block !important;
    text-align: center !important;
    background: #111111 !important;
    border: 2px solid #111111 !important;
    color: #ffffff !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}

.ho12-in-page-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background: #ffffff !important;
    color: #111111 !important;
}

/* 모바일 전용 반응형 레이아웃 깨짐 대응 */
@media (max-width: 768px) {
    .ho12-in-page-cart {
        padding: 15px !important;
    }
    
    .ho12-in-page-cart table.shop_table, 
    .ho12-in-page-cart table.shop_table thead, 
    .ho12-in-page-cart table.shop_table tbody, 
    .ho12-in-page-cart table.shop_table tr, 
    .ho12-in-page-cart table.shop_table td {
        display: block !important;
        width: 100% !important;
    }
    
    .ho12-in-page-cart table.shop_table thead {
        display: none !important; /* 모바일 헤더 숨김 */
    }
    
    .ho12-in-page-cart table.shop_table tr {
        border-bottom: 2px solid #111111 !important;
        padding: 15px 0 !important;
        position: relative !important;
    }
    
    .ho12-in-page-cart table.shop_table td {
        border-bottom: none !important;
        padding: 6px 10px !important;
        text-align: right !important;
    }
    
    /* 모바일에서 항목 라벨 노출 */
    .ho12-in-page-cart table.shop_table td::before {
        content: attr(data-title) ": " !important;
        float: left !important;
        font-weight: 800 !important;
    }
    
    .ho12-in-page-cart table.shop_table td.product-remove {
        text-align: left !important;
    }
    
    .ho12-in-page-cart table.shop_table td.product-remove::before {
        display: none !important;
    }
    
    .ho12-in-page-cart .coupon {
        float: none !important;
        width: 100% !important;
        flex-direction: column !important;
        margin-bottom: 10px !important;
    }
    
    .ho12-in-page-cart .coupon input[type="text"] {
        width: 100% !important;
    }
    
    .ho12-in-page-cart .coupon button.button {
        width: 100% !important;
    }
    
    .ho12-in-page-cart input[name="update_cart"],
    .ho12-in-page-cart button[name="update_cart"] {
        width: 100% !important;
    }
    
    .ho12-in-page-cart .cart-collaterals {
        justify-content: center !important;
    }
    
    .ho12-in-page-cart .cart_totals {
        max-width: 100% !important;
    }
}


/* ═══ 2026-05-27 Global Fixes ═══ */

/* 1. 글로벌 버튼 텍스트 흰색 강제 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .cart .button,
.woocommerce .checkout-button,
.woocommerce #respond input#submit,
a.added_to_cart,
.woocommerce a.added_to_cart,
.wp-block-button__link,
.wc-block-components-button {
  color: #ffffff !important;
  background: #111111 !important;
  border: 1px solid #111111 !important;
  border-radius: 0px !important;
  font-weight: 700 !important;
  transition: all 0.2s !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .cart .button:hover,
.woocommerce .checkout-button:hover,
a.added_to_cart:hover,
.woocommerce a.added_to_cart:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  opacity: 0.9 !important;
}

/* 2. 상품 목록 카드 호버 시 텍스트 색상 유지 */
.ho12-goods-card:hover h4 {
  color: #111111 !important;
}
.ho12-goods-card:hover .ho12-gamtae-price {
  color: #111111 !important;
}

/* 3. 장바구니 팝업 CSS */
.ho12-cart-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 100000;
  align-items: center;
  justify-content: center;
}
.ho12-cart-popup.active {
  display: flex !important;
}
.ho12-cart-popup-inner {
  background: #ffffff !important;
  border: 2px solid #111111 !important;
  border-radius: 0px !important;
  padding: 40px !important;
  max-width: 420px;
  width: 90%;
  text-align: center;
  color: #111111 !important;
  box-shadow: 4px 4px 0px #111111 !important;
}
.ho12-cart-popup-inner h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #111111 !important;
  margin: 0 0 10px !important;
}
.ho12-cart-popup-inner p {
  font-size: 14px !important;
  color: #555555 !important;
  margin-bottom: 24px !important;
}
.ho12-cart-popup-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
}
.ho12-cart-popup-actions .ho12-btn-outline {
  background: #ffffff !important;
  border: 1.5px solid #111111 !important;
  color: #111111 !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border-radius: 0px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}
.ho12-cart-popup-actions .ho12-btn-outline:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  opacity: 0.9 !important;
}
.ho12-cart-popup-actions .ho12-btn-primary {
  background: #111111 !important;
  border: 1.5px solid #111111 !important;
  color: #ffffff !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border-radius: 0px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}
.ho12-cart-popup-actions .ho12-btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  opacity: 0.9 !important;
}

/* 4. 마이페이지 카트 탭 내 WooCommerce 버튼 흰색 텍스트 */
.ho12-in-page-cart .button,
.ho12-in-page-cart a.button,
.ho12-in-page-cart .checkout-button,
.ho12-in-page-cart .wc-proceed-to-checkout a {
  color: #ffffff !important;
  background: #111111 !important;
  border: 1px solid #111111 !important;
  border-radius: 0px !important;
}
.ho12-in-page-cart .button:hover,
.ho12-in-page-cart a.button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  opacity: 0.9 !important;
}

/* 5. 상품 상세 - 상품 설명과 연관상품 사이 여백 */
.ho12-pd-tabs-section {
  margin-bottom: 60px !important;
}
.ho12-pd-tabs-section + section,
.ho12-pd-tabs-section ~ .related.products,
section.related.products,
.woocommerce section.related {
  margin-top: 60px !important;
  padding-top: 40px !important;
  border-top: 1px solid #111111 !important;
}

/* 6. 연관 상품 장바구니 버튼 */
.related.products .add_to_cart_button,
.related.products a.button,
.woocommerce .related .add_to_cart_button {
  color: #ffffff !important;
  background: #111111 !important;
  border: 1px solid #111111 !important;
  border-radius: 0px !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
}
.related.products .add_to_cart_button:hover,
.related.products a.button:hover,
.woocommerce .related .add_to_cart_button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  opacity: 0.9 !important;
}

/* ============================================================
   글로벌 호버 검정배경 완전 차단 — 모든 요소 대상
   WooCommerce 테마/플러그인이 주입하는 hover bg도 무력화
   ============================================================ */
a:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
.wp-element-button:hover,
.wc-block-components-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.woocommerce .products .product a:hover,
.woocommerce ul.products li.product a:hover img,
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
  background-color: inherit !important;
  color: inherit !important;
}
/* 썸네일 이미지 호버 시 오버레이/검정 방지 */
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li img:hover,
.woocommerce ul.products li.product a img:hover,
.woocommerce ul.products li.product .woocommerce-loop-product__link:hover {
  opacity: 0.85 !important;
  background: transparent !important;
}

/* ============================================================
   서재 페이지 썸네일 이미지 테두리 — 메인페이지 카드와 동일
   ============================================================ */
.ho12-lib-item {
  border: 1.5px solid #111111 !important;
  border-radius: 0px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}
.ho12-lib-item a {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  text-decoration: none !important;
  color: #111111 !important;
}
.ho12-lib-thumb {
  border-bottom: 1.5px solid #111111 !important;
}
.ho12-lib-info {
  padding: 10px !important;
  background: #ffffff !important;
}
.ho12-lib-info h4 {
  margin: 0 0 6px 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111111 !important;
}
.ho12-lib-info span {
  font-size: 11px !important;
  color: #777777 !important;
}
/* 서재 썸네일 그라데이션 오버레이 제거 (B&W) */
.ho12-lib-thumb::after {
  display: none !important;
}

/* ============================================================
   문의페이지 구분선 이미지 보호 — B&W 오버라이드 무력화
   인라인 style이 최우선이지만, #page textarea 규칙을 무력화
   ============================================================ */
#page #ho12-ct-msg,
#page .ho12-contact-fg textarea {
  background-image: unset !important;
}

/* ============================================================
   모달 보호 — B&W 오버라이드에서 완전 제외
   감태 충전, 구매 확인, 에피소드 구매 모달
   ============================================================ */
#ho12-confirm-modal div,
#ho12-confirm-modal button,
#ho12-confirm-modal h3,
#ho12-confirm-modal p,
#ho12-confirm-modal strong,
#ho12-confirm-modal span,
#ho12-charge-modal div,
#ho12-charge-modal button,
#ho12-charge-modal h3,
#ho12-charge-modal p,
#ho12-charge-modal strong,
#ho12-charge-modal span,
#ho12-charge-modal a,
#ho12-buy-popup div,
#ho12-buy-popup button,
#ho12-buy-popup span {
  color: unset !important;
  background-color: unset !important;
}

/* ============================================================
   상품 카드 — 관리자 설정 배경 이미지 적용 시 테두리/배경 제거
   ============================================================ */
html body #page .ho12-goods-card.has-custom-box,
.ho12-goods-card.has-custom-box {
  border: none !important;
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 20px 24px !important;
}
html body #page .ho12-goods-card.has-custom-box:hover,
.ho12-goods-card.has-custom-box:hover {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
html body #page .ho12-goods-card.has-custom-box img {
  border: none !important;
  box-shadow: none !important;
}

/* ============================================================
   에피소드 행성 리스트 및 우커머스 연관상품 레이아웃/높이 불균형 해결
   ============================================================ */

/* 에피소드 행성 리스트 좌우 대칭 및 중앙 정렬 보정 */
.ho12-planets {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px auto 0 auto !important;
    padding: 20px 0 !important;
    box-sizing: border-box !important;
}
.ho12-planet {
    margin: 0 !important;
}

/* 우커머스 상품 목록 grid 및 flex 정렬 */
.woocommerce ul.products,
.ho12-pd-related-section ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* 관련 상품 개별 카드 정렬 */
.woocommerce ul.products li.product,
.ho12-pd-related-section ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1.5px solid #111111 !important;
    border-radius: 0px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    margin: 0 !important;
}

/* 개별 카드 내 링크 정렬 */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.ho12-pd-related-section ul.products li.product a.woocommerce-loop-product__link {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* 상품 썸네일 이미지 높이 및 비율 고정 */
.woocommerce ul.products li.product a img,
.ho12-pd-related-section ul.products li.product a img {
    width: 100% !important;
    height: 150px !important; /* 이미지 높이를 150px로 일치시켜 동일선상에서 시작하도록 유도 */
    aspect-ratio: 1/1 !important;
    object-fit: contain !important;
    margin: 0 auto 12px auto !important;
    display: block !important;
    border: none !important;
    background: transparent !important;
}

/* 상품 제목 텍스트 박스 높이 고정 (글자수 차이로 인한 높이 불균형 해결) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.ho12-pd-related-section ul.products li.product h2 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin: auto 0 8px 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    min-height: 44px !important; /* 최소 높이를 44px로 주어 1줄/2줄 제목 모두 동일 높이로 고정 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    word-break: keep-all !important;
}

/* 상품 가격 정렬 */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .ho12-gamtae-price,
.ho12-pd-related-section ul.products li.product .price {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #2d8a4e !important;
}