@charset "utf-8";
/* WLMS 공통 스타일
 *
 * 합치기 전 에이전시 쪽 app.css 를 그대로 옮겨 온 것이다. 화면이 달라 보이면
 * 쓰는 사람은 「합쳤다」가 아니라 「바뀌었다」로 받아들인다. 모양은 건드리지
 * 않는다.
 *
 * 여기 있는 것은 **어느 모듈에서나 쓰는 것**뿐이다 — 틀, 표, 딱지, 입력칸,
 * 날짜 고르개, 대시보드 그래프. 한 모듈의 화면이 아니면 붙을 자리가 없는
 * 것은 modules/<이름>/assets/BIT_lms_<약자>_app.css 로 간다. 가르는 잣대는
 * PHP·JS 와 같다. 모듈 것은 BIT_lms_add_css() 로 얹고, 공통 것 뒤에 실린다.
 *
 * 시간표 쪽 스타일은 아직 여기 없다. 그 모듈을 옮길 때 뒤에 이어 붙인다.
 *
 * 주소 뒤의 ?v= 는 손으로 올리지 않는다. BIT_lms_asset_url() 이 파일을 고친
 * 시각을 붙인다 (core/BIT_lms_view.php).
 */

:root {
  --line:   #dfe3e8;
  --line2:  #eef1f4;
  --text:   #1e2430;
  --dim:    #6b7683;
  --bg:     #f4f6f8;
  --card:   #ffffff;
  --blue:   #1f66d0;
  --blue-d: #164da0;
  --blue-l: #e8f0fd;
  --red:    #d3453d;
  --amber:  #d98014;
  --green:  #1c8a5a;
  --pink:   #CC00CC;
  --radius: 6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo",
        "Hiragino Sans", "Microsoft JhengHei", "Microsoft YaHei",
        "Noto Sans", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- 상단 ---------------- */
.topbar {
  display: flex; align-items: center; gap: 18px;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 0 18px; height: 54px; position: sticky; top: 0; z-index: 50;
}
.topbar .brand a {
  font-size: 18px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 7px;
}
.topbar .brand a:hover { text-decoration: none; }
.side-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  background: var(--blue); color: #fff; border-radius: 3px; padding: 2px 5px;
}
body.side-agency .side-tag { background: #5a4bd0; }

.mainnav { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.mainnav a {
  color: var(--dim); padding: 8px 13px; border-radius: var(--radius);
  white-space: nowrap; font-weight: 500;
}
.mainnav a:hover { background: var(--line2); text-decoration: none; color: var(--text); }
.mainnav a.on { background: var(--blue-l); color: var(--blue-d); font-weight: 700; }

.who { display: flex; align-items: center; gap: 9px; font-size: 13px; white-space: nowrap; }
.who .acc { color: var(--dim); }
.who .usr { font-weight: 700; }
.who .out { color: var(--dim); border: 1px solid var(--line); padding: 4px 9px; border-radius: var(--radius); }
.who .out:hover { border-color: var(--red); color: var(--red); text-decoration: none; }
.langsel { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 6px; background: #fff; }

/* ---------------- 틀 ---------------- */
.wrap { max-width: 1440px; margin: 0 auto; padding: 20px 18px 60px; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-bottom: 16px;
}
.card > h2, .card > h3 { margin: 0 0 14px; font-size: 16px; }

.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.page-head h1 { font-size: 21px; margin: 0; flex: 1; }
/* h2 도 제목이다. flex:1 을 안 주면 단추 두 개가 제목 옆에 몰려 붙는다. */
.page-head h2 { font-size: 16px; margin: 0; flex: 1; }

.flash {
  padding: 11px 14px; border-radius: var(--radius); margin-bottom: 14px;
  border: 1px solid transparent; font-weight: 500;
}
.flash.ok   { background: #e6f6ee; border-color: #b7e2cd; color: #14603f; }
.flash.err  { background: #fdecea; border-color: #f2c2be; color: #96201a; }
.flash.warn { background: #fdf5e3; border-color: #f0dcae; color: #8a5b0d; }

/* 대신 보기(에이전시로 로그인) 알림 띠.
   core/BIT_lms_view.php 의 BIT_lms_render_imp_bar() 가 그린다.

   일부러 안 예쁘게 두었다. 남의 계정으로 보고 있다는 것을 잊은 채 무언가를
   고치면 그 에이전시가 한 일로 기록되기 때문이다. 알림 상자(.flash)와
   헷갈리면 안 되므로 색을 겹치지 않게 골랐다 — .flash 는 연한 바탕에
   진한 글씨인데, 이것은 반대로 진한 바탕에 흰 글씨다.

   화면을 따라 내려오게 sticky 로 붙인다. 긴 화면 아래쪽에서 고치다가
   「내가 지금 누구지」를 잊는 자리가 바로 거기다. */
.impbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #8a2f12; color: #fff;
  padding: 9px 14px; border-radius: var(--radius); margin-bottom: 14px;
  font-weight: 500;
}
.impbar .impwho { flex: 1; }
.impbar .impme  { opacity: .8; font-weight: 400; font-size: 13px; }
.impbar .impout {
  background: #fff; color: #8a2f12; text-decoration: none;
  border-radius: var(--radius); padding: 5px 12px; font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.impbar .impout:hover { background: #ffe9e2; }

/* ---------------- 표 ---------------- */
table.list { width: 100%; border-collapse: collapse; background: #fff; }
table.list th, table.list td {
  border-bottom: 1px solid var(--line2); padding: 9px 10px;
  text-align: left; vertical-align: middle;
}
table.list thead th {
  background: #fafbfc; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--dim); font-weight: 700; white-space: nowrap;
}
table.list tbody tr.row:hover { background: #fbfcfe; cursor: pointer; }
table.list td.num, table.list th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.list td.ctr, table.list th.ctr { text-align: center; }
table.list tr.empty td { text-align: center; color: var(--dim); padding: 34px 0; }
table.list tfoot td { background: #fafbfc; font-weight: 700; border-top: 2px solid var(--line); }

/* 펼침 행 */
tr.detail > td { background: #f8fafc; padding: 0; border-bottom: 1px solid var(--line); }
tr.detail .detail-in { padding: 10px 14px; }
tr.detail.hide { display: none; }

/* ---------------- 배지 ---------------- */
/* 성별 : 남 = 파랑, 여 = #CC00CC. 둘 다 흰 글씨 둥근 사각형 */
.gender {
  display: inline-block; width: 21px; height: 21px; line-height: 21px;
  text-align: center; border-radius: 5px;
  color: #fff; font-weight: 700; font-size: 12px;
}
.gender.M { background: var(--blue); }
.gender.F { background: var(--pink); }

/* 상태 */
.st {
  display: inline-block; padding: 3px 9px; border-radius: 11px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.st-registered   { background: #fdece1; color: #b45309; }   /* 등록 : 주황 */
.st-studying     { background: var(--blue-l); color: var(--blue-d); }
.st-completed    { background: #eef1f4; color: #6b7683; }   /* 종료 : 회색 */
.st-cancel_reg   { background: #fdecea; color: #96201a; }
.st-cancel_study { background: #fdecea; color: #96201a; }

/* 연수기간 : 상태에 따라 글자색이 다르다 */
.period { white-space: nowrap; font-variant-numeric: tabular-nums; }
.period em { font-style: normal; color: var(--dim); font-size: 12px; }
.period.two b { display: block; font-weight: 400; font-size: 12.5px; }
.pr-registered { color: #b45309; }
.pr-studying   { color: var(--blue-d); }
.pr-completed  { color: var(--dim); }
.pr-cancelled  { color: #b0b6bd; text-decoration: line-through; }

/* 나이 글은 서버가 번역해 넘긴다. content 로 한국어를 박아 두면 번역이 안 된다. */
.age { white-space: nowrap; font-variant-numeric: tabular-nums; }
.age.minor { color: var(--red); font-weight: 700; }
input + .age { margin-left: 7px; font-size: 12.5px; color: var(--dim); }
input + .age.minor { color: var(--red); }

.tag {
  display: inline-block; padding: 2px 7px; border-radius: 3px;
  background: var(--line2); color: var(--dim); font-size: 11.5px; font-weight: 600;
}
.tag.done { background: #e6f6ee; color: var(--green); }

/* ---------------- 입력 ---------------- */
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], input[type=email], select, textarea {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 7px 9px; font: inherit; background: #fff; color: var(--text);
  max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,102,208,.13);
}
input[readonly], input:disabled, select:disabled, textarea[readonly] {
  background: #f2f4f6; color: var(--dim);
}
textarea { min-height: 84px; resize: vertical; width: 100%; }
label.ck { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

.btn {
  display: inline-block; border: 1px solid var(--line); background: #fff;
  color: var(--text); border-radius: var(--radius); padding: 7px 14px;
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
  /* <a class="btn"> 도 같은 모양이어야 한다 (설치 끝 화면의 「로그인」) */
  text-align: center; text-decoration: none;
}
.btn:hover { background: #f7f9fb; text-decoration: none; }
.btn.pri { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.pri:hover { background: var(--blue-d); }
.btn.danger { color: var(--red); border-color: #f0c4c1; }
.btn.danger:hover { background: #fdecea; }
.btn.sm { padding: 4px 9px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 검색줄 */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .grow { flex: 1; min-width: 160px; }

/* 정의형 폼 */
.form-grid { display: grid; grid-template-columns: 150px 1fr; gap: 10px 14px; align-items: center; }
.form-grid > .lbl { color: var(--dim); font-weight: 600; }
.form-grid > .full { grid-column: 1 / -1; }
/* 반드시 넣어야 하는 칸에 붙는 별표.
   ::after 로 별표를 만들어 넣지 않고 PHP 가 글자 그대로 <i>*</i> 를 찍는다.
   CSS 로 만든 글자는 화면을 읽어 주는 프로그램이 못 읽고, 붙여넣기에도 안
   딸려 오기 때문이다. 여기서는 색과 자리만 잡아 준다. */
.req {
  color: var(--red); font-style: normal; font-weight: 700;
  margin-left: 3px; cursor: help;
}
.reqnote { color: var(--dim); font-size: 12.5px; margin: 0 0 12px; }
.reqnote .req { margin-left: 0; }

.hint { color: var(--dim); font-size: 12.5px; }
.err-msg { color: var(--red); font-size: 12.5px; }

/* ---------------- 대시보드 ---------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .k { color: var(--dim); font-size: 13px; }
.stat .v { font-size: 30px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg a { padding: 5px 12px; color: var(--dim); background: #fff; font-size: 13px; }
.seg a + a { border-left: 1px solid var(--line); }
.seg a.on { background: var(--blue); color: #fff; font-weight: 700; }
.seg a:hover { text-decoration: none; }

/* ---------------- 페이지 넘김 ---------------- */
.pager { display: flex; gap: 4px; justify-content: center; margin: 18px 0 4px; }
.pager a, .pager span {
  min-width: 32px; text-align: center; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--dim);
}
.pager span.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.pager a:hover { background: #f7f9fb; text-decoration: none; }

/* ---------------- 로그인 / 최초 설정 ---------------- */
body.bare { background: #eef1f5; }
.authwrap { display: flex; align-items: flex-start; justify-content: center; padding: 9vh 16px 40px; }
.authcard {
  width: 100%; max-width: 380px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 30px 30px 26px;
  box-shadow: 0 6px 26px rgba(20,30,50,.07);
}
.authbrand {
  font-size: 21px; font-weight: 700; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.authlang { text-align: center; margin: 12px 0 20px; }
.authlang .langsel { font-size: 12.5px; padding: 4px 6px; }
.authhint { color: var(--dim); font-size: 13px; margin: 0 0 14px; line-height: 1.5; }
.authcard .flash { margin-bottom: 14px; }
.authcard label { display: block; margin-bottom: 12px; color: var(--dim); font-size: 13px; font-weight: 600; }
.authcard label input { display: block; width: 100%; margin-top: 5px; padding: 11px; font-weight: 400; }
.btn.wide { width: 100%; padding: 11px; margin-top: 4px; }

/* ---------------- 좁은 화면 ---------------- */
@media (max-width: 900px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .mainnav { order: 3; width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > .lbl { margin-top: 6px; }
}
/* ---------------- 기준정보 / 설정 화면 ---------------- */
.pagetitle { font-size: 20px; margin: 0 0 14px; }

/* 탭 */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs a {
  padding: 9px 15px; color: var(--dim); font-size: 14px; font-weight: 600;
  border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: -1px;
}
.tabs a:hover { background: var(--line2); text-decoration: none; }
.tabs a.on { background: #fff; border-color: var(--line); color: var(--text); }

/* 기준정보 큰 탭 — 아래에 그 모듈의 서브탭(.tabs)이 따라온다 */
.tabs-main { display: flex; gap: 8px; margin-bottom: 14px; border-bottom: 0; }
.tabs-main a {
  padding: 10px 24px; font-size: 15px; font-weight: 700; color: var(--dim);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  margin-bottom: 0;
}
.tabs-main a:hover { background: var(--line2); text-decoration: none; }
.tabs-main a.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* 카드 안의 여러 묶음 */
.card > h2 ~ h2 { margin-top: 28px; }
.card .note { color: var(--dim); font-size: 12.5px; margin: -8px 0 16px; line-height: 1.6; }

/* 입력 칸 */
.card label { display: block; margin-bottom: 13px; font-size: 12.5px; font-weight: 700; color: var(--dim); }
.card label input[type=text],
.card label input[type=email],
.card label input[type=date],
/* 항공정보의 「도착 일시」가 이 줄이다. 예전에는 빠져 있어서 그 칸만
   테두리도 폭도 다른 채로 서 있었다. (2026-09-04) */
.card label input[type="datetime-local"],
.card label input[type=number],
.card label textarea,
.card label select {
  display: block; width: 100%; margin-top: 5px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 14px; font-weight: 400; color: var(--text); background: #fff;
}
.card label input:focus, .card label select:focus { outline: none; border-color: var(--blue); }

/*
  날짜 칸과 달력.

  <input type="date"> 를 안 쓴다. 그 칸은 브라우저가 그려서 화면 언어를 바꿔도
  윈도우 언어를 따라갔고, 달력 단추가 판에 따라 뒤집힌 D 처럼 보였다.
  자세한 사정은 core/BIT_lms_view.php 의 BIT_lms_date_field() 주석에 있다.

  달력 상자(.datepop)는 <body> 바로 밑에 하나만 두고 옮겨 붙인다. 표 안에
  두면 넘치는 부분이 잘리거나 옆 칸에 가려진다.
*/
.datefield { position: relative; display: inline-block; }
.datefield .dateinput { padding-right: 30px; font-variant-numeric: tabular-nums; }
.datefield .datebtn {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px;
  background: none; color: var(--dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.datefield .datebtn:hover { background: var(--blue-l); color: var(--blue); }
/* .card label 이 안쪽 input 을 통째 폭으로 만든다. 감싼 span 도 따라가야 줄이 안 어긋난다. */
.card label .datefield { display: block; width: 100%; margin-top: 5px; }
.card label .datefield .dateinput { margin-top: 0; }
html[dir="rtl"] .datefield .datebtn { right: auto; left: 4px; }
html[dir="rtl"] .datefield .dateinput { padding-right: 10px; padding-left: 30px; }

.datepop {
  position: absolute; z-index: 120; width: 250px; padding: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.14);
  font-size: 13px; direction: ltr;
}
.datepop.hide { display: none; }
.dphead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
/* 연도·달 고르개. (2026-09-06) 예전에는 글자만 적혀 있어서 옛날 날짜를 넣으려면
   화살표를 수백 번 눌러야 했다. 상자를 작게 만들어 화살표 사이에 끼워 넣는다. */
.dptitle { font-weight: 700; display: flex; gap: 4px; }
.dptitle select {
  padding: 2px 4px; font: inherit; font-weight: 700; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--card);
  color: var(--text); cursor: pointer; max-width: 96px;
}
.dpnav {
  width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--card); cursor: pointer; line-height: 1; color: var(--text);
}
.dpnav:hover { background: var(--blue-l); }
table.dpgrid { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.dpgrid th { padding: 4px 0; font-size: 11.5px; font-weight: 600; color: var(--dim); }
table.dpgrid th.we { color: var(--red); }
table.dpgrid td { padding: 1px; text-align: center; border: 0; }
.dpday {
  width: 100%; height: 28px; border: 0; border-radius: 5px; background: none;
  cursor: pointer; font-size: 12.5px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dpday:hover { background: var(--blue-l); }
.dpday.we { color: var(--red); }
.dpday.now { box-shadow: inset 0 0 0 1px var(--blue); }
.dpday.on { background: var(--blue); color: #fff; font-weight: 700; }
.dpfoot {
  display: flex; gap: 6px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line2);
}
.dpbtn {
  flex: 1; padding: 6px 0; border: 1px solid var(--line); border-radius: 5px;
  background: var(--card); cursor: pointer; font-size: 12px; color: var(--text);
}
.dpbtn:hover { background: var(--bg); }
/* 「입력」은 다 골랐다는 뜻이라 눈에 띄어야 한다. 다른 둘보다 조금 넓게. */
.dpbtn.ok {
  flex: 1.3; background: var(--blue); border-color: var(--blue);
  color: #fff; font-weight: 700;
}
.dpbtn.ok:hover { background: var(--blue-d); }

/* 시 · 분 고르는 줄 (날짜+시각 칸에만 붙는다)

   오전/오후를 고르는 자리는 일부러 두지 않았다. 오후 2시를 오전 2시로
   잘못 고르면 마중이 열두 시간 어긋나는데 화면에는 아무 표시도 안 난다.
   그래서 00~23 한 줄로만 고르게 하고, 옆에 「24시간 표기」라고 적어 둔다. */
.dptime {
  display: flex; align-items: center; gap: 5px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line2);
}
.dptime .dpsel {
  height: 30px; padding: 0 4px; margin: 0;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--card); color: var(--text);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dptime .dpcolon { font-weight: 700; color: var(--dim); }
.dptime .dp24 { margin-left: auto; font-size: 11px; color: var(--dim); }
html[dir="rtl"] .dptime .dp24 { margin: 0 auto 0 0; }



.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }


.formfoot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line2); display: flex; gap: 8px; }
.formfoot .btn.danger { margin-left: auto; }

/* 나란히 놓는 단추 줄 (서류 미리보기 다섯 개처럼) */
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 0; }

/* ------------------------------------------------------------------
   색 딱지 — 코스 · 기숙사 · 국적
   색 자체는 기준정보에서 정해 style= 로 붙어 온다 (core/BIT_lms_view.php 의 BIT_lms_chip()).
   여기에는 색을 두지 않는다. 생김새만 맡는다.
   성별은 여기에 없다 — 위쪽의 .gender 가 이미 맡고 있다.
   ------------------------------------------------------------------ */
.chip { font-weight: bold; }

/* 코스·기숙사를 둘로 나눠 고른 학생의 딱지 옆에 붙는 주수.
   「Regular 4주  IELTS 4주」처럼 보인다. 딱지 자체가 굵은 색 글자라
   주수까지 굵으면 어느 것이 이름인지 알아보기 어렵다. 그래서 여기는
   작고 흐리게 둔다. 하나만 골랐을 때는 아예 안 나온다 — 그때는 옆의
   연수기간 칸에 주수가 이미 적혀 있다 (modules/agency/BIT_lms_ag_view.php 의 BIT_lms_ag_student_chips). */
.segw { font-size: 11.5px; font-weight: normal; color: var(--dim); margin-left: 2px; }

/* 코스·기숙사가 둘인 학생은 한 줄에 붙이지 않고 위아래로 나눈다. (2026-09-06)
   한 줄이면 「Regular 4주 IELTS 4주」가 한 덩이로 읽혀 둘이라는 것이
   눈에 안 들어온다. 줄 사이는 좁게 둬서 목록 줄 키가 크게 늘지 않게 한다. */
.segs .seg { display: block; line-height: 1.5; }

/* 국적은 배경 없이 글자만 물들인다. 여백을 주면 줄이 성글어 보인다.
   코스·기숙사 딱지는 에이전시 기준정보의 것이라 그쪽 스타일시트에 있다. */
.c-nat { display: inline; }

/* 목록 맨 앞의 일련번호. 눈이 걸리지 않게 흐리고 좁게.
   'no' 가 아니라 'seq' 다 — .list td.no 는 학생ID 칸이 이미 쓰고 있다. */
.list th.w-seq, .list td.seq { width: 46px; text-align: right;
      color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

.chkrow { display: flex; gap: 20px; flex-wrap: wrap; margin: 4px 0 0; }
label.chk { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin: 0; }
label.chk input { margin: 0; }

/* 그림 올리는 칸 */
.imgfield { margin-bottom: 16px; }
.imgfield .imglabel { font-size: 12.5px; font-weight: 700; color: var(--dim); margin-bottom: 6px; }
.imgfield .imgbox {
  display: flex; align-items: center; justify-content: center;
  height: 104px; margin-bottom: 8px; padding: 8px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: #fbfcfd;
  /* 흰 배경 그림도 테두리가 보이도록 바둑판을 깐다 */
  background-image:
    linear-gradient(45deg, #f0f2f5 25%, transparent 25%, transparent 75%, #f0f2f5 75%),
    linear-gradient(45deg, #f0f2f5 25%, transparent 25%, transparent 75%, #f0f2f5 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
.imgfield .imgbox img { max-height: 88px; max-width: 100%; object-fit: contain; }
.imgfield .imgnone { color: #aeb6c0; font-size: 12.5px; }
.imgfield input[type=file] { font-size: 12.5px; width: 100%; }
.imgfield .hint { margin: 6px 0 0; }

/* PDF 는 미리보기가 없다. 열어 보는 표딱지를 대신 둔다. */
.filetag {
  display: inline-block; padding: 8px 16px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--dim); text-decoration: none;
}
.filetag:hover { border-color: var(--blue); color: var(--blue); }

/* 한 줄씩 고치는 카드 (담당자 / 주소) */
.card.row-form { padding-top: 18px; }
.card.row-form > h2 { font-size: 15px; }
.card.row-form.new { border-style: dashed; background: #fcfdfe; }


/* 색 칸 : 네모난 색 고르개와 #RRGGBB 글자칸을 나란히 둔다.
   고르개는 assets/BIT_lms_app.js 가 만들어 끼운다. 못 만드는 브라우저에서는 글자칸만 남는다. */

.colcell { display: inline-block; white-space: nowrap; }
.colcell .colsw {
  width: 26px; height: 30px; padding: 1px; margin-right: 4px; vertical-align: middle;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer;
}
.colcell input.col {
  width: 86px; vertical-align: middle;
  font-family: Consolas, Menlo, monospace; text-transform: uppercase;
}
/* 색을 비운 칸은 흐리게 두어 "안 정했다" 가 눈에 들어오게 한다. */
.colcell input.col::-webkit-input-placeholder { color: #c3cbd4; }
.colcell input.col:-ms-input-placeholder      { color: #c3cbd4; }

/* 목록 : 펼친 줄 안쪽 */
.dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px 18px; align-items: start; }
.dl > div { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.5; min-width: 0; }
.dl .k { flex: 0 0 88px; color: var(--dim); }
.dl .v { flex: 1 1 auto; min-width: 0; word-break: break-word; }

/* 두 줄을 한 칸에 붙여 놓는 자리. 연수 시작일·종료일이 이것이다.
   따로따로 두면 격자가 둘을 다른 칸에 앉혀, 날짜가 적히기 시작하는 자리가
   서로 어긋난다. 위아래로 붙여 두면 이름표도 날짜도 한 줄에 선다. */
.dl > div.pair {
  display: grid; grid-template-columns: 88px minmax(0, 1fr);
  gap: 4px 8px; align-content: start;
}
.dl .dt { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* 펼친 줄 안의 금액.
   미납금은 빨갛게, 더 낸 돈은 파랗게 적는다. 목록 표에도 같은 이름의 규칙이
   있지만 그쪽은 table.list td.num 안에서만 듣는다. 여기서 다시 적어 준다.
   빛깔만으로 알리지 않는다 — 옆에 「미납금」이라는 이름표가 늘 함께 있다. */
.dl .owed { color: var(--red); }
.dl .over { color: var(--blue-d); }
.dl .v .tag { margin-left: 2px; }
.detail-in .acts { display: flex; align-items: center; gap: 8px; margin-top: 9px;
                   padding-top: 8px; border-top: 1px solid var(--line2); }
.detail-in .acts form.inline { margin: 0; }

/* 목록 : 찾기 상자 · 「모두 %d명」 · 이름 칸.
   옛 CSS 에서는 「학생 화면」 자리에 있었고 통합 때도 에이전시 모듈 쪽에
   그대로 두었는데, 활동기록(core/BIT_lms_screen_logs.php)과
   사용자관리(core/BIT_lms_screen_users.php)도 같은 것을 쓴다.
   모듈 CSS 는 에이전시 화면에서만 불러오므로 거기 두면 코어 화면에서는
   없는 것과 같다. 그래서 코어로 옮겼다. */
.filterbox { padding: 14px 16px; }
.filters .range { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); }
.filters .range input { width: 148px; }
.listcount { margin: 0 0 8px; font-size: 13px; color: var(--dim); }

/* 이름 칸은 여권이름 같은 것을 작게 덧붙인다 */
table.list td.no { font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
table.list td.nm { font-weight: 600; }
table.list td.nm .sub { display: block; font-weight: 400; font-size: 12px; color: var(--dim); }

/* 한 줄짜리 작은 입력 줄. 옆줄은 좁으니 넘치면 아래로 내린다. */
.urow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.urow input[type=text], .urow input[type=password] { flex: 1; min-width: 110px; }
.urow label { margin: 0; }
.urow form.inline { display: inline-block; margin: 0; }
/* 옆줄의 단추는 한 줄을 다 먹게 해 두었다. 이 줄에서는 글자만큼만 쓴다.
   `.cols > aside .btn` 보다 힘이 세야 해서 aside 를 같이 적는다. */
.cols > aside .urow .btn { width: auto; }

/* 로그인 아이디. 사람이 눈으로 옮겨 적는 값이라 붙어 보이지 않게 고정폭으로 둔다.
   합치면서 아이디가 사람마다 따로 생겨(core/BIT_lms_screen_users.php 머리말 2번)
   목록과 지사 펼침에 칸이 하나 늘었다. */
.lid { font-family: Consolas, Menlo, monospace; font-size: 12px; color: var(--dim); }

/* 펼친 줄 안의 작은 묶음 : 에이전시 목록에서 지사와 사용자를 늘어놓는다.
   .dl 처럼 격자로 짜면 지사가 하나뿐일 때 빈 칸이 크게 남는다.
   그래서 이름표를 위에 두고 알갱이를 옆으로 흘려 보낸다. */
.subtree { margin-bottom: 12px; }
.subtree:last-of-type { margin-bottom: 0; }
.subtree-h { font-size: 12px; color: var(--dim); font-weight: 600; margin-bottom: 6px;
             letter-spacing: .03em; }
.subtree-h em { font-style: normal; color: var(--blue); font-weight: 700; }
.subtree .hint { margin: 0; }

ul.chips { list-style: none; margin: 0; padding: 0;
           display: flex; flex-wrap: wrap; gap: 6px; }
ul.chips li {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: 12.5px; font-weight: 600;
}
ul.chips li .sub { font-weight: 400; color: var(--dim); font-size: 11.5px; }
ul.chips li .tag { font-size: 10.5px; }

/* 지사를 펼쳤을 때 나오는 소속 인원 목록. (2026-09-06)
   사람마다 「다른 지사로 보내기」가 붙어서 chips 처럼 옆으로 흘리면
   줄이 엉킨다. 한 사람이 한 줄이고, 오른쪽 끝에 보내기 상자를 둔다. */
ul.memlist { list-style: none; margin: 0; padding: 0; }
ul.memlist li {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--line2); font-size: 12.5px;
}
ul.memlist li:last-child { border-bottom: 0; }
ul.memlist .who { font-weight: 600; min-width: 110px; }
ul.memlist .lv  { color: var(--dim); }
ul.memlist .tag { font-size: 10.5px; }
/* 보내기 상자는 오른쪽 끝으로 민다. 사람마다 세로로 가지런해 보인다. */
ul.memlist form.movef { margin: 0 0 0 auto; display: flex; align-items: center; gap: 5px; }
ul.memlist form.movef select { padding: 4px 6px; font-size: 12px; }

/* 등록/수정 : 왼쪽 폼 + 오른쪽 곁칸 */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.cols > aside { display: flex; flex-direction: column; gap: 14px; }
.cols > aside .card { padding: 14px 16px; }
.cols > aside h2 { margin: 0 0 10px; font-size: 14px; padding: 0; border: 0; }
.cols > aside h3 { margin: 12px 0 8px; font-size: 12.5px; color: var(--dim); }
.cols > aside .btn { width: 100%; justify-content: center; }
.cols > aside .formfoot { margin-top: 10px; padding-top: 0; border: 0; }

/* 옵션 로컬피 : 체크칸을 한 줄에 여럿 늘어놓는다 */
.optbox { border: 1px solid var(--line); border-radius: var(--radius);
          padding: 10px 14px 12px; margin: 4px 0 14px; }
.optbox legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--dim); }
.optbox label.chk { margin: 0 18px 0 0; font-size: 13px; }

/* ==================================================================
   대시보드
   ================================================================== */

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 8px; }
.kpi {
  display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; color: var(--text);
}
/* a.kpi 일 때만 눌리는 느낌을 준다 */
a.kpi:hover { border-color: var(--blue); background: var(--blue-l); text-decoration: none; }
.kpi-label { font-size: 12.5px; color: var(--dim); font-weight: 600; }
.kpi-num { font-size: 30px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 11.5px; color: var(--dim); }

/* 에이전시 칸 밑에 붙는 나라별 수.
   칸이 <a> 라서 안쪽은 전부 span 이다 — flex 를 쓰려면 display 를 손수 준다.
   국기 글자가 없는 창(윈도)에서는 KR 같은 두 글자가 대신 보인다. 그래서
   글자폭을 고정하지 않는다. */
.kpi-flags { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px;
             padding-top: 6px; border-top: 1px solid var(--line); }
.kpi-flags .kf { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.kpi-flags .kf-f { font-size: 13px; line-height: 1; }
.kpi-flags .kf-n { color: var(--dim); font-variant-numeric: tabular-nums; }

.dash-note { margin: 0 0 18px; }

/* ---- 비율 그래프 넉 장 ----
   그림 자체는 PHP 가 SVG 로 그린다 (core/BIT_lms_chart.php). 조각 색은 style= 로 붙어
   오므로 여기에는 색을 두지 않는다. 자리와 이름표 생김새만 맡는다. */
.charts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 12px; }
.chart {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 12px; min-width: 0;
}
.chart > h3 { margin: 0 0 6px; font-size: 13px; display: flex; align-items: center; gap: 4px; }
.chart-n { font-weight: 400; color: var(--dim); font-size: 12px; }
.chart-empty { margin: 24px 0; text-align: center; color: var(--dim); font-size: 12.5px; }

/* 「크게 보기」 단추. 제목 줄 맨 오른쪽에 붙는다.
   예전에는 칸 아무 데나 누르면 커졌는데, 이제 조각을 누르면 그 조각이
   골라지므로 둘이 부딪힌다. 단추를 따로 두어 갈랐다. */
.chart-big {
  margin-left: auto; flex: 0 0 auto;
  width: 24px; height: 24px; padding: 0; line-height: 1;
  border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--dim); font-size: 13px; cursor: zoom-in;
}
.chart-big:hover { border-color: var(--blue); color: var(--blue); }
.chart-big:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

/* 칸이 좁아져도 그림이 잘리지 않게 폭에 맞춰 줄어들게 둔다. */
svg.pie { display: block; width: 100%; height: auto; margin: 2px auto 6px; }

/* ---- 파이 조각 ----
   누르면 그 조각이 바깥으로 나오면서 조금 커지고, 나머지는 흐려진다.
   자리를 옮기는 것은 자바스크립트가 transform 을 갈아 끼워서 하고,
   그 사이를 이어 그리는 것은 여기 transition 이 맡는다.
   (SVG 의 transform 은 CSS 속성이기도 해서 transition 이 그대로 먹는다.) */
.ps {
  cursor: pointer;
  transition: transform .28s cubic-bezier(.22,.7,.3,1), opacity .2s ease;
}
.pie.picked .ps { opacity: .42; }
.pie.picked .ps.on { opacity: 1; }

/* 조각 안에 넣은 글자의 색은 조각 색에 따라 달라지므로 PHP 가 fill= 로
   직접 붙여 준다. 여기서는 크기만 맡는다.
   글자가 마우스를 가로채면 조각이 안 눌리므로 그냥 통과시킨다. */
.pl-in { pointer-events: none; }
.pl-t { font-size: 11px; font-weight: 700; }
.pl-v { font-size: 10px; fill-opacity: .9; }

/* ---- 고른 조각 한 줄 ----
   조각 수만큼 줄을 다 만들어 놓고 고른 것 하나만 보인다. 줄을 포개 놓아야
   칸 높이가 조각 수에 따라 들쭉날쭉하지 않다. */
.chart-now {
  position: relative; height: 22px; font-size: 13px;
  border-top: 1px solid var(--line2); padding-top: 6px;
}
.chart-now .cn {
  position: absolute; left: 0; right: 0; top: 6px;
  display: flex; align-items: center; gap: 6px;
  opacity: 0; transition: opacity .18s ease;
}
.chart-now .cn.on { opacity: 1; }
.chart-now i {
  flex: 0 0 auto; width: 11px; height: 11px; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);   /* 옅은 색도 테두리로 보이게 */
}
/* 이름이 길면 줄을 늘리지 말고 …으로 자른다. */
.chart-now .k { flex: 1 1 auto; min-width: 0; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.chart-now b  { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.chart-now em { flex: 0 0 auto; text-align: right;
                font-style: normal; color: var(--dim);
                font-variant-numeric: tabular-nums; }

/* ---- 그래프 크게 보기 ----
   단추를 누르면 그 자리에서 화면 한가운데로 자라난다. 원본은 손대지 않고
   복사본을 띄우므로, 닫을 때는 원래 있던 네모로 도로 오므라들었다가
   사라지면 된다. 자세한 것은 assets/BIT_lms_app.js 의 initChartZoom 에 적어 두었다. */

.chart-back {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, .45); z-index: 80;
  opacity: 0; transition: opacity .24s ease;
}
.chart-back.on { opacity: 1; }

.chart-zoom {
  position: fixed; z-index: 81; margin: 0; overflow: auto;
  padding: 20px 24px 18px; cursor: zoom-out;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  transition: left .28s cubic-bezier(.22,.7,.3,1), top .28s cubic-bezier(.22,.7,.3,1),
              width .28s cubic-bezier(.22,.7,.3,1), height .28s cubic-bezier(.22,.7,.3,1);
}
.chart-zoom > h3 { font-size: 18px; margin-bottom: 10px; }
.chart-zoom .chart-n { font-size: 15px; }
/* 크게 띄운 복사본에서 다시 크게 보기 단추를 누를 일은 없다. */
.chart-zoom .chart-big { display: none; }
.chart-zoom .chart-now { height: 28px; font-size: 16px; }
.chart-zoom .chart-now i { width: 14px; height: 14px; border-radius: 3px; }

/* ==================================================================
   활동기록
   ================================================================== */

/* 줄이 아주 많다. 글씨를 한 단계 줄이고 숫자는 폭을 고정한다. */
table.list.logs { font-size: 12.5px; }
table.list.logs td.when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--dim); }
table.list.logs td.ip { font-variant-numeric: tabular-nums; color: var(--dim); font-size: 11.5px; }
table.list.logs td.sumup { color: var(--dim); max-width: 320px;
                           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.list.logs .dim { color: var(--dim); font-weight: 400; }
/* 펼칠 것이 없는 줄은 손가락 모양을 띄우지 않는다 */
table.list.logs tr.plain { cursor: default; }

/* 무엇이 어떻게 바뀌었는지 */
.difftable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.difftable th, .difftable td { padding: 5px 9px; border-bottom: 1px solid var(--line2);
                               text-align: left; vertical-align: top; word-break: break-word; }
.difftable thead th { font-size: 11.5px; color: var(--dim); font-weight: 600; }
.difftable tbody th { width: 150px; font-weight: 600; color: var(--dim); }
.difftable td.was { color: var(--red); text-decoration: line-through; width: 34%; }
.difftable td.now { color: var(--green); width: 34%; }
.logtext { margin: 0; font-size: 12.5px; line-height: 1.7; word-break: break-word; }


/* ---------------- 인쇄 ---------------- */
/* 모듈의 것은 그 모듈 스타일시트가 따로 감춘다. 여기에 .popup 이나
   .topo-* 를 적어 두면, 그 화면을 열 수도 없는 자리(시간표만 여는 화면)의
   인쇄 규칙에까지 남의 이름이 끼어든다. */
@media print {
  .topbar, .pager, .filters, .btn { display: none !important; }
  /* 크게 보기로 띄운 복사본은 종이에 두 번 찍히므로 뺀다. */
  .chart-back, .chart-zoom { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .card { border: none; padding: 0; }
}

/* ---------------- 아랍어 ---------------- */
html[dir="rtl"] table.list th, html[dir="rtl"] table.list td { text-align: right; }
/* 글은 시작(오른쪽)에, 숫자는 끝(왼쪽)에 붙인다. 위 규칙이 숫자칸까지 끌고 가므로 되돌린다. */
html[dir="rtl"] table.list th.num, html[dir="rtl"] table.list td.num { text-align: left; }
/* 가운데는 어느 쪽 글이든 가운데다. 위의 「모두 오른쪽」 규칙이 이것까지
   끌고 가므로 되돌려 준다. */
html[dir="rtl"] table.list th.ctr, html[dir="rtl"] table.list td.ctr { text-align: center; }
/* 체크칸 사이 여백도 오른쪽에서 왼쪽으로 흐른다. */
html[dir="rtl"] .optbox label.chk { margin: 0 0 0 18px; }
html[dir="rtl"] input + .age { margin-left: 0; margin-right: 7px; }