/* ========================================
   travel.css
   GFI 交通費・出張ルール
   Attendance page visual system aligned
======================================== */
:root{
  --travel-blue:#1597cf;
  --travel-blue-dark:#0676ad;
  --travel-soft:#eef7fc;
  --travel-border:#d8e8ef;
  --travel-ink:#18323f;
  --travel-muted:#667984;
  --travel-danger:#c93a3a;
  --travel-danger-bg:#fff4f4;
}

[id]{ scroll-margin-top:100px; }
.travel-page{ max-width:1200px; padding-bottom:56px; }
.travel-hero{ margin-bottom:1.25rem; }
.travel-hero .page-header-title{ margin-bottom:.7rem; }
.travel-hero .page-header-lead strong{ color:#79bfde; }
.travel-version{
  margin-top:.7rem;
  font-family:var(--font-head);
  font-size:.78rem!important;
  letter-spacing:.06em;
  opacity:.72!important;
}

/* section shell: same rhythm as attendance */
.travel-intro,
.travel-section{
  background:#fff;
  border:1px solid rgba(15,23,42,.07);
  border-radius:18px;
  box-shadow:var(--shadow-card);
  padding:1.35rem;
  margin:0 0 1.25rem;
}
.travel-intro{ border-top:4px solid var(--travel-blue); }
.travel-section-head{ margin-bottom:1rem; }
.travel-kicker{
  display:block;
  margin-bottom:.25rem;
  color:var(--travel-blue-dark);
  font-family:var(--font-head);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
}
.travel-section-head h2{
  margin:0 0 .35rem;
  color:var(--navy);
  font-size:1.32rem;
  font-weight:900;
  line-height:1.45;
}
.travel-section-head p,
.travel-intro>p{
  margin:0;
  color:var(--text-light);
  line-height:1.8;
}

.travel-message{
  margin-top:1rem;
  padding:1rem;
  background:var(--travel-soft);
  border-radius:14px;
  border-left:4px solid var(--travel-blue);
  display:grid;
  gap:.25rem;
}
.travel-message strong{ color:#0b3858; font-size:1.05rem; }
.travel-message span{ color:#334155; font-size:.92rem; line-height:1.7; }

/* quick check */
.travel-quick-grid{ display:grid; grid-template-columns:1fr; gap:.8rem; }
.travel-quick-card{
  padding:1.1rem;
  border:1px solid var(--travel-border);
  border-radius:15px;
  background:#fff;
}
.travel-card-label{
  display:inline-flex;
  padding:.25rem .55rem;
  border-radius:999px;
  margin-bottom:.65rem;
  background:var(--travel-soft);
  color:var(--travel-blue-dark);
  font-size:.72rem;
  font-weight:900;
  line-height:1.3;
}
.travel-quick-card h3{ margin:0 0 .35rem; color:var(--navy); font-size:1.03rem; }
.travel-quick-card p{ margin:0; color:var(--text-light); font-size:.88rem; line-height:1.65; }
.travel-quick-card.is-primary{ border-color:#bfe4f4; background:#f8fdff; }
.travel-quick-card.is-danger{ border-color:#fecdd3; background:#fff1f2; }
.travel-quick-card.is-danger .travel-card-label{ background:#ffe4e6; color:#be123c; }

/* taxi section */
.taxi-section{ border-top:4px solid var(--travel-danger); }
.taxi-alert{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding:1rem;
  border-radius:14px;
  background:#fff1f2;
  border:1px solid #fecdd3;
  margin-bottom:1rem;
}
.taxi-alert-mark{
  display:grid;
  place-items:center;
  flex:0 0 2.1rem;
  height:2.1rem;
  border-radius:999px;
  background:var(--travel-danger);
  color:#fff;
  font-weight:900;
}
.taxi-alert strong{ display:block; color:#9f1239; margin-bottom:.2rem; }
.taxi-alert p{ margin:0; color:#9f1239; line-height:1.7; font-size:.9rem; }
.rule-check-list{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.rule-check-list li{
  position:relative;
  display:flex;
  gap:.85rem;
  padding:1rem;
  border:1px solid var(--travel-border);
  border-radius:14px;
  background:#f8fafc;
}
.rule-check-list li>span{
  display:grid;
  place-items:center;
  flex:0 0 2rem;
  height:2rem;
  border-radius:999px;
  background:var(--travel-blue);
  color:#fff;
  font-family:var(--font-head);
  font-size:.72rem;
  font-weight:800;
}
.rule-check-list strong{ display:block; color:var(--navy); margin-bottom:.15rem; }
.rule-check-list p{ margin:0; color:var(--text-light); font-size:.88rem; line-height:1.65; }
.cost-warning{
  margin-top:1rem;
  padding:1rem;
  border-radius:14px;
  border:1px solid #fecdd3;
  background:#fff1f2;
  color:#9f1239;
  line-height:1.7;
}

/* choose rule */
.travel-type-grid{ display:grid; grid-template-columns:1fr; gap:.8rem; }
.travel-type-card{
  display:flex;
  gap:.9rem;
  padding:1.1rem;
  border:1px solid var(--travel-border);
  border-radius:15px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.travel-type-card:hover{ border-color:#9bd4ed; background:#faffff; transform:translateY(-2px); }
.travel-type-no{
  display:grid;
  place-items:center;
  flex:0 0 2.4rem;
  height:2.4rem;
  border-radius:10px;
  background:var(--navy);
  color:#fff;
  font-family:var(--font-head);
  font-weight:800;
  font-size:.78rem;
}
.travel-type-card h3{ margin:0 0 .25rem; color:var(--navy); font-size:1.02rem; }
.travel-type-card p{ margin:0 0 .5rem; color:var(--text-light); font-size:.88rem; line-height:1.65; }
.travel-type-card strong{ color:var(--travel-blue-dark); font-size:.86rem; }

/* regulation accordion */
.regulation-section{ scroll-margin-top:90px; }
.regulation-nav{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.regulation-nav a{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid var(--travel-border);
  background:#f8fafc;
  color:var(--travel-blue-dark);
  font-size:.76rem;
  font-weight:800;
  text-decoration:none;
}
.regulation-item{
  margin:.65rem 0;
  border:1px solid var(--travel-border);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  scroll-margin-top:90px;
}
.regulation-item summary{
  position:relative;
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:1rem 2.8rem 1rem 1rem;
  cursor:pointer;
  list-style:none;
  font-weight:900;
  color:var(--navy);
  background:#fff;
}
.regulation-item summary::-webkit-details-marker{ display:none; }
.regulation-item summary::after{
  content:"+";
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  width:1.8rem;
  height:1.8rem;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--travel-soft);
  color:var(--travel-blue-dark);
  font-size:1.05rem;
  font-weight:800;
}
.regulation-item[open] summary::after{ content:"−"; }
.regulation-item summary span{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  min-width:3.5rem;
  min-height:1.8rem;
  padding:.2rem .5rem;
  border-radius:8px;
  background:var(--travel-soft);
  color:var(--travel-blue-dark);
  font-size:.74rem;
  text-align:center;
}
.regulation-item.important-item{ border-color:#fecdd3; }
.regulation-item.important-item summary{ background:#fff7f7; }
.regulation-item.important-item summary span{ background:#ffe4e6; color:#be123c; }
.regulation-body{
  padding:0 1rem 1rem;
  border-top:1px solid #edf2f4;
  color:#334155;
  line-height:1.9;
}
.regulation-body p{ margin:1rem 0 0; }
.regulation-body h4{ margin:1.2rem 0 .35rem; color:var(--navy); font-size:.95rem; }
.regulation-body ol,
.regulation-body ul{ margin:.6rem 0 0; padding-left:1.45rem; }
.regulation-body li{ margin:.42rem 0; }
.limit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:1rem; }
.limit-grid div{ padding:1rem; border-radius:12px; background:#f8fafc; border:1px solid var(--travel-border); text-align:center; }
.limit-grid span,.limit-grid strong{ display:block; }
.limit-grid span{ color:var(--text-light); font-size:.78rem; }
.limit-grid strong{ margin-top:.2rem; color:var(--navy); font-size:1.15rem; }

/* final card: same cadence as attendance dark standards section */
.travel-final{
  margin:0 0 1.5rem;
  padding:1.45rem;
  border-radius:18px;
  background:linear-gradient(145deg,#0b1220,#172033);
  color:#fff;
  box-shadow:var(--shadow-card);
  text-align:center;
}
.travel-final .travel-kicker{ color:#79bfde; }
.travel-final h2{ margin:.35rem 0 .6rem; color:#fff; }
.travel-final p{ margin:0 0 .6rem; color:rgba(255,255,255,.75); }
.travel-final strong{ color:#fff; }

@media (min-width:700px){
  .travel-intro,.travel-section{ padding:1.7rem; }
  .travel-quick-grid{ grid-template-columns:repeat(2,1fr); }
  .travel-type-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:699px){
  .travel-page{ padding-bottom:40px; }
  .travel-intro,.travel-section{ padding:1.1rem; border-radius:15px; }
  .travel-version{ font-size:.7rem!important; }
  .regulation-item summary{ align-items:flex-start; gap:.55rem; padding:.9rem 2.65rem .9rem .85rem; font-size:.9rem; }
  .regulation-item summary span{ min-width:3.1rem; }
  .regulation-body{ padding:0 .9rem .95rem; font-size:.91rem; line-height:1.85; }
  .limit-grid{ grid-template-columns:1fr; }
}