/* 찾다(CHATDA) 소개·내려받기 페이지 —
   색은 프로그램 화면(crates/chatda-mcp/src/ui.html)과 **같은 값**을 쓴다.
   소개 페이지와 실제 화면이 다른 색이면 내려받은 사람이 다른 물건을 받은 느낌을 받는다. */
:root{
  --bg:#fbfbfa; --panel:#ffffff; --panel-2:#f4f4f2; --line:#d2d2cc; --line-strong:#a8a8a1;
  --fg:#1b1b19; --fg-2:#63635e; --fg-3:#6a6a64;
  --accent:#2f6f4e; --accent-soft:#e6f1ea; --accent-fg:#ffffff;
  --warn:#9a5b00; --warn-soft:#fdf1e0;
  --mark:#fff2a8;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06);
  --shadow-lg:0 2px 6px rgba(0,0,0,.06),0 24px 64px rgba(0,0,0,.12);
  --r:12px;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono","D2Coding",Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Pretendard","Malgun Gothic",
         "Apple SD Gothic Neo",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#151614; --panel:#1d1e1c; --panel-2:#242522; --line:#4a4c45; --line-strong:#6b6d64;
    --fg:#eceada; --fg-2:#a9aa9f; --fg-3:#8e9086;
    --accent:#6fbf8f; --accent-soft:#1f2c25; --accent-fg:#0f1410;
    --warn:#e0a860; --warn-soft:#2c2317; --mark:#5c5018;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 24px 64px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#151614; --panel:#1d1e1c; --panel-2:#242522; --line:#4a4c45; --line-strong:#6b6d64;
  --fg:#eceada; --fg-2:#a9aa9f; --fg-3:#8e9086;
  --accent:#6fbf8f; --accent-soft:#1f2c25; --accent-fg:#0f1410;
  --warn:#e0a860; --warn-soft:#2c2317; --mark:#5c5018;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 24px 64px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:16px; line-height:1.7; letter-spacing:-.01em;
  word-break:keep-all; overflow-wrap:anywhere;
}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
code,kbd{font-family:var(--mono); font-size:.92em}
kbd{
  background:var(--panel-2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:6px; padding:1px 6px; white-space:nowrap;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
.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:12px; top:-60px; z-index:20; background:var(--accent);
  color:var(--accent-fg); padding:10px 16px; border-radius:8px; text-decoration:none;
  transition:top .15s;
}
.skip:focus{top:12px}

/* ── 머리글 ─────────────────────────────────────────── */
header.top{
  position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--line);
}
.topin{display:flex; align-items:center; gap:16px; height:60px}
/* ★ body 에 overflow-wrap:anywhere 가 걸려 있어서, 좁은 화면에서 이름이 "찾/다" 로 쪼개졌다.
     이름은 어떤 폭에서도 쪼개지지 않아야 한다. */
.brand{display:flex; align-items:baseline; gap:8px; font-weight:800; font-size:20px; text-decoration:none; white-space:nowrap}
.brand small{font-size:11px; letter-spacing:.18em; color:var(--fg-3); font-weight:700}
.topnav{margin-inline-start:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.topnav a,.topnav button{
  font:inherit; font-size:14px; color:var(--fg-2); text-decoration:none; background:none;
  border:0; padding:8px 10px; border-radius:8px; cursor:pointer;
}
.topnav a:hover,.topnav button:hover{background:var(--panel-2); color:var(--fg)}
.topnav a.cta{
  background:var(--accent); color:var(--accent-fg); font-weight:700; padding:8px 16px;
}
.topnav a.cta:hover{background:var(--accent); filter:brightness(1.08); color:var(--accent-fg)}

/* ── 히어로 ─────────────────────────────────────────── */
.hero{padding:76px 0 8px; text-align:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:6px 14px;
  margin-bottom:26px;
}
h1{
  font-size:clamp(32px, 6.4vw, 60px); line-height:1.18; letter-spacing:-.035em;
  font-weight:800; margin:0 0 22px;
}
h1 .em{color:var(--accent); display:block}
.lede{
  font-size:clamp(16px, 2.1vw, 20px); color:var(--fg-2); max-width:660px;
  margin:0 auto 32px; line-height:1.65;
}
.lede b{color:var(--fg); font-weight:700}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:16px}
.btn{
  display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:700;
  text-decoration:none; padding:14px 26px; border-radius:10px; border:1px solid transparent;
  cursor:pointer; font-family:inherit;
}
.btn-main{background:var(--accent); color:var(--accent-fg); box-shadow:var(--shadow)}
.btn-main:hover{filter:brightness(1.08)}
.btn-sub{background:var(--panel); color:var(--fg); border-color:var(--line)}
.btn-sub:hover{background:var(--panel-2)}
.undercta{font-size:13.5px; color:var(--fg-3); margin:0 0 44px}
.undercta b{color:var(--fg-2)}

/* 화면 사진 — 밝기 모드에 맞는 쪽만 보인다 */
.shot{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-lg); background:var(--panel);
}
.shot img{width:100%}
.only-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .only-light{display:none}
  :root:not([data-theme="light"]) .only-dark{display:block}
}
:root[data-theme="dark"] .only-light{display:none}
:root[data-theme="dark"] .only-dark{display:block}
:root[data-theme="light"] .only-light{display:block}
:root[data-theme="light"] .only-dark{display:none}
.caption{font-size:13px; color:var(--fg-3); text-align:center; margin:12px 0 0}

/* ── 구역 공통 ──────────────────────────────────────── */
section{padding:72px 0}
section.tight{padding:48px 0}
h2{font-size:clamp(24px, 3.4vw, 34px); line-height:1.3; letter-spacing:-.03em; font-weight:800; margin:0 0 14px}
h3{font-size:18px; font-weight:750; letter-spacing:-.02em; margin:0 0 8px}
.sub{color:var(--fg-2); margin:0 0 34px; max-width:680px}
.center{text-align:center}
.center .sub{margin-inline:auto}

/* ── 쐐기(경쟁사 인용) ──────────────────────────────── */
.wedge{background:var(--panel-2); border-block:1px solid var(--line)}
blockquote.q{
  margin:0 auto; max-width:760px; background:var(--panel); border:1px solid var(--line);
  border-inline-start:4px solid var(--accent); border-radius:var(--r); padding:26px 30px;
  box-shadow:var(--shadow);
}
blockquote.q p{margin:0; font-size:clamp(18px,2.6vw,23px); font-weight:700; letter-spacing:-.02em; line-height:1.45}
blockquote.q .tr{font-size:15px; font-weight:500; color:var(--fg-2); margin-top:10px}
blockquote.q cite{display:block; margin-top:16px; font-size:13.5px; color:var(--fg-3); font-style:normal}
blockquote.q cite a{color:var(--fg-3)}
.wedge .after{max-width:760px; margin:26px auto 0; font-size:17px; line-height:1.7}
.wedge .after b{color:var(--accent)}

/* ── 카드 ───────────────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px; box-shadow:var(--shadow);
}
.card .tag{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.02em;
  color:var(--accent); background:var(--accent-soft); border-radius:6px; padding:3px 9px; margin-bottom:12px;
}
.card p{margin:0; color:var(--fg-2); font-size:15px}
.card p + p{margin-top:10px}
.card .ex{
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);
  font-size:14px; color:var(--fg-3);
}
.card .ex code{background:var(--panel-2); border-radius:5px; padding:2px 6px; color:var(--fg-2)}
mark{background:var(--mark); color:inherit; border-radius:3px; padding:0 2px}


/* 초성 구역 — 글과 사진을 나란히 두되, 좁은 화면에서는 반드시 아래로 내려와야 한다.
   ★ 이걸 인라인 style 로 두었더니 미디어 질의가 못 이겨서 390px 화면에서 가로 스크롤이
     생겼다(실측 562px). 배치 규칙은 CSS 파일에 둔다. */
.split{display:grid; grid-template-columns:minmax(260px,1fr) minmax(300px,1.5fr); gap:18px; align-items:center}
@media (max-width:780px){ .split{grid-template-columns:1fr} }

/* ── 숫자 ───────────────────────────────────────────── */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.stat .n{font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1.2}
.stat .n small{font-size:16px; font-weight:700; color:var(--fg-2)}
.stat .l{font-size:13.5px; color:var(--fg-2); margin-top:4px}
.foot-note{font-size:13px; color:var(--fg-3); margin-top:18px}

/* ── 짧은 목록 ──────────────────────────────────────── */
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px 30px}
.line{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line b{flex:0 0 auto; min-width:112px; font-weight:700}
.line span{color:var(--fg-2); font-size:15px}

/* ── 알림 상자 ──────────────────────────────────────── */
.note{
  background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius:var(--r); padding:20px 22px;
}
.note h3{color:var(--warn); margin-bottom:10px}
.note ul{margin:0; padding-inline-start:20px; color:var(--fg-2); font-size:15px}
.note li + li{margin-top:8px}

/* ── 내려받기 ───────────────────────────────────────── */
.dl{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:34px 30px; box-shadow:var(--shadow); text-align:center;
}
.dl .meta{font-size:14px; color:var(--fg-3); margin-top:14px}
.dl .meta code{background:var(--panel-2); border-radius:5px; padding:2px 7px}
.steps{counter-reset:s; list-style:none; margin:0; padding:0}
.steps li{
  counter-increment:s; position:relative; padding:0 0 20px 46px; border-inline-start:2px solid var(--line);
  margin-inline-start:14px;
}
.steps li:last-child{border-inline-start-color:transparent; padding-bottom:0}
.steps li::before{
  content:counter(s); position:absolute; inset-inline-start:-15px; top:-2px;
  width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--accent-fg);
  font-size:14px; font-weight:800; display:grid; place-items:center;
}
.steps b{display:block; margin-bottom:2px}
.steps span{color:var(--fg-2); font-size:15px}

/* ── 꼬리글 ─────────────────────────────────────────── */
footer{border-top:1px solid var(--line); background:var(--panel-2); padding:44px 0 56px; margin-top:24px}
footer .flinks{display:flex; gap:8px 20px; flex-wrap:wrap; margin-bottom:22px; font-size:14.5px}
footer .flinks a{color:var(--fg-2); text-decoration:none}
footer .flinks a:hover{color:var(--fg); text-decoration:underline}
footer .biz{font-size:12.5px; color:var(--fg-3); line-height:1.9}
footer .biz b{color:var(--fg-2); font-weight:700}

/* ── 표 ─────────────────────────────────────────────── */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15px}
th,td{text-align:start; padding:13px 18px; border-bottom:1px solid var(--line)}
th{font-weight:700; background:var(--panel-2); font-size:13.5px; color:var(--fg-2)}
tr:last-child td{border-bottom:0}
td code{background:var(--panel-2); border-radius:5px; padding:2px 6px}

@media (max-width:640px){
  .hero{padding:52px 0 4px}
  section{padding:52px 0}
  .btn{width:100%; justify-content:center}
  .line b{min-width:92px}
  /* 좁은 화면 머리글 — 같은 쪽 안을 오가는 자리표(#) 는 접는다. 아래로 내려가면 어차피 다 나온다.
     대신 언어 바꾸기·색 바꾸기·내려받기는 어떤 폭에서도 남긴다. 이 셋이 이 쪽의 할 일이다. */
  .topin{gap:8px}
  .brand{font-size:18px}
  .topnav{flex-wrap:nowrap; gap:2px}
  .topnav a[href^="#"]{display:none}
  .topnav a,.topnav button{padding:8px 8px; font-size:13px}
  .topnav a.cta{padding:8px 13px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}