/* 사이트 총람 — 라넷 하우스 스타일(지침 화면.md 기본값). 상단 바·글꼴은 jnranet.com/site.css 가 덮는다. */
:root{
  --bg:#F6F7FB; --card:#FFFFFF; --line:#E6E8F0; --line2:#EEF0F6;
  --ink:#1B1F2E; --ink2:#4B5266; --mute:#8A92A8;
  --primary:#1565C0; --primary-bg:#e8f1fb;
  --r:14px;
  --shadow:0 1px 2px rgba(27,31,46,.04), 0 8px 24px -14px rgba(27,31,46,.22);
  color-scheme:only light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;word-break:keep-all}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* 머리: 제목 + 검색 */
.intro{padding:40px 0 24px}
.intro h1{margin:0 0 18px;font-size:30px;font-weight:800;letter-spacing:-.02em}
.search{display:flex;align-items:center;gap:10px;height:52px;padding:0 18px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);cursor:text}
.search:focus-within{border-color:var(--primary)}
.search svg{width:20px;height:20px;flex:none;color:var(--mute)}
.search input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);outline:none}
.search input::placeholder{color:var(--mute)}

/* 본문: 왼쪽 분야 + 오른쪽 카드 */
.layout{display:flex;gap:24px;align-items:flex-start;padding-bottom:20px}
.fields{position:sticky;top:88px;width:200px;flex:none;display:flex;flex-direction:column;gap:2px;padding:8px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.fields button{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:9px 12px;border:0;border-radius:9px;
  background:transparent;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink2);text-align:left;cursor:pointer;white-space:nowrap}
.fields button:hover{background:var(--line2);color:var(--ink)}
.fields button[aria-pressed="true"]{background:var(--primary-bg);color:var(--primary)}
.fields button i{font-style:normal;font-weight:600;font-size:13px;color:var(--mute)}
.fields button[aria-pressed="true"] i{color:var(--primary)}

.results{flex:1;min-width:0}
.group + .group{margin-top:34px}
.group h2{display:flex;align-items:baseline;gap:8px;margin:0 0 12px;font-size:18px;font-weight:800}
.group h2 i{font-style:normal;font-size:14px;font-weight:600;color:var(--mute)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.empty{padding:60px 20px;text-align:center;color:var(--ink2);background:var(--card);border:1px dashed var(--line);border-radius:var(--r)}

/* 사이트 카드: 첫 화면 캡처 + 아이콘·이름·설명 */
.site{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.site:hover{border-color:#cfd6e2;box-shadow:var(--shadow);transform:translateY(-2px)}
.shot{display:block;flex:none;width:100%;height:auto;min-height:0;aspect-ratio:16/10;object-fit:cover;object-position:top;background:var(--line2);border-bottom:1px solid var(--line2)}
.shot.none{display:grid;place-items:center;color:var(--mute);font-size:13px}
.body{display:flex;gap:10px;align-items:flex-start;padding:12px 14px 14px}
.icon{flex:none;width:24px;height:24px;margin-top:1px;border-radius:6px;object-fit:contain;background:#fff}
.icon.letter{display:grid;place-items:center;background:var(--line2);color:var(--ink2);font-size:12px;font-weight:800}
.name{font-weight:800;font-size:15px;line-height:1.35}
.desc{margin-top:3px;color:var(--ink2);font-size:13px;line-height:1.5;text-wrap:pretty}

/* 폰·좁은 화면: 분야를 위쪽 가로 칩 줄로 */
@media (max-width:820px){
  .wrap{padding:0 16px}
  .intro{padding:26px 0 16px}
  .intro h1{font-size:24px}
  .layout{flex-direction:column;gap:14px}
  .fields{position:sticky;top:72px;z-index:5;width:auto;max-width:100%;align-self:stretch;flex-direction:row;gap:6px;padding:8px;overflow-x:auto;
    scrollbar-width:none;border-radius:12px}
  .fields::-webkit-scrollbar{display:none}
  .fields button{width:auto;flex:none;padding:7px 12px;font-size:14px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
}
/* 폰: 한 줄에 카드 3장(사용자 지시 2026-10-23). 카드 폭이 100px 안팎이라
   아이콘은 빼고 이름·설명은 두 줄까지 */
@media (max-width:560px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .group + .group{margin-top:26px}
  .group h2{font-size:16px;margin-bottom:10px}
  .site{border-radius:10px}
  .site:hover{transform:none}
  .body{padding:7px 8px 9px}
  .body .icon{display:none}
  .name{font-size:12.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
  .desc{margin-top:2px;font-size:11px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media (max-width:480px){
  .fields{top:64px}
  .search{height:48px;padding:0 14px}
  .search input{font-size:15px}
}
/* 상단 메뉴: 이 페이지는 LINKS 가 하나 더 있어 폰에선 한 줄에 안 들어감 →
   폰에선 지금 페이지만 남기고 라넷 앱스·API INDEX 는 «⋯» 메뉴로(지침 화면.md 19: 숨기면 대체 경로를 같이).
   공통 site.css 가 나중에 불려 오므로 .top 을 붙여 우선순위를 올림 */
.top .menu a{white-space:nowrap}
.top .menu .xs a.phone-only{display:none}
@media (max-width:560px){
  .top .menu > a:not(.on){display:none}
  .top .menu.open .xs a.phone-only{display:flex}
}
@media (prefers-reduced-motion:reduce){.site{transition:none}.site:hover{transform:none}}