/* SHK Feed — 디자인 토큰 + 카드 + 하이브리드 메이슨리 (기획서 §10.1~10.5) */
.shk-feed {
	--shk-bg: #FAFAFA; --shk-surface: #FFFFFF; --shk-surface-2: #F2F3F5; --shk-border: #E5E7EB;
	--shk-text: #18181B; --shk-text-2: #52525B; --shk-text-3: #9CA3AF; --shk-accent: #4F46E5;
	--shk-gap: 16px; --shk-card-pad: 14px; --shk-r-lg: 14px; --shk-r-full: 9999px;
	--shk-sh-1: 0 1px 2px rgba(0,0,0,.06); --shk-sh-2: 0 4px 14px rgba(0,0,0,.10);
	--shk-container-max: 1720px;
	--shk-fs-sm: .8125rem; --shk-fs-base: .875rem; --shk-fs-lg: 1.125rem;
	--shk-font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif;
	--t-tech:#475569; --t-ai:#7C3AED; --t-dev:#2563EB; --t-hardware:#0D9488; --t-games:#EA580C;
	--t-indie:#E11D48; --t-business:#B45309; --t-startup:#16A34A; --t-trends:#0284C7; --t-community:#C026D3;
	max-width: var(--shk-container-max); margin: 0 auto; padding: 0 16px;
	font-family: var(--shk-font); color: var(--shk-text);
}
.shk-feed *, .shk-feed *::before, .shk-feed *::after { box-sizing: border-box; }

html.shk-dark .shk-feed {
	--shk-bg:#0E0F11; --shk-surface:#18181B; --shk-surface-2:#232327; --shk-border:#2A2A2E;
	--shk-text:#F4F4F5; --shk-text-2:#A1A1AA; --shk-text-3:#71717A; --shk-accent:#818CF8;
	--shk-sh-1:0 1px 2px rgba(0,0,0,.3); --shk-sh-2:0 4px 14px rgba(0,0,0,.45);
	--t-tech:#94A3B8; --t-ai:#A78BFA; --t-dev:#60A5FA; --t-hardware:#2DD4BF; --t-games:#FB923C;
	--t-indie:#FB7185; --t-business:#FBBF24; --t-startup:#4ADE80; --t-trends:#38BDF8; --t-community:#E879F9;
}
html.shk-dark body { background: #0E0F11; }

/* 토픽 색 매핑 */
.shk-card[data-topic="tech"], .shk-chip[data-topic="tech"] { --card-color: var(--t-tech); }
.shk-card[data-topic="ai"], .shk-chip[data-topic="ai"] { --card-color: var(--t-ai); }
.shk-card[data-topic="dev"], .shk-chip[data-topic="dev"] { --card-color: var(--t-dev); }
.shk-card[data-topic="hardware"], .shk-chip[data-topic="hardware"] { --card-color: var(--t-hardware); }
.shk-card[data-topic="games"], .shk-chip[data-topic="games"] { --card-color: var(--t-games); }
.shk-card[data-topic="indie"], .shk-chip[data-topic="indie"] { --card-color: var(--t-indie); }
.shk-card[data-topic="business"], .shk-chip[data-topic="business"] { --card-color: var(--t-business); }
.shk-card[data-topic="startup"], .shk-chip[data-topic="startup"] { --card-color: var(--t-startup); }
.shk-card[data-topic="trends"], .shk-chip[data-topic="trends"] { --card-color: var(--t-trends); }
.shk-card[data-topic="community"], .shk-chip[data-topic="community"] { --card-color: var(--t-community); }

/* 탭 바 */
.shk-tabs { display:flex; gap:8px; align-items:center; overflow-x:auto; padding:14px 0;
	position:sticky; top:0; background:var(--shk-bg); z-index:5; scrollbar-width:none; }
.shk-tabs::-webkit-scrollbar { display:none; }
.shk-tab { flex:0 0 auto; border:1px solid var(--shk-border); background:var(--shk-surface);
	color:var(--shk-text-2); font:500 var(--shk-fs-base)/1 var(--shk-font);
	padding:8px 14px; border-radius:var(--shk-r-full); cursor:pointer; white-space:nowrap; }
.shk-tab:hover { color:var(--shk-text); }
.shk-tab.is-active { background:var(--shk-accent); border-color:var(--shk-accent); color:#fff; }
.shk-darktoggle { margin-left:auto; flex:0 0 auto; border:1px solid var(--shk-border);
	background:var(--shk-surface); color:var(--shk-text-2); border-radius:var(--shk-r-full);
	width:36px; height:36px; cursor:pointer; font-size:16px; }

/* 메이슨리 — CSS columns (기획서 §10.5 폴백 기본) */
.shk-grid { column-gap: var(--shk-gap); columns: 1; }
@media (min-width:640px)  { .shk-grid { columns: 2; } }
@media (min-width:1024px) { .shk-grid { columns: 3; } }
@media (min-width:1440px) { .shk-grid { columns: 4; } }
@media (min-width:1920px) { .shk-grid { columns: 5; } }

/* 카드 */
.shk-card { position:relative; break-inside:avoid; background:var(--shk-surface);
	border:1px solid var(--shk-border); border-radius:var(--shk-r-lg); margin:0 0 var(--shk-gap);
	box-shadow:var(--shk-sh-1); overflow:hidden; transition:box-shadow .18s ease, transform .18s ease; }
.shk-card:hover { box-shadow:var(--shk-sh-2); }
.shk-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
	background:var(--card-color, var(--shk-border)); }
.shk-card__main { display:block; text-decoration:none; color:inherit; }
.shk-card__cover { aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; overflow:hidden;
	background:
		radial-gradient(130% 130% at 18% 12%, oklch(72% .15 var(--h1, 250)) 0%, transparent 55%),
		linear-gradient(135deg, oklch(60% .19 var(--h1, 250)), oklch(54% .2 var(--h2, 290))); }
.shk-card__ci { font-size:2.6rem; font-weight:800; color:#fff; opacity:.28; letter-spacing:-.02em; user-select:none; }
.shk-card__cover { position:relative; }
.shk-card__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border:0; }
.shk-sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.shk-card__body { padding:var(--shk-card-pad) var(--shk-card-pad) var(--shk-card-pad) calc(var(--shk-card-pad) + 3px); }
.shk-card__src { display:flex; align-items:center; gap:6px; font-size:var(--shk-fs-sm); color:var(--shk-text-2); margin-bottom:8px; }
.shk-card__dot { width:8px; height:8px; border-radius:50%; background:var(--card-color, var(--shk-text-3)); flex:0 0 auto; }
.shk-card__time { color:var(--shk-text-3); margin-left:auto; }
.shk-card__title { font:600 var(--shk-fs-lg)/1.34 var(--shk-font); margin:0 0 8px; letter-spacing:-.01em;
	word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance; }
.shk-card__excerpt { font-size:var(--shk-fs-base); line-height:1.6; color:var(--shk-text-2); margin:0 0 12px;
	display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; word-break:keep-all; }
.shk-card__meta { display:flex; align-items:center; gap:10px; }
.shk-chip { font-size:var(--shk-fs-sm); font-weight:600; padding:3px 9px; border-radius:var(--shk-r-full);
	color:var(--card-color, var(--shk-text-2));
	background:color-mix(in srgb, var(--card-color, var(--shk-text-3)) 13%, transparent); }
.shk-card__score { font-size:var(--shk-fs-sm); font-weight:700; color:var(--shk-accent); }
.shk-card__cmt { font-size:var(--shk-fs-sm); color:var(--shk-text-3); margin-left:auto; }

/* 정렬 토글(최신/인기) */
.shk-toolbar { display:flex; justify-content:flex-end; padding:0 2px 12px; }
.shk-sort { display:inline-flex; gap:2px; background:var(--shk-surface-2); border:1px solid var(--shk-border);
	border-radius:var(--shk-r-full); padding:3px; }
.shk-sortbtn { border:0; background:transparent; color:var(--shk-text-2); cursor:pointer;
	font:600 var(--shk-fs-sm)/1 var(--shk-font); padding:6px 16px; border-radius:var(--shk-r-full); }
.shk-sortbtn:hover { color:var(--shk-text); }
.shk-sortbtn.is-active { background:var(--shk-surface); color:var(--shk-text); box-shadow:var(--shk-sh-1); }
.shk-card__ext { position:absolute; top:10px; right:10px; width:30px; height:30px; display:flex;
	align-items:center; justify-content:center; border-radius:50%; background:var(--shk-surface-2);
	color:var(--shk-text-2); text-decoration:none; opacity:0; transition:opacity .15s ease; font-size:14px; }
.shk-card:hover .shk-card__ext, .shk-card:focus-within .shk-card__ext { opacity:1; }
@media (hover:none) { .shk-card__ext { opacity:1; } }

/* 더보기 / 상태 */
.shk-more { display:block; margin:8px auto 48px; padding:12px 28px; border:1px solid var(--shk-border);
	background:var(--shk-surface); color:var(--shk-text); border-radius:var(--shk-r-full); cursor:pointer;
	font:600 var(--shk-fs-base) var(--shk-font); }
.shk-more[hidden] { display:none; }
.shk-sentinel { height:1px; }
.shk-feed__empty, .shk-feed__end { text-align:center; color:var(--shk-text-3); padding:30px; font-size:var(--shk-fs-base); }

@media (prefers-reduced-motion: reduce) {
	.shk-card, .shk-card__ext { transition:none; }
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* 부드러운 피드 ↔ 리더 페이지 전환 (기획서 §10.7, 지원 브라우저만) */
@view-transition { navigation: auto; }

/* 단일 뷰 리더 브리지 (정식 리더는 M4) */
.shk-reader { max-width:42rem; margin:1.5rem auto; }
.shk-reader__excerpt { font-size:1.05rem; line-height:1.8; }
.shk-reader__cta { margin:1.2rem 0; }
.shk-btn { display:inline-block; background:#4F46E5; color:#fff; padding:10px 22px; border-radius:9999px;
	text-decoration:none; font-weight:600; }
.shk-reader__src { color:#71717A; font-size:.85rem; }