/* ===========================================================================
   늘봄 공용 스타일 — 모든 페이지가 이 파일 하나를 공유한다.
   반드시 각 페이지의 <style> 블록보다 "뒤"에서 불러올 것.
   (뒤에 와야 아래 :root가 페이지에 남아 있는 옛 색을 덮어쓴다)

   header/footer 마크업은 js/layout.js가 만들어 넣는다. 이 파일과 layout.js
   두 곳만 고치면 전 페이지 헤더·푸터가 같이 바뀐다.
   =========================================================================== */

:root{
  /* 새 디자인 토큰 */
  --primary:#00468b;         /* 국립창원대 시그니처 블루 */
  --primary-deep:#00325F;
  --primary-soft:#2E7BC4;
  --accent:#B45309;          /* 따뜻함 담당. 대비 확보를 위해 어둡게 조정한 앰버 */
  --card:#FFFFFF;
  --fg:#122E51;
  --muted-fg:#4F6480;
  --line:#EAF1F8;
  --focus:#0369A1;
  --radius:18px;

  /* 예전 페이지들이 쓰던 이름 — 같은 이름을 새 값으로 다시 정의해서
     각 페이지의 CSS를 건드리지 않고도 새 색이 적용되게 한다. */
  --grad-start:#00468b;
  --grad-end:#2E7BC4;
  --bg:#F3F8FD;
  --card-bg:#FFFFFF;
  --text:#122E51;
  --text-soft:#4F6480;
  --border:#D6E4F2;
  --shadow:0 6px 18px rgba(0,70,139,.08);
}

html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Pretendard","Malgun Gothic","맑은 고딕",sans-serif;
  background:var(--bg);
  color:var(--text);
  word-break:keep-all;
}
img{ max-width:100%; }

/* ── 키보드 접근성 ───────────────────────────────────────────────── */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:8px;
}
.nb-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:#fff; color:var(--primary); font-weight:700; font-size:15px;
  padding:13px 20px; border-radius:0 0 10px 0; box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.nb-skip:focus{ left:0; }

/* ── 헤더 ────────────────────────────────────────────────────────── */
.nb-header{
  background:#fff; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:60;
}
.nb-header a{ text-decoration:none; color:inherit; }
/* 헤더는 본문 폭(1180px)에 맞추지 않고 화면 양끝까지 쓴다.
   가운데로 모아 두면 넓은 화면에서 심볼과 로그인 버튼이 화면 한복판에 떠 있는 것처럼
   보여 어중간하다. 심볼은 왼쪽 끝, 계정·메뉴는 오른쪽 끝에 붙인다. */
.nb-hd{
  padding:14px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nb-brand{ display:flex; align-items:center; gap:16px; min-width:0; min-height:48px; }
.nb-sym{ height:46px; width:auto; flex-shrink:0; display:block; }
.nb-vl{ width:1px; height:40px; background:var(--border); flex-shrink:0; }
.nb-univ{ font-size:13px; color:var(--muted-fg); line-height:1.4; white-space:nowrap; display:block; }
.nb-svc{ font-size:19px; font-weight:800; color:var(--fg); letter-spacing:-.5px;
         line-height:1.3; white-space:nowrap; display:block; }

.nb-right{ display:flex; align-items:center; gap:26px; flex-shrink:0; }

/* 선택자를 '.nb-header a'보다 구체적으로 둘 것.
   .nb-login 단독(0,1,0)은 위의 .nb-header a(0,1,1)에 밀려 글자가
   본문색으로 바뀌고 파란 배경 위에서 대비 1.46:1까지 떨어진다.
   api.js가 로그인 후 같은 class로 '로그아웃'을 복제하므로 그것도 함께 흰색이 된다. */
.nb-header .nb-login{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 22px; background:var(--primary); color:#fff;
  border-radius:999px; font-weight:700; font-size:15px; white-space:nowrap;
}
.nb-header .nb-login:hover{ background:var(--primary-deep); color:#fff; }

/* 회원가입 — 로그인 옆의 보조 버튼. 높이는 접근성 기준(44px)을 지키되
   폭·글자·무게를 로그인의 절반 정도로 낮춰 주 동작을 가리지 않게 한다. */
.nb-header .nb-signup{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 12px; margin-left:8px;
  border-radius:22px; font-size:13px; font-weight:700;
  color:var(--primary); background:transparent;
  box-shadow:inset 0 0 0 1px var(--border);
  white-space:nowrap;
}
.nb-header .nb-signup:hover{ background:#EAF2FB; box-shadow:inset 0 0 0 1px var(--primary); color:var(--primary); }

/* 로그인한 사람의 이름 — 마이페이지로 가는 조용한 링크. 버튼이 아니다.
   (api.js의 applyHeaderAuthUI가 .nb-login을 떼고 이 클래스를 붙인다) */
.nb-header .nb-user{
  display:inline-flex; align-items:center; min-height:44px; padding:0 4px;
  font-size:14.5px; font-weight:700; color:var(--fg); white-space:nowrap;
}
.nb-header .nb-user:hover{ color:var(--primary); }
/* 로그아웃은 실제 동작이므로 버튼 모양을 유지하되, 파괴적 동작은 아니라 테두리형으로 둔다 */
.nb-header .nb-logout{
  margin-left:10px; background:transparent; color:var(--primary);
  box-shadow:inset 0 0 0 1px var(--border);
}
.nb-header .nb-logout:hover{ background:var(--primary); color:#fff; box-shadow:none; }

/* ── 전체 메뉴(격자) ──────────────────────────────────────────────
   메뉴를 한 줄로 늘어놓으면 항목이 늘어날수록 읽히지 않고, 좁은 화면에서는
   따로 햄버거를 둬야 했다. 격자 하나로 합쳐 어느 폭에서든 같은 자리에서
   같은 방식으로 열리게 한다. 이 버튼이 예전의 상단 메뉴와 햄버거를 모두 대신한다. */
.nb-apps-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-left:8px; flex-shrink:0;
  border:1px solid var(--border); border-radius:12px;
  background:#fff; color:var(--muted-fg); cursor:pointer; padding:0;
}
.nb-apps-btn svg{ width:22px; height:22px; fill:currentColor; }
.nb-apps-btn:hover{ background:#EAF2FB; color:var(--primary); border-color:var(--primary); }
.nb-apps-btn.open{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* 패널은 .nb-hd의 형제라 헤더를 기준으로 놓인다. 헤더와 같은 좌우 여백을 써야
   격자 버튼 바로 아래에 떨어진다(아래 > nav 참고). */
.nb-apps{
  position:absolute; left:0; right:0; top:100%; z-index:70;
}
.nb-apps[hidden]{ display:none; }
/* 패널도 헤더와 같은 여백을 써서 격자 버튼 바로 아래에 떨어지게 한다 */
.nb-apps > nav{
  margin-top:8px; padding:0 32px;
  display:flex; justify-content:flex-end;
}
.nb-apps ul{
  list-style:none; margin:0; padding:12px;
  width:min(340px, calc(100vw - 32px));
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 16px 40px rgba(0,70,139,.16);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:4px;
}
.nb-apps a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  min-height:88px; padding:10px 6px; border-radius:12px;
  color:var(--fg); text-align:center;
}
.nb-apps a:hover{ background:#F3F8FD; }
.nb-apps .nb-ai{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:11px;
  background:#EAF2FB; color:var(--primary);
}
.nb-apps .nb-ai svg{ width:21px; height:21px; }
.nb-apps .nb-al{ font-size:12.5px; font-weight:700; line-height:1.35; word-break:keep-all; }
/* 지금 보고 있는 메뉴 */
.nb-apps a[aria-current="page"]{ background:#EAF2FB; }
.nb-apps a[aria-current="page"] .nb-ai{ background:var(--primary); color:#fff; }
.nb-apps a[aria-current="page"] .nb-al{ color:var(--primary); }

/* ── 푸터 ────────────────────────────────────────────────────────── */
.nb-footer{
  margin-top:80px; background:var(--primary-deep); color:#C3D8EE;
  padding:44px 20px 28px; font-size:14.5px; line-height:1.6;
}
.nb-footer a{ text-decoration:none; color:inherit; }
.nb-fin{ max-width:1180px; margin:0 auto; display:flex;
         justify-content:space-between; flex-wrap:wrap; gap:26px; }
.nb-footer .nb-org{ color:#fff; font-weight:800; font-size:16px; margin-bottom:9px; }
.nb-footer .nb-line{ margin:3px 0; }
.nb-fnav{ display:flex; flex-wrap:wrap; gap:4px 22px; }
.nb-fnav a{ display:inline-flex; align-items:center; min-height:44px;
            color:#C3D8EE; font-weight:600; white-space:nowrap; }
.nb-fnav a:hover{ color:#fff; }
.nb-fnote{
  max-width:1180px; margin:22px auto 0; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.18); font-size:13px; color:#A9C6E2;
}

/* ── 브라우저 기본 표면 ───────────────────────────────────────────
   드래그 선택색, 입력 커서, 스크롤바는 우리가 그리지 않았을 뿐 화면의 일부다.
   손대지 않으면 브라우저 기본값(윈도우 파랑 등)이 그대로 나와 사이트 색과 따로 논다. */
::selection{ background:rgba(0,70,139,.16); color:var(--fg); }
input, textarea, [contenteditable]{ caret-color:var(--primary); }

/* 스크롤바 — 표가 많은 관리자 화면에서 특히 자주 보인다. */
*{ scrollbar-color:#B9CEE4 transparent; scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:#B9CEE4; border-radius:8px;
  border:3px solid var(--bg);   /* 트랙과 띄워 얇아 보이게 */
}
::-webkit-scrollbar-thumb:hover{ background:#8FB0D2; }

/* 숫자 정렬 — 강사료·차시·거리처럼 세로로 비교하는 값은 자릿수가 흔들리면 안 된다. */
td, th, .num, input[type=number]{ font-variant-numeric:tabular-nums; }

/* ── 터치 타겟 (DESIGN.md §6) ─────────────────────────────────────
   헤더·푸터는 처음부터 44px를 지켰지만 하위 페이지 내부(탭 버튼 37px,
   입력칸 30~40px, 검색 버튼 29px)는 규칙 밖에 있었다. 여기서 한 번에 맞춘다.

   이 파일은 각 페이지의 <style>보다 뒤에 오므로 별도 !important 없이 이긴다.
   인라인 본문 링크까지 44px로 늘리면 문단이 깨지므로 링크는 건드리지 않고,
   버튼과 폼 컨트롤만 대상으로 한다. */
button,
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
select,
textarea{
  min-height:44px;
}
/* 데이터 표 안은 예외로 둔다. 관리자 화면의 실적·배정 표처럼 한 행에 여러
   조작 요소가 들어가는 곳까지 44px로 올리면 행이 두 배로 늘어 오히려 훑어보기가
   어려워진다. WCAG 2.5.8(AA)도 이런 밀집 표를 예외로 인정하며 24px를 하한으로 본다. */
table button,
table input:not([type=checkbox]):not([type=radio]),
table select{
  min-height:32px;
}
/* 그 밖에 페이지가 의도적으로 작게 만든 곳은 .nb-compact로 빠져나간다. */
.nb-compact,
.nb-compact button,
.nb-compact input,
.nb-compact select{
  min-height:0;
}
textarea{ min-height:96px; }

/* 단독으로 놓인 이동 링크(← 메인으로 돌아가기 등)는 문단 안의 링크와 달리
   그 자체가 조작 대상이므로 높이를 확보한다. */
.nb-link{
  display:inline-flex; align-items:center; min-height:44px;
}

/* ── 주소 검색 위젯 (js/address-search.js) ─────────────────────────
   가입 화면과 마이페이지가 같은 모양을 쓰도록 여기에 둔다. */
.addr-search-row{ display:flex; gap:8px; }
.addr-search-row .addr-query{
  flex:1; min-width:0;
  border:1px solid var(--border); border-radius:10px; padding:0 12px;
  min-height:44px; font-size:14px; font-family:inherit; background:#fff; color:var(--fg);
}
.addr-search-row .addr-btn{
  flex-shrink:0; min-height:44px; padding:0 16px;
  border:1px solid var(--primary); border-radius:10px;
  background:var(--primary); color:#fff; font-family:inherit;
  font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.addr-search-row .addr-btn:hover{ background:var(--primary-deep); border-color:var(--primary-deep); }
.addr-search-row .addr-btn:disabled{ opacity:.6; cursor:default; }

.addr-results{
  margin-top:8px; border:1px solid var(--border); border-radius:10px;
  overflow:hidden; max-height:260px; overflow-y:auto; background:#fff;
}
.addr-item{
  display:block; width:100%; text-align:left;
  border:none; border-bottom:1px solid var(--line); background:#fff;
  padding:12px 14px; font-family:inherit; cursor:pointer;
}
.addr-item:last-child{ border-bottom:none; }
.addr-item:hover{ background:#F3F8FD; }
.addr-road{ display:block; font-size:14px; font-weight:600; color:var(--fg); line-height:1.5; }
.addr-jibun{ display:block; font-size:12px; color:var(--muted-fg); margin-top:3px; }

/* 검색창은 늘 열려 있고, 고른 주소는 그 아래 확인 표시로 남는다.
   바꾸려면 위에서 그냥 다시 검색하면 되므로 별도 버튼이 없다. */
.addr-picked{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.addr-picked-main{
  display:flex; align-items:flex-start; gap:9px;
  background:#EAF2FB; border-radius:10px; padding:12px 14px;
  color:var(--primary);
}
.addr-picked-main .nb-ico{ margin-top:2px; flex-shrink:0; }
.addr-picked-text{
  flex:1; min-width:0; font-size:14px; font-weight:600; line-height:1.5;
}
.addr-picked .addr-detail{
  border:1px solid var(--border); border-radius:10px; padding:0 12px;
  min-height:44px; font-size:14px; font-family:inherit; background:#fff; color:var(--fg);
}

.addr-msg{ font-size:12.5px; line-height:1.7; }
.addr-msg:not(:empty){ margin-top:8px; }
.addr-warn{ color:#8a6a10; display:block; }
.addr-manual{
  margin-top:6px; min-height:38px; padding:0 12px;
  border:1px solid var(--border); border-radius:8px; background:#fff;
  font-family:inherit; font-size:12.5px; color:var(--primary); cursor:pointer;
}
.addr-manual:hover{ border-color:var(--primary); }

/* ── 아이콘 (DESIGN.md §6: 이모지 금지, 인라인 SVG) ────────────────
   이모지는 기기·OS마다 모양과 크기가 제각각이고 글자로 읽히면 스크린리더가
   "쌍꺼풀 없는 눈" 같은 이름을 그대로 읽는다. 전부 stroke SVG로 교체했다.
   stroke:currentColor이므로 주변 글자색을 그대로 따라간다. */
.nb-ico{
  vertical-align:-.18em;   /* 글자 baseline에 맞춘다 */
  flex-shrink:0;
}
.nb-ico-wrap{ display:inline-flex; align-items:center; }

/* ── 반응형 ──────────────────────────────────────────────────────── */
@media (max-width:900px){
  .nb-hd{ padding:14px 20px; }
  .nb-apps > nav{ padding:0 20px; }
  .nb-right{ gap:12px; }
  .nb-svc{ font-size:16.5px; }
  .nb-univ{ font-size:12px; }
  .nb-sym{ height:40px; }
  .nb-vl{ height:34px; }
}
@media (max-width:600px){
  .nb-brand{ gap:11px; }
  .nb-vl{ display:none; }
  .nb-univ{ display:none; }        /* 심볼이 대학 정체성을 대신한다 */
  .nb-svc{ font-size:15.5px; white-space:normal; }
  .nb-header .nb-login{ padding:0 14px; font-size:14px; }
  /* 좁은 화면에서는 심볼·사업단명·로그인·회원가입·메뉴가 한 줄에 다 들어가야 한다 */
  .nb-header .nb-signup{ padding:0 10px; margin-left:6px; font-size:12.5px; }
  .nb-apps-btn{ margin-left:6px; }
  .nb-right{ gap:8px; }
  .nb-hd{ padding:12px 16px; }
  .nb-apps > nav{ padding:0 16px; }

  .nb-footer{ margin-top:60px; }
}

/* ===== 좁은 화면에서 헤더가 다섯 줄로 쪼개지던 것 =====
   로그인하면 오른쪽에 「이름 님 · 로그아웃 · 격자」가 서는데, .nb-right 가
   flex-shrink:0 이라 절대 줄지 않는다. 그래서 왼쪽 브랜드가 90px 까지 짜부라져
   「초등 / 방과후 / 프로그램 / 운영 / 사업단」 다섯 줄이 됐다.
   이름은 감춘다 — 마이페이지 프로필 카드와 격자 메뉴에 다시 나오므로 잃는 것이 없다.
   (.nb-user 는 로그인한 상태에서만 붙으므로 비로그인 「로그인」 버튼은 그대로 보인다) */
@media (max-width:600px){
  .nb-header .nb-user{ display:none; }
  .nb-right{ gap:6px; }
  .nb-hd{ padding:12px 14px; }
  .nb-apps-btn{ margin-left:0; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}