/* ══════════════════════════════════════════════════════════════════ DInSAR — 관측 문서 조판 시스템 (Observation Document) ────────────────────────────────────────────────────────────────── 1 종이(흰색) 위의 잉크. 면은 색이 아니라 «괘선»으로 나눈다. 2 강조색은 신호 주황 하나. 하나뿐이라 눈에 띈다. 3 기계가 만든 값(날짜·좌표·σ·ID)은 모두 모노스페이스로 쓴다. 4 모서리는 거의 각지게. 그림자는 쓰지 않는다. ────────────────────────────────────────────────────────────────── 이 파일 하나를 로그인·가입·소개·플랫폼이 함께 쓴다. 글꼴은 static/vendor/fonts 에 넣어 두었다 — 폐쇄망에서도 뜬다. ══════════════════════════════════════════════════════════════════ */ @font-face{font-family:"Pretendard Variable";font-weight:45 920;font-style:normal; font-display:swap;src:url("/static/vendor/fonts/PretendardVariable.woff2") format("woff2-variations");} @font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap; src:url("/static/vendor/fonts/JetBrainsMono-400.woff2") format("woff2");} @font-face{font-family:"JetBrains Mono";font-weight:500;font-style:normal;font-display:swap; src:url("/static/vendor/fonts/JetBrainsMono-500.woff2") format("woff2");} @font-face{font-family:"JetBrains Mono";font-weight:600;font-style:normal;font-display:swap; src:url("/static/vendor/fonts/JetBrainsMono-600.woff2") format("woff2");} @font-face{font-family:"JetBrains Mono";font-weight:700;font-style:normal;font-display:swap; src:url("/static/vendor/fonts/JetBrainsMono-700.woff2") format("woff2");} :root{ /* 기본 색조 — 찬 종이 위의 잉크. 강조는 남색 하나. 따뜻한 색조가 필요하면 로 되돌린다. */ --bg:#E4EAF0; --sheet:#FFFFFF; --sheet-2:#F3F7FB; --hover:#EEF4FA; --ink:#151A21; --ink-2:#3E4650; --ink-3:#67707C; --ink-4:#949CA8; --rule:#D3DAE3; --rule-2:#B4BDC9; --rule-3:#8F98A6; --sig:#12457E; --sig-d:#0B2F58; --sig-t:#DCE7F4; --ok:#2F6B4F; --warn:#8A6410; --bad:#9E2B2B; --d-blue:#3D8FC4; --d-orange:#C2660C; --d-plum:#7E5C9E; --d-red:#9E2B2B; --navy:#151A21; --blue:#12457E; --blue-l:#DCE7F4; --blue-pl:#EEF4FA; --green:#2F6B4F; --green-l:#EEF4F1; --orange:#8A6410; --orange-l:#F7F2E8; --gray:#F3F7FB; --border:#D3DAE3; --text:#151A21; --sub:#67707C; /* 마크업이 이미 부르고 있던 별칭. 정의가 없으면 var() 가 «무효값»이 되어 background 는 transparent 로, color 는 상속으로 떨어진다 — 흰 카드 위에 흰 글씨라 버튼이 통째로 사라진다. 조용히 틀리는 부류라서 별칭으로 막는다. 새 색을 만들지 않는다: .dl-sar 의 띠가 이미 --d-plum 이고 버튼은 그것과 짝이어야 한다. 경고 글씨의 --red 도 --bad 와 같은 색이어야 한다. */ --purple:var(--d-plum); --red:var(--bad); --fs:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont, "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif; --fm:"JetBrains Mono","SF Mono",ui-monospace,Menlo,"DejaVu Sans Mono",Consolas,monospace; --maxw:1180px; } /* ── 색조 변형 ───────────────────────────────────────────────────── 기본은 찬 종이 + 남색이다. 이면 미색 종이 + 주황 강조로 되돌아간다. 구조·괘선·조판은 그대로고 «종이 색»과 «강조색»만 바뀐다. 강조색을 파스텔로 두지 않은 이유가 있다. 이 색은 «지금 여기»를 가리키는 신호이고, 채도가 낮으면 신호 구실을 못 한다. 파스텔은 종이 쪽(--bg)에 두고, 강조는 진한 색으로 받는다. 자료 색(--d-blue 등)과도 명도를 벌려 두었다 — 안 그러면 «2개 페어에서 검출»이라는 뜻이 UI 색에 묻힌다. */ :root[data-tone="warm"]{ --bg:#EAE5DB; --sheet:#FFFFFF; --sheet-2:#F7F4ED; --hover:#FAF3EC; --ink:#1B1A17; --ink-2:#45423B; --ink-3:#6E6A61; --ink-4:#9B968C; --rule:#D8D3C8; --rule-2:#BDB7AA; --rule-3:#9E988B; --sig:#C2410C; --sig-d:#8F2F07; --sig-t:#F7E8DD; --ok:#3F6B2B; --warn:#94620F; --bad:#A32D1B; --d-blue:#1A6796; --d-orange:#B45309; --d-plum:#7E5C9E; --d-red:#A32D1B; --navy:#1B1A17; --blue:#C2410C; --blue-l:#F7E8DD; --blue-pl:#FAF3EC; --green:#3F6B2B; --green-l:#F1F5EE; --orange:#94620F; --orange-l:#FBF6EC; --gray:#F7F4ED; --border:#D8D3C8; --text:#1B1A17; --sub:#6E6A61; --purple:var(--d-plum); --red:var(--bad); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fs); font-size:15px;line-height:1.75;letter-spacing:-.003em;-webkit-font-smoothing:antialiased} h1,h2,h3,h4,h5,p,figure,dl,dd,ol,ul{margin:0} h1,h2,h3,h4,p,li,dd,dt,td,th,label,figcaption{word-break:keep-all;overflow-wrap:anywhere} a{color:inherit} b,strong{font-weight:700} ::selection{background:var(--sig-t)} :focus-visible{outline:2px solid var(--sig);outline-offset:2px} @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} /* ── 모노스페이스 ─────────────────────────────────────────────── */ .m,.mono{font-family:var(--fm);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .idx{font-family:var(--fm);font-size:11.5px;letter-spacing:.14em;color:var(--sig);text-transform:uppercase} .kicker{font-family:var(--fm);font-size:11px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase} /* ── 지면 ─────────────────────────────────────────────────────── */ .sheet{background:var(--sheet);border:1px solid var(--rule)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} hr.rule{border:0;border-top:1px solid var(--rule);margin:0} hr.rule--ink{border-top:1px solid var(--ink)} .lead{font-size:16px;line-height:1.85;color:var(--ink-2)} .small{font-size:13px;color:var(--ink-3);line-height:1.7} .cap{font-family:var(--fm);font-size:11.5px;color:var(--ink-3);letter-spacing:-.01em} /* ── 버튼 / 링크 ──────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px; border:1px solid var(--ink);border-radius:2px;background:var(--ink);color:var(--sheet); font:600 14px/1 var(--fs);cursor:pointer;text-decoration:none;white-space:nowrap; transition:background .13s,color .13s,border-color .13s} .btn:hover{background:#000;border-color:#000} .btn--line,.btn-gray{background:transparent;color:var(--ink);border-color:var(--rule-2)} .btn--line:hover,.btn-gray:hover{background:transparent;border-color:var(--ink);color:var(--ink)} .btn--sig,.btn-primary,.btn-success{background:var(--sig);border-color:var(--sig);color:#fff} .btn--sig:hover,.btn-primary:hover,.btn-success:hover{background:var(--sig-d);border-color:var(--sig-d)} .btn-danger{background:var(--bad);border-color:var(--bad);color:#fff} .btn-danger:hover{background:#83220f;border-color:#83220f} .btn--sm,.btn-sm{height:31px;padding:0 11px;font-size:12.5px} .btn--lg{height:46px;padding:0 22px;font-size:15px} .btn--block{width:100%;justify-content:center} .btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed} .btn-row{display:flex;gap:9px;justify-content:flex-end;margin-top:20px} .lnk{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none; color:var(--ink);border-bottom:1px solid var(--rule-2);padding-bottom:1px} .lnk:hover{border-bottom-color:var(--sig);color:var(--sig)} .btn-icon{background:transparent;border:1px solid var(--rule-2);border-radius:2px;padding:3px 7px; font-size:13px;cursor:pointer;line-height:1.4;color:var(--ink-2);transition:.13s} .btn-icon:hover{border-color:var(--ink);color:var(--ink)} .btn-icon.danger:hover{border-color:var(--bad);color:var(--bad)} .btn-icon:disabled{opacity:.4;cursor:not-allowed} /* ── 표 ───────────────────────────────────────────────────────── */ table.tbl,.pair-table,.qc-table{width:100%;border-collapse:collapse;font-size:13.5px} .tbl th,.tbl td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top} .tbl thead th{background:var(--sheet-2);border-bottom:1px solid var(--ink); font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.09em;color:var(--ink-3); text-transform:uppercase;white-space:nowrap} .tbl tbody tr:last-child td{border-bottom:0} .tbl tbody tr:hover{background:var(--hover)} .tbl .n{text-align:right;font-family:var(--fm);font-variant-numeric:tabular-nums;white-space:nowrap} .tbl .k{font-family:var(--fm);font-size:12.5px;white-space:nowrap} .tblwrap{border:1px solid var(--rule);background:var(--sheet);overflow:auto} dl.rows{font-size:13.5px} dl.rows > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px; padding:10px 0;border-bottom:1px solid var(--rule)} dl.rows > div:last-child{border-bottom:0} dl.rows dt{color:var(--ink-3)} dl.rows dd{margin:0} /* ── 표식 ─────────────────────────────────────────────────────── */ .tag{display:inline-flex;align-items:center;height:19px;padding:0 6px;border:1px solid var(--rule-2); border-radius:2px;background:transparent;font-family:var(--fm);font-size:11px;letter-spacing:.02em; color:var(--ink-3);white-space:nowrap} .tag--ok{border-color:#B9CBAE;color:var(--ok)} .tag--warn{border-color:#DBC6A0;color:var(--warn)} .tag--bad{border-color:#DCB6AF;color:var(--bad)} .tag--sig{border-color:var(--sig);color:var(--sig)} /* ── 주석 ─────────────────────────────────────────────────────── */ .note{border-left:2px solid var(--rule-2);padding:2px 0 2px 15px;font-size:13px;line-height:1.8;color:var(--ink-2)} .note b{color:var(--ink)} .note--sig{border-left-color:var(--sig)} .note--warn{border-left-color:var(--warn)} .note--bad{border-left-color:var(--bad)} .note--ok{border-left-color:var(--ok)} .note__h{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);margin-bottom:4px} /* ── 폼 ───────────────────────────────────────────────────────── */ .lbl{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:6px} .inp,select.inp,textarea.inp, input[type=text],input[type=number],input[type=password],input[type=email],input[type=date], input[type=search],select,textarea{ width:100%;height:40px;padding:0 11px;background:var(--sheet); border:1px solid var(--rule-2);border-radius:2px;color:var(--ink); font:400 14px/1.6 var(--fs);transition:border-color .13s,box-shadow .13s} textarea.inp,textarea{height:auto;padding:9px 11px;resize:vertical} select.inp,select{appearance:none;padding-right:30px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%237C776C' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 11px center} select[multiple]{height:auto;background-image:none;padding:6px 8px} .inp::placeholder,input::placeholder{color:var(--ink-4)} .inp:hover,input:hover,select:hover{border-color:var(--rule-3)} .inp:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink); box-shadow:inset 0 -2px 0 var(--sig)} .inp[aria-invalid=true]{border-color:var(--bad);box-shadow:inset 0 -2px 0 var(--bad)} .hint{font-size:12px;color:var(--ink-3);margin-top:5px;line-height:1.65} .err{display:none;font-family:var(--fm);font-size:11.5px;color:var(--bad);margin-top:5px} .err.on{display:block} .chk{display:inline-flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink-2); cursor:pointer;line-height:1.6} .chk input{width:15px;height:15px;margin:3px 0 0;accent-color:var(--sig);flex:none;cursor:pointer} input[type=checkbox],input[type=radio]{accent-color:var(--sig)} .form-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px; padding:11px 0;border-bottom:1px solid var(--rule);align-items:start} .form-row:last-child{border-bottom:0} .form-row > label{font-size:12.5px;color:var(--ink-3);font-weight:400;padding-top:11px} .hidden{display:none!important} /* ══ 공개 화면 셸 (로그인·가입·소개) ══════════════════════════ */ .top{height:3px;background:var(--ink)} .mast{background:var(--sheet);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40} .mast__in{max-width:var(--maxw);margin:0 auto;padding:0 28px;height:64px;display:flex;align-items:center;gap:30px} .mark{display:flex;align-items:center;gap:10px;text-decoration:none} .mark img{border-radius:5px;display:block;flex:none} .mark .w{font-family:var(--fm);font-weight:600;font-size:16px;letter-spacing:.02em} .mark .w em{font-style:normal;color:var(--sig)} .mark .k{font-size:13px;color:var(--ink-3)} .mast nav{display:flex;gap:20px;margin-left:14px} .mast nav a{font-size:13.5px;color:var(--ink-2);text-decoration:none;padding:2px 0;border-bottom:1px solid transparent} .mast nav a:hover{border-bottom-color:var(--sig);color:var(--ink)} .mast .sp{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:13px;color:var(--ink-3)} .colophon{border-top:1px solid var(--ink);background:var(--sheet);margin-top:64px} .colophon__in{max-width:var(--maxw);margin:0 auto;padding:30px 28px 40px;display:grid; grid-template-columns:2fr 1fr 1fr;gap:26px;font-size:12.5px;color:var(--ink-3);line-height:1.9} .colophon b{display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-2);margin-bottom:8px;font-weight:500} .colophon a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule)} .colophon a:hover{color:var(--sig);border-bottom-color:var(--sig)} .colophon__end{border-top:1px solid var(--rule);font-family:var(--fm);font-size:11px;color:var(--ink-4)} .colophon__end div{max-width:var(--maxw);margin:0 auto;padding:12px 28px} /* ══ 응용 프로그램 셸 ═════════════════════════════════════════ */ /* 상단 머리글 — 검은 판이 아니라 «흰 지면 + 위쪽 잉크선». 공개 화면(로그인·소개)이 이미 이 형태라 둘을 맞췄고, 무엇보다 까만 판 위의 흐린 글자가 잘 안 보인다는 지적이 있었다. 문서의 «윗단»이라는 신호는 3px 잉크선 하나로 충분하다. */ .bar,.header{position:sticky;top:0;z-index:60;min-height:52px;background:var(--sheet); color:var(--ink);display:flex;align-items:center;gap:13px;padding:0 17px; border-top:3px solid var(--ink);border-bottom:1px solid var(--rule-2); border-radius:0;box-shadow:none} .header h1{font-family:var(--fm);font-weight:600;font-size:15px;letter-spacing:.02em; white-space:nowrap;color:var(--ink)} .header .sub{font-size:11.5px;color:var(--ink-3);margin-top:1px} .bar .w{font-family:var(--fm);font-weight:600;font-size:15px;letter-spacing:.02em;white-space:nowrap} .bar .w em,.header h1 em{font-style:normal;color:var(--sig)} .bar .sep{width:1px;height:18px;background:var(--rule-2)} .bar .sp,.header > div:last-child{margin-left:auto;display:flex;align-items:center;gap:10px; font-family:var(--fm);font-size:11.5px;color:var(--ink-3)} .net-badge{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px; border:1px solid var(--rule-2);border-radius:2px;background:transparent; font-family:var(--fm);font-size:11px;color:var(--ink-3);white-space:nowrap} .bar .job i{width:5px;height:5px;background:var(--ok);display:block} .main{display:grid;grid-template-columns:230px minmax(0,1fr);align-items:start;min-height:calc(100vh - 55px)} /* ── 목차 레일 ────────────────────────────────────────────────── */ .sidebar{position:sticky;top:55px;max-height:calc(100vh - 55px);overflow:auto; border-right:1px solid var(--rule-2);background:var(--sheet);padding:16px 0 22px} .step-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start; width:100%;padding:11px 17px;border-left:2px solid transparent;border-bottom:1px solid var(--rule); background:transparent;cursor:pointer;font-size:13.5px;color:var(--ink-2);text-align:left; transition:background .13s} .step-item:hover{background:var(--hover)} .step-item.active{border-left-color:var(--sig);color:var(--ink);font-weight:700} .step-item.done{color:var(--ink-2)} .step-num{font-family:var(--fm);font-size:11px;color:var(--ink-4);background:none;width:auto;height:auto; border-radius:0;display:block;padding-top:3px;font-weight:400} .step-item.active .step-num{color:var(--sig)} .step-item.done .step-num{color:var(--ok);background:none} .step-sep{height:0;border-top:1px solid var(--ink);margin:14px 0 0} /* ── 본문 ─────────────────────────────────────────────────────── */ .content{padding:24px 26px 70px;min-width:0} /* 화면 전환은 .hidden 으로만 한다 — .step-panel 자체에 display 를 걸면 첫 화면까지 사라진다(실제로 그랬다). */ /* 카드 = 지면 블록 */ .card{background:var(--sheet);border:1px solid var(--rule);border-radius:2px; box-shadow:0 1px 2px rgba(27,26,23,.06); padding:0;margin-bottom:18px} .card > h2{display:flex;align-items:baseline;gap:11px;margin:0;padding:12px 18px; background:var(--sheet-2);border-bottom:1px solid var(--rule);font-family:var(--fm);font-size:11.5px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--ink)} .card > .desc{padding:15px 18px 0;margin:0;font-size:13.5px;color:var(--ink-2); max-width:78ch;line-height:1.75} .card > *:not(h2):not(.desc){margin-left:18px;margin-right:18px} .card > *:not(h2):not(.desc):first-of-type{margin-top:16px} .card > *:last-child{margin-bottom:18px} /* 지도·툴바처럼 «가장자리까지 꽉 차야» 하는 것은 여백을 지운다 */ .card > .viz-toolbar,.card > .viz-body{margin:0!important} .card > hr.divider{border:0;border-top:1px solid var(--rule);margin:18px 0} .card h3{font-size:14px;letter-spacing:-.02em;font-weight:700;margin-top:4px} .card h4{font-size:13.5px;letter-spacing:-.02em;font-weight:700} /* ── 위성 선택 ────────────────────────────────────────────────── */ .sat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0; border:1px solid var(--rule);margin-bottom:0} .sat-btn{position:relative;padding:14px 15px;border:0;border-right:1px solid var(--rule); border-radius:0;text-align:left;background:var(--sheet);cursor:pointer;transition:background .13s} .sat-btn:last-child{border-right:0} .sat-btn:hover{background:var(--hover);border-color:var(--rule)} .sat-btn.sel{background:var(--sheet);box-shadow:inset 0 -2px 0 var(--sig);border-color:var(--rule)} .sat-btn.disabled{opacity:.45;cursor:not-allowed} .sat-icon{font-size:15px;margin-bottom:2px;filter:grayscale(1)} .sat-btn.sel .sat-icon{filter:none} .sat-name{font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .sat-band{font-family:var(--fm);font-size:11px;color:var(--ink-3);margin-top:3px} .sat-info{border-left:2px solid var(--sig);background:transparent;border-radius:0; padding:2px 0 2px 15px;margin-top:15px;font-size:13px;line-height:1.8;color:var(--ink-2)} /* ── 서브스와스 / 버스트 ──────────────────────────────────────── */ .sw-row{display:flex;gap:0;align-items:center;flex-wrap:wrap;border:1px solid var(--rule-2); width:max-content;border-radius:2px;overflow:hidden} .sw-chip{border:0;border-right:1px solid var(--rule-2);border-radius:0;padding:0 15px;height:31px; display:inline-flex;align-items:center;font-family:var(--fm);font-size:12.5px;font-weight:500; cursor:pointer;background:var(--sheet);user-select:none;color:var(--ink-3)} .sw-chip:last-child{border-right:0} .sw-chip.sel{background:var(--ink);color:var(--sheet)} .burst-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:9px} .burst-label{font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-4);margin-bottom:4px} /* ── 업로드 ───────────────────────────────────────────────────── */ .upload-zone{border:1px dashed var(--rule-2);border-radius:2px;padding:26px;text-align:center; cursor:pointer;position:relative;overflow:hidden;transition:border-color .13s,background .13s} .upload-zone:hover,.upload-zone.drag{border-color:var(--sig);background:var(--hover)} .upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%} .upload-zone .uz-icon{font-size:20px;margin-bottom:6px;filter:grayscale(1)} .upload-zone .uz-label{font-size:13.5px;font-weight:700;color:var(--ink)} .upload-zone .uz-sub{font-size:12px;color:var(--ink-3);margin-top:3px} .upload-ok{border-style:solid;border-color:var(--ok)} .upload-ok .uz-icon{filter:none} .progress-bar-wrap{background:var(--rule);border-radius:0;height:3px;margin-top:9px} .progress-bar{background:var(--sig);height:3px;border-radius:0;width:0;transition:width .3s} .dem-badge{display:inline-flex;align-items:center;gap:6px;background:transparent; border:1px solid #DBC6A0;border-radius:2px;padding:0 7px;height:21px; font-family:var(--fm);font-size:11px;color:var(--warn);margin-top:6px} .cb-group{display:flex;gap:16px;flex-wrap:wrap;padding-top:9px} .cb-item{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);cursor:pointer} .cb-item input{width:14px;height:14px;cursor:pointer} /* ── 처리 로그 ────────────────────────────────────────────────── */ .log-box{background:#16150F;color:#CFC9B8;border:1px solid var(--ink);border-radius:2px; padding:12px 14px;font-family:var(--fm);font-size:11.5px;line-height:1.85;height:340px; overflow-y:auto;white-space:pre-wrap;word-break:break-all} .log-box .log-info{color:#8FB4CF} .log-box .log-ok{color:#8FC178} .log-box .log-warn{color:#DFA24E} .log-box .log-err{color:#D98B7C} .step-progress{display:flex;flex-direction:column;gap:0;margin-bottom:16px; border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)} .sp-row{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:7px 0; border-bottom:1px solid var(--rule)} .sp-row:last-child{border-bottom:0} .sp-dot{width:7px;height:7px;border-radius:0;flex-shrink:0} .dot-done{background:var(--ok)} .dot-run{background:var(--sig);animation:pulse 1.2s infinite} .dot-wait{background:var(--rule-2)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} .status-badge{display:inline-flex;align-items:center;gap:6px;height:19px;padding:0 7px; border:1px solid var(--rule-2);border-radius:2px;background:transparent; font-family:var(--fm);font-size:11px;font-weight:400;letter-spacing:.02em} .status-running{border-color:var(--sig);color:var(--sig)} .status-done{border-color:#B9CBAE;color:var(--ok)} .status-error{border-color:#DCB6AF;color:var(--bad)} .status-pending{border-color:var(--rule-2);color:var(--ink-3)} /* ── 단계 카드 ────────────────────────────────────────────────── */ .step-card{border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:13px 0; margin-bottom:0;background:transparent} .step-card:first-child{border-top:1px solid var(--ink)} .step-card.running{background:transparent;box-shadow:inset 2px 0 0 var(--sig);padding-left:13px} .step-card.done{box-shadow:inset 2px 0 0 var(--ok);padding-left:13px} .step-card.error{box-shadow:inset 2px 0 0 var(--bad);padding-left:13px} .step-card.cancelled{box-shadow:inset 2px 0 0 var(--warn);padding-left:13px} .sc-header{display:flex;align-items:center;gap:11px} .sc-num{width:auto;height:auto;min-width:22px;border-radius:0;background:none;color:var(--ink-4); font-family:var(--fm);font-size:11.5px;font-weight:400;display:block;flex-shrink:0} .step-card.done .sc-num{background:none;color:var(--ok)} .step-card.running .sc-num{background:none;color:var(--sig)} .step-card.error .sc-num{background:none;color:var(--bad)} .step-card.cancelled .sc-num{background:none;color:var(--warn)} .sc-info{flex:1;min-width:0} .sc-name{font-size:13.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .sc-desc{font-size:12px;color:var(--ink-3);margin-top:2px} .sc-badge{display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:2px; border:1px solid var(--rule-2);background:transparent;font-family:var(--fm);font-size:11px;font-weight:400} .sc-badge.pending{color:var(--ink-3)} .sc-badge.running{border-color:var(--sig);color:var(--sig)} .sc-badge.done{border-color:#B9CBAE;color:var(--ok)} .sc-badge.error{border-color:#DCB6AF;color:var(--bad)} .sc-badge.cancelled{border-color:#DBC6A0;color:var(--warn)} .sc-run-btn{height:29px;padding:0 12px;border-radius:2px;border:1px solid var(--ink); background:var(--ink);color:var(--sheet);font:600 12.5px/1 var(--fs);cursor:pointer; white-space:nowrap;flex-shrink:0} .sc-run-btn:hover{background:#000} .sc-run-btn:disabled{background:transparent;color:var(--ink-4);border-color:var(--rule-2);cursor:not-allowed} .sc-run-btn.retry{background:var(--sig);border-color:var(--sig)} .sc-progress-wrap{margin-top:10px} .sc-progress-bar{height:3px;background:var(--rule);border-radius:0;overflow:hidden} .sc-progress-fill{height:100%;background:var(--sig);border-radius:0;transition:width .3s} .sc-progress-indeterminate .sc-progress-fill{width:40%;animation:sc-indeterminate 1.2s ease-in-out infinite} @keyframes sc-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}} .sc-progress-label{font-family:var(--fm);font-size:11px;color:var(--ink-3);margin-top:5px; display:flex;justify-content:space-between} .sc-log-toggle{font-family:var(--fm);font-size:11px;color:var(--sig);cursor:pointer;margin-top:9px; user-select:none;letter-spacing:.04em} .sc-log{background:#16150F;color:#CFC9B8;border:1px solid var(--ink);font-family:var(--fm); font-size:11px;padding:10px 12px;border-radius:2px;max-height:200px;overflow-y:auto; margin-top:7px;display:none;white-space:pre-wrap;word-break:break-all} .sc-log .err{color:#D98B7C;display:block} .sc-log .warn{color:#DFA24E} .sc-log .ok{color:#8FC178} .sc-time{font-family:var(--fm);font-size:10.5px;color:var(--ink-4);margin-top:5px} /* ── 작업 이력 ────────────────────────────────────────────────── */ .job-hist-item{border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:12px 0; margin-bottom:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px} .job-hist-item:first-child{border-top:1px solid var(--ink)} .job-hist-item:hover{background:var(--hover)} .job-hist-item .jh-id{font-family:var(--fm);font-size:12.5px;font-weight:500;color:var(--ink)} .job-hist-item .jh-meta{font-size:12px;color:var(--ink-3);margin-top:2px} .job-hist-badge{display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:2px; border:1px solid var(--rule-2);background:transparent;font-family:var(--fm);font-size:11px;font-weight:400} .job-hist-badge.done{border-color:#B9CBAE;color:var(--ok)} .job-hist-badge.error{border-color:#DCB6AF;color:var(--bad)} .job-hist-badge.running{border-color:var(--sig);color:var(--sig)} .job-hist-badge.pending{color:var(--ink-3)} .job-hist-badge.paused{border-color:#DBC6A0;color:var(--warn)} .job-hist-steps{display:flex;gap:2px;margin-top:7px;flex-wrap:wrap} .jhs{width:17px;height:4px;border-radius:0;background:var(--rule)} .jhs.done{background:var(--ok)} .jhs.error{background:var(--bad)} .jhs.running{background:var(--sig)} .jhs.pending{background:var(--rule-2)} /* ── 영상 보관함 ──────────────────────────────────────────────── */ .slc-list{display:flex;flex-direction:column;gap:0;margin-top:12px;border-top:1px solid var(--ink)} /* 12장을 넘으면 목록 자체를 스크롤로 묶는다. 안 그러면 타임라인과 다음 단계 버튼이 화면 몇 개 아래로 밀려나 아예 안 보인다. */ .slc-list.scroll{max-height:min(46vh,430px);overflow-y:auto; border-bottom:1px solid var(--rule-2)} .slc-card{display:flex;align-items:center;gap:13px;border:0;border-bottom:1px solid var(--rule); border-radius:0;padding:9px 0;background:transparent} .slc-card:hover{background:var(--hover)} .slc-date{font-family:var(--fm);font-size:13px;font-weight:500;color:var(--ink);width:104px;flex-shrink:0} .slc-fname{flex:1;font-family:var(--fm);font-size:11.5px;color:var(--ink-3);overflow:hidden; text-overflow:ellipsis;white-space:nowrap;min-width:0} .slc-tag{display:inline-flex;align-items:center;height:19px;padding:0 6px;border-radius:2px; border:1px solid var(--rule-2);font-family:var(--fm);font-size:10.5px;font-weight:400; color:var(--ink-3);flex-shrink:0;background:transparent} .slc-tag.zip{border-color:var(--rule-2);color:var(--d-blue)} .slc-tag.safe{border-color:var(--rule-2);color:var(--d-plum)} .slc-size{font-family:var(--fm);font-size:11.5px;color:var(--ink-3);width:74px;text-align:right;flex-shrink:0} .slc-del{border:0;background:none;cursor:pointer;font-size:13px;padding:3px 6px;border-radius:2px; color:var(--ink-4);filter:grayscale(1)} .slc-del:hover{background:var(--hover);color:var(--bad);filter:none} /* ── 영상 타임라인 ───────────────────────────────────────────────── 장수에 «비례해 길어지지 않는» 구조라야 한다. 예전 가로 사슬은 49장에서 1,600px 을 넘겨 카드를 뚫었고 날짜 딱지가 서로 겹쳤다. 연도 하나에 행 하나 — 200장이 와도 높이가 같다. */ .slc-timeline{display:block;margin:22px 0 4px} .tl-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12px; color:var(--ink-3);padding-bottom:9px;border-bottom:1px solid var(--ink)} .tl-head b{font-size:13.5px;color:var(--ink);font-weight:700} .tl-range{font-family:var(--fm);font-size:12px;color:var(--ink-2)} .tl-sep{color:var(--rule-2)} .tl-warn{color:var(--warn);font-weight:500} .tl-years{display:flex;flex-direction:column;gap:0} .tl-row{display:flex;align-items:center;gap:11px;padding:9px 0; border-bottom:1px solid var(--rule)} .tl-ylab{font-family:var(--fm);font-size:12.5px;font-weight:500;color:var(--ink); width:38px;flex-shrink:0} .tl-ycnt{font-family:var(--fm);font-size:11px;color:var(--ink-3);width:38px; text-align:right;flex-shrink:0} .tl-track{position:relative;flex:1;height:26px;min-width:0; border-left:1px solid var(--rule-2);border-right:1px solid var(--rule-2)} /* 월 눈금 — 격자가 «언제쯤인지»를 읽게 해 준다 */ .tl-mcell{position:absolute;top:0;bottom:0;border-left:1px solid var(--rule)} .tl-mcell:first-child{border-left:0} .tl-mcell b{position:absolute;bottom:-1px;left:3px;font-family:var(--fm);font-size:9px; font-weight:400;color:var(--ink-4);line-height:1} /* 영상 하나 = 눈금 하나. title 에 연·월·일 전부 들어 있다 */ .tl-tick{position:absolute;top:2px;height:13px;width:2px;margin-left:-1px; background:var(--ink);cursor:help} .tl-tick:hover{height:18px;top:1px;width:3px;margin-left:-1.5px;background:var(--sig)} .tl-tick.warn{background:var(--warn)} .tl-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;font-size:11px} .tl-flabel{color:var(--warn);font-weight:500;margin-right:2px} .tl-chip{font-family:var(--fm);font-size:10.5px;color:var(--ink-2); border:1px solid var(--rule-2);border-radius:2px;padding:2px 6px;cursor:help} .tl-chip b{color:var(--warn);font-weight:500} .tl-more{font-size:10.5px;color:var(--ink-3)} /* ── 페어 구성 ────────────────────────────────────────────────── */ .pair-builder{display:flex;gap:12px;align-items:end;flex-wrap:wrap;background:transparent; border:1px solid var(--rule);border-radius:2px;padding:13px 15px;margin-bottom:14px} .pair-builder .pb-field label{font-size:12px;color:var(--ink-3);display:block;margin-bottom:5px} .pair-builder select{width:auto;min-width:154px;height:31px;font-size:12.5px} .pair-table{font-size:12.5px;margin-top:4px} .pair-table th{background:var(--sheet-2);color:var(--ink-3);padding:8px 11px;text-align:left; border-bottom:1px solid var(--ink);font-family:var(--fm);font-size:11px;font-weight:500; letter-spacing:.09em;text-transform:uppercase} .pair-table td{border-bottom:1px solid var(--rule);padding:8px 11px} .pair-table tr:hover td{background:var(--hover)} .gap-ok{color:var(--ok);font-weight:500;font-family:var(--fm)} .gap-warn{color:var(--warn);font-weight:500;font-family:var(--fm)} .gap-bad{color:var(--bad);font-weight:500;font-family:var(--fm)} .pair-keytxt{font-family:var(--fm);font-size:11px;color:var(--ink-3)} /* ── 실행 방식 / 페어 칩 ──────────────────────────────────────── */ .mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:12px;border:1px solid var(--rule)} .mode-box{border:0;border-right:1px solid var(--rule);border-radius:0;padding:13px 15px;cursor:pointer; transition:background .13s} .mode-box:last-child{border-right:0} .mode-box:hover{background:var(--hover)} .mode-box.sel{background:var(--sheet);box-shadow:inset 0 -2px 0 var(--sig)} .mode-box .mt{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700; letter-spacing:-.02em;color:var(--ink)} .mode-box .md{font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.7} .mode-flow{font-family:var(--fm);font-size:10.5px;color:var(--ink-4)} .pair-chips{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap} .pchip{display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 7px;border-radius:2px; border:1px solid var(--rule-2);background:transparent;font-family:var(--fm);font-size:10.5px;font-weight:400} .pchip.done{border-color:#B9CBAE;color:var(--ok)} .pchip.running{border-color:var(--sig);color:var(--sig)} .pchip.pending{color:var(--ink-4)} .pchip.error{border-color:#DCB6AF;color:var(--bad)} @keyframes pcspin{to{transform:rotate(360deg)}} .pcspin{width:8px;height:8px;border:1.5px solid var(--sig);border-top-color:transparent; border-radius:50%;display:inline-block;animation:pcspin .8s linear infinite} /* ── 산출물 ───────────────────────────────────────────────────── */ .dl-grid{display:grid;grid-template-columns:1fr;gap:0;margin-top:16px;border-top:1px solid var(--ink)} .dl-card{border:0;border-bottom:1px solid var(--rule);border-left:2px solid var(--rule-2); border-radius:0;background:transparent!important;padding:15px 0 15px 15px} .dl-vert{border-left-color:var(--d-blue)} .dl-los{border-left-color:var(--ink-3)} .dl-gpkg{border-left-color:var(--ok)} .dl-sar{border-left-color:var(--d-plum)} .dl-analysis{grid-column:auto;border:0!important;border-bottom:1px solid var(--rule)!important; border-left:2px solid var(--sig)!important;background:transparent!important} .dl-card h4{font-size:14px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px} .dl-card p{font-size:13px;color:var(--ink-2);margin-bottom:11px;line-height:1.7} .file-list{font-family:var(--fm);font-size:11px;color:var(--ink-3);margin-bottom:9px} .file-list span{display:block;margin:2px 0} .file-list details summary{cursor:pointer;font-family:var(--fm);font-size:11.5px;color:var(--sig); list-style:none;user-select:none;padding:4px 0;letter-spacing:.03em} .file-list details summary::before{content:'▸ '} .file-list details[open] summary::before{content:'▾ '} .file-list .fl-items{max-height:150px;overflow-y:auto;border:1px solid var(--rule);border-radius:2px; padding:7px 10px;margin-top:4px;background:var(--sheet)} .file-list .fl-items span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ── 교차 분석 tier ───────────────────────────────────────────── */ .tier-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;margin:12px 0; border-top:1px solid var(--ink)} .tier-box{border:0;border-right:1px solid var(--rule);border-radius:0;padding:13px 15px;text-align:left} .tier-box:last-child{border-right:0} .tier-box.t2{box-shadow:inset 0 -2px 0 var(--d-blue)} .tier-box.t3{box-shadow:inset 0 -2px 0 var(--d-orange)} .tier-box.tall{box-shadow:inset 0 -2px 0 var(--d-red)} .tier-name{font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-4);font-weight:400} .tier-box.t2 .tier-name,.tier-box.t3 .tier-name,.tier-box.tall .tier-name{color:var(--ink-4)} .tier-count{font-family:var(--fm);font-size:27px;font-weight:500;letter-spacing:-.045em; color:var(--ink);margin:7px 0 0;line-height:1} .tier-desc{font-size:12px;color:var(--ink-3);margin-top:7px} /* ── 품질 검사 ────────────────────────────────────────────────── */ .qc-panel{background:var(--sheet);border:1px solid var(--rule);border-radius:2px; box-shadow:0 1px 2px rgba(27,26,23,.06);padding:0;margin-bottom:18px} .qc-head{display:flex;align-items:center;gap:11px;margin-bottom:0;padding:12px 18px; background:var(--sheet-2);border-bottom:1px solid var(--rule)} .qc-head h4{font-family:var(--fm);font-size:11.5px;font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--ink)} .qc-badge{display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:2px; border:1px solid var(--rule-2);background:transparent!important;font-family:var(--fm); font-size:11px;font-weight:400} .qc-ok{border-color:#B9CBAE;color:var(--ok)} .qc-warn{border-color:#DBC6A0;color:var(--warn)} .qc-fail{border-color:#DCB6AF;color:var(--bad)} .qc-skipped{border-color:var(--rule-2);color:var(--ink-3)} /* 검사한 적 없음 — ok 도 fail 도 아닌 제3의 상태. 유채색을 주지 않는다: 색이 있으면 판정으로 읽힌다. */ .qc-none{border-color:var(--rule-2);color:var(--ink-4);background:repeating-linear-gradient(135deg,transparent,transparent 3px,var(--rule-2) 3px,var(--rule-2) 4px)} .qc-table{font-size:12.5px} .qc-table th{text-align:left;background:var(--sheet-2);padding:8px 18px;color:var(--ink-3); font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase; border-bottom:1px solid var(--ink)} .qc-table td{padding:8px 18px;border-bottom:1px solid var(--rule);vertical-align:top} .qc-table tr:hover td{background:var(--hover)} .qc-reason{color:var(--ink-2);font-size:12.5px;line-height:1.7} .qc-note{margin:0;padding:13px 18px 13px 33px;background:transparent;border-radius:0; border-top:1px solid var(--rule);border-left:2px solid var(--sig);font-size:12.5px; line-height:1.75;color:var(--ink-2)} .qc-note b{color:var(--ink)} /* ── 프로젝트 목록 ────────────────────────────────────────────── */ .proj-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--ink)} .proj-card{background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0; padding:13px 0;display:flex;align-items:center;justify-content:space-between;gap:12px} .proj-card:hover{background:var(--hover);border-color:var(--rule)} .proj-card-main{flex:1;cursor:pointer;min-width:0} .proj-card-actions{display:flex;align-items:center;gap:6px;flex-shrink:0} .proj-name{font-weight:700;font-size:14.5px;letter-spacing:-.02em;color:var(--ink)} /* 관리 단위가 두 종류다 — 영상 창고(프로젝트)와 계산 신청(U-05-22). 같은 목록에 서되 한눈에 갈려야 한다. 색이 아니라 «글자»로 가른다: 색만으로 가르면 색맹·흑백 인쇄에서 두 종류가 한 종류가 된다. */ .proj-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:9px; font-size:10.5px;font-weight:600;letter-spacing:0;vertical-align:middle; border:1px solid var(--rule-2);color:var(--sub);background:var(--sheet)} .proj-tag.req{border-color:#12457E;color:#12457E;background:rgba(18,69,126,.08)} .proj-tag.img{border-color:var(--rule-2);color:var(--sub)} .proj-meta{font-family:var(--fm);font-size:11.5px;color:var(--ink-3);margin-top:3px} .proj-size{font-family:var(--fm);font-size:11.5px;color:var(--ink-3);min-width:56px;text-align:right} /* ── 정리 모달 ────────────────────────────────────────────────── */ .cleanup-ov,.br-modal{position:fixed;inset:0;background:rgba(27,26,23,.42);display:flex; align-items:center;justify-content:center;z-index:9000;padding:20px} .cleanup-box{background:var(--sheet);border:1px solid var(--ink);border-radius:2px;max-width:640px; width:100%;max-height:84vh;overflow:auto;padding:22px 24px;box-shadow:none} .cleanup-row{display:flex;align-items:center;gap:11px;padding:9px 0; border-bottom:1px solid var(--rule);cursor:pointer} .cleanup-row:last-of-type{border-bottom:0} .cleanup-row .nm{flex:1;min-width:0} .cleanup-row .sz{font-family:var(--fm);color:var(--ink-3);font-size:12.5px;white-space:nowrap} .kind-tag{display:inline-flex;align-items:center;height:18px;font-family:var(--fm);font-size:10.5px; padding:0 6px;border-radius:2px;border:1px solid var(--rule-2);color:var(--ink-3);margin-left:7px} .kind-tag.kind-final{border-color:#B9CBAE;color:var(--ok)} /* ── 서버·NAS 탐색 ────────────────────────────────────────────── */ .br-box{background:var(--sheet);border:1px solid var(--ink);border-radius:2px;width:min(940px,94vw); max-height:86vh;display:flex;flex-direction:column;box-shadow:none} .br-head{display:flex;align-items:center;padding:13px 18px; background:var(--sheet-2);border-bottom:1px solid var(--rule)} .br-head h3{font-family:var(--fm);font-size:11.5px;font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--ink);flex:1} .br-x{background:none;border:0;font-size:17px;cursor:pointer;color:var(--ink-3);line-height:1} .br-x:hover{color:var(--ink)} .br-path{padding:9px 18px;background:var(--sheet-2);font-family:var(--fm);font-size:11.5px; color:var(--ink-3);word-break:break-all;border-bottom:1px solid var(--rule)} .br-path a{color:var(--sig);cursor:pointer;text-decoration:none} .br-path a:hover{text-decoration:underline} .br-body{display:grid;grid-template-columns:274px 1fr;flex:1;min-height:0} .br-list{overflow-y:auto;padding:8px} .br-list:first-child{border-right:1px solid var(--rule);background:var(--sheet)} .br-dir{padding:6px 9px;font-size:12.5px;cursor:pointer;border-radius:2px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .br-dir:hover{background:var(--hover)} .br-f{display:flex;align-items:center;gap:9px;padding:5px 9px;font-size:12.5px;border-radius:2px} .br-f:hover{background:var(--hover)} .br-f label{flex:1;cursor:pointer;display:flex;gap:9px;align-items:baseline;min-width:0} .br-f .d{font-family:var(--fm);font-weight:500;color:var(--ink)} .br-f .n{color:var(--ink-3);font-size:11.5px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;flex:1} .br-f .s{font-family:var(--fm);color:var(--ink-3);font-size:11px;white-space:nowrap} .br-f.dup{opacity:.42} .br-foot{display:flex;align-items:center;gap:9px;padding:12px 18px;border-top:1px solid var(--rule); font-size:12.5px;color:var(--ink-3)} /* ── 알림 ─────────────────────────────────────────────────────── */ .alert{border-radius:0;padding:2px 0 2px 15px;font-size:13px;margin-bottom:14px; border-left:2px solid var(--rule-2);background:transparent!important;line-height:1.8;color:var(--ink-2)} .alert-info{border-left-color:var(--sig);color:var(--ink-2)} .alert-ok{border-left-color:var(--ok);color:var(--ink-2)} .alert-err{border-left-color:var(--bad);color:var(--ink-2)} /* ── 결과 시각화 ──────────────────────────────────────────────── */ .viz-toolbar{background:var(--sheet-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); padding:9px 14px;display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:0} .tb-group{display:flex;gap:7px;align-items:center} .tb-label{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-4);font-weight:400} .viz-toolbar select{width:auto;min-width:150px;height:30px;font-size:12.5px} .seg{display:inline-flex;background:transparent;border:1px solid var(--rule-2);border-radius:2px; padding:0;gap:0;overflow:hidden} .seg button{border:0;border-right:1px solid var(--rule-2);background:var(--sheet);border-radius:0; padding:0 12px;height:28px;font-size:12.5px;font-weight:500;color:var(--ink-3);cursor:pointer; font-family:var(--fs)} .seg button:last-child{border-right:0} .seg button.on{background:var(--ink);color:var(--sheet)} .viz-body{display:grid;grid-template-columns:minmax(0,1fr) 262px; height:max(700px,calc(100vh - 300px));border:1px solid var(--rule);border-top:0} #vizMap{width:100%;height:100%;background:#DDE5E6} .viz-panel{background:var(--sheet);border-left:1px solid var(--rule);overflow-y:auto;padding:14px 14px 22px} .viz-panel h3{font-family:var(--fm);font-size:10.5px;font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-4);margin:17px 0 8px;padding-bottom:6px; border-bottom:1px solid var(--rule)} .viz-panel h3:first-child{margin-top:0} .legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;margin:0;padding:5px 0; cursor:pointer;user-select:none;color:var(--ink-2)} .legend-item input{width:14px;height:14px;margin:0} .lg-swatch{width:10px;height:10px;border-radius:0;border:0;flex-shrink:0} .lg-count{margin-left:auto;font-family:var(--fm);font-size:11.5px;color:var(--ink-3)} .stat-box{background:transparent;border:1px solid var(--rule);border-radius:2px;padding:9px 11px} .stat-num{font-family:var(--fm);font-size:17px;font-weight:500;letter-spacing:-.03em;color:var(--ink)} .stat-lbl{font-size:11.5px;color:var(--ink-3);margin-top:2px} .grad-bar{height:8px;border-radius:0;margin:7px 0 3px; background:linear-gradient(90deg,#67000d,#a50f15,#ef3b2c,#fc9272,#fee0d2,#f0f0f0)} .grad-labels{display:flex;justify-content:space-between;font-family:var(--fm);font-size:10px;color:var(--ink-3)} .zoom-pill{background:rgba(255,255,255,.94);border:1px solid var(--rule-2);border-radius:2px; padding:3px 8px;font-family:var(--fm);font-size:11px;font-weight:400;color:var(--ink-2); white-space:nowrap;box-shadow:none;font-variant-numeric:tabular-nums;line-height:1.5} .zoom-pill em{font-style:normal;color:var(--ink);font-weight:500} .zoom-pill .warn{color:var(--warn)} .zoom-pill .ok{color:var(--ok)} #vizMap.measuring,#vizMap.measuring .leaflet-interactive{cursor:crosshair} .mz-seg{position:absolute;transform:translate(-50%,-50%);white-space:nowrap; background:rgba(255,255,255,.94);border:1px solid var(--sig);border-radius:2px;padding:1px 5px; font-family:var(--fm);font-size:10px;font-weight:500;color:var(--sig);box-shadow:none} .mz-total{font-family:var(--fm);font-size:19px;font-weight:500;color:var(--sig);letter-spacing:-.03em} .mz-row{display:flex;justify-content:space-between;gap:9px;font-size:12px;margin:3px 0; color:var(--ink-3);font-variant-numeric:tabular-nums} .mz-row b{font-family:var(--fm);color:var(--ink);font-weight:400} .mz-hint{font-size:11.5px;color:var(--ink-3);line-height:1.7;margin-top:9px} .attr-pop{font-size:12.5px;font-family:var(--fs);min-width:214px} .attr-pop h4{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);margin-bottom:7px;display:flex;align-items:center;gap:7px} .attr-badge{display:inline-flex;align-items:center;height:17px;font-family:var(--fm);font-size:10px; font-weight:400;border-radius:2px;padding:0 6px;color:#fff} .attr-pop table{width:100%;border-collapse:collapse} .attr-pop td{padding:4px 0;border-bottom:1px solid var(--rule);vertical-align:baseline} .attr-pop tr:last-child td{border-bottom:0} .attr-pop td:first-child{color:var(--ink-3);font-size:11.5px;width:40%;white-space:nowrap} /* 값 칸은 숫자다. 접히면 자릿수가 갈라져 읽기 어려우므로 한 줄로 두고, 설명 문장은 표에 넣지 않고 아래 각주로 내린다 — 표에 문장을 넣었더니 그 문장이 상자 폭을 정해 버렸다. */ .attr-pop td:last-child{font-family:var(--fm);font-weight:500;text-align:right; white-space:nowrap;font-variant-numeric:tabular-nums} .attr-pop .attr-note{margin:8px 0 0;padding-top:7px;border-top:1px solid var(--rule); font-size:11px;line-height:1.65;color:var(--ink-3)} .attr-pop .attr-note b{color:var(--ink-2);font-weight:500} .attr-pop .attr-note .w{color:var(--bad)} .leaflet-popup-content-wrapper{border-radius:2px!important;box-shadow:0 1px 6px rgba(27,26,23,.18)!important} .leaflet-container{font-family:var(--fs)!important} /* ── 반응형 ───────────────────────────────────────────────────── */ @media (max-width:1100px){ .viz-body{grid-template-columns:1fr;height:auto} .viz-panel{border-left:0;border-top:1px solid var(--rule);max-height:none} #vizMap{height:min(70vh,560px)} .mode-grid{grid-template-columns:1fr} .mode-box{border-right:0;border-bottom:1px solid var(--rule)} } @media (max-width:860px){ .main{grid-template-columns:1fr} .sidebar{position:static;max-height:none;display:flex;overflow-x:auto;padding:0; border-right:0;border-bottom:1px solid var(--rule)} .step-item{border-bottom:0;border-left:0;border-top:2px solid transparent;white-space:nowrap; grid-template-columns:auto auto;padding:10px 14px} .step-item.active{border-left-color:transparent;border-top-color:var(--sig)} .step-sep{display:none} .content{padding:18px 16px 60px} .form-row{grid-template-columns:1fr;gap:6px} .form-row > label{padding-top:0} .br-body{grid-template-columns:1fr} .colophon__in{grid-template-columns:1fr} } /* ── 공용 부속 자리 (측정 상자 · GIS 범례) ───────────────────────── DInSAR 에서는 이것들이 «좁은 우측 기둥»에 산다. 공용 자리로 옮기면 전폭이 되어 세로로 길게 늘어나고, 지도를 화면 밖으로 밀어낸다. 실제로 투수성 지질구조를 켜니 유형 7줄이 지도를 아래로 몰아냈다. 그래서 높이를 묶고 여러 단으로 흘린다. */ #viz6extra{max-height:184px;overflow:auto;gap:6px 26px;align-items:flex-start;flex-wrap:wrap} /* 결과 레이어 범례도 여기로 이사 온다. 우측 기둥에서는 세로로 길게 눕지만 전폭 띠에서는 옆으로 흘려야 지도를 안 밀어낸다 (GIS 범례와 같은 처리). */ #viz6extra #vizLegendTitle{margin:0 0 2px;font-size:11.5px;flex:0 0 auto} #viz6extra #vizLegend{display:flex;flex-wrap:wrap;gap:1px 22px;max-width:62%} #viz6extra #vizLegend .legend-item{width:auto;flex:0 0 auto;justify-content:flex-start; gap:5px;margin:1px 0} /* 범례 항목은 우측 기둥에서 «한 줄에 하나»로 눕도록 짜여 있다. 전폭 자리에 그대로 두면 유형 하나가 한 줄씩 먹어 지도를 밀어낸다. 여기서만 옆으로 흘린다. */ #viz6extra #vizOverlayLegend > hr{display:none} #viz6extra #vizOverlayLegend > h3{margin:2px 0 4px;font-size:11.5px} #viz6extra #vizOverlayLegend > div{display:flex;flex-wrap:wrap;gap:1px 24px;margin-bottom:6px} #viz6extra #vizOverlayLegend .legend-item{width:auto;flex:0 0 auto;justify-content:flex-start; gap:5px;margin:1px 0} #viz6extra #vizOverlayLegend .lg-count{margin-left:5px;color:var(--ink-3)} #viz6extra h3,#viz6extra h4{margin-top:0} #viz6extra .mz-total{font-size:15px} /* PS 지도 위 후보 폴리곤의 hover 정보. 팝업과 달리 클릭을 먹지 않는다. Leaflet 의 `.leaflet-tooltip` 기본값이 **white-space:nowrap** 이라 긴 문장이 한 줄로 뻗어 상자가 화면 밖으로 나갔다 — 값이 오른쪽에서 잘려 안 보였다. `bindTooltip({maxWidth})` 는 **툴팁에는 적용되지 않는다**(팝업 전용 옵션). 폭은 여기서만 잡을 수 있다. */ .leaflet-tooltip.attr-tip{padding:10px 12px;max-width:300px;white-space:normal; border:1px solid var(--rule-2);border-radius:3px; background:var(--sheet);color:var(--ink);font-family:var(--fs); box-shadow:0 3px 14px rgba(27,26,23,.16)} .leaflet-tooltip.attr-tip::before{display:none} .leaflet-tooltip.attr-tip .attr-pop{margin:0;min-width:0} /* 후보 순위 목록이 전폭 띠로 이사 왔을 때 — 세로로 길게 눕지 않게 옆으로. */ #viz6extra #vizTopTitle{margin:0 0 2px;font-size:11.5px;flex:0 0 auto} #viz6extra #vizTopList{display:flex;flex-wrap:wrap;gap:0 18px;max-width:46%} #viz6extra #vizTopList > div{border-bottom:0 !important;padding:2px 0 !important} /* «판정 불가(자료 부족)» — 무채 해칭. Leaflet 은 fill 을 표현속성으로 넣는데 CSS 가 그보다 세므로 여기서 패턴으로 덮어쓴다. */ .undec-hatch{fill:url(#undecHatch)} .lg-swatch.undec-swatch{background:repeating-linear-gradient(45deg, #9a9a9a 0 2px,transparent 2px 5px),#dcdcdc;border:1px solid var(--rule-2)} /* ── 지도 도구 패널 (map_tools.js) ─────────────────────────────── 운영 화면의 툴바와 사용자 화면의 결과 지도가 같은 규칙으로 그린다. */ .mt-root{font-size:12px;font-family:var(--fs);color:var(--ink)} .mt-head{display:flex;align-items:baseline;gap:8px;padding:8px 11px; background:var(--sheet-2)} .mt-head b{font-size:11px;letter-spacing:.06em;color:var(--ink-2)} .mt-status{margin-left:auto;font-size:10.5px;color:var(--ink-4);font-family:var(--fm)} .mt-body{padding:7px 11px 10px} .mt-empty{color:var(--ink-4);font-size:11.5px;padding:3px 0} .mt-row{display:flex;align-items:center;gap:7px;padding:4px 0;cursor:pointer} .mt-row input{margin:0;flex:0 0 auto} .mt-ic{flex:0 0 auto;font-size:12px} .mt-lbl{flex:1 1 auto;line-height:1.4} /* 항목별 토글은 **처음부터 보인다**(결함 #13-ㄱ). 여기 display:none 이 있었고 JS 는 `box.style.display=''` 로 인라인 값을 «지웠다» — 지우면 이 규칙이 다시 이겨서 항목이 영원히 안 보였다. 빈 목록만 JS 가 display:none 으로 접는다. */ .mt-groups{padding:1px 0 6px 22px} .mt-grp{display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer; font-size:11.5px;color:var(--ink-2)} .mt-grp input{margin:0;flex:0 0 auto;transform:scale(.9)} .mt-sw{flex:0 0 auto;width:11px;height:11px;border:1.5px solid rgba(0,0,0,.25)} .mt-gl{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mt-n{flex:0 0 auto;font-family:var(--fm);font-size:10.5px;color:var(--ink-4); font-variant-numeric:tabular-nums} .mt-seg{display:flex;gap:6px} .mt-btn{flex:1 1 auto;height:28px;font:inherit;font-size:11.5px;cursor:pointer; border:1px solid var(--rule-2);border-radius:2px;background:var(--sheet); color:var(--ink-2)} .mt-btn:hover{background:var(--hover)} .mt-btn.on{background:var(--ink);color:var(--sheet);border-color:var(--ink)} .mt-mz{margin-top:8px} .mt-total{font-family:var(--fm);font-size:16px;color:var(--ink); font-variant-numeric:tabular-nums} .mt-mzrow{display:flex;justify-content:space-between;font-size:11px; color:var(--ink-3);padding:2px 0;border-bottom:1px solid var(--rule)} .mt-mzrow b{font-family:var(--fm);font-weight:500;color:var(--ink-2)} .mt-hint{margin:7px 0 0;font-size:10.5px;line-height:1.6;color:var(--ink-4)}