/* ────────────────────────────────────────────────────────────────────────
   딱따고기연구소 — Design System Tokens & Shared Primitives
   Modern dev resource site · light theme · orange accent (#F97316)
   Ported from the "Rhymix Layout" design handoff.
   ──────────────────────────────────────────────────────────────────────── */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
	/* Surfaces */
	--ddgg-bg: #ffffff;
	--ddgg-surface: #fafafa;
	--ddgg-surface-2: #f5f5f5;
	--ddgg-surface-3: #ededed;
	--ddgg-border: #e7e7e7;
	--ddgg-border-strong: #d4d4d4;

	/* Text */
	--ddgg-text: #18181b;
	--ddgg-text-muted: #52525b;
	--ddgg-text-subtle: #a1a1aa;
	--ddgg-text-faint: #d4d4d8;

	/* Accent — orange #F97316 */
	--ddgg-accent: #f97316;
	--ddgg-accent-hover: #ea580c;
	--ddgg-accent-pressed: #c2410c;
	--ddgg-accent-soft: #fff7ed;
	--ddgg-accent-soft-2: #ffedd5;
	--ddgg-accent-text: #9a3412;

	/* Semantic */
	--ddgg-success: #16a34a;
	--ddgg-success-soft: #f0fdf4;
	--ddgg-info: #2563eb;
	--ddgg-info-soft: #eff6ff;
	--ddgg-warn: #ca8a04;
	--ddgg-warn-soft: #fefce8;
	--ddgg-danger: #dc2626;
	--ddgg-danger-soft: #fef2f2;

	/* Type */
	--ddgg-font-sans: "Pretendard Variable", Pretendard, Inter, ui-sans-serif, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
	--ddgg-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", monospace;

	/* Radius */
	--ddgg-r-xs: 4px;
	--ddgg-r-sm: 6px;
	--ddgg-r-md: 8px;
	--ddgg-r-lg: 12px;
	--ddgg-r-xl: 16px;
	--ddgg-r-pill: 999px;

	/* Shadow */
	--ddgg-sh-xs: 0 1px 2px rgba(15, 15, 20, 0.04);
	--ddgg-sh-sm: 0 1px 2px rgba(15, 15, 20, 0.05), 0 1px 3px rgba(15, 15, 20, 0.04);
	--ddgg-sh-md: 0 4px 12px rgba(15, 15, 20, 0.06), 0 2px 4px rgba(15, 15, 20, 0.04);
	--ddgg-sh-lg: 0 12px 32px rgba(15, 15, 20, 0.08), 0 4px 8px rgba(15, 15, 20, 0.04);
	--ddgg-sh-focus: 0 0 0 3px rgba(249, 115, 22, 0.18);

	/* Layout metrics */
	--ddgg-header-h: 64px;
	--ddgg-sidebar-w: 248px;
	--ddgg-container: 1280px;
	--ddgg-gutter: 32px;
}

/* ── Base reset (scoped to .ddgg so it never leaks into the admin UI) ── */
.ddgg * { box-sizing: border-box; }

.ddgg {
	background: var(--ddgg-bg);
	color: var(--ddgg-text);
	font-family: var(--ddgg-font-sans);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -0.005em;
}
.ddgg a { color: inherit; text-decoration: none; }
.ddgg button { font-family: inherit; cursor: pointer; }
.ddgg img { display: block; max-width: 100%; }
.ddgg h1, .ddgg h2, .ddgg h3, .ddgg h4, .ddgg h5 { margin: 0; }

/* 텍스트 드래그 선택색 — primary 액센트 */
.ddgg ::selection { background: var(--ddgg-accent); color: #fff; }
.ddgg ::-moz-selection { background: var(--ddgg-accent); color: #fff; }

/* ────────────────────────────────────────────────────────────────────────
   Utility
   ──────────────────────────────────────────────────────────────────────── */

.ddgg .container {
	max-width: var(--ddgg-container);
	margin: 0 auto;
	padding: 0 var(--ddgg-gutter);
}

.ddgg .stack  { display: flex; flex-direction: column; }
.ddgg .row    { display: flex; align-items: center; }
.ddgg .grow   { flex: 1; }
.ddgg .muted  { color: var(--ddgg-text-muted); }
.ddgg .subtle { color: var(--ddgg-text-subtle); }
.ddgg .mono   { font-family: var(--ddgg-font-mono); }

.ddgg .divider { height: 1px; background: var(--ddgg-border); margin: 0; border: 0; }

/* ────────────────────────────────────────────────────────────────────────
   Buttons
   ──────────────────────────────────────────────────────────────────────── */

.ddgg .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 5px 14px !important; height: unset !important;
	border-radius: var(--ddgg-r-md); border: 1px solid transparent;
	font-size: 13px; font-weight: 600; color: var(--ddgg-text);
	transition: background .15s, border-color .15s, color .15s, transform .05s;
	white-space: nowrap;
}
.ddgg .btn:active { transform: translateY(1px); }
.ddgg .btn-primary { background: var(--ddgg-accent); color: #fff; }
.ddgg .btn-primary:hover { background: var(--ddgg-accent-hover); color: #fff; }
.ddgg .btn-secondary { background: var(--ddgg-text); color: #fff; }
.ddgg .btn-secondary:hover { background: #27272a; color: #fff; }
.ddgg .btn-ghost { background: transparent; color: var(--ddgg-text); }
.ddgg .btn-ghost:hover { background: var(--ddgg-surface-2); }
.ddgg .btn-outline { background: #fff; color: var(--ddgg-text); border-color: var(--ddgg-border-strong); }
.ddgg .btn-outline:hover { background: var(--ddgg-surface-2); }
.ddgg .btn-sm { padding: 5px 10px !important; height: unset !important; font-size: 12px; }
.ddgg .btn-lg { padding: 5px 18px !important; height: unset !important; font-size: 14px; }
.ddgg .btn-icon { width: 36px; padding: 5px 0 !important; height: unset !important; }

/* ────────────────────────────────────────────────────────────────────────
   Chips, category tags, badges (shared by board + home)
   ──────────────────────────────────────────────────────────────────────── */

.ddgg .chip {
	display: inline-flex; align-items: center; gap: 6px;
	height: 28px; padding: 0 10px;
	border-radius: var(--ddgg-r-pill);
	background: #fff; border: 1px solid var(--ddgg-border);
	color: var(--ddgg-text-muted); font-size: 12.5px; font-weight: 500;
	transition: background .12s, color .12s, border-color .12s;
}
.ddgg .chip:hover { background: var(--ddgg-surface-2); color: var(--ddgg-text); }
.ddgg .chip.active { background: var(--ddgg-text); color: #fff; border-color: var(--ddgg-text); }

.ddgg .cat-tag {
	display: inline-flex; align-items: center;
	height: 22px; padding: 0 8px;
	background: var(--ddgg-surface-2); color: var(--ddgg-text-muted);
	border-radius: var(--ddgg-r-xs); font-size: 11.5px; font-weight: 600;
	width: fit-content;
}
/* category colour variants — assigned cyclically by category index */
.ddgg .cat-tag.c1 { background: #ecfdf5; color: #047857; }
.ddgg .cat-tag.c2 { background: #eef2ff; color: #4338ca; }
.ddgg .cat-tag.c3 { background: var(--ddgg-accent-soft); color: var(--ddgg-accent-text); }
.ddgg .cat-tag.c4 { background: #fdf4ff; color: #a21caf; }
.ddgg .cat-tag.c5 { background: #ecfeff; color: #0e7490; }
.ddgg .cat-tag.notice { background: #18181b; color: #fff; }

.ddgg .badge-hot {
	display: inline-flex; align-items: center; height: 18px; padding: 0 5px;
	background: var(--ddgg-accent); color: #fff; border-radius: 3px;
	font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}
.ddgg .badge-new {
	display: inline-flex; align-items: center; height: 18px; padding: 0 5px;
	background: var(--ddgg-success); color: #fff; border-radius: 3px;
	font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}
.ddgg .badge-pin { width: 16px; color: var(--ddgg-accent); display: inline-flex; }

.ddgg .avatar {
	border-radius: 50%;
	background: linear-gradient(135deg, #fde68a, #f97316); color: #fff;
	display: grid; place-items: center; font-weight: 700; flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────────────
   Thumbnail placeholder graphics (used when a post has no image)
   ──────────────────────────────────────────────────────────────────────── */

.ddgg .thumb-ph {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	background: linear-gradient(135deg, var(--ddgg-surface-2), var(--ddgg-surface-3));
	color: var(--ddgg-text-subtle);
	font-family: var(--ddgg-font-mono); font-size: 11px; font-weight: 600;
	letter-spacing: 0.05em;
}
.ddgg .thumb-ph::before {
	content: ''; position: absolute; inset: 0;
	background-image:
		linear-gradient(45deg, rgba(255,255,255,0.5) 25%, transparent 25%),
		linear-gradient(-45deg, rgba(255,255,255,0.5) 25%, transparent 25%);
	background-size: 16px 16px;
	background-position: 0 0, 0 8px;
	opacity: 0.35;
}
.ddgg .thumb-ph > span { position: relative; z-index: 1; padding: 3px 8px; background: rgba(255,255,255,0.7); border-radius: 4px; }

.ddgg .thumb-c1 { background: linear-gradient(135deg, #ffedd5, #fdba74); color: #9a3412; }
.ddgg .thumb-c2 { background: linear-gradient(135deg, #dbeafe, #93c5fd); color: #1e40af; }
.ddgg .thumb-c3 { background: linear-gradient(135deg, #d1fae5, #6ee7b7); color: #065f46; }
.ddgg .thumb-c4 { background: linear-gradient(135deg, #ede9fe, #c4b5fd); color: #5b21b6; }
.ddgg .thumb-c5 { background: linear-gradient(135deg, #fce7f3, #f9a8d4); color: #9d174d; }
.ddgg .thumb-c6 { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #1e293b; }
.ddgg .thumb-c7 { background: linear-gradient(135deg, #fef3c7, #fcd34d); color: #92400e; }