:root {
  --bg: #171a20;
  --sidebar: #20252e;
  --sidebar-deep: #1b2028;
  --panel: #1c212a;
  --line: #38404c;
  --text: #c3c9ea;
  --text-strong: #eef0ff;
  --muted: #858d9e;
  --blue: #8b72ff;
  --tag: #343b46;
  --soft-white: #f4f4f4;
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  color: var(--text);
  font-family: var(--sans);
  font-synthesis: none;
  line-height: 1.7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }

.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; background: var(--blue); color: #fff; }
.skip-link:focus { top: 1rem; }
.site-layout { min-height: 100vh; }
.site-sidebar { position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: 330px; overflow-y: auto; padding: 72px 42px 52px; background: var(--sidebar); color: var(--text-strong); scrollbar-width: thin; scrollbar-color: #6c6c6c transparent; }
.site-main { min-height: 100vh; margin-left: 330px; background: var(--bg); }
.main-inner { width: min(1450px, calc(100% - 128px)); margin: 0 auto; padding: 92px 0 100px; }

.gihyo-logo { display: inline-flex; align-items: center; gap: 18px; color: #f3f3f3; font-family: Arial, sans-serif; font-size: 3rem; font-weight: 300; letter-spacing: -.08em; line-height: 1; }
.gihyo-logo > span:last-child { font-size: 0; }
.gihyo-logo > span:last-child::after { content: "stacknote"; font-size: 3rem; letter-spacing: -.08em; }
.logo-mark { position: relative; display: inline-block; width: 43px; height: 43px; border: 2px solid var(--blue); border-radius: 11px 11px 5px 11px; background: var(--sidebar-deep); box-shadow: 6px 6px 0 rgba(139, 114, 255, .26); }
.logo-mark::before { position: absolute; top: 11px; left: 10px; width: 21px; height: 3px; border-radius: 2px; background: var(--blue); content: ""; box-shadow: 0 8px 0 rgba(139, 114, 255, .75), 0 16px 0 rgba(139, 114, 255, .43); }
.logo-mark::after { position: absolute; right: 7px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: #e4e0ff; content: ""; }
.sidebar-title { margin: 72px 0 17px; color: #f0eef0; font-size: 1.18rem; font-weight: 800; letter-spacing: .02em; }
.sidebar-search { position: relative; }
.sidebar-search input { width: 100%; padding: 8px 46px 13px 0; border: 0; border-bottom: 2px solid #848484; outline: 0; background: transparent; color: #fff; font-size: 1rem; }
.sidebar-search input::placeholder { color: #888; }
.sidebar-search input:focus { border-color: var(--blue); }
.search-submit { position: absolute; right: 1px; bottom: 10px; width: 33px; height: 33px; border: 0; background: transparent; color: #a2a2a2; }
.search-submit::before { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border: 4px solid currentColor; border-radius: 50%; content: ""; }
.search-submit::after { position: absolute; right: 1px; bottom: 2px; width: 14px; height: 4px; background: currentColor; content: ""; transform: rotate(45deg); transform-origin: right center; }
.sidebar-nav ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.sidebar-nav a { display: inline-block; color: #d1cefa; font-size: 1.05rem; line-height: 1.45; }
.sidebar-nav a:hover, .sidebar-nav a.active { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.sidebar-footer-links { margin-top: 70px; }
.sidebar-footer-links .sidebar-title { margin-top: 0; }
.sidebar-note { margin-top: 65px; color: #c7c4da; font-size: .9rem; }
.menu-toggle { display: none; }

.main-grid { display: block; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 48px; }
.section-head h1, .section-head h2 { margin: 0; color: var(--text-strong); font-size: 1.65rem; font-weight: 800; letter-spacing: .03em; }
.section-head p { margin: 0; color: #908f99; font-size: .8rem; }
.feed { border-top: 1px solid var(--line); }
.feed-item { display: grid; grid-template-columns: minmax(250px, 42%) minmax(0, 1fr) 68px; gap: 30px; padding: 32px 0 38px; border-bottom: 1px dashed #5a5a5a; }
.feed-item:hover .feed-title { color: #f1efff; }
.feed-thumb { position: relative; display: grid; place-items: center; min-height: 220px; overflow: hidden; border-radius: 4px; color: #1b1b1b; }
.feed-thumb > span { position: relative; z-index: 2; display: block; text-align: center; }
.thumb-blender { background: #6ac3c4; }
.thumb-blender::before { position: absolute; width: 82%; height: 74%; border-radius: 46% 54% 49% 51% / 45% 43% 57% 55%; background: #f8efe0; content: ""; }
.thumb-blender::after { position: absolute; right: 14%; top: 25%; width: 48px; height: 48px; border: 3px solid #3d342a; border-radius: 50%; background: #e8cba4; content: ""; box-shadow: 24px 11px 0 -14px #3d342a; }
.thumb-blender span { padding: 8px 13px; background: #fff; font-size: clamp(1rem, 1.6vw, 1.4rem); font-weight: 800; letter-spacing: .08em; }
.thumb-blender span::after { position: absolute; right: 0; bottom: -8px; width: 100%; height: 6px; background: #ec8a17; content: ""; }
.thumb-ubuntu { background: #a7ce96; }
.thumb-ubuntu::before { position: absolute; left: -23%; bottom: -28%; width: 65%; height: 125%; border: 28px solid rgba(67, 126, 91, .15); border-radius: 50%; content: ""; }
.thumb-ubuntu span { color: #fff; font-size: clamp(2.7rem, 5vw, 5rem); font-weight: 300; letter-spacing: -.08em; line-height: .9; text-align: center; }
.thumb-ubuntu span::after { display: block; margin-top: 14px; font-size: .42em; font-weight: 500; letter-spacing: .02em; content: "Weekly Topics"; }
.thumb-kernel { background: linear-gradient(135deg, #fd4e57 0%, #f23748 100%); }
.thumb-kernel::before { position: absolute; width: 60%; height: 115%; border: 9px solid rgba(255, 218, 222, .35); content: ""; transform: rotate(33deg); }
.thumb-kernel span { color: #fff; font-size: clamp(2.3rem, 4.5vw, 4.5rem); font-weight: 900; letter-spacing: -.09em; line-height: .9; }
.thumb-kernel span::after { display: block; margin-top: 5px; font-size: .34em; letter-spacing: .1em; content: "コンテナ入門"; }
.thumb-android { background: #f7f7f7; }
.thumb-android::before { position: absolute; top: 24%; width: 68%; height: 42%; border-radius: 45% 45% 8% 8%; background: #7dc550; content: ""; }
.thumb-android::after { position: absolute; top: 15%; width: 8px; height: 34px; background: #7dc550; box-shadow: 94px 0 0 #7dc550; content: ""; transform: rotate(30deg); }
.thumb-android span { margin-top: 70px; color: #111; font-family: Arial, sans-serif; font-size: clamp(1.45rem, 2.8vw, 3rem); font-weight: 800; letter-spacing: -.08em; }
.thumb-android span::after { display: block; color: #111; font-size: .36em; letter-spacing: 0; content: "Weekly Topics"; }
.thumb-flow { background: #7660e6; }
.thumb-flow::before, .thumb-flow::after { position: absolute; width: 130%; height: 2px; background: rgba(255,255,255,.45); content: ""; transform: rotate(-31deg); }
.thumb-flow::after { transform: rotate(31deg); }
.thumb-flow span { width: 74%; padding: 19px; border: 2px solid #fff; color: #fff; font-size: 1.4rem; font-weight: 800; line-height: 1.15; }
.thumb-flow span::after { display: block; margin-top: 8px; color: #e8e4ff; font-size: .62em; content: "Agents / Workflows"; }
.thumb-security { justify-content: flex-end; padding-right: 9%; background: #202b3c; }
.thumb-security::before { position: absolute; top: 50%; left: 11%; width: 78px; height: 96px; border: 4px solid #a895ff; border-radius: 12px 12px 24px 24px; content: ""; transform: translateY(-50%); }
.thumb-security::after { position: absolute; top: 50%; left: calc(11% + 26px); width: 32px; height: 32px; border: 4px solid #e8e3ff; border-radius: 50%; content: ""; box-shadow: 0 18px 0 -10px #e8e3ff; transform: translateY(-50%); }
.thumb-security span { width: 46%; color: #eeeaff; font-size: 1.22rem; font-weight: 800; line-height: 1.15; text-align: left; }
.thumb-browser { background: #f09c48; }
.thumb-browser::before { width: 65%; height: 65%; border: 3px solid #303030; border-radius: 50%; content: ""; }
.thumb-browser::after { position: absolute; width: 95%; height: 2px; background: #303030; content: ""; transform: rotate(-45deg); }
.thumb-browser span { color: #303030; font-size: 1.55rem; font-weight: 900; }

.feed-title { margin: 4px 0 19px; color: var(--text); font-size: clamp(1.2rem, 1.8vw, 1.85rem); font-weight: 800; line-height: 1.35; letter-spacing: -.04em; transition: color .15s; }
.feed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; color: #c1becc; font-size: .95rem; }
.feed-meta .tag { display: inline-block; padding: 5px 13px 6px; border-radius: 4px; background: var(--tag); color: #dad8dd; font-size: .87rem; line-height: 1.2; }
.feed-author { margin-top: 17px; color: #b8b5c4; font-size: 1rem; }
.feed-stats { align-self: end; color: #b1afb7; font-size: 1.05rem; white-space: nowrap; text-align: right; }
.stats-lightbulb { position: relative; display: inline-block; width: 19px; height: 21px; margin-left: 5px; vertical-align: -4px; border: 3px solid #aaa; border-radius: 50% 50% 45% 45%; }
.stats-lightbulb::after { position: absolute; right: 2px; bottom: -7px; left: 2px; height: 4px; border-block: 2px solid #aaa; content: ""; }


.news-section { margin-top: 88px; }
.news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 45px; border-top: 1px solid var(--line); }
.news-item { display: grid; grid-template-columns: 1fr 150px; gap: 22px; padding: 29px 0 34px; border-bottom: 1px dashed #5a5a5a; }
.news-item .feed-title { font-size: 1.22rem; }
.news-item .feed-thumb { min-height: 112px; }
.page-intro { margin-bottom: 48px; }
.page-intro h1 { margin: 0; color: var(--text-strong); font-size: 2rem; font-weight: 800; }
.page-intro p { max-width: 700px; margin: 12px 0 0; color: var(--muted); }
.article-detail { max-width: 950px; }
.article-detail .feed-title { font-size: clamp(2rem, 4vw, 3.8rem); }
.article-hero-thumb { max-width: 850px; min-height: 350px; margin: 35px 0 45px; }
.article-body { max-width: 790px; color: #c6c3d0; font-size: 1.02rem; line-height: 2; }
.article-body h2 { margin: 52px 0 14px; color: var(--text-strong); font-size: 1.65rem; }
.article-body p { margin: 0 0 23px; }
.article-body blockquote { margin: 32px 0; padding: 20px 24px; border-left: 4px solid var(--blue); background: #222731; color: #e0ddfb; }
.article-body code { padding: 2px 5px; background: #454545; color: #b3ddff; }
.article-body pre { overflow-x: auto; margin: 24px 0; padding: 18px 20px; border: 1px solid #3d4653; border-radius: 4px; background: #11151c; color: #ccd3f4; font-size: .82rem; line-height: 1.65; }
.article-body .mermaid { display: grid; min-height: 470px; place-items: center; overflow: auto; margin: 38px 0 18px; padding: 28px 18px; border: 1px solid #3e4857; border-radius: 5px; background: #11151c; }
.article-body .mermaid svg { max-width: 100%; height: auto; }
.article-body .mermaid .actor, .article-body .mermaid .messageText, .article-body .mermaid .noteText { font-family: var(--sans) !important; }
.article-body .callout { margin: 32px 0; padding: 20px 23px; border: 1px solid #6358a9; border-left: 4px solid var(--blue); background: #202032; color: #e1defd; }
.article-body .callout strong { display: block; margin-bottom: 8px; color: #b9aaff; }
.article-body .attack-table { width: 100%; margin: 28px 0 36px; border-collapse: collapse; font-size: .88rem; }
.article-body .attack-table th, .article-body .attack-table td { padding: 12px 14px; border: 1px solid #3d4653; text-align: left; vertical-align: top; }
.article-body .attack-table th { width: 28%; background: #202630; color: #dedbfa; font-weight: 700; }
.article-body .attack-table td { color: #bfc3d3; }
.share-row { display: flex; gap: 10px; margin-top: 38px; }
.share-button { padding: 9px 15px; border: 1px solid #6d6b75; border-radius: 3px; background: transparent; color: #d8d4f4; }
.share-button:hover { border-color: var(--blue); color: #fff; }

.toast { position: fixed; right: 25px; bottom: 25px; z-index: 30; padding: 13px 17px; border: 1px solid #8fcff7; border-radius: 3px; background: #202b3b; color: #fff; font-size: .85rem; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.site-footer { margin-left: 330px; padding: 28px 64px 38px; border-top: 1px solid var(--line); background: #12151a; color: #858d9e; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 1450px; margin: 0 auto; }
.footer-brand { color: #d2d0dc; font-size: 0; }
.footer-brand::after { content: "stacknote / static edition"; font-size: .95rem; }
.footer-copy { margin: 5px 0 0; font-size: .72rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: .75rem; }
.footer-links a:hover { color: #fff; }

@media (max-width: 1180px) {
  .site-sidebar { width: 280px; padding-inline: 30px; }
  .site-main, .site-footer { margin-left: 280px; }
  .main-inner { width: min(100% - 70px, 930px); }
  .main-grid { grid-template-columns: minmax(0, 1fr) 220px; gap: 36px; }
  .feed-item { grid-template-columns: 38% minmax(0, 1fr) 52px; gap: 18px; }
  .feed-thumb { min-height: 165px; }
  .feed-title { font-size: 1.2rem; }
  .feed-author { font-size: .85rem; }
}

@media (max-width: 860px) {
  .site-sidebar { position: relative; width: 100%; min-height: auto; padding: 25px 24px; }
  .site-main, .site-footer { margin-left: 0; }
  .site-sidebar .sidebar-content { display: none; padding-top: 18px; }
  .site-sidebar.open .sidebar-content { display: block; }
  .gihyo-logo { font-size: 2.25rem; }
  .gihyo-logo > span:last-child::after { font-size: 2.25rem; }
  .logo-mark { width: 34px; height: 34px; border-width: 2px; border-radius: 9px 9px 4px 9px; }
  .logo-mark::before { top: 8px; left: 8px; width: 16px; height: 2px; box-shadow: 0 6px 0 rgba(139, 114, 255, .75), 0 12px 0 rgba(139, 114, 255, .43); }
  .logo-mark::after { right: 5px; bottom: 5px; width: 4px; height: 4px; }
  .menu-toggle { position: absolute; top: 24px; right: 24px; display: block; padding: 8px 13px; border: 1px solid #8c8a97; border-radius: 3px; background: transparent; color: #f1efff; }
  .sidebar-title { margin-top: 31px; }
  .main-inner { width: min(100% - 44px, 720px); padding-top: 48px; }
  .main-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .site-footer { padding-inline: 22px; }
}

@media (max-width: 570px) {
  .main-inner { width: calc(100% - 28px); padding-bottom: 60px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 4px; margin-bottom: 28px; }
  .feed-item { grid-template-columns: 1fr; gap: 16px; padding: 24px 0 29px; }
  .feed-thumb { min-height: 180px; }
  .feed-stats { align-self: start; text-align: left; }
  .news-item { grid-template-columns: 1fr 105px; gap: 14px; }
  .news-item .feed-title { font-size: 1rem; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
  .article-hero-thumb { min-height: 230px; }
}