.article-shell{width:min(1080px,calc(100% - 40px));margin:auto}
.breadcrumbs{display:flex;align-items:center;gap:9px;overflow:hidden;padding:28px 0 23px;color:#777e88;font-size:.68rem;white-space:nowrap}
.breadcrumbs a{color:var(--pink-deep)}
.breadcrumbs span:last-child{overflow:hidden;text-overflow:ellipsis}
.article-layout{position:relative;display:block;max-width:1080px;margin:auto}
.article-main{max-width:760px;margin:0 auto}
.article-tags{display:flex;flex-wrap:wrap;gap:7px}
.article-tags span{padding:5px 9px;border-radius:7px;background:var(--pink-soft);color:var(--pink-deep);font-size:.63rem;font-weight:700}
.article-header h1{max-width:760px;margin:16px 0 18px;font-size:clamp(2.5rem,5vw,4.35rem);font-weight:700;line-height:1.2;letter-spacing:-.03em;overflow-wrap:anywhere}
.article-dek{max-width:680px;margin:0;color:var(--muted);font-size:.94rem;line-height:1.9}
.article-byline{display:flex;align-items:center;gap:10px;margin:27px 0 31px}
.author-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--pink);color:#fff;font:700 .82rem var(--font-rounded)}
.article-byline strong,.article-byline small{display:block}
.article-byline strong{font-size:.72rem}
.article-byline small{color:#7b828c;font-size:.63rem}
.share-button{margin-left:auto;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#646b76;font-size:.65rem;font-weight:600}
.share-button:hover{border-color:#efafc6;color:var(--pink-deep)}
.article-featured{margin:0 0 42px}
.article-featured img{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:18px}
.article-content{font-size:1rem;line-height:2;color:#30333a}
.article-content>*{max-width:72ch}
.article-content>p:first-child{font-size:1.08rem;color:#474c55}
.article-content p{margin:0 0 1.65em}
.article-content h2{margin:3.1em 0 .75em;font-size:1.75rem;font-weight:700;line-height:1.45;letter-spacing:-.02em;scroll-margin-top:100px}
.article-content h3{margin:2.2em 0 .65em;font-size:1.24rem;line-height:1.45;letter-spacing:-.02em}
.article-content h4{margin:1.9em 0 .55em;font-size:1.05rem}
.article-content a{color:var(--pink-deep);text-decoration:underline}
.article-content strong{font-weight:700}
.article-content ul,.article-content ol{margin:0 0 1.8em;padding-inline-start:1.5em}
.article-content li{margin:.4em 0;padding-inline-start:.25em}
.article-content blockquote{position:relative;margin:2em 0;padding:2.9em 1.5em 1.25em;border:0;border-radius:13px;background:#fff4f8;color:#3f3439}
.article-content blockquote::before{content:"NOTE";position:absolute;top:1.25em;left:1.55em;color:var(--pink-deep);font:700 .56rem/1 var(--font-rounded);letter-spacing:.12em}
.article-content blockquote p:last-child{margin-bottom:0}
.article-content figure{margin:2.1em 0}
.article-content figure img{border-radius:14px}
.article-content figcaption{margin-top:.65em;color:#737a84;font-size:.68rem;text-align:center}
.article-content table{width:100%;margin:2em 0;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:.78rem}
.article-content th,.article-content td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.article-content th{background:#f0f2f5;font-weight:700}
.article-content tr:last-child td{border-bottom:0}
.article-content code{padding:.16em .36em;border-radius:5px;background:#eceef2;font-size:.88em}
.article-content pre{overflow:auto;margin:2em 0;padding:20px;border-radius:13px;background:#23252b;color:#f4f5f7;font-size:.8rem;line-height:1.75}
.article-content pre code{padding:0;background:transparent;color:inherit}
.article-content .wp-block-group,.article-content .wp-block-columns{max-width:100%}
.article-content .wp-block-button__link{border-radius:9px;background:var(--ink);color:#fff;text-decoration:none}
.article-content .wp-block-separator{margin:3em 0;border:0;border-top:1px solid var(--line)}
.article-end{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:48px 0 25px;padding:22px 24px;border-radius:14px;background:var(--pink-soft)}
.article-end p{margin:0;color:#65535b;font-size:.76rem}
.article-end a{flex:none;padding:10px 14px;border-radius:8px;background:var(--ink);color:#fff;font-size:.68rem;font-weight:700}
.post-tags{display:flex;flex-wrap:wrap;gap:7px;padding-top:20px;border-top:1px solid var(--line)}
.post-tags a{padding:5px 8px;border-radius:6px;background:#eceef1;color:#606771;font-size:.64rem}
.article-aside{position:absolute;top:0;left:calc(50% + 460px);width:220px}
.desktop-toc{padding:17px;border:1px solid var(--line);border-radius:13px;background:#fff}
.desktop-toc>strong{display:block;margin-bottom:12px;font-size:.72rem}
.desktop-toc>div{display:flex;flex-direction:column;gap:9px}
.desktop-toc a{color:#6e7580;font-size:.66rem;line-height:1.5}
.desktop-toc a:hover,.desktop-toc a.is-current{color:var(--pink-deep)}
.aside-note{margin-top:13px;padding:18px;border-radius:13px;background:#23252b;color:#fff}
.aside-note strong{font:700 .62rem var(--font-rounded);color:#ffc3d8}
.aside-note p{margin:11px 0 17px;color:#d1d3d8;font-size:.68rem;line-height:1.65}
.aside-note a{font-size:.65rem;font-weight:700}
.mobile-toc{display:none}
.related-posts{padding:95px 0 105px}
.related-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.related-heading h2{margin:0;font-size:1.9rem;letter-spacing:-.03em}
.related-heading>a{color:var(--pink-deep);font-size:.68rem;font-weight:700}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.related-grid article{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff}
.related-media{display:block;height:155px;overflow:hidden;background:var(--pink-soft)}
.related-media img{display:block;width:100%;height:100%;object-fit:cover}
.related-media.no-image{display:grid;place-items:center;color:var(--pink-deep);font:700 1rem var(--font-rounded)}
.related-grid article>div{padding:14px 15px 18px}
.related-grid article>div>span{color:var(--pink-deep);font-size:.6rem;font-weight:700}
.related-grid h3{margin:5px 0 0;font-size:.8rem;line-height:1.55;letter-spacing:-.01em}
.simple-page{max-width:900px;padding:65px 0 100px}
.simple-page .article-header{margin-bottom:35px}
.page-article{max-width:760px;margin:auto}
.not-found-page{display:grid;min-height:65vh;place-items:center;width:min(760px,calc(100% - 40px));margin:auto;text-align:center}
.not-found-page span{color:var(--pink);font:700 4rem var(--font-rounded)}
.not-found-page h1{margin:3px 0 10px;font-size:2rem;letter-spacing:-.03em}
.not-found-page p{margin:0 0 25px;color:var(--muted)}
.not-found-page a{display:inline-block;padding:10px 15px;border-radius:9px;background:var(--ink);color:#fff;font-size:.72rem;font-weight:700}

@media(max-width:1360px){
  .article-shell{width:calc(100% - 28px)}
  .article-layout{max-width:760px}
  .article-aside{display:none}
  .mobile-toc{display:block;margin:12px 0 32px;padding:16px;border:1px solid var(--line);border-radius:13px;background:#fff}
  .mobile-toc summary{cursor:pointer;list-style:none;font-size:.76rem;font-weight:700}
  .mobile-toc summary::-webkit-details-marker{display:none}
  .mobile-toc summary::after{content:"＋";float:right;color:var(--pink-deep)}
  .mobile-toc[open] summary::after{content:"−"}
  .mobile-toc nav{display:flex;flex-direction:column;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
  .mobile-toc a{color:#68707a;font-size:.68rem}
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .related-grid article:last-child{display:none}
}

@media(max-width:520px){
  .breadcrumbs{padding:20px 0 17px}
  .article-header h1{font-size:clamp(2.3rem,12vw,3.2rem)}
  .article-dek{font-size:.86rem}
  .article-byline{align-items:flex-start}
  .share-button{padding:7px 9px;font-size:.61rem}
  .article-featured img{border-radius:13px}
  .article-content{font-size:1rem;line-height:1.95}
  .article-content h2{font-size:1.52rem}
  .article-content table{display:block;overflow-x:auto;white-space:nowrap}
  .article-end{align-items:flex-start;flex-direction:column}
  .related-posts{padding:70px 0 80px}
  .related-grid{grid-template-columns:1fr}
  .related-grid article:last-child{display:block}
  .related-media{height:210px}
}