/* 공통 토큰과, 화면 밖 도구·빈자리 화면 스타일 */

:root{
  /* 브랜드 키컬러 */
  --mint:#00DC84;
  --sky:#00b7ff;
  --ink:#000a14;
  --brand:#2870ff;
  --violet:#6f36ff;

  --ink-2:#3d4653;
  --muted:#8a93a0;
  --muted-2:#aab1bb;
  --line:#e5e8ec;
  --paper:#ffffff;

  --r:12px;
  --app-w:520px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Freesentation','Freesentation 5Medium','Pretendard',-apple-system,BlinkMacSystemFont,
    'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  color:var(--ink);
  background:#e9edf2;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}

/* ── 빈자리 화면 ─────────────────────────────── */
.app{
  max-width:var(--app-w);margin:0 auto;min-height:100dvh;
  background:var(--paper);display:flex;flex-direction:column;
}
@media (min-width:560px){
  .app{box-shadow:0 0 0 1px rgba(0,10,20,.06),0 18px 50px rgba(0,10,20,.08)}
}
.page{flex:1;padding:0 20px 24px}
.titlebar{
  display:grid;grid-template-columns:64px 1fr 64px;align-items:center;padding:16px 20px 12px;
}
.titlebar__title{text-align:center;font-size:17px;font-weight:800;margin:0}
.titlebar__back{
  border:0;background:none;padding:0;font-size:15px;font-weight:600;color:var(--brand);text-align:left;
}
.slot{display:flex;padding:20px 20px 116px}
.slot__box{
  flex:1;border:2px dashed #d6dbe2;border-radius:16px;
  display:grid;place-content:center;justify-items:center;text-align:center;gap:6px;color:var(--muted-2);
}
.slot__name{font-size:17px;font-weight:800;color:var(--muted)}
.slot__file{font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.slot__hint{font-size:12px;font-weight:700;margin-top:4px}