/* My AI Trust Index — v0.1
   화면의 은유는 '채점표(answer sheet)'다. 번호가 매겨진 항목, 가는 괘선,
   채점자의 빨간 표시. 신뢰를 재는 곳이니 계기(計器)처럼 보여야 한다. */

:root {
  --ground: #f1f0ec;
  --surface: #ffffff;
  --ink: #141619;
  --ink-2: #3a3d42;
  --muted: #74756e;
  --rule: #dbd9d2;
  --rule-strong: #b7b4ab;
  --mark: #bd2a19;          /* 채점자의 빨강 */
  --pass: #1b6a45;
  --fail: #a3271a;
  --shade: #e8e7e2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #131517;
    --surface: #1b1e21;
    --ink: #ecebe5;
    --ink-2: #c2c0b9;
    --muted: #8a8b84;
    --rule: #2b2f33;
    --rule-strong: #3f4449;
    --mark: #ff6a52;
    --pass: #4cb782;
    --fail: #ff7a66;
    --shade: #202427;
  }
}

:root[data-theme="dark"] {
  --ground: #131517;
  --surface: #1b1e21;
  --ink: #ecebe5;
  --ink-2: #c2c0b9;
  --muted: #8a8b84;
  --rule: #2b2f33;
  --rule-strong: #3f4449;
  --mark: #ff6a52;
  --pass: #4cb782;
  --fail: #ff7a66;
  --shade: #202427;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-block: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
/* 읽기 단은 1120 틀 안에서 왼쪽에 붙는다. .wrap.col 로 합쳐 쓴 곳은 틀은 그대로 두고
   자식만 720 으로 묶는다 — 안 그러면 구역마다 단이 가운데/왼쪽으로 널뛴다. */
.col  { max-width: 720px; }
.wrap.col { max-width: 1120px; }
.wrap.col > * { max-width: 720px; }

/* ── 머리 ────────────────────────────────────────────────── */

.mast {
  border-bottom: 1px solid var(--rule-strong);
  padding-block: 26px 22px;
}
.mast .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline; }
.wordmark {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600; font-size: 1rem; letter-spacing: .20em;
  text-transform: uppercase; margin: 0; color: var(--ink);
}
.wordmark .dot { color: var(--mark); }
.mastmeta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .76rem; letter-spacing: .09em; color: var(--muted);
  text-transform: uppercase; margin: 0;
}
.mastnav { margin-left: auto; display: flex; gap: 18px; align-items: baseline; }
.mastnav a {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.mastnav a:hover, .mastnav a:focus-visible { color: var(--ink); border-bottom-color: var(--mark); }
.mastnav a[aria-current] { color: var(--ink); border-bottom-color: var(--rule-strong); }

/* ── 여는 글 ─────────────────────────────────────────────── */

.lede { padding-block: 62px 56px; border-bottom: 1px solid var(--rule); }
.lede h1 {
  margin: 0 0 26px;
  font-size: clamp(1.85rem, 4.2vw, 2.7rem);
  font-weight: 600; line-height: 1.22; letter-spacing: -.021em;
  text-wrap: balance; max-width: 19ch;
}
.lede p { margin: 0 0 18px; color: var(--ink-2); font-size: 1.07rem; }
.lede p:last-child { margin-bottom: 0; }
.lede strong { color: var(--ink); font-weight: 600; }

/* ── 구역 ────────────────────────────────────────────────── */

section { padding-block: 54px; border-bottom: 1px solid var(--rule); }
section:last-of-type { border-bottom: 0; }

.eyebrow {
  display: flex; align-items: baseline; gap: 12px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .74rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.eyebrow .sect { color: var(--mark); font-weight: 600; }

h2 {
  margin: 0 0 18px; font-size: clamp(1.35rem, 2.6vw, 1.72rem);
  font-weight: 600; letter-spacing: -.016em; line-height: 1.26; text-wrap: balance;
}
h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; letter-spacing: -.008em; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
a { color: var(--ink); text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--mark); }

.note { color: var(--muted); font-size: .94rem; }

/* ── 헌장 ────────────────────────────────────────────────── */

.charter { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.charter ol { list-style: none; margin: 0; padding: 0; counter-reset: ch; }
.charter li {
  counter-increment: ch;
  display: grid; grid-template-columns: 46px 1fr; gap: 0 18px;
  padding-block: 20px; border-top: 1px solid var(--rule);
}
.charter li:first-child { border-top: 0; }
.charter li::before {
  content: counter(ch, decimal-leading-zero);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .82rem; color: var(--mark); font-weight: 600; padding-top: .35em;
}
.charter li b { display: block; font-weight: 600; margin-bottom: 3px; grid-column: 2; }
/* ::before 가 첫 칸을 차지하므로 설명문도 둘째 칸에 명시한다 — 안 그러면 번호 칸으로 떨어진다 */
.charter li span { color: var(--ink-2); font-size: .97rem; grid-column: 2; }

/* ── 여섯 축 ─────────────────────────────────────────────── */

.dims { display: grid; gap: 0; }
.dim {
  display: grid; grid-template-columns: 54px 1fr; gap: 0 18px;
  padding-block: 24px; border-top: 1px solid var(--rule);
}
.dim:first-child { border-top: 1px solid var(--rule-strong); }
.dim:last-child { border-bottom: 1px solid var(--rule-strong); }
.dim .tag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .82rem; font-weight: 600; color: var(--mark); padding-top: .18em;
}
.dim dl { margin: 10px 0 0; display: grid; gap: 7px; }
.dim dt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: -4px;
}
.dim dd { margin: 0; font-size: .96rem; color: var(--ink-2); }

/* ── 함정 ────────────────────────────────────────────────── */

.traps { list-style: none; margin: 0; padding: 0; counter-reset: tr; }
.traps li {
  counter-increment: tr;
  display: grid; grid-template-columns: 54px 1fr; gap: 0 18px;
  padding-block: 22px; border-top: 1px solid var(--rule);
}
.traps li:first-child { border-top: 1px solid var(--rule-strong); }
.traps li:last-child { border-bottom: 1px solid var(--rule-strong); }
.traps li::before {
  content: "T" counter(tr, decimal-leading-zero);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .82rem; font-weight: 600; color: var(--mark); padding-top: .2em;
}
.traps .ex {
  margin: 9px 0 0; padding: 9px 0 9px 15px; border-left: 2px solid var(--rule-strong);
  font-size: .94rem; color: var(--ink-2); font-style: italic;
}

/* ── 자율 단계 ───────────────────────────────────────────── */

.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.levels > div { background: var(--surface); padding: 20px 18px; }
.levels .lv {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; color: var(--mark);
  display: block; margin-bottom: 7px;
}
.levels b { display: block; font-weight: 600; margin-bottom: 5px; }
.levels p { font-size: .91rem; color: var(--ink-2); }

/* ── 규칙 목록 ───────────────────────────────────────────── */

.rules { list-style: none; margin: 0; padding: 0; }
.rules li {
  padding: 15px 0 15px 30px; border-top: 1px solid var(--rule); position: relative;
  color: var(--ink-2); font-size: .98rem;
}
.rules li:first-child { border-top: 1px solid var(--rule-strong); }
.rules li:last-child { border-bottom: 1px solid var(--rule-strong); }
.rules li::before {
  content: "—"; position: absolute; left: 0; top: 15px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--mark);
}
.rules b { color: var(--ink); font-weight: 600; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.split h3 { padding-bottom: 10px; border-bottom: 2px solid var(--ink); }

/* ── 자가 진단지 ─────────────────────────────────────────── */

.sheet { background: var(--surface); border: 1px solid var(--rule-strong); margin-top: 26px; }

.sheethead {
  display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center;
  padding: 20px 22px; border-bottom: 1px solid var(--rule-strong); background: var(--shade);
}
.score {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 2.3rem; font-weight: 600; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score small { font-size: 1rem; color: var(--muted); font-weight: 400; }
.verdict { font-weight: 600; font-size: 1rem; flex: 1 1 260px; }
.verdict span { display: block; font-weight: 400; font-size: .9rem; color: var(--muted); margin-top: 2px; }

.bars { display: flex; flex-wrap: wrap; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--rule); }
.bar { display: flex; align-items: center; gap: 7px; }
.bar em {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-style: normal;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.pips { display: flex; gap: 3px; }
.pip { width: 13px; height: 13px; border: 1px solid var(--rule-strong); border-radius: 50%; }
.pip.on { background: var(--mark); border-color: var(--mark); }

.items { list-style: none; margin: 0; padding: 0; counter-reset: it; }
.items li {
  counter-increment: it;
  display: grid; grid-template-columns: 52px 1fr; gap: 0 16px;
  padding: 20px 22px; border-top: 1px solid var(--rule);
}
.items li:first-child { border-top: 0; }
.items li::before {
  content: counter(it, decimal-leading-zero);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .8rem; font-weight: 600; color: var(--muted); padding-top: .25em;
}
.items .ask {
  margin: 0 0 9px; font-weight: 500;
  padding: 10px 14px; background: var(--shade); border-left: 2px solid var(--rule-strong);
  font-size: .97rem;
}
.items .chk { margin: 0 0 12px; font-size: .94rem; color: var(--ink-2); }
.items .chk b { font-weight: 600; color: var(--ink); }

.tick { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.tick input { width: 19px; height: 19px; accent-color: var(--mark); cursor: pointer; margin: 0; }
.tick span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.tick input:checked + span { color: var(--pass); }

.sheetfoot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 16px 22px; border-top: 1px solid var(--rule-strong); background: var(--shade); }
.reset {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--rule-strong); color: var(--ink-2);
  padding: 8px 14px; cursor: pointer;
}
.reset:hover { border-color: var(--mark); color: var(--mark); }

/* ── 꼬리 ────────────────────────────────────────────────── */

footer { border-top: 2px solid var(--ink); padding-block: 34px 56px; }
footer p { font-size: .88rem; color: var(--muted); }
footer .sig {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}

:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .levels { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .dim, .traps li, .charter li, .items li { grid-template-columns: 40px 1fr; gap: 0 12px; }
  .items li { padding-inline: 16px; }
  .sheethead, .bars, .sheetfoot { padding-inline: 16px; }
  .mastnav { margin-left: 0; width: 100%; }
}