/* ── pages / consultation — 1:1 상담 신청 ──────────────────────
   아키타입 utility. 히어로(--plain) → [상담 신청 폼 | 연락 채널·진료시간]
   → 상담 CTA. 원문(kowonps.com/en/consultation)이 3fr/2fr 2단이라
   폼이 왼쪽, 채널 카드와 진료시간이 오른쪽 사이드바다.

   뼈대는 전부 공용 프리미티브다.
     히어로   .page-hero--plain                     (subpage.css)
     머리말   .sec-head--left/.eyebrow/.sec-title   (layout.css)
     소제목   .sub-label                            (layout.css)
     진료시간 .infotable                            (subpage.css)
     전송버튼 .btn--primary                         (layout.css)
     수집고지 .disclaimer--left                     (layout.css)
     상담 CTA .cta-band                             (subpage.css)
   이 파일은 그 프리미티브에 없는 '폼 컨트롤'·'채널 카드' 와, 폭이 좁아
   깨지는 곳만 덮어쓴다. */


/* ── 히어로 ──────────────────────────────────────────────────
   .page-hero--plain 기본 360 은 상하 패딩(헤더 100+4 / 100)을 빼면
   본문이 156 밖에 못 쓴다. eyebrow+H1+2줄 리드가 그보다 높아
   eyebrow 가 고정 헤더 밑으로 들어가므로 높인다. */
.cons-hero{min-height:460px}
@media (max-width:1023px){ .cons-hero{min-height:380px} }
@media (max-width:767px){
  /* 리드가 4~5줄로 접힌다 */
  .cons-hero{min-height:400px}
  /* 두 문장을 끊던 줄바꿈은 모바일에서 어차피 접히므로 뗀다 */
  .cons-hero__br{display:none}
}


/* ── 2단 레이아웃 ───────────────────────────────────────────
   원문 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]. 1024 미만에서는
   원문과 같이 한 단으로 쌓고 폼이 먼저 온다. */
.cons-request__grid{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:var(--sp-block);
  align-items:start;
}
@media (max-width:1023px){
  .cons-request__grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-stack)}
}


/* ── 상담 신청 폼 ───────────────────────────────────────────
   전송 엔드포인트가 아직 없어 제출 버튼은 disabled 다(파샬 주석 참조).
   채널 카드와 같은 흰 카드 + 1px 라인으로 톤을 맞추고, 입력칸만
   --surface-muted 로 눕혀 카드 안에서 구분되게 한다. */
.cons-form{
  display:flex;flex-direction:column;gap:20px;
  padding:40px;
  background:var(--surface);
  border-radius:var(--radius-card);
  box-shadow:inset 0 0 0 1px var(--line-soft);
}
@media (max-width:767px){ .cons-form{padding:20px;gap:var(--sp-tight)} }

/* 이름 · 연락처는 원문 sm:grid-cols-2 처럼 한 줄에 둘 */
.cons-form__row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
@media (max-width:767px){ .cons-form__row{grid-template-columns:minmax(0,1fr);gap:var(--sp-tight)} }

.cons-field{display:flex;flex-direction:column;gap:8px}

.cons-field__label{
  font-weight:500;font-size:var(--fs-16);line-height:1.4;
  letter-spacing:var(--ls-tight);color:var(--text-primary);
}
/* 필수 표시. required 속성이 접근성 정보를 주므로 별표는 aria-hidden */
.cons-field__req{color:var(--brand)}

.cons-field__input{
  width:100%;
  padding:14px 16px;
  font-family:inherit;font-weight:400;
  font-size:max(16px,var(--fs-16));line-height:1.5;letter-spacing:var(--ls-tight);   /* 16px 미만이면 iOS 가 확대한다 */
  color:var(--text-primary);
  background:var(--surface-muted);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);
  transition:border-color .18s ease;
}
.cons-field__input::placeholder{color:var(--text-tertiary)}
/* 포커스 링은 base.css 의 :focus-visible 이 그린다. 테두리만 거든다 */
.cons-field__input:focus{border-color:var(--brand)}

/* select 는 네이티브 화살표를 남긴다(직접 그리지 않는다) */
.cons-field__select{height:54px;padding-block:0}

.cons-field__textarea{resize:vertical;min-height:140px}

/* 개인정보 동의 */
.cons-consent{
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 20px;
  background:var(--surface-muted);
  border-radius:var(--radius-sm);
}
.cons-consent__box{
  flex:none;width:20px;height:20px;margin:0;
  accent-color:var(--brand);cursor:pointer;
}
.cons-consent__label{
  font-size:var(--fs-14);line-height:1.6;
  color:var(--text-secondary);cursor:pointer;word-break:keep-all;
}
.cons-consent__label strong{font-weight:700;color:var(--text-primary)}

/* 엔드포인트 연결 전까지 비활성. 눌리지 않는다는 것이 보이게 한다 */
.cons-form__submit{align-self:flex-start}
.cons-form__submit:disabled{cursor:not-allowed;opacity:.5}
.cons-form__submit:disabled:hover{background:var(--brand)}
@media (max-width:767px){ .cons-form__submit{align-self:stretch} }

/* .disclaimer 의 기본 margin-top 은 폼의 flex gap 과 겹친다 */
.cons-form__note{margin-top:0}
.cons-form__note a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}


/* ── 연락 채널 (사이드바) ───────────────────────────────────
   원문처럼 한 열로 쌓는다. 사이드바가 풀폭으로 눕는 태블릿 구간에서만
   2열로 접어 세로로 너무 길어지지 않게 한다. */
/* .sec-title 50px 은 사이드바 폭(≈460)에서 다섯 줄로 접힌다.
   원문도 이 제목만 text-xl/2xl 로 작다 */
.cons-reach__title{font-size:var(--fs-24)}

.cons-reach__list{
  margin-top:var(--sp-stack);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-gap);
}
@media (min-width:768px) and (max-width:1023px){
  .cons-reach__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cons-reach__item--feature{grid-column:1 / -1}
}

.cons-card{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:100%;padding:24px 28px;
  background:var(--surface);
  border-radius:var(--radius-card);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:box-shadow .18s ease,transform .18s ease;
}
.cons-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--brand)}

.cons-card--feature{
  background:var(--brand-tint-1);
  box-shadow:inset 0 0 0 1px var(--brand);
}

.cons-card__body{display:flex;flex-direction:column;gap:4px;min-width:0}

.cons-card__kicker{
  font-weight:700;font-size:var(--fs-14);line-height:1.4;
  letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--brand);
}
.cons-card__title{
  font-weight:700;font-size:var(--fs-18);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-primary);
  word-break:keep-all;
}
.cons-card:hover .cons-card__title{color:var(--brand)}

.cons-card__meta{
  font-size:var(--fs-14);line-height:1.5;
  color:var(--text-tertiary);
  word-break:keep-all;
}

.cons-card__arrow{
  flex:none;
  font-size:var(--fs-20);line-height:1;
  color:var(--brand);
  transition:transform .18s ease;
}
.cons-card:hover .cons-card__arrow{transform:translateX(4px)}

@media (max-width:767px){
  .cons-card{padding:20px}
}


/* ── 진료시간 ────────────────────────────────────────────────
   카드들과 같은 라운드 박스 안에 넣어 채널 목록과 한 덩어리로 읽히게 한다. */
.cons-hours{
  margin-top:var(--sp-gap);
  padding:28px 32px;
  background:var(--surface-muted);
  border-radius:var(--radius-card);
}
.cons-hours__table{margin-top:var(--sp-tight)}

/* .infotable 기본 th 220 은 사이드바 폭에서 값 칸을 눌러버린다.
   가장 긴 라벨 'Sunday & public holidays' 가 두 줄로 접히는 것을 감수하고
   값('09:30 – 21:00 (late hours)')이 한 줄에 들어가는 폭으로 줄인다. */
.cons-hours__table th{width:150px}

/* 태블릿에서는 사이드바가 풀폭으로 눕는다. 라벨을 접을 이유가 없어 되돌린다 */
@media (min-width:768px) and (max-width:1023px){
  .cons-hours__table th{width:220px}
}

@media (max-width:767px){
  .cons-hours{padding:20px}
  .cons-hours__table th{width:120px}
}


/* ── 상담 CTA ────────────────────────────────────────────────
   이 페이지가 곧 상담 신청 페이지라 버튼은 /consultation 이 아니라
   실제 채널(카카오 · 전화)로 바로 나간다.
   .cta-band 기본형 그대로라 리드 줄바꿈만 좁은 폭에서 뗀다. */
@media (max-width:767px){
  .cons-cta__br{display:none}
}

/* 백엔드 미연결 안내 — 연결 시 이 규칙과 함께 제거한다 */
.cons-form__pending{
  margin-bottom:16px;padding:14px 16px;
  background:var(--brand-tint-1);border-radius:var(--radius-sm);
  font-size:var(--fs-16);line-height:1.6;color:var(--text-secondary);word-break:keep-all;
}
.cons-form__submit[disabled]{opacity:.45;cursor:not-allowed}