/* =========================================================================
   JNC Holdings — Navigation
   Requires colors_and_type.css + semantic-roles.css.
   인지·UX 근거:
   · 친숙성 우선(규칙 1.5 Jakob): 탭=상단 밑줄, 브레드크럼=경로, 레일=좌측 수직.
     사용자가 타 서비스에서 형성한 멘탈 모델을 차용해 학습비용을 낮춘다.
   · 활성/현재 위치는 색만이 아니라 형태(밑줄 2px·채움·굵기)로도 표시(규칙 1.7).
   · 선택지 수 절제(규칙 1.2 Hick): 1depth 탭/세그먼트는 소수로 유지.
   ========================================================================= */

/* =========================================================================
   TABS  —  .jtabs  (underline, Carbon/M3 anatomy)
   <div class="jtabs"><button class="jtab is-active">…</button>…</div>
   ========================================================================= */
.jtabs {
  display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--outline);
  overflow-x: auto; scrollbar-width: none;
}
.jtabs::-webkit-scrollbar { display: none; }
.jtab {
  position: relative; flex: none; border: 0; background: transparent; cursor: pointer;
  font: var(--w-semibold) var(--fs-body-sm)/1 var(--font-sans); color: var(--fg2);
  padding: 14px var(--sp-4); white-space: nowrap;
  border-bottom: var(--bw-heavy) solid transparent; margin-bottom: -1px;
  transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}
.jtab:hover { color: var(--fg1); background: var(--state-hover-surface); }
.jtab:active { background: var(--state-pressed-surface); }
.jtab:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r-xs) var(--r-xs) 0 0; }
.jtab.is-active, .jtab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.jtab:disabled, .jtab[aria-disabled="true"] { color: var(--state-disabled-content); cursor: not-allowed; }
.jtab .count {       /* trailing count pill */
  margin-left: var(--sp-2); font-size: 11px; font-weight: 700;
  background: var(--surface-sunken); color: var(--fg2); padding: 1px 7px; border-radius: var(--r-pill);
}
.jtab.is-active .count { background: var(--brand-soft); color: var(--brand-stronger); }
/* contained variant (filled pills, no underline) */
.jtabs.contained { border-bottom: 0; gap: var(--sp-2); }
.jtabs.contained .jtab { border: 1px solid var(--outline); border-radius: var(--r-sm); margin: 0; padding: 8px var(--sp-4); }
.jtabs.contained .jtab.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* =========================================================================
   SEGMENTED CONTROL  —  .jsegment  (2–4 mutually-exclusive options)
   인지: 옵션 소수(규칙 1.2). 선택 1개 보장은 라디오 시맨틱과 동일.
   ========================================================================= */
.jsegment {
  display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-sunken);
  border: 1px solid var(--outline); border-radius: var(--r-md);
}
.jseg {
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  font: var(--w-semibold) var(--fs-body-sm)/1 var(--font-sans); color: var(--fg2);
  padding: 7px 14px; border-radius: var(--r-sm); min-height: 30px;
  transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}
/* hover = 저강조 상태 레이어(배경 오버레이) — 색자만 변하는 hover는 지각 곤란(M3 states 정합, v1.4.1 교정) */
.jseg:hover { color: var(--fg1); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.jseg:active { background: color-mix(in srgb, var(--ink) 13%, transparent); }
.jseg:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.jseg[aria-pressed="true"], .jseg.is-active {
  background: var(--surface); color: var(--fg1); box-shadow: var(--sh-xs);
}
/* 선택된 세그먼트의 hover도 명시 — 브랜드 틴트로 '선택+조작 가능' 동시 전달 */
.jseg[aria-pressed="true"]:hover, .jseg.is-active:hover {
  background: var(--state-hover-brand); color: var(--brand-stronger);
}

/* =========================================================================
   BREADCRUMB  —  .jbreadcrumb  (path / location)
   ========================================================================= */
.jbreadcrumb { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-body-sm); color: var(--fg2); }
.jbreadcrumb a { color: var(--fg2); text-decoration: none; transition: color var(--transition-base); }
.jbreadcrumb a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; }
.jbreadcrumb .sep { color: var(--fg3); display: inline-flex; }
.jbreadcrumb .sep::before { content: "/"; }
.jbreadcrumb [aria-current="page"] { color: var(--fg1); font-weight: 600; }

/* =========================================================================
   PAGINATION  —  .jpagination
   ========================================================================= */
.jpagination { display: inline-flex; align-items: center; gap: 2px; }
.jpage {
  min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid transparent;
  background: transparent; color: var(--fg2); cursor: pointer; border-radius: var(--r-sm);
  font: var(--w-semibold) var(--fs-body-sm)/1 var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.jpage:hover { background: var(--state-hover-surface); color: var(--fg1); }
.jpage:active { background: var(--state-pressed-surface); }
.jpage:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.jpage[aria-current="page"] { background: var(--ink); color: var(--white); }
.jpage:disabled { color: var(--state-disabled-content); cursor: not-allowed; }
.jpage .ico svg { width: var(--icon-sm); height: var(--icon-sm); }
.jpagination .gap { color: var(--fg3); padding: 0 4px; }

/* =========================================================================
   MENU / DROPDOWN LIST  —  .jmenu  (floats on white card surface)
   <div class="jmenu" role="menu"><button class="jmenu-item">…</button></div>
   ========================================================================= */
.jmenu {
  min-width: 200px; padding: var(--sp-1); background: var(--surface-popover);
  border: 1px solid var(--outline); border-radius: var(--r-md);
  box-shadow: var(--elevation-overlay); z-index: var(--z-dropdown);
}
.jmenu-item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: 9px var(--sp-3); border: 0; background: transparent; cursor: pointer;
  font: var(--w-regular) var(--fs-body-sm)/1.3 var(--font-sans); color: var(--fg1);
  text-align: left; border-radius: var(--r-sm); white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
}
.jmenu-item .ico { color: var(--fg2); display: inline-flex; flex: none; }
.jmenu-item .ico svg { width: var(--icon-sm); height: var(--icon-sm); }
.jmenu-item:hover { background: var(--state-hover-surface); }
.jmenu-item:active { background: var(--state-pressed-surface); }
.jmenu-item:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.jmenu-item[aria-current="true"], .jmenu-item.is-selected { color: var(--brand-stronger); background: var(--state-hover-brand); }
.jmenu-item.danger { color: var(--error); }
.jmenu-item.danger:hover { background: var(--error-soft); }
.jmenu-item:disabled { color: var(--state-disabled-content); cursor: not-allowed; }
.jmenu-item .kbd { margin-left: auto; font-size: 11px; color: var(--fg3); font-family: ui-monospace, Menlo, monospace; }
.jmenu-sep { height: 1px; background: var(--outline); margin: var(--sp-1) 0; border: 0; }
.jmenu-label { padding: 6px var(--sp-3) 2px; font: var(--w-semibold) var(--fs-label)/1.2 var(--font-sans);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg3); }

/* =========================================================================
   SIDE-RAIL NAV ITEM  —  .jnav-item  (portal left rail / drawer)
   ========================================================================= */
.jnav { display: flex; flex-direction: column; gap: 2px; }
.jnav-item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: var(--touch-min); padding: 0 var(--sp-3); border: 0; cursor: pointer;
  background: transparent; color: var(--fg2); border-radius: var(--r-sm);
  font: var(--w-medium) var(--fs-body-sm)/1 var(--font-sans); text-align: left;
  text-decoration: none; position: relative;
  transition: background var(--transition-base), color var(--transition-base);
}
.jnav-item .ico { display: inline-flex; flex: none; color: currentColor; }
.jnav-item .ico svg { width: var(--icon-md); height: var(--icon-md); }
.jnav-item:hover { background: var(--state-hover-surface); color: var(--fg1); }
.jnav-item:active { background: var(--state-pressed-surface); }
.jnav-item:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.jnav-item.is-active, .jnav-item[aria-current="page"] {
  background: var(--state-selected-subtle); color: var(--on-state-selected-subtle); font-weight: 600;
}
.jnav-item.is-active::before {     /* active marker bar (form, not only color) */
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--brand); border-radius: var(--r-pill);
}
.jnav-item .badge { margin-left: auto; }

/* =========================================================================
   PROCESS STEPPER  —  .jstepper  (multi-step flows; 점진 공개, 규칙 1.2)
   ========================================================================= */
.jstepper { display: flex; align-items: flex-start; gap: 0; }
.jstep { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  flex: 1; position: relative; text-align: center; }
.jstep .dot {
  width: 28px; height: 28px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--surface); border: var(--bw-strong) solid var(--border-field);
  font: var(--w-bold) var(--fs-body-sm)/1 var(--font-num); color: var(--fg2);
  font-variant-numeric: tabular-nums; z-index: 1;
}
.jstep .label { font-size: var(--fs-label); color: var(--fg2); font-weight: 600; }
.jstep:not(:last-child)::after {    /* connector */
  content: ""; position: absolute; top: 14px; left: 50%; width: 100%; height: 2px;
  background: var(--border); z-index: 0;
}
.jstep.is-complete .dot { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.jstep.is-complete:not(:last-child)::after { background: var(--brand); }
.jstep.is-active .dot { border-color: var(--brand); color: var(--brand); box-shadow: var(--sh-focus); }
.jstep.is-active .label { color: var(--fg1); }

/* =========================================================================
   TOP APP BAR  —  .jtopbar  (web + portal sticky header shell)
   Carbon UI-shell header anatomy: brand · primary nav · trailing actions.
   친숙성(규칙 1.5): 상단 GNB는 사용자의 형성된 멘탈 모델. 반투명 + backdrop-blur 허용.
   ========================================================================= */
.jtopbar {
  display: flex; align-items: center; gap: var(--sp-4); height: var(--topbar-h);
  padding: 0 var(--sp-5); background: color-mix(in srgb, var(--surface) 86%, transparent);
  border-bottom: 1px solid var(--outline); backdrop-filter: saturate(1.1) blur(8px);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.jtopbar.solid { background: var(--surface); backdrop-filter: none; }
.jtopbar.inverse { background: var(--ink); border-bottom-color: rgba(255,255,255,0.08); }
.jtopbar.inverse, .jtopbar.inverse a, .jtopbar.inverse .jtopbar-link { color: var(--fg-oninverse); }
/* DARK-SURFACE hover/active rule — wash is translucent WHITE (not light stone) so the
   light text stays legible. 규칙: hover 배경은 표면에서 파생, 포어된 텍스트 대비 유지. */
.jtopbar.inverse .jtopbar-brand { color: #fff; }
.jtopbar.inverse .jtopbar-link:hover { background: rgba(255,255,255,0.12); color: #fff; }
.jtopbar.inverse .jtopbar-link:active { background: rgba(255,255,255,0.20); }
.jtopbar.inverse .jtopbar-link.is-active, .jtopbar.inverse .jtopbar-link[aria-current="page"] { color: #fff; }
.jtopbar.inverse .jicon-btn { color: var(--fg-oninverse); }
.jtopbar.inverse .jicon-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.jtopbar-brand { display: inline-flex; align-items: center; gap: var(--sp-2); font: var(--w-bold) var(--fs-h4)/1 var(--font-sans); color: var(--fg1); text-decoration: none; flex: none; }
.jtopbar-brand img, .jtopbar-brand svg { height: 28px; width: auto; display: block; }
.jtopbar-nav { display: flex; align-items: center; gap: 2px; }
.jtopbar-link {
  display: inline-flex; align-items: center; height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-sm);
  font: var(--w-medium) var(--fs-body-sm)/1 var(--font-sans); color: var(--fg2); text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base);
}
.jtopbar-link:hover { background: var(--state-hover-surface); color: var(--fg1); }
.jtopbar-link:active { background: var(--state-pressed-surface); }
.jtopbar-link.is-active, .jtopbar-link[aria-current="page"] { color: var(--fg1); font-weight: 600; }
.jtopbar-spacer { margin-left: auto; }
.jtopbar-actions { display: inline-flex; align-items: center; gap: var(--sp-1); }
/* chrome 맥락 아이콘 위계: 상단바 액션 아이콘버튼은 14px 내비 텍스트·브랜드와 조화되도록
   20px 글리프 + 36px 타깃으로 축소(데스크톱 chrome). 테이블 툴바와 동일 원리(규칙 1.6 위계). */
.jtopbar .jicon-btn { width: 36px; height: 36px; }
.jtopbar .jicon-btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.jtopbar .jsearch { max-width: 240px; width: auto; }
.jtopbar .jsearch .ico svg { width: var(--icon-sm); height: var(--icon-sm); }

/* APP-SHELL scaffold (rail + topbar + content) — layout helper */
.jshell { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; }
.jshell.collapsed { grid-template-columns: var(--rail-w-collapsed) 1fr; }
.jshell-rail { border-right: 1px solid var(--outline); background: var(--surface); padding: var(--sp-4) var(--sp-3); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.jshell-main { min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 820px) { .jshell { grid-template-columns: 1fr; } .jshell-rail { display: none; } }