/* GOEZO works テックブログ
   .znc … Markdown 本文（公開ページと管理画面のプレビューで共通。管理画面はルートの font-size が違うので px で指定）
   .p-tech* … 公開ページの一覧・記事レイアウト（style.css のトークンを使う） */

/* ========== Markdown 本文 ========== */
.znc{--znc-fg:#2b3350;--znc-navy:#1b2440;--znc-sub:#6b7390;--znc-line:#dfe4ee;--znc-bg:#f5f7fb;--znc-blue:#3b82f6;--znc-code-bg:#1e2433;
  color:var(--znc-fg);font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.9;letter-spacing:.01em;overflow-wrap:anywhere;word-break:normal}
/* 要素ごとの初期の余白を消してから、要素の間に一律の余白を付ける（順番を逆にすると余白が消える） */
.znc :where(p,ul,ol,pre,table,blockquote,figure){margin:0}
.znc>*:first-child{margin-top:0}
.znc>*+*{margin-top:1.5em}
.znc h1,.znc h2,.znc h3,.znc h4{color:var(--znc-navy);font-weight:700;line-height:1.5;scroll-margin-top:110px}
.znc h1{font-size:1.7em;margin-top:2.4em;padding-bottom:.3em;border-bottom:1px solid var(--znc-line)}
.znc h2{font-size:1.45em;margin-top:2.2em;padding-bottom:.3em;border-bottom:1px solid var(--znc-line)}
.znc h3{font-size:1.2em;margin-top:2em}
.znc h4{font-size:1.05em;margin-top:1.8em}
.znc a{color:var(--znc-blue);text-decoration:underline;text-underline-offset:3px}
.znc a:hover{text-decoration:none}
.znc strong{font-weight:700;color:var(--znc-navy)}
.znc em{font-style:italic}
.znc del{color:var(--znc-sub)}
.znc ul,.znc ol{padding-left:1.6em}
.znc ul{list-style:disc}
.znc ol{list-style:decimal}
.znc ul ul{list-style:circle}
.znc li{margin-top:.35em}
.znc li>ul,.znc li>ol{margin-top:.35em}
.znc li:has(>input[type=checkbox]){list-style:none;margin-left:-1.3em}
.znc li>input[type=checkbox]{margin-right:.5em;vertical-align:middle}
.znc blockquote{padding:.2em 1em;color:var(--znc-sub);border-left:4px solid var(--znc-line)}
.znc hr{border:0;border-top:1px solid var(--znc-line);margin-block:2.5em}
.znc img{display:block;max-width:100%;height:auto;margin-inline:auto;border-radius:8px}
.znc table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:.92em;line-height:1.7}
.znc th,.znc td{border:1px solid var(--znc-line);padding:.5em .9em}
.znc th{background:var(--znc-bg);font-weight:700}
.znc :not(pre)>code{padding:.15em .4em;border-radius:4px;background:rgba(59,130,246,.09);color:#1e3a8a;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}

/* コードブロック（```言語:ファイル名） */
.znc .znc-code{position:relative}
.znc .znc-code__name{display:inline-block;padding:.35em 1em;border-radius:8px 8px 0 0;background:#323a4f;color:#e6e8ef;font:500 12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.znc .znc-code__name+pre{border-top-left-radius:0}
.znc pre{margin:0;padding:1.1em 1.3em;border-radius:8px;background:var(--znc-code-bg);color:#e6e8ef;overflow-x:auto;font-size:14px;line-height:1.7;-webkit-overflow-scrolling:touch}
.znc pre code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:none;padding:0;color:inherit}
.znc pre code.hljs{padding:0;background:none}

/* :::message */
.znc .znc-message{display:flex;gap:.8em;padding:1.1em 1.3em;border-radius:10px;background:#fdf6e3;color:#4a3f1f;font-size:.95em}
.znc .znc-message::before{content:"!";flex:0 0 1.5em;height:1.5em;border-radius:50%;background:#e8b339;color:#fff;font-weight:700;font-size:.85em;line-height:1.5em;text-align:center;margin-top:.25em}
.znc .znc-message--alert{background:#fdeeee;color:#5c1f22}
.znc .znc-message--alert::before{background:#e5484d}
.znc .znc-message__body{flex:1;min-width:0}
.znc .znc-message__body>*+*,.znc .znc-details__body>*+*{margin-top:1em}

/* :::details */
.znc .znc-details{border:1px solid var(--znc-line);border-radius:10px;overflow:hidden}
.znc .znc-details>summary{cursor:pointer;padding:.8em 1.1em;background:var(--znc-bg);font-weight:700;color:var(--znc-navy);list-style:none;display:flex;align-items:center;gap:.6em}
.znc .znc-details>summary::-webkit-details-marker{display:none}
.znc .znc-details>summary::before{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.znc .znc-details[open]>summary::before{transform:rotate(45deg)}
.znc .znc-details__body{padding:1em 1.2em}

/* 図・埋め込み・脚注 */
.znc .znc-mermaid{display:flex;justify-content:center;padding:1em;border-radius:8px;background:var(--znc-bg);overflow-x:auto;white-space:pre;font-size:14px}
.znc .znc-mermaid[data-processed]{white-space:normal}
.znc .znc-embed--youtube{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.znc .znc-embed--youtube iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.znc .footnotes{margin-top:3em;padding-top:1.2em;border-top:1px solid var(--znc-line);font-size:.86em;color:var(--znc-sub)}
.znc .footnotes ol{padding-left:1.4em}
.znc sup a{text-decoration:none;font-weight:700}

/* ========== 広告（AdSense。設定したときだけ出る） ========== */
.c-ad{margin:56px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.c-ad__label{margin:0 0 8px;font-size:1.1rem;letter-spacing:.1em;color:var(--sub)}
.p-tech__ad{grid-column:1/-1;padding:20px 24px;border-radius:var(--r-card);background:var(--white)}
.p-tech__ad .c-ad{margin:0;padding:0;border:0}

/* ========== 公開ページ：一覧 ========== */
.p-tech{padding:80px 0 140px;background:var(--bg-2)}
.p-tech__topics{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px}
.p-tech__topic{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-pill);background:var(--white);color:var(--navy);font-size:1.4rem;font-weight:700;border:1px solid var(--line);transition:background .25s,color .25s,border-color .25s}
.p-tech__topic small{font:600 1.2rem/1 var(--font-en);color:var(--sub)}
.p-tech__topic:hover,.p-tech__topic[aria-current]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.p-tech__topic:hover small,.p-tech__topic[aria-current] small{color:rgba(255,255,255,.7)}
.p-tech__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.p-tech__card{display:flex;flex-direction:column;height:100%;border-radius:var(--r-card);background:var(--white);overflow:hidden;box-shadow:0 8px 30px rgba(27,36,64,.06);transition:translate .4s var(--ez-card),box-shadow .4s var(--ez-card)}
.p-tech__card:hover{translate:0 -4px;box-shadow:0 20px 44px rgba(27,36,64,.12)}
.p-tech__thumb{aspect-ratio:16/9;display:grid;place-items:center;background:var(--pale-2);overflow:hidden}
.p-tech__thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ez-card)}
.p-tech__card:hover .p-tech__thumb img{transform:scale(1.05)}
.p-tech__noimg{display:grid;place-items:center;width:100%;height:100%;font:700 1.8rem/1 var(--font-en);letter-spacing:.24em;color:var(--white);background:var(--grad);opacity:.55}
.p-tech__body{display:flex;flex-direction:column;gap:12px;padding:22px 24px 26px;flex:1}
.p-tech__ttl{font-size:1.7rem;font-weight:700;line-height:1.6;color:var(--navy);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s}
.p-tech__card:hover .p-tech__ttl{color:var(--blue)}
.p-tech__tags{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:1.25rem;color:var(--sub)}
.p-tech__meta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:1.25rem;color:var(--sub)}
.p-tech__meta time{font:600 1.3rem/1 var(--font-en);letter-spacing:.06em;color:var(--blue)}
.p-tech__cat{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);background:var(--pale);color:var(--blue-d);font-size:1.15rem;font-weight:700}
.p-tech__empty{padding:48px 32px;border-radius:var(--r-card);background:var(--white);color:var(--sub);font-size:1.5rem;text-align:center}

/* ========== 公開ページ：記事 ========== */
.p-techpost{padding:56px 0 120px;background:var(--bg-2)}
.p-techpost .l-inner,.p-techpost__head .l-inner{width:min(1280px,100% - var(--gutter)*2)}
.p-techpost__notice{margin:0 0 24px;padding:12px 18px;border-radius:12px;background:#fdf6e3;color:#6b5314;font-size:1.4rem;font-weight:700}
.p-techpost__layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:start}
.p-techpost__main{border-radius:var(--r-card);background:var(--white);padding:56px 56px 64px;min-width:0}
.p-techpost__eyecatch{margin:-56px -56px 48px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-card) var(--r-card) 0 0}
.p-techpost__eyecatch img{width:100%;height:100%;object-fit:cover}
.p-techpost__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.p-techpost__tags a{padding:6px 14px;border-radius:var(--r-pill);background:var(--bg-2);color:var(--navy);font-size:1.3rem;font-weight:700;transition:background .25s,color .25s}
.p-techpost__tags a:hover{background:var(--navy);color:var(--white)}
.p-techpost__side{position:sticky;top:calc(var(--header-h) + 20px);display:grid;gap:20px}
.p-techpost__box{border-radius:20px;background:var(--white);padding:22px 24px}
.p-techpost__boxttl{font:700 1.3rem/1 var(--font-en);letter-spacing:.14em;color:var(--sub);margin-bottom:14px}
.p-techpost__author{display:flex;align-items:center;gap:12px;font-size:1.5rem;font-weight:700;color:var(--navy)}
.p-techpost__author i{width:40px;height:40px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-style:normal;font-size:1.5rem}
.p-techpost__toc{max-height:60vh;overflow-y:auto;font-size:1.35rem;line-height:1.6}
.p-techpost__toc li+li{margin-top:8px}
.p-techpost__toc a{color:var(--fg);display:block;transition:color .2s}
.p-techpost__toc a:hover,.p-techpost__toc a.is-active{color:var(--blue)}
.p-techpost__toc a.is-active{font-weight:700}
.p-techpost__toc .is-l2{padding-left:12px}
.p-techpost__toc .is-l3{padding-left:24px;font-size:1.25rem}
.p-techpost__share{display:flex;gap:10px}
.p-techpost__share a,.p-techpost__share button{flex:1;display:grid;place-items:center;height:40px;border-radius:10px;background:var(--bg-2);color:var(--navy);font-size:1.3rem;font-weight:700;border:0;cursor:pointer;transition:background .25s,color .25s}
.p-techpost__share a:hover,.p-techpost__share button:hover{background:var(--navy);color:var(--white)}
.p-techpost__related{margin-top:80px}
.p-techpost__relttl{font:700 2rem/1.4 var(--font-en);color:var(--navy);margin-bottom:24px}
.p-techpost__back{margin-top:56px;text-align:center}
.p-techpost__head .p-pagehead__ttl{font-size:clamp(26px,3vw,40px);line-height:1.5}

@media (max-width:1100px){
  .p-tech__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-techpost__layout{grid-template-columns:1fr}
  .p-techpost__side{position:static;grid-row:1}
  .p-techpost__toc{max-height:none}
}
@media (max-width:767px){
  .p-tech{padding:50px 0 90px}
  .p-tech__grid{grid-template-columns:1fr;gap:18px}
  .p-tech__topics{gap:8px;margin-bottom:28px}
  .p-tech__topic{padding:6px 12px;font-size:1.3rem}
  .p-techpost{padding:32px 0 80px}
  .p-techpost__main{padding:28px 20px 36px;border-radius:18px}
  .p-techpost__eyecatch{margin:-28px -20px 28px;border-radius:18px 18px 0 0}
  .p-techpost__side{grid-row:auto}
  .p-techpost__head .p-pagehead__ttl{font-size:2.4rem}
  .znc{font-size:15.5px}
  .znc pre{font-size:13px;padding:1em}
}