/* =====================================================================
   새 사이트에서만 쓰는 화면 고침 (지금 서버에는 없는 파일)
   scripts/import_live.py가 지금 서버에서 site.css·boards.css·nd.css를 다시 받아도 덮어쓰지 않도록 여기에 둡니다.
   모든 페이지에서 mobile.css 다음에 읽습니다 (src/components/site-frame.tsx).
   ===================================================================== */

/* ---------- 간편 로그인 버튼 (로그인 화면 .b-sns, 치료후기 로그인 창 .rvm .sns) ----------
   카카오·네이버 로그인 버튼 가이드의 색·심볼을 지키고, 모양은 사이트 버튼처럼 둥글게 */
.b-sns{display:grid;grid-template-columns:1fr;gap:1rem}
.b-sns a{position:relative;height:52px;display:flex;align-items:center;justify-content:center;padding:0 5.2rem;border-radius:26px;font:600 1.554rem var(--ko);letter-spacing:var(--ls);text-decoration:none;transition:filter .2s}
.b-sns a:hover{filter:brightness(.96)}
.b-sns a:focus-visible{outline:2px solid var(--t1);outline-offset:2px}
.b-sns a svg{position:absolute;left:2rem;top:50%;width:20px;height:20px;transform:translateY(-50%)}
.b-sns .k{background:#FEE500;color:rgba(0,0,0,.85)}
.b-sns .k svg{color:#000}
.b-sns .n{background:#03C75A;color:#fff}
.b-sns .n svg{width:16px;height:16px}
/* Google: 흰 바탕·회색 테두리·4색 G (Google 로그인 버튼 가이드), LINE: #06C755 바탕·흰 로고 (LINE 로그인 버튼 가이드) */
.b-sns .g{background:#fff;color:#1F1F1F;box-shadow:inset 0 0 0 1px #747775}
.b-sns .g svg{width:19px;height:19px}
.b-sns .l{background:#06C755;color:#fff}
.b-sns .l svg{width:21px;height:21px}

/* ---------- 치료후기 로그인 창 (review_page.js의 rvLogin) ----------
   지금 서버 화면의 <style>(src/content/member/beaf01.html)보다 나중·더 구체적으로 써서 사이트 로그인 화면과 같은 결로 */
.nd .rvm{background:rgba(20,16,14,.42)}
.nd .rvm .box:has(.lg){max-width:460px;border-radius:12px;padding:44px 40px 34px;box-shadow:0 20px 60px rgba(0,0,0,.2);font-family:var(--ko)}
.nd .rvm .box:has(.lg) .x{right:16px;top:12px;font-size:28px;color:var(--g3)}
.nd .rvm .lg{max-width:none;letter-spacing:var(--ls)}
.nd .rvm .lg h3{font-size:21px;font-weight:600;color:var(--t1);margin:0 0 10px;letter-spacing:-.04em}
.nd .rvm .lg p{font-size:14px;line-height:1.7;color:var(--g1);margin:0 0 26px}
.nd .rvm .lg input[type=text],.nd .rvm .lg input[type=password]{height:50px;border:1px solid #ddd8d2;border-radius:0;padding:0 16px;margin:0 0 10px;font:400 15px var(--ko);letter-spacing:var(--ls);color:var(--t1);background:#fff;outline:none;transition:border-color .2s}
.nd .rvm .lg input[type=text]:focus,.nd .rvm .lg input[type=password]:focus{border-color:var(--t1)}
.nd .rvm .lg input::placeholder{color:var(--g3)}
.nd .rvm .lg .go{height:50px;margin-top:6px;border-radius:25px;background:var(--or);font:600 15px var(--ko);letter-spacing:var(--ls);transition:background .2s}
.nd .rvm .lg .go:hover{background:#d44f22}
.nd .rvm .lg .or{display:flex;align-items:center;gap:14px;margin:26px 0 14px;font-size:12.5px;color:var(--g3)}
.nd .rvm .lg .or:before,.nd .rvm .lg .or:after{content:"";flex:1;height:1px;background:var(--line)}
.nd .rvm .lg .sns{display:grid;grid-template-columns:1fr;gap:8px}
.nd .rvm .lg .sns a{position:relative;height:50px;border-radius:25px;font:600 14.5px var(--ko);letter-spacing:var(--ls);padding:0 48px}
.nd .rvm .lg .sns a svg{position:absolute;left:20px;top:50%;width:19px;height:19px;transform:translateY(-50%)}
.nd .rvm .lg .sns a.k{background:#FEE500;color:rgba(0,0,0,.85)}
.nd .rvm .lg .sns a.k svg{color:#000}
.nd .rvm .lg .sns a.n svg{width:15px;height:15px}
.nd .rvm .lg .sns a.g{background:#fff;color:#1F1F1F;box-shadow:inset 0 0 0 1px #747775}
.nd .rvm .lg .sns a.l{background:#06C755;color:#fff}
.nd .rvm .lg .sns a.l svg{width:20px;height:20px}
.nd .rvm .lg .sns a:hover{filter:brightness(.96)}
.nd .rvm .lg .lnk{display:flex;justify-content:center;margin-top:22px;font-size:13.5px}
.nd .rvm .lg .lnk a{margin:0;color:var(--g1);text-decoration:none}
.nd .rvm .lg .lnk a + a:before{content:"|";margin:0 14px;color:var(--line)}
.nd .rvm .lg .lnk a:hover{color:var(--or)}
/* 휴대폰: 지금 서버처럼 화면 전체를 640 기준으로 줄여 보여 주므로(ReviewBoot의 zoom) 글자·높이를 1.5배로 */
.nd .rvm.mob .box:has(.lg){max-width:600px;padding:56px 44px 44px;border-radius:16px}
.nd .rvm.mob .lg h3{font-size:30px}
.nd .rvm.mob .lg p{font-size:20px;margin-bottom:34px}
.nd .rvm.mob .lg input[type=text],.nd .rvm.mob .lg input[type=password]{height:72px;font-size:22px;padding:0 22px;margin-bottom:14px}
.nd .rvm.mob .lg .go,.nd .rvm.mob .lg .sns a{height:72px;border-radius:36px;font-size:22px}
.nd .rvm.mob .lg .sns{gap:12px}
.nd .rvm.mob .lg .sns a svg{left:30px;width:28px;height:28px}
.nd .rvm.mob .lg .sns a.n svg{width:22px;height:22px}
.nd .rvm.mob .lg .or{font-size:18px;margin:36px 0 20px}
.nd .rvm.mob .lg .lnk{font-size:20px;margin-top:30px}

/* ---------- 회원가입 선택 동의(문자·이메일 수신)처럼 체크 항목이 한 줄에 여러 개일 때 사이 간격 ----------
   .b-check는 오른쪽 정렬(float:right)이라 뒤 항목이 왼쪽에 놓임 → 뒤 항목 오른쪽에 여백 */
.b-check + .b-check{margin-right:2.8rem}

/* ---------- 약관 동의 안내 칸 안의 링크(이용약관·개인정보처리방침)는 밑줄로 링크임을 보이게 ---------- */
.b-agree .b-box a{text-decoration:underline;text-underline-offset:3px;color:var(--t1)}
.b-agree .b-box a:hover{color:var(--or)}

/* ---------- 치료후기 상세 창 (review_extra.js가 .rv-view, .rvnav, .meta .src 를 붙임) ---------- */
#rvmodal .box.rv-view{max-width:680px;border-radius:18px;padding:0;overflow:hidden;display:flex;flex-direction:column;height:min(88vh,860px);max-height:none;box-shadow:0 24px 70px rgba(0,0,0,.22);font-family:var(--ko)}
#rvmodal .box.rv-view #rvmb{overflow-y:auto;overscroll-behavior:contain;padding:28px 32px 0;flex:1;min-height:0;display:flex;flex-direction:column}
#rvmodal .box.rv-view #rvmb > *{flex:none}
#rvmodal .box.rv-view .x{position:absolute;right:14px;top:14px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.12);display:grid;place-items:center;font-size:0;color:var(--t1);transition:background .2s,transform .2s}
#rvmodal .box.rv-view .x:before,#rvmodal .box.rv-view .x:after{content:"";position:absolute;width:15px;height:1.6px;background:currentColor;border-radius:1px;transform:rotate(45deg)}
#rvmodal .box.rv-view .x:after{transform:rotate(-45deg)}
#rvmodal .box.rv-view .x:hover{background:#fff;transform:rotate(90deg)}
#rvmodal .box.rv-view img{border-radius:12px;margin:0 0 18px}
#rvmodal .box.rv-view .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--g3);letter-spacing:var(--ls);margin-right:44px}
#rvmodal .box.rv-view .meta .src{--c:var(--or);display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:13px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--t1);font-weight:600;font-size:12.5px}
#rvmodal .box.rv-view .meta .src:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
#rvmodal .box.rv-view .meta .d + .d:before{content:"";display:inline-block;width:1px;height:10px;background:var(--line);margin:0 8px 0 0;vertical-align:-1px}
#rvmodal .box.rv-view h4{font-size:20px;font-weight:600;line-height:1.5;letter-spacing:-.03em;color:var(--t1);margin:14px 0 6px}
#rvmodal .box.rv-view .se{background:#f6f3ef;border-radius:10px;padding:12px 14px;margin:12px 0 0;font-size:12.5px}
#rvmodal .box.rv-view .body{font-size:15px;line-height:1.9;color:var(--g1);margin:18px 0 28px}
#rvmodal .rvnav{position:sticky;bottom:0;margin-top:auto !important;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 -32px;padding:14px 20px;background:#fff;border-top:1px solid var(--line)}
#rvmodal .rvnav button{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 18px;border:1px solid var(--line);border-radius:21px;background:#fff;font:500 14px var(--ko);letter-spacing:var(--ls);color:var(--t1);cursor:pointer;transition:border-color .2s,color .2s}
#rvmodal .rvnav button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
#rvmodal .rvnav button:hover:not([disabled]){border-color:var(--or);color:var(--or)}
#rvmodal .rvnav button[disabled]{opacity:.35;cursor:default}
#rvmodal .rvnav .n{font-size:13.5px;font-weight:600;color:var(--t1)}
#rvmodal .rvnav .n i{font-style:normal;font-weight:400;color:var(--g3)}
/* 휴대폰 화면(.mob, 640px 기준으로 확대) */
#rvmodal.mob .box.rv-view{border-radius:22px}
#rvmodal.mob .box.rv-view #rvmb{padding:40px 34px 0}
#rvmodal.mob .box.rv-view .x{width:52px;height:52px;right:18px;top:18px}
#rvmodal.mob .box.rv-view .x:before,#rvmodal.mob .box.rv-view .x:after{width:20px;height:2px}
#rvmodal.mob .box.rv-view .meta{font-size:19px;margin-right:64px}
#rvmodal.mob .box.rv-view .meta .src{height:36px;padding:0 16px;border-radius:18px;font-size:18px}
#rvmodal.mob .box.rv-view h4{font-size:28px}
#rvmodal.mob .box.rv-view .body{font-size:22px}
#rvmodal.mob .box.rv-view .se{font-size:18px;padding:16px 18px}
#rvmodal.mob .rvnav{margin:0 -34px;padding:18px 24px}
#rvmodal.mob .rvnav button{height:60px;padding:0 24px;border-radius:30px;font-size:20px}
#rvmodal.mob .rvnav button svg{width:22px;height:22px}
#rvmodal.mob .rvnav .n{font-size:20px}

/* ---------- 상담 신청 띠: [상담신청]을 누르면 입력칸 대신 완료 문구 (site.js qDone, scripts/site_fixes.py) ---------- */
.qf .qdone{display:none}
.qf.q-done > :not(.qdone){display:none !important}
.qf.q-done .qdone{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:0;min-height:40px;color:#fff;font-size:1.5rem;font-weight:600;letter-spacing:var(--ls);animation:qdoneIn .35s ease both}
.qf .qdone svg{width:22px;height:22px;flex:none;padding:3px;border-radius:50%;background:#fff;fill:none;stroke:var(--or);stroke-width:2.6}
.qf .qdone small{font-size:1.25rem;font-weight:400;opacity:.85;margin-left:.6rem}
@keyframes qdoneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:768px){.qf.q-done{justify-content:center}.qf .qdone{flex-wrap:wrap;font-size:15px;text-align:center}.qf .qdone small{flex-basis:100%;font-size:12.5px;margin:0}}

/* ---------- 치료후기·전후사진 하위 메뉴: 숫자를 이름 옆에 '치료후기 (1,306건)'처럼 한 줄로 (붙어 다닐 때 높이가 커지지 않게) ----------
   치료후기 화면 숫자는 운영 서버가 만든 <em class="snc">(위·세로)라 순서만 뒤로 돌림. 전후사진 화면도 같은 표시(beaf04/page.tsx) */
.s-subnav a:has(.snc){display:inline-flex;align-items:center;gap:.6rem;text-align:left}
/* 건수는 둥근 배지 */
.s-subnav a .snc{order:2;display:inline-flex;align-items:center;height:2.2rem;padding:0 .8rem;margin:0;border-radius:1.1rem;background:#f1eeea;font-family:inherit;font-style:normal;font-size:1.15rem;line-height:1;font-weight:600;letter-spacing:0;color:var(--g2)}
.s-subnav a.on .snc{background:var(--or);color:#fff}
.s-subnav a .snc i{font-style:normal;font-family:inherit;font-size:inherit;font-weight:500;margin:0 0 0 .1rem;color:inherit}

/* ---------- 전후사진 목록: 사진이 가로로 긴 전·후 나란히 사진(약 2.6:1)이라 한 줄에 2장, 거의 안 잘리게, 둥글게 ---------- */
.b-rv-grid.b-ba-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:4.4rem 2.8rem}
.b-rv-grid.b-ba-list{align-items:start}
/* 사진 비율 그대로(자르거나 늘리지 않음 → 원본 폭 900px라 키우면 흐려짐) */
.b-ba-list .b-card .b-th{aspect-ratio:auto;border-radius:14px;background:#efebe6}
.b-ba-list .b-card .b-th img{width:100%;height:auto;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.b-ba-list .b-card:hover .b-th img{transform:scale(1.03)}
.b-ba-list .b-card .b-q{margin-top:1.4rem}
.b-view-body img{border-radius:14px}
@media (max-width:768px){.b-rv-grid.b-ba-list{grid-template-columns:1fr;gap:3.2rem}.b-ba-list .b-card .b-th{border-radius:10px}}

/* ---------- 머리말 LOGIN | JOIN | LOGOUT: Belleza는 굵기가 하나뿐이라 테두리를 살짝 그어 조금 두껍게 ---------- */
.hd .rt a[href^="/member/"]:not(.lng),.hd .rt a[href$="/login"]:not(.lng),.hd .rt a[href$="/join"]:not(.lng){-webkit-text-stroke:.35px currentColor;letter-spacing:.02em}

/* ---------- 첫 화면 '시술 전후 사진' 칸 — 회원용(home_member.js): 전·후 나란히 사진 한 장씩 ---------- */
.hm-ba .ba1{position:relative;display:block;border-radius:14px;overflow:hidden;background:#ddd}
.hm-ba .ba1 img{width:100%;height:auto;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hm-ba .ba1:hover img{transform:scale(1.03)}
.hm-ba .ba1 .tag{position:absolute;bottom:.9rem;font-family:var(--en-s);font-size:1.1rem;letter-spacing:.12em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.hm-ba .ba1 .tag.b{left:1rem}
.hm-ba .ba1 .tag.a{left:calc(50% + 1rem)}

/* ---------- 머리말 LOGIN | JOIN / LOGOUT: 둘 다 그려 두고 <html>의 acc-m/acc-g로 하나만 (깜빡임 막기, account-links.tsx) ---------- */
.hd .rt .acc{display:none}
html.acc-g .hd .rt .acc-out,html.acc-m .hd .rt .acc-in{display:contents}

/* ---------- 언어 버튼 日本語·English: 일본어·영문 둘 다 있는 Noto Sans JP를 그 글자 9개만 담아(1.7KB) 씀 ---------- */
@font-face{font-family:"CD Lang";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/lng-noto-sans-jp-500.woff2) format("woff2");unicode-range:U+45,U+67-69,U+6C,U+6E,U+73,U+65E5,U+672C,U+8A9E}
/* 한국어(언어 버튼)도 같은 모양: Noto Sans KR 500에서 '한국어' 세 글자만(1KB). 전에는 Pretendard로 나와 日本語와 달랐음 */
@font-face{font-family:"CD Lang";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/lng-noto-sans-kr-500.woff2) format("woff2");unicode-range:U+AD6D,U+C5B4,U+D55C}
.hd .rt .lng .t{font-family:"CD Lang",'Belleza',var(--en),sans-serif;font-weight:500;font-size:13.5px;letter-spacing:.01em}

/* ---------- 하위 메뉴가 머리말 아래에 붙어 있을 때 옅은 그림자 (cd.js가 .is-stuck) ---------- */
.s-subnav{transition:box-shadow .25s ease}
.s-subnav.is-stuck{box-shadow:0 8px 18px -12px rgba(35,31,32,.28)}

/* ---------- 오시는 길 카카오맵 (cd.js) ---------- */
.s-location .map{position:relative}
.s-location .map .kmap{position:absolute;inset:0;width:100%;height:100%}
.kmap-tag{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.4rem;border-radius:20px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18);font:600 13px var(--ko);letter-spacing:var(--ls);color:var(--t1);white-space:nowrap}
.kmap-tag span{font-weight:500;color:var(--or)}

/* ---------- 전후사진 목록 [더보기] + 레이어 창 (ba_page.js) — 치료후기 창(#rvmodal .rv-view)과 같은 모양 ---------- */
.b-ba-list .b-card.b-hide{display:none}
.b-more-btn{display:block;margin:5rem auto 0;height:48px;padding:0 4.4rem;border:1px solid var(--line);border-radius:24px;background:#fff;font:500 1.5rem var(--ko);letter-spacing:var(--ls);color:var(--t1);cursor:pointer;transition:border-color .2s,color .2s}
.b-more-btn:hover{border-color:var(--or);color:var(--or)}
.bam{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(20,16,14,.5)}
.bam.on{display:flex}
.bam .box{position:relative;width:100%;max-width:860px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.22);font-family:var(--ko);text-align:left}
.bam .mb{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:28px 32px 0;display:flex;flex-direction:column}
.bam .mb > *{flex:none}
.bam .x{position:absolute;right:14px;top:14px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.12);cursor:pointer;color:var(--t1);transition:background .2s,transform .2s}
.bam .x:before,.bam .x:after{content:"";position:absolute;left:50%;top:50%;width:15px;height:1.6px;margin:-.8px 0 0 -7.5px;background:currentColor;border-radius:1px;transform:rotate(45deg)}
.bam .x:after{transform:rotate(-45deg)}
.bam .x:hover{background:#fff;transform:rotate(90deg)}
.bam img{display:block;width:100%;height:auto;border-radius:12px;margin:0 0 18px}
.bam .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--g3);letter-spacing:var(--ls)}
.bam .meta .src{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:13px;background:color-mix(in srgb,var(--or) 12%,#fff);color:var(--t1);font-weight:600;font-size:12.5px}
.bam .meta .src:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--or)}
.bam h4{font-size:20px;font-weight:600;line-height:1.5;letter-spacing:-.03em;color:var(--t1);margin:12px 0 0}
.bam .se{background:#f6f3ef;border-radius:10px;padding:12px 14px;margin:16px 0 26px;font-size:12.5px;line-height:1.6;color:var(--g2)}
.bam .nav{position:sticky;bottom:0;margin-top:auto !important;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 -32px;padding:14px 20px;background:#fff;border-top:1px solid var(--line)}
.bam .nav button{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 18px;border:1px solid var(--line);border-radius:21px;background:#fff;font:500 14px var(--ko);letter-spacing:var(--ls);color:var(--t1);cursor:pointer;transition:border-color .2s,color .2s}
.bam .nav button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.bam .nav button:hover:not([disabled]){border-color:var(--or);color:var(--or)}
.bam .nav button[disabled]{opacity:.35;cursor:default}
.bam .nav .n{font-size:13.5px;font-weight:600;color:var(--t1)}
.bam .nav .n i{font-style:normal;font-weight:400;color:var(--g3)}
@media (max-width:768px){.bam{padding:12px}.bam .mb{padding:20px 18px 0}.bam .nav{margin:0 -18px;padding:12px 14px}.bam h4{font-size:17px}.bam .nav button{padding:0 14px}}

/* 이전·다음 버튼이 내용 길이에 따라 오르내리지 않게: 창 높이를 고정하고 버튼 줄은 늘 맨 아래 (위 .rv-view, .bam 높이) */
/* 전후사진 목록 제목 앞 시술 라벨 */
.b-ba-list .b-q .b-label{display:inline-block;vertical-align:2px;margin-right:.8rem;padding:.3rem 1rem;border-radius:1.2rem;background:color-mix(in srgb,var(--or) 12%,#fff);color:var(--or);font-size:1.2rem;font-weight:600;letter-spacing:0;line-height:1.4}
/* 스크롤 막대가 생겼다 없어져도 버튼이 좌우로 움직이지 않게 */
#rvmodal .box.rv-view #rvmb,.bam .mb{scrollbar-gutter:stable}
/* 전후사진 창은 사진 비율이 거의 같아(약 2.6:1) 내용 높이만큼만 — 고정 높이(760px)면 아래가 텅 빔. 버튼 줄은 그대로 맨 아래 */
.bam .box{height:auto}

/* 전후사진 창 조금 크게(860→1000px), 사진 칸은 평균 비율(약 2.55:1)로 고정 → 넘길 때 창 높이가 출렁이지 않음, 받는 동안 옅은 바탕 */
.bam .box{max-width:1000px}
.bam .ph{aspect-ratio:2.55/1;border-radius:12px;overflow:hidden;background:#efebe6;margin:0 0 18px;display:flex;align-items:center;justify-content:center}
.bam .ph img{width:100%;height:100%;object-fit:contain;margin:0;border-radius:0}
/* 전후사진 창: 사진을 자르지 않고 전체를 원래 비율대로 (칸 높이는 사진에 맞춤, 너무 길면 화면 62%까지) */
.bam .ph{aspect-ratio:auto;background:none}
.bam .ph img{width:100%;height:auto;max-height:62vh;object-fit:contain;border-radius:12px}

/* 영어·일본어 후기 로그인 창의 Google 버튼 (import_foreign_extra.py가 GIS 대신 링크로) */
.rvm .lg a.ln.gg{background:#fff;color:#1f1f1f;box-shadow:inset 0 0 0 1px #747775;margin-bottom:8px}

/* 영어·일본어(.com) 머리말 오른쪽(언어·LOGIN·JOIN·LOGOUT)을 한국어와 같은 글꼴·굵기로 (일본어 화면은 옛 CSS가 NanumGothic으로 덮음) */
html[lang=ja] .hd .rt,html[lang=ja] .hd .rt > a,html[lang=ja] .hd .rt .sep,html[lang=en] .hd .rt > a,html[lang=en] .hd .rt .sep{font-family:'Belleza',var(--en)}
.hd .rt a[href$="/login"]:not(.lng),.hd .rt a[href$="/join"]:not(.lng),.hd .rt a[href="#logout"]{-webkit-text-stroke:.35px currentColor;letter-spacing:.02em}
/* 영어·일본어 하위 메뉴 아래 여백 (한국어처럼 사진과 띄움) */
html[lang=ja] .s-subnav,html[lang=en] .s-subnav{padding-bottom:2.4rem}
/* 영어·일본어 머리말 메뉴·하위 메뉴 글꼴을 한국어와 같게 (옛 common.css의 NanumGothic 대신 Pretendard, 일본어 글자는 Noto Sans JP) */
html[lang=en] .hd nav,html[lang=en] .hd nav a,html[lang=en] .s-subnav,html[lang=en] .s-subnav a{font-family:'Pretendard',-apple-system,'Apple SD Gothic Neo',sans-serif}
html[lang=ja] .hd nav,html[lang=ja] .hd nav a,html[lang=ja] .s-subnav,html[lang=ja] .s-subnav a{font-family:'Pretendard','Noto Sans JP','Hiragino Sans',-apple-system,sans-serif}
/* 주의사항 글: 마지막 줄에 한두 글자만 떨어지지 않게 (text-wrap:pretty), 일본어는 글자가 넓어 조금 작게·자간 좁게 */
.bam .se,#rvmodal .se,.b-foot{text-wrap:pretty}
html[lang=ja] .bam .se,html[lang=ja] #rvmodal .box.rv-view .se{font-size:12px;letter-spacing:-.02em}
/* 치료후기 목록(beaf01, 모든 언어) 카드 사진·글 상자 라운드 — 전후사진 카드(.b-th 14px)와 같게 */
.rvp .th{border-radius:14px;overflow:hidden}
.rvp .th .rv{border-radius:10px 10px 0 0}
/* 영어·일본어 로그인 화면 간편 로그인 버튼 줄 (src/lib/server/com-sns.ts, 한국어 .b-sns와 같은 모양) */
.fx-sns{margin-top:0}
/* 머리말 오른쪽 LOGIN·JOIN·LOGOUT·구분선 글꼴을 모든 화면에서 같게 (옛 화면 CSS의 *{font-family}가 덮던 것, 2026-10-22) */
.hd .rt a:not(.lng),.hd .rt .sep{font-family:'Belleza',var(--en)}
/* 후기 창의 외국어 원문 한 줄(.qo): 목록처럼 2줄로 자르지 않고 다 보이게, 휴대폰 화면에서도 읽히는 크기 */
#rvmodal .qo{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:13.5px;margin-bottom:0}
#rvmodal.mob .qo{font-size:19px}
.rvp .qo{font-weight:400}
/* 한국어판 외국어 후기: 한국어 제목 아래 원문 한 줄(.qo.qb) */
.rvp .qo.qb{margin:2px 0 10px;font-weight:400}
#rvmodal .qo.qb{margin:0 0 12px}
/* 일본어·중국어 글(띄어쓰기 없음)은 사이트 기본 word-break:keep-all 때문에 줄이 안 바뀌고 상자를 뚫음 → 후기·전후사진 목록·창은 글자 단위로도 줄바꿈 (2026-10-23) */
.rvp .q,.rvp .qo,.rvp .qk,#rvmodal .body,#rvmodal h4,#rvmodal .qo,#rvmodal .qk,#rvmodal .orig .ot,.bam h4,.bam .se{word-break:normal;overflow-wrap:anywhere;line-break:strict}
#rvmodal .body{max-width:100%}