/* ==========================================================================
   시크릿DNS 랜딩 — index.v2.php 전용. 모든 클래스는 sd- 접두어
   ========================================================================== */

:root {
	--bg: #070b14;
	--bg-2: #0b1220;
	--surface: #0f1729;
	--surface-2: #131d33;
	--line: rgba(148, 163, 184, .14);
	--line-2: rgba(148, 163, 184, .26);
	--text: #e7edf7;
	--muted: #95a3ba;
	--faint: #64748b;
	--cyan: #3ad7f6;
	--cyan-dim: rgba(58, 215, 246, .14);
	--green: #3ee0a4;
	--green-dim: rgba(62, 224, 164, .14);
	--red: #ff7b7b;
	--red-dim: rgba(255, 123, 123, .14);
	--radius: 16px;
	--wrap: 1160px;
	--top: 64px;
	--font: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
	--mono: ui-monospace, "Cascadia Mono", Consolas, "D2Coding", monospace;
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 12px); -webkit-text-size-adjust: 100%; }
body.sd {
	margin: 0; background: var(--bg); color: var(--text);
	font: 16px/1.7 var(--font); letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere;
	-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--cyan); text-underline-offset: 3px; }
b, strong { font-weight: 700; color: #fff; }
code { font-family: var(--mono); font-size: .88em; background: rgba(148,163,184,.12); padding: .1em .4em; border-radius: 6px; color: #cfe6f5; }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.03em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

.sd-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sd-narrow { max-width: 820px; }
.sd-small { font-size: 14px; color: var(--muted); }
.sd-dim { color: var(--faint); }
.sd-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sd-skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100; background: var(--cyan); color: #00131a; padding: 8px 14px; border-radius: 8px; }
.sd-skip:focus { top: 8px; }

/* ---------- 버튼 · 배지 ---------- */
.sd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent;
	background: linear-gradient(180deg, #5ce3fb, #22c3e6); color: #021219;
	font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap;
	box-shadow: 0 8px 30px -10px rgba(58, 215, 246, .7), inset 0 1px 0 rgba(255,255,255,.4);
	transition: transform .2s, box-shadow .2s;
}
.sd-btn svg { width: 20px; height: 20px; }
.sd-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(58, 215, 246, .85), inset 0 1px 0 rgba(255,255,255,.4); }
.sd-btn--ghost { background: rgba(148,163,184,.08); color: var(--text); border-color: var(--line-2); box-shadow: none; }
.sd-btn--ghost:hover { background: rgba(148,163,184,.14); box-shadow: none; }
.sd-btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; border-radius: 10px; }

.sd-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: rgba(148,163,184,.12); color: var(--muted); white-space: nowrap; }
.sd-badge--c { background: var(--cyan-dim); color: var(--cyan); }
.sd-badge--g { background: var(--green-dim); color: var(--green); }

/* ---------- 상단 ---------- */
.sd-top {
	position: sticky; top: 0; z-index: 50; height: var(--top);
	background: rgba(7, 11, 20, .72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid transparent; transition: border-color .3s;
}
.sd-top.is-stuck { border-bottom-color: var(--line); }
.sd-top__in { height: 100%; display: flex; align-items: center; gap: 24px; }
.sd-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; font-size: 18px; text-decoration: none; margin: 0; }
.sd-brand__icon { width: 20px; height: 20px; }
.sd-nav { display: flex; gap: 4px; margin-left: auto; }
.sd-nav a { color: var(--muted); text-decoration: none; font-size: 15px; padding: 6px 12px; border-radius: 8px; transition: color .2s, background .2s; }
.sd-nav a:hover { color: var(--text); background: rgba(148,163,184,.08); }

/* ---------- HERO ---------- */
.sd-hero { position: relative; overflow: hidden; padding: 72px 0 40px; isolation: isolate; }
.sd-hero::before {
	content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -2;
	background:
		radial-gradient(48% 42% at 72% 38%, rgba(58, 215, 246, .16), transparent 70%),
		radial-gradient(36% 36% at 18% 72%, rgba(62, 224, 164, .09), transparent 70%);
}
.sd-hero__net { position: absolute; inset: 0; z-index: -1; opacity: .9; }
.sd-hero__net svg { width: 100%; height: 100%; }
.sd-net { fill: none; stroke: rgba(58, 215, 246, .22); stroke-width: 1.2; stroke-dasharray: 2 10; animation: sd-dash 30s linear infinite; }
.sd-net--b { stroke: rgba(62, 224, 164, .16); animation-duration: 44s; animation-direction: reverse; }
.sd-net--c { stroke: rgba(148, 163, 184, .14); animation-duration: 60s; }
@keyframes sd-dash { to { stroke-dashoffset: -600; } }

.sd-hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.sd-tags { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sd-tags li { font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-2); padding: 4px 12px; border-radius: 99px; background: rgba(15, 23, 41, .6); }
.sd-hero__title { font-size: clamp(36px, 5.4vw, 64px); font-weight: 800; letter-spacing: -.045em; margin-bottom: 24px; }
.sd-line { display: block; }
.sd-hero__title em { font-style: normal; background: linear-gradient(100deg, var(--cyan), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sd-hero__lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); max-width: 34em; margin-bottom: 32px; }
.sd-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.sd-hero__meta { font-size: 14px; color: var(--faint); margin: 0; }

.sd-hero__visual { perspective: 1400px; }
.sd-shot {
	--rx: 4deg; --ry: -10deg;
	position: relative; margin: 0 auto; max-width: 360px;
	transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
	transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.sd-shot img {
	width: 100%; height: auto; border-radius: 10px;
	box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -30px rgba(0,0,0,.8), 0 0 120px -30px rgba(226, 178, 63, .35);
}
.sd-shot__chip {
	position: absolute; display: inline-flex; align-items: center; gap: 8px;
	font: 600 13px/1 var(--font); color: var(--text); white-space: nowrap;
	padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2);
	background: rgba(13, 21, 38, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	box-shadow: 0 16px 40px -16px rgba(0,0,0,.8);
	transform: translateZ(60px);
	animation: sd-float 6s ease-in-out infinite;
}
.sd-shot__chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-dim); }
.sd-shot__chip--dns { left: -28px; top: 26%; }
.sd-shot__chip--sni { right: -24px; bottom: 18%; animation-delay: -3s; }
.sd-shot__chip--sni i { background: var(--green); box-shadow: 0 0 0 4px var(--green-dim); }
@keyframes sd-float { 50% { translate: 0 -8px; } }

.sd-notvpn {
	margin: 56px 0 0; padding: 18px 22px; border-radius: 14px;
	border: 1px solid var(--line); background: linear-gradient(90deg, rgba(15,23,41,.9), rgba(15,23,41,.4));
	color: var(--muted); font-size: 15px;
}
.sd-notvpn strong { margin-right: 6px; }

/* 첫 화면 등장 (JS 가 있을 때만) */
.sd-js .sd-line, .sd-js .sd-tags, .sd-js .sd-hero__lead, .sd-js .sd-cta, .sd-js .sd-hero__meta, .sd-js .sd-shot img {
	animation: sd-rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.sd-js .sd-tags { animation-delay: .05s; }
.sd-js .sd-line:nth-child(1) { animation-delay: .12s; }
.sd-js .sd-line:nth-child(2) { animation-delay: .22s; }
.sd-js .sd-hero__lead { animation-delay: .34s; }
.sd-js .sd-cta { animation-delay: .44s; }
.sd-js .sd-hero__meta { animation-delay: .52s; }
.sd-js .sd-shot img { animation-name: sd-rise-shot; animation-duration: 1.2s; animation-delay: .2s; }
@keyframes sd-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes sd-rise-shot { from { opacity: 0; transform: translateY(40px) scale(.96); } }

/* ---------- 섹션 공통 ---------- */
.sd-sec { padding: 112px 0; border-top: 1px solid var(--line); }
.sd-head { text-align: center; margin: 0 auto 56px; max-width: 760px; }
.sd-head--left { text-align: start; margin: 0 0 24px; }
.sd-head h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; }
.sd-caption { text-align: center; font-size: 13px; color: var(--faint); margin: 20px auto 0; max-width: 780px; text-wrap: balance; }

.sd-js .sd-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.sd-js .sd-reveal.is-in { opacity: 1; transform: none; }

/* ---------- HOW: 그림 + 단계 ---------- */
.sd-how { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.sd-story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: start; }
.sd-stage {
	position: sticky; top: calc(var(--top) + 32px);
	background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px;
	box-shadow: 0 30px 80px -40px rgba(0,0,0,.9);
}
.sd-stage__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sd-stage__label { font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.sd-stage__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--red-dim); transition: background .3s, box-shadow .3s; }
.sd-stage[data-mode="on"] .sd-stage__label::before { background: var(--green); box-shadow: 0 0 0 4px var(--green-dim); }
.sd-stage__note { font-size: 12.5px; color: var(--faint); margin: 16px 0 0; }

/* 프로그램의 자물쇠 단추를 닮은 스위치 */
.sd-run {
	display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 12px; cursor: pointer;
	border-radius: 12px; border: 1px solid var(--line-2); background: #1d222b; color: var(--faint); font: 600 14px var(--font);
	transition: border-color .3s, background .3s, color .3s, transform .15s;
}
.sd-run:hover { background: #252b36; color: var(--muted); }
.sd-run:active { transform: scale(.97); }
.sd-run .sd-lock { width: 18px; height: 18px; color: #a0a0a0; }
.sd-stage[data-mode="on"] .sd-run .sd-lock--open { display: none; }
.sd-stage[data-mode="on"] .sd-run .sd-lock--shut { display: block; color: #f0d860; }
.sd-stage[data-mode="on"] .sd-run { border-color: rgba(226, 178, 63, .6); background: rgba(226, 178, 63, .1); color: #f6d47a; }

.sd-diagram {
	--pkt: 104px;
	position: relative; display: grid;
	grid-template-columns: 96px minmax(0, 1fr) 118px;
	grid-template-rows: 44px 68px 68px auto;
	column-gap: 10px;
	border-radius: 14px; background:
		linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 24px 24px,
		var(--bg-2);
	padding: 14px; overflow: hidden;
}
.sd-node {
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2);
	padding: 8px 6px; line-height: 1.3; z-index: 2;
}
.sd-node svg { width: 26px; height: 26px; color: var(--muted); margin-bottom: 4px; }
.sd-node b { font-size: 13px; }
.sd-node small { font-size: 11px; color: var(--faint); }
.sd-node--pc { grid-column: 1; grid-row: 2 / 4; margin: 6px 0; }
.sd-node--dns { grid-column: 3; grid-row: 2; margin: 6px 0; }
.sd-node--site { grid-column: 3; grid-row: 3; margin: 6px 0; }
.sd-node--dpi {
	grid-column: 2; grid-row: 1 / 4; justify-self: center; justify-content: flex-start;
	width: 128px; border-style: dashed; background: rgba(255, 123, 123, .05); border-color: rgba(255, 123, 123, .35);
	z-index: 0; transition: background .4s, border-color .4s;
}
.sd-node--dpi svg { color: var(--red); width: 22px; height: 22px; margin: 0 0 2px; }
.sd-node--dpi small { display: none; }
.sd-stage[data-mode="on"] .sd-node--dpi { background: rgba(148,163,184,.04); border-color: var(--line-2); }
.sd-stage[data-mode="on"] .sd-node--dpi svg { color: var(--faint); }
.sd-dns-name--on, .sd-stage[data-mode="on"] .sd-dns-name--off { display: none; }
.sd-stage[data-mode="on"] .sd-dns-name--on { display: block; color: var(--cyan); }
.sd-ip { font-family: var(--mono); transition: color .3s; }

.sd-lane { position: relative; grid-column: 2; z-index: 1; transition: opacity .4s; }
.sd-lane--dns { grid-row: 2; }
.sd-lane--sni { grid-row: 3; }
.sd-lane::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-2); }
.sd-lane__name { position: absolute; left: 2px; top: 4px; font: 700 10px/1 var(--mono); color: var(--faint); letter-spacing: .1em; }
.sd-mover { position: absolute; inset: 0; display: flex; align-items: center; animation: sd-flow 3.2s cubic-bezier(.45,.05,.35,1) infinite; will-change: transform; }
.sd-pkt {
	display: inline-flex; align-items: center; gap: 4px; max-width: var(--pkt);
	font: 600 11px/1 var(--mono); white-space: nowrap; overflow: hidden;
	padding: 7px 8px; border-radius: 7px;
	background: #2a1620; color: #ffd0d0; border: 1px solid rgba(255, 123, 123, .55);
	box-shadow: 0 0 22px -6px rgba(255, 123, 123, .6);
}
.sd-pkt svg { width: 11px; height: 11px; flex: none; }
.sd-pkt__enc, .sd-pkt__frag { display: none; }
.sd-stage[data-mode="on"] .sd-pkt { background: #0d2a33; color: #bff3ff; border-color: rgba(58, 215, 246, .55); box-shadow: 0 0 22px -6px rgba(58, 215, 246, .7); }
.sd-stage[data-mode="on"] .sd-pkt--sni { background: #0d2c22; color: #c3f7e2; border-color: rgba(62, 224, 164, .55); box-shadow: 0 0 22px -6px rgba(62, 224, 164, .7); }
.sd-stage[data-mode="on"] .sd-pkt__plain { display: none; }
.sd-stage[data-mode="on"] .sd-pkt__enc, .sd-stage[data-mode="on"] .sd-pkt__frag { display: inline-flex; align-items: center; gap: 4px; }
.sd-mover--late { display: none; animation-delay: .38s; }
.sd-stage[data-mode="on"] .sd-mover--late { display: flex; }

/* 패킷 길: 출발 → 감청 장비 앞에서 멈칫 → 도착 */
@keyframes sd-flow {
	0%   { transform: translateX(0); opacity: 0; }
	8%   { opacity: 1; }
	38%  { transform: translateX(calc(50% - var(--pkt) / 2)); }
	56%  { transform: translateX(calc(50% - var(--pkt) / 2)); }
	90%  { transform: translateX(calc(100% - var(--pkt))); opacity: 1; }
	100% { transform: translateX(calc(100% - var(--pkt))); opacity: 0; }
}

/* 단계별 강조 */
.sd-stage[data-step="1"] .sd-lane--sni { opacity: .18; }
.sd-stage[data-step="1"] .sd-lane--sni .sd-mover { animation-play-state: paused; }
.sd-stage[data-step="4"] .sd-lane--sni { opacity: .35; }
.sd-stage[data-step="2"] .sd-lane--dns, .sd-stage[data-step="5"] .sd-lane--dns { opacity: .35; }

.sd-readout { grid-column: 1 / -1; grid-row: 4; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 6px; }
.sd-readout::before { content: attr(data-title); font-size: 12px; color: var(--faint); }
.sd-readout__row { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; font-size: 13.5px; opacity: .3; transition: opacity .4s; }
.sd-readout__row > span { font: 700 11px/1 var(--mono); color: var(--faint); letter-spacing: .08em; }
.sd-readout output { font-family: var(--mono); font-size: 13px; }
.sd-readout .v-on { display: none; }
.sd-stage[data-mode="on"] .sd-readout .v-off { display: none; }
.sd-stage[data-mode="on"] .sd-readout .v-on { display: inline; }
.sd-readout [data-k="dns"] output, .sd-readout [data-k="sni"] output { color: var(--red); }
.sd-stage[data-mode="on"] .sd-readout [data-k="dns"] output { color: var(--cyan); }
.sd-stage[data-mode="on"] .sd-readout [data-k="sni"] output { color: var(--green); }
.sd-readout [data-k="ip"] output { color: var(--muted); }
.sd-stage[data-step="1"] [data-k="dns"],
.sd-stage[data-step="2"] [data-k="sni"],
.sd-stage[data-step="3"] .sd-readout__row,
.sd-stage[data-step="4"] [data-k="dns"],
.sd-stage[data-step="5"] [data-k="sni"],
.sd-stage[data-step="6"] .sd-readout__row { opacity: 1; }
.sd-stage[data-step="6"] .sd-ip { color: var(--text); }
.sd-stage[data-step="6"] [data-k="ip"] output { color: var(--text); }

.sd-steps { list-style: none; margin: 0; padding: 0; }
.sd-step { min-height: 30vh; display: flex; flex-direction: column; justify-content: center; padding-block: 24px; padding-inline: 22px 0; border-inline-start: 2px solid var(--line); opacity: .38; transition: opacity .4s, border-color .4s; }
.sd-step:first-child { min-height: 0; justify-content: flex-start; padding-top: 8px; }
.sd-step:last-child { min-height: 36vh; }
.sd-step.is-on { opacity: 1; border-inline-start-color: var(--cyan); }
.sd-step[data-mode="off"].is-on { border-inline-start-color: var(--red); }
.sd-step__no { font: 700 13px/1 var(--mono); color: var(--faint); margin-bottom: 12px; }
.sd-step h3 { font-size: 22px; margin-bottom: 10px; }
.sd-step p { color: var(--muted); margin: 0; }

/* ---------- FEATURES: 벤토 ---------- */
.sd-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; grid-auto-flow: dense; }
.sd-card {
	position: relative; padding: 26px; border-radius: var(--radius);
	background: linear-gradient(180deg, var(--surface), rgba(15, 23, 41, .6));
	border: 1px solid var(--line);
	transition: border-color .3s, transform .3s;
}
.sd-card:hover { border-color: var(--line-2); }
.sd-card h3 { font-size: 18px; margin-bottom: 10px; }
.sd-card p { color: var(--muted); font-size: 15px; }
.sd-card p:last-child { margin-bottom: 0; }
.sd-card--wide { grid-column: span 2; }
.sd-card--tall { grid-row: span 2; }
.sd-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.sd-compare div { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; color: var(--faint); }
.sd-compare code { background: none; padding: 0; color: var(--green); font-size: 15px; font-weight: 700; }
.sd-domains { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 8px; }
.sd-domains li { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.sd-domains code { background: none; padding: 0; color: var(--cyan); }
.sd-domains span { font-size: 12.5px; color: var(--faint); }

.sd-log { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13.5px; }
.sd-log th, .sd-log td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.sd-log th { font-size: 12px; color: var(--faint); font-weight: 600; }
.sd-log td:first-child { font: 700 12px var(--mono); color: var(--muted); width: 54px; }
.sd-log td:nth-child(2) { font-family: var(--mono); font-size: 13px; }
.sd-log .is-dim td { opacity: .4; }
.sd-log .is-c { color: var(--cyan); }
.sd-log .is-g { color: var(--green); }

/* ---------- PROXY ---------- */
.sd-proxy { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.sd-proxy__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.sd-proxy__grid > div > p { color: var(--muted); }
.sd-facts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.sd-facts li { position: relative; padding-inline-start: 22px; font-size: 15px; }
.sd-facts li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--cyan); transform: rotate(45deg); }

.sd-route { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 20px; }
.sd-route__list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sd-route__list button {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text);
	font: 14px var(--font); transition: border-color .2s, background .2s;
}
.sd-route__list button code { background: none; padding: 0; }
.sd-route__list button[aria-checked="true"] { border-color: var(--cyan); background: rgba(58, 215, 246, .08); }
.sd-route__map { width: 100%; height: auto; }
.sd-path { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-linecap: round; transition: stroke .3s, opacity .3s; opacity: .7; }
.sd-route[data-pick="blocked"] .sd-path--blocked,
.sd-route[data-pick="news"] .sd-path--news,
.sd-route[data-pick="shop"] .sd-path--shop { stroke-width: 3; stroke-dasharray: 10 8; animation: sd-dash-fast 1.2s linear infinite; opacity: 1; }
.sd-route[data-pick="blocked"] .sd-path--blocked { stroke: var(--cyan); }
.sd-route[data-pick="news"] .sd-path--news, .sd-route[data-pick="shop"] .sd-path--shop { stroke: var(--green); }
@keyframes sd-dash-fast { to { stroke-dashoffset: -36; } }
.sd-mapnode rect { fill: var(--surface-2); stroke: var(--line-2); transition: fill .3s, stroke .3s; }
.sd-mapnode text { fill: var(--text); font: 600 14px var(--font); text-anchor: middle; dominant-baseline: middle; }
.sd-mapnode--srv rect { stroke-dasharray: 4 4; }
.sd-mapnode--srv { opacity: .45; transition: opacity .3s; }
.sd-route[data-pick="blocked"] .sd-mapnode--srv { opacity: 1; }
.sd-route[data-pick="blocked"] .sd-mapnode--srv rect, .sd-route[data-pick="blocked"] [data-k="blocked"] rect { stroke: var(--cyan); fill: rgba(58, 215, 246, .1); }
.sd-route[data-pick="news"] [data-k="news"] rect, .sd-route[data-pick="shop"] [data-k="shop"] rect { stroke: var(--green); fill: rgba(62, 224, 164, .1); }
.sd-route__cap { margin: 14px 0 0; font-size: 14px; color: var(--muted); min-height: 3.4em; }

/* ---------- APP: 프로그램 창 재현 — 값은 SecretDNS app/ui/style.css (4.1.x) 그대로 ---------- */
.sd-app { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: start; max-width: 1000px; margin: 0 auto; }
.sd-app__tabs { display: grid; gap: 12px; }
.sd-app__tabs [role="tab"] {
	display: grid; gap: 6px; text-align: start; cursor: pointer;
	padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line); background: transparent; color: var(--muted);
	font: 15px/1.6 var(--font); transition: border-color .25s, background .25s, color .25s;
}
.sd-app__tabs [role="tab"] b { font-size: 18px; color: var(--text); }
.sd-app__tabs [role="tab"]:hover { border-color: var(--line-2); }
.sd-app__tabs [aria-selected="true"] { border-color: rgba(88, 255, 211, .45); background: linear-gradient(90deg, rgba(88, 255, 211, .07), transparent); color: var(--text); }

.sd-win {
	--bg: #06090f; --panel: rgba(255,255,255,.08); --panel-border: rgba(255,255,255,.12); --row-border: rgba(255,255,255,.08);
	--text: #f3f7ff; --text-sub: #93a5c6; --text-dim: #8e9cb6; --icon: #d6e2ff;
	--on: #58ffd3; --sel: rgba(88,255,211,.14); --input: rgba(255,255,255,.06);
	width: 382px; max-width: 100%; justify-self: center; overflow: hidden;
	border: 1px solid #3a3a3a; background: var(--bg); color: var(--text);
	font: 12px/1.4 "Segoe UI", "Malgun Gothic", system-ui, sans-serif; letter-spacing: 0; word-break: keep-all;
	box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), 0 0 140px -50px rgba(88, 255, 211, .3);
	transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.sd-w-pane { display: flex; flex-direction: column; height: 573px; }
.sd-w-pane[hidden] { display: none; }

/* Windows 제목줄 */
.sd-w-title { flex: none; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 0 0 12px; background: #202020; border-bottom: 1px solid #3a3a3a; font-size: 12px; color: #fff; }
.sd-w-title__ico { width: 14px; height: 14px; color: #f0d860; }
.sd-w-title__ctl { margin-left: auto; display: flex; height: 100%; }
.sd-w-title__ctl i { font-style: normal; width: 46px; display: grid; place-items: center; color: #ddd; font-size: 12px; }

/* 본문: 빛 번짐 두 개 */
.sd-w-body { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; isolation: isolate; }
.sd-w-body::before, .sd-w-body::after { content: ""; position: absolute; border-radius: 50%; filter: blur(40px); z-index: -1; pointer-events: none; }
.sd-w-body::before { width: 320px; height: 320px; top: -120px; right: -110px; background: rgba(76,120,255,.18); }
.sd-w-body::after { width: 300px; height: 300px; left: -140px; bottom: -150px; background: rgba(0,201,255,.14); }

.sd-w-top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 0; }
.sd-w-logo { width: 120px; height: 34px; object-fit: contain; }
.sd-w-ib {
	width: 36px; height: 36px; display: grid; place-items: center; padding: 0; cursor: pointer;
	border-radius: 6px; border: 1px solid var(--panel-border); background: var(--panel); color: var(--icon);
	box-shadow: 0 8px 12px rgba(0,0,0,.2); transition: background .15s;
}
.sd-w-ib:hover { background: rgba(255,255,255,.14); }
.sd-w-ib svg { width: 18px; height: 18px; }
.sd-w-ib--none { visibility: hidden; }

.sd-w-main { flex: 1; min-height: 0; padding: 12px 20px 16px; }
.sd-w-main--center { display: flex; flex-direction: column; justify-content: center; }
.sd-w-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.sd-w-main--dns { display: flex; flex-direction: column; padding: 16px 20px 20px; }

/* 처음 화면 */
.sd-w-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 20px; border-radius: 26px; border: 1px solid var(--panel-border); background: var(--panel); box-shadow: 0 16px 24px rgba(0,0,0,.34); }
.sd-w-badge { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; border: 1px solid var(--panel-border); background: var(--panel); color: var(--icon); }
.sd-w-badge svg { width: 18px; height: 18px; }
.sd-w-hero__h { font-size: 22px; font-weight: 700; margin: 12px 0 6px; }
.sd-w-hero__p { color: var(--text-sub); margin: 0 0 14px; }
.sd-w-hero__p b { color: var(--icon); font-weight: 700; }
.sd-w-run { width: 140px; height: 195px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.sd-w-run img { width: 100%; height: 100%; opacity: .28; transition: opacity .3s ease; }
.sd-win[data-run="wait"] .sd-w-run img { opacity: .6; }
.sd-win[data-run="on"] .sd-w-run img { opacity: 1; }

/* 환경설정 자물쇠: 정지 = 열린 회색, 실행 = 잠긴 금색 */
.sd-w-ib--lock { color: #a0a0a0; }
.sd-lock--shut, .sd-win[data-run="on"] .sd-lock--open, .sd-win[data-run="wait"] .sd-lock--open { display: none; }
.sd-win[data-run="on"] .sd-lock--shut, .sd-win[data-run="wait"] .sd-lock--shut { display: block; }
.sd-win[data-run="on"] .sd-w-ib--lock { color: #f0d860; }
.sd-win[data-run="wait"] .sd-w-ib--lock { color: #f0d860; opacity: .6; }

.sd-w-h { font-size: 19px; font-weight: 700; margin: 0 0 2px; }
.sd-w-sec { font-size: 12px; font-weight: 600; color: var(--text-sub); margin: 12px 0 6px 4px; }
.sd-w-hint { color: var(--text-sub); margin: 2px 0 10px; }
.sd-w-panel { border-radius: 8px; border: 1px solid var(--panel-border); background: var(--panel); padding: 0 16px; }
.sd-w-row { display: flex; align-items: center; gap: 12px; min-height: 32px; padding: 5px 0; border-top: 1px solid var(--row-border); }
.sd-w-panel > .sd-w-row:first-child { border-top: 0; }
.sd-w-t { flex: 1; cursor: pointer; }
.sd-w-t--free { cursor: default; }
.sd-w-sub { padding: 0 0 10px; }
.sd-w-sub[hidden] { display: none; }
.sd-w-ta { display: block; width: 100%; height: 120px; resize: none; border-radius: 6px; border: 1px solid transparent; padding: 10px 12px; background: var(--input); color: var(--text); font: 12px/18px Consolas, var(--mono); outline: none; }
.sd-w-ta:focus { border-color: rgba(88,255,211,.5); }

/* 라디오 · 체크 */
.sd-w-in { appearance: none; -webkit-appearance: none; flex: none; width: 14px; height: 14px; margin: 0; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.sd-w-in:checked { border-color: var(--on); background: radial-gradient(circle, var(--on) 0 3px, transparent 3.5px); }
.sd-w-in--chk { border-radius: 3px; }
.sd-w-in--chk:checked { background: var(--on) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='5 12.5 10 17.5 19 7' fill='none' stroke='%230b111c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.sd-w-in:focus-visible { outline: 2px solid var(--on); outline-offset: 2px; }

.sd-w-mini { height: 20px; padding: 0 10px; border-radius: 4px; border: 1px solid var(--panel-border); background: var(--panel); color: var(--icon); font: inherit; font-size: 11px; cursor: pointer; }
.sd-w-mini[hidden] { display: none; }
.sd-w-mini:hover { background: rgba(255,255,255,.14); }
.sd-w-sel { width: 130px; height: 24px; border-radius: 4px; border: 1px solid var(--panel-border); background: #101624; color: var(--text); font: inherit; padding: 0 6px; }
.sd-w-btn { min-width: 70px; height: 28px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--panel-border); background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.sd-w-btn:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.sd-w-btn:disabled { color: var(--text-dim); opacity: .5; cursor: default; }

/* 실행 중 잠금 (시작 중 포함). 언어 · [로그보기] 는 예외 */
.sd-win[data-run="on"] .sd-w-t:not(.sd-w-t--free), .sd-win[data-run="wait"] .sd-w-t:not(.sd-w-t--free) { color: rgba(147,165,198,.45); cursor: default; }
.sd-w-in:disabled { border-color: rgba(255,255,255,.15); cursor: default; }
.sd-w-in:disabled:checked { border-color: #5b6475; background-color: transparent; background-image: radial-gradient(circle, #5b6475 0 3px, transparent 3.5px); }
.sd-w-in--chk:disabled:checked { background: #5b6475 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='5 12.5 10 17.5 19 7' fill='none' stroke='%230b111c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.sd-w-mini:disabled, .sd-w-ta:disabled { color: var(--text-dim); opacity: .55; cursor: default; }

.sd-w-toast { position: absolute; left: 20px; right: 20px; bottom: 16px; margin: 0; padding: 12px 14px; border-radius: 8px; background: #101624; border: 1px solid var(--panel-border); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.sd-w-toast[hidden] { display: none; }

/* 표 (DNS 서버 · 접속로그) */
.sd-w-panel--fill { flex: 1; min-height: 0; overflow: auto; padding: 0; }
.sd-w-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sd-w-tbl th { text-align: start; font-weight: 600; color: var(--text-dim); padding: 0 8px; height: 28px; border-bottom: 1px solid var(--row-border); }
.sd-w-tbl td { padding: 0 8px; height: 32px; border-bottom: 1px solid var(--row-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-w-tbl .c { width: 30px; padding: 0 0 0 10px; }
.sd-w-tbl .n { width: 104px; }
.sd-w-tbl .a2 { width: 110px; }
.sd-w-tbl tbody tr { cursor: default; }
.sd-w-tbl tbody tr.is-sel td { background: var(--sel); }
.sd-w-tbl tbody[hidden] { display: none; }
.sd-w-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }

.sd-w-logbody { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.sd-w-tbl--log { flex: none; }
.sd-w-tbl--log th { background: #141a26; }
.sd-w-tbl--log td { height: 22px; }
.sd-w-tbl--log .k { width: 54px; }
.sd-w-tbl--log .r { width: 96px; }
.sd-w-tbl--log .is-dim td { color: var(--text-dim); }
.sd-w-logbody .sd-w-tbl { display: table; }
.sd-w-logbtns { margin-top: auto; display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--row-border); }
.sd-w-logbtns span { flex: 1; }

.sd-w-status { flex: none; height: 25px; display: flex; align-items: center; gap: 4px; padding: 0 12px; background: #0b111c; border-top: 1px solid var(--row-border); color: var(--text); }
.sd-w-status span { color: var(--text-dim); }

/* ---------- 아코디언 ---------- */
.sd-acc { display: grid; gap: 10px; }
.sd-acc details { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .3s; }
.sd-acc details[open] { border-color: var(--line-2); }
.sd-acc summary { list-style: none; cursor: pointer; padding-block: 18px; padding-inline: 22px 52px; position: relative; font-weight: 700; font-size: 16px; }
.sd-acc summary::-webkit-details-marker { display: none; }
.sd-acc summary::after { content: ""; position: absolute; inset-inline-end: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .3s; }
.sd-acc details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.sd-acc details p { margin: 0; padding: 0 22px 20px; color: var(--muted); font-size: 15px; }

/* ---------- DOWNLOAD ---------- */
.sd-down { background: radial-gradient(60% 60% at 50% 0%, rgba(58, 215, 246, .08), transparent 70%), var(--bg); }
.sd-dl { display: grid; grid-template-columns: 1.15fr 1fr .8fr; gap: 16px; align-items: stretch; }
.sd-dl__card { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.sd-dl__card h3 { font-size: 22px; }
.sd-dl__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--muted); font-size: 15px; flex: 1; }
.sd-dl__card ul li { padding-inline-start: 20px; position: relative; }
.sd-dl__card ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 10px; height: 6px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.sd-dl__card--main { position: relative; border-color: rgba(58, 215, 246, .45); background: linear-gradient(180deg, rgba(58, 215, 246, .09), var(--surface) 60%); }
.sd-dl__card--main h3 { display: flex; align-items: center; gap: 10px; }
.sd-dl__card .sd-btn { align-self: stretch; }
.sd-dl__links li::before { display: none; }
.sd-dl__links { align-content: start; }
.sd-dl__links li { padding-inline-start: 0 !important; }
.sd-dl__links a { display: flex; justify-content: space-between; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color .2s; }
.sd-dl__links a::after { content: "→"; color: var(--faint); }
.sd-dl__links a:hover { border-color: var(--line-2); }
.sd-req { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; color: var(--muted); font-size: 14px; }
.sd-req b { color: var(--text); margin-right: 4px; }
.sd-hist { max-width: 820px; margin: 36px auto 0; border: 1px solid var(--line); border-radius: 14px; padding: 0 22px; background: var(--surface); }
.sd-hist summary { cursor: pointer; padding: 16px 0; font-weight: 700; }
.sd-hist__item { padding: 12px 0; border-top: 1px solid var(--line); }
.sd-hist__item p { margin: 0 0 6px; }
.sd-hist__item time { color: var(--faint); font-size: 14px; margin-left: 6px; }
.sd-hist__item ul { margin: 0; padding-inline-start: 20px; color: var(--muted); font-size: 14.5px; }
.sd-hist > .sd-small { border-top: 1px solid var(--line); padding: 14px 0 18px; margin: 0; }

/* ---------- 바닥 ---------- */
.sd-foot { border-top: 1px solid var(--line); padding: 40px 0 56px; }
.sd-foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; }
.sd-foot__in p { margin: 0 0 4px; }
.sd-foot .sd-brand a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.sd-foot .sd-brand a:hover { color: var(--cyan); }
.sd-foot__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.sd-foot__links a { color: var(--muted); text-decoration: none; font-size: 14px; }
.sd-foot__links a:hover { color: var(--text); }

/* ---------- 반응형 ---------- */
@media (max-width: 1020px) {
	.sd-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sd-card--tall { grid-row: auto; }
	.sd-dl { grid-template-columns: 1fr 1fr; }
	.sd-dl__card--more { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
	:root { --top: 56px; }
	.sd-wrap { padding: 0 16px; }
	.sd-nav { display: none; }
	.sd-top__in { justify-content: space-between; }
	.sd-hero { padding: 40px 0 24px; }
	.sd-hero__grid { grid-template-columns: 1fr; gap: 40px; }
	.sd-shot { --rx: 0deg; --ry: 0deg; max-width: 300px; }
	.sd-shot__chip { font-size: 12px; padding: 8px 11px; }
	.sd-shot__chip--dns { left: -6px; }
	.sd-shot__chip--sni { right: -6px; }
	.sd-notvpn { margin-top: 36px; }
	.sd-sec { padding: 72px 0; }
	.sd-head { margin-bottom: 36px; }

	.sd-story { grid-template-columns: 1fr; gap: 0; }
	.sd-stage { top: calc(var(--top) + 8px); z-index: 5; padding: 14px; border-radius: 18px; }
	.sd-stage__note { display: none; }
	.sd-diagram { --pkt: 86px; grid-template-columns: 70px minmax(0, 1fr) 84px; grid-template-rows: 36px 58px 58px auto; padding: 10px; column-gap: 6px; }
	.sd-node b { font-size: 11.5px; }
	.sd-node small { font-size: 10px; }
	.sd-node svg { width: 20px; height: 20px; }
	.sd-node--dpi { width: 92px; }
	.sd-pkt { font-size: 10px; padding: 6px; }
	.sd-readout { gap: 2px; margin-top: 8px; padding-top: 8px; }
	.sd-readout__row { font-size: 12px; }
	.sd-readout output { font-size: 11.5px; }
	.sd-steps { margin-top: 20px; }
	.sd-step { min-height: 34vh; padding-inline-start: 16px; }
	.sd-step:first-child { min-height: 0; padding-top: 24px; }
	.sd-step h3 { font-size: 19px; }

	.sd-bento { grid-template-columns: 1fr; }
	.sd-card--wide { grid-column: auto; }
	.sd-proxy__grid { grid-template-columns: 1fr; gap: 32px; }
	.sd-app { grid-template-columns: 1fr; gap: 24px; }
	.sd-app__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; order: 2; }
	.sd-app__tabs [role="tab"] { padding: 10px; text-align: center; border-radius: 10px; }
	.sd-app__tabs [role="tab"] b { font-size: 14px; }
	.sd-app__tabs [role="tab"] span { display: none; }
	.sd-w-pane { height: 553px; }
	.sd-dl { grid-template-columns: 1fr; }
	.sd-foot__in { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
	.sd-diagram { grid-template-columns: 60px minmax(0, 1fr) 74px; }
	.sd-hero__title { font-size: 32px; }
}

/* ---------- 움직임 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.sd-mover { animation: none !important; transform: translateX(calc(50% - var(--pkt) / 2)); }
	.sd-mover--late { transform: translateX(calc(100% - var(--pkt))); }
	.sd-shot { --rx: 0deg !important; --ry: 0deg !important; }
	.sd-js .sd-reveal { opacity: 1; transform: none; }
}

/* ---------- 언어 선택 ---------- */
.sd-lang { position: relative; margin-inline-start: 8px; }
.sd-lang summary {
	list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
	border-radius: 10px; border: 1px solid var(--line-2); color: var(--muted); font-size: 14px; white-space: nowrap;
}
.sd-lang summary::-webkit-details-marker { display: none; }
.sd-lang summary:hover, .sd-lang[open] summary { color: var(--text); background: rgba(148,163,184,.08); }
.sd-lang summary svg { width: 17px; height: 17px; }
.sd-lang ul {
	position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60; list-style: none; margin: 0; padding: 6px;
	display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 2px;
	background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.9);
}
.sd-lang a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 14px; }
.sd-lang a:hover { background: rgba(148,163,184,.1); color: var(--text); }
.sd-lang a[aria-current="page"] { color: var(--cyan); }
.sd-nav + .sd-lang { margin-inline-start: 4px; }
@media (max-width: 860px) {
	.sd-lang, .sd-nav + .sd-lang { margin-inline-start: auto; }
	.sd-lang summary span { display: none; }
	.sd-lang summary { padding: 0 10px; }
	.sd-top__in { gap: 10px; }
}

/* ---------- 언어별 서체 · 방향 ---------- */
:root:lang(ja) { --font: "Pretendard JP Variable", "Pretendard Variable", "Hiragino Sans", "Yu Gothic UI", Meiryo, system-ui, sans-serif; }
:root:lang(zh-Hans) { --font: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Pretendard Variable", system-ui, sans-serif; }
:root:lang(ar) { --font: "Pretendard Variable", "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif; }
:root:lang(th) { --font: "Pretendard Variable", "Leelawadee UI", "Noto Sans Thai", Tahoma, system-ui, sans-serif; }
:root:lang(ja) body.sd, :root:lang(zh-Hans) body.sd, :root:lang(th) body.sd { word-break: normal; line-break: strict; }
:root:lang(ar) .sd-hero__title, :root:lang(ar) .sd-head h2, :root:lang(th) .sd-hero__title { letter-spacing: 0; line-height: 1.4; }
:root:lang(ar) body.sd { letter-spacing: 0; }
[dir="rtl"] .sd-shot { --ry: 10deg; }
[dir="rtl"] .sd-w-ib--back svg { transform: scaleX(-1); }
.sd-w-tbl .x { unicode-bidi: plaintext; }
[dir="rtl"] .sd-w-tbl .x { text-align: end; }

/* ---------- kilho.net 첫 화면 링크: 다운로드 아래 (LANDING-PAGE.md 10-1) ---------- */
.sd-more img { width: 16px; height: 16px; flex: none; }
.sd-more { margin: 32px 0 0; text-align: center; }
.sd-more a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color .2s, transform .2s; }
.sd-more a:hover { transform: translateY(-2px); }
.sd-more a::after { content: "→"; color: var(--muted); }
[dir="rtl"] .sd-more a::after { content: "←"; }

/* 바닥 왼쪽 © KILHO.NET — kilho.net 첫 화면 링크, 글자색은 둘레와 같게 */
.sd-foot .sd-small a { color: inherit; text-decoration: none; }
.sd-foot .sd-small a:hover { color: var(--text); text-decoration: underline; }

/* 바닥 X(트위터) — 글자 대신 로고 */
.sd-foot__links .sd-x { display: inline-flex; align-items: center; height: 100%; }
.sd-foot__links .sd-x svg { width: 15px; height: 15px; }