/* ---------- テーマ（CREATORS NIGHT '26 のレギュレーションに合わせる） ----------
   基本色 #231815 / アクセント ピンク #DC3A78・ミント #BEE0C8・イエロー #F7E604・ブルー #2C4198
   英字・数字は Cal Sans。ピンクは白文字・黒文字とも読みにくいので、文字の背景には使わず図形にだけ使う */
:root{
  --ink:#231815; --ink-2:#4A3F3B; --muted:#5E5452;
  --pink:#DC3A78; --mint:#BEE0C8; --yellow:#F7E604; --blue:#2C4198;
  --bg:#F5F3F2; --line:#E3DEDB;
  --en:"Cal Sans","Zen Kaku Gothic New",sans-serif;
  --bs-body-font-family:"Zen Kaku Gothic New",system-ui,sans-serif;
  /* --bs-body-bg はカード・入力欄・モーダルの背景にも使われるので白のまま。ページ背景は body で指定 */
  --bs-body-color:var(--ink); --bs-body-bg:#fff;
  --bs-secondary-color:var(--muted); --bs-secondary-rgb:94,84,82; --bs-border-color:var(--line);
  --bs-form-invalid-color:#B0174F; --bs-form-invalid-border-color:#B0174F;
  --bs-link-color:var(--blue); --bs-link-color-rgb:44,65,152; --bs-link-hover-color:#1E2E70; --bs-link-hover-color-rgb:30,46,112;
  --bs-border-radius:.5rem; --bs-border-radius-lg:.75rem;
  --bs-focus-ring-color:rgba(44,65,152,.35);
}
body{line-height:1.7;background-color:var(--bg)}
.text-secondary{color:var(--muted)!important}

/* ボタン */
.btn:disabled,.btn.disabled{--bs-btn-disabled-bg:#E3DEDB;--bs-btn-disabled-border-color:#E3DEDB;--bs-btn-disabled-color:#5E5452;--bs-btn-disabled-opacity:1}
.btn-primary{--bs-btn-bg:var(--ink);--bs-btn-border-color:var(--ink);--bs-btn-hover-bg:#3A2B27;--bs-btn-hover-border-color:#3A2B27;--bs-btn-active-bg:#000;--bs-btn-active-border-color:#000;font-weight:700}
/* 投票の決定ボタン（青地に白文字） */
.btn-vote{--bs-btn-bg:var(--blue);--bs-btn-border-color:var(--blue);--bs-btn-color:#fff;--bs-btn-hover-bg:#22337A;--bs-btn-hover-border-color:#22337A;--bs-btn-hover-color:#fff;--bs-btn-active-bg:#1A2862;--bs-btn-active-border-color:#1A2862;--bs-btn-active-color:#fff;font-weight:700}
.btn-outline-ink{--bs-btn-color:var(--ink);--bs-btn-border-color:var(--ink);--bs-btn-hover-bg:var(--ink);--bs-btn-hover-border-color:var(--ink);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--ink);--bs-btn-active-color:#fff;font-weight:700}
.btn-outline-secondary{--bs-btn-color:var(--ink-2);--bs-btn-border-color:#CFC7C3;--bs-btn-hover-bg:var(--ink-2);--bs-btn-hover-border-color:var(--ink-2);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--ink);--bs-btn-active-color:#fff}
.btn-outline-danger{--bs-btn-color:#B0174F;--bs-btn-border-color:#B0174F;--bs-btn-hover-bg:#B0174F;--bs-btn-hover-border-color:#B0174F}
.btn-outline-light{--bs-btn-hover-color:var(--ink)}

.alert-warning{--bs-alert-bg:#FEFAD0;--bs-alert-border-color:#EDE27A;--bs-alert-color:var(--ink)}
.alert-secondary{--bs-alert-bg:#fff;--bs-alert-border-color:var(--line);--bs-alert-color:var(--ink)}
.badge-award{background:var(--yellow);color:var(--ink)}
.form-control:focus{border-color:var(--blue)}
.form-check-input:checked{background-color:var(--blue);border-color:var(--blue)}
.card{--bs-card-border-width:0;--bs-card-border-radius:.75rem}

.wordmark{font-family:var(--en);font-weight:400;letter-spacing:.06em;line-height:1.05}
.num{font-family:var(--en);font-weight:400;letter-spacing:.02em}

/* ロゴの図形（円・アーチ）。ヘッダーとログインで使う */
.logo-mark{display:block}

/* ヘッダー */
.app-hdr{background:var(--ink);color:#fff}
.app-hdr .logo-mark{width:54px;height:38px;flex:none}
.app-hdr .wordmark{font-size:1.1rem;letter-spacing:.12em}
@media (min-width:992px){.app-hdr .wordmark{font-size:1.25rem}}

/* ログインのキービジュアル */
.kv{background:var(--ink);color:#fff;position:relative;overflow:hidden;min-height:300px}
.kv .logo-mark{width:min(78%,520px);height:auto;margin:auto}
.kv .v{position:absolute;top:50%;writing-mode:vertical-rl;font-family:var(--en);font-size:.8rem;letter-spacing:.42em;transform:translateY(-50%)}
.kv .v.l{left:1.25rem;transform:translateY(-50%) rotate(180deg)}
.kv .v.r{right:1.25rem}
.kv .wordmark{font-size:clamp(1.6rem,3.6vw,2.6rem);letter-spacing:.2em}
@media (max-width:991.98px){.kv{min-height:0}.kv .logo-mark{width:min(70%,320px)}}

/* 部門カード（部門ごとにロゴの図形を 1 つずつ割り当てる） */
.cat-ico{width:56px;height:56px;border-radius:.5rem;display:grid;place-items:center;flex:none;background:var(--ink)}
.stretched-card{transition:box-shadow .15s}
.stretched-card:hover{box-shadow:0 0 0 2px var(--ink)}

/* 作品カード。1〜3 位は 黄・ミント・青 */
.ent{border:3px solid transparent!important;position:relative}
.ent.r1{border-color:#D9C800!important}.ent.r2{border-color:#8FC4A0!important}.ent.r3{border-color:var(--blue)!important}
.thumb{background:#E9E5E3;border:0;padding:0}
.thumb.movie::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(35,24,21,.78)}
.thumb.movie::before{content:"";position:absolute;z-index:1;left:50%;top:50%;margin:-7px 0 0 -3px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.medal{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;font-family:var(--en);font-size:14px;flex:none;color:var(--ink)}
.medal.abs{position:absolute;top:8px;left:8px;z-index:2;box-shadow:0 0 0 2px #fff}
.m1{background:var(--yellow)}.m2{background:var(--mint)}.m3{background:var(--blue);color:#fff}
.badge.theme{font-weight:500;color:var(--ink)}
.badge-emo{background:#F8D5E3}.badge-fam{background:var(--mint)}.badge-cha{background:#FBF5A6}

/* 順位トレー（PC は右に固定、スマホは下に固定） */
.tray{background:#fff;border-radius:.75rem}
.slot{border:1.5px dashed #CFC7C3;border-radius:.5rem;min-height:52px;background:none;color:var(--ink);text-align:left}
.slot.f{border-style:solid;border-width:2px}.slot.f.s1{border-color:#D9C800;background:#FEFBD6}.slot.f.s2{border-color:#8FC4A0;background:#EEF7F1}.slot.f.s3{border-color:var(--blue);background:#ECEFF8}
@media (min-width:992px){.tray{position:sticky;top:1rem}}
@media (max-width:991.98px){
  .tray{position:fixed;left:0;right:0;bottom:0;z-index:1030;border-radius:0;box-shadow:0 -8px 24px rgba(35,24,21,.12)}
  .tray .slots{display:grid!important;grid-template-columns:repeat(3,1fr)}
  .tray .slot{min-height:46px;font-size:.8rem}
  .tray .tray-h{display:none}
  .page-cat main{padding-bottom:150px}
}

/* 作品ビューア */
.viewer{background:var(--ink);color:#D9D2CF;border-radius:.75rem}
.viewer iframe{border:0}
.side-banner{border-left:4px solid var(--pink)!important}

/* コメント */
.cmt textarea.empty{border-color:#E9A9C2}
.pubc li{padding-left:2.2rem;position:relative}
.pubc li::before{content:"";position:absolute;left:1rem;top:1.3rem;width:9px;height:9px;border-radius:50%;background:var(--pink)}
.mod .hid{opacity:.45;text-decoration:line-through}
.award-row td{background:#FEFBD6!important}
.progress-bar{background:var(--pink)}

.thumb img{width:100%;height:100%;object-fit:cover}
/* ペーパーの表紙（A5 縦） */
.ratio-cover{--bs-aspect-ratio:141.4%}

/* ログイン画面を開いたときだけ、ロゴの図形をふわっと置く（<use> の中は個別に動かせないので図形全体） */
@media (prefers-reduced-motion:no-preference){
  .kv .logo-mark{animation:place .9s cubic-bezier(.2,.7,.2,1) both}
  @keyframes place{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}