/* =====================================================================
   電子契約システム 共通デザイン
   ここには「どの画面でも使う土台」だけを置く。
   ダッシュボード固有のものは dashboard.css に書く。
   ===================================================================== */

:root{
  --color-navy:#071b3d;
  --color-navy-2:#0d2b5c;
  --color-primary:#155eef;
  --color-primary-dark:#0b4edb;
  --color-primary-pale:#eaf1ff;
  --color-bg:#f4f6f9;
  --color-card:#ffffff;
  --color-border:#d9e0ea;
  --color-border-soft:#e7ecf3;
  --color-text:#172033;
  --color-text-sub:#667085;
  --color-orange:#f79009;
  --color-orange-pale:#fff5e6;
  --color-green:#12b76a;
  --color-green-pale:#e7f8f0;
  --color-purple:#7f56d9;
  --color-purple-pale:#f2edfd;
  --color-red:#f04438;
  --color-red-pale:#feeceb;
  --color-gray-pale:#eef1f6;

  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.05);
  --shadow-lg:0 8px 24px rgba(16,24,40,.12);
  --control-h:42px;
  --appbar-h:58px;
  --bottomnav-h:62px;

  /* 旧テンプレートが参照している変数(他画面を壊さないために残す) */
  --brand:var(--color-primary);
  --brand-pale:var(--color-primary-pale);
  --ink:var(--color-text);
  --line:var(--color-border);
  --bg:var(--color-bg);
  --warn:#b54708;
  --warn-soft:var(--color-orange-pale);
  --ok:#027a48;
  --ok-soft:var(--color-green-pale);
}

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

html{-webkit-text-size-adjust:100%;}
body{
  font-family:"Hiragino Sans","Yu Gothic",Meiryo,system-ui,sans-serif;
  background:var(--color-bg); color:var(--color-text);
  line-height:1.7; font-size:14px;
  overflow-x:hidden;           /* 画面全体は横に動かさない */
}
a{color:var(--color-primary);}
:focus-visible{outline:3px solid #2f6fef; outline-offset:2px; border-radius:4px;}

.skip-link{position:absolute; left:-9999px; top:0; background:#fff; color:var(--color-primary);
  padding:10px 16px; z-index:200; border-radius:0 0 var(--radius-sm) 0; font-weight:700;}
.skip-link:focus{left:0;}

.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;}

/* ---------------------------------------------------------------- ヘッダー */
.appbar{background:var(--color-navy); color:#fff; position:sticky; top:0; z-index:60;}
.appbar__inner{
  max-width:1440px; margin:0 auto; min-height:var(--appbar-h);
  padding:0 20px; display:flex; align-items:center; gap:14px;
}
.appbar__brand{display:flex; align-items:center; gap:9px; color:#fff; text-decoration:none;
  font-weight:800; font-size:15px; white-space:nowrap;}
.appbar__brand svg{flex:none;}
.appbar__nav{display:flex; align-items:center; gap:2px; flex:1; min-width:0;}
.appbar__nav a{
  color:#c9d6ec; text-decoration:none; font-size:13.5px; font-weight:600;
  padding:0 12px; height:var(--appbar-h); display:inline-flex; align-items:center;
  border-bottom:3px solid transparent; white-space:nowrap;
}
.appbar__nav a:hover{color:#fff; background:rgba(255,255,255,.06);}
.appbar__nav a[aria-current="page"]{color:#fff; border-bottom-color:#5b8dff;}
.appbar__right{display:flex; align-items:center; gap:10px; margin-left:auto;}
.appbar__user{display:flex; align-items:center; gap:6px; font-size:13px; color:#dbe4f4; white-space:nowrap;}
.appbar__logout{
  background:transparent; border:1px solid #3d5680; color:#dbe4f4; border-radius:var(--radius-sm);
  padding:7px 14px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px;
}
.appbar__logout:hover{background:rgba(255,255,255,.1); color:#fff;}
.appbar__iconbtn{
  position:relative; display:none; align-items:center; justify-content:center;
  width:44px; height:44px; background:transparent; border:none; color:#fff;
  border-radius:50%; cursor:pointer; text-decoration:none; flex:none;
}
.appbar__iconbtn:hover{background:rgba(255,255,255,.12);}
.badge-dot{
  position:absolute; top:5px; right:4px; min-width:18px; height:18px; padding:0 5px;
  background:var(--color-red); color:#fff; border-radius:9px;
  font-size:11px; font-weight:700; line-height:18px; text-align:center;
}

/* ドロワー(スマホのメニュー) */
.drawer{position:fixed; inset:0; z-index:90; display:none;}
.drawer[data-open="1"]{display:block;}
.drawer__scrim{position:absolute; inset:0; background:rgba(7,27,61,.5);}
.drawer__panel{
  position:absolute; top:0; left:0; bottom:0; width:min(84vw,320px);
  background:#fff; box-shadow:var(--shadow-lg); padding:14px 0;
  display:flex; flex-direction:column; overflow-y:auto;
}
.drawer__head{display:flex; align-items:center; justify-content:space-between; padding:4px 16px 12px;
  border-bottom:1px solid var(--color-border-soft);}
.drawer__title{font-weight:800; font-size:15px;}
.drawer__close{background:none; border:none; width:44px; height:44px; cursor:pointer; color:var(--color-text-sub);}
.drawer a, .drawer button.drawer__item{
  display:flex; align-items:center; gap:10px; padding:14px 18px; min-height:48px;
  color:var(--color-text); text-decoration:none; font-size:15px; font-weight:600;
  background:none; border:none; width:100%; text-align:left; font-family:inherit; cursor:pointer;
}
.drawer a[aria-current="page"]{color:var(--color-primary); background:var(--color-primary-pale);}
.drawer__sep{height:1px; background:var(--color-border-soft); margin:8px 0;}

/* ---------------------------------------------------------------- 本文 */
main.page{max-width:1440px; margin:0 auto; padding:28px 32px 48px;}

h1{font-size:26px; font-weight:800; letter-spacing:.01em; margin-bottom:20px;}
h2{font-size:16px; font-weight:800; margin:0 0 12px;}
h3{font-size:14px; font-weight:700;}

/* ---------------------------------------------------------------- 部品 */
.card{
  background:var(--color-card); border:1px solid var(--color-border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; margin-bottom:20px;
}

.flash{
  background:#fff; color:var(--color-text); border:1px solid var(--color-green);
  border-left:4px solid var(--color-green);
  border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:16px; font-size:13.5px;
  box-shadow:var(--shadow);
}

table{width:100%; border-collapse:collapse; background:#fff;}
th,td{border:1px solid var(--color-border-soft); padding:10px 12px; text-align:left; font-size:13.5px;}
th{background:#f7f9fc; font-size:12.5px; font-weight:700; color:#4a5468;}

a.rowlink{color:var(--color-primary); text-decoration:none; font-weight:700;}
a.rowlink:hover{text-decoration:underline;}

.pill{
  display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:3px 11px;
  font-size:12px; font-weight:700; white-space:nowrap; line-height:1.6;
}
.pill.blue  {background:var(--color-primary-pale); color:#0b4edb;}
.pill.amber,
.pill.orange{background:var(--color-orange-pale); color:#b54708;}
.pill.green {background:var(--color-green-pale);  color:#027a48;}
.pill.purple{background:var(--color-purple-pale); color:#5c33b3;}
.pill.red   {background:var(--color-red-pale);    color:#b42318;}
.pill.gray  {background:var(--color-gray-pale);   color:#4a5468;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--color-primary); color:#fff; border:1px solid var(--color-primary);
  border-radius:var(--radius-sm); padding:0 18px; min-height:var(--control-h);
  font-size:13.5px; font-weight:700; cursor:pointer; text-decoration:none;
  font-family:inherit; white-space:nowrap;
}
.btn:hover{background:var(--color-primary-dark); border-color:var(--color-primary-dark);}
.btn:disabled{opacity:.6; cursor:default;}
.btn.secondary{background:#fff; color:var(--color-text); border-color:var(--color-border);}
.btn.secondary:hover{background:#f3f6fb; border-color:#c3cddc;}
.btn.small{min-height:36px; padding:0 14px; font-size:12.5px;}

form.inline{display:inline;}
.linklike{background:none; border:none; color:var(--color-primary); font-size:12.5px; font-weight:700;
  cursor:pointer; padding:0 0 0 8px; font-family:inherit; text-decoration:underline;}

label{display:block; font-size:12.5px; color:var(--color-text-sub); margin:10px 0 4px; font-weight:600;}
input,select,textarea{
  width:100%; max-width:420px; border:1px solid var(--color-border); border-radius:var(--radius-sm);
  padding:9px 12px; font-size:16px;      /* スマホで勝手に拡大されないよう16px以上 */
  font-family:inherit; color:var(--color-text); background:#fff; min-height:var(--control-h);
}
input:focus,select:focus,textarea:focus{border-color:var(--color-primary);}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 20px; max-width:900px;}
.timeline{border-left:2px solid var(--color-border); margin:8px 0 0 6px; padding-left:16px;}
.tl{position:relative; font-size:13px; margin-bottom:8px;}
.tl::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--color-primary);
  position:absolute; left:-21.5px; top:6px;}
.tl time{color:#8a90a0; font-size:11.5px; display:block;}

/* ---------------------------------------------------------------- 下部メニュー(スマホ) */
.bottomnav{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:#fff; border-top:1px solid var(--color-border);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottomnav__list{display:flex;}
.bottomnav__item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:var(--bottomnav-h); padding:8px 2px; text-decoration:none;
  color:var(--color-text-sub); font-size:10px; font-weight:700;
  line-height:1.2; white-space:nowrap; letter-spacing:-.02em;
  background:none; border:none; font-family:inherit; cursor:pointer; position:relative;
}
.bottomnav__item[aria-current="page"]{color:var(--color-primary);}
.bottomnav__item[aria-current="page"] svg{fill:rgba(21,94,239,.10);}
.bottomnav__item .badge-dot{top:6px; right:calc(50% - 22px);}
.bottomnav__item svg{width:23px; height:23px;}

/* ---------------------------------------------------------------- 画面幅ごとの調整 */
@media (max-width:1199px){
  main.page{padding:22px 20px 40px;}
}

@media (max-width:768px){
  :root{--appbar-h:52px; --bottomnav-h:64px;}

  /* ヘッダー: 目標デザインに合わせてコンパクトに */
  .appbar__inner{padding:0 10px 0 4px; gap:4px;}
  .appbar__nav{display:none;}
  .appbar__user{display:none;}
  .appbar__logout{display:none;}
  .appbar__iconbtn{display:inline-flex; width:40px; height:40px;}
  .appbar__brand{font-size:15px; gap:7px;}
  .appbar__right{gap:2px;}
  .badge-dot{top:2px; right:2px;}

  .bottomnav{display:block;}
  main.page{padding:16px 16px calc(80px + env(safe-area-inset-bottom));}
  h1{font-size:22px; margin-bottom:16px;}
  .card{padding:16px; border-radius:16px;}
  input,select,textarea{max-width:none;}
  .grid2{grid-template-columns:1fr;}
  .flash{border-radius:12px;}

  /* サイドメニュー: 白のパネルを左から。項目は角丸で選択状態を示す */
  .drawer__panel{width:min(78vw,300px); padding:10px 0 18px; border-radius:0 18px 18px 0;}
  .drawer__head{padding:6px 14px 12px;}
  .drawer__title{font-size:14.5px;}
  .drawer a, .drawer button.drawer__item{
    font-size:14.5px; padding:12px 14px; min-height:46px; margin:2px 10px; border-radius:12px; width:auto;
  }
  .drawer a[aria-current="page"]{background:var(--color-primary-pale);}
  .drawer__sep{margin:10px 14px;}
}

@media (min-width:769px){
  .appbar__burger{display:none;}
}