/*! * kimpgo — 다크 트레이딩 대시보드 스타일 * Copyright (c) 2026 kimpgo. All Rights Reserved. * 무단 복제 및 재배포를 금합니다. * build-id: kg-9f8ad7259ca8 */ :root { /* 도용 판별용 식별자. 스타일을 통째로 가져가면 이 값도 함께 딸려간다. */ --kg-build: 'kg-9f8ad7259ca8'; --bg: #070809; --surface: #101215; --surface-2: #181b20; --surface-3: #0d0f12; /* 입력칸처럼 한 단계 더 눌린 면 */ --border: #2a2f38; --border-strong: #3d4553; /* 마우스를 올렸을 때 드러나는 테두리 */ --text: #f7f9fc; --text-sub: #d2d8e2; /* 본문보다 한 단계 옅은 글자 */ --label: #b8c0cc; /* 값 옆에 붙는 한글 이름표 */ --muted: #818b98; --accent: #b7f24d; --up: #3ee08d; --down: #ff5566; --on-solid: #0c1400; /* 색을 꽉 채운 딱지 위에 얹는 글자 */ /* 꽉 채운 딱지의 테두리와, 줄 바탕에 까는 옅은 색조 */ --up-line: #2fb877; --down-line: #e03e4f; --tint-up: rgba(62, 224, 141, 0.06); --tint-down: rgba(255, 85, 102, 0.06); --tint: rgba(255, 255, 255, 0.04); /* 마우스를 올렸을 때 살짝 밝아지는 정도 */ --tint-faint: rgba(255, 255, 255, 0.015); --shadow: rgba(0, 0, 0, 0.5); /* * 차트 칩 노랑. 2026-08-25에 시안에서 바꿨다. * 라임(#b7f24d)과 붙어 있어도 갈리도록 초록 쪽이 아니라 주황 쪽으로 * 기운 노랑을 골랐다. 순수 노랑(#ffe14d)은 라임과 섞여 보인다. */ --chart-chip: #ffc93d; --chart-chip-line: rgba(255, 201, 61, 0.45); --chart-chip-fill: rgba(255, 201, 61, 0.14); --chart-chip-fill-hover: rgba(255, 201, 61, 0.26); /* 관심 별표와 뉴스 시각에 쓰는 시안 */ --chip-text: #7fe7ff; --chip-line: rgba(127, 231, 255, 0.45); --chip-fill: rgba(127, 231, 255, 0.12); --chip-fill-hover: rgba(127, 231, 255, 0.24); /* * 즐겨찾기 별. 노랑이다 (2026-08-30, 하늘색에서 바꿈). * * 왜 노랑인가 * 이 화면에서 **초록·빨강은 이미 오르고 내림**이다. 별을 그 색으로 * 칠하면 "이 코인이 올랐다" 로 읽힌다. 즐겨찾기는 값이 아니라 * 내가 표시해 둔 것이라 값의 색과 겹치면 안 된다. * 노랑은 이 화면에서 아무 뜻도 없고, 별=노랑은 아무도 안 배워도 * 아는 약속이다. * * 잘 보이는 정도도 재 봤다 (바탕 대비) * 노랑 13.5:1 · 연두 14.1 · 초록 10.9 · 빨강 6.0 · 하늘색(전) 8.6 * 연두가 조금 높지만 그건 이 사이트의 강조색이라 링크·단추와 겹친다. */ --star: #ffd83d; /* 각진 모서리가 이 화면의 성격이다 */ --radius: 2px; /* * 본문 한 줄의 최대 길이. em 이라 글자 크기를 따라간다 - * 13px 글이면 598px, 14px 글이면 644px 쯤이고 한 줄에 46자 안팎이다. * 한 줄이 이보다 길어지면 눈이 다음 줄 첫머리를 놓친다. */ --prose: 46em; /* 좌 300 + 간격 20 + 본문 1000 + 간격 20 + 우 300 = 1640px. 좌우 레일은 애드센스 300×600 규격에 맞춘 폭이다. */ --content-width: 1000px; --rail-width: 300px; --gutter: 20px; --page-pad: 16px; /* box-sizing이 border-box라 max-width에 좌우 패딩이 포함된다. 패딩을 더해주지 않으면 본문 열이 그만큼 좁아진다. */ --shell-width: calc( var(--content-width) + var(--rail-width) * 2 + var(--gutter) * 2 + var(--page-pad) * 2 ); } /* 밝은 바탕에서는 옅은 회색 글자가 잘 안 읽혀 한 단계 진하게 쓴다 */ :root[data-theme="light"] .status, :root[data-theme="light"] .disclaimer, :root[data-theme="light"] .header-link { color: var(--text-sub); } /* * 밝은 테마. * * 기본은 어두운 화면이다. 가 붙었을 때만 색을 갈아끼운다. * 오르내림 색(초록·빨강)은 두 테마에서 같아야 값의 뜻이 흔들리지 않으므로 * 밝은 바탕에서 읽히도록 조금 진하게만 바꾼다. */ :root[data-theme="light"] { --bg: #f6f7f9; --surface: #ffffff; --surface-2: #eef0f3; --surface-3: #f8f9fb; --border: #dfe3e9; --border-strong: #b6bdc7; --text: #12151a; --text-sub: #3d4550; --label: #545c68; --muted: #616a76; /* * 라임은 흰 바탕에서 안 보인다. 같은 계열로 눌러 쓴다. * 흰 바탕만 보고 정하면 안 된다 — 목록처럼 한 단계 어두운 칸(#eef0f3) * 위에서 #4f7a00 은 4.47로 미달이었다. */ --accent: #4a7300; /* 옅은 색 배경 위에 같은 색 글자를 얹는 자리가 많아 한 단계 눌러 쓴다 */ --up: #067a4b; --down: #c01824; --on-solid: #ffffff; --up-line: #04603b; --down-line: #99121c; --tint-up: rgba(6, 122, 75, 0.06); --tint-down: rgba(192, 24, 36, 0.06); --tint: rgba(0, 0, 0, 0.04); --tint-faint: rgba(0, 0, 0, 0.015); --shadow: rgba(15, 23, 42, 0.18); /* 노랑은 흰 바탕에서 아예 안 보인다. 같은 계열을 끝까지 눌러 쓴다. #8a5b00 은 목록 칸(#eef0f3) 위에서 6.2:1 로, 글자 기준(4.5)을 넘긴다. */ --chart-chip: #8a5b00; --chart-chip-line: rgba(138, 91, 0, 0.45); --chart-chip-fill: rgba(138, 91, 0, 0.10); --chart-chip-fill-hover: rgba(138, 91, 0, 0.20); /* 시안도 흰 바탕에서는 거의 안 보인다. 같은 계열로 눌러 쓴다. */ --chip-text: #0b6a86; --chip-line: rgba(11, 106, 134, 0.45); --chip-fill: rgba(127, 231, 255, 0.20); --chip-fill-hover: rgba(127, 231, 255, 0.36); /* * 밝은 화면에서는 노랑이 흰 바탕에 묻힌다(#ffd83d 는 1.4:1). * 어두운 금빛으로 내려 쓴다. * * 2026-09-01에 한 단계 더 내렸다(#8a6d00 -> #836800). 앞의 값은 흰 * 바탕에서 4.92 였지만 **목록 칸(#eef0f3) 위에서는 4.31** 로 미달이었다. * 흰 바탕만 보고 정하면 안 된다 - 별이 실제로 얹히는 자리는 목록 칸이다. */ --star: #836800; } /* * 베이지 테마. * * 흰 화면이 눈부시다는 사람을 위한 것이다. 종이에 가까운 따뜻한 바탕에 * 검은 글자를 얹는다. * * **바탕만 바꾸지 않는다.** 테두리·회색 글자·옅은 칸까지 같은 폭으로 함께 * 데운다 - 바탕만 누렇고 나머지가 회색이면 색이 겉돌아 더 지저분해진다. * * 카드(--surface)는 바탕보다 **밝게** 둔다. 밝은 화면에서 카드는 바탕 위로 * 떠올라야 하는데, 바탕보다 어두우면 파인 것처럼 보인다. * * 값의 뜻이 흔들리면 안 되므로 오르내림 색은 밝은 테마와 같이 간다. */ :root[data-theme="beige"] { --bg: #ece2cc; /* 카드는 바탕보다 밝게 — 떠 있어야 카드로 읽힌다 */ --surface: #f9f3e4; --surface-2: #e2d7be; --surface-3: #f4ecd9; --border: #d5c8ad; --border-strong: #b0a083; --text: #191510; --text-sub: #423829; --label: #564a37; --muted: #62553e; /* 라임은 밝은 바탕에서 안 보인다. 밝은 테마와 같은 계열로 눌러 쓴다 */ /* * 라임은 밝은 바탕에서 안 보인다. 눌러 쓰되 **가장 어두운 칸** * (--surface-2 #e2d7be) 위에서 재야 한다 - 바탕만 보고 정하면 * 목록 칸 위에서 4.1 로 미달이었다. */ --accent: #416700; --up: #066b42; --down: #b5161f; --on-solid: #ffffff; --up-line: #045539; --down-line: #8d1018; --tint-up: rgba(6, 113, 69, 0.07); --tint-down: rgba(181, 22, 31, 0.07); --tint: rgba(72, 55, 20, 0.06); --tint-faint: rgba(72, 55, 20, 0.025); --shadow: rgba(60, 46, 20, 0.18); --chart-chip: #7f5300; --chart-chip-line: rgba(127, 83, 0, 0.45); --chart-chip-fill: rgba(127, 83, 0, 0.10); --chart-chip-fill-hover: rgba(127, 83, 0, 0.20); --chip-text: #0a627c; --chip-line: rgba(10, 98, 124, 0.45); --chip-fill: rgba(127, 231, 255, 0.22); --chip-fill-hover: rgba(127, 231, 255, 0.38); /* * 별(즐겨찾기)은 장식이 아니라 뜻을 지닌 글자다. 노랑(#ffd83d)은 * 베이지 위에서 1.3:1 로 아예 안 보인다. 호박색으로 끝까지 눌러 쓴다. */ --star: #7e5404; } * { box-sizing: border-box; } body { /* * 한글 줄바꿈. * * 기본값은 낱말 안에서도 끊어서 "이동합니 / 다" 같은 줄이 나온다. * keep-all 은 띄어쓰기 단위로만 끊으므로 한글에서 훨씬 자연스럽다. * 대신 긴 영문·주소가 칸을 밀어낼 수 있어 그때만 끊도록 함께 둔다. */ word-break: keep-all; overflow-wrap: break-word; margin: 0; background: var(--bg); color: var(--text); font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* 숫자가 바뀔 때 자릿수가 흔들리지 않도록 고정폭 숫자를 쓴다 */ .num, td, .summary-item strong, .card-price { font-variant-numeric: tabular-nums; } /* * --- 홈 화면에 추가 안내 띠 --- * * 화면 아래에 얇게 깐다. 구글은 본문을 덮는 안내창을 검색에서 감점하는데, * 자리를 조금만 쓰는 띠는 여기 해당하지 않는다. 그래서 덮지 않고 깐다. * 아이폰은 화면 맨 아래가 홈 막대에 가려서 그만큼 띄운다. */ .install-bar { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 60; width: calc(100% - 24px); max-width: 420px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); } .install-icon { width: 36px; height: 36px; border-radius: 8px; flex: none; } .install-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; } .install-text strong { font-size: 13.5px; } .install-text span { color: var(--muted); font-size: 12px; } .install-go { margin-left: auto; flex: none; padding: 7px 14px; border: 0; border-radius: 8px; background: var(--accent); color: #070809; font-weight: 700; font-size: 13px; cursor: pointer; } .install-close { flex: none; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; } .install-close:hover { color: var(--text); } /* 추가 단추가 없는 아이폰 안내는 글이 자리를 다 쓴다 */ .install-bar:not(:has(.install-go)) .install-text { margin-right: auto; } /* --- 상단 요약 바 --- */ .summary-bar { background: var(--surface); border-bottom: 1px solid var(--border); font-size: 13.5px; } /* 헤더·본문 열과 좌우 끝을 맞춘다. 화면 전체 폭을 쓰면 아래 내용과 어긋나 보인다. */ .summary-inner { max-width: calc(var(--content-width) + var(--page-pad) * 2); margin: 0 auto; padding: 8px var(--page-pad); display: flex; flex-wrap: wrap; align-items: center; /* * 항목 사이 22px 이면 1000px 화면에서 9px 이 모자라 동시접속자가 * 아랫줄로 떨어진다. 18px 로 줄여 한 줄을 지킨다. */ gap: 8px 18px; } .summary-item { display: flex; align-items: center; gap: 6px; } .summary-item .label { color: var(--label); font-weight: 500; } .summary-item .sub { color: var(--muted); font-size: 12.5px; } .summary-right { margin-left: auto; } /* * 값 옆에 붙는 거래소·코인 로고. 어디서 온 숫자인지 알리는 표시다. * 글자 높이(14px)보다 살짝 작게 두어야 줄이 안 두꺼워진다. * 그림을 못 받으면 자바스크립트가 hidden 을 붙여 자리째 없앤다. */ .sum-logo { width: 15px; height: 15px; border-radius: 50%; flex: none; margin-right: -1px; } .status { padding: 1px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); color: var(--muted); } .status[data-state="live"] { color: var(--up); border-color: rgba(62, 224, 141, 0.4); } .status[data-state="lost"] { color: var(--down); border-color: rgba(255, 85, 102, 0.4); } /* --- 헤더 --- */ .site-header { border-bottom: 1px solid var(--border); background: var(--bg); } /* 헤더 내용은 가운데 본문 열과 좌우 끝을 맞춘다 (패딩만큼 더 넓게 잡는다) */ .header-inner { max-width: calc(var(--content-width) + var(--page-pad) * 2); margin: 0 auto; padding: 14px var(--page-pad); display: flex; align-items: center; gap: 24px; } /* * 글자는 'kimpgo' 그대로 두고 보이기만 대문자로 바꾼다. * 글자 자체를 KIMPGO 로 적으면 화면 읽기 프로그램이 낱자로 읽고 * (케이·아이·엠…) 복사해도 대문자가 따라붙는다. * * 자간을 음수에서 양수로 뒤집은 이유 - 소문자는 서로 붙여야 한 낱말로 * 보이는데, 대문자는 네모난 글자가 이어져서 붙이면 답답해 보인다. */ .logo { font-size: 1.35rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--accent); } .nav { display: flex; align-items: stretch; gap: 18px; white-space: nowrap; } .nav a { display: flex; align-items: center; color: var(--muted); padding: 6px 0; border-bottom: 2px solid transparent; font-size: 14.5px; } /* 두 줄짜리 항목 — 윗줄은 작은 강조 글씨 */ .nav a.nav-two-line { flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.15; padding: 2px 0; } .nav-top { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--chip-text); } .nav-main { font-size: 14.5px; } /* * 한글 옆의 로마자. * 14.5px 에서 한글 '김'은 14px 을 채우는데 대문자 'M'은 11px(79%), * 소문자 'm'은 8px(57%) 밖에 안 된다. 소문자를 한글 높이에 맞추려면 * 25px 이 되어야 하고, 그러면 'p' 꼬리가 메뉴 밖으로 나간다. * 그래서 대문자로 쓰고 자간만 조금 벌린다. * * 소문자로 바꾸고 싶으면 - pages.js 의 이름표를 '김프map' 으로 되돌리고 * 아래 font-size 를 1.18em 으로 올리면 된다. */ /* * 한글 옆에 붙는 로마자 소문자 (김프map). * * 색은 브랜드색(라임)이다. 김프map 은 화면 이름이라 어디에 나오든 - * 메뉴, 첫 화면의 "김프map →", 화면 제목 - 같은 색이어야 한다. * 전에는 TODAY 와 같은 청록이었는데, 그러면 KIMPGO 로고와 딴 색이 되어 * 우리 이름이 아니라 남의 꼬리표처럼 보였다. 2026-08-24에 맞췄다. * 청록(--chip-text)은 차트 칩·관심 별표·뉴스 시각에 그대로 남아 있다. * * 굵기 700 은 TODAY 와 같고 크기는 한 단 위다 - TODAY 는 10px, * 이쪽은 14px 다. TODAY 는 시장온도 위에 얹는 꼬리표라 작아도 되지만, * map 은 이름의 일부라 너무 작으면 딸려 보인다. * em 이라 큰 제목(16px)에서도 비율이 유지된다. * * line-height: 0 인 이유 - 이걸 안 주면 로마자가 자기 줄상자를 만들어 * 메뉴 칸 높이를 밀고, 위아래가 뒤틀린다. 0으로 두면 글자는 그대로 * 그려지고 줄 높이는 옆의 한글이 정한다. * * position/top 인 이유 - 작은 글자를 그냥 두면 기준선에 붙어 아래로 * 처진다. 한글 네모칸의 한가운데에 오도록 끌어올린다. vertical-align: * middle 은 한글이 아니라 로마자 어깨선을 기준으로 잡아서 2px 쯤 낮다. */ .nav-latin, .brand-latin { font-size: 0.96em; font-weight: 700; letter-spacing: 0.02em; line-height: 0; position: relative; top: -0.26em; /* 한글 네모칸 한가운데에 맞춘 값 - 재서 나왔다. 메뉴(14.5px)는 -0.287em, 큰 제목(16px)은 -0.228em 이 꼭 맞는 값이라 가운데를 잡았다 */ margin-left: 0.5px; } .nav-latin, .brand-latin { color: var(--accent); /* KIMPGO 로고와 같은 라임 */ } /* 고른 항목이어도 로마자 색은 그대로 둔다 — 이름의 일부라 늘 같은 색이다 */ .nav a.active .nav-latin { color: var(--accent); } .nav a.nav-two-line.active .nav-main { font-weight: 600; } .nav a:hover { color: var(--text); } .nav a.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; white-space: nowrap; } .header-link { color: var(--muted); font-size: 14px; } .header-link:hover { color: var(--text); } .header-link.disabled { opacity: 0.5; cursor: not-allowed; } /* 어두운 화면 · 밝은 화면 전환 */ .theme-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--label); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.4; cursor: pointer; } .theme-toggle:hover { border-color: var(--border-strong); color: var(--text); } /* 지금 테마를 그림 하나로 알린다 — 어두우면 달, 밝으면 해 */ .theme-icon { width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; -webkit-mask-image: var(--theme-icon); mask-image: var(--theme-icon); } :root { --theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.4 10.2A5.6 5.6 0 0 1 6.1 2.8a5.9 5.9 0 1 0 7.3 7.4Z'/%3E%3C/svg%3E"); } :root[data-theme="light"] { --theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.4'/%3E%3Cg%3E%3Crect x='7.2' y='0' width='1.6' height='3' rx='.8'/%3E%3Crect x='7.2' y='13' width='1.6' height='3' rx='.8'/%3E%3Crect x='0' y='7.2' width='3' height='1.6' rx='.8'/%3E%3Crect x='13' y='7.2' width='3' height='1.6' rx='.8'/%3E%3Crect x='1.9' y='2.7' width='1.6' height='3' rx='.8' transform='rotate(-45 2.7 4.2)'/%3E%3Crect x='12.5' y='10.3' width='1.6' height='3' rx='.8' transform='rotate(-45 13.3 11.8)'/%3E%3Crect x='2.7' y='10.3' width='3' height='1.6' rx='.8' transform='rotate(45 4.2 11.1)'/%3E%3Crect x='10.3' y='2.7' width='3' height='1.6' rx='.8' transform='rotate(45 11.8 3.5)'/%3E%3C/g%3E%3C/svg%3E"); } /* 베이지는 색 동그라미 하나. 해도 달도 아니니 색 자체를 보여준다 */ :root[data-theme="beige"] { --theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.6'/%3E%3C/svg%3E"); } /* --- 레이아웃 (좌 광고 / 본문 / 우 광고) --- */ .page-shell { display: grid; grid-template-columns: var(--rail-width) minmax(0, var(--content-width)) var(--rail-width); gap: var(--gutter); justify-content: center; max-width: var(--shell-width); margin: 0 auto; padding: 20px var(--page-pad) 60px; } .content { min-width: 0; } /* 그리드 안에서 표가 넘칠 때 열 폭이 밀리지 않도록 */ .rail { min-width: 0; } /* 스크롤을 내려도 광고가 따라오게 한다 */ .rail-sticky { position: sticky; top: 16px; } /* 광고 자리를 끈 채로 내보낼 때 (AD_SLOTS=off) - 레일 칸 자체가 없다 */ .page-shell.no-rails { grid-template-columns: minmax(0, var(--content-width)); } /* 좌우 레일을 다 넣을 수 없는 폭에서는 본문만 보여준다 (1000+300*2+20*2+16*2 = 1672) */ @media (max-width: 1671px) { .page-shell { grid-template-columns: minmax(0, var(--content-width)); } .rail { display: none; } } /* * 제목과 부제. h2 가 덩어리라 부제는 늘 아랫줄로 내려가는데, * margin-left 로 띄워 두면 그 8px 이 그대로 남아 제목보다 밀려 보였다. * 가로로 늘어놓고 넘칠 때만 줄을 바꾸면 왼쪽 선이 맞는다. */ .section-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 1px; margin-bottom: 10px; } /* * 화면마다 맨 위 제목만 h1 이고 나머지는 h2 다. 검색과 읽기 프로그램은 * h1 을 "이 화면의 주제"로 읽는다. 보이는 모습은 둘이 같아야 하므로 * 여기서 함께 묶는다 - 브라우저 기본 h1 은 2em 이라 안 묶으면 갑자기 * 커진다. */ .section-head h1, .section-head h2 { font-size: 16px; margin: 0; font-weight: 700; } .panel { margin-bottom: 26px; } .panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .panel-head h2 { font-size: 16px; margin: 0; font-weight: 700; } .panel-sub { color: var(--muted); font-size: 13px; } /* --- 지표 카드 --- */ /* 본문 1000px에 8개가 한 줄로 들어가는 최소 폭 */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; margin-bottom: 26px; } .card { /* * 세로로 세우고 등락률 줄을 바닥에 붙인다. * * 달러로 표시되는 카드에만 원화 환산 줄이 있어, 그냥 두면 카드마다 * 줄 수가 달라져 차트 칩이 위아래로 어긋난다. 바닥에 붙이면 한 줄에 * 놓인 카드들의 칩이 같은 높이에 온다(격자가 카드 높이를 맞춰 준다). */ display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 11px; min-width: 0; } /* 시장지표 카드는 한 줄에 여덟 개라 좌우를 조금 아낀다 */ #highlight-cards .card { padding-left: 9px; padding-right: 9px; } .card-name { display: flex; align-items: center; gap: 4px; color: var(--label); font-size: 12.5px; margin-bottom: 5px; white-space: nowrap; } /* * 시장지표 카드는 폭이 118px뿐이라 이름 앞 색점까지 두면 그만큼 이름이 * 짧아진다. 오르내림 색은 바로 아래 등락률에 이미 있어 색점 없이도 읽힌다. */ #highlight-cards .card-name { gap: 0; } #highlight-cards .card-name .dot { display: none; } .card-name .nm { overflow: hidden; text-overflow: ellipsis; } .card-name .dot { display: inline-block; flex: none; width: 5px; height: 5px; border-radius: 50%; margin-right: 5px; vertical-align: middle; background: currentColor; } /* * 차트 버튼은 등락률과 같은 줄, 오른쪽 끝에 둔다. * * 이름 줄에 두었더니 폭이 118px뿐이라 이름이 네 글자에서 잘렸다 * (비트코인 → 비트코…). 아래로 내리면 이름이 줄 전체를 쓴다. */ .card { position: relative; } .card-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; } .card-chart-btn { margin-left: auto; flex: none; padding: 0 3px; gap: 2px; } .card-chart-btn .chart-toggle-label { font-size: 9.5px; } .card-chart-btn svg { width: 8px; height: 8px; } /* 차트를 펼친 카드는 한 줄을 다 쓴다 */ .card.expanded { grid-column: 1 / -1; } /* 펼친 카드는 아래에 차트가 붙으므로 등락률 줄을 바닥으로 밀지 않는다 */ .card.expanded .card-foot { margin-top: 0; } .card-symbol { opacity: 0.7; margin-left: 4px; } .card-price { font-size: 1.02rem; font-weight: 700; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-sub { color: var(--muted); font-size: 12px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-change { font-size: 12.5px; } /* 카드 이름 앞의 상태 점 */ /* --- 시장 지표 화면 --- */ /* 숫자를 읽기 전에 전체 방향부터 보이게 하는 띠 */ .mood-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px; } .mood-main { display: flex; align-items: center; gap: 10px; } .mood-tag { padding: 3px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; border: 1px solid currentColor; } .mood-text { font-size: 14.5px; } .mood-stats { margin-left: auto; display: flex; gap: 16px; font-size: 13.5px; color: var(--muted); } .mood-stats strong { font-variant-numeric: tabular-nums; } .indicator-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; margin-bottom: 20px; } /* 공포·탐욕 */ .fng-panel, .fx-effect { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } .fng-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; } .fng-head h3, .fx-effect h3 { font-size: 14.5px; margin: 0; font-weight: 700; } /* 시장 전망이 아니라 계산식에서 나온 값임을 제목 옆에 표시한다 */ .tag-calc { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 500; vertical-align: middle; } .fng-updated { color: var(--muted); font-size: 12.5px; } .fng-body { display: flex; align-items: center; gap: 20px; } .fng-value { text-align: center; flex: none; } .fng-number { font-size: 2.4rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .fng-label { color: var(--text-sub); font-size: 13px; margin-top: 4px; } .fng-right { flex: 1; min-width: 0; } /* 0~100 위치를 눈금 위에 점으로 찍는다 */ .fng-track { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--down) 0%, #b8892b 50%, var(--up) 100%); } .fng-marker { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--bg); transform: translate(-50%, -50%); transition: left 0.3s ease; } .fng-ticks { display: flex; justify-content: space-between; color: var(--muted); font-size: 11.5px; margin-top: 6px; } .fng-trend { margin: 10px 0 6px; height: 24px; } .fng-trend .spark { width: 100%; height: 24px; } .fng-compare { display: flex; gap: 14px; color: var(--muted); font-size: 12.5px; } .fng-compare strong { color: var(--text); font-variant-numeric: tabular-nums; } /* 환율과 김프 */ .fx-effect-rate { font-size: 1.5rem; font-weight: 700; margin: 10px 0 6px; font-variant-numeric: tabular-nums; } .fx-effect-text { font-size: 13.5px; color: var(--text-sub); margin: 0 0 10px; line-height: 1.6; } .fx-effect-note { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.7; padding-top: 10px; border-top: 1px solid var(--border); } .fx-effect-note strong { color: var(--text); } /* 정렬 도구 */ .indicator-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .sort-group { display: flex; gap: 4px; } .sort-group button { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 6px 12px; font-size: 13.5px; font-family: inherit; cursor: pointer; } .sort-group button:hover { color: var(--text); } .sort-group button.on { background: var(--accent); border-color: var(--accent); color: var(--on-solid); font-weight: 600; } .indicator-toolbar .count { margin-left: auto; } /* 지표 카드 */ .ind-group { margin-bottom: 22px; } .ind-group-title { font-size: 13.5px; color: var(--label); font-weight: 600; margin: 0 0 8px; } .ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } /* * 카드 전체를 색으로 물들이면 지저분해 보인다. 바탕은 그대로 두고 * 왼쪽 가장자리 선과 등락 배지로만 방향을 드러낸다. */ .ind-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px 10px; min-width: 0; overflow: hidden; transition: border-color 0.15s ease, transform 0.15s ease; } .ind-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border); } .ind-card.up::before { background: var(--up); } .ind-card.down::before { background: var(--down); } .ind-card:hover { border-color: var(--border-strong); transform: translateY(-1px); } .ind-name { color: var(--muted); font-size: 12.5px; margin-bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ind-price { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; } .ind-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 6px; } /* 등락률은 알약 모양 배지로 묶어 값과 구분되게 한다 */ .ind-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .ind-badge .arrow { font-size: 8px; line-height: 1; } .ind-badge.up { background: rgba(62, 224, 141, 0.14); color: var(--up); } .ind-badge.down { background: rgba(255, 85, 102, 0.14); color: var(--down); } .ind-badge.flat { background: rgba(125, 136, 153, 0.14); color: var(--muted); } .spark { width: 76px; height: 32px; flex: none; } .spark-slot { display: flex; flex: none; } /* 카드 안에서 여는 차트 */ .ind-name { display: flex; align-items: center; gap: 6px; } .ind-name .nm { overflow: hidden; text-overflow: ellipsis; } /* 모양은 코인 표의 차트 버튼(.chart-toggle)을 그대로 쓰고 위치만 잡는다 */ .ind-chart-btn { margin-left: auto; flex: none; } .ind-card.expanded { grid-column: 1 / -1; } .ind-chart { margin-top: 12px; } .ind-chart > div { min-height: 60px; } /* 직접 그리는 지표 차트 */ .line-chart { width: 100%; height: 260px; display: block; } .line-chart .grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; } .line-chart .axis { fill: var(--muted); font-size: 12px; font-family: inherit; } /* 봉 차트 — 오르면 초록, 내리면 빨강 (사이트의 다른 시세 표기와 같은 규칙) */ .line-chart .wick { stroke-width: 1; vector-effect: non-scaling-stroke; } .line-chart .wick.up, .line-chart .body.up { stroke: var(--up); fill: var(--up); } .line-chart .wick.down, .line-chart .body.down { stroke: var(--down); fill: var(--down); } /* 카드 안에 띄우는 트레이딩뷰 위젯. 우리 차트와 높이를 맞춘다 */ .card-tv { height: 300px; } /* 카드 숫자와 다른 상품을 그렸을 때 무엇인지 밝힌다 */ .tv-note { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; } /* 거래량 막대는 봉을 읽는 데 방해되지 않게 흐리게 깐다 */ .line-chart .vol.up { fill: var(--up); opacity: 0.4; } .line-chart .vol.down { fill: var(--down); opacity: 0.4; } /* 지금 값 — 가로 점선과 오른쪽 값표 */ .line-chart .last-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.7; vector-effect: non-scaling-stroke; } .line-chart .last-tag.up { fill: var(--up); } .line-chart .last-tag.down { fill: var(--down); } .line-chart .last-val { fill: var(--on-solid); font-size: 12px; font-weight: 700; font-family: inherit; } .chart-ranges { display: flex; gap: 4px; margin-bottom: 8px; } .range-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 5px; padding: 3px 10px; font-size: 12.5px; font-family: inherit; cursor: pointer; } .range-btn:hover { color: var(--text); } .range-btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-solid); font-weight: 600; } .chart-msg { display: flex; align-items: center; justify-content: center; height: 120px; color: var(--muted); font-size: 13.5px; } /* 국내 거래량과 김프 */ /* * 거래량과 김프 — 전체 폭에서 둘을 나란히. * * 원래는 오른쪽 좁은 칸(1fr) 안에 세로로 쌓여 있었다. 그 탓에 오른쪽만 * 길어지고 왼쪽 공포·탐욕 아래로 500px 넘게 비었다. 밖으로 빼서 나눴다. */ .vp-panel { display: grid; /* 폰(375px)에서 안쪽 폭이 307px이라 320이면 13px 삐져나간다 */ grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px 24px; margin-bottom: 20px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .vp-col h4 { font-size: 13.5px; margin: 0 0 10px; font-weight: 700; } .vp-col .fx-effect-note { margin-bottom: 0; } /* 둘로 갈라졌을 때 가운데 경계 */ .vp-panel .vp-col + .vp-col { padding-left: 24px; border-left: 1px solid var(--border); } @media (max-width: 780px) { .vp-panel .vp-col + .vp-col { padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--border); } } .vp-rows { margin-bottom: 10px; } .vp-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-sub); padding: 3px 0; } .vp-row strong { font-variant-numeric: tabular-nums; } .vp-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; } .vp-sub { font-size: 13.5px; margin: 14px 0 10px; font-weight: 700; } /* 자료가 얼마나 모였는지 보여주는 막대 */ .ph-progress { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; margin: 4px 0 8px; } .ph-progress i { display: block; height: 100%; background: var(--accent); transition: width 0.3s ease; } .fng-explain { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 0 0 12px; } .fng-explain strong { color: var(--text-sub); } .fng-explain em { font-style: normal; text-decoration: underline; text-underline-offset: 2px; } .fng-explain a { color: var(--accent); } .fng-explain a:hover { text-decoration: underline; } @media (max-width: 780px) { .indicator-top { grid-template-columns: 1fr; } .mood-stats { margin-left: 0; width: 100%; } .fng-body { flex-direction: column; align-items: stretch; gap: 12px; } .fng-value { text-align: left; } } /* --- 김프 손익 계산기 --- */ .calc-intro { font-size: 14px; color: var(--text-sub); line-height: 1.8; margin: 0 0 16px; } .calc-intro strong { color: var(--text); } /* * 계산기는 세 칸이다 — 급등락 · 입력 · 결과. * 김프가 벌어진 종목을 왼쪽에서 보고 바로 옆에서 얼마가 남는지 재도록 붙였다. * 급등락 칸은 값이 짧아 좁아도 되고, 입력과 결과는 넉넉해야 한다. */ .calc-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; } .calc-movers { display: grid; gap: 12px; } .calc-movers .mv-panel { margin-bottom: 0; } .calc-inputs, .calc-result { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } /* * 코인 고르기 — 치는 대로 좁혀지는 목록. * * 기본 드롭다운(select) 안에는 그림을 못 넣어서 직접 만들었다. * 코인은 이름보다 로고로 먼저 알아보기 때문에 로고를 함께 보여준다. */ .calc-pick { position: relative; margin-bottom: 10px; } .calc-search { width: 100%; background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 8px 10px; font-family: inherit; font-size: 13.5px; font-weight: 600; } .calc-search:focus { outline: none; border-color: var(--accent); } .calc-search::placeholder { color: var(--muted); font-weight: 400; } .calc-options { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: 0 10px 28px var(--shadow); } .calc-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; } .calc-option.active { background: var(--tint); } .calc-option[aria-selected="true"] { color: var(--accent); } .opt-icon { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--surface-3); } .opt-icon.no-icon { visibility: hidden; } .opt-sym { font-size: 13px; font-weight: 700; } .opt-name { color: var(--label); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; } .calc-empty-option { padding: 10px 8px; color: var(--muted); font-size: 13px; } /* 수수료 칸 — 필요한 사람만 펼쳐 쓴다 */ .calc-fees { margin-top: 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--tint-faint); } .calc-fees > summary { padding: 9px 12px; color: var(--label); font-size: 13.5px; font-weight: 600; cursor: pointer; user-select: none; list-style: none; } .calc-fees > summary::-webkit-details-marker { display: none; } .calc-fees > summary::before { content: '▸'; display: inline-block; margin-right: 6px; color: var(--muted); transition: transform 0.15s ease; } .calc-fees[open] > summary::before { transform: rotate(90deg); } .calc-fees > summary:hover { color: var(--text); } .calc-fees > *:not(summary) { margin-left: 12px; margin-right: 12px; } .calc-fees > .calc-note { margin-bottom: 12px; } .calc-load { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-sub); border-radius: 6px; padding: 8px 0; font-size: 13.5px; font-family: inherit; cursor: pointer; margin-bottom: 6px; } .calc-load:hover { border-color: var(--accent); color: var(--text); } /* 거래 방향 — 지금 어느 쪽으로 도는 계산인지 */ .calc-way { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; } .calc-way-text { color: var(--text-sub); font-size: 13px; font-weight: 600; } .calc-swap { margin-left: auto; flex: none; width: 30px; height: 26px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--label); font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer; } .calc-swap:hover { border-color: var(--accent); color: var(--accent); } /* 시세를 못 불러왔을 때만 나오는 줄 */ .calc-status { margin: 0 0 6px; color: var(--down); font-size: 12.5px; line-height: 1.6; } .calc-group { font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 16px 0 8px; } .calc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: 13.5px; color: var(--text-sub); } .calc-row input { width: 46%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; color: var(--text); padding: 7px 9px; font-size: 14px; font-family: inherit; text-align: right; font-variant-numeric: tabular-nums; } .calc-row input:focus { outline: none; border-color: var(--accent); } .calc-note { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 14px 0 0; } /* 결과 */ .calc-empty { display: flex; align-items: center; justify-content: center; min-height: 160px; color: var(--muted); font-size: 14px; text-align: center; } .calc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .calc-head > span { color: var(--label); font-size: 13.5px; } .calc-profit { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; } .calc-rate { font-size: 14px; font-weight: 600; margin-left: auto; } .calc-block { margin-top: 14px; } .calc-block h4 { font-size: 12.5px; color: var(--label); font-weight: 600; margin: 0 0 8px; } .calc-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--text-sub); padding: 4px 0; } .calc-line strong { color: var(--text); font-variant-numeric: tabular-nums; } .calc-compare { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 8px; } .calc-hint { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 8px 0 0; } .calc-hint strong { color: var(--text-sub); } /* 주의사항 */ .calc-caution { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-top: 14px; } .calc-caution h3 { font-size: 14px; margin: 0 0 12px; font-weight: 700; } /* * 넓은 화면에서 한 줄이 100글자씩 늘어나면 눈이 다음 줄 첫머리를 못 찾는다. * 칸을 나눠서 한 줄을 짧게 만든다. 한 칸이 360px 아래로 좁아지면 - * 좁은 창이나 휴대폰 - 저절로 한 줄짜리로 돌아간다. * * 격자(grid)가 아니라 단(columns)인 이유 - 격자는 한 줄에 놓인 칸들의 * 키를 가장 큰 것에 맞춘다. 왼쪽이 두 줄, 오른쪽이 다섯 줄이면 왼쪽 * 아래로 세 줄만큼 빈다. 단은 글이 흐르듯 채워서 그 빈 자리가 없다. */ .calc-caution ul { margin: 0; padding: 0; list-style: none; columns: 360px 2; column-gap: 30px; } .calc-caution li { position: relative; padding-left: 14px; margin: 0 0 10px; font-size: 13px; color: var(--muted); line-height: 1.8; break-inside: avoid; /* 한 항목이 두 단에 걸쳐 잘리지 않게 */ } .calc-caution li:last-child { margin-bottom: 0; } /* 점 하나. 글자 첫 줄 한가운데에 맞춘다 */ .calc-caution li::before { content: ''; position: absolute; left: 2px; top: calc(0.9em - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--label); } .calc-caution strong { color: var(--text-sub); } /* * 세 칸이 다 안 들어가는 폭에서는 급등락을 가로로 눕히고 아래를 둘로 나눈다. * 넓은 화면에서 맨 왼쪽에 있는 것과 같은 자리 - 맨 위다. * (한때 아래로 내려 봤지만, 곁눈질하려고 둔 칸이 아래에 있으면 안 보게 된다) */ @media (max-width: 1100px) { .calc-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .calc-movers { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } @media (max-width: 780px) { .calc-layout { grid-template-columns: 1fr; } } /* * 폰에서는 두 칸을 한 칸으로 합치고 탭으로 바꿔 끼운다. * * 세로로 쌓으면 두 칸이 자리를 두 배로 먹는다(435px). 합치면 줄을 셋에서 * 다섯으로 늘리고도 324px이다 — 계산기를 쓰러 온 화면이라 이 차이가 크다. * 넓은 화면에서는 나란히 있어 고를 일이 없으므로 탭을 감춘다. */ .mv-tabs { display: none; } @media (max-width: 700px) { .mv-tabs { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; } .mv-tab { flex: 1; padding: 7px 0; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--label); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .mv-tab.on { background: var(--accent); border-color: var(--accent); color: var(--on-solid); } .mv-tabs .mv-win { flex: none; margin-left: 2px; } /* 고른 칸만 보여준다. 제목은 탭이 대신하므로 감춘다. */ .calc-movers .mv-panel { display: none; border-radius: 0 0 var(--radius) var(--radius); } .calc-movers .mv-panel.on { display: block; } .calc-movers .mv-head { display: none; } /* 다섯 줄까지. 여섯 줄이면 화면을 너무 먹는다. */ .calc-movers .mv-list .mv-row:nth-child(n+6) { display: none; } } /* --- 금 프리미엄 화면 --- */ .section-sub { color: var(--muted); font-size: 13px; } /* * 첫 화면 맨 위 부제만 눈에서 감춘다. 지우지 않는 것은 읽기 프로그램과 * 검색에는 이 한 줄이 화면이 무엇인지 알려주는 유일한 글이기 때문이다. */ .sub-quiet { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } .gold-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 24px; text-align: center; margin-bottom: 14px; } .hero-label { color: var(--label); font-size: 13.5px; margin-bottom: 8px; } .hero-rate { font-size: 2.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .hero-diff { color: var(--text-sub); font-size: 14px; margin-top: 8px; } .gold-cards { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .gold-cards .card-price { font-size: 1.15rem; } .gold-explain { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; font-size: 14px; line-height: 1.8; color: var(--text-sub); } .gold-explain p { margin: 0 0 12px; } .gold-explain strong { color: var(--text); } .formula { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; margin: 0 0 14px; font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; overflow-x: auto; white-space: nowrap; } .gold-note { font-size: 13px; color: var(--muted); } .gold-note:last-child { margin-bottom: 0; } /* --- 준비 중 페이지 --- */ .page-placeholder { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 64px 32px; text-align: center; } .page-placeholder h1 { font-size: 1.4rem; margin: 0 0 12px; } .placeholder-note { color: var(--text-sub); margin: 0 0 6px; } .placeholder-status { color: var(--muted); font-size: 14px; margin: 0 0 24px; } .placeholder-link { color: var(--accent); font-size: 14px; } .placeholder-link:hover { text-decoration: underline; } /* --- 광고 영역 --- */ /* 자리를 미리 잡아두는 것이 핵심이다. 애드센스는 스크립트가 로드된 뒤에야 내용이 채워지는데, 높이를 비워두면 그때 본문이 밀리면서 화면이 튄다(CLS). */ .ad-slot { display: flex; align-items: center; justify-content: center; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--tint-faint); overflow: hidden; } .ad-placeholder { color: var(--muted); font-size: 12.5px; line-height: 1.6; } /* 애드센스 300×600 (와이드 스카이스크래퍼) */ .ad-rail { width: var(--rail-width); height: 600px; } /* 반응형 디스플레이 광고. 970×250 리더보드가 들어갈 높이를 잡아둔다. */ .ad-banner { width: 100%; min-height: 250px; margin-bottom: 22px; } .ad-bottom { margin: 28px 0 0; } @media (max-width: 780px) { /* 좁은 화면에서는 336×280 규격이 기준이 된다 */ .ad-banner { min-height: 280px; } } /* 광고가 안 채워졌을 때 빈 칸을 접는다. ------------------------------------------------------------------ 구글은 광고를 못 내보낸 자리에 data-ad-status="unfilled"를 직접 붙여준다. (채워지면 "filled") 구글이 붙이는 표시라 이걸 보고 감추는 것은 정책 위반이 아니다. 접지 않으면 자리만 잡아둔 250px·600px 상자가 그대로 남아, 화면에 커다란 검은 구멍이 생긴다 — 새벽처럼 광고 재고가 없는 시간대에 실제로 그렇게 된다. 맞바꾸는 것: 접히는 순간 본문이 그만큼 올라와 화면이 한 번 튄다(CLS). 구글이 재는 항목이라 실제 광고를 붙인 뒤 어느 쪽이 나은지 다시 볼 것. 레일(좌우)은 그리드 칸이 고정이라 접어도 본문이 안 움직인다 — 위아래 배너만 튄다. docs/배포-체크리스트.md B항 참고. */ ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; } .ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; } /* 실제 광고가 들어오면 개발용 점선 상자와 안내 문구는 비켜준다. 이게 없으면 광고 뒤에 "광고 영역 300 × 600" 글씨가 겹쳐 보인다. */ .ad-slot:has(ins.adsbygoogle) { border: 0; background: none; height: auto; min-height: 0; } .ad-slot:has(ins.adsbygoogle) .ad-placeholder { display: none; } /* 애드센스 심사 때는 광고 자리를 통째로 뺀다 - AD_SLOTS=off 로 내보내면 된다(src/config.js). 예전에는 로 점선과 글씨만 감췄는데, 그러면 250px 짜리 빈 구멍이 화면 위에 남아 만들다 만 화면으로 보였다. 자리째 빼는 편이 낫다. docs/배포-체크리스트.md B-6 참고. */ /* * 계산기와 계산 방법 사이. 원래 화면 둘이었던 것을 하나로 합쳐서, * 여기서부터 이야기가 바뀐다는 것을 눈에 보이게 끊어 준다. */ .calc-split { border: 0; border-top: 1px solid var(--border); margin: 40px 0 28px; scroll-margin-top: 90px; /* 머리글에 가리지 않게 (/calc#method 로 뛸 때) */ } /* * 아직 안 채운 자리. 개인정보처리방침·이용약관에서 상호·연락처·시행일처럼 * 사람이 적어 넣어야 하는 곳을 눈에 띄게 표시한다. 채우고 나면 이 표시를 * 지우면 된다. */ .mth-fill { padding: 1px 7px; border-radius: var(--radius); background: var(--tint-down); border: 1px dashed var(--down-line); color: var(--down); font-size: 0.94em; font-weight: 700; white-space: nowrap; } /* --- 바닥글 --- */ .site-foot { border-top: 1px solid var(--border); background: var(--surface); margin-top: 20px; } .foot-inner { max-width: calc(var(--content-width) + var(--page-pad) * 2); margin: 0 auto; padding: 22px var(--page-pad) 30px; } .foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; } .foot-links a { color: var(--text-sub); font-size: 13px; font-weight: 700; } .foot-links a:hover { color: var(--accent); text-decoration: underline; } /* 아직 주소가 없는 링크. 머리글 "로그인" 과 같은 표시를 쓴다 */ .foot-links a.disabled { opacity: 0.5; cursor: not-allowed; } .foot-links a.disabled:hover { color: var(--text-sub); text-decoration: none; } .foot-note { margin: 0 0 10px; max-width: var(--prose); color: var(--muted); font-size: 12.5px; line-height: 1.7; } /* 문장마다 한 줄. 문장 한가운데서 끊기지 않게 한다 */ .foot-note span, .disclaimer span { display: block; } .foot-note strong { color: var(--text-sub); } .foot-copy { margin: 0; color: var(--muted); font-size: 12px; } /* --- 차트 --- */ /* 기준 화면과 같은 높이 (툴바 포함 약 360px) */ .chart-box { position: relative; /* 고르개를 차트 위에 띄운다 */ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; height: 360px; } #tv-chart, .tv-chart, #gold-chart { height: 100%; } /* --- 거래소 선택 바 --- */ .exchange-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .exchange-label { color: var(--label); font-size: 13px; font-weight: 500; } select, input[type="search"] { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 14px; font-family: inherit; } select:disabled { opacity: 0.55; cursor: not-allowed; } select:focus, input[type="search"]:focus { outline: none; border-color: var(--accent); } /* * 펼쳐지는 목록은 운영체제가 그린다. 그래서 색을 따로 일러주지 않으면 * 어두운 화면에서도 흰 바탕에 흰 글씨가 되어 항목이 안 보인다. */ select option { background-color: var(--surface-2); color: var(--text); } /* * 거래소 고르기 — 기본 드롭다운(select) 안에는 그림을 못 넣어 직접 만들었다. * 닫혀 있을 때와 펼쳤을 때 모두 로고가 보인다. */ .ex-pick { position: relative; } .ex-pick-btn { display: inline-flex; align-items: center; gap: 7px; min-width: 160px; padding: 7px 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer; white-space: nowrap; } .ex-pick-btn:hover { border-color: var(--border-strong); } .ex-pick-btn[aria-expanded="true"] { border-color: var(--accent); } .ex-pick-label { margin-right: auto; } .ex-caret { width: 12px; height: 12px; flex: none; color: var(--muted); } .ex-caret svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; } .ex-pick-btn[aria-expanded="true"] .ex-caret { transform: rotate(180deg); } .ex-pick-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 320px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: 0 10px 28px var(--shadow); } .ex-pick-item { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 4px; font-size: 13.5px; white-space: nowrap; cursor: pointer; } .ex-pick-item:hover, .ex-pick-item.hover { background: var(--tint); } .ex-pick-item.on { color: var(--accent); font-weight: 700; } .ex-check { margin-left: auto; color: var(--accent); } /* 거래소 로고. 이미지가 안 뜨면 아래 깔린 약칭 글자가 보인다 */ .ex-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border-radius: 4px; overflow: hidden; font-size: 10px; font-weight: 700; letter-spacing: -0.5px; } .ex-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; } /* * 기준 거래소와 비교 거래소 사이의 "대비". * 단추가 아니라 방향을 알리는 표시다 - 두 목록(국내 원화 · 해외 USDT)은 * 서로 자리를 바꿀 수 없어서 맞바꾸기 단추를 둘 수 없다. */ .exchange-vs { color: var(--muted); font-size: 12.5px; padding: 0 2px; } .icon-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; height: 33px; min-width: 33px; padding: 0 8px; font-size: 15px; cursor: pointer; line-height: 1; } .icon-btn:hover { border-color: var(--accent); } .bar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .search-box { position: relative; display: flex; align-items: center; } .search-icon { position: absolute; left: 9px; font-size: 12px; opacity: 0.6; pointer-events: none; } .search-box input[type="search"] { padding-left: 28px; min-width: 190px; } .count { color: var(--label); font-size: 13px; white-space: nowrap; } /* --- 보기 설정 드롭다운 --- */ .settings { position: relative; } .settings-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 236px; padding: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 28px var(--shadow); } .settings-menu[hidden] { display: none; } .menu-section { padding: 8px 10px 4px; } .menu-title { display: block; color: var(--label); font-weight: 600; font-size: 12.5px; margin-bottom: 7px; } .menu-divider { height: 1px; background: var(--border); margin: 6px 4px; } .period-group { display: flex; gap: 4px; } .period-group button { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--muted); border-radius: 5px; padding: 5px 0; font-size: 13px; font-family: inherit; cursor: pointer; } .period-group button:hover { color: var(--text); } .period-group button.on { background: var(--accent); border-color: var(--accent); color: var(--on-solid); font-weight: 600; } /* 차트 지표 선택 */ .chart-select { min-width: 150px; font-size: 13.5px; padding: 5px 8px; } /* * 봉 간격 단추 줄. * * 기본은 **숨김**이다. PC 는 트레이딩뷰 위젯 제 도구줄에 간격 단추가 * 그대로 나와 있어 두 벌이 된다. 폰에서만 켠다 - 거기서는 위젯이 * 그 단추들을 목록으로 접어 버린다. */ .chart-tf { display: none; } .tf-btn { flex: 1 1 0; min-width: 0; padding: 5px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--label); font-size: 11.5px; font-weight: 600; cursor: pointer; } .tf-btn:hover { color: var(--text); border-color: var(--accent); } /* 고른 것은 김프고 강조색으로 채운다 - 한눈에 어느 간격인지 보여야 한다 */ .tf-btn.on { background: var(--accent); border-color: var(--accent); color: var(--surface); } /* * 차트 바닥 줄 안, 기간 단추와 시계 사이의 빈 자리에 얹는다. * 위젯이 iframe이라 안에 넣을 수 없어 위에 띄운다. */ .chart-foot { position: absolute; z-index: 2; /* 오른쪽 끝의 시계(21:03:22 UTC+9)를 가리지 않을 만큼만 띄운다 */ right: 132px; bottom: 11px; display: flex; align-items: center; gap: 7px; } .chart-foot-label { color: var(--label); font-size: 12.5px; font-weight: 500; } /* 차트 위에 얹히므로 배경을 깔아 글자가 봉에 묻히지 않게 한다 */ .chart-foot .chart-select, .chart-foot .ex-pick-btn { min-width: 0; padding: 4px 8px; font-size: 12.5px; background-color: var(--surface-2); } .chart-foot .ex-pick-btn { gap: 5px; } .chart-foot .ex-pick-label { font-weight: 600; } /* 목록은 차트 위쪽으로 펼친다. 아래로 펼치면 화면 밖으로 나간다 */ .chart-pick .ex-pick-list { top: auto; bottom: calc(100% + 4px); } .toggle-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 14px; cursor: pointer; user-select: none; } .toggle-row:hover { background: var(--tint); } .toggle-row > span:first-child { flex: 1; } /* 체크박스는 숨기고 스위치 모양을 대신 그린다 */ .toggle-row input { position: absolute; opacity: 0; pointer-events: none; } .switch { flex: none; width: 34px; height: 18px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background 0.15s ease; } .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; } .toggle-row input:checked ~ .switch { background: var(--accent); } .toggle-row input:checked ~ .switch::after { transform: translateX(16px); } .toggle-row input:focus-visible ~ .switch { outline: 2px solid var(--accent); outline-offset: 2px; } /* --- 테이블 --- */ /* * 표 안쪽에 따로 스크롤을 두지 않는다. 전 종목을 그대로 늘어놓고 * 페이지 자체가 스크롤되게 한다(스크롤바가 둘로 나뉘면 조작이 번거롭다). * overflow를 걸면 헤더 고정(sticky)이 이 상자 기준으로 바뀌므로 걸지 않는다. */ .table-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; font-size: 14px; } /* 값을 열 이름 기준으로 가운데 맞춘다 (이름 열만 왼쪽) */ th, td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; } /* 페이지를 내려도 열 이름이 화면 위에 붙어 있게 한다 */ th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); /* 흐린 회색에 12px이면 열 이름이 아래 숫자에 묻힌다. 값보다 살짝 큰 글자로 세운다. */ color: var(--text-sub); font-weight: 600; font-size: 14.5px; letter-spacing: -0.2px; padding-top: 11px; padding-bottom: 11px; box-shadow: inset 0 -1px 0 var(--border); } /* * 정렬 가능한 열은 항상 위·아래 화살표를 보여주고 활성 방향만 강조한다. * 화살표를 글자 옆에 그대로 두면 그만큼 열 이름이 왼쪽으로 밀려 아래 숫자와 * 중심이 어긋나므로, 오른쪽 끝에 따로 띄운다. */ th.sortable { cursor: pointer; user-select: none; padding-left: 7px; padding-right: 7px; } th.sortable:hover { color: var(--text); } /* * 정렬 표시는 열 이름 바로 옆에 붙인 위·아래 세모다. * 국내 시세판을 따라 오름차순은 빨강, 내림차순은 파랑으로 둔다. * 두 세모를 한 그림에 담아야 색을 따로 줄 수 있어 SVG를 배경으로 쓴다. */ th.sortable::after { content: ''; display: inline-block; width: 8px; height: 13px; margin-left: 4px; vertical-align: -2px; background: no-repeat center / 8px 13px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M4 0 8 5H0Z' fill='%23f04452' fill-opacity='0.42'/%3E%3Cpath d='M4 13 0 8h8Z' fill='%233182f6' fill-opacity='0.42'/%3E%3C/svg%3E"); } th.sorted-asc::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M4 0 8 5H0Z' fill='%23f04452' fill-opacity='1'/%3E%3Cpath d='M4 13 0 8h8Z' fill='%233182f6' fill-opacity='0.2'/%3E%3C/svg%3E"); } th.sorted-desc::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M4 0 8 5H0Z' fill='%23f04452' fill-opacity='0.2'/%3E%3Cpath d='M4 13 0 8h8Z' fill='%233182f6' fill-opacity='1'/%3E%3C/svg%3E"); } /* * "(24H)"는 **폰에서만** 붙인다. PC 머리글은 원래대로 "선물 거래량"이다 * (2026-08-30 — PC 는 건드리지 않기로 했다). */ #coin-table thead th.col-fut .th-unit { display: none; } .col-name, td.col-name { text-align: left; } /* * 이름 칸은 어디를 눌러도 코인마켓캡으로 간다. * * 한글 이름 글자 위만 링크였는데, 그 폭이 40px 남짓이라 누르기 번거로웠다. * 링크 안에 차트 버튼을 넣을 수는 없으므로(a 안의 button은 잘못된 마크업), * 링크에 보이지 않는 덮개를 씌워 칸 전체를 덮고 차트 버튼만 그 위로 올린다. * 이렇게 하면 가운데 클릭·새 탭으로 열기 같은 링크의 기본 동작도 그대로 산다. */ .name-cell { position: relative; } .coin-name::after { content: ''; position: absolute; inset: 0; } /* * 이름 칸은 통째로 코인마켓캡 링크다(위의 ::after 가 칸 전체를 덮는다). * 그 위에 있어야 하는 단추는 여기서 따로 들어 올린다. * * 별도 여기 있어야 한다. 예전에는 별이 칸 **밖**(따로 칸)에 있어서 * 상관없었는데, 2026-08-29 에 칸 안으로 옮기면서 링크에 덮였다 — * 별을 눌러도 즐겨찾기가 안 되고 코인마켓캡으로 넘어갔다. */ .name-cell .chart-toggle, .name-cell .fav-btn { position: relative; z-index: 1; } .name-cell:hover .nm { color: var(--accent); text-decoration: underline; } /* 관심 자산 별표 */ .col-fav { width: 30px; padding-left: 10px; padding-right: 0; text-align: center; } .fav-btn { background: none; border: 0; color: var(--muted); font-size: 15px; cursor: pointer; padding: 0; line-height: 1; opacity: 0.5; } .fav-btn:hover { opacity: 1; color: var(--star); } .fav-btn.on { opacity: 1; color: var(--star); } /* 심볼 충돌 의심 김프를 굳이 표시할 때 눈에 띄게 한다 */ .kimp-cell.suspect { opacity: 0.6; text-decoration: underline dotted; } tbody tr:hover { background: rgba(183, 242, 77, 0.05); } /* 이름 열 — 아이콘 · 이름/심볼 · 차트 버튼 */ .name-cell { display: inline-flex; align-items: center; gap: 8px; } .coin-icon { width: 20px; height: 20px; border-radius: 50%; flex: none; background: var(--surface-2); } .coin-icon.no-icon { visibility: hidden; } /* * 이름이 아주 긴 코인("월드리버티파이낸셜유에스디")이 하나만 있어도 * 줄바꿈이 없는 표에서는 이름 열이 그 폭만큼 벌어져 표가 본문 밖으로 밀려난다. * 폭을 묶고 넘치는 이름은 말줄임으로 줄인다. 전체 이름은 마우스를 올리면 보인다. */ /* * 이름 칸 너비. 김프 칸에 테더 기준 값을 넣으면서 표가 18px 넘쳤다. * 가장 여유 있는 이 칸에서 가져온다. 132px에서도 대부분 이름은 다 들어가고, * 긴 것은 말줄임 뒤 마우스를 올리면 전체가 보인다. */ .name-lines { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; max-width: 112px; } .coin-name { color: inherit; } .coin-name .nm { display: block; overflow: hidden; text-overflow: ellipsis; } .coin-name:hover .nm { color: var(--accent); text-decoration: underline; } .sub-line { display: flex; align-items: center; gap: 5px; } .sub-line .sym { color: var(--muted); font-size: 12.5px; } /* * 개별 차트 열기 버튼. * 아이콘만 두면 장식으로 읽혀서 누를 수 있다는 걸 처음 온 사람은 모른다. * 테두리·배경을 준 칩 모양에 '차트' 글자까지 붙여 버튼임을 드러낸다. */ .chart-toggle { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px 1px 4px; border: 1px solid var(--chart-chip-line); border-radius: 4px; background: var(--chart-chip-fill); color: var(--chart-chip); font-family: inherit; font-size: 11px; line-height: 1.5; cursor: pointer; white-space: nowrap; } .chart-toggle svg { width: 9px; height: 9px; fill: currentColor; flex: none; } .chart-toggle-label { font-weight: 600; letter-spacing: -0.2px; } .chart-toggle:hover { background: var(--chart-chip-fill-hover); border-color: var(--chart-chip); } .chart-toggle.on { background: var(--chart-chip); border-color: var(--chart-chip); color: var(--on-solid); } .chart-toggle:focus-visible { outline: 2px solid var(--chart-chip); outline-offset: 1px; } /* 행 아래에 펼쳐지는 차트 */ .chart-row td { padding: 0; background: var(--bg); } .inline-chart { height: 300px; padding: 8px 10px 12px; } .inline-chart > div { height: 100%; } /* 퍼센트 위 · 금액 아래 2단 셀 */ .stack-cell { display: flex; flex-direction: column; line-height: 1.35; } .stack-cell .abs { color: var(--muted); font-size: 12.5px; } /* 거래액 — 위: 국내 원화 / 아래: 바이낸스 현물 USDT */ .vol-cell { display: flex; flex-direction: column; line-height: 1.35; } .vol-cell .vol-usd { color: var(--muted); font-size: 12.5px; } /* 선물 거래량 — 합계 · 비중 막대 · 거래소 배지 (누르면 내역이 열린다) */ .fut-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.35; background: none; border: 0; padding: 0; margin: 0 auto; color: inherit; font: inherit; cursor: pointer; } /* 눌러서 펼칠 수 있다는 것을 알리는 표시들 — 삼각형 캐럿, 밑줄, 호버 배경 */ /* * 캐럿이 오른쪽에 붙어 있어 그냥 두면 금액이 그만큼 왼쪽으로 밀린다. * 왼쪽에 캐럿과 같은 폭(16px + 간격 5px)을 비워 금액이 열 이름과 정확히 * 같은 중심에 오게 한다. */ .fut-head { display: flex; align-items: center; gap: 5px; padding-left: 21px; } .fut-total { border-bottom: 1px dotted var(--muted); } /* 펼침 표시. 작게 두면 눈에 안 띄어서 원형 버튼처럼 키웠다. */ .fut-caret { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-2); color: var(--text-sub); transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .fut-caret svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .fut-cell { padding: 3px 5px; border-radius: 5px; } .fut-cell:hover { background: rgba(183, 242, 77, 0.10); } .fut-cell:hover .fut-total { color: var(--accent); } .fut-cell:hover .fut-caret { color: var(--accent); border-color: var(--accent); background: rgba(183, 242, 77, 0.16); } .fut-cell.open { background: rgba(183, 242, 77, 0.14); } .fut-cell.open .fut-caret { transform: rotate(180deg); color: var(--on-solid); background: var(--accent); border-color: var(--accent); } .fut-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .fut-ex { display: flex; gap: 2px; } .fut-bar { display: flex; width: 100%; min-width: 96px; height: 3px; border-radius: 2px; overflow: hidden; background: var(--border); } .fut-bar i { display: block; height: 100%; } /* --- 거래소별 내역 팝오버 --- */ .fut-popover { position: fixed; z-index: 60; width: 260px; padding: 10px 12px 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px var(--shadow); font-size: 13.5px; text-align: left; } .fut-popover[hidden] { display: none; } .pop-head { display: flex; align-items: center; gap: 6px; } .pop-head strong { font-size: 14px; } .pop-sym { color: var(--muted); font-size: 12.5px; } .pop-close { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; } .pop-close:hover { color: var(--text); } .pop-sub { color: var(--muted); font-size: 12.5px; margin: 3px 0 8px; } .pop-table { width: 100%; border-collapse: collapse; } .pop-table td { padding: 4px 0; border: 0; white-space: nowrap; } .pop-table .rank { width: 14px; color: var(--muted); font-size: 12px; text-align: left; } .pop-table .ex { text-align: left; } .pop-table .ex .ex-badge { margin-right: 5px; vertical-align: middle; } .pop-table .amount { text-align: right; font-variant-numeric: tabular-nums; } .pop-table .share { text-align: right; width: 42px; color: var(--muted); font-variant-numeric: tabular-nums; } .pop-foot { color: var(--muted); font-size: 11.5px; margin-top: 7px; } /* * 거래소 배지. 실제 로고를 얹고, 이미지가 안 뜨면 아래 깔린 약칭 글자가 보인다. * 로고는 대부분 밝은 배경에 그려져 있어 배지 자체 색은 로고가 실패했을 때만 쓰인다. */ .ex-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; font-size: 8.5px; font-weight: 700; /* 글자색은 바탕 밝기에 맞춰 자바스크립트가 넣는다 (badgeHtml 참고) */ color: var(--on-solid); letter-spacing: -0.3px; cursor: default; overflow: hidden; flex: none; } .ex-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; } .price-cell { display: flex; flex-direction: column; line-height: 1.35; } .price-cell .foreign { color: var(--muted); font-size: 12.5px; } .kimp-cell { display: flex; flex-direction: column; line-height: 1.35; } .kimp-cell .diff { font-size: 12.5px; opacity: 0.75; } /* * 오르내림 색. 올랐으면 초록, 내렸으면 빨강. * * 자리마다 붙은 색 규칙(예: 요약 바의 .sub는 회색)이 이것보다 구체적이라 * 등락률이 회색으로 묻히는 곳이 있었다. 어디에 붙든 이 색이 이기게 한다. */ .up, .summary-item .sub.up { color: var(--up); } .down, .summary-item .sub.down { color: var(--down); } .flat, .summary-item .sub.flat { color: var(--muted); } .empty { text-align: center; color: var(--muted); padding: 48px 0; } /* 값이 갱신될 때 짧게 깜빡여 변화를 눈에 띄게 한다 */ /* * 시세가 튈 때 줄이 잠깐 깜빡인다. * 진하게 깔면(0.22) 그 순간 줄 안의 글자가 안 읽힌다 — 어두운 화면에서 3.37까지 * 떨어졌다. 0.10이면 두 테마 모두 4.5를 넘기면서 깜빡임은 그대로 보인다. */ @keyframes flash-up { from { background: rgba(62, 224, 141, 0.10); } to { background: transparent; } } @keyframes flash-down { from { background: rgba(255, 85, 102, 0.10); } to { background: transparent; } } .flash-up { animation: flash-up 0.6s ease-out; } .flash-down { animation: flash-down 0.6s ease-out; } @media (prefers-reduced-motion: reduce) { .flash-up, .flash-down { animation: none; } } .disclaimer { color: var(--muted); font-size: 12.5px; margin-top: 28px; line-height: 1.7; } /* --- 좁은 화면 --- */ /* 네비게이션 항목이 7개라 중간 폭에서는 가로 스크롤로 넘긴다 */ @media (max-width: 1060px) { .nav { overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } } @media (max-width: 780px) { .header-inner { gap: 14px; flex-wrap: wrap; } .nav { order: 3; width: 100%; } .header-actions { margin-left: auto; } .chart-box { height: 300px; } th, td { padding: 8px 9px; } .summary-right { margin-left: 0; } /* 좁은 화면에서는 표가 폭을 넘치므로 표 안에서 가로로만 스크롤한다 */ .table-box { overflow-x: auto; } .exchange-bar { gap: 6px; } .bar-right { margin-left: 0; width: 100%; } .search-box { flex: 1; } .search-box input[type="search"] { min-width: 0; width: 100%; } /* * 2026-08-29 — 이 줄이 폰에서 설정 메뉴를 **화면 밖으로 밀어냈다.** * * ⚙ 가 줄 오른쪽에 있던 시절의 규칙이다. 지금은 왼쪽 끝에 있어서 * `right: 0` 으로 붙이면 236px 짜리 메뉴가 통째로 왼쪽으로 나간다 * (재 보니 left: -181px). 화면에는 오른쪽 끄트머리만 삐죽 나와 * 표 위에 딱지 하나가 떠 있는 것처럼 보였다. * * 왼쪽에 붙이고, 좁은 화면에서 오른쪽이 넘치지 않게 폭을 묶는다. * min-width 를 풀지 않으면 아주 좁은 기기에서 max-width 를 이긴다. */ .settings-menu { left: 0; right: auto; min-width: 0; width: 236px; max-width: calc(100vw - 24px); } } /* --- 김프 지도 (데이터 화면) --- */ .map-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .map-picks { display: flex; gap: 5px; flex-wrap: wrap; } .map-pick { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--label); padding: 6px 11px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .map-pick:hover { color: var(--text); border-color: var(--border-strong); } /* 흰 글자가 기본 파랑 위에서 흐려(3.2) 눌러 쓴다 */ .map-pick.on { background: var(--accent); border-color: var(--accent); color: var(--on-solid); } /* 검색 창은 계산기의 것과 같은 부품(.calc-pick)을 쓴다. 자리만 잡아준다 */ .map-pick-box { margin-left: auto; min-width: 210px; } /* 견주는 기준 표기. 폰에서만 켠다 - PC 는 같은 자리에 종목 단추가 있다 */ .map-basis { display: none; } /* 거래소가 늘어나면 가로로 길어질 수 있어 이 상자 안에서만 밀리게 한다 */ .map-box { overflow-x: auto; } .map-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .map-table th, .map-table td { padding: 10px 8px; text-align: center; white-space: nowrap; border: 1px solid var(--border); } .map-table thead th { position: static; /* 코인 표와 달리 화면에 붙일 필요가 없다 */ background: var(--surface-2); color: var(--text-sub); font-weight: 600; font-size: 13px; box-shadow: none; } .map-corner { color: var(--muted); font-weight: 500; font-size: 12px; } .map-side { background: var(--surface-2); color: var(--text); font-weight: 700; text-align: left; padding-left: 12px; } /* * 같은 색조 위에 같은 색 글자를 얹는 자리라, 사이트의 오르내림 색을 그대로 쓰면 * 글자가 바탕에 묻힌다(실측 명암비 3.2). 이 칸에서만 한 단계 비켜 쓴다. */ .map-cell { font-variant-numeric: tabular-nums; font-weight: 600; } /* * 칸 글자는 사이트 기본 오르내림 색을 그대로 쓴다. 예전에는 칸마다 따로 * 밝은 색을 박아 뒀는데, 바탕 진하기만 지키면 기본 색으로도 읽힌다. * 안전한 진하기는 mapCellStyle 에서 계산한다. */ .map-cell.none { color: var(--muted); font-weight: 400; } /* 가장 벌어진 곳과 가장 좁은 곳만 테두리로 짚어준다 */ .map-cell.best { outline: 2px solid var(--up); outline-offset: -2px; } .map-cell.worst { outline: 2px solid var(--down); outline-offset: -2px; } .map-empty { padding: 28px 0; text-align: center; color: var(--muted); font-size: 13.5px; } .map-foot { margin: 12px 0 0; color: var(--label); font-size: 13px; line-height: 1.7; } /* --- 코스피·코스닥 하루 요약 (차트 대신) --- */ .idx-detail { padding: 4px 2px 2px; } /* 52주 최저~최고 사이 어디쯤인지 */ .idx-range { margin-bottom: 16px; } .idx-range-bar { position: relative; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--down), var(--border-strong), var(--up)); opacity: 0.55; } .idx-range-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--text); border: 2px solid var(--surface); transform: translateY(-50%); } .idx-range-ends { display: flex; justify-content: space-between; margin-top: 7px; color: var(--label); font-size: 12.5px; } .idx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .idx-cell { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--surface); white-space: nowrap; } .idx-cell span { color: var(--label); font-size: 12.5px; } .idx-cell strong { font-size: 13.5px; font-variant-numeric: tabular-nums; } .idx-flow { margin-top: 14px; } .idx-flow-title { color: var(--label); font-size: 12.5px; font-weight: 600; margin-bottom: 7px; } .idx-flow-row { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; font-size: 13.5px; } .idx-flow-row span { color: var(--muted); font-size: 12.5px; } .idx-flow-row strong { font-variant-numeric: tabular-nums; margin-right: 6px; } .idx-source { margin: 12px 0 0; color: var(--muted); font-size: 12px; } /* --- 김프 이력 --- */ .line-chart .hist-vol { fill: var(--accent); opacity: 0.3; } /* --- 종목 순위 --- */ .rank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; } .rank-card { background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; } .rank-card h4 { display: flex; align-items: baseline; gap: 6px; margin: 0 0 10px; font-size: 13.5px; font-weight: 700; } .rank-card h4 span { color: var(--muted); font-size: 12px; font-weight: 400; } .rank-list { margin: 0; padding: 0; list-style: none; } .rank-list li { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; font-size: 13px; white-space: nowrap; } .rank-no { width: 15px; color: var(--muted); font-size: 12px; flex: none; } /* 코인 로고. 없거나 깨지면 빈 원으로 두어 줄 높이가 흔들리지 않게 한다 */ .rank-icon { width: 16px; height: 16px; flex: none; border-radius: 50%; align-self: center; } .rank-icon.no-icon { background: var(--surface-2); border: 1px solid var(--border); } .rank-name { overflow: hidden; text-overflow: ellipsis; } .rank-sym { color: var(--muted); font-size: 11.5px; } .rank-list strong { margin-left: auto; font-variant-numeric: tabular-nums; } /* --- 비트코인 네트워크 --- */ .chain-halving { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 14px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; } .chain-label { display: block; color: var(--label); font-size: 12.5px; margin-bottom: 4px; } .chain-halving-main strong { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .chain-halving-main strong span { font-size: 0.95rem; font-weight: 600; margin-left: 5px; color: var(--label); } .chain-when { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; } .chain-reward { display: flex; align-items: baseline; gap: 8px; margin-left: auto; font-size: 14px; white-space: nowrap; } .chain-reward > span:first-child { color: var(--label); font-size: 12.5px; } .chain-arrow { color: var(--muted); } .chain-supply { margin-bottom: 14px; } .chain-supply-head { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; } .chain-supply-head > span:first-child { color: var(--label); font-size: 12.5px; } .chain-supply-head strong { font-variant-numeric: tabular-nums; } .chain-pct { margin-left: auto; color: var(--accent); font-weight: 700; } .chain-bar { height: 8px; margin-top: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .chain-bar span { display: block; height: 100%; background: var(--accent); } .chain-supply-foot { margin-top: 6px; color: var(--muted); font-size: 12px; } /* --- 뉴스 --- */ .news-list { display: flex; flex-direction: column; } .news-item { display: flex; gap: 14px; padding: 16px 2px; border-bottom: 1px solid var(--border); } .news-body { min-width: 0; flex: 1; } /* * 사진은 매체 서버에서 그대로 불러온다. 우리가 사본을 갖지 않는다. * * 높이를 84px로 고정해 두니 본문이 174px일 때 아래로 91px이 비었다. * 줄 높이에 맞춰 늘리고, 너무 홀쭉해지지 않게 폭도 함께 키웠다. * 아주 긴 줄에서 사진만 커지지 않도록 위쪽 한계를 둔다. */ .news-thumb { flex: none; align-self: stretch; width: 168px; min-height: 84px; max-height: 168px; border-radius: 6px; overflow: hidden; background: var(--surface-3); } .news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .news-thumb:hover img { opacity: 0.85; } .news-item:last-child { border-bottom: 0; padding-bottom: 4px; } .news-item:first-child { padding-top: 4px; } .news-head { margin-bottom: 7px; } .news-title { display: block; color: var(--text); font-size: 15.5px; font-weight: 700; line-height: 1.45; } .news-title:hover { color: var(--accent); text-decoration: underline; } .news-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; color: var(--muted); font-size: 12.5px; } .news-source { color: var(--label); font-weight: 600; } .news-summary { margin: 0 0 10px; color: var(--text-sub); font-size: 13.5px; line-height: 1.75; } /* 기사에 나온 코인의 지금 값. 이 줄이 이 화면을 우리 것으로 만든다 */ .news-coins { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; min-width: 0; } .news-coin { display: inline-flex; align-items: baseline; /* 한 딱지가 칸보다 길면 안에서 접힌다. 그대로 두면 화면이 옆으로 밀린다 */ flex-wrap: wrap; max-width: 100%; gap: 7px; padding: 5px 9px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; } .news-coin:hover { border-color: var(--accent); } .news-coin-sym { font-weight: 700; } .news-coin-price { color: var(--text); font-weight: 600; } .news-more { color: var(--accent); font-size: 12.5px; } .news-more:hover { text-decoration: underline; } /* --- 시가총액 순위 --- */ .mcap-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .mcap-head .chart-label { color: var(--label); font-size: 12.5px; } .mcap-head strong { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; } .mcap-usd { color: var(--muted); font-size: 13px; } /* * 상자 안에 따로 스크롤을 두지 않는다. 100줄을 그대로 늘어놓고 페이지가 * 스크롤되게 한다(스크롤바가 둘로 나뉘면 조작이 번거롭다). * 좁은 화면에서 열이 넘칠 때만 가로로 밀린다. */ .rank-box { overflow-x: auto; } .mcap-table { width: 100%; border-collapse: collapse; font-size: 13px; } .mcap-table th, .mcap-table td { padding: 8px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); } .mcap-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--text-sub); font-size: 12.5px; font-weight: 600; box-shadow: inset 0 -1px 0 var(--border); } .mcap-table tbody tr:hover { background: var(--tint); } .mcap-table .mc-rank { width: 34px; text-align: center; color: var(--label); } .mcap-table .mc-name { text-align: left; } .mcap-table .mc-kimp { font-weight: 600; } .mcap-table .mc-num { font-variant-numeric: tabular-nums; } .mcap-table .mc-cap { font-weight: 600; } .mcap-table .name-cell { display: inline-flex; } .mcap-table .nm { font-weight: 600; } .rank-none { color: var(--muted); } /* --- 데이터 화면 탭 --- */ .data-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } /* * 탭처럼 보이지만 다 (2026-08-27에 단추에서 바뀜). * 주소를 가져야 검색·공유·방문 기록이 되기 때문이다 - src/pages.js 참고. * 그래서 링크 밑줄을 지우고 단추 모양으로 그린다. */ .data-tab-btn { display: inline-block; text-decoration: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--label); padding: 8px 14px; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .data-tab-btn:hover { color: var(--text); border-color: var(--border-strong); } .data-tab-btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-solid); } .data-tab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* 탭 줄 밑의 첫 제목은 탭과 붙어 보이지 않게 위 여백을 줄인다 */ .data-tabs + .section-head { margin-top: 0; } /* 탭 안의 첫 제목은 탭 줄과 붙어 보이지 않게 위 여백을 줄인다 */ .data-pane > .section-head:first-child { margin-top: 0; } /* 순위표 더 보기 */ .rank-more { width: 100%; margin-top: 10px; padding: 11px 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--label); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .rank-more:hover { border-color: var(--accent); color: var(--accent); } /* --- 입출금 막힌 코인 --- */ .wa-box { overflow-x: auto; } .wa-table { width: 100%; border-collapse: collapse; font-size: 13px; } .wa-table th, .wa-table td { padding: 8px 10px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--border); } .wa-table thead th { background: var(--surface-2); color: var(--text-sub); font-size: 12.5px; font-weight: 600; } /* * 이름 칸. 그림·이름·심볼을 한 줄에 세운다. * * 그림이 안 떠도 **자리는 남긴다**(visibility). 줄마다 이름 시작 위치가 * 어긋나면 스무 줄짜리 표에서 눈이 아래로 못 내려간다. */ .wa-table .wa-name { text-align: left; white-space: nowrap; } .wa-icon { display: inline-block; vertical-align: -3px; width: 15px; height: 15px; margin-right: 5px; border-radius: 50%; flex: none; } .wa-table .wa-name .nm { font-weight: 600; } .wa-table .wa-name .sym { color: var(--muted); font-size: 12px; margin-left: 6px; } .wa-table .wa-kimp { font-variant-numeric: tabular-nums; font-weight: 600; } /* 두 곳 이상에서 막힌 줄은 눈에 띄게 */ .wa-table tr.wa-many { background: rgba(255, 85, 102, 0.07); } /* 막힌 것만 딱지로 보여준다. 정상인 것은 조용히 둔다. */ .wa-off { display: inline-block; margin: 0 2px; padding: 2px 7px; border-radius: 4px; background: rgba(255, 85, 102, 0.16); color: var(--down); font-size: 12px; font-weight: 600; } .wa-ok { color: var(--label); font-size: 12px; } .wa-none { color: var(--label); } .wa-table .wa-name .sym { color: var(--label); font-size: 12px; margin-left: 6px; } /* --- 좌측 레일: 최근 급등락 --- */ .mv-panel { margin-bottom: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .mv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 13.5px; font-weight: 700; color: var(--text); } /* 몇 분치를 보고 있는지 늘 붙여 둔다 */ .mv-win { padding: 2px 7px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--label); font-size: 11.5px; font-weight: 600; } .mv-list { padding: 4px 0; } .mv-empty { padding: 18px 12px; text-align: center; color: var(--muted); font-size: 12.5px; } /* * 조용한 장에서 붙는 한 줄. * * 문턱(가격 1%, 김프 0.3%p)을 넘은 종목이 없을 때도 칸을 비우지 않고 가장 많이 * 움직인 것을 세운다. 다만 그 줄들을 "급등락"으로 읽으면 안 되므로 무엇을 보고 * 있는지 밝힌다. 0.05% 움직인 것을 급등락이라 부르면 그건 거짓말이다. */ .mv-quiet { padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 11.5px; } .mv-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; } .mv-row + .mv-row { border-top: 1px solid var(--border); } .mv-icon { width: 20px; height: 20px; border-radius: 50%; flex: none; } /* 로고가 없거나 깨진 자리는 빈 원으로 둔다 — 줄 높이가 흔들리지 않도록 */ .mv-icon.no-icon { background: var(--surface-2); border: 1px solid var(--border); } .mv-body { min-width: 0; flex: 1; } .mv-top, .mv-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } /* 한글 이름이 길면 줄이 밀린다 */ .mv-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 600; } .mv-move { flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .mv-sub { margin-top: 1px; font-size: 11.5px; } .mv-sym { color: var(--muted); font-weight: 600; } .mv-detail { flex: none; color: var(--label); font-variant-numeric: tabular-nums; } .mv-arrow { margin: 0 3px; color: var(--muted); } /* --- 계산 방법 화면 --- */ /* * 긴 문서다. 눈이 지치지 않으려면 두 가지가 필요하다 — * 지금 몇 번째 절인지 알 수 있는 **위계**, 그리고 상자 종류를 늘리지 않는 것. * 여기서 쓰는 상자는 셋뿐이다: 계산식 · 짚고 넘어갈 것 · 표. */ .mth-head { margin-bottom: 18px; } .mth-h1 { margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; } .mth-lead { margin: 0; color: var(--label); font-size: 14px; } /* 차례 — 3,700px짜리 문서에 이게 없으면 어디쯤인지 알 수 없다 */ .mth-toc { margin: 0 0 34px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .mth-toc ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 14px; } .mth-toc a { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; color: var(--text-sub); font-size: 13.5px; } .mth-toc a:hover { color: var(--accent); } .toc-num { flex: none; width: 18px; color: var(--muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } /* 절 — 위에 가는 선 하나로 나눈다. 상자로 감싸면 답답해진다. */ .mth-sec { padding-top: 26px; margin-bottom: 30px; border-top: 1px solid var(--border); } .mth-sec:first-of-type { border-top: 0; padding-top: 0; } /* 차례에서 눌러 왔을 때 제목이 헤더에 가리지 않도록 */ .mth-sec { scroll-margin-top: 84px; } .mth-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; } .mth-num { flex: none; color: var(--accent); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; } .mth-tag { color: var(--muted); font-size: 13px; font-weight: 500; } .mth-h3 { margin: 26px 0 10px; font-size: 15px; font-weight: 700; color: var(--text); } .mth-h3:first-child { margin-top: 0; } .mth-text { margin: 0 0 12px; color: var(--text-sub); font-size: 14px; line-height: 1.85; } .mth-text:last-child { margin-bottom: 0; } .mth-list strong, .mth-text strong { color: var(--text); } /* ① 계산식 */ .mth-formula { margin: 0 0 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); overflow-x: auto; } .mth-formula code { display: block; color: var(--text); font-size: 14px; line-height: 2; white-space: nowrap; } .mth-formula.mth-sub { border-left-color: var(--border-strong); } .mth-formula.mth-sub code { color: var(--text-sub); font-size: 13.5px; } /* ② 짚고 넘어갈 것 */ .mth-note { margin: 14px 0; padding: 13px 15px; background: var(--surface-2); border-radius: var(--radius); border-left: 3px solid var(--border-strong); color: var(--text-sub); font-size: 13.5px; line-height: 1.85; } /* ③ 표 */ .mth-scroll { overflow-x: auto; margin-bottom: 14px; } .mth-scroll .mth-table { margin-bottom: 0; } .mth-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 13.5px; } .mth-table th, .mth-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); } .mth-table th { background: var(--surface-2); color: var(--text-sub); font-size: 12.5px; font-weight: 600; } .mth-table td { color: var(--text-sub); } .mth-table td:first-child { color: var(--muted); white-space: nowrap; } .mth-list { margin: 0; padding-left: 18px; color: var(--text-sub); font-size: 14px; line-height: 1.85; } .mth-list li { margin-bottom: 12px; } .mth-list li:last-child { margin-bottom: 0; } /* 왜 그렇게 했는지 — 상자를 하나 더 만들지 않고 들여쓰기로 낮춘다 */ .mth-why { display: block; margin-top: 7px; padding-left: 11px; border-left: 2px solid var(--border); color: var(--muted); font-size: 13px; line-height: 1.8; } p.mth-why { margin-bottom: 12px; } .mth-link { color: var(--accent); } .mth-link:hover { text-decoration: underline; } .mth-text code, .mth-list code { padding: 1px 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--text); } @media (max-width: 780px) { .mth-h1 { font-size: 22px; } .mth-title { font-size: 17px; } .mth-formula code { font-size: 12.5px; } .mth-toc ol { grid-template-columns: 1fr; } } /* * 표는 폰에서 442px까지 벌어진다. 페이지가 통째로 옆으로 밀리지 않도록 * 이 칸 안에서만 넘기게 한다. */ .mth-scroll { overflow-x: auto; margin-bottom: 14px; } .mth-scroll .mth-table { margin-bottom: 0; } /* 김프map 세로줄 머리 — 나라 이름 아래 묶은 거래소를 적는다 */ .map-col { display: block; } .map-col-note { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; font-weight: 500; letter-spacing: -0.2px; } .map-sources { color: var(--muted); font-size: 13px; } /* 환율 고시 시각 — 값 옆에 조용히 붙는다 */ /* 거래소 바로가기 — 표 안의 이름에 붙는다. 눈에 띄되 시끄럽지 않게. */ .ex-link { color: inherit; border-bottom: 1px dotted var(--border-strong); } .ex-link:hover { color: var(--accent); border-bottom-color: var(--accent); } .map-side .ex-link { border-bottom: 0; } .map-side .ex-link:hover { color: var(--accent); } /* * 김프 칸 아랫줄 — 금액 차이와 테더 기준 김프를 나란히. * 위의 김프는 달러 환율로 잰 값이라 테더가 달러에서 벗어난 만큼이 섞여 있다. * T 값은 그것을 걷어낸 코인 자체의 가격 차이다. */ .kimp-sub { display: flex; align-items: baseline; gap: 5px; justify-content: flex-end; } .tkimp { flex: none; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.85; } /* --- 지금 김프 요약 줄 --- */ /* * 두 요약 줄은 같은 크기로 둔다. 나란히 놓이는 칸이 높이가 다르면 * 한쪽이 덜 중요해 보인다. 안쪽 여백과 최소 높이를 같게 맞춘다. */ .kimp-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; min-height: 58px; margin: 10px 0 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); } .ks-item { display: flex; align-items: center; gap: 7px; } .ks-label { color: var(--label); font-size: 12.5px; font-weight: 600; } .ks-note { color: var(--muted); font-size: 11.5px; } .ks-more { margin-left: auto; color: var(--accent); font-size: 12.5px; font-weight: 600; } .ks-more:hover { text-decoration: underline; } @media (max-width: 780px) { .kimp-strip { gap: 8px 18px; } .ks-more { margin-left: 0; } } /* --- 나라별 김프 한 줄 (첫 화면) --- */ .hist-strip, .nation-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; min-height: 58px; margin: 0 0 22px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); /* 위의 김프 요약 줄과 같은 라임. 둘은 나란히 놓이는 짝이라 왼쪽 띠 색이 다르면 서로 다른 종류의 칸처럼 보인다 */ border-left: 3px solid var(--accent); border-radius: var(--radius); } .ns-head { display: flex; align-items: baseline; gap: 8px; } .ns-title { font-size: 13px; font-weight: 700; } .ns-note { color: var(--muted); font-size: 11.5px; } .ns-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; } /* 칸이 많은 줄은 스스로 접혀야 한다. flex 항목은 기본이 "내용보다 작아지지 않음"이라, min-width 를 풀어 주지 않으면 안 접히고 줄 밖으로 밀려난다 */ .hist-strip .ns-row { flex: 1 1 0; min-width: 0; } .ns-item { display: flex; align-items: center; gap: 6px; } .ns-name { color: var(--label); font-size: 12.5px; font-weight: 600; } /* * 긴 이름·짧은 이름 두 벌. * * 같은 칸을 폰에서는 짧게 적어야 할 때가 있다(줄이 접히거나 옆 칸을 * 밀어낸다). 글자를 아예 줄이면 자리가 넓은 PC 까지 같이 짧아지므로 * **두 벌을 다 넣어 두고 화면 폭으로 고른다.** 기본은 긴 쪽이다. */ .nm-short { display: none; } /* * 선물 펀딩비 띠 (첫 화면). * * 위 세 띠(히스토리·평균·나라별)와 **같은 껍데기**를 쓴다. 넷이 나란히 * 놓이는 자리라 하나만 다르게 생기면 다른 종류의 값처럼 보인다. */ .deriv-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; min-height: 58px; margin: 0 0 22px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); box-shadow: 0 2px 10px var(--shadow); /* * `overflow: hidden` 을 뺐다 (2026-08-30). * * 둥근 모서리를 깔끔하게 하려고 넣었는데, 화면이 조금만 좁으면 * 칸이 넘치면서 **오른쪽이 소리 없이 잘렸다.** 실제로 폰에서 * 펀딩비 숫자가 통째로 안 보였다. 잘라 내는 것보다 접히는 편이 낫다. */ overflow: visible; } /* 로고와 코인 이름은 한 덩어리 - 로고는 이름표의 일부다 */ .dvs-top { display: inline-flex; align-items: center; gap: 4px; } /* 펀딩비와 롱 비율은 한 줄에 나란히 */ .dvs-vals { display: inline-flex; align-items: baseline; gap: 5px; } .dvs-ls { color: var(--muted); font-size: 11px; white-space: nowrap; } /* * 누가 누구에게 내는지. 이 딱지가 부호를 대신한다. * 색은 중립이다 - 펀딩비의 방향은 좋고 나쁨이 아니다. */ .dvs-who { padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); color: var(--label); font-size: 11px; font-weight: 600; white-space: nowrap; } .dvs-rate { color: var(--text); font-weight: 700; white-space: nowrap; } /* 코인 로고. 표의 것보다 한 단 작다 */ .dvs-icon { width: 15px; height: 15px; border-radius: 50%; flex: none; object-fit: cover; } .dvs-icon.no-icon { background: var(--surface-2); border: 1px solid var(--border); } /* 김프map 으로 가는 링크. 위 줄의 "시장 지표 →"(.ks-more)와 같은 색이다 */ .ns-more { margin-left: auto; color: var(--accent); font-size: 12.5px; font-weight: 600; } .ns-more:hover { text-decoration: underline; } @media (max-width: 780px) { .nation-strip, .hist-strip { gap: 8px 16px; } .ns-row { gap: 6px 14px; } .ns-more { margin-left: 0; } } /* * 두 요약 줄의 숫자 딱지. * --------------------------------------------------------------------------- * 색을 꽉 채우고 테두리를 두르고, 줄 바탕에도 옅은 색조를 깐다. * * 깜빡이게 하지는 않는다. 청산 알림을 뺄 때 "초 단위로 번쩍이는 것은 카지노 * 화면과 같은 문법"이라고 정했고, 이 값들은 2초마다 바뀌어서 깜빡임을 걸면 * 사실상 상시 점멸이 된다. 움직이지 않고도 눈에 들어오게 색으로 세운다. * * 글자색은 --on-solid 하나로 두 테마가 다 맞는다 — * 어두운 화면은 밝은 초록·빨강 위에 어두운 글자(10.98 / 6.04), * 밝은 화면은 짙은 초록·빨강 위에 흰 글자(5.39 / 6.18). */ .ks-value, .ns-item strong { padding: 3px 9px; border: 1px solid transparent; border-radius: var(--radius); color: var(--on-solid); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.2px; line-height: 1.35; } .ks-value.up, .ns-item strong.up { background: var(--up); border-color: var(--up-line); } .ks-value.down, .ns-item strong.down { background: var(--down); border-color: var(--down-line); } .ks-value.flat, .ns-item strong.flat { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-sub); } /* 첫 값(평균 김프)이 이 줄의 주인공이라 한 단계 키운다 */ .ks-item:first-child .ks-value { font-size: 17px; } /* * 줄 전체에도 옅은 색조. 값들의 부호를 자바스크립트가 줄에 붙여준다. * 0.08까지 재봤고 0.06을 골랐다 — 그 위의 흐린 글자가 5.13이다. */ .kimp-strip, .nation-strip, .hist-strip { box-shadow: 0 2px 10px var(--shadow); } .kimp-strip.up, .nation-strip.up, .hist-strip.up { background: var(--tint-up); } .kimp-strip.down, .nation-strip.down, .hist-strip.down { background: var(--tint-down); } /* 한글 이름표는 값 옆에서 밀리지 않게 진하게 */ .ks-label, .ns-title, .ns-name { color: var(--text); font-weight: 700; letter-spacing: -0.2px; } .ks-note, .ns-note { color: var(--muted); } /* * 시장온도 — 판정에 무엇을 넣고 뺐는지. * * 판정을 읽는 데 꼭 필요한 것은 아니라 화면 맨 아래에 접어 둔다. * 궁금한 사람만 펼쳐 보면 된다. * * 이름표와 설명을 두 칸으로 나눠 세로줄을 맞춘다. 한 줄로 흘리면 설명이 * 접힐 때 이름표 아래로 파고들어 어디까지가 무엇인지 흐려진다. */ .mood-note { margin: 8px 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .mood-note-head { display: flex; align-items: baseline; gap: 8px; padding: 11px 14px; cursor: pointer; list-style: none; } .mood-note-head::-webkit-details-marker { display: none; } .mood-note-title { font-size: 13px; font-weight: 700; color: var(--text); } .mood-note-hint { color: var(--muted); font-size: 12px; } .mood-note-head::after { content: '▾'; margin-left: auto; color: var(--muted); font-size: 11px; } .mood-note[open] .mood-note-head::after { content: '▴'; } .mood-note-body { padding: 13px 14px 14px; border-top: 1px solid var(--border); max-width: 860px; } /* 이름표 칸 · 설명 칸 */ .mn-list { margin: 0; } .mn-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 12px; padding: 5px 0; } .mn-row dt { margin: 0; } .mn-row dd { margin: 0; color: var(--text-sub); font-size: 12.5px; line-height: 1.75; } /* 위험·안전은 딱지로 세운다 */ .mn-risk, .mn-safe { display: inline-block; padding: 2px 8px; border-radius: var(--radius); font-size: 11.5px; font-weight: 700; color: var(--on-solid); } .mn-risk { background: var(--down); } .mn-safe { background: var(--up); } /* 뺀 것들은 한 단계 낮춘다 */ .mn-out { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); } .mn-out dt { color: var(--text-sub); font-size: 12px; font-weight: 700; } .mn-out dd { color: var(--muted); font-size: 12px; } .mn-foot { margin: 12px 0 0; color: var(--label); font-size: 12px; } /* 좁은 화면에서는 104px 칸이 남지 않는다. 위아래로 쌓는다 */ @media (max-width: 640px) { .mn-row { grid-template-columns: 1fr; gap: 3px; } .mn-out dt { font-size: 12.5px; } } /* 코인 딱지와 원문 링크를 한 줄에 둔다. 줄이 하나 줄어 사진과 높이가 가까워진다 */ .news-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; } /* 딱지 줄이 좁아지면 줄어들 수 있어야 한다. 안 그러면 칸을 밀어낸다 */ .news-foot .news-coins { margin: 0; min-width: 0; flex: 1 1 auto; } .news-foot .news-more { margin: 0 0 0 auto; } /* * 좁은 화면에서는 사진을 위로 올려 폭을 다 쓴다. * 옆에 두면 글이 230px 안에서 접혀 줄이 390px까지 길어지고, * 그만큼 사진 아래가 다시 비었다. */ @media (max-width: 780px) { .news-item { flex-direction: column; gap: 10px; } .news-thumb { align-self: stretch; width: 100%; height: 168px; min-height: 0; max-height: none; } .news-foot .news-more { margin-left: 0; } } /* 화면이 두 부분으로 나뉜다 — 위는 지표 목록, 아래는 그것을 모은 판정 */ .section-gap { margin-top: 34px; } /* 언제 올라온 글인지 — 흐린 글씨에 묻혀 안 보였다 */ .news-ago { padding: 1px 7px; border-radius: var(--radius); background: var(--chip-fill); border: 1px solid var(--chip-line); color: var(--chip-text); font-weight: 700; font-variant-numeric: tabular-nums; } /* * 긴 문단은 마지막 줄에 낱말 하나만 남지 않게 한다. * 브라우저가 지원하지 않으면 그냥 무시된다. */ .calc-caution li, .mth-text, .mth-list li, .calc-intro, .mood-note-body dd { text-wrap: pretty; } /* * 긴 설명은 한 줄을 --prose 까지만 늘린다. * 이미 좁은 칸 안에 있는 글에는 아무 영향이 없다. */ .calc-intro, .calc-hint, .disclaimer, .map-foot, .gold-explain p, .fng-explain, .fx-effect-note, .mn-row dd, .mn-foot, .mth-text, .mth-list li { max-width: var(--prose); } /* * 폭을 줄이면 글이 아래로 길어지고 오른쪽이 빈다. * 여러 도막으로 된 설명은 그 빈 자리에 두 번째 칸을 세운다. * 한 칸이 380px 아래로 좁아지면 저절로 한 칸으로 돌아간다. */ .prose-cols { columns: 380px 2; column-gap: 34px; } .prose-cols > * { break-inside: avoid; /* 한 도막이 두 칸에 걸치지 않게 */ max-width: none; /* 칸이 이미 좁으니 폭 제한은 풀어 준다 */ } .prose-cols > :first-child { margin-top: 0; } .prose-cols > :last-child { margin-bottom: 0; } /* ===================================================================== * 폰 전용 (640px 이하) * --------------------------------------------------------------------- * 왜 따로 모아 두는가 * 위쪽 규칙들은 780px 을 경계로 쓴다. 그건 태블릿 폭이다. 폰(360~430px) * 에서는 같은 여백이 화면의 절반을 먹는다. 실제로 재 보니 코인 표 * 첫 줄이 1,387px 아래에 있었다 - 폰 화면 높이(812px)의 1.7배다. * 보러 온 것을 보려고 화면 두 개를 넘겨야 하는 셈이다. * * 그래서 폰에서만 쓰는 규칙을 파일 맨 끝에 한 덩이로 모은다. 흩어 두면 * PC 를 고칠 때마다 폰이 어떻게 되는지 알 수가 없다. 여기만 지우면 * 폰도 예전으로 돌아간다. * * 원칙 셋 * 1. 같은 종류가 여럿이면 접지 말고 옆으로 민다 (가로 스크롤) * 2. 값을 지우지 않는다. 둘째 줄은 감추되 PC 에는 그대로 남긴다 * 3. 사람들이 보러 온 것(코인 표)을 화면 첫 판에 올린다 * ===================================================================== */ @media (max-width: 640px) { /* --- 0. 화면 전체에 걸리는 여백 ------------------------------------- * 좌우 16px 은 1080px 화면에서 정한 값이다. 375px 에서는 양옆으로 * 32px, 곧 화면의 9%가 글자 없는 자리로 나간다. 12px 로 줄인다. * 이 값 하나가 머리띠·요약띠·본문 열 셋을 한꺼번에 움직인다. * * 아래 60px 은 PC 에서 바닥글과 본문이 붙어 보이지 않게 둔 값인데, * 폰에서는 그냥 빈 화면 한 뼘이다. */ :root { --page-pad: 12px; } /* 아래 여백은 위 Y 묶음에서 한 번에 정한다 */ /* --- Y. 여백 한 묶음 정리 (2026-08-30) ------------------------------- * * 화면 모양은 하나도 안 건드리고 **빈자리만** 줄인다. 값이 여기저기 * 흩어져 있어 화면마다 34px, 26px, 22px 이 제각각으로 붙어 있었다. * 시장온도에서 재 보니 제목 하나 앞에 **54px** 이 비어 있었다. * * 기준을 셋으로 줄인다. * 상자 사이 10px * 묶음 사이 14px (section-gap - 화면 안에서 주제가 바뀌는 자리) * 바닥글 위 12px * * 폰에서만이다. PC 는 자리가 넓어 지금 여백이 읽기에 낫다. */ .panel { margin-bottom: 10px; } .section-head { margin-bottom: 6px; } .section-gap { margin-top: 14px; } .panel-head { margin-bottom: 6px; } /* * 바닥글. 안내문과 바닥글 사이가 44px 이었다 - * 바깥 여백 12 + 안쪽 위 여백 22 + 위쪽 테두리가 겹쳐 쌓인 것이다. * 안쪽 아래 30px 도 화면 맨 끝이라 그만큼 필요 없다. */ .site-foot { margin-top: 8px; } .foot-inner { padding: 10px 12px 14px; } /* * 본문 통을 감싼 여백. 아래가 60px 이었다(PC 기준). 폰에서는 그 * 60px 이 바닥글 바로 위에 그대로 얹혀 빈 화면처럼 보인다. * 위도 20 -> 10px 로 줄인다 - 머리띠 바로 아래라 두 번 띄울 이유가 없다. */ .page-shell { padding: 10px var(--page-pad) 12px; } .cards { gap: 8px; } /* * 값 밑에 딸린 설명. 위 여백 10px 이 상자마다 붙어 쌓였다. * 접어 두는 글이라(T 참고) 더 붙여도 읽기에 지장이 없다. */ .fx-effect-note { padding-top: 6px; margin-bottom: 3px; } /* * 화면마다 따로 붙어 있던 여백들. 재 보고 큰 것부터 잡았다. * * 용어·가이드 묶음 제목 앞 56~68px ← 가장 컸다 * 계산 방법 마디 사이 30~34px * 시장온도 20~22px 이 넷 * * 값은 안 건드리고 **사이만** 좁힌다. 상자·글자·차례는 그대로다. */ .mth-sec { padding-top: 12px; margin-bottom: 12px; } .mth-toc { margin-bottom: 10px; } .vp-panel { margin-bottom: 10px; } .indicator-top { margin-bottom: 10px; } .mood-note { margin: 4px 0 8px; } .mood-bar { margin-bottom: 8px; } /* 안내문이 둘 이어질 때는 사이를 더 좁힌다 (시장온도) */ .disclaimer + .disclaimer { margin-top: 4px; padding-top: 4px; } /* --- 계산 방법 화면의 표 --------------------------------------------- * * V. 상자 안에서 밀리던 표를 화면 폭에 맞춘다 (2026-08-30). * * `.mth-scroll` 이 `overflow-x: auto` 라 페이지는 안 밀렸지만, 상자 * **안에서** 442px 짜리 표가 336px 를 넘겨 밀리고 있었다. 미는 표는 * 오른쪽에 뭐가 더 있는지 모르고 지나친다. * * 칸을 뺄 것은 없다(순서·출처·쓰는 때 셋 다 본론이다). 전역 규칙인 * `th, td { white-space: nowrap }` 을 풀고 글자·여백을 한 단 줄인다. */ .mth-table { font-size: 12px; } .mth-table th, .mth-table td { padding: 7px 5px; white-space: normal; word-break: keep-all; } .mth-table th { font-size: 11px; } /* 첫 칸은 번호라 그대로 붙여 둔다 */ .mth-table td:first-child { white-space: nowrap; } /* --- 바닥글 ---------------------------------------------------------- * * U. 두 안내문의 여백을 줄인다 (2026-08-30). * * 본문 밑 안내문과 바닥글 안내문이 각각 세 줄씩 차지하고 그 위아래로 * 여백이 넉넉히 붙어 있었다. 글은 그대로 두고 - 이 문장들은 애드센스와 * 법 쪽에서 있어야 하는 것들이다 - 줄 사이와 여백만 조인다. */ .disclaimer { margin: 10px 0 0; padding: 8px 0 0; line-height: 1.5; font-size: 11px; } .foot-note { margin: 6px 0; line-height: 1.5; font-size: 11px; } .foot-inner { gap: 6px; } .foot-copy { margin: 2px 0 0; font-size: 11px; } .foot-links { gap: 6px 12px; } /* --- 시장온도 화면 --------------------------------------------------- * * T. 값 아래 딸린 설명 — **자르지 않는다** (2026-08-31에 되돌림). * * 2026-08-30 에 두 줄만 남기고 아래를 흐리게 지웠다가 되돌렸다. * 91px 짜리 글을 35px 만 보여준 셈인데, 흐린 글은 **읽을 수도 없고 * 눌러야 하는 줄도 모른다.** 무엇이 잘렸는지 모르니 누를 까닭도 없다. * * 이 문장들은 "상관이 곧 원인은 아니다" 를 밝히는 자리라 안 보이면 * 안 쓴 것과 같다. 몇 줄 길어지더라도 그냥 다 보여준다. */ .fx-effect-note { margin-bottom: 4px; } /* --- 김프map 화면 ----------------------------------------------------- * * X. 제목을 폰에서 뺀다 (2026-08-30). * * 바로 위 탭 줄에 "김프map" 이 켜져 있는데 그 아래 제목이 또 * "김프map" 이다. 같은 말이 두 줄을 쓰고 있었다. * h1 은 HTML 에 그대로 둔다(검색엔진과 화면 읽기 프로그램용). */ .content:has(.map-table) > .section-head:first-of-type { display: none; } .content:has(.map-table) > .panel:first-of-type { margin-top: 0; } /* --- 국내 미상장 화면 ----------------------------------------------- * * S. 표를 맨 위로, 설명을 아래로 (2026-08-30). * * 이 화면을 여는 사람은 **어떤 종목이 국내에 없나**를 보러 온다. * 그런데 표 위에 경고 넉 줄과 상장 변화 목록이 깔려 있어 표가 * 한 화면 아래로 밀려 있었다. * * **다만 "상장 예고가 아니다" 한 줄은 표보다 먼저 온다.** 그렇게 * 읽히는 순간 이 화면은 시세조종을 거드는 자리가 되기 때문이다. * 긴 설명만 아래로 내리고 그 한 줄은 위에 남긴다. * * `:has(.unl-table)` 로 이 화면에만 건다 - `.gd-lede` 는 가이드 * 화면에도 있어서 그냥 걸면 거기까지 차례가 바뀐다. */ .content:has(.unl-table) > .section-head:not(.section-gap) { order: 0; } .content:has(.unl-table) > .unl-warn { display: block; order: 1; margin: 0 0 6px; padding: 7px 9px; background: var(--surface); border-left: 3px solid var(--accent); border-radius: var(--radius); color: var(--text-sub); font-size: 12.5px; line-height: 1.5; } .content:has(.unl-table) > .unl-warn strong { color: var(--text); } .content:has(.unl-table) > .section-head.section-gap { order: 2; } .content:has(.unl-table) > .unl-bar { order: 3; } .content:has(.unl-table) > .panel:not(.lst-panel) { order: 4; } .content:has(.unl-table) > .lst-panel { order: 5; } .content:has(.unl-table) > .gd-lede { order: 6; } .content:has(.unl-table) > .fold, .content:has(.unl-table) > .calc-caution { order: 7; } .content:has(.unl-table) > .disclaimer { order: 8; } /* * 위쪽 여백을 조인다. 제목·경고·소제목·개수·검색이 줄줄이 서면서 * 표까지 496px 이 걸렸다. 글은 그대로 두고 사이만 좁힌다. */ .content:has(.unl-table) > .section-head { margin-bottom: 6px; } .content:has(.unl-table) > .section-head.section-gap { margin-top: 8px; } .content:has(.unl-table) > .unl-bar { margin-bottom: 6px; } .unl-count { font-size: 11.5px; } .unl-search input { padding: 6px 9px; font-size: 12px; } /* --- 김프 손익 계산기 ---------------------------------------------- * * M. 설명 문단을 아래로 내린다 (2026-08-30). * * 이 화면을 여는 사람은 **계산을 하러** 온다. 그런데 맨 위에 네 줄짜리 * 설명(151px)이 깔려 있어 급등락과 계산기가 한 화면 아래로 밀려났다. * 설명은 한 번 읽으면 그만인 글이라 아래에 둔다 - `order` 로만 옮기므로 * 읽는 차례와 검색엔진이 보는 차례는 그대로다. PC 는 자리가 넓어 위에 둔다. */ .content > .calc-intro { order: 1; } .content > .calc-layout { order: 0; } /* * 뉴스 화면도 같다 (2026-08-30). 뉴스를 보러 온 사람이 "이 화면이 * 무엇인지" 넉 줄을 먼저 읽고 시작할 이유가 없다. 아래로 내린다. * (`.news-intro` 는 `.calc-intro` 를 겸하므로 order 는 이미 1 이고, * 여기서는 이 화면의 나머지 차례만 맞춰 준다) */ .content > .news-intro { order: 1; } /* * P. 설명 문단의 여백과 줄 사이를 줄인다 (2026-08-30). * * 줄 사이 1.8 은 넓은 화면에서 읽기 좋은 값인데, 폰에서는 한 문단이 * 여덟 줄까지 늘어나 그 1.8 이 그대로 화면 높이가 된다. 1.65 로 * 내리고 문단 사이도 16 -> 10px 로 줄인다. * * 문장 자체는 HTML 쪽에서 짧은 문단으로 끊어 놓았다. */ .calc-intro { line-height: 1.65; margin-bottom: 10px; font-size: 13.5px; } .prose-cols { gap: 0; } /* * Q. 접어 둔 긴 설명 (2026-08-30). * * app.js 의 `긴설명접기()` 가 폰에서만 `
` 로 감싼다. * 접힌 줄은 **눌러서 펴는 것**이 한눈에 보여야 하므로, 오른쪽 끝에 * 화살표를 두고 줄 전체를 단추처럼 그린다. */ .fold { margin: 0 0 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .fold-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; /* 기본 삼각형을 없앤다 */ } .fold-head::-webkit-details-marker { display: none; } /* 오른쪽 끝 화살표. 펴면 위를 본다 */ .fold-head::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--label); border-bottom: 2px solid var(--label); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s; } .fold[open] .fold-head::after { transform: rotate(-135deg) translate(-2px, -2px); } .fold-head:hover { color: var(--accent); } /* 감싼 원래 덩어리는 제 테두리를 벗는다 - 바깥 상자가 이미 두르고 있다 */ .fold > .calc-caution, .fold > .gold-explain, .fold > .fng-explain, .fold > .dv-help, .fold > .prose-cols, .fold > .mood-note { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 0 12px 12px; } /* * 주의 · 계산 방법 링크도 같은 order 로 두어 원래 차례를 지킨다. * 링크만 3 으로 뒀더니 바닥글(order 2)이 그 앞으로 끼어들었다. */ .content > .calc-caution, .content > .calc-method-link { order: 2; } /* * N. 계산기 칸 사이를 조인다 (2026-08-30). * * 한 줄이 43px 이라(글 20 + 여백 7 + 입력칸 여백) 열 줄이면 430px 이다. * 폰 한 화면이 800px 인데 그 절반을 입력칸 사이 빈자리가 먹고 있었다. * 글자는 그대로 두고 **여백만** 줄인다 - 값은 읽혀야 한다. */ .calc-group { margin: 10px 0 3px; font-size: 11.5px; } .calc-row { margin-bottom: 4px; gap: 8px; font-size: 12.5px; } .calc-row input { padding: 5px 8px; font-size: 13px; } .calc-note { margin-top: 10px; line-height: 1.55; } /* * 이름을 입력칸 **위**로 올리고 두 칸씩 나란히 놓는다 (2026-08-30). * * 이름과 칸을 좌우로 두면 한 줄에 하나뿐이라 아홉 줄이 됐다. * 위아래로 쌓으면 한 칸이 절반 폭(164px)이면 되고 - "USDT 구매 단가 * (원)"(110px)도 그 안에 들어간다 - 줄이 반으로 준다. * * 이름·칸을 나란히 두는 편이 읽기 좋은 것은 자리가 넓을 때 얘기다. * PC 는 그대로 좌우로 둔다. */ .calc-inputs, .calc-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; align-items: end; } /* 입력 한 쌍이 아닌 것(방향·수수료)은 줄을 통째로 쓴다 */ .calc-inputs > :not(.calc-row) { grid-column: 1 / -1; } /* * 종목 고르개와 "현재 시세를 불러오기"는 한 줄에 나란히 둔다. * 둘 다 짧아 각자 한 줄을 쓸 이유가 없다. */ .calc-inputs > .calc-pick, .calc-inputs > .calc-load { grid-column: auto; } /* * 종목 고르개와 "현재 시세를 불러오기" 의 **어깨선을 맞춘다**. * * 고르개는 `.calc-pick { margin-bottom: 10px }` 을 물려받아 아래로만 * 10px 이 붙어 있었다. flex 의 가운데 맞춤은 여백까지 넣은 상자를 * 기준으로 잡으므로 그만큼 어긋난다 - 김프map 의 "USDT 기준" 에서 * 겪은 것과 같은 문제다. 여백을 지우고 둘 다 줄을 꽉 채우게 한다. */ .calc-inputs { align-items: stretch; } .calc-inputs > .calc-pick { margin-bottom: 0; } .calc-inputs > .calc-pick .calc-search { height: 100%; display: block; } .calc-inputs > .calc-load { width: 100%; height: 100%; margin: 0; } /* * "투입" · "시세" 머리글은 뺀다. 칸마다 이름이 바로 위에 붙었으므로 * (투입 수량 (USDT) · 글로벌 코인 가격 (USDT)) 한 번 더 묶어 줄 * 필요가 없다. 줄 둘이 준다. PC 는 그대로 둔다. */ .calc-inputs > .calc-group { display: none; } .calc-inputs { row-gap: 8px; } .calc-row { flex-direction: column; align-items: stretch; gap: 2px; margin-bottom: 0; } .calc-row input { width: 100%; } /* --- 시가총액 순위 화면 ------------------------------------------- * * I. 머리 숫자를 한 줄로 (2026-08-30). * * "현재 전체 시가총액"(라벨) 과 "3784조 2,003억"(값) 이 각각 접혀 * 넉 줄을 쓰고 있었다. 라벨을 한 단 줄이고 값도 1.5rem -> 1.25rem 으로 * 내리면 라벨·값·달러표기가 한 줄에 선다. */ .mcap-head { gap: 6px; margin-bottom: 10px; flex-wrap: nowrap; align-items: baseline; } .mcap-head .chart-label { font-size: 11px; white-space: nowrap; } .mcap-head strong { font-size: 1.25rem; white-space: nowrap; } .mcap-usd { font-size: 11px; white-space: nowrap; margin-left: auto; } /* * J. 표에서 김프·기간 등락 넷을 뺀다 (2026-08-30). * * 여덟 칸이라 폰에서 가로로 밀어야 끝이 나왔다. 이 화면을 여는 이유는 * **어느 종목이 큰가**이므로 24시간 거래액과 시가총액이면 된다. * 김프는 첫 화면 표가 훨씬 자세히 보여 준다(그쪽이 본업이다). * * 남기는 칸 - # · 이름 · 24시간 거래액 · 시가총액 */ .mcap-table th:nth-child(3), .mcap-table td:nth-child(3), .mcap-table th:nth-child(4), .mcap-table td:nth-child(4), .mcap-table th:nth-child(5), .mcap-table td:nth-child(5), .mcap-table th:nth-child(6), .mcap-table td:nth-child(6) { display: none; } .mcap-table { font-size: 12px; } .mcap-table th, .mcap-table td { padding: 7px 4px; } .mcap-table thead th { font-size: 11px; } .mcap-table .mc-rank { width: 22px; } /* --- 데이터 화면(김프map·입출금·순위·history·미상장) --------------- * * G. 탭 다섯을 한 줄에 (2026-08-30). * * 재 보니 다섯 탭이 504px 이고 자리는 336px 이라 두 줄이었다. * 글자만 줄여 넣으려면 10px 까지 내려가야 해서 안 읽힌다. * * 대신 **폰에서만 짧은 이름**으로 단다(첫 화면 띠에서 쓰던 방법 그대로, * `.nm-long` / `.nm-short`). PC 는 긴 이름 그대로다. * * 입출금 막힘 -> 입출금 시가총액 순위 -> 시총 순위 * 김프 history -> history 국내 미상장 -> 미상장 * * 여백과 글자도 한 단씩 줄인다. 밀지 않고 **넣는다** - 미는 줄과 * 잘린 줄은 눈으로 구별이 안 된다(머리띠 메뉴에서 이미 겪었다). */ .data-tabs { flex-wrap: nowrap; gap: 4px; margin-bottom: 12px; padding-bottom: 8px; } .data-tab-btn { padding: 7px 8px; font-size: 12.5px; white-space: nowrap; } /* * H. 김프map 종목 단추 줄을 폰에서 뺀다 (2026-08-30). * * 여섯 단추가 두 줄(67px)을 쓰는데, 바로 아래 검색 창이 같은 일을 * 한다 - 치면 좁혀지고 로고까지 나온다. 폰에서는 자리가 더 아깝다. * PC 는 자리가 넓어 그대로 둔다. */ .map-picks { display: none; } /* * 단추가 빠져 비는 왼쪽에 기준을 적고, 검색 창이 나머지를 다 쓴다. */ /* * 검색 창과 **어깨높이를 맞춘다** (2026-08-30). * * 글자만 놓았더니 5px 내려앉아 보였다. 범인은 검색 창이 물려받은 * `.calc-pick { margin-bottom: 10px }` 이다 - flex 의 `align-items: * center` 는 여백까지 넣은 상자를 기준으로 가운데를 잡으므로, 아래로만 * 10px 이 붙은 상자와 가운데를 맞추면 글자가 그 절반만큼 내려간다. * * 폰에서는 그 아래 여백을 지우고, 기준글도 검색 창과 **같은 상자** * (테두리·바탕·둥근 모서리·안여백)로 그린 뒤 `align-self: stretch` 로 * 높이를 그대로 따라가게 한다. 둘의 위아래 선이 딱 맞는다. */ .map-basis { display: inline-flex; align-items: center; align-self: stretch; flex: none; padding: 8px 10px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; color: var(--label); font-size: 12.5px; font-weight: 700; white-space: nowrap; } .map-pick-box { margin-left: auto; margin-bottom: 0; flex: 1 1 0; width: auto; min-width: 0; } /* * 입력칸이 inline 이라 감싼 상자에 **글자 내림선 자리 0.75px** 이 더 * 붙는다. `align-items: stretch` 로 늘어나는 것은 그 감싼 상자이지 * 입력칸이 아니라서, 기준글 상자(36.75)와 입력칸(36)의 아랫선이 * 0.75px 어긋났다. 입력칸이 감싼 상자를 꽉 채우게 한다. */ .map-pick-box .calc-search { display: block; height: 100%; } .map-head { gap: 8px; margin-bottom: 10px; flex-wrap: nowrap; align-items: stretch; } /* 긴 설명 상자의 안쪽 여백. 20px 은 글 폭을 40px 깎아먹는다 */ .calc-caution, .map-foot, .mth-block, .fng-explain { padding: 12px 14px; } /* --- 1. 맨 위 요약 띠 (123px → 40px) -------------------------------- * 처음에는 한 줄로 두고 옆으로 밀게 했다. 높이는 32px 로 가장 낮았지만 * 오른쪽 끝이 잘려 보여서 "고장 난 화면"으로 읽혔다. 미는 줄인지 * 잘린 줄인지 눈으로는 구별이 안 된다. * * 그래서 접되 빽빽하게 접는다. 일곱 항목이 두 줄에 다 들어오고 * 잘리는 곳이 없다. 8px 더 쓰고 "다 보인다"를 얻는 쪽이 낫다. */ /* * 2026-08-30 — 다시 키웠다. * * 11px 은 **너무 작아 안 읽혔다.** 여기 있는 값(환율·테더·점유율)은 * 김프를 읽는 데 바로 필요한 숫자들이라 작게 두면 둔 뜻이 없다. * 12.5px 로 올리고 줄 사이도 조금 벌린다. 두 줄은 그대로다. */ .summary-inner { flex-wrap: wrap; gap: 4px 12px; padding: 7px var(--page-pad); font-size: 12.5px; line-height: 1.55; } /* 값은 이름보다 한 단 크게 — 눈이 숫자에 먼저 가야 한다 */ .summary-item strong { font-size: 13.5px; } .summary-item .sub { font-size: 11.5px; } .sum-logo { width: 14px; height: 14px; } /* 다섯 항목을 다 접으면 네 줄(72px)이 된다. 가장 넓은 "24시간 거래량" * 하나(200px)를 폰에서 빼면 두 줄에 들어온다. 이 값은 김프와 직접 * 상관이 없는 세계 시장 통계라 첫 화면에서 뺄 것을 고르면 이것이다. * 시장온도(/market) 화면에 그대로 있다. */ .summary-item:has(#sum-volume) { display: none; } /* --- 2. 머리띠 (110px → 76px) -------------------------------------- */ .header-inner { padding: 7px var(--page-pad); gap: 4px 10px; } .logo { font-size: 18px; } .header-actions { gap: 10px; } /* 눌리지 않는 안내 글은 폰에서 자리만 차지한다. 바닥글에 그대로 있다 */ .header-actions .header-link.disabled { display: none; } /* 메뉴는 여섯 칸이라 폭이 아슬아슬하다. 접히면 머리띠가 한 줄 더 * 늘어나므로, 접지 말고 밀게 한다 */ /* * 메뉴 여섯 칸이 360px 에서 11px 모자라 "뉴스"가 잘렸다. * 밀 수는 있지만 미는 줄과 잘린 줄은 눈으로 구별이 안 된다 - * 요약 띠·나라별에서 이미 겪은 것과 같은 문제다. * * 그래서 밀지 않고 **넣는다.** 사이 14 → 8, 글자 14.5 → 13.5. * 한 번에 10/14 로 줄여 봤더니 여유가 0 이었다 - 계산으로는 17px 이 * 남아야 했는데 실제로는 딱 걸쳤다. 딱 맞는 것은 안 맞는 것과 같다. * 기기마다 한글 글꼴 폭이 다르므로 20px 쯤 여유를 남긴다. * * overflow-x 는 그대로 둔다 - 나중에 메뉴가 하나 늘면 잘리는 대신 * 밀리기라도 해야 한다. */ /* * 2026-08-28 — 메뉴가 여섯에서 일곱("용어")이 되며 14px 넘쳤다. 위 주석에서 * 예상했던 그 일이다. 밀리게 두지 않고 자리를 만들었다 — 밀리는 화면은 * 잘린 것처럼 보인다는 것이 이 사이트가 폰에서 세운 원칙이다. * * 사이 8→7px, 글씨 13.5→13px. 재어 보니 남는 폭이 정확히 20px 이다 * (위에서 정한 여유 기준). 여기서 항목이 하나 더 늘면 다시 재야 한다. */ /* * 2026-08-29 — 용어를 바닥글로 내려 항목이 여섯이 되면서 자리가 남았다. * 오른쪽에 빈 곳이 생겨 줄이 어중간해 보였으므로, 남는 폭을 항목 * 사이로 고르게 나눠 준다(space-between). 글씨도 한 단 올린다. */ .nav { flex-wrap: nowrap; overflow-x: auto; gap: 7px; justify-content: space-between; scrollbar-width: none; } /* * `.nav a` 로 적는다. 위에 `.nav a { font-size: 14.5px }` 가 있어서 * `.nav-item` 으로 쓰면 **선택자가 덜 구체적이라 밀린다.** 원래 있던 * 13.5px 규칙도 그래서 한 번도 먹은 적이 없었다(재 보고 알았다). */ .nav a.nav-item { font-size: 14px; } .nav .nav-main { font-size: 14px; } .nav::-webkit-scrollbar { display: none; } .nav-item { padding: 4px 0; white-space: nowrap; } /* 본문 위쪽 여백도 줄인다 */ /* 위 여백도 위 Y 묶음에서 한 번에 정한다 */ /* --- 3. 현재 김프 카드 (212px → 84px) ------------------------------ * 두 칸씩 놓여 두 줄이 됐고, 넷째 칸은 비어 있었다. 셋을 한 줄에 * 놓으면 빈칸이 없어지고 줄 하나가 통째로 사라진다. */ /* * 첫 화면의 값 카드 셋(비트코인·이더리움·달러인덱스)은 한 줄에 놓는다. * 이름이 짧아 108px 에 들어간다. */ .cards { grid-template-columns: repeat(3, 1fr); gap: 6px; } /* * 금프 카드는 넷이고 이름이 길다 - "국내 금 (한국거래소)", "$4,598.20", * "원/그램 · 현물". 셋으로 놓으면 108px 이라 글자가 칸 밖으로 나간다. * 실제로 15~29px 씩 넘치고 있었다. 둘씩 두 줄로 놓는다. */ /* --- 금 프리미엄 화면 ----------------------------------------------- * * O. 큰 상자를 줄여 한눈에 (2026-08-30). * * 큰 숫자 상자(165px)와 카드 넷(209px)이 374px 을 써서, 폰 한 화면에 * 큰 숫자와 카드 넷이 같이 안 들어왔다. 안여백과 글자를 내린다. * * 상자 안여백 30/24 -> 16/14px, 큰 숫자 2.6 -> 2rem * 카드 안여백도 한 단, 값 1.15 -> 1rem */ .gold-hero { padding: 16px 14px; margin-bottom: 10px; } .hero-label { font-size: 12px; margin-bottom: 4px; } .hero-rate { font-size: 2rem; } .hero-diff { font-size: 12.5px; margin-top: 4px; } .gold-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; } .gold-cards .card { padding: 9px 11px; } .gold-cards .card-price { font-size: 1rem; } /* * 등락률을 **값 줄 오른쪽**으로 올린다 (2026-08-30). * * 카드가 이름 / 값 / 부제 / 등락률 넉 줄이었는데, 등락률은 짧아 * 그 줄 왼쪽만 쓰고 오른쪽이 통째로 비어 있었다. 값 줄 오른쪽에 * 올리면 줄이 하나 준다. * * 국내 금 (한국거래소) 국내 금 (한국거래소) * 203,010원 -> 203,010원 -1.28% * 원/그램 · 현물 원/그램 · 현물 * -1.28% */ .gold-cards .card { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 1px; column-gap: 6px; } .gold-cards .card-name, .gold-cards .card-sub { grid-column: 1 / -1; } .gold-cards .card-price { grid-column: 1; } /* * 금프 카드는 등락률이 `.card-foot` 없이 카드 바로 밑에 붙는다 * (첫 화면 카드와 다르다). 둘 다 잡아 값 줄 오른쪽에 올린다. */ .gold-cards .card-foot, .gold-cards > .card > .card-change { grid-column: 2; grid-row: 2; margin-top: 0; text-align: right; } /* * 지표 카드가 한 줄에 하나씩 놓여 있었다 - 폭 336px 에 높이 114px 인데 * 담긴 것은 이름·값·등락 셋뿐이다. 스물다섯 장이면 3,157px 이다. * * 까닭은 최소 폭이 180px 이라서다. 336px 에서는 180 둘(360)이 안 들어가 * 한 칸으로 떨어진다. 겨우 24px 때문이다. 폰에서만 148px 로 낮춘다. * "필라델피아 반도체"(가장 긴 이름)와 "11,787.33"(가장 긴 값)이 * 164px 칸에 들어가는 것을 재서 확인했다. */ .ind-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; } .ind-card { padding: 10px 11px 9px; } .ind-price { font-size: 17px; } /* * 바닥 줄 = 등락 딱지(67px) + 작은 그래프(76px) + 사이 10px = 153px. * 칸이 141px 이라 12px 넘친다. 사이를 좁히고 딱지를 한 단 줄이면 맞는다. * 그래프는 남긴다 - 숫자만 있는 것보다 흐름이 한눈에 들어온다. */ .ind-foot { gap: 5px; } .ind-badge { font-size: 11.5px; padding: 2px 5px; } .card { padding: 7px 6px; } .card-name { font-size: 11px; } .card-price { font-size: 13.5px; } .card-sub { font-size: 10.5px; } .card-change { font-size: 11px; } /* 차트 단추는 그림만 남긴다. 116px 칸에서 글자까지 넣을 자리가 없다 */ .card-chart-btn .chart-toggle-label { display: none; } /* --- 4. 두 요약 줄 (156+177px → 76+72px) --------------------------- * 항목마다 줄을 하나씩 차지하고 있었다. 곁말(거래액 가중 등)을 감추면 * 두 항목이 한 줄에 들어간다. 곁말은 계산 방법 화면에 다 적혀 있다. */ .kimp-strip, .nation-strip, .hist-strip { min-height: 0; padding: 9px 12px; margin: 8px 0 10px; gap: 6px 14px; } .ks-note, .ns-note { display: none; } .ks-label, .ns-title { font-size: 11.5px; } .ks-more, .ns-more { font-size: 11.5px; } /* * 띠 셋(김프 히스토리·평균 김프·나라별)을 **같은 크기로 맞춘다.** * * 셋이 세로로 붙어 있는데 글자 크기가 제각각이면 같은 종류의 칸으로 * 안 읽힌다. 특히 평균 김프만 17px 이라 혼자 커 보였다. * * 딱지 크기·안쪽 여백·이름표 크기를 하나로 묶는다. */ .ks-value, .ks-item:first-child .ks-value, .ns-item .chip, .ns-item strong { font-size: 11.5px; padding: 1px 5px; } .ks-label, .ns-title, .ns-name { font-size: 11.5px; } /* * 셋을 같은 높이로 못 박는다. * * 히스토리·나라별은 제목줄이 있어 110px 인데 평균 김프만 88px 이라 * 혼자 눌린 것처럼 보였다. 세로로 붙어 있는 같은 종류의 칸이라 * 크기가 어긋나면 그것부터 눈에 띈다. * * 항목을 억지로 늘리는 대신 칸 높이를 맞추고 안에서 가운데로 세운다. * 숫자가 늘어 줄이 하나 더 생기면 그만큼 저절로 커진다(min 이므로). */ /* * 셋을 같은 높이로 못 박는다. * * 2026-08-30 — 133px 에서 줄였다. 이 높이는 나라별이 **다섯**이라 * 세 줄이 나오던 때 잰 값이다. 바이낸스를 뺀 뒤로는 셋 다 두 줄이라 * 그만큼이 필요 없는데, 못 박아 둔 133px 때문에 위아래로 빈자리가 * 남아 있었다. 실제로 필요한 높이까지 내리고 안쪽 여백도 조인다. * * 값 자체는 아래 `--strip-h` 하나만 고치면 셋이 같이 움직인다. * 133 -> 104 -> 80 -> 58. 항목을 한 줄로 쌓아(F) 또 한 줄이 줄었다. */ .kimp-strip, .nation-strip, .hist-strip, .deriv-strip { --strip-h: 58px; min-height: var(--strip-h); align-content: center; /* * 위아래 여백 7 -> 5px. 항목을 한 줄로 쌓고 나니(F) 띠를 이루는 * 것이 제목 줄(17) + 항목 줄(37) + 위아래 여백뿐이라, 남은 것은 * 이 여백밖에 없었다. */ padding: 5px 10px; } /* 항목 사이 간격도 셋을 같게 */ .kimp-strip, .nation-strip, .hist-strip, .deriv-strip { gap: 4px 10px; } /* * 띠 사이는 **5px**. "붙어 있지 않다" 만 알리면 된다. * * 재 보니 16 · 16 · 8 · 8 로 들쭉날쭉했다. 위아래 여백을 둘 다 8px * 로 뒀는데 이 상자들은 flex 자식이라 **여백이 겹쳐지지 않아서** * 8+8=16 이 됐고, 마지막 둘만 위 여백이 0 이라 8 이었다. * (문단끼리는 겹쳐지지만 flex 안에서는 안 겹친다) * * 위 여백을 0 으로 없애고 아래만 5px 로 둔다. 넷 사이가 모두 같아진다. */ .kimp-strip, .nation-strip, .hist-strip, .deriv-strip { margin: 0 0 5px; } /* 평균 김프 줄도 같은 한 줄 배열로 세운다 (아래 F 참고) */ .kimp-strip { display: flex; flex-wrap: wrap; align-content: center; } .kimp-strip .ks-item { flex: 1 1 0; min-width: 0; } /* * "계산 방법 →" 은 줄 전체를 쓰되 **오른쪽 끝에** 선다 (2026-08-30). * * 왼쪽에 두면 바로 위 "코인 자체 차이" 와 세로로 붙어 그 칸에 딸린 * 말처럼 보였다. 오른쪽 아래는 비어 있던 자리이고, 위 두 상자의 * "더보기 →" · "김프map →" 도 오른쪽 끝이라 셋이 한 줄에 선다. */ .kimp-strip .ks-more { flex: 1 0 100%; text-align: right; } .ns-row { gap: 4px 10px; } /* * 김프 히스토리 줄이 혼자 넉 줄이었다. * * PC 에서는 제목·그림·항목·링크를 한 줄에 놓으려고 항목 칸에 * `flex: 1 1 0` 을 줬는데, 폰에서는 제목(71px)과 링크(85px)를 빼고 나면 * 128px 밖에 안 남아 **네 항목이 세로로 쌓였다.** * * 폰에서는 나라별 줄과 똑같이 **항목이 제 줄을 통째로 쓰게** 한다. */ /* 히스토리·나라별 모두 항목이 제 줄을 통째로 쓰게 한다 */ .hist-strip .ns-row, .nation-strip .ns-row, .deriv-strip .ns-row { flex: 1 0 100%; } /* * E. "→" 링크를 제목 줄로 끌어올린다 (2026-08-30). * * 폰에서 이 상자는 네 줄이었다 — 제목 / 항목 / 항목 / 링크. * 그런데 제목("김프 히스토리")은 짧아 **줄 오른쪽이 통째로 비어 있고**, * 링크는 혼자 한 줄을 쓰고 있었다. 둘을 한 줄에 세우면 줄 하나가 준다. * * DOM 차례는 제목·그림·항목·링크 순이라 그대로 접으면 링크가 맨 아래로 * 간다. `order` 로 링크만 항목보다 앞으로 당긴다(눈에 보이는 차례만 * 바뀌고 읽는 차례·탭 차례는 그대로다). */ .hist-strip .ns-head, .nation-strip .ns-head, .deriv-strip .ns-head { order: 0; } .hist-strip .hs-spark { order: 1; } .hist-strip .ns-more, .nation-strip .ns-more, .deriv-strip .ns-more { order: 2; margin-left: auto; } .hist-strip .ns-row, .nation-strip .ns-row, .deriv-strip .ns-row { order: 3; } /* * 1번 — 현재 김프 카드는 폰에서 뺀다. * * 비트코인·이더리움·달러인덱스 값은 아래 띠와 표에 이미 있고, 폰에서는 * 이 카드 셋이 첫 화면을 통째로 먹는다. PC 에서는 그대로 둔다. */ #highlight-cards { display: none; } /* * 카드를 뺐으니 그 위 "현재 김프" 제목도 뺀다. 제목만 남으면 아래 * 김프 history 띠를 가리키는 꼴이 되는데 그건 현재가 아니다. * h1 은 HTML 에 그대로 있다(검색엔진과 화면 읽기 프로그램용). * * 2026-08-30 고침 - 처음엔 `.content > .section-head:first-of-type` * 라고만 썼는데, 그러면 **모든 화면의 첫 제목**이 사라진다. 계산기의 * "김프 손익 계산기" 도 폰에서 안 보이고 있었다. 바로 뒤에 가격 카드가 * 오는 첫 화면에서만 숨기도록 좁힌다. */ .content > .section-head:has(+ #highlight-cards) { display: none; } /* 나라별 다섯 곳. 이것도 밀게 해 봤더니 왼쪽 끝이 반쯤 잘린 채 * 멈춰 있어 줄이 어긋난 것처럼 보였다. 접어서 두 줄로 두고, * 대신 딱지와 글자를 줄여 세 줄이 되지 않게 맞춘다. */ /* * 2026-08-29 — 항목이 흐르는 대로 놓여 둘째 줄 시작이 첫 줄과 안 맞았다 * ("가장 높았을 때"가 오른쪽으로 밀려 가운데에 빈 곳이 생겼다). * 두 칸 격자로 세워 왼쪽 끝을 맞춘다. */ /* * 띠 셋 모두 **두 칸 격자**로 세운다. * * 흐르는 대로 두면 줄마다 시작점이 달라진다. 나라별은 첫 줄이 * 셋(바이낸스·미국·일본), 둘째 줄이 둘(태국·튀르키예)이라 값 오른쪽이 * 130 / 107 로 어긋나 있었다. * * 세 칸으로도 해 봤다 — 항목 시작은 맞는데 칸이 좁아 값이 6px 넘쳤다. * **두 칸이 유일하게 왼쪽과 오른쪽이 다 맞는다**(값 오른쪽 176 / 335). */ .ns-row { display: flex; flex-wrap: nowrap; gap: 4px; align-items: flex-start; } /* * C. 바이낸스를 도로 넣는다 (2026-08-30). * * 두 칸 격자였을 때는 다섯이면 세 줄이 되어 뺐었다. 아래 F 처럼 * 한 줄로 쌓으니 한 칸이 딱지 폭(58px)만 차지해 **다섯이 한 줄에 * 들어간다.** 원래는 다섯 다 보이는 편이 낫다. */ /* * D. 긴 이름은 폰에서 짧은 쪽으로 바꿔 단다 (2026-08-30). * * "지금보다 낮았던 시간"이 360px 에서 두 줄로 접혀 그 칸만 높았다. * 자바스크립트가 이름을 두 벌 넣어 두므로 여기서 고르기만 한다. * PC 는 긴 쪽 그대로다. */ .nm-long { display: none; } .nm-short { display: inline; } /* * F. 항목을 **이름 위 · 값 아래**로 쌓아 한 줄에 늘어놓는다 (2026-08-30). * * 이름과 값을 나란히 두면 한 칸이 "이름 + 딱지"(80px 남짓)라 두 칸이 * 한계였고, 그래서 띠마다 항목이 두 줄이었다. * * 쌓으면 한 칸 폭이 **둘 중 넓은 쪽**, 즉 딱지 폭(58px)으로 줄어든다. * 넷이든 다섯이든 한 줄에 들어가고 띠 높이가 한 줄만큼 준다. * 김프map 화면의 머리글이 이미 이 모양이라 눈에도 익다. * * 나라별 다섯 (322 - 4x4) / 5 = 61px >= 딱지 58px * 히스토리 넷 (322 - 3x4) / 4 = 78px */ .ns-item { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; } .kimp-strip .ks-item { flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; } /* 이름이 칸보다 길면 잘라 낸다 - 접히면 줄 높이가 칸마다 달라진다 */ .ns-name, .ks-label { font-size: 10.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * B. 값 딱지를 **같은 규격**으로 (2026-08-30). * * "74%" 는 짧고 "+0.11%p" 는 길어 딱지 크기가 제각각이었다. 숫자를 * 늘려 쓰는 대신(74.00% 처럼) **최소 폭을 못 박고 오른쪽 맞춤**으로 * 둔다 — 값의 뜻은 그대로 두면서 칸만 맞춘다. */ .ns-item .chip, .ns-item strong, .ks-value, .ks-item:first-child .ks-value { font-size: 11.5px; padding: 1px 4px; /* * 쌓기 전에는 `min-width: 58px` + 오른쪽 맞춤으로 딱지 크기를 * 맞췄다. 이제는 칸 자체가 폭을 정하므로 **칸을 꽉 채우고 가운데** * 로 둔다 - 열두 딱지가 저절로 같은 폭이 된다. */ width: 100%; min-width: 0; text-align: center; } /* * 선물 펀딩비 띠만 예외다. 여기는 한 칸에 값이 **둘**(펀딩비·롱 비율) * 이라, 딱지에 `width: 100%` 가 걸리면 첫 값이 칸을 통째로 먹고 둘째 * 값이 칸 밖으로 밀린다. 종목 넷일 때 화면이 68px 넘쳤다. */ .deriv-strip .ns-item strong { width: auto; } /* * 종목이 둘이면 **한 칸을 통째로 한 줄**로 둔다 (2026-08-30). * * 비트코인 +0.010% 롱 54% 이더리움 +0.003% 롱 72% * * 다른 띠는 이름 위·값 아래로 쌓지만, 이 띠는 한 칸에 값이 둘이라 * 쌓으면 세 줄이 된다. 재 보니 한 칸이 154px 이고 이름·값 둘을 다 * 옆으로 놓아도 132px 이라 넉넉히 들어간다. */ /* * 위 세 띠와 **같은 모양**으로 되돌린다 (2026-08-30). * * 한동안 한 줄로 뒀는데, 그러면 이 띠만 58px 이고 나머지 셋은 71px * 이라 넷이 나란히 놓였을 때 하나만 작아 보였다. 이름 위·값 아래로 * 쌓으면 높이가 저절로 맞고 글씨도 키울 자리가 생긴다. * * 비트코인 <- 이름 * [롱 → 숏] [0.010%] <- 값 둘 */ /* * 위아래 두 줄. 로고는 이름에 붙는다 (2026-08-30). * * [로고] 비트코인 * 롱 → 숏 0.010% */ .deriv-strip .ns-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .deriv-strip .dvs-vals { align-items: center; gap: 4px; } /* * 글씨는 위 세 띠와 **똑같은 값**을 쓴다. * * 재 보니 이 띠의 글씨는 원래도 같은 크기였다(이름 10.5px, 값 11.5px). * 작아 보인 것은 글씨가 아니라 **한 줄로 뉜 것** 때문이었다. * 쌓고 나면 넷이 71px 로 똑같아진다. */ /* * 화살표 딱지의 테두리를 뗀다. 1px 테두리 때문에 이 띠만 72px 이 * 되어 나머지 셋(71px)과 1px 어긋났다. 바탕색만으로도 딱지로 읽힌다. */ .deriv-strip .dvs-who { font-size: 11px; padding: 1px 5px; border: 0; } /* * 폰에서는 **롱 비율을 뺀다** (2026-08-30). * * "롱 → 숏" 딱지를 붙이니 한 칸이 190px 이 되어 둘이 안 들어갔다 * (자리는 322px). 둘 중 하나를 골라야 하는데, * * 펀딩비 지금 누가 돈을 내고 있나 - 방향이 바로 보인다 * 롱 비율 계좌 **수** 비율이라 자금 크기와 다르다 * * 첫 화면에는 펀딩비를 남긴다. 롱 비율은 시장온도 화면과 * 길게 누르면 나오는 설명(title)에 그대로 있다. */ .deriv-strip .dvs-ls { display: none; } /* * 자리가 모자라면 **잘리지 말고 접힌다.** 기기마다 글꼴 폭이 달라 * 320px 같은 화면에서는 두 칸이 한 줄에 안 들어갈 수 있다. * 그때는 아래로 내려가게 둔다 - 잘려서 안 보이는 것보다 낫다. */ .deriv-strip .ns-row { flex-wrap: wrap; } .deriv-strip .ns-item { min-width: 0; } .deriv-strip .dvs-vals { min-width: 0; } /* * 셋 이상이면 도로 쌓는다. 넷이면 한 칸이 80px 뿐이라 옆으로 놓을 * 자리가 없다 - 억지로 두었더니 화면이 73px 넘쳤다. * (배포할 때 DERIV_SYMBOLS 로 넷을 켜면 이 규칙이 걸린다) */ /* * 종목이 셋 이상이면 한 칸이 80px 뿐이라 "롱 → 숏 0.010%" 가 한 줄에 * 안 들어간다. 그때만 값 둘을 위아래로 쌓는다. */ .deriv-strip .ns-row:has(> :nth-child(3)) .dvs-vals { flex-direction: column; align-items: center; gap: 0; } /* 한 줄이 되었으니 위아래 여백도 더 조인다 */ .deriv-strip { padding: 5px 10px; } /* * 이 띠만 곁말("펀딩비 · 롱 비율")을 되살린다 (2026-08-30). * * 폰에서는 곁말을 다 감춰 뒀는데(`.ns-note { display: none }`), * 이 띠는 값이 무엇인지 적혀 있지 않으면 "+0.010%" 가 김프인지 * 펀딩비인지 알 수가 없다. 제목 줄 오른쪽이 비어 있으니 거기 적는다. */ /* 곁말을 진하게 - 이 줄이 화살표의 뜻을 알려 주는 유일한 곳이다 */ .deriv-strip .ns-note { display: inline; font-size: 10.5px; color: var(--text-sub); font-weight: 700; } /* --- 5. 차트를 코인 표 아래로 --------------------------------------- * 폰에서 차트가 표 위에 있으면 300px 을 먼저 넘겨야 표가 나온다. * 이 화면을 여는 사람은 표를 보러 온다. 차트는 보고 싶을 때 내려 * 보면 된다. PC 는 옆이 넓어 그대로 위에 둔다. */ .content { display: flex; flex-direction: column; } /* * 차트를 폰에도 되살렸다 (2026-08-30). * * 2026-08-29 에는 아예 뺐다. 트레이딩뷰 위젯이 뜨는 순간부터 시세를 * 계속 물고 있어 데이터가 나가기 때문이다. 그런데 차트가 없으면 * 화면이 반쪽이다. * * 이 데이터는 보는 사람과 트레이딩뷰 사이에서 오간다 - 우리 서버를 * 거치지 않으므로 우리 쪽 사용량과는 무관하다. * * 자리는 **PC 와 같이 표 위**다. 한동안 표 아래로 내려 뒀는데, 종목이 * 288개라 표가 18,000px 이다 - 그 아래에 두면 아무도 못 본다. * 실제로 재 보니 차트 칸이 17,907px 지점에 있었다. 안 보이는 것과 * 같으니, 표를 조금 늦게 보더라도 차트는 위에 둔다. * * 크기는 **김프가에 맞춘다** (2026-08-30). 360px 에서 재 보니 * * 김프가 차트 10..350 (340px) x 264px, 표 시작 1042px * 김프고 차트 19..341 (322px) x 300px, 표 시작 938px * * 높이는 우리가 36px 더 크고 폭은 18px 더 좁았다. 264px 로 맞춘다. * * 폭은 상자 안여백(6px)이 먹고 있었다. 폰에서는 위아래·좌우 여백을 * 빼고 차트가 상자를 꽉 채우게 둔다 - 대신 아래 두 줄(간격 단추· * 바닥 줄)에만 여백을 따로 준다. 334px 이 되어 김프가와 6px 차이다. * * PC 는 그대로 360px 이고 여백도 그대로다. */ .content > .chart-panel .chart-box { height: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 0 6px; } .content > .chart-panel .chart-box .tv-chart { height: 264px; } .content > .chart-panel .chart-tf, .content > .chart-panel .chart-foot { padding-left: 6px; padding-right: 6px; } /* * 차트 바닥 줄(차트·종목 고르개·시간)을 **차트 아래로 내린다**. * * 기본 규칙은 이 줄을 차트 위에 얹는다 - `position: absolute` 에 * `right: 132px` 이다. 132px 은 트레이딩뷰가 오른쪽 아래에 그리는 * 시계(02:17:25 UTC+9)를 안 가리려고 비워 둔 자리다. * * PC 는 차트가 986px 이라 이래도 남는다. 폰은 336px 뿐이라 * * 336 - 132(시계 자리) - 307(줄 내용) = -103 * * 즉 **줄이 화면 왼쪽 밖에서 시작한다.** 재 보니 -92px 이었고, * "차트" 라벨과 종목 고르개가 통째로 잘려 나가 있었다. * * 폰에는 얹을 자리가 없다. 얹지 말고 아래에 깐다. 접히게 두어 * 글꼴이 넓은 기기에서도 안 잘리게 한다. */ .content > .chart-panel .chart-foot { position: static; right: auto; bottom: auto; flex-wrap: wrap; gap: 5px 6px; } .content > .chart-panel .chart-foot .chart-select, .content > .chart-panel .chart-foot .ex-pick-btn { font-size: 11.5px; padding: 3px 6px; } .content > .chart-panel .chart-foot .chart-select { min-width: 0; } .content > .chart-panel .chart-foot-label { font-size: 11.5px; } /* * 봉 간격 단추를 폰에서만 켠다. 여섯 칸을 폭 안에서 고르게 나눈다 * (`flex: 1 1 0`) - 글자 길이가 "1분"부터 "4시간"까지 제각각이라 * 내용대로 두면 칸이 들쭉날쭉하다. */ .content > .chart-panel .chart-tf { display: flex; gap: 4px; } .content > .disclaimer { order: 2; } /* --- 6. 코인 표 (한 줄 70px → 46px) -------------------------------- * 폰에서 표는 옆으로 밀어 보는 물건이다. 밀어야 할 거리를 줄이고 * 줄 높이를 낮춘다. 두 가지를 한다. * * 가) 52주 고가·저가 두 칸을 감춘다 * 폰에서 아홉 칸을 다 두면 975px 을 밀어야 끝이 나온다. * 52주 값은 "지금 김프가 얼마냐"와 상관이 없다. 한 해 동안의 * 자리를 보는 값이라 급할 때 보는 것이 아니다. PC 에는 그대로 있다. * * 나) 칸마다 둘째 줄을 감춘다 * 현재가 아래 해외가, 김프 아래 원화 차이, 등락 아래 금액, * 거래액 아래 달러값. 다 있으면 좋지만 그만큼 줄이 두 배로 * 높아져 한 화면에 다섯 줄밖에 안 들어간다. 첫 줄만 남기면 * 열 줄이 들어온다. 값은 PC 와 가로 화면에 그대로 있다. * * 되돌리려면 이 덩이만 지운다. */ /* 여덟·아홉째가 고가대비·저가대비다 (2026-08-25에 칸 차례를 바꿨다: 이름·현재가·김프·선물·전일대비·거래액·고가·저가) */ /* 2026-08-29에 별 칸을 없애면서 번호가 하나씩 당겨졌다 (이름·현재가·김프·선물·전일대비·거래액·고가·저가) */ #coin-table th:nth-child(7), #coin-table td:nth-child(7), #coin-table th:nth-child(8), #coin-table td:nth-child(8) { display: none; } /* * 거래액(24H)도 폰에서 뺀다 (2026-08-29). * * 김프가는 다섯 칸으로 한 화면에 들어옵니다. 우리는 칸이 더 많아 * 옆으로 밀어야 했다. 거래액은 김프를 읽는 데 쓰이지 않는 값이라 * 먼저 뺀다. PC 에는 그대로 있다. */ /* * 폰에서 한 화면에 넣으려면 넉 칸이 한계다. 재 본 값이다. * * 이름145 + 현재가71 + 김프101 + 선물104 + 전일대비55 = 476 (창 360) * 다 줄여도 389 * * 그래서 **전일대비와 거래액을 뺀다.** 남는 넷이 김프고에서 제일 많이 * 보는 값이다 — 어느 코인이, 얼마고, 김프가 몇이고, 선물이 얼마나 붙었나. * 전일대비는 밀면 나오고 PC 에는 그대로 있다. */ #coin-table th:nth-child(5), #coin-table td:nth-child(5), #coin-table th:nth-child(6), #coin-table td:nth-child(6) { display: none; } /* * 김프 칸의 곁값(원화 차이·테더 기준)을 두 줄로 접는다. * 한 줄로 두면 "71만원 T+0.05%" 가 101px 이라 칸 하나 값을 먹는다. * 접으면 55px 이고, 줄 높이는 4px 만 늘어난다. */ #coin-table .kimp-cell .kimp-sub { display: block; } #coin-table .kimp-cell .kimp-sub > span { display: block; } /* * 이름줄 폭. 재 보고 정한 값이다. * * 76px 심볼이 열두 줄 다 잘렸다 ("B…", "E…") * 80px 잘리는 것은 여섯 글자 이상 넷뿐, 밀림 0 ← 이걸로 * 84px 둘로 줄지만 3px 밀린다 */ #coin-table .name-lines { max-width: 72px; } #coin-table .name-cell { gap: 4px; } /* * 이름을 묶어도 **심볼이 길면 칸이 넘쳤다** — TOKAMAK·PIEVERSE 같은 * 여덟 글자짜리가 아래 줄에 그대로 서 있었기 때문이다. * 아래 줄도 같은 폭으로 묶고 넘치면 말줄임한다. */ #coin-table .name-cell .sub-line { display: flex; min-width: 0; max-width: 72px; } #coin-table .name-cell .sym { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* * 2026-08-29 — 둘째 줄을 되살렸다. * * 처음에는 줄 높이를 70px 에서 46px 로 낮추려고 넷을 다 감췄었다. * 그런데 **해외가가 없으면 김프가 왜 그 값인지 확인할 길이 없다.** * 현재가 아래 해외 원화환산, 김프 아래 원화 차이까지는 살린다. * * 전일대비 금액과 거래액 달러값은 그대로 감춘다 — 그건 없어도 김프를 * 읽는 데 지장이 없고, 넷을 다 살리면 한 화면에 다섯 줄밖에 안 남는다. */ #coin-table .stack-cell .abs, #coin-table .vol-cell .vol-usd { display: none; } /* * 둘째 줄(해외가·원화차이·거래소 엠블럼)은 **곁값**이다. 첫 줄과 같은 * 크기로 두면 어느 쪽이 본값인지 안 읽히고 칸도 그만큼 넓어진다. */ #coin-table .kimp-cell .kimp-sub, #coin-table .fut-cell .fut-ex { font-size: 10px; } /* * 다만 **해외가는 윗줄과 같은 크기**로 둔다 (2026-08-30). * * 10px 은 자릿수가 열한 자리(107,135,083)라 폰에서 안 읽혔다. * 어느 쪽이 본값인지는 크기 말고 **색**으로 가른다 - 윗줄은 본문색, * 아랫줄은 흐린색이다. 자릿수가 같아 위아래가 나란히 서기도 한다. */ #coin-table .price-cell .foreign { font-size: 12px; } /* * 거래소 딱지를 16px 에서 13px 로 줄인다. 여섯 개면 그것만 106px 인데 * 폰에서는 그 폭이 칸 하나 값이다. 하나를 빼는 대신 다 두고 줄인다 — * 어느 거래소가 큰지는 차례와 색으로 읽히고, 누르면 이름이 다 나온다. */ #coin-table .fut-cell .ex-badge { width: 13px; height: 13px; font-size: 7.5px; } /* * 사이 간격은 0 으로 두고 `space-between` 에 맡긴다 (2026-08-30). * * 1.5px 을 못 박아 두니 여섯 개 78px + 사이 7.5px = 85.5px 이라 * 줄(83px)을 3px 넘어 **마지막 딱지가 제 줄 밖으로 나갔다**(칸 안이라 * 잘리진 않았지만 오른쪽으로 치우쳐 보인다). 0 으로 두면 남는 자리를 * `space-between` 이 알아서 고르게 나눈다 - 칸이 넓어지면 저절로 벌어진다. */ #coin-table .fut-cell .fut-ex { gap: 0; } /* --- 7. 거래소 고르는 줄 (118px → 80px) ---------------------------- * "기준 거래소" "비교 거래소" 두 글자 묶음이 줄을 하나씩 잡아먹고 * 있었다. 가운데 "대비"가 이미 방향을 알려 주므로 폰에서는 뺀다. * 거래소 이름이 길면 말줄임으로 접는다 - 접혀서 줄이 늘어나는 것보다 * 낫다. 눌러서 목록을 열면 이름은 다 나온다. */ .exchange-bar { padding: 8px 10px; gap: 6px 8px; } .exchange-bar .exchange-label { display: none; } /* 1 1 0 이라야 둘이 남은 폭을 반씩 나눠 갖고 한 줄에 선다. auto 로 두면 앞의 것이 먼저 부풀어 뒤의 것을 아랫줄로 민다 */ .ex-pick { min-width: 0; flex: 1 1 0; } /* * min-width: 160px 을 풀어야 한다. 안 풀면 칸이 136px 로 좁아져도 단추는 * 160px 을 고집해서 줄이 24px 넘친다. 360px(갤럭시 S24 기본값)에서 실제로 * 그랬다. 375 에서는 안 보이던 것이라 폭을 바닥까지 내려 봐야 나온다. */ /* * 2026-08-29 — "바이낸스 USDT" 가 10px 모자라 "바이낸스 U..." 로 잘렸다. * 안쪽 여백과 사이를 줄여 자리를 12px 만들고, 글씨도 한 단계 내렸다. * 재 보니 필요 78px 에 자리 90px 이라 12px 남는다. */ .ex-pick-btn { width: 100%; min-width: 0; padding: 6px 5px; gap: 3px; } .ex-pick-label { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .exchange-vs { font-size: 11px; } .bar-right { flex: 1 0 100%; } /* 선물 칸의 거래소 띠와 로고도 둘째 줄이다. 누르면 그대로 열린다 */ /* 2026-08-29 — 거래소 엠블럼을 되살렸다. PC 와 같은 모양이다 */ /* * "39조 5,735억" 은 열두 글자라 12px 로 두면 칸이 95px 이 되고, * 그만큼 전일대비가 화면 밖으로 밀린다. 한 단 줄여 네 칸을 지킨다. * (칸 차례가 이름·현재가·김프·선물 이므로 넷째가 이 칸이다) */ /* * A. 선물 값을 왼쪽으로 붙이고 오른쪽 끝에 펼침 화살표를 둔다 (2026-08-30). * * 값이 가운데 있으면 **눌러서 열 수 있는 칸이라는 것이 안 보인다.** * 값은 왼쪽, 화살표는 오른쪽 끝에 두면 한눈에 단추로 읽힌다. * 누르면 거래소별 내역이 열린다(원래 있던 기능). */ /* * 금액을 키우고 가운데로 (2026-08-30). * * 9.5px 은 이 칸에서 가장 자주 읽는 값치고 너무 작았다. 11px 로 * 올리고, 남는 자리 안에서 가운데에 세운다 - 화살표는 오른쪽 끝에 * 그대로 두고 값만 그 왼쪽 자리를 통째로 쓰며 가운데 정렬한다. */ #coin-table .fut-cell .fut-total { font-size: 11px; letter-spacing: -0.2px; flex: 1 1 auto; min-width: 0; text-align: center; } #coin-table .fut-cell .fut-head { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 1px; /* * 기본 규칙에 `padding-left: 21px` 이 있다. PC 에서는 오른쪽 화살표 * 만큼을 왼쪽에 두어 값을 가운데로 보이게 하려는 것인데, 폰에서는 * **값을 왼쪽 끝에 붙여야** 하므로 푼다. 재 보니 이 21px 때문에 * 값이 258 이 아니라 279 에서 시작하고 있었다. */ padding-left: 0; } /* * 화살표 자체도 줄인다. 기본은 16px 짜리 동그라미인데 폰 칸(90px)에서는 * 그만큼이 값을 밀어낸다. 12px 로 줄이고 테두리를 뗀다. */ #coin-table .fut-cell .fut-caret { display: inline-flex; flex: none; width: 12px; height: 12px; border: 0; } #coin-table .fut-cell .fut-caret svg { width: 9px; height: 9px; } /* * 이 칸은 값이 아니라 **머리글자**가 폭을 정한다 - "선물 거래량" 이 104px 인데 * 값("39조 5,735억")은 63px 이다. 폰에서는 뒷말을 떼어 "선물"만 남긴다. */ /* * 머리줄을 낮춘다 (2026-08-30). 위아래 7px 씩이던 여백을 4px 로. * 머리글은 한 번 읽고 마는 줄이라 본문만큼 자리를 쓸 이유가 없다. */ #coin-table thead th { font-size: 11px; padding-top: 4px; padding-bottom: 4px; } /* * "이름" 머리글만 왼쪽이라 머리줄이 어긋나 보였다. 나머지 넷은 * 가운데다. 머리줄은 머리줄끼리 맞춘다 (값은 그대로 왼쪽). */ #coin-table thead th.col-name { text-align: center; } /* * 머리글을 줄여도 칸이 104px 그대로였다. 폭을 정하는 것은 머리글이 아니라 * 안에 든 단추였다 - display:flex 인 단추라 칸이 넓어지는 만큼 같이 넓어진다. * 그래서 칸에 폭을 직접 못박는다. 값("39조 5,735억")이 63px 이니 74px 이면 * 넉넉하다. */ /* * "선물 거래량" 머리글과 거래소 엠블럼을 되살렸으므로 자리를 넓힌다. * * 엠블럼은 여섯 개가 고정 크기라 **글씨를 줄여도 안 줄어든다** * (9px 로 내려도 101 → 100px). 잘라내는 대신 자리를 준다 — 잘린 엠블럼은 * 어느 거래소인지 못 알아본다. * * 재 보니 속이 106px 이라 좌우 여백 16px 을 더해 124px. */ /* * 표가 놓이는 상자는 창 폭이 아니라 **334px** 이다(양옆 여백 26px). * 창 360 으로 재면 들어가는데 실제로는 밀린다 — 실제로 그렇게 한 번 * 나갔다. 상자 기준으로 6px 남게 잡는다. */ #coin-table th:nth-child(4), #coin-table td:nth-child(4) { width: 103px; max-width: 103px; } #coin-table .fut-cell { width: 100%; margin: 0; } /* * 이름 칸에서 8px 을 떼어 김프 칸에 준다 (2026-08-30). * * 김프 칸은 56px 에 내용이 48px 이라 **좌우 4px 씩밖에 안 남아** 값이 * 칸 벽에 닿아 보였다. 여기가 이 표에서 가장 자주 읽는 값이다. * * 처음엔 이름 칸에서 떼려고 했다. 첫 줄(비트코인)만 재 보면 106px 중 * 83px 만 쓰고 있어 넉넉해 보인다. **그런데 칸 폭은 첫 줄이 아니라 * 표에서 가장 넓은 줄이 정한다** - 심볼이 긴 "AUCTION"·"PIEVERSE" * 줄은 96px 을 다 쓰고 있었다. 8px 을 떼자마자 그 아홉 줄이 넘쳤다. * 선물 칸도 엠블럼 여섯 개가 고정 크기라 줄일 자리가 없다. * * 그래서 자리는 **칸 여백**(4 -> 3px, 위 참고)에서 만들었다. * * 이름 106 -> 103 (내용 96 + 여백 6 = 102, 1px 남는다) * 현재가 73 -> 72 (내용 66 + 여백 6 = 72) * 김프 56 -> 63 (내용 48 + 여백 6 = 54, 9px 이 숨통으로 간다) * 선물 98 -> 96 (내용 90 그대로, 여백만 2px 줄었다) * * 현재가는 이름이 좁아진 만큼 **왼쪽으로 밀린다.** 표 전체 폭은 334 * 그대로다. */ #coin-table th:nth-child(1), #coin-table td:nth-child(1) { width: 94px; max-width: 94px; } #coin-table th:nth-child(3), #coin-table td:nth-child(3) { width: 66px; max-width: 66px; } /* --- 8. 표 칸을 좁혀 네 칸이 한 화면에 들어오게 ----------------------- * 둘째 줄을 감췄는데도 보이는 칸이 이름·현재가·김프 셋뿐이었다. * 칸 폭이 그대로였기 때문이다 - 값만 사라지고 자리는 남았다. * * 안쪽 여백이 칸마다 좌우 12px 씩, 일곱 칸이면 168px 이다. 375px 화면의 * 절반에 가깝다. 이것부터 줄이고 글자도 한 단 내린다. * 목표는 전일대비까지 네 칸이 밀지 않고 보이는 것. */ #coin-table { font-size: 12px; } /* * 좌우 4px. 5px 이면 412px 화면에서 전일대비 칸이 4px 모자라 밀려 난다. * 칸마다 2px 이니 일곱 칸이면 14px 이 생기고, 그 14px 이 칸 하나를 살린다. * 360px 에서는 어차피 다섯 칸이라 손해가 없다. */ /* * 좌우 3px (2026-08-30, 4px 에서 내림). * * 김프 칸에 자리를 만들려고 이름·선물 칸을 봤는데 **둘 다 여유가 * 없었다.** 이름은 심볼이 긴 줄("AUCTION"·"PIEVERSE")에서 96px 을 * 다 쓰고, 선물은 거래소 엠블럼 여섯 개가 13px 씩 고정이라 80px 이 * 그대로 필요하다. 잘라내면 어느 거래소인지 못 알아본다. * * 남은 곳은 **칸마다 붙는 좌우 여백**뿐이었다. 4 -> 3px 이면 칸당 2px, * 네 칸이면 8px 이 생긴다. 그 8px 을 김프 칸이 가져간다. */ #coin-table th, #coin-table td { padding: 7px 3px; } #coin-table .col-fav { width: 20px; padding-left: 4px; } #coin-table .fav-btn { font-size: 13px; } /* * 코인 엠블럼 15 -> 13px (2026-08-30). * * 현재가·김프를 왼쪽으로 더 당기려면 이름 칸이 그만큼 줄어야 한다. * 처음엔 이름 줄 폭(72 -> 70px)에서 뗐는데, 재 보니 **심볼이 잘리는 * 줄이 25 -> 47 로 늘었다** - "AUCTION" 이 "AUCTIO..." 가 된다. * 엠블럼에서 2px 을 빼면 잘리는 줄이 그대로다. 선물 칸의 거래소 * 딱지도 13px 이라 크기가 오히려 맞는다. */ #coin-table .coin-icon { width: 13px; height: 13px; } /* * 엠블럼과 이름 사이를 5 -> 3px (2026-08-30). 현재가·김프를 왼쪽으로 * 더 당기려면 이름 칸이 그만큼 줄어야 하는데, 이름 칸에서 아직 * 안 잘리고 뗄 수 있는 것은 이 틈뿐이었다. */ #coin-table .name-cell { gap: 3px; } /* 이름 칸이 142px 이었다. 칸 폭은 표에서 가장 긴 이름이 정하는데 * "엑스알피(리플)" 같은 것이 끼면 모든 줄이 그만큼 넓어진다. * 폰에서는 이름 길이를 묶고 넘치면 말줄임한다. 전체 이름은 눌러서 * 들어가면 나오고, 밑에 심볼(BTC)이 그대로 있다. */ #coin-table .coin-name .nm { font-size: 12.5px; display: inline-block; /* * 넉 자("비트코인")가 50px 이다. 60px 이면 들어가긴 하는데 여유가 * 10px 뿐이라, 글꼴이 조금만 넓은 기기에서는 넉 자도 말줄임이 붙는다. * 66px 으로 두어 **넉 자는 어디서나 온전히** 나오게 한다. * 다섯 자부터 말줄임이 붙는다. */ max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } #coin-table .name-cell .sym { font-size: 10.5px; } #coin-table .price-cell .dom, #coin-table .kimp-cell .rate, #coin-table .stack-cell .pct, #coin-table .vol-cell .vol-krw { font-size: 12px; } /* * 정렬 화살표를 되살린다 (2026-08-30). * * 예전에는 칸이 넓어질까 봐 뗐는데, 재 보니 칸 폭은 **머리글이 아니라 * 표 안의 값**이 정한다. 머리글 쪽에는 이만큼 남아 있다 — * 이름 82px · 현재가 37 · 김프 32 · 선물 35. 화살표 12px 은 그 안에 든다. * * 폰에서는 조금 작게 둔다. */ #coin-table th.sortable::after { width: 7px; height: 11px; margin-left: 3px; background-size: 7px 11px; } #coin-table th.sortable { padding-left: 4px; padding-right: 4px; } /* * 4. 선물 머리글은 두 줄 (2026-08-30) * * 선물 거래량 (24H) * 현물 거래량 * * 이 칸 하나가 값 둘을 담으므로 머리글도 둘이어야 한다. (24H)는 두 * 값에 다 걸리는 말이라 첫 줄 오른쪽에 붙인다. */ #coin-table thead th.col-fut { font-size: 10px; line-height: 1.3; } #coin-table thead th.col-fut .th-unit { display: inline; color: var(--muted); } /* * 머리줄 맞춤 — 두 줄짜리(선물) 옆에서 한 줄짜리들이 어긋나 보였다. * * 가운데(middle)로 세우면 두 줄짜리가 위로 올라가 첫 줄이 13px 어긋난다. * 아래(bottom)로는 24px 어긋난다. **위(top)로 세워야 첫 줄이 맞는다.** * * middle 715 · 715 · 715 · 702 * bottom 726 · 726 · 726 · 702 * top 703 · 703 · 703 · 702 ← 이걸로 (1px 은 글씨 크기 차이) */ #coin-table thead th { vertical-align: top; } /* * 5. 막대와 엠블럼의 폭을 맞춘다 (2026-08-30) * * 막대는 96px, 엠블럼 줄은 86px 이라 막대만 양옆으로 5px 씩 튀어나와 * **엠블럼이 오른쪽으로 밀린 것처럼** 보였다. 둘 다 칸 폭을 그대로 쓰고, * 엠블럼은 그 안에 고르게 편다 — 그러면 첫 딱지와 마지막 딱지가 * 막대의 양 끝과 맞는다. */ #coin-table .fut-cell .fut-bar, #coin-table .fut-cell .fut-ex { width: 100%; } #coin-table .fut-cell .fut-ex { justify-content: space-between; } /* * 막대에 `min-width: 96px` 이 걸려 있었다. 폰에서는 칸이 90px 이라 * **막대만 6px 튀어나왔고**, 그래서 엠블럼이 안으로 밀린 것처럼 보였다. * 폰에서는 칸 폭을 그대로 따르게 푼다. */ #coin-table .fut-cell .fut-bar { min-width: 0; } /* * 2026-08-29 — 차트 글씨를 되살렸다. * 노란 막대만 있으면 무슨 단추인지 모른다. "차트" 두 글자가 붙어야 * 눌러 볼 생각이 든다. */ #coin-table .name-cell .sub-line .chart-toggle-label { font-size: 9px; } /* * 단추 여백을 조인다 (2026-08-30). 이름 칸을 5px 좁히는데, 그 5px 을 * 심볼에서 빼면 "MOODENG" 같은 것이 더 잘린다. 단추 좌우 여백에서 * 빼면 **심볼 자리는 그대로**고 눈에도 안 띈다. */ #coin-table .name-cell .sub-line .chart-toggle { padding: 1px 3px; gap: 2px; } /* --- 10. 입출금 막힌 코인 표 (601px → 화면 안으로) ------------------- * 거래소마다 "입금" "출금" 딱지 둘이 나란히 놓여 칸 하나가 104px 이다. * 넷이면 416px, 코인·김프까지 더하면 601px 이 되어 250px 이 잘렸다. * * 폰에서는 딱지를 위아래로 쌓는다. 줄이 13px 쯤 높아지는 대신 표가 * 통째로 들어온다. "업비트는 입금도 출금도 막혔다"를 읽는 데는 * 나란히든 위아래든 차이가 없고, 잘려서 안 보이는 것과는 차이가 크다. */ .wa-table { font-size: 12px; } .wa-table th, .wa-table td { padding: 6px 4px; } .wa-table td .wa-off { display: block; width: fit-content; margin: 1px auto; padding: 1px 5px; font-size: 10.5px; } /* 코인 이름도 긴 것 하나가 칸 전체를 넓힌다 (표 규칙은 김프 표와 같다) */ .wa-table .wa-name .nm { display: inline-block; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .wa-table .wa-name .sym { margin-left: 4px; font-size: 10.5px; } .wa-table .wa-kimp { font-size: 11.5px; } /* --- 11. 비트코인 네트워크 칸 -------------------------------------- * "빠름 2 · 보통 1 · 느림 1 sat/vB" 같은 값이 268px 인데 칸은 174px 이라 * 뒤가 잘렸다. 줄바꿈을 막아 둔 탓이다. 폰에서는 접히게 둔다. */ .idx-cell { flex-wrap: wrap; padding: 7px 8px; gap: 6px; } .idx-cell strong { white-space: normal; text-align: right; } /* * K. 칸 하나가 한 줄에 들어오게 (2026-08-30). * * 폰에서 칸 폭이 167px 인데 "지금보다 낮았던 시간"(110px) + 값이 * 그 안에 안 들어가 두 줄로 접혔다. 접힌 칸만 키가 커서 표가 * 들쭉날쭉했다. * * 이름을 한 단 줄이고, 특히 긴 둘은 짧은 이름으로 바꿔 단다. * `flex-wrap: wrap` 은 그대로 둔다 - 글꼴이 넓은 기기에서 넘칠 때 * 잘리는 대신 접히는 편이 낫다. */ .idx-cell span { font-size: 11px; } .idx-cell strong { font-size: 12px; } /* * R. "지금 김프 +0.73% — 이 기간의 96%가 이보다 낮았습니다." 를 * 한 줄로 (2026-08-30). * * 13.5px 에서는 322px 을 넘겨 두 줄로 접혔다. 이 문장은 아래 표의 * 머리말이라 두 줄이면 표와 붙어 보인다. 한 단 내려 한 줄에 넣는다. */ .hist-now { font-size: 12px; line-height: 1.5; } /* --- 12. 계산 방법의 수식 ------------------------------------------- * 수식은 한 줄로 두고 옆으로 밀게 해 놨다. 폰에서는 밀어야 할 거리가 * 241px 까지 나온다. 수식마다 손가락으로 밀어야 읽히는 셈이다. * 연산자 앞뒤에 띄어쓰기가 있어 접어도 읽는 데 무리가 없다. */ .mth-formula { padding: 11px 12px; } .mth-formula code { white-space: normal; line-height: 1.9; font-size: 13px; } /* --- 13. 뉴스 카드 (439px → 약 300px) ------------------------------- * 폰에서는 사진이 글 위로 올라가 폭을 다 쓴다. 그래서 카드 하나가 * 439px 이 됐다 - 화면(780px)에 한 개 반이다. 목록을 훑는 화면인데 * 한 화면에 두 개가 안 보이면 훑을 수가 없다. * * 사진 168 → 132, 요약 여섯 줄 → 세 줄. 둘로 140px 을 줄인다. * 요약을 자르는 것은 화면만의 이유가 아니다 - 남의 기사 글을 적게 * 보여줄수록 저작권 쪽에서도 안전하다. 본문은 어차피 매체에 있다. */ .news-thumb { height: 132px; } .news-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; font-size: 13px; } .news-head { font-size: 14.5px; } .news-item { padding: 12px; } /* * 바닥 줄(코인 딱지 + 원문 보기)이 두 줄로 접혀 27px 을 더 먹고 있었다. * 딱지 하나가 232px 이고 원문이 68px 이라 합이 딱 넘친다. * 글자와 여백을 한 단 줄이면 한 줄에 들어간다. 기사가 34개니 * 줄 하나가 900px 이다. */ .news-coin { font-size: 11.5px; padding: 4px 7px; } .news-more { font-size: 12px; } .news-foot { gap: 6px 8px; margin-top: 6px; } /* --- 9. 김프map 표를 화면 폭에 맞춘다 -------------------------------- * 나라 이름 아래에 거래소 이름(Coinbase · Kraken · USD)이 붙어 있어서 * 칸 하나가 126px 까지 벌어진다. 여섯 칸이면 628px, 화면의 1.8배다. * 왼쪽 넉 칸만 보이고 나머지는 잘려서 표가 한쪽으로 쏠려 보였다. * * 처음엔 거래소 이름을 아예 감췄다. 그런데 이 화면에서 "미국이 어느 * 거래소인가"를 적어 둔 곳은 여기뿐이다. 표 아래 설명에도 없다. * 감추면 폰에서만 그 사실을 알 수 없게 된다. * * 그래서 떼지 않고 접는다. 줄바꿈을 허용하고 글자를 줄이면 * "Coinbase · Kraken · USD" 가 석 줄로 접히면서 칸이 좁아진다. * 머리가 조금 높아지는 대신 여섯 칸이 다 들어오고 값도 안 잃는다. */ .map-col-note { white-space: normal; font-size: 9px; line-height: 1.25; letter-spacing: -0.3px; } .map-box table { font-size: 11.5px; } .map-box th, .map-box td { padding: 8px 4px; } .map-box { text-align: center; } .map-box table { margin: 0 auto; } } /* * 기준·비교 맞바꾸기 단추 (⇄). * --------------------------------------------------------------------------- * 2026-08-23에 "만들 수 없는 단추"라며 뺐다가 2026-08-25에 되살렸다. * 그때는 두 목록이 서로 다른 집합이라 자리를 바꿀 수 없다고 봤는데, * 이 단추가 하는 일은 목록을 바꿔 끼우는 것이 아니라 재는 방향을 뒤집는 것이다. * 뒤집으면 표에 나오는 종목이 286종에서 671종으로 바뀐다. */ .swap-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--label); font-size: 15px; line-height: 1; cursor: pointer; transition: color .12s, border-color .12s; } .swap-btn:hover { color: var(--accent); border-color: var(--accent); } .swap-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* * 뒤집었을 때 자리 바꾸기. * * 고르개 **둘만** 서로 바꾼다. 처음에는 두 고르개에만 order 를 줬는데, * 그러면 order 를 안 준 것들(이름표·설정·검색)이 0 으로 먼저 서서 줄 전체가 * 오른쪽으로 밀려 났다. 실제로 그렇게 보였다. * 그래서 한 줄에 있는 것 모두에 차례를 매긴다. 자리는 그대로 두고 안에 든 * 거래소만 바뀐다. */ .exchange-bar.reversed > * { order: 9; } .exchange-bar.reversed .exchange-label:first-of-type { order: 1; } .exchange-bar.reversed #quote-pick { order: 2; } .exchange-bar.reversed .swap-btn { order: 3; } .exchange-bar.reversed #base-pick { order: 4; } .exchange-bar.reversed .exchange-label:last-of-type { order: 5; } .exchange-bar.reversed .bar-right { order: 6; } /* 뒤집었다는 것을 색으로도 알린다 */ .exchange-bar.reversed .swap-btn { color: var(--accent); border-color: var(--accent); } /* 국내에 없는 코인. 빈칸으로 두면 "김프 없음 = 좋음"으로 읽힌다 */ .kimp-cell.not-listed .rate { color: var(--muted); font-size: 11.5px; font-weight: 600; } /* 눈에는 안 보이지만 화면 낭독기는 읽는 글 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* * 계산기 ↔ 계산 방법 사이를 오가는 줄. * 2026-08-27에 둘을 갈라 놓으면서 생겼다. 눈에 띄되 단추처럼 보이지는 않게 — * 이 자리는 "더 알고 싶으면" 이지 "눌러야 한다" 가 아니다. */ .calc-method-link { margin: 18px 0 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); font-size: 14px; } .calc-method-link a { color: var(--text-sub); } .calc-method-link a:hover { color: var(--text); } .calc-method-link strong { color: var(--accent); white-space: nowrap; } /* * 계산 방법 문서의 기준일. * "누가 먼저 공개했나"를 따질 때 쓰는 자료라, 눈에 띌 필요는 없지만 * 검색엔진과 웹아카이브가 긁어 갈 수 있게 화면에 진짜로 있어야 한다. */ .mth-stamp { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 0 8px; } .mth-stamp strong { color: var(--text-sub); font-variant-numeric: tabular-nums; } .mth-stamp-sep { opacity: 0.5; } /* * 김프 이력 화면. * --------------------------------------------------------------------------- * 0선 위는 김프(국내가 비쌈), 아래는 역프(국내가 쌈). * 색은 표에서 쓰는 오름/내림 색을 그대로 가져온다 - 같은 뜻에 같은 색을 써야 * 화면을 옮겨 다녀도 눈이 다시 배우지 않는다. */ .hist-fill-up { fill: var(--down); opacity: 0.16; } .hist-fill-down { fill: var(--up); opacity: 0.16; } /* 김프 이력 — 환율 점선. 김프 선(초록/빨강)과 겨루면 안 되므로 옅은 회색 점선으로 둔다. 눈금이 다른 값이라 주인공이 아니라 곁줄이라는 것이 색으로 먼저 읽혀야 한다. */ /* 첫 화면 김프 히스토리 줄의 작은 그래프. 숫자 옆에 붙는 곁그림이라 크게 두지 않는다. 폰에서는 감춘다 — 좁은 폭에서 이것까지 들어가면 숫자가 셋째 줄로 밀린다. */ .hs-spark { display: inline-flex; width: 92px; height: 30px; } .hs-spark .spark { width: 100%; height: 100%; } @media (max-width: 640px) { .hs-spark { display: none; } } /* 공포·탐욕 출처. 데이터 바로 옆에 밝히는 것이 제공처의 이용 조건이다 */ .fng-source { margin-left: auto; color: var(--muted); font-size: 11.5px; white-space: nowrap; } .fng-source:hover { color: var(--accent); text-decoration: underline; } .hist-fx { fill: none; stroke: var(--label); stroke-width: 1; stroke-dasharray: 5 5; opacity: 0.5; vector-effect: non-scaling-stroke; } .fx-key { color: var(--label); border-bottom: 1px dashed var(--label); } .fx-caveat { color: var(--muted); } /* 이력 통계 맨 위 한 줄. 칸들과 달리 문장이라 폭을 다 쓴다 */ .hist-now { grid-column: 1 / -1; margin: 0 0 2px; font-size: 13.5px; color: var(--text-sub); line-height: 1.6; } .hist-now strong { font-weight: 700; } /* * 긴 기간 차트의 두 선. * * 회색 = 비트코인 일별 백필(2017~), 초록 = 우리가 직접 잰 전 종목 평균. * **다른 값이라 색을 다르게 한다.** 같은 색으로 그리면 한 선이 이어진 * 것처럼 보이고, 2026-08-20 에 뜻이 바뀌는 것이 안 보인다. */ .hist-daily { stroke: var(--muted); opacity: 0.75; } .hist-ours { stroke: var(--accent); } /* 뜻이 바뀌는 자리 */ .hist-split { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.5; } .hist-year { fill: var(--muted); font-size: 11px; text-anchor: middle; } /* 바닥글의 색 열쇠 */ .hist-key { display: inline-block; padding: 0 5px; border-radius: 3px; font-weight: 700; font-size: 11px; } .hist-key-daily { background: var(--surface-2); color: var(--muted); } .hist-key-ours { background: var(--accent); color: var(--on-solid); } /* 바닥글을 한 줄에 한 가지씩 끊어 놓는다 */ .hist-legend { display: block; margin-bottom: 3px; } .hist-legend:last-child { margin-bottom: 0; } .hist-zero { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; } .hist-zero-label { fill: var(--label); font-weight: 600; } /* 기간 단추 — 자료가 있는 만큼만 켠다 */ .hist-ranges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .hist-range { padding: 7px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--label); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .hist-range:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); } .hist-range.on { background: var(--accent); border-color: var(--accent); color: var(--on-solid); } .hist-range:disabled { opacity: 0.4; cursor: not-allowed; } .hist-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* * W. 폰에서 기간 단추 여섯을 한 줄에 (2026-08-30). * * "전체" 가 늘어 여섯이 되면서 두 줄로 접혔다. 글자와 여백을 한 단 * 줄이면 한 줄에 들어간다 - 밀지 않고 넣는다. * * **이 규칙은 위 기본 규칙보다 뒤에 있어야 한다.** 처음에 폰 묶음 * (3400줄 근처)에 적었더니 아무 일도 안 했다 - 순위가 같으면 파일에서 * 뒤에 오는 쪽이 이기는데, 기본 `.hist-ranges` 가 5,000줄대에 있어 * 뒤였기 때문이다. */ @media (max-width: 640px) { /* * 여섯을 줄 폭에 고르게 나눈다(`flex: 1 1 0`). 내용대로 두면 "1개월" * 만 넓어 칸이 들쭉날쭉하고 오른쪽이 남는다. 첫 화면 띠에서 쓴 것과 * 같은 방법이다. */ .hist-ranges { flex-wrap: nowrap; gap: 4px; margin-bottom: 8px; } .hist-range { flex: 1 1 0; min-width: 0; padding: 6px 0; font-size: 12px; white-space: nowrap; } } /* * 지난 값을 늘어놓는 화면은 읽는 사람이 저절로 "그러면 다음은"으로 넘어간다. * 우리는 그 다음을 말하지 않는다는 것을 밝히는 문단이라, 흐리게 두되 읽히게 한다. */ .hist-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; line-height: 1.8; } .hist-note strong { color: var(--text-sub); } /* --------------------------------------------------------------------------- 용어·가이드 (/guide) 이 묶음은 이 사이트에서 유일하게 "읽는 화면"이다. 시세 화면은 훑는 것이고 이쪽은 문장을 따라가는 것이라, 줄 길이와 줄 사이를 다르게 준다. 한 줄이 너무 길면 다음 줄 첫 글자를 못 찾는다. --------------------------------------------------------------------------- */ .gd-lede { margin: 0 0 22px; padding: 14px 18px; max-width: var(--prose); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); color: var(--text); font-size: 15.5px; line-height: 1.7; font-weight: 500; } .gd-body { max-width: var(--prose); } .gd-body h2 { margin: 34px 0 12px; font-size: 17px; font-weight: 700; letter-spacing: -0.2px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .gd-body h2:first-child { margin-top: 0; } .gd-body h3 { margin: 24px 0 8px; font-size: 14.5px; font-weight: 700; color: var(--text); } .gd-body p { margin: 0 0 14px; color: var(--text-sub); font-size: 14.5px; line-height: 1.85; } .gd-body strong { color: var(--text); font-weight: 700; } .gd-body ul, .gd-body ol { margin: 0 0 16px; padding-left: 20px; } .gd-body li { margin-bottom: 8px; color: var(--text-sub); font-size: 14.5px; line-height: 1.8; } .gd-body a { color: var(--accent); } .gd-body a:hover { text-decoration: underline; } /* 식(수식)은 글이 아니라 그림에 가깝다. 글줄에서 떼어 놓는다 */ .gd-formula { margin: 0 0 16px; padding: 14px 16px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; line-height: 1.9; color: var(--text); overflow-x: auto; white-space: nowrap; } /* 표. 좁은 화면에서 옆으로 밀 수 있게 감싼다 */ .gd-table-wrap { overflow-x: auto; margin: 0 0 18px; } .gd-table { width: 100%; min-width: 380px; border-collapse: collapse; font-size: 13.5px; } /* * 글 안의 표는 시세표와 성격이 다르다. 시세표는 숫자가 한 줄에 서야 해서 * 위쪽 공통 규칙이 `white-space: nowrap` 을 걸어 두었는데, 그게 여기까지 * 먹어 **문장이 안 접히고 옆으로 밀렸다.** 밀린 글은 잘린 것처럼 보인다. * * 열 이름(첫 칸)만 안 접고, 설명 칸은 접는다. 그리고 시세표의 붙박이 * 머리(sticky)도 여기서는 뜻이 없으므로 푼다. */ .gd-table th, .gd-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; line-height: 1.7; white-space: normal; } .gd-table th { color: var(--label); font-weight: 700; white-space: nowrap; position: static; background: none; font-size: 13.5px; } .gd-table td { color: var(--text-sub); } /* 좁은 화면에서는 열 이름도 접어야 한다 — 안 그러면 첫 칸이 폭을 다 먹는다 */ @media (max-width: 480px) { .gd-table th { white-space: normal; } } /* 짚고 넘어갈 것. 본문 흐름을 끊어 세운다 */ .gd-caution { margin: 0 0 18px; padding: 14px 18px; background: var(--tint-down); border: 1px solid var(--down-line); border-radius: var(--radius); } .gd-caution p { margin: 0; color: var(--text); } .gd-caution p + p { margin-top: 10px; } /* 지금 값 보러 가기. 글에서 실시간 화면으로 잇는 자리 */ .gd-live { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 18px; padding: 9px 14px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); color: var(--accent); font-size: 13.5px; font-weight: 600; } .gd-live:hover { border-color: var(--border-strong); text-decoration: underline; } /* 이 글에 대하여. 구글은 돈·건강 같은 분야에서 "누가 썼고 무엇을 근거로 했고 언제 확인했나"를 본다. 우리는 자격 있는 저자가 아니므로 있는 척하지 않고, 대신 근거와 확인한 날짜를 그대로 드러낸다. */ .gd-about { max-width: var(--prose); margin: 40px 0 24px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .gd-about h2 { margin: 0 0 14px; font-size: 14.5px; font-weight: 700; } .gd-about dl { margin: 0; } .gd-about .gd-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; border-top: 1px solid var(--border); } .gd-about .gd-row:first-of-type { border-top: 0; padding-top: 0; } .gd-about dt { color: var(--label); font-size: 12.5px; font-weight: 700; } .gd-about dd { margin: 0; color: var(--text-sub); font-size: 13px; line-height: 1.75; } .gd-about dd a { color: var(--accent); } .gd-about dd a:hover { text-decoration: underline; } .gd-about ul { margin: 0; padding-left: 16px; } .gd-about li { margin-bottom: 4px; } /* 다음 글 */ .gd-next { max-width: var(--prose); margin: 0 0 28px; } .gd-next h2 { font-size: 14.5px; margin: 0 0 10px; font-weight: 700; } .gd-next-row { display: flex; flex-wrap: wrap; gap: 8px; } .gd-next-row a { padding: 7px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-sub); font-size: 13px; } .gd-next-row a:hover { border-color: var(--accent); color: var(--text); } /* 허브 목록 */ .gd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 28px; } .gd-card { display: block; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .gd-card:hover { border-color: var(--accent); } .gd-card strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 14.5px; font-weight: 700; } .gd-card span { display: block; color: var(--muted); font-size: 13px; line-height: 1.7; } .gd-group-title { margin: 28px 0 12px; font-size: 15px; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .gd-group-title:first-of-type { margin-top: 0; } .gd-group-title span { color: var(--muted); font-size: 12.5px; font-weight: 500; margin-left: 8px; } @media (max-width: 640px) { .gd-lede { padding: 12px 14px; font-size: 14.5px; } .gd-body h2 { margin: 26px 0 10px; font-size: 15.5px; } .gd-body p, .gd-body li { font-size: 14px; } .gd-about { padding: 14px 15px; } .gd-about .gd-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } .gd-cards { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------------------- 선물 시장 (시장온도 화면) --------------------------------------------------------------------------- */ .deriv-panel { margin-bottom: 18px; } .deriv-panel .ns-head { margin-bottom: 12px; } .dv-rows { display: flex; flex-direction: column; } .dv-row { display: grid; grid-template-columns: 88px repeat(3, minmax(0, 1fr)); align-items: center; gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--border); } .dv-row:first-child { border-top: 0; padding-top: 0; } .dv-name { font-weight: 700; font-size: 14px; } .dv-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .dv-cell > span { color: var(--muted); font-size: 11.5px; } .dv-cell strong { font-size: 14.5px; font-variant-numeric: tabular-nums; } /* 롱·숏은 합이 100이라 막대 하나면 된다. 왼쪽이 롱, 나머지가 숏 */ .dv-bar { display: block; height: 6px; width: 100%; background: var(--down); border-radius: var(--radius); overflow: hidden; } .dv-bar-long { display: block; height: 100%; background: var(--up); } .dv-ls { display: flex; gap: 10px; margin-top: 3px; } .dv-ls em { font-style: normal; font-size: 11.5px; font-variant-numeric: tabular-nums; } .dv-with { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-sub); font-size: 13px; } .dv-help { margin-top: 16px; } .dv-help dl { margin: 0 0 12px; } .dv-help-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 16px; padding: 9px 0; border-top: 1px solid var(--border); } .dv-help dt { color: var(--label); font-size: 12.5px; font-weight: 700; } .dv-help dd { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.75; } .dv-help dd strong { color: var(--text-sub); } @media (max-width: 640px) { /* * 종목이 넷이 되면서(리플·솔라나) 줄 수를 조여야 했다. * 한 종목이 이름 한 줄 + 값 한 줄이라 넷이면 여덟 줄이다. * * 이름을 값 줄 **왼쪽 끝**으로 보내 종목당 한 줄로 만든다 * 롱·숏도 위아래로 쌓지 않고 한 줄에 나란히 둔다 */ .dv-rows { gap: 0; } .dv-row { grid-template-columns: 62px repeat(3, minmax(0, 1fr)); align-items: center; gap: 0 8px; padding: 7px 0; } .dv-name { grid-column: auto; font-size: 12px; } .dv-cell { gap: 1px; } .dv-cell > span { font-size: 10px; } .dv-cell strong { font-size: 12px; } .dv-ls { flex-direction: row; gap: 5px; margin-top: 1px; } .dv-ls em { font-size: 10px; } .dv-bar { height: 4px; } .dv-with { margin-top: 8px; font-size: 11.5px; } .dv-help-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } } /* --------------------------------------------------------------------------- 위젯·API 안내 (/api) --------------------------------------------------------------------------- */ /* 실제로 붙여 보이는 자리. 말로 설명하는 것보다 하나 띄워 두는 편이 빠르다 */ .doc-demo { max-width: var(--prose); margin: 0 0 18px; padding: 16px; background: var(--surface-3); border: 1px dashed var(--border-strong); border-radius: var(--radius); } .doc-demo iframe { display: block; width: 100%; max-width: 340px; height: 190px; border: 0; } .doc-code-label { max-width: var(--prose); margin: 0 0 6px; color: var(--label); font-size: 12.5px; font-weight: 700; } .doc-code { max-width: var(--prose); margin: 0 0 18px; padding: 14px 16px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; font-size: 12.5px; line-height: 1.75; } .doc-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-sub); white-space: pre; } /* 본문 안에 섞인 짧은 코드 조각 */ .gd-body code, .gd-table code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; padding: 1px 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); } .doc-code code { padding: 0; background: none; border: 0; } @media (max-width: 640px) { .doc-demo { padding: 12px; } .doc-code { font-size: 11.5px; padding: 12px; } } /* --------------------------------------------------------------------------- 국내 미상장 (/data/unlisted) --------------------------------------------------------------------------- */ .unl-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; } .unl-count { color: var(--label); font-size: 13px; font-weight: 600; } .unl-search { margin-left: auto; } .unl-search input { width: 180px; padding: 7px 11px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px; } .unl-search input:focus { outline: none; border-color: var(--accent); } /* 종목 이름 칸만 왼쪽 맞춤. 나머지 숫자는 공통 규칙(가운데)을 그대로 쓴다 */ .unl-table .unl-name { text-align: left; } .unl-table .unl-name strong { font-weight: 700; } .unl-table .unl-ko { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 1px; } .unl-table .unl-krw { color: var(--text-sub); } @media (max-width: 640px) { .unl-search { margin-left: 0; width: 100%; } .unl-search input { width: 100%; } /* 좁은 화면에서는 달러 시세를 감춘다 - 원화 환산이 있으면 크기는 가늠된다 */ .unl-table th:nth-child(2), .unl-table td:nth-child(2) { display: none; } /* * L. 네 칸을 한 화면에 (2026-08-30). * * 달러 시세를 감춘 뒤에도 표가 406px 이라 334px 상자에서 72px 을 * 밀어야 끝이 나왔다. 밀리는 표는 오른쪽이 있는 줄도 모르고 지나친다. * * 칸을 더 뺄 것은 없다 - 종목·원화·전일대비·거래액 넷 다 이 화면의 * 본론이다. 그래서 **글자와 여백**에서 줄인다. 여백이 칸마다 좌우 * 9px 이라 넷이면 72px 인데, 그게 딱 밀리던 거리였다. */ .unl-table { font-size: 12px; } .unl-table th, .unl-table td { padding: 7px 4px; } .unl-table .unl-ko { font-size: 10.5px; } .unl-table .unl-name { gap: 5px; } .unl-table .unl-name .coin-icon { width: 18px; height: 18px; flex: 0 0 18px; } } /* 국내 미상장 — 종목 칸의 코인 그림 */ .unl-table .unl-name { display: flex; align-items: center; gap: 9px; } .unl-table .unl-name .coin-icon { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; } /* 번호가 없어 그림을 못 받는 종목. 자리는 그대로 두어 글자가 안 밀리게 한다 */ .unl-table .unl-name .coin-icon.no-icon { background: var(--surface-2); border: 1px solid var(--border); } .unl-table .unl-label { min-width: 0; } /* 폰에서만 쓰는 한 줄 경고. PC 는 위의 긴 글이 그 자리에 있다 */ .unl-warn { display: none; } /* 국내 상장 목록이 달라진 것 */ .lst-panel { margin-bottom: 18px; } .lst-panel .ns-head { margin-bottom: 10px; } .lst-rows { display: flex; flex-direction: column; } .lst-row { display: grid; grid-template-columns: 92px 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); } .lst-row:first-child { border-top: 0; padding-top: 0; } .lst-when { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .lst-ex { color: var(--label); font-size: 12.5px; } .lst-sym { font-size: 14px; font-weight: 700; } .lst-kind { font-size: 12.5px; font-weight: 600; white-space: nowrap; } @media (max-width: 640px) { .lst-row { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 6px 8px; } .lst-ex { grid-row: 2; grid-column: 1; } .lst-when { font-size: 11.5px; } } /* 출처 표기 복사 칸 (/api) */ .doc-snip { max-width: var(--prose); margin: 0 0 14px; } .doc-snip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .doc-snip-head span { color: var(--label); font-size: 12.5px; font-weight: 700; } .doc-snip .doc-code { margin-bottom: 0; } .doc-copy { margin-left: auto; padding: 4px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-sub); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } .doc-copy:hover { border-color: var(--accent); color: var(--text); } .doc-copy.done { border-color: var(--accent); color: var(--accent); } /* 코인 그림과 별을 세로로 쌓는다 (그림 아래가 별 자리다) */ .icon-stack { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: none; } .icon-stack .fav-btn { line-height: 1; } /* --------------------------------------------------------------------------- 그때 샀다면 (/calc/if) --------------------------------------------------------------------------- */ /* * 맨 위 한 줄. 이 화면에서 가장 중요한 문장이라 표보다 먼저, 눈에 걸리게 둔다. * 겁을 주는 색(빨강)은 안 쓴다 - 경고가 아니라 **이 도구가 무엇인지**를 * 밝히는 말이다. */ .if-lede { margin: 0 0 12px; padding: 10px 12px; background: var(--surface); border-left: 3px solid var(--accent); border-radius: var(--radius); color: var(--text-sub); font-size: 13.5px; line-height: 1.6; } .if-lede strong { color: var(--text); } /* * 입력칸 폭. 넓은 화면에서 끝까지 늘어나면 라벨과 값이 멀어져 읽기 나쁘다. * 폰(375px)은 이 값보다 좁아 아무 영향이 없다. */ /* * 두 칸씩 한 줄로 묶는다. * * 나란히 선 칸은 **높이를 못박아** 맞춘다. 고르개·글자칸·날짜칸은 브라우저마다 * 기본 높이가 조금씩 달라, 여백만 같이 줘도 1~2px 어긋난다. 그 어긋남이 * 한 줄인지 두 줄인지를 흐린다. */ .if-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; } /* * 위 줄은 종목 쪽이 더 넓어야 한다. 그림(18px) + 이름 + 심볼 + 화살표가 * 다 들어가야 하는데, 가장 긴 것이 "이더리움클래식 (ETC)" 로 118px 이다. */ .if-pair-top { grid-template-columns: 1.45fr 1fr; } .if-form { display: grid; gap: 8px; margin-bottom: 12px; max-width: 560px; } .if-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .if-label { flex: 0 0 68px; color: var(--label); font-size: 12.5px; font-weight: 600; } /* * 종목 고르개 — 직접 그린다. * * 네이티브 고르개는 펼쳤을 때 **로고가 안 보인다.**