/* =============================================================================
   meishi-compat.css  ―― 公開名刺テンプレート用の土台CSS（Tailwindユーティリティは入れない）
   2026-08-26

   なぜ Tailwind を入れないか（実測で判明）:
     既存テンプレート35本のうち25本に mr-2 / text-gray-500 / text-sm / rounded-md といった
     「Tailwind風の名前だが Bootstrap には存在しない＝これまで何もしていなかった」クラスが書かれている。
     Tailwind ユーティリティを読ませると、それらが突然効いてレイアウトが変わる
     （実例: vintage-clothing のボタンで mr-2 が効き、文字が2行に折り返した）。
     したがって名刺の土台には「リセット＋Bootstrap互換」だけを載せる。
     Tailwind ユーティリティが要るのはテンプレート選択画面だけなので、そちらは meishi-tailwind.css を使う。

   再生成: bash tools/build-tailwind.sh
   ============================================================================= */

/* ============================================================
   最小リセット
   Tailwind の preflight は切ってあるので（既存CSSの上に重ねても壊さないため）、
   Bootstrap の Reboot が担っていた分をここで最小限だけ補う。
   これが無いと body の既定マージン8pxで横スクロールが出て、
   box-sizing が content-box のままレイアウトが崩れる（実際に両方出た）。
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
/* 実測で分かった不足分（移行前後の比較で全35本に出た差）:
   ・body の文字色。Bootstrap は #212529、無いと真っ黒 #000 になる
   ・body の行間 1.5 と見出しの級数。無いとブラウザ既定になり、ページ全体の高さが1〜2%ずれる */
body{margin:0;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;-webkit-text-size-adjust:100%;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}
code,kbd,samp,pre{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}
/* Bootstrap5 の見出しは RFS（画面幅に応じて可変）。固定値にすると
   スマホで見出しが一回り大きくなり、行の折り返しまで変わる（実測で判明）。式ごと合わせる。 */
h1,.h1{font-size:calc(1.375rem + 1.5vw)}
h2,.h2{font-size:calc(1.325rem + .9vw)}
h3,.h3{font-size:calc(1.3rem + .6vw)}
h4,.h4{font-size:calc(1.275rem + .3vw)}
h5,.h5{font-size:1.25rem}
h6,.h6{font-size:1rem}
.lead{font-size:calc(1.275rem + .3vw);font-weight:300}
@media (min-width:1200px){
  h1,.h1{font-size:2.5rem}
  h2,.h2{font-size:2rem}
  h3,.h3{font-size:1.75rem}
  h4,.h4{font-size:1.5rem}
  .lead{font-size:1.25rem}
}
p{margin-top:0;margin-bottom:1rem}
ul,ol{margin-top:0;margin-bottom:1rem}
img,svg,video{vertical-align:middle}
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}
button{cursor:pointer}
a{color:inherit}
hr{margin:1rem 0;border:0;border-top:1px solid rgba(0,0,0,.15)}

/* ============================================================
   Bootstrap 互換レイヤー
   公開名刺テンプレートは Bootstrap CDN(約230KB) を読み込んでいたが、
   実際に使っているのは以下の30クラスほどしかない（全テンプレを grep して確認）。
   ここで同等のCSSを持たせ、CDNを外しても表示が変わらないようにする。
   ============================================================ */
.row{display:flex;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}
.row > *{padding-right:.5rem;padding-left:.5rem;width:100%}
.g-2{--bs-gap:.5rem;row-gap:.5rem}
.g-3{--bs-gap:.75rem;row-gap:.75rem}
.col-4{flex:0 0 auto;width:33.3333333%}
.col-6{flex:0 0 auto;width:50%}
.col-12{flex:0 0 auto;width:100%}
@media (min-width:768px){
  .col-md-4{flex:0 0 auto;width:33.3333333%}
  .col-md-6{flex:0 0 auto;width:50%}
}
.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.375rem}
.card-body{flex:1 1 auto;padding:1rem}
.card-text:last-child{margin-bottom:0}
.card-img-top{width:100%;border-top-left-radius:calc(.375rem - 1px);border-top-right-radius:calc(.375rem - 1px)}
.h-100{height:100%}
.img-fluid{max-width:100%;height:auto}
.small{font-size:.875em}
.text-muted{color:#6c757d}
.text-center{text-align:center}
.text-start{text-align:left}
.text-end{text-align:right}
.d-flex{display:flex}
.justify-content-start{justify-content:flex-start}
.justify-content-center{justify-content:center}
.justify-content-end{justify-content:flex-end}
.justify-content-between{justify-content:space-between}
.justify-content-around{justify-content:space-around}
.align-items-start{align-items:flex-start}
.align-items-center{align-items:center}
.align-items-end{align-items:flex-end}
.w-100{width:100%}
.position-relative{position:relative}
.position-absolute{position:absolute}
.d-block{display:block}
.d-none{display:none}
.rounded{border-radius:.375rem}
.border{border:1px solid rgba(0,0,0,.175)}
.border-top{border-top:1px solid rgba(0,0,0,.175)}
.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)}
.fw-bold{font-weight:700}
.ratio{position:relative;width:100%}
.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:""}
.ratio > *{position:absolute;top:0;left:0;width:100%;height:100%}
.ratio-16x9{--bs-aspect-ratio:56.25%}
.btn{display:inline-block;font-weight:400;line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;border-radius:.375rem}
.btn-sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.25rem}
.btn-outline-dark{color:#212529;border-color:#212529;background:transparent}
.btn-outline-dark:hover{color:#fff;background-color:#212529}
.me-1{margin-right:.25rem}.me-2{margin-right:.5rem}.ms-1{margin-left:.25rem}.ms-2{margin-left:.5rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}
.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.p-2{padding:.5rem}.p-3{padding:1rem}
.py-3{padding-top:1rem;padding-bottom:1rem}.pt-3{padding-top:1rem}
.g-2 > *{margin-bottom:.5rem}

/* ---- 既存43テンプレートが使う分（2026-08-26 追加） ----
   Tailwind にも同名で値の違うクラスがある（例: p-4 は Bootstrap 1.5rem / Tailwind 1rem）。
   この互換レイヤーは @tailwind utilities より後に置いてあるので、こちらが必ず勝つ。 */
.m-0{margin:0}
.m-1{margin:.25rem}
.m-2{margin:.5rem}
.m-3{margin:1rem}
.m-4{margin:1.5rem}
.m-5{margin:3rem}
.mt-0{margin-top:0}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:1rem}
.mt-4{margin-top:1.5rem}
.mt-5{margin-top:3rem}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:1rem}
.mb-4{margin-bottom:1.5rem}
.mb-5{margin-bottom:3rem}
.ms-0{margin-left:0}
.ms-1{margin-left:.25rem}
.ms-2{margin-left:.5rem}
.ms-3{margin-left:1rem}
.ms-4{margin-left:1.5rem}
.ms-5{margin-left:3rem}
.me-0{margin-right:0}
.me-1{margin-right:.25rem}
.me-2{margin-right:.5rem}
.me-3{margin-right:1rem}
.me-4{margin-right:1.5rem}
.me-5{margin-right:3rem}
.mx-0{margin-left:0;margin-right:0}
.mx-1{margin-left:.25rem;margin-right:.25rem}
.mx-2{margin-left:.5rem;margin-right:.5rem}
.mx-3{margin-left:1rem;margin-right:1rem}
.mx-4{margin-left:1.5rem;margin-right:1.5rem}
.mx-5{margin-left:3rem;margin-right:3rem}
.my-0{margin-top:0;margin-bottom:0}
.my-1{margin-top:.25rem;margin-bottom:.25rem}
.my-2{margin-top:.5rem;margin-bottom:.5rem}
.my-3{margin-top:1rem;margin-bottom:1rem}
.my-4{margin-top:1.5rem;margin-bottom:1.5rem}
.my-5{margin-top:3rem;margin-bottom:3rem}
.p-0{padding:0}
.p-1{padding:.25rem}
.p-2{padding:.5rem}
.p-3{padding:1rem}
.p-4{padding:1.5rem}
.p-5{padding:3rem}
.pt-0{padding-top:0}
.pt-1{padding-top:.25rem}
.pt-2{padding-top:.5rem}
.pt-3{padding-top:1rem}
.pt-4{padding-top:1.5rem}
.pt-5{padding-top:3rem}
.pb-0{padding-bottom:0}
.pb-1{padding-bottom:.25rem}
.pb-2{padding-bottom:.5rem}
.pb-3{padding-bottom:1rem}
.pb-4{padding-bottom:1.5rem}
.pb-5{padding-bottom:3rem}
.ps-0{padding-left:0}
.ps-1{padding-left:.25rem}
.ps-2{padding-left:.5rem}
.ps-3{padding-left:1rem}
.ps-4{padding-left:1.5rem}
.ps-5{padding-left:3rem}
.pe-0{padding-right:0}
.pe-1{padding-right:.25rem}
.pe-2{padding-right:.5rem}
.pe-3{padding-right:1rem}
.pe-4{padding-right:1.5rem}
.pe-5{padding-right:3rem}
.px-0{padding-left:0;padding-right:0}
.px-1{padding-left:.25rem;padding-right:.25rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-3{padding-left:1rem;padding-right:1rem}
.px-4{padding-left:1.5rem;padding-right:1.5rem}
.px-5{padding-left:3rem;padding-right:3rem}
.py-0{padding-top:0;padding-bottom:0}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:1rem;padding-bottom:1rem}
.py-4{padding-top:1.5rem;padding-bottom:1.5rem}
.py-5{padding-top:3rem;padding-bottom:3rem}
.mx-auto{margin-left:auto;margin-right:auto}
.ms-auto{margin-left:auto}
.me-auto{margin-right:auto}
.container{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto}
@media (min-width:576px){.container{max-width:540px}}
@media (min-width:768px){.container{max-width:720px}}
@media (min-width:992px){.container{max-width:960px}}
.container-fluid{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:1rem}.gap-4{gap:1.5rem}
.flex-row{flex-direction:row}.flex-column{flex-direction:column}
.flex-wrap{flex-wrap:wrap}.flex-grow-1{flex-grow:1}.flex-fill{flex:1 1 auto}
.card-header{padding:.5rem 1rem;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}
.card-footer{padding:.5rem 1rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}
.card-title{margin-bottom:.5rem}
.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:.375rem}
.list-group-item{position:relative;display:block;padding:.5rem 1rem;color:#212529;background-color:#fff;border:1px solid rgba(0,0,0,.125)}
.badge{display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.375rem}
.progress{display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.375rem}
.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;text-align:center;white-space:nowrap;background-color:#0d6efd}
.btn-primary{color:#fff;background-color:#0d6efd;border-color:#0d6efd}
.btn-primary:hover{background-color:#0b5ed7;border-color:#0a58ca}
.btn-outline-secondary{color:#6c757d;border-color:#6c757d;background:transparent}
.btn-outline-secondary:hover{color:#fff;background-color:#6c757d}
.btn-close{box-sizing:content-box;width:1em;height:1em;padding:.25em;color:#000;background:transparent;border:0;opacity:.5;font-size:1.25rem;line-height:1;cursor:pointer}
.btn-close:hover{opacity:.85}
.bg-light{background-color:#f8f9fa}
.bg-white{background-color:#fff}
.bg-primary{background-color:#0d6efd}
.bg-dark{background-color:#212529}
.text-primary{color:#0d6efd}
.text-secondary{color:#6c757d}
.text-danger{color:#dc3545}
.text-success{color:#198754}
.text-warning{color:#ffc107}
.text-white{color:#fff}
.text-dark{color:#212529}
.text-decoration-none{text-decoration:none}
.rounded-pill{border-radius:50rem}
.rounded-circle{border-radius:50%}
.rounded-lg{border-radius:.5rem}
.rounded-3{border-radius:.5rem}
.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)}
.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)}
.fw-semibold{font-weight:600}.fw-normal{font-weight:400}.fw-light{font-weight:300}
.overflow-hidden{overflow:hidden}
.position-fixed{position:fixed}.position-sticky{position:sticky}
.mw-100{max-width:100%}.mh-100{max-height:100%}
.h-auto{height:auto}
.float-start{float:left}.float-end{float:right}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}