/* ============================================================
   Wellfy brand common styles (showroom / contact 페이지 공용)
   index.html 의 :root 변수·리셋·nav 를 그대로 옮긴 것. 색·폰트 변경 시 여기서.
   ============================================================ */
:root {
  --comfy:#109560;
  --comfy-d:#003421;
  --comfy-lite:#40AA80;
  --nav-cta:#109560;
  --nav-cta-d:#0E8657;
  --deep:#003421;
  --pine:#003421;
  --mint:#BCE3C4;
  --mint-soft:#D7EEDC;
  --beige:#FEF7EC;
  --cream:#FFE7DC;
  --coral:#FE844E;
  --ink:#222222;
  --muted:#5F646F;
  --float-cta:#003421;
  --float-cta-d:#002F1E;
  --coral-d:#E57746;
  --blue:#335D4D;
  --yellow:#FCAD03;
  --lime:#8bc34a;
  --warmgrey:#FBFBFD;
  --line:rgba(8,58,34,.12);
  --white:#FFFFFF;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --disp:'Poppins','Pretendard',sans-serif;
  --sans:'Pretendard','Poppins',sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); background:var(--beige); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; word-break:keep-all; overflow-wrap:break-word; }
::selection { background:var(--comfy); color:var(--beige); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.wrap { width:min(1360px,92vw); margin:0 auto; }

/* ---------- Nav (index.html 과 동일 규격) ---------- */
nav.site-nav { position:fixed; top:0; left:0; width:100%; z-index:150; display:flex; align-items:center; justify-content:space-between; padding:24px min(4vw,54px); transition:padding .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease); border-bottom:1px solid transparent; }
nav.site-nav.scrolled { padding:14px min(4vw,54px); background:rgba(244,236,224,.86); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-color:var(--line); }
.brand { font-family:var(--disp); font-weight:700; font-size:1.15rem; letter-spacing:-0.01em; display:flex; align-items:center; gap:12px; color:var(--comfy); }
.brand-logo { height:clamp(21px,2.3vw,28px); width:auto; display:block; flex:none; }
.brand-word { font-family:var(--disp); font-weight:700; font-size:clamp(1.25rem,1.9vw,1.6rem); letter-spacing:-0.03em; color:var(--comfy); line-height:1; }

.nav-actions { display:flex; align-items:center; gap:10px; flex:none; height:clamp(21px,2.3vw,28px); }  /* 로고와 같은 높이로 고정 -- 41px 버튼은 중앙 정렬로 넘치게 두어 상단바 높이를 유지한다 */
.nav-act { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:122px; padding:10px 24px; border:1px solid var(--nav-cta); border-radius:40px; background:var(--nav-cta); color:#fff; font-family:var(--disp); font-weight:600; font-size:15px; line-height:19px; white-space:nowrap; box-shadow:0 8px 18px -12px rgba(12,107,55,.7); transition:background .3s,border-color .3s,transform .3s var(--ease); }
.nav-act:hover { background:var(--nav-cta-d); border-color:var(--nav-cta-d); transform:translateY(-1px); }
.nav-act.is-current { pointer-events:none; opacity:.55; }
@media (max-width:700px) {
  .nav-actions { gap:6px; }
  .nav-act { min-width:0; padding:9px 16px; font-size:14px; }
}

/* ---------- 공용 버튼 ---------- */
/* 제출 버튼 (시안: 300x52, radius 4, #109560, 그림자 검정 10%) */
.btn-pill { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:300px; max-width:100%; height:52px; padding:0 24px; background:#109560; color:#fff; font-family:var(--disp); font-weight:600; font-size:1rem; border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,.1); transition:background .3s,transform .3s var(--ease); border:0; cursor:pointer; }
.btn-pill:hover { background:var(--nav-cta-d); transform:translateY(-1px); }
.btn-pill[disabled] { opacity:.55; cursor:default; transform:none; }

/* ---------- 섹션 공용 ---------- */
.eyebrow { display:inline-flex; align-items:center; gap:12px; font-family:var(--disp); font-weight:600; font-size:12.5px; line-height:20px; letter-spacing:1.75px; text-transform:uppercase; color:var(--comfy); }
.eyebrow::before { content:''; flex:none; width:34px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--comfy) 0%,var(--mint) 100%); }
.h-display { font-family:var(--sans); font-weight:800; letter-spacing:-0.03em; line-height:1.12; color:var(--deep); }

/* ---------- 폼 공용 ---------- */
.form-card { background:var(--white); border:1px solid var(--line); border-radius:28px; padding:clamp(28px,4vw,56px); box-shadow:0 30px 70px -40px rgba(8,58,34,.35); }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field > label, .field > .label { font-weight:700; font-size:.95rem; color:var(--deep); }
.field .hint { font-size:.85rem; color:var(--muted); }
.field input[type=text], .field input[type=tel], .field input[type=email], .field textarea {
  width:100%; font:inherit; font-size:.95rem; color:var(--ink); background:#fff; border-radius:6px; padding:12px 14px; outline:none; transition:border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus { border-color:var(--comfy); background:#fff; box-shadow:0 0 0 4px rgba(12,107,55,.12); }
.field textarea { min-height:140px; resize:vertical; }
.field.invalid input, .field.invalid textarea { border-color:var(--coral); }
.field .err { display:none; font-size:.85rem; color:var(--coral); }
.field.invalid .err { display:block; }
.radio-row { display:flex; flex-wrap:wrap; gap:12px; }
/* 시안형 기본 라디오 (원형 점). 알약형(.radio-pill)과 병행 */
.radio-plain { position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-weight:500; }
.radio-plain input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.radio-plain span { display:inline-flex; align-items:center; gap:8px; }
.radio-plain span::before { content:""; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line); background:#fff; box-sizing:border-box; transition:border-color .2s, box-shadow .2s; }
.radio-plain input:checked + span::before { border:5px solid var(--comfy); }
.radio-plain input:focus-visible + span::before { box-shadow:0 0 0 4px rgba(12,107,55,.16); }
/* 연락처 3분할 / 방문 희망일 한 줄 */
.tel-row, .dt-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tel-row select, .dt-row input { font:inherit; font-size:.95rem; color:var(--ink); background:#fff; border-radius:6px; padding:12px 14px; outline:none; transition:border-color .25s, box-shadow .25s; }
.tel-row input { width:0; flex:1 1 90px; min-width:90px; }
.tel-row select { flex:none; }
.tel-row input:focus, .tel-row select:focus, .dt-row input:focus { border-color:var(--comfy); background:#fff; box-shadow:0 0 0 4px rgba(12,107,55,.12); }
.tel-sep, .dt-sep { color:var(--muted); flex:none; }
.dt-row input[type=date] { flex:1 1 180px; min-width:180px; padding:12px 14px; }
.dt-row select { font:inherit; font-size:.95rem; color:var(--ink); background:#fff; border-radius:6px; padding:12px 10px; outline:none; transition:border-color .25s, box-shadow .25s; }
.dt-row select:focus { border-color:var(--comfy); background:#fff; box-shadow:0 0 0 4px rgba(12,107,55,.12); }
.dt-time { display:inline-flex; align-items:center; gap:6px; }
.dt-unit { color:var(--muted); font-size:.92rem; }
.check .req { font-style:normal; color:var(--coral); }
.field.invalid .tel-row input, .field.invalid .dt-row input, .field.invalid .tel-row select { border-color:var(--coral); }
.radio-pill { position:relative; }
.radio-pill input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.radio-pill span { display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:30px; border:1px solid var(--line); background:var(--beige); font-weight:600; transition:all .25s; }
.radio-pill span::before { content:""; width:10px; height:10px; border-radius:50%; border:2px solid var(--muted); box-sizing:border-box; transition:all .25s; }
.radio-pill input:checked + span { background:var(--mint-soft); border-color:var(--comfy); color:var(--comfy); }
.radio-pill input:checked + span::before { background:var(--comfy); border-color:var(--comfy); }
.radio-pill input:focus-visible + span { box-shadow:0 0 0 4px rgba(12,107,55,.16); }
.counter { text-align:right; font-size:.85rem; color:var(--muted); }
.consent-box { max-height:150px; overflow:auto; background:var(--beige); border:1px solid var(--line); border-radius:14px; padding:16px; font-size:.9rem; color:var(--muted); line-height:1.7; }
.check { display:flex; align-items:center; gap:10px; font-weight:600; cursor:pointer; }
.check input { width:20px; height:20px; accent-color:var(--comfy); }
.honey { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; }
.form-msg { margin-top:18px; min-height:1.5em; font-weight:600; }
.form-msg.ok { color:var(--comfy); }
.form-msg.ng { color:var(--coral); }

/* ---------- Footer ---------- */
.site-foot { padding:60px 0 40px; color:var(--muted); font-size:.85rem; text-align:center; border-top:1px solid var(--line); margin-top:80px; }

/* ---------- 도입 문의: 기타 장소명 · 동의 ---------- */
/* 도입 장소 '기타' 를 고를 때만 열리는 입력칸 (라디오 줄 오른쪽에 붙는다) */
.radio-row .etc-plc, .field > .etc-plc { margin-top:10px; }
@media (min-width:620px) {
  .field > .radio-row { align-items:center; }
  .field > .etc-plc { margin-top:0; }
  .field > .radio-row + .etc-plc { margin-top:10px; }
}
.field .label .sub { font-weight:400; font-size:.82rem; color:var(--coral); }
.consents { gap:12px; }
.consents .check { font-weight:500; font-size:.92rem; }
.check .req { font-style:normal; color:#E57746; font-weight:600; }

/* ---------- 동의 줄 · 상세보기 팝업 (법률검토 9/29) ---------- */
/* 크기·색은 피그마 미제공 추정값 */
/* > 는 동의 문구 바로 옆 (간격 4 + 아이콘 칸 여백 4 = 문구와 8px, 피그마 미제공 추정값) */
.consent-line { display:flex; align-items:center; justify-content:flex-start; gap:4px; }
.consent-more { flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:32px; padding:0; border:0; background:transparent; color:#222222; cursor:pointer; }
.consent-more svg { width:16px; height:16px; }
.consent-more:focus-visible { outline:2px solid rgba(16,149,96,.35); outline-offset:2px; border-radius:4px; }
.advt-channels { display:flex; flex-wrap:wrap; gap:4px 20px; padding-left:30px; }
.advt-channels .check { font-weight:500; font-size:.92rem; }
html.consent-open { overflow:hidden; }
/* 상세보기 팝업: 피그마 "개인정보 수집 및 이용 동의" 프레임 CSS 값 (딤 배경색만 피그마 미제공 추정값) */
.consent-dim { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.5); }
.consent-dim[hidden] { display:none; }
/* 제목 아래 32 · 아래 여백 32 는 스크롤 영역 안에 둔다 (밖에 두면 스크롤할 때 글자가 여백 경계에서 잘려 흰 띠처럼 보임) */
.consent-dlg { display:flex; flex-direction:column; width:min(860px,100%); max-height:min(640px, calc(100vh - 32px)); padding:32px 0 0; border-radius:8px; background:#FFFFFF; color:#222222; font-family:'Pretendard', sans-serif; }
.cd-head { flex:none; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; min-height:27px; padding:0 32px; }
/* 제목이 길어 줄이 바뀌면 높이가 늘어나게 둔다 (고정 높이면 위아래로 넘쳐 잘림) */
.cd-head h2 { display:flex; align-items:center; min-height:27px; margin:0; font-size:24px; font-weight:700; line-height:148%; color:#222222; }
.consent-x { flex:none; width:14px; height:14px; box-sizing:content-box; padding:10px; margin:-10px; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:#222222; cursor:pointer; }
.consent-x svg { display:block; width:14px; height:14px; }
.consent-x:focus-visible { outline:2px solid rgba(16,149,96,.35); outline-offset:-6px; border-radius:4px; }
/* 피그마 줄높이 표기 '148% or 27px' -> 27px 고정, 줄바꿈은 피그마처럼 글자 단위 */
.consent-body { flex:1 1 auto; min-height:0; overflow:auto; padding:32px; display:flex; flex-direction:column; gap:24px; font-size:18px; font-weight:400; line-height:27px; color:#222222; word-break:normal; }
.consent-body p { margin:0; }
.consent-body .cd-sec { display:flex; flex-direction:column; gap:12px; }
.consent-body .cd-sec h3 { display:flex; align-items:center; margin:0; font-size:18px; font-weight:700; line-height:27px; color:#222222; }
.consent-body .cd-con { padding:0 20px; border-radius:20px; color:#434855; }
/* 마지막 안내 문단(거부 안내 등)은 들여쓰지 않고 첫 안내문과 같은 줄에서 시작 */
.consent-body .cd-outro { color:#434855; }
.consent-body .cd-period { padding:24px 20px; background:#F2F4F8; color:#222222; }
/* 법률검토: 보유 및 이용기간만 강조 (굵게 + 밑줄) */
.consent-body .cd-period strong { font-weight:700; text-decoration:underline; text-underline-offset:3px; }
/* 모바일: 제목 20, 좌우·제목 아래 여백 24 (피그마 미제공 추정값) */
@media (max-width:640px) {
  .consent-dlg { padding-top:24px; }
  .cd-head { padding:0 24px; }
  .cd-head h2 { font-size:20px; }
  .consent-body { padding:24px; }
}

/* ---------- 접수 완료 토스트: 피그마 "예약 후 토스트 메세지" (화면 전체 검정 50% + 가운데 320x180). 표시 3초 ---------- */
.done-toast { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.5); cursor:pointer; animation:done-toast-in .2s ease-out; }
.done-toast-box { display:flex; align-items:center; justify-content:center; width:320px; max-width:100%; height:180px; border-radius:8px; background:#FFFFFF; }
.done-toast p { width:201px; margin:0; font-family:'Pretendard', sans-serif; font-size:18px; font-weight:600; line-height:160%; letter-spacing:0; text-align:center; color:#000000; word-break:keep-all; }
/* 입력 오류·접수 실패 안내: 글자 칸 201 -> 280 (상자 320 안 좌우 20). 한 줄 문구가 줄바꿈되지 않게 */
.done-toast.is-notice p { width:auto; max-width:280px; white-space:pre-line; }
@keyframes done-toast-in { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce){ .done-toast { animation:none; } }

/* 스크롤바: 위아래 화살표·바탕 홈 없이 둥근 막대(굵기 6)만 (10/15 디자인 요청, 참고 sparkplus.co).
   마우스를 쓰는 기기(PC)에만 적용한다. 터치 기기는 원래대로 화면 위에 잠깐 뜨는 기본 스크롤바 */
@media (hover:hover) and (pointer:fine) {
  ::-webkit-scrollbar { width:10px; height:10px; }
  ::-webkit-scrollbar-button { display:none; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb { background:#CDD2DA padding-box; border:2px solid transparent; border-radius:9999px; }
  ::-webkit-scrollbar-thumb:hover { background-color:#AEB4BF; }
  ::-webkit-scrollbar-corner { background:transparent; }
}
/* 화면 스크롤바: 기본 막대는 숨기고 화살표·바탕 없는 얇은 막대를 겹쳐 그린다 (assets/page-scrollbar.js, 스크롤할 때만 보임) */
@media (hover:hover) and (pointer:fine) {
  html { scrollbar-width:none; }
  html::-webkit-scrollbar { display:none; }
}