/* ===== ファイル受け渡し箱：上品おしゃれ（無彩色ベースの仮デザイン） =====
   KS事業管理のカラーが決まったら、下の :root の変数を差し替えるだけで着せ替えできる。 */

:root{
  --paper:#f7f5f1;      /* 背景：温かみのある生成り */
  --card:#ffffff;       /* カード面 */
  --ink:#22201c;        /* 文字：黒に寄せた濃墨 */
  --muted:#7c766c;      /* 補助文字 */
  --line:#e5e0d8;       /* 罫線：淡い */
  --accent:#9c8558;     /* 差し色：くすんだゴールド（仮） */
  --accent-ink:#6f5d38; /* 差し色の濃い版（文字用） */
  --ok-bg:#eef3ec; --ok-ink:#41613a;
  --err-bg:#f6ece9; --err-ink:#8a4a3a;
  --radius:12px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  line-height:1.75; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:640px; margin:0 auto; padding:48px 20px 72px}
.wrap.narrow{max-width:460px}

/* ---- ヘッダー ---- */
.brand{display:flex; align-items:center; gap:16px; margin-bottom:32px}
.brand.center{flex-direction:column; text-align:center; gap:10px}
.brand .mark{
  width:44px; height:44px; flex:none; border-radius:50%;
  border:1px solid var(--accent); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.brand h1{margin:0; font-size:21px; font-weight:600; letter-spacing:.06em}
.brand .sub{margin:2px 0 0; color:var(--muted); font-size:12.5px; letter-spacing:.08em}
.brand .ghost{margin-left:auto; color:var(--muted); font-size:12.5px; text-decoration:none; border-bottom:1px solid var(--line)}
.brand .ghost:hover{color:var(--ink)}

/* ---- カード ---- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px; margin-bottom:20px;
}
.card h2{margin:0 0 18px; font-size:15px; font-weight:600; letter-spacing:.04em}

/* ---- 入力・ボタン ---- */
.field{
  width:100%; padding:12px 14px; margin-bottom:14px;
  border:1px solid var(--line); border-radius:8px; background:#fcfbf9;
  color:var(--ink); font-size:15px; font-family:inherit;
}
.field:focus{outline:none; border-color:var(--accent); background:#fff}
.field.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:14px; letter-spacing:.03em}

.primary{
  width:100%; padding:13px 18px; border:none; border-radius:8px; cursor:pointer;
  background:var(--ink); color:#fff; font-size:15px; font-family:inherit; letter-spacing:.06em;
  transition:opacity .15s;
}
.primary:hover{opacity:.86}
.primary.big{padding:16px; font-size:16px; letter-spacing:.1em}

.danger{
  padding:7px 14px; border:1px solid var(--line); border-radius:6px; cursor:pointer;
  background:transparent; color:var(--muted); font-size:12.5px; font-family:inherit;
}
.danger:hover{border-color:var(--err-ink); color:var(--err-ink)}

.linkbtn{
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:13px; font-family:inherit; text-decoration:underline; padding:8px; margin-top:4px;
}
.linkbtn:hover{color:var(--ink)}
.removeform{text-align:center; margin-top:6px}

/* ---- メッセージ ---- */
.flash{padding:12px 16px; border-radius:8px; font-size:13.5px; margin-bottom:20px}
.flash-ok{background:var(--ok-bg); color:var(--ok-ink)}
.flash-err{background:var(--err-bg); color:var(--err-ink)}
.hint{color:var(--muted); font-size:12.5px; margin:10px 0 0}
.empty{color:var(--muted); font-size:14px; text-align:center; padding:8px 0}

/* ---- 結果（URL＋パス） ---- */
.result .rlabel{display:block; color:var(--muted); font-size:12px; letter-spacing:.05em; margin:16px 0 6px}
.result .rlabel:first-of-type{margin-top:8px}
.copyrow{display:flex; gap:8px}
.copyrow .field{margin-bottom:0}
.copy{
  flex:none; padding:0 16px; border:1px solid var(--accent); border-radius:8px; cursor:pointer;
  background:transparent; color:var(--accent-ink); font-size:13px; font-family:inherit; white-space:nowrap;
}
.copy:hover{background:var(--accent); color:#fff}
.copy.done{background:var(--accent); color:#fff}
.result .hint{margin-top:16px}
.result .hint strong{color:var(--ink); font-weight:600}

/* ---- 一覧 ---- */
.list{list-style:none; margin:0; padding:0}
.row{display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--line)}
.row:first-child{border-top:none}
.rowmain{flex:1; min-width:0}
.fname{display:block; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rmeta{display:block; color:var(--muted); font-size:12px; margin-top:2px}
.row.gone .fname{color:var(--muted); text-decoration:line-through}

/* ---- DL画面 ---- */
.fileline{text-align:center; margin:0 0 22px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.fileline .fname{font-size:16px}

@media(max-width:480px){
  .wrap{padding:32px 16px 56px}
  .card{padding:22px 18px}
}