/* 作品目録と、1 点ずつの展示。 */
.desk{display:flex;gap:var(--s-4);align-items:flex-end;flex-wrap:wrap;padding:var(--s-4) 0 var(--s-5);border-top:1px solid var(--ink);border-bottom:1px solid var(--hair)}
.desk .f{display:flex;flex-direction:column;gap:6px}
.desk label{font:400 var(--t-plate)/1 var(--plate);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-mid)}
.desk input,.desk select,.desk button{font:400 var(--t-sm)/1.5 var(--mincho);color:var(--ink);background:var(--plinth);border:1px solid var(--hair);padding:8px 12px;border-radius:0}
.desk input{min-width:260px}
.desk input::placeholder{color:var(--ink-faint)}
.desk button{cursor:pointer;font:400 var(--t-plate)/1.6 var(--plate);letter-spacing:var(--track-label);text-transform:uppercase;padding:9px 14px;transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.desk button:hover{border-color:var(--label);color:var(--label)}
.desk .tally{margin-left:auto;font:400 var(--t-plate)/1.7 var(--plate);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-mid);align-self:flex-end;padding-bottom:9px}

/* 目録の本体。室ごとに区切る */
.cat{padding:var(--s-6) 0 var(--s-8)}
.cg{margin-bottom:var(--s-7)}
.cg > header{display:flex;align-items:baseline;gap:var(--s-4);padding-bottom:12px;border-bottom:1px solid var(--ink);margin-bottom:var(--s-5);flex-wrap:wrap}
.cg header u{text-decoration:none;font:400 var(--t-plate)/1 var(--plate);letter-spacing:var(--track-plate);color:var(--label)}
.cg header h3{font:400 var(--t-lg)/var(--lh-tight) var(--mincho)}
.cg header i{font-style:italic;color:var(--ink-mid);font-size:var(--t-sm)}
.cg header span{margin-left:auto;font:400 var(--t-plate)/1 var(--plate);letter-spacing:var(--track-label);color:var(--ink-mid)}

.works{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6) var(--s-5)}
@media (max-width:1000px){.works{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.works{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.works{grid-template-columns:1fr}}
.wk{display:block;position:relative}
.wk .th{height:98px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.44);border:1px solid var(--hair);filter:drop-shadow(var(--cast-4));transition:border-color var(--dur-1) var(--ease)}
.wk .th svg{display:block}
.wk u{display:block;text-decoration:none;font:400 var(--t-plate)/1 var(--plate);letter-spacing:var(--track-label);color:var(--label);margin:14px 0 6px}
.wk b{display:block;font-weight:400;font-size:var(--t-md);line-height:1.5}
.wk p{margin:6px 0 0;font-size:12.5px;color:var(--ink-mid);line-height:1.78}
.wk:hover b{color:var(--label)}
.wk:hover .th{border-color:var(--label)}
.wk .keep{position:absolute;top:6px;right:6px;background:transparent;border:0;padding:4px;cursor:pointer;line-height:0}
.wk .keep canvas{display:block}
.wk[data-cur="1"] .th{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}

.empty{padding:var(--s-6) 0;color:var(--ink-mid);font-style:italic}
.hint{margin-top:var(--s-5);color:var(--ink-mid);font-size:12.5px}

/* 1 点ずつの展示 */
.exhibit{padding:var(--s-5) 0 var(--s-8)}
.exhibit .back{font:400 var(--t-plate)/1 var(--plate);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-mid);background:transparent;border:0;border-bottom:1px solid var(--hair);padding:0 0 5px;cursor:pointer;margin-bottom:var(--s-5)}
.exhibit .back:hover{color:var(--label);border-bottom-color:var(--label)}
.exhibit .head{display:grid;grid-template-columns:1fr 280px;gap:var(--s-6);align-items:start;padding-bottom:var(--s-5);border-bottom:1px solid var(--ink)}
@media (max-width:860px){.exhibit .head{grid-template-columns:1fr}}
.exhibit .head u{display:block;text-decoration:none;font:400 var(--t-plate)/1 var(--plate);letter-spacing:var(--track-plate);color:var(--label);margin-bottom:10px}
.exhibit .head h2{font:400 var(--t-2xl)/var(--lh-tight) var(--mincho);margin:0 0 var(--s-3)}
.exhibit .head .why{color:var(--ink-mid);font-size:var(--t-md);max-width:48ch;margin:0}
.exhibit .head .fig{border:1px solid var(--hair);background:var(--plinth);padding:var(--s-4);display:flex;align-items:center;justify-content:center;filter:drop-shadow(var(--cast-3))}
.exhibit .plateinfo{margin:var(--s-5) 0 0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;gap:0 var(--s-4);border-top:1px solid var(--hair-soft);padding-top:var(--s-4)}
.exhibit .plateinfo dt{grid-row:1}
.exhibit .plateinfo dd{grid-row:2}
.exhibit .plateinfo dt{font:400 var(--t-plate)/1 var(--plate);letter-spacing:var(--track-plate);text-transform:uppercase;color:var(--ink-mid)}
.exhibit .plateinfo dd{margin:7px 0 0;font-size:var(--t-sm);line-height:1.7}
@media (max-width:720px){.exhibit .plateinfo{grid-template-columns:repeat(2,1fr);grid-template-rows:none}
.exhibit .plateinfo dt,.exhibit .plateinfo dd{grid-row:auto}}
.exhibit .acts{display:flex;gap:var(--s-3);margin:var(--s-5) 0 0;flex-wrap:wrap}
.exhibit .acts button{font:400 var(--t-plate)/1.6 var(--plate);letter-spacing:var(--track-label);text-transform:uppercase;background:var(--plinth);border:1px solid var(--hair);padding:9px 14px;cursor:pointer;border-radius:0;color:var(--ink)}
.exhibit .acts button:hover{border-color:var(--label);color:var(--label)}
.exhibit .stage{margin-top:var(--s-5)}

/* 道具の中身（ui.js が作る部品の見た目） */
.panel{background:rgba(255,253,249,.62);border:1px solid var(--hair);padding:var(--s-5)}
.panel h4{font:400 var(--t-lg)/1.5 var(--mincho);margin:0 0 var(--s-3)}
.row{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:flex-end;margin-bottom:var(--s-3)}
.field{display:flex;flex-direction:column;gap:6px;flex:1 1 220px}
.field > span{font:400 var(--t-plate)/1 var(--plate);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-mid)}
input,select,textarea{font:400 var(--t-sm)/1.6 var(--mincho);color:var(--ink);background:var(--plinth);border:1px solid var(--hair);padding:9px 12px;border-radius:0;width:100%}
textarea{min-height:140px;resize:vertical;font-family:var(--mono);font-size:12.5px;line-height:1.7}
input[type="range"]{padding:0}
input[type="color"]{padding:2px;height:38px}
button{font:400 var(--t-plate)/1.6 var(--plate);letter-spacing:var(--track-label);text-transform:uppercase;background:var(--plinth);border:1px solid var(--hair);padding:9px 15px;cursor:pointer;border-radius:0;color:var(--ink);transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
button:hover{border-color:var(--label);color:var(--label)}
button[data-kind="primary"]{border-color:var(--ink);color:var(--ink)}
button[data-kind="primary"]:hover{background:var(--ink);color:var(--wall-lit)}
.out{border:1px solid var(--hair);background:var(--plinth);padding:var(--s-3);font:400 12.5px/1.75 var(--mono);white-space:pre-wrap;word-break:break-word;max-height:420px;overflow:auto}
.st{font:400 var(--t-plate)/1.8 var(--plate);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-mid)}
.st[data-k="ok"]{color:var(--good)}
.st[data-k="bad"]{color:var(--bad)}
.st[data-k="busy"]{color:var(--label)}
.meterline{font:400 var(--t-plate)/1.8 var(--plate);letter-spacing:var(--track-label);color:var(--ink-faint);margin-top:var(--s-2)}
canvas.stage{border:1px solid var(--hair);background:var(--plinth);display:block;max-width:100%}
table.grid{width:100%;border-collapse:collapse;font-size:12.5px;font-family:var(--mono)}
table.grid th,table.grid td{border:1px solid var(--hair-soft);padding:6px 9px;text-align:left}
table.grid th{background:rgba(206,199,186,.24);font-weight:400}

/* ------- 道具の中身（ui.js が組む部品） ------- */
.fields{display:flex;flex-direction:column;gap:var(--s-3)}
.acts{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-4)}
.row{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:flex-end}
.row>.f{flex:1 1 220px;display:flex;flex-direction:column;gap:6px}
.row>.fit{flex:0 0 auto}
.f>label,.fields label{font:400 var(--t-plate)/1 var(--plate);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-mid)}
button.pri,button.md[data-kind="primary"]{border-color:var(--ink);color:var(--ink)}
button.pri:hover{background:var(--ink);color:var(--wall-lit)}

.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s-3)}
.tag{font:400 var(--t-plate)/1.7 var(--plate);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-mid);border:1px solid var(--hair);padding:2px 8px}
.tg{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

.res{margin-top:var(--s-4);border:1px solid var(--hair);background:var(--plinth)}
.res-head{display:flex;gap:var(--s-4);align-items:center;padding:9px var(--s-3);border-bottom:1px solid var(--hair-soft);
  font:400 var(--t-plate)/1.7 var(--plate);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-mid);flex-wrap:wrap}
.res-head b{color:var(--label);font-weight:400}
.res-body{padding:var(--s-3);font:400 12.5px/1.8 var(--mono);white-space:pre-wrap;word-break:break-word;min-height:2.6em;color:var(--ink)}
.res-body:empty::after{content:"まだ何も入れていない";color:var(--ink-mid);font-family:var(--mincho);font-style:italic}
.res-body table{border-collapse:collapse;width:100%;font-size:12px}
.res-body td,.res-body th{border:1px solid var(--hair-soft);padding:5px 9px;text-align:left;vertical-align:top}
.res-body th{color:var(--ink-mid);font-weight:400;background:rgba(206,199,186,.20)}
.res-body canvas,.res-body img{max-width:100%;height:auto;border:1px solid var(--hair-soft)}

.spin{display:inline-block;width:8px;height:8px;background:var(--label);margin-right:7px;animation:tick 900ms steps(2,end) infinite}
@keyframes tick{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

.hist{margin-top:var(--s-4)}
.hist ol{margin:0;padding-left:var(--s-4);color:var(--ink-mid);font-size:12.5px}
.hist li{margin-bottom:3px;cursor:pointer}
.hist li:hover{color:var(--label)}

.drop{border:1px dashed var(--hair);background:rgba(255,253,249,.42);padding:var(--s-5) var(--s-3);text-align:center;color:var(--ink-mid);font-size:var(--t-sm);font-style:italic;transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.drop[data-over]{border-color:var(--label);background:var(--plinth);color:var(--label)}
.kbd-hint{color:var(--ink-mid);font-size:12.5px;margin-top:var(--s-2)}

/* 全点の点検 */
.audit{border:1px solid var(--hair);background:var(--plinth);padding:var(--s-4);margin-top:var(--s-5)}
.audit table{width:100%;border-collapse:collapse;font-size:12.5px}
.audit th,.audit td{border-bottom:1px solid var(--hair-soft);padding:7px 10px 7px 0;text-align:left;vertical-align:top}
.audit th{font:400 var(--t-plate)/1.7 var(--plate);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-mid)}

/* ------- ファイルを選ぶ口。既製の窓のままにしない ------- */
input[type="file"]{font:400 var(--t-plate)/1.7 var(--plate);letter-spacing:var(--track-label);color:var(--ink-mid);
  background:transparent;border:0;padding:10px 0 0}
input[type="file"]::file-selector-button{font:400 var(--t-plate)/1.6 var(--plate);letter-spacing:var(--track-label);
  text-transform:uppercase;background:var(--plinth);border:1px solid var(--hair);color:var(--ink);
  padding:9px 16px;margin-right:14px;cursor:pointer;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
input[type="file"]::file-selector-button:hover{border-color:var(--label);color:var(--label)}

/* ------- はみ出しの根を止める ------- */
.audit-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.audit table{table-layout:fixed}
.audit td,.audit th{overflow-wrap:anywhere;word-break:break-word;min-width:0}
.audit td:nth-child(1),.audit th:nth-child(1){width:3.8em;white-space:nowrap}
.audit td:nth-child(2),.audit th:nth-child(2){width:15em}
.audit td:nth-child(3),.audit th:nth-child(3){width:6.6em;white-space:nowrap}
.audit td:nth-child(5),.audit th:nth-child(5){width:5.4em;text-align:right;white-space:nowrap}
.res-body table{table-layout:fixed}
.res-body td,.res-body th,table.grid td,table.grid th{overflow-wrap:anywhere;word-break:break-word;min-width:0}
.res-body,.res-body *,#exhibit pre,#exhibit code,#exhibit output,.note,.st{overflow-wrap:anywhere}
#exhibit img,#exhibit canvas,#exhibit svg,#exhibit table,#exhibit pre{max-width:100%}
#exhibit,#exhibit>*,.case,.case>*,.desk,.desk>*{min-width:0}

@media (max-width:640px){
  /* 5 列は 390px に収まらない。1 点 1 かたまりに積み替える */
  .audit table,.audit tbody,.audit tr,.audit td{display:block;width:auto}
  .audit tr:first-child{display:none}
  .audit tr{border-bottom:1px solid var(--hair);padding:10px 0}
  .audit tr:last-child{border-bottom:0}
  .audit td{border:0;padding:2px 0;display:grid;grid-template-columns:5.2em 1fr;gap:8px;align-items:baseline}
  .audit td::before{content:attr(data-label);font:400 var(--t-plate)/1.7 var(--plate);
    letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-faint)}
  .audit td:empty{display:none}
  .audit td:nth-child(1),.audit td:nth-child(2),.audit td:nth-child(3),.audit td:nth-child(5),
  .audit th:nth-child(1),.audit th:nth-child(2),.audit th:nth-child(3),.audit th:nth-child(5){
    width:auto;text-align:left;white-space:normal}
  .audit-scroll{overflow-x:visible}
}

/* 出品の中に置いた canvas は、枠より広くならない。習慣の 21 日分が携帯幅で外へ出ていた。 */
.res-body canvas,.stage canvas{max-width:100%}