:root{
  --burgundy:#800020; --gold:#D4AF37; --ink:#101114; --muted:#667085;
  --bd:#E6E7EC; --soft:#f6f7f9; --card:#fff;
  --container:min(1200px,92vw); --radius:18px;
  --shadow:0 12px 28px rgba(0,0,0,.10);
  --shadow-strong:0 18px 40px rgba(0,0,0,.14);
  --gap:clamp(16px,2.6vw,26px);

  --rail-title:"신청";
  --rail-desc:"요청 접수 및 기본 정보 확인";
}

*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:var(--ink)}
body{font-family:"Noto Sans KR",system-ui,-apple-system,"Segoe UI",Roboto,"Apple SD Gothic Neo","맑은 고딕","Malgun Gothic",sans-serif;line-height:1.6}
.container{width:var(--container);margin:0 auto;padding:clamp(22px,3.2vw,40px)}
.center{text-align:center}
h1,h2,h3{margin:0}

/* Top */
.topbar{position:static;background:#fff;border-bottom:1px solid #eee}
.badge{display:inline-block;background:var(--burgundy);color:#fff;border-radius:999px;padding:6px 12px;font-weight:700;font-size:14px}
.hero-title{text-align:center;font-size:clamp(28px,5vw,44px);letter-spacing:-.01em;margin:.6rem 0 .3rem}
.lede{text-align:center;color:#333;font-size:clamp(15px,2.4vw,17px);margin:0}
.gold-line{width:86px;height:3px;background:var(--gold);border-radius:3px;margin:1rem auto 0}

/* Audience Cards */
.grid{display:grid;gap:var(--gap)}
.grid-3{grid-template-columns:1fr}
@media (min-width:760px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{
  background:#fff;border:1px solid var(--bd);border-radius:var(--radius);
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  min-height:460px;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-strong);border-color:#dadbe2}
.card-media{height:300px;background:var(--soft);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--bd)}
.card-media img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.card-content{padding:18px 18px 22px;text-align:center}
.card-title{margin:0 0 8px;font-size:clamp(18px,3.2vw,22px);font-weight:800;letter-spacing:-.01em;color:#111}
.kicker{color:var(--burgundy);font-size:14px;line-height:1.45;white-space:nowrap}

/* Timeline + Tabs */
.wrap{display:grid;gap:clamp(14px,2.2vw,22px)}
@media (min-width:980px){.wrap{grid-template-columns:420px 1fr}}
.timeline{background:var(--soft);border:1px solid var(--bd);border-radius:22px;padding:18px}
.step{display:grid;grid-template-columns:36px 1fr;gap:12px;position:relative;padding:10px 6px}
.step:not(:last-child)::after{content:"";position:absolute;left:17px;top:56px;width:2px;height:calc(100% - 6px);background:linear-gradient(#dcdfe6,#eef0f4)}
.dot{width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--burgundy);display:grid;place-items:center}
.dot svg{width:18px;height:18px;stroke:var(--burgundy);fill:none;stroke-width:1.8}
.step h3{margin:2px 0 2px;font-size:16px;font-weight:800}
.step p{margin:0;color:#4a4f57;font-size:14px}

/* ▼ 패널 컨테이너 — overflow 제거(모바일 잘림 방지) */
.panel{
  border:1px solid var(--bd);
  border-radius:22px;
  background:var(--soft);
}
/* 탭 라디오/라벨 */
.tabs input{display:none}
.tablabels{display:grid;grid-template-columns:repeat(4,1fr);background:#f0f1f4;border-bottom:1px solid var(--bd)}
.tablabels label{padding:12px 14px;text-align:center;font-weight:800;cursor:pointer;border-right:1px solid var(--bd);user-select:none}
.tablabels label:last-child{border-right:none}

/* ▼ 패널을 '같은 자리'에서 전환 (flow 유지) */
.tabpanes{position:relative;background:#fff}
.tabpanes > section{
  position:static;     /* 자연 흐름 */
  display:none;
  padding:18px 18px 20px;
  background:#fff;
}

/* (A) 클릭=고정 */
#t1:checked ~ .tabpanes #p1,
#t2:checked ~ .tabpanes #p2,
#t3:checked ~ .tabpanes #p3,
#t4:checked ~ .tabpanes #p4{display:block}

/* 활성 라벨 */
#t1:checked ~ .tablabels label[for="t1"],
#t2:checked ~ .tablabels label[for="t2"],
#t3:checked ~ .tablabels label[for="t3"],
#t4:checked ~ .tablabels label[for="t4"]{background:#fff;color:var(--burgundy)}

/* (B) hover 미리보기 — 해당 패널만 보이도록 강제 숨김 */
.tabs:has(.tablabels label[for="t1"]:hover) .tabpanes > section{display:none !important}
.tabs:has(.tablabels label[for="t1"]:hover) #p1{display:block !important}
.tabs:has(.tablabels label[for="t2"]:hover) .tabpanes > section{display:none !important}
.tabs:has(.tablabels label[for="t2"]:hover) #p2{display:block !important}
.tabs:has(.tablabels label[for="t3"]:hover) .tabpanes > section{display:none !important}
.tabs:has(.tablabels label[for="t3"]:hover) #p3{display:block !important}
.tabs:has(.tablabels label[for="t4"]:hover) .tabpanes > section{display:none !important}
.tabs:has(.tablabels label[for="t4"]:hover) #p4{display:block !important}

/* (C) 키보드 포커스 미리보기 */
.tabs:has(.tablabels label[for="t1"]:focus-visible) .tabpanes > section{display:none !important}
.tabs:has(.tablabels label[for="t1"]:focus-visible) #p1{display:block !important}
.tabs:has(.tablabels label[for="t2"]:focus-visible) .tabpanes > section{display:none !important}
.tabs:has(.tablabels label[for="t2"]:focus-visible) #p2{display:block !important}
.tabs:has(.tablabels label[for="t3"]:focus-visible) .tabpanes > section{display:none !important}
.tabs:has(.tablabels label[for="t3"]:focus-visible) #p3{display:block !important}
.tabs:has(.tablabels label[for="t4"]:focus-visible) .tabpanes > section{display:none !important}
.tabs:has(.tablabels label[for="t4"]:focus-visible) #p4{display:block !important}

/* 패널 카드 */
.s2-card{border:1px solid var(--bd);border-radius:18px;box-shadow:var(--shadow);padding:16px;background:#fff}
.ic{width:40px;height:40px;border-radius:11px;background:#f1f2f5;border:1px solid #e9e9ee;display:grid;place-items:center;margin-right:8px}
.ic svg{width:20px;height:20px;stroke:var(--burgundy);fill:none;stroke-width:1.8}
.row{display:flex;align-items:center;margin:4px 0 8px}
.row h3{margin:0;font-size:18px;font-weight:800}
.space-lg{margin-top:24px}

/* Process(좌측 레일 + 카드) */
.rail{display:grid;grid-template-columns:360px 1fr;gap:24px}
@media(max-width:980px){.rail{grid-template-columns:1fr}}
.left{border-right:1px dashed #e1e3ea;padding-right:24px;display:flex;flex-direction:column;justify-content:center;min-height:220px}
@media(max-width:980px){.left{border-right:none;border-bottom:1px dashed #e1e3ea;padding-bottom:18px;align-items:center;text-align:center}}
.left .railTitle::after{content:var(--rail-title);display:block;color:var(--burgundy);font-weight:900;font-size:22px}
.left .railDesc::after{content:var(--rail-desc);display:block;color:#4c515b;font-size:16px;line-height:1.6;max-width:32ch;margin-top:10px}

/* 카드 목록 */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1200px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
.rdo{position:absolute;left:-9999px}

/* 카드(세로 가운데 정렬) */
.card-proc{
  background:#fff;border:1px solid var(--bd);border-radius:18px;box-shadow:var(--shadow);
  padding:24px;min-height:240px;
  display:flex;flex-direction:column;align-items:center;
  cursor:pointer;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;outline:none;text-align:center;
}
.card-proc:hover,.card-proc:focus-visible{transform:translateY(-4px);box-shadow:0 18px 36px rgba(0,0,0,.14);border-color:#800020}

/* 숫자 시작 라인 동일 */
.card-proc .n{font-weight:900;color:#800020;font-size:15px;margin:2px 0 10px}

/* 제목 블록 세로 가운데 */
.card-proc .titlewrap{
  display:grid;align-content:center;justify-items:center;
  min-height:112px;
  width:100%;
}

/* 제목+영문 묶음 이동 */
.ko{font-weight:900;font-size:20px;color:#101114;line-height:1.15;margin:0 0 6px}
.ko.tri span{display:block}
.tail{color:#5a616d;font-size:15px;line-height:1.2}

/* 카드 선택 시각 강화 + 좌측 레일 동기화 */
.card-proc:focus-visible{outline:3px solid rgba(128,0,32,.25);outline-offset:2px}
.rail:has(#r1:checked) #c1,
.rail:has(#r2:checked) #c2,
.rail:has(#r3:checked) #c3,
.rail:has(#r4:checked) #c4{border-color:#800020;box-shadow:0 18px 36px rgba(128,0,32,.18)}

.rail:has(#r1:checked){--rail-title:"신청";--rail-desc:"요청 접수 및 기본 정보 확인"}
.rail:has(#r2:checked){--rail-title:"견적안내";--rail-desc:"서비스 범위·요금·일정 제안"}
.rail:has(#r3:checked){--rail-title:"예약확정 및 결제";--rail-desc:"세부내용 확인 및 확정 · 선입금 완료"}
.rail:has(#r4:checked){--rail-title:"서비스 진행";--rail-desc:"서비스 당일 공항 미팅 · 교통 연계 · 도착 안내"}

.rail:has(#c1:hover), .rail:has(#c1:focus-visible){--rail-title:"신청";--rail-desc:"요청 접수 및 기본 정보 확인"}
.rail:has(#c2:hover), .rail:has(#c2:focus-visible){--rail-title:"견적안내";--rail-desc:"서비스 범위·요금·일정 제안"}
.rail:has(#c3:hover), .rail:has(#c3:focus-visible){--rail-title:"예약확정 및 결제";--rail-desc:"세부내용 확인 및 확정 · 선입금 완료"}
.rail:has(#c4:hover), .rail:has(#c4:focus-visible){--rail-title:"서비스 진행";--rail-desc:"서비스 당일 공항 미팅 · 교통 연계 · 도착 안내"}

/* Footer — 가운데 정렬 버튼 */
footer{margin-top:40px;border-top:1px solid #eee;background:#fff}
.footer-inner{width:var(--container);margin:0 auto;padding:32px 0;display:flex;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn-primary{
  min-height:48px;padding:0 26px;border-radius:999px;
  background:var(--burgundy);color:#fff;font-weight:800;letter-spacing:.02em;
  box-shadow:0 8px 20px rgba(128,0,32,.18), inset 0 -2px 0 rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary:hover{filter:brightness(1.02);box-shadow:0 10px 26px rgba(128,0,32,.22), inset 0 -2px 0 rgba(0,0,0,.08)}
.btn-primary:active{transform:translateY(1px)}