/* TopMenu — 2단 탑메뉴
 *
 * 값은 앱 크롬(app.css)과 같다. 두 화면이 한 제품으로 읽혀야 한다.
 * 입체감은 층 구조에서 나온다: 진한 판 위에 밝은 판, 그 경계에 2px 밝은 선.
 */

.tp{
  --tp-bar1:#0d2b6b; --tp-bar2:#1857a4; --tp-cursor:#1857a4;
  --tp-ink:#ffffff; --tp-dot:#e7390b;
  position:relative;z-index:60;flex:none;
  color:var(--tp-ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",Roboto,sans-serif;
  box-shadow:0 1px 2px rgba(16,32,48,.12),0 4px 12px rgba(16,32,48,.08);
}
.tp *{box-sizing:border-box}

/* 역할별 색 — 관리자는 자주, 사용자는 초록. 화면 주인이 누구인지 색이 먼저 말한다. */
.tp.chrome-admin{--tp-bar1:#4a0e3a; --tp-bar2:#b415b4; --tp-cursor:#b415b4}
.tp.chrome-user {--tp-bar1:#093425; --tp-bar2:#0e7c6e; --tp-cursor:#0e7c6e}
@media (prefers-color-scheme:dark){
  .tp.chrome-anon {--tp-bar1:#0a2050}
  .tp.chrome-admin{--tp-bar1:#380a2c}
  .tp.chrome-user {--tp-bar1:#062b1b}
}

/* ── 1단 ─────────────────────────────────────────────────── */
.tp-bar1{
  display:flex;align-items:center;gap:14px;height:54px;padding:0 18px;
  /* 위가 밝고 아래가 어두운 얕은 기울기. 판이 앞으로 굽어 보인다. */
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--tp-bar1) 90%,#fff) 0%,
    var(--tp-bar1) 60%,
    color-mix(in srgb,var(--tp-bar1) 93%,#000) 100%);
}
.tp-brand{
  flex:none;display:flex;align-items:center;gap:2px;
  color:inherit;text-decoration:none;
  font-size:19px;font-weight:800;letter-spacing:-.02em}
.tp-brand img{height:19px;width:auto;display:block}
.tp-path{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;
  padding:3px 10px;border-radius:5px;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  max-width:44ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.tp-spacer{flex:1}
.tp-util{display:flex;align-items:center;gap:10px;flex:none}
.tp-chip{
  background:rgba(255,255,255,.22);border-radius:11px;padding:3px 10px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.tp-who{font-size:13px;opacity:.9;white-space:nowrap}
.tp-btn{
  font:inherit;font-size:12.5px;font-weight:700;color:#fff;text-decoration:none;
  padding:7px 14px;border:0;border-radius:7px;cursor:pointer;white-space:nowrap;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.2)}
.tp-btn:hover{background:rgba(255,255,255,.26)}
/* 납작한 내비 항목 — 오른쪽 위에 여러 개 늘어설 때. 단추처럼 보이면 시끄럽다. */
.tp-btn.is-ghost{background:none;box-shadow:none;font-weight:600;opacity:.92;padding:7px 10px}
.tp-btn.is-ghost:hover{background:rgba(255,255,255,.18);opacity:1}
.tp-btn.is-danger{background:var(--tp-dot)}
.tp-btn.is-danger:hover{filter:brightness(1.1)}

/* ── 2단 ─────────────────────────────────────────────────── */
.tp-bar2{
  display:flex;align-items:stretch;padding:0 10px;
  background:var(--tp-bar2);
  /* 탑메뉴의 그 선. 두 판을 갈라 위 판을 띄운다. */
  border-top:2px solid rgba(255,255,255,.35);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.16)}
.tp-items{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.tp-items::-webkit-scrollbar{display:none}

.tp-menu{position:relative;display:flex;border-right:1px solid rgba(255,255,255,.25)}
.tp-menu:last-child{border-right:0}
.tp-tab{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  background:none;border:0;border-bottom:4px solid transparent;
  color:var(--tp-ink);font:inherit;font-weight:700;font-size:13.5px;
  padding:10px 18px;cursor:pointer;opacity:.92}
.tp-tab:hover{opacity:1;background:rgba(255,255,255,.12)}
.tp-tab:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.tp-mi{flex:none;width:17px;text-align:center}
.tp-caret{font-size:9px;opacity:.65;transition:transform .12s}

/* 현재 화면 — 반전 탭. 흰 바탕 + 배너색 글자가 대비에서 압도적이다. */
.tp-tab.is-cur{
  opacity:1;font-weight:800;background:#fff;color:var(--tp-bar1);
  border-radius:8px 8px 0 0;border-bottom-color:var(--tp-cursor)}
.tp-tab.is-cur:hover{background:#fff}
.tp-tab.is-cur .tp-caret{opacity:.6}

/* 펼치면 드롭다운과 같은 색이 되어 한 덩어리로 붙는다 */
.tp-menu.is-open > .tp-tab,
.tp-menu.is-open > .tp-tab.is-cur{
  opacity:1;background:var(--tp-bar1);color:#fff;border-radius:8px 8px 0 0;
  border-bottom-color:transparent}
.tp-menu.is-open .tp-caret{transform:rotate(180deg);opacity:1}

/* fixed 다. .tp-items 가 가로 스크롤 컨테이너라 absolute 로 두면
   바 높이 밖이 잘려 드롭다운이 통째로 보이지 않는다. 자리는 JS 가 잡는다. */
.tp-drop{
  display:none;position:fixed;min-width:250px;z-index:70;
  background:var(--tp-bar1);
  border:1px solid rgba(255,255,255,.18);border-top:0;border-radius:0 10px 10px 10px;
  box-shadow:0 14px 32px rgba(0,0,0,.34),0 2px 6px rgba(0,0,0,.2);
  padding:6px}
.tp-menu.is-open .tp-drop{display:block;animation:tp-in .12s ease-out}
@keyframes tp-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tp-di{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;color:#fff;font:inherit;font-weight:700;font-size:13.5px;
  padding:9px 11px;border-radius:7px;cursor:pointer;text-decoration:none}
.tp-di:hover{background:rgba(255,255,255,.16)}
.tp-di:focus-visible{outline:2px solid #fff;outline-offset:-2px}

@media (prefers-reduced-motion:reduce){
  .tp-menu.is-open .tp-drop{animation:none}
  .tp-caret{transition:none}
}
@media (max-width:700px){
  .tp-path,.tp-who{display:none}
  .tp-bar1{gap:10px;padding:0 12px}
  .tp-tab{padding:10px 13px}
}