/* ============================================================
   KAIKOSHA ポータル スタイル
   デザイン基準: アプリ開発フォルダ/デザイン_販売案件.md に準拠
   配色は「案件管理アプリ カラーパレット」を採用
   （3システムを束ねる立場のため、落ち着いた紺系を基調とする）
   Coolors: https://coolors.co/193a5c-637990-2c5282-f0f5ff-dbeafe-e2f4e2-ffebee-ede7f6-1a5c1a-314f6d
   ※このファイルにない色・フォントを追加しないこと
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

:root{
  /* フォント（デザイン基準より） */
  --font-family: 'Noto Sans JP', sans-serif;
  --font-h1: 24px;
  --font-h2: 20px;
  --font-h3: 16px;
  --font-body: 14px;
  --font-small: 12px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* スペーシング（デザイン基準より） */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* カラー（案件管理アプリ パレット） */
  --color-bg: #f0f5ff;
  --color-surface: #dbeafe;
  --color-primary: #193a5c;
  --color-primary-hover: #0f2640;
  --color-secondary: #637990;
  --color-accent: #2c5282;
  --color-text: #314f6d;
  --color-text-muted: #637990;
  --color-border: #c3d1e8;

  /* ステータス色（デザイン基準より） */
  --color-status-active-bg: #e2f4e2;
  --color-status-active-text: #1a5c1a;
  --color-status-alert-bg: #ffebee;
  --color-status-alert-text: #c53030;
  --color-status-other-bg: #ede7f6;
  --color-status-other-text: #553c9a;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family: var(--font-family);
  font-size: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height:1.7;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1100px;margin:0 auto;padding:var(--space-lg) var(--space-md) var(--space-xl);}

/* ---------- ヘッダー ---------- */
header{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  display:flex; align-items:center; gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
header .brand{display:flex;align-items:center;gap:var(--space-md);}
header .logo{height:34px;width:auto;display:block;}
header .sitename{
  font-size: var(--font-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing:.02em;
  padding-left: var(--space-md);
  border-left:1px solid var(--color-border);
}
header .role{
  margin-left:auto; font-size: var(--font-small);
  color: var(--color-text-muted); text-align:right;
}
header .role b{color: var(--color-primary);}
header .logout{
  font-size: var(--font-small);
  color: var(--color-primary);
  border:1px solid var(--color-primary);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  background:transparent;
}
header .logout:hover{background: var(--color-primary);color:#fff;}

/* ---------- タイル ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-md);}
.tile{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:hidden;
  display:flex;flex-direction:column;
  position:relative;
  transition:.15s;
}
.tile.size-2x1{grid-column:span 2;}
.tile.linkable:hover{border-color: var(--color-primary);box-shadow:0 4px 12px rgba(25,58,92,.12);}
.tile .bar{height:4px;background: var(--color-primary);}
.tile .body{padding: var(--space-md);flex:1;position:relative;}
.tile .head{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-xs);}
.tile .head, .tile .desc, .tile .go{position:relative;z-index:1;}
.tile .title{
  font-size: var(--font-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
.tile .exec-only{
  margin-left:auto;
  font-size:10px;
  padding:2px var(--space-sm);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-bold);
  background: var(--color-status-alert-bg);
  color: var(--color-status-alert-text);
}
.tile .desc{font-size: var(--font-small);color: var(--color-text-muted);margin-bottom:var(--space-sm);}
.tile .go{
  font-size: var(--font-small);
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
  margin-top:auto;
}

/* お知らせ一覧 */
.ann-list{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-xs);}
.ann-item{border-top:1px solid var(--color-border);padding-top:var(--space-sm);}
.ann-item:first-child{border-top:none;padding-top:0;}
.ann-item .meta{font-size:11px;color: var(--color-text-muted);}
.ann-item .title2{font-size:13px;font-weight: var(--font-weight-bold);color: var(--color-text);}
.ann-item .body2{font-size: var(--font-small);color: var(--color-text);margin-top:2px;white-space:pre-wrap;}
.ann-empty{font-size: var(--font-small);color: var(--color-text-muted);}

/* リンク集 */
.linklist2{display:flex;flex-direction:column;gap:var(--space-xs);margin-top:var(--space-xs);}
.linklist2 a{font-size:13px;color: var(--color-accent);}
.linklist2 a:hover{text-decoration:underline;}
.linklist2 .none{font-size: var(--font-small);color: var(--color-text-muted);}

/* お知らせ投稿フォーム */
.post-box{border-top:1px solid var(--color-border);margin-top:var(--space-md);padding-top:var(--space-sm);}
.post-box input, .post-box textarea{
  width:100%;
  border:1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-family);
  font-size: var(--font-small);
  color: var(--color-text);
  background:#fff;
  margin-bottom: var(--space-sm);
}
.post-box input:focus, .post-box textarea:focus{
  outline:2px solid var(--color-primary);border-color:transparent;
}
.post-box button{
  background: var(--color-primary);color:#fff;border:none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-small);
  cursor:pointer;
}
.post-box button:hover{background: var(--color-primary-hover);}

/* ---------- ログイン画面 ---------- */
.login-wrap{max-width:380px;margin:8vh auto;padding:0 var(--space-md);}
.login-card{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
}
.login-card .logo{width:190px;max-width:100%;height:auto;display:block;margin:0 auto var(--space-md);}
.login-card h1{
  font-size: var(--font-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-align:center;
}
.login-card .sub{
  font-size: var(--font-small);color: var(--color-text-muted);
  text-align:center;margin-bottom: var(--space-lg);
}
.login-card label{
  font-size: var(--font-small);color: var(--color-text-muted);
  display:block;margin:var(--space-md) 0 var(--space-xs);
}
.login-card input{
  width:100%;
  border:1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-family);
  font-size: var(--font-body);
  color: var(--color-text);
  background:#fff;
}
.login-card input:focus{outline:2px solid var(--color-primary);border-color:transparent;}
.login-card button{
  width:100%;margin-top: var(--space-lg);
  background: var(--color-primary);color:#fff;border:none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-body);
  font-weight: var(--font-weight-bold);
  cursor:pointer;
}
.login-card button:hover{background: var(--color-primary-hover);}
.err{
  background: var(--color-status-alert-bg);
  color: var(--color-status-alert-text);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
}

/* ---------- 経営管理ページ ---------- */
.flash{
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-small);
  margin-bottom: var(--space-md);
}
.flash.ok{background: var(--color-status-active-bg);color: var(--color-status-active-text);}
.flash.ng{background: var(--color-status-alert-bg);color: var(--color-status-alert-text);}

.panel{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.panel-title{
  font-size: var(--font-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom:1px solid var(--color-border);
}
.panel-note{font-size: var(--font-small);color: var(--color-text);margin-bottom: var(--space-sm);}
.panel-note code{
  background: var(--color-surface);
  padding:2px var(--space-xs);
  border-radius: var(--radius-sm);
  font-size:11px;
}
.muted{color: var(--color-text-muted);}

/* ドラッグ＆ドロップ（情報を送る） */
.dropzone{
  display:flex;align-items:center;justify-content:center;
  min-height:110px;
  padding: var(--space-lg);
  border:2px dashed var(--color-accent);
  border-radius: var(--radius-md);
  background:#fff;
  color: var(--color-accent);
  cursor:pointer;
  text-align:center;
  transition:.15s;
}
.dropzone:hover{background: var(--color-bg);}
.dropzone.over{
  background: var(--color-surface);
  border-color: var(--color-primary);
  border-style:solid;
  color: var(--color-primary);
}
.dropzone.loaded{
  background: var(--color-status-active-bg);
  border-color: var(--color-status-active-text);
  border-style:solid;
  color: var(--color-status-active-text);
  min-height:64px;
}
.dropzone input[type=file]{display:none;}
.dz-label b{font-size: var(--font-h3);}
.dz-label span{font-size: var(--font-small);opacity:.85;}

.dz-list{margin-top: var(--space-sm);display:flex;flex-direction:column;gap: var(--space-xs);}
.dz-item{
  display:flex;align-items:center;gap: var(--space-sm);
  background:#fff;
  border:1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-small);
}
.dz-item .n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: var(--color-text);}
.dz-item .s{color: var(--color-text-muted);font-size:11px;white-space:nowrap;}
.dz-item .s.over{color: var(--color-status-alert-text);font-weight: var(--font-weight-bold);}
.dz-item .x{
  border:1px solid var(--color-border);background:transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  font-size:11px;padding:2px var(--space-sm);cursor:pointer;
  font-family: var(--font-family);white-space:nowrap;
}
.dz-item .x:hover{border-color: var(--color-status-alert-text);color: var(--color-status-alert-text);}

/* 投稿一覧（情報を送る） */
.up-list{display:flex;flex-direction:column;gap: var(--space-md);}
.up-item{
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background:#fff;
}
.up-head{display:flex;flex-wrap:wrap;align-items:center;gap: var(--space-sm);font-size: var(--font-small);}
.up-note{
  margin-top: var(--space-sm);
  font-size: var(--font-small);
  color: var(--color-text);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}
.up-ai{
  margin-top: var(--space-sm);
  border-left:4px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}
.up-ai.none{
  border-left-color: var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--font-small);
}
.up-ai-ttl{
  font-size: var(--font-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}
.up-ai-body{
  font-family: var(--font-family);
  font-size: var(--font-small);
  color: var(--color-text);
  white-space:pre-wrap;
  word-break:break-word;
  margin:0;
  line-height:1.8;
}
.up-foot{margin-top: var(--space-sm);text-align:right;}

/* 経営戦略リサーチへの入口 */
.keiei-links{display:flex;flex-wrap:wrap;align-items:center;gap: var(--space-sm);margin-top: var(--space-md);}
.keiei-main{
  display:block;
  background: var(--color-primary);
  color:#fff;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-right: var(--space-sm);
}
.keiei-main:hover{background: var(--color-primary-hover);}
.keiei-main b{display:block;font-size: var(--font-h3);}
.keiei-main span{display:block;font-size: var(--font-small);opacity:.85;margin-top:2px;}

/* テーブル（デザイン基準に準拠） */
.tbl{width:100%;border-collapse:collapse;font-size: var(--font-body);color: var(--color-text);}
.tbl th{
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
  padding: var(--space-sm) var(--space-md);
  border-bottom:2px solid var(--color-border);
  text-align:left;
  font-size: var(--font-small);
}
.tbl td{
  padding: var(--space-sm) var(--space-md);
  border-bottom:1px solid var(--color-border);
  font-size: var(--font-small);
}
.tbl .actions{white-space:nowrap;text-align:right;}

/* バッジ（デザイン基準に準拠） */
.badge{
  display:inline-block;
  padding:2px var(--space-sm);
  border-radius: var(--radius-sm);
  font-size:11px;
  font-weight: var(--font-weight-bold);
}
.badge-active{background: var(--color-status-active-bg);color: var(--color-status-active-text);}
.badge-alert{background: var(--color-status-alert-bg);color: var(--color-status-alert-text);}
.badge-other{background: var(--color-status-other-bg);color: var(--color-status-other-text);}

/* 小さいボタン */
.btn-sm{
  display:inline-block;
  font-size:11px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border:1px solid var(--color-primary);
  color: var(--color-primary);
  background:transparent;
  cursor:pointer;
  font-family: var(--font-family);
  margin-left: var(--space-xs);
}
.btn-sm:hover{background: var(--color-primary);color:#fff;}
.btn-sm.danger{border-color: var(--color-status-alert-text);color: var(--color-status-alert-text);}
.btn-sm.danger:hover{background: var(--color-status-alert-text);color:#fff;}

/* 入力フォーム */
.form .row{display:flex;align-items:center;gap: var(--space-md);margin-bottom: var(--space-md);}
.form .row label{width:150px;flex:none;font-size: var(--font-small);color: var(--color-text-muted);}
.form .row input, .form .row select{
  flex:1;max-width:340px;
  border:1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-family);
  font-size: var(--font-body);
  color: var(--color-text);
  background:#fff;
}
.form .row input:disabled{background: var(--color-surface);color: var(--color-text-muted);}
.form .row input:focus, .form .row select:focus{outline:2px solid var(--color-primary);border-color:transparent;}
.form button[type=submit]{
  background: var(--color-primary);color:#fff;border:none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-body);
  cursor:pointer;
}
.form button[type=submit]:hover{background: var(--color-primary-hover);}

@media(max-width:640px){
  .form .row{flex-direction:column;align-items:stretch;gap: var(--space-xs);}
  .form .row label{width:auto;}
  .tbl{font-size:11px;}
}

footer{
  margin-top: var(--space-xl);
  padding: var(--space-md) var(--space-xs);
  font-size:11px;color: var(--color-text-muted);text-align:center;
}

@media(max-width:640px){
  .tile.size-2x1{grid-column:span 1;}
  header{flex-wrap:wrap;gap:var(--space-sm);}
  header .sitename{border-left:none;padding-left:0;}
}