.work-details-panel[hidden],.work-details-panel [hidden]{display:none!important}
.work-details-panel{position:fixed;z-index:45;top:var(--work-details-top);bottom:var(--work-details-bottom);left:var(--work-details-left,0px);right:var(--work-details-right,0px);display:flex;flex-direction:column;min-height:0;overflow:hidden;border:1px solid var(--c-border);border-radius:var(--radius-l) var(--radius-l) 0 0;background:var(--c-white);color:var(--c-navy);font-family:var(--font-body);box-shadow:var(--shadow-float);animation:work-details-enter var(--motion-reveal) var(--ease-festival)}
@keyframes work-details-enter{from{transform:translateY(var(--work-details-enter-offset,var(--sp-24)));opacity:0}to{transform:translateY(0);opacity:1}}
.work-details-heading{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-4) var(--sp-12);border-bottom:1px solid var(--c-border);flex:none}
.work-details-heading h2{flex:1;margin:0;font-size:var(--fs-ui-compact);line-height:var(--lh-normal)}
.work-details-close{width:var(--control-h);height:var(--control-h);padding:0;border:0;border-radius:var(--radius-m);background:transparent;color:var(--c-navy);font:inherit;font-size:var(--fs-22);cursor:pointer}
.work-details-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-12)}
.work-details-body h1{margin:0 0 var(--sp-16);font-size:var(--fs-ui-heading);line-height:var(--lh-normal)}
.work-details-body .work-information,.work-details-body .work-private-memo,.work-details-body .work-conversation{margin:0}
.work-details-body .work-private-memo{box-sizing:border-box;width:100%;max-width:none}
:is(.work-details-body,.work-page-side) .work-private-memo{gap:var(--sp-8);padding:var(--sp-12)}
:is(.work-details-body,.work-page-side) .work-private-memo label{font-size:var(--fs-ui-body)}
:is(.work-details-body,.work-page-side) .work-favorite-star svg{width:var(--sp-24);height:var(--sp-24)}
.work-details-body .work-footprints{margin:var(--sp-8) 0}
.work-details-body .work-footprint-status{gap:var(--sp-4)}
.work-details-body .work-footprint-help{font-size:var(--fs-ui-meta);line-height:var(--lh-normal)}
.work-details-body .work-replies-heading{margin:0;font-size:var(--fs-ui-compact);line-height:var(--lh-normal)}
.work-details-body .work-comments-preview{padding:var(--sp-8)}
.work-details-body .work-comments-preview-copy{font-size:var(--fs-ui-compact)}
.work-details-body .work-comments-chevron{right:var(--sp-8);top:var(--sp-8)}
.work-details-status{margin:var(--sp-16);font-size:var(--fs-ui-body);line-height:var(--lh-normal)}
.work-details-retry,.work-details-share{align-self:flex-start;min-height:var(--control-h);padding:var(--sp-8) var(--sp-12);border:1px solid var(--c-border-input);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-navy);font:inherit;cursor:pointer}
.work-details-share{display:inline-flex;align-items:center;justify-content:center;margin-top:var(--sp-12)}
.work-details-share svg{width:var(--sp-20);height:var(--sp-20);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.work-details-panel[data-tab=comments] .work-details-body{display:flex;flex-direction:column;padding:0;overflow:hidden}
.work-details-body [data-work-pane=comments],.work-details-body utamita-work-replies{flex:1;display:flex;flex-direction:column;min-height:0}
.work-details-panel[data-mode=panel] .work-comments-preview{display:none}
.work-details-panel[data-mode=panel] .work-comments-panel{position:static;z-index:auto;flex:1;min-height:0;width:100%;max-width:none;border:0;border-radius:0;box-shadow:none;animation:none}
.work-details-body .work-recommendations{margin:var(--sp-24) calc(-1 * var(--sp-16)) 0;border:0}
.work-details-body .work-recommendations .work-grid{grid-template-columns:minmax(0,1fr)}
.work-details-body .award-grid{grid-template-columns:minmax(0,1fr)}
.site-playback-tab{flex:1;white-space:nowrap;min-width:0;min-height:var(--control-h);padding:var(--sp-4);border:0;background:var(--c-white);color:var(--c-navy);font:inherit;font-size:var(--fs-ui-meta);cursor:pointer}
.site-playback-tab[aria-selected=true]{background:var(--c-navy);color:var(--c-white)}
:is(.site-playback-tab,.work-details-close,.work-details-retry,.work-details-share):focus-visible{outline:var(--focus-ring);outline-offset:calc(-1 * var(--sp-4))}
.site-playback-control:disabled{color:var(--c-text-sub);cursor:default}
.site-playback-controls .site-playback-control svg{width:var(--sp-16);height:var(--sp-16);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 足跡のSVGは図の高さが48（ほかは24）なので、見た目の線の太さをそろえるため線を2倍にする */
.site-playback-controls .site-playback-control svg[data-icon=footprints]{stroke-width:4}
/* PCの情報パネルは画面の右端のサイドパネル（小窓の位置に左右されない）。上は --work-details-top（ヘッダーの下）、下は表示領域の下端 */
/* 幅は --side-panel-size（作品ページの右の列に合わせる。tokens.css） */
@media(min-width:960px){.work-details-panel[data-mode=panel]{left:auto;right:var(--work-details-right,0px);width:var(--side-panel-user-width,var(--side-panel-size));max-width:60%;min-width:var(--side-panel-min-width);border:0;border-left:1px solid var(--c-border);border-radius:0;animation:none}}
@media(prefers-reduced-motion:reduce){.work-details-panel{animation:none}}

.work-details-info-tabs{display:flex;overflow-x:auto;min-height:var(--control-h);border-bottom:1px solid var(--c-border)}
.work-details-info-tabs .site-playback-tab{flex:none;min-width:var(--control-h);padding-inline:var(--sp-8)}


.work-details-panel[data-edge=bottom]{--work-details-enter-offset:calc(-1 * var(--sp-24))}

.work-page{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
.work-page-player{width:100%;min-height:0;max-height:var(--work-page-video-height,none);aspect-ratio:16/9;border-radius:0}
.work-page-info{padding-inline:var(--sp-16);min-width:0}
.work-details-body.in-work-page{display:flex;flex-direction:column;gap:var(--sp-12);overflow:visible;padding:0;min-width:0}
.work-details-body.in-work-page [data-work-pane]{min-width:0}
body[data-page=work] #app{padding-inline:0;padding-top:0}

.work-details-panel[data-mode=page]{position:absolute;z-index:1;bottom:auto;right:auto;display:block;border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none;animation:none}

@media(min-width:960px){.work-details-body.in-work-page .work-recommendations .work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.work-page-heading{display:flex;align-items:flex-start;gap:var(--sp-8);margin-bottom:var(--sp-8)}
.work-page-heading h1{flex:1;min-width:0;margin:0;overflow-wrap:anywhere;font-family:var(--font-body);font-weight:700}
:is(.work-details-body.in-work-page,.work-page-main>[data-work-pane=overview]) .work-page-heading h1{font-size:var(--fs-ui-heading)}
.work-page-share{display:grid;place-items:center;flex:none;width:var(--control-h);height:var(--control-h);min-height:var(--control-h);padding:0;border:0;border-radius:var(--radius-m);background:transparent;color:var(--c-navy);cursor:pointer}
.work-page-share svg{width:var(--sp-20);height:var(--sp-20);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.work-page-share:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
body:has(.work-share-dialog[open]){overflow:hidden}
.work-share-dialog{box-sizing:border-box;position:fixed;inset:auto 0 0;width:100%;max-width:calc(var(--sp-40) * 12);max-height:calc(100dvh - var(--sp-32));margin:0 auto;padding:var(--sp-16);padding-bottom:calc(var(--sp-16) + env(safe-area-inset-bottom));border:1px solid var(--c-border);border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow:auto;background:var(--c-white);color:var(--c-navy);font-family:var(--font-body);box-shadow:var(--shadow-float)}
.work-share-dialog[open]{display:flex;flex-direction:column;gap:var(--sp-12)}
.work-share-dialog::backdrop{background:var(--c-overlay)}
.work-share-grip{align-self:center;width:var(--sp-40);height:var(--sp-4);border-radius:var(--radius-pill);background:var(--c-border-input)}
.work-share-heading{display:flex;align-items:center;gap:var(--sp-8)}
.work-share-heading h2{flex:1;margin:0;font-family:var(--font-heading);font-size:var(--fs-ui-heading);font-weight:900;line-height:var(--lh-normal)}
.work-share-close{width:var(--control-h);height:var(--control-h);padding:0;border:0;border-radius:var(--radius-m);background:transparent;color:var(--c-navy);font:inherit;font-size:var(--fs-22);cursor:pointer}
.work-share-work{margin:0;font-size:var(--fs-ui-meta);line-height:var(--lh-relaxed);overflow-wrap:anywhere}
.work-share-targets{display:flex;gap:var(--sp-8);overflow-x:auto;overscroll-behavior-inline:contain;padding:var(--sp-4)}
.work-share-dialog .work-share-target{box-sizing:border-box;display:flex;flex:none;flex-direction:column;align-items:center;gap:var(--sp-8);width:calc(var(--sp-40) * 2);min-height:var(--control-h);padding:var(--sp-4);border:0;border-radius:var(--radius-m);background:transparent;color:var(--c-navy);font:inherit;font-size:var(--fs-ui-body);line-height:var(--lh-normal);text-decoration:none;text-align:center;cursor:pointer}
.work-share-symbol{display:grid;place-items:center;flex:none;width:var(--control-h-lg);height:var(--control-h-lg);border-radius:50%;background:var(--c-bg-soft);color:var(--c-navy);font-size:var(--fs-22);font-weight:900}
.work-share-symbol-x{background:var(--c-x-black);color:var(--c-white)}
.work-share-symbol-line{background:var(--c-success);color:var(--c-white);font-size:var(--fs-12)}
.work-share-symbol svg,.work-share-copy svg{flex:none;width:var(--sp-24);height:var(--sp-24);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.work-share-url{box-sizing:border-box;width:100%;min-height:var(--control-h);padding:var(--sp-8);border:1px solid var(--c-border-input);border-radius:var(--radius-m);background:var(--c-bg-soft);color:var(--c-navy);font:inherit;font-size:var(--fs-ui-input);line-height:var(--lh-normal)}
.work-share-copy{display:flex;align-items:center;gap:var(--sp-12);min-height:var(--control-h);padding:var(--sp-8);border:0;border-radius:var(--radius-m);background:var(--c-bg-soft);color:var(--c-navy);font:inherit;font-size:var(--fs-ui-body);font-weight:700;cursor:pointer}
.work-share-status{margin:0;font-size:var(--fs-ui-meta);line-height:var(--lh-relaxed);color:var(--c-text-sub)}
.work-share-dialog [hidden]{display:none}
.work-share-copy:hover,.work-share-close:hover,.work-share-dialog .work-share-target:hover{background:var(--c-bg-soft);color:var(--c-navy-deep)}
@media(min-width:960px){.work-share-dialog{inset:0;height:fit-content;width:calc(100% - var(--sp-32));margin:auto;border-radius:var(--radius-xl)}}

.work-rating-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);min-width:0}
.work-rating-row .work-favorite-stars{gap:0}
.work-rating-row .work-priority-label{flex:none;margin:0;white-space:nowrap}
.work-note-preview{display:block;box-sizing:border-box;width:100%;height:var(--control-h);padding:var(--sp-4) var(--sp-12);border:2px solid var(--c-navy);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-navy);font-family:var(--font-body);font-size:var(--fs-ui-input);font-weight:400;line-height:var(--lh-normal);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.work-note-preview[hidden]{display:none}
.work-note-preview:disabled{background:var(--c-bg-soft);cursor:default}
.work-note-preview:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

.work-note-controls{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
.work-note-composer{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
.work-details-panel[data-mode=panel][data-tab=note] .work-details-body{display:flex;flex-direction:column;padding:0;overflow:hidden}
.work-details-panel[data-mode=panel] [data-work-pane=note]{display:flex;flex:1;min-height:0}
.work-details-panel[data-mode=panel] .work-private-memo{flex:1;min-height:0;padding:0;gap:0;border:0;border-radius:0;overflow:hidden}
.work-details-panel[data-mode=panel] .work-note-controls{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0}
.work-details-panel[data-mode=panel] .work-note-composer{box-sizing:border-box;flex:none;max-height:100%;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--c-border);padding:var(--sp-8) var(--sp-12) max(var(--sp-8),env(safe-area-inset-bottom))}

.work-details-panel[data-mode=panel] .work-note-controls>*{margin-inline:var(--sp-12)}
.work-details-panel[data-mode=panel] .work-note-controls>:first-child{margin-top:var(--sp-12)}
.work-details-panel[data-mode=panel] .work-note-controls>:last-child{margin-bottom:var(--sp-12)}

.work-note-composer>.work-note-feedback{order:-1}

/* PCのサイドパネルの選定メモ：入力欄は下端の1行ではなく、お気に入り度の下の大きな編集欄（パネルの残りの高さいっぱい） */
@media(min-width:960px){
.work-details-panel[data-mode=panel][data-tab=note] .work-note-controls{flex:none;overflow:visible}
.work-details-panel[data-mode=panel][data-tab=note] .work-note-composer{flex:1;min-height:0;overflow:visible;border-top:0;padding:0 var(--sp-12) var(--sp-12)}
.work-details-panel[data-mode=panel][data-tab=note] .work-note-composer textarea{flex:1;min-height:calc(var(--control-h) * 1.5);height:auto;max-height:none}
}

/* PC：コメント・足跡・選定メモ・キューを同じパネルの中で切り替えるタブ（情報パネルとキューの先頭に置く） */
.side-panel-tabs{display:none}
@media(min-width:960px){
.work-details-panel[data-mode=panel] .side-panel-tabs,.playback-queue-panel .side-panel-tabs{display:flex;flex:none;gap:var(--sp-4);padding:0 var(--sp-8);border-bottom:1px solid var(--c-border);overflow-x:auto;overscroll-behavior-inline:contain}
.side-panel-tab{display:flex;align-items:center;flex:none;min-height:var(--control-h);padding:0;border:0;background:transparent;color:var(--c-navy);font:inherit;font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-normal);white-space:nowrap;cursor:pointer}
.side-panel-tab-label{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--sp-32);padding:var(--sp-4) var(--sp-12);border:1px solid var(--c-border-input);border-radius:var(--radius-m);background:var(--c-white)}
.side-panel-tab[aria-selected=true] .side-panel-tab-label{background:var(--c-navy);color:var(--c-white);border-color:var(--c-navy)}
.side-panel-tab:disabled{cursor:default}
.side-panel-tab:disabled .side-panel-tab-label{background:var(--c-bg-soft);color:var(--c-text-sub)}
.side-panel-tab:focus-visible{outline:var(--focus-ring);outline-offset:calc(-1 * var(--sp-2))}
}

/* PC：右側パネルの左の境界。ドラッグ・左右の矢印キーで幅を変えられる（幅は --side-panel-user-width に入れ、両方のパネルで共通） */
.side-panel-resizer{display:none}
@media(min-width:960px){
.work-details-panel[data-mode=panel] .side-panel-resizer,.playback-queue-panel .side-panel-resizer{display:block;position:absolute;z-index:3;left:0;top:0;bottom:0;width:var(--sp-8);cursor:col-resize;touch-action:none}
.side-panel-resizer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent}
.side-panel-resizer:hover::before,.side-panel-resizer:focus-visible::before,.side-panel-resizer[data-dragging=true]::before{background:var(--c-navy)}
.side-panel-resizer:focus-visible{outline:var(--focus-ring);outline-offset:calc(-1 * var(--sp-2))}
html[data-resizing-panel]{user-select:none;cursor:col-resize}
}