/* 사흘 · 추리판.
 *
 * 무대는 폐교다. 그러니 코르크 게시판에 빨간 실이 아니라 교실 칠판이다.
 * 종이를 자석으로 붙이고 분필로 잇는다 — 실제 수사본부가 하는 방식이기도 하다. */

:root {
  --ink: #e9e4d8;
  --sub: #8b8578;
  --line: #2a2a30;
  --panel: #17171c;
  --acc: #7a2f26;
  --chalk: #e8e6dc;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0d0d10;
  color: var(--ink);
  font-family: 'Pretendard', system-ui, sans-serif;
  user-select: none;
}

/* ---------- 상단 ---------- */
#top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.ttl { font: 700 17px/1 'AppleMyungjo', 'Noto Serif KR', serif; letter-spacing: .04em; }
.ttl span { color: var(--sub); font-weight: 400; font-size: 13px; }
.who { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sub); }
.who select {
  background: #1f1f26; color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 9px; font-size: 13px; font-family: inherit;
}
.sp { flex: 1; }
.btn {
  background: #1f1f26; color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 13px; font-size: 12.5px; cursor: pointer;
  font-family: inherit;
}
.btn:hover { border-color: var(--acc); }
#hint { font-size: 12px; color: #61605a; }

/* ---------- 방 ---------- */
#room { flex: 1; display: flex; min-height: 0; }

#chalkwrap {
  flex: 1; min-width: 0;
  padding: 22px 22px 0;
  display: flex; flex-direction: column;
}

/* 칠판 — 초록 판에 나무틀 */
#chalk {
  position: relative;
  flex: 1;
  border: 14px solid #4a3a26;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 2px #2f2418,
    inset 0 8px 40px rgba(0,0,0,.45),
    0 18px 40px rgba(0,0,0,.5);
  background:
    /* 지우다 만 자국 */
    radial-gradient(70% 40% at 25% 30%, rgba(255,255,255,.045), transparent 60%),
    radial-gradient(50% 30% at 75% 65%, rgba(255,255,255,.035), transparent 60%),
    repeating-linear-gradient(97deg, rgba(255,255,255,.012) 0 3px, transparent 3px 7px),
    linear-gradient(170deg, #24402f, #1b3125 55%, #16281e);
  overflow: hidden;
}
/* 분필받이 */
#ledge {
  height: 16px; flex: none;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(#5c4830, #3b2d1c);
  box-shadow: 0 6px 14px rgba(0,0,0,.45);
  margin: -2px 6px 0;
}
#dust {
  position: absolute; inset: auto 0 0 0; height: 60px; pointer-events: none;
  background: linear-gradient(transparent, rgba(232,230,220,.05));
}

/* 인물 카드 줄 */
#rail {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; gap: 10px; padding: 12px 14px;
  border-bottom: 1px dashed rgba(232,230,220,.13);
}
.person {
  width: 78px; flex: none; text-align: center; cursor: default;
  opacity: .92;
}
.person .pic {
  width: 78px; height: 78px; border-radius: 3px; overflow: hidden;
  border: 1px solid rgba(232,230,220,.25);
  background: #101812;
  filter: grayscale(.35) contrast(1.05);
}
.person img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.person b { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--chalk); }
.person i { display: block; font-size: 10px; font-style: normal; color: rgba(232,230,220,.5); }
.person.victim .pic { border-color: rgba(180,60,50,.6); }
.person.victim b::after { content: ' †'; color: #b45248; }

/* 붙인 단서 */
#pinned { position: absolute; inset: 108px 0 0 0; }

/* 분필로 그은 선 — 카드 아래에 깔린다 */
#lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#lines path {
  fill: none;
  stroke: rgba(232,230,220,.72);
  stroke-width: 2.4;
  stroke-linecap: round;
  /* 분필은 고르게 안 묻는다 */
  stroke-dasharray: 7 2 11 3 5 2;
  filter: drop-shadow(0 0 1.5px rgba(232,230,220,.35));
}
#lines path.tmp { stroke: rgba(232,230,220,.42); stroke-dasharray: 5 5; }
#lines path.toperson { stroke: rgba(226,150,120,.8); }
#lines .head { fill: rgba(226,150,120,.85); stroke: none; }
#lines .hit { stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }

/* 카드 가장자리를 잡으면 선이 나간다 */
.card .knob {
  position: absolute; right: -7px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(232,230,220,.16);
  border: 1px solid rgba(232,230,220,.4);
  cursor: crosshair;
}
.card .knob:hover { background: rgba(232,230,220,.4); }
.card.linking { outline: 2px solid rgba(232,230,220,.5); outline-offset: 2px; }
.person.target .pic { border-color: rgba(226,150,120,.9); box-shadow: 0 0 0 2px rgba(226,150,120,.35); }

/* ---------- 카드 — 사진 한 장에 내가 쓴 한 줄 ---------- */
.card {
  position: absolute;
  width: 168px;
  padding: 8px 8px 6px;
  background: linear-gradient(#f3efe3, #e6e0cf);
  color: #23211c;
  border-radius: 2px;
  box-shadow: 0 6px 14px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.5) inset;
  cursor: grab;
  touch-action: none;
}
/* 사진 */
.card .shot {
  position: relative;
  width: 100%; aspect-ratio: 1;
  background: #1a1c22;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.35);
}
.card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .shot span {
  display: none; position: absolute; inset: 0;
  align-items: center; justify-content: center;
  color: #55565e; font-size: 24px;
}
.card .shot.noimg img { display: none; }
.card .shot.noimg span { display: flex; }
/* 단서 이름 — 사진만 보고는 뭐가 뭔지 모른다 */
.card > h4 {
  margin: 6px 2px 0;
  font: 600 11px/1.3 'AppleMyungjo', 'Noto Serif KR', serif;
  color: #6d675c; word-break: keep-all;
}
/* 내가 쓴 말 — 이쪽이 주인공이다 */
.card .memo {
  margin-top: 4px; min-height: 28px; padding: 4px 3px 2px;
  font: 600 12.5px/1.4 'AppleMyungjo', 'Noto Serif KR', serif;
  color: #23211c; cursor: text;
  border-top: 1px solid rgba(0,0,0,.14);
  word-break: keep-all;
}
.card .memo.empty { color: #a49c8c; font-weight: 400; font-style: italic; }
.card .memo:hover { background: rgba(0,0,0,.045); }
.card .memo input {
  width: 100%; border: none; background: none; outline: none;
  font: 600 12.5px/1.4 'AppleMyungjo', 'Noto Serif KR', serif; color: #23211c;
}
/* 가방 안에서는 사진과 이름만 */
.card.mini { position: relative; width: 132px; padding: 7px 7px 5px; }
.card.mini h4 {
  margin: 6px 2px 0;
  font: 600 11.5px/1.35 'AppleMyungjo', 'Noto Serif KR', serif;
  word-break: keep-all;
}
.card.drag { cursor: grabbing; box-shadow: 0 18px 34px rgba(0,0,0,.55); z-index: 50; }
/* 자석 */
.card::before {
  content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8d2c4, #8d1f1a 60%, #5d1310);
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
.card .del {
  position: absolute; top: 4px; right: 5px; width: 18px; height: 18px;
  border: none; background: none; color: #9a9384; font-size: 14px; cursor: pointer;
  border-radius: 3px; line-height: 1;
}
.card .del:hover { background: rgba(0,0,0,.08); color: #7a2f26; }

/* ---------- 오른쪽 — 말하는 사람 · 가방 ---------- */
#side {
  width: 300px; flex: none; padding: 22px 18px 20px 0;
  display: flex; flex-direction: column; gap: 14px;
}
/* 상반신만 나오므로 정사각에 가깝게. 아래는 가방에 내준다 */
#avatar {
  height: 320px; flex: none;
  border: 1px dashed var(--line); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: #4a4944; background: rgba(255,255,255,.014);
}
#avatar span { font-size: 13px; color: var(--sub); }
#avatar em { font-size: 11.5px; font-style: normal; }

/* ---------- 가방 ---------- */
#bagwrap { position: relative; flex: none; margin-top: auto; }  /* 아래에 붙인다 */
#bag {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(#4a3a26, #35291a);
  border: 1px solid #241b11; border-radius: 9px;
  padding: 13px 18px; cursor: pointer; color: #f0e6d2;
  font-family: inherit; box-shadow: 0 10px 24px rgba(0,0,0,.5);
}
#bag:hover { filter: brightness(1.12); }
#bag b { font: 600 14px/1 inherit; }
#bag i {
  font-style: normal; font-size: 11.5px; font-weight: 700;
  background: var(--acc); border-radius: 20px; padding: 3px 8px;
}
/* 오른쪽 끝에 있으므로 왼쪽 · 위로 펼친다 */
#drawer {
  position: absolute; right: 0; bottom: 58px; width: min(560px, 46vw);
  /* 위로 펼치므로 화면 위를 넘지 않게 묶는다 */
  max-height: calc(100vh - 150px); display: none; flex-direction: column; z-index: 60;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 22px 50px rgba(0,0,0,.6); overflow: hidden;
}
#drawer.on { display: flex; }
#drawerhead {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--sub); flex: none;
}
#drawerhead b { color: var(--ink); }
.x { margin-left: auto; background: none; border: none; color: var(--sub); cursor: pointer; font-size: 12px; }
.x:hover { color: var(--ink); }
#pile { overflow-y: auto; padding: 12px; display: flex; flex-wrap: wrap; gap: 9px; }
#pile .card { cursor: grab; }
#pile .card::before { display: none; }
#pile:empty::after {
  content: '가방이 비었습니다'; color: #4a4944; font-size: 12.5px; padding: 20px;
}