/* ============================================================
   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 {
  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); }

/* ------------------------------------------------------------
   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: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

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

.field label {
  font-size: 14px;
  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: 12px 13px;
  font-size: 15px;              /* iOS 자동 확대 방지: 16px 미만이면 확대됨 → 15px+appearance 조정 */
  font-family: inherit;
  outline: none;
  min-height: 46px;
  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: 12px 34px 12px 13px;
  font-size: 15px;
  font-family: inherit;
  min-height: 46px;
  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: 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; }

/* ------------------------------------------------------------
   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 배급사(우) 한 줄 --- */
.panel-head {
  padding: 28px 28px 18px;
  border-bottom: 2px solid var(--border);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
}
.phead-main {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex: 1; min-width: 0;
}
.phead-main .pname {
  font-size: 27px; font-weight: 700; letter-spacing: -0.3px;
  overflow-wrap: anywhere;
}
.phead-main .pvendor {
  font-size: 15px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0;
}

.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; }

/* --- Coming Soon 블록 --- */
.coming-wrap { text-align: center; padding: 8px 0 6px; }
.coming-title {
  font-size: 15px;
  color: var(--text-dim);
  margin: 0 0 18px;
}
.coming-rule {
  height: 1px;
  background: var(--border);
  margin: 0 0 18px;
}
.coming-soon {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-faint);
  margin: 0;
}

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

/* ------------------------------------------------------------
   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;
}
.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 .notice {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  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 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 {
    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;
  }

  /* --- 표를 컴팩트 목록으로 (카드형 대신) ---
     가격 문자열이 최대 46자까지 길어지므로, 가격과 강점 키워드가
     같은 열을 다투지 않도록 3줄로 분리했습니다.
       1줄: 에이전트명 ............... 가격
       2줄: 배급사 · 가동 · 한국어
       3줄: #강점키워드 ............. 접근하기
     ------------------------------------------------------- */
  .table-scroll { overflow-x: visible; padding: 12px 14px 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%;
    height: 52vh;
    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); }
  .panel.full { height: 90vh; }        /* 위로 밀어 확장한 상태 */

  /* 끌어내리기 손잡이 — 실제로 잡을 수 있도록 위아래 여백을 확보 */
  .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 { touch-action: auto; }
  .panel-head { padding: 16px 20px 14px; }
  .phead-main { flex-direction: column; align-items: flex-start; gap: 4px; }
  .phead-main .pname { font-size: 22px; }
  .panel-body { padding: 18px 20px 56px; }
  .pcontext { margin-bottom: 32px; }
  .coming-soon { font-size: 22px; }

  /* --- 모달 --- */
  .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); }
}