/* Kurose Patent, Inc. - 知財・AI実務ノート */
:root{
  --ink:#172433;
  --text:#34465a;
  --muted:#6a7888;
  --accent:#285f87;
  --line:#dbe4ea;
  --soft:#f6f9fb;
  --soft-blue:#edf4f8;
  --navy:#04182c;
  --paper:#ffffff;
  --radius:16px;
  --shadow:0 12px 30px rgba(27,49,68,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:"Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP","Meiryo",sans-serif;
  line-height:1.85;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.notes-topbar{
  background:var(--navy);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.notes-topbar-inner{
  width:min(1120px,calc(100% - 48px));
  min-height:104px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.notes-brand-main{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(24px,2.2vw,34px);
  line-height:1.15;
}
.notes-brand-sub{
  margin-top:5px;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-size:12px;
  letter-spacing:.06em;
  opacity:.86;
}
.back-home{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 15px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  white-space:nowrap;
}
.back-home:hover{background:rgba(255,255,255,.08)}
.notes-main{
  width:min(980px,calc(100% - 48px));
  margin:0 auto;
  padding:66px 0 80px;
}
.notes-kicker{
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
}
.notes-title{
  margin:8px 0 16px;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-size:clamp(34px,4vw,50px);
  line-height:1.38;
  font-weight:600;
}
.notes-intro{
  max-width:780px;
  margin:0;
  color:var(--text);
  font-size:16px;
  line-height:1.9;
}
.category-filter{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:38px 0 34px;
  padding:0;
}
.category-button{
  appearance:none;
  border:1px solid #bfd0dc;
  border-radius:999px;
  padding:9px 16px;
  background:#fff;
  color:#31495d;
  font:inherit;
  font-size:13px;
  cursor:pointer;
}
.category-button:hover{background:#f5f9fb}
.category-button.is-active{
  background:#285f87;
  border-color:#285f87;
  color:#fff;
}
.article-list{
  border-top:1px solid var(--line);
}
.article-card{
  display:block;
  padding:28px 4px 30px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
}
.article-card:hover .article-title{color:var(--accent)}
.article-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:9px;
  color:var(--muted);
  font-size:12px;
}
.article-category{
  display:inline-flex;
  align-items:center;
  padding:3px 9px;
  border-radius:999px;
  background:var(--soft-blue);
  color:#365d78;
  font-weight:700;
}
.unread-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  background:#fff0f0;
  color:#b33333;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}
.article-title{
  margin:0 0 9px;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-size:clamp(21px,2.4vw,28px);
  line-height:1.55;
  font-weight:600;
  transition:color .16s ease;
}
.article-summary{
  margin:0;
  color:var(--text);
  font-size:14px;
  line-height:1.85;
}
.read-more{
  display:inline-block;
  margin-top:10px;
  color:var(--accent);
  font-size:13px;
  font-weight:700;
}
.empty-note{
  margin:0;
  padding:42px 4px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:14px;
}
.notes-footer{
  width:min(980px,calc(100% - 48px));
  margin:0 auto;
  padding:26px 0 42px;
  border-top:1px solid var(--line);
  color:#74808e;
  font-size:12px;
  display:flex;
  justify-content:space-between;
  gap:20px;
}

/* Article pages */
.article-shell{
  width:min(820px,calc(100% - 48px));
  margin:0 auto;
  padding:54px 0 76px;
}
.breadcrumbs{
  margin-bottom:34px;
  color:var(--muted);
  font-size:12px;
}
.breadcrumbs a{color:var(--accent);text-decoration:none}
.article-page-title{
  margin:0 0 14px;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-size:clamp(32px,4vw,48px);
  line-height:1.45;
  font-weight:600;
}
.article-page-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
  margin-bottom:38px;
}
.article-body{
  color:#26394b;
  font-size:16px;
  line-height:2;
}
.article-body p{margin:0 0 1.45em}
.article-body h2{
  margin:2.35em 0 .8em;
  padding-bottom:.42em;
  border-bottom:1px solid var(--line);
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-size:27px;
  line-height:1.5;
  font-weight:600;
}
.article-body h3{
  margin:1.9em 0 .65em;
  font-size:20px;
  line-height:1.55;
}
.article-body ul,.article-body ol{padding-left:1.5em;margin:0 0 1.5em}
.article-body blockquote{
  margin:1.6em 0;
  padding:16px 20px;
  border-left:4px solid #8aabc0;
  background:#f7fafc;
}
.article-body table{
  width:100%;
  border-collapse:collapse;
  margin:1.7em 0;
  font-size:14px;
}
.article-body th,.article-body td{
  border:1px solid var(--line);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}
.article-body th{background:var(--soft-blue)}
.article-nav{
  margin-top:54px;
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.article-nav a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 15px;
  border:1px solid #bfd0dc;
  border-radius:999px;
  color:#35566f;
  text-decoration:none;
  font-size:13px;
}
.article-nav a:hover{background:#f5f9fb}

@media(max-width:720px){
  .notes-topbar-inner{
    width:min(100% - 36px,1120px);
    min-height:0;
    padding:20px 0;
    display:block;
  }
  .back-home{margin-top:16px}
  .notes-main,.article-shell,.notes-footer{width:calc(100% - 36px)}
  .notes-main{padding:46px 0 60px}
  .category-filter{gap:8px;margin-top:30px}
  .category-button{padding:8px 12px;font-size:12px}
  .article-card{padding:24px 2px 26px}
  .notes-footer{display:block}
  .notes-footer div+div{margin-top:5px}
  .article-body{font-size:15.5px}
  .article-body h2{font-size:23px}
}