/* STANDARD 포털 메인 스타일 - applyplaza 디자인 참고 */

/* ========== 1) CSS 변수(테마) ============================================ */
:root {
  /* 포인트 & 상태 */
  --accent:      #A85143;
  --accent-600:  #A85143;
  --accent-700:  #8E4136;
  --accent-200:  #E6D2CC;
  --accent-100:  #F2E6E2;
  --accent-50:   #F9EFEB;
  --ok-50:       #ecfdf5;
  --ok-700:      #047857;
  --bad-50:      #fef2f2;
  --bad-700:     #b91c1c;

  /* 텍스트/배경/테두리 */
  --ink:   #0f172a;
  --muted: #6b7280;
  --card:  #ffffff;
  --border:#e5e7eb;
}

/* ========== 1.5) 목록/카드 행 레이아웃 (텍스트 세로 쌓임 방지) ========== */
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.list-row-content { flex: 1 1 0; min-width: 0; }
.list-row-body { min-width: 10rem; }
.list-row-body h3, .list-row-body h4, .list-row-body p, .list-row-body .text-sm { word-break: break-word; }
.list-row-actions { flex-shrink: 0; }
.list-row-badge, .list-row-badges span { flex-shrink: 0; }

/* ========== 2) 베이스 ==================================================== */
html, body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI Variable Display", "Segoe UI",
               Helvetica, "Apple Color Emoji", Arial, sans-serif,
               "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--ink);
  background: #fafafa;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-width: auto;
  overflow-x: auto;
}

/* 뷰어(안내문·서식 본문) 로딩 블록 텍스트 - body와 동일한 폰트, font-weight 500 */
.loading-block-viewer-font {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI Variable Display", "Segoe UI",
               Helvetica, "Apple Color Emoji", Arial, sans-serif,
               "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 500;
}

/* ========== 3) GNB (Global Navigation Bar) ============================== */
.gnb {
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.gnb-container {
  max-width: 72rem; /* max-w-6xl */
  margin: 0 auto;
  padding: 0 1rem;
}

/* ========== 4) LNB (Local Navigation Bar) ============================== */
.lnb {
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.lnb-container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.lnb-nav {
  display: flex;
  gap: 0.25rem;
}

.lnb-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
  border-radius: 0.375rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lnb-nav a:hover {
  background: #f8fafc;
  color: var(--ink);
}

.lnb-nav a.active {
  color: var(--accent-600);
  font-weight: 600;
  background: var(--accent-50);
}

/* ========== 5) SNB (Sidebar Navigation) ================================== */
.snb {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

/* 모바일: 테두리·라운딩 제거, 배경 구분 */
@media (max-width: 767px) {
  .snb {
    border: none;
    border-radius: 0;
    background: var(--border);
  }
  .snb .snb-header,
  .snb .snb-nav {
    background: #fff;
  }
}

/* 모바일: 접혀 있어도 현재 메뉴·다른 항목 존재를 알 수 있는 헤더 (애니메이션 없음) */
.snb-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
/* 모바일 SNB: 브레드크럼 형태 현재 위치 */
.snb-mobile-current {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
}
.snb-mobile-current .snb-breadcrumb-sep {
  flex-shrink: 0;
  margin: 0 0.35rem;
  color: var(--muted);
}
.snb-mobile-current .snb-breadcrumb-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-weight: normal;
  color: var(--muted);
}
.snb-mobile-current .snb-breadcrumb-item:last-child {
  font-weight: 600;
  color: var(--ink);
  flex-shrink: 0;
}
.snb-mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
}
.snb-mobile-toggle:hover {
  color: var(--ink);
}
.snb-chevron {
  transition: none;
}
.snb-mobile-open .snb-chevron {
  transform: rotate(180deg);
}

/* 모바일: 닫혀 있을 때 본문(헤더+nav) 숨김 */
@media (max-width: 767px) {
  .snb:not(.snb-mobile-open) .snb-header,
  .snb:not(.snb-mobile-open) .snb-nav {
    display: none;
  }
}

/* 모바일: 펼쳤을 때 mobile-header와 snb-header 시각적 구분 */
@media (max-width: 767px) {
  .snb-mobile-open .snb-header {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
  }
}

/* 모바일: snb-nav 고정 높이 + 스크롤 */
@media (max-width: 767px) {
  .snb-mobile-open .snb-nav {
    max-height:  min(60vh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.snb-header {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.snb-nav {
  padding: 0.5rem;
  font-size: 0.875rem;
}

.snb-nav a {
  display: block;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  color: var(--ink);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.snb-nav a:hover {
  background: #f8fafc;
}

.snb-nav a.active {
  background: var(--accent-600);
  color: #fff;
}

.snb-nav a.active:hover {
  background: var(--accent-700);
}

/* 하위 메뉴 스타일 */
.snb-nav a.sub-item {
  padding-left: 1.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
  position: relative;
}

.snb-nav a.sub-item::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--border);
  border-radius: 50%;
}

.snb-nav a.sub-item:hover {
  color: var(--ink);
}

.snb-nav a.sub-item.active {
  background: var(--accent-50);
  color: var(--accent-600);
}

.snb-nav a.sub-item.active::before {
  background: var(--accent-600);
}

.snb-nav a.sub-item.active:hover {
  background: var(--accent-100);
}

/* ========== 5.1) 필터 버튼 ============================================== */
.filter-btn {
  transition: background-color 0.15s ease, color 0.15s ease;
}

.filter-btn.active {
  background: var(--accent-600) !important;
  color: #fff !important;
}

/* ========== 5.2) 토글 스위치 ============================================ */
.toggle-switch {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  background: #e5e7eb;
  border-radius: 9999px;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  transition: transform 0.2s ease;
}

.toggle-input:checked + .toggle-switch {
  background: var(--accent-600);
}

.toggle-input:checked + .toggle-switch::after {
  transform: translateX(100%);
}

/* ========== 6) 메인 콘텐츠 =============================================== */
.main-container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
  width: 100%;
}

/* 모바일에서 padding 제거 */
@media (max-width: 640px) {
  .main-container {
    padding: 0;
  }
}

/* 로그인/설정 페이지 등 특수 페이지는 중앙 정렬된 좁은 폼 사용 */
.main-container > .max-w-md,
.main-container > .max-w-3xl {
  margin-left: auto;
  margin-right: auto;
}

/* ========== 7) 버튼 컴포넌트 ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-weight: 500;
  font-size: 0.875rem;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  background: #f8fafc;
}



.btn-primary {
  background: var(--accent-600);
  color: #fff;
  border-color: transparent;
}

.btn-primary:hover {
  background: var(--accent-700);
  filter: none;
}

.btn-secondary {
  background: #fff;
  color: var(--muted);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: #f8fafc;
  color: var(--ink);
}

/* ========== 8) 입력 필드 ================================================ */
/* input-field: web/static/css/main.css 에서 정의. 템플릿·field_renderer.js 등에서 공통 사용 */
.input-field {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  min-height: 2.5rem; /* 값이 없을 때도 높이 유지 */
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* 브라우저 기본 디자인 사용 (다국어·접근성·네이티브 date/select 동작 유지) */
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}

/* number 타입: 스피너 제거만 선택적 적용 (원하면 유지) */
.input-field[type="number"] {
  -moz-appearance: textfield;
}
.input-field[type="number"]::-webkit-outer-spin-button,
.input-field[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* date/time: 네이티브 캘린더·피커 유지 (position만 필요 시 보조) */
.input-field[type="date"],
.input-field[type="time"],
.input-field[type="datetime-local"] {
  position: relative;
}

.input-field[type="date"]::-webkit-calendar-picker-indicator,
.input-field[type="time"]::-webkit-calendar-picker-indicator,
.input-field[type="datetime-local"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.75rem;
  cursor: pointer;
  opacity: 0.6;
}

/* 포커스 시 border 색 변경 없음 – 전역 outline(링)만 표시 */

/* ========== 9) 카드 ==================================================== */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* 모바일에서 border-radius와 border 제거 */
@media (max-width: 640px) {
  .card {
    border-radius: 0;
    border: none;
  }
}

/* ========== 10) 알림 메시지 ============================================= */
.alert {
  padding: 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid;
  font-size: 0.875rem;
}

.alert-error {
  background: var(--bad-50);
  border-color: #fecaca;
  color: var(--bad-700);
}

.alert-success {
  background: var(--ok-50);
  border-color: #a7f3d0;
  color: var(--ok-700);
}

.alert-warning {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}

.alert-info {
  background: var(--accent-50);
  border-color: var(--accent-200);
  color: var(--accent-700);
}

/* ========== 11) 접근성 (포커스 링: 전역 일관, primary/accent) ============= */
/* 모든 클릭 가능·포커스 가능 요소에 동일한 포커스 링 (focus / focus-visible 모두) */
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* [role="button"] 등 역할 기반 클릭 가능 요소 */
[role="button"]:focus,
[role="button"]:focus-visible,
[role="link"]:focus,
[role="link"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* onclick으로 클릭 가능한 div 등 (tabindex="0"과 함께 사용) */
[onclick]:focus,
[onclick]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 숨겨진 포커스 요소(토글 등)의 다음 형제에 링 표시 */
.focus-ring-peer:focus + *,
.focus-ring-peer:focus-visible + * {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ========== 12) 로딩 스피너 ============================================ */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}