/* 레이아웃: 데스크톱은 왼쪽 케이크 액자(남는 폭) + 오른쪽 스티커 카드 패널(390px), 좁은 화면은 위아래로 쌓기.
   콘셉트: 케이크 토퍼 스티커. 잉크색 굵은 테두리 + 납작한 그림자 + 파스텔 섹션 색.
   한 가지 밝은 분위기로 고정 (다크 모드 없음, 색은 전부 명시) */
:root {
  --ink: #2B1520;
  --cream: #FFF8EE;
  --paper: #FFFFFF;
  --berry: #E23E6B;
  --berry-deep: #C22B57;
  --pink: #FFD3DF;
  --butter: #FFE9A8;
  --mint: #C9F0DD;
  --sky: #CFE8FA;
  --lilac: #E6D9FA;
  --muted: #6E5560;
  --ok: #2F8F5B;
  --display: "Jua", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --body: "Gowun Dodum", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --bw: 2.5px;
  --pop: 4px 4px 0 var(--ink);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  color: var(--ink);
  font: 15px/1.55 var(--body);
  -webkit-text-size-adjust: 100%;
  background-color: var(--cream);
  /* 스프링클 무늬 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg opacity='.55' stroke-linecap='round' stroke-width='5'%3E%3Cpath d='M20 30l12-6' stroke='%23FF9DBA'/%3E%3Cpath d='M70 18l4 12' stroke='%23F7C948'/%3E%3Cpath d='M128 40l12 4' stroke='%2385CBEF'/%3E%3Cpath d='M160 96l-6 11' stroke='%23B9A3EB'/%3E%3Cpath d='M42 92l12 3' stroke='%2386D3A8'/%3E%3Cpath d='M98 120l-10 8' stroke='%23FF9DBA'/%3E%3Cpath d='M20 150l9 9' stroke='%2385CBEF'/%3E%3Cpath d='M130 160l12-3' stroke='%23F7C948'/%3E%3Cpath d='M92 64l3 12' stroke='%23B9A3EB'/%3E%3C/g%3E%3C/svg%3E");
}

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "brand brand" "stage panel";
  gap: 18px 28px;
  max-width: 1500px;
  margin-inline: auto;
  padding-block: 20px 28px;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

/* ---------- 로고 ---------- */
.brand { grid-area: brand; display: flex; align-items: center; gap: 14px; }
.logo { width: 58px; height: 58px; flex: none; transform: rotate(-4deg); }
.brand-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brand h1 {
  margin: 0;
  font: 400 40px/1 var(--display);
  color: var(--berry);
  letter-spacing: -0.5px;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink);
  text-wrap: balance;
}
.brand p {
  margin: 0;
  align-self: flex-start;
  font-size: 14px;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 1px 12px;
  transform: rotate(-1deg);
}
.brand p b { color: var(--berry-deep); font-weight: 400; }

/* ---------- 케이크 액자 ---------- */
.stage-col { grid-area: stage; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.stage {
  position: relative;
  width: 100%;
  max-width: calc((100vh - 200px) * 0.9); max-width: calc((100dvh - 200px) * 0.9);
  aspect-ratio: 9 / 10;
  margin-top: 10px;
}
.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 8px 0 var(--ink);
  background: var(--paper);
  touch-action: pan-y;
}
/* 마스킹테이프 */
.stage::before, .stage::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 104px;
  height: 28px;
  background: repeating-linear-gradient(45deg, rgba(255, 233, 168, 0.92) 0 8px, rgba(255, 220, 140, 0.92) 8px 16px);
  border-left: 2px dashed rgba(43, 21, 32, 0.25);
  border-right: 2px dashed rgba(43, 21, 32, 0.25);
  z-index: 2;
  pointer-events: none;
}
.stage::before { left: 34px; transform: rotate(-7deg); }
.stage::after { right: 34px; transform: rotate(6deg); background: repeating-linear-gradient(45deg, rgba(201, 240, 221, 0.92) 0 8px, rgba(170, 225, 200, 0.92) 8px 16px); }

.empty {
  position: absolute;
  inset: 21% 10% auto;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.empty p {
  margin: 0;
  text-align: center;
  font: 400 clamp(16px, 2.2vw, 21px)/1.45 var(--display);
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--pop);
  padding: 12px 20px;
  transform: rotate(-2deg);
}
.empty b { color: var(--berry); font-weight: 400; }
.dropveil {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 4px dashed var(--berry);
  background: rgba(255, 211, 223, 0.7);
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
}
.dropveil span {
  font: 400 28px var(--display);
  background: var(--berry);
  color: #fff;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  padding: 8px 22px;
  box-shadow: var(--pop);
}

/* ---------- 카드 공통 ---------- */
.panel { grid-area: panel; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding-top: 10px; }
.card {
  position: relative;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--pop);
  padding: 22px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tone-butter { background: #FFFBEA; }
.tone-mint { background: #F1FBF5; }
.tone-pink { background: #FFF4F7; }
.tone-sky { background: #F2F9FF; }
.tone-lilac { background: #F8F4FF; }
.card h2.tag {
  position: absolute;
  top: -15px;
  left: 14px;
  margin: 0;
  font: 400 17px/1 var(--display);
  padding: 6px 13px 5px;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-2.5deg);
}
.tone-mint h2.tag { background: var(--mint); }
.tone-pink h2.tag { background: var(--pink); }
.tone-sky h2.tag { background: var(--sky); }
.tone-lilac h2.tag { background: var(--lilac); }
.tone-butter { padding-top: 16px; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field span { font: 400 14px var(--display); color: var(--ink); }

input[type="text"], input[type="search"] {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 8px 11px;
  min-width: 0;
  width: 100%;
  outline: none;
  transition: box-shadow 0.12s;
}
input::placeholder { color: #A89099; }
input[type="text"]:focus, input[type="search"]:focus { box-shadow: 3px 3px 0 var(--berry); }

/* ---------- 버튼 ---------- */
.btn {
  font: 400 15px/1.2 var(--display);
  border-radius: 12px;
  padding: 9px 15px;
  cursor: pointer;
  border: 2px solid var(--ink);
  white-space: nowrap;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.primary { background: var(--berry); color: #fff; }
.btn.primary:hover { background: var(--berry-deep); }
.btn.ghost:hover { background: #FFF4F7; }
.btn.danger { color: var(--berry-deep); }
.btn.arm { background: var(--berry-deep); color: #fff; }
.btn.sm { padding: 6px 11px; font-size: 14px; box-shadow: 2px 2px 0 var(--ink); }
.btn.big { padding: 13px 18px; font-size: 18px; border-radius: 16px; box-shadow: var(--pop); }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible, .filepick:focus-within { outline: 3px solid var(--berry); outline-offset: 3px; }

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  align-self: flex-start;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  font: 400 14px/1.2 var(--display);
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--butter); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- 고른 토퍼 ---------- */
.sel { width: 100%; max-width: calc((100vh - 200px) * 0.9); max-width: calc((100dvh - 200px) * 0.9); }
.sel-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mini { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 150px; font: 400 14px var(--display); }
.selwho { flex: 1; min-width: 90px; }
input[type="range"] { flex: 1; min-width: 0; accent-color: var(--berry); }

/* ---------- 방 ---------- */
.room-solo { display: flex; gap: 8px; flex-wrap: wrap; }
.join { flex: 1; display: flex; gap: 6px; min-width: 170px; }
.join input { text-transform: uppercase; letter-spacing: 3px; font-family: var(--display); }
.room-live { display: flex; flex-direction: column; gap: 12px; }
.ticket {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: 14px;
}
.ticket-label { display: inline-flex; align-items: center; gap: 7px; font: 400 14px var(--display); color: var(--muted); }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); border: 2px solid var(--ink); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.code { display: flex; gap: 5px; }
.code span {
  width: 32px;
  height: 38px;
  display: grid;
  place-items: center;
  font: 400 22px/1 var(--display);
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--ink);
}
.code span:nth-child(even) { transform: rotate(3deg); background: var(--pink); }
.code span:nth-child(odd) { transform: rotate(-2deg); }
.code-row { display: flex; gap: 8px; }
.code-row .btn.primary { flex: 1; }
.peers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.peers li {
  font: 400 14px/1 var(--display);
  padding: 6px 11px 5px;
  border-radius: 999px;
  color: #fff;
  border: 2px solid var(--ink);
}
.peers li.me { box-shadow: 2px 2px 0 var(--ink); }
.note { margin: 0; font-size: 13.5px; color: var(--muted); }

/* ---------- 수다 ---------- */
.chat-log {
  list-style: none;
  margin: 0;
  padding: 10px;
  height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  overscroll-behavior: contain;
}
.chat-log:empty::before {
  content: "아직 조용해요. 누가 뭘 꽂았는지 놀려보세요";
  margin: auto;
  color: #A89099;
  font-size: 13.5px;
  text-align: center;
}
.chat-log .sys { align-self: center; font-size: 12.5px; color: var(--muted); background: var(--cream); border-radius: 999px; padding: 2px 10px; text-align: center; }
.chat-log .msg { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 88%; }
.chat-log .msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-log .who { font: 400 12px/1 var(--display); color: #fff; padding: 3px 8px 2px; border-radius: 999px; border: 1.5px solid var(--ink); }
.chat-log .bubble {
  font-size: 14.5px;
  line-height: 1.45;
  padding: 7px 11px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 4px 14px 14px 14px;
  overflow-wrap: anywhere;
}
.chat-log .mine .bubble { background: var(--butter); border-radius: 14px 4px 14px 14px; }
.chat-log .mine .who { display: none; }
.chat-form { display: flex; gap: 6px; }

/* ---------- 이미지 찾기 ---------- */
.search, .urlform { display: flex; gap: 6px; }
.how { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.how li { counter-increment: step; position: relative; padding-left: 31px; }
.how li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font: 400 13px/1 var(--display);
  background: var(--pink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  margin-top: 1px;
}
.how b, .bm b { color: var(--berry-deep); font-weight: 400; font-family: var(--display); }
.filepick { align-self: flex-start; font: 400 14px var(--display); cursor: pointer; text-decoration: underline wavy var(--berry); text-underline-offset: 4px; }
.filepick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bm { font-size: 14px; border-top: 2px dashed rgba(43, 21, 32, 0.25); padding-top: 10px; }
.bm summary { cursor: pointer; }
.bm p { margin: 8px 0 12px; color: var(--muted); }
.bmlink {
  display: inline-block;
  font: 400 15px/1 var(--display);
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--berry);
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none;
  cursor: grab;
  transform: rotate(-2deg);
}

.reuse {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 14px;
}
.reuse p { margin: 0; font-size: 14px; }
.reuse b { color: var(--berry-deep); font-weight: 400; font-family: var(--display); }

/* ---------- 하단 ---------- */
.actions { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.act-btns { display: flex; gap: 8px; }
.actions .btn.big { grid-column: 1 / -1; }
.check { display: inline-flex; align-items: center; gap: 6px; font: 400 15px var(--display); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--berry); }
.count {
  justify-self: start;
  font: 400 13px/1 var(--display);
  padding: 5px 9px 4px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 이름 모달 ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(43, 21, 32, 0.5);
  display: grid;
  place-items: center;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  z-index: 20;
}
.modal-card {
  width: min(390px, 100%);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-card h2 {
  margin: 0;
  font: 400 28px/1.15 var(--display);
  color: var(--berry);
  -webkit-text-stroke: 1px var(--ink);
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 var(--ink);
}
.modal-card p { margin: 0; color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 14px) rotate(-1deg);
  max-width: calc(100% - 32px);
  background: var(--butter);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  box-shadow: var(--pop);
  padding: 10px 18px;
  border-radius: 16px;
  font: 400 16px/1.35 var(--display);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  text-align: center;
  z-index: 30;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }
.toast.err { background: var(--berry); color: #fff; }

@media (max-width: 900px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "stage" "panel";
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .stage, .sel { max-width: 640px; }
  .stage canvas { box-shadow: 5px 5px 0 var(--ink); border-radius: 18px; }
  .brand h1 { font-size: 32px; }
  .logo { width: 48px; height: 48px; }
}
@media (max-width: 420px) {
  .fields { grid-template-columns: 1fr; }
  .stage::before, .stage::after { width: 76px; }
  .code span { width: 28px; height: 34px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .btn, input { transition: none; }
  .live-dot { animation: none; }
}

/* ---------- 터치 기기 (폰·패드) ---------- */
html.touch .only-mouse { display: none !important; }
html:not(.touch) .only-touch { display: none !important; }
.app { min-height: 100dvh; }
.stage canvas { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
button, .btn, .seg button, summary, .filepick { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pick-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* 마우스가 없는 기기에서는 눌렀다 뗀 뒤 떠 있는 효과가 남지 않게 */
@media (hover: none) {
  .btn:hover { transform: none; box-shadow: 3px 3px 0 var(--ink); }
  .btn.sm:hover { box-shadow: 2px 2px 0 var(--ink); }
  .btn.big:hover { box-shadow: var(--pop); }
  .btn.primary:hover { background: var(--berry); }
  .btn.ghost:hover { background: var(--paper); }
  .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
}

@media (max-width: 900px) {
  /* iOS는 16px보다 작은 입력칸에 초점이 가면 화면을 확대한다 */
  input[type="text"], input[type="search"] { font-size: 16px; }
  .panel { padding-top: 6px; }
  /* 고른 토퍼 조절판은 화면 아래에 붙어 따라온다 */
  .sel {
    position: sticky;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    box-shadow: 4px 4px 0 var(--ink), 0 10px 30px -10px rgba(43, 21, 32, 0.35);
  }
  .chat-log { height: 200px; }
}

/* 패드 가로(1024~1366)처럼 높이가 넉넉하지 않은 2단 화면 */
@media (min-width: 901px) and (max-width: 1180px) {
  .app { grid-template-columns: minmax(0, 1fr) 340px; gap: 16px 20px; }
  .fields { grid-template-columns: 1fr; }
}

/* ---------- 바로 검색: 골라서 꽂기 창 ---------- */
.add.inmode .ext { display: none !important; }
.reopen { align-self: flex-start; }
body.picker-open { overflow: hidden; }
.picker {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  justify-content: flex-end;
  background: rgba(43, 21, 32, 0.18);
}
.picker-card {
  width: min(880px, 60vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--cream);
  border-left: 3px solid var(--ink);
  box-shadow: -8px 0 0 var(--ink);
  padding-block: calc(18px + env(safe-area-inset-top, 0px)) 0;
  padding-left: 20px;
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.picker-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.picker-head h2.tag {
  position: static;
  margin: 0;
  font: 400 18px/1 var(--display);
  padding: 7px 14px 6px;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  background: var(--pink);
  transform: rotate(-2deg);
}
.picker-search { flex: 1; min-width: 200px; }
.results-status { margin: 0; font-size: 14px; color: var(--muted); }
.picker-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 6px calc(24px + env(safe-area-inset-bottom, 0px)) 2px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 원래 비율 그대로 벽돌 쌓기 (줄 나누기는 app.js의 placeTile) */
.results { display: flex; align-items: flex-start; gap: 12px; }
.results .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s;
  touch-action: manipulation;
  text-align: left;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  aspect-ratio: var(--ar, 1);
  background: var(--thumb, none) center / cover no-repeat, repeating-linear-gradient(45deg, #FBEFF1 0 10px, #FFF8F9 10px 20px);
  filter: blur(6px) saturate(1.1);
  transform: scale(1.06);
}
.tile.ready::before { display: none; }
.tile img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 1);
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s;
}
.tile.ready img { aspect-ratio: auto; opacity: 1; background: var(--paper); }
.tile .cap { position: relative; background: var(--paper); }
.tile .cap {
  display: block;
  padding: 5px 8px 6px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1.5px solid var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile .cap:empty { display: none; }
.tile:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
@media (hover: hover) {
  .tile:hover { transform: translate(-1px, -1px) rotate(-1deg); box-shadow: 4px 4px 0 var(--ink); }
}
.tile.busy::after, .tile.used::after {
  position: absolute;
  top: 8px;
  right: 8px;
  font: 400 14px/1 var(--display);
  padding: 6px 10px 5px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.tile.busy::after { content: "꽂는 중"; background: var(--butter); }
.tile.used::after { content: "꽂음"; background: var(--mint); }
.tile.busy img { opacity: 0.6; }
.tile.used { outline: 3px solid var(--ok); outline-offset: 2px; }
.sentinel { height: 1px; }
.more { align-self: center; }

@media (max-width: 900px) {
  .picker { background: var(--cream); }
  .picker-card {
    width: 100%;
    border-left: 0;
    box-shadow: none;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .results, .results .col { gap: 10px; }
  .picker-search { order: 3; flex-basis: 100%; }
  .picker-close { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
}


/* ---------- 공개 연출 ---------- */
.reveal {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  background: rgba(43, 21, 32, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding-block: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.reveal-card {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 14px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(-1.5deg);
}
.reveal-card.pop { animation: reveal-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes reveal-pop {
  from { transform: scale(0.6) rotate(-8deg); opacity: 0; }
  to { transform: scale(1) rotate(-1.5deg); opacity: 1; }
}
.reveal-kicker { margin: 0; font: 400 18px/1 var(--display); color: var(--muted); }
.reveal-frame {
  width: 100%;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  padding: 10px;
}
.reveal-frame img {
  display: block;
  max-width: 100%;
  max-height: min(58vh, 58dvh);
  border-radius: 8px;
  object-fit: contain;
}
.reveal-who {
  margin: 0;
  font: 400 clamp(26px, 6vw, 38px)/1.1 var(--display);
  color: #fff;
  padding: 8px 20px 6px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(2deg);
  text-align: center;
  overflow-wrap: anywhere;
}
.reveal-bar { width: 100%; height: 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); overflow: hidden; }
.reveal-bar span { display: block; height: 100%; width: 0; background: var(--berry); }
.reveal-hint { margin: 0; font-size: 13px; color: var(--muted); }
.reveal-queue {
  margin: 0;
  font: 400 15px/1 var(--display);
  color: var(--ink);
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px 14px 6px;
}

/* ---------- 토퍼 전체 보기 ---------- */
.gallery {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(43, 21, 32, 0.45);
  padding-block: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.gallery-card {
  width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 18px;
  min-height: 0;
}
.gallery-head { display: flex; align-items: center; gap: 10px; }
.gallery-head h2.tag {
  position: static;
  margin: 0;
  font: 400 18px/1 var(--display);
  padding: 7px 14px 6px;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  background: var(--lilac);
  transform: rotate(-2deg);
}
.gallery-count { margin-right: auto; font: 400 15px var(--display); color: var(--muted); }
.gallery-grid {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  padding: 4px 6px 6px 2px;
  overscroll-behavior: contain;
}
.gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;
}
.gallery-item img { width: 100%; height: 170px; object-fit: contain; display: block; }
.gallery-who {
  font: 400 15px/1 var(--display);
  color: #fff;
  padding: 5px 11px 4px;
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.gallery-empty { margin: 20px 0; color: var(--muted); }
@media (hover: hover) {
  .gallery-item:hover { transform: translate(-1px, -1px) rotate(-1deg); box-shadow: 4px 4px 0 var(--ink); }
}
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gallery-item img { height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-card.pop { animation: none; }
}