15 lines
18 KiB
CSS
15 lines
18 KiB
CSS
@font-face{font-family:Pretendard;src:url('fonts/PretendardVariable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
|
|
:root{color-scheme:light;--bg:#f5f7f3;--panel:#fff;--text:#233e36;--muted:#6b7d74;--line:#dfe6df;--accent:#247b64;--soft:#eef5ef;--aqua:#329e9b;--orange:#c78846;--navy:#4a718b;--violet:#876ba7;font-family:Inter,Pretendard,'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:13px}button,input,select{font:inherit}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}button{transition:background .15s}button:hover{filter:brightness(.96)}[hidden]{display:none!important}.topbar{height:88px;display:flex;align-items:center;padding:0 28px;gap:35px;border-bottom:1px solid var(--line);background:#fff}.brand{display:flex;gap:12px;align-items:center;font-size:15px;font-weight:700;letter-spacing:1.8px;min-width:232px}.brand small{font-size:7px;letter-spacing:1.7px;display:block;color:var(--muted);font-weight:500;margin-top:5px}.brand-icon{font-size:31px;display:grid;place-items:center;background:#edf6ef;color:var(--accent);width:43px;height:43px;border:1px solid #c9dfce;border-radius:13px;transform:rotate(-5deg)}.title-block{display:flex;flex-direction:column;gap:5px}.title-block h1{font-size:16px;font-weight:600;letter-spacing:-.5px;margin:0}.title-block>span{color:var(--muted);font-size:10px}.local-badge{margin-left:auto;white-space:nowrap;background:var(--soft);border:1px solid #d2e3d3;padding:7px 10px;border-radius:20px;font-size:8px;letter-spacing:1px;color:#497254}.local-badge i,.status-light{display:inline-block;width:5px;height:5px;background:#4c9b6b;border-radius:50%;margin-right:5px}.app-grid{display:grid;grid-template-columns:278px minmax(280px,1fr) 304px;height:calc(100dvh - 122px);min-height:750px}.controls{border-right:1px solid var(--line);padding:28px 23px 20px;overflow:auto;background:#fff;scrollbar-width:thin;scrollbar-color:#c9d8cd transparent}.section-kicker{font-size:8px;letter-spacing:1.8px;color:#6d8878;font-weight:600;display:flex;justify-content:space-between}.section-kicker>span{color:#9aad9e}.controls h2{font-size:23px;line-height:1.6;letter-spacing:-1px;font-weight:600;margin:20px 0 12px}.controls h2 span{color:#348367}.subtle{font-size:11px;color:var(--muted);line-height:1.9;margin:0 0 20px}.summary-cards{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:#f7faf6;border-radius:9px;margin-bottom:22px}.summary-cards div{padding:12px 16px}.summary-cards div+div{border-left:1px solid var(--line)}.summary-cards span{font-size:10px;color:var(--muted);display:block;margin-bottom:6px}.summary-cards strong{font-size:25px;font-weight:500;font-variant-numeric:tabular-nums}.controls section{padding:20px 0;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}h3{font-size:12px;font-weight:600;margin:0}.small{font-size:9px;color:var(--muted)}.text-button{background:none;border:0;padding:0;font-size:10px;color:#507d64}.search-wrap{display:flex;gap:8px;align-items:center;border:1px solid #ccdbcf;background:#f6f9f5;border-radius:7px;padding:9px 11px}.search-wrap>span{font-size:20px;color:#75917d;line-height:1}input[type=search]{width:100%;background:none;border:0;outline:none;font-size:11px;color:var(--text);padding:3px 0}input::placeholder{color:#859b8c}#search-status{margin-top:7px;min-height:0}.search-results{max-height:225px;overflow:auto;margin-top:6px}.search-result{display:flex;justify-content:space-between;align-items:center;text-align:left;border:0;border-bottom:1px solid var(--line);width:100%;padding:10px 4px;gap:6px;background:white;font-size:10px}.search-result span{overflow-wrap:anywhere}.search-result small{font-size:8px;color:var(--muted);white-space:nowrap}.search-result.missing small{color:#a06b29}.layer-list{display:flex;flex-direction:column;gap:14px}.layer-list label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;cursor:pointer}.layer-list label>span{display:flex;align-items:center;gap:8px}.layer-list small{color:#8b9d91;font-size:9px;font-variant-numeric:tabular-nums}.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0}.junction{background:#4e936e}.conduit{background:var(--aqua);border-radius:2px}.outfall{background:var(--navy)}.other{background:var(--violet)}input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;margin:0;cursor:pointer}.range-heading{display:flex;justify-content:space-between;font-size:10px;align-items:center;margin-top:16px}.range-heading output{background:#edf5ed;color:#357553;padding:3px 6px;border-radius:4px;font-size:10px;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--accent);height:4px;margin:15px 0 8px;cursor:pointer}.range-ends{display:flex;justify-content:space-between;color:#879b8a;font-size:8px}.toggle-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;font-size:11px;cursor:pointer}.toggle-label small{display:block;font-size:9px;color:var(--muted);margin-top:6px}.fine-print{font-size:9px;line-height:1.8;color:var(--muted);margin-top:14px}.audit-button{width:100%;border:1px solid #e1d7b9;border-radius:7px;background:#fbf8ee;display:flex;justify-content:space-between;align-items:center;padding:12px 10px;font-size:10px;gap:8px}.audit-button>span:first-child{display:flex;gap:7px;align-items:center}.audit-button strong{font-weight:500;margin-left:auto;color:#997432}.audit-icon{border:1px solid #b6934b;border-radius:50%;width:14px;height:14px;display:grid;place-items:center;font-size:9px;color:#9d742e}.source-label{color:#89998e;font-size:8px;line-height:1.8;margin-top:15px}.viewer{position:relative;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 48% 38%,#fff 0,#f0f5ed 52%,#e6eee2 100%);isolation:isolate}.viewer>canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:grab;outline-offset:-5px}.viewer>canvas:active{cursor:grabbing}.viewport-heading{position:absolute;top:29px;left:28px;right:25px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;gap:10px}.viewport-heading .section-kicker{font-size:7px;letter-spacing:1.6px}.viewport-heading h2{font-size:26px;font-weight:500;letter-spacing:-1px;margin:9px 0}.viewport-heading p{font-size:9px;color:#6e8471;margin:0}.view-badge{border:1px solid #d3e0cf;border-radius:20px;padding:6px 10px;font-size:9px;background:#ffffffe0;white-space:nowrap;color:#52795c}.scale-badges{display:flex;position:absolute;left:28px;top:124px;gap:5px;pointer-events:none;flex-wrap:wrap;right:20px}.scale-badges span{border:1px solid #c6d9c2;background:#fafff8e6;color:#4d7350;font-size:9px;padding:5px 7px;border-radius:4px}.coordinate-note{position:absolute;top:162px;left:28px;font-size:8px;letter-spacing:.2px;color:#8a7752;pointer-events:none}.coordinate-note span{margin:0 5px}.legend-panel{position:absolute;left:25px;bottom:135px;pointer-events:none;border:1px solid #d7e0d4;background:#ffffffe0;border-radius:8px;padding:13px 14px;backdrop-filter:blur(12px)}.legend-title{font-size:9px;font-weight:600;display:block;margin-bottom:12px}.legend-panel>div{display:flex;align-items:center;gap:8px;font-size:9px;color:#5b7561;margin:9px 0}.legend-panel>div span{margin-left:auto;font-size:8px;color:#879e89}.line-key{width:17px;height:3px;background:var(--aqua);display:inline-block;border-radius:2px}.line-key.rectangular{background:var(--orange);height:5px;border-radius:0}.legend-panel small{display:block;color:#82917e;font-size:7px;line-height:1.8;margin-top:12px}.axes{position:absolute;bottom:132px;right:17px;pointer-events:none;text-align:center}.axes canvas{width:100px;height:90px;display:block}.axes>span{font-size:6px;letter-spacing:1.3px;color:#839780}.view-toolbar{position:absolute;bottom:57px;left:50%;transform:translateX(-50%);display:flex;padding:5px;align-items:center;gap:3px;border:1px solid #cfdcc9;border-radius:10px;background:#ffffffeb;box-shadow:0 8px 25px #3e5a3612;white-space:nowrap;backdrop-filter:blur(12px)}.view-toolbar button{font-size:10px;background:none;border:0;border-radius:6px;padding:11px 12px;color:#648064}.view-toolbar button:hover{background:#edf4e8}.view-toolbar button[aria-pressed=true]{background:var(--accent);color:#fff}.view-toolbar i{width:1px;height:15px;background:#d7e1d0;margin:0 3px}.viewer-footer{position:absolute;bottom:21px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;gap:10px}.viewer-footer>span{font-size:8px;color:#7b8d76;pointer-events:none}.viewer-footer i{font-style:normal;margin:0 5px}.viewer-footer button{font-size:9px}.datum-note{font-size:7px;color:#80947a;letter-spacing:.4px;position:absolute;bottom:106px;right:24px;pointer-events:none}.scene-message{position:absolute;left:10%;right:10%;top:43%;text-align:center;background:#ffffffed;padding:22px;border-radius:10px;border:1px solid var(--line);line-height:1.8;font-size:12px;box-shadow:0 10px 40px #31472b0a}.scene-message.error{color:#9c5139}.inspector{background:#fcfdfb;border-left:1px solid var(--line);padding:28px 23px 24px;overflow:auto;scrollbar-width:thin}.inspector .section-kicker{margin-bottom:30px}.inspector h2{font-size:23px;font-weight:550;letter-spacing:-.6px;margin:10px 0;overflow-wrap:anywhere}.inspector-intro{font-size:11px;line-height:1.9;color:var(--muted)}.detail-type{font-size:9px;padding:4px 7px;border-radius:4px;background:#e9f2e7;color:#4e7c54;display:inline-block}.detail-type.conduit{background:#e9f5f2;color:#3b7c72}.detail-type.storage{background:#f1edf8;color:#7c639c}.detail-type.outfall{background:#eaf0f6;color:#52788d}.detail-type.pump,.detail-type.weir{background:#fbf2df;color:#99772d}.focus-button{border:1px solid #c9dcc9;background:#edf5e9;color:#3b7149;width:100%;border-radius:7px;padding:11px;margin:13px 0 19px;font-size:11px}.detail-section{border-top:1px solid var(--line);padding:19px 0 0;margin-top:10px}.detail-section h3{font-size:11px;margin-bottom:13px}.properties{margin:0}.properties>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:10px;line-height:1.65}.properties dt{color:var(--muted);flex:0 0 40%}.properties dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:0}.notice{font-size:10px;line-height:1.9;background:#f0f5ec;border:1px solid #d9e5d1;border-radius:7px;padding:12px;color:#607b59;margin:17px 0}.notice.warning{background:#faf6e9;color:#8b713b;border-color:#e8dfc2}.connection-list{display:flex;flex-direction:column;gap:5px}.connection-link{display:flex;justify-content:space-between;gap:9px;border:1px solid #dce6d7;background:white;border-radius:5px;padding:9px;font-size:10px;text-align:left;overflow-wrap:anywhere}.connection-link small{color:var(--muted);font-size:8px;white-space:nowrap}.profile-wrap{margin-top:12px;border:1px solid #dae5d6;border-radius:8px;background:#f7faf4;padding:10px}.profile-wrap canvas{width:100%;height:150px;display:block}.profile-caption{font-size:8px;color:#7b8e75;line-height:1.7;margin:6px 0 0}.overview-list{margin-top:24px;display:grid;gap:13px}.overview-list>div{display:flex;justify-content:space-between;font-size:11px}.overview-list span{color:var(--muted)}.overview-list b{font-weight:500;font-variant-numeric:tabular-nums}.overview-icon{width:55px;height:55px;display:grid;place-items:center;border:1px solid #d3e2ce;border-radius:15px;background:#f0f7eb;font-size:26px;color:#629269;margin-bottom:22px}.statusbar{height:34px;padding:0 23px;display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid var(--line);font-size:8px;color:#7a8e7c;letter-spacing:.3px;background:white}dialog{width:min(820px,94vw);max-height:86dvh;border:1px solid #ccd9c7;border-radius:14px;background:#fff;color:var(--text);padding:28px;box-shadow:0 30px 100px #1e392d33}dialog::backdrop{background:#213c315c;backdrop-filter:blur(4px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.dialog-heading h2{font-size:22px;letter-spacing:-.8px;font-weight:550;margin:10px 0}.close-dialog{background:#f0f5ec;border:1px solid #d8e3d1;border-radius:6px;width:30px;height:30px}.audit-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:8px;overflow:hidden}.audit-summary-grid div{padding:14px;background:#f7faf5;border-bottom:1px solid var(--line);border-right:1px solid var(--line);font-size:10px;color:var(--muted)}.audit-summary-grid strong{display:block;font-size:21px;font-weight:500;color:var(--text);margin-top:7px}.audit-filter-label{display:flex;justify-content:space-between;align-items:center;margin:20px 0;font-size:11px}.audit-filter-label select{border:1px solid var(--line);background:#f7faf5;border-radius:5px;padding:7px;font-size:11px;color:var(--text)}.audit-list{max-height:37dvh;overflow:auto;border-top:1px solid var(--line)}.audit-row{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid var(--line);font-size:11px;line-height:1.7}.audit-row button{border:1px solid #d9e5d1;border-radius:5px;padding:5px 8px;background:#f1f6ed;font-size:10px;white-space:nowrap}.help-grid{display:grid;grid-template-columns:100px 1fr;gap:17px 20px;font-size:12px;line-height:1.8}.help-grid dt{color:var(--muted)}.help-grid dd{margin:0}#toast{position:fixed;bottom:48px;left:50%;transform:translate(-50%,10px);background:#284f3e;color:#f0f8ee;border:1px solid #467656;border-radius:8px;padding:12px 18px;font-size:11px;line-height:1.7;max-width:90vw;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:5}#toast.visible{opacity:1;transform:translate(-50%,0)}
|
|
@media(min-width:1700px){.app-grid{grid-template-columns:300px minmax(400px,1fr) 340px}.controls,.inspector{padding-left:30px;padding-right:30px}.viewport-heading{left:35px;top:35px}}
|
|
@media(max-width:1200px){.topbar{gap:20px;padding:0 20px}.brand{min-width:210px}.app-grid{grid-template-columns:245px minmax(280px,1fr) 260px}.controls,.inspector{padding:24px 18px}.controls h2{font-size:21px}.title-block h1{font-size:14px}.viewport-heading{left:20px;right:18px}.scale-badges{left:20px;top:130px}.coordinate-note{left:20px;top:170px}.view-toolbar button{padding:10px 9px;font-size:9px}.legend-panel{left:18px;bottom:130px;padding:10px}.legend-panel small{display:none}.viewer-footer>span{font-size:7px}.viewer-footer{left:16px;right:16px}.viewer-footer i{margin:0 2px}.viewport-heading .section-kicker{font-size:6px}.axes{right:5px}}
|
|
@media(max-width:950px){.app-grid{grid-template-columns:245px minmax(280px,1fr);height:auto;min-height:calc(100dvh - 122px)}.viewer{min-height:760px;grid-column:2;grid-row:1}.controls{max-height:900px;grid-column:1;grid-row:1}.inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:28px;min-height:260px}.inspector .section-kicker{margin-bottom:17px}.properties>div{max-width:600px}.profile-wrap{max-width:600px}.title-block>span{display:none}.brand{min-width:195px}.local-badge{font-size:7px;padding:6px}.statusbar{font-size:7px}.viewport-heading .section-kicker{font-size:7px}}
|
|
@media(max-width:650px){.topbar{height:auto;min-height:98px;padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:12px}.brand{font-size:12px;min-width:0;gap:9px}.brand-icon{width:33px;height:33px;font-size:24px;border-radius:10px}.brand small{font-size:6px}.title-block{grid-column:1/-1;grid-row:2}.title-block h1{font-size:13px}.local-badge{grid-column:2;grid-row:1}.app-grid{display:flex;flex-direction:column;min-height:0}.viewer{order:-1;min-height:640px;height:75dvh;max-height:900px;border-bottom:1px solid var(--line)}.controls{padding:24px;overflow:visible;max-height:none;border-right:0}.controls h2{font-size:23px}.controls h2 br{display:none}.controls .subtle br{display:none}.controls section{padding:18px 0}.summary-cards{max-width:400px}.layer-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 25px}.viewport-heading{top:24px}.viewport-heading h2{font-size:24px}.scale-badges{top:116px}.coordinate-note{top:155px}.view-toolbar{bottom:61px}.view-toolbar button{padding:10px 9px;font-size:10px}.viewer-footer>span{font-size:7px}.legend-panel{bottom:130px}.legend-panel small{display:block;font-size:6px}.legend-panel>div{font-size:8px}.axes{bottom:130px}.statusbar{height:auto;min-height:38px;flex-wrap:wrap;padding:10px 18px;font-size:7px}.statusbar>span:last-child{display:none}.audit-summary-grid{grid-template-columns:repeat(2,1fr)}dialog{padding:20px}.dialog-heading h2{font-size:19px}.audit-row{font-size:10px}.help-grid{grid-template-columns:70px 1fr;font-size:11px;gap:14px}.inspector{padding:24px}.search-results{max-height:240px}.datum-note{bottom:112px}}
|
|
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
|
|
|
|
/* Dark 3D workspace; the surrounding controls and pages remain light. */
|
|
.viewer{background:radial-gradient(ellipse at 45% 42%,#29383b 0,#1b282e 45%,#121d23 100%);color:#e8ecea}
|
|
.viewer .section-kicker{color:#8ca29e}.viewport-heading p{color:#91aaa0}.view-badge{background:#17272bce;border-color:#3d554e;color:#b5cec1}.scale-badges span{background:#1b2d2ce6;border-color:#486255;color:#b3d9c0}.coordinate-note{color:#c2b28f}
|
|
.legend-panel{background:#18282be6;border-color:#3b514b}.legend-title{color:#c1d6c9}.legend-panel>div{color:#a9c5b6}.legend-panel>div span{color:#91a79b}.legend-panel small{color:#8aa296}.line-key.circular{background:#64bdb9}.line-key.rectangular{background:#d7b47a}
|
|
.axes>span{color:#839d92}.view-toolbar{background:#152126ed;border-color:#3a4a4d;box-shadow:0 8px 30px #0003}.view-toolbar button{color:#a4bcb0}.view-toolbar button:hover{background:#2d403e}.view-toolbar button[aria-pressed=true]{background:#a7e3cb;color:#1b3a2c}.view-toolbar i{background:#354446}
|
|
.viewer-footer>span{color:#8aa69b}.viewer .text-button{color:#a5b8b0}.viewer .text-button:hover{color:#a7e3cb}.datum-note{color:#839d92}
|