/* =========================
   Booking Page
   Scoped: [data-vk-scope]
   radius=0, compact, pro look
   ========================= */
/* 구글 폰트 (Inter & Noto Sans KR 조합) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+KR:wght@400;700;900&display=swap');

/*
[data-vk-scope] {
    !* 폰트 패밀리 설정 *!
    font-family: 'Inter', 'Noto Sans KR', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;

    !* 변수 추가 *!
    --vk-navy: #0f172a; !* 조금 더 깊고 세련된 다크 네이비 *!
    --vk-red: #e11d48;  !* 생기 있는 레드 *!
}
*/

/* =========================
   TOP BAR 폰트 디테일
========================= */
[data-vk-scope] .vk-logo {
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.02em; /* 약간 좁게 설정하면 더 단단해 보임 */
    color: #fff;
}

[data-vk-scope] .vk-title {
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.05em; /* 타이틀은 오히려 살짝 띄우면 고급스러움 */
    text-transform: uppercase;
    opacity: 0.6;
}

[data-vk-scope] .vk-step {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* =========================
   OFFER 폰트 디테일
========================= */
[data-vk-scope] .vk-offer-text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1; /* 갭 제거를 위해 높이 최적화 */
}

[data-vk-scope] .vk-pill {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    margin-right: 4px;
    border-radius: 2px; /* 아주 살짝 둥글게 하면 더 세련되어 보임 */
}

/* 10인 이상 강조 링크 스타일 */
[data-vk-scope] .vk-offer-text a {
    text-decoration: none;
    border-bottom: 1.5px solid rgba(255,255,255,0.6);
    padding-bottom: 1px;
    transition: all 0.2s ease;
}

[data-vk-scope] .vk-offer-text a:hover {
    border-bottom-color: #fff;
    opacity: 0.9;
}
[data-vk-scope]{
    --vk-ink:#0f172a;
    --vk-muted:#64748b;
    --vk-line:#e5e7eb;
    --vk-bg:#ffffff;
    --vk-navy:#0b1f3a;
    --vk-red:#b1002a;
    --vk-primary:#1d4ed8;
    --vk-pad:14px;
    --vk-gap:10px;
    --inp-h:40px;
    font-family: "Aptos", "Segoe UI", system-ui, sans-serif;
    letter-spacing: -0.02em; /* 타호마는 자간을 살짝 줄이면 더 예쁩니다 */
    color:var(--vk-ink);
}

[data-vk-scope], [data-vk-scope] *{ box-sizing:border-box; }
[data-vk-scope] .is-hidden{ display:none; }

/* =========================
   VK SCOPE BASE
========================= */
[data-vk-scope], [data-vk-scope] *{ box-sizing:border-box; }
[data-vk-scope] .is-hidden{ display:none; }

/* ✅ 기본 헤더 높이에 맞춰 조절 (필요시 값만 바꾸기) */
[data-vk-scope]{
    --vk-sticky-top: 115px; /* 기본 헤더 높이 (대충 70~110 사이로 맞추면 됨) */
}
.vk-pay-grid.is-disabled {
    opacity: .45;
    pointer-events: none;
    filter: grayscale(1);
}
.vk-pill{
    font-size:11px;
    font-weight:800;
    padding:6px 10px;
    border:1px solid #e2e8f0;
    border-radius:999px;
    background:#f8fafc;
    color:#0f172a;
}

.vk-pay-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
}
@media (max-width: 768px){
    .vk-pay-row{ grid-template-columns: 1fr; }
}

.vk-pay-choice{
    margin-top:12px;
    display:grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap:12px;
    padding:12px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
}
@media (max-width: 768px){
    .vk-pay-choice{ grid-template-columns: 1fr; }
}

.vk-check-row{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
}

.accepted-cards{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin:10px 0;
}
.accepted-cards img{ height:24px; }

.vk-pay-grid{
    margin-top:12px;
    display:grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap:10px;
}
@media (max-width: 768px){
    .vk-pay-grid{ grid-template-columns: 1fr; }
}
.is-hidden { display:none !important; }

#CardGrid.is-disabled{
    opacity:.45;
    pointer-events:none;
    filter:grayscale(1);
}

.vk-pay-grid.is-disabled{
    opacity:.45;
    pointer-events:none;
    filter:grayscale(1);
}

#TermsLinkInline{
    font-weight:800;
    text-decoration: underline;
}
#TermsLinkInline:hover{
    opacity: .85;
}

.vk-actions{
    margin-top:14px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.vk-btn[disabled]{ opacity:.5; cursor:not-allowed; }

.vk-btn-primary{
    background:#0f172a;
    color:#fff;
    border:1px solid #0f172a;
}
.vk-btn-outline{
    background:#fff;
    border:1px solid #0f172a;
    color:#0f172a;
}

.vk-footnote{
    margin-top:10px;
    font-size:12px;
    color:#64748b;
}

/* =========================
   TOP BAR (Steps)
========================= */
/* 1. 컨테이너 전체를 sticky로 설정 */

/* ===== Datepicker always on top ===== */
#ui-datepicker-div {
    z-index: 99999 !important;   /* 🔥 최우선 */
    position: absolute !important;
}

/* 카드/모달/overflow에 가려지는 문제 방지 */
.vk-card,
.vk-field,
.col-lg-12,
[data-vk-scope] {
    overflow: visible !important;
}

[data-vk-scope] .vk-sticky-container {

    top: var(--existing-header-height);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    margin: 0; /* 외부 마진 제거 */
    padding: 0; /* 내부 패딩 제거 */
}

/* 2. 각 바의 불필요한 마진 제거 */
[data-vk-scope] .vk-topbar,
[data-vk-scope] .vk-offer {
    margin: 0 !important;
    border: none; /* 경계선 때문에 갭이 보일 수 있으므로 필요시 조정 */
    display: block;
    width: 100%;
}

/* 3. 오퍼 스트립 내부 정렬 */
[data-vk-scope] .vk-offer-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center; /* 가운데 정렬 */
    gap: 12px;
}

/* 4. 아래 본문(hero 등)과의 갭 제거 */
[data-vk-scope] .vk-hero {
    margin-top: 0 !important;
    padding-top: 20px; /* 여기서부터 여백 조절 */
}
[data-vk-scope] .vk-topbar{
    background: var(--vk-navy); /* 변수가 없으면 배경이 안 보임 */
    color: #ffffff;
    position: sticky;
    top: var(--vk-sticky-top);
    z-index: 999;
    border-bottom: 1px solid rgba(255,255,255,.12);
    display: block; /* 명시적으로 지정 */
    width: 100%;
}
[data-vk-scope] .vk-topbar-inner{
    max-width:1140px;
    margin:0 auto;
    padding:10px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

[data-vk-scope] .vk-brand{ display:flex; align-items:center; gap:12px; }
[data-vk-scope] .vk-logo{ font-weight:900; letter-spacing:.08em; font-size:14px; }
[data-vk-scope] .vk-title{ font-weight:900; font-size:12px; opacity:.9; }

/* Steps */
[data-vk-scope] .vk-steps{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    align-items:center;
}

[data-vk-scope] .vk-step{
    display:flex; align-items:center; gap:8px;
    font-size:12px;
    opacity:.72;
    white-space:nowrap;
}

[data-vk-scope] .vk-dot{
    width:10px; height:10px;
    border:2px solid rgba(255,255,255,.6);
    border-radius:999px;
    display:inline-block;
}

[data-vk-scope] .vk-step.active{ opacity:1; }
[data-vk-scope] .vk-step.active .vk-dot{ border-color:#fff; background:#fff; }
[data-vk-scope] .vk-step.done .vk-dot{ border-color:#22c55e; background:#22c55e; opacity:1; }

/* ✅ 데스크탑에서 steps 정리 */
@media (min-width: 992px){
    [data-vk-scope] .vk-steps{ gap:20px; }
    [data-vk-scope] .vk-step{ font-size:12px; }
}

/* ✅ 모바일에서는 steps가 밑으로 자연스럽게 떨어지게 */
/*@media (max-width: 768px){
    [data-vk-scope] .vk-topbar-inner{
        flex-direction: column;
        align-items:flex-start;
        gap:8px;
    }
    [data-vk-scope] .vk-steps{
        width:100%;
        justify-content:flex-start;
    }
}*/

/* =========================
   OFFER STRIP
========================= */
/* =========================
   LAYOUT & ALIGNMENT
========================= */

/* 1. 상단 스텝 바 (기존 헤더 바로 아래 고정) */
[data-vk-scope] .vk-topbar {
    background: var(--vk-navy, #1e293b);
    color: #fff;
    position: sticky;
    top: var(--vk-sticky-top); /* 기존 헤더 높이만큼 (예: 80px) */
    z-index: 900;
    width: 100%;
}

/* 2. 오퍼 스트립 (가운데 정렬 및 스텝 바 아래 고정) */
[data-vk-scope] .vk-offer {
    background: var(--vk-red, #dc2626);
    color: #fff;
    position: sticky;
    /* ✅ 스텝바가 sticky라면, 오퍼도 sticky여야 따라옵니다. */
    /* top 값은 (기존헤더높이 + 스텝바높이) 여야 합니다. */
    top: calc(var(--vk-sticky-top) + 40px);
    z-index: 899;
}

/* 3. 내부 텍스트 가운데 정렬 */
[data-vk-scope] .vk-offer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: center; /* ✅ 가운데 정렬 핵심 */
    gap: 12px;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

/* 모바일 대응: 요소가 많아지면 줄바꿈되어도 가운데 정렬 */
@media (max-width: 768px) {
    [data-vk-scope] .vk-offer-inner {
        flex-direction: row; /* 한 줄 유지 혹은 column으로 변경 가능 */
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* =========================
   HERO
========================= */
[data-vk-scope] .vk-hero{
    max-width:1140px;
    margin:0 auto;
    padding:12px 14px 0 14px;
}

[data-vk-scope] .vk-hero-img{
    width:100%;
    height:220px;
    background:#dbeafe;
    background-size:cover;
    background-position:center;
    border:1px solid var(--vk-line);
}

[data-vk-scope] .vk-hero-overlay{
    border:1px solid var(--vk-line);
    border-top:0;
    padding:14px;
    background:#fff;
}

[data-vk-scope] .vk-hero-kicker{
    font-size:22px;
    font-weight:1000;
}

[data-vk-scope] .vk-hero-sub{
    color:var(--vk-muted);
    margin-top:4px;
}


/* (가끔 필요한 경우) 달력 overlay도 같이 */
.ui-widget-overlay{
    z-index: 999998 !important;
}

/* =========================
   Address: 미국식 비율 (City 넓게 / State 중간 / Zip 좁게)
   ========================= */
[data-vk-scope] .vk-grid-addr{
    display:grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap:10px;
}
@media (max-width: 640px){
    [data-vk-scope] .vk-grid-addr{
        grid-template-columns: 1fr;
    }
}


/* =========================
   UL/LI "탭처럼" 들여쓰기
   ========================= */
[data-vk-scope] ul{
    padding-left: 1.25rem;
    margin: .5rem 0;
}
[data-vk-scope] ul li{
    padding-left: .25rem;
}

/* layout */
[data-vk-scope] .vk-hero-sub ul,
[data-vk-scope] .vk-hero-sub ol{
    list-style: disc;
/*    padding-left: 18px;*/
    padding-left: 1.2em;   /* ← TAB 한 칸 느낌 */
/*    margin: 5px 0 10px;*/
}

[data-vk-scope] .vk-hero-sub ol{
    list-style: decimal;
}

[data-vk-scope] .vk-hero-sub li{
/*    margin-bottom: 6px;*/
    line-height: 1.5;
}

[data-vk-scope] .vk-page{
    max-width:1140px;
    margin:0 auto;
    padding:12px 14px 28px 14px;
}
[data-vk-scope] .vk-shell{
    display:grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap:16px;
    align-items:start;
}
@media (max-width: 992px){
    [data-vk-scope] .vk-shell{ grid-template-columns:1fr; }
}

/* cards */
[data-vk-scope] .vk-card{
    background:#fff;
    border:1px solid var(--vk-line);
    border-radius:0;
    padding:var(--vk-pad);
}

[data-vk-scope] .vk-card-hd{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:10px;
    border-bottom:1px solid var(--vk-line);
    padding-bottom:10px;
    margin-bottom:10px;
}
[data-vk-scope] .vk-card-title{ font-weight:1000; font-size:14px; }
[data-vk-scope] .vk-card-mini{ font-size:12px; color:var(--vk-muted); }
.insurance-simple {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.insurance-simple-img {
    width: 40px;
    height: 25px;
    object-fit: cover;
    border-radius: 3px;
}

.insurance-simple .vk-label {
    position: static;
    transform: none;
    font-size: 11px;
    font-weight: 1000;
    color: #334155;
    text-transform: uppercase;
    padding: 0;
    background: none;
}
/* 이미지 기본 스타일 */
img[alt="Travel Insurance"] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

/* 선택박스 hover 효과 */
/* =========================
   VK INPUT: label inside (row1) + value row2
   ========================= */
/* =========================
   VK INPUT: persistent in-field label (row1) + value row2
   ========================= */

/* 1) field를 라벨 오버레이용으로 */
[data-vk-scope] .vk-field{
    position:relative;
    display:block;
    min-width:0;
    margin-top:0;
}

/* 2) 라벨을 input 안으로 고정 배치 (항상 보임) */
/* =========================
   VK LABEL — subtitle style
   ========================= */
/* intl-tel-input wrapper full width */
.iti { width: 100%; display: block; }

/* keep existing input look */
.iti input.form-control {
    width: 100%;
    box-sizing: border-box;
}

/* space for flag + dial code */
.iti--separate-dial-code input.form-control{
    padding-left: 92px; /* 필요 시 80~110 조정 */
}

.iti__selected-flag{
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.iti__country-list{ z-index: 99999; }

/* 기본 서브타이틀 (input 안 상단 고정) */
[data-vk-scope] .vk-field .vk-label{
    display:block !important;
    position:absolute;
    left:12px;
    top:8px;
    z-index:2;

    font-size:10px;          /* 🔹 subtitle 적정 사이즈 */
    line-height:1.2;
    color:#94a3b8;
    letter-spacing:.03em;
    font-weight:500;

    pointer-events:none;
}

/* 타이틀용 라벨 (조금 더 강조) */
[data-vk-scope] .vk-field-title .vk-label{
    display:block !important;
    position:absolute;
    left:12px;
    top:4px;
    z-index:2;

    font-size:14px;          /* 🔹 section / title 느낌 */
    line-height:1.25;
    font-weight:700;
    letter-spacing:.02em;
    color:#0f172a;

    pointer-events:none;
}
@media (max-width: 640px){
    [data-vk-scope] .vk-field .vk-label{
        font-size:11px;
    }
    [data-vk-scope] .vk-field-title .vk-label{
        font-size:13px;
    }
}

/* 3) input/select는 2줄 공간 확보 (값은 아래줄) */
[data-vk-scope] .vk-input{
    width:100%;
    border:1px solid var(--vk-line, #cbd5e1);
    background:#fff;
    color:var(--vk-ink, #0f172a);

    min-height:52px;
    padding:24px 12px 8px 12px;  /* ✅ 라벨자리(위) + 값(아래) */

    line-height:16px;
    font-weight: 900;
}

/* placeholder는 이제 필요 없으니 더 연하게 */
[data-vk-scope] .vk-input::placeholder{
    color:#cbd5e1;
}

/* hover/focus */
[data-vk-scope] .vk-input:hover{ border-color:#94a3b8; }
[data-vk-scope] .vk-input:focus{
    outline:none;
    border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.1);
}

/* select도 동일하게 높이 맞춤 */
[data-vk-scope] select.vk-input{
    padding-top:22px;
    padding-bottom:10px;
}


/*[data-vk-scope] .vk-input{
    width:100%;
    height:var(--inp-h);
    padding:8px 10px;
    border:1px solid var(--vk-line);
    border-radius:0;
    font-size:13px;
    background:#fff;
    color:var(--vk-ink);
}*/

/* =========================
   NUMBER OF GUESTS – visible title inside input
   ========================= */

/* 타이틀용 필드 */
[data-vk-scope] .vk-field-title{
    position:relative;
}

/* 타이틀을 인풋 안 상단에 고정 */
[data-vk-scope] .vk-field-title .vk-label{
    display:block !important;
    position:absolute;
    left:12px;
    top:3px;
    z-index:2;
    margin-bottom:30px;   /* 👈 타이틀과 입력 사이 간격 */
    font-size:14px;
    font-weight:700;
    letter-spacing:.04em;
   /* text-transform:uppercase;*/
    color: #000000;

    pointer-events:none;
}

/* NUMBER OF GUESTS 영역 여백 확보 */
[data-vk-scope] .vk-field-title .vk-radio-row,
[data-vk-scope] .vk-field-title .vk-input{
    margin-top:30px;     /* 👈 기존 18px → 22px (여유 있게) */

}


[data-vk-scope] .vk-hint{ font-size:12px; color:var(--vk-muted); margin-top:2px; }

/* grids */
[data-vk-scope] .vk-grid-2{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:var(--vk-gap);
}
[data-vk-scope] .vk-grid-1{ display:grid; grid-template-columns:1fr; gap:10px; }
[data-vk-scope] .vk-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width: 820px){
    [data-vk-scope] .vk-grid-3{ grid-template-columns:1fr; }
}


@media (max-width: 768px){
    [data-vk-scope] .vk-grid-2{ grid-template-columns:1fr; }
}
[data-vk-scope] .vk-inline{
    display:flex;
    gap:8px;
    align-items:center;
}
[data-vk-scope] .vk-radio-row{ display:flex; gap:10px; flex-wrap:wrap; }
[data-vk-scope] .vk-radio{
    display:flex; align-items:center; gap:8px;
    border:1px solid var(--vk-line);
    padding:8px 10px;
    border-radius:0;
    font-weight:900;
    cursor:pointer;
}
[data-vk-scope] .vk-radio input{ transform:translateY(1px); }

[data-vk-scope] .vk-radio input:checked + span{
    font-weight:800;
    color:#0f172a;
}

/* 선택 안 된 상태는 살짝 연하게 */
[data-vk-scope] .vk-radio span{
    font-weight:500;
    color:#475569;
}

/* guest cards */
[data-vk-scope] .vk-guest-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:12px;
}
@media (max-width: 992px){
    [data-vk-scope] .vk-guest-grid{ grid-template-columns:1fr; }
}
[data-vk-scope] .vk-guest-card{
    border:1px solid var(--vk-line);
    background:#f8fafc;
    padding:12px;
}
[data-vk-scope] .vk-guest-hd{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid var(--vk-line);
    padding-bottom:8px;
    margin-bottom:8px;
}
[data-vk-scope] .vk-guest-title{ font-weight:1000; font-size:13px; }
[data-vk-scope] .vk-chip{
    font-size:11px;
    font-weight:1000;
    padding:3px 8px;
    border:1px solid var(--vk-line);
    background:#fff;
}
[data-vk-scope] .vk-check{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:900;
    color:var(--vk-muted);
}
[data-vk-scope] .vk-same{ color:var(--vk-ink); }

/* payment */
[data-vk-scope] .vk-pay-row{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:var(--vk-gap);
}
@media (max-width: 992px){
    [data-vk-scope] .vk-pay-row{ grid-template-columns:1fr; }
}
[data-vk-scope] .vk-secure{
    margin-top:12px;
    border:1px solid var(--vk-line);
    background:#f8fafc;
    padding:12px;
}
[data-vk-scope] .vk-secure-hd{ font-weight:1000; margin-bottom:6px; }
[data-vk-scope] .vk-pay-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:var(--vk-gap);
    margin-top:10px;
}
@media (max-width: 992px){
    [data-vk-scope] .vk-pay-grid{ grid-template-columns:1fr; }
}

/* buttons */
[data-vk-scope] .vk-actions{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:12px;
}
[data-vk-scope] .vk-btn{
    height:40px;
    padding:0 14px;
    border:1px solid var(--vk-line);
    background:#fff;
    font-weight:1000;
    border-radius:0;
    cursor:pointer;
}
[data-vk-scope] .vk-btn-primary{
    background:var(--vk-red);
    border-color:var(--vk-red);
    color:#fff;
}
[data-vk-scope] .vk-btn-ghost{
    background:#fff;
}
[data-vk-scope] .vk-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* summary sticky */
[data-vk-scope] .vk-right{ position:relative; }
[data-vk-scope] .vk-summary{
    position:sticky;
    top:74px;
    border:1px solid var(--vk-line);
    background:#fff;
    padding:14px;
}
[data-vk-scope] .vk-summary-hd{
    font-weight:1000;
    font-size:12px;
    letter-spacing:.08em;
    color:#334155;
    border-bottom:1px solid var(--vk-line);
    padding-bottom:10px;
    margin-bottom:10px;
}
[data-vk-scope] .vk-sum-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:7px 0;
    border-bottom:1px dashed var(--vk-line);
    font-size:13px;
}
[data-vk-scope] .vk-sum-row .k{ color:var(--vk-muted); }
[data-vk-scope] .vk-sum-row .v{ font-weight:900; text-align:right; }
[data-vk-scope] .vk-sum-hr{ height:1px; background:var(--vk-line); margin:10px 0; }
[data-vk-scope] .vk-strong{ font-size:16px; }
[data-vk-scope] .vk-print{ width:100%; margin-top:12px; }

/* modal */
[data-vk-scope] .vk-modal{
    position:fixed; inset:0;
    background:rgba(0,0,0,.55);
    z-index:2000;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:6vh;
}
[data-vk-scope] .vk-modal{
    position: fixed;
    inset: 0;                     /* top/right/bottom/left = 0 */
    display: flex;
    align-items: center;          /* 세로 중앙 */
    justify-content: center;      /* 가로 중앙 */
    background: rgba(0,0,0,.5);
    z-index: 1000;
}

[data-vk-scope] .vk-modal-card{
    width: min(740px, 92vw);
    background: #fff;
    border-radius: 0;
    border: 1px solid var(--vk-line);
    max-height: 90vh;
    overflow-y: auto;
}

[data-vk-scope] .vk-modal-hd{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 14px;
    border-bottom:1px solid var(--vk-line);
}
[data-vk-scope] .vk-modal-title{ font-weight:1000; }
[data-vk-scope] .vk-modal-body{
    padding:14px;
    color:#111;
    line-height:1.6;
}
[data-vk-scope] .vk-modal-ft{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:12px 14px;
    border-top:1px solid var(--vk-line);
}

/* print */
@media print{
    [data-vk-scope] .vk-topbar,
    [data-vk-scope] .vk-offer,
    [data-vk-scope] .vk-hero{ display:none !important; }

    [data-vk-scope] .vk-shell{ grid-template-columns:1fr; }
    [data-vk-scope] .vk-summary{ position:static; top:auto; }
}