/* ═══ 중보기도학교 공용 디자인 시스템 ═══
 * nav.js가 모든 페이지에 로드한다. 페이지 고유 스타일보다 나중에 실려 규격을 통일한다.
 * 원칙: 어두운 밤하늘 위 촛불빛 — 금빛(강조·완료) · 보라(행동·진행) · 은은한 유리 카드 */

:root{
  --u-warm:#FFE3A8;
  --u-warm-grad:linear-gradient(115deg,#FFF3D6,#FFDF9E 50%,#E8B366);
  --u-vio-grad:linear-gradient(180deg,#8b7cf6,#6d5df0);
  --u-radius:18px;
  --u-radius-s:12px;
}

/* ── 카드: 유리질감 통일 ── */
.card{
  border-radius:var(--u-radius) !important;
  border-color:rgba(169,155,255,.16) !important;
  box-shadow:0 10px 30px rgba(4,6,18,.35);
}
.card h2{letter-spacing:.26em;color:#8E97BC}

/* ── 버튼 공통: 누르는 맛 + 규격 ── */
button,.btn,.gbtn,.wact,.pst,.hwtab,.cat,.myprbtn{transition:transform .12s ease, filter .15s ease}
button:active,.btn:active,.gbtn:active,.wact:active,.pst:active,.myprbtn:active{transform:scale(.96)}
button:disabled{opacity:.5;cursor:default}
.btn,button.primary{border-radius:var(--u-radius-s);font-weight:800}
button.primary,.btn-primary{box-shadow:0 8px 22px rgba(109,93,240,.35)}

/* ── 입력 요소: 포커스 금빛 링 통일 ── */
textarea,input[type=text],input[type=date],input[type=time],input[type=color],select,.input{
  border-radius:13px;
  transition:border-color .15s, box-shadow .15s;
}
textarea:focus,input:focus,select:focus,.input:focus{
  outline:none;
  border-color:rgba(255,227,168,.55) !important;
  box-shadow:0 0 0 3px rgba(255,227,168,.1);
}

/* ── 빈 상태 문구 통일 ── */
.empty{
  color:#7C88A3;font-size:.85rem;text-align:center;line-height:1.8;
  padding:26px 8px !important;
}
.empty::before{content:"✦";display:block;font-size:1.1rem;color:rgba(255,227,168,.5);margin-bottom:6px}

/* ── 로그인 버튼 통일 ── */
.gbtn{border-radius:999px !important;font-weight:800}

/* ── 스크롤바: 얇고 어둡게 ── */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:rgba(169,155,255,.25);border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:rgba(169,155,255,.45)}
*::-webkit-scrollbar-track{background:transparent}

/* ── 선택 영역 색 ── */
::selection{background:rgba(139,124,246,.45);color:#fff}

/* ── 링크 기본 ── */
a{-webkit-tap-highlight-color:transparent}

/* ── 표(공용): 정돈된 셀 ── */
table th{font-weight:600}
table td,table th{vertical-align:middle}

/* ── 모달(공용 modal.js) 라운드 통일 ── */
.ui-box{border-radius:var(--u-radius) !important}

/* ── 접근성: 포커스 표시 유지 ── */
button:focus-visible,a:focus-visible{outline:2px solid rgba(255,227,168,.6);outline-offset:2px}

/* 카드 등장 애니메이션은 두지 않는다 — 목록이 갱신될 때마다 재생되어 깜빡임으로 보인다 */

/* ── 모바일 깜빡임 방지 ──
 * 반투명 카드의 blur(backdrop-filter)는 뒤에서 계속 움직이는 별하늘과 겹치면
 * 매 프레임 다시 계산되어 목록이 긴 화면(게시판 등)에서 깜빡임으로 보인다.
 * 모바일에서는 블러를 끄고 카드 배경을 조금 더 불투명하게 — 눈으로는 같은 인상 */
@media (max-width:768px), (pointer:coarse){
  /* 하단 탭 자리를 처음부터 비워둔다 — 탭이 뒤늦게 그려지며 화면이 밀리지 않게 */
  body{ padding-bottom:76px !important; }
  .card,.mnav,.mmenu-blur,.ebar,#tbar,.prog{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  .card{ background:rgba(13,20,40,.86) !important; }
}
/* 첫 페인트가 흰 화면으로 번쩍이지 않게 — 문서 최상위부터 어둡게 */
html{background:#070912}