/* t.ap ERP 모바일 업무 화면 공통 마감
 * 기존 전용 화면의 구조·동작은 유지하고, 브랜드 토큰과 정렬 규칙만 통일한다.
 */
/* ⚠ 위치가 /assets/ 인 이유: 공개 게이트웨이(kwork.itap.kr) Caddy 화이트리스트가 /modules/ 아래는
 *   tokens.css·shared.css 만 열어둬서 /modules/mobile.css 는 404 였다(2026-08-03 실측·수리).
 *   폰 화면 7개가 이 공통 마감 없이 뜨고 있었다. tokens.css 는 절대경로로 가져온다(개방 경로). */
@import url("/modules/tokens.css");

body {
  background: var(--erp-bg);
  color: var(--erp-text);
  font-family: var(--erp-font-sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font-family: inherit; }

.container {
  width: 100%;
  padding: 16px;
}

.header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 92px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  background: var(--tap-core-navy);
  box-shadow: var(--erp-shadow-md);
}

/* 카카오워크 단건 랜딩(card/delivery)은 .hd 헤더를 사용한다. */
.container > .hd {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 72px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-bottom: 2px solid var(--tap-core-gold);
  border-radius: var(--radius-lg);
  background: var(--tap-core-navy);
  color: #fff;
  box-shadow: var(--erp-shadow-md);
}
.container > .hd h1 { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.container > .hd .who { color: rgba(255,255,255,.7); }

.header::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  right: -72px;
  top: -86px;
  border: 1px solid rgba(200,168,100,.35);
  border-radius: 50%;
}

.header h1 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.header h1::after { content: "."; color: var(--erp-pink); }
.header .sub { color: rgba(255,255,255,.7); }
.header a, .header button.linkish { color: #fff; text-underline-offset: 3px; }

.card, .cal-card, .req {
  border: 1px solid var(--erp-border);
  border-radius: var(--radius-lg);
  background: var(--erp-bg-alt);
  box-shadow: var(--erp-shadow-sm);
}

.card h2 {
  color: var(--erp-heading);
  font-weight: 700;
  line-height: 1.4;
}
.req .reason { background: var(--erp-bg-sunken); border-radius: var(--radius-sm); }

label.f-label { color: var(--erp-text-soft); font-weight: 600; }

select, input[type="text"], input[type="number"], input[type="date"], input[type="time"],
input[type="search"], textarea, .pick-btn, .proj-btn {
  min-height: 48px;
  border: 1px solid var(--erp-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--erp-bg-alt);
  color: var(--erp-text);
}

select:focus, input:focus, textarea:focus, .pick-btn:focus-visible, .proj-btn:focus-visible {
  outline: none;
  border-color: var(--erp-primary);
  box-shadow: 0 0 0 3px var(--erp-focus-ring);
}

.badge {
  border-radius: var(--radius-pill);
  background: var(--erp-primary-soft);
  color: var(--erp-heading);
}

.chip { min-height: 46px; border: 1px solid var(--erp-border-strong); border-radius: var(--radius-md); }
.chip.on { border-color: var(--erp-primary); background: var(--erp-primary-soft); color: var(--erp-heading); }

.btn-add, .proj-btn { border-color: var(--erp-primary); color: var(--erp-heading); }
.btn-sm, .btn-ok, .submit-btn {
  border-radius: var(--radius-md);
  background: var(--erp-primary);
  color: var(--erp-on-primary);
  box-shadow: 0 4px 14px rgba(31,44,80,.18);
}
.btn-ghost { min-height: 38px; border-color: var(--erp-border-strong); border-radius: var(--radius-md); color: var(--erp-text-soft); }
.btn-no { min-height: 42px; border-color: var(--erp-danger); border-radius: var(--radius-md); color: var(--erp-danger); }

.tabs { gap: 8px; }
.tabs button {
  min-height: 42px;
  border: 1px solid var(--erp-border-strong);
  border-radius: var(--radius-md);
  background: var(--erp-bg-alt);
  color: var(--erp-text-soft);
}
.tabs button.on { border-color: var(--erp-primary); background: var(--erp-primary-soft); color: var(--erp-heading); }

.ent, .crew-list, .crew-row, .sel-row, .done-row, .wlp-tg {
  border-color: var(--erp-border);
}
.ent:hover, .ent:focus-within { border-color: var(--erp-primary); }
.ent .h, .ent .ent-edit, .wlp-row.sel .wlp-name, .amount { color: var(--erp-heading); }

.wlp-sheet { border: 1px solid var(--erp-border); background: var(--erp-bg-alt); box-shadow: var(--erp-shadow-lg); }
.wlp-row { min-height: 48px; border-color: var(--erp-divider); }

.cal-nav button { min-height: 40px; border-color: var(--erp-border-strong); border-radius: var(--radius-md); background: var(--erp-bg-alt); color: var(--erp-text); }
td.today { outline-color: var(--erp-primary); }
.dot { background: var(--erp-primary-soft); color: var(--erp-heading); }

@media (min-width: 900px) {
  .container { padding: 28px 24px 48px; }
}

@media (max-width: 420px) {
  .container { padding: 12px; }
  .header { padding: 18px 16px; border-radius: var(--radius-md); }
  .card, .cal-card { border-radius: var(--radius-md); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── 프로젝트 선택 시트: 이름 줄 / 번호 줄 분리 + 연도 칩 (2026-08-27 사용자 요구) ────────────
   문제: 행이 flex 한 줄이라 이름과 '· P-2027-00479' 가 같은 ellipsis 칸을 나눠 쓰고,
         mig164 연간 생성으로 동명 사본이 대량 생기면서 폰에서 이름이 잘려 보였다.
   해법: 1줄차=이름만(행 전체 폭), 2줄차=연도·번호(작은 muted). 번호를 지우지 않고 줄만 내린다.
   ⚠ .wlp-* 는 worklog-m.html / worklog-daily-m.html / worklog-sms.html 세 곳에 각각 정의돼 있는데,
     셋 다 </style> **뒤에** 이 파일을 링크하므로 같은 특이도에서 여기가 이긴다 — 3벌을 고칠 필요가 없다. */
/* 대상은 '피커가 그린 항목 행'뿐 = [data-id] 가 있는 행(worklog-m-picker.js rowHtml/searchHtml).
   worklog-m-bulk.js 의 일괄 변경 시트도 .wlp-sheet > .wlp-row 를 쓰지만 그건 한 줄짜리 체크박스
   행이라 가운데 정렬이 맞다 — .wlp-sheet 로만 좁히면 그 행까지 잡힌다(실제로 잡혔다).
   padding·gap 을 여기서 다시 주는 이유: 세 페이지의 .wlp-row 정의가 서로 달라
   (worklog-sms.html 엔 padding·gap 이 아예 없다) 2줄 행이 서로 붙어 보였다. */
.wlp-row[data-id] { align-items: flex-start; gap: 6px; padding: 12px 10px; }
.wlp-txt { flex: 1; min-width: 0; }
.wlp-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlp-sub {
  display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.35;
  color: var(--erp-text-sub, #99a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wlp-crumb { color: var(--erp-text-sub, #99a); }
/* 접힌 폴더를 폴더로 보이게 — 아래 줄의 다른 최상위 현장을 '하위'로 오해하던 원인(2026-08-27). */
.wlp-kids { font-size: 11px; font-weight: 400; color: var(--erp-text-muted, #99a); }

/* 연도 칩(.py-*)의 CSS 는 assets/project-year.js 가 스스로 심는다 — 그 모듈을 실은 화면이
   이 파일을 안 링크해도 칩이 안 깨지게. 여기서는 폰 전용 여백만 조금 키운다. */
.py-chips { margin-bottom: 12px; }