:root{
    --bg:#F7F8FA;
    --panel:#FFFFFF;
    --ink:#1A2233;
    --ink-soft:#5B6472;
    --line:#E3E7EE;
    --line-strong:#CBD2DE;
    --weekend:#F0F2F6;
    --today:#D9534F;
    --c1:#2B4C7E;
    --c2:#0E9AA7;
    --c3:#C8881E;
    --c4:#4C9A6E;
    --c-accent:#0E9AA7;
    --row-h:44px;
    --head-h:62px;
    --label-w:200px;
    --day-w:40px;
    --radius:10px;
    --shadow:0 1px 3px rgba(26,34,51,.06),0 8px 24px rgba(26,34,51,.05);
  }
  *{box-sizing:border-box;}
  html{scrollbar-gutter:stable;}
  html,body{margin:0;padding:0;}
  /* 数字(0-9)だけ細い欧文フォントで描画。日本語・英字はBIZ UDPゴシックのまま */
  @font-face{
    font-family:'NumNarrow';
    src:local('Arial'),local('Helvetica Neue'),local('Helvetica'),local('Roboto'),local('Segoe UI');
    unicode-range:U+0030-0039;
  }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'NumNarrow',"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
    font-size:14px;
    line-height:1.6;
    font-variant-numeric:proportional-nums;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1280px;margin:0 auto;padding:22px 20px 60px;}

  /* ---- ヘッダー ---- */
  header.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
  .titleblock{min-width:0;}
  .eyebrow{font-size:14px;letter-spacing:.18em;color:var(--ink-soft);font-weight:700;}
  .projname{
    font-size:32px;font-weight:800;letter-spacing:.01em;color:var(--ink);
    padding:2px 0;
  }

  .controls{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;}
  .field{display:flex;flex-direction:column;gap:3px;}
  .field label{font-size:10px;color:var(--ink-soft);font-weight:700;letter-spacing:.05em;padding-left:2px;}
  input[type="month"],input[type="date"],input[type="time"],select,input[type="text"],textarea{
    font-family:inherit;font-size:14px;color:var(--ink);background:var(--panel);font-variant-numeric:proportional-nums;
    border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;outline:none;line-height:1.2;
  }
  select{font-family:Arial,"Helvetica Neue","BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;}
  input:focus,select:focus,textarea:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(14,154,167,.12);}
  .datepick{position:relative;width:100%;}
  .datepick .dateview{width:100%;cursor:pointer;padding-right:34px;}
  .datepick .datereal{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;border:0;cursor:pointer;}
  /* クリック判定(カレンダーを開く領域)を入力欄の全面に拡張。要素自体が透明(opacity:0)のため見た目は不変。 */
  .datepick .datereal::-webkit-calendar-picker-indicator{
    position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;
  }
  .datepick::after{
    content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);
    width:16px;height:16px;pointer-events:none;
    background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3C/svg%3E");
  }
  .datepick:focus-within .dateview{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(14,154,167,.12);}

  .btn{
    font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border-radius:8px;
    padding:9px 14px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);
    transition:background .12s,border-color .12s,transform .05s;line-height:1.2;
  }
  .btn:hover{border-color:var(--c-accent);}
  .btn:active{transform:translateY(1px);}
  .btn.primary{background:var(--c1);border-color:var(--c1);color:#fff;}
  .btn.primary:hover{background:#22406d;}
  .btn.ghost{background:transparent;}
  #adminBtn,#listBtn{background:#FFF;color:var(--ink);border-color:var(--line-strong);}
  #adminBtn:hover,#listBtn:hover{background:#FFF;border-color:var(--ink-soft);}
  .btn.small{padding:7px 10px;font-size:12px;}

  /* ---- 工種名の編集 ---- */
  /* PCは2列。工種行を左右に折り返して並べる(ラベルは全幅) */
  .trade-config{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow);margin:0 0 12px;}
  .trade-config .ac-label{flex:0 0 100%;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:2px;}
  /* 2列: 各行は「半分の幅 − 列間gapの半分」。計算を単純にするため min-width も同値にする */
  .ac-item{flex:0 0 calc(50% - 8px);display:flex;align-items:center;gap:9px;min-width:0;box-sizing:border-box;}
  .ac-item .dot{width:12px;height:12px;border-radius:4px;flex:0 0 auto;}
  .ac-item input[type="text"]{font-size:14px;font-weight:700;background:var(--bg);border-radius:7px;padding:8px 10px;flex:1 1 auto;min-width:0;}
  .ac-item input[type="text"]:focus{background:var(--panel);}
  .ac-item .btn.small{flex:0 0 auto;}

  /* ---- フィルタ・凡例 ---- */
  .legendbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;}
  .cal-caption{text-align:right;font-size:12px;color:var(--ink-soft);margin:0 0 6px;}
  .chip{
    display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;cursor:pointer;
    padding:5px 11px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);
    color:var(--ink-soft);user-select:none;transition:opacity .12s,background .12s;
  }
  .chip .dot{width:11px;height:11px;border-radius:3px;}
  .chip.on{color:var(--ink);}
  .chip.off{opacity:.4;text-decoration:line-through;}

  /* ---- ガント(PC) ---- */
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
  .sched-pc{padding:14px;}
  .msg-card{padding:14px 16px;margin-top:14px;}
  .msg-head{font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:8px;}
  /* 建築地カード */
  .addr-card{padding:14px 16px;margin-top:14px;}
  .addr-head{font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:8px;}
  .addr-body{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .addr-text{font-size:15px;font-weight:700;color:var(--ink);word-break:break-all;flex:1 1 auto;min-width:0;}
  .addr-map{flex:0 0 auto;background:var(--c4);border-color:var(--c4);color:#fff;text-decoration:none;}
  .addr-map:hover{background:#3f8a5e;border-color:#3f8a5e;}
  .addr-map::before{content:"\1F4CD";margin-right:5px;}
  /* 編集中のテキストエリアも入力行数に応じて自動で高さを合わせるため、手動リサイズを撤去 */
  #shareMsg{
    width:100%;box-sizing:border-box;resize:none;overflow:hidden;
    font-family:inherit;font-size:13px;line-height:1.6;color:var(--ink);
    background:var(--bg);border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;
  }
  #shareMsg:focus{background:var(--panel);}
  /* 共有メッセージ欄を行数に応じて上限なしで可変化。max-height/overflow撤去 */
  .msg-view{
    box-sizing:border-box;white-space:pre-wrap;word-break:break-word;
    font-size:13px;line-height:1.6;color:var(--ink);
    background:var(--bg);border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;
    min-height:120px;cursor:text;
  }
  .msg-view.empty{color:var(--ink-soft);}
  .msg-view a{color:var(--c-accent);text-decoration:underline;word-break:break-all;}
  .gantt-scroll{overflow:auto;max-height:70vh;}
  .inner{position:relative;}

  .header-row{position:sticky;top:0;z-index:5;display:flex;background:var(--panel);box-shadow:0 1px 0 var(--line);}
  .corner{
    position:sticky;left:0;z-index:6;width:var(--label-w);min-width:var(--label-w);height:var(--head-h);
    background:var(--panel);border-right:1px solid var(--line-strong);
    display:flex;align-items:center;padding:0 14px;font-size:11px;font-weight:700;color:var(--ink-soft);
  }
  .head-days{display:flex;}
  .month-track{display:flex;flex-direction:column;}
  .month-cap{height:22px;display:flex;align-items:center;padding-left:8px;font-size:11px;font-weight:800;color:var(--ink);border-bottom:1px solid var(--line);border-right:1px solid var(--line-strong);}
  .day-cells{display:flex;height:40px;}
  .day-cell{
    width:var(--day-w);min-width:var(--day-w);display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-size:12px;border-right:1px solid var(--line);color:var(--ink-soft);
  }
  .day-cell .dnum{font-size:16px;font-weight:700;color:var(--ink);line-height:1.1;}
  .day-cell.weekend{background:var(--weekend);}
  .day-cell.sun .dnum{color:#C0504D;}
  .day-cell.sat .dnum{color:#3a6ea5;}
  .day-cell.today{background:rgba(217,83,79,.10);}
  .day-cell.today .dnum{color:var(--today);}

  .row{display:flex;border-bottom:1px solid var(--line);min-height:var(--row-h);}
  .row:hover .label{background:#FBFCFE;}
  .label{
    position:sticky;left:0;z-index:5;width:var(--label-w);min-width:var(--label-w);
    background:var(--panel);border-right:1px solid var(--line-strong);
    display:flex;align-items:center;gap:8px;padding:0 12px;cursor:pointer;overflow:hidden;
  }
  .label .lname{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0;}
  .label .lcolor{width:4px;height:20px;border-radius:2px;flex:0 0 auto;}
  .reorder{display:flex;flex-direction:column;gap:4px;flex:0 0 auto;}
  .ro-btn{
    width:20px;height:15px;line-height:1;padding:0;margin:0;font-size:9px;
    border:1px solid var(--line-strong);border-radius:4px;background:var(--panel);
    color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;
  }
  .ro-btn:hover:not(:disabled){border-color:var(--c-accent);color:var(--ink);}
  .ro-btn:disabled{opacity:.3;cursor:default;}
  .track{position:relative;height:var(--row-h);flex:1 1 auto;}
  .track .wk{position:absolute;top:0;bottom:0;background:var(--weekend);pointer-events:none;}
  .track .grid{position:absolute;top:0;bottom:0;border-right:1px solid var(--line);pointer-events:none;}
  .today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--today);z-index:4;pointer-events:none;}

  /* バー: 白系の軽い意匠(工種色アウトライン)+ 進捗の塗り分け(濃い=完了/薄い=残り) */
  .bar{
    position:absolute;border:1.5px solid var(--line-strong);border-radius:6px;cursor:pointer;
    display:flex;align-items:center;padding:0 8px;overflow:hidden;
    color:var(--ink);font-size:12px;font-weight:700;
    background:rgba(var(--bar-rgb,120,120,120),.14);z-index:2;
  }
  .bar .prog{position:absolute;left:0;top:0;bottom:0;background:rgba(var(--bar-rgb,120,120,120),.42);border-right:1px solid rgba(var(--bar-rgb,120,120,120),.6);z-index:0;}
  .bar .blabel{position:relative;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* ステータス文字: 既定はバー右外。隙間が無い時はバー内右寄せ(.in) */
  .bstatus{position:absolute;transform:translateY(-50%);font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;z-index:3;}
  .bstatus.in{color:var(--ink-soft);background:var(--panel);padding:0 4px;border-radius:4px;border:1px solid var(--line);}
  /* 依存矢印(SVGレイヤー) */
  .dep-layer{position:absolute;left:0;top:0;pointer-events:none;z-index:1;overflow:visible;}
  .dep-path{fill:none;stroke:#3F6FB0;stroke-width:1.6;}
  .dep-head{fill:#3F6FB0;}
  /* マイルストーン(PC): 単日のダイヤ+名称 */
  .ms{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;cursor:pointer;z-index:3;white-space:nowrap;}
  .ms .ms-dia{width:14px;height:14px;flex:0 0 14px;background:var(--ms-color,#0E9AA7);border:2px solid #fff;transform:rotate(45deg);box-shadow:0 1px 3px rgba(0,0,0,.25);}
  .ms .ms-label{font-size:12px;font-weight:700;color:var(--ink);background:var(--panel);padding:1px 5px;border:1px solid var(--line-strong);border-radius:5px;}

  .empty{padding:48px 20px;text-align:center;color:var(--ink-soft);}
  .empty strong{color:var(--ink);}

  /* ---- ガント(スマホ・転置: 横=工種 / 縦=日) ---- */
  .sched-mobile{display:none;}
  .m-gantt{overflow-x:auto;}
  .m-head{position:sticky;top:0;z-index:5;display:flex;background:var(--panel);box-shadow:0 1px 0 var(--line);}
  .m-corner{width:70px;min-width:70px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--ink-soft);border-right:1px solid var(--line-strong);}
  .m-hcols{display:flex;flex:1;}
  .m-hcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 2px;font-size:11px;font-weight:700;color:var(--ink);border-right:1px solid var(--line);overflow:hidden;}
  .m-hcol:last-child{border-right:none;}
  .m-hcol .dot{width:10px;height:10px;border-radius:3px;}
  .m-hcol .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  .m-body{display:flex;overflow-y:auto;}
  .m-dateaxis{width:70px;min-width:70px;border-right:1px solid var(--line-strong);}
  .m-day{display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:1px solid var(--line);height:72px;font-size:13px;color:var(--ink-soft);line-height:1.15;}
  .m-day .d{font-size:18px;font-weight:700;color:var(--ink);}
  .m-day.sun .d{color:#C0504D;}
  .m-day.sat .d{color:#3a6ea5;}
  .m-day.sun,.m-day.sat{background:var(--weekend);}
  .m-day.today{background:rgba(217,83,79,.10);}
  .m-day.today .d{color:var(--today);}
  .m-area{position:relative;flex:1;}
  .m-wk{position:absolute;left:0;right:0;background:var(--weekend);pointer-events:none;}
  .m-hline{position:absolute;left:0;right:0;height:1px;background:var(--line);pointer-events:none;}
  .m-hline.wksep{background:var(--line-strong);}
  .m-vline{position:absolute;top:0;bottom:0;width:1px;background:var(--line);pointer-events:none;}
  .m-today{position:absolute;left:0;right:0;height:2px;background:var(--today);z-index:4;pointer-events:none;}
  .m-bar{position:absolute;border:1.5px solid var(--line-strong);border-radius:6px;overflow:hidden;cursor:pointer;color:var(--ink);background:rgba(var(--bar-rgb,120,120,120),.14);z-index:2;}
  .m-bar .m-prog{position:absolute;left:0;right:0;top:0;background:rgba(var(--bar-rgb,120,120,120),.42);border-bottom:1px solid rgba(var(--bar-rgb,120,120,120),.6);}
  .m-bar .m-blabel{position:relative;z-index:1;display:block;padding:3px 5px;font-size:11px;font-weight:700;line-height:1.2;word-break:break-all;}
  /* マイルストーン(スマホ): 単日のダイヤ+名称 */
  .m-ms{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;z-index:3;}
  .m-ms .m-ms-dia{width:13px;height:13px;background:var(--ms-color,#0E9AA7);border:2px solid #fff;transform:rotate(45deg);box-shadow:0 1px 3px rgba(0,0,0,.25);}
  .m-ms .m-ms-label{font-size:10px;font-weight:700;color:var(--ink);background:var(--panel);padding:0 3px;border:1px solid var(--line-strong);border-radius:4px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* 重なりクラスタ(スマホ): 件数バッジ + タップ展開 */
  .m-cluster{
    position:absolute;border:1.5px dashed var(--line-strong);border-radius:6px;cursor:pointer;z-index:2;
    background:rgba(var(--bar-rgb,120,120,120),.14);
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding-top:8px;
    box-shadow:3px 3px 0 -1px rgba(var(--bar-rgb,120,120,120),.18);
  }
  .m-cluster .m-badge{font-size:12px;font-weight:800;color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;padding:1px 8px;}
  .m-cluster .m-badge-sub{font-size:8.5px;font-weight:700;color:var(--ink-soft);}
  /* 展開ポップアップ */
  .cpop{position:fixed;inset:0;background:rgba(20,28,40,.42);display:none;align-items:flex-end;justify-content:center;z-index:50;}
  .cpop.show{display:flex;}
  .cpop-box{width:100%;max-width:520px;max-height:72vh;background:var(--panel);border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(20,28,40,.2);display:flex;flex-direction:column;overflow:hidden;}
  .cpop-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink);font-size:14px;}
  .cpop-close{width:30px;height:30px;border:none;background:var(--bg);border-radius:50%;font-size:18px;line-height:1;color:var(--ink-soft);cursor:pointer;}
  .cpop-list{overflow-y:auto;padding:8px;}
  .cpop-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:6px 0;cursor:pointer;}
  .cpop-item:hover{border-color:var(--c-accent);}
  .cpop-dot{width:5px;height:34px;border-radius:3px;flex:0 0 auto;}
  .cpop-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
  .cpop-name{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cpop-meta{font-size:11.5px;color:var(--ink-soft);}
  .cpop-prog{flex:0 0 auto;text-align:center;font-size:11px;font-weight:700;color:var(--c-accent);line-height:1.25;}

  @media (max-width:520px){
    .sched-pc{display:none;}
    .sched-mobile{display:block;}
    .controls{width:100%;justify-content:flex-end;}
    /* タイトルはPCのみ拡大。スマホは従来サイズに据え置き */
    .eyebrow{font-size:11px;}
    .projname{font-size:22px;}
    /* 工種名: スマホは1列(各行を全幅に) */
    .trade-config{align-items:stretch;gap:8px;}
    .ac-item{flex:0 0 100%;width:100%;}
    /* 工種名入力: フォーカス時のiOS自動ズーム防止に16px。スマホは幅いっぱいに */
    .ac-item input[type="text"]{flex:1 1 auto;width:auto;min-width:0;font-size:16px;}
    /* スマホ時のみ凡例の「全体」を一番左(先頭)に */
    .legendbar .chip-all{order:-1;}
    /* 凡例チップ: 画面幅いっぱいに均等配置(工種が多い時は折り返し。dotと名前は密着) */
    .legendbar{gap:5px;flex-wrap:wrap;}
    .chip{flex:1 1 auto;min-width:0;justify-content:center;gap:3px;padding:5px 6px;font-size:11px;white-space:nowrap;}
    .chip .dot{width:9px;height:9px;flex:0 0 auto;}
    /* 入力フォーカス時の自動ズーム防止: キーボードを出す入力のみ16px(日付/選択はネイティブピッカーで拡大しない) */
    .modal input[type="text"],.modal textarea{font-size:16px;}
    #shareMsg{font-size:16px;}
    /* 日付inputは各列いっぱいに広げる(iOSはappearance解除しないとwidth:100%が効かない)。右端を名称/メモとそろえる */
    .two input[type="date"]{-webkit-appearance:none;appearance:none;width:100%;font-size:14px;padding:8px 6px;min-width:0;}
  }

  /* ---- フッター情報 ---- */
  .foot{margin-top:10px;font-size:12px;color:var(--ink-soft);display:flex;gap:16px;flex-wrap:wrap;align-items:center;}

  /* ---- モーダル ---- */
  .overlay{position:fixed;inset:0;background:rgba(26,34,51,.42);display:none;align-items:center;justify-content:center;z-index:50;padding:16px;}
  .overlay.show{display:flex;}
  .modal{background:var(--panel);border-radius:14px;box-shadow:0 24px 60px rgba(26,34,51,.3);width:min(440px,100%);max-height:92vh;overflow:auto;}
  .modal h2{margin:0;padding:18px 20px;font-size:16px;border-bottom:1px solid var(--line);}
  .mbody{padding:18px 20px;display:flex;flex-direction:column;gap:14px;}
  .mbody .field label{font-size:12px;}
  .mbody input,.mbody select,.mbody textarea{width:100%;}
  .two{display:flex;gap:12px;}
  .two>*{flex:1;min-width:0;}
  .rangeval{font-size:13px;font-weight:700;color:var(--c-accent);}
  .mfoot{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid var(--line);gap:10px;}
  .mfoot .right{display:flex;gap:8px;}
  .btn.danger{color:var(--today);border-color:#E9C3C2;}
  .btn.danger:hover{background:#FBEDED;border-color:var(--today);}
  input[type="range"]{accent-color:var(--c-accent);}
  .hint{font-size:11px;color:var(--ink-soft);}
  .daybtn{align-self:flex-start;margin-top:-4px;}
  .timepick{display:flex;align-items:center;gap:6px;}
  .timepick select{width:auto;flex:1 1 auto;min-width:0;}
  .tcolon{color:var(--ink-soft);font-weight:700;}

  /* ===== 管理画面 (admin.html) ===== */
  .admin-card{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px;
  }
  .admin-card h2{margin:0 0 6px;font-size:16px;}
  .admin-card p{margin:0 0 14px;font-size:13px;color:var(--ink-soft);}
  .admin-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
  .info-line{
    display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft);
    margin-bottom:16px;align-items:center;
  }
  .info-line strong{color:var(--ink);}
  .warn{
    background:#FBEDED;border:1px solid #E9C3C2;color:#9A3B38;
    border-radius:8px;padding:10px 12px;font-size:12px;margin:0 0 14px;
  }
  .msg{font-size:13px;font-weight:700;}
  .msg.ok{color:var(--c4);}
  .msg.ng{color:var(--today);}
  .filename{font-size:12px;color:var(--ink-soft);}
  .range-field{display:flex;flex-direction:column;gap:4px;}
  .range-field label{font-size:12px;font-weight:700;color:var(--ink-soft);}
  .range-field input[type="month"],.range-field input[type="text"],.range-field select{font-size:14px;padding:6px 9px;border:1px solid var(--line-strong);border-radius:7px;background:var(--bg);}
  .range-field input[type="text"]{min-width:0;width:100%;}
  .range-field select{-webkit-appearance:none;appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235B6472%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px;}
  .ac-item.ac-disabled{opacity:.6;}
  .ac-item.ac-disabled input{background:var(--line);color:var(--ink-soft);cursor:not-allowed;}
  /* ボタン個別色 */
  #backBtn{background:#FFF;color:var(--ink);border-color:var(--line-strong);}
  #backBtn:hover{background:#FFF;border-color:var(--ink-soft);}
  #exportBtn{background:#1B5E20;border-color:#1B5E20;color:#fff;}
  #exportBtn:hover{background:#14471A;border-color:#14471A;}
  #importBtn{background:#6C757D;border-color:#6C757D;color:#fff;}
  #importBtn:hover{background:#5A6268;border-color:#5A6268;}
  #importFile{font-size:13px;flex:0 0 auto;width:360px;max-width:100%;}
  #importFile::file-selector-button,#importFile::-webkit-file-upload-button{
    font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;margin-right:10px;
    padding:9px 14px;border:1px solid var(--line-strong);border-radius:8px;background:#FFF;color:var(--ink);
  }
  #importFile::file-selector-button:hover{border-color:var(--ink-soft);}
  @media (max-width:520px){
    .admin-card{padding:16px;}
    .info-line{gap:10px;}
    .range-field input[type="month"],.range-field input[type="text"],.range-field select{font-size:16px;}
  }

  /* ===== 一覧ページ (index.html) ===== */
  .hlist{display:flex;flex-direction:column;gap:10px;}
  .hrow{
    display:grid;grid-template-columns:40px minmax(0,1fr) 220px 150px;align-items:center;gap:14px;
    padding:14px 18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:border-color .12s;
  }
  .hrow:hover{border-color:var(--c-accent);}
  .hno{
    width:28px;height:28px;border-radius:50%;background:var(--bg);border:1px solid var(--line-strong);
    display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--ink-soft);
  }
  .hmain{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .hname{font-size:18px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .hmeta{font-size:12px;color:var(--ink-soft);}
  .hprog{display:flex;align-items:center;gap:10px;}
  .hbar{flex:1 1 auto;height:8px;border-radius:4px;background:var(--line);overflow:hidden;}
  .hfill{display:block;height:100%;background:var(--c-accent);}
  .hpct{width:40px;text-align:right;font-size:13px;font-weight:700;}
  .hsub{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink-soft);white-space:nowrap;}

  /* ===== 管理画面: 邸の管理 ===== */
  .hadmin-list{display:flex;flex-direction:column;gap:12px;margin-bottom:12px;}
  /* 番号 / 施主名 / 建築地 / 開始月 / 期間 / 操作ボタン を横並び(狭ければ折り返す) */
  .hadmin-row{
    display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;
    padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);
  }
  .hadmin-row .hno{flex:0 0 auto;align-self:center;background:var(--panel);}
  .hadmin-row .range-field{flex:1 1 140px;min-width:120px;}       /* 施主名・建築地は伸縮 */
  .hadmin-row .hadmin-addr{flex:1 1 180px;}                        /* 建築地は少し広め */
  .hadmin-row .hadmin-fix{flex:0 0 auto;}                          /* 開始月・期間は内容幅で固定 */
  .hadmin-row .hadmin-fix input[type="month"]{width:150px;max-width:100%;}
  .hadmin-row .hadmin-fix select{width:110px;max-width:100%;}
  .hadmin-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto;}
  .hadmin-actions .btn.small{white-space:nowrap;}

  @media (max-width:520px){
    .hrow{grid-template-columns:32px minmax(0,1fr);gap:8px 10px;padding:12px 14px;}
    .hname{font-size:16px;}
    .hprog,.hsub{grid-column:1 / -1;}
    .hsub{flex-direction:row;gap:14px;}
    /* スマホ: 各入力を全幅で縦に積む */
    .hadmin-row{align-items:stretch;}
    .hadmin-row .range-field,.hadmin-row .hadmin-fix{flex:1 1 100%;min-width:0;}
    .hadmin-row .hadmin-fix input[type="month"],.hadmin-row .hadmin-fix select{width:100%;}
    .hadmin-row .hno{align-self:flex-start;}
    .hadmin-actions{width:100%;}
  }

  /* ===== ログイン画面 (login.html) ===== */
  .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 20px;}
  .login-card{
    width:min(380px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:28px 26px;
  }
  .login-head{margin-bottom:18px;}
  .login-title{font-size:26px;font-weight:800;letter-spacing:.01em;color:var(--ink);}
  .login-lead{font-size:13px;color:var(--ink-soft);margin:0 0 16px;}
  .login-card .field{margin-bottom:16px;}
  .login-card .field label{font-size:12px;margin-bottom:4px;}
  .login-card input[type="password"]{width:100%;padding:12px 14px;font-size:15px;line-height:1.4;border-radius:8px;}
  .login-btn{width:100%;padding:12px;font-size:15px;}
  .login-card .msg{display:block;margin-top:12px;min-height:1.2em;}
  @media (max-width:520px){
    .login-card{padding:24px 20px;}
    /* スマホはフォーカス時の自動ズーム防止に16px。パディングは据え置き */
    .login-card input[type="password"]{font-size:16px;padding:13px 14px;}
  }