/* =========================================================================
 * Cookie 同意バナー / 設定画面
 *   ツールの中にもそのまま読み込めるよう、色は var(--…) を使い、
 *   変数が無いページ（法的ページ単体など）でも困らないよう既定値を添えています。
 * ======================================================================= */

.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  display:none;
  background:var(--panel,#fff); color:var(--text,#1c1c1c);
  border-top:1px solid var(--line,#c9c9c9);
  font:13px/1.65 var(--ui,"Meiryo UI","Yu Gothic UI","Segoe UI",sans-serif);
}
.cc-banner.on{display:block}
.cc-inner{
  max-width:1100px; margin:0 auto; padding:14px 16px;
  display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
}
.cc-text{flex:1 1 420px; min-width:0}
.cc-title{display:block; margin-bottom:3px}
.cc-body{margin:0; color:var(--text-2,#474747)}
.cc-body a{color:var(--focus,#0a64ad)}
.cc-btns{display:flex; gap:8px; flex:0 0 auto; flex-wrap:wrap; margin-left:auto}

.cc-btn{
  min-height:32px; padding:0 14px; cursor:pointer; white-space:nowrap;
  font:inherit; color:var(--text,#1c1c1c); background:var(--panel-2,#f7f7f7);
  border:1px solid var(--line,#c9c9c9); border-radius:2px;
}
.cc-btn:hover{background:var(--hover,#e8eef5)}
.cc-btn:focus-visible{outline:2px solid var(--focus,#0a64ad); outline-offset:1px}
.cc-primary{border-color:var(--focus,#0a64ad); color:var(--focus,#0a64ad); font-weight:bold}

.cc-dialog{
  width:640px; max-width:94vw; padding:0; border-radius:2px;
  border:1px solid var(--line,#c9c9c9);
  background:var(--win,#f0f0f0); color:var(--text,#1c1c1c);
  font:13px/1.65 var(--ui,"Meiryo UI","Yu Gothic UI","Segoe UI",sans-serif);
}
.cc-dialog::backdrop{background:rgba(0,0,0,.35)}
.cc-form{display:flex; flex-direction:column; max-height:min(86vh,720px)}
.cc-head{
  display:flex; align-items:center; gap:8px; padding:9px 6px 9px 14px;
  background:var(--panel,#fff); border-bottom:1px solid var(--line,#c9c9c9);
}
.cc-x{
  margin-left:auto; width:28px; height:24px; cursor:pointer;
  border:0; background:transparent; color:inherit; font:inherit;
}
.cc-x:hover{background:#c42b1c; color:#fff}
.cc-body-wrap{padding:14px; overflow:auto; background:var(--panel,#fff)}
.cc-lead{margin:0 0 12px; color:var(--text-2,#474747)}

.cc-cats{display:flex; flex-direction:column; gap:2px}
.cc-cat{
  display:flex; gap:10px; align-items:flex-start; padding:10px 12px;
  border:1px solid var(--line-2,#e2e2e2); border-radius:2px; cursor:pointer;
  background:var(--panel,#fff);
}
.cc-cat:hover{background:var(--panel-2,#f7f7f7)}
.cc-cat input{margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--focus,#0a64ad)}
.cc-cat input:disabled{opacity:.55}
.cc-cat-b{display:flex; flex-direction:column; gap:2px; min-width:0}
.cc-cat-n{font-weight:bold}
.cc-cat-n em{font-weight:normal; font-style:normal; color:var(--muted,#707070)}
.cc-cat-d{color:var(--text-2,#474747)}

.cc-log{margin-top:14px; border-top:1px solid var(--line-2,#e2e2e2); padding-top:10px}
.cc-log summary{cursor:pointer; color:var(--focus,#0a64ad)}
.cc-log-body{margin-top:8px; overflow:auto}
.cc-log-t{width:100%; border-collapse:collapse; font-size:12px}
.cc-log-t th,.cc-log-t td{
  border:1px solid var(--line-2,#e2e2e2); padding:4px 7px; text-align:left; vertical-align:top;
}
.cc-log-t th{background:var(--panel-2,#f7f7f7); font-weight:bold}
.cc-none{margin:0; color:var(--muted,#707070)}

.cc-foot{
  display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap;
  padding:10px 14px; background:var(--win,#f0f0f0); border-top:1px solid var(--line,#c9c9c9);
}

@media (max-width:640px){
  .cc-btns{margin-left:0; width:100%}
  .cc-btn{flex:1 1 auto}
}