/* =====================================================================
   flow-sub.css — so-song.com 서브페이지 "지금 색 + 새 동선" (2026-10-07)
   - 메인 flow.css 와 같은 하단 독(dock) 모양으로 맞춤. 색은 각 페이지 기존 값 그대로.
   - 바꾸는 것: 모바일 하단 띠(검은 띠 → 떠 있는 흰 독), 모바일 상담 창(바텀시트),
     PC 오른쪽 버튼 글자 크기, 전화 창 버튼.
   - 각 서브페이지 </head> 앞에서 불러오는 덧칠 층. HTML 구조·JS·상담 코어는 그대로.
   ===================================================================== */

/* ---------- PC 오른쪽 버튼: 글자 10px → 12px ---------- */
@media (min-width:769px){
  .fab a,.fab button{width:70px!important;height:66px!important;font-size:12px!important;font-weight:700!important;}
  .fab .fab-top{width:46px!important;height:46px!important;}
}

/* ---------- 전화 창 닫기 버튼 ---------- */
.phone-card .close{background:var(--trust-navy)!important;border:0!important;color:#fff!important;border-radius:12px!important;min-height:44px;font-weight:700;}

/* =====================================================================
   모바일 (768px 이하)
   ===================================================================== */
@media (max-width:768px){
  body{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))!important;}

  /* 하단 독: 검은 띠 → 떠 있는 흰 독 (스크롤하면 올라오는 동작은 그대로) */
  .sticky{left:12px!important;right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
    padding:10px 8px 8px!important;background:rgba(255,255,255,.97)!important;
    border:1px solid var(--border-cream)!important;border-radius:20px;
    box-shadow:0 10px 30px rgba(12,42,66,.16),0 2px 6px rgba(12,42,66,.06);
    transform:translateY(calc(100% + 40px));}
  .sticky.show{transform:translateY(0);}
  .sticky .sticky-msg{color:var(--muted)!important;font-size:12.5px;margin-bottom:8px;padding:0 6px;}
  .sticky .sticky-msg strong{color:var(--ink-navy)!important;}
  .sticky .sticky-btns{gap:4px;align-items:center;}
  .sticky .sticky-btns .sticky-main{height:52px;padding:0 10px!important;border-radius:14px!important;font-size:15px!important;box-shadow:none!important;}
  /* 아이콘 버튼: 네모 테두리 칸 → 동그라미 */
  .sticky .sticky-btns .sticky-ico{width:48px!important;height:48px!important;padding:0!important;border-radius:50%!important;
    background:var(--navy,#F1ECE3)!important;border:0!important;color:var(--trust-navy)!important;box-shadow:none!important;}
  .sticky .sticky-btns .sticky-ico .ico{width:20px;height:20px;}
  .sticky .sticky-btns .btn-kakao.sticky-ico{background:#FEE500!important;color:#3A1D1D!important;}
  .sticky .sticky-btns .sticky-ico:active{filter:brightness(.94);}
  .sticky .btn:hover{transform:none!important;}

  /* 상담 신청 창 → 아래에서 올라오는 바텀시트 */
  .consult-modal{align-items:flex-end!important;padding:0!important;background:rgba(12,42,66,.55)!important;}
  .consult-card{margin:auto 0 0!important;max-width:none!important;border:0!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;}
  .consult-card::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--border-cream);margin:-14px auto 14px;}
  .consult-card .x{width:44px!important;height:44px!important;top:8px!important;right:8px!important;}
}
@keyframes flow-sheet-up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.consult-card{animation:none!important;}}

/* =====================================================================
   Q&A 카드 (A안 흰 카드) + 접기/펼치기 — flow-sub.js 가 html 에 .qa-acc 를 붙였을 때만 접힘
   ===================================================================== */
.faq-list{gap:12px!important;}
.qa{background:#fff!important;border:1px solid var(--border-cream,#E7E0D5)!important;border-radius:16px!important;
  box-shadow:0 2px 10px rgba(12,42,66,.05);padding:22px 22px!important;transition:border-color .2s,box-shadow .2s;}
.qa h2:not(.acc-head){display:block!important;}
.qa h2 .q{display:inline-flex;align-items:center;height:26px;padding:0 10px;margin:0 0 10px;border-radius:999px;
  background:var(--gold-soft,rgba(198,119,46,.08));color:var(--gold,#C6772E)!important;font-size:13px!important;letter-spacing:.02em;}
.qa h2 .q + span{display:block;}
.qa .answer{padding-left:0!important;margin-top:12px!important;}
.qa .answer .quote{border-left:0!important;padding:1px 6px!important;background:#F6EAD9;color:#5A3A12!important;border-radius:4px;}

.qa-acc .qa h2{cursor:pointer;position:relative;padding-right:44px;min-height:44px;-webkit-tap-highlight-color:transparent;}
.qa-acc .qa h2:focus-visible{outline:2px solid var(--trust-navy,#103A5A);outline-offset:4px;border-radius:8px;}
.qa-acc .qa h2::after{content:"";position:absolute;right:0;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;
  background:var(--navy,#F1ECE3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23103A5A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:transform .25s ease,background-color .2s;}
.qa-acc .qa.open h2::after{transform:rotate(180deg);background-color:var(--gold-soft,rgba(198,119,46,.12));}
.qa-acc .qa:not(.open) .answer{display:none;}
.qa-acc .qa.open{border-color:rgba(198,119,46,.35)!important;box-shadow:0 6px 18px rgba(12,42,66,.07);}
.qa-acc .qa:not(.open):hover{border-color:#D9CFBF!important;}
@media (prefers-reduced-motion:reduce){.qa-acc .qa h2::after,.qa{transition:none!important;}}

/* 자체 접기 기능이 있는 서브페이지 10개(.acc-item): 동작은 그대로, 모양만 위와 같게
   Q 배지(윗줄) / 질문(아랫줄) / 오른쪽 동그라미 화살표 */
.qa.acc-item h2.acc-head{display:grid!important;grid-template-columns:1fr 32px;column-gap:12px;align-items:center;}
.qa.acc-item h2.acc-head .q{grid-column:1;grid-row:1;justify-self:start;}
.qa.acc-item h2.acc-head .q + span{grid-column:1;grid-row:2;}
.qa.acc-item h2.acc-head .acc-arrow{grid-column:2;grid-row:1 / span 2;width:32px!important;height:32px!important;padding:9px;margin:0!important;
  border-radius:50%;background:var(--navy,#F1ECE3);color:var(--trust-navy,#103A5A)!important;box-sizing:border-box;}
.qa.acc-item.open h2.acc-head .acc-arrow{background:var(--gold-soft,rgba(198,119,46,.12));}
.qa.acc-item h2.acc-head:focus-visible{outline:2px solid var(--trust-navy,#103A5A);outline-offset:4px;border-radius:8px;}
/* 접힌 상태에서 빈 여백이 남지 않게: 여백은 패널 안쪽 첫 문단으로 옮김 */
.qa.acc-item .answer{margin-top:0!important;padding-top:0!important;padding-bottom:0!important;}
.qa.acc-item .answer > :first-child{margin-top:12px!important;}
.qa.acc-item.open{border-color:rgba(198,119,46,.35)!important;box-shadow:0 6px 18px rgba(12,42,66,.07);}
.qa.acc-item:not(.open):hover{border-color:#D9CFBF!important;}