/* =============================================================
   portal-ui.css — 포털 안쪽 화면들의 마감층 (2026-08-26)

   첫 화면(index.php)을 다시 그린 뒤 「나머지 화면도 맞춰 달라」는 요청으로
   만들었다. 주소록·검수·상담 문자·인물·발송·합치기·지부 담당·휴가가 대상이다.

   ## 🚨 왜 화면마다 안 고치고 한 장으로 뽑았나

   여덟 화면이 **같은 이름**을 쓴다 — `.box` · `.note` · `.find` · `.tabs` ·
   `.gh` · `.p` · `.empty`. 화면마다 같은 손질을 베끼면 여덟 벌이 되고,
   다음에 한 곳만 고치는 날 **그 화면만 조용히 달라진다.**

   ## ⚠ 이 파일은 각 화면의 `<style>` **뒤에** 온다

   앞에 두면 화면이 이미 정한 값(`.box` 의 테두리·라운드 등)에 밀려 아무것도
   안 바뀐다. 그래서 `</head>` 바로 앞에 둔다 — **마감층**이라는 이름이 그 뜻이다.
   화면 고유의 규칙을 지우지 않고, 겹치는 몇 가지만 새 값으로 덮는다.

   ## ⚠ 공용 `kupst-ui.css` 는 건드리지 않는다

   그 파일은 다섯 앱이 함께 쓴다(`bin/sync-ui-css.sh`). 여기서 고치면 공문·
   소식지·명부까지 흔들린다. 그래서 **포털 화면에서만** `--k-*` 를 덮어쓴다.

   ## 색은 조합 홈페이지 값이다

   주색 #3074f0 · 보조 #309ff0 · 짙은 남색 #2a4886.
   🚨 화면들이 단추에 `#2E6FC7` 을 박아 쓰고 있었다 — 홈페이지·공문·첫 화면과
      **미묘하게 다른 파랑**이라, 나란히 놓으면 같은 시스템으로 안 보인다.
   ============================================================= */

:root {
  /* kupst-ui.css 의 값을 포털 화면에서만 다시 잡는다 */
  --k-line: #e3e9f4;
  --k-radius: 14px;
  --k-accent: #3074f0;
  --k-accent-deep: #2a4886;
  --k-accent-weak: #eaf1ff;

  /* 이 파일이 새로 두는 것들 */
  --p-line-soft: #eef2f9;
  --p-accent-2: #309ff0;
  --p-shadow: 0 1px 2px rgba(23,48,105,.06), 0 1px 3px rgba(23,48,105,.05);
  --p-shadow-md: 0 2px 4px rgba(23,48,105,.05), 0 8px 20px -10px rgba(23,48,105,.20);
  --p-ring: 0 0 0 3px rgba(48,116,240,.26);
  --p-ink: #111a2b;
  --p-dim: #5c6a84;
}

@media (prefers-color-scheme: dark) {
  :root {
    --k-line: #26304a;
    --k-card: #161d2b;
    --k-bg: #0e131d;
    --k-text: #e9edf6;
    --k-muted: #93a1ba;
    --k-accent: #7ea2ff;
    --k-accent-deep: #c7d7ff;
    --k-accent-weak: #1c2743;
    --p-line-soft: #1d2537;
    --p-accent-2: #7cc7ff;
    --p-shadow: 0 1px 2px rgba(0,0,0,.5);
    --p-shadow-md: 0 2px 6px rgba(0,0,0,.45), 0 10px 24px -12px rgba(0,0,0,.6);
    --p-ring: 0 0 0 3px rgba(126,162,255,.32);
    --p-ink: #e9edf6;
    --p-dim: #93a1ba;
  }
}

/* ── 바탕 ──────────────────────────────────────────────────────
   첫 화면과 같은 옅은 파랑 기운. 흰 바탕에 흰 상자를 얹으면 상자가 안 보인다. */
body {
  background-color: #f1f4fa;
  background-image:
    radial-gradient(1100px 340px at 50% -170px, rgba(48,116,240,.10), transparent 70%);
  background-repeat: no-repeat;
  color: var(--p-ink);
  letter-spacing: -.011em;
}
@media (prefers-color-scheme: dark) { body { background-color: #0e131d; } }

/* 숫자가 줄줄이 서는 자리는 자리폭을 고정한다 */
.p .l3, .msg, table, .n, .cnt { font-variant-numeric: tabular-nums; }

/* ── 제목 ──────────────────────────────────────────────────────
   첫 화면과 같은 규칙 — 구역이 바뀌는 것을 굵기가 아니라 색 막대로 말한다. */
.bar h1 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.who { color: var(--p-dim); }

.gh {
  display: flex; align-items: center; gap: 8px;
  color: var(--p-dim); font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
  border-bottom: 0; padding-bottom: 0; margin: 22px 0 8px;
}
.gh::before {
  content: ''; width: 3px; height: 13px; border-radius: 2px; flex: none;
  background: linear-gradient(180deg, var(--k-accent), var(--p-accent-2));
}

/* ── 상자 ─────────────────────────────────────────────────────
   1px 테두리만으로는 납작하다. 두 겹 그림자로 살짝 띄운다. */
.box {
  border-color: var(--p-line-soft);
  border-radius: 16px;
  box-shadow: var(--p-shadow);
}
.box h2 { font-size: 15px; font-weight: 800; letter-spacing: -.015em; }

/* ── 알림 띠 ───────────────────────────────────────────────────
   ⚠ 색만으로 말하지 않는다 — 왼쪽 굵은 선이 종류를 한 번 더 말한다.
     색을 못 가리는 사람에게 배경색 차이는 없는 것과 같다. */
.note {
  border-radius: 12px; border-left-width: 4px;
  box-shadow: var(--p-shadow);
}

/* ── 사람·목록 줄 ─────────────────────────────────────────────── */
.p { border-bottom-color: var(--p-line-soft); padding: 12px 8px; border-radius: 10px; }
.p:hover { background: color-mix(in srgb, var(--k-accent-weak) 55%, transparent); }
.p .l1 { letter-spacing: -.015em; }
.p .l1 .nm:hover { color: var(--k-accent); border-bottom-color: var(--k-accent); }
.p .tag.mine { background: var(--k-accent-weak); color: var(--k-accent-deep); }
.empty { color: var(--p-dim); }

/* ── 찾기 줄 ──────────────────────────────────────────────────── */
.find input[type=search], .find select, input[type=text], input[type=search], select, textarea {
  border-color: var(--k-line); border-radius: 10px;
}
.find input[type=search]:focus, input[type=text]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--k-accent); box-shadow: var(--p-ring);
}

/* ── 단추 ──────────────────────────────────────────────────────
   🚨 화면마다 `#2E6FC7` 이 박혀 있었다. 조합색으로 모은다. */
.find button, .picked .mail, button.go, .go, .primary, .btn.pri {
  background: linear-gradient(180deg, var(--k-accent), color-mix(in srgb, var(--k-accent) 82%, #000));
  border: 0; border-radius: 10px; color: #fff; font-weight: 700;
  box-shadow: 0 1px 2px rgba(23,48,105,.2), 0 6px 14px -8px var(--k-accent);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.find button:hover, .picked .mail:hover, .go:hover, .primary:hover, .btn.pri:hover {
  filter: brightness(1.05); box-shadow: 0 2px 4px rgba(23,48,105,.22), 0 10px 20px -10px var(--k-accent);
}
.find button:active, .go:active, .primary:active { transform: translateY(1px); }

.ghost, .btn {
  border-radius: 10px; border-color: var(--k-line); font-weight: 600;
  box-shadow: var(--p-shadow); transition: box-shadow .14s ease, border-color .14s ease;
}
.ghost:hover, .btn:hover {
  border-color: color-mix(in srgb, var(--k-accent) 45%, var(--k-line));
  box-shadow: var(--p-shadow-md);
}

/* 되돌릴 수 없는 단추는 조합색으로 칠하지 않는다 — 색이 곧 경고다 */
.danger, button.danger { border-radius: 10px; font-weight: 700; }

/* ── 갈피(탭) ─────────────────────────────────────────────────── */
.tabs a {
  border-color: var(--p-line-soft); background: var(--k-card);
  box-shadow: var(--p-shadow); font-weight: 600;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.tabs a:hover { border-color: color-mix(in srgb, var(--k-accent) 45%, var(--k-line)); }
.tabs a.on {
  background: linear-gradient(180deg, var(--k-accent), color-mix(in srgb, var(--k-accent) 82%, #000));
  border-color: transparent; color: #fff;
  box-shadow: 0 1px 2px rgba(23,48,105,.2), 0 6px 14px -8px var(--k-accent);
}

/* ── 표 ───────────────────────────────────────────────────────── */
table.tbl, .box table { border-collapse: separate; border-spacing: 0; }
table.tbl th, .box table th {
  font-size: 12px; font-weight: 800; color: var(--p-dim);
  letter-spacing: .03em; border-bottom: 1px solid var(--k-line);
}
table.tbl td, .box table td { border-bottom: 1px solid var(--p-line-soft); }
table.tbl tbody tr:hover td { background: color-mix(in srgb, var(--k-accent-weak) 45%, transparent); }

/* ── 아래에 붙어 따라오는 띠 (주소록에서 고른 사람) ───────────────── */
.picked {
  border-top-color: var(--p-line-soft);
  box-shadow: 0 -6px 24px -12px rgba(23,48,105,.45);
  -webkit-backdrop-filter: saturate(1.6) blur(8px);
  backdrop-filter: saturate(1.6) blur(8px);
  background: var(--k-card);
  background: color-mix(in srgb, var(--k-card) 92%, transparent);
}

/* ── 명함 사진 ────────────────────────────────────────────────── */
.shot img, img.shot { border-radius: 12px; box-shadow: var(--p-shadow-md); }

/* ── 손이 닿는 자리는 눈에도 보이게 ──────────────────────────────── */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--p-ring); border-radius: 10px;
}

/*
 * ⚠ 움직임을 싫다고 한 사람에게는 움직이지 않는다. 접근성 설정이다.
 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}