/* Works use the same page margins and navigation as the creator's shop. */
.us-site .jf-detail { padding:24px 0 56px; background:#faf9fc; color:#24212e; }
.us-site .jf-detail *, .us-site .jf-creator-area * { box-sizing:border-box; }
.jf-work-heading { margin:24px 0; overflow-wrap:anywhere; }
.jf-work-heading h1 { font-size:clamp(28px,4vw,46px); font-weight:750; line-height:1.13; margin:14px 0 10px; }
.jf-work-heading p,.jf-detail p { line-height:1.65; }
.jf-work-heading>a,.jf-section-heading a,.jf-watch>a,.jf-footlink a,.jf-lock a { color:#3c3f92; text-decoration:underline; text-underline-offset:3px; font-weight:650; }
.jf-owned,.jf-tags li { display:inline-block; padding:4px 12px; border-radius:99px; background:#eae7fa; color:#3c356d; }
.jf-panel { background:#fff; border:1px solid #dedbe6; border-radius:20px; padding:clamp(16px,3vw,32px); margin:0 0 20px; min-width:0; overflow-wrap:anywhere; }
.jf-detail h2 { font-size:clamp(20px,2.3vw,27px); font-weight:700; line-height:1.3; }
.jf-detail h3 { font-size:17px; font-weight:650; line-height:1.4; }
.jf-section-heading,.jf-media-file>header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 18px; }
.jf-section-heading { margin-bottom:18px; }
.jf-detail .jf-kicker { margin:0 0 5px; color:#5d5679; text-transform:uppercase; font-size:12px; letter-spacing:.08em; font-weight:700; }
.jf-media-file,.jf-lock { padding:18px 0; border-top:1px solid #e5e2eb; }
.jf-media-file>header>div { flex:1 1 200px; min-width:0; }
.jf-media-file :is(video,audio,img) { display:block; margin:14px auto 0; max-width:100%; }
.jf-media-file video { width:100%; max-height:75vh; border-radius:12px; background:#18171d; object-fit:contain; }
.jf-media-file audio { width:100%; }
.jf-media-file img { width:auto; max-height:85vh; height:auto; object-fit:contain; }
.jf-download { display:inline-flex; align-items:center; min-height:44px; padding:8px 15px; color:#353269; background:#f0eef9; border:1px solid #d9d5eb; border-radius:10px; font-size:14px; font-weight:650; }
.jf-offer,.jf-reading-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:24px; align-items:start; }
.jf-description:first-child { grid-column:1/-1; }
.jf-description .jf-richtext,.jf-tags,.jf-includes,.jf-post-cover { margin:16px 0; }
.jf-richtext { font-size:16px; line-height:1.7; overflow-wrap:anywhere; }
.jf-richtext :is(img,video,iframe) { max-width:100%; }
.jf-richtext img { height:auto; }
.jf-richtext :is(ul,ol),.jf-includes { padding-left:1.35em; }
.jf-richtext ul,.jf-includes { list-style:disc; }
.jf-richtext ol { list-style:decimal; }
.jf-richtext a { text-decoration:underline; color:#3c3f92; }
.jf-main-sample,.jf-post-cover { display:block; width:100%; max-height:60vh; object-fit:contain; border-radius:10px; background:#f4f2f6; }
.jf-thumbnails,.jf-tags,.jf-like { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.jf-thumbnails { margin-top:12px; }
.jf-thumbnails button { width:60px; height:60px; padding:3px; border:2px solid transparent; border-radius:9px; background:#f3f1f6; cursor:pointer; }
.jf-thumbnails button[aria-pressed="true"] { border-color:#3549db; }
.jf-thumbnails img { width:100%; height:100%; object-fit:contain; }
.jf-tags li { font-size:13px; }
.jf-reading-layout { grid-template-columns:minmax(0,2.3fr) minmax(230px,1fr); }
.jf-reading-column,.jf-reading-aside { min-width:0; }
.jf-related li { padding:12px 0; border-bottom:1px solid #ebe8f0; }
.jf-related small { display:block; color:#625e6d; }
.jf-related a { font-weight:650; text-decoration:underline; }
.jf-like .heart { min-width:44px; min-height:44px; border-radius:10px; color:#4b435b; background:#f2eff7; }
.jf-like .heart.fav { color:#b72b50; }
.jf-footlink,.jf-more { margin:24px 0; }
.jf-detail .jf-comments { width:auto; }
.jf-detail #post_left .comment { padding:0; margin:0; }
.us-site .jf-detail :focus-visible,.us-site .jf-creator-area :focus-visible { outline:3px solid #4557df; outline-offset:3px; }
.us-site .jf-creator-area>.bg02 { background:#faf9fc; }
.us-site .jf-creator-area>.bg02>.inner { width:calc(100% - 48px); max-width:1200px; padding:0; margin:auto; }
.jf-creator-tools { padding:20px 0; }
.jf-creator-tools .jf-shop-search { margin:16px 0 0; }
.jf-view-switch { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.jf-view-switch button { min-height:44px; padding:8px 14px; border-radius:10px; border:1px solid #dad6e3; }
.jf-view-switch button[aria-pressed="true"] { background:#302b69; color:#fff; }
@media(max-width:840px){ .jf-reading-layout,.jf-offer { grid-template-columns:minmax(0,1fr); gap:0; } }
@media(max-width:600px){ .us-site .jf-creator-area>.bg02>.inner { width:calc(100% - 32px); } .us-site .jf-detail { padding:16px 0 32px; } .jf-detail .jf-panel { border-radius:16px; } }
/* Fan account pages retain their existing navigation and form actions. */
.us-site#admin_create main>.bg_admin { background:#f8f7f4; }
.us-site#admin_create main>.bg_admin>.admin_wrap { min-width:0; }
.us-site#admin_create .admin_sec { min-width:0; overflow-wrap:anywhere; }
.us-site#admin_create .admin_sec .admin_box,.us-site#admin_create #sidemenu .menu_list { border:1px solid #dedbe6; border-radius:16px; background:#fff; }
.us-site#admin_create .admin_sec h1 { font-size:clamp(24px,3vw,34px); line-height:1.25; }
.us-site#admin_create .jf-history .jf-panel { margin:16px 0; }
.us-site#admin_create .jf-history .jf-panel h2 { font-size:19px; font-weight:700; }
.jf-sample-full { display:block; text-align:center; color:#3c3f92; }
.jf-sample-full span { display:inline-block; padding:8px; text-decoration:underline; }
.jf-view-switch { margin:10px 0; }
.us-site#static main :is(#terms,#privacy) { box-sizing:border-box; width:calc(100% - 32px); max-width:920px; margin:32px auto 64px; padding:clamp(16px,3vw,36px); background:#fff; border:1px solid #e2deea; border-radius:16px; overflow-wrap:anywhere; }
.us-site#static main :is(#terms,#privacy) h1 { margin:0 0 12px; font-size:clamp(28px,4vw,40px); line-height:1.2; }
.us-site#static .term_body p { font-size:16px; line-height:1.72; }

/* Secondary download actions on collectible viewer pages use a light surface. */
.us-site .studio-page .us-button.studio-secondary { color:#3a49cb!important; background:#fff; }