/* ═══════════════════════════════════════════════════════════════
   전자랜드몰 공통 디자인 시스템
   모든 페이지에서 <link rel="stylesheet" href="/etland-theme.css">
   ═══════════════════════════════════════════════════════════════ */

/* ─── Reset & Base ─── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;padding:0;font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  color:#1a1a1a;background:#fff;font-size:14px;line-height:1.5;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit;padding:0;}
img{max-width:100%;display:block;}
input,select,textarea{font-family:inherit;}
ul,ol{list-style:none;margin:0;padding:0;}

/* ─── Color/Spacing Tokens ─── */
:root{
  --accent:#e8140a;        /* 빨강 포인트 */
  --accent-dark:#c50d02;
  --accent-bg:#fff5f5;
  --text:#1a1a1a;
  --text-2:#6b7280;
  --text-3:#9ca3af;
  --bg:#fff;
  --bg-2:#fafbfc;
  --bg-3:#f5f6f8;
  --border:#eef0f3;
  --border-2:#e5e7eb;
  --success:#10b981;
  --warn:#f59e0b;
  --danger:#ef4444;
  --info:#2563eb;
  --radius:8px;
  --radius-lg:12px;
}

/* ─── Layout ─── */
.container{max-width:1240px;margin:0 auto;padding:0 20px;}

/* ═══════════════════════════════════════════════════════════════
   상단 유틸 미니바
   ═══════════════════════════════════════════════════════════════ */
.top-bar{background:#fafafa;border-bottom:1px solid #f0f0f0;font-size:12px;color:#888;}
.top-bar .container{display:flex;justify-content:space-between;align-items:center;height:34px;}
.top-bar-left{color:var(--accent);font-weight:600;font-size:12px;}
.top-bar-right{display:flex;gap:16px;}
.top-bar-right a{color:#777;transition:color .15s;}
.top-bar-right a:hover{color:var(--accent);}

/* ═══════════════════════════════════════════════════════════════
   헤더
   ═══════════════════════════════════════════════════════════════ */
header{background:#fff;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border);}
.header-main{padding:22px 0 20px;display:flex;align-items:center;gap:40px;}
.logo{font-size:30px;font-weight:900;color:#111;letter-spacing:-1.6px;white-space:nowrap;flex-shrink:0;}
.logo em{color:var(--accent);font-style:normal;}

.search-input{width:100%;height:46px;padding:0 50px 0 20px;background:var(--bg-3);border:none;
  border-radius:23px;font-size:14.5px;outline:none;color:var(--text);transition:background .15s;}
.search-input:focus{background:#fff;box-shadow:0 0 0 2px #111 inset;}
.search-input::placeholder{color:#a8a8a8;}


.header-right{display:flex;align-items:center;gap:26px;margin-left:auto;}
.header-icon{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;
  color:#555;background:none;border:none;position:relative;transition:color .15s;}
.header-icon:hover{color:var(--accent);}
.header-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}
.h-badge{position:absolute;top:-5px;right:-8px;background:var(--accent);color:#fff;font-size:10px;
  font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;}

/* ─── GNB ─── */
.gnb{background:#fff;}
.gnb-inner{display:flex;align-items:center;height:52px;overflow-x:auto;scrollbar-width:none;}
.gnb-inner::-webkit-scrollbar{display:none;}
.all-menu-btn{display:flex;align-items:center;gap:10px;padding:0 22px 0 0;height:100%;
  background:none;border:none;font-size:15px;font-weight:700;color:#111;white-space:nowrap;
  flex-shrink:0;border-right:1px solid var(--border);margin-right:18px;}
.all-menu-btn .hamb{display:flex;flex-direction:column;gap:3px;}
.all-menu-btn .hamb span{display:block;width:18px;height:2.2px;background:#111;border-radius:2px;}
.cat-nav{flex:1;min-width:0;}
.cat-nav-inner{display:flex;align-items:center;height:100%;gap:2px;}
.cat-link{padding:0 14px;height:52px;font-size:14px;font-weight:500;color:var(--text);
  white-space:nowrap;display:flex;align-items:center;transition:color .15s;position:relative;}
.cat-link:hover{color:var(--accent);}
.cat-link.active{color:var(--accent);font-weight:700;}
.cat-link.active::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--accent);}

/* 모바일 검색바 */
.mobile-search-bar{display:none;padding:10px 12px 14px;background:#fff;}
.mobile-search-bar .msb-inner{position:relative;}
.mobile-search-bar input{width:100%;height:40px;padding:0 44px 0 16px;background:var(--bg-3);
  border:none;border-radius:20px;font-size:13px;outline:none;color:var(--text);}
.mobile-search-bar button{position:absolute;right:4px;top:4px;height:32px;width:32px;
  background:transparent;border-radius:50%;color:#333;font-size:15px;}

/* ═══════════════════════════════════════════════════════════════
   공통 컴포넌트: 섹션, 페이지 헤더, 브레드크럼
   ═══════════════════════════════════════════════════════════════ */
main{padding:28px 0 40px;background:#fff;min-height:calc(100vh - 240px);}
.section{margin-bottom:56px;}
.page-header{margin-bottom:28px;}
.page-title{font-size:24px;font-weight:800;color:#111;letter-spacing:-0.7px;margin-bottom:6px;}
.page-subtitle{font-size:14px;color:var(--text-2);}
.breadcrumb{font-size:12px;color:var(--text-3);margin-bottom:12px;}
.breadcrumb a{transition:color .15s;}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb span{margin:0 6px;}

/* 섹션 타이틀 */
.sec-title{text-align:center;font-size:22px;font-weight:800;color:#111;margin:0 0 24px;letter-spacing:-0.7px;}
.sec-title-row{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;}
.sec-title-row h2{font-size:20px;font-weight:800;color:#111;margin:0;letter-spacing:-0.5px;}
.sec-sub{font-size:13px;color:var(--text-3);font-weight:400;}
.sec-more{margin-left:auto;font-size:13px;color:var(--text-2);cursor:pointer;background:none;border:none;}
.sec-more:hover{color:var(--accent);}

/* ─── 버튼 ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 24px;border-radius:var(--radius);font-size:14px;font-weight:600;
  transition:all .15s;border:1px solid transparent;cursor:pointer;line-height:1;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-dark{background:#111;color:#fff;}
.btn-dark:hover{background:var(--accent);}
.btn-outline{background:#fff;color:#111;border-color:var(--border-2);}
.btn-outline:hover{border-color:#111;}
.btn-light{background:var(--bg-3);color:var(--text);}
.btn-light:hover{background:var(--border-2);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-lg{padding:14px 32px;font-size:15px;}
.btn-sm{padding:8px 14px;font-size:12.5px;}
.btn-block{width:100%;}

/* ─── 폼 요소 ─── */
.form-group{margin-bottom:16px;}
.form-label{display:block;font-size:12.5px;font-weight:700;color:#374151;margin-bottom:6px;letter-spacing:-0.2px;}
.form-label .req{color:var(--accent);margin-left:3px;}
.form-input,.form-select,.form-textarea{
  width:100%;height:46px;padding:0 14px;border:1.5px solid var(--border-2);
  border-radius:var(--radius);font-size:14px;color:var(--text);outline:none;
  background:#fff;transition:all .15s;font-family:inherit;}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,0.06);}
.form-textarea{height:auto;padding:12px 14px;resize:vertical;min-height:96px;line-height:1.5;}
.form-select{appearance:none;padding-right:40px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size:16px;}
.form-hint{font-size:11.5px;color:var(--text-3);margin-top:4px;}
.form-error{font-size:12px;color:var(--danger);margin-top:4px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.checkbox,.radio{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:13px;color:#374151;}
.checkbox input,.radio input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}

/* ─── 카드 ─── */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;}
.card-header{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.card-title{font-size:16px;font-weight:800;color:#111;letter-spacing:-0.3px;}

/* ─── 상품 카드 (공통) ─── */

.prod-card:hover{transform:translateY(-3px);}

.prod-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.prod-card:hover .prod-thumb img{transform:scale(1.04);}
.tag-wrap{position:absolute;top:10px;left:10px;display:flex;gap:4px;z-index:2;flex-wrap:wrap;max-width:70%;}
.tag{display:inline-block;padding:3px 8px;border-radius:3px;font-size:11px;font-weight:700;
  letter-spacing:-0.3px;color:#fff;}
.tag-sale{background:#111;}
.tag-new{background:var(--info);}
.tag-best{background:var(--accent);}
.tag-hot{background:var(--warn);}
.wish-btn{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,0.95);border:none;font-size:15px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.08);z-index:2;
  transition:all .15s;}
.wish-btn:hover{background:#fff;transform:scale(1.08);}

.prod-card:hover 


.prod-info{padding:0 2px;}
.prod-brand-tag{font-size:11px;color:var(--text-3);margin-bottom:3px;font-weight:500;}
.prod-name{font-size:13.5px;color:var(--text);line-height:1.4;margin-bottom:8px;min-height:38px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.prod-stars{font-size:12px;color:#ffb400;margin-bottom:4px;font-weight:600;}
.prod-stars span{color:#999;margin-left:3px;font-weight:400;font-size:11px;}
.prod-price-row{display:flex;align-items:baseline;gap:5px;margin-bottom:6px;flex-wrap:wrap;}
.discount{font-size:16px;font-weight:900;color:var(--accent);}
.final-price{font-size:16px;font-weight:800;color:#111;}
.free-ship{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;color:var(--text-2);
  background:#f3f4f6;padding:2px 7px;border-radius:3px;font-weight:500;}

/* 혜택 아이콘 */
.prod-benefits{display:flex;flex-direction:column;gap:3px;margin-top:6px;}
.pb-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-2);line-height:1.3;}
.pb-dot{display:inline-block;width:10px;height:10px;border-radius:2px;flex-shrink:0;}
.pb-coupon .pb-dot{background:var(--info);}
.pb-card .pb-dot{background:var(--success);}
.pb-point .pb-dot{background:var(--warn);}
.pb-gift .pb-dot{background:#8b5cf6;}
.pb-ship .pb-dot{background:var(--text-2);}

/* ─── 테이블 ─── */
.table-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
table.etland{width:100%;border-collapse:collapse;}
table.etland thead tr{background:var(--bg-2);}
table.etland th{padding:14px 16px;text-align:left;font-size:11.5px;font-weight:700;color:var(--text-2);
  letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid var(--border);}
table.etland td{padding:14px 16px;border-bottom:1px solid #f3f4f6;font-size:13px;color:#374151;
  vertical-align:middle;}
table.etland tr:last-child td{border-bottom:none;}
table.etland tbody tr:hover{background:var(--bg-2);}

/* ─── 뱃지 ─── */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:4px;font-size:11px;font-weight:700;}
.badge-sale{background:#fef2f2;color:var(--accent);}
.badge-active{background:#ecfdf5;color:var(--success);}
.badge-inactive{background:var(--bg-3);color:var(--text-2);}
.badge-new{background:#eff6ff;color:var(--info);}
.badge-best{background:#fff7ed;color:#ea580c;}
.badge-gray{background:var(--bg-3);color:var(--text-2);}

/* ─── 모달 ─── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9998;
  display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:14px;width:520px;max-width:94vw;max-height:90vh;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.2);}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.modal-title{font-size:17px;font-weight:800;color:#111;}
.modal-close{width:32px;height:32px;border-radius:var(--radius);background:var(--bg-3);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-2);}
.modal-close:hover{background:#fef2f2;color:var(--accent);}
.modal-body{padding:22px 24px;overflow-y:auto;flex:1;}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);background:var(--bg-2);
  display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;}

/* ═══════════════════════════════════════════════════════════════
   메가 메뉴 (좌측 슬라이드)
   ═══════════════════════════════════════════════════════════════ */
.mega-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:9998;
  opacity:0;visibility:hidden;transition:all .2s;}
.mega-menu-overlay.show{opacity:1;visibility:visible;}
.mega-menu{position:fixed;left:0;top:0;bottom:0;width:340px;max-width:92vw;background:#fff;
  z-index:9999;transform:translateX(-100%);transition:transform .25s;overflow-y:auto;
  padding-bottom:40px;box-shadow:4px 0 20px rgba(0,0,0,0.1);}
.mega-menu.show{transform:translateX(0);}
.mega-menu-header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;
  border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:2;}
.mega-menu-header span{font-size:15px;font-weight:700;letter-spacing:-0.3px;}
.mega-menu-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--text-2);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;}
.mega-menu-close:hover{background:var(--bg-3);color:#111;}
.mega-cat-item{border-bottom:1px solid #f5f5f5;}
.mega-cat-title{padding:14px 20px;font-size:14px;font-weight:600;display:flex;
  justify-content:space-between;align-items:center;cursor:pointer;transition:all .15s;}
.mega-cat-title:hover{background:#fafafa;}
.mega-cat-title.open{color:var(--accent);background:var(--accent-bg);}
.mega-cat-title .arrow{font-size:14px;color:#aaa;transition:transform .2s;}
.mega-cat-title.open .arrow{transform:rotate(90deg);color:var(--accent);}
.mega-sub-list{display:none;padding:8px 20px 16px;flex-wrap:wrap;gap:6px;}
.mega-sub-list.show{display:flex;}
.mega-sub-item{display:inline-block;padding:6px 12px;background:var(--bg-3);border-radius:14px;
  font-size:12px;color:#555;cursor:pointer;transition:all .15s;}
.mega-sub-item:hover{background:#fee2e2;color:var(--accent);}

/* ═══════════════════════════════════════════════════════════════
   전자랜드몰 Footer — 실제 etlandmall 스타일
   ═══════════════════════════════════════════════════════════════ */
.et-footer{background:#fff;border-top:1px solid #e5e5e5;margin-top:60px;color:#555;font-size:13px;line-height:1.6;}

/* 상단 네비 링크 바 */
.et-footer-top{border-bottom:1px solid #e5e5e5;padding:14px 0;}
.et-footer-top .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.et-footer-links{display:flex;flex-wrap:wrap;gap:20px;align-items:center;}
.et-footer-links a{font-size:13px;color:#333;font-weight:500;transition:color .15s;}
.et-footer-links a:hover{color:var(--accent);}
.et-footer-links a.bold{font-weight:700;color:#111;}
.et-family-wrap{}
.et-family{height:32px;padding:0 32px 0 14px;border:1px solid #ccc;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23666' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size:14px;font-size:12.5px;color:#333;appearance:none;cursor:pointer;outline:none;min-width:160px;}
.et-family:hover{border-color:#888;}

/* 회사 정보 + QR */
.et-footer-info{padding:28px 0 24px;}
.et-footer-info .container{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;}
.et-info-left{flex:1;min-width:0;}
.et-company-name{font-size:14px;font-weight:700;color:#222;margin-bottom:10px;letter-spacing:-0.2px;}
.et-info-row{font-size:12.5px;color:#666;line-height:1.9;}
.et-info-row span{color:#333;}
.et-info-row .et-sep{color:#ccc;margin:0 6px;font-weight:400;}
.et-info-right{display:flex;align-items:center;gap:12px;flex-shrink:0;padding-top:4px;}
.et-qr-text{font-size:12px;color:#555;line-height:1.5;text-align:right;}
.et-qr-text strong{color:#111;font-weight:600;}
.et-qr-code{width:82px;height:82px;padding:4px;border:1px solid #ddd;border-radius:4px;background:#fff;flex-shrink:0;}
.et-qr-code svg{width:100%;height:100%;display:block;}

/* 고객센터 3개 */
.et-footer-centers{padding:20px 0;}
.et-footer-centers .container{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.et-center-box{border:1px solid #e0e0e0;border-radius:4px;padding:16px 22px;display:flex;align-items:center;gap:18px;background:#fff;}
.et-center-label{font-size:13px;font-weight:600;color:#333;flex-shrink:0;min-width:90px;letter-spacing:-0.2px;}
.et-center-main{flex:1;}
.et-center-tel{font-size:19px;font-weight:700;color:#222;letter-spacing:0;line-height:1.1;margin-bottom:3px;}
.et-center-time{font-size:11.5px;color:#888;}

/* 인증 배지 */
.et-footer-badges{padding:18px 0 24px;}
.et-footer-badges .container{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;}
.et-badge{border:1px solid #e5e5e5;border-radius:4px;padding:10px 14px;display:flex;align-items:center;gap:12px;background:#fff;}
.et-badge.escrow{flex:2;min-width:320px;}
.et-badge.isms{flex:1.2;min-width:240px;}
.et-badge.simple{flex-direction:column;justify-content:center;min-width:80px;padding:10px;gap:4px;}
.et-badge-logo{width:64px;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;line-height:1.15;color:#4a148c;background:#f5ebf9;border-radius:3px;text-align:center;padding:4px;flex-shrink:0;letter-spacing:-0.3px;}
.et-badge-logo .el-line1{color:#6a1b9a;font-size:11px;font-weight:800;}
.et-badge-logo .el-line2{color:#4527a0;font-size:10px;font-weight:700;}
.et-badge-logo .el-line3{color:#888;font-size:8.5px;font-weight:500;margin-top:1px;}
.et-badge-logo.isms-logo{background:#0057a8;color:#fff;font-size:17px;font-weight:900;width:56px;letter-spacing:0.5px;}
.et-badge-desc{flex:1;font-size:11.5px;color:#555;line-height:1.55;}
.et-badge-desc strong{color:#222;}
.et-badge-btn{padding:5px 10px;background:#f5f5f5;border:1px solid #ccc;border-radius:3px;font-size:10.5px;color:#555;cursor:pointer;white-space:nowrap;transition:all .15s;}
.et-badge-btn:hover{background:#fff;border-color:#888;color:#222;}
.et-badge-icon{font-size:22px;line-height:1;}
.et-badge-caption{font-size:10.5px;color:#666;text-align:center;line-height:1.3;font-weight:500;}

/* 면책 + 카피라이트 */
.et-footer-disclaimer{border-top:1px solid #e5e5e5;padding:20px 0 28px;background:#fafafa;}
.et-disclaimer-text{font-size:11.5px;color:#888;line-height:1.7;margin-bottom:10px;}
.et-copyright{font-size:12px;color:#aaa;font-weight:500;letter-spacing:0.5px;}

/* 유튜브 플로팅 (우측 하단, 기존 플로팅 버튼 위쪽) */
.et-youtube-float{position:fixed;right:24px;bottom:210px;width:56px;height:64px;background:#fff;border:1px solid var(--border-2);
  border-radius:var(--radius-lg);box-shadow:0 4px 14px rgba(0,0,0,0.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  text-decoration:none;color:#333;font-size:9.5px;font-weight:600;line-height:1.2;text-align:center;transition:all .15s;z-index:90;}
.et-youtube-float:hover{border-color:#ff0000;transform:translateY(-2px);}
.et-youtube-float .yt-icon{width:24px;height:24px;background:#ff0000;border-radius:5px;display:flex;align-items:center;justify-content:center;margin-bottom:2px;}
.et-youtube-float .yt-icon svg{width:14px;height:14px;}
.et-youtube-float .yt-text{font-size:9px;line-height:1.15;color:#333;}

@media (max-width:900px){
  .et-footer-centers .container{grid-template-columns:1fr;}
  .et-info-right{width:100%;justify-content:flex-end;margin-top:6px;}
  .et-badge.escrow,.et-badge.isms{min-width:100%;}
  .et-badge-desc{font-size:11px;}
}
@media (max-width:768px){
  .et-footer{font-size:12px;}
  .et-footer-top .container{gap:8px;}
  .et-footer-links{gap:12px;row-gap:8px;}
  .et-footer-links a{font-size:12px;}
  .et-footer-info{padding:22px 0 18px;}
  .et-footer-info .container{gap:18px;}
  .et-info-right{width:100%;justify-content:space-between;}
  .et-qr-text{flex:1;}
  .et-center-box{padding:12px 16px;gap:12px;}
  .et-center-tel{font-size:16px;}
  .et-badge.simple{flex:1;min-width:0;}
  .et-disclaimer-text{font-size:11px;}
  .et-youtube-float{right:10px;bottom:170px;width:48px;height:56px;font-size:9px;}
  .et-youtube-float .yt-icon{width:20px;height:20px;}
  .et-youtube-float .yt-icon svg{width:12px;height:12px;}
}

/* ═══════════════════════════════════════════════════════════════
   플로팅 버튼 & 토스트
   ═══════════════════════════════════════════════════════════════ */
.floating{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:10px;z-index:90;}
.float-btn{width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--border-2);
  box-shadow:0 4px 14px rgba(0,0,0,0.1);font-size:10px;color:#333;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:all .15s;font-weight:500;}
.float-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.float-btn.top{background:#111;color:#fff;font-size:18px;border-color:#111;}
.float-btn.top:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.float-btn-icon{font-size:20px;}

.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(80px);
  background:rgba(17,17,17,0.95);color:#fff;padding:14px 24px;border-radius:24px;
  font-size:13px;z-index:9999;transition:all .25s;opacity:0;pointer-events:none;}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}

/* ═══════════════════════════════════════════════════════════════
   모바일 하단 탭바
   ═══════════════════════════════════════════════════════════════ */
.mobile-tabbar{display:none;position:fixed;left:0;right:0;bottom:0;background:#fff;
  border-top:1px solid var(--border);z-index:80;padding:6px 0 calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 10px rgba(0,0,0,0.04);}
.mobile-tabbar-inner{display:grid;grid-template-columns:repeat(5,1fr);}
.tab-btn-m{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:none;border:none;font-size:10.5px;color:#777;cursor:pointer;text-decoration:none;
  position:relative;padding:6px 0;transition:color .15s;}
.tab-btn-m.active{color:var(--accent);}
.tab-btn-m:hover{color:var(--accent);}
.tab-btn-m svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}
.tab-btn-m .h-badge{position:absolute;top:2px;right:calc(50% - 18px);}

/* ═══════════════════════════════════════════════════════════════
   빈 상태
   ═══════════════════════════════════════════════════════════════ */
.empty-state{text-align:center;padding:80px 20px;color:var(--text-3);}
.empty-state .icon{font-size:56px;margin-bottom:14px;}
.empty-state .title{font-size:16px;color:#333;font-weight:600;margin-bottom:6px;}
.empty-state .desc{font-size:13px;color:var(--text-3);margin-bottom:20px;}

/* ═══════════════════════════════════════════════════════════════
   반응형
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .footer-body{grid-template-columns:repeat(2,1fr);gap:30px;}
  .form-row{grid-template-columns:1fr;}
}
@media (max-width:768px){
  body{padding-bottom:68px;}
  .container{padding:0 14px;}
  .top-bar .container{height:30px;font-size:11px;}
  .top-bar-left{font-size:11px;}
  .top-bar-right a{font-size:11px;}
  .header-main{padding:12px 0 10px;gap:14px;}
  .logo{font-size:22px;}
  
  .mobile-search-bar{display:block;}
  .header-right{gap:14px;}
  .header-icon{font-size:10px;}
  .header-icon svg{width:22px;height:22px;}
  .header-icon .hlabel{display:none;}
  .gnb-inner{height:46px;}
  .all-menu-btn{font-size:14px;padding:0 14px 0 0;margin-right:10px;}
  .cat-link{font-size:13px;padding:0 10px;height:46px;}
  .cat-link.active::after{left:10px;right:10px;}
  main{padding:16px 0 30px;}
  .section{margin-bottom:40px;}
  .page-title{font-size:20px;}
  .sec-title{font-size:18px;margin-bottom:16px;}
  .footer-body{grid-template-columns:1fr 1fr;gap:20px;padding:24px 14px;}
  .footer-nav{font-size:11px;gap:10px;padding:0 14px 16px;}
  .footer-col-title{font-size:12px;}
  .footer-links{font-size:11px;}
  .floating{right:10px;bottom:78px;}
  .float-btn{width:46px;height:46px;font-size:9px;}
  .float-btn-icon{font-size:17px;}
  .mobile-tabbar{display:block;}
  .card{padding:18px;}
  .modal-body{padding:18px;}
  .btn-lg{padding:12px 24px;}
}