:root {
  --bookmark-font-size: 11px;
  --bookmark-icon-size: calc(var(--bookmark-font-size) + 10px);
}

/* 북마크 글자 크기에 맞춰 아이콘도 함께 작아지거나 커짐 */
.link-row {
  grid-template-columns: var(--bookmark-icon-size) minmax(0, 1fr) auto !important;
  min-height: calc(var(--bookmark-icon-size) + 8px) !important;
}

body.edit-mode .link-row {
  grid-template-columns: 18px var(--bookmark-icon-size) minmax(0, 1fr) auto !important;
}

.link-title {
  font-size: var(--bookmark-font-size) !important;
}

.link-host {
  font-size: max(8px, calc(var(--bookmark-font-size) - 3px)) !important;
}

.group-name {
  font-size: max(9px, calc(var(--bookmark-font-size) - 2px)) !important;
}

.favicon,
.custom-favicon,
.favicon-site,
.favicon-fallback {
  width: var(--bookmark-icon-size) !important;
  min-width: var(--bookmark-icon-size) !important;
  max-width: var(--bookmark-icon-size) !important;
  height: var(--bookmark-icon-size) !important;
  min-height: var(--bookmark-icon-size) !important;
  max-height: var(--bookmark-icon-size) !important;
  border-radius: max(4px, calc(var(--bookmark-icon-size) * .2)) !important;
}

.custom-favicon {
  font-size: max(7px, calc(var(--bookmark-font-size) * .68)) !important;
}

.favicon-fallback {
  font-size: max(8px, calc(var(--bookmark-font-size) * .8)) !important;
}

/* 사용자가 글자색을 직접 지정하면 버튼 안 글자까지 동일하게 적용 */
body[data-custom-text-color="true"] .btn,
body[data-custom-text-color="true"] .btn.primary,
body[data-custom-text-color="true"] .btn:hover,
body[data-custom-text-color="true"] .btn.primary:hover,
body[data-custom-text-color="true"] .icon-btn,
body[data-custom-text-color="true"] .icon-btn:hover,
body[data-custom-text-color="true"] .chip,
body[data-custom-text-color="true"] .chip:hover,
body[data-custom-text-color="true"] .chip.active,
body[data-custom-text-color="true"] .theme-option,
body[data-custom-text-color="true"] .theme-option:hover,
body[data-custom-text-color="true"] .theme-option.active,
body[data-custom-text-color="true"] .mini-btn,
body[data-custom-text-color="true"] .add-inline,
body[data-custom-text-color="true"] .mobile-nav button,
body[data-custom-text-color="true"] .pan-context-menu button,
body[data-custom-text-color="true"] .pan-edit-toggle.is-editing {
  color: var(--text) !important;
}

/* 하단의 중복 '이 카테고리에 링크 추가'는 상단 + 메뉴로 통합 */
.category-body > .add-inline {
  display: none !important;
}

.pan-font-size-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface-strong));
}

.pan-font-size-panel > label {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.pan-font-size-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 72px;
  align-items: center;
  gap: 10px;
}

.pan-font-size-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.pan-font-number-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px;
}

.pan-font-number-wrap input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--text);
  background: var(--surface-strong);
}

.pan-font-size-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.pan-category-add-menu {
  position: fixed;
  z-index: 260;
  width: 164px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-strong) 97%, transparent);
  box-shadow: 0 16px 44px rgba(28,31,49,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pan-category-add-menu button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  background: transparent;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
}

.pan-category-add-menu button:hover {
  background: var(--accent-soft);
}

body[data-custom-text-color="true"] .pan-category-add-menu button {
  color: var(--text) !important;
}

/* 데스크톱/태블릿 가로 화면에서는 창을 줄여도 카테고리 4개가 함께 보이도록 유지.
   화면을 넓히면 카드 최대 폭을 제한해 더 많은 카테고리가 자연스럽게 한 화면에 들어온다. */
@media (min-width: 761px) {
  .board {
    grid-auto-columns: clamp(170px, calc((100vw - 84px) / 4), 265px) !important;
  }

  .category-card {
    min-width: 0;
  }
}

/* iPadOS 계열의 가로 패드 화면만 별도 보정.
   키보드/트랙패드 연결 여부와 상관없이 패드 크기와 iOS Safari 환경으로 구분한다. */
@supports (-webkit-touch-callout: none) {
  @media (min-width: 900px) and (max-width: 1400px) and (min-height: 700px) and (orientation: landscape) {
    .board {
      grid-auto-columns: clamp(250px, calc((100vw - 84px) / 4), 330px) !important;
      gap: 14px;
    }

    .category-card {
      min-width: 0;
    }

    .link-title {
      font-size: max(9px, var(--bookmark-font-size)) !important;
    }

    .link-host {
      font-size: max(9px, calc(var(--bookmark-font-size) - 3px)) !important;
    }

    .group-name {
      font-size: max(9px, calc(var(--bookmark-font-size) - 2px)) !important;
    }

    .category-title strong,
    .count-badge {
      font-size: max(9px, 1em) !important;
    }
  }
}

@media (max-width: 760px) {
  .link-row {
    grid-template-columns: var(--bookmark-icon-size) minmax(0,1fr) auto !important;
  }

  body.edit-mode .link-row {
    grid-template-columns: 18px var(--bookmark-icon-size) minmax(0,1fr) auto !important;
  }

  .pan-category-add-menu {
    width: min(190px, calc(100vw - 20px));
  }
}