/* Artwork metadata follows the Figma public QR detail, inside the existing device. */
#artwork-background{scroll-margin-top:calc(var(--header) + 32px)}
.qr-device-stage .device-mockup[data-screen="detail"]{width:min(100%,340px)}
.device-mockup[data-screen="detail"] .device-content.detail-content{top:6.2%;bottom:3%;padding:0;overflow:visible}
.detail-scroll{height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:#626262 #0c0c0c;scroll-padding-top:15cqw;background:#0c0c0c;outline-offset:-3px}
.detail-scroll:focus-visible{outline:2px solid #a6905c}
.detail-scroll::-webkit-scrollbar{width:3px}
.detail-scroll::-webkit-scrollbar-thumb{background:#626262;border-radius:2px}
.detail-scroll::-webkit-scrollbar-track{background:#0c0c0c}
.detail-scroll .detail-interface{padding-inline:4.102564cqw;padding-bottom:5.13cqw;font-family:"Noto Sans JP",var(--sans);font-weight:300;background:#0c0c0c}
.detail-scroll .detail-app-header{position:sticky;top:0;background:#0c0c0c;z-index:1;margin:0 -4.102564cqw 4.1cqw;padding:2cqw 4.102564cqw 3.5cqw;border-bottom:1px solid #282828}
.detail-scroll .detail-app-header>span{font-size:3.076923cqw;color:#999}
.detail-scroll .detail-photo{height:auto;background:#0c0c0c}
.qr-story .detail-scroll .detail-photo>img{display:block;width:100%;height:auto;object-fit:contain;object-position:center}
.detail-scroll .detail-information{padding-top:4.102564cqw}
.detail-scroll .detail-category{font-size:2.564103cqw;color:#999;letter-spacing:.07em}
.detail-scroll .detail-title{font-size:4.615385cqw;font-weight:500;letter-spacing:0;line-height:1.6;margin-top:2.564103cqw}
.detail-scroll .detail-artist{font-size:3.589744cqw;font-weight:500;color:#a6905c;line-height:1.6;margin-top:1.025641cqw}
.detail-scroll .detail-artist>span{font-size:3.076923cqw;color:#999;margin-left:1.538462cqw;font-weight:300}
.detail-basic{border-top:1px solid #282828;margin-top:4.102564cqw;padding-top:4.102564cqw}
.detail-scroll .detail-section-title{display:block;font-size:3.589744cqw;font-weight:500;line-height:1.3;color:#fff;margin:0}
.detail-scroll .detail-facts{margin-top:4.102564cqw;font-size:3.589744cqw;line-height:1.285714;letter-spacing:0}
.detail-scroll .detail-facts>div{display:grid;grid-template-columns:31.284916% minmax(0,1fr);column-gap:1.025641cqw;border:0;padding:0;margin-top:4.102564cqw}
.detail-scroll .detail-facts>div:first-child{margin-top:0}
.detail-scroll .detail-facts dt{color:#999;line-height:1.3;overflow-wrap:anywhere}
.detail-scroll .detail-facts dd{color:#ccc;line-height:1.3;overflow-wrap:anywhere}
.detail-scroll .detail-facts .detail-tags{color:#a6905c;line-height:1.6}
.detail-scroll .detail-background,.detail-scroll .detail-related{border-top:1px solid #282828;margin-top:4.102564cqw;padding-top:4.102564cqw}
.detail-scroll .detail-narrative+.detail-narrative{margin-top:4.102564cqw}
.qr-story .detail-scroll .detail-narrative>p{font-size:3.589744cqw;line-height:1.5;color:#ccc;max-width:none;letter-spacing:0;margin:4.102564cqw 0 0;font-weight:300}
.detail-scroll .detail-save{border:1px solid #fff;border-radius:2.051282cqw;min-height:14.358974cqw;margin-top:5.128205cqw;padding:3cqw 4cqw;background:#0c0c0c;color:#fff;font-size:3.589744cqw;font-weight:500}
.detail-scroll .detail-save>svg{width:4.615385cqw;height:4.615385cqw;flex:none}
.detail-preview-tools{max-width:340px;margin:0 auto;text-align:center}
.detail-preview-tools>p{font-size:11px;line-height:1.8;color:#666;margin:0 auto 11px}
.detail-preview-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:2px;overflow:hidden}
.detail-preview-nav>button{min-height:44px;padding:9px 6px;background:#fff;border:0;color:#666;font:400 12px/1.5 var(--sans);cursor:pointer}
.detail-preview-nav>button+button{border-left:1px solid var(--line)}
.detail-preview-nav>button[aria-pressed="true"]{background:#111;color:#fff}
.detail-preview-nav>button:focus-visible{outline:2px solid #a6905c;outline-offset:-3px}
@media(hover:hover){.detail-preview-nav>button[aria-pressed="false"]:hover{background:#f2f2f2;color:#111}}
@media(max-width:760px){
 .qr-device-stage .device-mockup[data-screen="detail"]{width:min(94%,320px)}
 .detail-preview-tools{max-width:320px;width:94%}
 .detail-preview-tools>p{font-size:10px}
}
@media print{.detail-preview-tools{display:none}}