:root{
    --bg:#12161c;
    --surface:#181e27;
    --surface-raised:#1f2733;
    --border:#2a323f;
    --border-soft:#232b37;
    --text-primary:#e7eaee;
    --text-muted:#8d96a5;
    --text-faint:#5b6472;
    --accent:#4fb0ae;
    --accent-soft:rgba(79,176,174,0.14);
    --good:#3dd68c;
    --good-soft:rgba(61,214,140,0.12);
    --warn:#e8a33d;
    --warn-soft:rgba(232,163,61,0.12);
    --critical:#e5484d;
    --critical-soft:rgba(229,72,77,0.13);
    --radius:6px;
  }
  body.theme-light{
    --bg:#f3f4f7;
    --surface:#ffffff;
    --surface-raised:#eef0f4;
    --border:#e0e3e9;
    --border-soft:#eaecf1;
    --text-primary:#1c212b;
    --text-muted:#636b7a;
    --text-faint:#9aa2b0;
    --accent:#2e8a88;
    --accent-soft:rgba(46,138,136,0.10);
    --good:#1f9d63;
    --good-soft:rgba(31,157,99,0.10);
    --warn:#b4780f;
    --warn-soft:rgba(180,120,15,0.10);
    --critical:#c5333a;
    --critical-soft:rgba(197,51,58,0.09);
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text-primary);
    font-family:'Inter',sans-serif;
    font-size:14px;
    -webkit-font-smoothing:antialiased;
    transition:background .15s,color .15s;
  }
  h1,h2,h3,.brand,.nav-label{font-family:'Space Grotesk',sans-serif;}
  a{color:inherit;}

  /* surface switcher (demo-only meta control) */
  .demo-switch{
    position:fixed;top:10px;left:50%;transform:translateX(-50%);
    z-index:999;display:flex;gap:2px;background:var(--surface);
    border:1px solid var(--border);border-radius:20px;padding:3px;
    box-shadow:0 4px 16px rgba(0,0,0,0.25);
  }
  .demo-switch button{
    border:none;background:transparent;color:var(--text-muted);
    font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;
    padding:6px 13px;border-radius:16px;cursor:pointer;
  }
  .demo-switch button.active{background:var(--accent);color:#06201f;}
  .demo-label{font-size:9.5px;color:var(--text-faint);text-align:center;margin-top:4px;letter-spacing:.02em;}

  .surface{display:none;min-height:100vh;}
  .surface.active{display:block;}

  .theme-toggle{
    width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
    background:var(--surface-raised);color:var(--text-muted);cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:15px;
  }

  /* ============ LOGIN ============ */
  /* The portal renders the login card on its own, with no #surface-login
   demo wrapper around it — keep this selector unscoped. */
.login-wrap{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:var(--bg);position:relative;
  }
  .login-theme-toggle{position:absolute;top:22px;right:22px;}
  .login-card{
    width:360px;background:var(--surface);border:1px solid var(--border);
    border-radius:10px;padding:36px 32px 30px;
  }
  .login-logo{font-size:19px;font-weight:700;text-align:center;margin-bottom:4px;}
  .login-logo span{color:var(--accent);}
  .login-sub{font-size:12px;color:var(--text-muted);text-align:center;margin-bottom:26px;}
  .login-field{margin-bottom:14px;}
  .login-field label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:6px;font-weight:500;}
  .login-field input{
    width:100%;padding:10px 12px;border-radius:6px;border:1px solid var(--border);
    background:var(--bg);color:var(--text-primary);font-size:13.5px;font-family:'Inter',sans-serif;
  }
  .login-field input:focus{outline:none;border-color:var(--accent);}
  .login-btn{
    width:100%;padding:11px;border-radius:6px;border:none;background:var(--accent);
    color:#06201f;font-weight:700;font-size:13.5px;cursor:pointer;margin-top:6px;font-family:'Inter',sans-serif;
  }
  .login-links{display:flex;justify-content:space-between;margin-top:16px;font-size:11.5px;color:var(--text-faint);}
  .login-links a{color:var(--text-muted);text-decoration:none;}
  .login-divider{border-top:1px solid var(--border-soft);margin:22px 0;}
  .login-role-note{font-size:11px;color:var(--text-faint);text-align:center;line-height:1.7;}

  /* ============ SHARED: sidebar/app (admin) ============ */
  .app{display:flex;min-height:100vh;}
  .sidebar{
    /* 項目名が2行に折り返さない幅にしています。折り返すと縦に伸びて、
       下のほうの項目がスクロールしないと見えなくなります。 */
    width:242px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);
    display:flex;flex-direction:column;padding:20px 14px;overflow-y:auto;
  }
  .brand{font-size:15px;font-weight:700;letter-spacing:0.2px;color:var(--text-primary);padding:4px 8px 22px 8px;}
  .brand span{color:var(--accent);}
  .nav{display:flex;flex-direction:column;gap:2px;}
  .nav-item{
    display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius);
    color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;border:1px solid transparent;
    white-space:nowrap;
  }
  .nav-label{overflow:hidden;text-overflow:ellipsis;}
  /* グループの見出し。項目が19個あるので、どこに何があるか分かるようにします。 */
  .nav-group{
    padding:14px 10px 4px;font-size:10.5px;font-weight:700;letter-spacing:.12em;
    color:var(--text-faint);text-transform:none;
  }
  .nav-group:first-child{padding-top:0;}
  .nav-item:hover{color:var(--text-primary);background:var(--surface-raised);}
  .nav-item.active{color:var(--text-primary);background:var(--accent-soft);border-color:rgba(79,176,174,0.35);}
  .nav-icon{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:0.9;}
  .sidebar-foot{margin-top:auto;padding:10px 8px 4px;font-size:11.5px;color:var(--text-faint);border-top:1px solid var(--border-soft);padding-top:14px;}
  .logout-link{margin-top:10px;color:var(--text-muted);cursor:pointer;font-weight:600;}
  .logout-link:hover{color:var(--critical);}

  .main{flex:1;display:flex;flex-direction:column;min-width:0;}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--border);background:var(--bg);}
  .topbar h1{font-size:18px;font-weight:600;margin:0;}
  .topbar .sub{font-size:12.5px;color:var(--text-muted);margin-top:3px;font-family:'Inter',sans-serif;font-weight:400;}
  .top-actions{display:flex;gap:10px;align-items:center;}
  .pill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:12.5px;font-weight:600;border:1px solid var(--border);color:var(--text-muted);}
  .pill.alert{border-color:rgba(229,72,77,0.4);color:#f0a3a6;background:var(--critical-soft);}
  body.theme-light .pill.alert{color:var(--critical);}
  .pill-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

  .content{padding:24px 28px 40px;overflow-y:auto;}
  .view{display:none;}
  .view.active{display:block;}

  /* Table */
  .table-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);}
  table{width:100%;border-collapse:collapse;}
  thead th{text-align:left;font-size:11.5px;font-weight:600;color:var(--text-faint);letter-spacing:0.3px;padding:11px 16px;border-bottom:1px solid var(--border);background:var(--surface-raised);}
  tbody td{padding:13px 16px;border-bottom:1px solid var(--border-soft);font-size:13.5px;vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr{position:relative;}
  tbody tr.row-critical td:first-child{box-shadow:inset 3px 0 0 var(--critical);}
  tbody tr.row-warn td:first-child{box-shadow:inset 3px 0 0 var(--warn);}
  tbody tr.row-good td:first-child{box-shadow:inset 3px 0 0 var(--good);}

  .client-name{font-weight:600;color:var(--text-primary);}
  .media-chips{display:flex;gap:5px;align-items:center;}
  .chip-icon{width:20px;height:20px;border-radius:5px;flex-shrink:0;}
  /* 媒体管理で登録したロゴは <img> で出ます。縦横比を潰さないようにします。 */
  img.chip-icon{object-fit:contain;background:#fff;}
  .chip-icon.manual{opacity:0.5;}
  .metric{font-variant-numeric:tabular-nums;}
  .metric-delta{font-size:11.5px;margin-left:6px;font-variant-numeric:tabular-nums;}
  .delta-up{color:var(--critical);}
  .delta-down{color:#4C8DFF;}
  body.theme-light .delta-down{color:#1D5FD6;}
  .cell-muted{color:var(--text-faint);}

  /* Good/bad value coloring per user request: bad=red, good=blue */
  .val-blue{color:#4C8DFF;font-weight:600;}
  .val-red{color:var(--critical);font-weight:600;}
  body.theme-light .val-blue{color:#1D5FD6;}
  .kpi-sub{display:block;font-size:10.5px;color:var(--text-faint);font-weight:400;margin-top:1px;}
  .kpi-sub b{color:var(--text-muted);font-weight:600;}

  /* Filter / month bar */
  .filter-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
  .filter-chips{display:flex;gap:6px;flex-wrap:wrap;}
  .filter-chip{
    display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;
    border:1px solid var(--border);color:var(--text-muted);font-size:12px;font-weight:600;
    cursor:pointer;background:var(--surface);
  }
  .filter-chip.active{color:var(--text-primary);background:var(--accent-soft);border-color:rgba(79,176,174,0.4);}
  .filter-chip svg{width:14px;height:14px;border-radius:3px;}
  .month-select{
    display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:20px;
    border:1px solid var(--border);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--text-primary);
    cursor:pointer;
  }
  .month-select .arrow{color:var(--text-faint);font-weight:400;cursor:pointer;padding:0 4px;}

  /* Trend / gauges */
  .trend-panel{
    margin-top:18px;border:1px solid var(--border);border-radius:var(--radius);
    background:var(--surface);padding:20px 22px;display:flex;gap:26px;flex-wrap:wrap;
  }
  .trend-chart-box{flex:1;min-width:280px;}
  .trend-chart-box h3{font-size:13px;margin:0 0 12px;}
  .gauge-col{width:220px;flex-shrink:0;}
  .gauge-col h3{font-size:13px;margin:0 0 12px;}
  .chart-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px;flex-wrap:wrap;}
  .chart-metric-select{
    padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg);
    color:var(--text-primary);font-size:12.5px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;
  }
  .period-pills{display:flex;gap:4px;}
  .period-pill{
    padding:5px 10px;border-radius:14px;border:1px solid var(--border);background:var(--surface);
    color:var(--text-muted);font-size:11.5px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;
  }
  .period-pill.active{background:var(--accent-soft);color:var(--text-primary);border-color:rgba(79,176,174,0.4);}
  .gauge-row{margin-bottom:12px;}
  .gauge-row .gauge-label{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-muted);margin-bottom:5px;}
  .gauge-row .gauge-label b{color:var(--text-primary);font-variant-numeric:tabular-nums;}
  .gauge-track{height:7px;border-radius:4px;background:var(--surface-raised);overflow:hidden;}
  .gauge-fill{height:100%;border-radius:4px;}
  .gauge-fill.g-good{background:#4C8DFF;}
  .gauge-fill.g-warn{background:var(--warn);}
  .gauge-fill.g-bad{background:var(--critical);}

  /* Client/product hierarchy rows */
  .expand-arrow{display:inline-block;width:14px;color:var(--text-faint);cursor:pointer;font-size:11px;transition:transform .12s;}
  .expand-arrow.open{transform:rotate(90deg);}
  .product-row{display:none;background:var(--surface-raised);}
  .product-row.show{display:table-row;}
  .product-indent{padding-left:30px !important;color:var(--text-muted);font-weight:400 !important;}

  /* Editable report cells (spreadsheet-like) */
  .legend-dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:middle;}
  .legend-locked{background:var(--border);}
  .legend-editable{background:var(--accent-soft);border:1px solid var(--accent);}
  .editable-col-head{color:var(--accent);}
  .locked-cell{color:var(--text-muted);}
  .editable-cell{
    background:var(--accent-soft);border:1px dashed rgba(79,176,174,0.5);
    cursor:text;border-radius:3px;
  }
  .editable-cell:focus{outline:none;border:1px solid var(--accent);background:var(--surface);}
  .calc-cell{color:var(--text-faint);font-style:italic;}
  .override-cell{position:relative;cursor:pointer;}
  .override-badge{
    display:inline-block;margin-left:6px;font-size:9.5px;font-weight:700;
    padding:1px 6px;border-radius:10px;background:var(--warn-soft);color:var(--warn);
  }

  .status-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:20px;}
  .status-good{color:var(--good);background:var(--good-soft);}
  .status-warn{color:var(--warn);background:var(--warn-soft);}
  .status-critical{color:var(--critical);background:var(--critical-soft);}

  .src-tag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;border:1px solid var(--border);color:var(--text-faint);margin-left:6px;}
  .src-tag.api{color:var(--accent);border-color:rgba(79,176,174,0.4);}

  /* Client settings view */
  .split{display:flex;gap:20px;align-items:flex-start;}
  .client-list{width:240px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;}
  .client-list-item{padding:12px 15px;font-size:13px;color:var(--text-muted);border-bottom:1px solid var(--border-soft);cursor:pointer;}
  .client-list-item:last-child{border-bottom:none;}
  .client-list-item.selected{color:var(--text-primary);background:var(--surface-raised);border-left:3px solid var(--accent);padding-left:12px;}

  .panel{flex:1;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:22px 26px;}
  .panel h3{font-size:14px;margin:0 0 4px;}
  .sub-h4{font-size:12px;color:var(--text-muted);margin:14px 0 6px;font-weight:600;font-family:'Inter',sans-serif;}
  .panel .desc{font-size:12.5px;color:var(--text-muted);margin-bottom:20px;}
  .field-row{display:flex;gap:16px;margin-bottom:16px;}
  .field{flex:1;}
  .field label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:6px;font-weight:500;}
  .field input,.field select{width:100%;padding:9px 11px;border-radius:5px;border:1px solid var(--border);background:var(--bg);color:var(--text-primary);font-size:13px;font-family:'Inter',sans-serif;}
  .field input:focus,.field select:focus{outline:none;border-color:var(--accent);}
  .btn{padding:9px 18px;border-radius:5px;border:none;font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
  .btn-primary{background:var(--accent);color:#0b1f1e;}
  .btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border);}
  .toggle-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:13px;color:var(--text-muted);}
  .switch{width:36px;height:20px;border-radius:12px;background:var(--border);position:relative;cursor:pointer;flex-shrink:0;}
  .switch.on{background:var(--accent);}
  .switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;}
  .switch.on::after{left:18px;}

  /* API management */
  .api-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
  .api-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:18px 20px;}
  .api-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
  .api-card-head .name{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;}
  .api-card-head .conn-status{font-size:11.5px;font-weight:600;}
  .conn-ok{color:var(--good);}
  .conn-warn{color:var(--warn);}
  .conn-none{color:var(--text-faint);}
  .api-meta{font-size:12px;color:var(--text-muted);line-height:1.9;}

  /* Alert history */
  .alert-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
  .alert-row{background:var(--surface);padding:14px 18px;display:flex;align-items:center;gap:14px;}
  .alert-sev{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .alert-time{font-size:11.5px;color:var(--text-faint);width:120px;flex-shrink:0;font-variant-numeric:tabular-nums;}
  .alert-body{flex:1;font-size:13px;}
  .alert-body b{font-weight:600;}
  .alert-metric-tag{font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--border);color:var(--text-muted);}

  /* Manual input */
  .notice-box{border:1px solid rgba(232,163,61,0.35);background:var(--warn-soft);border-radius:var(--radius);padding:14px 18px;margin-bottom:20px;font-size:13px;color:#f0c98a;display:flex;justify-content:space-between;align-items:center;}
  body.theme-light .notice-box{color:#8a5a08;}
  .notice-box .btn-ghost{border-color:rgba(232,163,61,0.4);color:inherit;}

  /* AI insight placeholder */
  .ai-panel{margin-top:18px;border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface);padding:20px 22px;}
  .ai-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
  .ai-panel-head h3{font-size:13.5px;margin:0;display:flex;align-items:center;gap:8px;}
  .ai-badge{font-size:10.5px;font-weight:700;letter-spacing:0.2px;padding:2px 8px;border-radius:20px;background:rgba(79,176,174,0.14);color:var(--accent);}
  .ai-panel .desc{font-size:12.5px;color:var(--text-muted);margin:0 0 14px;}
  .ai-placeholder-body{display:flex;align-items:center;gap:14px;padding:16px;border-radius:5px;background:var(--bg);color:var(--text-faint);font-size:12.5px;}
  .ai-model-select{font-size:11.5px;color:var(--text-muted);border:1px solid var(--border);border-radius:20px;padding:4px 10px;display:flex;gap:6px;}
  .ai-report-body{font-size:13px;line-height:1.8;color:var(--text-primary);margin-bottom:14px;}
  .ai-report-body p{margin:0 0 10px;}
  .ai-visibility-row{padding:12px 14px;background:var(--bg);border-radius:6px;margin-bottom:16px;}
  .ai-chat{border-top:1px solid var(--border-soft);padding-top:14px;}
  .ai-chat-msg{font-size:12.5px;line-height:1.7;padding:9px 12px;border-radius:6px;margin-bottom:8px;max-width:88%;}
  .ai-chat-msg.staff{background:var(--surface-raised);margin-left:auto;color:var(--text-primary);}
  .ai-chat-msg.ai{background:var(--accent-soft);color:var(--text-primary);}
  .ai-chat-input{display:flex;gap:8px;margin-top:10px;align-items:flex-end;}
  .ai-chat-input input,
  .ai-chat-input textarea{flex:1;padding:9px 12px;border-radius:20px;border:1px solid var(--border);background:var(--bg);color:var(--text-primary);font-size:13px;font-family:'Inter',sans-serif;}
  /* textarea は Shift+Enter の改行用。1行のときは input と同じ見た目にしています。 */
  .ai-chat-input textarea{resize:none;line-height:1.55;min-height:38px;max-height:140px;overflow-y:auto;}
  .ai-chat-input input:focus,
  .ai-chat-input textarea:focus{outline:none;border-color:var(--accent);}
  .ai-chat-input .btn{border-radius:20px;padding:9px 18px;}

  /* Helpdesk chat widget */
  #helpdesk-widget{position:fixed;bottom:22px;right:22px;z-index:900;}
  #helpdesk-toggle{
    width:52px;height:52px;border-radius:50%;border:none;background:var(--accent);
    color:#06201f;font-size:20px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.3);
  }
  #helpdesk-panel{
    display:none;position:absolute;bottom:64px;right:0;width:320px;
    background:var(--surface);border:1px solid var(--border);border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,0.35);overflow:hidden;
  }
  #helpdesk-panel.open{display:block;}
  .helpdesk-head{
    display:flex;justify-content:space-between;align-items:center;
    padding:12px 16px;background:var(--surface-raised);font-weight:600;font-size:13.5px;
    border-bottom:1px solid var(--border);
  }
  .helpdesk-body{padding:14px 16px;max-height:280px;overflow-y:auto;}
  .helpdesk-input{display:flex;gap:6px;padding:12px;border-top:1px solid var(--border-soft);align-items:flex-end;}
  /* 入力欄は textarea です。Shift+Enter で改行できるようにするためで、
     1行のときは input と同じ見た目になるよう高さを揃えています。 */
  .helpdesk-input input,
  .helpdesk-input textarea{
    flex:1;padding:8px 11px;border-radius:16px;border:1px solid var(--border);
    background:var(--bg);color:var(--text-primary);font-size:12.5px;font-family:'Inter',sans-serif;
  }
  .helpdesk-input textarea{
    resize:none;line-height:1.55;min-height:34px;max-height:132px;overflow-y:auto;
  }
  .helpdesk-input input:focus,
  .helpdesk-input textarea:focus{outline:none;border-color:var(--accent);}
  .helpdesk-input .btn{padding:8px 14px;border-radius:16px;font-size:12.5px;}

  /* 回答の下に出る「その画面を開く」ボタン。 */
  .ai-chat-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
  .ai-chat-links a{
    display:inline-flex;align-items:center;gap:5px;text-decoration:none;
    padding:5px 12px;border-radius:14px;font-size:11.5px;font-weight:600;
    background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);
  }
  .ai-chat-links a:hover{background:var(--accent);color:#fff;}

  .fee-table{width:100%;border-collapse:collapse;margin-top:8px;}
  .fee-table th{text-align:left;font-size:11px;color:var(--text-faint);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--border);}
  .fee-table td{padding:7px 8px;font-size:12.5px;border-bottom:1px solid var(--border-soft);}
  .fee-table input{width:90px;padding:5px 8px;font-size:12.5px;}
  .add-row-btn{font-size:12px;color:var(--accent);cursor:pointer;margin-top:8px;display:inline-block;}

  /* Revenue screen */
  .rev-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px;}
  .rev-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:16px 18px;}
  .rev-card .label{font-size:11.5px;color:var(--text-muted);margin-bottom:8px;}
  .rev-card .value{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;}
  .rev-card .value small{font-size:12px;color:var(--text-muted);font-weight:500;}

  /* Creative report */
  .creative-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  #creative-add-panel.show{display:block !important;}
  .creative-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;}
  .creative-thumb{min-height:120px;background:var(--surface-raised);display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:11px;overflow:hidden;}
  .creative-body{padding:13px 15px;}
  .creative-meta{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--text-muted);margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border-soft);flex-wrap:wrap;}
  .creative-meta svg{flex-shrink:0;}
  .meta-field{display:flex;flex-direction:column;line-height:1.3;}
  .meta-field .meta-label{font-size:9.5px;color:var(--text-faint);}
  .meta-field .meta-value{color:var(--text-primary);font-weight:600;font-size:12px;}
  .creative-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
  .creative-head .label{font-weight:600;font-size:13px;}
  .creative-head .creative-type{font-size:10.5px;color:var(--text-faint);border:1px solid var(--border);border-radius:4px;padding:1px 6px;}
  .creative-copy{background:var(--surface-raised);border:1px solid var(--border-soft);border-radius:5px;padding:8px 10px;margin-bottom:8px;}
  .creative-copy .copy-headline{margin:0 0 3px;font-size:12px;font-weight:600;color:var(--text-primary);line-height:1.6;}
  .creative-copy .copy-body{margin:0;font-size:11.5px;color:var(--text-muted);line-height:1.7;}
  .creative-thumb a{display:block;width:100%;height:100%;}
  .creative-thumb img{width:100%;max-height:200px;object-fit:contain;display:block;}
  .creative-stats{font-size:11.5px;color:var(--text-muted);line-height:1.9;}
  .creative-stats b{color:var(--text-primary);font-variant-numeric:tabular-nums;}

  /* ============ CLIENT PORTAL ============ */
  .client-portal-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;border-bottom:1px solid var(--border);background:var(--surface);}
  .cp-tabs{display:flex;gap:4px;padding:0 32px;border-bottom:1px solid var(--border);background:var(--bg);}
  .cp-tab{padding:13px 6px;margin-right:22px;font-size:13.5px;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;font-weight:500;}
  .cp-tab.active{color:var(--text-primary);border-color:var(--accent);}
  .cp-content{padding:26px 32px 50px;max-width:980px;}
  .cp-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
  .cp-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:15px 16px;}
  .cp-card .label{font-size:11px;color:var(--text-muted);margin-bottom:7px;}
  .cp-card .value{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;}
  .cp-view{display:none;}
  .cp-view.active{display:block;}


/* ============ PORTAL-ONLY ADDITIONS (not in the mock, needed live) ============ */
.login-form{margin:0;}
.login-error{
	background:var(--critical-soft);border:1px solid rgba(229,72,77,0.45);
	color:#f0a3a6;border-radius:6px;padding:10px 12px;font-size:12.5px;
	line-height:1.6;margin-bottom:16px;
}
body.theme-light .login-error{color:var(--critical);}
.login-links{align-items:center;}

/* WP renders #wpadminbar for logged-in staff previewing the portal; keep the
   fixed login card from hiding underneath it. */
body.admin-bar .login-wrap{min-height:calc(100vh - 32px);}
@media screen and (max-width:782px){
	body.admin-bar .login-wrap{min-height:calc(100vh - 46px);}
}

.cp-notice{
	border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);
	padding:28px;text-align:center;color:var(--text-muted);font-size:13.5px;line-height:1.9;
}
.cp-empty{padding:40px 0;text-align:center;color:var(--text-faint);font-size:13px;}

/* 媒体アイコン + 名称のセット（管理画面・ポータル共通） */
.media-chip{display:inline-flex;align-items:center;gap:7px;}
.media-chip .chip-icon{width:18px;height:18px;flex-shrink:0;}
.filter-chip .chip-icon{width:14px;height:14px;border-radius:3px;}

/* ============ ポータル: 見出し・フィルタ・日次テーブル ============ */
.cp-client-name{font-size:12.5px;color:var(--text-muted);}
.cp-context{
	display:flex;align-items:center;gap:8px;flex-wrap:wrap;
	font-size:13.5px;color:var(--text-muted);margin-bottom:14px;
}
.cp-context-client{font-weight:600;color:var(--text-primary);font-size:15px;}
.cp-context-product{font-weight:600;color:var(--text-primary);}
.cp-context-sep{color:var(--text-faint);}
.cp-context-period{margin-left:auto;font-size:12px;color:var(--text-faint);font-variant-numeric:tabular-nums;}

.cp-filter-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.cp-range{
	display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;
	border:1px solid var(--border);background:var(--surface);
	/* 日付入力2つ＋ボタンが1行に入らない幅だと、折り返せないぶん
	   ボタンだけが潰れて「期／間／で／見／る」と縦に並びます。 */
	flex-wrap:wrap;
}
.cp-range .btn{flex-shrink:0;white-space:nowrap;}
.cp-range input[type="date"]{
	background:var(--bg);border:1px solid var(--border);border-radius:5px;
	color:var(--text-primary);font-size:12px;padding:4px 8px;font-family:'Inter',sans-serif;
}
.cp-range input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(0.7);}
body.theme-light .cp-range input[type="date"]::-webkit-calendar-picker-indicator{filter:none;}
.cp-range-sep{color:var(--text-faint);font-size:12px;}
.cp-range .btn{padding:5px 12px;font-size:12px;border-radius:14px;}

.cp-table-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 10px;}
.cp-table-head h3{margin:0;font-size:14px;}
.cp-col-toggle{position:relative;}
.cp-col-toggle .btn{padding:6px 14px;font-size:12px;border-radius:16px;}
.cp-col-menu{
	position:absolute;right:0;top:36px;z-index:50;width:210px;max-height:340px;overflow-y:auto;
	background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 12px;
	box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.cp-col-menu label{display:block;font-size:12.5px;color:var(--text-muted);padding:5px 0;cursor:pointer;}
.cp-col-menu input{margin-right:7px;}

.cp-scroll{overflow-x:auto;}
.cp-daily th,.cp-daily td{white-space:nowrap;}
.cp-daily td.metric,.cp-daily th{font-variant-numeric:tabular-nums;}
.cp-sum-row td{background:var(--surface-raised);font-weight:600;color:var(--text-primary);}
.cp-daily .calc-cell{color:var(--text-faint);font-style:italic;}
.cp-note{font-size:11.5px;color:var(--text-faint);line-height:1.8;margin:10px 0 0;}

#cp-ai-messages{max-height:260px;overflow-y:auto;margin-bottom:6px;}
#cp-ai-messages:empty{display:none;}

/* ============ 折れ線グラフ ============ */
.brepo-chart{
	border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
	padding:18px 20px;margin-top:18px;
}
.brepo-chart-title{font-size:13px;margin:8px 0 10px;}
.brepo-chart-svg{width:100%;height:auto;display:block;}
.brepo-chart-grid{stroke:var(--border-soft);stroke-width:1;}
.brepo-chart-line{stroke:#4C8DFF;}
.brepo-chart-dot{fill:#4C8DFF;}
.brepo-chart-axis{fill:var(--text-muted);font-size:11px;font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;}
.brepo-chart-note{fill:var(--text-faint);font-size:12px;font-family:'Inter',sans-serif;}
.brepo-chart-last{fill:var(--text-primary);font-size:12px;font-weight:700;font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;}
.brepo-chart-empty{color:var(--text-faint);font-size:12.5px;margin:0;}
body.theme-light .brepo-chart-line{stroke:#1D5FD6;}
body.theme-light .brepo-chart-dot{fill:#1D5FD6;}

/* ============ ポータル: クッションファネル枠・タブ・幅 ============ */
.cp-content{max-width:1560px;margin:0 auto;}
.cp-funnel{
	border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
	padding:16px 20px;margin-bottom:18px;
}
.cp-funnel h3{font-size:13px;margin:0 0 12px;display:flex;align-items:center;gap:8px;}
.cp-funnel-badge{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--accent-soft);color:var(--accent);}
.cp-funnel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px;}
.cp-funnel-grid .cp-card{background:var(--bg);}
.cp-funnel-note{font-size:11.5px;color:var(--text-faint);margin:10px 0 0;line-height:1.8;}
.cp-tabs a{
	padding:13px 6px;margin-right:22px;font-size:13.5px;color:var(--text-muted);
	border-bottom:2px solid transparent;font-weight:500;text-decoration:none;
}
.cp-tabs a.active{color:var(--text-primary);border-color:var(--accent);}

/* ==================================================================
 * キャンペーン階層（クライアントポータル）
 *
 * 同じ媒体の中に直接遷移とクッションが並走するため、行やシートの
 * 見た目だけでどちらのファネルかが分かるようにしています。
 * 色は必ずデザイントークン（--accent / --warn 系）を使うこと。
 * 生の16進を書くと body.theme-light のときに反転しません。
 * ================================================================== */
.cp-pill{
	display:inline-block;padding:1px 8px;border-radius:999px;
	font-size:10px;font-weight:700;letter-spacing:.03em;white-space:nowrap;
	vertical-align:middle;line-height:1.7;
}
.cp-pill.is-direct{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);}
.cp-pill.is-cushion{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);}

/* キャンペーン／ファネルの絞り込みバー */
.cp-campaign-bar{
	display:flex;align-items:center;flex-wrap:wrap;gap:10px;
	margin:0 0 16px;padding:10px 12px;
	border:1px solid var(--border);border-radius:10px;
	/* チップ自体が --surface なので、バーは一段持ち上げて重ならないようにする */
	background:var(--surface-raised);color:var(--text-primary);
}
.cp-campaign-bar .cp-campaign-label{
	font-size:11px;font-weight:700;letter-spacing:.06em;
	color:var(--text-muted);white-space:nowrap;
}
.cp-campaign-bar .filter-chips{flex:1 1 auto;}
.cp-campaign-bar .cp-funnel-filter{flex:0 0 auto;margin-left:auto;}
.cp-campaign-bar .filter-chip{display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
/* 選択中のチップは背景が淡いので、枠と文字で必ず見えるようにする */
.cp-campaign-bar .filter-chip.active{
	color:var(--text-primary);background:var(--accent-soft);border-color:var(--accent);
}

.cp-context-campaign{font-weight:600;color:var(--text-primary);}
.cp-note{font-size:11px;color:var(--text-muted);line-height:1.6;}

/* ------------------------------------------------------------------
 * 日次シート（媒体 × キャンペーンで1枚）
 * ---------------------------------------------------------------- */
.cp-sheet{
	margin:0 0 24px;border:1px solid var(--border);border-radius:10px;
	overflow:hidden;background:var(--surface);
}
.cp-sheet.is-cushion{border-color:var(--warn);}
.cp-sheet.is-total{border-style:dashed;}

.cp-sheet-head{
	display:flex;align-items:center;flex-wrap:wrap;gap:10px;
	padding:12px 14px;border-bottom:1px solid var(--border);
	background:var(--surface-raised);color:var(--text-primary);
}
.cp-sheet.is-cushion .cp-sheet-head{background:var(--warn-soft);}
.cp-sheet-head h4{margin:0;font-size:14px;font-weight:700;letter-spacing:.01em;color:var(--text-primary);}
.cp-sheet-flow{font-size:11px;color:var(--text-muted);white-space:nowrap;}
.cp-sheet-focus{margin-left:auto;font-size:11px;white-space:nowrap;color:var(--accent);}

/* シート見出し直下のクッション要約 */
.cp-sheet-funnel{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));
	gap:1px;background:var(--border);border-bottom:1px solid var(--border);
}
.cp-sheet-funnel > div{
	padding:10px 14px;background:var(--surface);
	display:flex;flex-direction:column;gap:4px;
}
.cp-sheet-funnel .label{font-size:10px;letter-spacing:.06em;color:var(--text-muted);}
.cp-sheet-funnel .value{font-size:17px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;}

/* クッション専用の列は、直接遷移の指標と地続きに見えないよう区切る */
.cp-daily th.cp-funnel-col,
.cp-daily td.cp-funnel-col{background:var(--warn-soft);}
.cp-daily th.cp-funnel-col:first-of-type,
.cp-daily td.cp-funnel-col:first-of-type{border-left:1px solid var(--warn);}

/* 計算列は中身が短く、見出しだけ縦に折り返されて読めなくなるので折り返さない */
.cp-daily th{white-space:nowrap;}

/* シートごとの目標 vs 実績 */
.cp-sheet-targets{
	display:flex;flex-wrap:wrap;gap:8px;
	padding:10px 14px;border-bottom:1px solid var(--border);
	background:var(--surface);
}
.cp-target{
	display:flex;align-items:baseline;gap:8px;
	padding:5px 11px;border-radius:20px;
	border:1px solid var(--border);font-size:11.5px;
	font-variant-numeric:tabular-nums;
}
.cp-target .label{color:var(--text-muted);font-weight:600;}
.cp-target .target{color:var(--text-primary);font-weight:700;}
.cp-target .actual{color:var(--text-faint);}
.cp-target.is-hit{border-color:var(--good);background:var(--good-soft);}
.cp-target.is-hit .actual{color:var(--good);font-weight:700;}
.cp-target.is-miss{border-color:var(--critical);background:var(--critical-soft);}
.cp-target.is-miss .actual{color:var(--critical);font-weight:700;}

/* シート内のトレンドグラフ */
.cp-sheet-chart{
	padding:12px 14px 4px;
	border-bottom:1px solid var(--border);
	background:var(--surface);
}

/* ==================================================================
 * 今日のインサイト
 * ================================================================== */
/* 今日の要点。毎朝の同期のあとに作ったものを読んでいるだけで、
   画面を開くたびにAIを呼んではいません。ポータルで最初に目に入る場所なので、
   罫線ではなく面（アクセント色の薄い地）で他と区別しています。 */
.cp-brief{
	margin:0 0 18px;padding:16px 18px;
	border:1px solid var(--accent);border-radius:var(--radius);
	background:var(--accent-soft);
}
.cp-brief-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.cp-brief-head h3{margin:0;font-size:13px;color:var(--accent);letter-spacing:.04em;}
.cp-brief-date{font-size:11px;color:var(--text-muted);}
.cp-brief-headline{
	margin:8px 0 0;font-size:16px;font-weight:700;line-height:1.6;color:var(--text-primary);
}
.cp-brief-body{margin:8px 0 0;font-size:13px;line-height:1.85;color:var(--text-primary);}
.cp-brief-tasks{
	margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);
}
.cp-brief-tasks-label{
	font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--accent);margin-bottom:6px;
}
.cp-brief-tasks ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;}
.cp-brief-tasks li{
	position:relative;padding-left:22px;font-size:13px;line-height:1.7;color:var(--text-primary);
}
.cp-brief-tasks li::before{
	content:"";position:absolute;left:2px;top:6px;
	width:11px;height:11px;border-radius:3px;border:1.5px solid var(--accent);
}
.cp-brief .cp-note{margin:12px 0 0;}

.cp-signals{
	margin:0 0 20px;padding:14px 16px;
	border:1px solid var(--border);border-radius:var(--radius);
	background:var(--surface);
}
.cp-signals h3{margin:0 0 10px;font-size:13px;letter-spacing:.02em;color:var(--text-primary);}
.cp-signal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.cp-signal{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.65;color:var(--text-primary);}
.cp-signal .dot{
	width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px;
}
.cp-signal.is-red .dot{background:var(--critical);}
.cp-signal.is-yellow .dot{background:var(--warn);}
.cp-signal.is-green .dot{background:var(--good);}
.cp-signal-reco{
	margin:12px 0 6px;padding:10px 12px;
	border-left:3px solid var(--accent);border-radius:4px;
	background:var(--accent-soft);
	font-size:13px;line-height:1.7;color:var(--text-primary);
}
.cp-signal-reco strong{color:var(--accent);margin-right:6px;}

/* ==================================================================
 * スマホ表示
 *
 * PCは「分析する場所」、スマホは「状況を把握する場所」という役割分けです。
 * 単に幅を詰めるのではなく、並び順を
 *   ① 主要KPI → ② 今日のインサイト → ③ 補助KPI → ④ 絞り込み → ⑤ 詳細
 * に組み替えます。スマホを開いて10秒で「今月大丈夫か」「何をすべきか」が
 * 分かることを優先し、グラフや表はその後ろに送ります。
 * ================================================================== */
@media screen and (max-width:768px){
	.cp-view{display:flex;flex-direction:column;}
	.cp-context{order:-6;}
	.cp-summary-primary{order:-5;}
	.cp-signals{order:-4;}
	.cp-summary-secondary{order:-3;}
	.filter-bar{order:-2;}
	.cp-campaign-bar{order:-1;}
	/* それ以外（グラフ・表・シート・AIチャット）は既定の order:0 で後ろに並びます */

	.cp-summary{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px;}
	.cp-card{padding:11px 12px;}
	.cp-card .label{font-size:10.5px;line-height:1.4;}
	.cp-card .value{font-size:19px;}
	.cp-card .kpi-sub{font-size:10.5px;}

	/* 補助KPIは畳んで、必要なときだけ見てもらう */
	.cp-summary-secondary{
		padding-top:10px;border-top:1px solid var(--border-soft);
	}

	.cp-context{font-size:12.5px;gap:6px;}
	.cp-context-client{font-size:14px;}
	.cp-context-period{margin-left:0;width:100%;}

	/* 絞り込みは横スクロールにして高さを食わせない */
	.filter-bar{flex-direction:column;align-items:stretch;gap:10px;}
	.filter-chips{
		flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;
		-webkit-overflow-scrolling:touch;scrollbar-width:none;
	}
	.filter-chips::-webkit-scrollbar{display:none;}
	.filter-chip{flex-shrink:0;}
	.cp-filter-right{flex-direction:column;align-items:stretch;}
	.cp-filter-right .month-select,
	.cp-filter-right .cp-range{justify-content:space-between;}
	.cp-campaign-bar{flex-direction:column;align-items:stretch;}
	.cp-campaign-bar .cp-funnel-filter{margin-left:0;}

	/* グラフは占有面積を抑える */
	.brepo-chart{max-height:220px;overflow:hidden;}
	.cp-sheet-chart{padding:8px 10px 2px;}

	/* シート見出しと表 */
	.cp-sheet-head{padding:10px 12px;gap:7px;}
	.cp-sheet-head h4{font-size:13px;width:100%;}
	.cp-sheet-focus{margin-left:0;}
	.cp-sheet-funnel{grid-template-columns:repeat(2,1fr);}
	.cp-sheet-targets{gap:6px;padding:8px 12px;}
	.cp-daily{font-size:11.5px;}
	.cp-daily th,.cp-daily td{padding:6px 8px;}

	.cp-funnel-grid{grid-template-columns:repeat(2,1fr);}
	.ai-chat-input{flex-direction:column;align-items:stretch;gap:8px;}

	/* キャンペーン名の列。長い名前が10行に折り返して、1行の高さが230pxを
	   超えていました。2行で切って、全文はセルの title（長押し・ホバー）で読めます。 */
	.cp-daily td.cp-sticky-col > a{
		display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
		overflow:hidden;
	}

	/* 指で押す前提の画面なので、文字リンクにも押せる高さを持たせます。 */
	.cp-sheet-focus,
	.cp-arrow-nav a,
	.month-select a.arrow{min-height:30px;display:inline-flex;align-items:center;}

	/* AIのボタンが画面の一番下のボタンに重なるので、その高さぶん余白を足します。 */
	.cp-view{padding-bottom:76px;}
}

@media screen and (max-width:420px){
	.cp-summary{grid-template-columns:repeat(2,1fr);}
	.cp-card .value{font-size:17px;}
	.cp-signal{font-size:12.5px;}
}

/* ==================================================================
 * クリエイティブ分析の相対評価
 * 「好調 / 要見直し」は同じキャンペーン内での比較なので、
 * 断定的に見えすぎないよう控えめなバッジにしています。
 * ================================================================== */
.creative-card.is-win{border-color:var(--good);}
.creative-card.is-lose{border-color:var(--critical);}

.creative-verdict{
	display:flex;align-items:center;flex-wrap:wrap;gap:8px;
	padding:9px 12px;border-bottom:1px solid var(--border-soft);
	font-size:11px;
}
.verdict-badge{
	padding:2px 9px;border-radius:999px;font-weight:700;letter-spacing:.02em;
	border:1px solid var(--border);color:var(--text-muted);background:var(--surface);
}
.verdict-badge.is-win{border-color:var(--good);color:var(--good);background:var(--good-soft);}
.verdict-badge.is-lose{border-color:var(--critical);color:var(--critical);background:var(--critical-soft);}
.verdict-badge.is-insufficient{opacity:.75;}
.verdict-edge{color:var(--text-muted);font-variant-numeric:tabular-nums;}
.verdict-fatigue{
	margin-left:auto;padding:2px 9px;border-radius:999px;
	border:1px solid var(--warn);color:var(--warn);background:var(--warn-soft);
	font-weight:700;white-space:nowrap;
}

/* AIチャットの質問サジェスト */
.cp-ai-suggestions{
	display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 4px;
}
.cp-ai-suggestion{
	padding:5px 11px;border-radius:20px;cursor:pointer;
	border:1px solid var(--border);background:var(--surface);
	color:var(--text-muted);font-size:11.5px;font-weight:600;
	transition:border-color .12s,color .12s;
}
.cp-ai-suggestion:hover{border-color:var(--accent);color:var(--accent);}

@media screen and (max-width:768px){
	.creative-verdict{padding:8px 10px;gap:6px;}
	.verdict-fatigue{margin-left:0;}
	.cp-ai-suggestions{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
	.cp-ai-suggestions::-webkit-scrollbar{display:none;}
	.cp-ai-suggestion{flex-shrink:0;}
}

/* ロゴ（クライアントポータル）。切り替えの考え方は管理画面と同じです。 */
.buzzrepo-logo {
	display: block;
	width: auto;
	max-width: 100%;
}
.buzzrepo-logo-light { display: none; }
body.theme-light .buzzrepo-logo-dark { display: none; }
body.theme-light .buzzrepo-logo-light { display: block; }

.client-portal-nav .brand {
	display: flex;
	align-items: center;
}

/* ライトテーマではアクセント色の上の文字を白にします。 */
body.theme-light .btn-primary,
body.theme-light .demo-switch button.active {
	color: #fff;
}

/* カートCVの入力欄。触れる場所だとひと目で分かるように枠を出します。 */
.cp-cart-cv {
	display: inline-block;
	min-width: 42px;
	padding: 2px 6px;
	border: 1px dashed var(--border);
	border-radius: 4px;
	outline: none;
}
.cp-cart-cv:focus {
	border-style: solid;
	border-color: var(--accent);
	background: var(--accent-soft);
}
.cp-cart-cv.is-saved { border-color: var(--good); background: var(--good-soft); }
.cp-cart-cv.is-error { border-color: var(--critical); background: var(--critical-soft); }

/* スタッフ用プレビューであることを画面上部で明示します。
   クライアントに見せている画面と取り違えないようにするためです。 */
.cp-preview-bar {
	background: var(--warn-soft);
	color: var(--warn);
	border-bottom: 1px solid var(--warn);
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}
.cp-preview-bar span {
	font-weight: 400;
	opacity: .8;
	margin-left: 10px;
}
.cp-preview-bar a {
	margin-left: 14px;
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}
/* スマホでは3行に伸びてポータル本体を140pxほど押し下げます。
   「今は誰の画面を見ているか」が伝われば足りるので、説明文は畳みます。 */
@media screen and (max-width: 768px) {
	.cp-preview-bar { padding: 6px 12px; font-size: 12px; line-height: 1.5; }
	.cp-preview-bar span { display: none; }
	.cp-preview-bar a { margin-left: 10px; min-height: 28px; display: inline-flex; align-items: center; }
}

/* ヘッダーのロゴ位置。文字ロゴ前提の行送りが残っていて上に寄っていたので、
   ナビの高さの中央に揃えます。 */
.client-portal-nav .brand {
	display: flex;
	align-items: center;
	/* 管理画面のサイドバー用 .brand が padding:4px 8px 22px を持っていて、
	   その下パディングぶんロゴが上にずれていました。ここで打ち消します。 */
	padding: 0;
	line-height: 1;
	min-width: 0;
}
/* 高さだけを指定します。display は書きません。
   ここで display:block を書くと、クラス数が多いぶんテーマ切り替えの
   非表示指定（body.theme-light .buzzrepo-logo-dark）に勝ってしまい、
   明暗2枚のロゴが重なって表示されます。 */
.client-portal-nav .brand .buzzrepo-logo {
	height: 26px;
}

/* アカウント設定（パスワード変更）。ヘッダーの下に開くパネルです。 */
.cp-account-panel {
	position: fixed;
	top: 64px;
	right: 24px;
	z-index: 60;
	width: 300px;
	max-width: calc(100vw - 32px);
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 16px;
	box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.cp-account-panel h4 {
	margin: 0 0 4px;
	font-size: 14px;
}
.cp-account-fields {
	display: grid;
	gap: 10px;
	margin: 12px 0;
}
.cp-account-fields label {
	display: grid;
	gap: 4px;
	font-size: 12.5px;
	color: var(--text-muted);
}
.cp-account-fields input {
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text-primary);
	border-radius: 6px;
	padding: 7px 9px;
	font-size: 13px;
	width: 100%;
}
.cp-account-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.cp-pw-result { font-size: 12px; }
.cp-pw-result.is-ok { color: var(--good); }
.cp-pw-result.is-error { color: var(--critical); }

/* 月のプルダウン。前後ボタンと同じ枠の見た目に合わせます。 */
.month-select select {
	background: var(--surface-raised);
	border: 1px solid var(--border);
	color: var(--text-primary);
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 13px;
}

/* 運用担当からの申し送り（日次表の備考列）。数字の列とは役割が違うので
   左寄せ・折り返しありにして、種別だけタグで目立たせます。 */
.cp-note-cell {
	text-align: left;
	white-space: normal;
	min-width: 220px;
	max-width: 340px;
	font-size: 12px;
	line-height: 1.6;
}
.cp-note-tag {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 10px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 11px;
	font-weight: 700;
	margin-right: 6px;
	white-space: nowrap;
}
.cp-note-text { color: var(--text-muted); }

/* ライトテーマでアクセント色の上に乗る文字は白に。個別に色を指定している
   ボタンもここで揃えます（詳細度で負けると黒いままになります）。 */
body.theme-light .btn.btn-primary,
body.theme-light .ai-chat-input .btn,
body.theme-light .helpdesk-input .btn,
body.theme-light #helpdesk-toggle {
	color: #fff;
}

/* KNOWLEDGE AI の呼び出しボタン（クライアントポータル・右下固定）。
   押すとダッシュボード内のAIチャットまで運んで入力欄にカーソルを置きます。
   チャットの実体を2つ持たないための作りです。 */
#cp-knowledge-ai {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 900;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 18px 0 13px;
	border: none;
	border-radius: 23px;
	background: var(--accent);
	color: #06201f;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
#cp-knowledge-ai:hover { opacity: .92; }
#cp-knowledge-ai .buzzrepo-bot-icon { width: 24px; height: 24px; flex-shrink: 0; display: block; }
body.theme-light #cp-knowledge-ai { color: #fff; }

/* 飛んだ先が分からないと「押したのに何も起きない」に見えるので、
   AIパネルを一瞬だけ光らせます。 */
.ai-panel.is-highlighted {
	box-shadow: 0 0 0 2px var(--accent);
	transition: box-shadow .25s ease;
}

@media (max-width: 640px) {
	#cp-knowledge-ai { padding: 0; width: 52px; height: 52px; justify-content: center; }
	#cp-knowledge-ai .cp-knowledge-ai-label { display: none; }
}

/* ポータルで開いたレポート本文。印刷前提の白地をそのまま出します。 */
.cp-report-paper {
	background: #fff;
	color: #1a1d21;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 24px 26px;
	margin-top: 18px;
	overflow-x: auto;
}

/* ポータルのフッター。 */
.cp-footer {
	padding: 26px 22px 30px;
	text-align: center;
	font-size: 11.5px;
	color: var(--text-faint, var(--text-muted));
	letter-spacing: .02em;
}

/* 規約類へのリンク。ログイン前の画面にも出ます。 */
.cp-footer-links {
	margin-bottom: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	justify-content: center;
}
.cp-footer-links a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	opacity: .75;
}
.cp-footer-links a:hover { opacity: 1; }
.cp-footer-links span { opacity: .4; }

/* AIの回答（ポータル）。段落・箇条書き・太字を組んで読めるようにします。 */
.ai-chat-msg { max-width: 100%; line-height: 1.85; }
.ai-chat-msg.staff { max-width: 85%; white-space: pre-wrap; }
.ai-chat-msg p { margin: 0 0 .7em; }
.ai-chat-msg p:last-child { margin-bottom: 0; }
.ai-chat-msg ol, .ai-chat-msg ul { margin: .3em 0 .8em; padding-left: 1.4em; }
.ai-chat-msg li { margin-bottom: .35em; }
.ai-chat-msg li:last-child { margin-bottom: 0; }
.ai-chat-msg strong { font-weight: 700; color: var(--text-primary); }
#cp-ai-messages { max-height: 420px; overflow-y: auto; }

/* レポート（スライド）の表示 */
.cp-report-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 10px;}
.cp-report-actions .cp-btn{
  background:var(--accent);border:1px solid var(--accent);color:#06201f;
  border-radius:6px;padding:7px 16px;font-size:13px;cursor:pointer;font-weight:600;
}
.cp-report-actions .cp-note{font-size:11.5px;color:var(--text-muted);}
.cp-report-paper.buzzrepo-deck-viewport{background:transparent;border:none;padding:0;}
@media print{
  /* 印刷はレポートだけ。ポータルの枠・ナビ・チャットは出しません。
     ここを落とさないと、PDFの1枚目がタブとフィルタだけになります。 */
  .client-portal-nav, .cp-header, .cp-topbar, .cp-tabs, .cp-preview-bar, .cp-account-panel,
  .cp-filter, .filter-bar, .cp-footer, .cp-report-actions,
  .cp-report-list, .cp-knowledge-ai, #cp-knowledge-ai,
  .cp-context, .cp-brief{display:none !important;}
  body.buzzrepo-portal-body{background:#fff !important;}
  .cp-content, .cp-shell, .cp-main{margin:0 !important;padding:0 !important;max-width:none !important;}
  .cp-report-paper{border:none !important;padding:0 !important;margin:0 !important;background:#fff !important;}
}


/* ==================================================================
 * クライアントポータルのスマホ表示の直し
 *
 * 見出しが1文字ずつ折り返す、ボタンが縦に潰れる、表がどこまでも横に
 * 伸びる、といった不具合はすべて「flexの子が縮み放題」なのが原因です。
 * 縮ませない要素に flex-shrink:0 と nowrap を、伸びる要素に上限を置きます。
 * ================================================================== */

/* 見出し行。h3 と説明と操作ボタンが1行に同居しているので、
   幅が足りないときは折り返させます（h3を縮めない）。 */
.cp-table-head{flex-wrap:wrap;gap:4px 12px;}
.cp-table-head h3{flex:0 0 auto;white-space:nowrap;}
.cp-table-head .cp-note{flex:1 1 200px;min-width:0;}
.cp-table-head .cp-col-toggle{flex:0 0 auto;margin-left:auto;}
.cp-col-toggle .btn{white-space:nowrap;}

/* 曜日の色。土曜は青、日曜は赤（カレンダーと同じ）。 */
.cp-daily td.cp-dow-sat{color:#2563eb;font-weight:700;}
.cp-daily td.cp-dow-sun{color:#dc2626;font-weight:700;}
body.theme-light .cp-daily td.cp-dow-sat{color:#1d4ed8;}
body.theme-light .cp-daily td.cp-dow-sun{color:#b91c1c;}

/* キャンペーン名の列。名前が長いと列だけで700pxを超えて、
   表全体がスクロールしても読めない形になっていました。 */
.cp-daily .cp-sticky-col{max-width:280px;}
.cp-daily td.cp-sticky-col{white-space:normal;word-break:break-word;}
/* 1列目は max-width で止めていますが、下の .cp-demo-table が
   white-space:nowrap を後から上書きするため、キーワードのように長い1行は
   セルの外に流れ出し、隣の「判定」バッジの上に重なって両方読めなくなります
   （実際にポータルのキーワードレポートでそうなっていました）。
   折り返さない列は、はみ出させずに「…」で切ります。全文は title 属性に入れます。 */
.cp-daily td.cp-sticky-col{overflow:hidden;text-overflow:ellipsis;}

/* 横スクロールする帯（キャンペーンのチップ）。
   iOSでは touch-action を指定しないと、横のスワイプが
   ページのスクロールや戻る操作に取られてスライドできません。 */
.cp-campaign-bar .filter-chips,
.filter-bar .filter-chips,
.cp-ai-suggestions{
	touch-action:pan-x;
	overscroll-behavior-x:contain;
	-webkit-overflow-scrolling:touch;
}

@media screen and (max-width:768px){
	/* 見出し行はブロックに崩す */
	.cp-table-head{align-items:flex-start;}
	.cp-table-head h3{flex:1 1 auto;font-size:14px;}
	.cp-table-head .cp-note{flex:1 1 100%;order:3;font-size:11.5px;line-height:1.6;}
	.cp-table-head .cp-col-toggle{order:2;}
	.cp-col-toggle .btn{padding:6px 12px;}
	.cp-col-menu{right:0;left:auto;max-height:52vh;overflow-y:auto;}

	/* キャンペーンのチップ。長い名前で1枚が画面幅を超えないようにします。 */
	.cp-campaign-bar .filter-chips{
		flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;
		scrollbar-width:none;
	}
	.cp-campaign-bar .filter-chips::-webkit-scrollbar{display:none;}
	.cp-campaign-bar .filter-chip{
		flex:0 0 auto;max-width:62vw;
		overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
	}
	.cp-campaign-label{font-size:11px;color:var(--text-muted);}

	/* キャンペーン詳細（シート）の見出し。名前が大きすぎて2〜3行になっていました。 */
	.cp-sheet-head h4{font-size:13px;line-height:1.5;word-break:break-word;width:100%;}
	.cp-sheet-head .media-chip{font-size:11.5px;}
	.cp-sheet-head .cp-pill,
	.cp-sheet-head .cp-sheet-flow{font-size:11px;}

	/* 日次表。名前の列に上限を置き、残りは横スクロールで見てもらいます。 */
	.cp-daily .cp-sticky-col{max-width:170px;}
	.cp-daily{font-size:11.5px;}

	/* AIの入力欄。プレースホルダが2行あるのに高さが1行ぶんで、
	   文字が切れていました。 */
	.ai-chat-input textarea,
	.ai-chat-input input[type="text"]{
		min-height:64px;font-size:16px;line-height:1.6;
	}
	.cp-ai-panel .cp-note{font-size:11px;line-height:1.7;}
}

/* ==================================================================
 * グラフ。スマホでも軸の数字が読める大きさにします。
 *
 * 以前は viewBox を 720×180 に固定していたので、画面幅350pxでは
 * 全体が半分以下に縮み、11pxの軸ラベルが5px相当になっていました。
 * JS側で viewBox を実際の表示幅に合わせるようにしたので、
 * ここで指定する px がそのままの大きさで出ます。
 * ================================================================== */
.brepo-chart-svg{display:block;width:100%;height:auto;}
.brepo-chart-axis{fill:var(--text-muted);font-size:11px;font-variant-numeric:tabular-nums;}
.brepo-chart-note{fill:var(--text-muted);font-size:12px;}
@media screen and (max-width:768px){
	.brepo-chart{max-height:none;overflow:visible;}
	.brepo-chart-axis{font-size:11px;}
	.brepo-chart-title{font-size:12.5px;}
}


/* ==================================================================
 * デモグラレポート（クライアントポータル）
 * ================================================================== */
.cp-demo-block{margin-bottom:26px;}
.cp-demo-table td.cp-sticky-col{white-space:nowrap;font-weight:600;}
.cp-demo-share{display:flex;align-items:center;gap:8px;justify-content:flex-end;}
.cp-demo-bar{
	display:inline-block;width:74px;height:6px;border-radius:999px;
	background:var(--border-soft);overflow:hidden;flex-shrink:0;
}
.cp-demo-bar i{display:block;height:100%;background:var(--accent);border-radius:999px;}
.cp-demo-share-value{font-variant-numeric:tabular-nums;}
.cp-demo-vs{
	font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;white-space:nowrap;
	border:1px solid var(--border);color:var(--text-muted);background:var(--surface);
}
.cp-demo-vs.is-up{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.cp-demo-vs.is-down{border-color:var(--border);color:var(--text-muted);}

/* タブが4つになるとスマホで折り返します。横スクロールにして1行に収めます。 */
.cp-tabs{
	flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
	touch-action:pan-x;-webkit-overflow-scrolling:touch;
}
.cp-tabs::-webkit-scrollbar{display:none;}
.cp-tabs a{flex:0 0 auto;white-space:nowrap;}

@media screen and (max-width:768px){
	.cp-tabs{padding-left:16px;padding-right:16px;}
	.cp-tabs a{font-size:12.5px;padding-left:10px;padding-right:10px;}
	.cp-demo-bar{width:46px;}
	.cp-demo-share{gap:5px;}
}

/* AI入力欄の操作説明。プレースホルダから外して下に置いています。 */
.cp-ai-hint{margin:6px 2px 0;font-size:11px;color:var(--text-faint);}
@media screen and (max-width:768px){
	.ai-chat-input textarea{border-radius:14px;padding:11px 14px;}
	.ai-chat-input .btn{padding:11px 18px;}
}


/* ==================================================================
 * クライアントポータル：横スクロールを出さない
 *
 * 折り返せない要素（長いキャンペーン名、チップの並び）が flex の子に
 * いると、親が中身の幅に引っ張られてページ全体が横に伸びます。
 * 実機では「勝手に横スクロールする」という形で出ます。
 *
 * 対処は2段構えです。
 *   1. flex の子に min-width:0 / max-width:100% を入れて、縮めるようにする
 *   2. それでも溢れたときのために、ページ自体は横に動かないようにする
 * 表やチップの帯は自前のスクロール枠を持っているので、そちらは今まで通り動きます。
 * ================================================================== */
html, body.buzzrepo-portal-body { max-width: 100%; overflow-x: hidden; }

.cp-content, .cp-view, .cp-campaign-bar, .cp-table-head, .cp-sheet-head, .filter-bar {
	max-width: 100%;
	min-width: 0;
}
.cp-campaign-bar > * { min-width: 0; max-width: 100%; }
.cp-campaign-bar .filter-chips,
.filter-bar .filter-chips { width: 100%; min-width: 0; max-width: 100%; }

/* 長いキャンペーン名。折り返せる場所が無い名前でも枠から出ないようにします。 */
.cp-table-head h3,
.cp-sheet-head h4,
.cp-creative-group h3 {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* スタッフ用プレビューのときだけ出るWordPressの管理バー。
   狭い画面では中身が横にはみ出すので、ここで止めます。 */
#wpadminbar { overflow-x: hidden; }

@media screen and (max-width:768px){
	/* ヘッダー。ロゴとクライアント名が重なっていました。
	   ロゴを少し小さくし、名前は1行で収まらなければ「…」で切ります。 */
	.client-portal-nav{ padding:12px 16px; gap:10px; }
	.client-portal-nav .brand{ flex:0 0 auto; }
	.client-portal-nav .brand .buzzrepo-logo{ height:20px; }
	.client-portal-nav .top-actions{ min-width:0; gap:6px; flex:1 1 auto; justify-content:flex-end; }
	.cp-client-name{
		min-width:0; flex:0 1 auto;
		font-size:11.5px; line-height:1.3;
		white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	}

	/* グラフの枠。中の余白が大きく、切り替えのプルダウンだけ右にずれて
	   見えていたので、外の本文と左端が近くなるように詰めます。 */
	.brepo-chart{ padding:14px 12px; }
	.cp-sheet-chart{ padding:8px 8px 2px; }
	.chart-controls{ margin-bottom:8px; }
	.brepo-chart-title{ margin:6px 0 8px; }
}

/* 媒体案の紙。ダークテーマの中でも白地のまま出します。
   刷ったときの見え方と揃えるためです。 */
.cp-proposal-paper{
	background:#fff;border:1px solid var(--border);border-radius:var(--radius);
	padding:4px;overflow-x:auto;margin-bottom:24px;
}
@media screen and (max-width:768px){
	.cp-proposal-paper .brp-page{padding:16px 14px;}
	.cp-proposal-paper .brp-head h1{font-size:16px;}
}

/* 日次の申し送り。表の中は印だけ、中身は押したときに出します。 */
.cp-note-mark{
	border:1px solid var(--border);background:var(--surface);
	border-radius:6px;padding:2px 7px;font-size:13px;line-height:1.4;cursor:pointer;
}
.cp-note-mark:hover{border-color:var(--accent);}
.cp-note-cell{white-space:nowrap;}

.cp-note-overlay{
	position:fixed;inset:0;z-index:1200;background:rgba(4,10,18,.62);
	display:flex;align-items:center;justify-content:center;padding:20px;
}
.cp-note-pop{
	background:var(--surface-raised);border:1px solid var(--border);border-radius:12px;
	padding:18px 20px;max-width:420px;width:100%;
	box-shadow:0 18px 48px rgba(0,0,0,.45);
}
.cp-note-pop-head{font-size:13px;font-weight:700;color:var(--text-primary);}
.cp-note-pop-tag{
	display:inline-block;margin-top:8px;padding:2px 10px;border-radius:999px;
	background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);
	font-size:11px;font-weight:700;
}
.cp-note-pop-body{
	margin:12px 0 16px;font-size:13px;line-height:1.95;color:var(--text-primary);
	white-space:pre-wrap;
}
.cp-note-pop-close{
	border:1px solid var(--border);background:var(--surface);color:var(--text-muted);
	border-radius:8px;padding:7px 16px;font-size:12.5px;font-weight:600;cursor:pointer;
}
.cp-note-pop-close:hover{border-color:var(--accent);color:var(--accent);}

/* 媒体案の承認 */
.cp-proposal-approve{
	border:1px solid var(--accent);background:var(--accent-soft);
	border-radius:var(--radius);padding:14px 16px;margin:0 0 14px;
}
.cp-proposal-approve-head{font-size:13.5px;font-weight:700;color:var(--text-primary);}
.cp-proposal-approve .cp-note{margin:6px 0 10px;}
.cp-proposal-approve textarea{
	width:100%;border:1px solid var(--border);border-radius:8px;
	background:var(--bg);color:var(--text-primary);
	padding:9px 11px;font-size:13px;line-height:1.6;resize:vertical;
	font-family:inherit;margin-bottom:10px;
}
.cp-proposal-approved{
	border:1px solid var(--good);background:var(--good-soft);
	border-radius:var(--radius);padding:11px 16px;margin:0 0 14px;
	font-size:13px;color:var(--text-primary);
}
.cp-proposal-approved span{margin-left:10px;color:var(--text-muted);font-size:12px;}
.cp-notice-good{border-color:var(--good);color:var(--good);}
@media print{
	.cp-proposal-approve,.cp-report-actions{display:none !important;}
}

/* 承認ボタン。.cp-report-actions の外にも置くので、単独でも形が出るようにします。 */
.cp-btn{
	background:var(--surface);border:1px solid var(--border);color:var(--text-primary);
	border-radius:6px;padding:7px 16px;font-size:13px;cursor:pointer;font-weight:600;
	font-family:inherit;
}
.cp-btn-primary{
	background:var(--accent);border-color:var(--accent);color:#06201f;
	padding:9px 22px;font-size:13.5px;
}
.cp-btn-primary:hover{filter:brightness(1.06);}

/* 2段階認証の案内。エラーではないので赤にしません。
   赤にすると「失敗した」と読めて、コードを入れる前にやり直されます。 */
.login-notice{
	background:var(--accent-soft);border:1px solid var(--accent);color:var(--text-primary);
	border-radius:8px;padding:10px 12px;font-size:12.5px;line-height:1.8;margin-bottom:14px;
}

/* 媒体案の承認まわり。承認と修正依頼を並べます。 */
.cp-proposal-approve-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.cp-proposal-approve-foot{margin:8px 0 0;}

/* 修正依頼を受け付けている状態。承認とは色を変えます
   （同じ色にすると、承認済みと見分けが付きません）。 */
.cp-proposal-pending{
	border:1px solid var(--warn);background:var(--warn-soft);
	border-radius:8px;padding:10px 12px;margin-bottom:12px;font-size:12.5px;
	color:var(--text-primary);
}
.cp-proposal-pending span{margin-left:10px;color:var(--text-muted);font-size:11.5px;}
.cp-proposal-pending-note{
	margin-top:6px;padding-left:9px;border-left:2px solid var(--warn);
	line-height:1.8;white-space:pre-wrap;
}
.cp-notice-warn{border-color:var(--warn);color:var(--warn);}

/* ==================================================================
 * ライトテーマ：アクセント色のボタンの文字を白に
 *
 * ライトでは --accent が濃い緑（#2e8a88）になります。その上に
 * ダークテーマ用の濃い文字（#06201f）を載せると、緑地に黒で
 * 沈んで読めません。ここに挙げているのは「背景が var(--accent)」の
 * ボタンだけです。増やしたときはここにも足してください。
 * ================================================================== */
body.theme-light .login-btn,
body.theme-light .cp-btn-primary,
body.theme-light .cp-report-actions .cp-btn,
body.theme-light .cp-proposal-approve-actions .cp-btn-primary {
	color: #fff;
}

/* ==================================================================
 * ログイン画面：どちらの入口かを明示する
 *
 * ルートドメイン＝クライアント用、wp-admin＝スタッフ用に分けました。
 * ロゴも配色も同じままだと見分けが付かないので、種別の帯を出します。
 * ================================================================== */
.login-kind {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	border-radius: 999px;
	padding: 5px 12px;
	margin: 0 auto 22px;
	width: fit-content;
	max-width: 100%;
}
.login-kind.is-client {
	color: var(--accent);
	background: var(--accent-soft);
	border: 1px solid var(--accent);
}
.login-sub + .login-kind { margin-top: 12px; }
.login-links-center { justify-content: center; gap: 18px; }
.login-staff-link { color: var(--text-muted); text-decoration: underline; }
.login-staff-link:hover { color: var(--accent); }

/* 2段階認証の2枚目はコード欄しか無いので、カードが寸詰まりに見えます。
   少しだけ余白を足して、1枚目と同じ重心に見えるようにしています。 */
.login-wrap.is-code-step .login-field { margin-bottom: 18px; }
.login-wrap.is-code-step #buzzrepo-2fa {
	font-size: 22px;
	letter-spacing: .32em;
	text-align: center;
	font-variant-numeric: tabular-nums;
	padding: 12px;
}

/* ==================================================================
 * 注記の読みやすさ（とくにスマホ）
 *
 * 日本語は単語の切れ目が無いので、長い注記をそのまま流すと
 * 「想定CPA」が「想定」と「CPA」に割れるような折り返しが起きます。
 * word-break:auto-phrase は文節で折り返してくれる指定で、
 * 対応していないブラウザでは何も起きません（従来どおり）。
 * text-wrap:pretty は最終行だけが極端に短くなるのを抑えます。
 * ================================================================== */
.cp-note,
.cp-notice,
.cp-brief-body,
.cp-brief .cp-note,
.brp-foot-note,
.login-role-note {
	text-wrap: pretty;
	line-break: strict;
}
@supports (word-break: auto-phrase) {
	.cp-note,
	.cp-notice,
	.cp-brief-body,
	.brp-foot-note,
	.login-role-note {
		word-break: auto-phrase;
	}
}

/* 文ごとに行を分ける注記。HTMLの改行がそのまま半角スペースになって
   文の途中に妙な空きが出る、という崩れ方も同時に消えます。 */
.cp-note-lines > span,
.brp-foot-note > span { display: block; }
.cp-note-lines > span + span,
.brp-foot-note > span + span { margin-top: 3px; }

/* ==================================================================
 * クリエイティブレポート：スマホ
 *
 * 3列固定のままスマホで見ると、1枚あたり100px前後になって
 * 本文が縦1文字ずつに割れます（実機でそうなっていました）。
 * 幅で列数を落とします。
 * ================================================================== */
@media screen and (max-width: 1180px) {
	.creative-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 768px) {
	.creative-grid { grid-template-columns: 1fr; gap: 12px; }
	.creative-card { min-width: 0; }
	.creative-body { padding: 12px 13px; }
	.creative-thumb img { max-height: 260px; }

	/* 「標準」バッジ・同CP平均比・疲弊の兆候は1行に並べます */
	.creative-verdict { gap: 8px 10px; }
	.verdict-edge { white-space: nowrap; }

	/* 見出しと種別バッジ。種別が縦書きのように潰れていました */
	.creative-head { gap: 8px; align-items: flex-start; }
	.creative-head .label { min-width: 0; overflow-wrap: anywhere; }
	.creative-head .creative-type { flex: 0 0 auto; white-space: nowrap; }

	/* 本文コピー。1行1文字になるのを止めます */
	.creative-copy { min-width: 0; }
	.creative-copy .copy-headline,
	.creative-copy .copy-body { overflow-wrap: anywhere; }

	/* 数値。スラッシュ区切りが途中で割れないように */
	.creative-stats { font-size: 12px; line-height: 2; }
	.creative-stats b { white-space: nowrap; }

	.creative-meta { gap: 8px 12px; }
	.meta-field { min-width: 0; }
	.meta-field .meta-value { overflow-wrap: anywhere; }

	.cp-creative-group + .cp-creative-group { margin-top: 18px; }
}

/* ==================================================================
 * 表の並び替え
 *
 * デモグラのように「構成比の多い順」で出しているものでも、
 * CPAの良い順・CVの多い順で見たい場面があります。見出しを押すと
 * 並び替わるようにしました。並び替えはブラウザの中だけで行うので、
 * 読み込み直しは起きません。
 * ================================================================== */
table.is-sortable th[data-sort] {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	position: relative;
	padding-right: 18px;
}
table.is-sortable th[data-sort]:hover { color: var(--accent); }
table.is-sortable th[data-sort]::after {
	content: '⇅';
	position: absolute;
	right: 5px;
	font-size: 9px;
	opacity: .35;
	line-height: inherit;
}
table.is-sortable th[data-sort][aria-sort="ascending"]::after { content: '↑'; opacity: 1; color: var(--accent); }
table.is-sortable th[data-sort][aria-sort="descending"]::after { content: '↓'; opacity: 1; color: var(--accent); }
.cp-sort-hint { font-size: 11px; color: var(--text-faint); margin: 6px 0 0; }

/* 承認済みの媒体案を開いている行。一覧のどれを見ているか分かるようにします。 */
.cp-daily tr.is-open > td { background: var(--accent-soft); }

/* ==================================================================
 * 媒体案（商材ごと）
 *
 * 承認は商材ごとにもらいます。1枚にまとめると
 * 「Aは良いがBは直したい」が言えないためです。
 * ただし聞かれるのは合計なので、上に合計を1行出しています。
 * ================================================================== */
.cp-proposal-sum {
	border: 1px solid var(--accent);
	background: var(--accent-soft);
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 14px;
}
.cp-proposal-sum-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-primary);
}
.cp-proposal-sum-head strong {
	font-size: 20px;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
.cp-proposal-sum .cp-note { margin-top: 4px; }

.cp-proposal-card {
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 14px;
	margin-bottom: 18px;
	background: var(--surface);
}
.cp-proposal-card-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	padding-bottom: 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--border-soft);
}
.cp-proposal-card-head h4 { margin: 0; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.cp-proposal-card-month { font-size: 12px; color: var(--text-muted); }
.cp-proposal-card-budget {
	margin-left: auto;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
@media screen and (max-width: 768px) {
	.cp-proposal-card { padding: 12px 11px; }
	.cp-proposal-card-budget { margin-left: 0; }
	.cp-proposal-sum-head strong { font-size: 18px; }
}

/* ==================================================================
 * 長いキャンペーン名
 *
 * 媒体が付ける名前は「SOCIAL PLANT WORKS® | OFFICIAL STORE - Autopilot
 * Advantage+ Sales (Shopify Managed) 94196007198 ja」のように長く、
 * そのまま出すと見出しが画面幅いっぱいに伸びて、右側のバッジが
 * 押し出されます。2行で打ち切り、全文はホバーで出します。
 * ================================================================== */
.cp-table-head-long { align-items: flex-start; flex-wrap: wrap; }
/*
 * 見出しそのものは flex の子なので、-webkit-box は効きません
 * （flexの子は display が block 系に強制され、行数の打ち切りが無視されます）。
 * 中に span を1枚入れて、そちらで打ち切ります。
 * white-space の上書きも要ります。既定の .cp-table-head h3 が nowrap で、
 * そのままだと折り返さずに枠から出ていきます。
 */
.cp-table-head-long h3 {
	flex: 1 1 240px;
	min-width: 0;
	white-space: normal;
	line-height: 1.5;
}
.cp-table-head-long h3 > span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.cp-table-head-long .cp-pill { flex: 0 0 auto; }
/* 説明文は縮ませます。flex:0 0 auto のままだと、文の自然な幅
   （440px前後）を保とうとして、スマホでは画面の外へ出ていました。 */
.cp-table-head-long .cp-note { flex: 1 1 200px; min-width: 0; }

/* クリエイティブ名。カードの中でも同じ扱いにします。 */
.creative-head .label {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
	overflow-wrap: anywhere;
	line-height: 1.45;
}
.creative-copy .copy-headline {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media screen and (max-width: 768px) {
	.cp-table-head-long h3 { flex: 1 1 100%; font-size: 14px; }
	.cp-table-head-long .cp-note { flex: 1 1 100%; font-size: 11px; line-height: 1.6; }
}

/* 開いているレポート・媒体案を閉じる帯。上下の両方に置きます。
   中身が長いので、下まで読んだあと一覧まで戻るのは手間です。 */
.cp-proposal-open-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 16px 0 10px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: 8px;
	background: var(--surface);
	font-size: 12.5px;
	color: var(--text-muted);
}
.cp-proposal-open-bar > span { min-width: 0; flex: 1 1 180px; }
.cp-proposal-open-bar.is-foot { justify-content: center; margin-top: 14px; }
/* リンクをボタンに見せているので、下線は消します。
   付いたままだと「文字だけのリンク」と「ボタン」が混ざって見えます。 */
.cp-proposal-open-bar a.cp-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
@media screen and (max-width: 768px) {
	/* 説明文とボタンを同じ行に並べると、ボタンが1つずつ別の行に落ちて
	   高さだけ取ります。説明を1行、ボタンを1行にします。 */
	.cp-proposal-open-bar > span { flex: 1 1 100%; }
	.cp-proposal-open-bar .cp-btn { flex: 1 1 auto; }
}
@media print { .cp-proposal-open-bar { display: none !important; } }

/* ============ 掛け合わせ（年齢×性別など）の行列 ============
   数字を縦に並べるより、縦横に置いたほうが「どの組み合わせが効いているか」は
   はるかに速く読めます。セルの濃さ＝広告費の大きさ、色＝CPAの良し悪し。
   濃さを付けているのは、良いCPAでも消化が1万円なら本命ではないからです。 */
.cp-demo-matrix td.cp-sticky-col{white-space:nowrap;font-weight:600;}
.cp-demo-matrix th.metric,.cp-demo-matrix td.metric{text-align:right;white-space:nowrap;}
.cp-matrix-cell{position:relative;background:
	linear-gradient(0deg,rgba(79,176,174,calc(var(--heat,0) * .22)),rgba(79,176,174,calc(var(--heat,0) * .22)));}
.cp-matrix-main{display:block;font-variant-numeric:tabular-nums;font-weight:600;}
.cp-matrix-sub{display:block;font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.cp-matrix-empty{color:var(--text-faint);}
.cp-matrix-cell.is-good .cp-matrix-main{color:var(--good);}
.cp-matrix-cell.is-bad .cp-matrix-main{color:var(--critical);}

@media (max-width:768px){
	/* スマホでは行見出しと1列目が同時に見えることが大事なので、
	   本体の文字だけ落として、列は削りません。横スクロールで追えます。 */
	.cp-demo-matrix .cp-matrix-main{font-size:13px;}
	.cp-demo-matrix .cp-matrix-sub{font-size:10px;}
	.cp-demo-matrix th,.cp-demo-matrix td{padding:6px 8px;}
}
.cp-demo-matrix .cp-matrix-total{background:var(--surface-raised);}
.cp-demo-matrix .cp-matrix-total .cp-matrix-main{font-weight:700;}

/* 長い一覧の「残りN件を表示」。表の外に置いています（表の中に入れると、
   見出しを押して並び替えたときに行と一緒に動いてしまうため）。 */
.cp-demo-more{
	display:inline-flex;align-items:center;gap:6px;
	margin:10px 0 0;padding:6px 14px;
	border:1px solid var(--border);border-radius:999px;
	background:var(--surface);color:var(--text-muted);
	font-size:12px;cursor:pointer;
}
.cp-demo-more:hover{border-color:var(--accent);color:var(--accent);}

/* この期間に実施した対策。数字だけ見せて「で、何をしてくれているのか」と
   思われるのが一番まずいので、対応の記録を並べます。 */
.cp-ops-notes{margin:22px 0 6px;padding:16px 18px;border:1px solid var(--border);border-radius:12px;background:var(--surface);}
.cp-ops-notes ul{list-style:none;margin:10px 0 0;padding:0;}
.cp-ops-notes li{display:flex;gap:12px;padding:7px 0;border-top:1px solid var(--border);font-size:13px;line-height:1.7;}
.cp-ops-notes li:first-child{border-top:0;}
.cp-ops-date{flex:0 0 auto;color:var(--text-muted);font-variant-numeric:tabular-nums;}
@media (max-width:640px){.cp-ops-notes li{flex-direction:column;gap:2px;}}

/* ==================================================================
 * ポータル キーワードレポート（キャンペーン別）
 *
 * 表だけを出しても「で、どうすればいいのか」が残らないので、
 * 表の上に一段、言葉で読み方を置いています。
 * 判定はそのキャンペーンの中での相対評価です。
 * ================================================================== */
.cp-chip-sep{flex:0 0 auto;width:1px;align-self:stretch;margin:2px 4px;background:var(--border);}

.cp-kw-group{
	border:1px solid var(--border-soft);border-radius:12px;
	padding:4px 14px 14px;background:var(--surface);
}
.cp-kw-group .cp-table-head{margin-top:12px;}

.cp-kw-read{
	margin:0 0 12px;padding:11px 13px;border-radius:9px;
	background:var(--surface-raised);border:1px solid var(--border-soft);
}
.cp-kw-read p{
	margin:0;font-size:12.5px;line-height:1.9;color:var(--text);
}
.cp-kw-read p + p{margin-top:7px;padding-top:7px;border-top:1px solid var(--border-soft);}
.cp-kw-read .verdict-badge{margin-right:6px;font-size:11px;white-space:nowrap;}

@media screen and (max-width: 760px) {
	.cp-kw-group{padding:2px 10px 12px;}
	.cp-kw-read p{font-size:12px;line-height:1.85;}
}

/* ============================================================
   公開ページ（BUZZ REPO について／利用規約／プライバシーポリシー）。
   テーマではなくポータルと同じ見た目で出します。
   ============================================================ */

.br-public-nav { position: sticky; top: 0; z-index: 20; }
.br-public-brand { text-decoration: none; display: inline-flex; align-items: center; }
.br-public-nav .top-actions { display: flex; align-items: center; gap: 10px; }
.br-public-navlink {
	font-size: 12.5px;
	color: var(--text-muted);
	text-decoration: none;
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: 999px;
	white-space: nowrap;
}
.br-public-navlink:hover { color: var(--text-primary); border-color: var(--accent); }

.br-public { max-width: 880px; margin: 0 auto; padding: 52px 24px 24px; }

.br-public-doc {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 44px 48px 48px;
}

.br-public-title {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.35;
	margin: 0 0 26px;
	padding-bottom: 20px;
	border-bottom: 2px solid var(--accent);
	color: var(--text-primary);
}

.br-public-doc > p,
.br-public-doc li { color: var(--text-muted); font-size: 14px; line-height: 1.95; }
.br-public-doc > p { margin: 0 0 16px; }

/* 冒頭の一段落だけ、少しだけ大きく出します。 */
.br-public-doc > p:first-of-type { font-size: 14.5px; color: var(--text-primary); }

.br-public-doc h2 {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 40px 0 14px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--border);
	letter-spacing: .01em;
}
.br-public-doc h3 {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 26px 0 10px;
}

.br-public-doc ul,
.br-public-doc ol { margin: 0 0 16px; padding-left: 1.4em; }
.br-public-doc li { margin-bottom: 9px; }
.br-public-doc li::marker { color: var(--text-faint); }
.br-public-doc ol > li { padding-left: 4px; }
.br-public-doc li > ul { margin-top: 9px; }

.br-public-doc a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.br-public-doc a:hover { border-bottom-color: var(--accent); }

.br-public-doc strong { color: var(--text-primary); font-weight: 600; }

.br-public-doc code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px;
	background: var(--surface-raised);
	border: 1px solid var(--border-soft);
	border-radius: 4px;
	padding: 1px 6px;
	color: var(--text-primary);
	word-break: break-all;
}

/* 事業者情報。連絡先が本文に埋もれないように囲みます。 */
.br-public-doc p.br-doc-meta {
	background: var(--surface-raised);
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	padding: 18px 20px;
	line-height: 2;
	color: var(--text-primary);
	font-size: 13.5px;
}

/* 最後の「制定日」。本文と同じ大きさだと締まらないので、一段落として扱います。 */
.br-public-doc p.br-doc-date {
	margin-top: 32px;
	padding-top: 18px;
	border-top: 1px solid var(--border-soft);
	font-size: 12.5px;
	color: var(--text-faint);
	margin-bottom: 0;
}

.br-public-more {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 28px 0 8px;
}
.br-public-more a {
	font-size: 12.5px;
	color: var(--text-muted);
	text-decoration: none;
	padding: 8px 16px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
}
.br-public-more a:hover { color: var(--text-primary); border-color: var(--accent); }
.br-public-more span { display: none; }

.br-public-footer {
	margin-top: 40px;
	border-top: 1px solid var(--border);
	background: var(--surface);
	padding: 34px 24px 30px;
}
.br-public-footer-inner {
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	align-items: flex-start;
	justify-content: space-between;
}
.br-public-footer-brand { line-height: 0; }
/* display は .buzzrepo-logo-dark/-light 側が持っています。ここで display を
   指定すると、明暗2枚のロゴが両方出て重なります。高さだけにします。 */
.br-public-footer-brand .buzzrepo-logo { height: 22px; }
.br-public-footer-brand p { margin: 12px 0 0; line-height: 1.6; font-size: 11.5px; color: var(--text-faint); letter-spacing: .04em; }
.br-public-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.br-public-footer-links a { font-size: 12.5px; color: var(--text-muted); text-decoration: none; }
.br-public-footer-links a:hover { color: var(--text-primary); }
.br-public-footer-links span { display: none; }
.br-public-copy {
	max-width: 880px;
	margin: 26px auto 0;
	padding-top: 18px;
	border-top: 1px solid var(--border-soft);
	font-size: 11px;
	line-height: 1.9;
	color: var(--text-faint);
}

@media (max-width: 720px) {
	.br-public { padding: 26px 14px 16px; }
	.br-public-doc { padding: 26px 20px 30px; border-radius: 8px; }
	.br-public-title { font-size: 22px; padding-bottom: 16px; margin-bottom: 20px; }
	.br-public-doc h2 { font-size: 15.5px; margin-top: 32px; }
	.br-public-navlink { padding: 5px 10px; font-size: 11.5px; }
	.br-public-footer { padding: 26px 16px 24px; }
	.br-public-footer-inner { gap: 18px; }
}

/* 入力シートが無い媒体の案内カード（詳細レポート）。 */
.buzzrepo-sheet-empty { border-style: dashed; }
.buzzrepo-sheet-empty .buzzrepo-sheet-head h3 { font-weight: 500; color: var(--text-muted); }

/* カートCVのクライアントに出す「この画面は媒体CVです」の注意書き。
   目立たせすぎると本文より先に読まれるので、小さく1行で置きます。 */
.cp-basis-note {
	margin: -4px 0 14px;
	padding: 9px 12px;
	border-left: 2px solid var(--warn);
	background: var(--warn-soft);
	border-radius: 0 6px 6px 0;
	font-size: 11.5px;
	line-height: 1.8;
}

/* ------------------------------------------------------------------ *
 * クリエイティブの拡大表示（ライトボックス）。
 * 管理画面とクライアントポータルの両方で使います。
 * body 直下に出すので、明暗のテーマに関係なく自前で色を持ちます。
 * ------------------------------------------------------------------ */
.br-lb{
	position:fixed; inset:0; z-index:100000;
	display:none; align-items:center; justify-content:center;
	gap:8px; padding:24px;
	background:rgba(8,14,22,.88);
	-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.br-lb.is-open{ display:flex; }
body.br-lb-lock{ overflow:hidden; }

.br-lb-stage{
	margin:0; display:flex; flex-direction:column; align-items:center; gap:10px;
	max-width:100%; max-height:100%; min-width:0;
}
.br-lb-img{
	max-width:100%;
	/* キャプションと位置表示のぶんを引いて、画像が画面からはみ出さないようにします。 */
	max-height:calc(100vh - 150px);
	width:auto; height:auto; object-fit:contain;
	border-radius:6px; background:#fff;
	box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.br-lb-img.is-loading{ opacity:.35; }
.br-lb-cap{
	max-width:min(900px,92vw); text-align:center;
	font-size:13px; line-height:1.7; color:#e8eef6;
	text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.br-lb-pos{
	position:absolute; left:0; right:0; bottom:14px;
	text-align:center; font-size:12px; color:#9fb0c4;
}
.br-lb-close,
.br-lb-nav{
	flex-shrink:0; cursor:pointer;
	border:1px solid rgba(255,255,255,.28);
	background:rgba(255,255,255,.10); color:#fff;
	border-radius:999px; line-height:1;
}
.br-lb-close{
	position:absolute; top:16px; right:18px;
	width:40px; height:40px; font-size:26px;
}
.br-lb-nav{ width:44px; height:44px; font-size:18px; }
.br-lb-close:hover,
.br-lb-nav:hover{ background:rgba(255,255,255,.22); }
.br-lb-close:focus-visible,
.br-lb-nav:focus-visible{ outline:2px solid #7fd4ff; outline-offset:2px; }
.br-lb-nav[hidden]{ display:none; }

/* 画像を押したら拡大できることが分かるようにします。 */
a[data-br-lightbox]{ cursor:zoom-in; display:block; }

@media (max-width:640px){
	.br-lb{ padding:12px; gap:4px; }
	.br-lb-img{ max-height:calc(100vh - 170px); }
	.br-lb-nav{ width:38px; height:38px; }
	/* 狭い画面では左右のボタンが画像を潰すので、下に逃がします。 */
	.br-lb-prev{ position:absolute; left:10px; bottom:46px; }
	.br-lb-next{ position:absolute; right:10px; bottom:46px; }
}