/* 온앤미 인포 모바일 — 모던 미니멀 (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 {
  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; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; }
.mail-search button { 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); }
.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;
}

.login-wrap { max-width: 360px; margin: 10vh auto 0; text-align: center; }
.login-wrap h1 { color: var(--blue); }
.login-wrap .sub { color: var(--sub); font-size: 14px; }
.login-form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; text-align: left; }
.login-form label { font-size: 13px; color: var(--sub); display: flex; flex-direction: column; gap: 5px; }
.login-form input {
  padding: 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px;
}
.login-form button {
  margin-top: 6px; padding: 13px; background: var(--blue); color: #fff;
  border: 0; border-radius: 10px; font-size: 16px; font-weight: 700;
}
.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; }
.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; gap: 6px; margin-top: 8px; }
.comment-form input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.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; }
.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; justify-content: space-between; align-items: center; }
.attach-list a { color: var(--blue); text-decoration: none; word-break: break-all; }

/* ── 채널 피드 ──────────────────────────────────────── */
.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; }
/* 모던 미니멀 캘린더 — 셀 테두리 없이 여백으로, 오늘/선택만 원형 강조, 일정은 점 */
.cal-grid { display: grid; grid-template-columns: repeat(7, 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; 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: #ef4444; }     /* 행사 — 빨강 */
.dot-meeting { background: #8b5cf6; }   /* 미팅·회의 — 보라 */
.dot-proposal { background: #f59e0b; }  /* 제안발표 — 노랑 */
.dot-ceo { background: #a16207; }        /* 대표님 일정 — 갈색 */
.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-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; }

/* ── 태블릿·데스크톱 (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; }
  .topbar { padding-left: 24px; padding-right: 24px; }
  .brand { font-size: 19px; }
  /* 하단 탭바 — 7개 탭이 어떤 폭에서도 화면을 넘지 않게 균등 분배(각 최대 130px).
     고정 130px basis는 7×130=910px라 768~909px 태블릿에서 오른쪽 탭이 잘렸다(코덱스 발견). */
  .tabbar a { flex: 1 1 0; max-width: 130px; font-size: 12px; padding: 10px 0 8px; }
  .tabbar .ico { font-size: 22px; }
  .mail-body { min-height: 300px; }
}

.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;
}