/* ────────────────────────────────────────────────────────────────────────
   딱따고기연구소 — Home page blocks
   hero · section headers · category grid · featured · dual panels · CTA
   These styles support the markup pasted into the index page module.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.ddgg .hero { padding: 40px 0 16px; }
.ddgg .hero-h1 {
	font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15;
	margin: 0 0 10px;
}
.ddgg .hero-h1 .hl {
	position: relative; display: inline-block; color: var(--ddgg-accent);
	--hl-mw: 0px; --hl-mh: 0px; --hl-mx: 0px; --hl-my: 0px;
	--hl-blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg transform='translate(112,104)'%3E%3Cpath fill='%23fff' d='M40,-68C53,-61,65,-52,72,-40C79,-28,81,-14,80,0C79,14,75,28,67,40C59,52,47,62,34,69C21,76,10,80,-3,82C-16,84,-32,84,-45,77C-58,70,-68,56,-75,42C-82,28,-86,14,-85,-1C-84,-16,-78,-32,-69,-44C-60,-56,-48,-64,-35,-70C-22,-76,-11,-80,2,-81C15,-82,27,-75,40,-68Z'/%3E%3C/g%3E%3Ccircle cx='44' cy='166' r='10' fill='%23fff'/%3E%3Ccircle cx='176' cy='58' r='6' fill='%23fff'/%3E%3C/svg%3E");
}
/* SVG 얼룩과 정확히 겹치는 부분만 흰색 (마스크 = 얼룩 모양, JS가 위치 정렬) */
/* 마스크도 얼룩과 동일한 13초 squish 로 함께 움직임 (중심 기준 scale) */
.ddgg .hero-h1 .hl::after {
	content: attr(data-text);
	position: absolute; left: 0; top: 0;
	color: #fff; pointer-events: none; white-space: nowrap;
	-webkit-mask-image: var(--hl-blob); mask-image: var(--hl-blob);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: var(--hl-mw) var(--hl-mh); mask-size: var(--hl-mw) var(--hl-mh);
	-webkit-mask-position: var(--hl-mx) var(--hl-my); mask-position: var(--hl-mx) var(--hl-my);
	animation: ddggHlSquish 13s ease-in-out infinite;
}
@keyframes ddggHlSquish {
	0%, 100% {
		-webkit-mask-size: var(--hl-mw) var(--hl-mh); mask-size: var(--hl-mw) var(--hl-mh);
		-webkit-mask-position: var(--hl-mx) var(--hl-my); mask-position: var(--hl-mx) var(--hl-my);
	}
	30% {
		-webkit-mask-size: calc(var(--hl-mw) * 1.06) calc(var(--hl-mh) * 0.95); mask-size: calc(var(--hl-mw) * 1.06) calc(var(--hl-mh) * 0.95);
		-webkit-mask-position: calc(var(--hl-mx) - var(--hl-mw) * 0.03) calc(var(--hl-my) + var(--hl-mh) * 0.025); mask-position: calc(var(--hl-mx) - var(--hl-mw) * 0.03) calc(var(--hl-my) + var(--hl-mh) * 0.025);
	}
	60% {
		-webkit-mask-size: calc(var(--hl-mw) * 0.95) calc(var(--hl-mh) * 1.06); mask-size: calc(var(--hl-mw) * 0.95) calc(var(--hl-mh) * 1.06);
		-webkit-mask-position: calc(var(--hl-mx) + var(--hl-mw) * 0.025) calc(var(--hl-my) - var(--hl-mh) * 0.03); mask-position: calc(var(--hl-mx) + var(--hl-mw) * 0.025) calc(var(--hl-my) - var(--hl-mh) * 0.03);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ddgg .hero-h1 .hl::after { animation: none; }
}
.ddgg .hero-sub { color: var(--ddgg-text-muted); font-size: 15px; max-width: 640px; }
.ddgg .hero-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

/* ── Section header ───────────────────────────────────────────────────── */
.ddgg .section-h {
	display: flex; align-items: flex-end; justify-content: space-between;
	margin: 36px 0 14px; gap: 16px;
}
.ddgg .section-h h2 {
	font-size: 18px; font-weight: 800; letter-spacing: -0.015em; margin: 0;
	display: flex; align-items: center; gap: 8px;
}
.ddgg .section-h h2 .ic { color: var(--ddgg-accent); display: inline-flex; }
.ddgg .section-h .more {
	font-size: 12.5px; color: var(--ddgg-text-muted);
	display: inline-flex; gap: 4px; align-items: center; white-space: nowrap;
}
.ddgg .section-h .more:hover { color: var(--ddgg-accent); }

/* ── Category cards ───────────────────────────────────────────────────── */
.ddgg .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ddgg .cat-card {
	display: flex; flex-direction: column; gap: 6px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--ddgg-border);
	border-radius: var(--ddgg-r-lg);
	transition: transform .15s, border-color .15s, box-shadow .15s;
	position: relative; overflow: hidden;
}
.ddgg .cat-card:hover { transform: translateY(-2px); border-color: var(--ddgg-accent); box-shadow: var(--ddgg-sh-md); }
.ddgg .cat-card .ic-wrap {
	width: 36px; height: 36px; border-radius: var(--ddgg-r-md);
	background: var(--ddgg-accent-soft); color: var(--ddgg-accent);
	display: grid; place-items: center; margin-bottom: 4px;
}
.ddgg .cat-card .name { font-size: 14.5px; font-weight: 700; }
.ddgg .cat-card .meta { font-size: 12px; color: var(--ddgg-text-muted); }
.ddgg .cat-card .count {
	position: absolute; top: 14px; right: 16px;
	font-family: var(--ddgg-font-mono); font-size: 11.5px; font-weight: 600;
	color: var(--ddgg-text-subtle);
}

/* ── Featured cards (추천 자료) ───────────────────────────────────────── */
.ddgg .featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ddgg .feat-card {
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--ddgg-border);
	border-radius: var(--ddgg-r-lg);
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}
.ddgg .feat-card:hover { border-color: var(--ddgg-border-strong); box-shadow: var(--ddgg-sh-sm); }
.ddgg .feat-thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; background: var(--ddgg-surface-2); }
.ddgg .feat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ddgg .feat-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.ddgg .feat-rank {
	font-family: var(--ddgg-font-mono); font-size: 11px; font-weight: 700;
	color: var(--ddgg-accent); letter-spacing: 0.04em;
}
.ddgg .feat-title {
	font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ddgg .feat-intro {
	font-size: 12.5px; color: var(--ddgg-text-muted); line-height: 1.45; margin-top: 2px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ddgg .feat-meta { font-size: 11.5px; color: var(--ddgg-text-subtle); margin-top: 4px; }

/* 추천 자료 스와이퍼 — 한 화면 4개, 가로 스와이프로 최대 10개 */
.ddgg .feat-swiper { position: relative; }
.ddgg .feat-track {
	display: flex; gap: 14px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding: 2px 2px 8px; margin: 0 -2px;
	scrollbar-width: none; -ms-overflow-style: none;
}
.ddgg .feat-track::-webkit-scrollbar { display: none; }
.ddgg .feat-track .feat-card { flex: 0 0 calc((100% - 42px) / 4); scroll-snap-align: start; }
.ddgg .feat-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 36px; height: 36px; border-radius: 50%;
	background: #fff; border: 1px solid var(--ddgg-border); box-shadow: var(--ddgg-sh-md);
	display: grid; place-items: center; color: var(--ddgg-text); cursor: pointer;
	transition: background .12s;
}
.ddgg .feat-nav:hover { background: var(--ddgg-surface-2); }
.ddgg .feat-nav.prev { left: -14px; }
.ddgg .feat-nav.next { right: -14px; }
@media (max-width: 1024px) {
	.ddgg .feat-track .feat-card { flex-basis: calc((100% - 14px) / 2); }
	.ddgg .feat-nav { display: none; }
}
@media (max-width: 560px) {
	.ddgg .feat-track .feat-card { flex-basis: 80%; }
}

/* ── Dual panels (공지 + 최근) ────────────────────────────────────────── */
.ddgg .dual { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ddgg .panel {
	background: #fff;
	border: 1px solid var(--ddgg-border);
	border-radius: var(--ddgg-r-lg);
	overflow: hidden;
}
.ddgg .panel-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 18px; border-bottom: 1px solid var(--ddgg-border);
}
.ddgg .panel-head h3 { font-size: 14px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 6px; }
.ddgg .panel-head .more { font-size: 11.5px; color: var(--ddgg-text-subtle); }
.ddgg .panel-head .more:hover { color: var(--ddgg-accent); }
.ddgg .panel-body { padding: 4px 0; }
.ddgg .panel-row {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 18px; font-size: 13px;
}
.ddgg .panel-row .pdot { width: 4px; height: 4px; border-radius: 50%; background: var(--ddgg-text-faint); flex-shrink: 0; }
.ddgg .panel-row:hover .ptitle { color: var(--ddgg-accent); }
.ddgg .panel-row .ptitle {
	flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: var(--ddgg-text); font-weight: 500;
}
.ddgg .panel-row .pmeta { font-size: 11.5px; color: var(--ddgg-text-subtle); font-variant-numeric: tabular-nums; }
.ddgg .panel-row .ptag {
	font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 3px;
	background: var(--ddgg-surface-2); color: var(--ddgg-text-muted); flex-shrink: 0;
}
.ddgg .panel-row .pboard {
	font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; flex-shrink: 0;
	background: var(--ddgg-accent-soft); color: var(--ddgg-accent-text);
	max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── CTA banner ───────────────────────────────────────────────────────── */
.ddgg .cta {
	margin-top: 32px; padding: 28px 32px;
	background: linear-gradient(135deg, #fff7ed, #ffedd5 70%, #fed7aa);
	border: 1px solid var(--ddgg-accent-soft-2);
	border-radius: var(--ddgg-r-xl);
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.ddgg .cta-title { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; color: var(--ddgg-accent-text); }
.ddgg .cta-desc { font-size: 13px; color: var(--ddgg-accent-text); opacity: 0.85; margin-top: 4px; }
.ddgg .cta-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ddgg .cta .btn-outline { border-color: var(--ddgg-accent); color: var(--ddgg-accent-text); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.ddgg .cat-grid { grid-template-columns: repeat(2, 1fr); }
	.ddgg .featured { grid-template-columns: 1fr; }
	.ddgg .dual { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.ddgg .hero-h1 { font-size: 30px; }
	.ddgg .cat-grid { grid-template-columns: 1fr 1fr; }
}