/* ==========================================================
   기본 설정
========================================================== */
:root{
  --color-primary:#1652f0;
  --color-primary-dark:#0d3ec2;
  --color-accent:#00c896;
  --color-danger:#ff4757;
  --color-text:#1a1d29;
  --color-text-light:#6b7280;
  --color-bg:#f5f7fb;
  --color-white:#ffffff;
  --color-border:#e5e8ef;
  --radius:14px;
  --shadow:0 4px 20px rgba(22,82,240,.08);
  --header-h:64px;
  --ticker-h:56px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.6;
  padding-bottom:calc(var(--ticker-h) + 8px);
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
.container{max-width:1160px;margin:0 auto;padding:0 20px;}
button{font-family:inherit;cursor:pointer;border:none;}

/* ==========================================================
   헤더
========================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--color-white);
  border-bottom:1px solid var(--color-border);
  height:var(--header-h);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:100%;
}
.header-right{display:flex;align-items:center;gap:18px;}
.logo{font-size:1.25rem;font-weight:800;color:var(--color-primary);}
.main-nav{display:flex;gap:28px;}
.main-nav a{font-weight:600;color:var(--color-text);font-size:.95rem;}
.main-nav a:hover{color:var(--color-primary);}

.lang-switcher{position:relative;}
.lang-toggle{
  display:flex;align-items:center;gap:6px;background:#16181d;color:#fff;
  border:none;border-radius:999px;padding:9px 16px;
}
.lang-toggle__label{font-size:.85rem;font-weight:700;color:#fff;}
.lang-toggle__chevron{font-size:.7rem;color:#fff;transition:transform .2s;}
.lang-toggle[aria-expanded="true"] .lang-toggle__chevron{transform:rotate(180deg);}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:150px;
  background:#fff;border:1px solid var(--color-border);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:.18s ease;z-index:150;
}
.lang-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
.lang-menu li a{
  display:block;padding:10px 12px;border-radius:7px;font-size:.9rem;font-weight:600;color:var(--color-text);
  text-align:center;
}
.lang-menu li a:hover{background:var(--color-bg);}
.lang-menu li a.active{color:var(--color-primary);background:#eef3ff;}

.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:32px;height:32px;background:none;
}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--color-text);transition:.25s;}

/* ==========================================================
   히어로
========================================================== */
.hero{
  background:linear-gradient(135deg,var(--color-primary) 0%, #4b7bff 100%);
  color:#fff;padding:64px 0 80px;text-align:center;
}
.hero h1{font-size:2.2rem;font-weight:800;margin-bottom:14px;}
.hero p{font-size:1.05rem;opacity:.92;max-width:560px;margin:0 auto 28px;}
.hero .btn{display:inline-block;}

/* ==========================================================
   버튼 / 공통 요소
========================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;border-radius:999px;font-weight:700;font-size:1rem;
  background:var(--color-white);color:var(--color-primary);
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.15);}
.btn-primary{background:var(--color-primary);color:#fff;}
.btn-block{width:100%;}
.section{padding:56px 0;}
.section-title{font-size:1.6rem;font-weight:800;margin-bottom:8px;text-align:center;}
.section-desc{color:var(--color-text-light);text-align:center;margin-bottom:36px;}

/* ==========================================================
   실시간 환율 표 (섹션)
========================================================== */
.rate-table-wrap{
  background:var(--color-white);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:0;
}
.rate-table-head{padding:20px 20px 0;}
.rate-table-scroll{
  overflow-y:auto;overflow-x:auto;
  max-height:512px; /* 헤더(~54px) + 데이터행 8개(~56px씩) */
}
table.rate-table thead th{
  position:sticky;top:0;background:var(--color-white);z-index:5;
  box-shadow:0 1px 0 var(--color-border);
}
.rate-table-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.rate-live-badge{
  display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:var(--color-primary);
}
table.rate-table tbody{transition:opacity .25s ease;}
table.rate-table tbody.fading{opacity:0;}
table.rate-table{width:100%;border-collapse:collapse;min-width:640px;table-layout:fixed;}
.rate-table th, .rate-table td{
  padding:16px 14px;text-align:center;border-bottom:1px solid var(--color-border);
  font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rate-table th:first-child, .rate-table td:first-child{width:34%;}
.rate-table th{color:var(--color-text-light);font-weight:600;font-size:.85rem;}
.currency-cell{text-align:left;font-weight:700;}
.currency-name-wrap{display:flex;align-items:center;gap:8px;width:100%;}
.flag-icon{
  display:block;width:24px;height:18px;object-fit:cover;border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);flex:0 0 24px;background:#eee;
}
.currency-name-wrap>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sold-out-badge{
  flex:0 0 auto;font-size:.7rem;font-weight:800;color:#fff;background:#9aa1c2;
  padding:2px 8px;border-radius:999px;
}
.rate-ticker__item .flag-icon{width:18px;height:13px;flex:0 0 18px;}
.up{color:#e5484d;} .down{color:#1652f0;} .flat{color:var(--color-text-light);}

/* ==========================================================
   환전예약 폼
========================================================== */
.reserve-card{
  background:var(--color-white);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:32px;max-width:640px;margin:0 auto;
}
.form-row{margin-bottom:18px;}
.form-row label{display:block;font-weight:700;margin-bottom:6px;font-size:.9rem;}
.form-row input, .form-row select, .form-row textarea{
  width:100%;padding:12px 14px;border:1px solid var(--color-border);
  border-radius:10px;font-size:1rem;background:#fafbfe;
}
.form-row input:focus, .form-row select:focus{outline:2px solid var(--color-primary);background:#fff;}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-hint{font-size:.8rem;color:var(--color-text-light);margin-top:6px;}
.form-hint--error{color:var(--color-danger);font-weight:700;}
.form-passport-notice{
  text-align:center;font-size:.85rem;font-weight:700;color:var(--color-text-light);
  background:var(--color-bg);padding:10px;border-radius:8px;margin-bottom:16px;
}

/* 예약조회 결과 탭 */
.lookup-tabs{display:flex;gap:8px;margin-bottom:18px;border-bottom:1px solid var(--color-border);}
.lookup-tab{
  padding:10px 18px;font-weight:700;font-size:.92rem;color:var(--color-text-light);
  background:none;border-bottom:3px solid transparent;margin-bottom:-1px;
}
.lookup-tab.active{color:var(--color-primary-dark);border-bottom-color:var(--color-primary);}
.lookup-result-card{max-width:480px;margin-left:auto;margin-right:auto;}

.lookup-order-list{max-width:480px;margin:20px auto 0;display:flex;flex-direction:column;gap:10px;}
.lookup-order-item{
  text-align:left;background:#fff;border:2px solid var(--color-border);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:4px;
}
.lookup-order-item.active{border-color:var(--color-primary);background:#eef3ff;}
.lookup-order-item__no{font-weight:800;font-size:.95rem;}
.lookup-order-item__status{font-size:.78rem;font-weight:700;color:var(--color-primary-dark);}
.lookup-order-item__sub{font-size:.82rem;color:var(--color-text-light);}
.krw-preview{
  background:#eef3ff;border-radius:10px;padding:14px;margin:14px 0;
  font-weight:700;text-align:center;color:var(--color-primary-dark);
}
.form-msg{margin-top:14px;padding:12px;border-radius:10px;font-size:.9rem;display:none;}
.form-msg.success{background:#e6fbf3;color:#00815c;display:block;}
.form-msg.error{background:#fff0f0;color:var(--color-danger);display:block;}

/* ==========================================================
   지점 카드
========================================================== */
.branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.branch-card{
  background:var(--color-white);border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow);
}
.branch-card h3{margin-bottom:8px;font-size:1.05rem;}
.branch-card p{font-size:.9rem;color:var(--color-text-light);margin-bottom:4px;}

/* ==========================================================
   하단 실시간 환율 티커 (고정)
========================================================== */
.rate-ticker{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  height:var(--ticker-h);
  background:#0f1830;color:#fff;
  display:flex;align-items:center;gap:14px;
  padding:0 16px;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
}
.rate-ticker__label{
  flex:0 0 auto;font-weight:700;font-size:.8rem;
  display:flex;align-items:center;gap:6px;color:#9fb3ff;
}
.live-dot{
  width:7px;height:7px;border-radius:50%;background:#00e08a;
  animation:pulse 1.4s infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.rate-ticker__track{
  flex:1 1 auto;display:flex;gap:26px;overflow:hidden;
  white-space:nowrap;
}
.rate-ticker__scroll{
  display:flex;gap:26px;
  animation:ticker-scroll linear infinite;
  will-change:transform;
}
@keyframes ticker-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.rate-ticker__track::-webkit-scrollbar{display:none;}
.rate-ticker__item{display:flex;align-items:center;gap:6px;font-size:.85rem;}
.rate-ticker__item b{font-weight:700;}
.rate-ticker__updated{flex:0 0 auto;font-size:.72rem;color:#7c8bb5;display:none;}
.rate-ticker__loading{font-size:.85rem;color:#9fb3ff;}

/* ==========================================================
   푸터
========================================================== */
.site-footer{background:#101425;color:#c7cbe0;padding:44px 0 0;margin-top:40px;}
.footer-inner{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;
  max-width:1160px;margin:0 auto;padding:0 20px 30px;
}
.footer-col h3, .footer-col h4{color:#fff;margin-bottom:12px;font-size:1rem;}
.footer-col p, .footer-col a{font-size:.88rem;color:#9aa1c2;line-height:2;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;padding:16px 20px calc(var(--ticker-h) + 20px);
  font-size:.78rem;color:#6b7396;
}
.disclaimer{margin-top:4px;}

/* ==========================================================
   햄버거 슬라이드 메뉴 패널
========================================================== */
.side-menu-overlay{
  position:fixed;inset:0;background:rgba(15,20,40,.45);z-index:300;
  opacity:0;visibility:hidden;transition:.2s ease;
}
.side-menu-overlay.open{opacity:1;visibility:visible;}
.side-menu-panel{
  position:absolute;top:0;right:0;bottom:0;width:300px;max-width:85vw;
  background:#fff;box-shadow:-10px 0 40px rgba(0,0,0,.2);
  padding:28px 22px;overflow-y:auto;
  transform:translateX(100%);transition:.25s ease;
}
.side-menu-overlay.open .side-menu-panel{transform:translateX(0);}
.side-menu-close{
  position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;
  background:var(--color-bg);font-size:1rem;color:var(--color-text);
}
.side-menu-group{margin-bottom:26px;}
.side-menu-group h4{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-light);margin-bottom:10px;}
.side-menu-title-link{color:var(--color-text);}
.side-menu-link{
  display:block;width:100%;text-align:left;background:none;padding:10px 0;
  font-size:1rem;font-weight:700;color:var(--color-text);border-bottom:1px solid var(--color-border);
}
.side-menu-link:last-child{border-bottom:none;}
.side-menu-btn{cursor:pointer;}
.side-menu-pending{color:#b6bcd6;font-weight:600;}
.side-menu-pending em{font-style:normal;font-size:.78rem;font-weight:500;}

/* 지점정보 모달 (Visit Us) */
.branches-modal-overlay{
  position:fixed;inset:0;background:rgba(15,20,40,.45);z-index:310;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:.2s ease;
}
.branches-modal-overlay.open{opacity:1;visibility:visible;}
.branches-modal-box{
  position:relative;background:#fff;border-radius:16px;padding:30px;
  max-width:480px;width:100%;max-height:80vh;overflow-y:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}

/* 예약완료 QR 모달 */
.qr-modal-overlay{
  position:fixed;inset:0;background:rgba(15,20,40,.5);z-index:320;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:.2s ease;
}
.qr-modal-overlay.open{opacity:1;visibility:visible;}
.qr-modal-box{
  position:relative;background:#fff;border-radius:18px;padding:32px;
  max-width:360px;width:100%;text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.qr-modal-title{font-size:1.15rem;font-weight:800;margin-bottom:6px;}
.qr-modal-sub{font-size:.85rem;color:var(--color-text-light);margin-bottom:18px;}
.qr-modal-image{width:200px;height:200px;margin:0 auto 18px;border:8px solid #f0f1f6;border-radius:10px;}
.qr-modal-summary{
  background:var(--color-bg);border-radius:10px;padding:14px;margin-bottom:18px;
  font-size:.9rem;line-height:1.8;text-align:left;
}
.qr-modal-summary b{color:var(--color-primary-dark);}

.qr-modal-savings{
  background:#fff7ed;color:#c2410c;font-weight:700;font-size:.88rem;
  border-radius:10px;padding:10px;margin-bottom:16px;
}
.qr-contact-us{text-align:left;margin-bottom:18px;}
.qr-contact-us h4{font-size:.78rem;letter-spacing:.06em;color:var(--color-text-light);margin-bottom:8px;text-align:center;}
.qr-contact-us ul{list-style:none;}
.qr-contact-us li a, .qr-contact-us li .qr-contact-pending{
  display:block;padding:8px 4px;font-size:.9rem;font-weight:600;color:var(--color-text);
}
.qr-contact-us li a:hover{color:var(--color-primary);}
.qr-contact-pending{color:#b6bcd6;}
.qr-contact-pending em{font-style:normal;font-size:.75rem;}
.qr-modal-actions{display:flex;gap:10px;}
.qr-btn-cancel, .qr-btn-directions{
  flex:1;padding:13px;border-radius:12px;font-weight:800;font-size:.9rem;text-align:center;
}
.qr-btn-cancel{background:#fff;border:2px solid var(--color-text);color:var(--color-text);}
.qr-btn-directions{background:var(--color-accent);color:#fff;border:2px solid var(--color-accent);}

/* ==========================================================
   Contact 플로팅 위젯
========================================================== */
.contact-widget{
  position:fixed;right:20px;bottom:calc(var(--ticker-h) + 20px);z-index:190;
}
.contact-toggle{
  display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;
  background:var(--color-primary);color:#fff;font-weight:700;font-size:.9rem;
  box-shadow:0 8px 24px rgba(22,82,240,.35);
}
.contact-toggle__icon{font-size:1.1rem;}
.contact-menu{
  position:absolute;bottom:calc(100% + 10px);right:0;min-width:190px;
  background:#fff;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.18);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.18s ease;
}
.contact-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
.contact-menu li a, .contact-menu li .contact-pending{
  display:block;padding:11px 14px;border-radius:9px;font-weight:700;font-size:.9rem;color:var(--color-text);
}
.contact-menu li a:hover{background:var(--color-bg);}
.contact-menu li .contact-pending{color:#b6bcd6;cursor:default;}
.contact-menu li .contact-pending em{font-style:normal;font-weight:500;font-size:.78rem;}

@media (max-width:680px){
  .contact-widget{right:14px;bottom:calc(var(--ticker-h) + 14px);}
  .contact-toggle__label{display:none;}
  .contact-toggle{padding:14px;border-radius:50%;}
}

/* ==========================================================
   인트로 환전 계산기
========================================================== */
.intro-section{padding:32px 0 48px;}
.intro-container{max-width:480px;}

.intro-tabs{display:flex;gap:22px;margin-bottom:20px;}
.intro-tab{font-size:1.05rem;font-weight:700;color:var(--color-text-light);padding-bottom:8px;}
.intro-tab.active{color:var(--color-primary-dark);border-bottom:3px solid var(--color-primary);}

.sb-toggle{display:flex;gap:10px;margin-bottom:18px;}
.sb-btn{
  flex:1;padding:16px;border-radius:12px;font-weight:800;font-size:1rem;
  background:#fff;border:2px solid var(--color-border);color:var(--color-text-light);
}
.sb-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff;}

.calc-card{
  background:#fff;border:2px solid var(--color-text);border-radius:18px;
  padding:26px 22px;box-shadow:var(--shadow);
}
.calc-question{font-size:1.2rem;font-weight:800;margin-bottom:16px;}
.calc-input-row{display:flex;gap:10px;margin-bottom:14px;min-width:0;}
.calc-currency-wrap{
  flex:0 0 148px;display:flex;align-items:center;gap:8px;padding:0 10px;
  border:1px solid var(--color-border);border-radius:10px;background:#fafbfe;
}
.calc-currency-flag{width:22px;height:16px;object-fit:cover;border-radius:3px;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.08);}
.calc-currency-select{
  flex:1;min-width:0;padding:12px 4px;border:none;background:none;
  font-weight:700;font-size:.95rem;
}
.calc-amount-input{
  flex:1;min-width:0;padding:12px 14px;border:1px solid var(--color-border);border-radius:10px;
  font-size:1.1rem;font-weight:700;text-align:right;background:#fafbfe;
}
.calc-krw-row{
  display:flex;align-items:center;gap:8px;padding:14px;border:1px solid var(--color-border);
  border-radius:10px;margin-bottom:18px;font-weight:700;
}
.calc-krw-flag{width:26px;height:19px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08);}
.calc-krw-value{margin-left:auto;font-size:1.15rem;font-weight:800;}

.calc-compare{margin-bottom:10px;}
.calc-compare-row{display:flex;justify-content:space-between;padding:6px 0;font-size:.95rem;}
.calc-compare-row.muted{color:var(--color-text-light);}
.calc-compare-row.highlight{font-weight:800;font-size:1.05rem;}

.calc-savings{
  text-align:center;font-weight:700;color:#c2410c;background:#fff7ed;
  border-radius:10px;padding:10px;margin-bottom:14px;font-size:.95rem;
}
.calc-savings b{font-size:1.05rem;}
.calc-meta{
  display:flex;justify-content:center;gap:18px;font-size:.85rem;color:var(--color-text-light);
  margin-bottom:18px;
}
.calc-reserve-btn{font-size:1.05rem;padding:16px;border-radius:12px;}

.intro-social-proof{
  text-align:center;margin-top:22px;font-size:.92rem;color:var(--color-text);line-height:1.9;
}
.intro-social-proof b{color:#c2410c;}
.intro-tagline{color:var(--color-text-light);font-size:.85rem;margin-top:4px;}

.calc-summary-box{
  background:#eef3ff;border-radius:10px;padding:12px 14px;margin-bottom:18px;
  font-weight:700;text-align:center;color:var(--color-primary-dark);
}
.calc-amount-hint{font-size:.78rem;color:var(--color-text-light);margin:-8px 0 14px;text-align:right;}
.calc-amount-hint--error{color:var(--color-danger);font-weight:700;}
.calc-amount-input--error{border-color:var(--color-danger)!important;background:#fff5f5;}
.calc-reserve-btn:disabled{opacity:.5;cursor:not-allowed;}

.consent-row{display:flex;flex-direction:column;gap:8px;background:var(--color-bg);padding:12px 14px;border-radius:10px;}
.consent-label{display:flex;align-items:flex-start;gap:8px;font-size:.82rem;color:var(--color-text-light);font-weight:500;cursor:pointer;}
.consent-label input{margin-top:2px;width:16px;height:16px;flex:0 0 auto;}

@media (max-width:480px){
  .calc-card{padding:20px 16px;}
  .calc-question{font-size:1.05rem;}
}
/* ==========================================================
   반응형 (모바일 최적화)
========================================================== */
@media (max-width:900px){
  .branch-grid{grid-template-columns:repeat(2,1fr);}
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  :root{--ticker-h:64px;}
  .header-right{gap:8px;}
  .lang-toggle{padding:8px 12px;}
  .lang-menu{right:-8px;}
  .nav-toggle{display:flex;}
  .main-nav{
    position:absolute;top:var(--header-h);left:0;right:0;
    background:#fff;flex-direction:column;gap:0;
    max-height:0;overflow:hidden;transition:max-height .25s ease;
    border-bottom:1px solid var(--color-border);
  }
  .main-nav.open{max-height:300px;}
  .main-nav a{padding:14px 20px;border-top:1px solid var(--color-border);}
  .hero{padding:44px 0 60px;}
  .hero h1{font-size:1.5rem;}
  .hero p{font-size:.92rem;}
  .section-title{font-size:1.3rem;}
  .form-grid-2{grid-template-columns:1fr;}
  .branch-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;text-align:center;}
  .rate-ticker{flex-wrap:wrap;height:auto;padding:8px 12px;gap:4px 14px;}
  .rate-ticker__label{width:100%;order:1;}
  .rate-ticker__track{order:2;width:100%;}
  .rate-ticker__updated{display:block;order:3;width:100%;text-align:right;}
  .reserve-card{padding:22px;}
}