/* Construction Payroll - the whole look of the program, in one file.

   Plain CSS.  No build step, no preprocessor, no framework: what is written
   here is what the browser receives, so the person who has to fix this in two
   years can read it with nothing but a text editor.

   The screens this has to dress are a site office laptop and a phone held in
   one hand on a scaffold, so the tap targets are large and the grid scrolls
   sideways rather than folding.

   Order: page, chrome, headings, messages, cards, tabs, forms, tables,
   buttons, badges, dashboard, workers, attendance, modal, login, payslip,
   print, small screens. */

/* --- the page ------------------------------------------------------------ */
* { -webkit-box-sizing: border-box; box-sizing: border-box; }

/* 메뉴줄이 화면 위에 붙어 있으므로(.nav), 주소의 #wopen 같은 자리로 뛸 때
   그 자리를 화면 맨 위에 붙이면 메뉴줄 뒤로 숨습니다. 그만큼 미리 띄웁니다.
   근로자 화면이 줄을 누를 때마다 #wopen 으로 뛰므로 이게 없으면 펼쳐진
   칸의 첫 줄이 늘 가려집니다. 모르는 브라우저는 그냥 무시합니다. */
html { scroll-padding-top: 68px; }

body {
  margin: 0;
  font: 14px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic',
        'Apple SD Gothic Neo', Roboto, sans-serif;
  color: #243b53;
  background: #f4f6f8;
  -webkit-text-size-adjust: 100%;
}

a       { color: #2b6cb0; text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 20px; margin: 0; font-weight: 600; }
h2 { font-size: 15px; margin: 0 0 14px; font-weight: 600; color: #334e68; }
h3 { font-size: 14px; margin: 18px 0 8px; font-weight: 600; }

hr { border: 0; border-top: 1px solid #e6ecf1; margin: 18px 0; }

.wrap      { max-width: 1080px; margin: 0 auto; padding: 22px 16px 60px; }
.wrap.wide { max-width: 1600px; }
body.bare .wrap { padding-top: 26px; }

/* --- the bar across the top ---------------------------------------------- */

/* 2026-09-05 부터 메뉴줄은 화면 위에 붙어 따라옵니다. 출근표와 급여표는
   아래로 길어서, 표 한가운데에서 다른 메뉴로 가려면 맨 위까지 되감아야
   했습니다.

   z-index 20 은 위아래 사이입니다 - 출근표 머리글(2~4)보다는 위라서 표가
   메뉴를 덮지 않고, 덧창(.modal 50, .lb 60)보다는 아래라서 대화상자나 사진을
   열면 메뉴가 그 밑으로 들어갑니다.

   작은 화면에서는 붙이지 않습니다. 아래 @media 를 보십시오. */
.nav {
  background: #1f3d5c;
  color: #d9e2ec;
  box-shadow: 0 1px 3px rgba(16, 42, 67, .18);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
}

.nav-in {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  min-height: 52px;
}

.brand {
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  margin-right: 22px;
  padding: 8px 0;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; color: #fff; }

.nav-menu {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;
}

.nav-a {
  color: #bcccdc;
  padding: 15px 13px;
  font-size: 14px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.nav-a:hover  { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .06); }
.nav-a.on     { color: #fff; border-bottom-color: #63b3ed; font-weight: 600; }

.nav-me {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  margin-left: auto;
}

/* 폰에서만 나오는 메뉴 단추(☰).  넓은 화면에서는 아예 없는 셈입니다. */
.nav-tog {
  display: none;
  background: none;
  border: 0;
  color: #dbe7f3;
  font-size: 22px;
  line-height: 1;
  padding: 9px 10px;
  cursor: pointer;
}

.langsel {
  background: #2c5480;
  color: #e2e8f0;
  border: 1px solid #3d6591;
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 13px;
  max-width: 150px;
}

/* 메뉴줄 오른쪽의 「이름 · 권한」.

   반드시 `.nav` 를 앞에 붙여 두십시오. `who` 라는 이름은 출근표의 근로자
   이름 칸(.grid td.who)도 함께 씁니다. 앞에 아무것도 없이 `.who` 라고만
   적어 두었을 때, 아래 작은 화면 규칙의 `display: none` 이 메뉴줄뿐 아니라
   **출근표의 이름 칸까지 통째로 지웠습니다.** 폰으로 열면 O 와 A 만 늘어선
   표가 되고 누구 것인지 알 수 없었습니다. 2026-09-05 에 발견해 고쳤습니다. */
.nav .who   { padding: 0 10px; font-size: 13px; white-space: nowrap; }
.nav .who a { color: #fff; }
.nav .who em { color: #9fb3c8; font-style: normal; font-size: 12px; }

/* --- page heading --------------------------------------------------------- */
.ph {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
}
.ph-r {
  margin-left: auto;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 6px;
}

/* --- messages ------------------------------------------------------------- */
.msg {
  padding: 11px 14px;
  border-radius: 6px;
  margin: 0 0 14px;
  border: 1px solid #cbd6e2;
  background: #fff;
  font-size: 14px;
}
.msg a          { text-decoration: underline; }
.msg.ok,
.msg.good       { background: #f0fff4; border-color: #9ae6b4; color: #22543d; }
.msg.ok a,
.msg.good a     { color: #22543d; }
.msg.bad        { background: #fff5f5; border-color: #f0b8b8; color: #9b2c2c; }
.msg.bad a      { color: #9b2c2c; }
.msg.warn       { background: #fffaf0; border-color: #f6d8a8; color: #8a5a12; }
.msg.warn a     { color: #8a5a12; }
.msg.info       { background: #ebf4ff; border-color: #b3d2f2; color: #22497a; }
.msg.info a     { color: #22497a; }

/* --- cards ---------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.card.narrow { max-width: 420px; }
/* Between the two: a table that needs more than 420px but should not run the
   whole width of a desktop screen, where the eye loses the row. */
.card.mid    { max-width: 880px; }
.card.wide   { max-width: none; }

/* A card that is asking a question before something is thrown away. Coloured so
   it cannot be mistaken for the ordinary form underneath it. */
.card.warn {
  border-color: #e0a3a3;
  background: #fffaf7;
}
.card.warn h3 { margin-top: 0; color: #9b2c2c; }

/* Two columns that become one when there is no room. */
.two {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  gap: 16px;
}
.two > *    { -webkit-box-flex: 1; -ms-flex: 1 1 380px; flex: 1 1 380px; min-width: 0; }

/* --- tabs ----------------------------------------------------------------- */
.tabs {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid #dbe3ea;
  margin-bottom: 18px;
}
.tab {
  padding: 9px 15px;
  color: #486581;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tab:hover  { background: #eaf0f6; text-decoration: none; }
.tab.on     { background: #fff; border-color: #dbe3ea; color: #102a43; font-weight: 600; }

/* --- forms ---------------------------------------------------------------- */
label { display: block; font-weight: 600; margin: 0 0 5px; color: #334e68; }

/* No input[type=date] here on purpose - there are none left.  That field draws
   its own calendar in the browser's language, which stayed Korean even with
   the screen set to English, so the date boxes are plain text with class="dt"
   and app.js draws the calendar.  See pr_date_input() in lib/BIT_mnp_ui.php. */
input[type=text], input[type=password], input[type=number],
input[type=tel], input[type=email], select, textarea {
  padding: 8px 10px;
  border: 1px solid #cbd6e2;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: #243b53;
  background: #fff;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: #7aa7d4;
  box-shadow: 0 0 0 3px rgba(43, 108, 176, .12);
}
input[disabled], select[disabled], textarea[disabled] { background: #f0f4f8; color: #829ab1; }

textarea { width: 100%; min-height: 70px; resize: vertical; }

/* One line of a form: label above, field below, help underneath. */
.fr        { margin-bottom: 14px; }
.fr > input[type=text], .fr > input[type=password],
.fr > select                          { min-width: 200px; }
.fr small  { display: block; color: #829ab1; font-size: 12px; margin-top: 4px; }
.fr .tm, .fr .mn, .fr .dt             { min-width: 0; }

/* A checkbox reads left to right, not top to bottom. */
.ck {
  display: inline-block;
  font-weight: 400;
  margin: 0 14px 0 0;
  cursor: pointer;
  color: #243b53;
}
.ck input { margin-right: 4px; vertical-align: -1px; }

.tm { width: 84px;  text-align: center; }
.mn { width: 120px; text-align: right;  font-variant-numeric: tabular-nums; }
.dt { width: 130px; text-align: center; font-variant-numeric: tabular-nums; }

/* A row of controls - filter bars, button rows. */
.bar {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 8px;
}
.bar label   { margin: 0; font-weight: 400; color: #627d98; }
.bar .fr     { margin: 0; }

.inline { display: inline; }

/* 「이 중에 하나」를 고르는 단추 묶음. 사이를 띄우면 저마다 다른 일을 하는
   단추로 보여서, 하나로 붙여 놓았습니다. margin-left:-1px 은 이웃한 두
   단추의 테두리가 겹쳐 두 줄로 보이는 것을 막습니다. */
.vsw { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
.vsw .btn              { border-radius: 0; margin-left: -1px; }
.vsw .btn:first-child  { border-radius: 6px 0 0 6px; margin-left: 0; }
.vsw .btn:last-child   { border-radius: 0 6px 6px 0; }
.vsw .btn.on           { position: relative; z-index: 1; }

.bar.bart { margin-top: 12px; }
.tld { color: #829ab1; }

/* 날짜 뒤에 붙는 요일 세 글자. 날짜와 다른 색이라야 「2026-09-11 FRI」가
   한 덩어리 숫자로 뭉쳐 보이지 않습니다. */
.dw { color: #b56b1f; font-weight: 600; }

/* 급여 만들기의 지급일 목록.

   선택 상자로 두었을 때는 한 줄이 「2026-09-11 (2026-09-04 ~ 2026-09-10)」
   이었습니다. 한 줄에 날짜가 셋인데 <option> 안쪽은 어느 브라우저에서도
   부분마다 색이나 굵기를 줄 수 없어, 숫자 열두 자리가 그냥 뭉쳐 보였습니다.
   지급일이 어느 것인지 세어 봐야 알았습니다. 그래서 상자를 버리고 라디오
   목록으로 폈습니다 - 지급일은 파랑 굵게 옅은 하늘색 바탕에, 요일은 다른
   색으로, 기간은 회색 잔글씨로 갈라 둡니다. */
.flab { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: #486581; }
.pdl {
  /* app.js 가 골라 둔 줄을 가운데로 굴려 올립니다. 그 계산이 offsetTop 을
     쓰므로 이 상자가 기준(offsetParent)이어야 합니다. */
  position: relative;
  max-height: 208px;
  overflow-y: auto;
  border: 1px solid #cbd6e2;
  border-radius: 6px;
  background: #fff;
}
.pdl label {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 10px;
  border-bottom: 1px solid #eef2f6;
  font-weight: 400;
  cursor: pointer;
}
.pdl label:last-child { border-bottom: 0; }
.pdl label:hover      { background: #f7fbff; }
.pdl input            { margin: 0; }
.pdl .pdd {
  padding: 2px 7px;
  border-radius: 4px;
  background: #eaf3fd;
  color: #1c4d85;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* 고른 줄만 바탕을 한 단계 진하게. 라디오 바로 다음 형제가 날짜라서
   이 한 줄로 됩니다 - 줄 전체를 칠하려면 :has() 가 필요한데, 낡은
   브라우저에는 없습니다. */
.pdl input:checked + .pdd { background: #cfe3fa; }
.pdl .pdp { color: #7b8fa3; font-size: 12px; }

/* --- the date picker ------------------------------------------------------ --
   Drawn by app.js, not by the browser, so that the month and weekday names
   follow the screen language instead of the laptop's.  Everything here is
   only ever seen when JavaScript is on; with it off the .dt field stays a
   plain YYYY-MM-DD box, which the server has always accepted. */
.dtp {
  position: absolute;
  z-index: 60;
  display: none;
  padding: 8px;
  background: #fff;
  border: 1px solid #cbd6e2;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(16, 42, 67, .16);
  font-size: 13px;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
  user-select: none;
}

/* Month name with an arrow either side. */
.dtp-h {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  margin-bottom: 6px;
}
.dtp-a {
  border: 1px solid #dbe3ea;
  background: #f5f8fb;
  border-radius: 6px;
  color: #334e68;
  font-size: 16px;
  line-height: 1;
  padding: 3px 9px;
  cursor: pointer;
}
.dtp-a:hover { background: #eaf0f6; }
.dtp-t { font-weight: 600; color: #102a43; }

.dtp-g { border-collapse: collapse; }
.dtp-g th {
  width: 30px;
  padding: 3px 0;
  font-weight: 600;
  font-size: 11px;
  color: #829ab1;
}
.dtp-g td {
  width: 30px;
  height: 27px;
  text-align: center;
  border-radius: 6px;
  color: #243b53;
  cursor: pointer;
}
.dtp-g td:hover  { background: #eaf0f6; }
/* Today is outlined; the day already in the box is filled. */
.dtp-g td.now    { box-shadow: inset 0 0 0 1px #b6c7d8; font-weight: 600; }
.dtp-g td.on     { background: #2b6cb0; color: #fff; font-weight: 600; }
.dtp-g td.on:hover { background: #2b6cb0; }

.dtp-f {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  gap: 6px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #e6ecf1;
}
.dtp-b {
  -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
  border: 1px solid #dbe3ea;
  background: #f5f8fb;
  border-radius: 6px;
  color: #334e68;
  font-family: inherit;
  font-size: 12px;
  padding: 5px 0;
  cursor: pointer;
}
.dtp-b:hover { background: #eaf0f6; }

/* --- tables --------------------------------------------------------------- */
.tb {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tb th, .tb td {
  padding: 9px 10px;
  border-bottom: 1px solid #e6ecf1;
  text-align: left;
  vertical-align: top;
}
.tb thead th {
  background: #f0f4f8;
  color: #486581;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  border-bottom: 1px solid #cbd6e2;
}
.tb tbody tr:hover  { background: #fbfcfe; }
.tb tfoot th, .tb tfoot td {
  background: #f0f4f8;
  font-weight: 600;
  border-top: 1px solid #cbd6e2;
  border-bottom: 0;
}
.tb .r      { text-align: right; font-variant-numeric: tabular-nums; }
.tb .c      { text-align: center; }
.tb .nw     { white-space: nowrap; }
.tb .big    { font-size: 17px; font-weight: 600; }

/* The skill-level table on the master screen. Seven columns, and five of them are
   as narrow as their content - without these widths the browser hands the space
   to the header words instead and breaks them one letter per line. */
.skl th, .skl td { vertical-align: middle; }
.skl .sk-nm input { width: 100%; }
/* One name box per screen language, stacked, with the language written in front
   of each. The tag is a fixed width so the boxes line up down the column, and
   the box is sized against it so the pair never spills out of the cell. */
.skl .sk-ln { display: block; margin: 2px 0; white-space: nowrap; }
.skl .sk-lg {
  display: inline-block;
  width: 56px;
  font-size: 11px;
  color: #6b7684;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skl .sk-ln input { width: 74%; vertical-align: middle; }
.skl .sk-nm { min-width: 250px; }
.skl .sk-num { width: 52px; }
.skl .sk-o  { width: 72px; }
.skl .sk-p  { width: 172px; white-space: nowrap; }
.skl .sk-h  { width: 96px; }
.skl .sk-n  { width: 72px; }
.skl .sk-a  { width: 64px; }
.skl .sk-b  { width: 1%; text-align: right; }
.skl .sk-go { margin-right: 4px; }
/* The blank line the Add button draws. Tinted so it is obvious that this one is
   not saved yet and that leaving the page loses it. */
.skl tr.sk-new td { background: #f2f7fd; }
.skl tfoot td { border-bottom: 0; padding-top: 10px; }

/* Label on the left, value on the right - the "what is this thing" table. */
.tb.kv th {
  width: 1%;
  white-space: nowrap;
  background: #f7f9fb;
  color: #486581;
  font-weight: 600;
}

.tb.log td            { font-size: 13px; padding: 6px 10px; }
.tb.log td:first-child { white-space: nowrap; color: #829ab1; font-size: 12px; }

/* The payroll sheet is wide by nature; let it be tight and numeric. */
.tb.pay th, .tb.pay td { padding: 7px 8px; font-size: 13px; white-space: nowrap; }

/* 근로자 목록. 줄 하나가 통째로 펼치기 단추입니다 - 이름 글자에만 길을
   달아 두었을 때는 과녁이 좁아 몇 번씩 다시 눌러야 했습니다. 서식이
   들어앉은 줄에는 data-go 가 없어 서식 안을 눌러도 넘어가지 않습니다. */
.tb.wtb tbody tr.wrow          { cursor: pointer; }
.tb.wtb tbody tr.wrow:hover td { background: #f4f8fc; }
.tb.wtb tbody tr.wrow.on td    { background: #eef4fa; }
.tb.wtb .cav { color: #829ab1; margin-right: 5px; font-size: 11px; }
.tb.wtb td.wfrm { background: #f7fafc; padding: 2px 10px 14px; }
.wfrm .wfh { margin: 14px 0 6px; font-size: 15px; color: #243b53; }

/* 펼친 서식은 표 너비를 다 씁니다.

   2026-09-05 에 두 번 고쳤습니다. 처음에는 서식 줄에 display:block 을
   걸었는데(칸 너비 계산에서 빼려고), 그러면 그 블록이 표 옆으로 밀려나
   목록 칸들이 오른쪽으로 쏠려 버렸습니다. 표는 width:100% 라 최소 너비만
   넘지 않으면 늘어나지 않으므로, 그 손질 자체가 필요 없었습니다.

   남은 문제는 세로 길이였습니다. 서식이 원래 380px 짜리 두 단이라 칸 하나에
   들어가면 한 단으로 접히고, 열 몇 줄이 세로로 늘어서 화면 한 장을 넘겼습니다.
   이제 카드는 가로로 꽉 펴고, 그 안의 입력칸을 210px 짜리로 잘라 가로로
   늘어놓습니다. 성별·나이·연락처처럼 좁아도 되는 칸이 나란히 서서 두세 줄로
   끝납니다. */
.wfrm .two { display: block; }
.wfrm .card,
.wfrm .pmbox {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0 18px;
  -webkit-box-align: start; -ms-flex-align: start; align-items: start;
}
.wfrm .card > h2 { grid-column: 1 / -1; margin-bottom: 4px; }
.wfrm .pmbox     { grid-column: 1 / -1; }
.wfrm .fr.w2     { grid-column: span 2; }
.wfrm .fr        { margin-bottom: 12px; min-width: 0; }
.wfrm .fr > input, .wfrm .fr > select, .wfrm .fr > textarea { width: 100%; }
.wfrm .fr > input[type=text], .wfrm .fr > input[type=password],
.wfrm .fr > input[type=date], .wfrm .fr > select { min-width: 0; }

/* 단추 줄과 「퇴사 처리」 카드는 입력칸이 아니라 문장과 단추입니다.
   칸으로 잘라 놓으면 오히려 읽기 어려우므로 그대로 둡니다. */
.wfrm .card.plain { display: block; }

/* 읽기 전용 펼침.

   줄을 누르는 것은 대개 「이 사람 일당이 얼마였지」 하나를 보려는 것이지
   고치려는 게 아닙니다. 그래서 먼저 이것이 열리고, 「수정」을 눌러야 위의
   서식으로 바뀝니다. 입력칸이 없으니 170px 자리면 넉넉하고, 넓은 판
   (wrap.wide, 1600px)에서는 한 줄에 예닐곱 개가 들어가 두 줄로 끝납니다. */
.wv   { padding: 10px 0 4px; }
.wv-g {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px 20px;
  margin: 12px 0 2px;
}
.wv-i  { min-width: 0; }
.wv-k  { display: block; font-size: 12px; color: #829ab1; margin-bottom: 3px; }
.wv-v  { display: block; color: #243b53; word-break: break-word; }
/* 사진은 여기서 제법 크게 보여 줍니다 - 얼굴만 알아보면 되는 게 아니라
   신분증 글자를 읽어야 할 때가 있기 때문입니다. 더 크게 보려면 누릅니다. */
.wv-ph { margin: 10px 0 0; }
.wv-p  { display: inline-block; vertical-align: top; margin: 0 14px 4px 0;
         text-decoration: none; }
.wv-p img {
  display: block; height: 170px; width: auto;
  border: 1px solid #dbe3ea; border-radius: 6px; background: #fff;
}
.wv-p span   { display: block; font-size: 12px; color: #829ab1; margin-top: 5px; }
.wv-p:hover img  { border-color: #4a90d9; }
.wv-p:hover span { color: #2f6f9f; }
.wv-hint { margin: 2px 0 0; }
.wv-memo { margin: 10px 0 2px; }
/* 고치기·닫기는 왼쪽에 붙고 지우기는 오른쪽 끝으로 밀립니다. 되돌릴 수 없는
   단추를 나머지와 나란히 두면 닫으려다 지웁니다. */
.wv-btn {
  margin: 14px 0 2px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 8px;
}
.wv-btn .r { margin-left: auto; }

.dim    { color: #829ab1; }
.empty  { color: #829ab1; padding: 16px 2px; margin: 0; }
.note   { color: #627d98; font-size: 13px; margin: 12px 0 0; }
.sub    { color: #627d98; margin: 0 0 18px; }

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid #cbd6e2;
  border-radius: 6px;
  background: #fff;
  color: #334e68;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}
.btn:hover     { background: #f0f4f8; text-decoration: none; color: #102a43; }
.btn:active    { background: #e2e8f0; }
.btn.pri       { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
.btn.pri:hover { background: #245a94; color: #fff; }
.btn.dan       { background: #fff; border-color: #e0a3a3; color: #9b2c2c; }
.btn.dan:hover { background: #fff5f5; color: #7b2020; }
.btn.sm        { padding: 4px 9px; font-size: 12px; }
/* 지금 고른 것. 누르는 순간뿐인 :active 와 달리 손을 떼도 남아 있어야
   「이걸 보고 있다」가 됩니다. */
.btn.on        { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
.btn.on:hover  { background: #245a94; color: #fff; }
.btn[disabled] {
  background: #f0f4f8;
  border-color: #dbe3ea;
  color: #9fb3c8;
  cursor: not-allowed;
}
.btn[disabled]:hover { background: #f0f4f8; color: #9fb3c8; }

button.btn { font: inherit; font-size: 14px; }

/* --- badges --------------------------------------------------------------- */
.bg {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}

.b-on    { background: #e6fffa; border-color: #9decd0; color: #1d6f5c; }
.b-off   { background: #f0f4f8; border-color: #cbd6e2; color: #627d98; }

/* Five skill levels, darkest at the top of the trade. */
.sk-1 { background: #ebf4ff; border-color: #a7c9ef; color: #1c4d85; }
.sk-2 { background: #eef2ff; border-color: #bcc5f2; color: #33409b; }
.sk-3 { background: #f4f1fe; border-color: #cfc6f0; color: #55409b; }
.sk-4 { background: #f7f4ef; border-color: #ddd0bb; color: #6b563a; }
.sk-5 { background: #f4f6f8; border-color: #d3dce5; color: #52657a; }

.b-draft { background: #f0f4f8; border-color: #cbd6e2; color: #52657a; }
.b-req   { background: #fffaf0; border-color: #f0cd97; color: #8a5a12; }
.b-ok    { background: #f0fff4; border-color: #9ae6b4; color: #22543d; }

.h-sp    { background: #fff5eb; border-color: #f5cba3; color: #8a4f12; }
.h-rg    { background: #ffeff2; border-color: #f2b3c0; color: #8a1c38; }
.h-cp    { background: #eefaf5; border-color: #a8ddc9; color: #1d6146; }

/* --- dashboard tiles ------------------------------------------------------ */
.cards {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.tile {
  -webkit-box-flex: 1; -ms-flex: 1 1 180px; flex: 1 1 180px;
  background: #fff;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  padding: 16px 18px;
  color: #243b53;
  display: block;
}
.tile:hover { border-color: #7aa7d4; text-decoration: none; box-shadow: 0 2px 6px rgba(16, 42, 67, .07); }

.tile-n { display: block; font-size: 30px; font-weight: 600; line-height: 1.15; color: #102a43; }
.tile-l { display: block; font-size: 13px; color: #486581; margin-top: 2px; }
.tile-s { display: block; font-size: 12px; color: #829ab1; margin-top: 5px; }

/* --- worker photographs and payment boxes --------------------------------- */
.pho {
  width: 140px;
  border: 1px solid #dbe3ea;
  border-radius: 6px;
  padding: 4px;
  background: #fff;
  margin-bottom: 6px;
}
.pho img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* 목록 맨 앞의 얼굴 사진 칸.

   2026-09-05 까지 이 규칙이 <td> 에 걸려 있었습니다. 안에 display:block 과
   40px 이 들어 있어서 **칸이 표에서 빠져나갔고**, 첫 칸만 이상하게 벌어지고
   나머지 칸이 오른쪽으로 몰렸습니다. 사진 상자를 꾸미는 규칙이었으니 이제
   <img> 에만 겁니다. 칸 자체는 너비만 정합니다.

   사진이 없을 때 두던 점선 네모도 없앴습니다 - 번호처럼 보여서 눈에
   거슬리기만 했습니다. 그냥 빈 칸으로 둡니다. */
.tb.wtb td.thumb { width: 52px; padding-right: 0; }
.tb.wtb td.thumb img {
  display: block;
  width: 40px; height: 40px;
  border-radius: 5px;
  object-fit: cover;
  border: 1px solid #dbe3ea;
  background: #f0f4f8;
}

/* --- equipment register -------------------------------------------------- */
.eq-list { padding: 0; overflow-x: auto; }
.eq-list .tb { margin: 0; min-width: 760px; }
.eq-row { cursor: pointer; }
.eq-row:hover td { background: #f3f9fc; }
/* A pale band between tools makes the selected detail panel and the next tool
   unmistakably separate, even in a long equipment register. */
.eq-list .eq-row:not(.eq-open) td { border-bottom: 7px solid #eef3f6; }
.eq-row.eq-open td { background: #e7f3fa; border-bottom: 0; }
.eq-detail-row > td {
  padding: 12px !important;
  background: #eef7fb;
  border-top: 1px solid #a9cfdf;
  border-bottom: 8px solid #dce8ee;
}
.eq-detail-row .eq-editor {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid #bdd8e5;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(48, 84, 108, .08);
}
.eq-thumb { width: 58px; padding-right: 0 !important; }
.eq-thumb img {
  display: block;
  width: 44px; height: 44px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid #dbe6ee;
  background: #f0f4f8;
}
.eq-editor { overflow: visible; }
.eq-form > h2 { margin-bottom: 12px; }
.eq-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0 18px;
  margin-bottom: 14px;
}
.eq-form-grid .fr { min-width: 0; }
.eq-form-grid .fr.w2 { grid-column: span 2; }
.eq-form-grid .eq-photo-section, .eq-form-grid .eq-memo-section, .eq-price-pair { grid-column: 1 / -1; }
.eq-price-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.eq-price-pair .fr { margin-bottom: 4px; }
.eq-price-pair input { width: 100%; }
.eq-price-pair output { display: block; padding: 9px 12px; background: #edf6fa; border: 1px solid #c9dde8; border-radius: 6px; font-weight: 600; }
.eq-price-pair > small { grid-column: 1 / -1; color: #627d98; margin: 0 0 16px; }
.eq-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.eq-list > .tb { min-width: 1100px; }
.eq-form-grid .fr > input, .eq-form-grid .fr > select, .eq-form-grid .fr > textarea { width: 100%; }
.eq-form-grid .eq-photo { margin-bottom: 7px; }
.eq-photo-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}
.eq-photo-slot {
  min-width: 0;
  padding: 9px;
  border: 1px solid #d8e5ec;
  border-radius: 7px;
  background: #f9fcfd;
}
.eq-photo-slot > b { display: block; margin-bottom: 6px; color: #486581; font-size: 12px; }
.eq-photo-slot .eq-photo { width: 100%; margin: 0 0 7px; }
.eq-photo-slot .eq-photo img { width: 100%; height: 88px; }
.eq-photo-slot .ck { display: block; margin: 0 0 7px; font-size: 12px; }
.eq-photo-slot input[type=file] { width: 100%; max-width: 100%; font-size: 11px; }
.eq-view { position: relative; }
.eq-gallery {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.eq-photo {
  display: inline-block;
  vertical-align: top;
  width: 150px;
  margin: 0;
  color: #627d98;
  font-size: 12px;
}
.eq-photo img {
  display: block;
  width: 150px; height: 106px;
  object-fit: cover;
  border: 1px solid #d5e3ec;
  border-radius: 8px;
  background: #f4f8fb;
  margin-bottom: 5px;
}
.eq-photo:hover img { border-color: #4a90d9; }
.eq-popup-photo { cursor: zoom-in; }
.eq-photo-popup {
  display: none;
  position: fixed;
  z-index: 80;
  inset: 0;
  padding: 28px;
  background: rgba(16, 42, 67, .78);
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.eq-photo-popup.on { display: -webkit-box; display: -ms-flexbox; display: flex; }
.eq-photo-popup-in {
  position: relative;
  max-width: 94vw;
  max-height: 92vh;
  padding: 8px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .38);
}
.eq-photo-popup-in img {
  display: block;
  max-width: calc(94vw - 16px);
  max-height: calc(92vh - 16px);
  border-radius: 5px;
  object-fit: contain;
}
.eq-photo-popup-close {
  position: absolute;
  z-index: 1;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #b83227;
  color: #fff;
  font-size: 25px;
  line-height: 26px;
  cursor: pointer;
}
.eq-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px 20px;
  margin: 0 0 12px;
}
.eq-meta small, .eq-memo small {
  display: block;
  color: #829ab1;
  font-size: 12px;
  margin-bottom: 3px;
}
.eq-meta b { display: block; color: #243b53; font-weight: 600; word-break: break-word; }
.eq-memo {
  clear: both;
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 3px solid #b7d8e8;
  background: #f8fbfd;
  white-space: normal;
}
.eq-loan-box {
  clear: both;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #d7e7ed;
  border-radius: 8px;
  background: #f7fcfb;
}
.eq-loan-box h3, .eq-view h3 { margin-top: 0; color: #315a70; }
.eq-loan-box p { margin: 0 0 8px; }
.eq-loan-box .bar { gap: 8px; }
.eq-loan-box .bar label { display: inline-block; margin: 0; }
.eq-history { margin-top: 6px; }
.eq-loan-action { width: 82px; text-align: right; white-space: nowrap; }
.eq-history .eq-loan-action .btn { padding: 6px 10px; }
.eq-actions {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 8px;
  margin: 16px 0 0;
}
.eq-delete-zone {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 9px;
  margin-left: auto;
  padding: 6px 7px 6px 10px;
  border: 1px solid #efc2bd;
  border-radius: 7px;
  background: #fff8f7;
}
.eq-delete-zone small { color: #9b2c2c; font-weight: 600; white-space: nowrap; }
.eq-ready { background: #e6fffa; border-color: #9decd0; color: #1d6f5c; }
.eq-loaned { background: #fff5dc; border-color: #f2cf8e; color: #8a5a12; }

/* Shown and hidden by PRpay() in BIT_mnp_worker.php. */
.pmbox {
  border-left: 3px solid #dbe3ea;
  padding: 2px 0 2px 14px;
  margin: 4px 0 0;
}

/* --- 한 묶음씩 앞뒤로 (‹ 지난주 · 보고 있는 기간 · 다음주 ›) --------------
   가운데의 기간이 주인공이고 화살표는 그 양옆에 붙는 것이라, 화살표를
   먼저 눈에 띄게 만들면 안 됩니다. 폰에서는 (아래 700px 블록) 낱말을 떼고
   화살표만 크게 남깁니다 - 「‹ 지난주 2026-09-03 THU ~ 2026-09-09 WED
   다음주 ›」는 390px 에 들어가지 않습니다. */
.wknav {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.wknav .wkb { -ms-flex: 0 0 auto; flex: 0 0 auto; }
.wknav .wkr {
  -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #334e68;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wknav .wkr em { color: #9fb3c8; font-style: normal; padding: 0 2px; }

/* --- attendance grid ------------------------------------------------------ */
.legend {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 12px;
  font-size: 12px;
  color: #627d98;
}
.legend .lg {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 5px;
}
.legend .cel {
  display: inline-block;
  min-width: 30px;
  padding: 1px 4px;
  text-align: center;
  border: 1px solid #dbe3ea;
  border-radius: 3px;
  font-weight: 600;
}

/* 보기의 색은 표의 색과 같아야 합니다.

   보기는 .grid 바깥에 있어서 .grid .h-rg 가 닿지 않습니다. 그래서 배지용
   옅은 색(.h-rg { #ffeff2 })이 대신 걸리고, 보기에는 분홍빛이 거의 없는데
   표는 진한 분홍으로 나왔습니다. 아래 규칙이 그 어긋남을 없앱니다.
   위의 .grid .h-* 색을 고치면 여기도 같이 고치십시오. */
.legend .cel.sat  { background: #eaf2fd; border-color: #b7cfef; }
.legend .cel.sun  { background: #fdeef2; border-color: #f0bccb; }
.legend .cel.h-rg { background: #ffc2ce; border-color: #eb9dae; color: #3d0011; }
.legend .cel.h-sp { background: #ffd9b0; border-color: #eeb87f; color: #3d2000; }
.legend .cel.h-cp { background: #bfeeda; border-color: #8ed7ba; color: #06301f; }
.legend .cel.lock { background-color: #eef2f6; }

/* The month does not fit on any screen, so it scrolls sideways and the
   worker column stays put. */
.gridwrap { overflow-x: auto; padding: 0; }
.card.gridwrap { padding: 0; }

/* 출근표만 위아래로도 제 안에서 넘깁니다.

   그래야 하는 이유가 있습니다. `overflow-x: auto` 한 줄이 이 상자를 「넘기는
   칸」으로 만듭니다 - CSS 규칙상 한쪽이 auto 면 반대쪽 visible 도 auto 가
   됩니다. 그리고 position:sticky 는 화면이 아니라 **가장 가까운 넘기는 칸**에
   달라붙습니다. 그런데 이 상자는 키가 내용만큼 자라서 위아래로는 넘길 것이
   없었고, 그래서 머리글 세 줄이 top:0/22/66 을 달고도 실제로는 아무 데도
   붙지 못한 채 자료와 같이 밀려 올라갔습니다. 2026-09-05 에 브라우저로 재어
   확인했습니다 - 900px 내리니 머리글이 화면 위로 사라졌습니다.

   상자에 키를 정해 주면 그 안에서 넘기게 되고, 그제서야 날짜 줄과 이름 칸이
   제자리에 남습니다. 엑셀의 틀 고정과 같은 모양입니다.

   132px 이 어디서 나온 숫자인지 적어 둡니다. 페이지를 끝까지 내렸을 때
   상자의 윗변이 서는 자리는 `화면높이 - 상자키 - 아래여백` 입니다. 상자
   위에 무엇이 얼마나 있든 그 값은 식에서 지워지므로, 걸러야 할 것은 아래
   여백(.wrap 의 padding-bottom 60px + .card 의 margin-bottom 16px = 76px)과
   메뉴줄(56px)뿐입니다. 둘을 더해 132px 입니다.

   이보다 키를 키우면 페이지를 끝까지 내렸을 때 상자 윗머리가 메뉴줄 밑으로
   들어가 날짜 줄이 가려집니다. 96px 으로 두었다가 실제로 그렇게 되는 것을
   보고 고쳤습니다.

   급여표(BIT_mnp_payroll.php)는 이 클래스를 붙이지 않았습니다. 그쪽은 머리글이
   붙지 않는 보통 표라 키를 자를 이유가 없습니다. */
.gridwrap.gfreeze {
  max-height: calc(100vh - 132px);
  min-height: 260px;
  overflow-y: auto;
}

.grid {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 100%;
}
.grid th, .grid td {
  border: 1px solid #e2e8f0;
  padding: 3px 4px;
  text-align: center;
  white-space: nowrap;
}
.grid thead th {
  background: #f0f4f8;
  color: #486581;
  font-weight: 600;
  height: 22px;
  box-sizing: border-box;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}
/* 머리글이 세 줄이라, 모두 top:0 으로 두면 서로 겹쳐 붙습니다.
   줄마다 한 줄 높이(22px)씩 내려 붙여야 세 줄이 나란히 남습니다.
   현장/합계 칸은 rowspan 으로 첫 줄에 속하므로 top:0 그대로가 맞습니다.

   요일 줄만 44px 입니다. 오늘 자리에 다이아몬드가 하나 얹히기 때문입니다.
   보석은 3px 자리에서 24px 을 쓰므로 글자는 27px 밑에서 시작합니다.
   여기를 고치면 셋째 줄의 top 도 함께 고쳐야 합니다 - 22 + 44 = 66. */
.grid thead tr:nth-child(2) th { top: 22px; height: 44px; padding-top: 27px; }
.grid thead tr:nth-child(3) th { top: 66px; }
.grid th.who, .grid td.who {
  text-align: left;
  min-width: 190px;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 3;
  border-right: 2px solid #cbd6e2;
}
/* 머리글의 「현장 / 팀 / 근로자」만 가운데입니다. 본문 칸은 이름이 왼쪽에
   가지런히 서야 읽히므로 왼쪽 그대로 둡니다. */
.grid thead th.who { background: #f0f4f8; z-index: 4; text-align: center; }
.grid td.who small { margin-left: 4px; }
/* A worker is the third level of the attendance tree: Site > Team > Worker.
   Keeping names flush with the group strips made the first name look like a
   new site, especially while scrolling sideways. */
.grid td.who.att-worker { position: relative; padding-left: 84px; }
.grid td.who.att-worker:before {
  content: '\21B3';
  position: absolute;
  left: 62px;
  color: #8da5b8;
  font-size: 14px;
}

/* 칸 아무 데나 눌러도 펼쳐집니다. 이름 글자에만 걸어 두었을 때는 과녁이
   너무 좁아 몇 번씩 다시 눌러야 했습니다. 안의 단추는 자판으로 옮겨
   다닐 자리로만 남겨 두었고, 실제 처리는 칸이 받습니다(assets/att.js). */
.grid td.who[data-det] { cursor: pointer; }
.grid td.who[data-det]:hover { background: #f4f8fc; }
.grid td.who.on { background: #eef4fa; }

/* 이름은 단추입니다. 단추처럼 보이면 표가 시끄러워지므로 글자만 남기고
   모두 지웁니다. 근로자 화면으로 가는 길은 이름 옆 화살표였는데, 사람마다
   → 가 하나씩 붙어 표가 어수선했습니다. 지금은 이름을 눌러 펼친 줄 안에
   단추로 들어 있습니다. */
.grid td.who .wname {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #2b6cb0;
  cursor: pointer;
  text-align: left;
}
.grid td.who .wname:hover { text-decoration: underline; }
.grid td.who .wname.on { font-weight: 700; }

.grid tr.wdet td {
  text-align: left;
  background: #f7fafc;
  white-space: normal;
  padding: 6px 10px;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
}
.grid ul.detlist { margin: 0; padding-left: 18px; }
.grid ul.detlist li { line-height: 1.6; }

.grid td.sum, .grid th.sum {
  background: #f7f9fb;
  font-weight: 600;
  min-width: 44px;
  border-left: 2px solid #cbd6e2;
}

/* 현장 줄과 팀 줄의 들여쓰기.
   팀 이름표가 현장 이름표가 끝나는 자리에서 시작하도록 맞췄습니다 -
   12(현장 들여쓰기) + 46(이름표 너비) = 58. 이름표 너비를 바꾸면
   아래 58 도 같이 바꿔야 층이 어긋나지 않습니다. */
.grid tr.rsite td {
  background: #e3ebf3;
  text-align: left;
  font-weight: 600;
  color: #102a43;
  padding-left: 12px;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
}
.grid tr.rteam td {
  background: #f0f4f8;
  text-align: left;
  color: #486581;
  padding-left: 58px;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
}

/* 「현장」·「팀」 이름표. 이름만 늘어놓으면 어느 줄이 현장이고 어느 줄이
   팀인지 들여쓰기로만 갈리는데, 가로로 넘겨 보다 보면 놓칩니다. */
.grid tr.rsite .rlab, .grid tr.rteam .rlab {
  display: inline-block;
  min-width: 46px;
  margin-right: 8px;
  padding: 0 6px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #cbd6e2;
  font-size: 11px;
  font-weight: 600;
  color: #627d98;
  text-align: center;
}
.grid tr.rsite .rlab { border-color: #a7bfd6; color: #2b4d6f; }

/* 토요일과 일요일.

   2026-09-05 이전에는 둘 다 wknd 하나로 같은 회색(#f4f6f8)이었습니다.
   표는 조용해 보였지만 토·일이 구별되지 않아, 가로로 눈을 옮기다 하루를
   건너뛰는 일이 있었습니다. 한국·필리핀 달력의 관습대로 토요일은 파랑,
   일요일은 빨강 쪽으로 갈랐습니다.

   2026-09-09 에 한 번 더 옅게 했습니다. 앞의 색은 갈라 보이기는 했는데
   표 전체가 알록달록해서, 정작 눈에 들어와야 할 근태 색(노랑·주황·빨강)이
   묻혔습니다. 지금 것은 「토·일이구나」 하고 알아볼 만큼만 남깁니다.
   머리글 두 줄은 좁아서 더 진해야 보이므로 본문보다 한 단계 진합니다. */
.grid .wknd  { background: #fafbfc; }
.grid .sat   { background: #f4f8fe; }
.grid .sun   { background: #fef7f9; }
.grid thead th.sat { background: #e7f0fc; color: #2b5c92; }
.grid thead th.sun { background: #fceef2; color: #a2455a; }

/* The clickable squares.

   폭을 고정합니다. 안에 들어가는 가장 긴 글자가 「+12:00」이라 그 폭에
   맞췄습니다. 예전에는 칸마다 내용에 따라 넓이가 달라져서, 잔업이 많은
   주는 표가 옆으로 늘어나고 가로줄을 따라가다 자리를 잃었습니다.
   width 와 min/max 를 함께 적은 것은 표가 남는 자리를 칸에 나눠 주려
   들기 때문입니다 - 셋을 다 못박아야 실제로 고정됩니다. */
.grid td.cel {
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  height: 26px;
  cursor: pointer;
  color: #486581;
  font-weight: 600;
  font-size: 12px;
  padding-left: 1px;
  padding-right: 1px;
}
.grid td.cel:hover { outline: 2px solid #2b6cb0; outline-offset: -2px; }

/* Holiday tint on the column, attendance colour on the square itself.

   2026-09-05 에 색을 진하게 했습니다. 이전 색(#fff5eb · #ffeff2)은 흰 바탕과
   거의 구별이 안 됐습니다. 사무실 화면은 대개 밝게 켜 두고, 옆에서 비스듬히
   보는 일이 많아 옅은 색은 그냥 흰색으로 보입니다. 휴일을 놓치면 급여가
   두 배로 갈 자리가 보통 날로 셈해집니다. */
.grid .h-sp  { background: #ffd9b0; }
.grid .h-rg  { background: #ffc2ce; }
.grid .h-cp  { background: #bfeeda; }
.grid thead th.h-sp { background: #f7a94f; color: #3d2000; }
.grid thead th.h-rg { background: #f07a95; color: #3d0011; }
.grid thead th.h-cp { background: #6fd2ac; color: #06301f; }

/* --- 오늘 ---------------------------------------------------------------

   예전에는 날짜 칸 밑에 파란 줄 하나(inset 0 -3px)였습니다. 머리글이 세
   줄이라 가장 아래 줄에만 그어져 눈에 잘 띄지 않았습니다. 이제 요일과
   날짜 두 칸을 함께 칠하고, 그 위에 빨간 역삼각형을 얹습니다.

   이 규칙은 반드시 위의 thead th.h-* 뒤에 있어야 합니다. 셋 다 값이
   (0,2,2) 로 같아서, 휴일과 겹치는 날에는 나중에 적힌 쪽이 이깁니다. */
.grid thead th.today {
  background: #ffeaa7;
  color: #6b4a00;
  font-weight: 700;
}

/* 다이아몬드.

   처음에는 작은 역삼각형이 rotate() 로 돌았는데, 그건 시계바늘처럼 화면
   안에서 도는 것이라 뜻이 달랐습니다. 팽이처럼 세로축을 중심으로 좌우로
   도는 것이라야 하므로 rotateY() 로 바꾸고, 부모에 perspective 를 주어
   돌아가는 동안 가까운 쪽이 커 보이게 했습니다.

   크기는 옛 삼각형(10x8)의 세 배인 30x24 입니다. 위 9px 이 관(crown),
   아래 15px 이 정(pavilion)이고 둘을 합쳐 보석 모양이 됩니다. 뾰족한
   아래 끝은 옛 삼각형과 마찬가지로 요일 글자 바로 위에 옵니다 - 줄 높이를
   32px 에서 44px 로 늘린 까닭이 이것입니다(위 nth-child(2) 규칙).

   납작한 판이므로 90도·270도에서는 아주 얇아집니다. 그 순간이 오히려
   보석이 번쩍이는 것처럼 보여서 그대로 두었습니다. 면의 밝기는 crown 과
   pavilion 을 반 바퀴마다 서로 바꿔 뒤집힌 쪽이 어두워 보이게 했습니다. */
.grid thead th.today .tmark {
  position: absolute;
  left: 50%;
  top: 3px;
  margin-left: -15px;
  width: 30px;
  height: 24px;
  -webkit-perspective: 70px;
          perspective: 70px;
  pointer-events: none;
}
.grid thead th.today .tmark .gem {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 24px;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation: pr-gem 2.6s linear infinite;
          animation: pr-gem 2.6s linear infinite;
}
.grid thead th.today .tmark .gem:before,
.grid thead th.today .tmark .gem:after {
  content: '';
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}
.grid thead th.today .tmark .gem:before {
  top: 0;
  border-bottom: 9px solid #fc8181;
  -webkit-animation: pr-gem-crown 2.6s linear infinite;
          animation: pr-gem-crown 2.6s linear infinite;
}
.grid thead th.today .tmark .gem:after {
  top: 9px;
  border-top: 15px solid #e53e3e;
  -webkit-animation: pr-gem-pav 2.6s linear infinite;
          animation: pr-gem-pav 2.6s linear infinite;
}

/* 한 바퀴에 한 번, 면이 정면으로 올 때 반짝입니다. 가로·세로 흰 막대를
   열십자로 겹쳐 놓은 것이고, 평소에는 opacity 0 이라 보이지 않습니다. */
.grid thead th.today .tmark .glint {
  position: absolute;
  left: 50%;
  top: 4px;
  margin-left: -7px;
  width: 14px;
  height: 14px;
  opacity: 0;
  -webkit-animation: pr-glint 2.6s linear infinite;
          animation: pr-glint 2.6s linear infinite;
}
.grid thead th.today .tmark .glint:before,
.grid thead th.today .tmark .glint:after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 2px;
}
.grid thead th.today .tmark .glint:before { left: 0; top: 6px; width: 14px; height: 2px; }
.grid thead th.today .tmark .glint:after  { left: 6px; top: 0; width: 2px; height: 14px; }

@-webkit-keyframes pr-gem {
  from { -webkit-transform: rotateY(0deg); }
  to   { -webkit-transform: rotateY(360deg); }
}
@keyframes pr-gem {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@-webkit-keyframes pr-gem-crown {
  0%, 100% { border-bottom-color: #fc8181; }
  50%      { border-bottom-color: #c53030; }
}
@keyframes pr-gem-crown {
  0%, 100% { border-bottom-color: #fc8181; }
  50%      { border-bottom-color: #c53030; }
}
@-webkit-keyframes pr-gem-pav {
  0%, 100% { border-top-color: #e53e3e; }
  50%      { border-top-color: #fa9a9a; }
}
@keyframes pr-gem-pav {
  0%, 100% { border-top-color: #e53e3e; }
  50%      { border-top-color: #fa9a9a; }
}
@-webkit-keyframes pr-glint {
  0%, 4%     { opacity: 0; -webkit-transform: scale(.2); }
  10%        { opacity: 1; -webkit-transform: scale(1); }
  20%, 100%  { opacity: 0; -webkit-transform: scale(.2); }
}
@keyframes pr-glint {
  0%, 4%     { opacity: 0; transform: scale(.2); }
  10%        { opacity: 1; transform: scale(1); }
  20%, 100%  { opacity: 0; transform: scale(.2); }
}
/* 움직임을 줄여 달라고 해 둔 사람에게는 돌리지 않습니다. */
@media (prefers-reduced-motion: reduce) {
  .grid thead th.today .tmark .gem,
  .grid thead th.today .tmark .gem:before,
  .grid thead th.today .tmark .gem:after,
  .grid thead th.today .tmark .glint {
    -webkit-animation: none;
            animation: none;
  }
  .grid thead th.today .tmark .glint { opacity: 0; }
}

/* 정산 한 묶음의 첫날. 금요일에서 목요일까지가 한 번에 셈해 지급되는
   단위이므로, 그 경계에 세로줄을 하나 그어 덩어리로 보이게 합니다.

   2026-09-09 에 3px 짙은 남색에서 1px 주황으로 바꿨습니다. 굵은 검은 줄은
   표를 두 동강 내는 것처럼 보였고, 그 줄이 근태 색보다 눈에 먼저 들어와
   정작 봐야 할 것이 뒤로 밀렸습니다. 주황은 표 안 어디에도 쓰지 않는
   색이라 얇아도 경계로 읽힙니다.

   **줄은 앞 칸의 오른쪽(cyce)에 긋습니다.** border-collapse 는 굵기와 모양이
   같으면 왼쪽 칸의 테두리를 살리므로, 뒤 칸에 border-left 만 주면 앞 칸의
   회색 테두리에 져서 한 픽셀도 안 보입니다 - 2026-09-09 에 브라우저에서
   그렇게 안 보이는 것을 보고 고쳤습니다. cycs 쪽 border-left 는 묶음이
   표의 맨 왼쪽에서 시작할 때를 위해 남겨 둡니다.

   th·td 를 적어 두는 까닭은 위의 `.grid th, .grid td { border: 1px }` 와
   겨루기 때문입니다. */
.grid th.cycs, .grid td.cycs { border-left: 1px solid #e58a2f; }
.grid th.cyce, .grid td.cyce { border-right: 1px solid #e58a2f; }
.grid thead tr.rcyc th.cycs {
  background: #f5f8fb;
  color: #5b432a;
  font-weight: 700;
  letter-spacing: .3px;
  border-bottom: 1px solid #f0c396;
}

.cel.a-work  { background: #e8f4ec; color: #22543d; }
.cel.a-late  { background: #fff4d9; color: #8a5a12; }
.cel.a-early { background: #ffeede; color: #8a4a12; }
.cel.a-late.a-early { background: #ffe6cc; }
.cel.a-ot    { box-shadow: inset 0 0 0 2px #7aa7d4; }
.cel.a-abs   { background: #fdecec; color: #9b2c2c; }
.cel.a-memo  { border-top: 3px solid #b794f4; }

/* Paid for already - the grid says so and refuses the click. */
.cel.lock {
  cursor: not-allowed;
  background-image: -webkit-repeating-linear-gradient(
      135deg, rgba(130, 154, 177, .30) 0, rgba(130, 154, 177, .30) 2px,
      transparent 2px, transparent 6px);
  background-image: repeating-linear-gradient(
      -45deg, rgba(130, 154, 177, .30) 0, rgba(130, 154, 177, .30) 2px,
      transparent 2px, transparent 6px);
}
.cel.lock:hover { outline: 0; }

/* --- attendance refresh ---------------------------------------------------
   The attendance screen is used as a working surface all day long, not as a
   report.  Its controls are therefore grouped into a calm command panel and
   the grid gets a stronger visual edge without changing its very deliberate
   sticky-column and mobile behaviour above.  Everything is scoped to
   .att-page/.att-gridwrap so the payroll tables keep their quieter look. */
.att-page .att-controls {
  padding: 0;
  overflow: hidden;
  border: 1px solid #d7e4ee;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(32, 64, 92, .07);
}
.att-hero {
  position: relative;
  min-height: 92px;
  padding: 17px 20px;
  color: #fff;
  background: linear-gradient(118deg, #173a59 0%, #1b5680 58%, #167c93 100%);
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  gap: 14px;
  overflow: hidden;
}
.att-hero:after {
  content: '';
  position: absolute;
  width: 185px;
  height: 185px;
  right: 20%;
  top: -110px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(255, 255, 255, .035), 0 0 0 54px rgba(255, 255, 255, .025);
  pointer-events: none;
}
.att-hero-copy, .att-hero-nav { position: relative; z-index: 1; }
.att-hero-copy { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.att-kicker {
  margin-bottom: 2px;
  color: #bcecf0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.att-hero-copy strong { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.3px; }
.att-hero-nav {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 14px;
}
.att-month-nav { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 7px; }
.att-month-nav .btn {
  color: #fff;
  background: rgba(6, 30, 50, .22);
  border-color: rgba(220, 247, 251, .3);
  box-shadow: none;
}
.att-month-nav .btn:hover { background: rgba(255, 255, 255, .16); text-decoration: none; }

.att-filterbar {
  padding: 13px 16px;
  gap: 10px;
  background: linear-gradient(180deg, #fff, #f7fafc);
  border-bottom: 1px solid #e3edf4;
}
.att-fieldset {
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 6px;
  min-width: 0;
}
.att-fieldset + .att-fieldset { padding-left: 10px; border-left: 1px solid #e1eaf1; }
.att-filterbar select {
  height: 35px;
  border-color: #d2e0eb;
  border-radius: 7px;
  background-color: #fff;
  color: #36536c;
  font-size: 13px;
}
.att-period select:first-child { min-width: 78px; }
.att-scope select { max-width: 180px; }
.att-actions { gap: 7px; }
.att-actions > .btn { border-color: #a9cce7; color: #155f98; background: #eef8ff; }
.att-actions > .btn:hover { background: #dff1fd; text-decoration: none; }
.att-actions .vsw .btn { min-height: 35px; color: #5b7083; background: #fff; border-color: #d2e0eb; }
.att-actions .vsw .btn.on { color: #fff; background: #1c7fc4; border-color: #1c7fc4; box-shadow: 0 3px 8px rgba(28, 127, 196, .22); }
.att-quick {
  margin: 0 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #d7e7ef;
  border-radius: 18px;
  background: #f2fbfa;
  color: #31656a;
  font-size: 12px;
}
.att-quick input { accent-color: #12a6a9; }

.att-subbar {
  padding: 10px 16px 12px;
  background: #fbfdff;
}
/* 걸러보기 줄 · 범례(왼쪽)와 출력 인원 통계(오른쪽). 좁은 화면에서는 통계가 아래로 내려갑니다. */
.att-ctl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
.att-ctl-main { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.att-stats {
  -ms-flex: 0 0 auto; flex: 0 0 auto;
  min-width: 270px;
  padding: 8px 14px 8px;
  border-left: 1px solid #e3edf4;
  background: linear-gradient(180deg, #fff, #f7fafc);
  font-size: 12px;
  color: #36536c;
}
.att-stats-h { font-weight: 700; color: #18324b; margin-bottom: 3px; }
.att-stats table { border-collapse: collapse; width: 100%; }
.att-stats th, .att-stats td { padding: 2px 7px; border-bottom: 1px solid #edf2f6; text-align: right; white-space: nowrap; }
.att-stats thead th { color: #667e92; font-weight: 600; font-size: 11px; }
.att-stats tbody th { text-align: left; font-weight: 500; color: #4a6680; }
.att-stats td { font-variant-numeric: tabular-nums; }
.att-stats td.tot { font-weight: 700; color: #155f98; }
/* 월 연인원 줄의 달 고르기 - 통계 상자 안에 맞게 작게. */
.att-smform { display: inline-block; margin-left: 4px; }
.att-smform select { font-size: 11px; padding: 1px 2px; max-width: 120px;
  border: 1px solid #cbd6e2; border-radius: 4px; color: #36536c; background: #fff; }
@media (max-width: 1100px) {
  .att-ctl { display: block; }
  .att-stats { border-left: 0; border-top: 1px solid #e3edf4; }
}
/* 정보 칸을 촘촘하게(2026-11): 걸러보기 줄은 한 줄로, 범례는 바로 밑에 붙입니다.
   빠른 표시는 줄 끝에 붙어 다음 줄로 떨어지지 않습니다. */
.att-filterbar { padding: 9px 14px; gap: 8px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.att-fieldset + .att-fieldset { padding-left: 8px; }
.att-filterbar select { height: 32px; }
.att-period select { min-width: 140px; }
.att-actions .vsw .btn { min-height: 32px; padding: 5px 9px; }
.att-quick { -ms-flex-negative: 0; flex-shrink: 0; white-space: nowrap; margin-left: 4px; }
.att-subbar { padding: 6px 14px 8px; }
.att-page .legend { margin-top: 0; padding-top: 0; border-top: 0; gap: 4px 10px; font-size: 12px; }
/* 닉네임 - 이름 앞에 파란 글자로. */
.nick { color: #1a73e8; font-weight: 700; }
.grid td.who .wname .nick { margin-right: 2px; }
/* 표를 누른 채 밀어 넘기는 중 */
.att-gridwrap.dragging { cursor: -webkit-grabbing; cursor: grabbing; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.att-gridwrap.dragging .grid td.cel:hover { outline: 0; }
.att-page .wknav { margin-top: 0; gap: 10px; }
.att-page .wknav .wkb {
  min-width: 38px;
  padding-left: 11px;
  padding-right: 11px;
  color: #32617e;
  border-color: #d5e3ed;
  background: #fff;
}
.att-page .wknav .wkb:hover { color: #146dae; background: #eef8ff; text-decoration: none; }
.att-page .wknav .wkr { color: #18324b; font-size: 13px; }
.att-page .wknav .wkr .dw { color: #138d9a; }
.att-hero-nav .att-week-nav {
  min-width: 270px;
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid rgba(225, 247, 251, .28);
}
.att-hero-nav .wknav .wkb {
  color: #fff;
  border-color: rgba(220, 247, 251, .3);
  background: rgba(6, 30, 50, .22);
}
.att-hero-nav .wknav .wkb:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.att-hero-nav .wknav .wkr { color: #fff; }
.att-hero-nav .wknav .wkr .dw { color: #bcecf0; }
.att-hero-nav .wknav .wkr em { color: rgba(230, 251, 253, .55); }
.att-page .legend {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #e5edf3;
  gap: 6px 12px;
  color: #667e92;
}
.att-page .legend .lg { gap: 6px; }
.att-page .legend .cel { min-width: 29px; border-radius: 5px; box-shadow: 0 1px 1px rgba(24, 50, 75, .05); }

.att-gridwrap {
  border: 1px solid #d7e4ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(32, 64, 92, .08);
  scrollbar-color: #afc4d4 #f1f6f9;
  scrollbar-width: thin;
}
.att-gridwrap::-webkit-scrollbar { width: 10px; height: 10px; }
.att-gridwrap::-webkit-scrollbar-track { background: #f1f6f9; }
.att-gridwrap::-webkit-scrollbar-thumb { background: #b3c8d7; border: 2px solid #f1f6f9; border-radius: 10px; }
.att-gridwrap .grid { color: #36536c; }
.att-gridwrap .grid th, .att-gridwrap .grid td { border-color: #e4edf3; }
.att-gridwrap .grid thead th {
  background: #f4f8fb;
  color: #557086;
  border-color: #dfeaf1;
  font-weight: 700;
}
.att-gridwrap .grid thead tr.rcyc th,
.att-gridwrap .grid thead th.who,
.att-gridwrap .grid thead th.sum {
  background: #eaf2f7;
  color: #264964;
}
.att-gridwrap .grid thead tr.rcyc th.cycs {
  background: #1d4665;
  color: #eaf9ff;
  border-color: #315d7c;
  letter-spacing: .45px;
}
.att-gridwrap .grid th.who, .att-gridwrap .grid td.who { border-right-color: #c4d6e3; }
.att-gridwrap .grid thead th.who { background: #1d4665; color: #fff; }
.att-gridwrap .grid td.who { background: #fff; color: #24445f; }
.att-gridwrap .grid td.who[data-det]:hover { background: #edf8ff; }
.att-gridwrap .grid td.who.on { background: #e2f4fa; }
.att-gridwrap .grid td.who .wname { color: #185b8c; }
.att-gridwrap .grid td.sum, .att-gridwrap .grid th.sum { background: #f5f9fc; color: #31536d; border-left-color: #c4d6e3; }
.att-gridwrap .grid tr.rsite td {
  padding-top: 5px;
  padding-bottom: 5px;
  background: linear-gradient(90deg, #dbeaf4, #eef6fa);
  color: #1b415e;
  border-top-color: #bdd3e1;
}
.att-gridwrap .grid tr.rteam td { background: #f4f8fb; color: #527088; }
.att-gridwrap .grid tr.rsite .rlab, .att-gridwrap .grid tr.rteam .rlab { border-color: #c7dae7; background: rgba(255, 255, 255, .72); }
.att-gridwrap .grid .wknd { background: #fafcff; }
.att-gridwrap .grid .sat { background: #f1f7ff; }
.att-gridwrap .grid .sun { background: #fff6f8; }
.att-gridwrap .grid .h-sp { background: #ffe2bd; }
.att-gridwrap .grid .h-rg { background: #ffd1da; }
.att-gridwrap .grid .h-cp { background: #ccefdc; }
.att-gridwrap .grid thead th.sat { background: #e6f1fe; color: #3971a6; }
.att-gridwrap .grid thead th.sun { background: #feebf0; color: #ae5268; }
.att-gridwrap .grid thead th.h-sp { background: #f8b86b; color: #633800; }
.att-gridwrap .grid thead th.h-rg { background: #ef91a6; color: #53061b; }
.att-gridwrap .grid thead th.h-cp { background: #83d4b1; color: #0c4c32; }
.att-gridwrap .grid td.cel {
  color: #4c6b81;
  -webkit-transition: background .15s ease, box-shadow .15s ease;
          transition: background .15s ease, box-shadow .15s ease;
}
.att-gridwrap .grid td.cel:hover { outline-color: #18a5b3; background: #e6fbfb; }
.att-gridwrap .grid thead th.today {
  background: #d9f5f5;
  color: #126d79;
  box-shadow: inset 0 -2px 0 #19a8b5;
}
.att-gridwrap .grid thead th.today .tmark {
  top: 7px;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #14aab4;
  box-shadow: 0 0 0 2px rgba(20, 170, 180, .26);
}
.att-gridwrap .grid thead th.today .tmark .gem,
.att-gridwrap .grid thead th.today .tmark .glint { display: none; }
.att-gridwrap .grid .grid-dow { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.att-gridwrap .grid .grid-date {
  display: inline-block;
  min-width: 18px;
  padding: 1px 3px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.att-gridwrap .grid thead th.today .grid-date { background: #13a7b1; color: #fff; }
.att-gridwrap .grid th.cycs, .att-gridwrap .grid td.cycs { border-left-color: #76afc8; }
.att-gridwrap .grid th.cyce, .att-gridwrap .grid td.cyce { border-right-color: #76afc8; }
.att-gridwrap .grid .cel.a-work { background: #e2f5eb; color: #18724a; }
.att-gridwrap .grid .cel.a-late { background: #fff3d4; color: #936219; }
.att-gridwrap .grid .cel.a-early { background: #ffeadc; color: #a2511d; }
.att-gridwrap .grid .cel.a-late.a-early { background: #ffe2c6; }
.att-gridwrap .grid .cel.a-ot { box-shadow: inset 0 0 0 2px #4b9bc6; }
.att-gridwrap .grid .cel.a-abs { background: #ffe7e9; color: #b43d50; }
.att-gridwrap .grid .cel.a-memo { border-top-color: #9174d8; }

/* 시:분 상자 두 개를 한 덩어리로 보이게. 가운데 콜론이 붙어 있어야
   두 상자가 하나의 시각이라는 것이 한눈에 읽힙니다. */
.hm { display: inline-block; white-space: nowrap; }
.hm select { width: auto; min-width: 62px; display: inline-block; }
.hm b { margin: 0 3px; color: #486581; }

/* --- the day editor ------------------------------------------------------- */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(16, 42, 67, .45);
  z-index: 50;
  overflow-y: auto;
  padding: 30px 14px;
}
.modal-in {
  background: #fff;
  border-radius: 9px;
  max-width: 440px;
  margin: 0 auto;
  padding: 20px 22px 18px;
  box-shadow: 0 10px 40px rgba(16, 42, 67, .3);
}
.modal-in h2 { margin-bottom: 16px; }

/* --- the photo lightbox ---------------------------------------------------- --
   근로자 화면에서 사진을 누르면 열립니다. 만드는 곳은 BIT_mnp_worker.php, 여닫는 곳은
   app.js 입니다.

   z-index 60 은 맨 위입니다 - 메뉴줄(20)과 하루편집 덧창(50) 위에 섭니다.
   사진을 보는 동안에는 그 위에 아무것도 없어야 합니다.

   .lb-x 를 fixed 로 두는 데 이유가 있습니다. 신분증을 확대하면(.lb.zoom)
   사진이 화면보다 커져 좌우로 밀어 보게 되는데, 닫기 단추가 사진에 붙어
   있으면 함께 밀려 나가 사라집니다. 화면 모퉁이에 못 박아 둡니다. */
.lb {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(16, 42, 67, .82);
  z-index: 60;
  overflow: auto;
  padding: 24px 14px;
  text-align: center;
}
.lb.on { display: block; }
.lb-in { display: inline-block; max-width: 100%; }
.lb-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 96px);
  margin: 0 auto;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
  cursor: zoom-in;
}
/* 한 번 더 누르면 저장된 크기 그대로. 신분증 글자를 읽으려면 이게 필요합니다. */
.lb.zoom .lb-img { max-width: none; max-height: none; cursor: zoom-out; }
.lb-cap {
  margin: 10px 0 0;
  color: #d9e2ec;
  font-size: 13px;
}
.lb-x {
  position: fixed;
  top: 12px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  color: #243b53;
  font-family: inherit;
  font-size: 26px;
  line-height: 38px;
  cursor: pointer;
}
.lb-x:hover { background: #fff; }

/* 급여명세서 덧창. 사진과 달리 내용이 세로로 깁니다 - 한 급여를 통째로 열면
   사람 수만큼 이어지므로, 종이 크기의 틀을 두고 그 안에서 굴립니다. */
.lb-doc {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.lb-fr {
  display: block;
  width: 100%;
  height: calc(100vh - 48px);
  border: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}

/* --- sign in -------------------------------------------------------------- */
.login {
  max-width: 380px;
  margin: 6vh auto 0;
  background: #fff;
  border: 1px solid #dbe3ea;
  border-radius: 10px;
  padding: 30px 32px 26px;
}
.login-brand { font-size: 20px; font-weight: 600; color: #102a43; }
.login-sub   { color: #627d98; margin: 2px 0 22px; font-size: 13px; }
.login label { margin-top: 14px; }
.login input[type=text], .login input[type=password] { width: 100%; padding: 10px 11px; }
.login button {
  width: 100%;
  margin-top: 22px;
  padding: 11px;
  background: #2b6cb0;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}
.login button:hover { background: #245a94; }
.login-note { color: #829ab1; font-size: 12px; margin: 20px 0 0; }
.login-lang { margin-top: 16px; font-size: 12px; line-height: 2; }
.login-lang a    { color: #829ab1; margin-right: 8px; }
.login-lang a.on { color: #2b6cb0; font-weight: 600; }

/* --- the payslip ---------------------------------------------------------- */
body.bare { background: #eef1f4; }

.slips { margin: 0 auto; }
.slip {
  background: #fff;
  border: 1px solid #dbe3ea;
  border-radius: 6px;
  padding: 24px 26px 20px;
  margin: 0 auto 18px;
  max-width: 780px;
}

.slip-h {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline;
  gap: 10px;
  border-bottom: 2px solid #334e68;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.slip-co { font-size: 17px; font-weight: 600; color: #102a43; }
.slip-t  { font-size: 13px; color: #627d98; letter-spacing: .08em; text-transform: uppercase; }
.slip-no { margin-left: auto; font-size: 13px; color: #486581; }

.stamp {
  display: inline-block;
  border: 2px solid #c53030;
  color: #c53030;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.slip .tb        { margin-bottom: 14px; }
.slip-m thead th { background: #f0f4f8; }
.slip-net th     { background: #f7f9fb; }
.slip-net .big   { font-size: 20px; }

.slip-sig {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  gap: 30px;
  margin: 26px 0 10px;
}
.slip-sig div  { -webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0; }
.slip-sig span { display: block; font-size: 12px; color: #829ab1; margin-bottom: 26px; }
.slip-sig i    { display: block; border-bottom: 1px solid #9fb3c8; }

.slip-f {
  border-top: 1px solid #e6ecf1;
  padding-top: 8px;
  font-size: 11px;
  text-align: center;
}

/* Payroll list: the main line is the control for its compact detail row. */
.payrun { cursor: pointer; }
.payrun:hover td { background: #f7fafc; }
.payrun-detail td { background: #f7fafc; padding: 0; }
.payrun-in { padding: 14px 16px; border-left: 3px solid #9fb3c8; }
.payrun-in > p { margin: 0 0 10px; }
.payrun-items { margin: 0; }

/* 급여 한 건은 「줄 + 펼친 칸」 두 줄입니다. 칸마다 똑같이 그어지는 실줄로는
   한 건이 어디서 끝나고 다음 건이 어디서 시작하는지 보이지 않습니다 - 펼쳐
   놓으면 더합니다. 건과 건 사이에만 굵은 줄을 긋고, 한 건 안쪽(줄과 그 상세
   사이)의 줄은 지웁니다. 첫 건 위에는 이미 머리글 줄이 있어 긋지 않습니다. */
.payrun > td { border-top: 3px solid #9fb3c8; border-bottom: 0; }
.tb tbody tr.payrun:first-child > td { border-top: 0; }

/* --- 현장 · 팀 묶음 머리글 ------------------------------------------------ --
   급여 화면과 급여명세서 표지가 같은 차례로 묶여 있습니다. 사람 줄과 헷갈리지
   않게, 현장은 진하게 · 팀은 한 칸 들여씁니다. 색으로만 가르면 흑백으로
   인쇄했을 때 구분이 사라집니다. */
.g-s td {
  background: #eef3f8;
  border-top: 2px solid #bcccdc;
  color: #102a43;
}
.g-t td {
  background: #f7fafc;
  padding-left: 22px;
  color: #334e68;
}
/* 팀 · 현장 소계. 표지에서만 씁니다. */
.g-sub td { background: #f7fafc; font-weight: 600; }
.g-ss  td { background: #eef3f8; border-top: 1px solid #bcccdc; }
/* 묶음 안의 사람 이름. 머리글보다 한 칸 더 들어갑니다. */
.ind { padding-left: 34px; }

/* --- 사람 줄과 그 상세 ---------------------------------------------------- --
   줄을 누르면 아래 칸이 열립니다. 여는 줄임을 알 수 있게 손 모양 커서를
   붙입니다 - 화살표(.cav)만으로는 눈에 잘 안 들어옵니다. */
/* .rtog 는 app.js 가 「눌러 펼치는 줄」을 찾는 표시입니다. 여기 손 모양
   커서만 붙여 둡니다 - 모양은 .payrun 과 .wrow 가 각자 정합니다. */
.rtog { cursor: pointer; }
.wrow { cursor: pointer; }
.wrow:hover td { background: #f0f4f8; }
.cav { color: #829ab1; margin-right: 5px; font-size: 11px; }
/* 명세서 링크. 줄을 누르는 것과 다른 일을 하므로 눌리는 자리를 넉넉히. */
.pslip { white-space: nowrap; }
.wdet td { background: #fbfdff; padding: 0; }
.wdet-in {
  padding: 12px 14px;
  border-left: 3px solid #bcccdc;
}
.wdet-in > .tb { margin: 0 0 10px; }

/* 하루하루 표. 칸이 여덟이라 급여 표 안에 들어가면 좁습니다. 글자를 한 단계
   줄여 한 줄이 두 줄로 접히지 않게 합니다. */
.pay-d, .pay-dd { font-size: 12.5px; }
.pay-d td, .pay-d th, .pay-dd td, .pay-dd th { padding: 5px 8px; }

/* 총액 한 줄. 표 셋 아래에 나란히 놓습니다. */
.pay-n {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid #e6ecf1;
  font-size: 13px;
  color: #486581;
}
.pay-n span { display: inline-block; margin-right: 18px; }
.pay-n b { color: #102a43; font-size: 15px; }

/* 급여명세서 표지. 사람이 여럿일 때만 나옵니다. */
.slip-sum { margin-bottom: 14px; }
.slip-d {
  margin: 10px 0 4px;
  font-weight: 600;
  color: #334e68;
}

/* --- paper ---------------------------------------------------------------- */
@media print {
  body, body.bare { background: #fff; }
  .noprint, .nav, .msg { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  /* 화면에서는 출근표가 제 상자 안에서 넘어가지만, 종이에는 넘길 것이
     없습니다. 키를 풀지 않으면 첫 화면만 찍히고 나머지 근로자가 잘립니다.

     .card 와 .slip 도 함께 풉니다. 폰 규칙(max-width:700px)이 그 둘을 옆으로
     넘기는 상자로 만드는데, 종이에서는 「넘긴다」가 곧 「잘린다」입니다.
     A4 는 794px 이라 보통은 폰 규칙이 걸리지 않지만, 인쇄 미리보기 폭을
     좁게 잡는 브라우저가 있어 여기서 못을 박아 둡니다. */
  .gridwrap, .gridwrap.gfreeze { max-height: none; overflow: visible; }
  .card, .slip { overflow: visible; }
  @page { size: A4 portrait; margin: 8mm; }
  .slip-page {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
    align-content: flex-start;
    page-break-after: always;
    break-after: page;
  }
  .slip-page:last-child { page-break-after: auto; break-after: auto; }
  .slip {
    box-sizing: border-box;
    /* 종이 한 장에 두 사람. 예전에는 반 폭으로 넷이었는데, 하루하루 표(.pay-d)가
       여덟 칸이라 반 폭에서는 글자가 겹칩니다. 세로로 두 칸이면 표가 온전히
       들어가고, 길어진 명세서는 page-break-inside 가 다음 장으로 넘깁니다. */
    width: 100%; min-height: 130mm;
    border: 1px solid #9fb3c8;
    border-radius: 0;
    margin: 0;
    padding: 4mm;
    font-size: 8px;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .slip-h { padding-bottom: 4px; margin-bottom: 5px; }
  .slip-co { font-size: 11px; }
  .slip-t, .slip-no { font-size: 8px; }
  .slip .tb { margin-bottom: 5px; }
  .slip-net .big { font-size: 13px; }
  .slip-sig { margin: 7px 0 4px; gap: 12px; }
  .slip-sig span { font-size: 8px; margin-bottom: 10px; }
  .slip-f { padding-top: 4px; font-size: 7px; }
  .slip-d { font-size: 8px; margin: 2px 0; }
  .slip-sum th, .slip-sum td { font-size: 8px; }
  /* Two slips fill one A4 page, one above the other. */
  .brk { page-break-after: auto; }
  .tb th, .tb td { padding: 2px 3px; }
  a { color: #000; text-decoration: none; }
}

/* --- small screens -------------------------------------------------------- */
@media (max-width: 700px) {
  /* 폭이 좁으면 메뉴줄이 세 줄로 접혀 189px 까지 커집니다. 그것을 화면에
     붙여 두면 폰 화면의 삼분의 일이 늘 메뉴로 덮입니다. 그래서 여기서는
     예전처럼 같이 밀려 올라가게 둡니다. 넓은 화면(56px)에서만 붙습니다. */
  html       { scroll-padding-top: 0; }
  .nav       { position: static; }
  .nav-in    { min-height: 0; padding: 6px 12px 0; }
  .brand     { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; margin: 0 0 2px; }
  .nav-menu  { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; -ms-flex: 1 1 100%; flex: 1 1 100%; overflow-x: auto; }
  .nav-a     { padding: 10px 10px; }
  .nav-me    { margin-left: auto; }
  .nav .who  { display: none; }

  /* --- 폰의 접이식 메뉴 ---------------------------------------------------
     위의 열 줄이 폰에서 그리던 모습은 「이름 / 메뉴 일곱 / 언어·로그아웃」
     세 줄짜리 189px 짜리 띠였습니다. 390px 짜리 화면에서 세로의 4분의 1을
     메뉴가 먹습니다. 그래서 ☰ 로 접습니다.

     **접는 규칙은 하나도 빠짐없이 `html.js` 아래에만 답니다.** 그 class 는
     lib/BIT_mnp_ui.php 가 <head> 안에서 붙입니다. 자바스크립트가 꺼져 있으면 붙지
     않고, 그러면 이 블록이 통째로 적용되지 않아 위의 세 줄짜리 메뉴가 그대로
     보입니다 - 느리지만 모든 메뉴에 손이 닿습니다. 반대로 짜면 (기본을 접힘,
     .js 에서 펼침) 자바스크립트가 없는 폰은 메뉴가 사라진 앱이 됩니다. */
  .js .nav-tog  { display: block; }
  .js .brand    { -ms-flex: 1 1 auto; flex: 1 1 auto; margin: 0; padding: 9px 0; }
  .js .nav-menu,
  .js .nav-me   { display: none; }
  .js .nav.open .nav-menu {
    display: block;
    -ms-flex: 1 1 100%; flex: 1 1 100%;
    overflow: visible;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  /* 손가락으로 누르는 자리입니다. 44px 아래로는 옆 줄이 눌립니다. */
  .js .nav.open .nav-menu .nav-a {
    display: block;
    padding: 13px 4px;
    font-size: 15px;
    border-bottom: 0;
    border-left: 3px solid transparent;
  }
  .js .nav.open .nav-menu .nav-a.on { border-left-color: #63b3ed; }
  .js .nav.open .nav-me {
    display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    -ms-flex: 1 1 100%; flex: 1 1 100%;
    -ms-flex-order: 4; order: 4;
    margin: 0;
    padding: 8px 0 10px;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  /* 위의 `.nav .who { display:none }` 을 되돌립니다. 폰에서도 접힌 것을
     일부러 펼친 자리라면 누구로 들어와 있는지는 보여야 합니다. */
  .js .nav.open .nav-me .who { display: block; padding: 0 8px; }
  .js .nav.open .nav-me .langsel { margin-left: 4px; }

  .wrap      { padding: 16px 10px 50px; }

  /* 상자 안에서 옆으로 넘깁니다.
     -----------------------------------------------------------------------
     칸이 많은 표는 폰 화면보다 넓습니다. 그것을 그냥 두면 **표가 아니라 페이지
     전체가** 옆으로 밀립니다 - 2026-09-09 에 재어 보니 근로자 화면은 474px,
     급여 화면은 688px 이었습니다. 그렇게 되면 위아래로 굴릴 때마다 글이 좌우로
     흔들리고, 메뉴줄까지 화면 밖으로 나갑니다.

     칸을 줄여 억지로 맞추지는 않습니다. 「PC 에서 보이던 것이 폰에서도 다
     보여야 한다」가 이 화면들의 요구조건이라, 숨기는 대신 상자 안에서만
     옆으로 넘기게 합니다. 페이지는 늘 화면 폭에 딱 맞고, 넓은 표는 그 표만
     손가락으로 밀어 봅니다.

     덧창(달력 .dtp · 사진 .lb · 하루편집 .modal)은 전부 <body> 바로 밑에
     붙거나 position:fixed 라, 여기서 잘리지 않습니다. 상자 안에 넣지
     마십시오 - 넣으면 그 순간 잘립니다. */
  .card      { padding: 14px 14px; overflow-x: auto; }
  .tile-n    { font-size: 24px; }

  /* 급여명세서는 종이 한 장을 그대로 옮긴 것이라 상자(.card)가 없습니다
     (body.bare). 그래서 위의 `.card` 규칙이 닿지 않아, 안에 든 날짜별 표
     (.tb.pay-d, 414px) 가 페이지를 통째로 439px 까지 밀고 있었습니다.
     명세서 한 장을 제 안에서 넘기게 해 페이지 폭을 지킵니다. */
  .slip      { padding: 16px 14px; overflow-x: auto; }
  .tb th, .tb td { padding: 7px 6px; }

  /* 기능등급 표는 칸이 일곱이라 폰 화면(360px)보다 넓습니다. 칸 너비를 풀어도
     머리글 낱말과 입력칸만으로 400px 을 넘습니다 - 더 줄이면 「한/시/간」 처럼
     머리글이 다시 쪼개집니다. 그래서 좁히지 않고 상자 안에서 옆으로 넘깁니다.
     2026-09-08 에 브라우저로 재어 확인했습니다. (넘기는 일 자체는 이제 위의
     `.card` 가 다 합니다. 여기 남은 것은 입력칸 폭뿐입니다.) */
  .skl .mn  { width: 84px; }

  /* --- 출근표 -------------------------------------------------------------
     현장에서 폰으로 출근을 찍는 자리라, 여기만은 「옆으로 밀어 보세요」로
     넘길 수 없습니다. 한 주(일곱 칸)가 한눈에 다 들어와야 합니다.

     390px 짜리 화면에서 표에 주어지는 폭은 368px 입니다
     (390 - .wrap 좌우 10 - 상자 테두리 2). 그 안에 이렇게 넣었습니다.
         이름 72 + 하루 34 × 7(=238) + 일수 28 + 잔업 28  =  366
     일수·잔업이 24 가 아니라 28 인 것은 머리글 「일수」·「연장」이 그보다
     좁아지지 않기 때문입니다 - 재어 보고 맞춘 값이니 낱말을 바꾸면 다시
     재십시오. 400px 이상인 폰은 여유가 더 있고, 남는 폭은 이름 칸이
     가져갑니다 (width 가 아니라 min-width 로 적었기 때문입니다).
     360px 짜리 옛 폰에서는 30px 쯤 모자라 상자 안에서 조금 밀립니다.

     잔업 합계 칸을 지우면 딱 맞지만 지우지 않았습니다 - 「PC 에서 보이던
     것이 폰에서도 보여야 한다」가 이 일의 요구조건입니다. 밀어서 볼 수는
     있는 것과 아예 없는 것은 다릅니다.

     하루 칸은 34px 입니다. 손끝이 닿는 최소가 대략 그쯤이고, 이보다 줄이면
     옆날이 눌립니다. 대신 세로를 34px 로 키워 실제로 눌리는 넓이를 벌었습니다. */
  .grid { font-size: 11px; }
  /* 여기는 `width` 가 아니라 `min-width` 여야 합니다.
     표 배치는 자동(table-layout:auto)이고, .grid 에 min-width:100% 가 걸려
     있어 표는 상자 폭에 맞추려 듭니다. 그때 줄바꿈이 되는 칸은 이름 칸뿐이라
     `width:88px` 라고 적어도 브라우저가 51px 까지 밀어 넣어 버렸습니다
     (2026-09-09 에 재어 보고 알았습니다). min-width 는 밀리지 않습니다. */
  .grid th.who, .grid td.who {
    min-width: 72px;
    width: 72px;
    max-width: none;
    white-space: normal;
    padding: 3px 3px;
  }
  /* 이름과 (직종/등급) 을 두 줄로. 한 줄로 두면 88px 을 훌쩍 넘깁니다. */
  .grid td.who .wname { white-space: normal; line-height: 1.25; font-size: 12px; }
  .grid td.who .wname small { display: block; font-size: 10px; }
  .grid td.who.att-worker { padding-left: 14px; }
  .grid td.who.att-worker:before { display: none; }
  .grid td.cel {
    width: 34px; min-width: 34px; max-width: 34px;
    height: 34px;
  }
  .grid td.sum, .grid th.sum { min-width: 24px; padding-left: 2px; padding-right: 2px; }
  .grid tr.rteam td { padding-left: 30px; }
  .grid tr.rsite .rlab, .grid tr.rteam .rlab { min-width: 0; margin-right: 5px; }

  /* 표 안에서 또 위아래로 굴리게 두면, 폰에서는 손가락이 페이지를 굴리려는
     것인지 표를 굴리려는 것인지 브라우저가 헷갈립니다. 표는 제 키대로 두고
     페이지 하나만 굴리게 합니다. 가로로 넘기는 일(overflow-x)은 그대로라,
     이름 칸이 왼쪽에 붙어 있는 것도 그대로입니다. */
  .gridwrap.gfreeze { max-height: none; min-height: 0; }

  /* ‹ › 만 남기고 「지난주 · 다음주」 낱말은 뗍니다. 가운데 기간이 들어갈
     자리를 낱말 두 개가 다 먹기 때문입니다. 낱말은 title= 로 남아 있고,
     화살표 자체는 손가락에 맞게 키웠습니다. */
  .wknav .wkw { display: none; }
  .wknav .wkb { padding: 9px 16px; font-size: 18px; line-height: 1; }
  .wknav .wkr { font-size: 12px; }

  /* 보기(범례)를 조입니다. 844px 짜리 폰 화면에서 표가 시작되는 자리가
     y=410 이었습니다 - 절반을 거르개와 보기가 먹고 있었다는 뜻입니다.
     현장에서 출근을 찍는 사람은 표를 보러 들어오는 것이므로, 표가 첫 화면
     안에 들어와야 합니다.

     **하나도 숨기지 않았습니다.** 색이 무슨 뜻인지 모르면 표를 읽을 수 없고,
     특히 휴일 세 가지(정휴·특휴·대휴)는 색으로만 구분됩니다. 글자와 사이만
     줄여 네 줄을 두 줄로 만들었습니다. */
  .legend { gap: 4px 10px; font-size: 11px; margin-top: 8px; }
  .legend .cel { min-width: 24px; }

  .att-page .att-controls { overflow-x: visible; border-radius: 12px; }
  .att-hero { min-height: 0; padding: 14px; }
  .att-hero:after { right: -68px; top: -132px; }
  .att-hero-copy strong { font-size: 20px; }
  .att-hero { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
  .att-hero-nav { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; }
  .att-month-nav { gap: 5px; }
  .att-month-nav, .att-hero-nav .att-week-nav { width: 100%; }
  .att-month-nav .btn { padding: 7px 8px; font-size: 12px; }
  .att-hero-nav .att-week-nav { min-width: 0; padding-left: 0; border-left: 0; }
  .att-filterbar { padding: 11px 12px; gap: 8px; }
  .att-fieldset { width: 100%; }
  .att-fieldset + .att-fieldset { padding-left: 0; border-left: 0; }
  .att-period select { -webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0; min-width: 0; }
  .att-scope select { -webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0; max-width: none; min-width: 0; }
  .att-actions { -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .att-actions .vsw { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; }
  .att-actions .vsw .btn { -webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0; padding-left: 4px; padding-right: 4px; }
  .att-quick { margin-left: 0; width: auto; }
  .att-subbar { padding: 10px 12px; }
  .att-page .legend { margin-top: 9px; }
  .att-gridwrap { border-radius: 12px; }

  .eq-editor { padding: 14px; overflow-x: visible; }
  .eq-form-grid { display: block; padding: 0; border: 0; box-shadow: none; }
  .eq-form-grid .fr.w2 { grid-column: auto; }
  .eq-photo-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eq-photo, .eq-photo img { width: 100%; max-width: 280px; }
  .eq-photo img { height: 180px; }
  .eq-gallery .eq-photo { width: calc(50% - 4px); max-width: none; }
  .eq-gallery .eq-photo img { width: 100%; max-width: none; height: 112px; }
  .eq-photo-slot .eq-photo img { height: 96px; }
  .eq-photo-popup { padding: 16px; }
  .eq-photo-popup-in img { max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); }
  .eq-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .eq-loan-box .bar { display: block; }
  .eq-loan-box .bar > * { margin: 0 0 7px; }
  .eq-loan-box .bar select, .eq-loan-box .bar input[type=text] { width: 100%; }
  .eq-detail-row > td { padding: 8px !important; }
  .eq-detail-row .eq-editor { padding: 13px; }
  .eq-delete-zone { margin-left: 0; }
}