@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Noto+Serif+KR:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ============================================================
   VELA GOLD — 골드킵(velagold.net) 톤앤매너 테마 오버라이드
   intro.php(다크+골드 럭셔리)와 통일. style.css/main.css 이후 로드되어 우선 적용.
   확정된 실제 마크업 클래스(_inc/html_header.php·html_footer.php·index.php)만 타깃.
   ============================================================ */
:root{
	--vg-gold:#c6a15b; --vg-gold-2:#d8bd86; --vg-gold-deep:#9c7c3c;
	--vg-ink:#15110b; --vg-ink-2:#1c160d; --vg-ink-3:#241a10;
	--vg-paper:#faf7f1; --vg-paper-2:#f4eee3;
	--vg-line:rgba(198,161,91,.30); --vg-text:#2c241a; --vg-muted:#8a7c63;
}

/* ---------- 글로벌 ---------- */
body{
	background:var(--vg-paper) !important;
	font-family:'Pretendard','Noto Serif KR',-apple-system,'Malgun Gothic',sans-serif !important;
	color:var(--vg-text);
	-webkit-font-smoothing:antialiased;
}
#wrap{background:var(--vg-paper);}
a{transition:color .15s ease;}
::selection{background:rgba(198,161,91,.25);}
.vg-serif,.sec_tit{font-family:'Cormorant Garamond','Noto Serif KR',serif;}

/* ============================================================
   HEADER  (#header .top / .mid / .bot)
   ============================================================ */
#header{background:#fff; box-shadow:0 1px 0 var(--vg-line);}

/* 상단 유틸리티 바 — 다크 차콜 + 골드 */
#header .top{
	background:linear-gradient(90deg,#16110a 0%,#1f1810 55%,#16110a 100%) !important;
	border-bottom:1px solid rgba(198,161,91,.18);
}
#header .top .in_Layer{display:flex; align-items:center; justify-content:space-between; height:40px;}
#header .top a.bookmark{color:#b59b6c !important; font-weight:500; font-size:12px; letter-spacing:.04em; display:inline-flex; align-items:center; gap:6px;}
#header .top a.bookmark img{filter:brightness(0) saturate(100%) invert(72%) sepia(18%) saturate(720%) hue-rotate(2deg) brightness(92%); opacity:.85;}
#header .top ul.utill_menu{display:flex; gap:0; float:none !important;}
#header .top ul.utill_menu li{padding:0 14px; position:relative;}
#header .top ul.utill_menu li + li::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:11px; background:rgba(198,161,91,.25);}
#header .top ul.utill_menu li a{color:#cdb586 !important; font-size:12px; letter-spacing:.06em; font-weight:500;}
#header .top ul.utill_menu li a:hover{color:var(--vg-gold-2) !important;}
#header .top ul.utill_menu li a span{background:var(--vg-gold) !important; color:#1a1206 !important; font-weight:700;}
/* MY PAGE 강조: 어두운 상단바에서 단 하나의 골드 pill로 식별성 강화 */
#header .top ul.utill_menu li.mypage-li{padding:0 0 0 14px;}
#header .top ul.utill_menu li.mypage-li::before{display:none !important;}
#header .top ul.utill_menu li.mypage-li a{display:inline-block; background:linear-gradient(180deg,#d8bd86,#c6a15b); color:#1a1206 !important; font-weight:800 !important; letter-spacing:.04em; padding:5px 14px; border-radius:14px; box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 2px 6px rgba(0,0,0,.28); transition:filter .15s, transform .15s;}
#header .top ul.utill_menu li.mypage-li a:hover{color:#1a1206 !important; filter:brightness(1.07); transform:translateY(-1px);}

/* 중단 — 로고/대표전화/검색 */
#header .mid{background:#fff !important; border-bottom:1px solid var(--vg-paper-2);}
#header .mid .in_Layer{display:flex; align-items:center; justify-content:space-between; min-height:96px; position:relative;}
#header .mid .call{position:static !important; width:auto !important;}
#header .mid .call p{font-family:'Cormorant Garamond','Noto Serif KR',serif; font-size:20px; color:#3a2f1d !important; letter-spacing:.01em;}
#header .mid .call p span{font-weight:700; color:var(--vg-gold-deep) !important;}
/* 가운데 브랜드 워드마크(로고 이미지가 비활성이라 텍스트로 보강) */
#header .mid .in_Layer::after{
	content:"VELA GOLD"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
	font-family:'Cormorant Garamond',serif; font-weight:600; font-size:30px; letter-spacing:.18em;
	background:linear-gradient(180deg,#d8bd86 0,#a9863f 100%);
	-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
	color:#b08c43; pointer-events:none; white-space:nowrap;
}
#header .mid .right_search{position:static !important; transform:none !important;}
#header .mid .right_search .cont{
	height:42px !important; width:240px !important; border:1.5px solid var(--vg-line) !important;
	border-radius:999px !important; background:var(--vg-paper); display:flex; align-items:center;
	padding:0 6px 0 16px !important; transition:.2s;
}
#header .mid .right_search .cont:focus-within{border-color:var(--vg-gold) !important; box-shadow:0 0 0 4px rgba(198,161,91,.12);}
#header .mid .right_search .input_box{background:transparent !important; font-size:14px !important; color:#3a2f1d !important;}
#header .mid .right_search .search{
	background:var(--vg-gold) !important; width:30px !important; height:30px !important; border-radius:50% !important;
	-webkit-mask:url('/images/ico/search_btn.png') no-repeat center / 16px; mask:url('/images/ico/search_btn.png') no-repeat center / 16px;
}

/* 하단 — 카테고리 내비 */
#header .bot{background:#fff !important; border-top:1px solid var(--vg-paper-2); border-bottom:1px solid var(--vg-line);}
#header .bot .category_area{width:auto; max-width:1200px; margin:0 auto;}
#header .bot ul.category{display:flex; justify-content:center; flex-wrap:wrap;}
#header .bot ul.category > li{position:relative;}
#header .bot ul.category > li > a{
	display:block; padding:0 22px; line-height:54px; font-size:15.5px; font-weight:600; color:#33291a !important;
	font-family:'Noto Serif KR',serif; letter-spacing:-.01em; position:relative;
}
#header .bot ul.category > li > a::after{content:""; position:absolute; left:22px; right:22px; bottom:12px; height:2px; background:var(--vg-gold); transform:scaleX(0); transform-origin:center; transition:.22s;}
#header .bot ul.category > li:hover > a{color:var(--vg-gold-deep) !important;}
#header .bot ul.category > li:hover > a::after{transform:scaleX(1);}
/* 드롭다운(.depth) — 마크업이 .bot이라 main.css의 호버규칙이 안 걸려 직접 부여 */
#header .bot ul.category > li:hover .depth{display:block !important;}
#header .depth{background:#fff !important; border:1px solid var(--vg-line) !important; border-top:2px solid var(--vg-gold) !important; box-shadow:0 14px 30px -12px rgba(60,42,10,.28) !important; padding:6px 0 !important; min-width:160px;}
#header .depth > li > a{border-bottom:1px solid #f1ead9 !important; color:#5a4d36 !important; padding:12px 18px !important; font-size:13.5px !important; text-align:center; background:#fff !important;}
#header .depth > li:last-child > a{border-bottom:none !important;}
#header .depth > li > a:hover{color:var(--vg-gold-deep) !important; background:var(--vg-paper) !important;}

/* ============================================================
   HOMEPAGE  (#visual / .sec_tit / .product_list / .plus_btn)
   ============================================================ */
#visual .main_visual{box-shadow:inset 0 -1px 0 var(--vg-line);}
#contents{background:var(--vg-paper);}

/* 섹션 타이틀 — 럭셔리 세리프 + 장식 라인 */
#contents p.sec_tit{
	font-family:'Cormorant Garamond','Noto Serif KR',serif !important;
	font-size:34px !important; font-weight:600 !important; color:#2a2114 !important;
	text-align:center !important; padding:64px 0 8px !important; letter-spacing:.01em; position:relative;
}
#contents p.sec_tit::before{content:""; display:block; width:40px; height:2px; margin:0 auto 18px; background:linear-gradient(90deg,transparent,var(--vg-gold),transparent);}
#contents .sec01{max-width:1200px; margin:0 auto; padding:0 16px;}

/* 상품 그리드 — float → flex로 견고화(4-up) */
#contents .sec01 ul.product_list{display:flex !important; flex-wrap:wrap; gap:22px; width:100% !important; padding:24px 0 6px; justify-content:flex-start;}
#contents .sec01 ul.product_list:after{display:none !important;}
#contents .sec01 ul.product_list li{
	width:calc(25% - 16.5px) !important; height:auto !important; float:none !important; margin:0 !important;
	border:1px solid var(--vg-line) !important; border-radius:14px; overflow:hidden; background:#fff;
	box-shadow:0 6px 20px -16px rgba(60,42,10,.4); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#contents .sec01 ul.product_list li:hover{transform:translateY(-5px); border-color:var(--vg-gold) !important; box-shadow:0 18px 34px -18px rgba(120,90,30,.55) !important;}
#contents .sec01 ul.product_list li a{display:block;}
#contents .sec01 ul.product_list li a .img_wrap{width:100% !important; height:auto !important; aspect-ratio:283/327; background:var(--vg-paper-2); overflow:hidden;}
#contents .sec01 ul.product_list li a .img_wrap img{width:100% !important; height:100% !important; object-fit:cover; display:block; transition:transform .5s ease;}
#contents .sec01 ul.product_list li:hover a .img_wrap img{transform:scale(1.05);}
#contents .sec01 ul.product_list li a .img_wrap .ico_wrap{padding:12px !important; width:auto !important; height:auto !important;}
#contents .sec01 ul.product_list li a .img_wrap .ico_wrap span{border-radius:999px !important; letter-spacing:.02em; box-shadow:0 2px 6px rgba(0,0,0,.18);}
#contents .sec01 ul.product_list li a .img_wrap .ico_wrap span.N{background:var(--vg-gold) !important; color:#1a1206 !important;}
#contents .sec01 ul.product_list li a .txt_wrap{padding:16px 18px 20px !important; border-top:1px solid #f1ead9 !important; text-align:center;}
#contents .sec01 ul.product_list li a .txt_wrap p.name{font-family:'Noto Serif KR',serif !important; font-size:15.5px !important; font-weight:500 !important; color:#2a2114 !important; line-height:1.45; min-height:2.9em; display:flex; align-items:center; justify-content:center;}
#contents .sec01 ul.product_list li a .txt_wrap p.weight{font-size:13px !important; color:var(--vg-muted) !important; padding-top:6px !important; letter-spacing:.01em;}
#contents .sec01 ul.product_list li a .txt_wrap p.wages{font-size:15px !important; font-weight:700 !important; color:var(--vg-gold-deep) !important; padding-top:4px !important;}
#contents .sec01 ul.product_list li a .txt_wrap p.price{color:var(--vg-gold-deep) !important;}

/* 더보기 버튼 — 골드 아웃라인 필 */
#contents .sec01 a.plus_btn{
	display:block; width:200px !important; height:auto !important; margin:26px auto 8px !important; padding:14px 0 !important;
	border:1px solid var(--vg-gold) !important; border-radius:999px !important; color:var(--vg-gold-deep) !important;
	font-size:14px !important; font-weight:600; letter-spacing:.06em; background:#fff; transition:.2s;
}
#contents .sec01 a.plus_btn:hover{background:linear-gradient(135deg,#e3c780,#c6a15b) !important; border-color:var(--vg-gold) !important; color:#241803 !important; box-shadow:0 10px 22px -10px rgba(168,134,63,.6);}

/* 배너/인스타 섹션 정렬 */
#contents .sec02,#contents .sec03,#contents .sec04{max-width:1200px; margin-left:auto; margin-right:auto; padding:0 16px;}
#contents .sec02{margin-top:54px;}
#contents .sec03 .banner_wrap .banner{border-radius:14px; overflow:hidden;}

/* ============================================================
   FOOTER  (#footer)
   ============================================================ */
#footer{background:linear-gradient(180deg,#1b150d 0%,#100c07 100%) !important; color:#cabfa9 !important; margin-top:70px;}
#footer .footer_top{border-bottom:1px solid rgba(198,161,91,.18) !important; background:transparent !important;}
#footer .footer_top .in_Layer{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
#footer .footer_top ul li a{color:#b6a988 !important; font-size:13px; letter-spacing:.02em;}
#footer .footer_top ul li a:hover{color:var(--vg-gold-2) !important;}
#footer .footer_sec p.f_p01{color:var(--vg-gold-2) !important; font-family:'Cormorant Garamond','Noto Serif KR',serif; letter-spacing:.04em;}
#footer .footer_sec p.f_call{color:var(--vg-gold) !important; font-family:'Cormorant Garamond',serif !important;}
#footer .footer_sec p.f_p02{color:#a99c82 !important;}
#footer .footer_sec p.f_p03{color:#e7d7b3 !important;}
#footer .footer_bottom{background:rgba(0,0,0,.25) !important; border-top:1px solid rgba(198,161,91,.12);}
#footer .footer_bottom ul li a{color:#b6a988 !important;}
#footer .footer_bottom p.copy{color:#7d7159 !important;}

/* ============================================================
   반응형 — 모바일에서도 자연스럽게
   ============================================================ */
@media (max-width:1100px){
	#contents .sec01 ul.product_list li{width:calc(33.333% - 15px) !important;}
}
@media (max-width:900px){
	#header .top .in_Layer{height:auto; flex-wrap:wrap; gap:2px 0; padding:6px 12px;}
	#header .top a.bookmark{display:none;}
	#header .top ul.utill_menu{width:100%; justify-content:center;}
	#header .mid .in_Layer{flex-direction:column; gap:12px; min-height:0; padding:16px 12px;}
	#header .mid .in_Layer::after{position:static; transform:none; order:-1; font-size:26px;}
	#header .mid .call{text-align:center;}
	#header .mid .right_search .cont{width:min(92vw,320px) !important;}
	#header .bot{overflow-x:auto; -webkit-overflow-scrolling:touch;}
	#header .bot ul.category{flex-wrap:nowrap; justify-content:flex-start; width:max-content;}
	#header .bot ul.category > li > a{padding:0 16px; line-height:48px; font-size:14.5px;}
	/* 모바일은 드롭다운 호버 비활성(스크롤 메뉴) */
	#header .bot ul.category > li:hover .depth{display:none !important;}
	#contents p.sec_tit{font-size:27px !important; padding:44px 0 6px !important;}
	#contents .sec01 ul.product_list{gap:14px;}
	#contents .sec01 ul.product_list li{width:calc(50% - 7px) !important;}
	#contents .sec01 ul.product_list li a .txt_wrap{padding:12px 12px 16px !important;}
	#contents .sec01 ul.product_list li a .txt_wrap p.name{font-size:14px !important; min-height:2.7em;}
	#contents .sec03 .banner_wrap .banner{width:100% !important; height:auto !important; margin:0 0 14px !important; float:none !important;}
	#footer .footer_top .in_Layer,#footer{text-align:center;}
	#footer .footer_top ul{display:inline-flex; flex-wrap:wrap; justify-content:center; gap:4px 0;}
}
@media (max-width:600px){
	#header .mid .in_Layer::after{font-size:23px;}
	#header .top ul.utill_menu li{padding:0 9px;}
	#header .top ul.utill_menu li a{font-size:11px;}
	#contents p.sec_tit{font-size:23px !important;}
	#contents .sec01 ul.product_list li a .txt_wrap p.wages{font-size:14px !important;}
	#contents .sec01 a.plus_btn{width:170px !important;}
}

/* ===== 상품상세 BUY NOW 버튼 정렬 안정화 (float→flex) 20260602 ===== */
#contents .sub_contents .goods_view .right_info .info_bot .goods_btn{display:flex !important;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none}
#contents .sub_contents .goods_view .right_info .info_bot .goods_btn:after{display:none !important}
#contents .sub_contents .goods_view .right_info .info_bot .goods_btn li{float:none !important;width:auto !important;flex:1 1 0;margin:0 !important;min-width:90px}
#contents .sub_contents .goods_view .right_info .info_bot .goods_btn li a{display:flex;align-items:center;justify-content:center;text-align:center}
#contents .sub_contents .goods_view .right_info .info_bot.m_info_bot1 .goods_btn li{flex:1 1 100%}

/* ============================================================
   스크롤 연동 헤더 고정 + 점진 축소 (scroll-linked shrink) 20260617
   - 검은 유틸바(.top) 유지
   - --vg-sh(0=펼침 → 1=완전축소)를 JS가 스크롤량에 비례해 갱신(아래 html_header.php)
   - 흰 중간행/로고/검색은 비례 축소, 카테고리 내비(.bot)는 비례해 접혀 사라짐
   - 떨림 방지: overflow-anchor:none(높이변동 시 scrollY 자동보정 차단)
   ============================================================ */
:root{--vg-sh:0;}
/* #wrap이 레거시 height:100%로 잡혀 sticky 컨테이닝블록이 짧아지는 문제 해제 */
#wrap{height:auto !important; min-height:100vh;}
html{overflow-anchor:none;}
/* sticky 대상은 #header를 감싼 시맨틱 <header>(부모가 #wrap이라 전체 높이 확보) */
/* 전 페이지 non-sticky: 헤더가 스크롤 시 자연스럽게 사라짐(콘텐츠 잘림·빈공간 없음). 축소 JS도 비활성(html_header.php) */
#wrap > header{position:static; background:#fff;}
/* 자체 고정바(.gt-top/.wl-top)를 가진 서브페이지(금거래 등)에선 메인헤더 sticky 해제 → 이중 고정바 충돌 방지.
   주의: [style*="sticky"]는 헤더 내 이미지검색 모달(상시 DOM)까지 매칭해 전 페이지 고정이 깨지므로 사용 금지. */
#wrap:has(.gt-top) > header, #wrap:has(.wl-top) > header{position:static !important;}
/* 메인페이지(.gm-rate-wrap 히어로): 헤더 sticky 해제 → 스크롤 시 자연스럽게 사라져 시세카드 잘림·빈공간 없음. JS 축소도 메인에선 비활성(html_header.php) */
#wrap:has(.gm-rate-wrap) > header{position:static !important;}
@media (min-width:901px){
	/* 스크롤 양에 비례(--vg-sh: 0→1)해 점진 축소. p=0이면 기존 펼침과 동일 */
	#header .mid{height:calc(120px - 56px * var(--vg-sh));}                                  /* 120 → 64 */
	#header .mid .in_Layer{height:calc(119px - 55px * var(--vg-sh)); min-height:0;}           /* 119 → 64 */
	#header .mid .in_Layer::after{font-size:calc(30px - 8px * var(--vg-sh));}                 /* 로고 30 → 22 */
	#header .mid .right_search .cont{height:calc(42px - 6px * var(--vg-sh)) !important;}      /* 검색 42 → 36 */
	/* 카테고리 내비: 스크롤량에 비례해 접히며 사라짐(고정 안 함) */
	#header .bot{max-height:calc(64px * (1 - var(--vg-sh))); opacity:calc(1 - var(--vg-sh));}
	body.vg-shrinking #header .bot{overflow:hidden; pointer-events:none;}                     /* 접히는 동안만 클립(평소 드롭다운 정상) */
}
@media (max-width:900px){ #wrap > header{position:static;} }  /* 좁은 폭(스택형 헤더)에선 고정 해제 */

/* ============================================================
   안내(About) 페이지 공통 디자인 — 회사소개/오시는길/골드킵/도매안내
   ============================================================ */
.vg-about{background:var(--vg-paper);}
.vga-inner{max-width:1080px; margin:0 auto; padding:0 20px;}
.vga-hero{background:linear-gradient(180deg,#1b150d 0%,#100c07 100%); color:#f3ead7; text-align:center; padding:74px 20px 60px; border-bottom:1px solid rgba(198,161,91,.25);}
.vga-hero .vga-eyebrow{font-family:'Cormorant Garamond',serif; letter-spacing:.34em; font-size:13px; color:var(--vg-gold); margin-bottom:14px;}
.vga-hero h1.vga-title{font-family:'Cormorant Garamond','Noto Serif KR',serif; font-size:40px; font-weight:600; letter-spacing:.01em; line-height:1.25; margin:0; color:#f6efe0;}
.vga-hero .vga-sub{margin:16px auto 0; max-width:680px; color:#c8b692; font-size:15px; line-height:1.7;}
.vga-hero .vga-sub strong{color:var(--vg-gold-2);}
.vga-nav{background:#15100a; border-bottom:1px solid rgba(198,161,91,.14); position:sticky; top:0; z-index:30;}
.vga-nav .vga-inner{display:flex; flex-wrap:wrap; justify-content:center; gap:0; padding:0;}
.vga-nav a{display:inline-block; padding:15px 26px; color:#a99c82; font-size:14px; font-weight:500; letter-spacing:.01em; position:relative; text-decoration:none;}
.vga-nav a:hover{color:var(--vg-gold-2);}
.vga-nav a.on{color:var(--vg-gold-2);}
.vga-nav a.on::after{content:""; position:absolute; left:18px; right:18px; bottom:-1px; height:2px; background:var(--vg-gold);}
.vga-body{padding:60px 0 80px;}
.vga-lead{font-family:'Noto Serif KR',serif; font-size:20px; line-height:1.7; color:#2e2516; text-align:center; max-width:780px; margin:0 auto;}
.vga-lead strong{color:var(--vg-gold-deep);}
.vga-sec{margin-top:56px;}
.vga-sec > h2{font-family:'Cormorant Garamond','Noto Serif KR',serif; font-size:26px; font-weight:600; color:#2a2114; text-align:center; margin:0;}
.vga-sec > h2::after{content:""; display:block; width:34px; height:2px; background:linear-gradient(90deg,transparent,var(--vg-gold),transparent); margin:14px auto 22px;}
.vga-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.vga-card{background:#fff; border:1px solid var(--vg-paper-2); border-radius:14px; padding:30px 22px; text-align:center; transition:.2s; box-shadow:0 1px 2px rgba(60,42,10,.04);}
.vga-card:hover{border-color:var(--vg-line); box-shadow:0 16px 32px -18px rgba(60,42,10,.28); transform:translateY(-3px);}
.vga-card .ic{width:52px; height:52px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(180deg,#fbf6ec,#f1e6cf); border:1px solid var(--vg-line);}
.vga-card .ic svg{width:24px; height:24px; stroke:var(--vg-gold-deep); fill:none; stroke-width:1.6;}
.vga-card h3{font-size:16px; font-weight:700; color:#2c241a; margin-bottom:8px;}
.vga-card p{font-size:13.5px; line-height:1.65; color:#6a5f4c;}
.vga-cta{margin-top:64px; text-align:center; background:linear-gradient(180deg,#1b150d 0%,#120d07 100%); color:#f3ead7; border-radius:18px; padding:50px 24px;}
.vga-cta h2{font-family:'Cormorant Garamond','Noto Serif KR',serif; font-size:27px; color:#f6efe0; margin-bottom:10px;}
.vga-cta p{color:#c8b692; font-size:14.5px; line-height:1.7; margin-bottom:24px;}
.vga-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.vga-btn{display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:30px; font-weight:700; font-size:15px; text-decoration:none; transition:.18s;}
.vga-btn.gold{background:linear-gradient(180deg,#d8bd86,#c6a15b); color:#1a1206 !important; box-shadow:0 2px 8px rgba(0,0,0,.25);}
.vga-btn.gold:hover{filter:brightness(1.06); transform:translateY(-1px);}
.vga-btn.ghost{border:1px solid rgba(198,161,91,.5); color:#e7d7b3 !important;}
.vga-btn.ghost:hover{background:rgba(198,161,91,.12);}
.vga-info{max-width:680px; margin:0 auto; background:#fff; border:1px solid var(--vg-paper-2); border-radius:14px; padding:6px 30px;}
.vga-info li{display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--vg-paper-2); align-items:flex-start; list-style:none;}
.vga-info li:last-child{border-bottom:none;}
.vga-info li .k{flex:0 0 84px; color:var(--vg-gold-deep); font-weight:700; font-size:14px;}
.vga-info li .v{flex:1; color:#3a2f1d; font-size:14.5px; line-height:1.6;}
.vga-info li .v a{color:var(--vg-gold-deep); font-weight:600;}
.vga-greet{max-width:780px; margin:0 auto;}
.vga-greet h2{font-family:'Cormorant Garamond','Noto Serif KR',serif; font-size:24px; color:#2a2114; text-align:center; margin-bottom:26px;}
.vga-greet p{font-size:15.5px; line-height:1.95; color:#3a3120; margin-bottom:18px;}
.vga-greet p strong{color:var(--vg-gold-deep);}
.vga-greet .sign{text-align:right; font-family:'Cormorant Garamond','Noto Serif KR',serif; color:var(--vg-gold-deep); font-size:16px; margin-top:28px;}
@media (max-width:880px){
	.vga-hero h1.vga-title{font-size:30px;}
	.vga-grid{grid-template-columns:1fr 1fr; gap:12px;}
	.vga-nav a{padding:13px 15px; font-size:13px;}
	.vga-lead{font-size:18px;}
}
@media (max-width:560px){ .vga-grid{grid-template-columns:1fr;} .vga-info li{flex-direction:column; gap:4px;} .vga-info li .k{flex:none;} }

/* ===== 모바일: 폰에서 데스크톱 마이페이지 노출 시 헤더/탭 가독성 (2026-07-02) ===== */
@media (max-width:768px){
	/* 마이페이지 상단 메인 탭(매장관리·주문/수리접수·접수현황·고금기록·통상기록·거래명세표·금지갑·회원정보수정)
	   — 폭 초과 시 잘리지 않고 가로 스크롤 */
	.my_main_tabs > ul{flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
	.my_main_tabs > ul::-webkit-scrollbar{display:none;}
	.my_main_tabs li{flex:0 0 auto;}
	.my_main_tabs a{white-space:nowrap;}
	/* 카테고리 바(.bot 는 이미 overflow-x:auto) — 중앙정렬/최대폭 제약 해제로 끝까지 스크롤되게 */
	#header .bot .category_area{max-width:none; margin:0;}
}