/* ============================================================ 台灣ETF報酬率分析器 — shares the visual language of the main site (active-etf-transition), so /market/* stops looking like a different product from the pages either side of it in the nav. Self-contained on purpose: this app also serves standalone (the legacy :5005 port, Docker), where the main site's /static is not reachable. Part 1 is therefore a copy of that site's shell — if its tokens change, mirror them here. Bootstrap and Font Awesome were dropped; Part 2 reimplements the handful of their utilities the templates and JS still emit, so nothing had to be renamed across 1,300 lines of JS. ============================================================ */ /* ─────────── Part 1: shared shell (mirrors the main site) ─────────── */ :root{ --bg:#f4f6fb; --panel:#ffffff; --panel2:#eef2f8; --line:#e4e9f1; --ink:#0f1e33; --ink2:#334155; --mut:#64748b; --brand:#2563eb; --brand-weak:#eaf0ff; --up:#e5384d; /* 漲 red — Taiwan convention */ --down:#0ca678; /* 跌 green */ --up-bg:rgba(229,56,77,.10); --down-bg:rgba(12,166,120,.12); --warn-bg:#fff6e6; --warn-ink:#b7791f; --warn-line:#f2dca6; --shadow:0 1px 2px rgba(15,30,51,.04), 0 2px 8px rgba(15,30,51,.06); --shadow-lg:0 4px 20px rgba(15,30,51,.10); --radius:14px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:"PingFang TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif; background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6; -webkit-font-smoothing:antialiased} a{color:var(--brand)} header{background:var(--panel);border-bottom:1px solid var(--line); position:sticky;top:0;z-index:20;box-shadow:0 1px 3px rgba(15,30,51,.04)} .hdr-top{display:flex;align-items:center;flex-wrap:wrap} .brand{font-weight:800;color:var(--ink);letter-spacing:.2px;text-decoration:none; display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:17px; padding:14px 20px 10px} .brand:hover{color:var(--brand)} .brand-icon{font-size:18px} nav{display:flex;gap:4px;padding:0 12px;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none} nav::-webkit-scrollbar{display:none} nav a{color:var(--mut);text-decoration:none;padding:10px 12px 12px;white-space:nowrap; font-size:14.5px;font-weight:600;border-bottom:2.5px solid transparent;flex:0 0 auto} nav a:hover{color:var(--ink)} nav a.on{color:var(--brand);border-bottom-color:var(--brand)} main{max-width:1120px;margin:0 auto;padding:22px 18px 40px} h1{font-size:24px;font-weight:800;margin:6px 0 6px;letter-spacing:-.01em} h2{font-size:18px;font-weight:700;margin:22px 0 10px} h4,h5{font-size:15.5px;font-weight:700;margin:0 0 8px} .sub{color:var(--ink2);margin:0 0 18px;font-size:14.5px} .muted{color:var(--mut)} .small{font-size:12.5px} footer{color:var(--mut);text-align:center;padding:28px 18px 40px;font-size:12.5px; max-width:1120px;margin:0 auto} /* 合規：SITCA 問答集 Q6(二) 要求提供「非屬投顧事業」警語。別移除。 */ .site-disclaimer{max-width:780px;margin:0 auto;padding-top:14px; border-top:1px solid var(--line);line-height:1.8;text-align:left; font-size:12px;color:var(--mut)} .site-disclaimer strong{color:var(--ink2)} table{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:14.5px} th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle} th{background:var(--panel2);color:var(--mut);font-weight:700;font-size:12.5px;letter-spacing:.3px} tbody tr:hover{background:#f8fafd} tr:last-child td{border-bottom:none} .up{color:var(--up);font-weight:600} .down{color:var(--down);font-weight:600} /* ─────────── Part 2: the Bootstrap utilities we still emit ─────────── */ .container-fluid{max-width:1120px;margin:0 auto;padding:0 18px} .row{display:flex;flex-wrap:wrap;gap:14px;margin:0} .col-12{flex:1 1 100%;min-width:0} .col-6{flex:1 1 calc(50% - 7px);min-width:0} .col-md-6{flex:1 1 100%;min-width:0;max-width:560px;margin:0 auto} .col-md-3,.col-lg-3{flex:1 1 200px;min-width:0} .d-flex{display:flex} .flex-wrap{flex-wrap:wrap} .gap-2{gap:9px} .justify-content-center{justify-content:center} .align-self-center{align-self:center} .text-end{text-align:right} .text-muted,.text-light{color:var(--mut)} .text-dark,.text-white{color:var(--ink)} .text-primary{color:var(--brand)} .text-decoration-none{text-decoration:none} .me-1{margin-right:5px} .me-2{margin-right:9px} .mt-1{margin-top:5px} .mt-2{margin-top:9px} .mt-3{margin-top:14px} .mt-4{margin-top:20px} .mb-0{margin-bottom:0} .mb-1{margin-bottom:5px} .mb-2{margin-bottom:9px} .mb-3{margin-bottom:14px} .pt-3{margin-top:14px} .h6,.form-label{display:block;font-size:12.5px;color:var(--mut);font-weight:700; margin-bottom:6px} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .form-control,.form-select,select,input{background:var(--panel);color:var(--ink); border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:15px; font-family:inherit;width:100%} .form-control:focus,.form-select:focus,select:focus,input:focus{outline:none; border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-weak)} button,.btn{background:var(--brand);color:#fff;font-weight:700;cursor:pointer;border:none; border-radius:10px;padding:9px 15px;font-size:14.5px;font-family:inherit; box-shadow:var(--shadow)} button:hover,.btn:hover{filter:brightness(1.06)} .btn-sm{padding:7px 12px;font-size:13.5px} .btn-outline-secondary,.btn-outline-danger{background:var(--panel);color:var(--mut); border:1px solid var(--line);box-shadow:none} .btn-outline-secondary:hover{color:var(--ink);border-color:var(--brand);filter:none} .btn-outline-danger{color:var(--up)} .btn-outline-danger:hover{border-color:var(--up);filter:none} .btn-close{background:none;color:var(--mut);box-shadow:none;padding:2px 7px; font-size:17px;line-height:1;font-weight:400} .btn-close::before{content:"×"} .btn-close:hover{color:var(--ink);filter:none} .alert{border-radius:11px;padding:12px 15px;font-size:13.5px;margin-bottom:14px; border:1px solid var(--line);background:var(--panel);color:var(--ink2)} .alert strong{color:var(--ink)} .alert-danger{background:var(--up-bg);border-color:rgba(229,56,77,.30);color:#b21e37} .alert-danger strong{color:#8f172c} .alert-warning{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)} .alert-warning strong{color:#8a5a12} .alert-info{background:var(--brand-weak);border-color:#c9dbff;color:#1e40af} .alert-info strong{color:#1e3a8a} .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)} .table-sm th,.table-sm td{padding:9px 11px} /* tabs — Bootstrap's JS is gone, a few lines in the page drive these now */ .nav-tabs{display:flex;gap:4px;list-style:none;margin:20px 0 0;padding:0; border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none} .nav-tabs::-webkit-scrollbar{display:none} .nav-item{flex:0 0 auto} .nav-link{background:none;color:var(--mut);border:none;border-bottom:2.5px solid transparent; border-radius:0;padding:9px 14px;font-size:14.5px;font-weight:600;cursor:pointer; box-shadow:none;white-space:nowrap} .nav-link:hover{color:var(--ink);filter:none} .nav-link.active{color:var(--brand);border-bottom-color:var(--brand)} .tab-pane{display:none} .tab-pane.active{display:block} .spinner-border{display:inline-block;width:34px;height:34px;border:3px solid var(--line); border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite} .spin{display:inline-block;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* classification legend (was Bootstrap contextual badges) */ .badge{display:inline-block;font-size:11.5px;background:var(--panel2); border:1px solid var(--line);border-radius:7px;padding:2px 8px;color:var(--mut); font-weight:600} .bg-light{background:var(--panel2);color:var(--ink2)} .bg-warning{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)} .bg-success{background:var(--down-bg);color:var(--down);border-color:rgba(12,166,120,.25)} .bg-info{background:var(--brand-weak);color:#1e40af;border-color:#c9dbff} .bg-secondary{background:var(--panel2);color:var(--mut)} .bg-danger{background:var(--up-bg);color:var(--up);border-color:rgba(229,56,77,.25)} .bg-dark{background:#e2e8f0;color:var(--ink)} .bg-primary{background:var(--brand-weak);color:var(--brand);border-color:#c9dbff} .bg-orange{background:#fff1e3;color:#c2410c;border-color:#fcd9b6} /* ─────────── Part 3: analyzer components ─────────── */ /* .main-container/.header/.period-selector are the old gradient shell; kept as selectors so the templates' structure still applies, but now flat. */ .main-container{max-width:1120px;margin:0 auto;padding:18px 18px 4px} .header{text-align:left;padding:0;color:inherit;background:none} .header h1{margin:0 0 10px} .header p{color:var(--ink2);margin:0 0 6px;font-size:14.5px} .period-selector{padding:0 18px 10px;max-width:1120px;margin:0 auto} /* single control row: period select + refresh + collapsed legend */ .ctlbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center} .ctlbar .form-select{width:auto;min-width:210px;max-width:100%} .ctlbar .refresh-btn{padding:9px 14px} .legend{font-size:12.5px} .legend>summary{color:var(--mut);cursor:pointer;list-style:none;padding:9px 12px; border:1px solid var(--line);border-radius:10px;background:var(--panel); font-weight:600;user-select:none} .legend>summary::-webkit-details-marker{display:none} .legend>summary::after{content:" ▾"} .legend[open]>summary::after{content:" ▴"} .legend>summary:hover{color:var(--ink)} .legend-body{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 0} /* live-view fetch time, inline in the control row (app.js sets display) */ .livetime{font-size:12.5px;color:var(--mut);white-space:nowrap} .livetime::before{content:"· "} /* kept for app.js, never shown — it sets .style.display on the first of these */ .meta-hidden{display:none !important} .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); padding:18px;box-shadow:var(--shadow);margin:16px 0} .stats-container{background:var(--panel);border:1px solid var(--line); border-radius:var(--radius);padding:18px;margin:16px 0;box-shadow:var(--shadow)} .stat-card{background:var(--panel2);border:1px solid var(--line);border-radius:11px; padding:15px;text-align:center;color:var(--ink)} .stat-card h3,.stat-card .stat-value{font-size:21px;font-weight:800;margin:0; font-variant-numeric:tabular-nums} .stat-card p,.stat-card .stat-label{font-size:12.5px;color:var(--mut);margin:3px 0 0} .treemap-container{background:var(--panel);border:1px solid var(--line); border-radius:var(--radius);padding:10px;margin:16px 0;box-shadow:var(--shadow); min-height:600px;width:100%} #treemap{width:100% !important;height:800px !important} .loading-spinner{display:none;text-align:center;padding:44px} .performer-card{background:var(--panel2);border-radius:11px;padding:14px;margin:9px 0; border-left:3px solid var(--down)} .performer-card.negative{border-left-color:var(--up)} /* refreshData() grabs this with querySelector('.refresh-btn') — keep the name */ .refresh-btn{display:inline-block;background:var(--panel);color:var(--ink); border:1px solid var(--line);border-radius:10px;padding:9px 15px;font-weight:700; font-size:14.5px;box-shadow:var(--shadow);cursor:pointer} .refresh-btn:hover{border-color:var(--brand);color:var(--brand);filter:none} /* ── 穿透分析 ── */ .lookthrough-container{background:var(--panel);border:1px solid var(--line); border-radius:var(--radius);padding:20px;margin:16px 0;box-shadow:var(--shadow)} .lookthrough-teaser{background:var(--panel);border:1px solid var(--line); border-radius:var(--radius);padding:16px 20px;margin:16px 0;box-shadow:var(--shadow); display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .lt-analyze-btn{display:inline-block;background:var(--brand);color:#fff;border:none; border-radius:10px;padding:9px 17px;font-weight:700;font-size:14.5px;cursor:pointer; box-shadow:var(--shadow)} .lt-analyze-btn:hover{color:#fff;filter:brightness(1.06)} .lt-analyze-btn:disabled{opacity:.55;cursor:not-allowed;filter:none} .lt-row{display:flex;gap:9px;align-items:center;margin-bottom:9px;flex-wrap:wrap} /* 代號欄只需容納「00980A 主動野村臺灣優選」，不必吃掉整列寬度 */ .lt-row .lt-code{flex:0 1 268px;min-width:190px} .lt-row .lt-qty{flex:0 1 130px;min-width:110px} .lt-row .lt-unit{flex:0 0 96px;width:96px} /* 部位市值：輸入完成後即時回填，讓使用者按下分析前就能確認數字對不對 */ .lt-row .lt-value{flex:1 1 150px;font-size:13px;color:var(--mut);white-space:nowrap} /* before a quantity is typed it is empty — don't let it hold a whole row and push the delete button onto its own line on narrow screens */ .lt-row .lt-value:empty{display:none} .lt-stat-card{background:var(--panel2);border:1px solid var(--line);border-radius:11px; padding:15px;text-align:center;height:100%;color:var(--ink)} .lt-stat-card .lt-stat-value{font-size:20px;font-weight:800;line-height:1.25; font-variant-numeric:tabular-nums} .lt-stat-card .lt-stat-label{font-size:12.5px;color:var(--mut);margin-top:4px} .lt-chart-wrap{background:var(--panel);border:1px solid var(--line); border-radius:var(--radius);min-height:460px;box-shadow:var(--shadow)} #ltTreemap{width:100% !important;height:460px !important} .lt-table{font-size:14px} .lt-table td,.lt-table th{vertical-align:middle} /* 集中度一行摘要：夾在總覽卡片與警語之間，要看得出是結論而不是另一張卡 */ .lt-conc-line{margin-top:2px;padding:10px 13px;font-size:14px;line-height:1.6; background:var(--panel2);border:1px solid var(--line);border-radius:9px} .lt-conc-line b{font-weight:800} /* 重疊度矩陣：30 檔時橫向放不下，讓它自己捲，不要把整頁撐出橫捲軸 */ .lt-matrix-wrap{overflow-x:auto;margin-bottom:8px} .lt-matrix-wrap>div{min-width:420px} /* 集中度分頁的小節標題：比 h2 收斂，用來分隔階梯表與各 ETF 明細 */ .lt-h3{font-size:15px;font-weight:700;margin:22px 0 2px} .lt-h3:first-of-type{margin-top:6px} /* 多檔 ETF 同時持有的個股：重疊才是穿透分析要抓的重點，標出來 */ .lt-overlap-badge{display:inline-block;background:#fff1e3;color:#c2410c; border:1px solid #fcd9b6;border-radius:99px;padding:1px 8px;font-size:11.5px; font-weight:700;margin-left:6px} /* 持股資料來源徽章：每日 PCF（主動）vs 季報（被動） */ .lt-source-badge{display:inline-block;border-radius:7px;padding:1px 8px;font-size:12px; font-weight:600;white-space:nowrap} .lt-source-badge.lt-daily{background:var(--down-bg);color:var(--down)} .lt-source-badge.lt-quarterly{background:var(--warn-bg);color:var(--warn-ink)} .lt-source-tag{display:inline-block;background:var(--panel2);color:var(--ink2); border-radius:6px;padding:1px 7px;font-size:12px;margin:1px 3px 1px 0} /* ── 配息分析 ── */ .dv-container{background:var(--panel);border:1px solid var(--line); border-radius:var(--radius);padding:20px;margin:16px 0;box-shadow:var(--shadow)} .dv-h2{margin-top:26px} .dv-h2:first-child{margin-top:0} .dv-loading{text-align:center;padding:44px} .dv-search{width:auto;min-width:210px;flex:0 1 260px} .ctlbar .dv-search{width:auto} /* 頁首快速查找：輸入代號/名稱直達該檔明細。position:relative 是給下拉清單 定位用的 —— 清單絕對定位在輸入框正下方, 才不會把行事曆往下推。 */ .dv-quick{position:relative;margin:14px 0 2px;max-width:560px} .dv-quick-label{display:block;font-size:12.5px;font-weight:700;color:var(--mut); letter-spacing:.3px;margin-bottom:5px} .dv-quick-box{position:relative} .dv-quick-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%); font-size:15px;line-height:1;pointer-events:none;opacity:.75} .dv-quick-input{width:100%;padding-left:40px;font-size:15.5px} .dv-quick-input:disabled{opacity:.6;cursor:progress} /* 清單疊在行事曆之上, 所以 z-index 必須高過 .dv-cal-day 這類一般區塊 */ .dv-quick-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 5px); margin:0;padding:5px;list-style:none;background:var(--panel); border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow); max-height:340px;overflow-y:auto} .dv-quick-item{display:flex;align-items:baseline;gap:9px;padding:8px 10px; border-radius:8px;cursor:pointer;font-size:14px} .dv-quick-item.on,.dv-quick-item:hover{background:var(--brand-weak)} .dv-quick-code{font-weight:700;font-variant-numeric:tabular-nums;min-width:62px} .dv-quick-name{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dv-quick-yield{margin-left:auto;font-weight:700;color:var(--up); font-variant-numeric:tabular-nums;white-space:nowrap} .dv-quick-empty{padding:9px 10px;color:var(--mut);font-size:13.5px;cursor:default} .dv-quick-empty:hover{background:none} /* 行事曆：一天一列，橫向捲動放當天的 ETF */ .dv-calendar{display:flex;flex-direction:column;gap:10px;margin-bottom:6px} .dv-cal-day{background:var(--panel2);border:1px solid var(--line);border-radius:11px; padding:11px 13px} .dv-cal-date{font-weight:800;font-size:14px;color:var(--ink); font-variant-numeric:tabular-nums;cursor:pointer;user-select:none; list-style:none;display:flex;align-items:baseline;gap:4px} .dv-cal-date::-webkit-details-marker{display:none} .dv-cal-date::after{content:"▸";margin-left:2px;color:var(--mut);font-weight:600} .dv-cal-day[open] .dv-cal-date{margin-bottom:9px} .dv-cal-day[open] .dv-cal-date::after{content:"▾"} .dv-cal-date:hover{color:var(--brand)} .dv-cal-wd{font-weight:600;color:var(--mut);font-size:12.5px} .dv-cal-n{margin-left:auto;font-weight:600;color:var(--mut);font-size:12.5px} .dv-stat-col{flex:1 1 150px;min-width:0} .dv-cal-items{display:flex;flex-wrap:wrap;gap:7px} .dv-cal-item{display:inline-flex;align-items:baseline;gap:7px;background:var(--panel); border:1px solid var(--line);border-radius:9px;padding:5px 10px;cursor:pointer; font-size:13px} .dv-cal-item:hover{border-color:var(--brand)} .dv-cal-code{font-weight:700;font-variant-numeric:tabular-nums} .dv-cal-name{color:var(--ink2)} .dv-cal-amt{font-weight:700;color:var(--up);font-variant-numeric:tabular-nums} /* 尚未公告金額的那幾檔：日期已定、金額未定，別讓它看起來像配 0 元 */ .dv-cal-item.dv-pending .dv-cal-amt{color:var(--mut);font-weight:600} /* 點列展開明細的載入中狀態：慢網路下給回饋，避免使用者反覆點 */ .dv-loading{opacity:.55;pointer-events:none;cursor:progress} .dv-table{font-size:14px} .dv-table tbody tr{cursor:pointer} .dv-table .dv-code{font-weight:700;font-variant-numeric:tabular-nums} .dv-table .dv-yield{font-weight:700;color:var(--up)} .dv-table td.text-end{font-variant-numeric:tabular-nums} .dv-table thead th[data-sort]{cursor:pointer;user-select:none} .dv-table thead th[data-sort]:hover{color:var(--ink)} .dv-table thead th.dv-sorted{color:var(--brand)} .dv-table thead th.dv-sorted[data-dir="desc"]::after{content:" ▾"} .dv-table thead th.dv-sorted[data-dir="asc"]::after{content:" ▴"} .dv-th-sub{font-weight:600;font-size:11px;color:var(--mut)} .dv-badge{display:inline-block;border-radius:7px;padding:1px 8px;font-size:12px; font-weight:600;white-space:nowrap} .dv-badge.dv-filled{background:var(--down-bg);color:var(--down)} .dv-badge.dv-open{background:var(--warn-bg);color:var(--warn-ink)} .dv-notes ul{margin:6px 0 0;padding-left:18px} .dv-notes li{margin-bottom:3px} /* 單檔明細：自製 modal（Bootstrap 的 JS 早就拿掉了） */ .dv-modal{position:fixed;inset:0;background:rgba(15,30,51,.45);z-index:50; display:flex;align-items:flex-start;justify-content:center;padding:24px 16px; overflow-y:auto} .dv-modal-box{background:var(--panel);border-radius:var(--radius);width:100%; max-width:860px;box-shadow:var(--shadow-lg);margin:auto} .dv-modal-head{display:flex;align-items:flex-start;justify-content:space-between; gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)} .dv-modal-title{font-size:17px;font-weight:800} .dv-modal-body{padding:16px 18px 20px} .dv-chart-wrap{background:var(--panel2);border:1px solid var(--line); border-radius:11px;padding:8px} #dvChart{width:100% !important} @media(max-width:768px){ .dv-container{padding:15px} .lookthrough-container{padding:15px} .lt-row .lt-value{flex-basis:100%} .col-6{flex:1 1 100%} } @media(max-width:640px){ body{font-size:14.5px} h1{font-size:21px} .main-container,.period-selector,.container-fluid{padding-left:12px;padding-right:12px} .brand{padding:12px 14px 8px;font-size:16px} #treemap{height:560px !important} } /* 配息組成: 有動用收益平準金的格子標紅 —— 這欄的重點就是「有沒有」， 而不是數值大小，所以用底色而不是漸層。 */ .dv-table td.dv-warn { color: #c62828; font-weight: 600; background: rgba(198, 40, 40, 0.06); } /* ── 存股試算 ── */ .sv-container{background:var(--panel);border:1px solid var(--line); border-radius:var(--radius);padding:20px;margin:16px 0;box-shadow:var(--shadow)} .sv-h3{font-size:16px;font-weight:700;margin:26px 0 8px} /* 參數列：欄位數量多（8 個），用 grid 讓它在窄螢幕自己折行，而不是擠成 一列橫捲 —— 這些是「填完才有結果」的必填項，不能藏在捲軸外面。 */ .sv-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius); padding:16px} .sv-form-tight{margin-bottom:6px} .sv-field{min-width:0} .sv-field-wide{grid-column:span 2} .sv-field-full{grid-column:1 / -1} .sv-field label{display:block;font-size:12.5px;font-weight:700;color:var(--mut); margin-bottom:5px} .sv-field select,.sv-field input{width:100%} /* 兩個勾選框共用一格，label 要回到一般字重才不會看起來像欄位標題 */ .sv-field-check{display:flex;flex-direction:column;justify-content:center;gap:6px} .sv-field-check label{font-weight:600;color:var(--ink2);font-size:13.5px;margin:0; display:flex;align-items:center;gap:6px} .sv-field-check input{width:auto} .sv-note{margin:10px 2px 0} /* 勾選框底下的一行說明。比 label 小、比 label 淡，讀起來是註解不是欄位。 */ .sv-hint{font-size:11.5px;color:var(--mut);line-height:1.55;margin-top:2px} /* 組合方格：取代