/* CmOpo Modern UI
   Palette: CmOpo Navy/Aqua on White
*/
:root{
  --cmopo-navy:#0C2B52;
  --cmopo-aqua:#20A7B9;
  --cmopo-sky:#4CBBD6;
  --cmopo-azure:#2F6FB3;
  --cmopo-gold:#F4CF4F;
  --cmopo-indigo:#20335F;
  --bg:#FFFFFF;
  --surface:#F7FAFC;
  --border:#E5EAF0;
  --text:#0F172A;
  --text-sub:#475569;
  --muted:#64748B;
  --primary-hover:#08213F;
  --accent-hover:#168C9B;
  --focus-ring:0 0 0 3px rgba(32,167,185,0.35);
  --danger:#ef4444;

  --radius:12px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 6px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 24px rgba(0,0,0,.12);

  --accent-1:var(--cmopo-aqua);
  --accent-2:var(--cmopo-sky);
  --accent-3:var(--cmopo-gold);
  --accent-4:var(--cmopo-azure);

  /* 共通ブレークポイント */
  --bp-lg: 1200px;
  --bp-md: 1024px;
  --bp-sm: 768px;
  --bp-xs: 420px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 18%, rgba(76,187,214,.08), transparent 45%),
    radial-gradient(circle at 88% 6%, rgba(244,207,79,.1), transparent 40%),
    var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--cmopo-aqua); text-decoration:none}
a:hover{color:var(--accent-hover); text-decoration:underline}
img{max-width:100%; height:auto}

/* コンテナ */
.container{
  max-width:1200px; margin-inline:auto; padding:20px;
}
@media (min-width:768px){ .container{ padding:28px }}

/* ヘッダー（上部バー） */
.appbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(6px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--border);
}
.appbar__inner{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:700;
}
.brand__mark{
  width:32px; height:32px; border-radius:10px;
  background:
    linear-gradient(135deg, var(--cmopo-indigo), var(--cmopo-aqua));
  border:1px solid rgba(12,43,82,.12);
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.brand__mark::after{
  content:"";
  position:absolute; inset:6px;
  border-radius:6px;
  background:
    radial-gradient(circle at 80% 20%, rgba(244,207,79,.9), transparent 55%),
    radial-gradient(circle at 65% 70%, rgba(76,187,214,.9), transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(47,111,179,.9), transparent 45%);
  opacity:.9;
}
.brand__name{ letter-spacing:.2px }
.brand__logo-image{
  height:32px;
  width:auto;
  max-width:180px;
  object-fit:contain;
  display:block;
}
.brand__mark--full{
  width:120px; height:54px; border-radius:12px;
  background:
    linear-gradient(135deg, rgba(32,51,95,.98), rgba(32,167,185,.9));
  border:1px solid rgba(12,43,82,.08);
  box-shadow:var(--shadow-md);
  position:relative;
  overflow:hidden;
}
.brand__mark--full::after{
  content:"";
  position:absolute; inset:10px 18px;
  border-radius:10px;
  background:
    linear-gradient(135deg, rgba(244,207,79,.92), rgba(76,187,214,.95));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);
}

.logo-swatch{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-swatch__dot{
  width:16px;
  height:16px;
  border-radius:4px;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(12,43,82,.12);
}
.logo-swatch__dot--navy{ background:var(--cmopo-navy); }
.logo-swatch__dot--aqua{ background:var(--cmopo-aqua); }
.logo-swatch__dot--sky{ background:var(--cmopo-sky); }
.logo-swatch__dot--azure{ background:var(--cmopo-azure); }
.logo-swatch__dot--gold{ background:var(--cmopo-gold); }

/* ===== Components ===== */

/* カード */
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  padding:16px; margin:12px 0;
}
.card--elevated{ box-shadow:var(--shadow-md) }

/* セクション見出し */
.section-title{
  display:flex; align-items:center; gap:8px;
  font-size:18px; font-weight:700; margin:0 0 10px;
}
.section-title::before{
  content:""; width:6px; height:18px; border-radius:3px;
  background:linear-gradient(180deg, var(--accent-1), var(--accent-3));
}

/* 見出しユーティリティ */
.h1{ font-size:1.6rem; font-weight:800; }
.h2{ font-size:1.35rem; font-weight:700; }
.h3{ font-size:1.2rem; font-weight:700; }
.h4{ font-size:1.05rem; font-weight:700; }

/* ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg); color:var(--text);
  font-weight:600; cursor:pointer;
  transition:transform .05s ease, box-shadow .15s ease, background .2s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md) }
.btn:active{ transform:translateY(0) }
.btn:focus-visible{ outline:none; box-shadow:var(--focus-ring) }
.btn-primary{
  background:var(--cmopo-navy); color:#fff;
  border-color:var(--cmopo-navy);
}
.btn-primary:hover{ background:var(--primary-hover); border-color:var(--primary-hover); }
.btn-secondary{
  background:transparent; color:var(--cmopo-navy); border-color:var(--cmopo-navy);
}
.btn-secondary:hover{
  background:#F1F5F9;
}
.btn-ghost{
  background:transparent; border-color:var(--border);
}
.btn-danger{
  background:var(--danger); color:#fff; border-color:#d73d3d;
}

/* フォーム */
.input, .select, .textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  background:var(--bg);
  transition:box-shadow .15s ease, border-color .15s ease;
}
.textarea{ min-height:110px; resize:vertical }
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--cmopo-aqua); box-shadow:var(--focus-ring);
}
.label{
  display:block; font-size:12px; color:var(--text-sub); margin-bottom:6px;
}

/* 入力行（ラベル横並び） */
.form-row{
  display:grid; grid-template-columns: 140px 1fr; align-items:center; gap:12px;
  margin:10px 0;
}
@media (max-width:640px){
  .form-row{ grid-template-columns: 1fr; }
}

/* バッジ/タグ */
.badge{
  display:inline-block; padding:4px 8px;
  border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid var(--border); background:var(--surface);
}
.badge--accent{ background:var(--cmopo-aqua); color:#fff; border-color:var(--cmopo-aqua) }
.badge--gold{ background:var(--cmopo-gold); color:#1F2A44; border-color:var(--cmopo-gold); }
.badge--sky{ background:var(--cmopo-sky); color:#fff; border-color:var(--cmopo-sky); }

/* サムネイル */
.thumbnail-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
}
.thumbnail-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--surface);
}
.thumbnail-card__image{
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:8px;
  background:#f3f4f6;
  display:flex;
  align-items:center;
  justify-content:center;
}
.thumbnail-card__image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.thumbnail-card__meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.table__actions{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.table__actions form{ margin:0 }
.table__actions form, .table__actions .btn{
  display:inline-flex; align-items:center;
}
.table__actions .btn{
  min-width:110px; justify-content:center;
}
/* テーブル（横スクロール対応） */
.table-wrap{
  width:100%; overflow:auto; border:1px solid var(--border);
  border-radius:12px; background:var(--bg); box-shadow:var(--shadow-sm);
}
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  min-width:720px;
}
.table th, .table td{
  padding:12px 14px; border-bottom:1px solid var(--border); text-align:left;
}
.table thead th{
  position:sticky; top:0; background:var(--surface);
  z-index:1; font-weight:700;
  border-bottom:1px solid var(--border);
}
.table tbody tr:hover{ background:#F1F5F9 }
.table .cell-actions{ white-space:nowrap }

/* レイアウトヘルパー */
.stack-sm> *{ margin:6px 0 }
.stack> *{ margin:10px 0 }
.stack-lg> *{ margin:16px 0 }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.form-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.spacer{ flex:1 }
.logo-collection{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px;
}
.logo-collection__item{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px;
  border-radius:16px;
  background:var(--bg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.logo-collection__label{
  font-size:12px;
  font-weight:700;
  color:var(--text-sub);
  letter-spacing:.04em;
}
.logo-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(32,167,185,.12);
  color:var(--cmopo-navy);
  font-weight:700;
  font-size:12px;
}

/* ナビ（下線） */
.tabs{
  display:flex; gap:10px; border-bottom:1px solid var(--border); margin:8px 0 12px;
  flex-wrap:wrap;
}
.tabs a,
.tabs .tab{
  padding:10px 12px; border-radius:8px 8px 0 0; font-weight:600; color:var(--text-sub);
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
}
.tabs a[aria-current="page"],
.tabs .tab.is-active{
  color:var(--cmopo-navy);
  border:1px solid var(--border); border-bottom-color:transparent;
  background:var(--bg);
}

/* 通知/アラート */
.alert{
  border:1px solid var(--border); border-left:6px solid var(--cmopo-aqua);
  border-radius:10px; padding:12px 14px; background:var(--surface);
}

/* ===== Finance Trial Balance ===== */
.tb-input__header{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}
.tb-input__lead{
  margin:0;
  color:var(--text-sub);
}
.tb-input__toolbar{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.tb-input__month{
  width:220px;
}
.tb-input__table-wrap{
  max-height:62vh;
}
.tb-input__table{
  min-width:980px;
}
.tb-input__table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--surface);
}
.tb-input__account-col{
  position:sticky;
  left:0;
  background:var(--bg);
  z-index:2;
  min-width:220px;
}
.tb-input__table thead .tb-input__account-col{
  background:var(--surface);
  z-index:4;
}
.tb-input__amount{
  min-width:120px;
  text-align:right;
}
.tb-input__total{
  white-space:nowrap;
  text-align:right;
  font-weight:700;
}
.tb-input__import{
  margin:0;
}
.tb-input__hint{
  margin:0;
  color:var(--text-sub);
}
.tb-input__errors ul{
  margin:8px 0 0;
  padding-left:18px;
}

/* ===== Marketing Page ===== */
.hero{
  display:grid;
  gap:32px;
  margin:32px 0 48px;
  padding:40px;
  border-radius:28px;
  background:
    radial-gradient(circle at top left, rgba(76,187,214,.22), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(244,207,79,.22), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(240,248,255,.9));
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  z-index:0;
  opacity:.7;
  filter:blur(0px);
  animation:floatGlow 14s ease-in-out infinite;
}
.hero::before{
  width:320px;
  height:320px;
  top:-120px;
  right:-80px;
  background:radial-gradient(circle, rgba(76,187,214,.4), transparent 65%);
}
.hero::after{
  width:380px;
  height:380px;
  bottom:-160px;
  left:-120px;
  background:radial-gradient(circle, rgba(244,207,79,.35), transparent 70%);
  animation-delay:-6s;
}
.hero__content,
.hero__panel{
  position:relative;
  z-index:1;
}
@media (max-width:640px){
  .hero{ padding:28px; margin:24px 0 36px; }
}
@media (min-width:960px){
  .hero{ grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); }
}
.hero__eyebrow{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.hero__title{
  font-size:2.3rem;
  font-weight:800;
  margin:16px 0 10px;
  line-height:1.3;
}
.hero__lead{
  font-size:1.05rem;
  color:var(--text-sub);
}
.hero__bullets{
  margin:16px 0 0;
  padding-left:18px;
  color:var(--text-sub);
}
.hero__bullets li{ margin:6px 0; }
.hero__actions{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:22px;
}
.hero__note{
  font-size:12px;
  color:var(--muted);
  margin-top:10px;
}
.hero__stats{
  display:grid;
  gap:12px;
  margin-top:20px;
}
@media (min-width:720px){
  .hero__stats{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
.stat-card{
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(32,51,95,.1);
  box-shadow:0 10px 22px rgba(12,43,82,.08);
  backdrop-filter:blur(8px);
}
.stat-card__value{
  margin:0 0 4px;
  font-weight:800;
  color:var(--cmopo-navy);
}
.stat-card__label{
  margin:0;
  font-size:12px;
  color:var(--muted);
}
.hero__panel{
  display:grid;
  gap:20px;
}
.hero__panel-card{
  padding:22px;
  border-radius:20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(247,250,255,.95));
  border:1px solid rgba(12,43,82,.08);
  box-shadow:var(--shadow-sm);
}
.hero__panel-label{
  font-size:12px;
  font-weight:700;
  color:var(--cmopo-azure);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero__panel-title{
  font-size:1.5rem;
  margin:10px 0;
}
.hero__panel-flow{
  display:grid;
  gap:8px;
  margin-top:14px;
}
.hero__panel-flow span{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(32,51,95,.08);
  background:rgba(32,167,185,.08);
  color:var(--cmopo-navy);
  font-size:12px;
  font-weight:600;
}
.hero__panel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:12px;
}
.mini-card{
  padding:12px;
  border-radius:14px;
  background:var(--bg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.mini-card__label{
  font-size:11px;
  color:var(--muted);
  margin:0 0 6px;
}
.mini-card__value{
  font-weight:700;
  margin:0;
  color:var(--cmopo-navy);
}

.section-block{
  margin:56px 0;
  padding:8px 0;
}
.section-block--accent{
  padding:28px;
  border-radius:24px;
  background:
    linear-gradient(135deg, rgba(32,167,185,.08), rgba(76,187,214,.08));
  border:1px solid rgba(12,43,82,.08);
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.section-block--accent::before,
.section-block--accent::after{
  content:"";
  position:absolute;
  border-radius:50%;
  opacity:.7;
  pointer-events:none;
  animation:floatGlow 16s ease-in-out infinite;
}
.section-block--accent::before{
  width:240px;
  height:240px;
  top:-120px;
  right:-80px;
  background:radial-gradient(circle, rgba(76,187,214,.25), transparent 70%);
}
.section-block--accent::after{
  width:200px;
  height:200px;
  bottom:-100px;
  left:-60px;
  background:radial-gradient(circle, rgba(244,207,79,.25), transparent 70%);
  animation-delay:-5s;
}
.section-grid{
  display:grid;
  gap:24px;
}
@media (min-width:860px){
  .section-grid{ grid-template-columns: 1.2fr .8fr; }
}
.section-lead{
  font-size:1.1rem;
  color:var(--text-sub);
  margin:0;
}
.section-card{
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  padding:20px;
  box-shadow:var(--shadow-sm);
}
.pill-group{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.pill{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(32,167,185,.1);
  border:1px solid rgba(32,167,185,.3);
  color:var(--cmopo-navy);
  font-weight:600;
  font-size:13px;
}

.feature-list{
  display:grid;
  gap:24px;
}
.feature-card{
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--bg);
  padding:24px;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
  overflow:hidden;
}
.feature-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  border:1px solid transparent;
  background:linear-gradient(135deg, rgba(32,167,185,.35), rgba(244,207,79,.2));
  opacity:0;
  transition:opacity .2s ease;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
  padding:1px;
  pointer-events:none;
}
.feature-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:rgba(32,167,185,.4);
}
.feature-card:hover::before{
  opacity:1;
}
.feature-card header{ margin-bottom:12px; }
.feature-card__tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(32,167,185,.12);
  color:var(--cmopo-azure);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:8px;
}
.feature-grid{
  display:grid;
  gap:16px;
}
@media (min-width:860px){
  .feature-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

.flow-card{
  border:1px solid var(--border);
  border-radius:22px;
  background:
    linear-gradient(135deg, rgba(32,167,185,.12), rgba(76,187,214,.1));
  padding:26px;
  box-shadow:var(--shadow-sm);
}
.flow-card__lead{
  margin:0 0 16px;
  color:var(--text-sub);
}
.flow-steps{
  display:grid;
  gap:16px;
}
@media (min-width:860px){
  .flow-steps{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
.flow-step{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.flow-step::after{
  content:"";
  position:absolute;
  top:12px;
  right:12px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(32,167,185,.2), transparent 70%);
  opacity:.6;
}
.flow-step__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:12px;
  background:rgba(12,43,82,.08);
  color:var(--cmopo-navy);
  font-weight:800;
  font-size:12px;
  margin-bottom:10px;
}
.flow-step__label{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(47,111,179,.12);
  color:var(--cmopo-azure);
  font-size:12px;
  font-weight:700;
  margin-bottom:6px;
}

.cta-card{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  padding:26px 28px;
  border-radius:22px;
  border:1px solid rgba(12,43,82,.2);
  background:
    linear-gradient(135deg, rgba(12,43,82,.98), rgba(32,167,185,.95));
  color:#fff;
  box-shadow:var(--shadow-md);
}
.cta-card__actions .btn{
  border-color:rgba(255,255,255,.4);
}

@keyframes floatGlow{
  0%, 100%{ transform:translateY(0) translateX(0); }
  50%{ transform:translateY(18px) translateX(-12px); }
}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s ease, transform .8s ease;
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

.feature-list .feature-card:nth-child(1){ --reveal-delay: 0ms; }
.feature-list .feature-card:nth-child(2){ --reveal-delay: 80ms; }
.feature-list .feature-card:nth-child(3){ --reveal-delay: 160ms; }
.feature-list .feature-card:nth-child(4){ --reveal-delay: 240ms; }
.feature-list .feature-card:nth-child(5){ --reveal-delay: 320ms; }
.flow-steps .flow-step:nth-child(1){ --reveal-delay: 0ms; }
.flow-steps .flow-step:nth-child(2){ --reveal-delay: 90ms; }
.flow-steps .flow-step:nth-child(3){ --reveal-delay: 180ms; }
.flow-steps .flow-step:nth-child(4){ --reveal-delay: 270ms; }
.cta-card .text-muted{ color:rgba(255,255,255,.75); }
.cta-card__actions .btn{
  border-color:#fff;
}
.cta-card__actions .btn:hover{
  background:rgba(255,255,255,.1);
}

.card--accent{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(76,187,214,.14), rgba(244,207,79,.12) 55%, rgba(32,51,95,.08));
  border-color:rgba(12,43,82,.08);
}
.card--accent > *{
  position:relative;
  z-index:1;
}
.card--accent::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at top right, rgba(244,207,79,.24), transparent 55%),
    radial-gradient(circle at 12% 20%, rgba(32,167,185,.22), transparent 50%);
  pointer-events:none;
}

/* フッター */
.footer{
  color:var(--muted); font-size:12px; padding:24px 16px; text-align:center;
  border-top:1px solid var(--border); background:var(--bg);
}

/* モバイルヘッダー操作 */
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg); box-shadow:var(--shadow-sm);
}
@media (min-width:992px){ .nav-toggle{ display:none } }

/* サイドメニュー（任意） */
.sidebar{
  border-right:1px solid var(--border);
  padding:16px; min-width:220px; background:var(--bg);
}
@media (max-width:991px){
  .layout{ display:block }
  .sidebar{ display:none }
  .sidebar.is-open{ display:block; position:fixed; z-index:60; inset:56px 0 0 0; background:var(--bg); }
}
@media (min-width:992px){
  .layout{ display:grid; grid-template-columns:240px 1fr; }
}

/* フォーカス見やすく */
:where(button, a, input, select, textarea):focus-visible{
  outline:none; box-shadow:var(--focus-ring) !important;
}

/* =======================
   ここからレスポンシブ強化
   ======================= */

/* 2カラム汎用：PC=メイン+サイド／モバイル=縦積み */
.layout-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:16px;
}
.layout-split__main{ min-width:0; }
.layout-split__aside{ min-width:0; }
.layout-split__aside.sticky,
.layout-split__aside.is-sticky{
  position:sticky; top:84px;
}

/* スマホ・タブレットでは1カラム化＋sticky解除 */
@media (max-width:1024px){
  .layout-split{ display:block; }
  .layout-split__aside{ margin-top:12px; }
  .layout-split__aside.sticky,
  .layout-split__aside.is-sticky{ position:static; top:auto; }
}

/* 2カラムグリッドを使う画面用（任意クラス） */
.grid--2col{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
@media (max-width:1024px){
  .grid--2col{ display:block; }
  .grid--2col > * + *{ margin-top:12px; }
}

/* フォームの行：モバイルで縦積み＆全幅化 */
@media (max-width:1024px){
  .form .row{ flex-direction:column; align-items:stretch; gap:8px; }
  .form .row .label{ margin-bottom:4px; }
  .input, .select, .textarea{ width:100% !important; min-width:0 !important; }
}

/* スタッフのチェックリスト（名前と残業入力） */
.checklist{
  display:grid; grid-template-columns: 1fr auto; gap:8px 12px;
}
@media (max-width:1024px){
  .checklist{ grid-template-columns: 1fr; }
}

/* ツールバー・ボタン群の折返し */
@media (max-width:1024px){
  .toolbar, .toolbar__actions{ flex-wrap:wrap; gap:8px; }
}

/* 表のはみ出し対策（再掲：子要素だけ指定する場合に備え） */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* iOSセーフエリア対策（最下部がかぶらないように） */
main, .content, [data-role="content"]{
  padding-bottom:max(16px, env(safe-area-inset-bottom));
}

/* 文字サイズ・余白の微調整（極小端末） */
@media (max-width:420px){
  .section-title{ font-size:1.125rem; }
  .h4{ font-size:1rem; }
  .btn{ padding:10px 12px; }
}

/* ===== ユーティリティ ===== */
.text-right{ text-align:right !important; }
.text-center{ text-align:center !important; }
.text-muted{ color:var(--muted) !important; }
.muted{ color:var(--muted) !important; }
.right{ text-align:right !important; }
.center{ text-align:center !important; }
.nowrap{ white-space:nowrap !important; }
.grow{ flex:1 1 auto !important; }
.w-140{ width:140px; }

/* 共通パネル */
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}
.panel--dashed{
  border-style:dashed;
}
.panel--compact > p{ margin:0; }

/* 固定カラム */
.sticky-left{
  position:sticky;
  left:0;
  background:var(--bg);
  z-index:2;
}
.sticky-left.sub{ z-index:1; }
.matrix-muted{ background:var(--surface); }

/* 管理メニューカード */
.admin-grid{
  display:grid;
  gap:24px;
  grid-template-columns:1fr;
  max-width:1200px;
  margin:0 auto;
  width:100%;
  align-items:stretch;
}
@media (min-width:768px){
  .admin-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:1024px){
  .admin-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (min-width:1440px){
  .admin-grid{ max-width:1400px; }
}
.tile{
  display:block;
  text-decoration:none;
  color:inherit;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.tile:hover{
  border-color:rgba(12,43,82,.2);
  box-shadow:0 6px 18px rgba(12,43,82,0.10);
}
.tile h2{ margin:0 0 6px; font-size:16px; color:var(--text); }
.tile p{ margin:0; font-size:13px; color:var(--text-sub); }

/* タブ（ボタン） */
.tab{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  font-size:13px;
  color:var(--text-sub);
}
.tab.is-active{
  background:var(--bg);
  border-color:var(--cmopo-aqua);
  color:var(--cmopo-navy);
  font-weight:600;
}
.form-actions--equal .btn{
  min-width:140px;
  text-align:center;
}
@media (max-width:640px){
  .tabs{ justify-content:flex-start; }
  .tabs .tab{ flex:1 1 auto; text-align:center; }
  .form-actions .btn{
    flex:1 1 0;
    min-width:0;
    text-align:center;
  }
}

.calendar-panel{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}

/* サイドバー内の共通ボタン */
.sidebar .stack > a.btn,
.sidebar .stack > form .btn{
  display:block;
  width:100%;
  text-align:left;
  box-shadow: var(--shadow-md);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform .06s ease, box-shadow .18s ease, background .18s ease;
}
.sidebar .stack > a.btn:hover,
.sidebar .stack > form .btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}
.sidebar .stack > a.btn:active,
.sidebar .stack > form .btn:active{
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
  background: var(--bg);
}
.sidebar .stack > a.is-active{
  border-color: var(--cmopo-aqua);
  background: var(--bg);
  box-shadow: 0 6px 16px rgba(32,167,185,.22);
}

/* ==== Side Menu (1列) =================================== */
.side-menu { width: 100%; }
.side-menu__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.side-menu a,
.side-menu__button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(12,43,82,.08), 0 2px 6px rgba(12,43,82,.06);
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.side-menu a:hover,
.side-menu__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(12,43,82,.12), 0 4px 10px rgba(12,43,82,.08);
  background: #F1F5F9;
}
.side-menu a.is-active{
  border-color: var(--cmopo-aqua);
  box-shadow: 0 10px 24px rgba(12,43,82,.12), 0 4px 10px rgba(12,43,82,.08), 0 0 0 3px rgba(32,167,185,.25) inset;
}
.side-menu__label { flex: 1 1 auto; }

@media (max-width: 1024px){
  .side-menu__list { gap: 10px; }
}

/* =========================================================
   Elevated Buttons (3D/浮いてる感じ) - override & enhance
   ========================================================= */
:root{
  --elev-0: 0 0 0 rgba(0,0,0,0);
  --elev-1: 0 6px 14px rgba(12,43,82,.10), 0 2px 6px rgba(12,43,82,.06);
  --elev-2: 0 10px 24px rgba(12,43,82,.12), 0 4px 10px rgba(12,43,82,.08);
  --elev-3: 0 18px 36px rgba(12,43,82,.14), 0 8px 16px rgba(12,43,82,.10);
  --btn-border: var(--border);
  --btn-highlight: rgba(255,255,255,.65);
}

/* 共通ボタン（上書き） */
.btn{
  position: relative;
  border-radius: 12px;
  border: 1px solid var(--btn-border);
  padding: 12px 16px;
  font-weight: 700;
  transform: translateY(0);
  background: var(--bg);
  box-shadow: var(--elev-1);
  transition:
    transform .12s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
  will-change: transform, box-shadow;
}
.btn::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: linear-gradient(180deg, var(--btn-highlight), rgba(255,255,255,0));
  pointer-events:none;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
  text-decoration: none;
}
.btn:active{
  transform: translateY(0);
  box-shadow: var(--elev-0);
}
.btn:focus-visible{
  outline: none;
  box-shadow: var(--elev-2), var(--focus-ring);
  border-color: var(--cmopo-aqua);
}

/* バリアント */
.btn-primary{
  color: #fff;
  border-color: var(--cmopo-navy);
  background: var(--cmopo-navy);
  box-shadow:
    0 8px 18px rgba(12,43,82,.22),
    0 3px 8px rgba(12,43,82,.10);
}
.btn-primary:hover{
  background: var(--primary-hover);
  box-shadow:
    0 12px 26px rgba(12,43,82,.28),
    0 6px 12px rgba(12,43,82,.12);
}
.btn-primary:active{
  background: var(--cmopo-navy);
  box-shadow: var(--elev-0);
}

.btn-secondary{
  color:var(--cmopo-navy);
  border-color: var(--cmopo-navy);
  background: transparent;
  box-shadow: var(--elev-1);
}
.btn-secondary:hover{ box-shadow: var(--elev-2); background:#F1F5F9; }
.btn-secondary:active{ box-shadow: var(--elev-0); }

.btn-ghost{
  background: var(--bg);
  border-color: var(--border);
  box-shadow: var(--elev-1);
}
.btn-ghost:hover{
  background: #F1F5F9;
  box-shadow: var(--elev-2);
}

.btn-danger{
  color:#fff;
  border-color:#d73d3d;
  background: linear-gradient(180deg, #ff6e6e, #ef4444);
  box-shadow:
    0 8px 18px rgba(239,68,68,.28),
    0 3px 8px rgba(0,0,0,.10);
}
.btn-danger:hover{
  box-shadow:
    0 12px 26px rgba(239,68,68,.35),
    0 6px 12px rgba(0,0,0,.12);
}

/* モバイルでの過度な揺れを抑制 */
@media (prefers-reduced-motion: reduce){
  .btn, .side-menu a, .side-menu__button{ transition: none; }
}