/* Termexa website. 색은 앱 디자인 시스템(docs/termexa_design_system.md)의 딥 네이비 크롬과 실버에서 왔다. */

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #0b111c;
  --bg-2: #0f1624;
  --surface: #151c29;
  --surface-high: #202939;
  --border: rgba(108, 119, 136, 0.35);
  --text: #eceff4;
  --muted: #a3acba;
  --silver: #c6cdd8;
  --terminal: #2b3150;
  --terminal-text: #f5faff;
  --cyan: #7feaf1;
  --blue: #315ed4;
  --purple: #6547c7;
  --radius: 18px;
  --max: 1120px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Apple SD Gothic Neo",
    "Malgun Gothic", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(49, 94, 212, 0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(101, 71, 199, 0.14), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 한국어는 어절 단위로 줄을 바꾼다("터미널입/니다"처럼 끊지 않는다). */
html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }

a { color: var(--silver); }
a:hover { color: #fff; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* 실버 금속 글씨 - 아이콘의 브러시드 크롬 */
.chrome-text {
  background: linear-gradient(100deg, #8e96a3 0%, #ffffff 24%, #b9c0ca 52%, #f4f6f8 76%, #8e96a3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── 상단 ─────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(1.4) blur(14px);
  background: rgba(11, 17, 28, 0.72);
  border-bottom: 1px solid var(--border);
}
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; letter-spacing: 0.02em; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav-links { display: flex; gap: 20px; margin-left: auto; }
/* 넓은 화면에서는 구역 링크를 한 줄로 펼친다. 메뉴 단추는 페이지·언어만 남는다. */
.nav-links + .menu-btn { margin-left: 0; }
@media (max-width: 999px) { .nav-links { display: none; } .nav-links + .menu-btn { margin-left: auto; } }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 15px; }
.nav-links a:hover { color: var(--text); }
.lang { position: relative; display: inline-flex; align-items: center; }
.lang select {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a3acba' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 30px 6px 14px; cursor: pointer;
}
.lang select:focus-visible { outline: 2px solid #7feaf1; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 오른쪽 위 메뉴: 페이지 이동과 언어 선택을 한곳에 */
.nav .wrap { position: relative; }
.menu-btn {
  margin-left: auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn .menu-close, .menu-is-open .menu-btn .menu-open { display: none; }
.menu-is-open .menu-btn .menu-close { display: inline; }
.menu-btn:focus-visible, .menu a:focus-visible, .menu button:focus-visible { outline: 2px solid #7feaf1; outline-offset: 2px; }
.menu {
  position: absolute; top: 56px; right: 24px; width: 280px; max-height: calc(100vh - 80px); overflow-y: auto;
  background: #121a28; border: 1px solid var(--border); border-radius: 18px; padding: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); z-index: 20;
}
.menu a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 15px; }
.menu a:hover { background: var(--surface-high); }
.menu-links { display: grid; }
.menu-pages { display: grid; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.menu-label { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; margin-top: 6px; border-top: 1px solid var(--border); padding: 12px 12px 6px; }
.menu-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.menu-langs button, .menu-langs a {
  font: inherit; font-size: 14px; text-align: left; color: var(--text); background: none; border: 0;
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
}
.menu-langs button:hover, .menu-langs a:hover { background: var(--surface-high); }
.menu-langs a { display: block; text-decoration: none; }
.menu-langs button[aria-pressed="true"], .menu-langs a[aria-current="page"] { background: var(--surface-high); color: #7feaf1; font-weight: 600; }
.menu-langs button[aria-pressed="true"]::after, .menu-langs a[aria-current="page"]::after { content: " ✓"; }
@media (max-width: 480px) { .menu { right: 18px; left: 18px; width: auto; } }

/* ── 버튼 ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 14px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  color: #0b111c;
  background: linear-gradient(100deg, #8e96a3 0%, #ffffff 30%, #c6cdd8 60%, #f4f6f8 100%);
  box-shadow: 0 8px 30px rgba(198, 205, 216, 0.18);
}
.btn-primary:hover { color: #0b111c; box-shadow: 0 10px 36px rgba(198, 205, 216, 0.28); }
.btn-ghost { color: var(--text); border-color: var(--border); background: rgba(21, 28, 41, 0.6); }
.btn small { font-weight: 500; opacity: 0.7; }
/* 출시 전의 Play 버튼. 누를 수 없는 표시이므로 떠오르지 않는다. */
.btn.is-soon { cursor: default; }
.btn.is-soon:hover { transform: none; box-shadow: 0 8px 30px rgba(198, 205, 216, 0.18); }

/* ── 첫 화면 ──────────────────────────── */
.hero { padding: 88px 0 72px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.eyebrow { font-family: var(--mono); font-size: 14px; color: var(--cyan); letter-spacing: 0.04em; margin: 0 0 18px; }
.hero h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.08; margin: 0 0 22px; letter-spacing: -0.02em; }
.hero p.lead { font-size: 19px; color: var(--muted); margin: 0 0 32px; max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.note { font-size: 14px; color: var(--muted); margin-top: 16px; }

/* 폰 모형 - 실제 앱 화면(터미널·Herdr 구조·파일 창)을 그대로 옮긴다. 색은 앱의 터미널 크롬. */
.phone {
  justify-self: center;
  width: min(380px, 100%);
  border-radius: 40px; padding: 11px;
  background: linear-gradient(145deg, #3a4254, #151c29 40%, #0b111c);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(198, 205, 216, 0.25);
}
.screen { border-radius: 30px; overflow: hidden; background: var(--terminal); }

.app { --app-bg: #2b3150; --app-card: #353b63; --app-btn: #343a5e; --app-accent: #2ccde3; --app-muted: #97b4d6; background: var(--app-bg); color: #eef1fa; }
.app-bar { display: flex; align-items: center; gap: 8px; padding: 14px 12px 8px; }
.app-btn {
  width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--app-btn);
  display: grid; place-items: center; color: var(--app-accent);
}
.app-btn svg, .chip svg { width: 20px; height: 20px; }
.chip {
  flex: 1; min-width: 0; height: 38px; border-radius: 14px; background: #244b67;
  display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--app-accent); font-size: 14px;
}
.chip span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.term {
  font-family: var(--mono); font-size: 12px; line-height: 1.6; color: #e9ecf8;
  padding: 8px 14px 14px; min-height: 270px; white-space: pre; overflow: hidden;
}
.term .p { color: #7feaf1; }
.term .d { color: #9aa3c7; }
.term .g { color: #9ece6a; }
.term .y { color: #e0af68; }
.term .b { color: #7aa2f7; }
.term .o { color: #e8875f; }
.cursor { display: inline-block; width: 7px; height: 14px; background: #1ea3b8; vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 도구바: 왼쪽 ↑↓, 가운데 장 두 줄(꺾쇠로 장을 넘긴다), 오른쪽 ↵·키보드 */
.toolbar {
  display: grid; grid-template-columns: 1fr 8px repeat(5, 1fr) 8px 1fr; gap: 6px 5px;
  padding: 9px 8px 10px; background: #eceef2; align-items: center;
}
.toolbar.one { grid-template-columns: repeat(2, 1fr) 8px repeat(10, 1fr) 8px repeat(2, 1fr); }
.key {
  height: 34px; border-radius: 8px; background: #e2e4e9; color: #1b1f27;
  display: grid; place-items: center; font-size: 11.5px; font-family: var(--sans);
  box-shadow: 0 2px 2px rgba(27, 31, 39, 0.16);
}
.key svg { width: 16px; height: 16px; }
.chev { color: #7a818d; font-size: 12px; text-align: center; }
.toolbar .chev { grid-row: span 2; }
.toolbar.one .chev { grid-row: auto; }

/* Herdr 구조 화면 - 앱의 HerdrStructureScreen 그대로. 색은 기본 터미널 테마(DefaultTerminalChrome)다. */
.hs, .ag-pane {
  --hs-bg: #2b3150; --hs-card: #353b62; --hs-text: #f5faff; --hs-muted: #9bc3df; --hs-accent: #02e0f4;
  --hs-warn: #ffc857; --hs-ok: #35e69a; --hs-line: rgba(138, 149, 188, 0.35);
}
.hs { background: var(--hs-bg); color: var(--hs-text); padding: 4px 14px 18px; }
/* 머리글: 뒤로 · 제목 · (남은 폭) · 세션 이름과 꺾쇠. 세션 칩은 바탕도 테두리도 없다. */
.hs-head { display: flex; align-items: center; gap: 10px; padding: 10px 0 12px; }
.hs-head b { font-size: 17px; }
.hs-back { width: 40px; height: 40px; flex: none; display: grid; place-items: center; color: var(--hs-text); margin-left: -8px; }
.hs-back svg { width: 20px; height: 20px; }
.hs-tabs em { font-style: normal; }
.hs-session { margin-left: auto; font-family: var(--mono); font-size: 14px; display: flex; gap: 6px; align-items: center; padding: 7px 4px 7px 8px; }
.hs-session i { color: var(--hs-accent); display: grid; place-items: center; }
.hs-session svg { width: 14px; height: 14px; }
/* 워크스페이스 줄: 고른 칩은 강조색 굵은 글씨와 밑줄, 입력을 기다리는 수, Herdr가 보고 있는 곳의 점 */
.hs-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--hs-line); margin-bottom: 8px; font-size: 15px; }
.hs-tabs > span { display: flex; align-items: center; gap: 8px; padding: 12px 12px; color: var(--hs-muted); position: relative; }
.hs-tabs > .on { color: var(--hs-accent); font-weight: 600; }
.hs-tabs > .on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: var(--hs-accent); }
.hs-tabs .kebab { margin-left: auto; padding: 12px 14px; }
.hs-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hs-accent); }
/* 탭 하나가 카드 하나: 탭 줄 아래로 그 탭의 pane들 */
.hs-card { background: var(--hs-card); border: 1px solid rgba(138, 149, 188, 0.31); border-radius: 16px; overflow: hidden; }
.hs-ws { display: flex; align-items: center; gap: 8px; padding: 4px 8px; min-height: 48px; font-weight: 700; }
.hs-ws::before { content: ""; width: 2px; height: 20px; background: var(--hs-accent); }
.hs-ws small { margin-left: auto; color: var(--hs-muted); font-weight: 400; font-size: 13px; }
.hs-panes { border-top: 1px solid rgba(138, 149, 188, 0.25); margin: 0 12px; padding: 4px 0; }
.hs-pane { display: flex; align-items: center; gap: 8px; min-height: 48px; padding-left: 8px; border-radius: 8px; }
.hs-pane::before { content: ""; width: 2px; height: 20px; margin-right: 4px; }
.hs-sep { display: block; height: 1px; margin-left: 24px; background: rgba(138, 149, 188, 0.18); }
.hs-pane.sel { background: rgba(2, 224, 244, 0.06); }
.hs-pane.sel::before { background: var(--hs-accent); }
.hs-pane div { flex: 1; min-width: 0; }
.hs-pane b { display: block; font-size: 15px; font-weight: 400; }
.hs-pane.sel b { font-weight: 700; }
.hs-pane small { display: block; margin-top: 2px; color: var(--hs-muted); font-size: 12px; }
/* 상태 배지: 상태 색 글자, 같은 색 옅은 바탕과 테두리 */
.badge { font-size: 12px; font-weight: 700; border-radius: 8px; padding: 2px 6px; border: 1px solid; }
.badge.idle { color: var(--hs-ok); border-color: rgba(53, 230, 154, 0.37); background: rgba(53, 230, 154, 0.12); }
.badge.wait { color: var(--hs-warn); border-color: rgba(255, 200, 87, 0.37); background: rgba(255, 200, 87, 0.12); }
.kebab { color: var(--hs-muted); font-size: 16px; width: 40px; text-align: center; flex: none; }
.hs-tabs .count { min-width: 20px; text-align: center; font-size: 11px; }

/* 파일 창 - 앱의 밝은 크롬(LightChrome) 그대로. 치수는 실제 스크린샷(360dp 폭)에서 잰 비율이다. */
.files {
  --fl-bg: #f2f3f6; --fl-card: #ffffff; --fl-fill: #dcdfe4; --fl-chip: #d3d7de;
  --fl-line: rgba(131, 138, 149, 0.28); --fl-text: #1b1f27; --fl-muted: #5a6270; --fl-accent: #3e4b60;
  background: var(--fl-bg); color: var(--fl-text);
}
.files svg { display: block; flex: none; }
.fl-bar { display: flex; align-items: center; gap: 8px; padding: 12px 8px 0; }
.fl-btn { width: 35px; height: 35px; flex: none; border-radius: 13px; background: var(--fl-fill); color: var(--fl-accent); display: grid; place-items: center; }
.fl-btn svg { width: 19px; height: 19px; }
.fl-chip {
  flex: 1; min-width: 0; height: 35px; border-radius: 13px; background: var(--fl-chip); color: var(--fl-accent);
  display: flex; align-items: center; gap: 7px; padding: 0 12px 0 10px; font-size: 13px;
}
.fl-chip svg { width: 16px; height: 16px; }
.fl-chip span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fl-path {
  display: flex; align-items: center; margin: 14px 7px 0; height: 42px; border-radius: 999px;
  background: var(--fl-card); border: 1px solid var(--fl-line); color: var(--fl-muted); padding: 0 8px;
}
.fl-pic { width: 36px; display: grid; place-items: center; color: var(--fl-muted); }
.fl-pic svg { width: 19px; height: 19px; }
.fl-crumbs { margin-left: 8px; font-size: 14.5px; white-space: nowrap; overflow: hidden; }
.fl-crumbs i { font-style: normal; font-size: 11px; margin: 0 7px; vertical-align: 1px; }
.fl-crumbs b { color: var(--fl-text); font-weight: 600; }
.fl-sort { display: flex; align-items: center; gap: 12px; padding: 12px 10px 10px 14px; font-size: 12.5px; color: var(--fl-muted); }
.fl-filter { display: flex; align-items: center; gap: 5px; color: var(--fl-muted); }
.fl-filter b { font-weight: 700; }
.fl-filter svg { width: 16px; height: 16px; }
.fl-count { flex: 1; font-size: 12px; }
.fl-key { display: flex; align-items: center; gap: 7px; padding-right: 11px; border-right: 1px solid var(--fl-line); color: var(--fl-text); }
.fl-key svg { width: 15px; height: 15px; color: var(--fl-muted); }
.fl-dir { width: 30px; display: grid; place-items: center; color: var(--fl-accent); }
.fl-dir svg { width: 19px; height: 19px; }
.fl-list { padding: 4px 7px 0; }
/* 줄은 카드가 아니다(앱 2026-10-11). 바탕 위에 바로 서고, 이름이 시작하는 자리부터 그은 가는 선이 가른다. */
.fl-row {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 2px 4px 2px 12px; box-sizing: border-box;
}
.fl-row::after { content: ""; position: absolute; left: 48px; right: 0; bottom: 0; height: 1px; background: var(--fl-line); }
.fl-row:last-child::after { display: none; }
.fl-ic { color: var(--fl-accent); }
.fl-ic.file { color: var(--fl-muted); }
.fl-ic svg { width: 24px; height: 24px; }
.fl-row div { flex: 1; min-width: 0; padding: 6px 0; }
.fl-row b { display: block; font-weight: 400; font-size: 14.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-row small { display: block; margin-top: 2px; color: var(--fl-muted); font-size: 12px; white-space: pre; }
/* 받기 단추는 파일 줄에만 - 폴더 받기는 길게 눌러 고른 뒤 아래 띠가 한다. 바탕 없는 그림 하나, 짚는 자리만 48dp. */
.fl-dl { width: 48px; height: 48px; margin-left: -4px; border-radius: 50%; color: var(--fl-muted); display: grid; place-items: center; flex: none; }
.fl-dl svg { width: 20px; height: 20px; }
/* 점으로 시작하는 숨김 항목은 아이콘과 이름만 옅다. */
.fl-row.hidden .fl-ic { opacity: 0.55; }
.fl-row.hidden b { color: var(--fl-muted); }
/* 일곱 도구가 폭을 똑같이 나눈다(앱의 idleActions - 전송 목록도 그 안에 있다). */
.fl-tools {
  display: grid; grid-template-columns: repeat(7, 1fr); align-items: center; height: 50px;
  margin: 1px 7px 0; border-top: 1px solid var(--fl-line); color: var(--fl-muted);
}
.fl-tools span { display: grid; place-items: center; }
.fl-tools svg { width: 18px; height: 18px; }

.shot { border-radius: 24px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); max-width: 420px; justify-self: center; width: 100%; }

/* ── 구역 공통 ────────────────────────── */
section { padding: 72px 0; }
.section-title { font-size: clamp(28px, 4vw, 40px); margin: 0 0 12px; letter-spacing: -0.01em; }
.section-lead { color: var(--muted); margin: 0 0 40px; max-width: 42em; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.card {
  background: linear-gradient(180deg, rgba(32, 41, 57, 0.7), rgba(21, 28, 41, 0.7));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 26px;
}
.card h3 { margin: 14px 0 10px; font-size: 19px; }
.card ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 15.5px; }
.card li { margin: 5px 0; }
.card { display: flex; flex-direction: column; }
.card ul { flex: 1; }
.card-more { margin-top: 12px; padding: 4px 0; color: #7feaf1; text-decoration: none; font-size: 14.5px; font-weight: 600; }
.card-more:hover { text-decoration: underline; }
.icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-high); border: 1px solid var(--border); color: var(--silver);
}
.icon svg { width: 22px; height: 22px; }

/* 기능 한 줄 강조 */
.spot { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 28px 0; }
.spot + .spot { border-top: 1px solid var(--border); }
.spot h3 { font-size: 26px; margin: 0 0 12px; }
.spot p { color: var(--muted); margin: 0; }
.mini {
  background: var(--terminal); border-radius: var(--radius); border: 1px solid var(--border);
  font-family: var(--mono); font-size: 13px; color: var(--terminal-text); padding: 18px 20px; line-height: 1.7;
  white-space: pre; overflow-x: auto;
}
.mini .p { color: var(--cyan); }
.mini .d { color: #9aa3c7; }
.mini .sel { background: rgba(127, 234, 241, 0.16); border-radius: 4px; }

/* 도구바 두 모양 비교 */
.bars { display: grid; gap: 10px; width: 100%; }
.bars .toolbar { border-radius: 14px; }
/* 한 줄 도구바는 넓은 화면의 모양이라 좁은 화면에서는 옆으로 밀어 본다. */
.scroll-x { overflow-x: auto; border-radius: 14px; }
.scroll-x .toolbar.one { min-width: 600px; }
.bar-label { font-size: 13px; color: var(--muted); }

/* 입력 도구 */
.input-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 40px; align-items: start; }
/* 더보기 패널: 도구바와 같은 칸 격자다. 키는 가운데 다섯 열에만 서고, 설정 단추는 오른쪽 열 맨 아래. */
.more {
  display: grid; grid-template-columns: 1fr 8px repeat(5, 1fr) 8px 1fr; gap: 9px 5px;
  padding: 3px 8px 0; background: #eceef2; max-height: 206px; overflow: hidden;
}
.more .key.cut { opacity: 0.35; }
.more-phone { justify-self: stretch; width: 100%; max-width: 380px; }
.more-phone .toolbar { padding-bottom: 6px; gap: 9px 5px; }
.more-phone .key { height: 38px; }
.more-edit { background: #f4f5f8 !important; border: 1px solid #c3c8d1; box-shadow: none !important; color: #3e4b60 !important; }
.term.short { min-height: 0; padding-bottom: 12px; }
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
/* 입력 도구 카드는 details다. 넓은 화면에서는 늘 펼쳐 둔 카드로 보이고(아래 @supports),
   좁은 화면에서는 아이콘과 제목만 한 줄씩 보이다 눌러서 설명을 편다 - 9장이 세로로 쌓이면 화면 서너 장이 된다. */
.tool { background: linear-gradient(180deg, rgba(32, 41, 57, 0.7), rgba(21, 28, 41, 0.7)); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.tool summary { display: flex; align-items: flex-start; gap: 14px; font-size: inherit; font-weight: inherit; }
.tool summary::after { align-self: center; margin-left: auto; }
.tool .icon { flex: none; }
.tool h3 { margin: 2px 0 0; font-size: 16.5px; }
.tool p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; }
.tool summary h3 { flex: 1; }
@supports selector(::details-content) {
  @media (min-width: 601px) {
    /* 예전 카드와 같은 배치: 아이콘 | 제목 위, 설명 아래 */
    .tool { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; align-content: start; }
    .tool summary { display: contents; pointer-events: none; cursor: default; }
    .tool summary::after { display: none; }
    .tool .icon { grid-row: span 2; }
    .tool::details-content { content-visibility: visible; grid-column: 2; }
  }
}
@media (max-width: 600px) {
  .tool { padding: 12px 16px; }
  .tool summary { align-items: center; }
  .tool .icon { width: 36px; height: 36px; border-radius: 10px; }
  .tool .icon svg { width: 19px; height: 19px; }
  .tool h3 { margin: 0; font-size: 16px; }
  .tool p { margin: 10px 0 2px; }
  .tools { gap: 10px; }
}
.input-left { display: grid; gap: 18px; }
.input-right { display: grid; gap: 18px; }
.tools .tool:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 900px) { .input-grid { grid-template-columns: 1fr; } .more-phone { justify-self: center; } }

/* 단축키 구성 - 앱의 밝은 크롬(설정 화면)을 옮긴다 */
.cz { display: grid; grid-template-columns: 1fr 1fr minmax(220px, 0.8fr); gap: 24px; align-items: start; }
.lr { background: #f2f3f6; color: #1b1f27; padding: 14px 14px 18px; border-radius: 26px; max-width: none; }
.lr-head { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; text-align: center; margin: 4px 0 14px; }
.lr-head b { font-size: 16px; }
.lr-back { color: #3e4b60; display: grid; place-items: center; }
.lr-back svg { width: 20px; height: 20px; }
.lr-label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: #3e4b60; margin: 14px 2px 8px; }
.lr-vol { display: flex; align-items: center; gap: 8px; color: #3e4b60; }
.lr-vol svg { width: 17px; height: 17px; }
.lr-vol .key { width: 30px; height: 30px; }
.lr .key { background: #e2e4e9; color: #1b1f27; }
.lr .toolbar { padding: 0; background: none; }
.lr .toolbar .key { height: 30px; font-size: 10.5px; }
.lr .key.key-dim { background: #d7dae0; color: #5a6270; }
.lr-box { border: 1px solid #d5d9e0; border-radius: 16px; padding: 8px; background: #eceef2; }
.lr-more { display: grid; grid-template-columns: 10px 1fr 10px; gap: 6px; align-items: center; }
.lr-more .chev { color: #5a6270; }
.lr-row { display: grid; grid-template-columns: repeat(5, 1fr) 16px; gap: 6px; align-items: center; border: 1px solid #d5d9e0; border-radius: 14px; padding: 6px 8px; margin-bottom: 6px; background: #eceef2; }
.lr-row .key { height: 30px; font-size: 10.5px; }
.lr-row .key svg { width: 15px; height: 15px; }
.grip { color: #5a6270; text-align: center; font-size: 15px; }
.lr-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; border: 1px solid #d5d9e0; border-radius: 16px; padding: 8px; margin: 0 18px; background: #eceef2; }
.lr-slots .key { height: 38px; font-size: 10.5px; line-height: 1.2; text-align: center; }
.lr-slots .key.sel { background: #cfd3da; box-shadow: none; }
.lr-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.lr-tabs span { text-align: center; padding: 9px 0; border-radius: 12px; border: 1px solid #c9ced6; font-size: 13.5px; }
.lr-tabs .on { background: #3e4b60; color: #fff; border-color: #3e4b60; }
.lr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.lr-grid .key { height: 32px; font-size: 10.5px; line-height: 1.15; text-align: center; }
.lr-grid .key svg { width: 15px; height: 15px; }
.lr-save { margin-top: 14px; text-align: center; padding: 11px 0; border-radius: 14px; background: #a9b0bd; color: #fff; font-weight: 700; font-size: 14px; }
.cz-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cz-points li { background: linear-gradient(180deg, rgba(32, 41, 57, 0.7), rgba(21, 28, 41, 0.7)); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.cz-points b { display: block; margin-bottom: 4px; }
.cz-points span { color: var(--muted); font-size: 14.5px; }
@media (max-width: 1000px) { .cz { grid-template-columns: 1fr 1fr; } .cz-points { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
@media (max-width: 700px) { .cz { grid-template-columns: 1fr; } .lr { max-width: 420px; justify-self: center; width: 100%; } }

/* ── 실제 앱 비율에 맞춤(스크린샷 대조) ─────────────────
   키는 정사각형, 키 사이는 키 폭의 약 30%. 상단 바 단추는 화면 폭의 약 8.5%. */
.app-bar { gap: 7px; padding: 12px 8px 6px; }
.app-btn { width: 30px; height: 30px; border-radius: 9px; }
.app-btn svg, .chip svg { width: 17px; height: 17px; }
.chip { height: 30px; border-radius: 10px; font-size: 13px; padding: 0 10px; }
.toolbar { gap: 8px 8px; padding: 10px 8px 12px; }
.toolbar .key, .more .key { height: auto; aspect-ratio: 1 / 1; font-size: 10px; border-radius: 7px; }
.toolbar .key svg { width: 15px; height: 15px; }
.more { gap: 8px 8px; }
.more .key { font-size: 8.5px; letter-spacing: -0.02em; }
.more-phone .key { height: auto; }
.more { max-height: 188px; }
.toolbar.one .key { aspect-ratio: auto; height: 30px; }

/* 단축키 패널 구성: 더보기 줄은 가운데 72%, 꺾쇠는 양 끝 */
.lr-more { grid-template-columns: 1fr 72% 1fr; gap: 0; }
.lr-more .chev { text-align: center; }
.lr-row { grid-template-columns: repeat(5, 1fr) 14px; gap: 7px; padding: 7px 8px; }
.lr-row .key, .lr .toolbar .key { height: auto; aspect-ratio: 1 / 1; font-size: 8.5px; }
.lr .toolbar { gap: 7px 7px; }

/* 단축키 편집: 다섯 칸 상자는 가운데 64%, 탭은 높게, 키 격자는 정사각형으로 왼쪽부터 */
.lr-slots { width: 64%; margin: 0 auto; gap: 6px; padding: 7px; }
.lr-slots .key { height: auto; aspect-ratio: 1 / 1; font-size: 8.5px; }
.lr-tabs span { padding: 13px 0; border-radius: 12px; }
.lr-grid { width: 90%; gap: 8px; }
.lr-grid .key { height: auto; aspect-ratio: 1 / 1; font-size: 9px; }

/* Herdr 구조 글씨·줄 높이를 실제 화면 크기로(앱 14sp 본문 → 12.5px) */
.hs { padding: 2px 10px 16px; }
.hs-head { padding: 8px 0 10px; }
.hs-head b { font-size: 14px; }
.hs-session { font-size: 12.5px; }
.hs-tabs { font-size: 12.5px; }
.hs-tabs > span { padding: 11px 10px; }
.hs-tabs .kebab { padding: 11px 6px; }
.hs-ws { min-height: 42px; font-size: 12.5px; }
.hs-ws small { font-size: 11px; }
.hs-pane { min-height: 46px; }
.hs-pane b { font-size: 12.5px; }
.hs-pane small { font-size: 10px; }
.badge { font-size: 10px; padding: 1px 5px; border-radius: 7px; }
.hs-card { border-radius: 14px; }

/* 설정 화면 두 장: 바깥 여백을 줄여 키를 실제 크기(화면 폭의 약 9.5%)에 가깝게 */
.lr { padding: 12px 8px 16px; }
.lr-box { padding: 6px; }
.lr .toolbar { gap: 6px 6px; }
.lr .toolbar .key, .lr-row .key { font-size: 9.5px; }
.lr-grid { width: 94%; gap: 7px; }
.lr-grid .key, .lr-slots .key { font-size: 10.5px; }
.lr-grid .key svg, .lr-row .key svg { width: 16px; height: 16px; }

/* 단축키 편집: 실제 화면처럼 양옆 여백을 두고 키 격자를 조금 좁게 */
.lr-edit { padding: 12px 18px 18px; }
.lr-edit .lr-grid { width: 88%; }
.lr-edit .lr-label { margin-left: 0; }

/* 코딩 에이전트 활용 */
.agents .eyebrow { margin-bottom: 10px; }
.ag { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; }
.ag-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ag-step { position: relative; display: flex; gap: 14px; background: linear-gradient(180deg, rgba(32, 41, 57, 0.7), rgba(21, 28, 41, 0.7)); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.ag-step .icon { flex: none; color: #7feaf1; }
.ag-step h3 { margin: 2px 0 6px; font-size: 17px; }
.ag-step p { margin: 0; color: var(--muted); font-size: 15px; }
.ag-visual { display: grid; gap: 10px; justify-items: stretch; max-width: 380px; width: 100%; justify-self: center; }
.notif { background: #eef0f4; color: #1b1f27; border-radius: 22px; padding: 14px 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); display: grid; gap: 3px; }
.notif-app { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #5a6270; margin-bottom: 4px; }
.notif-app img { border-radius: 5px; }
.notif-time::before { content: "· "; }
.notif b { font-size: 15px; }
.notif span { font-size: 14px; }
.ag-arrow { text-align: center; color: var(--muted); font-size: 18px; }
.ag-pane { background: #353b62; border-radius: 16px; overflow: hidden; border: 1px solid rgba(138, 149, 188, 0.31); padding: 4px 12px; }
.ag-pane .hs-pane { color: #f5faff; }
.ag-term { background: var(--terminal); border-radius: 16px; border: 1px solid var(--border); min-height: 0; padding: 14px 16px; font-size: 13px; }
@media (max-width: 900px) { .ag { grid-template-columns: 1fr; } }

/* 시작 가이드 */
.guide h2 { margin-top: 40px; }
.guide ul { padding-left: 20px; }
.guide li { margin: 6px 0; }
.guide pre { background: var(--terminal); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; overflow-x: auto; margin: 12px 0; }
.guide code { font-family: var(--mono); font-size: 13.5px; color: #e9ecf8; }
/* 짧은 명령이 줄 끝에서 둘로 쪼개지면 다른 명령처럼 읽힌다. */
.guide p code, .guide li > code { white-space: nowrap; }
.guide p code, .guide li > code { background: rgba(151, 180, 214, 0.14); border-radius: 5px; padding: 1px 6px; }
.guide b { color: var(--text); }

/* 없는 주소 */
.notfound { max-width: 720px; margin: 0 auto; padding: 96px 24px 120px; }
.nf-code { font-family: var(--mono); font-size: 15px; color: #7feaf1; background: var(--terminal); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin: 0 0 32px; overflow-wrap: anywhere; }
.nf-err { color: #f7768e; }
.notfound h1 { font-size: clamp(30px, 5vw, 44px); margin: 0 0 12px; }
.nf-body { color: var(--muted); margin: 0 0 28px; }

/* 테마 */
.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.swatch { border-radius: 14px; padding: 14px; font-family: var(--mono); font-size: 12px; border: 1px solid var(--border); }
.swatch .row { display: flex; gap: 4px; margin-top: 10px; }
.swatch .row i { flex: 1; height: 10px; border-radius: 3px; }
.swatch.light { border-color: rgba(131, 138, 149, 0.5); }

/* 보안 */
.trust { text-align: center; }
.trust .big { font-size: clamp(26px, 4vw, 38px); margin: 0 0 14px; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.pill { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 8px 16px; font-size: 15px; color: var(--silver); }

/* FAQ */
details { border-bottom: 1px solid var(--border); padding: 18px 0; }
summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--muted); font-weight: 400; }
details[open] summary::after { content: "−"; }
details p { color: var(--muted); margin: 12px 0 0; }

/* 마지막 권유 */
.final { text-align: center; padding: 96px 0; }
.final img { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.final h2 { font-size: clamp(30px, 4.5vw, 44px); margin: 24px 0 12px; }
.final p { color: var(--muted); margin: 0 0 28px; }
.final-cta { justify-content: center; }

footer { border-top: 1px solid var(--border); padding: 32px 0 48px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-left: auto; }
/* 링크는 줄 단위로 넘어간다. 칸이 좁다고 "문의"나 메일 주소가 글자 중간에서 꺾이지 않게. */
footer nav > * { flex: none; white-space: nowrap; }
@media (max-width: 600px) { footer nav { margin-left: 0; } }
footer a { color: var(--muted); text-decoration: none; display: inline-block; padding: 10px 0; margin: -10px 0; }
footer a:hover { color: var(--text); }

/* 문서 페이지(개인정보처리방침) */
.doc { max-width: 780px; margin: 0 auto; padding: 56px 24px 80px; }
.doc h1 { font-size: 36px; margin: 0 0 8px; }
.doc h2 { font-size: 21px; margin: 36px 0 10px; }
.doc p, .doc li { color: #d3d8e0; }
.doc .meta { color: var(--muted); font-size: 15px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.doc th { color: var(--silver); font-weight: 600; }
.doc .table-wrap { overflow-x: auto; }

/* 언어별 본문: JS가 html[lang]을 바꾸면 해당 블록만 보인다 */
[data-lang-block] { display: none; }
html[lang="ko"] [data-lang-block="ko"], html[lang="ja"] [data-lang-block="ja"], html[lang="zh-Hans"] [data-lang-block="zh-Hans"],
html[lang="pt-BR"] [data-lang-block="pt-BR"], html[lang="es"] [data-lang-block="es"],
html:not([lang="ko"]):not([lang="ja"]):not([lang="zh-Hans"]):not([lang="pt-BR"]):not([lang="es"]) [data-lang-block="en"] { display: block; }

/* ── 좁은 화면 ────────────────────────── */
@media (max-width: 900px) {
  .hero { padding-top: 56px; }
  .hero .wrap, .spot { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .card { padding: 22px; }
}
/* 휴대폰에서는 섹션 사이 빈 띠를 줄인다. 위아래 72px씩이면 섹션마다 화면 1/5이 비어 끝난 것처럼 보인다. */
@media (max-width: 600px) {
  section { padding: 44px 0; }
  .hero { padding-bottom: 44px; }
  .final { padding: 64px 0; }
  .section-lead { margin-bottom: 28px; }
  /* 보안 알약: 한 줄에 하나씩 쌓이지 않게 두 칸으로, 긴 것은 두 줄로 접는다 */
  .pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
  .pill { display: flex; align-items: center; justify-content: center; border-radius: 14px; padding: 8px 10px; font-size: 13.5px; line-height: 1.35; }
  .pill:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* 접근성: 그림 속 글자도 대비 4.5:1 이상 */
.lr-save { background: #6b7382; }

/* 하단 문의: 메일 앱이 없는 기기에서도 주소를 옮겨 적을 수 있게 글자로도 보인다 */
.footer-mail { color: var(--muted); user-select: all; }

/* 홈의 주제별 안내 링크. 카드와 같은 면·테두리를 쓰고, 통째로 누르는 링크다. */
.guide-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.guide-link { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, rgba(32, 41, 57, 0.7), rgba(21, 28, 41, 0.7)); color: var(--text); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.guide-link b { font-size: 17px; }
.guide-link b::after { content: " →"; color: var(--cyan); }
.guide-link span { color: var(--muted); font-size: 15px; }
.guide-link:hover { border-color: rgba(127, 234, 241, 0.5); transform: translateY(-1px); }
.guide-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* 언어별 본문의 제목. 검색엔진이 읽는 h1은 영문 하나라 다른 언어는 role=heading으로 같은 모양을 낸다. */
.doc .doc-title { font-size: 36px; font-weight: 700; color: var(--text); margin: 0 0 8px; }

/* 주제별 안내 페이지(ssh-client-android.html 등). 시작 가이드(.doc.guide)의 글 모양을 그대로 쓰고 몇 가지만 더한다. */
.topic h1 { line-height: 1.2; margin-bottom: 14px; }
.topic .crumbs { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.topic .crumbs a { color: var(--muted); text-decoration: none; display: inline-block; padding: 10px 0; margin: -10px 0; }
.topic .crumbs a:hover { color: var(--text); text-decoration: underline; }
.topic .topic-lead { font-size: 19px; color: var(--silver); margin: 0 0 8px; }
.topic .topic-note { font-size: 14.5px; color: var(--muted); border-left: 3px solid var(--border); padding: 4px 0 4px 14px; margin: 20px 0 0; }
.topic .steps { padding-left: 22px; }
.topic .steps li { margin: 12px 0; }
.topic-figure { margin: 32px auto; display: grid; justify-items: center; gap: 12px; }
.topic-figure .phone { width: min(100%, 380px); }
/* 글 속 b는 밝은 글자색이다(.guide b). 밝은 알림 모형 안에서는 모형의 글자색을 따른다. */
.guide .topic-figure b { color: inherit; }
.topic-figure figcaption { font-size: 13.5px; color: var(--muted); text-align: center; max-width: 34em; }
.topic .topic-faq details:first-child { padding-top: 6px; }
.topic .guide-links { margin-top: 8px; }
.topic-cta { margin-top: 56px; padding: 32px 16px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, rgba(32, 41, 57, 0.7), rgba(21, 28, 41, 0.7)); }
.topic-cta h2 { margin: 0 0 6px; }
.topic-cta p { color: var(--muted); margin: 0 0 20px; }
.topic-cta .cta { justify-content: center; }