/* =====================================================
   KAWAI CAMP UI — Design Tokens & Components
   token-driven / content-first / WCAG 2.2 AA
   ===================================================== */
:root{
  /* font tokens */
  --font-family:Inter,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif; /* 欧文=Inter / 和文=Noto Sans JP */
  --font-size-xs:14px;
  --font-size-sm:16px;
  --font-size-md:38px;
  --font-size-lg:64px;
  --font-weight-base:500;
  --font-weight-bold:700;
  --line-height-base:1.85; /* 29.6px / 16px */

  /* color tokens */
  --color-text-primary:#111111;
  --color-text-secondary:#4b4f58;
  --color-text-inverse:#ffffff;
  --color-surface-base:#000000;
  --color-surface-muted:#f4f5f7;
  --color-surface-strong:#101828;
  --color-surface-card:#ffffff;
  --color-border-default:#d8dce3;
  --color-border-muted:#4b4f58;
  --color-border-strong:#111111;
  --color-accent:#ff0000;        /* 原色レッド(ブランド規定: 必ず原色を1色以上使用) */
  --color-accent-hover:#d90000;
  --color-danger:#b42318;
  --color-danger-surface:#fdecea;
  --color-success:#067647;
  --color-success-surface:#ecfdf3;
  --color-warning:#92400e;
  --color-warning-surface:#fef3c7;
  --color-info:#1e40af;
  --color-info-surface:#e0e7ff;

  /* spacing tokens */
  --space-1:20px;
  --space-2:22px;
  --space-3:24px;
  --space-4:38px;
  --space-5:72px;
  --space-6:88px;

  /* shape / elevation / motion (手動定義: 抽出トークンなしのため) */
  --radius-sm:6px;
  --radius-md:10px;
  --shadow-card:none; /* フラットデザイン: 影付きカード禁止(ブランド規定) */
  --motion-fast:150ms ease;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  word-break:keep-all;overflow-wrap:anywhere; /* 単語途中改行禁止 */
  font-family:var(--font-family);
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-base);
  line-height:var(--line-height-base);
  color:var(--color-text-primary);
  background:var(--color-surface-muted);
  -webkit-text-size-adjust:100%;
}
img{max-width:100%}

/* focus-visible: 常に可視（非表示禁止） */
:focus{outline:none}
:focus-visible{outline:3px solid var(--color-border-strong);outline-offset:2px;border-radius:var(--radius-sm)}
.kc-sidebar :focus-visible,.kc-header :focus-visible{outline-color:var(--color-text-inverse)}

/* screen-reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* skip link */
.kc-skip{position:absolute;left:-9999px;top:0;background:var(--color-surface-card);color:var(--color-text-primary);padding:8px 16px;z-index:100;border-radius:var(--radius-sm)}
.kc-skip:focus-visible{left:8px;top:8px}

/* ---------- header / footer (公開ページ) ---------- */
.kc-header{background:var(--color-surface-base);color:var(--color-text-inverse);padding:14px var(--space-3);border-bottom:3px solid var(--color-accent)}
.kc-header .brand{display: block;max-width: 200px;width: 100%;}
.kc-header .brand img{display: block;width: 100%;height: auto;}
.kc-footer{background:var(--color-surface-base);color:var(--color-text-inverse);text-align:center;font-size:var(--font-size-xs);letter-spacing:.08em;padding:var(--space-2) var(--space-3);border-top:3px solid var(--color-accent);margin-top:auto}
.kc-footer small{font-size:inherit}
body{min-height:100vh;display:flex;flex-direction:column}
main.kc-wrap{flex:1 0 auto;width:100%}
.kc-admin{flex:1 0 auto;width:100%}

/* ---------- layout ---------- */
.kc-wrap{max-width:720px;margin:0 auto;padding:var(--space-4) var(--space-1) var(--space-5)}
.kc-title{font-size:24px;font-weight:var(--font-weight-bold);line-height:1.4;margin:0 0 var(--space-3)}
.kc-title::after{content:"";display:block;width:48px;height:4px;background:var(--color-accent);margin-top:8px}
.kc-section-title{font-size:18px;font-weight:var(--font-weight-bold);margin:0 0 var(--space-1)}

/* ---------- card ---------- */
.kc-card{background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:var(--space-3);margin-bottom:var(--space-3)}
@media (max-width:480px){.kc-card{padding:var(--space-1)}}

/* ---------- form ---------- */
.kc-field{margin-bottom:var(--space-2)}
.kc-label{display:block;font-weight:var(--font-weight-bold);margin-bottom:6px}
.kc-req{display:inline-block;margin-left:8px;padding:1px 8px;font-size:12px;font-weight:var(--font-weight-bold);color:var(--color-text-inverse);background:var(--color-danger);border-radius:999px;vertical-align:2px}
.kc-input,.kc-select{
  width:100%;min-height:48px;padding:11px 14px;
  font:inherit;color:var(--color-text-primary);
  background:var(--color-surface-card);
  border:1px solid var(--color-border-muted);border-radius:var(--radius-sm);
  transition:border-color var(--motion-fast);
}
.kc-input:hover,.kc-select:hover{border-color:var(--color-border-strong)}
.kc-input:focus-visible,.kc-select:focus-visible{outline-offset:0}
.kc-input:disabled,.kc-select:disabled{background:var(--color-surface-muted);color:var(--color-text-secondary);cursor:not-allowed}
.kc-input[aria-invalid="true"],.kc-select[aria-invalid="true"]{border-color:var(--color-danger)}
.kc-help{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:4px}

/* ---------- buttons ---------- */
.kc-btn{
  position: relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:11px var(--space-3);
  font:inherit;font-weight:var(--font-weight-bold);
  border-radius:var(--radius-sm);border:1px solid transparent;
  cursor:pointer;text-decoration:none;text-align:center;
  transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast);
}
.kc-btn::after{content: '';position: absolute;top: 50%;right: 4%;width: .6em;height: 1em;background-color: white;transform: translateY(-50%);clip-path: polygon(0% 0%, 100% 50%, 0% 100%);}
/* 原色CTA: 18px太字白抜き=大文字扱いでコントラスト3:1以上(WCAG AA) */
.kc-btn--primary{background:var(--color-accent);color:var(--color-text-inverse);font-size:18px}
.kc-btn--primary:hover{background:var(--color-accent-hover)}
.kc-btn--primary:active{background:var(--color-accent-hover);transform:translateY(1px)}
.kc-btn--secondary{background:var(--color-surface-card);color:var(--color-text-primary);border-color:var(--color-border-strong)}
.kc-btn--secondary:hover{background:var(--color-surface-muted)}
.kc-btn--secondary:active{transform:translateY(1px)}
.kc-btn:disabled,.kc-btn[aria-busy="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}
.kc-btn--block{width:100%}
.kc-actions{display:flex;gap:12px;margin-top:var(--space-3);flex-wrap:wrap}
.kc-actions>*{flex:1;min-width:140px}

/* ---------- alerts ---------- */
.kc-alert{padding:14px 16px;border-radius:var(--radius-sm);margin-bottom:var(--space-2);font-weight:var(--font-weight-base)}
.kc-alert--error{background:var(--color-danger-surface);border:1px solid var(--color-danger);color:var(--color-danger)}
.kc-alert--success{background:var(--color-success-surface);border:1px solid var(--color-success);color:var(--color-success);font-weight:var(--font-weight-bold)}

/* ---------- definition table (確認・サンクス) ---------- */
.kc-table{width:100%;border-collapse:collapse}
.kc-table th,.kc-table td{padding:12px 14px;border-bottom:1px solid var(--color-border-default);text-align:left;vertical-align:top;word-break:break-word}
.kc-table th{width:38%;color:var(--color-text-secondary);font-weight:var(--font-weight-bold)}
.kc-table tr:last-child th,.kc-table tr:last-child td{border-bottom:none}
.kc-amount{font-size:22px;font-weight:var(--font-weight-bold)}
.kc-uid{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--color-surface-muted);padding:2px 10px;border-radius:var(--radius-sm)}
.kc-note{font-size:var(--font-size-xs);color:var(--color-text-secondary)}
@media (max-width:480px){.kc-table th{width:34%}}

/* =====================================================
   Admin dashboard
   ===================================================== */
.kc-admin{display:grid;grid-template-rows:1fr auto;grid-template-columns:auto 1fr;min-height:100vh}
.kc-sidebar{grid-row:span 2;width:230px;background:var(--color-surface-strong);color:var(--color-text-inverse);padding:var(--space-1) 0}
.kc-sidebar .brand{display:block;color:var(--color-text-inverse);font-weight:var(--font-weight-bold);letter-spacing:.1em;font-size:16px;text-decoration:none;padding:0 var(--space-1) 16px;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:12px}
.kc-sidebar .brand img{display: block;width: 100%;height: auto;}
.kc-sidebar .brand .sub{display:block;font-size:12px;font-weight:var(--font-weight-base);letter-spacing:.05em;color:rgba(255,255,255,.75)}
.kc-nav a{display:block;padding:12px var(--space-1);color:var(--color-text-inverse);text-decoration:none;border-left:3px solid transparent;transition:background-color var(--motion-fast)}
.kc-nav a:hover{background:rgba(255,255,255,.10)}
.kc-nav a:active{background:rgba(255,255,255,.16)}
.kc-nav a[aria-current="page"]{background:var(--color-surface-base);border-left-color:var(--color-accent);font-weight:var(--font-weight-bold)}
.kc-main{flex:1;min-width:0;padding:var(--space-4)}
@media (max-width:800px){
  .kc-admin{flex-direction:column}
  .kc-sidebar{width:100%;padding-bottom:0}
  .kc-nav{display:flex}
  .kc-nav a{flex:1;text-align:center;border-left:none;border-bottom:3px solid transparent}
  .kc-nav a[aria-current="page"]{border-bottom-color:var(--color-accent)}
  .kc-main{padding:var(--space-1)}
}

/* KPI cards */
.kc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-1);margin-bottom:var(--space-3)}
.kc-kpi{background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:var(--space-1)}
.kc-kpi .label{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin:0}
.kc-kpi .value{font-size:28px;font-weight:var(--font-weight-bold);line-height:1.3;margin:2px 0 0}
.kc-kpi--alert .value{color:var(--color-danger)}

/* data tables */
.kc-scroll{overflow-x:auto;background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.kc-data{width:100%;border-collapse:collapse}
.kc-data th,.kc-data td{padding:9px 12px;border-bottom:1px solid var(--color-border-default);font-size:var(--font-size-xs);text-align:left;white-space:nowrap}
.kc-data th{background:var(--color-surface-muted);font-weight:var(--font-weight-bold);position:sticky;top:0}
.kc-data tr:last-child td{border-bottom:none}
.kc-data td.num,.kc-data th.num{text-align:right}
.kc-data tr.row-ng td{background:var(--color-danger-surface)}
.kc-empty{padding:var(--space-3);text-align:center;color:var(--color-text-secondary)}

/* status badge */
.kc-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:var(--font-weight-bold);line-height:1.6}
.kc-badge--gray{background:var(--color-surface-muted);color:var(--color-text-secondary);border:1px solid var(--color-border-default)}
.kc-badge--blue{background:var(--color-info-surface);color:var(--color-info)}
.kc-badge--amber{background:var(--color-warning-surface);color:var(--color-warning)}
.kc-badge--green{background:var(--color-success-surface);color:var(--color-success)}
.kc-badge--red{background:var(--color-danger-surface);color:var(--color-danger)}

/* filter chips */
.kc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--space-1)}
.kc-chip{display:inline-flex;align-items:center;min-height:36px;padding:5px 14px;border-radius:999px;border:1px solid var(--color-border-muted);background:var(--color-surface-card);color:var(--color-text-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);text-decoration:none;transition:background-color var(--motion-fast)}
.kc-chip:hover{background:var(--color-surface-muted)}
.kc-chip[aria-current="true"]{background:var(--color-surface-strong);border-color:var(--color-surface-strong);color:var(--color-text-inverse)}


.kc-field-error{color:var(--color-danger);font-size:var(--font-size-xs);margin-top:.5em;}