/* 最終更新: 261028 / M-ARK専用配色。共通仕様の原本は変更しない。 */ :root{--mark-brand:#8e3045;--mark-brand-hover:#732539;--mark-brand-soft:#f7eaee;--mark-brand-bg:#faf7f8;--mark-ink:#392b32;--mark-muted:#796c74;--mark-border:#e8dce1} body{background:var(--mark-brand-bg)} #mark-preview{overflow:clip} #mark-preview .shell{align-items:start;grid-template-columns:190px minmax(0,1fr)} #mark-preview .shell>main{grid-column:2} #mark-preview aside{position:fixed;top:17px;bottom:16px;left:17px;width:190px;height:auto;overflow-y:auto;overscroll-behavior:contain;z-index:50;border-radius:11px 0 0 11px} #mark-preview.sidebar-collapsed aside{width:68px} @media print{#mark-preview aside{position:static;height:auto}#mark-preview .shell>main{grid-column:1/-1}} #mark-preview{background:var(--mark-brand-bg);color:var(--mark-ink);border-color:var(--mark-border)} #mark-preview aside{background:var(--mark-brand);color:#fff} #mark-preview .brand{display:flex;align-items:center;gap:10px;padding:0 8px;letter-spacing:2px} #mark-preview .brand img{width:44px;height:40px;object-fit:contain;flex-shrink:0} #mark-preview .tag{color:#f2dce3} #mark-preview nav button.active{background:#fff;color:var(--mark-brand)} #mark-preview nav button:hover{background:#ffffff20} #mark-preview nav button.active:hover{background:#f7eaee} #mark-preview .primary{background:var(--mark-brand);color:#fff} #mark-preview .primary:hover:not(:disabled){background:var(--mark-brand-hover)} #mark-preview .secondary{border-color:#d8bac4;color:var(--mark-brand)} #mark-preview .secondary:hover:not(:disabled){background:var(--mark-brand-soft)} #mark-preview .fill{background:var(--mark-brand)} #mark-preview .track{background:#f0e7eb} #mark-preview .notice{background:var(--mark-brand-soft);color:#783247} #mark-preview .muted,#mark-preview th,#mark-preview footer{color:var(--mark-muted)} #mark-preview th{background:#fcf9fa} #mark-preview .panel,#mark-preview td,#mark-preview th{border-color:var(--mark-border)} #mark-preview input{color:var(--mark-ink);border-color:#d8bac4;accent-color:var(--mark-brand)} #mark-preview input:focus-visible,#mark-preview button:focus-visible{outline:2px solid var(--mark-brand);outline-offset:3px} #mark-preview .company-logo{display:block;width:45px;height:40px;object-fit:contain} #mark-preview footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap} @media print{#mark-preview aside,#mark-preview .company-link{display:none}} #mark-preview .work-timeline{margin:22px 0} #mark-preview .work-timeline-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:14px} #mark-preview .work-timeline-labels,#mark-preview .work-timeline-track{display:grid;grid-template-columns:210fr 60fr 240fr} #mark-preview .work-timeline-labels{font-size:12px;gap:6px;margin-bottom:8px} #mark-preview .work-timeline-labels span:nth-child(2){text-align:center} #mark-preview .work-timeline-labels span:last-child{text-align:right} #mark-preview .work-timeline-track{height:30px;overflow:hidden;border-radius:6px;gap:3px} #mark-preview .work-segment{background:#ead3db;position:relative;overflow:hidden} #mark-preview .work-elapsed{height:100%;width:0;background:var(--mark-brand)} #mark-preview .work-lunch{background:repeating-linear-gradient(135deg,#f4e7c7 0px,#f4e7c7 5px,#fbf4e4 5px,#fbf4e4 10px)} #mark-preview .work-lunch .work-elapsed{background:#b28a37} #mark-preview .work-timeline-axis{position:relative;height:32px;margin-top:7px;font-size:11px;color:var(--mark-muted)} #mark-preview .work-timeline-axis span{position:absolute;white-space:nowrap} #mark-preview .work-timeline-axis span:first-child{left:0} #mark-preview .work-timeline-axis span:nth-child(2){left:41.176%;transform:translateX(-100%)} #mark-preview .work-timeline-axis span:nth-child(3){left:52.941%} #mark-preview .work-timeline-axis span:last-child{right:0} @media(max-width:480px){#mark-preview .work-timeline-labels{grid-template-columns:1fr;font-size:12px;gap:2px}#mark-preview .work-timeline-labels span:nth-child(2),#mark-preview .work-timeline-labels span:last-child{text-align:left}#mark-preview .work-timeline-axis span:nth-child(2),#mark-preview .work-timeline-axis span:nth-child(3){display:none}} #mark-preview .attendance-offline{background:#f0f1f2;color:#50565c;border-color:#d9dde0} #mark-preview .attendance-offline .muted{color:#686f76} #mark-preview .attendance-offline .badge{background:#e1e4e7;color:#50575e} #mark-preview .attendance-offline .notice{background:#e6e8ea;color:#50575e} #mark-preview .attendance-offline .work-segment{background:#dce0e3} #mark-preview .attendance-offline .work-lunch{background:repeating-linear-gradient(135deg,#d8dadd 0px,#d8dadd 5px,#eceeef 5px,#eceeef 10px)} #mark-preview .attendance-offline .work-timeline-axis{color:#686f76} #mark-preview .attendance-offline #attendance-in:not(:disabled){background:var(--mark-brand);color:#fff;box-shadow:none} #mark-preview .attendance-offline #attendance-in:hover:not(:disabled){background:var(--mark-brand-hover)} #mark-preview .attendance-offline .secondary{background:#e5e7e9;color:#616970;border-color:#cbd0d5} #mark-preview #mark-dashboard>.panel{position:relative;isolation:isolate;transition:background-color .65s ease,color .65s ease,border-color .65s ease} #mark-preview #attendance-in,#mark-preview #attendance-out{position:relative;overflow:hidden;box-shadow:0 4px 0 #501a2b,0 7px 14px #2c152b25;transition:transform .12s ease,box-shadow .12s ease} #mark-preview #attendance-in:active:not(:disabled),#mark-preview #attendance-out:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 #501a2b,0 2px 5px #2c152b30} #mark-preview #attendance-in:disabled,#mark-preview #attendance-out:disabled{box-shadow:none} #mark-preview .punch-enter{animation:mark-panel-impact .85s cubic-bezier(.16,1,.3,1)} #mark-preview .punch-leave{animation:mark-panel-shutdown .85s cubic-bezier(.16,1,.3,1)} #mark-preview .punch-enter::after,#mark-preview .punch-leave::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at 22% 25%,#bd6b8550 0%,#8e304518 35%,transparent 70%);animation:mark-panel-wave 1s ease-out both} #mark-preview .punch-enter #attendance-in::after,#mark-preview .punch-leave #attendance-out::after{content:"";position:absolute;inset:-100%;pointer-events:none;background:radial-gradient(circle,#fff9 0%,#fff3 25%,transparent 50%);animation:mark-button-wave .8s ease-out both} #mark-preview .punch-enter #attendance-state,#mark-preview .punch-leave #attendance-state{animation:mark-state-settle .7s ease-out} @keyframes mark-panel-impact{0%{transform:translateY(3px) scale(.995);box-shadow:inset 0 0 0 2px #c77a91,0 0 0 0 #8e304548}28%{transform:translateY(0) scale(1);box-shadow:inset 0 0 0 1px #b45572,0 0 0 9px #8e304514}100%{transform:none;box-shadow:inset 0 0 0 0 transparent,0 0 0 18px transparent}} @keyframes mark-panel-shutdown{0%{transform:translateY(3px);box-shadow:inset 0 0 35px #bd6b8560}100%{transform:none;box-shadow:inset 0 0 0 transparent}} @keyframes mark-panel-wave{0%{opacity:0;transform:scale(.95)}18%{opacity:1}100%{opacity:0;transform:scale(1)}} @keyframes mark-button-wave{0%{opacity:.9;transform:scale(.15)}100%{opacity:0;transform:scale(1)}} @keyframes mark-state-settle{0%{opacity:.4;transform:translateY(3px)}100%{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){#mark-preview #mark-dashboard>.panel,#mark-preview #attendance-in,#mark-preview #attendance-out{transition:none}#mark-preview .punch-enter,#mark-preview .punch-leave,#mark-preview .punch-enter::after,#mark-preview .punch-leave::after,#mark-preview .punch-enter #attendance-in::after,#mark-preview .punch-leave #attendance-out::after,#mark-preview .punch-enter #attendance-state,#mark-preview .punch-leave #attendance-state{animation:none}} #mark-preview .punch-spectacle{display:none;position:absolute;inset:0;z-index:4;overflow:hidden;border-radius:inherit;pointer-events:none;align-items:center;justify-content:center;background:radial-gradient(ellipse,#32101dd9,transparent 85%)} #mark-preview .punch-enter .punch-spectacle,#mark-preview .punch-leave .punch-spectacle{display:flex;animation:mark-show 1.9s both} #mark-preview .punch-stamp{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 42px;color:#fff;border:2px solid #f5bfd1;background:#77253ce6;box-shadow:0 0 35px #e887aa90,inset 0 0 28px #f3a3bf30;transform:rotate(-6deg);animation:mark-stamp 1.9s both;max-width:90%} #mark-preview .punch-stamp span{font-size:48px;font-weight:800;letter-spacing:12px;text-shadow:0 0 20px #f9b9d0} #mark-preview .punch-stamp small{font-size:14px;letter-spacing:3px} #mark-preview .attendance-greeting{display:block;font-size:24px;color:var(--mark-brand);margin:12px 0 4px} #mark-preview .attendance-offline .attendance-greeting{color:#606870} #mark-preview .attendance-greeting-toast{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;background:var(--mark-brand-soft);color:var(--mark-brand);border-radius:8px;font-size:18px;font-weight:600;animation:mark-greeting-arrive .22s ease-out} #mark-preview .attendance-offline .attendance-greeting-toast{background:#e1e4e7;color:#50575e} @keyframes mark-greeting-arrive{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){#mark-preview .attendance-greeting-toast{animation:none}} #mark-preview #attendance-lunch{display:inline-flex;align-items:center;justify-content:center;gap:10px} #mark-preview .rest-cup{position:relative;display:inline-block;width:17px;height:14px;border:2px solid currentColor;border-top-width:2px;border-radius:2px 2px 6px 6px;flex-shrink:0} #mark-preview .rest-cup::after{content:"";position:absolute;right:-7px;top:1px;width:5px;height:7px;border:2px solid currentColor;border-left:0;border-radius:0 5px 5px 0} #mark-preview .rest-cup::before{content:"";position:absolute;left:4px;top:-9px;width:5px;height:5px;border-left:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:skewX(-12deg);opacity:.7} #mark-preview .work-timeline-labels{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px} #mark-preview .work-timeline-labels span{white-space:nowrap} @media(max-width:480px){#mark-preview .work-timeline-labels{display:flex;flex-wrap:wrap;gap:4px 14px}} #mark-preview .attendance-bar-segment{height:100%;flex-shrink:0;background:#ead3db} #mark-preview .attendance-timeline-position{position:relative} #mark-preview .attendance-time-ticks{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:6px} #mark-preview .attendance-time-ticks i{position:absolute;bottom:0;height:7px;width:1px;background:#754451;opacity:.6} #mark-preview .attendance-time-ticks i.is-hour{height:13px;opacity:.85} #mark-preview .attendance-now-marker{position:absolute;top:-5px;bottom:-5px;width:3px;transform:translateX(-50%);background:#b31835;box-shadow:0 0 0 1px #fff;z-index:2;pointer-events:none} #mark-preview .attendance-now-marker::before{content:"";position:absolute;bottom:-7px;left:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid #b31835} #mark-preview .attendance-now-marker span{position:absolute;top:calc(100% + 22px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff3f5;color:#b31835;border:1px solid #b31835;font-size:12px;font-weight:700;line-height:18px;padding:1px 6px;border-radius:4px} #mark-preview .attendance-now-marker[data-edge="start"] span{left:0;transform:none} #mark-preview .attendance-now-marker[data-edge="end"] span{left:auto;right:0;transform:none} #mark-preview .attendance-bar-segment.is-worked{background:#ac687e} #mark-preview .attendance-bar-segment.is-outside{background:#efa4ab} #mark-preview .attendance-bar-segment.is-outside.is-overtime{background:#d43c48} #mark-preview .attendance-bar-segment.is-lunch{background:repeating-linear-gradient(135deg,#f1e2b7 0px,#f1e2b7 5px,#fffaf0 5px,#fffaf0 10px)} #mark-preview #attendance-axis{height:54px} #mark-preview #attendance-axis span{display:block} #mark-preview .attendance-clock-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:8px 0} #mark-preview .attendance-clock-row .value{margin:0} #mark-preview .work-timeline-labels{position:relative;display:flex;justify-content:space-between;min-height:22px} #mark-preview .work-timeline-labels span:nth-child(2){position:absolute;top:0;transform:translateX(-50%);background:var(--mark-brand-bg);padding:0 4px} #mark-preview .attendance-offline .work-timeline-labels span:nth-child(2){background:#f0f1f2} #mark-preview .punch-edit-button{min-height:46px;padding:10px 18px;background:#faf3e7;color:#78522c;border:1px dashed #b58b58;border-radius:5px 15px 5px 15px;box-shadow:3px 3px 0 #d9c5a6;transform:rotate(0);transition:transform .18s ease,background-color .18s ease} #mark-preview .punch-edit-button:hover{transform:rotate(-2deg);background:#fff0d7} #mark-preview .punch-edit-button span{font-size:21px;margin-right:5px} #mark-preview .attendance-edit-dialog{width:min(480px,calc(100% - 32px));padding:24px;border:1px solid var(--mark-border);border-radius:14px;color:var(--mark-ink);background:#fff;box-shadow:0 20px 80px #24132255} #mark-preview .attendance-edit-dialog::backdrop{background:#20172188} #mark-preview .attendance-edit-dialog label{display:grid;gap:6px;margin-top:14px} #mark-preview .attendance-edit-dialog input,#mark-preview .attendance-edit-dialog textarea{width:100%;padding:10px;border:1px solid #d8bac4;border-radius:6px;font:inherit;box-sizing:border-box} #mark-preview #edit-error{color:#b02538} #mark-preview #edit-error:empty{display:none} #mark-preview #edit-error:not(:empty){padding:10px 12px;border:1px solid #b02538;border-radius:6px;background:#fff3f4} #mark-preview .attendance-edit-dialog{max-height:calc(100dvh - 32px);overflow-y:auto} #mark-preview .attendance-edit-datetime{border:0;padding:0;margin:16px 0 0;min-width:0} #mark-preview .attendance-edit-datetime legend{font-weight:600;padding:0} #mark-preview .attendance-edit-datetime>div{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px} #mark-preview .attendance-edit-datetime label{margin-top:4px;font-size:12px} #mark-preview .attendance-edit-datetime input{min-width:0;min-height:44px} #mark-preview .attendance-edit-dialog input[aria-invalid=true]{border:2px solid #b02538;background:#fff3f4} #mark-preview .attendance-edit-dialog .attendance-edit-clear{margin-top:5px;padding:3px 8px;font-size:12px} #mark-preview .attendance-edit-clock-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} #mark-preview .attendance-edit-target{font-size:17px;font-weight:600;margin:10px 0} #mark-preview .attendance-edit-dialog select{width:100%;padding:10px;border:1px solid var(--mark-border);border-radius:6px;background:#fff;color:inherit;font:inherit} #mark-preview .attendance-edit-clock-options{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0} #mark-preview .attendance-edit-clock-options label{display:flex;align-items:center;gap:5px;margin:0;font-size:12px} #mark-preview .attendance-edit-clock-options input[type=checkbox]{width:16px;height:16px;padding:0} #mark-preview .attendance-edit-dialog input[readonly]{background:#f5f1f3} #mark-preview #attendance-out.attendance-out-active{background:var(--mark-brand);border-color:var(--mark-brand);color:#fff;font-weight:700;box-shadow:0 4px 0 #51182d} #mark-preview #attendance-out.attendance-out-active:hover{background:#72243d;border-color:#72243d} #mark-preview #attendance-out.attendance-out-active:active{box-shadow:none;transform:translateY(3px)} #mark-preview .master-half-info{margin:18px 0 0;padding:12px;border:1px solid var(--mark-border);border-radius:6px} #mark-preview .master-half-info legend{font-weight:600;font-size:13px} #mark-preview .master-half-info p{margin:0} #mark-preview .attendance-month-table{min-width:650px;font-variant-numeric:tabular-nums} #mark-preview .attendance-month-table caption{text-align:left;padding-bottom:14px} #mark-preview .attendance-month-table .attendance-weekend{background:#faf7f8} #mark-preview .attendance-month-table .attendance-today{background:#f7eaee} #mark-preview .attendance-month-table tfoot{font-weight:600;background:#f7eaee} #mark-preview aside{display:flex;flex-direction:column} #mark-preview .development-clear-area{margin-top:auto;padding:30px 4px 0} #mark-preview .development-clear-button{width:100%;padding:11px 8px;border:1px dashed #edbcc9;border-radius:6px;background:transparent;color:#ffe5ed;font-size:12px} #mark-preview .development-clear-button:hover{background:#ffffff18} #mark-preview .brand-home{display:flex;align-items:center;gap:10px;border:0;padding:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;border-radius:4px} #mark-preview .brand-home:hover{opacity:.85} #mark-preview .brand-home:focus-visible{outline:2px solid #fff;outline-offset:5px} #mark-preview .projects-table{table-layout:fixed;min-width:0} #mark-preview .projects-table th:not(:last-child),#mark-preview .projects-table td:not(:last-child){border-right:1px solid var(--mark-border)} #mark-preview .projects-table thead th{position:relative;padding-right:14px;overflow-wrap:anywhere} #mark-preview .project-column-resize{position:absolute;right:-4px;top:0;bottom:0;width:9px;z-index:2;cursor:col-resize;touch-action:none} #mark-preview .project-column-resize::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:transparent} #mark-preview .project-column-resize:hover::after,#mark-preview .project-column-resize:focus-visible::after{width:2px;background:var(--mark-brand)} #mark-preview.is-resizing-project-columns,#mark-preview.is-resizing-project-columns *{cursor:col-resize!important;user-select:none} #mark-preview .sidebar-account{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 18px;padding:9px 12px;border:1px solid #ffffff55;border-radius:7px;background:transparent;color:inherit;font:inherit;text-align:left;overflow-wrap:anywhere} #mark-preview .sidebar-account:hover{background:#ffffff18} #mark-preview .sidebar-account:focus-visible{outline:2px solid #fff;outline-offset:3px} #mark-preview .sidebar-account .sidebar-label{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0} #mark-preview .sidebar-account small{font-size:11px;opacity:.85;white-space:nowrap} #mark-preview .sidebar-account strong{font-size:14px;font-weight:600} #mark-preview .sidebar-login-button{width:100%;border:0;background:transparent;color:inherit;padding:4px 0;font:inherit;text-align:center;font-weight:600;border-radius:4px} #mark-preview .sidebar-login-button:hover{background:#ffffff22} #mark-preview .sidebar-login-button:focus-visible{outline:2px solid #fff;outline-offset:3px} #mark-preview.sidebar-collapsed .sidebar-login-button{font-size:11px;word-break:keep-all} #mark-preview.sidebar-collapsed .sidebar-account{justify-content:center;padding:10px 0} #mark-preview.sidebar-collapsed .sidebar-account .sidebar-label{display:flex;justify-content:center;width:100%} #mark-preview.sidebar-collapsed .sidebar-account strong{font-size:11px;line-height:1.4;text-align:center;overflow-wrap:anywhere} #mark-preview.sidebar-collapsed .sidebar-account small{display:none} #mark-preview #mark-projects{padding-bottom:28px} #mark-preview .project-fixed-scroll{position:fixed;bottom:0;height:24px;overflow-x:scroll;overflow-y:hidden;background:#fff;border:1px solid #d8bac4;z-index:100;scrollbar-color:#a17383 #f7f2f4} #mark-preview .project-fixed-scroll>div{height:1px} @media print{#mark-preview .project-fixed-scroll{display:none}} #mark-preview .project-sort{border:0;background:transparent;color:inherit;font:inherit;text-align:left;padding:0;width:100%} #mark-preview .project-sort:hover{color:var(--mark-ink);text-decoration:underline} #mark-preview .project-sort:focus-visible{outline:2px solid currentColor;outline-offset:4px} #mark-preview .project-filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-bottom:16px} #mark-preview .project-filters label{display:grid;gap:4px;flex:1 1 160px;min-width:0;font-size:12px} #mark-preview .project-filters .project-search{flex:2 1 280px} #mark-preview .project-filters input,#mark-preview .project-filters select{width:100%;min-width:0;padding:8px;border:1px solid #decbd0;border-radius:5px;background:#fff;color:inherit;font:inherit} #mark-preview .project-filters input.is-filter-changed,#mark-preview .project-filters select.is-filter-changed{background:#fff1cf;border-color:#bd8526} #mark-preview .project-filter-hint{flex-basis:100%;margin:0} #mark-preview .project-month-choice{flex:1 1 280px;min-width:0;margin:0;padding:0;border:0;font-size:12px} #mark-preview .project-month-choice legend{padding:0;margin-bottom:4px} #mark-preview .project-month-choice>div{display:flex;gap:6px;align-items:center} #mark-preview .project-month-choice select{flex:1;min-width:85px} #mark-preview .project-month-choice button{flex:none;white-space:nowrap} #mark-preview .projects-table .project-row-number{font-variant-numeric:tabular-nums;color:var(--mark-ink)} #mark-preview .projects-table td{overflow-wrap:anywhere} #mark-preview .project-dialog{width:min(620px,calc(100% - 32px));max-height:90vh;overflow:auto;padding:26px;border:1px solid var(--mark-border);border-radius:14px;background:#fff;color:var(--mark-ink);box-shadow:0 20px 80px #24132255} #mark-preview .project-dialog::backdrop{background:#20172188} #mark-preview .project-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px} #mark-preview .project-dialog-header h2{margin:0;font-size:24px;font-weight:700;line-height:1.4} #mark-preview .project-dialog label{display:grid;gap:7px;margin-top:16px;font-weight:500} #mark-preview .project-dialog input,#mark-preview .project-dialog textarea{width:100%;padding:10px 12px;border:1px solid #d8bac4;border-radius:6px;font:inherit;color:inherit;background:#fff} #mark-preview .project-form-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px} #mark-preview .project-name-status{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:16px;align-items:end} @media(max-width:500px){#mark-preview .project-name-status{grid-template-columns:minmax(0,1fr);gap:0}} #mark-preview #project-form-error{color:#b02538} #mark-preview #project-feedback{margin-bottom:14px;overflow-wrap:anywhere} #mark-preview .management-nav{margin-top:14px;border-top:1px solid #ffffff30;padding-top:12px} #mark-preview .management-nav summary{padding:8px 12px;cursor:pointer;font-weight:600} #mark-preview .management-nav button{display:block;width:100%;padding-left:24px} #mark-preview .project-dialog select{width:100%;min-height:44px;padding:10px;border:1px solid #d8bac4;border-radius:6px;font:inherit;color:inherit;background:#fff} #mark-preview .project-row-actions{display:flex;gap:8px;flex-wrap:wrap;min-width:165px} #mark-preview .project-archive{margin-top:18px} #mark-preview .project-archive summary{cursor:pointer;padding:6px 0} #mark-preview .project-member-fieldset{border:1px solid var(--mark-border);border-radius:7px;margin:20px 0 0;padding:12px} #mark-preview .project-dialog .project-member-choice{display:flex;align-items:center;gap:10px;margin:8px 0;font-weight:400} #mark-preview .project-dialog .project-member-choice input{width:18px;height:18px;flex-shrink:0;accent-color:var(--mark-brand)} #mark-preview .master-table{min-width:500px} #mark-preview .master-table td{overflow-wrap:anywhere} #mark-preview #mark-members .master-table th:not(:last-child),#mark-preview #mark-members .master-table td:not(:last-child){border-right:1px solid var(--mark-border)} #mark-preview .member-admin-badge{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:4px;background:var(--mark-brand);color:#fff;font-size:11px;line-height:1.4;white-space:nowrap;vertical-align:middle} #mark-preview #mark-members .master-table td.member-irregular-cell{background:#fff1c9;color:#754900} #mark-preview #mark-clients{padding-bottom:28px} #mark-preview .clients-list-count{margin:12px 0} #mark-preview .clients-filters{margin-top:0} #mark-preview .clients-table{table-layout:fixed;min-width:0} #mark-preview .clients-table th:not(:last-child),#mark-preview .clients-table td:not(:last-child){border-right:1px solid var(--mark-border)} #mark-preview .clients-table thead th{position:relative;padding-right:14px;overflow-wrap:anywhere} #mark-preview .clients-table .master-row-number{font-variant-numeric:tabular-nums} #mark-preview .clients-table .client-list-logo-cell{text-align:center;vertical-align:middle} #mark-preview .client-list-logo{display:block;width:32px;height:32px;object-fit:contain;margin:0 auto} #mark-preview .client-project-count{position:relative;display:block;min-width:55px;padding:5px 7px;isolation:isolate} #mark-preview .client-project-count-bar{position:absolute;inset:0 auto 0 0;background:#d2e6f6;border-radius:3px;z-index:-1} #mark-preview .client-project-count-label{position:relative;white-space:nowrap} #mark-preview .is-inactive .client-project-count-bar{background:#e0dce4} #mark-preview .clients-table tr.is-inactive td{background:#f7f3f5;color:var(--mark-muted)} #mark-preview .clients-table-scroll{scrollbar-width:none} #mark-preview .clients-table-scroll::-webkit-scrollbar{display:none} #mark-preview #mark-members{margin-top:16px} #mark-preview #members-feedback:empty{display:none} #mark-preview main>header #members-create,#mark-preview main>header #clients-create{padding:7px 12px;white-space:nowrap} #mark-preview #members-status-filter{display:block;margin-top:4px;width:125px;max-width:100%;padding:6px;border:1px solid #d8bac4;border-radius:4px;background:#fff;color:inherit;font:inherit} #mark-preview #master-error{color:#b02538} #mark-preview #gantt-filter,#mark-preview #gantt-filter-kind{padding:8px 12px;max-width:100%;border:1px solid #d8bac4;border-radius:6px;font:inherit;background:#fff;color:inherit} #mark-preview .gantt-table{table-layout:fixed;border-collapse:collapse} #mark-preview .gantt-table caption{text-align:left;padding:0 0 12px} #mark-preview .gantt-task-column{width:250px;overflow-wrap:anywhere} #mark-preview .gantt-table .gantt-day{width:34px;font-size:11px;padding:10px 2px;text-align:center} #mark-preview .gantt-weekend{background:#f3e9ee} #mark-preview .gantt-current{color:var(--mark-brand);box-shadow:inset 0 -3px var(--mark-brand)} #mark-preview .gantt-table .gantt-lane-cell{padding:0} #mark-preview .gantt-lane{height:60px;position:relative;background-image:linear-gradient(to right,#e7dce2 1px,transparent 1px)} #mark-preview .gantt-bar{position:absolute;top:15px;height:30px;padding:0;border:0;border-radius:5px;background:#d8b0bf;overflow:hidden;min-width:3px;color:#3b1824} #mark-preview .gantt-bar-progress{position:absolute;inset:0 auto 0 0;background:#9c4963} #mark-preview .gantt-bar-text{position:relative;background:#fffdf0e6;border-radius:3px;padding:0 3px;font-size:11px;white-space:nowrap} #mark-preview .gantt-delayed{background:#e7a0a5} #mark-preview .gantt-complete{background:#71ac8c} #mark-preview .gantt-delayed .gantt-bar-progress{background:#ba3544} #mark-preview .gantt-task-link{border:0;background:none;color:var(--mark-brand);font:inherit;text-align:left;padding:2px 0;text-decoration:underline} #mark-preview #gantt-error{color:#b02538} #mark-preview .gantt-view-switch{display:flex;gap:4px;margin-right:14px} #mark-preview .calendar-saturday{background:#e9e9ec} #mark-preview .calendar-sunday{background:#e9e9ec} #mark-preview .calendar-holiday{background:#e9e9ec} #mark-preview .gantt-calendar-band{position:absolute;top:0;bottom:0;z-index:0} #mark-preview .gantt-calendar-header{position:relative} #mark-preview .gantt-calendar-heading{position:relative;z-index:1} #mark-preview .gantt-bar{z-index:1} #mark-preview .gantt-calendar-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:12px} #mark-preview .gantt-calendar-legend>span{display:inline-flex;align-items:center;gap:6px} #mark-preview .gantt-calendar-legend i{display:inline-block;width:16px;height:16px;border-radius:3px} #mark-preview .gantt-table .gantt-calendar-header{border-left:1px solid #b9afb5;border-right:1px solid #b9afb5} #mark-preview .gantt-period-divider{position:absolute;top:0;bottom:0;width:1px;background:#b9afb5;z-index:1;pointer-events:none} #mark-preview .gantt-period-divider:last-child{left:auto!important;right:0} #mark-preview .gantt-bar{z-index:2} #mark-preview .gantt-table .gantt-project-column{width:170px;vertical-align:top;overflow-wrap:anywhere;background:#f8f4f6;border-right:1px solid #d2c7cd;padding-top:18px} #mark-preview .gantt-table .gantt-task-column{width:150px} #mark-preview .gantt-project-start>th,#mark-preview .gantt-project-start>td{border-top:2px solid #c9bcc3} #mark-preview .gantt-lane{height:38px} #mark-preview .gantt-bar{top:8px;height:22px} #mark-preview .gantt-table .gantt-task-column{padding:5px 8px} #mark-preview .gantt-table .gantt-project-column{padding:8px;vertical-align:top} #mark-preview .gantt-project-name{font-weight:600;margin-bottom:4px} #mark-preview .gantt-project-meta{font-size:11px;font-weight:400;color:var(--mark-muted);line-height:1.5;overflow-wrap:anywhere} #mark-preview .sidebar-toggle{border:1px solid #ffffff45;background:#ffffff10;color:#fff;border-radius:6px;padding:7px 4px;margin-bottom:20px;font-size:11px;min-height:32px} #mark-preview .sidebar-toggle:hover{background:#ffffff25} #mark-preview .sidebar-icon{display:inline-block;min-width:20px;text-align:center;margin-right:7px} #mark-preview.sidebar-collapsed .shell{grid-template-columns:68px minmax(0,1fr)} #mark-preview.sidebar-collapsed aside{padding:16px 8px} #mark-preview.sidebar-collapsed .sidebar-label,#mark-preview.sidebar-collapsed aside .tag{display:none} #mark-preview.sidebar-collapsed .brand,#mark-preview.sidebar-collapsed .brand-home{font-size:0;padding:0;justify-content:center;gap:0;letter-spacing:0} #mark-preview.sidebar-collapsed .brand{margin-bottom:20px} #mark-preview.sidebar-collapsed .brand img{width:38px;height:36px} #mark-preview.sidebar-collapsed nav button{display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;padding:10px 4px} #mark-preview.sidebar-collapsed .sidebar-icon{margin:0;font-size:16px} #mark-preview.sidebar-collapsed .sidebar-toggle{font-size:22px;padding:0} #mark-preview.sidebar-collapsed .management-nav summary{padding:8px 0;text-align:center;font-size:11px} #mark-preview.sidebar-collapsed .development-clear-area{padding:24px 0 0} #mark-preview.sidebar-collapsed .development-clear-button{font-size:22px;padding:5px} @media(max-width:700px){#mark-preview.sidebar-collapsed nav{display:grid;overflow:visible}#mark-preview.sidebar-collapsed main{padding:14px}#mark-preview.sidebar-collapsed .shell{grid-template-columns:68px minmax(0,1fr)}} #mark-preview .sidebar-icon.sidebar-person,#mark-preview .sidebar-icon.sidebar-building{position:relative;width:20px;height:20px;vertical-align:middle;flex-shrink:0} #mark-preview .sidebar-person::before{content:"";position:absolute;top:1px;left:7px;width:6px;height:6px;border:1.6px solid currentColor;border-radius:50%;box-sizing:border-box} #mark-preview .sidebar-person::after{content:"";position:absolute;left:3px;bottom:1px;width:14px;height:9px;border:1.6px solid currentColor;border-radius:8px 8px 2px 2px;box-sizing:border-box} #mark-preview .sidebar-building::before{content:"";position:absolute;left:4px;top:2px;width:12px;height:16px;border:1.6px solid currentColor;border-radius:1px;box-sizing:border-box} #mark-preview .sidebar-building::after{content:"";position:absolute;left:7px;top:6px;width:2px;height:2px;background:currentColor;box-shadow:4px 0 currentColor,0 4px currentColor,4px 4px currentColor,2px 8px currentColor} #mark-preview .gantt-past-shade{position:absolute;inset:0 auto 0 0;background:#302a3812;z-index:3;pointer-events:none} #mark-preview .gantt-today-line{position:absolute;top:0;bottom:0;width:2px;background:#a92f51;z-index:4;pointer-events:none} #mark-preview .gantt-today-label{position:absolute;bottom:0;z-index:5;background:#a92f51;color:#fff;padding:1px 4px;border-radius:3px 3px 0 0;font-size:10px;line-height:1.4;white-space:nowrap;pointer-events:none} #mark-preview .gantt-table .gantt-calendar-header{padding-bottom:20px} /* 横スクロールの操作バーは画面下の固定バーに統一する。 */ #mark-preview #gantt-chart{overflow:auto;scrollbar-width:none} #mark-preview #gantt-chart::-webkit-scrollbar{display:none} #mark-preview #gantt-date-scroll{position:fixed;bottom:0;z-index:40;margin:0;overflow-x:scroll;overflow-y:hidden;height:24px;background:#fff;border-top:1px solid #c9bcc3;box-shadow:0 -3px 8px #302a381a} #mark-preview #mark-gantt{padding-bottom:32px} #mark-preview #gantt-date-scroll-width{height:1px} #mark-preview .gantt-table{border-collapse:separate;border-spacing:0} #mark-preview .gantt-table .gantt-project-column{position:sticky;left:0;width:130px;min-width:130px;max-width:130px;z-index:10;padding:6px;background:#f8f4f6} #mark-preview .gantt-table .gantt-task-column{position:sticky;left:130px;width:100px;min-width:100px;max-width:100px;z-index:10;padding:5px 6px;background:#fff;border-right:1px solid #b9afb5;box-shadow:2px 0 3px #302a3808} #mark-preview .gantt-table thead .gantt-project-column,#mark-preview .gantt-table thead .gantt-task-column{z-index:12;background:#f8f4f6} #mark-preview .gantt-project-name{font-size:12px} #mark-preview .gantt-overdue-warning{padding:16px 18px;margin:16px 0;background:#fff0f0;color:#9d1526;border:2px solid #c52238;border-left-width:8px;border-radius:7px;box-shadow:0 3px 12px #b8203020} #mark-preview .gantt-overdue-warning>strong{font-size:16px} #mark-preview .gantt-overdue-warning ul{margin:10px 0 0;padding-left:20px} #mark-preview .gantt-warning-link{padding:4px 0;background:none;border:0;text-align:left;color:#a21427;font:inherit;font-weight:600;text-decoration:underline;overflow-wrap:anywhere} #mark-preview .gantt-table .gantt-task-overdue{background:#ffedef;border-left:3px solid #c52238} #mark-preview .gantt-task-overdue .gantt-task-link{color:#ab1027;font-weight:700} #mark-preview .gantt-overdue-badge{display:block;width:fit-content;margin-top:3px;padding:1px 4px;background:#b51d32;color:white;border-radius:3px;font-size:10px;font-weight:600} #mark-preview .gantt-bar.gantt-delayed{background:repeating-linear-gradient(135deg,#bd1730 0px,#bd1730 7px,#dc3a50 7px,#dc3a50 14px);box-shadow:0 0 0 2px #9c1025,0 0 8px #c3243860;min-width:8px} #mark-preview .gantt-delayed .gantt-bar-text{background:#b21429;color:#fff;font-weight:700} #mark-preview .task-date-field{display:flex;align-items:center;gap:6px} #mark-preview .task-date-field input{min-width:0;flex:1} #mark-preview .task-calendar-dialog{width:min(650px,calc(100% - 24px));max-height:90vh;overflow:auto;border:1px solid #d8bac4;border-radius:12px;padding:22px;color:var(--mark-ink);background:#fff;box-shadow:0 20px 80px #24132255} #mark-preview .task-calendar-dialog::backdrop{background:#20172166} #mark-preview .task-calendar-months{display:grid;grid-template-columns:1fr 1fr;gap:24px} #mark-preview .task-calendar-months h3{text-align:center;font-size:15px;margin:4px 0 14px} #mark-preview .task-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center} #mark-preview .calendar-weekday{font-size:12px;padding:4px 0} #mark-preview .task-calendar-day{border:1px solid transparent;background:#fff;color:inherit;min-height:34px;padding:4px 0;border-radius:5px;font:inherit;font-size:13px} #mark-preview .task-calendar-day:hover{background:#f7eaee} #mark-preview .task-calendar-grid .is-sunday{color:#b4233c} #mark-preview .task-calendar-grid .is-saturday{color:#2d6495} #mark-preview .task-calendar-grid .is-other-month{opacity:.35} #mark-preview .task-calendar-day.is-today{border-color:var(--mark-brand)} #mark-preview .task-calendar-day.is-selected{background:var(--mark-brand);color:white;opacity:1} @media(max-width:480px){#mark-preview .task-calendar-months{grid-template-columns:1fr;gap:20px}} #mark-preview .gantt-project-elapsed{font-size:11px;font-weight:600;color:var(--mark-brand);margin-top:4px} #mark-preview .gantt-milestone{position:absolute;top:4px;height:30px;padding:5px;border:0;background:transparent;transform:translateX(-50%);z-index:5;display:flex;align-items:center;justify-content:center} #mark-preview .gantt-milestone-diamond{display:block;width:15px;height:15px;background:var(--mark-brand);border:2px solid #fff;box-shadow:0 0 0 1px var(--mark-brand);transform:rotate(45deg)} #mark-preview .gantt-milestone.is-complete .gantt-milestone-diamond{background:#3b825a;box-shadow:0 0 0 1px #3b825a} #mark-preview .gantt-milestone.is-overdue .gantt-milestone-diamond{background:#d11735;box-shadow:0 0 0 2px #a41129,0 0 8px #d1173580} #mark-preview .gantt-milestone:hover .gantt-milestone-diamond{transform:rotate(45deg) scale(1.2)} #mark-preview .effort-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} #mark-preview .effort-form label{display:grid;gap:6px} #mark-preview .effort-form input,#mark-preview .effort-form select,#mark-preview #effort-report-project{width:100%;min-width:0;padding:10px;border:1px solid #d8bac4;border-radius:6px;background:#fff;color:inherit;font:inherit} #mark-preview #effort-report-project{width:auto;max-width:100%} #mark-preview .effort-over,#mark-preview .effort-over td{color:#aa1730;background:#fff0f2;font-weight:600} #mark-preview .project-effort-cell{min-width:190px;font-size:12px} #mark-preview #effort-error{color:#b02538} @media(max-width:600px){#mark-preview .effort-form-grid{grid-template-columns:1fr}} #mark-preview .attendance-work-counter{display:flex;flex-direction:column;gap:2px;padding-left:20px;border-left:1px solid #d8bac4;min-height:84px} #mark-preview .attendance-current-counter{flex:0 0 156px;width:156px;min-width:156px} #mark-preview .attendance-work-counter strong{font-family:ui-monospace,Consolas,monospace;font-size:25px;font-variant-numeric:tabular-nums;letter-spacing:1px;white-space:nowrap;color:var(--mark-brand)} #mark-preview .attendance-offline .attendance-work-counter{border-left-color:#cbd0d5} #mark-preview .attendance-offline .attendance-work-counter strong{color:#606870} #mark-preview .attendance-analog-clock{position:relative;width:112px;height:112px;flex-shrink:0;border:2px solid #a17383;border-radius:50%;background:#fff;color:#573c49;box-shadow:inset 0 0 0 4px #f9f3f5} #mark-preview .analog-tick{position:absolute;inset:5px;pointer-events:none} #mark-preview .analog-tick::before{content:"";position:absolute;left:50%;top:0;width:1px;height:4px;background:currentColor} #mark-preview .analog-number{position:absolute;font-size:12px;font-weight:500;line-height:1} #mark-preview .analog-twelve{left:50%;top:11px;transform:translateX(-50%)} #mark-preview .analog-three{right:11px;top:50%;transform:translateY(-50%)} #mark-preview .analog-six{left:50%;bottom:11px;transform:translateX(-50%)} #mark-preview .analog-nine{left:11px;top:50%;transform:translateY(-50%)} #mark-preview .analog-hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:3px;pointer-events:none;background:currentColor} #mark-preview .analog-hour{height:26px;width:4px} #mark-preview .analog-minute{height:37px;width:3px} #mark-preview .analog-second{height:42px;width:1px;background:#bf3b60} #mark-preview .analog-pin{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#bf3b60;transform:translate(-50%,-50%)} #mark-preview .attendance-offline .attendance-analog-clock{background:#f8f9fa;color:#727a82;border-color:#b7bdc3;box-shadow:inset 0 0 0 4px #e8ebed} #mark-preview .analog-tick,#mark-preview .analog-number{z-index:1} #mark-preview .analog-hand{z-index:2} #mark-preview .analog-pin{z-index:3} #mark-preview .attendance-date-calendar{width:90px;min-height:82px;display:flex;flex-direction:column;align-items:center;overflow:hidden;border:1px solid #d8bac4;border-radius:8px;background:#fff;color:#553546;font-size:11px;box-shadow:0 2px 5px #302a3810} #mark-preview .attendance-calendar-month{width:100%;padding:3px 5px;text-align:center;background:var(--mark-brand);color:#fff} #mark-preview .attendance-date-calendar strong{font-size:27px;line-height:1.2;padding-top:3px;font-variant-numeric:tabular-nums} #mark-preview .attendance-date-calendar>span:last-child{padding:0 4px 4px} #mark-preview .attendance-offline .attendance-date-calendar{background:#f8f9fa;color:#606870;border-color:#cbd0d5} #mark-preview .effort-binding{padding:10px 14px;background:#f7f3f5;border-radius:7px;margin:12px 0} #mark-preview .effort-binding summary{cursor:pointer} #mark-preview #mark-time select{max-width:100%;padding:8px;border:1px solid #d8bac4;border-radius:6px;background:#fff;color:inherit;font:inherit} #mark-preview #mark-time .effort-week-toolbar{margin:12px 0 8px} #mark-preview .effort-week-totals{padding:12px 16px;background:var(--mark-brand-soft);border-radius:6px;color:var(--mark-brand);font-weight:600} #mark-preview .effort-timeline-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--mark-muted);margin:14px 0} #mark-preview .effort-legend-work::before,#mark-preview .effort-legend-break::before,#mark-preview .effort-legend-entry::before{content:"";display:inline-block;width:16px;height:10px;margin-right:5px;border-radius:2px;background:#a5c2b7} #mark-preview .effort-legend-break::before{background:repeating-linear-gradient(135deg,#eeddb5 0 3px,#fff7e4 3px 6px)} #mark-preview .effort-legend-entry::before{background:var(--mark-brand)} #mark-preview .effort-week-grid{width:1620px} #mark-preview .effort-timeline-row{display:grid;grid-template-columns:180px 1440px;border-bottom:1px solid #e1d9df} #mark-preview .effort-date-sticky{position:sticky;left:0;z-index:6;background:#fff;padding:9px 10px;border-right:1px solid #cbbcc5;min-width:0;font-size:12px} #mark-preview .effort-day-off .effort-date-sticky{background:#f3eff2} #mark-preview .effort-day-difference{font-size:11px;color:var(--mark-brand)} #mark-preview .effort-time-axis{height:34px;position:relative;background:#faf7f8} #mark-preview .effort-time-axis>span{position:absolute;top:8px;font-size:11px;color:var(--mark-muted)} #mark-preview .effort-day-lanes{position:relative;padding:7px 0;background-image:linear-gradient(to right,#e6dfe4 1px,transparent 1px);background-size:60px 100%} #mark-preview .effort-attendance-lane{height:20px;position:relative;margin-bottom:7px} #mark-preview .effort-assignment-lane{height:34px;position:relative;touch-action:pan-y;cursor:crosshair} #mark-preview .effort-attendance-block,#mark-preview .effort-break-block,#mark-preview .effort-available-block,#mark-preview .effort-assignment-block,#mark-preview .effort-drag-preview{position:absolute;top:0;height:100%;overflow:hidden;border-radius:4px;font-size:11px;white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box} #mark-preview .effort-attendance-block{background:#a5c2b7;color:#254c40;padding:1px 4px} #mark-preview .effort-break-block{background:repeating-linear-gradient(135deg,#eeddb5 0 4px,#fff7e4 4px 8px);color:#7a6029;text-align:center;pointer-events:none} #mark-preview .effort-available-block{background:#eff5f2;pointer-events:none} #mark-preview .effort-assignment-block{border:1px solid #fff9;background:var(--mark-brand);color:#fff;padding:3px 5px;cursor:pointer;z-index:2;text-align:left} #mark-preview .effort-outside-attendance{outline:2px solid #d12942;background:#b21b35} #mark-preview .effort-drag-preview{background:#8e3045bb;color:#fff;padding:4px;pointer-events:none;z-index:3} #mark-preview .effort-day-add{padding:0 6px;border:1px solid #d8bac4;background:white;color:var(--mark-brand);border-radius:4px;position:absolute;right:8px;top:7px} #mark-preview .effort-day-add:disabled{opacity:.35} #mark-preview #effort-form-error{color:#b02538} #mark-preview .paid-leave-section{margin-top:30px;padding-top:16px;border-top:1px solid var(--mark-border)} #mark-preview #attendance-member{max-width:100%;padding:8px;border:1px solid #d8bac4;background:#fff;border-radius:6px;color:inherit;font:inherit} #mark-preview #leave-form-error{color:#b02538} #mark-preview .attendance-two-calendars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:350px;margin-left:auto;flex-shrink:0} #mark-preview .attendance-mini-month{color:#50565c} #mark-preview .attendance-mini-month h3{font-size:13px;font-weight:700;text-align:center;margin:0 0 6px;color:#41484f} #mark-preview .attendance-mini-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums} #mark-preview .attendance-mini-grid>span{min-height:18px;line-height:18px;border-radius:3px} #mark-preview .mini-weekday{color:var(--mark-muted)} #mark-preview .attendance-mini-grid .mini-holiday{color:#b42e4a} #mark-preview .attendance-mini-grid .mini-saturday{color:#316e9d} #mark-preview .attendance-mini-grid .mini-outside{opacity:.65} #mark-preview .attendance-mini-grid .mini-today{background:var(--mark-brand);color:#fff;font-weight:700;opacity:1} #mark-preview .attendance-offline .mini-weekday{color:#686f76} #mark-preview .attendance-offline .attendance-mini-grid .mini-holiday{color:#995d68} #mark-preview .attendance-offline .attendance-mini-grid .mini-saturday{color:#59758d} #mark-preview .attendance-offline .attendance-mini-grid .mini-today{background:#7a838c;color:white} #mark-preview .project-dialog .member-surname-toggle{display:flex;align-items:center;gap:8px;font-weight:400} #mark-preview .project-dialog .member-surname-toggle input{width:17px;height:17px;margin:0;accent-color:var(--mark-brand)} #mark-preview #master-display-name:read-only{background:#f6f0f3} #mark-preview .effort-assignment-block{padding-left:11px;padding-right:11px;touch-action:none;min-width:15px} #mark-preview .effort-resize-handle{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;touch-action:none;background:#ffffff24} #mark-preview .effort-resize-start{left:0;border-right:1px solid #ffffff55} #mark-preview .effort-resize-end{right:0;border-left:1px solid #ffffff55} #mark-preview .effort-resize-handle::after{content:"";position:absolute;top:9px;bottom:9px;left:3px;width:1px;background:#fffc} #mark-preview .effort-resize-handle:hover{background:#ffffff65} #mark-preview .effort-assignment-block.is-resizing{z-index:8;box-shadow:0 0 0 2px #bd7891;cursor:ew-resize} #mark-preview .effort-resize-tooltip{position:absolute;top:-27px;z-index:10;padding:3px 7px;border-radius:4px;background:#3a2632;color:#fff;font-size:11px;white-space:nowrap;pointer-events:none} #mark-preview .effort-assignment-block{overflow:visible;padding-right:42px} #mark-preview .effort-entry-open{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer} #mark-preview .effort-entry-copy{position:absolute;top:4px;right:10px;bottom:4px;padding:0 3px;border:1px solid #ffffff88;border-radius:3px;background:#fff;color:var(--mark-brand);font-size:10px;line-height:1;cursor:copy} #mark-preview .effort-entry-copy:hover{background:#ffedf3} #mark-preview .effort-short-entry{padding-right:11px} #mark-preview .effort-short-entry .effort-entry-copy{top:-23px;bottom:auto;right:0;min-height:21px;visibility:hidden;z-index:10;box-shadow:0 2px 5px #302a3820} #mark-preview .effort-short-entry:hover .effort-entry-copy,#mark-preview .effort-short-entry:focus-within .effort-entry-copy{visibility:visible} @media(pointer:coarse){#mark-preview .effort-short-entry .effort-entry-copy{visibility:visible}} @media(max-width:800px){#mark-preview .attendance-two-calendars{margin-left:0;width:min(350px,100%);flex-shrink:1}} @media(max-width:500px){#mark-preview .project-form-columns{grid-template-columns:1fr;gap:0}#mark-preview .project-dialog{padding:18px}} #mark-preview .punch-ring{position:absolute;width:200px;height:200px;border:3px solid #f3bbd0;border-radius:50%;box-shadow:0 0 40px #f19bbb80,inset 0 0 35px #f19bbb80;animation:mark-shockwave 1.6s both} #mark-preview .punch-ring-second{animation-delay:.18s;border-width:1px} #mark-preview .punch-beam{position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 40%,#f8c0d533 47%,#fff4 50%,transparent 55%);animation:mark-beam 1.5s both} #mark-preview .punch-sparks{position:absolute;inset:20%;color:#f6ccdb;text-align:center;font-size:32px;line-height:3;animation:mark-sparks 1.7s both} #mark-preview .punch-enter{animation:mark-heavy-impact .8s both} #mark-preview .punch-leave .punch-spectacle{background:linear-gradient(#160f1be8,#472334e8);animation:mark-shutter 1.9s both} #mark-preview .punch-leave .punch-stamp{background:#29212de8;border-color:#d6bdcc;box-shadow:0 0 35px #d9a4c04d} @keyframes mark-show{0%{opacity:0}12%,70%{opacity:1}100%{opacity:0}} @keyframes mark-stamp{0%{opacity:0;transform:scale(2) rotate(-14deg)}16%{opacity:1;transform:scale(.94) rotate(-6deg)}24%,72%{opacity:1;transform:scale(1) rotate(-6deg)}100%{opacity:0;transform:scale(1.08) rotate(-6deg)}} @keyframes mark-shockwave{0%{transform:scale(.1);opacity:0}12%{opacity:1}100%{transform:scale(5);opacity:0}} @keyframes mark-beam{0%{transform:translateX(-70%)}100%{transform:translateX(70%)}} @keyframes mark-sparks{0%{opacity:0;transform:scale(.4) rotate(-10deg)}22%{opacity:1}100%{opacity:0;transform:scale(1.8) rotate(10deg)}} @keyframes mark-heavy-impact{0%{transform:scale(.99)}18%{transform:translateY(5px) scale(.995);box-shadow:0 0 50px #b64f7580}28%{transform:translateY(-2px)}40%{transform:translateY(1px)}100%{transform:none;box-shadow:0 0 0 transparent}} @keyframes mark-shutter{0%{opacity:0;clip-path:inset(50% 0)}18%,72%{opacity:1;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0)}} @media(prefers-reduced-motion:reduce){#mark-preview .punch-enter,#mark-preview .punch-leave,#mark-preview .punch-spectacle,#mark-preview .punch-spectacle *{animation:none!important}#mark-preview .punch-enter .punch-spectacle,#mark-preview .punch-leave .punch-spectacle{display:none}} /* 261028: 未出社・退社後は明るい無彩色で非アクティブ状態を示す。 */ #mark-preview .attendance-offline .attendance-bar-segment{filter:saturate(.3)} #mark-preview .attendance-offline .analog-second,#mark-preview .attendance-offline .analog-pin{background:#899198} #mark-preview .member-name-link{border:0;background:transparent;padding:4px 0;color:var(--mark-brand);text-decoration:underline;text-underline-offset:3px;font:inherit;font-weight:600} /* 261028: 勤怠レポート */ #mark-preview .attendance-report-tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--mark-border);margin:24px 0 20px;padding-bottom:0} #mark-preview .attendance-report-tabs button{flex-shrink:0;border:1px solid transparent;border-radius:8px 8px 0 0;background:transparent;color:var(--mark-brand);padding:12px 22px;font-weight:600} #mark-preview .attendance-report-tabs button[aria-selected="true"]{background:#fff;border-color:var(--mark-border);border-bottom-color:#fff;color:var(--mark-ink)} #mark-preview .attendance-report .toolbar{margin-top:0;gap:16px} #mark-preview .attendance-report label{display:flex;align-items:center;gap:8px;white-space:nowrap} #mark-preview .attendance-report input,#mark-preview .attendance-report select{width:auto;min-width:120px;max-width:100%;border:1px solid #d8bac4;border-radius:6px;background:#fff;color:var(--mark-ink);padding:8px;font:inherit} #mark-preview .attendance-report-table{min-width:850px;font-variant-numeric:tabular-nums} #mark-preview .attendance-report-table th,#mark-preview .attendance-report-table td{white-space:nowrap} #mark-preview .attendance-report-table tbody tr:nth-child(even){background:#faf7f8} #mark-preview .attendance-report-table tfoot{font-weight:700;background:#f7eaee} #mark-preview .attendance-report-table td:nth-child(n+4){text-align:right} /* 261028: 勤怠・休暇の列境界と見出し位置を明確にする。 */ #mark-preview #mark-attendance table{border:1px solid #d8cbd1} #mark-preview #mark-attendance table th,#mark-preview #mark-attendance table td{border:1px solid #d8cbd1;padding:12px 14px} #mark-preview #mark-attendance table thead th{background:#eee5e9;color:#504149;font-weight:700;border-bottom:2px solid #bba4af} #mark-preview .attendance-report-table th:nth-child(n+4){text-align:right} #mark-preview #mark-attendance table tfoot th,#mark-preview #mark-attendance table tfoot td{background:#f3e8ed;border-top:2px solid #bba4af} #mark-preview #mark-attendance table tbody tr:hover{background:#f2e9ee} /* 年次は3列目の1月から全時間列を右寄せにする。 */ #mark-preview .attendance-report[data-mode=yearly] .attendance-report-table th:nth-child(n+3),#mark-preview .attendance-report[data-mode=yearly] .attendance-report-table td:nth-child(n+3){text-align:right} /* 261028: 案件ごとのアコーディオン。閉じると1行で表示する。 */ #mark-preview .gantt-project-toggle{display:block;width:100%;padding:2px 0;border:0;background:transparent;color:var(--mark-brand);font:inherit;font-size:12px;font-weight:600;text-align:left;cursor:pointer} #mark-preview .gantt-project-summary.is-collapsed .gantt-project-meta,#mark-preview .gantt-project-summary.is-collapsed .gantt-project-elapsed{display:none} #mark-preview .gantt-project-summary .gantt-task-column{background:#f8f4f6;font-size:11px} #mark-preview .gantt-project-summary .gantt-project-name{margin-bottom:0} /* 261028: 案件の集約行を個別タスクと区別する。 */ #mark-preview .gantt-project-summary>.gantt-task-column{background:#e5d5de;color:#59384a;font-weight:700} #mark-preview .gantt-project-summary>.gantt-lane-cell{background:#f0e5ec} #mark-preview .gantt-project-summary>.gantt-lane-cell .gantt-lane{background-color:#f0e5ec} #mark-preview #gantt-filter:focus-visible,#mark-preview #gantt-filter-kind:focus-visible{outline:2px solid var(--mark-brand);outline-offset:3px} #mark-preview .gantt-milestone-countdown{position:absolute;left:calc(100% + 5px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:11px;line-height:1.5;color:var(--mark-ink);background:#fffdf0ed;border-radius:3px;padding:1px 4px} /* 261028: 追加操作を色で区別し、案件名を枠で示す。 */ #mark-preview #gantt-create-project{background:var(--mark-brand);color:#fff;border-color:var(--mark-brand)} #mark-preview #gantt-create-project:hover{background:var(--mark-brand-hover);border-color:var(--mark-brand-hover)} #mark-preview #gantt-create{background:var(--mark-brand);color:#fff} #mark-preview #gantt-create:hover{background:var(--mark-brand-hover)} #mark-preview #gantt-create-milestone{background:var(--mark-brand);color:#fff;border-color:var(--mark-brand)} #mark-preview #gantt-create-milestone:hover{background:var(--mark-brand-hover);border-color:var(--mark-brand-hover)} #mark-preview .gantt-project-toggle{padding:5px 6px;border:1px solid #c7aab7;border-radius:3px;background:#fff;line-height:1.5} #mark-preview .gantt-project-toggle:hover{background:#f7eaee;border-color:var(--mark-brand)} /* 全タスク完了の案件名は完了バーと同系統の緑で表示する。 */ #mark-preview .gantt-project-toggle.is-complete{background:#e5f2e9;border-color:#78aa8c;color:#2f6845} #mark-preview .gantt-project-toggle.is-complete:hover{background:#d3e9db;border-color:#4e8a64} /* 時間外を折りたたむ時間軸と定時の背景 */ #mark-preview .effort-week-grid .effort-timeline-row{grid-template-columns:180px var(--effort-time-width,840px)} #mark-preview .effort-day-lanes{background-color:#faf8fa;isolation:isolate} #mark-preview .effort-day-lanes::before,#mark-preview .effort-time-axis::before{content:'';position:absolute;top:0;bottom:0;left:var(--regular-left);width:var(--regular-width);background:#e7eef9;pointer-events:none} #mark-preview .effort-day-lanes::before{z-index:-1} #mark-preview .effort-time-axis>span{z-index:1} #mark-preview .effort-time-folds{gap:12px} /* 261028: 定時の色付き背景の上にも1時間ごとの縦線を描く。 */ #mark-preview .effort-day-lanes::after,#mark-preview .effort-time-axis::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to right,#bfc4ce 0px,#bfc4ce 1px,transparent 1px,transparent 60px);pointer-events:none;z-index:0} #mark-preview .effort-day-lanes>.effort-attendance-lane,#mark-preview .effort-day-lanes>.effort-assignment-lane{z-index:1} /* 日ごとの実際の勤怠で、時間軸の背景を塗り分ける。 */ #mark-preview .effort-attendance-background{position:absolute;inset:0;z-index:0;pointer-events:none} #mark-preview .effort-actual-work-shade,#mark-preview .effort-actual-break-shade{position:absolute;top:0;bottom:0;pointer-events:none} #mark-preview .effort-actual-work-shade{background:#d4e9dc} #mark-preview .effort-actual-break-shade{background:repeating-linear-gradient(135deg,#eeddb5 0 4px,#fff7e4 4px 8px)} #mark-preview .effort-legend-regular::before{background:#e7eef9;border:1px solid #c6d3e8} /* 261030: 所有者・管理者設定 */ #mark-preview .attendance-limit-warning{margin-top:12px;padding:14px 16px;border:1px solid #e3a0a0;border-left:5px solid #c62828;border-radius:6px;background:#fff0f0;color:#b71c1c;font-size:15px;font-weight:700} #mark-preview .settings-panel{margin-top:18px} #mark-preview .cloud-connection{margin:18px 0;border-left:5px solid var(--mark-brand)} #mark-preview .cloud-connection a{text-decoration:none;display:inline-block} #mark-preview .cloud-connection [hidden]{display:none!important} #mark-preview .master-sort-button{border:0;background:transparent;padding:4px 0;color:inherit;font:inherit;font-weight:600;text-align:left;white-space:nowrap} #mark-preview .master-sort-button:hover{color:var(--mark-brand);text-decoration:underline} #mark-preview #members-department-filter{display:block;margin-top:5px;max-width:170px;padding:5px 6px;color:inherit;border:1px solid #d7c1cc;border-radius:4px;background:#fff;font:inherit} #mark-preview .master-sort-button:focus-visible{outline:2px solid var(--mark-brand);outline-offset:4px;border-radius:2px} #mark-preview .master-duplicate-warning{margin:12px 0;padding:12px 14px;border:1px solid #e3a0a0;border-left:4px solid #c62828;background:#fff0f0;color:#b71c1c;font-weight:600;border-radius:5px;overflow-wrap:anywhere} #mark-preview .master-duplicate-cell{color:#b71c1c;font-weight:700;background:#fff0f0} #mark-preview .master-duplicate-cell span{font-size:11px;white-space:nowrap} #mark-preview .settings-panel>label{display:grid;gap:6px;margin:14px 0;max-width:720px} #mark-preview .settings-panel>label input,#mark-preview .settings-panel>label select{width:100%;padding:9px;border:1px solid #d4ddea;border-radius:5px;font:inherit} #mark-preview .settings-panel fieldset{border:1px solid #dce3ec;border-radius:6px;margin-top:20px;padding:14px} #mark-preview .settings-admins{max-height:320px;overflow:auto;display:grid;gap:9px} #mark-preview .settings-admins label{display:flex;align-items:center;gap:10px;padding:7px;border-bottom:1px solid #edf1f6;overflow-wrap:anywhere} #mark-preview .settings-admins input[type=checkbox]{width:18px;height:18px;flex:none} #mark-preview .settings-admins input[type=email]{width:260px;max-width:100%;margin-left:auto;flex-shrink:0} @media(max-width:700px){#mark-preview .settings-admins label{flex-wrap:wrap}#mark-preview .settings-admins input[type=email]{width:100%;margin-left:28px}} #mark-preview #settings-message{margin:14px 0;white-space:pre-wrap} /* 261030: 状態と行の階層を色・文字の両方で区別する。 */ #mark-preview .gantt-bar{background:#73b65d;border:1px solid #3c8036;color:#163d20} #mark-preview .gantt-bar.gantt-complete{background:#95c5f1;border:1px solid #3976b2;color:#153f69} #mark-preview .gantt-bar.gantt-complete .gantt-bar-text{background:#e5f2ff;color:#174c7e} #mark-preview .gantt-bar.gantt-delayed{background:repeating-linear-gradient(135deg,#c73642 0px,#c73642 7px,#e6535d 7px,#e6535d 14px);border-color:#a31d2b;box-shadow:0 0 0 1px #a31d2b} #mark-preview .gantt-project-summary>.gantt-project-column,#mark-preview .gantt-project-summary>.gantt-task-column{background:#fff0c9;color:#624b1c} #mark-preview .gantt-project-summary>.gantt-lane-cell,#mark-preview .gantt-project-summary>.gantt-lane-cell .gantt-lane{background-color:#fff8e8} #mark-preview .gantt-task-complete>.gantt-task-column{background:#f0f7ff} #mark-preview .gantt-task-late>.gantt-task-column{background:#fff0f1} #mark-preview .gantt-task-active>.gantt-task-column{background:#f4faf1} #mark-preview .gantt-status-badge{display:inline-block;margin:4px 0 2px;padding:1px 5px;border-radius:3px;font-size:10px;font-weight:700;line-height:1.6} #mark-preview .gantt-status-badge.is-active{background:#e3f2da;color:#275e24} #mark-preview .gantt-status-badge.is-complete{background:#deedff;color:#245a90} #mark-preview .gantt-status-badge.is-late{background:#ffe0e3;color:#9f1f31} #mark-preview .gantt-status-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;font-size:12px} #mark-preview .gantt-status-legend span{display:inline-flex;align-items:center;gap:6px} #mark-preview .gantt-status-legend i{display:inline-block;width:22px;height:12px;border-radius:2px;border:1px solid #0002} #mark-preview .gantt-status-legend .is-active{background:#73b65d} #mark-preview .gantt-status-legend .is-complete{background:#95c5f1} #mark-preview .gantt-status-legend .is-late{background:#d73c4b} #mark-preview .gantt-milestone.is-complete .gantt-milestone-diamond{background:#95c5f1;border-color:#3976b2} #mark-preview .gantt-overdue-warning ul{max-height:144px;overflow-y:auto;padding-right:10px} #mark-preview .gantt-status-legend{margin-bottom:14px} /* ガントの予定工数に対する実績 */ #mark-preview .gantt-effort{margin:6px 0;color:#6d7c91;font-weight:400} #mark-preview .gantt-effort-track{position:relative;height:16px;border-radius:4px;background:#e5e7eb;overflow:hidden} #mark-preview .gantt-effort-track>span:first-child{display:block;height:100%;background:#73b65d;border-radius:inherit} #mark-preview .gantt-effort-label{font-size:10px;line-height:1.5;margin-top:3px;overflow-wrap:anywhere} #mark-preview .gantt-effort.is-over{color:#aa1730} #mark-preview .gantt-effort-track .gantt-effort-percent{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1;font-weight:700;color:#22324a} #mark-preview .gantt-effort.is-danger .gantt-effort-track{outline:1px solid #8c001e;outline-offset:1px} /* 工数300%超の警告表示 */ @keyframes mark-effort-danger-blink{0%,100%{opacity:1}50%{opacity:.3}} /* 休日の帯をセル全体に描き、行間でも連続させる。 */ #mark-preview .gantt-table .gantt-lane-cell{border-top:0;border-bottom:0;background-origin:border-box;background-clip:border-box} #mark-preview .gantt-table .gantt-lane-cell .gantt-lane{background-image:none;background-color:transparent} /* 一覧性を優先したコンパクトなガント行 */ #mark-preview .gantt-table .gantt-project-column{padding:3px 5px;position:sticky;line-height:1.25} #mark-preview .gantt-table .gantt-project-name{min-height:20px;padding:1px 4px;margin:0;font-size:12px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #mark-preview .gantt-project-details{display:flex;gap:4px;white-space:nowrap;overflow:hidden;height:16px;margin-top:1px} #mark-preview .gantt-project-details>*{display:block!important;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:16px;margin:0} #mark-preview .gantt-project-details .gantt-project-elapsed{flex-shrink:0} #mark-preview .gantt-table .gantt-project-edit{position:absolute;right:5px;bottom:2px;font-size:12px;line-height:15px;padding:0} #mark-preview .gantt-project-column .gantt-effort{margin:2px 0 0} #mark-preview .gantt-project-column .gantt-effort-track{height:16px} #mark-preview .gantt-project-column .gantt-effort-label{font-size:12px;line-height:17px;margin:1px 22px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #mark-preview .gantt-table tbody .gantt-task-column{padding:2px 5px;font-size:12px;line-height:1.25} #mark-preview .gantt-table .gantt-lane{height:26px} #mark-preview .gantt-bar{top:5px;height:16px;border-radius:3px} #mark-preview .gantt-bar-text{font-size:11px;line-height:14px} #mark-preview .gantt-bar-date{position:absolute;top:6px;z-index:3;font-size:10px;line-height:14px;white-space:nowrap;color:#4a4550;background:#fffdf0e8;border-radius:2px;padding:0 2px;pointer-events:none} #mark-preview .gantt-bar-date.is-start{transform:translateX(calc(-100% - 4px))} #mark-preview .gantt-bar-date.is-end{transform:translateX(4px)} #mark-preview .gantt-task-column .gantt-task-link{padding:0;font-size:12px;line-height:14px} #mark-preview .gantt-status-badge{margin:0 0 0 3px;padding:0 3px;font-size:10px;line-height:15px} #mark-preview .gantt-overdue-badge{display:inline-block;margin:1px 0 0;padding:0 3px;font-size:10px;line-height:15px} /* チャートを優先し、上部の操作・警告を圧縮する。 */ #mark-preview #mark-gantt>.toolbar{margin:8px 0;gap:6px;font-size:14px} #mark-preview #mark-gantt>.toolbar button{padding:5px 9px;min-height:30px;font-size:14px} #mark-preview #mark-gantt #gantt-month{font-size:16px;line-height:1.3} #mark-preview #mark-gantt #gantt-filter,#mark-preview #mark-gantt #gantt-filter-kind{padding:5px 8px;font-size:14px;height:30px} #mark-preview #mark-gantt .gantt-view-switch{gap:3px;margin-right:8px} #mark-preview #mark-gantt .toolbar .gantt-status-legend{margin:0 0 0 auto;gap:10px;font-size:12px} #mark-preview #mark-gantt .gantt-status-legend i{width:15px;height:9px} #mark-preview #mark-gantt>.panel{padding:8px 10px} #mark-preview #mark-gantt .gantt-overdue-warning{margin:6px 0;padding:5px 10px;border-width:1px;border-left-width:4px;box-shadow:none;border-radius:5px;font-size:14px} #mark-preview #mark-gantt .gantt-overdue-warning>summary{cursor:pointer;font-weight:600;line-height:22px} #mark-preview #mark-gantt .gantt-overdue-warning ul{margin:4px 0;padding-left:20px;max-height:120px} #mark-preview #mark-gantt .gantt-warning-link{font-size:14px;padding:2px 0} #mark-preview #gantt-feedback{font-size:14px;margin:3px 0} #mark-preview #gantt-feedback:empty,#mark-preview #gantt-empty:empty{display:none} #mark-preview .gantt-help{margin:0;font-size:12px} #mark-preview .gantt-help>summary{cursor:pointer} #mark-preview .gantt-help p{margin:4px 0;max-width:420px} #mark-preview #mark-gantt .gantt-calendar-legend{margin-top:6px;gap:10px;font-size:12px} /* 物件ごとの区切りを全列で揃える。高さと休日背景は維持。 */ #mark-preview .gantt-table .gantt-project-start>.gantt-project-column, #mark-preview .gantt-table .gantt-project-start>.gantt-task-column, #mark-preview .gantt-table .gantt-project-start>.gantt-lane-cell{box-shadow:inset 0 2px 0 #9c7f8d} #mark-preview .gantt-table .gantt-project-start>.gantt-project-column{border-left:3px solid #b59aa6} /* 全タスク完了の物件は、閉じている間は案件名だけの1行にする。 */ #mark-preview .gantt-project-summary.is-collapsed>.gantt-project-column .gantt-project-details, #mark-preview .gantt-project-summary.is-collapsed>.gantt-project-column .gantt-effort, #mark-preview .gantt-project-summary.is-collapsed>.gantt-project-column .gantt-project-edit{display:none} #mark-preview .gantt-project-summary.is-collapsed>.gantt-project-column{padding-top:3px;padding-bottom:3px;vertical-align:middle} /* 今日の線は表全体に1本描き、行や物件の境界で切れないようにする。 */ #mark-preview .gantt-table{position:relative} #mark-preview .gantt-table.has-today-line::after{content:"";position:absolute;top:0;bottom:0;left:var(--gantt-today-left);width:2px;background:#a92f51;z-index:4;pointer-events:none} /* プロジェクト列の可変幅。固定列と今日の線も同じ幅に追随する。 */ #mark-preview .gantt-table .gantt-project-column{width:var(--gantt-project-width,130px);min-width:var(--gantt-project-width,130px);max-width:var(--gantt-project-width,130px)} #mark-preview .gantt-table .gantt-task-column{left:calc(var(--gantt-project-width,130px) + var(--gantt-logo-width,80px));width:var(--gantt-task-width,100px);min-width:var(--gantt-task-width,100px);max-width:var(--gantt-task-width,100px)} #mark-preview .gantt-table .gantt-logo-column{position:sticky;left:var(--gantt-project-width,130px);width:var(--gantt-logo-width,80px);min-width:var(--gantt-logo-width,80px);max-width:var(--gantt-logo-width,80px);box-sizing:border-box;padding:5px;text-align:center;vertical-align:middle;background:#fff;border-right:1px solid #d2c7cd;z-index:10} #mark-preview .gantt-table thead .gantt-logo-column{z-index:12;background:#f8f4f6;vertical-align:middle} #mark-preview .gantt-client-name{display:block;font-size:10px;line-height:12px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px} #mark-preview .gantt-member-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:2px solid #ad8b9b;padding:0 2px;margin:8px 0 0} #mark-preview .gantt-member-tabs[hidden]{display:none} #mark-preview .gantt-member-tab{flex:0 0 auto;border:1px solid #d5bcc9;border-bottom:0;border-radius:6px 6px 0 0;background:#f8f4f6;color:#59384a;padding:9px 16px;font:inherit;cursor:pointer} #mark-preview .gantt-member-tab[aria-selected=true]{background:#8e304b;color:#fff;border-color:#8e304b;font-weight:700} #mark-preview .gantt-member-tab:focus-visible{outline:2px solid #8e304b;outline-offset:-3px} #mark-preview .gantt-client-logo{display:block;width:min(56px,calc(var(--gantt-logo-width,80px) - 12px));height:min(56px,calc(var(--gantt-logo-width,80px) - 12px));object-fit:contain;margin:0 auto} #mark-preview .gantt-table .gantt-project-summary.is-complete.is-collapsed>.gantt-logo-column{padding-top:2px;padding-bottom:2px} #mark-preview .gantt-project-summary.is-complete.is-collapsed .gantt-client-logo{width:min(20px,calc(var(--gantt-logo-width,80px) - 12px));height:min(20px,calc(var(--gantt-logo-width,80px) - 12px))} #mark-preview .client-logo-field{margin:12px 0;padding:10px;border:1px solid #d2c7cd;border-radius:6px} #mark-preview .client-logo-preview{display:flex;align-items:center;justify-content:center;min-height:82px;margin:8px 0;background:#f5f6fa;border:1px dashed #c5c9d0;border-radius:4px} #mark-preview .client-logo-preview img{width:96px;height:96px;object-fit:contain} #mark-preview .gantt-table .gantt-project-summary>.gantt-logo-column{background:#fff0c9;color:#624b1c;box-shadow:inset 0 2px 0 #9c7f8d} #mark-preview .gantt-table .gantt-project-summary.is-complete>.gantt-logo-column{background:#e1efff;color:#245a90} #mark-preview .gantt-column-resize{position:absolute;right:-4px;top:0;bottom:0;width:9px;cursor:col-resize;touch-action:none;z-index:20} #mark-preview .gantt-column-resize::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;background:#b9afb5} #mark-preview .gantt-column-resize:hover::after,#mark-preview .gantt-column-resize:focus-visible::after{width:3px;background:var(--mark-brand)} /* 開始日数と工数の割合は同じ行に配置する。 */ #mark-preview .gantt-project-column .gantt-effort{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:5px;align-items:center} #mark-preview .gantt-project-column .gantt-effort .gantt-project-details{height:16px;margin:0} #mark-preview .gantt-project-column .gantt-effort-label{grid-column:1/-1} /* 物件名は枠より文字を主役にして読み取りやすくする。 */ #mark-preview .gantt-table .gantt-project-name{font-size:14px;font-weight:700;line-height:20px;min-height:22px;padding:1px 2px;border:0;border-radius:2px;background:transparent;color:#263445;letter-spacing:.02em} #mark-preview .gantt-table .gantt-project-name:hover{background:#eadba8;color:#172535;text-decoration:underline;text-underline-offset:3px} #mark-preview .gantt-table .gantt-project-name:focus-visible{outline:2px solid var(--mark-brand);outline-offset:1px} #mark-preview .gantt-table .gantt-project-name.is-complete{color:#2f6845;background:transparent} #mark-preview .gantt-table .gantt-project-name.is-complete:hover{background:#dcebdc} /* 工数バーからその物件のマイルストーンを追加する。 */ #mark-preview .gantt-effort-track{display:block;width:100%;min-width:0;padding:0;border:0;cursor:pointer} #mark-preview .gantt-effort-track:hover{outline:1px solid var(--mark-brand);outline-offset:1px} #mark-preview .gantt-effort-track:focus-visible{outline:2px solid var(--mark-brand);outline-offset:2px} /* マイルストーンのアイコン選択 */ #mark-preview .gantt-icon-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px} #mark-preview .gantt-icon-options button{min-width:44px;font-size:22px;padding:5px 10px;line-height:1.3} #mark-preview .gantt-milestone-symbol{display:block;font-size:21px;line-height:1;filter:drop-shadow(0 1px 1px #fff)} #mark-preview .gantt-milestone:hover .gantt-milestone-symbol{transform:scale(1.15)} #mark-preview .gantt-table .gantt-milestone{top:0;height:26px} #mark-preview #gantt-undo:disabled,#mark-preview #gantt-redo:disabled{opacity:.4;cursor:default} /* 共通の操作履歴。画面をまたいでも同じ履歴を使う。 */ #mark-preview .system-history{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto} #mark-preview .system-history button{padding:5px 10px;font-size:14px} #mark-preview .system-history button:disabled{opacity:.4;cursor:default} #mark-preview #system-history-message{font-size:12px;max-width:280px} #mark-preview #system-history-message:empty{display:none} /* 実績を100%ごとの区間で積み上げ、予定内の緑を残す。 */ #mark-preview .gantt-effort-track>span.gantt-effort-segments{display:flex;width:100%;height:100%;background:transparent} #mark-preview .gantt-effort-segment{display:block;flex-shrink:0;height:100%} #mark-preview .gantt-effort-segment.level-0{background:#73b65d} #mark-preview .gantt-effort-segment.level-1{background:#f5a32a} #mark-preview .gantt-effort-segment.level-2{background:#ef1835} #mark-preview .gantt-effort-segment.level-3{background:#400010;animation:mark-effort-danger-blink 1.4s ease-in-out infinite} #mark-preview .gantt-effort-track .gantt-effort-percent{inset:1px auto 1px 50%;transform:translateX(-50%);padding:0 3px;border-radius:2px;background:#ffffffe0;color:#22324a} /* 工数バーの中央をドラッグすると日付・時刻を移動できる。 */ #mark-preview .effort-entry-open{cursor:grab;touch-action:none} #mark-preview .effort-assignment-block.is-moving{opacity:.35;pointer-events:none} #mark-preview.effort-moving,#mark-preview.effort-moving *{cursor:grabbing!important;user-select:none} #mark-preview .effort-assignment-lane.is-drop-target{box-shadow:inset 0 0 0 2px #a45c76} #mark-preview .effort-move-preview{z-index:12;outline:2px solid #713149;pointer-events:none} /* 工数バーはプロジェクト名とタスク名の2行で表示する。 */ #mark-preview .effort-assignment-lane{height:38px} #mark-preview .effort-entry-open{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;line-height:14px} #mark-preview .effort-entry-open>span{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #mark-preview .effort-entry-project-name{font-size:12px;font-weight:600} #mark-preview .effort-entry-task-name{font-size:11px;font-weight:400;color:#fff0df} /* タスク名をボタン風のラベルにする（クリックとドラッグは従来どおり）。 */ #mark-preview .effort-entry-open>.effort-entry-task-name{width:fit-content;max-width:100%;padding:0 4px;border-radius:3px;background:#fff0e5;color:#703047;line-height:14px;font-weight:600;box-sizing:border-box} #mark-preview .effort-entry-open:hover>.effort-entry-task-name{background:#fff} /* 初期表示は利用可能な画面幅に合わせ、時間軸だけを拡大できる。 */ #mark-preview .effort-timeline-panel{width:100%;min-width:0} #mark-preview #effort-week-chart{width:100%} #mark-preview .effort-week-grid{box-sizing:border-box} #mark-preview .effort-day-lanes{background-image:none} #mark-preview .effort-day-lanes::after,#mark-preview .effort-time-axis::after{background:repeating-linear-gradient(to right,#bfc4ce 0px,#bfc4ce 1px,transparent 1px,transparent var(--effort-hour-width))} #mark-preview .effort-width-controls{display:flex;align-items:center;gap:6px;margin-left:auto;white-space:nowrap;font-size:12px} #mark-preview .effort-width-controls button{padding:5px 9px} #mark-preview #effort-width-label{min-width:38px;text-align:center} #mark-preview .effort-width-controls button:disabled{opacity:.4;cursor:default} /* 同じプロジェクトは、日付が変わっても同じ色で表示する。 */ #mark-preview .effort-assignment-block{background:var(--effort-project-color,var(--mark-brand));color:#fff} #mark-preview .effort-entry-open>.effort-entry-task-name{background:#fffffff0;color:var(--effort-project-color,#703047)} #mark-preview .effort-entry-copy{color:var(--effort-project-color,var(--mark-brand))} #mark-preview .effort-move-preview{background:var(--effort-project-color,#8e3045);outline-color:var(--effort-project-color,#713149)} /* プロジェクトと一緒に登録するタスク */ #mark-preview .project-task-editor{--project-task-hours-width:150px;margin-top:16px;padding:12px;border:1px solid #d8bac4;border-radius:7px;background:#fcf9fa} #mark-preview .project-task-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} #mark-preview .project-task-heading h3{font-size:16px;margin:0} #mark-preview .project-task-heading button{padding:5px 10px} #mark-preview .project-task-draft{margin-top:10px;padding:10px 0 0;border-top:1px solid #e0cdd5} #mark-preview .project-dialog .project-task-draft label{margin-top:8px} #mark-preview .project-dialog .project-task-draft .project-task-planned{width:var(--project-task-hours-width);margin-left:auto;font-size:11px;gap:3px} #mark-preview .project-task-draft [data-task-remove]:disabled{opacity:.4;cursor:default} #mark-preview #project-existing-tasks{margin-top:10px;font-size:12px} #mark-preview .project-task-columns{display:grid;grid-template-columns:minmax(0,1fr) var(--project-task-hours-width);gap:10px;color:#786c73;font-size:11px} #mark-preview .project-client-controls{position:relative;margin-top:7px} #mark-preview .project-dialog .project-client-controls input[type=search]{min-width:0;min-height:44px;padding-right:48px} #mark-preview .project-client-toggle{position:absolute;right:5px;top:6px;width:32px;height:32px;border:0;border-radius:4px;background:transparent;color:var(--mark-brand);padding:0;font:inherit} #mark-preview .project-client-toggle:hover{background:#f3e6eb} #mark-preview .project-client-toggle:disabled{opacity:.4;cursor:default} #mark-preview .project-client-popup{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:70;max-height:240px;overflow:auto;border:1px solid #c9a8b5;border-radius:6px;background:#fff;box-shadow:0 5px 14px #38212b24} #mark-preview .project-client-option{display:block;width:100%;border:0;border-radius:0;padding:8px 12px;background:#fff;color:var(--mark-ink);text-align:left;overflow-wrap:anywhere;font:inherit} #mark-preview .project-client-option:hover,#mark-preview .project-client-option.is-active{background:#f4e6ec;color:#762a44} #mark-preview #project-client-search-result{margin:0;padding:7px 12px;border-top:1px solid #eee3e8} /* メンバーは読みやすい文字サイズを保って複数列にする。 */ #mark-preview #project-members{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px 12px;max-height:280px;overflow-y:auto;padding:3px} #mark-preview .project-dialog #project-members .project-member-choice{margin:0;padding:3px 0;min-width:0} #mark-preview #project-members .project-member-choice span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #mark-preview #project-planned-hours[readonly]{background:#f5f1f3;font-weight:700} #mark-preview #project-existing-task-list{list-style:none;padding:0;margin:4px 0 0} #mark-preview #project-existing-task-list>li{display:grid;grid-template-columns:minmax(0,1fr) var(--project-task-hours-width);gap:10px;align-items:center;margin:4px 0} #mark-preview .project-dialog #project-existing-task-list label{margin:0;font-size:12px} #mark-preview #project-existing-task-list input,#mark-preview .project-task-planned input,#mark-preview .project-task-total input{padding:6px 8px;font-size:14px} #mark-preview .project-task-total{display:grid;grid-template-columns:minmax(0,1fr) var(--project-task-hours-width);align-items:center;gap:6px 10px;margin-top:14px;padding-top:12px;border-top:2px solid #d8bac4} #mark-preview .project-dialog .project-task-total label{margin:0;font-weight:700} #mark-preview .project-task-total #project-total-hint{grid-column:1/-1;margin:0} @media(max-width:500px){#mark-preview .project-task-editor{--project-task-hours-width:120px}} @media(max-width:500px){#mark-preview #project-members{grid-template-columns:repeat(2,minmax(0,1fr))}} /* 日付選択カレンダーでタスクの開始日〜完了予定日を表示する。 */ #mark-preview .task-calendar-day.is-task-range:not(.is-selected){background:#f3e4eb;opacity:1} #mark-preview .task-calendar-day.is-range-start,#mark-preview .task-calendar-day.is-range-end{border-color:#b9859b;font-weight:700} #mark-preview .task-calendar-day.is-task-range:not(.is-selected):hover{background:#ead0dc} /* カレンダー上で期間をドラッグ選択する。 */ #mark-preview .task-calendar-months{user-select:none;touch-action:none} #mark-preview .task-calendar-day{cursor:crosshair;touch-action:none} #mark-preview #task-calendar-selection{font-size:12px;font-weight:600} /* 案件の期間バー。全完了の案件は行とバーを青色で区別する。 */ #mark-preview .gantt-project-summary .gantt-bar.gantt-project-bar{background:#e4bf42;border-color:#b28d19;color:#4e3b08;box-shadow:none} #mark-preview .gantt-project-summary .gantt-bar.gantt-project-bar .gantt-bar-text{background:#fff3c4;color:#4e3b08} #mark-preview .gantt-project-summary.is-complete>.gantt-project-column, #mark-preview .gantt-project-summary.is-complete>.gantt-task-column{background-color:#e1efff;color:#245a90} #mark-preview .gantt-project-summary.is-complete>.gantt-lane-cell{background-color:#eef6ff} #mark-preview .gantt-project-summary.is-complete .gantt-project-name, #mark-preview .gantt-project-summary.is-complete .gantt-task-link{color:#245a90} #mark-preview .gantt-project-summary.is-complete .gantt-project-name:hover{background-color:#ccdef4} #mark-preview .gantt-project-summary.is-complete .gantt-bar.gantt-project-bar{background:#95c5f1;border-color:#3976b2;color:#153f69} #mark-preview .gantt-project-summary.is-complete .gantt-bar.gantt-project-bar .gantt-bar-text{background:#e5f2ff;color:#174c7e} /* 期間のドラッグ開始点は、選択済みの開始日と完了予定日に限定する。 */ #mark-preview .task-calendar-day{cursor:pointer} #mark-preview .task-calendar-day.is-range-start,#mark-preview .task-calendar-day.is-range-end{cursor:grab} #mark-preview .task-calendar-day.is-range-start:active,#mark-preview .task-calendar-day.is-range-end:active{cursor:grabbing} #mark-preview .task-calendar-day.is-fixed-date{cursor:default} #mark-preview .task-calendar-day.is-fixed-date:not(.is-task-range):hover{background:#fff} #mark-preview .task-calendar-day.is-fixed-date.is-task-range:hover{background:#f3e4eb} /* 管理者の分析画面。集計条件・保存状態・分析結果を区別する。 */ #mark-preview .analytics-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0} #mark-preview .analytics-heading h2{margin:0 0 5px} #mark-preview .analytics-heading p{margin:0} #mark-preview .analytics-filters{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end} #mark-preview .analytics-filters label{display:grid;gap:6px;flex:1 1 150px} #mark-preview .analytics-filters input,#mark-preview .analytics-filters select{width:100%;min-width:140px} #mark-preview #mark-analytics select{min-height:40px;padding:8px 10px;border:1px solid var(--mark-border);border-radius:5px;background:#fff;color:inherit;font:inherit} #mark-preview .analytics-filters p{width:100%;margin:0} #mark-preview .analytics-storage{margin:18px 0} #mark-preview .analytics-storage h2{margin-bottom:10px} #mark-preview .analytics-storage p{margin:6px 0} #mark-preview .analytics-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} #mark-preview .analytics-cards span{display:block;color:var(--mark-muted);font-size:12px} #mark-preview .analytics-cards strong{display:block;margin-top:8px;font-size:25px;font-variant-numeric:tabular-nums} #mark-preview .analytics-quality,#mark-preview .analytics-alert{color:#9b4a16;background:#fff1d4;padding:10px 14px;border-radius:6px} #mark-preview .analytics-quality:empty{display:none} #mark-preview .analytics-export{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:18px 0} #mark-preview .analytics-export>div{flex:1 1 380px} #mark-preview .analytics-export h2{margin-bottom:6px} #mark-preview .analytics-export p{margin:0} #mark-preview .analytics-export label{display:grid;gap:5px} #mark-preview .analytics-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} #mark-preview .analytics-bar-row{display:grid;grid-template-columns:minmax(90px,1fr) minmax(60px,1.5fr) 75px;gap:12px;align-items:center;margin:10px 0;font-size:12px} #mark-preview .analytics-bar-row>span:first-child{overflow-wrap:anywhere} #mark-preview .analytics-bar-row strong{text-align:right;font-variant-numeric:tabular-nums} #mark-preview .analytics-bar{display:block;height:9px;background:#f1e9ed;border-radius:4px;overflow:hidden} #mark-preview .analytics-bar i{display:block;height:100%;background:var(--mark-brand);border-radius:4px} #mark-preview .analytics-table-panel{margin-top:16px} #mark-preview .analytics-table{min-width:850px} #mark-preview .analytics-table th:not(:last-child),#mark-preview .analytics-table td:not(:last-child){border-right:1px solid var(--mark-border)} #mark-preview .analytics-table td{font-variant-numeric:tabular-nums;overflow-wrap:anywhere} @media(max-width:1000px){#mark-preview .analytics-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){#mark-preview .analytics-heading{align-items:flex-start;flex-direction:column}#mark-preview .analytics-charts{grid-template-columns:1fr}} /* 打刻修正の申請・承認。修正前後を横に並べて確認する。 */ #mark-preview .approval-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:18px 0} #mark-preview .approval-heading h2,#mark-preview .approval-heading h3{margin:0 0 6px} #mark-preview .approval-heading p{margin:0} #mark-preview .approval-filters{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap} #mark-preview .approval-filters label{display:grid;gap:6px;min-width:160px} #mark-preview .approval-filters select{min-height:40px;border:1px solid var(--mark-border);border-radius:5px;padding:8px;background:#fff;color:inherit;font:inherit} #mark-preview .approval-card{margin:16px 0} #mark-preview .approval-card .approval-heading{margin:0} #mark-preview .approval-comparison{min-width:500px} #mark-preview .approval-comparison td,#mark-preview .approval-comparison th{border-right:1px solid var(--mark-border)} #mark-preview .approval-changed td:last-child{background:#fff2cc} #mark-preview .approval-card form>label{display:grid;gap:6px} #mark-preview .approval-card textarea{width:100%;padding:10px;border:1px solid var(--mark-border);border-radius:5px;font:inherit;color:inherit;resize:vertical} #mark-preview .approval-reason,#mark-preview #attendance-request-list p{white-space:pre-wrap;overflow-wrap:anywhere} #mark-preview #attendance-request-list li{margin:12px 0;padding-bottom:10px;border-bottom:1px solid var(--mark-border)} #mark-preview #attendance-request-list p{margin:4px 0} @media(max-width:700px){#mark-preview .approval-heading{flex-wrap:wrap;align-items:flex-start}} /* 本人専用の勤怠と申請一覧。管理レポートへは移動しない。 */ #mark-preview .personal-attendance-toolbar{gap:8px} #mark-preview #mark-my-attendance .report-tabs{display:flex;gap:8px;border-bottom:1px solid var(--mark-border);padding:10px 0;margin-bottom:14px} #mark-preview #mark-my-attendance [role=tab]{border:1px solid var(--mark-border);border-radius:6px 6px 0 0;padding:10px 18px;color:var(--mark-brand);background:#fff} #mark-preview #mark-my-attendance [role=tab][aria-selected=true]{background:var(--mark-brand);color:white} #mark-preview #personal-summary .value{display:block;font-size:26px} #mark-preview .personal-attendance-table{min-width:850px} #mark-preview .personal-attendance-actions button{display:block;margin:4px 0;padding:5px 8px;font-size:12px;white-space:nowrap} #mark-preview .personal-request{margin:14px 0} #mark-preview .personal-request p{white-space:pre-wrap;overflow-wrap:anywhere} /* 離席・任意休憩は再開まで計測を停止する。 */ #mark-preview .attendance-pause-controls{gap:10px;margin-top:-4px;flex-wrap:wrap} #mark-preview .attendance-pause-controls button{min-height:42px} #mark-preview .attendance-pause-controls [role="status"]{font-size:12px;color:#77521d} #mark-preview .attendance-panel-header{justify-content:flex-start;align-items:center;gap:16px;margin-bottom:12px} #mark-preview .attendance-panel-header h2{margin:0} #mark-preview #attendance-state{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:7px 14px;border:1px solid #cbd2d8;border-radius:999px;background:#edf0f2;color:#54616b;font-size:16px;font-weight:700;line-height:1.5;white-space:nowrap} #mark-preview #attendance-state::before{content:"";width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:currentColor} #mark-preview #attendance-state[data-state="working"]{background:#e8f5ec;border-color:#9bceaf;color:#17613b} #mark-preview #attendance-state[data-state="break"]{background:#fff2d6;border-color:#e2c17e;color:#80500b} #mark-preview #attendance-state[data-state="lunch"]{background:#fff0e2;border-color:#e1b183;color:#914816} #mark-preview #attendance-state[data-state="half"]{background:#f4eafa;border-color:#c8a7d8;color:#6b3486} #mark-preview #attendance-state[data-state="leave"]{background:#e9f1fc;border-color:#aec5e4;color:#365d8c} #mark-preview #attendance-state[data-state="error"]{background:#fff0f2;border-color:#d99baa;color:#9d2945} #mark-preview #attendance-break.primary{font-weight:700;box-shadow:0 3px 0 #561c30} #mark-preview .attendance-confirm-dialog{max-width:460px} #mark-preview .attendance-confirm-dialog .toolbar{justify-content:flex-end;margin-bottom:0} #mark-preview .attendance-half-types{border:0;padding:0;margin:18px 0} #mark-preview .attendance-half-types legend{margin-bottom:8px} #mark-preview .attendance-half-types>div{display:flex;gap:10px;flex-wrap:wrap} #mark-preview .attendance-half-types button{flex:1;min-height:48px;white-space:nowrap} /* 現在状態に合わせた小さな人物アニメーション。 */ #mark-preview .attendance-status-display{display:inline-flex;align-items:center;gap:8px;min-height:64px;color:#687d8e} #mark-preview .attendance-activity{display:block;flex:0 0 90px;width:90px;height:64px;overflow:hidden} #mark-preview .attendance-activity svg{display:block;width:100%;height:100%} #mark-preview .attendance-scene,#mark-preview .activity-moon,#mark-preview .activity-half-sun{display:none} #mark-preview .attendance-status-display[data-state="working"],#mark-preview .attendance-status-display[data-state="half"]{color:#438268} #mark-preview .attendance-status-display[data-state="overtime"]{color:#ad5742} #mark-preview .attendance-status-display[data-state="break"]{color:#ab8442} #mark-preview .attendance-status-display[data-state="lunch"]{color:#b27845} #mark-preview .attendance-status-display[data-state="leave"]{color:#7c9d84} #mark-preview .attendance-status-display[data-state="error"]{color:#a43b51} #mark-preview #attendance-state[data-state="overtime"]{background:#fff0e9;border-color:#d99b83;color:#9a3f27} #mark-preview .attendance-status-display:is([data-state="working"],[data-state="half"],[data-state="overtime"]) .activity-work, #mark-preview .attendance-status-display[data-state="break"] .activity-rest, #mark-preview .attendance-status-display[data-state="lunch"] .activity-lunch, #mark-preview .attendance-status-display[data-state="idle"] .activity-idle, #mark-preview .attendance-status-display[data-state="finished"] .activity-finished, #mark-preview .attendance-status-display[data-state="leave"] .activity-leave, #mark-preview .attendance-status-display[data-state="error"] .activity-error{display:inline} #mark-preview .attendance-status-display[data-state="overtime"] .activity-moon, #mark-preview .attendance-status-display[data-state="half"] .activity-half-sun{display:inline} #mark-preview .activity-typing-person{animation:mark-activity-type 1.4s ease-in-out infinite} #mark-preview .activity-typing-arm{transform-origin:33px 32px;animation:mark-activity-arm .55s ease-in-out infinite alternate} #mark-preview .activity-screen{animation:mark-activity-screen 2s ease-in-out infinite} #mark-preview .activity-breathing{animation:mark-activity-breathe 3.2s ease-in-out infinite} #mark-preview .activity-steam{animation:mark-activity-steam 2.6s ease-out infinite} #mark-preview .activity-eating-hand{transform-origin:46px 33px;animation:mark-activity-eat 2.4s ease-in-out infinite} #mark-preview .activity-wave{transform-origin:54px 34px;animation:mark-activity-wave 2.8s ease-in-out infinite} #mark-preview .activity-walking-person{animation:mark-activity-walk 2s ease-in-out infinite} #mark-preview .activity-step-one{transform-origin:33px 47px;animation:mark-activity-step .8s ease-in-out infinite alternate} #mark-preview .activity-step-two{transform-origin:43px 47px;animation:mark-activity-step .8s ease-in-out infinite alternate-reverse} #mark-preview .activity-holiday-sun,#mark-preview .activity-half-sun{animation:mark-activity-sun 4s ease-in-out infinite} #mark-preview .activity-question{animation:mark-activity-breathe 3s ease-in-out infinite} @keyframes mark-activity-type{0%,100%{transform:translateY(0)}50%{transform:translateY(1.5px)}} @keyframes mark-activity-arm{from{transform:rotate(-3deg)}to{transform:rotate(4deg)}} @keyframes mark-activity-screen{0%,100%{opacity:.5}50%{opacity:1}} @keyframes mark-activity-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.8px)}} @keyframes mark-activity-steam{0%{transform:translateY(2px);opacity:.15}55%{opacity:.7}100%{transform:translateY(-4px);opacity:0}} @keyframes mark-activity-eat{0%,100%{transform:rotate(0deg)}35%,60%{transform:rotate(-8deg)}} @keyframes mark-activity-wave{0%,50%,100%{transform:rotate(0deg)}62%,84%{transform:rotate(10deg)}73%{transform:rotate(-8deg)}} @keyframes mark-activity-walk{0%,100%{transform:translateX(-3px)}50%{transform:translateX(4px)}} @keyframes mark-activity-step{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}} @keyframes mark-activity-sun{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}} @media(prefers-reduced-motion:reduce){#mark-preview .attendance-activity *{animation:none!important;transform:none!important}} /* ガントの複数メンバー選択。Ctrl操作を必要としないチェック式。 */ #mark-preview .gantt-member-picker{position:relative;max-width:100%} #mark-preview #gantt-member-toggle{min-width:170px;max-width:280px;height:30px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:1px solid #d8bac4;background:#fff;color:inherit} #mark-preview #gantt-member-toggle.is-filter-changed{background:#fff1cf;border-color:#bd8526} #mark-preview .gantt-member-popup{position:absolute;top:calc(100% + 6px);left:0;width:320px;max-width:calc(100vw - 64px);padding:12px;background:#fff;border:1px solid #c9a9b5;border-radius:8px;box-shadow:0 8px 24px #39253224;z-index:100} #mark-preview .gantt-member-actions{display:flex;gap:6px;margin-bottom:10px} #mark-preview #gantt-member-close{margin-left:auto} #mark-preview #gantt-member-search{width:100%;min-width:0;padding:8px 10px;border:1px solid #d8bac4;border-radius:5px;margin-bottom:8px} #mark-preview .gantt-member-options{max-height:min(45vh,310px);overflow-y:auto;overscroll-behavior:contain} #mark-preview .gantt-member-option{display:grid;grid-template-columns:18px minmax(0,1fr);gap:2px 8px;align-items:center;padding:8px 5px;cursor:pointer;border-bottom:1px solid #eee4e8} #mark-preview .gantt-member-option:hover{background:#faf4f6} #mark-preview .gantt-member-option input{grid-row:span 2;width:16px;height:16px;margin:0;accent-color:var(--mark-brand)} #mark-preview .gantt-member-option small{color:#7c7378;font-size:11px} #mark-preview .gantt-member-popup p{margin:8px 0 0;font-size:11px} /* 編集内容だけをスクロールし、操作ボタンはダイアログの下端に保持する。 */ #mark-preview dialog.dialog-with-actions{padding:0;overflow:hidden;max-height:min(90vh,calc(100dvh - 32px))} #mark-preview .dialog-with-actions>form{display:flex;flex-direction:column;max-height:min(90vh,calc(100dvh - 32px));margin:0;min-height:0} #mark-preview .dialog-edit-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:26px;scrollbar-gutter:stable;scroll-padding-block:12px} #mark-preview .dialog-edit-actions.toolbar{flex-shrink:0;position:relative;z-index:2;margin:0;padding:14px 26px;border-top:1px solid var(--mark-border);background:#fff;justify-content:flex-end;gap:8px;box-shadow:0 -4px 12px #24132208} #mark-preview .dialog-save-status{flex:1 0 100%;margin:0;color:#24704a;font-size:12px;overflow-wrap:anywhere} #mark-preview .dialog-save-status:empty{display:none} #mark-preview .dialog-save-status.is-error{color:#b02540} @media(max-width:500px){#mark-preview .dialog-edit-body{padding:18px}#mark-preview .dialog-edit-actions.toolbar{padding:12px 18px}}