@charset "UTF-8";
/* CORE の新しい見た目（段階0：外枠と部品）2026-10-07
   決まり：色は4つ（黒＝文字・灰＝線と説明・緑＝押すボタンと「済」の印・赤＝急ぎ）＋注意だけ黄。アイコンは付けない。文字は3段（24/15/13）。
   body.skin-new の時だけ効く。今の画面の中身（各ページの作り）は段階1から順に作り直す */
:root{
  --c-fg:#111827; --c-sub:#4b5563; --c-mute:#6b7280; --c-line:#e5e7eb; --c-line2:#d1d5db; --c-paper:#f8f9fa; --c-bg:#ffffff;
  --c-g:#10b981; --c-gd:#059669; --c-gdd:#065f46; --c-gl:#ecfdf5;
  --c-warn:#dc2626; --c-warnl:#fef2f2; --c-hi:#f59e0b; --c-hil:#fffbeb; --c-hid:#92400e; --c-off:#9ca3af;
  --side-w:224px; --top-h:48px; --tab-h:56px;
}
body.skin-new{background:var(--c-bg);color:var(--c-fg);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif}
body.skin-new .globalnav{display:none!important}

/* ── PC：左のメニュー ── */
.sn-side{position:fixed;top:0;left:0;bottom:0;width:var(--side-w);background:var(--c-bg);border-right:1px solid var(--c-line);display:flex;flex-direction:column;z-index:200;padding-top:env(safe-area-inset-top,0px)}
.sn-brand{display:block;padding:18px 20px 10px;font-weight:800;font-size:17px;letter-spacing:.08em;color:var(--c-gd);text-decoration:none}
.sn-scroll{flex:1;overflow-y:auto;padding:4px 0 12px;overscroll-behavior:contain}
.sn-cap{font-size:11px;color:var(--c-mute);padding:12px 20px 4px;letter-spacing:.06em}
.sn-a{display:flex;align-items:center;gap:8px;padding:8px 20px;color:var(--c-sub);text-decoration:none;font-size:14px;line-height:1.4;border-left:3px solid transparent}
.sn-a:hover{background:var(--c-paper);color:var(--c-fg)}
.sn-a.on{color:var(--c-fg);font-weight:700;border-left-color:var(--c-fg);background:var(--c-paper)}
.sn-a .sn-n{margin-left:auto}
.sn-hr{height:1px;background:var(--c-line);margin:10px 16px}
.sn-grp{border:0}
.sn-grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:8px 20px;font-size:14px;font-weight:700;color:var(--c-fg)}
.sn-grp>summary::-webkit-details-marker{display:none}
.sn-grp>summary::after{content:"\203A";margin-left:auto;color:var(--c-mute);transition:transform .15s}
.sn-grp[open]>summary::after{transform:rotate(90deg)}
.sn-grp .sn-a{padding-left:32px;font-size:13.5px}
.sn-foot{border-top:1px solid var(--c-line);padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));font-size:13px;color:var(--c-sub)}
.sn-foot b{color:var(--c-fg)}
.sn-foot a{color:var(--c-gd);text-decoration:none;margin-right:12px;white-space:nowrap}
/* 件数：トークの未読＝黒い丸、要フォローの未対応＝赤い数字（緑はメニューに使わない） */
.sn-n{font-size:12px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.sn-n[hidden]{display:none}
.sn-n.k{background:var(--c-fg);color:#fff}
.sn-n.r{color:var(--c-warn);background:none;padding:0}

/* ── スマホ：上のバーと下のタブ ── */
.sn-top,.sn-tabs,.sn-sheet{display:none}
@media(min-width:821px){
  body.skin-new{padding-left:var(--side-w)}
  body.skin-new{--nav-h:0px}
}
@media(max-width:820px){
  .sn-side{display:none}
  body.skin-new{--nav-h:var(--top-h)}
  .sn-top{display:flex;align-items:center;position:sticky;top:0;z-index:200;height:calc(var(--top-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 12px 0;background:var(--c-bg);border-bottom:1px solid var(--c-line)}
  .sn-top .sn-t{flex:1;text-align:center;font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
  .sn-top .sn-l,.sn-top .sn-r{width:64px;font-size:14px;color:var(--c-gd);text-decoration:none;font-weight:700;background:none;border:0;padding:8px 0;cursor:pointer;font-family:inherit}
  .sn-top .sn-l{text-align:left;letter-spacing:.06em}
  .sn-top .sn-r{text-align:right}
  /* よく使う画面のタブは上のバーのすぐ下に置く（2026-10-09 櫻井「絶対に動かないで」）。
     画面の下に置く方式（fixed でも sticky でも）は、iPhoneのホーム画面アプリで「画面の一番下」の位置がずれて途中に浮く。上はずれない */
  .sn-tabs{display:flex;position:sticky;left:0;right:0;top:calc(var(--top-h) + env(safe-area-inset-top,0px));z-index:199;background:var(--c-bg);border-bottom:1px solid var(--c-line);height:var(--tab-h)}
  .sn-tabs a,.sn-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;font-size:12.5px;color:var(--c-sub);text-decoration:none;background:none;border:0;font-family:inherit;cursor:pointer}
  .sn-tabs .on{color:var(--c-fg);font-weight:700}
  body.skin-new.sn-has-tabs{padding-bottom:0;--tab-h:44px;--nav-h:calc(var(--top-h) + var(--tab-h))}
  .sn-sheet{position:fixed;inset:0;z-index:300;background:var(--c-bg);overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 8px) 16px calc(env(safe-area-inset-bottom,0px) + 24px)}
  .sn-sheet.open{display:block}
  .sn-sheet .sn-sh{display:flex;align-items:center;height:44px;border-bottom:1px solid var(--c-line);margin:0 -16px 6px;padding:0 16px}
  .sn-sheet .sn-sh b{flex:1;text-align:center;font-size:16px}
  .sn-sheet .sn-sh button{background:none;border:0;font-size:22px;width:44px;height:44px;cursor:pointer;color:var(--c-fg)}
  .sn-sheet h3{font-size:17px;margin:22px 0 4px;padding-bottom:6px;border-bottom:2px solid var(--c-line)}
  .sn-sheet a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--c-line);color:var(--c-fg);text-decoration:none;font-size:15px}
  .sn-sheet a::after{content:"\203A";margin-left:auto;color:var(--c-mute)}
  .sn-sheet a.on{font-weight:700}
  .sn-sheet .sn-foot2{margin-top:24px;font-size:13px;color:var(--c-sub)}
  .sn-sheet .sn-foot2 a{display:inline;min-height:0;border:0;color:var(--c-gd);margin-right:14px}
  .sn-sheet .sn-foot2 a::after{content:none}
}

/* ===== 段階1：トーク（一覧・会話）2026-10-07 ===== */
/* ボタンは白地・灰の線・黒文字にそろえる（色は意味のある所だけ：赤＝危険、緑＝送信と「済」） */
body.skin-new .sel-btn,body.skin-new .ans-btn{background:#fff!important;border:1px solid var(--c-line2)!important;color:var(--c-fg)!important;border-radius:10px!important;font-weight:600!important;box-shadow:none!important}
body.skin-new .sel-btn:hover,body.skin-new .ans-btn:hover{background:var(--c-paper)!important}
body.skin-new .ce-btn.ans-btn{color:var(--c-warn)!important;border-color:#fecaca!important}
body.skin-new a.ans-btn[style*="background"]{background:var(--c-warnl)!important;border-color:#fecaca!important;color:var(--c-warn)!important}
body.skin-new .tf{background:#fff;border:1px solid var(--c-line2);color:var(--c-sub)}
body.skin-new .tf.active{background:var(--c-fg);border-color:var(--c-fg);color:#fff}
body.skin-new .talk-hint{color:var(--c-mute)}
/* 一覧の札：済＝緑の淡い札、担当＝灰、件数＝黒 */
body.skin-new .st-chip.st-done{background:var(--c-gl)!important;color:var(--c-gdd)!important}
body.skin-new .staff-chip{background:var(--c-paper)!important;color:var(--c-sub)!important}
body.skin-new .tk-bbadge{background:var(--c-fg)!important;color:#fff!important}
body.skin-new .talk-del{background:var(--c-sub)}
/* 会話：相手の吹き出しは薄い灰、こちらは LINE の緑のまま（LINE の画面と同じに見せる） */
body.skin-new .bub.in{background:#f3f4f6!important;border-color:#f3f4f6!important;color:var(--c-fg)!important}
body.skin-new .choice-tag{color:var(--c-mute)!important}
body.skin-new .tpl-send{background:var(--c-fg)}

/* ===== 段階2：今日の状況（/）2026-10-08 ===== */
.hn{max-width:1100px;margin:0 auto;padding:20px 24px 40px}
@media(max-width:820px){.hn{padding:14px 16px 24px}}
.hn-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hn-h h1{font-size:24px;font-weight:800;margin:0}
.hn-h span{font-size:13px;color:var(--c-mute)}
.hn-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:16px 0 8px}
@media(max-width:820px){.hn-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.hn-card{display:block;border:1px solid var(--c-line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--c-fg);background:#fff;min-width:0}
.hn-card:hover{background:var(--c-paper)}
.hn-card>span{display:block;font-size:13px;color:var(--c-sub)}
.hn-card b{display:block;font-size:28px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums;white-space:nowrap}
.hn-card b small{font-size:13px;font-weight:400;color:var(--c-mute);margin-left:2px}
.hn-card em{display:block;font-style:normal;font-size:12.5px;color:var(--c-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hn-nm{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--c-sub);white-space:normal;overflow-wrap:anywhere}
.hn .r{color:var(--c-warn)!important}
.hn h2{font-size:18px;font-weight:800;margin:26px 0 6px;padding-bottom:6px;border-bottom:2px solid var(--c-line)}
.hn h2 span{font-size:13px;font-weight:400;color:var(--c-mute);margin-left:8px}
.hn-empty{color:var(--c-mute);font-size:14px}
.hn-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--c-line);text-decoration:none;color:var(--c-fg)}
.hn-row:hover{background:var(--c-paper)}
.hn-lb{flex:0 0 74px;font-size:12.5px;color:var(--c-sub);white-space:nowrap}
.hn-lb::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--c-off)}
.hn-lb.r::before{background:var(--c-warn)}.hn-lb.y::before{background:var(--c-hi)}
.hn-av{flex:0 0 32px;height:32px;border-radius:50%;background:var(--c-paper);border:1px solid var(--c-line);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--c-sub)}
.hn-tx{flex:1;min-width:0;display:flex;gap:10px;align-items:baseline}
.hn-tx b{font-size:15px;white-space:nowrap;max-width:14em;overflow:hidden;text-overflow:ellipsis}
.hn-tx span{font-size:13.5px;color:var(--c-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hn-t{flex:0 0 auto;font-size:12.5px;color:var(--c-mute)}
.hn-go{flex:0 0 auto;font-size:13px;color:var(--c-gd);font-weight:700}
@media(max-width:820px){
  .hn-row{align-items:flex-start;gap:10px}
  .hn-lb{display:none}
  .hn-tx{flex-direction:column;gap:2px}
  .hn-tx span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .hn-go{display:none}
  .hn-row .hn-tx b::after{content:attr(data-lb)}
}
.hn-ev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
@media(max-width:820px){.hn-ev{grid-template-columns:1fr}}
.hn-evc{display:block;border:1px solid var(--c-line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--c-fg)}
.hn-evc b{font-size:15px}
.hn-evc em{display:block;font-style:normal;font-size:13px;color:var(--c-mute);margin-top:2px}
.hn-on{display:inline-block;font-size:11.5px;font-weight:700;color:var(--c-gdd);background:var(--c-gl);border-radius:4px;padding:0 6px;margin-left:6px;vertical-align:2px}
.hn-lb2{display:none;font-style:normal}
@media(max-width:820px){.hn-t{text-align:right}.hn-lb2{display:block;font-size:12px;font-weight:700;color:var(--c-sub)}.hn-lb2.r{color:var(--c-warn)}}

/* ===== 今日のいいこと（/cheer・櫻井と阿波連だけ）2026-10-08 ===== */
.ch-mind{margin:16px 0 4px;padding:14px 16px;border:1px solid var(--c-line);border-left:4px solid var(--c-g);border-radius:10px;background:#fff}
.ch-mind b{font-size:14px}
.ch-mind p{margin:6px 0 0;font-size:14px;line-height:1.7;color:var(--c-sub)}
.ch-row{cursor:default}
.ch-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ch-chips span{border:1px solid var(--c-line);border-radius:999px;padding:5px 12px;font-size:14px;background:#fff}
.ch-chips em{font-style:normal;font-size:12px;color:var(--c-mute);margin-left:6px}
.hn-cheer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 0;padding:12px 16px;border:1px solid var(--c-line);border-left:4px solid var(--c-g);border-radius:10px;text-decoration:none;color:var(--c-fg);background:#fff}
.hn-cheer span{font-size:13.5px;color:var(--c-sub)}

/* ===== 段階3〜6：残りの画面をまとめて4色へ（2026-10-08）。テンプレは触らず色と並びだけ ===== */
/* 全体向けの操作は畳む（要フォローなど。details.sn-ops はテンプレ側で新しい見た目の時だけ出す） */
body.skin-new details.sn-ops{border:1px solid var(--c-line);border-radius:10px;background:#fff;margin:8px 0 12px}
body.skin-new details.sn-ops>summary{cursor:pointer;list-style:none;padding:10px 14px;font-size:14px;font-weight:700;color:var(--c-sub)}
body.skin-new details.sn-ops>summary::-webkit-details-marker{display:none}
body.skin-new details.sn-ops>summary::after{content:"\25BE";float:right;color:var(--c-mute)}
body.skin-new details.sn-ops[open]>summary::after{content:"\25B4"}
body.skin-new details.sn-ops>:not(summary){margin-left:14px;margin-right:14px}
body.skin-new details.sn-ops[open]{padding-bottom:10px}
body.skin-new .page-head details.sn-ops-r{margin:0 0 0 auto}
body.skin-new .page-head details.sn-ops-r[open] .fu-liverops{display:flex;flex-wrap:wrap;gap:6px;padding-top:4px}
/* 紫・青の色を中立へ */
body.skin-new .fu-btn,body.skin-new a.fu-btn,body.skin-new .fu-eventbtn{background:#fff!important;color:var(--c-fg)!important;border:1px solid var(--c-line)!important}
body.skin-new .fu-more,body.skin-new a.db-link,body.skin-new a.mb-open,body.skin-new summary{color:var(--c-sub)}
body.skin-new a:not([class]){color:var(--c-gd)}
body.skin-new select.tier-select{background:#fff!important;color:var(--c-fg)!important;border:1px solid var(--c-line)!important}
body.skin-new span.trigger,body.skin-new span.cn-tag,body.skin-new span.pp-kind,body.skin-new span.rank-pill,body.skin-new span.tag-badge,body.skin-new span.ar{background:var(--c-paper)!important;color:var(--c-sub)!important;border-color:var(--c-line)!important}
body.skin-new div.alert:not(.alert-danger):not(.alert-error){background:var(--c-paper)!important;color:var(--c-fg)!important;border:1px solid var(--c-line)!important}
body.skin-new div.alert code{background:#fff;color:var(--c-fg)}
body.skin-new .ai-progress,body.skin-new .ai-progress-stage,body.skin-new th.ll-sort,body.skin-new .cm-cbtn{color:var(--c-sub)!important}
body.skin-new .db-n,body.skin-new .db-rank-dia{color:var(--c-fg)!important;background:none!important}
body.skin-new .db-n{font-size:28px!important;white-space:nowrap}
/* 表：見出しは折り返さない。スマホは表ごと横スクロール（ページは横に動かない） */
body.skin-new th{white-space:nowrap}
@media(max-width:820px){
  body.skin-new table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  body.skin-new table.mb-stat td,body.skin-new table.mb-stat th{white-space:nowrap}
}
@media(max-width:820px){
  body.skin-new .db-n{font-size:22px!important}
  body.skin-new table.table td{white-space:nowrap}
  body.skin-new .fu-rankhelp{display:none}
}
/* まとまりのタブ（.sn-sub）。スマホは上のバーの下に横スクロールで、PCはライバー⇔カルテの時だけ本文の上に */
.sn-sub{display:none}
@media(max-width:820px){
  body.skin-new .sn-sub{display:flex;gap:6px;overflow-x:auto;padding:8px 16px;border-bottom:1px solid var(--c-line);background:#fff;scrollbar-width:none;position:sticky;top:calc(var(--top-h) + env(safe-area-inset-top,0px));z-index:30}
  body.skin-new.sn-has-tabs .sn-sub{top:calc(var(--top-h) + env(safe-area-inset-top,0px) + var(--tab-h))}
  body.skin-new .sn-sub::-webkit-scrollbar{display:none}
}
@media(min-width:821px){
  body.skin-new .sn-sub.pc{display:flex;gap:6px;padding:16px 24px 0;max-width:1400px}
}
body.skin-new .sn-sub a.sn-s{flex:0 0 auto;padding:6px 14px;border:1px solid var(--c-line);border-radius:999px;font-size:13.5px;color:var(--c-sub);text-decoration:none;white-space:nowrap;background:#fff}
body.skin-new .sn-sub a.sn-s.on{background:var(--c-fg);border-color:var(--c-fg);color:#fff;font-weight:700}

/* ===== 毎週の数字（/kpi・櫻井と阿波連だけ）2026-10-09 ===== */
.kp-wrap{overflow-x:auto;margin-top:8px;border:1px solid var(--c-line);border-radius:10px;background:#fff}
table.kp{border-collapse:collapse;width:100%;font-size:14px;display:table!important}
table.kp th,table.kp td{padding:9px 12px;border-bottom:1px solid var(--c-line);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.kp th{font-size:12.5px;color:var(--c-mute);font-weight:600;background:var(--c-paper)}
table.kp td:first-child,table.kp th:first-child{text-align:left;position:sticky;left:0;background:#fff;color:var(--c-sub)}
table.kp th:first-child{background:var(--c-paper)}
table.kp tr:last-child td{border-bottom:none}
table.kp tr.kp-key td{font-weight:700;color:var(--c-fg)}
table.kp td:last-child,table.kp th:last-child{background:var(--c-gl)}
table.kp small{font-size:11px;color:var(--c-mute);font-weight:400;margin-left:1px}
.kp-na{color:var(--c-off)}
.kp-note{font-size:12.5px;color:var(--c-mute);margin:6px 2px 0}
/* スマホは上のバー・タブを一切「付いてこさせない」（2026-10-09 櫻井「スライドするとくっついてくる・絶対に動かないで」）。
   ページの一番上に置いたまま、スクロールすると一緒に流れて見えなくなる。メニューへは一番上に戻って開く */
@media(max-width:820px){
  body.skin-new .sn-top,body.skin-new .sn-tabs,body.skin-new .sn-sub{position:static!important;top:auto!important;bottom:auto!important}
}
@media(max-width:820px){
  body.skin-new .fu-bbar,body.skin-new .tk-bbar{position:static!important;bottom:auto!important}
}