/* iXam main.css — unified (2025-08-23, tool-surface elevated) */

/* ---------- Design Tokens ---------- */
:root{
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --bg:#ffffff;
  --text:#0b1220;
  --muted:#556175;
  --border:#e5e7eb;
  --card:#ffffff;

  --accent:#16a34a;
  --accent-hover:#15803d;
  --accent-soft:#e6f6ec;
  --ring:#22c55e;

  --link: var(--accent);
  --link-hover: var(--accent-hover);
  --link-visited:#0f766e;

  --radius: 12px;
  --radius-lg: 16px;

  /* base shadows */
  --shadow: 0 2px 10px rgba(0,0,0,.06);
  --shadow-hover: 0 8px 24px rgba(0,0,0,.10);

  /* elevated surface for tools */
  --tool-shadow: 0 10px 30px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
  --tool-border: color-mix(in srgb, var(--accent) 22%, var(--border));

  --page-pad: clamp(14px, 5vw, 56px);
  --header-h: 60px;
  --col-gap: 18px;
  --sidebar-w: 300px;

  --fs-h1: clamp(1.9rem, 2.8vw + 1rem, 2.6rem);
  --fs-h2: clamp(1.35rem, 1.4vw + .85rem, 1.8rem);
  --fs-h3: clamp(1.15rem, 1vw + .7rem, 1.35rem);
  --fs-p: 1rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --text:#e5e7eb;
    --muted:#9aa4b2;
    --border:#1f2937;
    --card:#0f172a;

    --accent:#22c55e;
    --accent-hover:#34d399;
    --accent-soft:#0f2316;
    --ring:#34d399;

    --link: var(--accent);
    --link-hover: var(--accent-hover);
    --link-visited:#2dd4bf;

    /* 通常影は抑える（ツールは個別指定） */
    --shadow:none;
    --shadow-hover:none;

    /* ダーク時ツール境界を少し強める */
    --tool-border: color-mix(in srgb, var(--accent) 28%, var(--border));
    --tool-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--border));
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; color-scheme: light dark; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); line-height:1.75;
  font-size: clamp(15px, 1.2vw + .4rem, 18px);
  letter-spacing:.02em;
  padding-bottom: 60px;
}
img,svg,video,canvas{ max-inline-size:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:.095em; }
a:hover{ color:var(--link-hover); text-decoration-thickness:.12em; }
a:visited{ color:var(--link-visited); }
:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:8px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* ---------- Containers & Layout ---------- */
.container{ padding-inline: var(--page-pad); margin-inline: 5vw; }
main{ padding-block: clamp(16px, 2.5vw, 28px); }

.grid{ display:grid; gap: var(--col-gap); }
.grid-autofit{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; gap:12px; min-height: var(--header-h); }
.brand{ color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.02em; font-size: clamp(18px,1.4rem,22px); }
.site-header nav{ margin-left:8px; display:flex; gap:6px; flex-wrap:wrap; }
.site-header nav a{ text-decoration:none; color:var(--muted); padding:8px 10px; border-radius:8px; }
.site-header nav a:hover{ background: color-mix(in srgb, var(--accent) 10%, transparent); color:var(--text); }
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, color-mix(in oklab, var(--accent) 38%, transparent) 0%, color-mix(in oklab, var(--ring) 60%, transparent) 50%, color-mix(in oklab, var(--accent) 38%, transparent) 100%);
  background-size:200% 100%; animation:headerflow 9s linear infinite; opacity:.75;
}
@keyframes headerflow{ to{ background-position:200% 0; } }
@media (prefers-reduced-motion: reduce){ .site-header::after{ animation:none; } }

/* Header search */
.site-search{ margin-left:auto; position:relative; min-width:0; }
.site-search input{
  width: clamp(160px, 24vw, 280px);
  padding: 8px 10px; border-radius: 10px; border:1px solid var(--border);
  background: var(--card); color: var(--text);
}
.site-search input::placeholder{ color: color-mix(in srgb, var(--muted) 85%, transparent); }
.search-results{
  position:absolute; top: calc(100% + 8px); right:0; z-index:60; width: clamp(240px, 48vw, 560px);
  max-width: calc(100vw - (var(--page-pad)*2) - 8px);
  background: var(--card); border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow-hover);
  max-height: 60vh; overflow:auto;
}
.search-item{ display:block; padding:10px 12px; color:inherit; text-decoration:none; border-bottom:1px solid var(--border); }
.search-item:hover{ background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.search-title{ font-weight:650; }
.search-meta{ color:var(--muted); font-size:.9em; margin-top:2px; display:flex; gap:.4rem; flex-wrap:wrap; }
.search-desc{ color:var(--muted); font-size:.95em; margin-top:4px; word-break:break-word; }
.chip{ display:inline-block; font-size:.75rem; padding:.15rem .5rem; border:1px solid var(--border); border-radius:999px; }
.chip-tag{ background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); color: color-mix(in srgb, var(--accent) 50%, black); }
.search-empty{ padding:12px; color:var(--muted); }

/* Sidebar + Content */
.layout-with-sidebar{ display:grid; grid-template-columns: minmax(0, 1fr); gap: var(--col-gap); align-items:start; }
.sidebar{ order:2; }
.content-area{ order:1; }
@media (min-width: 980px){
  .layout-with-sidebar{ grid-template-columns: minmax(0, 1fr) minmax(240px, var(--sidebar-w)); }
  .content-area{ order:1; }
  .sidebar{ order:2; position: static; top:auto; height:auto; }
}

/* Sidebar blocks */
.side-block{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom:12px; box-shadow: var(--shadow); }
.side-title{ margin:.2rem 0 .6rem; font-size:1rem; color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
.side-list{ list-style:none; margin:0; padding:0; }
.side-list li{ display:flex; align-items:center; justify-content:space-between; padding:.35rem .25rem; gap:.5rem; }
.side-list a{ text-decoration:none; }
.count{ color:var(--muted); font-size:.9em; }
.muted{ color:var(--muted); }

/* Tag cloud */
.tag-cloud{ display:flex; flex-wrap:wrap; gap:.45rem .55rem; }
.tag-cloud .tag{
  font-size: clamp(.90rem, calc(.90rem + .50rem * var(--w, 1)), 1.45rem);
  line-height: 1.35;
  display: inline-block;
  padding: .15rem .55rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  color: var(--link); text-decoration: none;
}
.tag-cloud .tag:hover{ background: color-mix(in srgb, var(--accent) 14%, var(--card)); }

/* Sidebar select */
.sidebar-select{
  appearance: none;
  width:100%; padding:.55rem .9rem; padding-right:2.2rem;
  border:1px solid var(--border); border-radius:10px; background:var(--card) no-repeat right .65rem center / 1rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%239ca3af' d='M5.5 7.5l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E");
  color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.sidebar-select:hover{ border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.sidebar-select:focus{ outline:none; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.sidebar-select::-ms-expand{ display:none; }

/* Post / Cards */
.post{
  background:var(--card); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(18px, 2.6vw, 32px); box-shadow: var(--shadow);
}
.post .meta, .post-date{ color:var(--muted); font-size:.95em; }
.post-title, .post > h1{ font-size: var(--fs-h1); line-height:1.25; margin-block: .2rem .6rem; }
.post-content{ overflow-wrap:anywhere; }
.post-content img{ border-radius:12px; border:1px solid var(--border); box-shadow:0 1px 10px rgba(0,0,0,.05); }

.post-tags, .post-categories{ display:flex; flex-wrap:wrap; gap:6px; margin:.4rem 0; }
.post-tags a, .post-categories a{
  text-decoration:none; font-size:.85rem; padding:.15rem .5rem; border-radius:999px;
  border:1px solid var(--border); background: var(--accent-soft);
}

/* Lists */
.post-list{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.post-list > li{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.post-list > li:hover{ transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.post-list a{ text-decoration:none; }
.post-list .date{ color:var(--muted); font-size:.9em; margin-left:.5rem; }
.post-list .desc{ color:var(--muted); margin-top:.3rem; font-size:.95em; }

/* Typography */
h1,h2,h3,h4{ line-height:1.25; letter-spacing:.02em; }
h1{ font-size: var(--fs-h1); margin-block:1.2em .5em; }
h2{ font-size: var(--fs-h2); margin-block:1.2em .5em; }
h3{ font-size: var(--fs-h3); margin-block:1em .5em; }
p{ font-size: var(--fs-p); margin-block:.9em; text-wrap:pretty; }
ul,ol{ padding-inline-start:1.2em; margin-block:.8em; }
blockquote{
  margin:1.2rem 0; padding:.9rem 1rem; border-inline-start:4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--card)); border-radius: var(--radius);
  color: var(--muted);
}
code,kbd,pre,samp{ font-family:var(--font-mono); }
code{
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  border:1px solid var(--border); border-radius:8px; padding:.12em .44em; font-size:.95em; word-break:break-word;
}
pre{ background:#0b1020; color:#e2e8f0; border-radius:14px; padding:1rem 1.2rem; overflow:auto; }
pre code{ background:transparent; border:0; padding:0; color:inherit; white-space:pre; }

/* Copy button (for code blocks) */
.copy-btn{
  position:absolute; right:14px; top:10px; padding:.25rem .6rem; border-radius:8px;
  border:1px solid var(--border); background: var(--card); color: var(--text); cursor:pointer;
}
.copy-btn:hover{ background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.copy-btn.copied{ background: var(--accent); color:#fff; border-color: transparent; }

/* Tables */
table{ width:100%; border-collapse:collapse; margin-block:1.2rem; font-size:.95em; display:block; overflow-x:auto; }
th,td{ border:1px solid var(--border); padding:.65rem .75rem; }
th{ background: color-mix(in srgb, var(--accent) 6%, var(--card)); text-align:left; }

/* Forms */
label{ font-weight:600; }
.input, select, .textarea, input[type="text"], input[type="search"], input[type="number"], input[type="color"], textarea{
  font: inherit; color: var(--text); background: var(--card);
  border:1px solid var(--border); border-radius:10px; padding:.5rem .6rem;
}
.textarea, textarea{ width:100%; resize:vertical; min-height: 8rem; }
input::placeholder, textarea::placeholder{ color: color-mix(in srgb, var(--muted) 85%, transparent); }
input:focus, select:focus, textarea:focus{ outline:2px solid var(--ring); outline-offset:2px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  padding:.48rem .7rem; border-radius:10px;

  /* 境界を少し強めて背景もわずかに着色（白地で溶けない） */
  border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  color: var(--text);

  text-decoration:none; cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
}
.btn:active{ transform:none; }
.btn-primary{ background: var(--accent); color:#fff; border-color: transparent; }
.btn-primary:hover{ background: var(--accent-hover); box-shadow: var(--shadow-hover); }

/* Utilities */
.stack-xs{ margin-top:.25rem; }
.stack-sm{ margin-top:.5rem; }
.stack-md{ margin-top:1rem; }
.stack-lg{ margin-top:1.25rem; }
.spacer{ flex:1 1 auto; }

/* ================================
   Tool surface & in-tool UI
   ================================ */

/* “文章と違う箱”としての主役: 少し大きめの影 + 彩度低めの縁取り + 余白 */
.tool-wrap.tool-surface{
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--card) 96%, transparent) 0%,
      var(--card) 100%);
  border:1px solid var(--tool-border);
  border-radius:14px;
  padding: clamp(16px, 2.2vw, 22px);
  box-shadow: var(--tool-shadow);
  margin-block: 0.6rem 1.2rem; /* 上下の文章から少し離す */
}

/* 薄い内側ラインで面を締める（ダークでも沈まない） */
.tool-wrap.tool-surface::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 50%, transparent);
  opacity:.6;
}

/* ツール内の共通UI（他ページへ影響しないようツリー限定） */
.tool-wrap .card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  box-shadow: var(--shadow);
}
.tool-wrap .controls{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tool-wrap .field-inline{ display:flex; flex-direction:column; gap:.25rem; min-width:min(260px, 100%); }
.tool-wrap .label{ font-weight:600; }
.tool-wrap .segmented{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.tool-wrap .segmented input{ position:absolute; inset:auto; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
.tool-wrap .segmented label{
  padding:.45rem .7rem; cursor:pointer; user-select:none;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border-right:1px solid var(--border);
}
.tool-wrap .segmented label:last-of-type{ border-right:0; }
.tool-wrap .segmented input:checked + label{
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  color: var(--text);
}

/* 小さめ数字入力は横幅を詰める */
.tool-wrap .input-num{ max-width: 7.5rem; }

/* Status */
.status{ color:var(--muted); }
.status.ok{ color: var(--accent); }
.status.err{ color: #dc2626; }

/* Footer */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
  z-index: 40;
}
.site-footer .container {
  padding-block: 12px;
  color: var(--muted);
  font-size: .95em;
  text-align: center;
}
.site-footer a{ text-decoration:underline; }

/* Link underline animation */
.post .post-content a:not(.brand), .post-list a, .site-header nav a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%;
  background-size:0% .08em; transition:background-size .22s ease;
  text-decoration:none; border-radius:2px;
}
.post .post-content a:not(.brand):hover, .post-list a:hover, .site-header nav a:hover{ background-size:100% .08em; }

/* Mobile tweaks */
@media (max-width: 520px){
  .site-search input{ width: 52vw; }
  .brand{ font-size: 1.1rem; }
  .post{ padding: 16px; }
  .post-title{ font-size: clamp(1.5rem, 6vw, 2rem); }
  .container{ margin-inline: 3.5vw; }
}

/* Scrollbar (optional) */
@media (pointer: fine){
  *{ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 30%, transparent) transparent; }
  *::-webkit-scrollbar{ height:10px; width:10px; }
  *::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--accent) 30%, #9ca3af); border-radius: 10px; }
  *::-webkit-scrollbar-track{ background: transparent; }
}

/* Sidebar: Links — first block shows sr-only inline links as chips */
.sidebar > .side-block:first-child > .sr-only{
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: .35rem 0 0 !important;
  overflow: visible !important;
  clip: auto !important;
  display: block !important;
  white-space: normal;
}
.sidebar > .side-block:first-child > .sr-only a{
  display: inline-block;
  margin: 0 .25rem .25rem 0;
  padding: .15rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  color: var(--link);
  text-decoration: none;
  line-height: 1.35;
}
.sidebar > .side-block:first-child > .sr-only a:hover{
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

/* Tools listing (tools.html) */
.page-title{ font-size: 1.6rem; margin:.25rem 0 .75rem; }
.filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:.25rem 0 1rem; }
.filters .field{ display:flex; align-items:center; gap:.4rem; border:1px solid var(--border); padding:.35rem .6rem; border-radius:999px; }
.filters #filter-clear{ padding:.35rem .6rem; border:1px solid var(--border); border-radius:8px; background:transparent; }
.tool-groups{ display:grid; gap:24px; }
.tool-group > h2{ font-size:1.1rem; margin:.25rem 0 .5rem; }
.tool-group .grid{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.tool-card{
  display:block; border:1px solid var(--border); border-radius:12px; padding:16px; text-decoration:none; background:var(--card);
  transition: transform .16s ease, box-shadow .16s ease;
}
.tool-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.tool-card h3{ margin:.5rem 0 0; font-size:1.05rem; color:var(--text); }
.tool-card p{ margin:.4rem 0 0; color:var(--muted); font-size:.95rem; }
.post .post-content > :first-child { margin-top: 0; }

/* 記事本文先頭が h1 なら .post-title とリズムを合わせる */
.post .post-content > h1:first-child {
  font-size: var(--fs-h1);
  line-height: 1.25;
  margin-block: .2rem .6rem;
}