/* shared(共有の環境)の土台の部品(決め 167・手 1・2026-10-19)。app.css の変数と .card/.btn/.pill の上に足すだけ。
   single(denshi・デモ・自社)は base.html がこのファイルを読まないので、見た目は 1 文字も変わらない */

/* 見出しの行(左に h1・右に主なボタン) */
.sh-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 18px;}
.sh-head h1{margin:0; font-size:22px;}
.sh-actions{display:flex; gap:10px; flex-wrap:wrap;}
.btn.big{min-height:48px; padding:0 22px; font-size:15px;}

/* 数のカード(ホーム・プランと請求) */
.kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin:0 0 20px;}   /* カードが 3 つなら 3 列に広がる(最大 4〜5 列) */
.kpi{margin:0; padding:16px 18px;}
.kpi h2{font-size:13px; color:var(--color-text-sub); margin:0 0 8px; font-weight:700; line-height:1.5;}
.kpi__num{font-size:28px; font-weight:800; line-height:1.1; color:var(--color-text);}
.kpi__num small{font-size:13px; color:var(--color-text-sub); font-weight:600; margin-left:6px;}
.kpi__sub{font-size:12.5px; color:var(--color-text-sub); margin-top:8px; line-height:1.6;}
.bar{height:8px; background:var(--color-border-soft); border-radius:4px; overflow:hidden; margin:10px 0 0;}
.bar i{display:block; height:100%; background:var(--color-primary); border-radius:4px;}

/* カードの見出しの行(左に h2・右にリンク) */
.sh-card-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 12px;}
.sh-card-head h2{margin:0; font-size:16px;}
.sh-card-head a{font-size:13px; font-weight:700; text-decoration:none;}
.sh-empty{color:var(--color-text-sub); text-align:center; padding:22px 10px; margin:0; border:1.5px dashed var(--color-border); border-radius:var(--radius-sm); font-size:13px;}

/* 入口の一覧(設定・プランと請求) */
.hub{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:0 0 20px;}
.hub a{display:block; padding:16px 18px; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius);
  box-shadow:var(--shadow); text-decoration:none; color:var(--color-text);}
.hub a:hover{box-shadow:0 2px 6px rgba(16,24,40,.08);}   /* 手 2・直し 5: 枠の色は変えない(選ばれた印に見えないように) */
.hub a b{display:block; font-size:15px; color:var(--color-primary); margin:0 0 4px;}
.hub a span{display:block; font-size:12.5px; color:var(--color-text-sub); line-height:1.6;}

/* 書面の 1 件 1 枚のカード(スマホ。PC は表) */
.doccards{display:none;}

@media (max-width:1199px) and (min-width:769px){
  .kpis{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .hub{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:768px){
  .sh-head h1{margin:0;}
  .sh-actions{width:100%;}
  .sh-actions .btn{flex:1;}
  .kpis{grid-template-columns:1fr; gap:10px;}   /* 手 2・直し 3: スマホは 1 列 */
  .kpi{padding:14px;}
  .kpi__num{font-size:24px;}
  .hub{grid-template-columns:1fr; gap:10px;}
  .doctable{display:none;}
  .doccards{display:grid; gap:10px;}
  .doccard{display:block; padding:12px 14px; background:#fff; border:1px solid var(--color-border); border-radius:12px; text-decoration:none; color:var(--color-text);}
  .doccard__top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px;}
  .doccard__no{font-weight:700; color:var(--color-primary); font-size:13.5px;}
  .doccard__title{font-weight:700; font-size:14.5px;}
  .doccard__sub{font-size:12.5px; color:var(--color-text-sub); margin-top:2px;}
}

/* ---- 書面の一覧(手 2): 状態のタブ・検索の行 ---- */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--color-border); margin:0 0 14px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.tabs a{padding:9px 12px; font-size:13.5px; color:var(--color-text-sub); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; font-weight:600;}
.tabs a[aria-current="page"]{color:var(--color-primary); border-bottom-color:var(--color-primary); font-weight:700;}
.tabs__n{display:inline-block; min-width:18px; padding:0 6px; border-radius:999px; background:var(--color-gray-pale); color:var(--color-text-sub); font-size:11px; text-align:center; margin-left:2px;}
.tabs a[aria-current="page"] .tabs__n{background:var(--color-primary-pale); color:var(--color-primary);}

/* ---- 新しく送る(手 2): 3 つから選ぶ ---- */
.choices3{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px;}
.choice3{display:flex; gap:14px; align-items:flex-start; padding:18px; background:#fff; border:1.5px solid var(--color-border); border-radius:var(--radius);
  box-shadow:var(--shadow); text-decoration:none; color:var(--color-text);}
a.choice3:hover{box-shadow:0 2px 6px rgba(16,24,40,.08);}
.choice3__ic{flex:none; width:46px; height:46px; border-radius:10px; background:var(--color-primary-pale); color:var(--color-primary-dark); display:inline-flex; align-items:center; justify-content:center;}
.choice3__body{display:block; min-width:0;}
.choice3__body b{display:block; font-size:15px; margin:0 0 4px; line-height:1.5;}
.choice3__body > span{display:block; font-size:12.5px; color:var(--color-text-sub); line-height:1.6;}
.choice3.is-locked{background:#f7f9fc; color:var(--color-text-sub);}
.choice3.is-locked .choice3__ic{background:var(--color-gray-pale); color:var(--color-text-sub);}
.choice3.is-locked .pill{vertical-align:middle; margin-left:4px;}
@media (max-width:1199px) and (min-width:769px){ .choices3{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width:768px){
  .choices3{grid-template-columns:1fr; gap:10px;}
  .tabs a{padding:9px 10px; font-size:13px;}
}

/* ---- 手 3: 一覧の絞り込み(スマホは畳む)・今の期間の 1 行 ---- */
.srch-toggle{display:none;}
.srch-more[hidden]{display:block;}            /* PC はいつも開いている */
.dt-included{font-size:12.5px; color:var(--color-text-sub); margin:0 0 10px;}
.dt-included a{color:var(--color-text-sub); text-decoration:underline dotted;}
.choice3__note{grid-column:1 / -1; display:flex; gap:10px; align-items:center; background:#fff; border:1px solid var(--color-border); border-radius:8px; padding:8px 12px; font-size:12.5px; order:99;}
@media (max-width:768px){
  .srch-toggle{display:inline-flex;}
  .srch-more[hidden]{display:none;}
  .srch-row{flex-wrap:wrap;}
}

/* ---- 手 3: 書面の詳細(進み・左広く右細く・記録) ---- */
.dt-title{font-weight:600; font-size:17px; margin:0 6px;}
.steps{display:flex; gap:6px; align-items:center; list-style:none; margin:0 0 16px; padding:0; font-size:12.5px; flex-wrap:wrap;}
.steps__i{display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 6px; border-radius:999px; background:var(--color-gray-pale); color:var(--color-text-sub); font-weight:600;}
.steps__n{display:inline-flex; width:20px; height:20px; border-radius:50%; align-items:center; justify-content:center; background:#fff; color:var(--color-text-sub); font-size:11px; font-weight:700;}
.steps__i.is-done{background:var(--color-green-pale); color:#027a48;}
.steps__i.is-done .steps__n{background:var(--color-green); color:#fff;}
.steps__i.is-on{background:var(--color-primary); color:#fff;}
.steps__i.is-on .steps__n{background:#fff; color:var(--color-primary);}
.steps__i + .steps__i::before{content:""; }
.dt-grid{display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:16px; align-items:start;}
.dt-h2{font-size:15px; margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--color-border-soft);}
.dt-kv{font-size:13px;}
.dt-kv th{width:130px; white-space:nowrap; vertical-align:top; background:#f7f9fc;}
.dt-kv td{vertical-align:top; word-break:break-word;}
.dt-sub{display:block; font-size:12px; color:var(--color-text-sub); margin-top:2px;}
.dt-inl{display:block; margin-top:8px; font-size:12.5px;}
.dt-inl input[type=text],.dt-inl input[type=date],.dt-inl select{display:inline-block; width:auto; max-width:100%; min-height:36px; padding:5px 10px; font-size:14px; margin:2px 0;}
.dt-note{font-size:12px; color:var(--color-text-sub); font-weight:400;}
.dt-body{border:1px solid var(--color-border); border-radius:8px; padding:14px; font-size:13px; line-height:1.9; max-height:70vh; overflow:auto;}
.dt-pdf{width:100%; height:70vh; border:1px solid var(--color-border); border-radius:8px; display:block;}
.dt-actions{display:grid; gap:8px;}
.dt-actions .btn{width:100%;}
.dt-actions form{margin:0;}
.dt-block{color:#b54708; margin:0;}
.dt-return{display:grid; grid-template-columns:1fr auto; gap:6px;}
.dt-return input[type=text]{min-height:40px; width:100%; max-width:none; font-size:14px;}
.dt-pdf-open{display:none;}
.dt-danger{color:var(--color-red); border-color:#f7b4ae;}
.dt-files{font-size:13px; padding-left:1.2em; margin:0 0 8px;}
.dt-attach{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.dt-attach input[type=file]{flex:1; min-width:0; max-width:none;}
.dt-tl{list-style:none; margin:0; padding:0; font-size:12.5px;}
.dt-tl li{display:grid; grid-template-columns:118px 1fr; gap:8px; padding:6px 0; border-bottom:1px solid var(--color-border-soft);}
.dt-tl li:last-child{border-bottom:none;}
.dt-tl__at{color:var(--color-text-sub); white-space:nowrap; font-variant-numeric:tabular-nums;}
@media (max-width:1199px) and (min-width:769px){ .dt-grid{grid-template-columns:minmax(0, 1fr) 280px;} }
@media (max-width:768px){
  .dt-grid{grid-template-columns:1fr;}
  /* 10/19 の気づき 5: スマホは見出しを上・値を下 */
  .dt-kv, .dt-kv tbody, .dt-kv tr, .dt-kv th, .dt-kv td{display:block; width:100%; box-sizing:border-box;}
  .dt-kv tr{border-bottom:1px solid var(--color-border-soft); padding:8px 0;}
  .dt-kv th{border:none; background:none; padding:0 0 2px; font-size:12px; color:var(--color-text-sub);}
  .dt-kv td{border:none; padding:0;}
  /* 10/19 の気づき 3: スマホは PDF のプレビューを出さず「PDF を開く」 */
  .dt-pdf{display:none;}
  .dt-pdf-open{display:inline-flex; width:100%;}
  .dt-tl li{grid-template-columns:1fr; gap:0;}
  .steps{gap:4px; font-size:12px;}
  .steps__i{padding:4px 10px 4px 5px;}
}

/* ---- 設定(手 4): 左にメニュー(PC)・上に横並びの札(スマホ)。中身は今までの設定の画面のまま ---- */
.st-wrap{display:grid; grid-template-columns:220px minmax(0, 1fr); gap:22px; align-items:start;}
.st-menu{position:sticky; top:72px; display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius); padding:8px; box-shadow:var(--shadow);}
.st-menu__h{margin:4px 10px 8px; font-size:12px; color:var(--color-text-sub); font-weight:700; letter-spacing:.04em;}
.st-menu a, .st-menu .is-locked{display:flex; align-items:center; gap:6px; padding:9px 10px; border-radius:8px; font-size:13.5px; text-decoration:none; color:var(--color-text); font-weight:600; line-height:1.4;}
.st-menu a:hover{background:var(--color-gray-pale);}
.st-menu a[aria-current="page"]{background:var(--color-primary-pale); color:var(--color-primary); box-shadow:inset 3px 0 0 var(--color-primary);}
.st-menu .is-locked{color:var(--color-text-sub); font-weight:500; flex-wrap:wrap;}
.st-menu .is-locked .pill{font-size:10.5px; padding:1px 6px; display:inline-flex; align-items:center; gap:3px;}
.st-body{min-width:0;}
.st-body > h1:first-child, .st-body .nt > h1:first-child{margin-top:0;}
.st-lead{font-size:13px; color:var(--color-text-sub); margin:0 0 14px; line-height:1.7;}
.st-kv th{width:14em;}
.st-link{font-size:12.5px; margin-left:8px; white-space:nowrap;}
@media (max-width:1199px) and (min-width:769px){ .st-wrap{grid-template-columns:190px minmax(0, 1fr); gap:16px;} }
@media (max-width:768px){
  .st-wrap{display:block;}
  .st-menu{position:static; flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:6px; padding:6px 0 10px; margin:0 0 14px; border:0; background:none; box-shadow:none; scrollbar-width:none;
           -webkit-mask-image:linear-gradient(90deg, #000 94%, transparent); mask-image:linear-gradient(90deg, #000 94%, transparent); padding-right:24px;}
  .st-menu::-webkit-scrollbar{display:none;}
  .st-menu__h{display:none;}
  .st-menu a, .st-menu .is-locked{white-space:nowrap; padding:7px 12px; border:1px solid var(--color-border); border-radius:999px; font-size:13px; background:#fff; flex:none;}
  .st-menu a[aria-current="page"]{box-shadow:none; border-color:var(--color-primary);}
  .st-menu .is-locked .st-needs{display:none;}   /* 手 5: スマホの札は「承認 🔒」だけ。押すと下の 1 行に */
  .st-menu .is-locked .pill{padding:1px 5px;}
  .st-menu__note{display:block;}
  .st-kv th{width:auto;}
}
.st-menu__note{margin:-6px 0 12px; font-size:12.5px; color:var(--color-text-sub);}
.st-menu__note[hidden]{display:none;}
@media (min-width:769px){ .st-wrap > .st-menu__note{display:none;} }   /* PC は札の中に文があるので出さない */

/* ---- プランと請求(手 5・決め 166) ---- */
.pl-req{font-size:13px; color:var(--color-text); background:var(--color-primary-pale); border:1px solid var(--color-primary); border-radius:8px; padding:8px 12px; margin:0 0 14px;}
.pl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;}   /* スマホは横にスクロール(notices.css の .tblwrap はここでは読まない) */
.pl-table{width:100%; font-size:13px; border-collapse:collapse;}
.pl-table th, .pl-table td{padding:8px 10px; border-bottom:1px solid var(--color-border-soft); vertical-align:top; text-align:left;}
.pl-table thead th{font-size:13px; white-space:nowrap;}
.pl-table tbody th{font-weight:600; color:var(--color-text-sub); width:14em;}
.pl-table .is-cur{background:var(--color-primary-pale);}
.pl-table thead th.is-cur{color:var(--color-primary);}
.pl-cur{display:inline-block; margin-left:6px; padding:0 6px; border-radius:999px; background:var(--color-primary); color:#fff; font-size:10.5px; vertical-align:middle;}
.pl-note{font-size:12.5px; color:var(--color-text-sub); margin:10px 0 0;}
.nt .choices.choices-3{grid-template-columns:repeat(3, minmax(0, 1fr));}
.nt .choice.is-cur{opacity:.6;}
@media (max-width:768px){
  .pl-table tbody th{width:9em;}
  .pl-table{font-size:12px; min-width:640px;}   /* スマホは横にスクロール(3 列を潰さない。.tblwrap が overflow) */
  .nt .choices.choices-3{grid-template-columns:1fr;}
}
/* 決め 169(B-4): 振込の請求書の表 */
.pl-unpaid{color:#8a2f1e}
.pl-inv tr.is-overdue td{color:#8a2f1e}
.pl-inv td small{color:#5a6172}

/* 手 7(気づき 0-7・2026-10-20): スマホの状態・種類のタブは横に流せる。流せる側にだけ影が出る(背景の重ね方=local と scroll の技法)。
   右端を少し空けて「続きがある」と分かるように */
@media (max-width:768px){
  .tabs{padding-right:28px; scrollbar-width:none;
        background:
          linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left/36px 100% no-repeat local,
          linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) right/36px 100% no-repeat local,
          linear-gradient(90deg, rgba(31,36,48,.18), rgba(31,36,48,0)) left/14px 100% no-repeat scroll,
          linear-gradient(270deg, rgba(31,36,48,.18), rgba(31,36,48,0)) right/14px 100% no-repeat scroll;}
  .tabs::-webkit-scrollbar{display:none;}
}

/* 決め 168・手 8: 一覧の金額の横の小さな税抜/税込の印 */
.taxmark{font-size:11px;color:#667085;font-weight:400;margin-left:1px;white-space:nowrap}
.money-hint{display:block;font-size:12px;color:#667085;font-weight:400;margin-top:2px}

/* 手 8-2(2026-10-21): CSV の列の説明。PC は表(右端の影で流せることを示す)・スマホは 1 列 1 枚のカード */
.colhelp__wrap{position:relative;}
.colhelp__wrap:after{content:""; position:absolute; top:0; right:0; bottom:0; width:22px; pointer-events:none; background:linear-gradient(to left, rgba(255,255,255,.95), rgba(255,255,255,0));}
.colcards{display:none;}
.colcard{border:1px solid var(--color-border); border-radius:10px; padding:10px 12px; margin:0 0 8px; background:#fff;}
.colcard__name{font-weight:700; font-size:14px;}
.colcard__what{font-size:13px; margin-top:2px;}
.colcard__ex{font-size:12px; color:var(--color-text-sub); margin-top:2px;}
.colcard .pill.orange{background:var(--color-orange-pale); color:#b35c00;} .colcard .pill.gray{background:var(--color-gray-pale); color:var(--color-text-sub);}
@media (max-width:640px){ .colhelp__wrap{display:none;} .colcards{display:block;} }