/* avg.those.kr — 다크 트레이딩 앱 디자인
   결과 패널(위) · 가격 사다리(왼쪽) · 주문표(오른쪽). 국내 증권사처럼 상승 빨강 · 하락 파랑, 새 평단은 금색 */
:root {
  --bg: #0a0e16; --panel: #111827; --panel2: #172033; --panel3: #1d2840;
  --line: #222d44; --line2: #2b3854;
  --text: #e8edf7; --sub: #9ba6bc; --muted: #66718a;
  --gold: #f5b83d; --gold-soft: rgba(245, 184, 61, .14);
  --up: #ff5b5b; --up-soft: rgba(255, 91, 91, .14); --down: #4d8dff; --down-soft: rgba(77, 141, 255, .14);
  --focus: #f5b83d;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Pretendard, -apple-system, "Malgun Gothic", sans-serif; }
a { color: var(--gold); }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up) !important; } .down { color: var(--down) !important; }

/* ── 광고 배치: [좌] [본문] [우] — 좌우는 1440px 이상 ── */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.page { min-width: 0; }
.ad-side { display: none; }
.ad-band { max-width: 760px; margin: 32px auto 0; padding: 0 16px; }
@media (min-width: 1440px) {
  .layout { grid-template-columns: 160px minmax(0, 1080px) 160px; column-gap: 24px; justify-content: center; }
  .ad-side { display: block; position: sticky; top: 24px; align-self: start; margin-top: 150px; }
  .ad-side[data-ad-slot="left"] { grid-column: 1; grid-row: 1; }
  .page { grid-column: 2; grid-row: 1; }
  .ad-side[data-ad-slot="right"] { grid-column: 3; grid-row: 1; }
}

/* ── 상단 바: 메뉴(왼쪽) · 통화(오른쪽) ── */
.topbar { max-width: 1080px; margin: 0 auto; padding: 18px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tabs { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.tabs a { padding: 11px 18px; border-radius: 9px; font-size: 15.5px; font-weight: 700; color: var(--sub); text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--text); background: var(--panel2); }
.tabs a[aria-current="page"] { background: var(--panel3); color: var(--gold); box-shadow: inset 0 0 0 1px var(--line2); }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.seg button { border: 0; background: transparent; color: var(--sub); font: inherit; font-size: 14.5px; font-weight: 700; padding: 9px 15px; border-radius: 9px; cursor: pointer; }
.seg button.on { background: var(--panel3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }

.title { max-width: 1080px; margin: 0 auto; padding: 26px 16px 18px; }
.title h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.8px; }
.title p { margin: 6px 0 0; color: var(--sub); font-size: 15px; }

/* ── 터미널 배치 ── */
.term { max-width: 1080px; margin: 0 auto; padding: 0 16px; display: grid; gap: 14px;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  grid-template-areas: "hero hero" "ladder order" "detail order"; align-items: start; }
.hero { grid-area: hero; } .ladder-panel { grid-area: ladder; } .order { grid-area: order; } .detail { grid-area: detail; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: 1.5px; margin-bottom: 14px; }
.panel-head .hint { letter-spacing: 0; font-weight: 600; font-size: 12.5px; }

/* 결과 패널: 큰 숫자 타일 */
.hero { background: linear-gradient(180deg, #141d30, var(--panel)); border: 1px solid var(--line2); border-radius: 18px; padding: 20px 22px; display: grid; grid-template-columns: 1.25fr 1.25fr 1fr 1fr; gap: 0; }
.stat { padding: 2px 18px; border-left: 1px solid var(--line); min-width: 0; }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat .k { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--sub); }
.stat .v { margin-top: 8px; font-size: 22px; font-weight: 800; letter-spacing: -.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .s { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--sub); min-height: 17px; }
.stat.main .v { font-size: 36px; color: var(--gold); letter-spacing: -1.2px; }
.cmp { display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; }
.stat .v.cmp { font-size: 20px; }
.cmp .arrow { color: var(--muted); font-size: 15px; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.tag.water { background: var(--down-soft); color: var(--down); } .tag.fire { background: var(--up-soft); color: var(--up); }

/* 가격 사다리 */
.ladder { position: relative; height: 330px; margin: 4px 0 2px; }
.ladder .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; text-align: center; line-height: 1.6; }
.ladder .axis { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(180deg, transparent 0 32px, rgba(255,255,255,.025) 32px 33px); border-radius: 8px; }
.ladder .zone { position: absolute; left: 0; right: 0; border-radius: 4px; }
.ladder .zone.up { background: var(--up-soft); } .ladder .zone.down { background: var(--down-soft); }
.ladder .mk { position: absolute; left: 0; right: 0; height: 0; }
.ladder .mk .ln { position: absolute; left: 0; right: 0; top: 0; border-top: 2px solid var(--muted); }
.ladder .mk.prev .ln { border-top-style: dashed; border-color: #7b86a0; }
.ladder .mk.buy .ln { border-color: rgba(245, 184, 61, .35); border-top-width: 1px; left: 40%; }
.ladder .mk.new .ln { border-color: var(--gold); border-top-width: 3px; }
.ladder .mk.cur .ln { border-color: var(--text); border-top-style: dotted; }
.ladder .mk.cur.up .ln { border-color: var(--up); } .ladder .mk.cur.down .ln { border-color: var(--down); }
.ladder .lb { position: absolute; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; pointer-events: none; }
.ladder .lb span { background: var(--panel); padding: 1px 6px; border-radius: 5px; }
.ladder .lb .nm { color: var(--sub); }
.ladder .lb .pr { color: var(--text); }
.ladder .lb.new .nm, .ladder .lb.new .pr { color: var(--gold); }
.ladder .lb.buy .nm, .ladder .lb.buy .pr { color: rgba(245, 184, 61, .75); font-weight: 600; font-size: 12px; }
.ladder .lb.cur.up .pr, .ladder .lb.cur.up .nm { color: var(--up); } .ladder .lb.cur.down .pr, .ladder .lb.cur.down .nm { color: var(--down); }
.ladder .lb::after { content: ""; position: absolute; left: 50%; }
.ladder-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.ladder-legend i { display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 5px; }

/* 주문표 (입력) */
.order .group + .group { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.order .gtitle { font-size: 14px; font-weight: 800; color: var(--text); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.order .gtitle small { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: 7px; }
.opt { color: var(--muted); font-weight: 500; }
.field { display: flex; align-items: center; gap: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; min-width: 0; transition: border-color .15s; }
.field:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--gold-soft); }
.field input { flex: 1; min-width: 0; width: 100%; height: 50px; border: 0; background: transparent; font: inherit; font-size: 19px; font-weight: 700; text-align: right; color: var(--text); outline: 0; }
.field input::placeholder { color: #45506a; font-weight: 600; }
.field .unit { font-size: 13.5px; color: var(--muted); font-weight: 700; flex: none; }
.field.big input { height: 56px; font-size: 22px; }

.rows { display: grid; gap: 8px; }
.row-head, .buy-row { display: grid; grid-template-columns: 38px minmax(0, 1.3fr) minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.row-head { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.buy-row .no { font-size: 13px; font-weight: 800; color: var(--gold); text-align: center; }
.row-del { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); font-size: 18px; cursor: pointer; }
.row-del:hover { color: var(--up); border-color: var(--up); }
.row-add { margin-top: 10px; width: 100%; height: 46px; border: 1px dashed var(--line2); border-radius: 11px; background: transparent; color: var(--gold); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.row-add:hover { background: var(--gold-soft); border-color: var(--gold); }
.row-add:disabled { opacity: .45; cursor: default; }

.warn { margin: 14px 0 0; padding: 12px 14px; border-radius: 11px; background: var(--up-soft); color: #ffb3b3; font-size: 14px; line-height: 1.6; }
.warn[hidden] { display: none; }

.btns { display: flex; gap: 8px; margin-top: 20px; }
.btns button { height: 56px; border-radius: 12px; font: inherit; font-size: 16.5px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btns svg { width: 18px; height: 18px; }
.copy { flex: 1; border: 0; background: var(--gold); color: #1a1405; }
.copy:hover { background: #ffc85a; }
.reset { padding: 0 22px; background: var(--panel2); color: var(--sub); border: 1px solid var(--line); }
.reset:hover { color: var(--text); border-color: var(--line2); }

/* 상세 내역 */
.kv { list-style: none; margin: 0; padding: 0; }
.kv li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.kv li:last-child { border-bottom: 0; }
.kv li > span:first-child { color: var(--sub); }
.kv li > span:last-child { font-weight: 700; text-align: right; }
.kv li.sum > span { color: var(--text); font-weight: 800; }
.note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* 물음표 도움말 */
.q { position: relative; display: inline-flex; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; color: var(--muted); font-size: 10px; font-weight: 800; align-items: center; justify-content: center; cursor: help; flex: none; outline: none; }
.q:hover, .q:focus { color: var(--gold); }
.q .tip { display: none; position: absolute; z-index: 20; left: -14px; top: 24px; width: 270px; background: #f2f5fb; color: #1a2233; text-align: left; font-size: 12.5px; font-weight: 500; line-height: 1.65; padding: 11px 13px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.45); letter-spacing: 0; white-space: normal; }
.q .tip::before { content: ""; position: absolute; left: 16px; top: -10px; border: 5px solid transparent; border-bottom-color: #f2f5fb; }
.q .tip b { color: #b06f00; }
.q:hover .tip, .q:focus .tip { display: block; }

.toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(10px); background: var(--gold); color: #1a1405; font-weight: 700; padding: 11px 20px; border-radius: 999px; font-size: 14px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 50; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* 설명 · 하단 */
.about { max-width: 1080px; margin: 44px auto 0; padding: 0 16px; color: #c3cbdb; font-size: 14.5px; line-height: 1.8; }
.about h2 { font-size: 18px; margin: 28px 0 8px; color: var(--text); }
.about strong { color: var(--text); }
footer { max-width: 1080px; margin: 44px auto 30px; padding: 20px 16px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: center; }
footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 8px; }
footer nav a { color: var(--sub); text-decoration: none; padding: 4px 0; }
footer nav a:hover, footer nav a[aria-current] { color: var(--gold); }
footer p { margin: 0; }

/* ── 태블릿 ── */
@media (max-width: 960px) {
  .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .tabs a { padding: 10px 13px; font-size: 14.5px; }
}
/* ── 휴대폰: 결과 패널을 위에 고정(입력하면서 결과 확인), 주문표 → 사다리 → 내역 ── */
@media (max-width: 760px) {
  .topbar { flex-direction: column; align-items: stretch; padding-top: 12px; }
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabs a { padding: 10px 4px; text-align: center; font-size: 14px; white-space: normal; }
  .topbar .seg { align-self: flex-end; }
  .title { padding: 16px 16px 12px; } .title h1 { font-size: 23px; }
  .term { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "order" "ladder" "detail"; gap: 12px; }
  .hero { position: sticky; top: 0; z-index: 10; border-radius: 0 0 16px 16px; margin: 0 -16px; padding: 12px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; box-shadow: 0 12px 24px -12px rgba(0,0,0,.7); }
  .stat { padding: 0 0 0 12px; } .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat .v { font-size: 17px; margin-top: 3px; } .stat.main .v { font-size: 24px; } .stat .v.cmp { font-size: 15.5px; }
  .stat .k { font-size: 12px; } .stat .s { font-size: 11.5px; min-height: 0; margin-top: 2px; }
  .stat .q { display: none; }
  .panel { padding: 16px; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .row-head, .buy-row { grid-template-columns: 30px minmax(0, 1.2fr) minmax(0, 1fr) 34px; gap: 6px; }
  .field { padding: 0 10px; } .field input { font-size: 17px; height: 48px; } .field.big input { font-size: 20px; height: 52px; }
  .ladder { height: 280px; }
  .q .tip { width: 232px; }
}