/* SHK Reader — 단일 뷰(온사이트 리더) 스타일 (기획서 §11.2~11.3) */
:root {
	--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-r-full: 9999px;
	--shk-fs-sm: .8125rem;
	--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;
}
html.shk-dark {
	--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;
	--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: var(--shk-bg); color: var(--shk-text); }

.shk-chip[data-topic="tech"]{--card-color:var(--t-tech);} .shk-chip[data-topic="ai"]{--card-color:var(--t-ai);}
.shk-chip[data-topic="dev"]{--card-color:var(--t-dev);} .shk-chip[data-topic="hardware"]{--card-color:var(--t-hardware);}
.shk-chip[data-topic="games"]{--card-color:var(--t-games);} .shk-chip[data-topic="indie"]{--card-color:var(--t-indie);}
.shk-chip[data-topic="business"]{--card-color:var(--t-business);} .shk-chip[data-topic="startup"]{--card-color:var(--t-startup);}
.shk-chip[data-topic="trends"]{--card-color:var(--t-trends);} .shk-chip[data-topic="community"]{--card-color:var(--t-community);}

/* 부드러운 페이지 전환(크로스도큐먼트, 지원 브라우저만 — 기획서 §10.7) */
@view-transition { navigation: auto; }

.shk-reader { max-width: 46rem; margin: 1.5rem auto 3.5rem; padding: 0 18px;
	font-family: var(--shk-font); color: var(--shk-text); }
.shk-reader__back { display:inline-block; margin:0 0 18px; color:var(--shk-text-2);
	text-decoration:none; font-size:var(--shk-fs-sm); }
.shk-reader__back:hover { color:var(--shk-accent); }
.shk-reader__hero { aspect-ratio:24/9; border-radius:14px; margin:14px 0 24px; overflow:hidden;
	display:flex; align-items:flex-end; padding:18px; view-transition-name: shk-hero;
	background:
		radial-gradient(120% 130% at 16% 10%, oklch(74% .15 var(--h1, 250)) 0%, transparent 55%),
		linear-gradient(135deg, oklch(60% .19 var(--h1, 250)), oklch(54% .2 var(--h2, 290))); }
.shk-reader__hi { font-size:3.4rem; font-weight:800; color:#fff; opacity:.3; letter-spacing:-.02em; user-select:none; }
.shk-reader__meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center;
	font-size:var(--shk-fs-sm); color:var(--shk-text-2); margin-bottom:22px;
	padding-bottom:16px; border-bottom:1px solid var(--shk-border); }
.shk-reader .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-reader__excerpt { font-size:1.0625rem; line-height:1.85; color:var(--shk-text-2);
	word-break:keep-all; overflow-wrap:anywhere; }
.shk-reader__body { font-size:1.0625rem; line-height:1.85; color:var(--shk-text); word-break:keep-all; overflow-wrap:anywhere; }
.shk-reader__body p { margin:0 0 1.15em; }
.shk-reader__body h2, .shk-reader__body h3, .shk-reader__body h4 { line-height:1.4; margin:1.6em 0 .6em; }
.shk-reader__body img { max-width:100%; height:auto; border-radius:10px; margin:1em 0; }
.shk-reader__body a { color:var(--shk-accent); }
.shk-reader__body blockquote { margin:1.2em 0; padding:.2em 0 .2em 1em; border-left:3px solid var(--shk-accent); color:var(--shk-text-2); }
.shk-reader__body pre { overflow-x:auto; background:var(--shk-surface-2); padding:14px; border-radius:10px; }
.shk-reader__cta { margin:2rem 0 1.2rem; }
.shk-btn { display:inline-block; background:var(--shk-accent); color:#fff; padding:12px 26px;
	border-radius:var(--shk-r-full); text-decoration:none; font-weight:600; }
.shk-reader__attr { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--shk-border);
	font-size:var(--shk-fs-sm); color:var(--shk-text-3); word-break:break-all; }
.shk-reader__attr a { color:var(--shk-text-3); }

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