/* Smallpdf-style header, 도구 panel and home (2026-10-23).
   Values measured on smallpdf.com/kr at 1440x900: header 56px + 1px #e8e8e8 line,
   40px buttons with 4px radius, 도구 button open = #d9e5ff / #0055ff,
   panel padding 16px, columns 192px + 8px, group label 14px #757575 + 4px,
   item 32px (4px padding, 24px tile, 4px gap), 14px #1a1a1a, groups 16px apart.
   Loaded last: overrides app/readability/ux-fixes/design-v2. */

:root {
  --sp-ink: #1a1a1a;
  --sp-muted: #757575;
  --sp-line: #e8e8e8;
  --sp-border: #dddddd;
  --sp-blue: #0055ff;
  --sp-blue-wash: #d9e5ff;
  --sp-hover: #e6eeff;
}

/* ---------- header ---------- */
.site_header {
  border-bottom: 1px solid var(--sp-line) !important;
  box-shadow: none !important;
  background: #fff !important;
}
.site_header .header_inner {
  max-width: none !important;
  min-height: 56px !important;
  height: 56px;
  padding: 0 8px 0 16px !important;
  gap: 16px !important;
}
.site_header .brand { min-height: 40px; gap: 8px; }
.site_header .logo_mark { width: 32px !important; height: 32px !important; }
.site_header .brand_text { font-size: 18px !important; font-weight: 700; color: var(--sp-ink); letter-spacing: -0.01em; }
.site_header .brand_text strong { font-weight: 700; }

.sp_nav {
  display: flex !important;
  align-items: center;
  gap: 0;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.sp_tools { position: static; margin-right: 8px; }
.sp_tools > summary { list-style: none; }
.sp_tools > summary::-webkit-details-marker { display: none; }
.sp_tools_button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 40px;
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid var(--sp-border);
  border-radius: 4px !important;
  background: #fff;
  color: var(--sp-ink);
  font-size: 16px !important;
  font-weight: 400;
  line-height: 24px;
  cursor: pointer;
  user-select: none;
}
.sp_tools_button:hover { background: #f5f7fa; }
.sp_tools[open] > .sp_tools_button {
  border-color: var(--sp-blue-wash);
  background: var(--sp-blue-wash);
  color: var(--sp-blue);
}
.sp_grid_icon { width: 16px; height: 16px; fill: currentColor; }
.sp_caret { width: 10px; height: 6px; fill: currentColor; transition: transform 120ms ease; }
.sp_tools[open] .sp_caret { transform: rotate(180deg); }
.sp_quick {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 10px;
  color: #212121;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
.sp_quick:hover { color: var(--sp-blue); }
.sp_quick.is_current { color: var(--sp-blue); box-shadow: inset 0 -2px 0 var(--sp-blue); }

.sp_mega {
  position: fixed;
  z-index: 70;
  inset: 57px 0 auto 0;
  max-height: calc(100vh - 57px);
  overflow: auto;
  padding: 16px 16px 4px;
  background: #fff;
  border-bottom: 1px solid var(--sp-line);
}
.sp_tools[open]::after {
  content: "";
  position: fixed;
  z-index: 65;
  inset: 57px 0 0 0;
  background: rgb(0 0 0 / 40%);
}

.site_header .header_actions { gap: 8px !important; margin-left: auto; }
.site_header .header_jobs_link {
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  color: #212121 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}
.site_header .header_jobs_link:hover { color: var(--sp-blue) !important; text-decoration: none !important; }
.site_header .header_user { padding: 0 8px; font-size: 14px !important; color: var(--sp-muted) !important; }
.site_header .logout_button {
  min-height: 40px !important;
  height: 40px;
  padding: 0 16px !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--sp-ink) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}
.site_header .logout_button:hover { background: #f5f7fa !important; }

/* ---------- shared tool columns (header panel + home) ---------- */
.sp_cols {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(150px, 192px)) !important;
  gap: 0 8px !important;
  align-items: start;
  max-width: none !important;
  margin: 0;
  padding: 0;
  border: 0;
}
.sp_col { min-width: 0; }
.sp_col:not(:has(.sp_group:not([hidden]))) { display: none; }
.sp_group { margin: 0 0 16px !important; padding: 0 !important; }
.sp_group[hidden] { display: none; }
.sp_group_label,
main .sp_group_label {
  margin: 0 !important;
  padding: 0 0 4px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: 0;
  color: var(--sp-muted) !important;
}
.sp_list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sp_list > li { margin: 0; padding: 0; }
.sp_list > li:has(> a[hidden]) { display: none; }
a.sp_item,
.sp_cols a.sp_item.catalog_tool {
  display: flex !important;
  align-items: center;
  gap: 4px;
  height: 32px;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent;
  box-shadow: none !important;
  color: var(--sp-ink) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.3;
  text-decoration: none !important;
  transform: none !important;
}
a.sp_item:hover,
a.sp_item:focus-visible,
a.sp_item[aria-current="page"] { background: var(--sp-hover) !important; }
a.sp_item:focus-visible { outline: 2px solid var(--sp-blue); outline-offset: -2px; }
.sp_item_label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.sp_tile {
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 4px;
  border-radius: 4px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.sp_tile svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.sp_tile_letter { font-size: 16px; font-weight: 800; font-family: Arial, "Helvetica Neue", sans-serif; }
.sp_tile_text { font-size: 7px; font-weight: 700; letter-spacing: 0.02em; font-family: Arial, "Helvetica Neue", sans-serif; }
.sp_tone_red { background: #f23030; }
.sp_tone_yellow { background: #ffb700; }
.sp_tone_blue { background: #3d99f5; }
.sp_tone_green { background: #00cc44; }
.sp_tone_orange { background: #ff8000; }
.sp_tone_violet { background: #7961f2; }
.sp_tone_teal { background: #0fc0c5; }
.sp_tone_pink { background: #ff5975; }

/* Dark description tooltip under the hovered tool, like Smallpdf. */
.sp_list > li { position: relative; }
a.sp_item[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  width: max-content;
  max-width: 260px;
  padding: 6px 10px;
  border-radius: 4px;
  background: #262626;
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  pointer-events: none;
}

/* ---------- home ---------- */
body:has(main.sp_home) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(main.sp_home) > main.sp_home { flex: 1 0 auto; }
main.sp_home {
  inline-size: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 16px 32px !important;
}
main.sp_home .sp_home_bar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px !important;
  max-width: none !important;
  margin: 0 0 16px !important;
  padding: 16px 4px !important;
  border-bottom: 1px solid var(--sp-line) !important;
}
main.sp_home .sp_home_bar h1 {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 40px !important;
  font-weight: 700 !important;
  color: var(--sp-ink);
}
main.sp_home .catalog_search { margin: 0 !important; }
main.sp_home .catalog_search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
main.sp_home .catalog_search_field { display: block !important; }
main.sp_home .catalog_search_field input {
  inline-size: 320px;
  height: 40px;
  min-height: 40px !important;
  padding: 0 12px 0 36px !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 4px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23757575' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.8'/%3E%3Cpath d='m10.6 10.6 3.4 3.4'/%3E%3C/svg%3E") no-repeat 12px center / 16px 16px;
  box-shadow: none !important;
  font-size: 14px !important;
  color: var(--sp-ink);
}
main.sp_home .catalog_search_field input:focus { border-color: var(--sp-blue) !important; outline: 0; box-shadow: 0 0 0 3px rgb(0 85 255 / 15%) !important; }
main.sp_home [data-search-clear] { display: none !important; }
main.sp_home .catalog_count { margin: 0 !important; font-size: 14px !important; color: var(--sp-muted) !important; }
main.sp_home .catalog_privacy { margin: 0 0 0 auto !important; font-size: 13px !important; color: var(--sp-muted) !important; }
main.sp_home .sp_cols { padding: 0 !important; }
main.sp_home .catalog_empty { grid-column: 1 / -1; }

/* ---------- narrower screens ---------- */
@media (max-width: 1130px) {
  .sp_cols { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .sp_quick { padding: 0 6px; font-size: 15px; }
}
@media (max-width: 900px) {
  .sp_nav { display: none !important; }
  .sp_cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  main.sp_home .catalog_privacy { margin-left: 0 !important; flex-basis: 100%; }
  main.sp_home .catalog_search_field input { inline-size: min(320px, calc(100vw - 64px)); }
}
@media (max-width: 480px) {
  .sp_cols { grid-template-columns: 1fr !important; }
}