/* Lucian UX/UI Prompt #007 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#007 */
.film-figure figcaption{flex-wrap:wrap}
.film-figure figcaption>span{flex:1 1 180px}
.film-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:110px;padding:8px 12px;border:1px solid var(--line);border-radius:24px;background:transparent;color:var(--brand);font-size:12px;white-space:nowrap;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.film-toggle:hover{background:var(--soft);border-color:var(--brand)}
.film-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.film-toggle:disabled{cursor:wait;opacity:.65}
.film-toggle .film-toggle-icons{position:relative;display:block;width:18px;height:18px;flex:0 0 18px}
.film-toggle .play-icon,.film-toggle .pause-icon{position:absolute;inset:0;width:18px;height:18px;transition:opacity .16s ease,transform .2s cubic-bezier(.22,.68,0,1)}
.film-toggle .play-icon{opacity:1;transform:scale(1)}
.film-toggle .pause-icon{opacity:0;transform:scale(.55)}
.film-toggle.is-playing .play-icon{opacity:0;transform:scale(.55)}
.film-toggle.is-playing .pause-icon{opacity:1;transform:scale(1)}
.film-toggle[data-video-state="waiting"]{border-style:dashed}
.film-play:disabled{cursor:wait;opacity:.8}

/* Lucian UX/UI Prompt #008 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#008 */
.copy-symbol{position:relative;display:inline-block;flex:0 0 19px;width:19px;height:19px;vertical-align:middle}
.copy-symbol .icon{position:absolute;inset:0;width:19px;height:19px;transition:opacity .16s ease,transform .2s cubic-bezier(.22,.68,0,1)}
.copy-symbol .copy-icon{opacity:1;transform:scale(1)}
.copy-symbol .check-icon{opacity:0;transform:scale(.6)}
.is-copied .copy-symbol .copy-icon{opacity:0;transform:scale(.6)}
.is-copied .copy-symbol .check-icon{opacity:1;transform:scale(1)}
#copyInquiry.is-copied{background:var(--soft);border-color:var(--brand);color:var(--brand)}
#copyInquiry:disabled,#shareButton:disabled{cursor:wait;opacity:.65}
#shareButton.is-copied{color:var(--paper)}

/* Lucian UX/UI Prompt #044 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#044 */
.faq-list summary{transition:color .16s ease}
.faq-list summary:hover,.faq-list details[open] summary{color:var(--brand)}
.faq-list summary:focus-visible{outline:2px solid var(--brand);outline-offset:-4px}
.faq-plus{transition:transform .34s cubic-bezier(.22,1,.36,1)}
.faq-plus::after{transition:transform .34s cubic-bezier(.22,1,.36,1)}
.faq-list details[open] .faq-plus{transform:rotate(180deg)}
.faq-list details[data-faq-open="false"] .faq-plus{transform:rotate(0)}
.faq-list details[data-faq-open="false"] .faq-plus::after{transform:rotate(90deg)}
.faq-list details[data-faq-open="true"] .faq-plus{transform:rotate(180deg)}
.faq-list details[data-faq-open="true"] .faq-plus::after{transform:rotate(0)}

@media(prefers-reduced-motion:reduce){
  .film-toggle,.film-toggle .play-icon,.film-toggle .pause-icon,.copy-symbol .icon,.faq-plus,.faq-plus::after,.faq-list summary{transition:none}
}
@media(max-width:600px){
  .film-toggle{font-size:12px;padding-inline:10px;min-width:100px}
  .film-figure figcaption>span{flex-basis:100%}
}