/* tracemycoins — 공용 스타일
 *
 * 방향: 수사 기록부. 근흑색 바탕 위 모노스페이스 증거 시트, 호박색 추적선 하나.
 *   · 글꼴 둘, 역할 고정 — JetBrains Mono(제목·수치·주소) / 한글 산세리프(본문 산문)
 *   · 색 하나 — 호박색. 나머지는 중립. 초록·빨강은 상태 표시에만, 장식 금지
 *   · 눈금 하나 — 4px 배수
 *   · 전부 왼쪽 기준선에 붙인다. 가운데 정렬 없음
 *
 * 금지(지키는 중): 보라→파랑 그라디언트 · 글자 그라디언트 · 유리질 카드 ·
 *   이모지 불릿 · 전체 가운데 정렬 · 똑같은 둥근 카드 격자 · 반짝이/로봇/3D 덩어리 ·
 *   모든 요소에 그림자 · "혁신적으로 간편하게" 류 빈 문구 · 가짜 후기
 *
 * 글꼴은 자체 호스팅한다. CSP 가 font-src 'self' 라 외부 CDN 을 못 쓰기도 하지만,
 * 확장공개키를 다루는 페이지가 제3자에게 요청을 보내지 않는 편이 맞다.
 */

@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/fonts/jetbrains-mono-700.woff2") format("woff2");
}

:root{
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --kr:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;

  /* 눈금 — 4 배수 하나만 쓴다 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:72px; --s9:112px;

  /* 근흑색 기록부 */
  --field:#0A0B0D; --panel:#101216; --panel-2:#15181E;
  --rule:#1E232B; --rule-2:#2B333F;
  --ink:#E8EAED; --dim:#99A1AF; --faint:#7A828E;   /* 7.6:1 / 5.1:1 — AA */
  --amber:#FFB020; --amber-ink:#0A0B0D; --amber-soft:#3A2A09;
  --danger:#FF5C4D; --ok:#3DD68C;
}

/* 밝은 곳에서는 종이 기록부로. 방향은 그대로 — 호박색도 그대로 */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --field:#F2F0EA; --panel:#FBFAF7; --panel-2:#F6F4EF;
    --rule:#DFDBD1; --rule-2:#C8C3B6;
    --ink:#15171C; --dim:#5E6470; --faint:#636973;   /* 5.2:1 / 4.9:1 — AA */
    --amber:#9A6200; --amber-ink:#FFFFFF; --amber-soft:#F6E7C8;
    --danger:#B3281A; --ok:#1E7A4C;
  }
}
:root[data-theme="light"]{
  --field:#F2F0EA; --panel:#FBFAF7; --panel-2:#F6F4EF;
  --rule:#DFDBD1; --rule-2:#C8C3B6;
  --ink:#15171C; --dim:#5E6470; --faint:#636973;   /* 5.2:1 / 4.9:1 — AA */
  --amber:#9A6200; --amber-ink:#FFFFFF; --amber-soft:#F6E7C8;
  --danger:#B3281A; --ok:#1E7A4C;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--field); color:var(--ink);
  font:400 16px/1.65 var(--kr);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--amber); color:var(--amber-ink)}

/* ── 뼈대 ───────────────────────────────────────────────────────────────── */
.wrap{max-width:1040px; margin:0 auto; padding:0 var(--s4)}
.wrap--narrow{max-width:720px}

/* 상단 식별 띠 — 기록부의 머리글 */
.ribbon{
  border-bottom:1px solid var(--rule); background:var(--panel);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.ribbon .wrap{display:flex; align-items:center; gap:var(--s4); height:44px}
.ribbon a{color:var(--dim); text-decoration:none}
.ribbon a:hover{color:var(--ink)}
.ribbon .mark{color:var(--ink); font-weight:700; letter-spacing:.06em}
.ribbon .spacer{flex:1}

/* 상태 점 — 장식이 아니라 /api/health 를 실제로 읽는다 */
.dot{width:7px; height:7px; border-radius:50%; background:var(--faint); flex:none}
.dot[data-s="up"]{background:var(--ok)}
.dot[data-s="down"]{background:var(--danger)}
.status{display:inline-flex; align-items:center; gap:7px; color:var(--dim)}

/* ── 글자 ───────────────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber); margin:0 0 var(--s4);
}
/* 글꼴 역할 분담
 *   · 한글 산세리프 — 제목과 산문 (목소리)
 *   · JetBrains Mono — 라벨·수치·주소·단추·도판 (자료)
 * 제목까지 모노로 깔았다가 되돌렸다: JetBrains Mono 에는 **한글 글리프가 없어서**
 * OS 마다 다른 모노로 대체되고, 한글이 전각으로 벌어진다. 의도가 아니라 사고다. */
h1,h2,h3{font-family:var(--kr); font-weight:800; letter-spacing:-.035em; margin:0}
h1{font-size:clamp(31px,6.4vw,54px); line-height:1.1}
h2{font-size:clamp(21px,3.6vw,29px); line-height:1.25}
h3{font-size:17px; line-height:1.4; letter-spacing:-.02em}
.lede{font-size:17px; line-height:1.72; color:var(--dim); margin:var(--s5) 0 0; max-width:60ch}
p{margin:0 0 var(--s3)}
a{color:var(--ink); text-underline-offset:3px; text-decoration-color:var(--rule-2)}
a:hover{text-decoration-color:var(--amber)}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
hr.rule{border:0; border-top:1px solid var(--rule); margin:var(--s8) 0}

/* ── 단추 ───────────────────────────────────────────────────────────────── */
.btn,.go{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  padding:13px var(--s5); border-radius:3px; border:1px solid var(--rule-2);
  background:transparent; color:var(--ink); transition:border-color .12s, background .12s;
}
.btn:hover,.go:hover{border-color:var(--amber)}
.btn--primary,.go{background:var(--amber); color:var(--amber-ink); border-color:var(--amber)}
.btn--primary:hover,.go:hover{filter:brightness(1.08)}
.go{width:100%; padding:15px var(--s5)}
.go:disabled{background:transparent; color:var(--faint); border-color:var(--rule);
  cursor:not-allowed; filter:none}

/* ── 판 ─────────────────────────────────────────────────────────────────── */
.card{
  background:var(--panel); border:1px solid var(--rule); border-radius:4px;
  padding:var(--s5); margin:0 0 var(--s3);
}

/* 라벨/값 줄 — 기록부의 기본 단위 */
.row{
  display:flex; gap:var(--s4); align-items:baseline; justify-content:space-between;
  padding:9px 0; border-bottom:1px solid var(--rule); font-size:14px;
}
.row:last-child{border-bottom:0}
.row b{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); flex:none; min-width:84px;
}
.row span{font-family:var(--mono); font-size:13px; text-align:right; word-break:break-all}

/* 알림 — 왼쪽 굵은 선 하나로 등급을 말한다. 아이콘 없음 */
.msg{
  border-left:2px solid var(--rule-2); background:var(--panel-2);
  padding:var(--s3) var(--s4); font-size:13.5px; line-height:1.6; border-radius:0 3px 3px 0;
  color:var(--dim);
}
.msg b{color:var(--ink)}
.msg.info{border-left-color:var(--amber)}
.msg.err{border-left-color:var(--danger); color:var(--ink)}

/* 올라감 / 안 올라감 — 이 제품의 핵심 약속이라 눈에 보이게 */
.flow{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:3px; margin-top:var(--s4); overflow:hidden}
.flow>div{background:var(--panel-2); padding:var(--s3) var(--s4); font-size:13px}
.flow b{display:block; font-family:var(--mono); font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:3px}
.flow .up b{color:var(--amber)}
.flow .no b{color:var(--ok)}
.flow span{color:var(--dim)}

/* 파생된 주소 목록 */
.addrs{font-family:var(--mono); font-size:12px; line-height:1.9; color:var(--dim);
  word-break:break-all; margin:var(--s2) 0 0}
.addrs .k{color:var(--amber); user-select:none}

.chk{display:flex; gap:var(--s3); align-items:flex-start; margin:var(--s5) 0 var(--s3);
  font-size:13.5px; color:var(--dim); cursor:pointer}
.chk input{margin:3px 0 0; accent-color:var(--amber); flex:none; width:15px; height:15px}

/* ── 입력 ───────────────────────────────────────────────────────────────── */
textarea,select,input[type=file]{
  width:100%; background:var(--field); color:var(--ink);
  border:1px solid var(--rule-2); border-radius:3px; padding:var(--s3);
  font:400 13px/1.6 var(--mono);
}
textarea{min-height:104px; resize:vertical}
textarea:focus,select:focus{outline:2px solid var(--amber); outline-offset:-1px;
  border-color:var(--amber)}
input[type=file]{font-size:12px}

/* 위험하지만 자주 쓰지 않는 동작 — 단추처럼 크게 두지 않는다 */
.linkish{background:none; border:0; padding:0; margin-top:6px; cursor:pointer;
  font:400 11.5px var(--mono); letter-spacing:.04em; color:var(--faint);
  text-decoration:underline; text-underline-offset:3px}
.linkish:hover{color:var(--danger)}
.linkish:disabled{cursor:wait; text-decoration:none}

footer{
  border-top:1px solid var(--rule); margin-top:var(--s8); padding:var(--s5) 0 var(--s8);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--faint);
}
footer a{color:var(--dim)}

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