/* d-t-it — one statement, an index of six tools, notes in the margin.
   Layout is CSS only: each index row is a grid [entry | leader | note], so a note
   always sits beside its own line and the dotted leader fills whatever is left.
   Below 1280px the row stacks: entry, then note; the leader disappears. */

:root{
  --bg:#f1f1ee;
  --ink:#171716;
  --ink-2:#67665f;
  --ink-3:#9a9891;
  --rule:#cfcec7;
  --link:#d6d5ce;
  --dot:#a9a8a1;
  --serif:"Source Serif 4","Noto Serif KR","Apple SD Gothic Neo",serif;
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;
  --pad:clamp(24px, calc((100vw - 1120px) / 2), 160px);  /* content stays 1120 wide from 1280 up */
  --note-w:340px;
  --gap:32px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#151514; --ink:#ebe9e3; --ink-2:#9b998f; --ink-3:#6d6b64; --rule:#34332f; --link:#3a3a37; --dot:#5a5953;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;min-height:100%;display:flex;flex-direction:column;
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right));
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* The name is used like a logo: top left and in the footer, never in a sentence. */
.top{padding-top:calc(44px + env(safe-area-inset-top))}
.brand{display:inline-block;font-weight:700;letter-spacing:-.03em;font-size:15px;line-height:1;white-space:nowrap}

.page{flex:1 0 auto;padding-top:clamp(56px, 10vh, 106px);padding-bottom:64px}

.lead{
  margin:0 0 .45em;font-family:var(--serif);font-weight:500;
  font-size:clamp(26px, 2.36vw, 34px);line-height:1.8;max-width:30ch;text-wrap:balance;
}

.index{list-style:none;margin:0;padding:0}
.index li{
  display:grid;grid-template-columns:minmax(0, max-content) minmax(24px, 1fr) var(--note-w);
  column-gap:16px;align-items:start;
}
.entry{
  font-family:var(--serif);font-weight:500;font-size:clamp(26px, 2.36vw, 34px);line-height:1.8;
  word-break:keep-all;
}
.entry a{white-space:nowrap;border-bottom:1.5px solid var(--link);padding-bottom:2px;transition:border-color .15s}
.index li:hover .entry a,.index li:focus-within .entry a{border-color:var(--ink)}

/* Table-of-contents leader: 2px dots every 6px, sitting on the baseline. */
.leader{
  align-self:end;height:2px;margin:0;
  background:radial-gradient(circle, var(--dot) 1px, transparent 1.3px) 0 50% / 6px 2px repeat-x;
}
.index li .leader{font-size:clamp(26px, 2.36vw, 34px);margin-bottom:.47em}  /* dots rest on the baseline */

/* Margin note: icon, name with its Korean name, then the numbers. No prose; the sentence said it. */
.note{
  display:grid;grid-template-columns:32px 1fr;column-gap:12px;padding-left:14px;margin-top:2px;
  transition:opacity .2s;
}
.ic{grid-row:1 / 3;width:32px;height:32px;border-radius:8px;display:block;object-fit:cover;margin-top:1px}
.ic.mac{transform:scale(1.16)}
.nm{grid-column:2;display:block;font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.3;color:var(--ink)}
.nm em{font-style:normal;font-weight:500;color:var(--ink-3);margin-left:5px;font-size:12px;font-family:var(--sans)}
.mt{grid-column:2;display:block;color:var(--ink-2);font-size:12.5px;line-height:1.5;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.mt i{font-style:normal;margin:0 5px;color:var(--rule)}

/* One line hovered: its note stays, the others step back. */
.index:hover li:not(:hover) .note,
.index:focus-within li:not(:focus-within) .note{opacity:.55}

.foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;
  padding-bottom:calc(40px + env(safe-area-inset-bottom));font-size:13px;color:var(--ink-3);
}
.foot a{border-bottom:1px solid var(--rule)}
.foot a + a{margin-left:16px}

/* Narrow: notes drop under their lines, leaders go away, rows get a hairline. */
@media (max-width: 1279px){
  .index li{grid-template-columns:1fr;padding:0 0 12px;margin-bottom:12px;border-bottom:1px solid var(--rule)}
  .index li:last-child{border-bottom:0}
  .leader{display:none}
  .note{padding-left:0;margin-top:8px;grid-template-columns:24px 1fr;column-gap:10px;align-items:center}
  .ic{grid-row:auto;width:24px;height:24px;border-radius:6px;margin-top:0}
  .nm{display:none}
  .mt{margin-top:0;font-size:12px}
  .index:hover li:not(:hover) .note{opacity:1}
}
@media (max-width: 600px){
  .top{padding-top:calc(36px + env(safe-area-inset-top))}
  .page{padding-top:28px;padding-bottom:40px}
  .lead{font-size:22px;line-height:1.55;margin-bottom:.9em}
  .entry{font-size:22px;line-height:1.45}
  .foot{font-size:12px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion: reduce){
  .entry a,.note{transition:none}
}