/* insuwork/m/insuwork-mobile.css
   보험워크 모바일 "오늘" 화면 전용 (Phase 1 MVP, 2026-08-22, feat/workstation-mobile-today).
   톤(대표 확정) = 얇은 테두리 + 텍스트만. backdrop-filter/블러·무거운 box-shadow 금지.
   색·크기는 css/tokens-v2.css·css/app-core.css의 커스텀 프로퍼티만 사용(하드코딩 금지). */

html, body.iwm-page { background: var(--bg); }
body.iwm-page { min-height: 100vh; overflow-y: auto; color: var(--tp); }

#iwm-root {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.iwm-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--bd);
}
.iwm-header strong {
  font-size: var(--fs-title, 18px);
  font-weight: 700;
  /* fix/workstation-mobile-bugs 버그2 — 탭 전환 직후 헤더 폭 계산 타이밍에 제목이 한 글자씩 줄바꿈되던 문제.
     .iwm-tab-link/.iwm-pc-link는 이미 white-space:nowrap이 있었는데 제목 <strong>에는 빠져 있었다.
     flex-shrink:0도 함께 줘서 header-actions가 넓어져도 제목 쪽이 눌려 줄바꿈되지 않게 한다. */
  white-space: nowrap;
  flex-shrink: 0;
}
.iwm-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  /* fix/workstation-mobile-bugs 버그3 — 탭 링크 4개 + PC 링크 + 로그아웃까지 한 줄에 다 안 들어가 우측이
     잘리던 문제. 문구를 줄여도(아래 각 화면의 "PC로 보기") 넘칠 가능성에 대비해 잘리는 대신 가로 스크롤로
     빠지게 한다. min-width:0은 이 div가 flex 자식으로서 header 폭 안에서 실제로 줄어들 수 있게 하기 위함. */
  min-width: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}

.iwm-pc-link,
.iwm-tab-link {
  font-size: var(--fs-meta, 13px);
  color: var(--ts);
  text-decoration: none;
  padding: 0 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bd);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  /* fix/workstation-mobile-bugs 버그4 — min-height:44px/inline-flex/align-items:center는 이미 있었다(실측
     이슈 재현 대비 확인 완료). 버그3의 overflow-x:auto 컨테이너 안에서 링크가 눌려 찌그러지지 않도록
     flex-shrink:0만 추가한다. */
  flex-shrink: 0;
}
.iwm-pc-link:active,
.iwm-tab-link:active { color: var(--ac); border-color: var(--ac); }
.iwm-tab-link.is-active { color: var(--ac); border-color: var(--ac); font-weight: 600; }

/* feat/workstation-mobile-header-consistency (2026-08-22, 대표 직접 요청) — 헤더의 "PC로 보기"/"로그아웃"
   버튼 2개가 항상 노출돼 네이티브 앱스럽지 않다는 지적 → "⋯" 아이콘 버튼 하나로 숨기고, 탭하면 열리는
   드롭다운 안에 보험브리핑 홈/PC 버전으로 보기/로그아웃 3개 링크를 담는다. 새 라이브러리 없이 순수
   CSS(절대배치 패널 + hidden 토글)만 사용. 톤은 기존과 동일 — 얇은 테두리 + 텍스트만, blur/그림자 금지.
   패널은 .iwm-header-actions(overflow-x:auto, 버그3 대응) 밖의 .iwm-header 직계 자식으로 둬서 그 스크롤
   컨테이너에 잘리지 않는다 — .iwm-header가 이미 position:sticky라 절대배치 기준(containing block)이 된다. */
.iwm-menu-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd);
  border-radius: var(--radius-sm);
  background: var(--s1);
  color: var(--tp);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.iwm-menu-btn:active,
.iwm-menu-btn[aria-expanded="true"] { color: var(--ac); border-color: var(--ac); }

.iwm-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 16px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 176px;
  border: 1px solid var(--bd);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden;
}
.iwm-menu-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: var(--fs-body, 14px);
  color: var(--tp);
  text-decoration: none;
  border-bottom: 1px solid var(--bd);
}
.iwm-menu-item:last-child { border-bottom: none; }
.iwm-menu-item:active { color: var(--ac); background: var(--s1); }

.iwm-main {
  flex: 1;
  /* feat/workstation-mobile-bottom-nav — 하단 고정 탭바(.iwm-bottom-nav, 약 60px + safe-area)에 마지막
     섹션이 가려지지 않도록 하단 여백을 늘린다. 탭바가 없는 화면(로그인/거부 게이트)은 .iwm-main 자체가
     쓰이지 않으므로 영향 없음. */
  padding: 16px 16px calc(76px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* feat/workstation-mobile-bottom-nav (2026-08-22) — 상단 텍스트 탭 링크(오늘/캘린더/고객/자료)를
   하단 고정 아이콘 탭바로 전환(대표 직접 요청). 톤은 기존과 동일 — 얇은 테두리 + 텍스트만, blur 금지.
   4개 화면(index/calendar/customers/library.html)이 insuwork-mobile-nav.js의 render()가 그려주는
   동일 마크업을 공유한다. */
.iwm-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  max-width: 640px;
  margin: 0 auto;
  background: var(--bg);
  border-top: 1px solid var(--bd);
  /* 아이폰 하단 홈 인디케이터와 겹치지 않도록 safe-area만큼 아래 여백을 더한다.
     대표 지시(2026-08-22) — 노치 없는 기기/뷰포트에서는 env(safe-area-inset-bottom)이 0이라 여백이
     아예 없어 보일 수 있다. max()로 노치 유무와 무관하게 최소 8px는 항상 확보한다. */
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.iwm-bottom-nav-item {
  flex: 1;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  color: var(--ts);
  text-decoration: none;
}
.iwm-bottom-nav-item:active { color: var(--ac); }
.iwm-bottom-nav-item.is-active { color: var(--ac); font-weight: 600; }

.iwm-bottom-nav-icon {
  font-size: 20px;
  line-height: 1;
}
.iwm-bottom-nav-label {
  font-size: var(--fs-caption, 12px);
  white-space: nowrap;
}

.iwm-section-title {
  margin: 0 0 10px 2px;
  font-size: var(--fs-meta, 13px);
  font-weight: 600;
  color: var(--ts);
}

.iwm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* feat/workstation-mobile-agenda-scroll (2026-08-22) — "오늘 일정" 섹션을 양방향 무한스크롤 아젠다로
   전환(대표 직접 요청). 고정 높이의 내부 스크롤 박스로 만들어 아래 케어/상령일/상담준비 섹션이 항상
   이어서 보이게 한다(아젠다가 페이지 전체를 삼키지 않음). 톤은 기존과 동일 — 얇은 테두리 + 텍스트만,
   blur/그림자 금지. */
.iwm-agenda-scroll {
  max-height: 58vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--bd);
  border-radius: var(--radius-sm);
  padding: 2px 12px;
}
.iwm-agenda-sentinel {
  height: 1px;
}
.iwm-agenda-days {
  display: flex;
  flex-direction: column;
}
.iwm-agenda-day {
  padding: 12px 0;
  border-bottom: 1px solid var(--bd);
}
.iwm-agenda-day:last-child {
  border-bottom: none;
}
.iwm-agenda-date {
  margin: 0 0 8px 2px;
  font-size: var(--fs-meta, 13px);
  font-weight: 600;
  color: var(--ts);
}
.iwm-agenda-date.is-today {
  color: var(--ac);
}
.iwm-agenda-limit {
  padding: 10px 0;
  text-align: center;
  font-size: var(--fs-caption, 12px);
  color: var(--tf);
}

.iwm-card {
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--bd);
  border-radius: var(--radius-sm);
  background: var(--s1);
}
.iwm-card-title {
  font-size: var(--fs-body, 14px);
  font-weight: 600;
  color: var(--tp);
}
.iwm-card-sub {
  margin-top: 4px;
  font-size: var(--fs-meta, 13px);
  color: var(--ts);
}
.iwm-card-meta {
  margin-top: 6px;
  font-size: var(--fs-caption, 12px);
  color: var(--tf);
  line-height: var(--lh-base, 1.6);
  white-space: pre-line;
  /* fix/workstation-mobile-bugs 버그5 — 상담 빠른메모(Phase 4)에 저장된 원본 URL이 줄바꿈 없이 그대로 노출돼
     카드 폭을 밀어내던 문제. 잘라내기(truncate)가 아니라 줄바꿈으로 처리해 정보 손실 없이 레이아웃만 고친다.
     이 클래스는 고객 상세 "최근 상담" 메모(customers.js)뿐 아니라 오늘/캘린더의 일정 설명에도 공유되므로
     전부에 안전하게 적용된다. */
  overflow-wrap: break-word;
}

.iwm-empty {
  padding: 16px 14px;
  text-align: center;
  font-size: var(--fs-meta, 13px);
  color: var(--tf);
  border: 1px solid var(--bd);
  border-radius: var(--radius-sm);
}

.iwm-gate {
  margin: auto;
  width: 100%;
  max-width: 420px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.iwm-gate strong { font-size: var(--fs-title, 18px); }
.iwm-gate p { font-size: var(--fs-body, 14px); color: var(--ts); }
.iwm-gate-actions { display: flex; gap: 8px; margin-top: 6px; }

.iwm-btn {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--bd);
  border-radius: var(--radius-sm);
  background: var(--s1);
  color: var(--tp);
  font-size: var(--fs-body, 14px);
  cursor: pointer;
}
.iwm-btn.primary { border-color: var(--ac); color: var(--ac); }

.iwm-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-meta, 13px);
  color: var(--ts);
  text-decoration: underline;
}