/* ==========================================================================
   WithMeet — "정갈함" (Clean & Minimal) design tokens.
   Bootstrap 5.1's utility classes (bg-*, text-*, border-*) already read the
   --bs-*-rgb root variables below, so overriding :root alone reskins every
   badge/utility app-wide. Its component classes (buttons, alerts, nav-tabs,
   form focus rings, list-group hover) hardcode hex values in that Bootstrap
   version instead, so those are re-declared explicitly further down —
   without this, only half the app would pick up the new palette.
   ========================================================================== */

:root {
  /* Explicitly opt this page into the light color scheme — without it, browsers/OSes with a
     forced/auto dark-mode feature (Windows/Edge "Force web content to always use a light/dark
     appearance", Chrome's Auto Dark Mode) recolor pages heuristically and break intentionally
     solid-colored buttons with white text (.btn-primary, .btn-outline-danger:hover), since the
     page never declared which scheme it actually supports. This is invisible to a normal browser,
     doesn't require the <meta name="color-scheme"> tag to also be present, and isn't fixed by a
     cache-busting hard refresh because it's a per-render feature, not cached content. */
  color-scheme: light;

  /* 순백 배경(2026-08-16, 사용자 요청) — 목업 단계의 --bg:#FFFFFF와 맞춤. --wm-surface도 이미
     흰색이라 카드/입력창이 페이지와 색으로 구분되진 않지만, border(--wm-line)와 그림자로 구분된다. */
  --wm-bg: #FFFFFF;
  --wm-surface: #FFFFFF;
  /* --wm-bg가 순백이 되기 전까지는 그 값(#FAFAF8)이 "흰 표면 위의 은은한 채움"(사이드바 hover,
     로스터 칩, 아이콘 원)으로도 같이 쓰였다 — 페이지 배경과 분리해서 그 용도만 남긴 토큰. */
  --wm-tint: #F5F3EE;
  --wm-ink: #1C1D22;
  --wm-muted: #726F66;
  --wm-line: #E7E4DB;

  /* Derived from the WithMeet mark's lavender/rose (--wm-logo-a/--wm-logo-b below), deepened
     for text/button contrast — the mark and the UI accent share one color family instead of the
     mark being an unrelated navy-vs-pastel mismatch. */
  --wm-accent: #5B4396;
  --wm-accent-hover: #4A3579;
  --wm-accent-active: #3D2C63;
  --wm-accent-soft: #F1ECFA;

  --wm-logo-a: #C9B8EA;
  --wm-logo-a-light: #DCCFF2;
  --wm-logo-b: #EFB3CE;

  --wm-success: #2F8F6F;
  --wm-success-hover: #277A5F;
  --wm-success-soft: #E5F3EE;

  --wm-warning: #B7791F;
  --wm-warning-hover: #9C671A;
  --wm-warning-soft: #FBF1E1;

  --wm-danger: #C4402E;
  --wm-danger-hover: #A93726;
  --wm-danger-soft: #FBEAE6;

  --wm-info: #3E7CB1;
  --wm-info-hover: #346A99;
  --wm-info-soft: #E7F0F7;

  /* 랜딩페이지 리드아웃/스텝 넘버에서 쓰던 모노스페이스 그래픽 장치(2026-09-17) — 미팅 상세의
     회의록 문서형 개편(주제 번호/타임코드/화자 태그/태그 배지)에도 재사용하기 위해 전역으로 승격. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Bootstrap theme hooks — utility classes (.bg-success, .text-danger, ...)
     read these directly, so this is the one place that reskins every badge. */
  --bs-body-bg: var(--wm-bg);
  --bs-body-color: var(--wm-ink);
  --bs-border-color: var(--wm-line);
  --bs-link-color: var(--wm-accent);
  --bs-link-hover-color: var(--wm-accent-hover);
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;

  --bs-primary: var(--wm-accent);
  --bs-primary-rgb: 91, 67, 150;
  --bs-secondary: var(--wm-muted);
  --bs-secondary-rgb: 114, 111, 102;
  --bs-success: var(--wm-success);
  --bs-success-rgb: 47, 143, 111;
  --bs-info: var(--wm-info);
  --bs-info-rgb: 62, 124, 177;
  --bs-warning: var(--wm-warning);
  --bs-warning-rgb: 183, 121, 31;
  --bs-danger: var(--wm-danger);
  --bs-danger-rgb: 196, 64, 46;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html,
body {
  background-color: var(--wm-bg);
  color: var(--wm-ink);
}

/* Footer pinned to the viewport bottom on short pages, pushed down normally once content is
   taller than the viewport — the classic flex-column sticky-footer pattern. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--bs-body-font-family);
}
body > .container {
  flex: 1 0 auto;
}
body > footer.wm-footer {
  flex-shrink: 0;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
  font-weight: 700;
}

a {
  color: var(--wm-accent);
}

a:hover {
  color: var(--wm-accent-hover);
}

.eyebrow {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wm-accent);
  font-weight: 700;
  margin-bottom: .35rem;
  display: block;
}

.text-dark {
  color: var(--wm-ink) !important;
}

.text-muted {
  color: var(--wm-muted) !important;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.btn {
  border-radius: .5rem;
  font-weight: 600;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .15rem var(--wm-bg), 0 0 0 .3rem rgba(91, 67, 150, .35);
}

.btn-primary {
  color: #fff;
  background-color: var(--wm-accent);
  border-color: var(--wm-accent);
}
.btn-primary:hover, .btn-primary:focus, .btn-check:focus + .btn-primary {
  color: #fff;
  background-color: var(--wm-accent-hover);
  border-color: var(--wm-accent-hover);
}
.btn-primary:active {
  background-color: var(--wm-accent-active) !important;
  border-color: var(--wm-accent-active) !important;
}

.btn-success {
  color: #fff;
  background-color: var(--wm-success);
  border-color: var(--wm-success);
}
.btn-success:hover, .btn-success:focus {
  color: #fff;
  background-color: var(--wm-success-hover);
  border-color: var(--wm-success-hover);
}

.btn-outline-primary {
  color: var(--wm-accent);
  border-color: var(--wm-accent);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  color: #fff;
  background-color: var(--wm-accent);
  border-color: var(--wm-accent);
}

.btn-outline-secondary {
  color: var(--wm-ink);
  border-color: #C7C3B7;
  background-color: transparent;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  color: var(--wm-ink);
  background-color: var(--wm-accent-soft);
  border-color: #C7C3B7;
}

.btn-outline-success {
  color: var(--wm-success);
  border-color: var(--wm-success);
}
.btn-outline-success:hover, .btn-outline-success:focus {
  color: #fff;
  background-color: var(--wm-success);
  border-color: var(--wm-success);
}

.btn-outline-warning {
  color: var(--wm-warning);
  border-color: var(--wm-warning);
}
.btn-outline-warning:hover, .btn-outline-warning:focus {
  color: #fff;
  background-color: var(--wm-warning);
  border-color: var(--wm-warning);
}

.btn-outline-danger {
  color: var(--wm-danger);
  border-color: var(--wm-danger);
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  color: #fff;
  background-color: var(--wm-danger);
  border-color: var(--wm-danger);
}

.btn-link {
  color: var(--wm-accent);
  font-weight: 600;
  text-decoration: none;
}
.btn-link:hover {
  color: var(--wm-accent-hover);
}

/* -------------------------------------------------------------------------
   Badges — pill-shaped, colors come from the --bs-*-rgb tokens above.
   ------------------------------------------------------------------------- */

.badge {
  border-radius: 100px;
  font-weight: 600;
  padding: .38em .9em;
  letter-spacing: .01em;
}
/* Bootstrap's plain .badge is solid-color-with-white-text — bold, not the soft-tint pill from
   the approved mockup ("정갈함"). These need !important to beat .bg-success/.bg-warning/etc,
   which are themselves !important (DEVELOPMENT_GUIDE.md §12 — Bootstrap 5.1's utility classes,
   unlike its components, do carry !important). */
.badge.bg-secondary {
  background-color: var(--wm-line) !important;
  color: var(--wm-muted) !important;
}
.badge.bg-success {
  background-color: var(--wm-success-soft) !important;
  color: var(--wm-success) !important;
}
.badge.bg-warning {
  background-color: var(--wm-warning-soft) !important;
  color: var(--wm-warning) !important;
}
.badge.bg-danger {
  background-color: var(--wm-danger-soft) !important;
  color: var(--wm-danger) !important;
}
.badge.bg-info {
  background-color: var(--wm-info-soft) !important;
  color: var(--wm-info) !important;
}

/* -------------------------------------------------------------------------
   Alerts
   ------------------------------------------------------------------------- */

.alert-warning {
  color: #6B4A0F;
  background-color: var(--wm-warning-soft);
  border-color: #F0DDB8;
}
.alert-warning .alert-link {
  color: #4F3608;
}

.alert-danger {
  color: #7D291B;
  background-color: var(--wm-danger-soft);
  border-color: #F2C9C1;
}
.alert-danger .alert-link {
  color: #5E1E13;
}

/* -------------------------------------------------------------------------
   Cards / surfaces
   ------------------------------------------------------------------------- */

.card {
  background-color: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: .625rem;
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */

.form-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wm-accent);
  margin-bottom: .4rem;
}

/* Underline-minimal fields — no box/background, just a bottom rule that thickens and
   switches to the accent color on focus. Multi-line input (textarea) is the one deliberate
   exception below: a bare underline reads badly once text wraps to more than one line, so it
   keeps the old bordered-box treatment. */
.form-control, .form-select {
  border: none;
  border-bottom: 1.5px solid var(--wm-line);
  border-radius: 0;
  background-color: transparent;
  color: var(--wm-ink);
  padding: .5rem .1rem;
}
.form-control::placeholder {
  color: #A8A499;
}
.form-control:focus, .form-select:focus {
  border-bottom: 2px solid var(--wm-accent);
  background-color: transparent;
  box-shadow: none;
  padding-bottom: calc(.5rem - .5px);
}
.form-control-sm, .form-select-sm {
  padding: .3rem .1rem;
}
/* <select>의 화살표는 실제 콘텐츠가 아니라 background-image라 오른쪽 여백을 따로 못 밀어낸다 —
   위에서 .form-control/.form-select 공통 padding을 .1rem으로 줄이면서 그 여백까지 같이
   사라져 화살표가 글자 위에 겹쳐 보였다("참석자 select박스 화살표가 이름 위에 겹쳐 보임").
   select에서만 오른쪽 padding을 화살표가 들어갈 만큼 되돌린다. */
.form-select {
  padding-right: 1.75rem;
}
.form-select-sm {
  padding-right: 1.5rem;
}
textarea.form-control {
  min-height: 4.5rem;
  border: 1px solid var(--wm-line);
  border-radius: .55rem;
  padding: .55rem .85rem;
}
textarea.form-control:focus {
  border: 1px solid var(--wm-accent);
  padding: .55rem .85rem;
}

.form-check-input {
  border-color: var(--wm-line);
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .2rem;
}
.form-check-input:checked {
  background-color: var(--wm-accent);
  border-color: var(--wm-accent);
}
.form-check-label {
  font-size: .9rem;
}

/* -------------------------------------------------------------------------
   Auth pages (Login/Register) — the plainest, least-designed forms in the
   app and also the very first thing a new user sees, so they get an
   explicit card treatment rather than relying on the bare form-control
   polish above.
   ------------------------------------------------------------------------- */

.wm-auth-shell {
  max-width: 420px;
  margin: 3rem auto 0;
}
.wm-auth-card {
  background-color: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: .875rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(28, 29, 34, .04), 0 8px 24px rgba(28, 29, 34, .04);
}
.wm-auth-card .wm-mark {
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
}
.wm-auth-card h1 {
  font-size: 1.35rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.wm-auth-card .btn {
  padding-top: .6rem;
  padding-bottom: .6rem;
}

/* 온보딩 마법사(2026-08-21) — .wm-auth-card와 같은 카드 언어, 3단계는 .review-step/.rdot(명함 검토
   스테퍼)을 그대로 재사용한다. */
.wm-onboard-shell {
  max-width: 460px;
  margin: 3rem auto 0;
  padding: 0 1rem;
}
.wm-onboard-card {
  background-color: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: .875rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(28, 29, 34, .04), 0 8px 24px rgba(28, 29, 34, .04);
  text-align: center;
}
.wm-onboard-mark {
  width: 44px;
  height: 44px;
  margin: 0 auto 1.2rem;
}
.wm-onboard-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: .5rem;
}
.wm-onboard-sub {
  color: var(--wm-muted);
  font-size: .88rem;
  margin-bottom: 1.6rem;
}
.wm-onboard-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  margin-bottom: 1.6rem;
}
.wm-onboard-feature {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.wm-onboard-feature-icon {
  width: 36px;
  height: 36px;
  border-radius: .6rem;
  background-color: var(--wm-accent-soft);
  color: var(--wm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wm-onboard-feature-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wm-onboard-feature-title {
  font-weight: 700;
  font-size: .88rem;
  margin-bottom: .15rem;
}
.wm-onboard-feature-desc {
  color: var(--wm-muted);
  font-size: .8rem;
}
.wm-onboard-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 1.6rem 1rem;
  border: 1.5px dashed var(--wm-line);
  border-radius: .8rem;
  background-color: var(--wm-tint);
  cursor: pointer;
  margin-bottom: 0;
}
.wm-onboard-upload-icon {
  font-size: 1.6rem;
}
.wm-onboard-upload-title {
  font-weight: 700;
  font-size: .9rem;
}
.wm-onboard-upload-sub {
  color: var(--wm-muted);
  font-size: .78rem;
}
/* 카카오 로그인 버튼 — 공식 디자인 가이드 고정값(색상/half-radius/심볼 비율은 임의 변경 금지):
   https://developers.kakao.com/docs/ko/kakaologin/design-guide
   심볼(kakao-symbol.png)은 가이드 페이지의 공식 완성형 버튼 예시 이미지에서 그대로 추출한 것 —
   새로 그리지 않음("형태, 비율, 색상은 변경할 수 없습니다" 조항 준수). */
.kakao-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: 45px;
  background-color: #FEE500;
  border: none;
  border-radius: 12px;
  color: rgba(0, 0, 0, .85);
  font-size: .875rem;
  font-weight: 500;
}
.kakao-login-btn:hover {
  background-color: #FEE500;
  color: rgba(0, 0, 0, .85);
  filter: brightness(.97);
}
.kakao-login-btn img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* Apple Sign-In 버튼 — 공식 디자인 가이드(밝은 배경 = 검정 버튼) 준수:
   https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple
   로고(apple-mark.svg)는 Apple 공식 로고마크와 동일한 형태의 오픈소스 벡터(Simple Icons
   프로젝트)를 흰색으로 사용 — 가이드가 요구하는 "Apple 로고 심볼"을 재현한 것. 모서리 반경은
   가이드가 앱의 다른 버튼과 통일하도록 허용하는 범위 안에서 카카오 버튼(12px)과 맞춤. */
.apple-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: 45px;
  background-color: #000;
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
}
.apple-login-btn:hover {
  background-color: #1a1a1a;
  color: #fff;
}
.apple-login-btn img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* 2026-09-11 — "아이디 없어도 카카오로 간편가입 가능"을 알려주는 배지(3안 채택). 카카오
   디자인 가이드가 금지하는 건 버튼 자체의 형태/비율/색상 변경이라, 버튼 밖에 별도로 얹는
   배지는 규정과 무관 — 버튼 마크업은 그대로 두고 감싸는 wrapper에만 배지를 절대 위치로 둔다. */
.kakao-wrap {
  position: relative;
  margin-top: .5rem;
}
.kakao-badge {
  position: absolute;
  top: -10px;
  right: 8px;
  background-color: var(--wm-ink);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  padding: .2rem .5rem;
  border-radius: 999px;
  z-index: 1;
}

/* 사이드바 카카오톡 채널 추가 유도(2026-08-20) — 빠른 시작 버튼 바로 아래, 아직 채널 친구가
   아닌 사용자에게만 노출(_Layout.cshtml). 로그인 버튼과 달리 이건 카카오의 엄격한 색상/심볼
   규정 대상이 아니라, 사이트 톤에 맞춘 옅은 옐로우 톤 카드로 디자인. */
.wm-kakao-channel-btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  font-size: .8rem;
  font-weight: 600;
  color: #7A5D00;
  background-color: #FFF7D6;
  border: 1px solid #FCE68A;
  border-radius: .5rem;
  padding: .55rem .75rem;
  margin-bottom: .5rem;
  text-decoration: none;
}
.wm-kakao-channel-btn:hover {
  background-color: #FEF0AD;
  color: #7A5D00;
}
.wm-kakao-channel-btn img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 업로드 후 3초 인터스티셜(카카오톡 채널 친구 전용, MeetingsController.UploadStarted) —
   .wm-auth-card와 같은 중앙 카드 톤을 쓰되, 체크 아이콘만 카카오 옐로우로 물들여
   "카카오톡으로 알려드릴게요" 맥락을 시각적으로 이어준다. */
.wm-upload-started {
  max-width: 420px;
  margin: 4.5rem auto 0;
  text-align: center;
}
.wm-upload-started-card {
  background-color: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: .875rem;
  padding: 2.5rem 2rem;
  box-shadow: 0 1px 3px rgba(28, 29, 34, .04), 0 8px 24px rgba(28, 29, 34, .04);
}
.wm-upload-started-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background-color: #FEE500;
  color: #191919;
}
.wm-upload-started-icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 2.2;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wm-upload-started-card h1 {
  font-size: 1.2rem;
  margin-bottom: .6rem;
}
.wm-upload-started-card p {
  margin-bottom: 1.5rem;
}

.wm-auth-footer {
  text-align: center;
  font-size: .875rem;
  color: var(--wm-muted);
  margin-top: 1.25rem;
}

/* -------------------------------------------------------------------------
   List group (used for Search results — Meetings index has its own
   .wm-meeting-card treatment below)
   ------------------------------------------------------------------------- */

.list-group-item {
  border-color: var(--wm-line);
  background-color: var(--wm-surface);
}
.list-group-item-action:hover, .list-group-item-action:focus {
  color: var(--wm-ink);
  background-color: var(--wm-accent-soft);
}

/* -------------------------------------------------------------------------
   Tabs — both the top navbar and Meetings/Details' in-page section tabs
   share this underline-active treatment for one consistent language.
   ------------------------------------------------------------------------- */

.nav-tabs {
  border-bottom-color: var(--wm-line);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-tabs .nav-link {
  color: var(--wm-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 600;
  padding: .55rem .25rem;
  margin-right: 1.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-tabs .nav-link:hover {
  color: var(--wm-ink);
  border-color: var(--wm-line);
  isolation: auto;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--wm-ink);
  background-color: transparent;
  border-color: var(--wm-accent);
}

/* -------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */

.table {
  color: var(--wm-ink);
  border-color: var(--wm-line);
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--wm-line);
}
.table thead th {
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wm-muted);
  font-weight: 600;
  border-bottom-width: 1px;
}

/* -------------------------------------------------------------------------
   App shell — brand mark, top navigation
   ------------------------------------------------------------------------- */

.wm-header {
  border-bottom: 1px solid var(--wm-line);
  background-color: var(--wm-surface);
}

.wm-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--wm-ink) !important;
  text-decoration: none;
}
.wm-brand:hover {
  color: var(--wm-ink) !important;
}
/* Base box for the WithMeet mark (_LogoMark.cshtml, two overlapping SVG circles) — every
   context below (header brand, auth card, home hero) only needs to override size/margin. */
.wm-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wm-brand .wm-mark {
  width: 26px;
  height: 26px;
}

/* -------------------------------------------------------------------------
   Sidebar app shell (authenticated pages) — replaces the old top-nav shell.
   Mobile: the mobile top bar's hamburger toggles the same #wmNavCollapse
   element open as a full-width dropdown panel (Bootstrap .collapse), same
   mechanism the old top-nav used. Desktop (md+): that same element becomes
   a persistent, sticky left column instead of a horizontal row.
   ------------------------------------------------------------------------- */

.wm-app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wm-mobile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--wm-line);
  background: var(--wm-surface);
}
.wm-nav-toggle {
  border: none;
  background: transparent;
  color: var(--wm-ink);
  padding: .4rem;
  line-height: 0;
}
.wm-nav-toggle svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wm-sidebar {
  background-color: var(--wm-surface);
  border-bottom: 1px solid var(--wm-line);
  padding: .5rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.wm-sidebar-brand {
  padding: .5rem;
  margin-bottom: .5rem;
}

/* "빠른 시작" 전역 진입점(2026-08-18) — 사이드바에서는 메뉴 항목들 위에, 모바일 상단바에서는
   햄버거 버튼 왼쪽에 상시 노출해 어느 화면에서든 바로 열 수 있게 한다. 로고의 라벤더/로즈
   그라데이션을 그대로 써서(다른 버튼들과 다르게) "AI가 바로 처리해준다"는 느낌의 강조 CTA로
   보이게 했다. */
.wm-quickstart-btn {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--wm-logo-a), var(--wm-logo-b));
  border: none;
  border-radius: .5rem;
  padding: .65rem .75rem;
  margin-bottom: .75rem;
}
.wm-quickstart-btn:hover {
  opacity: .92;
  color: #fff;
}
.wm-quickstart-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: currentColor;
  flex-shrink: 0;
}

.wm-quickstart-btn-mobile {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--wm-logo-a), var(--wm-logo-b));
  border: none;
  border-radius: .5rem;
  padding: .4rem .65rem;
  line-height: 1;
  white-space: nowrap;
}
.wm-quickstart-btn-mobile svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: currentColor;
  flex-shrink: 0;
}

.wm-nav-user {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--wm-line);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.wm-user {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--wm-ink);
  padding: .45rem .5rem;
  border-radius: .6rem;
  text-decoration: none;
  transition: background-color .12s ease;
}
.wm-user:hover {
  background-color: var(--wm-tint);
  color: var(--wm-accent);
}
.wm-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
  font-size: .72rem;
  color: #fff;
  background: linear-gradient(135deg, var(--wm-logo-a), var(--wm-logo-b));
}
.wm-user-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wm-user-chev {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  opacity: .55;
}

/* 사이드바 구독 상태 칩(2026-09-16) — .wm-user 바로 아래, 로그아웃 버튼 위. 좌측 액센트 바 +
   전체 너비, 배경 없음(Artifact로 제시한 6안 중 v5, 그중 "A. 배경 없이 너비만"이 채택됨). 무료
   사용자에게는 렌더링 자체가 안 되므로(_Layout.cshtml에서 currentSubscription null 체크) 별도
   숨김 처리가 필요 없다. */
.wm-sub-chip {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: 100%;
  border-left: 2.5px solid var(--wm-accent);
  padding: .4rem .5rem;
  margin-top: -.15rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--wm-ink);
  text-decoration: none;
}
.wm-sub-chip:hover {
  color: var(--wm-accent);
}
.wm-sub-chip svg {
  width: 13px;
  height: 13px;
  stroke: var(--wm-accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.wm-sub-chip .date {
  color: var(--wm-muted);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   카드 관리 화면 — 실물 카드형 타일(2026-09-16, Artifact C안 채택). 나이스페이
   응답엔 마스킹된 카드번호가 안 내려오고 카드사명(CardDisplayName)만 있어서,
   Artifact 시안의 "•••• •••• •••• ••••" 가짜 자리표시 숫자는 빼고 카드사명을
   타일 중앙에 크게 보여주는 것으로 대체했다 — 실제로 없는 데이터를 있는 것처럼
   보여주지 않기 위함.
   ------------------------------------------------------------------------- */
.card-tile {
  position: relative;
  border-radius: 1rem;
  padding: 1.2rem 1.3rem 1.05rem;
  margin-bottom: .9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--wm-logo-a), var(--wm-accent) 60%, var(--wm-accent-active));
  overflow: hidden;
}
.card-tile::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.card-tile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.3rem;
  position: relative;
  z-index: 1;
}
.card-tile-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  opacity: .85;
  text-transform: uppercase;
}
.card-tile-del {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.card-tile-del svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-tile-del:hover {
  background: rgba(255, 255, 255, .32);
  color: #fff;
}
.card-tile-name {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: .1rem;
  position: relative;
  z-index: 1;
}
.card-tile-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}
.card-tile-badge {
  font-size: .68rem;
  font-weight: 800;
  background: rgba(255, 255, 255, .2);
  padding: .15rem .55rem;
  border-radius: 100px;
}
.card-tile-setdefault {
  font-size: .72rem;
  font-weight: 700;
  color: var(--wm-accent);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
}
.card-tile.muted {
  background: var(--wm-tint);
  color: var(--wm-ink);
}
.card-tile.muted::after {
  display: none;
}
.card-tile.muted .card-tile-label {
  color: var(--wm-muted);
  opacity: 1;
}
.card-tile.muted .card-tile-del {
  background: var(--wm-danger-soft);
  color: var(--wm-danger);
}
.card-tile.muted .card-tile-del:hover {
  background: var(--wm-danger);
  color: #fff;
}
.card-add-tile {
  width: 100%;
  border: 1.5px dashed var(--wm-line);
  border-radius: 1rem;
  padding: 1.1rem;
  text-align: center;
  color: var(--wm-accent);
  background: none;
  font-size: .86rem;
  font-weight: 700;
}
.card-add-tile:hover {
  background: var(--wm-accent-soft);
  border-color: var(--wm-accent);
}

.wm-nav {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.wm-nav .wm-navlink {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--wm-muted);
  text-decoration: none;
  padding: .6rem .5rem;
  border-radius: .5rem;
}
.wm-nav .wm-navlink:hover {
  color: var(--wm-ink);
  background-color: var(--wm-tint);
}
.wm-nav .wm-navlink.active {
  color: var(--wm-accent);
  background-color: var(--wm-accent-soft);
}
.wm-nav .wm-navlink svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.wm-main-col {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wm-main {
  flex: 1 0 auto;
  padding: 1.5rem 1.25rem 2rem;
}

footer.wm-footer {
  border-top: 1px solid var(--wm-line) !important;
  color: var(--wm-muted) !important;
  padding: 1rem 1.25rem;
  font-size: .85rem;
}
footer.wm-footer > div,
footer.wm-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1rem;
}
footer.wm-footer a {
  color: var(--wm-muted);
}
footer.wm-footer a:hover {
  color: var(--wm-accent);
}

/* 전자상거래법 사업자 정보 고지 (_FooterBiz.cshtml). 처음엔 상호/대표자/주소 등을 짧은 줄로
   세로 쌓았더니 PC 넓은 화면에서 왼쪽에만 좁게 몰리고 오른쪽 대부분이 비어 보인다는 피드백
   (2026-08-20) — .wm-footer-biz가 footer.wm-footer(가로 flex)의 자식 아이템인데 너비를
   지정하지 않아 내용 크기만큼만 줄어들었던 게 원인. width:100%로 폭 전체를 차지하게 하고,
   각 항목(상호/대표자/주소/사업자등록번호...)을 한 줄에 가로로 나열(flex-wrap)해 넓은 화면을
   실제로 채우도록 바꿨다 — 화면이 좁아지면 항목들이 자연스럽게 다음 줄로 접힌다. */
.wm-footer-biz {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  width: 100%;
}
.wm-footer-line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .65rem;
  font-size: .78rem;
  color: var(--wm-muted);
}
.wm-footer-line span:not(:first-child)::before {
  content: "·";
  margin-right: .35rem;
  color: var(--wm-line);
}
.wm-footer-line a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wm-footer-copy {
  margin-top: .2rem;
  font-size: .82rem;
}
.wm-footer-copy a {
  text-decoration: none;
}

@media (min-width: 768px) {
  .wm-app-shell {
    flex-direction: row;
  }
  .wm-nav-toggle {
    display: none;
  }
  .wm-sidebar {
    display: flex !important;
    width: 208px;
    flex-shrink: 0;
    border-bottom: none;
    border-right: 1px solid var(--wm-line);
    padding: 1.5rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
  .wm-main {
    padding: 2rem 2.5rem;
  }
}

/* -------------------------------------------------------------------------
   Quick actions (Home) — 마이크로 녹음 / 파일로 시작 / 명함 등록
   ------------------------------------------------------------------------- */

.wm-quickactions {
  background: linear-gradient(155deg, var(--wm-surface), var(--wm-accent-soft) 220%);
  border: 1px solid var(--wm-line);
  border-radius: .75rem;
  padding: 1.5rem;
}
/* 빠른 시작 드롭존 — 전역 모달(#qa-dropzone)과 2026-08-19에 복원된 Home 인라인 카드(.wm-quickactions)
   양쪽 다 같은 .qa-instance 클래스를 드롭 대상으로 쓴다(_QuickActions.cshtml 스크립트가 붙이는 클래스). */
.qa-instance.dz-dragover {
  outline: 1.5px dashed var(--wm-accent);
  outline-offset: -4px;
  background: var(--wm-accent-soft);
}

.wm-action-row {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.wm-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  flex: 1 1 140px;
  min-width: 120px;
  padding: 1.1rem .75rem;
  border: 1px solid var(--wm-line);
  border-radius: .625rem;
  background-color: var(--wm-surface);
  color: var(--wm-ink);
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
}
.wm-action-btn:hover {
  border-color: var(--wm-accent);
  background-color: var(--wm-accent-soft);
}
.wm-action-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.wm-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--wm-accent-soft);
  color: var(--wm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wm-action-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wm-recording-panel {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  border: 1px solid var(--wm-danger-soft);
  background-color: var(--wm-danger-soft);
  border-radius: .625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.wm-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--wm-danger);
  animation: wm-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes wm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-rec-dot { animation: none; }
}

/* 명함 업로드 전 회전 미리보기(실사용 피드백 — 휴대폰 촬영본이 옆으로 저장되는 경우) */
.qa-card-preview-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 260px;
  overflow: hidden;
  border-radius: .625rem;
  background-color: var(--wm-tint);
  padding: .75rem;
}
.qa-card-preview-frame img {
  max-width: 100%;
  max-height: 240px;
  transition: transform .15s ease;
}

/* A <input type="file"> inside a flex row can claim more than its fair share of width in some
   browsers, squeezing the submit button down to near-nothing without min-width:0/flex-shrink:0
   — this is the same fix pattern for every stacked upload form (recording/document uploads on
   Meetings/Details). */
.flex-sm-row > input[type="file"] {
  min-width: 0;
  flex: 1 1 auto;
}
.flex-sm-row > .btn {
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Home — the ChatGPT/Claude-familiar "ask anything" hub (post-login landing)
   ------------------------------------------------------------------------- */

.wm-hero {
  text-align: center;
  padding: 3rem 1rem 2rem;
}
.wm-mark-lg {
  width: 52px;
  height: 52px;
}
.wm-hero h1 {
  font-size: 1.75rem;
}

.wm-ask-box {
  position: relative;
  max-width: 640px;
}

/* 빠른 시작/최근 미팅을 검색창(.wm-ask-box)과 같은 너비로 맞춰 홈 화면 전체가 하나의 세로축에 정렬되게 한다. */
.wm-home-section {
  max-width: 640px;
}

/* Shared centered content column for the pages one tap away from Home (질문하기/미팅/인맥) — keeps
   every page's content sitting on the same visual axis as Home's hero instead of stretching
   edge-to-edge, so navigating between them feels like one connected app, not separate screens. */
.wm-page-col {
  max-width: 760px;
  margin: 0 auto;
}

/* Long-form legal reading (Terms/Privacy) — the rest of the app is UI-density-first, but a
   policy document needs generous line-height and a narrower measure than .wm-page-col's 760px. */
.legal-doc {
  padding: 2rem 0 4rem;
  line-height: 1.7;
}
.legal-doc h1 {
  font-size: 1.6rem;
  margin-bottom: .25rem;
}
.legal-doc .legal-updated {
  color: var(--wm-muted);
  font-size: .875rem;
  margin-bottom: 2rem;
}
.legal-doc h2 {
  font-size: 1.1rem;
  color: var(--wm-accent);
  margin-top: 2rem;
  margin-bottom: .75rem;
}
.legal-doc p, .legal-doc li {
  color: var(--wm-ink);
}
.legal-doc ul, .legal-doc ol {
  padding-left: 1.25rem;
}
.legal-doc li + li {
  margin-top: .5rem;
}

/* Ask reuses Home's centered-hero language (it's one tap from Home) but as a secondary page, not
   the landing screen — smaller vertical padding, no logo mark. */
.wm-page-hero {
  text-align: center;
  padding: 1.5rem 1rem 1.25rem;
}
.wm-page-hero h1 {
  font-size: 1.5rem;
}
/* The ask box is the app's one iconic search-style field and keeps its full pill border —
   the underline treatment above is for ordinary form fields, not this hero element. */
.wm-ask-box .form-control {
  border: 1px solid var(--wm-line);
  border-radius: 100px;
  padding: .9rem 3.25rem .9rem 1.25rem;
  font-size: 1rem;
  background-color: var(--wm-surface);
}
.wm-ask-box .form-control:focus {
  border: 1px solid var(--wm-accent);
  padding: .9rem 3.25rem .9rem 1.25rem;
  background-color: var(--wm-surface);
  box-shadow: 0 0 0 .2rem var(--wm-accent-soft);
}
.wm-ask-submit {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background-color: var(--wm-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wm-ask-submit:hover {
  background-color: var(--wm-accent-hover);
}
.wm-ask-submit svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wm-ask-submit.loading {
  opacity: .75;
  cursor: default;
}
.wm-ask-submit.loading svg {
  animation: wm-ask-spin .8s linear infinite;
}
@keyframes wm-ask-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wm-ask-submit.loading svg { animation: none; }
}

.wm-prompt-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.1rem;
}
.wm-prompt-chip {
  font-size: .8rem;
  font-weight: 600;
  color: var(--wm-muted);
  background-color: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: 100px;
  padding: .4rem .9rem;
  text-decoration: none;
}
.wm-prompt-chip:hover {
  color: var(--wm-ink);
  background-color: var(--wm-accent-soft);
  border-color: var(--wm-line);
}

.wm-recent-list .list-group-item {
  border-color: var(--wm-line);
  background-color: transparent;
  font-size: .9rem;
  padding-top: .55rem;
  padding-bottom: .55rem;
}

.transcript-segment:target {
  background-color: var(--wm-warning-soft);
  scroll-margin-top: 1rem;
}

/* -------------------------------------------------------------------------
   Meetings list (Meetings/Index) — 토스 참고 재설계(2026-09-17), 인맥(Persons/Index)
   화면과 같은 언어로 통일: 그라데이션 히어로, 모노 eyebrow, 세그먼트 탭, 알약형 검색창,
   플랫 tint 카드. .wm-meeting-card와 그 하위 클래스들은 Persons/Details의 "참석 미팅" 탭도
   그대로 재사용하므로(같은 컴포넌트를 의도적으로 공유), 여기서 고치면 그쪽도 같은 톤으로
   자동 반영된다 — 별도 스코프 불필요.
   ------------------------------------------------------------------------- */

.wm-meeting-hero {
  /* .pl-hero와 같은 이유로 그라데이션 배경 제거(2026-09-17) — 탭과의 간격만 남긴다. */
  margin-bottom: 1.5rem;
}
.wm-meeting-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.wm-meeting-hero-head h1 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.wm-meeting-eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wm-accent);
  margin: .3rem 0 0;
}
.wm-meeting-new-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 700;
  padding: .55rem .95rem;
  border-radius: 100px;
  border: none;
  background: linear-gradient(135deg, var(--wm-logo-a), var(--wm-accent) 65%, var(--wm-accent-hover));
  color: #fff;
  white-space: nowrap;
}
.wm-meeting-new-btn:hover {
  color: #fff;
}
.wm-meeting-new-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.wm-meeting-seg {
  display: flex;
  background: var(--wm-tint);
  border-radius: .9rem;
  padding: 4px;
  margin-bottom: 1.5rem;
  margin-top: 0;
  list-style: none;
}
.wm-meeting-seg .nav-link {
  width: 100%;
  text-align: center;
  border: none;
  background: none;
  padding: .6rem 0;
  font-size: .85rem;
  font-weight: 700;
  color: var(--wm-muted);
  border-radius: .7rem;
}
.wm-meeting-seg .nav-link.active {
  background: #fff;
  color: var(--wm-ink);
  box-shadow: 0 1px 3px rgba(28, 29, 34, .08);
}

.wm-meeting-group {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wm-accent);
  margin: 1.6rem 0 .7rem;
}
.wm-meeting-group:first-of-type {
  margin-top: 0;
}

.wm-meeting-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

/* 검색창 — 인맥 화면과 같은 알약형(.pl-search). */
.wm-meeting-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1.5px solid var(--wm-line);
  border-radius: 100px;
  padding: .55rem 1rem;
  color: var(--wm-muted);
  margin-bottom: 1.4rem;
}
.wm-meeting-search svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.wm-meeting-search input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-size: .88rem;
  color: var(--wm-ink);
}
.wm-meeting-search input::placeholder {
  color: var(--wm-muted);
}

/* 흰 배경+테두리+호버 그림자 카드 대신, 인맥 카드와 같은 은은한 tint 배경의 플랫 카드. */
.wm-meeting-card {
  position: relative;
  background-color: var(--wm-tint);
  border-radius: 1rem;
  padding: 1.05rem 1.15rem;
}
.wm-meeting-card.shared {
  background: linear-gradient(135deg, rgba(201, 184, 234, .16), rgba(239, 179, 206, .1));
}

.wm-meeting-card-head {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .4rem;
  /* 우측 상단에 절대 위치로 겹치는 .wm-meeting-delete(삭제 아이콘) 자리를 확보 — 제목이 길어서
     text-truncate가 끝까지 늘어나도 아이콘과 겹치지 않도록. */
  padding-right: 2.2rem;
}
/* 상태 배지를 Bootstrap 기본 pill 대신 모노 태그로 — 이 카드 안에서만 적용, 전역 .badge는
   그대로 둔다. */
.wm-meeting-card-head .badge {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  border-radius: .35rem;
  padding: .16rem .5rem;
}

.wm-meeting-title {
  font-size: .98rem;
  font-weight: 700;
  min-width: 0;
}

.wm-meeting-summary {
  font-size: .84rem;
  color: var(--wm-muted);
  line-height: 1.55;
  margin: 0 0 .8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wm-meeting-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.wm-meeting-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  font-size: .78rem;
  color: var(--wm-muted);
}
.wm-meeting-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.wm-meeting-meta-item svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.8;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.wm-meeting-shared-by {
  font-size: .78rem;
  color: var(--wm-accent);
  font-weight: 700;
}

/* 참석자 아바타 — 원형 그라데이션(.avatar-row/.avatar, Meetings/Details 사이드 카드와 공유)
   대신 이 카드 전용 스퀴클을 새로 둔다(화자 색상과 같은 sp-1~sp-6 팔레트), 살짝 겹쳐서
   자리를 덜 차지하면서도 색으로 바로 구분되게. */
.wm-meeting-avatars {
  display: flex;
  align-items: center;
}
.wm-meeting-avatar {
  width: 26px;
  height: 26px;
  border-radius: .55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .66rem;
  font-weight: 800;
  color: #fff;
  background: var(--sp);
  border: 2px solid var(--wm-tint);
  margin-left: -8px;
}
.wm-meeting-avatar:first-child {
  margin-left: 0;
}
.wm-meeting-avatar-more {
  font-size: .7rem;
  color: var(--wm-muted);
  font-weight: 700;
  margin-left: .4rem;
}

/* Sits above the row's stretched-link overlay (z-index 2) so the delete
   button stays clickable on its own instead of triggering navigation —
   same pattern as the old Meetings/Index markup this replaces. */
.wm-meeting-delete {
  position: absolute;
  top: .85rem;
  right: .85rem;
  z-index: 2;
}

.wm-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  border: 1px dashed var(--wm-line);
  border-radius: .75rem;
  background-color: var(--wm-surface);
}
.wm-empty-state .wm-empty-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background-color: var(--wm-accent-soft);
  color: var(--wm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wm-empty-state .wm-empty-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------------------
   Meetings/Details — meta chips (missing-field prompts, status), top status
   bar (replaces the old separate AI-activity tab), and the always-visible
   회의록 (minutes) block that replaces the old 요약/결정 tabs.
   ------------------------------------------------------------------------- */

.meta-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.chip-add {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--wm-accent);
  border: 1px dashed var(--wm-logo-a);
  background-color: var(--wm-accent-soft);
  border-radius: 100px;
  padding: .35rem .75rem;
}
.chip-add svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.chip-info {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--wm-muted);
  border: 1px solid var(--wm-line);
  background-color: var(--wm-surface);
  border-radius: 100px;
  padding: .35rem .75rem;
}
.chip-jump {
  cursor: pointer;
  color: var(--wm-accent);
  border-color: var(--wm-logo-a);
}

.status-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  background-color: var(--wm-info-soft);
  color: var(--wm-info);
  border-radius: .6rem;
  padding: .65rem 1rem;
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.status-bar.done {
  background-color: var(--wm-success-soft);
  color: var(--wm-success);
}
.status-bar.failed {
  background-color: var(--wm-danger-soft);
  color: var(--wm-danger);
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
  animation: wm-pulse 1.4s ease-in-out infinite;
}
.status-dot.still {
  animation: none;
}

/* 요약 탭 안 섹션 헤더(요약/주제/결정사항/이슈/질문)와 각 항목 카드. .minutes 래퍼 없이 탭
   콘텐츠에 바로 쓴다 — 탭이 이미 콘텐츠 영역을 구분해주므로 별도 래퍼가 불필요해졌다. */
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 1.8rem 0 .7rem;
}
.tab-pane > .section-title:first-child {
  margin-top: 0;
}
.section-title h4 {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wm-accent);
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--wm-accent);
}
/* 주제 항목 제목(h5)은 결정사항/이슈 같은 "섹션" 제목과 달리 실제 회의 내용이라 색상
   강조·밑줄 없이 검정으로, 본문(요약)은 그 아래 들여쓰기로 — 제목 하나에 내용 하나가
   딸린 문서 구조처럼 보이게 한다. */
.topic-title {
  color: var(--wm-ink);
  font-size: .88rem;
  font-weight: 700;
}
.topic-summary {
  color: var(--wm-ink);
  padding-left: 1rem;
}
p.lead {
  font-size: 1rem;
  line-height: 1.75;
  max-width: 800px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.note-item {
  padding: .85rem 0;
  border-bottom: 1px solid var(--wm-line);
}
.note-item:last-child {
  border-bottom: none;
}

/* 요약 탭 상단 — 일시/장소/참석자를 실제 회의노트 헤더처럼 한 박스에 모아 보여준다. */
.note-header {
  background-color: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: .75rem;
  padding: 1rem 1.3rem;
  margin-bottom: 1.5rem;
}
.note-field {
  display: flex;
  gap: .9rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--wm-line);
}
.note-field:last-child {
  border-bottom: none;
}
.note-label {
  flex-shrink: 0;
  width: 56px;
  padding-top: .2rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wm-muted);
}
.note-value {
  padding-top: .2rem;
  font-size: .9rem;
}

/* 참석자 아바타 이니셜 원 — .flat-row의 .ficon 자리에 아이콘 대신 이니셜을 넣는 용도.
   2026-08-17 참석자·화자 관리 재구성에서 로스터 칩+별도 "미해결" 목록으로 나뉘어 있던 걸
   행 하나에 아바타+상태+액션이 다 있는 통합 리스트로 합치며 새로 만들었다. */
.avatar-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--wm-accent-soft);
  color: var(--wm-accent);
  font-size: .8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar-dot.linked {
  background-color: var(--wm-success);
  color: #fff;
}

/* 명함이 사람과 연결된 뒤 나타나는 표시 — 예전엔 기본 Bootstrap .badge.bg-success 그대로라
   앱의 다른 곳(.avatar-dot.linked 등)과 톤이 안 맞았다. 같은 초록 소프트틴트 언어로 통일. */
.linked-indicator {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--wm-success);
  background-color: var(--wm-success-soft);
  border: 1px solid #CDE8DC;
  border-radius: 100px;
  padding: .4rem 1rem;
}
.linked-indicator svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.linked-indicator a {
  color: var(--wm-success);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 명함을 인맥과 연결하는 카드(2026-09-11 — "새사람으로 등록이라 되어있으니 더 헷갈려") —
   기존 인맥에서 찾기 / 새 인맥으로 등록 두 갈래를 분리된 카드로 나눠 무엇을 누르는 건지
   바로 알 수 있게 한다. 미팅 상세(자료 탭)의 명함 미연결 카드에서만 쓴다. */
.connect-box {
  border: 1px solid var(--wm-line);
  border-radius: .7rem;
  padding: .9rem 1rem;
}
.connect-box .ct {
  font-size: .82rem;
  font-weight: 800;
  margin-bottom: .6rem;
}
.connect-opt {
  border: 1px solid var(--wm-line);
  border-radius: .6rem;
  padding: .7rem .8rem;
}
.connect-opt .co-label {
  font-size: .78rem;
  font-weight: 800;
  color: var(--wm-ink);
  margin-bottom: .3rem;
}
.connect-opt .co-desc {
  font-size: .74rem;
  color: var(--wm-muted);
  margin-bottom: .55rem;
}
.connect-box .divider-or {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .6rem 0;
  font-size: .68rem;
  font-weight: 700;
  color: var(--wm-muted);
}
.connect-box .divider-or::before,
.connect-box .divider-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--wm-line);
}

/* 인맥/회사 목록 + 회사 상세의 소속 인물 목록 — "이름과 한 줄 텍스트뿐이라 너무 단순하다" 피드백으로
   2026-08-19 도입(Artifact A안 "리스트 강화형"). 순수 텍스트 list-group-item 대신 아바타 이니셜 +
   회사 칩 + 호버가 있는 행. .avatar-dot(32px, 참석자용)보다 조금 큰 40px 변형이 필요해 새 클래스로
   뺐다 — 기존 크기를 다른 화면에서 계속 쓰고 있어 그대로 키우면 영향 범위가 커짐. */
.contact-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem .4rem;
  border-radius: .7rem;
  transition: background-color .12s ease;
}
.contact-row:hover {
  background-color: var(--wm-tint);
}
.contact-row + .contact-row {
  border-top: 1px solid var(--wm-line);
}
.contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
  font-size: .85rem;
  color: #fff;
  background: linear-gradient(135deg, var(--wm-logo-a), var(--wm-logo-b));
}
.contact-avatar.company {
  background: var(--wm-tint);
  color: var(--wm-muted);
  border: 1px solid var(--wm-line);
}
.contact-body {
  flex: 1;
  min-width: 0;
}
.contact-name {
  font-size: .92rem;
  font-weight: 700;
}
.contact-sub {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--wm-muted);
  margin-top: .15rem;
}
.contact-actions {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   인맥(Persons/Index) 화면 — 토스 참고 재설계(2026-09-17). 아바타를 진한 단색
   스퀴클 블록으로(기존 그라데이션 원형 .contact-avatar 대신), Meetings/Details.cshtml의
   화자 색상과 같은 6색 팔레트(.sp-1~.sp-6)를 그대로 재사용해 앱 전체 톤과 통일감을 준다.
   .contact-row/.contact-avatar는 Companies/Details의 소속 인물 목록과 공유하는 클래스라
   그대로 두고, 이 화면 전용 클래스(pl-, co-, pc- 접두사)를 새로 둬서 다른 화면에 영향이 없게 한다.
   ------------------------------------------------------------------------- */
.pl-hero {
  /* 그라데이션 배경을 넣었다 뺐다 하며 원인을 진단한 끝에 실제로는 잘 보이도록 고쳐졌지만,
     막상 적용해보니 인맥/미팅 두 화면 모두 디자인 톤과 안 맞는다는 피드백으로 배경 자체를
     제거(2026-09-17) — 카드 껍데기(패딩/둥근 모서리)도 배경 없이는 의미가 없어 함께 뺐다.
     탭과의 간격만 남긴다. */
  margin-bottom: 1.5rem;
}
.pl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.pl-head h1 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -.02em;
}
.pl-eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wm-accent);
  margin: .3rem 0 0;
}
.pl-actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}
.pl-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 700;
  padding: .55rem .95rem;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.pl-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.pl-btn.primary {
  background: linear-gradient(135deg, var(--wm-logo-a), var(--wm-accent) 65%, var(--wm-accent-hover));
  color: #fff;
}
.pl-btn.ghost {
  background: rgba(255, 255, 255, .7);
  color: var(--wm-ink);
}
.pl-btn.ghost:hover {
  background: #fff;
}

/* 검증 대기 — 명함 리뷰 카드 스트립. 미팅 상세의 "첨부 파일 미리보기"와 같은 가로 스크롤 패턴. */
.pc-wrap {
  margin-bottom: 1.5rem;
}
.pc-head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .7rem;
  flex-wrap: wrap;
}
.pc-label {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wm-accent);
}
.pc-hint {
  font-size: .76rem;
  color: var(--wm-muted);
}
.pc-strip {
  display: flex;
  gap: .7rem;
  overflow-x: auto;
  padding-bottom: .4rem;
}
.pc-card {
  flex-shrink: 0;
  width: 140px;
  background: var(--wm-tint);
  border-radius: 1rem;
  padding: .7rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.pc-thumb {
  width: 100%;
  height: 72px;
  border-radius: .7rem;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pc-thumb.placeholder.err {
  background: var(--wm-danger-soft);
}
.pc-thumb.placeholder svg {
  width: 20px;
  height: 20px;
  stroke: var(--wm-danger);
  fill: none;
  stroke-width: 1.8;
}
.pc-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--wm-accent);
  animation: pc-pulse-anim 1.2s ease-in-out infinite;
}
@keyframes pc-pulse-anim {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); }
}
.pc-name {
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.25;
}
.pc-card.processing .pc-name {
  color: var(--wm-muted);
  font-weight: 600;
}
.pc-card.failed .pc-name {
  color: var(--wm-danger);
}
.pc-sub {
  font-size: .7rem;
  color: var(--wm-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pc-btn {
  font-size: .72rem;
  font-weight: 700;
  padding: .4rem 0;
  border-radius: .55rem;
  border: none;
  background: var(--wm-accent);
  color: #fff;
  cursor: pointer;
  width: 100%;
}
.pc-actions {
  display: flex;
  gap: .35rem;
}
.pc-actions .pc-btn {
  flex: 1;
  font-size: .68rem;
}
.pc-btn.ghost {
  background: #fff;
  color: var(--wm-ink);
  border: 1px solid var(--wm-line);
}
.pc-btn.danger {
  background: #fff;
  color: var(--wm-danger);
  border: 1px solid #F3D3CC;
}

/* 세그먼트 탭(사람들/회사) — Bootstrap의 nav-tabs 구조/JS는 그대로 쓰고 시각만 교체. */
.pl-seg {
  display: flex;
  background: var(--wm-tint);
  border-radius: .9rem;
  padding: 4px;
  margin-bottom: 1.5rem;
  margin-top: 0;
  list-style: none;
}
.pl-seg .nav-link {
  width: 100%;
  text-align: center;
  border: none;
  background: none;
  padding: .6rem 0;
  font-size: .85rem;
  font-weight: 700;
  color: var(--wm-muted);
  border-radius: .7rem;
}
.pl-seg .nav-link.active {
  background: #fff;
  color: var(--wm-ink);
  box-shadow: 0 1px 3px rgba(28, 29, 34, .08);
}

/* 검색창 — 사람들/회사 탭 공용 */
.pl-search {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1.5px solid var(--wm-line);
  border-radius: 100px;
  padding: .15rem .3rem .15rem 1rem;
  margin-bottom: 1rem;
}
.pl-search svg {
  width: 16px;
  height: 16px;
  stroke: var(--wm-muted);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}
.pl-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: .88rem;
  padding: .6rem 0;
  background: none;
  color: var(--wm-ink);
}
.pl-search input::placeholder {
  color: var(--wm-muted);
}
.pl-search .pl-count {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  color: var(--wm-muted);
  background: var(--wm-tint);
  border-radius: 100px;
  padding: .35rem .7rem;
  flex-shrink: 0;
}

/* 회사 필터 칩 */
.pl-chips {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  padding-bottom: .9rem;
}
.pl-chips::-webkit-scrollbar {
  display: none;
}
.pl-chip {
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 700;
  padding: .4rem .85rem;
  border-radius: 100px;
  border: 1px solid var(--wm-line);
  color: var(--wm-muted);
  background: #fff;
  white-space: nowrap;
  cursor: pointer;
}
.pl-chip.active {
  background: var(--wm-ink);
  border-color: var(--wm-ink);
  color: #fff;
}

/* 사람 목록 — 초성 스티키 헤더 + 우측 인덱스 바로가기 */
.pl-area {
  display: flex;
  gap: .5rem;
}
.pl-list {
  flex: 1;
  min-width: 0;
}
.pl-chdr {
  position: sticky;
  top: 0;
  background: var(--wm-bg);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 800;
  color: var(--wm-accent);
  padding: .5rem 0 .35rem;
  letter-spacing: .04em;
  z-index: 1;
}
.pl-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem 0;
}
.pl-row + .pl-row {
  border-top: 1px solid var(--wm-tint);
}
.pl-avatar {
  width: 44px;
  height: 44px;
  border-radius: .9rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .95rem;
  color: #fff;
  background: var(--sp);
}
.pl-body {
  flex: 1;
  min-width: 0;
}
.pl-name {
  font-size: .96rem;
  font-weight: 700;
  margin-bottom: .1rem;
}
.pl-sub {
  font-size: .8rem;
  color: var(--wm-muted);
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-sub .pl-company {
  color: var(--wm-ink);
  font-weight: 600;
}
.pl-sub .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--wm-line);
  flex-shrink: 0;
}
.pl-del {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wm-line);
  opacity: 0;
  transition: opacity .15s;
  flex-shrink: 0;
}
.pl-row:hover .pl-del {
  opacity: 1;
}
.pl-del:hover {
  color: var(--wm-danger);
  background: var(--wm-danger-soft);
}
.pl-del svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
@media (hover: none) {
  .pl-del {
    opacity: 1;
  }
}

.pl-idx {
  width: 18px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: .5rem 0;
  position: sticky;
  top: 1rem;
  align-self: flex-start;
  max-height: 70vh;
}
.pl-idx button {
  border: none;
  background: none;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  color: var(--wm-line);
  cursor: default;
  padding: 1px 0;
  line-height: 1.4;
  width: 100%;
}
.pl-idx button.on {
  color: var(--wm-accent);
  cursor: pointer;
}
.pl-idx button.on:hover {
  color: var(--wm-accent-hover);
}

/* 회사 탭 — 검색 + 정렬 + 타일 그리드 */
.co-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .8rem;
  gap: .6rem;
  flex-wrap: wrap;
}
.co-sort {
  display: flex;
  gap: .4rem;
}
.co-sort button {
  font-size: .76rem;
  font-weight: 700;
  color: var(--wm-muted);
  background: var(--wm-tint);
  border: none;
  border-radius: 100px;
  padding: .35rem .75rem;
  cursor: pointer;
}
.co-sort button.active {
  background: var(--wm-ink);
  color: #fff;
}
.co-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem;
}
.co-tile {
  background: var(--wm-tint);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  position: relative;
}
.co-tile a.co-tile-link {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.co-mark {
  width: 40px;
  height: 40px;
  border-radius: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .92rem;
  color: #fff;
  background: var(--sp);
}
.co-name {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
}
.co-meta {
  font-size: .74rem;
  color: var(--wm-muted);
}
.co-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}
.co-count {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  color: var(--wm-accent);
}
.co-del {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wm-muted);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.co-del:hover {
  color: var(--wm-danger);
  background: #fff;
}
.co-del svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
@media (max-width: 560px) {
  .co-grid {
    grid-template-columns: 1fr;
  }
  .pl-idx {
    display: none;
  }
}

/* Companies/Details 프로필 헤더 — "인맥과 회사, 회사별 사람목록 디자인이 너무 단순해" 피드백에서
   회사만 C안(프로필 대시보드형)으로 승격(2026-08-19). .contact-row/.contact-avatar와 같은 언어를
   쓰되 헤더는 더 크게, 은은한 그라데이션 배경으로 미팅 상세의 상태 배너와 비슷한 무게감을 준다. */
.company-hero {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.4rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--wm-accent-soft), var(--wm-surface) 65%);
  border: 1px solid var(--wm-line);
  margin-bottom: 1.2rem;
}
.company-hero-logo {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background-color: var(--wm-surface);
  border: 1px solid var(--wm-line);
  color: var(--wm-accent);
  font-size: 1.3rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.company-hero-body {
  flex: 1;
  min-width: 0;
}
.company-hero-body h1 {
  font-size: 1.3rem;
  margin-bottom: .35rem;
}
.company-hero-actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}

.company-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
  margin-bottom: 1.5rem;
}
.company-stat {
  border: 1px solid var(--wm-line);
  border-radius: .8rem;
  padding: .9rem 1rem;
  background-color: var(--wm-surface);
}
.company-stat .num {
  font-size: 1.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.company-stat .lbl {
  font-size: .75rem;
  color: var(--wm-muted);
  margin-top: .1rem;
}
@media (max-width: 560px) {
  .company-stats { grid-template-columns: 1fr; }
  .company-hero { flex-wrap: wrap; }
}

/* -------------------------------------------------------------------------
   Persons/Details — 프로필 헤더 + 탭(액션 아이템/명함). 2026-08-17 시안 C안
   (Artifact 3안 중 사용자가 선택) 실제 반영 — 지금까지 손 안 댄 #18 스캐폴드
   ("Business cards"/"Action items" 영문 테이블)를 대체한다.
   ------------------------------------------------------------------------- */

.back-link {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--wm-muted);
  text-decoration: none;
  margin-bottom: 1.2rem;
}
.back-link:hover {
  color: var(--wm-accent);
}

.p-header {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-bottom: 1.6rem;
}
.p-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wm-logo-a), var(--wm-logo-b));
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.p-name-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}
.p-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.p-actions .edit-link.danger:hover {
  color: var(--wm-danger);
}
.p-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .87rem;
  color: var(--wm-muted);
}
.p-meta-line .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--wm-muted);
  flex-shrink: 0;
}
.p-company-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--wm-accent);
  background-color: var(--wm-accent-soft);
  border-radius: 100px;
  padding: .25rem .7rem .25rem .5rem;
  text-decoration: none;
}
.p-company-chip .cico {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-color: var(--wm-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.p-company-chip svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 전화하기/연락처 저장 — 인물 상세 상단의 즉시 실행 액션(2026-08-17), 이름 옆 수정/삭제 텍스트
   링크와 달리 실제 버튼으로 눈에 띄게 둔다. */
.p-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.4rem;
}
.p-primary-actions svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -2px;
  margin-right: .35rem;
}

/* 마이페이지 — "외부 AI 사용" 진입 카드 (2026-08-19, 별도 화면인 /MyPage/AiAccounts로 이동). */
.mypage-ai-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, var(--wm-accent-soft), var(--wm-surface));
  border: 1px solid var(--wm-line);
  border-radius: .875rem;
  padding: 1.2rem 1.3rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mypage-ai-card + .mypage-ai-card {
  margin-top: .75rem;
}
.mp-section-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wm-muted);
  margin: 1.6rem 0 .6rem;
}
.mp-section-label:first-of-type {
  margin-top: 1.6rem;
}
.mypage-ai-card:hover {
  border-color: var(--wm-accent);
  box-shadow: 0 1px 3px rgba(28, 29, 34, .04), 0 8px 20px rgba(28, 29, 34, .06);
  color: inherit;
}
.mypage-ai-icon {
  width: 44px;
  height: 44px;
  border-radius: .7rem;
  background-color: var(--wm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mypage-ai-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mypage-ai-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.mypage-ai-title {
  font-size: .95rem;
  font-weight: 700;
}
.mypage-ai-desc {
  font-size: .8rem;
  color: var(--wm-muted);
}
.mypage-ai-status {
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 100px;
  background-color: var(--wm-tint);
  color: var(--wm-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.mypage-ai-status.on {
  background-color: var(--wm-success-soft);
  color: var(--wm-success);
}
.mypage-ai-card .chev {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--wm-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.p-tabs {
  display: flex;
  gap: 1.4rem;
  border-bottom: 1px solid var(--wm-line);
  margin-bottom: 1.2rem;
}
.p-tabs .tab {
  font-size: .84rem;
  font-weight: 600;
  color: var(--wm-muted);
  padding-bottom: .55rem;
  border-bottom: 2px solid transparent;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.p-tabs .tab.active {
  color: var(--wm-ink);
  border-bottom-color: var(--wm-accent);
  font-weight: 700;
}

.speaker-hint {
  display: block;
  margin-top: .6rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--wm-info);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}

/* 녹음/파일 카드형 행 (예전 <table>을 대체) */
.row-list {
  display: flex;
  flex-direction: column;
}
.flat-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--wm-line);
}
.flat-row:last-child {
  border-bottom: none;
}
.flat-row .ficon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--wm-tint);
  color: var(--wm-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.flat-row .ficon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flat-row .fbody {
  flex: 1;
  min-width: 0;
}
/* 명함 실물 이미지 썸네일(#38) — 명함은 정사각형이 아니라 가로로 넓은 카드라 16:10 비율을 쓴다. */
.card-thumb {
  display: block;
  width: 96px;
  height: 60px;
  border-radius: .4rem;
  overflow: hidden;
  background-color: var(--wm-tint);
  flex-shrink: 0;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 명함 검토 모달의 큰 미리보기 — 목록의 96x60 썸네일보다 훨씬 크게, 같은 16:10 비율. */
.card-thumb-lg {
  width: 260px;
  height: 160px;
  max-width: 100%;
}

/* 명함 검토 모달 1단계 — 명함 사진 + 뒷면 추가 버튼, "업로드 폼이 그대로 노출되는건 별로야"
   피드백으로 기본 파일 입력 대신 아이콘+라벨의 pill 버튼으로 감쌌다(2026-08-18). */
.review-photo-row {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
}
.review-back-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .76rem;
  font-weight: 700;
  color: var(--wm-muted);
  background-color: var(--wm-tint);
  border: 1px solid var(--wm-line);
  border-radius: 100px;
  padding: .45rem .85rem;
  cursor: pointer;
  white-space: nowrap;
}
.review-back-btn:hover {
  color: var(--wm-accent);
  border-color: var(--wm-accent);
}
.review-back-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* 필드를 기본 정보/연락처/기타 세 그룹으로 나눠 한눈에 훑기 쉽게 한다. */
.review-field-group-label {
  margin-bottom: .5rem;
}

/* 저장을 눈에 띄는 주 동작으로, 삭제는 그 아래 조용한 텍스트 링크로 — "버튼 배치"가 어색하다는
   피드백에 따라 둘의 시각적 무게를 분리했다. */
.review-step1-actions {
  display: flex;
}
.review-step1-actions .btn {
  flex: 1;
}
.review-step1-delete {
  display: flex;
  justify-content: flex-end;
  margin-top: .6rem;
}

/* 명함 검토 모달 — 저장 → 유사 인맥 검색 여부 → 최신화 여부, 4단계 스테퍼(2026-08-18) */
.review-step-dots {
  display: flex;
  gap: .3rem;
  margin-left: auto;
  margin-right: .75rem;
}
.rdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--wm-line);
  transition: all .15s ease;
}
.rdot.on {
  width: 16px;
  border-radius: 4px;
  background-color: var(--wm-accent);
}
.review-step { display: none; }
.review-step.active { display: block; }

.review-choice-card {
  border: 1.5px solid var(--wm-line);
  border-radius: .7rem;
  padding: 1.25rem;
  text-align: center;
}
.review-choice-card .rc-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--wm-accent-soft);
  color: var(--wm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .7rem;
}
.review-choice-card .rc-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.review-choice-card .rc-title {
  font-size: .88rem;
  font-weight: 700;
  margin: 0 0 .3rem;
}
.review-choice-card .rc-sub {
  font-size: .78rem;
  color: var(--wm-muted);
  margin: 0 0 1rem;
}

.review-cand-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  border: 1.5px solid var(--wm-line);
  border-radius: .6rem;
  margin-bottom: .5rem;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.review-cand-row:hover {
  border-color: var(--wm-accent);
  background-color: var(--wm-accent-soft);
}
.review-cand-row.self {
  border-color: var(--wm-accent);
  background-color: var(--wm-accent-soft);
}
.review-cand-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--wm-tint);
  color: var(--wm-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  flex-shrink: 0;
}
.review-cand-score {
  font-size: .68rem;
  font-weight: 800;
  background-color: var(--wm-success-soft);
  color: var(--wm-success);
  padding: .18rem .45rem;
  border-radius: 100px;
  flex-shrink: 0;
}

.review-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--wm-line);
  border-radius: .6rem;
}
.review-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.review-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.review-switch span {
  position: absolute;
  inset: 0;
  background-color: var(--wm-line);
  border-radius: 100px;
  transition: background-color .15s ease;
}
.review-switch span::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: left .15s ease;
}
.review-switch input:checked + span {
  background-color: var(--wm-accent);
}
.review-switch input:checked + span::after {
  left: 20px;
}
.flat-row .ftitle {
  font-size: .88rem;
  font-weight: 700;
}
.flat-row .fsub {
  font-size: .78rem;
  color: var(--wm-muted);
}
.flat-row .factions {
  display: flex;
  gap: .4rem;
  flex-shrink: 0;
}
.icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--wm-line);
  background-color: var(--wm-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wm-muted);
}
.icon-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn.danger {
  background-color: var(--wm-danger-soft);
  border-color: var(--wm-danger-soft);
  color: var(--wm-danger);
}
.icon-btn.danger:hover {
  background-color: var(--wm-danger);
  border-color: var(--wm-danger);
  color: #fff;
}
.wm-speaker-connect-menu,
.wm-speaker-more-menu {
  min-width: 260px;
}

.edit-link {
  font-size: .74rem;
  font-weight: 700;
  color: var(--wm-accent);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* .p-actions had its own scoped hover-only rule for this — widened here so a quiet "삭제" link
   reads as a danger action wherever it's used, not just inside .p-actions. */
.edit-link.danger {
  color: var(--wm-muted);
}
.edit-link.danger:hover {
  color: var(--wm-danger);
}

.evidence-play-btn {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--wm-accent);
  background-color: var(--wm-accent-soft);
  border: none;
  border-radius: .3rem;
  padding: .2rem .55rem .2rem .45rem;
}
.evidence-play-btn svg {
  width: 9px;
  height: 9px;
  fill: currentColor;
}

/* Modal buttons — Bootstrap's default .modal-content isn't reskinned elsewhere in this file,
   so give it the same surface/radius/shadow language as .wm-auth-card and the rest of the app. */
.modal-content {
  border: 1px solid var(--wm-line);
  border-radius: .875rem;
  box-shadow: 0 20px 50px rgba(28, 29, 34, .18);
}
.modal-header, .modal-footer {
  border-color: var(--wm-line);
}
.btn-cancel {
  background: none;
  border: none;
  color: var(--wm-muted);
  font-weight: 700;
  font-size: .86rem;
  padding: .5rem 1rem;
}

/* -------------------------------------------------------------------------
   Meetings/Details v2 — 2단 대시보드(본문 요약/녹취록 서브탭 + 참석자·자료 사이드
   카드), "관리" 뒤로 뺀 상세 레이어(참석자·화자/자료 모달), 모바일에서는 2단이
   3탭(요약/녹취록/참석자·자료)으로 접힘. 2026-08-16 승인된 미팅상세 재구성 v2
   (D/D-2/E/F안) 실제 반영 — CSS 클래스명은 그 시안의 명명을 그대로 따른다.
   ------------------------------------------------------------------------- */

.m-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}
.m-title-row h1 {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 768px) {
  .m-title-row h1 {
    font-size: 1.4rem;
  }
}
.m-actions {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.m-actions .m-link {
  font-size: .78rem;
  font-weight: 700;
  color: var(--wm-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  padding: 0;
}
.m-actions .m-link.danger:hover {
  color: var(--wm-danger);
}

.m-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--wm-muted);
  margin-bottom: 1rem;
}
.m-meta-line .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--wm-muted);
  flex-shrink: 0;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .76rem;
  font-weight: 700;
  padding: .25rem .7rem;
  border-radius: 100px;
}
.status-pill.processing {
  background-color: var(--wm-info-soft);
  color: var(--wm-info);
}
.status-pill.failed {
  background-color: var(--wm-danger-soft);
  color: var(--wm-danger);
}
.status-pill.done {
  background-color: var(--wm-success-soft);
  color: var(--wm-success);
}
.status-pill .status-dot {
  width: 6px;
  height: 6px;
}

/* 2단 대시보드 — 참석자·자료 사이드는 300px 고정, 본문(요약/녹취록)은 나머지 전부.
   이전엔 사이드를 Bootstrap의 .tab-pane/.fade(기본 display:none, 트리거를 눌러야만 JS가
   .active/.show를 붙여줌)로 만들고 데스크톱에서 !important로 강제로 뒤집었었다 — 그 우회가
   실제로 문제였는지 확신할 수 없어, 아예 사이드를 "탭 콘텐츠"가 아닌 평범한 flex 자식으로
   재구성했다. 데스크톱은 grid/tab 관련 규칙이 전혀 없는 게 곧 "항상 보임"이고, 모바일에서만
   .active 클래스 하나로 보이고/숨는다(요약·녹취록 서브탭과 같은 JS가 그대로 이 클래스를
   붙였다 뗐다 하므로 별도 JS 변경 없이 동작). */
.two-col {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.two-col-main {
  /* flex-basis:0(=1 1 0%)이 핵심 — flex-basis:auto였다면 이 컬럼의 "초기 크기"를 안의
     내용(특히 줄바꿈 없는 요약 문단)이 원하는 폭으로 먼저 계산한 뒤에야 줄어들 수 있어서,
     그 초기 계산 자체가 이미 화면보다 넓으면 넘칠 수 있었다. 0%로 시작하면 내용 크기와
     무관하게 남는 공간만큼만 자라나므로 이 문제 자체가 애초에 발생하지 않는다. */
  flex: 1 1 0%;
  min-width: 0;
}
.two-col-side {
  flex: 0 0 300px;
  min-width: 0;
}
@media (max-width: 900px) {
  .two-col {
    flex-direction: column;
  }
  .two-col-main,
  .two-col-side {
    flex-basis: auto;
  }
  .two-col-side {
    display: none;
  }
  .two-col-side.active {
    display: block;
  }
}
@media (min-width: 901px) {
  .subtabs .subtab[data-bs-target="#sidebar-pane"] {
    display: none;
  }
}

.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  border-bottom: 1px solid var(--wm-line);
  margin-bottom: 1.2rem;
}
.subtabs .subtab {
  font-size: .84rem;
  font-weight: 600;
  color: var(--wm-muted);
  padding-bottom: .55rem;
  border-bottom: 2px solid transparent;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.subtabs .subtab.active {
  color: var(--wm-ink);
  border-bottom-color: var(--wm-accent);
  font-weight: 700;
}

.mini-card {
  border: 1px solid var(--wm-line);
  border-radius: .75rem;
  padding: 1rem 1.1rem;
  margin-bottom: .8rem;
  background-color: var(--wm-surface);
}
.mini-card .mc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
}
.mini-card h4 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wm-muted);
  margin: 0;
}
.mini-card .mc-link {
  font-size: .74rem;
  font-weight: 700;
  color: var(--wm-accent);
  background: none;
  border: none;
  padding: 0;
}
.mini-card .mc-sub {
  font-size: .82rem;
  color: var(--wm-muted);
  margin-bottom: .7rem;
}

.avatar-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--wm-accent-soft);
  color: var(--wm-accent);
  font-size: .68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar.linked {
  background-color: var(--wm-success);
  color: #fff;
}

/* 업로드 드롭존 — 파일 인풋+버튼 한 줄 대신 실제 드롭존처럼 보이는 시각적 컨테이너.
   내부의 실제 <input type=file>/버튼/XHR 진행률 로직은 이전과 완전히 동일하다. */
.dropzone {
  border: 1.5px dashed var(--wm-line);
  border-radius: .75rem;
  padding: 1.4rem 1.1rem;
  text-align: center;
  background-color: var(--wm-tint);
  margin-bottom: 1rem;
}
/* 명함 촬영 드롭존 — 예전엔 38px짜리 아이콘만 클릭 가능해 모바일에서 누르기 어려웠다(실사용
   피드백, 2026-09-10). label[for]로 감싸 아이콘/제목/설명 전체를 하나의 큰 탭 영역으로 만든다. */
.dropzone .dz-clickable {
  display: block;
  cursor: pointer;
}
.dropzone .dz-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--wm-accent-soft);
  color: var(--wm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .6rem;
}
.dropzone .dz-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dropzone .dz-title {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .15rem;
}
.dropzone .dz-sub {
  font-size: .76rem;
  color: var(--wm-muted);
}
.dropzone.dz-uploading {
  border-color: var(--wm-accent);
  background-color: var(--wm-accent-soft);
  border-style: solid;
}
.dz-progress-track {
  height: 5px;
  background-color: #E4DAF5;
  border-radius: 100px;
  margin: .8rem auto 0;
  max-width: 260px;
  overflow: hidden;
}
.dz-progress-fill {
  height: 100%;
  width: 0%;
  background-color: var(--wm-accent);
  border-radius: 100px;
  transition: width .2s ease;
}
.dz-warn {
  font-size: .74rem;
  color: var(--wm-accent-hover);
  font-weight: 600;
  margin-top: .5rem;
}

/* 결정·액션아이템·이슈·질문 공용 체크리스트 시각 언어 — 점(결정/이슈/질문)과
   동그라미(액션 아이템, 완료 시 채워짐)로 종류를 구분한다. */
.checklist {
  display: flex;
  flex-direction: column;
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--wm-line);
}
.check-row:last-child {
  border-bottom: none;
}
.dot-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--wm-accent);
  margin-top: .55rem;
  flex-shrink: 0;
}
.check-row.action .dot-mark {
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--wm-line);
  background-color: transparent;
  margin-top: .2rem;
}
.check-row.action.done .dot-mark {
  background-color: var(--wm-success);
  border-color: var(--wm-success);
}
.check-body {
  flex: 1;
  min-width: 0;
}
.check-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .4rem;
}
.owner-pill {
  font-size: .74rem;
  font-weight: 700;
  color: var(--wm-accent);
  background-color: var(--wm-accent-soft);
  border-radius: 100px;
  padding: .1rem .6rem;
}

/* 녹취록 서브탭 — 세그먼트별 대화 목록. */
.speaker-summary-line {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: var(--wm-muted);
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.speaker-summary-line a, .speaker-summary-line button.linklike {
  color: var(--wm-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}
/* 녹취록 — 클로바노트 참고 채팅형 개편(2026-08-19): 상단 재생바 + 화자별 색상 아바타로 발화를
   묶어 보여준다(연속된 같은 화자 발화 = 한 그룹). */
.transcript-player {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem .9rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--wm-line);
  border-radius: .75rem;
  background-color: var(--wm-tint);
}
.tp-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: var(--wm-accent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tp-toggle:hover {
  background-color: var(--wm-accent-hover);
}
.tp-toggle svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}
.tp-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.tp-time {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--wm-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  width: 32px;
}
.tp-time:last-child {
  text-align: right;
}
.tp-range {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--wm-line);
  accent-color: var(--wm-accent);
  cursor: pointer;
}
.tp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--wm-accent);
  cursor: pointer;
  margin-top: -4px;
}
.tp-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background-color: var(--wm-accent);
  cursor: pointer;
}
.tp-speed {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  color: var(--wm-muted);
  border: 1px solid var(--wm-line);
  border-radius: 100px;
  padding: .25rem .6rem;
  background-color: var(--wm-surface);
  flex-shrink: 0;
  cursor: pointer;
}
.tp-speed:hover {
  border-color: var(--wm-accent);
  color: var(--wm-accent);
}
.tp-downloads {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}

.transcript-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-height: 560px;
  overflow-y: auto;
}
.t-group {
  display: flex;
  gap: .65rem;
}
.t-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--sp);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.t-group-body {
  flex: 1;
  min-width: 0;
}
.t-speaker {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .01em;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: .3rem;
  color: var(--sp);
  cursor: pointer;
}
.t-speaker:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.t-speaker.unlinked {
  color: var(--wm-muted);
}
.t-line {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .2rem .4rem;
  margin: 0 -.4rem;
  border-radius: .5rem;
  max-width: 800px;
}
.t-line.playing {
  background-color: var(--wm-accent-soft);
}
/* 2026-09-11 프로토타입 — 임베딩 유사도 기반 문단 구분(TranscriptParagraphSegmenter). 같은
   화자 안에서 화제가 바뀌는 지점에 옅은 상단 구분선 + 여백만 살짝 준다(하드한 구획선은 아님). */
.t-line.para-break {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px dashed var(--wm-line);
}
.t-play {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--wm-line);
  background-color: var(--wm-surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .1rem;
  padding: 0;
  cursor: pointer;
}
.t-line.playing .t-play {
  background-color: var(--wm-accent);
  border-color: var(--wm-accent);
}
.t-play svg {
  width: 8px;
  height: 8px;
  fill: var(--wm-muted);
}
.t-line.playing .t-play svg {
  fill: #fff;
}
.t-time {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--wm-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  padding-top: .15rem;
  width: 32px;
}
.t-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: .88rem;
  line-height: 1.6;
}

.sp-1 { --sp: #5B4396; }
.sp-2 { --sp: #B0527A; }
.sp-3 { --sp: #3E8A73; }
.sp-4 { --sp: #B7791F; }
.sp-5 { --sp: #3B6FA0; }
.sp-6 { --sp: #8A5A3B; }

/* -------------------------------------------------------------------------
   미팅 상세 — "회의록 문서형" 개편(2026-09-17, Artifact A안 채택). 랜딩페이지에서 쓴
   모노스페이스 그래픽 언어(섹션 아이바우 라벨/번호/타임코드/태그)를 미팅 상세의 핵심
   콘텐츠(헤더/탭/요약·주제·결정사항·이슈·질문/해야할일)로 확장한다.
   .checklist/.check-row/.section-title/.owner-pill/.badge 등은 Persons/Companies/
   SharedMeetings와 공유하는 클래스라, 전역이 아니라 .meeting-note 스코프 안에서만
   오버라이드해 다른 화면에는 영향이 없게 한다 — 참석자·자료 탭은 상호작용이 많아
   기존 row-list/flat-row 구조를 그대로 두고 섹션 라벨 타이포만 같이 바뀐다.
   ------------------------------------------------------------------------- */
.meeting-note .m-meta-line {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .01em;
}
.meeting-note .status-pill {
  font-family: var(--mono);
  background: none;
  padding: 0;
  border-radius: 0;
}
.meeting-note .status-pill.processing { color: var(--wm-info); }
.meeting-note .status-pill.failed { color: var(--wm-danger); }
.meeting-note .status-pill.done { color: var(--wm-success); }

.meeting-note .subtabs .subtab {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.meeting-note .subtabs .subtab .n-badge {
  color: var(--wm-line);
  margin-left: .15rem;
}
.meeting-note .subtabs .subtab.active .n-badge {
  color: var(--wm-accent);
}

.meeting-note .section-title {
  margin-top: 2rem;
}
.meeting-note .tab-pane > .section-title:first-child {
  margin-top: 0;
}
.meeting-note .section-title h4 {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wm-accent);
}

.meeting-note #summary-view {
  border-left: 3px solid var(--wm-logo-a);
  padding-left: 1.1rem;
  font-size: 1.02rem;
  line-height: 1.75;
}

.meeting-note .topic-row {
  display: flex;
  gap: .9rem;
}
.meeting-note .topic-num {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
  color: var(--wm-line);
  flex-shrink: 0;
  width: 1.6rem;
  padding-top: .1rem;
}

.meeting-note .check-row {
  padding: .95rem 0;
}
.meeting-note .badge {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  border-radius: .3rem;
  padding: .18rem .5rem;
}
.meeting-note .owner-pill {
  font-family: var(--mono);
  font-size: .68rem;
  background-color: var(--wm-accent);
  color: #fff;
}

/* 요약 탭 상단 첨부 파일 미리보기(2026-09-17) — 자료 탭까지 안 가도 이 미팅에 뭐가 붙어있는지
   바로 보이게, 사진은 실제 썸네일로 가로 스크롤 — DownloadDocument가 이미지에는
   Content-Disposition을 안 붙이므로(다운로드 아님) <img src>로 바로 렌더링된다. */
.attach-preview {
  margin-bottom: 1.6rem;
}
.attach-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
}
.attach-preview-label {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wm-accent);
}
.attach-strip {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding-bottom: .3rem;
}
.attach-thumb {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: .6rem;
  overflow: hidden;
  border: 1px solid var(--wm-line);
  display: block;
}
.attach-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.attach-chip {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 96px;
  height: 96px;
  border-radius: .6rem;
  border: 1px solid var(--wm-line);
  background-color: var(--wm-tint);
  color: var(--wm-muted);
  text-align: center;
  padding: .5rem;
  overflow: hidden;
}
.attach-chip svg {
  width: 20px;
  height: 20px;
  stroke: var(--wm-muted);
  fill: none;
  stroke-width: 1.6;
  flex-shrink: 0;
}
.attach-chip span {
  font-size: .66rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   Ask (질문하기) — now the single merged entry point for search + Q&A.
   ------------------------------------------------------------------------- */

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--wm-muted);
  border: 1px solid var(--wm-line);
  border-radius: 100px;
  padding: .35rem .8rem;
  background-color: var(--wm-surface);
}
.filter-toggle svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Chat thread (2026-09-07) — replaced the old single card-and-list answer layout with a running
   Q&A thread, styled like the general-purpose AI chat pattern (user bubble right, answer bubble
   left, an animated "생각중" indicator while the RAG call is in flight). */
.thread-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.thread-count {
  font-size: .78rem;
  color: var(--wm-muted);
}
.clear-link {
  font-size: .78rem;
  color: var(--wm-muted);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
.clear-link:hover {
  color: var(--wm-accent);
}

.ask-thread {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding-bottom: 1rem;
}
.turn {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.msg-user {
  align-self: flex-end;
  max-width: 80%;
  background-color: var(--wm-accent);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
  padding: .65rem 1rem;
  font-size: .9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg-answer {
  align-self: flex-start;
  width: 100%;
}
.bubble {
  background-color: var(--wm-tint);
  border-radius: 4px 16px 16px 16px;
  padding: .95rem 1.1rem;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--wm-ink);
  white-space: pre-wrap;
  max-width: 800px;
  overflow-wrap: anywhere;
}
.bubble-error {
  background-color: var(--wm-danger-soft);
  color: var(--wm-danger);
}
.bubble-empty {
  background-color: var(--wm-tint);
  color: var(--wm-muted);
}

/* "생각중" indicator — three dots pulsing in sequence while the fetch() to Ask/Turn is in flight. */
.bubble.thinking {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .95rem 1.2rem;
}
.bubble.thinking span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--wm-muted);
  opacity: .35;
  animation: wm-think 1.1s ease-in-out infinite;
}
.bubble.thinking span:nth-child(2) { animation-delay: .15s; }
.bubble.thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes wm-think {
  0%, 80%, 100% { opacity: .35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .bubble.thinking span { animation: none; opacity: .7; }
}

.cite-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .6rem;
}
.cite-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: var(--wm-ink);
  background-color: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: 100px;
  padding: .32rem .7rem .32rem .55rem;
  text-decoration: none;
  max-width: 100%;
}
.cite-chip:hover {
  border-color: var(--wm-accent);
  color: var(--wm-accent);
}
.cite-chip svg {
  width: 12px;
  height: 12px;
  stroke: var(--wm-muted);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.cite-chip:hover svg {
  stroke: var(--wm-accent);
}
.cite-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.cite-chip-type {
  font-size: .68rem;
  font-weight: 700;
  color: var(--wm-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Meetings/Details — live-update banner (SignalR) and the collapsible AI
   activity detail table that replaced the old dedicated tab.
   ------------------------------------------------------------------------- */

.live-update-banner {
  display: flex;
  align-items: center;
  gap: .6rem;
  background-color: var(--wm-accent-soft);
  color: var(--wm-accent);
  border-radius: .6rem;
  padding: .6rem 1rem;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.live-update-banner button {
  margin-left: auto;
  flex-shrink: 0;
  background-color: var(--wm-accent);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: .35rem .9rem;
  font-size: .78rem;
  font-weight: 700;
}

.wm-offline-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: 92%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
.wm-offline-banner button {
  flex-shrink: 0;
}

.ai-activity-toggle {
  font-size: .78rem;
  font-weight: 700;
  color: var(--wm-muted);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-bottom: .75rem;
}

/* -------------------------------------------------------------------------
   사용량(Usage) 페이지(2026-09-16 재개편) — 지금의 요금제 모델(월간 총 분량 하나)에 맞춰
   단일 지표로 단순화, 모든 사용자가 완전히 같은 화면을 본다(관리자 전용 섹션은
   /Admin/Users로 이동).
   ------------------------------------------------------------------------- */
.usage-plan-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--wm-accent-soft);
  border-radius: .7rem;
  padding: .8rem 1.1rem;
  margin-bottom: 1.3rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.usage-plan-name {
  font-weight: 800;
  color: var(--wm-accent);
}
.usage-plan-price {
  color: var(--wm-muted);
  font-size: .88rem;
}
.usage-plan-link {
  font-size: .82rem;
  font-weight: 700;
  color: var(--wm-accent);
  text-decoration: none;
}

.usage-quota-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
  .usage-quota-grid {
    grid-template-columns: 1fr;
  }
}
.usage-quota-card {
  border: 1px solid var(--wm-line);
  border-radius: .875rem;
  padding: 1.1rem 1.2rem;
}
.usage-quota-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
}
.usage-quota-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--wm-muted);
}
.usage-quota-pct {
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.usage-quota-pct.warn {
  color: var(--wm-warning);
}
.usage-quota-pct.over {
  color: var(--wm-danger);
}
.usage-quota-bar-track {
  height: 8px;
  border-radius: 100px;
  background-color: var(--wm-tint);
  overflow: hidden;
  margin-bottom: .5rem;
}
.usage-quota-bar-fill {
  height: 100%;
  border-radius: 100px;
  background-color: var(--wm-accent);
}
.usage-quota-bar-fill.warn {
  background-color: var(--wm-warning);
}
.usage-quota-bar-fill.over {
  background-color: var(--wm-danger);
}
.usage-quota-sub {
  font-size: .78rem;
  color: var(--wm-muted);
}

.usage-daily-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-height: 420px;
  overflow-y: auto;
}
.usage-daily-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .82rem;
}
.usage-daily-date {
  width: 60px;
  flex-shrink: 0;
  color: var(--wm-muted);
  font-variant-numeric: tabular-nums;
}
.usage-daily-bar-track {
  flex: 1;
  height: 8px;
  border-radius: 100px;
  background-color: var(--wm-tint);
  overflow: hidden;
}
.usage-daily-bar-fill {
  height: 100%;
  border-radius: 100px;
  background-color: var(--wm-accent);
}
.usage-daily-value {
  width: 96px;
  flex-shrink: 0;
  text-align: right;
  color: var(--wm-muted);
  font-variant-numeric: tabular-nums;
}

.usage-admin-banner {
  display: flex;
  align-items: center;
  gap: .5rem;
  background-color: var(--wm-accent-soft);
  color: var(--wm-accent);
  border-radius: .6rem;
  padding: .6rem 1rem;
  font-size: .78rem;
  font-weight: 700;
  margin: 2rem 0 1.25rem;
}
.usage-admin-banner svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  flex-shrink: 0;
}
.usage-cost-hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border: 1px solid var(--wm-line);
  border-radius: .875rem;
  padding: 1.3rem;
  margin-bottom: 1rem;
}
.usage-cost-hero-label {
  font-size: .82rem;
  color: var(--wm-muted);
  font-weight: 700;
  margin-bottom: .3rem;
}
.usage-cost-hero-value {
  font-size: 1.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.usage-cost-hero-delta {
  font-size: .8rem;
  color: var(--wm-muted);
  text-align: right;
}
.usage-cost-hero-delta.up {
  color: var(--wm-warning);
}
.usage-cost-hero-delta.down {
  color: var(--wm-success);
}

.usage-month-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.usage-month-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--wm-line);
  border-radius: .7rem;
}
.usage-month-row.current {
  border-color: var(--wm-accent);
  background-color: var(--wm-accent-soft);
}
.usage-month-label {
  font-size: .84rem;
  font-weight: 700;
  width: 70px;
  flex-shrink: 0;
}
.usage-month-bar-track {
  flex: 1;
  height: 8px;
  border-radius: 100px;
  background-color: var(--wm-tint);
  overflow: hidden;
}
.usage-month-bar-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--wm-logo-a), var(--wm-accent));
}
.usage-month-value {
  font-size: .84rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 78px;
  text-align: right;
  flex-shrink: 0;
}

/* ============================================================
   관리자 사용량 대시보드 확장(2026-09-16, Artifact 승인안 그대로 적용) — 기능별/Provider·BYOK/
   음성인식/가입자 랭킹/안정성 패널. KPI는 회원 관리(.wm-admin-kpi-row)와 같은 컴포넌트를 그대로
   재사용하고, 여기서는 그 위에 얹는 delta/note 줄과 패널 전용 클래스만 새로 정의한다.
   ============================================================ */
.wm-admin-kpi-delta {
  font-size: .74rem;
  font-weight: 700;
  margin-top: .4rem;
}
.wm-admin-kpi-delta.up { color: var(--wm-danger); }
.wm-admin-kpi-delta.down { color: var(--wm-success); }
.wm-admin-kpi-note {
  font-size: .7rem;
  color: var(--wm-muted);
  margin-top: .4rem;
}

.usage-grid-2 {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 900px) {
  .usage-grid-2 { grid-template-columns: 1fr; }
}
.usage-panel {
  background: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: .9rem;
  padding: 1.15rem 1.25rem;
}
.usage-panel.full { margin-bottom: 1rem; }
.usage-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}
.usage-panel-tag {
  font-size: .68rem;
  font-weight: 700;
  color: var(--wm-muted);
  background: var(--wm-tint);
  padding: .15rem .55rem;
  border-radius: 100px;
  white-space: nowrap;
}

/* 기능별 비중 — 월별 추이(.usage-month-*)와 같은 막대 시각언어를 재사용해 같은 화면 안에서
   서로 다른 차트 어휘가 늘어나지 않도록 한다. */
.usage-feat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .15rem .6rem;
}
.usage-feat-row + .usage-feat-row { margin-top: .65rem; }
.usage-feat-row .lbl { font-size: .8rem; font-weight: 700; }
.usage-feat-row .pct { font-size: .72rem; color: var(--wm-muted); font-weight: 700; }
.usage-feat-row .amt { font-size: .78rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.usage-feat-track {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 100px;
  background: var(--wm-tint);
  overflow: hidden;
}
.usage-feat-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--wm-logo-a), var(--wm-accent));
}

/* Provider · BYOK 도넛 — 순수 CSS conic-gradient, 퍼센트는 뷰에서 누적 계산해 인라인 style로 넣는다. */
.usage-donut-panel { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.usage-donut-wrap { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.usage-donut { width: 132px; height: 132px; border-radius: 50%; }
.usage-donut-center {
  position: absolute;
  inset: 16px;
  background: var(--wm-surface);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.usage-donut-center strong { font-size: 1.02rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.usage-donut-center span { font-size: .64rem; color: var(--wm-muted); font-weight: 700; }
.usage-legend { display: flex; flex-direction: column; gap: .55rem; flex: 1; min-width: 180px; }
.usage-legend-row { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.usage-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.usage-legend-row .name { font-weight: 700; flex: 1; }
.usage-legend-row .pct { color: var(--wm-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.usage-legend-row .amt { font-weight: 800; font-variant-numeric: tabular-nums; width: 68px; text-align: right; }

/* 음성 인식(Transcribe) 전용 — 이 프로젝트의 최대 비용 항목이라 별도 패널로 뗀다. */
.usage-tr-stats { display: flex; gap: 1.4rem; margin-bottom: .9rem; flex-wrap: wrap; }
.usage-tr-stat b { display: block; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.usage-tr-stat span { font-size: .72rem; color: var(--wm-muted); font-weight: 700; }
.usage-tr-chart { display: flex; align-items: flex-end; gap: .4rem; height: 64px; }
.usage-tr-bar { flex: 1; background: var(--wm-accent-soft); border-radius: .25rem .25rem 0 0; min-height: 2px; }
.usage-tr-bar.now { background: var(--wm-accent); }
.usage-tr-chart-labels { display: flex; gap: .4rem; margin-top: .3rem; }
.usage-tr-chart-labels span { flex: 1; text-align: center; font-size: .64rem; color: var(--wm-muted); font-weight: 700; }
.usage-tr-note {
  font-size: .72rem;
  color: var(--wm-muted);
  margin-top: .7rem;
  line-height: 1.5;
  padding-top: .7rem;
  border-top: 1px dashed var(--wm-line);
}

/* 안정성 — 실패 원인 Top N + 최근 N일 실패 추이 스파크라인. */
.usage-err-list { display: flex; flex-direction: column; gap: .6rem; }
.usage-err-row { display: grid; grid-template-columns: 16px 1fr 56px; align-items: center; gap: .55rem; }
.usage-err-dot { width: 8px; height: 8px; border-radius: 50%; }
.usage-err-row .lbl { font-size: .8rem; font-weight: 700; }
.usage-err-row .cnt { font-size: .78rem; font-weight: 700; text-align: right; color: var(--wm-muted); font-variant-numeric: tabular-nums; }
.usage-err-track { grid-column: 2; height: 7px; border-radius: 100px; background: var(--wm-tint); overflow: hidden; margin-top: .15rem; }
.usage-err-fill { height: 100%; border-radius: 100px; }
.usage-spark-stat { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .7rem; }
.usage-spark-stat b { font-size: 1.3rem; font-weight: 800; color: var(--wm-danger); }
.usage-spark-stat span { font-size: .76rem; color: var(--wm-muted); font-weight: 700; }
.usage-spark-caption { font-size: .7rem; color: var(--wm-muted); margin-top: .4rem; }

.usage-mock-empty { font-size: .82rem; color: var(--wm-muted); text-align: center; padding: 1.2rem 0; }

/* ============================================================
   랜딩 페이지 (비회원 전용, 2026-09-11) — Home/Landing.cshtml.
   "B-1 넘버 레일 스크롤형" 시안 채택. 기존 클래스와 겹치지 않도록
   전부 .wm-landing 아래 ll- 접두사로 스코프한다(예: .eyebrow/.dot-mark
   는 이미 다른 화면에서 다른 스타일로 쓰이고 있어 재사용하지 않음).
   ============================================================ */
.wm-landing { --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --ll-ink-deep: #14101C; }
/* 상단 유틸리티 스트립(2026-09-11, "상단이 허전해 보인다" 피드백 — 3안 채택) — 로고바 위에
   얇은 공지 띠를 한 겹 더 얹은 2단 구조. 실제 가입 페이지로 바로 연결되는 링크(장식용 텍스트가
   아님). */
.wm-landing .ll-utility { display: flex; align-items: center; justify-content: center; gap: .5rem; background: var(--wm-ink); color: #fff; text-align: center; padding: .55rem 1rem; font-size: .78rem; text-decoration: none; }
.wm-landing .ll-utility:hover { color: #fff; text-decoration: underline; }
.wm-landing .ll-utility-badge { color: var(--wm-logo-a); font-weight: 800; }
.wm-landing .ll-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem clamp(1.1rem, 5vw, 2rem); max-width: 1180px; margin: 0 auto; }
.wm-landing .ll-brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; color: var(--wm-ink); text-decoration: none; }
.wm-landing .ll-mark { width: 25px; height: 25px; flex-shrink: 0; }
.wm-landing .ll-topnav { display: flex; align-items: center; gap: 1.6rem; font-size: .85rem; }
.wm-landing .ll-topnav a { color: var(--wm-ink); text-decoration: none; font-weight: 600; }
/* .ll-topnav a는 일반 "로그인" 텍스트 링크용 — 안의 .btn-primary("무료로 시작하기")까지
   같은 색으로 덮어써서 흰 글자가 어두운 잉크색으로 바뀌는 문제가 있었다(2026-09-11). */
.wm-landing .ll-topnav a.btn-primary,
.wm-landing .ll-topnav a.btn-primary:hover { color: #fff; }
.wm-landing .ll-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.1rem, 5vw, 2rem); }
.wm-landing .ll-eyebrow { font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--wm-accent); letter-spacing: .09em; text-transform: uppercase; margin: 0 0 .9rem; }
.wm-landing .ll-lead { font-size: 1.06rem; color: var(--wm-muted); line-height: 1.75; max-width: 420px; margin: 0 0 1.8rem; }
.wm-landing .ll-footer { border-top: 1px solid var(--wm-line); padding: 2rem clamp(1.1rem, 5vw, 2rem); text-align: center; color: var(--wm-muted); font-size: .78rem; }
/* _FooterBiz.cshtml의 .wm-footer-line은 인증된 앱 화면에서 "넓은 화면을 가로로 채운다"는
   의도적 결정(2026-08-20)으로 flex 기본 정렬(왼쪽부터)을 쓴다 — text-align은 flex 항목
   정렬에 영향이 없어 랜딩 페이지에서만 가운데로 오도록 별도로 덮어쓴다(다른 화면은 그대로). */
.wm-landing .wm-footer-line { justify-content: center; }

.wm-landing .ll-frame { border: 1px solid var(--wm-line); border-radius: .6rem; overflow: hidden; background: #fff; }
.wm-landing .ll-frame-bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .75rem; border-bottom: 1px solid var(--wm-line); background: var(--wm-tint); }
.wm-landing .ll-frame-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wm-line); }
.wm-landing .ll-frame-file { margin-left: .5rem; font-family: var(--mono); font-size: .7rem; color: var(--wm-muted); }
.wm-landing .ll-frame-body { padding: 1.1rem 1.2rem; }
.wm-landing .ll-mini-p { font-size: .82rem; color: var(--wm-muted); line-height: 1.65; margin: 0 0 .8rem; }
.wm-landing .ll-tag { display: inline-flex; align-items: center; font-family: var(--mono); font-size: .68rem; font-weight: 700; background: var(--wm-accent-soft); color: var(--wm-accent); padding: .22rem .5rem; border-radius: .3rem; margin: 0 .3rem .3rem 0; letter-spacing: .02em; }
.wm-landing .ll-row-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .82rem; padding: .4rem 0; border-top: 1px solid var(--wm-line); }
.wm-landing .ll-row-check:first-of-type { border-top: none; }
.wm-landing .ll-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wm-accent); margin-top: .42rem; flex-shrink: 0; }

/* 2026-09-17 — "AI가 만든거 같다"는 실사용 피드백으로 히어로/사용사례/CTA를 재구성(Artifact
   "위드밋 랜딩 리디자인" 승인안 적용). 기존에 타임스탬프/파일명 등 작은 곳에만 쓰던
   모노스페이스(--mono)를 화자 태그·타임코드·스텝 넘버까지 이 페이지의 실제 그래픽 장치로
   키운 것이 핵심 — 장식이 아니라 이 제품이 실제로 다루는 데이터(00:47:32, SPK_02 04:12)를
   그대로 노출한다. padding-top/bottom만 지정하는 이유는 위 3-value shorthand 관련 주석과 동일.

   접근성 — 파도/REC 점멸 애니메이션은 prefers-reduced-motion에서 정지(전역 site.css 규칙이
   이미 모든 animation-duration을 0에 가깝게 만들지만, 파도 막대 높이 자체가 자바스크립트가
   아니라 애니메이션에 의존하므로 reduce 시 정지된 마지막 프레임 높이로 굳어 보이는 것도
   허용 가능한 정지 상태로 확인함). */
.wm-landing .ll-hero { padding-top: 3.6rem; padding-bottom: 4.5rem; display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.8rem; align-items: center; position: relative; }
.wm-landing .ll-hero-glow {
  position: absolute; top: -6rem; right: -8rem; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--wm-logo-a) 0%, var(--wm-logo-b) 45%, transparent 72%);
  filter: blur(60px); opacity: .3; z-index: 0; pointer-events: none;
}
.wm-landing .ll-hero-copy { position: relative; z-index: 1; }
.wm-landing .ll-eyebrow.ll-rec { display: flex; align-items: center; gap: .5rem; text-transform: none; }
.wm-landing .ll-rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #D64545; animation: ll-rec-pulse 1.6s ease-in-out infinite; flex-shrink: 0; }
@keyframes ll-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.wm-landing .ll-hero h1 { font-size: clamp(2.2rem, 3.8vw, 3rem); font-weight: 800; line-height: 1.22; letter-spacing: -.02em; margin: 0 0 1.2rem; text-wrap: balance; }
.wm-landing .ll-swipe { position: relative; display: inline-block; white-space: nowrap; }
.wm-landing .ll-swipe svg { position: absolute; left: -2%; bottom: -.1em; width: 104%; height: .42em; z-index: -1; }
.wm-landing .ll-cta-row { display: flex; gap: .7rem; flex-wrap: wrap; position: relative; z-index: 1; }

/* 히어로 비주얼 — 정적 브라우저 목업 대신 "녹음이 기록이 되는 순간"을 한 패널에서 이어 보여주는
   라이브 녹취 리드아웃. */
.wm-landing .ll-readout {
  position: relative; z-index: 1; background: var(--ll-ink-deep); border-radius: 1.1rem;
  padding: 1.3rem 1.3rem 1.5rem; box-shadow: 0 40px 90px -40px rgba(18, 15, 26, .55);
}
.wm-landing .ll-readout-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.wm-landing .ll-readout-file { display: flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .72rem; color: #B9B4C6; }
.wm-landing .ll-readout-timer { font-family: var(--mono); font-size: .78rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.wm-landing .ll-wave { display: flex; align-items: flex-end; gap: 2px; height: 26px; margin-bottom: 1rem; }
.wm-landing .ll-wave span { display: block; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--wm-logo-a), var(--wm-logo-b)); animation: ll-wave-bounce 1.2s ease-in-out infinite; }
@keyframes ll-wave-bounce { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.wm-landing .ll-transcript { display: flex; flex-direction: column; gap: .65rem; padding-bottom: 1rem; border-bottom: 1px dashed rgba(255, 255, 255, .14); margin-bottom: 1rem; }
.wm-landing .ll-t-line { display: flex; gap: .6rem; font-size: .86rem; line-height: 1.55; color: #EDEBF2; }
.wm-landing .ll-t-time { font-family: var(--mono); font-size: .7rem; color: #8B85A0; flex-shrink: 0; padding-top: .15rem; }
.wm-landing .ll-t-speaker { font-family: var(--mono); font-size: .7rem; font-weight: 700; padding: .1rem .4rem; border-radius: .3rem; flex-shrink: 0; height: fit-content; }
.wm-landing .ll-t-speaker.a { background: rgba(201, 184, 234, .22); color: var(--wm-logo-a); }
.wm-landing .ll-t-speaker.b { background: rgba(239, 179, 206, .22); color: var(--wm-logo-b); }
.wm-landing .ll-readout-out { display: flex; flex-direction: column; gap: .6rem; }
.wm-landing .ll-readout-out-label { font-family: var(--mono); font-size: .68rem; color: #8B85A0; letter-spacing: .05em; }
.wm-landing .ll-out-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.wm-landing .ll-out-tag { font-family: var(--mono); font-size: .7rem; font-weight: 700; background: rgba(255, 255, 255, .08); color: #fff; padding: .28rem .6rem; border-radius: .35rem; }
.wm-landing .ll-out-check { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: #EDEBF2; }
.wm-landing .ll-out-check .ll-dot { margin-top: 0; background: var(--wm-logo-a); }

/* 사용 사례 — 아이콘+텍스트 3열 그리드 대신, 각 사례에 실제 발화 스니펫을 곁들인 세로 "필드노트"
   리스트로 (더 구체적으로 느껴지게). */
.wm-landing .ll-field { padding: 4.4rem 0; }
.wm-landing .ll-field-head { max-width: 560px; margin-bottom: 2.4rem; }
.wm-landing .ll-field-head h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 800; letter-spacing: -.015em; margin: .4rem 0 0; text-wrap: balance; }
.wm-landing .ll-field-list { display: flex; flex-direction: column; }
.wm-landing .ll-field-card { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; padding-block: 2rem; border-top: 1px solid var(--wm-line); align-items: start; }
.wm-landing .ll-field-list .ll-field-card:last-child { border-bottom: 1px solid var(--wm-line); }
.wm-landing .ll-field-case { font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--wm-accent); letter-spacing: .04em; }
.wm-landing .ll-field-card h3 { font-size: 1.15rem; font-weight: 700; margin: .5rem 0 0; letter-spacing: -.01em; }
.wm-landing .ll-field-body p { font-size: .92rem; color: var(--wm-muted); line-height: 1.75; max-width: 520px; margin: 0 0 1rem; }
.wm-landing .ll-field-snip { font-family: var(--mono); font-size: .76rem; color: var(--wm-ink); background: var(--wm-tint); border-radius: .6rem; padding: .7rem .9rem; display: inline-block; }
.wm-landing .ll-field-snip b { color: var(--wm-accent); }

.wm-landing .ll-rail-section { display: grid; grid-template-columns: 200px 1fr; gap: 3rem; padding-bottom: 5rem; }
.wm-landing .ll-rail { position: sticky; top: 1.5rem; align-self: start; display: flex; flex-direction: column; gap: 0; }
.wm-landing .ll-rail-item { display: block; padding: .8rem 0 .8rem 1rem; border-left: 2px solid var(--wm-line); font-weight: 700; font-size: .84rem; color: var(--wm-muted); cursor: pointer; transition: color .15s, border-color .15s; background: none; border-top: none; border-right: none; border-bottom: none; text-align: left; font-family: inherit; }
.wm-landing .ll-rail-item.active { border-left-color: var(--wm-accent); color: var(--wm-ink); }
.wm-landing .ll-steps { display: flex; flex-direction: column; gap: 4.5rem; }
.wm-landing .ll-step { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; scroll-margin-top: 1.5rem; }
.wm-landing .ll-step-num { font-family: var(--mono); font-size: 3rem; font-weight: 700; color: var(--wm-line); line-height: 1; }
.wm-landing .ll-step h3 { font-size: 1.35rem; font-weight: 800; margin: 0 0 .6rem; letter-spacing: -.01em; }
.wm-landing .ll-step p { color: var(--wm-muted); font-size: .92rem; line-height: 1.75; max-width: 460px; margin: 0 0 1.3rem; }
.wm-landing .ll-step .ll-frame { max-width: 480px; }
.wm-landing .ll-chat { max-width: 82%; padding: .65rem .95rem; border-radius: .5rem; font-size: .82rem; margin-bottom: .55rem; line-height: 1.5; }
.wm-landing .ll-chat.user { background: var(--wm-tint); margin-left: auto; }
.wm-landing .ll-chat.ai { background: var(--wm-accent-soft); color: var(--wm-accent); }

.wm-landing .ll-cta-band { background: var(--ll-ink-deep); position: relative; overflow: hidden; padding: 4rem clamp(1.1rem, 5vw, 2rem); text-align: center; }
.wm-landing .ll-cta-band-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 120%, var(--wm-accent) 0%, transparent 60%); opacity: .5; pointer-events: none; }
.wm-landing .ll-cta-band-inner { position: relative; z-index: 1; }
.wm-landing .ll-cta-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin: 0 0 .7rem; letter-spacing: -.015em; text-wrap: balance; }
.wm-landing .ll-cta-band p { color: #B9B6C4; margin: 0 0 1.6rem; font-size: .94rem; }

@media (max-width: 900px) {
  .wm-landing .ll-hero, .wm-landing .ll-rail-section { grid-template-columns: 1fr; }
  .wm-landing .ll-hero-glow { display: none; }
  .wm-landing .ll-field-card { grid-template-columns: 1fr; gap: .6rem; }
  .wm-landing .ll-rail { position: static; flex-direction: row; flex-wrap: wrap; gap: .5rem; top: auto; }
  .wm-landing .ll-rail-item { border-left: none; border-bottom: 2px solid var(--wm-line); padding: .5rem .2rem; }
  .wm-landing .ll-rail-item.active { border-bottom-color: var(--wm-accent); }
}

/* 2026-09-11 — "모바일에서 이상하게 나와" 피드백. 실제 원인은 상단바가 로고+로그인+버튼을 한 줄에
   욱여넣도록만 되어 있었고(폭이 좁아지는 경우를 아예 안 대비), 좌우 여백(2rem)/버튼 크기/CTA
   버튼 2개 가로 배치가 좁은 화면에서 그대로 유지되던 것 — 화면 폭을 명시적으로 줄여가며 새로
   손댄 게 아니라 여기 나열한 요소들이 좁은 뷰포트에서 겹치거나 넘칠 수밖에 없는 고정 크기였다는
   점을 코드로 확인하고 고쳤다. 가로 스크롤 자체를 막는 안전장치도 함께 둔다(이 앱이 이전에도
   겪은 "정확한 원인 특정 전에 overflow-x:hidden으로 먼저 방어" 패턴, Meetings/Details 참고).
   주의: 이 규칙을 .wm-landing 자체에 걸면 안 된다 — 그러면 .wm-landing이 새로운 스크롤
   컨테이너가 되어 그 안의 .ll-rail(position:sticky, "01 녹음/02 자동 요약/..." 번호 레일)이
   스크롤을 따라오지 않는 실제 버그가 생긴다(2026-09-11 실사용 피드백으로 발견). body는 원래도
   문서의 스크롤 컨테이너라 여기 걸어도 sticky 계산에 영향이 없다 — :has()로 랜딩 페이지에만
   스코프해 다른 화면에는 영향 없음. */
body:has(.wm-landing) { overflow-x: hidden; }
@media (max-width: 600px) {
  .wm-landing .ll-utility { font-size: .7rem; padding: .5rem .8rem; }
  .wm-landing .ll-topbar { padding: .8rem 1.1rem; }
  .wm-landing .ll-brand { font-size: .9rem; gap: .4rem; }
  .wm-landing .ll-mark { width: 22px; height: 22px; }
  /* "로그인"은 히어로에 같은 버튼이 바로 아래 또 있어 좁은 화면에서는 중복 — 상단바는
     주 CTA 버튼 하나만 남기고 그 버튼을 손가락으로 누르기 편한 크기로 키운다. */
  .wm-landing .ll-topnav a:not(.btn) { display: none; }
  .wm-landing .ll-topnav .btn-primary { padding: .6rem 1.1rem; font-size: .82rem; }
  .wm-landing .ll-hero { padding-top: 2.2rem; padding-bottom: 2.6rem; gap: 2rem; }
  .wm-landing .ll-hero h1 { font-size: 1.8rem; }
  .wm-landing .ll-lead { max-width: none; }
  .wm-landing .ll-cta-row { flex-direction: column; align-items: stretch; }
  .wm-landing .ll-cta-row .btn { width: 100%; }
  .wm-landing .ll-field { padding: 2.6rem 0; }
  .wm-landing .ll-rail-section { padding-bottom: 3rem; gap: 1.6rem; }
  .wm-landing .ll-rail-item { font-size: .8rem; }
  .wm-landing .ll-step { grid-template-columns: 1fr; gap: .4rem; }
  .wm-landing .ll-step-num { font-size: 1.6rem; }
  .wm-landing .ll-step h3 { font-size: 1.2rem; }
  .wm-landing .ll-step p { max-width: none; }
  .wm-landing .ll-cta-band { padding: 2.4rem 1.2rem; }
  .wm-landing .ll-cta-band h2 { font-size: 1.4rem; }
  .wm-landing .ll-cta-band .btn { width: 100%; }
}

/* ============================================================
   이용요금 페이지 + 사이드바 업그레이드 유도(2026-09-14) — Pricing/Index.cshtml,
   _Layout.cshtml의 .wm-upsell-card. 무료 한도(FreeTierTotalMinutes) 도입에 맞춰 추가.
   ============================================================ */
.wm-pricing { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.1rem, 5vw, 2rem) 3rem; }
.wm-pricing-preview-banner {
  background: var(--wm-accent-soft);
  color: var(--wm-accent);
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  padding: .6rem 1rem;
  margin: 0 calc(-1 * clamp(1.1rem, 5vw, 2rem));
}
.wm-pricing-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 0; }
.wm-pricing-brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.02rem; color: var(--wm-ink); text-decoration: none; }
.wm-pricing-mark { width: 25px; height: 25px; flex-shrink: 0; }
.wm-pricing-hero { text-align: center; max-width: 560px; margin: 2rem auto 3rem; }
.wm-pricing-eyebrow { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .72rem; font-weight: 700; color: var(--wm-accent); letter-spacing: .09em; text-transform: uppercase; margin: 0 0 .8rem; }
.wm-pricing-hero h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -.01em; margin: 0 0 .8rem; text-wrap: balance; }
.wm-pricing-lead { color: var(--wm-muted); font-size: 1rem; line-height: 1.7; margin: 0; }

.wm-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; }
.wm-pricing-card {
  position: relative;
  border: 1px solid var(--wm-line);
  border-radius: 1rem;
  padding: 2rem 1.6rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.wm-pricing-card.featured { border-color: var(--wm-accent); box-shadow: 0 20px 45px -28px rgba(91, 67, 150, .45); }
.wm-pricing-card-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--wm-accent); color: #fff; font-size: .68rem; font-weight: 800;
  padding: .25rem .7rem; border-radius: 999px; letter-spacing: .02em;
}
.wm-pricing-card-name { font-weight: 800; font-size: 1.05rem; color: var(--wm-ink); margin-bottom: .5rem; }
.wm-pricing-card-price { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 1.2rem; }
.wm-pricing-card-price span { font-size: .95rem; font-weight: 600; color: var(--wm-muted); }
.wm-pricing-card-features { list-style: none; margin: 0 0 1.6rem; padding: 0; flex: 1; }
.wm-pricing-card-features li {
  font-size: .88rem; color: var(--wm-muted); padding: .55rem 0; border-top: 1px solid var(--wm-line);
}
.wm-pricing-card-features li:first-child { border-top: none; }
.wm-pricing-card-features li strong { color: var(--wm-ink); }
.wm-pricing-footer { border-top: 1px solid var(--wm-line); padding-top: 2rem; margin-top: 2rem; text-align: center; color: var(--wm-muted); font-size: .78rem; }

@media (max-width: 900px) {
  .wm-pricing-grid { grid-template-columns: 1fr; }
}

/* 사이드바 무료 사용자 업그레이드 유도 카드 — .wm-quickstart-btn 바로 아래, 카카오 채널 배너가
   있던 것과 같은 자리(2026-08-20 기록 참고). 로고 그라데이션으로 브랜드 CTA임을 표시. */
.wm-upsell-card {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .85rem 1rem;
  margin: .6rem 0 .2rem;
  border-radius: .7rem;
  background: linear-gradient(135deg, var(--wm-logo-a-light), var(--wm-accent-soft));
  text-decoration: none;
  border: 1px solid var(--wm-logo-a);
}
.wm-upsell-badge {
  align-self: flex-start;
  font-size: .62rem; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--wm-accent);
  padding: .1rem .45rem; border-radius: 999px; margin-bottom: .3rem;
}
.wm-upsell-title { font-size: .82rem; font-weight: 700; color: var(--wm-ink); }
.wm-upsell-cta { font-size: .76rem; font-weight: 700; color: var(--wm-accent); }

/* -------------------------------------------------------------------------
   관리자 페이지(/Admin, 2026-09-16) — 일반 사용자 화면과 확실히 구분되도록 차콜 톤 전용
   헤더/탭(Artifact B안)을 쓴다. 콘텐츠 영역(KPI/허브 카드/테이블)은 일반 화면의 --wm-accent 등
   기존 토큰을 그대로 재사용 — 완전히 새 팔레트를 만들지 않는다.
   ------------------------------------------------------------------------- */
:root {
  --admin-dark: #1B1E2A;
  --admin-dark2: #252938;
  --admin-accent: #7C8CFF;
}
.wm-admin-body {
  background: var(--wm-bg);
  min-height: 100vh;
}
.wm-admin-top {
  background: var(--admin-dark);
  color: #fff;
  padding: .9rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wm-admin-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: .95rem;
  color: #fff !important;
  text-decoration: none;
}
.wm-admin-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--admin-accent);
}
.wm-admin-user {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .82rem;
  color: rgba(255, 255, 255, .75);
}
.wm-admin-user a {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
}
.wm-admin-user a:hover {
  color: #fff;
}
.wm-admin-logout {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .75);
  font-size: .82rem;
  padding: 0;
}
.wm-admin-logout:hover {
  color: #fff;
}
.wm-admin-tabs {
  background: var(--admin-dark2);
  padding: 0 1.4rem;
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
}
.wm-admin-tabs a {
  font-size: .82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  padding: .75rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.wm-admin-tabs a.active,
.wm-admin-tabs a:hover {
  color: #fff;
  border-color: var(--admin-accent);
}
.wm-admin-body-inner {
  /* body 태그 자체가 이미 전역적으로 display:flex; flex-direction:column(사이트 전역
     sticky-footer 패턴, 94번째 줄 근처) — 이 div는 그 flex 컨테이너의 자식(flex item)이 되므로
     max-width/margin:auto만으로는 가로 폭이 기대대로 늘어나지 않는다(실사용 스크린샷으로 확인,
     2026-09-16). width:100%를 명시해 flex cross-axis stretch 계산에 기대지 않고 폭을 확정한다. */
  width: 100%;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.8rem 1.4rem 3rem;
}

.wm-admin-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .8rem;
  margin-bottom: 1.6rem;
}
.wm-admin-kpi {
  background: var(--wm-tint);
  border-radius: .7rem;
  padding: .9rem 1rem;
}
.wm-admin-kpi-label {
  font-size: .7rem;
  color: var(--wm-muted);
  font-weight: 700;
  margin-bottom: .3rem;
}
.wm-admin-kpi-value {
  font-size: 1.3rem;
  font-weight: 800;
}

.wm-admin-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.wm-admin-hub-card {
  background: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: .9rem;
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color .15s;
}
.wm-admin-hub-card:hover {
  border-color: var(--wm-accent);
  color: inherit;
}
.wm-admin-hub-icon {
  width: 34px;
  height: 34px;
  border-radius: .6rem;
  background: var(--wm-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .7rem;
}
.wm-admin-hub-icon svg {
  width: 17px;
  height: 17px;
  stroke: var(--wm-accent);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wm-admin-hub-title {
  font-size: .92rem;
  font-weight: 800;
  margin-bottom: .2rem;
}
.wm-admin-hub-desc {
  font-size: .78rem;
  color: var(--wm-muted);
  line-height: 1.45;
}
.wm-admin-hub-badge {
  display: inline-block;
  margin-top: .6rem;
  font-size: .68rem;
  font-weight: 800;
  background: var(--wm-danger-soft);
  color: var(--wm-danger);
  padding: .1rem .5rem;
  border-radius: 100px;
}

.wm-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}
.wm-admin-table th {
  text-align: left;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--wm-muted);
  background: var(--wm-tint);
  padding: .55rem .7rem;
}
/* 정렬 가능한 헤더("가입일"/"최근 활동")가 <a>라서, 전역 a{color:var(--wm-accent)} 밑줄 링크
   스타일이 그대로 노출돼 화살표(↓/↕)까지 보라색 밑줄 선처럼 보였다("컬럼의 링크 css 그대로
   나오는것도 이상하고... 보라색 선이 애매하게") — 일반 헤더 텍스트와 같은 색/두께로 리셋하고
   호버에서만 살짝 진해지게 한다. */
.wm-admin-table th a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}
.wm-admin-table th a:hover {
  color: var(--wm-ink);
}
.wm-admin-table td {
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--wm-tint);
}
.wm-admin-table tr:last-child td {
  border-bottom: none;
}

/* 회원 관리 목록(2026-09-16 UI 개선) — 인맥(Persons/Index)의 .contact-row/.contact-avatar를
   그대로 재사용하되, 행 전체가 <a>(상세로 이동)라서 링크 기본 색상을 리셋하고 요금제 배지/화살표를
   덧붙인다. */
.wm-admin-user-row {
  text-decoration: none;
  color: inherit;
}
.wm-admin-user-row:hover {
  color: inherit;
}
.wm-admin-user-row .chev {
  width: 16px;
  height: 16px;
  stroke: var(--wm-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.wm-admin-plan-badge {
  font-size: .7rem;
  font-weight: 800;
  padding: .15rem .55rem;
  border-radius: 100px;
  background: var(--wm-tint);
  color: var(--wm-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.wm-admin-plan-badge.paid {
  background: var(--wm-accent-soft);
  color: var(--wm-accent);
}

/* 회원 관리 A+D 결합 디자인(2026-09-16, Artifact 승인안) — 상단 통계는 기존 .wm-admin-kpi-row를
   그대로 재사용, 아래는 필터 칩+검색+정렬 가능한 테이블+행 안 인라인 요금제 드롭다운 전용 스타일. */
.wm-admin-users-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 1.1rem 0;
  flex-wrap: wrap;
}
.wm-admin-chips {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.wm-admin-chip {
  font-size: .78rem;
  font-weight: 700;
  padding: .3rem .8rem;
  border-radius: 100px;
  background: var(--wm-tint);
  color: var(--wm-muted);
  text-decoration: none;
}
.wm-admin-chip:hover {
  color: var(--wm-ink);
}
.wm-admin-chip.active {
  background: var(--wm-accent);
  color: #fff;
}
.wm-admin-search {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--wm-tint);
  border-radius: .5rem;
  padding: .35rem .6rem;
  min-width: 260px;
}
.wm-admin-search svg {
  width: 15px;
  height: 15px;
  stroke: var(--wm-muted);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}
.wm-admin-search input[type="text"] {
  border: none;
  background: none;
  outline: none;
  font-size: .82rem;
  color: var(--wm-ink);
  flex: 1;
  min-width: 0;
}
.wm-admin-name-cell {
  display: flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: inherit;
}
.wm-admin-mini-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wm-logo-a), var(--wm-logo-b));
  color: #fff;
  font-weight: 800;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wm-admin-new-badge {
  font-size: .62rem;
  font-weight: 800;
  background: var(--wm-warning-soft);
  color: var(--wm-warning);
  padding: .08rem .4rem;
  border-radius: 100px;
}
.wm-admin-activity-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: .3rem;
}
.wm-admin-activity-dot.on {
  background: var(--wm-success);
}
.wm-admin-activity-dot.off {
  background: var(--wm-line);
}
/* 요금제 바로 변경 select(2026-09-16) — 전역 .form-select는 언더라인-미니멀 스타일(테두리 없이
   밑줄만)이라 표 안에서 그냥 밑줄 친 텍스트처럼 보였다("요금제 selectbox가 디자인과 많이
   차이나는점") — 다른 관리자 칩/뱃지와 같은 알약형 박스로 새로 정의한다. 마크업에서
   form-select/form-select-sm 클래스를 뗐으므로 셀렉터 순서와 무관하게 항상 이 스타일만 적용된다. */
.wm-admin-plan-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1.5px solid var(--wm-line);
  border-radius: .6rem;
  background-color: var(--wm-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23726F66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: 12px;
  padding: .4rem 1.85rem .4rem .7rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--wm-ink);
  cursor: pointer;
  line-height: 1.3;
}
.wm-admin-plan-select:hover {
  border-color: var(--wm-muted);
}
.wm-admin-plan-select:focus {
  outline: none;
  border-color: var(--wm-accent);
  box-shadow: 0 0 0 3px var(--wm-accent-soft);
}
.wm-admin-plan-select.paid {
  border-color: var(--wm-accent);
  background-color: var(--wm-accent-soft);
  color: var(--wm-accent);
}

/* 구독·결제 관리 재구성(2026-09-16, Artifact 승인안 적용) — 회원관리와 같은 KPI 밴드를
   재사용하고, 여기서만 필요한 상태/타입 배지·추이 차트·인라인 환불 확인만 새로 정의한다. */
.wm-admin-panel {
  background: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: .9rem;
  padding: 1.15rem 1.25rem;
}

/* 범용 배지 — 구독 상태(활성/취소예약/해지)·거래 종류(청구/환불/카드)·성공·실패를 전부 하나의
   색상 토큰 집합으로 표현한다(회원관리의 plan-badge와 별개로, 이 화면은 색이 의미하는 축이
   여러 개라 톤 이름 기반 클래스가 더 맞다). */
.wm-admin-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 800;
  padding: .15rem .55rem;
  border-radius: 100px;
  white-space: nowrap;
}
.wm-admin-pill.success { background: var(--wm-success-soft); color: var(--wm-success); }
.wm-admin-pill.warning { background: var(--wm-warning-soft); color: var(--wm-warning); }
.wm-admin-pill.danger { background: var(--wm-danger-soft); color: var(--wm-danger); }
.wm-admin-pill.info { background: var(--wm-info-soft); color: var(--wm-info); }
.wm-admin-pill.muted { background: var(--wm-tint); color: var(--wm-muted); }

/* 신규 구독 · 해지 추이 — 사용량 페이지의 월별 막대 리스트와 같은 시각언어를 확장해 한 행에
   신규(초록)/해지(빨강) 막대 두 개를 나란히 둔다. */
.wm-admin-trend-legend {
  display: flex;
  gap: 1.2rem;
  margin-bottom: .9rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--wm-muted);
}
.wm-admin-trend-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.wm-admin-trend-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.wm-admin-trend-list { display: flex; flex-direction: column; gap: .7rem; }
.wm-admin-trend-row { display: grid; grid-template-columns: 64px 1fr 48px; align-items: center; gap: .8rem; }
.wm-admin-trend-month { font-size: .82rem; font-weight: 700; }
.wm-admin-trend-bars { display: flex; flex-direction: column; gap: .3rem; }
.wm-admin-trend-line { display: flex; align-items: center; gap: .5rem; }
.wm-admin-trend-track { flex: 1; height: 7px; border-radius: 100px; background: var(--wm-tint); overflow: hidden; }
.wm-admin-trend-fill { height: 100%; border-radius: 100px; }
.wm-admin-trend-fill.new { background: var(--wm-success); }
.wm-admin-trend-fill.churn { background: var(--wm-danger); }
.wm-admin-trend-num { font-size: .72rem; font-weight: 700; color: var(--wm-muted); width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.wm-admin-trend-net { font-size: .8rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.wm-admin-trend-net.pos { color: var(--wm-success); }
.wm-admin-trend-net.neg { color: var(--wm-danger); }
.wm-admin-trend-net.zero { color: var(--wm-muted); }

/* 환불 — 표 안 텍스트 입력창이 항상 노출돼 실수하기 쉬웠던 것을 <details>로 감싸 "환불" 버튼을
   눌러야만 사유 입력 폼이 펼쳐지게 한다(새 JS 없이 네이티브 disclosure만으로 구현). 이미 환불된
   거래는 컨트롤러가 아예 이 마크업 대신 .wm-admin-refund-done 배지만 내려준다(중복 환불 방지는
   서버에서도 RefundTransactionAsync가 한 번 더 막는다 — 이건 UI 힌트일 뿐). */
.wm-admin-refund-details summary {
  list-style: none;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 700;
  color: var(--wm-danger);
  background: var(--wm-danger-soft);
  border-radius: .5rem;
  padding: .35rem .7rem;
  display: inline-block;
}
.wm-admin-refund-details summary::-webkit-details-marker { display: none; }
.wm-admin-refund-details[open] summary { background: var(--wm-danger); color: #fff; }
.wm-admin-refund-form { margin-top: .5rem; display: flex; flex-direction: column; gap: .4rem; min-width: 200px; }
.wm-admin-refund-done {
  font-size: .76rem;
  font-weight: 700;
  color: var(--wm-muted);
  background: var(--wm-tint);
  border-radius: .5rem;
  padding: .35rem .7rem;
  display: inline-block;
}

/* CS 문의 재구성(2026-09-16, Artifact 승인안 적용) — 회원관리/구독결제와 같은 KPI 밴드
   (.wm-admin-kpi-row)·필터 칩(.wm-admin-chip)·검색창(.wm-admin-search)·배지(.wm-admin-pill)를
   그대로 재사용하고, 여기서만 필요한 카드형 목록·채팅 버블 상세만 새로 정의한다. */
.wm-admin-ticket-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.wm-admin-ticket-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--wm-line);
  border-radius: .8rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s;
}
.wm-admin-ticket-row:hover {
  border-color: var(--wm-accent);
  color: inherit;
}
.wm-admin-ticket-row.urgent {
  border-color: var(--wm-danger);
  background: var(--wm-danger-soft);
}
.wm-admin-ticket-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wm-logo-a), var(--wm-logo-b));
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wm-admin-ticket-body { min-width: 0; }
.wm-admin-ticket-subject {
  font-size: .88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.wm-admin-ticket-preview {
  font-size: .78rem;
  color: var(--wm-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: .15rem;
}
.wm-admin-ticket-email {
  font-size: .72rem;
  color: var(--wm-muted);
  margin-top: .1rem;
}
.wm-admin-ticket-time {
  font-size: .74rem;
  color: var(--wm-muted);
  text-align: right;
  white-space: nowrap;
}
.wm-admin-ticket-time b {
  display: block;
  color: var(--wm-danger);
  font-weight: 800;
  font-size: .7rem;
}

/* CS 문의 상세 — 채팅 버블형(문의는 왼쪽, 답변은 오른쪽). */
.wm-admin-thread {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.wm-admin-bubble-row {
  display: flex;
  gap: .7rem;
}
.wm-admin-bubble-row.reply {
  flex-direction: row-reverse;
}
.wm-admin-bubble-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
}
.wm-admin-bubble-avatar.user { background: linear-gradient(135deg, var(--wm-logo-a), var(--wm-logo-b)); }
.wm-admin-bubble-avatar.reply { background: var(--wm-accent); }
/* 말풍선을 감싸는 열(.wm-admin-bubble-col)에 명시적 flex-basis/min-width를 줘야 한다 — flex 항목의
   기본값(flex-basis:auto, min-width:auto)에서 자식 블록의 max-width:%가 부모의 미확정 크기를
   기준으로 계산되면서 한 줄에 한 글자씩 줄바꿈되는 버그가 실제로 있었다(2026-09-16, 사용자
   스크린샷으로 확인) — Meetings/Details.cshtml의 .two-col(flex:1 1 0%) 수정과 같은 원인/해법. */
.wm-admin-bubble-col {
  flex: 0 1 80%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.wm-admin-bubble-row.reply .wm-admin-bubble-col { align-items: flex-end; }
.wm-admin-bubble {
  width: fit-content;
  max-width: 100%;
  border-radius: 1rem;
  padding: .85rem 1rem;
  font-size: .86rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.wm-admin-bubble.user { background: var(--wm-tint); border-top-left-radius: .3rem; }
.wm-admin-bubble.reply { background: var(--wm-accent-soft); border-top-right-radius: .3rem; color: var(--wm-ink); }
.wm-admin-bubble-time { font-size: .68rem; color: var(--wm-muted); margin-top: .3rem; }
.wm-admin-bubble-row.reply .wm-admin-bubble-time { text-align: right; }

.wm-admin-reply-panel {
  background: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: .9rem;
  padding: 1.15rem 1.25rem;
}
.wm-admin-reply-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .8rem;
  flex-wrap: wrap;
  gap: .6rem;
}
.wm-admin-reply-hint { font-size: .72rem; color: var(--wm-muted); }

/* 연동키 설정 재구성(2026-09-16, Artifact 승인안 적용) — 서비스별(나이스페이/카카오/SES)로
   카드를 묶고, 즉시반영/재배포필요를 그룹 헤더 배지 하나로 옮긴다. */
.wm-admin-status-strip {
  display: flex;
  gap: 1.4rem;
  margin-bottom: 1.4rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--wm-muted);
}
.wm-admin-status-strip span { display: inline-flex; align-items: center; gap: .4rem; }
.wm-admin-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.wm-admin-svc-panel {
  background: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: .9rem;
  margin-bottom: 1rem;
  overflow: hidden;
}
.wm-admin-svc-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.15rem;
  background: var(--wm-tint);
}
.wm-admin-svc-icon {
  width: 34px;
  height: 34px;
  border-radius: .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wm-admin-svc-icon svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 1.8; }
.wm-admin-svc-name { font-size: .9rem; font-weight: 800; flex: 1; }

.wm-admin-key-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.15rem;
  border-top: 1px solid var(--wm-tint);
  flex-wrap: wrap;
}
.wm-admin-key-label { font-size: .84rem; font-weight: 700; }
.wm-admin-key-current {
  font-size: .74rem;
  color: var(--wm-muted);
  margin-top: .15rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.wm-admin-key-current.empty { font-style: italic; }
.wm-admin-key-form { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }
.wm-admin-key-form input {
  border: 1px solid var(--wm-line);
  border-radius: .5rem;
  padding: .4rem .65rem;
  font-size: .8rem;
  width: 200px;
  background: var(--wm-surface);
}
.wm-admin-key-form input:focus {
  outline: none;
  border-color: var(--wm-accent);
  box-shadow: 0 0 0 3px var(--wm-accent-soft);
}
.wm-admin-btn-save {
  background: var(--wm-tint);
  color: var(--wm-ink);
  border: none;
  border-radius: .5rem;
  padding: .4rem .8rem;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.wm-admin-btn-save:hover { background: var(--wm-accent); color: #fff; }

/* 관리자 계정 재구성(2026-09-16, Artifact 승인안 적용) — 이메일 직접 입력 대신 회원 검색 팝업. */
.wm-admin-self-pill {
  font-size: .64rem;
  font-weight: 800;
  background: var(--wm-accent-soft);
  color: var(--wm-accent);
  padding: .05rem .45rem;
  border-radius: 100px;
  margin-left: .4rem;
}
.wm-admin-add-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--wm-accent);
  color: #fff;
  border: none;
  border-radius: .6rem;
  padding: .65rem 1.1rem;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 1.2rem;
}
.wm-admin-add-btn svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2.2; }

/* 팝업 자체는 이 앱 전역에서 쓰는 부트스트랩 모달(.modal/.modal-dialog/.modal-content, 모바일에서
   modal-fullscreen-sm-down 자동 적용)을 그대로 쓰고, 안쪽 검색·목록만 새로 정의한다. */
.wm-admin-modal-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--wm-tint);
  border-radius: .6rem;
  padding: .5rem .8rem;
  margin-bottom: .9rem;
}
.wm-admin-modal-search svg { width: 15px; height: 15px; stroke: var(--wm-muted); fill: none; stroke-width: 2; flex-shrink: 0; }
.wm-admin-modal-search input { border: none; background: none; outline: none; font-size: .84rem; flex: 1; color: var(--wm-ink); }
.wm-admin-modal-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; }
.wm-admin-modal-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: .6rem; }
.wm-admin-modal-row:hover { background: var(--wm-tint); }
.wm-admin-modal-row .who { flex: 1; min-width: 0; }
.wm-admin-modal-row .who b, .wm-admin-modal-row .who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.wm-admin-mini-add-btn {
  font-size: .74rem;
  font-weight: 700;
  color: var(--wm-accent);
  background: var(--wm-accent-soft);
  border: none;
  border-radius: .5rem;
  padding: .3rem .65rem;
  cursor: pointer;
  flex-shrink: 0;
}
.wm-admin-mini-add-btn:hover { background: var(--wm-accent); color: #fff; }
.wm-admin-modal-empty { font-size: .8rem; color: var(--wm-muted); text-align: center; padding: 1.5rem 0; }

/* ============================================================
   고객센터(사용자쪽, /Support/New) 재구성(2026-09-16, Artifact 승인안 적용) — 기존엔
   .mypage-ai-card를 그대로 재활용해 문의 내용이 잘리고 질문/답변 구분이 없었다. 문의 등록은
   버튼→팝업(이 앱 전역 부트스트랩 모달 패턴)으로 옮기고, 문의 내역은 많아져도 훑어보기 쉽도록
   <details>로 접어 한 줄 요약만 기본 노출 — 답변 대기 중인 것만 기본으로 펼친다.
   ============================================================ */
.support-page-head { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.4rem; }
.support-page-icon {
  width: 46px; height: 46px; border-radius: .9rem;
  background: linear-gradient(135deg, var(--wm-accent), #7a5fc0);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.support-page-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.8; }
.support-page-head h1 { font-size: 1.3rem; font-weight: 800; margin: 0 0 .3rem; }
.support-page-head .sub { font-size: .82rem; color: var(--wm-muted); margin: 0; line-height: 1.5; }

.support-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; gap: .6rem; flex-wrap: wrap; }
.support-history-head h2 { font-size: .95rem; font-weight: 800; margin: 0; }
.support-new-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--wm-accent); color: #fff; border: none; border-radius: .55rem;
  padding: .5rem .9rem; font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.support-new-btn:hover { background: var(--wm-accent-hover); }
.support-new-btn svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.2; }

.support-chips { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.support-chip {
  font-size: .74rem; font-weight: 700; padding: .3rem .75rem; border-radius: 100px;
  background: var(--wm-tint); color: var(--wm-muted); cursor: pointer; border: none;
}
.support-chip.active { background: var(--wm-accent); color: #fff; }

/* 요약(summary)만 기본 노출, 클릭해야 질문/답변 전문이 펼쳐진다. */
.support-ticket-item { background: var(--wm-surface); border: 1px solid var(--wm-line); border-radius: .9rem; margin-bottom: .6rem; overflow: hidden; }
.support-ticket-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; }
.support-ticket-summary::-webkit-details-marker { display: none; }
.support-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .66rem; font-weight: 800; padding: .15rem .5rem; border-radius: 100px; white-space: nowrap; flex-shrink: 0; }
.support-pill.new { background: var(--wm-danger-soft); color: var(--wm-danger); }
.support-pill.progress { background: var(--wm-warning-soft); color: var(--wm-warning); }
.support-pill.resolved { background: var(--wm-success-soft); color: var(--wm-success); }
.support-t-subject { font-size: .86rem; font-weight: 800; flex-shrink: 0; }
.support-t-preview { font-size: .8rem; color: var(--wm-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-t-date { font-size: .72rem; color: var(--wm-muted); flex-shrink: 0; }
.support-chev { width: 14px; height: 14px; stroke: var(--wm-muted); fill: none; stroke-width: 2; flex-shrink: 0; transition: transform .15s; }
.support-ticket-item[open] .support-chev { transform: rotate(180deg); }
.support-ticket-item[open] .support-ticket-summary { border-bottom: 1px solid var(--wm-line); }

.support-ticket-body { padding: 1rem 1.1rem 1.1rem; }
.support-q-block { background: var(--wm-tint); border-radius: .7rem; padding: .8rem .9rem; font-size: .84rem; line-height: 1.6; color: var(--wm-ink); white-space: pre-wrap; }
.support-a-block { background: var(--wm-accent-soft); border-radius: .7rem; padding: .8rem .9rem; margin-top: .6rem; font-size: .84rem; line-height: 1.6; color: var(--wm-ink); white-space: pre-wrap; }
.support-a-label { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; color: var(--wm-accent); margin-top: .9rem; margin-bottom: .4rem; }
.support-a-label .mark { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--wm-logo-a), var(--wm-logo-b)); flex-shrink: 0; }
.support-a-time { font-size: .7rem; color: var(--wm-muted); margin-top: .35rem; }
.support-waiting-note { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; font-size: .78rem; color: var(--wm-muted); }
.support-waiting-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wm-warning); animation: support-pulse 1.4s ease-in-out infinite; }
@keyframes support-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.support-empty { font-size: .84rem; color: var(--wm-muted); text-align: center; padding: 2rem 0; }

.support-compose-field { margin-bottom: 1rem; }
.support-compose-field label { font-size: .78rem; font-weight: 700; color: var(--wm-ink); display: block; margin-bottom: .4rem; }