/* ============================================================
   16K — UI·UX 디자인 레퍼런스 (8K에서 복사)
   색 없는 회색(R=G=B) 바탕 + 검정 글자 + 주홍 하나. 바탕에 색 기운이 있으면 사례 스크린샷의 색이
   다르게 보이므로(동시 대비) 화면 틀은 무채색으로만 — Figma 캔버스와 같은 이유
   ============================================================ */
@font-face{font-family:'Geist';src:url('/fonts/Geist-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:block}
@font-face{font-family:'SUIT Variable';src:url('/fonts/SUIT-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:block}
@font-face{font-family:'Cascadia Mono';src:url('/fonts/CascadiaMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cascadia Mono';src:url('/fonts/CascadiaMono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Tokyo Night Day를 코어로 채도를 낮춘 중립 표면 — 읽는 영역이 가장 밝고, 목록·상단바가 한 단계씩 어둡다 */
  /* 떠 있는 유리(드래그 검색 메뉴·검색창 공용) — 아래 내용이 흐리게 비침 */
  /* 처음 값(틴트 .5→.18 · 블러 6px · 채도 190% · 밝기 1.06 — 뒤가 또렷해 글자가 묻힘)과
     첫 수정(.84→.74 · 24px · 140% · 1.0 — 뒤가 거의 안 보임)의 항목별 정확한 중간 */
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.67),rgba(255,255,255,.46));
  --glass-blur:blur(15px) saturate(165%) brightness(1.03);
  --glass-rim:rgba(255,255,255,.8);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(0,0,0,.07),inset 0 0 14px rgba(255,255,255,.35),
    0 10px 28px rgba(0,0,0,.16),0 2px 5px rgba(0,0,0,.1);
  --page:#f0f0f0; --sidebar:#f6f6f6; --editor:#fcfcfc; --raise:#ffffff; --inline:#e7e7e7;
  --border:#dedede; --hair:#e9e9e9;
  /* 상태 표면: 선택·hover는 색 없이 회색 한 단계(강조색은 틀이 아니라 링크·표시에만) */
  --hover:#e9e9e9; --active:#e2e2e2; --quote:#f6f6f6; --quote-edge:#cccccc;
  /* 글자 3단계 — 모든 바탕에서 4.5:1 이상 */
  --fg:#161616; --muted:#5c5c5c; --faint:#666666;
  /* 주홍 하나: 글자용(--ac, 모든 바탕 4.5:1 이상) · 점·표시용(--ac-mark, 신호색) */
  --ac:#c2410c; --ac-mark:#ff4d00; --ac-line:#c2410c40; --ac-ring:#e04500;
  --news:#5c5c5c; --worklog:#5c5c5c; --note:#161616; --danger:#b42318; --cyan:#5c5c5c;
  --code-bg:#161616; --code-fg:#e6e6e6;
  --r1:6px; --r2:9px; --r3:13px; --r4:18px;
  --ui:'Geist','SUIT Variable',-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --mono:'Cascadia Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-size:14px;color-scheme:light}
body{background:var(--page);color:var(--fg);font-family:var(--ui);font-size:14px;line-height:1.55;
  font-weight:450;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a{color:var(--ac);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
time{font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}
::selection{background:rgba(0,0,0,.13);color:var(--fg)}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--editor),0 0 0 4px var(--ac);border-radius:var(--r2)}
*{scrollbar-width:thin;scrollbar-color:#c6c6c6 transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:#c6c6c6;border:3px solid transparent;background-clip:padding-box;border-radius:9px}
*::-webkit-scrollbar-thumb:hover{background:#a8a8a8;background-clip:padding-box}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* Iconoir 아이콘(stroke) 살짝 굵게 — 로고 글리프는 제외 */
.top nav a svg,.top nav .nav-search svg,.back svg,.gate .eye svg,.banned svg,.detail-head svg{stroke-width:1.9}

/* ── 상단바 (44px) ───────────────────────────────────────── */
/* 상단바: 로고와 메뉴를 한 묶음으로 가운데 정렬 (목록 화면에선 오른쪽 영역 안에 들어감) */
.top{position:sticky;top:env(safe-area-inset-top,0);z-index:400;display:flex;align-items:center;justify-content:center;
  height:44px;padding:0 14px;background:var(--page)}
/* 페이지 전환 때 움직이는 건 로고+메뉴 묶음 하나뿐. 상단바 전체(목록 화면 904px ↔ 다른 화면 1280px)에 이름을 주면
   폭이 다른 두 스냅숏이 늘어나며 겹쳐(옛 것은 1.4배로 확대) "더 멀리 갔다 사라지는 잔상"이 생겼다 → 폭이 같은 묶음에만 이름을 주고,
   옛 스냅숏은 숨겨 한 장만 미끄러지게 한다 */
.top-in{view-transition-name:topbar;display:flex;align-items:center;gap:18px}
::view-transition-old(topbar){display:none}
::view-transition-new(topbar){animation:none}
::view-transition-group(topbar){animation-duration:.22s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
.brand{display:flex;align-items:center;gap:7px;color:#161616;font-weight:700;font-size:13px;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
/* 가운데 묶음에서 로고만 살짝 왼쪽으로(메뉴 위치는 그대로) */
.top .brand{transform:translateX(-12px)}
/* 로고: 골유리 너머 효과는 SVG 필터(render.ts ribLogo) */
.brand svg{height:16px;width:auto;display:block;overflow:visible;transform:rotate(3deg)}
.top nav{display:flex;align-items:center;gap:4px}
.top nav a{display:flex;align-items:center;gap:6px;height:31px;padding:0 11px;border-radius:var(--r2);
  color:var(--muted);font-size:12.5px;font-weight:500;transition:color .12s,background .12s}
.top nav a svg{width:15px;height:15px;opacity:.72}
.top nav a:hover{background:var(--hover);color:var(--fg);text-decoration:none}
.top nav a:hover svg{opacity:1}
.top nav a:active{background:var(--active)}
/* 선택된 메뉴도 hover와 같은 배경 → 클릭 후 페이지가 바뀌어도 배경이 끊기지 않음 */
.top nav a.nav-active{color:var(--fg);background:var(--active)}
.top nav a.nav-active svg{opacity:1}
/* 검색 버튼(다른 메뉴와 같은 모양) — 열려 있으면 선택 배경 */
.top nav .nav-search{display:flex;align-items:center;gap:6px;height:31px;padding:0 11px;border:0;border-radius:var(--r2);background:none;
  color:var(--muted);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:color .12s,background .12s}
.top nav .nav-search svg{width:15px;height:15px;opacity:.72}
.top nav .nav-search:hover{background:var(--hover);color:var(--fg)}
.top nav .nav-search:hover svg,.top nav .nav-search.open svg,.top nav .nav-search.nav-active svg{opacity:1}
.top nav .nav-search.open,.top nav .nav-search.nav-active{background:var(--active);color:var(--fg)}
/* 버튼 아래로 떨어지는 유리 검색창 */
.searchpop{position:fixed;top:50px;left:0;width:380px;max-width:calc(100vw - 16px);z-index:420;
  display:flex;align-items:center;gap:8px;height:46px;padding:0 6px 0 15px;border-radius:var(--r3);
  background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-rim);box-shadow:var(--glass-shadow);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top center;
  transition:opacity .14s ease,transform .22s cubic-bezier(.2,.9,.3,1.2)}
.searchpop.on{opacity:1;transform:none}
.searchpop[hidden]{display:none}
.searchpop>svg{width:16px;height:16px;flex:none;color:var(--muted);stroke-width:1.9}
.searchpop input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;color:var(--fg);font:inherit;font-size:14px}
.searchpop input::placeholder{color:var(--faint)}
.searchpop input:focus,.searchpop input:focus-visible{outline:none;box-shadow:none;border-radius:0}   /* 유리창 자체가 입력 중임을 보여줌 — 전역 포커스 링 제외 */
.searchpop input::-webkit-search-cancel-button{display:none}
.srch-x{display:none;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border:0;border-radius:var(--r2);background:none;color:var(--muted);cursor:pointer}
.srch-x:hover{background:rgba(0,0,0,.06);color:var(--fg)}
.srch-x svg{width:17px;height:17px}
/* 모바일: 아이콘만, 검색창은 좌우 꽉 채워 상단바 바로 아래로 */
@media (max-width:600px){
  .top{padding:0 10px}
  .top-in{gap:12px}
  .brand span{display:none}
  .top nav a,.top nav .nav-search{padding:0 8px}
  .top nav a span,.top nav .nav-search span{display:none}
  .searchpop{width:auto;max-width:none;height:52px;padding:0 6px 0 16px;border-radius:var(--r4);transform-origin:top center}
  .searchpop input{font-size:16px}   /* iOS: 16px 미만이면 입력 시 화면이 확대됨 */
  .srch-x{display:flex}
}

/* ── 스플릿 ───────────────────────────────────────────────── */
body.app-body{overflow:hidden;height:100dvh}
/* 구분선 없이: 본문은 상단바와 같은 바탕, 목록은 그 위에 떠 있는 유리판 */
/* 화면을 위아래가 아니라 좌우로 나눈다: 왼쪽 목록(위에서 아래까지) | 오른쪽(상단바 + 본문) */
.split{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:44px minmax(0,1fr);height:100dvh;
  padding:env(safe-area-inset-top,0) 0 0}
.split>.top{grid-column:2;grid-row:1;position:relative;top:auto;background:transparent}   /* 바탕이 같으니 칠하지 않음 — 목록 유리판 그림자가 상단바 높이에서 잘리지 않게 */
.split>.list-pane{grid-column:1;grid-row:1 / 3;margin:12px 0 12px 12px}
.split>.detail{grid-column:2;grid-row:2}
/* 유리판(.list-pane) = 고정 머리(.list-tools / .list-head) + 스크롤 목록(.list). 내용은 유리판 아래 끝까지 흐르고,
   스크롤바 트랙만 아래로 띄워 둥근 모서리에 닿지 않게 */
.list-pane{width:364px;flex:none;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r4);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(0,0,0,.05),0 10px 32px rgba(0,0,0,.08)}
.list{flex:1;min-height:0;overflow-y:auto;padding:0 8px 12px}
/* 트랙 여백은 ::-webkit-scrollbar로만 가능 — 표준 scrollbar-width/color가 걸려 있으면 크롬이 이를 무시하므로 auto로 풀어 둔다 */
.list{scrollbar-width:auto;scrollbar-color:auto}
.list::-webkit-scrollbar{width:11px}
.list::-webkit-scrollbar-track{background:transparent;margin:2px 0 52px}   /* 아래 52 = 위쪽(고정 머리 50 + 2)과 같게 */
.list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.09);border:3px solid transparent;background-clip:padding-box;border-radius:9px}
/* 평소엔 옅게, 목록 위에 마우스가 있을 때만 또렷하게 */
.list:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);background-clip:padding-box}
/* ::-webkit-scrollbar 미지원(파이어폭스): 트랙 여백 없이 표준 속성으로 */
@supports not selector(::-webkit-scrollbar){
  .list{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.09) transparent}
  .list:hover{scrollbar-color:rgba(0,0,0,.18) transparent}
}
.detail{flex:1;min-width:0;overflow-y:auto;background:var(--page);overflow-anchor:none}  /* 위치 보정은 JS가 직접(브라우저 자동 보정과 이중 적용 방지) */
/* 포커스 무한 스크롤 피드 */
/* 위 여백: 첫 글 제목이 클릭 이동 위치(보이는 영역 22%)와 같은 곳에. 아래 여백: 끝맺음 정도만 */
.feed{padding-top:max(16px, calc((100dvh - 44px) * 0.22 - 56px));padding-bottom:20vh}
/* 글 사이 구분선 없음 — 카테고리 카드·제목·간격으로 구분 */
.feed-item{max-width:730px;margin:0 auto;padding:56px 40px;opacity:1;transition:opacity .4s ease}
.feed.focus-mode .feed-item{opacity:.4}
.feed.focus-mode .feed-item.focused{opacity:1}
.feed.focus-mode .feed-item:not(.focused){cursor:pointer}
/* 흐린 글 내부의 링크·버튼은 반응하지 않게(hover 없음) — 클릭은 글 전체가 받아 포커스로 */
.feed.focus-mode .feed-item:not(.focused)>*{pointer-events:none}
.feed.focus-mode .feed-item:not(.focused):hover{opacity:.6}
.feed-item .note-title{margin-top:0}
.feed-load,.feed-empty{max-width:730px;margin:0 auto;padding:46px 40px;text-align:center;color:var(--faint);font-size:12.5px}

/* 섹션 헤더 */
.list-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:18px 18px 8px;
  font-size:12px;font-weight:600;color:var(--muted)}
.list-head span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-head b{flex:none;color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums}
/* 목록 맨 위 분류 선택: 배경·테두리 없는 텍스트형(검색창 알약과 구분). hover 때만 메뉴와 같은 연한 배경 */
.list-tools{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 10px 6px}
/* 종류 탭: 상단 메뉴와 같은 회색 알약, 개수는 옅게 */
.kindtabs{display:flex;gap:2px;flex:none}
.kt{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 8px;border-radius:var(--r2);font-size:12.5px;color:var(--muted);white-space:nowrap}
.kt b{font-weight:500;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.kt:hover{background:var(--hover);color:var(--fg);text-decoration:none}
.kt.on{background:var(--active);color:var(--fg);font-weight:600}
.catsel{position:relative;display:inline-flex;align-items:center;height:30px;border-radius:var(--r2);color:var(--muted);
  transition:background .12s,color .12s}
.catsel:hover{background:var(--hover);color:var(--fg)}
/* 포커스: 선(링) 없이 배경만 한 단계 — 링이 두 겹으로 겹치고 잘려 보이던 문제 제거 */
.catsel:focus-within{background:var(--active)}
.catsel select:focus,.catsel select:focus-visible{outline:none;box-shadow:none}
.catsel svg{position:absolute;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke-width:1.9;pointer-events:none}
.catsel svg:first-child{left:9px}
.catsel svg:last-child{right:8px}
.catsel select{appearance:none;-webkit-appearance:none;field-sizing:content;height:100%;padding:0 29px 0 31px;
  background:none;border:none;border-radius:var(--r2);outline:none;font:inherit;font-size:13px;font-weight:600;color:var(--fg);cursor:pointer}

/* 목록 행 — 선택 표시는 '왼쪽 액센트 보더' 하나로 통일 */
.row{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;margin-bottom:2px;
  border-radius:var(--r2);color:var(--fg);transition:background .12s}
.row:hover{background:var(--hover);text-decoration:none}
.row:active{background:var(--active)}
.row.active{background:var(--active)}
.row-k{flex:none;width:6px;height:6px;border-radius:50%;margin-top:5px;background:var(--news)}
.row-k.worklog{background:var(--worklog)} .row-k.note{background:var(--note)}
.row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.row-title{font-size:13px;font-weight:500;line-height:1.4;color:var(--fg);word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row.hi .row-title{font-weight:640}
.row-sub{display:flex;align-items:center;gap:7px;min-width:0;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.row-cat{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.row-date{margin-left:auto;flex:none;color:var(--faint)}
/* 제목 줄: 제목 + 안 읽음 점(점은 제목 줄에서만 자리를 차지 — 아래 분류·날짜 줄은 그대로) */
.row-head{display:flex;align-items:flex-start;gap:8px;min-width:0}
.row-head .row-title{flex:1;min-width:0}
.row-flag{flex:none;width:6px;height:6px;border-radius:50%;background:var(--ac-mark);margin-top:6px}

/* ── 본문 (디테일) ───────────────────────────────────────── */
.detail-body{max-width:730px;margin:0 auto;padding:38px 40px 100px}
.note-title{font-size:23px;font-weight:720;letter-spacing:-.02em;line-height:1.26;text-wrap:balance;margin:0 0 6px;color:var(--fg)}
.note-orig{color:var(--faint);font-size:13px;margin:0 0 14px}
/* 메타: 배경 없는 한 줄, 같은 크기·베이스라인, 가운뎃점 구분 */
.note-meta{display:flex;align-items:baseline;flex-wrap:wrap;font-size:12.5px;color:var(--muted);line-height:1.9;
  margin-bottom:22px}
.note-meta>*:not(:last-child)::after{content:"·";margin:0 9px;color:var(--faint)}
.note-meta time{color:var(--faint);font-variant-numeric:tabular-nums}
.note-meta .m-id{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.note-meta .m-cat{color:var(--muted);font-weight:500}
.note-meta .m-src{color:var(--ac);font-weight:500}
.note-meta .m-cat:hover,.note-meta .m-src:hover{text-decoration:underline}
/* 출처 = 원문 링크: 이름 옆 외부 링크 아이콘 */
.note-meta .m-src{display:inline-flex;align-items:center;gap:3px}
.note-meta .m-src svg{width:12px;height:12px;stroke-width:2;flex:none;transform:translateY(-.5px)}

.kind{font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:var(--r1)}
.kind.news{color:var(--news);background:#33635c14}
.kind.worklog{color:var(--worklog);background:#8f5e1518}
.kind.note{color:var(--note);background:#006c8614}
.sid{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--inline);padding:0 5px;border-radius:var(--r1);line-height:1.6}
.cat-tag{font-size:12px;color:var(--fg);background:var(--raise);border:1px solid var(--border);padding:1px 8px;border-radius:var(--r1);font-weight:500}
a.cat-tag:hover{background:var(--hover);text-decoration:none}
.chip{font-size:12px;color:var(--muted);background:var(--raise);border:1px solid var(--hair);padding:2px 9px;border-radius:999px}
a.chip:hover{color:var(--fg);border-color:var(--border);text-decoration:none}

/* 읽기 본문 */
.prose{font-size:15px;line-height:1.78;color:var(--fg)}
.prose>:first-child{margin-top:0}
.prose p{margin:15px 0}
.prose h2{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:28px 0 11px;padding-bottom:6px;border-bottom:1px solid var(--hair)}
.prose h3{font-size:15.5px;font-weight:650;margin:20px 0 8px}
.prose ul,.prose ol{padding-left:20px;margin:12px 0}
.prose li{margin:5px 0}
.prose li::marker{color:var(--faint)}
.prose strong{font-weight:650;color:#0d0d0d}
.prose a{border-bottom:1px solid var(--ac-line)}
.prose a:hover{border-bottom-color:var(--ac);text-decoration:none}
.prose code{font-family:var(--mono);font-size:.84em;background:var(--inline);padding:1.5px 5px;border-radius:var(--r1)}
.prose pre{background:var(--code-bg);color:var(--code-fg);border-radius:var(--r3);padding:16px 18px;margin:16px 0;
  overflow-x:auto;font-size:12.5px;line-height:1.65;tab-size:2}
.prose pre code{background:none;padding:0;font-size:1em;color:inherit}
.prose blockquote{margin:16px 0;padding:8px 16px;border-left:2px solid var(--quote-edge);background:var(--quote);
  color:var(--muted);border-radius:0 var(--r2) var(--r2) 0}
.prose blockquote p{margin:5px 0}
/* 뉴스 본문: 핵심 한 줄(조금 크게) → 핵심 내용 목록 → 왜 중요한가 */
.prose.k-news>p:first-child{font-size:16px;font-weight:560;line-height:1.62;color:var(--fg);margin:0 0 12px}
.prose.k-news ul{margin:10px 0 16px;padding-left:20px}
.prose.k-news li{margin:7px 0;padding-left:2px}
.prose.k-news blockquote{margin:16px 0 4px;color:var(--fg)}
.prose hr{border:none;border-top:1px solid var(--hair);margin:24px 0}
.prose img{max-width:100%;border-radius:var(--r2);border:1px solid var(--hair)}
.prose table{border-collapse:collapse;margin:16px 0;font-size:13px;display:block;overflow-x:auto}
.prose th{text-align:left;font-weight:650;padding:8px 12px;border-bottom:2px solid var(--border);white-space:nowrap}
.prose td{padding:6px 12px;border-bottom:1px solid var(--hair)}
.prose tbody tr:last-child td{border-bottom:none}

/* 위키링크 */
.wl{color:var(--ac);border-bottom:1px solid var(--ac-line);font-weight:500}
.wl:hover{border-bottom-color:var(--ac);text-decoration:none}
.wl-missing{color:var(--muted);border-bottom:1px dashed var(--faint);font-weight:400}
.wl-missing:hover{color:var(--danger);border-bottom-color:var(--danger)}

/* 태그/패널 */
.note-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.panel{margin-top:22px;padding:11px 14px 10px;background:var(--raise);border:1px solid var(--hair);border-radius:var(--r3)}
.panel+.panel{margin-top:8px}   /* 참조 글·빈 연결 칸은 한 묶음처럼 붙여서 */
.panel h4{margin:0 0 4px;font-size:12px;color:var(--muted);font-weight:700}
.linklist{display:flex;flex-direction:column;gap:1px}
.linkrow{display:flex;align-items:center;gap:9px;padding:6px 8px;margin:0 -8px;border-radius:var(--r2);color:var(--fg);font-size:13px;transition:background .12s}
.linkrow:hover{background:var(--hover);text-decoration:none}
.linkrow .row-k{margin-top:0}
.linkrow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 아직 비어 있는 연결: 감싸는 카드 없이 글자만 — 올리면 진해지고 밑줄(누를 수 있음) */
.unres{display:flex;flex-wrap:wrap;gap:2px 16px;padding:4px 0 2px}
.unres a{font-size:13px;line-height:1.7;color:var(--muted);text-decoration:none;transition:color .12s}
.unres a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* 빈 상태 */
.detail-empty{min-height:66vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--faint);text-align:center}
.detail-empty .logo{width:52px;height:52px;opacity:.4}
.detail-empty .logo svg{transform:rotate(3deg)}   /* 로고는 시계방향 3도 기울여서 */
.detail-empty p{font-size:12.5px;margin:0}
.empty{color:var(--muted);text-align:center;padding:48px 14px;font-size:12.5px}

/* 디테일 헤더 + 뒤로(모바일) */
.detail-head{display:none}
.back{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;background:var(--raise);
  border:1px solid var(--border);border-radius:var(--r2);color:var(--fg);font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.back:hover{border-color:var(--border);color:var(--fg)}
.back:active{background:var(--hover)}
.back svg{width:15px;height:15px}

/* ── 스크롤 일반 페이지(브라우즈/그래프) ─────────────────── */
.wrap{max-width:860px;margin:0 auto;padding-block:24px 72px;
  padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.wrap-wide{max-width:1220px}
.page-title{font-size:20px;font-weight:720;letter-spacing:-.02em;margin:2px 0 16px}
.sub{color:var(--muted);font-size:12.5px}
.sec{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.sec h2{margin:0;font-size:12px;font-weight:700;color:var(--muted)}
.sec .line{flex:1;height:1px;background:var(--hair)}
.footer{color:var(--faint);font-size:11px;text-align:center;margin-top:40px}

/* 그래프: 상단바 아래 전체가 캔버스, 조작판·카드·확대 버튼은 떠 있는 유리(--glass-* 공용) */
.legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:6px 0 14px;font-size:12.5px;color:var(--muted)}
.legend b{color:var(--fg);font-weight:600}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
body.graph-page{overflow:hidden;height:100dvh}
body.graph-page .footer{display:none}
/* 그래프 판은 상단바 아래에서 시작하지만 잘라내지 않는다(그림은 svg가 스스로 잘라냄) — 위에 붙은 카드·읽기 판의 그림자가
   상단바 높이로 번져 올라가도록. 상단바도 여기선 칠하지 않음(바탕이 같은 색이라 차이 없음) */
body.graph-page .top{background:transparent}
.gx{position:fixed;left:0;right:0;bottom:0;top:calc(44px + env(safe-area-inset-top,0px));
  background:var(--page) radial-gradient(circle,#d6d6d6 1px,transparent 1.3px) 0 0/26px 26px}
#gsvg{display:block;width:100%;height:100%;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;opacity:0;transition:opacity .3s}
.gx.ready #gsvg{opacity:1}
#gsvg{position:relative;z-index:1}
.gx::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 55% 50%,transparent 40%,var(--page) 100%)}
.gx.dragging #gsvg{cursor:grabbing}
/* 선: 살짝 휜 곡선, 확대해도 굵기 그대로. 아직 없는 글로 가는 선은 더 옅게 */
/* 선: 먹색 실선 한 가닥(확대해도 1px). 길이에 따라 옅어짐(stroke-opacity, graph.js) */
#gsvg .edge{fill:none;stroke:#161616;stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.2;transition:opacity .25s}
#gsvg .edge.ghost{stroke-dasharray:1 3.5;opacity:.3}
#gsvg .edge.hl{opacity:.7;stroke-width:1.3;stroke-dasharray:none}
#gsvg .flow{display:none;fill:none;stroke:#161616;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:0 14;vector-effect:non-scaling-stroke;pointer-events:none}
#gsvg .flow.on{display:inline;animation:gflow 1.4s linear infinite}
#gsvg .flow.rev{animation-direction:reverse}
@keyframes gflow{to{stroke-dashoffset:-14}}
#gsvg .node{cursor:pointer;transition:opacity .25s}
#gsvg .node circle{transform-box:fill-box;transform-origin:center;vector-effect:non-scaling-stroke}
#gsvg .dot{stroke:var(--page);stroke-width:1.5;transition:transform .25s cubic-bezier(.2,.9,.3,1.2)}
#gsvg .node:hover .dot,#gsvg .node.sel .dot{transform:scale(1.18)}
#gsvg .halo,#gsvg .halo2{fill:none;stroke:currentColor;stroke-width:.9;transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.3,1.2)}
#gsvg .halo{opacity:.22}
#gsvg .halo2{opacity:.1}
#gsvg .node:hover .halo,#gsvg .node.sel .halo{opacity:.5;transform:scale(1.12)}
#gsvg .node.ghost .halo,#gsvg .node.ghost .halo2{display:none}
#gsvg .node.ghost .dot{fill:var(--page);stroke:#929292;stroke-width:1.1}
#gsvg .ring{fill:none;stroke:none}
#gsvg .node.match .ring{stroke:#161616;stroke-width:1;stroke-dasharray:2 2.5;opacity:.6}
#gsvg .node.sel .ring{stroke:#161616;stroke-width:1.2}
/* 고를 때 한 번 퍼지는 물결 */
#gsvg .node.ping .ring{animation:gping .6s cubic-bezier(.2,.7,.3,1)}
@keyframes gping{from{transform:scale(.4);opacity:0}40%{opacity:1}to{transform:scale(1);opacity:1}}
/* 첫 등장 */
#gsvg .node.enter circle{animation:gpop .6s cubic-bezier(.2,.9,.3,1.25) backwards;animation-delay:var(--d)}
#gsvg .node.enter text{animation:gfade .5s ease backwards;animation-delay:calc(var(--d) + 180ms)}
#gsvg .edge.enter{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:gdraw .7s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--d)}
/* 점선(아직 없는 글로 가는 선)은 긋지 않고 점선 그대로 서서히 나타난다 — 끝에서 실선→점선으로 바뀌지 않게 */
#gsvg .edge.ghost.enter{stroke-dasharray:1 3.5;stroke-dashoffset:0;animation:gfadeE .6s ease backwards;animation-delay:var(--d)}
@keyframes gfadeE{from{opacity:0}}
@keyframes gpop{from{transform:scale(0)}}
@keyframes gfade{from{opacity:0}}
@keyframes gdraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){#gsvg .node.enter circle,#gsvg .node.enter text,#gsvg .edge.enter,#gsvg .flow.on,#gsvg .node.ping .ring{animation:none}#gsvg .edge.enter{stroke-dasharray:none}}
#gsvg text{text-anchor:middle;fill:#161616;font-family:var(--ui);font-weight:560;letter-spacing:-.015em;pointer-events:none;opacity:.86;
  paint-order:stroke;stroke:var(--page);stroke-width:var(--tsw,3.5px);stroke-linejoin:round;transition:opacity .25s}
#gsvg .node.ghost text{font-family:'Cascadia Mono','SUIT Variable',var(--ui);font-size:.84em;font-weight:400;letter-spacing:0;fill:var(--muted);opacity:.9}
#gsvg .node.hl text,#gsvg .node.sel text{opacity:1}
#gsvg.far .node:not(.hl):not(.sel):not(.match) text{opacity:0}
#gsvg.dim .node:not(.hl){opacity:.16}
#gsvg.dim .edge:not(.hl){opacity:.07}
#gsvg.searching .node:not(.match){opacity:.22}
#gsvg.searching .edge{opacity:.1}
/* 떠 있는 판 공통 규칙: 판 안쪽 여백 8 · 조작 단위 높이 32 · 조작 모서리 9(var(--r2)) · 판 모서리 = 9 + 8 = 17(동심) ·
   글자 시작선은 판 끝에서 16(줄 안쪽 여백 8 + 판 여백 8) */
.gpanel,.gzoom,.gcard{position:absolute;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-rim);box-shadow:var(--glass-shadow);padding:8px;border-radius:17px;z-index:2}
.gpanel{left:16px;top:16px;width:288px;display:flex;flex-direction:column;gap:4px}
.gcard{right:16px;top:16px;width:320px;max-height:calc(100% - 32px);overflow:auto;display:flex;flex-direction:column}
.gcard[hidden]{display:none}
.gzoom{right:16px;bottom:16px;display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:13px}
/* 조작 단위 */
.g-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:var(--r2);background:none;color:var(--muted);cursor:pointer}
.g-icon:hover{background:rgba(0,0,0,.06);color:var(--fg)}
.g-icon svg{width:17px;height:17px;stroke-width:1.9}
.g-search{display:flex;gap:4px}
.g-search label{position:relative;flex:1;display:block}
.g-search label svg{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke-width:1.9;color:var(--muted);pointer-events:none}
.g-search input{display:block;width:100%;height:32px;padding:0 8px 0 33px;border:0;border-radius:var(--r2);background:rgba(0,0,0,.05);
  font:inherit;font-size:13px;color:var(--fg);outline:none}
.g-search input::placeholder{color:var(--faint)}
.g-search input:focus,.g-search input:focus-visible{background:rgba(0,0,0,.07);outline:none;box-shadow:none}
.g-search input::-webkit-search-cancel-button{display:none}
.g-filter{display:none}
.g-filter[aria-pressed=true]{background:rgba(0,0,0,.08);color:var(--fg)}
.g-list{display:flex;flex-direction:column}
.g-row{display:flex;align-items:center;gap:10px;width:100%;height:32px;padding:0 8px;border:0;border-radius:var(--r2);background:none;
  font:inherit;font-size:13px;color:var(--fg);text-align:left;cursor:pointer}
.g-row:hover{background:rgba(0,0,0,.05);text-decoration:none}
.g-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-n{font-weight:500;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.g-check{display:grid;place-items:center;width:16px;color:var(--fg)}
.g-check svg{width:15px;height:15px;stroke-width:2}
.g-row[aria-pressed=false]{color:var(--faint)}
.g-row[aria-pressed=false] .g-check{visibility:hidden}
.g-row[aria-pressed=false] .sym{background:none!important;box-shadow:inset 0 0 0 1.3px #a6a6a6}
.sym{flex:none;width:8px;height:8px;border-radius:50%}
.sym.ghost{background:none;box-shadow:inset 0 0 0 1.3px #a6a6a6}
.gzoom button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--r2);background:none;color:var(--muted);cursor:pointer}
.gzoom button:hover{background:rgba(0,0,0,.06);color:var(--fg)}
.gzoom svg{width:17px;height:17px;stroke-width:1.9}
/* 카드 */
.g-head{display:flex;align-items:center;gap:8px;height:32px}
.g-meta{flex:1;display:flex;align-items:center;gap:8px;min-width:0;padding-left:8px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden}
.sep{margin:0 -3px;color:var(--faint)}
.g-body{padding:2px 8px 12px}
.gc-title{margin:0;font-size:15px;line-height:1.45;font-weight:650;letter-spacing:-.01em}
.gc-title a{color:var(--fg)}
.gc-ex{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gc-stat{display:flex;gap:8px;margin:8px 0 0;font-size:12px;color:var(--muted)}
.gcard .g-list{margin:-4px 0 8px}
.g-acts{display:flex;gap:4px}
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:32px;padding:0 12px;border-radius:var(--r2);
  background:rgba(0,0,0,.05);font-size:13px;font-weight:550;color:var(--fg)}
.g-btn:hover{text-decoration:none;background:rgba(0,0,0,.09)}
.g-btn.primary{background:#161616;color:#fff}
.g-btn.primary:hover{background:#2a2a2a}
.g-btn svg{width:16px;height:16px;stroke-width:1.9}
.g-acts > .g-btn:only-child{flex:1}
.g-seg{flex:1;display:flex;height:32px;padding:2px;border-radius:var(--r2);background:rgba(0,0,0,.05)}
.g-seg button{flex:1;height:28px;padding:0;border:0;border-radius:7px;background:none;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer}
.g-seg button:hover{color:var(--fg)}
.g-seg button.on{background:#fff;color:var(--fg);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.gempty{display:none;z-index:2;position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);max-width:420px;text-align:center;color:var(--muted);font-size:13.5px}
.gx.empty .gempty{display:block}
.gx.empty .gpanel,.gx.empty .gzoom{display:none}
/* 그래프 안 읽기 화면: 긴 글은 유리가 아니라 불투명한 종이 위에서 읽는다 */
.greader{position:absolute;z-index:3;right:16px;top:16px;bottom:16px;width:min(620px,52%);display:flex;flex-direction:column;overflow:hidden;
  background:var(--editor);border-radius:17px;box-shadow:0 18px 50px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.07)}
.greader[hidden]{display:none}
.gr-head{flex:none;display:flex;align-items:center;gap:4px;padding:8px}
.gr-title{flex:1;min-width:0;padding:0 4px;font-size:13px;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 28px 48px}
.gx.reading .gcard{display:none}
/* 작은 화면(세로 폰 · 가로 폰): 조작판과 결과 카드가 아래쪽 한 자리를 번갈아 쓴다(위는 상단바 검색창이 내려오는 자리).
   검색칸은 엄지 쪽 맨 아래, 거르기 목록은 그 위로 펼쳐진다. 카드는 제목 한 줄 + 범위 버튼만 */
@media (max-width:600px),(max-height:520px){
  .gpanel{left:8px;right:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;flex-direction:column-reverse}
  .g-filter{display:grid}
  .gpanel:not(.open) #grows{display:none}
  .gx.has-sel .gpanel{display:none}
  .gcard{left:8px;right:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;max-height:calc(100% - 16px)}
  .gcard .g-head{position:absolute;right:8px;top:8px}
  .gcard .g-meta{display:none}
  .gcard .g-body{padding:6px 40px 8px 8px}
  .gcard .gc-title{font-size:14px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gcard .gc-ex,.gcard .gc-stat{display:none}
  .gzoom{display:none}
  /* 화면 모서리(대략 반지름 38~55px)에서 8px 안쪽에 떠 있으니 판 모서리도 둥글게(28) — 화면 곡선과 나란하게.
     안쪽 조작은 높이 32의 알약(16), 판 여백 12 → 16 + 12 = 28로 판 곡선과 정확히 동심 */
  .gpanel,.gcard{border-radius:28px;padding:12px;transition:border-radius .3s cubic-bezier(.2,.8,.2,1),padding .3s cubic-bezier(.2,.8,.2,1)}
  .g-search input,.g-row,.g-btn,.g-icon,.g-seg{border-radius:16px;transition:border-radius .3s cubic-bezier(.2,.8,.2,1),background .15s}
  .g-seg button{border-radius:14px}
  /* 찾기 칸을 눌러 키보드가 올라오면 판이 화면 모서리에서 떨어져 화면 가운데쯤 뜨므로, 데스크톱과 같은 덜 둥근 모양(17 · 조작 9 · 여백 8)으로 */
  .gpanel:has(#gq:focus){border-radius:17px;padding:8px}
  .gpanel:has(#gq:focus) :is(.g-search input,.g-row,.g-icon){border-radius:var(--r2)}
  .g-search label svg{left:10px}
  .g-search input{padding-left:35px}
  .gcard .g-head{right:12px;top:12px}
  .gcard .g-body{padding:6px 40px 8px 10px}
  .greader{inset:0;width:auto;border-radius:0;box-shadow:none;background:var(--page)}
  .gr-body{padding:0 16px 40px}
}
/* 가로 폰: 아래쪽 자리를 화면 폭 전체가 아니라 왼쪽 아래 작은 판으로(세로 공간은 그대로 그래프에) */
@media (max-height:520px) and (min-width:601px){
  .gpanel,.gcard{right:auto;width:340px}
}

/* ── 게이트 ───────────────────────────────────────────────── */
.gate{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:24px}
.gate form{width:min(340px,86vw)}
.gate .field{position:relative}
/* 입장 문구 입력창 — 검색창·드래그 메뉴와 같은 유리(--glass-*). 포커스는 파란 링 대신 옅은 흰 테두리 빛 */
.gate input{width:100%;text-align:center;color:var(--fg);border-radius:var(--r3);padding:13px 44px;font-size:14px;font-family:inherit;
  letter-spacing:.02em;outline:none;caret-color:var(--ac);
  background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-rim);box-shadow:var(--glass-shadow);transition:box-shadow .14s}
.gate input:focus,.gate input:focus-visible{outline:none;box-shadow:var(--glass-shadow),0 0 0 4px rgba(255,255,255,.5)}
.gate .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;background:none;border:none;cursor:pointer;color:var(--faint);padding:6px;border-radius:var(--r2)}
.gate .eye:hover{color:var(--fg);background:rgba(0,0,0,.06)}
.gate .eye svg{width:18px;height:18px}
.gate .hint{min-height:17px;font-size:12px;color:var(--faint)}
.gate .err{color:var(--danger);font-weight:500}

/* ── 차단 ─────────────────────────────────────────────────── */
.banned{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.banned svg{width:48px;height:48px;color:var(--danger)}
.banned h1{margin:0;font-size:18px;font-weight:700}
.banned p{color:var(--muted);max-width:380px;font-size:13px}

/* ── 좁은 화면: 본문이 화면을 덮음 ───────────────────────── */
@media (max-width:860px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split>.top{grid-column:1;background:var(--page)}   /* 본문 패널이 덮을 때 그 그림자가 상단바에 비치지 않게(상단바가 패널보다 위) */
  .split>.list-pane{grid-column:1;grid-row:2;margin:0}
  .list-pane{width:100%;padding:0;border:0;border-radius:0;background:var(--page);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .list{padding:0 8px 44px}
  .list::-webkit-scrollbar-track{margin:0}
  .list-tools{padding-top:8px}
  .detail{position:fixed;left:0;right:0;bottom:0;top:calc(44px + env(safe-area-inset-top,0px));z-index:300;
    background:var(--page);transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s}
  .detail.open{transform:none;box-shadow:-10px 0 30px rgba(30,32,40,.14)}
  .feed-item{padding:22px 18px 30px;max-width:none}
}

/* ── 모바일 가로모드: 세로 공간이 귀하니 상단바를 숨긴다 ───── */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .top{display:none}
  .split{grid-template-rows:0 minmax(0,1fr)}
  .detail{top:env(safe-area-inset-top,0px)}
  .gx{top:env(safe-area-inset-top,0px)}   /* 상단바가 빠진 만큼 그래프도 위로 */
}

/* ── 로고 조정(/settings/logo) ───────────────────────────── */
.tuner{display:grid;grid-template-columns:1fr minmax(260px,300px);gap:18px;align-items:start}
.tn-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.tn-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tn-tools .tn-seg{width:150px}
.tn-hint{font-size:12px;color:var(--faint);margin-right:auto}
.tn-stage-svg{display:block;width:100%;height:auto;max-height:62vh;background:var(--raise);border:1px solid var(--hair);border-radius:var(--r3);touch-action:none;cursor:crosshair;user-select:none}
.tn-hit{fill:transparent}
.mk{cursor:grab}
.mk .ring{fill:rgba(26,27,38,.04);stroke:#161616;stroke-opacity:.35;stroke-width:1;vector-effect:non-scaling-stroke}
.mk.in .ring{stroke-dasharray:4 3}
.mk .dot{fill:#fff;stroke:#161616;stroke-width:1.5;vector-effect:non-scaling-stroke}
.mk.sel .ring{stroke:var(--ac);stroke-opacity:.9;fill:rgba(51,96,158,.06)}
.mk.sel .dot{stroke:var(--ac)}
.tn-panel{display:flex;flex-direction:column;gap:14px;padding:16px;background:var(--raise);border:1px solid var(--hair);border-radius:var(--r3);position:sticky;top:60px}
.tn-group{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--hair)}
.tn-group.none .tn-row{opacity:.4;pointer-events:none}
.tn-sel-head{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.tn-row{display:grid;grid-template-columns:44px 1fr 38px;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.tn-row output{font-size:12px;color:var(--fg);text-align:right;font-variant-numeric:tabular-nums}
.tn-row input[type=range]{width:100%;accent-color:var(--fg);margin:0}
.tn-row .tn-seg{grid-column:2 / 4}
.tn-seg{display:flex;gap:2px;padding:2px;background:var(--inline);border-radius:var(--r2)}
.tn-seg label{flex:1;cursor:pointer;position:relative}
.tn-seg input{position:absolute;opacity:0;pointer-events:none}
.tn-seg b{display:block;text-align:center;padding:5px 0;border-radius:7px;font-size:12px;font-weight:550;color:var(--muted)}
.tn-seg input:checked+b{background:var(--raise);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.tn-seg input:focus-visible+b{outline:2px solid var(--ac-ring)}
.tn-check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg);cursor:pointer}
.tn-check input{accent-color:var(--fg);width:15px;height:15px;margin:0}
.tn-list{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow:auto}
.tn-pt{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border:0;border-radius:var(--r1);background:none;color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.tn-pt:hover{background:var(--hover)}.tn-pt.on{background:var(--active)}
.tn-pt b{width:16px;color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums}
.tn-pt span{margin-left:auto;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.tn-empty{font-size:12.5px;color:var(--faint);padding:4px 2px}
.tn-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--hair)}
.tn-btn{height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--border);background:var(--raise);color:var(--fg);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.tn-btn:hover{background:var(--hover)}
.tn-btn:disabled{opacity:.4;cursor:default;background:var(--raise)}
.tn-btn.ghost{height:26px;padding:0 10px;font-size:12px}
.tn-btn.primary{background:#161616;border-color:#161616;color:#fff}
.tn-btn.primary:hover{background:#2a2a2a}
.tn-status{margin-left:auto;font-size:12px;color:var(--faint)}
.tn-status.dirty{color:var(--worklog)}
.tn-previews{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tn-previews figure{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.tn-previews figcaption{font-size:12px;color:var(--faint);padding-left:2px}
.tn-bar{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;background:var(--page);border:1px solid var(--border);border-radius:var(--r2)}
.tn-bar .pv{display:flex;height:18px;margin-right:auto}
.tn-bar i{width:40px;height:9px;border-radius:5px;background:var(--hair)}
.tn-stage{display:flex;align-items:center;justify-content:center;height:96px;background:var(--page);border:1px solid var(--hair);border-radius:var(--r2)}
.tn-stage .pv{display:flex;height:46px}
.pv svg{height:100%;width:auto;overflow:visible;color:#161616}
@media (max-width:760px){.tuner{grid-template-columns:1fr}.tn-panel{position:static}.tn-hint{flex-basis:100%;order:3}.tn-previews{grid-template-columns:1fr}}

/* ── 본문 드래그 → 유리 캡슐 검색 메뉴 ───────────────────── */
/* 아래 글자가 흐리게 비치는 반투명 유리: 블러+채도, 위쪽 반사광, 밝은 테두리, 떠 있는 그림자 */
.selmenu{position:fixed;left:0;top:0;z-index:450;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;
  background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-rim);box-shadow:var(--glass-shadow);
  opacity:0;transform:scale(.92) translateY(4px);transform-origin:50% 100%;
  transition:opacity .14s ease,transform .22s cubic-bezier(.2,.9,.3,1.25)}
.selmenu.below{transform-origin:50% 0;transform:scale(.92) translateY(-4px)}
.selmenu.on{opacity:1;transform:none}
.selmenu[hidden]{display:none}
.selmenu button{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:0;border-radius:999px;background:transparent;
  color:var(--fg);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.selmenu button:hover{background:rgba(255,255,255,.6)}
.selmenu button:active{background:rgba(255,255,255,.8)}
.selmenu button svg{width:15px;height:15px;flex:none}
.selmenu i{width:1px;height:16px;background:rgba(0,0,0,.13)}
@media (prefers-reduced-motion:reduce){.selmenu{transition:opacity .1s}}

/* ════════════════════════════════════════════════════════════
   16K — 갤러리 · 사례 · 태그
   틀은 무채색, 그림이 주인공. 스크린샷끼리 바탕이 같아도 경계가 보이게 머리카락 선(0 0 0 1px) 하나만
   ════════════════════════════════════════════════════════════ */
body.gal-page .wrap-wide,body.case-page .wrap-wide{max-width:1640px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.gal-head{display:flex;align-items:center;gap:16px;margin:4px 0 22px;min-width:0}
.seg{display:flex;gap:2px;flex:none;padding:3px;border-radius:12px;background:var(--inline)}
.seg-b{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:550;color:var(--muted);white-space:nowrap}
.seg-b b{font-weight:500;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.seg-b:hover{color:var(--fg);text-decoration:none}
.seg-b.on{background:var(--raise);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04)}
.tchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;padding:2px;
  mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.tchips::-webkit-scrollbar{display:none}
.tchip{flex:none;height:30px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;font-size:12.5px;color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--border);white-space:nowrap}
.tchip:hover{color:var(--fg);box-shadow:inset 0 0 0 1px #bdbdbd;text-decoration:none}
.tchip.on{background:var(--fg);color:#fff;box-shadow:none}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px 22px}
.card{display:flex;flex-direction:column;gap:10px;color:var(--fg);min-width:0}
.card:hover{text-decoration:none}
.card-shot{position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--inline);
  box-shadow:0 0 0 1px rgba(0,0,0,.07);transition:box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.card-shot img,.card-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.card-shot video{opacity:0;transition:opacity .25s}
.card-shot.playing video{opacity:1}
.card:hover .card-shot{box-shadow:0 0 0 1px rgba(0,0,0,.1),0 12px 28px -8px rgba(0,0,0,.22);transform:translateY(-2px)}
/* 움직이는 사례 표시: 왼쪽 아래 작은 재생 표식(재생 중엔 숨김) */
.card-shot.motion::after{content:"";position:absolute;left:10px;bottom:10px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M9 7.2v7.6l6-3.8z' fill='%23fff'/%3E%3C/svg%3E") center/22px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .2s}
.card-shot.motion.playing::after{opacity:0}
.card-cap{display:flex;flex-direction:column;gap:1px;min-width:0;padding:0 2px}
.card-cap b{font-size:13.5px;font-weight:620;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-cap span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.more{display:block;width:max-content;margin:36px auto 0;padding:8px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--border);color:var(--fg);font-size:13px}

/* 사례 화면: 왼쪽 그림(데스크톱·모바일을 같은 높이로 나란히) / 오른쪽 정보(따라 내려옴) */
.case{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start;margin-top:4px}
.cs-media{display:flex;gap:16px;align-items:flex-start;min-width:0}
.cs-frame{margin:0;min-width:0}
.cs-frame img,.cs-frame video{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 18px 40px -18px rgba(0,0,0,.25);background:var(--inline)}
/* 1440×900 과 390×844 를 같은 높이로: 폭을 가로세로 비율에 비례해 나눈다 */
.cs-frame.desk{flex:1.6 1 0}
.cs-frame.mob{flex:.462 1 0}
.cs-frame.mob img{border-radius:18px}
.cs-frame.motion{flex:1}
.cs-frame figcaption{margin-top:8px;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.cs-info{position:sticky;top:64px;display:flex;flex-direction:column;gap:0;min-width:0}
.cs-kicker{font-size:12px;color:var(--muted);font-weight:550}
.cs-title{margin:6px 0 0;font-size:30px;line-height:1.15;font-weight:740;letter-spacing:-.03em;word-break:keep-all;overflow-wrap:anywhere}
.cs-orig{margin-top:4px;font-size:13px;color:var(--muted)}
.cs-acts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--fg);
  box-shadow:inset 0 0 0 1px var(--border);background:var(--raise)}
.btn svg{width:14px;height:14px;stroke-width:1.9}
.btn:hover{text-decoration:none;box-shadow:inset 0 0 0 1px #bdbdbd}
.btn.primary{background:var(--fg);color:#fff;box-shadow:none}
.btn.primary:hover{background:#2a2a2a}
.cs-prose{margin-top:14px;font-size:14px}
.cs-prose p:first-child{font-size:15px;font-weight:560;line-height:1.6;color:var(--fg)}
.cs-sec{margin-top:22px}
.cs-sec h4{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 9px;font-size:12px;font-weight:700;color:var(--muted)}
.cs-sec h4 span{font-weight:500;color:var(--faint)}
.pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}
.sw{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:0;border:0;background:none;font:inherit;cursor:copy;text-align:left;color:var(--fg)}
.sw i{display:block;width:100%;aspect-ratio:4/3;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);margin-bottom:5px;transition:transform .15s}
.sw:hover i{transform:scale(1.04)}
.sw b{font-family:var(--mono);font-size:11.5px;font-weight:400}
.sw span{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.sw.copied b{color:var(--ac)}
.sw.copied b::after{content:" 복사됨";font-family:var(--ui)}
.palbar{display:flex;height:6px;margin-top:12px;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.fonts{list-style:none;margin:0;padding:0}
.fonts li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--hair);font-size:13px}
.fonts li:first-child{border-top:0;padding-top:0}
.fonts li span{color:var(--faint);font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip.plain{background:none}
a.chip:hover{color:var(--fg);border-color:#c8c8c8;text-decoration:none}
.cs-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:24px 0 0;padding-top:16px;border-top:1px solid var(--hair);font-size:12.5px}
.cs-facts dt{color:var(--faint)}
.cs-facts dd{margin:0;color:var(--muted)}
.cs-src{margin-top:14px;font-size:12.5px;color:var(--muted)}
.cs-src summary{cursor:pointer;color:var(--faint)}
.cs-src p{margin:8px 0 0;line-height:1.6}
.cs-more{margin-top:56px}
.cs-more.first{margin-top:8px}
.cs-more h2{margin:0 0 16px;font-size:13px;font-weight:700;color:var(--muted)}
.klist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px}
.krow{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);color:var(--fg)}
.krow:hover{text-decoration:none;box-shadow:inset 0 0 0 1px #c8c8c8}
.krow b{font-size:14px;font-weight:620;letter-spacing:-.01em}
.krow span{font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag-head{margin:4px 0 20px}
.tag-head .page-title{margin:4px 0 0;font-size:30px;letter-spacing:-.03em}
.page-sub{margin:-6px 0 28px;color:var(--muted);font-size:13.5px;max-width:640px}
.tagidx .page-title{font-size:30px;letter-spacing:-.03em;margin-bottom:12px}
.tg{margin-bottom:30px}
.tg h2{margin:0 0 10px;font-size:12px;font-weight:700;color:var(--muted)}
.tg-list{display:flex;flex-wrap:wrap;gap:8px}
.tg-i{display:inline-flex;align-items:baseline;gap:8px;height:36px;padding:0 14px;align-items:center;border-radius:999px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);color:var(--fg);font-size:13.5px}
.tg-i b{font-weight:580}
.tg-i span{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.tg-i:hover{text-decoration:none;box-shadow:inset 0 0 0 1px #c8c8c8}
.tg-i.none{background:none;box-shadow:inset 0 0 0 1px var(--hair);color:var(--faint)}
/* 지식 글 아래 사례 묶음 */
.panel.cases{background:none;border:0;padding:0;margin-top:28px}
.panel.cases h4{margin-bottom:12px}
.grid.mini{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px 14px}
.grid.mini .card-cap b{font-size:12.5px}
.kindtabs.four{width:100%;justify-content:space-between}

@media (max-width:1100px){
  .case{grid-template-columns:1fr;gap:28px}
  .cs-info{position:static}
}
@media (max-width:600px){
  body.gal-page .wrap-wide,body.case-page .wrap-wide{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .gal-head{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:18px}
  .seg{align-self:flex-start}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .card-shot{border-radius:8px}
  .card-cap b{font-size:13px}
  .card-cap span{font-size:11.5px}
  .cs-media{gap:10px}
  .cs-frame img,.cs-frame video{border-radius:8px}
  .cs-frame.mob img{border-radius:12px}
  .cs-title{font-size:26px}
  .klist{grid-template-columns:1fr}
}
/* 읽기: 소식의 대표 이미지 — 목록은 오른쪽 작은 그림, 본문은 머리 그림 */
.row.has-img{align-items:center}
.row-img{flex:none;width:76px;height:48px;object-fit:cover;border-radius:7px;box-shadow:0 0 0 1px rgba(0,0,0,.07);background:var(--inline)}
.note-cover{margin:0 0 22px}
.note-cover img{display:block;width:100%;max-height:360px;object-fit:cover;border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.07);background:var(--inline)}
.cs-facts dd.sid{justify-self:start}