/* 새 PC 프론트 디자인 (Pixso: GVC-PC 시안) — skin/home_view2_pc CSS 위에 얹어서 새 클래스(gvc-*)로만
   스타일링. 기존 skin CSS/클래스는 건드리지 않으므로 이 파일이 없는 다른 PC 페이지는 기존 디자인
   그대로 동작한다. 색상 변수는 public/css/gvc_mobile.css 의 팔레트와 동일(같은 브랜드 컬러라
   Pixso 실측 rgba 값이 1:1로 일치한다) — 두 파일을 독립적으로 유지하기 위해 그대로 복제해 둔다. */

:root {
    --gvc-navy-deep: #232e4c;
    --gvc-navy: #2b3a8e;
    --gvc-navy-splash: #2f3a58;
    --gvc-blue-pale: #cce2f9;
    --gvc-blue-soft: #90abf8;
    --gvc-blue-mist: #93bce7;
    --gvc-blue-bright: #1772f8;
    --gvc-blue-btn: #215ca6;
    --gvc-text: #191919;
    --gvc-text-muted: #767676;
    --gvc-text-faint: #6e7589;
    --gvc-border: #e4e4e4;
    --gvc-bg-light: #f2f2f2;
}

/* ================= 온보딩 인트로 (Pixso GVC-PC – 1/2/3, 실측치: 1920px 캔버스 기준) =================
   모바일 인트로(home_intro_mobile.html/.gvc-intro-*)와 같은 구조·같은 클래스명을 쓰지만 완전히 별도의
   템플릿·CSS 파일이라 충돌하지 않는다. 실측 시 로고/물결/문구가 전부 "가운데 정렬된 1200px 폭
   컨텐츠 무대" 기준으로 배치돼 있었다(캔버스 좌우 여백이 정확히 (1920-1200)/2=360px로 떨어짐) —
   그래서 물결처럼 절대배치되는 장식 요소도 뷰포트 전체가 아니라 이 1200px 무대를 기준으로 잡는다. */
html.gvc-intro-html { scroll-snap-type: y mandatory; }
html.gvc-intro-html, body.gvc-intro-body { margin: 0; height: 100%; background: var(--gvc-navy-splash); }
.gvc-intro-slide { position: relative; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 74px 20px 60px; text-align: center; scroll-snap-align: start; scroll-snap-stop: always; }
.gvc-intro-header { position: fixed; top: 0; left: 0; right: 0; height: 74px; background: rgba(35,46,76,.6); z-index: 10; }
.gvc-intro-header-inner { max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; }
.gvc-intro-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.gvc-intro-brand-icon { width: 40px; height: auto; flex: none; }
.gvc-intro-brand span { font-size: 11px; font-weight: 900; line-height: 1.25; color: var(--gvc-blue-pale); text-align: left; }
.gvc-intro-shortcuts { display: flex; align-items: center; gap: 16px; }
.gvc-intro-icon-btn img { width: 24px; height: 24px; display: block; }

/* 물결 장식: 1200px 무대의 좌/우 끝에 붙는다(뷰포트 전체 폭 기준 아님). wave-1(큰 쪽)은
   무대 우측·화면 하단에 딱 붙고, wave-2(작은 쪽)는 무대 좌측에 붙되 하단에서 살짝 떠 있다
   — 모바일에서 겪었던 것과 같은 이유로 순서를 반대로 두면 X자로 겹쳐 보인다. */
.gvc-intro-pc-stage { position: relative; width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gvc-intro-wave { position: absolute; pointer-events: none; z-index: 0; }
.gvc-intro-wave-1 { right: 0; bottom: 0; width: 57.7%; }
.gvc-intro-wave-2 { left: 0; bottom: 19.6%; width: 42.1%; }

.gvc-intro-logo-big { position: relative; width: 127px; height: 127px; border-radius: 32px; overflow: hidden; z-index: 1; }
.gvc-intro-logo-big img { width: 100%; height: 100%; display: block; }
.gvc-intro-title { position: relative; z-index: 1; margin: 18px 0 0; font-size: 31px; font-weight: 900; color: #fff; line-height: 1.2; }
.gvc-intro-headline { position: relative; z-index: 1; margin: 0; font-size: 38px; font-weight: 900; color: #fff; line-height: 1.3; }
.gvc-intro-sub { position: relative; z-index: 1; margin: 16px 0 0; font-size: 20px; color: var(--gvc-blue-soft); line-height: 1.5; }
.gvc-intro-slide-3 .gvc-intro-sub { color: #fff; }
.gvc-intro-mascot { position: relative; z-index: 1; width: 249px; height: auto; margin-top: 28px; }
.gvc-intro-network { position: relative; z-index: 1; width: 438px; height: auto; margin-top: 24px; }
.gvc-intro-badge { display: inline-block; margin-bottom: 12px; padding: 8px 22px; background: var(--gvc-blue-btn); border-radius: 18px; font-size: 15px; font-weight: 700; color: #fff; }
.gvc-intro-start { position: relative; z-index: 1; display: inline-block; margin-top: 28px; padding: 13px 48px; background: var(--gvc-blue-btn); color: #fff; border-radius: 22px; font-size: 18px; font-weight: 500; text-decoration: none; }
.gvc-intro-chevron { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); width: 68px; height: auto; z-index: 2; animation: gvcIntroBounce 1.4s ease-in-out infinite; }
@keyframes gvcIntroBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } }
.gvc-intro-slide-1 { background: var(--gvc-navy-splash); }
.gvc-intro-slide-2 { background: var(--gvc-navy); }
.gvc-intro-slide-3 { background: var(--gvc-blue-mist); }

/* ================= 거래소 홈 헤더/배너/시세 (Pixso GVC-PC – 4) =================
   기존 base_pc.html/home_index_pc.html 마크업(레거시 .head_top/header/nav/.banner/.fp_box_1)은
   그대로 두고 새 클래스만 덧붙여 새 디자인을 얹는다. images.* 값(운영자가 imgmgr에서 바꾸는
   문구/경로)과 href/nav 라벨은 그대로 유지 — 시각 스타일만 교체한다. */
.gvc-pc-topribbon.head_top { height: 54px; line-height: 54px; background: var(--gvc-navy-deep); opacity: .94; position: relative; }
.gvc-pc-topribbon.head_top .main { text-align: center; font-size: 14px; color: #fff; position: relative; }
/* Pixso 실측 상단 띠배너는 문구+닫기 버튼만 있는 텍스트 바라, 레거시 head_top_image
   슬롯(예전 프로모션 사진)을 넣을 자리가 없다 — 값 자체는 그대로 두되(운영자가
   imgmgr에서 계속 관리할 수 있게) 이 새 디자인에서만 숨긴다. */
.gvc-pc-topribbon.head_top .main img.gvc-pc-ribbon-img { display: none; }
.gvc-pc-ribbon-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 8px; cursor: pointer; line-height: 0; }
.gvc-pc-ribbon-close img { width: 14px; height: 14px; }

header.gvc-pc-header { height: 54px; background: #fff; border-bottom: 1px solid var(--gvc-border); }
header.gvc-pc-header .main { height: 54px; }
header.gvc-pc-header .logo { display: flex; align-items: center; margin-top: 0; height: 54px; }
/* .logo a 자체를 flex로 잡아야 한다 — img가 display:block이면 인라인 <a> 안에서
   줄바꿈을 일으켜 아이콘 아래로 텍스트가 떨어진다(세로 쌓임 버그). */
header.gvc-pc-header .logo a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
header.gvc-pc-header .logo img { width: 40px; height: 40px; display: block; flex: none; }
header.gvc-pc-header .logo span { font-size: 11px; font-weight: 900; line-height: 1.25; color: var(--gvc-navy); text-align: left; }
nav.gvc-pc-nav { float: right; height: 54px; }
nav.gvc-pc-nav ul li { line-height: 54px; margin-right: 36px; }
nav.gvc-pc-nav ul li:last-child { margin-right: 0; }
nav.gvc-pc-nav ul li a { padding-left: 30px; color: var(--gvc-text); font-size: 15px; font-weight: 500; }
nav.gvc-pc-nav ul li a img { top: 50%; transform: translateY(-50%); width: 22px; height: 22px; }
nav.gvc-pc-nav ul li a .gvc-pc-hot { position: absolute; top: 2px; left: 12px; background: #e0463c; color: #fff; font-size: 8px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 6px; }

/* Pixso 실측(0:1113, 1920 캔버스): 배너는 다른 PC 페이지 섹션들과 같은 1200px 폭
   박스형이다(화면 전체로 퍼지는 풀블리드가 아님) — 남색 배경 자체를 1200px로
   좁히고 가운데 정렬한다. 레거시 `.banner{width:100%;min-width:1400px}`를 명시적으로
   덮어써야 하고, .banner_text/.main은 이 1200px 박스 기준 100% 폭이라 h3(left:80px)
   /장식(left:600px)/코인(left:900px) 절대좌표는 그대로 유지된다. 버튼(가입하기/
   로그인하기)은 원본 배너 디자인에 없어 뺐다 — 로그인/회원가입 도선은 nav와 다른
   화면에 이미 있다. */
.gvc-pc-banner.banner { position: relative; height: 240px; width: 1200px; min-width: 0; margin: 0 auto; background: var(--gvc-navy); overflow: hidden; }
.gvc-pc-banner .swiper-container, .gvc-pc-banner .swiper-slide img { display: none; }
/* 레거시 css.css 의 `.banner .banner_text`(top:50%/left:50%/transform:translate(-50%,-50%))
   와 `.banner .banner_text h3`(margin-top:110px) 는 이 배너 클래스와 같은 두 클래스 조합
   specificity라 순서만으로는 안 이긴다 — 세 클래스 조합으로 명시적으로 이겨야 하고,
   레거시가 건드리는 속성(top/left/transform/z-index/margin)을 전부 리셋해야 한다. */
.gvc-pc-banner.banner .banner_text { position: static; width: 100%; height: 100%; top: auto; left: auto; transform: none; z-index: auto; }
.gvc-pc-banner.banner .banner_text .main { position: relative; height: 100%; }
.gvc-pc-banner.banner .banner_text h3 { position: absolute; left: 80px; top: 45px; margin: 0; font-size: 24px; font-weight: 900; color: #fff; line-height: 1.4; white-space: nowrap; }
.gvc-pc-banner .gvc-pc-hero-diagonal { position: absolute; left: 600px; top: 113.57px; width: 600px; height: auto; }
.gvc-pc-banner .gvc-pc-hero-coin { position: absolute; left: 900px; top: 8px; width: 170px; height: auto; }
.gvc-pc-banner .gvc-pc-hero-sub { position: absolute; left: 80px; top: 125.5px; margin: 0; font-size: 13px; color: var(--gvc-blue-soft); }

/* 로그인/회원가입류 서브페이지의 단순 배너(예전 스톡 사진) — 제목/버튼 없이 브랜드
   비주얼(대각선 장식 + 회전 코인)만 재사용한 축약판. */
/* 어떤 배너 컨테이너에 들어있든 예전 스톡 사진(images.login_banner/head_top_image)은
   숨긴다 — imgmgr 오버라이드 값 자체는 그대로 두고 시각적으로만 뺀다. 레거시
   `.banner img`(클래스 1개+엘리먼트) 보다 확실히 이기도록 클래스 2개로 잡는다. */
.gvc-pc-banner .gvc-pc-legacy-banner-img { display: none; }

/* 레거시 `.fp_box_1 .left .title`(클래스 3개, color:#181818)이 클래스 1개짜리보다
   specificity가 높아 흰색이 안 먹었다 — .left 를 포함해 3개로 맞춰 이긴다. */
.fp_box_1 .left .gvc-pc-ticker-title { background: var(--gvc-navy-deep); color: #fff; font-size: 16px; font-weight: 700; padding: 0 20px; height: 54px; line-height: 54px; margin-bottom: 20px; }

/* 홈 화면(home_index_pc.html)에서 디자인에 없던 우측 프로모션 사이드바(.rii)를
   들어냈다 — 레거시 skin CSS는 .left/.rii를 나란히 뜨우는(float) 2단 폭으로
   가정하고 있어, .rii가 없으면 .left 혼자 남아 우측이 빈 채로 좁게 뜬다.
   .rii가 있는 다른 페이지(마이페이지/거래내역 등)는 그대로 두고, .left가
   .main.clearfix의 유일한 자식일 때만 전체 폭을 채우도록 이 페이지 한정으로 보정. */
.fp_box_1 .main.clearfix > .left:only-child { float: none; width: 100%; }
/* Pixso 실측(0:1113 .组391): 두 칼럼이 CSS column-count 식(왼쪽 다 채우고 오른쪽)이
   아니라, 1번째 코인이 좌측/2번째가 우측/3번째가 다시 좌측 다음 줄... 식으로 같은
   줄에 나란히 배치되는 진짜 2열 그리드다 — grid-auto-flow 기본값(row)이 정확히
   이 순서를 만들어 준다. 칼럼 헤더(자산명/현재가/전일대비)도 칼럼마다 하나씩 있다. */
.gvc-pc-ticker-head { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; padding: 12px 20px 0; font-size: 13px; color: var(--gvc-text-muted); }
.gvc-pc-ticker-col-head { display: flex; }
.gvc-pc-ticker-col-head span:first-child { flex: 1; text-align: left; }
.gvc-pc-ticker-col-head span:not(:first-child) { width: 90px; text-align: right; }
.gvc-pc-ticker-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; padding: 4px 20px 10px; }
.gvc-pc-ticker-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gvc-border); cursor: pointer; }
.gvc-pc-ticker-row img { width: 34px; height: 34px; margin-right: 20px; flex: none; }
.gvc-pc-ticker-row .gvc-pc-ticker-name { flex: 1; text-align: left; }
.gvc-pc-ticker-row .gvc-pc-ticker-name h5 { margin: 0; font-size: 14px; font-weight: 600; color: var(--gvc-text); }
.gvc-pc-ticker-row .gvc-pc-ticker-name span { display: block; font-size: 12px; color: var(--gvc-text-muted); }
/* 기본 글자색은 실측 파란색(#2864D2) — 상승(bfb>=0)이면 인라인 스타일이 빨간색으로
   덮어쓴다(사이트 전역에서 쓰는 상승=빨강 표기, 목업의 정적 색과는 별개로 유지). */
.gvc-pc-ticker-row .gvc-pc-ticker-price, .gvc-pc-ticker-row .gvc-pc-ticker-change { width: 90px; text-align: right; font-size: 14px; color: #2864d2; }

/* 시세표 아래 프로모션 밴드 3종 — 모바일(.gvc-feature-band/.gvc-brand-card/.gvc-option-banner,
   home_index_mobile.html)에 이미 있던 문구·이미지를 PC 폭(1200px, .left:only-child 라
   전체 폭)에 맞춰 새 클래스로 이식. 문구/이미지 경로는 모바일과 동일 자산을 공유한다. */
.gvc-pc-feature-band { margin: 40px 0; padding: 40px 0 32px; background: var(--gvc-navy); border-radius: 8px; }
.gvc-pc-feature-band-head { text-align: center; margin-bottom: 28px; }
.gvc-pc-feature-band-head strong { display: block; color: #fff; font-size: 24px; font-weight: 700; }
.gvc-pc-feature-band-head span { display: block; color: var(--gvc-blue-mist); font-size: 14px; margin-top: 8px; }
.gvc-pc-feature-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0 40px; }
.gvc-pc-feature-card { background: #fff; border-radius: 8px; padding: 20px; text-align: center; }
.gvc-pc-feature-icon { width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; margin-bottom: 16px; }
.gvc-pc-feature-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gvc-pc-feature-card h4 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--gvc-text); }
.gvc-pc-feature-card p { margin: 0; font-size: 13px; color: var(--gvc-text-muted); line-height: 1.6; }

.gvc-pc-brand-card { display: flex; align-items: center; justify-content: center; gap: 16px; background: var(--gvc-navy-deep); border-radius: 8px; padding: 24px; margin-bottom: 20px; }
.gvc-pc-brand-card img { width: 52px; height: 52px; flex: none; }
.gvc-pc-brand-card strong { display: block; color: var(--gvc-blue-pale); font-size: 20px; }
.gvc-pc-brand-card span { display: block; color: var(--gvc-blue-mist); font-size: 13px; margin-top: 4px; }

.gvc-pc-option-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--gvc-blue-mist); border-radius: 8px; padding: 32px 48px; text-decoration: none; margin-bottom: 20px; }
.gvc-pc-option-banner-copy h4 { margin: 0 0 14px; font-size: 26px; color: #fff; }
.gvc-pc-option-banner-badge { display: block; margin: 0 0 10px; }
.gvc-pc-option-banner-badge span { display: inline-block; padding: 8px 20px; background: var(--gvc-blue-btn); border-radius: 18px; font-size: 14px; font-weight: 700; color: #fff; }
.gvc-pc-option-banner-copy p { margin: 4px 0; font-size: 14px; color: #fff; line-height: 1.6; }
.gvc-pc-option-banner-art { width: 280px; height: auto; flex: none; }

/* 풋터 — 레거시는 짙은 남색(#14161d) 배경이었는데, 새 GVC 테마(밝은 배경 + 남색
   포인트)에 맞춰 밝은 배경으로 바꾼다. `footer` 엘리먼트 선택자보다 클래스가
   specificity 가 높아 그냥 덮어써도 이긴다. */
/* 모바일 하단 탭바(#gvcBottomNav)와 같은 연한 파란 띠 — 같은 그라디언트 레이어
   기법(4px 띠 + 흰 배경)을 그대로 재사용. */
footer.gvc-pc-footer { background: linear-gradient(var(--gvc-blue-mist), var(--gvc-blue-mist)) top / 100% 4px no-repeat, #fff; border-top: none; color: var(--gvc-text-muted); }
footer.gvc-pc-footer span:not(:last-of-type)::after { color: var(--gvc-border); }
footer.gvc-pc-footer p { border-top: 1px solid var(--gvc-border); color: var(--gvc-text-faint); }

/* PC 버튼 색상 전수 교체 — 레거시는 페이지마다 금색(#AA8940/#B0882F), 청록
   (#00C896), 구글블루(#4285f4/#4E8DFF) 등이 제각각 섞여 있었다. 전부 GVC 테마
   블루(--gvc-blue-btn/--gvc-blue-bright)로 통일한다. 셀렉터는 레거시와 같은
   specificity(클래스 1개)라 나중에 로드되는 이 파일이 순서상 이긴다. 취소 버튼
   같은 중립 회색(#C0C0C0)이나 입금/출금·성공/실패 같은 의미색(빨강/초록)은
   브랜드 색과 무관해 그대로 둔다. */
.register-btn, .login-btn, .regist-btn { background: var(--gvc-blue-btn); }
.login-options a:hover { color: var(--gvc-blue-bright); }
.submit_button, .submit_btn { background: var(--gvc-blue-btn); }
.submit_button:hover, .submit_btn:hover { background: var(--gvc-navy); box-shadow: none; }
.btn_primary { background: var(--gvc-blue-btn); }
.btn_primary:hover { background: var(--gvc-navy); }
.btn_secondary { background: var(--gvc-blue-pale); color: var(--gvc-blue-bright); }
.close_btn { color: var(--gvc-blue-bright); }
.upload_btn:hover, .option_item:hover { border-color: var(--gvc-blue-bright); }
.form_input:focus, .phone_input:focus { border-color: var(--gvc-blue-bright); box-shadow: 0 0 0 2px rgba(23, 114, 248, 0.1); }
.input_wrapper input:focus { border-color: var(--gvc-blue-bright); }
.verify-code-btn, .tam_button { background-color: var(--gvc-blue-bright); }

/* 회원가입 약관의 "플러스 이용약관" 안내 툴팁 — 레거시 클래스 이름(.tooltip-fixed)
   그대로 "항상 고정 표시"였다(모바일 .gvc-terms-tip 에서 겪은 것과 같은 문제).
   기본은 숨기고, 바로 앞 항목(terms5, 플러스 이용약관)에 마우스를 올렸을 때만
   보이도록 인접 형제 선택자(+)로 연결한다 — 마크업 순서상 .tooltip-fixed 는 그
   항목의 .agreement-item 바로 다음 형제다. */
.tooltip-fixed { display: none; }
.agreement-item:hover + .tooltip-fixed { display: flex; }

/* 거래내역(/balance/history, member_usd_log_view.html) — 죽은 skin/shop 참조를 걷어내고
   base_pc.html 을 확장하도록 고치면서 새로 필요해진 목록 스타일. 모바일 버전
   (#history, ul li.minus, .article_more2 in skin/home_view2/css/default.css·sun.css)과
   같은 구조(설명+날짜 좌측, 금액 우측 절대배치)를 유지하되 PC 라이트 테마에 맞춘다. */
.gvc-pc-history-title { background: var(--gvc-navy-deep); color: #fff; font-size: 16px; font-weight: 700; padding: 0 20px; height: 54px; line-height: 54px; margin-bottom: 20px; }
.gvc-pc-history ul { margin: 0; padding: 0; list-style: none; }
.gvc-pc-history ul li { padding: 14px 20px; border-bottom: 1px solid var(--gvc-border); }
.gvc-pc-history ul li a { position: relative; display: block; color: var(--gvc-text); text-decoration: none; padding-right: 100px; }
.gvc-pc-history ul li a p { margin: 0; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gvc-pc-history ul li a span { display: block; margin-top: 4px; font-size: 12px; color: var(--gvc-text-muted); }
.gvc-pc-history ul li a em { position: absolute; top: 0; right: 0; font-style: normal; font-weight: 600; }
.gvc-pc-history ul li.plus a em { color: #11bc7d; }
.gvc-pc-history ul li.minus a em { color: #f65253; }
.gvc-pc-history-more { padding: 16px; text-align: center; font-size: 13px; color: var(--gvc-text-muted); cursor: pointer; border-top: 1px solid var(--gvc-border); }