/* =========================================================
   다못죽 — Design System
   ========================================================= */
:root{
  --bg:#0b0b10;
  --bg-elev:#131320;
  --bg-elev-2:#1a1a2b;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);
  --tx:#f2f2f7;
  --tx-dim:#a8a8bd;
  --tx-faint:#8181a0;
  --accent:#ff2f6e;
  --accent-2:#ff8a4c;
  --gold:#ffce4a;
  --ok:#38d39f;
  --warn:#ffb020;
  --danger:#ff5a5a;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  /* overlays: a wash over the page background. They flip in light mode, which
     is why nothing may hardcode rgba(255,255,255,…) any more. */
  --ov-0:rgba(255,255,255,.03);
  --ov-1:rgba(255,255,255,.06);
  --ov-2:rgba(255,255,255,.08);
  --ov-3:rgba(255,255,255,.16);
  --bar-bg:rgba(11,11,16,.82);
  --btn-hover:#242438;
  --nav-on-tx:#fff;
  --nav-on-bg:rgba(255,47,110,.16);
  --cancel-filter:invert(.6);
  --tip-bg:#000;
  --tip-fg:#fff;
  --tip-fg-dim:#b9b9cc;
  /* gold as TEXT on the page background — the star shapes keep --gold */
  --gold-tx:#ffce4a;
  --hero-fade:rgba(11,11,16,.55);
  --tx-body:#dcdce8;
  --scrim:rgba(0,0,0,.72);
  --warn-bg1:rgba(255,176,32,.16);
  --warn-bg2:rgba(255,176,32,.06);
  --warn-line:rgba(255,176,32,.34);
  --warn-tx:#ffdca6;
  --sun:#ff6b6b;
  --sat:#6ba8ff;
  --shadow-1:0 2px 10px rgba(0,0,0,.35);
  --shadow-2:0 12px 40px rgba(0,0,0,.5);
  --topbar-h:60px;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic",system-ui,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:var(--font);
  font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
input,textarea,select{font:inherit}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:800;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:200}
.skip-link:focus{left:8px;top:8px}

.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}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:100;
  background:var(--bar-bg);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  max-width:var(--maxw);margin:0 auto;height:var(--topbar-h);
  display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-4);
}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;font-size:19px;letter-spacing:-.03em;flex:none}
.brand__mark{color:var(--accent);display:flex}
.mainnav{display:flex;gap:2px;flex:1;min-width:0}
.mainnav a{
  padding:8px 12px;border-radius:999px;color:var(--tx-dim);font-size:14px;font-weight:600;
  white-space:nowrap;transition:color .16s,background .16s;
}
.mainnav a:hover{color:var(--tx);background:var(--ov-1)}
.mainnav a.is-active{color:var(--nav-on-tx);background:var(--nav-on-bg)}

.searchbox{position:relative;flex:none;width:230px}
.searchbox__icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--tx-faint);pointer-events:none}
.searchbox input{
  width:100%;background:var(--bg-elev);border:1px solid var(--line);color:var(--tx);
  border-radius:999px;padding:8px 12px 8px 34px;font-size:14px;transition:border-color .16s,background .16s;
}
.searchbox input::placeholder{color:var(--tx-faint)}
.searchbox input:focus{outline:none;border-color:var(--accent);background:var(--bg-elev-2)}
.searchbox input::-webkit-search-cancel-button{filter:var(--cancel-filter)}
.searchbox__results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg-elev-2);
  border:1px solid var(--line-strong);border-radius:var(--r-md);box-shadow:var(--shadow-2);
  max-height:min(420px,60vh);overflow:auto;padding:6px;z-index:120;
}
.searchbox__results:not([hidden]){animation:pop .16s var(--ease)}
.sresult{display:flex;gap:10px;padding:8px;border-radius:10px;cursor:pointer;align-items:center;width:100%;background:none;border:0;text-align:left}
.sresult:hover,.sresult.is-cursor{background:var(--ov-2)}
.sresult__thumb{width:34px;height:50px;border-radius:5px;overflow:hidden;flex:none}
.sresult__t{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sresult__m{font-size:12px;color:var(--tx-faint)}
.sresult__empty{padding:18px;text-align:center;color:var(--tx-faint);font-size:13px}

.accountslot{display:flex;align-items:center;gap:6px;flex:none}
.accountbtn{
  display:inline-flex;align-items:center;gap:7px;background:var(--bg-elev);border:1px solid var(--line);
  color:var(--tx);border-radius:999px;padding:5px 12px 5px 6px;font-size:13px;font-weight:700;cursor:pointer;
  transition:border-color .16s,background .16s;max-width:190px;
}
.accountbtn:hover{border-color:var(--line-strong);background:var(--bg-elev-2)}
.accountbtn__av{
  width:24px;height:24px;border-radius:999px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:12px;font-weight:900;
}
.accountbtn__nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.accountbtn__adm{font-size:10px;font-weight:900;background:var(--gold);color:#2a1d00;border-radius:999px;padding:2px 6px;flex:none}
.mobilenav__account{margin-top:8px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.mobilenav__account .btn{width:100%}
.mobilenav__account .who{font-size:13px;color:var(--tx-dim);padding:2px 10px}

.iconbtn{background:none;border:0;cursor:pointer;padding:8px;border-radius:10px;color:var(--tx-dim);display:flex}
.iconbtn:hover{background:var(--ov-2);color:var(--tx)}
.menubtn{display:none}
.mobilenav{display:none;flex-direction:column;padding:var(--sp-2) var(--sp-4) var(--sp-4);border-top:1px solid var(--line);gap:2px}
.mobilenav a{padding:12px 10px;border-radius:10px;font-weight:600;color:var(--tx-dim)}
.mobilenav a:hover{background:var(--ov-1);color:var(--tx)}

/* ---------- Layout ---------- */
.main{min-height:calc(100vh - var(--topbar-h) - 150px);outline:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--sp-6) var(--sp-4) var(--sp-8)}
.wrap--wide{max-width:1500px}
.page-head{margin-bottom:var(--sp-5)}
.page-head h1{font-size:clamp(24px,4vw,34px)}
.page-head p{color:var(--tx-dim);margin-top:6px;font-size:14.5px}
.section{margin-top:var(--sp-7)}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:var(--sp-4)}
.section__head h2{font-size:19px}
.section__head a{font-size:13px;color:var(--tx-dim);font-weight:600}
.section__head a:hover{color:var(--accent)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line-strong);background:var(--bg-elev-2);color:var(--tx);
  border-radius:10px;padding:9px 16px;font-size:14px;font-weight:700;cursor:pointer;
  transition:transform .12s var(--ease),background .16s,border-color .16s,opacity .16s;
  white-space:nowrap;
}
.btn:hover{background:var(--btn-hover);border-color:var(--line-strong)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--accent);border-color:transparent;color:#fff}
.btn--primary:hover{background:#ff447c}
.btn--ghost{background:transparent;border-color:var(--line)}
.btn--ghost:hover{background:var(--ov-1)}
.btn--danger{background:transparent;border-color:rgba(255,90,90,.4);color:var(--danger)}
.btn--danger:hover{background:rgba(255,90,90,.12)}
.btn--sm{padding:6px 11px;font-size:13px;border-radius:8px}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

.chip{
  border:1px solid var(--line);background:var(--bg-elev);color:var(--tx-dim);
  border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;cursor:pointer;transition:.16s;
}
.chip:hover{color:var(--tx);border-color:var(--line-strong)}
.chip.is-on{background:var(--accent);border-color:transparent;color:#fff}
.chiprow{display:flex;gap:7px;flex-wrap:wrap}

/* ---------- Poster ---------- */
.poster{
  position:relative;aspect-ratio:2/3;border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg-elev-2);display:block;isolation:isolate;
}
.poster img{-webkit-user-drag:none;width:100%;height:100%;object-fit:cover;display:block}
.poster__fb{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:9% 8%;gap:2px;
}
.poster__fb::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.16),transparent 60%),
             linear-gradient(180deg,transparent 30%,rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.poster__fb-t{
  font-weight:900;letter-spacing:-.03em;line-height:1.14;
  font-size:clamp(10px,13cqw,26px);
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);
  position:relative;z-index:1;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.poster__fb-y{font-size:clamp(7px,7cqw,13px);color:rgba(255,255,255,.72);font-weight:700;position:relative;z-index:1}
.poster{container-type:inline-size}

/* ---------- Movie card ---------- */
.mcard{display:flex;flex-direction:column;gap:8px;cursor:pointer;position:relative}
.mcard .poster{box-shadow:var(--shadow-1);transition:transform .2s var(--ease),box-shadow .2s}
.mcard:hover .poster{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.mcard__t{font-size:13.5px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcard__m{font-size:12px;color:var(--tx-faint)}
.mcard__score{
  position:absolute;top:7px;left:7px;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);
  border-radius:999px;padding:3px 8px;font-size:11.5px;font-weight:800;display:flex;align-items:center;gap:3px;
  color:var(--gold);z-index:2;
}
.mcard__mine{position:absolute;top:7px;right:7px;background:var(--accent);border-radius:999px;padding:3px 8px;font-size:11.5px;font-weight:800;z-index:2;color:#fff}

.grid{display:grid;gap:var(--sp-4) var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.grid--sm{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}

.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,1fr);gap:var(--sp-3);overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.rail>*{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}

/* ---------- Stars ---------- */
.stars{display:inline-flex;gap:2px;position:relative}
.stars__s{position:relative;width:1em;height:1em;color:var(--ov-3)}
.stars__s svg{position:absolute;inset:0;width:100%;height:100%}
.stars__s i{position:absolute;inset:0;overflow:hidden;color:var(--gold);display:block}
.stars__s i svg{width:1em;height:1em}
.stars--input{font-size:34px;cursor:pointer;touch-action:none;padding:4px 0}
.stars--input .stars__s{transition:transform .1s var(--ease)}
.stars--input:hover .stars__s{transform:scale(1.04)}
.stars--display{font-size:15px}
.stars--tiny{font-size:12px}

.scoreline{display:flex;align-items:center;gap:10px}
.scoreline__v{font-size:26px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:2.6ch}
.scoreline__v--empty{color:var(--tx-faint)}

/* ---------- Rating board ---------- */
.pyr{margin-top:var(--sp-5);--ptile-w:58px}
.pyr[data-size="s"]{--ptile-w:42px}
.pyr[data-size="l"]{--ptile-w:82px}
.pyr__toolbar{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;margin-bottom:var(--sp-5)}
.pyr__toolbar .pyr__spacer{flex:1 1 auto;min-width:0}
.pyr__group{display:flex;align-items:center;gap:7px}
.pyr__group>label{font-size:12px;font-weight:700;color:var(--tx-faint);white-space:nowrap}
.pyr__modes{display:flex;gap:4px;background:var(--bg-elev);border:1px solid var(--line);border-radius:999px;padding:3px}
.pyr__modes button{background:none;border:0;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--tx-dim);cursor:pointer;transition:.16s}
.pyr__modes button:hover{color:var(--tx)}
.pyr__modes button.is-on{background:var(--accent);color:#fff}

.tiers{display:flex;flex-direction:column;gap:var(--sp-2)}

/* Each tier is a full-width row that grows with its contents and shrinks back
   when emptied — no fixed shape. */
.tier{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--sp-3);
  align-items:stretch;
}
.tier__label{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;
  border-radius:var(--r-md);padding:10px 6px;font-weight:900;position:relative;overflow:hidden;
  border:1px solid var(--line);background:var(--tier-bg,var(--bg-elev));
  align-self:stretch;
}
.tier__score{font-size:21px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--tier-fg,#fff);text-shadow:0 1px 3px rgba(0,0,0,.45)}
/* the label sits on a per-score gradient, so it follows that tier's own
   foreground colour — white on the dark tiers, near-black on the gold one */
.tier__count{font-size:11px;font-weight:700;color:var(--tier-fg,#fff);opacity:.78}
.tier__stars{font-size:9px;opacity:.9}

.tier__body{
  /* a hovered poster grows past the row edge — it must not be clipped */
  overflow:visible;
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:8px;min-height:calc(var(--ptile-w) * 1.5 + 16px);
  display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;justify-content:flex-start;
  background:var(--tier-glow,var(--ov-0));
  /* deliberately NOT transitioning min-height: rows must settle instantly
     when a drag begins, or the drop target moves under the pointer */
  transition:border-color .16s,background .16s,box-shadow .16s;
}
.tier__body.is-drop{border-color:var(--accent);border-style:solid;background:rgba(255,47,110,.14);box-shadow:0 0 0 2px rgba(255,47,110,.25)}

/* Empty tiers collapse to a slim bar but stay a valid drop target. */
.tier--empty{opacity:.5}
/* Empty rows keep ONE height, drag or no drag. They used to grow when a drag
   started, which pushed every row below down mid-gesture — so the poster landed
   a tier away from where the user had aimed. 62px is already a comfortable
   drop target, so nothing has to move. */
.tier--empty .tier__body{min-height:62px;border-style:dashed;background:transparent;align-content:center}
.tier--empty .tier__label{padding:6px}
.tier--empty .tier__score{font-size:15px}
.is-dragging-active .tier--empty{opacity:1}
.tier__empty{color:var(--tx-faint);font-size:12px;align-self:center;opacity:0;transition:opacity .16s}
.is-dragging-active .tier__empty{opacity:1}
.tier--top .tier__label{box-shadow:0 0 26px rgba(255,206,74,.3)}
.tier__crown{position:absolute;top:-7px;left:50%;transform:translateX(-50%);font-size:13px;z-index:4;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

.ptile{
  width:var(--ptile-w);flex:none;cursor:grab;position:relative;border-radius:6px;
  /* no native image drag, no text selection: both hijack the gesture and our
     own drag never gets its pointermove events */
  user-select:none;-webkit-user-select:none;
  transition:transform .16s var(--ease),box-shadow .16s,width .28s var(--ease);
  /* kills the 300ms double-tap delay; the press-and-hold drag stops scrolling
     itself, from a non-passive touchmove handler in pyramid.js */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
/* Hover preview: the poster doubles in place. Fine pointers only — on a touch
   screen "hover" sticks to whatever was tapped last, and the card that opens on
   tap is the preview there. */
@media (hover:hover) and (pointer:fine){
  .ptile:hover{transform:scale(2);z-index:40;box-shadow:0 18px 44px rgba(0,0,0,.6)}
  /* the tooltip is a child, so it would double too — undo it */
  .ptile:hover .ptile__tip{transform:translateX(-50%) scale(.5);transform-origin:bottom center}
  /* never fight a drag in progress */
  .is-dragging-active .ptile:hover{transform:none;box-shadow:none}
  .ptile.is-dragging:hover{transform:none}
}
.ptile:active{cursor:grabbing}
.ptile.is-dragging{opacity:.35}
.ptile .poster{border-radius:6px}
/* The insertion caret must never change a row's height — otherwise inserting it
   on hover pushes the rows below down and the drop lands one tier off. */
.ptile__slot{width:4px;align-self:stretch;border-radius:99px;background:var(--accent);opacity:0;transition:opacity .12s;flex:none;min-height:24px}
.ptile__slot.is-on{opacity:1}
.ptile__tip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--tip-bg);color:var(--tip-fg);border:1px solid var(--line-strong);border-radius:9px;padding:7px 10px;
  width:max-content;max-width:230px;font-size:12px;z-index:20;pointer-events:none;
  opacity:0;transition:opacity .14s;box-shadow:var(--shadow-2);
}
.ptile:hover .ptile__tip{opacity:1}
.ptile__tip b{display:block;font-size:12.5px;margin-bottom:2px;color:var(--tip-fg)}
.ptile__tip span{color:var(--tip-fg-dim);display:block;line-height:1.4}

.tier__toggle{
  width:var(--ptile-w);aspect-ratio:2/3;border-radius:6px;border:1px dashed var(--line-strong);background:var(--bg-elev);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:11px;font-weight:800;color:var(--tx-dim);cursor:pointer;line-height:1.2;text-align:center;flex:none;
}
.tier__toggle:hover{color:var(--tx);border-color:var(--accent)}

.pyr__hint{
  display:flex;gap:8px;align-items:center;color:var(--tx-faint);font-size:12.5px;
  margin-top:var(--sp-4);justify-content:center;flex-wrap:wrap;text-align:center;
}

/* Stats strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-5)}
.stat{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4)}
.stat__k{font-size:12px;color:var(--tx-faint);font-weight:700}
.stat__v{font-size:24px;font-weight:900;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.stat__v small{font-size:13px;color:var(--tx-dim);font-weight:700}

/* Histogram */
.histo{display:flex;align-items:flex-end;gap:8px;height:260px;padding:var(--sp-4);background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-lg)}
.histo__col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%;cursor:pointer}
.histo__bar{width:100%;border-radius:6px 6px 3px 3px;min-height:3px;transition:height .5s var(--ease),filter .16s;background:var(--bar,var(--accent))}
.histo__col:hover .histo__bar{filter:brightness(1.25)}
.histo__n{font-size:11.5px;font-weight:800;color:var(--tx-dim);font-variant-numeric:tabular-nums}
.histo__x{font-size:11px;color:var(--tx-faint);font-variant-numeric:tabular-nums}

/* ---------- Calendar ---------- */
.cal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.cal__nav{display:flex;align-items:center;gap:6px}
.cal__title{font-size:22px;font-weight:900;letter-spacing:-.02em;min-width:150px;text-align:center;font-variant-numeric:tabular-nums}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:transparent}
.cal__dow{text-align:center;font-size:12px;font-weight:800;color:var(--tx-faint);padding:6px 0}
.cal__dow.sun{color:var(--sun)}.cal__dow.sat{color:var(--sat)}
.cal__cell{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-md);
  min-height:124px;padding:7px;display:flex;flex-direction:column;gap:6px;position:relative;
  transition:border-color .16s,background .16s;
}
.cal__cell.is-out{opacity:.32}
.cal__cell.has-items{cursor:pointer}
.cal__cell.has-items:hover{border-color:var(--accent);background:var(--bg-elev-2)}
.cal__cell.is-today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.cal__d{font-size:12px;font-weight:800;color:var(--tx-dim);display:flex;align-items:center;gap:5px}
.cal__cell.is-today .cal__d{color:var(--accent)}
.cal__d .dot{width:5px;height:5px;border-radius:99px;background:var(--accent)}
.cal__posters{display:flex;gap:4px;flex-wrap:wrap}
.cal__p{width:38px;border-radius:4px;overflow:hidden;position:relative;flex:none}
.cal__p .poster{border-radius:4px}
.cal__more{
  width:38px;aspect-ratio:2/3;border-radius:4px;background:var(--ov-2);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--tx-dim);
}
.cal__legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--tx-faint);font-size:12.5px;margin-top:var(--sp-4);align-items:center}

.cal__list{display:none;flex-direction:column;gap:var(--sp-2)}
.cal__day{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3)}
.cal__day h3{font-size:14px;margin-bottom:10px;color:var(--tx-dim)}
.cal__day.is-today h3{color:var(--accent)}

/* ---------- Movie detail ---------- */
.mdetail__hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.mdetail__bg{position:absolute;inset:0;filter:blur(42px) saturate(1.5);opacity:.4;transform:scale(1.25)}
.mdetail__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--hero-fade),var(--bg) 88%)}
.mdetail__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:var(--sp-6) var(--sp-4);display:grid;grid-template-columns:216px 1fr;gap:var(--sp-6)}
.mdetail__poster{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-2)}
.mdetail h1{font-size:clamp(24px,4.5vw,38px)}
.mdetail__orig{color:var(--tx-dim);font-size:14.5px;margin-top:5px}
.mdetail__meta{color:var(--tx-dim);font-size:13.5px;margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mdetail__meta .sep{color:var(--tx-faint)}
.mdetail__syn{margin-top:var(--sp-4);color:var(--tx-body);font-size:14.5px;max-width:62ch;line-height:1.75}
.mdetail__scores{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-5)}
.bigscore{background:var(--ov-2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 18px;min-width:132px}
.bigscore__k{font-size:11.5px;color:var(--tx-faint);font-weight:800;letter-spacing:.02em}
.bigscore__v{font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-top:2px;font-variant-numeric:tabular-nums}
.bigscore__v small{font-size:14px;color:var(--tx-faint)}
.bigscore--mine{border-color:rgba(255,47,110,.5);background:rgba(255,47,110,.1)}
.bigscore--dmj{border-color:rgba(255,206,74,.45);background:rgba(255,206,74,.09)}

.myrate{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);margin-top:var(--sp-6)}
.myrate h2{font-size:17px;margin-bottom:4px}
.myrate__sub{color:var(--tx-dim);font-size:13.5px;margin-bottom:var(--sp-4)}
.myrate__row{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.field{margin-top:var(--sp-4)}
.field label{display:block;font-size:13px;font-weight:800;margin-bottom:7px}
.field label .req{color:var(--accent);margin-left:3px}
.input,.textarea{
  width:100%;background:var(--bg);border:1px solid var(--line-strong);color:var(--tx);
  border-radius:10px;padding:11px 13px;font-size:14.5px;transition:border-color .16s;resize:vertical;
}
.input:focus,.textarea:focus{outline:none;border-color:var(--accent)}
.input::placeholder,.textarea::placeholder{color:var(--tx-faint)}
.field__foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:12px;color:var(--tx-faint)}
.field__err{color:var(--danger);font-size:12.5px;margin-top:6px;font-weight:700;display:none}
.field.is-err .input,.field.is-err .textarea{border-color:var(--danger)}
.field.is-err .field__err{display:block}

.reviews{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-4)}
.review{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4)}
.review__head{display:flex;align-items:center;gap:10px;margin-bottom:7px;flex-wrap:wrap}
.review__who{font-weight:800;font-size:13.5px}
.review__when{font-size:12px;color:var(--tx-faint);margin-left:auto}
.review__body{font-size:14.5px;line-height:1.65;color:var(--tx-body);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.review--dmj{border-color:rgba(255,206,74,.35);background:linear-gradient(90deg,rgba(255,206,74,.07),transparent 60%)}
.badge{font-size:10.5px;font-weight:900;padding:3px 8px;border-radius:999px;background:var(--accent);color:#fff;letter-spacing:.02em}
.badge--dmj{background:var(--gold);color:#2a1d00}
.badge--soft{background:var(--ov-3);color:var(--tx-dim)}

/* ---------- Distribution bar ---------- */
.dist{display:flex;flex-direction:column;gap:5px;margin-top:var(--sp-3)}
.dist__row{display:grid;grid-template-columns:38px 1fr 32px;gap:9px;align-items:center;font-size:11.5px;color:var(--tx-faint)}
.dist__track{height:7px;background:var(--ov-2);border-radius:99px;overflow:hidden}
.dist__fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px;transition:width .5s var(--ease)}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(5px);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--sp-4);
  animation:fade .16s var(--ease);
}
.modal{
  background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  width:100%;max-width:520px;max-height:88vh;overflow:auto;box-shadow:var(--shadow-2);
  animation:pop .2s var(--ease);
}
.modal--wide{max-width:820px}
.modal__head{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5) 0}
.modal__head h2{font-size:18px;flex:1}
.modal__head p{font-size:13px;color:var(--tx-dim);margin-top:4px}
.modal__body{padding:var(--sp-4) var(--sp-5)}
.modal__foot{display:flex;gap:10px;justify-content:flex-end;padding:0 var(--sp-5) var(--sp-5);flex-wrap:wrap}
.modal__foot .spacer{flex:1}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- Toast ---------- */
.toastroot{position:fixed;left:50%;transform:translateX(-50%);bottom:var(--toast-bottom,26px);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  background:var(--bg-elev-2);border:1px solid var(--line-strong);color:var(--tx);
  padding:11px 18px;border-radius:999px;font-size:13.5px;font-weight:700;box-shadow:var(--shadow-2);
  animation:toastin .22s var(--ease);max-width:min(92vw,460px);text-align:center;
}
.toast--ok{border-color:rgba(56,211,159,.5)}
.toast--err{border-color:rgba(255,90,90,.55)}
@keyframes toastin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Empty / loading ---------- */
.empty{text-align:center;padding:var(--sp-8) var(--sp-4);color:var(--tx-faint)}
.empty__icon{font-size:40px;margin-bottom:var(--sp-3);opacity:.5}
.empty h3{font-size:17px;color:var(--tx-dim);margin-bottom:8px}
.empty p{font-size:14px;max-width:44ch;margin:0 auto var(--sp-4)}
.skel{background:linear-gradient(90deg,var(--bg-elev) 25%,var(--bg-elev-2) 50%,var(--bg-elev) 75%);background-size:200% 100%;animation:shim 1.2s infinite;border-radius:var(--r-sm)}
@keyframes shim{from{background-position:200% 0}to{background-position:-200% 0}}
.skel--poster{aspect-ratio:2/3}

/* ---------- Table (admin) ---------- */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th,.table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.table th{color:var(--tx-faint);font-size:12px;font-weight:800;white-space:nowrap}
.table tbody tr:hover{background:var(--ov-0)}
.table__scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-elev)}

.note{background:var(--bg-elev);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-md);padding:var(--sp-4);font-size:13.5px;color:var(--tx-dim);line-height:1.7}
.note b{color:var(--tx)}
.note--gold{border-left-color:var(--gold)}

.footer{border-top:1px solid var(--line);margin-top:var(--sp-8);background:var(--bg-elev)}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:var(--sp-6) var(--sp-4);display:flex;flex-direction:column;gap:8px}
.footer__brand{font-weight:800;font-size:14px}
.footer__note{font-size:12px;color:var(--tx-faint);line-height:1.7}
.footer__links{display:flex;gap:16px;font-size:12.5px;color:var(--tx-dim);margin-top:4px}
.footer__links a:hover{color:var(--accent)}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .searchbox{width:180px}
  .mainnav a{padding:8px 9px;font-size:13.5px}
}
@media (max-width:880px){
  .accountslot{display:none}
  .mainnav{display:none}
  .menubtn{display:flex}
  .mobilenav[hidden]{display:none}
  .mobilenav{display:flex}
  .searchbox{flex:1;width:auto}
  .mdetail__inner{grid-template-columns:140px 1fr;gap:var(--sp-4)}
  .tier{grid-template-columns:68px minmax(0,1fr);gap:var(--sp-2)}
  .tier__score{font-size:18px}
  .pyr{--ptile-w:52px}
  .pyr[data-size="s"]{--ptile-w:40px}
  .pyr[data-size="l"]{--ptile-w:68px}
  .cal__grid{display:none}
  .cal__list{display:flex}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .wrap{padding:var(--sp-5) var(--sp-3) var(--sp-7)}
  .mdetail__inner{grid-template-columns:1fr;padding:var(--sp-5) var(--sp-3)}
  .mdetail__poster{width:150px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(102px,1fr))}
  .pyr{--ptile-w:46px}
  .pyr[data-size="s"]{--ptile-w:36px}
  .pyr[data-size="l"]{--ptile-w:60px}
  .stars--input{font-size:30px}
  .modal__head,.modal__body,.modal__foot{padding-left:var(--sp-4);padding-right:var(--sp-4)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* 저장 불가 경고 — 휴대폰에서 파일을 직접 열었을 때만 나타납니다 */
.storagewarn{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 16px;font-size:13px;line-height:1.5;
  background:linear-gradient(90deg,var(--warn-bg1),var(--warn-bg2));
  border-bottom:1px solid var(--warn-line);color:var(--warn-tx);
}
.storagewarn__t{flex:1 1 auto;min-width:0}
.storagewarn b{color:var(--warn)}
.storagewarn__x{
  margin-left:auto;flex:none;background:none;border:0;cursor:pointer;
  color:inherit;opacity:.7;font-size:14px;line-height:1;padding:2px 4px;
}
.storagewarn__x:hover{opacity:1}


/* ---------- 평점 카드 (보드에서 포스터를 눌렀을 때) ---------- */
.rhead{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.rhead__poster{width:118px;flex:none;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-2)}
.rhead__body{min-width:0;flex:1 1 auto}
.rhead__t{font-size:20px;font-weight:900;line-height:1.25}
.rhead__ot{font-size:13px;color:var(--tx-faint);margin-top:2px}
.rhead__meta{font-size:13px;color:var(--tx-dim);margin-top:7px}
.rhead__credit{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--tx-faint);margin-top:7px}
.rhead__credit b{color:var(--tx-dim);font-weight:700}
.rhead__plot{
  font-size:13px;line-height:1.6;color:var(--tx-dim);margin-top:10px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:560px){
  .rhead{gap:12px}
  .rhead__poster{width:92px}
  .rhead__t{font-size:17px}
  .rhead__plot{-webkit-line-clamp:3}
}




/* ---------- 눌러서 옮기기 (tap → 점수 선택) ---------- */
.ptile.is-armed{transform:scale(1.12);box-shadow:var(--shadow-2);z-index:4}
/* a tooltip is a hover affordance; on a touch screen it sticks to whatever was
   tapped last and covers the board */
@media (hover:none){.ptile:hover .ptile__tip{opacity:0}}
/* the source tile's tooltip must not hang around over the board mid-drag */
.is-dragging-active .ptile__tip{opacity:0!important}

/* =========================================================
   라이트 모드
   기본값은 다크입니다. 라이트는 두 가지 경우에 켜집니다.
     1) 사용자가 직접 골랐을 때        → html[data-theme="light"]
     2) "시스템 설정" 이고 OS가 밝을 때 → prefers-color-scheme: light
   다크를 직접 고른 사람은 OS가 밝아도 다크로 남아야 하므로
   :not([data-theme="dark"]) 로 막습니다.
   ========================================================= */
:root[data-theme="light"]{
  --bg:#f6f6fa;
  --bg-elev:#ffffff;
  --bg-elev-2:#eeeef5;
  --line:rgba(18,18,38,.11);
  --line-strong:rgba(18,18,38,.22);
  --tx:#15151d;
  --tx-dim:#45455a;
  --tx-faint:#65657c;
  --tx-body:#2c2c3a;
  --accent:#e01458;
  --accent-2:#e56a1f;
  --gold:#d99400;
  --gold-tx:#8a5c00;
  --tip-fg-dim:#c9c9d8;
  --ok:#0d8f5f;
  --warn:#a35c00;
  --danger:#cf2a2a;
  --ov-0:rgba(18,18,38,.03);
  --ov-1:rgba(18,18,38,.055);
  --ov-2:rgba(18,18,38,.085);
  --ov-3:rgba(18,18,38,.16);
  --bar-bg:rgba(255,255,255,.86);
  --tip-bg:#1c1c26;
  --tip-fg:#f4f4f8;
  --hero-fade:rgba(246,246,250,.5);
  --scrim:rgba(20,20,35,.42);
  --warn-bg1:rgba(200,120,0,.14);
  --warn-bg2:rgba(200,120,0,.05);
  --warn-line:rgba(200,120,0,.32);
  --warn-tx:#7a4600;
  --btn-hover:#e6e6f0;
  --nav-on-tx:#c50f4c;
  --nav-on-bg:rgba(224,20,88,.12);
  --cancel-filter:none;
  --sun:#c22b2b;
  --sat:#2f6fd0;
  --shadow-1:0 2px 10px rgba(20,20,50,.10);
  --shadow-2:0 12px 40px rgba(20,20,50,.20);
}

@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
  --bg:#f6f6fa;
  --bg-elev:#ffffff;
  --bg-elev-2:#eeeef5;
  --line:rgba(18,18,38,.11);
  --line-strong:rgba(18,18,38,.22);
  --tx:#15151d;
  --tx-dim:#45455a;
  --tx-faint:#65657c;
  --tx-body:#2c2c3a;
  --accent:#e01458;
  --accent-2:#e56a1f;
  --gold:#d99400;
  --gold-tx:#8a5c00;
  --tip-fg-dim:#c9c9d8;
  --ok:#0d8f5f;
  --warn:#a35c00;
  --danger:#cf2a2a;
  --ov-0:rgba(18,18,38,.03);
  --ov-1:rgba(18,18,38,.055);
  --ov-2:rgba(18,18,38,.085);
  --ov-3:rgba(18,18,38,.16);
  --bar-bg:rgba(255,255,255,.86);
  --tip-bg:#1c1c26;
  --tip-fg:#f4f4f8;
  --hero-fade:rgba(246,246,250,.5);
  --scrim:rgba(20,20,35,.42);
  --warn-bg1:rgba(200,120,0,.14);
  --warn-bg2:rgba(200,120,0,.05);
  --warn-line:rgba(200,120,0,.32);
  --warn-tx:#7a4600;
  --btn-hover:#e6e6f0;
  --nav-on-tx:#c50f4c;
  --nav-on-bg:rgba(224,20,88,.12);
  --cancel-filter:none;
  --sun:#c22b2b;
  --sat:#2f6fd0;
  --shadow-1:0 2px 10px rgba(20,20,50,.10);
  --shadow-2:0 12px 40px rgba(20,20,50,.20);
}
}


/* ---------- 테마 전환 ---------- */
.themeslot{display:flex;align-items:center;flex:none}
.themebtn{color:var(--tx-dim)}
.themebtn[data-theme="light"]{color:var(--gold-tx)}
.themebtn[data-theme="dark"]{color:var(--tx-dim)}

.themepick{
  display:inline-flex;gap:2px;padding:3px;border-radius:999px;
  background:var(--bg-elev-2);border:1px solid var(--line);
}
.themepick button{
  display:inline-flex;align-items:center;gap:6px;
  border:0;background:none;cursor:pointer;font-family:inherit;
  padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--tx-dim);
  transition:background .16s,color .16s;
}
.themepick button:hover{color:var(--tx);background:var(--ov-1)}
.themepick button.is-on{background:var(--accent);color:#fff}
.themepick svg{flex:none}
.themepick--compact{width:100%;justify-content:space-between}
.themepick--compact button{flex:1;justify-content:center;padding:9px 6px;font-size:12.5px}
.themepick--compact span{display:none}
@media (max-width:420px){ .themepick span{display:none} }
.mobilenav__theme{margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}