/* features/frame: CSS-only frame effects (yugami, jaggy)
   運用: CSSネストと@supportsを活用。非対応環境は丸角(12px)フォールバック。 */

   /* `frame--*` 要素はブロック化してはみ出したものは非表示 */
   [class^="frame--"],
   [class*=" frame--"] {
     display: block;
     overflow: hidden;
     /* フォールバック丸角 */
     border-radius: 12px;
   
     /* 直下/内部imgの基本フィット */
     & > img,
     & img {
       display: block;
       width: 100%;
       height: auto;
     }
   }
   
   /* ======================================================
      yugami (border-radius v1〜v5)
   ====================================================== */
   .frame--yugami-v1,
   .img-frame--yugami-v1 img,
   .wp-block-media-text.mt-frame--yugami-v1 .wp-block-media-text__media img { border-radius: 62% 38% 63% 37% / 40% 60% 40% 60%; }
   
   .frame--yugami-v2,
   .img-frame--yugami-v2 img,
   .wp-block-media-text.mt-frame--yugami-v2 .wp-block-media-text__media img { border-radius: 68% 32% 89% 41% / 44% 52% 70% 56%; }
   
   .frame--yugami-v3,
   .img-frame--yugami-v3 img,
   .wp-block-media-text.mt-frame--yugami-v3 .wp-block-media-text__media img { border-radius: 57% 43% 87% 34% / 61% 79% 53% 77%; }
   
   .frame--yugami-v4,
   .img-frame--yugami-v4 img,
   .wp-block-media-text.mt-frame--yugami-v4 .wp-block-media-text__media img { border-radius: 64% 36% 42% 58% / 47% 63% 59% 41%; }
   
   .frame--yugami-v5,
   .img-frame--yugami-v5 img,
   .wp-block-media-text.mt-frame--yugami-v5 .wp-block-media-text__media img { border-radius: 63% 37% 61% 39% / 58% 42% 40% 60%; }
   
   /* ======================================================
      jaggy (clip-path: polygon v1〜v5) 依存: @supports
   ====================================================== */
   @supports (clip-path: polygon(0 0, 100% 0)) {
     .frame--jaggy-v1,
     .img-frame--jaggy-v1 img,
     .wp-block-media-text.mt-frame--jaggy-v1 .wp-block-media-text__media img {
       --jt: 3.4%; --jr: 2.6%; --jb: 4.0%; --jl: 2.2%;
       clip-path: polygon(
         0% var(--jt),
         18% 0%,
         37% var(--jt),
         61% 0%,
         82% calc(var(--jt) * 0.70),
         100% calc(var(--jt) * 0.25),
   
         100% 12%,
         calc(100% - var(--jr)) 33%,
         100% 55%,
         calc(100% - (var(--jr) * 0.60)) 78%,
         100% 100%,
   
         100% calc(100% - (var(--jb) * 0.35)),
         76% 100%,
         59% calc(100% - var(--jb)),
         36% 100%,
         14% calc(100% - (var(--jb) * 0.65)),
         0% 100%,
   
         0% 82%,
         calc(var(--jl) * 0.85) 60%,
         0% 39%,
         calc(var(--jl) * 0.50) 18%,
         0% 0%,
   
         0% var(--jt)
       );
     }
   
     .frame--jaggy-v2,
     .img-frame--jaggy-v2 img,
     .wp-block-media-text.mt-frame--jaggy-v2 .wp-block-media-text__media img {
       --jt: 3.8%; --jr: 3.0%; --jb: 4.6%; --jl: 2.6%;
       clip-path: polygon(
         0% 0%,
         18% calc(var(--jt) * 0.95),
         40% 0%,
         62% var(--jt),
         84% 0%,
         100% calc(var(--jt) * 0.30),
   
         calc(100% - var(--jr)) 12%,
         100% 32%,
         calc(100% - (var(--jr) * 0.80)) 55%,
         100% 78%,
         calc(100% - (var(--jr) * 0.45)) 100%,
   
         100% 100%,
         78% calc(100% - var(--jb) * 0.30),
         57% 100%,
         37% calc(100% - var(--jb)),
         18% 100%,
         0% 100%,
   
         calc(var(--jl) * 0.85) 86%,
         0% 64%,
         calc(var(--jl) * 0.60) 41%,
         0% 18%,
         calc(var(--jl) * 0.45) 0%,
   
         0% 0%
       );
     }
   
     .frame--jaggy-v3,
     .img-frame--jaggy-v3 img,
     .wp-block-media-text.mt-frame--jaggy-v3 .wp-block-media-text__media img {
       --jt: 4.2%; --jr: 3.4%; --jb: 5.2%; --jl: 3.0%;
       clip-path: polygon(
         0% calc(var(--jt) * 0.7),
         12% 0%, 28% var(--jt),
         44% 0%, 60% calc(var(--jt) * 0.9),
         78% 0%, 92% calc(var(--jt) * 0.6),
         100% calc(var(--jt) * 0.35),
   
         100% 8%,
         calc(100% - var(--jr)) 26%,
         100% 45%,
         calc(100% - (var(--jr) * 0.85)) 67%,
         100% 86%,
         calc(100% - (var(--jr) * 0.45)) 100%,
   
         100% calc(100% - (var(--jb) * 0.25)),
         83% 100%,
         66% calc(100% - var(--jb)),
         46% 100%,
         27% calc(100% - (var(--jb) * 0.7)),
         7% 100%,
         0% 100%,
   
         0% 88%,
         calc(var(--jl)) 65%,
         0% 40%,
         calc(var(--jl) * 0.6) 14%,
         0% 0%,
   
         0% calc(var(--jt) * 0.7)
       );
     }
   
     .frame--jaggy-v4,
     .img-frame--jaggy-v4 img,
     .wp-block-media-text.mt-frame--jaggy-v4 .wp-block-media-text__media img {
       --jt: 4.8%; --jr: 3.9%; --jb: 6.0%; --jl: 3.4%;
       clip-path: polygon(
         0% 0%,
         14% calc(var(--jt) * 0.9),
         30% 0%,
         48% calc(var(--jt) * 1.1),
         63% 0%,
         82% calc(var(--jt) * 0.6),
         100% calc(var(--jt) * 0.35),
   
         calc(100% - var(--jr)) 7%,
         100% 25%,
         calc(100% - var(--jr) * 0.9) 44%,
         100% 66%,
         calc(100% - var(--jr) * 0.5) 87%,
         100% 100%,
   
         100% 100%,
         86% calc(100% - (var(--jb) * 0.25)),
         70% 100%,
         53% calc(100% - var(--jb)),
         38% 100%,
         22% calc(100% - (var(--jb) * 0.85)),
         8% 100%,
         0% 100%,
   
         calc(var(--jl) * 1.1) 90%,
         0% 67%,
         calc(var(--jl) * 0.7) 46%,
         0% 22%,
         calc(var(--jl) * 0.5) 0%,
   
         0% 0%
       );
     }
   
     .frame--jaggy-v5,
     .img-frame--jaggy-v5 img,
     .wp-block-media-text.mt-frame--jaggy-v5 .wp-block-media-text__media img {
       --jt: 5.4%; --jr: 4.4%; --jb: 6.8%; --jl: 3.8%;
       clip-path: polygon(
         0% calc(var(--jt) * 0.5),
         10% 0%, 22% calc(var(--jt) * 1.15),
         36% 0%, 49% calc(var(--jt) * 1.35),
         66% 0%, 80% calc(var(--jt) * 0.9),
         94% 0%, 100% calc(var(--jt) * 0.45),
   
         100% 6%,
         calc(100% - var(--jr) * 1.00) 24%,
         100% 43%,
         calc(100% - var(--jr) * 0.95) 63%,
         100% 82%,
         calc(100% - var(--jr) * 0.55) 100%,
   
         100% calc(100% - (var(--jb) * 0.22)),
         87% 100%,
         73% calc(100% - (var(--jb) * 1.00)),
         56% 100%,
         41% calc(100% - (var(--jb) * 0.85)),
         27% 100%,
         13% calc(100% - (var(--jb) * 0.60)),
         0% 100%,
   
         0% 91%,
         calc(var(--jl) * 1.2) 70%,
         0% 49%,
         calc(var(--jl) * 0.9) 28%,
         0% 9%,
         calc(var(--jl) * 0.5) 0%,
   
         0% calc(var(--jt) * 0.5)
       );
     }
   }