/* SSemRelay Console website — static, no external fonts or scripts. Same system as the SSem TouchOTP /
   hunsdoc sites; blue brand = the console app icon (#2563C9). The screen mockups are plain HTML with
   made-up data (no real hosts, projects or conversations). */
:root {
  --brand: #2563c9;
  --brand-2: #3b82f6;
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #edf2fa;
  --text: #0f1729;
  --muted: #4f5b6e;
  --border: #dbe2ec;
  --warn-bg: #fff6e5;
  --warn-border: #f2c26b;
  --warn-text: #6b4a00;
  --ok: #14925a;
  --link: #1f56b0;
  --focus: #1f56b0;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(15, 23, 41, 0.06), 0 8px 24px rgba(15, 23, 41, 0.07);
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "D2Coding", monospace;
  /* architecture diagram */
  --d-mac: #e8f0fd;
  --d-mac-line: #9bb8ea;
  --d-srv: #eef7f1;
  --d-srv-line: #9fd0b2;
  --d-web: #f4effd;
  --d-web-line: #c3b1ef;
  --d-arrow: #4f5b6e;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #6aa6f5;
    --bg: #0b0e14;
    --surface: #131822;
    --surface-2: #1a2130;
    --text: #e6e9ef;
    --muted: #9aa4b4;
    --border: #262d3a;
    --warn-bg: #2a2110;
    --warn-border: #7a5a1c;
    --warn-text: #f3d596;
    --ok: #3cc98a;
    --link: #8fbcf7;
    --focus: #8fbcf7;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    --d-mac: #17243a;
    --d-mac-line: #3c5f97;
    --d-srv: #142620;
    --d-srv-line: #2f6b4c;
    --d-web: #221b36;
    --d-web-line: #5b4a91;
    --d-arrow: #9aa4b4;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, .button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

img { max-width: 100%; height: auto; }
code, kbd, .mono { font-family: var(--mono); font-size: 0.9em; }
code { padding: 1px 5px; border-radius: 6px; background: var(--surface-2); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border-radius: 8px;
  z-index: 10;
}
.skip-link:focus { left: 8px; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 800px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  min-height: 60px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand .accent { color: var(--brand); }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
.site-nav a { color: var(--muted); text-decoration: none; padding: 4px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }

/* Header inquiry button (same place as the SSemRepo / SSemProHub sites) */
.site-nav a.nav-cta {
  color: var(--link);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border));
  border-radius: 999px;
  padding: 3px 12px;
  font-weight: 700;
}
.site-nav a.nav-cta:hover { color: var(--link); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border));
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--link);
  white-space: nowrap;
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid transparent;
}
.button.primary {
  color: #fff;
  background: linear-gradient(135deg, #2563c9, #1d3f99);
  box-shadow: 0 6px 18px rgba(37, 99, 201, 0.28);
}
.button.primary:hover { filter: brightness(1.08); }
.button.secondary { color: var(--text); background: var(--surface); border-color: var(--border); }
.button.secondary:hover { border-color: var(--brand); }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 14px; }

/* Hero */
.hero { padding: 56px 0 40px; }
.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--link);
  background: color-mix(in srgb, var(--brand) 13%, transparent);
  padding: 4px 12px;
  border-radius: 999px;
}
h1 { font-size: clamp(34px, 5.2vw, 54px); line-height: 1.15; letter-spacing: -0.02em; margin: 18px 0 16px; }
h1 .grad {
  background: linear-gradient(135deg, #2f74e0, #1d3f99);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-color-scheme: dark) {
  h1 .grad { background: linear-gradient(135deg, #9cc5ff, #5b95ec); -webkit-background-clip: text; background-clip: text; }
}
.lead { font-size: 19px; color: var(--muted); margin: 0; max-width: 34em; }
.lead strong { color: var(--text); }
.meta { font-size: 14px; color: var(--muted); margin: 0; }

/* ───────── Screen mockups (made-up data) — always dark, like the console's dark theme ───────── */
.mock {
  --m-bg: #0f1115;
  --m-bar: #12151b;
  --m-panel: #161a21;
  --m-sunk: #12151b;
  --m-line: #262b35;
  --m-line2: #333a47;
  --m-text: #e6e8eb;
  --m-text2: #c4cad3;
  --m-muted: #9aa3af;
  --m-accent: #6aa6f5;
  --m-accent-ink: #0b1526;
  --m-warn: #e8a33d;
  --m-warn-bg: #221b10;
  --m-warn-text: #f3c98a;
  --m-user: #23324a;
  --m-ok: #7fd0a2;
  --m-add: #7fd0a2;
  --m-del: #f2a3a3;
  font-family: var(--font);
  color: var(--m-text);
  background: var(--m-bg);
  border: 1px solid #262b35;
  box-shadow: var(--shadow);
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
}
.mock .mono { font-size: 12px; }

/* Phone */
.phone-wrap { display: flex; justify-content: center; min-width: 0; }
.phone {
  width: 100%;
  max-width: 360px;
  border-radius: 36px;
  border: 10px solid #1c2230;
  outline: 1px solid #2b3446;
  display: flex;
  flex-direction: column;
}
.ph-head { padding: 14px 14px 10px; background: var(--m-bar); border-bottom: 1px solid var(--m-line); }
.ph-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.ph-title { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-sub { color: var(--m-muted); font-size: 12px; margin-top: 2px; }
.st { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.st.wait { background: var(--m-warn); color: #1a1205; }
.st.run { background: #1f3a63; color: #b9d5fa; }
.st.done { background: #23402f; color: var(--m-ok); }
.st.idle { background: #2b3140; color: var(--m-text2); }
.ph-body { padding: 12px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.m-user { align-self: flex-end; max-width: 86%; background: var(--m-user); border: 1px solid #34496b; border-radius: 14px 14px 4px 14px; padding: 7px 11px; }
.m-asst { color: var(--m-text2); }
.m-asst::before { content: "●"; color: var(--m-text2); font-size: 9px; margin-right: 7px; vertical-align: 2px; }
.m-tool { border: 1px solid var(--m-line); border-radius: 10px; background: var(--m-panel); padding: 7px 9px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.m-tool .tn { display: inline-block; font-family: var(--mono); font-size: 11.5px; background: #222937; border-radius: 5px; padding: 0 6px; margin-right: 6px; }
.m-tool .tl { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-diff { font-family: var(--mono); font-size: 11.5px; line-height: 1.45; display: grid; }
.m-diff .a { color: var(--m-add); }
.m-diff .d { color: var(--m-del); }
.m-diff .n { color: var(--m-muted); }
.m-plus { color: var(--m-add); }
.m-minus { color: var(--m-del); }
.m-perm { border: 1px solid #8a6424; background: var(--m-warn-bg); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.m-perm .pt { color: var(--m-warn-text); font-weight: 700; font-size: 12.5px; }
.m-perm .pc { font-family: var(--mono); font-size: 12px; background: #0f1115; border-radius: 7px; padding: 5px 8px; color: var(--m-text); }
.m-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.m-btn { flex: 1 1 auto; text-align: center; border: 1px solid var(--m-line2); background: var(--m-panel); border-radius: 9px; padding: 5px 8px; font-weight: 600; font-size: 12px; color: var(--m-text); }
.m-btn.p { background: var(--m-accent); color: var(--m-accent-ink); border-color: transparent; }
.m-btn.w { background: var(--m-warn); color: #1a1205; border-color: transparent; }
.ph-act { margin: 0 12px; border: 1px solid var(--m-line); border-radius: 10px; padding: 5px 9px; display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; color: var(--m-text2); }
.ph-act::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--m-accent); flex: none; }
.ph-input { margin: 9px 12px 10px; border: 1px solid var(--m-line2); border-radius: 12px; padding: 8px 11px; color: var(--m-muted); display: flex; justify-content: space-between; align-items: center; }
.ph-send { width: 26px; height: 26px; border-radius: 8px; background: var(--m-accent); display: grid; place-items: center; color: var(--m-accent-ink); font-weight: 800; }
.ph-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--m-line); background: var(--m-bar); padding: 7px 4px 9px; text-align: center; font-size: 10.5px; color: var(--m-muted); }
.ph-tabs .on { color: var(--m-accent); font-weight: 700; }

/* Small screen panels (feature tour) */
.tour { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tour figure { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tour figcaption { font-size: 14.5px; color: var(--muted); }
.tour figcaption strong { color: var(--text); display: block; font-size: 16px; }
.panel { border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.panel .ph-title { font-size: 14px; }
.m-q { border: 1px solid var(--m-accent); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 7px; background: var(--m-panel); }
.m-q .qt { color: var(--m-accent); font-weight: 700; font-size: 12.5px; }
.m-chip { display: inline-block; font-size: 11px; border: 1px solid var(--m-line2); border-radius: 5px; padding: 0 6px; color: var(--m-text2); }
.m-opt { border: 1px solid var(--m-line2); border-radius: 9px; padding: 6px 9px; display: flex; flex-direction: column; }
.m-opt b { font-size: 12.5px; }
.m-opt span { font-size: 11px; color: var(--m-muted); }
.m-opt.on { border-color: var(--m-accent); box-shadow: inset 0 0 0 1px var(--m-accent); background: #1d2a40; }
.m-field { border: 1px solid var(--m-line2); border-radius: 9px; padding: 6px 9px; color: var(--m-muted); font-size: 12px; }
.m-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.m-kpi { border: 1px solid var(--m-line); border-radius: 10px; padding: 7px 9px; background: var(--m-panel); }
.m-kpi .k { font-size: 11px; color: var(--m-muted); }
.m-kpi .v { font-size: 17px; font-weight: 700; }
.m-kpi .dlt { font-size: 11px; color: var(--m-text2); }
.m-meter { display: grid; grid-template-columns: 52px 1fr 36px; align-items: center; gap: 7px; font-size: 11.5px; color: var(--m-text2); }
.m-bar { height: 7px; border-radius: 4px; background: var(--m-sunk); border: 1px solid var(--m-line); overflow: hidden; }
.m-bar i { display: block; height: 100%; background: var(--m-accent); }
.m-bar i.hi { background: var(--m-warn); }
.m-meter b { text-align: right; font-family: var(--mono); font-size: 11.5px; }
.m-note { font-size: 11px; color: var(--m-warn-text); background: var(--m-warn-bg); border: 1px solid #8a6424; border-radius: 8px; padding: 5px 8px; }
.m-cols { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; align-items: end; height: 64px; border-bottom: 1px solid var(--m-line); padding-bottom: 2px; }
.m-cols i { display: block; border-radius: 2px 2px 0 0; background: var(--m-accent); }
.m-cols i.alt { background: #b08cf0; }
.m-cols i.sp { background: var(--m-warn); }
.h1 { height: 18%; } .h2 { height: 30%; } .h3 { height: 42%; } .h4 { height: 55%; } .h5 { height: 68%; } .h6 { height: 82%; } .h7 { height: 100%; }
.m-steps { display: flex; flex-direction: column; gap: 6px; }
.m-step { display: grid; grid-template-columns: 18px 1fr auto; gap: 7px; align-items: center; font-size: 12px; color: var(--m-text2); }
.m-step .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--m-line2); }
.m-step.done .dot { background: var(--m-ok); border-color: var(--m-ok); }
.m-step.now .dot { border-color: var(--m-accent); background: #1d2a40; }
.m-step.now { color: var(--m-text); font-weight: 600; }
.m-step em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--m-muted); }
.m-prog { height: 8px; border-radius: 4px; background: var(--m-sunk); border: 1px solid var(--m-line); overflow: hidden; }
.m-prog i { display: block; height: 100%; width: 62%; background: var(--m-accent); }
/* Bar widths (no inline styles under the CSP) */
.w7 { width: 7%; } .w23 { width: 23%; } .w29 { width: 29%; } .w48 { width: 48%; } .w64 { width: 64%; } .w71 { width: 71%; }

/* ───────── Desktop browser window (made-up data) — same dark palette as the phone ───────── */
.browser { border-radius: 12px; display: flex; flex-direction: column; font-size: 12.5px; }
.bw-bar { display: flex; align-items: center; gap: 12px; padding: 7px 12px; background: #1b2029; border-bottom: 1px solid var(--m-line); }
.bw-bar::after { content: ""; width: 42px; flex: none; }
.bw-dots { display: flex; gap: 6px; flex: none; width: 42px; }
.bw-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e0625a; }
.bw-dots i + i { background: #d9a43a; }
.bw-dots i + i + i { background: #3fae58; }
.bw-url { flex: 0 1 340px; margin: 0 auto; text-align: center; font-size: 11px; color: var(--m-muted); background: var(--m-bg); border: 1px solid var(--m-line); border-radius: 7px; padding: 1px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; background: var(--m-bar); border-bottom: 1px solid var(--m-line); }
.dk-brand { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.dk-logo { width: 24px; height: 24px; border-radius: 6px; background: var(--m-sunk); border: 1px solid var(--m-line2); display: grid; place-items: center; font-family: var(--mono); font-size: 10.5px; font-weight: 700; }
.dk-brand b { font-size: 13.5px; }
.dk-conn { font-size: 11px; color: var(--m-muted); display: inline-flex; align-items: center; gap: 5px; }
.dk-conn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--m-ok); }
.dk-acts { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.dk-pill { background: var(--m-warn); color: #1a1205; font-weight: 700; border-radius: 999px; padding: 1px 9px; font-size: 11.5px; }
.dk-btn { flex: none; border: 1px solid var(--m-line2); border-radius: 7px; padding: 1px 9px; font-size: 11.5px; color: var(--m-text); background: var(--m-panel); white-space: nowrap; font-family: var(--font); }
.dk-btn.p, .dk-btn.on { background: var(--m-accent); color: var(--m-accent-ink); border-color: transparent; font-weight: 700; }
.dk-btn.danger { border-color: #5a3a3a; background: #2a1a1a; color: #f2c4c4; }
.dk-btn.mono { font-family: var(--mono); font-size: 11px; }
.dk-body { flex: 1; display: grid; grid-template-columns: 188px minmax(0, 1fr) 206px; min-height: 0; }
.dk-body.rails { grid-template-columns: 108px minmax(0, 1fr) 54px; }
.dk-body.files { grid-template-columns: 108px minmax(0, 1fr); }
.dk-body.one { grid-template-columns: minmax(0, 1fr); }
.dk-list, .dk-side { padding: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--m-bg); min-width: 0; }
.dk-list { border-right: 1px solid var(--m-line); }
.dk-side { border-left: 1px solid var(--m-line); gap: 8px; }
.dk-ph { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 12.5px; padding: 0 2px 2px; }
.dk-ph span { font-weight: 400; font-size: 10.5px; color: var(--m-muted); }
.dk-card { border: 1px solid var(--m-line); background: var(--m-panel); border-radius: 9px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dk-card.on { border-color: var(--m-accent); box-shadow: inset 0 0 0 1px var(--m-accent); }
.dk-card .r1 { display: flex; justify-content: space-between; gap: 6px; align-items: center; min-width: 0; }
.dk-card .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-card .hs { font-size: 10.5px; color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-card .lt { font-size: 11px; color: var(--m-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-card .am { font-family: var(--mono); font-size: 10.5px; color: var(--m-accent); }
.dk-chip { align-self: flex-start; font-size: 10px; border-radius: 5px; padding: 0 5px; background: #1c2638; color: #b9d5fa; }
.dk-main { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; }
.dk-head { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-bottom: 1px solid var(--m-line); background: var(--m-bar); }
.dk-ttl { flex: 1; min-width: 0; overflow: hidden; }
@container (max-width: 512px) { .dk-head .o1 { display: none; } }
@container (max-width: 400px) { .dk-head .o2 { display: none; } }
.dk-ttl .t { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; white-space: nowrap; }
.dk-ttl .s { font-size: 10.5px; color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-stream { flex: 1; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dk-stream .m-user { max-width: 78%; }
.m-diff.wide span { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.m-diff.wide b { display: inline-block; width: 2.6ch; margin-right: 1ch; text-align: right; font-weight: 400; color: var(--m-muted); }
.m-diff.wide .a { background: rgba(127, 208, 162, 0.1); }
.m-diff.wide .d { background: rgba(242, 163, 163, 0.1); }
.m-out { font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--m-text2); display: grid; min-width: 0; }
.m-out span { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.m-out .bad { color: var(--m-del); }
.m-out .good { color: var(--m-add); }
.m-out .more { color: var(--m-accent); }
.dk-composer { padding: 8px 12px 9px; border-top: 1px solid var(--m-line); display: flex; flex-direction: column; gap: 6px; }
.dk-act { display: flex; align-items: center; gap: 8px; border: 1px solid var(--m-line); border-radius: 9px; padding: 3px 5px 3px 9px; font-family: var(--mono); font-size: 11px; color: var(--m-text2); }
.dk-act::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--m-accent); flex: none; }
.dk-act > span:first-child { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dk-quick { display: flex; gap: 5px; flex-wrap: wrap; }
.dk-quick span { font-family: var(--mono); font-size: 10.5px; border: 1px solid var(--m-line2); border-radius: 6px; padding: 0 6px; color: var(--m-text2); }
.dk-input { display: flex; align-items: center; gap: 8px; border: 1px solid var(--m-line2); border-radius: 10px; padding: 4px 5px 4px 8px; color: var(--m-muted); }
.dk-input .ph { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-input svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dk-input .ph-send { width: 24px; height: 24px; }
.dk-hint { font-size: 10.5px; color: var(--m-muted); }
.dk-box { border: 1px solid var(--m-line); border-radius: 9px; background: var(--m-panel); padding: 7px 8px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dk-box h4 { margin: 0; font-size: 11.5px; color: var(--m-text2); display: flex; align-items: center; gap: 6px; }
.dk-n { background: var(--m-warn); color: #1a1205; border-radius: 999px; padding: 0 6px; font-size: 10.5px; }
.m-perm.sm { padding: 7px; gap: 5px; border-radius: 9px; }
.m-perm.sm .pt, .m-perm.sm .pc { font-size: 11px; }
.m-perm.sm .m-btn { font-size: 11px; padding: 3px 6px; }
.dk-host { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; white-space: nowrap; }
.dk-host b { font-weight: 600; }
.dk-host b::before { content: "●"; color: var(--m-ok); font-size: 8px; margin-right: 5px; vertical-align: 2px; }
.dk-host span { color: var(--m-muted); }
.dk-ev { font-family: var(--mono); font-size: 10.5px; color: var(--m-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-ev em { font-style: normal; color: var(--m-muted); margin-right: 6px; }

/* Folded side panes: session summary tiles (left) and an icon rail (right) */
.dk-rail { border-right: 1px solid var(--m-line); padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; background: var(--m-bg); min-width: 0; }
.rt { border: 1px solid var(--m-line); border-radius: 8px; padding: 5px 7px; background: var(--m-panel); min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rt.on { border-color: var(--m-accent); box-shadow: inset 0 0 0 1px var(--m-accent); }
.rt .r { display: flex; align-items: center; gap: 5px; min-width: 0; }
.rt .r b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.rt .r em { font-style: normal; font-size: 10px; font-weight: 700; background: var(--m-warn); color: #1a1205; border-radius: 999px; padding: 0 5px; }
.rt .rs { font-family: var(--mono); font-size: 10.5px; color: var(--m-text2); }
.rt .ru { font-size: 10px; color: #b9d5fa; }
.sd { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--m-muted); }
.sd.run { background: var(--m-accent); }
.sd.wait { background: var(--m-warn); }
.sd.idle { background: var(--m-ok); }
.rt-more { font-size: 10.5px; color: var(--m-muted); text-align: center; border: 1px dashed var(--m-line2); border-radius: 7px; padding: 1px; }
.dk-rrail { border-left: 1px solid var(--m-line); background: var(--m-bg); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 4px; }
.ri { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--m-text2); }
.ri svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ri.w { color: var(--m-warn); }
.ri b { font-family: var(--mono); font-weight: 600; }

/* File explorer + editor (two groups side by side) */
.fx { flex: 1; display: grid; grid-template-columns: 140px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.fx-tree { border-right: 1px solid var(--m-line); padding: 8px 6px; display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; background: var(--m-bg); min-width: 0; }
.fx-tt { font-size: 10.5px; color: var(--m-muted); padding: 0 4px 4px; }
.fx-i { padding: 1px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--m-text2); }
.fx-i.d::before { content: "▸ "; color: var(--m-muted); }
.fx-i.d.o::before { content: "▾ "; }
.fx-i.l2 { padding-left: 20px; }
.fx-i.on { background: #1d2a40; color: var(--m-text); }
.fx-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.fx-g { display: flex; flex-direction: column; min-width: 0; }
.fx-g + .fx-g { border-left: 1px solid var(--m-line); }
.fx-tabs { display: flex; border-bottom: 1px solid var(--m-line); background: var(--m-bar); font-size: 11px; white-space: nowrap; overflow: hidden; }
.fx-tabs span { padding: 4px 10px; color: var(--m-muted); border-right: 1px solid var(--m-line); }
.fx-tabs span.on { color: var(--m-text); background: var(--m-bg); box-shadow: inset 0 2px 0 var(--m-accent); }
.fx-tabs i { font-style: normal; color: var(--m-warn); margin-left: 4px; }
.fx-tabs .fx-seg { margin-left: auto; border-right: 0; border-left: 1px solid var(--m-line); }
.fx-tabs .fx-seg b { color: var(--m-accent); font-weight: 600; }
.fx-code { padding: 6px 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.65; display: grid; min-width: 0; }
.fx-code span { white-space: pre; overflow: hidden; padding-right: 6px; }
.fx-code span.cur { background: #1a2130; }
.fx-code i { font-style: normal; }
.fx-code b { display: inline-block; width: 3ch; margin-right: 1.2ch; text-align: right; font-weight: 400; color: #7a8394; }
.x-k { color: #c39bf0; } .x-s { color: #8fd0a8; } .x-t { color: #7fb4f5; } .x-f { color: #e8c07a; } .x-c { color: #7c8594; }
.fx-md { padding: 10px 12px; font-size: 11.5px; color: var(--m-text2); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-md h5 { margin: 0; font-size: 15px; color: var(--m-text); border-bottom: 1px solid var(--m-line); padding-bottom: 4px; }
.fx-md h6 { margin: 2px 0 0; font-size: 12px; color: var(--m-text); }
.fx-md p, .fx-md ul { margin: 0; }
.fx-md ul { padding-left: 16px; }
.fx-md code { font-family: var(--mono); font-size: 10.5px; background: #222937; border-radius: 4px; padding: 0 4px; }
.fx-status { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: space-between; padding: 3px 10px; border-top: 1px solid var(--m-line); background: var(--m-bar); font-size: 10.5px; color: var(--m-muted); white-space: nowrap; overflow: hidden; }
.fx-status b { color: var(--m-warn); font-weight: 600; }

/* Usage dashboard */
.us { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.us-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.us-top > b { font-size: 15px; }
.seg { display: inline-flex; border: 1px solid var(--m-line2); border-radius: 8px; overflow: hidden; font-size: 11px; }
.seg span { padding: 1px 9px; color: var(--m-text2); }
.seg span + span { border-left: 1px solid var(--m-line2); }
.seg .on { background: var(--m-accent); color: var(--m-accent-ink); font-weight: 700; }
.us-f { margin-left: auto; font-size: 11px; color: var(--m-muted); }
.us-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.us-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; }
.us-card { border: 1px solid var(--m-line); border-radius: 10px; background: var(--m-panel); padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.us-card h5 { margin: 0; font-size: 12px; display: flex; justify-content: space-between; gap: 8px; }
.us-card h5 span { font-weight: 400; color: var(--m-muted); font-size: 10.5px; }
.us-card .m-meter { grid-template-columns: 74px 1fr 34px; }
.us-bars { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 3px; height: 92px; border-bottom: 1px solid var(--m-line); }
.us-bars i { display: flex; flex-direction: column-reverse; height: 100%; min-width: 0; }
.us-bars b { display: block; flex: none; }
.us-bars b:last-of-type { border-radius: 2px 2px 0 0; }
.us-bars em { font-style: normal; font-size: 8px; line-height: 1.2; color: var(--m-warn); text-align: center; }
.c1 { background: #6aa6f5; } .c2 { background: #b08cf0; } .c3 { background: #5cc795; }
.q1 { height: 5%; } .q2 { height: 10%; } .q3 { height: 15%; } .q4 { height: 20%; } .q5 { height: 25%; } .q6 { height: 30%; } .q7 { height: 35%; } .q8 { height: 40%; } .q9 { height: 45%; } .q10 { height: 50%; } .q11 { height: 55%; } .q12 { height: 60%; } .q13 { height: 65%; } .q14 { height: 70%; } .q15 { height: 75%; } .q16 { height: 80%; } .q17 { height: 85%; } .q18 { height: 90%; } .q19 { height: 95%; } .q20 { height: 100%; }
.us-leg { display: flex; gap: 12px; font-size: 10.5px; color: var(--m-text2); }
.us-leg span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.us-leg .l1::before { background: #6aa6f5; } .us-leg .l2::before { background: #b08cf0; } .us-leg .l3::before { background: #5cc795; }
.us-heat { display: grid; grid-template-columns: 14px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; font-size: 9.5px; color: var(--m-muted); }
.us-heat i { display: block; height: 9px; border-radius: 2px; background: #1b212c; }
.us-heat i.l1 { background: rgba(106, 166, 245, 0.25); }
.us-heat i.l2 { background: rgba(106, 166, 245, 0.45); }
.us-heat i.l3 { background: rgba(106, 166, 245, 0.7); }
.us-heat i.l4 { background: #6aa6f5; }
.us-hx { grid-column: 2 / -1; display: flex; justify-content: space-between; }
.us-who { display: grid; grid-template-columns: 74px 1fr 34px; gap: 7px; align-items: center; font-size: 11px; color: var(--m-text2); }
.us-who b { text-align: right; font-family: var(--mono); font-weight: 400; }

/* Hero showcase: desktop window with the phone in front */
.hero .container { display: block; }
.hero-text { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 8px 48px; align-items: end; }
.hero-text h1 { margin-bottom: 4px; }
.hero-text .buttons { margin: 22px 0 12px; }
.showcase { --off: 228px; display: grid; grid-template-columns: minmax(0, 1fr) 96px 184px; grid-template-rows: var(--off) auto auto; margin-top: 40px; }
.showcase > figure { margin: 0; }
.showcase > .browser { grid-column: 1 / 3; grid-row: 1 / 3; align-self: start; }
.showcase > .phone { grid-column: 2 / 4; grid-row: 2 / 4; align-self: start; z-index: 1; max-width: none; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); }
.showcase-cap { grid-column: 1; grid-row: 3; padding: 22px 28px 0 4px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--muted); }
.showcase-cap p { margin: 0; display: flex; }
.cap-k { flex: none; min-width: 4.6em; font-weight: 700; color: var(--text); }
.hero-desk .dk-body { min-height: 468px; }

/* Desktop screens section */
.screens { display: flex; flex-direction: column; gap: 48px; }
.screen { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px; align-items: center; margin: 0; }
.screen figcaption h3 { margin-bottom: 8px; }
.screen figcaption p { margin: 0 0 10px; color: var(--muted); font-size: 16px; }
.screen figcaption ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 15px; }
.screen figcaption li + li { margin-top: 3px; }
.shot { min-width: 0; }
.shot .browser { min-width: 680px; }
.shot .dk-body { min-height: 340px; }

/* Steps (how to start) */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: flow; }
.flow .card { position: relative; padding-top: 52px; }
.flow .card::before {
  counter-increment: flow;
  content: counter(flow);
  position: absolute;
  top: 18px;
  left: 22px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: var(--brand);
}

/* Sections */
section { padding: 52px 0; }
section.alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
h2 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 12px; }
h3 { font-size: 20px; line-height: 1.35; margin: 0 0 8px; }
.section-lead { color: var(--muted); margin: 0 0 28px; max-width: 46em; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  min-width: 0;
}
section.alt .card { background: var(--bg); }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.card p + p { margin-top: 8px; }
.card .icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 12px;
  font-size: 22px;
  background: color-mix(in srgb, var(--brand) 13%, transparent);
}

/* Architecture diagram (inline SVG, colours from the variables above) */
.arch { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 28px; align-items: center; }
.arch figure { margin: 0; min-width: 0; }
.diagram { display: block; width: 100%; height: auto; }
.swipe-hint { display: none; }
.nw { white-space: nowrap; }
.diagram .box-mac { fill: var(--d-mac); stroke: var(--d-mac-line); }
.diagram .box-srv { fill: var(--d-srv); stroke: var(--d-srv-line); }
.diagram .box-web { fill: var(--d-web); stroke: var(--d-web-line); }
.diagram .inner { fill: var(--surface); stroke: var(--border); }
.diagram .arrow { stroke: var(--d-arrow); stroke-width: 2; fill: none; }
.diagram .arrow-dash { stroke: var(--d-arrow); stroke-width: 1.6; fill: none; stroke-dasharray: 5 4; }
.diagram .head { fill: var(--d-arrow); }
.diagram text { fill: var(--text); font-family: var(--font); font-size: 14px; }
.diagram .t-title { font-weight: 800; font-size: 15px; }
.diagram .t-sub { fill: var(--muted); font-size: 12.5px; }
.diagram .t-mono { font-family: var(--mono); font-size: 12.5px; }
.diagram .t-label { fill: var(--muted); font-size: 12.5px; }
.legend-list { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 15.5px; }
.legend-list li { margin: 0.35em 0; }
.legend-list strong { color: var(--text); }

.stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stack .card h3 { font-size: 17px; }
.stack .card .k { display: block; font-size: 13px; font-weight: 700; color: var(--link); margin-bottom: 4px; }

.callout {
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-text);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 20px 0;
}
.callout strong { color: inherit; }
.callout p { margin: 0.4em 0; }
.callout.info {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  color: var(--text);
}

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 30px; }
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--ok);
  margin-top: 3px;
}
.checklist.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.limits { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.limits li { position: relative; padding-left: 30px; }
.limits li::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--warn-text);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  margin-top: 3px;
}

pre {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 10px 0;
}
pre .c { color: var(--muted); }
ol.steps { padding-left: 1.3em; margin: 0; }
ol.steps li { margin: 0.35em 0; }

/* Documents (guide) */
.doc { padding: 48px 0 64px; }
.doc h1 { font-size: clamp(30px, 4.4vw, 42px); margin-top: 0; }
.doc h2 { font-size: 25px; margin-top: 2.2em; padding-top: 0.4em; scroll-margin-top: 80px; }
.doc h3 { margin-top: 1.6em; scroll-margin-top: 80px; }
.doc p, .doc li { color: var(--text); }
.doc .updated { color: var(--muted); font-size: 15px; }
.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 24px 0;
}
.toc strong { display: block; margin-bottom: 6px; }
.toc ol { margin: 0; padding-left: 1.3em; columns: 2 220px; column-gap: 32px; }
.toc li { break-inside: avoid; }
table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15.5px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { background: var(--surface-2); font-weight: 700; }
.table-wrap { overflow-x: auto; }
.tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}

details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 10px 0;
}
details[open] { padding-bottom: 18px; }
summary { cursor: pointer; font-weight: 700; }
details > :not(summary) { margin-top: 10px; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0 40px;
  font-size: 14px;
  color: var(--muted);
}
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer a { color: var(--muted); }
.site-footer .legal { flex-basis: 100%; margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; }

@media (max-width: 900px) {
  .hero { padding-top: 36px; }
  .hero .container, .arch { grid-template-columns: 1fr; }
  .tour, .flow { grid-template-columns: 1fr; }
  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checklist.two { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .button { width: 100%; }
  .site-nav { gap: 2px 14px; font-size: 14px; }
  .stack { grid-template-columns: 1fr; }
  .phone { border-width: 8px; border-radius: 30px; }
  /* 구성도는 휴대폰 폭에 맞추면 글자가 6px 가 된다 → 원래 크기로 두고 그림만 옆으로 민다 */
  .arch figure { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .diagram { width: 620px; max-width: none; }
  .swipe-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); text-align: center; }
}
@media print {
  .site-header, .site-footer, .buttons, .cta .button { display: none; }
  body { background: #fff; color: #000; }
}

@media (max-width: 900px) {
  .hero-text { grid-template-columns: 1fr; }
  /* 좁은 화면: 데스크톱 창은 원래 폭(900px)으로 그리고 통째로 줄여 보인다(zoom — 컨테이너 안에 들어가는 값만) — 앞의 휴대폰이 읽을 수 있는 크기 */
  .showcase { --off: 200px; grid-template-columns: minmax(0, 1fr) 250px; }
  .showcase > .browser { grid-column: 1 / -1; width: 900px; zoom: 0.72; }
  .showcase > .phone { grid-column: 2; }
  .showcase-cap { grid-column: 1 / -1; grid-row: 4; padding: 18px 0 0; }
  .screen { grid-template-columns: 1fr; gap: 14px; }
  .shot { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
}
@media (max-width: 760px) {
  .showcase { --off: 150px; grid-template-columns: minmax(0, 1fr) 240px; }
  .showcase > .browser { zoom: 0.58; }
}
@media (max-width: 700px) {
  .shot .swipe-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); text-align: center; }
}
@media (max-width: 600px) {
  .showcase { --off: 116px; grid-template-columns: minmax(0, 1fr) 226px; }
  .showcase > .browser { zoom: 0.49; }
  .showcase > .phone { font-size: 12px; }
  .showcase > .phone .m-asst, .showcase > .phone .ph-act { display: none; }
}
@media (max-width: 480px) {
  .showcase { --off: 92px; grid-template-columns: minmax(0, 1fr) 222px; }
  .showcase > .browser { zoom: 0.39; }
  .showcase-cap { font-size: 14px; }
}
@media (max-width: 382px) { .showcase > .browser { zoom: 0.35; } }
@media (max-width: 346px) { .showcase > .browser { zoom: 0.31; } .showcase { grid-template-columns: minmax(0, 1fr) 210px; } }

/* Inquiry (contact) — centred, like the SSemRepo / SSemProHub sites */
.cta { text-align: center; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--brand) 6%, var(--bg)); padding: 64px 0; }
.cta h2 { margin-bottom: 12px; }
.cta p { margin: 0 auto 26px; max-width: 34em; color: var(--muted); }
.cta .cta-reach { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 20px auto 0; font-size: 16px; }
.cta-sep { color: var(--muted); }
.cta .cta-note { margin: 10px auto 0; font-size: 13.5px; }
.fineprint { margin: 18px 0 0; font-size: 14px; color: var(--muted); }

.mt { margin-top: 20px; }