/* ==========================================================
   실험체 티어보드 — 전용 스타일 (.t-* 접두)
   상속: lumi-hud.css(무수정) + shell.css / 테마: data-theme="reco"
   ========================================================== */

.t-screen{--shell-w:1700px;gap:10px;padding-bottom:14px;}
body.t-dragging{user-select:none;-webkit-user-select:none;cursor:grabbing;}

/* 모드 토글 */
.t-modes{display:flex;gap:6px;flex-wrap:wrap;}
.t-mode{transform:skewX(-12deg);opacity:.72;
  transition:opacity var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.t-mode:hover{opacity:1;}
.t-mode.is-solid{opacity:1;box-shadow:0 0 12px var(--accent-glow);}
.t-modenote{margin:0 0 3px;}
.t-modenote b{color:var(--accent-bright);font-weight:700;}

/* 새 보드 만들기 — ＋ 버튼 ↔ 인라인 주제 입력 토글 */
.t-addboard{opacity:.55;border-style:dashed;}
.t-addboard:hover{opacity:1;}
.t-addboard:disabled{opacity:.25;cursor:not-allowed;}
.t-newboard{display:inline-flex;}
.t-newboard-input{width:150px;padding:5px 10px;font:700 11.5px/1.3 var(--font);
  letter-spacing:.04em;color:var(--text);background:rgba(10,16,32,.85);
  border:1px solid var(--accent-bright);outline:none;transform:skewX(-12deg);}
.t-newboard-input::placeholder{color:var(--text-dim);font-weight:500;}

/* ================= 보드 ================= */
.t-board{display:grid;border:1px solid rgba(53,102,117,.55);background:rgba(6,12,24,.4);}
.t-row{display:grid;grid-template-columns:clamp(54px,5.2vw,86px) minmax(0,1fr);
  border-top:1px solid rgba(53,102,117,.4);}
.t-row:first-child{border-top:0;}
.t-rowlab{position:relative;display:grid;place-items:center;align-content:center;gap:3px;
  padding:6px 4px;background:linear-gradient(90deg,
    color-mix(in srgb,var(--row) 26%,transparent),color-mix(in srgb,var(--row) 6%,transparent));
  border-right:1px solid rgba(53,102,117,.4);}
.t-rowlab::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--row);}
.t-rowlab b{font-size:clamp(20px,2.6vw,32px);font-weight:800;line-height:1;letter-spacing:-.02em;
  color:var(--row);text-shadow:0 0 14px color-mix(in srgb,var(--row) 45%,transparent);}
.t-rowlab span{font:700 9.5px/1 var(--font);letter-spacing:.1em;color:var(--text-dim);
  font-variant-numeric:tabular-nums;}

.t-zone{display:flex;flex-wrap:wrap;align-content:flex-start;gap:7px;padding:8px;
  min-height:clamp(72px,9.6vh,92px);position:relative;
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.t-zone.is-over{background:color-mix(in srgb,var(--accent) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-bright) 55%,transparent);}
.t-zone:empty::before,.t-zone.is-blank::before{content:attr(data-hint);position:absolute;
  left:12px;top:50%;transform:translateY(-50%);font:500 11.5px/1 var(--font);
  letter-spacing:.04em;color:var(--text-dim);opacity:.65;pointer-events:none;}

/* ================= 칩 ================= */
.t-chip{position:relative;display:grid;gap:2px;justify-items:center;width:62px;padding:0 0 3px;
  background:rgba(10,16,32,.6);border:1px solid rgba(123,180,203,.22);border-radius:0;
  font-family:var(--font);color:var(--text);cursor:grab;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);}
.t-chip:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 0 12px var(--accent-glow);z-index:2;}
.t-chip:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;}
.t-chip-face{display:block;width:60px;height:56px;overflow:hidden;background:rgba(6,12,24,.7);}
.t-chip-face img{width:100%;height:100%;object-fit:cover;object-position:50% 3%;
  opacity:0;transition:opacity 180ms var(--ease);}
.t-chip-face img.is-ready{opacity:1;}
.t-chip-name{display:block;max-width:58px;font-size:9.5px;font-weight:600;line-height:1.25;
  letter-spacing:-.02em;color:var(--text-muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-align:center;}
.t-chip:hover .t-chip-name{color:var(--text);}
.t-chip.is-hidden{display:none;}
.t-chip.is-src{display:none;}
/* 배치된 칩은 행 색을 띠 형태로 물고 있는다 */
.t-zone .t-chip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--row,transparent);opacity:.9;}

/* 드래그 자리표시자 + 고스트 */
.t-slot{width:62px;height:78px;flex:none;border:1px dashed var(--accent-line);
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow:0 0 12px var(--accent-glow);}
.t-ghost{position:fixed;left:0;top:0;z-index:80;pointer-events:none;margin:0;
  transform-origin:50% 50%;box-shadow:0 10px 26px rgba(0,0,0,.6),0 0 16px var(--accent-glow);
  border-color:var(--accent-bright)!important;opacity:.96;}

/* ================= 대기 풀 ================= */
.t-poolwrap{margin-top:4px;border:1px solid rgba(53,102,117,.5);background:rgba(6,12,24,.34);}
.t-poolhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:7px 10px 6px;
  border-bottom:1px solid rgba(53,102,117,.32);}
.t-poolsect{margin:0;flex:none;}
.t-poolsect::after{display:none;}
.t-filters{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto;}
.t-fchip{transform:skewX(-12deg);opacity:.7;font-size:10.5px;padding:4px 10px;
  transition:opacity var(--dur) var(--ease);}
.t-fchip:hover{opacity:1;}
.t-fchip.is-solid{opacity:1;}
.t-pool{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:7px;padding:9px;
  min-height:78px;
  max-height:min(46vh,430px);overflow-y:auto;overscroll-behavior:contain;
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.t-pool.is-blank::before{content:attr(data-hint);position:absolute;left:14px;top:50%;
  transform:translateY(-50%);font:500 11.5px/1 var(--font);letter-spacing:.04em;
  color:var(--text-dim);opacity:.65;pointer-events:none;}
.t-pool.is-over{background:color-mix(in srgb,var(--accent) 10%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-bright) 45%,transparent);}
.t-pool::-webkit-scrollbar{width:9px;}
.t-pool::-webkit-scrollbar-track{background:rgba(6,12,24,.6);}
.t-pool::-webkit-scrollbar-thumb{background:rgba(123,180,203,.3);}
.t-pool::-webkit-scrollbar-thumb:hover{background:var(--accent);}

/* ================= 하단 고지 ================= */
.t-notice{display:grid;gap:3px;margin:7px 0 0;padding:8px 12px;
  border-left:2px solid color-mix(in srgb,var(--accent) 60%,transparent);
  background:rgba(6,12,24,.4);}
.t-notice>span:first-child{font-size:12.5px;font-weight:700;color:var(--accent-bright);
  letter-spacing:.02em;}
.t-notice-sub{font-size:11.5px;line-height:1.55;color:var(--text-dim);word-break:keep-all;}

/* ================= 확대 프리뷰 ================= */
.t-modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;}
.t-modal[hidden]{display:none;}
.t-modal-bg{position:absolute;inset:0;background:rgba(4,8,18,.82);backdrop-filter:blur(5px);
  animation:t-fade 140ms var(--ease) both;}
@keyframes t-fade{from{opacity:0}}
.t-modal-box{position:relative;display:grid;gap:clamp(14px,2.4vw,28px);width:min(760px,100%);
  max-height:92vh;overflow:auto;padding:clamp(16px,2.4vw,26px);
  background:linear-gradient(180deg,rgba(14,22,40,.97),rgba(6,12,24,.97));
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  box-shadow:0 24px 60px rgba(0,0,0,.6);animation:hud-pop 140ms var(--ease) both;}
@media (min-width:720px){.t-modal-box{grid-template-columns:minmax(0,300px) minmax(0,1fr);
  align-items:center;}}
.t-modal-x{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;align-items:center;
  gap:6px;height:28px;padding:0 11px;background:rgba(6,12,24,.7);
  border:1px solid rgba(123,180,203,.3);color:var(--text-muted);
  font:700 10.5px/1 var(--font);letter-spacing:.1em;cursor:pointer;}
.t-modal-x:hover{border-color:var(--accent);color:var(--accent-bright);}
.t-modal-por{height:clamp(230px,40vh,380px);
  background:radial-gradient(58% 52% at 50% 62%,rgba(123,180,203,.18),transparent 72%);}
.t-modal-info{display:grid;gap:7px;align-content:center;min-width:0;}
.t-modal-name{font-size:clamp(26px,4vw,38px);}
.t-modal-en{margin:0;font:700 10.5px/1 var(--font);letter-spacing:.24em;color:var(--text-dim);
  text-transform:uppercase;}
.t-modal-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.t-mtag{display:inline-block;padding:4px 9px;font:700 10.5px/1 var(--font);letter-spacing:.05em;
  color:var(--accent-bright);background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent-bright) 45%,transparent);}
.t-mtag.is-plain{color:var(--text-muted);background:rgba(10,16,32,.5);
  border-color:rgba(123,180,203,.24);}
.t-modal-line{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--text-muted);
  word-break:keep-all;}
.t-modal-info .v-sect{margin:12px 0 2px;}
.t-modal-move{display:flex;gap:6px;flex-wrap:wrap;}
.t-mv{display:inline-grid;place-items:center;min-width:50px;height:42px;padding:0 12px;
  background:rgba(10,16,32,.6);border:1px solid var(--row,rgba(123,180,203,.3));
  color:var(--row,var(--text-muted));font:800 15px/1 var(--font);letter-spacing:.02em;
  cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.t-mv small{display:block;margin-top:3px;font:600 9px/1 var(--font);letter-spacing:.08em;
  color:var(--text-dim);}
.t-mv:hover{background:color-mix(in srgb,var(--row,#7BB4CB) 26%,transparent);color:var(--text);}
.t-mv.is-now{background:var(--row,var(--accent));color:#08111C;
  box-shadow:0 0 14px color-mix(in srgb,var(--row,var(--accent)) 55%,transparent);}
.t-mv.is-pool{font-size:12px;min-width:64px;}

/* ================= 반응형 ================= */
@media (max-width:760px){
  .t-modes{order:3;width:100%;justify-content:center;}
  .t-poolhead{gap:8px;}
  .t-filters{margin-left:0;}
  .t-pool{max-height:none;}
  .t-zone{min-height:86px;}
}
@media (max-width:420px){
  .t-chip{width:56px;}
  .t-chip-face{width:54px;height:52px;}
  .t-chip-name{max-width:52px;font-size:9px;}
  .t-slot{width:56px;height:72px;}
}
@media (prefers-reduced-motion:reduce){
  .t-modal-bg,.t-modal-box{animation:none;}
}