:root {
       --notice-title-size: var(--stories-title-size, 22px);
       --notice-excerpt-size: var(--stories-excerpt-size, 18px);
       --notice-date-size: var(--stories-date-size, 16px);
       --notice-content-size: var(--stories-content-size, 16px);
       --notice-thumb-h: var(--stories-thumb-h, 210px);
       --notice-grid-gap: var(--stories-grid-gap, 24px);
       --notice-list-gap: var(--stories-list-gap, 16px);
   }

   [data-notices] {
       display: block;
   }

   .notice-grid {
       display: grid;
       gap: var(--notice-grid-gap);
       grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .notice-modal-content>.notice-date {
       margin-left: 6px;
   }

   @media (max-width:768px) {
       .notice-grid {
           grid-template-columns: 1fr;
       }

       .notice-modal-content>.notice-date {
           margin-left: 0px;
       }

       .notice-grid {
           gap: 42px;
       }
   }

   .notice-col {
       min-width: 0;
   }

   .notice-list {
       display: grid;
       gap: var(--notice-list-gap);
   }

   .notice-card {
       /* border: 1px solid rgba(0, 0, 0, .2); */
       padding: 8px;
       background: transparent;
   }

   .notice-thumb-btn {
       display: block;
       width: 100%;
       background: transparent;
       border: 0;
       padding: 0;
       margin: 0;
       cursor: pointer;
   }

   .notice-thumb {
       width: 100%;
       height: 210px;
       display: grid;
       place-items: center;
       overflow: hidden;
       border: 1px solid #8f92a1;
   }

   .notice-thumb>img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: center;
       display: block;
   }

   .notice-meta {
       margin-top: 8px;
   }

   .notice-title {
       margin: 12px 0px 4px 0px !important;
       font-size: 22px;
       line-height: 1.2;
       font-weight: 800;
   }

   .notice-excerpt {
       font-size: 18px;
       line-height: 1.35;
       word-break: break-word;
       padding-top: 5px;
       font-weight: 400;
   }

   .notice-date {
       display: block;
       font-size: 16px;
       opacity: .8;
       font-weight: 200;
       color: #7e7e7f;
       /* margin-top: -2.5px; */
   }

   .notice-empty {
       margin: 8px 0;
       font-size: 12px;
   }

   .notice-modal[hidden] {
       display: none !important;
   }

   .notice-modal {
       position: fixed;
       inset: 0;
       z-index: 999999;
       display: block;
       overflow: hidden;
       overshoot-behavior: contain;
       overscroll-behavior: contain;
   }

   .notice-modal-dim {
       position: absolute;
       inset: 0;
       z-index: 0;
       background: transparent !important;
   }

   .notice-modal-box {
       position: relative;
       z-index: 1;
       width: 67vw;
       margin: 94px auto 6vh;
       min-height: var(--notice-modal-min-h);
       background: #fff;
       /* border: 1px solid #8f92a1; */
       display: flex;
       flex-direction: column;
       max-height: calc(100vh - var(--notice-modal-top) - 6vh);
       -webkit-overflow-scrolling: touch;
       overflow: hidden;
   }

   @media (max-width:768px) {
       .notice-modal:not([hidden]) .notice-modal-dim {
           background: #fff !important;
       }
   }

   @media (max-width:768px) {
       body:has(.notice-modal:not([hidden]))::before {
           content: "";
           position: fixed;
           inset: 0;
           background: #fff;
           z-index: 999998;
           pointer-events: none;
       }
   }

   .notice-scroll-hint {
       position: absolute;
       left: 50%;
       bottom: 10px;
       transform: translateX(-50%);
       width: 36px;
       height: 36px;
       pointer-events: none;
       z-index: 6;
       color: rgba(0, 0, 0, .55);
       opacity: .9;
       display: none;
   }

   .notice-scroll-hint::before {
       content: "";
       position: absolute;
       left: 50%;
       top: 8px;
       width: 12px;
       height: 12px;
       transform: translateX(-50%) rotate(45deg);
       border-right: 2px solid currentColor;
       border-bottom: 2px solid currentColor;
       animation: notice-bounce 1.6s infinite;
   }

   @keyframes notice-bounce {

       0%,
       100% {
           transform: translateX(-50%) rotate(45deg) translateY(0);
       }

       50% {
           transform: translateX(-50%) rotate(45deg) translateY(5px);
       }
   }

   .notice-modal-close {
       position: absolute;
       top: 10px;
       right: 12px;
       z-index: 5;
       width: 60px;
       height: 60px;
       font-size: 0;
       line-height: 1;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       border: 0;
       background: transparent;
       cursor: pointer;
       margin: 0;
       -webkit-tap-highlight-color: transparent;
       outline: none;
       box-shadow: none;
       --close-size: 72px;
       --close-stroke: 1px;
       --stroke-scale: 0.6;
       color: #111;
   }

   .notice-modal-close::before,
   .notice-modal-close::after {
       content: "";
       position: absolute;
       top: 50%;
       left: 50%;
       width: var(--close-size);
       height: var(--close-stroke);
       background: currentColor;
       border-radius: 999px;
       transform: translate(-50%, -50%) rotate(45deg) scaleY(var(--stroke-scale));
   }

   .notice-modal-close::after {
       transform: translate(-50%, -50%) rotate(-45deg) scaleY(var(--stroke-scale));
   }

   .notice-modal-close:focus,
   .notice-modal-close:focus-visible {
       outline: none !important;
       box-shadow: none !important;
   }

   .notice-modal-close::-moz-focus-inner {
       border: 0;
   }

   .notice-modal-scroll {
       flex: 1 1 auto;
       min-height: 0;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
       overscroll-behavior: contain;
       padding: 0 0 5px 0;
       min-height: 70vh;
       scrollbar-width: none;
       -ms-overflow-style: none;
   }

   .notice-modal-scroll::-webkit-scrollbar {
       display: none;
   }

   html:has(.notice-modal:not([hidden])) {
       overflow: hidden;
       height: 100%;
   }

   body:has(.notice-modal:not([hidden])) {
       overflow: hidden;
       height: 100%;
   }

   .notice-modal-hero {
       border: 1px solid #8f92a1;
   }

   .notice-modal-hero img {
       width: 100%;
       max-height: 60vh;
       object-fit: cover;
       object-position: center;
       display: block;
   }

   .notice-modal-title {
       margin: 10px 6px 6px;
       font-size: var(--stories-cat-size, 38px);
       line-height: 1.25;
       font-weight: 700;
   }

   .notice-modal-content {
       padding: 0 0px 0;
       font-size: var(--notice-content-size);
   }

   .notice-modal-content :where(p, ul, ol, table, blockquote, pre, figure) {
       margin-top: 12px;
       margin-bottom: 0;
   }

   .notice-modal-text {
       margin-left: 6px;
   }

   .notice-wrap,
   .notice-grid,
   .notice-col,
   .notice-card,
   .notice-title,
   .notice-excerpt,
   .notice-date,
   .notice-meta,
   .notice-modal-body,
   .notice-modal-title,
   .notice-modal-content {
       font-family: var(--stories-font, 'Paperlogy', sans-serif) !important;
   }

   @media (max-width:768px) {
       .notice-title {
           margin: 12px 0px -1px 0px !important;
           line-height: 1.2;
           font-weight: 800;
       }

       .notice-scroll-hint {
           bottom: 8px;
       }

       .notice-scroll-hint::before {
           top: 6px;
       }

       .notice-modal-box {
           width: 92vw;
           margin: calc(var(--notice-modal-top) * .7) auto 4vh;
       }

       .notice-modal-close {
           width: 56px;
           height: 56px;
           font-size: 0;
           line-height: 1;
           --close-size: 48px;
       }

       .notice-modal-title {
           font-size: 22px !important;
           margin: 5px 6px 0;
           line-height: 1.25;
       }

       .notice-modal-text {
           line-height: 1.2;
           margin-left: 6px;
           margin-top: 6px;
       }

       .notice-modal-content {
           padding: 0 0 0 0px;
       }

       .notice-modal-content :where(p, ul, ol, table, blockquote, pre, figure) {
           margin-top: 0;
           margin-bottom: 0;
           font-size: 16px !important;
       }

       .notice-excerpt {
           font-size: 16px;
       }

       .notice-date {
           font-size: 14px;
           /* margin-left: 6px !important; */
           margin-top: 3px;
       }


   }

   :root {
       --notice-modal-top: 10vh;
       --notice-modal-min-h: 20vh;
   }