/* ============================================================
   S카고 AX 디자인 시스템 v2 — 프리미엄 엔터프라이즈 UI
   1차(매뉴얼 그리드) 호환 + 2차(통합/포털/자동화) 고급 컴포넌트.
   ============================================================ */
:root{
  --sc-text:#1f2937; --sc-muted:#6b7280; --sc-line:#e5e7eb; --sc-line2:#eef1f5;
  --sc-head:#f3f5f8; --sc-head2:#e9edf1; --sc-bg:#f4f6fa;
  --sc-navy:#0b1f3a; --sc-navy2:#11315a;
  --sc-blue:#2563eb; --sc-blue-d:#1d4ed8; --sc-indigo:#4338ca; --sc-teal:#0d9488;
  --sc-accent:#f59e0b;
  --sc-green:#16a34a; --sc-amber:#d97706; --sc-red:#dc2626; --sc-purple:#7c3aed;
  --sc-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.07);
  --sc-shadow-lg:0 8px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);
  --sc-radius:12px;
}

/* ── 타이틀/패널 ── */
.sc-title{ font-size:20px; font-weight:800; color:#0f172a; letter-spacing:-.4px; }
.sc-panel{ background:#fff; border:1px solid var(--sc-line); border-radius:var(--sc-radius);
           padding:16px 18px; margin-bottom:14px; box-shadow:var(--sc-shadow); }

/* ── 페이지 히어로(2차 헤더) ── */
.sc-hero{ background:var(--sc-navy);
          color:#fff; border-radius:16px; padding:22px 24px; margin-bottom:16px; position:relative; overflow:hidden;
          box-shadow:var(--sc-shadow-lg); }
.sc-hero::after{ content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px; pointer-events:none;
                 background:radial-gradient(circle, rgba(255,255,255,.10), transparent 70%); }
/* 히어로 내 버튼/링크는 장식 원 위에서 클릭 가능하도록 */
.sc-hero > *{ position:relative; z-index:1; }
.sc-hero h1{ margin:0; font-size:22px; font-weight:800; letter-spacing:-.4px; display:flex; align-items:center; gap:10px; }
.sc-hero .sub{ margin-top:6px; font-size:13px; color:#c7d6ee; max-width:760px; }
.sc-hero .pill{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.22); }
/* 구형 헤더(sc-title) 패널을 히어로로 승격했을 때 가독성 보정 */
.sc-hero .sc-title{ color:#fff; }
.sc-hero a{ color:#cdd9ee; }
.sc-hero a.sc-btn.line{ color:#1d4ed8; }
.sc-hero a.sc-btn.primary{ color:#fff; }

/* ── 프리미엄 카드 ── */
.sc-card{ background:#fff; border:1px solid var(--sc-line); border-radius:14px; padding:16px; box-shadow:var(--sc-shadow);
          transition:transform .14s, box-shadow .14s, border-color .14s; }
.sc-card:hover{ transform:translateY(-2px); box-shadow:var(--sc-shadow-lg); border-color:#dbe3ef; }
.sc-card.link{ display:block; text-decoration:none; color:inherit; }
.sc-grid-cards{ display:grid; gap:14px; }
.sc-grid-cards.c2{ grid-template-columns:repeat(2,1fr); }
.sc-grid-cards.c3{ grid-template-columns:repeat(3,1fr); }
.sc-grid-cards.c4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .sc-grid-cards.c3,.sc-grid-cards.c4{ grid-template-columns:repeat(2,1fr); } }

/* ── KPI ── */
.sc-kpi{ display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--sc-line);
         border-radius:14px; padding:16px 18px; box-shadow:var(--sc-shadow); transition:.14s; }
.sc-kpi:hover{ transform:translateY(-2px); box-shadow:var(--sc-shadow-lg); border-color:#c7d2fe; }
.sc-kpi .k-label{ font-size:12px; color:var(--sc-muted); font-weight:600; }
.sc-kpi .k-value{ font-size:26px; font-weight:800; color:#0f172a; margin:6px 0 2px; letter-spacing:-.5px; }
.sc-kpi .k-sub{ font-size:11px; color:#9aa7b8; }
.sc-kpi.u{ opacity:.62; background:#fbfbfc; }

/* ── 검색바 ── */
.sc-searchbar{ border:1px solid var(--sc-line); border-radius:12px; padding:12px 14px; background:#fff; box-shadow:var(--sc-shadow); }
.sc-searchbar .row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:3px 0; }
.sc-field label{ font-size:11px; color:var(--sc-muted); display:block; }
.sc-input, .sc-select{ border:1px solid #cbd2db; border-radius:8px; padding:7px 10px; font-size:12.5px; background:#fff; outline:none; transition:.12s; }
.sc-input:focus, .sc-select:focus{ border-color:var(--sc-blue); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.sc-select{ background:#fbfcfe; }

/* ── 콤보박스(자유입력+클릭 시 목록) — 네이티브 <datalist>가 브라우저마다(특히 Safari) 클릭만으로는
   안 뜨는 문제를 대체. JS(combobox.js)가 <input list="..."> 를 감지해 자동으로 이 마크업을
   덧씌운다. 값은 여전히 자유입력(강제 선택 아님) — 목록은 힌트일 뿐. ── */
.sc-combo{ position:relative; }
.sc-combo-menu{ position:absolute; z-index:40; top:calc(100% + 4px); left:0; min-width:100%; max-width:360px;
  max-height:260px; overflow-y:auto; background:#fff; border:1px solid var(--sc-line); border-radius:8px;
  box-shadow:var(--sc-shadow-lg); padding:4px; display:none; }
.sc-combo-menu.open{ display:block; }
/* 아래 공간이 부족한 필드(표/페이지 하단)에서 combobox.js가 이 클래스를 토글 — 위로 뒤집는다. */
.sc-combo-menu.up{ top:auto; bottom:calc(100% + 4px); }
.sc-combo-opt{ padding:6px 9px; border-radius:6px; font-size:12.5px; cursor:pointer; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; color:var(--sc-text); }
.sc-combo-opt:hover, .sc-combo-opt.active{ background:var(--sc-bg); }
.sc-combo-opt b{ color:var(--sc-blue-d); }
.sc-combo-empty{ padding:6px 9px; font-size:11.5px; color:var(--sc-muted); }

/* ── 버튼 ── */
.sc-btn{ display:inline-flex; align-items:center; gap:5px; background:var(--sc-blue); color:#fff; border:1px solid var(--sc-blue);
         padding:7px 15px; border-radius:9px; font-size:12.5px; font-weight:600; cursor:pointer; text-decoration:none; line-height:1.2;
         transition:.13s; box-shadow:0 1px 2px rgba(37,99,235,.18); }
.sc-btn:hover{ background:var(--sc-blue-d); border-color:var(--sc-blue-d); transform:translateY(-1px); }
.sc-btn.primary{ background:linear-gradient(180deg,#7c3aed,#6d28d9); border-color:#6d28d9; }
.sc-btn.primary:hover{ filter:brightness(1.05); }
.sc-btn.gray{ background:#475569; border-color:#475569; }
.sc-btn.soft{ background:#eef4ff; border-color:#cfe0fb; color:#1d4ed8; box-shadow:none; }
.sc-btn.soft:hover{ background:#e2edff; }
.sc-btn.line{ background:#fff; border-color:#cdd5df; color:#334155; box-shadow:none; }
.sc-btn.line:hover{ background:#f5f8fc; border-color:#b9c4d2; }
.sc-btn.muted{ background:#eef1f5; border-color:#e1e5ea; color:#9aa3af; cursor:default; font-weight:500; box-shadow:none; }
.sc-btn.muted:hover{ filter:none; transform:none; }
.sc-btn.sc-pg{ padding:4px 10px; border-radius:7px; font-size:12.5px; font-weight:600; min-width:26px; justify-content:center; }
.sc-btn.sc-pg.current{ background:var(--scargo-primary,var(--sc-blue)); border-color:var(--scargo-primary,var(--sc-blue)); color:#fff; cursor:default; box-shadow:none; }
.sc-btn.sc-pg.current:hover{ transform:none; }
.sc-tag{ font-size:9px; background:#e2e8f0; color:#64748b; border-radius:6px; padding:1px 6px; margin-left:3px; }

.sc-fnbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ── 통계줄 ── */
.sc-stats{ font-size:12.5px; color:#334155; padding:10px 14px; background:#f8fafc; border:1px solid var(--sc-line2); border-radius:10px; }
.sc-stats b{ color:#0b1f3a; }

/* ── 조밀 그리드(매뉴얼 호환, 폴리시 강화) ── */
table.sc-grid{ width:100%; border-collapse:separate; border-spacing:0; font-size:12px; background:#fff;
               border:1px solid var(--sc-line); border-radius:12px; overflow:hidden; }
table.sc-grid th{ background:#f7f9fc; color:#475569; font-weight:700; padding:9px 10px; border-bottom:1px solid var(--sc-line);
                  white-space:nowrap; text-align:left; font-size:11.5px; letter-spacing:.2px; }
table.sc-grid td{ padding:8px 10px; border-bottom:1px solid var(--sc-line2); white-space:nowrap; color:var(--sc-text); }
table.sc-grid tr:last-child td{ border-bottom:0; }
table.sc-grid tbody tr:hover td{ background:#f6f9ff; }
/* 콤보박스 드롭다운(combobox.js)이 이 표의 둥근 모서리용 overflow:hidden에 잘림 — .sc-form table과
   같은 원인·같은 처방(열려 있는 동안만 해제). */
table.sc-grid:has(.sc-combo-menu.open){ overflow:visible; }
/* [2026-07-27] user-select:none 없으면 클릭 시 마우스가 미세하게(트랙패드 등) 움직일 때
   브라우저가 텍스트 드래그 선택으로 인식해 click 이벤트가 아예 안 터지는 경우가 있음(간헐적
   "행 클릭이 가끔 안 됨" 버그의 원인 — 실사용 재현 확인). */
table.sc-grid tr.clickable{ cursor:pointer; user-select:none; }
.sc-num{ text-align:right; } .sc-center{ text-align:center; }
table.sc-grid th.sc-num{ text-align:right; }

/* ── 상태 뱃지(소프트 톤) ── */
.sc-badge{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700;
           background:#eef1f5; color:#475569; }
.sc-badge.book{ background:#e0edff; color:#1d4ed8; }
.sc-badge.awb{ background:#dcfce7; color:#15803d; }
.sc-badge.close{ background:#ffedd5; color:#c2410c; }
.sc-badge.cancel{ background:#f1f5f9; color:#94a3b8; }
.sc-badge.warn{ background:#fee2e2; color:#b91c1c; }

/* ── 필드 설명 도움말 아이콘 + 커스텀 툴팁(순수 CSS, JS 0) ── */
.sc-help{ position:relative; display:inline-flex; align-items:center; justify-content:center;
          width:12px; height:12px; margin-left:5px; border-radius:50%;
          background:var(--scargo-section,#f3efe6); border:1px solid #5B5546; color:#5B5546;
          font-size:10px; font-weight:700; line-height:1; cursor:help;
          transform:translateY(-1px); }
.sc-help:hover, .sc-help:focus-visible{ background:#EDE7DA; }
.sc-help-tip{ position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%) translateY(4px);
          background:#1e293b; color:#f1f5f9; font-size:12.5px; font-weight:400; line-height:1.55;
          padding:9px 12px; border-radius:8px; width:max-content; max-width:260px; text-align:left;
          box-shadow:0 8px 20px rgba(15,23,42,.25); opacity:0; visibility:hidden; pointer-events:none;
          transition:opacity .15s ease, transform .15s ease, visibility .15s ease; z-index:60; }
.sc-help-tip::after{ content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
          border:5px solid transparent; border-top-color:#1e293b; }
.sc-help-tip strong{ font-weight:700; color:#fff; }
.sc-help:hover .sc-help-tip, .sc-help:focus-visible .sc-help-tip{
          opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
/* 표(.sc-form table)는 둥근 모서리용 overflow:hidden이 걸려있어 툴팁이 잘림 — 호버 중에만 해제 */
.sc-form table:has(.sc-help:hover), .sc-form table:has(.sc-help:focus-visible){ overflow:visible; }
/* 콤보박스 드롭다운(portal-combobox.js)도 같은 이유로 표 하단에서 잘림 — 열려 있는 동안만 해제. */
.sc-form table:has(.sc-combo-menu.open){ overflow:visible; }

/* ── 화면 설명 플로팅 도움말(details, JS 0) ── 패널 안이 아니라 독립된 여백 자리에 두는 용도.
   summary(배지)는 평범한 in-flow 요소라 그 자리를 그대로 차지하고, 본문 카드만 절대배치로
   버튼 바로 아래에 "떠오르는" 팝업처럼 렌더된다 — 불투명 배경+그림자라 아래 콘텐츠를 깔끔히
   덮어쓸 뿐 글자가 서로 겹쳐 읽히는 일은 없다(레퍼런스: G-ONE 레거시 "Tip" 팝업 스타일). */
.sc-float-help{ position:relative; display:inline-block; }
.sc-float-help > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center;
          gap:5px; padding:6px 13px; border-radius:999px; background:#fff;
          border:1px solid #cdd5df; color:#334155; font-size:12px; font-weight:700; }
.sc-float-help > summary::-webkit-details-marker{ display:none; }
.sc-float-help > summary:hover, .sc-float-help > summary:focus-visible{ background:#f5f8fc; border-color:#b9c4d2; }
.sc-float-help-body{ position:absolute; top:calc(100% + 8px); right:0; z-index:80;
          width:320px; max-width:82vw; text-align:left;
          background:#fff; color:#1f2937; font-size:13px; line-height:1.65;
          border:1px solid var(--sc-line,#d5dce6); border-radius:12px; padding:14px 16px;
          box-shadow:0 16px 36px rgba(15,23,42,.22); }
.sc-float-help-head{ font-size:14px; font-weight:850; margin-bottom:8px; display:flex;
          align-items:center; gap:6px; color:#111827; }
.sc-float-help-body strong{ font-weight:800; }
/* 클릭(details[open])이 기본 동작. 호버/키보드포커스로도 열리도록 UA의 닫힘 숨김을 덮어씀. */
.sc-float-help:hover > .sc-float-help-body,
.sc-float-help:focus-within > .sc-float-help-body{ display:block; }

.badge{ display:inline-block; padding:3px 11px; border-radius:999px; color:#fff; font-size:11px; font-weight:700; letter-spacing:.2px; }

.sc-loc{ display:inline-block; padding:1px 7px; border:1px solid #cbd5e1; border-radius:6px; font-size:10px; color:#475569; background:#fff; }
.sc-bl{ font-weight:700; color:#334155; }
.sc-x{ color:#dc2626; font-weight:800; } .sc-o{ color:#16a34a; font-weight:800; }

/* ── 폼 ── */
.sc-form table{ width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; border:1px solid var(--sc-line); border-radius:12px; overflow:hidden; }
.sc-form th{ background:#f7f9fc; color:#475569; text-align:left; padding:9px 12px; border-bottom:1px solid var(--sc-line2); width:150px; font-weight:700; }
.sc-form td{ padding:8px 12px; border-bottom:1px solid var(--sc-line2); }
.sc-form input, .sc-form select, .sc-form textarea{ border:1px solid #cbd2db; border-radius:8px; padding:6px 9px; font-size:12.5px; outline:none; transition:.12s; }
.sc-form input:focus, .sc-form select:focus, .sc-form textarea:focus{ border-color:var(--sc-blue); box-shadow:0 0 0 3px rgba(37,99,235,.12); }

/* ── 알림/노티스 ── */
.notice{ background:#fffbeb; border:1px solid #fde68a; color:#92400e; }

/* ── 부킹 Phase 1.5 popup ──
   원본 실화면 기준: head/info는 전체폭. 그 아래는 큰 틀에서 2열 — 좌측 스택(FLIGHT SCHEDULE/하우스
   미니그리드 → 마스터단독·하우스부킹 + 문서·사진)과 우측 side(전달내용+디멘션, 처음부터 끝까지 하나로
   이어짐). side를 outer grid의 여러 행에 걸치게(row-span) 하면 안 된다 — CSS Grid가 그 spanning
   높이를 이웃 행들에 나눠 분배해서 FLIGHT SCHEDULE 칸이 실제 내용보다 훨씬 길게 늘어나는 버그가 생김
   (실측: side 총높이가 flight행+master행에 나뉘어 반영됨). 그래서 outer grid는 "stack | side" 2열로만
   두고, flight/master/docs의 좌측 2단 배치는 stack 내부의 별도(중첩) 그리드로 처리해 side와 무관하게
   만든다. */
.bk-pop{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,360px);align-items:start;gap:18px 20px;background:#f8fafc;padding:14px;min-width:1900px}
.bk-pop *{box-sizing:border-box}
.bk-pop.kind-m{grid-template-areas:"head head" "info info" "stack side"}
.bk-pop.kind-h{grid-template-areas:"head head" "stack side"}
.bk-pop-head{grid-area:head;display:flex;align-items:center;gap:10px;background:#fff;color:#0f172a;padding:14px 16px;border-bottom:2px solid #e2e8f0}
.bk-pop-title{font-weight:850;font-size:23px;white-space:nowrap;flex-shrink:0;color:#0f172a}
.bk-pop-summary{font-size:13px;color:#334155;display:flex;gap:8px;flex-wrap:wrap}
.bk-pop-actions{margin-left:auto;display:flex;gap:6px;align-items:center}
.bk-area-info{grid-area:info}
.bk-area-stack{grid-area:stack;display:grid;grid-template-columns:minmax(760px,1.6fr) minmax(480px,1fr);grid-template-areas:"flight flight" "master docs";align-items:start;gap:18px 20px;min-width:0}
.bk-area-flight{grid-area:flight}
.bk-area-master{grid-area:master}
.bk-area-docs{grid-area:docs}
.bk-area-side{grid-area:side}
.bk-card{background:transparent;border:0;border-bottom:1px solid #e2e8f0;padding:0 0 12px;margin-bottom:12px}
.bk-card:last-child{border-bottom:0}
.bk-card h3{margin:0 0 8px;font-size:14px;font-weight:700;color:#0f172a}
.bk-card.bk-nohead h3{display:none}
.bk-area-side .bk-card{border-bottom:1px solid #e2e8f0}
.bk-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.bk-grid-7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px}
/* 원본은 필드마다 폭이 다르다(코드/숫자 칸은 좁고, 검색·자유입력 칸은 넓음) — 등폭 그리드로는 그 비율이
   안 나와 "칸이 다 커 보이는" 인상을 줌. 이 두 줄만 원본 비율에 맞춘 전용 칼럼폭을 쓴다. */
/* [2026-08-06] O/B DATE 1.05→1.5fr, Airline Acc 1.9→1.45fr (총합 8.7fr 불변 = 나머지 5열 폭 무변).
   O/B DATE 칸이 이번 사이클에 ob_date 단독(219px)에서 date+time 2분할이 되면서 각 109px 로 눌려
   ko-KR 로케일이 `2020. 02. 19.` 의 일자를 잘라먹었다(`2020. 02.` — ui-fidelity 실렌더 측정).
   각 칸 ≥147px 가 필요해 폭을 옮기되, 내주는 쪽은 값이 없는 disabled Phase2 자리(Airline Acc)로 골랐다. */
.bk-grid-info1{display:grid;grid-template-columns:1.3fr .85fr 1fr 1.5fr .9fr 1.7fr 1.45fr;gap:9px}
.bk-grid-info2{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px}
.bk-f{min-width:0}
.bk-f.span2,.bk-f.wide{grid-column:span 2}.bk-f.span3{grid-column:span 3}.bk-f.span6{grid-column:1/-1}
.bk-f label{display:block;font-size:11px;color:#64748b;font-weight:800;margin-bottom:3px}
.bk-f input,.bk-f select,.bk-f textarea{width:100%;border:1px solid #999;border-radius:5px;padding:7px 8px;font-size:12.5px;background:#fff}
.bk-f input[type=checkbox]{width:auto}
.bk-f.err input,.bk-f.err select,.bk-f.err textarea{border-color:#ef4444;background:#fef2f2}
.field-err{font-size:11px;color:#ef4444;font-weight:700;margin-top:2px}
.bk-pop-errbanner{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:6px;padding:8px 12px;font-size:12.5px;font-weight:700;margin-bottom:10px}
input.input-err,select.input-err,textarea.input-err{border-color:#ef4444!important;background:#fef2f2!important}
/* [2026-07-28] staging_form.html(.nb-f)/edit_2.html(.bk2-field)도 같은 err 강조 패턴 공유 */
.nb-f.err input,.nb-f.err select,.nb-f.err textarea,
.bk2-field.err input,.bk2-field.err select,.bk2-field.err textarea{border-color:#ef4444;background:#fef2f2}
/* G.W/C.W처럼 두 값이 하나의 박스 안에 "/"로 이어지는 원본 표기(별도 테두리 2개 아님) */
.bk-split2{display:flex;align-items:center;border:1px solid #999;border-radius:5px;background:#fff;overflow:hidden}
.bk-split2 input{border:0;padding:7px 6px;text-align:center;min-width:0}
.bk-split2 span{color:#94a3b8;padding:0 2px;flex:0 0 auto}
.bk-mini{width:100%;border-collapse:collapse;font-size:11px}
.bk-mini th,.bk-mini td{border-bottom:1px solid var(--sc-line);padding:5px 6px;white-space:nowrap;text-align:left}
.bk-mini th{background:#f1f5f9;color:#475569;font-size:10.5px}
.bk-mini-fixed{table-layout:fixed}
.bk-mini-fixed input{width:100%;min-width:0;border:1px solid #d8dee6;border-radius:4px;padding:3px 4px;font-size:11px}
.bk-mini-fixed th,.bk-mini-fixed td{white-space:normal;overflow:hidden}
.bk-note-kind{border-top:1px solid #eef2f7;padding-top:8px;margin-top:8px}
.bk-note-kind:first-of-type{border-top:0;padding-top:0;margin-top:0}
.bk-note-kind label{display:block;font-size:11px;font-weight:750;color:#475569;margin-bottom:4px}
.bk-note-kind textarea{width:100%;box-sizing:border-box;border:1px solid #999;border-radius:6px;padding:6px 8px;font-size:12px;color:#0f172a;resize:vertical}
.bk-note-list{margin-top:7px;display:flex;flex-direction:column;gap:4px}
.bk-note-row{display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:6px;align-items:start;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:5px 6px;font-size:11px;color:#334155;line-height:1.4}
.bk-note-row b{font-weight:800;color:#0f172a}
.bk-note-del{border:1px solid #fecaca;background:#fff;color:#b91c1c;border-radius:999px;width:20px;height:20px;line-height:16px;font-size:14px;font-weight:800;cursor:pointer}
.bk-note-empty{font-size:11px;color:#94a3b8}
.phase2{display:inline-flex;align-items:center;gap:4px;border:1px solid #fed7aa;background:#fff7ed;color:#c2410c;border-radius:999px;padding:1px 6px;font-size:10px;font-weight:800}
.p2ctl{opacity:.72}
.p2ctl input,.p2ctl button,.p2ctl select,.p2ctl textarea{background:#f8fafc;color:#94a3b8}
.bk-area-side{position:sticky;top:10px;align-self:start}
.seg-toggle{display:inline-flex;border:1px solid #cbd2db;border-radius:6px;overflow:hidden;width:100%}
.seg-toggle .seg-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;margin:0;padding:6px 8px;font-size:12px;font-weight:700;color:#64748b;cursor:pointer;background:#fff}
.seg-toggle .seg-btn:first-child{border-right:1px solid #cbd2db}
.seg-toggle .seg-btn input[type=checkbox],.seg-toggle .seg-btn input[type=radio]{display:none}
/* #f85f13는 원본 스크린샷에서 실측한 선택 토글 색상(공용 --sc-accent(#f59e0b)와 다름 — 이 컴포넌트에만 적용,
   전역 accent는 그대로 둠) */
.seg-toggle .seg-btn:has(input:checked){background:#f85f13;color:#fff}
/* 좁은 창에서 억지로 1열로 재배치하지 않는다(원본 legacy 앱도 데스크톱 전용, 반응형 아님) —
   대신 팝업 패널이 가로 스크롤되게 둔다(위 .bk-pop min-width 참고). */

/* ── 이레(관리08) 검색바 6슬롯 ───────────────────────────────── */
.iree-search{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.iree-search select,.iree-search input{ padding:7px 10px; border-radius:9px; border:1px solid var(--sc-line); font-size:13px; background:#fff; }
.iree-search input[name=keyword]{ width:150px; }
.iree-search .iree-search-tilde{ color:#64748b; }
.iree-search .iree-search-unit{ color:#64748b; margin-left:-2px; }

/* 팀 select와 담당자 검색콤보 폭 통일(2026-08-13) — 사용자 지적: 담당자 select가 옵션 텍스트
   길이 때문에 auto-width로 팀 select보다 넓어 보였음. 둘 다 동일한 명시적 width로 고정.
   선택자는 .iree-search-assignee(이레 현황 검색바 전용 클래스)로 한정 — .iree-search는 관리·회계
   27개 검색바가 공유하는 클래스라 그대로 쓰면 팀 select 폭이 무관한 화면까지 번진다
   (guard/qa 병렬검증 2026-08-13 독립 발견, GAP 없이 커밋 전 즉시 수정). */
.iree-search-assignee select[name=team],
.iree-search .iree-user-combo{ width:140px; box-sizing:border-box; }

/* 담당자 검색형 콤보박스(실시간 필터 + 초성 검색, static/js/iree_assignee_search.js) */
.iree-search .iree-user-combo{ position:relative; display:inline-block; }
.iree-search .iree-user-combo input{ width:100%; box-sizing:border-box; }
.iree-user-combo-list{ position:absolute; top:calc(100% + 2px); left:0; min-width:180px; max-height:240px;
  overflow-y:auto; background:#fff; border:1px solid var(--sc-line); border-radius:9px;
  box-shadow:0 6px 18px rgba(15,23,42,.12); z-index:50; margin:0; padding:4px; list-style:none; }
.iree-user-combo-list li{ padding:6px 8px; border-radius:6px; cursor:pointer; font-size:13px; color:#0f172a; }
.iree-user-combo-list li:hover,.iree-user-combo-list li.active{ background:#eef2ff; }
.iree-user-combo-list .iree-user-combo-empty{ color:#94a3b8; cursor:default; }
.iree-user-combo-list .iree-user-combo-empty:hover{ background:none; }

/* ── 이레 "이례 내역" 모달(오버레이) ─────────────────────────── */
.sc-modal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:1000;
  display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; }
.sc-modal{ background:#fff; border-radius:10px; width:min(1180px,96vw);
  box-shadow:0 12px 40px rgba(0,0,0,.25); }
.sc-modal-head,.sc-modal-foot{ display:flex; align-items:center; padding:16px 22px; }
.sc-modal-head{ justify-content:space-between; border-bottom:1px solid var(--sc-line); }
.sc-modal-foot{ justify-content:flex-end; gap:10px; border-top:1px solid var(--sc-line); }
.sc-modal-err{ margin:12px 22px 0; color:#b91c1c; font-size:13px; }
.iree-cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:16px 22px; }
.iree-occur,.iree-close{ display:flex; flex-direction:column; gap:8px; }
.iree-row{ display:flex; flex-wrap:wrap; gap:10px; }
.iree-row .iree-fld{ flex:1 1 140px; min-width:0; }
.iree-occur h3,.iree-close h3,.iree-attach h3{ margin:0 0 4px; font-size:14px; font-weight:800;
  display:flex; align-items:center; gap:10px; }
.iree-copy{ font-size:12px; font-weight:500; color:#475569; display:inline-flex; align-items:center; gap:4px; }
.iree-fld{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:#475569; }
.iree-fld input,.iree-fld select,.iree-fld textarea{ padding:7px 10px; border-radius:8px;
  border:1px solid var(--sc-line); font-size:13px; color:#0f172a; background:#fff; }
.iree-fld-wide{ grid-column:1 / -1; }
.iree-agent-wrap{ display:flex; gap:6px; align-items:center; }
.iree-agent-wrap input{ flex:1; min-width:0; background:#f8fafc; cursor:pointer; }
.iree-agent-search-btn{ flex:0 0 auto; padding:6px 9px; line-height:1; }
#iree-agent-name-display{ background:#f8fafc; color:#0f766e; font-weight:700; cursor:default; }
#iree-house-confirm-display{ background:#f8fafc; color:#0f766e; font-weight:700; cursor:default; }
.iree-e{ color:#b91c1c; font-size:11px; }
.iree-attach{ padding:4px 22px 16px; }
.iree-attach-list{ font-size:12px; color:#334155; margin-top:6px; min-height:18px;
  display:flex; flex-wrap:wrap; gap:10px; }
.iree-attach-item{ position:relative; display:inline-flex; flex-direction:column; align-items:center;
  gap:5px; padding:6px; border:1px solid #e2e8f0; border-radius:8px; background:#f8fafc; max-width:112px; }
.iree-attach-item img{ width:100px; height:100px; object-fit:cover; border-radius:6px; flex:0 0 auto; }
.iree-attach-dup-hint{ flex:1 0 100%; color:#b45309; font-size:11px; }
.iree-attach-item span{ font-size:11px; text-align:center; word-break:break-all; line-height:1.3; }
.iree-attach-item-remove{ position:absolute; top:-7px; right:-7px; width:19px; height:19px;
  border-radius:50%; border:1px solid #cbd5e1; background:#fff; color:#64748b; font-size:13px;
  line-height:1; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.iree-attach-item-remove:hover{ background:#fee2e2; border-color:#fca5a5; color:#b91c1c; }
.iree-attach-item-check{ position:absolute; top:-6px; left:-6px; width:16px; height:16px; z-index:2;
  cursor:pointer; accent-color:#1d4ed8; }
@media (max-width:820px){ .iree-cols{ grid-template-columns:1fr; } }

/* 하우스 검색모달(2026-08-14) 필터 폼 — iree_house_search_modal.js가 렌더
   2026-08-14: 1행(날짜/지점/선적구분)·2행(번호/선명/검색버튼)으로 고정 배치 */
.iree-house-filters{ display:flex; flex-direction:column; gap:10px;
  padding:12px 22px 8px; border-bottom:1px solid var(--sc-line); }
.iree-house-filters-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.iree-house-filters label{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:#475569; }
.iree-house-filters input,.iree-house-filters select{ padding:6px 9px; border-radius:8px;
  border:1px solid var(--sc-line); font-size:12px; color:#0f172a; background:#fff; }
.iree-house-daterange{ display:flex; align-items:center; gap:4px; }
.iree-house-daterange input{ width:132px; }
.iree-house-filters-row [data-iree-house-search-go]{ align-self:end; }

/* ── 부킹 레이아웃 1/2/3/4 스위처(list.html 기본 레이아웃 진입점) ── */
.bk-layout-switcher{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:10px 0; }
.bk-layout-label{ font-size:11.5px; font-weight:800; color:var(--sc-muted); margin-right:2px; }
.bk-layout-switcher a{ display:inline-flex; align-items:center; border:1px solid #cdd5df; background:#fff;
  color:#334155; border-radius:7px; padding:6px 11px; font-size:12.5px; font-weight:800; text-decoration:none; }
.bk-layout-switcher a:hover{ background:#f5f8fc; border-color:#b9c4d2; }
.bk-layout-switcher a.on{ background:var(--sc-blue); border-color:var(--sc-blue); color:#fff; }
/* ── 견적 작성 예상비용 사이드바(Phase B) ── */
.q-layout{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.q-main{ flex:1 1 540px; min-width:340px; }
.q-cost{ flex:0 0 300px; position:sticky; top:14px; padding:14px 16px; }
.q-cost-hd{ font-size:14px; font-weight:850; color:var(--sc-navy); display:flex;
  align-items:center; gap:8px; margin-bottom:10px; }
.q-cands{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; max-height:230px; overflow-y:auto; }
.q-cands-empty{ font-size:11.5px; color:var(--sc-muted); padding:8px 2px; line-height:1.5; }
.q-cand{ display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  padding:7px 9px; border:1px solid var(--sc-line); border-radius:8px; background:var(--sc-head);
  cursor:pointer; font-size:12px; }
.q-cand:hover{ border-color:var(--sc-blue); background:#eef4ff; }
.q-cand.on{ border-color:var(--sc-blue); background:#e2edff; }
.q-cand .a{ font-weight:800; color:var(--sc-navy); }
.q-cand .t{ font-size:10.5px; color:var(--sc-muted); }
.q-cand .r{ font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.q-bd{ width:100%; border-collapse:collapse; font-size:12px; }
.q-bd th{ text-align:left; font-weight:600; color:var(--sc-muted); padding:5px 0; }
.q-bd td{ text-align:right; font-variant-numeric:tabular-nums; padding:5px 0; color:var(--sc-text); }
.q-bd .q-bd-sub th, .q-bd .q-bd-sub td{ border-top:1px solid var(--sc-line); font-weight:800;
  color:var(--sc-text); padding-top:7px; }
.q-cost-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:11px;
  padding-top:10px; border-top:2px solid var(--sc-navy); }
.q-cost-total span{ font-weight:700; color:var(--sc-navy); }
.q-cost-total b{ font-size:18px; font-weight:900; color:var(--sc-navy); font-variant-numeric:tabular-nums; }

/* ── 견적 특수취급 다중선택 칩(D-cargo) ── */
.q-special{ display:flex; flex-wrap:wrap; gap:6px; }
.q-special-chip{ display:inline-flex; align-items:center; gap:4px; padding:4px 9px;
  border:1px solid var(--sc-line); border-radius:999px; background:var(--sc-head);
  font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.q-special-chip span{ font-weight:400; color:var(--sc-muted); font-size:10.5px; }
.q-special-chip:has(input:checked){ border-color:var(--sc-blue); background:#e2edff; color:var(--sc-blue-d); }

/* ── 인코텀즈 선택 위젯(고객 포털 견적요청) ── */
.q-side{ flex:0 0 300px; display:flex; flex-direction:column; gap:16px; }
.qi-panel{ padding:14px 16px; }
.qi-help{ font-size:11.5px; color:var(--sc-muted); margin:0 0 14px; line-height:1.5; }
.qi-track{ position:relative; }
.qi-vline{ position:absolute; left:15px; top:23px; bottom:23px; width:2px; background:var(--sc-line); }
.qi-vfill{ position:absolute; left:15px; top:23px; width:2px; background:var(--sc-accent); transition:height .15s ease; }
.qi-stop{ position:relative; display:flex; align-items:center; gap:10px; width:100%; height:46px;
  background:none; border:none; cursor:pointer; padding:0; text-align:left; border-radius:8px; }
.qi-stop .qi-ico{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:#fff; border:2px solid var(--sc-line);
  display:flex; align-items:center; justify-content:center; font-size:14px; }
.qi-stop .qi-lab{ font-size:12px; font-weight:700; color:var(--sc-text); }
.qi-stop.active .qi-ico{ border-color:var(--sc-navy); box-shadow:0 0 0 3px rgba(11,31,58,.14); }
.qi-stop.active .qi-lab{ color:var(--sc-navy); font-weight:800; }
.qi-stop:hover:not(.active){ background:var(--sc-head); }
.qi-matches{ margin-top:8px; }
.qi-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.qi-chip{ border:1.5px solid var(--sc-line); background:#fff; color:var(--sc-text); font-size:12px; font-weight:800;
  padding:5px 13px; border-radius:999px; cursor:pointer; }
.qi-chip.active{ border-color:var(--sc-navy); background:var(--sc-navy); color:#fff; }
.qi-nomatch{ font-size:11.5px; color:var(--sc-muted); margin:0; }
.qi-note{ font-size:10.5px; color:var(--sc-amber); background:#fdf3e0; border-radius:8px; padding:6px 10px; margin:0 0 8px; line-height:1.5; }
.qi-detail{ background:var(--sc-head); border-radius:10px; padding:12px 14px; margin-top:10px; }
.qi-detail:empty{ display:none; }
.qi-code{ font-size:15px; font-weight:900; color:var(--sc-navy); margin-bottom:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.qi-en{ font-size:11px; font-weight:600; color:var(--sc-muted); }
.qi-pct{ font-size:9.5px; font-weight:800; color:var(--sc-green); background:#e7f6ee; border-radius:999px; padding:2px 8px; }
.qi-row{ font-size:11.5px; color:var(--sc-text); line-height:1.75; }
.qi-row b{ color:var(--sc-muted); font-weight:700; margin-right:4px; }
.qi-inline-hint{ font-size:11px; color:var(--sc-muted); }