/* =====================================================================
   flow.css — so-song.com 메인 "지금 색 + 새 동선" (2026-10-07)
   - 색은 light-reskin 그대로(남색 --trust-navy / --ink-navy, 주황 --amber, 크림 --bg-cream).
   - 바꾸는 것은 상담으로 가는 길만: 모바일 하단 고정 띠, 상담 신청 창(밝게·모바일은 바텀시트),
     PC 오른쪽 패널 글자 크기, PC 전화번호 창, 모바일 약력 점 위치.
   - index.html의 light-reskin 뒤에 불러오는 덧칠 층. HTML 구조·JS·상담 코어는 그대로.
   ===================================================================== */

:root{--flow-line:#D9D1C4;--flow-faint:#7A7F7B;--flow-alert:#B42318;}
:focus-visible{outline:2px solid var(--trust-navy);outline-offset:2px;}

/* ---------- 상담 신청 창: 어두운 창 → 밝은 창 ---------- */
.consultation-overlay{background:rgba(12,42,66,.55)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
.consultation-modal{background:#fff!important;border:0!important;border-radius:18px!important;box-shadow:0 20px 50px rgba(12,42,66,.25)!important;color:var(--body);}
.consultation-modal h3{color:var(--ink-navy)!important;font-weight:800;letter-spacing:-.5px;}
.consultation-modal .modal-sub{color:var(--muted)!important;}
.consultation-close{color:var(--muted)!important;width:44px;height:44px;top:8px!important;right:8px!important;border-radius:50%;}
.consultation-close:hover{background:var(--bg-cream)!important;color:var(--ink-navy)!important;}
#consultation-form-area > label,.form-group label{color:var(--ink-navy)!important;font-weight:600!important;}
#consultation-form-area label span[style],.form-group label span[style]{color:var(--flow-faint)!important;}
#consultation-form-area .required,.form-group label .required{color:var(--flow-alert)!important;}
.form-input,.form-select{background-color:#fff!important;border:1px solid var(--flow-line)!important;border-radius:10px!important;color:var(--body)!important;min-height:48px;}
.form-input:focus,.form-select:focus{border-color:var(--trust-navy)!important;box-shadow:0 0 0 3px #EAF0F4;}
.form-input::placeholder{color:#9AA09A!important;}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23103A5A' stroke-width='1.6' fill='none'/%3E%3C/svg%3E")!important;}
.form-select option{background:#fff!important;color:var(--body)!important;}
.service-type-btn{background:#fff!important;border:1.5px solid var(--border-cream)!important;color:var(--muted)!important;min-height:64px;}
.service-type-btn:hover{border-color:var(--amber)!important;}
.service-type-btn.active{background:var(--amber-tint)!important;border-color:var(--amber)!important;color:var(--amber-tint-ink)!important;}
.service-type-btn .price-tag{color:var(--ink-navy)!important;}
.service-type-btn.active .price-tag{color:var(--amber)!important;}
/* 신청 버튼: 서브페이지 상담 창과 같은 주황 + 진한 글자 (대비 5.6:1) */
.submit-btn{min-height:54px;background:var(--amber)!important;color:#1A1408!important;border-radius:12px!important;font-weight:800!important;}
.submit-btn:hover{background:#B5691F!important;box-shadow:0 8px 20px rgba(198,119,46,.28)!important;}
.submit-btn:disabled{background:var(--border-cream)!important;color:var(--muted)!important;box-shadow:none!important;transform:none!important;}
.consultation-success .success-icon{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:var(--trust-navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:2rem!important;}
.consultation-success h3{color:var(--ink-navy)!important;}
.consultation-success p{color:var(--muted)!important;}
.consultation-success .close-success-btn{background:var(--amber)!important;border:0!important;color:#1A1408!important;border-radius:12px!important;min-height:48px;font-weight:800!important;}

/* ---------- 전화번호 창(PC): 어두운 창 → 밝은 창 (인라인 스타일 덮어씀) ---------- */
#phone-modal{background:rgba(12,42,66,.55)!important;}
#phone-modal > div{background:#fff!important;border:0!important;border-radius:18px!important;box-shadow:0 20px 50px rgba(12,42,66,.25);}
#phone-modal > div > div{color:var(--ink-navy)!important;letter-spacing:-1px;}
#phone-modal > div > p{color:var(--muted)!important;}
#phone-modal > div > button{background:var(--trust-navy)!important;border:0!important;color:#fff!important;border-radius:12px!important;min-height:44px;font-weight:700!important;}

/* =====================================================================
   PC (769px 이상): 오른쪽 패널 — 글자 8px → 12px, 첫 칸(소장작성)만 남색으로 채움
   ===================================================================== */
@media (min-width:769px){
  .floating-panel{right:24px!important;bottom:24px!important;}
  .floating-panel .fp-btn{width:76px!important;height:68px!important;border-radius:14px!important;font-size:12px!important;font-weight:700!important;gap:2px;}
  .floating-panel .fp-btn svg{width:22px!important;height:22px!important;}
  .floating-panel .fp-btn:first-child{background:var(--trust-navy)!important;border-color:var(--trust-navy)!important;color:#fff!important;}
  .floating-panel .fp-btn:first-child svg{fill:#fff!important;}
  .floating-panel .fp-btn:first-child:hover{background:var(--ink-navy)!important;}
  .floating-panel .fp-btn-top{width:48px!important;height:48px!important;}
}

/* =====================================================================
   모바일 (768px 이하): 오른쪽 버튼 4개 → 하단 고정 띠
   기존 버튼(소장작성·이메일상담·전화·카톡·맨위로)을 그대로 쓰고 배치만 바꿈
   ===================================================================== */
@media (max-width:768px){
  /* 떠 있는 둥근 독(dock): 큰 남색 버튼 하나 + 동그라미 아이콘 셋. 네모 칸 배경을 없애 덜 무겁게 */
  :root{--dock-bg:rgba(255,255,255,.97);--dock-line:var(--border-cream);--dock-shadow:0 10px 30px rgba(12,42,66,.16),0 2px 6px rgba(12,42,66,.06);
    --dock-main-bg:var(--trust-navy);--dock-main-fg:#fff;--dock-fg:var(--ink-navy);--dock-chip:var(--bg-cream);--dock-ico:var(--trust-navy);}
  html body{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px));}
  .floating-panel{left:12px!important;right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
    flex-direction:row!important;gap:2px!important;align-items:center!important;padding:8px!important;
    background:var(--dock-bg)!important;border:1px solid var(--dock-line);border-radius:20px;box-shadow:var(--dock-shadow);
    -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);}
  .floating-panel .fp-btn{flex:1 1 0!important;width:auto!important;height:56px!important;margin:0!important;border-radius:14px!important;
    background:transparent!important;border:0!important;color:var(--dock-fg)!important;box-shadow:none!important;
    font-size:11.5px!important;font-weight:600!important;gap:3px;letter-spacing:-.2px;}
  .floating-panel .fp-btn svg{width:32px!important;height:32px!important;padding:7px;margin:0!important;border-radius:50%;
    background:var(--dock-chip);fill:var(--dock-ico)!important;}
  .floating-panel .fp-btn:hover{transform:none!important;}
  .floating-panel .fp-btn:active{background:var(--dock-chip)!important;}
  /* 첫 칸(소장작성) = 주 버튼: 가로로 눕힌 남색 버튼 */
  .floating-panel .fp-btn:first-child{flex:1.9 1 0!important;flex-direction:row!important;gap:6px;height:52px!important;
    background:var(--dock-main-bg)!important;color:var(--dock-main-fg)!important;font-size:15px!important;font-weight:700!important;}
  .floating-panel .fp-btn:first-child svg{width:20px!important;height:20px!important;padding:0;background:none;fill:var(--dock-main-fg)!important;}
  .floating-panel .fp-btn:first-child:active{filter:brightness(.92);}
  /* 카톡: 노란 동그라미 아이콘만 (큰 노란 칸 대신) */
  .floating-panel .fp-btn-kakao{background:transparent!important;color:var(--dock-fg)!important;}
  .floating-panel .fp-btn-kakao svg{background:#FEE500!important;fill:#3A1D1D!important;}
  /* 맨위로: 독 위 오른쪽에 떠 있는 작은 동그라미 */
  .floating-panel .fp-btn-top{position:absolute!important;right:4px;bottom:calc(100% + 12px);flex:none!important;width:44px!important;height:44px!important;
    border-radius:50%!important;background:#fff!important;border:1px solid var(--border-cream)!important;box-shadow:0 6px 16px rgba(12,42,66,.14)!important;}
  .floating-panel .fp-btn-top svg{width:18px!important;height:18px!important;padding:0;background:none;stroke:var(--trust-navy)!important;fill:none!important;}

  /* 상담 신청 창 → 아래에서 올라오는 바텀시트 */
  .consultation-overlay.show{align-items:flex-end!important;}
  .consultation-modal{width:100%!important;max-width:none!important;max-height:92svh!important;border-radius:20px 20px 0 0!important;
    padding:28px 16px calc(20px + env(safe-area-inset-bottom,0px))!important;animation:flow-sheet-up .3s ease-out;}
  .consultation-modal::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--border-cream);margin:-14px auto 14px;}
  .service-type-group{flex-direction:row!important;}

  /* 가운데 정렬된 약력 줄에서 점(·)이 왼쪽 끝에 떨어져 보이던 것 → 글자 바로 앞에 붙임 */
  .profile-credentials li{padding-left:0!important;}
  .profile-credentials li::before{position:static!important;margin-right:6px;}
}
@keyframes flow-sheet-up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.consultation-modal{animation:none!important;}}