/* CADASU 圖面解析 Demo —— 沿用官網的藍圖語彙:格線底、等寬字、工程圖的框線感 */ :root{ --blue:#1E48D8; --blue-2:#155AF9; --ink:#0A1226; --ink-2:#3C4763; --ink-3:#7C87A3; --rule:#DDE3F0; --rule-2:#C9D2E6; --sheet:#F5F8FE; --paper:#fff; --orange:#F97316; --amber:#FB923C; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } *{box-sizing:border-box} /* 日文頁面把 JP 排到前面,不然假名會用 TC 的字形 */ html[lang="ja"] body{font-family:"Noto Sans JP","Noto Sans TC",system-ui,-apple-system,sans-serif} /* .modal / .acts 有自己的 display,不加這條 hidden 會壓不住 */ [hidden]{display:none!important} body{margin:0;font-family:"Noto Sans TC","Noto Sans JP",system-ui,-apple-system,sans-serif;color:var(--ink); background:var(--sheet); background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px); background-size:52px 52px;background-position:-1px -1px} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} /* ── 導覽:跟官網同一顆 ── */ .nb{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94); backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)} .nb-in{display:flex;align-items:center;height:64px;padding:0 clamp(18px,4vw,44px)} .nb-brand{display:flex;align-items:center} .nb-wm{width:186px;height:auto;color:var(--ink)} .nb-nav{display:flex;align-items:center;gap:clamp(4px,1.5vw,28px);margin-left:auto} .nb-nav a{font-size:15.5px;color:var(--ink-2);padding:9px 4px;white-space:nowrap; transition:color .15s} .nb-nav a:hover{color:var(--blue)} @media (max-width:1180px){.nb-nav{display:none}} .lgsw{position:relative;flex:none;margin-left:16px;padding-left:17px} .lgsw::before{content:"";position:absolute;left:0;top:50%;width:1px;height:17px; margin-top:-8.5px;background:var(--rule)} .lgsw-b{display:flex;align-items:center;gap:7px;height:34px;padding:0 4px;font:inherit; font-size:15.5px;color:var(--ink-2);background:transparent;border:0;transition:color .15s} .lgsw-b:hover{color:var(--blue)} .lgsw-b svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6} .lgsw-g{width:16px!important;height:16px!important;opacity:.72} .lgsw-v{width:13px!important;height:13px!important;opacity:.7;transition:transform .18s} .lgsw.on .lgsw-v{transform:rotate(180deg)} .lgsw-m{position:absolute;right:0;top:calc(100% + 5px);z-index:5;display:flex; flex-direction:column;min-width:132px;background:var(--paper);border:1px solid var(--rule-2); box-shadow:0 16px 34px -22px rgba(10,18,38,.45)} .lgsw-m a{padding:9px 14px;font-size:14px;color:var(--ink-2);white-space:nowrap} .lgsw-m a:hover{background:#F2F5FE;color:var(--blue)} .lgsw-m a.is-on{color:var(--blue);font-weight:700} .nb-cta{display:flex;align-items:center;height:44px;padding:0 22px;margin-left:14px; background:var(--blue);color:#fff;font-size:15px;font-weight:700;white-space:nowrap; transition:background .15s} .nb-cta:hover{background:var(--ink)} /* 已經在測試頁了,所以是狀態不是按鈕 */ .nb-quota{margin-left:14px;font-family:var(--mono);font-size:12px;color:var(--ink-3); white-space:nowrap} @media (max-width:1180px){.nb-quota{display:none}} .nb-here{display:flex;align-items:center;height:44px;padding:0 22px;margin-left:4px; border:1px solid var(--blue);color:var(--blue);font-size:15px;font-weight:700; white-space:nowrap;background:#fff;transition:background .15s,border-color .15s,color .15s} .nb-here:hover{background:var(--ink);border-color:var(--ink);color:#fff} @media (max-width:760px){.nb-here{display:none}} /* ── 進場:元件一個一個浮上來 ─────────────────────────── 在 就把 .boot 加到 ,元件先藏著;JS 準備好再拿掉, 免得字型還沒到就先閃一下。 */ .boot .rise{opacity:0} .rise{animation:rise .62s cubic-bezier(.2,.75,.3,1) both;animation-delay:var(--d,0s)} @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .boot .nb{opacity:0} .nb{animation:navIn .5s ease both} @keyframes navIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}} /* 上傳框的虛線邊自己描一圈 */ .drop-zone{position:relative} .drop-zone::after{content:"";position:absolute;inset:-1.5px;pointer-events:none; border:1.5px solid var(--blue);opacity:0; animation:zoneRing 1.1s ease .55s both} @keyframes zoneRing{0%{opacity:0;transform:scale(1.04)} 35%{opacity:.55;transform:none}100%{opacity:0;transform:none}} @media (prefers-reduced-motion:reduce){ .rise,.nb{animation:none!important;opacity:1!important;transform:none!important} .drop-zone::after{display:none} } /* ── 上傳 ── */ .intro{padding:clamp(46px,8vh,96px) clamp(18px,4vw,44px) 80px} .wrap{max-width:760px;margin:0 auto} .kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-family:var(--mono); font-size:15px;font-weight:700;letter-spacing:.13em;color:var(--blue)} .kicker::before{content:"";width:30px;height:1px;background:currentColor} h1{margin:0 0 16px;font-size:clamp(30px,5vw,50px);line-height:1.2;font-weight:900;letter-spacing:-.01em} .lead{margin:0 0 38px;font-size:17px;line-height:1.8;color:var(--ink-2)} .drop{background:var(--paper);border:1px solid var(--rule-2);padding:clamp(18px,3vw,26px)} .drop-zone{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 20px; border:1.5px dashed var(--rule-2);cursor:pointer;transition:border-color .18s,background .18s} .drop-zone:hover,.drop.is-over .drop-zone{border-color:var(--blue);background:#F7F9FF} .drop-ic{width:40px;height:40px;color:var(--blue);opacity:.75} .drop-t{margin:0;font-size:16px;font-weight:700} .drop-s{margin:0;font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.02em} /* 三個欄位加一顆按鈕,窄螢幕放不下就換行(手機上每格各佔一整列) */ .drop-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px} .drop-row input{flex:1 1 170px;min-width:0;height:50px;padding:0 15px;font:inherit;font-size:15px; border:1px solid var(--rule-2);background:var(--paper);color:var(--ink)} .drop-row input:focus{outline:2px solid var(--blue);outline-offset:-2px;border-color:var(--blue)} .drop-err{margin:14px 0 0;padding:12px 15px;font-size:14px;line-height:1.65; color:#B42318;background:#FEF3F2;border-left:3px solid #D92D20} .privacy{display:flex;align-items:center;justify-content:center;gap:9px; margin:18px 0 0;font-size:14px;color:var(--ink-3)} .privacy svg{flex:none;width:17px;height:17px;opacity:.85} .b{display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 26px;font-size:15px; font-weight:700;border:1px solid var(--blue);background:var(--blue);color:#fff; transition:background .15s,border-color .15s,color .15s} .b:hover{background:var(--ink);border-color:var(--ink)} .b svg{width:18px;height:18px} .b--line{background:transparent;color:var(--blue)} .b--line:hover{background:var(--blue);color:#fff} .b[disabled]{opacity:.5;pointer-events:none} /* 上傳中:箭頭換成一直轉的圈 */ .b-spin{display:none;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .b.is-busy .b-arrow{display:none} .b.is-busy .b-spin{display:block} @media (prefers-reduced-motion:reduce){.b-spin{animation-duration:2.4s}} /* ── 解析畫面 ── */ .stage{padding:22px clamp(14px,3vw,34px) 22px} .stage-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:20px;align-items:start; max-width:1680px;margin:0 auto} @media (max-width:1100px){.stage-grid{grid-template-columns:minmax(0,1fr)}} .canvas-col{min-width:0} .canvas-head{display:flex;align-items:center;gap:14px;margin-bottom:10px;min-height:30px} .chip{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;font-family:var(--mono); font-size:12px;letter-spacing:.06em;background:var(--paper);border:1px solid var(--rule-2);color:var(--ink-2)} .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--blue); animation:pulse 1.1s ease-in-out infinite} .chip.is-done .dot{background:#12B76A;animation:none} @keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}} .fname{font-family:var(--mono);font-size:12px;color:var(--ink-3);overflow:hidden; text-overflow:ellipsis;white-space:nowrap;max-width:280px} .counts{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-3)} .canvas-wrap{position:relative;background:var(--paper);border:1px solid var(--rule-2); overflow:hidden;line-height:0} #page{width:100%;height:auto;display:block} .ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible} /* 掃描線:從畫面最頂端往下,慢慢走一趟 */ .scan{position:absolute;left:0;right:0;top:0;height:44%;pointer-events:none; background:linear-gradient(to bottom, rgba(30,72,216,0) 0%, rgba(30,72,216,.02) 34%, rgba(30,72,216,.055) 66%, rgba(30,72,216,.10) 92%, rgba(30,72,216,.13) 100%); border-bottom:1px solid rgba(30,72,216,.24); animation:sweep 3.6s cubic-bezier(.45,.02,.55,.98) infinite} /* -100% = 整條在畫面上方,下緣剛好貼齊頂端;227% = 上緣走到底 */ @keyframes sweep{0%{transform:translateY(-100%)}100%{transform:translateY(227%)}} /* 視圖框:先四角括號彈進來,再把虛線邊框拉開 */ .vw-br{stroke:var(--blue);stroke-width:2.4;fill:none;vector-effect:non-scaling-stroke; opacity:0;animation:brIn .34s cubic-bezier(.2,1.5,.4,1) forwards} @keyframes brIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}} .vw-box{fill:rgba(30,72,216,.045);stroke:var(--blue);stroke-width:1.2;stroke-dasharray:7 6; vector-effect:non-scaling-stroke;opacity:0; animation:boxIn .5s ease forwards,march 22s linear infinite} @keyframes boxIn{to{opacity:.85}} @keyframes march{to{stroke-dashoffset:-260}} .vw-lab{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.09em; fill:#fff;opacity:0;animation:labIn .3s ease .18s forwards} .vw-labbg{fill:var(--blue);opacity:0;animation:labIn .3s ease .18s forwards} @keyframes labIn{to{opacity:1}} /* 表格(標題欄、一般公差表)用橘色框,跟視圖分開 —— 那些不抓標注,只是框給人看 */ .vw--table .vw-br{stroke:var(--orange)} .vw--table .vw-box{fill:rgba(249,115,22,.05);stroke:var(--orange)} .vw--table .vw-labbg{fill:var(--orange)} .vw-fade{animation:vwOut .7s ease forwards} @keyframes vwOut{to{opacity:.5}} /* 標注框 */ .an{fill:rgba(251,146,60,.16);stroke:var(--amber);stroke-width:1.4;vector-effect:non-scaling-stroke; opacity:0;animation:anIn .26s ease forwards,anPulse 1.25s ease-in-out .26s infinite} @keyframes anIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}} @keyframes anPulse{0%,100%{stroke-opacity:.55;fill-opacity:.5}50%{stroke-opacity:1;fill-opacity:1}} .an.is-used{opacity:0;animation:anOut .45s ease forwards} @keyframes anOut{to{opacity:0}} /* 球標 */ .bl{opacity:0;animation:blIn .34s cubic-bezier(.2,1.6,.4,1) forwards} @keyframes blIn{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}} .bl circle{fill:#fff;stroke:var(--blue-2);stroke-width:2;vector-effect:non-scaling-stroke} .bl text{font-family:var(--mono);font-weight:700;fill:var(--blue-2);text-anchor:middle; dominant-baseline:central} .bl line{stroke:var(--blue-2);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:.7} /* 滑過表格某列:那顆球標填成實心藍,不換色系 */ .bl.is-hot circle{fill:var(--blue-2);stroke:var(--blue-2)} .bl.is-hot text{fill:#fff} .bl.is-hot line{stroke:var(--blue-2);opacity:1} /* ── 側欄 ── */ /* 左邊圖上面有一列狀態列,右邊要往下推一樣的高度才會對齊 */ .side{min-width:0;padding-top:40px} @media (max-width:1100px){.side{padding-top:0}} .card{background:var(--paper);border:1px solid var(--rule-2);display:flex; flex-direction:column;min-height:0;position:sticky;top:84px; /* --h 由 JS 設成左邊畫布的高度,兩欄才會齊底(解析中也一樣滿版) */ height:min(var(--h,70vh),calc(100vh - 106px))} @media (max-width:1100px){.card{position:static;height:auto}} .tabs{display:flex;border-bottom:1px solid var(--rule);flex:none} .tab{position:relative;flex:1;padding:14px 10px;font-size:14.5px;font-weight:700; color:var(--ink-3);background:none;border:0;border-bottom:2px solid transparent; transition:color .15s,border-color .15s} .tab:hover{color:var(--ink-2)} .tab:focus{outline:none} .tab:focus-visible{outline:2px solid var(--blue);outline-offset:-3px} .tab.is-on{color:var(--blue);border-bottom-color:var(--blue)} /* 分析好了但還沒切過去,標籤上點一顆 */ .tab.has-new::after{content:"";position:absolute;top:12px;right:14px;width:6px;height:6px; border-radius:50%;background:var(--orange)} .tab.has-new.is-on::after{display:none} .pane{flex:1;overflow:auto;min-height:0} .card-b--tbl{overflow:auto} .qt{width:100%;border-collapse:collapse;font-size:13px} .qt th{position:sticky;top:0;background:var(--paper);text-align:left;padding:10px 12px; font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-3); font-weight:400;border-bottom:1px solid var(--rule);z-index:1} .qt td{padding:9px 12px;border-bottom:1px solid var(--rule);vertical-align:top} .qt tbody tr{opacity:0;transform:translateY(6px);animation:rowIn .3s ease forwards;cursor:default} @keyframes rowIn{to{opacity:1;transform:none}} .qt tbody tr:hover{background:#F2F5FE} .qt .bn{font-family:var(--mono);font-weight:700;color:var(--blue-2)} .qt .nm{font-family:var(--mono);font-weight:700} .qt .tl{font-family:var(--mono);font-size:12px;color:var(--ink-2);white-space:nowrap} .qt .un{font-family:var(--mono);font-size:12px;color:var(--ink-3)} .qt .nt{display:block;margin-top:3px;font-size:11px;color:var(--ink-3)} #pane-table{display:flex;flex-direction:column} .qt-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;margin:0;padding:30px 14px;font-size:13px;color:var(--ink-3)} .qt-empty::before{content:"";width:26px;height:26px;border-radius:50%; border:2.5px solid var(--rule-2);border-top-color:var(--blue); animation:spin .8s linear infinite} @media (prefers-reduced-motion:reduce){.qt-empty::before{animation-duration:2.4s}} /* 分析 */ .chat{padding:16px} #pane-chat{display:flex;flex-direction:column} #pane-chat .chat:empty{display:none} .msg{margin:0 0 14px;padding:13px 15px;background:var(--sheet);border-left:2px solid var(--blue); font-size:14px;line-height:1.75;opacity:0;animation:rowIn .34s ease forwards} .msg h3{margin:0 0 8px;font-size:13px;font-family:var(--mono);letter-spacing:.07em; text-transform:uppercase;color:var(--blue)} .msg ul{margin:6px 0 0;padding-left:18px} .msg li{margin:0 0 6px} .msg b{font-weight:700} /* 欄位名固定一欄,值跟底下的說明都對齊在同一條線上 */ .msg .row{display:flex;gap:14px;margin:0 0 9px} .msg .row:last-child{margin-bottom:0} /* 欄位名這一欄的寬度照最長的標籤給,各語言不一樣 —— 給太寬中間會空一大塊 */ .msg .k{flex:none;width:58px;font-family:var(--mono);font-size:12px;color:var(--ink-3); line-height:1.9} html[lang="ja"] .msg .k{width:72px} html[lang="en"] .msg .k{width:88px} .msg .v{flex:1;min-width:0} .msg .lvl{display:inline-block;margin:0 0 10px;padding:3px 10px;font-family:var(--mono); font-size:11px;letter-spacing:.06em;border:1px solid currentColor} /* 不難就低調帶過,不用綠色特別去強調它 */ .lvl--low{color:var(--ink-3)} .lvl--medium{color:var(--amber)} .lvl--high{color:#D92D20} .msg .sum{margin:0 0 14px;font-size:14px;line-height:1.75;color:var(--ink-2)} .msg .nt{display:block;margin-top:3px;font-size:12px;color:var(--ink-3);line-height:1.6} .msg .cost{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink)} .msg--warn{border-left-color:var(--amber);background:#FFF8F1;color:#B45309} .msg--warn h3{color:var(--orange)} .acts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule); border-top:1px solid var(--rule)} .act{padding:14px 10px;font-size:13px;font-weight:700;background:var(--paper);border:0; color:var(--ink-2);transition:background .14s,color .14s} .act:hover{background:var(--blue);color:#fff} /* ── 彈窗 ── */ .modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px; background:rgba(10,18,38,.55);backdrop-filter:blur(3px);animation:rowIn .2s ease forwards} .modal-box{background:var(--paper);border:1px solid var(--rule-2);max-width:460px;padding:32px} .modal-k{margin:0 0 10px;font-family:var(--mono);font-size:12px;letter-spacing:.13em;color:var(--blue)} .modal h2{margin:0 0 12px;font-size:24px;font-weight:900} .modal-d{margin:0 0 24px;font-size:15px;line-height:1.8;color:var(--ink-2)} /* 兩顆按鈕等寬,不管字數幾個 */ .modal-c{display:flex;gap:10px;flex-wrap:wrap} .modal-c > *{flex:0 0 auto;min-width:132px;justify-content:center} @media (prefers-reduced-motion:reduce){ .scan{display:none} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important} .vw-br,.vw-box,.vw-lab,.vw-labbg,.an,.bl,.qt tbody tr,.msg{opacity:1!important} }