/* 自由研究 提出チェック — 先生用画面と管理画面で共通のスタイル
   色＝同志社の紫。学校サイト（jhs.js.doshisha.ac.jp）の #a748c7 / #d0c5e0 を基準に、
   毎日触る業務画面として濃くしたもの。色相は紫と琥珀の2つだけ。 */
:root{
  --hue:310;
  --c-50 :oklch(97.5% 0.014 var(--hue));
  --c-100:oklch(94%   0.030 var(--hue));
  --c-200:oklch(88%   0.055 var(--hue));
  --c-300:oklch(78%   0.095 var(--hue));
  --c-400:oklch(66%   0.155 316);
  --c-500:oklch(58%   0.200 316);
  --c-600:oklch(50%   0.175 310);
  --c-700:oklch(43%   0.150 310);   /* ボタンの地。白文字で 8:1 */
  --c-800:oklch(34%   0.110 var(--hue));
  --c-900:oklch(24%   0.070 var(--hue));

  --n-0  :oklch(99.3% 0.004 var(--hue));
  --n-50 :oklch(97.6% 0.006 var(--hue));
  --n-100:oklch(95%   0.008 var(--hue));
  --n-200:oklch(90%   0.010 var(--hue));
  --n-300:oklch(82%   0.012 var(--hue));
  --n-400:oklch(68%   0.014 var(--hue));
  --n-500:oklch(56%   0.014 var(--hue));
  --n-600:oklch(46%   0.012 var(--hue));
  --n-700:oklch(37%   0.010 var(--hue));
  --n-800:oklch(27%   0.008 var(--hue));
  --n-900:oklch(19%   0.006 var(--hue));

  --warn  :oklch(48% 0.135 62);     /* 予定・注意の1色 */
  --warn-b:oklch(96% 0.040 75);
  --warn-e:oklch(78% 0.120 70);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  --radius:16px; --radius-in:8px;

  --shadow-color:310 25% 32%;
  --elev-1:0 1px 2px hsl(var(--shadow-color)/.10), 0 2px 4px hsl(var(--shadow-color)/.06);
  --elev-2:0 1px 2px hsl(var(--shadow-color)/.08), 0 2px 4px hsl(var(--shadow-color)/.08), 0 4px 10px hsl(var(--shadow-color)/.08);
  --elev-3:0 2px 4px hsl(var(--shadow-color)/.07), 0 4px 8px hsl(var(--shadow-color)/.07),
           0 8px 16px hsl(var(--shadow-color)/.07), 0 16px 32px hsl(var(--shadow-color)/.07);

  --ease-out:cubic-bezier(.215,.61,.355,1);
  --t-micro:120ms; --t-ui:200ms; --t-modal:260ms;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--n-50); color:var(--n-900);
  font-family:'Zen Kaku Gothic New','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  font-size:16px; line-height:1.6; -webkit-text-size-adjust:100%;
  font-variant-numeric:tabular-nums;
}
button,input,textarea,select{font:inherit;font-variant-numeric:tabular-nums;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--c-500); outline-offset:2px; border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--s-4)}
[hidden]{display:none!important}
h1{font-size:24px;font-weight:900;margin:0 0 var(--s-2);letter-spacing:.01em}
.lead{color:var(--n-600);font-size:15px;margin:0 0 var(--s-5)}
main{padding-block:var(--s-5) var(--s-7)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ══ ヘッダー ══ */
.bar{
  position:sticky; top:0; z-index:20;
  background:var(--c-900); color:#fff;
  padding-top:env(safe-area-inset-top);
  box-shadow:0 1px 0 hsl(var(--shadow-color)/.35);
}
.bar .wrap{display:flex;align-items:center;gap:var(--s-4);min-height:60px;padding-block:var(--s-2)}
.brand{display:flex;align-items:baseline;gap:var(--s-3);min-width:0}
.brand b{font-weight:900;font-size:18px;letter-spacing:.02em;white-space:nowrap}
.brand span{font-size:12px;color:var(--c-200);white-space:nowrap}
.bar-r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.ghost{
  background:transparent;border:1.5px solid oklch(100% 0 0/.5);color:#fff;
  border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;
  min-height:44px;white-space:nowrap;
  transition:background var(--t-micro) ease,border-color var(--t-micro) ease;
}
@media (hover:hover) and (pointer:fine){ .ghost:hover{background:oklch(100% 0 0/.14);border-color:#fff} }
.ghost:active{transform:translateY(1px)}

/* ══ 提出期限の帯 ══ */
.band{background:var(--c-100);color:var(--c-900);box-shadow:inset 0 -1px 0 var(--c-200)}
.band .wrap{display:flex;align-items:center;gap:var(--s-3);min-height:40px;padding-block:8px;
  font-size:14px;font-weight:700;flex-wrap:wrap}
.band b{font-weight:900}
.band .left{color:var(--c-700)}
.band.past{background:var(--warn-b);color:oklch(32% 0.09 62);box-shadow:inset 0 -1px 0 var(--warn-e)}
.band.past .left{color:var(--warn)}

/* ══ ボタン ══ */
.btn{
  background:var(--c-700);color:#fff;border:2px solid var(--c-700);border-radius:var(--radius-in);
  padding:10px 18px;font-size:15px;font-weight:700;min-height:48px;
  transition:background var(--t-micro) ease,border-color var(--t-micro) ease,transform 34ms ease;
}
@media (hover:hover) and (pointer:fine){ .btn:hover{background:var(--c-800);border-color:var(--c-800)} }
.btn:active{transform:translateY(1px)}
.btn.sub{background:var(--n-0);color:var(--n-800);border-color:var(--n-400)}
@media (hover:hover) and (pointer:fine){ .btn.sub:hover{background:var(--n-100);border-color:var(--n-500)} }
.btn.small{min-height:44px;padding:8px 14px;font-size:14px}
.btn.danger{background:transparent;color:var(--warn);border-color:transparent}
@media (hover:hover) and (pointer:fine){ .btn.danger:hover{background:var(--warn-b);border-color:var(--warn-b)} }
.btn:disabled{opacity:.45;cursor:not-allowed}

.tab{
  background:var(--n-0);border:2px solid var(--n-200);border-radius:999px;
  padding:9px 18px;font-size:15px;font-weight:700;color:var(--n-700);min-height:44px;
  transition:background var(--t-micro) ease,border-color var(--t-micro) ease,color var(--t-micro) ease;
}
@media (hover:hover) and (pointer:fine){ .tab:hover{border-color:var(--c-400)} }
.tab[aria-selected="true"]{background:var(--c-900);border-color:var(--c-900);color:#fff}
.tab .n{opacity:.7;font-weight:500;margin-left:6px}
.tabs{display:flex;gap:var(--s-2);margin-bottom:var(--s-4);flex-wrap:wrap}

/* ══ 合言葉の入口 ══ */
.gate{min-height:100dvh;display:grid;place-items:center;padding:var(--s-5)}
.gate-box{width:100%;max-width:420px;background:var(--n-0);border-radius:var(--radius);
  padding:var(--s-6) var(--s-5);box-shadow:var(--elev-2);text-align:center}
.gate-box h1{font-size:22px;margin-bottom:var(--s-1)}
.gate-box p{color:var(--n-600);font-size:14px;margin:0 0 var(--s-5)}
.gate-box input{
  width:100%;font-size:18px;padding:14px 16px;text-align:center;letter-spacing:.08em;
  border:2px solid var(--n-300);border-radius:var(--radius-in);background:var(--n-0);min-height:56px;
}
.gate-box input:focus{border-color:var(--c-600);outline:none}
.gate-box .btn{width:100%;margin-top:var(--s-3)}
.gate-err{color:var(--warn);font-size:14px;font-weight:700;margin-top:var(--s-3);min-height:22px}

/* ══ 数字とメーター ══ */
.meter{display:block;height:10px;border-radius:999px;background:var(--n-200);overflow:hidden}
.meter i{display:block;height:100%;background:var(--c-600);border-radius:999px;
  transition:width var(--t-ui) var(--ease-out)}
.meter.full i{background:var(--c-500)}

/* ══ 知らせ ══ */
.note{
  background:var(--warn-b);border-radius:var(--radius-in);padding:var(--s-3) var(--s-4);
  font-size:14px;color:oklch(32% 0.09 62);margin-bottom:var(--s-4);
  border-left:4px solid var(--warn-e);
}
.empty{text-align:center;padding:var(--s-7) var(--s-4);color:var(--n-600)}
.empty b{display:block;font-size:20px;font-weight:900;color:var(--c-800);margin-bottom:6px}
.foot{margin-top:var(--s-6);font-size:13px;color:var(--n-500);line-height:1.9}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);
  background:var(--n-900);color:#fff;border-radius:999px;padding:12px 20px;
  font-size:15px;font-weight:700;box-shadow:var(--elev-2);
  opacity:0;pointer-events:none;transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out);
  z-index:60;max-width:calc(100vw - 32px);display:flex;align-items:center;gap:var(--s-3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast button{background:transparent;border:1.5px solid oklch(100% 0 0/.5);color:#fff;
  border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700;min-height:32px;white-space:nowrap}

/* ══ ポップアップ ══ */
dialog{
  border:none;padding:0;background:transparent;max-width:min(520px,calc(100vw - 32px));width:100%;
  color:var(--n-900);
}
dialog::backdrop{background:oklch(19% 0.02 310/.55)}
dialog[open]{animation:pop var(--t-modal) var(--ease-out)}
@keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.sheet{background:var(--n-0);border-radius:var(--radius);box-shadow:var(--elev-3);
  display:flex;flex-direction:column;max-height:min(86dvh,860px);overflow:hidden}
.sheet-body{overflow:auto;padding:var(--s-5);flex:1 1 auto}
.sheet h2{font-size:20px;font-weight:900;margin:0 0 var(--s-1)}
.sheet .err{color:var(--warn);font-weight:700;font-size:14px;margin:0 0 var(--s-2);min-height:0}
.picks.bad{outline:2px solid var(--warn-e);outline-offset:4px;border-radius:var(--radius-in)}
.sheet .who{font-size:13px;color:var(--n-600);margin:0 0 var(--s-4)}
.field{margin-bottom:var(--s-4)}
.field > label{display:block;font-size:13px;font-weight:700;color:var(--n-700);margin-bottom:6px}
.field input[type="date"],.field textarea{
  width:100%;border:2px solid var(--n-300);border-radius:var(--radius-in);
  padding:12px 14px;font-size:16px;background:var(--n-0);min-height:52px;
}
.field textarea{min-height:88px;resize:vertical;line-height:1.7}
.field input:focus,.field textarea:focus{border-color:var(--c-600);outline:none}
.field .hint{font-size:12px;color:var(--n-600);margin-top:6px}
.picks{display:grid;gap:var(--s-2)}
.pick{
  display:flex;align-items:flex-start;gap:var(--s-3);text-align:left;
  border:2px solid var(--n-200);border-radius:var(--radius-in);background:var(--n-0);
  padding:14px 16px;min-height:60px;
  transition:border-color var(--t-micro) ease,background var(--t-micro) ease;
}
@media (hover:hover) and (pointer:fine){ .pick:hover{border-color:var(--c-400)} }
.pick[aria-pressed="true"]{border-color:var(--c-700);background:var(--c-50);box-shadow:inset 0 0 0 1px var(--c-700)}
.pick b{font-size:16px;font-weight:700;display:block}
.pick small{font-size:12px;color:var(--n-600);display:block;margin-top:2px;line-height:1.5}
.pick .dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--n-400);margin-top:2px}
.pick[aria-pressed="true"] .dot{border-color:var(--c-700);background:var(--c-700);
  box-shadow:inset 0 0 0 3px var(--n-0)}
.acts{display:flex;align-items:center;gap:var(--s-2);flex:0 0 auto;
  background:var(--n-0);border-top:1px solid var(--n-200);
  padding:var(--s-3) var(--s-5) var(--s-5)}
.acts .sp{flex:1}
@media (max-width:560px){
  .acts{flex-wrap:wrap}
  .acts .btn.main{order:3;width:100%}
  .acts .sp{display:none}
  .acts .btn.sub{order:2;margin-left:auto}
  .acts .btn.danger{order:1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}