/* @vibe_jh */
/* 2026-09-02 [김재현] — 부스 투어 랜딩 전용 스타일
   이 페이지는 사이트 공통 CSS(css/common.css 등)를 전혀 로드하지 않는 단독 랜딩이다.
   그래서 리셋부터 여기서 직접 한다. 색상은 브랜드 값(메인 #4c9c2e)을 변수로 한 번만 정의한다. */

:root {
    --tour-green: #4c9c2e;
    --tour-green-dark: #3d7f24;
    --tour-bg: #0e1116;
    --tour-bg-soft: #161b22;
    --tour-line: #2a313b;
    --tour-text: #e8eaed;
    --tour-text-dim: #9aa4b2;
    --tour-white: #ffffff;
    --tour-red: #e05252;
    --tour-radius: 6px;
    --tour-max: 960px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--tour-bg);
    color: var(--tour-text);
    font-family: "Helvetica Neue", Arial, "Malgun Gothic", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--tour-green); }

img { max-width: 100%; height: auto; border: 0; }

.tour-wrap {
    max-width: var(--tour-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* ── 상단 바 ───────────────────────────────────────────────────────────── */
.tour-head {
    background: #000;
    border-bottom: 1px solid var(--tour-line);
    position: sticky;
    top: 0;
    z-index: 10;
}

.tour-head-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
}

.tour-logo img {
    width: 140px;
    vertical-align: middle;
}

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.tour-btn {
    display: inline-block;
    padding: 14px 30px;
    background: var(--tour-green);
    color: var(--tour-white);
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    border: 0;
    border-radius: var(--tour-radius);
    cursor: pointer;
    font-family: inherit;
}

.tour-btn:hover { background: var(--tour-green-dark); }

.tour-btn-sm {
    padding: 9px 18px;
    font-size: 13px;
}

/* ── 히어로 ───────────────────────────────────────────────────────────── */
.tour-hero {
    padding: 70px 0 60px;
    background: linear-gradient(180deg, #11161d 0%, var(--tour-bg) 100%);
    border-bottom: 1px solid var(--tour-line);
}

.tour-eyebrow {
    margin: 0 0 10px;
    color: var(--tour-green);
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tour-hero h1 {
    margin: 0 0 26px;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.tour-facts {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.tour-facts li {
    padding: 7px 0;
    border-top: 1px solid var(--tour-line);
    color: var(--tour-text);
    font-size: 15px;
}

.tour-facts li span {
    display: inline-block;
    width: 70px;
    color: var(--tour-text-dim);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tour-lead {
    max-width: 640px;
    margin: 0 0 30px;
    color: var(--tour-text-dim);
    font-size: 16px;
}

/* ── 홍보 이미지 ──────────────────────────────────────────────────────── */
.tour-gallery {
    padding: 40px 0 0;
}

.tour-gallery img {
    display: block;
    width: 100%;
    margin: 0 0 20px;
    border-radius: var(--tour-radius);
}

/* [김재현] 2026-09-02 디자인 원장 분할 이미지용 — 조각들이 이어 붙은 한 장처럼 보이게.
   (일반 홍보 이미지로 되돌리면 is-seamless 클래스만 빼면 된다) */
.tour-gallery.is-seamless { padding: 0; }
/* 폭 제한 없이 화면 가득(풀블리드). 원장이 1440px 라 그보다 넓은 모니터에선 약간 확대된다.
   또렷함이 아쉬우면 부서에 2배(2880px) 원본을 받아 재분할하면 된다. */
.tour-gallery-in { width: 100%; }
.tour-gallery.is-seamless img { margin: 0; border-radius: 0; }

/* 히어로 이미지에 그려진 BOOK A MEETING 버튼 위에 얹는 투명 링크.
   좌표는 booth_01_hero.jpg(1440x672) 기준 백분율 — 버튼 실측 x1022~1338, y600~648 에 터치 여유 포함 */
.tour-hero-img { position: relative; }
.tour-hero-cta {
    position: absolute;
    left: 70%;
    top: 87.5%;
    width: 24%;
    height: 10.5%;
    display: block;
}

/* 이미지 상단에 그려진 VINATech 로고 위 투명 링크 → /en/ (좌표는 booth_01_hero.jpg 1440x672 기준 백분율) */
.tour-hero-logo {
    position: absolute;
    left: 4%;
    top: 4%;
    width: 19%;
    height: 13%;
    display: block;
}

/* 폼 섹션 부제(디자인 원장 문구) */
.tour-form-sub {
    margin: -6px 0 22px;
    color: var(--tour-text-dim);
    font-size: 14px;
}

/* [김재현] 2026-09-02 디자인 05 섹션 재현 — 왼쪽 "Let's Meet" 패널 + 오른쪽 폼 2단.
   폼이 패널보다 훨씬 길어서 패널은 sticky 로 스크롤을 따라온다. 900px 이하는 위아래로 쌓임 */
.tour-form-cols { display: flex; gap: 32px; align-items: flex-start; }
.tour-form-side { flex: 0 0 36%; position: sticky; top: 24px; }
.tour-form-side img { display: block; width: 100%; border-radius: var(--tour-radius); }
.tour-form-main { flex: 1 1 auto; min-width: 0; }
@media (max-width: 900px) {
    .tour-form-cols { display: block; }
    .tour-form-side { position: static; margin: 0 0 20px; }
    .tour-form-side img { max-width: 550px; }
}

/* [김재현] 2026-09-02 PC 에서 패널이 작고 왼쪽 여백이 뜬다는 피드백 —
   PC(901px~)에서만 폼 섹션의 중앙 정렬 폭 제한을 풀어 패널을 화면 왼쪽 끝에 붙이고 키운다.
   위쪽 갤러리가 풀블리드라 이 섹션만 들여쓰기돼 보이던 문제도 같이 해소된다. 모바일은 그대로. */
@media (min-width: 901px) {
    /* is-wide = 2단(패널) 모드일 때만 폭 제한 해제 — 이미지 없는 폴백 1단 모드는 기존 중앙 정렬 유지 */
    .tour-form-sec.is-wide .tour-wrap { max-width: none; padding: 0; }
    .tour-form-cols { gap: 48px; }
    .tour-form-side { flex: 0 0 38%; }
    .tour-form-side img { border-radius: 0 var(--tour-radius) var(--tour-radius) 0; } /* 왼쪽 모서리는 화면에 붙으니 각지게 */
    .tour-form-main { max-width: 960px; padding-right: 32px; }
}

/* ── 신청 폼 ──────────────────────────────────────────────────────────── */
.tour-form-sec {
    padding: 60px 0 80px;
}

.tour-form-sec h2 {
    margin: 0 0 30px;
    font-size: 28px;
    line-height: 1.3;
}

.tour-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.tour-field {
    width: 50%;
    margin: 0 0 18px;
    padding: 0 10px;
}

.tour-field-full { width: 100%; }

.tour-field label,
.tour-choice legend {
    display: block;
    margin: 0 0 7px;
    color: var(--tour-text-dim);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tour-field em,
.tour-choice legend em,
.tour-agree em {
    color: var(--tour-red);
    font-style: normal;
}

.tour-field input,
.tour-field select,
.tour-field textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--tour-bg-soft);
    border: 1px solid var(--tour-line);
    border-radius: var(--tour-radius);
    color: var(--tour-text);
    font-family: inherit;
    font-size: 15px;
}

.tour-field textarea { resize: vertical; }

.tour-field input:focus,
.tour-field select:focus,
.tour-field textarea:focus {
    outline: 0;
    border-color: var(--tour-green);
}

/* 값이 없을 때만 흐리게 — 선택 후에는 본문 색으로 돌아온다 */
.tour-field select { color: var(--tour-text); }

/* ── 국가 검색 콤보박스 ───────────────────────────────────────────────────
   tour.js 가 <select name="country"> 를 숨기고 이 구조를 만든다(점진적 개선).
   JS 가 없으면 이 규칙들은 쓰이지 않고 원본 셀렉트가 그대로 보인다.
   입력칸은 .tour-field input 규칙을 그대로 물려받아 다른 칸과 생김새가 같다. */
.tour-combo {
    position: relative;
}

/* 콤보박스로 승격된 뒤의 원본 셀렉트 — 값 보관용으로만 남는다(제출은 그대로 된다) */
.tour-combo-native {
    display: none;
}

.tour-combo-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;                 /* reCAPTCHA 위젯·아래 필드 위로 떠야 한다 */
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    background: var(--tour-bg-soft);
    border: 1px solid var(--tour-line);
    border-radius: var(--tour-radius);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.tour-combo-list li {
    padding: 9px 12px;
    border-radius: 4px;
    color: var(--tour-text);
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

/* 마우스 hover 와 키보드 활성 항목을 같은 모습으로 — 둘이 달라 보이면 지금 뭐가 선택될지 헷갈린다 */
.tour-combo-list li:hover,
.tour-combo-list li.is-active {
    background: var(--tour-green);
    color: var(--tour-white);
}

.tour-combo-list li.is-empty,
.tour-combo-list li.is-empty:hover {
    background: none;
    color: var(--tour-text-dim);
    cursor: default;
}

.tour-choice {
    margin: 0 0 22px;
    padding: 0;
    border: 0;
}

.tour-choice legend { padding: 0; }

.tour-opts {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
}

/* [김재현] 2026-09-02 칩이 줄바꿈될 때 마지막 하나만 홀로 떠 보이는 문제(사용자 피드백):
   flex-grow 로 각 줄을 균등하게 채워 남는 칩도 그 줄 전체 폭을 나눠 갖게 한다. */
.tour-opts label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    white-space: nowrap;
    margin: 0 5px 10px;
    padding: 10px 12px;
    background: var(--tour-bg-soft);
    border: 1px solid var(--tour-line);
    border-radius: var(--tour-radius);
    cursor: pointer;
    font-size: 14px;
}

.tour-opts label:hover { border-color: var(--tour-green); }

.tour-opts input { margin: 0 8px 0 0; }

/* ── 동의 ─────────────────────────────────────────────────────────────── */
.tour-agree {
    margin: 24px 0 0;
    padding: 18px 20px;
    background: var(--tour-bg-soft);
    border: 1px solid var(--tour-line);
    border-radius: var(--tour-radius);
}

.tour-agree label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    cursor: pointer;
}

.tour-agree input { margin: 0 8px 0 0; }

.tour-link {
    padding: 0;
    background: none;
    border: 0;
    color: var(--tour-green);
    font-family: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.tour-agree-box {
    margin: 10px 0 14px;
    padding: 14px 16px;
    background: var(--tour-bg);
    border: 1px solid var(--tour-line);
    border-radius: var(--tour-radius);
    color: var(--tour-text-dim);
    font-size: 13px;
    line-height: 1.7;
}

.tour-captcha { margin: 24px 0 0; }

.tour-submit {
    margin: 26px 0 0;
    text-align: center;
}

/* ── 완료 / 안내 패널 ─────────────────────────────────────────────────── */
.tour-panel {
    padding: 34px 30px;
    background: var(--tour-bg-soft);
    border: 1px solid var(--tour-line);
    border-radius: var(--tour-radius);
}

.tour-panel h3 {
    margin: 0 0 14px;
    font-size: 21px;
}

.tour-panel p { margin: 0 0 12px; }

.tour-done { border-left: 4px solid var(--tour-green); }

.tour-notice { border-left: 4px solid var(--tour-text-dim); }

.tour-muted { color: var(--tour-text-dim); }

/* ── 허니팟 (봇 전용 입력칸 — 화면에서 완전히 치운다) ───────────────────
   오프스크린으로 치우는 이유: display:none 은 단순 봇도 걸러내지만, 요즘 스팸 봇은
   "숨겨진 필드는 건너뛴다"는 규칙을 갖고 있어 탐지력이 떨어진다.
   대신 사람이 실수로 채우는 사고(브라우저 자동완성)는 CSS 가 아니라 마크업에서 막는다
   — 필드명·라벨을 자동완성이 매칭할 수 없게 만들었다(index.php 주석 참조). */
.tour-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/* ── 푸터 ─────────────────────────────────────────────────────────────── */
.tour-foot {
    padding: 26px 0;
    background: #000;
    border-top: 1px solid var(--tour-line);
    color: var(--tour-text-dim);
    font-size: 13px;
    text-align: center;
}

.tour-foot p { margin: 4px 0; }

/* ── 모바일 ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .tour-hero { padding: 46px 0 40px; }
    .tour-hero h1 { font-size: 28px; }
    .tour-field { width: 100%; }
    .tour-form-sec h2 { font-size: 22px; }
    .tour-facts li span { display: block; width: auto; }
}