:root{
  --navy:#1f3a5f; --navy-d:#16293f; --ink:#1c1e21; --sub:#5b6572;
  --line:#e3e6ea; --bg:#f4f5f7; --card:#fff; --accent:#2f6bd8;
  --chip-sasi:#e8f0fe; --chip-sasi-t:#1a4bb0;
  --chip-byun:#e9f7ef; --chip-byun-t:#1c7a45;
  --chip-gun:#fdeee6; --chip-gun-t:#a5541f;
  --chip-staff:#eef1f5; --chip-staff-t:#4a5568;
  --radius:14px; --shadow:0 1px 3px rgba(20,30,50,.08),0 6px 20px rgba(20,30,50,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
input,button{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}

/* ---------- 로그인 ---------- */
.gate{
  min-height:100%; display:flex; align-items:center; justify-content:center;
  padding:24px; background:linear-gradient(160deg,var(--navy),var(--navy-d));
}
.gate-card{
  width:100%; max-width:380px; background:var(--card); border-radius:20px;
  padding:34px 26px 22px; box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.gate-title{font-size:23px; line-height:1.32; color:var(--navy); letter-spacing:-.3px}
.gate-title span{font-weight:800}
.gate-sub{margin:12px 0 20px; font-size:13.5px; color:var(--sub)}
#loginForm label{display:block; font-size:12.5px; color:var(--sub); margin-bottom:14px}
#loginForm .opt{color:#9aa3ad; font-weight:400}
#loginForm input[type=tel]{
  width:100%; margin-top:6px; padding:12px 13px; font-size:16px;
  border:1px solid var(--line); border-radius:10px; background:#fbfbfc;
}
#loginForm input:focus{outline:none;border-color:var(--accent);background:#fff}
.chk{display:flex!important;align-items:center;gap:8px;font-size:13px!important;color:var(--ink)!important}
.chk input{width:16px;height:16px}
#loginBtn{
  width:100%; padding:13px; background:var(--navy); color:#fff; font-weight:700;
  border-radius:10px; font-size:15px; margin-top:4px;
}
#loginBtn:disabled{opacity:.55}
.msg{min-height:18px; margin-top:10px; font-size:13px; color:#c0392b; text-align:center}
.msg.ok{color:var(--chip-byun-t)}
.gate-foot{margin-top:18px; font-size:11px; color:#9aa3ad; text-align:center}

/* ---------- 상단바 ---------- */
.app{max-width:720px; margin:0 auto; min-height:100%; background:var(--bg)}
.topbar{
  position:sticky; top:0; z-index:10; background:var(--navy);
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
}
.topbar-in{display:flex; align-items:center; justify-content:space-between}
.brand{color:#fff; font-size:15px; letter-spacing:-.2px}
.brand b{font-weight:800}
.ghost{color:#cdd8ea; font-size:12.5px; padding:6px 10px; border:1px solid rgba(255,255,255,.28); border-radius:8px}
.search-row{margin-top:10px}
#search{
  width:100%; padding:10px 13px; font-size:15px; border:0; border-radius:10px;
  background:rgba(255,255,255,.96);
}
#search:focus{outline:2px solid var(--accent)}
.filter-row{display:flex; gap:7px; margin-top:9px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px}
.filter-row::-webkit-scrollbar{display:none}
.fchip{
  flex:0 0 auto; padding:6px 12px; font-size:12.5px; border-radius:999px;
  background:rgba(255,255,255,.14); color:#dfe7f2; white-space:nowrap;
}
.fchip.on{background:#fff; color:var(--navy); font-weight:700}

/* ---------- 목록 ---------- */
.list-meta{padding:12px 16px 6px; font-size:12px; color:var(--sub)}
.list{list-style:none; padding:0 12px 8px}
.row{
  display:flex; gap:13px; align-items:center; padding:13px 12px;
  background:var(--card); border-radius:var(--radius); margin-bottom:8px;
  box-shadow:var(--shadow); cursor:pointer;
}
.row:active{transform:scale(.995)}
.avatar{
  flex:0 0 46px; width:46px; height:46px; border-radius:50%; background:var(--navy);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.row-main{min-width:0; flex:1}
.row-name{font-size:15.5px; font-weight:700; letter-spacing:-.2px}
.row-name .role{margin-left:6px; font-size:11.5px; color:var(--accent); font-weight:700}
.row-sub{font-size:12.5px; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.chip{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700;
  background:var(--chip-sasi); color:var(--chip-sasi-t); margin-top:5px;
}
.chip.byun{background:var(--chip-byun); color:var(--chip-byun-t)}
.chip.gun{background:var(--chip-gun); color:var(--chip-gun-t)}
.chip.staff{background:var(--chip-staff); color:var(--chip-staff-t)}
.chip.none{background:#eef0f2; color:#77808b}
.avatar.staff{background:#5a6b82}
.group-head{
  list-style:none; padding:14px 6px 6px; font-size:12px; font-weight:700;
  color:var(--sub); letter-spacing:.02em;
}
.empty{text-align:center; color:var(--sub); padding:40px 20px; font-size:14px}
.app-foot{padding:18px 20px calc(env(safe-area-inset-bottom) + 26px); font-size:11px; color:#9aa3ad; text-align:center}

/* ---------- 상세 ---------- */
.sheet{position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center}
.sheet-bg{position:absolute; inset:0; background:rgba(15,22,35,.5)}
.sheet-card{
  position:relative; width:100%; max-width:560px; background:var(--card);
  border-radius:20px 20px 0 0; padding:22px 20px calc(env(safe-area-inset-bottom) + 24px);
  max-height:88vh; overflow-y:auto; animation:up .22s ease;
}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:translateY(0);opacity:1}}
.sheet-x{position:absolute; top:14px; right:14px; font-size:15px; color:var(--sub); padding:6px}
.d-head{display:flex; gap:15px; align-items:center; padding-right:26px}
.d-head .avatar{flex-basis:60px; width:60px; height:60px; font-size:21px}
.d-name{font-size:20px; font-weight:800; letter-spacing:-.3px}
.d-name .role{display:block; font-size:12.5px; color:var(--accent); font-weight:700; margin-top:2px}
.d-qual{margin-top:3px}
.d-list{margin-top:18px; border-top:1px solid var(--line)}
.d-item{display:flex; gap:12px; padding:13px 2px; border-bottom:1px solid var(--line); align-items:flex-start}
.d-item .k{flex:0 0 62px; font-size:12.5px; color:var(--sub); padding-top:2px}
.d-item .v{flex:1; font-size:14.5px; word-break:break-all}
.d-item a.v{color:var(--accent)}
.d-actions{display:flex; gap:8px; margin-top:16px}
.d-actions a{
  flex:1; text-align:center; padding:12px; border-radius:10px; font-size:13.5px;
  font-weight:700; text-decoration:none; background:var(--navy); color:#fff;
}
.d-actions a.alt{background:#eef1f5; color:var(--navy)}
.copy{margin-left:8px; font-size:11.5px; color:var(--accent); font-weight:700; flex:0 0 auto}

@media (min-width:560px){
  .sheet{align-items:center}
  .sheet-card{border-radius:20px}
}
.top-actions{display:flex;align-items:center;gap:6px}.push-hint{float:right;color:var(--accent)}


/* ---------- 알림함 ---------- */
.notice-btn{position:relative}.notice-badge{display:inline-flex;min-width:17px;height:17px;padding:0 5px;margin-left:3px;border-radius:9px;align-items:center;justify-content:center;background:#ff4d4f;color:#fff;font-size:10px;font-weight:800}.notice-card{max-height:82vh}.notice-head{display:flex;align-items:center;justify-content:space-between;padding-right:28px;margin-bottom:12px}.notice-head h2{font-size:19px;color:var(--navy)}#noticeReadAll{font-size:12px;color:var(--accent);font-weight:700}.notice-list{display:flex;flex-direction:column;gap:8px}.notice-item{width:100%;text-align:left;background:#f7f8fa;border:1px solid var(--line);border-radius:12px;padding:13px 14px}.notice-item.unread{background:#eef4ff;border-color:#cbdcff}.notice-item-title{font-size:14px;font-weight:800;padding-right:8px}.notice-item-body{font-size:13px;color:var(--sub);margin-top:4px;white-space:pre-wrap}.notice-item-date{font-size:11px;color:#9099a5;margin-top:7px}.notice-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}.notice-empty{padding:30px 8px;text-align:center;color:var(--sub);font-size:13px}

/* ---------- 모바일 상단 헤더 R4 ---------- */
.topbar-in{gap:10px;min-width:0}.brand{min-width:0;white-space:nowrap}.top-actions{flex:0 0 auto;white-space:nowrap}.top-actions .ghost{white-space:nowrap;line-height:1.2}
@media(max-width:520px){
  .topbar{padding-left:12px;padding-right:12px}
  .topbar-in{display:grid;grid-template-columns:1fr;gap:8px}
  .brand{font-size:14.5px;text-align:left;padding:1px 2px}
  .top-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
  .top-actions .ghost{width:100%;padding:7px 5px;font-size:11.5px;text-align:center;overflow:hidden;text-overflow:ellipsis}
  .notice-btn{overflow:visible!important}
  .notice-badge{position:absolute;top:-5px;right:-4px;margin:0;box-shadow:0 0 0 2px var(--navy)}
  .search-row{margin-top:9px}
}