/* ============================================================
   Dolci e Vino Vault — プロトタイプ共通スタイル
   quiet / editorial / archive / precise / warm
   ============================================================ */

:root{
  color-scheme: light dark;

  /* 面と地 --------------------------------------------------- */
  --bg:        #f1efec;   /* やや温度のある淡いグレー */
  --surface:   #ffffff;   /* 面 */
  --surface-2: #faf8f6;   /* わずかに沈めた面 */
  --line:      #ddd8d2;
  --line-2:    #ebe7e2;

  /* 文字 ----------------------------------------------------- */
  --ink:   #262220;       /* 深いチャコール（わずかに暖色寄り） */
  --ink-2: #6b645e;       /* 補助情報 */
  --ink-3: #99918a;       /* さらに弱い補助情報 */

  /* 主操作・選択：指定パレット -------------------------------- */
  --palette-soft:  #B8E3E9;
  --palette-muted: #93B1B5;
  --palette-main:  #4F7C82;
  --palette-deep:  #0B2E33;
  --wine:      var(--palette-main);
  --wine-deep: var(--palette-deep);
  --wine-tint: #4F7C8230;
  --wine-line: #93B1B580;

  /* 状態（色だけに頼らず、必ず文字とアイコンを添える） ------- */
  --ok:   #3f6f52;
  --warn: #8a6118;
  --err:  #9c3527;
  --ok-tint:   #3f6f5214;
  --warn-tint: #8a611814;
  --err-tint:  #9c352714;

  /* 書体 ----------------------------------------------------- */
  /* 外部フォントは読み込まない。OS のフォントを使う。 */
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Noto Sans JP", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Noto Sans Mono", "Yu Gothic UI", monospace;

  /* 寸法 ----------------------------------------------------- */
  --r: 3px;                /* 角丸は最小限。archive らしく直線的に */
  --tap: 44px;             /* 最小タップ領域 */
  --hdr-h: 58px;
  --on-wine: #ffffff;      /* ワインレッドの上に載せる文字 */
  --shadow: 0 1px 2px #26222012;
  --shadow-lg: 0 6px 26px #2622201f;
  --scrim: #26222052;
}


/* ------------------------------------------------------------
   ダークモード
   既定は OS 追従。設定メニューの選択が data-theme で上書きする。
   夜の素材整理で目を疲れさせないための補助。基本は白い画面。
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:        #191614;
    --surface:   #221e1c;
    --surface-2: #1c1917;
    --line:      #39332e;
    --line-2:    #2a2523;

    --ink:   #ece7e1;
    --ink-2: #a89d93;
    --ink-3: #7c736b;

    --wine:      var(--palette-main);
    --wine-deep: var(--palette-deep);
    --wine-tint: #4F7C8230;
    --wine-line: #93B1B580;
    --on-wine:   #ffffff;

    --ok:   #7fb391;
    --warn: #d0a463;
    --err:  #e08b7e;
    --ok-tint:   #7fb39118;
    --warn-tint: #d0a46318;
    --err-tint:  #e08b7e18;

    --shadow: 0 1px 2px #00000059;
    --shadow-lg: 0 8px 30px #00000073;
    --scrim: #0b0908a8;
  }
}
:root[data-theme="dark"]{
  --bg:        #191614;
  --surface:   #221e1c;
  --surface-2: #1c1917;
  --line:      #39332e;
  --line-2:    #2a2523;

  --ink:   #ece7e1;
  --ink-2: #a89d93;
  --ink-3: #7c736b;

  --wine:      #c98a97;
  --wine-deep: #dda2ad;
  --wine-tint: #c98a9718;
  --wine-line: #c98a9740;
  --on-wine:   #241f1e;

  --ok:   #7fb391;
  --warn: #d0a463;
  --err:  #e08b7e;
  --ok-tint:   #7fb39118;
  --warn-tint: #d0a46318;
  --err-tint:  #e08b7e18;

  --shadow: 0 1px 2px #00000059;
  --shadow-lg: 0 8px 30px #00000073;
  --scrim: #0b0908a8;
}

*,*::before,*::after{box-sizing:border-box}

/* hidden 属性は、あとから来るクラスの display に負けないようにする */
[hidden]{display:none!important}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 1;
}

h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--wine);outline-offset:2px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:8px;top:-48px;z-index:100;background:var(--surface);
  border:1px solid var(--wine);color:var(--wine);padding:9px 14px;transition:top .12s}
.skip:focus{top:8px}

/* 等幅は「日付・容量・形式・検索条件」だけに小さく使う */
.mono{font-family:var(--mono);font-size:.82em;font-variant-numeric:tabular-nums;
  letter-spacing:.01em}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}

/* ============================================================
   ヘッダー
   ============================================================ */
.hdr{position:sticky;top:0;z-index:40;background:var(--surface);
  border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:16px;height:var(--hdr-h);
  max-width:1360px;margin:0 auto;padding:0 var(--gutter)}

.brand{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;
  min-height:var(--tap);flex-wrap:wrap}
.brand__name{font-size:14px;font-weight:600;letter-spacing:.005em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.brand__sub{font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

.hdr__search{flex:1 1 auto;max-width:460px;margin:0 auto}
.searchbox{display:flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--line);height:36px;padding:0 11px;width:100%}
.searchbox:focus-within{border-color:var(--wine);background:var(--surface)}
.searchbox input{flex:1;border:0;background:none;outline:none;font-size:13.5px;min-width:0}
.searchbox input::placeholder{color:var(--ink-3)}
.searchbox .ico{color:var(--ink-3);flex:none}

.hdr__right{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}

.iconbtn{display:grid;place-items:center;width:var(--tap);height:var(--tap);
  background:none;border:0;cursor:pointer;color:var(--ink-2)}
.iconbtn:hover{color:var(--ink)}

.menu{position:relative}
.menu__panel{position:absolute;right:0;top:calc(100% + 4px);min-width:206px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  padding:5px;z-index:50}
.menu__panel[hidden]{display:none}
.menu__panel a,.menu__panel button{display:block;width:100%;text-align:left;
  padding:9px 11px;font-size:13.5px;background:none;border:0;cursor:pointer;color:var(--ink)}
.menu__panel a:hover,.menu__panel button:hover{background:var(--surface-2)}
.menu__sep{height:1px;background:var(--line-2);margin:5px 0}
.menu__danger{color:var(--ink-2)}

/* ナビ（PC のみ。スマホはメニューへ畳む） */
.nav{display:flex;gap:2px;flex:none}
.nav a{font-size:13.5px;color:var(--ink-2);padding:0 11px;height:var(--tap);
  display:flex;align-items:center;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--wine)}

/* ============================================================
   レイアウト
   ============================================================ */
.shell{max-width:1360px;margin:0 auto;padding:26px var(--gutter) 96px}
.shell--narrow{max-width:1080px}

.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-size:20px;font-weight:600;letter-spacing:-.01em}
.page-head .sub{font-size:13px;color:var(--ink-2)}
.page-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.sec{margin-top:34px}
.sec__head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.sec__head h2{font-size:14px;font-weight:600}
.sec__head .more{margin-left:auto;font-size:12.5px;color:var(--ink-2)}
.sec__head .more:hover{color:var(--wine)}

.stack{display:grid;gap:14px}
.stack--s{gap:8px}
.two{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.rowf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rowf--nw{flex-wrap:nowrap}
.spacer{flex:1}

/* ============================================================
   ボタン
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:0 15px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font-size:13.5px;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn--primary{background:var(--wine);border-color:var(--wine);color:var(--on-wine);font-weight:500}
.btn--primary:hover{background:var(--wine-deep);border-color:var(--wine-deep);color:var(--on-wine)}
.btn--download{background:var(--palette-soft);border-color:var(--palette-soft);color:var(--palette-deep);font-weight:500}
.btn--download:hover{background:var(--palette-muted);border-color:var(--palette-muted);color:var(--palette-deep)}
.btn--ghost{border-color:transparent;background:none;color:var(--ink-2)}
.btn--ghost:hover{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
.btn--danger{border-color:var(--err);color:var(--err);background:var(--err-tint)}
.btn--danger:hover{background:var(--err);color:var(--on-wine)}
.btn--block{width:100%}
.btn--tap{min-height:var(--tap)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:var(--surface);border-color:var(--line)}

/* ============================================================
   入力
   ============================================================ */
.field{display:grid;gap:5px}
.label{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.label .req{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--wine);
  border:1px solid var(--wine-line);padding:0 4px;background:var(--wine-tint)}
.label .opt{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-3);
  border:1px solid var(--line);padding:0 4px}
.input,.select,.textarea{width:100%;min-height:38px;padding:7px 11px;background:var(--surface);
  border:1px solid var(--line);outline:none;font-size:14px}
.textarea{min-height:76px;resize:vertical;line-height:1.7}
.input:focus,.select:focus,.textarea:focus{border-color:var(--wine)}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.select{appearance:none;background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2399918a' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
.hint{font-size:12px;color:var(--ink-3)}

/* ============================================================
   チップ
   ============================================================ */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;
  border:1px solid var(--line);background:var(--surface);font-size:12.5px;color:var(--ink-2);
  cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip--on{border-color:var(--wine);color:var(--wine);background:var(--wine-tint);font-weight:500}
.chip--static{cursor:default}
.chip--static:hover{border-color:var(--line);color:var(--ink-2)}
.chip__x{display:grid;place-items:center;width:16px;height:16px;margin-right:-3px;
  border:0;background:none;cursor:pointer;color:inherit;font-size:14px;line-height:1}
.chip__n{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.chip--on .chip__n{color:var(--wine)}
.chips{display:flex;gap:6px;flex-wrap:wrap}

/* ============================================================
   カード / パネル
   ============================================================ */
.panel{background:var(--surface);border:1px solid var(--line);padding:18px}
.panel--flush{padding:0}
.panel__head{display:flex;align-items:baseline;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--line-2)}
.panel__head h2,.panel__head h3{font-size:13.5px;font-weight:600}
.panel__body{padding:18px}

/* 4区分カード：同じ重さで並べる */
.cats{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}
.cat{display:flex;flex-direction:column;gap:9px;background:var(--surface);
  border:1px solid var(--line);padding:16px;min-height:118px;
  transition:border-color .12s,transform .12s}
.cat:hover{border-color:var(--ink-3)}
.cat__name{font-size:15px;font-weight:600;letter-spacing:-.005em}
.cat__meta{margin-top:auto;color:var(--ink-2)}
.cat--todo{border-color:var(--wine-line);background:linear-gradient(0deg,var(--wine-tint),var(--wine-tint)),var(--surface)}
.cat--todo .cat__name{color:var(--wine)}
.cat__count{display:inline-flex;align-items:baseline;gap:5px;color:var(--wine);font-weight:600}
.cat__count b{font-family:var(--mono);font-size:22px;line-height:1;font-weight:600}

/* 使用量バー（小さく） */
.usage{display:grid;gap:7px}
.usage__bar{height:6px;background:var(--line-2);position:relative;overflow:hidden}
.usage__bar span{position:absolute;inset:0 auto 0 0;background:var(--ink-2)}

/* ============================================================
   サムネイル（4:3 固定枠）
   ============================================================ */
.thumb{aspect-ratio:4/3;background-color:var(--line-2);background-size:cover;
  background-position:center;position:relative;overflow:hidden}
.thumb__img{width:100%;height:100%;object-fit:cover;display:block}
.thumb--1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23d9d2c7'/%3E%3Ccircle cx='138' cy='196' r='104' fill='%23c3b7a6'/%3E%3Crect x='232' y='44' width='142' height='142' fill='%23b3a696'/%3E%3C/svg%3E")}
.thumb--2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23cfd3cd'/%3E%3Cpath d='M0 210 L120 118 L232 214 L318 150 L400 226 L400 300 L0 300Z' fill='%23a9b0a7'/%3E%3Ccircle cx='306' cy='72' r='38' fill='%23e2e5e0'/%3E%3C/svg%3E")}
.thumb--3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23dcd2cf'/%3E%3Crect x='40' y='60' width='150' height='190' fill='%23bfaead'/%3E%3Crect x='214' y='108' width='146' height='142' fill='%23cdbfbb'/%3E%3C/svg%3E")}
.thumb--4{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23d3d5da'/%3E%3Ccircle cx='200' cy='150' r='86' fill='%23b0b4bd'/%3E%3Crect y='236' width='400' height='64' fill='%23c2c5cb'/%3E%3C/svg%3E")}
.thumb--5{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23ded6c9'/%3E%3Cpath d='M0 0 H400 V132 Q200 200 0 132Z' fill='%23c9bda9'/%3E%3Ccircle cx='92' cy='226' r='52' fill='%23bcae98'/%3E%3C/svg%3E")}
.thumb--6{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23d6d2d5'/%3E%3Crect x='26' y='30' width='348' height='120' fill='%23c0b9bf'/%3E%3Crect x='26' y='170' width='210' height='100' fill='%23cac3c8'/%3E%3C/svg%3E")}

/* 写真・動画以外は安全なアイコン表示にする */
.thumb--file{background-image:none;background:var(--surface-2);display:grid;place-items:center}
.thumb__ext{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-3);
  border:1px solid var(--line);padding:3px 8px;background:var(--surface)}
.thumb__badge{position:absolute;left:7px;bottom:7px;display:inline-flex;align-items:center;
  gap:4px;background:#1b1817d9;color:#f4efe9;font-family:var(--mono);font-size:10px;
  padding:2px 6px;letter-spacing:.04em}

/* ============================================================
   素材グリッド（均等。Masonry は使わない）
   ============================================================ */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.grid--tight{gap:10px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}

.item{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);transition:border-color .12s}
.item:hover,.item:focus-within{border-color:var(--ink-3)}
.item__body{padding:9px 10px 11px;display:grid;gap:5px}
.item__name{font-size:13px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all}
.item__meta{display:flex;align-items:center;gap:7px;color:var(--ink-3)}
.item__tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:1px}
.tag{font-size:11px;color:var(--ink-2);border:1px solid var(--line-2);padding:0 5px;
  background:var(--surface-2);white-space:nowrap;max-width:100%;overflow:hidden;
  text-overflow:ellipsis}

/* 横並びの「最近追加」 */
.reel{display:grid;grid-auto-flow:column;grid-auto-columns:158px;gap:12px;
  overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}

/* ============================================================
   絞り込みレール（PC）
   ============================================================ */
.with-rail{display:grid;gap:24px;grid-template-columns:206px 1fr;align-items:start}
.rail{display:grid;gap:20px;position:sticky;top:calc(var(--hdr-h) + 20px)}
.rail__group{display:grid;gap:8px}
.rail__title{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.rail__list{display:grid;gap:1px}
.rail__item{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 8px;
  font-size:13px;color:var(--ink-2);background:none;border:0;cursor:pointer;text-align:left;
  width:100%}
.rail__item:hover{background:var(--surface);color:var(--ink)}
.rail__item[aria-pressed="true"]{background:var(--wine-tint);color:var(--wine);font-weight:500;
  box-shadow:inset 2px 0 0 var(--wine)}
.rail__item .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.rail__item[aria-pressed="true"] .n{color:var(--wine)}
.rail__tree{display:grid;gap:1px;font-size:13px}
.rail__tree a{display:block;padding:5px 8px;color:var(--ink-2)}
.rail__tree a:hover{background:var(--surface);color:var(--ink)}
.rail__tree .depth-1{padding-left:20px}

/* ============================================================
   一覧のツールバー
   ============================================================ */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:16px}
.count{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.segment{display:flex;border:1px solid var(--line);background:var(--surface)}
.segment button{min-height:32px;padding:0 11px;font-size:12.5px;background:none;border:0;
  cursor:pointer;color:var(--ink-2)}
.segment button+button{border-left:1px solid var(--line)}
.segment button[aria-pressed="true"]{background:var(--wine-tint);color:var(--wine);font-weight:500}

.active-filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.active-filters .lead{font-size:12px;color:var(--ink-3)}

/* リスト表示 */
.rows{display:grid;background:var(--surface);border:1px solid var(--line)}
.row{display:grid;grid-template-columns:56px 1fr 96px 120px 116px auto;gap:12px;
  align-items:center;padding:9px 14px;border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:0}
.row:hover{background:var(--surface-2)}
.row__thumb{width:56px;aspect-ratio:4/3}
.row__name{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
   詳細
   ============================================================ */
.detail{display:grid;gap:24px;grid-template-columns:minmax(0,1fr) 336px;align-items:start}
.preview{background:var(--surface);border:1px solid var(--line);padding:14px;display:grid;gap:12px}
.preview__stage{background:var(--surface-2);display:grid;place-items:center;min-height:340px;
  padding:14px;position:relative}
.preview__stage img{max-height:min(62vh,540px);width:auto;box-shadow:var(--shadow)}
.preview__media{width:100%;max-width:760px;aspect-ratio:16/9;background-size:cover;
  background-position:center;position:relative}
.preview__scrub{display:flex;align-items:center;gap:10px}
.scrub{flex:1;height:4px;background:var(--line);position:relative;cursor:pointer}
.scrub span{position:absolute;inset:0 auto 0 0;background:var(--wine)}
.scrub::after{content:"";position:absolute;top:50%;left:34%;width:11px;height:11px;
  background:var(--wine);transform:translate(-50%,-50%)}
.playbtn{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer}
.filecard{display:grid;gap:14px;justify-items:center;padding:52px 20px;text-align:center}
.filecard__ext{font-family:var(--mono);font-size:15px;letter-spacing:.1em;color:var(--ink-2);
  border:1px solid var(--line);padding:16px 22px;background:var(--surface)}

.meta{background:var(--surface);border:1px solid var(--line);position:sticky;
  top:calc(var(--hdr-h) + 20px)}
.meta__head{padding:15px 16px;border-bottom:1px solid var(--line-2);display:grid;gap:6px}
.meta__name{font-size:15px;font-weight:600;line-height:1.5;word-break:break-all}
.meta__facts{display:flex;gap:10px;flex-wrap:wrap;color:var(--ink-3)}
.meta__body{padding:16px;display:grid;gap:15px}
.meta__hash{display:flex;align-items:center;gap:6px;color:var(--ink-3)}
.meta__hash button{border:0;background:none;cursor:pointer;color:var(--ink-3);
  text-decoration:underline;font-size:11px;padding:0}

/* 自動保存の状態表示：黙って保存・失敗しない */
.save{display:flex;align-items:center;gap:6px;font-size:11.5px;min-height:18px}
.save__dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3);flex:none}
.save[data-state="idle"]{visibility:hidden}
.save[data-state="saving"]{color:var(--ink-2)}
.save[data-state="saving"] .save__dot{background:var(--ink-2)}
.save[data-state="saved"]{color:var(--ok)}
.save[data-state="saved"] .save__dot{background:var(--ok)}
.save[data-state="error"]{color:var(--err)}
.save[data-state="error"] .save__dot{background:var(--err)}
.save__retry{border:1px solid var(--err);background:var(--err-tint);color:var(--err);
  font-size:11px;padding:1px 7px;cursor:pointer;min-height:24px}

.pager{display:flex;align-items:center;gap:10px}
.pager .pos{font-family:var(--mono);font-size:12px;color:var(--ink-3)}

/* ============================================================
   アップロード
   ============================================================ */
.drop{border:1.5px dashed var(--line);background:var(--surface);padding:44px 24px;
  display:grid;gap:12px;justify-items:center;text-align:center;transition:border-color .12s,background .12s}
.drop:hover,.drop.is-over{border-color:var(--wine);background:var(--wine-tint)}
.drop__title{font-size:16px;font-weight:600}
.drop__sub{font-size:13px;color:var(--ink-2)}

.queue{display:grid}
.qitem{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
  padding:11px 14px;border-bottom:1px solid var(--line-2)}
.qitem:last-child{border-bottom:0}
.qitem__thumb{width:44px;aspect-ratio:4/3}
.qitem__main{display:grid;gap:5px;min-width:0}
.qitem__name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qitem__foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bar{height:4px;background:var(--line-2);position:relative;overflow:hidden}
.bar span{position:absolute;inset:0 auto 0 0;background:var(--wine);transition:width .3s linear}
.bar--done span{background:var(--ok)}
.bar--paused span{background:var(--warn)}
.qitem__actions{display:flex;gap:6px}
.state{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px}
.state__dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--ink-3)}
.state--up{color:var(--wine)} .state--up .state__dot{background:var(--wine)}
.state--done{color:var(--ok)} .state--done .state__dot{background:var(--ok)}
.state--paused{color:var(--warn)} .state--paused .state__dot{background:var(--warn)}
.state--wait{color:var(--ink-3)}


/* ============================================================
   検索
   ============================================================ */
.search-hero{display:grid;gap:12px;max-width:720px}
.search-input{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);height:48px;padding:0 14px}
.search-input:focus-within{border-color:var(--wine)}
.search-input input{flex:1;border:0;background:none;outline:none;font-size:16px;min-width:0}
.matched{font-size:11.5px;color:var(--ink-3);display:flex;gap:5px;align-items:baseline}
.mark{background:var(--wine-tint);color:var(--wine);padding:0 2px;font-weight:500}
.disclosure{border:1px solid var(--line);background:var(--surface)}
.disclosure>summary{cursor:pointer;padding:11px 14px;font-size:13px;color:var(--ink-2);
  list-style:none;display:flex;align-items:center;gap:8px;min-height:var(--tap)}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary::before{content:"＋";font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.disclosure[open]>summary::before{content:"−"}
.disclosure__body{padding:0 14px 16px;display:grid;gap:14px;border-top:1px solid var(--line-2);
  padding-top:14px}

.empty{display:grid;gap:14px;justify-items:center;text-align:center;padding:56px 20px;
  background:var(--surface);border:1px solid var(--line)}

/* ============================================================
   ゴミ箱
   ============================================================ */
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;font-size:13px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.notice--warn{border-color:#8a611833;background:var(--warn-tint);color:var(--warn)}
.notice__ico{flex:none;font-family:var(--mono);font-size:12px;line-height:1.6}
.left-days{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.left-days--over{color:var(--warn);display:inline-flex;align-items:center;gap:4px}

/* モーダル */
.modal{border:1px solid var(--line);background:var(--surface);padding:0;max-width:min(92vw,440px);
  box-shadow:var(--shadow-lg)}
.modal::backdrop{background:var(--scrim)}
.modal__head{padding:18px 20px 0;display:grid;gap:8px}
.modal__head h2{font-size:16px;font-weight:600}
.modal__body{padding:14px 20px 0;display:grid;gap:12px;font-size:13.5px;color:var(--ink-2)}
.modal__foot{padding:18px 20px 20px;display:flex;gap:8px;justify-content:flex-end}
.confirm-name{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);
  border:1px solid var(--line-2);padding:7px 10px;word-break:break-all;color:var(--ink)}

/* ============================================================
   ログイン
   ============================================================ */
.login{min-height:100vh;display:grid;place-items:center;padding:32px 20px;background:var(--bg)}
.login__card{width:100%;max-width:376px;background:var(--surface);border:1px solid var(--line);
  padding:44px 38px 36px;display:grid;gap:26px}
.login__brand{display:grid;gap:7px;text-align:center}
.login__brand h1{font-size:19px;font-weight:600;letter-spacing:.005em}
.login__brand p{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.login__form{display:grid;gap:16px}
.login__err{display:flex;gap:9px;align-items:flex-start;border:1px solid #9c352733;
  background:var(--err-tint);color:var(--err);padding:10px 12px;font-size:12.5px}
.login__foot{text-align:center;font-size:11.5px;color:var(--ink-3);line-height:1.7}

/* ============================================================
   モバイル
   ============================================================ */
.m-only{display:none}
.menu__mobile{display:none}
.sheet{position:fixed;inset:auto 0 0 0;z-index:60;background:var(--surface);
  border-top:1px solid var(--line);max-height:82vh;overflow:auto;
  box-shadow:0 -8px 40px var(--scrim);padding:0 0 24px}
.sheet[hidden]{display:none}
.sheet__head{position:sticky;top:0;background:var(--surface);display:flex;align-items:center;
  gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.sheet__head h2{font-size:14px;font-weight:600}
.sheet__body{padding:16px;display:grid;gap:20px}
.sheet__foot{padding:0 16px;display:flex;gap:8px}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:55}
.scrim[hidden]{display:none}

@media (max-width:1080px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .detail{grid-template-columns:1fr}
  .meta{position:static}
}

@media (max-width:860px){
  .with-rail{grid-template-columns:1fr}
  .rail--desktop{display:none}
  .m-only{display:block}
  .m-only.iconbtn{display:grid}
  .m-only.btn{display:inline-flex}
  .m-only.rowf{display:flex}
  .menu__mobile{display:block}
  .nav{display:none}
  .hdr__search{display:none}
  .row{grid-template-columns:48px 1fr auto;row-gap:2px}
  .row__hide{display:none}
}

@media (max-width:640px){
  .shell{padding:18px var(--gutter) 110px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .grid--tight{grid-template-columns:repeat(2,1fr)}
  .page-head h1{font-size:18px}
  .login__card{padding:34px 24px 28px}
  .preview__stage{min-height:200px}
  .item__body{padding:8px 9px 10px}
}

/* 320px 級の端末：ヘッダーが横に溢れないよう、名前を縮めてボタンを詰める */
@media (max-width:400px){
  .hdr__in{gap:8px}
  .hdr__right{gap:2px}
  .brand__name{font-size:13px}
  .btn--primary.btn--tap{padding:0 10px;font-size:13px}
}

/* 390px では 2 列を保つ。1 列にするのは 320px 級の端末だけ。 */
@media (max-width:359px){
  .cats{grid-template-columns:1fr}
  .grid,.grid--tight{grid-template-columns:1fr}
}

/* プロトタイプであることの明示 */
.proto-flag{position:fixed;left:0;bottom:0;z-index:70;background:var(--ink);color:var(--bg);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;padding:3px 9px;
  text-transform:uppercase}
@media print{.proto-flag,.dock,.thinbar{display:none}}

/* ============================================================
   アップロードキュー（UI_DECISIONS 2）
   右下固定はしない。
   一覧・ダッシュボード: 画面下部の折りたたみバー（sticky）
   詳細:                 ヘッダー直下の細い進捗バー
   ============================================================ */
.dock{position:sticky;bottom:0;z-index:35;background:var(--surface);
  border-top:1px solid var(--line);box-shadow:0 -3px 16px var(--scrim)}
.dock[hidden]{display:none}
.dock__in{max-width:1360px;margin:0 auto;padding:0 var(--gutter)}
.dock__head{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13px}
.dock__head b{font-weight:600}
.dock__sum{white-space:nowrap;font-weight:600}
.dock__bar{flex:1;max-width:220px;height:4px;background:var(--line-2);position:relative;overflow:hidden}
.dock__bar span{position:absolute;inset:0 auto 0 0;background:var(--wine);transition:width .3s linear}
.dock__body{border-top:1px solid var(--line-2);max-height:42vh;overflow:auto;padding:2px 0 8px}
.dock__body[hidden]{display:none}
.dock .qitem{grid-template-columns:1fr auto;padding:10px 0;border-bottom:1px solid var(--line-2)}
.dock .qitem:last-child{border-bottom:0}

/* 詳細画面：ヘッダー直下の細い進捗バー */
.thinbar{position:sticky;top:var(--hdr-h);z-index:34;background:var(--surface);
  border-bottom:1px solid var(--line)}
.thinbar[hidden]{display:none}
.thinbar__in{max-width:1360px;margin:0 auto;padding:8px var(--gutter);
  display:flex;align-items:center;gap:12px}
.thinbar .bar{flex:1}
.thinbar__x{border:0;background:none;cursor:pointer;color:var(--ink-3);
  min-width:32px;min-height:32px;flex:none}

/* ============================================================
   一括操作（UI_DECISIONS 7）
   ============================================================ */
.item{position:relative}
.pick{position:absolute;left:8px;top:8px;z-index:2;width:22px;height:22px;margin:0;
  accent-color:var(--wine);cursor:pointer;opacity:0;transition:opacity .12s}
.item:hover .pick,.item:focus-within .pick,.pick:checked,
.is-selecting .pick{opacity:1}
.item:has(.pick:checked){border-color:var(--wine);box-shadow:inset 0 0 0 1px var(--wine)}
.row .pick{position:static;opacity:1;width:18px;height:18px}

.bulkbar{position:sticky;top:calc(var(--hdr-h) + 1px);z-index:33;background:var(--surface);
  border:1px solid var(--wine-line);border-left:3px solid var(--wine);
  padding:9px 12px;margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  box-shadow:var(--shadow)}
.bulkbar[hidden]{display:none}
.bulkbar__n{font-family:var(--mono);font-size:13px;color:var(--wine);font-weight:600;
  white-space:nowrap}
.bulkpanel{border:1px solid var(--line);background:var(--surface-2);padding:12px;
  margin-bottom:14px;display:grid;gap:10px}
.bulkpanel[hidden]{display:none}
.bulkpanel__row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.bulkpanel__row .field{flex:1 1 220px}

/* ============================================================
   タグ候補（UI_DECISIONS 5）
   ============================================================ */
.tagfield{position:relative}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:20;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);max-height:210px;overflow:auto;padding:4px}
.suggest[hidden]{display:none}
.suggest button{display:flex;width:100%;align-items:center;gap:8px;text-align:left;
  background:none;border:0;cursor:pointer;padding:7px 9px;font-size:13px;color:var(--ink);
  min-height:36px}
.suggest button:hover,.suggest button[aria-selected="true"]{background:var(--wine-tint);color:var(--wine)}
.suggest .kind{font-family:var(--mono);font-size:10px;color:var(--ink-3);
  border:1px solid var(--line);padding:0 4px}
.suggest .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.suggest .new{color:var(--wine)}

/* ============================================================
   テーマ切り替え（UI_DECISIONS 1）
   ============================================================ */
.themepick{padding:7px 11px;display:grid;gap:2px}
.themepick__t{font-size:11px;color:var(--ink-3);margin-bottom:3px}
.themepick label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;
  min-height:32px;padding:0 2px}
.themepick input{accent-color:var(--wine);margin:0}

/* 共通の左右余白をトークン化（dock / thinbar の負マージン用） */
:root{--gutter:20px}
@media (max-width:640px){:root{--gutter:14px}}