/* YORI Drawing Manager — デモ（demo/zumen-daicho.html）と同じ見た目 */
:root{
  --ground:#EEF1F4; --surface:#FFFFFF; --surface-2:#F6F8FA; --surface-3:#EAEFF3;
  --line:#D2DAE1; --line-soft:#E5EAEE;
  --ink:#141B22; --ink-2:#4A5762; --ink-3:#7B8895;
  --accent:#1D5C8F; --accent-soft:#E2EDF6;
  --ok:#2E7D5B; --warn:#9C6A15; --crit:#AB3939; --crit-soft:#F8E7E7;
  --shadow:0 1px 2px rgba(20,27,34,.06), 0 6px 18px rgba(20,27,34,.06);
  --shadow-lg:0 2px 6px rgba(20,27,34,.08), 0 18px 46px rgba(20,27,34,.14);
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#0D1319; --surface:#161E25; --surface-2:#1B242C; --surface-3:#212B34;
    --line:#2D3841; --line-soft:#232E37;
    --ink:#E7EDF2; --ink-2:#AAB7C2; --ink-3:#7C8A96;
    --accent:#74B6E9; --accent-soft:#17303F;
    --ok:#63C296; --warn:#DAAB52; --crit:#E37D7D; --crit-soft:#311919;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 18px 46px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif; font-size:14px; line-height:1.7}
a{color:var(--accent)}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-variant-numeric:tabular-nums}
button,input,textarea,select{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ヘッダー：上段にアプリ名と利用者、下段に検索 */
.topbar{position:relative; z-index:30; background:var(--surface); border-bottom:1px solid var(--line)}
@media (min-width:900px){.topbar{position:sticky; top:0}}
.tb-row{display:flex; align-items:center; gap:14px; padding:10px 20px}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto; min-width:0; color:inherit; text-decoration:none}
.logo{width:34px; height:34px; flex:none; border-radius:8px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center}
.logo svg{width:27px; height:27px; display:block}
.brand b{font-weight:900; font-size:17px; line-height:1.2}
.brand b em{font-style:normal; color:var(--accent)}
.me{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700}
.role{font-size:10.5px; padding:1px 7px; border-radius:10px; background:var(--surface-3); color:var(--ink-3)}
.role.admin{background:var(--accent-soft); color:var(--accent)}
.tb-search{display:flex; align-items:flex-end; gap:10px 16px; flex-wrap:wrap; padding:10px 20px 12px; border-top:1px solid var(--line-soft); background:var(--surface-2)}
.fgrid{flex:1 1 640px; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px 10px}
@media (min-width:1080px){.fgrid{grid-template-columns:repeat(4,minmax(96px,1fr)) repeat(2,minmax(160px,1.35fr))}}
.fld{display:flex; flex-direction:column; gap:4px; min-width:0; position:relative}
.fld label{font-size:10.5px; letter-spacing:.1em; font-weight:700; color:var(--ink-3)}
.fld label small{font-weight:500; letter-spacing:0; margin-left:4px}
.fld input{width:100%; padding:7px 9px; border-radius:6px; border:1px solid var(--line); background:var(--surface); font-size:13px; min-width:0}
.fld input::placeholder{color:var(--ink-3)}
.rng-row{display:flex; align-items:center; gap:4px}
.rng-row input{flex:1 1 0; font-family:ui-monospace,Consolas,monospace}
.rng-row span{flex:none; color:var(--ink-3); font-size:12px}
.fbar{display:flex; align-items:center; gap:10px; flex:none; padding-bottom:2px}
.count{font-size:12px; color:var(--ink-3); white-space:nowrap}
@media (max-width:560px){.tb-row{gap:8px; padding:9px 14px} .tb-search{padding:10px 14px 12px} .brand b{font-size:14px}}

/* 入力もできる選択欄 */
.combo ul{position:absolute; z-index:25; top:100%; margin-top:3px; left:0; right:0; max-height:230px; overflow-y:auto;
  padding:4px; list-style:none; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow-lg)}
.combo li{display:flex; gap:8px; padding:6px 9px; border-radius:5px; font-size:13px; cursor:pointer}
.combo li[aria-selected="true"],.combo li:hover{background:var(--accent-soft); color:var(--accent)}
.combo li .cnt{margin-left:auto; font-size:11px; color:var(--ink-3)}
.combo li.none{color:var(--ink-3); cursor:default}

.btn{display:inline-block; padding:8px 14px; border-radius:7px; border:1px solid var(--accent); background:var(--accent); color:var(--surface); font-weight:700; font-size:13px; text-decoration:none}
.btn:hover{filter:brightness(1.1)}
.btn-sm{padding:5px 11px; font-size:12px}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink-2); font-weight:500}
.wrap{max-width:1240px; margin:0 auto; padding:16px 20px 80px}
.notice{max-width:1240px; margin:0 auto; padding:9px 20px; font-size:12px; color:var(--warn); font-weight:700}

/* 一覧 */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(262px,1fr)); gap:14px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; color:inherit; text-decoration:none; transition:border-color .15s, transform .15s, box-shadow .15s}
.card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow)}
.thumb{background:#F1F0EC; border-bottom:1px solid var(--line-soft); position:relative; aspect-ratio:1.414; overflow:hidden; display:flex; align-items:center; justify-content:center}
.thumb img{width:100%; height:100%; object-fit:contain; display:block}
.thumb .none{font-size:12px; color:#8A9198}
.thumb.nofile{aspect-ratio:auto; height:34px; background:var(--surface-2)}   /* 図面がまだない図番は細い帯だけ */
.rev-tag{position:absolute; top:7px; right:7px; font-size:10px; font-weight:700; background:rgba(255,255,255,.92); border:1px solid #C9C7C0; color:#3A4148; padding:1px 6px; border-radius:4px}
.card-body{padding:11px 13px 12px; display:flex; flex-direction:column; gap:6px; flex:1}
.zuban{font-size:14.5px; font-weight:700; color:var(--accent)}
.hinmei{font-weight:700; font-size:15px; line-height:1.3}
.meta{font-size:12px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:3px 10px}
.meta i{font-style:normal; color:var(--ink-3)}
.folderbar{display:flex; gap:4px; margin-top:auto; padding-top:9px; border-top:1px solid var(--line-soft)}
.fdot{flex:1; text-align:center; font-size:10px; font-weight:700; padding:3px 0; border-radius:4px; background:var(--surface-3); color:var(--ink-3)}
.fdot.on{background:var(--accent-soft); color:var(--accent)}
.empty{padding:56px 20px; text-align:center; color:var(--ink-3); border:1px dashed var(--line); border-radius:10px; background:var(--surface)}
.pager{display:flex; gap:6px; justify-content:center; margin-top:20px; flex-wrap:wrap}
.pager a,.pager span{padding:5px 11px; border-radius:6px; border:1px solid var(--line); background:var(--surface); text-decoration:none; font-size:13px}
.pager span{background:var(--accent); border-color:var(--accent); color:var(--surface)}

/* 詳細 */
.crumb{display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:13px; color:var(--ink-3)}
.crumb a{font-weight:700; text-decoration:none}
.viewer{background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.viewer-head{display:flex; align-items:center; gap:7px; padding:8px 11px; border-bottom:1px solid var(--line-soft); background:var(--surface-2); flex-wrap:wrap}
.viewer-head .lbl{font-size:11px; letter-spacing:.12em; color:var(--ink-3); font-weight:700; margin-right:auto}
.revbtn{padding:3px 10px; border-radius:5px; border:1px solid var(--line); background:var(--surface); font-size:12px; font-weight:700; color:var(--ink-2); text-decoration:none}
.revbtn[aria-current="true"]{background:var(--accent); border-color:var(--accent); color:var(--surface)}
.stagewrap{position:relative; background:#5A5F63; overflow:hidden; height:min(74vh,660px); touch-action:none; cursor:grab}
@media (max-width:640px){.stagewrap{height:min(58vh,420px)}}
.stagewrap.grabbing{cursor:grabbing}
.stage{position:absolute; top:0; left:0; transform-origin:0 0}
.stage img{display:block; max-width:none; box-shadow:0 3px 16px rgba(0,0,0,.45); background:#fff}
.zoomctl{position:absolute; right:10px; bottom:10px; display:flex; gap:5px; align-items:center; background:rgba(22,30,37,.9); border-radius:8px; padding:4px}
.zoomctl button{min-width:30px; height:28px; border-radius:5px; border:1px solid rgba(255,255,255,.16); background:transparent; color:#E7EDF2; font-weight:700; padding:0 8px}
.zoomctl .pct{color:#B9C4CD; font-size:11px; min-width:44px; text-align:center}
.nodrawing{padding:60px 20px; text-align:center; color:#C9D1D8}
.sheet-foot{display:flex; gap:14px; flex-wrap:wrap; align-items:center; padding:8px 12px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--ink-3); background:var(--surface-2)}
.sheet-foot .pages{margin-left:auto; display:flex; gap:4px}
.infostrip{display:flex; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:10px; margin-top:13px; overflow:hidden}
.infostrip .it{flex:1 1 150px; padding:11px 16px; border-left:1px solid var(--line-soft); min-width:0}
.infostrip .it:first-child{border-left:none}
.infostrip .k{font-size:10.5px; letter-spacing:.1em; color:var(--ink-3); font-weight:700}
.infostrip .v{font-size:15px; font-weight:500; word-break:break-word}

details.admin{margin-top:13px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:0 16px}
details.admin summary{cursor:pointer; padding:11px 0; font-weight:700; font-size:13px; color:var(--accent)}
.form-row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; padding-bottom:14px}
.form-row label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; font-weight:700; color:var(--ink-3)}
.form-row input[type=text],.form-row input[type=date]{padding:6px 8px; border-radius:6px; border:1px solid var(--line); background:var(--surface-2); font-size:13px}

/* タブ */
.process{margin-top:22px; min-height:100vh}   /* 中身の短いタブに切り替えても、ページが縮んで位置がずれないように */
.tabs{display:flex; align-items:center; gap:3px; overflow-x:auto; padding-bottom:2px}
.tab{white-space:nowrap; padding:9px 15px; border-radius:8px 8px 0 0; border:1px solid transparent; border-bottom:none; color:var(--ink-2); font-weight:700; font-size:13.5px; text-decoration:none}
.tab:hover{color:var(--ink); background:var(--surface-2)}
.tab[aria-current="true"]{background:var(--surface); border-color:var(--line); color:var(--accent)}
.tab.bad[aria-current="true"]{color:var(--crit)}
.tab .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-left:6px; vertical-align:2px}
.arrow{color:var(--ink-3); flex:none; opacity:.45}
.tabsplit{width:1px; align-self:stretch; background:var(--line); margin:7px 9px}
.panelbox{background:var(--surface); border:1px solid var(--line); border-radius:0 10px 10px 10px; padding:20px; margin-top:-1px}
@media (max-width:640px){.panelbox{border-radius:10px; margin-top:6px; padding:16px}}
.twocol{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px}
@media (max-width:860px){.twocol{grid-template-columns:1fr; gap:22px}}
.seclabel{font-size:11px; letter-spacing:.12em; color:var(--ink-3); font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:11px}
.seclabel::after{content:""; flex:1; height:1px; background:var(--line-soft)}
.block + .block{margin-top:22px}
.nodata{font-size:13px; color:var(--ink-3); padding:8px 0}

.shg{display:grid; grid-template-columns:110px minmax(0,1fr); gap:6px 14px; align-items:start; padding:10px 0; border-top:1px solid var(--line-soft)}
.shg:first-child{border-top:none; padding-top:2px}
.shm{justify-self:start; margin-top:7px; font-family:ui-monospace,Consolas,monospace; font-size:12.5px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:2px 9px; border-radius:6px; white-space:nowrap}
.shm.common{font-family:inherit; color:var(--ink-2); background:var(--surface-3)}
@media (max-width:560px){.shg{grid-template-columns:1fr} .shm{margin-top:0}}

.memo{display:flex; flex-direction:column; gap:12px}
.memo-item{border-left:2px solid var(--accent); padding:2px 0 2px 12px}
.memo-item .who{font-size:11.5px; color:var(--ink-3); display:flex; gap:8px}
.memo-item .who b{color:var(--ink-2)}
.memo-item p{margin:0; font-size:13.5px; white-space:pre-wrap}
.memo-item .edited{color:var(--ink-3)}
.memo-edit{margin-top:3px; font-size:12px}
.memo-edit summary{cursor:pointer; color:var(--ink-3); list-style:none; display:inline-block; padding:2px 0}
.memo-edit summary::-webkit-details-marker{display:none}
.memo-edit summary:hover{color:var(--accent)}
.memo-edit[open] summary{color:var(--accent); font-weight:700}
.memo-edit form{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.memo-edit textarea{width:100%; min-height:64px; resize:vertical; padding:9px 11px; border-radius:7px; border:1px solid var(--line); background:var(--surface-2); font-size:13px}
.memo-edit-bar{display:flex; justify-content:space-between; gap:8px}
.btn.danger{color:var(--crit); border-color:var(--crit)}
.memo-add{margin-top:13px; display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.memo-add textarea{width:100%; min-height:42px; resize:vertical; padding:9px 11px; border-radius:7px; border:1px solid var(--line); background:var(--surface-2); font-size:13px}

.flist{display:flex; flex-direction:column}
.frow{display:flex; align-items:center; gap:10px; padding:9px 2px; border-top:1px solid var(--line-soft)}
.frow:first-child{border-top:none; padding-top:2px}
.frow .fopen{flex:1; min-width:0; display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none}
.frow .fopen:hover .fn{color:var(--accent)}
.fdel{flex:none; margin:0}
.fdel button{font-size:11px; color:var(--ink-3); background:none; border:1px solid transparent; border-radius:5px; padding:2px 7px; cursor:pointer}
.fdel button:hover{color:var(--crit); border-color:var(--crit)}
.frow .fk{flex:none; min-width:40px; text-align:center; font-size:9.5px; font-weight:700; color:var(--ink-3); border:1px solid var(--line); border-radius:4px; padding:1px 5px; text-transform:uppercase}
.frow .fn{flex:1; min-width:0; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.frow .fm{flex:none; font-size:11px; color:var(--ink-3)}
@media (max-width:480px){.frow .fm{display:none}}
.upload{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; padding:10px; border:1px dashed var(--line); border-radius:7px}
.upload input[type=text]{width:120px; padding:5px 8px; border-radius:6px; border:1px solid var(--line); background:var(--surface-2); font-size:12.5px}
.upload input[type=file]{flex:1; min-width:180px; font-size:12px}
.later{padding:20px; border:1px dashed var(--line); border-radius:9px; color:var(--ink-3); font-size:13px}

/* 利用者の権限 */
.perm{border-radius:10px}
.perm h1{font-size:18px; margin:0 0 6px}
.perm .lead,.perm .note{font-size:13px; color:var(--ink-2); margin:0 0 14px}
.perm .note{margin-top:14px; color:var(--ink-3)}
.perm-table{width:100%; border-collapse:collapse; font-size:13.5px}
.perm-table th{text-align:left; font-size:11px; letter-spacing:.1em; color:var(--ink-3); padding:6px 8px; border-bottom:1px solid var(--line)}
.perm-table td{padding:9px 8px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.perm-table form{margin:0}
.perm-form{display:flex; gap:6px; align-items:center}
.perm-form select{padding:5px 8px; border-radius:6px; border:1px solid var(--line); background:var(--surface-2); font-size:13px}
.perm-fixed{font-size:12px; color:var(--ink-3)}
.perm-legend{list-style:none; padding:0; margin:0 0 14px; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12.5px; color:var(--ink-2)}
.perm-legend .role{margin-right:6px}

/* ログイン */
.login{max-width:420px; margin:12vh auto 0; padding:28px 24px; background:var(--surface); border:1px solid var(--line); border-radius:14px; text-align:center}
.login .brand{justify-content:center; margin:0 0 18px}
.login-alt{font-size:12.5px; color:var(--ink-3)}
.logout{margin:0}
.logout button{background:none; border:1px solid var(--line); border-radius:6px; padding:3px 9px; font-size:12px; color:var(--ink-2)}