/* ════════════════════════════════════════════════════════════════════
   SCPS Chatbot v2 — Sollea v3 UI 스타일 (시안: _local/sc301-sollea-v9.html)
   /Sollea-AI-v3 전용. 모든 규칙을 #sollea-v3 로 스코프해 테마(salient) 스타일과 섞이지 않게 한다.
   시안의 :root 변수는 루트 엘리먼트에, body 규칙은 #sollea-v3 자신에 옮겨 담았다.

   sollea-v2.css 를 복사해 만들었다. v2 와 다른 곳은 홈 히어로(.hero/.quote/.doctor) 하나뿐이고
   나머지는 동일하다. 한쪽을 고칠 일이 생기면 다른 쪽도 같이 봐야 한다.
   ※ 답변 본문(.ai .t) 의 !important 는 외주 자식테마 전역 규칙을 되돌리는 것이다 — 아래 주석 참고.
   ════════════════════════════════════════════════════════════════════ */

#sollea-v3{
  --canvas:#F4F3F4; --surface:#FFFFFF; --ink:#17141A; --text:#2B2630; --muted:#8A8290;
  --hair:#E6E2E6; --soft:#ECEAEC; --accent:#8E3A83;
  /* 전후사진 로그인 안내용 연분홍 — accent(#8E3A83)를 옅게 푼 계열이라 브랜드 톤을 벗어나지 않는다.
     버튼과 안내 카드의 채도를 일부러 다르게 둔다(2026-09-17):
       버튼   S55% — 누르라는 것이므로 또렷하게
       안내카드 S30% — 답변 본문이라 배경이 세면 글이 읽히지 않는다. 버튼보다 한 단계 낮춘다 */
  --accent-soft:#F9EAF5; --accent-line:#E8C8DF; --accent-soft-hi:#F2DAEC;
  --gate-bg:#faf7f9; --gate-line:#E2D2DD;
  /* 📌 안내문 — 구 UI 와 같은 값. 로그인 안내(--gate-*)보다 진하다.
     저건 답변 본문이라 옅어야 하고, 이건 사진에 붙는 주의문이라 눈에 띄어야 한다. */
  --note-bg:#FBF3F9; --note-line:#F0DCEC; --note-ink:#8F4A82;
  /* 상담 유도 콜아웃 — 구 UI 는 초록(#E8F8EB/#1C7C3A)이었다. 연분홍으로 바꾼다. */
  --consult-bg:#FBF3F9; --consult-line:#F0DCEC; --consult-ink:#7E3E72;
  /* 예약 접수 카드 — 구 UI 는 분홍 계열(#C13C93/#7A3E97)이었으나 검정으로 바꿨다 (2026-09-17).
     이 화면의 주요 버튼(새 상담·보내기)이 이미 --ink 검정이라 그쪽과 결이 맞는다.
     되돌리려면 이 여섯 값만 분홍으로 바꾸면 된다 — 규칙은 전부 토큰만 참조한다. */
  --appt-g1:#3B3542; --appt-g2:#17141A; --appt-ink:#17141A;
  /* 정보 박스(예약자·예약일시·상담항목)만 분홍을 남긴다 — 검정 일색이면 딱딱해서
     값이 모인 영역을 한 덩어리로 보이게 하는 역할을 이 배경이 한다.
     구분선도 그 박스 안에 있으므로 같은 분홍 계열로 맞춘다. */
  --appt-info:#FBF6FA; --appt-sep:#F1E6EE; --appt-edge:#E6E2E6;
  --appt-ring:rgba(23,20,26,.16); --appt-shadow:rgba(23,20,26,.10);
  --r-lg:20px; --r-sm:12px; --rail:256px; --drawer:400px;
  --font:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;

  font-family:var(--font); background:var(--canvas); color:var(--text);
  letter-spacing:-.012em; -webkit-font-smoothing:antialiased;
  font-size:14px; line-height:1.55; word-break:keep-all;
  height:100%; overflow:hidden;
}
#sollea-v3 *{box-sizing:border-box;margin:0;padding:0}
#sollea-v3 button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
#sollea-v3 input,#sollea-v3 textarea{font:inherit;color:inherit}
#sollea-v3 img{display:block}
#sollea-v3 ::selection{background:rgba(142,58,131,.16)}
#sollea-v3 :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
#sollea-v3 [hidden]{display:none !important}
/* 제목 줄간 되돌리기 (2026-09-15)
   테마 style.css 가 `h3{line-height:34px}` `h4{line-height:32px}` 을 전역 태그 선택자로 걸어둬서
   시안이 기대한 상속값(#sollea-v3 의 line-height:1.55)이 끊긴다.
   16px 짜리 드로어 제목에 34px 줄간이 붙어 시안보다 9px 씩 아래로 밀려 있었다.
   여기서만 상속으로 되돌린다 — .home h1 · .dhead h3 처럼 우리가 값을 지정한 곳은
   선택자가 더 구체적이라 그대로 이긴다. */
#sollea-v3 h1,#sollea-v3 h2,#sollea-v3 h3,#sollea-v3 h4,#sollea-v3 h5,#sollea-v3 h6{line-height:inherit}

#sollea-v3 .app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr) 0;height:100vh;height:100dvh;transition:grid-template-columns .28s cubic-bezier(.2,.7,.2,1)}
#sollea-v3 .app.drawer-open{grid-template-columns:var(--rail) minmax(0,1fr) var(--drawer)}
#sollea-v3 .app.dock-left{grid-template-columns:var(--rail) 0 minmax(0,1fr)}
#sollea-v3 .app.dock-left.drawer-open{grid-template-columns:var(--rail) var(--drawer) minmax(0,1fr)}
#sollea-v3 .app>.rail,#sollea-v3 .app>.main,#sollea-v3 .app>.drawer{grid-row:1}
#sollea-v3 .app>.main{grid-column:2}
#sollea-v3 .app>.drawer{grid-column:3}
#sollea-v3 .app.dock-left .drawer{grid-column:2;border-left:0;border-right:1px solid var(--hair)}
#sollea-v3 .app.dock-left .main{grid-column:3}

/* ── 레일 ── */
#sollea-v3 .rail{display:flex;flex-direction:column;padding:22px 14px 16px;border-right:1px solid var(--hair);min-height:0}
#sollea-v3 .brand{display:flex;align-items:center;gap:10px;padding:0 6px 18px;cursor:pointer;border-radius:10px}
#sollea-v3 .brand b{display:block;font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
#sollea-v3 .brand span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
#sollea-v3 .lg.sm{width:32px;height:32px}
#sollea-v3 .lg.xs{width:22px;height:22px;animation:none}
#sollea-v3 .lg.big{width:48px;height:48px}
#sollea-v3 .newchat{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:var(--r-sm);background:var(--ink);color:#fff;font-weight:600;font-size:13.5px}
#sollea-v3 .newchat svg{width:15px;height:15px}
/* margin 에 !important 가 붙은 이유 (2026-09-15)
   외주 자식테마 sc301ps.css 가 `h1,h2,h4,h5,h6{margin:0 !important}` 를 전역으로 걸어둬서
   "최근 상담" 라벨의 여백 22/8/8 이 통째로 0 이 됐다 — 새 상담 버튼에 딱 붙어 보였다. */
#sollea-v3 .rail h4{margin:22px 8px 8px !important;font-size:12px;font-weight:500;color:var(--muted)}
#sollea-v3 .conv{display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0}
#sollea-v3 .conv button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:9px 10px;border-radius:10px;color:var(--text)}
#sollea-v3 .conv button:hover{background:rgba(23,20,26,.04)}
#sollea-v3 .conv button.on{background:var(--surface);box-shadow:0 1px 0 rgba(23,20,26,.04)}
#sollea-v3 .conv b{font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#sollea-v3 .conv span{font-size:11.5px;color:var(--muted)}
#sollea-v3 .conv .empty{padding:9px 10px;font-size:12.5px;color:var(--muted);line-height:1.5}
#sollea-v3 .links{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--hair)}
#sollea-v3 .links button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:13px;color:var(--text);width:100%;text-align:left}
#sollea-v3 .links button:hover,#sollea-v3 .links button.on{background:rgba(23,20,26,.05)}
#sollea-v3 .links svg{width:16px;height:16px;color:var(--muted);flex-shrink:0}
#sollea-v3 .me{display:flex;align-items:center;gap:10px;padding:12px 10px 2px;cursor:pointer;border-radius:10px}
#sollea-v3 .me .av{width:30px;height:30px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--ink);flex-shrink:0}
#sollea-v3 .me b{display:block;font-size:13px;font-weight:600}
#sollea-v3 .me span{font-size:11.5px;color:var(--muted)}

/* ── 본문 ── */
#sollea-v3 .main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
#sollea-v3 .topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 28px;font-size:13px;color:var(--muted)}
#sollea-v3 .tb-left{display:flex;align-items:center;gap:10px;min-width:0}
#sollea-v3 .tb-left #soTopTitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sollea-v3 .homebtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 10px;border:1px solid var(--hair);border-radius:10px;background:var(--surface);font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;flex-shrink:0}
#sollea-v3 .homebtn:hover{border-color:#CFC8CF}
#sollea-v3 .homebtn svg{width:15px;height:15px}
#sollea-v3 .tb-mark{display:none;align-items:center;gap:8px;font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--ink);cursor:pointer}
#sollea-v3 .topbar b{color:var(--text);font-weight:600}
#sollea-v3 .authbtn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--hair);border-radius:10px;background:var(--surface);font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap}
#sollea-v3 .authbtn .dot{width:7px;height:7px;border-radius:50%;background:#B7B0B8}
#sollea-v3.is-user .authbtn .dot{background:#22C55E}
#sollea-v3 .scroll{flex:1;overflow:auto;min-height:0;padding:0 28px}
/* float:none 이 필요한 이유 (2026-09-15)
   테마(salient) 그리드 시스템에 `.col{position:relative;float:left;width:100%}` 이 있다.
   시안이 본문 열 이름으로 쓴 .col 과 클래스명이 그대로 겹쳤다.
   뜬(float) 박스에서는 margin:auto 가 0 으로 계산되기 때문에, max-width:720px 은 먹어도
   가운데로 가지 않고 왼쪽 끝에 붙는다 — 1440px 화면에서 204px 왼쪽으로 치우쳐 있었다.
   float 를 풀어야 margin:0 auto 가 되살아난다. */
#sollea-v3 .col{float:none;max-width:720px;margin:0 auto}

/* 홈: 입력창 중심 */
#sollea-v3 .home{min-height:calc(100vh - 140px);display:flex;flex-direction:column;justify-content:center;padding:20px 0 30px}
#sollea-v3 .home .mark{display:flex;align-items:center;gap:12px;margin-bottom:22px}
#sollea-v3 .home .mark b{display:block;font-size:24px;font-weight:700;letter-spacing:-.035em;color:var(--ink);line-height:1.05}
#sollea-v3 .home .mark span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
/* v9 시안의 2단 히어로 — 왼쪽 카피, 오른쪽 대표원장 사진.
   264px 은 사진 칸의 고정폭이다. 본문 열(.col)이 720px 이라 카피가 약 420px 을 갖는다. */
#sollea-v3 .home .hero{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:36px;align-items:center}
/* font-weight 를 명시하는 이유: 테마 style.css 에 `blockquote{font-weight:300}` 이 있어
   따로 적지 않으면 시안(400)보다 얇게 나온다. */
#sollea-v3 .home .quote{margin-top:22px;padding-left:14px;border-left:2px solid var(--hair);font-size:14px;font-weight:400;line-height:1.65 !important;color:var(--text)}
#sollea-v3 .home .quote footer{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--ink)}
#sollea-v3 .home .quote footer span{font-weight:400;color:var(--muted);margin-left:4px}
/* 사진에 이름표(“신동진 대표원장”)가 이미 새겨져 있어 figcaption 을 따로 얹지 않는다. */
#sollea-v3 .home .doctor{position:relative;margin:0;border-radius:22px;overflow:hidden;box-shadow:0 22px 50px rgba(23,20,26,.10)}
#sollea-v3 .home .doctor img{width:100%;height:auto;display:block}
/* margin 에 !important 가 붙은 이유:
   테마 CSS 에 `h1,h2,h4,h5,h6{margin:0 !important}` 규칙이 있어 일반 선언은 전부 덮인다.
   (h3 만 빠져 있다) 스코프가 #sollea-v3 이므로 이 페이지 밖에는 영향이 없다. */
#sollea-v3 .home h1{font-size:clamp(23px,2.1vw,27px);font-weight:700;letter-spacing:-.04em;line-height:1.28;color:var(--ink);margin-top:8px !important}
#sollea-v3 .home .lead{font-size:15px;color:var(--muted);margin-top:8px;line-height:1.65;max-width:56ch}
#sollea-v3 .status{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:13px;color:var(--muted)}
#sollea-v3 .status button{color:var(--text);font-weight:500;text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
#sollea-v3 .home .box{margin:26px 0 0}
#sollea-v3 .sugs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
#sollea-v3 .sugs button{padding:9px 13px;border:1px solid var(--hair);border-radius:var(--r-sm);background:var(--surface);font-size:13px;color:var(--text);text-align:left;line-height:1.35}
#sollea-v3 .sugs button:hover{border-color:#CFC8CF}
#sollea-v3 .topics{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:14px;font-size:12.5px;color:var(--muted)}
#sollea-v3 .topics button{color:var(--muted);padding:2px 0;border-bottom:1px solid transparent}
#sollea-v3 .topics button.on{color:var(--ink);border-bottom-color:var(--ink)}
/* v2 에 있던 .models(시술 카드 3장) · .metric(77.48% 버튼) · .eyebrow 는
   v9 시안에서 빠졌다. 히어로가 그 자리를 대신한다. */

/* ── 스레드 ── */
#sollea-v3 .thread{display:flex;flex-direction:column;gap:26px;padding:6px 0 28px}
#sollea-v3 .day{text-align:center;font-size:12px;color:var(--muted)}
#sollea-v3 .u{align-self:flex-end;max-width:78%;background:var(--soft);padding:12px 16px;border-radius:20px 20px 6px 20px;font-size:14.5px;line-height:1.55;white-space:pre-wrap}
#sollea-v3 .ai{display:grid;grid-template-columns:36px 1fr;gap:14px}
#sollea-v3 .lg{width:36px;height:36px;flex-shrink:0;display:block;animation:sollea-breathe 4s ease-in-out infinite}
@keyframes sollea-breathe{0%,100%{filter:drop-shadow(0 0 0 rgba(142,58,131,0))}50%{filter:drop-shadow(0 0 7px rgba(142,58,131,.45))}}
@media (prefers-reduced-motion:reduce){#sollea-v3 .lg{animation:none}}
#sollea-v3 .ai .who{font-size:12.5px;color:var(--muted);margin:8px 0 8px;display:flex;gap:8px;align-items:center}
#sollea-v3 .ai .who b{color:var(--ink);font-weight:700;font-size:14px}
#sollea-v3 .ai .t{font-size:15px;line-height:1.7;color:var(--text);max-width:64ch}
#sollea-v3 .cursor{display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-2px;margin-left:2px;animation:sollea-blink 1s steps(2) infinite}
@keyframes sollea-blink{to{visibility:hidden}}
#sollea-v3 .think{display:inline-flex;gap:4px;align-items:center;height:22px}
#sollea-v3 .think i{width:5px;height:5px;border-radius:50%;background:#B7B0B8;animation:sollea-tk 1.2s infinite}
#sollea-v3 .think i:nth-child(2){animation-delay:.2s}
#sollea-v3 .think i:nth-child(3){animation-delay:.4s}
@keyframes sollea-tk{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
#sollea-v3 .ai .t.err{color:#9A3412}

/* 답변 본문 마크다운 서식 (marked.js 출력)
   ★ 이 블록이 !important 범벅인 이유 (2026-09-15)
     외주 자식테마 themes/salient-child/css/sc301ps.css 가 태그 선택자에 !important 를
     걸어 전역 초기화를 해 둔 곳이 있다. 그래서 여기 규칙이 모두 밀려 있었다.
       65줄  p{margin:0 !important; padding-bottom:0 !important}  → 문단 사이 간격이 0 이 됐다
       223줄 p{line-height:1.0 !important}                        → 답변 첫 문단이 줄간 1.0 으로 붙었다
       78줄  ul li{list-style:none !important}                    → 글머리 기호가 사라졌다
     결과적으로 문단(줄간 1.0·간격 0)과 목록(줄간 1.7)의 밀도가 어긋나 읽기 불편했다.
     저 전역 규칙은 나머지 페이지 80여 개가 함께 쓰고 있어 건드릴 수 없다.
     ⇒ 챗봇 답변 본문 안에서만 같은 세기(!important)로 되돌린다. 바깥에는 영향이 없다. */
#sollea-v3 .ai .t p{line-height:1.75 !important;margin:0 0 .85em !important;padding-bottom:0 !important;font-size:15px !important;letter-spacing:-.01em}
#sollea-v3 .ai .t p:last-child{margin-bottom:0 !important}
#sollea-v3 .ai .t ul,#sollea-v3 .ai .t ol{margin:.2em 0 .85em !important;padding-left:1.2em !important}
#sollea-v3 .ai .t ul{list-style:disc !important}
#sollea-v3 .ai .t ol{list-style:decimal !important}
#sollea-v3 .ai .t li{line-height:1.75 !important;margin:0 0 .45em !important;font-size:15px}
#sollea-v3 .ai .t ul>li{list-style:disc !important}
#sollea-v3 .ai .t ol>li{list-style:decimal !important}
#sollea-v3 .ai .t ul ul>li,#sollea-v3 .ai .t ol ul>li{list-style:circle !important}
#sollea-v3 .ai .t li:last-child{margin-bottom:0 !important}
#sollea-v3 .ai .t li>ul,#sollea-v3 .ai .t li>ol{margin:.35em 0 0 !important}
#sollea-v3 .ai .t li>p{margin:0 !important;display:inline}
#sollea-v3 .ai .t strong{font-weight:700;color:var(--ink)}
#sollea-v3 .ai .t em{font-style:normal;color:var(--accent)}
#sollea-v3 .ai .t a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* AI 답변의 마크다운 헤딩 — h1·h2·h4 는 테마의 margin:0 !important 대상이라 같이 덮어준다.
   테마 기본 줄간이 2.2 쯤이라 한 줄짜리 소제목이 붕 떠 보였다. 1.4 로 묶는다. */
#sollea-v3 .ai .t h1,#sollea-v3 .ai .t h2,#sollea-v3 .ai .t h3,#sollea-v3 .ai .t h4{font-size:1.04em;font-weight:700;color:var(--ink);line-height:1.45 !important;margin:1.45em 0 .5em !important;letter-spacing:-.02em}
#sollea-v3 .ai .t h1:first-child,#sollea-v3 .ai .t h2:first-child,#sollea-v3 .ai .t h3:first-child,#sollea-v3 .ai .t h4:first-child{margin-top:0 !important}
#sollea-v3 .ai .t code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--soft);padding:.1em .35em;border-radius:5px}
#sollea-v3 .ai .t pre{background:var(--soft);padding:12px 14px;border-radius:var(--r-sm);overflow-x:auto;margin:0 0 .7em}
#sollea-v3 .ai .t pre code{background:none;padding:0}
#sollea-v3 .ai .t blockquote{border-left:2px solid var(--hair);padding-left:12px;color:var(--muted);margin:0 0 .7em}
#sollea-v3 .ai .t hr{border:0;border-top:1px solid var(--hair);margin:1em 0}
#sollea-v3 .ai .t table{border-collapse:collapse;font-size:.94em;margin:0 0 .7em;display:block;overflow-x:auto}
#sollea-v3 .ai .t th,#sollea-v3 .ai .t td{border:1px solid var(--hair);padding:6px 10px;text-align:left}

/* 시술 정보 카드 */
#sollea-v3 .proc{display:grid;grid-template-columns:96px 1fr;gap:16px;margin:16px 0 4px;padding:12px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg)}
#sollea-v3 .proc .ph{width:96px;aspect-ratio:4/5;border-radius:var(--r-sm);overflow:hidden;background:var(--soft)}
#sollea-v3 .proc .ph img{width:100%;height:100%;object-fit:cover;object-position:center top}
#sollea-v3 .proc h3{font-size:16px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
#sollea-v3 .proc .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
#sollea-v3 .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
#sollea-v3 .facts b{display:block;font-size:19px;font-weight:600;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
#sollea-v3 .facts span{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.35}
#sollea-v3 .src{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:14px;font-size:12.5px;color:var(--muted)}
#sollea-v3 .src button{display:inline-flex;align-items:center;gap:7px;color:var(--muted)}
#sollea-v3 .src button:hover{color:var(--text)}
#sollea-v3 .src i{width:18px;height:18px;border-radius:5px;background:var(--soft);overflow:hidden;display:inline-block}
#sollea-v3 .src i img{width:100%;height:100%;object-fit:cover}
#sollea-v3 .follow{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#sollea-v3 .follow button{padding:9px 13px;border:1px solid var(--hair);border-radius:var(--r-sm);background:var(--surface);font-size:13px;font-weight:500;color:var(--text);display:inline-flex;align-items:center;gap:7px;text-align:left}
#sollea-v3 .follow button:hover{border-color:#CFC8CF;background:#FBFAFB}
#sollea-v3 .follow svg{width:14px;height:14px;color:var(--muted);flex-shrink:0}

/* 답변에 딸려오는 전후사진 (API before_after) */
/* 상담 유도 콜아웃 — 구 UI 의 초록 박스를 연분홍으로 옮긴 것 (2026-09-17).
   답변 마지막 문단을 JS(decorateAnswer)가 이 클래스로 바꿔 준다.
   .ai.is-gate(전후사진 로그인 안내)와 색을 나눠 쓰지 않는 이유: 저건 답변 전체를 덮는 배경이고
   이건 답변 끝에 붙는 한 덩어리라, 같은 연분홍이어도 역할이 겹치지 않는다. */
#sollea-v3 .ai .t .consult-q{
  background:var(--consult-bg); color:var(--consult-ink);
  border:1px solid var(--consult-line); border-radius:14px;
  padding:13px 16px; margin:18px 0 4px;
  font-size:14px; font-weight:600; line-height:1.55 !important; word-break:keep-all;
}
#sollea-v3 .ai .t .consult-q:last-child{margin-bottom:0}
#sollea-v3 .ai .t .consult-q strong{color:inherit}
/* 이중 안전장치: 로그인 안내 답변은 이미 카드 배경이 깔려 있다.
   API 가 문단을 둘 이상 보내 콜아웃이 걸리더라도 박스가 겹치지 않게 평문으로 되돌린다. */
#sollea-v3 .ai.is-gate .t .consult-q{background:none;border:0;padding:0;margin:0;color:inherit;font-size:inherit;font-weight:inherit}

/* ── 예약 접수 카드 (2026-09-17) — 구 UI 와 같은 모양, 분홍만 연하게 ── */
#sollea-v3 .appt-card{
  width:100%; max-width:340px; margin:16px 0 4px;
  background:#fff; border:1px solid var(--appt-edge); border-radius:22px; overflow:hidden;
  box-shadow:0 4px 18px var(--appt-shadow);
}
#sollea-v3 .appt-bar{height:5px;background:linear-gradient(135deg,var(--appt-g1) 0%,var(--appt-g2) 100%)}
#sollea-v3 .appt-body{padding:22px 20px 20px}
#sollea-v3 .appt-check{
  width:52px;height:52px;border-radius:50%;margin:0 auto 12px;
  background:linear-gradient(135deg,var(--appt-g1) 0%,var(--appt-g2) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px var(--appt-shadow);
}
#sollea-v3 .appt-check svg{width:27px;height:27px}
#sollea-v3 .appt-title{text-align:center;font-size:16.5px;font-weight:800;letter-spacing:-.4px;color:var(--ink);margin:0 !important;line-height:1.35 !important}
/* 진행 단계 */
#sollea-v3 .appt-steps{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 2px}
#sollea-v3 .appt-steps .ar-step{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;width:50px}
#sollea-v3 .appt-steps .ar-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
#sollea-v3 .appt-steps .ar-dot svg{width:12px;height:12px}
#sollea-v3 .appt-steps .ar-dot--done{background:linear-gradient(135deg,var(--appt-g1) 0%,var(--appt-g2) 100%)}
#sollea-v3 .appt-steps .ar-dot--now{background:#fff;border:2px solid var(--appt-g1);position:relative}
#sollea-v3 .appt-steps .ar-dot--now i{width:8px;height:8px;border-radius:50%;background:var(--appt-g1);display:block}
#sollea-v3 .appt-steps .ar-dot--now::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--appt-ring)}
#sollea-v3 .appt-steps .ar-dot--wait{background:#fff;border:2px solid #DFD4DC}
#sollea-v3 .appt-steps .ar-step span{margin-top:6px;font-size:10px;font-weight:700}
#sollea-v3 .appt-steps .ar-step--done span,#sollea-v3 .appt-steps .ar-step--now span{color:var(--appt-ink)}
#sollea-v3 .appt-steps .ar-step--wait span{color:#B7ABB4;font-weight:600}
#sollea-v3 .appt-steps .ar-bar{flex:1;height:2px;margin:0 2px 20px;background:#E9DFE7;border-radius:2px}
#sollea-v3 .appt-steps .ar-bar--on{background:linear-gradient(135deg,var(--appt-g1) 0%,var(--appt-g2) 100%)}
/* 정보 */
#sollea-v3 .appt-info{background:var(--appt-info);border-radius:14px;padding:14px 16px;margin-top:16px}
#sollea-v3 .appt-info .ar-row{display:flex;justify-content:space-between;align-items:center;padding:1px 0}
#sollea-v3 .appt-info .ar-k{font-size:11.5px;color:var(--muted)}
#sollea-v3 .appt-info .ar-v{font-size:12.5px;font-weight:700;color:var(--text);text-align:right;max-width:62%;word-break:keep-all}
#sollea-v3 .appt-info .ar-v em{font-style:normal;color:var(--appt-ink)}
#sollea-v3 .appt-info .ar-sep{height:1px;background:var(--appt-sep);margin:8px 0}
#sollea-v3 .appt-note{margin:16px 2px 0 !important;font-size:11px;color:var(--muted);line-height:1.6 !important;text-align:center}

#sollea-v3 .ba-inline{margin-top:16px}
/* ── 채팅 안 전후사진 카드 (2026-09-17) ──
   구 UI(/Sollea-AI · chatbot.css)의 모양을 그대로 옮겼다.
   드로어 CASE 패널이 .pane/.lab 을 쓰므로 여기는 .shot/.ph/.badge/.shotcap 으로 분리한다. */
#sollea-v3 .ba-note{
  display:flex; align-items:flex-start; gap:6px; margin:0 0 12px;
  padding:9px 12px; border-radius:10px;
  font-size:12px; line-height:1.6 !important; word-break:keep-all;
  color:var(--note-ink); background:var(--note-bg); border:1px solid var(--note-line);
}
#sollea-v3 .ba-note .pin{flex-shrink:0;font-size:13px}
/* 케이스 제목 — 강조색으로 케이스 구분을 또렷하게.
   .case-item 을 선택자에 끼운 이유: 파일 뒤쪽에 `#sollea-v3 .case-item .cap` 규칙이 있어
   우선순위가 같으면 나중 것이 이긴다. 한 단계 더 구체적으로 만들어 확실히 이기게 한다. */
#sollea-v3 .ba-inline .case-item .cap{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:8px}
#sollea-v3 .ba-inline .shot{display:flex;flex-direction:column;border:1.5px solid #E8DDE6;border-radius:10px;overflow:hidden;background:#fff}
#sollea-v3 .ba-inline .ph{position:relative;flex:1;cursor:zoom-in}
/* 사진은 자르지 않고 원래 비율 그대로 보여준다(구 UI 와 동일) */
#sollea-v3 .ba-inline .ph img{width:100%;height:auto;display:block;background:var(--soft)}
#sollea-v3 .ba-inline .badge{
  position:absolute;top:8px;left:8px;pointer-events:none;
  font-size:10px;font-weight:800;letter-spacing:.07em;color:#fff;
  background:rgba(30,20,28,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border-radius:4px;padding:3px 7px;line-height:1.4;
}
#sollea-v3 .ba-inline .shotcap{
  text-align:center;font-size:12px;font-weight:500;color:#6A5E68;
  padding:7px 4px 8px;background:#FAF7FA;border-top:1px solid #EDE5EC;
}
#sollea-v3 .ba-gate{margin-top:14px}
/* ── 전후사진 로그인 안내 강조 (2026-09-17) ──
   "전후 사진은 회원 전용…" 문구는 interactor API 가 보내는 답변 본문이라 클래스를 붙일 수 없다.
   대신 API 가 mode:'login_gate' 를 함께 내려주면 JS 가 말풍선에 .is-gate 를 달고,
   여기서 그 말풍선 전체를 연분홍 카드로 바꾼다. 문구가 바뀌어도 강조는 따라간다. */
#sollea-v3 .ai.is-gate .t{
  background:var(--gate-bg); border:1px solid var(--gate-line);
  border-radius:var(--r-sm); padding:14px 16px;
}
/* 본문 글자색은 테마 전역 규칙에 눌리지 않게 !important 로 고정한다(다른 p 규칙과 같은 사정) */
#sollea-v3 .ai.is-gate .t p{color:var(--ink) !important}
#sollea-v3 .ai.is-gate .t strong{color:var(--accent)}
/* 로그인 버튼도 같은 연분홍 계열로 묶어 안내와 한 덩어리로 보이게 한다 */
#sollea-v3 .ba-gate .btn{
  background:var(--accent-soft); border-color:var(--accent-line);
  color:var(--accent); font-weight:700;
}
#sollea-v3 .ba-gate .btn:hover{background:var(--accent-soft-hi); border-color:#DDB6D4}

/* ── 컴포저 ── */
#sollea-v3 .composer{padding:8px 28px 16px}
#sollea-v3 .box{max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:10px 10px 10px 18px;display:flex;align-items:flex-end;gap:6px;box-shadow:0 12px 40px rgba(23,20,26,.06);transition:border-color .15s,box-shadow .15s}
#sollea-v3 .box:focus-within{border-color:#C9BEC8;box-shadow:0 12px 40px rgba(23,20,26,.08),0 0 0 4px rgba(142,58,131,.08)}
#sollea-v3 .box textarea{flex:1;resize:none;border:0;outline:0;background:none;font-size:15px;line-height:1.5;color:var(--text);min-height:24px;max-height:160px;padding:6px 0}
#sollea-v3 .box textarea::placeholder{color:#A9A2AE}
#sollea-v3 .box .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted);flex-shrink:0}
#sollea-v3 .box .ic:hover{background:var(--canvas);color:var(--text)}
#sollea-v3 .box .ic svg{width:17px;height:17px}
#sollea-v3 .box .ic.rec{background:rgba(142,58,131,.1);color:var(--accent)}
#sollea-v3 .box .send{width:38px;height:38px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;flex-shrink:0}
#sollea-v3 .box .send:disabled{opacity:.35;cursor:default}
#sollea-v3 .box .send svg{width:16px;height:16px}
#sollea-v3 .fine{max-width:720px;margin:10px auto 0;font-size:11.5px;color:var(--muted);text-align:center}

/* ── 드로어 ── */
#sollea-v3 .drawer{border-left:1px solid var(--hair);background:var(--surface);min-height:0;overflow:hidden;display:flex;flex-direction:column;opacity:0;transition:opacity .2s}
#sollea-v3 .app.drawer-open .drawer{opacity:1}
#sollea-v3 .dhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px 12px}
#sollea-v3 .dhead h3{font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
#sollea-v3 .dhead .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
#sollea-v3 .dhead .acts{display:flex;gap:4px;flex-shrink:0}
#sollea-v3 .dhead .x{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--muted);flex-shrink:0}
#sollea-v3 .dhead .x:hover{background:var(--canvas)}
#sollea-v3 .dhead .x svg{width:16px;height:16px}
#sollea-v3 .dbody{flex:1;overflow:auto;padding:4px 20px 20px;min-height:0}
#sollea-v3 .dbody .view{border-radius:var(--r-sm);overflow:hidden;background:var(--canvas);display:grid;place-items:center;min-height:220px}
#sollea-v3 .dbody .view img{width:100%;height:auto;display:block}
/* h5 도 테마의 margin:0 !important 대상 — 섹션 제목 간격을 지키려면 !important 가 필요하다 */
#sollea-v3 .dbody h5{font-size:12.5px;font-weight:600;color:var(--muted);margin:18px 0 8px !important}
#sollea-v3 .list{display:flex;flex-direction:column}
#sollea-v3 .list button,#sollea-v3 .list>div{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 0;border-top:1px solid var(--hair);font-size:13.5px;color:var(--text)}
#sollea-v3 .list>*:last-child{border-bottom:1px solid var(--hair)}
#sollea-v3 .list button:hover{color:var(--ink)}
#sollea-v3 .list button.on b{color:var(--accent)}
#sollea-v3 .list i{width:34px;height:34px;border-radius:8px;background:var(--soft);overflow:hidden;flex-shrink:0;display:grid;place-items:center;color:var(--muted)}
#sollea-v3 .list i img{width:100%;height:100%;object-fit:cover}
#sollea-v3 .list i svg{width:15px;height:15px}
#sollea-v3 .list b{font-weight:600;display:block}
#sollea-v3 .list span{font-size:12px;color:var(--muted);display:block}
#sollea-v3 .kv{display:flex;flex-direction:column}
#sollea-v3 .kv div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--hair);font-size:13.5px}
#sollea-v3 .kv div:last-child{border-bottom:1px solid var(--hair)}
#sollea-v3 .kv span{color:var(--muted)}
#sollea-v3 .kv b{font-weight:600;text-align:right;color:var(--text)}
#sollea-v3 .kv b.num{font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--ink)}
#sollea-v3 .kv b a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
#sollea-v3 .btnrow{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
#sollea-v3 .btn{height:40px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--hair);background:var(--surface);font-size:13px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
#sollea-v3 .btn:hover{border-color:#CFC8CF}
#sollea-v3 .btn.pri{background:var(--ink);color:#fff;border-color:var(--ink)}
#sollea-v3 .btn.pri:disabled{opacity:.5;cursor:default}
#sollea-v3 .btn.full{width:100%}
#sollea-v3 .note{font-size:12px;color:var(--muted);line-height:1.5;margin-top:12px}
/* 오시는 길 지도 (Leaflet) — 메인페이지와 같은 라이브러리·좌표를 쓴다.
   position:relative + z-index:0 으로 스택 컨텍스트를 만들어, Leaflet 내부의 높은 z-index
   (컨트롤 800 · 팝업 700)가 로그인/사진 모달(120·130) 위로 튀어나오지 않게 격리한다. */
#sollea-v3 .map{position:relative;z-index:0;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;background:#EEEBEE}
#sollea-v3 .map .leaflet-container{width:100%;height:100%;font-family:var(--font);background:#EEEBEE}
#sollea-v3 .map .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.8)}
#sollea-v3 .map .leaflet-control-attribution a{color:var(--muted)}
#sollea-v3 .map .leaflet-popup-content{font-size:12.5px;line-height:1.55;margin:10px 12px}
#sollea-v3 .map .leaflet-popup-content b{color:var(--ink)}
#sollea-v3 .map .leaflet-bar a{color:var(--text)}
/* 마커 — 메인페이지와 같은 펄스(번지는) 효과.
   테마 element-interactive-map.css 의 .animated-dot 구조를 그대로 옮겨왔다
   (크기·타이밍·이징 동일, 색만 v2 accent 로). keyframes 이름은 테마와 겹치지 않게 접두를 붙였다. */
#sollea-v3 .so-pin{background:none;border:0}
#sollea-v3 .animated-dot{width:20px;height:20px;position:relative}
#sollea-v3 .animated-dot .middle-dot{
  width:16px;height:16px;left:2px;top:2px;position:absolute;border-radius:30px;
  background-color:var(--accent);transform-origin:50% 50%;
  /* 메인 지도(619px)보다 패널 지도(269px)가 작아 점이 지도에 묻힌다.
     테마 원본에는 없지만 흰 테두리와 그림자를 둘러 시인성을 확보한다. */
  box-shadow:0 0 0 3px #fff, 0 1px 5px rgba(23,20,26,.4);
  animation-fill-mode:forwards;animation-iteration-count:infinite;
}
#sollea-v3 .animated-dot .middle-dot:after{
  content:' ';display:block;position:absolute;left:0;top:0;width:100%;height:100%;
  background-color:#fff;border-radius:30px;z-index:100;opacity:0;transform-origin:50% 50%;
  animation:sollea-signal2 cubic-bezier(0,.55,.55,1) 2s;
  animation-fill-mode:forwards;animation-delay:.78s;animation-iteration-count:infinite;
}
#sollea-v3 .animated-dot .signal,
#sollea-v3 .animated-dot .signal2{
  width:180px;height:180px;left:-80px;top:-80px;position:absolute;border-radius:200px;
  background-color:var(--accent);pointer-events:none;opacity:0;transform-origin:50% 50%;
  animation:sollea-signal cubic-bezier(0,.55,.55,1) 2s;
  animation-fill-mode:forwards;animation-iteration-count:infinite;
}
#sollea-v3 .animated-dot .signal{animation-delay:.78s}
#sollea-v3 .animated-dot .signal2{animation-delay:1s}
@keyframes sollea-signal{
  0%{opacity:0;transform:scale(0)}
  1%{opacity:.25}
  20%{opacity:.25}
  60%{transform:scale(1);opacity:0}
}
@keyframes sollea-signal2{
  0%{opacity:0}
  1%{opacity:.2}
  20%{opacity:.17}
  60%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  #sollea-v3 .animated-dot .middle-dot:after,
  #sollea-v3 .animated-dot .signal,
  #sollea-v3 .animated-dot .signal2{animation:none}
  #sollea-v3 .animated-dot .signal{opacity:.22}
}
#sollea-v3 .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
#sollea-v3 .chip{padding:8px 12px;border-radius:10px;border:1px solid var(--hair);background:var(--surface);font-size:13px}
#sollea-v3 .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
#sollea-v3 .chip .cnt{font-size:11px;opacity:.6;margin-left:4px;font-variant-numeric:tabular-nums}
#sollea-v3 .field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
#sollea-v3 .field label{font-size:12.5px;color:var(--muted)}
#sollea-v3 .field input{height:40px;border:1px solid var(--hair);border-radius:10px;padding:0 12px;background:var(--surface)}
#sollea-v3 .field input:focus{outline:0;border-color:#C9BEC8;box-shadow:0 0 0 4px rgba(142,58,131,.08)}
/* 개인정보처리방침 동의 (내원상담예약 폼과 같은 문구·필수 항목) */
#sollea-v3 .agree{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:12.5px;color:var(--muted);line-height:1.5;cursor:pointer}
#sollea-v3 .agree input{width:15px;height:15px;margin-top:1px;accent-color:var(--accent);flex-shrink:0}
#sollea-v3 .agree a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
#sollea-v3 .agree a:hover{color:var(--accent)}
#sollea-v3 .agree .req{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;color:var(--accent)}

/* CASE 전후사진 (beaf 갤러리 실데이터) */
#sollea-v3 .case{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#sollea-v3 .case .pane{position:relative;aspect-ratio:4/5;border-radius:var(--r-sm);overflow:hidden;background:linear-gradient(180deg,#EFEAEE,#E4DDE3)}
#sollea-v3 .case .pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;cursor:zoom-in}
#sollea-v3 .case .lab{position:absolute;left:10px;top:10px;font-size:11.5px;font-weight:600;color:var(--text);background:rgba(255,255,255,.85);padding:3px 8px;border-radius:6px;z-index:2}
#sollea-v3 .case .lock::before{content:"";position:absolute;inset:0;backdrop-filter:blur(10px);background:rgba(244,243,244,.55);z-index:1}
#sollea-v3.is-user .case .lock::before{display:none}
#sollea-v3 .lockbox{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:14px;z-index:2}
#sollea-v3.is-user .lockbox{display:none}
#sollea-v3 .lockbox svg{width:22px;height:22px;color:var(--ink)}
/* <p> 태그라 테마의 p{line-height:1.0!important} 에 눌린다 — 두 줄 문구가 붙어 보였다 */
#sollea-v3 .lockbox p{font-size:12.5px;color:var(--text);line-height:1.4 !important}
#sollea-v3 .lockbox button{padding:8px 14px;border-radius:10px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600}
#sollea-v3 .sil{position:absolute;inset:0;display:grid;place-items:center;color:rgba(23,20,26,.18)}
#sollea-v3 .sil svg{width:44%;height:44%}
#sollea-v3 .case-item{margin-bottom:18px}
#sollea-v3 .case-item .cap{font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:8px}
#sollea-v3 .case-empty{padding:28px 0;text-align:center;font-size:13px;color:var(--muted);line-height:1.6}
#sollea-v3 .skel{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
#sollea-v3 .skel div{aspect-ratio:4/5;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--soft) 25%,#F6F4F6 37%,var(--soft) 63%);background-size:400% 100%;animation:sollea-shim 1.4s ease-in-out infinite}
@keyframes sollea-shim{0%{background-position:100% 0}100%{background-position:0 0}}

/* ── 로그인 모달 ── */
#sollea-v3 .lmodal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
#sollea-v3 .lmodal-bd{position:absolute;inset:0;background:rgba(23,20,26,.45);backdrop-filter:blur(3px)}
#sollea-v3 .lmodal-panel{position:relative;width:100%;max-width:380px;background:var(--surface);border-radius:var(--r-lg);box-shadow:0 30px 80px rgba(23,20,26,.3);overflow:hidden}
#sollea-v3 .lmodal-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:20px 20px 8px}
#sollea-v3 .lmodal-hd h3{font-size:17px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
/* <p> 태그 — 테마의 p{margin:0!important} · p{line-height:1.0!important} 을 되돌린다 */
#sollea-v3 .lmodal-hd .sub{font-size:12.5px;color:var(--muted);margin-top:3px !important;line-height:1.5 !important}
#sollea-v3 .lmodal-hd .x{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--muted);flex-shrink:0}
#sollea-v3 .lmodal-hd .x:hover{background:var(--canvas)}
#sollea-v3 .lmodal-hd .x svg{width:16px;height:16px}
#sollea-v3 .lmodal-bdy{padding:4px 20px 20px}
#sollea-v3 .lmodal-bdy .field{margin-top:12px}
/* 테마 salient-dynamic-styles.css 의 강조색 목록에 `label span` 이 들어 있어
   체크박스 옆 문구("로그인 상태 유지" · "동의합니다")가 보라색(#a43c93)으로 나왔다.
   .remember/.agree 는 label 이고 문구가 span 이라 부모 color 상속이 끊긴다 → 다시 물려받게 한다.
   .agree .req(필수 뱃지)와 .agree a(링크)는 선택자가 더 구체적이라 강조색을 유지한다. */
#sollea-v3 .remember span,#sollea-v3 .agree span{color:inherit}
#sollea-v3 .remember{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:12.5px;color:var(--muted);cursor:pointer}
#sollea-v3 .remember input{width:14px;height:14px;accent-color:var(--accent)}
/* <p> 태그 — 위와 같은 이유. 로그인·예약 오류 문구 */
#sollea-v3 .lerr{font-size:12.5px;color:#B4322B;line-height:1.5 !important;margin-top:10px !important;min-height:0}
#sollea-v3 .lerr:empty{display:none}
#sollea-v3 .lmodal-bdy .btn{margin-top:14px;height:44px}
#sollea-v3 .lmodal-ft{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--muted)}
#sollea-v3 .lmodal-ft a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* ── 사진 확대 모달 ── */
/* 위쪽 여백을 크게 두는 이유: 닫기 버튼을 화면 오른쪽 위에 고정했기 때문에
   패널이 그 아래에서 시작해야 버튼이 사진을 가리지 않는다. */
#sollea-v3 .pmodal{position:fixed;inset:0;z-index:130;display:grid;place-items:center;
  /* 위쪽 56px 은 닫기 버튼 자리다. 버튼을 패널 바깥 위로 올려 사진을 가리지 않게 하되,
     이만큼 비워 둬야 패널이 화면을 가득 채워도 버튼이 잘리지 않는다. */
  padding:calc(56px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  /* 행을 minmax(0,1fr) 로 묶는 이유: 기본값 auto 면 행 높이가 '내용 높이'가 되고,
     그러면 패널의 max-height:100% 가 자기 내용 높이를 가리켜 아무것도 제한하지 못한다.
     사진이 세로로 쌓이는 모바일에서 패널이 화면 밖까지 자라 아래쪽 사진에 닿을 수 없었다. */
  grid-template-rows:minmax(0,1fr)}
#sollea-v3 .pmodal-bd{position:absolute;inset:0;background:rgba(23,20,26,.72)}
#sollea-v3 .pmodal-panel{position:relative;max-width:min(920px,100%);max-height:100%;display:flex;flex-direction:column}
/* 닫기 버튼 — 패널 안쪽 오른쪽 위 (2026-09-17)
   ㉠ 처음에는 패널 바깥 위(top:-40px)였다. 모바일에서 사진이 세로로 쌓여 패널이 화면보다
      길어지면 버튼이 y=-16px 로 밀려 화면 밖으로 잘렸다 — 닫을 수가 없었다.
   ㉡ 그래서 화면 고정(position:fixed)으로 옮겼더니, 데스크톱에서는 패널이 가운데인데
      버튼만 화면 구석에 있어 서로 한참 떨어져 보였다.
   ㉢ 패널 안쪽(top:10px)에 붙였더니 이번엔 사진을 조금 가렸다.
   ⇒ 패널 기준 absolute 로 '바깥 위'(top:-50px)에 둔다. ㉠ 과 위치는 같지만,
      .pmodal 위쪽에 56px 을 비워 두고 패널을 grid-template-rows:minmax(0,1fr) 로
      화면 안에 묶어 뒀기 때문에 이제는 잘리지 않는다. 그 둘이 있어야 성립하는 배치다.
   사진 위에 겹쳐도 보이도록 반투명 어두운 바탕을 깔고, 크기는 44px — 터치 목표 최소 권장치다. */
#sollea-v3 .pmodal .x{
  position:absolute; top:-50px; right:0;
  width:44px; height:44px; border-radius:50%; z-index:3;
  display:grid; place-items:center; color:#fff;
  background:rgba(23,20,26,.58); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
#sollea-v3 .pmodal .x:hover{background:rgba(23,20,26,.78)}
#sollea-v3 .pmodal .x svg{width:22px;height:22px}
/* min-height:0 이 필요한 이유: 이 요소는 세로 flex 컨테이너(.pmodal-panel)의 자식이다.
   flex 자식의 min-height 기본값은 auto 라 내용보다 작아지지 못한다. 그래서 overflow:auto 를 줘도
   줄어들 여지가 없어 스크롤이 생기지 않고, 패널이 화면 밖으로 삐져나가
   모바일에서 두 번째 사진('시술 후')에 아예 닿을 수 없었다(실측 1005px vs 화면 844px). */
#sollea-v3 .pmodal-body{overflow:auto;min-height:0;border-radius:var(--r-lg);background:var(--surface);padding:14px}
#sollea-v3 .pmodal-body .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#sollea-v3 .pmodal-body figure{margin:0}
#sollea-v3 .pmodal-body img{width:100%;height:auto;border-radius:var(--r-sm);background:var(--soft)}
#sollea-v3 .pmodal-body figcaption{font-size:12px;color:var(--muted);margin-top:6px;text-align:center}
#sollea-v3 .pmodal-body .ttl{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:10px}

/* ── 탭바 / 토스트 ── */
#sollea-v3 .tabbar{display:none}
#sollea-v3 .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:.2s;z-index:200;max-width:calc(100vw - 40px);text-align:center}
#sollea-v3 .toast.show{opacity:1;transform:translateX(-50%)}

/* ── 반응형 ── */
@media (max-width:1180px){ #sollea-v3{--drawer:360px} }
@media (max-width:960px){
  #sollea-v3 .app,#sollea-v3 .app.drawer-open{grid-template-columns:1fr}
  #sollea-v3 .rail{display:none}
  #sollea-v3 .tb-left #soTopTitle{display:none}
  #sollea-v3 .tb-mark{display:inline-flex}
  #sollea-v3.view-home .tb-mark{display:none}
  #sollea-v3 .homebtn span{display:none}
  #sollea-v3 .homebtn{width:34px;padding:0;justify-content:center}
  #sollea-v3 .authbtn{padding:6px 10px;font-size:12px}
  #sollea-v3 .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;height:62px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-top:1px solid var(--hair);z-index:70;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  #sollea-v3 .tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--muted);border-radius:10px}
  #sollea-v3 .tabbar button svg{width:20px;height:20px}
  #sollea-v3 .tabbar button.on{color:var(--ink)}
  #sollea-v3 .main{padding-bottom:62px}
  #sollea-v3 .dhead .dock{display:none}
  #sollea-v3 .app.dock-left .main{grid-column:auto}
  #sollea-v3 .home{min-height:calc(100vh - 150px);justify-content:flex-start;padding:8px 0 24px}
  #sollea-v3 .home .mark{margin-bottom:16px}
  #sollea-v3 .home .mark b{font-size:21px}
  /* 모바일에서는 히어로를 1단으로 접고 사진을 320px 로 묶는다 (세로로 너무 커지지 않게) */
  #sollea-v3 .home .hero{grid-template-columns:1fr;gap:18px}
  #sollea-v3 .home .doctor{max-width:320px}
  #sollea-v3 .home .quote{margin-top:16px;font-size:13.5px}
  #sollea-v3 .home h1{font-size:22px;margin-top:10px !important;line-height:1.3}
  #sollea-v3 .home .lead{font-size:14px;max-width:none;margin-top:10px}
  #sollea-v3 .sugs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:12px -16px 0;padding:0 16px}
  #sollea-v3 .sugs::-webkit-scrollbar{display:none}
  #sollea-v3 .sugs button{flex:0 0 auto;white-space:nowrap;max-width:78vw;overflow:hidden;text-overflow:ellipsis}
  #sollea-v3 .topics{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:12px -16px 0;padding:0 16px;gap:0 16px}
  #sollea-v3 .topics::-webkit-scrollbar{display:none}
  #sollea-v3 .topics button{white-space:nowrap}
  #sollea-v3 .drawer{position:fixed;inset:auto 0 0 0;height:88vh;border-left:0;border-radius:22px 22px 0 0;box-shadow:0 -20px 60px rgba(23,20,26,.25);transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s;z-index:80}
  #sollea-v3 .app.drawer-open .drawer{transform:none}
  #sollea-v3 .topbar{padding:14px 16px}
  #sollea-v3 .scroll{padding:0 16px}
  #sollea-v3 .composer{padding:8px 12px 14px}
  #sollea-v3 .u{max-width:88%}
  #sollea-v3 .ai{grid-template-columns:30px 1fr;gap:10px}
  #sollea-v3 .lg{width:30px;height:30px}
  #sollea-v3 .proc{grid-template-columns:72px 1fr;grid-template-rows:auto 1fr auto;gap:4px 12px;align-items:start}
  #sollea-v3 .proc .ph{width:72px;grid-row:1/3}
  #sollea-v3 .proc>div:last-child{display:contents}
  #sollea-v3 .proc h3{grid-column:2}
  #sollea-v3 .proc .sub{grid-column:2}
  #sollea-v3 .facts{grid-column:1/-1;margin-top:8px}
  #sollea-v3 .pmodal-body .pair{grid-template-columns:1fr}
  /* 모바일은 화면이 좁아 좌우 여백을 줄여 사진을 더 크게 본다 */
  #sollea-v3 .pmodal{padding:calc(52px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom))}
  #sollea-v3 .toast{bottom:78px}
}