@charset "utf-8";
/**
 * guide.css
 *
 * 보험가이드 게시판(PC) 전용 스타일
 * 사용 템플릿 : templates/www/pc/guide.tpl
 *
 * 시안(TM_GEO협업_보험가이드-시안.html)의 보드 영역 CSS를 옮긴 것.
 * 기존 사이트 CSS(layout/main/style 등)와 충돌하지 않도록
 * 모든 선택자를 #guide 하위로 한정한다.
 *
 * 헤더·GNB·푸터·우측 퀵레일은 layout.tpl 의 공통 영역을 그대로 쓰므로
 * 시안의 해당 재현 마크업 스타일은 옮기지 않는다.
 */

/* ---------- 토큰 ---------- */
#guide {
	--primary: #F26F21;
	--primary-2: #F8894E;
	--primary-dark: #d95e14;
	--peach: #FDEEE5;
	--peach-2: #FCF4EE;
	--ink: #3D3833;
	--sub: #7A716A;
	--line: #ececec;
	--line-2: #f1eeec;
	--chip: #f4f1ef;
	--radius: 14px;
	--radius-sm: 8px;

	color: var(--ink);
	line-height: 1.6;   /* 시안 body 기본값. 사이트 공통 CSS의 1.2 를 상속하지 않도록 */
	font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, sans-serif;
	letter-spacing: -0.01em;
	word-break: keep-all;
	padding-bottom: 60px;
}
#guide * { box-sizing: border-box; }
#guide a { color: inherit; text-decoration: none; }
#guide img { max-width: 100%; }

/* 사이트 공통 컨테이너(.gt_area, .dropbtn = 1200px)와 좌우 라인을 맞춘다 */
#guide .wrap { max-width: 1200px; margin: 0 auto; }

#guide .crumb {
	font-size: 13px; color: var(--sub); margin-bottom: 14px;
	display: flex; gap: 8px; align-items: center;
}
#guide .crumb .sep { opacity: .5; }
#guide .crumb b { color: var(--primary); font-weight: 700; }

/* ---------- 목록: 보드 헤더 ---------- */
#guide .board-hero {
	background: linear-gradient(180deg, var(--peach) 0%, var(--peach-2) 100%);
	border-bottom: 1px solid var(--line-2);
}
#guide .board-hero .wrap { padding: 40px 20px 34px; }
#guide .board-title { font-size: 30px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.02em; }
#guide .board-title .pill {
	font-size: 12px; font-weight: 700; color: #fff; background: var(--primary);
	padding: 3px 10px; border-radius: 999px; vertical-align: 6px; margin-left: 10px;
}
#guide .board-sub { font-size: 15px; color: var(--sub); margin: 0; }

/* ---------- 목록: 필터 / 정렬 ---------- */
#guide .filter { background: #fff; border-bottom: 1px solid var(--line-2); }
#guide .filter .wrap {
	display: flex; align-items: center; gap: 8px; padding: 16px 20px; flex-wrap: wrap;
}
#guide .list-main { background: #faf8f7; }
#guide .list-main .wrap { padding: 28px 20px 60px; }
#guide .chip {
	display: inline-block;
	border: 1px solid #e6e1dd; background: #fff; color: #5c544e;
	font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 999px;
	cursor: pointer; font-family: inherit; transition: .12s;
}
#guide .chip:hover { border-color: var(--primary); color: var(--primary); }
#guide .chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
#guide .chip.chip-solid { background: var(--primary); border-color: var(--primary); color: #fff; }

#guide .filter .sort { margin-left: auto; font-size: 13px; color: var(--sub); display: flex; gap: 12px; }
#guide .filter .sort a.on { color: var(--ink); font-weight: 700; }

/* ---------- 카드 그리드 ---------- */
#guide .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
#guide .grid.grid-2 { grid-template-columns: repeat(2, 1fr); gap: 16px; }

#guide .card {
	background: #fff; border: 1px solid #eee8e4; border-radius: var(--radius);
	overflow: hidden; cursor: pointer; transition: .15s;
	display: flex; flex-direction: column;
}
#guide .card:hover {
	box-shadow: 0 10px 26px rgba(210, 120, 50, .14);
	transform: translateY(-2px); border-color: #f4d9c6;
}

#guide .thumb { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #efe7e2; }
#guide .thumb img.ci { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#guide .thumb .newtag {
	position: absolute; top: 12px; left: 12px; z-index: 3;
	background: #fff; color: var(--primary); font-size: 11px; font-weight: 800;
	padding: 3px 9px; border-radius: 6px; letter-spacing: .02em;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

/* 썸네일 해시태그 칩 (상품명/핵심키워드) — 카테고리 배지와 디자인을 구분한다 */
#guide .thumb .kw {
	position: absolute; left: 10px; bottom: 10px; z-index: 3;
	display: inline-flex; align-items: center;
	background: rgba(34, 28, 24, .58); color: #fff;
	font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	letter-spacing: -.01em;
}
#guide .thumb .kw::before { content: "#"; color: #ffb27a; font-weight: 800; margin-right: 1px; }

#guide .card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
#guide .cat-badge {
	align-self: flex-start; font-size: 12px; font-weight: 700;
	color: var(--primary-dark); background: var(--peach);
	padding: 3px 10px; border-radius: 6px;
}
#guide .card h3 { margin: 2px 0 0; font-size: 17px; font-weight: 700; line-height: 1.42; letter-spacing: -.01em; }
#guide .card p { margin: 0; font-size: 13.5px; color: var(--sub); line-height: 1.55; flex: 1; }
#guide .card .date { font-size: 12px; color: #a89f98; margin-top: 4px; }

/* ---------- 페이지네이션 ---------- */
#guide .pager { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
#guide .pager a {
	width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
	border-radius: 8px; border: 1px solid #e6e1dd; font-size: 14px; color: #6b625b;
}
#guide .pager a:hover { border-color: var(--primary); color: var(--primary); }
#guide .pager a.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
#guide .pager a.off { color: #d5cec9; cursor: default; pointer-events: none; }

/* ---------- 상세 ---------- */
#guide .detail { background: #fff; }
#guide .detail .wrap { max-width: 820px; padding: 36px 20px 60px; }
#guide .detail .cat-badge { margin-bottom: 14px; }
#guide .detail h1 { font-size: 28px; font-weight: 800; line-height: 1.35; margin: 0 0 12px; letter-spacing: -.02em; }
/* 제목 바로 아래 한 줄 요약(summary). 인접 선택자라 이 줄이 없으면 h1 여백이 그대로다 */
#guide .detail h1 + .tagline { font-size: 15px; color: var(--sub); line-height: 1.5; margin: -4px 0 14px; }
#guide .detail .meta {
	font-size: 13px; color: #a89f98; display: flex; gap: 12px;
	padding-bottom: 20px; border-bottom: 1px solid var(--line-2);
}

#guide .hero-img { margin: 24px 0 8px; border-radius: var(--radius); overflow: hidden; background: #efe7e2; }
#guide .hero-img img { display: block; width: 100%; height: auto; }

/* 본문 리치텍스트 */
#guide .prose { font-size: 16px; line-height: 1.85; color: #403a35; }
#guide .prose h2 { font-size: 20px; font-weight: 800; margin: 34px 0 12px; letter-spacing: -.01em; scroll-margin-top: 24px; }
#guide .prose p { margin: 0 0 16px; }
#guide .prose ul, #guide .prose ol { margin: 0 0 16px; padding-left: 20px; }
#guide .prose ul li { list-style: disc; }
#guide .prose ol li { list-style: decimal; }
#guide .prose strong { font-weight: 700; }

#guide .keypoint {
	background: var(--peach); border-left: 4px solid var(--primary);
	padding: 15px 18px; border-radius: 0 8px 8px 0; margin: 22px 0;
}
#guide .keypoint b {
	background: var(--primary); color: #fff; font-size: 12px; font-weight: 800;
	padding: 3px 9px; border-radius: 5px; margin-right: 9px;
}

#guide table.gd { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14.5px; }
#guide table.gd th,
#guide table.gd td { border: 1px solid #eadfd8; padding: 11px 13px; text-align: left; }
#guide table.gd thead th {
	background: var(--peach); color: var(--primary-dark);
	border-top: 2px solid var(--primary); font-weight: 700;
}
#guide table.gd tbody th { background: #fbf7f4; font-weight: 700; width: 32%; }

#guide .checklist { border: 1px solid #eadfd8; border-radius: 10px; padding: 16px 18px; margin: 22px 0; }
#guide .checklist ul { margin: 0; padding: 0; }
/* 체크 아이콘(::before)을 쓰므로 기본 불릿은 없앤다.
   위의 '#guide .prose ul li' 보다 특이성이 높아야 해서 .prose 를 함께 적는다. */
#guide .prose .checklist li,
#guide .checklist li { list-style: none; padding: 6px 0 6px 30px; position: relative; }
#guide .checklist li::before {
	content: "✓"; position: absolute; left: 4px; top: 12px;
	color: #fff; background: var(--primary); width: 18px; height: 18px;
	border-radius: 5px; font-size: 12px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}

/* 해시태그 */
#guide .tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 2px; }
#guide .htag {
	font-size: 13px; font-weight: 600; color: var(--primary-dark);
	background: #fff; border: 1px solid #f0d6c4; padding: 6px 13px;
	border-radius: 999px; transition: .12s;
}
#guide .htag::before { content: "#"; opacity: .65; margin-right: 1px; }
#guide .htag:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* 상품 연계 CTA (linkedProduct 가 있을 때만 노출) */
#guide .product-cta {
	display: flex; align-items: center; gap: 16px;
	background: linear-gradient(100deg, #fff4ec, #fde3d1);
	border: 1px solid #f3cdb4; border-radius: 16px;
	padding: 18px 22px; margin: 28px 0 6px; color: var(--ink); transition: .15s;
}
#guide .product-cta:hover { box-shadow: 0 10px 24px rgba(210, 120, 50, .16); transform: translateY(-1px); }
#guide .product-cta .pc-txt { flex: 1; min-width: 0; }
#guide .product-cta .pc-label { font-size: 12px; font-weight: 700; color: var(--primary-dark); }
#guide .product-cta .pc-name { font-size: 17px; font-weight: 800; margin: 3px 0 2px; letter-spacing: -.01em; }
#guide .product-cta .pc-sub { font-size: 13px; color: var(--sub); }
#guide .product-cta .pc-ic {
	font-size: 28px; width: 52px; height: 52px; flex: none;
	display: flex; align-items: center; justify-content: center;
	background: #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
#guide .product-cta .pc-btn {
	flex: none; white-space: nowrap; background: var(--primary); color: #fff;
	font-weight: 800; font-size: 14px; padding: 12px 20px; border-radius: 999px;
}
#guide .product-cta:hover .pc-btn { background: var(--primary-dark); }

#guide .back-list {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 34px;
	border: 1px solid #e0d8d2; background: #fff; color: #5c544e;
	font-weight: 700; font-size: 14px; padding: 11px 20px; border-radius: 999px;
}
#guide .back-list:hover { border-color: var(--primary); color: var(--primary); }

/* 함께 보면 좋은 가이드 */
#guide .rel { margin-top: 48px; border-top: 1px solid var(--line-2); padding-top: 26px; }
#guide .rel h4 { font-size: 16px; font-weight: 800; margin: 0 0 16px; }
#guide .rel .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
/* 연관글이 1건뿐이면 반 칸만 차서 허전하므로 한 줄을 다 쓰게 한다 */
#guide .rel .grid > .card:only-child { grid-column: 1 / -1; }

/* 원고 준비 중 / 결과 없음 */
#guide .ready-box {
	border: 1px solid var(--line-2); background: #fbf7f4; border-radius: 10px;
	padding: 40px 24px; text-align: center; color: var(--sub); font-size: 14px; line-height: 1.7;
	margin: 28px 0;
}
#guide .ready-box .lbl { display: block; font-weight: 700; color: var(--primary); font-size: 15px; margin-bottom: 8px; }
#guide .ready-btn-row { margin-top: 18px; }

/* ---------- 폭 정책 ----------
   이 사이트 PC 는 body { min-width:1200px; max-width:1920px } 고정폭이다.
   (layout.css 109행) 뷰포트를 줄여도 컨테이너는 1200px 를 유지하고 가로 스크롤로 처리한다.

   따라서 여기에 뷰포트 기준 미디어쿼리를 두면 컨테이너는 1200px 인데
   카드만 2열·1열로 바뀌어 오른쪽이 비고 카드가 화면 밖으로 삐져나간다.
   헤더·GNB·푸터와도 어긋나므로 PC 에서는 3열을 유지한다.

   개발스펙 5항의 "태블릿 2열 / 모바일 1열" 은 모바일 채널(m.hwgi.kr)이 담당한다.
   -> src/m/ver2/css/guide.css (1080px 캔버스, 1열) */

@media (prefers-reduced-motion: reduce) {

	#guide .card, #guide .product-cta, #guide .chip, #guide .htag { transition: none; }
	#guide .card:hover, #guide .product-cta:hover { transform: none; }
}