/* ================================================================
   nspace-style.css — N-SPACE 설계도구 공통 스타일
   대상: WindQ / NestQ / PerfQ (apps/*)
   범위: 색상변수·폰트·앱 상단바(app-nav)·버튼·폼·모달(로그인/회원가입)·
        토스트·스크롤바·공통 유틸리티
   앱 전용 레이아웃(사이드바 폭, 대시보드, 캔버스 등)은 각 파일 자체 <style>에 유지.
   2026-07 기준. 수정 시 3개 앱 전체 동작 확인 필요.
   ================================================================ */

/* ── 색상 변수 ── */
:root{
  --navy:#1C2B5C; --bronze:#9A7750; --titan:#77828D;
  --off:#F7F6F3; --line:#E4E4E0; --line2:#EFEFEB;
  --text:#1A1A1A; --muted:#888; --white:#fff;
  --border2:#C8C8C4;
  --green:#2eaf7d; --red:#C8302A; --warn:#fbbf24;
  --ok-bg:#D1FAE5; --ok-ink:#065F46; --ok-line:#A7F3D0;
  --warn-bg:#FEE2E2; --warn-ink:#991B1B; --warn-line:#FCA5A5;
  --font:'Pretendard',sans-serif; --mono:'DM Sans',sans-serif;
}

/* ── 리셋 / 베이스 ── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--off);
  color:var(--text);
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
.num{font-variant-numeric:tabular-nums;letter-spacing:-0.01em}

/* ── 공통 유틸리티 (Tailwind 대체) ── */
.hidden{display:none!important}
.justify-center{justify-content:center}

/* ================================================================
   상단 앱 네비게이션 (app-nav)
   구조: <뒤로가기> <구분선> <앱이름> <버전> ... <로그인/유저영역>
   <nav id="app-nav"> 또는 <header id="app-nav"> 어느 태그든 동일 적용
   ================================================================ */
#app-nav{
  height:54px;background:var(--navy);
  display:flex;align-items:center;padding:0 24px;flex-shrink:0;gap:0;
}
.nav-back{
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);text-decoration:none;
  padding:6px 12px;border:.5px solid rgba(255,255,255,.2);border-radius:2px;
  transition:background .2s;
}
.nav-back:hover{background:rgba(255,255,255,.1);color:white}
.nav-div{width:.5px;height:16px;background:rgba(255,255,255,.2);margin:0 14px}
.nav-name{font-family:var(--mono);font-size:13px;letter-spacing:.14em;font-weight:500;color:white;text-transform:uppercase}
.nav-sub{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.4);text-transform:uppercase;margin-left:10px}
.nav-ver{font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:rgba(255,255,255,.35);border:.5px solid rgba(255,255,255,.2);padding:2px 8px;border-radius:2px;margin-left:auto}

/* 로그인 전: 로그인 버튼 */
.nav-login-btn{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55);background:none;border:.5px solid rgba(255,255,255,.2);
  padding:4px 10px;border-radius:2px;cursor:pointer;transition:background .2s,color .2s;
  margin-left:12px;
}
.nav-login-btn:hover{background:rgba(255,255,255,.1);color:white}

/* 로그인 후: 유저명 + 로그아웃 */
#nav-user-wrap{display:none;align-items:center;gap:10px;margin-left:12px}
#nav-user-name{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.55);letter-spacing:.06em}
.nav-logout-btn{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.4);background:none;border:.5px solid rgba(255,255,255,.2);
  padding:4px 10px;border-radius:2px;cursor:pointer;transition:background .2s,color .2s;
}
.nav-logout-btn:hover{background:rgba(255,255,255,.1);color:white}

@media (max-width:768px){
  .nav-sub,.nav-ver{display:none}
}

/* ================================================================
   공통 입력폼 (좌측 옵션 패널 등에서 사용)
   ================================================================ */
.lp-sec{padding:16px 18px;border-bottom:.5px solid var(--line)}
.lp-title{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);font-weight:500;margin-bottom:12px;padding-bottom:8px;border-bottom:.5px solid var(--line2)}

.mode-tabs{display:flex;border:.5px solid var(--line);border-radius:2px;overflow:hidden;margin-bottom:14px}
.mode-tab{flex:1;padding:9px;text-align:center;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--muted);cursor:pointer;border:none;background:var(--off);transition:background .15s,color .15s}
.mode-tab.active,.mode-tab.on{background:var(--navy);color:white}

.fg{margin-bottom:9px;display:flex;align-items:center;gap:8px}
.fg label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--titan);white-space:nowrap;width:60px;flex-shrink:0}
.fg select,.fg input[type=number],.fg input[type=text]{
  flex:1;padding:7px 9px;border:.5px solid var(--line);border-radius:2px;
  font-size:13px;font-family:var(--font);color:var(--text);outline:none;
  transition:border-color .2s;background:white;min-width:0;
}
.fg select:focus,.fg input:focus{border-color:var(--navy)}
.fg-note{font-size:13px;color:#bbb;letter-spacing:.03em;line-height:1.6;margin:6px 0 8px}
.fg-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fg-pair .fg{margin-bottom:0;flex-direction:column;align-items:flex-start;gap:4px}
.fg-pair .fg label{width:auto}
.fg-pair .fg input{width:100%}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:linear-gradient(to right,var(--navy) 0%,var(--navy) var(--p,20%),var(--line) var(--p,20%),var(--line) 100%);outline:none;border-radius:1px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:white;border:1.5px solid var(--navy);cursor:pointer;transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:white;border:1.5px solid var(--navy);cursor:pointer}

/* ================================================================
   버튼 공통
   ================================================================ */
.btn-primary{
  width:100%;padding:11px;background:var(--navy);color:white;border:none;border-radius:2px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:opacity .2s;
}
.btn-primary:hover{opacity:.85}
.btn-secondary{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px;
  border:.5px solid var(--line);border-radius:2px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);background:var(--off);transition:border-color .2s,background .2s;
}
.btn-secondary:hover{border-color:var(--navy);background:#EEF0F8}
.btn-secondary svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}

/* ================================================================
   태그 (배지)
   ================================================================ */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;padding:3px 9px;border-radius:1px;font-weight:500}
.tag-ok{background:var(--ok-bg);color:var(--ok-ink);border:.5px solid var(--ok-line)}
.tag-warn{background:var(--warn-bg);color:var(--warn-ink);border:.5px solid var(--warn-line)}

/* ================================================================
   로그인/회원가입 모달 (사이트 auth-modal.php와 동일 클래스명 사용)
   ================================================================ */
#auth-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.45);align-items:center;justify-content:center}
#auth-overlay.open{display:flex}
#modal{background:white;width:100%;max-width:360px;border-radius:2px;border:.5px solid var(--line);margin:16px}
.modal-head{padding:18px 22px 0;display:flex;justify-content:space-between;align-items:center}
.modal-head h2{font-family:var(--mono);font-size:13px;color:var(--navy);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
#modal-close{font-size:16px;color:#bbb;background:none;border:none;cursor:pointer}
.modal-tabs{display:flex;margin:16px 22px 0;border-bottom:.5px solid var(--line)}
.mtab{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#bbb;padding:10px 0;margin-right:20px;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;font-family:var(--mono)}
.mtab.active{color:var(--navy);border-bottom-color:var(--navy)}
.modal-body{padding:20px 22px 22px}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn-submit{width:100%;padding:11px;background:var(--navy);color:white;border:none;border-radius:2px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-top:6px;transition:opacity .2s;cursor:pointer}
.btn-submit:hover{opacity:.85}
#modal-msg{font-size:10px;text-align:center;margin-top:8px;min-height:14px;color:var(--titan)}
#modal-msg.err{color:var(--red)}
#modal-msg.ok{color:var(--green)}

/* ================================================================
   토스트
   ================================================================ */
#toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--navy);color:white;padding:8px 20px;border-radius:2px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  opacity:0;transition:opacity .3s;pointer-events:none;z-index:600;white-space:nowrap;
}
#toast.show{opacity:1}

/* ================================================================
   스크롤바
   ================================================================ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--off)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:1px}