/* ===== CAIGE m-end "publish -> pick category" page (post_cat) : 2026-09-20 =====
   Goal: same visual language as footer_m.css / cat_all.css
         -> the un-styled notice text becomes a soft blue card
         -> each top-level category becomes a white card
         -> second-level entries become 3-column rounded chips
   Loaded AFTER post.css / style.css so equal-specificity rules win.
   NOTE: pure ASCII on purpose (no encoding risk on ANY server).
   NOTE: -webkit-* + standard properties written side by side for old WebViews.
   NOTE: vertical centring uses absolute positioning, NOT flex, so it is
         reliable even on old Android WebViews. */

/* ---------- page canvas: light grey so the white cards float ---------- */
.wrapper { background-color:#F2F2F2; }

/* ---------- notice card (previously a bare text node with zero styling) ---------- */
.fc-tip {
  display:block;   /* same 1px-overflow guard as .business above */
  position:relative;
  margin:10px 10px 0 10px;
  padding:11px 12px 11px 38px;
  border:1px solid #DCE9F7; border-radius:12px;
  background-color:#F2F8FE; color:#4A6B8C;
  font-size:12.5px; line-height:1.68; text-align:left;
}
.fc-tip i.fc-tip-i {
  position:absolute; left:12px; top:11px;
  width:17px; height:17px; border-radius:50%;
  background-color:#3592E2;
  font-style:normal; font-size:12px; font-weight:700;
  color:#fff; text-align:center; line-height:17px;
}
.fc-tip span { display:block; }

/* ---------- one top-level category = one white card ---------- */
.business {
  /* dl is inline-block in the site-wide CSS. With side margins an inline-block
     shrink-to-fit box comes out 370.5px wide, so 370.5 + 10 + 10 = 390.5px
     leaked a 1px horizontal scroll on a 390px viewport (measured).
     Forcing block makes the width exactly 390 - 20 = 370px. */
  display:block;
  margin:10px 10px 0 10px; padding:0;
  background-color:#fff;
  border:0 none;
  border-radius:14px;
  -webkit-box-shadow:0 2px 10px rgba(30,40,60,.055);
  box-shadow:0 2px 10px rgba(30,40,60,.055);
  overflow:hidden;
  color:#2C3354; font-size:15.5px;
}
.business:last-of-type { margin-bottom:10px; }

/* ---------- card header ---------- */
.business dt {
  position:relative;
  display:block;
  height:58px; line-height:58px;
  padding:0 40px 0 58px;
  border:0 none; border-bottom:1px solid #F2F4F7;
  text-indent:0; text-align:left;
  font-size:15.5px; font-weight:700; color:#2C3354;
  -webkit-tap-highlight-color:transparent;
}
.business dt i.ico {
  position:absolute; left:12px; top:12px;
  display:block;
  width:34px; height:34px; margin:0;
  border-radius:11px;
  background-color:#F1F6FC; background-image:none; background-size:auto;
  line-height:1; font-style:normal; text-align:center;
}
.business dt i.ico svg {
  display:block; width:20px; height:20px; margin:7px auto 0 auto;
}
.business dt i.ico svg path,
.business dt i.ico svg circle,
.business dt i.ico svg rect { stroke:#3592E2; }

/* ---------- collapse / expand chevron ---------- */
.business dt .a_ico_box { right:4px; top:0; width:34px; height:58px; }
.business dt .back_ico_after {
  margin:21px 10px 0 0;
  opacity:.55;
  -webkit-transition:-webkit-transform .2s ease; transition:transform .2s ease;
}
.exp dt .back_ico_after { -webkit-transform:rotate(180deg); transform:rotate(180deg); }

/* ---------- expanded body : 3-column chips ---------- */
.business dd {
  display:none;
  margin:0; padding:0;
  border:0 none; background-color:#fff;
  line-height:normal;
}
.exp dd { display:block; }
.fc-chips {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;
  padding:12px 12px 3px 12px;
  font-size:0; overflow:visible;
}
.fc-chips a {
  -webkit-box-sizing:border-box; box-sizing:border-box;
  display:block; float:none;
  /* exact 3-up maths: 3 * (100% - 2 gaps) / 3  +  2 gaps  ==  100%
     (a "31.6% + 2.6% margin" grid sums to 100.06% and leaks a 1px
      horizontal scroll on 390px viewports -- verified) */
  width:-webkit-calc((100% - 16px) / 3); width:calc((100% - 16px) / 3);
  height:38px; line-height:36px;
  margin:0 8px 9px 0; padding:0 4px;
  border:1px solid #E8ECF1; border-radius:10px;
  background-color:#F7F9FB; color:#4C5464;
  font-size:13px; text-align:center; text-indent:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  vertical-align:top;
  -webkit-tap-highlight-color:transparent;
}
.fc-chips a:nth-child(3n) { margin-right:0; }
.fc-chips a:active {
  color:#3592E2; border-color:#9ACBF3; background-color:#EEF6FE; font-weight:700;
}