@charset "utf-8";

/* =============================================================

 * Under Basic Board — Modern Card UI

 * Scope: .ub-board  |  No Bootstrap  |  No :root

 * ============================================================= */

/* ─────────────────────────────────────────

   1. 디자인 토큰 (.ub-board 스코프)

───────────────────────────────────────── */

.ub-board {
  /* Base + deep indigo depth (premium): base #615dfa, hover #4f46e5, deep #4338ca/#3730a3 */

  --c-primary: #615dfa;

  --c-primary-h: #4f46e5;

  --c-primary-deep: #4338ca;

  --c-primary-ink: #3730a3;

  --c-primary-light: #eeecff;

  --c-primary-ring: rgb(79 70 229 / 0.22);

  --c-accent: #23d2e2;

  --c-accent-h: #1bc5d4;

  --c-accent-light: #e8fbfc;

  --c-success: #059669;

  --c-warning: #d97706;

  --c-info: #23d2e2;

  --c-danger: #dc2626;

  /* CTA: deep indigo stack */

  --c-cta-1: #5b57f0;

  --c-cta-2: #4338ca;

  --c-cta-1h: #4f46e5;

  --c-cta-2h: #3730a3;

  --t-base: #2e2e47;

  --t-medium: #3e3f5e;

  --t-muted: #adafca;

  --t-subtle: #dedeea;

  --t-white: #ffffff;

  --s-page: #f8f8fc;

  --s-card: #ffffff;

  --s-hover: #f4f4fc;

  --s-active: #eeecff;

  --b-subtle: #f0f0f8;

  --b-default: #dedeea;

  --b-strong: #adafca;

  --b-focus: #4f46e5;

  --sh-xs: none;

  --sh-sm: none;

  --sh-md: none;

  --sh-lg: none;

  --sh-inset: none;

  --r-xs: 6px;

  --r-sm: 8px;

  --r-md: 12px;

  --r-lg: 16px;

  --r-xl: 20px;

  --r-full: 9999px;

  --sp-1: 0.25rem;

  --sp-2: 0.5rem;

  --sp-3: 0.75rem;

  --sp-4: 1rem;

  --sp-5: 1.25rem;

  --sp-6: 1.5rem;

  --sp-8: 2rem;

  --sp-10: 2.5rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --dur-fast: 160ms;

  --dur-base: 220ms;

  --dur-slow: 360ms;

  --head-primary: var(--c-primary);

  --head-secondary: #3e3f5e;

  --head-success: #059669;

  --head-danger: #dc2626;

  --head-warning: #d97706;

  --head-info: #23d2e2;

  --head-dark: #312e81;

  --head-light: #dedeea;

  /* accent chips: subtle vertical gradient */

  --mbb-accent-grad: linear-gradient(
    180deg,
    #6366f1 0%,
    #4f46e5 52%,
    #4338ca 100%
  );

  --mbb-accent-grad-hover: linear-gradient(
    180deg,
    #6d6ff7 0%,
    #5753e4 52%,
    #4f46e5 100%
  );

  --mbb-accent-shadow-chip: none;

  --mbb-cta-grad: linear-gradient(
    180deg,
    var(--c-cta-1) 0%,
    var(--c-cta-2) 100%
  );

  --mbb-cta-grad-hover: linear-gradient(
    180deg,
    var(--c-cta-1h) 0%,
    var(--c-cta-2h) 100%
  );

  --mbb-cta-shadow-btn: none;

  --mbb-chip-r: 8px;

  --mbb-pin-gold: #a5b4fc;

  --mbb-pin-ink: #eef2ff;

  --mbb-pin-badge-grad: linear-gradient(180deg, #4338ca 0%, #312e81 100%);

  --mbb-pin-badge-ring: rgb(99 102 241 / 0.55);

  --mbb-pin-card-line: rgb(79 70 229 / 0.45);

  --mbb-pin-card-glow: rgb(67 56 202 / 0.18);

  --mbb-pin-card-glow-wide: rgb(55 48 163 / 0.1);

  box-sizing: border-box;

  color: var(--t-base);

  font-size: 0.9375rem;

  line-height: 1.65;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;
}

.ub-board *,
.ub-board *::before,
.ub-board *::after {
  box-sizing: inherit;
}

.ub-board a {
  color: inherit;
  text-decoration: none;
}

/* ─────────────────────────────────────────

   2. 레이아웃 유틸

───────────────────────────────────────── */

.ub-board .ub-flex {
  display: flex;
}

.ub-board .ub-flex-wrap {
  flex-wrap: wrap;
}

.ub-board .ub-items-center {
  align-items: center;
}

.ub-board .ub-justify-center {
  justify-content: center;
}

.ub-board .ub-justify-end {
  justify-content: flex-end;
}

.ub-board .ub-grow {
  flex-grow: 1;
}

.ub-board .ub-shrink-0 {
  flex-shrink: 0;
}

.ub-board .ub-block {
  display: block;
}

.ub-board .ub-none {
  display: none;
}

.ub-board .ub-relative {
  position: relative;
}

.ub-board .ub-absolute {
  position: absolute;
}

.ub-board .ub-clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* spacing */

.ub-board .ub-mb-0 {
  margin-bottom: 0;
}

.ub-board .ub-mb-2 {
  margin-bottom: var(--sp-2);
}

.ub-board .ub-mb-3 {
  margin-bottom: var(--sp-3);
}

.ub-board .ub-mb-4 {
  margin-bottom: var(--sp-4);
}

.ub-board .ub-mt-1 {
  margin-top: var(--sp-1);
}

.ub-board .ub-mt-2 {
  margin-top: var(--sp-2);
}

.ub-board .ub-mt-3 {
  margin-top: var(--sp-3);
}

.ub-board .ub-my-1 {
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-1);
}

.ub-board .ub-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.ub-board .ub-p-2 {
  padding: var(--sp-2);
}

.ub-board .ub-p-3 {
  padding: var(--sp-3);
}

.ub-board .ub-px-1 {
  padding-left: var(--sp-1);
  padding-right: var(--sp-1);
}

.ub-board .ub-px-2 {
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
}

.ub-board .ub-px-3 {
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
}

.ub-board .ub-py-1 {
  padding-top: var(--sp-1);
  padding-bottom: var(--sp-1);
}

.ub-board .ub-py-2 {
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

.ub-board .ub-py-4 {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}

.ub-board .ub-pl-2 {
  padding-left: var(--sp-2);
}

.ub-board .ub-pl-3 {
  padding-left: var(--sp-3);
}

.ub-board .ub-pr-2 {
  padding-right: var(--sp-2);
}

.ub-board .ub-pr-3 {
  padding-right: var(--sp-3);
}

.ub-board .ub-pt-2 {
  padding-top: var(--sp-2);
}

.ub-board .ub-pt-3 {
  padding-top: var(--sp-3);
}

.ub-board .ub-pb-3 {
  padding-bottom: var(--sp-3);
}

/* 텍스트 */

.ub-board .ub-text-sm {
  font-size: 0.875rem;
}

.ub-board .ub-text-xs {
  font-size: 0.8125rem;
}

.ub-board .ub-text-muted {
  color: var(--t-muted);
}

.ub-board .ub-text-primary {
  color: var(--c-primary);
}

.ub-board .ub-font-normal {
  font-weight: 400;
}

.ub-board .ub-font-bold {
  font-weight: 600;
}

.ub-board .ub-nowrap {
  white-space: nowrap;
}

.ub-board .ub-break-all {
  word-break: break-all;
}

.ub-board .ub-en {
  font-variant-numeric: tabular-nums;
}

.ub-board .ub-text-center {
  text-align: center;
}

.ub-board .ub-text-left {
  text-align: left;
}

.ub-board .ub-text-right {
  text-align: right;
}

/* 배경·테두리 */

.ub-board .ub-bg-light {
  background: var(--s-hover);
}

.ub-board .ub-bg-strong {
  background: var(--b-subtle);
}

.ub-board .ub-border-top {
  border-top: 1px solid var(--b-default);
}

.ub-board .ub-border-bottom {
  border-bottom: 1px solid var(--b-default);
}

.ub-board .ub-border-left-0 {
  border-left: 0;
}

.ub-board .ub-accent {
  color: var(--c-accent);
}

.ub-board .ub-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;
  overflow: hidden;

  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────

   3. 버튼

───────────────────────────────────────── */

.ub-board .ub-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.4em;

  padding: 0.5rem 1rem;

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.4;

  letter-spacing: 0.01em;

  border: 1px solid transparent;

  border-radius: var(--r-sm);

  cursor: pointer;

  text-decoration: none;

  white-space: nowrap;

  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.ub-board .ub-btn:focus-visible {
  outline: 2px solid var(--c-primary);

  outline-offset: 2px;
}

.ub-board .ub-btn:active {
  transform: translateY(1px);
}

/* primary — 카드 버튼·칩과 동일 액센트 그라데이션 */

.ub-board .ub-btn--primary {
  background: #615dfa;

  color: var(--t-white);

  border-color: transparent;

  box-shadow: none;
}

.ub-board .ub-btn--primary:hover {
  background: #7370fb;

  border-color: transparent;

  color: var(--t-white);

  box-shadow: none;

  transform: translateY(-1px);
}

/* basic / outline */

.ub-board .ub-btn--basic {
  background: var(--s-card);

  color: var(--t-medium);

  border-color: var(--b-default);

  box-shadow: none;
}

.ub-board .ub-btn--basic:hover {
  background: var(--s-hover);

  border-color: var(--b-strong);

  color: var(--t-base);

  box-shadow: none;

  transform: translateY(-1px);
}

/* ghost */

.ub-board .ub-btn--ghost {
  background: transparent;

  color: var(--t-muted);

  border-color: transparent;
}

.ub-board .ub-btn--ghost:hover {
  background: var(--s-hover);

  color: var(--t-medium);
}

/* sizes */

.ub-board .ub-btn--sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
  border-radius: var(--r-xs);
}

.ub-board .ub-btn--lg {
  padding: 0.7rem 1.5rem;
  font-size: 1rem;
  border-radius: var(--r-sm);
  font-weight: 600;
}

.ub-board .ub-btn--block {
  width: 100%;
}

/* group */

.ub-board .ub-btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.ub-board .ub-btn-group--vertical {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-1);
}

.ub-board .ub-btn-group--vertical .ub-btn {
  justify-content: flex-start;
}

/* ─────────────────────────────────────────

   4. 폼 요소

───────────────────────────────────────── */

.ub-board .ub-input,
.ub-board .ub-select,
.ub-board .ub-textarea {
  display: block;

  width: 100%;

  padding: 0.5625rem 0.875rem;

  font-size: 0.9375rem;

  line-height: 1.5;

  color: var(--t-base);

  background: var(--s-card);

  border: 1.5px solid var(--b-default);

  border-radius: var(--r-sm);

  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.ub-board .ub-input:hover,
.ub-board .ub-select:hover,
.ub-board .ub-textarea:hover {
  border-color: var(--b-strong);
}

.ub-board .ub-input:focus,
.ub-board .ub-select:focus,
.ub-board .ub-textarea:focus {
  border-color: var(--c-primary);

  outline: 0;

  box-shadow: none;
}

.ub-board .ub-input::placeholder,
.ub-board .ub-textarea::placeholder {
  color: var(--t-subtle);
}

.ub-board .ub-select {
  cursor: pointer;

  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 0.8rem center;

  padding-right: 2.25rem;
}

.ub-board .ub-textarea {
  resize: vertical;
  min-height: 110px;
}

/* input-group */

.ub-board .ub-input-group {
  display: flex;

  align-items: stretch;

  border: 1.5px solid var(--b-default);

  border-radius: var(--r-sm);

  overflow: hidden;

  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.ub-board .ub-input-group:focus-within {
  border-color: var(--c-primary);

  box-shadow: none;
}

.ub-board .ub-input-group .ub-input {
  border: 0;
  border-radius: 0;
  flex: 1;
  min-width: 0;

  box-shadow: none !important;
}

.ub-board .ub-input-group .ub-btn {
  border: 0;
  border-radius: 0;
  flex-shrink: 0;

  align-self: flex-end;

  min-width: 72px;

  padding: var(--sp-3) var(--sp-4);

  font-size: 0.875rem;
}

.ub-board .ub-input-group .ub-textarea {
  border: 0;
  border-radius: 0;
  flex: 1;
  min-width: 0;

  box-shadow: none !important;

  min-height: 90px;

  padding: var(--sp-3) var(--sp-4);

  resize: none;
}

.ub-board .ub-input-group-text {
  display: flex;
  align-items: center;

  padding: 0.5rem 0.75rem;

  background: var(--s-hover);

  color: var(--t-muted);

  font-size: 0.875rem;

  border-right: 1.5px solid var(--b-default);
}

/* 체크/라디오 */

.ub-board .ub-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.ub-board .ub-check input {
  width: 1.0625rem;
  height: 1.0625rem;
  accent-color: var(--c-primary);
}

.ub-board .ub-check-inline {
  display: inline-flex;
  margin-right: 1rem;
}

/* 폼 레이아웃 */

.ub-board .ub-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-weight: 500;
  color: var(--t-medium);
}

.ub-board .ub-field {
  margin-bottom: var(--sp-4);
}

.ub-board .ub-field:last-child {
  margin-bottom: 0;
}

.ub-board .ub-form-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--sp-1) * -1);
  margin-bottom: 15px;
}

.ub-board .ub-form-row > * {
  padding: 0 var(--sp-1);
}

.ub-board .ub-form-plain {
  padding-top: var(--sp-1);
  padding-bottom: 0;
}

/* write form ub-form-plain padding: handled per-context below */

/* 글쓰기폼 레이블/바디 (기본: flexbox, #bo_w 안에서는 Grid로 오버라이드됨) */

.ub-board .ub-form-row--write {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  width: 100%;

  box-sizing: border-box;
}

.ub-board .ub-form-label-col {
  flex: 0 0 90px;

  max-width: 90px;

  padding-right: var(--sp-2);

  font-size: 0.875rem;

  font-weight: 600;

  color: var(--t-medium);
}

.ub-board .ub-form-label-col label {
  margin-bottom: 0;
  font-weight: 600;
  color: var(--t-medium);
  font-size: 0.875rem;
}

.ub-board .ub-form-body-col {
  flex: 1;

  min-width: 0;
}

.ub-board .ub-form-row--write .ub-form-body-col {
  flex: 1;
  min-width: 0;
  max-width: none;
}

.ub-board .ub-form-row--write .ub-form-body-col-full {
  flex: 1;
  min-width: 0;
  max-width: none;
}

/* ─────────────────────────────────────────

   5. 카드 / 패널

───────────────────────────────────────── */

.ub-board .ub-card {
  background: var(--s-card);

  border: 1px solid var(--b-default);

  border-radius: var(--r-md);

  box-shadow: none;

  overflow: hidden;
}

.ub-board .ub-card--flat {
  box-shadow: none;
}

/* ─────────────────────────────────────────

   6. 리스트 (글쓰기폼·설정)

───────────────────────────────────────── */

.ub-board .ub-list {
  list-style: none;
  margin: 0;
  padding: 0;

  background: var(--s-card);

  border: 1px solid var(--b-default);

  border-radius: var(--r-md);

  box-shadow: none;

  overflow: hidden;
}

.ub-board .ub-list-item {
  padding: var(--sp-4) var(--sp-6);

  border-bottom: 1px solid var(--b-subtle);

  background: var(--s-card);
}

.ub-board .ub-list-item:last-child {
  border-bottom: 0;
}

.ub-board .ub-list-item--first {
  border-top: 0;
}

.ub-board .ub-list-item--header {
  background: var(--s-hover);
  font-weight: 600;
}

.ub-board .ub-write-list .ub-list-item {
  padding: var(--sp-4) var(--sp-6);
}

/* ─────────────────────────────────────────

   7. 게시글 목록 — Premium Flat List

   Inspired by Linear / Vercel dashboard UI

───────────────────────────────────────── */

/* 색띠: 카드 액센트 컬러 식별용 (2px) */

.ub-board .ublist-bar {
  height: 2px;
}

/* ── 컬럼 헤더 ── */

.ub-board .ublist-head {
  display: flex;

  align-items: center;

  height: 52px;

  padding: 0 24px;

  background: #f8fafc;

  border-bottom: 1px solid rgba(15, 23, 42, 0.06);

  gap: 0;
}

/* 헤더 ubr__body → 가로 배치 */

.ub-board .ublist-head .ubr__body {
  flex-direction: row;

  align-items: center;

  gap: 8px;
}

.ub-board .ublist-head .ubr__no,
.ub-board .ublist-head .ubr__body span,
.ub-board .ublist-head .ubr__author,
.ub-board .ublist-head .ubr__date,
.ub-board .ublist-head .ubr__hit,
.ub-board .ublist-head .ubr__good,
.ub-board .ublist-head .ubr__nogood {
  font-size: 0.8125rem;

  font-weight: 600;

  letter-spacing: 0.02em;

  color: #8898aa;
}

.ub-board .ublist-head .ubr__date a,
.ub-board .ublist-head .ubr__hit a,
.ub-board .ublist-head .ubr__good a,
.ub-board .ublist-head .ubr__nogood a {
  color: inherit;
  text-decoration: none;

  transition: color 120ms ease;
}

.ub-board .ublist-head .ubr__date a:hover,
.ub-board .ublist-head .ubr__hit a:hover {
  color: var(--c-primary);
}

/* 모든 head 색상 옵션에서도 헤더는 항상 클린하게 */

.ub-board .ublist-head[class*="ub-head-"] {
  background: #f8fafc !important;

  color: #94a3b8 !important;
}

/* ── 목록 ul ── */

.ub-board .ublist-body {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ─────────────────────────────────────────

   7-1. 구인구직(UJB) 리스트 전용 UI

   list.skin.php 는 ujb-* 클래스를 사용한다.
   (필터바/칩/배지/요약서브텍스트) — 기존 ublist/ubr 스타일에 “얹는” 방식.

───────────────────────────────────────── */

/* 필터바: 상단 탭 + 상태 칩 */
.ub-board .ujb-filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 12px 16px;
  margin: 0 0 6px;

  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.ub-board .ujb-filterbar__group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ub-board .ujb-filterbar__group--right {
  justify-content: flex-end;
}

/* 타입 탭(전체/구인/구직) */
.ub-board .ujb-filterbar__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 34px;
  padding: 0 12px;

  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;

  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #475569;

  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 120ms ease;
}

.ub-board a.ujb-filterbar__tab:hover {
  background: #f8f9ff;
  border-color: rgba(79, 70, 229, 0.22);
  color: #4338ca;
  transform: translateY(-1px);
}

.ub-board .ujb-filterbar__tab.is-active {
  background: var(--mbb-accent-grad);
  border-color: transparent;
  color: #fff;
}

/* 상태 칩(전체/모집중/협의중/마감) */
.ub-board .ujb-filterbar__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 28px;
  padding: 0 10px;

  border-radius: 9999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;

  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;

  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 120ms ease;
}

.ub-board a.ujb-filterbar__chip:hover {
  background: #eeecff;
  border-color: rgba(79, 70, 229, 0.22);
  color: #4338ca;
  transform: translateY(-1px);
}

.ub-board .ujb-filterbar__chip.is-active {
  background: rgba(79, 70, 229, 0.12);
  border-color: rgba(79, 70, 229, 0.22);
  color: #4338ca;
}

/* 리스트 행: UJB 서브 정보(급여/지역/근무/마감) */
.ub-board .ujb-row__sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;

  margin-top: 2px;
  min-height: 18px;
}

.ub-board .ujb-subtext {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* 서브텍스트 구분점(·) */
.ub-board .ujb-subtext + .ujb-subtext::before {
  content: "·";
  color: rgba(15, 23, 42, 0.18);
  font-weight: 700;
}

/* 우측 배지 래퍼 */
.ub-board .ujb-row__right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  padding-right: 8px;
}

/* 작성자: 기존 .ubr__author 와 다르게 UJB는 span */
.ub-board .ujb-row__author {
  width: 92px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* UJB 공통 배지 */
.ub-board .ujb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 9px;

  border-radius: 9999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #ffffff;

  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #64748b;

  white-space: nowrap;
}

/* 급여 배지 */
.ub-board .ujb-badge--pay {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.2);
  color: #e11d48;
}

/* 승인 대기/숨김 배지(관리자) */
.ub-board .ujb-badge--wait {
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.25);
  color: #b45309;
}

/* 모바일 메타 안의 미니 텍스트 */
.ub-board .ujb-mini {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
}

@media (max-width: 767px) {
  .ub-board .ujb-filterbar {
    padding: 10px 12px;
    gap: 8px;
  }

  .ub-board .ujb-filterbar__tab {
    height: 32px;
    padding: 0 10px;
    font-size: 0.8125rem;
  }

  .ub-board .ujb-filterbar__chip {
    height: 26px;
    padding: 0 9px;
    font-size: 0.75rem;
  }

  .ub-board .ujb-row__sub {
    margin-top: 4px;
    gap: 5px;
  }

  .ub-board .ujb-subtext {
    font-size: 0.75rem;
    white-space: normal;
  }
}

/* ── 행 (핵심 디자인) ── */

.ub-board .ubr {
  display: flex;

  align-items: center;

  padding: 0 24px;

  height: 58px;

  gap: 0;

  border-bottom: 1px solid rgba(15, 23, 42, 0.04);

  position: relative;

  z-index: 0;

  /* 호버 시 나타날 왼쪽 액센트 준비 */

  box-shadow: none;

  transition:
    background 130ms ease,
    box-shadow 130ms ease;
}

.ub-board .ubr:last-child {
  border-bottom: 0;
}

/* 호버 — 왼쪽 인디고 라인 + 은은한 외부 shadow */

.ub-board .ubr:hover {
  background: #f8f9ff;

  z-index: 1;

  box-shadow: none;
}

/* 공지 행 — 은은한 인디고 배경 + 상시 왼쪽 액센트로 공지임을 직관적으로 표현 */

.ub-board .ubr--notice {
  background: linear-gradient(to right, #f8f8fc 0%, #faf8f4 55%, #fcfaf6 100%);

  box-shadow: none; /* 세이지 리스트 액센트 */
}

.ub-board .ubr--notice:hover {
  background: linear-gradient(to right, #e0e7ff 0%, #f8f8fc 55%, #f9f6f1 100%);

  box-shadow: none;
}

.ub-board .ubr--notice:last-child {
  border-radius: 0px !important;

  border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
}

/* 현재글 행 */

.ub-board .ubr--current {
  background: #f5f0e8;
}

.ub-board .ubr--current:hover {
  background: #eeecff;

  box-shadow: none;
}

/* 행 진입 스태거 애니메이션 */

@keyframes ubRowIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ub-board .ubr {
  animation: ubRowIn 240ms ease both;
}

.ub-board .ubr:nth-child(1) {
  animation-delay: 0ms;
}

.ub-board .ubr:nth-child(2) {
  animation-delay: 30ms;
}

.ub-board .ubr:nth-child(3) {
  animation-delay: 60ms;
}

.ub-board .ubr:nth-child(4) {
  animation-delay: 90ms;
}

.ub-board .ubr:nth-child(5) {
  animation-delay: 120ms;
}

.ub-board .ubr:nth-child(6) {
  animation-delay: 150ms;
}

.ub-board .ubr:nth-child(7) {
  animation-delay: 180ms;
}

.ub-board .ubr:nth-child(8) {
  animation-delay: 210ms;
}

.ub-board .ubr:nth-child(9) {
  animation-delay: 240ms;
}

.ub-board .ubr:nth-child(10) {
  animation-delay: 270ms;
}

/* ── 번호 열 ── */

.ub-board .ubr__no {
  flex: 0 0 52px;

  text-align: center;

  font-size: 0.75rem;

  color: #d4dbe4;

  font-variant-numeric: tabular-nums;

  font-weight: 400;
}

/* ── 제목 + 모바일 메타 ── */

.ub-board .ubr__body {
  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 2px;
}

.ub-board .ubr__title {
  display: flex;

  align-items: center;

  gap: 7px;

  flex-wrap: nowrap;
}

/* 제목 + 아이콘 그룹

   - flex: 1 로 남은 공간 전부 차지

   - overflow: hidden 으로 긴 제목 말줄임 컨테이너 역할

*/

.ub-board .ubr__title-text {
  flex: 1;

  min-width: 0;

  display: flex;

  align-items: center;

  gap: 5px;

  overflow: visible;
}

.ub-board .ubr__link {
  font-size: 0.9375rem;

  font-weight: 600;

  color: #0f172a;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  /* flex: 0 1 auto — 자연 너비만 차지, 필요 시 줄어들어 ellipsis */

  flex: 0 1 auto;

  min-width: 0;

  transition: color 120ms ease;

  letter-spacing: -0.015em;

  line-height: 1.4;
}

.ub-board .ubr__link:hover {
  color: var(--c-primary);
}

.ub-board .ubr__link:visited {
  color: #8892a0;
}

/* 댓글 수 뱃지 */

.ub-board .ubr__cmt {
  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 20px;
  height: 20px;
  padding: 0 7px;

  font-size: 0.6875rem;
  font-weight: 700;

  color: #fff;

  background: #f43f5e;

  border-radius: 9999px;

  letter-spacing: 0;

  box-shadow: none;

  position: relative;

  top: -2px;

  align-self: flex-start;
}

/* 모바일 메타 (기본 숨김) */

.ub-board .ubr__mobile-meta {
  display: none;

  align-items: center;

  flex-wrap: wrap;

  gap: 6px;

  font-size: 0.75rem;

  color: #94a3b8;

  line-height: 1;
}

.ub-board .ubr__sep {
  color: #e2e8f0;
  font-size: 0.75rem;
}

/* ── 데스크탑 컬럼들 ── */

.ub-board .ubr__cols {
  display: flex;

  align-items: center;

  flex-shrink: 0;
}

.ub-board .ubr__author {
  width: 90px;

  text-align: center;

  font-size: 0.8125rem;

  font-weight: 500;

  color: #475569;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  padding: 0 4px;
}

.ub-board .ubr__date {
  width: 96px;

  text-align: center;

  font-size: 0.75rem;

  color: #94a3b8;

  font-variant-numeric: tabular-nums;
}

.ub-board .ubr__hit {
  width: 52px;

  text-align: center;

  font-size: 0.75rem;

  color: #94a3b8;

  font-variant-numeric: tabular-nums;
}

.ub-board .ubr__good {
  width: 48px;

  text-align: center;

  font-size: 0.75rem;

  color: var(--c-primary);

  font-variant-numeric: tabular-nums;
}

.ub-board .ubr__nogood {
  width: 48px;

  text-align: center;

  font-size: 0.75rem;

  color: #94a3b8;

  font-variant-numeric: tabular-nums;
}

/* ── 공지/열람 뱃지 (프리미엄 pill) ── */

.ub-board .ubr__badge {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 3px 10px;

  border-radius: 9999px;

  font-size: 0.6875rem;

  font-weight: 800;

  letter-spacing: 0.06em;

  white-space: nowrap;

  line-height: 1.5;
}

.ub-board .ubr__badge--notice {
  background: linear-gradient(135deg, #475569 0%, #5753e4 100%);

  color: #fff;

  box-shadow: none;

  /* 두근두근 심장박동 애니메이션 */

  animation: ubNoticePulse 4s ease-in-out infinite;

  transform-origin: center;
}

/* 두근두근 (lub-dub 두 번 박동 후 정지) */

@keyframes ubNoticePulse {
  0% {
    transform: scale(1);
    box-shadow: none;
  }

  8% {
    transform: scale(1.07);
    box-shadow: none;
  }

  16% {
    transform: scale(1);
    box-shadow: none;
  }

  24% {
    transform: scale(1.05);
    box-shadow: none;
  }

  34% {
    transform: scale(1);
    box-shadow: none;
  }

  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

.ub-board .ubr__badge--current {
  background: #f8f8fc;

  color: #5753e4;

  border: 1px solid #c7d2fe;

  font-size: 0.6875rem;
}

/* ── 목록 인라인 아이콘 (Font Awesome 기반, GIF 미사용) ── */

.ub-board .ubr__icon {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  font-size: 0.6875rem;

  font-weight: 800;

  line-height: 1;
}

/* 비밀 */

.ub-board .ubr__icon--secret {
  color: #94a3b8;

  font-size: 0.75rem;
}

/* 답글 */

.ub-board .ubr__icon--reply {
  color: #94a3b8;

  font-size: 0.6875rem;
}

/* 첨부파일 (링크 앞에 위치) */

.ub-board .ubr__icon--file {
  color: #475569;

  font-size: 0.75rem;
}

/* HOT */

.ub-board .ubr__icon--hot {
  color: #fff;

  background: linear-gradient(135deg, #f43f5e, #e11d48);

  padding: 2px 6px;

  border-radius: 9999px;

  letter-spacing: 0.06em;

  box-shadow: none;
}

/* NEW */

.ub-board .ubr__icon--new {
  color: #fff;

  background: linear-gradient(135deg, #475569, #5753e4);

  padding: 2px 6px;

  border-radius: 9999px;

  box-shadow: none;
}

/* 댓글수 호환 */

.ub-board .count-plus.orangered {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  font-size: 0.5625rem;
  font-weight: 800;

  color: #f43f5e;
  background: rgba(244, 63, 94, 0.08);

  border-radius: 9999px;
  margin-left: 4px;
  vertical-align: middle;
}

.ub-board .orangered {
  color: #f43f5e;
}

/* ── 빈 게시물 ── */

.ub-board .ublist-empty {
  padding: 4rem 1.5rem;

  text-align: center;

  font-size: 0.9375rem;

  color: #94a3b8;
}

.ub-board .ublist-empty .sk-ico {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 0.75rem;
  background-color: #cbd5e1;
  opacity: 0.9;
}

.ub-board .ublist-empty p {
  margin: 0 0 0.4rem;

  font-size: 0.95rem;

  color: #64748b;
}

.ub-board .ublist-empty small {
  font-size: 0.8rem;

  color: #b0bec5;

  display: block;

  margin-bottom: 20px;
}

.ub-board .ublist-empty__back {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  margin-top: 8px;

  padding: 9px 22px;

  border-radius: 99px;

  border: 1.5px solid #e2e8f0;

  background: #fff;

  color: #5753e4;

  font-size: 0.84rem;

  font-weight: 700;

  text-decoration: none;

  transition:
    background 0.18s,
    border-color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;

  box-shadow: none;
}

.ub-board .ublist-empty__back:hover {
  background: #f8f8fc;

  border-color: #adafca;

  box-shadow: none;

  transform: translateY(-2px);
}

/* ── 목록 헤드 컬러 (ublist-bar 전용, ublist-head는 항상 클린) ── */

.ub-board .ub-head-primary {
  background: none;
  color: inherit;
}

.ub-board .ub-head-secondary {
  background: none;
  color: inherit;
}

.ub-board .ub-head-success {
  background: none;
  color: inherit;
}

.ub-board .ub-head-danger {
  background: none;
  color: inherit;
}

.ub-board .ub-head-warning {
  background: none;
  color: inherit;
}

.ub-board .ub-head-info {
  background: none;
  color: inherit;
}

.ub-board .ub-head-dark {
  background: none;
  color: inherit;
}

.ub-board .ub-head-light {
  background: none;
  color: inherit;
}

/* ublist-bar에 색상 적용 */

.ub-board .ub-bar-primary {
  box-shadow: none;
}

.ub-board .ub-bar-secondary {
  background: #475569;
}

.ub-board .ub-bar-success {
  background: #10b981;
}

.ub-board .ub-bar-danger {
  background: #ef4444;
}

.ub-board .ub-bar-warning {
  background: #f59e0b;
}

.ub-board .ub-bar-info {
  background: #0ea5e9;
}

.ub-board .ub-bar-dark {
  background: #0f172a;
}

.ub-board .ub-bar-light {
  background: #e2e8f0;
}

/* na-bar (분류 구분자) */

.ub-board .na-bar {
  color: #cbd5e1;
  margin: 0 6px;
}

/* ─── display:table 호환 (view.skin.php 데이터 섹션용) ─── */

.ub-board .ub-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.ub-board ul.ub-table {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ub-board .ub-table-row {
  display: table-row;
}

.ub-board .ub-table-cell {
  display: table-cell;
  vertical-align: middle;
  padding: var(--sp-3) var(--sp-4);
}

.ub-board .ub-d-none {
  display: none !important;
}

.ub-board .ub-nw-6 {
  width: 7%;
}

/* na-item 호환 (view 페이지에서 사용) */

.ub-board .na-subject {
  color: var(--t-base);
  font-weight: 500;
  transition: color 120ms ease;
}

.ub-board .na-subject:hover {
  color: var(--c-primary);
}

.ub-board .na-title {
  line-height: 1.5;
}

.ub-board .na-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ub-board .na-info {
  margin-left: 4px;
}

/* ─────────────────────────────────────────

   8. 검색 박스 / 알림

───────────────────────────────────────── */

.ub-board .ub-search-box {
  background: var(--s-card);

  border: 1px solid var(--b-default);

  border-radius: var(--r-md);

  box-shadow: none;

  padding: var(--sp-5);

  margin-bottom: var(--sp-4);
}

.ub-board .ub-alert {
  padding: var(--sp-5);

  border-radius: var(--r-md);

  text-align: center;
}

.ub-board .ub-alert--light {
  background: var(--s-hover);

  border: 1px solid var(--b-default);
}

/* ─────────────────────────────────────────

   9. 드롭다운

───────────────────────────────────────── */

.ub-board .ub-dropdown {
  position: relative;
  display: inline-block;
}

.ub-board .ub-dropdown__menu {
  position: absolute;

  top: calc(100% + 6px);

  right: 0;

  z-index: 200;

  min-width: 100%;

  padding: 4px;

  background: var(--s-card);

  border: 1px solid rgba(15, 23, 42, 0.09);

  border-radius: var(--r-md);

  box-shadow: none;

  display: none;

  transform-origin: top right;

  animation: ubDropIn var(--dur-base) var(--ease);
}

.ub-board .ub-dropdown.is-open .ub-dropdown__menu {
  display: block;
}

/* 드롭다운 내부 버튼그룹 — 전폭 차지 */

.ub-board .ub-dropdown__menu .ub-btn-group--vertical {
  display: flex;

  flex-direction: column;

  align-items: stretch;

  width: 100%;

  gap: 2px;
}

/* 드롭다운 내부 버튼 — 컴팩트 */

.ub-board .ub-dropdown__menu .ub-btn {
  width: 100%;

  justify-content: flex-start;

  border-radius: var(--r-xs);

  padding: 0.4rem 0.75rem;

  font-size: 0.8125rem;

  font-weight: 500;

  height: auto;

  line-height: 1.5;

  gap: 0.5em;
}

.ub-board .ub-dropdown__menu .ub-btn:hover {
  background: var(--s-active);
  color: var(--c-primary);
}

/* 구분선 */

.ub-board .ub-dropdown__divider {
  height: 1px;

  background: rgba(15, 23, 42, 0.06);

  margin: 3px 6px;
}

@keyframes ubDropIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ─────────────────────────────────────────

   10. 접기 (검색창 등)

───────────────────────────────────────── */

.ub-board .ub-collapse {
  display: none;
  overflow: hidden;
}

.ub-board .ub-collapse.is-open {
  display: block;
}

/* ──────────────────────────────────────────────────

   검색창 — 바텀시트

   JS(requestAnimationFrame)가 애니메이션을 직접 제어.

   CSS는 레이아웃·스타일 정의만 담당.

──────────────────────────────────────────────────── */

.ub-board #bo_search {
  display: flex !important; /* .ub-collapse { display:none } 무효화 */

  position: fixed;

  inset: 0;

  z-index: 9000;

  align-items: flex-end;

  justify-content: center;

  padding: 0;

  /* 기본(닫힌) 상태 — JS가 열 때 inline style로 변경 */

  background: transparent;

  pointer-events: none;

  animation: none !important;
}

/* 검색 박스 스타일 — 애니메이션은 JS inline style로 */

.ub-board #bo_search .ub-search-box {
  position: relative;

  background: #ffffff;

  border: none;

  border-radius: 24px 24px 0 0;

  padding: 10px 32px 44px;

  box-shadow: none;

  margin: 0;

  max-width: 720px;

  width: 100%;

  /* 기본 위치: 뷰포트 아래 (JS가 transition으로 제어) */

  transform: translateY(110vh);
}

/* 드래그 핸들 표시 */

.ub-board #bo_search .ub-search-box::before {
  content: "";

  display: block;

  width: 40px;

  height: 4px;

  background: #e2e8f0;

  border-radius: 2px;

  margin: 0 auto 20px;
}

/* 모달 헤더 */

.ub-board .ub-search-modal-header {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 20px;

  font-size: 1.0625rem;

  font-weight: 700;

  color: #0f172a;

  letter-spacing: -0.02em;
}

.ub-board .ub-search-modal-icon {
  color: #5753e4;

  flex-shrink: 0;
}

/* 닫기 버튼 */

.ub-board .ub-search-close {
  position: absolute;

  top: 16px;

  right: 16px;

  width: 34px;

  height: 34px;

  border: none;

  background: #f1f5f9;

  color: #64748b;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition:
    background 120ms ease,
    color 120ms ease,
    transform 120ms ease;

  line-height: 1;
}

.ub-board .ub-search-close:hover {
  background: #e2e8f0;

  color: #0f172a;

  transform: rotate(90deg);
}

/* ─────────────────────────────────────────

   10-2. 스킨설정 iframe 모달

───────────────────────────────────────── */

.ub-setup-modal {
  display: none; /* JS가 flex 로 전환 */

  position: fixed;

  inset: 0;

  z-index: 9200;

  align-items: center;

  justify-content: center;

  padding: 24px 16px;
}

/* 배경 오버레이 — 초기값만 CSS로, 트랜지션은 JS inline style 이 담당 */

.ub-setup-modal__backdrop {
  position: fixed;

  inset: 0;

  background: rgba(10, 16, 36, 0.55);

  opacity: 0;

  backdrop-filter: blur(5px);

  -webkit-backdrop-filter: blur(5px);
}

/* 다이얼로그 박스 — 초기값만 CSS로, 트랜지션은 JS inline style 이 담당 */

.ub-setup-modal__dialog {
  position: relative;

  z-index: 1;

  width: 100%;

  max-width: 760px;

  height: calc(100vh - 100px);

  max-height: 720px;

  display: flex;

  flex-direction: column;

  background: #fff;

  border-radius: 16px;

  box-shadow: none;

  overflow: hidden; /* border-radius 적용 + 내부 iframe 클리핑 */

  opacity: 0;
}

/* 닫기 버튼 — 다이얼로그 내부 우상단에 고정 (naRIya 헤더 위 레이어) */

.ub-setup-modal__close {
  position: absolute;

  top: 6px;

  right: 28px;

  z-index: 20;

  width: 30px;

  height: 30px;

  border-radius: 50%;

  border: none;

  background: rgba(30, 41, 59, 0.8);

  color: #fff;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: none;

  transition:
    background 0.15s ease,
    transform 0.15s ease;

  flex-shrink: 0;

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);
}

.ub-setup-modal__close:hover {
  background: #ef4444;

  transform: scale(1.12);
}

/* iframe 바디 */

.ub-setup-modal__body {
  flex: 1 1 auto;

  min-height: 0;

  overflow: hidden;

  position: relative;
}

.ub-setup-modal__body iframe {
  display: block;

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;
  left: 0;

  border: none;

  min-height: 540px;
}

@media (max-width: 575px) {
  .ub-setup-modal {
    padding: 12px 0 0;
    align-items: flex-end;
  }

  .ub-setup-modal__dialog {
    max-width: 100%;

    max-height: calc(100vh - 56px);

    border-radius: 20px 20px 0 0;
  }

  .ub-setup-modal__body iframe {
    min-height: 360px;
  }
}

/* ─────────────────────────────────────────

   11. 모달

───────────────────────────────────────── */

/* .ub-board.ub-modal: 본문 밖 단독 모달 루트(자기 자신이 ub-board여서 .ub-board .ub-modal 에는 안 걸림) */

.ub-board .ub-modal,
.ub-board.ub-modal {
  position: fixed !important;

  inset: 0 !important;

  width: 100vw !important;

  max-width: none !important;

  min-height: 100vh !important;

  margin: 0 !important;

  box-sizing: border-box !important;

  z-index: 1050;

  display: none;

  align-items: center;

  justify-content: center;

  padding: var(--sp-4);

  background: rgb(15 23 42 / 0.5);

  backdrop-filter: blur(4px);
}

.ub-board .ub-modal.is-open,
.ub-board.ub-modal.is-open {
  display: flex !important;
}

.ub-board .ub-modal__dialog,
.ub-board.ub-modal .ub-modal__dialog {
  width: 100%;
  max-width: 380px;

  background: var(--s-card);

  border-radius: var(--r-xl);

  box-shadow: none;

  overflow: hidden;

  animation: ubModalIn var(--dur-slow) var(--ease);
}

.ub-board .ub-modal__header,
.ub-board.ub-modal .ub-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: var(--sp-4) var(--sp-5);

  background: linear-gradient(
    135deg,
    var(--c-primary) 0%,
    var(--c-primary-h) 100%
  );

  color: #fff;
}

.ub-board .ub-modal__header h5,
.ub-board.ub-modal .ub-modal__header h5 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.ub-board .ub-modal__close,
.ub-board.ub-modal .ub-modal__close {
  background: rgb(255 255 255 / 0.2);
  border: 0;
  color: #fff;

  width: 28px;
  height: 28px;
  border-radius: var(--r-full);

  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: background var(--dur-fast) var(--ease);
}

.ub-board .ub-modal__close:hover,
.ub-board.ub-modal .ub-modal__close:hover {
  background: rgb(255 255 255 / 0.35);
}

.ub-board .ub-modal__body,
.ub-board.ub-modal .ub-modal__body {
  padding: var(--sp-5);
}

@keyframes ubModalIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ─────────────────────────────────────────

   12. 페이지네이션 — Premium 3-section Card

───────────────────────────────────────── */

/* 래퍼 */

.ub-board .ub-pgn-wrap {
  padding: 8px 0 8px;
}

/* 메인 카드 컨테이너 */

.ub-board .ub-pgn-card {
  display: flex;

  align-items: stretch;

  background: #ffffff;

  border: 1px solid rgba(15, 23, 42, 0.08);

  border-radius: 14px;

  overflow: hidden;

  box-shadow: none;
}

/* 이전 / 다음 영역 */

.ub-board .ub-pgn-nav {
  display: flex;

  align-items: center;

  gap: 5px;

  padding: 0 22px;

  min-height: 52px;

  font-size: 0.875rem;

  font-weight: 600;

  color: #475569;

  text-decoration: none;

  white-space: nowrap;

  transition:
    background 130ms ease,
    color 130ms ease;

  cursor: pointer;
}

.ub-board a.ub-pgn-nav:hover {
  background: #eeecff;

  color: #4338ca;
}

.ub-board .ub-pgn-nav--disabled {
  color: #cbd5e1;

  cursor: default;
}

.ub-board .ub-pgn-nav svg {
  flex-shrink: 0;

  transition: transform 130ms ease;
}

.ub-board .ub-pgn-prev a.ub-pgn-nav:hover svg {
  transform: translateX(-2px);
}

.ub-board .ub-pgn-next a.ub-pgn-nav:hover svg {
  transform: translateX(2px);
}

/* 페이지 번호 영역 (가운데) */

.ub-board .ub-pgn-pages {
  flex: 1;

  display: flex;

  justify-content: center;

  align-items: center;

  border-left: 1px solid rgba(15, 23, 42, 0.06);

  border-right: 1px solid rgba(15, 23, 42, 0.06);

  padding: 8px 10px;

  min-width: 0;
}

/* 페이지 번호 목록 */

.ub-board .ub-pgn-list {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 2px;

  list-style: none;

  margin: 0;

  padding: 0;
}

.ub-board .ub-pgn-list .page-item {
  display: inline-block;
}

.ub-board .ub-pgn-list .page-link {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 38px;

  height: 38px;

  padding: 0 10px;

  font-size: 0.8375rem;

  font-weight: 600;

  color: #3e3f5e;

  text-decoration: none;

  border-radius: 10px;

  background: #ffffff;

  border: 1px solid rgba(79, 70, 229, 0.16);

  transition:
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
}

.ub-board .ub-pgn-list .page-link:hover {
  background: #f4f4fc;

  border-color: rgba(79, 70, 229, 0.38);

  color: #4338ca;

  box-shadow: none;

  transform: translateY(-1px);
}

.ub-board .ub-pgn-list .page-item.active .page-link {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 52%, #4338ca 100%);

  border-color: transparent;

  color: #fff;

  font-weight: 700;

  box-shadow: none;

  transform: none;
}

/* 구버전 클래스 호환 (na_paging 출력) */

.ub-board .ub-pagination,
.ub-board .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  gap: 4px;
  list-style: none;
  margin: 20px 0 4px;
  padding: 0;
}

.ub-board .ub-pagination__item,
.ub-board .pagination .page-item {
  display: inline-block;
}

.ub-board .ub-pagination__link,
.ub-board .pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 36px;
  height: 36px;
  padding: 0 8px;

  font-size: 0.875rem;
  font-weight: 500;

  color: #64748b;
  text-decoration: none;

  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;

  background: #ffffff;
  transition: all 120ms ease;
}

.ub-board .ub-pagination__link:hover,
.ub-board .pagination .page-link:hover {
  background: #eeecff;
  border-color: rgba(79, 70, 229, 0.22);
  color: #4338ca;
}

.ub-board .ub-pagination__link.is-active,
.ub-board .pagination .page-item.active .page-link {
  background: #5753e4;
  border-color: #5753e4;
  color: #fff;

  font-weight: 700;
  box-shadow: none;
}

/* ─────────────────────────────────────────

   13. 카테고리 탭

───────────────────────────────────────── */

.ub-board .ub-cate {
  margin-bottom: var(--sp-4);
}

.ub-board .ub-cate__wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.ub-board .ub-cate__list {
  flex: 1;
  overflow: hidden;
}

.ub-board .ub-cate__ul {
  display: flex;
  flex-wrap: nowrap;

  list-style: none;
  margin: 0;
  padding: var(--sp-1);

  background: var(--s-card);

  border: 1px solid var(--b-default);

  border-radius: var(--r-md);

  box-shadow: none;

  overflow-x: auto;
  gap: var(--sp-1);
}

.ub-board .ub-cate__ul::-webkit-scrollbar {
  height: 0;
}

.ub-board .ub-cate__ul li {
  flex-shrink: 0;
}

.ub-board .ub-cate__ul a {
  display: block;

  padding: var(--sp-2) var(--sp-4);

  font-size: 0.875rem;
  font-weight: 500;

  color: var(--t-muted);

  border-radius: var(--r-sm);

  text-decoration: none;

  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);

  white-space: nowrap;
}

.ub-board .ub-cate__ul li.active a {
  background: var(--c-primary);

  color: #fff;

  box-shadow: none;
}

.ub-board .ub-cate__ul a:hover:not(.active a) {
  background: var(--s-active);
  color: var(--c-primary);
}

.ub-board .ub-cate__nav {
  display: flex;
}

.ub-board .ub-cate__nav a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  background: var(--s-card);

  border: 1px solid var(--b-default);

  border-radius: var(--r-sm);

  color: var(--t-muted);
  text-decoration: none;

  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.ub-board .ub-cate__nav a:hover {
  background: var(--s-active);
  color: var(--c-primary);
}

.ub-board .ub-cate hr {
  margin: var(--sp-3) 0;
  border: 0;
  border-top: 1px solid var(--b-subtle);
}

/* ─────────────────────────────────────────

   14. 게시글 보기

───────────────────────────────────────── */

/* 게시글 래퍼에 카드 스타일 */

.ub-board #bo_v {
  background: var(--s-card);

  border-radius: var(--r-lg);

  overflow: visible;
}

/* 제목 */

.ub-board #bo_v_title {
  font-size: 1.5rem;

  font-weight: 700;

  line-height: 1.35;

  letter-spacing: -0.025em;

  color: var(--t-base);

  margin: 0 0 var(--sp-3);

  word-break: break-word;
}

/* 메타 정보 줄 */

.ub-board #bo_v_info {
  font-size: 0.875rem;
}

.ub-board #bo_v_info .ub-bg-light {
  background: var(--s-hover);
}

/* 본문 */

.ub-board #bo_v_con {
  min-height: 200px;
  word-break: break-all;
  overflow: hidden;
}

.ub-board #bo_v_con img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}

.ub-board #bo_v_img {
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.ub-board #bo_v_img:after {
  content: "";
  display: block;
  clear: both;
}

.ub-board #bo_v_img a.view_image {
  display: block;
}

.ub-board #bo_v_img img {
  margin-bottom: var(--sp-4);
  border-radius: var(--r-sm);
}

.ub-board #bo_v_sns_icon {
  margin: -5px auto;
}

.ub-board #bo_v_sns_icon img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
  margin: 5px;
  box-shadow: none;
}

/* 추천/비추/스크랩/SNS 액션 영역 */

.ub-board #bo_v_btn_group {
  display: flex !important;

  justify-content: center;

  align-items: center;

  padding: var(--sp-5) var(--sp-6);

  border-top: 1px solid #edf0f5;

  border-bottom: 1px solid #edf0f5;

  background: var(--s-hover);

  gap: var(--sp-2);
}

.ub-board #bo_v_btn_group .ub-btn-group {
  display: flex;

  gap: var(--sp-2);

  background: none;

  padding: 0;

  border: none;

  border-radius: 0;
}

.ub-board #bo_v_btn_group .ub-btn--basic {
  display: inline-flex;

  align-items: center;

  gap: var(--sp-2);

  padding: 9px 20px;

  min-width: 88px;

  border: 1.5px solid var(--b-default);

  border-radius: var(--r-full);

  background: var(--s-card);

  color: var(--t-muted);

  font-size: 0.875rem;

  font-weight: 500;

  cursor: pointer;

  transition: all var(--dur-fast) var(--ease);
}

.ub-board #bo_v_btn_group .ub-btn--basic:hover {
  border-color: var(--c-primary);

  color: var(--c-primary);

  background: var(--c-primary-light);

  transform: translateY(-1px);

  box-shadow: none;
}

.ub-board #bo_v_btn_group .ub-btn--basic b,
.ub-board #bo_v_btn_group .ub-btn--basic .ub-accent {
  font-weight: 700;

  color: var(--c-accent);
}

/* 관련 자료 목록 */

.ub-board .ub-data-list .ub-table-cell:first-child {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;

  color: var(--t-subtle);
  white-space: nowrap;

  background: var(--s-hover);

  border-right: 1px solid rgb(226 232 240 / 0.4);
}

.ub-board .ub-data-list .ub-table-cell a {
  color: var(--t-medium);
  text-decoration: none;

  transition: color var(--dur-fast) var(--ease);

  font-size: 0.875rem;
}

.ub-board .ub-data-list .ub-table-cell a:hover {
  color: var(--c-primary);
}

/* 이전/다음 글 hover */

.ub-board #bo_v_data .ub-table-row:hover .ub-table-cell {
  background: var(--s-active);
}

/* ─────────────────────────────────────────

   15. 댓글

───────────────────────────────────────── */

.ub-board #viewcomment {
  margin-top: var(--sp-2);
}

.ub-board #bo_vc {
  margin-bottom: 20px;
}

/* 댓글 헤더 바 */

.ub-board .uvc-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 16px 14px;

  margin-bottom: 24px;

  border-bottom: 1px solid #e8edf3;
}

.ub-board .uvc-header__title {
  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.95rem;

  font-weight: 700;

  color: #1e293b;
}

.ub-board .uvc-header__title .sk-ico {
  color: #475569;

  font-size: 1rem;
}

.ub-board .uvc-header__count {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 22px;

  height: 22px;

  padding: 0 6px;

  background: #475569;

  color: #fff;

  font-size: 0.75rem;

  font-weight: 700;

  border-radius: 20px;

  line-height: 1;
}

.ub-board .uvc-header__page {
  font-size: 0.8rem;

  font-weight: 400;

  color: #94a3b8;
}

/* 대댓글 연결 화살표 SVG */

.ub-board .cmt-article--reply {
  position: relative;
}

.ub-board .cmt-reply-arrow {
  position: absolute;

  top: 2px;

  left: -24px;

  width: 20px;

  height: 28px;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  opacity: 0.9;

  z-index: 1;
}

/* 댓글 article 래퍼 */

.ub-board .cmt-article {
  margin-bottom: 10px;
}

/* 댓글 개별 카드 */

.ub-board .cmt-wrap {
  background: #fff;

  border: 1px solid #e8edf3;

  border-radius: 10px;

  box-shadow: none;

  overflow: hidden;

  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.ub-board .cmt-wrap:hover {
  box-shadow: none;

  border-color: #cbd5e1;
}

/* 대댓글 카드 — 좌측 컬러 보더 + 연한 배경 */

.ub-board .cmt-article--reply .cmt-wrap {
  background: #f8f7ff;

  border-color: #c7d2fe;

  border-left: 3px solid #475569;
}

.ub-board .cmt-article--reply .cmt-wrap:hover {
  border-color: #adafca;

  border-left-color: #5753e4;
}

/* 댓글 헤더바 */

.ub-board .cmt-wrap header .ub-bg-light {
  background: #f8fafc !important;

  border-top: 0 !important;

  border-bottom: 1px solid #f1f5f9 !important;
}

.ub-board .cmt-article--reply .cmt-wrap header .ub-bg-light {
  background: #eeecff !important;

  border-bottom-color: #dedeea !important;
}

.ub-board .by-writer .cmt-wrap header .ub-bg-light {
  background: rgb(244 63 94 / 0.05) !important;

  border-top: 0 !important;
}

.ub-board .by-writer {
  background: rgb(244 63 94 / 0.04) !important;

  border-top: 2px solid var(--c-accent) !important;
}

/* 댓글 본문 — 컴팩트 */

.ub-board .cmt-content {
  word-break: break-all;

  overflow: hidden;

  padding: 10px 14px 8px;

  font-size: 0.9rem;

  line-height: 1.7;

  color: #1e293b;
}

.ub-board .cmt-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-xs);
}

/* 댓글 버튼 (답글/수정/삭제) — 컴팩트 */

.ub-board .cmt-btn ul {
  list-style: none;
  margin: 0;
  padding: 4px 14px 8px;
}

.ub-board .cmt-btn ul > li {
  float: left;
  font-size: 0.8rem;
  padding: 0 10px 0 0;
}

.ub-board .cmt-btn ul > li::before {
  content: "·";
  float: left;
  color: var(--b-strong);

  margin-right: 10px;
  display: none;
}

.ub-board .cmt-btn ul > li + li::before {
  display: block;
}

.ub-board .cmt-btn ul > li:last-child {
  padding-right: 0;
}

.ub-board .cmt-btn ul > li.no-bar::before {
  display: none;
}

.ub-board .cmt-btn ul > li > a {
  float: left;
  color: #94a3b8;
  white-space: nowrap;
  text-decoration: none;

  font-weight: 500;

  transition: color 0.15s;
}

.ub-board .cmt-btn ul > li > a:hover {
  color: #475569;
}

/* 댓글 추천/비추 */

.ub-board .cmt-btn .na-cgood,
.ub-board .cmt-btn .na-cnogood {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  color: var(--t-muted);

  transition: color var(--dur-fast) var(--ease);
}

.ub-board .cmt-btn .na-cgood:hover {
  color: var(--c-primary);
}

.ub-board .cmt-btn .na-cnogood:hover {
  color: var(--c-danger);
}

/* 댓글 쓰기폼 */

/* 댓글 textarea — 나리야의 댓글창 늘이기/줄이기 JS 가 rows 또는

   style.height 를 자유롭게 변경할 수 있도록.

   ※ height 에 !important 를 붙이면 인라인 style.height 도 무력화되므로 절대 사용 금지 */

.ub-board #fviewcomment #wr_content {
  flex: none !important; /* flex 알고리즘이 높이를 재정의하지 않도록 */

  height: auto; /* !important 없음 — JS inline style 이 덮어쓸 수 있음 */

  resize: none;
}

.ub-board .ub-cmt-box {
  background: var(--s-card);

  border: 1px solid var(--b-default);

  border-radius: var(--r-md);

  box-shadow: none;

  padding: 20px;

  margin-top: var(--sp-4);
}

/* 댓글 textarea + 등록 버튼 레이아웃 */

.ub-board .ub-cmt-box .ub-input-group {
  display: flex;

  flex-direction: column;

  border: 1.5px solid var(--b-default);

  border-radius: var(--r-sm);

  overflow: hidden;
}

.ub-board .ub-cmt-box .ub-input-group .ub-textarea {
  border: 0;

  border-radius: 0;

  /* flex: 1 제거 — 나리야 comment_content_resize() 가 rows/style.height 를

	   변경할 때 flex 레이아웃이 높이를 재정의하지 않도록 */

  flex: none;

  align-self: stretch;

  width: 100%;

  min-height: 100px;

  height: auto;

  padding: 14px 16px;

  resize: none;

  box-shadow: none !important;

  font-size: 0.9375rem;

  line-height: 1.7;
}

.ub-board .ub-cmt-box .ub-input-group .ub-btn {
  border: 0;

  border-top: 1px solid rgba(15, 23, 42, 0.06);

  border-radius: 0;

  width: 100%;

  height: 44px;

  font-size: 0.9rem;

  font-weight: 600;

  letter-spacing: 0.02em;

  align-self: auto;

  min-width: unset;
}

.ub-board #bo_vc_opt ol {
  margin: 0;
  padding: 0;
  list-style: none;

  background: var(--b-strong);
  border-radius: var(--r-xs);
  overflow: hidden;
}

.ub-board #bo_vc_opt ol:after {
  content: "";
  display: block;
  clear: both;
}

.ub-board #bo_vc_opt ol li {
  float: left;
  margin: 0;
}

.ub-board #bo_vc_send_sns ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ub-board #bo_vc_send_sns ul:after {
  content: "";
  display: block;
  clear: both;
}

.ub-board #bo_vc_send_sns ul li {
  float: left;
  margin: 0 var(--sp-4) 0 0;
}

.ub-board #bo_vc_send_sns input {
  margin: 0 0 0 var(--sp-2);
}

/* 럭키포인트 */

.ub-board .cmt-wrap .sk-ico-gift {
  color: var(--c-warning);
}

/* ─────────────────────────────────────────

   16. 글쓰기 폼 (#bo_w)

───────────────────────────────────────── */

.ub-board #bo_w {
  background: var(--s-card);

  border: 1px solid var(--b-default);

  border-radius: var(--r-lg);

  box-shadow: none;

  overflow: visible;

  padding: 0;
}

/* 글쓰기 폼 내부 list: 별도 card 없이 #bo_w 카드 안에 융합 */

.ub-board #bo_w .ub-list {
  box-shadow: none;

  border: 0;

  border-radius: 0;

  overflow: visible;

  margin-bottom: 0;
}

/* ── 폼 각 행 ── */

.ub-board #bo_w .ub-list-item {
  padding: 14px 24px;

  background: var(--s-card);

  border-bottom: 1px solid var(--b-default);

  overflow: visible;
}

.ub-board #bo_w .ub-list-item:last-of-type {
  border-bottom: 0;
}

/* ── 글쓰기 폼 행 레이아웃 ── */

.ub-board #bo_w .ub-form-row--write {
  display: flex !important;

  flex-wrap: nowrap;

  align-items: stretch;

  width: 100%;

  box-sizing: border-box;
}

/* 레이블 컬럼 */

.ub-board #bo_w .ub-form-label-col {
  flex: 0 0 90px;

  max-width: 90px;

  padding: 0;

  display: flex;

  align-items: center;

  font-size: 0.875rem;

  font-weight: 600;

  color: var(--t-medium);

  line-height: 1.4;
}

/* 바디 컬럼 (기본: 짧은 행) — 내용을 세로 중앙 정렬 */

.ub-board #bo_w .ub-form-body-col,
.ub-board #bo_w .ub-form-body-col-full {
  flex: 1;

  min-width: 0;

  max-width: none;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 0;
}

/* 바디 컬럼 안 입력 요소: 폭 100% 유지 */

.ub-board #bo_w .ub-form-body-col > .ub-input,
.ub-board #bo_w .ub-form-body-col-full > .ub-input,
.ub-board #bo_w .ub-form-body-col > .ub-select,
.ub-board #bo_w .ub-form-body-col-full > .ub-select {
  width: 100%;

  flex: 1 1 100%;
}

/* 높이가 큰 행(에디터·링크·파일): 바디 컬럼을 block으로 복원, 레이블 상단 */

.ub-board #bo_w .ub-form-row--tall > .ub-form-label-col {
  align-items: flex-start;

  padding-top: 11px;
}

.ub-board #bo_w .ub-form-row--tall > .ub-form-body-col,
.ub-board #bo_w .ub-form-row--tall > .ub-form-body-col-full {
  display: block;
}

/* ub-form-plain: 글쓰기 폼 안에서 패딩 제거 */

.ub-board #bo_w .ub-form-plain {
  padding-top: 0;
}

/* 파일 선택 행: JS 생성 div의 좌우 패딩 제거 */

.ub-board #variableFiles .ub-px-2 {
  padding-left: 0 !important;

  padding-right: 0 !important;
}

/* ── 에디터 / 텍스트에어리어 행 ── */

.ub-board #bo_w #wr_content {
  margin-bottom: var(--sp-3) !important;

  border-radius: var(--r-sm);

  border: 1px solid var(--b-default);

  padding: 12px 14px;

  font-size: 0.9375rem;

  line-height: 1.7;

  width: 100%;

  box-sizing: border-box;
}

/* SmartEditor 숨김 시: 마진·패딩도 제거해 빈 공간 방지 */

.ub-board #bo_w #wr_content[style*="display:none"],
.ub-board #bo_w #wr_content[style*="display: none"] {
  display: none !important;

  margin: 0 !important;

  padding: 0 !important;

  height: 0 !important;

  min-height: 0 !important;

  border: 0 !important;

  overflow: hidden !important;
}

/* SmartEditor2 iframe — 클릭·포커스 보장 */

.ub-board #bo_w .se2_editor,
.ub-board #bo_w .container_editor {
  position: relative;

  z-index: 1;
}

.ub-board #bo_w .se2_inputarea iframe,
.ub-board #bo_w .se2_inputarea > iframe {
  pointer-events: auto !important;

  cursor: text;
}

/* ── btn_write.php 툴바 (이모티콘·클립·유튜브·자동저장) ── */

.ub-board #bo_w .uw-editor-toolbar {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 10px 0 4px;

  border-top: 1px solid var(--b-subtle);

  flex-wrap: wrap;
}

/* btn_write.php 는 div.btn-group 으로 감싸서 출력 — Bootstrap 여백 제거 후 재정의 */

.ub-board #bo_w .uw-editor-toolbar .btn-group {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 8px;

  margin: 0 !important;

  padding: 0 !important;
}

.ub-board #bo_w .uw-editor-toolbar a,
.ub-board #bo_w .uw-editor-toolbar button,
.ub-board #bo_w .uw-editor-toolbar .btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 4px;

  min-width: 38px;

  height: 36px;

  padding: 0 14px;

  border: 1px solid var(--b-default) !important;

  border-radius: var(--r-xs) !important;

  background: var(--s-card) !important;

  color: var(--t-muted) !important;

  font-size: 0.875rem;

  text-decoration: none;

  transition: all var(--dur-fast) var(--ease);

  white-space: nowrap;

  margin: 0 !important;

  float: none !important;

  position: static !important;
}

.ub-board #bo_w .uw-editor-toolbar a:hover,
.ub-board #bo_w .uw-editor-toolbar button:hover,
.ub-board #bo_w .uw-editor-toolbar .btn:hover {
  border-color: var(--c-primary) !important;

  color: var(--c-primary) !important;

  background: var(--c-primary-light) !important;
}

/* ── 하단 제출 버튼 영역 ── */

.ub-board #bo_w .uw-submit-bar {
  display: flex;

  gap: 10px;

  padding: 18px 24px;

  background: var(--s-hover);

  border-top: 1px solid var(--b-default);

  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.ub-board #bo_w .uw-submit-bar .ub-btn {
  flex: 1;

  height: 48px;

  font-size: 0.9375rem;

  font-weight: 600;

  border-radius: var(--r-sm);
}

.ub-board #bo_w .uw-btn-cancel {
  background: #ffffff;

  border-color: var(--b-strong);

  color: var(--t-medium);
}

.ub-board #bo_w .uw-btn-cancel:hover {
  background: var(--s-hover);

  border-color: var(--t-medium);
}

/* legacy selector */

.ub-board #bo_w > .ub-px-3 {
  padding: 18px 24px;

  background: var(--s-hover);

  border-top: 1px solid var(--b-default);

  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.ub-board #bo_w .ub-btn--lg {
  font-size: 0.9375rem;

  padding: 0.8rem 1.5rem;

  border-radius: var(--r-sm);

  height: 48px;

  font-weight: 600;
}

/* 파일 첨부 */

.ub-board #variableFiles {
  width: 100%;
}

.ub-board #variableFiles .ub-input {
  font-size: 0.875rem;
}

/* 설정 테이블 */

.ub-board .ub-table-setup {
  width: 100%;
  border-collapse: collapse;

  font-size: 0.875rem;
}

.ub-board .ub-table-setup th,
.ub-board .ub-table-setup td {
  padding: var(--sp-3) var(--sp-4);

  border: 1px solid var(--b-default);

  text-align: center;
  vertical-align: middle;
}

.ub-board .ub-table-setup th {
  background: var(--s-hover);

  font-weight: 600;
  color: var(--t-medium);
}

.ub-board .ub-table-setup .ub-nw-c1 {
  width: 20%;
}

.ub-board .ub-table-setup .ub-nw-c2 {
  width: 30%;
}

/* ─────────────────────────────────────────

   17. 목록 툴바 + 카드 (통합 프리미엄 디자인)

───────────────────────────────────────── */

/* 툴바 — 통합 카드 상단 */

.ub-board #bo_btn_top {
  background: #ffffff;

  border: 1px solid rgba(15, 23, 42, 0.08);

  border-bottom-color: rgba(15, 23, 42, 0.08);

  border-radius: 16px 16px 0 0;

  box-shadow: none;

  padding: 11px 20px;

  margin-bottom: 0 !important;

  animation: ubFadeUp var(--dur-slow) var(--ease) both;

  position: relative;

  z-index: 9;
}

/* 툴바 내부 flex 레이아웃 */

.ub-board #bo_btn_top .ub-toolbar-inner {
  display: flex;

  align-items: center;

  gap: var(--sp-3);

  width: 100%;
}

.ub-board #bo_btn_top #bo_list_total {
  flex: 1;

  font-size: 0.8125rem;

  font-weight: 500;

  color: var(--t-muted);

  letter-spacing: -0.01em;
}

.ub-board #bo_btn_top #bo_list_total b {
  color: var(--t-base);

  font-weight: 700;

  font-size: 0.875rem;
}

/* 레거시 클래스 호환 */

.ub-board #bo_btn_top .ub-d-flex-sm {
  display: flex !important;

  align-items: center;

  gap: var(--sp-2);

  width: 100%;
}

.ub-board #bo_btn_top .ub-grow-sm {
  flex-grow: 1;
}

.ub-board #bo_btn_top .ub-px-3 {
  padding: 0;
}

.ub-board #bo_btn_top .ub-d-block-sm {
  display: none !important;
}

/* 툴바 버튼 그룹 */

.ub-board #bo_btn_top .ub-toolbar-actions,
.ub-board #bo_btn_top .ub-text-right-sm {
  display: flex;

  align-items: center;

  gap: 4px;

  flex-shrink: 0;
}

.ub-board #bo_btn_top .ub-btn--basic.ub-btn--sm {
  width: 30px;

  height: 30px;

  padding: 0;

  border-radius: var(--r-xs);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--b-default);

  background: var(--s-card);

  color: var(--t-muted);

  font-size: 0.8125rem;

  transition: all var(--dur-fast) var(--ease);
}

.ub-board #bo_btn_top .ub-btn--basic.ub-btn--sm:hover {
  border-color: var(--c-primary);

  color: var(--c-primary);

  background: var(--c-primary-light);
}

.ub-board #bo_btn_top .ub-btn--primary.ub-btn--sm {
  height: 30px;

  padding: 0 13px;

  border-radius: var(--r-xs);

  display: inline-flex;

  align-items: center;

  gap: 5px;

  font-size: 0.8125rem;

  font-weight: 600;
}

/* 목록 카드 — 툴바 하단부 */

.ub-board #bo_list {
  background: #ffffff;

  border: 1px solid rgba(15, 23, 42, 0.08);

  border-top: 0;

  border-radius: 0 0 16px 16px;

  /* 전체 카드 shadow 제거 — 행 hover shadow가 보이도록 overflow: visible */

  box-shadow: none;

  overflow: visible;

  margin-top: 0;

  margin-bottom: 12px;

  box-sizing: border-box;

  animation: ubFadeUp var(--dur-slow) var(--ease) both;

  animation-delay: 40ms;
}

/* 마지막 행 — 카드 하단 둥근 모서리 유지 */

.ub-board .ublist-body > .ubr:last-child {
  border-radius: 0 0 16px 16px;

  border-bottom: 0;
}

/* 빈 목록일 때 */

.ub-board .ublist-empty {
  border-radius: 0 0 16px 16px;
}

/* ─────────────────────────────────────────

   18-a. 전체 래퍼 · 전환 애니메이션

───────────────────────────────────────── */

/* 목록 래퍼 */

.ub-board#bo_list_wrap,
.ub-board.ub-mb-4 {
  margin-bottom: var(--sp-8);
}

/* 카드 페이드인 */

/* #bo_v / #bo_w 에 animation을 걸면 fill-mode:both 로 인해

   transform:translateY(0) 이 지속되어 stacking context 가 생성된다.

   나리야의 팝업(이모티콘·첨부) backdrop 이 이 stacking context 위로 올라가

   popup 이 backdrop 뒤에 갇히는 현상이 발생하므로 animation 을 적용하지 않는다. */

/* ── 뷰 페이지 래퍼 ── */

.ub-board.uv-view-page {
  margin-bottom: var(--sp-8);
}

@keyframes ubFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 일반 collapse 오픈 애니메이션 — #bo_search 는 바텀시트 방식이므로 완전 제외 */

.ub-board .ub-collapse.is-open:not(#bo_search) {
  animation: ubSlideDown var(--dur-base) var(--ease);
}

@keyframes ubSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────

   18-b. 게시글 보기 레이아웃 (프리미엄 재설계)

───────────────────────────────────────── */

/* ── 카드 래퍼 ── */

.ub-board #bo_v {
  background: #ffffff;

  border: 1px solid #dde4ee;

  border-radius: 14px;

  /* overflow: hidden 제거 — 드롭다운이 카드 밖으로 나와야 함 */

  overflow: visible;

  margin-bottom: 0;
}

/* 첫 번째 자식 — 상단 모서리 radius */

.ub-board #bo_v > :first-child {
  border-top-left-radius: 13px;

  border-top-right-radius: 13px;
}

/* 마지막 자식 — 하단 모서리 radius */

.ub-board #bo_v > :last-child {
  border-bottom-left-radius: 13px;

  border-bottom-right-radius: 13px;
}

/* ── 제목 영역 — 흰 패널 ── */

.ub-board #bo_v header {
  padding: 28px 28px 22px;

  background: #ffffff;
}

/* 카테고리 뱃지 */

.ub-board #bo_v header .ub-text-sm.ub-text-muted {
  display: inline-flex;

  align-items: center;

  padding: 3px 10px;

  background: #f8f8fc;

  color: #5753e4;

  border-radius: 9999px;

  font-size: 0.75rem;

  font-weight: 600;

  letter-spacing: 0.02em;

  margin-bottom: 10px;
}

.ub-board #bo_v_title {
  font-size: 1.5rem;

  font-weight: 800;

  line-height: 1.4;

  letter-spacing: -0.03em;

  color: #0f172a;

  margin: 0;

  word-break: break-word;
}

/* ── 메타 정보 ── */

.ub-board #bo_v_info {
  font-size: 0.8125rem;

  color: #64748b;
}

/* uv-* 클래스로 관리 (아래 별도 섹션 참조) */

/* ── 본문 영역 ── */

.ub-board #bo_v #bo_v_con {
  padding: 28px;

  line-height: 1.9;

  font-size: 0.9375rem;

  color: #1e293b;

  min-height: 160px;

  background: #ffffff;

  border-top: 1px solid #edf0f5;
}

/* ── 추천/스크랩 액션 영역 ── */

.ub-board #bo_v_btn_group {
  display: flex !important;

  justify-content: center;

  align-items: center;

  gap: 10px;

  padding: 20px 28px;

  background: #f8fafc;
}

.ub-board #bo_v_btn_group .ub-btn-group {
  display: flex;

  gap: 8px;
}

.ub-board #bo_v_btn_group .ub-btn--basic {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 9px 22px;

  min-width: 80px;

  border: 1.5px solid rgba(15, 23, 42, 0.1);

  border-radius: 9999px;

  background: #ffffff;

  color: #64748b;

  font-size: 0.875rem;

  font-weight: 500;

  cursor: pointer;

  transition: all 130ms ease;

  box-shadow: none;
}

.ub-board #bo_v_btn_group .ub-btn--basic:hover {
  border-color: #475569;

  color: #5753e4;

  background: #f8f8fc;

  transform: translateY(-1px);

  box-shadow: none;
}

.ub-board #bo_v_btn_group .ub-btn--basic b,
.ub-board #bo_v_btn_group .ub-btn--basic .ub-accent {
  font-weight: 700;

  color: var(--c-accent);
}

/* ── 데이터 섹션 (첨부·링크 등) ── */

.ub-board #bo_v #bo_v_data {
  background: #ffffff;
}

/* ── 이전/다음 글 네비게이션 ── */

.ub-board .ub-data-list .ub-table-row {
  transition: background 120ms ease;
}

.ub-board .ub-data-list .ub-table-cell:first-child {
  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  color: #94a3b8;

  white-space: nowrap;

  background: #f8fafc;

  border-right: 1px solid rgba(15, 23, 42, 0.05);

  width: 56px;

  text-align: center;
}

.ub-board .ub-data-list .ub-table-cell a {
  color: #334155;

  text-decoration: none;

  font-size: 0.875rem;

  transition: color 120ms ease;
}

.ub-board .ub-data-list .ub-table-cell a:hover {
  color: #5753e4;
}

.ub-board #bo_v_data .ub-table-row:hover .ub-table-cell {
  background: #f9f6f1;
}

.ub-board #bo_v_data .ub-table-row:hover .ub-table-cell:first-child {
  background: #e4eaf8;
}

/* ── 하단 버튼바 — .uv-btn-bar 로 통합 ── */

/* 조회수 아이콘 */

.ub-board #bo_v #bo_v_info .sk-ico-eye {
  margin-right: 3px;
  color: #94a3b8;
}

/* ── 메타 정보 재설계 (uv-*) ── */

.ub-board #bo_v_info {
  font-size: 0.8125rem;
  color: #64748b;
}

.ub-board .uv-meta-row {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 13px 28px;

  background: #f8fafc;

  border-top: 1px solid rgba(15, 23, 42, 0.08);

  border-bottom: 1px solid rgba(15, 23, 42, 0.05);

  gap: 12px;
}

.ub-board .uv-meta-left {
  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.875rem;

  font-weight: 600;

  color: #334155;
}

.ub-board .uv-sep {
  color: rgba(15, 23, 42, 0.2);

  font-weight: 400;
}

.ub-board .uv-ip {
  font-size: 0.8rem;

  color: #94a3b8;

  font-weight: 400;
}

.ub-board .uv-meta-right {
  display: flex;
  align-items: center;
}

.ub-board .uv-date {
  font-size: 0.8125rem;

  color: #94a3b8;

  font-variant-numeric: tabular-nums;

  letter-spacing: 0.01em;
}

.ub-board .uv-stat-row {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 28px;

  background: #f8fafc;

  border-bottom: 1px solid rgba(15, 23, 42, 0.06);

  gap: 12px;
}

.ub-board .uv-stat-left {
  display: flex;

  align-items: center;

  gap: 16px;
}

.ub-board .uv-stat-item {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  font-size: 0.8125rem;

  color: #94a3b8;
}

.ub-board .uv-stat-right {
  display: flex;

  align-items: center;

  gap: 6px;
}

/* 상단 버튼 사이즈 */

.ub-board .uv-stat-right .ub-btn--sm {
  height: 30px;

  padding: 0 12px;

  font-size: 0.8rem;

  border-radius: var(--r-xs);
}

/* ── 이전/다음 글 네비게이션 (uv-nav-*) ── */

.ub-board .uv-nav-row {
  transition: background 120ms ease;
}

.ub-board .uv-nav-row:hover .uv-nav-label {
  background: #eff3fb;
}

.ub-board .uv-nav-row:hover .uv-nav-cell {
  background: #f8f9ff;
}

/* 라벨 셀 (이전/다음) */

.ub-board .uv-nav-label {
  white-space: nowrap;

  width: 70px;

  text-align: center;

  padding: 13px 10px;

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  color: #94a3b8;

  background: #f8fafc;

  border-right: 1px solid #edf0f5;
  vertical-align: middle;

  line-height: 1.4;
}

.ub-board .uv-nav-label .sk-ico {
  display: block;

  font-size: 0.875rem;

  margin-bottom: 3px;

  color: #cbd5e1;
}

.ub-board .uv-nav-label--prev .sk-ico {
  color: #7370fb;
}

.ub-board .uv-nav-label--next .sk-ico {
  color: #adafca;
}

/* 내용 셀 */

.ub-board .uv-nav-cell {
  padding: 13px 20px;
  vertical-align: middle;

  background: #ffffff;
}

/* 내부 flex 래퍼 — ub-table-cell 내에서 justify 처리 */

.ub-board .uv-nav-cell .uv-nav-inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;
}

.ub-board .uv-nav-link {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: #334155;

  text-decoration: none;

  font-size: 0.875rem;

  transition: color 120ms ease;

  flex: 1;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.ub-board .uv-nav-icon {
  color: #94a3b8;

  flex-shrink: 0;

  font-size: 0.8rem;

  transition: color 120ms ease;
}

.ub-board .uv-nav-link:hover {
  color: #5753e4;
}

.ub-board .uv-nav-link:hover .uv-nav-icon {
  color: #475569;
}

.ub-board .uv-nav-date {
  font-size: 0.8rem;

  color: #b0bec5;

  white-space: nowrap;

  font-variant-numeric: tabular-nums;

  flex-shrink: 0;
}

/* ── 상단 메타에 인라인 버튼 (데스크톱만) ── */

.ub-board .uv-btn-inline {
  display: none;
}

/* ── 하단 버튼바 (uv-btn-bar) ── */

.ub-board .uv-btn-bar {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 8px;

  padding: 20px 15px;

  background: #f8fafc;

  border-top: 1px solid #edf0f5;
}

.ub-board .uv-btn-bar .ub-btn {
  border-radius: var(--r-xs);

  font-size: 0.8125rem;

  height: 34px;

  padding: 0 14px;

  font-weight: 500;
}

.ub-board .uv-btn-bar .ub-btn--primary {
  padding: 0 16px;
}

.ub-board .uv-btn-bar .ub-btn--basic {
  border: 1px solid rgba(15, 23, 42, 0.12);

  color: #475569;

  background: #ffffff;
}

.ub-board .uv-btn-bar .ub-btn--basic:hover {
  border-color: #475569;

  color: #5753e4;

  background: #f8f8fc;
}

.ub-board .uv-btn-bar .ub-dropdown {
  display: inline-flex;
}

/* 페이징 여백 (구버전 호환, 새 .ub-pgn-wrap이 있을 경우 무시됨) */

.ub-board #bo_list_wrap > form > div:last-child {
  padding: 0;
}

/* 버튼 툴바 미세 조정 */

.ub-board #bo_btn_top .ub-btn-group {
  gap: var(--sp-1);
}

.ub-board #bo_btn_top .ub-dropdown {
  vertical-align: middle;
}

/* 정렬 드롭다운 내부 래퍼 인라인 스타일 무력화 */

.ub-board .ub-dropdown__menu .ub-bg-strong {
  background: transparent !important;

  border: none !important;

  border-radius: 0 !important;

  padding: 0 !important;

  width: 100%;
}

/* 글쓰기 – 폼 패딩 */

.ub-board #bo_w .ub-list-item {
  padding: var(--sp-4) var(--sp-5);
}

.ub-board #bo_w .ub-list-item .ub-form-label-col {
  min-height: 42px;
}

/* SNS 공유 아이콘 */

.ub-board #bo_v_sns_icon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

.ub-board #bo_v_sns_icon img {
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.ub-board #bo_v_sns_icon img:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

/* 댓글 빈 상태 */

.ub-board #bo_vc_empty {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  background: #f8fafc;

  border: 1px dashed rgba(15, 23, 42, 0.1);

  border-radius: var(--r-md);

  margin: 8px 0 12px;

  padding: 28px 20px;

  color: #94a3b8;

  font-size: 0.875rem;
}

.ub-board #bo_vc_empty .sk-ico {
  font-size: 1rem;

  color: #cbd5e1;
}

/* 파일 다운로드 링크 */

.ub-board .view_file_download {
  color: var(--c-primary);
  font-weight: 500;
}

.ub-board .view_file_download:hover {
  text-decoration: underline;
}

/* tag */

.ub-board .uv-tag-area {
  padding: 12px 28px 16px;

  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  background: #ffffff;
}

.ub-board .uv-tag-area a,
.ub-board #bo_v .ub-text-sm.ub-p-3 a {
  display: inline-flex;
  align-items: center;

  padding: 0.25rem 0.75rem;

  border: 1px solid var(--b-default);

  border-radius: var(--r-full);

  font-size: 0.8125rem;

  color: var(--t-muted);

  background: var(--s-hover);

  margin: 0.2rem;

  transition:
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

.ub-board #bo_v .ub-text-sm.ub-p-3 a:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-primary-light);
}

/* ─────────────────────────────────────────

   18. 반응형

───────────────────────────────────────── */

/* 태블릿(가로폭 768~1024): PC 레이아웃 유지 + 줄바꿈만 허용 */

@media (min-width: 768px) and (max-width: 1024px) {
  .ub-board #bo_w .ub-form-row--write {
    flex-wrap: wrap !important;
  }

  .ub-board #variableFiles .ub-flex.ub-flex-wrap {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 767px) {
  .ub-board #bo_btn_top {
    border-radius: var(--r-md) var(--r-md) 0 0;
    padding: 15px 16px 12px;
  }

  .ub-board #bo_list {
    border-radius: 0 0 var(--r-md) var(--r-md);
  }

  .ub-board.uv-view-page {
    padding: 0;
  }

  .ub-board #bo_v {
    border-radius: 10px;
  }

  .ub-board #bo_w {
    border-radius: var(--r-md);
  }

  .ub-board #bo_v header {
    padding: 20px 16px 16px;
  }

  .ub-board #bo_v #bo_v_con {
    padding: 16px;
  }

  .ub-board #bo_v #bo_v_btn_group {
    padding: var(--sp-4);
    flex-wrap: wrap;
  }

  .ub-board #bo_v #bo_v_btn_group .ub-btn--basic {
    min-width: 70px;
    padding: 8px 14px;
    font-size: 0.8125rem;
  }

  .ub-board .uv-meta-row {
    padding: 11px 16px;
  }

  .ub-board .uv-stat-row {
    padding: 9px 16px;
  }

  .ub-board .uv-btn-bar {
    padding: 10px 16px;
    gap: 6px;
  }

  .ub-board .uv-btn-bar .ub-btn {
    height: 32px;
    padding: 0 12px;
    font-size: 0.8125rem;
  }

  .ub-board .uv-nav-label {
    padding: 10px 12px;
    width: 48px;
  }

  .ub-board .uv-nav-cell {
    padding: 10px 14px;
  }

  .ub-board #bo_vc,
  .ub-board #bo_vc_w {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ub-board #viewcomment > .ub-board {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 모바일 목록 행 */

  .ub-board .ublist-head {
    display: none;
  }

  .ub-board .ubr {
    height: auto;
    padding: 14px 16px;
    box-shadow: none !important;
  }

  .ub-board .ubr:hover {
    background: #f8f9ff;
    box-shadow: none;
  }

  .ub-board .ubr__no {
    display: none;
  }

  .ub-board .ubr__cols {
    display: none;
  }

  .ub-board .ubr__mobile-meta {
    display: flex;
  }

  .ub-board .ubr__link {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.9375rem;
  }

  .ub-board #bo_btn_top {
    border-radius: 12px 12px 0 0;
    padding: 15px 16px 12px;
  }

  .ub-board #bo_list {
    border-radius: 0 0 12px 12px;
  }

  .ub-board #bo_v_title {
    font-size: 1.25rem;
    line-height: 1.45;
  }

  .ub-board #bo_v_con {
    min-height: 140px;
  }

  .ub-board .ub-d-none-sm {
    display: none !important;
  }

  .ub-board .ub-d-block-sm {
    display: block !important;
  }

  .ub-board .ub-flex-sm {
    display: flex !important;
  }

  .ub-board .ub-flex-sm-wrap {
    flex-wrap: wrap;
  }

  .ub-board .ub-w-100-sm {
    width: 100% !important;
  }

  .ub-board #bo_search .ub-search-box {
    padding: 10px 20px 36px;
    border-radius: 20px 20px 0 0;
  }

  .ub-board .ub-pgn-nav {
    padding: 0 14px;
    min-height: 46px;
    font-size: 0.8125rem;
  }

  .ub-board .ub-pgn-list .page-link {
    min-width: 32px;
    height: 32px;
    font-size: 0.8125rem;
  }

  /* 검색창 그리드 */

  .ub-board .ub-form-row--search > * {
    flex: 0 0 100%;
    max-width: 100%;
    padding-top: var(--sp-2);
  }

  .ub-board .ub-form-row--search > *:first-child {
    flex: 0 0 50%;
    max-width: 50%;
    padding-top: 0;
  }

  .ub-board .ub-form-row--search > *:nth-child(2) {
    flex: 0 0 50%;
    max-width: 50%;
    padding-top: 0;
  }

  .ub-board .ub-form-row--search > *:last-child {
    padding-top: var(--sp-2);
  }

  /* 댓글 폼 */

  .ub-board .ub-cmt-box {
    border-radius: var(--r-md);
    padding: 16px;
  }

  .ub-board #bo_vc_login {
    border-radius: var(--r-md);
  }

  .ub-board .uv-nav-label {
    width: 52px;
    padding: 12px 8px;
  }

  .ub-board .uv-nav-cell {
    padding: 12px 14px;
  }

  /* 글쓰기 */

  .ub-board #bo_w .ub-list-item,
  .ub-board #bo_w .ub-write-list .ub-list-item {
    padding: 12px 16px;
  }

  .ub-board #bo_w > .ub-px-3 {
    padding: var(--sp-4);
  }

  .ub-board #bo_w #wr_content {
    max-height: 160px !important;
  }

  /* 모바일에서는 글쓰기 행을 flex로 두면 레이아웃이 쉽게 깨져서 block으로 강제 */

  .ub-board #bo_w .ub-form-row--write {
    display: block !important;
  }

  .ub-board #bo_w .ub-form-body-col,
  .ub-board #bo_w .ub-form-body-col-full {
    width: 100%;
    display: block;
  }

  .ub-board .ub-form-label-col {
    flex: 0 0 100%;
    max-width: 100%;

    padding-right: 0;
    padding-top: 0;
    padding-bottom: var(--sp-2);
  }

  .ub-board #bo_w .ub-form-label-col {
    flex: 0 0 100%;
    max-width: 100%;

    align-self: auto;
    padding-top: 0;
  }

  .ub-board .ub-form-body-col {
    flex: 1;
    min-width: 0;
  }

  .ub-board .ub-form-row--write .ub-form-body-col,
  .ub-board .ub-form-row--write .ub-form-body-col-full {
    flex: 1;
    min-width: 0;
  }

  /* 첨부파일 행도 모바일에서 줄바꿈 허용 */

  .ub-board #variableFiles .ub-flex.ub-flex-wrap {
    flex-wrap: wrap !important;
  }

  .ub-board #variableFiles .ub-flex.ub-flex-wrap > div {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (min-width: 576px) {
  .ub-board .ub-d-flex-sm {
    display: flex;
  }

  .ub-board .ub-align-center-sm {
    align-items: center;
  }

  .ub-board .ub-grow-sm {
    flex-grow: 1;
  }

  .ub-board .ub-text-right-sm {
    text-align: right;
  }

  .ub-board .ub-form-row--search > *:last-child {
    padding-top: 0;
  }
}

@media (min-width: 768px) {
  .ub-board .ub-d-none-md {
    display: none !important;
  }

  .ub-board .ub-d-block-md {
    display: block !important;
  }

  .ub-board .ub-text-center-md {
    text-align: center;
  }

  .ub-board .ub-border-top-md {
    border-top: 1px solid var(--b-default);
  }

  .ub-board .ub-justify-start-md {
    justify-content: flex-start;
  }

  .ub-board .ub-pagination--left {
    justify-content: flex-start;
  }
}

@media (min-width: 992px) {
  .ub-board .ub-d-flex-lg {
    display: flex;
  }

  .ub-board .ub-d-none-lg {
    display: none;
  }

  .ub-board .ub-d-block-lg {
    display: block;
  }

  .ub-board .ub-d-table-cell-lg {
    display: table-cell !important;
  }
}

/* ═══════════════════════════════════════════════════════

   갤러리 뷰 — 프리미엄 카드 그리드

═══════════════════════════════════════════════════════ */

/* ── 뷰 토글 버튼 그룹 ── */

.ub-board .ub-view-toggle {
  display: flex;

  gap: 2px;

  background: var(--s-hover);

  border: 1px solid var(--b-default);

  border-radius: var(--r-xs);

  padding: 2px;
}

.ub-board .ub-view-toggle-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 28px;

  height: 28px;

  border: none;

  border-radius: 4px;

  background: transparent;

  color: var(--t-muted);

  cursor: pointer;

  transition:
    background 130ms ease,
    color 130ms ease;
}

.ub-board .ub-view-toggle-btn.is-active {
  background: var(--c-primary);

  color: #fff;

  box-shadow: none;
}

.ub-board .ub-view-toggle-btn:not(.is-active):hover {
  background: var(--b-default);

  color: var(--t-base);
}

/* ── 갤러리 섹션 — #bo_list 와 동일한 카드 스타일 ── */

.ub-board #bo_gallery {
  background: #ffffff;

  border: 1px solid rgba(15, 23, 42, 0.08);

  border-top: 0;

  border-radius: 0 0 16px 16px;

  overflow: visible;

  margin-bottom: 12px;
}

/* ── 갤러리 그리드 컨테이너 ── */

.ub-board .ubg {
  padding: 16px 16px 20px;
}

.ub-board .ubg-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

  list-style: none;

  margin: 0;

  padding: 0;
}

/* ── 갤러리 카드 ── */

.ub-board .ubg-card {
  position: relative;

  border-radius: 14px;

  overflow: hidden;

  background: #fff;

  border: 1px solid rgba(15, 23, 42, 0.07);

  box-shadow: none;

  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease;

  animation: ubRowIn 280ms ease both;
}

.ub-board .ubg-card:hover {
  transform: translateY(-4px) scale(1.01);

  box-shadow: none;

  border-color: rgba(97, 93, 250, 0.3);
}

.ub-board .ubg-card--notice {
  border-color: rgba(97, 93, 250, 0.25);

  background: linear-gradient(160deg, #f8f8fc 0%, #fff 60%);
}

/* ── 카드 링크 전체 영역 ── */

.ub-board .ubg-card__link {
  display: flex;

  flex-direction: column;

  height: 100%;

  text-decoration: none;

  color: inherit;
}

/* ── 썸네일 영역 ── */

.ub-board .ubg-card__thumb {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #eeecff 100%);

  flex-shrink: 0;
}

.ub-board .ubg-card__thumb img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ub-board .ubg-card:hover .ubg-card__thumb img {
  transform: scale(1.06);
}

.ub-board .ubg-card__thumb-placeholder {
  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 40%, #eeecff 100%);
}

/* 썸네일 위 배지/아이콘 */

.ub-board .ubg-badge {
  position: absolute;

  top: 10px;

  left: 10px;

  font-size: 0.625rem;

  font-weight: 800;

  letter-spacing: 0.06em;

  padding: 3px 8px;

  border-radius: 9999px;

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  line-height: 1.5;
}

.ub-board .ubg-badge--notice {
  background: rgba(97, 93, 250, 0.85);

  color: #fff;
}

.ub-board .ubg-icon {
  position: absolute;

  top: 10px;

  right: 10px;

  font-size: 0.625rem;

  font-weight: 800;

  padding: 3px 7px;

  border-radius: 9999px;

  line-height: 1.5;

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);
}

.ub-board .ubg-icon--hot {
  background: rgba(244, 63, 94, 0.85);
  color: #fff;
  letter-spacing: 0.05em;
}

.ub-board .ubg-icon--new {
  background: rgba(97, 93, 250, 0.85);
  color: #fff;
}

.ub-board .ubg-icon--secret {
  background: rgba(100, 116, 139, 0.75);
  color: #fff;
}

/* 댓글 수 오버레이 */

.ub-board .ubg-card__cmt-overlay {
  position: absolute;

  bottom: 8px;

  right: 10px;

  font-size: 0.6875rem;

  color: #fff;

  background: rgba(15, 23, 42, 0.55);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

  padding: 2px 8px;

  border-radius: 9999px;

  line-height: 1.6;
}

/* ── 카드 본문 ── */

.ub-board .ubg-card__body {
  flex: 1;

  display: flex;

  flex-direction: column;

  padding: 14px 16px 14px;

  gap: 6px;
}

.ub-board .ubg-card__title {
  font-size: 0.875rem;

  font-weight: 700;

  color: #0f172a;

  line-height: 1.45;

  margin: 0;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  letter-spacing: -0.015em;

  transition: color 130ms ease;
}

.ub-board .ubg-card:hover .ubg-card__title {
  color: var(--c-primary);
}

.ub-board .ubg-card__meta {
  display: flex;

  align-items: center;

  gap: 5px;

  font-size: 0.75rem;

  color: #94a3b8;
}

.ub-board .ubg-card__author {
  font-weight: 600;
  color: #64748b;
}

.ub-board .ubg-card__sep {
  color: #e2e8f0;
}

.ub-board .ubg-card__stats {
  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 0.6875rem;

  color: #94a3b8;

  margin-top: auto;

  padding-top: 8px;

  border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.ub-board .ubg-card__stats i {
  margin-right: 3px;
}

/* ── 진입 애니메이션 스태거 ── */

.ub-board .ubg-card:nth-child(1) {
  animation-delay: 0ms;
}

.ub-board .ubg-card:nth-child(2) {
  animation-delay: 40ms;
}

.ub-board .ubg-card:nth-child(3) {
  animation-delay: 80ms;
}

.ub-board .ubg-card:nth-child(4) {
  animation-delay: 120ms;
}

.ub-board .ubg-card:nth-child(5) {
  animation-delay: 160ms;
}

.ub-board .ubg-card:nth-child(6) {
  animation-delay: 200ms;
}

.ub-board .ubg-card:nth-child(7) {
  animation-delay: 240ms;
}

.ub-board .ubg-card:nth-child(8) {
  animation-delay: 280ms;
}

.ub-board .ubg-card:nth-child(9) {
  animation-delay: 320ms;
}

.ub-board .ubg-card:nth-child(10) {
  animation-delay: 360ms;
}

.ub-board .ubg-card:nth-child(11) {
  animation-delay: 400ms;
}

.ub-board .ubg-card:nth-child(12) {
  animation-delay: 440ms;
}

/* ── 반응형 ── */

@media (max-width: 1199px) {
  .ub-board .ubg-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

@media (max-width: 767px) {
  .ub-board .ubg-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .ub-board .ubg {
    padding: 12px 12px 16px;
  }

  .ub-board .ubg-card__body {
    padding: 11px 12px;
  }

  .ub-board .ubg-card__title {
    font-size: 0.8125rem;
  }

  .ub-board #bo_gallery {
    border-radius: 0 0 12px 12px;
  }
}

@media (max-width: 479px) {
  .ub-board .ubg-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ═══════════════════════════════════════════════════════

   웹진(매거진) 뷰 — 피처드 + 사이드 + 하단 그리드

═══════════════════════════════════════════════════════ */

/* ── 웹진 섹션 래퍼 ── */

.ub-board #bo_webzine {
  background: #ffffff;

  border: 1px solid rgba(15, 23, 42, 0.08);

  border-top: 0;

  border-radius: 0 0 16px 16px;

  overflow: visible;

  margin-bottom: 12px;
}

.ub-board .ubwz {
  padding: 16px 16px 20px;
}

/* ── 공통 배지 ── */

.ub-board .ubwz-badge {
  display: inline-block;

  font-size: 0.6rem;

  font-weight: 800;

  letter-spacing: 0.07em;

  padding: 2px 8px;

  border-radius: 9999px;

  line-height: 1.6;

  margin-bottom: 6px;
}

.ub-board .ubwz-badge--notice {
  background: rgba(97, 93, 250, 0.9);
  color: #fff;
}

/* ── 웹진 상태 아이콘 (NEW / HOT / SECRET) ── */

.ub-board .ubwz-icon {
  position: absolute;

  top: 12px;

  right: 12px;

  z-index: 2;

  font-size: 0.625rem;

  font-weight: 800;

  padding: 3px 8px;

  border-radius: 9999px;

  line-height: 1.5;

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);
}

.ub-board .ubwz-icon--new {
  background: rgba(97, 93, 250, 0.85);
  color: #fff;
  letter-spacing: 0.04em;
}

.ub-board .ubwz-icon--hot {
  background: rgba(244, 63, 94, 0.85);
  color: #fff;
  letter-spacing: 0.05em;
}

.ub-board .ubwz-icon--secret {
  background: rgba(100, 116, 139, 0.75);
  color: #fff;
}

/* 사이드·그리드 카드 본문 안에서는 인라인으로 표시 */

.ub-board .ubwz-side-card__body .ubwz-icon,
.ub-board .ubwz-card__body .ubwz-icon {
  position: static;

  display: inline-flex;

  align-items: center;

  align-self: flex-start;

  margin-bottom: 2px;
}

.ub-board .ubwz-badge--topleft {
  position: absolute;

  top: 12px;

  left: 12px;

  z-index: 2;

  font-size: 0.6875rem;

  padding: 4px 11px;

  box-shadow: none;

  letter-spacing: 0.05em;
}

.ub-board .ubwz-sep {
  color: rgba(255, 255, 255, 0.5);
  margin: 0 3px;
}

/* ═══ ① 상단 히어로 영역 ═══ */

.ub-board .ubwz-hero {
  display: grid;

  grid-template-columns: 3fr 2fr;

  gap: 14px;

  margin-bottom: 14px;
}

/* ── 피처드 카드 ── */

.ub-board .ubwz-featured {
  position: relative;

  display: block;

  border-radius: 14px;

  overflow: hidden;

  aspect-ratio: 4 / 3;

  text-decoration: none;

  background: linear-gradient(135deg, #5753e4, #5753e4);

  box-shadow: none;

  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms ease;
}

.ub-board .ubwz-featured:hover {
  transform: translateY(-3px) scale(1.005);

  box-shadow: none;
}

.ub-board .ubwz-featured__img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ub-board .ubwz-featured:hover .ubwz-featured__img {
  transform: scale(1.04);
}

.ub-board .ubwz-featured__placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(135deg, #5753e4 0%, #5753e4 60%, #7370fb 100%);

  color: #fff;
}

/* 피처드 텍스트 오버레이 */

.ub-board .ubwz-featured__overlay {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 24px 22px 20px;

  background: linear-gradient(
    to top,

    rgba(7, 3, 28, 0.82) 0%,

    rgba(7, 3, 28, 0.45) 50%,

    transparent 100%
  );
}

.ub-board .ubwz-featured__title {
  font-size: 1.1875rem;

  font-weight: 800;

  color: #fff;

  line-height: 1.4;

  margin: 0 0 8px;

  letter-spacing: -0.02em;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.ub-board .ubwz-featured__meta {
  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.8);

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 2px;
}

/* ── 사이드 카드 3개 ── */

.ub-board .ubwz-side {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

.ub-board .ubwz-side-card {
  display: flex;

  gap: 12px;

  align-items: center;

  border-radius: 12px;

  overflow: hidden;

  background: #f8fafc;

  border: 1px solid rgba(15, 23, 42, 0.06);

  text-decoration: none;

  color: inherit;

  padding: 10px;

  flex: 1;

  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.ub-board .ubwz-side-card:hover {
  background: #f5f0e8;

  border-color: rgba(97, 93, 250, 0.3);

  transform: translateX(3px);
}

.ub-board .ubwz-side-card__thumb {
  flex: 0 0 78px;

  height: 58px;

  border-radius: 8px;

  overflow: hidden;

  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.ub-board .ubwz-side-card__thumb img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;
}

.ub-board .ubwz-side-card__placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.ub-board .ubwz-side-card__body {
  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 4px;
}

.ub-board .ubwz-side-card__title {
  font-size: 0.8125rem;

  font-weight: 700;

  color: #0f172a;

  margin: 0;

  line-height: 1.45;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  letter-spacing: -0.01em;

  transition: color 130ms ease;
}

.ub-board .ubwz-side-card:hover .ubwz-side-card__title {
  color: var(--c-primary);
}

.ub-board .ubwz-side-card__meta {
  font-size: 0.6875rem;

  color: #94a3b8;

  display: flex;

  align-items: center;

  gap: 2px;
}

/* ═══ ② 하단 그리드 ═══ */

.ub-board .ubwz-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 14px;

  list-style: none;

  margin: 0;

  padding: 0;
}

.ub-board .ubwz-card {
  border-radius: 12px;

  overflow: hidden;

  background: #fff;

  border: 1px solid rgba(15, 23, 42, 0.07);

  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms ease,
    border-color 200ms ease;
}

.ub-board .ubwz-card:hover {
  transform: translateY(-3px);

  box-shadow: none;

  border-color: rgba(97, 93, 250, 0.28);
}

.ub-board .ubwz-card--notice {
  background: linear-gradient(160deg, #f8f8fc, #fff);
}

.ub-board .ubwz-card__link {
  display: flex;
  flex-direction: column;

  height: 100%;
  text-decoration: none;
  color: inherit;
}

.ub-board .ubwz-card__thumb {
  position: relative;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.ub-board .ubwz-card__thumb img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;

  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ub-board .ubwz-card:hover .ubwz-card__thumb img {
  transform: scale(1.06);
}

.ub-board .ubwz-card__placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.ub-board .ubwz-card__body {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 12px 14px;

  gap: 5px;
}

.ub-board .ubwz-card__title {
  font-size: 0.8125rem;

  font-weight: 700;

  color: #0f172a;

  line-height: 1.45;

  margin: 0;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  letter-spacing: -0.01em;

  transition: color 130ms ease;
}

.ub-board .ubwz-card:hover .ubwz-card__title {
  color: var(--c-primary);
}

.ub-board .ubwz-card__meta {
  font-size: 0.6875rem;

  color: #94a3b8;

  display: flex;
  align-items: center;
  gap: 3px;
}

.ub-board .ubwz-card__stats {
  display: flex;
  gap: 8px;

  font-size: 0.6563rem;

  color: #94a3b8;

  margin-top: auto;

  padding-top: 7px;

  border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.ub-board .ubwz-card__stats i {
  margin-right: 2px;
}

.ub-board .ubwz-sep {
  margin: 0 2px;
}

/* ── 웹진 반응형 ── */

@media (max-width: 1199px) {
  .ub-board .ubwz-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .ub-board .ubwz-hero {
    grid-template-columns: 1fr;
  }

  .ub-board .ubwz-featured {
    aspect-ratio: 16 / 7;
  }

  .ub-board .ubwz-side {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ub-board .ubwz-side-card {
    flex: 1 1 calc(50% - 5px);
  }

  .ub-board .ubwz-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .ub-board .ubwz {
    padding: 12px 12px 16px;
  }

  .ub-board .ubwz-hero {
    gap: 10px;
  }

  .ub-board .ubwz-side-card {
    flex: 1 1 100%;
  }

  .ub-board .ubwz-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .ub-board .ubwz-featured__title {
    font-size: 1rem;
  }

  .ub-board #bo_webzine {
    border-radius: 0 0 12px 12px;
  }
}

/* ── 카테고리 탭 (gv-cate) ── */

#bo_cate.gv-cate {
  margin: 0 0 10px;

  padding: 0;

  background: transparent;

  border: none;
}

.gv-cate__list {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  list-style: none;

  margin: 0;

  padding: 0;
}

.gv-cate__list li a {
  display: inline-flex;

  align-items: center;

  padding: 6px 18px;

  border-radius: 20px;

  font-size: 0.83rem;

  font-weight: 600;

  color: #64748b;

  text-decoration: none;

  border: 1.5px solid #e2e8f0;

  background: #fff;

  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s;

  white-space: nowrap;

  line-height: 1.5;
}

.gv-cate__list li a:hover {
  border-color: #adafca;

  color: #5753e4;

  background: #f8f8fc;
}

.gv-cate__list li.active a {
  background: linear-gradient(135deg, #475569 0%, #7370fb 100%);

  border-color: transparent;

  color: #fff;

  box-shadow: none;
}