/* ==========================================================================
   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;

  --wm-bg: #FAFAF8;
  --wm-surface: #FFFFFF;
  --wm-ink: #1C1D22;
  --wm-muted: #726F66;
  --wm-line: #E7E4DB;

  --wm-accent: #33447A;
  --wm-accent-hover: #2A3865;
  --wm-accent-active: #253059;
  --wm-accent-soft: #EEF0F8;

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

  /* 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: 51, 68, 122;
  --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-control:focus, .form-check-input:focus, .form-select:focus {
  box-shadow: 0 0 0 .15rem var(--wm-bg), 0 0 0 .3rem rgba(51, 68, 122, .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: .78rem;
  font-weight: 600;
  color: var(--wm-muted);
  margin-bottom: .35rem;
}

.form-control, .form-select {
  border-color: var(--wm-line);
  border-radius: .55rem;
  background-color: var(--wm-surface);
  color: var(--wm-ink);
  padding: .55rem .85rem;
}
.form-control::placeholder {
  color: #A8A499;
}
.form-control:focus, .form-select:focus {
  border-color: var(--wm-accent);
  background-color: var(--wm-surface);
}
.form-control-sm, .form-select-sm {
  border-radius: .45rem;
  padding: .3rem .6rem;
}
textarea.form-control {
  min-height: 4.5rem;
}

.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;
  font-size: 1.05rem;
  border-radius: 11px;
  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;
}
.wm-auth-footer {
  text-align: center;
  font-size: .875rem;
  color: var(--wm-muted);
  margin-top: 1.25rem;
}

/* -------------------------------------------------------------------------
   List group (used for the Meetings index and Search results)
   ------------------------------------------------------------------------- */

.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;
}
.wm-brand .wm-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background-color: var(--wm-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  flex-shrink: 0;
}

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

/* Mobile: a Bootstrap .collapse panel dropping down under the header.
   Desktop (md+): always visible as the ordinary horizontal nav row —
   overriding .collapse's display:none regardless of the JS-toggled .show
   class, since above md there's no toggle button to click in the first place. */
.wm-nav-collapse {
  flex-basis: 100%;
}
@media (max-width: 767.98px) {
  .wm-nav-collapse {
    border-top: 1px solid var(--wm-line);
    margin-top: .5rem;
    padding-top: .5rem;
  }
  .wm-nav-collapse .wm-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .wm-nav-collapse .wm-navlink {
    padding: .65rem .25rem;
    border-bottom: none;
    border-left: 3px solid transparent;
    padding-left: .6rem;
  }
  .wm-nav-collapse .wm-navlink.active {
    border-left-color: var(--wm-accent);
    background-color: var(--wm-accent-soft);
    border-radius: .375rem;
  }
  .wm-nav-collapse .wm-nav-user {
    border-top: 1px solid var(--wm-line);
    margin-top: .5rem;
    padding-top: .75rem;
    justify-content: space-between;
  }
}
@media (min-width: 768px) {
  .wm-nav-toggle {
    display: none;
  }
  .wm-nav-collapse {
    display: flex !important;
    align-items: center;
    flex-basis: auto;
    flex-grow: 1;
    gap: 1rem;
  }
}

.wm-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.wm-nav .wm-navlink {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--wm-muted);
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.wm-nav .wm-navlink:hover {
  color: var(--wm-ink);
}
.wm-nav .wm-navlink.active {
  color: var(--wm-ink);
  border-bottom-color: var(--wm-accent);
}
.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-user {
  font-size: .82rem;
  color: var(--wm-muted);
}

footer.wm-footer {
  border-top: 1px solid var(--wm-line) !important;
  color: var(--wm-muted) !important;
}

/* -------------------------------------------------------------------------
   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;
}

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

/* 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;
  font-size: 1.35rem;
  border-radius: 14px;
}
.wm-hero h1 {
  font-size: 1.75rem;
}

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

/* 빠른 시작/최근 미팅을 검색창(.wm-ask-box)과 같은 너비로 맞춰 홈 화면 전체가 하나의 세로축에 정렬되게 한다. */
.wm-home-section {
  max-width: 640px;
}
.wm-ask-box .form-control {
  border-radius: 100px;
  padding: .9rem 3.25rem .9rem 1.25rem;
  border-color: var(--wm-line);
  font-size: 1rem;
}
.wm-ask-box .form-control:focus {
  border-color: var(--wm-accent);
  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-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;
}