/* ========== Reset & Base ========== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:#1a1a1a;}
body{font-family:'Noto Sans JP',sans-serif;color:#333;}

/* ========== Brand Tokens ========== */
:root{
  --brown-900:#3D1F1F;
  --brown-700:#613636;
  --brown-500:#8B5E5E;
  --brown-mid:#4A2828;
  --cream-200:#E8E4D9;
  --cream-100:#F4F2EB;
  --gold-600:#8B6914;
  --gold-bright:#D4A017;
  --neutral-800:#333333;
  --white:#FFFFFF;
  --font-serif:'Noto Serif JP',serif;
  --font-sans:'Noto Sans JP',sans-serif;
}

/* ========== Slide Container ========== */
#app{position:relative;width:100vw;height:100vh;overflow:hidden;}
#slide-container{
  width:100%;height:100%;
  container-type:inline-size;
}
.slide{
  display:none;flex-direction:column;
  width:100%;height:100%;
  padding:4.2cqw 5.2cqw;
  overflow:hidden;
}
.slide.active{display:flex;}

/* ========== Typographic Scale (cqw) ========== */
.label{
  font-family:var(--font-sans);font-size:0.73cqw;font-weight:500;
  letter-spacing:0.15cqw;color:var(--gold-bright);
}
.title{
  font-family:var(--font-serif);font-size:1.88cqw;font-weight:700;
  color:var(--brown-700);line-height:1.3;
}
.title--light{color:var(--white);}
.subtitle{
  font-family:var(--font-sans);font-size:0.83cqw;
  color:var(--brown-500);line-height:1.6;
}
.heading{
  font-family:var(--font-serif);font-size:1.15cqw;font-weight:700;
  color:var(--brown-700);
}
.heading--light{color:var(--white);}
.heading--gold{color:var(--gold-bright);}
.body-text{
  font-family:var(--font-sans);font-size:0.73cqw;
  color:var(--neutral-800);line-height:1.7;
}
.body-text--light{color:var(--white);}
.body-text--muted{color:var(--brown-500);}
.small-text{
  font-family:var(--font-sans);font-size:0.68cqw;
  color:var(--brown-500);line-height:1.5;
}

/* ========== Layout Helpers ========== */
.slide-head{display:flex;flex-direction:column;gap:0.4cqw;}
.grid{display:flex;gap:1.67cqw;flex:1;min-height:0;}
.grid--tight{gap:0;}
.col{display:flex;flex-direction:column;gap:0.83cqw;flex:1;min-width:0;}
.col--center{align-items:center;justify-content:center;}
.row{display:flex;gap:0.83cqw;align-items:center;}
.card{
  padding:1.25cqw 1.46cqw;border-radius:0.42cqw;
  display:flex;flex-direction:column;gap:0.42cqw;flex:1;
}
.card--white{background:var(--white);}
.card--cream{background:var(--cream-100);}
.card--brown{background:var(--brown-700);}
.card--dark{background:var(--brown-900);}
.card--gold{background:var(--gold-bright);}
.card--row{flex-direction:row;align-items:center;gap:0.83cqw;}
.badge{
  display:inline-block;padding:0.3cqw 1cqw;border-radius:9999px;
  font-family:var(--font-sans);font-size:0.68cqw;font-weight:500;
}
.badge--brown{background:var(--brown-700);color:var(--gold-bright);}
.divider{width:4.2cqw;height:0.15cqw;background:var(--gold-bright);border-radius:2px;}
.number{
  font-family:var(--font-serif);font-size:1.46cqw;font-weight:700;
  color:var(--gold-bright);flex-shrink:0;
}
.number--sm{font-size:1.04cqw;}
.fill{flex:1;min-height:0;}
.gap-lg{gap:2.08cqw;}
.gap-sm{gap:0.42cqw;}
.text-center{text-align:center;}

/* ========== Slide BG Themes ========== */
.bg-cream{background:var(--cream-100);}
.bg-white{background:var(--white);}
.bg-dark{background:var(--brown-900);}
.bg-brown{background:var(--brown-700);}

/* ========== Step Flow (SIB, Vision) ========== */
.step-flow{display:flex;flex:1;min-height:0;}
.step{
  display:flex;flex-direction:column;gap:0.52cqw;
  padding:1.46cqw 1.25cqw;flex:1;align-items:center;
  text-align:center;
}
.step:first-child{border-radius:0.63cqw 0 0 0.63cqw;}
.step:last-child{border-radius:0 0.63cqw 0.63cqw 0;}

/* ========== Timeline (Roadmap) ========== */
.timeline{display:flex;flex:1;min-height:0;}
.timeline-phase{
  display:flex;flex-direction:column;gap:0.63cqw;
  padding:1.46cqw 1.04cqw;flex:1;
}
.timeline-phase:first-child{border-radius:0.63cqw 0 0 0.63cqw;}
.timeline-phase:last-child{border-radius:0 0.63cqw 0.63cqw 0;}

/* ========== Table ========== */
.table{display:flex;flex-direction:column;border-radius:0.63cqw;overflow:hidden;}
.table-row{display:flex;padding:0.73cqw 1.25cqw;align-items:center;}
.table-row--header{background:var(--brown-700);}
.table-row--alt{background:var(--cream-100);}
.table-row--total{background:var(--brown-900);}
.table-cell{flex:1;font-size:0.73cqw;}
.table-cell--mid{width:10.4cqw;flex:none;text-align:center;}

/* ========== Checklist ========== */
.check-item{display:flex;gap:0.63cqw;align-items:center;}
.check-box{
  width:1.25cqw;height:1.25cqw;border-radius:0.21cqw;
  border:0.1cqw solid var(--gold-bright);flex-shrink:0;
}
.check-box--dark{border-color:var(--brown-700);}

/* ========== Arrow ========== */
.arrow{
  font-size:1.46cqw;color:var(--gold-bright);font-weight:700;
  flex-shrink:0;padding:0 0.2cqw;
}

/* ========== Controls ========== */
#controls{
  position:fixed;bottom:1.5cqw;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:1cqw;
  background:rgba(61,31,31,0.85);border-radius:9999px;
  padding:0.4cqw 1.2cqw;backdrop-filter:blur(8px);
  z-index:100;opacity:0;transition:opacity .3s;
}
#app:hover #controls,#controls:focus-within{opacity:1;}
#controls button{
  background:none;border:none;color:var(--white);
  font-size:1.2cqw;cursor:pointer;padding:0.2cqw 0.5cqw;
  border-radius:4px;transition:background .2s;
}
#controls button:hover{background:rgba(255,255,255,0.15);}
#indicator{color:var(--cream-200);font-size:0.7cqw;font-variant-numeric:tabular-nums;}

/* ========== Menu Button ========== */
#menu-btn{
  position:fixed;top:1cqw;right:1cqw;z-index:101;
  background:rgba(61,31,31,0.7);border:none;color:var(--white);
  font-size:1.2cqw;cursor:pointer;padding:0.4cqw 0.6cqw;
  border-radius:0.3cqw;opacity:0;transition:opacity .3s;
  backdrop-filter:blur(8px);
}
#app:hover #menu-btn{opacity:1;}

/* ========== Sidebar ========== */
#sidebar{
  position:fixed;top:0;right:0;width:20cqw;height:100%;
  background:var(--brown-900);z-index:200;
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s ease;
}
#sidebar.open{transform:translateX(0);}
#sidebar.hidden{display:flex;}
#sidebar-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:1cqw 1.2cqw;border-bottom:1px solid var(--brown-700);
  color:var(--cream-200);font-size:0.8cqw;
}
#sidebar-header button{
  background:none;border:none;color:var(--cream-200);
  font-size:1.2cqw;cursor:pointer;
}
#agenda{
  list-style:none;overflow-y:auto;flex:1;padding:0.5cqw 0;
}
#agenda li{
  padding:0.5cqw 1.2cqw;color:var(--cream-200);font-size:0.7cqw;
  cursor:pointer;transition:background .2s;
}
#agenda li:hover,#agenda li.active{
  background:var(--brown-700);color:var(--gold-bright);
}
#sidebar-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:199;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
#sidebar-overlay.open{opacity:1;pointer-events:auto;}