@charset "UTF-8";
/*  vw-calc */
/* =========================
   Button Maps
========================= */
/* =========================
   Helpers
========================= */
/* =========================
   Mixins
========================= */
:root {
  --full: 100%;
  --full-dvw: 100dvw;
  --full-dvh: 100dvh;
  --max-w: 1200px;
  --header-h: 3.75rem;
  --header-h-md: 4.625rem;
  --sidebar-w: 18.75rem;
  --sidebarContainer-w: 12.25rem;
  --input-h: var(--s12);
  --white-section-spacing: var(--s6);
  --mobile-white-section-spacing: var(--s4);
  --font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --white: #FFFFFF;
  --black: #000000;
  --transparent: transparent;
  --primary-default: #00A0DC;
  --primary-strong: #3F87B9;
  --primary-heavy: #1B5E9E;
  --neutral-light: #C8D5DA;
  --neutral-soft: #A4B7C0;
  --neutral-default: #7A8E96;
  --neutral-strong: #4A5C64;
  --neutral-heavy: #1A2E35;
  --secondary-gray: #F3F4F6;
  --secondary-gray-dark: #5A6268;
  --secondary-gray-light: #F1F3F5;
  --negative: #EF4444;
  --positive: #059669;
  --cautionary: #F59E0B;
  --bg-default: #F5F8FC;
  --bg-soft: #F8FBFD;
  --bg-positive: #D9F3EB;
  --bg-negative: #FFF3F3 ;
  --bg-success: #E8F4FF;
  --text-default: var(--neutral-default);
  --text-soft: var(--neutral-soft);
  --text-strong: var(--neutral-strong);
  --text-heavy: var(--neutral-heavy);
  --text-light: var(--white);
  --bg-features: #E9F5FE;
  --bg-countries: var(--white);
  --bg-business: #34424C;
  --bg-contact: var(--white);
  --bg-footer: #2B3542;
  --bg-light: #F8FAFA;
  --bg-section: #F2F6F5;
  --bg-dark: #2B3542;
  --bg-dark-alt: #243B44;
  --status-verified: var(--positive);
  --status-unverified: var(--negative);
  --status-received: var(--positive);
  --status-processing: var(--positive);
  --status-approved: var(--positive);
  --status-complete: var(--primary-heavy);
  --status-success: var(--primary-heavy);
  --status-failed: var(--negative);
  --status-pending: var(--neutral-strong);
  --status-cancel: var(--neutral-strong);
  --accent-teal: #00C9B7;
  --border-soft: #EDEFF0;
  --border-default: #DFE4E6;
  /* Shadow */
  --shadow-sm: 0 0.125rem 0.5rem rgba(26, 46, 53, 0.06);
  --shadow: 0 0.25rem 1rem rgba(193, 208, 219, 0.20);
  --shadow-lg: 0 0.75rem 2.5rem rgba(26, 46, 53, 0.12);
  --accent-red: #fca5a5;
  --accent-red-light: #fca5a5;
  --accent-red-dark: #ef4444;
  --bg-delete: #fef2f2;
  --s1: 0.25rem;
  --s1-6: 0.375rem;
  --s2: 0.5rem;
  --s2-10: 0.625rem;
  --s3: 0.75rem;
  --s3-14: 0.875rem;
  --s4: 1rem;
  --s4-18: 1.125rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s7: 1.75rem;
  --s8: 2rem;
  --s9: 2.25rem;
  --s10: 2.5rem;
  --s11: 2.75rem;
  --s12: 3rem;
  --s13: 3.25rem;
  --s14: 3.5rem;
  --s15: 3.75rem;
  --s16: 4rem;
  --s17: 4.25rem;
  --s18: 4.5rem;
  --s19: 4.75rem;
  --s20: 5rem;
  --s21: 5.25rem;
  --xsBase: 3.333vw;
  --smBase: 2.083vw;
  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --text-4xl: 2rem;
  --text-5xl: 2.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --transition: all 0.3s ease;
  --icon-nodata: url("../images/icon_nodata.png");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.99674 1.33008C4.32341 1.33008 1.33008 4.32341 1.33008 7.99674C1.33008 11.6701 4.32341 14.6634 7.99674 14.6634C11.6701 14.6634 14.6634 11.6701 14.6634 7.99674C14.6634 4.32341 11.6701 1.33008 7.99674 1.33008ZM7.49674 5.33008C7.49674 5.05674 7.72341 4.83008 7.99674 4.83008C8.27008 4.83008 8.49674 5.05674 8.49674 5.33008V8.66341C8.49674 8.93674 8.27008 9.16341 7.99674 9.16341C7.72341 9.16341 7.49674 8.93674 7.49674 8.66341V5.33008ZM8.61008 10.9167C8.57674 11.0034 8.53008 11.0701 8.47008 11.1367C8.40341 11.1967 8.33008 11.2434 8.25008 11.2767C8.17008 11.3101 8.08341 11.3301 7.99674 11.3301C7.91008 11.3301 7.82341 11.3101 7.74341 11.2767C7.66341 11.2434 7.59008 11.1967 7.52341 11.1367C7.46341 11.0701 7.41674 11.0034 7.38341 10.9167C7.35008 10.8367 7.33008 10.7501 7.33008 10.6634C7.33008 10.5767 7.35008 10.4901 7.38341 10.4101C7.41674 10.3301 7.46341 10.2567 7.52341 10.1901C7.59008 10.1301 7.66341 10.0834 7.74341 10.0501C7.90341 9.98341 8.09008 9.98341 8.25008 10.0501C8.33008 10.0834 8.40341 10.1301 8.47008 10.1901C8.53008 10.2567 8.57674 10.3301 8.61008 10.4101C8.64341 10.4901 8.66341 10.5767 8.66341 10.6634C8.66341 10.7501 8.64341 10.8367 8.61008 10.9167Z' fill='%2300A0DC'/%3E%3C/svg%3E");
  --icon-info-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.99674 3.33008C6.32341 3.33008 3.33008 6.32341 3.33008 9.99674C3.33008 13.6701 6.32341 16.6634 9.99674 16.6634C13.6701 16.6634 16.6634 13.6701 16.6634 9.99674C16.6634 6.32341 13.6701 3.33008 9.99674 3.33008ZM9.49674 7.33008C9.49674 7.05674 9.72341 6.83008 9.99674 6.83008C10.2701 6.83008 10.4967 7.05674 10.4967 7.33008V10.6634C10.4967 10.9367 10.2701 11.1634 9.99674 11.1634C9.72341 11.1634 9.49674 10.9367 9.49674 10.6634V7.33008ZM10.6101 12.9167C10.5767 13.0034 10.5301 13.0701 10.4701 13.1367C10.4034 13.1967 10.3301 13.2434 10.2501 13.2767C10.1701 13.3101 10.0834 13.3301 9.99674 13.3301C9.91008 13.3301 9.82341 13.3101 9.74341 13.2767C9.66341 13.2434 9.59008 13.1967 9.52341 13.1367C9.46341 13.0701 9.41674 13.0034 9.38341 12.9167C9.35008 12.8367 9.33008 12.7501 9.33008 12.6634C9.33008 12.5767 9.35008 12.4901 9.38341 12.4101C9.41674 12.3301 9.46341 12.2567 9.52341 12.1901C9.59008 12.1301 9.66341 12.0834 9.74341 12.0501C9.90341 11.9834 10.0901 11.9834 10.2501 12.0501C10.3301 12.0834 10.4034 12.1301 10.4701 12.1901C10.5301 12.2567 10.5767 12.3301 10.6101 12.4101C10.6434 12.4901 10.6634 12.5767 10.6634 12.6634C10.6634 12.7501 10.6434 12.8367 10.6101 12.9167Z' fill='%231B5E9E'/%3E%3C/svg%3E");
  --icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8.00016 1.33331C4.32683 1.33331 1.3335 4.32665 1.3335 7.99998C1.3335 11.6733 4.32683 14.6666 8.00016 14.6666C11.6735 14.6666 14.6668 11.6733 14.6668 7.99998C14.6668 4.32665 11.6735 1.33331 8.00016 1.33331ZM10.2402 9.53331C10.4335 9.72665 10.4335 10.0466 10.2402 10.24C10.1402 10.34 10.0135 10.3866 9.88683 10.3866C9.76016 10.3866 9.6335 10.34 9.5335 10.24L8.00016 8.70665L6.46683 10.24C6.36683 10.34 6.24016 10.3866 6.1135 10.3866C5.98683 10.3866 5.86016 10.34 5.76016 10.24C5.56683 10.0466 5.56683 9.72665 5.76016 9.53331L7.2935 7.99998L5.76016 6.46665C5.56683 6.27331 5.56683 5.95331 5.76016 5.75998C5.9535 5.56665 6.2735 5.56665 6.46683 5.75998L8.00016 7.29331L9.5335 5.75998C9.72683 5.56665 10.0468 5.56665 10.2402 5.75998C10.4335 5.95331 10.4335 6.27331 10.2402 6.46665L8.70683 7.99998L10.2402 9.53331Z' fill='%23EF4444'/%3E%3C/svg%3E");
  --icon-lang-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.52257 12.5547C9.79146 12.8055 10.2085 12.8055 10.4774 12.5547L14.3297 8.96192C14.7944 8.5285 14.4878 7.75 13.8523 7.75H6.14771C5.51225 7.75 5.20556 8.5285 5.67028 8.96192L9.52257 12.5547Z' fill='%234A5C64'/%3E%3C/svg%3E");
  --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0%200%2012%207' fill='none'%3E%3Cpath d='M0.800252%200.800334L5.75%205.75008L10.6997%200.800334' stroke='%237A8E96' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-datepicker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237A8E96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* ===== Reset & Base ===== */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Base Body Overflow Fix */
html,
body {
  width: var(--full);
  font-family: var(--font-family);
  font-size: var(--text-md);
  color: var(--text-heavy);
  line-height: 1.5;
  background-color: var(--white);
  overflow-x: hidden;
}
html *,
body * {
  font-family: inherit;
}

@media (max-width: 768px) {
  html,
  body {
    font-size: var(--smBase);
  }
}
@media (max-width: 480px) {
  html,
  body {
    font-size: var(--xsBase);
  }
}
li, dd {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

img {
  max-width: var(--full);
  height: auto;
}

/* ===== Typography ===== */
p {
  font-size: var(--text-md);
  color: var(--text-default);
}

table {
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
}

input, select, textarea {
  width: var(--full);
  height: var(--input-h);
  padding: var(--s1) var(--s4);
  font-size: var(--text-md);
  font-weight: 500;
  background-color: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  outline: none;
}
input::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: var(--text-soft);
  font-weight: 400;
  opacity: 1;
}
input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--text-soft);
  font-weight: 400;
  opacity: 1;
}
input:-ms-input-placeholder, select:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: var(--text-soft);
  font-weight: 400;
  opacity: 1;
}
input::-ms-input-placeholder, select::-ms-input-placeholder, textarea::-ms-input-placeholder {
  color: var(--text-soft);
  font-weight: 400;
  opacity: 1;
}
input::placeholder, select::placeholder, textarea::placeholder {
  color: var(--text-soft);
  font-weight: 400;
  opacity: 1;
}
input:not(:disabled, :-moz-read-only):focus, select:not(:disabled, :-moz-read-only):focus, textarea:not(:disabled, :-moz-read-only):focus {
  border: 2px solid var(--primary-default);
}
input:not(:disabled, :read-only):focus, select:not(:disabled, :read-only):focus, textarea:not(:disabled, :read-only):focus {
  border: 2px solid var(--primary-default);
}
input:not(:disabled, :-moz-read-only):focus:focus, select:not(:disabled, :-moz-read-only):focus:focus, textarea:not(:disabled, :-moz-read-only):focus:focus {
  border-color: var(--primary-default);
}
input:not(:disabled, :read-only):focus:focus, select:not(:disabled, :read-only):focus:focus, textarea:not(:disabled, :read-only):focus:focus {
  border-color: var(--primary-default);
}
input.error, select.error, textarea.error {
  border: 2px solid var(--negative);
}
input.error:focus, select.error:focus, textarea.error:focus {
  border-color: var(--negative);
}
input:disabled, select:disabled, textarea:disabled {
  background-color: var(--bg-default);
  border-color: var(--border-soft);
  cursor: not-allowed;
}

input:-moz-read-only {
  cursor: not-allowed;
}

input:read-only {
  cursor: not-allowed;
}

select {
  padding: var(--s1) var(--s8) var(--s1) var(--s4);
  color: var(--text-soft);
  -webkit-text-fill-color: #A4B7C0;
  color-scheme: light;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: var(--icon-select);
  background-size: var(--s3) 0.4375rem;
  background-repeat: no-repeat;
  background-position: calc(var(--full) - var(--s4)) center;
  cursor: pointer;
}
select:valid {
  color: var(--text-heavy);
  -webkit-text-fill-color: var(--text-heavy);
}
select:not(:disabled, :-moz-read-only):focus, select:not(:disabled, :-moz-read-only):valid {
  color: var(--text-heavy);
  -webkit-text-fill-color: var(--text-heavy);
}
select:not(:disabled, :read-only):focus, select:not(:disabled, :read-only):valid {
  color: var(--text-heavy);
  -webkit-text-fill-color: var(--text-heavy);
}
select:disabled {
  background-color: var(--bg-default);
  border-color: var(--border-soft);
  cursor: not-allowed;
}

textarea {
  padding: var(--s4);
  height: auto;
}

.custom-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: var(--s5);
  height: var(--s5);
  background-color: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--s1);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

input[type=radio]:checked + .custom-check,
input[type=checkbox]:checked + .custom-check {
  background-color: var(--primary-default);
  border-color: var(--primary-default);
}

input[type=radio]:checked + .custom-check::after,
input[type=checkbox]:checked + .custom-check::after {
  display: block;
  content: "";
  margin-bottom: 0.1875rem;
  width: 0.25rem;
  height: 0.5rem;
  border: solid var(--white);
  border-width: 0 0.125rem 0.125rem 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.hidden {
  display: none !important;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #9aa4ab #eef2f4;
}

*::-webkit-scrollbar {
  width: 0.5rem;
  height: 1rem;
}

*::-webkit-scrollbar-thumb {
  background-color: #9aa4ab;
  border-radius: 999px;
  border: 2px solid #eef2f4;
}

*::-webkit-scrollbar-track {
  background-color: #eef2f4;
  border-radius: 999px;
}

.flex-1 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* ===== Header ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(var(--s3));
  border-bottom: 1px solid transparent;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: 1000;
}
.header .container {
  overflow: visible;
}

.header.scrolled {
  border-bottom-color: var(--border-default);
  -webkit-box-shadow: var(--shadow-sm);
          box-shadow: var(--shadow-sm);
}

.header-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: var(--header-h-md);
}
.header-inner .logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
}
.header-inner .logo img {
  height: var(--s10);
  width: auto;
}

@media (max-width: 768px) {
  .header-inner {
    height: var(--header-h);
  }
}
.db-h-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
}
.db-h-left .db-toggle-btn svg {
  color: var(--black);
}

.nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s1);
}
.nav .nav-link {
  padding: var(--s3) var(--s5);
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--text-heavy);
  border-radius: var(--s2);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.nav .nav-link:hover {
  color: var(--primary-default);
}

.nav-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
}
.nav-right .db-balance-display,
.nav-right .lang-select-box {
  margin-right: var(--s3);
}
.nav-right .btn-text,
.nav-right .btn-primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.nav-right select {
  width: auto;
}

.lang-select-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.lang-select-box:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: var(--s4);
  height: var(--s4);
  background-image: url("../images/svg/global.svg");
  background-size: cover;
  background-repeat: no-repeat;
}

.lang-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  padding: 0 var(--s7) 0 1.375rem;
  height: var(--s10);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
  color-scheme: light;
  background-image: var(--icon-lang-select);
  background-size: var(--s5);
  background-color: var(--transparent);
  background-position: right center;
  border: none;
  border-radius: var(--s2);
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.lang-select:valid {
  color: var(--text-strong);
  -webkit-text-fill-color: var(--text-strong);
}

/* ===== GM Header Responsiveness Updates ===== */
/* Base Header Adjustments */
.header-inner {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: var(--s8);
}

.nav-right {
  margin-left: auto;
}

/* Mobile Login Button Base Style */
.btn-login-mobile {
  display: none;
  background-color: var(--primary-default);
  color: var(--white);
  font-weight: 500;
  padding: 0 var(--s4);
  border-radius: var(--s2);
  height: var(--s10);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.btn-login-mobile:hover {
  background-color: var(--primary-strong);
}

.db-user-dropdown {
  position: relative;
}

.db-my-layer {
  display: none;
  padding: var(--s2) 0;
  position: absolute;
  top: 50px;
  right: 0;
  width: 140px;
  background-color: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
  z-index: 10;
}

.db-my-layer.active {
  display: block;
}

.db-my-layer a {
  display: block;
  padding: var(--s3) var(--s5);
  font-size: var(--text-sm);
  color: var(--text-heavy);
  text-decoration: none;
}

.db-my-layer .logout-color {
  color: #ff5a5f;
  border-top: 1px solid #eee;
}

/* 1. Tablet Landscape (769px ~ 1024px) */
@media (max-width: 1024px) {
  .header-inner {
    gap: var(--s4);
  }
  .nav {
    display: none;
  }
  .nav .nav-link {
    padding: var(--s2) var(--s3);
    font-size: var(--text-sm);
  }
  .db-user-dropdown {
    position: static;
  }
}
/* 2. Mobile Small (<= 768px) */
@media (max-width: 768px) {
  .header-inner {
    gap: var(--s3);
  }
  .header-inner .logo img {
    height: 2.1875rem;
  }
  .nav-right .btn-primary {
    display: none;
  }
  .btn-login-mobile {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
  .nav-right {
    margin-left: auto;
  }
  .nav-right .btn-secondary {
    color: var(--white);
    background-color: var(--primary-default);
    border: none;
  }
  .nav-right .btn-secondary:hover:not(:disabled):not(.is-disabled) {
    color: var(--text-light);
    background-color: var(--primary-strong);
    border-color: var(--primary-strong);
  }
  .db-my-layer a {
    padding: var(--s2) var(--s5);
    font-size: var(--text-sm);
  }
}
/* 3. Mobile Small (<= 480px) */
@media (max-width: 480px) {
  .header-inner {
    gap: var(--s2);
  }
  .nav {
    display: none;
  }
  .db-user-dropdown .btn {
    min-width: var(--s10);
  }
  .db-user-dropdown .btn svg {
    display: none;
    margin: 0;
  }
}
.db-body .lang-select,
.db-body .db-user-dropdown {
  display: block;
}
.db-body .db-user-dropdown .btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Header Balance Display */
.db-balance-display {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  font-size: var(--text-sm);
  color: var(--text-heavy);
  font-weight: 600;
}

@media (max-width: 768px) {
  .db-balance-display {
    display: none;
  }
}
.balance-label {
  color: var(--text-soft);
  font-weight: 500;
}

.balance-amount {
  color: var(--primary-default);
  font-weight: 700;
}

/* Contact Info Bar   */
.contact-info-bar {
  padding: var(--s7) 0;
  background-color: var(--bg-footer);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-info-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--s2);
}

.contact-info-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: var(--s2);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.contact-info-item > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  color: var(--text-default);
}
.contact-info-item > span > span {
  color: var(--white);
  white-space: wrap;
}

.contact-info-item svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--primary-default);
}

@media (max-width: 1024px) {
  .contact-info-items {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
/* ===== Footer ===== */
.footer {
  padding: var(--s12) 0 var(--s10);
  background-color: var(--bg-footer);
  color: rgba(255, 255, 255, 0.6);
}

.footer-inner {
  padding: 0 var(--s6);
  margin: 0 auto;
  width: var(--full);
  max-width: var(--max-w);
  position: relative;
}

.footer-nav {
  margin-bottom: var(--s8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--s6);
}
.footer-nav a {
  font-size: var(--text-md);
  color: var(--white);
  font-weight: 500;
}
.footer-nav a.active {
  color: var(--primary-default);
  font-weight: 700;
}

.footer-logo {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media (max-width: 1200px) {
  .footer-logo {
    right: var(--s6);
  }
}
.footer-meta,
.footer-copy {
  color: var(--text-default);
}

.footer-meta {
  font-size: var(--text-sm);
}

.footer-copy {
  margin-top: var(--s2);
  font-size: var(--text-xs);
}

/* 반응형: 모바일에서는 세로로 쌓기 */
@media (max-width: 768px) {
  .footer-inner {
    text-align: center;
  }
  .footer-nav {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: var(--s4);
  }
  .footer-link {
    font-size: var(--text-lg);
  }
  .footer-logo {
    position: static;
    margin: var(--s10) 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
#sidebarOverlay {
  opacity: 0;
  display: none;
  inset: 0;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(var(--s1));
  -webkit-backdrop-filter: blur(var(--s1));
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  z-index: 1050;
}
#sidebarOverlay.active {
  opacity: 1;
  display: block;
}

@media (min-width: 1024px) {
  body.db-body #sidebarOverlay.active {
    opacity: 0;
    display: none;
  }
}
@media (min-width: 1025px) {
  #sidebarContainer {
    width: var(--sidebarContainer-w);
    -ms-flex-negative: 0;
        flex-shrink: 0;
    position: relative;
  }
  /* Collapse Container - Completely Hide */
  body.db-collapsed #sidebarContainer {
    width: 0;
    overflow: hidden;
    -webkit-transition: width 0.3s ease;
    transition: width 0.3s ease;
  }
}
.sidebar {
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: var(--full);
  background-color: var(--white);
  border-radius: 0;
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
  overflow-y: auto;
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
  -webkit-transition: margin-left 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition: margin-left 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition: margin-left 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  transition: margin-left 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1100;
}
.sidebar.mobile-open {
  margin-left: 0;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.sidebar .sidebar-close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  top: 10px;
  color: var(--text-strong);
}

.db-collapsed .sidebar {
  margin-left: -200px;
  opacity: 0;
  pointer-events: none;
}

body.db-body .sidebar {
  position: static;
  top: var(--header-h-md);
  padding-right: var(--s6);
  width: var(--full);
  background-color: transparent;
  border-radius: 0;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
body.db-body .sidebar.mobile-open {
  padding-right: 0;
  margin-left: 0;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

@media (max-width: 1024px) {
  body.db-body .sidebar {
    position: fixed;
    top: 0;
    width: var(--sidebar-w);
    background-color: var(--white);
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  .db-collapsed .sidebar {
    margin-left: 0;
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 480px) {
  .sidebar.mobile-open,
  body.db-body .sidebar.mobile-open {
    width: 80%;
  }
  .sidebar-close {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    top: 10px;
  }
}
.sidebar-header {
  margin-bottom: 0;
  padding: var(--s5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid var(--border-default);
}
.sidebar-header .sidebar-logo img {
  height: var(--s10);
}

/* Hide on Desktop (Member Header already has logo) */
@media (min-width: 1025px) {
  body.db-body .sidebar-header {
    display: none;
  }
}
@media (max-width: 1024px) {
  .sidebar-header {
    position: sticky;
    top: 0;
    background-color: var(--white);
    z-index: 10;
  }
  .sidebar-container {
    padding: var(--s5);
  }
}
.nav-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: var(--s2) var(--s4);
  font-size: var(--text-sm);
  color: var(--text-strong);
  border-radius: var(--s2);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

@media (max-width: 768px) {
  .nav-link {
    font-size: var(--text-md);
  }
}
.nav-icon {
  width: var(--s5);
  height: var(--s5);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--s5) var(--s5);
}

.nav-icon-home {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.60205 2.43216C10.2276 2.41754 10.8233 2.58028 11.2524 2.8804V2.88138L16.4028 6.4888L16.4048 6.49075C16.6922 6.69126 16.9956 7.05148 17.228 7.49661C17.4604 7.94186 17.5834 8.39765 17.5835 8.74954V14.8169C17.5834 16.3288 16.3426 17.5747 14.8247 17.5747H5.17529C3.65849 17.5747 2.4165 16.3296 2.4165 14.8081V8.63333C2.4165 8.30797 2.52673 7.876 2.73779 7.44583C2.94864 7.01614 3.22368 6.66174 3.48486 6.45853H3.48584L7.97705 2.95853C8.38981 2.63755 8.97608 2.44684 9.60205 2.43216Z' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 14.9917V12.4917' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-link:hover .nav-icon-home,
.nav-link.active .nav-icon-home {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M16.6999 5.68333L11.8999 2.325C10.5915 1.40833 8.5832 1.45833 7.32487 2.43333L3.14987 5.69167C2.31654 6.34167 1.6582 7.675 1.6582 8.725V14.475C1.6582 16.6 3.3832 18.3333 5.5082 18.3333H14.4915C16.6165 18.3333 18.3415 16.6083 18.3415 14.4833V8.83333C18.3415 7.70833 17.6165 6.325 16.6999 5.68333ZM10.6249 15C10.6249 15.3417 10.3415 15.625 9.99987 15.625C9.6582 15.625 9.37487 15.3417 9.37487 15V12.5C9.37487 12.1583 9.6582 11.875 9.99987 11.875C10.3415 11.875 10.6249 12.1583 10.6249 12.5V15Z' fill='%231B5E9E'/%3E%3C/svg%3E");
}

.nav-icon-remittance {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.16689 5.26667L13.2419 2.90834C16.4169 1.85001 18.1419 3.58334 17.0919 6.75834L14.7336 13.8333C13.1502 18.5917 10.5502 18.5917 8.96689 13.8333L8.26689 11.7333L6.16689 11.0333C1.40856 9.45001 1.40856 6.85834 6.16689 5.26667Z' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.4248 11.375L11.4081 8.38333' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-link:hover .nav-icon-remittance,
.nav-link.active .nav-icon-remittance {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M13.4501 2.46667L5.9251 4.96667C0.866764 6.65834 0.866764 9.41667 5.9251 11.1L8.15843 11.8417L8.9001 14.075C10.5834 19.1333 13.3501 19.1333 15.0334 14.075L17.5418 6.55834C18.6584 3.18334 16.8251 1.34167 13.4501 2.46667ZM13.7168 6.95001L10.5501 10.1333C10.4251 10.2583 10.2668 10.3167 10.1084 10.3167C9.9501 10.3167 9.79177 10.2583 9.66677 10.1333C9.4251 9.89167 9.4251 9.49167 9.66677 9.25001L12.8334 6.06667C13.0751 5.82501 13.4751 5.82501 13.7168 6.06667C13.9584 6.30834 13.9584 6.70834 13.7168 6.95001Z' fill='%231B5E9E'/%3E%3C/svg%3E");
}

.nav-icon-recurring {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.6665 1.66667V4.16667' stroke='%234A5C64' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.3335 1.66667V4.16667' stroke='%234A5C64' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.9165 7.575H17.0832' stroke='%234A5C64' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.5 7.08334V14.1667C17.5 16.6667 16.25 18.3333 13.3333 18.3333H6.66667C3.75 18.3333 2.5 16.6667 2.5 14.1667V7.08334C2.5 4.58334 3.75 2.91667 6.66667 2.91667H13.3333C16.25 2.91667 17.5 4.58334 17.5 7.08334Z' stroke='%234A5C64' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.99607 11.4167H10.0036' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.91209 11.4167H6.91957' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.91209 13.9167H6.91957' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-link:hover .nav-icon-recurring,
.nav-link.active .nav-icon-recurring {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M13.9582 2.96667V1.66667C13.9582 1.32501 13.6749 1.04167 13.3332 1.04167C12.9915 1.04167 12.7082 1.32501 12.7082 1.66667V2.91667H7.29153V1.66667C7.29153 1.32501 7.0082 1.04167 6.66653 1.04167C6.32487 1.04167 6.04153 1.32501 6.04153 1.66667V2.96667C3.79153 3.17501 2.69987 4.51667 2.5332 6.50834C2.51653 6.75001 2.71653 6.95001 2.94987 6.95001H17.0499C17.2915 6.95001 17.4915 6.74167 17.4665 6.50834C17.2999 4.51667 16.2082 3.17501 13.9582 2.96667Z' fill='%231B5E9E'/%3E%3Cpath d='M16.6667 8.2H3.33333C2.875 8.2 2.5 8.575 2.5 9.03333V14.1667C2.5 16.6667 3.75 18.3333 6.66667 18.3333H13.3333C16.25 18.3333 17.5 16.6667 17.5 14.1667V9.03333C17.5 8.575 17.125 8.2 16.6667 8.2ZM7.675 15.175C7.59167 15.25 7.5 15.3083 7.4 15.35C7.3 15.3917 7.19167 15.4167 7.08333 15.4167C6.975 15.4167 6.86667 15.3917 6.76667 15.35C6.66667 15.3083 6.575 15.25 6.49167 15.175C6.34167 15.0167 6.25 14.8 6.25 14.5833C6.25 14.3667 6.34167 14.15 6.49167 13.9917C6.575 13.9167 6.66667 13.8583 6.76667 13.8167C6.96667 13.7333 7.2 13.7333 7.4 13.8167C7.5 13.8583 7.59167 13.9167 7.675 13.9917C7.825 14.15 7.91667 14.3667 7.91667 14.5833C7.91667 14.8 7.825 15.0167 7.675 15.175ZM7.85 11.9833C7.80833 12.0833 7.75 12.175 7.675 12.2583C7.59167 12.3333 7.5 12.3917 7.4 12.4333C7.3 12.475 7.19167 12.5 7.08333 12.5C6.975 12.5 6.86667 12.475 6.76667 12.4333C6.66667 12.3917 6.575 12.3333 6.49167 12.2583C6.41667 12.175 6.35833 12.0833 6.31667 11.9833C6.275 11.8833 6.25 11.775 6.25 11.6667C6.25 11.5583 6.275 11.45 6.31667 11.35C6.35833 11.25 6.41667 11.1583 6.49167 11.075C6.575 11 6.66667 10.9417 6.76667 10.9C6.96667 10.8167 7.2 10.8167 7.4 10.9C7.5 10.9417 7.59167 11 7.675 11.075C7.75 11.1583 7.80833 11.25 7.85 11.35C7.89167 11.45 7.91667 11.5583 7.91667 11.6667C7.91667 11.775 7.89167 11.8833 7.85 11.9833ZM10.5917 12.2583C10.5083 12.3333 10.4167 12.3917 10.3167 12.4333C10.2167 12.475 10.1083 12.5 10 12.5C9.89167 12.5 9.78333 12.475 9.68333 12.4333C9.58333 12.3917 9.49167 12.3333 9.40833 12.2583C9.25833 12.1 9.16667 11.8833 9.16667 11.6667C9.16667 11.45 9.25833 11.2333 9.40833 11.075C9.49167 11 9.58333 10.9417 9.68333 10.9C9.88333 10.8083 10.1167 10.8083 10.3167 10.9C10.4167 10.9417 10.5083 11 10.5917 11.075C10.7417 11.2333 10.8333 11.45 10.8333 11.6667C10.8333 11.8833 10.7417 12.1 10.5917 12.2583Z' fill='%231B5E9E'/%3E%3C/svg%3E");
}

.nav-icon-remittance-list {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M1.6665 7.08334H12.0832M4.99984 13.75H6.6665M8.74984 13.75H12.0832M18.3332 11.6917V13.425C18.3332 16.35 17.5915 17.0833 14.6332 17.0833H5.3665C2.40817 17.0833 1.6665 16.35 1.6665 13.425V6.575C1.6665 3.65 2.40817 2.91667 5.3665 2.91667H12.0832M16.6665 7.91667V2.91667M16.6665 2.91667L18.3332 4.58334M16.6665 2.91667L14.9998 4.58334' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-link:hover .nav-icon-remittance-list,
.nav-link.active .nav-icon-remittance-list {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M16.6417 1.45833H14.1917C13.1333 1.45833 12.5 2.09166 12.5 3.14999V5.59999C12.5 6.65833 13.1333 7.29166 14.1917 7.29166H16.6417C17.7 7.29166 18.3333 6.65833 18.3333 5.59999V3.14999C18.3333 2.09166 17.7 1.45833 16.6417 1.45833ZM16.825 4.21666C16.725 4.31666 16.5917 4.36666 16.4583 4.36666C16.325 4.36666 16.1917 4.31666 16.0917 4.21666L15.9417 4.06666V5.93333C15.9417 6.22499 15.7083 6.45833 15.4167 6.45833C15.125 6.45833 14.8917 6.22499 14.8917 5.93333V4.06666L14.7417 4.21666C14.5417 4.41666 14.2083 4.41666 14.0083 4.21666C13.8083 4.01666 13.8083 3.68333 14.0083 3.48333L15.05 2.44166C15.0917 2.39999 15.15 2.36666 15.2083 2.34166C15.225 2.33333 15.2417 2.33333 15.2583 2.32499C15.3 2.30833 15.3417 2.29999 15.3917 2.29999C15.4083 2.29999 15.425 2.29999 15.4417 2.29999C15.5 2.29999 15.55 2.30833 15.6083 2.33333C15.6167 2.33333 15.6167 2.33333 15.625 2.33333C15.6833 2.35833 15.7333 2.39166 15.775 2.43333C15.7833 2.44166 15.7833 2.44166 15.7917 2.44166L16.8333 3.48333C17.0333 3.68333 17.0333 4.01666 16.825 4.21666Z' fill='%231B5E9E'/%3E%3Cpath d='M1.6665 9.55001V13.7167C1.6665 15.625 3.20817 17.1667 5.1165 17.1667H14.8748C16.7832 17.1667 18.3332 15.6167 18.3332 13.7083V9.55001C18.3332 8.99167 17.8832 8.54167 17.3248 8.54167H2.67484C2.1165 8.54167 1.6665 8.99167 1.6665 9.55001ZM6.6665 14.375H4.99984C4.65817 14.375 4.37484 14.0917 4.37484 13.75C4.37484 13.4083 4.65817 13.125 4.99984 13.125H6.6665C7.00817 13.125 7.2915 13.4083 7.2915 13.75C7.2915 14.0917 7.00817 14.375 6.6665 14.375ZM12.0832 14.375H8.74984C8.40817 14.375 8.12484 14.0917 8.12484 13.75C8.12484 13.4083 8.40817 13.125 8.74984 13.125H12.0832C12.4248 13.125 12.7082 13.4083 12.7082 13.75C12.7082 14.0917 12.4248 14.375 12.0832 14.375Z' fill='%231B5E9E'/%3E%3Cpath d='M11.2498 3.84166V6.28333C11.2498 6.84166 10.7998 7.29166 10.2415 7.29166H2.67484C2.10817 7.29166 1.6665 6.82499 1.6665 6.26666C1.67484 5.32499 2.04984 4.46666 2.67484 3.84166C3.29984 3.21666 4.1665 2.83333 5.1165 2.83333H10.2415C10.7998 2.83333 11.2498 3.28333 11.2498 3.84166Z' fill='%231B5E9E'/%3E%3C/svg%3E");
}

.nav-icon-transaction-history {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 4.63333H18.3333' stroke='%234A5C64' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.85 1.66667H16.4833C17.9667 1.66667 18.3333 2.03334 18.3333 3.50001V6.92501C18.3333 8.39167 17.9667 8.75834 16.4833 8.75834H11.85C10.3667 8.75834 10 8.39167 10 6.92501V3.50001C10 2.03334 10.3667 1.66667 11.85 1.66667Z' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.6665 14.2167H9.99984' stroke='%234A5C64' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5165 11.25H8.14984C9.63317 11.25 9.99984 11.6167 9.99984 13.0833V16.5083C9.99984 17.975 9.63317 18.3417 8.14984 18.3417H3.5165C2.03317 18.3417 1.6665 17.975 1.6665 16.5083V13.0833C1.6665 11.6167 2.03317 11.25 3.5165 11.25Z' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.3333 12.5C18.3333 15.725 15.725 18.3333 12.5 18.3333L13.375 16.875' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.6665 7.5C1.6665 4.27501 4.27484 1.66667 7.49984 1.66667L6.62485 3.12501' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-link:hover .nav-icon-transaction-history,
.nav-link.active .nav-icon-transaction-history {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M18.3333 12.5C18.3333 15.725 15.725 18.3333 12.5 18.3333L13.375 16.875' stroke='%231B5E9E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.6665 7.5C1.6665 4.27501 4.27484 1.66667 7.49984 1.66667L6.62484 3.12501' stroke='%231B5E9E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.3333 3.50001V3.59167C18.3333 3.82501 18.15 4.00834 17.9167 4.00834H10.4167C10.1833 4.00834 10 3.82501 10 3.59167V3.50001C10 2.03334 10.3667 1.66667 11.85 1.66667H16.4833C17.9667 1.66667 18.3333 2.03334 18.3333 3.50001Z' fill='%231B5E9E'/%3E%3Cpath d='M10.4167 4.84167C10.1833 4.84167 10 5.02501 10 5.25834V6.09167V6.91667C10 8.38334 10.3667 8.75001 11.85 8.75001H16.4833C17.9667 8.75001 18.3333 8.38334 18.3333 6.91667V6.09167V5.25834C18.3333 5.02501 18.15 4.84167 17.9167 4.84167H10.4167Z' fill='%231B5E9E'/%3E%3Cpath d='M9.99984 13.0833V13.175C9.99984 13.4083 9.8165 13.5917 9.58317 13.5917H2.08317C1.84984 13.5917 1.6665 13.4083 1.6665 13.175V13.0833C1.6665 11.6167 2.03317 11.25 3.5165 11.25H8.14984C9.63317 11.25 9.99984 11.6167 9.99984 13.0833Z' fill='%231B5E9E'/%3E%3Cpath d='M2.08317 14.425C1.84984 14.425 1.6665 14.6083 1.6665 14.8417V15.675V16.5C1.6665 17.9667 2.03317 18.3333 3.5165 18.3333H8.14984C9.63317 18.3333 9.99984 17.9667 9.99984 16.5V15.675V14.8417C9.99984 14.6083 9.8165 14.425 9.58317 14.425H2.08317Z' fill='%231B5E9E'/%3E%3C/svg%3E");
}

.nav-icon-receive-history {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M1.6665 7.08334H12.0832M4.99984 13.75H6.6665M8.74984 13.75H12.0832M18.3332 11.6917V13.425C18.3332 16.35 17.5915 17.0833 14.6332 17.0833H5.3665C2.40817 17.0833 1.6665 16.35 1.6665 13.425V6.575C1.6665 3.65 2.40817 2.91667 5.3665 2.91667H12.0832M16.6665 2.91667V7.91667M16.6665 7.91667L18.3332 6.25001M16.6665 7.91667L14.9998 6.25001' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-link:hover .nav-icon-receive-history,
.nav-link.active .nav-icon-receive-history {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M16.6417 7.29166H14.1917C13.1333 7.29166 12.5 6.65833 12.5 5.59999V3.14999C12.5 2.09166 13.1333 1.45833 14.1917 1.45833H16.6417C17.7 1.45833 18.3333 2.09166 18.3333 3.14999V5.59999C18.3333 6.65833 17.7 7.29166 16.6417 7.29166ZM16.825 4.53333C16.725 4.43333 16.5917 4.38333 16.4583 4.38333C16.325 4.38333 16.1917 4.43333 16.0917 4.53333L15.9417 4.68333V2.81666C15.9417 2.52499 15.7083 2.29166 15.4167 2.29166C15.125 2.29166 14.8917 2.52499 14.8917 2.81666V4.68333L14.7417 4.53333C14.5417 4.33333 14.2083 4.33333 14.0083 4.53333C13.8083 4.73333 13.8083 5.06666 14.0083 5.26666L15.05 6.30833C15.0917 6.35 15.15 6.38333 15.2083 6.40833C15.225 6.41666 15.2417 6.41666 15.2583 6.42499C15.3 6.44166 15.3417 6.44999 15.3917 6.44999C15.4083 6.44999 15.425 6.44999 15.4417 6.44999C15.5 6.44999 15.55 6.44166 15.6083 6.41666C15.6167 6.41666 15.6167 6.41666 15.625 6.41666C15.6833 6.39166 15.7333 6.35833 15.775 6.31666C15.7833 6.30833 15.7833 6.30833 15.7917 6.30833L16.8333 5.26666C17.0333 5.06666 17.0333 4.73333 16.825 4.53333Z' fill='%231B5E9E'/%3E%3Cpath d='M1.6665 9.55001V13.7167C1.6665 15.625 3.20817 17.1667 5.1165 17.1667H14.8748C16.7832 17.1667 18.3332 15.6167 18.3332 13.7083V9.55001C18.3332 8.99167 17.8832 8.54167 17.3248 8.54167H2.67484C2.1165 8.54167 1.6665 8.99167 1.6665 9.55001ZM6.6665 14.375H4.99984C4.65817 14.375 4.37484 14.0917 4.37484 13.75C4.37484 13.4083 4.65817 13.125 4.99984 13.125H6.6665C7.00817 13.125 7.2915 13.4083 7.2915 13.75C7.2915 14.0917 7.00817 14.375 6.6665 14.375ZM12.0832 14.375H8.74984C8.40817 14.375 8.12484 14.0917 8.12484 13.75C8.12484 13.4083 8.40817 13.125 8.74984 13.125H12.0832C12.4248 13.125 12.7082 13.4083 12.7082 13.75C12.7082 14.0917 12.4248 14.375 12.0832 14.375Z' fill='%231B5E9E'/%3E%3Cpath d='M11.2498 3.84166V6.28333C11.2498 6.84166 10.7998 7.29166 10.2415 7.29166H2.67484C2.10817 7.29166 1.6665 6.82499 1.6665 6.26666C1.67484 5.32499 2.04984 4.46666 2.67484 3.84166C3.29984 3.21666 4.1665 2.83333 5.1165 2.83333H10.2415C10.7998 2.83333 11.2498 3.28333 11.2498 3.84166Z' fill='%231B5E9E'/%3E%3C/svg%3E");
}

.nav-icon-personal-account {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 10.2222C12.2091 10.2222 14 8.43137 14 6.22223C14 4.01309 12.2091 2.22223 10 2.22223C7.79086 2.22223 6 4.01309 6 6.22223C6 8.43137 7.79086 10.2222 10 10.2222Z' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.1585 17.8333C17.1585 14.8848 13.9501 12.5 10.0001 12.5C6.05013 12.5 2.8418 14.8848 2.8418 17.8333' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-link:hover .nav-icon-personal-account,
.nav-link.active .nav-icon-personal-account {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 10.2222C12.2091 10.2222 14 8.43137 14 6.22223C14 4.01309 12.2091 2.22223 10 2.22223C7.79086 2.22223 6 4.01309 6 6.22223C6 8.43137 7.79086 10.2222 10 10.2222Z' fill='%231B5E9E'/%3E%3Cpath d='M9.99995 11.6667C5.71318 11.6667 2.22217 14.6533 2.22217 18.3333C2.22217 18.5822 2.41041 18.7778 2.64999 18.7778H17.3499C17.5895 18.7778 17.7777 18.5822 17.7777 18.3333C17.7777 14.6533 14.2867 11.6667 9.99995 11.6667Z' fill='%231B5E9E'/%3E%3C/svg%3E");
}

.nav-icon-withdrawal-account {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M1.6665 2.22223H18.3332' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M3.11133 2.22223L16.8891 2.22223V14.2578C16.8891 15.4899 16.8891 16.106 16.6493 16.5766C16.4384 16.9905 16.1018 17.3271 15.6879 17.538C15.2173 17.7778 14.6012 17.7778 13.3691 17.7778H6.63133C5.39921 17.7778 4.78315 17.7778 4.31255 17.538C3.89859 17.3271 3.56204 16.9905 3.35111 16.5766C3.11133 16.106 3.11133 15.4899 3.11133 14.2578L3.11133 2.22223Z' stroke='%234A5C64' stroke-width='1.5'/%3E%3Cpath d='M10 7.22223V12.2222L11.6667 10.5556' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.0002 12.2222L8.3335 10.5556' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-link:hover .nav-icon-withdrawal-account,
.nav-link.active .nav-icon-withdrawal-account {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M1.6665 2.22223H18.3332' stroke='%231B5E9E' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M17.6387 13.8672C17.6387 14.5388 17.6398 15.0882 17.6035 15.5332C17.5664 15.987 17.487 16.3995 17.291 16.7842C16.9847 17.3851 16.4955 17.8735 15.8945 18.1797C15.5098 18.3757 15.0984 18.4551 14.6445 18.4922C14.1993 18.5286 13.6496 18.5283 12.9775 18.5283H7.02246C6.35042 18.5283 5.80068 18.5285 5.35547 18.4922C4.90175 18.4551 4.49007 18.3756 4.10547 18.1797C3.50472 17.8735 3.01621 17.3849 2.70996 16.7842C2.51396 16.3995 2.43457 15.987 2.39746 15.5332C2.36113 15.0882 2.36133 14.5389 2.36133 13.8672V1.47266H17.6387V13.8672ZM10 6.47266C9.58579 6.47266 9.25 6.80844 9.25 7.22266V10.4121L8.86328 10.0254C8.57043 9.73271 8.09559 9.73271 7.80273 10.0254C7.51028 10.3183 7.51013 10.7932 7.80273 11.0859L9.46973 12.7529C9.4799 12.7631 9.49135 12.7718 9.50195 12.7812C9.51731 12.795 9.53327 12.8078 9.5498 12.8203C9.56367 12.8308 9.5774 12.8412 9.5918 12.8506C9.62987 12.8753 9.66992 12.8982 9.71289 12.916C9.75806 12.9347 9.80482 12.9466 9.85156 12.9561C9.85708 12.9572 9.86263 12.958 9.86816 12.959C9.90685 12.9659 9.94551 12.969 9.98438 12.9697C9.99221 12.9699 9.99998 12.9708 10.0078 12.9707C10.0969 12.9697 10.1845 12.9528 10.2676 12.9209C10.2803 12.9161 10.2922 12.9098 10.3047 12.9043C10.3338 12.8913 10.3622 12.8771 10.3896 12.8604C10.4041 12.8515 10.4187 12.8429 10.4326 12.833C10.4408 12.8272 10.4491 12.8216 10.457 12.8154C10.4624 12.8113 10.4684 12.808 10.4736 12.8037L10.5303 12.7529L12.1973 11.0859C12.4898 10.7931 12.4898 10.3182 12.1973 10.0254C11.9045 9.73261 11.4296 9.73282 11.1367 10.0254L10.75 10.4121V7.22266C10.75 6.80844 10.4142 6.47266 10 6.47266Z' fill='%231B5E9E'/%3E%3C/svg%3E");
}

.nav-icon-favorite {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg clip-path='url(%23clip0_9_1072)'%3E%3Cpath d='M7.7085 7.54167C9.19183 8.08334 10.8085 8.08334 12.2918 7.54167' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.0166 1.66667H5.98327C4.20827 1.66667 2.7666 3.11667 2.7666 4.88334V16.625C2.7666 18.125 3.8416 18.7583 5.15827 18.0333L9.22493 15.775C9.65827 15.5333 10.3583 15.5333 10.7833 15.775L14.8499 18.0333C16.1666 18.7667 17.2416 18.1333 17.2416 16.625V4.88334C17.2333 3.11667 15.7916 1.66667 14.0166 1.66667Z' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.0166 1.66667H5.98327C4.20827 1.66667 2.7666 3.11667 2.7666 4.88334V16.625C2.7666 18.125 3.8416 18.7583 5.15827 18.0333L9.22493 15.775C9.65827 15.5333 10.3583 15.5333 10.7833 15.775L14.8499 18.0333C16.1666 18.7667 17.2416 18.1333 17.2416 16.625V4.88334C17.2333 3.11667 15.7916 1.66667 14.0166 1.66667Z' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_9_1072'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.nav-link:hover .nav-icon-favorite,
.nav-link.active .nav-icon-favorite {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg clip-path='url(%23clip0_9_1079)'%3E%3Cpath d='M14.0166 1.66667H5.98327C4.20827 1.66667 2.7666 3.11667 2.7666 4.88334V16.625C2.7666 18.125 3.8416 18.7583 5.15827 18.0333L9.22493 15.775C9.65827 15.5333 10.3583 15.5333 10.7833 15.775L14.8499 18.0333C16.1666 18.7667 17.2416 18.1333 17.2416 16.625V4.88334C17.2333 3.11667 15.7916 1.66667 14.0166 1.66667ZM12.5083 8.125C11.6999 8.41667 10.8499 8.56667 9.99994 8.56667C9.14994 8.56667 8.29993 8.41667 7.4916 8.125C7.1666 8.00834 6.99994 7.65 7.1166 7.32501C7.2416 7 7.59994 6.83334 7.92494 6.95001C9.2666 7.43334 10.7416 7.43334 12.0833 6.95001C12.4083 6.83334 12.7666 7 12.8833 7.32501C12.9999 7.65 12.8333 8.00834 12.5083 8.125Z' fill='%231B5E9E'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_9_1079'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.nav-icon-service-guide {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg clip-path='url(%23clip0_10_1278)'%3E%3Cpath d='M2.9165 15V5.83334C2.9165 2.50001 3.74984 1.66667 7.08317 1.66667H12.9165C16.2498 1.66667 17.0832 2.50001 17.0832 5.83334V14.1667C17.0832 14.2833 17.0832 14.4 17.0748 14.5167' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.2915 12.5H17.0832V15.4167C17.0832 17.025 15.7748 18.3333 14.1665 18.3333H5.83317C4.22484 18.3333 2.9165 17.025 2.9165 15.4167V14.875C2.9165 13.5667 3.98317 12.5 5.2915 12.5Z' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.6665 5.83333H13.3332' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.6665 8.75H10.8332' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_10_1278'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.nav-link:hover .nav-icon-service-guide,
.nav-link.active .nav-icon-service-guide {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg clip-path='url(%23clip0_10_1285)'%3E%3Cpath d='M17.0832 13.3333V15.4167C17.0832 17.025 15.7748 18.3333 14.1665 18.3333H5.83317C4.22484 18.3333 2.9165 17.025 2.9165 15.4167V14.875C2.9165 13.5667 3.98317 12.5 5.2915 12.5H16.2498C16.7082 12.5 17.0832 12.875 17.0832 13.3333Z' fill='%231B5E9E'/%3E%3Cpath d='M12.9165 1.66667H7.08317C3.74984 1.66667 2.9165 2.50001 2.9165 5.83334V12.15C3.54984 11.5917 4.38317 11.25 5.2915 11.25H16.2498C16.7082 11.25 17.0832 10.875 17.0832 10.4167V5.83334C17.0832 2.50001 16.2498 1.66667 12.9165 1.66667ZM10.8332 8.95834H6.6665C6.32484 8.95834 6.0415 8.675 6.0415 8.33334C6.0415 7.99167 6.32484 7.70834 6.6665 7.70834H10.8332C11.1748 7.70834 11.4582 7.99167 11.4582 8.33334C11.4582 8.675 11.1748 8.95834 10.8332 8.95834ZM13.3332 6.04167H6.6665C6.32484 6.04167 6.0415 5.75834 6.0415 5.41667C6.0415 5.075 6.32484 4.79167 6.6665 4.79167H13.3332C13.6748 4.79167 13.9582 5.075 13.9582 5.41667C13.9582 5.75834 13.6748 6.04167 13.3332 6.04167Z' fill='%231B5E9E'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_10_1285'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.nav-icon-signup-guide {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 10.2222C12.2091 10.2222 14 8.43137 14 6.22223C14 4.01309 12.2091 2.22223 10 2.22223C7.79086 2.22223 6 4.01309 6 6.22223C6 8.43137 7.79086 10.2222 10 10.2222Z' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.8418 17.8333C2.8418 14.8848 6.05013 12.5 10.0001 12.5C10.7993 12.5 11.5681 12.5976 12.2861 12.7778' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.3331 15.5556H13.8887' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.1108 17.7778V13.3333' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-link:hover .nav-icon-signup-guide,
.nav-link.active .nav-icon-signup-guide {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 10.2222C12.2091 10.2222 14 8.43137 14 6.22223C14 4.01309 12.2091 2.22223 10 2.22223C7.79086 2.22223 6 4.01309 6 6.22223C6 8.43137 7.79086 10.2222 10 10.2222Z' fill='%231B5E9E'/%3E%3Cpath d='M10 11.667C14.2866 11.667 17.7771 14.6532 17.7773 18.333C17.7773 18.5819 17.5892 18.7773 17.3496 18.7773H2.65039C2.41081 18.7773 2.22266 18.5819 2.22266 18.333C2.22286 14.6532 5.71336 11.667 10 11.667ZM10 12.9727C9.58579 12.9727 9.25 13.3084 9.25 13.7227V14.6387H8.33301C7.91902 14.6388 7.58313 14.9747 7.58301 15.3887C7.58301 15.8028 7.91894 16.1385 8.33301 16.1387H9.25V17.0557C9.25023 17.4697 9.58593 17.8057 10 17.8057C10.4141 17.8057 10.7498 17.4697 10.75 17.0557V16.1387H11.666C12.0802 16.1387 12.416 15.8029 12.416 15.3887C12.4159 14.9746 12.0802 14.6387 11.666 14.6387H10.75V13.7227C10.75 13.3084 10.4142 12.9727 10 12.9727Z' fill='%231B5E9E'/%3E%3C/svg%3E");
}

.nav-icon-notice {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.49984 18.3333H12.4998C16.6665 18.3333 18.3332 16.6667 18.3332 12.5V7.5C18.3332 3.33334 16.6665 1.66667 12.4998 1.66667H7.49984C3.33317 1.66667 1.6665 3.33334 1.6665 7.5V12.5C1.6665 16.6667 3.33317 18.3333 7.49984 18.3333Z' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 7V10.5' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M10 13V13.0001' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.nav-link:hover .nav-icon-notice,
.nav-link.active .nav-icon-notice {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M13.4912 1.66699C16.5245 1.66699 18.3335 3.47546 18.3252 6.50879V13.4912C18.3252 16.5245 16.5167 18.333 13.4834 18.333H6.50879C3.47548 18.333 1.66702 16.525 1.66699 13.4834V6.50879C1.66699 3.47546 3.47546 1.66699 6.50879 1.66699H13.4912ZM10 12.25C9.58579 12.25 9.25 12.5858 9.25 13C9.25 13.4142 9.58579 13.75 10 13.75C10.4142 13.75 10.75 13.4142 10.75 13C10.75 12.5858 10.4142 12.25 10 12.25ZM10 6.25C9.58579 6.25 9.25 6.58579 9.25 7V10.5C9.25 10.9142 9.58579 11.25 10 11.25C10.4142 11.25 10.75 10.9142 10.75 10.5V7C10.75 6.58579 10.4142 6.25 10 6.25Z' fill='%231B5E9E'/%3E%3C/svg%3E");
}

.nav-icon-faq {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M16.6665 10.1666V11.5833C16.6665 14.2083 15.1665 15.3333 12.9165 15.3333H5.4165C3.1665 15.3333 1.6665 14.2083 1.6665 11.5833V7.08333C1.6665 4.45833 3.1665 3.33333 5.4165 3.33333H7.6665C7.55817 3.64999 7.49984 3.99999 7.49984 4.37499V7.62502C7.49984 8.43335 7.7665 9.11667 8.2415 9.59167C8.7165 10.0667 9.39984 10.3333 10.2082 10.3333V11.4917C10.2082 11.9167 10.6915 12.175 11.0498 11.9416L13.4582 10.3333H15.6248C15.9998 10.3333 16.3498 10.275 16.6665 10.1666Z' stroke='%234A5C64' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.3333 4.375V7.62502C18.3333 8.86669 17.7 9.79996 16.6667 10.1666C16.35 10.275 16 10.3334 15.625 10.3334H13.4583L11.05 11.9416C10.6917 12.175 10.2083 11.9167 10.2083 11.4917V10.3334C9.4 10.3334 8.71667 10.0667 8.24167 9.59168C7.76667 9.11668 7.5 8.43336 7.5 7.62502V4.375C7.5 4 7.55833 3.65 7.66667 3.33334C8.03333 2.30001 8.96667 1.66667 10.2083 1.66667H15.625C17.25 1.66667 18.3333 2.75 18.3333 4.375Z' stroke='%234A5C64' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.1665 18.3333H12.1665' stroke='%234A5C64' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.1665 15.3334V18.3333' stroke='%234A5C64' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.4129 6.04167H15.4204' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.0799 6.04167H13.0874' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.7459 6.04167H10.7534' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-link:hover .nav-icon-faq,
.nav-link.active .nav-icon-faq {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.6248 11.5833H14.1369C13.9389 11.5833 13.7453 11.6421 13.5807 11.7523L11.7415 12.9833C11.4415 13.1833 11.0915 13.275 10.7498 13.275C10.4582 13.275 10.1665 13.2083 9.89984 13.0583C9.53447 12.8652 9.25737 12.525 9.1013 12.1359C8.93655 11.7252 8.66016 11.334 8.26636 11.1321C7.92802 10.9586 7.62155 10.7384 7.35817 10.475C6.6415 9.75833 6.24984 8.74999 6.24984 7.62499V4.37499V4.16666C6.24984 3.70642 5.87674 3.33333 5.4165 3.33333C3.1665 3.33333 1.6665 4.45833 1.6665 7.08333V11.5833C1.6665 14.2083 3.1665 15.3333 5.4165 15.3333H8.5415V17.7083H6.1665C5.82484 17.7083 5.5415 17.9917 5.5415 18.3333C5.5415 18.675 5.82484 18.9583 6.1665 18.9583H12.1665C12.5082 18.9583 12.7915 18.675 12.7915 18.3333C12.7915 17.9917 12.5082 17.7083 12.1665 17.7083H9.7915V15.3333H12.9165C14.858 15.3333 16.2411 14.4957 16.5838 12.5795C16.6811 12.0358 16.2188 11.5833 15.6665 11.5833H15.6248Z' fill='%231B5E9E'/%3E%3Cpath d='M15.625 1.66667H10.2083C8.96667 1.66667 8.03333 2.30001 7.66667 3.33334C7.55833 3.65001 7.5 4.00001 7.5 4.37501V7.62501C7.5 8.43334 7.76667 9.11667 8.24167 9.59167C8.71667 10.0667 9.4 10.3333 10.2083 10.3333V11.4917C10.2083 11.9167 10.6917 12.175 11.05 11.9417L13.4583 10.3333H15.625C16 10.3333 16.35 10.275 16.6667 10.1667C17.7 9.8 18.3333 8.86667 18.3333 7.62501V4.37501C18.3333 2.75001 17.25 1.66667 15.625 1.66667ZM10.5167 6.66667C10.1667 6.66667 9.89167 6.38334 9.89167 6.04167C9.89167 5.70001 10.1667 5.41667 10.5167 5.41667C10.8667 5.41667 11.1417 5.70001 11.1417 6.04167C11.1417 6.38334 10.8667 6.66667 10.5167 6.66667ZM12.8667 6.66667C12.5167 6.66667 12.2417 6.38334 12.2417 6.04167C12.2417 5.70001 12.525 5.41667 12.8667 5.41667C13.2083 5.41667 13.4917 5.70001 13.4917 6.04167C13.4917 6.38334 13.2083 6.66667 12.8667 6.66667ZM15.2083 6.66667C14.8583 6.66667 14.5833 6.38334 14.5833 6.04167C14.5833 5.70001 14.8667 5.41667 15.2083 5.41667C15.55 5.41667 15.8333 5.70001 15.8333 6.04167C15.8333 6.38334 15.55 6.66667 15.2083 6.66667Z' fill='%231B5E9E'/%3E%3Cpath d='M18.3333 4.37501V7.62501C18.3333 8.86667 17.7 9.8 16.6667 10.1667C16.35 10.275 16 10.3333 15.625 10.3333H13.4583L11.05 11.9417C10.6917 12.175 10.2083 11.9167 10.2083 11.4917V10.3333C9.4 10.3333 8.71667 10.0667 8.24167 9.59167C7.76667 9.11667 7.5 8.43334 7.5 7.62501V4.37501C7.5 4.00001 7.55833 3.65001 7.66667 3.33334C8.03333 2.30001 8.96667 1.66667 10.2083 1.66667H15.625C17.25 1.66667 18.3333 2.75001 18.3333 4.37501Z' fill='%231B5E9E'/%3E%3C/svg%3E");
}

.nav-icon-inquiry {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.08317 15.8333H6.6665C3.33317 15.8333 1.6665 15 1.6665 10.8333V6.66667C1.6665 3.33334 3.33317 1.66667 6.6665 1.66667H13.3332C16.6665 1.66667 18.3332 3.33334 18.3332 6.66667V10.8333C18.3332 14.1667 16.6665 15.8333 13.3332 15.8333H12.9165C12.6582 15.8333 12.4082 15.9583 12.2498 16.1667L10.9998 17.8333C10.4498 18.5667 9.54984 18.5667 8.99984 17.8333L7.74984 16.1667C7.6165 15.9833 7.30817 15.8333 7.08317 15.8333Z' stroke='%234A5C64' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.3305 9.16667H13.338' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.99607 9.16667H10.0036' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.66209 9.16667H6.66957' stroke='%234A5C64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-link:hover .nav-icon-inquiry,
.nav-link.active .nav-icon-inquiry {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M14.1665 1.66667H5.83317C3.53317 1.66667 1.6665 3.52501 1.6665 5.81667V10.8V11.6333C1.6665 13.925 3.53317 15.7833 5.83317 15.7833H7.08317C7.30817 15.7833 7.60817 15.9333 7.74984 16.1167L8.99984 17.775C9.54984 18.5083 10.4498 18.5083 10.9998 17.775L12.2498 16.1167C12.4082 15.9083 12.6582 15.7833 12.9165 15.7833H14.1665C16.4665 15.7833 18.3332 13.925 18.3332 11.6333V5.81667C18.3332 3.52501 16.4665 1.66667 14.1665 1.66667ZM6.6665 10C6.19984 10 5.83317 9.625 5.83317 9.16667C5.83317 8.70834 6.20817 8.33334 6.6665 8.33334C7.12484 8.33334 7.49984 8.70834 7.49984 9.16667C7.49984 9.625 7.13317 10 6.6665 10ZM9.99984 10C9.53317 10 9.1665 9.625 9.1665 9.16667C9.1665 8.70834 9.5415 8.33334 9.99984 8.33334C10.4582 8.33334 10.8332 8.70834 10.8332 9.16667C10.8332 9.625 10.4665 10 9.99984 10ZM13.3332 10C12.8665 10 12.4998 9.625 12.4998 9.16667C12.4998 8.70834 12.8748 8.33334 13.3332 8.33334C13.7915 8.33334 14.1665 8.70834 14.1665 9.16667C14.1665 9.625 13.7998 10 13.3332 10Z' fill='%231B5E9E'/%3E%3C/svg%3E");
}

.nav-link:hover {
  color: var(--primary-heavy);
  background-color: var(--white);
}

.nav-link.active {
  color: var(--primary-heavy);
  font-weight: 600;
  background-color: #E3F2FD;
  border-right: none;
}

.nav-label {
  padding: var(--s5) var(--s4) var(--s2);
  font-size: var(--text-2xs);
  font-weight: 800;
  color: var(--text-soft);
  text-transform: uppercase;
}

/* 메인 + guest일때만 노출, Mobile-only Sections */
.guest-sidebar-mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .guest-sidebar-mobile-only {
    display: block;
  }
}
.guest-lang-group {
  margin-bottom: var(--s4);
}

.guest-lang-label {
  margin-bottom: var(--s2);
  display: block;
  font-size: var(--text-sm);
  color: var(--text-soft);
  font-weight: 500;
}

.guest-lang-select {
  padding: 0 var(--s4);
  width: var(--full);
  height: 44px;
  font-size: var(--text-sm);
  color: var(--text-heavy);
  -webkit-text-fill-color: #A4B7C0;
  font-weight: 500;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid var(--border-default);
  border-radius: var(--s2);
  background: var(--white) url(var(--icon-select)) no-repeat right var(--s4) center;
}

.btn-full {
  width: var(--full);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 44px;
}

/* ===== Layout ===== */
/* ===== Responsive - Desktop : padding: 0 var(--s6) ===== */
/* ===== Responsive - Tablet = max-width: 1024 : padding: 0 var(--s5) ===== */
/* ===== Responsive - Mobile = max-width: 768 : padding: 0 var(--s4) ===== */
/* ===== Responsive - Small Mobile = max-width: 480 : padding: 0 var(--s4) ===== */
html,
body {
  overflow-x: hidden;
  width: var(--full);
  max-width: var(--full-dvw);
  position: relative;
}

body.wh-full {
  width: var(--full);
  height: var(--full-dvh);
  min-height: var(--full-dvh);
}
body.db-body, body.login-page {
  background-color: var(--bg-default);
}

.db-body {
  padding-top: var(--header-h-md);
  min-height: var(--full-dvh);
}

@media (max-width: 1152px) {
  .hide-pc {
    display: none;
  }
}
@media (max-width: 768px) {
  .db-body {
    padding-top: var(--header-h);
  }
}
/* ===== Container : header, Content, Footer  ===== */
.container {
  padding: 0 var(--s6);
  margin: 0 auto;
  width: var(--full);
  max-width: var(--max-w);
  overflow: hidden;
}
.container.visible {
  overflow: visible;
}

@media (max-width: 1024px) {
  .container {
    padding: 0 var(--s6);
  }
}
@media (max-width: 480px) {
  .container {
    padding: 0 var(--s4);
  }
  .container.visible {
    padding: 0;
    overflow: visible;
  }
  .container.visible .banner-slider {
    padding: 0 var(--s6);
  }
}
/* ===== .db-main-container.Container ===== */
.db-main-container {
  padding-top: var(--s10);
  padding-bottom: var(--s5);
}

/* Utility page: 고정 헤더 높이만큼 상단 여백 확보 (비로그인 시 db-body 없음) */
body:not(.db-body) #utilityView {
  padding-top: calc(var(--header-h-md) + var(--s10));
}
@media (max-width: 768px) {
  body:not(.db-body) #utilityView {
    padding-top: calc(var(--header-h) + var(--s10));
  }
}

/* ===== Sub Inner Content ===== */
.db-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: calc(var(--full) - var(--sidebarContainer-w));
}

.db-page-header {
  margin-bottom: var(--s8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 768px) {
  .db-page-header {
    margin-bottom: var(--s6);
  }
}
.db-page-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-heavy);
  margin: 0;
}

/* ===== Inner White Content ===== */
.mypage-main .db-content-card,
.remit-main .db-content-card,
.sub-card-wrapper .db-content-card {
  margin-top: var(--white-section-spacing);
  background-color: var(--white);
  border-radius: var(--radius-xl);
  -webkit-box-shadow: var(--shadow);
          box-shadow: var(--shadow);
}

.login-card {
  margin-top: var(--white-section-spacing);
  background-color: var(--white);
  border-radius: var(--radius-xl);
  -webkit-box-shadow: var(--shadow);
          box-shadow: var(--shadow);
}

@media (max-width: 768px) {
  .mypage-main .db-content-card,
  .remit-main .db-content-card,
  .sub-card-wrapper .db-content-card {
    margin-top: var(--mobile-white-section-spacing);
  }
  .login-card {
    margin-top: var(--mobile-white-section-spacing);
  }
}
.remit-main .db-content-card:first-child,
.sub-card-wrapper .db-content-card:first-child {
  margin-top: 0;
  padding: 0;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.db-content-card {
  padding: var(--s8);
  background-color: var(--white);
  border-radius: var(--radius-xl);
  -webkit-box-shadow: var(--shadow);
          box-shadow: var(--shadow);
}
.db-content-card .remit-form-section:last-of-type {
  margin-bottom: 0;
}
.db-content-card .form-sec:last-of-type {
  margin-bottom: 0;
}
.db-content-card .form-sec .field-item:last-of-type,
.db-content-card .form-sec .form-row:last-of-type,
.db-content-card .form-sec .form-row-2:last-of-type,
.db-content-card .form-sec .form-row-3:last-of-type,
.db-content-card .form-sec .form-row-full:last-of-type {
  margin-bottom: 0;
}

.login-card {
  padding: var(--s14);
  width: var(--full);
}
.login-card .form-sec:last-of-type {
  margin-bottom: 0;
}
.login-card .field-item:last-of-type,
.login-card .form-row:last-of-type,
.login-card .form-row-2:last-of-type,
.login-card .form-row-3:last-of-type,
.login-card .form-row-full:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .login-card {
    padding: var(--s8);
  }
}
@media (max-width: 768px) {
  .db-page-title {
    font-size: var(--text-2xl);
  }
}
@media (max-width: 480px) {
  .login-card,
  .db-content-card {
    padding: var(--s6);
    border-radius: var(--radius-lg) !important;
  }
  .db-page-title {
    font-size: var(--text-xl);
  }
}
.db-layout-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: relative;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  min-height: calc(var(--full-dvh) - 20dvh);
}
.db-layout-flex.nowrap {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.db-grid {
  margin-top: var(--s5);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: var(--s5);
}
.db-grid.col2 {
  grid-template-columns: repeat(2, 1fr);
}
.db-grid.col3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.db-grid > .calculator-card {
  max-width: var(--full) !important;
  -webkit-box-flex: 0 !important;
      -ms-flex: 0 1 auto !important;
          flex: 0 1 auto !important;
}

@media (max-width: 1024px) {
  .db-grid {
    margin-top: var(--s4);
    grid-template-columns: repeat(1, 1fr);
    gap: var(--s4);
  }
  .db-grid.col2 {
    grid-template-columns: repeat(1, 1fr);
  }
  .db-grid.col3 {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (max-width: 480px) {
  .db-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-width: 320px;
    gap: 15px;
  }
  .db-grid-3col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-width: 320px;
    gap: 15px;
  }
  .db-grid-2col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-width: 320px;
    gap: 15px;
  }
}
/* ===== form Layout ===== */
.form-sec {
  margin-bottom: 30px;
}
.form-sec:last-of-type {
  margin-bottom: 0;
}
.form-sec.hidden {
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.form-sec-head {
  margin-bottom: var(--s6);
  font-size: var(--text-lg);
  color: var(--text-heavy);
  font-weight: 700;
  text-align: left;
}

#domesticDocSection .form-sec-head,
#foreignDocSection .form-sec-head {
  margin-top: var(--s10);
  font-size: var(--text-md);
}

#ocrResultSection .form-sec-head {
  margin-top: 0;
  margin-bottom: var(--s4);
  font-size: var(--text-md);
}
#ocrResultSection .form-row-2 {
  margin-bottom: var(--s3);
}

.form-row-full,
.form-row,
.form-row-2,
.form-row-3 {
  width: var(--full);
  margin-bottom: var(--s6);
}
.form-row-full.no-mb,
.form-row.no-mb,
.form-row-2.no-mb,
.form-row-3.no-mb {
  margin-bottom: 0;
}

.form-row,
.form-row-2,
.form-row-3 {
  display: grid;
}

.form-row {
  grid-template-columns: repeat(1, 1fr);
  gap: var(--s4);
}

.form-row-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
}

.form-row-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

.field-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.field-item.align-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.field-item.flex-2 {
  grid-column: span 2;
}

.field-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  width: var(--full);
  height: var(--input-h);
}
.field-flex.h-52 {
  gap: var(--s6);
}

.field-flex.full-width .login-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  width: var(--full);
}

@media (max-width: 860px) {
  .hide-pc {
    display: inline;
  }
  .form-row,
  .form-row-3,
  .form-row-2,
  .purpose-grid-full {
    grid-template-columns: 1fr;
  }
  .field-item.flex-2 {
    grid-column: auto;
  }
}
.bank-group {
  margin-bottom: var(--s8);
  background-color: transparent;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.bank-group .form-sec-head {
  margin-bottom: var(--s3);
}

/* Date Picker Custom Style */
.empty-box {
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 18.75rem;
}
.empty-box:before {
  content: "";
  margin: var(--s5) 0;
  width: var(--s16);
  height: var(--s16);
  background-image: var(--icon-nodata);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.empty-box p {
  font-size: var(--text-sm);
  color: var(--text-default);
}

.guide-note {
  margin-top: var(--s4);
}
.guide-note.caution {
  padding: var(--s6);
  background-color: var(--bg-negative);
  border-radius: var(--radius-md);
}
.guide-note.caution p {
  color: var(--negative);
}
.guide-note.caution p:before {
  background-image: var(--icon-error);
}
.guide-note.caution ul li {
  color: var(--text-strong);
}
.guide-note p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  color: var(--primary-heavy);
  font-weight: 600;
}
.guide-note p ~ .guide-list {
  margin-top: var(--s4);
}
.guide-note p:before {
  content: "";
  background-image: var(--icon-info-navy);
  background-size: contain;
  background-repeat: no-repeat;
  width: var(--s5);
  height: var(--s5);
  aspect-ratio: 1/1;
}

.guide-list {
  padding-left: 0;
}
.guide-list li {
  position: relative;
  padding-left: var(--s5);
  color: var(--text-default);
}
.guide-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--text-default);
  font-weight: bold;
}

.field-info,
.field-error {
  margin-top: var(--s2);
  display: block;
  padding-left: var(--s5);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.5;
  background-repeat: no-repeat;
  background-size: var(--s4) var(--s4);
  background-position: 0 1px;
}

.field-info {
  color: var(--primary-default);
  background-image: var(--icon-info);
}

.field-error {
  color: var(--negative);
  background-image: var(--icon-error);
}

.date-picker-custom {
  width: var(--full);
  min-height: var(--input-h);
  color: var(--text-heavy);
  font-weight: 500;
  text-align: left;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: var(--white);
  background-image: var(--icon-datepicker);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: var(--s4);
  border-radius: var(--radius);
  outline: none;
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

.date-picker-custom::-webkit-calendar-picker-indicator {
  opacity: 0;
  pointer-events: none;
}

.date-picker-custom::-webkit-datetime-edit,
.date-picker-custom::-webkit-datetime-edit-fields-wrapper {
  text-align: left;
}

.date-picker-custom::-webkit-datetime-edit-fields-wrapper {
  -webkit-box-pack: start;
          justify-content: flex-start;
}

.date-picker-custom:focus {
  border-color: var(--primary-default) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(0, 160, 220, 0.1);
          box-shadow: 0 0 0 3px rgba(0, 160, 220, 0.1);
}

.banner-slide-1 .banner-content {
  background: -webkit-gradient(linear, left top, right top, from(#786BF4), to(#6053E0));
  background: linear-gradient(90deg, #786BF4 0%, #6053E0 100%);
}

.banner-slide-2 .banner-content {
  background: -webkit-gradient(linear, left top, right top, from(#F9C669), to(#FFD486));
  background: linear-gradient(90deg, #F9C669 0%, #FFD486 100%);
}

.banner-slide-3 .banner-content {
  background: -webkit-gradient(linear, left top, right top, from(#6BC8C6), to(#41CAC7));
  background: linear-gradient(90deg, #6BC8C6 0%, #41CAC7 100%);
}

.sub-visual.company {
  background: -webkit-gradient(linear, left top, right top, from(#4C8ADB), to(#165297));
  background: linear-gradient(90deg, #4C8ADB 0%, #165297 100%);
}
.sub-visual.guide {
  background: -webkit-gradient(linear, left top, right top, from(#3E5597), to(#243668));
  background: linear-gradient(90deg, #3E5597 0%, #243668 100%);
}
.sub-visual.invite {
  background: -webkit-gradient(linear, left top, right top, from(#119CED), to(#13B8E1));
  background: linear-gradient(90deg, #119CED 0%, #13B8E1 100%);
}
.sub-visual.join {
  background: -webkit-gradient(linear, left top, right top, from(#86A3C9), to(#5378A7));
  background: linear-gradient(90deg, #86A3C9 0%, #5378A7 100%);
}
.sub-visual.coupon {
  background: -webkit-gradient(linear, left top, right top, from(#786BF4), to(#6053E0));
  background: linear-gradient(90deg, #786BF4 0%, #6053E0 100%);
}

/* ===== Banner Slider ===== */
.banner-slider {
  position: relative;
  width: var(--full);
}

.banner-slides {
  position: relative;
  width: var(--full);
  height: var(--full);
}

.banner-slide {
  width: var(--full);
  height: var(--full);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}
.banner-slide a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: var(--full);
  height: var(--full);
}

.banner-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 var(--s14);
  width: var(--full);
  height: 300px;
  margin: 0 auto;
  text-align: left;
  border-radius: var(--radius-xl);
  position: relative;
}

.banner-content h2 {
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: 1.22;
  color: var(--white) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.banner-content p {
  opacity: 0.95;
  margin-top: var(--s8);
  font-size: var(--text-lg);
  font-weight: 400;
  max-width: 600px;
  color: var(--white) !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.banner-text-group {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  z-index: 2;
}

.db-banner-content .banner-text-group {
  padding-left: 30px;
}

.banner-image-group {
  position: absolute;
  top: 50%;
  right: var(--s14);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 240px;
  z-index: 1;
}

.banner-image-group img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}

@media (max-width: 768px) {
  .banner-content {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: var(--s10) var(--s6);
    height: 20.5rem;
  }
  .banner-image-group {
    top: auto;
    bottom: var(--s10);
    right: var(--s6);
    height: 10.625rem;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.banner-slide:hover .banner-image-group img {
  -webkit-transform: translateY(-5px) scale(1.02);
          transform: translateY(-5px) scale(1.02);
}

.banner-controls {
  position: absolute;
  bottom: var(--s5);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s4);
  z-index: 10;
}

.banner-control-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.banner-control-btn span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: var(--s10);
  height: var(--s10);
}
.banner-control-btn span svg {
  width: var(--s5);
  height: var(--s5);
  color: var(--text-heavy);
}
.banner-control-btn:hover {
  background-color: var(--white);
  -webkit-box-shadow: 0 var(--s1) 15px rgba(0, 0, 0, 0.2);
          box-shadow: 0 var(--s1) 15px rgba(0, 0, 0, 0.2);
}
.banner-control-btn .hidden {
  display: none;
}

.banner-indicators {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--s2);
}

.banner-indicator {
  width: var(--s3);
  height: var(--s3);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  padding: 0;
}
.banner-indicator:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.banner-indicator.active {
  width: 1.875rem;
  border-radius: var(--s3);
  background-color: var(--white);
}

.db-body .banner-slider {
  margin-top: 0;
}
.db-body .banner-content {
  height: 200px;
}
.db-body .banner-content h2 {
  margin-bottom: var(--s2);
  font-size: var(--text-2xl);
}
.db-body .banner-content p {
  margin-top: var(--s2);
  font-size: var(--text-md);
}
.db-body .banner-image-group {
  height: 150px;
}
.db-body .banner-control-btn span {
  width: var(--s6);
  height: var(--s6);
}
.db-body .banner-control-btn span svg {
  width: var(--s3);
  height: var(--s3);
}
.db-body .banner-indicator {
  width: var(--s2-10);
  height: var(--s2-10);
}
.db-body .banner-indicator.active {
  width: var(--s6);
  border-radius: var(--s2-10);
}

/* Mobile Responsive for Banner */
@media (max-width: 1024px) {
  .banner-content p {
    margin-top: var(--s4);
    width: 65%;
  }
}
@media (max-width: 768px) {
  /* Banner */
  .banner-slider .container {
    width: 500px;
    margin: 0 auto;
  }
  .db-body .banner-content {
    margin: 0;
    height: 20.5rem;
  }
  .banner-content h2 {
    margin-bottom: var(--s2);
    font-size: var(--text-2xl);
  }
  .banner-content p {
    font-size: var(--text-base);
  }
  .banner-text-group {
    text-align: left;
  }
  .banner-controls {
    bottom: var(--s5);
  }
}
.sub-visual {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 300px;
  border-radius: var(--radius-lg);
}
.sub-visual.coupon .banner-content p {
  margin-top: var(--s6);
  font-size: var(--text-sm);
  line-height: 1.57;
}
.sub-visual .banner-content {
  padding-right: 40%;
}
.sub-visual .banner-content h2 {
  font-size: var(--text-3xl);
  line-height: 1.42;
}
.sub-visual .banner-content p {
  margin-top: var(--s6);
}
.sub-visual .banner-content p.sub-text {
  margin-top: var(--s2);
  font-size: var(--text-xs);
}
.sub-visual .banner-content .btn-secondary {
  margin-top: var(--s6);
  color: #776AF3;
  border-color: var(--transparent);
}
.sub-visual .banner-content .btn-secondary:hover:not(:disabled):not(.is-disabled) {
  color: #776AF3;
  border-color: var(--transparent);
}
.sub-visual .banner-content .banner-image-group {
  height: auto;
}

@media (max-width: 768px) {
  .sub-visual {
    height: auto;
  }
  .sub-visual .banner-content {
    padding-right: var(--s6);
  }
  .sub-visual .banner-content h2 {
    font-size: var(--text-2xl);
  }
  .sub-visual .banner-content p {
    margin-top: var(--s4);
  }
  .sub-visual .banner-content .banner-image-group {
    bottom: var(--s6);
    height: 8.625rem;
  }
}
/* ===== Calculator Card : CM_02_01, DB_01_01 ) ===== */
/* ===== Calculator Card : CM_02_01, DB_01_01 ) ===== */
.calculator-card-box,
.calculator-card {
  width: var(--full);
  max-width: 420px;
}

.calculator-card-box {
  position: relative;
}
.calculator-card-box .bg-box {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--full);
  height: var(--full);
}
.calculator-card-box .bg-box > span {
  position: absolute;
}
.calculator-card-box .bg-box .coin-1 {
  top: 177px;
  left: -180px;
  width: 170px;
  height: 179px;
  background: url("../images/svg/main_coin_1.svg") no-repeat center center;
  background-size: contain;
}
.calculator-card-box .bg-box .coin-2 {
  top: calc(var(--s10) * -1);
  right: -54px;
  width: 99px;
  height: 72px;
  background: url("../images/svg/main_coin_2.svg") no-repeat center center;
  background-size: contain;
}
.calculator-card-box .bg-box .coin-3 {
  bottom: -20px;
  right: -150px;
  width: 170px;
  height: 175px;
  background: url("../images/svg/main_coin_3.svg") no-repeat center center;
  background-size: contain;
}

.calculator-card {
  padding: var(--s8);
  margin: 0 auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background-color: var(--white);
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}
.calculator-card.db {
  max-width: var(--full);
  width: var(--full);
  border-radius: var(--radius);
}

@media (max-width: 1024px) {
  .calculator-card-box,
  .calculator-card {
    max-width: 500px;
  }
}
@media (max-width: 768px) {
  .calculator-card-box .bg-box .coin-1 {
    top: 177px;
    left: -180px;
  }
  .calculator-card-box .bg-box .coin-3 {
    bottom: -40px;
    right: -108px;
  }
}
@media (max-width: 480px) {
  .calculator-card-box {
    padding: 0 var(--s4);
  }
  .calculator-card-box .bg-box .coin-1 {
    left: -140px;
  }
  .calculator-card-box .bg-box .coin-2 {
    top: -50px;
    right: 0;
  }
  .calculator-card-box .bg-box .coin-3 {
    right: -108px;
  }
}
.calculator-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s6);
  font-weight: 600;
  color: var(--text-heavy);
}

.calculator-title::before {
  content: "";
  width: var(--s1);
  height: var(--s5);
  background-color: var(--primary-default);
  border-radius: 2px;
}

.calc-row-header {
  margin-bottom: var(--s3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.calc-row-header .calc-label {
  margin-bottom: 0;
  font-size: var(--text-sm);
  color: var(--text-default);
  display: block;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.calc-row-header .calc-max-amount {
  font-size: var(--text-sm);
  color: var(--primary-heavy);
  font-weight: 700;
}

.calc-input-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: var(--white);
  overflow: visible;
}

.calc-input-group:focus-within {
  border-color: var(--primary-default);
  -webkit-box-shadow: 0 0 0 3px rgba(27, 94, 158, 0.1);
          box-shadow: 0 0 0 3px rgba(27, 94, 158, 0.1);
}

.calc-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0 var(--s4);
  font-size: var(--text-xl);
  color: var(--text-heavy);
  font-weight: 600;
  border: none;
  outline: none;
  background-color: transparent;
  min-width: 0;
}
.calc-input input {
  padding: 0;
}

@media (max-width: 768px) {
  /* Calculator */
  .calc-input {
    font-size: var(--text-xl);
  }
}
@media (max-width: 480px) {
  .calc-row-header {
    margin-bottom: var(--s2);
  }
  /* Calculator */
}
.calc-input-with-symbol {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.calc-currency-symbol-fixed {
  margin-right: var(--s2);
  font-weight: 600;
}

.calc-amount-input {
  border: none;
  outline: none;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1.375rem;
  font-weight: 700;
  background-color: transparent;
}

.calc-amount-input.receive {
  color: var(--primary-default);
}

.calc-fee-box {
  margin: var(--s4) 0;
  padding: var(--s4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--s3);
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f9ff var(--full));
  border-radius: var(--radius-md);
}

.calc-fee-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--text-md);
  font-weight: 600;
}

.calc-fee-total {
  font-size: var(--text-lg);
  color: var(--primary-default);
  font-weight: 700;
}

.calc-fee-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--text-sm);
  color: var(--text-default);
}

.calc-fee-row span:last-child {
  color: var(--text-heavy);
}

.calc-currency,
.calc-currency-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: var(--input-h);
}
.calc-currency > span,
.calc-currency-btn > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 var(--s4);
  gap: var(--s2);
  border-left: 1px solid var(--border-default);
}

@media (max-width: 480px) {
  .calc-currency > span,
  .calc-currency-btn > span {
    gap: var(--s1);
  }
}
.calc-currency-flag {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.calc-currency-code {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-heavy);
  white-space: nowrap;
}

.calc-currency-select {
  min-width: 60px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-heavy);
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0 var(--s7) 0 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237A8E96' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s1) center;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

.calc-currency-select:focus {
  outline: none;
}

/* Custom Currency Dropdown */
.calc-currency-dropdown {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.calc-currency-btn {
  border: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  cursor: pointer;
}
.calc-currency-btn > span {
  position: relative;
}
.calc-currency-btn > span:after {
  margin-left: var(--s1);
  content: "";
  width: var(--s3);
  height: 0.4375rem;
  background-image: var(--icon-select);
  background-size: var(--s3) 0.4375rem;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: 1;
}

.calc-currency-btn:hover {
  background-color: #eef2f1;
}

.calc-currency-btn .calc-currency-flag {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.calc-currency-btn .calc-currency-code {
  font-size: var(--text-sm);
  color: var(--text-heavy);
  font-weight: 600;
}

.calc-currency-arrow {
  color: var(--text-soft);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.calc-currency-dropdown.open .calc-currency-arrow,
.calc-currency-dropdown.open .calc-currency-btn > span::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.calc-currency-options {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  top: calc(var(--full) + var(--s1));
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 280px;
  background-color: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  -webkit-transform: translateY(calc(var(--s2) * -1));
          transform: translateY(calc(var(--s2) * -1));
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
  z-index: 100;
}

.calc-currency-dropdown.open .calc-currency-options {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.calc-currency-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.calc-currency-option.selected {
  background-color: var(--primary-default-light);
}

.calc-currency-option:hover {
  background-color: var(--bg-light);
}

.calc-currency-option img {
  width: var(--s5);
  height: var(--s5);
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.calc-currency-option span {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-heavy);
}

.calc-rate {
  margin-left: var(--s4);
  margin-bottom: var(--s2-10);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  gap: var(--s4);
  height: var(--s16);
}

.calc-rate-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2px;
}

.calc-rate-value {
  font-size: var(--text-sm);
  color: var(--primary-heavy);
  font-weight: 600;
}

.calc-rate-label {
  font-size: var(--text-xs);
  color: var(--text-default);
}

.calc-arrow {
  position: relative;
}
.calc-arrow > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: var(--s10);
  height: var(--s10);
  background-color: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.calc-arrow:before {
  content: "";
  position: absolute;
  top: calc(var(--s3) * -1);
  bottom: -10px;
  left: 50%;
  width: 1px;
  background-color: var(--border-default);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 0;
}

.calc-arrow svg {
  width: var(--s4);
  height: var(--s4);
  color: var(--primary-default);
}

.calc-result {
  background: linear-gradient(135deg, var(--primary-default-light) 0%, #d9f2fa var(--full));
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  margin: var(--s4) 0;
  border: 1px solid rgba(0, 160, 220, 0.15);
}

.calc-compare {
  margin-bottom: var(--s5);
  padding: var(--s4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2-10);
  background-color: var(--bg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.calc-compare svg {
  width: var(--s4);
  height: var(--s4);
  color: var(--primary-default);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.calc-compare span {
  font-size: var(--text-sm);
  color: var(--text-heavy);
}

.calc-compare strong {
  color: var(--primary-heavy);
}

.calc-btn {
  width: var(--full);
  padding: var(--s4);
  color: var(--white);
  font-weight: 600;
  background-color: var(--primary-default);
  border-radius: var(--radius);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.calc-btn:hover {
  background-color: var(--primary-strong);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 6px var(--s4) rgba(0, 160, 220, 0.25);
          box-shadow: 0 6px var(--s4) rgba(0, 160, 220, 0.25);
}

.contact-sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--s4);
}

/* 카드 공통 */
.sns-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: var(--s4) var(--s6);
  border-radius: var(--radius-xl);
}
.sns-item.line {
  color: var(--white);
  background-color: #06C755;
}
.sns-item.line .sns-text p {
  color: var(--white);
}
.sns-item.kakao {
  color: rgba(0, 0, 0, 0.85);
  background-color: #FEE500;
}

/* 왼쪽 텍스트 */
.sns-text h4 {
  font-size: var(--text-lg);
  font-weight: 700;
}

.sns-text p {
  margin: var(--s2) 0 0;
  font-size: var(--text-sm);
  color: rgba(0, 0, 0, 0.85);
}

/* QR */
.qr-code {
  width: 5rem;
  height: 5rem;
  background-color: var(--white);
}

.db-body .qr-code {
  padding: 0.0781rem;
  width: 3.875rem;
  height: 3.875rem;
}

@media (max-width: 768px) {
  .contact-sns {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media (max-width: 480px) {
  .contact-sns {
    padding: 0;
  }
}
.postcode-search-desc {
  margin-bottom: var(--s6);
  padding: var(--s6) 0;
  text-align: center;
  background-color: var(--bg-default);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius);
}
.postcode-search-desc p {
  margin-bottom: 0 !important;
}
.postcode-search-desc .search-title {
  color: var(--primary-default);
  font-weight: 700;
}
.postcode-search-desc .search-info {
  margin-top: var(--s2);
  font-size: var(--text-sm);
  color: var(--text-default);
}

.postcode-search-box {
  margin-bottom: var(--s6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--s2);
}
.postcode-search-box input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.postcode-nodata {
  padding: var(--s4);
  color: var(--text-default);
  text-align: center;
}

.postcode-result-area {
  max-height: 25rem;
  border: 1px solid #ddd;
  border-radius: var(--s1);
  overflow-y: auto;
}
.postcode-result-area ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.postcode-result-area ul li:hover {
  background-color: var(--bg-light);
}
.postcode-result-area ul li .post-code {
  min-width: var(--s20);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.postcode-result-area ul li .post-code-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.postcode-result-area ul li .post-info-box:last-child .post-label {
  background-color: #60a5fa;
}
.postcode-result-area ul li .post-info-box .post-label {
  margin-right: var(--s1);
  margin-bottom: var(--s1);
  padding: 1px var(--s1);
  font-size: var(--text-xs);
  color: #fff;
  background-color: #94a3b8;
  border-radius: 3px;
}
.postcode-result-area ul li .post-info-box .post-value {
  font-size: var(--text-sm);
  color: var(--text-heavy);
}

@media (max-width: 480px) {
  .postcode-result-area {
    max-height: 15rem;
  }
}
.m1 {
  margin: var(--s4);
}

.mt1 {
  margin-top: var(--s4);
}

.mb1 {
  margin-bottom: var(--s4);
}

.ml1 {
  margin-left: var(--s4);
}

.mr1 {
  margin-right: var(--s4);
}

.text-red {
  color: #dc3545;
}

.text-left,
.text-left {
  text-align: left;
}

.text-center,
.text-center {
  text-align: center;
}

.text-right,
.text-right {
  text-align: right;
}

/* ===== Button Style ===== */
/* ===== Button Style ===== */
/* =========================
   Component
========================= */
.btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  vertical-align: middle;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  cursor: pointer;
}
.btn:focus-visible {
  outline: 2px solid var(--primary-default);
  outline-offset: 2px;
}
.btn:disabled, .btn.disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.btn .btn__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 0;
}
.btn .btn__label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.btn {
  height: var(--s10);
  padding-inline: var(--s5);
  font-size: var(--text-sm);
  border-radius: var(--radius);
  gap: var(--s2);
}
.btn .btn__icon {
  width: var(--s4);
  height: var(--s4);
}
.btn {
  background-color: var(--primary-default);
  color: var(--text-light);
  border-color: var(--primary-default);
}
.btn:hover:not(:disabled):not(.disabled) {
  background-color: var(--primary-strong);
  color: var(--text-light);
  border-color: var(--primary-strong);
}
.btn:disabled, .btn.disabled {
  background-color: var(--neutral-light);
  color: var(--bg-soft);
  border-color: var(--neutral-light);
}
.btn.full {
  width: var(--full);
}

/* variant modifiers */
.btn-primary {
  background-color: var(--primary-default);
  color: var(--text-light);
  border-color: var(--primary-default);
}
.btn-primary:hover:not(:disabled):not(.disabled) {
  background-color: var(--primary-strong);
  color: var(--text-light);
  border-color: var(--primary-strong);
}
.btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--neutral-light);
  color: var(--bg-soft);
  border-color: var(--neutral-light);
}

.btn-secondary {
  background-color: var(--white);
  color: var(--text-strong);
  border-color: var(--border-default);
}
.btn-secondary.size-sm:not(:disabled):not(.disabled) {
  color: var(--primary-heavy);
}
.btn-secondary.size-sm:hover:not(:disabled):not(.disabled) {
  color: var(--primary-heavy);
}
.btn-secondary:hover:not(:disabled):not(.disabled) {
  background-color: var(--secondary-gray);
  color: var(--text-strong);
  border-color: var(--neutral-soft);
}
.btn-secondary:disabled, .btn-secondary.disabled {
  background-color: var(--secondary-gray-light);
  color: var(--neutral-light);
  border-color: var(--border-soft);
}

.btn-utility {
  background-color: var(--neutral-default);
  color: var(--text-light);
  border-color: var(--neutral-default);
}
.btn-utility:hover:not(:disabled):not(.disabled) {
  background-color: var(--neutral-strong);
  color: var(--text-light);
  border-color: var(--neutral-strong);
}
.btn-utility:disabled, .btn-utility.disabled {
  background-color: var(--neutral-light);
  color: var(--bg-soft);
  border-color: var(--neutral-light);
}

.btn-confirm {
  background-color: var(--primary-heavy);
  color: var(--text-light);
  border-color: var(--primary-heavy);
}
.btn-confirm:hover:not(:disabled):not(.disabled) {
  background-color: #274f88;
  color: var(--text-light);
  border-color: #274f88;
}
.btn-confirm:disabled, .btn-confirm.disabled {
  background-color: #c7d6e7;
  color: var(--bg-soft);
  border-color: #c7d6e7;
}

.btn-warning {
  background-color: var(--cautionary);
  color: var(--text-light);
  border-color: var(--cautionary);
}
.btn-warning:hover:not(:disabled):not(.disabled) {
  background-color: #df7d00;
  color: var(--text-light);
  border-color: #df7d00;
}
.btn-warning:disabled, .btn-warning.disabled {
  background-color: #f3e1bd;
  color: var(--bg-soft);
  border-color: #f3e1bd;
}

.btn-delete {
  background-color: var(--white);
  color: var(--negative);
  border-color: var(--negative);
}
.btn-delete:hover:not(:disabled):not(.disabled) {
  background-color: var(--bg-delete);
  color: var(--negative);
  border-color: var(--negative);
}
.btn-delete:disabled, .btn-delete.disabled {
  background-color: var(--bg-delete);
  color: var(--accent-red);
  border-color: var(--accent-red-light);
}

.btn-text {
  background-color: transparent;
  color: var(--primary-heavy);
  border-color: transparent;
}
.btn-text:hover:not(:disabled):not(.disabled) {
  background-color: transparent;
  color: var(--primary-default);
  border-color: transparent;
}
.btn-text:disabled, .btn-text.disabled {
  background-color: transparent;
  color: var(--neutral-light);
  border-color: transparent;
}

/* size modifiers */
.size-lg {
  height: var(--s12);
  padding-inline: var(--s6);
  font-size: var(--text-md);
  border-radius: var(--radius);
  gap: var(--s2);
}
.size-lg .btn__icon {
  width: var(--s4);
  height: var(--s4);
}

.size-md {
  height: var(--s10);
  padding-inline: var(--s5);
  font-size: var(--text-sm);
  border-radius: var(--radius);
  gap: var(--s2);
}
.size-md .btn__icon {
  width: var(--s4);
  height: var(--s4);
}

.size-sm {
  height: var(--s8);
  padding-inline: var(--s4);
  font-size: var(--text-sm);
  border-radius: var(--radius);
  gap: var(--s1);
}
.size-sm .btn__icon {
  width: var(--s3-10);
  height: var(--s3-10);
}

.btn-with-icon .btn__icon {
  margin-right: 0;
}

.btn-icon-box .btn__icon {
  border: 2px dotted currentColor;
  border-radius: 0.25rem;
}

.btn-icon-only {
  padding-inline: 0;
  aspect-ratio: 1/1;
}
.btn-icon-only .btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn-align {
  margin-top: var(--s8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: var(--s4);
}
.btn-align.wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.btn-align.wrap .btn, .btn-align.wrap a, .btn-align.wrap button {
  width: var(--full);
}
.btn-align.mt-0 {
  margin-top: 0;
}
.btn-align.left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.btn-align.center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.btn-align.right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (max-width: 768px) {
  .btn-align.wrap {
    width: var(--full);
  }
  .btn-align.wrap .btn, .btn-align.wrap a, .btn-align.wrap button {
    width: var(--full);
  }
  .btn-align .btn, .btn-align a, .btn-align button {
    width: calc(var(--full) / 2);
  }
}
.coupon-btn {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 var(--s4);
  font-size: var(--text-sm);
  color: var(--text-soft);
  font-weight: normal;
}
.coupon-btn.active {
  color: var(--text-heavy);
}

.btn-close-modal {
  background: none;
  border: none;
  font-size: var(--s6);
  cursor: pointer;
  color: #111;
  padding: 0;
  line-height: 1;
}

/* ===== SNS Login Buttons ===== */
.sns-login-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--s3);
  width: var(--full);
}

.btn-sns {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: var(--full);
  height: 48px;
  border-radius: var(--s6);
  border: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
  -webkit-transition: -webkit-filter 0.2s;
  transition: -webkit-filter 0.2s;
  transition: filter 0.2s;
  transition: filter 0.2s, -webkit-filter 0.2s;
  text-decoration: none;
  -webkit-box-shadow: 0 2px var(--s1) rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px var(--s1) rgba(0, 0, 0, 0.1);
}

.btn-sns:hover {
  -webkit-filter: brightness(0.95);
          filter: brightness(0.95);
}

.sns-icon-wrap {
  position: absolute;
  left: var(--s5);
  width: var(--s6);
  height: var(--s6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.sns-icon-img {
  width: var(--full);
  height: var(--full);
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
  /* Converts black/dark icons to white */
}

.btn-line {
  background-color: #06c755;
}

.btn-kakao {
  background-color: #fee500;
  color: var(--black);
}
.btn-kakao .sns-icon-img {
  -webkit-filter: none;
          filter: none; /* 카카오톡 아이콘은 원래 색상을 유지 */
}

.btn-kakao {
  color: var(--black);
}

.btn-facebook {
  background-color: #1877f2;
}

.btn-viber {
  background-color: #7360f2;
}

/* ===== end Button Style ===== */
/* ===== end Button Style ===== */
.remit-card-status-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: auto;
  min-width: 96px;
}

.remit-status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--s1-6) var(--s3);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--s8);
}

.remit-status {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s1);
  font-size: var(--text-sm);
  font-weight: 600;
}

@media (max-width: 768px) {
  .remit-card-status-wrapper {
    margin-top: var(--s2);
    margin-left: 0;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    width: var(--full);
  }
}
@media (max-width: 480px) {
  .remit-status {
    font-size: var(--text-xs);
  }
}
.remit-status svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* Improved Status Colors - Less Fluorescent */
.remit-status.status-verified {
  color: var(--status-verified);
  background-color: var(--bg-positive);
}

.remit-status.status-unverified {
  color: var(--status-unverified);
  background-color: var(--bg-negative);
}

.remit-status.status-received {
  color: var(--status-received);
  background-color: var(--bg-positive);
}

.remit-status.status-processing {
  color: var(--status-processing);
  background-color: var(--bg-positive);
}

.remit-status.status-approved {
  color: var(--status-approved);
  background-color: var(--bg-positive);
}

.remit-status.status-complete {
  color: var(--status-complete);
  background-color: var(--bg-success);
}

.remit-status.status-success {
  color: var(--status-success);
  background-color: var(--bg-success);
}

.remit-status.status-failed {
  color: var(--status-failed);
  background-color: var(--bg-negative);
}

.remit-status.status-pending {
  color: var(--status-cancel);
  background-color: var(--bg-default);
}

.remit-status.status-cancel {
  color: var(--status-cancel);
  background-color: var(--bg-default);
}

.remit-status.status-paused {
  color: var(--status-cancel);
  background-color: var(--bg-default);
}

.remit-status.status-available {
  color: var(--status-received);
  background-color: var(--bg-positive);
}

.remit-status.status-unavailable {
  color: var(--status-unverified);
  background-color: var(--bg-negative);
}

.remit-status.status-inquiry_pending {
  color: var(--status-processing);
  background-color: var(--bg-positive);
}

.remit-status.status-inquiry_completed {
  color: var(--status-cancel);
  background-color: var(--bg-default);
}

.modal-overlay .remit-status {
  padding: var(--s1-6) 0;
  background-color: var(--transparent);
}

/* ===== findTabs ===== */
/* ===== findTabs ===== */
.find-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 2px solid #E5E7EB;
  margin-bottom: var(--s8);
}

.find-tab-btn {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: -2px;
  padding: var(--s4);
  font-size: var(--text-md);
  font-weight: 600;
  color: #9CA3AF;
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.find-tab-btn.active {
  color: var(--primary-default);
  border-bottom-color: var(--primary-default);
}

.find-tab-content {
  display: none;
}

.find-tab-content.active {
  display: block;
}

.common-tab-container {
  margin-bottom: var(--s8);
}

.common-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: var(--s1-6);
  margin-bottom: var(--s6);
  gap: var(--s2);
  background-color: var(--bg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  -webkit-box-shadow: none;
          box-shadow: none;
  overflow-x: auto;
}

.common-tab {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0.875rem 0;
  font-size: var(--text-md);
  color: var(--text-soft);
  line-height: 1;
  font-weight: 600;
  text-align: center;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--transparent);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: relative;
  cursor: pointer;
}

.guide-label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  cursor: pointer;
}
.guide-label input {
  display: none;
}

.guide-label input + .common-tab:hover:not(.active),
.common-tab:hover:not(.active) {
  color: var(--text-strong);
  background: rgba(255, 255, 255, 0.6);
}

.guide-label input:checked + .common-tab,
.common-tab.active {
  color: var(--primary-default);
  font-weight: 700;
  background-color: var(--white);
  border-bottom: none;
  -webkit-box-shadow: 0 var(--s1) var(--s3) 0 rgba(0, 0, 0, 0.05);
          box-shadow: 0 var(--s1) var(--s3) 0 rgba(0, 0, 0, 0.05);
}

.tab-content {
  display: none;
  -webkit-animation: fadeIn 0.3s ease-in-out;
          animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
  display: block;
}

@media (max-width: 768px) {
  .common-tabs {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--s2);
  }
  .common-tab {
    min-width: 45%;
    padding: var(--s3) 0.625rem;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    font-size: var(--text-sm);
  }
}
/* CM_04_12 회원가입 내국인/외국인 탭 스타일 */
.nationality-selector {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  width: var(--full);
}

.nationality-btn-label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  cursor: pointer;
}

.nationality-btn-label input {
  display: none;
}

.nationality-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 var(--s4);
  width: var(--full);
  height: var(--s15);
  font-size: var(--text-md);
  color: var(--text-default);
  font-weight: 600;
  background-color: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.nationality-btn-label input:checked + .nationality-btn {
  border: 2px solid var(--primary-default);
  color: var(--primary-default);
}
.nationality-btn-label input:checked + .nationality-btn .custom-check {
  background-color: var(--primary-default);
  border-color: var(--primary-default);
}
.nationality-btn-label input:checked + .nationality-btn .custom-check::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  margin-bottom: 2px;
  display: block;
}

/* ===== end findTabs ===== */
/* ===== end findTabs ===== */
/* ===== modal-overlay ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--full);
  height: var(--full);
  background-color: rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  backdrop-filter: blur(var(--s1));
}
.modal-overlay.show, .modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  padding: var(--s10);
  padding-right: 2.6125rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  background-color: #ffffff;
  -webkit-box-shadow: 0 var(--s5) 25px -5px rgba(0, 0, 0, 0.1);
          box-shadow: 0 var(--s5) 25px -5px rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: var(--radius-xl);
  overflow: hidden;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-content.modal-layout {
  padding: 0;
  padding-right: 2px;
  max-width: 600px;
  text-align: left;
}
.modal-content.lg {
  max-width: 900px;
}
.modal-content .modal-inner {
  max-height: 90dvh;
  overflow-y: auto;
}

.modal-overlay.show .modal-content,
.modal-overlay.active .modal-content {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.modal-header {
  position: sticky;
  top: 0;
  padding: var(--s6) var(--s6) var(--s4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid var(--border-default);
  background-color: var(--white);
  z-index: 10;
}

@media (max-width: 768px) {
  .account-modal-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.modal-title {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--text-heavy);
  font-weight: 700;
}

.modal-close {
  padding: var(--s1) var(--s2);
  font-size: var(--text-2xl);
  color: var(--text-soft);
  background: none;
  border: none;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.modal-close:hover {
  color: var(--text-heavy);
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.modal-body {
  padding: var(--s6);
}

.modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: var(--s4) var(--s6);
  padding-top: 0;
  gap: var(--s4);
}
.modal-footer .btn.full, .modal-footer a.full, .modal-footer button.full {
  width: auto;
}

@media (max-width: 768px) {
  .modal-footer {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .modal-footer .btn, .modal-footer a, .modal-footer button {
    width: calc(var(--full) / 2);
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
}
.modal-footer .btn-align {
  margin-top: 0;
}

.modal-icon {
  margin-bottom: var(--s5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.modal-icon svg,
.modal-icon img {
  width: 48px;
  height: 48px;
}

.modal-content h3 {
  margin-bottom: var(--s4);
  font-size: var(--text-xl);
  font-weight: 700;
  color: #111827;
}

.modal-content p {
  margin-bottom: var(--s8);
  font-size: var(--text-md);
  color: #4b5563;
  word-break: keep-all;
}

/* Confirm Modal Buttons */
.modal-btn-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--s3);
  margin-top: var(--s6);
  width: var(--full);
}

/* Specificity Override for Modal Buttons */
.modal-btn-group .btn btn-secondary size-lg {
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 !important;
          flex: 1 !important;
}

.modal-btn-group .btn btn-primary size-lg {
  -webkit-box-flex: 1.5 !important;
      -ms-flex: 1.5 !important;
          flex: 1.5 !important;
}

.modal-btn-group button {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 48px;
  font-size: var(--text-md);
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.btn btn-warning full size-lg {
  background-color: #f59e0b;
  border: none;
  color: #ffffff;
  width: var(--full);
  padding: var(--s4);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
}

.btn btn-warning full size-lg:hover {
  background-color: #d97706;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 var(--s1) 6px -1px rgba(0, 0, 0, 0.1);
          box-shadow: 0 var(--s1) 6px -1px rgba(0, 0, 0, 0.1);
}

.btn btn-primary full size-lg {
  width: var(--full);
  padding: var(--s4);
  font-size: var(--text-md);
  color: var(--white);
  font-weight: 600;
  background-color: var(--primary-default);
  border: none;
  border-radius: var(--radius-md);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
}

.btn btn-primary full size-lg:hover {
  background-color: #0088be;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 var(--s1) 6px -1px rgba(0, 0, 0, 0.1);
          box-shadow: 0 var(--s1) 6px -1px rgba(0, 0, 0, 0.1);
}

@-webkit-keyframes modalFadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* ===== end modal-overlay ===== */
.w-full {
  width: var(--full);
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex-center-start {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.flex-center-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.flex-center-end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

/* 상태 뱃지 가시성 개선 */
.badge {
  color: #333;
  /* 기본 글자색 어둡게 */
}

.badge-normal {
  color: #1976D2;
  /* 파란색 텍스트 복원 */
}

.badge-modal {
  color: #7B1FA2;
}

/* ===== Loading Overlay & Component Styles ===== */
/* Loading Page (CM_01_02.html) Body Reset */
.loading-body {
  margin: 0;
  padding: 0;
  width: var(--full);
  height: var(--full);
  overflow: hidden;
  background-color: transparent;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--full);
  height: var(--full);
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(var(--s2));
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 1;
  -webkit-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(74, 144, 226, 0.2);
  border-top: 5px solid #4a90e2;
  border-radius: 50%;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* ===== Error Page Styles (CM_01_03.html) ===== */
.error-body {
  margin: 0;
  padding: 0;
  width: var(--full);
  min-height: var(--full-dvh);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--white);
}

.error-container {
  text-align: center;
  padding: var(--s6);
  max-width: 400px;
  width: var(--full);
}
.error-container .btn-warning {
  width: var(--full);
}

.error-icon {
  margin-bottom: var(--s6);
}

.error-title {
  font-size: var(--s5);
  font-weight: 700;
  color: #111827;
  margin-bottom: var(--s3);
}

.error-desc {
  font-size: var(--s4);
  color: #6b7280;
  margin-bottom: var(--s8);
}

/* ===== end Loading Overlay & Component Styles ===== */
/* ===== Pagination + select ===== */
.pagination-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s4);
  margin-top: var(--s5);
}
.pagination-box .db-rows-select {
  padding-top: 0;
  padding-bottom: 0;
  height: var(--s10);
}

@media (max-width: 768px) {
  .pagination-box .db-rows-select {
    height: var(--s10);
  }
}
.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s1);
}

.db-page-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: var(--s10);
  height: var(--s10);
  border: 1px solid var(--border-soft);
  background-color: var(--white);
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.db-page-btn:hover {
  background-color: var(--bg-light);
  border-color: var(--primary-default);
}

.db-page-btn svg {
  color: var(--text-soft);
}

.db-page-num {
  min-width: var(--s10);
  height: var(--s10);
  padding: 0 var(--s2);
  border: 1px solid var(--border-soft);
  background-color: var(--white);
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-default);
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.db-page-num:hover {
  background-color: var(--bg-light);
  border-color: var(--primary-default);
  color: var(--primary-default);
}

.db-page-num.active {
  background-color: var(--primary-default);
  border-color: var(--primary-default);
  color: var(--white);
  font-weight: 600;
}

.db-rows-select {
  width: auto;
}

.db-rows-select:hover {
  border-color: var(--primary-default);
}

.db-rows-select:focus {
  outline: none;
  border-color: var(--primary-default);
}

@media (max-width: 1024px) {
  .pagination-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: var(--s3);
  }
  .pagination {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .db-page-num:nth-child(n+8):nth-last-child(n+4) {
    display: none;
  }
  .db-rows-select {
    width: var(--full);
  }
}
@media (max-width: 480px) {
  .pagination-box {
    margin-top: var(--s4);
  }
  .pagination {
    gap: 2px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .db-page-num:nth-child(n+7):nth-last-child(n+3) {
    display: none;
  }
}
/* ===== end Pagination + select ===== */
/* ===== Login Page Styles ===== */
.login-wh-full {
  padding: 60px var(--s5);
  width: var(--full);
  height: var(--full);
  min-height: var(--full-dvh);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--bg-light);
}

.login-page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: var(--full-dvh);
  padding: var(--s10) var(--s5);
}

.login-container {
  width: var(--full);
  max-width: 500px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.login-logo {
  margin-bottom: 30px;
}
.login-logo ~ .login-card {
  margin-top: 0;
}

.login-logo img {
  height: 50pt;
  width: auto;
}

.password-confirm-container {
  max-width: 400px;
  margin: 120px auto;
  text-align: center;
}

.password-wrap {
  width: var(--full);
}

.password-confirm-title {
  font-size: var(--s7);
  font-weight: 700;
  color: #111;
  margin-bottom: var(--s3);
}

.password-confirm-desc {
  color: #333;
  font-size: 15px;
  margin-bottom: var(--s10);
}

.guide-logo {
  height: 50px;
  margin-bottom: var(--s5);
}

.guide-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1B5E9E;
  margin-bottom: var(--s10);
}

.demo-section {
  margin-bottom: 50px;
  text-align: center;
  width: var(--full);
  max-width: 600px;
}

.login-title {
  margin-bottom: var(--s8);
  font-size: var(--text-3xl);
  font-weight: 700;
  text-align: center;
  color: var(--text-heavy);
  letter-spacing: -0.02em;
}

.login-subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 2rem;
  font-size: 1rem;
  font-weight: 500;
}

.login-form {
  margin-bottom: var(--s6);
}

/* Info Box Style */
.info-box {
  margin-bottom: var(--s6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  padding: var(--s4);
  font-size: var(--text-sm);
  color: var(--primary-heavy);
  text-align: left;
  background-color: var(--bg-default);
  border-radius: var(--s2);
}

.info-box i {
  font-style: normal;
  font-weight: bold;
  font-size: var(--s4);
}

.field-group {
  margin-bottom: var(--s5);
}

.field-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: var(--s2);
  font-size: var(--text-sm);
  color: var(--text-default);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.field-label.hidden {
  overflow: hidden;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 0;
  height: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
}
.field-label.no-uppercase {
  text-transform: none;
}
.field-label.between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.input-label {
  display: block;
  font-weight: 700;
  color: #7A8E96;
  margin-bottom: var(--s2);
  font-size: 14px;
}

.input-box-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

.field-desc {
  font-size: 13px;
  color: var(--primary-default);
  font-weight: 500;
}

.password-wrap {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

.keypad-btn {
  position: absolute;
  right: var(--s3);
  color: var(--text-soft);
  cursor: pointer;
  padding: var(--s2);
}

.login-options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: var(--s6);
  width: var(--full);
}

.keep-login-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-default);
}

.keep-login-wrap input[type=checkbox] {
  display: none;
}

.register-wrap {
  margin-top: var(--s6);
  text-align: center;
}

.register-item {
  font-size: var(--text-sm);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none !important;
  font-weight: 500;
  color: var(--primary-default);
  color: var(--primary-default);
}

.register-item:hover {
  color: var(--primary-strong);
  text-decoration: none !important;
}

.find-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--text-sm);
}

.find-links a {
  color: var(--text-soft);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none !important;
}

.find-links a:hover {
  color: var(--primary-default);
  opacity: 0.8;
}

.keypad-btn:hover {
  color: var(--primary-default);
  opacity: 0.8;
}

.btn btn-primary size-lg {
  margin-bottom: var(--s3);
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: var(--full);
  background-color: var(--primary-default);
  font-size: 1.1rem;
  color: var(--white);
  font-weight: 600;
  border-radius: var(--radius);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.btn btn-primary size-lg:hover {
  background-color: var(--primary-strong);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.btn btn-secondary size-lg {
  display: block;
  width: var(--full);
  padding: 10px;
  border: 1px solid var(--border-default);
  color: var(--text-soft);
  border-radius: var(--radius);
  font-size: 13px;
  text-align: center;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none !important;
}

.btn btn-secondary size-lg:hover {
  background-color: var(--bg-light);
  border-color: var(--text-soft);
  color: var(--text-heavy);
  opacity: 0.9;
}

.login-footer-wrap {
  margin-top: var(--s10);
  text-align: center;
  width: var(--full);
}

.contact-text-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 5px;
  font-size: var(--s3);
  color: var(--text-heavy);
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--text-soft);
}

@media (min-width: 768px) {
  .contact-text-list {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    gap: 15px;
  }
  .contact-text-list .v-bar {
    margin: 0 15px;
  }
}
.v-bar {
  width: 1px;
  height: var(--s3);
  background-color: #dde4e6;
  margin: 0 10px;
  display: inline-block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  vertical-align: middle;
}

.time-text-list {
  font-size: var(--s3);
  color: var(--text-soft);
  margin-bottom: 25px;
  opacity: 0.8;
}

.time-text-list p {
  font-size: var(--s3);
  color: var(--text-soft);
  font-weight: 400;
}

.footer-simple {
  width: var(--full);
}

.menu-text-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  white-space: nowrap;
  font-size: var(--s3);
}

.menu-text-list a {
  color: var(--text-soft);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none !important;
}
.menu-text-list a b {
  color: var(--primary-default);
}

.menu-text-list a::after {
  display: none !important;
}

.menu-text-list a:hover {
  color: var(--text-heavy);
  opacity: 0.8;
}

.info-text-list p {
  font-size: var(--s3);
  color: var(--text-soft);
  line-height: 1.8;
  opacity: 0.7;
}

.error-msg {
  color: var(--negative);
  font-size: var(--s3);
  margin-top: 6px;
  display: none;
  text-align: left;
  font-weight: 500;
}

.security-keypad {
  display: none;
  position: absolute;
  top: calc(var(--full) + var(--s3));
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  z-index: 1000;
  width: 480px;
  min-width: 480px;
  background-color: #f1f4f6;
  border: 1px solid #d1d9e0;
  border-radius: var(--s4);
  padding: var(--s3);
  -webkit-box-shadow: var(--shadow-lg);
          box-shadow: var(--shadow-lg);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.security-keypad.active {
  display: block;
  -webkit-animation: keypadPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
          animation: keypadPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@-webkit-keyframes keypadPop {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, 15px) scale(0.98);
            transform: translate(-50%, 15px) scale(0.98);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%, 0) scale(1);
            transform: translate(-50%, 0) scale(1);
  }
}

@keyframes keypadPop {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, 15px) scale(0.98);
            transform: translate(-50%, 15px) scale(0.98);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%, 0) scale(1);
            transform: translate(-50%, 0) scale(1);
  }
}
.keypad-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--s1) var(--s2) var(--s3);
}

.keypad-header span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-default);
}

.close-keypad {
  background-color: none;
  border: none;
  font-size: var(--s5);
  color: var(--text-soft);
  cursor: pointer;
}

.keypad-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--s1);
  margin-bottom: 6px;
}

.keypad-row.row-1 {
  margin-left: 10px;
}

.key-btn {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 44px;
  background-color: #ffffff;
  border: 1px solid #ced4da;
  border-bottom: 2px solid #adb5bd;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  -webkit-transition: all 0.05s;
  transition: all 0.05s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.key-btn:active {
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
  border-bottom: none;
  background-color: #e9ecef;
}

.key-btn.func-key {
  background-color: #e2e8f0;
  color: #475569;
  font-size: var(--s3);
}

.key-btn.shift-btn {
  -webkit-box-flex: 1.2;
      -ms-flex: 1.2;
          flex: 1.2;
  font-size: 14px;
}

.key-btn.shift-btn.active {
  background-color: var(--primary-default);
  color: var(--white);
  border-bottom-color: var(--primary-strong);
}

.key-btn.confirm-btn {
  background-color: var(--primary-default);
  color: var(--white);
  border-bottom-color: var(--primary-strong);
  -webkit-box-flex: 1.5;
      -ms-flex: 1.5;
          flex: 1.5;
  font-size: 14px;
}

.key-btn.space-btn {
  -webkit-box-flex: 4;
      -ms-flex: 4;
          flex: 4;
}

@media (max-width: 900px) {
  .menu-text-list {
    white-space: normal;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: var(--s2);
  }
  .v-bar {
    display: none;
  }
}
/* Login Page Responsive */
@media (max-width: 480px) {
  .contact-text-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 5px;
  }
  .contact-text-row .divider {
    display: none;
  }
  .login-container {
    padding: var(--s6) var(--s9);
    min-width: 420px;
  }
  .login-logo {
    margin-bottom: var(--s6);
  }
  .login-logo img {
    height: 50px;
  }
  .form-label {
    width: 70px;
    font-size: var(--text-sm);
  }
  .form-input {
    font-size: var(--text-sm);
    padding: var(--s3) 10px;
  }
  .form-options {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--s3);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .form-links {
    width: var(--full);
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .login-contact .contact-hours {
    font-size: 0.75rem;
  }
  .field-group {
    margin-bottom: var(--s5);
  }
  .field-label {
    margin-bottom: var(--s1);
  }
  .password-wrap {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
  }
  .keypad-btn {
    position: absolute;
    right: var(--s3);
    color: var(--text-soft);
    cursor: pointer;
    padding: var(--s2);
  }
  .btn btn-primary size-lg {
    width: var(--full);
    padding: 15px;
    background-color: var(--primary-default);
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius);
    margin-bottom: var(--s3);
  }
  .btn btn-primary size-lg:hover {
    background-color: var(--primary-strong);
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-box-shadow: 0 6px var(--s4) rgba(0, 160, 220, 0.25);
            box-shadow: 0 6px var(--s4) rgba(0, 160, 220, 0.25);
  }
  .btn btn-secondary size-lg {
    display: block;
    width: var(--full);
    padding: 10px;
    border: 1px solid var(--border-default);
    color: var(--text-soft);
    border-radius: var(--radius);
    font-size: 0.95rem;
    text-align: center;
  }
  .login-footer-wrap {
    text-align: center;
    width: var(--full);
  }
  .contact-text-list,
  .menu-text-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 5px;
    font-size: var(--s3);
    color: var(--text-soft);
  }
  .time-text-list {
    font-size: var(--s3);
    color: var(--text-soft);
    margin-bottom: 25px;
    opacity: 0.8;
  }
  .info-text-list {
    font-size: var(--s3);
    color: var(--text-soft);
    line-height: 1.8;
    opacity: 0.7;
  }
  .login-footer-wrap .bar,
  .menu-text-list a:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 10px;
    background-color: var(--border-default);
    display: inline-block;
    margin: 0 5px;
  }
  /* Removed conflicting .menu-text-list styles to allow mobile-footer.css to take precedence for CM_03_01 and CM_04_01 */
  .contact-text-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 5px;
  }
  .login-footer-wrap .bar {
    display: none;
  }
  .keep-login-wrap {
    width: var(--full) !important;
    margin: 0 !important;
  }
  .find-links {
    width: var(--full) !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    gap: var(--s6) !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .find-links .v-bar {
    display: none !important;
  }
}
/* ===== end Login Page Styles ===== */
/* ===== SNS Login Buttons ===== */
.sns-separator {
  border-top: 1px dashed #ddd;
  margin: var(--s5) 0;
  width: var(--full);
}

/* join step Styles */
.register-max-wrap {
  max-width: 960px;
  width: var(--full);
}

.register-card-wide {
  display: block;
  width: var(--full);
  max-width: 960px;
}

.reg-section {
  padding: 10px 0;
}

.reg-label {
  text-align: center;
  margin-bottom: var(--s6);
}

.reg-label h3 {
  font-size: var(--s5);
  font-weight: 700;
  color: var(--primary-default);
  margin-bottom: var(--s2);
}

.reg-label p {
  font-size: 14px;
  color: var(--text-soft);
}

.reg-id-grid {
  display: grid;
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.id-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.id-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  margin-left: auto;
  margin-right: auto;
}

.id-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* 媛쒖씤?뚯썝 2???덉씠?꾩썐 */
.reg-dual-section {
  margin-bottom: var(--s6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}

.reg-subsection {
  background-color: var(--white);
  border-radius: var(--s3);
}

.reg-subsection h4 {
  font-size: var(--s4);
  font-weight: 700;
  color: #777777;
  margin-bottom: 10px;
  text-align: center;
}

.subsection-desc {
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: var(--s5);
  text-align: center;
}

.reg-id-cards-vertical {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: var(--s3);
}

.reg-id-card {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 10px var(--s3);
  text-align: center;
  background-color: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--s4);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.reg-id-card:hover {
  border-color: var(--primary-default);
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: var(--shadow-sm);
          box-shadow: var(--shadow-sm);
}

.reg-svg-wrap {
  width: var(--full);
  aspect-ratio: 1.6/1;
  margin-bottom: var(--s3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.reg-svg-wrap svg {
  width: 85%;
  height: auto;
}

.reg-svg-wrap img {
  width: 147px;
  height: auto;
}

.reg-id-card span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heavy);
  display: block;
}

.reg-hr {
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(var(--border-default)), to(transparent));
  background: linear-gradient(90deg, transparent, var(--border-default), transparent);
  margin: var(--s5) 0;
}

.reg-submit {
  text-align: center;
}

.reg-submit .btn btn-primary size-lg {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: auto;
  padding: 15px var(--s10);
  border-radius: 10px;
  margin: 0 auto;
  text-decoration: none;
}

.reg-cancel-box {
  margin-top: var(--s8);
  text-align: center;
  border-top: 1px solid #f1f3f5;
  padding-top: var(--s6);
}

.reg-cancel-box .btn btn-secondary size-lg {
  width: auto;
  min-width: 100px;
  display: inline-block;
  height: auto;
  cursor: pointer;
}

@media (max-width: 480px) {
  .register-max-wrap {
    min-width: var(--full);
    width: var(--full);
    padding: 10px;
    min-width: 320px;
  }
  .reg-id-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .reg-dual-section {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
  .reg-id-cards-vertical {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .reg-id-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: left;
    padding: 15px var(--s5);
  }
  .reg-svg-wrap {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 80px;
            flex: 0 0 80px;
    margin-bottom: 0;
    margin-right: var(--s5);
  }
  .reg-submit .btn btn-primary size-lg {
    width: var(--full);
  }
}
.terms-wrapper {
  margin-bottom: var(--s8);
}

.agree-all-box {
  margin-bottom: var(--s6);
  padding: var(--s5);
  border-radius: var(--s3);
  background-color: var(--bg-default);
  border: 1px solid var(--border-default);
}

.check-label-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.check-label-group input {
  display: none;
}

.check-text-bold {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-heavy);
}

.check-text {
  font-size: var(--text-md);
  color: var(--text-default);
  font-weight: 500;
}

.terms-container {
  margin-bottom: var(--s5);
}

.terms-header {
  margin-bottom: var(--s3);
}
.terms-header .check-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.terms-content-box {
  height: 180px;
  overflow-y: auto;
  padding: var(--s4);
  font-size: var(--text-sm);
  color: var(--text-soft);
  line-height: 1.7;
  white-space: pre-line;
  word-break: keep-all;
  background-color: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
}

/* 필수/선택 badge styles */
.badge-required,
.badge-optional {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: var(--s1);
  height: var(--s5);
  padding: 0 var(--s2);
  font-size: 0.6875rem;
  color: var(--negative);
  vertical-align: middle;
  border-radius: var(--s1);
}

.badge-required {
  background-color: var(--bg-negative);
  color: var(--negative);
}

.select-styled {
  padding-right: var(--s10);
}

.radio-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
}

.radio-wrap input[type=radio] {
  display: none !important;
}

.radio-wrap input {
  display: none !important;
}

.custom-radio {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background-color: var(--white);
  position: relative;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: inline-block;
}

.radio-wrap input:checked + .custom-radio {
  border-color: var(--primary-default);
  background-color: var(--primary-default);
}

.radio-wrap input:checked + .custom-radio::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: var(--white);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.keypad-btn {
  padding-right: 14px;
  color: var(--text-soft);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.btn btn-utility size-lg {
  padding: 0 var(--s4);
  background-color: #7a8e96;
  color: var(--white);
  border-radius: var(--s2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  height: var(--input-h);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: inline-block;
  border: none;
  cursor: pointer;
}

.btn btn-utility size-lg:hover {
  background-color: #6a7e86;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.file-upload-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-radius: var(--radius);
  background-color: var(--white);
  overflow: hidden;
  width: var(--full);
}

.file-name-display {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 var(--s4);
  width: 50px;
  height: var(--input-h);
  font-size: 14px;
  color: var(--text-soft);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid var(--border-default);
  border-radius: var(--radius) 0 0 var(--radius);
}

.btn-file-trigger {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: var(--full);
  padding: 0 var(--s5);
  color: var(--primary-default);
  font-size: var(--text-sm);
  font-weight: 600;
  background-color: var(--white);
  border: 1px solid var(--border-default);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  white-space: nowrap;
  cursor: pointer;
}

.btn-file-trigger input {
  display: none !important;
}

.form-sec.border-none {
  border-bottom: none !important;
}

.purpose-grid-full {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3) var(--s4);
  background-color: var(--bg-default);
  padding: var(--s6);
  border-radius: var(--s3);
  border-top: none !important;
}

.register-card-wide .btn btn-primary size-lg {
  width: auto;
  min-width: 140px;
  margin: 0;
}

.mb-12 {
  margin-bottom: var(--s3);
}

/* 湲곗뾽?뚯썝 二쇱＜紐낅? ?꾩슜 ?ㅽ???*/
.form-sec-head-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: var(--s5);
}
.form-sec-head-flex .form-sec-head {
  margin-bottom: 0;
}

.btn-add-row {
  padding: var(--s2) var(--s4);
  background-color: #7a8e96;
  color: var(--white);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.shareholder-table {
  width: var(--full);
  background-color: var(--white);
  border-radius: var(--s3);
  border: 1px solid var(--border-default);
  overflow: hidden;
}

.sh-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: var(--s3);
  font-size: var(--s3);
  font-weight: 700;
  color: #555;
  text-align: center;
  background-color: var(--bg-default);
  border-bottom: 1px solid var(--border-default);
}

.sh-header div,
.sh-field {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.sh-header .sh-addr-col,
.sh-field.sh-addr {
  -webkit-box-flex: 3;
      -ms-flex: 3;
          flex: 3;
}

.sh-header .sh-action-col,
.sh-action {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 80px;
          flex: 0 0 80px;
  text-align: center;
}

.sh-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: var(--s2);
  padding: var(--s3);
  border-bottom: 1px solid #eee;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--white);
}

.sh-row:last-child {
  border-bottom: none;
}

.sh-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sh-input {
  width: var(--full);
  padding: 10px;
  font-size: var(--text-sm);
  outline: none;
  background-color: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--s1-6);
}

.sh-input:focus {
  border-color: var(--primary-default);
}

.sh-mobile-label {
  display: none !important;
}

.btn-sh-del {
  width: var(--full);
  height: 34px;
  background-color: #fef2f2;
  color: #ef4444;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  font-size: var(--s3);
  font-weight: 600;
  cursor: pointer;
}

.btn-sh-del:hover {
  background-color: #fee2e2;
}

.business-purpose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 15px !important;
}

@media (max-width: 768px) {
  .business-purpose-grid {
    grid-template-columns: 1fr !important;
  }
  .shareholder-table {
    border: none !important;
    background-color: transparent !important;
  }
  .sh-header {
    display: none !important;
  }
  .sh-row {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    padding: var(--s5) !important;
    gap: var(--s3) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--s3) !important;
    margin-bottom: var(--s4) !important;
    -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
            align-items: stretch !important;
    -webkit-box-shadow: var(--shadow-sm) !important;
            box-shadow: var(--shadow-sm) !important;
  }
  .sh-field {
    width: var(--full) !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
    gap: 6px !important;
  }
  .sh-mobile-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--primary-default) !important;
    text-transform: uppercase;
  }
  .sh-input {
    height: 44px !important;
    font-size: 14px !important;
    background-color: var(--white) !important;
    border-color: var(--border-default) !important;
  }
  .sh-action {
    width: var(--full) !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important;
    margin-top: var(--s1) !important;
  }
  .btn-sh-del {
    height: 44px !important;
    background-color: #fff5f5 !important;
    border-color: #ffe3e3 !important;
  }
  .purpose-grid-full {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .shareholder-table {
    border: none !important;
    background-color: transparent !important;
  }
  .sh-header {
    display: none !important;
  }
  .sh-field {
    width: var(--full) !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
    gap: 6px !important;
  }
  .sh-mobile-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--primary-default) !important;
    text-transform: uppercase;
  }
  .sh-input {
    height: 44px !important;
    font-size: 14px !important;
    background-color: var(--white) !important;
    border-color: var(--border-default) !important;
  }
  .sh-action {
    width: var(--full) !important;
    -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
            flex: none !important;
    margin-top: var(--s1) !important;
  }
  .btn-sh-del {
    height: 44px !important;
    background-color: #fff5f5 !important;
    border-color: #ffe3e3 !important;
  }
}
/* Drag & Drop 영역 */
.ocr-upload-area {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: var(--s10);
  text-align: center;
  background-color: var(--bg-default);
  border: 2px dashed var(--border-default);
  border-radius: var(--radius);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
}
.ocr-upload-area .ocr-upload-text {
  margin-top: var(--s6);
  margin-bottom: 0;
  font-size: var(--s4);
  color: var(--text-default);
  font-weight: 500;
}
.ocr-upload-area .ocr-upload-text.isMobile {
  display: none;
}
.ocr-upload-area .upload-icon {
  width: var(--s12);
  height: var(--s12);
}
.ocr-upload-area.has-image {
  display: none;
  margin-top: var(--s4);
  text-align: center;
  cursor: default;
}
.ocr-upload-area.has-image #ocrPreviewImg {
  max-width: var(--full);
  max-height: 250px;
  border-radius: var(--s2);
}
.ocr-upload-area.has-image #previewText {
  margin: var(--s6) 0 var(--s4) 0;
  color: var(--text-default);
  font-size: var(--text-md);
}
.ocr-upload-area.has-image .ocrBtn-box {
  margin-top: var(--s4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--s3);
}

@media (max-width: 768px) {
  .ocr-upload-area .ocr-upload-text {
    display: none;
  }
  .ocr-upload-area .ocr-upload-text.isMobile {
    display: block;
  }
}
.ocr-upload-area {
  padding: var(--s10);
  text-align: center;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
}

.ocr-upload-area.has-image {
  padding: var(--s5);
}

.ocr-upload-area.drag-over {
  border-color: #00A0DC;
  background-color: #f0f9ff;
}

.db-col-info,
.db-col-calc {
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--s5);
}

.db-col-info {
  display: grid;
  grid-template-rows: 228px 184px 184px;
}

.db-info-card,
.db-col-info > .db-info-card,
.db-col-calc > .calculator-card {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: var(--s8);
  border: none;
  border-radius: var(--radius-xl);
  -webkit-box-shadow: 0 var(--s1) var(--s5) 0 rgba(193, 208, 219, 0.2);
          box-shadow: 0 var(--s1) var(--s5) 0 rgba(193, 208, 219, 0.2);
  overflow: hidden;
}

.db-info-card {
  background-color: var(--white);
}
.db-info-card.db-ongoing-card, .db-info-card.db-transactions-card, .db-info-card.db-accounts-card {
  min-height: 22.5rem;
}
.db-info-card.db-ongoing-card .empty-box, .db-info-card.db-transactions-card .empty-box, .db-info-card.db-accounts-card .empty-box {
  height: calc(100% - var(--s8) * 2);
}

@media (max-width: 1024px) {
  .db-info-card,
  .db-col-info > .db-info-card,
  .db-col-calc > .calculator-card {
    padding: var(--s6) var(--s5);
  }
  .db-info-card.db-ongoing-card, .db-info-card.db-transactions-card, .db-info-card.db-accounts-card {
    min-height: auto;
  }
}
.db-card-header {
  margin-bottom: var(--s5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.db-card-header .db-card-title {
  margin-bottom: 0;
}

.db-card-title {
  margin-bottom: var(--s5);
  font-size: var(--text-lg);
  color: var(--text-heavy);
  font-weight: 700;
}
.db-card-title-white {
  margin-bottom: var(--s5);
  color: rgba(255, 255, 255, 0.9);
}

/* Dashboard Banner Card Styles */
.db-banner-card {
  width: var(--full);
  margin-bottom: var(--s5);
}

/* Dashboard Card Components */
/* Dashboard Card Components - Moved and consolidated above */
/* White Button Styles for Blue Card */
.btn-white {
  background-color: var(--white);
  color: var(--primary-default);
  border: none;
  font-weight: 600;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.btn-white:hover {
  background-color: #f8f9fa;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.btn-white-outline {
  background-color: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  font-weight: 600;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.btn-white-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 나의 송금 한도 */
.db-limit-card {
  background-color: var(--white);
  border: none;
}

.db-limit-grid {
  margin-top: var(--s4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6) var(--s4);
}

.db-limit-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s3);
}

.db-limit-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: var(--s12);
  height: var(--s12);
  background-color: var(--bg-default);
  border-radius: var(--radius);
}

.db-limit-icon svg {
  width: var(--s6);
  height: var(--s6);
}

.db-limit-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.db-limit-label {
  width: var(--full);
  font-size: var(--text-xs);
  color: var(--text-default);
  line-height: 1.16;
  font-weight: 500;
}

.db-limit-value {
  margin-top: var(--s2);
  width: var(--full);
  color: var(--text-heavy);
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
}

/* 현재 보유 잔액 */
.db-balance-card {
  background-color: var(--primary-heavy);
}

.db-card-title-white {
  font-size: var(--s4-18);
  color: rgba(255, 255, 255, 0.9);
}

.db-main-wallet {
  margin-top: var(--s9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--s2-10);
}

.wallet-val-white {
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--white);
}

@media (max-width: 1024px) {
  .wallet-val-white {
    font-size: var(--text-3xl);
  }
}
.wallet-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--s3);
}

/* 송금 가능 국가 */
.db-country-card {
  overflow: hidden;
  max-width: var(--full);
}

.country-slider-container {
  margin-top: var(--s5);
  width: var(--full);
  max-width: var(--full);
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}
.country-slider-container .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
          transition-timing-function: linear !important;
}

.country-slider {
  display: inline-block;
  -webkit-animation: slide-countries 20s linear infinite;
          animation: slide-countries 20s linear infinite;
  white-space: nowrap;
  min-width: var(--full);
  /* Ensure it takes full width initially */
}

.country-slider:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.country-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 var(--s2);
  width: 68px;
  text-align: center;
  vertical-align: top;
}

.country-flag-circle {
  margin-bottom: var(--s2);
  width: var(--s10);
  height: var(--s10);
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.country-flag-circle img {
  width: var(--full);
  height: var(--full);
  -o-object-fit: cover;
     object-fit: cover;
}

.country-name {
  font-size: var(--text-sm);
  color: var(--text-heavy);
  font-weight: 500;
}

@-webkit-keyframes slide-countries {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@keyframes slide-countries {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
/* 최근 거래 내역 & 수취 계좌 Card */
.db-transaction-list-new,
.db-account-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.db-transaction-item-new,
.db-account-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s3);
  padding: var(--s4) 0;
  border-bottom: 1px dashed #f0f0f0;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}
.db-transaction-item-new:last-child,
.db-account-item:last-child {
  border-bottom: none;
}

/* 거래 아이콘 */
.db-trans-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.db-trans-icon.deposit {
  background-color: var(--bg-positive);
  color: var(--primary-heavy);
}

.db-trans-icon.withdraw {
  background-color: var(--bg-negative);
  color: var(--negative);
}

/* 최근 거래 내역 */
.db-trans-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--s1);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.db-trans-date-new {
  font-size: var(--text-sm);
  color: var(--text-heavy);
  font-weight: 500;
}

.db-trans-type-new {
  font-size: var(--text-xs);
  font-weight: 500;
}
.db-trans-type-new.deposit {
  color: var(--primary-heavy);
}
.db-trans-type-new.withdraw {
  color: var(--negative);
}

.db-trans-amounts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: var(--s1);
}

.db-trans-amount-new {
  font-size: var(--text-md);
  font-weight: 700;
}
.db-trans-amount-new.deposit {
  color: var(--primary-heavy);
}
.db-trans-amount-new.withdraw {
  color: var(--negative);
}

.db-trans-balance-new {
  font-size: var(--text-sm);
  color: var(--text-soft);
}

.db-account-flag {
  width: var(--s10);
  height: var(--s10);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.db-account-flag img {
  width: var(--full);
  height: var(--full);
  -o-object-fit: cover;
     object-fit: cover;
}

.db-account-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.db-account-name {
  font-weight: 600;
  color: var(--text-heavy);
}

.db-account-bank {
  margin-top: var(--s1);
  font-size: var(--text-sm);
  color: var(--text-soft);
}

/* 최근 송금 내역 */
.db-ongoing-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--s4-18);
}

.db-ongoing-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 768px) {
  .db-ongoing-row .remit-card-status-wrapper {
    width: auto;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
.db-ongoing-label {
  font-size: var(--text-sm);
  color: var(--text-soft);
}

.db-ongoing-value {
  color: var(--text-heavy);
  font-weight: 600;
}

.db-ongoing-value.status-complete {
  color: var(--primary-default);
}

.db-status-inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
}

/* 공지사항 */
/* Notices Card */
.db-notice-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
}

.db-notice-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--s4) var(--s3);
  border-bottom: 1px dashed var(--border-default);
  text-decoration: none;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}

.db-notice-item:last-child {
  border-bottom: none;
}

.db-notice-item:hover {
  background-color: var(--bg-default);
}
.db-notice-item:hover .db-notice-title,
.db-notice-item:hover .db-notice-date {
  color: var(--primary-heavy);
}

.db-notice-title {
  font-size: var(--text-sm);
  color: var(--text-heavy);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-notice-date {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: var(--s3);
  font-size: var(--text-sm);
  color: var(--text-default);
  white-space: nowrap;
}

/* Help Card - New Design */
.db-help-btns-new {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}

.db-help-btn-new {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  height: var(--s12);
  padding: var(--s2) var(--s2-10);
  gap: var(--s2);
  background-color: var(--neutral-white);
  border-radius: var(--s2);
  border: 1px solid var(--border-default);
}

.db-help-btn-new:hover {
  background-color: #e9ecef;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 var(--s1) var(--s3) rgba(0, 0, 0, 0.08);
          box-shadow: 0 var(--s1) var(--s3) rgba(0, 0, 0, 0.08);
}

.db-help-icon {
  width: var(--s4);
  height: var(--s4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.db-help-btn-new svg {
  stroke: var(--text-soft);
}

.db-help-btn-new span {
  color: var(--text-heavy);
  font-weight: 600;
}

.db-help-card .contact-sns {
  margin-top: var(--s5);
}
.db-help-card .contact-sns .sns-item {
  padding: var(--s4) var(--s6);
  background-color: var(--bg-default);
  border-radius: var(--radius);
}
.db-help-card .contact-sns .sns-item h4 {
  font-size: var(--text-md);
  color: var(--text-heavy);
  font-weight: 600;
}
.db-help-card .contact-sns .sns-item p,
.db-help-card .contact-sns .sns-item.line .sns-text p {
  font-size: var(--text-sm);
  color: var(--text-default);
  font-weight: 500;
}

@media (max-width: 1024px) {
  .db-col-info,
  .db-col-calc {
    width: var(--full);
    max-width: var(--full);
    min-width: unset;
    display: contents;
  }
  .wallet-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .wallet-btns .btn {
    width: var(--full);
  }
  .db-limit-grid {
    grid-template-columns: 1fr 1fr;
  }
  .db-limit-item {
    gap: 10px;
  }
  .db-limit-card {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: var(--full);
  }
  .db-balance-card {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    width: var(--full);
  }
  .db-country-card {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
    width: var(--full);
  }
  .db-ongoing-card {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
    width: var(--full);
  }
  .db-transactions-card {
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
    width: var(--full);
  }
  .db-accounts-card {
    -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
            order: 7;
    width: var(--full);
  }
  .db-inquiry-card {
    -webkit-box-ordinal-group: 9;
        -ms-flex-order: 8;
            order: 8;
    width: var(--full);
  }
  .db-notices-card {
    -webkit-box-ordinal-group: 10;
        -ms-flex-order: 9;
            order: 9;
    width: var(--full);
  }
  .db-help-card {
    -webkit-box-ordinal-group: 11;
        -ms-flex-order: 10;
            order: 10;
    width: var(--full);
  }
  /* Help section tablet layout (769-1024px) */
}
@media (max-width: 1024px) and (min-width: 769px) {
  .contact-sns {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .contact-sns .sns-item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .db-help-btns-new {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--s3);
  }
  .db-help-btns-new a {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .db-help-qr-section {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--s4);
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }
  .db-help-qr-item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .db-help-qr-code {
    max-width: 80px !important;
    /* Reduced size */
  }
}
@media (max-width: 480px) {
  .db-limit-grid {
    grid-template-columns: 1fr;
  }
  .db-limit-grid {
    grid-template-columns: 1fr;
  }
  .db-limit-item {
    gap: var(--s3);
  }
  .db-help-btns {
    grid-template-columns: 1fr;
  }
  .db-help-btns-new {
    grid-template-columns: 1fr;
  }
  .db-col-info,
  .db-col-calc {
    width: var(--full);
    min-width: unset;
    display: contents;
  }
  .db-balance-card {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    width: var(--full);
  }
  .db-limit-card {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: var(--full);
  }
  .db-ongoing-card {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
    width: var(--full);
  }
  .db-transactions-card {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
    width: var(--full);
  }
  .db-accounts-card {
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
    width: var(--full);
  }
  .db-inquiry-card {
    -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
            order: 7;
    width: var(--full);
  }
  .db-notices-card {
    -webkit-box-ordinal-group: 9;
        -ms-flex-order: 8;
            order: 8;
    width: var(--full);
  }
  .db-help-card {
    -webkit-box-ordinal-group: 10;
        -ms-flex-order: 9;
            order: 9;
    width: var(--full);
  }
  .wallet-btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .wallet-btns .btn {
    width: var(--full);
  }
}
.common-table {
  width: var(--full);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  overflow: hidden;
}

.col-check {
  width: 80px;
  text-align: center;
}

.col-type {
  width: 100px;
  text-align: center;
}

.col-name {
  width: auto;
}

.col-num {
  width: 80px;
}

.col-balance {
  width: auto;
  text-align: right;
  font-weight: 700;
  color: #1f2937;
}

.col-status {
  width: 100px;
  text-align: center;
}

.col-delete {
  width: 100px;
}

.common-table thead {
  background-color: var(--bg-default);
}

.common-table tbody tr {
  background-color: var(--white);
  border-bottom: 1px solid #eee;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
  cursor: pointer;
}
.common-table.coupon-mode tbody tr {
  cursor: default;
}

.common-table tbody tr:hover {
  background-color: var(--bg-light);
}

.common-table tbody tr.disabled {
  background-color: var(--bg-light);
}
.common-table tbody tr.disabled td {
  color: var(--text-soft);
  cursor: not-allowed;
}

.common-table tbody tr:first-child td {
  border-top: none;
}

.common-table tbody tr:last-child {
  border-bottom: none;
}

.common-table th,
.common-table td {
  padding: var(--s4) var(--s3-14);
  font-size: var(--text-sm);
  text-align: center;
}

.common-table th {
  color: var(--text-heavy);
  font-weight: 600;
  border-bottom: 1px solid var(--border-default);
}

.common-table td {
  color: var(--text-strong);
  border-top: 1px solid var(--border-soft);
}
.common-table td.right {
  text-align: right;
}
.common-table td .check-label-group {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.common-table .faq-title {
  font-size: 15px;
  font-weight: 500;
  vertical-align: middle;
  text-align: left !important;
}

.common-table .faq-content {
  padding: var(--s6) var(--s10) var(--s6) 48px;
  line-height: 1.6;
  color: #555;
  text-align: left !important;
}

.common-table td.notice-title {
  text-align: left;
  padding-left: var(--s4);
}

.common-table td.notice-title a {
  color: var(--text-heavy);
  font-weight: 500;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.common-table td.notice-title a:hover {
  color: var(--primary-default);
}

.common-table td.center .radio-wrap {
  margin: 0 auto;
}

/* HI_02_01: 거래 내역 테이블 스타일 (History Mode) */
/* 기본 스타일은 common-table 상속 */
.common-table.history-mode td.text-right {
  text-align: right;
}

.common-table.history-mode td .field-label {
  display: none;
}

.common-table td.center,
.db-basic-table td.center,
td.center {
  text-align: center;
}

@media (max-width: 1024px) {
  .common-table th,
  .common-table td {
    padding: var(--s3) var(--s2);
    font-size: var(--text-sm);
  }
}
/* 768px 이하: 카드형 (HI_01_01 스타일 재구성) */
@media (max-width: 768px) {
  .common-table {
    border-radius: var(--radius);
  }
  .common-table .th-num,
  .common-table .td-num {
    display: none;
  }
  .common-table .th-views,
  .common-table .td-views {
    display: none;
  }
  .common-table .col-num,
  .common-table .col-views {
    display: none;
  }
  .common-table.history-mode thead {
    display: none;
  }
  .common-table.history-mode,
  .common-table.history-mode tbody {
    display: block;
    width: var(--full);
    border: none;
    background-color: transparent;
    border-collapse: separate;
  }
  .common-table.history-mode tbody {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--s3);
  }
  /* Card Container */
  .common-table.history-mode tr {
    padding: var(--s4);
    display: grid;
    grid-template-columns: auto 1fr;
    width: var(--full);
    color: var(--text-default);
    background-color: var(--white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .common-table.history-mode tr:hover {
    background-color: var(--white);
  }
  .common-table tbody tr:last-child {
    border-bottom: 1px solid var(--border-default);
  }
  /* Header Area: Date Only */
  /* 번호 숨김 history-mode */
  .common-table.history-mode td:nth-child(1) {
    display: none;
  }
  /* title 영역 부분 */
  .common-table.history-mode td:nth-child(2) {
    padding: 0;
    padding-bottom: var(--s3);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    grid-column: 1/-1;
    font-size: var(--text-sm);
    color: var(--text-strong);
    font-weight: 500;
    border-top: none;
    border-bottom: 1px solid var(--border-default);
    background-color: var(--white);
  }
  .common-table.history-mode:is(.coupon-mode):is(.invite-mode) td:nth-child(1) {
    padding: 0;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    grid-column: 1/-1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    font-weight: 600;
    color: var(--text-strong);
    border-bottom: 0;
  }
  .common-table.history-mode:is(.coupon-mode):is(.invite-mode) td:nth-child(1)::before {
    margin-bottom: var(--s3);
    padding-bottom: var(--s3);
    width: var(--full);
    grid-column: 1/-1;
    content: attr(data-label);
    font-size: var(--text-sm);
    color: var(--text-default);
    font-weight: 600;
    text-align: left;
    margin-right: auto;
    border-bottom: 1px solid var(--border-default);
  }
  .common-table.history-mode:is(.coupon-mode) td:nth-child(1) {
    padding: 0;
    padding-bottom: var(--s3);
    grid-column: 1/-1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    font-weight: 600;
    color: var(--text-strong);
    border-top: none;
    border-bottom: 1px solid var(--border-default);
  }
  .common-table.history-mode:is(.coupon-mode) td:nth-child(2) {
    padding: 0;
    padding-top: var(--s3);
    grid-column: 1/-1;
    border-bottom: 0;
  }
  .common-table.history-mode:is(.coupon-mode) td:nth-child(2)::before {
    content: attr(data-label);
    font-size: var(--text-sm);
    color: var(--text-default);
    font-weight: 600;
    margin-right: auto;
  }
  .common-table.history-mode:is(.coupon-mode) td:nth-child(2) .field-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: var(--s4);
    padding-bottom: var(--s3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-strong);
    border-bottom: 1px solid var(--border-soft);
  }
  .common-table.history-mode td:nth-child(2)::before {
    content: none;
  }
  /* Body Area: Details */
  .common-table.history-mode td:nth-child(n+3) {
    padding: 0;
    padding-top: var(--s2);
    grid-column: 1/-1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: var(--text-sm);
    color: var(--text-strong);
    font-weight: 500;
    border: none;
    background-color: var(--white);
  }
  .common-table.history-mode td:nth-child(3) {
    padding-top: var(--s3);
  }
  .common-table.history-mode td:last-child[data-label=삭제]:before {
    display: none;
  }
  /* Label Styling */
  .common-table.history-mode td:nth-child(n+3)::before {
    content: attr(data-label);
    font-size: var(--text-sm);
    color: var(--text-default);
    font-weight: 600;
    margin-right: auto;
  }
  .common-table.history-mode td .remit-card-status-wrapper {
    min-width: auto;
    width: auto;
  }
  .common-table.history-mode td.text-right {
    text-align: right;
  }
  .common-table.history-mode td .field-item {
    width: var(--full);
  }
  /* 번호 노출 number-mode : 수취 계좌, 최근 입금 계좌 모달용 */
  .common-table.number-mode td:nth-child(1),
  .common-table.number-mode td:nth-child(2) {
    padding: 0;
    padding-bottom: var(--s3);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .common-table.number-mode td:nth-child(1) {
    grid-column: 1/2;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    border-top: none;
    border-bottom: 1px solid var(--border-default);
  }
  .common-table.number-mode td:nth-child(1):before {
    content: "#";
  }
  .common-table.number-mode td:nth-child(2) {
    grid-column: 2/3;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    color: var(--primary-default);
  }
  .common-table.radio-mode td:nth-child(1):before {
    content: "";
  }
  .common-table.radio-mode td:nth-child(2) {
    color: var(--text-heavy);
  }
  .common-table.account-mode td:nth-child(1) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    padding-bottom: var(--s3);
    grid-column: 1/-1;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    border-top: none;
    border-bottom: 1px solid var(--border-default);
  }
  .common-table.account-mode td:nth-child(1)::before {
    display: block;
    content: attr(data-label);
  }
  .common-table.account-mode td:nth-child(2) {
    padding: 0;
    padding-top: var(--s3);
    width: var(--full);
    grid-column: 1/-1;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    border: none;
  }
  .common-table.account-mode td:nth-child(2)::before {
    display: block;
    content: attr(data-label);
    color: var(--text-default);
    font-weight: 600;
  }
}
@media (max-width: 480px) {
  .col-num,
  .th-num,
  .td-num {
    display: none;
  }
  .common-table th,
  .common-table td {
    padding: 10px var(--s2);
  }
  .common-table .th-views,
  .common-table .td-views {
    display: none;
  }
  .common-table .col-views {
    display: none;
  }
  .common-table.faq-table thead {
    display: none;
  }
  .common-table td.notice-title {
    padding-left: 10px;
  }
}
/* Inquiry Form Utility Classes */
.mb-0 {
  margin-bottom: 0;
}

.mb-24 {
  margin-bottom: var(--s6) !important;
}

.h-52 {
  height: var(--input-h);
}

@keyframes keypadPop {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, 15px);
            transform: translate(-50%, 15px);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}
/* Notice List Page */
.db-search-box {
  margin-bottom: var(--s6);
  padding: var(--s5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  background-color: var(--bg-default);
  border-radius: var(--radius);
  -webkit-transition: max-height 0.3s ease, opacity 0.3s ease;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}

.db-search-type,
.db-search-input,
.db-search-btn,
.db-reset-btn {
  height: var(--s10);
  font-size: var(--text-sm);
}

.db-search-type,
.db-search-input {
  min-width: 120px;
}

.db-search-type {
  padding-top: 0;
  padding-bottom: 0;
  width: auto;
  font-size: var(--text-sm);
}
.db-search-type:hover, .db-search-type:focus {
  outline: none;
  border-color: var(--primary-default);
}

.db-search-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: var(--s3) var(--s4);
  min-height: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.db-search-input:focus {
  outline: none;
  border-color: var(--primary-default);
}

.db-search-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: var(--s3) var(--s4);
  font-weight: 600;
  color: var(--white);
  background-color: #7a8e96;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  white-space: nowrap;
}
.db-search-btn:hover {
  background-color: #6a7e86;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 var(--s1) var(--s3) rgba(122, 142, 150, 0.3);
          box-shadow: 0 var(--s1) var(--s3) rgba(122, 142, 150, 0.3);
}
.db-search-btn svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.db-search-btn .search-btn-icon {
  display: none;
}

.db-reset-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  padding: var(--s3) var(--s4);
  min-width: var(--s10);
  color: var(--text-soft);
  font-weight: 600;
  background-color: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  white-space: nowrap;
}
.db-reset-btn:hover {
  border-color: var(--text-soft);
  color: var(--text-heavy);
  background-color: var(--bg-light);
}
.db-reset-btn svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.db-reset-btn .reset-text,
.db-reset-btn .reset-btn-text {
  display: none;
}

.db-table-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: var(--s3);
}
.db-table-info .remit-sort-wrapper select {
  padding-top: 0;
  padding-bottom: 0;
  height: var(--s10);
}

.db-mobile-search-toggle {
  display: none;
  margin-bottom: var(--s4);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--s1-6);
  padding: var(--s3) var(--s4);
  width: var(--full);
  font-size: var(--text-sm);
  color: var(--text-heavy);
  font-weight: 600;
  background-color: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.db-mobile-search-toggle.active {
  background-color: var(--white);
  color: var(--text-heavy);
  border-color: var(--border-default);
}
.db-mobile-search-toggle.active:hover {
  background-color: #f9f9f9;
}
.db-mobile-search-toggle.active .search-icon,
.db-mobile-search-toggle.active .search-text {
  display: none;
}
.db-mobile-search-toggle.active .close-icon,
.db-mobile-search-toggle.active .close-text {
  display: inline;
}
.db-mobile-search-toggle:hover {
  background-color: #f9f9f9;
}
.db-mobile-search-toggle .close-icon,
.db-mobile-search-toggle .close-text {
  display: none;
}
.db-mobile-search-toggle svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.db-total-count {
  font-size: var(--text-sm);
  color: var(--text-soft);
}
.db-total-count strong {
  color: var(--text-heavy);
  font-weight: 700;
}

.db-notice-list-page {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
}

.faq-row {
  cursor: pointer;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.faq-row:hover {
  background-color: var(--bg-light);
}

.faq-icon {
  width: var(--s6);
  display: inline-block;
  vertical-align: middle;
  color: #ccc;
  margin-right: var(--s2);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.faq-row.active .faq-icon {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  color: #1B5E9E;
}

.faq-content-row {
  display: none;
  background-color: #fafafa;
}

.faq-content-row.active {
  display: table-row;
}

/* Remittance List Page */
.remit-search-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s6);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.remit-search-conditions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--s2);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  max-height: 200px;
  overflow: hidden;
}

.remit-search-conditions.collapsed {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}

.remit-detail-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 10px var(--s4);
  background-color: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--s2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-heavy);
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  white-space: nowrap;
}
.remit-detail-toggle:hover {
  color: var(--primary-default);
}
.remit-detail-toggle.active {
  background-color: var(--primary-default);
  border-color: var(--primary-default);
  color: var(--white);
}
.remit-detail-toggle .toggle-text {
  font-weight: 600;
}
.remit-detail-toggle .hidden {
  display: none;
}

.date-separator {
  font-size: var(--text-sm);
  color: var(--text-soft);
  font-weight: 500;
  margin: 0 var(--s1);
}

.remit-quick-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
}

.remit-quick-btn {
  padding: var(--s2) 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-default);
  border: 1px solid var(--border-default);
  background-color: var(--white);
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  white-space: nowrap;
}

.remit-quick-btn:hover {
  border-color: var(--primary-default);
  color: var(--primary-default);
  background-color: var(--bg-light);
}

.remit-quick-btn.active {
  color: var(--white);
  font-weight: 600;
  background-color: var(--primary-default);
  border-color: var(--primary-default);
}

.remit-sort-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s3);
}
.remit-sort-wrapper select {
  padding-top: var(--s2);
  padding-bottom: var(--s2);
  font-size: var(--text-sm);
}

.remit-table .remit-receipt-num {
  font-weight: 600;
  color: var(--text-heavy);
}

.remit-table .remit-amount {
  text-align: right;
  font-weight: 600;
  color: var(--text-heavy);
}

.remit-action-btn {
  padding: 6px var(--s4);
  background-color: var(--primary-default);
  color: var(--white);
  border: none;
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  white-space: nowrap;
}

.remit-action-btn:hover {
  background-color: var(--primary-strong);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px var(--s2) rgba(0, 160, 220, 0.3);
          box-shadow: 0 2px var(--s2) rgba(0, 160, 220, 0.3);
}

/* Improved Search Box Layout */
.remit-search-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--s3);
  margin-bottom: var(--s4);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

/* Search Conditions Wrapper - Left Side */
.search-conditions-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--s2);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* Always Visible: Period + Quick Buttons */
.search-conditions-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.remit-search-wrapper {
  margin-bottom: var(--s5);
}

.remit-search-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--s5);
  padding: var(--s5);
  background-color: var(--bg-default);
  border-radius: var(--s2);
}

.remit-search-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.search-label,
.db-search-input,
.date-separator,
.remit-quick-btns-inline,
.remit-search-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: var(--s10);
}

/* Left Side: Search Conditions */
.remit-search-left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* Right Side: Buttons */
.remit-search-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: var(--s2);
}

.remit-search-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
}

/* Detail Toggle Button - No background, minimal padding with hover on text and icon */
.remit-detail-toggle-btn {
  padding-inline: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.remit-detail-toggle-btn.active .toggle-arrow {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.remit-detail-toggle-btn .toggle-arrow {
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

/* Detail Search Section (Collapsible) */
.remit-search-detail {
  display: none;
  margin-top: var(--s3);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s3);
}
.remit-search-detail.show {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.search-label {
  min-width: var(--s10);
  font-size: var(--text-sm);
  color: var(--text-default);
  font-weight: 600;
}

.remit-quick-btns-inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 2px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.remit-quick-btns-inline .remit-quick-btn-small {
  padding: var(--s2) 10px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-heavy);
  background-color: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  white-space: nowrap;
}
.remit-quick-btns-inline .remit-quick-btn-small:hover {
  border-color: var(--primary-default);
  color: var(--primary-default);
  background-color: var(--primary-default-light);
}

/* Tablet view (768px - 1024px): Reset button text already hidden by default */
@media (max-width: 1024px) {
  .db-search-box.mobile-active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .db-user-dropdown .btn-text {
    display: none;
  }
}
@media (max-width: 768px) {
  .db-mobile-search-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .db-search-box {
    display: none;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .db-search-type {
    min-width: calc(50% - var(--s2));
  }
  /* Search Form Mobile Layout */
  .remit-search-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .remit-search-right {
    width: var(--full);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .search-label,
  .remit-quick-btns-inline,
  .remit-search-buttons {
    height: auto;
  }
  .remit-search-buttons {
    width: var(--full);
  }
  .db-search-btn {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  /* Search section mobile layout */
  .remit-search-section {
    gap: 2px;
    width: var(--full);
  }
  .search-label {
    margin-bottom: var(--s1);
    width: var(--full);
  }
  .remit-search-detail {
    margin-top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: var(--full);
    gap: 0;
  }
  .remit-search-detail .search-label {
    margin-top: var(--s3);
  }
  .remit-search-detail .db-search-type {
    width: var(--full);
  }
  .remit-search-detail .db-search-input {
    width: var(--full);
  }
  .remit-detail-toggle-btn {
    display: none;
  }
  .remit-search-wrapper {
    display: none;
  }
  .remit-search-wrapper.mobile-active {
    display: block;
  }
  .remit-quick-btns-inline {
    margin-top: var(--s2);
    width: var(--full);
  }
  .remit-quick-btn-small {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: auto;
  }
}
@media (max-width: 480px) {
  .db-search-type,
  .db-search-input {
    width: var(--full);
  }
  .db-search-btn,
  .db-reset-btn {
    min-width: var(--full);
  }
  .db-search-btn .search-btn-icon {
    display: block;
  }
  .db-reset-btn .reset-text {
    display: inline;
  }
  .db-reset-btn .reset-btn-text {
    display: inline;
  }
  .db-mobile-search-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .remit-search-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--s3);
  }
  .remit-search-left {
    width: var(--full);
  }
  .remit-search-right {
    width: var(--full);
  }
  .remit-search-section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: var(--full);
    gap: 2px;
  }
  .search-label {
    width: var(--full);
  }
  .remit-search-section > .search-label,
  .remit-search-section > .db-search-input {
    display: inline-block;
  }
  .remit-search-section > .date-separator {
    display: none;
  }
  .remit-quick-btns-inline {
    width: var(--full);
    margin-left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    overflow-x: auto;
  }
  .remit-detail-toggle-btn {
    display: none;
  }
  .remit-search-buttons {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: var(--full);
    gap: var(--s2);
  }
}
.date-separator {
  color: var(--text-soft);
  margin: 0 var(--s1);
  font-size: 1.1rem;
}

.search-field-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}

.search-field-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Hide columns on desktop */
.hide-desktop {
  display: none !important;
}

/* Expandable Rows */
.remit-row {
  cursor: pointer;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.remit-row:hover {
  background-color: var(--bg-light);
}

.remit-row.expanded {
  background-color: #e8f4f8;
}

.remit-detail-row {
  display: none;
}

.remit-detail-row.show {
  display: table-row;
}

.remit-detail-row.show td {
  padding: 0 !important;
}

.remit-detail-content {
  padding: var(--s5);
  background-color: #f8fafb;
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--s8);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.remit-detail-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: var(--s3);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.remit-detail-label {
  font-size: 0.75rem;
  color: var(--text-soft);
  font-weight: 600;
  text-transform: uppercase;
  min-width: 80px;
}

.remit-detail-value {
  font-size: 0.95rem;
  color: var(--text-heavy);
  font-weight: 600;
}

@media (max-width: 1024px) {
  /* Remittance List - Card Layout for Tablet/Mobile */
  .remit-table {
    display: block;
  }
  .remit-detail-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: var(--s4);
    padding: 0;
    background-color: transparent;
    border: none;
  }
  .remit-detail-item {
    width: var(--full);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media (max-width: 480px) {
  .remit-search-box {
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--s3);
  }
  .remit-search-box.mobile-active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .search-conditions-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: var(--full);
  }
  .search-conditions-main {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: var(--full);
  }
  .search-conditions-detail.show {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: var(--full);
  }
  .search-buttons-wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: var(--full);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .search-buttons-top {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .search-buttons-bottom {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  .remit-search-box .search-label {
    font-size: var(--text-sm);
  }
  .remit-search-box .db-search-input.date-picker-custom {
    width: var(--full);
  }
  .remit-search-box .date-separator {
    display: none;
  }
  .search-conditions-detail {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .remit-search-box .db-reset-btn {
    width: auto;
    padding: var(--s2) var(--s4);
  }
  .remit-search-box .db-reset-btn .reset-text {
    display: inline;
  }
  .search-field-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: var(--full);
    gap: 6px;
  }
  .search-field-wrapper .db-search-type {
    width: var(--full);
  }
  .search-field-wrapper .db-search-input {
    width: var(--full);
    min-width: var(--full);
  }
  .db-table-info {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .remit-sort-wrapper {
    width: auto;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .db-mobile-search-toggle {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .db-notice-list-page {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .remit-action-btn {
    padding: var(--s1) 10px;
    font-size: 0.75rem;
  }
  .common-table.faq-table thead {
    display: none !important;
  }
  .common-table.faq-table td.faq-title {
    text-align: left !important;
    padding-left: 0;
  }
  .faq-table td.faq-content {
    padding: var(--s4);
    text-align: left !important;
  }
  .common-table.faq-table .col-icon {
    width: 30px;
    padding: 10px var(--s1);
  }
  .faq-icon {
    width: 18px;
    margin-right: var(--s1);
  }
}
/* Notice Detail Page */
.notice-detail-card {
  background-color: var(--white);
  border-radius: var(--s3);
  padding: var(--s8);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.notice-detail-header {
  margin-bottom: var(--s6);
}

.notice-detail-title {
  margin: var(--s4) 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-heavy);
  line-height: 1.4;
}

.notice-detail-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--s6);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.notice-detail-meta .meta-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--text-soft);
}

.notice-detail-meta .meta-item svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.notice-detail-meta .meta-label {
  font-weight: 500;
}

.notice-detail-meta .meta-value {
  color: var(--text-default);
  font-weight: 600;
}

.notice-detail-divider {
  height: 1px;
  background-color: var(--border-default);
  margin: var(--s6) 0;
}

.notice-detail-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-default);
  min-height: 300px;
  padding: var(--s5) 0;
}

.notice-detail-content p {
  margin: 0;
}

.notice-detail-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--s2);
}

.notice-nav-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border-default);
  border-radius: var(--s2);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  text-decoration: none;
}

.notice-nav-item:hover {
  background-color: var(--bg-light);
  border-color: var(--primary-default);
}

.notice-nav-item svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--text-soft);
}

.notice-nav-item:hover svg {
  color: var(--primary-default);
}

.notice-nav-item .nav-label {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 50px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-soft);
}

.notice-nav-item .nav-number {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-soft);
  min-width: 30px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.notice-nav-item .nav-title {
  font-size: var(--text-sm);
  color: var(--text-default);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-nav-item:hover .nav-title {
  color: var(--primary-default);
}

.notice-detail-footer {
  margin-top: var(--s8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.notice-detail-footer .btn {
  min-width: 120px;
  padding: 10px var(--s6);
}

.inquiry-reply-section {
  padding: var(--s6);
  background-color: var(--bg-default);
  border-radius: var(--radius-lg);
}
.inquiry-reply-section .reply-title {
  margin-bottom: var(--s3);
  font-size: var(--text-xl);
}

@media (max-width: 768px) {
  .notice-detail-card {
    padding: var(--s6) var(--s5);
  }
  .notice-detail-meta {
    gap: var(--s4);
  }
  .notice-detail-meta .meta-item {
    font-size: var(--text-sm);
  }
  .notice-detail-content {
    font-size: 0.95rem;
    padding: var(--s4) 0;
    min-height: 200px;
  }
  .notice-nav-item {
    padding: 10px var(--s3);
  }
  .notice-nav-item .nav-label {
    font-size: var(--text-xs);
    min-width: 45px;
  }
  .notice-nav-item .nav-title {
    font-size: var(--text-sm);
  }
}
@media (max-width: 480px) {
  .notice-detail-card {
    padding: var(--s5) var(--s4);
  }
  .notice-detail-title {
    margin-bottom: var(--s3);
  }
  .notice-detail-meta {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--s2);
  }
  .notice-detail-divider {
    margin: var(--s4) 0;
  }
  .notice-detail-content {
    font-size: var(--text-sm);
  }
  .notice-detail-footer {
    margin-top: var(--s6);
  }
  .notice-detail-footer .btn {
    width: var(--full);
    min-width: auto;
  }
}
/* Request Remittance Page */
.limit-info-grid {
  margin-bottom: var(--s6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}

.limit-info-item {
  padding: var(--s5) var(--s6);
  text-align: left;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: var(--white);
  border-radius: var(--radius-xl);
  -webkit-box-shadow: var(--shadow);
          box-shadow: var(--shadow);
}
.limit-info-item:nth-child(1) .limit-label:before {
  background-image: url("../images/svg/icon_remit_1.svg");
}
.limit-info-item:nth-child(2) .limit-label:before {
  background-image: url("../images/svg/icon_remit_2.svg");
}
.limit-info-item:nth-child(3) .limit-label:before {
  background-image: url("../images/svg/icon_remit_3.svg");
}
.limit-info-item:nth-child(4) .limit-label:before {
  background-image: url("../images/svg/icon_remit_4.svg");
}

.limit-info-item .limit-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s1);
  font-size: var(--text-sm);
  font-weight: var(--text-soft);
}
.limit-info-item .limit-label:before {
  content: "";
  width: var(--s8);
  height: var(--s8);
  background-color: var(--bg-default);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-radius: var(--s2-10);
}

.limit-info-item .limit-value {
  font-size: var(--text-xl);
  color: var(--text-heavy);
  font-weight: 700;
  line-height: 1.6;
}

.remit-form-section {
  margin-bottom: var(--s6);
}

.amountSectionWrapper {
  display: none;
  margin-top: var(--s6);
  padding: var(--s6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.amountSectionWrapper .form-row-full,
.amountSectionWrapper .form-row,
.amountSectionWrapper .form-row-2,
.amountSectionWrapper .form-row-3 {
  margin-bottom: var(--s8);
}
.amountSectionWrapper .btn.btn-secondary.active {
  color: var(--primary-heavy);
  background-color: var(--bg-default);
  border: 1px solid var(--primary-heavy);
}

.remit-calc-result {
  display: none;
  margin-top: var(--s8);
  padding: var(--s5);
  background-color: #EBF5FD;
  border-radius: var(--radius);
}

.remit-calc-result.active {
  display: block;
}

.calc-result-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border-default);
}

.calc-result-row:last-child {
  border-bottom: none;
}

.calc-result-row .calc-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-default);
}

.calc-result-row .calc-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-default);
}

.textarea-input {
  min-height: 100px;
  resize: vertical;
}

/* Exchange rate display */
.exchange-rate-display {
  display: none;
}

.exchange-rate-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: var(--s12);
  padding: 0 var(--s4);
  color: var(--primary-heavy);
  font-weight: 600;
  background-color: var(--bg-light);
  border-radius: var(--radius);
}

/* Amount input wrapper */
.amount-input-wrapper {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.currency-symbol-fixed {
  position: absolute;
  left: var(--s4);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-heavy);
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.amount-input {
  padding-left: 58px;
}

@media (max-width: 768px) {
  .amount-input {
    padding-left: var(--s12);
  }
}
/* Quick amount buttons */
.quick-amount-buttons {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--s2);
}

@media (max-width: 768px) {
  .quick-amount-buttons .btn {
    padding: 0 var(--s3);
    height: var(--s7);
  }
}
@media (max-width: 768px) {
  .quick-amount-buttons .btn {
    height: var(--s10);
  }
}
/* Calculation result */
.calc-col-item.hidden {
  display: none;
}

.calc-result-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s2);
}

.calc-result-cols.four-items {
  grid-template-columns: repeat(4, 1fr);
}

.calc-col-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--s3) 0;
  border-right: 1px solid var(--border-default);
}

.calc-col-item:last-child {
  border-right: none;
}

.calc-col-label {
  margin-bottom: var(--s-1-6);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-default);
  white-space: nowrap;
}

.calc-col-item.highlight .calc-col-label {
  font-weight: 600;
  color: var(--primary-heavy);
}

.calc-col-value {
  max-width: var(--full);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-heavy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calc-col-item.highlight .calc-col-value {
  color: var(--primary-heavy);
}

/* Responsive styles for remittance page */
@media (max-width: 1024px) {
  .limit-info-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s3);
    margin-bottom: var(--s5);
  }
  .limit-info-item .limit-label {
    margin-bottom: var(--s1);
  }
}
@media (max-width: 768px) {
  .limit-info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: var(--s4);
  }
  .limit-info-item .limit-label {
    margin-bottom: var(--s1);
  }
  .remit-form-section {
    margin-bottom: var(--s5);
  }
  .remit-calc-result {
    padding: var(--s1) var(--s4);
  }
  .calc-result-cols {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0;
  }
  .calc-col-item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: var(--s3) 14px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--border-default);
  }
  .calc-col-item:last-child {
    border-bottom: none;
  }
  .calc-col-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 var(--full);
            flex: 0 0 var(--full);
  }
  .calc-col-label {
    margin-bottom: 0;
    text-align: left;
  }
  .calc-col-value {
    font-size: var(--text-md);
    text-align: right;
  }
}
@media (max-width: 480px) {
  .limit-info-grid {
    margin-bottom: var(--s3);
    gap: var(--s4);
  }
  .limit-info-item {
    border-radius: var(--radius-lg);
  }
  .limit-info-item .limit-label {
    margin-bottom: 3px;
  }
  .calc-result-cols {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
  }
  .calc-col-item {
    padding: 10px var(--s3);
    border: none;
    border-bottom: 1px solid var(--border-default);
  }
  .calc-col-item:last-child {
    border-bottom: none;
  }
  .calc-result-row .calc-label {
    font-size: var(--text-xs);
  }
  .calc-result-row .calc-value {
    font-size: var(--text-sm);
  }
}
/* Remittance Card Grid Layout - 1 card per row */
.remit-card-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s5);
}

.remit-card {
  background-color: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--s2);
  padding: var(--s4) var(--s5);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--s3);
}

.remit-card:hover {
  -webkit-box-shadow: 0 var(--s1) var(--s3) rgba(0, 0, 0, 0.08);
          box-shadow: 0 var(--s1) var(--s3) rgba(0, 0, 0, 0.08);
  border-color: var(--primary-default);
}

/* First Row: Receipt Info */
.remit-card-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border-default);
}
.remit-card-header .btn.btn-text {
  margin-left: auto;
  padding-inline: 0;
  height: auto;
}

.remit-card-receipt-num {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-soft);
}

.remit-card-date {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heavy);
}

.remit-card-view-btn {
  margin-left: auto;
  padding: 0;
  background-color: transparent;
  color: var(--primary-default);
  border: none;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  white-space: nowrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s1);
}

.remit-card-view-btn:hover {
  color: var(--primary-default);
}

/* Second Row: 4 Columns */
.remit-card-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.remit-card-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* Column 1: KR Flag + Send/Deposit Amounts */
.remit-card-kr-amounts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s3);
  min-width: 170px;
}

.remit-card-flag {
  width: var(--s8);
  height: var(--s8);
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.remit-card-amounts-krw {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--s1);
}

.remit-card-amount-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
}

.remit-card-amount-label {
  font-size: 0.75rem;
  color: var(--text-soft);
  font-weight: 500;
  min-width: var(--s8);
}

.remit-card-amount-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-heavy);
}

/* Arrow between Column 1 and 2 */
.remit-card-arrow {
  color: var(--text-soft);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 var(--s2);
}

/* Column 2: Destination Flag + Amount (No Label) */
.remit-card-receive-amount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s2);
  min-width: 200px;
}

.remit-card-flag {
  width: var(--s8);
  height: var(--s8);
}

.remit-card-amount-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-heavy);
}

/* Column 3: Details (Name, Bank, Date) - Wider to prevent wrapping */
.remit-card-details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--s1);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 185px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.remit-card-detail-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--s2);
  font-size: var(--text-sm);
}

.remit-card-detail-label {
  color: var(--text-soft);
  min-width: 50px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.remit-card-detail-value {
  font-weight: 600;
  color: var(--text-heavy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

/* ===== Receipt Modal Styles (Bank Statement / toss style) ===== */
.receipt-layout {
  padding: 10px 10px 0;
}

.receipt-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: var(--s5);
  border-bottom: 2px solid var(--text-heavy);
}

.receipt-logo {
  height: var(--s6);
  margin-bottom: 10px;
}

.receipt-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-heavy);
}

.receipt-section-title {
  margin-bottom: var(--s3);
  font-weight: 700;
  color: var(--text-heavy);
}

.receipt-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 2px 0;
  font-size: var(--text-md);
}

.receipt-label {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  color: var(--text-soft);
  font-weight: 500;
}

.receipt-value {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  color: var(--text-heavy);
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.receipt-sub-text {
  display: block;
  font-size: var(--text-xs);
  color: #999;
  margin-top: var(--s1);
  font-weight: 400;
}

.receipt-divider {
  height: 1px;
  background-color: #eee;
  margin: 15px 0;
}

.receipt-divider.dashed {
  background-color: transparent;
  border-top: 1px dashed #ddd;
}

.receipt-total-section {
  margin-top: var(--s5);
  padding: var(--s5);
  background-color: var(--bg-default);
  border-radius: var(--s3);
}

.receipt-total-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.receipt-total-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-default);
}

.receipt-total-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-default);
}

.receipt-footer {
  margin-top: var(--s10);
  text-align: center;
  font-size: var(--text-xs);
  color: #aaa;
}

@media (max-width: 1024px) {
  .remit-card-receive-amount {
    min-width: 160px;
  }
  .remit-card-amount-value {
    font-size: var(--text-sm);
  }
}
@media (max-width: 768px) {
  /* Card Mobile Layout - Keep amounts in one row */
  .remit-card-body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: var(--s2);
  }
  .remit-card-kr-amounts {
    min-width: auto;
    gap: var(--s2);
  }
  .remit-card-kr-amounts .remit-card-flag {
    width: var(--s6);
    height: var(--s6);
  }
  .remit-card-amounts-krw {
    gap: 2px;
  }
  .remit-card-amount-label {
    font-size: 0.65rem;
    min-width: var(--s7);
  }
  .remit-card-amount-value {
    font-size: var(--text-xs);
  }
  .remit-card-arrow {
    margin: 0 var(--s1);
  }
  .remit-card-arrow svg {
    width: 18px;
    height: 18px;
  }
  .remit-card-receive-amount {
    min-width: auto;
    gap: 6px;
  }
  .remit-card-flag {
    width: var(--s6);
    height: var(--s6);
  }
  .remit-card-amount-value {
    font-size: var(--text-sm);
  }
  .remit-card-details {
    width: var(--full);
    min-width: var(--full);
    margin-top: var(--s2);
  }
  .remit-card-detail-value {
    max-width: 250px;
  }
  .remit-detail-grid {
    grid-template-columns: 1fr;
  }
}
/* Print Styles */
/* Print Styles */
@media print {
  @page {
    size: A4 portrait;
  }
  html {
    font-size: 14px !important;
  }
  html,
  body {
    overflow: visible !important;
    height: auto !important;
  }
  body > * {
    display: none !important;
  }
  #remitModal {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    background: white !important;
    z-index: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    -webkit-transform: none !important;
            transform: none !important;
    padding: 0 !important;
  }
  #remitModal .modal-content,
  #remitModal .modal-inner,
  #remitModal .modal-body {
    -webkit-transform: none !important;
            transform: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    -webkit-animation: none !important;
            animation: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #remitModal .modal-content {
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
  }
  #remitModal .modal-inner {
    padding: 0 !important;
  }
  #remitModal .modal-header,
  #remitModal .modal-footer,
  #remitModal .modal-close {
    display: none !important;
  }
  #remitModal .modal-body {
    padding: 0 !important;
  }
  #remitModal .receipt-layout {
    padding: 0 !important;
    padding-bottom: 12mm !important;
  }
  #remitModal .receipt-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #remitModal .receipt-logo {
    margin-top: 0 !important;
  }
  #remitModal .receipt-layout {
    line-height: 1.4 !important;
  }
  #remitModal .receipt-footer {
    display: block !important;
    margin-top: 5mm !important;
    padding-top: 3mm !important;
    padding-bottom: 2mm !important;
    color: #666 !important;
    line-height: 1.6 !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
       -moz-column-break-inside: avoid !important;
            break-inside: avoid !important;
  }
  /* Force background graphics for logos/colors if needed */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}
/* New Receipt Button Styles */
.btn-receipt-print {
  background-color: var(--primary-default);
  color: white;
  border: none;
  border-radius: var(--s2);
  padding: var(--s3);
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}

.btn-receipt-print:hover {
  background-color: var(--primary-strong);
}

.btn-receipt-close {
  background-color: #f1f3f5;
  color: var(--text-heavy);
  border: 1px solid var(--border-default);
  border-radius: var(--s2);
  padding: var(--s3);
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}

.btn-receipt-close:hover {
  background-color: #e9ecef;
}

/* Receipt Mobile Typography & Layout Fixes */
@media (max-width: 480px) {
  .receipt-title {
    font-size: 1.2rem;
  }
  .receipt-section-title {
    font-size: 1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: var(--s2);
    margin-bottom: 15px;
  }
  /* Stacked Layout: Label Top, Value Bottom, Left Align */
  .receipt-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: var(--s1);
    margin-bottom: var(--s3);
    padding: 0;
    border-bottom: none;
  }
  .receipt-label {
    width: var(--full);
    text-align: left;
    font-size: var(--text-sm);
    color: #7a8e96;
  }
  .receipt-value {
    width: var(--full);
    text-align: left;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-left: 0;
    font-size: 0.95rem;
    word-break: break-all;
  }
  /* Total Section Layout */
  .receipt-total-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: var(--s2);
  }
  .receipt-total-label {
    font-size: var(--text-sm);
  }
  .receipt-total-value {
    font-size: 1.4rem;
    text-align: left;
    width: var(--full);
  }
  .modal-body {
    padding: var(--s5) 15px !important;
  }
  .receipt-footer {
    font-size: 0.7rem;
    margin-top: 30px;
  }
}
/* Quick Action Buttons in Forms */
.form-sec-head-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: var(--s6);
}

.form-sec-head-wrap .form-sec-head {
  margin-bottom: 0;
}

.head-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--s2);
}

/* Account Selection Modal Styles */
.account-table-container {
  padding: var(--s5);
}

.account-table-sticky-header {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Account Table Column Widths */
.account-col-num {
  width: 75px;
}

.account-col-country {
  width: 100px;
}

.account-col-name {
  width: 150px;
}

.account-col-bank {
  width: 180px;
}

.account-col-account {
  width: 180px;
}

/* Hide card list by default, show only on mobile */
.account-card-list {
  display: none;
}

/* Account Modal Responsive Styles */
@media (max-width: 1024px) {
  .account-table-container {
    padding: 15px;
  }
  .account-col-num {
    width: var(--s15);
  }
  .account-col-country {
    width: 80px;
  }
  .account-col-name {
    width: 120px;
  }
  .account-col-bank {
    width: 140px;
  }
  .account-col-account {
    width: 140px;
  }
}
@media (max-width: 768px) {
  .account-table-container {
    padding: 10px;
  }
  /* Hide table, show card layout */
  #accountCardList {
    display: none;
  }
  .account-card-list {
    display: block;
    padding: var(--s5);
  }
  .account-card {
    background-color: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: var(--s2);
    padding: var(--s4);
    margin-bottom: var(--s3);
    cursor: pointer;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .account-card:hover {
    border-color: var(--primary-default);
    -webkit-box-shadow: 0 2px var(--s2) rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px var(--s2) rgba(0, 0, 0, 0.1);
  }
  .account-card-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: var(--s3);
    padding-bottom: var(--s3);
    border-bottom: 1px solid #f0f0f0;
  }
  .account-card-number {
    font-size: 14px;
    color: #666;
    font-weight: 500;
  }
  .account-card-country {
    font-size: 13px;
    color: var(--primary-default);
    font-weight: 600;
  }
  .account-card-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--s2);
  }
  .account-card-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
  }
  .account-card-label {
    min-width: 80px;
    color: #666;
    font-weight: 500;
  }
  .account-card-value {
    color: #333;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
/* Responsive: Move buttons below title on small screens */
@media (max-width: 480px) {
  .form-sec-head-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: var(--s3);
  }
  .form-sec-head-wrap .form-sec-head {
    margin-bottom: 0;
  }
  .head-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: var(--full);
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .head-buttons button {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    height: var(--s10);
  }
}
/* RM_02_02 Recurring Remittance Form Styles */
.field-flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--s2);
}

.text-hint {
  font-size: var(--text-sm);
  color: #666;
  margin-bottom: var(--s4);
}

/* Table Column Width Classes */
.col-select {
  width: 80px;
}

@media (max-width: 480px) {
  .col-select {
    width: 15%;
  }
}
@media (max-width: 768px) {
  .col-select {
    width: 60px;
  }
}
.col-quarter {
  width: 25%;
}

.col-40 {
  width: 40%;
}

.col-auto {
  width: auto;
}

/* Read-only field value text style */
.field-value-text {
  font-size: 1rem;
  color: #333;
  padding: var(--s3) 0;
  background-color: transparent;
  border: none;
}

/* Balance Round Box */
.remit-balance-round-box {
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--primary-heavy);
  background-color: var(--bg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--s3);
}

.remit-balance-round-box .balance-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s3);
}

.remit-balance-round-box .label {
  font-size: 15px;
  color: #4b5563;
  font-weight: 500;
}

.remit-balance-round-box .value {
  font-size: var(--s5);
  color: #1e3a8a;
  font-weight: 700;
}

@media (max-width: 768px) {
  .remit-balance-round-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: var(--s3);
    padding: var(--s4);
  }
  .remit-balance-round-box .btn-confirm {
    width: var(--full);
    text-align: center;
  }
  .remit-balance-round-box .balance-info {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    /* 좌 라벨 우 값 */
    width: var(--full);
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--s1);
    margin-bottom: var(--s1);
  }
}
/* Modal Basic Table Style */
.db-basic-table {
  width: var(--full);
  border-collapse: collapse;
}

.db-basic-table th,
.db-basic-table td {
  padding: var(--s3);
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  font-size: 14px;
  color: #374151;
}

.db-basic-table th {
  background-color: #f9fafb;
  font-weight: 600;
}

.db-basic-table td.center {
  text-align: center;
}

/* Refund Modal Specific Styles - Moving inline styles to CSS */
#refundAccountModal .db-modal-content {
  max-width: 600px;
}

#refundAccountModal .common-tabs {
  margin-bottom: var(--s5);
}

#refundAccountModal .db-modal-desc {
  margin-bottom: var(--s3);
  font-size: 14px;
  color: #666;
}

#refundAccountModal .db-table-responsive-wrapper {
  max-height: 300px;
  overflow-y: auto;
}

#refundAccountModal #tab-direct {
  padding: 10px 0;
}

#accountModal .field-item,
#refundAccountModal .field-item {
  margin-bottom: var(--s5);
}
#accountModal .field-item:last-of-type,
#refundAccountModal .field-item:last-of-type {
  margin-bottom: 0;
}

#resetPasswordModal .field-group {
  margin-bottom: var(--s5);
}
#resetPasswordModal .field-group:last-of-type {
  margin-bottom: 0;
}

#refundAccountModal .db-select {
  padding-right: 30px;
}

#refundAccountModal .db-modal-footer .btn {
  min-width: 80px;
}

/* Radio Wrap Centering Fix */
.radio-wrap {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  vertical-align: middle;
  cursor: pointer;
}

/* Inquiry Status Badges */
.badge-status {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--s1);
  font-size: 14px;
  font-weight: 600;
}

.badge-status svg {
  width: var(--s4);
  height: var(--s4);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.badge-status.pending {
  color: #d97706;
  /* Orange for Processing */
}

.badge-status.completed {
  color: #059669;
  /* Green for Completed, matching status-verified */
}

/* Inquiry Bottom Info Box (CS_03_01) */
.inquiry-bottom-info {
  background-color: #f9fafb;
  border-radius: var(--s3);
  padding: var(--s6);
  margin-top: var(--s8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #ededed;
}

.inquiry-info-text {
  color: #666;
  font-size: 14px;
}

.inquiry-info-text strong {
  color: #333;
  display: block;
  font-size: var(--s4);
  margin-bottom: var(--s1);
}

@media screen and (max-width: 760px) {
  .inquiry-bottom-info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: var(--s5);
    padding: var(--s5);
  }
  .inquiry-bottom-info .btn-secondary {
    width: var(--full);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media screen and (max-width: 480px) {
  .inquiry-bottom-info {
    padding: var(--s4);
    gap: var(--s4);
  }
}
/* Common Divider */
.divider-thin {
  height: 1px;
  background-color: #eee;
  margin: var(--s6) 0;
  border: none;
}

.remit-edit-page {
  /* 그리드 컬럼 너비 조정 (RM_02_01 전용) */
}
.remit-edit-page .remit-card-col-bank {
  min-width: 130px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.remit-edit-page {
  /* Truncation on the value specifically */
}
.remit-edit-page .remit-card-col-bank .remit-card-detail-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
  /* Adjust as needed */
  vertical-align: middle;
}
.remit-edit-page .remit-card-col-type {
  min-width: 150px;
  /* Slight increase */
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.remit-edit-page .remit-card-col-amount {
  min-width: 150px;
  -webkit-box-flex: 1.2;
      -ms-flex: 1.2;
          flex: 1.2;
}
.remit-edit-page .remit-card-col-cycle {
  min-width: 90px;
  /* Slight decrease */
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.remit-edit-page {
  /* 상태 값 우측 정렬 */
}
.remit-edit-page .remit-card-status-wrapper {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.remit-edit-page {
  /* 라벨 스타일 (데스크탑) - 인라인 배치 */
}
.remit-edit-page .remit-card-label {
  display: inline-block;
  color: #888;
  font-size: 13px;
  margin-right: var(--s2);
  font-weight: 500;
}
.remit-edit-page {
  /* 값 스타일 미세 조정 - 글자 크기 축소 */
}
.remit-edit-page .remit-card-detail-value,
.remit-edit-page .remit-card-amount-value {
  display: inline-block;
  font-size: var(--text-sm);
  /* 조금 줄임 (기존 var(--s4) 추정 or default) */
}
.remit-edit-page {
  /* Responsive Mobile Card View (< 480px) */
}
@media (max-width: 480px) {
  .remit-edit-page {
    /* Hide Table */
  }
  .remit-edit-page .db-table-container {
    display: none;
  }
  .remit-edit-page {
    /* Show Card List */
  }
  .remit-edit-page .account-card-list.mobile-only {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--s3);
  }
  .remit-edit-page .account-card {
    background-color: var(--white);
    border: 1px solid #e5e7eb;
    border-radius: var(--s3);
    padding: var(--s4);
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  .remit-edit-page .account-card.selected {
    border-color: #00A0DC;
    background-color: #f0f9ff;
    -webkit-box-shadow: 0 0 0 1px #00A0DC;
            box-shadow: 0 0 0 1px #00A0DC;
  }
  .remit-edit-page .account-card-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: var(--s3);
    padding-bottom: var(--s3);
    border-bottom: 1px solid #f3f4f6;
  }
  .remit-edit-page .account-card-radio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--s2);
    font-weight: 600;
    color: #1f2937;
  }
  .remit-edit-page .account-card-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--s2);
  }
  .remit-edit-page .account-card-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 14px;
  }
  .remit-edit-page .account-card-label {
    color: #6b7280;
  }
  .remit-edit-page .account-card-value {
    color: #111827;
    font-weight: 500;
  }
}
.remit-edit-page {
  /* Adjustments for Small Mobile (< 480px) */
}
@media (max-width: 480px) {
  .remit-edit-page .field-value-text {
    padding: 10px 0;
    font-size: var(--text-sm);
  }
}

#scheduleDetailModal .receipt-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--s3);
}
#scheduleDetailModal .receipt-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 15px;
  border-bottom: 1px dashed #eee;
  padding-bottom: var(--s3);
}
#scheduleDetailModal .receipt-row:last-child {
  border-bottom: none;
}
#scheduleDetailModal .receipt-label {
  color: #666;
  font-weight: 500;
}
#scheduleDetailModal .receipt-value {
  color: #333;
  font-weight: 600;
}

@media (max-width: 768px) {
  #scheduleDetailModal .remit-card-col-bank,
  #scheduleDetailModal .remit-card-col-type,
  #scheduleDetailModal .remit-card-col-amount,
  #scheduleDetailModal .remit-card-col-cycle,
  #scheduleDetailModal .remit-card-status-wrapper {
    min-width: auto;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: var(--full);
    margin-bottom: var(--s1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #scheduleDetailModal {
    /* 상태 라벨 표시 (모바일) */
  }
  #scheduleDetailModal .remit-card-status-label {
    display: inline-block !important;
    color: #888;
    font-size: 13px;
    margin-right: var(--s2);
    font-weight: 500;
  }
  #scheduleDetailModal {
    /* Ensure pseudo-elements are removed since we use real labels now */
  }
  #scheduleDetailModal .remit-card-col-bank::before,
  #scheduleDetailModal .remit-card-col-type::before,
  #scheduleDetailModal .remit-card-col-amount::before,
  #scheduleDetailModal .remit-card-col-cycle::before {
    content: none !important;
  }
  #scheduleDetailModal .remit-card-label {
    font-size: 13px;
    margin-right: 0;
  }
}
/* 모달 480px 이하에서도 좌우 배치 강제 */
@media (max-width: 480px) {
  #scheduleDetailModal .receipt-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
    -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #scheduleDetailModal {
    /* 출금 계좌 정보만 세로 배치 */
  }
  #scheduleDetailModal .receipt-row.account-modal-row {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
    gap: 6px;
    padding-bottom: var(--s3);
  }
  #scheduleDetailModal .receipt-row.account-modal-row .account-info-box {
    text-align: left;
    width: var(--full);
  }
  #scheduleDetailModal .receipt-label {
    margin-bottom: 0 !important;
    /* 혹시 모를 마진 제거 */
  }
  #scheduleDetailModal .receipt-value {
    text-align: right;
  }
}
/* 출금 계좌 정보 박스 */
/* 출금 계좌 정보 텍스트 */
.account-info-box {
  color: #333;
  font-size: 15px;
  font-weight: 500;
  text-align: right;
  /* 모바일 아닌 경우 우측 정렬 유지 */
}

/* 모달 상태 아이콘 정렬 */
#modalStatus {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  /* 우측 정렬 */
}

/* 모달 480px 이하에서 상태 값 정렬 */
@media (max-width: 480px) {
  #modalStatus {
    width: var(--full);
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    /* 모바일에서도 값은 우측 정렬 */
  }
}
.coupon-total-count {
  margin-top: var(--s6);
  margin-bottom: var(--s5);
  font-size: var(--text-sm);
  color: var(--text-default);
  font-weight: 500;
}
.coupon-total-count b {
  color: var(--text-heavy);
  font-weight: 700;
}

.load-account-top {
  margin-bottom: var(--s4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}