@charset "UTF-8";
:root { color-scheme:light; --paper:#fafafa; --ink:#242424; --muted:#686868; --line:#dedede; --card-w:136px; --dock-height:192px; font-family:system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
html { scrollbar-gutter:stable; }
body { margin:0; min-height:100svh; padding-bottom:calc(var(--dock-height) + env(safe-area-inset-bottom)); display:flex; flex-direction:column; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:default; opacity:.4; }
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible { outline:2px solid #315cbe; outline-offset:4px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:12px; top:-80px; z-index:1100; background:white; padding:12px; color:var(--ink); }
.skip-link:focus { top:12px; }
.site-header { width:100%; max-width:1440px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; }
.brand { display:flex; align-items:center; min-height:44px; text-decoration:none; font-size:17px; font-weight:750; letter-spacing:-.6px; color:var(--ink); }
.language-picker { position:relative; flex-shrink:0; }
#language-toggle { display:flex; align-items:center; gap:9px; min-height:44px; padding:8px 12px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--muted); font-size:13px; }
#language-toggle:hover,#language-toggle[aria-expanded="true"] { background:#f0f0f0; color:var(--ink); }
#language-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
#language-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:1100; width:164px; padding:5px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 8px 24px #0000000d; }
#language-menu button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; padding:0 12px; border:0; border-radius:8px; background:transparent; font-size:14px; text-align:left; }
#language-menu button:hover,#language-menu button:focus-visible { background:#f4f4f4; }
#language-menu button:focus-visible { outline-offset:-2px; }
#language-menu button[aria-pressed="true"] { font-weight:600; }
#language-menu button[aria-pressed="true"]::after { content:""; width:6px; height:10px; margin-right:3px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:translateY(-2px) rotate(45deg); }
main { flex:1; width:100%; }
.hero { max-width:760px; margin:auto; padding:clamp(48px,9svh,96px) 24px 0; text-align:center; }
h1 { font-size:32px; font-weight:500; line-height:1.4; letter-spacing:-.8px; margin:0; text-wrap:balance; }
#search-form { max-width:680px; margin:28px auto 0; }
.search-box { display:flex; align-items:center; gap:12px; min-height:64px; padding:9px 9px 9px 20px; border:1px solid #d6d6d6; border-radius:16px; background:#fff; transition:border-color .15s,box-shadow .15s; }
.search-box:focus-within { border-color:#777; box-shadow:0 0 0 2px #2424240a; }
.search-icon { width:20px; height:20px; flex-shrink:0; color:var(--muted); }
#query { width:100%; min-width:0; flex:1; border:0; background:none; padding:10px 0; outline:none; color:var(--ink); font-size:16px; line-height:24px; text-align:left; }
#query::placeholder { color:#747474; opacity:1; }
#query::-webkit-search-cancel-button { display:none; }
.search-button { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border:0; border-radius:10px; background:var(--ink); color:white; }
.search-button:hover { background:#444; }
.clear-button { flex:0 0 36px; width:36px; height:44px; padding:0; border:0; background:none; border-radius:8px; font-size:24px; color:var(--muted); }
.clear-button:hover { color:var(--ink); background:#f3f3f3; }
.filters { text-align:left; margin-top:8px; }
.filters summary { display:flex; align-items:center; justify-content:center; gap:7px; width:max-content; min-height:44px; margin-left:auto; padding:0 8px; border-radius:8px; list-style:none; cursor:pointer; color:var(--muted); font-size:13px; }
.filters summary::-webkit-details-marker { display:none; }
.filters summary:hover { color:var(--ink); background:#f0f0f0; }
.filters[open] summary svg { transform:rotate(180deg); }
.filter-fields { display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:12px; padding:12px 0 8px; }
.filter-fields label { color:var(--muted); font-size:12px; }
.filter-fields input,.filter-fields select { width:100%; min-width:0; min-height:44px; margin-top:8px; padding:10px 8px; border:1px solid var(--line); border-radius:8px; background:white; color:var(--ink); font-size:14px; }
.filter-fields :is(input,select):focus-visible { outline:2px solid #315cbe; outline-offset:2px; }
.collection { max-width:1380px; margin:24px auto 0; padding:0 40px; }
.result-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 16px; min-height:24px; }
#status { font-size:14px; font-weight:500; line-height:1.6; color:var(--muted); margin:0; }
.text-button { min-height:44px; padding:8px 0; border:0; background:none; font-size:13px; color:var(--muted); }
.text-button:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.text-button span { margin-left:6px; }
.conditions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.conditions:empty { display:none; }
.condition { padding:5px 9px; border-radius:5px; background:#efefef; color:#5e5e5e; font-size:11px; }
.notice { padding:10px 12px; margin:14px 0; border-left:2px solid #b44c4c; color:#963535; font-size:13px; line-height:1.65; }
.poster-stage { position:relative; height:0; margin:6px -20px 0; isolation:isolate; overflow-anchor:none; }
.poster-stage::before { content:""; position:fixed; inset:auto 0 0; height:var(--dock-height); background:linear-gradient(transparent,var(--paper) 28px); z-index:350; }
.poster-stage::after { content:""; position:fixed; inset:auto 0 0; height:28px; background:linear-gradient(transparent,var(--paper)); pointer-events:none; z-index:550; }
.poster { position:absolute; top:0; left:0; padding:0; border:0; border-radius:4px; width:var(--card-w); height:calc(var(--card-w)*1.5); background:#e2e2e2; transform:translate(var(--x),var(--y)) rotate(var(--rotation)) scale(var(--scale)); transform-origin:50% 100%; transition:transform 750ms cubic-bezier(.22,.75,.16,1),filter 180ms; box-shadow:0 2px 4px #302c2825,0 8px 13px #302c2820; will-change:transform; text-align:left; scroll-margin-block:24px calc(var(--dock-height) + 24px); }
.poster[data-state="pile"] { position:fixed; }
.poster img { display:block; width:100%; height:100%; object-fit:cover; border-radius:4px; border:1px solid #ffffff70; pointer-events:none; }
.poster:is(:hover,:focus-visible) { z-index:600!important; filter:brightness(1.05); }
.poster:focus-visible { outline:3px solid #315cbe; outline-offset:6px; }
.poster.is-result { box-shadow:0 3px 5px #36302a18,0 13px 22px #36302a21; }
.poster-caption { display:none; position:absolute; top:calc(100% + 11px); left:0; width:100%; color:var(--ink); font-size:12px; line-height:1.35; pointer-events:none; }
.is-result .poster-caption { display:block; }
.poster-title { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:600; }
.title-note { display:block; color:var(--muted); font-size:10px; line-height:1.4; margin:4px 0 0; }
.poster-caption small { display:block; font-size:10px; font-weight:400; color:var(--muted); margin-top:5px; }
.poster-error { position:absolute; inset:0; display:none; align-items:center; justify-content:center; padding:10px; color:#555; font-size:12px; text-align:center; line-height:1.5; }
.poster.image-failed img { visibility:hidden; }
.poster.image-failed .poster-error { display:flex; }
.pagination { display:flex; justify-content:center; align-items:center; gap:24px; margin:16px 0 28px; }
.pagination button { min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--muted); font-size:13px; }
.pagination button:hover:not(:disabled) { background:#efefef; }
.pagination span { font-size:12px; color:var(--muted); }
.movie-detail { position:fixed; z-index:1000; width:340px; max-height:calc(100svh - 32px); overflow:auto; background:white; border:1px solid var(--line); padding:28px 24px 24px; border-radius:14px; box-shadow:0 12px 40px #00000014; }
.detail-close { position:absolute; right:6px; top:6px; width:44px; height:44px; padding:0; border:0; border-radius:8px; background:none; color:var(--muted); font-size:25px; }
.movie-detail h2 { margin:0 24px 6px 0; font-size:22px; font-weight:600; line-height:1.35; letter-spacing:-.4px; overflow-wrap:anywhere; }
.original-title { margin:0; font-size:12px; color:var(--muted); }
.detail-meta { color:var(--muted); font-size:12px; margin:18px 0 12px; }
.detail-genres { display:flex; gap:6px; flex-wrap:wrap; }
.detail-genres span { padding:5px 8px; background:#f2f2f2; color:var(--muted); border-radius:5px; font-size:11px; }
.detail-plot { margin:16px 0; color:#555; font-size:13px; line-height:1.75; }
.overview-language { margin:18px 0 -8px; font-size:11px; color:var(--muted); }
.movie-detail dl { margin:0; border-top:1px solid #ebebeb; padding-top:14px; }
.movie-detail dl>div { display:flex; gap:12px; margin:0 0 8px; font-size:12px; line-height:1.6; }
.movie-detail dt { flex:0 0 52px; color:var(--muted); }
.movie-detail dd { margin:0; color:#555; }
.movie-detail a { display:inline-flex; align-items:center; min-height:44px; margin-top:4px; font-size:12px; color:var(--ink); text-underline-offset:4px; }
footer { width:100%; padding:24px; text-align:center; font-size:11px; line-height:1.6; color:var(--muted); }
@media(max-width:700px) {
  :root { --card-w:120px; --dock-height:168px; }
  body:has(.dock-folded) { padding-bottom:env(safe-area-inset-bottom); }
  .poster { transition:transform 750ms cubic-bezier(.22,.75,.16,1),filter 180ms,visibility 0s; }
  .dock-folded .poster[data-state="pile"] { visibility:hidden; pointer-events:none; transition-delay:0s,0s,750ms; }
  .poster-stage::before,.poster-stage::after { transition:transform 750ms cubic-bezier(.22,.75,.16,1),visibility 0s; }
  .dock-folded::before,.dock-folded::after { transform:translateY(100%); visibility:hidden; transition-delay:0s,750ms; }
  body:has(#search-form input:focus) .poster[data-state="pile"],body:has(#search-form input:focus) .poster-stage::before,body:has(#search-form input:focus) .poster-stage::after { visibility:hidden; }
  .site-header { padding:12px 20px; } .brand { font-size:16px; }
  .hero { padding:56px 20px 0; } h1 { font-size:26px; letter-spacing:-.7px; }
  #search-form { margin-top:24px; }
  .search-box { gap:9px; padding-left:14px; }
  .clear-button { flex-basis:32px; width:32px; }
  .filter-fields { grid-template-columns:repeat(2,1fr); gap:12px; } .filter-fields label:first-child { grid-column:1/-1; }
  .filter-fields input,.filter-fields select { font-size:16px; }
  .collection { margin-top:16px; padding:0 20px; } .poster-stage { margin:4px -12px 0; }
  .result-bar { gap:0 12px; } #status { font-size:13px; } .text-button { font-size:12px; }
  .movie-detail { width:calc(100vw - 24px); max-height:70svh; left:12px!important; right:12px; top:auto!important; bottom:12px; padding:28px 24px 20px; }
  footer { padding:20px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }