/* ═══ theme-glass.css — Liquid Glass 테마 (style.css 뒤에 읽혀 색·모양만 덮어쓴다)
   · 배경: 스페이스 그레이(짙은 회색) 그라데이션 고정 — 2026-09-09 보라→파랑에서 변경
   · 유리 패널: backdrop-filter blur(16px) · rgba(255,255,255,.2) · 1px rgba(255,255,255,.3) · 16px · 그림자 0 8px 32px
   · 글꼴: Inter (index.html 에서 Google Fonts) → 없으면 시스템 산세리프
   · 간격: 8pt 격자 (8·16·24·32)
   · 모바일 우선: 700px 이하에서 한 열, 큰 터치 영역. 표는 가로 스크롤
   테마를 끄려면 index.html 에서 이 파일의 <link> 한 줄만 빼면 원래 어두운 화면으로 돌아간다. */

:root{
  --bg:transparent;
  --card:rgba(255,255,255,.12); --card2:rgba(255,255,255,.08); --line:rgba(255,255,255,.22);
  --text:#ffffff; --dim:rgba(255,255,255,.84);   /* v26: 흐린 글자 대비 한 단계 ↑ (UX 검토 1차) */
  --cyan:#9ee7ff; --amber:#ffd57a; --rose:#ffa3b1; --ok:#9ff2b8; --violet:#d3c4ff;
  --gold:#ffd34d;  /* v101 (명세 2-A): '(딸린 변경 N)' 금색 — 유리 회색 바탕(#2a2b32 ~ 카드 겹침 #45464d) 6.6 ~ 9.9:1 */
  --sky:#a8dcff;   /* v78: 계약 상태 '대기' 글씨 (style.css .badge.sky · .dd-sky · .st-sky) — 유리 회색 바탕에서 읽히는 옅은 하늘색 */
  --glass:rgba(255,255,255,.12); --glass-line:rgba(255,255,255,.22);
  --glass-shadow:0 8px 32px rgba(0,0,0,.10);
  --ink:#15161a;   /* 밝은 버튼 위의 어두운 글자 */
  --map1:#339659; --map2:#4fb072; --map3:#6bca8b; --map4:#86e6a4; --map5:#aaffc3;   /* v53: 지역 지도 칸 — 유리 회색 바탕에 맞춘 5단계 */
  --map-edge:rgba(20,20,26,.5);   /* v68: 실제 지도의 시군구 경계선 */
}
html{background:#1c1c21}
body{
  min-height:100vh;
  /* 스페이스 그레이: 짙은 회색 바탕에 은은한 냉색 빛 두 개 (유리 패널이 살아 보이게) */
  background:
    radial-gradient(1100px 650px at 10% -10%, rgba(120,130,160,.28), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(80,120,200,.22), transparent 60%),
    linear-gradient(135deg,#2a2b32 0%,#232428 45%,#1b1c21 100%);
  background-attachment:fixed;
  font-family:"Inter",-apple-system,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  font-size:15px;line-height:1.55;color:var(--text);
  text-rendering:optimizeLegibility;
}
.wrap{max-width:1200px;padding:24px 16px 64px}
h1{font-weight:700;letter-spacing:-.02em;text-shadow:0 1px 2px rgba(0,0,0,.25)}
h1 span{color:#fff;opacity:.85}

/* ── 유리 패널 ── */
.filters,.tblwrap,.asec,.tile,.modal,.fv,#setup,#login,#signup,.oppbox,.fsec,.err,.warnbox,.none,.ctr,.crlist .cr{
  background:var(--glass);border:1px solid var(--glass-line);border-radius:16px;
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
}
/* 표는 글자가 많아 유리를 조금 어둡게 깔아 대비를 확보한다 */
.tblwrap{background:rgba(10,10,14,.35)}
.asec,.filters{padding:24px}
.tile{padding:16px}
.f{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:12px}
.ctr{border-radius:14px;padding:16px}
.warnbox{border-left:3px solid var(--rose);border-radius:12px}
.err{background:rgba(120,20,40,.35);border-color:rgba(255,163,177,.45);color:#fff}
.none{border-style:dashed}

/* ── 표 ── */
th{background:rgba(255,255,255,.14);color:#fff;border-bottom:1px solid var(--glass-line);font-weight:600;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
td{border-bottom:1px solid rgba(255,255,255,.12)}
tbody tr:hover,.asec tbody tr.click:hover,.txt tbody tr:hover td{background:rgba(255,255,255,.10)}
.hist li,.actlist li{border-bottom:1px solid rgba(255,255,255,.12)}
tr.grp td{background:rgba(255,255,255,.14);color:#fff}
.badge{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.12)}
.badge.cust{color:#0b3a1f;background:#9ff2b8;border-color:#9ff2b8}
.badge.rev{color:#4a2e00;background:#ffd57a;border-color:#ffd57a}
.badge.exp,.badge.no,.badge.p{color:#4a0c18;background:#ffa3b1;border-color:#ffa3b1}
/* v78: '대기'(DB 등록완료)는 다른 배지처럼 바탕을 칠하지 않고 글씨 자체가 하늘색 (사용자 말 '대기의 폰트는 하늘색') — 위 .badge 의 흰 반투명 바탕을 지운다 */
.badge.sky{color:var(--sky);background:transparent;border-color:color-mix(in srgb,var(--sky) 45%,transparent)}
.dd-sky,.st-sky,.warnbox .st-sky{color:var(--sky)}
.pill{background:#ff6b81;color:#fff}
.prod{color:var(--cyan)}
.dd.dim,.f .v.na,.nofile,.owner.none,.hint{color:rgba(255,255,255,.55)}
.tile .s{color:rgba(255,255,255,.6)}
.tile .v{text-shadow:0 1px 2px rgba(0,0,0,.2)}

/* ── 입력 ── */
select,input[type=text],input[type=number],input[type=date],input[type=month],input[type=email],input[type=password],textarea,
#setup input,#login input,#signup input,
#actModal input:not([type=checkbox]),#actModal select,#actModal textarea,
#ctModal input:not([type=checkbox]):not([type=file]),#ctModal select,
#crModal input:not([type=checkbox]):not([type=file]),#crModal select,#crModal textarea,
#txModal input:not([type=checkbox]),#txModal select,#txModal textarea,
#askModal textarea,.asec select,.asec input[type=text]{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:12px;
  padding:10px 12px;min-height:40px}
::placeholder{color:rgba(255,255,255,.55)}
select option{color:#111;background:#fff}
select option:disabled{color:#767680}   /* v101 (명세 2-C): 고를 수 없는 줄은 흐리게 — 위 규칙이 disabled 줄도 보통 줄과 같은 검정으로 칠해 고를 수 있어 보였다 (계약서 작성 '(게시된 판 없음)') */
select:focus,input:focus,textarea:focus{outline:none;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
#askModal input[type=file],#ctModal input[type=file],#crModal input[type=file]{background:rgba(255,255,255,.10);border:1px dashed rgba(255,255,255,.45);color:#fff;border-radius:12px}
.chk input{accent-color:#fff}
.fsec .fgrid input,.fsec .fgrid select,.fsec>input{background:rgba(255,255,255,.14)}
.months label{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.months label:has(input:checked){background:#9ff2b8;color:#0b3a1f;border-color:#9ff2b8}
.cxlist .cxi{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
#txModal input[readonly]{color:var(--amber)}

/* ── 버튼 ── */
button.go{background:linear-gradient(135deg,#ffffff,#dbeafe);color:var(--ink);border-radius:12px;
  padding:10px 24px;font-weight:700;min-height:40px;box-shadow:0 4px 14px rgba(0,0,0,.15)}
button.go:hover{opacity:1;box-shadow:0 6px 18px rgba(0,0,0,.2)}
button.ghost,button.mini,button.pg,.fchip,.addfile,.asec .cnt{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.30);color:#fff;border-radius:12px}
button.mini{padding:6px 12px;min-height:32px}
button.mini.ok{color:#9ff2b8;border-color:rgba(159,242,184,.5)}
button.mini.ok:hover{background:rgba(159,242,184,.18)}
button.mini.no{color:#ffa3b1;border-color:rgba(255,163,177,.5)}
button.mini.no:hover{background:rgba(255,163,177,.18)}
button.ghost:hover,button.mini:hover,button.pg:hover:not(:disabled):not(.on){background:rgba(255,255,255,.24);color:#fff;border-color:#fff}
button.pg.on{background:#fff;color:var(--ink);border-color:#fff}
.fchip:hover,.addfile:hover{border-color:#fff;background:rgba(255,255,255,.22)}
.fchip .fh{background:rgba(30,27,75,.85);color:#fff;border-color:rgba(255,255,255,.4)}
.x{color:rgba(255,255,255,.8)}
.x:hover{color:#fff}

/* ── 탭: 유리 알약 ── */
.tabs{background:rgba(255,255,255,.14);border:1px solid var(--glass-line);border-radius:16px;padding:4px;gap:4px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--glass-shadow);
  overflow-x:auto;scrollbar-width:none;margin-bottom:24px}
.tabs::-webkit-scrollbar{display:none}
button.tab{border:0;border-radius:12px;padding:10px 16px;margin:0;color:rgba(255,255,255,.78);white-space:nowrap;min-height:40px}
button.tab:hover{color:#fff;background:rgba(255,255,255,.12)}
button.tab.on{background:rgba(255,255,255,.30);color:#fff;font-weight:650;box-shadow:0 2px 8px rgba(0,0,0,.12)}
header{border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:16px;margin-bottom:24px}
button.bell{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);min-height:36px;padding:0 12px}
.bellpanel{background:rgba(40,41,48,.85);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border-color:rgba(255,255,255,.26);border-radius:16px;padding:12px 16px}
.bellpanel .row{border-top-color:rgba(255,255,255,.14)}

/* ── 팝업·뷰어 ── */
.mask{background:rgba(10,10,14,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:24px 16px}
.modal{background:rgba(40,41,48,.72);border-color:rgba(255,255,255,.26);
  box-shadow:0 24px 64px rgba(0,0,0,.28)}
.mhead{border-bottom:1px solid rgba(255,255,255,.2);padding:24px}
.mbody{padding:24px}
/* 상세의 큰 카테고리 제목: 크고 터쿼이즈로, 본문과 확실히 구분 */
.sec h4{color:#40e0d0;opacity:1;font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:none;margin:0 0 12px;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.sec h4 .secbtns{letter-spacing:0}
.fv{background:rgba(40,41,48,.72);border-color:rgba(255,255,255,.26)}
.fvhead{border-bottom:1px solid rgba(255,255,255,.2)}
.fvbody{background:rgba(10,10,14,.5)}
.oppbox .st{background:rgba(255,255,255,.2);color:#fff}
.sqlpeek pre{background:rgba(10,10,14,.5);border-color:rgba(255,255,255,.2)}
.sqlpeek code{color:#e8ecff}
.bar .t{background:rgba(255,255,255,.14)}
.bar .f{background:#fff}.bar .f.g{background:#9ff2b8}.bar .f.a{background:#ffd57a}
.sum b{color:#fff}
.who{color:#fff}
.loginfoot{border-top:1px solid rgba(255,255,255,.2)}
.loginfoot a,.owner a,.txt td a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}

/* 조회 표: 시도·시군구 같은 짧은 칸은 줄바꿈 금지 (Inter 가 조금 넓어 '세/종' 처럼 갈라지던 것) */
#tbl td:not(.prod),#upTbl td{white-space:nowrap}
.sum span[style*='color']{color:var(--dim)!important}
.cm{color:rgba(255,255,255,.6)}

/* ── 스크롤 등장 (main.js 가 .reveal 을 붙이고, 보이면 .in) ── */
.reveal{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .45s ease-out,transform .45s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ── 모바일 우선 (700px 이하) ── */
@media (max-width:700px){
  .wrap{padding:16px 12px 48px}
  h1{font-size:18px}
  .filters,.asec{padding:16px;border-radius:16px}
  .frow{flex-direction:column;align-items:stretch;gap:8px}
  .fld{width:100%}
  select,input[type=text],input[type=number],input[type=date],input[type=month]{min-width:0;width:100%;min-height:44px;font-size:16px}
  button.go{width:100%;min-height:44px}
  .chks{gap:8px}
  .chk{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:8px 12px;min-height:40px}
  .tblwrap{overflow-x:auto;border-radius:16px}
  table{min-width:560px}
  .sumrow{flex-direction:column;align-items:stretch}
  .tiles{grid-template-columns:repeat(2,1fr);gap:8px}
  .dgrid{grid-template-columns:1fr;gap:16px}
  .mask{padding:8px}
  .modal{border-radius:16px}
  .mhead,.mbody{padding:16px}
  .fgrid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr;gap:8px}
  .months{grid-template-columns:repeat(6,1fr)}
  .hist .cx{width:90px}
  .hist .d{width:88px}
  .bar .l{width:84px}.bar .n{width:auto}
  button.mini{min-height:36px}
  /* 뷰어는 화면 전체, 상세는 그 뒤 */
  body.viewing #mask .modal{transform:none;width:auto}
  body.viewing .fv{left:8px;right:8px;width:auto;top:8px;height:calc(100vh - 16px)}
  :root{--fvw:calc(100vw - 16px)}
}
/* 유리 효과를 못 그리는 오래된 브라우저 → 조금 더 진한 반투명으로 대신 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .filters,.tblwrap,.asec,.tile,.modal,.fv,#setup,#login,#signup,.tabs{background:rgba(44,45,52,.9)}
}

/* v18 계정 설정 */
.uchip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.uname b{color:#fff}.uname span{color:rgba(255,255,255,.72)}.caret{color:rgba(255,255,255,.7)}
.umenu{background:rgba(40,41,48,.88);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border-color:rgba(255,255,255,.22)}
.umenu .uhead{border-bottom-color:rgba(255,255,255,.14)}
.uitem:hover{background:rgba(255,255,255,.12)}
.badge.non{color:#e8ecf3;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28)}
.dd-g{color:#9ff2b8}.dd-x{color:rgba(255,255,255,.55)}
sup.rn{color:#ffd57a}
/* v50: 담당 현황 그래프 말풍선 — 유리 카드색(.12)은 선이 비쳐 읽기 어려워 거의 불투명하게 */
.owtip{background:rgba(44,45,52,.94)}
/* v50: 끌고 있는 행 — 유리 카드색은 비쳐서 아래 행과 겹쳐 보이므로 거의 불투명하게 */
tbody.ds-on>tr.ds-drag>td{background:rgba(52,54,62,.96)}
/* v53: 대시보드 지역 지도 — 유리 테마는 칸 글자를 전부 어두운 색으로(1단계 포함), 말풍선은 거의 불투명 (.owtip 과 같은 이유) */
.rt.l1{color:var(--ink)}
.rt .rtt{background:rgba(44,45,52,.94);border-color:rgba(255,255,255,.26);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.rrow:hover{background:rgba(255,255,255,.10)}
/* v63 ui_search */
/* 계약조회 표도 단지 조회 표(#tbl)처럼 짧은 칸은 줄바꿈 금지 */
#csTbl td:not(.prod){white-space:nowrap}
/* v65 ui_list: 끝난 서비스 태그(회색) · 변경이력 머리 줄 — 유리 바탕에서 읽히는 흐린 흰색 (style.css 의 --faint 는 어두운 바탕용) */
.pgone{color:rgba(255,255,255,.5)}
.hist li.hh span,.hist li.hh .cx{color:rgba(255,255,255,.55)}

/* v63 ui_detail — 단지 상세 칸 안 입력(우리 정보 · 전자투표 캐시 · 연락처 · 설치 이벤트)을 유리 입력칸 모양으로 (색은 변수 그대로 — 밝은 모드가 덮는다) */
.cxed input[type],.cxed select,.cxform input[type],.cxform select{border-radius:12px;min-height:40px}
.cxct,.cxform{border-radius:12px}

/* v67 W1 두 줄 메뉴 — 윗줄 묶음 (아랫줄은 위 .tabs 유리 알약 그대로) */
button.navg{color:rgba(255,255,255,.78)}
button.navg:hover{color:#fff;background:rgba(255,255,255,.12)}
button.navg.on{color:#fff;background:rgba(255,255,255,.22);border-color:var(--glass-line);box-shadow:0 2px 8px rgba(0,0,0,.12)}
/* v67 W2: 열화상 단가표 편집기의 저장 띠(.thg-bar)는 화면 아래 붙는다 — glass 의 --card 가 반투명이라 뒤 글이 비치므로 불투명 + 흐림 (.rt .rtt 와 같은 방식).
   밝은 화면(--card 불투명)은 style.css 그대로 */
:root:not([data-theme="light"]) .thg-bar{background:rgba(40,41,48,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* ═══ v67 W3 updates · gsw ═══ 머리 Updates 버튼·목록 · 기능 공개 적용 막대 (알림 종·프로필 메뉴와 같은 짙은 유리) */
button.updbtn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);min-height:36px}
.updpanel{background:rgba(40,41,48,.85);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border-color:rgba(255,255,255,.22)}
.updrow,.updpanel .updfoot{border-top-color:rgba(255,255,255,.14)}
.updpanel .none{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.ftapbar{background:rgba(40,41,48,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
/* ═══ /v67 W3 ═══ */
/* ═══ v68 대시보드 ═══ 만료 임박 머리줄(스크롤해도 위에 붙음) · 지도 말풍선 — 유리 카드색(.12)은 아래 글이 비쳐서 거의 불투명하게 (.owtip · .rt .rtt 와 같은 이유) */
#dExpiring thead th{background:rgba(44,45,52,.97)}
.rmtip{background:rgba(44,45,52,.94);border-color:rgba(255,255,255,.26);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.rrow.on{background:rgba(255,255,255,.14)}
/* ═══ /v68 ═══ */
/* ═══ v79 ═══ ⓘ 설명 상자 — 유리 카드색(.12)은 아래 글이 비쳐서 거의 불투명하게 (.rmtip 과 같은 방식) · 결과 줄 초점 */
.itip-pop{background:rgba(44,45,52,.96);border-color:rgba(255,255,255,.26);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 32px rgba(0,0,0,.35)}
tbody tr.rowl:focus-within{background:rgba(255,255,255,.08)}
/* ═══ /v79 ═══ */
/* ═══ v80 ═══ 보고서 단지 묶음 색 (style.css --rp-hov) — 유리 회색 바탕에서 보이는 흰 반투명 */
:root{--rp-hov:rgba(255,255,255,.12)}
/* ═══ /v80 ═══ */
/* ═══ v82 ═══ 오이패스 현황 (style.css --oip-*) — 굴려도 붙는 머리줄·단지명 칸 · 칸 고치기 상자: 유리 카드색(.12)은 아래 글이 비쳐서 거의 불투명하게 (#dExpiring 머리줄과 같은 이유) */
:root{--oip-head-bg:rgba(58,59,67,.98);--oip-head-ink:#fff;--oip-cell-bg:rgba(38,39,45,.98);--oip-pop-bg:rgba(44,45,52,.97)}
/* ═══ /v82 ═══ */
/* v91: 승인 대기함 처리 결과 글(#aprFlash — 화면 아래에 떠 있음)은 유리 카드 색(반투명)이면 뒤 표 글자와 겹쳐 읽기 어려움 → 창(.modal)과 같은 짙은 유리 */
#aprFlash .okflash{background:rgba(40,41,48,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
/* v93 검토 고침: 빨간 글(.bad — style.css 의 color-mix(--rose, --card))이 위 규칙보다 우선순위가 높아 유리 테마에서 반투명 카드 색으로 돌아갔다 → 짙은 장밋빛 유리 */
#aprFlash .okflash.bad{background:rgba(60,30,36,.92)}