* { margin: 0; padding: 0; box-sizing: border-box; }
/* 0417-09 OSB·헤더가려짐: scrollIntoView({block:'center'})가 documentElement를 프로그램적으로 스크롤시켜 타이틀·메뉴행을 뷰포트 밖으로 밀어내는 사고 차단. body overflow:hidden은 사용자 휠은 막지만 프로그램 스크롤은 못 막으므로 html에도 동일 가드 필요. */
html { height: 100%; overflow: hidden; }
body { font-family: var(--yoromis-font); font-size: var(--yoromis-font-size); color: var(--yoromis-text-primary); background: var(--yoromis-app-bg); overflow: hidden; }
/* VPF01: 레이아웃 변수는 client SSOT(viewport_sync.js). 100vw/100vh 캡 제거로 스크롤바 갭 제거 */
.yoromis-app {
  display: flex;
  flex-direction: column;
  width: var(--yoromis-vw-px, 100%);
  height: var(--yoromis-vh-px, 100%);
  padding: var(--yoromis-app-margin, 0);
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  background: var(--yoromis-app-bg);
}
.yoromis-titlebar { height: var(--yoromis-titlebar-height); background: var(--yoromis-titlebar-bg); display: flex; align-items: center; padding: 0 var(--yoromis-spacing-md); }
.yoromis-app-title { font-weight: 600; color: var(--yoromis-titlebar-text); }
.yoromis-menubar { height: var(--yoromis-menubar-height); background: var(--yoromis-menubar-bg); border-bottom: var(--yoromis-border-width) solid var(--yoromis-menubar-border); display: flex; align-items: center; padding: 0 var(--yoromis-spacing-sm); }
.yoromis-menu { display: flex; align-items: center; height: 100%; }
.yoromis-menu-item { padding: var(--yoromis-spacing-xs) var(--yoromis-spacing-md); color: var(--yoromis-menu-text); cursor: pointer; font-size: var(--yoromis-font-size); }
.yoromis-menu-item:hover { background: var(--yoromis-menu-hover-bg); }
.yoromis-main {
  flex: 1;
  display: flex;
  overflow-x: hidden; /* 기본: 3열까지 한 화면에 유지 */
  overflow-y: hidden;
  padding: var(--yoromis-main-padding, 0);
  gap: 0; /* VPF03b: 컬럼 사이 간격은 resizer 단독. flex gap=0 강제 */
  background: var(--yoromis-app-bg);
}
.resizer { flex: 0 0 6px; width: 6px; background: var(--yoromis-border); cursor: col-resize; transition: background 0.15s; position: relative; z-index: 6; }
.resizer::before { content: ''; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px; cursor: col-resize; }
.resizer:hover { background: var(--yoromis-primary); }
.resizer-toggle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 7; width: 22px; height: 44px; padding: 0;
  border: 1px solid #7eb6d9; border-radius: 6px;
  background: #d7eaf6; color: #1a5276;
  cursor: pointer; font-size: 16px; line-height: 1; box-shadow: 0 1px 4px rgb(15 23 42 / 14%);
}
.resizer-toggle:hover { background: #9fd0ea; color: #0b3d5c; }
.yoromis-col-user-collapsed {
  flex: 0 0 0 !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important;
  overflow: hidden !important; padding: 0 !important; border-width: 0 !important;
}
.yoromis-col { display: flex; flex-direction: column; background: var(--yoromis-bg-main); border-radius: var(--yoromis-col-radius); box-shadow: var(--yoromis-col-shadow); border: var(--yoromis-border-width) solid var(--yoromis-border); overflow: hidden; }
/* 반응형 레이아웃 (래퍼 전략: CSS 변수 기반, T_CONFIG_ENVIRONMENT 연동) */
/* 81ㅐ: 열폭 조절 범위 ±50% 확대 (min 50%, max 150%) */
.yoromis-col-1 { flex: var(--yoromis-col1-flex, 1 1 200px); min-width: var(--yoromis-col1-min-width, 12px); max-width: var(--yoromis-col1-max-width, calc(var(--yoromis-vw-px, 100%) - 0px)); }
.yoromis-col-2 { flex: var(--yoromis-col2-flex, 1.5 1 280px); min-width: var(--yoromis-col2-min-width, 12px); max-width: var(--yoromis-col2-max-width, calc(var(--yoromis-vw-px, 100%) - 0px)); }
.yoromis-col-3 { flex: var(--yoromis-col3-flex, 2 1 300px); min-width: var(--yoromis-col3-min-width, 12px); }
/* 2역 자동 숨김 (ColumnWindow 래퍼) */
.yoromis-col-hidden { display: none !important; flex: 0 0 0px !important; min-width: 0 !important; max-width: 0 !important; overflow: hidden !important; width: 0 !important; padding: 0 !important; border: none !important; }

/* 모바일 대응 (450px 이하) - 세로형 아코디언 (1열 상단, 2열 중단, 3열 하단) */
@media (max-width: 450px) {
  .yoromis-main {
    flex-direction: column;  /* 세로 레이아웃 */
    overflow-y: auto;
    padding: 4px;
    gap: 4px;
  }
  .yoromis-col-1, .yoromis-col-2, .yoromis-col-3 { 
    flex: 0 0 auto;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    transition: height 0.2s, flex 0.2s;
  }
  /* 펼친 열: 적당한 높이 */
  .yoromis-col:not(.collapsed) {
    flex: 1 1 auto;
    min-height: 120px;
  }
  /* 접힌 열: 헤더만 표시 */
  .yoromis-col.collapsed { 
    flex: 0 0 var(--yoromis-col-header-height, 32px);
    min-height: var(--yoromis-col-header-height, 32px);
    max-height: var(--yoromis-col-header-height, 32px);
  }
  .yoromis-col.collapsed .yoromis-col-body { display: none; }
  .resizer { display: none; }
}
.yoromis-col-header {
  height: var(--yoromis-col-header-height, 32px);
  background: var(--yoromis-bg-secondary);
  border-bottom: var(--yoromis-border-width) solid var(--yoromis-border);
  display: flex;
  align-items: center;
  padding: 0 var(--yoromis-spacing-md, 8px);
  font-weight: 600;
  font-size: var(--yoromis-font-small, 11px);
  color: var(--yoromis-text-secondary);
  overflow: hidden; /* 90ㅐ: 헤더 텍스트가 리스트를 덮지 않도록 */
  position: relative;
}
.yoromis-col-header-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yoromis-col-3 .yoromis-col-header-title {
  font-size: var(--yoromis-font-size, 14px);
  font-weight: 700;
  color: var(--yoromis-text-primary, #1a3a5c);
}

/* 76ㅎ: 1/2/3열 헤더 버튼 간격 공통(공모래 토큰) */
.yoromis-col-header-right {
  display: flex;
  align-items: center;
  gap: var(--yoromis-col-header-btn-gap);
}
.yoromis-col-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--yoromis-spacing-sm);
  scrollbar-width: none;
}
/* 0715 MSG7081 03번: linked A-B — 참고자료(B) max-height:30vh 해제 → 창하단(4)과 본딩(flex채움).
   독립 가변높이(업화면형) 폐기. 스크롤=내부 cell OSB만. */
.yoromis-col-3 .yoromis-detail-notes-wrap {
  /* 0612-16ㄴ: 참고자료=비스크롤 고정 박스(라벨·버튼행 고정), 스크롤은 내부 cell 단일 OSB가 전담.
     기존 overflow-y:auto가 cell 스크롤과 중첩되어 thumb가 여러 개 출력되던 문제 제거. */
  max-height: 30vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.yoromis-col-3 .yoromis-col-body {
  display: flex;
  flex-direction: column;
}
/* linked 시 창하단(4)↔참고자료(3) 밀착 — col-body 하단 패딩 제거 */
.yoromis-col-3 .yoromis-col-body:has(> .yoromis-detail-panel[data-yoromis-linked-vertical-resize="1"]) {
  padding-bottom: 0;
}
.yoromis-col-3 .yoromis-col-body > .yoromis-detail-panel[data-yoromis-linked-vertical-resize="1"] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.yoromis-col-3 .yoromis-detail-panel[data-yoromis-linked-vertical-resize="1"] > .yoromis-detail-sections {
  flex: 0 0 auto;
  min-height: 0;
}
.yoromis-col-3 .yoromis-detail-panel[data-yoromis-linked-vertical-resize="1"] > .yoromis-detail-notes-wrap {
  max-height: none !important;
  flex: 1 1 auto !important;
  min-height: 60px;
  height: auto !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
}
/* 0715 MSG7081 03번: 1선(A하단)+2선(A/B본딩바) → 단일선. A border-bottom 제거, bar가 경계 전담. */
.yoromis-col-3 .yoromis-detail-panel[data-yoromis-linked-vertical-resize="1"] .yoromis-dual-col-inner-scroll,
.yoromis-col-3 .yoromis-detail-panel[data-yoromis-linked-vertical-resize="1"] .yoromis-linked-ab-dual {
  border-bottom: none !important;
}
.yoromis-col-3 .yoromis-detail-panel[data-yoromis-linked-vertical-resize="1"] .yoromis-notes-bottom-grip,
.yoromis-col-3 .yoromis-detail-panel[data-yoromis-linked-vertical-resize="1"] .yoromis-notes-vresizer {
  display: none !important;
}
.yoromis-col-3 .yoromis-detail-notes-wrap > .yoromis-detail-notes {
  /* 단일 스크롤러: 가용높이를 채우고 넘치면 자동숨김 OSB(.yoromis-auto-scrollbar)로만 스크롤 */
  flex: 1 1 auto;
  min-height: 0;
}
.yoromis-col-3 .yoromis-col-body .yoromis-tabbed-tabbar {
  /* !important: tabbed_section.js가 인라인 position:relative를 설정하므로
     스타일시트로 덮으려면 !important 필요 (sticky 고정 핵심) */
  position: sticky !important;
  top: 0;
  /* 7457-A04 P6: lane-hdr(z-index:5)와 동급이면 A박스 헤더가 탭바를 덮음 → 탭바 우선 */
  z-index: 20;
  flex-shrink: 0;
  isolation: isolate;
  background: var(--yoromis-bg-main, #fff);
}
.yoromis-col-body::-webkit-scrollbar {
  display: none;
}
.yoromis-statusbar { height: var(--yoromis-statusbar-height); background: var(--yoromis-statusbar-bg); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--yoromis-spacing-md); font-size: var(--yoromis-font-small); color: var(--yoromis-statusbar-text); }
.yoromis-status-item { padding: 0 var(--yoromis-spacing-sm); }
.yoromis-empty, .yoromis-loading, .yoromis-error { padding: var(--yoromis-spacing-md); color: var(--yoromis-text-secondary); text-align: center; }
.yoromis-error { color: var(--yoromis-error-text); }