/* ==========================================================================
   Pagu.info — Uniswap V3 LP 계산기 전용 스타일
   --------------------------------------------------------------------------
   이 파일은 `calculators/uniswap-v3.html` 한 페이지만 쓴다.

   왜 별도 파일인가:
     `src/styles-v2.css` 는 사이트 전체가 공유하고 다른 세션이 함께 고치는
     파일이다. 계산기 한 화면 때문에 공용 파일을 늘리면 충돌이 난다.
     그래서 계산기 고유 부품만 여기 모으고, 색·간격·반경은 styles-v2.css 가
     이미 정의한 변수(--surface, --line, --blue-500 ...)를 그대로 쓴다.
     → 색을 바꾸려면 여기가 아니라 src/tokens.css 를 고친다.

   불러오는 순서: tokens.css → styles-v2.css → calculator.css
   ========================================================================== */

/* ==========================================================================
   1. 풀 선택 바 — 체인 + 풀 드롭다운
   ========================================================================== */

.uni-pool-bar {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--surface) 100%);
}

.uni-pool-bar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 650;
}

.uni-pool-bar select {
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.uni-pool-bar select:hover {
  border-color: var(--gray-300);
}

.uni-pool-bar select:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px var(--blue-50);
}

.uni-pool-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding-bottom: 2px;
  color: var(--text-soft);
  font-size: 11.5px;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.uni-pool-meta a {
  color: var(--blue-600);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 프리셋 버튼 아래 두 번째 입력 묶음 */
.uni-form-second {
  margin-top: 16px;
}

.uni-pool-note {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 11.5px;
  line-height: 1.5;
}

/* 입력칸 아래 한 줄 설명 */
.uni-hint {
  margin-top: -2px;
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
}

/* ==========================================================================
   2. 풀 지표 칩 — TVL / 24h 거래량 / 수수료 티어 / 풀 APR / 풀 집중도
   ========================================================================== */

.uni-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.uni-chips[hidden] {
  display: none;
}

.uni-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.uni-chip > span {
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.uni-chip > strong {
  font-size: 15px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ==========================================================================
   3. 히어로 지표 — 예상 APR / 예상 수수료 / 순손익
   ========================================================================== */

.uni-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 18px 0 4px;
}

.uni-metric {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* 위쪽 3px 색 띠 — 지표 성격(수익/위험/중립)을 색으로 구분 */
.uni-metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gray-300);
}

.uni-metric[data-tone="accent"]::before { background: var(--blue-500); }
.uni-metric[data-tone="up"]::before { background: var(--green); }
.uni-metric[data-tone="down"]::before { background: var(--red); }
.uni-metric[data-tone="warn"]::before { background: var(--amber); }

.uni-metric-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-sub);
  font-size: 12.5px;
  font-weight: 650;
}

.uni-metric-value {
  font-size: 30px;
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

.uni-metric[data-tone="up"] .uni-metric-value { color: var(--green); }
.uni-metric[data-tone="down"] .uni-metric-value { color: var(--red); }
.uni-metric[data-tone="accent"] .uni-metric-value { color: var(--blue-600); }

.uni-metric-foot {
  color: var(--text-soft);
  font-size: 11.5px;
  line-height: 1.45;
}

.uni-metric-foot b {
  color: var(--amber);
  font-weight: 700;
}

/* ==========================================================================
   4. 가격 구간 막대 — 하단 / 현재가 / 상단 / 종료가
   ========================================================================== */

.uni-range {
  padding: 18px 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.uni-range-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.uni-range-head > span {
  color: var(--text-sub);
  font-size: 12.5px;
  font-weight: 650;
}

.uni-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.uni-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.uni-status[data-state="in"] { background: var(--green-bg); color: var(--green); }
.uni-status[data-state="out"] { background: var(--amber-bg); color: var(--amber); }
.uni-status[data-state="error"] { background: var(--red-bg); color: var(--red); }

/* 막대: 바깥은 회색(구간 밖), 안쪽 띠는 파란색(내 유동성이 일하는 구간) */
.uni-track {
  position: relative;
  height: 10px;
  margin: 0 2px 6px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
}

.uni-band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--blue-100) 0%, var(--blue-500) 50%, var(--blue-100) 100%);
  transition: left var(--normal) var(--ease), right var(--normal) var(--ease);
}

/* 현재가 — 채운 세로 핀 */
.uni-pin {
  position: absolute;
  top: -7px;
  width: 3px;
  height: 24px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--gray-900);
  box-shadow: 0 0 0 2px var(--surface);
  transition: left var(--normal) var(--ease);
}

/* 종료가 — 비운 세로 핀 (현재가와 구분) */
.uni-pin.exit {
  width: 6px;
  margin-left: -3px;
  border: 2px solid var(--gray-500);
  border-radius: 3px;
  background: var(--surface);
}

.uni-edge {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 16px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--blue-600);
  transition: left var(--normal) var(--ease);
}

.uni-range-scale {
  position: relative;
  height: 34px;
  margin: 0 2px;
}

.uni-range-scale > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

.uni-range-scale > span b {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

/* 양 끝 라벨은 잘리지 않게 안쪽으로 당긴다 */
.uni-range-scale > span[data-edge="low"] { transform: translateX(-20%); }
.uni-range-scale > span[data-edge="high"] { transform: translateX(-80%); }

.uni-range-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-soft);
  font-size: 11.5px;
}

.uni-range-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.uni-range-legend i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.uni-range-legend i[data-key="band"] { background: var(--blue-500); }
.uni-range-legend i[data-key="now"] { width: 3px; height: 12px; background: var(--gray-900); }
.uni-range-legend i[data-key="exit"] {
  width: 6px;
  height: 12px;
  border: 2px solid var(--gray-500);
  background: var(--surface);
}

/* ==========================================================================
   5. 구간 폭 프리셋 — 분절 버튼
   ========================================================================== */

.uni-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.uni-presets > span {
  flex: none;
  align-self: center;
  margin-right: 2px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 650;
}

.uni-preset {
  min-height: 44px;
  padding: 0 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition:
    border-color var(--fast) var(--ease),
    background var(--fast) var(--ease),
    color var(--fast) var(--ease);
}

/* 사용자 동작으로만 읽는 공개 RPC 컨트롤. 테마에 따라 바뀌는 색만 사용. */
body[data-page="uniswap-v3"] .calculator-shell { --text-soft: var(--text-sub); }
body[data-page="uniswap-v3"] .calculator-inputs label,
body[data-page="uniswap-v3"] .calculator-note summary { color: var(--text-sub); }
body[data-page="uniswap-v3"] .calculator-section-title { flex-wrap: wrap; }
body[data-page="uniswap-v3"] .calculator-section-title > span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.uni-read-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  margin-top: 16px;
}

.uni-read-controls label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 650;
}

.uni-read-controls input,
.uni-read-button {
  box-sizing: border-box;
  min-height: 44px;
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.uni-read-controls input {
  width: 100%;
  font-size: 14px;
}

.uni-read-button { cursor: pointer; font-size: 13px; font-weight: 650; }
.uni-read-button:disabled { cursor: default; color: var(--text-sub); opacity: 0.65; }
.uni-read-button:focus-visible,
.uni-read-controls input:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.uni-pair-search {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.uni-pair-search h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
}

.uni-pair-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.uni-pair-controls label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 650;
}

.uni-pair-controls input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.uni-pair-controls input:focus-visible,
.uni-tier-button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.uni-tier-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.uni-tier-button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.uni-tier-button[aria-current="true"] {
  border-color: var(--blue-500);
  background: var(--blue-50);
  color: var(--text);
  font-weight: 700;
}

.uni-read-status {
  margin: 10px 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.uni-chip > strong,
.uni-split-head,
.uni-pool-note,
.calculator-inputs label > span { overflow-wrap: anywhere; }
.uni-chip > strong { white-space: normal; }
.uni-split-head { flex-wrap: wrap; }
.uni-split-head > span { min-width: 0; max-width: 100%; }
.uni-range-scale > span { max-width: 32%; white-space: normal; overflow-wrap: anywhere; }
.calculator-inputs input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .uni-read-controls { grid-template-columns: minmax(0, 1fr); }
  .uni-read-button { width: 100%; }
  .uni-pair-controls { grid-template-columns: minmax(0, 1fr); }
}

.uni-preset:hover {
  border-color: var(--blue-500);
  color: var(--blue-600);
}

.uni-preset[aria-pressed="true"] {
  border-color: var(--blue-500);
  background: var(--blue-500);
  color: var(--on-accent);
}

/* ==========================================================================
   6. 토큰 구성 막대
   ========================================================================== */

.uni-split {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.uni-split-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--text-sub);
  font-size: 12.5px;
  font-weight: 650;
}

.uni-bar {
  display: flex;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  overflow: hidden;
}

.uni-bar > div {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  transition: flex-basis var(--normal) var(--ease);
}

.uni-bar > div[data-key="base"] { background: var(--blue-500); }
/* quote 칸의 글자색만 따로 준다. 부모의 --on-accent(흰색)는 base 칸의 파란
   배경에서는 4.70:1 로 기준(4.5:1)을 겨우 넘지만, 이 칸의 --gray-400 위에서는
   2.67:1 로 미달이다. accent 를 더 밝게 바꾸면 base 칸도 깨지니 주의.
   --gray-400 은 라이트 #8fa0b5 / 다크 #7b90a6 으로 양쪽 다 중간 밝기라서,
   이 글자색은 테마를 따라가지 않는 것이 맞다 (라이트 6.7:1 / 다크 5.4:1).
   --gray-900 을 쓰면 다크에서 2.6:1 로 깨지므로 쓰지 말 것. */
.uni-bar > div[data-key="quote"] { background: var(--gray-400); color: #07182b; }

.uni-split-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: var(--text-soft);
  font-size: 12px;
}

.uni-split-foot strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   7. 결과 묶음 — 작은 제목 + 줄 목록
   ========================================================================== */

.uni-result-group {
  margin-top: 16px;
}

.uni-result-group > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.uni-result-group > h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.uni-rows {
  display: grid;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.uni-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px 14px;
  padding: 12px 15px;
}

.uni-row + .uni-row {
  border-top: 1px solid var(--line-soft);
}

.uni-row > span {
  color: var(--text-sub);
  font-size: 13.5px;
  font-weight: 550;
}

.uni-row > strong {
  font-size: 15.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.uni-row > small {
  grid-column: 1 / -1;
  margin-top: -2px;
  color: var(--text-soft);
  font-size: 11.5px;
  line-height: 1.45;
}

.uni-row[data-tone="up"] > strong { color: var(--green); }
.uni-row[data-tone="down"] > strong { color: var(--red); }
.uni-row[data-tone="muted"] > strong { color: var(--text-soft); }

/* ==========================================================================
   8. 설명 박스 — 어디까지 정확한가
   ========================================================================== */

.uni-caveat {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid var(--amber);
  border-radius: var(--radius-md);
  background: var(--amber-bg);
  color: var(--text-sub);
  font-size: 12.5px;
  line-height: 1.55;
}

.uni-caveat strong {
  color: var(--amber);
  font-weight: 750;
}

.uni-caveat svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  fill: var(--amber);
}

/* ==========================================================================
   9. 좁은 화면 — 360px 까지 안전하게
   ========================================================================== */

@media (max-width: 860px) {
  .uni-pool-bar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .uni-pool-meta {
    align-items: flex-start;
    text-align: left;
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .uni-hero {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .uni-metric {
    padding: 14px 15px 13px;
  }

  .uni-metric-value {
    font-size: 26px;
  }

  .uni-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .uni-range,
  .uni-split {
    padding-left: 14px;
    padding-right: 14px;
  }

  .uni-range-scale > span {
    font-size: 10px;
  }

  /* 라벨이 겹치는 폭에서는 이름을 지우고 숫자만 남긴다 */
  .uni-range-scale > span i {
    display: none;
  }

  .uni-row {
    padding: 11px 13px;
  }
}