@charset "utf-8";
/*==============================================================
  두더지닷컴 디자인 시스템 (Design System)
  2026-08-23

  이 파일은 가장 마지막에 로드되어 사이트 전체의 톤을 통일한다.
  기존 스타일시트의 레이아웃 구조는 유지하고, 색/타이포/여백/
  테두리/그림자 등 "보이는 톤"과 광고 배치만 재정의한다.

  브랜드 기준색은 로고(logo_doothegee2.png)의 스카이블루 #20A0F0.
==============================================================*/

/*--------------------------------------------------------------
  1. 디자인 토큰
--------------------------------------------------------------*/
:root {
	/* 브랜드 - 로고 스카이블루 기반 */
	--brand-50:  #EBF7FE;
	--brand-100: #D3EDFD;
	--brand-200: #A9DBFB;
	--brand-300: #6FC4F7;
	--brand-400: #38ADF3;
	--brand-500: #1BA0F0;	/* 로고 기준색 */
	--brand-600: #0A87D6;	/* hover / 강조 면 */
	--brand-700: #076FB0;	/* 흰 배경 위 본문 링크 (대비 확보) */
	--brand-800: #075A8E;

	/* 중립 */
	--ink-900: #0F172A;
	--ink-800: #1E293B;
	--ink-700: #334155;
	--ink-600: #475569;
	--ink-500: #64748B;
	--ink-400: #94A3B8;
	--ink-300: #CBD5E1;
	--ink-200: #E2E8F0;
	--ink-100: #F1F5F9;
	--ink-50:  #F8FAFC;
	--white:   #FFFFFF;

	/* 의미색 */
	--accent-hot:  #F0453A;	/* 인기/특가 */
	--accent-new:  #16A34A;	/* 신규 */
	--accent-warn: #D97706;

	/* 표면 */
	--bg-page:    #F4F6F9;
	--bg-surface: #FFFFFF;
	--bg-sunken:  #EEF2F6;
	--border:     #E3E8EF;
	--border-strong: #CFD8E3;

	/* 타이포 */
	--font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
	             "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
	             system-ui, "Noto Sans KR", sans-serif;

	--fs-xs:  12px;
	--fs-sm:  13px;
	--fs-base:15px;
	--fs-md:  16px;
	--fs-lg:  18px;
	--fs-xl:  21px;
	--fs-2xl: 26px;

	--lh-tight: 1.35;
	--lh-base:  1.65;

	/* 여백 (4px 배수) */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-10: 40px;
	--sp-12: 48px;

	/* 모서리 - 3단계로 통일 */
	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 16px;
	--r-full: 999px;

	/* 그림자 - 3단계로 통일 */
	--sh-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
	--sh-2: 0 2px 6px rgba(15, 23, 42, .07), 0 6px 16px rgba(15, 23, 42, .06);
	--sh-3: 0 8px 24px rgba(15, 23, 42, .12);

	--ring: 0 0 0 3px var(--brand-200);
	--dur: .18s;
	--ease: cubic-bezier(.4, 0, .2, 1);

	--layout-max: 1200px;

	/* 레이어(z-index) 체계 - 값을 흩뿌리지 않고 여기서만 관리한다.
	   .headerBox 는 모바일 서랍메뉴를 품고 있으므로 반드시 .gnb-mas 보다 위여야 한다. */
	--z-topbtn:    80;
	--z-fixed-ad:  90;
	--z-header:   100;	/* #headCont (헤더 전체 스택 컨텍스트) */
	--z-gnb:       10;	/* #headCont 내부 */
	--z-gnb-fixed: 20;	/* #headCont 내부 */
	--z-headerbox: 30;	/* #headCont 내부 - 서랍메뉴를 담고 있어 gnb 보다 위 */
	--z-drawer-bg: 40;	/* .headerBox 내부 */
	--z-drawer:    50;	/* .headerBox 내부 */
}

/*--------------------------------------------------------------
  2. 기본 타이포 / 페이지 바탕
--------------------------------------------------------------*/
html { -webkit-text-size-adjust: 100%; }

body {
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--ink-800);
	background: var(--bg-page);
	letter-spacing: -.01em;
	word-break: keep-all;
	overflow-wrap: anywhere;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand-700); }

h1, h2, h3, h4 {
	line-height: var(--lh-tight);
	letter-spacing: -.02em;
	color: var(--ink-900);
	font-weight: 700;
}

img { max-width: 100%; }

/* 키보드 사용자 포커스 표시 (기존 outline:none 관행 보정) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
label:focus-visible {
	outline: 2px solid var(--brand-600);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

::selection { background: var(--brand-100); color: var(--ink-900); }

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

/*--------------------------------------------------------------
  3. 레이아웃 컨테이너
--------------------------------------------------------------*/
.width_fixed { max-width: var(--layout-max); }

.containerWrapper {
	max-width: var(--layout-max);
	margin: 0 auto;
	padding: var(--sp-6) var(--sp-4) var(--sp-10);
	box-sizing: border-box;
}

.lay-fixed {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	padding: var(--sp-6);
	box-sizing: border-box;
}

/* 섹션 제목 - 좌측 브랜드 바 */
.tit-tmn {
	position: relative;
	font-size: var(--fs-xl);
	font-weight: 700;
	color: var(--ink-900);
	padding: 0 0 var(--sp-4) var(--sp-3);
	margin: 0 0 var(--sp-4);
	border-bottom: 1px solid var(--border);
}
.tit-tmn::before {
	content: "";
	position: absolute;
	left: 0; top: 4px;
	width: 4px; height: 20px;
	border-radius: var(--r-full);
	background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
}

/*--------------------------------------------------------------
  4. 헤더 / 네비게이션  (2차 개편)

  기존 헤더는 2.4MB 배경사진 + 40% 검정 오버레이 위에 흰 글씨를
  올린 높이 180px대의 히어로였다. 커뮤니티 이용자는 목록을 보러
  오므로 첫 화면을 배너가 차지하면 손해다.
  → 사진/오버레이를 걷어내고, 로고·검색·유틸을 한 줄에 담은
     밀도 높은 브랜드 바 + 고정 네비게이션 구조로 바꾼다.
--------------------------------------------------------------*/
header #headCont {
	position: relative;
	z-index: var(--z-header);
	background: var(--bg-surface);
}

.header-mas {
	position: relative;
	height: auto;
	background: var(--bg-surface);
	border-bottom: 1px solid var(--border);
}
/* 배경사진 위에 깔려 있던 검정 오버레이 제거 */
.header-mas::after { content: none; display: none; }

.headerBox {
	position: relative;
	display: block;
	height: auto;
	padding: 0 var(--sp-4);
	/* 모바일 서랍메뉴(.gnb-mnav)와 딤(.mnav_bbg)이 이 안에 있으므로
	   .gnb-mas 보다 위에 있어야 메뉴가 상단 네비를 덮는다 */
	z-index: var(--z-headerbox);
}
.headerBox input[type="checkbox"] { display: none; }

/* ---- 브랜드 바 ---- */
.hd-bar {
	display: flex;
	align-items: center;
	gap: var(--sp-6);
	min-height: 72px;
	padding: var(--sp-3) 0;
}

/* 로고 */
.headerBox .top-logox {
	position: static;
	flex: 0 0 auto;
	margin: 0;
	line-height: 0;
}
.headerBox .top-logox a { display: block; }
.headerBox .top-logox img {
	display: block;
	width: auto;
	height: 36px;
}

/* ---- 검색 ---- */
.headerBox .headinBox {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	max-width: 560px;
}
.headerBox .headinBox fieldset {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}
.headerBox .headinBox .schBox-mas {
	position: relative;
	display: block;
	margin: 0;
	background: var(--bg-sunken);
	border: 1px solid var(--border);
	border-radius: var(--r-full);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.headerBox .headinBox .schBox-mas:focus-within {
	background: var(--bg-surface);
	border-color: var(--brand-400);
	box-shadow: var(--ring);
}
.headerBox .schBox-mas input[type="text"] {
	width: 100%;
	height: 42px;
	padding: 0 46px 0 var(--sp-5);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	color: var(--ink-800);
	background: transparent;
	border: 0;
	border-radius: var(--r-full);
	box-shadow: none;
	outline: none;
	box-sizing: border-box;
}
.headerBox .schBox-mas input[type="text"]:focus {
	border: 0;
	box-shadow: none;
}
.headerBox .schBox-mas input[type="text"]::placeholder {
	color: var(--ink-400);
	font-size: var(--fs-base);
	font-weight: 400;
}
.headerBox .schBox-mas .btn-schmas {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: var(--r-full);
	background: transparent url('../images/icons/search_ico.svg') no-repeat center / 19px 19px;
	cursor: pointer;
	opacity: .55;
	transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.headerBox .schBox-mas .btn-schmas:hover {
	opacity: 1;
	background-color: var(--brand-50);
}

/* 인기 검색어 - 검색창 아래 한 줄 */
.headerBox .headinBox .headinTag {
	display: flex;
	gap: var(--sp-2);
	margin: var(--sp-2) 0 0;
	padding: 0 var(--sp-1);
	overflow: hidden;
	white-space: nowrap;
	text-align: left;
	color: var(--ink-500);
}
.headerBox .headinBox .headinTag a {
	flex: 0 0 auto;
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-500);
	transition: color var(--dur) var(--ease);
}
.headerBox .headinBox .headinTag a::before {
	content: '#';
	margin-right: 1px;
	color: var(--brand-400);
}
.headerBox .headinBox .headinTag a:hover { color: var(--brand-700); }

/* ---- 우측 유틸 (바로가기 + 로그인) ---- */
.hd-util {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	margin-left: auto;
	flex: 0 0 auto;
}

/* 바로가기 아이콘 */
.headerBox .icoxhd {
	width: auto;
	padding: 0;
}
.headerBox .icoxhd ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: var(--sp-1);
	width: auto;
}
.headerBox .icoxhd li {
	width: auto;
	margin: 0;
}
.headerBox .icoxhd li a {
	display: block;
	padding: var(--sp-1) 6px;
	border-radius: var(--r-md);
	text-align: center;
	transition: background var(--dur) var(--ease);
}
.headerBox .icoxhd li a:hover { background: var(--brand-50); }
.headerBox .icoxhd li .icimgBx {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 auto;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	box-shadow: none;
	overflow: hidden;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.headerBox .icoxhd li a:hover .icimgBx {
	border-color: var(--brand-300);
	transform: translateY(-1px);
}
.headerBox .icoxhd li .icimgBx img {
	width: 20px;
	height: 20px;
	border-radius: 4px;
}
.headerBox .icoxhd li .icimgBx:hover img { transform: none; }
.headerBox .icoxhd li a > p {
	padding: 3px 0 0;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink-500);
}
.headerBox .icoxhd li a:hover > p { color: var(--brand-700); }

/* 로그인 / 회원가입 */
.headerBox .infopBox {
	position: static;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex: 0 0 auto;
}
.headerBox .infopBox .login-ifx {
	display: inline-flex;
	align-items: center;
	height: 34px;
	margin: 0;
	padding: 0 var(--sp-4);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ink-600);
	background: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	cursor: pointer;
	white-space: nowrap;
	transition: all var(--dur) var(--ease);
}
.headerBox .infopBox .login-ifx:hover {
	color: var(--brand-700);
	border-color: var(--brand-300);
	background: var(--brand-50);
}
/* 마지막 버튼(회원가입)은 강조 */
.headerBox .infopBox .login-ifx:last-child {
	color: var(--white);
	background: var(--brand-600);
	border-color: var(--brand-600);
}
.headerBox .infopBox .login-ifx:last-child:hover {
	background: var(--brand-700);
	border-color: var(--brand-700);
}
.headerBox .infopBox .txt-logx {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--ink-800);
}
.headerBox .infopBox .txt-logx::after {
	color: var(--ink-500);
	font-size: var(--fs-xs);
}
.headerBox .infopBox .meApp2 {
	margin-right: var(--sp-1);
	opacity: .6;
	border-radius: var(--r-sm);
	transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.headerBox .infopBox .meApp2:hover {
	opacity: 1;
	background-color: var(--brand-50);
}

/* ---- 글로벌 내비게이션 ---- */
/* sticky 는 부모(#headCont) 범위를 벗어나면 풀리므로 fixed 토글 방식을 쓴다.
   전환 시 높이만큼의 spacer 를 넣어 레이아웃이 튀지 않게 한다. */
.gnb-mas {
	position: relative;
	z-index: var(--z-gnb);
	background: var(--bg-surface);
	border-bottom: 1px solid var(--border);
	color: var(--ink-600);
}
.gnb-mas.fixed {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: var(--z-gnb-fixed);
	background: rgba(255, 255, 255, .93);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	box-shadow: var(--sh-2);
	border-bottom-color: transparent;
}
.gnb-spacer { display: block; height: 0; }
.gnb-mas .width_fixed { padding: 0 var(--sp-4); box-sizing: border-box; }

.gnbBox {
	display: flex;
	width: 100%;
	gap: 0;
}
/* 세로 구분선 제거 - 여백과 밑줄로 구분한다 */
.gnbBox li:not(:first-of-type)::before,
.gnbBox li:not(:first-of-type)::after { content: none; display: none; }

.gnbBox li { flex: 0 0 auto; position: relative; text-align: center; }
.gnbBox li a {
	position: relative;
	display: block;
	padding: 14px var(--sp-4);
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--ink-600);
	white-space: nowrap;
	transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.gnbBox li a::after {
	content: '';
	position: absolute;
	left: var(--sp-3);
	right: var(--sp-3);
	bottom: 0;
	height: 3px;
	border-radius: var(--r-full) var(--r-full) 0 0;
	background: var(--brand-500);
	transform: scaleX(0);
	transition: transform var(--dur) var(--ease);
}
.gnbBox li a:hover { color: var(--brand-700); background: var(--brand-50); }
.gnbBox li a:hover::after,
.gnbBox li.on a::after,
.gnbBox li a.on::after { transform: scaleX(1); }
.gnbBox li.on a, .gnbBox li a.on { color: var(--brand-700); }

/* ---- 모바일 햄버거 ---- */
.headerBox .btn-mnav { display: none; }
.headerBox .trine2 {
	/* 내부 span 이 absolute 이므로 부모는 반드시 positioned 여야 한다 */
	position: relative;
	top: auto;
	right: auto;
	width: 24px;
	height: 18px;
}
.headerBox .trine2 > span,
.headerBox .trine2 > span::before,
.headerBox .trine2 > span::after {
	background-color: var(--ink-700);
	height: 2px;
	border-radius: 2px;
}
.orin2 > span::before { top: 7px; }
.orin2 > span::after { top: -7px; }

/* ---- 모바일 슬라이드 메뉴 ---- */
.gnb-mnav {
	z-index: var(--z-drawer);
	background: var(--bg-surface);
	color: var(--ink-700);
	box-shadow: var(--sh-3);
	width: 78%;
	max-width: 320px;
}
.gnb-mnav .mtitpo {
	padding: var(--sp-5) var(--sp-5) var(--sp-4);
	border-bottom: 1px solid var(--border);
}
.gnb-mnav .mtitpo > h2 {
	font-size: var(--fs-lg);
	font-weight: 800;
	color: var(--ink-900);
	letter-spacing: .06em;
}
.mloginWrap { background-color: var(--bg-sunken); }
.mloginWrap .mloginBx { padding: var(--sp-4) var(--sp-5); }
.btnppol {
	width: 100%;
	height: 42px;
	line-height: 42px;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--white);
	background-color: var(--brand-600);
	border: 0;
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease);
}
.btnppol:hover { background-color: var(--brand-700); }
.btnppol.btngapxx {
	margin-top: var(--sp-2);
	color: var(--ink-700);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
}
.btnppol.btngapxx:hover { background-color: var(--brand-50); color: var(--brand-700); }
.mnickpo > span { color: var(--ink-900); font-weight: 700; }
.mnickpo > span::after { color: var(--ink-500); }
.maddinpo > button {
	height: 36px;
	line-height: 36px;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ink-700);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	cursor: pointer;
}
.maddinpo > button:hover { background-color: var(--brand-50); color: var(--brand-700); }

.gnb-mnav ul { margin: 0; padding: var(--sp-2) 0; }
.gnb-mnav li a {
	display: block;
	padding: 14px var(--sp-5);
	line-height: 1.5;
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--ink-700);
	border-bottom: 1px solid var(--ink-100);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gnb-mnav li a:hover { background: var(--brand-50); color: var(--brand-700); }
.orin3 { background-color: transparent; left: -34px; }
.orin3 > span::before, .orin3 > span::after { background-color: var(--white); }
.mnav_bbg { z-index: var(--z-drawer-bg); background-color: rgba(15, 23, 42, .45); }

/* ---- 헤더 반응형 ---- */
@media screen and (max-width: 1100px) {
	.hd-bar { gap: var(--sp-4); }
	.headerBox .icoxhd li a > p { display: none; }
	.headerBox .icoxhd li a { padding: 5px; }
}
@media screen and (max-width: 900px) {
	.headerBox .icoxhd { display: none; }
}

@media screen and (max-width: 768px) {
	.headerBox { padding: 0 var(--sp-3); }

	/* 로고 + 햄버거 한 줄, 검색은 아래 줄 전체 폭 */
	.hd-bar {
		flex-wrap: wrap;
		align-items: center;
		gap: var(--sp-2);
		min-height: 0;
		padding: var(--sp-3) 0;
	}
	.headerBox .top-logox { order: 1; }
	.headerBox .top-logox img { height: 30px; }

	.headerBox .btn-mnav {
		order: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin-left: auto;
		border-radius: var(--r-sm);
		cursor: pointer;
	}
	.headerBox .btn-mnav:hover { background: var(--bg-sunken); }
	.headerBox .trine2 { display: block; }

	.headerBox .headinBox {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
		margin-top: var(--sp-1);
	}
	.headerBox .schBox-mas input[type="text"] { height: 40px; }
	.headerBox .headinBox .headinTag { margin-top: 6px; }

	.hd-util { display: none; }

	.gnb-mas .width_fixed { padding: 0; }
	.gnbBox {
		overflow-x: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
		padding: 0 var(--sp-2);
	}
	.gnbBox::-webkit-scrollbar { display: none; }
	.gnbBox li a { padding: 12px var(--sp-3); font-size: var(--fs-base); }
	.gnbBox li a::after { left: var(--sp-2); right: var(--sp-2); }
}

/*--------------------------------------------------------------
  5. 카드 - 메인 그리드
--------------------------------------------------------------*/
.container-mas { gap: var(--sp-4); }

.item-mas {
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	background: var(--bg-surface);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.item-mas:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-2);
	border-color: var(--brand-200);
}

.inBox-mas .img-mas { background: var(--bg-sunken); }
.inBox-mas .img-mas img { object-fit: cover; }

.inBox-mas .title-mas {
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--ink-900);
	letter-spacing: -.02em;
	padding: 0 var(--sp-3);
}
.inBox-mas .title-mas > a { color: var(--ink-900); }
.item-mas:hover .title-mas,
.item-mas:hover .title-mas > a { color: var(--brand-700); }

/* 카테고리는 태그 형태로 */
.desc-mas .cate-mas {
	padding: var(--sp-3) var(--sp-3) var(--sp-1);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--brand-700);
	letter-spacing: .01em;
}
.desc-mas .info-mas {
	padding: var(--sp-2) var(--sp-3);
	border-top: 1px solid var(--ink-100);
}
.info-mas .aut-mas { font-size: var(--fs-xs); color: var(--ink-500); }

/* 대형 카드(sz30) 오버레이 */
.item-mas.sz30 .img-mas::after {
	background: linear-gradient(to bottom, rgba(15, 23, 42, 0) 20%, rgba(15, 23, 42, .55) 55%, rgba(15, 23, 42, .92) 100%);
}
.item-mas.sz30 .title-mas,
.item-mas.sz30 .title-mas > a { color: var(--white); }
.item-mas.sz30 .desc-mas .cate-mas { color: var(--brand-200); }
.item-mas.sz30 .info-mas .aut-mas { color: rgba(255, 255, 255, .75); }
.item-mas.sz30 .desc-mas .info-mas { border-top-color: rgba(255, 255, 255, .18); }
.item-mas.sz30 .img-mas { background: var(--ink-800); }
.item-mas.sz20 .img-mas { background: var(--bg-sunken); }

/*--------------------------------------------------------------
  6. 카드 - 갤러리 / 쇼핑
--------------------------------------------------------------*/
.container-ivmas { gap: var(--sp-4); }

.ive-mas {
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
	background: var(--bg-surface);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ive-mas:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-2);
	border-color: var(--brand-200);
}
.iveBx-mas .img-mas { background: var(--bg-sunken); }
.iveBx-mas .img-mas img { object-fit: cover; }
.iveBx-mas .title-mas {
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--ink-900);
	padding: 0 var(--sp-3);
}

/* 쇼핑 카드 */
.item-vgsi {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.item-vgsi:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-2);
	border-color: var(--brand-200);
}
.img-vgsi { background: var(--bg-sunken); overflow: hidden; }
.img-vgsi img { object-fit: cover; transition: transform .45s var(--ease); }
.item-vgsi:hover .img-vgsi img { transform: scale(1.06); }

.tit-vgsi {
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: var(--lh-tight);
	color: var(--ink-900);
	letter-spacing: -.02em;
}
.tit-vgsi a { color: var(--ink-900); }
.item-vgsi:hover .tit-vgsi a { color: var(--brand-700); }

.shop-vgsi { font-size: var(--fs-xs); color: var(--ink-500); }

/* 가격을 시선의 앵커로 - 가장 강한 위계 */
.price-vgsi {
	font-size: var(--fs-md);
	font-weight: 800;
	color: var(--ink-900);
	letter-spacing: -.03em;
	white-space: nowrap;
}
.ship-vgsi {
	display: inline-block;
	padding: 2px 8px;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--brand-700);
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-radius: var(--r-full);
}
.aut-vgsi, .date-vgsi { font-size: var(--fs-xs); color: var(--ink-400); }

/*--------------------------------------------------------------
  7. 게시판 목록
  brd_list_type3.html 의 기존 레이아웃(썸네일 + 모바일 제목 +
  구분자 메타행)은 잘 동작하므로 구조는 건드리지 않고
  색/타이포/여백만 새 체계로 맞춘다.
--------------------------------------------------------------*/
.stemList {
	border-top: 2px solid var(--ink-800);
	margin: var(--sp-4) auto var(--sp-6);
}
.stemList li {
	border-bottom: 1px solid var(--border);
	padding: var(--sp-3) var(--sp-2);
	transition: background-color var(--dur) var(--ease);
}
/* 홀수 행 얼룩무늬 대신 hover 로만 행을 구분한다 */
.stemList li:nth-child(2n+1) { background-color: transparent; }
.stemList li:hover { background-color: var(--brand-50); }

.stemList .oneStp {
	background-color: var(--bg-sunken);
	border-bottom: 1px solid var(--border-strong);
	color: var(--ink-600);
	font-weight: 700;
}
.stemList li.oneStp:hover { background-color: var(--bg-sunken); }
.stemList .oneStp p { font-size: var(--fs-sm); }

/* 셀에 걸린 47px 고정 높이를 풀어 2줄 제목/배지가 잘리지 않게 한다 */
.stemin1 > p, .stemin2 > p {
	height: auto;
	line-height: 1.5;
}

/* 썸네일 */
.stemin1 .scol-thumb {
	border-radius: var(--r-sm);
	border: 1px solid var(--border);
	background: var(--bg-sunken);
}

/* 글번호 */
.stemin1 .scol1 {
	color: var(--ink-400);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
}

/* 제목 */
.stemin1 .scol2 > a {
	font-size: var(--fs-md);
	font-weight: 500;
	color: var(--ink-800);
}
.stemin1 .scol2 > a:hover { color: var(--brand-700); text-decoration: none; }
.stemList li:hover .scol2 > a { color: var(--brand-700); }
.stemin1 .scol2 .title-icon,
.stemin2 .scol2-mobile .title-icon { opacity: .85; }

/* 카테고리 / 작성자 / 일자 / 조회수 */
.stemin2 .scol3,
.stemin2 .scol4,
.stemin2 .scol5,
.stemin2 .scol6 {
	color: var(--ink-500);
	font-size: var(--fs-sm);
}
.stemin2 .scol3 { color: var(--brand-700); font-weight: 600; }
.stemin2 .scol6 { color: var(--ink-400); font-variant-numeric: tabular-nums; }

/*--------------------------------------------------------------
  8. 본문 보기
--------------------------------------------------------------*/
.content-vwat {
	font-size: var(--fs-md);
	line-height: 1.8;
	color: var(--ink-700);
}
.content-vwat img { border-radius: var(--r-md); height: auto; }
.content-vwat p { margin: 0 0 var(--sp-4); }

.desc-wa h2, .desc-wa h3 { color: var(--ink-900); }
/* .cate-vwa 는 카테고리/작성자/일자/조회수를 담는 "줄"이다.
   1차에서 이 줄 전체를 알약 배지로 만들어 이질적으로 보였다 → 평범한 메타 줄로 되돌린다. */
.tit-vwat .cate-vwa,
.cate-vwa {
	display: block;
	padding: var(--sp-2) 0 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: var(--fs-sm);
	font-weight: 400;
	color: var(--ink-400);
}
.tit-vwat .cate-vwa > span { margin: 0 0 0 var(--sp-3); }
.tit-vwat .cate-vwa > span:first-child { margin-left: 0; }
.tit-vwat .cate-vwa .cate a { color: var(--brand-700); font-weight: 600; }
.tit-vwat .cate-vwa .cate a:hover { color: var(--brand-800); text-decoration: none; }
.tit-vwat .cate-vwa .writer { color: var(--ink-600); }
.tit-vwat .cate-vwa .date { color: var(--ink-400); }
.tit-vwat .cate-vwa .hit { color: var(--ink-400); font-size: var(--fs-sm); }
.desc-wa .date, .desc-wa .hit { font-size: var(--fs-sm); color: var(--ink-400); }

/* ── 글/상품 제목 머리 ──
   style-lkssg.css 의 .tit-vwat 는 위아래 #ddd 레일에 h2 를 #f5f5f5 회색 띠로
   깔아서, 표 머리처럼 각지고 사이트의 다른 제목과 결이 달랐다.
   면과 테두리를 걷어내고 .tit-tmn 과 같은 방식(아래 얇은 구분선 하나)으로 맞춘다. */
.tit-vwat {
	border-top: 0;
	border-bottom: 1px solid var(--border);
	padding: 0 0 var(--sp-4);
	margin: 0 0 var(--sp-5);
}
.tit-vwat > h2 {
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: -.01em;
	color: var(--ink-900);
	/* 한글 제목이 단어 중간에서 끊기지 않게 */
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* ── 상품 메타 줄 (.cate-vmga) ──
   숫자만 진하게, '조회수/추천수/댓글' 라벨은 흐리게 두면 배지 없이도 위계가 잡힌다.
   (.cate-vwa 때처럼 알약 배지를 씌우면 사이트에서 겉돈다) */
.cate-vmga {
	padding: var(--sp-3) 0 0;
	gap: var(--sp-3);
	flex-wrap: wrap;
	font-size: var(--fs-sm);
}
.cate-vmga .vgcol1 > a {
	color: var(--ink-600);
	font-weight: 600;
	text-decoration: none;
}
.cate-vmga .vgcol1 > a:hover { color: var(--brand-700); text-decoration: none; }
.cate-vmga .vgcol2 {
	display: flex;
	flex-wrap: wrap;
	/* 세로 4px / 가로 16px. 옛 margin-right 10px 은 gap 으로 대체한다. */
	gap: var(--sp-1) var(--sp-4);
	font-size: var(--fs-sm);
}
.cate-vmga .vgcol2 > span {
	margin: 0;
	color: var(--ink-600);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.cate-vmga .vgcol2 > span::before {
	margin: 0 var(--sp-1) 0 0;
	color: var(--ink-400);
	font-weight: 400;
}
.cate-vmga .vgcol2 .mg-date { color: var(--ink-400); font-weight: 400; }

/* ── 상품 정보표 (.regiwtab) ──
   위아래 레일 + 각진 회색 라벨칸이 이 페이지에서 가장 날카로운 부분이었다.
   카드처럼 둥글게 감싸고, 라벨칸은 옅은 면으로 낮추고, 셀 높이를 고정(43px)에서
   패딩 기반으로 바꿔 두 줄이 되어도 답답하지 않게 한다. */
.regiwtab {
	margin: 0 0 var(--sp-5);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--bg-surface);
	font-size: var(--fs-base);
}
.regiwtab td {
	height: auto;
	padding: var(--sp-3) var(--sp-4);
	line-height: var(--lh-base);
	color: var(--ink-700);
	vertical-align: middle;
}
.regiwtab .cob1 {
	width: 116px;
	background: var(--ink-50);
	border-right: 1px solid var(--border);
	color: var(--ink-500);
	font-size: var(--fs-sm);
	font-weight: 600;
}
.regiwtab tr:not(:last-of-type) td { border-bottom: 1px solid var(--border); }
/* table 은 overflow 로 잘 안 잘리므로 모서리 셀에 직접 라운드를 준다. */
.regiwtab tr:first-of-type .cob1 { border-top-left-radius: var(--r-md); }
.regiwtab tr:last-of-type .cob1 { border-bottom-left-radius: var(--r-md); }
.regiwtab .cob2 a {
	color: var(--brand-700);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.regiwtab .cob2 a:hover { color: var(--brand-800); text-decoration: underline; }
/* 쿠팡 파트너스 고지. 순수 빨강(#ff0000)이 이 페이지에서 가장 튀는 색이었다.
   경고가 아니라 안내이므로 본문보다 한 단 낮춘 회색으로 내린다. */
.regiwtab .mall-notice {
	display: block;
	margin: var(--sp-1) 0 0;
	color: var(--ink-400);
	font-size: var(--fs-xs);
	font-weight: 400;
	line-height: 1.5;
}

@media screen and (max-width: 768px) {
	.tit-vwat > h2 { font-size: var(--fs-lg); }
	.regiwtab { font-size: var(--fs-sm); }
	.regiwtab td { padding: var(--sp-3); }
	.regiwtab .cob1 { width: 88px; font-size: var(--fs-xs); }
}

/* 목록보기 버튼
   .gobtn-vwat 는 버튼이 아니라 감싸는 영역이므로 버튼 스타일을 주면 안 된다.
   기존 .gobtn-vwat .golistw 가 inline-block + padding 이라 min-height 와 겹쳐
   글자가 위로 밀려 있었다 → inline-flex 로 수직 중앙 정렬하고 테두리를 없앤다. */
.gobtn-vwat {
	border-top: 1px solid var(--border);
	text-align: right;
	/* 위아래 여백을 같게 주어야 아래쪽 목록(.olist-vwat)의 테두리와
	   버튼 사이가 균등해진다. 한쪽만 주면 버튼이 아래 선에 붙는다. */
	padding: var(--sp-5) 0;
}
.gobtn-vwat .golistw {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 var(--sp-8);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1;
	color: var(--white);
	background: var(--brand-600);
	border: 0;
	border-radius: var(--r-full);
	box-shadow: var(--sh-1);
	cursor: pointer;
	transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gobtn-vwat .golistw:hover {
	color: var(--white);
	background: var(--brand-700);
	transform: translateY(-1px);
	box-shadow: var(--sh-2);
}
.gobtn-vwat .golistw:active { transform: translateY(0); }

/*--------------------------------------------------------------
  9. 상품 상세 설명 (GPT 생성 콘텐츠)
--------------------------------------------------------------*/
.product-description {
	/* 첫 섹션의 padding-top(20px)과 합쳐 위 여백이
	   섹션 간 간격(40px)과 비슷해지도록 잡는다 */
	margin: var(--sp-4) 0 0;
	font-size: var(--fs-md);
	line-height: 1.85;
	color: var(--ink-700);
}
.product-description .desc-section {
	padding: var(--sp-5) 0;
	border-top: 1px solid var(--border);
}
/* 첫 섹션은 구분선만 없앤다.
   padding-top 까지 없애면 첫 항목만 위 여백이 달라 어긋나 보인다. */
.product-description .desc-section:first-child {
	border-top: 0;
}
/* 제목 앞 세로 막대는 텍스트 커서처럼 보여 제거하고,
   제목 아래 짧은 밑줄로 구분한다 */
.product-description .desc_title {
	position: relative;
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--ink-900);
	margin: 0 0 var(--sp-3);
	padding: 0 0 var(--sp-2);
}
.product-description .desc_title::before { content: none; }
.product-description .desc_title::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 28px; height: 2px;
	border-radius: var(--r-full);
	background: var(--brand-500);
}
.product-description p { margin: 0 0 var(--sp-3); }
.product-description p:last-child { margin-bottom: 0; }

/* 자주 묻는 질문 섹션은 카드로 구분 */
.product-description .desc-faq {
	background: var(--bg-sunken);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	padding: var(--sp-5);
	margin-top: var(--sp-5);
}
.product-description .desc-comparison { background: transparent; }

/*--------------------------------------------------------------
  10. 버튼 / 페이지네이션
--------------------------------------------------------------*/
.moreBtnvvm { padding: var(--sp-8) var(--sp-2) var(--sp-10); }

/* 갈색 그라디언트 -> 브랜드 블루로 통일 */
.mrbtn_vvm {
	font-family: var(--font-sans);
	font-size: var(--fs-md);
	font-weight: 600;
	padding: 12px 40px;
	color: var(--white);
	background: var(--brand-600);
	border: 0;
	border-radius: var(--r-full);
	box-shadow: var(--sh-1);
	transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mrbtn_vvm:hover {
	background: var(--brand-700);
	transform: translateY(-1px);
	box-shadow: var(--sh-2);
}
.mrbtn_vvm:active { transform: translateY(0); }

.pagingBx {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--sp-1);
	flex-wrap: wrap;
	padding: var(--sp-8) 0 var(--sp-2);
}
.pagingBx a, .pagingBx strong, .pagingBx span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 var(--sp-2);
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--ink-600);
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	box-sizing: border-box;
	transition: all var(--dur) var(--ease);
}
.pagingBx a:hover {
	color: var(--brand-700);
	border-color: var(--brand-300);
	background: var(--brand-50);
}
.pagingBx strong, .pagingBx .on, .pagingBx a.on {
	color: var(--white);
	background: var(--brand-600);
	border-color: var(--brand-600);
	font-weight: 700;
}

/* 위로 가기 버튼 */
.up-btn {
	border-radius: var(--r-full);
	box-shadow: var(--sh-2);
	background-color: var(--bg-surface);
	border: 1px solid var(--border);
}

/*--------------------------------------------------------------
  11. 광고 영역
  - 콘텐츠와 시각적으로 분리하고, 본문을 가리지 않도록 정리
--------------------------------------------------------------*/

/* 광고 슬롯 공통: 배경을 낮추고 "AD" 라벨을 붙여 콘텐츠와 구분 */
.ad-slot {
	position: relative;
	max-width: var(--layout-max);
	margin: var(--sp-5) auto;
	padding: var(--sp-6) var(--sp-3) var(--sp-3);
	background: var(--bg-sunken);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	text-align: center;
	overflow: hidden;
	box-sizing: border-box;
}
.ad-slot::before {
	content: "AD";
	position: absolute;
	top: var(--sp-2); left: var(--sp-3);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--ink-400);
}
.ad-slot .adsbygoogle { display: block; }

/* 그리드 안에 들어가는 광고는 카드 테두리를 갖지 않도록 */
.container-mas > .ad-slot,
.container-vgsi > .ad-slot { grid-column: 1 / -1; margin: 0; }

/* 상단 배너 */
.ad-top { margin-top: var(--sp-5); }

/* 하단 고정 배너가 본문 마지막을 가리지 않도록 여백 확보 */
body.has-fixed-ad { padding-bottom: 56px; }

#adBottom {
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(180%) blur(6px);
	border-top: 1px solid var(--border);
	box-shadow: 0 -2px 10px rgba(15, 23, 42, .08);
	height: auto !important;
	padding: var(--sp-1) 0;
}
#adBottom .area_btn_close {
	top: 50% !important;
	right: var(--sp-2) !important;
	transform: translateY(-50%);
	width: 24px !important;
	height: 24px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, .55);
	border-radius: var(--r-full);
}
#adBottom .btn_pop_close img { width: 11px !important; height: 11px !important; filter: invert(1); }

/*--------------------------------------------------------------
  12. 푸터
--------------------------------------------------------------*/
footer #footCont {
	background: var(--ink-900);
	color: var(--ink-400);
	margin-top: var(--sp-10);
}
/* style-header.css 의 .footerin 이 #efefef 를 덮어써 푸터가 밝게 나오던 문제 보정 */
.footerin {
	background-color: transparent;
	padding: var(--sp-6) var(--sp-4);
	font-size: var(--fs-sm);
}
.fin-Box, .fin-desc { width: 100%; max-width: var(--layout-max); margin-left: auto; margin-right: auto; }

/* 안내문구를 위, 저작권 표기를 아래로 배치 */
.footerin .width_fixed { display: flex; flex-direction: column; }
.footerin .width_fixed > .fin-desc { order: 1; }
.footerin .width_fixed > .fin-Box { order: 2; }

.fin-Box {
	padding: var(--sp-4) 0 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
	border-bottom: 0;
}
.copy-desc {
	font-size: var(--fs-xs);
	color: var(--ink-500);
	margin: 0;
}
/* 문단 구분만 남기고 줄바꿈은 흘려보내 높이를 줄인다 */
.fin-desc {
	white-space: pre-line;
	font-size: var(--fs-xs);
	line-height: 1.7;
	color: var(--ink-500);
	padding: 0;
	margin: 0;
	text-align: center;
}
footer a { color: var(--ink-300); }
footer a:hover { color: var(--brand-300); }

/*--------------------------------------------------------------
  13. 반응형
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	:root {
		--fs-base: 15px;
		--fs-md: 15px;
		--fs-lg: 17px;
		--fs-xl: 19px;
	}

	.containerWrapper { padding: var(--sp-3) var(--sp-2) var(--sp-8); }

	.lay-fixed {
		padding: var(--sp-4);
		border-radius: var(--r-md);
	}

	.container-mas { background: transparent; gap: var(--sp-3); }
	.item-mas { border-radius: var(--r-md); }
	.item-mas:hover { transform: none; }

	.inBox-mas .img-mas { border-radius: var(--r-sm); }
	.inBox-mas .title-mas { font-size: var(--fs-md); }

	.container-ivmas { background: transparent; gap: var(--sp-3); }

	.tit-tmn { font-size: var(--fs-lg); }

	/* 게시판 목록: 기존 모바일 레이아웃은 유지하고 색/크기만 조정 */
	.stemList li { padding: var(--sp-3); }
	.stemList .stemin2 .scol2-mobile > a {
		font-size: var(--fs-md);
		font-weight: 600;
		color: var(--ink-800);
	}
	.stemin2 .scol-meta-mobile .scol3,
	.stemin2 .scol-meta-mobile .scol4,
	.stemin2 .scol-meta-mobile .scol5,
	.stemin2 .scol-meta-mobile .scol6 {
		font-size: var(--fs-xs);
		color: var(--ink-400);
	}
	.stemin2 .scol-meta-mobile .scol3 { color: var(--brand-700); }
	.stemin2 .scol-meta-mobile .scol3::after,
	.stemin2 .scol-meta-mobile .scol4::after,
	.stemin2 .scol-meta-mobile .scol5::after { color: var(--ink-300); }

	/* 터치 타깃 최소 크기 확보 */
	.gnb-mnav ul li a { padding: 15px var(--sp-5); }
	.pagingBx a, .pagingBx strong, .pagingBx span { min-width: 40px; height: 40px; }

	.ad-slot { margin: var(--sp-4) auto; padding: var(--sp-5) var(--sp-2) var(--sp-2); }

	.footerin { padding: var(--sp-8) var(--sp-4) var(--sp-6); }
}

@media screen and (max-width: 480px) {
	.icoxhd ul { gap: var(--sp-2); }
	.icoxhd p { font-size: 11px; }
}

/*--------------------------------------------------------------
  14. 인쇄
--------------------------------------------------------------*/
@media print {
	header, footer, .ad-slot, #adBottom, .up-btn, .moreBtnvvm, .pagingBx { display: none !important; }
	body { background: #fff; color: #000; }
	.lay-fixed { border: 0; box-shadow: none; padding: 0; }
}

/*--------------------------------------------------------------
  15. 기존 스타일 보정
  style-lkssg.css / style-reset.css 의 오래된 규칙 중
  새 디자인과 충돌하는 것만 선택적으로 덮는다.
--------------------------------------------------------------*/

/* (4) 페이징: 기존 25px 고정 크기 및 밑줄 강조를 새 규격으로 */
.pagingBx > a {
	width: auto;
	min-width: 38px;
	height: 38px;
	line-height: 1;
	margin: 0 2px;
}
.pagingBx > a.on {
	color: var(--white);
	text-decoration: none;
	background-color: var(--brand-600);
	border-color: var(--brand-600);
}
/* 이전/다음 화살표는 아이콘만 보이도록 */
.pagingBx > a.prevpbtn,
.pagingBx > a.nextpbtn {
	background-size: 60%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--bg-surface);
}
.pagingBx > a.prevpbtn:hover,
.pagingBx > a.nextpbtn:hover { background-color: var(--brand-50); }

@media screen and (max-width: 768px) {
}

/*--------------------------------------------------------------
  17. 쇼핑 카드 높이 (하단 잘림 수정)

  .container-vgsi 의 grid-auto-rows 가 320px 로 고정돼 있는데
  카드 내용(이미지 200 + 제목 2.8em + 메타 2줄)이 이를 넘어서
  .item-vgsi 의 overflow:hidden 에 잘리고 있었다.
--------------------------------------------------------------*/
.container-vgsi { grid-auto-rows: auto; }

.inBox-vgsi .inBtw02 {
	padding: var(--sp-3) var(--sp-3) var(--sp-4);
	border-top: 1px solid var(--ink-100);
	color: var(--ink-500);
	overflow: visible;
}
.inBtw02 .ifv-s1 { align-items: baseline; gap: var(--sp-2); }
.inBtw02 .ifv-s1 .shop-vgsi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inBtw02 .ifv-s1 .price-vgsi { color: var(--ink-900); font-size: var(--fs-md); }
.inBtw02 .ifv-s2 { margin-top: var(--sp-2); }

@media screen and (max-width: 768px) {
	.container-vgsi { grid-auto-rows: auto; }
}

/*--------------------------------------------------------------
  18. 로그인 / 회원가입 폼
--------------------------------------------------------------*/
/* 500px 고정 높이 + absolute 중앙정렬을 평범한 카드로 되돌린다 */
.loginbgWrap {
	height: auto;
	position: static;
	padding: var(--sp-8) 0 var(--sp-10);
}
.loginBox {
	position: static;
	transform: none;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	padding: var(--sp-8) var(--sp-8) var(--sp-6);
	background-color: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2);
}
.loginBox .titlogin {
	font-size: var(--fs-2xl);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ink-900);
	padding: 0 0 var(--sp-6);
}

/* 입력창 공통 */
.type-sup1 {
	font-family: var(--font-sans);
	height: 46px;
	font-size: var(--fs-base);
	color: var(--ink-800);
	padding: 0 var(--sp-4);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.type-sup1::placeholder { color: var(--ink-400); font-size: var(--fs-base); }
.type-sup1:focus {
	border-color: var(--brand-400);
	box-shadow: var(--ring);
	outline: 0;
}

.formBx li { padding: var(--sp-1) 0; text-align: center; }
.formBx li input, .btnlogin { height: 46px; }

.btnlogin {
	width: 100%;
	margin: var(--sp-4) auto 0;
	font-family: var(--font-sans);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 46px;
	color: var(--white);
	background-color: var(--brand-600);
	border: 0;
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease);
}
.btnlogin:hover { background-color: var(--brand-700); }

.formBx li.joinwbx {
	padding: var(--sp-5) 0 var(--sp-1);
	text-decoration: none;
}
.formBx li.joinwbx a {
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--brand-700);
	text-decoration: none;
}
.formBx li.joinwbx a:hover { text-decoration: underline; }
.formBx li.joinwbx2 { padding-bottom: var(--sp-2); }
.formBx li.joinwbx2 a {
	font-size: var(--fs-sm);
	color: var(--ink-400);
	text-decoration: none;
}
.formBx li.joinwbx2 a:hover { color: var(--ink-600); text-decoration: underline; }

/* 회원가입 폼 안내문구 - 분홍/빨강이라 경고처럼 보이던 것을 보조 텍스트 톤으로 */
.row-sup .descmoo {
	font-size: var(--fs-sm);
	color: var(--ink-500);
	font-weight: 400;
	margin-top: var(--sp-2);
}
.row-sup { border-bottom: 1px solid var(--border); }
.row-sup .col1-sup label { font-weight: 600; color: var(--ink-700); }

/*--------------------------------------------------------------
  19. 검색 결과 페이지

  구글 CSE 기본 스타일과 예전 색(#1a0dab 링크, #3a7c45 URL, coral 버튼)이
  섞여 사이트와 따로 놀았다. 폰트/크기/색/여백을 전부 디자인 시스템에 맞춘다.
--------------------------------------------------------------*/
.schpageWarp { margin: 0 auto; }

/* 공통 섹션 구획 */
.sch-resDirt, .sch-resProp, .sch-resBox {
	padding: var(--sp-5) 0;
	border-bottom: 1px solid var(--border);
}
.sch-resDirt:empty { display: none; padding: 0; border: 0; }

/* ---- 연관검색어 ---- */
.sch-resProp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	height: auto !important;
	line-height: 1.6 !important;
	overflow: hidden;
}
.sch-resProp::before {
	margin-right: var(--sp-1);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ink-500);
}
.sch-resProp > a {
	margin: 0;
	padding: 4px 12px;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-600);
	background: var(--ink-100);
	border: 1px solid transparent;
	border-radius: var(--r-full);
	transition: all var(--dur) var(--ease);
}
.sch-resProp > a:hover {
	color: var(--brand-700);
	background: var(--brand-50);
	border-color: var(--brand-200);
	text-decoration: none;
}
/* 쉼표 구분자는 배지 형태에서 불필요 */
.sch-resProp > a:not(:last-child)::after { content: none; }

/* ---- 바로가기 사이트 ---- */
.sch-resDirt .dirBox1 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-bottom: var(--sp-2);
}
.dirBox1 .tit-drt {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--brand-700);
	text-decoration: none;
}
.dirBox1 .btn_player:hover .tit-drt { text-decoration: underline; }
.dirBox1 .stit-drt {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 400;
	color: var(--ink-500);
}
/* coral → 브랜드 보조 버튼 */
.dirBox1 .btn-drt {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 var(--sp-4);
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--brand-700);
	background-color: var(--brand-50);
	border: 1px solid var(--brand-200);
	border-radius: var(--r-full);
	cursor: pointer;
	white-space: nowrap;
	transition: all var(--dur) var(--ease);
}
.dirBox1 .btn-drt:hover {
	color: var(--white);
	background-color: var(--brand-600);
	border-color: var(--brand-600);
}
.sch-resDirt > div { font-size: var(--fs-base); color: var(--ink-600); }
.sch-resDirt > div strong { color: var(--ink-900); font-weight: 700; }

/* ---- 뉴스 / 카페 / 웹문서 결과 ---- */
.tit-srBox {
	position: relative;
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--ink-900);
	padding: 0 0 var(--sp-2);
	margin: 0 0 var(--sp-4);
}
.tit-srBox::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 24px; height: 2px;
	border-radius: var(--r-full);
	background: var(--brand-500);
}

.elem-svb { margin: 0 auto var(--sp-5); gap: var(--sp-3); }
.elem-svb:last-child { margin-bottom: 0; }
.elem-svb .thum-svc img {
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	margin-right: 0;
}
.cont-svc .tit-sve {
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1.45;
	margin: 0 0 var(--sp-1);
}
.cont-svc .tit-sve a { color: var(--brand-700); }
.cont-svc .tit-sve a:hover { color: var(--brand-800); text-decoration: underline; }
.cont-svc .tit-sve b, .cont-svc .desc-sve b { color: inherit; font-weight: 700; }
.cont-svc .desc-sve {
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--ink-600);
	margin-bottom: var(--sp-1);
}
.cont-svc .addin-sve {
	font-size: var(--fs-xs);
	color: var(--ink-400);
}
.addin-sve .bsve3::before { background-color: var(--ink-300); }

.moretBtn > a {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--brand-700);
	text-decoration: none;
}
.moretBtn > a:hover { text-decoration: underline; }

/* ---- 구글 맞춤검색(CSE) ----
   구글이 자체 CSS 를 런타임에 <head> 로 주입하므로 여기서 잡으면 덮인다.
   → 실제 규칙은 links_view_selfapi.html 본문의 인라인 <style> 에 둔다. */

@media screen and (max-width: 768px) {
	.sch-resDirt, .sch-resProp, .sch-resBox { padding: var(--sp-4) 0; }
	.dirBox1 .tit-drt { font-size: var(--fs-md); }
	.elem-svb { margin-bottom: var(--sp-4); }
	.cont-svc .tit-sve { font-size: var(--fs-base); }
	.gsc-cursor-page { min-width: 34px; height: 34px; }
}

/*--------------------------------------------------------------
  20. 버튼 통일 (댓글/제보 · 문의하기)

  갈색 그라디언트(#9D8068)와 남색(#45455f)이 남아 있던 버튼들을
  '리스트보기'와 같은 브랜드 블루로 맞춘다.
--------------------------------------------------------------*/
.submitBoxReply .BtnReply,
.submit-supBox .istemBtn1 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 var(--sp-8);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1;
	color: var(--white) !important;
	background: var(--brand-600);
	border: 0;
	border-radius: var(--r-full);
	box-shadow: var(--sh-1);
	cursor: pointer;
	transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.submitBoxReply .BtnReply:hover,
.submit-supBox .istemBtn1:hover {
	background: var(--brand-700);
	transform: translateY(-1px);
	box-shadow: var(--sh-2);
}
.submitBoxReply .BtnReply:active,
.submit-supBox .istemBtn1:active { transform: translateY(0); }

/* 취소/뒤로 버튼은 보조 위계 */
.submit-supBox .istemBtn1.sumix2 {
	color: var(--ink-700) !important;
	background: var(--bg-surface);
	border: 1px solid var(--border-strong);
	box-shadow: none;
}
.submit-supBox .istemBtn1.sumix2:hover {
	color: var(--brand-700) !important;
	background: var(--brand-50);
	border-color: var(--brand-300);
}
.submit-supBox .sumix1, .submit-supBox .sumix2 { width: auto; min-width: 140px; padding: 0 var(--sp-8); }
.submit-supBox { margin: var(--sp-6) 0 0; display: flex; justify-content: center; gap: var(--sp-2); }

/*--------------------------------------------------------------
  21. 문의하기 페이지
--------------------------------------------------------------*/
.supWrap .tit-tmn { margin-bottom: var(--sp-2); }

.supBox {
	width: 100%;
	max-width: 720px;
	margin: var(--sp-5) auto 0;
	border-top: 2px solid var(--ink-800);
}

/* 안내 박스 */
.infoTxB-inq1 {
	padding: var(--sp-4) var(--sp-5);
	margin: var(--sp-4) auto var(--sp-5);
	background-color: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-radius: var(--r-md);
}
.infoTxB-inq1 .tit-inq1 {
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--ink-900);
	margin-bottom: var(--sp-1);
}
.infoTxB-inq1 .desc-inq1 {
	font-size: var(--fs-sm);
	line-height: 1.7;
	color: var(--ink-600);
}

/* 약관 박스 */
.row-term {
	padding: var(--sp-5) 0;
	border-bottom: 1px solid var(--border);
}
.row-term > h3 {
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--ink-800);
}
.row-term .termBox {
	height: 150px;
	padding: var(--sp-4);
	margin: var(--sp-3) auto;
	font-size: var(--fs-sm);
	font-weight: 400;
	line-height: 1.75;
	color: var(--ink-600);
	background-color: var(--bg-sunken);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
}
.row-term .termBox::-webkit-scrollbar { width: 8px; }
.row-term .termBox::-webkit-scrollbar-thumb {
	background: var(--ink-300);
	border-radius: var(--r-full);
}

/* 선택형 입력 */
.row-sup input[type="radio"], .row-sup input[type="checkbox"] { accent-color: var(--brand-600); }
.col2-sup.colany1 { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.col2-sup.colany1 label { font-size: var(--fs-base); color: var(--ink-700); cursor: pointer; }
select.type-sup1 {
	height: 46px;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	color: var(--ink-800);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	padding: 0 var(--sp-3);
	cursor: pointer;
}
textarea.type-sup1 { height: 180px; padding: var(--sp-3) var(--sp-4); line-height: 1.7; }

@media screen and (max-width: 768px) {
	.supBox { max-width: none; }
	.submit-supBox { flex-direction: column-reverse; }
	.submit-supBox .sumix1, .submit-supBox .sumix2 { width: 100%; }
	.submitBoxReply .BtnReply { width: 100%; margin-top: var(--sp-2); }
}

/*--------------------------------------------------------------
  16. TOP 버튼 (2차)
--------------------------------------------------------------*/
#Btn-Up {
	z-index: var(--z-topbtn);
	width: 46px;
	height: 46px;
	right: 24px;
	bottom: 24px;
	background-color: rgba(15, 23, 42, .78);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--r-full);
	box-shadow: var(--sh-3);
	backdrop-filter: blur(6px);
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
#Btn-Up:hover {
	background-color: var(--brand-600);
	transform: translateY(-2px);
}
#Btn-Up::after { font-size: 10px; letter-spacing: .04em; }
@media screen and (max-width: 768px) {
	#Btn-Up { right: 16px; bottom: 16px; width: 42px; height: 42px; }
	/* 하단 고정 광고가 떠 있으면 겹치지 않게 위로 올린다 */
	body.has-fixed-ad #Btn-Up { bottom: 72px; }
}

/*--------------------------------------------------------------
  21. 제보/댓글 박스 (.reply_box)

  style-reply.css 의 옛 규칙이 남아 이 박스만 사이트와 결이 달랐다.
  - .articleReply(#ddd 테두리) 안에 .writeReply(#ddd 테두리)가 또 들어가
    사각 프레임이 이중으로 겹쳐 있었다 → 카드 하나로 합친다.
  - .writeBoxReply .npassBx > input 같은 옛 선택자가 .type-sup1 보다
    구체적이어서, 사이트 공통 입력창(46px / --r-sm / Pretendard)이
    이 박스에서만 안 먹고 35px / 3px / 맑은고딕으로 남아 있었다.
  - 점선 테두리(#ccc dotted), 회색 블록(#f7f7f7), 회색 칩(#ccc),
    옛 파랑 포커스(#66afe9) 를 모두 토큰으로 바꾼다.
--------------------------------------------------------------*/
.reply_box { margin: var(--sp-8) 0 0; }

/* 겉 프레임 제거 - 바깥 .lay-fixed 가 이미 카드다 */
.articleReply {
	padding: 0;
	border: 0;
}

/* ── 쓰기 영역 ── */
.articleReply .writeReply {
	padding: var(--sp-5);
	background: var(--bg-sunken);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}
.writeReply .titBoxReply > h3 {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--ink-900);
}
.writeReply .titBoxReply .authorCount {
	margin: 0 0 0 var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: 400;
	color: var(--ink-400);
	font-variant-numeric: tabular-nums;
}
.writeReply .indtx {
	margin: var(--sp-1) 0 0;
	font-size: var(--fs-sm);
	font-weight: 400;
	line-height: var(--lh-base);
	color: var(--ink-500);
}

/* 닉네임/비밀번호/카테고리 줄 - margin 대신 gap */
.writeBoxReply .npassBx {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-4) 0 0;
}
.writeBoxReply .npassBx > input,
.writeBoxReply .npassBx > select,
.writeBoxReply .npassBx > input:first-of-type,
.writeBoxReply .npassBx > select:first-of-type {
	height: 46px;
	margin: 0;
	padding: 0 var(--sp-4);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	color: var(--ink-800);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
}
/* 화살표(background-image) 자리 확보.
   :first-of-type 을 함께 잡아야 한다 - 위 그룹 규칙의 select:first-of-type 이
   특이도가 더 높아서(0,3,1) 이 선택자만 쓰면 padding 이 다시 16px 로 덮이고,
   우측 10px 에 놓인 12px 화살표가 텍스트를 침범한다. */
.writeBoxReply .npassBx > select,
.writeBoxReply .npassBx > select:first-of-type {
	padding-right: var(--sp-10);
	background-position: right var(--sp-3) center;
}
.writeReply .writeBoxReply .textBoxrex {
	margin: var(--sp-2) 0 0;
	height: 6.5em;
	padding: var(--sp-3) var(--sp-4);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--ink-800);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
}
.writeBoxReply .npassBx > input::placeholder,
.writeReply .writeBoxReply .textBoxrex::placeholder,
.submitBoxReply .rnibx > input::placeholder {
	font-size: var(--fs-base);
	color: var(--ink-400);
}
/* 옛 파랑 글로우(#66afe9) → 사이트 공통 포커스 링 */
.writeBoxReply .npassBx > input:focus,
.writeBoxReply .npassBx > select:focus,
.writeReply .writeBoxReply .textBoxrex:focus,
.submitBoxReply .rnibx > input:focus {
	border-color: var(--brand-400);
	box-shadow: var(--ring);
	outline: 0;
}

/* ── 자동방지 코드 + 제보 버튼 줄 ── */
.submitBoxReply { margin-top: var(--sp-4); }
.submitBoxReply .rnibx {
	gap: var(--sp-2);
	margin: 0 var(--sp-2) 0 0;
}
.submitBoxReply .rnibx .rntxt {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 400;
	color: var(--ink-500);
}
/* 회색 사각 블록(#ccc/#bbb) → 옅은 브랜드 칩 */
.submitBoxReply .rnibx .rncode {
	height: 46px;
	margin: 0;
	padding: 0 var(--sp-4);
	line-height: 46px;
	font-size: var(--fs-md);
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--brand-800);
	background-color: var(--brand-50);
	border: 1px solid var(--brand-200);
	border-radius: var(--r-sm);
	font-variant-numeric: tabular-nums;
	user-select: all;
}
.submitBoxReply .rnibx > input {
	height: 46px;
	width: 110px;
	padding: 0 var(--sp-3);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	color: var(--ink-800);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
}

/* ── 제보 목록 ── */
.viewReply { margin-top: var(--sp-5); }
.list-Reply { padding: 0; }
/* 점선(#ccc dotted) + 첫줄 #bbb 실선 → 얇은 구분선 한 종류 */
.list-Reply li,
.list-Reply li:first-child,
.list-Reply li:last-child {
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--border);
}
.list-Reply li:last-child { border-bottom: 0; }
.replyItemRow {
	gap: var(--sp-4);
	padding: var(--sp-3) var(--sp-1);
}
.replyItemRow .contentRew,
.list-Reply .contentRew {
	padding: 0;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--ink-700);
}
/* .list-Reply .infoBoxRew 가 .replyItemRow .infoBoxRew 뒤에 와서
   PC 에서도 회색 블록(#f7f7f7)이 다시 깔리고 있었다 → 면을 없앤다 */
.list-Reply .infoBoxRew,
.replyItemRow .infoBoxRew {
	padding: 0;
	gap: var(--sp-3);
	background: none;
	font-size: var(--fs-sm);
}
.infoBoxRew .authorRew,
.replyItemRow .infoBoxRew .authorRew {
	margin: 0;
	color: var(--ink-600);
	font-weight: 600;
}
.infoBoxRew .dateRew,
.replyItemRow .infoBoxRew .dateRew {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 400;
	color: var(--ink-400);
	font-variant-numeric: tabular-nums;
}
.replySeparator { margin: 0; color: var(--ink-200); }
/* 16px 아이콘뿐이라 누를 곳이 좁았다 → 28px 히트 영역 + hover */
.infoBoxRew .delBtnRew,
.replyItemRow .infoBoxRew .delBtnRew {
	width: 28px;
	height: 28px;
	margin: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px 15px;
	border-radius: var(--r-sm);
	opacity: .5;
	transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.infoBoxRew .delBtnRew:hover,
.replyItemRow .infoBoxRew .delBtnRew:hover {
	opacity: 1;
	background-color: var(--ink-100);
}

/* ── 더보기 버튼 - 보조 위계(브랜드 아웃라인) ── */
.replyMoreBx { padding: var(--sp-4) 0 0; }
.btn_reply_more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 var(--sp-8);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1;
	color: var(--brand-700);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-full);
	box-shadow: none;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn_reply_more:hover {
	color: var(--brand-800);
	background-color: var(--brand-50);
	border-color: var(--brand-200);
	box-shadow: var(--sh-1);
	transform: none;
}
.btn_reply_more:active { transform: none; box-shadow: none; }

@media screen and (max-width: 768px) {
	.articleReply .writeReply { padding: var(--sp-4); border-radius: var(--r-md); }
	.writeBoxReply .npassBx > input,
	.writeBoxReply .npassBx > select,
	.writeBoxReply .npassBx > .type-sup1,
	.writeBoxReply .npassBx > input:first-of-type,
	.writeBoxReply .npassBx > select:first-of-type {
		width: 100%;
		height: 46px;
		margin: 0;
	}
	.submitBoxReply .rnibx { width: 100%; margin: 0 0 var(--sp-2); }
	.replyItemRow { gap: var(--sp-1); padding: var(--sp-3) 0; }
	.list-Reply .infoBoxRew,
	.replyItemRow .infoBoxRew { padding: 0; background: none; }
	.replyItemRow .contentRew { padding: 0; }
}