/*
	ZEROGIC — 사이트 스타일시트

	이 파일 하나가 사이트 전체의 스타일이다. 전처리기도 빌드도 쓰지 않는다.
	색·간격·폭은 :root의 CSS 변수에 모아 두었으니 톤을 바꿀 때는 거기만 고치면 된다.

	구성
	  1. 리셋
	  2. 토큰
	  3. 기본 요소 (타이포 / 링크 / 목록 / 표 / 이미지)
	  4. 레이아웃 (헤더 / 서랍 메뉴 / 본문 / 푸터)
	  5. 홍보 페이지 컴포넌트 (.zg-*)
	  6. 문서 페이지 (body.zg-doc)
	  7. 접근성 / 유틸 / 반응형
	  8. 다크 모드
*/

/* =========================================================== 1. 리셋 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul, fieldset {
	margin: 0;
	padding: 0;
}

img, picture, svg, video, iframe {
	display: block;
	max-width: 100%;
}

img, video {
	height: auto;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* =========================================================== 2. 토큰 */

:root {
	--zg-brand:        #0277bd;
	--zg-brand-strong: #01579b;
	--zg-brand-soft:   #e1f5fe;
	--zg-ink:          #16212b;
	--zg-ink-soft:     #56646f;
	--zg-line:         #dfe4e8;
	--zg-bg:           #ffffff;
	--zg-bg-soft:      #f5f7f9;
	--zg-bg-deep:      #0e3247;
	--zg-warn:         #d64242;
	--zg-warn-soft:    #fff5f5;

	--zg-radius:       14px;
	--zg-radius-lg:    22px;
	--zg-shadow:       0 1px 2px rgba(16, 33, 45, .06), 0 8px 24px rgba(16, 33, 45, .07);
	--zg-shadow-lg:    0 2px 6px rgba(16, 33, 45, .08), 0 22px 48px rgba(16, 33, 45, .13);

	--zg-maxw:         1120px;
	--zg-gutter:       clamp(1.25rem, 3vw, 2.5rem);
	--zg-measure:      44rem;   /* 문서 본문의 읽기 폭 */

	--zg-font: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	           "Helvetica Neue", Arial, sans-serif;
	--zg-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ==================================================== 3. 기본 요소 */

body {
	background: var(--zg-bg);
	color: var(--zg-ink);
	font-family: var(--zg-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	word-break: keep-all;      /* 한국어에서 단어 중간이 끊기지 않게 */
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--zg-ink);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.35;
}

h1 { font-size: clamp(1.32rem, 1.1rem + 1vw, 2rem); font-weight: 900; }
h2 { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); }
h3 { font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); }
h4, h5, h6 { font-size: 1rem; }

p { margin-bottom: 1.1em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

a {
	color: var(--zg-brand-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: color .18s ease;
}
a:hover { color: var(--zg-brand); }

ul, ol {
	margin-bottom: 1.2em;
	padding-left: 1.35em;
}
li { margin-bottom: .45em; }
li::marker { color: var(--zg-brand); }

dl { margin-bottom: 1.2em; }

hr {
	height: 0;
	margin: 2.5em 0;
	border: 0;
	border-top: 1px solid var(--zg-line);
}

table {
	width: 100%;
	margin-bottom: 1.5em;
	font-size: .95em;
}
th, td {
	padding: .6em .8em;
	border: 1px solid var(--zg-line);
	text-align: left;
	vertical-align: top;
}
th { background: var(--zg-bg-soft); font-weight: 700; }

code, kbd, samp, pre { font-family: var(--zg-font-mono); font-size: .92em; }

::selection { background: var(--zg-brand-soft); color: var(--zg-brand-strong); }

/* ===================================================== 4. 레이아웃 */

.zg-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/*
		전체 폭 섹션은 50vw 기준으로 뻗는데 100vw에는 세로 스크롤바 너비가 포함되어
		그대로 두면 가로 스크롤이 생긴다. clip은 스크롤 컨테이너를 만들지 않아
		sticky/fixed에 영향이 없다. (hidden은 구형 폴백)
	*/
	overflow-x: hidden;
	overflow-x: clip;
}

.zg-container {
	width: 100%;
	max-width: var(--zg-maxw);
	margin-inline: auto;
	padding-inline: var(--zg-gutter);
}

/* ---- 헤더 ---- */

.zg-header {
	padding-block: clamp(1.1rem, .8rem + 1vw, 1.8rem);
}

.zg-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.zg-brand {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	color: var(--zg-ink-soft);
	text-decoration: none;
}
.zg-brand:hover { color: var(--zg-ink); }

.zg-brand-mark {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
}

.zg-brand-title {
	margin: 0;
	font-size: clamp(.92rem, .86rem + .25vw, 1.05rem);
	font-weight: 900;
	letter-spacing: .08em;
	line-height: 1.2;
	color: inherit;
}

/* 메뉴 버튼 (햄버거) */
.zg-menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -.6rem;
	border-radius: 10px;
	color: var(--zg-ink-soft);
	transition: background .18s ease, color .18s ease;
}
.zg-menu-btn:hover { background: var(--zg-bg-soft); color: var(--zg-ink); }

/* ---- 본문 ---- */

.zg-main {
	flex: 1 0 auto;
	padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}

/* ---- 푸터 ---- */

.zg-footer {
	flex: 0 0 auto;
	padding-block: 2.5rem 3rem;
	border-top: 1px solid var(--zg-line);
	color: var(--zg-ink-soft);
	font-size: .88rem;
}

.zg-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1.4em;
	margin: 0 0 .8em 0;
	padding: 0;
	list-style: none;
}
.zg-footer-links li { margin: 0; }
.zg-footer-links a { color: inherit; text-decoration: none; }
.zg-footer-links a:hover { color: var(--zg-brand); text-decoration: underline; }

.zg-footer-copy { margin: 0; }

/* ---- 서랍 메뉴 ---- */

.zg-backdrop {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(10, 20, 28, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, visibility .28s ease;
}

.zg-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
	width: min(21rem, 84vw);
	height: 100%;
	padding: 1.25rem;
	background: var(--zg-bg);
	box-shadow: var(--zg-shadow-lg);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .28s ease, visibility .28s ease;
}

body.zg-drawer-open .zg-backdrop { opacity: 1; visibility: visible; }
body.zg-drawer-open .zg-drawer { transform: none; visibility: visible; }

.zg-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .5rem;
	padding-left: .4rem;
}
.zg-drawer-head h2 {
	margin: 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--zg-ink-soft);
}

.zg-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-right: -.5rem;
	border-radius: 10px;
	color: var(--zg-ink-soft);
	transition: background .18s ease, color .18s ease;
}
.zg-drawer-close:hover { background: var(--zg-bg-soft); color: var(--zg-ink); }

.zg-drawer-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}
.zg-drawer-nav li { margin: 0; border-top: 1px solid var(--zg-line); }
.zg-drawer-nav li:first-child { border-top: 0; }
.zg-drawer-nav a {
	display: block;
	padding: .85em .4em;
	color: var(--zg-ink);
	font-weight: 700;
	font-size: .98rem;
	text-decoration: none;
	transition: color .18s ease;
}
.zg-drawer-nav a:hover { color: var(--zg-brand); }

/* ======================================= 5. 홍보 페이지 컴포넌트 */

.zg { text-align: left; }

.zg .zg-lead {
	font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
	color: var(--zg-ink-soft);
	line-height: 1.65;
}

/* 섹션 리듬 */
.zg-section { padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0; }
.zg-section + .zg-section { border-top: 1px solid var(--zg-line); }

/*
	전체 폭으로 뻗는 요소.
	margin으로 컨테이너 밖까지 밀어낸 뒤 같은 양을 padding으로 되돌려,
	안쪽 내용은 다시 본문과 같은 줄에 맞춘다.
*/
.zg-section--soft,
.zg-cta-band,
.zg-shots {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}

.zg-section--soft {
	background: var(--zg-bg-soft);
	border-top: 1px solid var(--zg-line);
	border-bottom: 1px solid var(--zg-line);
}
.zg-section--soft + .zg-section { border-top: 0; }

.zg-section > header { max-width: 46em; margin-bottom: clamp(1.6rem, 1rem + 1.5vw, 2.6rem); }
.zg-section > header h2 { margin-bottom: .45em; }
.zg-section > header p { color: var(--zg-ink-soft); margin-bottom: 0; }

.zg-eyebrow {
	display: inline-block;
	margin: 0 0 .8em 0;
	padding: .3em .8em;
	border-radius: 999px;
	background: var(--zg-brand-soft);
	color: var(--zg-brand-strong);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
}

/* ---- 페이지 제목 ---- */

/*
	홍보 페이지(.zg-pagehead)와 문서 페이지(body.zg-doc)가 같은 크기·같은 상단 여백을 쓴다.
	페이지를 오가도 제목이 같은 자리에 있도록. 히어로는 랜딩 전용이라 더 크다.
*/
.zg-pagehead { padding: clamp(1.5rem, 1rem + 2vw, 3rem) 0 0 0; }

.zg-pagehead h1,
body.zg-doc .zg-main h1 {
	font-size: clamp(1.32rem, 1.1rem + 1vw, 2rem);
	margin-bottom: .5em;
}
body.zg-doc .zg-main h1 { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }

/* ---- 히어로 ---- */

.zg-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(1.5rem, 1rem + 3vw, 4rem);
	align-items: center;
	padding: clamp(1rem, .5rem + 2vw, 2.5rem) 0 clamp(2.5rem, 1.5rem + 3vw, 4rem) 0;
}

.zg-hero h1 {
	font-size: clamp(1.55rem, 1.05rem + 2.2vw, 3.1rem);
	line-height: 1.25;
	margin-bottom: .45em;
}
.zg-hero .zg-lead { margin-bottom: 1.6em; }

.zg-hero-app {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1.4rem 0;
}
.zg-hero-app img {
	width: 56px;
	height: 56px;
	border-radius: 13px;
	box-shadow: var(--zg-shadow);
}
.zg-hero-app span {
	font-weight: 700;
	font-size: 1rem;
	color: var(--zg-ink-soft);
}

.zg-hero-shot {
	justify-self: center;
	max-width: 300px;
	width: 100%;
}

/* 폰 목업 프레임 */
.zg-phone {
	position: relative;
	border-radius: 30px;
	padding: 9px;
	background: linear-gradient(160deg, #2b3946, #101a22);
	box-shadow: var(--zg-shadow-lg);
}
.zg-phone img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 22px;
	background: #fff;
}

/* ---- CTA ---- */

.zg-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem 1.1rem;
}

.zg-store {
	display: inline-block;
	line-height: 0;
	border-radius: 8px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.zg-store img { display: block; width: 200px; max-width: 100%; height: auto; }
.zg-store:hover { transform: translateY(-2px); box-shadow: var(--zg-shadow); }

.zg-btn {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	height: 3em;
	padding: 0 1.5em;
	border: 1px solid var(--zg-line);
	border-radius: 999px;
	background: var(--zg-bg);
	color: var(--zg-ink);
	font-size: .95rem;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.zg-btn:hover { border-color: var(--zg-brand); color: var(--zg-brand-strong); background: var(--zg-brand-soft); }

.zg-cta-note { margin: 1rem 0 0 0; font-size: .88rem; color: var(--zg-ink-soft); }

.zg-cta-band {
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	background: var(--zg-bg-deep);
	color: #fff;
	text-align: center;
}
.zg-cta-band h2 { color: #fff; margin-bottom: .5em; }
.zg-cta-band p { color: rgba(255, 255, 255, .78); max-width: 34em; margin-inline: auto; }
.zg-cta-band .zg-cta-row { justify-content: center; margin-top: 1.6rem; }

/* ---- 기능 그리드 ---- */

.zg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.1rem;
}

.zg-card {
	padding: 1.6rem 1.5rem;
	border: 1px solid var(--zg-line);
	border-radius: var(--zg-radius);
	background: var(--zg-bg);
}
.zg-card h3 { margin-bottom: .4em; }
.zg-card p { color: var(--zg-ink-soft); font-size: .95rem; margin-bottom: 0; }

.zg-card-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 1rem;
	border-radius: 11px;
	background: var(--zg-brand-soft);
	color: var(--zg-brand-strong);
}

/* 링크형 카드 */
a.zg-card {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.zg-card:hover {
	border-color: var(--zg-brand);
	box-shadow: var(--zg-shadow);
	transform: translateY(-2px);
}
a.zg-card h3 { color: var(--zg-brand-strong); }

/* ---- 스크린샷 레일 ---- */

.zg-shots {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(210px, 232px);
	gap: 1.4rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: 1.2rem;
}
.zg-shots figure { margin: 0; scroll-snap-align: start; }
.zg-shots figcaption {
	margin-top: .9rem;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--zg-ink-soft);
}
.zg-shots figcaption b {
	display: block;
	color: var(--zg-ink);
	font-weight: 700;
	font-size: .95rem;
}

/* ---- 요금 ---- */

.zg-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.2rem;
	align-items: start;
}

.zg-plan {
	padding: 1.8rem 1.6rem;
	border: 1px solid var(--zg-line);
	border-radius: var(--zg-radius-lg);
	background: var(--zg-bg);
}
.zg-plan--featured { border: 2px solid var(--zg-brand); box-shadow: var(--zg-shadow); }

.zg-plan-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .3em;
}
.zg-plan-head h3 { margin: 0; }
.zg-plan-tag {
	padding: .25em .7em;
	border-radius: 999px;
	background: var(--zg-brand);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	white-space: nowrap;
}
.zg-plan > p { color: var(--zg-ink-soft); font-size: .93rem; }
.zg-plan ul { margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.zg-plan li {
	position: relative;
	margin: 0;
	padding: .55em 0 .55em 1.6em;
	border-top: 1px solid var(--zg-line);
}
.zg-plan li:first-child { border-top: 0; }
.zg-plan li::before {
	position: absolute;
	left: 0;
	color: var(--zg-brand);
	font-weight: 900;
	content: "✓";
}
.zg-plan li.zg-no { color: var(--zg-ink-soft); }
.zg-plan li.zg-no::before { color: #b9c2c9; content: "—"; }

/* ---- 활용 사례 / 단계 ---- */

.zg-cases { display: grid; gap: .9rem; }
.zg-case {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--zg-line);
	border-radius: var(--zg-radius);
	background: var(--zg-bg);
}
.zg-case b { display: block; margin-bottom: .15em; font-size: 1rem; }
.zg-case p { margin: 0; color: var(--zg-ink-soft); font-size: .95rem; }
.zg-case-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--zg-bg-deep);
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
}

/* ---- 정보 박스 / 권한 목록 ---- */

.zg-note {
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--zg-line);
	border-left: 4px solid var(--zg-brand);
	border-radius: 0 var(--zg-radius) var(--zg-radius) 0;
	background: var(--zg-bg-soft);
	font-size: .95rem;
}
.zg-note h3 { margin-bottom: .5em; }
.zg-note :last-child { margin-bottom: 0; }
.zg-note--warn { border-left-color: var(--zg-warn); background: var(--zg-warn-soft); }

.zg-defs { margin: 0; }
.zg-defs dt {
	margin-top: 1.1em;
	font-family: var(--zg-font-mono);
	font-size: .88rem;
	font-weight: 700;
	color: var(--zg-brand-strong);
}
.zg-defs dt:first-child { margin-top: 0; }
.zg-defs dd { margin: .25em 0 0 0; color: var(--zg-ink-soft); font-size: .95rem; }

/* ---- 앱 목록(홈) ---- */

.zg-apps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.2rem;
}
.zg-app {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.7rem 1.6rem;
	border: 1px solid var(--zg-line);
	border-radius: var(--zg-radius-lg);
	background: var(--zg-bg);
	color: inherit;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.zg-app:hover { border-color: var(--zg-brand); box-shadow: var(--zg-shadow); transform: translateY(-3px); }
.zg-app img { width: 60px; height: 60px; border-radius: 14px; box-shadow: var(--zg-shadow); }
.zg-app h3 { margin: 0 0 .3em 0; color: var(--zg-brand-strong); }
.zg-app p { margin: 0; color: var(--zg-ink-soft); font-size: .95rem; }
.zg-app-more { margin-top: auto; font-size: .9rem; font-weight: 700; color: var(--zg-brand); }

/* ================================================= 6. 문서 페이지 */

/*
	FAQ 상세, 개인정보처리방침처럼 글이 이어지는 페이지.
	컨테이너 폭은 홍보 페이지와 같게 두고(제목 위치가 페이지마다 튀지 않도록)
	읽기 폭만 본문 요소에서 제한한다.
*/
body.zg-doc .zg-main > .zg-container > * {
	max-width: var(--zg-measure);
}

body.zg-doc .zg-main h2 { margin: 2em 0 .6em; }
body.zg-doc .zg-main h3 { margin: 1.6em 0 .5em; }

body.zg-doc .zg-main img {
	/* 도움말 삽화는 가운데 정렬 */
	margin: 1.2em auto;
	border-radius: 8px;
	box-shadow: var(--zg-shadow);
}

/* 도움말 안의 앵커 타깃이 화면 위쪽에 붙지 않도록 */
body.zg-doc [id] { scroll-margin-top: 1.5rem; }

/* ============================================ 7. 접근성 / 유틸 */

.zg-skip {
	position: absolute;
	left: -9999px;
	z-index: 1000;
	padding: .8em 1.2em;
	border-radius: 0 0 8px 0;
	background: var(--zg-bg-deep);
	color: #fff;
	font-size: .9rem;
	text-decoration: none;
}
.zg-skip:focus { left: 0; top: 0; color: #fff; }

:where(a, button, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--zg-brand);
	outline-offset: 3px;
	border-radius: 3px;
}

.zg-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- 반응형 보정 ---- */

@media screen and (max-width: 860px) {
	.zg-hero { grid-template-columns: minmax(0, 1fr); }
	/*
		좁은 화면에서 스크린샷을 위로 올리면 제목과 설치 버튼이 첫 화면 밖으로 밀린다.
		소스 순서(제목 -> CTA -> 스크린샷)를 그대로 두고 이미지만 줄인다.
	*/
	.zg-hero-shot { max-width: 210px; margin-top: .5rem; }
}

@media screen and (max-width: 480px) {
	.zg-card, .zg-plan, .zg-case, .zg-app { padding: 1.25rem 1.15rem; }
	.zg-store img { width: 172px; }
	.zg-case { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.zg-store:hover, a.zg-card:hover, .zg-app:hover { transform: none; }
}

/* ===================================================== 8. 다크 모드 */

@media (prefers-color-scheme: dark) {
	:root {
		--zg-brand:        #4fc3f7;
		--zg-brand-strong: #81d4fa;
		--zg-brand-soft:   #12354a;
		--zg-ink:          #e7edf2;
		--zg-ink-soft:     #a3b1bc;
		--zg-line:         #2a3742;
		--zg-bg:           #111a21;
		--zg-bg-soft:      #16212a;
		--zg-bg-deep:      #0b1720;
		--zg-warn:         #ff8a80;
		--zg-warn-soft:    #2a1a1a;
		--zg-shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
		--zg-shadow-lg:    0 2px 6px rgba(0, 0, 0, .45), 0 22px 48px rgba(0, 0, 0, .5);
	}

	.zg-cta-band { background: #0a141b; }
	.zg-plan-tag, .zg-case-num { color: #06121a; }

	/* 밝은 UI 스크린샷은 살짝 눌러 눈부심을 줄인다 */
	.zg-shots img, body.zg-doc .zg-main img { filter: brightness(.92); }
}