/* H&abyz 서비스 이력 관리 - 공용 디자인 시스템 스타일시트
   모든 탭(VOC, VOC Manager, 설치이력, 출하이력, 재고이력)에서 동일하게 재사용.
   사용법: 새 탭 HTML의 <head> 안에 이 파일 전체를 <style> 태그로 붙여넣고,
   탭 고유 마크업/스크립트만 추가하면 됨. 아래 :root 토큰 값은 절대 임의 변경 금지.
*/
  :root{
    /* 표면 계층 (시안 A · 표면 정교화)
       - 팔레트를 전반적으로 한 단계 들어올려 장시간 응시 피로를 낮춘다
       - 캔버스(bg-1) ↔ 카드(bg-2) 명도차를 넓혀 카드 경계를 또렷하게 한다 */
    --bg-0:#0c0f16;   /* 페이지 최하단 (배너 바깥) */
    --bg-1:#12161f;   /* 본문 캔버스 */
    --bg-2:#1c2230;   /* 카드 */
    --bg-3:#262d3d;   /* 카드 안 표면 (표 헤더, 칩) */
    --bg-4:#313a4c;   /* 강조 표면 (호버) */
    --line:#3a4457; --line-soft:#262e3c;
    /* 카드 상단 inset 하이라이트로 부양감 부여 */
    --shadow-card:0 1px 0 rgba(255,255,255,.05) inset, 0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.24);
    --shadow-pop:0 16px 44px rgba(0,0,0,.5);
    --tx-1:#eef1f7; --tx-2:#aab3c6; --tx-3:#737b90;
    --accent:#29ADEE;
    --teal:var(--accent);              /* 하위호환 별칭 */
    --accent-dim:#1d5b78;
    --accent-ghost:rgba(41,173,238,.12);
    --amber:#f0a940; --amber-dim:#332507;
    --red:#ef5b5b; --red-dim:#331414;
    --green:#3ddc97; --green-dim:#0f2b21;
    --radius-lg:18px; --radius-md:12px; --radius-sm:8px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0; height:100%;}

  /* ── 스크롤바 (UI 톤에 맞춘 커스텀) ──
     Firefox */
  *{scrollbar-width:thin; scrollbar-color:var(--bg-4) transparent;}
  /* WebKit/Chromium */
  ::-webkit-scrollbar{width:10px; height:10px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{
    background:var(--bg-4); border-radius:8px;
    border:2px solid transparent; background-clip:padding-box;
  }
  ::-webkit-scrollbar-thumb:hover{background:var(--line);}
  ::-webkit-scrollbar-corner{background:transparent;}
  /* 세로 스크롤이 생길 수 있는 스크롤 영역에는 우측 여유공간을 둬서
     스크롤바가 콘텐츠를 가리지 않게 한다 */
  .table-scroll, .vm-read-body, .vm-fb-body,
  .settings-form, .settings-list{scrollbar-gutter:stable;}

  body{
    background:var(--bg-0); color:var(--tx-1);
    font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Malgun Gothic",sans-serif;
    min-height:100vh; display:flex; flex-direction:column;
    overflow:auto;                       /* 세로·가로 전체 스크롤 */
  }
  html{overflow-x:auto;}
  /* 화면이 충분하면 100vh에 맞추고, 콘텐츠가 넘치면 전체 페이지가 상하/좌우로 스크롤된다 */
  .shell{
    max-width:1920px; margin:0 auto; width:100%;
    display:flex; flex-direction:column;
    height:100vh; min-height:640px;      /* 세로가 짧아지면 min-height가 이겨서 body 스크롤 발생 */
  }

  /* 배너 1 - 3열: 회사로고(좌) / 메인로고(중앙) / 액션(우) */
  .banner1{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    padding:10px 40px; border-bottom:1px solid var(--line); gap:20px;
  }
  /* 좁아지면 로고가 아니라 좌우 칸이 먼저 줄어들도록 */
  .banner1 > *{min-width:0;}
  .brand{flex:none;}

  .brand{display:flex; align-items:center; justify-self:center;}
  .brand-logo{height:38px; width:auto; flex:none; display:block;}
  .banner1-actions{display:flex; gap:8px; align-items:center; justify-self:end;}
  /* 계정 정보(1행) + 오늘 날짜·시각(2행). 아이콘은 우측에 세로 중앙 정렬 */
  .who-block{
    display:flex; flex-direction:column; align-items:flex-end; gap:2px;
    margin-right:6px; line-height:1.25;
  }
  .who-line{font-size:12px; color:var(--tx-2); white-space:nowrap;}
  .who-line #whoName{color:var(--tx-1); font-weight:600;}
  .who-clock{
    font-size:10.5px; color:var(--tx-3);
    font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap;
  }

  /* 세로가 가로보다 긴 화면: 가운데 로고를 두면 우측 계정 정보와 겹친다.
     로고를 좌측(VOC 탭 위)으로 보내고 계정 정보를 우측에 두는 2열 구성으로 전환. */
  @media (max-aspect-ratio: 1/1){
    .banner1{
      grid-template-columns:auto 1fr; gap:10px; padding:8px 20px;
    }
    .banner1 > div:first-child{display:none;}   /* 좌측 스페이서 제거 */
    .brand{justify-self:start;}
    .banner1-actions{justify-self:end; flex-wrap:wrap; justify-content:flex-end;}
    .brand-logo{height:30px;}
    .who-line{font-size:11px;}
    .who-clock{font-size:10px;}
  }

  .icon-btn{
    width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
    background:var(--bg-1); display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--tx-2);
  }
  .icon-btn:hover{background:var(--bg-2); color:var(--tx-1);}
  /* 캘파일 바로가기 — 아이콘 대신 텍스트 "Cal" (양식 다운로드 아이콘과 구분) [2026-10] */
  .cal-btn{
    width:auto; min-width:44px; padding:0 12px; font-size:12px; font-weight:800; letter-spacing:.06em;
    color:var(--accent); border-color:var(--accent-ghost, var(--line)); background:var(--accent-ghost, var(--bg-1));
    text-decoration:none; font-family:inherit;
  }
  .cal-btn:hover{ color:#fff; background:var(--accent); border-color:var(--accent); }
  .cal-btn.disabled, .cal-btn:disabled{ color:var(--tx-3); background:var(--bg-1); border-color:var(--line); }
  .cal-btn-sm{ display:inline-flex; align-items:center; justify-content:center; height:22px; min-width:38px; padding:0 8px; border-radius:6px; border:1px solid var(--accent-ghost, var(--line)); font-size:11px; }
  .icon-btn svg{width:16px; height:16px;}

  /* 배너 2: 책갈피 탭 (+ 우측에 시계 배지) */
  /* ── 상단 탭 바 · 레일 인디케이터형 (시안 D안) ── */
  .tabs{
    display:flex; align-items:center; justify-content:space-between;
    padding:0 40px; background:var(--bg-1); border-bottom:1px solid var(--line);
    overflow-x:auto; scrollbar-width:thin;   /* 창이 좁으면 탭바 가로 스크롤 (잘려서 못 가는 탭 없게) [2026-10-19] */
  }
  .tabs-list{display:flex; align-items:stretch; gap:0; flex:none;}
  .tabs .tab{white-space:nowrap; flex:none;}
  /* 그룹: 기본은 붙음. .grouped일 때만 그룹 사이 간격 + 세로 구분선 */
  .tab-group{display:flex; align-items:stretch; gap:0; position:relative;}
  .tabs-list.grouped .tab-group + .tab-group{margin-left:22px;}
  .tabs-list.grouped .tab-group + .tab-group::before{
    content:""; position:absolute; left:-11px; top:50%; transform:translateY(-50%);
    width:1px; height:18px; background:var(--line);
  }
  /* 탭 (가변 폭) */
  .tab{
    position:relative; display:flex; align-items:center; gap:8px;
    padding:15px 18px; font-size:13px; line-height:1; color:var(--tx-2);
    background:none; border:none; white-space:nowrap; cursor:pointer;
    transition:color .14s, background .14s;
  }
  /* 상태 도트 */
  .tab .ico{
    width:7px; height:7px; border-radius:2px; background:currentColor;
    opacity:.45; transition:opacity .14s, transform .14s, background .14s;
  }
  .tab:hover{color:var(--tx-1); background:linear-gradient(180deg,transparent,rgba(41,173,238,.05));}
  /* 활성 — 발광 레일 + 밝은 도트 */
  .tab.active{color:var(--tx-1); font-weight:700;}
  .tab.active .ico{opacity:1; background:var(--accent); transform:scale(1.15);}
  .tab.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
    background:var(--accent); box-shadow:0 -6px 16px -2px rgba(41,173,238,.5);
  }
  .tab.disabled{color:var(--tx-3); opacity:.4; cursor:not-allowed; pointer-events:none;}
  .tab:not(.active):hover{color:var(--tx-2);}
  /* 라이브 인디케이터 도트 (초록) */
  .clock-badge .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--green); box-shadow:0 0 0 3px rgba(61,220,151,.15);
  }

  .main{
    flex:1; min-height:0; border-top:1px solid var(--line);
    background:
      radial-gradient(1200px 320px at 50% -150px, rgba(41,173,238,.045), transparent 70%),
      var(--bg-1);
    padding:20px 40px 24px; display:flex; gap:20px; align-items:stretch;   /* 1080p(100%) 에서 VOC 좌측 열이 세로로 들어오도록 축소 [2026-10-19] */
    overflow:auto;                       /* 본문이 넘치면 자체 스크롤 */
  }
  /* 배너·탭바는 가로 스크롤 시에도 잘리지 않도록 최소 폭 유지 */
  .banner1, .tabs{min-width:0;}
  /* 탭 페이지가 본문 높이를 그대로 차지 → VOC/설치이력 탭 하단 Y좌표 일치 */
  .tab-page{height:100%; min-height:0;}
  .col-left{width:380px; flex:none; display:flex; flex-direction:column; gap:12px;}
  .col-left > .card:last-child{flex:1; display:flex; flex-direction:column;}
  .col-right{flex:1; min-width:0;}

  .card{
    background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:16px 18px; position:relative; box-shadow:var(--shadow-card);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 6px 16px rgba(0,0,0,.25);
  }
  .card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line-soft);}
  .card-title{font-size:13px; color:var(--tx-1); font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.9;}
  .head-icons{display:flex; gap:6px;}
  .ic{
    width:30px; height:30px; border-radius:9px; border:1px solid var(--line);
    background:var(--bg-2); display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--tx-2); transition:.15s;
  }
  .ic:hover{background:var(--bg-4); color:var(--tx-1); border-color:var(--tx-3);}
  .ic:disabled{opacity:.3; cursor:not-allowed;}
  .ic:disabled:hover{background:var(--bg-2); color:var(--tx-2); border-color:var(--line);}
  .ic svg{width:14px; height:14px;}
  /* 주 액션(등록): 강조색 테두리 + 강조색 아이콘 */
  .ic.teal{
    color:var(--accent); border-color:var(--accent);
    background:var(--accent-ghost);
  }
  .ic.teal:hover{
    background:rgba(41,173,238,.22); color:var(--accent); border-color:var(--accent);
  }
  .ic.teal:disabled:hover{background:var(--accent-ghost); border-color:var(--accent);}
  .ic.red{color:var(--red); border-color:#4a2222;}
  /* VOC 작성란 머리줄: 제목 | +·편집 | (여백) | 휴지통 [확정 2026-10-19] */
  .voc-form-head{justify-content:flex-start; gap:10px;}
  .voc-form-head .head-icons{margin-right:auto;}

  .card.highlight{
    border-color:var(--line);
    background:var(--bg-2);
    box-shadow:var(--shadow-pop);
  }
  .card.highlight .card-title{color:var(--tx-1); opacity:1;}
  .card.highlight .card-head{border-bottom-color:var(--line);}

  input,select,textarea{
    width:100%; background:var(--bg-1); border:1px solid var(--line); color:var(--tx-1);
    border-radius:var(--radius-sm); padding:9px 10px; font-size:12.5px; font-family:inherit;
  }

  /* 날짜 입력 - YYYY/MM/DD 표기 통일 (디자인 규칙 4-1) */
  /* 비고 3줄 textarea (이후 스크롤) */
  textarea.note-3{min-height:calc(1.5em * 3 + 18px); resize:vertical;}

  input[type="date"]{
    color-scheme:dark;
    font-variant-numeric:tabular-nums;
  }
  /* 슬래시 구분자를 강제로 표기 (WebKit 계열) */
  input[type="date"]::-webkit-datetime-edit-year-field,
  input[type="date"]::-webkit-datetime-edit-month-field,
  input[type="date"]::-webkit-datetime-edit-day-field{ color:var(--tx-1); }
  input[type="date"]::-webkit-datetime-edit-text{ color:var(--tx-2); padding:0 2px; }
  input[type="date"]::-webkit-calendar-picker-indicator{
    filter:invert(0.7); opacity:.8; cursor:pointer;
  }
  input[type="date"]::-webkit-calendar-picker-indicator:hover{ opacity:1; }
  input::placeholder, textarea::placeholder{color:var(--tx-3);}
  input:focus, select:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-ghost);}
  textarea{resize:vertical; min-height:64px;}
  .field-label{font-size:10.5px; color:var(--tx-2); font-weight:600; letter-spacing:.02em; margin:0 0 5px 2px;}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px;}
  .grid-contact{display:grid; grid-template-columns:1.1fr 1fr; gap:8px;}
  .search-row{display:flex; gap:6px; align-items:center;}
  /* 검색 버튼: 강조색 채움 */
  .search-btn{
    width:34px; height:34px; flex:none; border-radius:var(--radius-sm);
    background:var(--accent); border:1px solid var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:.15s;
  }
  .search-btn:hover{filter:brightness(1.1);}
  .search-btn svg{width:15px; height:15px;}
  .search-row input{flex:1;}
  .hint{font-size:10.5px; color:var(--tx-3); margin-top:6px;}

  .badge{padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600; display:inline-block; white-space:nowrap;}
  .b-review{background:var(--amber-dim); color:var(--amber);}
  .b-rma{background:var(--red-dim); color:var(--red);}
  .b-done{background:var(--green-dim); color:var(--green);}
  .b-none{color:var(--tx-3);}

  /* VOC 목록 - 표 형태 + 가로 스크롤 */
  .table-scroll{overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--line-soft);}
  /* 헤더/셀 값이 줄바꿈되지 않도록 (가로 스크롤로 처리) */
  .table-scroll th, .table-scroll td{white-space:nowrap;}
  .install-pane thead th{position:sticky; top:0; z-index:2; background:var(--bg-3);}
  table{width:100%; border-collapse:collapse; font-size:12.5px;}
  /* VOC 목록(10컬럼)만 최소 너비 확보 - 설치이력 등 다른 표에는 적용하지 않음 */
  .col-right table{min-width:1180px;}
  thead th{
    text-align:left; padding:10px 14px; background:var(--bg-3); color:var(--tx-3);
    font-weight:600; font-size:11px; letter-spacing:.06em;
    border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0;
  }
  /* 값 = tx-1, 보조 셀 = tx-2/3 (정보 위계는 색과 굵기로만) */
  tbody td{padding:11px 14px; border-bottom:1px solid var(--line-soft); white-space:nowrap; color:var(--tx-1);}
  tbody tr:last-child td{border-bottom:none;}
  .table-scroll{background:var(--bg-2);}
  tbody tr:hover{background:var(--bg-3);}
  tbody tr:last-child td{border-bottom:none;}
  .rec{font-size:11.5px; color:var(--tx-2); font-variant-numeric:tabular-nums;}
  .muted-cell{color:var(--tx-3);}
  .empty-row td{text-align:center; color:var(--tx-3); padding:26px;}

  /* datebar는 상단 탭 라인 우측 clock-badge로 이동됨 (구 .datebar는 사용하지 않음) */

  .placeholder-card{
    background:var(--bg-2); border:1px dashed var(--line); border-radius:var(--radius-lg);
    padding:60px 16px; text-align:center; color:var(--tx-3); font-size:13px;
  }

  /* 다이얼로그 오버레이 */
  .dialog-overlay{
    position:fixed; inset:0; background:rgba(7,8,11,.65); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; z-index:100;
  }
  .dialog{
    width:min(420px, 92vw); max-height:88vh; overflow-y:auto;
    background:var(--bg-1); box-shadow:0 20px 60px rgba(0,0,0,.5);
  }

  /* 설치이력 탭 - 섹션 라벨 (한 카드 안 직렬 구조) */
  .section-label{
    display:flex; align-items:center; gap:8px;
    font-size:13px; font-weight:700; color:var(--tx-1);
    margin:2px 0 10px; padding-bottom:8px; letter-spacing:.01em;
    border-bottom:1px solid var(--line-soft);
  }
  /* 섹션 제목 글머리 도트 */
  .section-label > span:first-child::before{
    content:''; display:inline-block; flex:none;
    width:6px; height:6px; border-radius:2px;
    background:var(--accent);
    margin-right:8px; vertical-align:middle; position:relative; top:-1px;
  }
  .card-title.dotted::before{
    content:''; display:inline-block; flex:none;
    width:7px; height:7px; border-radius:2px;
    background:var(--accent);
    margin-right:8px; vertical-align:middle; position:relative; top:-1px;
  }
  .card-title.dotted{display:flex; align-items:center;}
  .count-badge{
    background:var(--bg-3); color:var(--tx-2); border:1px solid var(--line);
    border-radius:999px; padding:1px 9px; font-size:11px; font-weight:600;
    font-variant-numeric:tabular-nums;
  }
  /* 대기 수량 강조 */
  .count-badge.highlight{
    background:var(--accent-ghost); color:var(--accent);
    border-color:var(--accent-dim);
  }
  .count-badge.highlight.zero{
    background:var(--bg-3); color:var(--tx-3);
    border-color:var(--line); box-shadow:none;
  }
  /* 선택 가능한 행 (클릭 시 체크) */
  tbody tr.selectable{cursor:pointer;}
  tbody tr.selectable:hover{background:var(--bg-4);}
  tbody tr.row-selected{background:var(--accent-ghost);}
  tbody tr.row-selected td:first-child{box-shadow:inset 2px 0 0 var(--accent);}

  /* 설치이력 탭 - 좌우 직렬 배치 (대기 → 완료) */
  .tab-page[data-tab-page="install"] > .card{
    height:100%; display:flex; flex-direction:column; min-height:0;
    min-width:0; overflow:hidden;
  }
  .install-series{
    display:flex; align-items:stretch; gap:0;
    flex:1; min-height:0; min-width:0;
  }
  /* 대기 패널은 컬럼 수가 적어 좁게, 완료 패널이 남는 폭 차지 */
  .install-pane{min-width:0; display:flex; flex-direction:column; min-height:0;}
  /* 대기 패널: 목록이 비어 있어도 헤더/데이터 기준 최소 너비를 유지 */
  /* 대기 패널: 기본은 내용 폭, 화면이 좁아지면 함께 줄어든다 (완료 목록이 밀려나지 않도록) */
  .install-pane.pane-waiting{flex:0 1 auto; width:max-content; min-width:0; max-width:404px;}
  .pane-waiting .table-scroll{overflow-x:auto;}
  /* 컬럼별 최소 너비 - 데이터 유무와 무관하게 레이아웃이 흔들리지 않도록 고정 */
  .pane-waiting th:nth-child(1), .pane-waiting td:nth-child(1){width:32px; min-width:32px;}
  .pane-waiting th:nth-child(2), .pane-waiting td:nth-child(2){min-width:158px;}  /* S/N (17자) */
  .pane-waiting th:nth-child(3), .pane-waiting td:nth-child(3){min-width:92px;}   /* 모델명 */
  .pane-waiting th:nth-child(4), .pane-waiting td:nth-child(4){min-width:96px;}   /* 출하일자 */
  .install-pane.pane-installed{flex:1 1 0; min-width:0;}
  /* 목록 영역만 세로 스크롤 */
  .install-pane .table-scroll{flex:1; min-height:0; overflow-y:auto; overflow-x:auto;}
  .install-pane table{min-width:0; table-layout:auto;}
  /* 완료 패널: 모든 열을 내용 최소폭(줄바꿈 없음)으로 축소하고,
     병원명 열이 남는 폭을 흡수해 표가 컨테이너를 꽉 채우도록 함 */
  .pane-installed th, .pane-installed td{width:1px; white-space:nowrap;}
  .pane-installed th:nth-child(5), .pane-installed td:nth-child(5){width:auto; min-width:110px;}  /* 병원명이 남는 폭 흡수 */
  /* 설치이력 표는 컬럼이 적으므로 셀 패딩을 줄여 가로 스크롤 없이 표시 */
  .install-pane thead th{padding:9px 10px; font-size:10.5px; letter-spacing:.01em;}
  .install-pane tbody td{padding:8px 10px;}
  .install-move-col{
    display:flex; align-items:center; justify-content:center;
    padding:0 14px; position:relative;
  }
  .install-move-col::before{
    content:''; position:absolute; top:0; bottom:0; left:50%;
    width:1px; background:var(--line-soft);
  }
  .install-move-btn{
    position:relative; z-index:1;
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(135deg, var(--teal) 0%, #1B87C4 100%);
    border:none; color:#03243a; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(41,173,238,.28);
    transition:transform .18s, box-shadow .18s;
  }
  .install-move-btn:hover:not(:disabled){transform:translateX(3px); box-shadow:0 6px 20px rgba(41,173,238,.36);}
  .install-move-btn:disabled{
    background:var(--bg-3); color:var(--tx-3); cursor:not-allowed;
    box-shadow:none; opacity:.6;
  }
  .install-move-btn svg{width:22px; height:22px;}

  /* 반응형: 가로 폭이 좁아지면 VOC 탭의 좌/우 컬럼을 상하로 적층
     (좌측 작성란 → 아래에 VOC 목록 카드) */
  @media (max-aspect-ratio: 1/1), (max-width: 1100px){
    .tab-page[data-tab-page="voc"]{flex-direction:column; overflow-y:auto;}
    .col-left{width:auto; flex:none;}
    .col-left > .card:last-child{flex:none;}
    .col-right{flex:none; min-height:420px;}
    /* 본문 전체가 세로로 스크롤되도록 전환 (내부 목록만 스크롤되던 문제 해결) */
    .main{overflow-y:auto;}
    .tab-page{height:auto; min-height:100%;}
    .settings-card{height:auto; max-width:100%;}
    .settings-section{flex:none; min-height:0;}
    .settings-body{flex-direction:column; overflow:visible; flex:none;}
    .settings-form{width:auto; max-width:none; overflow:visible;}
    .settings-list{min-height:0;}
    /* 좁은 화면에서도 목록은 5행 기준 스크롤을 유지 (폼은 항상 고정) */
    .col-right .table-scroll{flex:none; max-height:none;}
    /* 설치이력 목록은 아래 적층 규칙에서 자체 스크롤로 다룬다 (여기서 높이를 풀지 않음) */
    .main{padding:16px 20px 20px;}
    /* 좁은 화면에서는 VOC 목록의 고정 최소너비를 완화하고 가로 스크롤로 처리 */
    .col-right table{min-width:900px;}
  }

  /* 반응형: 가로 폭이 좁아지면(세로가 더 긴 화면) 대기/완료를 상하로 적층 */
  @media (max-aspect-ratio: 1/1), (max-width: 1100px){
    /* 적층 시에는 카드 높이 고정(height:100%)·overflow:hidden을 풀어
       내용이 늘어나면 카드가 함께 커지고 전체 페이지(.main)가 상하로 스크롤되게 한다.
       (풀지 않으면 두 번째 목록이 카드 밖으로 잘려 스크롤로 볼 수 없다) */
    .tab-page[data-tab-page="install"] > .card{height:auto; overflow:visible;}
    .install-series{flex-direction:column; min-height:0;}
    /* 각 패널은 내용 높이만 차지하고, 목록은 자체 스크롤로 제한한다.
       (높이를 풀어두면 표가 패널 밖으로 흘러 아래 패널을 덮어버린다) */
    .install-pane.pane-waiting,
    .install-pane.pane-installed{
      width:auto; max-width:none; flex:none; min-width:0; overflow:hidden;
    }
    /* 대기·완료 목록에 동일한 max-height를 주어 보이는 행 수를 같게 맞춘다.
       각 목록은 자체 스크롤바로 내리고, 카드 전체는 페이지 스크롤로 오르내린다. */
    .install-pane .table-scroll{flex:none; max-height:38vh; overflow:auto; max-width:100%;}

    /* 좁은 화면에서는 설치완료 표의 최소 폭을 줄여 카드를 벗어나지 않게 한다.
       국가는 주소에 포함된 정보라 숨기고, 나머지는 말줄임으로 처리. */
    .fit-table th:nth-child(1), .fit-table td:nth-child(1){
      width:auto; min-width:118px; max-width:150px;
      overflow:hidden; text-overflow:ellipsis;
    }
    .fit-table th:nth-child(2), .fit-table td:nth-child(2){width:46px; min-width:46px;}
    .fit-table th:nth-child(3), .fit-table td:nth-child(3){width:84px; min-width:84px;}
    .fit-table th:nth-child(4), .fit-table td:nth-child(4){width:58px; min-width:58px;}
    .fit-table th:nth-child(5), .fit-table td:nth-child(5){min-width:92px; max-width:170px;}
    .fit-table th:nth-child(6), .fit-table td:nth-child(6){min-width:88px;}
    .fit-table th:nth-child(7), .fit-table td:nth-child(7){display:none;}   /* 국가 */
    .fit-table th.col-action, .fit-table td.col-action{width:44px; min-width:44px;}
    .install-move-col{padding:10px 0;}
    /* 세로 구분선 → 가로 구분선 */
    .install-move-col::before{
      top:50%; bottom:auto; left:0; right:0; width:auto; height:1px;
    }
    /* 화살표를 아래 방향으로 회전 */
    .install-move-btn svg{transform:rotate(90deg);}
    .install-move-btn:hover:not(:disabled){transform:translateY(3px) translateX(0);}
  }

  /* ── VOC 관리 · 인라인 확장형 (마스터-디테일) ── */
  .vm-card{background:var(--bg-2);}
  .vm-table{min-width:1080px;}
  .vm-table td.rcpt{font-weight:600; color:var(--tx-1); font-variant-numeric:tabular-nums;}
  .vm-table td.mono-cell{font-variant-numeric:tabular-nums; color:var(--tx-2);}
  /* S/N 약간 좁게, 제목은 가장 넓게 */
  .vm-table .col-sn{max-width:150px; overflow:hidden; text-overflow:ellipsis;}
  .vm-table .col-title{min-width:220px; max-width:340px; overflow:hidden; text-overflow:ellipsis;}
  /* 검색란 유동 폭 (모바일 대응) */
  .vm-search{width:clamp(180px, 40%, 340px); max-width:100%; min-width:0;}
  .vm-search input{min-width:0;}

  /* 표 행 */
  .vm-inline-scroll tbody tr{cursor:pointer;}
  .vm-inline-scroll tbody tr:not(.sel):not(.voc-detail-row):hover td{background:var(--bg-3);}
  .vm-inline-scroll tr.sel td{background:rgba(41,173,238,.17);}
  .vm-inline-scroll tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent);}
  /* 행 앞 펼침 셰브런 */
  .exp-caret{color:var(--tx-3); transition:transform .16s;}
  tr.sel .exp-caret{color:var(--accent); transform:rotate(90deg);}
  /* F/U 셀 칩 색상 (세그먼트와 동일 규칙) */
  .chip.fu-pending{background:rgba(239,91,91,.14); color:var(--red);}
  .chip.fu-review{background:rgba(240,169,64,.14); color:var(--amber);}
  .chip.fu-monitor{background:rgba(61,220,151,.13); color:var(--green);}
  .chip.fu-rma{background:var(--accent-ghost); color:var(--accent);}
  .chip.fu-done{background:var(--bg-3); color:var(--tx-2);}

  .vm-link{color:var(--accent); cursor:pointer; text-decoration:none;}
  .vm-link:hover{text-decoration:underline;}
  .vm-status-badge.active{background:var(--amber); color:#2a1c05; border-color:var(--amber);}

  /* ── F/U 상태 세그먼트 + 기간 토글 (시안) ── */
  /* 헤더: 좁아지면 제목 → 현황·기간 → 검색 순으로 단계적으로 아래로 내려간다 */
  .vm-head{align-items:center; flex-wrap:wrap; gap:10px 14px;}
  .status-wrap{display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-width:0; flex:1 1 auto;}
  .vm-head .vm-search{flex:0 1 340px; min-width:0;}
  .fu-seg{display:inline-flex; align-items:center; background:var(--bg-1); border:1px solid var(--line); border-radius:10px; padding:3px;}
  .fu-seg button{
    display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 13px;
    border:none; background:none; border-radius:7px; color:var(--tx-2);
    font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
    transition:background .12s, color .12s; white-space:nowrap;
  }
  .fu-seg button:hover{color:var(--tx-1);}
  .fu-seg button .cnt{
    font-size:11px; font-weight:800; color:var(--tx-1); background:var(--bg-3);
    border-radius:20px; padding:1px 6px; min-width:18px; text-align:center;
  }
  .fu-seg button .dot{width:7px; height:7px; border-radius:50%;}
  /* F/U 상태 색상 (전 화면 공통)
     검토대기=빨강 / 검토중=노랑 / 모니터링중=초록 / RMA=파랑 */
  .fu-seg button.k-pending .dot{background:var(--red);}
  .fu-seg button.k-review .dot{background:var(--amber);}
  .fu-seg button.k-monitor .dot{background:var(--green);}
  .fu-seg button.k-rma .dot{background:var(--accent);}
  .fu-seg .div{width:1px; height:18px; background:var(--line); margin:0 2px;}
  .fu-seg button.dim{opacity:.5;}   /* 종결군(완료·RMA·기타) 옅게 */
  .fu-seg button.active{background:var(--accent); color:#04121b;}
  .fu-seg button.active .cnt{background:rgba(0,0,0,.18); color:#04121b;}

  /* 목록 행 회색조(종결) — VOC/CDN: F/U='처리완료', RMA: 진행현황∈{출하완료,수리거절,기타}.
     - 텍스트만 흐릿하게 처리하고 상태 배지 색상은 살려둔다(중요 신호 유지).
     - 호버·선택 상태에서는 정상 opacity로 복귀해 상호작용을 방해하지 않는다. */
  tr.row-closed > td{color:var(--tx-3); opacity:.55;}
  tr.row-closed > td .chip,
  tr.row-closed > td .badge{opacity:1;}
  tr.row-closed:hover > td,
  tr.row-closed.sel > td{opacity:.85;}

  /* 경과일 기간 토글 (검토중·모니터링중일 때만 활성) */
  .fu-period{display:inline-flex; align-items:center; gap:8px;}
  .fu-period .lbl{font-size:11px; color:var(--tx-3); display:inline-flex; align-items:center; gap:6px;}
  .fu-period .lbl svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8px; stroke-linecap:round; stroke-linejoin:round;}
  .fu-period .seg2{display:inline-flex; background:var(--bg-1); border:1px solid var(--line); border-radius:8px; padding:3px;}
  .fu-period .seg2 button{
    height:26px; padding:0 11px; border:none; background:none; border-radius:6px;
    color:var(--tx-2); font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap;
  }
  .fu-period .seg2 button:hover{color:var(--tx-1);}
  .fu-period .seg2 button.active{background:var(--red); color:#fff;}
  .fu-period.disabled{opacity:.4; pointer-events:none;}

  .tat-cal{color:var(--tx-3);}

  /* ── 병합 모드 / 삭제함 배너 ── */
  .merge-bar, .trash-bar{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:8px 12px; margin-bottom:8px; border-radius:var(--radius-sm);
    font-size:11.5px;
  }
  .merge-bar{background:var(--accent-ghost); border:1px solid var(--accent);}
  .trash-bar{background:rgba(239,91,91,.1); border:1px solid var(--red);}
  .merge-bar .mb-title{font-weight:800; color:var(--accent);}
  .trash-bar .mb-title{font-weight:800; color:var(--red);}
  .mb-hint{color:var(--tx-3); flex:1 1 auto; min-width:0;}
  .mb-count{font-weight:700; color:var(--tx-1);}
  .btn.sm{padding:5px 11px; font-size:11px;}
  .tap-target{cursor:pointer; user-select:none;}

  .row-act{width:44px; text-align:center;}
  .mrg-cb{width:15px; height:15px; cursor:pointer; accent-color:var(--accent);}
  tr.mrg-sel > td{background:var(--accent-ghost) !important;}
  .red-ic:hover{background:rgba(239,91,91,.16); color:var(--red);}

  /* 병합된 원본 접수번호 링크 */
  .merged-src{
    margin-top:12px; padding-top:10px; border-top:1px dashed var(--line-soft);
  }
  .merged-src .ms-t{font-size:10.5px; font-weight:700; color:var(--tx-3); margin-bottom:6px;}
  .ms-link{
    display:inline-flex; align-items:center; gap:7px; cursor:pointer;
    background:var(--bg-2); border:1px solid var(--line-soft); border-radius:999px;
    padding:4px 11px; margin:0 6px 6px 0; font-size:11px; color:var(--accent);
  }
  .ms-link:hover{border-color:var(--accent);}
  .ms-link .mono{color:var(--tx-3); font-variant-numeric:tabular-nums;}

  /* 원본 VOC 열람 팝업 (CDN 상세와 동일한 톤) */
  .voc-orig .detail-sub{
    font-size:11px; font-weight:700; color:var(--tx-2);
    padding-bottom:6px; margin-bottom:8px; border-bottom:1px solid var(--line-soft);
  }
  .voc-orig .kv{
    display:grid; grid-template-columns:auto 1fr; gap:6px 12px;
    font-size:11.5px; align-items:baseline;
  }
  .voc-orig .kv .k{color:var(--tx-3); white-space:nowrap;}
  .voc-orig .kv .v{color:var(--tx-2); white-space:pre-wrap; word-break:break-word;}
  .voc-orig .kv .v strong{color:var(--tx-1);}
  .voc-orig .issue-box{
    background:var(--bg-2); border:1px solid var(--line-soft);
    border-radius:var(--radius-sm); padding:10px 12px;
    font-size:11.5px; color:var(--tx-2); line-height:1.6;
    white-space:pre-wrap; word-break:break-word;
  }

  /* 병합 팝업 */
  .mg-warn{
    background:rgba(240,169,64,.1); border:1px solid var(--amber);
    border-radius:var(--radius-sm); padding:9px 12px; margin-bottom:14px; font-size:11px;
  }
  .mg-warn strong{color:var(--amber); display:block; margin-bottom:4px;}
  .mg-warn ul{margin:0; padding-left:16px; color:var(--tx-2); line-height:1.6;}
  .mg-sec{margin-bottom:14px;}
  .mg-sec-t{font-size:10.5px; font-weight:700; color:var(--tx-3); margin-bottom:6px;}
  .mg-target, .mg-src{
    display:flex; align-items:center; gap:9px; font-size:11.5px;
    padding:5px 0; color:var(--tx-1);
  }
  .mg-target{font-weight:700; color:var(--accent);}
  .mg-src{color:var(--tx-2);}
  .mg-src .mg-src-t{color:var(--tx-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .mg-target .mono, .mg-src .mono{color:var(--tx-3); font-variant-numeric:tabular-nums;}
  .mg-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px;}
  .mg-sum{color:var(--tx-3); font-weight:400;}

  /* ── 서술형 필드 작성 이력 ── */
  .note-hist{
    margin-top:4px; max-height:120px; overflow-y:auto; opacity:.85;
    border-left:2px solid var(--line-soft); padding-left:8px;
  }
  .note-hist:hover{opacity:1;}
  /* 한 줄 표시: 날짜 · 작성자 · 내용 (내용이 길면 말줄임 + 툴팁) */
  .note-row{
    display:flex; align-items:baseline; gap:6px; cursor:pointer;
    padding:3px 4px; border-bottom:1px solid var(--line-soft); min-width:0;
    border-radius:4px;
  }
  .note-row:hover{background:var(--bg-2);}
  .note-row:last-child{border-bottom:none;}
  /* (작성일자) (작성자) (이슈내용) 순의 순수 텍스트 한 줄 나열.
     작성일자는 전체 ISO(YYYY-MM-DD), 작성자는 옅게, 이슈내용이 본문 */
  .note-date{font-size:10px; color:var(--tx-3); font-variant-numeric:tabular-nums; flex:none;}
  .note-by{font-size:10px; color:var(--tx-3); flex:none; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .note-lock-hint{font-size:10.5px; color:var(--tx-3); margin-top:6px;}
  .page-btn.danger{color:var(--red); border-color:rgba(239,91,91,.4);}
  .page-btn.danger:hover{background:rgba(239,91,91,.12);}
  .note-body{
    font-size:11px; color:var(--tx-2); flex:1 1 auto; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .note-empty{font-size:10.5px; color:var(--tx-3); padding:4px 0;}
  .note-edit-btns{display:flex; gap:6px; margin-top:5px; justify-content:flex-end;}
  .note-row.editing{display:block;}

  /* 이력 목록 팝업 (전체 이력 + 개별 편집/삭제) */
  .note-detail-list{
    display:flex; flex-direction:column; gap:2px;
    max-height:56vh; overflow-y:auto;
    border:1px solid var(--line-soft); border-radius:var(--radius-sm);
    background:var(--bg-1); padding:4px;
  }
  .note-detail-row{
    padding:8px 10px; border-bottom:1px solid var(--line-soft);
    display:flex; flex-direction:column; gap:5px;
  }
  .note-detail-row:last-child{border-bottom:none;}
  .note-detail-row.editing{background:var(--bg-2); border-radius:var(--radius-sm);}
  .note-detail-head{
    display:flex; align-items:center; gap:8px; min-width:0;
  }
  .note-detail-head .note-date{font-size:11px;}
  .note-detail-head .note-by{font-size:11px; max-width:120px;}
  .note-detail-actions{
    margin-left:auto; display:flex; gap:4px; flex:none;
  }
  .note-detail-actions .ic{width:24px; height:24px;}
  .note-detail-actions .ic svg{width:14px; height:14px;}
  .note-detail-body{
    font-size:12px; color:var(--tx-1); line-height:1.5;
    white-space:pre-wrap; word-break:break-word;
    padding-left:2px;
  }

  /* 다이얼로그 본문 */
  .dialog-body{max-height:60vh; overflow-y:auto; margin:10px 0;}
  .dialog-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:6px;}

  /* TAT 산출 이력 (비고 아래 누적) */
  .tat-log-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin:14px 0 6px; padding-top:10px; border-top:1px solid var(--line-soft);
    font-size:11px; font-weight:700; color:var(--tx-2);
  }
  .tat-log-head{color:var(--tx-3); font-weight:600;}
  .tat-log-head .tat-total{color:var(--tx-2); font-weight:700;}
  .tat-note{font-style:normal; font-weight:400; color:var(--tx-3); font-size:10.5px; margin-left:4px;}
  .tat-log{
    max-height:150px; overflow-y:auto; opacity:.82;
    border:1px solid var(--line-soft); border-radius:var(--radius-sm);
    background:var(--bg-1); padding:4px;
  }
  .tat-log:hover{opacity:1;}
  .tat-log-row{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    padding:5px 8px; font-size:11px; color:var(--tx-2);
    border-bottom:1px solid var(--line-soft);
  }
  .tat-log-row:last-child{border-bottom:none;}
  .tat-log-row .tat-date{font-variant-numeric:tabular-nums; color:var(--tx-3); min-width:74px;}
  .tat-log-row .tat-flow{color:var(--tx-2); flex:1 1 auto; min-width:0;}
  .tat-log-row .tat-flow b{color:var(--tx-3);}
  .tat-log-row .tat-days{color:var(--tx-2); font-variant-numeric:tabular-nums;}
  .tat-log-row .tat-acc{color:var(--tx-2); font-variant-numeric:tabular-nums;}
  .tat-log-row .tat-by{color:var(--tx-3);}
  .tat-log-empty{padding:10px; text-align:center; font-size:11px; color:var(--tx-3);}
  /* TAT 모드 배지 */
  .tat-mode{
    display:inline-flex; align-items:center; font-size:10px; font-weight:700;
    padding:1px 7px; border-radius:999px; margin-left:6px;
    background:var(--bg-3); color:var(--tx-3);
  }
  .tat-mode.tat-running{background:rgba(61,220,151,.13); color:var(--green);}
  .tat-mode.tat-paused{background:rgba(240,169,64,.14); color:var(--amber);}
  .tat-mode.tat-terminal{background:var(--accent-ghost); color:var(--accent);}

  .ship-table{min-width:1180px;}
  .ship-table tr.row-replaced > td{opacity:.5;}

  /* 제조사 전용 필드 표시 */
  .hint-inline{
    font-size:9.5px; font-weight:400; color:var(--amber);
    margin-left:6px; opacity:.85;
  }
  .mfg-only .v{white-space:pre-wrap; word-break:break-word;}
  .ship-table tr.clickable{cursor:pointer;}
  .ship-table tr.clickable:hover > td{background:var(--bg-2);}

  /* 출하이력 헤더: 소제목 옆에 도구 버튼, 검색줄은 우측 (한 줄 배치로 상단 공간 절약) */
  /* 설치완료 섹션 라벨 우측에 엑셀 도구 */
  .section-label{display:flex; align-items:center; gap:8px;}
  .section-label .ship-tools{margin-left:auto; padding-left:0; border-left:none;}

  .ship-tools{
    display:flex; align-items:center; gap:5px; flex:none;
    padding-left:10px; margin-left:2px; border-left:1px solid var(--line-soft);
  }
  .ship-tools .ic{width:28px; height:28px;}
  .ship-tools .ic svg{width:14px; height:14px;}

  /* import 결과 요약 */
  .imp-stat{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--tx-2);}
  .imp-stat b{color:var(--tx-1); margin-left:4px; font-size:14px;}
  .imp-stat .ok b{color:var(--green);}
  .imp-stat .bad b{color:var(--red);}
  /* Dialog.open() 으로 띄우는 범용 카드 (업로드 결과·병합 도구 등). 스타일이 빠져 있어 배경 없이 떠 있던 것을 보강 [2026-10] */
  .dialog-card{
    width:min(560px, 94vw); max-height:88vh; overflow-y:auto;
    background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:16px 18px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  }
  .dialog-card .card-title{ margin-bottom:10px; }
  /* 업로드 결과 — 오류/중복/샘플 행 수정 표 [2026-10] */
  .imp-dialog{ width:min(1500px, 96vw); }
  .imp-hint{ font-size:11.5px; color:var(--tx-2); margin:10px 0 6px; }
  .imp-table-wrap{ overflow:auto; max-height:52vh; border:1px solid var(--line); border-radius:8px; }
  .imp-table{ border-collapse:collapse; font-size:11.5px; min-width:1400px; }
  .imp-table th{ position:sticky; top:0; background:var(--bg-2); color:var(--tx-3); font-weight:700; font-size:10.5px; letter-spacing:.04em; padding:6px 6px; border-bottom:1px solid var(--line); white-space:nowrap; text-align:left; }
  .imp-table td{ padding:4px 6px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
  .imp-table tr:nth-child(even) td{ background:var(--bg-1); }
  .imp-table .imp-in{ width:100%; min-width:84px; margin:0; font-size:11.5px; padding:4px 6px; }
  .imp-table .imp-in.bad{ border-color:var(--red); box-shadow:0 0 0 2px rgba(239,91,91,.18); }
  .imp-table td:nth-child(3){ min-width:220px; max-width:320px; }
  .imp-reason{ color:var(--tx-2); font-size:11px; margin-top:3px; white-space:normal; }
  .imp-existing{ color:var(--amber); font-size:11px; margin-top:3px; white-space:normal; }
  /* 출하일자 기간 필터 [2026-10] */
  .date-range{ display:flex; align-items:center; gap:4px; }
  .date-range input[type="date"]{ width:132px; flex:none; margin:0; }
  .date-range-sep{ color:var(--tx-3); font-size:12px; }
  .date-range-quick{ width:auto; margin:0; font-size:11.5px; padding:6px 8px; }
  .filter-summary{ font-size:11px; color:var(--tx-3); margin:4px 0 0 2px; min-height:14px; }

  /* RMA 목록 (Claim까지 기본 화면, 이후 가로 스크롤) */
  .rma-table{min-width:1400px;}
  .chip.red{background:rgba(239,91,91,.14); color:var(--red);}
  .rma-sync-note{
    display:flex; align-items:center; gap:8px; font-size:11px; color:var(--accent);
    background:var(--accent-ghost); border:1px solid rgba(41,173,238,.3);
    border-radius:var(--radius-sm); padding:8px 11px; margin-bottom:10px;
  }

  /* 경과일 배지 (경과일 = 오늘 − 피드백 수정일자). 임계 초과 시 .over → 빨강 */
  .vm-table .days{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:2px 7px; border-radius:20px; background:var(--bg-3); color:var(--tx-3);}
  .vm-table .days.over{background:rgba(239,91,91,.14); color:var(--red);}

  @media (max-width:1100px){
    .fu-seg{max-width:100%; overflow:auto;}
    /* 좁은 창: 제목+아이콘은 한 줄 유지, 기간·칩만 다음 줄로 [2026-10-19] */
    .status-wrap{flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 12px;}
    .status-wrap .card-title.dotted{flex:none;}
  }

  /* 인라인 확장 영역 */
  .voc-detail-row td{padding:0 !important; border-bottom:1px solid var(--line-soft);}
  /* 인라인 상세: 표의 min-width에 끌려가지 않도록 sticky로 화면 폭에 고정.
     가로 스크롤 시에도 좌측에 붙어 보이고, 화면이 좁아지면 함께 줄어든다. */
  .voc-detail{
    position:sticky; left:0;
    width:calc(100vw - 170px); max-width:100%; box-sizing:border-box;
    background:var(--bg-0); border-left:3px solid var(--accent);
    padding:18px 20px 20px; display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:20px;
    white-space:normal;
  }
  @media (max-width:900px){
    .voc-detail{width:calc(100vw - 60px);}
  }
  .voc-detail .detail-sub{
    display:inline-flex; align-items:center; gap:7px;
    font-size:12px; font-weight:800; letter-spacing:.02em; color:var(--tx-1);
    margin-bottom:12px; padding-bottom:7px;
    border-bottom:2px solid var(--accent);
  }
  .voc-detail .detail-sub::before{
    content:""; width:6px; height:6px; border-radius:2px; background:var(--accent);
  }
  /* VOC 원본 읽기 */
  .voc-detail .kv{display:grid; grid-template-columns:auto 1fr; gap:9px 14px; font-size:12px; align-items:baseline;}
  .voc-detail .kv .k{color:var(--tx-3); white-space:nowrap;}
  .voc-detail .kv .v{color:var(--tx-2); white-space:pre-wrap; word-break:break-word;}
  .voc-detail .kv .v strong{color:var(--tx-1); font-weight:600;}
  .voc-detail .link{color:var(--accent); cursor:pointer; text-decoration:none;}
  .voc-detail .link:hover{text-decoration:underline;}
  .voc-detail .bucky{
    display:inline-flex; align-items:center; font-size:10px; font-weight:600;
    padding:2px 7px; border-radius:5px; background:var(--bg-3); color:var(--tx-2); border:1px solid var(--line);
  }
  .issue-box{
    background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--radius-sm);
    padding:11px 12px; font-size:12px; line-height:1.6; color:var(--tx-2);
  }
  /* 피드백 편집 필드 */
  .voc-detail .field-label{display:block; font-size:11px; color:var(--tx-2); margin-bottom:6px;}
  .voc-detail .field-label .req{color:var(--accent); margin-left:2px;}
  .vm-fb-select, .vm-fb-input, .vm-fb-textarea{
    width:100%; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius-sm);
    color:var(--tx-1); font-size:12px; font-family:inherit;
  }
  .vm-fb-select, .vm-fb-input{height:36px; padding:0 11px;}
  .vm-fb-textarea{padding:9px 11px; min-height:56px; resize:vertical;}
  .vm-fb-input:disabled{opacity:.42; background:var(--bg-2); cursor:not-allowed;}
  /* 상세 필드: 화면 축소 시 같은 비율로 줄어들다가 최소폭에서 세로로 전환.
     minmax() 최소값 = 드롭다운에서 가장 긴 텍스트가 잘리지 않는 폭 */
  .voc-detail .grid2{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px;}
  .voc-detail .grid3{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:12px;}
  .voc-detail .grid4{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:12px;}
  /* 선택 필드 자체도 컨테이너에 맞춰 축소 (긴 옵션 텍스트는 말줄임) */
  .vm-fb-select, .vm-fb-input, .vm-fb-textarea{min-width:0; max-width:100%;}
  .vm-fb-select{text-overflow:ellipsis;}
  .field-disabled{opacity:.45;}
  .field-disabled select{cursor:not-allowed;}

  /* 비활성 아이콘 버튼 */
  .icon-btn:disabled, .icon-btn.disabled{
    opacity:.35; cursor:not-allowed; pointer-events:none;
  }

  /* 대리점 정보 하위 서브 섹션 (도트 없음) */
  .sub-section-label{
    display:flex; align-items:center; gap:8px;
    font-size:11.5px; font-weight:600; color:var(--tx-3);
    margin:16px 0 8px; padding-top:12px;
    border-top:1px dashed var(--line-soft);
  }

  /* 전체 / 만료 세그먼트 토글 */
  .seg-toggle{
    display:inline-flex; background:var(--bg-1); border:1px solid var(--line);
    border-radius:999px; padding:2px;
  }
  .seg-toggle .seg{
    padding:3px 12px; font-size:10.5px; font-weight:600; color:var(--tx-3);
    border-radius:999px; cursor:pointer; user-select:none; transition:.15s;
  }
  .seg-toggle .seg:hover{color:var(--tx-1);}
  .seg-toggle .seg.active{background:var(--accent); color:#03243a;}

  /* 대리점 목록: 삭제/편집 열은 가로 스크롤해야 노출 (오조작 방지) */
  /* 등록대리점 목록: 화면 높이에 맞춰 자체 스크롤 (열 축소로 가로 최소폭 완화) [2026-10-19] */
  .dealer-list-scroll{overflow:auto; min-height:120px; flex:1 1 auto;}
  /* 소속관리 패널: 섹션 높이를 끝까지 채우고, 좌측 폼·우측 목록이 각자 스크롤 [2026-10-19] */
  [data-section="dealers"] .aff-pane{display:flex; flex-direction:column; flex:1 1 auto; min-height:0;}
  [data-section="dealers"] .aff-pane.hidden{display:none;}
  [data-section="dealers"] .settings-body{flex:1 1 auto; min-height:0;}
  [data-section="dealers"] .settings-list{flex:3 1 380px; min-height:0; overflow:hidden;}
  [data-section="dealers"] .settings-list .table-scroll{flex:1 1 auto; min-height:120px; overflow:auto;}
  /* 대리점 정보 폼도 공급계약서 블록이 추가되어 화면보다 길어질 수 있음 → 자체 스크롤 */
  [data-section="dealers"] .settings-form{max-height:100%; overflow-y:auto;}
  [data-section="dealers"] .settings-form > *{flex-shrink:0;}   /* 자식이 눌리지 않고 폼이 스크롤되게 */
  .dealer-list-scroll > table{min-width:640px;}
  .dealer-list-scroll thead th{position:sticky; top:0; z-index:1;}
  .link-btn{background:none; border:0; color:var(--accent); cursor:pointer; font-size:12px; padding:0; text-decoration:underline; text-underline-offset:2px;}
  .link-btn:hover{color:var(--tx-1);}
  .info-table{width:100%; border-collapse:collapse; font-size:12.5px;}
  .info-table th{width:96px; text-align:left; color:var(--tx-3); font-weight:600; padding:7px 4px; border-bottom:1px solid var(--line-soft);}
  .info-table td{padding:7px 4px; color:var(--tx-1); border-bottom:1px solid var(--line-soft);}
  .contract-row.pending .c-main{color:var(--tx-2); font-style:italic;}
  .contract-row .c-main a{color:var(--accent); text-decoration:none;}
  .contract-row .c-main a:hover{text-decoration:underline;}
  label.ic{display:inline-flex; align-items:center; justify-content:center; cursor:pointer;}
  /* 액션 열을 우측 끝으로 밀어 기본 화면에서 보이지 않게 함 */
  .act-col{min-width:150px; text-align:right;}
  .sub-table .act-col{min-width:76px; width:76px;}   /* 열 축소 후 편집·삭제 아이콘이 잘리지 않게 [2026-10-19] */

  /* 삭제 아이콘 */
  .ic.red-ic{color:var(--red); border-color:#4a2a2a;}
  .ic.red-ic:hover{background:rgba(239,91,91,.16); color:var(--red); border-color:var(--red);}

  /* 계정 구분 토글 (고객사/제조사, 일반/관리자) — 두 토글 크기 동일 */
  .role-toggle.compact{padding:3px; margin:0 0 8px; height:36px;}
  /* 하단 푸터: 회사 로고(위) + copyright(아래), 중앙 정렬 */
  .app-footer{
    flex:none; display:flex; flex-direction:column; align-items:center; gap:1px;
    padding:8px 20px 10px; border-top:1px solid var(--line-soft);
    background:var(--bg-0);
  }
  /* 로고 하단 여백은 이미지 자체를 크롭해 최소화했고, gap:1px로 문구와 밀착 */
  .footer-logo{height:13px; width:auto; opacity:.75; display:block;}
  .footer-copy{font-size:9px; color:var(--tx-3); letter-spacing:.01em; opacity:.85;}

  /* ── 설치완료 목록 컬럼 폭 ──
     짧고 형식이 고정된 열(목적·설치일자·Bucky·국가·액션)은 고정 폭으로 묶고,
     길이가 들쭉날쭉한 주소가 남는 폭을 흡수한다.
     이렇게 하면 액션 열이 과도하게 넓어져 헤더와 아이콘이 어긋나는 문제가 사라지고,
     표의 최소 폭도 작아져 좁은 화면에서 UI를 벗어나지 않는다. */
  .fit-table{width:100%; table-layout:auto;}
  .fit-table th, .fit-table td{white-space:nowrap; text-align:left;}

  /* 1 S/N */
  .fit-table th:nth-child(1), .fit-table td:nth-child(1){
    width:160px; min-width:160px; font-variant-numeric:tabular-nums;
  }
  /* 2 목적 */
  .fit-table th:nth-child(2), .fit-table td:nth-child(2){
    width:56px; min-width:56px; text-align:center;
  }
  /* 3 설치일자 */
  .fit-table th:nth-child(3), .fit-table td:nth-child(3){
    width:96px; min-width:96px; text-align:center; font-variant-numeric:tabular-nums;
  }
  /* 4 Bucky */
  .fit-table th:nth-child(4), .fit-table td:nth-child(4){
    width:72px; min-width:72px; text-align:center;
  }
  /* 5 병원명 — 폭 우선권.
     해외 병원명이 길어도 잘리거나 줄바꿈되지 않도록 내용 폭을 그대로 확보한다.
     (width:1% = shrink-to-fit 요청 → 브라우저가 내용만큼 넓혀줌)
     지나치게 길 때만 상한선에서 말줄임. */
  .fit-table th:nth-child(5), .fit-table td:nth-child(5){
    width:1%; min-width:140px; max-width:420px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* 6 주소 — 남는 폭을 흡수하고, 공간이 모자라면 여기부터 줄어든다 */
  .fit-table th:nth-child(6), .fit-table td:nth-child(6){
    width:auto; min-width:120px; color:var(--tx-2);
  }
  .fit-table td:nth-child(6){
    max-width:0;                     /* 셀이 내용 길이만큼 늘어나지 않도록 (말줄임 활성화) */
    overflow:hidden; text-overflow:ellipsis;
  }
  /* 7 국가 */
  .fit-table th:nth-child(7), .fit-table td:nth-child(7){
    width:48px; min-width:48px; text-align:center;
  }
  /* 8 액션 - 헤더와 아이콘이 같은 축에 오도록 좁게 + 가운데 정렬 */
  .fit-table th.col-action, .fit-table td.col-action{
    width:52px; min-width:52px; text-align:center; padding-left:0; padding-right:8px;
  }
  .fit-table td.col-action .ic{margin:0 auto;}

  /* 병원명 옆 국가 코드 (별도 요소 - 하이퍼링크 검색어에 포함되지 않음) */
  .v-sub{
    margin-left:6px; font-size:11px; color:var(--tx-3);
    font-variant-numeric:tabular-nums; letter-spacing:.02em;
  }
  .v-sub:empty{display:none;}

  /* 제품/현장정보 - 비고는 한 줄 전체를 사용 */
  #vocProductInfo{gap:6px 8px;}
  .info-note-row{grid-column:1 / -1;}
  .info-note-row .v{white-space:pre-wrap; word-break:break-word;}

  /* ── 환경값: 1:1 2열 · sticky 소제목 · 패널 토글 (시안서 반영) ── */
  .env-grid{
    display:grid; grid-template-columns:1fr 1fr 1fr;
    flex:1; min-height:0; min-width:0;
  }
  .env-col{display:flex; flex-direction:column; min-height:0; min-width:0;}
  .env-col + .env-col{border-left:1px solid var(--line);}

  /* 탭 제목 + 소제목 버튼줄: 상단 고정, 목록만 스크롤 */
  .col-head{
    position:sticky; top:0; z-index:3; background:var(--bg-1);
    padding:12px 16px 0; border-bottom:1px solid var(--line-soft);
  }
  .col-title-row{
    font-size:12px; font-weight:800; color:var(--tx-1); margin-bottom:9px;
  }
  .sub-tabs{display:flex; gap:4px; flex-wrap:wrap;}
  .sub-tab{
    position:relative; background:none; border:none; cursor:pointer;
    padding:7px 10px 9px; font-size:11.5px; font-weight:700;
    color:var(--tx-3); border-radius:6px 6px 0 0;
  }
  .sub-tab:hover{color:var(--tx-2);}
  .sub-tab.active{color:var(--accent);}
  .sub-tab.active::after{
    content:""; position:absolute; left:8px; right:8px; bottom:-1px;
    height:2px; background:var(--accent); border-radius:2px;
  }
  .col-scroll{flex:1; min-height:0; overflow-y:auto; padding:14px 16px 18px;}

  .panel{display:none;}
  .panel.show{display:block;}
  .panel .desc{
    font-size:11px; color:var(--tx-3); line-height:1.55; margin-bottom:12px;
  }

  /* 추가 입력 줄 */
  .addrow{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px;}
  .addrow input{
    background:var(--bg-2); border:1px solid var(--line); color:var(--tx-1);
    border-radius:var(--radius-sm); padding:7px 10px; font-size:12px; outline:none;
  }
  .addrow input:focus{border-color:var(--accent);}
  .addrow .unit{font-size:11px; color:var(--tx-3);}
  .add-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; flex:none; cursor:pointer;
    background:var(--accent-ghost); border:1px solid var(--accent);
    color:var(--accent); border-radius:var(--radius-sm);
  }
  .add-btn svg{width:14px; height:14px;}
  .add-btn:hover{background:rgba(41,173,238,.2);}
  .btn-row{display:flex; gap:8px; margin-top:14px;}
  .btn{
    cursor:pointer; font-size:11.5px; font-weight:700; padding:8px 14px;
    border-radius:var(--radius-sm); border:1px solid var(--line);
    background:var(--bg-2); color:var(--tx-2);
  }
  .btn.primary{background:var(--accent); border-color:var(--accent); color:#06222f;}
  .btn.ghost:hover{color:var(--tx-1); border-color:var(--tx-3);}

  /* 값 칩 (VOC TAT 경과일) */
  .pill-wrap{display:flex; flex-wrap:wrap; gap:6px;}
  .pill{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--bg-2); border:1px solid var(--line-soft);
    border-radius:999px; padding:5px 6px 5px 12px;
    font-size:11.5px; font-weight:700; color:var(--tx-1);
  }
  .pill.reserved{color:var(--tx-2);}
  .pill .del-btn, .pill .lk{
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%; border:none; background:none;
    color:var(--tx-3); cursor:pointer;
  }
  .pill .del-btn:hover{background:rgba(239,91,91,.16); color:var(--red);}
  .pill .lk{cursor:default;}
  .pill svg{width:11px; height:11px;}

  /* TAT 모드 스윔레인 */
  .lane{
    border:1px solid var(--line-soft); border-radius:var(--radius-sm);
    margin-bottom:9px; overflow:hidden; background:var(--bg-1);
  }
  .lane-head{
    display:flex; align-items:center; gap:8px;
    padding:7px 11px; border-bottom:1px solid var(--line-soft);
    font-size:11px; font-weight:800;
  }
  .lane-head .d{font-weight:400; color:var(--tx-3); font-size:10.5px;}
  .lane.m-none .lane-head{color:var(--tx-3);}
  .lane.m-run .lane-head{color:var(--green); background:rgba(61,220,151,.07);}
  .lane.m-pause .lane-head{color:var(--amber); background:rgba(240,169,64,.07);}
  .lane.m-term .lane-head{color:var(--accent); background:var(--accent-ghost);}
  .lane-body{display:flex; flex-wrap:wrap; gap:6px; padding:9px 11px; align-items:center;}
  .lane-add{
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; cursor:pointer;
    background:none; border:1px dashed var(--line); color:var(--tx-3);
    border-radius:50%;
  }
  .lane-add:hover{border-color:var(--accent); color:var(--accent);}
  .lane-add svg{width:11px; height:11px;}

  /* 목록 테이블 (불량파트 · 휴일) */
  .dtable{width:100%; border-collapse:collapse; font-size:11.5px;}
  .dtable th{
    text-align:left; font-weight:700; color:var(--tx-3); font-size:10.5px;
    padding:7px 9px; border-bottom:1px solid var(--line-soft); white-space:nowrap;
  }
  .dtable td{
    padding:7px 9px; border-bottom:1px solid var(--line-soft); color:var(--tx-1);
  }
  .dtable th.c, .dtable td.c{text-align:center; width:56px;}
  .dtable tr:last-child td{border-bottom:none;}
  .dtable .mono{font-variant-numeric:tabular-nums; color:var(--tx-2);}
  .dtable .empty{color:var(--tx-3); text-align:center; padding:14px;}
  .dtable .x{
    background:none; border:none; cursor:pointer; color:var(--tx-3);
    width:22px; height:22px; border-radius:5px;
  }
  .dtable .x:hover{background:rgba(239,91,91,.16); color:var(--red);}
  .dtable .x svg, .dtable .lk svg{width:12px; height:12px;}
  .dtable .lk{color:var(--tx-3);}

  @media (max-width:1240px){
    .env-grid{grid-template-columns:1fr 1fr;}
    .env-col:nth-child(3){border-left:none; border-top:1px solid var(--line); grid-column:1 / -1;}
  }
  @media (max-width:800px){
    .env-grid{grid-template-columns:1fr;}
    .env-col + .env-col{border-left:none; border-top:1px solid var(--line);}
  }

  /* 관리자 모드: 구분 토글 잠금 (제조사 고정) */
  .role-toggle.locked{opacity:.75; pointer-events:none;}
  .role-toggle.compact button{padding:0 8px; font-size:12px; height:100%;}
  .level-toggle .lvl.active{background:var(--accent); color:#03243a;}

  /* 계약만료 알림 - 환경설정 아이콘 깜빡임 */
  @keyframes alertBlink{
    0%, 100%{color:var(--tx-2); border-color:var(--line);}
    50%{color:var(--red); border-color:var(--red); background:rgba(239,91,91,.14);}
  }
  .icon-btn.alert-blink{animation:alertBlink 1.15s ease-in-out infinite;}
  @media (prefers-reduced-motion: reduce){
    .icon-btn.alert-blink{animation:none; color:var(--red); border-color:var(--red);}
  }
  /* 느낌표 배지 */
  .alert-badge.inline{min-width:16px; height:16px; font-size:11px; line-height:1;}

  /* 제목 옆 아이콘 그룹 */
  .head-icons{display:inline-flex; gap:4px; align-items:center;}

  /* 환경설정 - 2단계 화면 */
  /* 환경설정 화면: 중앙 기준 최대 너비를 화면의 절반으로 고정 (최소 900px 보장) */
  .settings-card{
    width:100%; max-width:max(1062px, 56%); margin:0 auto;
    height:100%; display:flex; flex-direction:column; min-height:0;
  }
  /* 화면 세로가 짧으면 카드 높이를 풀어 본문(.main)이 스크롤되게 한다.
     height:100%로 고정돼 있으면 내용이 넘쳐도 .main에 오버플로가 생기지 않아
     스크롤이 아예 발생하지 않는다. */
  @media (max-height:760px){
    .settings-card{height:auto; min-height:100%;}
    .settings-section{overflow-y:visible;}
    .env-grid .col-scroll{overflow-y:visible;}
    .settings-form, .settings-list{overflow-y:visible;}
  }
  /* 환경설정 타이틀 강조 */
  .settings-card > .card-head{
    padding-bottom:12px; margin-bottom:4px; border-bottom:1px solid var(--line);
  }
  .settings-card > .card-head .card-title{
    font-size:17px; font-weight:700; color:var(--tx-1); letter-spacing:.01em;
    display:flex; align-items:center; gap:9px;
  }
  .settings-card > .card-head .card-title::before{
    content:''; width:4px; height:19px; border-radius:2px;
    background:var(--accent);
  }
  /* 서브탭 활성 강조 */
  .sub-tabs .tab.active{color:var(--teal); font-weight:700;}
  .sub-tabs{display:flex; gap:6px; margin:2px 0 14px; border-bottom:1px solid var(--line);}
  .sub-tabs .tab{
    padding:8px 20px; font-size:12.5px; border-radius:8px 8px 0 0;
    clip-path:none; border-bottom:none; margin-bottom:-1px;
    /* 비활성: 가라앉은 표면 */
    background:var(--bg-1); color:var(--tx-3);
  }
  .sub-tabs .tab:hover{color:var(--tx-2);}
  /* 활성: 카드와 이어지는 밝은 표면 */
  .sub-tabs .tab.active{
    background:var(--bg-2); color:var(--accent); font-weight:700;
    border-color:var(--line); box-shadow:0 -2px 0 var(--accent) inset;
  }
  .settings-section{
    flex:1; min-height:0; display:flex; flex-direction:column;
    overflow:hidden;          /* 내부 목록(table-scroll)이 스크롤을 담당하도록 함 */
  }
  .settings-section.hidden{display:none;}

  /* 환경설정 아이콘 알림 배지 */
  .icon-with-badge{position:relative; display:inline-flex;}
  .alert-badge{
    position:absolute; top:-5px; right:-5px; z-index:2;
    cursor:pointer;
    min-width:17px; height:17px; padding:0 4px; border-radius:999px;
    background:var(--red); color:#fff; font-size:10px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 2px var(--bg-0);
  }
  .alert-badge:hover{filter:brightness(1.15);}
  /* 서브탭 안에 붙는 인라인 배지 */
  .alert-badge.inline{
    position:static; margin-left:6px; box-shadow:none;
    display:inline-flex; vertical-align:middle;
  }
  .sub-tabs .tab{display:flex; align-items:center;}

  /* 작은 아이콘 버튼 */
  .ic.sm{width:24px; height:24px;}
  .ic.sm svg{width:13px; height:13px;}

  /* 승인 토글 칩 */
  .chip.toggle{cursor:pointer; user-select:none;}
  .chip.toggle:hover{filter:brightness(1.25);}

  /* 납품계약 매핑 */
  .contract-list{
    border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--bg-1); padding:4px; max-height:190px; overflow-y:auto;
  }
  .contract-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:7px 8px; border-radius:6px;
  }
  .contract-row + .contract-row{border-top:1px solid var(--line-soft);}
  .contract-row .c-main{font-size:11.5px; color:var(--tx-1); font-weight:600;}
  .contract-row .c-sub{font-size:10.5px; color:var(--tx-3); margin-top:2px;}
  .contract-line.expired{color:var(--red); font-weight:600;}

  /* 관리자 계정 모드 배지 */
  .admin-badge{
    display:inline-flex; align-items:center; font-size:9.5px; font-weight:700;
    padding:2px 8px; border-radius:999px; letter-spacing:.04em;
    background:var(--amber); color:#2a1c04;
  }
  .section-label .admin-mode{color:var(--amber);}

  /* 대리점 목록 - 하위 매핑 확장 */
  .caret{
    display:inline-block; width:14px; color:var(--tx-3); font-size:10px;
    transition:transform .15s; margin-right:2px;
  }
  .caret.expanded{transform:rotate(90deg); color:var(--teal);}
  .caret-space{display:inline-block; width:14px; margin-right:2px;}

  tr.sub-head > td{padding:0 !important; background:var(--bg-1);}
  .sub-table{width:100%; min-width:0; border-collapse:collapse;}
  .sub-table thead th{
    background:var(--bg-1); color:var(--tx-3); font-size:10px; font-weight:600;
    text-transform:none; letter-spacing:0; padding:7px 10px;
    border-bottom:1px solid var(--line-soft); position:static;
  }
  .sub-table tbody td{
    padding:7px 10px; font-size:11.5px; color:var(--tx-2);
    border-bottom:1px solid var(--line-soft); background:transparent;
  }
  /* 하위 정보는 하이라이트 없이 기본 폰트 유지 */
  .sub-table tbody tr:hover{background:transparent;}
  /* .sub-table tbody td 보다 우선순위를 높여 색상이 덮이지 않도록 함 */
  .sub-table tbody td.status-active{color:var(--green); font-weight:600;}
  .sub-table tbody td.status-expired{color:var(--red); font-weight:600;}

  /* 모델 다중 선택 */
  .model-picker{
    display:flex; flex-wrap:wrap; gap:6px;
    border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--bg-1); padding:8px; max-height:170px; overflow-y:auto;
  }
  .model-chip{
    display:inline-flex; align-items:center; gap:5px;
    background:var(--bg-2); border:1px solid var(--line); border-radius:999px;
    padding:5px 11px; font-size:11px; color:var(--tx-2); cursor:pointer;
  }
  .model-chip:hover{color:var(--tx-1); border-color:var(--tx-3);}
  .model-chip input{margin:0;}
  .model-chip:has(input:checked){
    background:var(--accent-ghost); border-color:var(--accent); color:var(--accent);
  }

  /* 환경설정 - 계정 관리 */
  /* 화면이 좁아지면 폼이 줄어들다가 세로로 쌓인다 (카드가 밖으로 나가지 않도록) */
  .settings-body{display:flex; gap:20px; flex:1; min-height:0; min-width:0; align-items:stretch;}
  /* 등록 폼: 목록과 시각적으로 분리된 독립 카드 */
  /* 등록 폼은 스크롤하지 않고 화면에 고정한다 (입력 중 시야에서 사라지지 않도록) */
  .settings-form{
    flex:0 0 auto; width:320px; max-width:340px; min-width:0;
    display:flex; flex-direction:column; gap:0;
    align-self:flex-start; overflow:visible;
    background:var(--bg-1); border:1px solid var(--line);
    border-radius:var(--radius-md); padding:14px 16px;
  }
  .settings-list{flex:3 1 380px; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden;}
  .settings-section{min-width:0;}
  .settings-form input, .settings-form select, .settings-form textarea{max-width:100%;}
  /* 폼 필드 세로 리듬 통일: 라벨은 위 12px, 입력은 라벨 아래 5px */
  .settings-form .field-label{margin:12px 0 5px 2px;}
  .settings-form > .field-label:first-child,
  .settings-form .section-label + .field-label,
  .settings-form .role-toggle + .field-label{margin-top:0;}
  .settings-form input,
  .settings-form select,
  .settings-form textarea{margin-bottom:0;}
  .settings-form .grid2{margin:0;}
  .settings-form .grid2 .field-label{margin-top:0;}
  .settings-form .hint{margin-top:6px;}
  /* 그리드 묶음 자체에 상단 간격 */
  .settings-form > .grid2{margin-top:12px;}
  .settings-list{
    flex:1 1 380px; min-width:0; display:flex; flex-direction:column; min-height:0;
    background:var(--bg-1); border:1px solid var(--line);
    border-radius:var(--radius-md); padding:14px 16px;
  }
  /* 목록은 5행까지 보이고 그 이상은 스크롤 (헤더 34px + 5행 × 34px) */
  /* [확정 2026-07] 목록은 기본적으로 남는 세로 공간을 가득 채운다.
     화면이 세로로 더 긴 경우(portrait)에만 아래 media query 에서 높이를 제한한다. */
  .settings-list .table-scroll{
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:auto;
  }
  /* 세로가 가로보다 긴 화면에서만: 목록이 페이지를 과도하게 밀어내지 않도록 높이 제한.
     (가로가 넓은 일반 화면에서는 위 기본 규칙대로 세로 공간을 가득 채움) */
  @media (max-aspect-ratio: 1/1){
    .settings-list .table-scroll{flex:none; max-height:340px;}
  }
  .settings-list table{min-width:0;}
  .settings-list th, .settings-list td{white-space:nowrap; padding:8px 12px;}
  .chip{
    display:inline-block; padding:2px 8px; border-radius:999px;
    font-size:10.5px; font-weight:600; border:1px solid var(--line);
  }
  .chip.ok{background:var(--accent-ghost); color:var(--accent); border-color:var(--accent-dim);}
  .chip.warn{background:rgba(240,169,64,.14); color:var(--amber); border-color:var(--amber);}
  .chip.info{background:var(--accent-ghost); color:var(--accent); border-color:var(--accent-dim);}
  .chip.muted{background:var(--bg-3); color:var(--tx-3); border-color:var(--line);}

  /* ── 재고관리 탭 (시안서 B: 3열 마스터-디테일) ── */
  .stock-grid{
    display:grid; grid-template-columns:300px 1fr 360px; gap:12px;
    height:100%; min-height:0;
  }
  .stock-grid .col{display:flex; flex-direction:column; overflow:hidden; min-height:0;}

  /* 좌 · 카테고리 트리 */
  .tree-body{overflow:auto; padding:6px 8px 8px;}
  .tree-cat{margin-top:8px;}
  .tree-cat:first-child{margin-top:0;}
  .tree-cat .h{
    display:flex; align-items:center; padding:5px 8px; font-size:11px;
    color:var(--accent); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    background:var(--accent-ghost); border-radius:6px;
  }
  .tree-mdl{
    display:grid; grid-template-columns:14px 1fr auto; gap:8px; align-items:center;
    padding:6px 8px 6px 22px; font-size:11.5px; cursor:pointer; border-radius:6px;
  }
  .tree-mdl:hover{background:var(--bg-3);}
  .tree-mdl.sel{background:var(--accent-ghost);}
  .tree-mdl .nm{color:var(--tx-1); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .tree-mdl .badges{display:flex; gap:4px;}
  .tree-mdl .bd{font-size:9.5px; font-weight:800; padding:1px 6px; border-radius:20px; font-variant-numeric:tabular-nums;}
  .tree-mdl .bd.stk{background:var(--accent-ghost); color:var(--accent);}
  .tree-mdl .bd.out{background:rgba(240,169,64,.14); color:var(--amber);}
  .tree-mdl svg{width:11px; height:11px; color:var(--tx-3); fill:none; stroke:currentColor; stroke-width:2px;}

  /* 좌 카드 헤더 인라인 요약 */
  .hd-sum{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; font-weight:400; color:var(--tx-3); margin-left:6px;}
  .calib-icon{
    display:inline-flex; align-items:center; justify-content:center; margin-left:8px;
    width:22px; height:22px; border-radius:6px; color:var(--accent);
    border:1px solid var(--accent-dim, var(--accent)); background:var(--accent-ghost);
    cursor:pointer; vertical-align:middle;
  }
  .calib-icon svg{width:13px; height:13px;}
  .calib-icon:hover{filter:brightness(1.2);}
  .hd-sum b{font-weight:700; font-variant-numeric:tabular-nums;}
  .hd-sum .hd-hold{color:var(--accent);} .hd-sum .hd-out{color:var(--amber);} .hd-sum .hd-dis{color:var(--tx-3);}
  .add-btn{
    display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
    border-radius:7px; border:1px solid var(--accent); background:var(--accent-ghost);
    color:var(--accent); cursor:pointer;
  }
  .add-btn svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2px; stroke-linecap:round;}
  .add-btn:hover{filter:brightness(1.2);}

  /* 중 · 현황카드 4개 */
  .status-cards{
    display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:12px 14px;
    background:var(--bg-1); border-bottom:1px solid var(--line-soft);
  }
  .scard{
    cursor:pointer; padding:10px 12px; border-radius:8px; background:var(--bg-2);
    border:1px solid var(--line); display:flex; flex-direction:column; gap:5px;
    transition:background .13s, border-color .13s;
  }
  .scard:hover{background:var(--bg-3);}
  .scard.sel{border-color:var(--accent); background:var(--accent-ghost);}
  .scard.s-out.sel{border-color:var(--amber); background:rgba(240,169,64,.12);}
  .scard.s-dis.sel{border-color:var(--tx-3); background:var(--bg-3);}
  .scard .sc-top{display:flex; align-items:center; justify-content:space-between;}
  .scard .sc-label{font-size:11px; font-weight:700; color:var(--tx-2); display:inline-flex; align-items:center; gap:6px;}
  .scard .sc-label::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--tx-3);}
  .scard.s-hold .sc-label::before{background:var(--accent);}
  .scard.s-out .sc-label::before{background:var(--amber);}
  .scard.s-dis .sc-label::before{background:var(--tx-3);}
  .scard.sel .sc-label{color:var(--tx-1);}
  .scard .sc-count{font-size:22px; font-weight:800; color:var(--tx-1); font-variant-numeric:tabular-nums; line-height:1;}
  .scard.s-hold.sel .sc-count{color:var(--accent);}
  .scard.s-out.sel .sc-count{color:var(--amber);}
  .scard .sc-sub{font-size:10.5px; color:var(--tx-3); font-weight:500;}

  /* 중 · 목록 */
  .tblwrap{overflow:auto; flex:1; min-height:0;}
  .tbl{width:100%; border-collapse:collapse; font-size:11.5px; white-space:nowrap;}
  .tbl th{
    position:sticky; top:0; background:var(--bg-3); color:var(--tx-3); font-weight:600;
    font-size:10.5px; text-align:left; padding:8px 11px; letter-spacing:.03em;
    text-transform:uppercase; z-index:1;
  }
  .tbl td{padding:8px 11px; border-bottom:1px solid var(--line-soft); color:var(--tx-2);}
  .tbl tbody tr{cursor:pointer;}
  .tbl tbody tr:hover td{background:var(--bg-3);}
  .tbl tr.sel td{background:var(--accent-ghost);}
  .tbl tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--accent);}
  .tbl .sn{color:var(--tx-2);}
  .tbl .inv-model-cell{color:var(--tx-1); font-weight:600; white-space:nowrap;}
  .tbl .link{color:var(--accent); text-decoration:none; cursor:pointer;}
  .tbl .link:hover{text-decoration:underline;}

  /* 재고 chip (시안서 스타일: 점 + 알약) */
  .chip.new, .chip.in{color:var(--accent); background:var(--accent-ghost);}
  .chip.out, .chip.sale, .chip.as{color:var(--amber); background:rgba(240,169,64,.14);}
  .chip.dis{color:var(--tx-3); background:var(--bg-3);}
  .chip.editable{border:1px dashed transparent; border-radius:5px; cursor:pointer;}
  .chip.editable:hover{border-color:var(--tx-3);}
  .inv-status-cell{cursor:pointer;}

  /* RMA 발행 아이콘 버튼 */
  .ic-btn{
    display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
    border-radius:6px; border:1px solid var(--accent); background:var(--accent-ghost);
    color:var(--accent); cursor:pointer;
  }
  .ic-btn svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.9px; stroke-linecap:round; stroke-linejoin:round;}
  .ic-btn:hover{filter:brightness(1.2);}

  /* 우 · 상세 + 이력 타임라인 (헤더 고정 · 이력만 스크롤) */
  .detail-body{flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden;}
  .detail-fixed{padding:14px 14px 8px; flex:none;}
  .dv-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px;}
  .dv-head .sn-wrap{display:inline-flex; align-items:center; gap:8px;}
  .dv-head .sn{font-size:13px; font-weight:700; color:var(--tx-1);}
  .dv-kv{display:grid; grid-template-columns:70px 1fr; gap:6px 12px; font-size:11.5px; margin-bottom:14px;}
  .dv-kv .k{color:var(--tx-3);} .dv-kv .v{color:var(--tx-1);}
  .dv-sub{font-size:10.5px; font-weight:700; color:var(--tx-3); letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px;}
  .tl{position:relative; padding:0 14px 14px 30px; overflow-y:auto; flex:1; min-height:0;}
  .tl::before{content:""; position:absolute; left:19px; top:6px; bottom:6px; width:1px; background:var(--line);}
  .tl-item{position:relative; padding:6px 0 6px 8px; font-size:11.5px;}
  .tl-item::before{content:""; position:absolute; left:-11px; top:11px; width:9px; height:9px; border-radius:50%; background:var(--bg-2); border:2px solid var(--tx-3);}
  .tl-item.new::before, .tl-item.in::before{border-color:var(--accent);}
  .tl-item.out::before, .tl-item.as::before{border-color:var(--amber);}
  .tl-item .d{color:var(--tx-3); font-size:10.5px; font-variant-numeric:tabular-nums;}
  .tl-item .r{color:var(--tx-2); margin-top:2px;}
  .tl-item .rn{color:var(--accent); font-weight:600;}

  .stock-grid .empty{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    height:100%; color:var(--tx-3); gap:10px; text-align:center; font-size:12px; padding:20px;
  }
  .stock-grid .empty svg{width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.4px; opacity:.5;}

  /* 반응형 */
  @media (max-width:1200px){.stock-grid{grid-template-columns:260px 1fr 320px;}}
  @media (max-width:960px){.stock-grid{grid-template-columns:1fr; height:auto; overflow:auto;}}
  /* 현황변경 팝업 상단 모델/SN 정리 */
  .inv-edit-head{
    display:flex; flex-direction:column; gap:4px; margin:8px 0 4px;
    padding:10px 12px; background:var(--bg-1); border:1px solid var(--line-soft);
    border-radius:8px;
  }
  .inv-edit-head .ieh-row{display:grid; grid-template-columns:52px 1fr; align-items:center; gap:10px;}
  .inv-edit-head .ieh-k{font-size:10.5px; font-weight:700; color:var(--tx-3); letter-spacing:.04em;}
  .inv-edit-head .ieh-v{font-size:12.5px; font-weight:600; color:var(--tx-1); overflow-wrap:anywhere;}
  /* 대체 모델 불일치 확인 팝업 */
  .subst-warn{
    display:flex; gap:10px; align-items:flex-start; margin:10px 0 14px;
    font-size:13px; color:var(--tx-1); line-height:1.5;
  }
  /* 비밀번호 변경 모달 강제 안내 */
  .pw-forced-note{
    margin:8px 0 12px; padding:10px 12px; font-size:12px; line-height:1.5;
    color:var(--amber); background:rgba(240,169,64,.1);
    border:1px solid var(--amber); border-radius:8px;
  }
  .dept-manage .muted-cell{ color:var(--tx-3); font-size:11px; }
  /* 소속관리 하위탭 */
  .affiliation-tabs{ margin-bottom:14px; }
  .aff-pane.hidden{ display:none; }
  .subst-warn svg{width:22px; height:22px; color:var(--amber); flex:none; margin-top:1px;}
  .subst-cmp{
    display:flex; flex-direction:column; gap:6px; padding:10px 12px;
    background:var(--bg-1); border:1px solid var(--line); border-radius:8px;
  }
  .subst-cmp .row{display:grid; grid-template-columns:96px 1fr; align-items:center; gap:10px; font-size:12.5px;}
  .subst-cmp .row .k{color:var(--tx-3); font-size:11px; font-weight:600;}
  .subst-cmp .row .v{color:var(--tx-1); font-weight:600;}
  .subst-cmp .row .v.detected{color:var(--amber);}
  .subst-hint{margin-top:10px; font-size:11.5px; color:var(--tx-2);}
  .link-cell{color:var(--tx-1); text-decoration:none; border-bottom:1px dashed var(--line);}
  .link-cell:hover{color:var(--accent); border-bottom-color:var(--accent); border-bottom-style:solid;}

  /* 설치 등록 팝업 - S/N별 Bucky 선택 */
  .sn-bucky-list{
    max-height:220px; overflow-y:auto; border:1px solid var(--line);
    border-radius:var(--radius-sm); background:var(--bg-1); padding:6px;
  }
  .sn-bucky-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:7px 8px; border-radius:6px;
  }
  .sn-bucky-row + .sn-bucky-row{border-top:1px solid var(--line-soft);}
  .sn-bucky-row .sn{font-size:11.5px; color:var(--tx-1); font-weight:600;}
  .sn-bucky-row .model{font-size:10.5px; color:var(--tx-3);}
  .bucky-choices{display:flex; gap:4px; flex:none;}
  .bucky-choice{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    background:var(--bg-2); border:1px solid var(--line); border-radius:7px;
    padding:5px 7px; cursor:pointer; color:var(--tx-3); transition:.15s;
    min-width:46px;
  }
  .bucky-choice:hover{color:var(--tx-1); border-color:var(--tx-3);}
  .bucky-choice.active{
    background:var(--accent-ghost); border-color:var(--accent); color:var(--accent);
  }
  .bucky-choice svg{width:17px; height:17px;}
  .bucky-choice span{font-size:8.5px; letter-spacing:.02em;}

  /* 제품/현장정보의 S/N - 클릭 시 신규 VOC 작성 모드 */
  .sn-clickable{
    color:var(--tx-1) !important; cursor:pointer;
    border-bottom:1px dashed var(--line);
  }
  .sn-clickable:hover{
    color:var(--accent) !important;
    border-bottom-color:var(--accent); border-bottom-style:solid;
  }

  /* 검색 입력란 강조 (S/N · 병원명 검색) */
  /* 검색 입력란: 상시 강조 대신 표면 대비로 구분하고, 강조색은 포커스에만 */
  .search-row input{
    background:var(--bg-3); border-color:var(--line);
  }
  .search-row input::placeholder{color:var(--tx-3);}
  .search-row input:focus{
    background:var(--bg-2); border-color:var(--accent);
    box-shadow:0 0 0 2px var(--accent-ghost);
  }

  /* 워런티 OUT 강조 */
  .warranty-out{color:var(--red); font-weight:700;}

  /* 언어 토글 (로그인 화면 상단) */
  /* 로그인 화면 언어 전환: 카드 바로 아래 중앙 */
  .lang-toggle{
    display:flex; gap:2px; flex:none;
    background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:3px;
  }
  .lang-toggle button{
    background:transparent; border:none; color:var(--tx-3); cursor:pointer;
    padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:600;
  }
  .lang-toggle button.active{background:var(--teal); color:#03243a;}
  .lang-toggle button:hover:not(.active){color:var(--tx-1);}
  .segment button.active{background:var(--teal); color:#03243a;}
  .segment button:hover:not(.active){color:var(--tx-1);}

  /* 목록 카드가 좌측 컬럼 전체 높이와 정렬되도록 col-right를 flex 컨테이너로 */
  .col-right{display:flex; flex-direction:column;}
  .col-right > .card{display:flex; flex-direction:column; flex:1; min-height:0;}
  .col-right .table-scroll{flex:1; min-height:0; overflow:auto;}

  /* 페이지네이션 */
  .pagination{
    display:flex; justify-content:center; align-items:center; gap:4px;
    padding:12px 8px 4px; border-top:1px solid var(--line-soft);
  }
  .page-btn{
    min-width:28px; height:28px; padding:0 8px; border-radius:6px;
    border:1px solid var(--line); background:var(--bg-1); color:var(--tx-2);
    font-size:12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  }
  .page-btn:hover:not(:disabled){background:var(--bg-3); color:var(--tx-1);}
  .page-btn:disabled{opacity:.3; cursor:not-allowed;}
  .page-btn.current{background:var(--accent); color:#03243a; border-color:var(--accent); font-weight:700;}
  .page-info{font-size:11.5px; color:var(--tx-3); margin:0 10px;}

  /* 로그인 화면 */
  .login-wrap{
    min-height:100vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:16px;
  }
  .login-card{width:360px; padding:14px 26px 28px;}
  .login-hero{
    display:flex; justify-content:center; align-items:center;
    margin:0 -26px 18px; padding:22px 0 14px;
    border-bottom:1px solid var(--line-soft);
  }
  .login-hero-logo{max-width:80%; height:auto; display:block;}
  .login-btn-row{display:flex; justify-content:center; margin-top:16px;}
  .btn-quarter{width:25% !important; min-width:110px !important; margin:0 !important;}

  /* 구분 선택 - 슬라이딩 토글 스타일 (누를 수 있게 명확히 표현) */
  .role-toggle{
    position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0;
    background:var(--bg-1); border:1px solid var(--line); border-radius:999px;
    padding:4px; margin-bottom:12px; overflow:hidden;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
  }
  .role-toggle-thumb{
    position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
    background:linear-gradient(135deg, var(--teal) 0%, #1B87C4 100%);
    border-radius:999px; transition:transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow:0 2px 8px rgba(41,173,238,.35);
    pointer-events:none;
  }
  .role-toggle[data-active="mfg"] .role-toggle-thumb{transform:translateX(100%);}
  .role-toggle[data-active="none"] .role-toggle-thumb{opacity:0;}
  .role-toggle button{
    position:relative; z-index:1; background:transparent; border:none;
    padding:9px 10px; border-radius:999px; cursor:pointer;
    font-size:13px; font-weight:600; color:var(--tx-2);
    transition:color .18s;
  }
  .role-toggle button:hover{color:var(--tx-1);}
  .role-toggle[data-active="dealer"] button[data-role="dealer"],
  .role-toggle[data-active="mfg"] button[data-role="mfg"]{color:#03243a;}
  .login-card .field-label{margin-top:10px;}
  .btn-primary{
    width:100%; margin-top:16px; padding:10px; border-radius:var(--radius-sm);
    background:var(--teal); border:1px solid var(--teal); color:#03243a; font-weight:700;
    font-size:13px; cursor:pointer;
  }
  .btn-primary:hover{filter:brightness(1.08);}
  .msg{font-size:11.5px; margin-top:10px; min-height:14px;}
  .msg.error{color:var(--red);}
  .msg.ok{color:var(--green);}
  .hidden{display:none !important;}

  /* VOC S/N 일괄 매핑 팝업 [2026-10] */
  .voc-map-head{ display:flex; align-items:center; margin-bottom:8px; }
  .voc-map-list{
    max-height:260px; overflow-y:auto; border:1px solid var(--line);
    border-radius:8px; background:var(--bg-1); padding:4px;
  }
  .voc-map-row{
    display:grid; grid-template-columns:20px 120px 1fr 86px; align-items:center;
    gap:8px; padding:7px 8px; font-size:12px; border-radius:6px; cursor:pointer;
  }
  .voc-map-row:hover{ background:var(--bg-2); }
  .voc-map-row .vm-recv{ font-family:var(--mono, monospace); color:var(--tx-2); font-size:11px; }
  .voc-map-row .vm-title{ color:var(--tx-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .voc-map-row .vm-date{ color:var(--tx-3); font-size:11px; text-align:right; }

  /* 동시편집 충돌 팝업 [2026-10] */
  .cf-dialog{ width:min(760px, 96vw); }
  .cf-summary{ font-size:13px; color:var(--tx-1); margin:8px 0 4px; line-height:1.5; }
  .cf-summary .cf-target{ color:var(--tx-3); font-size:12px; }
  .cf-hint{ font-size:11.5px; color:var(--tx-2); margin-bottom:10px; }
  .cf-head, .cf-row{ display:grid; grid-template-columns:120px 1fr 1fr; gap:10px; align-items:start; }
  .cf-head{ font-size:11px; font-weight:700; color:var(--tx-3); letter-spacing:.04em; padding:0 8px 6px; border-bottom:1px solid var(--line); }
  .cf-rows{ max-height:52vh; overflow-y:auto; }
  .cf-row{ padding:8px; border-bottom:1px solid var(--line-soft); }
  .cf-row:nth-child(even){ background:var(--bg-1); }
  .cf-label{ font-size:12px; color:var(--tx-2); font-weight:600; padding-top:7px; }
  .cf-theirs{ font-size:12.5px; color:var(--tx-1); padding:7px 10px; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:6px; white-space:pre-wrap; word-break:break-word; min-height:32px; }
  .cf-mine input, .cf-mine select, .cf-mine textarea{ width:100%; margin:0; }
  .cf-mine{ border-left:2px solid var(--amber); padding-left:8px; }

  /* ───────────────────────── 사진 첨부 [2026-10] ───────────────────────── */
  .photo-area{ display:block; }
  .photo-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap:8px; }
  .photo-cell{
    position:relative; aspect-ratio:1/1; border-radius:var(--radius-sm);
    overflow:hidden; background:var(--bg-3); border:1px solid var(--line);
    display:flex; flex-direction:column;
  }
  .photo-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
  .photo-cell .photo-ph{ flex:1; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--tx-3); padding:4px; text-align:center; word-break:break-all; }
  .photo-cell-bar{
    position:absolute; left:0; right:0; bottom:0; height:22px;
    display:flex; justify-content:space-between; align-items:center;
    padding:0 6px; background:linear-gradient(to top, rgba(0,0,0,.65), transparent);
    font-size:10.5px; color:#fff;
  }
  .photo-cell-bar a{ color:#fff; text-decoration:underline; }
  .photo-cell-bar .photo-del{
    background:transparent; border:0; color:#fff; cursor:pointer; font-size:14px; line-height:1; padding:0 2px;
  }
  .photo-pending.uploading{ outline:2px solid var(--accent); }
  .photo-pending.failed{ outline:2px solid var(--red); }
  .photo-add{
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    cursor:pointer; border-style:dashed; color:var(--tx-3);
  }
  .photo-add:hover{ color:var(--accent); border-color:var(--accent); }
  .photo-add-plus{ font-size:28px; line-height:1; font-weight:300; }
  .photo-add-label{ font-size:10.5px; margin-top:3px; }
  .photo-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:11px; color:var(--tx-3); }
  .photo-retry{ font-size:11px; padding:4px 10px; border-radius:6px; border:1px solid var(--red); background:transparent; color:var(--red); cursor:pointer; }

  /* ───────────────────────── 사진 저장소 설정 [2026-10] ───────────────────────── */
  .photo-storage .now-row{ display:flex; align-items:center; gap:10px; margin:4px 0 14px; }
  .photo-storage .options{ display:flex; flex-direction:column; gap:8px; }
  .photo-storage .radio-row{
    display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
    background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md); cursor:pointer;
  }
  /* 전역 input{width:100%} 가 라디오까지 잡아 늘어나던 문제 — 라디오는 고정 크기 [2026-10-19] */
  .photo-storage .radio-row input[type="radio"]{ width:16px; height:16px; min-width:16px; flex:none; margin:3px 0 0; padding:0; accent-color:var(--accent); }
  .photo-storage .radio-row > div{ flex:1; min-width:0; }
  .photo-storage .rr-desc .page-btn{ margin-left:4px; }
  .photo-storage .rr-desc .muted{ color:var(--tx-3); }
  .photo-storage .migrate-row{ margin-top:12px; display:flex; align-items:center; gap:10px; font-size:12px; color:var(--tx-2); flex-wrap:wrap; }
  .photo-storage code{ font-size:11px; color:var(--tx-2); background:var(--bg-1); padding:1px 6px; border-radius:4px; }
  .local-folders{ margin-top:12px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-2); }
  .local-folders .lf-head{ font-size:12px; color:var(--tx-1); font-weight:600; margin-bottom:8px; }
  .local-folders .lf-row{ display:grid; grid-template-columns:110px 170px 1fr 44px; gap:8px; align-items:center; margin:6px 0; font-size:12px; }
  .local-folders .lf-row label{ color:var(--tx-2); }
  .local-folders .lf-row input{ margin:0; }
  .local-folders .lf-path{ color:var(--tx-3); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .local-folders .lf-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; font-size:11.5px; }
  .local-folders .lf-foot .page-btn{ white-space:nowrap; flex:none; }
  .photo-env{ grid-template-columns:1fr; }
  .photo-env .env-col{ max-width:640px; }
  .photo-storage .rr-title{ font-size:13px; color:var(--tx-1); font-weight:700; }
  .photo-storage .rr-desc{ font-size:11.5px; color:var(--tx-2); margin-top:3px; }
  .photo-storage .root-row{ margin-top:12px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--tx-2); }
  .photo-storage .help{ margin-top:14px; font-size:11.5px; color:var(--tx-3); line-height:1.5; border-top:1px solid var(--line-soft); padding-top:10px; }

  /* ───────────────────────── 모바일 모드 [2026-10] ─────────────────────────
     폭 < 768 && 터치: body.mobile-mode 가 켜지고 복잡한 PC 레이아웃이 수직 스택으로 재배치된다. */
  .tab.mobile-hidden{ display:none !important; }
  .mobile-pc-toggle{
    position:fixed; bottom:44px; right:10px; z-index:200;
    padding:6px 12px; font-size:11px; font-weight:700;
    background:var(--accent-ghost); color:var(--accent); border:1px solid var(--accent);
    border-radius:999px; cursor:pointer;
  }
  body:not(.mobile-mode) .mobile-pc-toggle{ bottom:auto; top:8px; right:8px; }
  /* body.mobile-mode 는 Mobile.active() 가 켜고/끈다 — @media 없이 클래스에만 반응하므로 뷰포트 폭 세팅과 독립 */
  body.mobile-mode .tabs{ overflow-x:auto; }
  body.mobile-mode .tab-page{ display:block !important; }
  body.mobile-mode .tab-page.hidden{ display:none !important; }
  body.mobile-mode #vocTopBar, body.mobile-mode #vocProductInfo{ font-size:12px; }
  body.mobile-mode [data-tab-page="voc"]{ flex-direction:column !important; gap:10px; padding:0 12px 90px; }
  body.mobile-mode [data-tab-page="voc"] > *{ width:100% !important; max-width:100% !important; min-width:0 !important; }
  body.mobile-mode .card{ padding:12px 14px; border-radius:14px; }
  body.mobile-mode .grid2{ grid-template-columns:1fr !important; }
  body.mobile-mode .grid-contact{ grid-template-columns:1fr !important; }
  body.mobile-mode input, body.mobile-mode select, body.mobile-mode textarea, body.mobile-mode button{ font-size:14px; min-height:40px; }
  body.mobile-mode table{ font-size:12px; }
  body.mobile-mode .search-row{ flex-wrap:wrap; }
  body.mobile-mode [data-tab-page="install"] table, body.mobile-mode [data-tab-page="inventory"] table{ min-width:720px; }
  body.mobile-mode .tab-page{ overflow-x:auto; }
  /* 모바일 탭 — 상단 그대로. 가로로 꽉 채워 보이도록만 정리. 하단에는 시계 바. [2026-10 결정] */
  body.mobile-mode .tabs{ margin:0; padding:4px 8px 0; gap:4px; display:flex; }
  body.mobile-mode .tabs .tab{
    flex:1; justify-content:center; padding:12px 4px; font-size:13px; font-weight:700;
    border-radius:10px 10px 0 0;
  }
  body.mobile-mode .tabs .tab.active{ color:var(--accent); background:var(--accent-ghost); }
  body.mobile-mode .app{ padding-bottom:48px; }   /* 하단 시계바 자리 */

  /* 모바일 상단바는 심플하게 — 시계·역할 표시는 하단으로 이동, 아이콘만 유지 [2026-10] */
  body.mobile-mode .banner1-actions .who-block{ display:none; }
  body.mobile-mode .icon-with-badge{ display:none !important; }   /* 환경설정 아이콘: 모바일에선 비밀번호·로그아웃만 노출 [2026-10] */
  body.mobile-mode .banner1-actions{ gap:6px; }
  body.mobile-mode .icon-btn{ width:40px; height:40px; }

  /* 모바일 하단 시계 바 — PC 에서는 숨김 */
  .mobile-clock{ display:none; }
  body.mobile-mode .mobile-clock{
    display:flex; align-items:center; justify-content:center;
    position:fixed; left:0; right:0; bottom:0; height:32px; z-index:50;
    background:var(--bg-0); border-top:1px solid var(--line-soft);
    color:var(--tx-3); font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:.03em;
  }

  /* 모바일에서만 숨길 요소 공통 유틸 (PC 는 그대로 보임) */
  body.mobile-mode .mobile-hide{ display:none !important; }
  /* 모바일 전용 요소(사진 첨부 등) — PC 에서는 숨김 [확정 2026-10-19] */
  body:not(.mobile-mode) .mobile-only{ display:none !important; }
  body.mobile-mode .photo-grid{ grid-template-columns: repeat(3, 1fr); }
  body.mobile-mode .photo-cell-bar{ height:26px; font-size:12px; }

  /* ═══════════════════════ 컨트롤 치수 통일 [2026-10] ═══════════════════════
     규칙 (사용자 결정): 장문 서술형(textarea) 을 제외한
       - 모든 입력 필드(input/select/date) 높이      → --ctl-h
       - 필드 제목(.field-label) 과 필드 간 간격       → 위 10px / 아래 6px
       - 모든 아이콘 버튼 가로세로                     → --icon-size (표 안 행 액션은 --icon-size-sm)
     이 블록은 파일 맨 끝에 두어 위의 개별 규칙들을 덮어쓴다. 새 컨트롤은 아래 토큰을 쓸 것. */
  :root{
    --ctl-h:36px;          /* 입력 필드·텍스트 버튼 높이 */
    --icon-size:36px;      /* 상단·카드 헤더·검색 등 아이콘 버튼 */
    --icon-size-sm:28px;   /* 표 행 안 액션 아이콘 */
    --icon-svg:16px;
    --icon-svg-sm:14px;
    --label-gap-top:10px;
    --label-gap-bottom:6px;
  }

  /* ① 입력 필드 높이 */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  select{
    height:var(--ctl-h); min-height:var(--ctl-h); padding-top:0; padding-bottom:0;
    box-sizing:border-box; line-height:normal;
  }
  textarea{ min-height:calc(1.5em * 3 + 18px); }                /* 서술형: 3줄 기준, 높이 통일 대상 아님 */
  .vm-fb-select, .vm-fb-input{ height:var(--ctl-h); }
  .role-toggle.compact{ height:var(--ctl-h); }

  /* ② 필드 제목 간격 — 어디서든 같은 리듬 */
  .field-label{ margin:var(--label-gap-top) 0 var(--label-gap-bottom) 2px; line-height:1.2; }
  .field-label:first-child, .grid2 > div > .field-label:first-child, .card-head + .field-label,
  .settings-form .field-label:first-child{ margin-top:0; }
  .grid2, .grid-contact{ gap:8px 10px; }
  .grid2 > div > input, .grid2 > div > select, .grid-contact > div > input{ margin-bottom:0; }
  .voc-detail .field-label{ margin:var(--label-gap-top) 0 var(--label-gap-bottom) 2px; }
  .settings-form .field-label{ margin:var(--label-gap-top) 0 var(--label-gap-bottom) 2px; }

  /* ③ 아이콘 버튼 크기 — 한 종류 */
  .ic, .icon-btn, .search-btn, .ic.teal, .ic.red, .ic.red-ic, .ship-tools .ic, .cal-btn{
    width:var(--icon-size); height:var(--icon-size); min-width:var(--icon-size);
    border-radius:10px; flex:none;
  }
  .ic svg, .icon-btn svg, .search-btn svg, .ship-tools .ic svg{ width:var(--icon-svg); height:var(--icon-svg); }
  .cal-btn{ width:auto; min-width:44px; }
  /* 표 행 안 액션(.ic.sm 등) — 작은 쪽 한 종류 */
  .ic.sm, .ic-btn, .lane-add, .dtable .x, .pill .del-btn, .note-detail-actions .ic, .fit-table td.col-action .ic{
    width:var(--icon-size-sm); height:var(--icon-size-sm); min-width:var(--icon-size-sm); border-radius:7px;
  }
  .ic.sm svg, .ic-btn svg, .note-detail-actions .ic svg{ width:var(--icon-svg-sm); height:var(--icon-svg-sm); }
  .cal-btn-sm{ height:var(--icon-size-sm); }

  /* ④ 텍스트 버튼 높이도 입력 필드와 맞춤 */
  .page-btn, .btn{ height:var(--ctl-h); min-height:var(--ctl-h); display:inline-flex; align-items:center; justify-content:center; padding-top:0; padding-bottom:0; }
  .page-btn.sm{ height:var(--icon-size-sm); min-height:var(--icon-size-sm); font-size:11px; padding:0 8px; }
  .btn-primary{ min-height:40px; padding-top:0; padding-bottom:0; display:inline-flex; align-items:center; justify-content:center; }

  /* 모바일은 손가락 기준으로 한 단계 크게 (같은 토큰만 재정의) */
  body.mobile-mode{ --ctl-h:44px; --icon-size:40px; --icon-size-sm:32px; --icon-svg:18px; --icon-svg-sm:15px; }
  body.mobile-mode .icon-btn{ width:var(--icon-size); height:var(--icon-size); }

  /* ───────── CDN/RMA 상단 필터 드롭다운 [2026-10] ─────────
     칩 옆의 "기타 ▾"·경과 ▾·기간 ▾ 는 세그먼트와 같은 높이·톤의 select 로. 통일 블록의 --ctl-h 보다 작게 둔다(세그먼트 안). */
  .seg-select, .fu-period .seg-select, .date-range-wrap .date-range-quick, .date-range-wrap input[type="date"]{
    height:30px !important; min-height:30px !important; width:auto; padding:0 26px 0 10px;
    font-size:12px; font-weight:600; color:var(--tx-2); background:var(--bg-1); border:1px solid var(--line);
    border-radius:7px; font-family:inherit;
  }
  .fu-seg .seg-select{ border:none; background:var(--bg-1); margin:0 2px; }
  .seg-select.active{ color:var(--accent); background:var(--accent-ghost); border-color:var(--accent); }
  .seg-select:disabled{ opacity:.5; }
  .date-range-wrap{ display:inline-flex; align-items:center; gap:6px; }
  .date-range-wrap .date-range-custom{ display:inline-flex; align-items:center; gap:4px; }
  .date-range-wrap input[type="date"]{ width:132px; padding:0 8px; font-weight:500; }

  /* RMA 출하완료 F/U 토글 (결론=원인불명) [2026-10] */
  .seg-toggle{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; margin-left:4px;
    border-radius:7px; font-size:12px; font-weight:700; color:var(--tx-2); cursor:pointer; user-select:none; }
  .seg-toggle input{ width:14px; height:14px; min-height:0; margin:0; accent-color:var(--amber); }
  .seg-toggle.active{ color:var(--amber); background:rgba(240,169,64,.14); }
  .seg-toggle .cnt{ font-size:10.5px; padding:1px 6px; border-radius:999px; background:var(--bg-3); color:var(--tx-2); }

  /* 대리점 코드(H-00001) — 매칭 키 전용이라 목록에서는 이름 옆에 작게만 [2026-10-19] */
  .dealer-code{ font-size:10.5px; color:var(--tx-3); margin-left:6px; font-variant-numeric:tabular-nums; letter-spacing:.02em; }

  /* 대리점 정보 머리줄: 제목 | +·편집 | (여백) | 초기화·삭제 [2026-10-19] */
  .dealer-form-head{gap:10px;}

  /* ───────── 설치완료 표: 병원명은 자르지 않고(최소 200px), 주소가 남는 폭을 차지하며 말줄임 [확정 2026-10-20] ─────────
     열 순서: 1 S/N · 2 모델 · 3 목적 · 4 설치일자 · 5 Bucky · 6 병원명 · 7 주소 · 8 국가 · 9 액션 */
  .pane-installed th:nth-child(5), .pane-installed td:nth-child(5){width:1px; min-width:0;}          /* Bucky (옛 '흡수' 규칙 해제) */
  .pane-installed th:nth-child(6), .pane-installed td.hosp-cell{
    width:auto; min-width:200px; max-width:none; overflow:visible; text-overflow:clip;
    white-space:nowrap; text-align:left; color:var(--tx-1);
  }
  .pane-installed th:nth-child(7), .pane-installed td.addr-cell{
    width:100%; max-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left;
  }
  .pane-installed td.addr-cell{color:var(--tx-2);}