body {
    overflow: visible;
}

.navbar {
    z-index: 1000;
    position: sticky;
    top: 0;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    background-color: color-mix(in oklab,var(--color-background)50%,transparent) !important;
}
.container-fluid {
    padding: 17px;
}

.navbar-brand {
    padding-top: 0px !important;
}

.dropdown-menu {
    position: absolute !important;
}

@media (min-width: 765px) {
    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
}
@media (min-width: 765px) {
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
}
@media (min-width: 765px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
}
@media (min-width: 765px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
    }
}
@media (min-width: 765px) {
    .mb-lg-0 {
        margin-bottom: 0 !important;
    }
}
@media (min-width: 765px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x);
    }
}
/* modify navbar */
.nav-link{display: ruby-text !important;padding-right: 0.5rem;padding-left: 0.5rem;}
.dropdown-toggle::after{vertical-align: 0em !important;}
.d-flex{display: block !important;}
.navbar-nav{flex-direction: row;}
.navbar-collapse{display: flex !important;}
.nav-menu{display: none;}
@media (min-width: 765px) {
    .nav-menu {
        display: block;
    }
}

/* header style */
    @layer theme {
    :root,:host {
        --font-sans: "Outfit Variable",sans-serif;
        --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
        --color-gray-100: oklch(.967 .003 264.542);
        --color-gray-200: oklch(.928 .006 264.531);
        --color-gray-300: oklch(.872 .01 258.338);
        --color-white: #fff;
        --spacing: .25rem;
        --breakpoint-lg: 64rem;
        --breakpoint-xl: 80rem;
        --container-md: 28rem;
        --container-3xl: 48rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1/.75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25/.875);
        --text-base: 1rem;
        --text-base--line-height: 1.5 ;
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75/1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75/1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2/1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: 1.2 ;
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5/2.25);
        --text-5xl: 3rem;
        --text-5xl--line-height: 1;
        --font-weight-extralight: 200;
        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --tracking-wide: .025em;
        --tracking-wider: .05em;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --radius-xl: .75rem;
        --radius-2xl: 1rem;
        --radius-4xl: 2rem;
        --ease-in-out: cubic-bezier(.4,0,.2,1);
        --blur-md: 12px;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
        --default-font-family: var(--font-sans);
        --default-font-feature-settings: var(--font-sans--font-feature-settings);
        --default-font-variation-settings: var(--font-sans--font-variation-settings);
        --default-mono-font-family: var(--font-mono);
        --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
        --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
        --color-primary: #493fee;
        --color-secondary: #a5a0f6;
        --color-heading: #131313;
        --color-subtext: #444;
        --color-backers: #f5f5f5;
        --color-background: #fff;
        --shadow-primary-hover: 0 0 20px #493fee1a
    }
    .backdrop-blur-md {
        --tw-backdrop-blur: blur(var(--blur-md));
        -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
        backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    }
    .bg-background {
    }
}

.first_section {
    padding: 48px 30px 0 30px;
}
/* Login btn */
.d-flex button {
    border: 1px solid #2932e1;
    color: #2932e1;
}
.btn:hover {
    background-color: #2932e1;
    border-color: #2932e1;
}
.btn:first-child:active {
    background-color: #2932e1;
    border-color: #2932e1;
}
.address-label {
    padding: 0.5rem 0.5rem 0.5rem 0;
    font-weight: 600;
}


/* main title */
.main_title {
    text-align: center;
}
.main_title h1{
    font-size: 44px;
    font-weight: 485px;
}

/* MAIN Swap */
.swap-container {
  max-width: 480px;
  margin: 32px auto;
  padding: 10px 10px 10px 10px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(24,39,75,0.10), 0 1.5px 6px rgba(24,39,75,0.04);
  position: relative;
  font-family: 'Inter', Arial, sans-serif;
}

.swap-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.swap-action-btn {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: 12px;
  background: #f3f3f6;
  color: #535c6a;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.swap-action-btn.active,
.swap-action-btn:hover {
  background: #2932e1;
  color: #fff;
}

.swap-card {
  background: #f8fafd;
  border-radius: 18px;
  padding: 20px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.swap-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}

.swap-label {
  font-size: 15px;
  color: #697386;
  margin-bottom: 2px;
  font-weight: 500;
}

.swap-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.swap-input {
  flex: 1;
  padding: 14px 0;
  font-size: 30px;
  border: 1px solid #e4e9f2;
  border-radius: 12px;
  background: #fff;
  color: #232946;
  outline: none;
  transition: border 0.2s;
  font-family: inherit;
}

.swap-input:focus {
  border: 1.5px solid #2932e1;
}

.swap-input[readonly] {
  background: #f2f3f7;
  color: #adb5bd;
}

.swap-currency {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  background: #f4f4fa;
  border-radius: 8px;
  cursor: pointer;
}

.swap-currency-label {
  font-size: 16px;
  color: #232946;
  font-weight: 600;
}

.swap-currency-arrow {
  margin-left: 4px;
  color: #6d7688;
}

.swap-token-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 5px;
  background: #fff;
  border: 1px solid #e4e9f2;
}

.swap-payment-logo {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2932e1;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  margin-right: 4px;
}

.swap-custom-recipient {
  margin: 14px 0 2px 0;
  display: none;
  justify-content: flex-start;
}

.swap-custom-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #f3f3f6;
  border: none;
  border-radius: 10px;
  color: #2932e1;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.14s;
}

.swap-custom-btn:hover {
  background: #e3e8ff;
}

.swap-login-wrap {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.swap-login-btn {
  width: 100%;
  height: 48px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: #2932e1;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(41,50,225,0.07);
  transition: background 0.14s;
}

.swap-login-btn:hover {
  background: #1f2578;
}

.swap-help-btn {
  position: absolute;
  right: 22px;
  bottom: 18px;
  background: #f3f3f6;
  border: none;
  border-radius: 14px;
  padding: 9px 18px;
  font-size: 15px;
  color: #2932e1;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(41,50,225,0.09);
  transition: background 0.14s;
}

.swap-help-btn:hover {
  background: #e3e8ff;
}

/* Optional: Flag icon example for .fi-us */
.fi.fi-us {
  display: inline-block;
  width: 20px;
  height: 14px;
  background: url('https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/kr.svg') no-repeat center/cover;
  border-radius: 3px;
}

.swap-payment-logo .toss-icon {
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 50%;
  background: #fff;
}

/* ===== Uniswap-like surface & center switch ===== */
.swap-actions { display: none !important; }     /* 상단 Buy/Sell 탭 숨김 */
.swap-card   { position: relative; background:#f7f8fa !important; }
.swap-input  { width:100%;background:#f7f8fa !important; border:0 !important; box-shadow:none !important; }
.swap-input:focus { border:0 !important; box-shadow:0 0 0 3px rgba(41,50,225,.12); }

/* 중앙 화살표 버튼 */
#swap-switch{
  position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:16px; background:#f7f8fa;
  border:4px solid #ffffff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:3;
  transition:transform .15s ease, box-shadow .15s ease;
}
#swap-switch:hover{ transform:translate(-50%,-50%) scale(1.04); }
#swap-switch:active{ transform:translate(-50%,-50%) scale(.97); }
#swap-switch:focus-visible{ outline:3px solid rgba(41,50,225,.35); outline-offset:2px; }
#swap-switch svg{ transition:transform .25s ease; }
#swap-switch.rot svg{ transform:rotate(180deg); }

/* KRW 칩(표시용) */
.token-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; background:#fff;
  border:1px solid #e5e7ef; font-weight:700; line-height:1; user-select:none;
}
.token-chip .token-ic{
  width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; color:#fff; background:#000000;
}
.token-chip.krw .token-ic::after{ content:"₩"; }
.token-chip .token-label{ color:#111; }

/* 토큰 선택 Pill(버튼처럼 보이는 <select>) */
.select-pill{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:#fff; color:#000; border-radius:999px; border: 1px solid #e5e7ef;
  padding:10px 14px; font-weight:700; cursor:pointer; min-width:80px; text-align:center;
}
.select-pill:focus{ outline:0; box-shadow:0 0 0 3px rgba(255,51,168,.2); }
.select-pill option{ color:#000;background: #fff; } /* 드롭다운 내부 텍스트 가독성 */
.swap-part{position: absolute;top: 45%;background: #fff;width: 100%;height: 4px;margin-left: -16px;}
.swap-bottom{margin-top: 50px;}
#buy-success-box{position: fixed;right: 0;bottom: 0;z-index: 1000;}
#sell-success-box{position: fixed;right: 0;bottom: 0;z-index: 1000;}
.tokenBalanceDisplay{text-align: right;font-size: 0.95em;color: #888;margin-top: 4px;position: absolute;right: 5%;bottom: 65%;}

/* === Swap Hero Overlay === */
.swap-container { position: relative; } /* 안전하게 재강조 */

.swap-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 9;               /* 스왑 카드 위 */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  text-align: center;
  padding: clamp(16px, 4vw, 32px);
  /* 상단은 거의 투명, 하단은 흐릿하게 덮는 느낌은 ::after에서 처리 */
  background: transparent;
  border-radius: 24px;
}

/* 하단을 흐릿하게 덮는 레이어 (스왑창 하단이 그라데이션+블러로 사라지는 느낌) */
.swap-hero-overlay::after {
  content: "";
  position: absolute;
  left: -16px; right: -16px;
  bottom: -16px;
  height: 60%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.75) 45%,
    rgba(255,255,255,1) 100%
  );
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  pointer-events: none;
}

/* 콘텐츠 타이포그래피 */
.swap-hero-content {
  max-width: 720px;
  position: relative;
  z-index: 1; /* ::after 위에 표시 */
}

.swap-hero-title {
  margin: 0 0 10px 0;
  line-height: 1.12;
  font-weight: 800;
  color: #0f172a; /* 딥 네이비 */
  font-size: clamp(26px, 4.6vw, 36px);
  letter-spacing: -0.01em;
}
.swap-hero-title .hero-prefix,
.swap-hero-title .hero-suffix { opacity: 0.92; }

.hero-rotator {
  display: inline-block;
  min-width: 8ch;         /* 폭 튀는 현상 방지 */
  margin: 0 6px;
  color: #2932e1;           /* 브랜드 포인트 */
  font-weight: 900;
}
.hero-rotator.rot-swapping {
  animation: rotFade .22s ease;
}
@keyframes rotFade {
  0% { opacity: 0; transform: translateY(7px); }
  100% { opacity: 1; transform: translateY(0); }
}

.swap-hero-sub {
  margin: 8px 0 18px 0;
  font-size: clamp(13px, 1.9vw, 16px);
  color: #334155;
  opacity: .92;
}

/* CTA 버튼 */
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  border: 0;
  background: #2932e1;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 2px 10px rgba(41,50,225,0.12);
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.hero-cta:hover { background: #1f2578; box-shadow: 0 6px 24px rgba(41,50,225,.18); }
.hero-cta:active { transform: translateY(1px); }

/* 오버레이 사라질 때 페이드아웃 */
.swap-hero-overlay.is-hiding {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .24s ease, transform .24s ease;
}

/* 모션 감소 환경 */
@media (prefers-reduced-motion: reduce) {
  .hero-rotator.rot-swapping { animation: none; }
  .swap-hero-overlay.is-hiding { transition: none; }
}

/* === Rotator (부드러운 "아래로 흐르는" 교차 + 살짝 3D 회전) === */
.hero-rotator {
  position: relative;
  display: inline-block;
  height: 1em;              /* 라인 높이에 딱 맞게 */
  min-width: 8ch;         /* 폭 튐 방지 */
  perspective: 800px;       /* rotateX 깊이감 */
  vertical-align: baseline;
  overflow: hidden;
}

.hero-rotator .rot-txt {
  position: absolute;
  inset: 0;
  display: inline-block;
  transform: translateY(0) rotateX(0);
  opacity: 1;
  will-change: transform, opacity;
  transition:
    transform .44s cubic-bezier(.2,.7,.2,1),
    opacity   .44s linear;
}

/* 초기 상태: current는 중앙, next는 위쪽 대기 */
.hero-rotator .is-current {
  transform: translateY(0%) rotateX(0deg);
  opacity: 1;
}
.hero-rotator .is-next {
  transform: translateY(-110%) rotateX(-12deg);
  opacity: 0;
}

/* 스왑 중: 둘 다 "아래로" 흘러내리는 느낌 */
.hero-rotator.do-swap .is-current {
  transform: translateY(110%) rotateX(12deg);
  opacity: 0;
}
.hero-rotator.do-swap .is-next {
  transform: translateY(0%) rotateX(0deg);
  opacity: 1;
}

/* 모션 감소 환경 */
@media (prefers-reduced-motion: reduce) {
  .hero-rotator .rot-txt { transition: none; }
}

/* === Token icon in <select> (buyTokenSelect 전용) === */
#buyTokenSelect.select-pill{
  padding-left: 44px;                 /* 아이콘 자리 */
  background-repeat: no-repeat;
  background-position: 12px 50%;
  background-size: 20px 20px;
}

/* 선택값에 따라 아이콘 교체: data-icon="ETH|USDT|USDC" */
#buyTokenSelect.select-pill[data-icon="ETH"]{
  background-image: url("https://p2p-escrow-static-prod.s3.ap-northeast-2.amazonaws.com/static/images/eth.svg");
}
#buyTokenSelect.select-pill[data-icon="USDT"]{
  background-image: url("https://p2p-escrow-static-prod.s3.ap-northeast-2.amazonaws.com/static/images/usdt.svg");
}
#buyTokenSelect.select-pill[data-icon="USDC"]{
  background-image: url("https://p2p-escrow-static-prod.s3.ap-northeast-2.amazonaws.com/static/images/usdc.svg");
}

/* === Token icon in <select> (Sell: #tokenSelect 전용) === */
#tokenSelect.select-pill {
  padding-left: 44px;          /* 아이콘 자리 */
  background-repeat: no-repeat;
  background-position: 12px 50%;
  background-size: 20px 20px;
}

/* 선택값에 따라 아이콘 교체: data-icon="ETH|USDT|USDC" */
#tokenSelect.select-pill[data-icon="ETH"]{
  background-image: url("https://p2p-escrow-static-prod.s3.ap-northeast-2.amazonaws.com/static/images/eth.svg");
}
#tokenSelect.select-pill[data-icon="USDT"]{
  background-image: url("https://p2p-escrow-static-prod.s3.ap-northeast-2.amazonaws.com/static/images/usdt.svg");
}
#tokenSelect.select-pill[data-icon="USDC"]{
  background-image: url("{% static 'images/usdc.svg' %}");
}