.jfan{--w:clamp(170px, 22vw, 300px);--h:calc(var(--w) * 1.34);--page-ink:#000;--ease-out:cubic-bezier(.16, 1, .3, 1);isolation:isolate;--card-shadow:0 22px 40px -22px #00000073;background:radial-gradient(120% 90% at 50% 0,#fff 0%,#f3f3f3 55% 100%);border:1px solid #00000014;border-radius:clamp(20px,2.4vw,32px);margin-top:8px;padding:clamp(28px,4vw,56px) 0 clamp(22px,3vw,36px);position:relative;overflow:hidden}.jfan-stage{height:calc(var(--h) + 24px);perspective:1800px;perspective-origin:50% 40%;touch-action:pan-y;cursor:grab;outline:none;position:relative}.jfan-stage:focus-visible{border-radius:16px;box-shadow:inset 0 0 0 2px #000}.jfan-stage.is-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.jfan-item{width:var(--w);height:var(--h);transform-style:preserve-3d;transform-origin:var(--ox) 50%;transform:translate3d(calc(var(--x) * var(--w) + var(--drag,0px)), 0, calc(var(--z) * 1px)) rotateY(calc(var(--ry) * 1deg)) scale(var(--sc));transition:transform .75s var(--ease-out), opacity .45s ease;position:absolute;top:12px;left:50%}.jfan-stage.is-dragging .jfan-item{transition:none}.jfan-item.is-hidden{opacity:0;pointer-events:none}.jfan-cover{box-shadow:var(--card-shadow);transition:border-radius .5s var(--ease-out), filter .5s ease;background:#fff;border-radius:14px;display:block;position:absolute;inset:0;overflow:hidden}.jfan-item:not(.is-open) .jfan-cover{filter:brightness(.82)saturate(.9);cursor:pointer}.jfan-item:not(.is-open) .jfan-cover:hover{filter:none}.jfan-item.is-open .jfan-cover{border-radius:14px 0 0 14px}.jfan-item.is-open .jfan-cover:after{content:"";z-index:2;pointer-events:none;background:linear-gradient(270deg,#00000047,#0000 14%);position:absolute;inset:0}.jfan-page{width:var(--w);height:var(--h);color:var(--page-ink);box-shadow:var(--card-shadow);transform-origin:0;backface-visibility:hidden;transition:transform .8s var(--ease-out);background:linear-gradient(90deg,#f3f3f3 0%,#fff 10%);border-radius:0 14px 14px 0;flex-direction:column;gap:10px;padding:clamp(18px,2vw,30px);text-decoration:none;display:flex;position:absolute;top:0;left:100%;overflow:hidden;transform:rotateY(-179deg)}.jfan-item.is-open .jfan-page{transition-delay:.12s;transform:rotateY(0)}.jfan-page:focus-visible{outline-offset:3px;outline:2px solid #000}.jfan-cat{color:#000;font-family:Dancing Script,Brush Script MT,cursive;font-size:clamp(1.1rem,1.5vw,1.45rem);font-weight:600;line-height:1}.jfan-page h3{-webkit-line-clamp:4;text-wrap:balance;color:var(--page-ink);-webkit-box-orient:vertical;margin:0;font-family:Newsreader,Georgia,serif;font-size:clamp(1.05rem,1.65vw,1.5rem);font-weight:500;line-height:1.15;display:-webkit-box;overflow:hidden}.jfan-excerpt{-webkit-line-clamp:5;color:#000;-webkit-box-orient:vertical;margin:0;font-family:Hanken Grotesk,system-ui,sans-serif;font-size:clamp(.8rem,.95vw,.92rem);line-height:1.5;display:-webkit-box;overflow:hidden}.jfan-meta{color:#000000b8;margin-top:auto;font-family:Hanken Grotesk,system-ui,sans-serif;font-size:.74rem;font-weight:500;line-height:1.4}.jfan-read{letter-spacing:.02em;color:var(--page-ink);font-family:Hanken Grotesk,system-ui,sans-serif;font-size:.8rem;font-weight:700}.jfan-read span{transition:transform .25s var(--ease-out);display:inline-block}.jfan-page:hover .jfan-read span{transform:translate(4px)}.jfan-controls{justify-content:center;align-items:center;gap:18px;margin-top:clamp(16px,2.4vw,28px);display:flex}.jfan-arrow{color:#000;cursor:pointer;background:#fff;border:1px solid #00000029;border-radius:50%;place-items:center;width:44px;height:44px;padding:0;transition:background .2s,transform .2s,opacity .2s;display:grid;box-shadow:0 6px 14px -8px #00000059}.jfan-arrow:hover:not(:disabled){background:#fff;border-color:#00000057;transform:scale(1.06)}.jfan-arrow:disabled{opacity:.35;cursor:default}.jfan-arrow svg{width:16px;height:16px}.jfan-count{text-align:center;letter-spacing:.08em;color:#000000b8;min-width:76px;margin:0;font-family:Hanken Grotesk,system-ui,sans-serif;font-size:.9rem;font-weight:500}.jfan-count b{color:#000;font-weight:700}.jfan-sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.jfan-empty{text-align:center;color:var(--muted,#8a8a8a);padding:48px 0}@media (max-width:640px){.jfan{--w:42vw;--h:calc(var(--w) * 1.75);border-radius:18px}.jfan-page{gap:6px;padding:12px}.jfan-cat{font-size:1rem}.jfan-page h3{-webkit-line-clamp:6;font-size:.95rem}.jfan-excerpt{display:none}.jfan-meta{font-size:.75rem}.jfan-item[data-ad="4"],.jfan-item[data-ad="5"]{opacity:0;pointer-events:none}}@media (prefers-reduced-motion:reduce){.jfan-item,.jfan-page,.jfan-cover{transition:none}}