:root{--ink:#171719;--muted:#6e6b70;--pink:#ef78a6;--pink-dark:#d94f88;--line:rgba(23,23,25,.14);font-family:"Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:#fff}*{box-sizing:border-box}html,body{margin:0;background:#fff;color:var(--ink)}a{color:inherit;text-decoration:none}.article-site-header{height:72px;display:flex;align-items:center;padding:10px clamp(18px,3vw,52px);border-bottom:1px solid #eee;background:rgba(255,255,255,.96);position:sticky;top:0;z-index:20}.article-brand{display:flex;align-items:center;gap:9px;font-weight:850}.article-brand img{width:42px;height:42px}.article-home-link{margin-left:auto;color:#655d64;font-size:.86rem}.article-detail-shell{max-width:1260px;margin:0 auto;padding:34px clamp(18px,4vw,56px) 110px;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:clamp(28px,4vw,58px)}.article-main{min-width:0}.article-hero{aspect-ratio:16/7;background:linear-gradient(145deg,#fae2ec,#fff);overflow:hidden;margin-bottom:20px}.article-hero img{width:100%;height:100%;object-fit:cover}.article-meta-labels{display:flex;gap:7px;flex-wrap:wrap}.article-meta-labels span{padding:5px 8px;border:1px solid rgba(217,79,136,.25);background:#fff6fa;color:#97365f;font-size:.72rem;font-weight:750}.article-detail h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(2rem,4.5vw,4.6rem);line-height:1.2;margin:14px 0 12px;letter-spacing:-.025em}.article-dates{font-size:.78rem;color:#8c848a;display:flex;gap:16px;flex-wrap:wrap}.article-tags{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0 28px;color:#756b73;font-size:.78rem}.article-tags span::before{content:"#";color:var(--pink-dark)}.article-body{font-size:1.05rem;line-height:1.95;color:#373238}.article-body h2{font-size:1.75rem;line-height:1.45;margin:2.4em 0 .7em}.article-body h3{font-size:1.35rem;line-height:1.5;margin:2em 0 .65em}.article-body p{margin:1.15em 0}.article-body ul,.article-body ol{padding-left:1.6em;margin:1.2em 0}.article-body li+li{margin-top:.45em}.article-body figure{margin:2em 0}.article-body figure img{max-width:100%;height:auto;display:block}.article-body figcaption{font-size:.78rem;color:#81777e;margin-top:7px}.article-side{align-self:start;position:sticky;top:96px;border:1px solid rgba(217,79,136,.2);background:#fff9fc;padding:16px;max-height:calc(100vh - 120px);overflow:auto}.article-side h2{font-size:1rem;margin:0 0 12px}.filter-group+.filter-group{margin-top:14px;padding-top:12px;border-top:1px solid #eee}.filter-group strong{display:block;font-size:.78rem;margin-bottom:7px}.filter-group label{display:flex;align-items:center;gap:6px;font-size:.75rem;margin:4px 0}.filter-group input{accent-color:var(--pink-dark)}.article-filter-submit{margin-top:16px;width:100%;padding:11px;border:0;background:var(--pink-dark);color:#fff;font-weight:800;border-radius:999px;cursor:pointer}.article-neighbors{display:flex;justify-content:space-between;gap:16px;margin-top:44px}.article-neighbor{max-width:46%;color:#6d646b;font-size:.78rem}.article-neighbor strong{display:block;color:#252125;margin-top:4px}.article-filter-mobile{display:none}.not-found{max-width:800px;margin:100px auto;padding:30px;text-align:center}.not-found a{color:var(--pink-dark);font-weight:800}@media(max-width:980px){.article-site-header{height:62px;padding:8px 12px}.article-brand img{width:38px;height:38px}.article-home-link{font-size:.76rem}.article-detail-shell{display:block;padding:18px 14px 100px}.article-hero{aspect-ratio:16/9;margin-bottom:14px}.article-detail h1{font-size:2rem}.article-body{font-size:1rem;line-height:1.9}.article-side{display:none;position:fixed;z-index:30;inset:76px 12px 70px;max-height:none;background:#fff;box-shadow:0 18px 60px rgba(0,0,0,.2)}body.filter-open .article-side{display:block}.article-filter-mobile{display:inline-flex;border:1px solid rgba(217,79,136,.3);background:#fff;color:var(--pink-dark);font-weight:800;border-radius:999px;padding:9px 12px;margin:12px 0}.article-neighbors{margin-top:30px}.article-neighbor{max-width:48%}}


/* v05.1 body image containment */
.article-main,
.article-detail,
.article-body{
  min-width:0;
  max-width:100%;
}
.article-body{
  overflow-wrap:anywhere;
}
.article-body figure{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
  margin-left:0;
  margin-right:0;
}
.article-body figure img,
.article-body>img,
.article-body p img,
.article-body div img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  object-fit:contain;
  margin-left:auto;
  margin-right:auto;
}


/* v06 inline heading */
.article-body .text-heading{
  font-size:1.3em;
  line-height:1.55;
  font-weight:800;
}


/* v07 classification labels: pale color + hierarchy marker */
.classification-label{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;font-weight:750;font-size:.72rem;background:var(--tone-bg);color:var(--tone-text);border:1px solid transparent}
.classification-primary{border-radius:6px}
.classification-primary::before{content:"■";font-size:.72em;color:var(--tone-text)}
.classification-secondary{border-radius:2px;background:var(--tone-bg2);border-color:var(--tone-border)}
.classification-secondary::before{content:"□";font-size:.9em;color:var(--tone-text);font-weight:900}
.tone-01{--tone-bg:#fff4f8;--tone-bg2:#fffafd;--tone-text:#a84c70;--tone-border:#df9bb5}.tone-02{--tone-bg:#f2f7ff;--tone-bg2:#fafcff;--tone-text:#436d9d;--tone-border:#9ab7d8}.tone-03{--tone-bg:#f2faf5;--tone-bg2:#fbfefc;--tone-text:#477d5d;--tone-border:#9bc5a9}.tone-04{--tone-bg:#fffaf0;--tone-bg2:#fffdf8;--tone-text:#8a7132;--tone-border:#d7bd79}.tone-05{--tone-bg:#f8f4fd;--tone-bg2:#fcfaff;--tone-text:#6e5796;--tone-border:#b6a2d1}.tone-06{--tone-bg:#f1fafc;--tone-bg2:#fbfeff;--tone-text:#3e7887;--tone-border:#8fc4d0}.tone-07{--tone-bg:#fff6f0;--tone-bg2:#fffcfa;--tone-text:#995f39;--tone-border:#daa783}.tone-08{--tone-bg:#f6f7f8;--tone-bg2:#fcfcfd;--tone-text:#626a73;--tone-border:#b8bec5}


/* v07.3 article public UI refinements */
:root{
  --article-ui-size:clamp(.98rem,1.25vw,1.16rem);
}

.article-site-header{
  height:72px;
  padding:10px clamp(18px,3vw,52px);
}
.article-brand{
  gap:10px;
  font-weight:800;
  letter-spacing:.05em;
}
.article-brand img{
  width:46px;
  height:46px;
  object-fit:contain;
}
.article-brand span{
  display:block;
  line-height:1.1;
}
.article-brand small{
  display:block;
  margin-top:3px;
  color:var(--pink-dark);
  font-size:.68rem;
  letter-spacing:.15em;
  font-weight:700;
}
.article-list-return{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border-radius:999px;
  background:#6f6aa8;
  border:1px solid #6f6aa8;
  color:#fff;
  font-size:.86rem;
  font-weight:800;
  box-shadow:0 8px 20px rgba(79,75,128,.16);
}

/* トップ画像はトリミングせず全体表示 */
.article-hero{
  aspect-ratio:auto;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff8fb;
}
.article-hero img{
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  display:block;
}
.article-hero:empty{
  min-height:220px;
  background:linear-gradient(145deg,#fae2ec,#fff);
}

/* 絞り込みUIはトップページ本文と同等サイズ */
.article-side h2,
.filter-group strong,
.filter-group label,
.article-filter-submit,
.article-filter-mobile{
  font-size:var(--article-ui-size);
}
.filter-group label{
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  white-space:nowrap;
  line-height:1.35;
}
.filter-group input{
  flex:0 0 auto;
}
.article-filter-submit{
  line-height:1.35;
}


/* v09.9 filter master checkboxes */
.filter-master-label{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:inherit;line-height:1.35}
.filter-master-label input{margin:0;accent-color:var(--pink-dark);flex:0 0 auto}
.filter-group strong .filter-master-label{font-size:inherit;margin:0;width:auto}
.article-filter-panel-head{display:block}.article-filter-scroll{min-height:0}.article-filter-actions{display:block}

/* 前後記事を下部フローティング表示 */
.article-neighbors{
  position:fixed;
  z-index:45;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(760px,calc(100vw - 32px));
  margin:0;
  padding:10px 12px;
  border:1px solid rgba(23,23,25,.13);
  border-radius:12px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 32px rgba(45,36,42,.16);
  backdrop-filter:blur(10px);
  align-items:center;
}
.article-neighbor{
  flex:1 1 0;
  max-width:48%;
  padding:7px 10px;
  border-radius:8px;
  font-size:.78rem;
}
body.filter-open .article-neighbors{
  visibility:hidden;
}

@media(max-width:980px){
  .article-site-header{
    height:62px;
    padding:8px 10px;
  }
  .article-brand{
    gap:5px;
    font-size:1.14rem;
    line-height:1.05;
    letter-spacing:0;
  }
  .article-brand img{
    width:36px;
    height:36px;
  }
  .article-brand small{
    font-size:.72rem;
    line-height:1.2;
    letter-spacing:.08em;
  }
  .article-list-return{
    min-height:38px;
    padding:8px 12px;
    font-size:.76rem;
  }
  .article-detail-shell{
    padding-bottom:120px;
  }
  .article-hero{
    aspect-ratio:auto;
  }
  .article-hero:empty{
    min-height:160px;
  }
  .article-neighbors{
    bottom:10px;
    width:calc(100vw - 18px);
    padding:7px 8px;
  }
}


/* v07.4 detail filters / labels / fixed neighbors */
.article-meta-labels .classification-label{
  display:inline-flex;
  align-items:center;
  gap:0;
  padding:3px 7px;
  border:1px solid var(--article-label-border,rgba(217,79,136,.24));
  background:var(--article-label-bg,#fff6fa);
  color:var(--article-label-text,#9d3562);
  font-size:.62rem;
  line-height:1.35;
}
.article-meta-labels .classification-primary{
  font-weight:800;
  border-radius:4px;
}
.article-meta-labels .classification-primary::before{
  content:"■";
  display:inline-block;
  margin-right:4px;
  font-size:.72em;
  vertical-align:.08em;
  color:inherit;
}
.article-meta-labels .classification-secondary{
  font-weight:700;
  border-radius:2px;
}
.article-meta-labels .classification-secondary::before{
  content:"□";
  display:inline-block;
  margin-right:4px;
  font-size:.84em;
  vertical-align:.03em;
  color:inherit;
}

.filter-group label{
  display:flex;
  align-items:center;
  gap:7px;
}
.filter-option-name{
  min-width:0;
  white-space:nowrap;
}
.filter-count{
  margin-left:auto;
  flex:0 0 auto;
  color:#999;
  font-size:inherit;
}

/* 前後記事：本文幅の左右へ独立表示 */
.article-neighbors{
  left:0;
  width:auto;
  transform:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  pointer-events:none;
}
.article-neighbor-slot{
  min-width:0;
  display:flex;
  pointer-events:none;
}
.article-neighbor-slot-prev{
  justify-content:flex-start;
}
.article-neighbor-slot-next{
  justify-content:flex-end;
}
.article-neighbor{
  width:11em;
  max-width:11em;
  min-width:0;
  padding:8px 10px;
  border:1px solid rgba(217,79,136,.24);
  border-radius:9px;
  background:rgba(255,255,255,.97);
  box-shadow:0 8px 24px rgba(63,42,53,.13);
  color:#6d646b;
  font-size:.78rem;
  line-height:1.25;
  pointer-events:auto;
}
.article-neighbor span{
  display:block;
  color:var(--pink-dark);
  font-weight:800;
  white-space:nowrap;
}
.article-neighbor strong{
  display:block;
  margin-top:3px;
  color:#252125;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.article-neighbor:hover{
  background:#fff3f8;
}
.article-neighbor:last-child{
  margin-left:0;
  text-align:left;
}
.article-neighbor-slot-next .article-neighbor{
  text-align:right;
}

@media(max-width:980px){
  .article-neighbors{
    gap:8px;
  }
  .article-neighbor{
    width:9.8em;
    max-width:9.8em;
    padding:7px 8px;
    font-size:.68rem;
  }
}


/* v07.5 public article entrance / back transition */
.public-article-page .article-detail .article-hero{
  animation:publicDetailImageDevelop .72s cubic-bezier(.18,.72,.2,1) .04s both;
}
.public-article-page .article-detail .article-meta-labels{
  animation:publicDetailCopyIn .38s ease-out .22s both;
}
.public-article-page .article-detail>h1{
  animation:publicDetailCopyIn .44s ease-out .29s both;
}
.public-article-page .article-detail .article-dates,
.public-article-page .article-detail .article-tags,
.public-article-page .article-detail .article-filter-mobile{
  animation:publicDetailCopyIn .4s ease-out .36s both;
}
.public-article-page .article-detail .article-body{
  animation:publicDetailCopyIn .5s ease-out .43s both;
}
.public-article-page .article-side{
  animation:publicDetailSideIn .48s ease-out .28s both;
}

@keyframes publicDetailImageDevelop{
  0%{opacity:.16;filter:blur(14px) saturate(.72);transform:scale(1.018)}
  100%{opacity:1;filter:blur(0) saturate(1);transform:scale(1)}
}
@keyframes publicDetailCopyIn{
  from{opacity:0;translate:0 10px}
  to{opacity:1;translate:0 0}
}
@keyframes publicDetailSideIn{
  from{opacity:0;translate:14px 0}
  to{opacity:1;translate:0 0}
}

.article-detail-transition{
  position:fixed;
  z-index:200;
  inset:0;
  background:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility 0s linear .18s;
}
.article-detail-transition.show{
  opacity:1;
  visibility:visible;
  transition:opacity .18s ease;
}
.public-article-page.article-detail-leaving .article-detail-shell{
  transform:scale(.992);
  opacity:.72;
  transition:transform .2s ease,opacity .2s ease;
}

@media(prefers-reduced-motion:reduce){
  .public-article-page .article-detail .article-hero,
  .public-article-page .article-detail .article-meta-labels,
  .public-article-page .article-detail>h1,
  .public-article-page .article-detail .article-dates,
  .public-article-page .article-detail .article-tags,
  .public-article-page .article-detail .article-filter-mobile,
  .public-article-page .article-detail .article-body,
  .public-article-page .article-side{
    animation:none!important;
  }
  .article-detail-transition,
  .public-article-page.article-detail-leaving .article-detail-shell{
    transition:none!important;
  }
}


/* =========================================================
   v07.6 Article detail responsive modes
   ========================================================= */


/* fixed mode-tablet */

  html.mode-tablet{--article-ui-size:.96rem}

  html.mode-tablet .article-site-header{
    height:56px;
    padding:7px 16px;
  }
  html.mode-tablet .article-brand{font-size:1.06rem}
  html.mode-tablet .article-brand img{width:34px;height:34px}
  html.mode-tablet .article-brand small{font-size:.64rem}
  html.mode-tablet .article-list-return{min-height:38px;padding:8px 13px;font-size:.76rem}

  html.mode-tablet .article-detail-shell{
    padding-top:74px;
    padding-left:18px;
    padding-right:18px;
  }
  html.mode-tablet .article-detail h1{font-size:clamp(1.65rem,4vw,2.35rem)}
  html.mode-tablet .article-body{font-size:.98rem;line-height:1.75}

  html.mode-tablet .article-side{
    font-size:.96rem;
  }

  html.mode-tablet .article-neighbor{font-size:.72rem}




/* fixed mode-phone-compact */

  html.mode-phone-compact{--article-ui-size:.88rem}

  html.mode-phone-compact .article-site-header{
    height:54px;
    padding:6px 9px;
  }
  html.mode-phone-compact .article-brand{font-size:1rem}
  html.mode-phone-compact .article-brand img{width:32px;height:32px}
  html.mode-phone-compact .article-brand small{font-size:.61rem}
  html.mode-phone-compact .article-list-return{min-height:36px;padding:7px 10px;font-size:.7rem}

  html.mode-phone-compact .article-detail-shell{
    padding-top:68px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:104px;
  }
  html.mode-phone-compact .article-detail h1{font-size:1.45rem;line-height:1.35}
  html.mode-phone-compact .article-body{font-size:.92rem;line-height:1.68}
  html.mode-phone-compact .article-dates,html.mode-phone-compact .article-tags{font-size:.72rem}

  html.mode-phone-compact .article-neighbor{
    width:9.2em;
    max-width:9.2em;
    font-size:.63rem;
  }



/* 横向きは本文を自然にスクロールさせる */
@media (orientation:landscape) and (max-width:1180px) and (max-height:820px){
  html{scroll-behavior:smooth}
  body{overflow-y:auto}

  .article-site-header{
    position:sticky;
    top:0;
  }

  .article-detail-shell{
    min-height:100dvh;
    padding-bottom:110px;
  }

  .article-side{
    max-height:none;
    overflow:visible;
  }

  .article-neighbors{
    bottom:8px;
  }
}


/* v07.7 smartphone detail refinements */
@media(max-width:980px){
  body.filter-open .article-side{
    display:block;
    position:fixed;
    top:50%;
    left:12px;
    right:12px;
    bottom:auto;
    inset:auto 12px auto 12px;
    transform:translateY(-50%);
    width:auto;
    height:auto;
    max-height:calc(100dvh - 24px);
    overflow:auto;
    z-index:90;
  }
}


/* =========================================================
   v07.8 実測viewport比率での記事詳細調整
   ========================================================= */

/* Pixel 10相当 */

/* fixed mode-phone */

  html.mode-phone .article-detail-shell{
    padding-bottom:118px;
  }



/* iPhone SE2相当 */

/* fixed mode-phone-compact */

  html.mode-phone-compact .article-detail-shell{
    padding-bottom:112px;
  }



/* iPad mini相当 */

/* fixed mode-tablet */

  html.mode-tablet .article-detail-shell{
    padding-bottom:118px;
  }




/* =========================================================
   v08.0 mobile filter panel centering
   ========================================================= */
html.mode-phone body.filter-open .article-side,
html.mode-phone-compact body.filter-open .article-side,
html.mode-tablet body.filter-open .article-side{
  position:fixed!important;
  inset:auto 12px auto 12px!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:auto!important;
  height:max-content!important;
  min-height:0!important;
  max-height:calc(var(--stable-vh,100svh) - 24px)!important;
  overflow-y:auto!important;
  z-index:90!important;
}

/* =========================================================
   v07.4 link / YouTube / link card public styles
   Restored on top of the latest public article UI CSS.
   ========================================================= */
.article-body a:not(.article-link-card){
  color:#b04470;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.article-body a:not(.article-link-card):hover{color:#d94f88}
.article-body .article-youtube{
  position:relative;
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;
  margin:2em 0;
  overflow:hidden;
  border-radius:10px;
  background:#111;
}
.article-body .article-youtube iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.article-body .article-link-card{
  display:flex;
  width:100%;
  max-width:100%;
  min-height:132px;
  margin:2em 0;
  overflow:hidden;
  border:1px solid #ded9dc;
  border-radius:12px;
  background:#fff;
  color:#302a2e;
  text-decoration:none;
  box-shadow:0 4px 18px rgba(34,27,31,.06);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.article-body .article-link-card:hover{
  transform:translateY(-1px);
  border-color:#d7a2b7;
  box-shadow:0 8px 24px rgba(34,27,31,.10);
}
.article-link-card-thumb{
  display:block;
  flex:0 0 32%;
  max-width:230px;
  background:#f3f0f2;
  overflow:hidden;
}
.article-link-card-thumb img{
  display:block;
  width:100%!important;
  height:100%!important;
  min-height:132px;
  object-fit:cover!important;
  margin:0!important;
}
.article-link-card-copy{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding:16px 18px;
}
.article-link-card-title{
  display:block;
  color:#2c262a;
  font-size:1rem;
  line-height:1.5;
  font-weight:800;
}
.article-link-card-description{
  display:-webkit-box;
  overflow:hidden;
  color:#6f676c;
  font-size:.82rem;
  line-height:1.55;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.article-link-card-domain{
  display:block;
  color:#9a8f96;
  font-size:.72rem;
  line-height:1.4;
  overflow-wrap:anywhere;
}
@media(max-width:640px){
  .article-body .article-link-card{min-height:108px}
  .article-link-card-thumb{flex-basis:36%;max-width:150px}
  .article-link-card-thumb img{min-height:108px}
  .article-link-card-copy{gap:5px;padding:11px 12px}
  .article-link-card-title{font-size:.9rem}
  .article-link-card-description{font-size:.74rem;-webkit-line-clamp:2}
  .article-link-card-domain{font-size:.66rem}
}

/* =========================================================
   v07.4.3 public article UI restore
   - two-line brand
   - mobile filter control directly under sticky header
   - keep v07.4 link / YouTube / link-card styles intact
   ========================================================= */
.article-brand{
  min-width:0;
  white-space:nowrap;
}
.article-brand span{
  display:flex!important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  line-height:1.08;
  white-space:nowrap;
}
.article-brand small{
  display:block!important;
  width:auto;
  margin-top:3px;
  line-height:1.15;
  white-space:nowrap;
}
.article-mobile-toolbar{
  display:none;
}

@media(max-width:980px){
  .article-site-header{
    position:sticky;
    top:0;
    z-index:80;
  }
  .article-brand{
    min-width:0;
    flex:1 1 auto;
  }
  .article-brand span{
    min-width:0;
    font-size:1.02rem;
  }
  .article-brand small{
    font-size:.61rem;
    letter-spacing:.08em;
  }
  .article-list-return{
    flex:0 0 auto;
  }
  .article-mobile-toolbar{
    position:sticky;
    top:62px;
    z-index:70;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    min-height:48px;
    padding:6px 12px;
    border-bottom:1px solid rgba(23,23,25,.07);
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.92));
    backdrop-filter:blur(8px);
  }
  .article-mobile-toolbar .article-filter-mobile{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    margin:0!important;
    min-height:34px;
    padding:7px 13px;
    border:1px solid rgba(217,79,136,.34);
    border-radius:999px;
    background:#fff;
    color:var(--pink-dark);
    box-shadow:0 5px 16px rgba(90,54,71,.08);
    font-size:.78rem;
    font-weight:800;
    line-height:1.2;
  }
  body.filter-open .article-mobile-toolbar{
    visibility:hidden;
  }
  #filterClose.article-filter-mobile{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
  }
  .article-detail-shell{
    padding-top:14px;
  }
}

@media(max-width:340px){
  .article-brand span{font-size:.92rem}
  .article-brand small{font-size:.56rem}
  .article-list-return{padding-left:9px;padding-right:9px}
  .article-mobile-toolbar{padding-left:8px;padding-right:8px}
  .article-mobile-toolbar .article-filter-mobile{font-size:.72rem;padding:7px 11px}
}


/* =========================================================
   v07.4.4 mobile filter visibility fix
   - make the opened panel explicit instead of relying only on body state
   - neutralize entrance animation while the mobile panel is open
   ========================================================= */
@media(max-width:980px){
  body.public-article-page.filter-open{
    overflow:hidden;
  }
  body.public-article-page.filter-open #filterPanel,
  body.public-article-page #filterPanel.is-open{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    position:fixed!important;
    inset:auto 12px auto 12px!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    translate:none!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(var(--stable-vh,100svh) - 24px)!important;
    overflow-y:auto!important;
    z-index:120!important;
    animation:none!important;
    background:#fff!important;
    box-shadow:0 18px 60px rgba(0,0,0,.22)!important;
  }
  body.public-article-page.filter-open .article-mobile-toolbar{
    visibility:hidden;
  }
}

/* =========================================================
   v09.10 mobile filter panel: viewport-bounded with internal scroll
   ========================================================= */
@media(max-width:980px){
  body.public-article-page.filter-open #filterPanel,
  body.public-article-page #filterPanel.is-open{
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    overflow:hidden!important;
    padding:14px!important;
  }
  #filterPanel .article-filter-panel-head{
    display:flex;
    align-items:center;
    gap:12px;
    flex:0 0 auto;
    padding-bottom:10px;
    border-bottom:1px solid rgba(23,23,25,.09);
  }
  #filterPanel .article-filter-panel-head h2{margin:0;min-width:0}
  #filterPanel #filterClose.article-filter-mobile{margin:0 0 0 auto!important;flex:0 0 auto}
  #filterPanel form{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
  }
  #filterPanel .article-filter-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:10px 3px 6px 0;
    scrollbar-width:thin;
  }
  #filterPanel .article-filter-actions{
    flex:0 0 auto;
    padding-top:10px;
    border-top:1px solid rgba(23,23,25,.09);
    background:#fff;
  }
  #filterPanel .article-filter-submit{margin-top:0}
}
/* v09.12: detail filter popup height matches article-list popup */
html.mode-phone body.public-article-page.filter-open #filterPanel,
html.mode-phone body.public-article-page #filterPanel.is-open{
  max-height:min(480px,calc(var(--stable-vh,100svh) * .75 - 27px))!important;
}
html.mode-phone-compact body.public-article-page.filter-open #filterPanel,
html.mode-phone-compact body.public-article-page #filterPanel.is-open{
  max-height:min(375px,calc(var(--stable-vh,100svh) * .75 - 12px))!important;
}
html.mode-tablet body.public-article-page.filter-open #filterPanel,
html.mode-tablet body.public-article-page #filterPanel.is-open{
  max-height:min(465px,calc(var(--stable-vh,100svh) * .75 - 36px))!important;
}

/* v09.11: keep filter counts clear of the mobile scrollbar */
html.mode-phone #filterPanel .filter-count,
html.mode-phone-compact #filterPanel .filter-count,
html.mode-tablet #filterPanel .filter-count{
  margin-right:1ch;
}