/* ============================================================
   Agentify · style.css
   다크 테마 / 고가시성 에이전트 디렉토리
   - 모바일 최적화: 카드형 리스트 + 하단 시트 패널
   ============================================================ */

:root {
  /* 배경: 순검정을 피하고 명도를 올려 눈부심·뭉개짐을 줄임 */
  --bg:          #141922;
  --surface:     #1C222E;
  --surface-2:   #252D3B;
  --surface-3:   #303A4B;
  --border:      #3A4557;
  --border-soft: #2A3341;

  /* 텍스트: 배경 대비 최소 4.5:1 이상 확보 */
  --text:        #F4F7FB;
  --text-dim:    #BFC9D9;
  --text-faint:  #8F9BAF;

  --accent:      #5FE3CA;
  --accent-dim:  #2E7A6E;
  --accent-glow: rgba(95, 227, 202, 0.14);

  --live:        #5FE38A;
  --beta:        #7CB8FF;
  --limited:     #C79BFF;
  --maint:       #FFC94D;
  --down:        #FF8B7E;

  /* 본문 최대 폭 — 이 값을 넘어가면 양옆 여백이 늘어나 광고 자리가 생깁니다.
     가장 긴 에이전트 이름(Agentic Commerce Protocol, 25자)이 한 줄에 들어가는 폭을 기준으로 잡았습니다. */
  --content-max: 1280px;
  --gutter: 32px;

  --radius: 6px;
  --panel-w: 420px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg); }

body {
  color: var(--text);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.mono { font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; }
a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
/* 화면이 --content-max 보다 넓어지면 좌우 여백이 자동으로 늘어납니다.
   배경과 구분선은 화면 전체를 채우고, 내용만 가운데로 모입니다. */
.site-header,
.search-bar,
.result-meta,
.table-scroll,
.foot-note,
.cat-desc-mobile,
.tap-hint {
  padding-left: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--content-max)) / 2));
}

.site-header {
  padding-top: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.logo-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }

.logo {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--text);
}
.logo span { color: var(--accent); }
.logo:hover { opacity: .75; }
.logo:active { opacity: .55; }

.tagline { font-size: 14.5px; color: var(--text-dim); }

.header-actions { display: flex; gap: 8px; align-items: center; }

.btn-api {
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
  min-height: 42px;
}
.btn-api:hover { background: rgba(95,227,202,.22); }

/* 헤더의 주 행동 — 소식 받기 */
.btn-sub {
  background: var(--accent); border: 1px solid var(--accent);
  color: #06201C;
  padding: 10px 18px; border-radius: var(--radius);
  font-size: 13.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; min-height: 42px;
  transition: opacity .15s;
}
.btn-sub:hover { opacity: .88; }

/* 목록 아래로 내려간 API 입구 — 개발자·AI 용이라 조용하게 둡니다 */
.api-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  padding: 6px 0 4px;
}
.api-note { font-size: 13px; color: var(--text-faint); }

/* --- 소식 받기 --- */
.sub-modal { width: 460px; }
.sub-lede {
  margin: 0 0 7px; font-size: 14.5px; color: var(--text-dim);
  line-height: 1.65; word-break: keep-all;
}
/* 마지막 단락만 입력 칸과의 간격을 벌립니다 (.sub-note 도 p 라 :last-of-type 은 못 씁니다) */
.sub-lede + .sub-lede { margin-bottom: 22px; }
.sub-lede b { color: var(--text); font-weight: 600; }
.sub-label {
  display: block; margin: 0 0 8px;
  font-size: 13.5px; font-weight: 600; color: var(--text-dim);
}
.sub-hint { font-weight: 400; color: var(--text-faint); font-size: 12.5px; }
.sub-modal input[type="email"],
.sub-modal input[type="text"] {
  width: 100%; margin-bottom: 22px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  font-family: inherit; font-size: 15px; padding: 12px 13px; min-height: 46px;
  outline: none; transition: border-color .15s;
}
.sub-modal input::placeholder { color: var(--text-faint); }
.sub-modal input:focus { border-color: var(--accent); background: var(--surface-3); }

.interest-list {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px;
}
.interest {
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-dim);
  border-radius: 20px; padding: 7px 13px;
  font-size: 13px; font-family: inherit;
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.interest:hover { border-color: var(--surface-3); color: var(--text); }
.interest.on {
  border-color: var(--accent-dim); background: var(--accent-glow); color: var(--accent);
  font-weight: 600;
}

.sub-submit {
  display: block; width: 100%;
  background: var(--accent); color: #06201C; border: none;
  font-family: inherit; font-size: 15.5px; font-weight: 700;
  padding: 15px; min-height: 50px; border-radius: var(--radius);
  cursor: pointer; transition: opacity .15s;
}
.sub-submit:hover:not(:disabled) { opacity: .9; }
.sub-submit:disabled { opacity: .5; cursor: default; }
.sub-note {
  margin: 10px 0 0; font-size: 12.5px; color: var(--text-faint);
  line-height: 1.6; word-break: keep-all;
}
.sub-note.ok { color: var(--accent); }
.sub-note.bad { color: var(--maint); }

/* ------------------------------------------------------------
   Search bar
   ------------------------------------------------------------ */
.search-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr)) minmax(150px, 1fr) minmax(160px, 1.1fr);
  gap: 12px;
  /* 위아래를 좁혀 목록이 화면에 더 많이 보이게 합니다.
     모바일은 아래 미디어쿼리에서 따로 정하므로 여기는 데스크톱 값입니다. */
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.field { display: flex; flex-direction: column; gap: 5px; }

.field label {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-faint);
  letter-spacing: .2px;
  font-weight: 600;
}

.field select,
.field input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 9px 13px;
  font-size: 14.5px;            /* iOS 자동 확대 방지: 16px 미만이면 확대됨 → appearance 로 눌러 둡니다 */
  font-family: inherit;
  outline: none;
  min-height: 40px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, background .15s;
}

/* select 화살표 직접 그리기 (appearance:none 보완) */
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.field select:hover:not(:disabled),
.field input:hover { border-color: var(--surface-3); }

.field select:focus,
.field input:focus {
  border-color: var(--accent);
  background: var(--surface-3);
}

.field select:disabled { color: var(--text-faint); cursor: not-allowed; opacity: .5; }

/* 여러 개를 고를 수 있는 드롭다운 (한국어 지원) */
.multi { position: relative; }
.multi-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 9px 34px 9px 13px;
  font-size: 14.5px;
  font-family: inherit;
  min-height: 40px;
  cursor: pointer;
  text-align: left;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .15s, background-color .15s;
}
.multi-btn:hover { border-color: var(--surface-3); }
.multi.open .multi-btn { border-color: var(--accent); background-color: var(--surface-3); }
.multi-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-faint);
}
.multi-label.on { color: var(--accent); font-weight: 600; }

/* 펼쳐지는 목록 — 칸 너비에 맞춰 좁게 */
.multi-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  z-index: 25;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.multi.open .multi-menu { display: block; }

/* 체크박스 없이 항목 이름과 설명만 — 고르면 배경으로 표시 */
.multi-item {
  display: block;
  padding: 7px 9px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid transparent;
}
.multi-item:hover { background: var(--surface-3); }
.multi-item input { position: absolute; opacity: 0; pointer-events: none; }
.multi-item:has(input:checked) {
  background: var(--accent-glow);
  border-color: var(--accent-dim);
}
.multi-item.off { opacity: .38; cursor: not-allowed; }
.multi-item.off:hover { background: none; }

.multi-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.multi-rule {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.35;
  word-break: keep-all;
  margin-top: 2px;
}

/* 아래쪽 버튼 줄 — 좌측 완료, 우측 해제 */
.multi-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--border);
}
.multi-done {
  flex: 1;
  background: var(--accent);
  border: none;
  border-radius: 5px;
  color: #06201C;
  padding: 8px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.multi-done:hover { opacity: .9; }
.multi-clear {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-dim);
  padding: 8px 12px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}
.multi-clear:hover { color: var(--accent); border-color: var(--accent-dim); }

/* 선택한 카테고리 설명 (셀렉트 아래 한 줄) */
.field-desc {
  word-break: keep-all;
  /* 설명이 비어 있어도 자리를 잡아 둡니다 — 분야를 고를 때마다
     검색바 높이가 들썩이면 아래 목록이 튀기 때문입니다.
     그래서 지울 수는 없고, 위 간격만 당겨 붙였습니다. */
  margin: -3px 0 0;
  min-height: 17px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-faint);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .18s, transform .18s;
}
.field-desc.on { opacity: 1; transform: translateY(0); color: var(--accent); }

/* 모바일 전용 통합 카테고리 설명 (데스크톱에서는 숨김) */
.cat-desc-mobile { display: none; }
.field input::placeholder { color: var(--text-faint); }

/* ------------------------------------------------------------
   Result meta strip
   ------------------------------------------------------------ */
.result-meta {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-soft);
}

.result-count { font-size: 14px; color: var(--text-dim); }
.result-count b { color: var(--accent); font-weight: 700; font-size: 16px; }
.result-count .of-total { color: var(--text-faint); font-size: 13px; }

.crumb { font-size: 12.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--text-faint); }
.crumb .seg {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  color: var(--text-dim);
}

.btn-reset {
  margin-left: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 9px 15px;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  min-height: 40px;
}
.btn-reset:hover { color: var(--text); border-color: var(--surface-3); }

/* ------------------------------------------------------------
   Mobile sort bar (모바일에서만 노출)
   ------------------------------------------------------------ */
.mobile-sort { display: none; }

/* 목록 안내 문구 — 기본은 데스크톱('클릭'), 좁은 화면에서 '터치'로 바뀝니다 */
.tap-hint {
  margin: 12px 0;
  font-size: 13.5px;
  color: var(--text-faint);
}
.hint-touch { display: none; }

/* ------------------------------------------------------------
   Table (데스크톱)
   ------------------------------------------------------------ */
.table-scroll { overflow-x: auto; padding-top: 0; padding-bottom: 60px; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; min-width: 1000px; }

thead th {
  position: sticky; top: 0;
  background: var(--bg);
  z-index: 3;
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--text); }
thead th .arrow { margin-left: 5px; opacity: .4; font-size: 10px; }
thead th.sorted { color: var(--accent); }
thead th.sorted .arrow { opacity: 1; }

tbody tr { border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background .12s; }
tbody tr:hover { background: var(--surface); }
tbody tr.active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
tbody td { padding: 15px 12px; vertical-align: middle; }

.cell-name { font-weight: 700; font-size: 15.5px; color: var(--text); }
.cell-id { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.cell-vendor { color: var(--text-dim); font-size: 13.5px; }
.cell-price { font-size: 13.5px; color: var(--text-dim); }
.cell-price.free { color: var(--live); font-weight: 600; }

.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; font-weight: 600; }
.status .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status.active .dot       { background: var(--live);    box-shadow: 0 0 8px var(--live); }
.status.partial .dot      { background: var(--beta);    box-shadow: 0 0 8px var(--beta); }
.status.preview .dot      { background: var(--limited); box-shadow: 0 0 8px var(--limited); }
.status.merged .dot       { background: var(--maint); }
.status.discontinued .dot { background: var(--down); }
.status.active       { color: var(--live); }
.status.partial      { color: var(--beta); }
.status.preview      { color: var(--limited); }
.status.merged       { color: var(--maint); }
.status.discontinued { color: var(--down); }

.tag-list { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.tag.muted { background: var(--surface-2); border-color: var(--border); color: var(--text-dim); }

/* 한국어 지원 배지 */
.ko {
  display: inline-block;
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid;
}
.ko-short { display: inline; }
.ko-full  { display: none; }
.ko-high   { color: #7BE3B4; border-color: #2F6B52; background: rgba(123,227,180,.12); }
.ko-mid    { color: #9CD4FF; border-color: #2C5675; background: rgba(156,212,255,.12); }
.ko-low    { color: #FFD27D; border-color: #6B5426; background: rgba(255,210,125,.10); }
.ko-lowest { color: #FF9E92; border-color: #6B322C; background: rgba(255,158,146,.10); }
.ko { cursor: help; }

.btn-visit {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  padding: 7px 13px;      /* 기존 9px 16px 의 약 80% — 글자 크기는 그대로 */
  border-radius: var(--radius);
  font-size: 13px;
  white-space: nowrap;
  transition: all .15s;
}
.btn-visit:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

/* 더 보기 */
.load-more-wrap { display: none; padding: 22px 0 4px; text-align: center; }
.btn-load-more {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 13px 30px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 46px;
  transition: all .15s;
}
.btn-load-more:hover { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-glow); }

/* 강점 키워드 설명 툴팁 */
.tag { cursor: help; }
.tag-tip {
  position: fixed;
  z-index: 60;
  max-width: 280px;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  padding: 11px 13px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .14s, transform .14s;
}
.tag-tip.open { opacity: 1; transform: translateY(0); }
.tag-tip-term {
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 5px;
}
/* 툴팁 2단 구성: 판정 기준(윗줄) + 이 에이전트의 실제 사용환경(아랫줄) */
.tip-rule {
  display: block;
  color: var(--text-dim);
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.tip-note { display: block; }

.tag-tip-desc {
  word-break: keep-all;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}
/* 말풍선 꼬리
   --tip-tail 은 app.js가 계산해 넣습니다. 누른 키워드의 중앙을 가리키며,
   모바일에서는 말풍선이 화면 폭에 맞춰 넓어지므로 꼬리가 왼쪽에 붙습니다.
   값이 없을 때만 가운데(50%)로 둡니다. */
.tag-tip::after {
  content: "";
  position: absolute;
  left: var(--tip-tail, 50%);
  margin-left: -6px;
  border: 6px solid transparent;
  bottom: -12px;
  border-top-color: var(--accent-dim);
}
.tag-tip.below::after {
  bottom: auto;
  top: -12px;
  border-top-color: transparent;
  border-bottom-color: var(--accent-dim);
}

.noscript-fallback td { padding: 0; border: none; }
.noscript-fallback noscript { display: block; padding: 40px 12px; text-align: center; color: var(--text-dim); font-size: 13.5px; }
.noscript-fallback a { color: var(--accent); text-decoration: underline; }

.empty-row td { text-align: center; color: var(--text-faint); padding: 60px 12px; font-size: 14px; }

/* ------------------------------------------------------------
   Detail panel
   ------------------------------------------------------------ */
/* 데스크톱: 패널이 열리면 본문을 왼쪽으로 밀어 표가 가려지지 않게 함 */
.page {
  transition: padding-right .26s cubic-bezier(.4,0,.2,1);
}
@media (min-width: 1100px) {
  body.panel-open .page { padding-right: var(--panel-w); }
  /* 데스크톱에서는 배경을 덮지 않는다 (표를 계속 볼 수 있어야 하므로) */
  body.panel-open .panel-overlay { opacity: 0; pointer-events: none; }
}

.panel-overlay {
  position: fixed; inset: 0;
  background: rgba(6,9,14,.6);
  z-index: 35;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.panel-overlay.open { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--panel-w);
  max-width: 92vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  transform: translateX(102%);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -18px 0 40px rgba(0,0,0,.45);
}
.panel.open { transform: translateX(0); }

.sheet-grip { display: none; }

/* --- 패널 헤더: 이름(좌) · by 배급사(우) 한 줄 --- */
/* 머리글 두 줄 — 1행: 이름 / 접근하기,  2행: by 배급사 / 키워드 */
.panel-head {
  padding: 28px 28px 18px;
  border-bottom: 2px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.phead-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  overflow: hidden;
}
.phead-row .pname {
  font-size: 27px; font-weight: 700; letter-spacing: -0.3px;
  overflow-wrap: anywhere; min-width: 0;
}
/* 배급사 이름이 길면 줄바꿈 대신 '…' 로 줄여, 키워드와 같은 줄을 유지합니다 */
.phead-row .pvendor {
  font-size: 15px; color: var(--text-dim);
  flex: 0 1 auto; min-width: 2.5em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 자리가 모자라면 배급사가 먼저 줄어들고, 키워드는 온전히 남습니다 */
.phead-row .tag-list {
  justify-content: flex-end; flex: 0 0 auto;
  flex-wrap: nowrap;
}
.btn-visit-top {
  flex-shrink: 0;
  white-space: nowrap;
  border: 1px solid var(--accent-dim);
  background: var(--accent-glow);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.btn-visit-top:hover { opacity: .85; }

.panel-close {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  width: 30px; height: 30px; border-radius: var(--radius);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.panel-close:hover { color: var(--text); }

.panel-body { padding: 22px 28px 48px; }

/* --- 검색 카테고리 안내 --- */
.pcontext {
  word-break: keep-all;
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0 0 42px;
}
.pcontext b { color: var(--accent); font-weight: 700; }

/* --- 한 줄 소개 --- */
.ptagline {
  font-size: 15.5px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 22px;
  word-break: keep-all;
}
.ptagline.muted { color: var(--text-faint); font-style: italic; }

/* --- 가격 한 줄 (라벨 —————— 값) --- */
.prow {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 20px;
}
/* 줄 라벨 — 가격 · 운영 현황 · 한국어
   값(오른쪽)보다는 조용하게 두되, 본문 설명글과는 구분되도록
   굵기를 올리고 자간을 좁혔습니다. */
.prow-label {
  color: var(--text-dim); font-size: 14px; font-weight: 600;
  letter-spacing: -.2px; flex-shrink: 0;
}
.prow-leader {
  flex: 1; border-bottom: 1px dotted var(--border); height: 0;
  transform: translateY(-4px);
}
.prow-value { font-weight: 700; font-size: 16px; flex-shrink: 0; }

/* 아래에 설명이 붙는 줄은 설명과 한 덩어리로 보이도록 간격을 좁힙니다 */
.prow.tight { margin-bottom: 7px; }
.prow-note {
  margin: 0 0 20px;
  font-size: 13.5px; line-height: 1.65;
  color: var(--text-faint);
  word-break: keep-all;
}
.prow-note:empty { display: none; }

/* 한 줄 소개 바로 아래에 붙는 설명 — 소개문과 한 덩어리로 읽히게 붙입니다 */
.ptagline:has(+ .lede-note:not(:empty)) { margin-bottom: 9px; }
.lede-note { margin-bottom: 26px; }

#pTags { margin: 0 0 22px; }

/* --- 이 분야에서 --- */
.cmp-scope {
  margin: 0 0 14px;
  font-size: 12.5px; color: var(--text-faint);
  word-break: keep-all;
}
/* 섹션 안의 작은 제목 — 섹션 제목보다 한 단계 아래로 읽히게 */
.cmp-alt-title {
  margin: 22px 0 9px;
  font-size: 14px; font-weight: 700; letter-spacing: -.2px;
  color: var(--text-dim);
}
.cmp-alts { list-style: none; margin: 0; padding: 0; }
.cmp-alts li { border-bottom: 1px dotted var(--border-soft); }
.cmp-alts li:last-child { border-bottom: 0; }

/* 항목은 진짜 링크입니다.
   iOS 사파리는 a·button 이 아닌 요소의 탭을 클릭으로 바꿔 주지 않는 경우가
   있어, 목록·패널 어디서든 <a> 로 두고 패널에서만 기본 이동을 막습니다.
   덕분에 길게 눌러 새 탭으로 열거나, JS 가 죽어도 상세 페이지로 갑니다.
   (display:contents 로 감싸면 사파리에서 탭이 먹지 않을 수 있어 쓰지 않습니다) */
.cmp-alts a {
  display: flex; align-items: baseline; gap: 9px;
  padding: 12px 8px; margin: 0 -8px;
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: var(--accent-glow);
}
.cmp-alts a:hover { background: var(--surface-2); }
.cmp-alts a:active { background: var(--surface-3); }
/* 눌러서 그 프로필로 넘어갈 수 있다는 표시 — 모바일에는 hover 가 없어
   이름을 강조색으로 둡니다 */
.cmp-alt-name {
  font-size: 14.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere;
  color: var(--accent);
}
.cmp-alt-ko { flex-shrink: 0; padding: 2px 8px; font-size: 11px; cursor: pointer; }
.cmp-alt-price {
  margin-left: auto; flex-shrink: 0;
  font-size: 12.5px; color: var(--text-dim);
  text-align: right; max-width: 45%;
}

/* --- 알아둘 것 --- */
.fact-list { display: flex; flex-direction: column; gap: 14px; margin: 0 0 14px; }
.fact-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  align-items: baseline;
}
.fact-label {
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  white-space: nowrap;
}
.fact-value {
  font-size: 14px; line-height: 1.6; color: var(--text);
  word-break: keep-all;
}

/* --- 상세 지표 --- */
.metrics-block { margin: 0 0 36px; }
/* 섹션 제목 — 이 분야에서 · 알아둘 것 · 사용자 한 줄 평
   본문보다 확실히 밝고 굵게 두고, 왼쪽에 강조색 막대를 세웁니다.
   전에는 흐린 회색 작은 글씨라 본문에 묻혀 어디서 칸이 나뉘는지
   보이지 않았습니다. 강조색을 글자에 쓰지 않은 이유는 그 색이
   누를 수 있는 것(링크·에이전트 이름)에 이미 쓰이고 있어서입니다. */
.metrics-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; letter-spacing: -.2px;
  color: var(--text);
  margin: 0 0 15px;
  padding-bottom: 11px; border-bottom: 1px solid var(--border);
}
.metrics-title::before {
  content: ""; flex: 0 0 3px; height: 15px;
  background: var(--accent); border-radius: 2px;
}
.metrics-group-title {
  font-size: 13.5px; font-weight: 600; color: var(--text-dim);
  margin: 0 0 10px;
}
.metric-list { display: flex; flex-direction: column; gap: 9px; }
.metric-row {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 14px;
}
.metric-label { color: var(--text-dim); font-weight: 600; flex-shrink: 0; }
.metric-leader {
  flex: 1; border-bottom: 1px dotted var(--border-soft); height: 0;
  transform: translateY(-4px);
}
.metric-value { font-weight: 600; flex-shrink: 0; }
.metric-row.empty .metric-value { color: var(--text-faint); font-weight: 400; font-style: italic; }
.metrics-foot {
  margin: 14px 0 0; font-size: 12.5px; color: var(--text-faint); line-height: 1.6;
}

/* --- 사용자 한 줄 평 --- */
.reviews-block { margin: 0 0 36px; }
.review-list { display: flex; flex-direction: column; gap: 12px; }
.review-empty { color: var(--text-faint); font-size: 13.5px; margin: 0; }
.review-item {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 12px 14px;
}
.review-text { margin: 0 0 8px; font-size: 14px; line-height: 1.6; word-break: keep-all; }
.review-meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  font-size: 12.5px; color: var(--text-faint);
}
/* AI 가 남긴 한 줄 평 표시 */
.review-author { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.ai-tag {
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  flex-shrink: 0;
}

.review-votes { display: flex; gap: 6px; flex-shrink: 0; }
.review-votes .vote {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 20px; padding: 3px 10px;
  font-size: 12px; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: all .15s;
}
.review-votes .vote:hover { border-color: var(--accent-dim); color: var(--accent); }
.review-votes .vote.on {
  border-color: var(--accent-dim); color: var(--accent); background: var(--accent-glow);
}

/* --- 한 줄 평 작성 --- */
.review-form { margin-top: 14px; }
.review-form input {
  width: 100%;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-size: 13.5px;
  border-radius: var(--radius); padding: 10px 12px;
}
.review-form input::placeholder { color: var(--text-faint); }
.review-form input:focus { outline: none; border-color: var(--accent-dim); }
.review-form-row { display: flex; gap: 8px; margin-top: 8px; }
.review-form-row input { flex: 1; min-width: 0; }
.review-form-row button {
  flex-shrink: 0;
  background: var(--surface-3); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 600;
  border-radius: var(--radius); padding: 10px 18px;
  cursor: pointer; transition: all .15s;
}
.review-form-row button:hover:not(:disabled) {
  border-color: var(--accent-dim); color: var(--accent); background: var(--accent-glow);
}
.review-form-row button:disabled { opacity: .5; cursor: default; }
.review-note { margin: 8px 0 0; font-size: 12px; color: var(--text-faint); line-height: 1.5; }

.panel-cta {
  display: block; text-align: center; margin-top: 8px;
  background: var(--accent); color: #06201C;
  font-weight: 700; padding: 15px; border-radius: var(--radius);
  font-size: 15px;
}
.panel-cta:hover { opacity: .9; }

.panel-close-bottom {
  display: block; width: 100%; margin-top: 10px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 13px; border-radius: var(--radius);
  cursor: pointer; min-height: 46px;
  transition: all .15s;
}
.panel-close-bottom:hover { color: var(--text); border-color: var(--surface-3); }

/* ------------------------------------------------------------
   Code / JSON
   ------------------------------------------------------------ */
.code-block {
  background: #0B0F16;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.75;
  color: #B9E4D5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  margin-top: 10px;
}
.code-block .k { color: #9DC0F0; }
.code-block .s { color: #F0C784; }
.code-block .n { color: #D9AFF0; }

/* ------------------------------------------------------------
   API modal
   ------------------------------------------------------------ */
.overlay { position: fixed; inset: 0; background: rgba(6,9,14,.7); z-index: 45; display: none; }
.overlay.open { display: block; }

.modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(.98);
  width: 680px; max-width: 92vw; max-height: 84vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  z-index: 50;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  -webkit-overflow-scrolling: touch;
}
.modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.modal-head {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.modal-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.modal-head p { margin: 6px 0 0; font-size: 13.5px; color: var(--text-dim); }
.modal-body { padding: 20px 24px 32px; }

.endpoint {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.endpoint .method {
  background: var(--accent-dim); color: #DFFFF7;
  padding: 3px 9px; border-radius: 3px; font-weight: 700; font-size: 11.5px;
}
.endpoint .path { color: var(--text); word-break: break-all; }
.endpoint .desc {
  color: var(--text-faint);
  font-family: 'Pretendard', sans-serif;
  font-size: 12.5px; margin-left: auto;
}

.api-note {
  word-break: keep-all;
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-faint);
}

.btn-copy {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 13px 18px; border-radius: var(--radius);
  font-size: 13.5px; cursor: pointer; font-family: inherit;
  margin-top: 12px; width: 100%;
}
.btn-copy:hover { color: var(--accent); border-color: var(--accent-dim); }

/* ------------------------------------------------------------
   Footer note
   ------------------------------------------------------------ */
.foot-note {
  padding-top: 0;
  padding-bottom: 48px;
}

/* '클릭하면' / '터치하면' — 화면 너비가 아니라 입력 방식으로 갈라야 합니다.
   창을 좁게 띄운 데스크톱도 마우스로 클릭하지, 화면을 터치하지 않습니다.
   말풍선을 띄우는 방식(app.js 의 hasHover)과 같은 기준이라 말과 동작이
   어긋나지 않습니다. */
.if-mouse { display: inline; }
.if-touch { display: none; }
@media (hover: none) {
  .if-mouse { display: none; }
  .if-touch { display: inline; }
}
.foot-note p {
  margin: 0 0 7px;
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.7;
  /* 한국어는 기본값이 글자 단위로 끊겨 '재확 / 인하세요' 처럼 잘립니다.
     keep-all 을 주면 띄어쓰기 단위로만 줄이 바뀝니다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.foot-note p:last-child { margin-bottom: 0; }
.foot-note b { color: var(--text-dim); }
.foot-note .sign { margin-top: 14px; color: var(--text-dim); }
.foot-note .sign b { color: var(--accent); font-weight: 700; }
.foot-note .contact a { color: var(--text-dim); border-bottom: 1px solid var(--border); }
.foot-note .contact .sep { color: var(--text-faint); }
.ap-contact { margin: 0 0 4px; font-size: 15px; }
.ap-contact a { color: var(--accent); border-bottom: 1px solid var(--accent-dim); text-decoration: none; }
.foot-note .contact a:hover { color: var(--accent); border-color: var(--accent-dim); }

/* ============================================================
   반응형 — 태블릿
   ============================================================ */
@media (max-width: 1180px) {
  .search-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   반응형 — 모바일 (≤760px)
   표 → 카드형 리스트, 패널 → 하단 시트
   ============================================================ */
@media (max-width: 760px) {

  body { font-size: 15px; }

  /* --- 헤더: 로고는 왼쪽, API 버튼은 오른쪽 상단 고정 --- */
  /* 모바일에서는 좌우 여백을 16px로 고정 */
  .site-header,
  .search-bar,
  .result-meta,
  .table-scroll,
  .foot-note,
  .cat-desc-mobile,
  .mobile-sort,
  .tap-hint,
  .pager-tabs {
    padding-left: 16px;
    padding-right: 16px;
  }

  .site-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    padding-top: 16px;
    padding-bottom: 12px;
    gap: 10px;
  }
  .logo-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
  }
  .logo { font-size: 23px; }
  .tagline {
    width: auto;
    order: 0;
    margin-top: 0;
    font-size: 12.5px;
  }
  .header-actions { justify-self: end; align-self: start; }
  .btn-api { padding: 8px 13px; font-size: 12.5px; min-height: 38px; }

  /* --- 검색바: 6열 그리드로 2줄에 압축 ---
       1줄: 큰 분야 | 작은 분야 | 더 작은 분야   (각 2칸)
       2줄: 한국어 지원 | 이름 검색             (각 3칸)
     ------------------------------------------------ */
  .search-bar {
    grid-template-columns: repeat(6, 1fr);
    gap: 8px 7px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .search-bar .field:nth-child(1),
  .search-bar .field:nth-child(2),
  .search-bar .field:nth-child(3) { grid-column: span 2; }
  .search-bar .field:nth-child(4),
  .search-bar .field:nth-child(5) { grid-column: span 3; }

  .field { gap: 3px; }
  .field label { font-size: 12.5px; font-weight: 500; }
  .field select,
  .field input,
  .multi-btn {
    padding: 9px 24px 9px 9px;
    min-height: 38px;
    font-size: 13px;
    text-overflow: ellipsis;
  }
  .multi-btn {
    background-position: calc(100% - 13px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
  }
  /* 한국어 지원 칸은 두 번째 줄 왼쪽 절반에 있습니다.
     오른쪽 끝(right:0)을 기준으로 펼치면 폭이 칸보다 넓어
     화면 왼쪽 밖으로 잘리므로, 왼쪽 끝을 기준으로 오른쪽으로 펼칩니다. */
  .multi-menu {
    left: 0; right: auto;
    width: 220px;
    max-width: calc(100vw - 32px);
  }
  .multi-item { padding: 8px; }
  .multi-name { font-size: 12.5px; }
  .multi-rule { font-size: 10.5px; }
  .multi-done, .multi-clear { font-size: 12px; padding: 8px 10px; }
  .field select {
    background-position: calc(100% - 13px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
  }
  /* 이름 검색도 다른 박스와 같은 13px로 통일.
     아이폰에서 입력창을 누를 때 화면이 살짝 확대될 수 있으나,
     확대 자체를 막으면 시력이 불편한 사용자가 화면을 키울 수 없어
     문구 통일을 택하고 확대는 허용했습니다. */
  .search-bar .field:nth-child(5) input { font-size: 13px; padding-right: 9px; }
  .search-bar .field:nth-child(5) input::placeholder { font-size: 13px; }

  /* 개별 설명은 숨기고 검색바 아래 한 줄로 통합 */
  .field-desc { display: none; }
  .cat-desc-mobile {
    display: block;
    margin: 0;
    padding-top: 8px;
    padding-bottom: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--accent);
    word-break: keep-all;
    opacity: 0;
    transition: opacity .18s;
  }
  .cat-desc-mobile.on { opacity: 1; }
  /* 아무것도 고르지 않았을 때 빈 줄이 아래 요소를 밀어내지 않게 */
  .cat-desc-mobile:empty { display: none; padding: 0; }

  /* --- 결과 요약 + 정렬 바 ---
     둘 사이의 구분선을 없애 하나의 블록으로 묶고,
     위아래 여백을 같게 주어 각 줄이 가운데에 놓이도록 했습니다.
     ------------------------------------------------ */
  .result-meta {
    padding-top: 13px;
    padding-bottom: 10px;
    gap: 9px;
    align-items: center;
    border-bottom: none;      /* 사이 구분선 제거 */
  }
  .btn-reset { margin-left: auto; }

  .mobile-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 0;
    padding-bottom: 13px;     /* 위 여백은 result-meta 아래 여백이 담당 */
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 14px;
  }
  .mobile-sort select {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 11px 32px 11px 12px;
    font-size: 14px;
    font-family: inherit;
    min-height: 44px;
    appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                      linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
  .mobile-sort button {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    padding: 11px 15px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    min-height: 44px;
    white-space: nowrap;
  }

  /* 표 머리글이 없는 화면이라 무엇을 눌러야 할지 한 줄로 알려줍니다 */
  .tap-hint { font-size: 13px; margin-bottom: 0; }
  .hint-click { display: none; }
  .hint-touch { display: inline; }

  /* --- 표를 컴팩트 목록으로 (카드형 대신) ---
     가격 문자열이 최대 46자까지 길어지므로, 가격과 강점 키워드가
     같은 열을 다투지 않도록 3줄로 분리했습니다.
       1줄: 에이전트명 ............... 가격
       2줄: 배급사 · 가동 · 한국어
       3줄: #강점키워드 ............. 접근하기
     ------------------------------------------------------- */
  /* 위쪽 여백은 안내 문구가, 카드 사이 간격은 행이 담당합니다.
     좌우는 다른 요소와 같은 16px 로 맞춥니다. */
  .table-scroll { overflow-x: visible; padding: 0 16px 40px; }
  table { min-width: 0; display: block; }
  thead { display: none; }
  tbody { display: block; }

  tbody tr {
    display: grid;
    grid-template-columns: max-content max-content 1fr max-content;
    align-items: center;
    column-gap: 6px;
    row-gap: 6px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    margin: 0;
    padding: 13px 4px;
  }
  tbody tr.active {
    background: var(--surface);
    box-shadow: inset 3px 0 0 var(--accent);
    border-radius: 6px;
  }

  tbody td::before { display: none; }   /* 라벨 숨김 */
  tbody td {
    display: block;
    padding: 0;
    border: none;
    min-width: 0;
  }

  /* ── 1줄: 이름 + 가격 ── */
  tbody td:nth-child(1) {          /* 에이전트명 */
    grid-row: 1;
    grid-column: 1 / 4;
    justify-self: start;
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .cell-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cell-id { display: none; }

  tbody td:nth-child(3) {          /* 가격 — 길면 말줄임 */
    grid-row: 1;
    grid-column: 4;
    justify-self: end;
    min-width: 0;
    max-width: 46vw;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── 2줄: 배급사 · 가동 · 한국어 ── */
  tbody td:nth-child(2) {          /* 배급사 */
    grid-row: 2;
    grid-column: 1;
    max-width: 32vw;
    overflow: hidden;
  }
  .cell-vendor {
    font-size: 11.5px;
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  tbody td:nth-child(4) { grid-row: 2; grid-column: 2; }            /* 가동 */
  tbody td:nth-child(5) { grid-row: 2; grid-column: 3; justify-self: start; }  /* 한국어 */

  /* ── 3줄: 강점 키워드 + 접근하기 ── */
  tbody td:nth-child(6) {          /* 강점 키워드 — 잘리지 않게 전폭 사용 */
    grid-row: 3;
    grid-column: 1 / 4;
    justify-self: start;
    min-width: 0;
    overflow: hidden;
  }
  tbody td:nth-child(7) {          /* 접근하기 */
    grid-row: 3;
    grid-column: 4;
    justify-self: end;
  }

  .status { font-size: 11px; gap: 4px; }
  .status .dot { width: 7px; height: 7px; }
  .ko { font-size: 10.5px; padding: 2px 7px; }
  .tag { font-size: 11px; padding: 3px 9px; }
  .tag-list { gap: 5px; flex-wrap: wrap; }
  .btn-visit { padding: 5px 10px; font-size: 11.5px; border-radius: 4px; }

  /* 모바일에서는 한국어 항목에 '한국어' 글자를 붙여 표시 */
  .ko-short { display: none; }
  .ko-full  { display: inline; }

  .empty-row td { display: block; grid-column: 1 / -1; padding: 48px 12px; }

  .load-more-wrap { padding: 18px 0 4px; }
  .btn-load-more { width: 100%; padding: 14px; }
  .tag-tip { max-width: calc(100vw - 28px); }

  /* --- 패널을 하단 시트로 --- */
  /* 상세 시트 — 처음엔 화면의 약 절반, 위로 밀면 전체 */
  .panel {
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100%; max-width: 100%;
    /* dvh 는 지금 실제로 보이는 높이입니다. vh 는 iOS 사파리에서 주소창이
       숨겨진 상태의 큰 높이를 가리켜, 주소창이 떠 있으면 시트가 화면
       위쪽까지 올라와 배경이 안 보였습니다. dvh 를 모르는 브라우저를 위해
       vh 를 먼저 적어 둡니다. */
    height: 52vh;
    height: 52dvh;
    transition: transform .26s cubic-bezier(.4,0,.2,1),
                height .26s cubic-bezier(.4,0,.2,1);
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -14px 40px rgba(0,0,0,.5);
  }
  .panel.open { transform: translateY(0); }
  /* 분야 시트는 내용이 짧아 반 화면을 다 쓸 일이 없습니다 */
  .cat-sheet { height: auto; max-height: 82vh; max-height: 82dvh; }
  /* 위로 밀어 확장한 상태 — 배경이 10% 남도록 항상 같은 높이로 섭니다 */
  .panel.full { height: 90vh; height: 90dvh; }

  /* 끌어내리기 손잡이 — 실제로 잡을 수 있도록 위아래 여백을 확보 */
  .sheet-grip {
    display: block;
    position: relative;
    height: 20px;
    margin: 0;
    cursor: grab;
    touch-action: none;          /* 그립에서는 페이지 스크롤이 가로채지 않게 */
  }
  /* 절반 상태에서는 뒤 목록이 살짝 비치도록 배경을 옅게,
     전체로 확장하면 진하게 덮습니다.
     (오버레이가 패널보다 앞에 있어 형제 선택자를 쓸 수 없어 body 클래스로 제어) */
  .panel-overlay.open { background: rgba(6,9,14,.35); }
  body.sheet-full .panel-overlay.open { background: rgba(6,9,14,.62); }

  .sheet-grip::before {
    content: "";
    position: absolute;
    left: 50%; top: 8px;
    width: 44px; height: 4px;
    margin-left: -22px;
    background: var(--surface-3);
    border-radius: 4px;
  }
  /* 헤더를 잡아도 끌 수 있습니다 — 단 눌러야 하는 요소는 예외 */
  .panel-head { touch-action: none; }
  .panel-close,
  .panel-head .tag,
  .panel-head .btn-visit-top { touch-action: auto; }
  .panel-head { padding: 16px 20px 14px; }
  .phead-row .pname { font-size: 22px; }
  .phead-row .tag { font-size: 11.5px; padding: 3px 9px; }
  .panel-body { padding: 18px 20px 56px; }
  .pcontext { margin-bottom: 32px; }

  /* --- 모달 --- */
  .modal {
    width: 100%; max-width: 100%;
    top: auto; bottom: 0; left: 0;
    transform: translateY(100%);
    border-radius: 16px 16px 0 0;
    max-height: 88vh;
  }
  .modal.open { transform: translateY(0); }
  .modal-head { padding: 20px 20px 14px; }
  .modal-body { padding: 18px 20px 36px; }
  .endpoint { font-size: 11.5px; padding: 11px 12px; }
  .endpoint .desc { margin-left: 0; width: 100%; }
  .code-block { font-size: 11px; }

  .foot-note { padding-top: 0; padding-bottom: 44px; }
}

/* 아주 좁은 화면 */
@media (max-width: 420px) {
  .logo { font-size: 21px; }
  .tagline { font-size: 11.5px; }
  .field label { font-size: 12px; }
  .field select { font-size: 12px; padding-right: 20px; }
  .search-bar { gap: 7px 5px; }
}

/* 터치 기기: hover 효과 제거 (잔상 방지) */
@media (hover: none) {
  tbody tr:hover { background: var(--surface); }
  .btn-visit:hover { border-color: var(--border); color: var(--text-dim); background: var(--surface-2); }
}


/* ============================================================
   에이전트 상세 페이지 (/agent/<id>/)
   ------------------------------------------------------------
   목록 화면과 같은 토큰을 그대로 쓰되, 본문 폭을 좁혀
   글을 읽는 페이지로 보이게 합니다.
   ============================================================ */
.agent-page {
  /* 글줄 720px + 좌우 여백 — 헤더의 로고와 본문 왼쪽 끝이 맞도록 잡은 값입니다 */
  max-width: calc(720px + var(--gutter) * 2);
  margin: 0 auto;
  padding: 28px var(--gutter) 72px;
}

/* 상세 페이지는 본문이 좁으므로 로고도 본문 왼쪽 끝에 맞춥니다 */
.site-header.ap-header {
  padding-left: max(var(--gutter), calc((100% - 720px) / 2));
  padding-right: max(var(--gutter), calc((100% - 720px) / 2));
}

.ap-crumb {
  font-size: 13px; color: var(--text-faint);
  margin: 0 0 22px; word-break: keep-all;
}
.ap-crumb a { color: var(--accent); }
.ap-crumb a:hover { text-decoration: underline; }
.ap-crumb-here { color: var(--text-dim); }

.ap-name {
  font-size: 32px; font-weight: 800; letter-spacing: -.5px;
  margin: 0 0 6px; word-break: keep-all;
}
.ap-vendor { margin: 0 0 18px; font-size: 14px; color: var(--text-dim); }
.ap-vendor .mono { color: var(--text-faint); font-size: 12.5px; }
.ap-tagline {
  font-size: 16.5px; line-height: 1.65; margin: 0 0 26px;
  word-break: keep-all;
}
.ap-tagline:has(+ .lede-note:not(:empty)) { margin-bottom: 10px; }
.agent-page .lede-note { margin-bottom: 30px; }

.ap-cta-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 40px;
}
.ap-cta-row .panel-cta { margin: 0; width: auto; padding-left: 26px; padding-right: 26px; }
.ap-back { font-size: 14px; color: var(--accent); }
.ap-back:hover { text-decoration: underline; }

.ap-block { margin: 0 0 40px; }
.ap-block h2 {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 700; letter-spacing: -.2px;
  color: var(--text);
  margin: 0 0 18px; padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
}
.ap-block h2::before {
  content: ""; flex: 0 0 3px; height: 16px;
  background: var(--accent); border-radius: 2px;
}
.ap-korean-rule {
  margin: 0; font-size: 12.5px; line-height: 1.6;
  color: var(--text-faint); word-break: keep-all;
}

.ap-tag-list { list-style: none; margin: 0; padding: 0; }
.ap-tag-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: baseline;
  padding: 0 0 16px;
  margin: 0 0 16px;
  border-bottom: 1px dotted var(--border-soft);
}
.ap-tag-row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.ap-tag-row .tag { cursor: default; }
.ap-tag-desc { font-size: 14px; color: var(--text); line-height: 1.6; word-break: keep-all; }
.ap-tag-path {
  grid-column: 2; font-size: 12.5px; color: var(--text-faint);
  word-break: keep-all;
}

.ap-hist { list-style: none; margin: 0; padding: 0; }
.ap-hist li {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline;
  font-size: 13.5px; padding: 0 0 10px; margin: 0 0 10px;
  border-bottom: 1px dotted var(--border-soft);
}
.ap-hist li:last-child { border-bottom: 0; margin-bottom: 0; }
.ap-hist-date { color: var(--text-faint); font-size: 12.5px; flex-shrink: 0; }
.ap-hist-kind { color: var(--accent); font-weight: 600; flex-shrink: 0; }
.ap-hist-body { color: var(--text-dim); word-break: break-all; }

.ap-rel { list-style: none; margin: 0; padding: 0; }
.ap-rel li { border-bottom: 1px dotted var(--border-soft); }
.ap-rel li:last-child { border-bottom: 0; }
.ap-rel a {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 12px 4px; font-size: 14.5px;
}
.ap-rel a:hover { background: var(--surface); }
.ap-rel a b { font-weight: 600; }
.ap-rel-vendor { color: var(--text-faint); font-size: 13px; }
.ap-rel-price { margin-left: auto; color: var(--text-dim); font-size: 13px; }

.ap-inline-link { color: var(--accent); }
.ap-inline-link:hover { text-decoration: underline; }

.ap-foot {
  margin: 48px 0 0; padding-top: 22px;
  border-top: 1px solid var(--border-soft);
  font-size: 13px; line-height: 1.75; color: var(--text-faint);
  word-break: keep-all;
}
.ap-foot b { color: var(--text-dim); }

@media (max-width: 760px) {
  .agent-page { padding: 20px 16px 56px; }
  .ap-name { font-size: 26px; }
  .ap-tagline { font-size: 15.5px; }
  .ap-cta-row { margin-bottom: 32px; }
  .ap-cta-row .panel-cta { width: 100%; text-align: center; }
  .ap-rel-price { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------------
   분야별 비교 페이지 (/category/<slug>/)
   에이전트 페이지의 틀(.agent-page, .ap-block)을 그대로 쓰고
   여기서는 표와 목록만 더합니다.
   ------------------------------------------------------------ */
.ct-summary { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* 점을 grid 칸으로 만들면 안 됩니다. 줄 안의 <b> 가 저마다 grid 칸이
   되어(글자 덩어리도 익명 칸이 됩니다) 문장이 조각조각 끊깁니다.
   실제로 그렇게 만들었다가 "11개 중 / 8개는 무료로" 처럼 갈라졌습니다.
   점은 자리를 차지하지 않게 띄우고 글은 그냥 흐르게 둡니다. */
.ct-summary li {
  position: relative; padding-left: 19px;
  font-size: 15.5px; line-height: 1.7;
  word-break: keep-all;
}
.ct-summary li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.ct-summary b { color: var(--text); font-weight: 700; }

/* 표는 좁은 화면에서 옆으로 스크롤합니다 — 본문이 밀리지 않게 */
.ct-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ct-table {
  width: 100%; border-collapse: collapse; min-width: 460px;
  font-size: 15px;
}
.ct-table th, .ct-table td {
  text-align: left; padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: baseline;
}
.ct-table thead th {
  font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  white-space: nowrap; padding-bottom: 10px;
}
.ct-table tbody th { font-weight: 700; }
.ct-table tbody th a { color: var(--accent); }
.ct-table tbody th a:hover { text-decoration: underline; }
.ct-vendor {
  display: block; margin-top: 3px;
  font-size: 12.5px; font-weight: 400; color: var(--text-faint);
}
.ct-price { color: var(--text-dim); white-space: normal; }
.ct-price.free { color: var(--live); }
.ct-foot {
  margin: 16px 0 0; font-size: 13px; line-height: 1.65;
  color: var(--text-faint); word-break: keep-all;
}

.ct-children { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ct-children a {
  display: inline-flex; align-items: baseline; gap: 7px;
  border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 20px; padding: 8px 15px;
  font-size: 14px; color: var(--text-dim);
  transition: border-color .15s, color .15s;
}
.ct-children a:hover { border-color: var(--accent-dim); color: var(--text); }
.ct-children span { font-size: 12px; color: var(--text-faint); }

.ct-faq { margin: 0; }
.ct-faq dt {
  font-size: 15.5px; font-weight: 700; letter-spacing: -.2px;
  margin: 0 0 7px; word-break: keep-all;
}
.ct-faq dd {
  margin: 0 0 22px; font-size: 15px; line-height: 1.72;
  color: var(--text-dim); word-break: keep-all;
}
.ct-faq dd:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .ct-table { font-size: 14px; }
  .ct-table th, .ct-table td { padding: 11px 11px 11px 0; }
}

/* 첫 화면 아래의 분야별 비교 페이지 목록 */
.foot-cats { margin: 4px 0 20px; }
.foot-cats-title {
  margin: 0 0 10px;
  font-size: 13px; font-weight: 600; color: var(--text-dim);
}
.foot-cats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.foot-cats a {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--border-soft); background: var(--surface-2);
  border-radius: 20px; padding: 6px 13px;
  font-size: 13px; color: var(--text-dim);
  transition: border-color .15s, color .15s;
}
.foot-cats a:hover { border-color: var(--accent-dim); color: var(--text); }
.foot-cats span { font-size: 11.5px; color: var(--text-faint); }

/* ============================================================
   분야 페이지의 소식 받기 상자
   ------------------------------------------------------------
   검색이나 광고로 이 페이지에 닿은 사람이 남길 수 있는 유일한 자리입니다.
   표 바로 뒤에 둡니다 — 찾던 것을 본 직후가 가장 마음이 열려 있고,
   맨 아래까지 내려가는 사람은 얼마 없습니다.
   ============================================================ */
.sb-lede {
  margin: 0 0 16px;
  font-size: 13.5px; line-height: 1.7; color: var(--text-dim);
  word-break: keep-all;
}
.sb-lede b { color: var(--text); font-weight: 700; }
.sb-form { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-form input {
  flex: 1 1 260px; min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); color: var(--text);
  font-family: inherit; font-size: 14px;
}
.sb-form input::placeholder { color: var(--text-faint); }
.sb-form input:focus { outline: none; border-color: var(--accent-dim); }
.sb-form button {
  flex: 0 0 auto;
  padding: 12px 26px;
  border: none; border-radius: 9px;
  background: var(--accent); color: #06222c;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.sb-form button:disabled { opacity: .55; cursor: default; }
.sb-note { margin: 10px 0 0; font-size: 13px; color: var(--text-faint); min-height: 1.2em; }
.sb-note.ok  { color: var(--accent); }
.sb-note.bad { color: var(--down); }

/* ============================================================
   두 장을 옆으로 넘겨 보는 틀
   ------------------------------------------------------------
   헤더 아래부터가 넘김 영역입니다. 가로 스크롤 스냅을 쓰므로 손가락으로
   미는 동작은 브라우저가 알아서 처리합니다 — 제스처를 직접 받지 않습니다.

   가로로 넘기는 칸은 세로로도 잘립니다(CSS 규칙상 한 축이 auto 면 다른
   축도 visible 이 될 수 없습니다). 그래서 지금 보고 있는 장의 높이를
   재서 틀에 넣어 줍니다 — app.js 의 syncPagerHeight().
   ============================================================ */
.pager-tabs {
  display: flex;
  gap: 6px;
  padding: 0 max(var(--gutter), calc((100% - var(--content-max)) / 2));
  /* 머리글 아래 선과 탭 사이, 탭과 아래 내용 사이를 같게 둡니다 */
  margin: 18px 0;
}
.ptab {
  flex: 1;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ptab:hover { color: var(--text); }
.ptab.on {
  background: var(--accent-glow);
  border-color: var(--accent-dim);
  color: var(--accent);
}

.pager {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* 각 장이 자기 높이만큼만 서게 합니다. 늘어나면 짧은 장의 실제 높이를
     잴 수 없어, 분야 장에 화면 몇 개 분량의 빈 공간이 남습니다. */
  align-items: start;
  scrollbar-width: none;
  transition: height .22s ease;
}
.pager::-webkit-scrollbar { display: none; }
.pane { scroll-snap-align: start; min-width: 0; }

/* --- 두 번째 장: 분야별로 보기 --- */
.cat-grid {
  /* 칸 안쪽 여백만큼 바깥으로 빼 둡니다.
     ------------------------------------------------------------
     칸의 테두리를 다른 요소와 같은 선에 맞추면, 정작 그 안의 글자는
     안쪽 여백만큼 오른쪽으로 밀려 로고·탭·아래 문구보다 혼자 들어가
     보입니다. 사람 눈은 테두리가 아니라 글자로 줄을 맞춥니다.
     그래서 테두리를 여백만큼 내보내고 글자를 선에 세웁니다. */
  --card-pad: 16px;
  --card-edge: calc(var(--card-pad) + 1px);   /* 안쪽 여백 + 테두리 */
  padding: 0 calc(max(var(--gutter), (100% - var(--content-max)) / 2) - var(--card-edge)) 40px;
}
.cat-grid ul {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.cat-grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px var(--card-pad);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  font-size: 14px; font-weight: 600;
  word-break: keep-all;
  transition: border-color .15s, background .15s;
}
.cat-grid a:hover { border-color: var(--accent-dim); background: var(--accent-glow); }
@media (max-width: 760px) {
  /* 좁은 화면에서는 한 줄에 하나씩. 분야 이름이 길어(개인 비서·일정·업무
     관리) 두 칸으로 나누면 줄바꿈이 지저분해집니다.
     칸은 화면 끝까지 내보내고, 안쪽 여백이 다른 글과 같은 선을 만듭니다. */
  /* 음수 여백은 안 먹으므로(16 - 17 = -1 → 0) 칸은 화면 끝에 붙이고
     안쪽 여백을 1px 줄여 글자를 16px 선에 세웁니다. */
  .cat-grid { padding: 0 0 36px; }
  .cat-grid a { padding-left: calc(var(--card-pad) - 1px); padding-right: calc(var(--card-pad) - 1px); }
  .cat-grid ul { grid-template-columns: 1fr; }
}
.cat-grid a span {
  flex: none;
  font-size: 12px; font-weight: 700;
  color: var(--accent);
}

/* --- 분야 상세 시트 --- */
.cat-sheet .panel-head { touch-action: auto; }
.cs-close {
  flex: none;
  width: 32px; height: 32px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text-dim);
  font-size: 14px; font-family: inherit; cursor: pointer;
}
.cs-close:hover { color: var(--text); border-color: var(--accent-dim); }
.cs-facts { list-style: none; margin: 16px 0 0; padding: 0; }
.cs-facts li {
  position: relative;
  padding: 0 0 0 14px;
  margin-bottom: 8px;
  font-size: 13.5px; color: var(--text-dim);
  line-height: 1.65; word-break: keep-all;
}
/* 점을 grid 칸으로 두면 줄 안의 <b> 가 저마다 칸이 되어 문장이 조각납니다.
   띄워 두고 글은 그냥 흐르게 합니다. */
.cs-facts li::before {
  content: "•";
  position: absolute; left: 0; top: 0;
  color: var(--accent-dim);
}
.cs-facts b { color: var(--text); font-weight: 700; }
.cs-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.cs-sub {
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface-2); color: var(--text-dim);
  padding: 6px 13px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.cs-sub:hover { color: var(--accent); border-color: var(--accent-dim); }
.cs-go {
  display: block; width: 100%;
  margin-top: 22px; padding: 14px;
  border: none; border-radius: 10px;
  background: var(--accent); color: #06222c;
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  cursor: pointer;
}
.cs-page {
  display: inline-block; margin-top: 14px;
  font-size: 13px; color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.cs-page:hover { color: var(--accent); border-color: var(--accent-dim); }

/* 검색어가 분야를 가리킬 때 뜨는 줄 */
.hint-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 12px max(var(--gutter), calc((100% - var(--content-max)) / 2));
  background: var(--accent-glow);
  border-bottom: 1px solid var(--border-soft);
}
/* display:flex 가 hidden 속성을 이겨서, 빈 줄이 띠처럼 남아 있었습니다 */
.hint-row[hidden] { display: none; }
.hint-lead { font-size: 13.5px; color: var(--text-dim); margin-right: 2px; }
.hint-chip {
  border: 1px solid var(--accent-dim); background: var(--surface-2);
  color: var(--accent); border-radius: 20px;
  padding: 6px 15px; font-size: 13.5px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: background .15s;
}
.hint-chip:hover { background: rgba(95,227,202,.16); }
@media (max-width: 700px) {
  .hint-row { padding-top: 10px; padding-bottom: 10px; gap: 6px; }
  .hint-lead { font-size: 12.5px; width: 100%; }
  .hint-chip { padding: 5px 12px; font-size: 12.5px; }
}