/* Page stylesheets may style bare elements (the catalog styles every
   button); the id selectors keep the shared menu identical everywhere.
   Shared top menu (js/ui/site-nav.js): same links and account area on every
   page; each page keeps its own title and page-specific controls. */
.site-nav { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; justify-content: flex-end; font-size: 12px; }
.site-nav-links { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
#siteNav .site-nav-link, #siteNav .site-nav-btn {
  display: inline-block; padding: 5px 10px; border-radius: 999px; border: 1px solid #2c3850;
  background: transparent; color: #c7d0e0; font: inherit; font-size: 12px; text-decoration: none; cursor: pointer; white-space: nowrap;
}
#siteNav .site-nav-link:hover, #siteNav .site-nav-btn:hover { border-color: #4ea3ff; color: #e6edf7; }
#siteNav .site-nav-link[aria-current="page"] { border-color: #4ea3ff; background: rgba(78, 163, 255, 0.16); color: #e6edf7; font-weight: 600; }
.site-nav-account { position: relative; padding-left: 10px; border-left: 1px solid #2c3850; }
.site-nav-account > summary { list-style: none; }
.site-nav-account > summary::-webkit-details-marker { display: none; }
.site-nav-account > summary::after { content: " ▾"; font-size: 10px; }
.site-nav-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 500; min-width: 200px;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px;
  border: 1px solid #2c3850; border-radius: 8px; background: #121826; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
#siteNav .site-nav-menu .site-nav-btn { border-radius: 6px; text-align: left; }
.site-nav-user { padding: 2px 4px 6px; border-bottom: 1px solid #2c3850; color: #8a96ad; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .site-nav { justify-content: flex-start; }
  .site-nav-account { padding-left: 0; border-left: none; }
  .site-nav-menu { left: 0; right: auto; }
}
#siteNav { white-space: normal; }
/* Report #35: below 900 px the page links open from the "메뉴" button as one
   full-width list, so every link is reachable on a phone. */
#siteNav .site-nav-toggle { display: none; }
#siteNav .site-nav-toggle::after { content: " ▾"; font-size: 10px; }
@media (max-width: 900px) {
  #siteNav { position: relative; justify-content: space-between; }
  #siteNav .site-nav-toggle { display: inline-block; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
  #siteNav .site-nav-links { display: none; }
  #siteNav.is-open .site-nav-links {
    display: flex; flex-direction: column; flex-wrap: nowrap; position: absolute; left: 0; right: 0; top: calc(100% + 6px);
    z-index: 500; padding: 8px; gap: 4px; border: 1px solid #2c3850; border-radius: 8px; background: #121826;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); max-height: 70vh; overflow-y: auto;
  }
  #siteNav.is-open .site-nav-link { display: block; border-radius: 6px; }
}
/* Inside the fixed-height app topbar keep titles on one line and let the
   status area shrink before the menu wraps. */
.topbar { gap: 16px; }
.topbar .brand h1 { white-space: nowrap; }
.topbar .status-item label { white-space: nowrap; }
/* Chips and buttons keep their text on one line; when the admin menu does
   not fit beside them the menu moves to a second row instead of squeezing
   them (#33). */
.topbar { flex-wrap: wrap; row-gap: 6px; }
.topbar .spec-chip, .topbar .status .logout-btn { white-space: nowrap; flex-shrink: 0; }
@media (min-width: 901px) {
  .topbar { padding-block: 6px; }
  .topbar .status { min-width: 0; flex-wrap: nowrap; }
  .topbar #siteNav { margin-left: auto; }
  .topbar #siteNav, .topbar .site-nav-links { flex-wrap: nowrap; }
}
/* Report #33: on phones the top bar wraps to the screen width (these rules
   used to override base.css's narrow layout and stretch the page to 815 px):
   brand chips wrap, and the page links become one sideways-scrolling strip. */
@media (max-width: 900px) {
  .topbar { gap: 6px 10px; }
  .topbar .brand { flex-wrap: wrap; row-gap: 4px; max-width: 100%; }
  .topbar .spec-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar #siteNav { flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; }
  .site-nav-menu { left: auto; right: 0; max-width: calc(100vw - 16px); }
}
/* Report #29: anything clickable shows the hand cursor on every page (the
   browser default for buttons is the arrow); disabled controls say so. */
button:not(:disabled), select:not(:disabled), summary, [role="tab"],
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { cursor: pointer; }
button:disabled, select:disabled { cursor: not-allowed; }
/* Report #28: the language picker sits before the account area; hidden while
   the site offers one language. */
.site-nav-account:not(details) { display: flex; align-items: center; gap: 8px; }
.site-nav-menu .site-nav-lang { display: flex; align-items: center; gap: 8px; padding: 6px 4px 0; border-top: 1px solid #2c3850; }
.site-nav-lang-label { color: #8a96ad; font-size: 11px; }
#siteNav .site-nav-menu .site-nav-lang-select { flex: 1; width: auto; }
/* Fixed width: a select is as wide as its longest option ("繁體中文(台灣) · 검수 전"),
   which pushed the staff menu onto a second row; the open list shows full names. */
#siteNav .site-nav-lang-select {
  width: 7.5em; text-overflow: ellipsis; padding: 4px 8px; border-radius: 999px; border: 1px solid #2c3850;
  background: #121826; color: #c7d0e0; font: inherit; font-size: 12px; cursor: pointer;
}
#siteNav .site-nav-lang-select:hover, #siteNav .site-nav-lang-select:focus-visible { border-color: #4ea3ff; color: #e6edf7; }