/* static/css/pages/browse.css — 둘러보기 화면(browse.html) 전용 스타일.
   검색 툴바·태그 필터·목록/상세 전환.

   이 페이지가 로드하는 층: tokens + shell + app + 이 파일.
   공유 컴포넌트를 여기에 넣지 말 것 — 두 페이지 이상이 쓰게 되는 순간 그 층으로 올린다. */

/* ---- 둘러보기 목록/상세 전용 스타일 ---- */
.browse-head{display:flex;align-items:baseline;gap:14px;margin:14px 0 26px;flex-wrap:wrap}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
/* .tabs/.tab 은 마이페이지와 공유하므로 app.css 로 옮겼다. */
.search{display:flex;align-items:center;gap:9px;background:var(--accentSoft);border:1px solid transparent;border-radius:999px;padding:0 16px;min-width:280px;transition:border-color .15s,background .15s,box-shadow .15s}
.search:focus-within{border-color:var(--accent);background:var(--bg);box-shadow:0 0 0 3px var(--accentSoft)}
.search input{flex:1;padding:11px 0;border:0;background:none;outline:none;font:400 14px/1 var(--font);color:var(--ink)}
@media(max-width:600px){.search{flex:1;min-width:0;width:100%}.search input{min-width:0}}
.chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chips-label{font:500 12px/1 var(--font);color:var(--muted);margin-right:2px;letter-spacing:.08em}
.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  font:500 12.5px/1 var(--font);color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.active{border-color:var(--ink);background:var(--ink);color:var(--accentInk)}
.more-wrap{display:flex;justify-content:center;margin-top:34px}
.more{padding:13px 28px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:500 14px/1 var(--font);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.more:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* 헤더는 단일 텍스트 컬럼이다(태그→제목→메타→요약). 예전엔 여기가 좌우 2열
   flex(space-between)이고 오른쪽에 링크 복사·새 창 버튼이 있었는데, 폭에 따라 버튼이
   ① 넓을 땐 태그 줄 높이의 우상단에 제목과 수백 px 떨어져 떠 있고 ② 좁아지면 요약
   아래 왼쪽으로 뚝 떨어지는 두 배치를 오갔다. 액션은 아래 뷰어 크롬(주소창)으로
   옮겨 폭과 무관하게 항상 같은 자리에 둔다. */
.view-head{margin-bottom:22px}
.view-meta{font:500 13px/1 var(--font);color:var(--muted);margin-top:12px}
/* 미리보기 창의 주소창 오른쪽에 붙는 액션(복사·새 창). 가짜 브라우저 크롬 안에 있어
   "이 링크"를 가리킨다는 게 자명하고, 완료 화면의 linkbox(URL+복사) 관용구와도 같다.
   좁아지면 크롬 바가 줄바꿈되어 액션이 URL 아래 한 줄로 내려간다(잘리지 않는다). */
.viewer-chrome.has-actions{flex-wrap:wrap;row-gap:10px}
.viewer-chrome.has-actions .url{min-width:180px}
.chrome-actions{display:flex;gap:8px;flex:none;margin-left:auto}
.cbtn{display:inline-flex;align-items:center;justify-content:center;padding:8px 15px;border-radius:999px;
  border:1px solid var(--softline);background:var(--bg);color:var(--ink);font:500 12.5px/1 var(--font);
  cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,opacity .15s}
.cbtn:hover{border-color:var(--ink)}
.cbtn-primary{background:var(--accent);border-color:var(--accent);color:var(--accentInk)}
.cbtn-primary:hover{opacity:.86;border-color:var(--accent)}
/* 본문 자동 발췌 요약(서버 SSR summary). 크롤러가 읽을 실제 텍스트를 사용자에게도
   보이게 노출하되(숨김 텍스트는 클로킹 위험) 화면에는 3줄까지만 클램프한다.
   예전엔 얇은 왼쪽 선 + 14px 회색 텍스트라 페이지에서 가장 흐린 요소인데도 폭만 넓어
   허전했다. 조용한 패널(--panel2)로 묶어 "본문에서 따온 인용"이라는 성격을 드러내고,
   왼쪽 강조 바는 inset box-shadow 로 넣는다 — ::before 를 쓰면 -webkit-box 의 자식이
   되어 클램프 계산에 끼어든다. 라운드 모서리를 따라가는 것도 inset 쪽이 자연스럽다.
   카드(패딩)와 클램프 대상은 반드시 **다른 요소**로 나눈다 — -webkit-line-clamp 는 3줄
   넘는 줄을 "그리지 않는" 게 아니라 콘텐츠 박스 높이로만 잘라서, 같은 요소에 세로 패딩이
   있으면 4번째 줄이 아래 패딩 영역에 그대로 비쳐 글자가 반쯤 잘린 채 보인다(예전엔 세로
   패딩이 없어 드러나지 않던 함정).
   폭 제한은 두지 않는다 — 헤더가 2열이던 시절엔 오른쪽 액션 컬럼이 폭을 잡아먹어
   max-width 가 드러나지 않았지만, 단일 컬럼이 된 지금은 이 카드만 좁아져 바로 아래
   뷰어 창(섹션 전폭)과 왼쪽만 맞고 오른쪽이 240px 넘게 어긋나 보인다. */
.view-summary{margin:22px 0 0;padding:16px 20px 16px 22px;border-radius:14px;
  background:var(--panel2);box-shadow:inset 3px 0 0 var(--lineStrong)}
.view-summary-t{margin:0;font:400 clamp(14.5px,1.1vw,16px)/1.75 var(--font);color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}