/* ============================================
   Kananポータル テーマ
   明るく軽やか。白地・広い余白・角丸・大きい数字。
   拠点ごとに色を振って、現場でスマホを見た瞬間に判別できることを優先する。

   --brand 系  = 構造（見出し・帯・ナビ）
   --action 系 = 行動（未対応・期限・ボタン）
   --c-*       = 拠点カラー（①橙 ②青 ③緑 ④紫）
   ============================================ */

:root {
  --bg: #f2f5fa;
  --card: #ffffff;
  --surface: #f6f8fc;
  --surface2: #eef2f8;
  --text: #1b2334;
  --text-sub: #6d7a93;
  --text-mute: #9aa5ba;
  --border: #e5eaf3;
  --border-dot: #cfd8e6;

  --brand: #4a63e7;
  --brand-deep: #2f45bf;
  --brand-light: #8f9ff2;
  --brand-soft: #edf0fe;

  --action: #f2603c;
  --action-deep: #cf4526;
  --action-light: #ffa88f;
  --action-soft: #fff0ec;

  --success: #1f9d6b;
  --success-soft: #e2f7ee;
  --warn: #e08a1e;
  --warn-soft: #fff5e2;
  --danger: #d94040;
  --danger-soft: #fdeaea;
  --info: #5b7391;
  --info-soft: #edf2f8;

  /* 拠点カラー */
  --c-orange: #ef7434;  --c-orange-soft: #fff0e6;  --c-orange-deep: #c25412;
  --c-blue:   #3c86d8;  --c-blue-soft:   #e8f2fd;  --c-blue-deep:   #1f5fa8;
  --c-green:  #22a271;  --c-green-soft:  --c-green-soft; --c-green-deep: #147a53;
  --c-purple: #8a5fd0;  --c-purple-soft: #f2ecfd;  --c-purple-deep: #6438b0;

  --r: 14px;
  --r-s: 9px;
  --shadow: 0 1px 2px rgba(27, 35, 52, .04), 0 6px 20px rgba(27, 35, 52, .06);
  --shadow-lift: 0 2px 6px rgba(27, 35, 52, .06), 0 14px 34px rgba(27, 35, 52, .11);

  --serif: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", serif;
}

/* 変数の自己参照を避ける（--c-green-soft の実値） */
:root { --c-green-soft: #e2f6ee; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 0 18px 80px; }

/* ===== カード ===== */
.card {
  background: var(--card);
  border-radius: var(--r);
  padding: 22px 22px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card h2 {
  font-size: 15px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--text); margin-bottom: 16px;
  display: flex; align-items: center; gap: 9px;
}
.card h2 .icon {
  font-size: 15px; width: 28px; height: 28px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--brand-soft); color: var(--brand);
}
.card h2 .count {
  margin-left: auto; font-size: 11px; font-weight: 600;
  color: var(--text-mute); letter-spacing: 0.02em;
}

/* ===== ヘッダー ===== */
.masthead { padding: 30px 0 8px; }
.masthead .eyebrow {
  font-size: 10px; letter-spacing: 0.24em; font-weight: 800;
  color: var(--brand); margin-bottom: 7px;
}
.masthead h1 {
  font-size: 30px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.35;
}
.masthead .sub {
  font-size: 12px; color: var(--text-sub); margin-top: 10px;
  display: flex; flex-wrap: wrap; gap: 6px 10px;
}
.masthead .sub span {
  background: var(--card); padding: 4px 12px; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(27,35,52,.05);
}

/* ===== バッジ ===== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.badge.done   { background: var(--success-soft); color: var(--success); }
.badge.open   { background: var(--action-soft);  color: var(--action-deep); }
.badge.draft  { background: var(--info-soft);    color: var(--info); }
.badge.mine   { background: var(--brand-soft);   color: var(--brand); }
.badge.theirs { background: var(--warn-soft);    color: var(--warn); }

/* ===== ボタン ===== */
.btn {
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  padding: 9px 17px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
}
.btn:hover { background: var(--surface); border-color: var(--border-dot); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--action); border-color: var(--action); color: #fff;
  box-shadow: 0 3px 10px rgba(242, 96, 60, .28);
}
.btn.primary:hover { background: var(--action-deep); border-color: var(--action-deep); }
.btn.brand {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 3px 10px rgba(74, 99, 231, .26);
}
.btn.brand:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-sub); }
.btn.ghost:hover { color: var(--brand); background: var(--brand-soft); }
.btn.big { font-size: 15px; padding: 14px 26px; border-radius: 12px; }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* ===== 入力 ===== */
.input, .textarea, select.input {
  font-family: inherit; font-size: 13.5px; width: 100%;
  padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--text); line-height: 1.7;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .textarea:focus {
  outline: none; border-color: var(--brand-light);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.textarea { resize: vertical; min-height: 88px; }

/* ===== 汎用 ===== */
.loading { text-align: center; padding: 70px 20px; color: var(--text-mute); }
.empty { color: var(--text-mute); font-size: 13px; padding: 16px 2px; }
.error-box {
  background: var(--danger-soft); color: var(--danger);
  padding: 18px; border-radius: var(--r); border-left: 4px solid var(--danger); margin: 20px 0;
}
.row { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }
.pre { white-space: pre-wrap; word-break: break-word; }
.mono { font-family: "Consolas", "Courier New", monospace; }

/* ===== 進捗バー ===== */
.progress-bar { width: 100%; height: 7px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
.progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--action-light), var(--action));
  border-radius: 4px; transition: width .45s cubic-bezier(.2,.8,.2,1);
}

/* ===== 日菜子の一言 ===== */
.hinako-note {
  margin: 30px 0 10px; padding: 0 4px 0 16px;
  border-left: 3px solid var(--action-light);
  color: var(--text-sub); font-size: 13px; line-height: 1.95;
}
.hinako-note .sig {
  display: block; margin-top: 6px; font-size: 11px;
  color: var(--text-mute); letter-spacing: 0.1em;
}
.hinako-note:empty { display: none; }

/* ===== 改行つきテキスト ===== */
.rich .ln { display: block; }
.rich .li { display: block; padding-left: 16px; text-indent: -16px; }
.rich .li i { font-style: normal; color: var(--action-light); }
.rich .br { display: block; height: 8px; }

mark { background: #ffeaa0; color: inherit; border-radius: 3px; padding: 0 2px; }

@media (max-width: 600px) {
  .masthead h1 { font-size: 24px; }
  .card { padding: 18px 16px 16px; }
}