:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --side: #263238;
  --side-text: #b0bec5;
  --line: #dde3e8;
  --text: #263238;
  --muted: #78909c;
  --accent: #1e88e5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16191c; --panel: #1e2226; --side: #101315; --side-text: #90a4ae;
    --line: #2c3237; --text: #e0e4e7; --muted: #7f8c94; --accent: #4fa3ee;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; display: flex; min-height: 100vh; background: var(--bg); color: var(--text);
  /* 휴대폰 브라우저는 주소창이 접혔다 펴진다. 그때 100vh 는 화면보다 커서
     아래가 잘린다. dvh 는 지금 실제로 보이는 높이라 그런 일이 없다.
     dvh 를 모르는 브라우저는 위의 100vh 를 그대로 쓴다. */
  min-height: 100dvh;
  /* 손가락으로 끝까지 당겼을 때 화면 전체가 딸려 올라가는 것을 막는다.
     앱처럼 보이려면 이것이 있어야 한다. */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  font: 14px/1.5 -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
/* 대시보드는 창에 딱 맞춰 두고, 안에서 왼쪽 목록과 본문이 따로 내려간다.
   창째로 내려가면 맨 위의 검색란과 편집 단추가 같이 올라가 사라진다. */
body.app { height: 100vh; height: 100dvh; overflow: hidden; }

/* 왼쪽 페이지 목록 */
#sidebar {
  width: 230px; flex: none; background: var(--side); color: var(--side-text);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 6px;
  height: 100%;
}
.brand { font-size: 15px; font-weight: 700; color: #fff; padding: 0 8px 8px; flex: none; }

/* 페이지 이름으로 거르는 칸. 왼쪽 칸은 밝은 모드에서도 어두워서
   본문 검색란과 달리 어두운 바탕 위에 놓이는 색을 따로 준다. */
#pageFilter {
  flex: none; width: 100%; margin-bottom: 4px;
  padding: 7px 10px; font: inherit; font-size: 13px;
  border: 1px solid #37474f; border-radius: 6px;
  background: rgba(255,255,255,.06); color: #fff;
}
#pageFilter::placeholder { color: var(--side-text); opacity: .75; }
#pageFilter:focus {
  outline: none; border-color: var(--accent); background: rgba(255,255,255,.1);
}

#pagelist { flex: 1; min-height: 0; overflow-y: auto; }
#pagelist .empty { padding: 18px 8px; font-size: 13px; }
/* 거르는 중에 끌 수 없다고 알리는 줄 */
.side-hint { font-size: 11px; color: var(--side-text); opacity: .8; padding: 4px 8px 2px; }
.grp { font-size: 11px; letter-spacing: .08em; color: #607d8b; padding: 14px 8px 4px; text-transform: uppercase; }
.page-item {
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--side-text);
}
.page-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.page-item.on { background: var(--accent); color: #fff; }
.page-item .n { font-size: 11px; opacity: .6; }
#addPage { color: var(--side-text); border-color: #37474f; }

/* 왼쪽 아래 메뉴. 접었다 폈다 하는 다섯 개와, 그것을 여는 단추 하나. */
#sidemenu { display: flex; flex-direction: column; gap: 6px; }
#sidemenu[hidden] { display: none; }
#menuBtn { display: flex; align-items: center; justify-content: center; gap: 7px; }
/* .ghost.on 의 파란 바탕은 편집 단추의 것이다. 어두운 왼쪽 칸에서는
   그 파랑이 너무 세게 튀어, 목록의 다른 표시와 같은 결로 낮춘다. */
#menuBtn.on { background: rgba(255, 255, 255, .07); border-color: #37474f; color: #fff; }
#menuBtn .chev { font-size: 9px; transition: transform .15s ease; }
#menuBtn.on .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { #menuBtn .chev { transition: none; } }

/* 본문 */
main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
/* 세 칸으로 나눈다. 양옆이 같은 몫이라 가운데 칸이 늘 화면 한가운데 온다.
   제목이나 메일 주소가 길어져도 검색란은 자리를 지킨다. */
header {
  flex: none; display: grid; grid-template-columns: 1fr minmax(0, 460px) 1fr;
  gap: 14px; align-items: center;
  padding: 13px 26px; border-bottom: 1px solid var(--line); background: var(--bg);
}
#pageTitle {
  font-size: 18px; margin: 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#search {
  width: 100%; padding: 9px 13px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--text); font-size: 14px;
}
.head-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; }
#who { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 좁아지면 메일 주소부터 접는다. 검색란과 편집 단추가 먼저다.
   눕힌 폰은 너비가 900px 을 넘기도 하므로 높이로도 같이 잡는다 — 아래 휴대폰 배치와 같은 조건. */
@media (max-width: 900px), (max-height: 480px) { #who { display: none; } }

/* 왼쪽 목록을 여는 단추. 넓은 화면에서는 목록이 늘 보이므로 쓸 일이 없다. */
#sideBtn { display: none; font-size: 17px; line-height: 1; padding: 7px 11px; }
/* 서랍이 열렸을 때 뒤를 덮는 것. 아무 데나 눌러 닫는다. */
#sideveil { display: none; }

/* ---------- 좁은 화면 (휴대폰) ----------
   왼쪽 목록이 230px 를 차지하면 390px 짜리 폰에서 본문에 160px 밖에 안 남는다.
   그래서 목록을 화면 밖으로 밀어 두고 단추로 밀어 넣는다.
   판(#board)은 columns 로 짜여 있어 좁아지면 저절로 한 줄이 되므로 손댈 것이 없다.

   머리줄은 두 줄로 나눈다. 한 줄에 다 넣으면 검색란이 손가락으로 못 누를 만큼 좁아진다.
     첫 줄  [☰] 페이지 이름 ......... [편집]
     둘째 줄 전체 링크 검색 (너비 가득)

   높이 조건이 왜 붙어 있나: 폰을 옆으로 눕히면 너비가 720px 을 넘어 넓은 화면 배치로
   바뀌어 버렸다. 왼쪽 목록이 다시 자리를 차지하고 머리줄이 한 줄로 붙어, 페이지 이름이
   「S…」로 잘리고 편집 단추가 세로로 접혔다. 눕힌 폰은 높이가 480px 을 넘지 않으므로,
   너비든 높이든 하나만 걸리면 휴대폰 배치를 그대로 쓴다 — 돌려도 화면이 안 바뀐다. */
@media (max-width: 720px), (max-height: 480px) {
  #sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
    width: 82vw; max-width: 300px;
    transform: translateX(-100%); transition: transform .18s ease;
  }
  body.side-open #sidebar { transform: none; }

  #sideveil {
    display: block; position: fixed; inset: 0; z-index: 30;
    background: rgba(0, 0, 0, .45);
    opacity: 0; pointer-events: none; transition: opacity .18s ease;
  }
  body.side-open #sideveil { opacity: 1; pointer-events: auto; }

  #sideBtn { display: inline-flex; align-items: center; justify-content: center; }

  header {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "menu title acts" "find find find";
    row-gap: 10px; gap: 10px; padding: 11px 14px;
  }
  #sideBtn { grid-area: menu; }
  #pageTitle { grid-area: title; font-size: 16px; }
  .head-right { grid-area: acts; }
  #search { grid-area: find; }

  #scroll { padding: 14px 14px 60px; }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar, #sideveil { transition: none; }
}
/* 내려가며 보는 칸. 창이 아니라 이것이 움직인다.
   overscroll-behavior 는 끝까지 내렸을 때 그 밑의 것까지 딸려 움직이지 않게 한다. */
#scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 26px 60px;
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

/* ---------- 노치와 손잡이 자리 ----------
   홈 화면에 깔아 전체 화면으로 뜨면 위아래 끝까지 우리 것이 된다. 아이폰은
   위에 노치가, 아래에 손잡이 막대가 그 위에 겹쳐 있어 그만큼 비워 줘야 한다.
   env() 는 그 기계가 알려 주는 값이고, 안 겹치는 곳에서는 0 이라 아무 일도 없다. */
header { padding-top: calc(13px + env(safe-area-inset-top)); }
#sidebar {
  padding-top: calc(18px + env(safe-area-inset-top));
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
h1 { font-size: 20px; margin: 12px 0 18px; }

button { font: inherit; cursor: pointer; }
.ghost {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 7px; padding: 7px 12px;
}
.ghost:hover { border-color: var(--accent); color: var(--accent); }
/* 단추처럼 보이는 링크. 누르면 다른 화면으로 넘어가는 것이라 <a> 로 두어야
   가운데 단추 클릭·새 탭에서 열기가 그대로 된다. */
.as-btn { text-decoration: none; display: block; text-align: center; }
.ghost.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 링크 묶음 */
#board { columns: 280px; column-gap: 18px; }
/* 페이지가 안 열릴 때 판 위에 놓는 알림. 판이 여러 칸으로 나뉘어 있어서
   칸을 가로지르게 두지 않으면 글이 칸마다 토막 나 흩어진다. */
.board-note { column-span: all; color: var(--muted); padding: 22px 2px; line-height: 1.8; }
/* 아래를 조금 비워 둔다. 편집 모드에서 '+ 링크 추가' 가 그 자리에 얹히므로
   상자 크기가 그대로다. 상자가 커지면 판이 통째로 다시 짜여, 보고 있던 묶음이
   딴 칸으로 건너뛰어 버린다. */
.section {
  position: relative;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px 30px; margin: 0 0 18px; break-inside: avoid;
}
.section h2 {
  font-size: 13px; margin: 0 0 8px; display: flex; align-items: center; gap: 6px;
  justify-content: space-between; cursor: pointer; user-select: none;
}
/* 편집 모드에서 단추가 들어오면 이름이 두 줄로 접히며 상자가 커졌다.
   접지 말고 줄이게 한다. 온 이름은 마우스를 올리면 나온다. */
.section h2 .sec-name {
  flex: 1 1 auto;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 편집 모드에서는 이름을 눌러 고친다. 누를 수 있는 곳임을 커서로 알린다 */
body.editing .section h2 .sec-name { cursor: text; }
/* 이름을 누르면 그 자리에 들어서는 칸. 이름칸과 같은 자리·같은 크기여야
   고치는 동안 머리줄이 늘었다 줄었다 하지 않는다. */
.sec-name-edit {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-weight: 700;
  padding: 1px 5px; margin: -2px 0;
  border: 1px solid var(--accent); border-radius: 6px;
  background: var(--bg); color: var(--text);
}
.sec-name-edit:focus { outline: none; }
/* 고치는 동안은 머리줄의 단추를 감춘다. 셋이 자리를 차지해 그냥 두면
   이름 칸이 글자 몇 자 너비로 눌린다. */
.section.renaming .sec-btns { display: none; }
/* 묶음 접고 펴기. 왼쪽 그룹 머리와 같은 모양으로 둔다 */
.section h2 .chev {
  font-size: 9px; width: 10px; flex: none; text-align: center; color: var(--muted);
  transition: transform .15s ease;
}
.section.folded h2 .chev { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .section h2 .chev { transition: none; } }
/* 몇 개가 들었는지는 접었을 때만 알려 준다. 펴 놓았으면 세지 않아도 보인다 */
.section h2 .n { font-size: 11px; color: var(--muted); flex: none; display: none; }
.section.folded h2 .n { display: block; }
/* 접으면 이름줄만 남는다. '+ 링크 추가' 도 함께 접히므로 아래를 비워 둘 까닭이 없다.
   `body.editing .add-link` 보다 셈이 세서 편집 모드에서도 접힌 채로 있는다. */
.section.folded { padding-bottom: 8px; }
.section.folded h2 { margin-bottom: 0; }
.section.folded > .link,
.section.folded .add-link { display: none; }
.link {
  display: flex; align-items: center; gap: 9px; padding: 5px 6px; margin: 0 -6px;
  border-radius: 6px; text-decoration: none; color: var(--text);
}
.link:hover { background: rgba(30,136,229,.09); }
/* 손가락으로 누르는 기계에서는 줄 사이를 벌린다. 마우스 커서와 달리
   손끝은 넓어서, 촘촘하면 옆 링크가 눌린다. */
@media (pointer: coarse) {
  .link { padding: 9px 6px; }
  .section h2 { min-height: 34px; }
}
/* 두드려 봤는데 없는 곳. 지우지는 않고 줄만 그어 둔다. */
.link.dead .t { text-decoration: line-through; text-decoration-thickness: 1px; }
.link.dead { opacity: .5; }
.link.dead:hover { opacity: .8; }
.link img, .link .fallback {
  width: 16px; height: 16px; flex: none; border-radius: 3px;
}
.fallback {
  background: var(--muted); color: #fff; font-size: 9px; line-height: 16px;
  text-align: center; font-weight: 700;
}
.link .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 설명은 줄에 두지 않는다. 이름 옆에 두었더니 이름을 잘라 먹어 무슨 링크인지
   알아보기 어려웠다. 마우스를 올리면 #linkTip 에 이름과 함께 뜬다(app.js 의 링크설명). */
.link .note { display: none; }
#linkTip {
  position: fixed; z-index: 50; max-width: 300px; pointer-events: none;
  padding: 8px 11px; border-radius: 8px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  font-size: 12px; line-height: 1.55; white-space: pre-line; word-break: break-word;
}
#linkTip b { display: block; font-size: 13px; margin-bottom: 2px; }
#linkTip span { color: var(--muted); }
.rm { border: 0; background: none; color: var(--muted); padding: 0 4px; display: none; }
body.editing .rm { display: block; }
body.editing .rm:hover { color: #e53935; }
body.editing .rm.edit:hover { color: var(--accent); }
/* 묶음 머리의 단추들. h2 가 space-between 이라 한 칸에 담아야 흩어지지 않는다 */
.sec-btns { display: flex; align-items: center; gap: 2px; flex: none; }
.open-all { border: 0; background: none; color: var(--muted); padding: 0 4px; font-size: 12px; }
.open-all:hover { color: var(--accent); }

/* 묶음을 옮길 때 그 자리에 잠깐 나타나는 고르는 칸 */
.move-to {
  font: inherit; font-size: 12px; padding: 2px 5px; margin-left: 4px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--text);
}
/* 흐름에서 빼내 아래 여백에 얹는다. 있으나 없으나 상자 크기가 같아야 한다. */
.add-link {
  position: absolute; left: 14px; right: 14px; bottom: 6px;
  color: var(--muted); font-size: 12px; display: none;
}
body.editing .add-link { display: block; }

/* 검색 결과 */
#results .hit {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 13px; margin-bottom: 8px;
  text-decoration: none; color: var(--text);
}
#results .path { color: var(--muted); font-size: 12px; }
.empty { color: var(--muted); padding: 30px 0; }

/* 들어가기 화면 */
body.login { display: flex; align-items: center; justify-content: center; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 32px 34px; width: 340px; text-align: center;
}
.card h1 { font-size: 18px; margin: 0 0 14px; }
.card input {
  width: 100%; padding: 10px 12px; margin-bottom: 10px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text);
}
.card button[type=submit] {
  width: 100%; padding: 10px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 14px;
}
.hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.hint.small { font-size: 12px; margin-top: 12px; }
.err { color: #e53935; font-size: 13px; margin: 12px 0 0; }
#gbtn { display: flex; justify-content: center; }
.card .wide { width: 100%; margin-top: 6px; }

/* 빠른 저장 창. 북마크릿이 띄우는 작은 창이라 좁고 짧다. */
body.save { display: block; padding: 16px 18px 20px; }
/* 팝업 창이 아니라 보통 탭에서 열려도 늘어지지 않게 폭을 묶어 둔다. */
.save-card { display: flex; flex-direction: column; gap: 13px; max-width: 430px; margin: 0 auto; }
.save-head { display: flex; align-items: center; gap: 9px; }
.save-head b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-fav {
  width: 20px; height: 20px; flex: none; border-radius: 4px; background: var(--line) center/20px no-repeat;
}
.save-where { display: flex; flex-direction: column; gap: 6px; }
.save-where select {
  width: 100%; padding: 9px 11px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
}
.save-dup { font-size: 12px; color: var(--muted); }
.save-dup.bad { color: #e53935; }
.save-msg { color: var(--muted); font-size: 13px; margin: 0; }
.save-msg.bad { color: #e53935; }
.save-open { color: var(--accent); font-size: 13px; }

/* 빠른 저장 설치 안내 */
#bmletDlg { width: min(430px, 92vw); }
#bmletDlg > * { padding: 0 22px; }
#bmletDlg .dlg-head { padding-top: 18px; }
#bmletDlg .fld { padding-bottom: 20px; gap: 12px; }
/* 끌어다 놓는 단추. 여기 적힌 글자가 그대로 북마크 이름이 되므로
   앞에 북마크 모양 이모지를 둔다. javascript: 북마크에는 크롬이 사이트
   아이콘을 붙여 주지 않는다 — 아이콘을 가져올 주소가 없어서다. */
.bmlet-drag {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 7px 14px; border-radius: 7px; cursor: grab;
  background: var(--accent); color: #fff; text-decoration: none; font-size: 13px; font-weight: 600;
}
.bmlet-steps { margin: 0; padding-left: 20px; color: var(--muted); font-size: 13px; }
.bmlet-steps li { margin-bottom: 5px; }

/* 승인 대기 표시. 기다리는 중에는 은은하게 숨쉬고, 막힌 계정이면 붉게 멈춘다. */
.wait-mark {
  width: 38px; height: 38px; margin: 0 auto 14px; border-radius: 50%;
  border: 2px solid #ffc107; background: rgba(255, 193, 7, .12);
  animation: breathe 2.4s ease-in-out infinite;
}
.wait-mark.no {
  border-color: #e53935; background: rgba(229, 57, 53, .12); animation: none;
}
@keyframes breathe { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .wait-mark { animation: none; } }

/* 관리 페이지 */
.tabs { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.tabs .tab {
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 16px;
  background: var(--panel); color: var(--muted); font-size: 14px;
}
.tabs .tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tabs #newPage { margin-left: auto; }

.admin-split { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 820px) { .admin-split { grid-template-columns: 1fr; } }

#adminList {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; max-height: 70vh; overflow-y: auto;
}
.a-row {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-radius: 7px; cursor: pointer; font-size: 14px;
}
.a-row:hover { background: rgba(255,255,255,.04); }
.a-row.on { background: var(--accent); color: #fff; }
.a-row.on .badge { background: rgba(255,255,255,.22); color: #fff; }
.a-row .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#adminDetail {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px;
}
.a-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.a-head h3 { margin: 0; font-size: 16px; }
.a-head .hint { margin: 4px 0 0; }
.a-acts { display: flex; gap: 6px; flex-wrap: wrap; }

.a-sub {
  margin: 20px 0 8px; font-size: 12px; color: var(--muted);
  letter-spacing: .04em; border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.a-line {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.a-line:last-child { border-bottom: 0; }
.a-line .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dim { color: var(--muted); font-size: 12px; }

.seg { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; flex: none; }
.seg button { border: 0; background: none; color: var(--muted); font-size: 12.5px; padding: 4px 11px; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--accent); color: #fff; }

.a-radio {
  display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.a-radio.on { border-color: var(--accent); }
.a-radio b { display: block; font-size: 14px; font-weight: 600; }
.a-radio i { font-style: normal; font-size: 12.5px; color: var(--muted); }

/* 들어가기 화면 */
body.login { display: flex; align-items: center; justify-content: center; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 32px 34px; width: 340px; text-align: center;
}
.card h1 { font-size: 18px; margin: 0 0 14px; }
.card input {
  width: 100%; padding: 10px 12px; margin-bottom: 10px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text);
}
.card button[type=submit] {
  width: 100%; padding: 10px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 14px;
}
.hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.hint.small { font-size: 12px; margin-top: 12px; }
.err { color: #e53935; font-size: 13px; margin: 12px 0 0; }
#gbtn { display: flex; justify-content: center; }
.card .wide { width: 100%; margin-top: 6px; }

/* 승인 대기 표시. 기다리는 중에는 은은하게 숨쉬고, 막힌 계정이면 붉게 멈춘다. */
.wait-mark {
  width: 38px; height: 38px; margin: 0 auto 14px; border-radius: 50%;
  border: 2px solid #ffc107; background: rgba(255, 193, 7, .12);
  animation: breathe 2.4s ease-in-out infinite;
}
.wait-mark.no {
  border-color: #e53935; background: rgba(229, 57, 53, .12); animation: none;
}
@keyframes breathe { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .wait-mark { animation: none; } }

/* 사용자 관리 */
#users table { width: 100%; border-collapse: collapse; background: var(--panel); }
#users th, #users td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; }
#users th { font-size: 12px; color: var(--muted); font-weight: 600; }
#users .pending td { background: rgba(255,193,7,.12); }
#users button { margin-right: 6px; }
.badge { font-size: 11px; padding: 2px 7px; border-radius: 20px; background: var(--bg); color: var(--muted); }
.badge.ok { background: rgba(67,160,71,.15); color: #43a047; }
.badge.no { background: rgba(229,57,53,.15); color: #e53935; }

/* 뜨는 창들. 색을 안 정해 두면 브라우저가 흰 바탕을 그대로 써서
   어두운 화면에서 저 혼자 하얗게 뜬다. */
dialog {
  width: min(560px, calc(100vw - 32px)); margin: auto; padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--text);
}
dialog::backdrop { background: rgba(0, 0, 0, .35); }

/* 북마크 수정 창 */
#linkForm { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 18px; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; }
.dlg-head h2 { font-size: 17px; margin: 0; }
.dlg-head .x { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 0 2px; }
.dlg-head .x:hover { color: var(--text); }

.fld { display: flex; flex-direction: column; gap: 6px; }
.fld .lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); }
.fld input, .fld textarea {
  width: 100%; padding: 9px 12px; font: inherit; color: var(--text); resize: vertical;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
}
.fld input:focus, .fld textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(30, 136, 229, .18);
}
/* 어느 페이지 · 어느 묶음에 둘지 고르는 두 칸 */
.move-where { display: flex; gap: 8px; }
.move-where select {
  flex: 1; min-width: 0; padding: 9px 10px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
}
.move-where select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(30, 136, 229, .18);
}
.move-where select[disabled] { color: var(--muted); }

.suggest { border: 0; background: none; color: var(--accent); font-size: 12px; padding: 0; text-align: right; }
.suggest:hover { text-decoration: underline; }
.suggest[disabled] { color: var(--muted); cursor: default; text-decoration: none; }

.dlg-foot { display: flex; align-items: center; gap: 8px; }
.primary { border: 0; border-radius: 7px; padding: 8px 18px; background: var(--accent); color: #fff; }
.danger {
  margin-left: auto; background: transparent; border: 1px solid #e53935;
  color: #e53935; border-radius: 7px; padding: 7px 12px;
}
.danger:hover { background: rgba(229, 57, 53, .1); }

/* 북마크 가져오기 */
#importDlg { width: min(560px, 92vw); }
.imp-drop {
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  border: 1px dashed var(--line); border-radius: 10px; padding: 22px 16px; cursor: pointer;
}
.imp-drop:hover, .imp-drop.on { border-color: var(--accent); background: rgba(255,255,255,.02); }
.imp-drop b { font-size: 14px; font-weight: 600; }
.imp-drop span { color: var(--muted); font-size: 12px; }

.imp-tree {
  max-height: 230px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.7;
}
.imp-tree:empty { display: none; }
.imp-page { font-weight: 600; margin-top: 6px; }
.imp-page:first-child { margin-top: 0; }
.imp-sec { padding-left: 14px; color: var(--muted); }
.imp-sec em { font-style: normal; font-size: 11px; }
.imp-link { padding-left: 30px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-link.skip { color: #e0a800; }
.imp-more { padding-left: 30px; color: var(--muted); font-size: 11.5px; }
.imp-empty { color: var(--muted); text-align: center; padding: 16px 0; }

.imp-count { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.imp-where { display: flex; gap: 8px; }
.imp-where { flex-wrap: wrap; }
.primary[disabled] { opacity: .4; cursor: default; }
.imp-msg { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.imp-msg.err { color: #e53935; }

/* 끌어서 옮기기 */
.kkeul { cursor: grab; }
.kkeul:active { cursor: grabbing; }
.kkeulnun { opacity: .4; }
.kkeul-here { outline: 1px dashed var(--accent); outline-offset: 2px; }
body.editing .page-item.kkeul > span:first-child::before,
body.editing .section.kkeul > h2 > .sec-name::before {
  content: "⋮⋮"; color: var(--muted); font-size: 11px; margin-right: 6px; letter-spacing: -2px;
}
@media (prefers-reduced-motion: reduce) { .kkeulnun { opacity: .55; } }

.link .grip {
  color: var(--muted); font-size: 11px; letter-spacing: -2px; cursor: grab;
  padding: 0 4px 0 0; flex: none;
}
.link .grip:active { cursor: grabbing; }

/* 관리 페이지 목록 끌기 */
.a-row.kkeul { cursor: grab; }
.a-row.kkeul:active { cursor: grabbing; }
.a-row.kkeul::before {
  content: "⋮⋮"; color: var(--muted); font-size: 11px; letter-spacing: -2px; flex: none;
}
.a-row.on.kkeul::before { color: rgba(255,255,255,.7); }

/* 그룹 고르개 */
.grp-filter {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
}
/* display 를 정해 두면 hidden 이 밀린다. 휴지통·버전 기록 탭에서 감추라고
   해도 그대로 보이던 까닭이다. */
.grp-filter[hidden] { display: none; }
.grp-pick {
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  color: var(--text); font-size: 13px; padding: 5px 8px;
}

/* 손으로 만든 고르개.
   브라우저가 여는 <select> 목록은 운영체제가 그리는 것이라 색을 입힐 수가
   없다. 어두운 화면 한가운데 흰 창이 뜨는 까닭이다. 그래서 목록만 우리가
   그린다. 안쪽 <select> 는 그대로 두어, 값을 읽고 쓰는 쪽은 손대지 않는다. */
.pick { position: relative; display: inline-flex; }
.pick > select { display: none; }
/* 옆의 탭 단추와 나란히 서므로 테·모서리·글자·안쪽 여백을 그것에 맞춘다. */
.pick-btn {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 16px;
  background: var(--panel); color: var(--muted); font-size: 14px;
}
.pick-btn:hover { border-color: var(--accent); }
.pick-btn .pick-label { color: inherit; }
.pick-btn .pick-now { color: var(--text); }
.pick-btn .chev { font-size: 9px; color: var(--muted); transition: transform .15s ease; }
.pick.on .pick-btn .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .pick-btn .chev { transition: none; } }

.pick-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 100%; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.pick-list[hidden] { display: none; }
.pick-opt {
  border: 1px solid var(--line); border-radius: 7px; background: transparent;
  color: var(--muted); font-size: 13px; padding: 6px 16px;
  text-align: center; white-space: nowrap;
}
.pick-opt:hover, .pick-opt:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.pick-opt.on { background: rgba(30, 136, 229, .12); border-color: var(--accent); color: var(--accent); }
.grp-pick {
  flex: none; width: 62px; padding: 2px 4px; font-size: 12px; border-radius: 5px;
}
.a-row.on .grp-pick { background: rgba(255,255,255,.15); border-color: transparent; color: #fff; }

/* 그룹 접고 펴기 */
.grp {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none; border-radius: 6px;
}
.grp:hover { color: var(--text); }
.grp .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp .n { font-size: 11px; opacity: .7; }
.grp .chev {
  font-size: 9px; width: 10px; text-align: center; flex: none;
  transition: transform .15s ease;
}
.grp.folded .chev { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .grp .chev { transition: none; } }

/* 깨진 링크 */
.dead-sum { padding: 12px 10px; font-size: 14px; }
.dead-nums { display: flex; flex-direction: column; gap: 3px; margin: 10px 0 14px; font-size: 13px; color: var(--muted); }
.dead-nums b { color: var(--text); }
.dead-acts { display: flex; flex-direction: column; gap: 6px; }
.dead-line { display: flex; align-items: baseline; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--line); font-size: 13px; }
.dead-line:first-of-type { border-top: 0; }
.dead-line .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: line-through; }
.dead-line .code { flex: none; color: var(--muted); font-size: 12px; }

/* 보관소 — 한 줄에 제목·주소·원래 자리·단추 셋.
   휴지통 줄(.a-line)보다 키가 크다. 여기서는 훑는 것이 아니라 하나씩 정하기 때문에,
   주소가 통째로 보여야 하고 고칠 칸이 그 자리에서 펴진다. */
.ar-line { padding: 11px 2px; border-top: 1px solid var(--line); font-size: 14px; }
.ar-line:first-child { border-top: 0; }
.ar-head { display: flex; align-items: baseline; gap: 10px; }
.ar-head .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-head .code { flex: none; color: var(--muted); font-size: 12px; }
.ar-url { margin-top: 3px; font-size: 12.5px; overflow-wrap: anywhere; }
.ar-url a { color: var(--muted); }
.ar-url a:hover { color: var(--accent); }
.ar-where { margin-top: 3px; }
.ar-acts, .ar-edit { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
/* display 를 준 뒤에는 hidden 이 안 먹는다 — 칸 선택자가 [hidden] 보다 세다.
   이것이 빠지면 고치는 칸이 모든 줄에서 처음부터 펴져 있다. */
.ar-acts[hidden], .ar-edit[hidden] { display: none; }
.ar-acts button, .ar-edit button { flex: none; padding: 4px 11px; font-size: 12.5px; }
.ar-edit input { flex: 1; min-width: 160px; font-size: 13px; padding: 5px 8px; }
.ar-edit [data-f="title"] { max-width: 220px; }

/* 변경 기록 — 한 줄에 [언제] [무엇을] [무엇에] [누가] */
.chg {
  display: grid; grid-template-columns: 82px 62px minmax(0, 1fr) auto;
  gap: 10px; align-items: baseline;
  padding: 7px 2px; border-top: 1px solid var(--line); font-size: 13px;
}
.chg:first-child { border-top: 0; }
.chg-when { color: var(--muted); font-size: 12px; white-space: nowrap; }
/* 한 일은 색으로 갈라 둔다. 지운 것을 눈으로 훑어 찾는 일이 가장 잦다. */
.chg-what {
  font-size: 12px; text-align: center; padding: 2px 0; border-radius: 5px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.chg-what.new { color: #2e7d32; border-color: #a5d6a7; }
.chg-what.edit { color: #1565c0; border-color: #90caf9; }
.chg-what.del { color: #c62828; border-color: #ef9a9a; }
.chg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chg-who { font-size: 12px; white-space: nowrap; }
/* 좁아지면 누가 했는지를 아랫줄로 내린다. 언제·무엇이 먼저다. */
@media (max-width: 720px) {
  .chg { grid-template-columns: 74px 58px minmax(0, 1fr); }
  .chg-who { grid-column: 2 / -1; }
}

/* 버전 기록 */
.ver { padding: 14px 0; border-top: 1px solid var(--line); }
.ver:first-child { border-top: 0; padding-top: 2px; }
.ver-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ver-head b { font-size: 15px; }
.ver-name { font-size: 13px; color: var(--text); }
.ver-head .dim { margin-left: auto; font-size: 12px; }
.ver-list { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.ver-list li { margin-bottom: 4px; }

/* 휴지통 */
.bin-sum { padding: 12px 10px; font-size: 14px; }
.bin-sum b { font-size: 17px; }
.bin-sum .hint { margin: 8px 0 0; }
#adminDetail .a-line .danger, #adminDetail .a-line .ghost { flex: none; padding: 3px 10px; font-size: 12.5px; }

/* 잠깐 뜨는 알림 */
#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 8px 18px; font-size: 13px; color: var(--text);
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  z-index: 50;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }

/* 새 판이 나왔다는 알림.
   잠깐 뜨는 알림과 달리 저절로 사라지지 않는다 — 눌러야 없어진다.
   앱은 껐다 켜는 일이 드물어서, 지나쳐 버리면 며칠씩 옛 판을 쓰게 된다.
   아래 손잡이 막대에 가리지 않게 그 높이만큼 더 띄운다. */
#newver {
  position: fixed; left: 50%; transform: translate(-50%, 12px);
  bottom: calc(26px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  background: var(--side); color: #fff; border-radius: 22px;
  padding: 7px 8px 7px 18px; font-size: 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,.32);
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
  z-index: 60; max-width: calc(100vw - 28px);
}
#newver.on { opacity: 1; transform: translate(-50%, 0); }
#newver .go {
  background: var(--accent); border: 0; color: #fff; font: inherit;
  border-radius: 16px; padding: 6px 14px; white-space: nowrap;
}
#newver .go:disabled { opacity: .6; }
#newver .x {
  background: transparent; border: 0; color: rgba(255,255,255,.6);
  font-size: 18px; line-height: 1; padding: 4px 8px;
}
#newver .x:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { #newver { transition: none; } }

/* 검색 결과 - 페이지가 먼저 */
.hit-head {
  font-size: 11px; letter-spacing: .08em; color: var(--muted);
  text-transform: uppercase; padding: 14px 2px 6px;
}
.hit-head:first-child { padding-top: 0; }
#results .page-hit {
  display: block; width: 100%; text-align: left; font: inherit;
  border-left: 3px solid var(--accent);
  cursor: pointer;
}
#results .page-hit:hover { border-color: var(--accent); }