/* デルミー（DelMe）サービスUI 共通スタイル
 *
 * 正本はこの1枚だけ。deploy.py が3つのサブドメインへ配る。
 * 各画面でCSSを書き足さない。新しいテイストを作らない。
 * 決まりごとは c:\workspaces\delme\DESIGN.md を見る。
 */

/* ── 書体 ──────────────────────────────────────────────
 * 欧文を先に置く。ブラウザは文字ごとに書体を選ぶので、
 * 欧文だけ Quicksand、和文は Kosugi Maru に落ちる。
 * Quicksand は Medium(500) を 400 として登録する（400は細すぎて和文と合わない）。
 */
@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Quicksand:wght@500&display=swap");

:root {
  --pink: #fe3370;
  --orange: #fd9d43;
  --grad: linear-gradient(115deg, #fe3370 0%, #fd9d43 100%);

  --ink: #444444;
  --ink-soft: #8c8785;
  --ink-faint: #c6c0be;

  --paper: #ffffff;
  --paper-warm: #fffaf8;
  --rule: #f0eae8;

  --font: "Quicksand", "Kosugi Maru", "Hiragino Maru Gothic ProN",
          "BIZ UDPGothic", "Yu Gothic", system-ui, sans-serif;

  /* 間合いは4段だけ。中間の値を作らない */
  --s1: 8px;
  --s2: 16px;
  --s3: 28px;
  --s4: 44px;

  --radius: 18px;
}

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

html {
  background: var(--paper-warm);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;          /* 全体で400。700は合成太字になり線が汚れる */
  color: var(--ink);
  line-height: 2;
  letter-spacing: .035em;
  font-size: 15px;
}

/* 太さで階層を作らない。大きさ・色・字間・行間だけで作る */
h1, h2, h3, strong, b { font-weight: 400; }

a { color: var(--pink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 版面 ─────────────────────────────────────────── */
.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--s4) var(--s3);
}

.center-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s3);
}

/* ── ロゴ ─────────────────────────────────────────── */
/* ブランド名の表示は必ず支給ロゴの画像を使う。フォントで組み直さない */
.logo { display: block; height: 44px; width: auto; }
.logo-lg { display: block; height: 76px; width: auto; }   /* ログイン画面の主役 */
.logo-mark { display: block; height: 34px; width: auto; }

/* ── 面 ───────────────────────────────────────────── */
/* フラット。影・枠線の装飾を使わない。角丸は大きめ・均一に */
.panel {
  width: 100%;
  max-width: 420px;
  background: var(--paper);
  border-radius: var(--radius);
  padding: var(--s4) var(--s3);
}

.panel-wide { max-width: 720px; }

/* ── 文字の型 ─────────────────────────────────────── */
.eyebrow {
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--ink-faint);
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 var(--s2);
}

.lead {
  font-size: 21px;
  line-height: 1.6;
  letter-spacing: .015em;
  margin: 0 0 var(--s2);
  word-break: keep-all;
  line-break: strict;
}

.body { font-size: 14px; color: var(--ink-soft); margin: 0 0 var(--s2); }
.note { font-size: 12px; color: var(--ink-soft); line-height: 1.8; }
.faint { color: var(--ink-faint); }

/* グラデーションは主役1つに集中させる。1画面に何箇所も置かない */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── フォーム ─────────────────────────────────────── */
.field { margin: 0 0 var(--s2); }

.field label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: .06em;
  margin: 0 0 6px;
}

.field input {
  width: 100%;
  font-family: var(--font);
  font-weight: 400;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 13px 14px;
  outline: none;
  transition: border-color .15s;
}

.field input:focus { border-color: var(--pink); }
.field input::placeholder { color: var(--ink-faint); }

/* ── ボタン ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  width: 100%;
  font-family: var(--font);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .08em;
  color: #fff;
  background: var(--grad);
  border: none;
  border-radius: 999px;
  padding: 14px 24px;
  cursor: pointer;
  transition: opacity .15s;
}

.btn:hover { opacity: .88; }

.btn-quiet {
  background: none;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}

/* ── 通知 ─────────────────────────────────────────── */
.notice {
  background: var(--paper-warm);
  border-radius: 12px;
  padding: var(--s2);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.8;
}

.notice-strong { color: var(--pink); }

/* ── 表 ───────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--rule); }
th { font-size: 12px; color: var(--ink-soft); letter-spacing: .06em; font-weight: 400; }
td { color: var(--ink-soft); }
td:first-child { color: var(--ink); }

/* ── 区切り ───────────────────────────────────────── */
.rule { height: 1px; background: var(--rule); border: none; margin: var(--s3) 0; }
.stack > * + * { margin-top: var(--s2); }
.stack-loose > * + * { margin-top: var(--s3); }

/* ── アイコン ─────────────────────────────────────── */
/* 絵文字を使わない。線画のSVGを currentColor で描く */
.icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ── 透かし ───────────────────────────────────────── */
.center-screen { position: relative; overflow: hidden; }


/* ══════════════════════════════════════════════════════
 * 管理画面のレイアウト
 * 左にサイドバー、上にヘッダー、中身は白いパネル。
 * 骨格は全ページ共通。ページごとに見出しの位置を動かさない。
 * ══════════════════════════════════════════════════════ */

.app {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── サイドバー ───────────────────────────────────── */
.side {
  background: var(--paper);
  padding: var(--s3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

.side-logo { padding: 0 var(--s3) var(--s1); }
.side-logo img { display: block; height: 34px; width: auto; }

.nav { display: flex; flex-direction: column; }

.nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--s3);
  color: var(--ink-soft);
  font-size: 14px;
  letter-spacing: .04em;
  line-height: 1.5;
  /* 選択中の左の帯ぶんを最初から空けておく。押すたびに文字が動かないように */
  border-left: 3px solid transparent;
}

.nav a:hover { color: var(--ink); text-decoration: none; background: var(--paper-warm); }

.nav a.on {
  color: var(--pink);
  border-left-color: var(--pink);
  background: var(--paper-warm);
}

.nav .icon { width: 19px; height: 19px; }

.side-foot { margin-top: auto; }

/* ── 本文側 ───────────────────────────────────────── */
.main { background: var(--paper-warm); padding: var(--s3) var(--s4) var(--s4); min-width: 0; }

.topbar {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin: 0 0 var(--s3);
}

.topbar h1 { font-size: 22px; line-height: 1.4; margin: 0; letter-spacing: .015em; }
.crumb { margin-left: auto; font-size: 11px; color: var(--ink-faint); letter-spacing: .1em; }

/* ── 数字を並べる ─────────────────────────────────── */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--s2);
  margin: 0 0 var(--s3);
}

.tile { background: var(--paper); border-radius: var(--radius); padding: var(--s3); }
.tile .k { font-size: 11px; letter-spacing: .18em; color: var(--ink-faint); }
.tile .v { font-size: 34px; line-height: 1.3; letter-spacing: .02em; }
.tile .u { font-size: 12px; color: var(--ink-faint); margin-left: 4px; }

/* ── 表のまわり ───────────────────────────────────── */
.card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: var(--s3);
  margin: 0 0 var(--s3);
}

.card-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s2);
}

.card-head h2 { font-size: 15px; margin: 0; letter-spacing: .04em; }
.card-head .right { margin-left: auto; font-size: 12px; color: var(--ink-faint); }

/* 幅の広い表は、この中だけ横スクロールさせる。ページ本体は横に流さない */
.scroll-x { overflow-x: auto; }
.scroll-x table { min-width: 560px; }

/* ── 状態の札 ─────────────────────────────────────── */
/* 意味色（赤・青・緑）は使わない。強調はグラデーション、抑制はグレーで足りる */
.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .1em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--paper-warm);
  color: var(--ink-soft);
  line-height: 1.7;
}

.tag-on { background: var(--grad); color: #fff; }

/* ── 空のとき ─────────────────────────────────────── */
.empty {
  text-align: center;
  padding: var(--s4) var(--s2);
  color: var(--ink-faint);
  font-size: 13px;
}

/* ── 狭い画面 ─────────────────────────────────────── */
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .side {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2);
    overflow-x: auto;
  }
  .side-logo { padding: 0 var(--s2) 0 0; }
  .nav { flex-direction: row; }
  .nav a { padding: 8px 12px; border-left: none; border-bottom: 3px solid transparent; }
  .nav a.on { border-left-color: transparent; border-bottom-color: var(--pink); }
  .nav a span { display: none; }   /* 入りきらないので文字を落としてアイコンだけにする */
  .side-foot { margin-top: 0; margin-left: auto; }
  .main { padding: var(--s3) var(--s2); }
}