/* 김프 차익 거래 — 목업(김프1~4 png) 기준 스타일 */
:root {
  --bg: #edf1f5;
  --card: #ffffff;
  --ink: #1f2430;
  --muted: #8a93a3;
  --line: #e3e7ee;
  --field: #f4f7fa;
  --accent: #069ff5;       /* 파란 버튼 · 청산 값 · '진입' 상태 */
  --accent-soft: #e6f6ff;
  --pink: #f5426c;         /* 수정/삭제 버튼 · 진입 값 · '대기' 상태 */
  --danger-bg: #fdecef;
  --danger-ink: #c23355;
  --ok-bg: #e6f4ec;
  --ok-ink: #256b43;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 "Poppins", "Noto Sans KR", "Malgun Gothic", -apple-system, "Segoe UI", sans-serif;
}

.wrap { max-width: 1520px; margin: 0 auto; padding: 16px 12px 40px; }

/* ---- 상단 줄 ---- */
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 0 14px;
  margin-bottom: 16px;
}
.brand { margin: 0 14px 0 0; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; }
.topbar__logout { margin-left: auto; }

.fx-label { font-weight: 600; letter-spacing: 0.04em; }
.fx-pill {
  padding: 3px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 4px;
}
.fx-pill--empty { color: var(--pink); background: var(--danger-bg); }

/* ---- 카드 ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 28px;
  margin-bottom: 18px;
}
.card--list { padding: 20px 24px 36px; min-height: 360px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head h2 { margin: 0; font-size: 1.1rem; }
.hint { margin: 8px 0 14px; color: var(--muted); font-size: 0.82rem; }

/* ---- 버튼 ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--nav { min-width: 142px; padding: 8px 20px; border-radius: 10px; font-weight: 700; letter-spacing: 0.04em; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; border-radius: 3px; min-width: 72px; }
.btn--pink { background: var(--pink); border-color: var(--pink); color: #fff; border-radius: 3px; padding: 8px 14px; font-size: 0.85rem; }
.btn--block { width: 100%; padding: 12px; }
.btn--wide { min-width: 160px; }

/* ---- 입력칸 ---- */
input[type="text"],
input[type="password"],
select {
  padding: 9px 12px;
  border: 1px solid #d8dde4;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
form.inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }

.alert {
  margin: 0 14px 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger-ink);
  font-size: 0.9rem;
}
.alert--ok { background: var(--ok-bg); color: var(--ok-ink); }
.alert--warn { background: #fff6e0; color: #8a5a00; }

.chip {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  vertical-align: middle;
}
.chip--ok { background: var(--ok-bg); color: var(--ok-ink); }

/* ---- 로그인 화면 ---- */
body.page-login { background: #fff; min-height: 100vh; overflow-x: hidden; position: relative; }
.login-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 115px 16px 40px; }
.login-card {
  width: 100%;
  max-width: 500px;
  padding: 150px 50px 66px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(20, 30, 50, 0.07);
}
.login-card h1 { margin: 0 0 26px; text-align: center; font-size: 1.4rem; }
.login-card .alert { margin: 0 0 14px; }
.login-form { display: flex; flex-direction: column; }
.login-form label { margin: 14px 0 8px; font-size: 0.92rem; font-weight: 700; }
.login-form input { height: 47px; border: none; border-radius: 2px; background: var(--field); }
.login-form .btn { margin-top: 32px; border-radius: 2px; }
.login-foot { margin-top: 190px; color: var(--muted); font-size: 0.92rem; }
.login-deco { position: absolute; pointer-events: none; z-index: 0; }
.login-deco--ring {
  left: calc(50% - 600px); top: 490px;
  width: 680px; height: 680px;
  border: 100px solid #fffbeb;
  border-radius: 50%;
}
.login-deco--hex {
  left: calc(50% + 150px); top: 630px;
  width: 210px; height: 240px;
  background: #fdf6f9;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
@media (max-width: 600px) {
  .login-wrap { padding-top: 40px; }
  .login-card { padding: 50px 24px 40px; }
  .login-foot { margin-top: 60px; }
  .login-deco { display: none; }
}

/* ---- 김프 차익 거래: 주문 입력 ---- */
.order-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 26px; }
.of-field { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.of-field label { font-weight: 700; letter-spacing: 0.04em; }
.of-field select { width: 102px; height: 42px; font-weight: 700; text-align: center; text-align-last: center; }
.of-field option { text-align: center; }

/* 거래소 콤보박스: 펼친 목록까지 가운데 정렬.
   기본 콤보 목록은 브라우저가 정렬을 무시하므로, 지원 브라우저(최신 Chrome·Edge)에서는
   꾸밀 수 있는 콤보(base-select)로 바꾼다. 미지원 브라우저는 위의 기본 모양 그대로. */
@supports (appearance: base-select) {
  .of-field select,
  .of-field select::picker(select) { appearance: base-select; }
  .of-field select { padding: 0; background: #fff; }
  /* 닫혀 있을 때 보이는 선택값 줄: 글자는 칸 가운데, 화살표는 오른쪽 끝 */
  .of-field select > button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 18px;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }
  .of-field select > button::after {
    content: "▾";
    position: absolute;
    right: 9px;
    font-size: 0.8rem;
  }
  .of-field select::picker-icon { display: none; }
  .of-field select::picker(select) {
    margin-top: 4px;
    padding: 4px 0;
    border: 1px solid #d8dde4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(20, 30, 50, 0.12);
  }
  .of-field option {
    justify-content: center;
    min-width: 102px;
    padding: 7px 12px;
    font-weight: 700;
  }
  .of-field option::checkmark { display: none; }
  .of-field option:hover,
  .of-field option:focus-visible { background: var(--accent-soft); color: var(--accent); }
  .of-field option:checked { color: var(--accent); }
}
.of-field input { width: 105px; height: 40px; }
.btn--order { height: 45px; min-width: 126px; margin-left: 24px; border-radius: 2px; font-size: 0.85rem; }

/* ---- 표 (주문 목록 · 실행 로그) ---- */
.table-wrap { overflow-x: auto; }
table.orders, table.logs { width: 100%; border-collapse: collapse; white-space: nowrap; }
table.orders th, table.logs th {
  padding: 14px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
table.orders td, table.logs td {
  padding: 18px 10px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
table.orders td.col-no { color: var(--ink); font-weight: 700; }
table.orders .v-entry { color: var(--pink); }
table.orders .v-exit { color: var(--accent); }
table.orders .st--entered { color: var(--accent); }
table.orders .st--wait { color: var(--pink); }
table.orders .st--entering, table.orders .st--exiting { color: var(--muted); }
table.orders .st--closed { color: var(--ok-ink); }
table.orders .st--error, table.orders .st--close_error { color: var(--danger-ink); font-weight: 700; }
table.orders .st-note { display: block; max-width: 260px; margin: 4px auto 0; font-size: 0.75rem;
  font-weight: 400; color: var(--danger-ink); white-space: normal; text-align: left; }
table.orders .acts { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.btn[hidden] { display: none; }
table.orders th.col-actions { text-align: right; padding-right: 30px; }
table.orders .edit-row td { padding-top: 0; border-top: none; text-align: left; }
table.orders .order-row:has(+ .edit-row:not([hidden])) td { border-bottom: none; }
/* 수정 입력칸은 '청산(%)' 칸 바로 아래 가운데. [수정] 버튼은 그 오른쪽으로 삐져나오게 둔다
   (칸 너비가 늘어나 표 전체가 흔들리지 않도록 절대 위치로 띄운다). */
table.orders .edit-cell { position: relative; height: 58px; padding: 0; }
.edit-form { position: absolute; top: 0; left: 50%; transform: translateX(-52px); }
.edit-form input { width: 105px; height: 40px; }
.empty { padding: 40px 10px !important; }

table.logs th { text-align: left; font-size: 0.9rem; }
table.logs td { text-align: left; color: var(--ink); font-size: 0.85rem; padding: 10px; }
/* 주문번호 · 시간: 가운데 정렬 + 글자 폭만큼만 (남는 폭은 '내용'이 쓴다 — 사장 요청 2026-09-28) */
table.logs th.col-no, table.logs td.col-no,
table.logs th.col-time, table.logs td.col-time { width: 1%; text-align: center; white-space: nowrap; padding: 10px 30px; }
table.logs th.col-time, table.logs td.col-time { padding-right: 40px; }   /* 시간 ↔ 내용 사이도 띄운다 */
table.logs th.col-actions { text-align: right; width: 1%; }
table.logs .log-msg { white-space: normal; word-break: break-word; }
table.logs .log-warn td { color: #8a5a00; }
table.logs .log-error td { color: var(--danger-ink); }
/* 진입 완료 · 청산 완료 · 오류 — 눈에 확 띄게 */
table.logs .log-hot td { color: #e0001b; font-weight: 700; background: #fff0f2; }

/* ---- API 설정 ---- */
.fx-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; }
.fx-form label { font-size: 0.88rem; }
.fx-form input { width: 178px; height: 40px; }
.fx-form .btn { margin-left: auto; margin-right: 70px; height: 43px; }
.card-head .btn { margin-right: 70px; height: 43px; }

.keys-grid {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr) 44px;
  gap: 11px 20px;
  align-items: center;
}
.kg-head { font-size: 0.85rem; }
.kg-name { font-weight: 700; padding-left: 4px; }
.kg-del { text-align: center; font-size: 0.8rem; color: var(--muted); }
.keys-grid input[type="password"] { height: 44px; border-radius: 3px; width: 100%; }
@media (max-width: 700px) {
  .keys-grid { grid-template-columns: 1fr 1fr 34px; }
  .keys-grid .kg-head:first-child { display: none; }
  .kg-name { grid-column: 1 / -1; margin-top: 8px; }
  .fx-form .btn, .card-head .btn { margin-right: 0; }
}

@media (max-width: 700px) {
  .card { padding: 18px 16px; border-radius: 14px; }
  .btn--nav { min-width: 0; }
  .btn--order { margin-left: 0; }
}