/* ==========================================================
   v2.0 Layout Base START
   この版を基準に今後以下を実装する
   1. PCレイアウト調整
   2. スマホレイアウト再設計
   3. 列幅の変数化
   4. JavaScript復旧
   ========================================================== */

/* ==========================================================
   STEP6.2 Layout Variables
   ========================================================== */
:root{
  --gm-col-name:minmax(260px,1fr);
  --gm-col-year:220px;
  --gm-col-month:220px;
  --gm-col-payment:110px;
  --gm-col-gap:14px;
}

.gm-grid-header,
.gm-maintenance-item{
  grid-template-columns:
    var(--gm-col-name)
    var(--gm-col-year)
    var(--gm-col-month)
    var(--gm-col-payment);
  gap:var(--gm-col-gap);
}

/* STEP1 Assembly - 外枠のみ */
.gm-page{
  max-width:1680px;
  min-height:0;
  margin:40px auto;
  padding:0 20px;
}
.gm-visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.gm-accordion{
  overflow:hidden; /* layout only - border/radius/shadow handled by Design System */
}
.gm-maintenance-card{
  padding:8px 0;
}



/* STEP2 Assembly - Header / Footer */
.gm-accordion-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:26px 34px 18px;
}

.gm-accordion-body{
  padding:0 34px 28px;
}

.gm-maintenance-card-header{
  margin-bottom:12px;
}

.gm-maintenance-card-header h3{
  margin:0;
  font-size:1.9rem;
}

.gm-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  background:none;
  border:none;
  font-size:2rem;
  font-weight:800;
  cursor:pointer;
  padding:0;
  color:#2d241d;
  text-decoration:none;
}
.gm-toggle span{color:#2d241d;}


.gm-arrow{
  display:inline-block;
  width:1.2em;
  font-size:1em;
  line-height:1;
  transform-origin:center;
}

.gm-toggle-hint{
  display:block;
  color:#888;
  font-size:.9rem;
  margin-top:8px;
}

.gm-accordion-footer{
  padding:20px 34px 28px;
  
  text-align:right;
}

.gm-button-clear{
  /* Design System button appearance */
}



/* STEP3 Assembly - Grid Header */
.gm-grid-header{
  padding-bottom:8px;
  align-items:center;

  font-weight:700;
  padding:0 0 10px;
  margin-bottom:14px;
  
}



/* STEP4 Assembly - Item Layout */
.gm-maintenance-item{
  display:grid;
  align-items:center;
  padding:8px 0;
  
}

.gm-maintenance-item:last-child{
  border-bottom:none;
}

.gm-maintenance-field-name{
  display:flex;
  align-items:center;
  min-height:44px;
}




/* ==========================================================
   STEP7 Assembly - Appearance v4.7
   質感のみ追加（レイアウト変更なし）
   ========================================================== */
.gm-accordion{
  background:linear-gradient(180deg,#fffdfb 0%,#fcfaf7 100%);
  border:1px solid rgba(184,151,102,.18);
  border-radius:22px;
  box-shadow:0 12px 30px rgba(60,40,20,.05);
}
.gm-accordion-header{
  border-bottom:1px solid rgba(184,151,102,.12);
}
.gm-grid-header{
  color:#4b3828;
  letter-spacing:.04em;
}
.gm-grid-header>div:not(:first-child){
  font-size:1.05rem;
}
.gm-header-hint{
  color:#8b6b3f;
  font-weight:700;
}
.gm-maintenance-item{
  border-radius:14px;
  transition:background .2s ease, box-shadow .2s ease;
}
.gm-maintenance-item:hover{
  background:#fffdfa;
  box-shadow:inset 0 0 0 1px rgba(184,151,102,.10);
}
.gm-maintenance-item-name{
  color:#2f241b;
  font-weight:600;
  letter-spacing:.02em;
}
.gm-input:focus,
.gm-select:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(184,151,102,.18);
}



/* ==========================================================
   STEP7-2 UI Polish
   ========================================================== */
.gm-header-hint::before{
  content:"AUTO";
  display:inline-block;
  margin-right:.45rem;
  padding:.12rem .45rem;
  border-radius:999px;
  background:#8b6b3f;
  color:#fff;
  font-size:.68rem;
  letter-spacing:.08em;
}
.gm-grid-header>div:not(:first-child){
  position:relative;
}
.gm-grid-header>div:not(:first-child)::after{
  content:"";
  display:block;
  width:28px;
  height:2px;
  margin:8px auto 0;
  background:rgba(139,107,63,.45);
  border-radius:99px;
}
.gm-input,.gm-select{
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.gm-input::placeholder{
  color:#b8ae9f;
}
.gm-select{
  cursor:pointer;
}
.gm-button-clear{
  border-radius:999px;
}
@media (max-width:900px){
 .gm-header-hint::before{
   font-size:.6rem;
   padding:.08rem .35rem;
 }
}



/* ==========================================================
   STEP7-3 Final Finish
   ========================================================== */
.gm-accordion{
  position:relative;
}
.gm-accordion::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,#b89766,#e2c999,#b89766);
}
.gm-toggle{
  transition:color .2s ease;
}
.gm-toggle:hover{
  color:#8b6b3f;
}
.gm-arrow{
  color:#8b6b3f;
}
.gm-input:hover,
.gm-select:hover{
  border-color:rgba(184,151,102,.55);
}
.gm-maintenance-item{
  border-bottom:1px solid rgba(184,151,102,.08);
}
.gm-button-clear{
  transition:transform .15s ease,box-shadow .2s ease;
}
.gm-button-clear:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(60,40,20,.12);
}


/* STEP5 Assembly - UI / State */
.pay-error{
  border:2px solid #d9534f !important;
}

.pay-msg{
  display:none;
  color:#d9534f;
  font-size:12px;
  margin-top:4px;
}




/* STEP6 Assembly - Content Wrapper / Responsive */


@media (min-width:901px){
  .gm-label{display:none;}
  .gm-mobile-fields{
    display:grid;
    grid-template-columns:220px 220px 110px;
    gap:18px;
    align-items:end;
  }
  .gm-maintenance-item{
  display:grid;
    grid-template-columns:minmax(260px,1fr) auto;
    align-items:center;
  }
}



.gm-maintenance-card-content{
  display:block;
}


@media (max-width:900px){

  .gm-page{padding:0 10px;margin:20px auto;}
  .gm-accordion-header{padding:14px 16px 10px;}
  .gm-accordion-body{padding:0 16px 14px;}
  .gm-accordion-footer{padding:10px 16px 14px;}

  .gm-grid-header{display:none;}
  .gm-maintenance-card{padding:8px 0;}
  .gm-maintenance-card-header{margin-bottom:4px;}
  .gm-maintenance-card-header h3{font-size:1.25rem;}

  .gm-toggle{font-size:1.6rem;gap:8px;}

  .gm-maintenance-item{
    display:block;
    padding:10px 0;
  }

  .gm-maintenance-field-name{
    display:block;
    margin-bottom:4px;
    font-size:.94rem;
    min-height:auto;
    line-height:1.35;
  }

  .gm-mobile-fields{
    display:grid;
    grid-template-columns:1fr 1fr 78px;
    gap:4px;
    align-items:end;
  }

  .gm-label{
    display:block;
    font-size:10px;
    font-weight:700;
    margin-bottom:1px;
  }
  .gm-maintenance-item input,
  .gm-maintenance-item select{
    width:100%;
    box-sizing:border-box;
  }
}








/* ===== Layout Final STEP2 ===== */
.gm-accordion-header{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  column-gap:16px;
}
.gm-toggle{justify-self:start;}
.gm-header-hint{
  justify-self:end;
  font-size:.8rem;
  color:#888;
  font-weight:600;
}
.gm-grid-header{
  display:grid;
  grid-template-columns:var(--gm-col-name) var(--gm-col-year) var(--gm-col-month) var(--gm-col-payment);
  align-items:center;
}
.gm-grid-header>div{text-align:center;font-weight:700;}
.gm-grid-header>div:first-child{text-align:left;color:transparent;}
.gm-maintenance-item-name{font-weight:600;}
.gm-button-clear{padding:8px 16px;font-size:.9rem;min-width:96px;}
@media(max-width:900px){
 .gm-header-hint{font-size:.72rem;}
}



@media (max-width:900px){
  .gm-button-clear{
    padding:7px 14px;
    font-size:.85rem;
    min-width:88px;
  }
}

/* ==========================================================
   STEP7.3.1 Mobile Polish
   スマホ微調整（PC影響なし）
   ========================================================== */
@media (max-width:900px){

  /* ヘッダーと最初の項目の距離を縮小 */
  .gm-accordion-body{
    padding:0 16px 8px;
  }
  .gm-maintenance-card{
    padding:2px 0;
  }

  /* 各項目の上下余白を少し詰める */
  .gm-maintenance-item{
    padding:6px 0;
  }

  /* 項目名と入力欄の距離 */
  .gm-maintenance-field-name{
    margin-bottom:2px;
  }

  /* 入力欄高さ */
  .gm-input,
  .gm-select{
    height:52px;
  }

  /* AUTOを少し小さく */
  .gm-header-hint::before{
    transform:scale(.92);
    transform-origin:left center;
  }

  /* 矢印を少し小さく */
  .gm-toggle{
    font-size:1.45rem;
    gap:6px;
  }
}


/* ==========================================================
   STEP7.3.2 Mobile Gap Fix
   スマホ：タイトル直下の不要な余白を除去
   ========================================================== */
@media (max-width:900px){

  .gm-maintenance-card{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  .gm-maintenance-card-header{
    display:none !important;
    margin:0 !important;
    padding:0 !important;
    min-height:0 !important;
  }

  .gm-maintenance-card-body,
  .gm-input-list{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  .gm-input-list .gm-maintenance-item:first-child{
    padding-top:0 !important;
  }

  .gm-accordion-body{
    padding-top:0 !important;
  }
}


/* ===== STEP5.6 Accordion ===== */
.gm-accordion-body,
.gm-accordion-footer{
  overflow:hidden;
  transition:max-height .35s ease,opacity .25s ease,padding .25s ease;
}
.gm-accordion.is-closed .gm-accordion-body,
.gm-accordion.is-closed .gm-accordion-footer{
  max-height:0 !important;
  opacity:0;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.gm-accordion.is-open .gm-arrow{
  transform:rotate(90deg);
}
.gm-arrow{
  transition:transform .25s ease;
}



/* v5.7 Accordion interaction hint */
.gm-toggle-hint{
  grid-column:1 / 2;
  margin-left:2.6rem;
  margin-top:4px;
  color:#8c8c8c;
  font-size:.82rem;
  font-weight:600;
}
@media (max-width:900px){
  .gm-toggle-hint{
    margin-left:2.1rem;
    font-size:.74rem;
  }
}

.gm-floating-panel{position:fixed;left:20px;bottom:20px;background:#fff8df;border:2px solid #d8c08c;border-radius:14px;padding:14px;box-shadow:0 8px 20px rgba(0,0,0,.18);z-index:9999;min-width:210px}
.gm-floating-title{font-size:13px;color:#6b4b2a}.gm-floating-value{font-size:28px;font-weight:700}
.gm-floating-sub{font-size:12px;color:#666}
#gm-floating-close{position:absolute;top:6px;right:8px;border:none;background:none;cursor:pointer}
.gm-floating-car{
  display:none;
  position:fixed;
  left:48px;
  bottom:28px;
  font-size:63px;
  cursor:pointer;
  z-index:10000;
}
.gm-floating-car .gm-delta{
  position:absolute;
  left:50%;
  bottom:118%;
  transform:translateX(-50%);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  font-size:16px;
  font-weight:700;
}
.gm-floating-car .gm-delta.show{
  animation:gmDeltaPop .75s ease forwards;
}
@keyframes gmDeltaPop{
  0%{opacity:0;transform:translate(-50%,8px);}
  20%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-20px);}
}


@media (max-width:900px){
  .gm-floating-car{
    left:40px;
    bottom:22px;
    font-size:54px;
  }
  .gm-floating-car .gm-delta{
    font-size:13px;
    bottom:120%;
  }
}







/* ===== Layout Final STEP5 ===== */
/* PC */
@media (min-width:901px){
  .gm-label{display:none;}
  .gm-maintenance-item{
    display:grid;
    grid-template-columns:minmax(260px,1fr) auto;
    align-items:center;
    gap:var(--gm-col-gap);
    padding:8px 0;
  }
  .gm-mobile-fields{
    display:grid;
    grid-template-columns:var(--gm-col-year) var(--gm-col-month) var(--gm-col-payment);
    gap:18px;
    align-items:end;
  }
}
/* Mobile */
@media (max-width:900px){
  .gm-maintenance-item{display:block;padding:6px 0;}
  .gm-mobile-fields{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 78px;
    gap:4px;
    align-items:end;
  }
  .gm-field-payment{min-width:78px;}
}




/* ===== Clear Button Override v2 (Assembly Only) ===== */
.gm-button.gm-button--outline.gm-button-clear{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:92px;
    min-width:92px;
    height:42px;
    padding:0;
    background:#f3f3f3;
    color:#666;
    border:1px solid #cfcfcf;
    border-radius:12px;
    font-size:15px;
    font-weight:600;
    line-height:1;
    box-shadow:none;
}
@media (max-width:900px){
.gm-button.gm-button--outline.gm-button-clear{
    width:84px;
    min-width:84px;
    height:40px;
    font-size:14px;
}}


/* ===== Floating Card VisualViewport Follow ===== */
.gm-floating-panel.gm-keyboard-open{
  transition:bottom .18s ease;
}
.gm-floating-car.gm-keyboard-open{
  transition:bottom .18s ease,left .18s ease;
}


.shake{animation:gmCarShake .45s ease;}
@keyframes gmCarShake{
0%{transform:rotate(0) scale(1);}
20%{transform:rotate(-10deg) scale(1.08);}
40%{transform:rotate(10deg) scale(1.12);}
60%{transform:rotate(-8deg) scale(1.08);}
80%{transform:rotate(6deg) scale(1.04);}
100%{transform:rotate(0) scale(1);}
}


/* ===== Monthly Graph v0.1 ===== */
.gm-monthly-chart{
max-width:1680px;
margin:24px auto;
padding:18px;
background:#fff;
border:1px solid #ddd;
border-radius:16px;
}
.gm-month-row{
display:grid;
grid-template-columns:42px 1fr 82px;
align-items:center;
gap:10px;
margin:10px 0;
}
.gm-month-track{
height:28px;
background:transparent;
border-radius:999px;
overflow:visible;
}
.gm-month-bar{
display:flex;
height:100%;
border-radius:999px;
overflow:hidden;
box-shadow:0 2px 6px rgba(0,0,0,.08);
transition:width .35s ease;
}
.gm-month-bar{display:flex;height:100%;width:0%;transition:width .35s ease;}
.gm-bar-fixed{background:#8b6b3f;}
.gm-bar-fuel{background:#4f81bd;}
.gm-bar-maint{background:#5b9b5b;}
.gm-bar-tax{background:#d6b656;}
.gm-bar-other{background:#d96b6b;}
@media(max-width:900px){
.gm-month-row{grid-template-columns:34px 1fr 70px;}
.gm-month-track{height:18px;}
}


.gm-vertical-chart{max-width:1680px;margin:24px auto;padding:18px;background:#fff;border:1px solid #ddd;border-radius:16px;overflow:hidden;box-sizing:border-box}
.gm-v-wrap{display:flex;align-items:flex-end;justify-content:center;gap:18px;width:100%;min-width:0;flex:1 1 auto;margin:0}
.gm-v-col{display:flex;flex-direction:column;align-items:center;min-width:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.gm-v-col:focus-visible{outline:2px solid #8b5e3c;outline-offset:3px;border-radius:6px}
.gm-v-bar{display:flex;flex-direction:column-reverse;overflow:hidden}
.gm-v-label{font-size:12px;margin-top:6px}

@media(max-width:900px){
    .gm-vertical-chart{margin:16px 8px;padding:14px 8px}
    .gm-v-chart-area{width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain}
    .gm-v-wrap{gap:4px}
    .gm-v-bar{width:22px}
    .gm-v-col{min-width:0}
    .gm-v-axis{width:42px;font-size:10px}

    .gm-v-value{
        display:inline-block;
        transform:rotate(-90deg);
        transform-origin:center;
        white-space:nowrap;
        font-size:10px;
    }
}
.gm-v-chart-area{display:flex;align-items:flex-end;justify-content:center;gap:10px;min-width:0}
.gm-v-axis{display:none}
.gm-v-axis div{position:relative}



/* ===== Composition Pie Chart ===== */
.gm-pie-section{max-width:1680px;margin:24px auto;padding:18px;background:#fff;border:1px solid #ddd;border-radius:16px}
.gm-pie-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.gm-pie-canvas{width:280px;height:280px;max-width:90vw}
.gm-pie-empty{color:#777;text-align:center;padding:40px 0}
.gm-pie-legend{width:100%;display:flex;flex-direction:column;gap:8px}
.gm-pie-item{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.gm-pie-left{display:flex;align-items:center;gap:8px}
.gm-pie-color{width:14px;height:14px;border-radius:50%}


.gm-summary-box{max-width:1680px;margin:24px auto;padding:0;background:linear-gradient(180deg,#fffdfb,#fcfaf7);border:1px solid rgba(184,151,102,.18);border-radius:20px;box-shadow:0 12px 30px rgba(60,40,20,.05);overflow:hidden}
.gm-summary-row{display:flex;align-items:center;justify-content:space-between;padding:18px 20px}
.gm-summary-row+.gm-summary-row{border-top:1px solid rgba(184,151,102,.15)}
.gm-summary-label{display:flex;align-items:center;gap:10px;font-weight:700;color:#6e5338}
.gm-summary-label i{color:#b89766;width:22px;text-align:center}
.gm-summary-value{font-size:1.8rem;font-weight:800;color:#2f241b}




.gm-medal{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:20px;font-weight:700;color:#fff;border:2px solid rgba(255,255,255,.7);
box-shadow:inset 0 2px 2px rgba(255,255,255,.7),inset 0 -4px 5px rgba(0,0,0,.25),0 3px 8px rgba(0,0,0,.25)}
.gm-gold{background:linear-gradient(180deg,#8b6500,#ffd84a,#fff7bf,#c28a00)}
.gm-silver{background:linear-gradient(180deg,#717b84,#fff,#b6bec6,#6b7278)}
.gm-bronze{background:linear-gradient(180deg,#6e391a,#e0a97a,#b86435,#6a3418)}
.gm-barfill{position:relative;overflow:hidden}
.gm-barfill::after{content:"";position:absolute;left:-35%;top:0;width:30%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
transform:skewX(-25deg);animation:shine 2.8s linear infinite}
@keyframes shine{to{left:135%}}



.gm-summary-box{
background:linear-gradient(180deg,#fffefc,#f7f1e7);
border:1px solid rgba(184,151,102,.35);
border-radius:22px;
box-shadow:0 16px 40px rgba(70,45,20,.10), inset 0 1px 0 rgba(255,255,255,.8);
overflow:hidden
}
.gm-summary-row{padding:22px 24px;position:relative}
.gm-summary-row:before{
content:"";
position:absolute;left:0;top:0;right:0;height:2px;
background:linear-gradient(90deg,#caa96d,#f4e2b5,#caa96d)}
.gm-summary-label{
font-size:1.02rem;font-weight:800;letter-spacing:.03em;color:#5b4128}
.gm-summary-label i{
display:inline-flex;
align-items:center;
justify-content:center;
width:28px;
font-size:1.35rem;
color:#b89766;
background:none;
border:none;
border-radius:0;
box-shadow:none;
margin-right:14px}
.gm-summary-value{
font-size:2rem;
font-weight:900;
color:#2b2118;
text-shadow:0 1px 0 #fff}



.gm-summary-box{
position:relative;
background:linear-gradient(180deg,#fffefc 0%,#fbf7f0 38%,#f4ecdf 100%);
}
.gm-summary-row{
border-left:5px solid #c7a25c;
transition:transform .18s ease,box-shadow .18s ease;
}
.gm-summary-row:hover{
transform:translateY(-3px);
box-shadow:0 12px 24px rgba(0,0,0,.10);
}
.gm-summary-label i{
background:none!important;
color:#b89766!important;
box-shadow:none!important;
border-radius:0!important;
}