/* --------------------------------------------------
   style.css — v3 直式大字版（“自大一點”）
   不改 HTML：針對 <h1>、<details>/<summary>、<a> 直向分區樣式
   -------------------------------------------------- */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap');

:root{
  --bg:#fff;
  --ink:#101010;
  --muted:#b7b7b7;        /* hairline / icons */
  --accent:#111;          /* big triangles / text */
  --line:#e8e8e8;         /* separators */
  --indent:22px;          /* nested indentation */
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0c0e; --ink:#f0f1f3; --muted:#8a8f98; --accent:#f6f6f6; --line:#24272c; }
}

/* Base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  line-height:1.75; letter-spacing:.01em;
  padding: clamp(18px, 2.5vw, 28px);
}

/* 版面寬度：靠左直排、右上角大標 */
body>h1, body>details{ max-width: 960px;}

/* Title 右上角對齊、粗黑大字 */
h1{
  text-align:center;
  font-weight:900;
  font-size: clamp(2.1rem, 2.2rem + 1.4vw, 3rem);
  margin: 8px auto 12px;
  letter-spacing:.015em;
}

/* 主體：用左側髮絲線作為視覺導軌 */
body>details{
  padding-left: 18px;
}

/* 第二層之後以虛線細化，維持“縱向”感 */
details details{ border-left: 2px dashed var(--muted); padding-left: var(--indent); margin-left: 2px; }

/* Summary 變成超大行標 — 直觀可點擊 */
summary{
  list-style:none; cursor:pointer; user-select:none; outline:none;
  display:flex; align-items:center; gap:10px;
  padding: 10px 0 6px; margin: 6px 0;
  font-weight:900;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.8rem);
}
summary::-webkit-details-marker{ display:none; }

/* 自訂三角符號（更大、更“自大”） */
summary::before{
  content:''; flex:0 0 auto; width: 0; height:0;
  border-style: solid;
  border-width: 10px 0 10px 14px;            /* ▶ */
  border-color: transparent transparent transparent var(--accent);
  filter: drop-shadow(0 0 0 var(--accent));
  transform: translateY(1px) rotate(0deg);
  transition: transform .18s ease;
}

details[open] > summary::before{ transform: translateY(1px) rotate(90deg); }

/* 連結：直排、粗度 700、字距舒展；hover 有底線 */
details > a{
  display:block;
  font-weight:700;
  font-size: clamp(1rem, .98rem + .25vw, 1.15rem);
  color:var(--ink); text-decoration:none;
  padding: 4px 0; margin: 4px 0 4px 28px;
  position:relative;
}

/* 左側微型導引點（•）使列表更直覺 */
details > a::before{
  content:''; position:absolute; left:-16px; top: .78em;
  width:6px; height:6px; border-radius:50%;
  background: var(--muted);
}

details > a:hover{ text-decoration: underline; }

details > a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* 間距控制：開合時下方留白，讓縱向節奏更清晰 */
details[open]{ margin-bottom: 10px; }

/* 細節線條：段落之間的空氣感 */
hr{ border:0; border-top:1px solid var(--line); margin: 16px 0; }

/* 選取色 */
::selection{ background: rgba(17,17,17,.08); }
@media (prefers-color-scheme: dark){ ::selection{ background: rgba(255,255,255,.12); } }

/* 列印：保留結構與直排節奏 */
@media print{
  body{ background:#fff; }
  body>details{ border-color:#000; }
  details details{ border-color:#666; }
  a{ text-decoration: underline; }
}