:root {
    --bg: #f8f7f4;
    --card: #ffffff;
    --border: #e8e6e1;
    --ink: #1a1a1a;
    --ink2: #555;
    --ink3: #888;
    --teal: #2c6e8a;
    --teal-dark: #1a4a5e;
    --teal-pale: #f0f7fa;
    --amber: #b9770e;
    --red: #c0392b;
  }
  * { box-sizing: border-box; }
  body {
    font-family: 'Noto Sans JP', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--ink);
    margin: 0;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
  }
  
  .container { width: 100%; max-width: 2000px; margin: 0 auto; padding: 24px clamp(12px, 2vw, 32px) 60px; }

  
  .site-header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 14px 20px;
    text-align: center;
  }
  .site-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--teal-dark);
    letter-spacing: 1px;
    margin: 0;
  }
  .site-sub {
    font-size: 11px;
    color: var(--ink3);
    margin-top: 2px;
  }

  
  .case-banner {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 24px;
  }
  .case-banner-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .case-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
  }
  .mode-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 3px;
    letter-spacing: 0.5px;
  }
  .mode-staff { background: #fff3e0; color: var(--amber); }
  .mode-client { background: var(--teal-pale); color: var(--teal); }
  .case-meta {
    margin-top: 10px;
    font-size: 12px;
    color: var(--ink2);
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
  }
  .case-meta b { color: var(--ink); font-weight: 500; margin-left: 4px; }

  
  .expiry-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    font-size: 12px;
    color: var(--ink2);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .expiry-label {
    font-weight: 500;
    color: var(--ink3);
  }
  .expiry-value {
    color: var(--ink);
    font-weight: 500;
  }
  .expiry-remaining {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 500;
  }
  .expiry-remaining.ok {
    background: #e6f4ec;
    color: #2d7a4f;
  }
  .expiry-remaining.warn {
    background: #fff3e0;
    color: var(--amber);
  }
  .expiry-remaining.danger {
    background: #fdecea;
    color: var(--red);
  }

  
  .suspend-banner {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fff3e0;
    border: 1px solid #ffd699;
    border-radius: 6px;
    font-size: 12px;
    color: var(--amber);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
  }
  .suspend-icon { font-size: 16px; }

  
  .intro {
    font-size: 13px;
    color: var(--ink2);
    margin: 0 0 24px;
    padding: 14px 18px;
    background: var(--teal-pale);
    border-radius: 8px;
    border: 1px solid #c8e0ea;
  }

  
  .section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 28px 0 14px;
    padding-left: 12px;
    border-left: 4px solid var(--teal);
  }

  
  .tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
  }
  .tool-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
  }
  .tool-card.available:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(44, 110, 138, 0.12);
    border-color: var(--teal);
  }
  .tool-card.coming {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .tool-icon {
    font-size: 26px;
    margin-bottom: 8px;
  }
  .tool-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
  }
  .tool-desc {
    font-size: 12px;
    color: var(--ink3);
    margin: 0;
    line-height: 1.6;
  }

  
  .tool-toggle {
    display: none;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #e0e4ea;
    font-size: 11px;
    color: var(--ink3);
  }
  .tool-toggle label {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; user-select: none; font-weight: 600;
  }
  .tool-toggle input[type="checkbox"] {
    width: 14px; height: 14px; cursor: pointer; margin: 0;
  }
  .tool-toggle .tt-hidden-label {
    color: #b35a4f; font-weight: 700;
  }
  .tool-toggle .tt-visible-label {
    color: #2a8866; font-weight: 700;
  }
  
  .tool-card.is-hidden-for-client {
    background: #faf5f3;
    border-color: #e8d6cf;
  }
  
  .tool-empty-client {
    display: none;
    padding: 28px 16px; margin: 8px 0 16px;
    background: #f7f9fb; border: 1px dashed #c8d4dc;
    border-radius: 10px; text-align: center;
    font-size: 13px; color: var(--ink3); line-height: 1.7;
  }
  .tool-status {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: 0.5px;
  }
  .status-coming { background: #f5f5f5; color: var(--ink3); }
  .status-ready  { background: #e6f4ec; color: #2d7a4f; }

  
  .error-screen {
    text-align: center;
    padding: 60px 20px;
    max-width: 520px;
    margin: 0 auto;
  }
  .error-icon { font-size: 48px; margin-bottom: 16px; }
  .error-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--red);
    margin: 0 0 8px;
  }
  .error-msg {
    font-size: 13px;
    color: var(--ink2);
    margin: 0;
    line-height: 1.9;
  }
  
  .error-screen.expired .error-title {
    color: var(--teal-dark);
  }
  .error-screen.expired .error-msg {
    text-align: left;
    background: var(--teal-pale);
    border: 1px solid #c8e0ea;
    border-radius: 8px;
    padding: 18px 22px;
    margin-top: 16px;
  }
  
  .error-screen.closed .error-title {
    color: #2d7a4f;
  }
  .error-screen.closed .error-msg {
    text-align: left;
    background: #f3faf5;
    border: 1px solid #bfe3cc;
    border-radius: 8px;
    padding: 18px 22px;
    margin-top: 16px;
    line-height: 2;
  }
  
  .error-screen.suspended .error-title {
    color: var(--amber);
  }
  .error-screen.suspended .error-msg {
    text-align: left;
    background: #fff8ed;
    border: 1px solid #ffd699;
    border-radius: 8px;
    padding: 18px 22px;
    margin-top: 16px;
  }
  .error-contact {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--ink2);
    line-height: 1.8;
  }
  .error-contact-name {
    font-weight: 700;
    color: var(--ink);
    font-size: 15px;
    margin-bottom: 4px;
  }
  .error-contact-sub {
    font-size: 11px;
    color: var(--ink3);
    margin-bottom: 14px;
  }
  .error-contact-note {
    font-size: 12px;
    color: var(--ink3);
  }

  
  .loading-screen {
    text-align: center;
    padding: 80px 20px;
    color: var(--ink3);
    font-size: 13px;
  }

  
  .site-footer {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 11px;
    color: var(--ink3);
  }
  .site-footer p { margin: 4px 0; }

  @media (max-width: 640px) {
    .tool-grid { grid-template-columns: 1fr; }
    .case-name { font-size: 17px; }
  }



  
  .tool-card.available { cursor: pointer; }