/* ONESHEET — 영화 포스터로 방 꾸미기
   길이는 전부 cm 로 생각한다. --cm 은 JS가 화면 크기에 맞춰 넣는 px/cm 비율. */

:root{
  --cm:3px;                 /* JS가 갱신 */
  --bg:#0b0b0c;
  --text:#f5f5f7;
  --text2:#8e8e93;
  --hair:rgba(255,255,255,.12);
  --surface:rgba(28,28,30,.72);
  --surface2:rgba(255,255,255,.10);
  --accent:#f5c451;
  --ease:cubic-bezier(.22,.61,.36,1);
  --soft:cubic-bezier(.25,.9,.3,1);

  --wall:#e8e4dd;           /* 배경색 */
  --onwall:#1c1c1e;         /* 그 위에 얹는 글자색 */
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;overscroll-behavior:none;
  touch-action:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
input{font:inherit;color:inherit;background:none;border:0;outline:0}

/* ── 방 ─────────────────────────────────────────────────────────── */
.stage{position:fixed;inset:0;overflow:hidden;background:var(--wall);user-select:none;cursor:grab}
.stage.panning{cursor:grabbing}

.wall{
  position:absolute;inset:0;
  background:var(--wall);
  transition:background .55s var(--ease);
}

/* 이 두 통이 pan 만큼 통째로 밀린다 = 사방으로 이어지는 면 */
.posters{position:absolute;inset:0;z-index:4;will-change:transform}
.guides{position:absolute;inset:0;z-index:6;pointer-events:none;will-change:transform}
.guide{position:absolute;background:var(--accent);opacity:.9}
/* 면을 끌고 다녀도 안내선이 화면 끝까지 이어지도록 넉넉히 뺀다 */
.guide.v{width:1px;top:-200vh;bottom:-200vh}
.guide.h{height:1px;left:-200vw;right:-200vw}

.empty{
  position:absolute;left:0;right:0;top:34%;text-align:center;
  color:var(--onwall,#1c1c1e);opacity:.42;pointer-events:none;z-index:3;
  transition:opacity .5s var(--ease),color .55s var(--ease);
}
.empty span{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.empty em{display:block;margin-top:6px;font-size:13px;font-style:normal;opacity:.72}
.empty.gone{opacity:0}

/* ── 포스터 ─────────────────────────────────────────────────────── */
.poster{
  position:absolute;left:50%;bottom:0;
  width:var(--w);height:var(--h);
  transform:translate(calc(-50% + var(--x)),calc(50% - var(--y))) rotate(var(--r,0deg));
  cursor:grab;touch-action:none;
  transition:filter .3s var(--ease);
}
.poster.dragging{cursor:grabbing;z-index:999 !important}
.poster.settling{transition:transform .5s var(--soft), width .5s var(--soft), height .5s var(--soft)}
.poster .paper{
  position:absolute;inset:0;overflow:hidden;
  border:var(--fb,0) solid transparent;   /* 액자 테두리 두께는 JS가 cm 로 넣는다 */
  box-shadow:
    0 calc(.5 * var(--cm)) calc(1.4 * var(--cm)) rgba(0,0,0,.26),
    0 calc(.1 * var(--cm)) calc(.3 * var(--cm)) rgba(0,0,0,.18);
}
.poster .mat{position:absolute;inset:0;padding:var(--fp,0);overflow:hidden}
/* 아무것도 안 붙인 종이는 모서리를 살짝 굴린다 */
.poster[data-frame="none"] .paper{border-radius:calc(.9 * var(--cm))}
.poster .sheetimg{
  width:100%;height:100%;object-fit:cover;display:block;background:#111;
}
/* 벽의 빛이 종이에도 똑같이 앉는다 */
.poster .paper::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.16),transparent 42%,rgba(0,0,0,.10));
}

/* 액자 ─ 테이프 */
.poster[data-frame="tape"] .tape{
  position:absolute;width:calc(5.5 * var(--cm));height:calc(2.2 * var(--cm));
  background:linear-gradient(180deg,rgba(255,252,238,.82),rgba(240,232,206,.72));
  box-shadow:0 calc(.2 * var(--cm)) calc(.5 * var(--cm)) rgba(0,0,0,.18);
  z-index:2;
}
.poster .tape{display:none}
.poster[data-frame="tape"] .tape{display:block}
.poster .tape.t1{left:calc(-2 * var(--cm));top:calc(-1 * var(--cm));transform:rotate(-42deg)}
.poster .tape.t2{right:calc(-2 * var(--cm));top:calc(-1 * var(--cm));transform:rotate(42deg)}
.poster .tape.t3{left:calc(-2 * var(--cm));bottom:calc(-1 * var(--cm));transform:rotate(42deg)}
.poster .tape.t4{right:calc(-2 * var(--cm));bottom:calc(-1 * var(--cm));transform:rotate(-42deg)}

/* 액자 ─ 압정 */
.poster .pin{display:none}
.poster[data-frame="pin"] .pin{
  display:block;position:absolute;left:50%;top:calc(-1.1 * var(--cm));
  width:calc(2.4 * var(--cm));height:calc(2.4 * var(--cm));margin-left:calc(-1.2 * var(--cm));
  border-radius:50%;z-index:3;
  background:radial-gradient(circle at 34% 30%, #fff, #c9ccd2 42%, #6f747c);
  box-shadow:0 calc(.3 * var(--cm)) calc(.6 * var(--cm)) rgba(0,0,0,.4);
}
/* 압정 하나로 붙인 종이는 아래가 살짝 뜬다 */
.poster[data-frame="pin"] .paper{
  box-shadow:
    0 calc(1 * var(--cm)) calc(2 * var(--cm)) rgba(0,0,0,.28),
    0 calc(.1 * var(--cm)) calc(.3 * var(--cm)) rgba(0,0,0,.16);
}

/* 액자 ─ 집게 */
.poster .clip{display:none}
.poster[data-frame="clip"] .clip{
  display:block;position:absolute;left:50%;top:calc(-1.3 * var(--cm));
  width:calc(4.6 * var(--cm));height:calc(2.4 * var(--cm));
  margin-left:calc(-2.3 * var(--cm));border-radius:calc(.4 * var(--cm));
  background:linear-gradient(180deg,#464a52,#22242a 58%,#51555e);
  box-shadow:0 calc(.35 * var(--cm)) calc(.9 * var(--cm)) rgba(0,0,0,.44);
  z-index:3;
}
.poster[data-frame="clip"] .clip::after{ /* 집게 가운데 반짝이는 띠 */
  content:'';position:absolute;left:16%;right:16%;top:36%;height:16%;
  background:rgba(255,255,255,.24);border-radius:99px;
}
.poster[data-frame="clip"] .paper{
  box-shadow:
    0 calc(1 * var(--cm)) calc(2 * var(--cm)) rgba(0,0,0,.28),
    0 calc(.1 * var(--cm)) calc(.3 * var(--cm)) rgba(0,0,0,.16);
}

/* 액자 ─ 검정 / 화이트 / 원목 / 매트 */
.poster[data-frame="thin"] .paper,
.poster[data-frame="white"] .paper,
.poster[data-frame="wood"] .paper,
.poster[data-frame="mat"] .paper{
  box-shadow:
    0 calc(1.6 * var(--cm)) calc(3.2 * var(--cm)) rgba(0,0,0,.34),
    0 calc(.3 * var(--cm)) calc(.8 * var(--cm)) rgba(0,0,0,.22);
}
/* 테두리는 투명하게 두고 배경이 그 아래로 깔리게 한다 → 결이 테두리에 보인다 */
.poster[data-frame="thin"] .paper{background:linear-gradient(150deg,#2a2c30,#141517 55%,#232529)}
.poster[data-frame="mat"] .paper{background:linear-gradient(150deg,#2a2c30,#141517 55%,#232529)}
.poster[data-frame="white"] .paper{background:linear-gradient(150deg,#fff,#e6e4df 55%,#f7f6f3)}
.poster[data-frame="wood"] .paper{background:linear-gradient(150deg,#d9b184,#a97a45 45%,#c99a63)}
.poster[data-frame="wood"] .mat{background:#fbf9f4}
.poster[data-frame="mat"] .mat{background:#fbfaf7}
/* 액자와 그림이 만나는 곳에 얇은 그늘 — 이게 있어야 액자로 읽힌다 */
.poster[data-frame="thin"] .mat,
.poster[data-frame="white"] .mat,
.poster[data-frame="wood"] .mat,
.poster[data-frame="mat"] .mat{box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}
/* 넓은 매트는 그림 둘레에만 그늘이 져야 한다 */
.poster[data-frame="mat"] .mat{box-shadow:none}
.poster[data-frame="mat"] .sheetimg{box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 calc(.2 * var(--cm)) calc(.5 * var(--cm)) rgba(0,0,0,.18)}
.poster[data-frame="wood"] .sheetimg{box-shadow:0 0 0 1px rgba(0,0,0,.14)}

/* 선택 */
.poster.sel .paper{outline:1.5px solid var(--accent);outline-offset:2px}
.handle{
  position:absolute;width:34px;height:34px;border-radius:50%;
  display:none;place-items:center;z-index:10;
  background:var(--accent);color:#1a1400;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.handle svg{width:17px;height:17px;stroke-width:2.1}
.poster.sel .handle{display:grid}
.handle.size{right:-17px;bottom:-17px;cursor:nwse-resize}
.handle.rot{right:-17px;top:-17px;cursor:grab}

/* ── 상단 ───────────────────────────────────────────────────────── */
.topbar{
  position:fixed;left:0;right:0;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:max(14px,env(safe-area-inset-top)) 16px 0;
  pointer-events:none;
}
.topbar>*{pointer-events:auto}
.wordmark{
  font-size:12px;font-weight:800;letter-spacing:.26em;color:#fff;
  padding:7px 12px;border-radius:999px;
  background:rgba(0,0,0,.32);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.topright{display:flex;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 12px;border-radius:999px;
  background:var(--surface);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:.5px solid var(--hair);font-size:13px;font-weight:600;
  transition:transform .18s var(--ease),opacity .18s var(--ease);
}
.chip:active{transform:scale(.94)}
.chip:disabled{opacity:.32}
.chip.ghost{width:36px;padding:0;justify-content:center}
.chip svg{width:18px;height:18px}

/* ── 하단 도구 ──────────────────────────────────────────────────── */
.toolbar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));z-index:20;
  display:flex;gap:6px;padding:6px;border-radius:999px;
  background:var(--surface);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:.5px solid var(--hair);box-shadow:0 10px 40px rgba(0,0,0,.5);
  transition:transform .34s var(--soft),opacity .24s var(--ease);
}
.toolbar.down{transform:translateX(-50%) translateY(140%);opacity:0}
.tool{
  display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 15px;
  border-radius:999px;font-size:14px;font-weight:600;color:var(--text);
  transition:background .2s var(--ease),transform .16s var(--ease);
}
.tool svg{width:19px;height:19px}
.tool:active{transform:scale(.95)}
.tool.primary{background:#fff;color:#000}
.tool:not(.primary):hover{background:var(--surface2)}

/* ── 선택 인스펙터 ──────────────────────────────────────────────── */
.inspector{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:max(74px,calc(env(safe-area-inset-bottom) + 66px));z-index:21;
  width:min(560px,calc(100vw - 24px));
  padding:12px 14px 13px;border-radius:22px;
  background:var(--surface);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:.5px solid var(--hair);box-shadow:0 14px 46px rgba(0,0,0,.55);
  animation:pop .26s var(--soft);
}
@keyframes pop{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.97)}}
.ins-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;padding:0 2px;min-width:0}
.ins-title{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ins-size{margin-left:auto;font-size:12px;color:var(--text2);font-variant-numeric:tabular-nums;flex:none}
.ins-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ins-acts{display:flex;gap:4px;margin-left:auto}
/* 액자 종류가 많아 좁은 화면에서는 옆으로 밀어서 본다 */
.seg{display:flex;gap:2px;padding:2px;border-radius:11px;background:rgba(255,255,255,.08);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x;
  flex:1 1 auto;min-width:0}  /* min-width:0 이 없으면 안쪽 버튼들이 통을 밀어낸다 */
.seg button{flex:none}
.seg::-webkit-scrollbar{display:none}
.seg button{
  padding:7px 10px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--text2);
  transition:background .18s var(--ease),color .18s var(--ease);white-space:nowrap;
}
.seg button.on{background:rgba(255,255,255,.92);color:#000}
.icobtn{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);transition:background .18s var(--ease),transform .14s var(--ease);
}
.icobtn:active{transform:scale(.92)}
.icobtn svg{width:18px;height:18px}
.icobtn.danger{color:#ff6b6b}

/* ── 시트 ───────────────────────────────────────────────────────── */
/* 넓은 화면에서 시트가 끝까지 늘어나면 안이 휑해진다 — 가운데로 모은다 */
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  max-width:640px;margin-inline:auto;
  max-height:76vh;display:flex;flex-direction:column;
  padding:8px 16px max(18px,env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;
  background:rgba(18,18,20,.86);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border-top:.5px solid var(--hair);box-shadow:0 -14px 60px rgba(0,0,0,.6);
  animation:up .38s var(--soft);
}
.sheet--short{max-height:none}
@keyframes up{from{transform:translateY(100%)}}
.sheet-grab{width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.24);margin:0 auto 10px}
.sheet-head{display:flex;align-items:center;gap:10px;padding-bottom:12px}
.sheet-head h2{flex:1;font-size:17px;font-weight:700;letter-spacing:-.01em}
.field{
  flex:1;display:flex;align-items:center;gap:9px;height:42px;padding:0 13px;
  border-radius:13px;background:rgba(255,255,255,.09);border:.5px solid transparent;
  transition:border-color .2s var(--ease);
}
.field:focus-within{border-color:rgba(255,255,255,.22)}
.field svg{width:17px;height:17px;color:var(--text2);flex:none}
.field input{flex:1;font-size:15.5px}
.field input::placeholder{color:var(--text2)}

.results{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:12px;padding:4px 2px 6px;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
  /* 시트 위아래 끝에서 스르륵 흐려진다 */
  mask-image:linear-gradient(180deg,transparent,#000 14px,#000 calc(100% - 18px),transparent);
}
.results::-webkit-scrollbar{width:9px}
.results::-webkit-scrollbar-track{background:transparent}
.results::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.2);border-radius:99px;
  border:3px solid transparent;background-clip:content-box;
  transition:background .2s var(--ease);
}
.results::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.38);background-clip:content-box}
.hint{grid-column:1/-1;padding:26px 4px;text-align:center;font-size:13px;color:var(--text2);line-height:1.6;white-space:pre-line}
.card{display:block;text-align:left;animation:fade .3s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.card img{
  width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;background:#222;
  box-shadow:0 4px 14px rgba(0,0,0,.4);transition:transform .18s var(--ease);
}
.card:active img{transform:scale(.95)}
.card b{display:block;margin-top:6px;font-size:11.5px;font-weight:600;line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card i{display:block;font-style:normal;font-size:10.5px;color:var(--text2);margin-top:2px}

.opts{display:flex;flex-direction:column;gap:18px;padding:4px 2px 8px}
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.swatches button{
  width:38px;height:38px;border-radius:50%;background:var(--sw);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.16) inset;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
}
.swatches button.on{transform:scale(1.12);box-shadow:0 0 0 2px var(--accent)}
.wipe{
  margin-top:2px;height:44px;border-radius:13px;background:rgba(255,107,107,.14);
  color:#ff6b6b;font-size:14px;font-weight:600;
}

.scrim{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.42);animation:fade .3s var(--ease)}

.toast{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 62px);transform:translateX(-50%);
  z-index:40;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;
  background:rgba(28,28,30,.9);backdrop-filter:blur(16px);border:.5px solid var(--hair);
  animation:pop .24s var(--soft);white-space:nowrap;
}

@media (max-width:520px){
  .tool span{display:none}
  .tool{padding:0 13px}
  .tool.primary span{display:inline}
  .seg button{padding:7px 8px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}