:root { --ink:#1d1f21; --mute:#6b7075; --line:#d9dcdf; --bg:#f6f6f4; --card:#fff; --fb:#fff7cc; --ai:#e8f1fb; --accent:#e4572e; --ok:#2f8f5b; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin:0; font: 14px/1.5 -apple-system, "Hiragino Sans", sans-serif; color:var(--ink); background:var(--bg); }
button { font:inherit; padding:4px 10px; border:1px solid var(--line); background:#fff; border-radius:4px; cursor:pointer; color:inherit; }
button:hover { border-color:var(--ink); }
button.primary { background:var(--ink); color:#fff; border-color:var(--ink); }
button:disabled { opacity:.4; cursor:default; }
input::placeholder, textarea::placeholder { color:#b3b7bb; }
input, textarea, select { font:inherit; color:inherit; border:1px solid var(--line); border-radius:4px; padding:4px 6px; background:#fff; width:100%; }
input:disabled, textarea:disabled, select:disabled { background:#f3f3f1; color:var(--ink); }
textarea { resize:vertical; min-height:56px; }
textarea:focus, input:focus, select:focus, .img:focus { outline:2px solid var(--accent); outline-offset:-1px; }

header { position:sticky; top:0; z-index:20; display:flex; gap:8px; align-items:center; padding:8px 16px; background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap; }
header .title { font-size:18px; font-weight:700; border-color:transparent; width:auto; flex:0 1 420px; min-width:180px; }
header .title:hover { border-color:var(--line); }
.sum { color:var(--mute); font-size:12px; }
.sum .warn { color:var(--accent); font-weight:700; }
.status { color:var(--mute); font-size:12px; min-width:120px; }
.status.warn { color:var(--accent); font-weight:700; }
.grow { flex:1; }
#banner { position:sticky; top:52px; z-index:19; background:#24282c; color:#fff; padding:8px 16px; display:flex; gap:10px; align-items:center; }
#banner button { background:transparent; color:#fff; border-color:#666; }

main { padding:16px; }
h2 { font-size:15px; margin:20px 0 8px; display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
h2 small { color:var(--mute); font-weight:400; }
.help { color:var(--mute); font-size:12px; }

details.meta { background:var(--card); border:1px solid var(--line); border-radius:6px; margin:12px 0 4px; }
details.meta > summary { list-style:none; cursor:pointer; padding:8px 12px; display:flex; gap:10px; align-items:baseline; white-space:nowrap; overflow:hidden; }
details.meta > summary::-webkit-details-marker { display:none; }
details.meta > summary::before { content:"▸"; color:var(--mute); }
details.meta[open] > summary::before { content:"▾"; }
details.meta > summary .peek { color:var(--mute); font-size:12px; overflow:hidden; text-overflow:ellipsis; }
details.meta[open] > summary .peek { display:none; }
.mgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); gap:6px 18px; padding:2px 12px 12px; }
.mf { display:grid; grid-template-columns:104px minmax(0, 1fr); gap:8px; align-items:start; }
.mf label { font-size:12px; font-weight:700; padding-top:6px; text-align:right; color:#3a3d40; }
.mf textarea, .mf input { padding:4px 8px; }
.mf.wide { grid-column:1 / -1; }
.mf.feedback textarea { background:var(--fb); }
.mf .imgs .img { width:128px; height:72px; }
.field { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:8px; }
.field label { display:block; font-weight:700; font-size:12px; margin-bottom:4px; }
.field .hint { color:var(--mute); font-size:11px; margin-top:2px; }
.field.feedback { background:var(--fb); }
.field.wide { grid-column:1 / -1; }

.wrap { overflow:auto; max-height:calc(100vh - 120px); border:1px solid var(--line); border-radius:6px; background:#fff; }
table { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; }
th, td { border-bottom:1px solid var(--line); border-right:1px solid var(--line); vertical-align:top; padding:6px; background:#fff; }
th { position:sticky; top:0; z-index:3; background:#fafafa; font-size:12px; text-align:left; white-space:nowrap; }
th:first-child, td.no { position:sticky; left:0; z-index:2; }
th:first-child { z-index:4; }
td.no { width:88px; min-width:88px; font-size:12px; color:var(--mute); background:#fafafa; }
td.no b { display:block; font-size:16px; color:var(--ink); }
td.no .ops { display:flex; flex-wrap:wrap; gap:2px; margin-top:6px; }
td.no .ops button { padding:0 6px; font-size:12px; }
tr.st-OK td.no b { color:var(--ok); }
tr.st-直し td.no b, tr.st-確認待ち td.no b { color:var(--accent); }
td.t-image { min-width:232px; } td.t-number { min-width:76px; width:76px; } td.t-select { min-width:124px; } td.t-text { min-width:180px; }
td.t-textarea, td.t-feedback, td.t-ai { min-width:240px; width:240px; }
td.t-feedback { background:var(--fb); } td.t-ai { background:var(--ai); }
td.t-feedback textarea, .field.feedback textarea { background:#fffdf0; } td.t-ai textarea { background:#f6faff; }

.img { white-space:pre-line; width:220px; height:124px; border:1.5px dashed #b9bdc1; border-radius:4px; display:flex; align-items:center; justify-content:center;
       color:var(--mute); font-size:11px; text-align:center; position:relative; background:#fbfbfa; cursor:pointer; overflow:hidden; }
.img.has { border-style:solid; border-color:#cfd2d5; background:#111; }
.img img { max-width:100%; max-height:100%; display:block; }
.img.drag { border-color:var(--accent); background:#fff1ec; }
.img .tools { position:absolute; top:3px; right:3px; display:none; gap:3px; }
.img .tools button { padding:0 6px; font-size:12px; }
.img.has:hover .tools, .img.has:focus .tools, .img.has:focus-within .tools { display:flex; }
.imgs { display:flex; flex-wrap:wrap; gap:6px; }
.imgs .img { width:160px; height:90px; }
.ro .img { cursor:default; }

.addrow { margin:8px 0 16px; }
.ask { background:#fff; border:1px solid var(--line); border-radius:6px; padding:8px 12px; margin:12px 0 40px; font-size:12px; color:var(--mute); }
.ask code { color:var(--ink); background:#f0f0ee; padding:1px 4px; border-radius:3px; user-select:all; }

.list { display:grid; gap:8px; max-width:960px; }
.list .row { display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:6px; padding:8px 12px; cursor:pointer; }
.list .row:hover { border-color:var(--ink); }
.list .row .th { width:96px; height:54px; background:#eee center/cover no-repeat; border-radius:3px; flex:none; }
.list .row .t { font-weight:700; flex:1; }
.list .row .m { color:var(--mute); font-size:12px; text-align:right; }
.new { display:flex; gap:8px; max-width:960px; margin:8px 0 4px; flex-wrap:wrap; }
.new select, .new input { width:auto; flex:1; min-width:200px; }
.search { max-width:960px; margin-bottom:8px; }

#toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:50; background:#24282c; color:#fff; padding:8px 14px; border-radius:6px; display:flex; gap:12px; align-items:center; box-shadow:0 4px 16px rgba(0,0,0,.2); }
#toast button { background:transparent; color:#fff; border-color:#777; }

#modal { position:fixed; inset:0; z-index:40; background:rgba(20,22,24,.55); display:flex; align-items:center; justify-content:center; padding:24px; }
#modal .box { background:#fff; border-radius:8px; max-width:980px; width:100%; max-height:calc(100vh - 48px); overflow:auto; padding:16px 20px; }
#modal .box h3 { margin:0 0 10px; font-size:16px; }
#modal .foot { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; position:sticky; bottom:-16px; background:#fff; padding:10px 0; }
#modal.light { background:rgba(0,0,0,.9); flex-direction:column; }
#modal.light img { max-width:100%; max-height:calc(100vh - 100px); }
#modal.light .cap { color:#fff; margin-top:10px; display:flex; gap:12px; align-items:center; }
#modal.light .cap button { background:transparent; color:#fff; border-color:#777; }
.vrow { display:flex; gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); }
.vrow .l { flex:1; }
.frow { display:grid; grid-template-columns:28px 1.1fr 130px 1.6fr 1fr 70px 96px; gap:6px; align-items:center; margin:4px 0; }
.frow.head { font-size:11px; color:var(--mute); }
.frow .ops { display:flex; gap:2px; }
.frow .ops button { padding:0 6px; }

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background:#fff; font-size:10px; }
  header button, header .status, .ops, .addrow, .ask, .img .tools, #banner, #toast { display:none !important; }
  header { position:static; border:0; }
  .wrap { max-height:none; overflow:visible; border:0; }
  th, td.no { position:static; }
  textarea, input, select { border:0; padding:0; resize:none; background:transparent !important; }
  .img { border:0; }
  tr { break-inside:avoid; }
}

/* YouTube cards under a text */
.yt { display:flex; flex-wrap:wrap; gap:6px; }
.yt:not(:empty) { margin-top:6px; }
.yt a { display:flex; gap:8px; width:300px; max-width:100%; background:#fafaf8; border:1px solid var(--line); border-radius:6px; padding:4px; color:inherit; text-decoration:none; align-items:center; }
.yt a:hover { border-color:var(--ink); }
.yt .th { width:96px; height:54px; border-radius:4px; background:#222 center/cover no-repeat; flex:none; position:relative; }
.yt .th::after { content:"▶"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.yt .t { font-size:12px; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.yt .a { font-size:11px; color:var(--mute); }
td .yt a { width:100%; flex-direction:column; align-items:stretch; }
td .yt .th { width:100%; height:auto; aspect-ratio:16/9; }

/* a list of links */
.links { display:grid; gap:6px; }
.links .lin { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) 30px; gap:6px; align-items:center; }
.links .lin .x { padding:0 6px; }
.links .lrow .yt:not(:empty) { margin-top:4px; }
.links .plus { justify-self:start; border-style:dashed; color:var(--mute); font-size:12px; padding:3px 10px; }
.links .plus:hover { color:var(--ink); }

/* accounts */
.auth { max-width:460px; margin:8vh auto; background:#fff; border:1px solid var(--line); border-radius:10px; padding:24px 28px; }
.auth h2 { margin:0 0 14px; font-size:18px; }
.auth form { display:grid; gap:10px; }
.auth .label { font-size:12px; font-weight:700; margin-top:6px; }
.auth .choice { display:grid; grid-template-columns:20px 1fr; gap:4px 8px; align-items:start; border:1px solid var(--line); border-radius:6px; padding:8px 10px; cursor:pointer; }
.auth .choice input[type=radio] { width:auto; margin-top:4px; }
.auth .choice > input:not([type=radio]) { grid-column:2; }
.auth .choice.off { opacity:.5; cursor:default; }
.auth .check { font-size:13px; display:flex; gap:6px; align-items:center; }
.auth .check input { width:auto; }
.auth .err { color:var(--accent); font-size:13px; min-height:1em; }
.auth a { color:inherit; }

/* the client's comments */
th.th-client { background:#fbeee8; }
td.t-client { min-width:260px; width:260px; background:#fdf6f2; }
.cnotes { display:grid; gap:8px; }
.cn { display:grid; grid-template-columns:18px 1fr; gap:6px; font-size:13px; }
.cn.ok { display:block; color:var(--ok); font-weight:700; }
.cn.done .ct { color:var(--mute); text-decoration:line-through; }
.cn .cd input { width:auto; margin-top:3px; }
.cn .where { font-size:11px; color:var(--accent); }
.cn .ct { white-space:pre-wrap; }
.client-overall { background:#fdf6f2; border:1px solid #f0d7cc; border-radius:6px; padding:10px 12px; margin:10px 0; }
.client-overall > b { font-size:12px; display:block; margin-bottom:6px; }

/* share panel */
.shares .vrow.off { opacity:.5; }
.sform { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px; margin:8px 0; }
.sform label { font-size:12px; font-weight:700; display:grid; gap:4px; }
.fchecks { display:flex; flex-wrap:wrap; gap:4px 14px; margin:4px 0 10px; font-size:13px; }
.fchecks input { width:auto; }
details summary { cursor:pointer; font-size:13px; }
.new label { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.new label input[type=checkbox] { width:auto; }

.frow label input { width:auto; }

.cfiles { display:flex; flex-wrap:wrap; gap:4px; margin:3px 0; }
.cfiles img { height:48px; max-width:90px; object-fit:cover; border-radius:3px; border:1px solid var(--line); display:block; }
.cfiles video { width:100%; max-width:230px; border-radius:3px; background:#000; }
.cyt { display:flex; gap:5px; align-items:center; font-size:11px; color:inherit; text-decoration:none; border:1px solid var(--line); border-radius:4px; padding:2px; max-width:230px; }
.cyt .th { width:56px; aspect-ratio:16/9; background:#222 center/cover no-repeat; border-radius:2px; flex:none; }

header strong.brand { letter-spacing:.02em; }

.folderbox { border:1px solid var(--line); border-radius:6px; padding:8px 10px; margin:8px 0; }