/* ---- Bootstrap 3 가 깔아 주던 기본값 ----
   **중요: Bootstrap 3 는 `html { font-size: 10px }` 을 설정한다.**
   원본 css(bbs/list/LIST1)가 rem 을 그 기준으로 쓰고 있어서(예: width:14rem, height:64rem),
   이걸 빼면 브라우저 기본 16px 이 되어 화면 전체가 1.6배로 부푼다.
   background-color 는 넣지 않는다 - bbs.css 의 body 배경 이미지를 덮어쓰면 안 된다. */
html { font-size: 10px; }
body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
       font-size: 14px; line-height: 1.42857143; color: #333; }
*, *::before, *::after { box-sizing: border-box; }
img { vertical-align: middle; border: 0; }
p, ol, ul { margin: 0; }
/* 제목 여백·줄높이. 운영은 Bootstrap 이 이 값을 주고 있었고 #header 의 로고(h1)와
   'ONLINE SERVICE REQUEST'(h2) 위치가 여기서 결정된다.
   이걸 0 으로 두면 h2 높이가 55px -> 71px 이 되고 제목이 23px 위로 올라간다. */
h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; }
h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; }
h1, h2, h3, h4, h5, h6 { line-height: 1.1; }
/* Bootstrap 이 걸어 주던 것 - 이게 없으면 목록의 제목 링크에 밑줄이 생긴다.
   색은 건드리지 않는다(제목은 상태색, 티켓번호는 파랑을 각자 지정해 쓴다). */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Bootstrap 3 에서 쓰던 것만 옮겨온 부분 ----
   원본은 이 몇 가지 때문에 Bootstrap 전체(CDN)를 불러왔다.
   .container-fluid 는 list.css/LIST1.css/bbs.css 가 이미 자기 값으로 덮어쓰고 있어서
   여기서는 최소 정의만 둔다. */
/* 좌우 15px 는 반드시 있어야 한다 - 운영 실측으로 #header/#nav 가 15..1890 에 놓인다.
   0 으로 두면 로고와 New/Logout 이 화면 가장자리에 15px 씩 더 붙는다. */
.container-fluid { margin: 0 auto; padding: 0 15px; }

/* 로그인 입력줄 (원본 .input-group / .input-group-addon) */
/* 원본은 display:table 이라 줄이 제 폭(321px)만 차지하며 가운데 놓였다.
   flex 로 바꾸면 li 폭(440px) 왼쪽에 붙어 로그인 버튼과 60px 어긋난다. */
.input-group { display: flex; align-items: stretch; justify-content: center; }
/* 폭을 직접 주면 안 된다 - 운영은 padding 10/16 + 아이콘 18px + 테두리 1px 로 51px 이 나온다
   (원본 마크업이 input-group-lg 를 달고 있었다). 100px 을 박아 두면 줄이 로그인 버튼보다 넓어진다. */
.input-group-addon { display: flex; align-items: center; justify-content: center;
                     padding: 10px 16px; font-size: 18px;
                     background: #eee; color: #555; border: 1px solid #ccc; border-right: 0;
                     border-radius: 6px 0 0 6px; }
.icon { width: 1.6rem; height: 1.6rem; fill: currentColor; vertical-align: -0.25rem; }
.input-group-addon .icon { width: 18px; height: 18px; }

/* 원본 DataGrid 가 코드/속성으로 뿜어내던 표 서식을 CSS 로 옮긴 것.
   두 목록의 서식이 서로 다르므로(원본도 그랬다) 클래스를 나눈다. */

table.grid { border-collapse: collapse; width: 100%; background: #fff; }

/* ---- 고객 목록 list.aspx ----
   운영 화면에서 실측: 셀마다 1px 검정 테두리, padding 0, 표 폭은 컬럼 합(100% 아님)
   헤더 16px(12pt) bold #464646 on #d8d7d7 / 셀 Open Sans 14px #464646, 높이 20px */
table.grid-list { width: auto; border: 1px solid #000; }
table.grid-list th { border: 1px solid #000; padding: 0; font-size: 16px; font-weight: bold;
                     text-align: center; color: #464646; background: #d8d7d7; height: 30px; }
/* line-height 는 반드시 normal - body 의 20px(14px x 1.428)을 물려받으면
   두 줄짜리 행이 39px -> 41px 로 벌어져 운영과 행 높이가 어긋난다. padding 도 운영은 0. */
table.grid-list td { border: 1px solid #000; padding: 0; font-family: 'Open Sans'; font-size: 14px;
                     text-align: center; color: #464646; height: 20px; line-height: normal; }
table.grid-list tbody tr:hover td { background: silver; cursor: pointer; }

/* ---- 직원 목록 LIST1.aspx ----
   원본: <ItemStyle Font-Names="Arial" Font-Size="11px" Height="20px" ForeColor="#333366">
         <HeaderStyle Font-Size="10pt" Bold ForeColor="#686868" BackColor="#ACE2F7">
         Width="100%", 테두리 0, cellpadding=0 cellspacing=0
   행 hover 는 코드비하인드가 인라인 JS 로 #EFEFEF 를 넣던 것 */
/* 운영 LIST1.aspx 는 DOCTYPE 이 없어 쿼크 모드로 뜨고, 표가 body 글꼴을 물려받지 않아
   머리글이 시스템 기본 글꼴(윈도우면 Segoe UI)로 그려진다. 그 모습을 그대로 맞춘다.
   값 칸은 아래에서 Arial 로 다시 덮는다(원본 ItemStyle Font-Names="Arial"). */
table.grid-list1 { border: 0;
                   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                                "Helvetica Neue", Arial, sans-serif; }
/* 원본 DataGrid 는 border="1" 로 그려져 칸마다 흰색 1px 테두리가 있다(흰 배경이라 보이지 않지만
   행 높이가 24px -> 25px 이 된다). 이게 없으면 행마다 1px 씩 어긋난다. */
table.grid-list1 th, table.grid-list1 td { border: 1px solid #fff; }
/* 머리글은 글꼴을 지정하지 않는다 - 원본 HeaderStyle 에 Font-Names 가 없어서
   운영은 브라우저 기본 글꼴로 뜬다(Arial 을 주면 눈에 띄게 달라진다). */
/* height 20px 는 원본 HeaderStyle.Height=20. line-height 를 묶어 두지 않으면
   글꼴의 기본 줄상자가 20px 을 넘겨 머리글만 2px 높아진다(테두리 1px x 2 포함해 20px 이 되어야 한다). */
table.grid-list1 th { font-size: 10pt; font-weight: bold; text-align: center;
                      color: #686868; background: #ACE2F7; height: 20px; line-height: 18px; }
/* 행 높이는 운영과 같게 - 원본 ItemStyle Height="20px" 에 padding 이 없다.
   여백을 조금이라도 주면 행 간격이 눈에 띄게 벌어진다(운영 21px 대비 27px 이었다). */
table.grid-list1 td { font-family: Arial; font-size: 11px; text-align: center; color: #333366;
                      height: 20px; padding: 0; line-height: normal; }
table.grid-list1 td.l { text-align: left; }
table.grid-list1 td.r { text-align: right; }
table.grid-list1 tbody tr:hover td { background: #EFEFEF; cursor: pointer; }
table.grid-list1 tbody tr.empty:hover td { background: #fff; cursor: default; }

table.grid td.l { text-align: left; }
table.grid td.r { text-align: right; }
table.grid tbody tr.empty:hover td { background: #fff; cursor: default; }

/* 제목 링크를 클릭하면 브라우저 기본 focus 테두리(검은 사각형)가 셀 안에 남아 글씨를 가렸다.
   테두리 대신 배경으로 표시한다 - 키보드 이동 시에도 어디에 있는지 보이고 글씨는 안 가린다. */
table.grid a:focus { outline: none; }
table.grid a:focus-visible { outline: none; background: #ffe9a8; }

/* LIST1 의 검색줄만 손댄다 (#nav.l1).
   원본 LIST1.css 는 검색칸까지 같은 <ul> 안에 있다고 보고 :nth-child(6) / :last-child 로
   폭을 줬다. 그 순서에 기대면 마크업을 조금만 바꿔도 깨진다.
   **범위를 좁히지 않으면 고객 목록(list.css)의 nav 규칙까지 덮어써서 그쪽이 깨진다.** */
/* ul 기본 padding-left(40px) 때문에 날짜줄만 오른쪽으로 밀려 아래 콤보줄과 어긋난다 */
#nav.l1 ul { overflow: hidden; margin: 0; padding: 0; }
#nav.l1 ul li { float: left; margin-right: 6px; }
#nav.l1 ul li.button { float: right; margin-left: 8px; margin-right: 0; }
#nav.l1 ul li.button img { width: 70px; height: auto; }

#nav.l1 ol { overflow: hidden; width: auto; height: auto; margin: 4px 0 0 0; padding: 0; border-radius: 0; }
#nav.l1 ol li { float: left; margin-right: 4px; list-style: none; }
#nav.l1 ol li select { font-family: Arial; font-size: 12px; height: 22px; }
#nav.l1 ol li.button img { height: 22px; width: auto; }
#nav.l1 input[type=date] { font-family: Arial; font-size: 12px; height: 22px; }

/* 가운데 정렬은 두 목록 모두에 걸어야 한다.
   컨테이너가 서로 달라서(list=#list_data, LIST1=#columns) #list_data 로 좁히면
   검색 화면 페이저만 왼쪽에 남는다. */
.pager { padding: 6px 2px; font-size: 12px; color: #000066; text-align: center; }

/* 고객 목록의 페이저는 표 아래 가운데.
   주의: 표를 margin:0 auto 로 가운데 두면 안 된다. 원본 list.css 의 #list_data 는
   `width:140rem; margin-left:50%; left:-60rem` 이라 **컨테이너 자체가 화면 중앙에서
   100px 오른쪽으로 치우쳐** 있다(가운데로 하려면 -70rem 이어야 한다).
   표는 원본처럼 컨테이너 왼쪽 끝에 두면 그 치우침이 상쇄돼 화면 정가운데에 온다.
   대신 페이저가 표 폭 기준 가운데 오도록, 컨테이너를 grid 로 만들어 열 폭을 표에 맞춘다. */
#list_data { display: grid; justify-content: start; }
.pager a { padding: 0 3px; }
.pager .cur { padding: 0 3px; font-weight: bold; }
.pager .total { margin-left: 12px; color: #888; }

.err { color: #b00; padding: 10px; }

/* 화면에서는 안 보이지만 스크린리더는 읽는 글. 입력칸 이름표에 쓴다.
   display:none 이나 visibility:hidden 은 스크린리더도 건너뛰므로 쓰면 안 된다. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 로그인 상자.
   원본 bbs.css 는 height:28rem(280px) 로 못박아 뒀다. 원본은 로그인 실패를 JS alert 으로
   띄워서 상자 안에 아무것도 넣지 않았기 때문에 문제가 없었다.

   여기서는 문구를 상자 안에 넣는다. 두 가지를 지켜야 한다:
     1) 오류가 떠도 화면이 움직이지 않을 것  -> 뷰가 <p class="err"> 를 **항상** 렌더하고
        여기 min-height 가 비어 있을 때도 같은 자리를 차지한다.
     2) 상자가 커지지 않을 것  -> 40px 짜리 자리를 새로 만들면 상자가 309px 로 늘어나
        제목이 상자 안에서 위로 치우쳐 보인다. 그래서 이미 있던 여백에서 빼 온다:
        상자 위 여백 2rem -> 1rem, 제목 아래 여백 20px -> 0.

   결과(실측): 오류 있음/없음/가장 긴 문구 세 경우 모두
     상자 280px, 제목 위 30, 아이디칸 109, 버튼 아래 255, 바닥 여백 25
   원본(오류 자리가 아예 없던 때)은 제목 위 40, 아이디칸 103, 버튼 아래 249, 바닥 31 이었다.
   제목이 10px 올라가고 입력칸이 6px 내려온 것이 자리를 만든 대가다.

   가장 긴 문구("This site is for customers only. Staff, please use CMS.")도
   상자 폭 440px 에서 한 줄에 들어간다(실측).
   bbs.css 는 원본 그대로 두고 여기서 덮는다 - 이 파일이 뒤에 로드된다. */
.loginBox { height: auto; min-height: 28rem; padding-top: 1rem; padding-bottom: 0; }
.loginBox h2 { padding-bottom: 0; }
.loginBox .err { padding: 8px 10px; min-height: 36px; }
.msg { color: #060; padding: 10px; }

/* ---- 티켓 모달 ----
   원본은 window.open 팝업이었다(차단·창관리·닫힘 폴링 필요, 모바일에서 사실상 불가).
   주소로 직접 들어오면 여전히 단독 페이지로 뜬다 - 메일 링크가 그 형태다.

   **[open] 에만 display:flex 를 준다.** dialog 는 닫혔을 때 display:none 으로 숨는데,
   그냥 display:flex 를 주면 닫혀도 화면에 남는다.
   내용이 길 때 스크롤은 안쪽(#ticketDlgBody)만 지고 창 테두리는 항상 보인다
   (예전에는 창 자체가 늘어나 끝까지 스크롤해야 아래 테두리가 보였다). */
/* 창은 화면 안에 묶고(92vh), 스크롤은 안쪽 내용만 진다.
   padding 을 창에 두어 내용과 테두리 사이에 흰 여백이 남는다 - 위·아래 테두리가 늘 보인다.
   (예전에는 창 자체가 늘어나 끝까지 스크롤해야 아래 테두리가 보였고,
    padding 을 안쪽으로 옮겼더니 내용이 테두리에 붙어 테두리가 없어 보였다.) */
/* 창 = 머리말 바(고정) + 내용(여기만 스크롤).
   **창 자체에는 스크롤을 두지 않는다**(dialog 기본 overflow 는 auto 라 명시로 꺼야 한다).
   창도 같이 스크롤되면 위쪽 여백이 밀려 올라가 내용이 테두리에 딱 붙어 잘리고,
   1px 회색 선은 어두운 배경에서 사실상 안 보인다 - 그래서 "보더가 없다"로 보였다.
   머리말 바가 위쪽 경계를 확실히 만들고, 아래는 흰 여백 + 그림자로 경계가 드러난다. */
#ticketDlg { border: none; border-radius: 8px; padding: 0; overflow: hidden;
             max-width: 96vw; max-height: 92vh; background: #fff;
             box-shadow: 0 24px 64px rgba(0,0,0,.45); }
#ticketDlg[open] { display: flex; flex-direction: column; }   /* [open] 에만! 안 그러면 닫아도 남는다 */
#ticketDlg::backdrop { background: rgba(0,0,0,.45); }

/* 머리말은 창을 옮기는 손잡이다(touch-action:none 이라야 터치로도 끌린다) */
.bbs-dlg-head { cursor: move; touch-action: none;
                flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
                gap: 16px; padding: 9px 14px; background: #eef2f6; border-bottom: 1px solid #c3cdd6;
                font: 600 13px 'Open Sans', sans-serif; color: #33414d; }
.bbs-dlg-head .x { border: none; background: none; font-size: 20px; line-height: 1; padding: 0 4px;
                   color: #5a6b7b; cursor: pointer; }
.bbs-dlg-head .x { cursor: pointer; }
.bbs-dlg-head .x:hover { color: #000; }
/* 끄는 동안 글자가 선택되면 지저분하다 */
#ticketDlg.dragging, #ticketDlg.dragging * { user-select: none; }
#ticketDlg.loading .bbs-dlg-head { display: none; }

/* 바탕을 단독 페이지(body.dtl-page)와 같은 회색으로 둔다.
   모달만 흰 바탕이면 같은 화면인데 주소로 들어왔을 때와 색이 달라 보인다. */
#ticketDlgBody { flex: 1 1 auto; overflow: auto; min-height: 0; padding: 12px;
                 background: #eef1f5; }
/* 로딩 중에는 본문 바탕을 지운다. 안 그러면 위에서 준 회색이 화면을 덮어
   '어두운 배경 + 스피너' 대신 단색 판이 깔린다. */
#ticketDlg.loading #ticketDlgBody { padding: 0; background: transparent; }

/* 아래쪽 경계. 위(머리말 바)와 같은 색·선이라 내용이 어디서 잘리는지 위아래가 똑같이 보인다. */
.bbs-dlg-foot { flex: 0 0 auto; height: 10px; background: #eef2f6; border-top: 1px solid #c3cdd6; }
#ticketDlg.loading .bbs-dlg-foot { display: none; }

/* ---- 로딩 ----
   한국에서 미국 DB 를 보면 여는 데 시간이 걸린다. 누른 즉시 반응이 보이도록 먼저 띄운다.
   로딩 동안에는 **창을 투명하게** 해서 '화면 전체가 어두워지고 스피너만' 보이게 한다.
   (작은 흰 상자가 떴다가 내용으로 바뀌면 어정쩡해 보인다는 피드백) */
/* 로딩 중에는 창을 화면 전체로 키우고 스스로 어둡게 한다.
   (창만 투명하게 하면 어두운 배경에 '밝은 구멍'이 뚫린 것처럼 보인다 - 실제로 그렇게 나왔다) */
#ticketDlg.loading { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
                     background: rgba(20,24,28,.62); border: none; border-radius: 0;
                     box-shadow: none; padding: 0; }
#ticketDlg.loading::backdrop { background: transparent; }

.bbs-loading { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.bbs-spinner { width: 42px; height: 42px; border-radius: 50%;
               border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
               animation: bbs-spin .8s linear infinite; }
.bbs-spinner.dark { width: 26px; height: 26px; border-color: #dfe6ec; border-top-color: #4a7ebb; }
@keyframes bbs-spin { to { transform: rotate(360deg); } }

.bbs-error { padding: 28px 32px; font: 13px 'Open Sans', sans-serif; color: #b00; }

/* 저장 중에는 폼 위에 살짝 덮는다(두 번 누르는 것도 막힌다) */
.bbs-busy { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
            gap: 12px; background: rgba(255,255,255,.75);
            font: 13px 'Open Sans', sans-serif; color: #5a6b7b; }

@media (prefers-reduced-motion: reduce) {
    .bbs-spinner { animation-duration: 2.4s; }
}

/* ---- 티켓 상세 / 신규 등록 폼 ----
   원본은 서드파티 컨트롤(CAPTIONEX/TEXTBOXEX)이 색을 그렸다. 운영 화면에서 실측한 값:
     라벨칸 #76A2D3 / 입력칸 #B6D8EA / 버튼 #B8D5E5(double 테두리) / 표 테두리 #cccccc
     글꼴 Microsoft Sans Serif 13px */
.frm { border-collapse: collapse; background: #fff; font-family: 'Microsoft Sans Serif', sans-serif; font-size: 13px; }
.frm td { border: 1px solid #ccc; padding: 2px 3px; }
.frm td.cap { background: #76A2D3; color: #000; text-align: center; white-space: nowrap; width: 110px; }
.frm input[type=text], .frm textarea { background: #B6D8EA; border: 1px solid #7f9db9;
                                       font-family: 'Microsoft Sans Serif', sans-serif; font-size: 13px; padding: 1px 2px; }
/* Memo 는 운영 화면에서 흰 바탕이다(읽기 전용 입력칸만 파랑) */
.frm textarea { width: 553px; height: 120px; background: #fff; }
.frm select { font-family: 'Microsoft Sans Serif', sans-serif; font-size: 13px; }
.frm .ro { background: #B6D8EA; }
.frm .btnrow { text-align: center; }

.btn01 { background: #B8D5E5; border: 2px double; border-color: #E3EEF4 #4592bc #4592bc #E3EEF4;
         color: #000; font: bold 13px Arial; padding: 2px 10px; cursor: pointer; }

/* ---- 답변 이력 ----
   원본 DetailGrid2: 헤더 바 #5A9CD6(높이 20px), 본문 #333366, 항목마다
   "--------------- {작성자} wrote messages ----------------" 구분선 */
.hist { width: 695px; border: 1px solid #ccc; background: #fff; margin-top: 8px;
        font-family: 'Microsoft Sans Serif', sans-serif; font-size: 13px; color: #333366; }
.hist .bar { background: #5A9CD6; height: 20px; }
.hist .entry { padding: 8px 6px; border-bottom: 1px solid #e8e8e8; }
.hist .sep { font-family: tahoma, sans-serif; font-weight: bold; }
.hist .memo { white-space: pre-wrap; padding: 8px 0; color: #000; }
.hist .attach a { font-size: 12px; }


/* ==========================================================================
   고객 화면 최신화 (2026-08-20)
   --------------------------------------------------------------------------
   여기까지의 규칙은 운영 화면을 그대로 재현한 것이고, 아래는 '보기'만 손본 것이다.
   컬럼·필드·문구·동작은 하나도 바꾸지 않았다. 되돌리려면 이 블록만 지우면 된다.

   손본 이유: 원본 레이아웃이 1200px 고정 절대배치라(#list_data 는 width:140rem 에
   margin-left:50%; left:-60rem) 넓은 화면에서 한쪽으로 쏠리고 좁은 화면에서는 잘린다.
   ========================================================================== */

/* ---- 1) 고정폭 절대배치 -> 가운데 정렬 반응형 ---- */
#list_data {
    position: static; left: auto;
    width: auto; max-width: 1240px; height: auto;
    margin-left: auto; margin-right: auto;
}
#list_data { display: block; padding: 16px 0 40px; }
#header, #nav { max-width: none; }
/* 원본 #nav 는 높이 120px 고정이었다. 지금은 도구줄 하나뿐이라 내용만큼만 쓰게 둔다. */
#nav { height: auto; }

/* 표 위 도구줄. 표와 같은 폭(1240px)을 써서 버튼이 표 오른쪽 위 모서리에 붙는다.
   예전에는 버튼이 화면 오른쪽 끝에 있어 표에서 300px 넘게 떨어져 있었다. */
#nav .listbar { max-width: 1240px; margin: 0 auto; padding: 12px 0 10px;
                display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#nav .listbar .who { font-size: 18px; font-weight: 700; color: #2b3846; letter-spacing: -.01em; }
#nav .listbar .acts { display: flex; align-items: center; gap: 8px; }

/* 목록 도구줄 버튼 */
.btn { display: inline-flex; align-items: center; gap: 6px;
       height: 32px; padding: 0 14px; border-radius: 7px;
       border: 1px solid #d3dae1; background: #fff; color: #2b3846;
       font: 600 13px system-ui, -apple-system, 'Segoe UI', sans-serif;
       text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: #f2f5f8; text-decoration: none; }
.btn svg { width: 13px; height: 13px; fill: currentColor; }
.btn-primary { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.btn-primary:hover { background: #1a5fd0; }
.btn:focus-visible { outline: 2px solid #1f6feb; outline-offset: 2px; }

/* ---- 1-1) 목록 화면은 페이지가 스크롤되지 않는다 ----
   행이 20행 꽉 차면 문서가 화면보다 240px 넘쳐서 페이저를 보려면 스크롤해야 했다.
   화면 전체를 세로 flex 로 두고 **표 본문만** 안에서 스크롤시킨다.
   머리글 줄은 sticky 로 붙어 있고, 페이저는 항상 화면 아래에 보인다. */
body.list-page { height: 100vh; overflow: hidden; }
body.list-page > .container-fluid { height: 100%; display: flex; flex-direction: column; }
body.list-page #header, body.list-page #nav { flex: 0 0 auto; }
body.list-page #list_data { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
                            padding-bottom: 8px; }
/* flex-grow 를 주면 안 된다 - 표가 짧을 때 상자가 화면 끝까지 늘어나
   페이저만 저 아래 덩그러니 떨어진다. 넘칠 때만 줄어들며(shrink) 스크롤되게 한다. */
body.list-page .tablewrap { flex: 0 1 auto; min-height: 0; overflow: auto; }
body.list-page .pager { flex: 0 0 auto; }

/* 스크롤해도 머리글은 붙어 있는다 */
table.grid-list thead th { position: sticky; top: 0; z-index: 1; }

/* ---- 1-2) 배너 높이 ----
   원본은 200px 을 장식으로만 썼다. 로고와 제목을 한 줄에 놓아 96px 로 줄이면
   그만큼 티켓이 더 보인다(약 3행). 글자·이미지는 그대로다. */
/* 배너 높이는 화면 높이에 맞춘다.
   200px 고정은 노트북(768px)에서 15행이 안 들어가고, 96px 고정은 큰 모니터에서
   표 아래가 휑하다. 15행 + 도구줄 + 페이저(약 634px)를 먼저 확보하고 남는 만큼만 배너에 준다. */
body.list-page #header { height: 96px; display: flex; align-items: center;
                         justify-content: space-between; padding: 0 18px; overflow: hidden; }
@media (min-height: 830px) {
    body.list-page #header { height: 150px; }
    body.list-page #header h1 a img { height: 62px; }
    body.list-page #header h2 { font-size: 40px; }
}
@media (min-height: 920px) {
    body.list-page #header { height: 200px; }
    body.list-page #header h1 a img { height: 72px; }
    body.list-page #header h2 { font-size: 50px; }
}
body.list-page #header h1 { margin: 0; line-height: 0; }
body.list-page #header h1 a img { width: auto; height: 48px; }
body.list-page #header h2 { margin: 0; font-size: 30px; }

/* ---- 2) 목록 표 - 검은 테두리 격자 -> 가로줄만 있는 표 ---- */
table.grid-list { width: 100%; border: 1px solid #e3e7eb; border-radius: 10px;
                  border-collapse: separate; border-spacing: 0; overflow: hidden;
                  box-shadow: 0 1px 2px rgba(27, 31, 36, .06); }
table.grid-list th { border: 0; border-bottom: 1px solid #e3e7eb; background: #f6f8fa;
                     color: #5b6875; font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
                     text-transform: uppercase; height: 36px; padding: 0 8px; }
table.grid-list td { border: 0; border-bottom: 1px solid #f0f2f5; height: 34px;
                     padding: 7px 8px; color: #333; }
table.grid-list tbody tr:last-child td { border-bottom: 0; }
table.grid-list tbody tr:hover td { background: #f5f9fd; }
/* **어떤 값이 와도 행이 두 줄이 되지 않아야 한다.**
   폭만 넉넉히 주는 방식으로는 보장이 안 된다 - 실측상 담당자 이름은 최장 34자(258px)이고
   'W' 35개 기준으로 잡으면 두 컬럼이 904px 로 표(1240px)의 73% 를 먹는다.
   그래서 레이아웃을 고정하고 넘치는 값은 말줄임으로 자른다. 잘린 값은 title 로 볼 수 있다.
   (실측: 담당자 이름 95% 가 14자 이내, OEC 최장이 20자 = 155px 이라 165px 이면 거의 다 들어간다) */
table.grid-list { table-layout: fixed; }
table.grid-list td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.grid-list td.l a { display: block; overflow: hidden; text-overflow: ellipsis; }
table.grid-list td.l a { text-decoration: none; }
table.grid-list td.l a:hover { text-decoration: underline; }

/* 상태 칩. 색은 DB 의 F_HTMLColor 를 그대로 쓴다(--c). 흰 바탕 + 같은 색 테두리·글자. */
table.grid-list td .st { display: inline-block; padding: 1px 9px; border-radius: 999px;
                         font-size: 12px; font-weight: 600; color: var(--c, #444);
                         border: 1px solid currentColor; background: #fff; }

.pager a, .pager .cur { display: inline-block; min-width: 26px; height: 26px; line-height: 26px;
                        border-radius: 6px; text-align: center; text-decoration: none; }
.pager a:hover { background: #eef3f8; }
.pager .cur { background: #1f6feb; color: #fff; font-weight: 600; }

/* ---- 3) 상세/신규 폼 - 파란 라벨칸 -> 카드형 폼 ---- */
/* 넓은 칸(제목·메일·회사·메모·첨부)은 px 고정 대신 칸 폭을 채운다.
   좁은 칸(작성자·날짜·담당자 콤보)은 원본 폭 그대로 둔다 - 짧은 값이라 늘리면 오히려 어색하다. */
.frm .w-full { width: 100%; }
.frm, .hist { width: 100%; max-width: 860px; margin-left: auto; margin-right: auto; }
#ticketDlg { width: min(96vw, 900px); }

.frm { border: 1px solid #dde2e8; border-radius: 10px; border-collapse: separate; border-spacing: 0;
       box-shadow: 0 1px 2px rgba(27, 31, 36, .06); overflow: hidden;
       font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.frm td { border: 0; border-bottom: 1px solid #eef1f4; padding: 8px 12px; vertical-align: middle; }
.frm tr:last-child td { border-bottom: 0; }
.frm td.cap { background: #f7f9fb; color: #5b6875; font-weight: 600; font-size: 12px;
              letter-spacing: .02em; text-align: right; border-right: 1px solid #eef1f4; }
.frm input[type=text], .frm textarea, .frm select {
    background: #fff; border: 1px solid #d3dae1; border-radius: 6px; padding: 5px 8px;
    font-family: inherit; font-size: 13px; color: #1f2328; }
/* 콤보와 입력칸의 높이를 맞춘다. 그냥 두면 select 31px / input 29px 로 어긋나서,
   Add User 로 둘이 자리를 바꿀 때 칸 크기가 튄다(폼 전체의 다른 칸들도 마찬가지였다). */
.frm input[type=text], .frm select { height: 30px; }

.frm input[type=text]:focus, .frm textarea:focus, .frm select:focus {
    outline: none; border-color: #4a90d9; box-shadow: 0 0 0 3px rgba(74, 144, 217, .18); }
/* 읽기 전용 칸은 비활성 콤보(Company)와 같은 모습이어야 한다.
   `.frm .ro`(0,2,0) 는 위의 `.frm input[type=text]`(속성 선택자라 0,2,1) 에 특이도로 밀려
   아무 효과가 없었다 - Service ID·Creator 가 흰 바탕에 검은 글씨로 떠서 입력 가능해 보였다.
   `input[readonly]` 로 특이도를 맞추고 뒤에 두어 확실히 이기게 한다. */
.frm input[readonly], .frm input.ro, .frm select:disabled {
    background: #f4f6f8; color: #5b6875; border-color: #d3dae1; cursor: default;
}
/* 읽기 전용 칸은 포커스 링도 주지 않는다(고칠 수 있는 칸처럼 보인다) */
.frm input[readonly]:focus { border-color: #d3dae1; box-shadow: none; }
.frm .btnrow { text-align: right; background: #fafbfc; padding: 12px; }

.btn01 { background: #fff; border: 1px solid #d3dae1; border-radius: 6px; color: #24292f;
         font: 600 12.5px system-ui, -apple-system, 'Segoe UI', sans-serif;
         padding: 6px 14px; cursor: pointer; }
.btn01:hover { background: #f2f5f8; }
.frm .btnrow button[type=submit].btn01 { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.frm .btnrow button[type=submit].btn01:hover { background: #1a5fd0; }

/* ---- 3-1) 단독 페이지(/tickets/123, /tickets/new)를 모달과 같은 모습으로 ----
   메일에 뿌려진 detail 링크로 바로 들어오는 사용자가 많다. 그때 흰 바탕에 표만 덩그러니
   놓이면 모달로 봤을 때와 너무 달라 보인다. 같은 회색 바탕 + 머리말을 입힌다.
   모달 안에서는 이 껍데기를 벗긴다(머리말이 두 개가 되고 여백이 겹친다). */
body.dtl-page { background: #eef1f5; }
.dtl { max-width: 892px; margin: 24px auto 48px; padding: 0 16px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
             max-width: 860px; margin: 0 auto 12px;
             font: 600 15px system-ui, -apple-system, 'Segoe UI', sans-serif; color: #33414d; }
.page-head .back { font-weight: 500; font-size: 13px; color: #4a6b8a; text-decoration: none; }
.page-head .back:hover { text-decoration: underline; }

#ticketDlgBody .dtl { max-width: none; margin: 0; padding: 0; }
#ticketDlgBody .page-head { display: none; }

/* 고른 첨부 목록. 파일 칸 바로 아래에 이름을 나열한다. */
/* 첨부 고르는 줄: 입력칸이 남는 폭을 먹고, 상한 안내가 그 오른쪽에 붙는다.
   고른 파일 목록(.filelist)은 이 줄 아래로 간다(bbs.js 가 칸 끝에 붙인다). */
.fpick { display: flex; align-items: center; gap: 10px; }
.fpick input[type=file] { flex: 1 1 auto; min-width: 0; }
.fhint { font-size: 12px; color: #7b8794; white-space: nowrap; }

.filelist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.filelist:empty { display: none; }
.fchip { display: inline-flex; align-items: center; gap: 7px;
         max-width: 100%; padding: 3px 6px 3px 10px; border-radius: 999px;
         background: #f2f6fa; border: 1px solid #dde6ef;
         font-size: 12px; color: #2c5d92; }
.fchip .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.fchip .s { color: #7b8794; font-variant-numeric: tabular-nums; }
.fchip .x { border: none; background: none; padding: 0 2px; cursor: pointer;
            font-size: 15px; line-height: 1; color: #7b8794; }
.fchip .x:hover { color: #b3312b; }

/* ---- 4) 답변 이력 - 대화창(말풍선) ----
   .mine = 지금 보고 있는 사람이 쓴 글. 대화창처럼 오른쪽에 붙인다.
   좌우는 Detail.cshtml 에서 '작성자가 직원인가 == 보는 사람이 직원인가' 로 정한다. */
.hist { width: auto; border: 0; background: transparent; margin-top: 16px;
        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #24292f; }
.hist .bar { display: none; }

/* 대화창은 자기 바탕을 가져야 한다. 없으면 흰 말풍선이 흰 배경 위에 떠서
   (특히 모달 안에서) 경계가 안 보이고 대화처럼 읽히지도 않는다.
   바탕은 반드시 **중립 회색**이고, **페이지 바탕(#eef1f5)보다 한 단계 진해야** 한다
   - 같으면 대화창이 페이지에 묻혀 사라진다(모달에서는 보이는데 주소로 들어오면 안 보였다).
   색을 띠게 하면 그 위의 말풍선이 전부 흐려진다(청회색으로 뒀다가 겪었다). */
.hist.chat { background: #e2e8ee; border: 1px solid #d3dbe3; border-radius: 12px;
             padding: 14px; }
.hist.chat .entry { display: flex; margin-bottom: 12px; }
.hist.chat .entry:last-child { margin-bottom: 0; }
.hist.chat .entry.mine { justify-content: flex-end; }

.hist.chat .bubble { max-width: 82%; min-width: 0; background: #fff;
                     border: 1px solid #e0e4e9; border-radius: 12px; padding: 10px 14px;
                     box-shadow: 0 1px 2px rgba(27, 31, 36, .05); }
/* 내가 쓴 쪽은 옅게 칠해 한눈에 갈라 보이게. 꼬리 대신 한쪽 모서리만 각지게 한다.
   색은 **이름 색과 같은 계열**로 간다. 원본 DB 가 직원 Blue / 고객 #F3750E 로 이미 정해 뒀고,
   파랑은 이 화면에서 버튼·티켓번호 링크·직원 이름이 쓰고 있어 뜻이 겹친다. */
.hist.chat .entry.mine .bubble { background: #fdf0e4; border-color: #f2ddc6; border-bottom-right-radius: 4px; }
.hist.chat .entry:not(.mine) .bubble { border-bottom-left-radius: 4px; }

.hist .who { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
             font-weight: 700; font-size: 13px; color: var(--accent, #24292f); }
.hist .who .when { font-weight: 400; font-size: 12px; color: #7b8794; white-space: nowrap; }
.hist .meta { margin-top: 2px; font-size: 12px; color: #7b8794; }
/* 정보줄이 없는 고객 화면에서는 이름 아래 여백을 살짝 준다 */
.hist .who + .memo { padding-top: 9px; }
/* 로그·MAC 주소처럼 띄어쓰기 없는 긴 문자열이 말풍선을 밀어내지 않게 한다 */
.hist .memo { white-space: pre-wrap; overflow-wrap: anywhere; padding: 7px 0 0;
              color: #24292f; font-size: 13px; line-height: 1.55; }
.hist .attach { margin-top: 10px; }
.hist .attach a { display: inline-block; margin-right: 6px; padding: 3px 10px; border-radius: 999px;
                  background: #f2f6fa; border: 1px solid #dde6ef; color: #2c5d92;
                  font-size: 12px; text-decoration: none; }
.hist .attach a:hover { background: #e6eef7; }
.hist.chat .entry.mine .attach a { background: #fff8f1; border-color: #f0d9bf; color: #8a5216; }

/* ---- 필수 입력 표시 ---- */
.frm .bad, .frm input.bad, .frm textarea.bad, .frm select.bad {
    border-color: #d1443e; background: #fdf5f5;
}
.frm .bad:focus { box-shadow: 0 0 0 3px rgba(209, 68, 62, .15); }

.frm .btnbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

/* 안내 말풍선. 브라우저 기본 안내처럼 문제가 있는 칸을 직접 가리킨다.
   absolute 라 자리를 차지하지 않는다 - 한 줄 짜리 안내문을 넣었더니 뜰 때마다
   폼이 높아져 화면이 밀렸다. 여러 칸이 비어 있으면 각 칸에 하나씩 동시에 뜬다. */
.frm td { position: relative; }
.reqtip { position: absolute; z-index: 5; margin-top: 6px;
          padding: 4px 9px; border-radius: 6px;
          background: #c0392f; color: #fff; font-size: 11.5px; font-weight: 600;
          white-space: nowrap; box-shadow: 0 2px 6px rgba(27, 31, 36, .18);
          opacity: 0; transform: translateY(-3px); pointer-events: none;
          transition: opacity .12s ease, transform .12s ease; }
.reqtip.on { opacity: 1; transform: none; }
/* 위쪽 꼭지 - 어느 칸을 가리키는지 분명해진다 */
.reqtip::before { content: ''; position: absolute; left: 11px; top: -4px;
                  border-left: 5px solid transparent; border-right: 5px solid transparent;
                  border-bottom: 5px solid #c0392f; }

@media (prefers-reduced-motion: reduce) {
    .reqtip { transition: none; }
}