@charset "utf-8";
/* ============================================================
   GBK금거래소 쇼핑몰(shop.gbkkorea.com) — 2026-10-12 판 2
   골드킵 사본의 껍데기를 GBK 짜임으로 바꾼다. vela-theme.css 다음에 로드(_inc/html_header.php).
   ① 머리말: 골드킵의 3단(검은 유틸바·가운데 로고·메뉴줄)을 **한 줄**로 — 마크업은 그대로 두고
      display:contents 로 껍데기 상자를 풀어 #header 격자에 다시 앉힌다(로그인·장바구니·드롭다운 기능 그대로).
   ② 바탕은 무채에 가까운 흰색, 정체성은 로고 갈색과 GBK 금색이 맡는다(골드킵 베이지와 갈라지게).
   ③ 홈(index.php)은 .gbk-* 짜임: 갈색 시세판 + 제조 현장 사진 → 왼쪽 정렬 상품 섹션.
   ★골드킵 원본을 다시 동기화하면 html_header.php 의 이 파일 링크와 index.php 가 덮인다 — 다시 넣을 것.
   ============================================================ */
@font-face{
	font-family:'KBIZHanmaumMyungjo';
	/* 원본 3.6MB → 쓰는 글자만(서버 fontTools 서브셋). 제목 문구를 바꾸면 다시 구울 것 */
	src:url('/css/fonts/kbiz-gbk.woff2?v=20261012b') format('woff2');
	font-weight:700; font-display:swap;
}
:root{
	--gbk-ink:#2a1b12;        /* 로고 갈색(진) — 글자·시세판 */
	--gbk-ink-2:#3a271c;      /* 로고 갈색 */
	--gbk-brown:#6b4534;      /* 주 동작 */
	--gbk-gold:#c8a063;       /* 포인트 — 면적 10% 이하 */
	--gbk-gold-text:#8a6631;  /* 흰 바탕 위 금색 글자(대비 5:1) */
	--gbk-bg:#fbfaf8;         /* 거의 무채 */
	--gbk-surface:#ffffff;
	--gbk-line:#e7e1d9;
	--gbk-muted:#6b5d52;      /* 흰 바탕 대비 6:1 */
	/* 골드킵 테마 변수도 같은 값으로 — 안쪽 화면이 따라오게 */
	--vg-gold:var(--gbk-gold); --vg-gold-2:#e2be86; --vg-gold-deep:var(--gbk-gold-text);
	--vg-ink:var(--gbk-ink); --vg-ink-2:var(--gbk-ink-2); --vg-ink-3:#4a3324;
	--vg-paper:var(--gbk-bg); --vg-paper-2:#f3efea;
	--vg-line:var(--gbk-line); --vg-text:var(--gbk-ink); --vg-muted:var(--gbk-muted);
	--z-sticky:20; --z-dropdown:30;
}
body,#wrap,#contents{background:var(--gbk-bg) !important;}
::selection{background:rgba(200,160,99,.28);}

/* ============================================================
   ① 머리말 — 한 줄: [로고] [메뉴……] [검색] [로그인·장바구니·매장관리]
   ============================================================ */
#wrap > header{position:sticky !important; top:0; z-index:var(--z-sticky); background:var(--gbk-surface); border-bottom:1px solid var(--gbk-line);}
#header{
	display:grid !important; grid-template-columns:auto 1fr auto auto; align-items:center; column-gap:28px;
	max-width:1280px; margin:0 auto; padding:0 28px; height:76px; background:transparent !important; box-shadow:none !important;
}
#header .top,#header .top .in_Layer,#header .mid,#header .mid .in_Layer,#header .bot,#header .bot .category_area{display:contents !important;}
#header .top a.bookmark,#header .mid .call{display:none !important;}
#header .mid .in_Layer::after{content:none !important; display:none !important;}

/* 로고 */
#header .mid a.vg-home-logo{
	grid-column:1; grid-row:1; position:static !important; transform:none !important;
	display:inline-flex !important; align-items:center; width:auto !important; height:44px !important; padding-left:66px; text-decoration:none;
	background:url('/images/gbk/logo-mark-dark.png?v=20261012') no-repeat left center / auto 38px;
}
/* 마크 + 명조 글자 = 가로 워드마크 (aria-label 은 마크업에 있다) */
#header .mid a.vg-home-logo::after{content:"GBK금거래소"; font-family:'KBIZHanmaumMyungjo','Noto Serif KR',serif; font-weight:700; font-size:21px; letter-spacing:-.01em; color:var(--gbk-ink); white-space:nowrap;}
/* 메뉴 */
#header .bot ul.category{grid-column:2; grid-row:1; display:flex !important; justify-content:flex-start !important; gap:2px; flex-wrap:nowrap !important; width:auto !important; margin:0 !important;}
#header .bot ul.category > li > a{
	padding:0 12px !important; line-height:76px !important; font-family:'Pretendard',sans-serif !important;
	font-size:15px !important; font-weight:600 !important; letter-spacing:-.01em; color:var(--gbk-ink-2) !important;
}
#header .bot ul.category > li > a::after{left:12px !important; right:12px !important; bottom:18px !important; height:2px; background:var(--gbk-brown) !important;}
#header .bot ul.category > li:hover > a{color:var(--gbk-brown) !important;}
#header .depth{z-index:var(--z-dropdown); top:100% !important; border:1px solid var(--gbk-line) !important; border-top:2px solid var(--gbk-brown) !important; border-radius:0 0 10px 10px; box-shadow:0 8px 8px -6px rgba(42,27,18,.18) !important;}
#header .depth > li > a{font-family:'Pretendard',sans-serif !important; text-align:left !important; color:var(--gbk-ink-2) !important;}
#header .depth > li > a:hover{color:var(--gbk-brown) !important; background:#f6f2ed !important;}

/* 검색 */
#header .mid .right_search{grid-column:3; grid-row:1; position:static !important; transform:none !important;}
#header .mid .right_search .cont{width:220px !important; height:40px !important; border:1px solid var(--gbk-line) !important; border-radius:999px !important; background:#f6f3ef !important; padding:0 6px 0 14px !important;}
#header .mid .right_search .cont:focus-within{border-color:var(--gbk-brown) !important; background:#fff !important; box-shadow:0 0 0 3px rgba(107,69,52,.12);}
#header .mid .right_search .search{background:var(--gbk-brown) !important; width:28px !important; height:28px !important;}
#header .mid .right_search button[onclick="openImgPick()"]{background:transparent !important; color:var(--gbk-brown) !important; border:1px solid var(--gbk-line) !important; padding:3px 8px !important; font-weight:700 !important;}

/* 로그인·장바구니·매장관리 */
#header .top ul.utill_menu{grid-column:4; grid-row:1; display:flex !important; align-items:center; gap:2px; float:none !important; margin:0 !important;}
#header .top ul.utill_menu li{padding:0 !important;}
#header .top ul.utill_menu li + li::before{display:none !important;}
#header .top ul.utill_menu li:first-child{display:none;}   /* HOME — 로고가 맡는다 */
#header .top ul.utill_menu li a{display:inline-block; padding:8px 10px; color:var(--gbk-muted) !important; font-size:13px !important; font-weight:600; letter-spacing:0 !important; text-transform:none;}
#header .top ul.utill_menu li a:hover{color:var(--gbk-ink) !important;}
#header .top ul.utill_menu li.mypage-li{padding:0 0 0 8px !important;}
#header .top ul.utill_menu li.mypage-li a{background:var(--gbk-ink) !important; color:#fff !important; border-radius:999px; padding:9px 16px !important; box-shadow:none !important; font-weight:700 !important;}
#header .top ul.utill_menu li.mypage-li a:hover{background:var(--gbk-brown) !important; transform:none; filter:none;}

@media (max-width:1180px){
	#header{column-gap:16px; padding:0 18px;}
	#header .mid .right_search .cont{width:170px !important;}
	#header .bot ul.category > li > a{padding:0 8px !important; font-size:14px !important;}
}
@media (max-width:900px){
	#header{grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; height:auto; padding:10px 16px 0; row-gap:8px;}
	#header .mid a.vg-home-logo{grid-column:1; grid-row:1;}
	#header .top ul.utill_menu{grid-column:2; grid-row:1; justify-self:end;}
	#header .mid .right_search{grid-column:1 / -1; grid-row:2;}
	#header .mid .right_search .cont{width:100% !important;}
	#header .bot ul.category{grid-column:1 / -1; grid-row:3; overflow-x:auto; -webkit-overflow-scrolling:touch;}
	#header .bot ul.category > li > a{line-height:46px !important;}
	#header .bot ul.category > li:hover .depth{display:none !important;}
}

/* ============================================================
   ② 홈 — 시세판(갈색) + 제조 현장 사진
   ============================================================ */
.gbk-wrap{max-width:1280px; margin:0 auto; padding:0 28px; box-sizing:border-box;}
.gbk-hero{background:var(--gbk-ink); color:#f3e9da;}
.gbk-hero-in{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:40px; align-items:stretch; padding-top:44px; padding-bottom:44px;}
.gbk-board-hd{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding-bottom:14px; border-bottom:1px solid rgba(226,190,134,.28);}
.gbk-board-hd h2{margin:0; font-family:'KBIZHanmaumMyungjo','Noto Serif KR',serif; font-weight:700; font-size:30px; letter-spacing:-.01em; color:#fff; text-wrap:balance;}
.gbk-board-upd{display:flex; align-items:center; gap:8px; font-size:13px; color:#d9c8ad; font-variant-numeric:tabular-nums;}
.gbk-rf{width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(226,190,134,.4); background:transparent; color:#e2be86; cursor:pointer; transition:background .2s cubic-bezier(.25,1,.5,1);}
.gbk-rf:hover{background:rgba(226,190,134,.12);}
.gbk-rf:focus-visible{outline:2px solid var(--gbk-gold); outline-offset:2px;}
.gbk-rf svg{width:16px; height:16px;}
.gbk-rf svg.spin{animation:gbkspin .6s cubic-bezier(.25,1,.5,1);}
@keyframes gbkspin{to{transform:rotate(360deg);}}
.gbk-chg{margin:14px 0 0; font-size:13.5px; color:#d9c8ad;}
.gbk-chg b{font-weight:700; margin-left:6px; font-variant-numeric:tabular-nums;}
.gbk-chg b.up{color:#f29a85;} .gbk-chg b.down{color:#8fb8f0;}
.gbk-rate{width:100%; border-collapse:collapse; margin-top:10px;}
.gbk-rate th,.gbk-rate td{padding:16px 0; text-align:right; border-bottom:1px solid rgba(226,190,134,.16); vertical-align:top;}
.gbk-rate thead th{padding:10px 0; font-size:12.5px; font-weight:600; color:#cdb895; letter-spacing:.01em;}
.gbk-rate thead th small{font-size:11.5px; font-weight:500; color:#b49e7c; margin-left:3px;}
.gbk-rate th:first-child{text-align:left;}
.gbk-rate tbody th{font-size:17px; font-weight:700; color:#fff;}
.gbk-rate tbody th small{display:block; margin-top:3px; font-size:12px; font-weight:500; color:#cdb895;}
.gbk-px{display:block; font-size:30px; font-weight:800; letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums; line-height:1.15;}
.gbk-px span{font-size:14px; font-weight:600; margin-left:2px; color:#e2be86;}
.gbk-rate td + td .gbk-px{color:#f0dcb4;}
.gbk-rate td small{display:block; margin-top:5px; font-size:12px; color:#cdb895; font-variant-numeric:tabular-nums;}
.gbk-board-ft{margin:12px 0 0; font-size:12.5px; color:#b49e7c;}
.gbk-hero-photo{margin:0; position:relative; border-radius:12px; overflow:hidden; min-height:300px; background:#1d130c;}
.gbk-hero-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.gbk-hero-photo figcaption{position:absolute; left:16px; bottom:14px; padding:6px 12px; border-radius:999px; background:rgba(42,27,18,.72); color:#f0dcb4; font-size:12.5px; font-weight:600;}

/* 상품 섹션 — 왼쪽 정렬 제목 */
#contents.gbk-home{padding-bottom:24px;}
.gbk-sec{padding:56px 0 8px;}
.gbk-sec-hd{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:14px; border-bottom:1px solid var(--gbk-line);}
.gbk-h2{margin:0; font-family:'KBIZHanmaumMyungjo','Noto Serif KR',serif; font-weight:700; font-size:26px; letter-spacing:-.01em; color:var(--gbk-ink); text-wrap:balance;}
#contents .sec01 ul.product_list{gap:24px 20px !important; padding:24px 0 4px !important;}
#contents .sec01 ul.product_list:empty{padding:0 !important;}
#contents .sec01 ul.product_list:empty::before{content:"상품을 준비하고 있습니다."; display:block; padding:40px 0; color:var(--gbk-muted); font-size:14px;}
#contents .sec01 ul.product_list li{border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important;}
#contents .sec01 ul.product_list li:hover{transform:none !important; box-shadow:none !important;}
#contents .sec01 ul.product_list li a .img_wrap{aspect-ratio:1/1 !important; border-radius:10px; background:#f3efea !important;}
#contents .sec01 ul.product_list li:hover a .img_wrap img{transform:scale(1.03);}
#contents .sec01 ul.product_list li a .txt_wrap{padding:12px 2px 0 !important; border-top:0 !important; text-align:left !important;}
#contents .sec01 ul.product_list li a .txt_wrap p.name{justify-content:flex-start !important; min-height:0 !important; font-family:'Pretendard',sans-serif !important; font-size:14.5px !important; font-weight:600 !important; color:var(--gbk-ink) !important;}
#contents .sec01 ul.product_list li a .txt_wrap p.weight{color:var(--gbk-muted) !important;}
#contents .sec01 ul.product_list li a .txt_wrap p.wages,#contents .sec01 ul.product_list li a .txt_wrap p.price{color:var(--gbk-brown) !important;}
#contents .sec01 ul.product_list li a .img_wrap .ico_wrap span.N{background:var(--gbk-gold) !important; color:var(--gbk-ink) !important; box-shadow:none !important;}
#contents .sec01 a.plus_btn{margin:20px 0 0 !important; width:auto !important; display:inline-block !important; padding:10px 22px !important; border:1px solid var(--gbk-line) !important; border-radius:999px !important; color:var(--gbk-ink-2) !important; background:#fff !important; font-size:13.5px !important; letter-spacing:0 !important;}
#contents .sec01 a.plus_btn:hover{border-color:var(--gbk-brown) !important; color:var(--gbk-brown) !important; background:#fff !important; box-shadow:none !important;}
#contents .sec01 .in_Layer{width:auto !important;}

/* 제조 현장 띠 */
.gbk-make{margin-top:64px; background:#f3efea; border-top:1px solid var(--gbk-line); border-bottom:1px solid var(--gbk-line);}
.gbk-make-in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:end; padding-top:44px; padding-bottom:44px;}
.gbk-make-tx p{margin:14px 0 22px; max-width:34ch; color:var(--gbk-muted); font-size:15px; line-height:1.7; text-wrap:pretty;}
.gbk-make figure{margin:0;}
.gbk-make figure img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px;}
.gbk-make figcaption{margin-top:8px; font-size:13px; font-weight:600; color:var(--gbk-muted);}
.gbk-btn{display:inline-block; padding:12px 22px; border-radius:999px; background:var(--gbk-brown); color:#fff !important; font-weight:700; font-size:14px; transition:background .2s cubic-bezier(.25,1,.5,1);}
.gbk-btn:hover{background:var(--gbk-ink);}
.gbk-btn:focus-visible{outline:2px solid var(--gbk-gold); outline-offset:3px;}
#contents .sec02{margin-top:48px;}

@media (max-width:1100px){
	.gbk-hero-in{grid-template-columns:1fr; gap:28px;}
	.gbk-hero-photo{min-height:220px;}
	.gbk-make-in{grid-template-columns:1fr 1fr;}
	.gbk-make-tx{grid-column:1 / -1;}
}
@media (max-width:600px){
	.gbk-wrap{padding:0 16px;}
	.gbk-hero-in{padding-top:28px; padding-bottom:28px;}
	.gbk-board-hd h2{font-size:24px;}
	.gbk-px{font-size:22px;}
	.gbk-h2{font-size:22px;}
	.gbk-sec{padding-top:40px;}
}

/* ============================================================
   매장관리(마이페이지) 탭 · 페이지 제목
   ============================================================ */
#contents .sub_contents .my_tabs ul li{border-color:var(--gbk-ink-2) !important;}
#contents .sub_contents .my_tabs ul li a{color:var(--gbk-ink-2) !important;}
#contents .sub_contents .my_tabs ul li a.on{background:var(--gbk-ink) !important; color:#fff !important;}
.my_main_tabs a.on,.my_main_tabs li.on > a{background:var(--gbk-ink) !important; border-color:var(--gbk-ink) !important; color:#fff !important;}
#contents p.sec_tit{font-family:'KBIZHanmaumMyungjo','Noto Serif KR',serif !important; font-weight:700 !important; color:var(--gbk-ink) !important;}
#contents p.sec_tit::before{background:var(--gbk-gold) !important;}
/* 금지갑(온라인 금거래) 제거 — 남아 있는 안쪽 링크도 감춘다(주소는 서버에서 홈으로 돌린다) */
a[href*="/gold/wallet.php"],a[href*="/gold/buy.php"],a[href*="/gold/sell.php"]{display:none !important;}

/* ============================================================
   ③ 꼬리말 — 밝은 바탕 + 갈색 글자
   ============================================================ */
#footer{background:#f3efea !important; color:var(--gbk-muted) !important; border-top:1px solid var(--gbk-line); margin-top:72px !important;}
#footer .footer_top{background:transparent !important; border-bottom:1px solid var(--gbk-line) !important;}
#footer .footer_top ul li a,#footer .footer_bottom ul li a{color:var(--gbk-ink-2) !important;}
#footer .footer_top ul li a:hover,#footer .footer_bottom ul li a:hover{color:var(--gbk-brown) !important;}
#footer .footer_sec p.f_p01{color:var(--gbk-ink) !important; font-family:'Pretendard',sans-serif !important; font-weight:700 !important; letter-spacing:0 !important;}
#footer .footer_sec p.f_call,#footer .footer_sec p.f_p03{color:var(--gbk-ink) !important; font-family:'Pretendard',sans-serif !important;}
#footer .footer_sec p.f_p02{color:var(--gbk-muted) !important;}
#footer .footer_bottom{background:transparent !important; border-top:1px solid var(--gbk-line) !important;}
#footer .footer_bottom p.copy{color:var(--gbk-muted) !important;}

@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* ============================================================
   판 2 보정 — 옛 main.css·vela-theme 의 고정 폭·여백을 끊는다 (2026-10-12 첫 렌더에서 확인)
   ============================================================ */
#header .bot ul.category > li{width:auto !important; float:none !important; height:auto !important; margin:0 !important; padding:0 !important;}
#header .bot ul.category > li > a{width:auto !important; white-space:nowrap !important; overflow:visible !important; text-align:left !important;}
#header .mid .right_search,#header .top ul.utill_menu,#header .mid a.vg-home-logo,#header .bot ul.category{align-self:center !important; margin-top:0 !important; margin-bottom:0 !important; top:auto !important;}
#header .mid .right_search .cont{margin:0 !important;}
#vgKakaoChat{display:none !important;}   /* 골드킵 카카오채널 — GBK 채널이 생기면 마크업과 함께 되살린다 */
.gbk-make figure img,.gbk-hero-photo img{height:auto;}
.gbk-make figure img{height:auto !important; aspect-ratio:3/2 !important;}
.gbk-make-in{align-items:center !important;}
#contents .gbk-sec{padding:56px 0 8px !important; max-width:none !important; margin:0 !important;}
#contents .gbk-sec .gbk-wrap{max-width:1280px !important; padding:0 28px !important;}
#header .top ul.utill_menu li a{white-space:nowrap !important;}
.gbk-hero-photo img{height:100% !important;}
.gbk-make-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr) !important;}
.gbk-make figure img{aspect-ratio:21/9 !important;}
#contents .sec01 ul.product_list:empty + a.plus_btn{display:none !important;}
@media (max-width:1100px){.gbk-make-in{grid-template-columns:1fr !important;}}
html body li:has(> a[href*="/gold/wallet.php"]),html body a[href*="/gold/wallet.php"]{display:none !important;}