/**
 * MALLINK 小型軽量CSS+JS
    HELP DETAILS TOOLTIPS

/var/www/mallink/ml_style/ml_dtip.css 
/var/www/mallink/ml_js/ml_dtip.js			

使用例 example は、末尾：
 */

/* ラベル横に💡 */
.label-row{display:flex;align-items:baseline;gap:.4em}

/* 💡 */
.ml-dtip{display:inline-flex;position:relative;margin-left:.1em}
.ml-dtip>summary{
  list-style:none;display:inline-flex;align-items:center;justify-content:center;
  width:1.35em;height:1.35em;padding:0;margin:0;line-height:1;cursor:pointer;
  border:1px solid #bbb;border-radius:999px;background:#fff;font-weight:700;
  -webkit-user-select:none;user-select:none
}
.ml-dtip>summary::-webkit-details-marker{display:none}
.ml-dtip[open]>summary{border-color:#555}

/* バブル（ポータル直下でも効くよう単体セレクタ） */
.ml-dtip-body{
  position:fixed; left:-9999px; top:-9999px; /* 初期は画面外 */
  z-index:2147483000;
  max-width:32rem;
  background:#22c55e; color:#fff; border:1px solid #0f5f35;/* #1a7f49 #5a67d8 #2ba66b #2f855a */
/*  padding:.6em .8em; */
  padding: 10px 15px;border-radius:.5em; box-shadow:0 8px 28px rgba(0,0,0,.20); 
  font-size:12px; line-height:1.45; 
  pointer-events:auto;
}

/* 狭幅時は上に逃がす（右/左指定時でも） */
@media (max-width:640px){
  .ml-dtip:not([data-pos="bottom"]):not([data-pos="top"]) .ml-dtip-body{
    left:50%;top:auto;bottom:100%;transform:translate(-50%,-.6rem)
  }
}



/**
example:
    <link rel="stylesheet" href="ml_style/ml_dtip.css?<?php echo time() ?>">
    <script src="ml_js/ml_dtip.js?<?php echo time(); ?>" defer></script>

    <link rel="stylesheet" href="../../ml_style/ml_dtip.css?<?php echo time() ?>">
    <script src="../../ml_js/ml_dtip.js?<?php echo time(); ?>" defer></script>

------------------
※ラベルを置換する
<!-- <label for="postal_code">郵便番号 <span class="required">*</span></label> -->

<!-- labelを置換 hrom here -->
<div class="label-row">
<label for="postal_code" class="form-label">郵便番号 <span class="required">*</span></label>
<details class="ml-dtip" data-pos="right" data-autoclose="4000">
<summary aria-label="入力ヒント" role="button" tabindex="0">💡</summary>
<div class="ml-dtip-body">ハイフン無しの<strong>7桁</strong>で入力。入力後に住所は自動補完されます（例：<code>5410057</code>）。</div>
</details>
</div>
<!-- labelを置換 till here -->

-----
                position: fixed; top: 20px; right: 20px; z-index: 1000;
                background: #22c55e; color: white; padding: 10px 15px;
                border-radius: 5px; font-size: 14px; opacity: 0.9;
-----
 */