/* 공익포탈(brown.or.kr) 모바일 통일 디자인 시스템 — 2026-08 UI 감사 승인안(네이비 앱바·SVG 아이콘) */
/* 페이지 로컬 스타일과 충돌하지 않도록 신규 클래스(appbar/pic/pbtn/…)만 정의한다. */

:root{
  --pnavy:#16233f;        /* 브랜드 네이비(상단바·주버튼) */
  --pnavy2:#22345c;       /* 히어로 그라데이션 보조 */
  --pnavy3:#0f1a30;       /* 눌림 상태 */
  --pgold:#e6c987;        /* 골드 액센트 */
  --pgold-deep:#b9923f;
  --pblue:#2f5db3;        /* 링크·정보 파랑 */
  --pbg:#f3f5f9;          /* 페이지 배경(쿨 그레이) */
  --pcard:#ffffff;
  --pink:#1c2434;         /* 본문 텍스트 */
  --psub:#5d6b81;         /* 보조 텍스트 */
  --pline:#e3e8ef;        /* 테두리 */
  --pok:#1e7f4f; --pwarn:#b7791f; --pdanger:#c0392b;
  --pradius:14px;
  --pshadow:0 1px 3px rgba(22,35,63,.08);
  --appbar-h:52px;
}

/* 이 파일을 링크한 포탈 페이지는 페이지 배경을 쿨그레이로 통일(styles.css의 크림 배경 상쇄) */
html{background:var(--pbg);}

/* ---------- 상단 앱바(전 페이지 공통 규격) ---------- */
.appbar{
  position:sticky; top:0; z-index:900; height:var(--appbar-h);
  background:var(--pnavy); color:#fff;
  display:flex; align-items:center; gap:4px; padding:0 6px;
}
.appbar .nav-btn{
  width:44px; height:44px; flex:0 0 44px; border:0; background:transparent; color:#fff;
  display:flex; align-items:center; justify-content:center; border-radius:10px;
  cursor:pointer; text-decoration:none;
}
.appbar .nav-btn:active{background:rgba(255,255,255,.12);}
.appbar .nav-btn svg{width:24px;height:24px;}
.appbar .title{
  flex:1; text-align:center; font-size:16px; font-weight:700; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.appbar .spacer{width:44px;flex:0 0 44px;}
/* 홈(대시보드) 전용 — 우측 로그인/회원 칩 */
.appbar .chip{
  display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 12px;
  border:1px solid rgba(230,201,135,.55); border-radius:17px; color:var(--pgold);
  font-size:12.5px; font-weight:800; text-decoration:none; background:rgba(255,255,255,.08);
  white-space:nowrap;
}
.appbar .chip svg{width:15px;height:15px;}
.appbar .chip.alert{border-color:#e4573d;color:#ffb4a3;}

/* ---------- 히어로 — 네이비 계열만 ---------- */
.phero{
  background:linear-gradient(160deg,var(--pnavy) 0%,var(--pnavy2) 100%);
  color:#fff; text-align:center; padding:20px 16px 22px;
}
.phero h1{font-size:21px;font-weight:800;letter-spacing:-.2px;margin:0;}
.phero .psub{font-size:12.5px;color:rgba(255,255,255,.78);margin-top:4px;}
.phero .pgold{color:var(--pgold);font-weight:700;}

/* ---------- 아이콘 칩(메뉴 카드 공통) ---------- */
.pic{
  flex:0 0 44px; width:44px; height:44px; border-radius:12px;
  background:#e9edf6; display:flex; align-items:center; justify-content:center; color:var(--pnavy);
}
.pic svg{width:24px;height:24px;}
.pic.gold{background:#f6eeda;color:var(--pgold-deep);}
.pic img{width:38px;height:38px;object-fit:contain;display:block;}   /* 로고 등 이미지 유지용 */

/* 인라인 소형 아이콘(메타·버튼 안) */
.pmi{display:inline-block;width:15px;height:15px;vertical-align:-2.5px;}

/* ---------- 버튼 ---------- */
.pbtn{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%; height:48px;
  border:0; border-radius:12px; background:var(--pnavy); color:#fff;
  font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; font-family:inherit;
}
.pbtn:active{background:var(--pnavy3);}
.pbtn.outline{background:#fff;color:var(--pnavy);border:1.5px solid var(--pnavy);}
.pbtn.gold{background:var(--pgold-deep);}
.pbtn.sm{height:40px;font-size:14px;border-radius:10px;width:auto;padding:0 16px;display:inline-flex;}

/* ---------- 배지 ---------- */
.pbdg{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:#e9edf6;color:var(--pnavy);vertical-align:2px;}
.pbdg.gold{background:#f6eeda;color:var(--pgold-deep);}
.pbdg.ok{background:#e3f2ea;color:var(--pok);}
.pbdg.new{background:var(--pgold-deep);color:#fff;}

/* ---------- 공통 푸터 ---------- */
.pfoot{text-align:center;color:#93a0b4;font-size:11.5px;padding:26px 16px 34px;line-height:1.8;}
.pfoot a{color:var(--psub);text-decoration:none;font-weight:600;}