/* WindowPin — landing
   레퍼런스(Mobbin): Linear(정밀한 타이포·헤어라인) · Cursor(큰 제품 무대) ·
   Plain(넓은 여백) · Laravel Cloud(다크 히어로) · Twenty(벤토)
   다크/라이트: prefers-color-scheme 자동 + [data-theme] 수동 우선 */

/* ── 토큰: 라이트가 기본 ─────────────────────────────── */
:root{
  color-scheme: light dark;
  --bg:#ffffff;
  --bg-soft:#f6f7f9;
  --bg-deep:#eef0f4;
  --surface:#ffffff;
  --surface-2:#fafbfc;
  --line:#e4e7ec;
  --line-strong:#d0d5dd;
  --text:#0b0d12;
  --sub:#5b6472;
  --faint:#6b7280;   /* 흰 배경 대비 4.83:1. 예전 값 #8b94a3 은 3.06:1 로 WCAG AA 미달이었다. */
  --accent:#2b66f6;  /* 흰 글자 대비 4.85:1. 예전 #2f6bff 는 4.497:1 로 기본 버튼 글자가 AA 에 살짝 못 미쳤다. */
  --accent-hover:#1f56e0;
  --accent-soft:rgba(47,107,255,.10);
  --accent-ring:rgba(47,107,255,.26);
  --on-accent:#ffffff;
  --ink:#0b0d12;
  --on-ink:#ffffff;
  --paper:#fdf0bd;
  --paper-line:#e7d193;
  --paper-ink:#463b1c;
  --paper-sub:#8a7940;
  --ok:#0f9d58;
  --warn:#a65500;   /* 경고 바탕(#fff6e8) 위 대비 5.0:1. 예전 #b25c00 은 4.43:1 이었다. */
  --warn-bg:#fff6e8;
  --warn-line:#f0d9b5;
  --shadow-sm:0 1px 2px rgba(11,13,18,.06);
  --shadow:0 4px 16px rgba(11,13,18,.08);
  --shadow-lg:0 18px 48px rgba(11,13,18,.14);
  --glow:none;
  --radius:14px;
  --radius-lg:20px;
  --max:1120px;
}

/* ── 다크 팔레트 (자동 + 수동 공통값) ────────────────── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#08090c; --bg-soft:#0e1015; --bg-deep:#12151c;
    --surface:#12151c; --surface-2:#171b23;
    --line:#232833; --line-strong:#333a48;
    --text:#f3f5f9; --sub:#98a1b0; --faint:#7d8798;
    --accent:#5d8bff; --accent-hover:#7aa0ff;
    --accent-soft:rgba(93,139,255,.14); --accent-ring:rgba(93,139,255,.32);
    --on-accent:#06080d;
    --ink:#f3f5f9; --on-ink:#0b0d12;
    --paper:#f3e0a2; --paper-line:#c9ad63; --paper-ink:#33290f; --paper-sub:#6b5c2c;
    --warn:#e9a94a; --warn-bg:#241a0b; --warn-line:#4a3818;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 6px 22px rgba(0,0,0,.5);
    --shadow-lg:0 24px 60px rgba(0,0,0,.62);
    --glow:0 0 0 1px rgba(255,255,255,.03);
  }
}
:root[data-theme="dark"]{
  --bg:#08090c; --bg-soft:#0e1015; --bg-deep:#12151c;
  --surface:#12151c; --surface-2:#171b23;
  --line:#232833; --line-strong:#333a48;
  --text:#f3f5f9; --sub:#98a1b0; --faint:#7d8798;
  --accent:#5d8bff; --accent-hover:#7aa0ff;
  --accent-soft:rgba(93,139,255,.14); --accent-ring:rgba(93,139,255,.32);
  --on-accent:#06080d;
  --ink:#f3f5f9; --on-ink:#0b0d12;
  --paper:#f3e0a2; --paper-line:#c9ad63; --paper-ink:#33290f; --paper-sub:#6b5c2c;
  --warn:#e9a94a; --warn-bg:#241a0b; --warn-line:#4a3818;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 6px 22px rgba(0,0,0,.5);
  --shadow-lg:0 24px 60px rgba(0,0,0,.62);
  --glow:0 0 0 1px rgba(255,255,255,.03);
}

/* ── 기본 ───────────────────────────────────────────── */
*{box-sizing:border-box}
/* display 를 준 클래스(.iconbtn 은 grid, .sbtn 은 inline-flex)가 hidden 속성을 이겨, 앱 설치 단추와 '기기 공유'
   단추가 쓸 수 없는 브라우저에서도 보였다(눌러도 아무 일 없음). hidden 은 언제나 숨긴다. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.65 "Pretendard","Pretendard Variable","Malgun Gothic","Hiragino Sans","Noto Sans KR","Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  /* 한국어/일본어/중국어는 기본값이 글자 단위로 끊어져 단어 중간에서 줄이 바뀐다.
     keep-all 로 어절을 지키고, 끊을 수 없는 긴 문자열만 break-word 로 흘린다. */
  word-break:keep-all;overflow-wrap:break-word;
  transition:background-color .2s ease,color .2s ease}
/* 일본어·중국어는 띄어쓰기가 없어 keep-all 이면 문장 하나가 한 덩어리가 된다. 그 너비가 격자 칸의
   최소 너비가 되어 휴대폰에서 카드가 화면 밖으로 밀렸다. 이 둘은 글자 단위 줄바꿈이 맞다.
   제목만 일본어에서 구절 단위(auto-phrase, 지원 브라우저 한정)로 끊는다. */
:lang(ja) body,:lang(zh) body{word-break:normal}
:lang(ja) :is(h1,h2,h3,h4){word-break:auto-phrase}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
::selection{background:var(--accent-soft);color:var(--text)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:860px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ── 헤더 ───────────────────────────────────────────── */
header{position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:20px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:750;letter-spacing:-.025em;font-size:16.5px;flex:none}
.brand .mark{width:25px;height:25px;border-radius:7px;flex:none;position:relative;
  background:linear-gradient(140deg,var(--paper),#f5cf6a);border:1px solid var(--paper-line)}
.brand .mark:after{content:"";position:absolute;right:0;bottom:0;border-width:0 0 9px 9px;border-style:solid;
  border-color:transparent transparent color-mix(in srgb,var(--paper-line) 78%,#000) transparent}
nav{display:none;gap:24px;margin-left:14px;font-size:14.5px;color:var(--sub)}
nav a{transition:color .14s ease;white-space:nowrap}
nav a:hover{color:var(--text)}
.hactions{display:flex;align-items:center;gap:8px;margin-left:auto}
.iconbtn{width:34px;height:34px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--sub);cursor:pointer;transition:.14s ease}
.iconbtn:hover{color:var(--text);border-color:var(--line-strong)}
.iconbtn svg{width:16px;height:16px;display:block}
.themebtn .moon{display:none}
:root[data-theme="dark"] .themebtn .sun{display:none}
:root[data-theme="dark"] .themebtn .moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .themebtn .sun{display:none}
  :root:not([data-theme="light"]) .themebtn .moon{display:block}
}
select{font:inherit;font-size:13.5px;padding:7px 30px 7px 11px;border:1px solid var(--line);border-radius:9px;
  background-color:var(--surface);color:var(--text);appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238b94a3' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;transition:border-color .14s ease}
select:hover{border-color:var(--line-strong)}
.hbtn{font-size:14px;font-weight:650;color:var(--on-ink);background:var(--ink);padding:9px 15px;border-radius:9px;
  white-space:nowrap;transition:transform .12s ease,opacity .12s ease}
.hbtn:hover{opacity:.86;transform:translateY(-1px)}
/* 920px 에서 펼치면 러시아어·프랑스어·스페인어·독일어 메뉴가 두 줄로 접히고 러시아어는 화면 밖으로 밀렸다.
   가장 긴 러시아어 헤더가 한 줄에 들어가는 폭(약 1030px)부터 펼친다. */
@media (min-width:1060px){ nav{display:flex} }

/* 좁은 화면: 헤더가 가로로 넘치지 않게 한다. 히어로에 큰 CTA 가 있으므로 헤더 버튼은 감춘다. */
@media (max-width:600px){
  header .wrap{gap:10px}
  .hbtn{display:none}
  select{font-size:12.5px;padding:6px 26px 6px 9px;max-width:132px}
  .hactions{gap:6px}
}
@media (max-width:380px){
  select{max-width:104px}
}

/* ── 히어로 ─────────────────────────────────────────── */
.hero{position:relative;padding:84px 0 0;text-align:center;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-140px 0 auto;height:820px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 380px at 50% 8%, var(--accent-soft), transparent 68%),
    radial-gradient(620px 340px at 84% 22%, color-mix(in srgb,var(--paper) 24%,transparent), transparent 70%)}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;color:var(--sub);
  background:var(--surface);border:1px solid var(--line);padding:6px 13px;border-radius:999px;box-shadow:var(--shadow-sm)}
.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
h1{font-size:clamp(30px,5.6vw,66px);line-height:1.08;letter-spacing:-.04em;margin:22px 0 18px;
  white-space:pre-line;font-weight:780;color:var(--text);text-wrap:balance}
.lede{font-size:clamp(16px,1.9vw,19.5px);color:var(--sub);max-width:820px;margin:0 auto 30px;text-wrap:balance}
/* 첫 화면 소개는 두 줄로 쓴다(원고의 줄바꿈). 넓은 화면에서는 둘째 줄도 한 줄에 들어가게 폭을 넓힌다. */
@media (min-width:1200px){.hero .lede{max-width:1160px;font-size:18px}}
.ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:650;font-size:15.5px;
  padding:13px 24px;border-radius:12px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease,box-shadow .12s ease,background .14s ease,border-color .14s ease}
.btn.primary{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 20px var(--accent-ring)}
.btn.primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 10px 28px var(--accent-ring)}
.btn.ghost{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--faint);transform:translateY(-1px)}
/* 수식어 없는 .btn(직업별·안내 페이지의 보조 버튼, Android 에서 내려 앉힌 Windows 버튼)은 테두리도 바탕도 없어
   들여 쓴 굵은 글씨처럼 보였다. 기본을 ghost 모양으로 둔다. */
.btn:not(.primary):not(.ghost){background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.btn:not(.primary):not(.ghost):hover{border-color:var(--faint);transform:translateY(-1px)}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn svg{width:17px;height:17px;flex:none}
/* 320px 대 화면에서 긴 버튼 문구(스페인어 "Obtener el entorno de ejecución" 등)가 화면 밖으로 나갔다. */
@media (max-width:420px){ .btn{white-space:normal;max-width:100%;text-align:center} }
.microline{font-size:13px;color:var(--faint);margin-top:16px}
.microline b{color:var(--sub);font-weight:600}
.heroCmd{display:inline-flex;align-items:center;gap:10px;margin-top:22px;background:var(--surface);
  border:1px solid var(--line);border-radius:11px;padding:9px 9px 9px 15px;box-shadow:var(--shadow-sm);font-size:13.5px}
.heroCmd code{color:var(--text);font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.heroCmd .tiny{border:1px solid var(--line);background:var(--bg-soft);color:var(--sub);border-radius:7px;
  padding:5px 9px;font-size:12px;font-weight:600;cursor:pointer;transition:.14s;font-family:inherit}
.heroCmd .tiny:hover{color:var(--text);border-color:var(--line-strong)}

/* ── 코드 서명 안내 띠 ──────────────────────────────── */
.signbar{background:color-mix(in srgb,var(--ok) 9%,var(--bg-soft));
  border-bottom:1px solid color-mix(in srgb,var(--ok) 26%,var(--line))}
.signbar .wrap{display:flex;align-items:flex-start;justify-content:center;gap:9px;
  padding:10px 24px;font-size:13px;line-height:1.55;color:var(--sub);text-align:center}
.signbar b{color:var(--text);font-weight:700}
.signbar .ck{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--ok);
  color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;line-height:1}
@media(max-width:560px){.signbar .wrap{padding:9px 16px;font-size:12.3px;text-align:left}}
/* ── 제공 주체 띠 (맨 위 한 줄) ───────────────────────── */
.promobar{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,var(--bg-soft)),color-mix(in srgb,#f5b301 9%,var(--bg-soft)));
  border-bottom:1px solid var(--line)}
.promobar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:34px;padding:6px 24px;
  font-size:12.8px;line-height:1.35;color:var(--sub);text-decoration:none}
.promobar a:hover .pb-text{color:var(--text)}
.promobar a:focus-visible{outline:2px solid var(--accent-ring);outline-offset:-2px;border-radius:6px}
.promobar .pb-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#f5b301;box-shadow:0 0 0 3px color-mix(in srgb,#f5b301 22%,transparent)}
.promobar .pb-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.promobar .pb-cta{flex:none;font-weight:700;color:var(--accent)}
.promobar a:hover .pb-cta{text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.promobar a{justify-content:flex-start;padding:6px 16px;font-size:12px;gap:8px}}
/* ── 새 판 알림 줄 ──────────────────────────────────── */
.newsbar{background:var(--accent-soft);
  border-top:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))}
.newsbar .wrap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:11px 24px;font-size:13.5px;line-height:1.55;color:var(--sub);text-align:center}
.newsbar b{color:var(--text);font-weight:700}
.newsbar .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
/* 옅은 강조 바탕 위라 --accent 로는 대비가 3.9:1 에 그친다. 한 단계 진한 색을 쓴다. */
.newsbar a{color:var(--accent-hover);font-weight:650;text-decoration:none;
  border-bottom:1px solid transparent}
.newsbar a:hover{border-bottom-color:currentColor}
@media(max-width:560px){.newsbar .wrap{padding:10px 16px;font-size:12.5px;gap:7px}}
/* ── 히어로 무대 ────────────────────────────────────── */
.stage{margin:60px auto 0;position:relative;padding:0 24px;max-width:calc(var(--max) + 48px)}
.desk{position:relative;text-align:left;height:436px;overflow:hidden;border:1px solid var(--line);border-bottom:0;
  border-radius:22px 22px 0 0;background:linear-gradient(180deg,var(--bg-soft),var(--bg-deep));
  box-shadow:var(--shadow-lg),var(--glow)}
.desk:after{content:"";position:absolute;inset:auto 0 0;height:120px;pointer-events:none;
  background:linear-gradient(transparent,var(--bg))}
.win{position:absolute;border:1px solid var(--line-strong);border-radius:11px;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow)}
.win .tb{height:30px;display:flex;align-items:center;gap:7px;padding:0 11px;background:var(--surface-2);
  border-bottom:1px solid var(--line);font-size:11.5px;color:var(--sub)}
.win .tb i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:none;font-style:normal}
.win .tb span{margin-left:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win .bd{padding:12px 13px;font-size:11.5px;line-height:1.75;color:var(--sub);
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
.win .bd .k{color:var(--accent)}
.win .bd .g{color:var(--ok)}
.win.a{left:6%;top:52px;width:46%;height:250px}
.win.b{right:6%;top:118px;width:44%;height:236px}
.note{position:absolute;width:172px;border-radius:9px;padding:11px 12px;background:var(--paper);
  border:1px solid var(--paper-line);color:var(--paper-ink);font-size:12px;line-height:1.55;
  box-shadow:0 12px 26px rgba(0,0,0,.16)}
.note .cap{display:block;font-size:10px;font-weight:700;color:var(--paper-sub);margin-bottom:3px;letter-spacing:.02em}
.note.n1{left:37%;top:196px;transform:rotate(-1.4deg)}
.note.n2{right:9%;top:314px;transform:rotate(1.1deg);width:158px}
.lbl{position:absolute;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:4px 11px;border-radius:5px 5px 0 0;background:var(--paper);color:var(--paper-ink);
  border:1px solid var(--paper-line);border-bottom:0;box-shadow:0 -2px 8px rgba(0,0,0,.10)}
.lbl.l1{left:6%;top:30px}
.lbl.l2{right:6%;top:96px}
@media (max-width:760px){
  .desk{height:330px;border-radius:16px 16px 0 0}
  .win.a{left:4%;top:44px;width:56%;height:190px}
  .win.b{right:4%;top:104px;width:52%;height:176px}
  .note.n1{left:24%;top:158px;width:150px}
  .note.n2{display:none}
  .lbl.l1{top:22px}
  .lbl.l2{top:82px}
}

/* ── 신뢰 바 ────────────────────────────────────────── */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);padding:0}
.trust .it{background:var(--bg-soft);padding:26px 20px;text-align:center}
.trust .n{display:block;font-size:26px;font-weight:760;letter-spacing:-.035em;color:var(--text);line-height:1.2}
.trust .t{display:block;font-size:12.5px;color:var(--sub);margin-top:5px}
@media (max-width:700px){ .trust .wrap{grid-template-columns:repeat(2,1fr)} }

/* ── 섹션 공통 ──────────────────────────────────────── */
section{padding:96px 0}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px}
h2{font-size:clamp(27px,3.6vw,40px);line-height:1.16;letter-spacing:-.032em;margin:0 0 14px;font-weight:750}
.seclede{font-size:17px;color:var(--sub);max-width:820px;margin:0 0 44px;text-wrap:pretty}
.sechead.center{text-align:center}
.sechead.center .seclede{margin-left:auto;margin-right:auto}
.wrap.narrow .seclede{max-width:none}
.prose p{font-size:17.5px;line-height:1.78;color:var(--sub);margin:0 0 18px;text-wrap:pretty}
.prose p strong{color:var(--text);font-weight:650}

/* ── 3단계 ──────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 24px;box-shadow:var(--shadow-sm);transition:border-color .16s ease,transform .16s ease}
.step:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.step .n{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);
  color:var(--accent);font-weight:750;font-size:14px;margin-bottom:14px}
.step p{margin:0;font-size:15.5px;color:var(--sub);line-height:1.62}
@media (max-width:820px){ .steps{grid-template-columns:1fr} }

/* ── 벤토 ───────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;
  box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:18px;letter-spacing:-.02em;font-weight:700}
.card p{margin:0;color:var(--sub);font-size:14.8px;line-height:1.62}
.card.c3{grid-column:span 3}
.card.c2{grid-column:span 2}
.card .art{margin-top:20px}
@media (max-width:900px){ .bento{grid-template-columns:repeat(2,1fr)} .card.c3,.card.c2{grid-column:span 2} }
@media (max-width:560px){ .bento{grid-template-columns:1fr} .card.c3,.card.c2{grid-column:span 1} }
.art .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;padding:4px 10px;
  border-radius:6px;background:var(--paper);color:var(--paper-ink);border:1px solid var(--paper-line)}
.bar{height:7px;border-radius:99px;background:var(--bg-deep);overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.tick{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sub);margin-top:7px}
.tick b{width:15px;height:15px;border-radius:4px;background:var(--accent);color:var(--on-accent);font-size:10px;
  display:grid;place-items:center;flex:none}
.tick.off b{background:var(--bg-deep);color:var(--faint);border:1px solid var(--line)}
.tick.off{text-decoration:line-through;color:var(--faint)}

/* ── 라벨 쇼케이스 ─────────────────────────────────── */
.labelbar{display:flex;gap:8px;flex-wrap:wrap;padding:22px;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--bg-soft);margin-bottom:34px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:6px 13px;
  background:var(--paper);color:var(--paper-ink);border:1px solid var(--paper-line);border-radius:6px}
.tag.pill{border-radius:999px;background:var(--paper);color:var(--paper-ink);font-size:12.5px;font-weight:700;padding:6px 13px}
.tag.flag{border-radius:6px 3px 3px 6px;position:relative;padding-right:22px}
.tag.flag:after{content:"";position:absolute;right:-1px;top:-1px;bottom:-1px;width:12px;background:var(--bg-soft);
  clip-path:polygon(100% 0,0 0,100% 50%,0 100%,100% 100%)}
.tag .num{min-width:15px;height:15px;border-radius:4px;font-size:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--paper-ink) 16%,transparent)}
.kbd{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:650;padding:3px 8px;
  border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;background:var(--surface);
  color:var(--text);font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}

/* ── 설치 방법 ─────────────────────────────────────── */
.install{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--bg-deep);border:1px solid var(--line);
  border-radius:11px;margin-bottom:26px;max-width:100%;flex-wrap:wrap}
.tab{font:inherit;font-size:14px;font-weight:650;padding:8px 18px;border-radius:8px;border:0;
  background:transparent;color:var(--sub);cursor:pointer;transition:.14s}
.tab[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.tab:hover{color:var(--text)}
.panel[hidden]{display:none}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;
  box-shadow:var(--shadow-sm)}
.panel h3{margin:0 0 8px;font-size:19px;letter-spacing:-.02em}
.panel > p{margin:0 0 20px;color:var(--sub);font-size:15px}
.cmd{display:flex;align-items:center;gap:12px;background:var(--bg-deep);border:1px solid var(--line);
  border-radius:11px;padding:14px 14px 14px 18px}
/* 긴 명령은 가로 스크롤 대신 접는다. 스크롤 영역은 키보드로 움직일 수 없고, 복사 단추가 있어 옮겨 적을 일도 없다. */
.cmd code{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;color:var(--text);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cmd code .p{color:var(--faint)}
/* 휴대폰에서 긴 명령은 복사 단추 옆 좁은 칸에서 글자 몇 개씩 끊겼다. 안 들어가면 단추를 아랫줄로 보낸다. */
@media (max-width:560px){ .cmd{flex-wrap:wrap} .cmd code{flex:1 1 auto} }
.copybtn{flex:none;font:inherit;font-size:13px;font-weight:650;padding:8px 14px;border-radius:8px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text);cursor:pointer;transition:.14s}
.copybtn:hover{border-color:var(--faint)}
.copybtn.done{border-color:var(--ok);color:var(--ok)}
.why{margin-top:18px;font-size:14px;color:var(--sub);display:flex;gap:9px;align-items:flex-start}
.why svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ok)}
/* .panel > p 의 margin:0 0 20px 가 위 여백을 지워 명령 상자에 바짝 붙었다. */
.panel > .why{margin-top:18px}
.warnbox{margin-top:22px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;padding:18px 20px}
.warnbox h4{margin:0 0 7px;font-size:14.5px;color:var(--warn);font-weight:700}
.warnbox p{margin:0;font-size:14px;line-height:1.66;color:var(--sub)}
.warnbox p + p{margin-top:9px}

/* ── FAQ ───────────────────────────────────────────── */
.faq{max-width:780px}
details{border-bottom:1px solid var(--line);padding:2px 0}
details summary{list-style:none;cursor:pointer;padding:19px 34px 19px 0;position:relative;font-weight:650;
  font-size:16.5px;transition:color .14s}
details summary::-webkit-details-marker{display:none}
details summary:hover{color:var(--accent)}
details summary:after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
details[open] summary:after{transform:translateY(-30%) rotate(225deg)}
details .a{padding:0 0 20px;color:var(--sub);font-size:15.5px;line-height:1.72}

/* ── 다운로드 카드 ─────────────────────────────────── */
.dlcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;
  box-shadow:var(--shadow)}
.dlhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.dlhead .name{font-size:21px;font-weight:750;letter-spacing:-.02em}
.pill{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-hover)}
.pill.gray{background:var(--bg-deep);color:var(--sub)}
.dlsub{color:var(--sub);font-size:14.5px;margin:0 0 20px}
/* 다운로드 횟수. 값이 오기 전에는 hidden 이라 자리를 차지하지 않는다. */
/* flex 로 두면 글자 조각과 숫자가 각각 칸이 되어, 긴 문장(일본어 등)에서 세 칸짜리 표처럼 접혔다. 보통 글줄로 흘린다. */
.dlcount{margin:14px 0 0;font-size:14px;color:var(--sub)}
.dlcount b{color:var(--text);font-weight:700}
.dlcount::before{content:"";display:inline-block;width:7px;height:7px;border-radius:999px;background:var(--accent);
  margin-right:7px;vertical-align:.12em}
.dlfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin:24px 0}
.dlfacts .f{background:var(--surface);padding:15px 16px}
.dlfacts .f .k{display:block;font-size:11.5px;color:var(--faint);margin-bottom:4px}
.dlfacts .f .v{font-size:15px;font-weight:650}
@media (max-width:700px){ .dlfacts{grid-template-columns:repeat(2,1fr)} }
.shabox{background:var(--bg-deep);border:1px solid var(--line);border-radius:11px;padding:14px 16px}
.shabox .k{font-size:11.5px;color:var(--sub);display:block;margin-bottom:6px}
.shabox .row{display:flex;align-items:center;gap:10px}
.shabox code{flex:1;min-width:0;overflow-x:auto;font-size:12.5px;word-break:break-all;color:var(--sub);
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
.feat{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--sub);margin:18px 0 0}
.feat span{display:inline-flex;align-items:center;gap:7px}
.feat span:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok)}

/* ── 공유 ──────────────────────────────────────────── */
.share{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.sbtn{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;padding:9px 15px;
  border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--sub);cursor:pointer;transition:.14s}
.sbtn:hover{color:var(--text);border-color:var(--line-strong);transform:translateY(-1px)}

/* ── 푸터 ──────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:40px 0;background:var(--bg-soft)}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  font-size:13.5px;color:var(--faint)}
.fmeta{display:flex;flex-direction:column;gap:5px}
/* 제공 주체와 누계는 푸터 첫 덩어리에 같이 둔다. 링크는 밑줄로만 표시해서
   나머지 푸터 링크와 톤을 맞춘다. 숫자는 아직 안 채워졌을 때 줄표가 보인다. */
.fmeta a{color:inherit;text-decoration:underline}
.fmeta a:hover{color:var(--text)}
.fstat b{color:var(--sub);font-weight:650;font-variant-numeric:tabular-nums}
footer nav{display:flex;gap:20px;margin:0;flex-wrap:wrap;row-gap:10px}

/* 이 기기에서 못 쓴다는 사실과, 받은 다음 한 걸음. 둘 다 버튼 바로 밑에 붙는다 -
   본문 어딘가에 적어 두면 버튼을 누르는 사람은 끝내 읽지 않는다. */
.dlwarn{margin:14px 0 0;font-size:13.5px;line-height:1.65;color:var(--sub);
  border-left:2px solid var(--line-strong);padding-left:12px;text-align:left}
.dlnext{margin:14px 0 0;font-size:13.5px;line-height:1.65;color:var(--sub)}
.dlnext a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.linkbtn{font:inherit;color:var(--accent);background:none;border:0;padding:0;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.linkbtn:hover{color:var(--text)}
.linkbtn.ok{text-decoration:none}
.dlandroid{display:block;margin:12px 0 0}
.dlfor{margin-left:6px;opacity:.75;font-weight:500}
/* 아래 둘은 예전에 정의되지 않은 --muted 를 가리켜 그냥 부모 색을 물려받고 있었다. */
.dlandroidnote{display:block;margin:8px 0 0;font-size:12.5px;color:var(--faint)}
.dlalso{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);font-size:14px;color:var(--sub)}
.dlalso .btn{padding:8px 14px;font-size:14px}
.dlalso .btn svg{width:14px;height:14px}
.dlandroidnote a{color:inherit;text-decoration:underline;text-underline-offset:2px}
footer .fsub{margin-top:14px}
footer .bizwrap{display:block;margin-top:16px}
.bizline{margin:0;font-size:12px;line-height:1.7;color:var(--faint)}
.bizline .k{display:inline-block;margin-right:6px;font-weight:600;color:var(--text)}
.bizline a{color:inherit;text-decoration:underline}
footer a:hover{color:var(--text)}

/* ── 접근성/모션 ───────────────────────────────────── */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--on-accent);
  padding:10px 16px;border-radius:0 0 10px 0}
.skip:focus{left:0}
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{ header,.stage,.share,.themebtn{display:none} body{background:#fff;color:#000} }

/* 약관·개인정보 문서의 시행일 줄. 본문과 구분되도록 한 단 낮춘다. */
.docmeta{
  font-size:13.5px;color:var(--sub);margin:0 0 26px;
  padding:0 0 18px;border-bottom:1px solid var(--line);letter-spacing:.01em
}

/* 약관·개인정보 문서의 시행일 줄. 본문과 구분되도록 한 단 낮춘다. */
.docmeta{
  font-size:13.5px;color:var(--sub);margin:0 0 26px;
  padding:0 0 18px;border-bottom:1px solid var(--line);letter-spacing:.01em
}

/* 약관 조문 제목. 본문과 같은 크기로 흘러가면 조항을 찾을 수 없다. */
.doch2{
  font-size:16px;font-weight:700;color:var(--text);
  margin:34px 0 8px;letter-spacing:-.01em;line-height:1.4
}
.doc .para + .doch2{margin-top:34px}
.doc .doch2:first-of-type{margin-top:0}

/* 404 의 언어 선택 칩 */
.langchip{
  display:inline-block;margin:5px 4px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  font-size:13.5px;font-weight:600;text-decoration:none;
  transition:border-color .15s ease, background .15s ease
}
.langchip:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* ── 도움말(사용법) ────────────────────────────────────────────
   번호가 붙은 목록이지만 순서를 강요하지는 않는다. 필요한 항목만 골라 읽는 글이다. */
ol.guide{list-style:none;margin:0;padding:0;counter-reset:g;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 34px}
ol.guide > li{counter-increment:g;position:relative;padding-left:38px}
ol.guide > li::before{
  content:counter(g);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:8px;
  background:var(--accent-soft);color:var(--accent);
  font-size:12.5px;font-weight:700;line-height:26px;text-align:center
}
ol.guide h4{margin:0 0 5px;font-size:15px;font-weight:650;color:var(--text);letter-spacing:-.01em}
ol.guide p{margin:0;font-size:14.5px;line-height:1.68;color:var(--sub);text-wrap:pretty}

/* 단축키 표 */
.keysbox{margin-top:38px;padding:24px 26px;border:1px solid var(--line);
  border-radius:16px;background:var(--surface)}
.keysbox h3{margin:0 0 16px;font-size:14px;font-weight:700;color:var(--text);
  letter-spacing:.02em;text-transform:uppercase}
dl.keys{display:grid;grid-template-columns:auto 1fr;gap:11px 20px;margin:0 0 14px;align-items:baseline}
dl.keys dt{margin:0;white-space:nowrap}
dl.keys dd{margin:0;font-size:14.5px;color:var(--sub);line-height:1.55}
.keysbox .microline{margin:0;font-size:13px}

@media (max-width:760px){
  ol.guide{grid-template-columns:1fr;gap:22px}
  .keysbox{padding:20px 18px}
  dl.keys{grid-template-columns:1fr;gap:3px 0}
  dl.keys dt{margin-top:9px}
  dl.keys dd{margin-bottom:2px}
}

/* 헤더가 화면에 붙어 있으므로, 앵커로 이동하면 제목이 헤더 밑으로 들어간다.
   목적지마다 헤더 높이만큼 위쪽 여백을 줘서 제목이 가려지지 않게 한다. */
section[id], [id="download"]{scroll-margin-top:86px}
@media (max-width:600px){ section[id], [id="download"]{scroll-margin-top:72px} }

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* 데모 영상 - 첫 화면 바로 아래. 폭이 줄어도 1440:472 비율을 유지해 레이아웃이 튀지 않게 한다. */
.demoSec{padding:56px 0 0}
.demoFrame{margin-top:26px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.demoFrame video{display:block;width:100%;height:auto;aspect-ratio:1440/472;background:var(--bg-soft)}
@media (max-width:640px){.demoSec{padding:40px 0 0}.demoFrame{margin-top:18px;border-radius:12px}}
/* ──────────────────────────────────────────────────────────────────────
   3.0 — /compare · /updates · /mcp
   ────────────────────────────────────────────────────────────────────── */

/* 비교표. 열이 다섯이라 좁은 화면에서는 가로로 밀어 본다.
   표를 억지로 카드로 접으면 "무엇과 무엇을 비교하는지"가 사라진다. */
/* 가로로 미는 영역이라 키보드로도 닿아야 한다(tabindex=0). */
.cmpwrap{margin:28px 0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:14px;background:var(--bg-soft)}
.cmp{width:100%;min-width:760px;border-collapse:collapse;font-size:14.5px;line-height:1.55}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--sub);
  background:var(--bg-deep);white-space:nowrap;position:sticky;top:0}
.cmp tbody th{font-weight:650;color:var(--text);white-space:nowrap}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
/* 우리 행만 세운다. 남의 행을 흐리게 하는 것이 아니라 우리 쪽에 색을 준다. */
.cmp tr.me th,.cmp tr.me td{background:var(--accent-soft)}
.cmp tr.me th{box-shadow:inset 3px 0 0 var(--accent)}

/* 묻고 답하기 */
.qa{border:1px solid var(--line);border-radius:12px;margin:10px 0;background:var(--bg-soft)}
.qa > summary{cursor:pointer;padding:14px 18px;font-weight:600;list-style:none;
  display:flex;align-items:center;gap:10px}
.qa > summary::-webkit-details-marker{display:none}
.qa > summary:before{content:"+";color:var(--accent);font-weight:700;font-size:17px;line-height:1}
.qa[open] > summary:before{content:"\2212"}
.qa > p{margin:0;padding:0 18px 16px 42px;color:var(--sub);line-height:1.7}

/* 소식 한 건 */
.upd{border-top:1px solid var(--line);padding-top:24px;margin-top:28px}
.upd:first-of-type{border-top:0;padding-top:0;margin-top:20px}
.upd .doch2{margin-top:0}

/* ──────────────────────────────────────────────────────────────────────
   히어로: "화면에 붙는 메모" vs "창에 붙는 메모"
   GIF 가 아니라 CSS 다. 글자가 HTML 안에 있으므로 12개 언어가 그대로 된다.
   ────────────────────────────────────────────────────────────────────── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:34px auto 0;
  max-width:var(--max);padding:0 24px}
.vs-card{border:1px solid var(--line);border-radius:16px;background:var(--bg-soft);
  padding:16px 16px 18px;overflow:hidden}
.vs-card h3{margin:0 0 4px;font-size:15px;font-weight:650}
.vs-card p{margin:0 0 14px;font-size:13px;color:var(--sub);line-height:1.5}
.vs-stage{position:relative;height:132px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);overflow:hidden}
/* 창 */
.vs-win{position:absolute;left:14px;top:26px;width:132px;height:84px;border-radius:8px;
  border:1px solid var(--line-strong);background:var(--bg-deep);
  animation:vsSlide 6s ease-in-out infinite}
.vs-win:before{content:"";position:absolute;inset:0 0 auto;height:16px;
  border-bottom:1px solid var(--line-strong);background:var(--bg-soft);border-radius:7px 7px 0 0}
/* 메모 */
.vs-note{position:absolute;width:74px;height:46px;border-radius:6px;
  background:#fdd85f;border:1px solid #d8b04a;box-shadow:0 2px 6px rgba(0,0,0,.14)}
/* 왼쪽: 메모가 화면에 박혀 있다 — 창이 떠나면 혼자 남는다 */
.vs-a .vs-note{left:104px;top:56px}
/* 오른쪽: 메모가 창과 함께 움직인다 */
.vs-b .vs-note{left:104px;top:56px;animation:vsSlide 6s ease-in-out infinite}
@keyframes vsSlide{
  0%,18%   {transform:translateX(0)}
  38%,62%  {transform:translateX(74px)}
  82%,100% {transform:translateX(0)}
}
/* 움직임을 원하지 않는 사람에게는 멈춘 그림을 준다. 이 애니메이션은 장식이 아니라
   설명이므로, 멈춰도 두 카드의 차이가 보이도록 오른쪽 메모를 창 위에 올려 둔다. */
@media (prefers-reduced-motion:reduce){
  .vs-win,.vs-b .vs-note{animation:none}
  .vs-b .vs-note{left:104px}
}
@media (max-width:720px){
  .vs{grid-template-columns:1fr;gap:14px}
  .cmp{min-width:640px;font-size:13.5px}
  .cmp th,.cmp td{padding:12px 13px}
}