/* ============================================================
   sub.css — 서브 페이지 공통. common.css 다음에 로드된다.
   ============================================================ */

/* ----- 서브 히어로 -----
   페이지 성격에 따라 두 형태로 나눈다.
     .shero          사진을 크게 쓰는 소개형 (carrier · drive · company)
                     글은 가운데가 아니라 좌하단에 붙인다.
     .shero--flat    낮고 담백한 머리말 (board · faq · reservation · reservation-check)
                     영문 라벨과 제목을 한 줄에 붙여 목록·양식이 바로 이어지게 한다.
   배경 이미지 슬롯(.shero__bg) 위에 남색 레이어를 덮어 흰 글자 대비를 확보한다.
   이미지가 없어도 아래 그라데이션이 그대로 배경이 되므로 깨져 보이지 않는다. */
.shero{position:relative;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:flex-start;text-align:left;
  height:clamp(240px,32vw,380px);padding-bottom:clamp(28px,4vw,52px);color:var(--white);
  background:linear-gradient(135deg,var(--brand-dark) 0%,var(--brand) 100%);}
.shero--drive{background:linear-gradient(135deg,#1f3550 0%,#3a6ea5 100%);}
.shero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.shero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(8,55,111,.72) 0%,rgba(8,55,111,.36) 45%,rgba(4,26,54,.88) 100%);}
/* .shero 가 flex 라 .wrap 이 내용 폭으로 줄어들고 margin:auto 에 밀려 가운데로 간다.
   그러면 히어로 제목만 본문 왼쪽 눈금에서 300px 튄다. 폭을 채워 본문과 같은 선에 세운다. */
.shero>.wrap{position:relative;z-index:1;width:100%;}
.shero__eng{font-size:13px;font-weight:600;letter-spacing:.24em;opacity:.8;}
.shero__title{margin-top:10px;font-size:var(--fs-h2);font-weight:800;line-height:1.2;}
.shero__desc{margin-top:12px;max-width:620px;font-size:var(--fs-sm);opacity:.9;}

.shero--flat{align-items:center;height:auto;min-height:0;
  padding:clamp(30px,4vw,46px) 0 clamp(26px,3.4vw,38px);}
.shero--flat::after{background:linear-gradient(90deg,rgba(8,55,111,.94) 0%,rgba(8,55,111,.6) 100%);}
.shero--flat .shero__eng{display:inline-block;margin-right:16px;vertical-align:middle;}
.shero--flat .shero__title{display:inline-block;margin-top:0;vertical-align:middle;
  font-size:var(--fs-h3);}
.shero--flat .shero__desc{margin-top:8px;}

/* ----- 탭형 서브메뉴 (sticky) -----
   상단에 붙어 있는 GNB바(--sticky-h) 바로 아래에 붙는다. */
.subnav{position:sticky;top:var(--sticky-h);z-index:50;background:var(--white);
  border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.04);}
.subnav__list{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.subnav__list::-webkit-scrollbar{display:none;}
.subnav__list>li{flex:1 0 auto;}
.subnav__link{display:block;padding:18px 26px;text-align:center;white-space:nowrap;
  font-weight:700;color:var(--ink-sub);border-bottom:3px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);}
.subnav__link:hover{color:var(--brand);}
.subnav__link.is-on{color:var(--brand);border-bottom-color:var(--brand);}
@media (max-width:767px){.subnav__link{padding:14px 18px;font-size:var(--fs-sm);}}

/* ----- 블록 골격 ----- */
.blk{padding:80px 0;scroll-margin-top:72px;}
.blk--soft{background:var(--bg-soft);}
/* 섹션 머리말은 가운데 정렬 대신 왼쪽 정렬 + 짧은 눈금선으로 리듬을 바꿨다. */
.blk__head{text-align:left;margin-bottom:44px;}
.blk__head::before{content:'';display:block;width:44px;height:3px;
  margin-bottom:18px;background:var(--brand);}
.blk__eng{display:block;font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--brand);}
.blk__title{margin-top:10px;font-size:var(--fs-h2);font-weight:800;line-height:1.25;}
.blk__desc{margin-top:14px;max-width:760px;color:var(--ink-sub);}
.blk__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:44px;}
@media (max-width:767px){.blk{padding:56px 0;scroll-margin-top:60px;}.blk__head{margin-bottom:30px;}}

.wrap--narrow{max-width:900px;}

/* ----- 블록 대표 이미지 슬롯 ----- */
.blk__media{margin:0 0 34px;border-radius:var(--radius);overflow:hidden;background:var(--bg-soft);}
.blk__media img{display:block;width:100%;height:auto;}

/* ----- ABOUT 소개 블록 (carrier · drive #top) -----
   원본은 전폭 사진 아래 한 문장을 두는 세로 3단이라 세 덩어리가 따로 놀았다.
   여기서는 글(왼쪽)과 사진(오른쪽)을 한 줄로 묶고 사진 비율을 4:3 으로 줄여
   화면을 덜 먹게 한다. 한 문장뿐인 리드는 본문보다 키워 제목과 무게를 맞춘다. */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(28px,4.5vw,64px);align-items:center;}
.about .blk__head{margin-bottom:0;}
.about__lead{margin:22px 0 0;font-size:clamp(16px,1.7vw,20px);line-height:1.8;
  color:var(--ink-sub);}
.about__lead strong{color:var(--ink);font-weight:700;}
.about__media{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--bg-soft);}
.about__media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
@media (max-width:900px){
  .about{grid-template-columns:1fr;gap:24px;}
  .about__media img{aspect-ratio:16/9;}
}

/* ----- 리드 본문 ----- */
.lead p{margin-top:16px;font-size:clamp(15px,1.5vw,18px);line-height:1.9;color:var(--ink-sub);}
.lead p:first-child{margin-top:0;}
.lead strong{color:var(--ink);font-weight:700;}

/* ----- 큰 버튼 ----- */
.btn-lg{display:inline-block;padding:16px 36px;border-radius:999px;font-weight:700;
  background:var(--brand);color:var(--white);
  transition:background .3s var(--ease),transform .3s var(--ease);}
.btn-lg:hover{background:var(--brand-dark);transform:translateY(-2px);}
.btn-lg--ghost{background:var(--white);color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand);}
.btn-lg--ghost:hover{background:var(--brand);color:var(--white);}

/* ----- 스텝 UI (탁송과정 / 예약절차) -----
   둘 다 원본과 같은 가로 배치다. 원본이 두 블록을 다르게 그리므로 여기서도 다르게 둔다.
     .steps--cards 탁송과정 4단 — 테두리 카드 4칸을 화살표로 잇는다
     .steps--4     예약절차 — 번호 원을 선으로 잇는다 */
.steps__item{position:relative;}
.steps__text{font-size:var(--fs-sm);line-height:1.85;color:var(--ink-sub);}

/* 탁송과정 4단 카드. 1200 이상은 한 행 4칸, 그 아래는 가로 스와이프(원본도 좁으면 슬라이더). */
.steps--cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.steps--cards .steps__item{display:flex;flex-direction:column;padding:22px 18px 18px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);}
.steps--cards .steps__item--on{border-color:var(--brand);
  box-shadow:0 6px 24px rgba(11,77,162,.13);}
/* 카드 사이 화살표. 간격(24px)을 그대로 채우므로 칸 너비를 잡아먹지 않는다. */
.steps--cards .steps__item::after{content:'\203A';position:absolute;top:50%;right:-24px;
  width:24px;height:24px;margin-top:-12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--line);color:var(--white);font-size:17px;font-weight:700;
  padding-bottom:2px;}
.steps--cards .steps__item:last-child::after{content:none;}
.steps--cards .steps__item--on::after{background:var(--brand);}
.steps--cards .steps__no{align-self:flex-start;padding:5px 12px;border-radius:999px;
  background:var(--bg-soft);color:var(--ink-sub);
  font-size:11px;font-weight:700;letter-spacing:.08em;}
.steps--cards .steps__item--on .steps__no{background:var(--brand);color:var(--white);}
.steps--cards .steps__name{margin-top:14px;font-size:17px;font-weight:700;line-height:1.4;}
.steps--cards .steps__text{margin-top:10px;font-size:13px;line-height:1.75;}
.steps--cards .steps__text + .steps__text{margin-top:6px;}
/* 원본이 형광 배경으로 칠하는 구절. 줄바꿈돼도 배경이 끊기지 않게 clone. */
.steps--cards .steps__text strong{padding:0 2px;border-radius:3px;
  background:var(--brand-light);color:var(--brand-dark);font-weight:700;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}
/* 단선 일러스트(assets/img/step/). 본문 길이가 달라도 아래에 붙어 4칸 밑선이 맞는다. */
.steps--cards .steps__ic{display:flex;justify-content:center;align-items:flex-end;
  margin-top:auto;padding-top:20px;}
.steps--cards .steps__ic img{width:auto;height:72px;}
@media (max-width:1199px){
  .steps--cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(var(--gut) * -1);padding:2px var(--gut) 10px;}
  .steps--cards .steps__item{flex:0 0 262px;scroll-snap-align:start;}
}
@media (max-width:767px){
  .steps--cards .steps__item{flex-basis:min(78vw,300px);}
}

/* 예약절차 단계 표시. */
.steps--4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.steps--4 .steps__item{padding:0 16px;text-align:center;}
.steps--4 .steps__no{display:inline-flex;flex-direction:column;align-items:center;
  justify-content:center;width:52px;height:52px;border-radius:50%;
  background:var(--brand);color:var(--white);
  font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.04em;}
/* 스텝 아이콘(인라인 SVG). 번호 원 아래 한 칸이라 원을 가로지르는 연결선(top:25px)에 닿지 않는다.
   장식이라 색은 강조색 하나만 쓰고 스크린리더에는 aria-hidden 으로 감춘다. */
.steps--4 .steps__ic{display:block;margin-top:12px;color:var(--brand);}
.steps--4 .steps__ic svg{width:28px;height:28px;}
.steps--4 .steps__name{margin-top:10px;font-size:17px;font-weight:700;}
.steps--4 .steps__text{margin-top:10px;}
@media (min-width:1200px){
  .steps--4{gap:0;}
  /* 번호 원을 가로지르는 연결선. 양 끝은 원 바깥으로 나가지 않게 자른다. */
  .steps--4 .steps__item::before{content:'';position:absolute;top:25px;left:0;right:0;
    height:2px;background:var(--line);}
  .steps--4 .steps__item:first-child::before{left:50%;}
  .steps--4 .steps__item:last-child::before{right:50%;}
  .steps--4 .steps__no{position:relative;box-shadow:0 0 0 7px var(--white);}
}
/* 예약절차는 원본대로 5단이다. 열 수만 5로 바꾸고 나머지 규칙은 .steps--4 를 그대로 쓴다. */
.steps--5{grid-template-columns:repeat(5,1fr);}
@media (max-width:1199px){.steps--4{grid-template-columns:repeat(2,1fr);}
  .steps--5{grid-template-columns:repeat(2,1fr);}}
@media (max-width:767px){
  .steps--4{grid-template-columns:1fr;gap:12px;}
}

/* ----- WHY US 5항목 (inc/parts/quality.php) -----
   5개를 균등 2열에 두면 마지막 하나가 옆칸을 비운 채 홀로 남는다.
   3열 격자에서 첫 항목만 2열을 차지하는 비대칭으로 두면 두 줄에 빈칸 없이 들어간다.
   가는 눈금선 하나로 나누던 것을 카드로 바꿔 항목 경계를 분명히 하고,
   첫 항목만 남색 면으로 채워 어디부터 읽는지 알 수 있게 했다. */
.whyus{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.whyus__item{display:flex;flex-direction:column;padding:28px 26px;
  background:var(--white);border-radius:var(--radius);
  box-shadow:0 1px 0 var(--line),0 6px 18px rgba(11,77,162,.05);}
.whyus__item:first-child{justify-content:center;
  background:linear-gradient(135deg,var(--brand-dark) 0%,var(--brand) 100%);
  color:var(--white);box-shadow:0 10px 26px rgba(11,77,162,.22);}
.whyus__no{align-self:flex-start;padding:5px 12px;border-radius:999px;
  background:var(--brand-light);color:var(--brand);
  font-size:11px;font-weight:700;letter-spacing:.14em;}
.whyus__item:first-child .whyus__no{background:rgba(255,255,255,.2);color:var(--white);}
.whyus__name{margin-top:16px;font-size:clamp(18px,1.8vw,21px);font-weight:700;line-height:1.45;}
.whyus__item:first-child .whyus__name{font-size:clamp(22px,2.4vw,29px);}
.whyus__text{margin-top:12px;font-size:var(--fs-sm);line-height:1.9;color:var(--ink-sub);}
.whyus__item:first-child .whyus__text{color:rgba(255,255,255,.86);
  font-size:clamp(15px,1.5vw,17px);max-width:46ch;}
.whyus + .tbl-note{margin-top:40px;}
@media (max-width:1199px){
  .whyus{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .whyus{grid-template-columns:1fr;gap:14px;}
}

/* ----- 추천고객 목록 (carrier.php · drive.php 'INQUIRY') -----
   원본은 사진 카드 격자였다. 사진이 없다고 표처럼 늘어놓으면 오른쪽 설명이
   작고 흐려서 읽히지 않는다. 짧은 설명을 눈표로 제목 위에 올리고(DOM 순서는
   그대로 두고 column-reverse 로 뒤집는다) 제목을 키워 한 덩어리로 읽게 한다.
   항목 수가 3의 배수가 아니어도 마지막 칸이 남은 열을 채워 구멍이 없다. */
.reco{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.reco__item{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px;
  padding:26px 24px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .25s var(--ease),transform .25s var(--ease);}
.reco__item:hover{border-color:var(--brand);transform:translateY(-3px);}
.reco__item:last-child:nth-child(3n+2){grid-column:span 2;}
.reco__item:last-child:nth-child(3n+1){grid-column:span 3;}
.reco__name{font-size:clamp(17px,1.6vw,20px);font-weight:700;line-height:1.45;}
.reco__text{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--brand);}
@media (max-width:1199px){
  .reco{grid-template-columns:repeat(2,1fr);}
  .reco__item:last-child:nth-child(3n+1),
  .reco__item:last-child:nth-child(3n+2){grid-column:auto;}
  .reco__item:last-child:nth-child(odd){grid-column:span 2;}
}
@media (max-width:767px){
  .reco{grid-template-columns:1fr;gap:12px;}
  .reco__item{padding:20px 18px;}
  .reco__item:last-child:nth-child(odd){grid-column:auto;}
}

/* ----- 카드 그리드 ----- */
.cards{display:grid;gap:24px;}
.cards--2{grid-template-columns:repeat(2,1fr);}
.cards--3{grid-template-columns:repeat(3,1fr);}
.cards--4{grid-template-columns:repeat(4,1fr);}
.card{height:100%;padding:30px 24px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);}
.card:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:var(--shadow);}
.card__no{display:block;margin-bottom:10px;font-size:12px;font-weight:600;
  letter-spacing:.1em;color:var(--accent);}
.card__name{font-size:17px;font-weight:700;line-height:1.4;}
.card__text{margin-top:10px;font-size:var(--fs-sm);line-height:1.8;color:var(--ink-sub);}
.card__list{margin-top:14px;}
.card__list li{position:relative;padding-left:14px;font-size:var(--fs-sm);
  line-height:1.9;color:var(--ink-sub);}
.card__list li::before{content:'';position:absolute;left:0;top:13px;
  width:5px;height:5px;border-radius:50%;background:var(--brand);}
/* 탁송종류 카드(drive.php 3종). 원본 순서대로 소개 한 줄 → 국문명 → 영문명이라
   영문명을 맨 아래에 두고 그 위에 구분선을 둔다. */
.card--type .card__text{margin-top:0;}
.card--type .card__name{margin-top:12px;font-size:19px;}
.card--type .card__no{margin-top:14px;margin-bottom:0;padding-top:14px;font-size:13px;
  color:var(--brand);border-top:1px solid var(--line);}
.card .badge{margin-bottom:14px;}

/* 유의사항 본문에서 원본이 형광으로 칠한 구절. steps__text strong 과 같은 처리다. */
.card__text strong{padding:0 2px;border-radius:3px;
  background:var(--brand-light);color:var(--brand-dark);font-weight:700;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}

@media (max-width:1199px){.cards--3,.cards--4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:767px){.cards--2,.cards--3,.cards--4{grid-template-columns:1fr;}}

/* ----- 카캐리어 vs 드라이브 비교 (compare.php) -----
   원본 인포그래픽처럼 카드마다 사진과 색 띠를 둬 두 서비스를 한눈에 가른다.
   행 = 사진 1 + 서비스명 1 + 항목 5. subgrid 로 두 카드가 같은 행을 공유하므로
   같은 순번 항목과 그 사이 가로선이 두 카드에서 같은 높이에 온다.
   767 이하에서는 subgrid 를 풀고 위아래로 쌓는다. */
/* 세로 간격은 0이어야 한다. row-gap 을 주면 행마다 빈 띠가 생겨
   글이 칸 위에 붙고 아래가 텅 빈다. 행 구분은 li 의 border-top 이 낸다. */
.cmp{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);column-gap:28px;row-gap:0;
  grid-template-rows:auto auto repeat(5,auto);}
.cmp__col{grid-row:span 7;display:grid;grid-template-rows:subgrid;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;}
.cmp__media{display:block;}
.cmp__media img{display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:16/9;}
.cmp__name{display:flex;align-items:center;padding:15px 22px;
  font-size:19px;font-weight:700;color:var(--white);letter-spacing:-.02em;}
.cmp__col--carrier .cmp__name{background:var(--brand);}
/* 드라이브는 같은 계열의 더 짙은 남색이라 두 카드가 색으로 갈린다. */
.cmp__col--drive .cmp__name{background:var(--brand-dark);}
.cmp__list{grid-row:span 5;display:grid;grid-template-rows:subgrid;
  list-style:none;margin:0;padding:0;}
.cmp__list li{display:flex;align-items:center;
  padding:15px 22px;border-top:1px solid var(--line);
  font-size:15.5px;line-height:1.5;color:var(--ink);}
.cmp__list li:first-child{border-top:0;}
@media (max-width:767px){
  /* 여기서는 카드가 위아래로 쌓이므로 카드 사이 간격이 필요하다. */
  .cmp{grid-template-columns:1fr;grid-template-rows:none;row-gap:22px;}
  .cmp__col,.cmp__list{display:block;grid-row:auto;}
  .cmp__list li{display:block;}
}

/* ----- 뱃지 ----- */
.badge{display:inline-flex;align-items:center;padding:5px 13px;border-radius:999px;
  font-size:12px;font-weight:700;}
.badge--warn{background:#fff4e0;color:#a35c00;}
.badge--talk{background:var(--brand-light);color:var(--brand-dark);}
.badge--stop{background:#ffecec;color:#c62828;}
.badge--keep{background:#f1ecfd;color:#5b3ec8;}

/* ----- 인라인 장식 아이콘 (직접 그린 SVG, 색은 부모에서 상속) ----- */
.ic{flex:0 0 auto;width:1.15em;height:1.15em;margin-right:6px;vertical-align:-.18em;}
.cmp__name .ic{width:26px;height:26px;margin-right:9px;}

/* ----- 아코디언 (네이티브 <details>) ----- */
.acc__item{margin-bottom:12px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;}
.acc__item>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:22px 24px;font-weight:700;cursor:pointer;list-style:none;
  transition:color .25s var(--ease),background .25s var(--ease);}
.acc__item>summary::-webkit-details-marker{display:none;}
.acc__item>summary::marker{content:'';}
.acc__item>summary::after{content:'+';flex:0 0 auto;font-size:24px;line-height:1;color:var(--brand);}
.acc__item>summary:hover{background:var(--bg-soft);}
.acc__item>summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}
.acc__item[open]>summary{color:var(--brand);border-bottom:1px solid var(--line);}
.acc__item[open]>summary::after{content:'−';}
.acc__body{padding:22px 24px;}
.acc__body li{position:relative;padding-left:14px;line-height:1.9;
  font-size:var(--fs-sm);color:var(--ink-sub);}
.acc__body li::before{content:'';position:absolute;left:0;top:13px;
  width:5px;height:5px;border-radius:50%;background:var(--brand);}
@media (max-width:767px){
  .acc__item>summary{padding:18px 18px;font-size:var(--fs-sm);}
  .acc__body{padding:18px;}
}

/* ----- 표 ----- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--radius);background:var(--white);}
.tbl{min-width:1010px;border-top:2px solid var(--brand);}
.tbl th,.tbl td{padding:16px 14px;text-align:center;vertical-align:middle;
  font-size:var(--fs-sm);line-height:1.7;border-bottom:1px solid var(--line);}
.tbl thead th{background:var(--brand-light);font-weight:600;color:var(--brand-dark);
  white-space:nowrap;}
.tbl tbody th{background:#fafbfd;font-weight:600;white-space:nowrap;}
.tbl td.is-left{text-align:left;}
.tbl tbody tr:hover{background:#fcfdff;}
/* 표 첫 열 차량 사진 슬롯 (800×600 원본을 150×113으로 축소 표시) */
.tbl td.tbl__thumb{width:174px;padding:10px 12px;}
.tbl td.tbl__thumb img{display:block;width:150px;height:113px;object-fit:cover;border-radius:6px;}
.tbl-note{margin-top:14px;font-size:13px;line-height:1.8;color:var(--ink-sub);}

/* ===== Part4 게시판 공통 ===== */
/* 서브 히어로(.shero)는 Part 3 sub.css 정의를 그대로 쓴다. 여기서 다시 선언하지 않는다.
   .bd-head 는 히어로 이미지 슬롯이 없는 약관 문서(privacy/terms) 전용으로만 남긴다. */
.bd-head{background:var(--bg-soft);padding:48px 0;border-bottom:1px solid var(--line);}
.bd-head__title{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.02em;}
.bd-head__desc{margin-top:10px;color:var(--ink-sub);}
.bd-wrap{padding:48px 0 80px;}

/* 업로드 이미지가 아직 없을 때 자리를 지키는 표시.
   inc/img.php 의 upload_img_tag() 가 이 마크업을 내보낸다. 부모는 position:relative 여야 한다. */
.img-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--ink-sub);font-size:var(--fs-sm);}

.bd-btn{display:inline-block;padding:12px 26px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--white);font-size:var(--fs-sm);
  transition:background .25s var(--ease),color .25s var(--ease);}
.bd-btn:hover{background:var(--bg-soft);}
.bd-btn--primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.bd-btn--primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);}

.bd-badge{display:inline-block;padding:2px 10px;border-radius:11px;
  background:var(--brand);color:#fff;font-size:12px;font-weight:700;line-height:1.7;}

/* 검색바 */
.bd-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  justify-content:center;margin-bottom:24px;}
.bd-search__input{width:min(360px,100%);padding:12px 16px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--white);}
.bd-search__input:focus{outline:2px solid var(--brand);outline-offset:1px;}
.bd-search__btn{padding:12px 26px;border-radius:var(--radius);
  background:var(--brand);color:#fff;font-size:var(--fs-sm);font-weight:700;}
.bd-search__btn:hover{background:var(--brand-dark);}
.bd-search__reset{font-size:var(--fs-sm);color:var(--ink-sub);text-decoration:underline;}
.bd-count{margin-bottom:16px;font-size:var(--fs-sm);color:var(--ink-sub);}
.bd-count strong{color:var(--brand);}

/* 빈 목록 / 404 */
.bd-empty{padding:80px 20px;text-align:center;border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line);}
.bd-empty__title{font-size:var(--fs-h3);font-weight:700;}
.bd-empty__text{margin-top:8px;color:var(--ink-sub);}
.bd-404{padding:120px 0;text-align:center;}
.bd-404__code{font-size:64px;font-weight:700;color:var(--brand);line-height:1;}
.bd-404__title{margin-top:16px;font-size:var(--fs-h3);}
.bd-404__text{margin:8px 0 28px;color:var(--ink-sub);}

/* 리스트형 */
.bd-list{border-top:2px solid var(--ink);}
.bd-list th,.bd-list td{padding:16px 10px;border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);text-align:center;font-weight:400;}
.bd-list thead th{background:var(--bg-soft);font-weight:600;}
.bd-list__title{text-align:left !important;font-weight:500 !important;}
.bd-list__title a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bd-list__title a:hover{color:var(--brand);text-decoration:underline;}
.bd-list tr.is-top{background:var(--brand-light);}
.bd-list tr.is-top .bd-list__title a{font-weight:700;}

/* 갤러리형 */
.bd-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.bd-gal__link{display:block;}
.bd-gal__thumb{display:block;position:relative;aspect-ratio:4/3;border-radius:var(--radius);
  background:var(--bg-soft);overflow:hidden;}
.bd-gal__thumb img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);}
.bd-gal__link:hover .bd-gal__thumb img{transform:scale(1.05);}
.bd-gal__title{display:block;margin-top:12px;font-size:15px;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.bd-gal__date{display:block;margin-top:4px;font-size:13px;color:var(--ink-sub);}

/* 페이지네이션 */
.bd-pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:48px;}
.bd-pager__num,.bd-pager__nav{display:flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 8px;border:1px solid var(--line);
  border-radius:6px;font-size:var(--fs-sm);background:var(--white);}
.bd-pager__num:hover,.bd-pager__nav:hover{border-color:var(--brand);color:var(--brand);}
.bd-pager__num.is-on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700;}

@media (max-width:1199px){
  .bd-gallery{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:767px){
  .bd-head{padding:32px 0;}
  .bd-wrap{padding:32px 0 56px;}
  .bd-gallery{grid-template-columns:repeat(2,1fr);gap:16px;}
  .bd-list colgroup,.bd-list thead{display:none;}
  .bd-list tr{display:block;padding:14px 0;border-bottom:1px solid var(--line);}
  .bd-list th,.bd-list td{display:inline;border:0;padding:0;}
  .bd-list__title{display:block !important;margin-bottom:6px;}
  /* 터치 타겟 44px (Part 7 Task 41) */
  .bd-list__title a{display:flex;align-items:center;min-height:44px;}
  .bd-list__date::before{content:'등록일 ';color:var(--ink-sub);}
  .bd-list__hit::before{content:' · 조회 ';color:var(--ink-sub);}
}

/* ===== Part4 게시판 상세 ===== */
.bd-view{border-top:2px solid var(--ink);}
.bd-view__head{padding:28px 20px;border-bottom:1px solid var(--line);background:var(--bg-soft);}
.bd-view__title{margin-top:8px;font-size:var(--fs-h3);font-weight:600;line-height:1.4;}
.bd-view__meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;
  font-size:13px;color:var(--ink-sub);}
.bd-view__meta dt{font-weight:700;}
.bd-view__meta dt::after{content:':';margin-left:2px;}
.bd-view__meta dd{margin:0 8px 0 0;}
.bd-view__ext{padding:20px;border-bottom:1px solid var(--line);}
.bd-view__body{padding:36px 20px;min-height:180px;border-bottom:1px solid var(--line);
  line-height:1.9;overflow-wrap:anywhere;}
.bd-view__body p{margin:0 0 1em;}
.bd-view__body h3{margin:1.6em 0 .6em;font-size:20px;font-weight:700;}
.bd-view__body h4{margin:1.4em 0 .5em;font-size:17px;font-weight:700;}
.bd-view__body ul{margin:0 0 1em;padding-left:1.2em;list-style:disc;}
.bd-view__body ol{margin:0 0 1em;padding-left:1.4em;list-style:decimal;}
.bd-view__body li{margin-bottom:.3em;}
.bd-view__body a{color:var(--brand);text-decoration:underline;}
.bd-view__body img{margin:12px auto;border-radius:var(--radius);}
.bd-view__body table{margin:16px 0;border-top:2px solid var(--ink);}
.bd-view__body th,.bd-view__body td{padding:12px;border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);}
.bd-view__body th{background:var(--bg-soft);font-weight:700;}
.bd-view__none{color:var(--ink-sub);text-align:center;}
.bd-view__gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:24px 20px;}
/* 추가 사진은 비율이 자유다. 4:3 박스 안에서 잘라 맞춰 줄 높이를 고르게 한다. */
.bd-view__gallery li{position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius);background:var(--bg-soft);}
.bd-view__gallery img{width:100%;height:100%;object-fit:cover;}

.bd-nav{margin-top:32px;border-top:1px solid var(--line);}
.bd-nav__row{display:flex;align-items:center;gap:16px;padding:14px 20px;
  border-bottom:1px solid var(--line);font-size:var(--fs-sm);}
.bd-nav__label{flex:0 0 60px;font-weight:700;color:var(--ink-sub);}
.bd-nav__link{display:flex;align-items:center;min-height:44px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bd-nav__link:hover{color:var(--brand);text-decoration:underline;}
.bd-nav__none{color:var(--ink-sub);}
.bd-view__back{margin-top:32px;text-align:center;}

@media (max-width:767px){
  .bd-view__gallery{grid-template-columns:1fr;}
  .bd-view__body{padding:24px 12px;}
  .bd-view__head{padding:20px 12px;}
}

/* ===== Part4 FAQ ===== */
.faq-tabs{display:flex;gap:8px;margin-bottom:28px;}
.faq-tab{flex:1;padding:16px 8px;text-align:center;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--white);font-weight:600;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);}
.faq-tab:hover{border-color:var(--brand);color:var(--brand);}
.faq-tab.is-on{background:var(--brand);border-color:var(--brand);color:#fff;}

.faq-list{border-top:2px solid var(--ink);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-acc__q{display:flex;align-items:flex-start;gap:12px;padding:20px 44px 20px 20px;
  position:relative;cursor:pointer;font-weight:600;list-style:none;
  transition:background .25s var(--ease);}
.faq-acc__q::-webkit-details-marker{display:none;}
.faq-acc__q:hover{background:var(--bg-soft);}
.faq-acc__q::after{content:'';position:absolute;right:20px;top:26px;
  width:10px;height:10px;border-right:2px solid var(--ink-sub);
  border-bottom:2px solid var(--ink-sub);transform:rotate(45deg);
  transition:transform .3s var(--ease);}
.faq-acc[open] .faq-acc__q{background:var(--brand-light);color:var(--brand-dark);}
.faq-acc[open] .faq-acc__q::after{transform:rotate(-135deg);border-color:var(--brand);}
.faq-acc__mark{flex:0 0 28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:14px;}
.faq-acc__mark--a{background:var(--ink-sub);}
.faq-acc__cat{flex:0 0 auto;padding:2px 10px;border-radius:11px;background:var(--bg-soft);
  border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink-sub);line-height:1.7;}
.faq-acc__a{display:flex;align-items:flex-start;gap:12px;padding:22px 20px;
  background:var(--bg-soft);border-top:1px dashed var(--line);}
.faq-acc__a .faq-acc__text{color:var(--ink-sub);line-height:1.85;}

.faq-none{padding:70px 20px;text-align:center;border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line);}
.faq-none__title{font-size:var(--fs-h3);font-weight:700;}
.faq-none__text{margin-top:12px;color:var(--ink-sub);}
.faq-none__tel{margin-top:20px;font-size:30px;font-weight:700;color:var(--brand);letter-spacing:-.02em;}
.faq-none__hours{margin-top:6px;font-size:var(--fs-sm);color:var(--ink-sub);}
.faq-more{margin-top:32px;text-align:center;font-size:var(--fs-sm);color:var(--ink-sub);}
.faq-more a{font-weight:700;color:var(--brand);}

@media (max-width:767px){
  .faq-tabs{gap:6px;}
  .faq-tab{padding:12px 4px;font-size:var(--fs-sm);}
  .faq-acc__q{padding:16px 38px 16px 14px;}
  .faq-acc__a{padding:18px 14px;}
  .faq-none__tel{font-size:24px;}
}

/* ===== Part4 회사소개 ===== */
.co-sec{margin-top:80px;}
.co-sec__title{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.02em;}
.co-sec__title::after{content:'';display:block;width:40px;height:3px;
  margin-top:14px;background:var(--brand);}
.co-sec__desc{margin-top:14px;color:var(--ink-sub);}
.co-note{margin-top:14px;font-size:13px;color:var(--ink-sub);}

/* 이미지 슬롯 공용 박스. 실제 사진이 없어도 규격 표시 SVG가 같은 자리를 채운다. */
.co-media{margin-top:28px;border-radius:var(--radius);overflow:hidden;background:var(--bg-soft);}
.co-media img{display:block;width:100%;height:auto;}
.co-media--history{margin-bottom:8px;}

/* 인사말 — 좌 4:5 인물 이미지 / 우 본문 */
.co-greet{display:grid;grid-template-columns:320px 1fr;gap:44px;align-items:start;
  padding:20px 0 8px;}
.co-greet__media{border-radius:var(--radius);overflow:hidden;background:var(--bg-soft);}
.co-greet__media img{display:block;width:100%;height:auto;}
.co-greet__eyebrow{font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--brand);}
.co-greet__title{margin-top:14px;font-size:var(--fs-h2);font-weight:400;line-height:1.4;
  letter-spacing:-.02em;}
.co-greet__title strong{font-weight:700;color:var(--brand);}
.co-greet__body{margin-top:28px;max-width:820px;color:var(--ink-sub);line-height:1.95;}
.co-greet__body p{margin-bottom:1em;}
.co-greet__sign{margin-top:28px;color:var(--ink);font-size:17px;}
.co-greet__sign strong{margin-left:6px;font-size:20px;font-weight:700;}

.co-table{margin-top:28px;border-top:2px solid var(--ink);}
.co-table th,.co-table td{padding:16px 20px;border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);text-align:left;}
.co-table th{background:var(--bg-soft);font-weight:600;}

.co-history{margin-top:36px;position:relative;padding-left:130px;}
.co-history::before{content:'';position:absolute;left:110px;top:6px;bottom:6px;
  width:2px;background:var(--line);}
.co-history__row{position:relative;padding-bottom:38px;}
.co-history__row:last-child{padding-bottom:0;}
.co-history__year{position:absolute;left:-130px;top:-4px;width:100px;text-align:right;
  font-size:26px;font-weight:700;color:var(--brand);letter-spacing:-.02em;}
.co-history__row::before{content:'';position:absolute;left:-21px;top:6px;
  width:12px;height:12px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px var(--brand-light);}
.co-history__item{display:flex;gap:14px;margin-bottom:8px;font-size:var(--fs-sm);}
.co-history__text{color:var(--ink);}

.co-loc{padding:28px 24px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);}
/* 사업장이 한 곳뿐이라 카드가 본문 폭(1200px)만큼 늘어지지 않게 묶어 둔다.
   좁은 화면에서는 max-width 가 걸리지 않아 그대로 한 칸을 채운다. */
.co-loc--solo{max-width:560px;margin-top:32px;}
.co-loc__addr{font-size:17px;font-weight:700;line-height:1.5;}
.co-loc__desc{margin-top:8px;font-size:var(--fs-sm);color:var(--ink-sub);}
.co-loc__meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:16px 0 20px;
  padding-top:16px;border-top:1px dashed var(--line);font-size:13px;color:var(--ink-sub);}
.co-loc__meta dt{font-weight:700;}
.co-loc__meta dt::after{content:':';margin-left:2px;}
.co-loc__meta dd{margin:0 10px 0 0;}

@media (max-width:1199px){
  .co-greet{grid-template-columns:240px 1fr;gap:28px;}
}
@media (max-width:767px){
  .co-sec{margin-top:56px;}
  .co-greet{grid-template-columns:1fr;gap:22px;}
  .co-greet__media{max-width:280px;}
  .co-history{padding-left:0;}
  .co-history::before{left:5px;}
  .co-history__row{padding-left:28px;}
  .co-history__year{position:static;width:auto;text-align:left;margin-bottom:10px;font-size:22px;}
  .co-history__row::before{left:0;top:8px;}
  .co-table th,.co-table td{padding:12px 14px;}
}

/* ===== Part4 약관 문서 (privacy / terms 공용) ===== */
.pol{max-width:900px;margin:0 auto;}
.pol__intro{padding:24px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-soft);font-size:var(--fs-sm);line-height:1.9;color:var(--ink-sub);}
.pol__sec{margin-top:44px;}
.pol__h{padding-bottom:12px;border-bottom:2px solid var(--ink);
  font-size:19px;font-weight:700;letter-spacing:-.02em;}
.pol__h4{margin-top:22px;font-size:15px;font-weight:700;color:var(--brand-dark);}
.pol__sec p{margin-top:14px;font-size:var(--fs-sm);line-height:1.9;color:var(--ink-sub);}
.pol__sec p strong{color:var(--ink);}
.pol__sec a{color:var(--brand);text-decoration:underline;}

.pol__ol{margin-top:16px;counter-reset:pol;}
.pol__ol > li{position:relative;padding-left:30px;margin-bottom:12px;
  font-size:var(--fs-sm);line-height:1.9;color:var(--ink-sub);}
.pol__ol > li::before{counter-increment:pol;content:counter(pol);
  position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;
  background:var(--brand-light);color:var(--brand-dark);
  font-size:12px;font-weight:700;line-height:20px;text-align:center;}
.pol__ol > li strong{color:var(--ink);}

.pol__ul{margin-top:10px;}
.pol__ul > li{position:relative;padding-left:14px;margin-bottom:7px;
  font-size:var(--fs-sm);line-height:1.85;color:var(--ink-sub);}
.pol__ul > li::before{content:'';position:absolute;left:0;top:12px;
  width:4px;height:4px;border-radius:50%;background:var(--ink-sub);}
.pol__ol .pol__ul{margin-bottom:6px;}

.pol__table{margin-top:18px;}
.pol__table th,.pol__table td{font-size:13px;line-height:1.75;vertical-align:top;}
.pol__caution{margin-top:16px !important;padding:16px 18px;border-radius:var(--radius);
  background:var(--brand-light);color:var(--brand-dark) !important;font-weight:600;}
.pol__date{margin-top:22px !important;padding-top:18px;border-top:1px dashed var(--line);
  font-size:13px;text-align:right;}

@media (max-width:767px){
  .pol__sec{margin-top:34px;}
  .pol__h{font-size:17px;}
  .pol__table{display:block;overflow-x:auto;}
  .pol__intro{padding:18px;}
}

/* ===== 예약 페이지 공통 래퍼 ===== */
/* reservation.php · reservation-check.php 가 공유한다. 다른 Part의 클래스와 겹치지 않는다.
   페이지 제목은 서브 히어로(.shero)가 담당한다. Part 3 sub.css 정의를 그대로 쓰므로
   여기서 .shero 를 다시 선언하지 않는다. */
.sub{padding:56px 0 90px;}
@media (max-width:767px){.sub{padding:36px 0 64px;}}

/* ===== 버튼 (예약 페이지 전용) ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 28px;border-radius:var(--radius);
  font-size:var(--fs-body);font-weight:700;
  border:1px solid var(--line);background:var(--white);color:var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);}
.btn--primary{background:var(--brand);border-color:var(--brand);color:var(--white);}
.btn--primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);}
.btn--line{background:var(--white);border-color:var(--brand);color:var(--brand);}
.btn--line:hover{background:var(--brand-light);}
.btn--lg{min-height:56px;padding:0 40px;font-size:17px;}
.btn:disabled{opacity:.5;cursor:default;}

/* ===== 예약 5단계 진행 표시 ===== */
.rstep{display:flex;gap:8px;margin:0 0 48px;flex-wrap:wrap;}
.rstep__item{flex:1 1 140px;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:20px 8px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);color:var(--ink-sub);text-align:center;}
.rstep__item.is-on{background:var(--brand);border-color:var(--brand);color:var(--white);}
.rstep__no{font-size:var(--fs-sm);font-weight:700;opacity:.75;}
.rstep__label{font-size:var(--fs-body);font-weight:600;}

/* ===== 예약 폼 ===== */
.form-req-note{margin:0 0 16px;font-size:var(--fs-sm);color:var(--ink-sub);}
.form-req-note em,.rform__label em{color:#d8232a;font-style:normal;}
.rform__set{margin:0 0 32px;padding:0;border:0;}
.rform__legend{width:100%;padding:0 0 12px;margin:0 0 8px;
  border-bottom:2px solid var(--ink);font-size:var(--fs-h3);font-weight:700;}
.rform__row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
.rform__label{flex:0 0 160px;padding-top:10px;font-weight:600;}
.rform__field{flex:1 1 auto;min-width:0;}
.rform__grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.rform__grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.rform__help{margin:6px 0 0;font-size:var(--fs-sm);color:var(--ink-sub);}
.rform__err{margin:6px 0 0;font-size:var(--fs-sm);color:#d8232a;display:none;}
.rform__err.is-on{display:block;}
.rform__alert{margin:0 0 16px;padding:14px 16px;border-radius:var(--radius);
  background:#fdecec;color:#b3151b;font-size:var(--fs-sm);}
.rform__submit{text-align:center;margin-top:32px;}

.rform input[type=text],.rform input[type=tel],.rform input[type=date],
.rform input[type=time],
.rform select,.rform textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:6px;
  background:var(--white);transition:border-color .2s var(--ease);}
.rform input:focus,.rform select:focus,.rform textarea:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-light);}
.rform select:disabled{background:var(--bg-soft);color:var(--ink-sub);}
.rform [aria-invalid="true"]{border-color:#d8232a;}

.radio-group{display:flex;gap:12px;flex-wrap:wrap;}
.radio,.checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;}
.radio{padding:12px 20px;border:1px solid var(--line);border-radius:6px;background:var(--white);}
.radio:has(input:checked){border-color:var(--brand);background:var(--brand-light);font-weight:600;}
/* 브라우저 기본값 margin:3px 3px 3px 4px 을 지운다. 이 4px 때문에 체크박스 네모만
   같은 열의 다른 입력칸보다 오른쪽으로 밀려 왼쪽 끝이 어긋나 보였다.
   간격은 .radio/.checkbox 의 gap 이 잡는다. */
.radio input,.checkbox input{width:18px;height:18px;margin:0;accent-color:var(--brand);}

/* 체크박스 행에는 44px 짜리 입력칸이 없다. 다른 행처럼 라벨을 박스 가운데(padding-top:10px)에
   맞추면 왼쪽 라벨이 오른쪽 문구보다 아래로 내려앉는다. 헤더 유틸(.hd__util)과 같은 방식으로
   박스가 아니라 글자 밑선을 맞춘다.
   체크박스 자체는 글자줄 가운데에 그대로 두려고 align-self 로 따로 뺀다 —
   그래야 .checkbox 의 baseline 이 네모가 아닌 옆 문구의 밑선이 된다. */
.checkbox{align-items:baseline;}
.checkbox input{align-self:center;}
.rform__row--check{align-items:baseline;}
.rform__row--check .rform__label{padding-top:0;}

.agree-box{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-soft);padding:20px;margin-bottom:8px;}
.agree-box__table{font-size:var(--fs-sm);background:var(--white);}
.agree-box__table th,.agree-box__table td{border:1px solid var(--line);padding:10px;text-align:left;vertical-align:top;}
.agree-box__table th{background:var(--brand-light);white-space:nowrap;}
.agree-box__note{margin:12px 0 0;font-size:var(--fs-sm);color:var(--ink-sub);}
.agree-box__note a{color:var(--brand);text-decoration:underline;}

/* ===== 접수 완료 ===== */
.rdone{max-width:640px;margin:0 auto;padding:56px 24px;text-align:center;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--white);}
.rdone__icon{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;
  background:var(--brand);color:var(--white);font-size:32px;line-height:64px;}
.rdone__title{font-size:var(--fs-h2);margin-bottom:24px;}
.rdone__label{font-size:var(--fs-sm);color:var(--ink-sub);}
.rdone__code{font-size:clamp(28px,5vw,44px);font-weight:700;letter-spacing:.04em;
  color:var(--brand);margin:4px 0 20px;}
.rdone__desc{color:var(--ink-sub);margin-bottom:28px;}
.rdone__btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;}
.rdone__tel{font-size:var(--fs-sm);color:var(--ink-sub);}
.rdone__tel a{color:var(--brand);font-weight:700;}

@media (max-width:767px){
  .rstep{gap:6px;}
  .rstep__item{flex:1 1 calc(33.333% - 4px);padding:14px 4px;}
  .rform__row{flex-direction:column;gap:8px;}
  .rform__label{flex:none;padding-top:0;}
  .rform__grid3,.rform__grid2{grid-template-columns:1fr;}
  .agree-box__table th{white-space:normal;}
}

/* ===== 예약조회 ===== */
.rcheck{max-width:560px;margin:0 auto 40px;padding:40px 28px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);box-shadow:var(--shadow);}
.rcheck__row{margin-bottom:18px;}
.rcheck__label{display:block;margin-bottom:6px;font-weight:600;}
.rcheck__form input{width:100%;padding:14px;border:1px solid var(--line);
  border-radius:6px;background:var(--white);}
.rcheck__form input:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-light);}
.rcheck__form .btn{width:100%;margin-top:8px;}
.rcheck__msg{max-width:560px;margin:0 auto 16px;padding:14px 16px;
  border-radius:var(--radius);font-size:var(--fs-sm);text-align:center;}
.rcheck__msg--error{background:#fdecec;color:#b3151b;}
.rcheck__msg--block{background:#fff5e6;color:#8a5000;font-weight:600;}
.rcheck__guide{max-width:560px;margin:16px auto 0;font-size:var(--fs-sm);
  color:var(--ink-sub);text-align:center;line-height:1.7;}
.rcheck__guide a{color:var(--brand);font-weight:700;}

/* ===== 조회 결과 ===== */
.rresult{max-width:720px;margin:0 auto;padding:40px 28px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);box-shadow:var(--shadow);}
.rresult__head{text-align:center;padding-bottom:28px;border-bottom:2px solid var(--ink);}
.rresult__label{font-size:var(--fs-sm);color:var(--ink-sub);}
.rresult__code{font-size:clamp(24px,4vw,36px);font-weight:700;
  letter-spacing:.04em;color:var(--brand);margin:4px 0 14px;}
.rresult__table{margin-top:8px;}
.rresult__table th,.rresult__table td{padding:16px 12px;
  border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.rresult__table th{width:120px;background:var(--bg-soft);font-weight:600;white-space:nowrap;}
.rresult__note{margin-top:24px;padding:16px;border-radius:var(--radius);
  background:var(--bg-soft);font-size:var(--fs-sm);color:var(--ink-sub);line-height:1.8;}
.rresult__note a{color:var(--brand);font-weight:700;}
.rresult__btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px;}

/* 상태 배지 5종.
   Part 3 이 같은 sub.css 안에서 적재제한용 .badge / .badge--warn / .badge--talk / .badge--stop 를
   먼저 선언한다. 여기서 .badge 를 다시 선언하면 나중 선언이 이겨 적재제한 뱃지가 깨지므로
   예약 상태 배지는 .rbadge 접두어를 쓴다. */
.rbadge{display:inline-block;padding:6px 18px;border-radius:20px;
  font-size:var(--fs-sm);font-weight:700;line-height:1.5;}
.rbadge--recv  {background:var(--brand-light);color:var(--brand-dark);}
.rbadge--talk  {background:#fff3d6;color:#8a5000;}
.rbadge--fixed {background:#e3f6e8;color:#1c7a37;}
.rbadge--done  {background:#eceff3;color:#3c4756;}
.rbadge--cancel{background:#fdecec;color:#b3151b;}

@media (max-width:767px){
  .rcheck,.rresult{padding:28px 18px;}
  .rresult__table th{width:88px;padding:12px 8px;}
  .rresult__table td{padding:12px 8px;}
}

/* ---------- 온라인 계약서 (contract.php) ---------- */
.ctr{max-width:820px;margin:0 auto;}
.ctr__h{margin:38px 0 14px;padding-bottom:10px;font-size:var(--fs-h3,20px);font-weight:700;
  border-bottom:2px solid var(--ink);}
.ctr__sub{font-size:var(--fs-sm);color:var(--ink-sub);line-height:1.7;}
.ctr__notice{margin-bottom:22px;padding:18px 20px;border-radius:var(--radius);
  line-height:1.75;font-size:16px;}
.ctr__notice--ok{background:#e3f6e8;color:#155e2c;}
.ctr__notice--stop{background:#fdecec;color:#8f1218;}
.ctr__notice a{color:inherit;font-weight:700;text-decoration:underline;}

.ctr__pay{padding:24px;border:2px solid var(--brand,#1663c7);border-radius:var(--radius);
  background:var(--bg-soft,#f6f8fb);}
.ctr__payhead{font-size:18px;font-weight:700;margin-bottom:14px;}
.ctr__paylist{display:grid;grid-template-columns:100px 1fr;gap:10px 16px;margin-bottom:14px;}
.ctr__paylist dt{font-weight:700;color:var(--ink-sub);}
.ctr__paylist dd{margin:0;line-height:1.6;word-break:break-all;}
.ctr__amount{font-size:clamp(22px,4vw,30px);font-weight:800;}

.ctr__table{width:100%;border-top:2px solid var(--ink);}
.ctr__table th,.ctr__table td{padding:14px 12px;border-bottom:1px solid var(--line,#e2e6ec);
  text-align:left;vertical-align:top;line-height:1.6;}
.ctr__table th{width:120px;background:var(--bg-soft,#f6f8fb);font-weight:600;white-space:nowrap;}
.ctr__memo{padding:16px 18px;border-radius:var(--radius);background:var(--bg-soft,#f6f8fb);
  line-height:1.8;}

/* 약관 사본은 길다. 자체 스크롤 상자에 넣어 서명란이 화면 밖으로 밀리지 않게 한다. */
.ctr__terms{max-height:420px;overflow-y:auto;padding:8px 20px;
  border:1px solid var(--line,#e2e6ec);border-radius:var(--radius);background:#fff;}
.ctr__terms .pol__h{font-size:17px;}

.ctr__field{display:block;margin:18px 0 8px;font-weight:700;}
.ctr__form input[type=text]{width:100%;min-height:52px;padding:12px 14px;
  border:1px solid var(--line,#e2e6ec);border-radius:var(--radius);font-size:16px;}
.ctr__pad{border:2px dashed var(--line,#c9d1dc);border-radius:var(--radius);background:#fff;}
.ctr__pad canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;
  border-radius:var(--radius);}
.ctr__padbtn{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;}
.ctr__agree{display:flex;align-items:flex-start;gap:8px;margin:22px 0;font-size:16px;line-height:1.6;}
.ctr__agree input{margin-top:4px;width:20px;height:20px;flex:0 0 auto;}
.ctr__done{padding:20px;border:1px solid var(--line,#e2e6ec);border-radius:var(--radius);
  background:var(--bg-soft,#f6f8fb);}
.ctr__signimg{display:block;margin:12px 0;max-width:320px;height:auto;background:#fff;
  border:1px solid var(--line,#e2e6ec);border-radius:8px;}

@media (max-width:640px){
  .ctr__paylist{grid-template-columns:1fr;gap:4px 0;}
  .ctr__paylist dd{margin-bottom:10px;}
  .ctr__table th{width:92px;padding:12px 8px;}
  .ctr__table td{padding:12px 8px;}
  .ctr__terms{max-height:320px;padding:4px 14px;}
}