/* ============================================================
   layout.css — 앱 셸 레이아웃(사이드바/헤더/탭바/콘텐츠) + 로그인
   ============================================================ */
.app { display: flex; height: 100vh; overflow: hidden; }

/* ---------------- 사이드바 ---------------- */
.sidebar {
  position: relative;                      /* 접힘 상태 [펼치기] 버튼(.sidebar__expand)의 배치 기준 */
  width: var(--sidebar-w); flex: none;
  background: var(--c-brand); color: var(--c-text-invert);
  display: flex; flex-direction: column; min-height: 0;
  transition: width .18s ease;
}
.sidebar__logo {
  height: var(--header-h); flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 0 var(--sp-5); background: var(--c-brand-darker);
}
.sidebar__logoicon { width: 18px; height: 18px; fill: #fff; }
.sidebar__logoimg { height: 18px; width: auto; }
/* 좌상단 [튜토리얼] — 로고 오른쪽 끝에 붙는다. 어두운 브랜드 배경 위라 반투명 흰색 계열. */
.sidebar__guide {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.10);
  color: #fff; font-size: var(--fs-12); font-weight: var(--fw-medium);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.sidebar__guide:hover { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.45); }
.sidebar__guide:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.sidebar__guide .icon { width: 14px; height: 14px; fill: currentColor; }
.sidebar__logotext { font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: 2px; }
.sidebar__company { padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid rgba(255,255,255,.10); }
.sidebar__companyname { font-size: var(--fs-16); font-weight: var(--fw-medium); color: var(--c-sidebar-company); margin-bottom: var(--sp-2); }
.term-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 9px var(--sp-3); border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-md);
  color: #fff; font-size: var(--fs-14); font-weight: var(--fw-medium); background: rgba(255,255,255,.04);
}
.term-btn:hover { background: rgba(255,255,255,.12); }
.term-btn .icon { fill: #cdddf2; }

.sidebar__body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-3); min-height: 0; }
.sidebar__secthead { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); padding: 0 var(--sp-1); }
.sidebar__secthead strong { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-14); color: #dbe6f5; }
.sidebar__secthead .icon { fill: #8fa9cf; }
/* padding:0 필수 — 버튼 기본 padding(1px 6px) 이 남으면 콘텐츠 박스가 아이콘(14px)보다 좁아져 화살표가 우측으로 3px 밀린다 */
.sidebar__collapse { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; }
.sidebar__collapse:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.sidebar__collapse:disabled { opacity: .38; cursor: not-allowed; background: none; }
/* 굵은 화살표(icon-chev-*-bold)는 stroke 기반 — fill 로 칠하면 획이 사라진다.
   버튼은 grid+place-items:center, 아이콘 잉크는 viewBox 정중앙이라 시각적으로도 가운데다. */
.sidebar__collapse .icon { fill: none; stroke: #cdddf2; stroke-width: 3; }
/* 접힘 상태에서만 보이는 [펼치기] — 라이브(.btn-side.open)와 같이 로고 자리 좌상단 고정.
   접기 버튼과 같은 룩으로 통일하고, 아이콘만 반대 방향(chev-right)이다. */
.sidebar__expand {
  display: none; position: absolute; left: 18px; top: 15px; z-index: 2;
  width: 24px; height: 24px; padding: 0; place-items: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: 4px;
}
.sidebar__expand:hover { background: rgba(255,255,255,.14); }
.sidebar__expand .icon { fill: none; stroke: #cdddf2; stroke-width: 3; }
.sidebar__fav-edit { width: 100%; padding: 9px; border-radius: var(--r-md); background: var(--c-primary); color: #fff; font-weight: var(--fw-medium); }
.sidebar__fav-edit:hover { background: #2a5be0; }
.sidebar__soon { padding: var(--sp-6) var(--sp-2); color: #9fb6d6; font-size: var(--fs-13); text-align: center; }

/* 트리 */
.tree__block { margin-bottom: var(--sp-1); }
.tree__group { width: 100%; display: flex; align-items: center; gap: 6px; padding: 8px var(--sp-2) 8px 6px; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-primary-weak); }
.tree__gicon { width: 22px; height: 22px; flex: none; fill: var(--c-primary-weak); }
.tree__glabel { flex: 1; text-align: left; }
.tree__chev { width: 14px; height: 14px; flex: none; fill: var(--c-primary-weak); transition: transform .15s; transform: rotate(180deg); }  /* 열림=위(^) */
.tree__group.is-collapsed .tree__chev { transform: rotate(0deg); }  /* 닫힘=아래(v) */
.tree__items { padding-bottom: var(--sp-2); }
.tree__item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px var(--sp-4); min-height: 34px; font-size: var(--fs-14); font-weight: var(--fw-medium); color: #fff; border-radius: var(--r-sm); cursor: pointer; }
.tree__item:hover { background: rgba(255,255,255,.10); }
.tree__item.is-active { background: var(--c-primary); color: #fff; font-weight: var(--fw-medium); }
/* 메뉴 명칭은 잘리지 않게 — 줄바꿈 허용(한국어는 띄어쓰기 단위), ellipsis 제거 */
.tree__label { flex: 1; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; line-height: 1.3; }
.tree__item.is-soon .tree__label { color: #a9bbd6; }
.tree__soon { flex: none; align-self: center; white-space: nowrap; font-size: 11px; font-weight: var(--fw-medium); color: #c7d4e8; background: rgba(255,255,255,.10); border-radius: 10px; padding: 1px 6px; letter-spacing: -.03em; }
/* 데모 미제공(은행 직접연동 등) — 선택 불가 */
.tree__item.is-na { cursor: not-allowed; }
.tree__item.is-na:hover { background: transparent; }
.tree__item.is-na .tree__label { color: #6f80a3; }
.tree__na { flex: none; align-self: center; white-space: nowrap; font-size: 11px; font-weight: var(--fw-medium); color: #93a2c2; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; padding: 0 6px; letter-spacing: -.03em; }

/* 접힘 상태 */
.app.is-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
.app.is-collapsed .sidebar__company,
.app.is-collapsed .sidebar__body { display: none; }
.app.is-collapsed .sidebar__logotext { display: none; }
/* 라이브 실측: 접히면 로고·부가버튼은 감추고 좌상단 [펼치기] 버튼만 남는다.
   (가로 로고 이미지 124px 는 접힘 폭 60px 를 넘겨 헤더 위로 삐져나온다) */
.app.is-collapsed .sidebar__logoimg,
.app.is-collapsed .sidebar__guide { display: none; }
.app.is-collapsed .sidebar__expand { display: grid; }

/* ---------------- 메인 ---------------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.header {
  height: var(--header-h); flex: none; display: flex; align-items: center; gap: var(--sp-2);
  background: #fff; border-bottom: 1px solid var(--c-border-2); padding-right: var(--sp-4);
}
.header__left { display: flex; align-items: center; padding-left: var(--sp-2); }
.header__icbtn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--c-text-2); }
.header__icbtn:hover:not(:disabled) { background: var(--c-bg-soft); }
/* 투어 중 접기 잠금 — 표시가 없으면 "눌러도 안 닫힌다"로 읽힌다(2026-08 팀 피드백) */
.header__icbtn:disabled { opacity: .38; cursor: not-allowed; background: none; }

.gnb { flex: 1; display: flex; align-items: stretch; gap: 2px; overflow-x: auto; height: 100%; }
/* 패딩 6px — 대메뉴 15개(B2B 수발주·전자계약 추가분)가 투어 중 레일로 사이드바가
   292px 로 넓어진 상태에서도 잘리지 않고 한 줄에 들어가는 값 */
.gnb__item { padding: 0 6px; font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-text-3); white-space: nowrap; border-bottom: 2px solid transparent; height: 100%; }
.gnb__item:hover { color: var(--c-brand); }
.gnb__item.is-active { color: var(--c-brand); border-bottom-color: var(--c-brand); }

.header__utils { display: flex; align-items: center; gap: 14px; flex: none; }   /* 14px = Figma 시안 1:171 실측값(토큰 스케일 8/12/16 사이라 매칭 토큰 없음) */
.header__util { display: flex; align-items: center; position: relative; color: var(--c-text-2); cursor: pointer; }
.header__util:hover { color: var(--c-brand); }
/* GNB 우측 아이콘(햄버거/도움말/알림/조직도/부가서비스/내정보/더보기) — viewBox 정규화 + 통일 크기로 크기 균형
   (2026-08-12 라이브 리뉴얼 실측: upharos.com 우상단 유틸 아이콘 재구성) */
.header__util > .icon { width: 17px; height: 17px; }
/* 알림 미확인 표시 — 실측 라이브 클래스명 is-active(#ma01100_alarmIcon.is-active) 그대로 사용 */
.header__util.is-active::after { content: ''; position: absolute; top: -1px; right: -1px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-error); border: 1px solid #fff; }
.header__pill { font-size: var(--fs-12); padding: 4px 10px; border: 1px solid var(--c-border); border-radius: var(--r-pill); color: var(--c-primary); }
.header__talk { position: relative; font-size: var(--fs-13); padding: 4px 8px; border-radius: var(--r-pill); background: #fff4e0; color: #d9821a; font-weight: var(--fw-medium); }
.header__dot { position: absolute; top: 0; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-error); }

/* [더보기] 팝오버 — 소통함/1:1 문의(2026-08-12부터 더보기 안으로 접힘). lit-poplist(109) 와 동일 패턴 */
.hdmore-poplist { display: flex; flex-direction: column; min-width: 140px; padding: 6px; }
.hdmore-popitem { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 5px; background: none; font-size: var(--fs-13); color: #333; cursor: pointer; text-align: left; }
.hdmore-popitem:hover { background: var(--c-bg-soft); color: var(--c-primary); }
.hdmore-popitem__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-error); flex: none; }

/* ---------------- workspace ---------------- */
.workspace { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--c-bg-soft); }
.workspace--white { background: #fff; }  /* 폼/조회 화면(회사정보 등): 실서비스 흰색 패널 */
/* 탭바: 상단 라운드 탭(실서비스 정합) — 비활성 회색 #e0e0e0/#888, 활성 파랑 #376cfb/흰글자 */
.tabbar__row { flex: none; display: flex; align-items: flex-end; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--c-border-2); padding: 5px var(--sp-3) 0; }
/* 탭이 늘어나면 탭 영역만 늘어나고(남는 폭 차지 + 가로 스크롤), [모두닫기]는 원래 크기를
   지킨다. flex 기본값(1 1 auto)이면 버튼이 같이 줄어 81px → 66px 로 눌려 보였다. */
.tabbar__tabs { flex: 1; min-width: 0; display: flex; align-items: flex-end; overflow-x: auto; gap: 3px; }
.tabbar { display: flex; align-items: flex-end; gap: 3px; }  /* 가로 1열, 하단 정렬 */
/* 실서비스 탭(wijmo): 비활성=회색#e0e0e0·25px, 활성=흰배경+회색글자(#888)·30px(솟음), 폰트 14px.
   선택탭 구분 = 하단 2.5px 파란 액센트바(#0085c7) + 닫기버튼 회색(#c9c9c9) 배경 */
.tab { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 16px; height: 25px; font-size: var(--fs-14); font-weight: var(--fw-medium); color: #888; background: #e0e0e0; border-radius: 8px 8px 0 0; white-space: nowrap; cursor: pointer; }
.tab:hover { background: #d8d8d8; }
.tab.is-active, .tab.is-active:hover { color: #888; background: #fff; height: 30px; }
.tab.is-active::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2.5px; background: #0085c7; }
.tab__close { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; flex: none; }
.tab__close .icon { fill: currentColor; opacity: .55; width: 11px; height: 11px; }
.tab__close:hover { background: rgba(0, 0, 0, .10); }
.tab__close:hover .icon { opacity: 1; }
.tab.is-active .tab__close { background: #c9c9c9; }
.tab.is-active .tab__close .icon { opacity: .8; fill: #fff; }
.tab.is-active .tab__close:hover { background: #b3b3b3; }
.tabbar__closeall { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; height: 28px; margin-bottom: 4px; font-size: var(--fs-12); color: #888; padding: 0 10px; border: 1px solid var(--c-bg-cool); border-radius: var(--r-sm); background: #fff; }
.tabbar__closeall:hover { background: var(--c-bg-soft); }
.tabbar__closeall .icon { fill: var(--c-text-3); }

/* 경로줄 = 경로 텍스트(.breadcrumb__path) + 그 우측 슬롯(.breadcrumb__slot).
   슬롯에는 [이 화면 안내] 버튼이 들어가고, 탭이 바뀌어도 지워지지 않는다(js/20-shell.js). */
.breadcrumb { flex: none; display: flex; align-items: center; gap: 10px; padding: var(--sp-3) var(--sp-5) 0; font-size: var(--fs-13); color: var(--c-text-3); }
.breadcrumb__path { display: flex; align-items: center; gap: 4px; min-width: 0; }
.breadcrumb__slot { display: flex; align-items: center; }   /* 비면 gap 만 남아 경로 위치는 그대로 */
.breadcrumb__sep { fill: var(--c-text-3); width: 12px; height: 12px; }
.breadcrumb__item.is-last { color: var(--c-text); font-weight: var(--fw-medium); }

.content { flex: 1; overflow: auto; padding: var(--sp-4) var(--sp-5) var(--sp-8); }
/* 라이브 페이지 캔버스(.bs-02) = min-width 1600px 고정 → 창이 좁으면 좌우 스크롤.
   라이브 실측(2026-08-18): 뷰포트 1800에서 모든 화면의 툴바 폭이 정확히 1600px 이었다.
   (데모는 유동폭 1512라 우측정렬 툴바 x좌표가 라이브보다 88px 씩 왼쪽으로 밀려 있었음) */
.content > * { min-width: 1600px; }

/* 전역: 콘텐츠 높이를 100% 채우는 뷰 — 내부 목록/조직도 박스가 하단까지 차도록(실서비스 동일).
   셸 chrome가 모든 화면 동일하므로 화면별 오프셋 없이 flex로 자동 분배.
   적용된 뷰 안에서 박스에 flex:1; min-height:0; (overflow:auto) 를 주면 남는 높이를 채움. */
.fillview { height: 100%; display: flex; flex-direction: column; min-height: 0; }

/* ---------------- 로그인 ---------------- */
.login {
  min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6);
  background: linear-gradient(135deg, #e8eefc 0%, #dbe6fb 45%, #cdd9f7 100%);
}
.login__shell { width: 880px; max-width: 96vw; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 360px; }
.login__left { padding: var(--sp-8); border-right: 1px solid var(--c-border-2); }
.login__brand { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-5); }
.login__brand .icon { width: 22px; height: 22px; fill: var(--c-brand); }
.login__brandimg { height: 28px; width: auto; }
.login__brandtext { font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: 2px; color: var(--c-brand); }
.login__event { background: linear-gradient(120deg,#2d50d6,#5a7cf0); color: #fff; border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); }
.login__event b { font-size: var(--fs-18); }
.login__event span { display:block; font-size: var(--fs-12); opacity:.85; margin-top:4px; }
.login__event--demo { background: linear-gradient(120deg,#003779,#2d50d6); }
.login__event--demo b { display:inline-flex; align-items:center; gap:7px; }
.login__event--demo b::before { content:'DEMO'; font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing:.5px; padding:2px 7px; border-radius: var(--r-sm); background: rgba(255,255,255,.22); }
.login__news { border-top: 1px solid var(--c-border-2); padding-top: var(--sp-3); }
.login__newsitem { display: flex; justify-content: space-between; padding: 7px 0; font-size: var(--fs-13); color: var(--c-text-2); border-bottom: 1px dashed var(--c-border-2); }
.login__guides { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.login__guide { flex: 1; text-align: center; padding: 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-13); color: var(--c-text-2); }
.login__guide:hover { border-color: var(--c-primary); color: var(--c-primary); }
.login__copy { margin-top: var(--sp-5); font-size: var(--fs-12); color: var(--c-text-3); }
.login__right { padding: var(--sp-8) var(--sp-6); display: flex; flex-direction: column; justify-content: center; }
.login__title { font-size: 32px; font-weight: var(--fw-medium); letter-spacing: normal; color: var(--c-brand); margin-bottom: var(--sp-5); }
.login__field { margin-bottom: var(--sp-3); }
.login__field .input { height: 42px; border-radius: var(--r-md); }
.login__row { display: flex; align-items: center; gap: 6px; margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-13); color: var(--c-text-2); }
.login__submit { width: 100%; height: 50px; border-radius: var(--r-lg); background: var(--c-brand); color: #fff; font-size: var(--fs-18); font-weight: var(--fw-bold); }
.login__submit:hover { background: var(--c-brand-dark); }
.login__links { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); font-size: var(--fs-13); color: var(--c-text-2); }
.login__links span { cursor: pointer; }
.login__links span:hover { color: var(--c-primary); }

/* ---- 데모 진입 패널 (우측) ---- */
.login__right--demo { align-items: flex-start; }
.login__demobadge {
  display: inline-block; padding: 4px 12px; margin-bottom: var(--sp-4);
  font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: 1px;
  color: var(--c-brand); background: var(--c-primary-bg); border-radius: var(--r-pill);
}
.login__right--demo .login__title { margin-bottom: var(--sp-3); }
.login__demodesc { font-size: var(--fs-14); line-height: 1.7; color: var(--c-text-2); margin-bottom: var(--sp-6); }
.login__right--demo .login__submit { margin-top: var(--sp-1); }
.login__demonote { margin-top: var(--sp-4); font-size: var(--fs-12); line-height: 1.6; color: var(--c-text-3); }
/* 전자계약 — GNB 클릭 즉시 진입하므로 그룹 헤더는 접힘 토글이 아니라 고정 라벨 */
.tree__group.is-static { cursor: default; pointer-events: none; }
.tree__group.is-static .tree__chev { display: none; }