/* ==========================================================================
   Séoul Atelier · 2차 디자인 수정 (2026-10-20)
   - sa11.css 다음에 불러오기: <link rel="stylesheet" href="sa12.css">
   - 모든 규칙은 <html class="... sa12"> 일 때만 적용 (sa12.js가 클래스를 붙임)
   - PC = min-width:960px / 모바일 = max-width:959px
   ========================================================================== */

html.sa12 { --fx-line:#a3968a; --fx-box:rgba(255,255,255,.32); --fx-box-line:rgba(28,26,23,.05); }

/* ---------- 1. 홈: 히어로 아래 심볼 · 섹션 간격 ---------- */
html.sa12 .hero-inner { position:relative; top:5px; }
@media (min-width:960px){
  html.sa12 .h-mark { padding-top:36px; }
  html.sa12 .h-mark + .h-sec { padding-top:28px; }
  html.sa12 .h-sec:not(.h-mark + .h-sec) { padding-top:180px; }
}
@media (max-width:959px){
  html.sa12 .h-sec:not(.h-mark + .h-sec) { padding-top:112px !important; }
}

/* ---------- 2. 홈: 시술 · 원장 슬라이드 ---------- */
@media (min-width:960px){
  html.sa12 #hTrend .rail { grid-auto-columns:calc((100% - 48px) / 4); }
  html.sa12 #hDocs .doc-rail { grid-auto-columns:calc((100% - 48px) / 4) !important; }
}
html.sa12 .rail-wrap.sa12-fit .rail-ui { display:none; }

/* ---------- 3. 홈: 더보기 버튼 오른쪽 정렬 ---------- */
@media (min-width:960px){
  html.sa12 #hCare .h-cta, html.sa12 #hOffers .h-cta { justify-content:flex-end; }
}

/* ---------- 4 · 5. 고객 후기 (홈 · 후기 페이지): 2026-10-23 후기가 시술 · 병원 · 의사 페이지로 옮겨져 뺐어요 (sa13.css) ---------- */

/* ---------- 6. 하위 페이지: 나에게 맞는 시술은? 띠 아래 ---------- */
html.sa12 .pg-sec:has(.next-band) { padding-bottom:160px; }

/* ---------- 7. Q&A + 상담 (위챗 상담 섹션 삭제, Q&A 끝에 상담 줄) ---------- */
html.sa12 #consult { display:none !important; }
html.sa12 #worry .w-row.sa12-hide { display:none !important; }
@media (min-width:960px){ html.sa12 #homeBody + #worry, html.sa12 .view > #worry { padding-top:220px; } }
@media (max-width:959px){ html.sa12 #homeBody + #worry, html.sa12 .view > #worry { padding-top:136px !important; } }
html.sa12 #worry { padding-bottom:180px !important; }
@media (max-width:959px){ html.sa12 #worry { padding-bottom:120px !important; } }
@media (min-width:960px){
  html.sa12 #worry .w-row { grid-template-columns:380px minmax(0,1fr) 220px !important; column-gap:56px !important; }
  html.sa12 #worry .w-row h3 { font-size:24px !important; line-height:1.45 !important; }
}
/* 상담 줄 */
html.sa12 .sa12-qa-row { position:relative; margin-top:48px; }
html.sa12 .sa12-qa-row::before { content:""; position:absolute; inset:-12px -40px; z-index:-1; background:var(--fx-box); box-shadow:inset 0 0 0 1px var(--fx-box-line); pointer-events:none; }
html.sa12.sa10 .w-row .sa12-qa-btn { background:var(--ink) !important; color:#fff !important; box-shadow:none !important; }
@media (hover:hover){ html.sa12.sa10 .w-row .sa12-qa-btn:hover { background:#000 !important; } }
@media (max-width:959px){
  html.sa12 .sa12-qa-row::before { display:none !important; }
  html.sa12.sa10 #worry .w-list .w-row.sa12-qa-row { padding:32px 0 0 !important; margin-top:40px; border-top:1px solid rgba(28,26,23,.14); }
}

/* ---------- 8. 버튼 체계 ---------- */
/* 기본 #1c1a17 채움 · 어두운 배경 위 기본 #ede6dc 채움 · 보조 투명+1px #a3968a · 텍스트 링크 밑줄 · 헤더 1px #a88b5c
   크기 L 54px / S 44px(14px, 좌우 22px) · 자간 .04em */
html.sa12 .btn { letter-spacing:.04em; }
html.sa12 .btn.sm { height:44px; padding:0 22px; font-size:14px; }
html.sa12.sa10 .btn.block { box-shadow:none !important; }
html.sa12.sa10 .btn.gold { background:#ede6dc !important; color:#1c1a17; }
html.sa12 .btn.light, html.sa12 .btn.light.sm { background:transparent; box-shadow:inset 0 0 0 1px var(--fx-line); }
html.sa12 #hOffers .h-cta .btn { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--fx-line); }
html.sa12 .rail-btn { width:44px; height:44px; box-shadow:inset 0 0 0 1px var(--fx-line); }
html.sa12.sa10 .w-row .btn { height:44px; box-shadow:inset 0 0 0 1px var(--fx-line) !important; }
html.sa12.sa10 #csCopy { background:transparent !important; color:var(--ink) !important; box-shadow:inset 0 0 0 1px var(--fx-line) !important; }
html.sa12.sa10 .btn.block.light { box-shadow:inset 0 0 0 1px var(--fx-line) !important; }
html.sa12 header .ai-btn, html.sa12 header .btn.sm { height:44px; padding:0 20px; border:0; box-shadow:inset 0 0 0 1px #a88b5c; font-size:14px; font-weight:500; letter-spacing:.04em; }
html.sa12 .text-link { font-size:15px; }
/* 보조 버튼 호버 = 화살표 버튼과 동일 */
html.sa12 .btn.light, html.sa12 #hOffers .h-cta .btn, html.sa12 .rail-btn, html.sa12.sa10 #csCopy { transition:background-color .3s, color .3s, box-shadow .3s; }
@media (hover:hover){
  html.sa12 .btn.light:hover, html.sa12 #hOffers .h-cta .btn:hover, html.sa12 .rail-btn:hover,
  html.sa12.sa10 .w-row .btn:hover, html.sa12.sa10 #csCopy:hover, html.sa12.sa10 .btn.block.light:hover {
    background:var(--ink) !important; color:#f7f3ee !important; box-shadow:inset 0 0 0 1px var(--ink) !important; }
}
/* 텍스트 링크 호버: 밑줄이 왼쪽부터 다시 그어짐 */
@keyframes sa12Line { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (hover:hover){
  html.sa12 .text-link:hover::after, html.sa12 #csCopyId:hover .sa12-lb::after { transform:scaleX(1); transform-origin:left; animation:sa12Line .6s cubic-bezier(.22,.61,.36,1); }
}

/* ---------- 9. 카드 박스 색 통일 ---------- */
html.sa12 .tx-card, html.sa12 .doc-card, html.sa12 .team-note, html.sa12 .side-card { background:var(--fx-box) !important; box-shadow:inset 0 0 0 1px var(--fx-box-line) !important; }

/* ---------- 10. 아이콘 ---------- */
/* 선 두께 1px은 sa12.js가 svg 속성으로 바꿈. 햄버거 선만 CSS */
html.sa12 .burger i { height:1px !important; }

/* ---------- 11. 위챗 상담 시트 ---------- */
html.sa12 .cs-panel { width:520px; padding:56px 48px 40px; }
html.sa12 .cs-head { align-items:flex-start; }
html.sa12 .cs-head h2 { font-size:26px; font-weight:400; line-height:1.4; letter-spacing:-.01em; }
html.sa12 .cs-head h2::before { content:"PRIVATE CONSULTATION"; display:block; margin-bottom:14px; font-family:"Cormorant Garamond",serif; font-size:13px; font-weight:500; letter-spacing:.32em; color:#a88b5c; }
/* 닫기: 박스 없이 큰 × (1px 선, sa12.js가 svg 교체) */
html.sa12 .cs-x { width:56px; height:56px; margin:-12px -14px 0 0; background:transparent !important; box-shadow:none !important; color:var(--ink) !important; transition:opacity .3s; }
html.sa12 .cs-x svg { width:32px !important; height:32px !important; }
@media (hover:hover){ html.sa12 .cs-x:hover { opacity:.55; } }
/* 01~03 단계 */
html.sa12 .cs-steps { counter-reset:cs; margin-top:20px; gap:10px; }
html.sa12 .cs-steps li { counter-increment:cs; display:grid; align-content:start; gap:8px; padding:18px 18px 20px; background:var(--fx-box); box-shadow:inset 0 0 0 1px var(--fx-box-line); }
html.sa12 .cs-steps li b { width:auto; height:auto; background:none; font-size:0; line-height:1; justify-content:flex-start; }
html.sa12 .cs-steps li b::before { content:counter(cs, decimal-leading-zero); font-family:"Cormorant Garamond",serif; font-size:22px; font-weight:500; color:#a88b5c; letter-spacing:.04em; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
html.sa12 .cs-steps li span { font-size:14px; line-height:1.55; color:var(--ink); word-break:keep-all; }
/* 보낼 내용 (라벨 · 입력칸 · 복사 버튼 한 덩어리) */
html.sa12 .cs-msg { margin-top:22px; gap:10px; }
html.sa12 .cs-msg small { font-size:13px; letter-spacing:.04em; color:#8a7f72; }
html.sa12 #csMsg { margin-top:0; height:auto !important; min-height:96px !important; max-height:40svh; field-sizing:content; background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(28,26,23,.1); padding:20px 22px; font-size:15px; line-height:1.75; resize:none; scrollbar-width:thin; }
html.sa12 #csCopy { margin-top:-10px; }
html.sa12 .cs-status:empty { display:none; }
/* 위챗 ID */
html.sa12 .cs-id { margin-top:44px; padding:20px; gap:20px; background:var(--fx-box); box-shadow:inset 0 0 0 1px var(--fx-box-line); }
html.sa12 .cs-qr { background:rgba(255,255,255,.6); box-shadow:inset 0 0 0 1px rgba(28,26,23,.08); color:#8a7f72; }
html.sa12 .cs-id-txt small { color:#8a7f72; letter-spacing:.02em; }
html.sa12 #csCopyId { height:auto; padding:6px 0 !important; background:none !important; box-shadow:none !important; color:var(--ink) !important; gap:8px; font-size:14px; letter-spacing:.02em; align-self:center; }
html.sa12 #csCopyId .sa12-ico { display:inline-flex; width:16px; height:16px; }
html.sa12 #csCopyId .sa12-ico svg { width:16px; height:16px; }
html.sa12 #csCopyId .sa12-lb { position:relative; }
html.sa12 #csCopyId .sa12-lb::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform-origin:left; }
html.sa12 #csCopyId.sa12-done { color:#7a5f33 !important; }
@media (max-width:959px){
  html.sa12 .cs-panel { width:auto; padding:24px 20px 24px !important; }
  html.sa12 .cs-head h2 { font-size:22px; }
  html.sa12 .cs-head h2::before { margin-bottom:10px; font-size:12px; }
  html.sa12 .cs-x { width:48px; height:48px; margin:-8px -10px 0 0; }
  html.sa12 .cs-x svg { width:26px !important; height:26px !important; }
  html.sa12 .cs-steps { margin-top:20px; gap:8px; }
  html.sa12 .cs-steps li { padding:14px 12px 14px; }
  html.sa12 .cs-steps li b::before { font-size:18px; }
  html.sa12 .cs-steps li span { font-size:13px; }
  html.sa12 .cs-msg { margin-top:24px; }
  html.sa12 #csMsg { padding:14px 16px; font-size:14px; line-height:1.7; }
  html.sa12 .cs-id { margin-top:24px; padding:14px; gap:14px; }
}

/* ---------- 12. 푸터 ---------- */
html.sa12 .footer { padding-top:160px; }
@media (max-width:959px){
  html.sa12 .footer { padding-top:56px; padding-bottom:104px; }
  html.sa12.sa10 .foot-word { font-size:18px !important; letter-spacing:.32em !important; line-height:1.2 !important; color:#cfc6b9 !important; padding-top:0; transform:none !important; text-align:left; white-space:nowrap; }
  html.sa12 .foot-row { flex-direction:column; gap:20px; margin-top:28px; padding-top:0; }
  html.sa12 .foot-nav { display:flex; flex-direction:column; gap:8px; font-size:13px; line-height:18px; }
  html.sa12 .foot-nav a { color:#cfc6b9; white-space:nowrap; }
  html.sa12 .footer .copy { font-size:12px; margin-top:0; }
  html.sa12 .footer .copy, html.sa12 .credits, html.sa12 .credits summary, html.sa12 .credits p, html.sa12 .credits a { color:#8a8278; }
  html.sa12 .credits { margin-top:16px; }
}

/* ---------- 13. 모바일 위챗 플로팅 버튼: 어두운 배경 위 반전 (sa12.js가 .sa12-on-dark 토글) ---------- */
html.sa12 .sa10-fab { transition:background-color .35s, color .35s, box-shadow .35s; }
html.sa12 .sa10-fab.sa12-on-dark { background:#ede6dc !important; color:#1c1a17 !important; box-shadow:0 6px 18px rgba(0,0,0,.28) !important; }
html.sa12 .sa10-fab.sa12-on-dark svg { color:#a88b5c; }