/* 폰트는 우리 서버에서 준다 (SIL OFL — fonts/LICENSE.txt).
   외부 CDN에 기대면 CDN이 막힌 PC에서 맑은 고딕·-apple-system 으로 대체돼
   직원마다 다른 글꼴로 같은 화면을 본다 (2026-08-25). */
@font-face {
  font-family: 'Pretendard Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 45 920;
  src: url('fonts/PretendardVariable.woff2') format('woff2-variations');
}

/* 버튼·입력창은 글꼴을 **상속하지 않는다** — 브라우저가 제 UI 글꼴(Arial 등)을 쓴다.
   그래서 본문은 Pretendard 인데 버튼만 Arial 로 나왔다(2026-08-26,
   회의실 예약 화면 실측: 버튼 10개 전부 Arial). 화면마다 `font: … inherit` 을
   적어 막아 왔는데 그 축약형은 CSS 명세상 무효라 실제로는 먹지 않았다.
   여기서 한 번에 상속시킨다. 크기는 각 화면이 정하도록 건드리지 않는다. */
button, input, select, textarea, optgroup, option { font-family: inherit; }

/* 온앤미 인포 모바일 — 모던 미니멀 (Dribbble/Behance 트렌드: 뉴트럴 + 인디고 포인트) */
:root {
  --primary: #4f46e5;        /* 인디고 포인트 */
  --primary-soft: #eef0fe;   /* 포인트 연한 배경 */
  --blue: #4f46e5;           /* 하위호환 별칭 */
  --ink: #14161c;            /* 진한 텍스트 */
  --sub: #8b909e;            /* 보조 텍스트 */
  --line: #edeef2;           /* 구분선 */
  --bg: #f5f6f8;             /* 페이지 배경 */
  --surface: #ffffff;        /* 카드 */
  --danger: #ef4444;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(20,22,28,.04), 0 4px 16px rgba(20,22,28,.05);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
/* hidden 속성이 display:flex 등 요소 스타일에 지지 않도록 강제 — 배너·댓글폼 토글의 근본 버그 수정 */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

/* 탭 이동 중 상단 진행바 — 클릭 즉시 반응이 있다는 신호 */
body.nav-loading::before {
  content: ""; position: fixed; top: 0; left: 0; height: 3px; z-index: 99;
  background: #93c5fd; animation: navbar-progress 1.2s ease-out forwards;
}
@keyframes navbar-progress {
  0% { width: 0; } 60% { width: 70%; } 100% { width: 92%; }
}
.tabbar a:active, .list li > a:active, .card:active { background: #eef2ff; }

/* 앱 뼈대(상단바·탭바)는 두 번 눌러도 글자가 잡히지 않게. 본문은 그대로 복사 가능 */
.topbar, .tabbar { -webkit-user-select: none; user-select: none; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  color: var(--ink); border-bottom: 1px solid var(--line);
  padding: 13px 18px;
  padding-top: calc(13px + env(safe-area-inset-top, 0px));
}
.brand { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.who { margin-left: auto; font-size: 13px; color: var(--sub); }
.logout-form { margin: 0; }
.logout {
  background: #f1f2f5; color: var(--sub); border: 0;
  border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600;
}
.logout:active { background: #e6e7eb; }

.push-banner {
  display: flex; align-items: center; gap: 10px;
  background: #eff6ff; border-bottom: 1px solid #dbeafe;
  padding: 10px 16px; font-size: 13px; color: #1e40af;
}
.push-banner button {
  margin-left: auto; flex-shrink: 0;
  background: var(--blue); color: #fff; border: 0;
  border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600;
}

.content { padding: 16px 16px calc(100px + var(--safe-bottom)); max-width: 640px; margin: 0 auto;
  font-size: 14px; }
.page-title { font-size: 20px; font-weight: 800; margin: 4px 0 14px; letter-spacing: -0.03em; }
.section-title { font-size: 13px; color: var(--sub); margin: 22px 0 8px; font-weight: 700; }
.sec-count { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 8px;
  background: #eceef2; color: var(--sub); font-size: 11px; font-weight: 700; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 8px; text-align: center; text-decoration: none; color: inherit;
}
.card .num { display: block; font-size: 24px; font-weight: 700; color: var(--blue); }
.card .label { display: block; font-size: 12px; color: var(--sub); margin-top: 4px; }

/* ── 홈 대시보드 (재설계) ────────────────────────────── */
.hero { margin: 4px 0 20px; }
.hero-date { font-size: 12.5px; color: var(--sub); margin: 0 0 4px; font-weight: 500; }
.hero-greet { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -0.03em; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 6px; text-decoration: none; color: inherit; box-shadow: var(--shadow);
}
.stat-ico { font-size: 20px; }
.stat-num { font-size: 25px; font-weight: 800; color: var(--ink); line-height: 1.05; letter-spacing: -0.03em; }
.stat-label { font-size: 11px; color: var(--sub); }
.stat:active { transform: scale(.97); }

.quick-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 22px; }
.quick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 4px;
  text-decoration: none; color: var(--ink); font-size: 11.5px; font-weight: 600;
  box-shadow: var(--shadow);
}
.quick span { font-size: 21px; }
.quick:active { transform: scale(.96); }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.panel-head h3 { font-size: 15px; margin: 0; }
.panel-head a { font-size: 12px; color: var(--sub); text-decoration: none; }
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-list li { padding: 9px 0; border-bottom: 1px solid #f1f3f5; }
.feed-list li:last-child { border-bottom: 0; }
.feed-list a { text-decoration: none; color: inherit; display: block; }
.fl-title { display: block; font-size: 14.5px; line-height: 1.4; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-meta { display: block; font-size: 12.5px; color: var(--sub); margin-top: 3px; }
.birthday-names { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.bday-chip { background: #fef3c7; color: #92400e; border-radius: 12px; padding: 4px 11px; font-size: 13px; }

.list { list-style: none; margin: 0; padding: 0; background: var(--surface);
        border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
        box-shadow: var(--shadow); }
.list li { border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list li > a, .list li { display: block; padding: 12px 14px; text-decoration: none; color: inherit; }
.list li > a { margin: -12px -14px; padding: 12px 14px; }
.list .title { font-size: 14px; line-height: 1.4; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list .meta { display: block; font-size: 12px; color: var(--sub); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 안읽음 = 파란 점 + 굵은 진한 제목 (Gmail 방식) / 읽음 = 회색 얇게. 안 */
.list li.unread .title { font-weight: 700; color: var(--ink); }
.list li.unread .title::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); margin-right: 7px; vertical-align: 1px;
}
.readable li:not(.unread) .title { font-weight: 500; color: #6b7280; }
.readable li:not(.unread) .meta { color: #a7abb5; }

.empty { color: var(--sub); text-align: center; padding: 40px 0; }
.hint { font-size: 12px; color: var(--sub); margin-top: 12px; }
.inline-names { font-size: 14px; }

.pager { display: flex; justify-content: space-between; margin-top: 14px; }
.pager a { color: var(--blue); text-decoration: none; font-size: 14px; }
.pagenum { display: flex; justify-content: center; align-items: center; gap: 4px;
  flex-wrap: wrap; margin: 18px 0 4px; }
.pagenum a { min-width: 34px; height: 34px; line-height: 34px; text-align: center;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  text-decoration: none; font-size: 14px; background: #fff; }
.pagenum a.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.pagenum a.pn-arrow { color: var(--blue); font-weight: 700; }
.pagenum .pn-gap { color: var(--sub); padding: 0 2px; }
.mail-search { display: flex; gap: 6px; margin-bottom: 12px; position: relative; }
.mail-search input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; }
.mail-search button { flex-shrink: 0; white-space: nowrap; padding: 0 16px; border: 0; border-radius: 10px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; }
.search-clear { position: absolute; right: 74px; top: 50%; transform: translateY(-50%); color: var(--sub); text-decoration: none; font-size: 14px; padding: 4px; }
.search-info { font-size: 14px; color: var(--sub); margin: 0 0 10px; }

.seg { display: flex; gap: 4px; margin-bottom: 16px; background: #eceef2;
  padding: 4px; border-radius: 12px; }
.seg a {
  flex: 1; text-align: center; padding: 8px 0; border-radius: 9px;
  background: transparent; color: var(--sub); text-decoration: none;
  font-size: 13px; font-weight: 600; transition: all .15s;
}
.seg a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.mail-toolbar { display: flex; justify-content: flex-end; margin: -4px 0 12px; }

.back { display: inline-block; color: var(--blue); text-decoration: none; margin-bottom: 10px; }
.mail-subject { font-size: 18px; margin: 0 0 8px; }
.meta { font-size: 13px; color: var(--sub); }
/* 받는이·참조 (2026-08-28) — 라벨을 흐리게 두고 주소를 읽게 한다 */
.mail-addr-label { display: inline-block; min-width: 42px; color: #9ca3af;
  font-size: 12px; font-weight: 700; }
.attachments { font-size: 13px; }
.mail-body {
  width: 100%; min-height: 240px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; margin-top: 12px;
  /* 높이는 JS가 본문 실측값으로 설정(잘림 방지). min-height는 로드 전/JS 실패 안전망. */
}

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-bottom);
}
.tabbar a {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 9px 0 7px; font-size: 10.5px; font-weight: 500;
  color: var(--sub); text-decoration: none; transition: color .15s;
}
.tabbar a.on { color: var(--primary); font-weight: 700; }
.tabbar .ico { display: block; width: 23px; height: 23px; }
.tabbar a.on .ico { transform: translateY(-1px); }
.tab-badge {
  position: absolute; top: 4px; left: 55%; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* 로그인 화면 (2026-09-02) — 카드 + 슬로건 강조. 나머지 화면은 건드리지 않는다. */
.login-wrap { position: relative; overflow: hidden; max-width: 420px; margin: 8vh auto 0; padding: 34px 34px 26px; background: #fff;
  border-radius: 24px; box-shadow: 0 24px 60px rgba(79,70,229,.12); text-align: left; }
body:has(.login-wrap) { background: linear-gradient(160deg,#eef2ff 0%,#f7f7fb 45%,#fff1f2 100%); }
.login-blob { position: absolute; border-radius: 50%; opacity: .55; pointer-events: none; }
.login-blob.b1 { width: 160px; height: 160px; background: #c7d2fe; right: -60px; top: -70px; }
.login-blob.b2 { width: 110px; height: 110px; background: #fecdd3; left: -50px; bottom: -40px; }
.login-logo { position: relative; margin-bottom: 20px; }
.login-logo img { display: block; height: 27px; width: auto; }
.login-slogan { position: relative; margin: 0 0 22px; font-size: 22px; line-height: 1.35; letter-spacing: -.02em; color: #111827; }
.login-slogan em { font-style: normal; background: linear-gradient(90deg,#4f46e5,#e11d48); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-wrap .sub { position: relative; margin: 0 0 20px; color: var(--sub); font-size: 13px; }
.login-form { position: relative; display: flex; flex-direction: column; gap: 14px; margin-top: 4px; text-align: left; }
.login-form label { font-size: 12.5px; font-weight: 700; color: #374151; }
/* 아이콘은 입력칸 밖 flex 항목 — 옛 CSS가 캐시에 남아도 글자와 겹칠 수 없다 (2026-09-02) */
.login-field { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 0 14px; border: 1.5px solid #e5e7eb; border-radius: 14px; background: #fafbff; }
.login-field .ico { flex: 0 0 auto; font-size: 15px; line-height: 1; }
.login-form .login-field input { flex: 1 1 auto; min-width: 0; width: auto; border: 0; background: transparent; padding: 13px 0; margin: 0; font: inherit; font-size: 15px; box-shadow: none; }
.login-form .login-field input:focus { outline: 0; box-shadow: none; }
.login-field:focus-within { border-color: #6366f1; background: #fff; box-shadow: 0 0 0 4px rgba(99,102,241,.12); }
.login-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; margin: -4px 0 2px; }
.login-links .linklike { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: #6b7280; cursor: pointer; }
.login-links .linklike:hover { color: #4f46e5; text-decoration: underline; }
.login-links .dot { color: #d1d5db; margin: 0 6px; }
.login-submit { width: 100%; border: 0; border-radius: 14px; padding: 14px; font: inherit; font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(90deg,#4f46e5,#6366f1); box-shadow: 0 8px 20px rgba(79,70,229,.25); cursor: pointer; }
.login-help { position: relative; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #f5f7ff; border: 1px solid #e0e7ff; font-size: 12.5px; color: #374151; line-height: 1.55; }
.login-help b { display: block; margin-bottom: 4px; color: #4338ca; }
.login-help p { margin: 0; }
.login-wrap .hint { position: relative; margin: 14px 0 0; text-align: center; font-size: 11.5px; color: #9ca3af; }
.login-wrap .error, .login-wrap .notice { position: relative; }
/* 로그인 화면에서는 상단 바를 감춘다 — 카드가 곧 화면이다 (2026-09-02) */
body:has(.login-wrap) .topbar { display: none; }

.error { color: var(--danger); font-size: 14px; }
.notice { color: #92400e; background: #fef3c7; border-radius: 8px; padding: 8px; font-size: 13px; }

/* ── 결재 상세·상태 칩 ─────────────────────────────── */
.chip {
  display: inline-block; font-size: 11px; font-weight: 700;
  border-radius: 6px; padding: 2px 7px; margin-right: 6px; vertical-align: 1px;
}
.chip-pending { background: #fef3c7; color: #92400e; }
.chip-done { background: #dcfce7; color: #166534; }
.chip-etc { background: #fee2e2; color: #991b1b; }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary { border-bottom: 1px dashed var(--line); padding-bottom: 8px; margin-bottom: 8px; }
.ap-detail dl { display: grid; grid-template-columns: 64px 1fr; gap: 4px 10px; margin: 0 0 8px; font-size: 14px; }
.ap-detail dt { color: var(--sub); }
.ap-detail dd { margin: 0; }
.ap-lines-title { font-size: 12px; color: var(--sub); margin: 8px 0 4px; }
.ap-lines { margin: 0; padding-left: 18px; font-size: 14px; }
.ap-lines li { padding: 2px 0; border: 0; }
.ap-lines li.done { color: #166534; }
.ap-lines li.now { font-weight: 700; }

/* ── 토스트 (액션 피드백) ──────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: calc(88px + var(--safe-bottom));
  transform: translateX(-50%) translateY(16px);
  background: #1f2937; color: #fff; padding: 12px 22px; border-radius: 24px;
  font-size: 14px; font-weight: 600; opacity: 0; z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: opacity .28s, transform .28s;
  max-width: 88%; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-error { background: var(--danger); }

/* ── 액션 버튼 (읽음·승인·좋아요·댓글) ─────────────────── */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-head > .page-title { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.page-head > .mini-btn { flex-shrink: 0; white-space: nowrap; }
.mini-btn {
  font-size: 13px; font-weight: 600; border: 0; border-radius: 10px;
  padding: 9px 15px; background: var(--primary); color: #fff; cursor: pointer;
  box-shadow: 0 2px 6px rgba(79,70,229,.22); transition: transform .1s, box-shadow .1s;
  letter-spacing: -0.01em;
}
.mini-btn:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(79,70,229,.18); }
.mini-btn.ghost { background: #f1f2f5; color: var(--ink); box-shadow: none; }
.mini-btn.ghost:active { background: #e6e7eb; }
.mini-btn.reject { background: #fef2f2; color: var(--danger); box-shadow: none; }
.mini-btn:disabled { opacity: .5; box-shadow: none; }
a.mini-btn { text-decoration: none; display: inline-block; }
.ap-actions { display: flex; gap: 6px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ap-comment { flex: 1; min-width: 120px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.ap-waiting { margin-top: 10px; font-size: 13px; color: var(--sub); background: #f8f9fa; border-radius: 8px; padding: 8px 10px; }
.ap-more { display: inline-block; margin-bottom: 10px; color: var(--blue); text-decoration: none; font-size: 14px; font-weight: 600; }
.doc-fields { display: grid; grid-template-columns: 88px 1fr; gap: 8px 12px; margin: 0; font-size: 14px; }
.doc-fields dt { color: var(--sub); }
.doc-fields dd { margin: 0; word-break: break-word; }
.doc-fields dd.multiline { white-space: pre-wrap; }
.list .mini-btn.ghost { float: right; margin-top: -4px; }

.feed-actions { display: flex; gap: 8px; margin-top: 10px; }
.feed-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 20px;
  padding: 5px 12px; font-size: 13px; cursor: pointer; color: var(--sub);
}
.feed-btn.liked { background: #eff6ff; border-color: #bfdbfe; color: var(--blue); font-weight: 700; }
.feed-comments { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); font-size: 14px; }
.feed-comments li { padding: 3px 0; }
.comment-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.comment-form input[type=text] { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
/* 댓글 첨부는 둘째 줄 전체 폭 — 390px 폭에서 텍스트·버튼 줄을 밀지 않는다 */
.comment-form .comment-files { flex-basis: 100%; font-size: 13px; color: var(--sub); }
.feed-comments .attach-list { list-style: none; margin: 6px 0 0; padding: 0; }
.new-feed-form { display: flex; flex-direction: column; gap: 8px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.new-feed-form input, .new-feed-form textarea {
  padding: 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; font-family: inherit; }
.nf-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── 작성 폼 (메일·결재) ─────────────────────────────── */
.compose-form { display: flex; flex-direction: column; gap: 14px; }
.compose-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--sub); }
.compose-form input, .compose-form textarea, .compose-form select {
  padding: 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 16px; font-family: inherit; }
.compose-form .req { color: var(--danger); }
.recipient-box { position: relative; }
.suggest-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff;
  border: 1px solid var(--line); border-radius: 0 0 10px 10px; box-shadow: 0 6px 16px rgba(0,0,0,.12);
  max-height: 240px; overflow-y: auto; }
.suggest-item { padding: 11px 12px; font-size: 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.suggest-item:active { background: #eef2ff; }
/* 키보드로 고르는 중인 항목 (↑↓ 이동 · Enter 선택, 2026-08-26) */
.suggest-item:hover, .suggest-item.active { background: #eef2ff; }
.suggest-item .suggest-src {
  float: right; font-size: 11.5px; font-weight: 700; color: #94a3b8;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-person { background: #eff6ff; color: var(--blue); border-radius: 16px; padding: 5px 12px;
  font-size: 13px; font-weight: 600; cursor: pointer; }
.quote-block { border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.quote-block summary { font-size: 13px; color: var(--sub); cursor: pointer; }
.mail-reply-actions { display: flex; gap: 8px; margin-top: 14px; }
/* 답장·전체답장·전달 3버튼 균일 — 폭 3등분, 높이·폰트 동일(강조는 색으로만) */
.mail-reply-actions .mini-btn { flex: 1; text-align: center; padding: 11px 12px; font-size: 14px; }

.attachments { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.attachments-title { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.attach-list { list-style: none; margin: 0; padding: 0; }
.attach-list li { padding: 5px 0; display: flex; gap: 10px; align-items: center; }
.attach-list a { color: var(--blue); text-decoration: none; word-break: break-all; }
/* 파일명은 왼쪽, 용량과 저장 버튼은 오른쪽 끝에 붙인다 (첨부 저장 분리 2026-08-26) */
.attach-list .meta { margin-left: auto; white-space: nowrap; }
.attach-dl {
  flex: none; white-space: nowrap; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px;
}
.attach-dl:hover { background: #eff6ff; }

/* ── 채널 피드 ──────────────────────────────────────── */
.feed {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; margin-bottom: 10px;
}
.feed.pinned { border-color: #fcd34d; background: #fffbeb; }
.folder-filter { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; }
.folder-chip { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; border-radius: 16px;
  padding: 6px 14px; font-size: 13px; color: var(--sub); cursor: pointer; }
.folder-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.feed-body ul, .feed-body ol { margin: 6px 0; padding-left: 20px; }
.feed-body p { margin: 6px 0; }
.feed header { margin-bottom: 6px; }
.feed-title { font-weight: 700; font-size: 15px; }
.feed-body { margin: 6px 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.feed footer { margin-top: 8px; }
.chip-folder { background: #e0e7ff; color: #3730a3; }
.chip-cal { background: #dbeafe; color: #1e40af; }
.list li.archived { opacity: .55; }

/* ── 일정(캘린더) ───────────────────────────────────── */
.cal-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 12px; }
.cal-nav a { font-size: 24px; color: var(--blue); text-decoration: none; padding: 4px 12px; }
.cal-title { font-size: 17px; font-weight: 700; }
.cal-day { margin-top: 18px; color: var(--ink); }
.ev-allday { flex-direction: row !important; align-items: center; gap: 6px; font-size: 14px; }
.ev-times { display: flex; align-items: center; gap: 8px; }
.ev-times input { flex: 1; }
/* 모던 미니멀 캘린더 — 셀 테두리 없이 여백으로, 오늘/선택만 원형 강조, 일정은 점 */
/* 트랙은 minmax(0,1fr) — 1fr의 암묵 최소(auto)가 aspect-ratio 셀의 전이 폭(세로→가로)에
   밀려 트랙이 80px로 벌어지고 320~430px 화면이 13px 가로 넘침 (검증 재현 2026-08-29) */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; margin-bottom: 18px; }
.cal-head { text-align: center; font-size: 11px; color: var(--sub); padding: 2px 0 8px; font-weight: 600; min-width: 0; }
.cal-cell { min-width: 0; width: 100%; aspect-ratio: 1; background: transparent; border: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; gap: 3px; }
.cal-cell.empty { background: transparent; }
.cal-cell .cal-d {
  font-size: 14.5px; font-weight: 500; width: 34px; height: 34px; line-height: 34px;
  text-align: center; border-radius: 50%; transition: background .15s;
}
.cal-cell.today .cal-d { color: var(--primary); font-weight: 800; }
.cal-cell.sel .cal-d { background: var(--primary); color: #fff; font-weight: 700; }
.cal-cell.today.sel .cal-d { color: #fff; }
.cal-dots { position: absolute; bottom: 3px; display: flex; gap: 3px; justify-content: center; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
.dot-event { background: #dc2626; }       /* 기획/행사 — 빨강 */
.dot-system { background: #2563eb; }      /* 시스템팀 — 파랑 */
.dot-video { background: #9333ea; }       /* 영상팀 — 보라 */
.dot-meeting { background: #059669; }     /* 미팅 — 초록 */
.dot-proposal { background: #ea580c; }    /* 제안발표 — 주황 */
.dot-ceo { background: #334155; }         /* 대표님일정 — 진회색 */
.dot-leave { background: #0891b2; }       /* 휴가 — 청록 */
.dot-interview { background: #db2777; }   /* 면접 — 자홍 */
.dot-education { background: #10b981; }  /* 교육/워크숍 — 초록 */
.dot-trip { background: #14b8a6; }       /* 출장 — 청록 */
.dot-etc { background: #9ca3af; }       /* 기타 — 회색 */

/* 일정 카테고리 칩 색 */
.chip.cat-event { background: #fee2e2; color: #dc2626; }
.chip.cat-meeting { background: #ede9fe; color: #7c3aed; }
.chip.cat-proposal { background: #fef3c7; color: #b45309; }
.chip.cat-ceo { background: #f3e8d0; color: #854d0e; }
.chip.cat-education { background: #d1fae5; color: #059669; }
.chip.cat-trip { background: #ccfbf1; color: #0d9488; }
.chip.cat-interview { background: #fce7f3; color: #be185d; }
.chip.cat-etc { background: #f1f2f5; color: #6b7280; }
.seg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.seg-scroll a { flex: 0 0 auto; padding-left: 14px; padding-right: 14px; }

/* ── 조직도 ─────────────────────────────────────────── */
.org-search {
  width: 100%; padding: 12px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px;
}
.org-dept .count { color: var(--sub); font-weight: 400; font-size: 12px; }
.org-role { font-size: 12px; color: var(--sub); font-weight: 400; margin-left: 4px; }
.org-contacts a { color: var(--blue); text-decoration: none; margin-right: 12px; }

/* ── 공용 주소록·명함 등록 (2026-09-02) ───────── */
.card-cta {
  display: block; text-align: center; text-decoration: none;
  background: var(--blue); color: #fff; font-weight: 700; font-size: 15px;
  border-radius: 12px; padding: 14px; margin-bottom: 12px;
}
.muted-note { font-size: 13px; color: var(--sub); margin: 8px 0; }
.more-row { text-align: center; margin: 12px 0 4px; }
.more-row button {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 10px; padding: 10px 20px; font: inherit; font-weight: 600;
}
.card-shot {
  display: block; width: 100%; text-align: center; box-sizing: border-box;
  border: 1px dashed var(--blue); background: #f8fbff; color: var(--blue);
  border-radius: 12px; padding: 22px 14px; font: inherit; font-weight: 700; font-size: 15px;
}
.card-shot[disabled] { opacity: .55; }
.card-preview { width: 100%; border-radius: 12px; margin-top: 10px; display: block; }
.field-row { margin-bottom: 12px; }
.field-row label { display: block; font-size: 13px; color: var(--sub); margin-bottom: 5px; font-weight: 600; }
.field-row input {
  width: 100%; box-sizing: border-box; padding: 12px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 10px;
}
.field-row input.needs-fix { border-color: #dc2626; background: #fef2f2; }

/* ── 태블릿·데스크톱 (768px 이상) ─────────────────────── */
@media (min-width: 768px) {
  .content { max-width: 760px; padding-top: 24px; }
  .page-title { font-size: 23px; }
  .cards { gap: 14px; }
  .card { padding: 20px 10px; }
  .card .num { font-size: 30px; }
  .card .label { font-size: 13px; }
  .list .title { font-size: 16px; }
  .list .meta { font-size: 13px; }
  .list li > a, .list li { padding: 14px 18px; }
  .list li > a { margin: -14px -18px; padding: 14px 18px; }
  /* 상단바·본문·하단탭바를 같은 폭에 세운다. 본문만 760px 가운데였고 상단바는
     왼쪽 끝, 탭바는 왼쪽에 몰려 있어 태블릿·넓은 창에서 셋이 어긋나 보였다
     (2026-08-31). 본문의 좌우 여백(16px)까지 더해 글자 시작점을 맞춘다. */
  .topbar, .tabbar { --band: max(16px, calc((100% - 760px) / 2 + 16px)); }
  .topbar { padding-left: var(--band); padding-right: var(--band); }
  .brand { font-size: 19px; }
  /* 탭은 그 폭 안에서 균등 분배한다. 고정 max-width 로 묶어 두면 넓은 창에서
     왼쪽에만 몰리고, 768~909px 에서는 오른쪽 탭이 잘렸다. */
  .tabbar { padding-left: var(--band); padding-right: var(--band); }
  .tabbar a { flex: 1 1 0; max-width: none; font-size: 12px; padding: 10px 0 8px; }
  .tabbar .ico { font-size: 22px; }
  .mail-body { min-height: 300px; }
}

/* ── 2026-08-29 모바일 개편: 로고·종·첨부·프로젝트·홈 대시보드 ─────────── */
/* 38px 확대 (2026-08-29) — 워드마크가 읽히는 최소 크기. 상단바 세로 패딩을
   로고가 키우지 않게 위아래 -4px 로 상쇄한다. */
.brand-logo { border-radius: 9px; display: block; margin: -4px 0; }
.bell { position: relative; display: flex; align-items: center; color: var(--ink);
  padding: 4px; margin-left: 2px; }
.bell .ico { width: 22px; height: 22px; }
.bell-badge {
  position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* 첨부 공통 카드 */
.attach-card { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.att-ico { font-size: 20px; flex: none; }
.att-main { flex: 1; min-width: 0; }
.att-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-all; font-size: 13.5px; line-height: 1.35; }
.att-meta { display: block; font-size: 11.5px; color: var(--sub); margin-top: 2px; }
.att-btn {
  /* 다운로드는 <a>, 미리보기는 <button> — 둘이 같은 크기·정렬로 보여야 한다 */
  flex: none; white-space: nowrap; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px;
  background: #fff; color: var(--ink); cursor: pointer;
  display: inline-block; text-decoration: none; line-height: 1.35;
}
.att-btn.att-primary { background: var(--primary-soft); border-color: #dfe3fc; color: var(--primary); }
.att-btn:disabled, .att-btn.att-busy { opacity: .5; pointer-events: none; }

/* 첨부 미리보기 오버레이 */
.attach-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(10,12,18,.92);
  display: flex; flex-direction: column;
}
.ao-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.ao-name { flex: 1; min-width: 0; color: #fff; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-close { flex: none; background: rgba(255,255,255,.14); color: #fff; border: 0;
  border-radius: 50%; width: 34px; height: 34px; font-size: 15px; }
.ao-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  overflow: auto; -webkit-overflow-scrolling: touch; }
/* touch-action:none — 핀치·드래그를 브라우저 스크롤이 가로채지 않게 (2026-08-29 확대 지원) */
.ao-body { overflow: hidden; }
.ao-body img { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: none; }
.ao-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.ao-error { color: #d1d5db; font-size: 14px; text-align: center; line-height: 1.6; }
.ao-actions { display: flex; justify-content: center; padding: 12px 16px;
  padding-bottom: calc(12px + var(--safe-bottom)); }
.ao-actions .mini-btn { min-width: 180px; padding: 12px 18px; font-size: 14px; }

/* 프로젝트 목록 */
.proj-search { width: 100%; padding: 11px 12px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; }
.chip-new { background: #ffedd5; color: #c2410c; }        /* 새 글 — 주황 */
.chip-comment { background: #dcfce7; color: #166534; }    /* 댓글 — 초록 */
.chip-mention { background: #ede9fe; color: #6d28d9; }    /* 멘션 — 보라 */
.chip-status-active { background: #dbeafe; color: #1d4ed8; }
.chip-status-planned { background: #fef3c7; color: #92400e; }
.chip-status-closed { background: #f1f2f5; color: #6b7280; }
.chip-team { background: #e0e7ff; color: #3730a3; }

/* 프로젝트 체크리스트 */
.cl-progress { height: 8px; background: #eceef2; border-radius: 6px; overflow: hidden; margin: 6px 0 14px; }
.cl-progress > span { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
.cl-item { display: flex; align-items: flex-start; gap: 10px; }
.cl-item input[type=checkbox] { width: 19px; height: 19px; margin-top: 1px; accent-color: var(--primary); }
.cl-item .cl-text { flex: 1; min-width: 0; font-size: 14px; }
.cl-item .cl-sub { display: block; font-size: 12px; color: var(--sub); margin-top: 2px; }
.cl-item.done .cl-text { color: var(--sub); text-decoration: line-through; }

/* 파일 업로드 진행 */
.upload-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.upload-bar { flex: 1; height: 6px; background: #eceef2; border-radius: 4px; overflow: hidden; }
.upload-bar > span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s; }
.upload-err { color: var(--danger); font-size: 13px; }

/* 홈 대시보드 — KPI 4칸 (매출 카드 없음, 2026-08-29) */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.kpi {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 4px; text-decoration: none; color: inherit; box-shadow: var(--shadow);
}
.kpi-num { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; }
.kpi-label { font-size: 10.5px; color: var(--sub); }
.kpi:active { transform: scale(.97); }
@media (max-width: 600px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 일정 — 다가오는 마감 */
.due-chip { flex: none; font-size: 11.5px; font-weight: 800; border-radius: 8px; padding: 3px 8px;
  background: #fee2e2; color: #b91c1c; }
.due-chip.due-soon { background: #fef3c7; color: #92400e; }
.due-chip.due-later { background: #f1f2f5; color: #6b7280; }

/* 더보기 */
.more-list { list-style: none; margin: 0; padding: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.more-list li { border-bottom: 1px solid var(--line); }
.more-list li:last-child { border-bottom: 0; }
.more-list a, .more-list button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 16px;
  font-size: 15px; color: var(--ink); text-decoration: none; background: none; border: 0;
  text-align: left; cursor: pointer;
}
.more-list .mi-ico { font-size: 19px; flex: none; }
.more-list .mi-arrow { margin-left: auto; color: var(--sub); }
.more-danger { color: var(--danger) !important; }

.link-panel {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; line-height: 1.55;
}
.link-panel ul { padding-left: 20px; color: var(--sub); font-size: 14px; }
.link-success { border-color: #86efac; background: #f0fdf4; }
.link-error { border-color: #fecaca; background: #fef2f2; color: var(--danger); }
.primary-action {
  width: 100%; margin-top: 10px; padding: 13px; border: 0; border-radius: 10px;
  background: var(--blue); color: #fff; font-size: 16px; font-weight: 700;
}

/* 프로젝트 파일함 — 폴더로 나눠 본다 (2026-08-31).
   PC 채널 화면이 폴더로 나뉘는데 모바일만 뒤섞여 있으면 같은 자료가 두 화면에서
   다르게 보인다. */
.file-folder-pick { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted);
  margin-bottom: 8px; }
.file-folder-pick select { display: block; width: 100%; box-sizing: border-box; margin-top: 5px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit;
  background: var(--surface); color: inherit; }
.file-folder-group { margin-top: 16px; }
.file-folder-group:first-of-type { margin-top: 12px; }
.file-folder-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800;
  color: var(--muted); margin-bottom: 6px; padding: 0 2px; }
.file-folder-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--chip, #eef2f7); border-radius: 999px; padding: 1px 8px; }
.file-folder-group .empty { margin: 0; padding: 10px 2px; font-size: 12.5px; }
.new-feed-form select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 9px; font: inherit; background: var(--surface); color: inherit; }
.feed .meta .post-folder { color: #2563eb; font-weight: 700; }

/* Tablet widths share the same aligned band for header, content and navigation. */
@media(min-width:768px){
 .mobile-app:not(.embedded){--mobile-content-width:1040px}
 .mobile-app:not(.embedded)>.content{max-width:var(--mobile-content-width)}
 .mobile-app:not(.embedded)>.topbar,.mobile-app:not(.embedded)>.tabbar{--band:max(16px,calc((100% - var(--mobile-content-width)) / 2 + 16px))}
 .mobile-app .home-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
 .mobile-app .home-panels>.panel{margin:0;min-width:0}
 .mobile-app .mail-body{max-width:760px;margin-left:auto;margin-right:auto}
}