/* air-web-admin — 디자인 토큰(SPEC_full-site.md 파생) + 레이아웃 */

*{ box-sizing:border-box; }
html,body{ min-height:100%; }
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--canvas);
  font-size:14px; line-height:1.5; min-width:1280px;
}
a{ color:var(--brand); }
.hidden{ display:none !important; }

/* 레이아웃 — 전체 페이지 스크롤(사이드바 자체 스크롤 없음), 헤더 sticky. studio 와 동일 맥락. */
#app-shell{ display:grid; grid-template-columns:var(--side-w) 1fr; grid-template-rows:auto 1fr;
  grid-template-areas:"hd hd" "sb mn"; min-height:100vh; }

/* ── 헤더 ── */
#app-header{
  height:var(--header-h); display:flex; align-items:center; gap:12px;
  padding:0 20px; background:var(--surface); border-bottom:1px solid var(--line);
  grid-area:hd; position:sticky; top:0; z-index:20;
}
#app-header .brand{ font-weight:700; font-size:16px; color:var(--ink); }
#app-header .brand small{ color:var(--ink-dim); font-weight:400; margin-left:6px; }
#app-header .who{ margin-left:auto; color:var(--ink-mut); font-size:13px; }
#app-header button{ background:transparent; border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:6px 12px; cursor:pointer; font-size:13px; }
#app-header button:hover{ background:var(--canvas); }

/* ── 사이드바 (화이트 · 아코디언) ── */
#sidebar{
  grid-area:sb; background:var(--surface); padding:12px 0; z-index:10;
  border-right:1px solid var(--line);
}
/* 대메뉴 = 접기/펼치기 토글 행(아이콘+라벨+화살표). 하위는 그룹이 펼쳐졌을 때만 보인다. */
.ic{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ic svg{ width:100%; height:100%; display:block; }

/* 업무 구분선 — 4개 구분 사이 여백+선 */
#sidebar .nav-div{ height:1px; background:var(--line); margin:10px 14px; }
#sidebar .nav-group{ margin-bottom:2px; }
#sidebar .nav-group-title{
  display:flex; align-items:center; gap:8px; width:calc(100% - 16px);
  padding:10px; margin:0 8px; border-radius:8px; border:0; background:transparent;
  font-size:15px; font-weight:500; color:var(--ink); letter-spacing:0; text-align:left;
  white-space:nowrap; cursor:pointer; font-family:inherit;
}
#sidebar .nav-group-title .g-ic{ width:24px; height:24px; flex:0 0 24px;
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink-mut); }
#sidebar .nav-group-title .ttl{ flex:1; }
#sidebar .nav-group-title .nav-chev{ color:var(--ink-dim); font-size:16px; transition:transform .18s; }
#sidebar .nav-group.open > .nav-group-title .nav-chev{ transform:rotate(90deg); }
#sidebar .nav-group-title:hover{ background:var(--canvas); }
#sidebar .nav-group.on > .nav-group-title{ color:var(--brand); }
#sidebar .nav-group.on > .nav-group-title .g-ic{ color:var(--brand); }

/* 하위 목록 — 접힘 기본, 그룹 .open 일 때만 펼침 */
#sidebar .nav-sub{ display:none; padding:2px 0 4px; }
#sidebar .nav-group.open > .nav-sub{ display:block; }

#sidebar .nav-item{
  display:flex; align-items:center; gap:8px;
  padding:9px 10px 9px 44px; margin:0 8px; border-radius:6px;
  background:transparent; color:var(--ink-mut);
  text-decoration:none; font-size:14px; font-weight:400; line-height:normal; cursor:pointer;
}
#sidebar .nav-item:link, #sidebar .nav-item:visited{ text-decoration:none; color:var(--ink-mut); }
#sidebar .nav-item:hover{ background:var(--canvas); color:var(--ink); }
#sidebar .nav-item.active{
  background:var(--brand-050); color:var(--brand); font-weight:600;
}
#sidebar .nav-item .badge{ margin-left:auto; font-size:11px; color:var(--ink-dim); }

/* ── 메인 ── */
#main{
  grid-area:mn;
  padding:24px; min-height:calc(100vh - var(--header-h));
}
#main h1.page-title{ font-size:20px; margin:0 0 4px; }
#main .page-desc{ color:var(--ink-mut); margin:0 0 16px; font-size:13.5px; }

/* ── 카드/표 공통 ── */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; margin-bottom:var(--gap); }
.card h2{ font-size:14px; margin:0 0 12px; color:var(--ink-mut); text-transform:uppercase;
  letter-spacing:.04em; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th,td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
th{ color:var(--ink-mut); font-weight:600; font-size:12px; }
tr:last-child td{ border-bottom:0; }

label{ display:block; color:var(--ink-mut); font-size:12px; margin:8px 0 4px; }
input,select,textarea{ background:var(--surface); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:8px 10px; width:100%; font-family:inherit; font-size:13.5px; }
button.btn{ background:var(--brand); color:#fff; border:0; border-radius:8px; padding:8px 16px;
  cursor:pointer; font-weight:600; font-size:13.5px; }
button.btn:hover{ background:var(--brand-600); }
button.btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--ink); }
/* 되돌리기 어려운 조작(강제 탈퇴 등) — 눌리기 전에 눈에 띄어야 한다. */
button.btn.danger{ color:var(--err); border-color:var(--err); }
button.btn.danger:hover{ background:var(--err-wash); }
.row{ display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
.row > *{ flex:1; min-width:140px; } .row > button{ flex:0 0 auto; }

.pill{ display:inline-block; padding:2px 9px; border-radius:99px; font-size:11.5px;
  background:var(--brand-050); color:var(--brand-600); }
.pill.ok{ background:var(--ok-wash); color:var(--ok); }
.pill.warn{ background:var(--warn-wash); color:var(--warn); }
.pill.err{ background:var(--err-wash); color:var(--err); }
.pill.off{ background:var(--canvas); color:var(--ink-dim); }
.muted{ color:var(--ink-mut); }
.dim{ color:var(--ink-dim); }
.ok-text{ color:var(--ok); } .err-text{ color:var(--err); }

/* ── stub 페이지 ── */
.stub-panel{ background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius);
  padding:20px; margin-bottom:var(--gap); }
.stub-panel .note{ background:var(--brand-050); border-radius:8px; padding:10px 14px;
  color:var(--ink); font-size:13px; margin:10px 0; }
.stub-panel .tbd{ background:var(--warn-wash); border-radius:8px; padding:10px 14px; color:var(--warn-ink);
  font-size:13px; margin:10px 0; }
.dep-badge{ display:inline-block; font-size:12px; padding:3px 10px; border-radius:99px;
  background:var(--canvas); border:1px solid var(--line); color:var(--ink-mut); margin-right:6px; }
.skeleton-table td, .skeleton-table th{ color:var(--ink-dim); }

/* ── 로그인 ── */
/* 로그인 화면 = 사용자(studio) 로그인과 동일 chrome(Top·Footer) + 라이트 색. Google 제외. */
#login-screen{ min-height:100vh; display:flex; flex-direction:column; background:var(--canvas); }
.lp-header{ background:var(--surface); border-bottom:1px solid var(--line); flex:0 0 auto; }
.lp-hbar{ height:52px; display:flex; align-items:center; padding:0 24px; }
.lp-hside{ flex:1; display:flex; align-items:center; }
.lp-hright{ justify-content:flex-end; gap:8px; }
.lp-brand{ font-weight:700; font-size:15px; color:var(--ink); }
.lp-nav{ display:flex; gap:32px; font-size:14px; color:var(--ink); }
.lp-hbtn{ height:32px; padding:0 14px; border:1px solid var(--line-strong); border-radius:var(--radius-pill);
  background:var(--surface); color:var(--ink); font:inherit; font-size:13px; cursor:pointer; }
.lp-hbtn.on{ border-color:var(--brand); color:var(--brand); }
.lp-main{ flex:1; display:flex; align-items:center; justify-content:center; padding:56px 20px; }
.lp-footer{ background:var(--surface); border-top:1px solid var(--line); flex:0 0 auto; padding:44px 24px 32px; }
.lp-finner{ max-width:960px; margin:0 auto; }
.lp-fgrid{ display:flex; gap:56px; flex-wrap:wrap; }
.lp-fbrand{ max-width:280px; }
.lp-fbrand p{ color:var(--ink-mut); font-size:12.5px; line-height:1.6; }
.lp-footer h4{ font-size:13px; margin:0 0 14px; color:var(--ink); font-weight:600; }
.lp-footer p{ color:var(--ink-mut); font-size:12.5px; margin:0 0 7px; }
.lp-biz{ margin-top:28px; border-top:1px solid var(--line); padding-top:16px; }
.lp-biz p{ color:var(--ink-dim); font-size:11.5px; margin:0 0 4px; }
#login-card{ width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px; }
#login-card h1{ font-size:18px; margin:0 0 4px; }
#login-card .sub{ color:var(--ink-mut); font-size:13px; margin:0 0 18px; }
/* 로그인 버튼 = 검정(관리자·테넌트 결정 2026-07-18. studio 는 파랑 유지). */
#login-card button.btn{ background:var(--ink); }
#login-card button.btn:hover{ background:var(--ink-2); }
#login-card input.err{ border-color:var(--err); }
#login-card .lp-check{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-mut); cursor:pointer; }
#login-card .lp-check input{ width:auto; }

/* ── 로딩/에러 상태 ── */
.state-msg{ padding:14px; border-radius:8px; font-size:13px; }
.state-msg.loading{ color:var(--ink-mut); }
.state-msg.error{ background:var(--err-wash); color:var(--err); }

/* ── 사용자 관리: 링크 · 미니 모달 · 상세 ── */
.m-link{ color:var(--brand); cursor:pointer; text-decoration:underline; }
.mini-ov{ position:fixed; inset:0; z-index:200; background:rgba(20,24,35,.4); display:flex; align-items:center; justify-content:center; padding:20px; }
.mini-modal{ width:480px; max-width:100%; max-height:88vh; overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 20px 60px rgba(20,24,35,.2); }
.mini-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); }
.mini-head h3{ font-size:15px; margin:0; color:var(--ink); }
.mini-x{ border:0; background:transparent; font-size:16px; cursor:pointer; color:var(--ink-mut); }
.mini-body{ padding:18px; }
.mini-body .row{ display:flex; gap:8px; align-items:center; }
.mini-lbl{ display:block; font-size:12.5px; color:var(--ink-mut); margin:0 0 6px; }
.mini-foot{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.dt-grid{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.dt-row{ display:flex; padding:9px 12px; border-bottom:1px solid var(--line); font-size:13.5px; }
.dt-row:last-child{ border-bottom:0; }
.dt-k{ width:80px; color:var(--ink-mut); flex:0 0 auto; }
.dt-v{ color:var(--ink); }
.dt-sec{ margin-top:16px; }
.dt-sec h4{ font-size:13px; margin:0 0 4px; color:var(--ink); }
.btn.sm{ padding:4px 10px; font-size:12px; font-weight:500; }
code{ font-family:var(--font-mono); background:var(--chip); padding:1px 6px; border-radius:4px; font-size:12px; color:var(--ink); }
.lp-chk{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-mut); flex:0 0 auto; }
.lp-chk input{ width:auto; }

/* 약관 본문 미리보기 — 스튜디오의 .term-body 와 같은 리듬으로 보여준다. */
.term-preview{ margin-top:10px; padding:14px 16px; background:var(--canvas);
  border:1px solid var(--line); border-radius:var(--radius); font-size:13.5px; line-height:1.75; }
.term-preview h3,.term-preview h4,.term-preview h5{ margin:16px 0 6px; }
.term-preview h3:first-child{ margin-top:0; }
.term-preview p{ margin:0 0 10px; }
.term-preview ul,.term-preview ol{ margin:0 0 10px; padding-left:20px; }
.term-preview li{ margin:2px 0; }

/* ── 토스트 (일시 피드백 · 네이티브 alert 대체) ── */
.toast-host{position:fixed;right:20px;bottom:20px;z-index:2000;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{min-width:220px;max-width:380px;padding:11px 15px;border-radius:10px;font-size:14px;line-height:1.45;color:#fff;background:#2b2f3a;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s;pointer-events:auto}
.toast.show{opacity:1;transform:translateY(0)}
.toast.info{background:var(--brand,#5b5bd6)}
.toast.error{background:var(--err,#e5484d)}
.toast.ok{background:var(--ok,#30a46c)}

/* 확인/입력 모달 본문 */
.mini-msg{margin:0 0 12px;line-height:1.55}
.mini-input{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line,#e5e7eb);border-radius:8px;font-size:14px;margin-bottom:12px}

/* ── 환불/취소 목록: 상세(승인번호·사유) 둘째 줄 ── */
.rf-tab .rf-main td{ border-bottom:0; }
.rf-tab .rf-detail td{ border-top:0; padding-top:0; padding-bottom:12px; font-size:12px; }
.rf-tab .rf-detail code{ font-size:11px; }