@charcoal-ui/react 6.0.0-rc.5 → 6.0.0-rc.6

package/dist/layered.css

@@ -2011,9 +2011,11 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
     display: none;
   }
 
-/* hover で表示。キーボード操作でも到達できるよう focus-within でも表示する。 */
+/* hover で表示。キーボード操作でも到達できるよう、キーボード由来のフォーカスが
+   カルーセル内にある間も表示する（:focus-within だとクリックで残ったフォーカスでも
+   表示され続けるため、react-aria が付与する data 属性で判定する）。 */
 .charcoal-carousel:hover .charcoal-carousel__navigation,
-.charcoal-carousel:focus-within .charcoal-carousel__navigation {
+.charcoal-carousel[data-focus-visible-within] .charcoal-carousel__navigation {
   opacity: 1;
 }
 
@@ -2021,16 +2023,36 @@ pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
   pointer-events: auto;
 }
 
+/* ヒットエリアをグリッド端列（= mask のフェード帯と同じ 72px）全体へ広げる。
+     擬似要素上のクリックは元の button に届くため、帯のどこを押してもページ送りになる。
+     position: absolute の基準は positioned な .charcoal-carousel__navigation（inset: 0）。 */
+
+.charcoal-carousel__navigation__item::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 72px;
+  }
+
 .charcoal-carousel__navigation__item[data-direction='prev'] {
     grid-column: 1;
     justify-self: center;
   }
 
+.charcoal-carousel__navigation__item[data-direction='prev']::after {
+      left: 0;
+    }
+
 .charcoal-carousel__navigation__item[data-direction='next'] {
     grid-column: 3;
     justify-self: center;
   }
 
+.charcoal-carousel__navigation__item[data-direction='next']::after {
+      right: 0;
+    }
+
 /* スクロール端では非表示。IconButton の disabled スタイル(opacity:0.32)より
    高い詳細度で打ち消すため、ルートを前置する。 */
 .charcoal-carousel .charcoal-carousel__navigation__item[data-hidden='true'] {

package/dist/layered.css.map

@@ -1 +1 @@
-{"version":3,"sources":["<no source>","index.css"],"names":[],"mappings":"AAAA,iBCAA;EACE,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,uBAAuB;EACvB,sBAAsB;EACtB,eAAe;EACf,kBAAkB;EAClB,aAAa;EACb,uBAAuB;EACvB,uBAAuB;EACvB,qBAAqB;EACrB,qBAAqB;EACrB,aAAa;EACb,SAAS;EACT,iBAAiB;EACjB,oBAAoB;EACpB,uBAAuB;EACvB,kBAAkB;EAClB,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,yBAAyB;KACtB,sBAAsB;UACjB,iBAAiB;EACzB,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,iBAAiB;EACjB,iBAAiB;EACjB,yCAAyC;EACzC,qEAAqE;EACrE;;;mBAGiB;EACjB,YAAY;AACd;;EAEE;;IAEE,eAAe;IACf,aAAa;EACf;;EAEA;;IAEE,aAAa;IACb,6CAA6C;EAC/C;;EAEA;;IAEE,uCAAuC;IACvC,mEAAmE;EACrE;;EAEA;;;IAGE,uCAAuC;IACvC,mEAAmE;EACrE;;EAEA;IACE,oDAAoD;IACpD,iEAAiE;EACnE;;EAEA;;MAEI,kDAAkD;MAClD,+DAA+D;IACjE;;EAEF;;;MAGI,kDAAkD;MAClD,+DAA+D;IACjE;;EAEF;IACE,mDAAmD;IACnD,gEAAgE;EAClE;;EAEA;;MAEI,iDAAiD;MACjD,8DAA8D;IAChE;;EAEF;;;MAGI,iDAAiD;MACjD,8DAA8D;IAChE;;EAEF;IACE,gDAAgD;IAChD,6DAA6D;EAC/D;;EAEA;;MAEI,8CAA8C;MAC9C,2DAA2D;IAC7D;;EAEF;;;MAGI,8CAA8C;MAC9C,2DAA2D;IAC7D;;EAEF;IACE,qDAAqD;IACrD,kEAAkE;EACpE;;EAEA;;MAEI,mDAAmD;MACnD,gEAAgE;IAClE;;EAEF;;;MAGI,mDAAmD;MACnD,gEAAgE;IAClE;;EAEF;IACE,eAAe;IACf,YAAY;EACd;;EAEA;IACE,WAAW;EACb;AACF;EACE,eAAe;;EAEf,4BAA4B;EAC5B,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,uBAAuB;EACvB,UAAU;EACV,kBAAkB;EAClB,aAAa;EACb,cAAc;EACd,uBAAuB;EACvB,uBAAuB;EACvB,qBAAqB;EACrB,qBAAqB;;EAErB,4CAA4C;EAC5C,aAAa;;EAEb,6CAA6C;EAC7C,SAAS;;EAET,+BAA+B;EAC/B,iBAAiB;;EAEjB,yDAAyD;EACzD,oBAAoB;AACtB;;EAEE;;IAEE,eAAe;EACjB;;EAEA;IACE,aAAa;EACf;;EAEA;IACE,kBAAkB;IAClB,UAAU;EACZ;AACF;EACE,eAAe;EACf,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,uBAAuB;EACvB,UAAU;EACV,kBAAkB;EAClB,aAAa;EACb,cAAc;EACd,uBAAuB;EACvB,uBAAuB;EACvB,qBAAqB;EACrB,qBAAqB;EACrB,aAAa;EACb,SAAS;EACT,iBAAiB;EACjB,oBAAoB;;EAEpB,yBAAyB;;KAEtB,sBAAsB;;UAEjB,iBAAiB;EACzB,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,uBAAuB;EACvB;;mBAEiB;AACnB;;EAEE;;IAEE,eAAe;IACf,aAAa;EACf;;EAEA;IACE,aAAa;EACf;;EAEA;IACE,kBAAkB;IAClB,UAAU;EACZ;;EAEA;IACE,WAAW;IACX,YAAY;EACd;;EAEA;IACE,WAAW;IACX,YAAY;EACd;;EAEA;IACE,WAAW;IACX,YAAY;EACd;;EAEA;IACE,kDAAkD;IAClD,6BAA6B;EAC/B;;EAEA;;MAEI,gDAAgD;MAChD,yDAAyD;IAC3D;;EAEF;;MAEI,gDAAgD;MAChD,yDAAyD;IAC3D;;EAEF;;MAEI,gDAAgD;MAChD,yDAAyD;IAC3D;;EAEF;IACE,mDAAmD;IACnD,gEAAgE;EAClE;;EAEA;;MAEI,iDAAiD;MACjD,8DAA8D;IAChE;;EAEF;;MAEI,iDAAiD;MACjD,8DAA8D;IAChE;;EAEF;;MAEI,iDAAiD;MACjD,8DAA8D;IAChE;;EAEF;;IAEE,aAAa;IACb,6CAA6C;EAC/C;;EAEA;;IAEE,6CAA6C;EAC/C;;EAEA;;IAEE,gBAAgB;EAClB;AACF;EACE,aAAa;EACb,+BAA+B;EAC/B,aAAa;EACb,mBAAmB;EACnB,eAAe;AACjB;;EAEE;IACE,aAAa;IACb,eAAe;EACjB;;AAEF;EACE,eAAe;EACf,iBAAiB;EACjB,yCAAyC;AAC3C;AACA;EACE,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,cAAc;EACd,sBAAsB;;EAEtB,SAAS;EACT,YAAY;;EAEZ,WAAW;EACX,YAAY;EACZ,eAAe;EACf,uBAAuB;EACvB,yDAAyD;EACzD;;mBAEiB;AACnB;;AAEA;EACE,iEAAiE;AACnE;;AAEA;EACE,WAAW;EACX,cAAc;EACd,UAAU;EACV,WAAW;EACX,oBAAoB;EACpB,+DAA+D;EAC/D,uBAAuB;EACvB;;mBAEiB;AACnB;;AAEA;EACE,iBAAiB;EACjB,mBAAmB;EACnB,kDAAkD;AACpD;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,uDAAuD;AACzD;;AAEA;EACE,uDAAuD;AACzD;;AAEA;EACE,aAAa;EACb,6CAA6C;AAC/C;;AAEA;EACE,6CAA6C;AAC/C;;AAEA;EACE,gBAAgB;AAClB;;AAEA;;EAEE,4CAA4C;AAC9C;;AAEA;EACE,+DAA+D;AACjE;;AAEA;EACE,6DAA6D;AAC/D;;AAEA;EACE,+DAA+D;AACjE;;AAEA;EACE,6DAA6D;AAC/D;AACA;EACE,aAAa;EACb,0BAA0B;EAC1B,aAAa;AACf;AACA;EACE,oBAAoB;EACpB,gCAAgC;EAChC,iCAAiC;AACnC;;AAEA;EACE,uBAAuB;EACvB,qBAAqB;EACrB,yEAAyE;;EAEzE,oBAAoB;EACpB;0DACwD;EACxD,wDAAwD;EACxD,yDAAyD;AAC3D;;AAEA;IACI,uBAAuB;IACvB,uBAAuB;EACzB;;AAEF;MACM,qBAAqB;IACvB;;AAEJ;MACM,qBAAqB;IACvB;;AAEJ;IACI,uBAAuB;IACvB,uBAAuB;EACzB;;AAEF;IACI,uBAAuB;EACzB;;AAEF;MACM,qBAAqB;IACvB;AACJ;EACE,aAAa;EACb,+BAA+B;EAC/B,mBAAmB;EACnB,kBAAkB;EAClB,eAAe;EACf,QAAQ;AACV;;EAEE;;IAEE,aAAa;IACb,eAAe;EACjB;;AAEF;EACE,kBAAkB;EAClB,mBAAmB;EACnB,eAAe;EACf,iBAAiB;EACjB,yCAAyC;AAC3C;;AAEA;IACI,cAAc;IACd,QAAQ;IACR,SAAS;IACT,WAAW;IACX,gBAAgB;EAClB;;AAEF;IACI,cAAc;IACd,QAAQ;IACR,SAAS;IACT,WAAW;IACX,mBAAmB;EACrB;;AAEF;EACE,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,cAAc;EACd,WAAW;EACX,YAAY;EACZ,SAAS;EACT,iEAAiE;EACjE,uBAAuB;EACvB;;mBAEiB;AACnB;;AAEA;IACI,iEAAiE;EACnE;;AAEF;IACI,aAAa;IACb,6CAA6C;EAC/C;;AAEF;IACI,6CAA6C;EAC/C;;AAEF;IACI,gBAAgB;EAClB;;AAEF;;IAEI,+DAA+D;EACjE;;AAEF;;IAEI,+DAA+D;EACjE;;AAEF;;IAEI,+DAA+D;EACjE;;AAEF;;IAEI,+DAA+D;EACjE;;AAEF;;;IAGI,4CAA4C;EAC9C;;AAEF;IACI,4CAA4C;EAC9C;;AAEF;IACI,gEAAgE;EAClE;;AAEF;EACE,kBAAkB;EAClB,SAAS;EACT,UAAU;EACV,sBAAsB;EACtB,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW;EACX,YAAY;EACZ,uBAAuB;EACvB,oDAAoD;EACpD,2BAA2B;AAC7B;;AAEA;;;IAGI,4CAA4C;EAC9C;;AAEF;IACI,4CAA4C;EAC9C;;AAEF;IACI,8CAA8C;IAC9C,iBAAiB;IACjB,mBAAmB;EACrB;AACF;EACE,oBAAoB;EACpB,+BAA+B;EAC/B,mBAAmB;EACnB,eAAe;EACf,UAAU;EACV,QAAQ;AACV;;EAEE;IACE,aAAa;IACb,eAAe;EACjB;;EAEA;MACI,UAAU;IACZ;;AAEJ;EACE,eAAe;EACf,iBAAiB;EACjB,yCAAyC;AAC3C;AACA;EACE,eAAe;EACf,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,oBAAoB;EACpB,kBAAkB;EAClB,sBAAsB;EACtB,WAAW;EACX,6BAA6B;;EAE7B,iDAAiD;EACjD,yBAAyB;;EAEzB,aAAa;EACb,mBAAmB;EACnB,YAAY;EACZ,SAAS;EACT,iEAAiE;AACnE;;AAEA;;EAEE,aAAa;EACb,eAAe;AACjB;;AAEA;EACE,WAAW;EACX,kBAAkB;EAClB,cAAc;EACd,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,wBAAwB;EACxB,0BAA0B;EAC1B,qBAAqB;EACrB,+DAA+D;AACjE;;AAEA;EACE,2BAA2B;EAC3B,0BAA0B;AAC5B;;AAEA;EACE,iEAAiE;AACnE;;AAEA;EACE,+DAA+D;AACjE;;AAEA;EACE,+DAA+D;AACjE;;AAEA;EACE,aAAa;EACb,6CAA6C;AAC/C;AACA;EACE,6CAA6C;AAC/C;AACA;EACE,gBAAgB;AAClB;;AAEA;EACE,6DAA6D;AAC/D;;AAEA;EACE,6DAA6D;AAC/D;;AAEA;EACE,+DAA+D;AACjE;;AAEA;EACE,+DAA+D;AACjE;AACA;EACE,aAAa;EACb,0BAA0B;EAC1B,aAAa;AACf;;EAEE;IACE,aAAa;EACf;;AAEF;EACE,aAAa;EACb,YAAY;EACZ;;mBAEiB;EACjB,mDAAmD;EACnD,qEAAqE;EACrE,kBAAkB;EAClB,cAAc;EACd,iBAAiB;EACjB,eAAe;AACjB;;AAEA;IACI,4CAA4C;EAC9C;;AAEF;IACI,mEAAmE;EACrE;;AAEF;IACI,aAAa;IACb,6CAA6C;EAC/C;;AAEF;IACI,4CAA4C;EAC9C;;AAEF;EACE,aAAa;EACb,mBAAmB;EACnB,iBAAiB;AACnB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,QAAQ;EACR,gBAAgB;AAClB;;AAEA;EACE,OAAO;EACP,YAAY;EACZ,gBAAgB;AAClB;;AAEA;EACE,YAAY;EACZ,sBAAsB;EACtB,aAAa;EACb,oBAAoB;;EAEpB,mCAAmC;EACnC,0BAA0B;EAC1B,uBAAuB;EACvB,yBAAyB;EACzB,0BAA0B;EAC1B,6BAA6B;EAC7B,+BAA+B;EAC/B,eAAe;EACf,gBAAgB;EAChB,gCAAgC;;EAEhC,sCAAsC;EACtC,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,uBAAuB;;EAEvB,mDAAmD;AACrD;;AAEA;IACI,qDAAqD;EACvD;;AAEF;IACI,qDAAqD;EACvD;;AAEF;EACE,iBAAiB;EACjB,eAAe;EACf,kDAAkD;AACpD;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB;EAClB,+CAA+C;AACjD;;AAEA;EACE,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,mDAAmD;AACrD;;AAEA;EACE,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,kDAAkD;EAClD;;mBAEiB;AACnB;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;AACrB;;AAEA;IACI,gBAAgB;EAClB;;AAEF;IACI,iBAAiB;EACnB;AACF;EACE,eAAe;EACf,iBAAiB;EACjB,SAAS;EACT,mDAAmD;AACrD;;AAEA;EACE,kDAAkD;AACpD;AACA;EACE,aAAa;EACb,0BAA0B;EAC1B,aAAa;AACf;;EAEE;IACE,aAAa;EACf;;AAEF;EACE,wDAAwD;EACxD,4BAA4B;;EAE5B,kBAAkB;EAClB,gBAAgB;;EAEhB,mDAAmD;EACnD,qEAAqE;EACrE,kBAAkB;EAClB;;mBAEiB;EACjB,0DAA0D;AAC5D;;AAEA;IACI,4CAA4C;EAC9C;;AAEF;IACI,aAAa;IACb,6CAA6C;EAC/C;;AAEF;IACI,mEAAmE;EACrE;;AAEF;IACI,4CAA4C;EAC9C;;AAEF;EACE,YAAY;EACZ,aAAa;EACb,YAAY;EACZ,oBAAoB;EACpB,cAAc;EACd,sBAAsB;;EAEtB,mCAAmC;EACnC,0BAA0B;EAC1B,uBAAuB;EACvB,yBAAyB;EACzB,6BAA6B;EAC7B,+BAA+B;EAC/B,4CAA4C;EAC5C,kEAAkE;;EAElE,sCAAsC;EACtC,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;;EAExB,gBAAgB;AAClB;;AAEA;IACI,8CAA8C;IAC9C,uEAAuE;EACzE;;AAEF;IACI,qDAAqD;EACvD;;AAEF;IACI,qDAAqD;EACvD;;AAEF;EACE,kBAAkB;EAClB,WAAW;EACX,UAAU;;EAEV,iBAAiB;EACjB,eAAe;EACf,kDAAkD;AACpD;AACA;EACE,YAAY;EACZ,kBAAkB;EAClB,wBAAwB;EACxB,mBAAmB;EACnB,YAAY;;EAEZ,yDAAyD;EACzD,mBAAmB;AACrB;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,YAAY;AACd;;AAEA;EACE;IACE,gBAAgB;IAChB,wBAAwB;EAC1B;;EAEA;;IAEE,gBAAgB;IAChB,WAAW;IACX,gBAAgB;IAChB,kBAAkB;EACpB;;EAEA;IACE,gBAAgB;EAClB;AACF;;AAEA;EACE,aAAa;AACf;AACA;EACE,cAAc;EACd,aAAa;EACb,eAAe;EACf,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,uBAAuB;EACvB,eAAe;EACf,sBAAsB;;EAEtB,0DAA0D;AAC5D;;EAEE;IACE;;MAEE,UAAU;IACZ;EACF;;AAEF;;uCAEuC;AACvC;EACE,gBAAgB;AAClB;;AAEA;;EAEE,gEAAgE;AAClE;;AAEA;6BAC6B;AAC7B;;EAEE,6BAA6B;EAC7B,oBAAoB;AACtB;;AAEA;EACE,cAAc;AAChB;;AAEA;;EAEE,yDAAyD;AAC3D;;AAEA;;EAEE,2BAA2B;AAC7B;;AAEA;EACE,kBAAkB;EAClB,QAAQ;EACR,UAAU;;EAEV,kDAAkD;EAClD,sBAAsB;AACxB;;AAEA;EACE,SAAS;EACT,oBAAoB;EACpB,kBAAkB;AACpB;AACA;EACE,YAAY;EACZ,aAAa;EACb,qBAAqB;EACrB,uBAAuB;AACzB;;AAEA;EACE;;IAEE,YAAY;EACd;AACF;;AAEA;EACE,yCAAyC;EACzC,eAAe;EACf,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,kBAAkB;EAClB,mBAAmB;AACrB;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,iBAAiB;;EAEjB,iBAAiB;EACjB,kBAAkB;EAClB,mBAAmB;AACrB;AACA;EACE,uBAAuB;EACvB,YAAY;EACZ,aAAa;EACb,kBAAkB;EAClB,eAAe;EACf,WAAW;EACX,YAAY;EACZ,aAAa;EACb,kDAAkD;EAClD,0DAA0D;AAC5D;;EAEE;IACE,2DAA2D;EAC7D;;AAEF;EACE;IACE,mBAAmB;IACnB,UAAU;EACZ;EACA;IACE,mBAAmB;IACnB,UAAU;EACZ;AACF;;AAEA;EACE,UAAU;EACV,WAAW;EACX,kBAAkB;EAClB,8BAA8B;EAC9B,mEAAmE;EACnE,mCAAmC;AACrC;;AAEA;IACI,eAAe;EACjB;;AAEF;IACI,4BAA4B;EAC9B;AACF;EACE,aAAa;EACb,0BAA0B;EAC1B,aAAa;EACb,WAAW;AACb;;EAEE;IACE,eAAe;IACf,aAAa;EACf;;AAEF;EACE,aAAa;EACb,+BAA+B;EAC/B,8BAA8B;EAC9B,mBAAmB;;EAEnB,YAAY;EACZ,WAAW;EACX,sBAAsB;EACtB,YAAY;EACZ,eAAe;EACf,QAAQ;;EAER,kBAAkB;EAClB,iBAAiB;EACjB,qEAAqE;EACrE,kBAAkB;;EAElB;;yBAEuB;AACzB;;AAEA;IACI,eAAe;EACjB;;AAEF;MACM,aAAa;MACb,6CAA6C;IAC/C;;AAEJ;MACM,6CAA6C;IAC/C;;AAEJ;;MAEM,mEAAmE;IACrE;;AAEJ;MACM,mEAAmE;IACrE;;AAEJ;MACM,gBAAgB;IAClB;;AAEJ;;IAEI,4CAA4C;EAC9C;;AAEF;EACE,gBAAgB;EAChB,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,yCAAyC;EACzC,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;AACrB;;AAEA;IACI,qDAAqD;EACvD;;AAEF;EACE,mDAAmD;AACrD;AACA;EACE,aAAa;EACb,gBAAgB;EAChB,cAAc;EACd,mBAAmB;EACnB,0DAA0D;EAC1D,wDAAwD;EACxD,kBAAkB;EAClB,gBAAgB;EAChB,mBAAmB;AACrB;AACA;EACE,UAAU;EACV,SAAS;AACX;AACA;EACE,gBAAgB;EAChB,aAAa;EACb,mBAAmB;EACnB,gBAAgB;EAChB,eAAe;EACf,aAAa;;EAEb,mBAAmB;EACnB,kBAAkB;;EAElB,iCAAiC;AACnC;;AAEA;;;EAGE,mEAAmE;AACrE;;AAEA;EACE,aAAa;EACb,eAAe;AACjB;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mDAAmD;EACnD,cAAc;;EAEd,aAAa;EACb,mBAAmB;EACnB,WAAW;EACX,iBAAiB;AACnB;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE,mDAAmD;EACnD,kBAAkB;AACpB;;AAEA;EACE,aAAa;EACb,mBAAmB;AACrB;;AAEA;EACE,eAAe;EACf,iBAAiB;EACjB,kDAAkD;EAClD,mBAAmB;;EAEnB,aAAa;EACb,mBAAmB;EACnB,iBAAiB;AACnB;;AAEA;EACE,WAAW;AACb;AACA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;EACd,kDAAkD;EAClD,eAAe;EACf,iBAAiB;EACjB,wBAAwB;AAC1B;;AAEA;EACE,eAAe;EACf,SAAS;EACT,sBAAsB;EACtB,gBAAgB;EAChB,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,mBAAmB;;EAEnB,qEAAqE;EACrE,mBAAmB;AACrB;;EAEE;;IAEE,oBAAoB;IACpB,oCAAoC;IACpC,oBAAoB;IACpB,sBAAsB;EACxB;;EAEA;IACE,WAAW;EACb;;AAEF;EACE,kBAAkB;EAClB,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,YAAY;;EAEZ,mBAAmB;EACnB,kBAAkB;EAClB,mBAAmB;EACnB,mDAAmD;;EAEnD,eAAe;EACf,iBAAiB;AACnB;;AAEA;IACI,eAAe;IACf,aAAa;EACf;;AAEF;IACI,iEAAiE;IACjE,oDAAoD;EACtD;;AAEF;;IAEI,uBAAuB;IACvB,mBAAmB;EACrB;;AAEF;EACE,kBAAkB;;EAElB,WAAW;EACX,UAAU;EACV,UAAU;EACV,SAAS;;EAET,wBAAwB;;KAErB,qBAAqB;;UAEhB,gBAAgB;EACxB,sBAAsB;EACtB,gBAAgB;EAChB,mBAAmB;EACnB,UAAU;AACZ;AACA;EACE,kBAAkB;EAClB,eAAe;EACf,aAAa;EACb,QAAQ;AACV;;EAEE;IACE,eAAe;IACf,aAAa;EACf;;EAEA;MACI,UAAU;IACZ;;AAEJ;EACE,OAAO;EACP,yCAAyC;EACzC,eAAe;EACf,iBAAiB;AACnB;AACA;EACE,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,aAAa;EACb,eAAe;EACf,SAAS;EACT,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB;;yBAEuB;EACvB,kBAAkB;EAClB,sBAAsB;AACxB;;AAEA;;EAEE,aAAa;EACb,eAAe;AACjB;;AAEA;EACE,iEAAiE;AACnE;;AAEA;EACE,WAAW;EACX,uBAAuB;EACvB,aAAa;EACb,YAAY;EACZ,WAAW;EACX,YAAY;EACZ;;GAEC;AACH;;AAEA;EACE,iBAAiB;EACjB,mBAAmB;EACnB,kDAAkD;AACpD;;AAEA;EACE,aAAa;EACb,6CAA6C;AAC/C;AACA;EACE,6CAA6C;AAC/C;AACA;EACE,gBAAgB;AAClB;;AAEA;EACE,+DAA+D;AACjE;AACA;EACE,+DAA+D;AACjE;;AAEA;;EAEE,4CAA4C;AAC9C;;AAEA;EACE,mBAAmB;EACnB,mEAAmE;EACnE,6BAA6B;AAC/B;;AAEA;EACE,iEAAiE;AACnE;;AAEA;EACE,iEAAiE;AACnE;AACA;EACE,iEAAiE;AACnE;;AAEA;EACE,6CAA6C;AAC/C;;AAEA;EACE,+DAA+D;AACjE;AACA;EACE,+DAA+D;AACjE;;AAEA;;;;EAIE,4CAA4C;AAC9C;;AAEA;EACE,WAAW;EACX,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,SAAS;EACT,UAAU;EACV,mBAAmB;EACnB,sBAAsB;EACtB,sBAAsB;AACxB;AACA;EACE,wEAAwE;EACxE,8BAA8B;EAC9B,sCAAsC;EACtC,uCAAuC;EACvC,wBAAwB;;EAExB,kBAAkB;EAClB,kBAAkB;;EAElB,wBAAwB;;KAErB,qBAAqB;;UAEhB,gBAAgB;EACxB,aAAa;EACb,kBAAkB;;EAElB,oBAAoB;EACpB,QAAQ;EACR,mBAAmB;EACnB,uBAAuB;;EAEvB,qBAAqB;EACrB,eAAe;EACf,gBAAgB;;EAEhB,qCAAqC;EACrC,qCAAqC;EACrC,gBAAgB;EAChB,mBAAmB;EACnB,mDAAmD;EACnD,qDAAqD;EACrD,sBAAsB;EACtB,kBAAkB;;EAElB,2BAA2B;AAC7B;;EAEE;IACE,8BAA8B;IAC9B,sCAAsC;IACtC,uCAAuC;EACzC;;EAEA;IACE,8BAA8B;IAC9B,sCAAsC;IACtC,uCAAuC;EACzC;;EAEA;IACE,uEAAuE;EACzE;;EAEA;IACE,sCAAsC;IACtC,sCAAsC;EACxC;;EAEA;;IAEE,aAAa;IACb,eAAe;EACjB;;EAEA;;IAEE,aAAa;IACb,6CAA6C;EAC/C;;EAEA;;IAEE,aAAa;IACb,6CAA6C;EAC/C;;EAEA;;IAEE,gBAAgB;EAClB;;AAEF;EACE,6CAA6C;AAC/C;;AAEA;IACI,gEAAgE;EAClE;;AAEF;MACM,WAAW;MACX,kBAAkB;MAClB,UAAU;MACV,MAAM;MACN,OAAO;MACP,WAAW;MACX,YAAY;MACZ,2BAA2B;MAC3B,sBAAsB;MACtB,6CAA6C;MAC7C,uBAAuB;IACzB;;AAEJ;IACI,mEAAmE;EACrE;;AAEF;EACE,YAAY;EACZ,aAAa;EACb,sBAAsB;EACtB,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;IACI,8BAA8B;EAChC;;AAEF;EACE,wCAAwC;EACxC,0CAA0C;EAC1C,iBAAiB;AACnB;;AAEA;IACI,aAAa;EACf;;AAEF;EACE,wCAAwC;EACxC,0CAA0C;;EAE1C,gBAAgB;EAChB,gBAAgB;EAChB,iBAAiB;;EAEjB,cAAc;EACd,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;IACI,wCAAwC;IACxC,0CAA0C;IAC1C,mBAAmB;EACrB;;AAEF,yGAAyG;AACzG;EACE,aAAa;AACf;AACA;EACE,mEAAmE;EACnE,kBAAkB;EAClB,kBAAkB;EAClB,aAAa;EACb,uBAAuB;AACzB;;EAEE;IACE,uBAAuB;EACzB;;EAEA;;EAEA;MACI;EACJ;IACE;;AAEJ;EACE,aAAa;EACb,mBAAmB;EACnB,kDAAkD;EAClD,YAAY;EACZ,iBAAiB;AACnB;;AAEA;EACE,mDAAmD;EACnD,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,SAAS;EACT,YAAY;EACZ,yBAAyB;AAC3B;AACA;EACE,yDAAyD;EACzD,sCAAsC;EACtC,6CAA6C;;EAE7C,gBAAgB;EAChB,yBAAyB;EACzB,oBAAoB;EACpB,4BAA4B;EAC5B,4DAA4D;AAC9D;;EAEE;IACE,sDAAsD;EACxD;;EAEA;IACE,oBAAoB;EACtB;;EAEA;IACE,uBAAuB;IACvB,mBAAmB;EACrB;AACF;EACE,aAAa;EACb,uBAAuB;EACvB,mBAAmB;AACrB;;EAEE;IACE,eAAe;IACf,gBAAgB;EAClB;;EAEA;IACE,eAAe;IACf,gBAAgB;EAClB;;AAEF,gDAAgD;AAChD;EACE,eAAe;EACf,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,UAAU;EACV,kBAAkB;EAClB,aAAa;EACb,qBAAqB;EACrB,aAAa;EACb,SAAS;EACT,yBAAyB;KACtB,sBAAsB;UACjB,iBAAiB;;EAEzB,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,gBAAgB;EAChB,iBAAiB;;EAEjB;;;IAGE;EACF,0DAA0D;EAC1D,gCAAgC;;EAEhC,kDAAkD;EAClD,2DAA2D;EAC3D,mBAAmB;EACnB;;mBAEiB;AACnB;AACA;IACI,aAAa;EACf;AACF;IACI,kBAAkB;IAClB,UAAU;EACZ;AACF;IACI,kBAAkB;IAClB,cAAc;EAChB;AACF;;IAEI,kDAAkD;IAClD,mEAAmE;EACrE;AACF;;IAEI,gDAAgD;IAChD,gEAAgE;EAClE;AACF;;IAEI,aAAa;IACb,6CAA6C;EAC/C;AACF;;IAEI,6CAA6C;EAC/C;AACF;;IAEI,gBAAgB;EAClB;AACF;IACI,eAAe;IACf,6DAA6D;IAC7D,gDAAgD;EAClD;AACF;;MAEM,6DAA6D;MAC7D,gDAAgD;IAClD;AACJ,+CAA+C;;AAE/C;EACE,kBAAkB;AACpB;;AAEA;;;IAGI,eAAe;IACf,kDAAkD;IAClD,gBAAgB;EAClB;;AAEF;IACI,UAAU;EACZ;AACF;EACE,kBAAkB;EAClB,cAAc;AAChB;;EAEE;IACE,YAAY;IACZ,+BAA+B;EACjC;;AAEF;EACE,kBAAkB;AACpB;;AAEA;wEACwE;;AAExE;IACI,6CAA6C;EAC/C;;AAEF;sDACsD;AACtD;EACE,kBAAkB;EAClB,aAAa;EACb,gBAAgB;EAChB,kBAAkB;EAClB,8BAA8B;EAC9B,uBAAuB;EACvB,qBAAqB;EACrB,aAAa;AACf;AACA;IACI,aAAa;EACf;;AAEF;;sEAEsE;AACtE;EACE,sBAAsB;AACxB;;AAEA;;EAEE,6BAA6B;AAC/B;;AAEA;;EAEE,6BAA6B;AAC/B;;AAEA;;;;;+CAK+C;AAC/C;EACE;;oDAEkD;UAC1C;;oDAE0C;EAClD,gDAAgD;EAChD,yCAAyC;UACjC,iCAAiC;EACzC,8BAA8B;UACtB,sBAAsB;EAC9B,sCAAsC;UAC9B,yBAAyB;EACjC;;OAEK;UACG;;OAEH;EACL,qDAAqD;EACrD,sCAAsC;AACxC;;AAEA;;EAEE;;OAEK;UACG;;OAEH;AACP;;AAEA;;EAEE;;WAES;UACD;;WAEC;AACX;;AAEA;;EAEE;;WAES;UACD;;WAEC;AACX;;AAEA;EACE,cAAc;EACd,YAAY;AACd;;AAEA;EACE,cAAc;AAChB;;AAEA;+CAC+C;AAC/C;EACE,yBAAyB;AAC3B;;AAEA;EACE,wBAAwB;AAC1B;;AAEA,2EAA2E;;AAE3E,wDAAwD;AACxD;EACE,kBAAkB;EAClB,QAAQ;EACR,oBAAoB;EACpB,aAAa;EACb,oCAAoC;EACpC,mBAAmB;EACnB,4BAA4B;EAC5B,UAAU;EACV,+CAA+C;EAC/C,UAAU;EACV,wBAAwB;AAC1B;AACA;IACI,aAAa;EACf;;AAEF,oDAAoD;AACpD;;EAEE,UAAU;AACZ;;AAEA;EACE,oBAAoB;AACtB;;AAEA;IACI,cAAc;IACd,oBAAoB;EACtB;;AAEF;IACI,cAAc;IACd,oBAAoB;EACtB;;AAEF;2BAC2B;AAC3B;EACE,UAAU;EACV,oBAAoB;AACtB;;AAEA,wCAAwC;AACxC;EACE;IACE,aAAa;EACf;AACF;;AAEA,iCAAiC;;AAEjC;EACE,aAAa;EACb,uBAAuB;EACvB,mBAAmB;EACnB,YAAY;EACZ,QAAQ;AACV;;AAEA;IACI,aAAa;EACf;;AAEF;EACE,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,sBAAsB;EACtB,UAAU;EACV,WAAW;EACX,UAAU;EACV,SAAS;EACT,kBAAkB;EAClB,6DAA6D;EAC7D,eAAe;EACf,iCAAiC;AACnC;;AAEA;IACI,8DAA8D;EAChE;;AAEF;IACI,0CAA0C;IAC1C,mBAAmB;EACrB;;AAEF;IACI,oDAAoD;EACtD;;AAEF,uDAAuD;;AAEvD;yDACyD;AACzD,gHAAgH;AAChH;EACE;IACE,oBAAoB;EACtB;;EAEA;IACE,gCAAgC;IAChC,0BAA0B;EAC5B;;IAEE;MACE,aAAa;IACf;;IAEA;MACE,aAAa;MACb,uBAAuB;MACvB,mBAAmB;MACnB,YAAY;MACZ,QAAQ;;MAER,kBAAkB;MAClB,oCAAoC;MACpC,mBAAmB;MACnB,2BAA2B;IAC7B;;EAEF;IACE,yBAAyB;EAC3B;;EAEA;IACE,WAAW;IACX,UAAU;IACV,WAAW;IACX,SAAS;IACT,kBAAkB;IAClB,6DAA6D;IAC7D,eAAe;IACf,iCAAiC;EACnC;;IAEE;MACE,8DAA8D;IAChE;;IAEA;MACE,0CAA0C;MAC1C,mBAAmB;IACrB;;IAEA;MACE,oDAAoD;IACtD;;EAEF;IACE,aAAa;EACf;AACF;AACA,+GAA+G;AAC/G;;;;IAII,aAAa;IACb,6CAA6C;IAC7C,2BAA2B;EAC7B;CDjnEF","file":"layered.css","sourcesContent":[null,".charcoal-button {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background: transparent;\n  box-sizing: border-box;\n  padding: 0 24px;\n  border-style: none;\n  outline: none;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n  text-decoration: none;\n  font: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  width: -moz-min-content;\n  width: min-content;\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  white-space: nowrap;\n  border-radius: 999999px;\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  color: var(--charcoal-color-text-default);\n  background-color: var(--charcoal-color-container-secondary-default-a);\n  transition:\n    0.2s color,\n    0.2s background-color,\n    0.2s box-shadow;\n  height: 40px;\n}\n\n  .charcoal-button:disabled,\n  .charcoal-button[aria-disabled]:not([aria-disabled='false']) {\n    cursor: default;\n    opacity: 0.32;\n  }\n\n  .charcoal-button:not(:disabled):not([aria-disabled]):focus-visible,\n  .charcoal-button[aria-disabled='false']:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n  .charcoal-button:not(:disabled):not([aria-disabled]):hover,\n  .charcoal-button[aria-disabled='false']:hover {\n    color: var(--charcoal-color-text-hover);\n    background-color: var(--charcoal-color-container-secondary-hover-a);\n  }\n\n  .charcoal-button:not(:disabled):not([aria-disabled]):active,\n  .charcoal-button[aria-disabled='false']:active,\n  .charcoal-button[data-active='true'] {\n    color: var(--charcoal-color-text-press);\n    background-color: var(--charcoal-color-container-secondary-press-a);\n  }\n\n  .charcoal-button[data-variant='Primary'] {\n    color: var(--charcoal-color-text-on-primary-default);\n    background-color: var(--charcoal-color-container-primary-default);\n  }\n\n  .charcoal-button[data-variant='Primary']:hover:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Primary']:hover[aria-disabled='false'] {\n      color: var(--charcoal-color-text-on-primary-hover);\n      background-color: var(--charcoal-color-container-primary-hover);\n    }\n\n  .charcoal-button[data-variant='Primary']:active:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Primary']:active[aria-disabled='false'],\n    .charcoal-button[data-variant='Primary'][data-active='true'] {\n      color: var(--charcoal-color-text-on-primary-press);\n      background-color: var(--charcoal-color-container-primary-press);\n    }\n\n  .charcoal-button[data-variant='Overlay'] {\n    color: var(--charcoal-color-text-on-on-img-default);\n    background-color: var(--charcoal-color-container-on-img-default);\n  }\n\n  .charcoal-button[data-variant='Overlay']:hover:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Overlay']:hover[aria-disabled='false'] {\n      color: var(--charcoal-color-text-on-on-img-hover);\n      background-color: var(--charcoal-color-container-on-img-hover);\n    }\n\n  .charcoal-button[data-variant='Overlay']:active:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Overlay']:active[aria-disabled='false'],\n    .charcoal-button[data-variant='Overlay'][data-active='true'] {\n      color: var(--charcoal-color-text-on-on-img-press);\n      background-color: var(--charcoal-color-container-on-img-press);\n    }\n\n  .charcoal-button[data-variant='Navigation'] {\n    color: var(--charcoal-color-text-on-hud-default);\n    background-color: var(--charcoal-color-container-hud-default);\n  }\n\n  .charcoal-button[data-variant='Navigation']:hover:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Navigation']:hover[aria-disabled='false'] {\n      color: var(--charcoal-color-text-on-hud-hover);\n      background-color: var(--charcoal-color-container-hud-hover);\n    }\n\n  .charcoal-button[data-variant='Navigation']:active:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Navigation']:active[aria-disabled='false'],\n    .charcoal-button[data-variant='Navigation'][data-active='true'] {\n      color: var(--charcoal-color-text-on-hud-press);\n      background-color: var(--charcoal-color-container-hud-press);\n    }\n\n  .charcoal-button[data-variant='Danger'] {\n    color: var(--charcoal-color-text-on-negative-default);\n    background-color: var(--charcoal-color-container-negative-default);\n  }\n\n  .charcoal-button[data-variant='Danger']:hover:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Danger']:hover[aria-disabled='false'] {\n      color: var(--charcoal-color-text-on-negative-hover);\n      background-color: var(--charcoal-color-container-negative-hover);\n    }\n\n  .charcoal-button[data-variant='Danger']:active:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Danger']:active[aria-disabled='false'],\n    .charcoal-button[data-variant='Danger'][data-active='true'] {\n      color: var(--charcoal-color-text-on-negative-press);\n      background-color: var(--charcoal-color-container-negative-press);\n    }\n\n  .charcoal-button[data-size='S'] {\n    padding: 0 16px;\n    height: 32px;\n  }\n\n  .charcoal-button[data-full-width='true'] {\n    width: 100%;\n  }\n.charcoal-clickable {\n  cursor: pointer;\n\n  /* Reset button appearance */\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background: transparent;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  color: inherit;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n  text-decoration: none;\n\n  /* Change the font styles in all browsers. */\n  font: inherit;\n\n  /* Remove the margin in Firefox and Safari. */\n  margin: 0;\n\n  /* Show the overflow in Edge. */\n  overflow: visible;\n\n  /* Remove the inheritance of text transform in Firefox. */\n  text-transform: none;\n}\n\n  .charcoal-clickable:disabled,\n  .charcoal-clickable[aria-disabled]:not([aria-disabled='false']) {\n    cursor: default;\n  }\n\n  .charcoal-clickable:focus {\n    outline: none;\n  }\n\n  .charcoal-clickable::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n.charcoal-icon-button {\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background: transparent;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  color: inherit;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n  text-decoration: none;\n  font: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n\n  -webkit-user-select: none;\n\n     -moz-user-select: none;\n\n          user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 999999px;\n  transition:\n    0.2s background-color,\n    0.2s box-shadow;\n}\n\n  .charcoal-icon-button:disabled,\n  .charcoal-icon-button[aria-disabled]:not([aria-disabled='false']) {\n    cursor: default;\n    opacity: 0.32;\n  }\n\n  .charcoal-icon-button:focus {\n    outline: none;\n  }\n\n  .charcoal-icon-button::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n\n  .charcoal-icon-button[data-size='XS'] {\n    width: 20px;\n    height: 20px;\n  }\n\n  .charcoal-icon-button[data-size='S'] {\n    width: 32px;\n    height: 32px;\n  }\n\n  .charcoal-icon-button[data-size='M'] {\n    width: 40px;\n    height: 40px;\n  }\n\n  .charcoal-icon-button[data-variant='Default'] {\n    color: var(--charcoal-color-icon-tertiary-default);\n    background-color: transparent;\n  }\n\n  .charcoal-icon-button[data-variant='Default'][data-active='true']:not(:disabled):not([aria-disabled]),\n    .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] {\n      color: var(--charcoal-color-icon-tertiary-press);\n      background-color: var(--charcoal-color-container-press-a);\n    }\n\n  .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):hover,\n    .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover {\n      color: var(--charcoal-color-icon-tertiary-hover);\n      background-color: var(--charcoal-color-container-hover-a);\n    }\n\n  .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):active,\n    .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active {\n      color: var(--charcoal-color-icon-tertiary-press);\n      background-color: var(--charcoal-color-container-press-a);\n    }\n\n  .charcoal-icon-button[data-variant='Overlay'] {\n    color: var(--charcoal-color-icon-on-on-img-default);\n    background-color: var(--charcoal-color-container-on-img-default);\n  }\n\n  .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not(:disabled):not([aria-disabled]),\n    .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] {\n      color: var(--charcoal-color-icon-on-on-img-press);\n      background-color: var(--charcoal-color-container-on-img-press);\n    }\n\n  .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):hover,\n    .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover {\n      color: var(--charcoal-color-icon-on-on-img-hover);\n      background-color: var(--charcoal-color-container-on-img-hover);\n    }\n\n  .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):active,\n    .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active {\n      color: var(--charcoal-color-icon-on-on-img-press);\n      background-color: var(--charcoal-color-container-on-img-press);\n    }\n\n  .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus,\n  .charcoal-icon-button[aria-disabled='false']:focus {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n  .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus-visible,\n  .charcoal-icon-button[aria-disabled='false']:focus-visible {\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n  .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n  .charcoal-icon-button[aria-disabled='false']:focus:not(:focus-visible) {\n    box-shadow: none;\n  }\n.charcoal-radio__label {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-gap: 4px;\n  align-items: center;\n  cursor: pointer;\n}\n\n  .charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {\n    opacity: 0.32;\n    cursor: default;\n  }\n\n.charcoal-radio__label_div {\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--charcoal-color-text-default);\n}\n.charcoal-radio-input {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  display: block;\n  box-sizing: border-box;\n\n  margin: 0;\n  padding: 6px;\n\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  border-radius: 999999px;\n  background-color: var(--charcoal-color-container-default);\n  transition:\n    0.2s background-color,\n    0.2s box-shadow;\n}\n\n.charcoal-radio-input:checked {\n  background-color: var(--charcoal-color-container-primary-default);\n}\n\n.charcoal-radio-input:checked::after {\n  content: '';\n  display: block;\n  width: 8px;\n  height: 8px;\n  pointer-events: none;\n  background-color: var(--charcoal-color-icon-on-primary-default);\n  border-radius: 999999px;\n  transition:\n    0.2s background-color,\n    0.2s box-shadow;\n}\n\n.charcoal-radio-input:not(:checked) {\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--charcoal-color-border-default);\n}\n\n.charcoal-radio-input:disabled {\n  cursor: default;\n}\n\n.charcoal-radio-input:not(:disabled):hover {\n  background-color: var(--charcoal-color-container-hover);\n}\n\n.charcoal-radio-input:not(:disabled):active {\n  background-color: var(--charcoal-color-container-press);\n}\n\n.charcoal-radio-input:not(:disabled):focus {\n  outline: none;\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-radio-input:not(:disabled):focus-visible {\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-radio-input:not(:disabled):focus:not(:focus-visible) {\n  box-shadow: none;\n}\n\n.charcoal-radio-input:not(:disabled)[aria-invalid='true'],\n.charcoal-radio-input:not(:disabled)[aria-invalid='true']:focus {\n  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-radio-input:checked:not(:disabled):hover {\n  background-color: var(--charcoal-color-container-primary-hover);\n}\n\n.charcoal-radio-input:checked:not(:disabled):hover::after {\n  background-color: var(--charcoal-color-icon-on-primary-hover);\n}\n\n.charcoal-radio-input:checked:not(:disabled):active {\n  background-color: var(--charcoal-color-container-primary-press);\n}\n\n.charcoal-radio-input:checked:not(:disabled):active::after {\n  background-color: var(--charcoal-color-icon-on-primary-press);\n}\n.charcoal-radio-group {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: 8px;\n}\n.charcoal-icon {\n  display: inline-flex;\n  width: var(--charcoal-icon-size);\n  height: var(--charcoal-icon-size);\n}\n\npixiv-icon:not(:defined) {\n  --pixiv-icon-base: 24px;\n  --pixiv-icon-scale: 1;\n  --pixiv-icon-size: calc(var(--pixiv-icon-base) * var(--pixiv-icon-scale));\n\n  display: inline-flex;\n  /* --charcoal-icon-size がセットされていればそれを優先、\n     なければ name / scale から導出した --pixiv-icon-size をフォールバック */\n  width: var(--charcoal-icon-size, var(--pixiv-icon-size));\n  height: var(--charcoal-icon-size, var(--pixiv-icon-size));\n}\n\npixiv-icon:not(:defined)[name^='16/'] {\n    --pixiv-icon-base: 16px;\n    --pixiv-icon-size: 16px;\n  }\n\npixiv-icon:not(:defined)[name^='24/'][scale='2'] {\n      --pixiv-icon-scale: 2;\n    }\n\npixiv-icon:not(:defined)[name^='24/'][scale='3'] {\n      --pixiv-icon-scale: 3;\n    }\n\npixiv-icon:not(:defined)[name^='32/'] {\n    --pixiv-icon-base: 32px;\n    --pixiv-icon-size: 32px;\n  }\n\npixiv-icon:not(:defined)[name^='Inline/'] {\n    --pixiv-icon-base: 16px;\n  }\n\npixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {\n      --pixiv-icon-scale: 2;\n    }\n.charcoal-multi-select {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  gap: 4px;\n}\n\n  .charcoal-multi-select:disabled,\n  .charcoal-multi-select[aria-disabled]:not([aria-disabled='false']) {\n    opacity: 0.32;\n    cursor: default;\n  }\n\n.charcoal-multi-select-label {\n  display: flow-root;\n  align-items: center;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--charcoal-color-text-default);\n}\n\n.charcoal-multi-select-label::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n\n.charcoal-multi-select-label::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n\n.charcoal-multi-select-input[type='checkbox'] {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  display: block;\n  width: 20px;\n  height: 20px;\n  margin: 0;\n  background-color: var(--charcoal-color-container-neutral-default);\n  border-radius: 999999px;\n  transition:\n    0.2s background-color,\n    0.2s box-shadow;\n}\n\n.charcoal-multi-select-input[type='checkbox']:checked {\n    background-color: var(--charcoal-color-container-primary-default);\n  }\n\n.charcoal-multi-select-input[type='checkbox']:focus {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n.charcoal-multi-select-input[type='checkbox']:focus-visible {\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n.charcoal-multi-select-input[type='checkbox']:focus:not(:focus-visible) {\n    box-shadow: none;\n  }\n\n.charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not([aria-disabled]),\n  .charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {\n    background-color: var(--charcoal-color-container-neutral-hover);\n  }\n\n.charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not([aria-disabled]),\n  .charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {\n    background-color: var(--charcoal-color-container-neutral-press);\n  }\n\n.charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),\n  .charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {\n    background-color: var(--charcoal-color-container-primary-hover);\n  }\n\n.charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),\n  .charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {\n    background-color: var(--charcoal-color-container-primary-press);\n  }\n\n.charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false']:not(:disabled):not(\n      [aria-disabled]\n    ) {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-multi-select-input[type='checkbox'][data-overlay='true'] {\n    background-color: var(--charcoal-color-container-on-img-default);\n  }\n\n.charcoal-multi-select-overlay {\n  position: absolute;\n  top: -2px;\n  left: -2px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border-radius: 999999px;\n  color: var(--charcoal-color-icon-on-primary-default);\n  transition: 0.2s box-shadow;\n}\n\n.charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true']:not(:disabled):not(\n      [aria-disabled]\n    ) {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-multi-select-overlay[data-overlay='true'] {\n    border-color: var(--charcoal-color-border-hud);\n    border-width: 2px;\n    border-style: solid;\n  }\n.charcoal-switch__label {\n  display: inline-grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  cursor: pointer;\n  outline: 0;\n  gap: 4px;\n}\n\n  .charcoal-switch__label[aria-disabled='true'] {\n    opacity: 0.32;\n    cursor: default;\n  }\n\n  .charcoal-switch__label[aria-disabled='true'] > input {\n      opacity: 1;\n    }\n\n.charcoal-switch__label_div {\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--charcoal-color-text-default);\n}\n.charcoal-switch-input {\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  display: inline-flex;\n  position: relative;\n  box-sizing: border-box;\n  width: 28px;\n  border: 2px solid transparent;\n\n  transition-property: background-color, box-shadow;\n  transition-duration: 0.2s;\n\n  outline: none;\n  border-radius: 16px;\n  height: 16px;\n  margin: 0;\n  background-color: var(--charcoal-color-container-neutral-default);\n}\n\n.charcoal-switch-input:disabled,\n.charcoal-switch-input[readonly] {\n  opacity: 0.32;\n  cursor: default;\n}\n\n.charcoal-switch-input::after {\n  content: '';\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 0;\n  width: 12px;\n  height: 12px;\n  transform: translateX(0);\n  transition: transform 0.2s;\n  border-radius: 1024px;\n  background-color: var(--charcoal-color-icon-on-primary-default);\n}\n\n.charcoal-switch-input:checked::after {\n  transform: translateX(12px);\n  transition: transform 0.2s;\n}\n\n.charcoal-switch-input:checked {\n  background-color: var(--charcoal-color-container-primary-default);\n}\n\n.charcoal-switch-input:not(:disabled):hover {\n  background-color: var(--charcoal-color-container-neutral-hover);\n}\n\n.charcoal-switch-input:not(:disabled):active {\n  background-color: var(--charcoal-color-container-neutral-press);\n}\n\n.charcoal-switch-input:not(:disabled):focus {\n  outline: none;\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-switch-input:not(:disabled):focus-visible {\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-switch-input:not(:disabled):focus:not(:focus-visible) {\n  box-shadow: none;\n}\n\n.charcoal-switch-input:not(:disabled)::after:hover {\n  background-color: var(--charcoal-color-icon-on-primary-hover);\n}\n\n.charcoal-switch-input:not(:disabled)::after:active {\n  background-color: var(--charcoal-color-icon-on-primary-press);\n}\n\n.charcoal-switch-input:not(:disabled):checked:hover {\n  background-color: var(--charcoal-color-container-primary-hover);\n}\n\n.charcoal-switch-input:not(:disabled):checked:active {\n  background-color: var(--charcoal-color-container-primary-press);\n}\n.charcoal-text-field-root {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: 4px;\n}\n\n  .charcoal-text-field-root[aria-disabled='true'] {\n    opacity: 0.32;\n  }\n\n.charcoal-text-field-container {\n  display: flex;\n  height: 40px;\n  transition:\n    0.2s background-color,\n    0.2s box-shadow;\n  color: var(--charcoal-color-text-secondary-default);\n  background-color: var(--charcoal-color-container-secondary-default-a);\n  border-radius: 4px;\n  padding: 0 8px;\n  line-height: 22px;\n  font-size: 14px;\n}\n\n.charcoal-text-field-container[data-invalid='true'] {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-text-field-container:not([aria-disabled='true']):hover {\n    background-color: var(--charcoal-color-container-secondary-hover-a);\n  }\n\n.charcoal-text-field-container:not([aria-disabled='true']):focus-within {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n.charcoal-text-field-container:not([aria-disabled='true'])[data-invalid='true']:focus-within {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-text-field-prefix {\n  display: flex;\n  align-items: center;\n  margin-right: 4px;\n}\n\n.charcoal-text-field-suffix {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-left: 4px;\n}\n\n.charcoal-text-field-input-root {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.charcoal-text-field-input {\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  font-family: inherit;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  height: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding-left: 0;\n  padding-right: 0;\n  border-radius: calc(4px / 0.875);\n\n  /* Display box-shadow for iOS Safari */\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background: transparent;\n\n  color: var(--charcoal-color-text-secondary-default);\n}\n\n.charcoal-text-field-input::-moz-placeholder {\n    color: var(--charcoal-color-text-placeholder-default);\n  }\n\n.charcoal-text-field-input::placeholder {\n    color: var(--charcoal-color-text-placeholder-default);\n  }\n\n.charcoal-text-field-line-counter {\n  line-height: 22px;\n  font-size: 14px;\n  color: var(--charcoal-color-text-tertiary-default);\n}\n.charcoal-field-label {\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  display: flow-root;\n  color: var(--charcoal-color-text-default-text1);\n}\n\n.charcoal-field-label-required-text {\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-color-text-secondary-default);\n}\n\n.charcoal-field-label-sub-label {\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-color-text-tertiary-default);\n  transition:\n    0.2s color,\n    0.2s box-shadow;\n}\n\n.charcoal-field-label-root {\n  display: inline-flex;\n  align-items: center;\n}\n\n.charcoal-field-label-root > .charcoal-field-label-required-text {\n    margin-left: 4px;\n  }\n\n.charcoal-field-label-root > .charcoal-field-label-sub-label {\n    margin-left: auto;\n  }\n.charcoal-text-field-assistive-text {\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  color: var(--charcoal-color-text-secondary-default);\n}\n\n.charcoal-text-field-assistive-text[data-invalid='true'] {\n  color: var(--charcoal-color-text-negative-default);\n}\n.charcoal-text-area-root {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: 4px;\n}\n\n  .charcoal-text-area-root[aria-disabled='true'] {\n    opacity: 0.32;\n  }\n\n.charcoal-text-area-container {\n  /* Runtime variable overridden by the React component. */\n  --charcoal-text-area-rows: 4;\n\n  position: relative;\n  overflow: hidden;\n\n  color: var(--charcoal-color-text-secondary-default);\n  background-color: var(--charcoal-color-container-secondary-default-a);\n  border-radius: 4px;\n  transition:\n    0.2s background-color,\n    0.2s box-shadow;\n  height: calc(22px * var(--charcoal-text-area-rows) + 18px);\n}\n\n.charcoal-text-area-container[aria-invalid='true'] {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-text-area-container:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n.charcoal-text-area-container:not([aria-disabled='true']):hover {\n    background-color: var(--charcoal-color-container-secondary-hover-a);\n  }\n\n.charcoal-text-area-container[aria-invalid='true']:focus-within {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-text-area-textarea {\n  border: none;\n  outline: none;\n  resize: none;\n  font-family: inherit;\n  color: inherit;\n  box-sizing: border-box;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding: calc(9px / 0.875) calc(8px / 0.875);\n  height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px);\n\n  /* Display box-shadow for iOS Safari */\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n\n  background: none;\n}\n\n.charcoal-text-area-textarea[data-no-bottom-padding='true'] {\n    padding: calc(9px / 0.875) calc(8px / 0.875) 0;\n    height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);\n  }\n\n.charcoal-text-area-textarea::-moz-placeholder {\n    color: var(--charcoal-color-text-placeholder-default);\n  }\n\n.charcoal-text-area-textarea::placeholder {\n    color: var(--charcoal-color-text-placeholder-default);\n  }\n\n.charcoal-text-area-counter {\n  position: absolute;\n  bottom: 9px;\n  right: 8px;\n\n  line-height: 22px;\n  font-size: 14px;\n  color: var(--charcoal-color-text-tertiary-default);\n}\n.charcoal-modal-dialog {\n  margin: auto;\n  position: relative;\n  height: -moz-fit-content;\n  height: fit-content;\n  width: 440px;\n\n  background-color: var(--charcoal-color-container-default);\n  border-radius: 24px;\n}\n\n.charcoal-modal-dialog[data-size='S'] {\n  width: 336px;\n}\n\n.charcoal-modal-dialog[data-size='M'] {\n  width: 440px;\n}\n\n.charcoal-modal-dialog[data-size='L'] {\n  width: 648px;\n}\n\n@media (max-width: 743px) {\n  .charcoal-modal-dialog {\n    max-width: 440px;\n    width: calc(100% - 48px);\n  }\n\n  .charcoal-modal-dialog[data-bottom-sheet='true'],\n  .charcoal-modal-dialog[data-bottom-sheet='full'] {\n    max-width: unset;\n    width: 100%;\n    border-radius: 0;\n    margin: auto 0 0 0;\n  }\n\n  .charcoal-modal-dialog[data-bottom-sheet='full'] {\n    min-height: 100%;\n  }\n}\n\n.charcoal-modal-dialog:focus {\n  outline: none;\n}\n.charcoal-modal-background {\n  overflow: auto;\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  padding: 40px 0;\n  box-sizing: border-box;\n\n  background-color: var(--charcoal-color-background-overlay);\n}\n\n  @media (max-width: 743px) {\n    .charcoal-modal-background[data-bottom-sheet='true'],\n    .charcoal-modal-background[data-bottom-sheet='full'] {\n      padding: 0;\n    }\n  }\n\n/* easeOutQuart。duration は useTransitionPresence の MODAL_TRANSITION_DURATION_MS と一致させること。\n   transition は entering / exiting に限定し、開いたままテーマ切り替え等で\n   色や transform が変わってもアニメーションしないようにする */\n.charcoal-modal-background[data-animation] {\n  overflow: hidden;\n}\n\n.charcoal-modal-background[data-animation='entering'],\n.charcoal-modal-background[data-animation='exiting'] {\n  transition: background-color 400ms cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n/* 閉じアニメーション中はクリックを下のページへ通す（transitionend が来ない環境で\n   透明なオーバーレイがタップを奪い続けるのも防ぐ） */\n.charcoal-modal-background[data-animation='exited'],\n.charcoal-modal-background[data-animation='exiting'] {\n  background-color: transparent;\n  pointer-events: none;\n}\n\n.charcoal-modal-background[data-animation='entered'] {\n  overflow: auto;\n}\n\n.charcoal-modal-background[data-animation='entering'] > .charcoal-modal-dialog,\n.charcoal-modal-background[data-animation='exiting'] > .charcoal-modal-dialog {\n  transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.charcoal-modal-background[data-animation='exited'] > .charcoal-modal-dialog,\n.charcoal-modal-background[data-animation='exiting'] > .charcoal-modal-dialog {\n  transform: translateY(100%);\n}\n\n.charcoal-modal-close-button {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n\n  color: var(--charcoal-color-text-tertiary-default);\n  transition: 0.2s color;\n}\n\n.charcoal-modal-title {\n  margin: 0;\n  font-weight: inherit;\n  font-size: inherit;\n}\n.charcoal-modal-header-root {\n  height: 64px;\n  display: grid;\n  align-content: center;\n  justify-content: center;\n}\n\n@media (max-width: 743px) {\n  .charcoal-modal-header-root[data-bottom-sheet='true'],\n  .charcoal-modal-header-root[data-bottom-sheet='full'] {\n    height: 48px;\n  }\n}\n\n.charcoal-modal-header-title {\n  color: var(--charcoal-color-text-default);\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: bold;\n  display: flow-root;\n}\n\n.charcoal-modal-align {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n.charcoal-modal-body {\n  padding-bottom: 40px;\n}\n\n.charcoal-modal-buttons {\n  display: grid;\n  grid-auto-flow: row;\n  grid-row-gap: 8px;\n\n  padding-top: 16px;\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.charcoal-loading-spinner {\n  box-sizing: content-box;\n  margin: auto;\n  padding: 16px;\n  border-radius: 8px;\n  font-size: 48px;\n  width: 48px;\n  height: 48px;\n  opacity: 0.84;\n  color: var(--charcoal-color-icon-tertiary-default);\n  background-color: var(--charcoal-color-background-default);\n}\n\n  .charcoal-loading-spinner[data-transparent='true'] {\n    background-color: var(--charcoal-color-container-default-a);\n  }\n\n@keyframes charcoal-loading-spinner-icon-scale-out {\n  from {\n    transform: scale(0);\n    opacity: 1;\n  }\n  to {\n    transform: scale(1);\n    opacity: 0;\n  }\n}\n\n.charcoal-loading-spinner-icon {\n  width: 1em;\n  height: 1em;\n  border-radius: 1em;\n  background-color: currentColor;\n  animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;\n  animation-iteration-count: infinite;\n}\n\n.charcoal-loading-spinner-icon[data-reset-animation] {\n    animation: none;\n  }\n\n.charcoal-loading-spinner-icon[data-once='true'] {\n    animation-iteration-count: 1;\n  }\n.charcoal-dropdown-selector-root {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: 4px;\n  width: 100%;\n}\n\n  .charcoal-dropdown-selector-root[aria-disabled='true'] {\n    cursor: default;\n    opacity: 0.32;\n  }\n\n.charcoal-dropdown-selector-button {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  justify-content: space-between;\n  align-items: center;\n\n  height: 40px;\n  width: 100%;\n  box-sizing: border-box;\n  border: none;\n  cursor: pointer;\n  gap: 4px;\n\n  padding-right: 8px;\n  padding-left: 8px;\n  background-color: var(--charcoal-color-container-secondary-default-a);\n  border-radius: 4px;\n\n  transition:\n    0.2s box-shadow,\n    0.2s background-color;\n}\n\n.charcoal-dropdown-selector-button:disabled {\n    cursor: default;\n  }\n\n.charcoal-dropdown-selector-button:not(:disabled):focus {\n      outline: none;\n      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n    }\n\n.charcoal-dropdown-selector-button:not(:disabled):focus-visible {\n      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n    }\n\n.charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],\n    .charcoal-dropdown-selector-button:not(:disabled):active {\n      background-color: var(--charcoal-color-container-secondary-press-a);\n    }\n\n.charcoal-dropdown-selector-button:not(:disabled):hover {\n      background-color: var(--charcoal-color-container-secondary-hover-a);\n    }\n\n.charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {\n      box-shadow: none;\n    }\n\n.charcoal-dropdown-selector-button[aria-invalid='true'],\n  .charcoal-dropdown-selector-button:not(:disabled)[aria-invalid='true']:focus:not(:focus-visible) {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-ui-dropdown-selector-text {\n  text-align: left;\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-color-text-default);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.charcoal-ui-dropdown-selector-text[data-placeholder='true'] {\n    color: var(--charcoal-color-text-placeholder-default);\n  }\n\n.charcoal-ui-dropdown-selector-icon {\n  color: var(--charcoal-color-icon-secondary-default);\n}\n.charcoal-popover {\n  margin: 4px 0;\n  list-style: none;\n  overflow: auto;\n  max-height: inherit;\n  background-color: var(--charcoal-color-background-default);\n  border: solid 1px var(--charcoal-color-border-secondary);\n  border-radius: 8px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.charcoal-menu-list {\n  padding: 0;\n  margin: 0;\n}\n.charcoal-list-item {\n  list-style: none;\n  display: flex;\n  align-items: center;\n  min-height: 40px;\n  cursor: pointer;\n  outline: none;\n\n  padding-right: 16px;\n  padding-left: 16px;\n\n  transition: background-color 0.2s;\n}\n\n.charcoal-list-item:not([aria-disabled='true']):hover,\n.charcoal-list-item:not([aria-disabled='true']):focus,\n.charcoal-list-item:not([aria-disabled='true']):focus-within {\n  background-color: var(--charcoal-color-container-secondary-default);\n}\n\n.charcoal-list-item[aria-disabled='true'] {\n  opacity: 0.32;\n  cursor: default;\n}\n.charcoal-dropdown-selector-menu-item {\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--charcoal-color-text-secondary-default);\n  padding: 9px 0;\n\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-left: 20px;\n}\n\n.charcoal-dropdown-selector-menu-item[data-selected='true'] {\n  margin-left: 0px;\n}\n\n.charcoal-dropdown-selector-menu-item-icon {\n  color: var(--charcoal-color-text-secondary-default);\n  padding-right: 4px;\n}\n\n.charcoal-dropdown-selector-menu-item-container {\n  display: flex;\n  align-items: center;\n}\n\n.charcoal-dropdown-selector-menu-secondary {\n  font-size: 12px;\n  line-height: 20px;\n  color: var(--charcoal-color-text-tertiary-default);\n  padding-bottom: 9px;\n\n  display: flex;\n  align-items: center;\n  margin-left: 20px;\n}\n\n.charcoal-dropdown-selector-menu-fullwidth {\n  width: 100%;\n}\n.charcoal-menu-item-group {\n  display: block;\n}\n\n.charcoal-menu-item-group > span {\n  display: block;\n  color: var(--charcoal-color-text-tertiary-default);\n  font-size: 12px;\n  font-weight: bold;\n  padding: 12px 0 8px 16px;\n}\n\n.charcoal-menu-item-group > ul {\n  padding-left: 0;\n  margin: 0;\n  box-sizing: border-box;\n  list-style: none;\n  overflow: hidden;\n}\n.charcoal-segmented-control {\n  display: inline-flex;\n  align-items: center;\n\n  background-color: var(--charcoal-color-container-secondary-default-a);\n  border-radius: 16px;\n}\n\n  .charcoal-segmented-control[data-uniform-segment-width='true'],\n  .charcoal-segmented-control[data-full-width='true'] {\n    display: inline-grid;\n    grid-auto-columns: minmax(80px, 1fr);\n    grid-auto-rows: 32px;\n    grid-auto-flow: column;\n  }\n\n  .charcoal-segmented-control[data-full-width='true'] {\n    width: 100%;\n  }\n\n.charcoal-segmented-control-radio__label {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  height: 32px;\n\n  padding-right: 16px;\n  padding-left: 16px;\n  border-radius: 16px;\n  color: var(--charcoal-color-text-secondary-default);\n\n  font-size: 14px;\n  line-height: 22px;\n}\n\n.charcoal-segmented-control-radio__label[aria-disabled]:not([aria-disabled='false']) {\n    cursor: default;\n    opacity: 0.32;\n  }\n\n.charcoal-segmented-control-radio__label[data-checked='true'] {\n    background-color: var(--charcoal-color-container-primary-default);\n    color: var(--charcoal-color-text-on-primary-default);\n  }\n\n.charcoal-segmented-control-radio__label[data-uniform-segment-width='true'],\n  .charcoal-segmented-control-radio__label[data-full-width='true'] {\n    justify-content: center;\n    white-space: nowrap;\n  }\n\n.charcoal-segmented-control-radio__input {\n  position: absolute;\n\n  height: 0px;\n  width: 0px;\n  padding: 0;\n  margin: 0;\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  box-sizing: border-box;\n  overflow: hidden;\n  white-space: nowrap;\n  opacity: 0;\n}\n.charcoal-checkbox__label {\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  gap: 4px;\n}\n\n  .charcoal-checkbox__label[aria-disabled='true'] {\n    cursor: default;\n    opacity: 0.32;\n  }\n\n  .charcoal-checkbox__label[aria-disabled='true'] > input {\n      opacity: 1;\n    }\n\n.charcoal-checkbox__label_div {\n  flex: 1;\n  color: var(--charcoal-color-text-default);\n  font-size: 14px;\n  line-height: 20px;\n}\n.charcoal-checkbox-input {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  display: flex;\n  cursor: pointer;\n  margin: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  transition:\n    0.2s box-shadow,\n    0.2s background-color;\n  position: relative;\n  box-sizing: border-box;\n}\n\n.charcoal-checkbox-input:disabled,\n.charcoal-checkbox-input[readonly] {\n  opacity: 0.32;\n  cursor: default;\n}\n\n.charcoal-checkbox-input:checked {\n  background-color: var(--charcoal-color-container-primary-default);\n}\n\n.charcoal-checkbox-input:checked::after {\n  content: '';\n  background-color: white;\n  display: flex;\n  margin: auto;\n  width: 16px;\n  height: 16px;\n  clip-path: path(\n    'M10.6 5a1.3 1.3 0 0 1 1.8 1.9l-5.7 5.6-3-2.9a1.3 1.3 0 1 1 2-1.9l1 1z'\n  );\n}\n\n.charcoal-checkbox-input:not(:checked) {\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--charcoal-color-border-default);\n}\n\n.charcoal-checkbox-input:not(:disabled):focus {\n  outline: none;\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input:not(:disabled):focus-visible {\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input:not(:disabled):focus:not(:focus-visible) {\n  box-shadow: none;\n}\n\n.charcoal-checkbox-input:checked:not(:disabled):hover {\n  background-color: var(--charcoal-color-container-primary-hover);\n}\n.charcoal-checkbox-input:checked:not(:disabled):active {\n  background-color: var(--charcoal-color-container-primary-press);\n}\n\n.charcoal-checkbox-input[aria-invalid='true'],\n.charcoal-checkbox-input[aria-invalid='true']:not(:disabled):focus {\n  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true'] {\n  border-radius: 10px;\n  background-color: var(--charcoal-color-container-secondary-default);\n  border: 2px solid transparent;\n}\n\n.charcoal-checkbox-input[data-rounded='true']:checked {\n  background-color: var(--charcoal-color-container-primary-default);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):hover {\n  background-color: var(--charcoal-color-container-secondary-hover);\n}\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):active {\n  background-color: var(--charcoal-color-container-secondary-press);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):focus-visible {\n  box-shadow: 0 0 0 6px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):hover {\n  background-color: var(--charcoal-color-container-primary-hover);\n}\n.charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):active {\n  background-color: var(--charcoal-color-container-primary-press);\n}\n\n.charcoal-checkbox-input[data-rounded='true'][aria-invalid='true'],\n.charcoal-checkbox-input[data-rounded='true'][aria-invalid='true']:not(\n    :disabled\n  ):focus {\n  box-shadow: 0 0 0 6px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true']::before {\n  content: '';\n  width: 24px;\n  height: 24px;\n  position: absolute;\n  top: -4px;\n  left: -4px;\n  border-radius: 12px;\n  border: 2px solid #fff;\n  box-sizing: border-box;\n}\n.charcoal-tag-item {\n  --charcoal-tag-item-color: var(--charcoal-color-text-on-primary-default);\n  --charcoal-tag-item-size: 40px;\n  --charcoal-tag-item-padding-left: 24px;\n  --charcoal-tag-item-padding-right: 24px;\n  --charcoal-tag-item-bg: ;\n\n  isolation: isolate;\n  position: relative;\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  outline: none;\n  border-style: none;\n\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n\n  text-decoration: none;\n  cursor: pointer;\n  overflow: hidden;\n\n  color: var(--charcoal-tag-item-color);\n  height: var(--charcoal-tag-item-size);\n  padding-top: 4px;\n  padding-bottom: 4px;\n  padding-left: var(--charcoal-tag-item-padding-left);\n  padding-right: var(--charcoal-tag-item-padding-right);\n  box-sizing: border-box;\n  border-radius: 4px;\n\n  transition: 0.2s box-shadow;\n}\n\n  .charcoal-tag-item[data-size='M'] {\n    --charcoal-tag-item-size: 40px;\n    --charcoal-tag-item-padding-left: 24px;\n    --charcoal-tag-item-padding-right: 24px;\n  }\n\n  .charcoal-tag-item[data-size='S'] {\n    --charcoal-tag-item-size: 32px;\n    --charcoal-tag-item-padding-left: 16px;\n    --charcoal-tag-item-padding-right: 16px;\n  }\n\n  .charcoal-tag-item[data-state='inactive'] {\n    --charcoal-tag-item-color: var(--charcoal-color-text-secondary-default);\n  }\n\n  .charcoal-tag-item[data-state='active'] {\n    --charcoal-tag-item-padding-left: 16px;\n    --charcoal-tag-item-padding-right: 8px;\n  }\n\n  .charcoal-tag-item:disabled,\n  .charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) {\n    opacity: 0.32;\n    cursor: default;\n  }\n\n  .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,\n  .charcoal-tag-item[aria-disabled='false']:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n  .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,\n  .charcoal-tag-item[aria-disabled='false']:focus {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n  .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n  .charcoal-tag-item[aria-disabled='false']:focus:not(:focus-visible) {\n    box-shadow: none;\n  }\n\n.charcoal-tag-item__bg {\n  background-color: var(--charcoal-tag-item-bg);\n}\n\n.charcoal-tag-item__bg[data-bg-variant='image'] {\n    background-color: var(--charcoal-color-container-on-img-default);\n  }\n\n.charcoal-tag-item__bg[data-bg-variant='image']::before {\n      content: '';\n      position: absolute;\n      z-index: 1;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-position: center;\n      background-size: cover;\n      background-image: var(--charcoal-tag-item-bg);\n      mix-blend-mode: overlay;\n    }\n\n.charcoal-tag-item__bg[data-state='inactive'] {\n    background-color: var(--charcoal-color-container-secondary-default);\n  }\n\n.charcoal-tag-item__label {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.charcoal-tag-item__label[data-has-translate='true'] {\n    justify-content: space-between;\n  }\n\n.charcoal-tag-item__label__translated {\n  --charcoal-tag-item-text-font-size: 12px;\n  --charcoal-tag-item-text-line-height: 20px;\n  font-weight: bold;\n}\n\n.charcoal-tag-item__label__translated::before {\n    display: none;\n  }\n\n.charcoal-tag-item__label__text {\n  --charcoal-tag-item-text-font-size: 14px;\n  --charcoal-tag-item-text-line-height: 22px;\n\n  max-width: 152px;\n  overflow: hidden;\n  font-weight: bold;\n\n  color: inherit;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.charcoal-tag-item__label__text[data-has-translate='true'] {\n    --charcoal-tag-item-text-font-size: 10px;\n    --charcoal-tag-item-text-line-height: 14px;\n    font-weight: normal;\n  }\n\n/* Kept flat: different class name from .charcoal-tag-item__label__text (note: \"labe\" typo in original) */\n.charcoal-tag-item__labe__text[data-has-translate='true']::after {\n  display: none;\n}\n.charcoal-hint-text {\n  background-color: var(--charcoal-color-container-secondary-default);\n  border-radius: 8px;\n  padding: 12px 16px;\n  display: flex;\n  align-items: flex-start;\n}\n\n  .charcoal-hint-text[data-context='page'] {\n    justify-content: center;\n  }\n\n  @media (min-width: 744px) {\n\n  .charcoal-hint-text[data-context='page'] {\n      padding: 20px 40px\n  }\n    }\n\n.charcoal-hint-text-icon {\n  display: flex;\n  align-items: center;\n  color: var(--charcoal-color-icon-tertiary-default);\n  height: 22px;\n  margin: 0 4px 0 0;\n}\n\n.charcoal-hint-text-message {\n  color: var(--charcoal-color-text-secondary-default);\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  margin: 0;\n  min-width: 0;\n  overflow-wrap: break-word;\n}\n.charcoal-text-ellipsis {\n  /* Runtime variables overridden by the React component. */\n  --charcoal-text-ellipsis-line-limit: 1;\n  --charcoal-text-ellipsis-line-height: inherit;\n\n  overflow: hidden;\n  overflow-wrap: break-word;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);\n}\n\n  .charcoal-text-ellipsis[data-has-line-height='true'] {\n    line-height: var(--charcoal-text-ellipsis-line-height);\n  }\n\n  .charcoal-text-ellipsis[data-has-line-height='false'] {\n    line-height: inherit;\n  }\n\n  .charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n.charcoal-pagination {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n  .charcoal-pagination[data-size='S'] .charcoal-pagination-button {\n    min-width: 32px;\n    min-height: 32px;\n  }\n\n  .charcoal-pagination[data-size='M'] .charcoal-pagination-button {\n    min-width: 40px;\n    min-height: 40px;\n  }\n\n/* stylelint-disable no-descending-specificity */\n.charcoal-pagination-button {\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  text-decoration: none;\n  font: inherit;\n  margin: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 22px;\n\n  /* HACK:\n   * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.\n   * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.\n   */\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -webkit-transform: translateZ(0);\n\n  color: var(--charcoal-color-text-tertiary-default);\n  background-color: var(--charcoal-color-container-default-a);\n  border-radius: 20px;\n  transition:\n    0.2s background-color,\n    0.2s box-shadow;\n}\n.charcoal-pagination-button:focus {\n    outline: none;\n  }\n.charcoal-pagination-button::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n.charcoal-pagination-button[hidden] {\n    visibility: hidden;\n    display: block;\n  }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,\n  .charcoal-pagination-button[aria-disabled='false']:hover {\n    color: var(--charcoal-color-text-tertiary-default);\n    background-color: var(--charcoal-color-container-secondary-default);\n  }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,\n  .charcoal-pagination-button[aria-disabled='false']:active {\n    color: var(--charcoal-color-text-tertiary-press);\n    background-color: var(--charcoal-color-container-tertiary-press);\n  }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,\n  .charcoal-pagination-button[aria-disabled='false']:focus {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus-visible,\n  .charcoal-pagination-button[aria-disabled='false']:focus-visible {\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n  .charcoal-pagination-button[aria-disabled='false']:focus:not(:focus-visible) {\n    box-shadow: none;\n  }\n.charcoal-pagination-button[aria-current] {\n    cursor: default;\n    background-color: var(--charcoal-color-container-hud-default);\n    color: var(--charcoal-color-text-on-hud-default);\n  }\n.charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):hover,\n    .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):active {\n      background-color: var(--charcoal-color-container-hud-default);\n      color: var(--charcoal-color-text-on-hud-default);\n    }\n/* stylelint-enable no-descending-specificity */\n\n.charcoal-pagination-nav-button[data-hidden] {\n  visibility: hidden;\n}\n\n.charcoal-pagination-spacer,\n  .charcoal-pagination-spacer:hover,\n  .charcoal-pagination-spacer:active {\n    cursor: default;\n    color: var(--charcoal-color-text-tertiary-default);\n    background: none;\n  }\n\n.charcoal-pagination-spacer.charcoal-icon-button:disabled {\n    opacity: 1;\n  }\n.charcoal-carousel {\n  position: relative;\n  display: block;\n}\n\n  .charcoal-carousel[data-full-width='true'] {\n    width: 100vw;\n    margin-inline: calc(50% - 50vw);\n  }\n\n.charcoal-carousel__viewport {\n  position: relative;\n}\n\n/* フォーカスリングは scroller ではなく viewport に描く。scroller に置くと\n     hasGradient の mask（mask-clip: border-box）で外側の box-shadow ごと消えるため。 */\n\n.charcoal-carousel__viewport[data-focus-visible] {\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n/* スライド間隔は所有しない（sandbox 同様、利用者が children 側で注入する）。\n   このコンポーネントの責務はスクロールと indicator / arrow によるページ送りのみ。 */\n.charcoal-carousel__scroller {\n  position: relative;\n  display: flex;\n  overflow-x: auto;\n  overflow-y: hidden;\n  overscroll-behavior-x: contain;\n  scroll-behavior: smooth;\n  scrollbar-width: none;\n  outline: none;\n}\n.charcoal-carousel__scroller::-webkit-scrollbar {\n    display: none;\n  }\n\n/* スクロールスナップ type は prop（scrollSnap.type）で scroller に出し分ける。\n   align は基底 .charcoal-carousel__item の後（後述）に置く（no-descending-specificity 回避）。\n   未指定時の既定（M=none / S=mandatory / align=center）は JS 側で data 属性に解決する。 */\n.charcoal-carousel[data-scroll-snap-type='none'] .charcoal-carousel__scroller {\n  scroll-snap-type: none;\n}\n\n.charcoal-carousel[data-scroll-snap-type='proximity']\n  .charcoal-carousel__scroller {\n  scroll-snap-type: x proximity;\n}\n\n.charcoal-carousel[data-scroll-snap-type='mandatory']\n  .charcoal-carousel__scroller {\n  scroll-snap-type: x mandatory;\n}\n\n/* グラデーション: mask で端のアイテム自体を透明へフェードさせる（下の背景色を\n   問わない）。mask の色はアルファとしてだけ効く（#000=表示 / transparent=透過）。\n   左フェード・右フェードの 2 レイヤーを intersect で合成し、はみ出して\n   スクロール可能な側のみ data-can-prev/next で 72px のフェード帯を枠内に置く。\n   無効な側はフェード帯ごと枠外へスライドして隠す（mask-image と違い\n   mask-position は補間可能なので、切替が 0.2s のフェードになる）。 */\n.charcoal-carousel[data-has-gradient='true'] .charcoal-carousel__scroller {\n  -webkit-mask-image:\n    linear-gradient(to right, transparent, #000 72px),\n    linear-gradient(to left, transparent, #000 72px);\n          mask-image:\n    linear-gradient(to right, transparent, #000 72px),\n    linear-gradient(to left, transparent, #000 72px);\n  /* 枠外へ 72px スライドしても反対側の端が欠けないよう、レイヤー幅に 72px 足す */\n  -webkit-mask-size: calc(100% + 72px) 100%;\n          mask-size: calc(100% + 72px) 100%;\n  -webkit-mask-repeat: no-repeat;\n          mask-repeat: no-repeat;\n  -webkit-mask-composite: source-in, xor;\n          mask-composite: intersect;\n  -webkit-mask-position:\n    -72px 0,\n    0 0;\n          mask-position:\n    -72px 0,\n    0 0;\n  /* 0.2s ease-in は react-sandbox の LeftGradient と同じ値 */\n  transition: 0.2s ease-in mask-position;\n}\n\n.charcoal-carousel[data-has-gradient='true'][data-can-prev='true']\n  .charcoal-carousel__scroller {\n  -webkit-mask-position:\n    0 0,\n    0 0;\n          mask-position:\n    0 0,\n    0 0;\n}\n\n.charcoal-carousel[data-has-gradient='true'][data-can-next='true']\n  .charcoal-carousel__scroller {\n  -webkit-mask-position:\n    -72px 0,\n    -72px 0;\n          mask-position:\n    -72px 0,\n    -72px 0;\n}\n\n.charcoal-carousel[data-has-gradient='true'][data-can-prev='true'][data-can-next='true']\n  .charcoal-carousel__scroller {\n  -webkit-mask-position:\n    0 0,\n    -72px 0;\n          mask-position:\n    0 0,\n    -72px 0;\n}\n\n.charcoal-carousel__item {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.charcoal-carousel[data-size='S'] .charcoal-carousel__item {\n  flex: 0 0 100%;\n}\n\n/* scroll-snap-align は prop（scrollSnap.align）で出し分ける。基底 .charcoal-carousel__item\n   より後に置くことで no-descending-specificity を回避する。 */\n.charcoal-carousel[data-scroll-snap-align='center'] .charcoal-carousel__item {\n  scroll-snap-align: center;\n}\n\n.charcoal-carousel[data-scroll-snap-align='start'] .charcoal-carousel__item {\n  scroll-snap-align: start;\n}\n\n/* ── Navigation Buttons (charcoal IconButton, variant=Overlay size=S) ── */\n\n/* マスクの透過域と同じ 72px 1fr 72px グリッド。各ボタンは 72px ゾーンの中央に置く。 */\n.charcoal-carousel__navigation {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  display: grid;\n  grid-template-columns: 72px 1fr 72px;\n  align-items: center;\n  /* アイテム内のコンテンツより上にボタンを表示する */\n  z-index: 1;\n  /* sandbox 同様、通常は隠してカルーセル hover 時にフェードイン表示する。 */\n  opacity: 0;\n  transition: 0.4s opacity;\n}\n.charcoal-carousel__navigation[data-visible='false'] {\n    display: none;\n  }\n\n/* hover で表示。キーボード操作でも到達できるよう focus-within でも表示する。 */\n.charcoal-carousel:hover .charcoal-carousel__navigation,\n.charcoal-carousel:focus-within .charcoal-carousel__navigation {\n  opacity: 1;\n}\n\n.charcoal-carousel__navigation__item {\n  pointer-events: auto;\n}\n\n.charcoal-carousel__navigation__item[data-direction='prev'] {\n    grid-column: 1;\n    justify-self: center;\n  }\n\n.charcoal-carousel__navigation__item[data-direction='next'] {\n    grid-column: 3;\n    justify-self: center;\n  }\n\n/* スクロール端では非表示。IconButton の disabled スタイル(opacity:0.32)より\n   高い詳細度で打ち消すため、ルートを前置する。 */\n.charcoal-carousel .charcoal-carousel__navigation__item[data-hidden='true'] {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* タッチデバイスではナビゲーションボタンを出さず、スワイプ操作に委ねる。 */\n@media (hover: none) and (pointer: coarse) {\n  .charcoal-carousel__navigation {\n    display: none;\n  }\n}\n\n/* ── Indicator: JS Fallback ── */\n\n.charcoal-carousel__indicator {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n  gap: 8px;\n}\n\n.charcoal-carousel__indicator[data-visible='false'] {\n    display: none;\n  }\n\n.charcoal-carousel__indicator__item {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  box-sizing: border-box;\n  width: 8px;\n  height: 8px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background-color: var(--charcoal-color-text-tertiary-default);\n  cursor: pointer;\n  transition: 0.2s background-color;\n}\n\n.charcoal-carousel__indicator__item:hover {\n    background-color: var(--charcoal-color-text-secondary-default);\n  }\n\n.charcoal-carousel__indicator__item:focus-visible {\n    outline: 2px solid rgba(0, 150, 250, 0.56);\n    outline-offset: 2px;\n  }\n\n.charcoal-carousel__indicator__item[data-active='true'] {\n    background-color: var(--charcoal-color-text-default);\n  }\n\n/* ── CSS Scroll Markers (progressive enhancement) ── */\n\n/* CSS Scroll Markers / Anchor Positioning は新しい仕様で、stylelint がプロパティ・\n   擬似要素・擬似クラスを未知と判定するため、この @supports ブロックでは該当ルールを無効化する。 */\n/* stylelint-disable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */\n@supports (scroll-marker-group: after) {\n  .charcoal-carousel[data-indicator='true'] {\n    padding-bottom: 40px;\n  }\n\n  .charcoal-carousel__scroller {\n    anchor-name: --charcoal-carousel;\n    scroll-marker-group: after;\n  }\n\n    .charcoal-carousel__scroller::scroll-button(*) {\n      content: none;\n    }\n\n    .charcoal-carousel__scroller::scroll-marker-group {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      gap: 8px;\n\n      position: absolute;\n      position-anchor: --charcoal-carousel;\n      top: anchor(bottom);\n      justify-self: anchor-center;\n    }\n\n  .charcoal-carousel[data-indicator='false'] .charcoal-carousel__scroller {\n    scroll-marker-group: none;\n  }\n\n  .charcoal-carousel__item::scroll-marker {\n    content: '';\n    width: 8px;\n    height: 8px;\n    border: 0;\n    border-radius: 50%;\n    background-color: var(--charcoal-color-text-tertiary-default);\n    cursor: pointer;\n    transition: 0.2s background-color;\n  }\n\n    .charcoal-carousel__item::scroll-marker:hover {\n      background-color: var(--charcoal-color-text-secondary-default);\n    }\n\n    .charcoal-carousel__item::scroll-marker:focus {\n      outline: 2px solid rgba(0, 150, 250, 0.56);\n      outline-offset: 2px;\n    }\n\n    .charcoal-carousel__item::scroll-marker:target-current {\n      background-color: var(--charcoal-color-text-default);\n    }\n\n  .charcoal-carousel__indicator {\n    display: none;\n  }\n}\n/* stylelint-enable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */\n.charcoal-focus-ring:is(\n      :not(:disabled):not([aria-disabled]),\n      [aria-disabled='false']\n    ):focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n    transition: 0.2s box-shadow;\n  }\n"]}
+{"version":3,"sources":["<no source>","index.css"],"names":[],"mappings":"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","file":"layered.css","sourcesContent":[null,".charcoal-button {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background: transparent;\n  box-sizing: border-box;\n  padding: 0 24px;\n  border-style: none;\n  outline: none;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n  text-decoration: none;\n  font: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  width: -moz-min-content;\n  width: min-content;\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  white-space: nowrap;\n  border-radius: 999999px;\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  color: var(--charcoal-color-text-default);\n  background-color: var(--charcoal-color-container-secondary-default-a);\n  transition:\n    0.2s color,\n    0.2s background-color,\n    0.2s box-shadow;\n  height: 40px;\n}\n\n  .charcoal-button:disabled,\n  .charcoal-button[aria-disabled]:not([aria-disabled='false']) {\n    cursor: default;\n    opacity: 0.32;\n  }\n\n  .charcoal-button:not(:disabled):not([aria-disabled]):focus-visible,\n  .charcoal-button[aria-disabled='false']:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n  .charcoal-button:not(:disabled):not([aria-disabled]):hover,\n  .charcoal-button[aria-disabled='false']:hover {\n    color: var(--charcoal-color-text-hover);\n    background-color: var(--charcoal-color-container-secondary-hover-a);\n  }\n\n  .charcoal-button:not(:disabled):not([aria-disabled]):active,\n  .charcoal-button[aria-disabled='false']:active,\n  .charcoal-button[data-active='true'] {\n    color: var(--charcoal-color-text-press);\n    background-color: var(--charcoal-color-container-secondary-press-a);\n  }\n\n  .charcoal-button[data-variant='Primary'] {\n    color: var(--charcoal-color-text-on-primary-default);\n    background-color: var(--charcoal-color-container-primary-default);\n  }\n\n  .charcoal-button[data-variant='Primary']:hover:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Primary']:hover[aria-disabled='false'] {\n      color: var(--charcoal-color-text-on-primary-hover);\n      background-color: var(--charcoal-color-container-primary-hover);\n    }\n\n  .charcoal-button[data-variant='Primary']:active:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Primary']:active[aria-disabled='false'],\n    .charcoal-button[data-variant='Primary'][data-active='true'] {\n      color: var(--charcoal-color-text-on-primary-press);\n      background-color: var(--charcoal-color-container-primary-press);\n    }\n\n  .charcoal-button[data-variant='Overlay'] {\n    color: var(--charcoal-color-text-on-on-img-default);\n    background-color: var(--charcoal-color-container-on-img-default);\n  }\n\n  .charcoal-button[data-variant='Overlay']:hover:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Overlay']:hover[aria-disabled='false'] {\n      color: var(--charcoal-color-text-on-on-img-hover);\n      background-color: var(--charcoal-color-container-on-img-hover);\n    }\n\n  .charcoal-button[data-variant='Overlay']:active:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Overlay']:active[aria-disabled='false'],\n    .charcoal-button[data-variant='Overlay'][data-active='true'] {\n      color: var(--charcoal-color-text-on-on-img-press);\n      background-color: var(--charcoal-color-container-on-img-press);\n    }\n\n  .charcoal-button[data-variant='Navigation'] {\n    color: var(--charcoal-color-text-on-hud-default);\n    background-color: var(--charcoal-color-container-hud-default);\n  }\n\n  .charcoal-button[data-variant='Navigation']:hover:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Navigation']:hover[aria-disabled='false'] {\n      color: var(--charcoal-color-text-on-hud-hover);\n      background-color: var(--charcoal-color-container-hud-hover);\n    }\n\n  .charcoal-button[data-variant='Navigation']:active:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Navigation']:active[aria-disabled='false'],\n    .charcoal-button[data-variant='Navigation'][data-active='true'] {\n      color: var(--charcoal-color-text-on-hud-press);\n      background-color: var(--charcoal-color-container-hud-press);\n    }\n\n  .charcoal-button[data-variant='Danger'] {\n    color: var(--charcoal-color-text-on-negative-default);\n    background-color: var(--charcoal-color-container-negative-default);\n  }\n\n  .charcoal-button[data-variant='Danger']:hover:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Danger']:hover[aria-disabled='false'] {\n      color: var(--charcoal-color-text-on-negative-hover);\n      background-color: var(--charcoal-color-container-negative-hover);\n    }\n\n  .charcoal-button[data-variant='Danger']:active:not(:disabled):not([aria-disabled]),\n    .charcoal-button[data-variant='Danger']:active[aria-disabled='false'],\n    .charcoal-button[data-variant='Danger'][data-active='true'] {\n      color: var(--charcoal-color-text-on-negative-press);\n      background-color: var(--charcoal-color-container-negative-press);\n    }\n\n  .charcoal-button[data-size='S'] {\n    padding: 0 16px;\n    height: 32px;\n  }\n\n  .charcoal-button[data-full-width='true'] {\n    width: 100%;\n  }\n.charcoal-clickable {\n  cursor: pointer;\n\n  /* Reset button appearance */\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background: transparent;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  color: inherit;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n  text-decoration: none;\n\n  /* Change the font styles in all browsers. */\n  font: inherit;\n\n  /* Remove the margin in Firefox and Safari. */\n  margin: 0;\n\n  /* Show the overflow in Edge. */\n  overflow: visible;\n\n  /* Remove the inheritance of text transform in Firefox. */\n  text-transform: none;\n}\n\n  .charcoal-clickable:disabled,\n  .charcoal-clickable[aria-disabled]:not([aria-disabled='false']) {\n    cursor: default;\n  }\n\n  .charcoal-clickable:focus {\n    outline: none;\n  }\n\n  .charcoal-clickable::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n.charcoal-icon-button {\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background: transparent;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  color: inherit;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n  text-decoration: none;\n  font: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n\n  -webkit-user-select: none;\n\n     -moz-user-select: none;\n\n          user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 999999px;\n  transition:\n    0.2s background-color,\n    0.2s box-shadow;\n}\n\n  .charcoal-icon-button:disabled,\n  .charcoal-icon-button[aria-disabled]:not([aria-disabled='false']) {\n    cursor: default;\n    opacity: 0.32;\n  }\n\n  .charcoal-icon-button:focus {\n    outline: none;\n  }\n\n  .charcoal-icon-button::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n\n  .charcoal-icon-button[data-size='XS'] {\n    width: 20px;\n    height: 20px;\n  }\n\n  .charcoal-icon-button[data-size='S'] {\n    width: 32px;\n    height: 32px;\n  }\n\n  .charcoal-icon-button[data-size='M'] {\n    width: 40px;\n    height: 40px;\n  }\n\n  .charcoal-icon-button[data-variant='Default'] {\n    color: var(--charcoal-color-icon-tertiary-default);\n    background-color: transparent;\n  }\n\n  .charcoal-icon-button[data-variant='Default'][data-active='true']:not(:disabled):not([aria-disabled]),\n    .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] {\n      color: var(--charcoal-color-icon-tertiary-press);\n      background-color: var(--charcoal-color-container-press-a);\n    }\n\n  .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):hover,\n    .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover {\n      color: var(--charcoal-color-icon-tertiary-hover);\n      background-color: var(--charcoal-color-container-hover-a);\n    }\n\n  .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):active,\n    .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active {\n      color: var(--charcoal-color-icon-tertiary-press);\n      background-color: var(--charcoal-color-container-press-a);\n    }\n\n  .charcoal-icon-button[data-variant='Overlay'] {\n    color: var(--charcoal-color-icon-on-on-img-default);\n    background-color: var(--charcoal-color-container-on-img-default);\n  }\n\n  .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not(:disabled):not([aria-disabled]),\n    .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] {\n      color: var(--charcoal-color-icon-on-on-img-press);\n      background-color: var(--charcoal-color-container-on-img-press);\n    }\n\n  .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):hover,\n    .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover {\n      color: var(--charcoal-color-icon-on-on-img-hover);\n      background-color: var(--charcoal-color-container-on-img-hover);\n    }\n\n  .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):active,\n    .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active {\n      color: var(--charcoal-color-icon-on-on-img-press);\n      background-color: var(--charcoal-color-container-on-img-press);\n    }\n\n  .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus,\n  .charcoal-icon-button[aria-disabled='false']:focus {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n  .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus-visible,\n  .charcoal-icon-button[aria-disabled='false']:focus-visible {\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n  .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n  .charcoal-icon-button[aria-disabled='false']:focus:not(:focus-visible) {\n    box-shadow: none;\n  }\n.charcoal-radio__label {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-gap: 4px;\n  align-items: center;\n  cursor: pointer;\n}\n\n  .charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {\n    opacity: 0.32;\n    cursor: default;\n  }\n\n.charcoal-radio__label_div {\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--charcoal-color-text-default);\n}\n.charcoal-radio-input {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  display: block;\n  box-sizing: border-box;\n\n  margin: 0;\n  padding: 6px;\n\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  border-radius: 999999px;\n  background-color: var(--charcoal-color-container-default);\n  transition:\n    0.2s background-color,\n    0.2s box-shadow;\n}\n\n.charcoal-radio-input:checked {\n  background-color: var(--charcoal-color-container-primary-default);\n}\n\n.charcoal-radio-input:checked::after {\n  content: '';\n  display: block;\n  width: 8px;\n  height: 8px;\n  pointer-events: none;\n  background-color: var(--charcoal-color-icon-on-primary-default);\n  border-radius: 999999px;\n  transition:\n    0.2s background-color,\n    0.2s box-shadow;\n}\n\n.charcoal-radio-input:not(:checked) {\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--charcoal-color-border-default);\n}\n\n.charcoal-radio-input:disabled {\n  cursor: default;\n}\n\n.charcoal-radio-input:not(:disabled):hover {\n  background-color: var(--charcoal-color-container-hover);\n}\n\n.charcoal-radio-input:not(:disabled):active {\n  background-color: var(--charcoal-color-container-press);\n}\n\n.charcoal-radio-input:not(:disabled):focus {\n  outline: none;\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-radio-input:not(:disabled):focus-visible {\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-radio-input:not(:disabled):focus:not(:focus-visible) {\n  box-shadow: none;\n}\n\n.charcoal-radio-input:not(:disabled)[aria-invalid='true'],\n.charcoal-radio-input:not(:disabled)[aria-invalid='true']:focus {\n  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-radio-input:checked:not(:disabled):hover {\n  background-color: var(--charcoal-color-container-primary-hover);\n}\n\n.charcoal-radio-input:checked:not(:disabled):hover::after {\n  background-color: var(--charcoal-color-icon-on-primary-hover);\n}\n\n.charcoal-radio-input:checked:not(:disabled):active {\n  background-color: var(--charcoal-color-container-primary-press);\n}\n\n.charcoal-radio-input:checked:not(:disabled):active::after {\n  background-color: var(--charcoal-color-icon-on-primary-press);\n}\n.charcoal-radio-group {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: 8px;\n}\n.charcoal-icon {\n  display: inline-flex;\n  width: var(--charcoal-icon-size);\n  height: var(--charcoal-icon-size);\n}\n\npixiv-icon:not(:defined) {\n  --pixiv-icon-base: 24px;\n  --pixiv-icon-scale: 1;\n  --pixiv-icon-size: calc(var(--pixiv-icon-base) * var(--pixiv-icon-scale));\n\n  display: inline-flex;\n  /* --charcoal-icon-size がセットされていればそれを優先、\n     なければ name / scale から導出した --pixiv-icon-size をフォールバック */\n  width: var(--charcoal-icon-size, var(--pixiv-icon-size));\n  height: var(--charcoal-icon-size, var(--pixiv-icon-size));\n}\n\npixiv-icon:not(:defined)[name^='16/'] {\n    --pixiv-icon-base: 16px;\n    --pixiv-icon-size: 16px;\n  }\n\npixiv-icon:not(:defined)[name^='24/'][scale='2'] {\n      --pixiv-icon-scale: 2;\n    }\n\npixiv-icon:not(:defined)[name^='24/'][scale='3'] {\n      --pixiv-icon-scale: 3;\n    }\n\npixiv-icon:not(:defined)[name^='32/'] {\n    --pixiv-icon-base: 32px;\n    --pixiv-icon-size: 32px;\n  }\n\npixiv-icon:not(:defined)[name^='Inline/'] {\n    --pixiv-icon-base: 16px;\n  }\n\npixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {\n      --pixiv-icon-scale: 2;\n    }\n.charcoal-multi-select {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  gap: 4px;\n}\n\n  .charcoal-multi-select:disabled,\n  .charcoal-multi-select[aria-disabled]:not([aria-disabled='false']) {\n    opacity: 0.32;\n    cursor: default;\n  }\n\n.charcoal-multi-select-label {\n  display: flow-root;\n  align-items: center;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--charcoal-color-text-default);\n}\n\n.charcoal-multi-select-label::before {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-top: -4px;\n  }\n\n.charcoal-multi-select-label::after {\n    display: block;\n    width: 0;\n    height: 0;\n    content: '';\n    margin-bottom: -4px;\n  }\n\n.charcoal-multi-select-input[type='checkbox'] {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  display: block;\n  width: 20px;\n  height: 20px;\n  margin: 0;\n  background-color: var(--charcoal-color-container-neutral-default);\n  border-radius: 999999px;\n  transition:\n    0.2s background-color,\n    0.2s box-shadow;\n}\n\n.charcoal-multi-select-input[type='checkbox']:checked {\n    background-color: var(--charcoal-color-container-primary-default);\n  }\n\n.charcoal-multi-select-input[type='checkbox']:focus {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n.charcoal-multi-select-input[type='checkbox']:focus-visible {\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n.charcoal-multi-select-input[type='checkbox']:focus:not(:focus-visible) {\n    box-shadow: none;\n  }\n\n.charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not([aria-disabled]),\n  .charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {\n    background-color: var(--charcoal-color-container-neutral-hover);\n  }\n\n.charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not([aria-disabled]),\n  .charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {\n    background-color: var(--charcoal-color-container-neutral-press);\n  }\n\n.charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),\n  .charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {\n    background-color: var(--charcoal-color-container-primary-hover);\n  }\n\n.charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),\n  .charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {\n    background-color: var(--charcoal-color-container-primary-press);\n  }\n\n.charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false']:not(:disabled):not(\n      [aria-disabled]\n    ) {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-multi-select-input[type='checkbox'][data-overlay='true'] {\n    background-color: var(--charcoal-color-container-on-img-default);\n  }\n\n.charcoal-multi-select-overlay {\n  position: absolute;\n  top: -2px;\n  left: -2px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border-radius: 999999px;\n  color: var(--charcoal-color-icon-on-primary-default);\n  transition: 0.2s box-shadow;\n}\n\n.charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true']:not(:disabled):not(\n      [aria-disabled]\n    ) {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-multi-select-overlay[data-overlay='true'] {\n    border-color: var(--charcoal-color-border-hud);\n    border-width: 2px;\n    border-style: solid;\n  }\n.charcoal-switch__label {\n  display: inline-grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  cursor: pointer;\n  outline: 0;\n  gap: 4px;\n}\n\n  .charcoal-switch__label[aria-disabled='true'] {\n    opacity: 0.32;\n    cursor: default;\n  }\n\n  .charcoal-switch__label[aria-disabled='true'] > input {\n      opacity: 1;\n    }\n\n.charcoal-switch__label_div {\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--charcoal-color-text-default);\n}\n.charcoal-switch-input {\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  display: inline-flex;\n  position: relative;\n  box-sizing: border-box;\n  width: 28px;\n  border: 2px solid transparent;\n\n  transition-property: background-color, box-shadow;\n  transition-duration: 0.2s;\n\n  outline: none;\n  border-radius: 16px;\n  height: 16px;\n  margin: 0;\n  background-color: var(--charcoal-color-container-neutral-default);\n}\n\n.charcoal-switch-input:disabled,\n.charcoal-switch-input[readonly] {\n  opacity: 0.32;\n  cursor: default;\n}\n\n.charcoal-switch-input::after {\n  content: '';\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 0;\n  width: 12px;\n  height: 12px;\n  transform: translateX(0);\n  transition: transform 0.2s;\n  border-radius: 1024px;\n  background-color: var(--charcoal-color-icon-on-primary-default);\n}\n\n.charcoal-switch-input:checked::after {\n  transform: translateX(12px);\n  transition: transform 0.2s;\n}\n\n.charcoal-switch-input:checked {\n  background-color: var(--charcoal-color-container-primary-default);\n}\n\n.charcoal-switch-input:not(:disabled):hover {\n  background-color: var(--charcoal-color-container-neutral-hover);\n}\n\n.charcoal-switch-input:not(:disabled):active {\n  background-color: var(--charcoal-color-container-neutral-press);\n}\n\n.charcoal-switch-input:not(:disabled):focus {\n  outline: none;\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-switch-input:not(:disabled):focus-visible {\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-switch-input:not(:disabled):focus:not(:focus-visible) {\n  box-shadow: none;\n}\n\n.charcoal-switch-input:not(:disabled)::after:hover {\n  background-color: var(--charcoal-color-icon-on-primary-hover);\n}\n\n.charcoal-switch-input:not(:disabled)::after:active {\n  background-color: var(--charcoal-color-icon-on-primary-press);\n}\n\n.charcoal-switch-input:not(:disabled):checked:hover {\n  background-color: var(--charcoal-color-container-primary-hover);\n}\n\n.charcoal-switch-input:not(:disabled):checked:active {\n  background-color: var(--charcoal-color-container-primary-press);\n}\n.charcoal-text-field-root {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: 4px;\n}\n\n  .charcoal-text-field-root[aria-disabled='true'] {\n    opacity: 0.32;\n  }\n\n.charcoal-text-field-container {\n  display: flex;\n  height: 40px;\n  transition:\n    0.2s background-color,\n    0.2s box-shadow;\n  color: var(--charcoal-color-text-secondary-default);\n  background-color: var(--charcoal-color-container-secondary-default-a);\n  border-radius: 4px;\n  padding: 0 8px;\n  line-height: 22px;\n  font-size: 14px;\n}\n\n.charcoal-text-field-container[data-invalid='true'] {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-text-field-container:not([aria-disabled='true']):hover {\n    background-color: var(--charcoal-color-container-secondary-hover-a);\n  }\n\n.charcoal-text-field-container:not([aria-disabled='true']):focus-within {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n.charcoal-text-field-container:not([aria-disabled='true'])[data-invalid='true']:focus-within {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-text-field-prefix {\n  display: flex;\n  align-items: center;\n  margin-right: 4px;\n}\n\n.charcoal-text-field-suffix {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-left: 4px;\n}\n\n.charcoal-text-field-input-root {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.charcoal-text-field-input {\n  border: none;\n  box-sizing: border-box;\n  outline: none;\n  font-family: inherit;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  height: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding-left: 0;\n  padding-right: 0;\n  border-radius: calc(4px / 0.875);\n\n  /* Display box-shadow for iOS Safari */\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background: transparent;\n\n  color: var(--charcoal-color-text-secondary-default);\n}\n\n.charcoal-text-field-input::-moz-placeholder {\n    color: var(--charcoal-color-text-placeholder-default);\n  }\n\n.charcoal-text-field-input::placeholder {\n    color: var(--charcoal-color-text-placeholder-default);\n  }\n\n.charcoal-text-field-line-counter {\n  line-height: 22px;\n  font-size: 14px;\n  color: var(--charcoal-color-text-tertiary-default);\n}\n.charcoal-field-label {\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  display: flow-root;\n  color: var(--charcoal-color-text-default-text1);\n}\n\n.charcoal-field-label-required-text {\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-color-text-secondary-default);\n}\n\n.charcoal-field-label-sub-label {\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-color-text-tertiary-default);\n  transition:\n    0.2s color,\n    0.2s box-shadow;\n}\n\n.charcoal-field-label-root {\n  display: inline-flex;\n  align-items: center;\n}\n\n.charcoal-field-label-root > .charcoal-field-label-required-text {\n    margin-left: 4px;\n  }\n\n.charcoal-field-label-root > .charcoal-field-label-sub-label {\n    margin-left: auto;\n  }\n.charcoal-text-field-assistive-text {\n  font-size: 14px;\n  line-height: 22px;\n  margin: 0;\n  color: var(--charcoal-color-text-secondary-default);\n}\n\n.charcoal-text-field-assistive-text[data-invalid='true'] {\n  color: var(--charcoal-color-text-negative-default);\n}\n.charcoal-text-area-root {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: 4px;\n}\n\n  .charcoal-text-area-root[aria-disabled='true'] {\n    opacity: 0.32;\n  }\n\n.charcoal-text-area-container {\n  /* Runtime variable overridden by the React component. */\n  --charcoal-text-area-rows: 4;\n\n  position: relative;\n  overflow: hidden;\n\n  color: var(--charcoal-color-text-secondary-default);\n  background-color: var(--charcoal-color-container-secondary-default-a);\n  border-radius: 4px;\n  transition:\n    0.2s background-color,\n    0.2s box-shadow;\n  height: calc(22px * var(--charcoal-text-area-rows) + 18px);\n}\n\n.charcoal-text-area-container[aria-invalid='true'] {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-text-area-container:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n.charcoal-text-area-container:not([aria-disabled='true']):hover {\n    background-color: var(--charcoal-color-container-secondary-hover-a);\n  }\n\n.charcoal-text-area-container[aria-invalid='true']:focus-within {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-text-area-textarea {\n  border: none;\n  outline: none;\n  resize: none;\n  font-family: inherit;\n  color: inherit;\n  box-sizing: border-box;\n\n  /* Prevent zooming for iOS Safari */\n  transform-origin: top left;\n  transform: scale(0.875);\n  width: calc(100% / 0.875);\n  font-size: calc(14px / 0.875);\n  line-height: calc(22px / 0.875);\n  padding: calc(9px / 0.875) calc(8px / 0.875);\n  height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px);\n\n  /* Display box-shadow for iOS Safari */\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n\n  background: none;\n}\n\n.charcoal-text-area-textarea[data-no-bottom-padding='true'] {\n    padding: calc(9px / 0.875) calc(8px / 0.875) 0;\n    height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);\n  }\n\n.charcoal-text-area-textarea::-moz-placeholder {\n    color: var(--charcoal-color-text-placeholder-default);\n  }\n\n.charcoal-text-area-textarea::placeholder {\n    color: var(--charcoal-color-text-placeholder-default);\n  }\n\n.charcoal-text-area-counter {\n  position: absolute;\n  bottom: 9px;\n  right: 8px;\n\n  line-height: 22px;\n  font-size: 14px;\n  color: var(--charcoal-color-text-tertiary-default);\n}\n.charcoal-modal-dialog {\n  margin: auto;\n  position: relative;\n  height: -moz-fit-content;\n  height: fit-content;\n  width: 440px;\n\n  background-color: var(--charcoal-color-container-default);\n  border-radius: 24px;\n}\n\n.charcoal-modal-dialog[data-size='S'] {\n  width: 336px;\n}\n\n.charcoal-modal-dialog[data-size='M'] {\n  width: 440px;\n}\n\n.charcoal-modal-dialog[data-size='L'] {\n  width: 648px;\n}\n\n@media (max-width: 743px) {\n  .charcoal-modal-dialog {\n    max-width: 440px;\n    width: calc(100% - 48px);\n  }\n\n  .charcoal-modal-dialog[data-bottom-sheet='true'],\n  .charcoal-modal-dialog[data-bottom-sheet='full'] {\n    max-width: unset;\n    width: 100%;\n    border-radius: 0;\n    margin: auto 0 0 0;\n  }\n\n  .charcoal-modal-dialog[data-bottom-sheet='full'] {\n    min-height: 100%;\n  }\n}\n\n.charcoal-modal-dialog:focus {\n  outline: none;\n}\n.charcoal-modal-background {\n  overflow: auto;\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  padding: 40px 0;\n  box-sizing: border-box;\n\n  background-color: var(--charcoal-color-background-overlay);\n}\n\n  @media (max-width: 743px) {\n    .charcoal-modal-background[data-bottom-sheet='true'],\n    .charcoal-modal-background[data-bottom-sheet='full'] {\n      padding: 0;\n    }\n  }\n\n/* easeOutQuart。duration は useTransitionPresence の MODAL_TRANSITION_DURATION_MS と一致させること。\n   transition は entering / exiting に限定し、開いたままテーマ切り替え等で\n   色や transform が変わってもアニメーションしないようにする */\n.charcoal-modal-background[data-animation] {\n  overflow: hidden;\n}\n\n.charcoal-modal-background[data-animation='entering'],\n.charcoal-modal-background[data-animation='exiting'] {\n  transition: background-color 400ms cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n/* 閉じアニメーション中はクリックを下のページへ通す（transitionend が来ない環境で\n   透明なオーバーレイがタップを奪い続けるのも防ぐ） */\n.charcoal-modal-background[data-animation='exited'],\n.charcoal-modal-background[data-animation='exiting'] {\n  background-color: transparent;\n  pointer-events: none;\n}\n\n.charcoal-modal-background[data-animation='entered'] {\n  overflow: auto;\n}\n\n.charcoal-modal-background[data-animation='entering'] > .charcoal-modal-dialog,\n.charcoal-modal-background[data-animation='exiting'] > .charcoal-modal-dialog {\n  transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.charcoal-modal-background[data-animation='exited'] > .charcoal-modal-dialog,\n.charcoal-modal-background[data-animation='exiting'] > .charcoal-modal-dialog {\n  transform: translateY(100%);\n}\n\n.charcoal-modal-close-button {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n\n  color: var(--charcoal-color-text-tertiary-default);\n  transition: 0.2s color;\n}\n\n.charcoal-modal-title {\n  margin: 0;\n  font-weight: inherit;\n  font-size: inherit;\n}\n.charcoal-modal-header-root {\n  height: 64px;\n  display: grid;\n  align-content: center;\n  justify-content: center;\n}\n\n@media (max-width: 743px) {\n  .charcoal-modal-header-root[data-bottom-sheet='true'],\n  .charcoal-modal-header-root[data-bottom-sheet='full'] {\n    height: 48px;\n  }\n}\n\n.charcoal-modal-header-title {\n  color: var(--charcoal-color-text-default);\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: bold;\n  display: flow-root;\n}\n\n.charcoal-modal-align {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n.charcoal-modal-body {\n  padding-bottom: 40px;\n}\n\n.charcoal-modal-buttons {\n  display: grid;\n  grid-auto-flow: row;\n  grid-row-gap: 8px;\n\n  padding-top: 16px;\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.charcoal-loading-spinner {\n  box-sizing: content-box;\n  margin: auto;\n  padding: 16px;\n  border-radius: 8px;\n  font-size: 48px;\n  width: 48px;\n  height: 48px;\n  opacity: 0.84;\n  color: var(--charcoal-color-icon-tertiary-default);\n  background-color: var(--charcoal-color-background-default);\n}\n\n  .charcoal-loading-spinner[data-transparent='true'] {\n    background-color: var(--charcoal-color-container-default-a);\n  }\n\n@keyframes charcoal-loading-spinner-icon-scale-out {\n  from {\n    transform: scale(0);\n    opacity: 1;\n  }\n  to {\n    transform: scale(1);\n    opacity: 0;\n  }\n}\n\n.charcoal-loading-spinner-icon {\n  width: 1em;\n  height: 1em;\n  border-radius: 1em;\n  background-color: currentColor;\n  animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;\n  animation-iteration-count: infinite;\n}\n\n.charcoal-loading-spinner-icon[data-reset-animation] {\n    animation: none;\n  }\n\n.charcoal-loading-spinner-icon[data-once='true'] {\n    animation-iteration-count: 1;\n  }\n.charcoal-dropdown-selector-root {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-gap: 4px;\n  width: 100%;\n}\n\n  .charcoal-dropdown-selector-root[aria-disabled='true'] {\n    cursor: default;\n    opacity: 0.32;\n  }\n\n.charcoal-dropdown-selector-button {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  justify-content: space-between;\n  align-items: center;\n\n  height: 40px;\n  width: 100%;\n  box-sizing: border-box;\n  border: none;\n  cursor: pointer;\n  gap: 4px;\n\n  padding-right: 8px;\n  padding-left: 8px;\n  background-color: var(--charcoal-color-container-secondary-default-a);\n  border-radius: 4px;\n\n  transition:\n    0.2s box-shadow,\n    0.2s background-color;\n}\n\n.charcoal-dropdown-selector-button:disabled {\n    cursor: default;\n  }\n\n.charcoal-dropdown-selector-button:not(:disabled):focus {\n      outline: none;\n      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n    }\n\n.charcoal-dropdown-selector-button:not(:disabled):focus-visible {\n      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n    }\n\n.charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],\n    .charcoal-dropdown-selector-button:not(:disabled):active {\n      background-color: var(--charcoal-color-container-secondary-press-a);\n    }\n\n.charcoal-dropdown-selector-button:not(:disabled):hover {\n      background-color: var(--charcoal-color-container-secondary-hover-a);\n    }\n\n.charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {\n      box-shadow: none;\n    }\n\n.charcoal-dropdown-selector-button[aria-invalid='true'],\n  .charcoal-dropdown-selector-button:not(:disabled)[aria-invalid='true']:focus:not(:focus-visible) {\n    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n  }\n\n.charcoal-ui-dropdown-selector-text {\n  text-align: left;\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  color: var(--charcoal-color-text-default);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.charcoal-ui-dropdown-selector-text[data-placeholder='true'] {\n    color: var(--charcoal-color-text-placeholder-default);\n  }\n\n.charcoal-ui-dropdown-selector-icon {\n  color: var(--charcoal-color-icon-secondary-default);\n}\n.charcoal-popover {\n  margin: 4px 0;\n  list-style: none;\n  overflow: auto;\n  max-height: inherit;\n  background-color: var(--charcoal-color-background-default);\n  border: solid 1px var(--charcoal-color-border-secondary);\n  border-radius: 8px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.charcoal-menu-list {\n  padding: 0;\n  margin: 0;\n}\n.charcoal-list-item {\n  list-style: none;\n  display: flex;\n  align-items: center;\n  min-height: 40px;\n  cursor: pointer;\n  outline: none;\n\n  padding-right: 16px;\n  padding-left: 16px;\n\n  transition: background-color 0.2s;\n}\n\n.charcoal-list-item:not([aria-disabled='true']):hover,\n.charcoal-list-item:not([aria-disabled='true']):focus,\n.charcoal-list-item:not([aria-disabled='true']):focus-within {\n  background-color: var(--charcoal-color-container-secondary-default);\n}\n\n.charcoal-list-item[aria-disabled='true'] {\n  opacity: 0.32;\n  cursor: default;\n}\n.charcoal-dropdown-selector-menu-item {\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--charcoal-color-text-secondary-default);\n  padding: 9px 0;\n\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-left: 20px;\n}\n\n.charcoal-dropdown-selector-menu-item[data-selected='true'] {\n  margin-left: 0px;\n}\n\n.charcoal-dropdown-selector-menu-item-icon {\n  color: var(--charcoal-color-text-secondary-default);\n  padding-right: 4px;\n}\n\n.charcoal-dropdown-selector-menu-item-container {\n  display: flex;\n  align-items: center;\n}\n\n.charcoal-dropdown-selector-menu-secondary {\n  font-size: 12px;\n  line-height: 20px;\n  color: var(--charcoal-color-text-tertiary-default);\n  padding-bottom: 9px;\n\n  display: flex;\n  align-items: center;\n  margin-left: 20px;\n}\n\n.charcoal-dropdown-selector-menu-fullwidth {\n  width: 100%;\n}\n.charcoal-menu-item-group {\n  display: block;\n}\n\n.charcoal-menu-item-group > span {\n  display: block;\n  color: var(--charcoal-color-text-tertiary-default);\n  font-size: 12px;\n  font-weight: bold;\n  padding: 12px 0 8px 16px;\n}\n\n.charcoal-menu-item-group > ul {\n  padding-left: 0;\n  margin: 0;\n  box-sizing: border-box;\n  list-style: none;\n  overflow: hidden;\n}\n.charcoal-segmented-control {\n  display: inline-flex;\n  align-items: center;\n\n  background-color: var(--charcoal-color-container-secondary-default-a);\n  border-radius: 16px;\n}\n\n  .charcoal-segmented-control[data-uniform-segment-width='true'],\n  .charcoal-segmented-control[data-full-width='true'] {\n    display: inline-grid;\n    grid-auto-columns: minmax(80px, 1fr);\n    grid-auto-rows: 32px;\n    grid-auto-flow: column;\n  }\n\n  .charcoal-segmented-control[data-full-width='true'] {\n    width: 100%;\n  }\n\n.charcoal-segmented-control-radio__label {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  height: 32px;\n\n  padding-right: 16px;\n  padding-left: 16px;\n  border-radius: 16px;\n  color: var(--charcoal-color-text-secondary-default);\n\n  font-size: 14px;\n  line-height: 22px;\n}\n\n.charcoal-segmented-control-radio__label[aria-disabled]:not([aria-disabled='false']) {\n    cursor: default;\n    opacity: 0.32;\n  }\n\n.charcoal-segmented-control-radio__label[data-checked='true'] {\n    background-color: var(--charcoal-color-container-primary-default);\n    color: var(--charcoal-color-text-on-primary-default);\n  }\n\n.charcoal-segmented-control-radio__label[data-uniform-segment-width='true'],\n  .charcoal-segmented-control-radio__label[data-full-width='true'] {\n    justify-content: center;\n    white-space: nowrap;\n  }\n\n.charcoal-segmented-control-radio__input {\n  position: absolute;\n\n  height: 0px;\n  width: 0px;\n  padding: 0;\n  margin: 0;\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  box-sizing: border-box;\n  overflow: hidden;\n  white-space: nowrap;\n  opacity: 0;\n}\n.charcoal-checkbox__label {\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  gap: 4px;\n}\n\n  .charcoal-checkbox__label[aria-disabled='true'] {\n    cursor: default;\n    opacity: 0.32;\n  }\n\n  .charcoal-checkbox__label[aria-disabled='true'] > input {\n      opacity: 1;\n    }\n\n.charcoal-checkbox__label_div {\n  flex: 1;\n  color: var(--charcoal-color-text-default);\n  font-size: 14px;\n  line-height: 20px;\n}\n.charcoal-checkbox-input {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  display: flex;\n  cursor: pointer;\n  margin: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  transition:\n    0.2s box-shadow,\n    0.2s background-color;\n  position: relative;\n  box-sizing: border-box;\n}\n\n.charcoal-checkbox-input:disabled,\n.charcoal-checkbox-input[readonly] {\n  opacity: 0.32;\n  cursor: default;\n}\n\n.charcoal-checkbox-input:checked {\n  background-color: var(--charcoal-color-container-primary-default);\n}\n\n.charcoal-checkbox-input:checked::after {\n  content: '';\n  background-color: white;\n  display: flex;\n  margin: auto;\n  width: 16px;\n  height: 16px;\n  clip-path: path(\n    'M10.6 5a1.3 1.3 0 0 1 1.8 1.9l-5.7 5.6-3-2.9a1.3 1.3 0 1 1 2-1.9l1 1z'\n  );\n}\n\n.charcoal-checkbox-input:not(:checked) {\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--charcoal-color-border-default);\n}\n\n.charcoal-checkbox-input:not(:disabled):focus {\n  outline: none;\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input:not(:disabled):focus-visible {\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input:not(:disabled):focus:not(:focus-visible) {\n  box-shadow: none;\n}\n\n.charcoal-checkbox-input:checked:not(:disabled):hover {\n  background-color: var(--charcoal-color-container-primary-hover);\n}\n.charcoal-checkbox-input:checked:not(:disabled):active {\n  background-color: var(--charcoal-color-container-primary-press);\n}\n\n.charcoal-checkbox-input[aria-invalid='true'],\n.charcoal-checkbox-input[aria-invalid='true']:not(:disabled):focus {\n  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true'] {\n  border-radius: 10px;\n  background-color: var(--charcoal-color-container-secondary-default);\n  border: 2px solid transparent;\n}\n\n.charcoal-checkbox-input[data-rounded='true']:checked {\n  background-color: var(--charcoal-color-container-primary-default);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):hover {\n  background-color: var(--charcoal-color-container-secondary-hover);\n}\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):active {\n  background-color: var(--charcoal-color-container-secondary-press);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):focus-visible {\n  box-shadow: 0 0 0 6px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):hover {\n  background-color: var(--charcoal-color-container-primary-hover);\n}\n.charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):active {\n  background-color: var(--charcoal-color-container-primary-press);\n}\n\n.charcoal-checkbox-input[data-rounded='true'][aria-invalid='true'],\n.charcoal-checkbox-input[data-rounded='true'][aria-invalid='true']:not(\n    :disabled\n  ):focus {\n  box-shadow: 0 0 0 6px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true']::before {\n  content: '';\n  width: 24px;\n  height: 24px;\n  position: absolute;\n  top: -4px;\n  left: -4px;\n  border-radius: 12px;\n  border: 2px solid #fff;\n  box-sizing: border-box;\n}\n.charcoal-tag-item {\n  --charcoal-tag-item-color: var(--charcoal-color-text-on-primary-default);\n  --charcoal-tag-item-size: 40px;\n  --charcoal-tag-item-padding-left: 24px;\n  --charcoal-tag-item-padding-right: 24px;\n  --charcoal-tag-item-bg: ;\n\n  isolation: isolate;\n  position: relative;\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  outline: none;\n  border-style: none;\n\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n\n  text-decoration: none;\n  cursor: pointer;\n  overflow: hidden;\n\n  color: var(--charcoal-tag-item-color);\n  height: var(--charcoal-tag-item-size);\n  padding-top: 4px;\n  padding-bottom: 4px;\n  padding-left: var(--charcoal-tag-item-padding-left);\n  padding-right: var(--charcoal-tag-item-padding-right);\n  box-sizing: border-box;\n  border-radius: 4px;\n\n  transition: 0.2s box-shadow;\n}\n\n  .charcoal-tag-item[data-size='M'] {\n    --charcoal-tag-item-size: 40px;\n    --charcoal-tag-item-padding-left: 24px;\n    --charcoal-tag-item-padding-right: 24px;\n  }\n\n  .charcoal-tag-item[data-size='S'] {\n    --charcoal-tag-item-size: 32px;\n    --charcoal-tag-item-padding-left: 16px;\n    --charcoal-tag-item-padding-right: 16px;\n  }\n\n  .charcoal-tag-item[data-state='inactive'] {\n    --charcoal-tag-item-color: var(--charcoal-color-text-secondary-default);\n  }\n\n  .charcoal-tag-item[data-state='active'] {\n    --charcoal-tag-item-padding-left: 16px;\n    --charcoal-tag-item-padding-right: 8px;\n  }\n\n  .charcoal-tag-item:disabled,\n  .charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) {\n    opacity: 0.32;\n    cursor: default;\n  }\n\n  .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,\n  .charcoal-tag-item[aria-disabled='false']:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n  .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,\n  .charcoal-tag-item[aria-disabled='false']:focus {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n  .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n  .charcoal-tag-item[aria-disabled='false']:focus:not(:focus-visible) {\n    box-shadow: none;\n  }\n\n.charcoal-tag-item__bg {\n  background-color: var(--charcoal-tag-item-bg);\n}\n\n.charcoal-tag-item__bg[data-bg-variant='image'] {\n    background-color: var(--charcoal-color-container-on-img-default);\n  }\n\n.charcoal-tag-item__bg[data-bg-variant='image']::before {\n      content: '';\n      position: absolute;\n      z-index: 1;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-position: center;\n      background-size: cover;\n      background-image: var(--charcoal-tag-item-bg);\n      mix-blend-mode: overlay;\n    }\n\n.charcoal-tag-item__bg[data-state='inactive'] {\n    background-color: var(--charcoal-color-container-secondary-default);\n  }\n\n.charcoal-tag-item__label {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.charcoal-tag-item__label[data-has-translate='true'] {\n    justify-content: space-between;\n  }\n\n.charcoal-tag-item__label__translated {\n  --charcoal-tag-item-text-font-size: 12px;\n  --charcoal-tag-item-text-line-height: 20px;\n  font-weight: bold;\n}\n\n.charcoal-tag-item__label__translated::before {\n    display: none;\n  }\n\n.charcoal-tag-item__label__text {\n  --charcoal-tag-item-text-font-size: 14px;\n  --charcoal-tag-item-text-line-height: 22px;\n\n  max-width: 152px;\n  overflow: hidden;\n  font-weight: bold;\n\n  color: inherit;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.charcoal-tag-item__label__text[data-has-translate='true'] {\n    --charcoal-tag-item-text-font-size: 10px;\n    --charcoal-tag-item-text-line-height: 14px;\n    font-weight: normal;\n  }\n\n/* Kept flat: different class name from .charcoal-tag-item__label__text (note: \"labe\" typo in original) */\n.charcoal-tag-item__labe__text[data-has-translate='true']::after {\n  display: none;\n}\n.charcoal-hint-text {\n  background-color: var(--charcoal-color-container-secondary-default);\n  border-radius: 8px;\n  padding: 12px 16px;\n  display: flex;\n  align-items: flex-start;\n}\n\n  .charcoal-hint-text[data-context='page'] {\n    justify-content: center;\n  }\n\n  @media (min-width: 744px) {\n\n  .charcoal-hint-text[data-context='page'] {\n      padding: 20px 40px\n  }\n    }\n\n.charcoal-hint-text-icon {\n  display: flex;\n  align-items: center;\n  color: var(--charcoal-color-icon-tertiary-default);\n  height: 22px;\n  margin: 0 4px 0 0;\n}\n\n.charcoal-hint-text-message {\n  color: var(--charcoal-color-text-secondary-default);\n  font-size: 14px;\n  line-height: 22px;\n  display: flow-root;\n  margin: 0;\n  min-width: 0;\n  overflow-wrap: break-word;\n}\n.charcoal-text-ellipsis {\n  /* Runtime variables overridden by the React component. */\n  --charcoal-text-ellipsis-line-limit: 1;\n  --charcoal-text-ellipsis-line-height: inherit;\n\n  overflow: hidden;\n  overflow-wrap: break-word;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);\n}\n\n  .charcoal-text-ellipsis[data-has-line-height='true'] {\n    line-height: var(--charcoal-text-ellipsis-line-height);\n  }\n\n  .charcoal-text-ellipsis[data-has-line-height='false'] {\n    line-height: inherit;\n  }\n\n  .charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n.charcoal-pagination {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n  .charcoal-pagination[data-size='S'] .charcoal-pagination-button {\n    min-width: 32px;\n    min-height: 32px;\n  }\n\n  .charcoal-pagination[data-size='M'] .charcoal-pagination-button {\n    min-width: 40px;\n    min-height: 40px;\n  }\n\n/* stylelint-disable no-descending-specificity */\n.charcoal-pagination-button {\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  text-decoration: none;\n  font: inherit;\n  margin: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 22px;\n\n  /* HACK:\n   * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.\n   * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.\n   */\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -webkit-transform: translateZ(0);\n\n  color: var(--charcoal-color-text-tertiary-default);\n  background-color: var(--charcoal-color-container-default-a);\n  border-radius: 20px;\n  transition:\n    0.2s background-color,\n    0.2s box-shadow;\n}\n.charcoal-pagination-button:focus {\n    outline: none;\n  }\n.charcoal-pagination-button::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n.charcoal-pagination-button[hidden] {\n    visibility: hidden;\n    display: block;\n  }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,\n  .charcoal-pagination-button[aria-disabled='false']:hover {\n    color: var(--charcoal-color-text-tertiary-default);\n    background-color: var(--charcoal-color-container-secondary-default);\n  }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,\n  .charcoal-pagination-button[aria-disabled='false']:active {\n    color: var(--charcoal-color-text-tertiary-press);\n    background-color: var(--charcoal-color-container-tertiary-press);\n  }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,\n  .charcoal-pagination-button[aria-disabled='false']:focus {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus-visible,\n  .charcoal-pagination-button[aria-disabled='false']:focus-visible {\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n  .charcoal-pagination-button[aria-disabled='false']:focus:not(:focus-visible) {\n    box-shadow: none;\n  }\n.charcoal-pagination-button[aria-current] {\n    cursor: default;\n    background-color: var(--charcoal-color-container-hud-default);\n    color: var(--charcoal-color-text-on-hud-default);\n  }\n.charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):hover,\n    .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):active {\n      background-color: var(--charcoal-color-container-hud-default);\n      color: var(--charcoal-color-text-on-hud-default);\n    }\n/* stylelint-enable no-descending-specificity */\n\n.charcoal-pagination-nav-button[data-hidden] {\n  visibility: hidden;\n}\n\n.charcoal-pagination-spacer,\n  .charcoal-pagination-spacer:hover,\n  .charcoal-pagination-spacer:active {\n    cursor: default;\n    color: var(--charcoal-color-text-tertiary-default);\n    background: none;\n  }\n\n.charcoal-pagination-spacer.charcoal-icon-button:disabled {\n    opacity: 1;\n  }\n.charcoal-carousel {\n  position: relative;\n  display: block;\n}\n\n  .charcoal-carousel[data-full-width='true'] {\n    width: 100vw;\n    margin-inline: calc(50% - 50vw);\n  }\n\n.charcoal-carousel__viewport {\n  position: relative;\n}\n\n/* フォーカスリングは scroller ではなく viewport に描く。scroller に置くと\n     hasGradient の mask（mask-clip: border-box）で外側の box-shadow ごと消えるため。 */\n\n.charcoal-carousel__viewport[data-focus-visible] {\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n  }\n\n/* スライド間隔は所有しない（sandbox 同様、利用者が children 側で注入する）。\n   このコンポーネントの責務はスクロールと indicator / arrow によるページ送りのみ。 */\n.charcoal-carousel__scroller {\n  position: relative;\n  display: flex;\n  overflow-x: auto;\n  overflow-y: hidden;\n  overscroll-behavior-x: contain;\n  scroll-behavior: smooth;\n  scrollbar-width: none;\n  outline: none;\n}\n.charcoal-carousel__scroller::-webkit-scrollbar {\n    display: none;\n  }\n\n/* スクロールスナップ type は prop（scrollSnap.type）で scroller に出し分ける。\n   align は基底 .charcoal-carousel__item の後（後述）に置く（no-descending-specificity 回避）。\n   未指定時の既定（M=none / S=mandatory / align=center）は JS 側で data 属性に解決する。 */\n.charcoal-carousel[data-scroll-snap-type='none'] .charcoal-carousel__scroller {\n  scroll-snap-type: none;\n}\n\n.charcoal-carousel[data-scroll-snap-type='proximity']\n  .charcoal-carousel__scroller {\n  scroll-snap-type: x proximity;\n}\n\n.charcoal-carousel[data-scroll-snap-type='mandatory']\n  .charcoal-carousel__scroller {\n  scroll-snap-type: x mandatory;\n}\n\n/* グラデーション: mask で端のアイテム自体を透明へフェードさせる（下の背景色を\n   問わない）。mask の色はアルファとしてだけ効く（#000=表示 / transparent=透過）。\n   左フェード・右フェードの 2 レイヤーを intersect で合成し、はみ出して\n   スクロール可能な側のみ data-can-prev/next で 72px のフェード帯を枠内に置く。\n   無効な側はフェード帯ごと枠外へスライドして隠す（mask-image と違い\n   mask-position は補間可能なので、切替が 0.2s のフェードになる）。 */\n.charcoal-carousel[data-has-gradient='true'] .charcoal-carousel__scroller {\n  -webkit-mask-image:\n    linear-gradient(to right, transparent, #000 72px),\n    linear-gradient(to left, transparent, #000 72px);\n          mask-image:\n    linear-gradient(to right, transparent, #000 72px),\n    linear-gradient(to left, transparent, #000 72px);\n  /* 枠外へ 72px スライドしても反対側の端が欠けないよう、レイヤー幅に 72px 足す */\n  -webkit-mask-size: calc(100% + 72px) 100%;\n          mask-size: calc(100% + 72px) 100%;\n  -webkit-mask-repeat: no-repeat;\n          mask-repeat: no-repeat;\n  -webkit-mask-composite: source-in, xor;\n          mask-composite: intersect;\n  -webkit-mask-position:\n    -72px 0,\n    0 0;\n          mask-position:\n    -72px 0,\n    0 0;\n  /* 0.2s ease-in は react-sandbox の LeftGradient と同じ値 */\n  transition: 0.2s ease-in mask-position;\n}\n\n.charcoal-carousel[data-has-gradient='true'][data-can-prev='true']\n  .charcoal-carousel__scroller {\n  -webkit-mask-position:\n    0 0,\n    0 0;\n          mask-position:\n    0 0,\n    0 0;\n}\n\n.charcoal-carousel[data-has-gradient='true'][data-can-next='true']\n  .charcoal-carousel__scroller {\n  -webkit-mask-position:\n    -72px 0,\n    -72px 0;\n          mask-position:\n    -72px 0,\n    -72px 0;\n}\n\n.charcoal-carousel[data-has-gradient='true'][data-can-prev='true'][data-can-next='true']\n  .charcoal-carousel__scroller {\n  -webkit-mask-position:\n    0 0,\n    -72px 0;\n          mask-position:\n    0 0,\n    -72px 0;\n}\n\n.charcoal-carousel__item {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.charcoal-carousel[data-size='S'] .charcoal-carousel__item {\n  flex: 0 0 100%;\n}\n\n/* scroll-snap-align は prop（scrollSnap.align）で出し分ける。基底 .charcoal-carousel__item\n   より後に置くことで no-descending-specificity を回避する。 */\n.charcoal-carousel[data-scroll-snap-align='center'] .charcoal-carousel__item {\n  scroll-snap-align: center;\n}\n\n.charcoal-carousel[data-scroll-snap-align='start'] .charcoal-carousel__item {\n  scroll-snap-align: start;\n}\n\n/* ── Navigation Buttons (charcoal IconButton, variant=Overlay size=S) ── */\n\n/* マスクの透過域と同じ 72px 1fr 72px グリッド。各ボタンは 72px ゾーンの中央に置く。 */\n.charcoal-carousel__navigation {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  display: grid;\n  grid-template-columns: 72px 1fr 72px;\n  align-items: center;\n  /* アイテム内のコンテンツより上にボタンを表示する */\n  z-index: 1;\n  /* sandbox 同様、通常は隠してカルーセル hover 時にフェードイン表示する。 */\n  opacity: 0;\n  transition: 0.4s opacity;\n}\n.charcoal-carousel__navigation[data-visible='false'] {\n    display: none;\n  }\n\n/* hover で表示。キーボード操作でも到達できるよう、キーボード由来のフォーカスが\n   カルーセル内にある間も表示する（:focus-within だとクリックで残ったフォーカスでも\n   表示され続けるため、react-aria が付与する data 属性で判定する）。 */\n.charcoal-carousel:hover .charcoal-carousel__navigation,\n.charcoal-carousel[data-focus-visible-within] .charcoal-carousel__navigation {\n  opacity: 1;\n}\n\n.charcoal-carousel__navigation__item {\n  pointer-events: auto;\n}\n\n/* ヒットエリアをグリッド端列（= mask のフェード帯と同じ 72px）全体へ広げる。\n     擬似要素上のクリックは元の button に届くため、帯のどこを押してもページ送りになる。\n     position: absolute の基準は positioned な .charcoal-carousel__navigation（inset: 0）。 */\n\n.charcoal-carousel__navigation__item::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 72px;\n  }\n\n.charcoal-carousel__navigation__item[data-direction='prev'] {\n    grid-column: 1;\n    justify-self: center;\n  }\n\n.charcoal-carousel__navigation__item[data-direction='prev']::after {\n      left: 0;\n    }\n\n.charcoal-carousel__navigation__item[data-direction='next'] {\n    grid-column: 3;\n    justify-self: center;\n  }\n\n.charcoal-carousel__navigation__item[data-direction='next']::after {\n      right: 0;\n    }\n\n/* スクロール端では非表示。IconButton の disabled スタイル(opacity:0.32)より\n   高い詳細度で打ち消すため、ルートを前置する。 */\n.charcoal-carousel .charcoal-carousel__navigation__item[data-hidden='true'] {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* タッチデバイスではナビゲーションボタンを出さず、スワイプ操作に委ねる。 */\n@media (hover: none) and (pointer: coarse) {\n  .charcoal-carousel__navigation {\n    display: none;\n  }\n}\n\n/* ── Indicator: JS Fallback ── */\n\n.charcoal-carousel__indicator {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n  gap: 8px;\n}\n\n.charcoal-carousel__indicator[data-visible='false'] {\n    display: none;\n  }\n\n.charcoal-carousel__indicator__item {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  box-sizing: border-box;\n  width: 8px;\n  height: 8px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background-color: var(--charcoal-color-text-tertiary-default);\n  cursor: pointer;\n  transition: 0.2s background-color;\n}\n\n.charcoal-carousel__indicator__item:hover {\n    background-color: var(--charcoal-color-text-secondary-default);\n  }\n\n.charcoal-carousel__indicator__item:focus-visible {\n    outline: 2px solid rgba(0, 150, 250, 0.56);\n    outline-offset: 2px;\n  }\n\n.charcoal-carousel__indicator__item[data-active='true'] {\n    background-color: var(--charcoal-color-text-default);\n  }\n\n/* ── CSS Scroll Markers (progressive enhancement) ── */\n\n/* CSS Scroll Markers / Anchor Positioning は新しい仕様で、stylelint がプロパティ・\n   擬似要素・擬似クラスを未知と判定するため、この @supports ブロックでは該当ルールを無効化する。 */\n/* stylelint-disable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */\n@supports (scroll-marker-group: after) {\n  .charcoal-carousel[data-indicator='true'] {\n    padding-bottom: 40px;\n  }\n\n  .charcoal-carousel__scroller {\n    anchor-name: --charcoal-carousel;\n    scroll-marker-group: after;\n  }\n\n    .charcoal-carousel__scroller::scroll-button(*) {\n      content: none;\n    }\n\n    .charcoal-carousel__scroller::scroll-marker-group {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      gap: 8px;\n\n      position: absolute;\n      position-anchor: --charcoal-carousel;\n      top: anchor(bottom);\n      justify-self: anchor-center;\n    }\n\n  .charcoal-carousel[data-indicator='false'] .charcoal-carousel__scroller {\n    scroll-marker-group: none;\n  }\n\n  .charcoal-carousel__item::scroll-marker {\n    content: '';\n    width: 8px;\n    height: 8px;\n    border: 0;\n    border-radius: 50%;\n    background-color: var(--charcoal-color-text-tertiary-default);\n    cursor: pointer;\n    transition: 0.2s background-color;\n  }\n\n    .charcoal-carousel__item::scroll-marker:hover {\n      background-color: var(--charcoal-color-text-secondary-default);\n    }\n\n    .charcoal-carousel__item::scroll-marker:focus {\n      outline: 2px solid rgba(0, 150, 250, 0.56);\n      outline-offset: 2px;\n    }\n\n    .charcoal-carousel__item::scroll-marker:target-current {\n      background-color: var(--charcoal-color-text-default);\n    }\n\n  .charcoal-carousel__indicator {\n    display: none;\n  }\n}\n/* stylelint-enable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */\n.charcoal-focus-ring:is(\n      :not(:disabled):not([aria-disabled]),\n      [aria-disabled='false']\n    ):focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n    transition: 0.2s box-shadow;\n  }\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "6.0.0-rc.5",
+  "version": "6.0.0-rc.6",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -41,10 +41,10 @@
     "polished": "^4.1.4",
     "react-compiler-runtime": "1.0.0",
     "warning": "^4.0.3",
-    "@charcoal-ui/icons": "6.0.0-rc.5",
-    "@charcoal-ui/theme": "6.0.0-rc.5",
-    "@charcoal-ui/utils": "6.0.0-rc.5",
-    "@charcoal-ui/foundation": "6.0.0-rc.5"
+    "@charcoal-ui/foundation": "6.0.0-rc.6",
+    "@charcoal-ui/icons": "6.0.0-rc.6",
+    "@charcoal-ui/utils": "6.0.0-rc.6",
+    "@charcoal-ui/theme": "6.0.0-rc.6"
   },
   "peerDependencies": {
     "react": ">=17.0.0",

package/src/components/Carousel/__snapshots__/index.css.snap

@@ -130,9 +130,11 @@
   display: none;
 }
 
-/* hover で表示。キーボード操作でも到達できるよう focus-within でも表示する。 */
+/* hover で表示。キーボード操作でも到達できるよう、キーボード由来のフォーカスが
+   カルーセル内にある間も表示する（:focus-within だとクリックで残ったフォーカスでも
+   表示され続けるため、react-aria が付与する data 属性で判定する）。 */
 
-.charcoal-carousel:hover .charcoal-carousel__navigation, .charcoal-carousel:focus-within .charcoal-carousel__navigation {
+.charcoal-carousel:hover .charcoal-carousel__navigation, .charcoal-carousel[data-focus-visible-within] .charcoal-carousel__navigation {
   opacity: 1;
 }
 
@@ -140,16 +142,36 @@
   pointer-events: auto;
 }
 
+/* ヒットエリアをグリッド端列（= mask のフェード帯と同じ 72px）全体へ広げる。
+     擬似要素上のクリックは元の button に届くため、帯のどこを押してもページ送りになる。
+     position: absolute の基準は positioned な .charcoal-carousel__navigation（inset: 0）。 */
+
+.charcoal-carousel__navigation__item::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 72px;
+}
+
 .charcoal-carousel__navigation__item[data-direction='prev'] {
   grid-column: 1;
   justify-self: center;
 }
 
+.charcoal-carousel__navigation__item[data-direction='prev']::after {
+  left: 0;
+}
+
 .charcoal-carousel__navigation__item[data-direction='next'] {
   grid-column: 3;
   justify-self: center;
 }
 
+.charcoal-carousel__navigation__item[data-direction='next']::after {
+  right: 0;
+}
+
 /* スクロール端では非表示。IconButton の disabled スタイル(opacity:0.32)より
    高い詳細度で打ち消すため、ルートを前置する。 */
 

package/src/components/Carousel/index.browser.test.tsx

@@ -0,0 +1,102 @@
+/**
+ * ナビゲーションボタンのヒットエリア検証（実ブラウザ）
+ *
+ * hasGradient の 72px フェード帯はページ送り操作の領域に見えるが、
+ * クリック可能域が中央の 32px 円形ボタンだけだと、帯の残り部分の
+ * クリックが背後のスライド（リンク等）に素通りしてしまう。
+ * 帯全体がナビゲーションボタンのヒットエリアであることを
+ * document.elementFromPoint のヒットテストで検証する。
+ * （pointer-events / 擬似要素のヒットテストは jsdom では再現できない）
+ */
+import { userEvent } from '@vitest/browser/context'
+import { render } from '@testing-library/react'
+import Carousel from '.'
+
+const EDGE_ZONE_WIDTH = 72
+
+const slides = Array.from({ length: 10 }, (_, i) => (
+  <div key={`slide-${i}`} style={{ width: 200, height: 160 }}>
+    Slide {i}
+  </div>
+))
+
+function renderCarousel() {
+  const { container } = render(
+    <div style={{ width: 400 }}>
+      <Carousel size="M" hasGradient>
+        {slides}
+      </Carousel>
+    </div>,
+  )
+  const viewport = container.querySelector(
+    '.charcoal-carousel__viewport',
+  ) as HTMLElement
+  return { container, viewport, rect: viewport.getBoundingClientRect() }
+}
+
+function hitNavigationItem(x: number, y: number) {
+  return document
+    .elementFromPoint(x, y)
+    ?.closest('.charcoal-carousel__navigation__item')
+}
+
+describe('navigation button hit area', () => {
+  it('右端 72px 帯のクリックはスライドではなく next ボタンに届く', () => {
+    const { rect } = renderCarousel()
+    const centerY = rect.top + rect.height / 2
+
+    // ボタン円（32px、帯の中央）の外側かつ帯の内側の点
+    const nearEdge = hitNavigationItem(rect.right - 8, centerY)
+    expect(nearEdge?.getAttribute('data-direction')).toBe('next')
+
+    // ボタンの上下方向の外側（帯の上端付近）
+    const aboveButton = hitNavigationItem(
+      rect.right - EDGE_ZONE_WIDTH / 2,
+      rect.top + 8,
+    )
+    expect(aboveButton?.getAttribute('data-direction')).toBe('next')
+  })
+
+  it('スクロール不能な側（初期位置の prev）の帯はスライドへ素通りする', () => {
+    const { rect } = renderCarousel()
+    const centerY = rect.top + rect.height / 2
+
+    const hit = document.elementFromPoint(rect.left + 8, centerY)
+    expect(hit?.closest('.charcoal-carousel__navigation__item')).toBeNull()
+    expect(hit?.closest('.charcoal-carousel__scroller')).not.toBeNull()
+  })
+
+  it('帯のボタン外の点をクリックすると next へページ送りされる', async () => {
+    const { container, viewport, rect } = renderCarousel()
+    const scroller = container.querySelector(
+      '.charcoal-carousel__scroller',
+    ) as HTMLElement
+    expect(scroller.scrollLeft).toBe(0)
+
+    // trusted click とその後の scroll イベントは React の act() 管理外で
+    // 発火するため、この区間だけ act 警告を無効化する。
+    const g = globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+    g.IS_REACT_ACT_ENVIRONMENT = false
+    try {
+      // viewport 左上基準・帯の内側かつボタン円の外側の座標を実クリックする
+      await userEvent.click(viewport, {
+        position: { x: rect.width - 8, y: 8 },
+      })
+
+      await vi.waitFor(() => {
+        expect(scroller.scrollLeft).toBeGreaterThan(0)
+      })
+    } finally {
+      g.IS_REACT_ACT_ENVIRONMENT = true
+    }
+  })
+
+  it('帯の外側（中央領域）のクリックはスライドに届く', () => {
+    const { rect } = renderCarousel()
+    const centerY = rect.top + rect.height / 2
+
+    const hit = document.elementFromPoint(rect.left + rect.width / 2, centerY)
+    expect(hit?.closest('.charcoal-carousel__navigation__item')).toBeNull()
+    expect(hit?.closest('.charcoal-carousel__scroller')).not.toBeNull()
+  })
+})