/* ==========================================================================
   오픈사이드 랜딩 — index.php 전용. 모든 클래스는 os- 접두어 (밝은 바탕, 앱 아이콘의 남색 #3d5fe0)
   ========================================================================== */

:root {
	--bg: #f5f7fe;
	--bg-2: #e9eefc;
	--surface: #fff;
	--line: rgba(15, 23, 42, .08);
	--line-2: rgba(15, 23, 42, .15);
	--text: #0f172a;
	--muted: #475569;
	--faint: #8a96a8;
	--acc: #3d5fe0;
	--acc-2: #6d8cf0;
	--acc-deep: #2b45b8;
	--acc-dim: rgba(61, 95, 224, .1);
	--blue: #3d84dd;
	--pin: #f59e0b;
	--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", "Pretendard Variable", monospace;
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 12px); -webkit-text-size-adjust: 100%; }
body.os {
	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(--acc-deep); text-underline-offset: 3px; }
b, strong { font-weight: 700; color: var(--text); }
code { font-family: var(--mono); font-size: .86em; background: var(--bg-2); padding: .1em .4em; border-radius: 6px; color: #23389a; }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.03em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 6px; }

.os-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.os-narrow { max-width: 820px; }
.os-small { font-size: 14px; color: var(--muted); }
.os-skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100; background: var(--acc); color: #fff; padding: 8px 14px; border-radius: 8px; }
.os-skip:focus { top: 8px; }

/* ---------- 버튼 · 배지 ---------- */
.os-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, #5677ec, #2f4cc8); color: #fff;
	font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap;
	box-shadow: 0 10px 26px -12px rgba(61, 95, 224, .8), inset 0 1px 0 rgba(255,255,255,.25);
	transition: transform .2s, box-shadow .2s;
}
.os-btn svg { width: 20px; height: 20px; }
.os-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(61, 95, 224, .9), inset 0 1px 0 rgba(255,255,255,.25); }
.os-btn--ghost { background: var(--surface); color: var(--text); border-color: var(--line-2); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.os-btn--ghost:hover { background: var(--bg-2); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.os-btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.os-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--acc-dim); color: var(--acc-deep); white-space: nowrap; }
.os-badge--off { background: var(--bg-2); color: var(--muted); }

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

/* ---------- HERO ---------- */
.os-hero { position: relative; overflow: hidden; padding: 72px 0 88px; isolation: isolate; }
.os-hero::before {
	content: ""; position: absolute; inset: -30% -10% auto; height: 130%; z-index: -1;
	background:
		radial-gradient(44% 46% at 74% 42%, rgba(109, 140, 240, .16), transparent 70%),
		radial-gradient(30% 30% at 12% 80%, rgba(245, 158, 11, .07), transparent 70%);
}
.os-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.os-tags { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.os-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(255,255,255,.7); }
.os-hero__title { font-size: clamp(34px, 4.3vw, 52px); font-weight: 800; letter-spacing: -.045em; margin-bottom: 24px; }
.os-hero__title--long { font-size: clamp(30px, 3.8vw, 46px); }
.os-hero__title em { font-style: normal; color: var(--acc); }
.os-line { display: block; }
.os-hero__lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); max-width: 34em; margin-bottom: 32px; }
.os-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.os-hero__meta { font-size: 14px; color: var(--faint); margin: 0; }

.os-hero__visual { position: relative; padding: 24px 0 40px; }
.os-shot {
	width: 100%; max-width: 533px; height: auto; margin-inline: auto; border-radius: 8px;
	box-shadow: 0 0 0 1px var(--line-2), 0 40px 70px -36px rgba(35, 50, 140, .45);
}
.os-chip {
	position: absolute; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px;
	background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -20px rgba(15,23,42,.35); font-size: 14px; color: var(--muted); white-space: nowrap;
}
.os-chip img { width: 20px; height: 20px; flex: none; }

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

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

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

/* ---------- 격자 ---------- */
.os-grid { display: grid; gap: 16px; }
.os-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 카드 ---------- */
.os-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; transition: border-color .3s, box-shadow .3s; }
.os-card:hover { border-color: var(--line-2); box-shadow: 0 20px 40px -30px rgba(35, 50, 140, .45); }
.os-card h3 { font-size: 18px; margin: 12px 0 6px; }
.os-card p { color: var(--muted); font-size: 15px; margin: 0; }

/* ---------- 아코디언 ---------- */
.os-acc { display: grid; gap: 10px; }
.os-acc details { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .3s; }
.os-acc details[open] { border-color: var(--line-2); }
.os-acc summary { list-style: none; cursor: pointer; padding-block: 18px; padding-inline: 22px 52px; position: relative; font-weight: 700; font-size: 16px; }
.os-acc summary::-webkit-details-marker { display: none; }
.os-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; }
.os-acc details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.os-acc details p { margin: 0; padding: 0 22px 20px; color: var(--muted); font-size: 15px; }

/* ---------- DOWNLOAD ---------- */
.os-down { background: radial-gradient(60% 60% at 50% 0%, rgba(109, 140, 240, .1), transparent 70%), var(--bg); }
.os-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; max-width: 900px; margin: 0 auto; }
.os-dl__card { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.os-dl__card h3 { font-size: 22px; }
.os-dl__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--muted); font-size: 15px; flex: 1; }
.os-dl__card ul li { padding-inline-start: 20px; position: relative; }
.os-dl__card ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 10px; height: 6px; border-left: 2px solid var(--acc); border-bottom: 2px solid var(--acc); transform: rotate(-45deg); }
.os-dl__card--main { border-color: rgba(61, 95, 224, .4); background: linear-gradient(180deg, #eef2fe, var(--surface) 60%); box-shadow: 0 24px 50px -36px rgba(61, 95, 224, .6); }
.os-dl__card--main h3 { display: flex; align-items: center; gap: 10px; }
.os-dl__card .os-btn { align-self: stretch; white-space: normal; text-align: center; padding-block: 10px; }
.os-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; }
.os-req b { margin-inline-end: 4px; }
.os-hist { max-width: 820px; margin: 36px auto 0; border: 1px solid var(--line); border-radius: 14px; padding: 0 22px; background: var(--surface); }
.os-hist summary { cursor: pointer; padding: 16px 0; font-weight: 700; }
.os-hist__item { padding: 12px 0; border-top: 1px solid var(--line); }
.os-hist__item p { margin: 0 0 6px; }
.os-hist__item time { color: var(--faint); font-size: 14px; margin-inline-start: 6px; }
.os-hist__item ul { margin: 0; padding-inline-start: 20px; color: var(--muted); font-size: 14.5px; }
.os-hist > .os-small { border-top: 1px solid var(--line); padding: 14px 0 18px; margin: 0; }

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

/* ---------- 언어 선택 ---------- */
.os-lang { position: relative; margin-inline-start: 4px; }
.os-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; background: rgba(255,255,255,.6);
}
.os-lang summary::-webkit-details-marker { display: none; }
.os-lang summary:hover, .os-lang[open] summary { color: var(--text); background: #fff; }
.os-lang summary svg { width: 17px; height: 17px; }
.os-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: #fff; border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(15,23,42,.35);
}
.os-lang a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 14px; }
.os-lang a:hover { background: var(--bg-2); color: var(--text); }
.os-lang a[aria-current="page"] { color: var(--acc-deep); font-weight: 700; }

/* ---------- 언어별 서체 · 방향 ---------- */
: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.os, :root:lang(zh-Hans) body.os, :root:lang(th) body.os { word-break: normal; line-break: strict; }
:root:lang(ar) .os-hero__title, :root:lang(ar) .os-head h2, :root:lang(th) .os-hero__title { letter-spacing: 0; line-height: 1.4; }
:root:lang(ar) body.os { letter-spacing: 0; }

/* ---------- kilho.net 첫 화면 링크: 다운로드 아래 (LANDING-PAGE.md 10-1) ---------- */
.os-more img { width: 16px; height: 16px; flex: none; }
.os-more { margin: 32px 0 0; text-align: center; }
.os-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; }
.os-more a:hover { transform: translateY(-2px); }
.os-more a::after { content: "→"; color: var(--muted); }
[dir="rtl"] .os-more a::after { content: "←"; }

/* ---------- 첫 화면: README 그림(실제 크기 456x538) + 칩 ---------- */
.os-shot { width: 456px; max-width: 100%; height: auto; margin-inline: auto; border-radius: 8px; box-shadow: 0 0 0 1px var(--line-2), 0 40px 70px -36px rgba(35, 50, 140, .45); }
.os-chip { color: var(--text); font-weight: 600; }
.os-chip img { width: 16px; height: 16px; }
.os-chip svg { width: 17px; height: 17px; color: var(--acc); flex: none; }
.os-chip--login { inset-inline-end: 0; top: 0; }
.os-chip--tab { inset-inline-start: 0; bottom: 6px; }
.os-js .os-chip--login { animation: os-pop .7s .9s cubic-bezier(.2,.9,.3,1.3) both; }
.os-js .os-chip--tab { animation: os-pop .7s 1.1s cubic-bezier(.2,.9,.3,1.3) both; }
kbd { font-family: var(--mono); font-size: .82em; padding: .1em .45em; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; background: #fff; color: var(--text); white-space: nowrap; }
.os-head > p { color: var(--muted); margin: 14px auto 0; max-width: 680px; }

/* ---------- 지금 쓰는 브라우저에서: 탭 줄 그림 + 세 가지 ---------- */
.os-bw { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.os-bfig { position: relative; margin: 0; padding: 0 0 40px; }
.os-bfig__browser { border-radius: 14px; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 30px 60px -40px rgba(35, 50, 140, .5); overflow: hidden; }
.os-bfig__tabs { display: flex; gap: 2px; padding: 8px 8px 0; background: #e8ebf3; }
.os-bfig__tab { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 34%; padding: 7px 12px; border-radius: 8px 8px 0 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-bfig__tab > i { width: 12px; height: 12px; border-radius: 3px; background: #c5cbd8; flex: none; }
.os-bfig__tab.is-front { background: #fff; color: var(--text); }
.os-bfig__tab.is-front > i { background: #9aa6bf; }
.os-bfig__tab.is-ai { max-width: 46%; color: var(--acc-deep); font-weight: 600; }
.os-bfig__tab img { width: 14px; height: 14px; flex: none; }
.os-bfig__tab b { width: 7px; height: 7px; border-radius: 50%; background: #4a90e2; flex: none; animation: os-blink 1s infinite; }
@keyframes os-blink { 50% { opacity: .2; } }
.os-bfig__addr { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.os-bfig__addr i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c5cbd8; }
.os-bfig__addr span { flex: 1; height: 22px; border-radius: 11px; background: #f1f3f8; }
.os-bfig__page { display: grid; gap: 10px; padding: 22px 24px 120px; }
.os-bfig__page i { height: 10px; border-radius: 5px; background: #eef0f5; }
.os-bfig__page i:nth-child(1) { width: 52%; height: 16px; background: #e3e7f0; }
.os-bfig__page i:nth-child(3) { width: 88%; }
.os-bfig__page i:nth-child(5) { width: 64%; }
/* 옆에 띄운 오픈사이드 창(작게) — 진행 줄 */
.os-bfig__side { position: absolute; inset-inline-end: -12px; bottom: 0; width: min(270px, 58%); padding: 0 12px 12px; border-radius: 10px; background: #fff; border: 1px solid #3d3d3d; box-shadow: 0 30px 50px -24px rgba(15, 23, 42, .5); font: 11.5px/1.5 "Segoe UI", var(--font); letter-spacing: 0; color: #222; }
.os-bfig__cap { display: flex; align-items: center; gap: 6px; margin: 0 -12px 10px; padding: 6px 10px; background: #202020; color: #fff; border-radius: 9px 9px 0 0; font-size: 11px; }
.os-bfig__cap img { width: 12px; height: 12px; }
.os-bfig__bubble { margin: 0 0 8px auto; width: fit-content; max-width: 85%; padding: 6px 10px; border-radius: 14px; background: #e9e9eb; }
.os-bfig__step { color: #666; font-size: 10.5px; padding-inline-start: 14px; }
.os-bfig__step[data-live]::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 5px; border-radius: 3px; background: #4a90e2; animation: os-blink 1s infinite; vertical-align: middle; }
.os-bw__list { display: grid; gap: 14px; }
.os-bw__item { padding: 20px 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 3px solid var(--acc); }
.os-bw__item h3 { font-size: 18px; margin-bottom: 6px; }
.os-bw__item p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- 써 보기: 왼쪽 채팅 창(실제 크기) + 오른쪽 맡겨 볼 일 ---------- */
.os-try { background: linear-gradient(180deg, #fff, var(--bg)); }
.os-try__grid { display: grid; grid-template-columns: 456px minmax(0, 1fr); gap: 48px; align-items: start; max-width: 1000px; margin: 0 auto; }
.os-try__box { position: sticky; top: calc(var(--top) + 20px); min-width: 0; }
.os-try__side .os-small { margin: 16px 0 0; }
.os-ex { display: grid; gap: 12px; }
.os-ex__card {
	display: block; width: 100%; text-align: start; cursor: pointer; font: inherit; color: var(--muted);
	background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; transition: border-color .2s, box-shadow .2s;
}
.os-ex__card b { display: block; font-size: 16px; margin-bottom: 4px; }
.os-ex__card span { display: block; font-size: 14.5px; line-height: 1.55; }
.os-ex__card:hover { border-color: rgba(61, 95, 224, .45); }
.os-ex__card.is-on { border-color: rgba(61, 95, 224, .55); box-shadow: 0 0 0 4px var(--acc-dim); color: var(--text); }
.os-ex__card:disabled { cursor: default; }

/* ---------- 프로그램 창 — 앱 chat.css · setup.css 값 (다크는 data-theme) ---------- */
.os-win {
	--bg: #fff; --fg: #222; --muted: #888; --muted2: #666; --line: #e6e6e6; --line2: #d0d0d0; --bubble: #e9e9eb; --panel: #f3f3f3; --panel2: #f6f6f6;
	--hover: #f0f0f0; --link: #1a5fb4; --send: #222; --sendfg: #fff; --senddis: #cfcfcf; --remote-on: #1a9c4b; --shadow: rgba(0,0,0,.06); --shadow2: rgba(0,0,0,.12); --error: #b3261e;
	--s-border: #e0e0e0; --s-text: #1a1a1a; --s-muted: #888; --s-btn: #fff; --s-accent: #3b82f6; --s-nav: #ddeefc; --s-nav-b: #a8cce6; --s-head: #f5f5f7; --capline: #3d84dd;
	position: relative; width: 456px; height: 538px; flex: none; display: flex; flex-direction: column; border: 1px solid #3d3d3d; background: var(--bg); color: var(--fg);
	box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .45), 0 2px 6px rgba(15, 23, 42, .08);
	font: 12px/1.5 "Segoe UI", "Malgun Gothic", var(--font); letter-spacing: 0; word-break: normal; overflow-wrap: anywhere; text-align: start;
	-webkit-user-select: none; user-select: none; overflow: hidden;
}
.os-win[data-theme="dark"] {
	--bg: #1e1e1e; --fg: #e4e4e4; --muted: #8a8a8a; --muted2: #a0a0a0; --line: #3a3a3a; --line2: #4a4a4a; --bubble: #333; --panel: #2c2c2c; --panel2: #262626;
	--hover: #333; --link: #7cb0ff; --send: #e4e4e4; --sendfg: #1e1e1e; --senddis: #555; --remote-on: #4cd47a; --shadow: rgba(0,0,0,.3); --shadow2: rgba(0,0,0,.5); --error: #ff7b72;
	--s-border: #3a3a3a; --s-text: #e0e0e0; --s-muted: #999; --s-btn: #333; --s-nav: #1f3a5a; --s-nav-b: #35608f; --s-head: #252526; --capline: #3a3a3a;
}
.os-win b { color: inherit; }
.os-win button, .os-win input, .os-win select, .os-win textarea { font: inherit; color: inherit; letter-spacing: 0; box-sizing: border-box; }
.os-ic { display: block; width: 17px; height: 17px; }

/* 제목 줄 (klib-caption): 높이 32, 늘 #202020, 단추 폭 46, 아래 1px 선 */
.os-cap { display: flex; align-items: center; height: 33px; flex: none; background: #202020; color: #fff; border-bottom: 1px solid var(--capline); }
.os-cap img { width: 16px; height: 16px; margin-inline-start: 10px; }
.os-cap__t { flex: 1; min-width: 0; padding-inline-start: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.os-cap img + .os-cap__t { padding-inline-start: 8px; }
.os-cap__b { position: relative; width: 46px; height: 32px; flex: none; display: grid; place-items: center; border: 0; padding: 0; background: none; color: #fff; }
.os-cap__gear { cursor: pointer; }
.os-cap__gear .os-ic { width: 16px; height: 16px; }
.os-cap__gear:hover { background: #3c3c3c; }
.os-cap__min::before { content: ""; width: 10px; border-top: 1px solid #fff; }
.os-cap__max::before { content: ""; width: 9px; height: 9px; border: 1px solid #fff; }
.os-cap__x::before, .os-cap__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; border-top: 1px solid #fff; transform: translate(-50%, -50%) rotate(45deg); }
.os-cap__x::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* 채팅 화면 */
.os-chat { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); }
.os-tb { flex: none; display: flex; align-items: center; gap: 2px; padding: 5px 8px; padding-inline-start: 14px; border-bottom: 1px solid var(--line); }
.os-sess { flex: 1; min-width: 0; display: flex; align-items: center; }
.os-sessbox { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px; border-radius: 7px; font-weight: 500; }
.os-sesstitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-pen { display: none; width: 13px; height: 13px; flex: none; color: var(--muted2); }
.os-sessbox.can { cursor: text; }
.os-sessbox.can:hover { background: var(--hover); }
.os-sessbox.can:hover .os-pen { display: block; }
.os-sessedit { display: none; flex: 1; min-width: 0; font-weight: 500; background: var(--panel2); border: 1px solid var(--line2); border-radius: 7px; padding: 2px 7px; outline: none; -webkit-user-select: text; user-select: text; }
.os-sess.is-edit .os-sessbox { display: none; }
.os-sess.is-edit .os-sessedit { display: block; }
.os-tbtn { display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; border: 0; padding: 0; border-radius: 7px; background: none; cursor: pointer; color: var(--muted2); }
.os-tbtn:hover { background: var(--hover); color: var(--fg); }
.os-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 16px 8px; -webkit-user-select: text; user-select: text; }
.os-user { display: flex; justify-content: flex-end; margin: 24px 0 6px; }
.os-log > .os-user:first-child { margin-top: 0; }
.os-bubble { background: var(--bubble); border-radius: 18px; padding: 8px 14px; max-width: 75%; white-space: pre-wrap; }
.os-ans { padding: 4px 0; margin: 6px 0; }
.os-ans p { margin: 0 0 8px; }
.os-ans p:last-child { margin-bottom: 0; }
.os-ans ul { margin: 4px 0 8px; padding-inline-start: 22px; }
.os-ans li { margin: 1px 0; }
.os-ans table { border-collapse: collapse; margin: 6px 0; }
.os-ans th, .os-ans td { border: 1px solid var(--line2); padding: 3px 9px; text-align: start; }
.os-ans th { background: var(--panel); }
.os-note { color: var(--muted); font-size: 11px; margin: 6px 0; white-space: pre-line; }
/* 진행 상자: 요약을 누르면 펼침 · 접힘 */
.os-run { margin: 8px 0; }
.os-summary { cursor: pointer; color: var(--muted2); font-size: 11px; }
.os-summary::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-inline-end: 2px; vertical-align: -2px; background: var(--muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 2.5L8 6l-3.5 3.5'/%3E%3C/svg%3E") center / 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 2.5L8 6l-3.5 3.5'/%3E%3C/svg%3E") center / 12px no-repeat; color: var(--muted); }   /* 앱 icons/chevron.svg */
.os-run.is-open .os-summary::before { transform: rotate(90deg); }
[dir="rtl"] .os-run:not(.is-open) .os-summary::before { transform: rotate(180deg); }
.os-step { display: none; color: var(--muted2); font-size: 11px; padding-inline-start: 14px; margin: 2px 0; }
.os-run.is-open .os-step { display: block; }
.os-step.is-live::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 5px; border-radius: 3px; background: #4a90e2; animation: os-blink 1s infinite; vertical-align: middle; }
/* 파일 카드 */
.os-file { margin: 8px 0; display: inline-block; max-width: 100%; border: 1px solid var(--line2); background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.os-file__name { display: block; font-size: 12px; margin-bottom: 8px; word-break: break-all; }
.os-file__btns { display: flex; gap: 6px; }
.os-file button { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line2); background: var(--panel2); border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 11px; }
.os-file button:hover { background: var(--hover); }
.os-file .os-ic { width: 12px; height: 12px; }
/* 아래 입력 영역 */
.os-composer { flex: none; padding: 6px 12px 0; }
.os-box { display: flex; align-items: flex-end; gap: 6px; border: 1px solid var(--line2); border-radius: 21px; background: var(--bg); padding: 5px; padding-inline-start: 13px; box-shadow: 0 1px 4px var(--shadow); }
.os-attach { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; margin-inline-start: -6px; padding: 0; border: 0; border-radius: 15px; background: transparent; color: var(--muted); }
.os-input { flex: 1; min-width: 0; height: 30px; border: 0; outline: none; padding: 6px 0; margin: 0; line-height: 18px; resize: none; overflow: hidden; background: transparent; white-space: nowrap; text-overflow: ellipsis; cursor: default; }
.os-input::placeholder { color: var(--muted); }
.os-send { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 15px; background: var(--send); color: var(--sendfg); cursor: pointer; }
.os-send:disabled { background: var(--senddis); cursor: default; }
.os-send .os-stopic { display: none; width: 14px; height: 14px; }
.os-send.is-busy .os-ic:first-child { display: none; }
.os-send.is-busy .os-stopic { display: block; }
.os-bar { display: flex; align-items: stretch; margin: 10px -12px 0; border-top: 1px solid var(--line); font-size: 11px; line-height: 16px; color: var(--muted); min-height: 20px; }
.os-bar > * { flex-shrink: 0; }
.os-remote, .os-context { display: flex; align-items: center; padding: 2px 9px; border: 0; border-inline-end: 1px solid var(--line); background: none; color: inherit; }
.os-remote .os-ic, .os-context .os-ic { width: 15px; height: 15px; }
.os-context { cursor: pointer; }
.os-context:hover { background: var(--hover); }
.os-context.on { color: var(--remote-on); }
.os-context .os-paused, .os-context:not(.on) .os-ic:first-child { display: none; }
.os-context:not(.on) .os-paused { display: block; }
.os-runstat { padding: 2px 0; padding-inline-start: 8px; white-space: pre; }
.os-status { flex: 1 1 auto !important; min-width: 0; padding: 2px 8px; padding-inline-start: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-usage { display: flex; align-items: center; padding: 2px 10px; border-inline-start: 1px solid var(--line); }
.os-usage i { display: block; width: 11px; height: 11px; border-radius: 50%; background: conic-gradient(var(--muted2) calc(var(--p) * 1%), var(--line2) 0); }
.os-usage i::after { content: ""; display: block; width: 5px; height: 5px; margin: 3px; border-radius: 50%; background: var(--bg); }
.os-sel { display: flex; align-items: center; padding: 2px 12px; border-inline-start: 1px solid var(--line); white-space: nowrap; }
/* 떠 있는 목록 (최근 세션) */
.os-menu { position: absolute; top: 34px; inset-inline-end: 44px; z-index: 10; min-width: 180px; max-width: 300px; max-height: 260px; overflow-y: auto; padding: 4px 0; background: var(--bg); border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 4px 16px var(--shadow2); }
.os-menu[hidden] { display: none; }
.os-menu button { display: block; width: 100%; padding: 5px 14px; border: 0; background: none; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.os-menu button:hover { background: var(--hover); }
.os-menu .is-none { color: var(--muted); cursor: default; }
/* ---------- 기능: 맡길 범위 띠 + 카드 ---------- */
.os-scope {
	display: flex; gap: 20px; align-items: center; max-width: 960px; margin: 0 auto 28px; padding: 24px 28px; border-radius: 20px;
	background: linear-gradient(135deg, #eef2fe, #fff 70%); border: 1px solid rgba(61, 95, 224, .3);
}
.os-scope__icon { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--acc); color: #fff; box-shadow: 0 12px 24px -12px rgba(61, 95, 224, .9); }
.os-scope__icon svg { width: 30px; height: 30px; }
.os-scope h3 { font-size: 20px; margin-bottom: 4px; }
.os-scope p { margin: 0; color: var(--muted); }
.os-card h3 { margin-top: 14px; }
.os-card__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--acc-dim); color: var(--acc-deep); }
.os-card__ic .os-ic { width: 20px; height: 20px; }

/* ---------- 프로그램 미리보기: 탭 + 창 ---------- */
.os-appsec { background: linear-gradient(180deg, #fff, var(--bg)); }
.os-appv { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; align-items: start; }
.os-appv__side { position: sticky; top: calc(var(--top) + 24px); }
.os-appv__tabs { display: grid; gap: 10px; }
.os-appv__tabs [role="tab"] { text-align: start; cursor: pointer; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; transition: border-color .2s, box-shadow .2s; }
.os-appv__tabs [role="tab"] > b { display: block; font-size: 16px; margin-bottom: 2px; }
.os-appv__tabs [role="tab"] span { font-size: 14px; line-height: 1.55; display: block; }
.os-appv__tabs [role="tab"][aria-selected="true"] { border-color: rgba(61, 95, 224, .45); box-shadow: 0 0 0 4px var(--acc-dim); color: var(--text); }
.os-appv__view {
	min-height: 620px; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 40px 24px; border-radius: 24px; overflow: hidden;
	background: radial-gradient(80% 70% at 50% 30%, rgba(109, 140, 240, .14), transparent 70%), linear-gradient(160deg, #e9eefc, #f6f8fe);
	border: 1px solid var(--line);
}
.os-appv__pane { width: 100%; min-width: 0; display: grid; justify-items: center; }
.os-appv__pane[hidden] { display: none; }

/* 환경설정 내용 560x460 (setup.css) */
.os-win--prefs { width: 562px; height: auto; }
.os-p { height: 460px; display: flex; color: var(--s-text); }
.os-p-side { width: 120px; flex: none; display: flex; flex-direction: column; gap: 12px; padding-block: 8px; padding-inline: 8px 7px; border-inline-end: 1px solid var(--s-border); }
.os-p .os-p-cat { height: 32px; flex: none; border: 1px solid transparent; border-radius: 5px; background: transparent; cursor: pointer; }
.os-p .os-p-cat:hover, .os-p .os-p-cat.is-on { background: var(--s-nav); border-color: var(--s-nav-b); }
.os-p-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.os-p-head { height: 56px; flex: none; padding: 18px 24px 0; border-bottom: 1px solid var(--s-border); }
.os-p-title { font-size: 19px; font-weight: 700; line-height: 25px; }
.os-p-panes { flex: 1; min-height: 0; padding: 16px 24px; display: flex; flex-direction: column; line-height: 1.4; }
.os-p-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.os-p-pane[hidden] { display: none; }
.os-p-row { height: 28px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.os-p button { height: 28px; padding: 0 12px; border: 1px solid var(--s-border); border-radius: 6px; background: var(--s-btn); cursor: pointer; }
.os-p button:hover { border-color: var(--s-muted); }
.os-p select { width: 170px; height: 28px; padding: 0 8px; border: 1px solid var(--s-border); border-radius: 6px; background: var(--s-btn); color: var(--s-text); outline: none; }
.os-p select:focus, .os-p-text:focus { border-color: var(--s-accent); }
.os-p input[type="checkbox"] { -webkit-appearance: none; appearance: none; margin: 0; width: 16px; height: 16px; flex: none; display: grid; place-items: center; border: 1px solid var(--s-muted); border-radius: 4px; background: var(--s-btn); cursor: pointer; }
.os-p input[type="checkbox"]:checked { background: var(--s-accent); border-color: var(--s-accent); }
.os-p input[type="checkbox"]:checked::after { content: ""; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.os-p-wide { width: 170px; }
.os-p-muted { color: var(--s-muted); margin: 0; }
.os-p-label { flex: none; }
.os-p-text { flex: none; padding: 4px 6px; border: 1px solid var(--s-border); border-radius: 6px; background: var(--s-btn); color: var(--s-text); resize: none; outline: none; -webkit-user-select: text; user-select: text; }
.os-p-text--excl { height: 90px; }
.os-p-text--read { height: 150px; white-space: pre; }
.os-p-btns { display: flex; gap: 8px; flex: none; }
.os-p-btns button { width: 92px; padding: 0; }
.os-p-btns.is-end { justify-content: flex-end; }
.os-p-btns.is-end button { width: auto; min-width: 110px; padding: 0 12px; }
.os-p-acct { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--s-border); }
.os-p-acct table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.os-p-acct th { height: 22px; padding: 0 6px; background: var(--s-head); border-bottom: 1px solid var(--s-border); font-weight: 400; text-align: start; }
.os-p-acct td { height: 22px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.os-p-acct .c-use { width: 28px; text-align: center; }
.os-p-acct .c-kind { width: 110px; }
.os-p-acct .c-state { width: 76px; }
.os-p-acct tr.is-sel td { background: var(--s-nav); }
.os-p-tg { display: flex; gap: 12px; }
.os-p-tg[hidden] { display: none; }
.os-p-tg > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.os-p-tg p { margin: 0; }
/* QR 자리 — 모양만 (찍어도 아무 데도 가지 않는다) */
.os-p-qr { flex: none; width: 132px; height: 132px; background: #fff; border: 6px solid #fff; outline: 1px solid var(--s-border);
	background-image: linear-gradient(90deg, #111 50%, transparent 0), linear-gradient(#111 50%, transparent 0); background-size: 12px 12px, 12px 18px; opacity: .85; }
.os-p-about { flex: 1; }
.os-p-id { display: flex; align-items: center; gap: 14px; font-size: 19px; font-weight: 700; }
.os-p-id img { width: 48px; height: 48px; }
.os-p-link { color: var(--s-accent); text-decoration: none; }
.os-p-link:hover { text-decoration: underline; }
.os-p-oss { flex: 1; min-height: 120px; padding: 10px; border: 1px solid var(--s-border); border-radius: 4px; display: grid; align-content: start; gap: 8px; overflow: hidden; }
.os-p-oss i { height: 6px; border-radius: 3px; background: var(--s-border); }
.os-p-oss i:nth-child(3n) { width: 60%; } .os-p-oss i:nth-child(4n) { width: 82%; }

/* 다운로드 세 장 나란히 */
.os-dl--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; }

/* ---------- 반응형 ---------- */
@media (max-width: 1020px) {
	.os-try__grid { grid-template-columns: 1fr; gap: 28px; }
	.os-try__box { position: static; display: grid; justify-items: center; }
	.os-ex { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.os-bw { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.os-appv { grid-template-columns: 1fr; gap: 20px; }
	.os-appv__side { position: static; }
	.os-appv__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.os-dl--3 { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 860px) {
	:root { --top: 56px; }
	.os-wrap { padding: 0 16px; }
	.os-nav { display: none; }
	.os-top__in { justify-content: space-between; gap: 10px; }
	.os-lang, .os-nav + .os-lang { margin-inline-start: auto; }
	.os-lang summary span { display: none; }
	.os-lang summary { padding: 0 10px; }
	.os-top__in { position: relative; }
	.os-lang { position: static; }
	.os-lang ul { inset-inline-end: 16px; width: min(300px, calc(100vw - 32px)); }   /* 메뉴 목록은 머리줄 오른쪽 끝에 맞춘다 (단추에 맞추면 긴 언어 이름일 때 왼쪽이 잘림) */
	.os-hero { padding: 40px 0 56px; }
	.os-hero__grid { grid-template-columns: 1fr; gap: 24px; }
	.os-chip { padding: 8px 11px; font-size: 13px; }
	.os-sec { padding: 72px 0; }
	.os-head { margin-bottom: 36px; }
	.os-ex { grid-template-columns: 1fr; }
	.os-grid--3 { grid-template-columns: 1fr; }
	.os-scope { flex-direction: column; align-items: flex-start; padding: 20px; }
	.os-bfig__side { inset-inline-end: 0; }
	.os-appv__tabs { gap: 6px; }
	.os-appv__tabs [role="tab"] { padding: 10px; text-align: center; border-radius: 10px; }
	.os-appv__tabs [role="tab"] b { font-size: 14px; margin: 0; }
	.os-appv__tabs [role="tab"] span { display: none; }
	.os-appv__view { padding: 28px 12px; min-height: 0; }
	.os-dl { grid-template-columns: 1fr; }
	.os-foot__in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
	.os-hero__title { font-size: 34px; }
	.os-bfig__tab { padding: 6px 8px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.os-js .os-reveal { opacity: 1; transform: none; }
}

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

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