/* ===============================
   VIZABRIDGE – Consolidated Styles
   (extracted from inline <style> blocks)
   =============================== */

/* ---------- Translation-aware layout tweaks ---------- */
html[class*="translated"] .step4 .tabs{
  display:flex !important; flex-wrap:wrap !important;
  gap:8px !important; padding:8px 0 !important; overflow:visible !important;
}
html[class*="translated"] .step4 .tabs .tab{
  display:inline-flex !important; align-items:center; justify-content:center;
  flex:0 0 auto !important; min-width:max-content; white-space:nowrap !important;
  word-break:keep-all !important; overflow:visible !important;
  padding:10px 12px !important; border-radius:12px !important; background:#f6f7f9 !important;
  margin:0 0 8px 0 !important; /* gap 보강 */
}
html[class*="translated"] .step4 .tabs .tab *{ display:inline !important; }
html[class*="translated"] .mini_vizzy > span{ font-size:0 !important; }
html[class*="translated"] .mini_vizzy > span::after{ content:'AI'; font-size:14px; }
/* 휠 모달(번역 중에도 원형 유지) */
html[class*="translated"] .modal_date_select .date-selector,
html[class*="translated"] .modal_date_select .date-selector *{
  overflow-wrap:normal !important; word-break:normal !important; white-space:nowrap !important; hyphens:manual !important;
}
html[class*="translated"] .modal_date_select .date-selector{ height:216px !important; }
html[class*="translated"] .modal_date_select .select-option{ height:36px !important; line-height:36px !important; }
html[class*="translated"] *{ overflow-wrap:anywhere; word-break:break-word; hyphens:auto; }
.step1 .items .item, .step1 .items .item .texts, .step4 .item, .lists .list { min-width:0; }
/* 제목류: 줄바꿈 허용 + 클램프 해제 */
html[class*="translated"] .title,
html[class*="translated"] .subtitle,
html[class*="translated"] .desc,
html[class*="translated"] .step1 .items .item .title,
html[class*="translated"] .step1 .items .item .subtitle{
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  display:block !important; -webkit-line-clamp:unset !important; max-height:none !important; line-height:1.35 !important;
}
html[class*="translated"] .step1 .title{ text-wrap:balance; }
body { top:0 !important; } /* 배너가 body top 올리면 복구 */

/* ---------- Step2 검색 입력 통일 ---------- */
.step2 .search_section{
  display:block !important; height:auto !important; background:transparent !important;
  padding:0 16px 8px !important; box-sizing:border-box;
}
.step2 .search_section i{ display:none !important; } /* 좌측 점 숨김 */
.step2 .search_section input[type="search"]{
  display:block; width:100% !important; height:48px; padding:12px 14px;
  background:#fff !important; border:1px solid #e5e8eb !important; border-radius:12px !important;
  box-sizing:border-box; -webkit-appearance:none; appearance:none; outline:none;
}
/* iOS/크롬 기본 검색 아이콘/취소 버튼 제거 */
.step2 input[type="search"]::-webkit-search-decoration,
.step2 input[type="search"]::-webkit-search-cancel-button,
.step2 input[type="search"]::-webkit-search-results-button,
.step2 input[type="search"]::-webkit-search-results-decoration{ -webkit-appearance:none; display:none; }

/* ---------- Debug button & panel ---------- */
.dbg-btn{position:fixed;right:12px;top:12px;z-index:10000;background:#222;color:#fff;border-radius:20px;padding:6px 10px;font:12px/1 monospace;opacity:.8}
.dbg-btn:active{opacity:1}
.debug-panel{ display:none; position:fixed; left:12px; right:12px; top:44px; z-index:9999; background:#111; color:#0f0;
  font:12px/1.4 monospace; border-radius:8px; padding:10px; opacity:.95; max-height:46vh; overflow:auto; box-shadow:0 8px 24px rgba(0,0,0,.3)}

/* ---------- Vizzy overlay ---------- */
#vizzy-layer .sheet{ max-height:85vh; }

/* ---------- Global alert visibility ---------- */
.alert_message{ display:none !important; }
.alert_message.show{ display:block !important; }
.alert_message .mask{ z-index:12000 !important; }
.alert_message .content{ z-index:12001 !important; }

/* ---------- Wheel picker fallback ---------- */
.date-selector{display:flex;gap:12px;padding:8px 0;height:216px;perspective:1000px}
.date-selector .col{flex:1;position:relative;overflow:hidden}
.select-wrap{position:absolute;inset:0;text-align:center}
.select-options{position:absolute;left:0;right:0;top:50%;transform-style:preserve-3d;transform-origin:center center;will-change:transform;}
.select-option{position:absolute;left:0;right:0;text-align:center;backface-visibility:hidden;font-size:16px;line-height:36px;height:36px;}
.highlight{position:absolute;left:0;right:0;top:50%;height:36px;margin-top:-18px;background:transparent;border-top:1px solid #e5e8eb;border-bottom:1px solid #e5e8eb;pointer-events:none;}
.highlight-list{position:absolute;left:0;right:0;top:0;will-change:transform;text-align:center}
.highlight-item{height:36px;line-height:36px;color:#333D48}

/* ---------- Google Translate (keep widget alive but hidden) ---------- */
#vbtr-google-element { position:fixed; left:-9999px; top:-9999px; display:block !important; opacity:0; pointer-events:none; }
.goog-te-gadget { position:fixed; left:-9999px; top:-9999px; opacity:0; pointer-events:none; }
.goog-logo-link { display:none !important; }
.goog-te-combo{ position:absolute !important; left:-9999px !important; top:-9999px !important; opacity:0 !important; width:1px !important; height:1px !important; }
/* 배너/툴팁류 숨김 */
iframe.goog-te-banner-frame, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-te-balloon-frame{ display:none !important; }
body > .skiptranslate { position:fixed; left:-9999px; top:-9999px; }
html, body { top:0 !important; }

/* ---------- Language FAB ---------- */
.vbtr-fab{ position:fixed; left:12px; right:auto !important;
  bottom: calc(var(--vb-footer-h, 96px) + env(safe-area-inset-bottom, 0px)); z-index:10020; }
.vbtr-fab .vbtr-btn{
  width:56px;height:56px;padding:0;border:0;border-radius:999px;background:#111;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 6px 18px rgba(0,0,0,.15);cursor:pointer;
}
.vbtr-fab .vbtr-close-x{ position:absolute; left:-6px; right:auto !important; top:-6px; background:transparent; border:0; font-size:18px; cursor:pointer; }

/* ---------- Language Modal ---------- */
.vbtr-modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000000; }
.vbtr-modal.is-open{ display:block; }
.vbtr-panel{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  width:min(420px,92vw); background:#fff; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.vbtr-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; font-weight:600; }
.vbtr-close{ border:none; background:transparent; font-size:18px; cursor:pointer; }
.vbtr-list{ list-style:none; margin:0; padding:8px; max-height:50vh; overflow:auto; }
.vbtr-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; cursor:pointer; }
.vbtr-item:hover{ background:#f6f7f9; }
.vbtr-item.active{ background:#eef2ff; }
.vbtr-flag{ width:20px; height:20px; border-radius:50%; object-fit:cover; flex:0 0 20px; }

/* ---------- Inputs: keep content inside rounded corners ---------- */
.row .ipt_section{ overflow:hidden; }
.row .ipt_section input[type="text"],
.row .ipt_section input[type="tel"],
.row .ipt_section input[type="search"]{
  width:100% !important; box-sizing:border-box !important; -webkit-appearance:none; appearance:none;
}
.row .ipt_section input{ text-overflow:ellipsis; }

/* ---------- Office confirm modal buttons ---------- */
.vb-office-confirm .btn_select,
.vb-office-confirm .m_loc_btns .selected{
  display:flex; align-items:center; justify-content:center; width:100%; height:52px;
  padding:0 16px; border-radius:12px; background:#2F6BFF; color:#fff; font-weight:600; letter-spacing:-0.2px;
  cursor:pointer; user-select:none; box-shadow:0 6px 18px rgba(47,107,255,.20); -webkit-tap-highlight-color:transparent;
}
.vb-office-confirm .btn_select:active,
.vb-office-confirm .m_loc_btns .selected:active{ opacity:.95; transform:translateY(.5px); }
.vb-office-confirm .btns, .vb-office-confirm .m_loc_btns{ padding:14px 18px 18px; display:flex; gap:8px; }
.vb-office-confirm .m_loc_btns .close{ display:none; }

/* ---------- Progress bar section sticky ---------- */
:root{ --pb-safe-top: env(safe-area-inset-top, 0px); --pb-height: 48px; --vb-footer-h:96px; --vb-overlay-w:0px; }
.pb_section{ position:sticky; top:var(--pb-safe-top); z-index:1000; background:#fff; }
.step9 .sticky-review-head{
  position:sticky; top:calc(var(--pb-safe-top) + var(--pb-height)); z-index:999;
  background:#fff; padding:14px 16px 10px; border-bottom:1px solid #eef0f3;
}
.step9 .sticky-review-head .title{ margin:0; }
.step9 .sticky-review-head .subtitle{ margin:4px 0 0; color:#6B7684; }

/* ---------- Step6: radio center fix ---------- */
.step6 .lists .list{ position:relative; display:block !important; }
.step6 .lists .list > input[type="radio"]{
  position:absolute !important; left:0; top:0; width:0 !important; height:0 !important; opacity:0 !important; pointer-events:none !important; margin:0 !important;
}
.step6 .lists .list > div{
  display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; width:100%;
}

/* ---------- Global alert spacing ---------- */
.alert_message .content{ line-height:1.65 !important; }
.alert_message .content .title{ margin:0 0 6px !important; }
.alert_message .content .subtitle, .alert_message .content .desc{ margin:4px 0 16px !important; color:#6B7684 !important; }
.alert_message .content .items, .alert_message .content dl{
  display:grid !important; grid-template-columns:auto 1fr; column-gap:12px !important; row-gap:16px !important;
}
.alert_message .content .item, .alert_message .content li{ margin:0 !important; }
.alert_message .content .item + .item, .alert_message .content li + li{ margin-top:16px !important; }
.alert_message .content .header, .alert_message .content dt{ color:#6B7684 !important; }
.alert_message .content .body, .alert_message .content dd{ line-height:1.6 !important; }

/* ---------- Progress bar (span fill) ---------- */
.pb{ height:4px; background:#eef0f3; border-radius:2px; overflow:hidden; }
.pb > span{
  display:block; height:100%; background:#2F6BFF;
  transform-origin:left center; transform:translateZ(0) scaleX(0);
  transition:transform .25s ease; backface-visibility:hidden; will-change:transform;
}
.pb > span::after{ content:none !important; }

/* Step9 title/subtitle override (matches step8 look) */
.step9 > .title, .step9 .sticky-review-head > .title{
  font-weight:700 !important; line-height:1.35; letter-spacing:-0.2px; margin:0;
  font-size:18px !important;
}
.step9 > .subtitle, .step9 .sticky-review-head > .subtitle{
  font-size:13px !important; color:#6B7684 !important; margin:4px 0 0;
}

/* ---------- Step9: full-bleed sticky head ---------- */
.step9 { --page-gutter:16px; }
.step9 .sticky-review-head{
  margin-left:calc(-1 * var(--page-gutter)); margin-right:calc(-1 * var(--page-gutter));
  padding-left:var(--page-gutter); padding-right:var(--page-gutter);
  z-index:1001; background:#fff; border-bottom:1px solid #eef0f3;
}

/* ---------- Office gap utilities ---------- */
:root{ --vb-office-gap:20px; --vb-office-pair-gap:4px; }
.vb-office-confirm .content .header + .body,
.alert_message     .content .header + .body{ margin-top:var(--vb-office-pair-gap) !important; }
.vb-office-confirm .content .body + .header,
.alert_message     .content .body + .header{ margin-top:var(--vb-office-gap) !important; }
.vb-office-confirm .content :is(.items, dl){ row-gap:var(--vb-office-gap) !important; }
.vb-office-confirm .content .item + .item{ margin-top:var(--vb-office-gap) !important; }
.alert_message .content :is(.items, dl){ row-gap:var(--vb-office-gap) !important; }
.alert_message .content .item + .item, .alert_message .content li + li{ margin-top:var(--vb-office-gap) !important; }
.alert_message .content dt + dd{ margin-top:var(--vb-office-pair-gap) !important; }
.alert_message .content dd + dt{ margin-top:var(--vb-office-gap) !important; }

/* ---------- AI Card View ---------- */
.ai-card { background:#fff; border:1px solid #ececec; border-radius:12px; padding:8px 10px; margin-top:6px; }
.ai-toc { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; }
.ai-chip { font-size:12px; padding:6px 8px; border:1px solid #e6e6e6; border-radius:999px; background:#f7f7f9; cursor:pointer; }
.ai-sec { border:1px solid #f0f0f0; border-radius:10px; margin:8px 0; overflow:hidden; }
.ai-sec summary { list-style:none; cursor:pointer; padding:10px 12px; font-weight:600; background:#fafafa; }
.ai-sec[open] summary { background:#f2f6ff; }
.ai-sec-body { padding:12px; line-height:1.65; }
.ai-sec-actions { display:flex; gap:8px; margin:6px 0 0 12px; }
.ai-btn { font-size:12px; padding:4px 8px; border-radius:6px; border:1px solid #e6e6e6; background:#fff; cursor:pointer; }
.ai-raw { display:none; background:#0b1020; color:#cfe3ff; padding:10px; border-radius:8px; overflow:auto; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; }
.ai-card.show-raw .ai-raw { display:block; }
.ai-h{ display:block; font-weight:700; margin:8px 0 4px; line-height:1.4; }
.ai-table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; margin:6px 0; }
.ai-table{ width:100%; border-collapse:collapse; font-size:13px; table-layout:auto; }
.ai-table th, .ai-table td{ border:1px solid #eef0f3; padding:8px 10px; vertical-align:top; white-space:normal; }
.ai-table thead th{ position:sticky; top:0; background:#f5f7ff; z-index:1; }
.ai-table tbody tr:nth-child(even) td{ background:#fafbfc; }
.ai-table th{text-align:left; font-weight:700;}

/* ---------- Footer buttons: fixed & centered ---------- */
footer .btn_section{
  position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important;
  transform:none !important;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom,0)) !important;
  background:linear-gradient(0deg, #fff 80%, transparent) !important;
  box-sizing:border-box !important;
}
footer .btn_section .btn_next_step,
footer .btn_section .btn_payment{
  width:min(100%, 640px) !important; margin:0 auto !important; display:flex !important;
  align-items:center; justify-content:center;
  border-radius:16px !important;
}
footer .btn_section > .btn_next_step { display:flex !important; }
footer .btn_section > .btn_payment   { display:none !important; }
html.show-pay footer .btn_section > .btn_payment { display:flex !important; }

/* ---------- Mini vizzy: match FAB baseline ---------- */
.mini_vizzy{
  display:none; position:fixed; right:12px;
  bottom:calc(var(--vb-footer-h, 96px) + env(safe-area-inset-bottom, 0px)) !important;
  z-index:10020; pointer-events:none;
}
.mini_vizzy .vizzy_icon, .mini_vizzy .close{ pointer-events:auto; }

/* ---------- Modal layout bits ---------- */
.modal_loc .cont{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* ---------- iOS-specific safety: don't hard-hide GT frames ---------- */
iframe.goog-te-banner-frame,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip { display:none !important; }

body { top:0 !important; } /* 배너가 body top을 밀어올리면 복구 */

/* (B) 크롬 자동번역 오버레이(난수 클래스) 통째로 차단 */
[class^="VIpgJd-"],
[class*=" VIpgJd-"] {
  display:none !important;
  visibility:hidden !important;
}

@supports (-webkit-touch-callout: none) {
  iframe.goog-te-banner-frame,
  .goog-te-banner-frame,
  #goog-gt-tt,
  .goog-te-balloon-frame,
  .goog-tooltip {
    position: fixed !important;
    top: -9999px !important; left: -9999px !important;
    width: 1px !important; height: 1px !important;
    opacity: 0 !important; pointer-events: none !important;
    display: block !important; /* iOS: none 금지 */
  }
  body > .skiptranslate {
    position: fixed !important;
    left: -9999px !important; top: -9999px !important;
    opacity: 0 !important; pointer-events: none !important;
    display: block !important; /* iOS: none 금지 */
  }
}
 	
  	  #debug-panel,
  	.dbg-btn { display:none !important; }
  	
    .ios #vbtr-modal { display: none !important; }
    .ios .goog-te-banner-frame,
    .ios iframe.goog-te-banner-frame { display: none !important; visibility: hidden !important; }
    .ios body { top: 0 !important; }
 
  	
  	 /* iOS 전용 새 언어 선택 모달 */
  .ios .vbtr-ios-modal{position:fixed;inset:0;z-index:10060;display:none}
  .ios .vbtr-ios-modal.show{display:block}
  .ios .vbtr-ios-modal .mask{position:absolute;inset:0;background:rgba(0,0,0,.45)}
  .ios .vbtr-ios-modal .panel{
    position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
    width:min(460px,92vw);background:#fff;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.18);
    overflow:hidden
  }
  .ios .vbtr-ios-modal .head{padding:16px 18px 8px;font-weight:700;font-size:16px}
  .ios .vbtr-ios-modal .desc{padding:0 18px 10px;color:#6B7684;font-size:12px}
  .ios .vbtr-ios-modal .langs{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 14px 16px}
  .ios .vbtr-ios-modal .lang{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:10px 10px;border:1px solid #eaeaea;border-radius:12px;background:#fafafa;cursor:pointer;font-size:14px
  }
  .ios .vbtr-ios-modal .lang.active{background:#f0f7ff;border-color:#d3e6ff}
  .ios .vbtr-ios-modal .foot{display:flex;gap:10px;padding:10px 14px 14px}
  .ios .vbtr-ios-modal .btn{
    flex:1; text-align:center; padding:12px 10px; border-radius:12px; cursor:pointer; font-weight:600; font-size:14px
  }
  .ios .vbtr-ios-modal .btn.close{background:#f7f7f7;border:1px solid #eee}
  .ios .vbtr-ios-modal .btn.apply{background:#1f6fff;color:#fff}

  /* iOS에선 기존 구글 번역 배너/모달 숨김 유지 */
  .ios #vbtr-modal{display:none!important}
  .ios .goog-te-banner-frame, .ios iframe.goog-te-banner-frame{display:none!important;visibility:hidden!important}
  .ios body{top:0!important}

/* --- FIX: 번역 FAB를 오른쪽 하단에 고정 --- */
/* --- [HOTFIX] 번역 FAB: 왼쪽 하단 고정 + X는 항상 우상단 --- */
.vbtr-fab{
  left:12px !important;
  right:auto !important;
}

/* X 버튼을 항상 FAB 우상단에 핀 고정 */
.vbtr-fab .vbtr-close-x{
  display:block !important;
  position:absolute !important;
  top:-6px !important;
  right:-6px !important;
  left:auto !important;
}

/* =========================================================
   [FIX] 번역 언어가 길 때 탭/칩 겹침 방지 (v1)
   - .step4 .tabs : 유연 레이아웃 + 줄바꿈
   - .tab        : 고정폭/absolute/transform 잔여값 제거
   - 긴 언어(ru/vi/de) 소폭 컴팩트
   - 필요 시 한 줄 가로스크롤 모드(.vb-tabs-scroll) 옵션
   ========================================================= */

/* 기본: 여러 줄로 자동 줄바꿈 */
html[class*="translated"] .step4 .tabs{
  display:flex !important;
  flex-wrap:wrap !important;         /* 칩이 길면 다음 줄로 */
  gap:8px !important;
  align-items:stretch !important;
  padding:8px 0 4px !important;
  overflow:visible !important;
}

/* 각 칩: 고정폭/좌표계 속성 제거 + 내용 길이에 맞춰 확장 */
html[class*="translated"] .step4 .tabs .tab{
  position:static !important;        /* absolute 등 잔여 제거 */
  left:auto !important; right:auto !important;
  top:auto !important; bottom:auto !important;
  transform:none !important;

  width:auto !important;
  max-width:none !important;
  min-width:fit-content !important;  /* 내용만큼 넓어지게 */
  box-sizing:border-box !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;          /* 수축 금지 (겹침 방지) */
  white-space:nowrap !important;      /* 칩 내부는 한 줄 유지 */
  padding:10px 12px !important;
  border-radius:12px !important;
  background:#f6f7f9 !important;
  margin:0 0 8px 0 !important;
}

/* 칩 내부 텍스트가 과도하게 길 때 안전장치(말줄임) */
html[class*="translated"] .step4 .tabs .tab > *,
html[class*="translated"] .step4 .tabs .tab{
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 긴 단어 하이픈 분할(러시아어 등) */
:root[lang="ru"] *, html[lang="ru"] *{ -webkit-hyphens:auto; hyphens:auto; }

/* 긴 언어에서 칩 약간 컴팩트하게 */
html[lang="ru"] .step4 .tabs .tab,
html[lang="vi"] .step4 .tabs .tab,
html[lang="de"] .step4 .tabs .tab{
  font-size:13px !important;
  padding:8px 10px !important;
}

/* ===== 선택 옵션: 한 줄 가로 스크롤 모드 =====
   <html>에 vb-tabs-scroll 클래스를 추가하면
   칩이 줄바꿈 대신 가로 스크롤로 동작합니다. */
html[class*="translated"].vb-tabs-scroll .step4 .tabs{
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
html[class*="translated"].vb-tabs-scroll .step4 .tabs .tab{
  flex:0 0 auto !important;
}