/* 10/17 시안 스타일 패치 · html.sa10 일 때만 적용 */
/* 글꼴: index.html 의 fonts/fonts.css (자체 호스팅, 2026-10-23) */
html.sa10 { --bg:#f7f3ee; --bg-2:#efe8de; --core:#fbfaf6; --ink:#1c1a17; --ink-2:#4a453f; --muted:#5e554a; --bronze:#7a5f33; --gold:#c9ae7e;
--dark:#1c1a17; --dark-2:#25221d; --dark-ink:#ede6dc; --dark-muted:#cfc6b9; --ring:rgba(28,26,23,.12);
--serif:"Noto Serif KR","Noto Serif SC",serif; --sans:"Noto Sans KR","Noto Sans SC",sans-serif; --latin:"Cormorant Garamond",serif;
--sa10-top:124px; } /* 탑바 36 + 헤더 88 */
html.sa10 body { background:var(--bg); }
/* 각진 면: 버튼·칩·카드 모서리 0 (얼굴 부위 알약·라디오 점은 그대로) */
html.sa10 :is(main, .bar, .cs, .sheet, .nav) *:not(.pill):not(.radio):not(.radio *):not(i):not(.dot):not(.logo *) { border-radius:0 !important; }
html.sa10 .consult { border-radius:0 !important; }
html.sa10 #photo { clip-path:none !important; }
html.sa10 .btn { border-radius:0 !important; padding:0 30px; gap:10px; letter-spacing:.04em; }
html.sa10 .btn .ico { background:transparent !important; width:18px; height:18px; }
/* 타이포 */
html.sa10 main h1, html.sa10 main h2, html.sa10 main h3, html.sa10 .cs h2 { font-family:var(--serif) !important; font-weight:500 !important; letter-spacing:0 !important; }
html.sa10 .sec-head h2, html.sa10 .worry h2 { font-size:clamp(24px,2.6vw,36px) !important; line-height:1.4 !important; }
html.sa10 .consult h2 { font-size:clamp(26px,2.7vw,38px) !important; line-height:1.45 !important; }
html.sa10 .ch h3 { font-size:clamp(22px,2vw,30px) !important; line-height:1.4 !important; }
html.sa10 .foot-word { font-family:var(--latin) !important; font-weight:500; text-transform:uppercase; letter-spacing:.28em; font-size:clamp(34px,7vw,120px) !important; line-height:1.1 !important; }
html.sa10 .sa10-latin { font-family:"Cormorant Garamond",serif !important; font-weight:500 !important; font-variant-numeric:lining-nums; }
.sa10-eyebrow { margin:0 0 14px; font-family:"Cormorant Garamond",serif; font-size:clamp(13px,1.05vw,15px); letter-spacing:.32em; color:#7a5f33; }
.consult .sa10-eyebrow { color:#c9ae7e; }
/* 탑바 · 헤더 바 (로고는 원본 그대로) */
html.sa10 .topbar { background:var(--ink); color:#ede6dc; z-index:60; height:36px; font-size:13px; letter-spacing:.1em; line-height:16px; } /* 10/17: 13px · 위아래 10px = 36px */
html.sa10 .nav { top:calc(36px + env(safe-area-inset-top, 0px)); }
html.sa10 .nav.is-scrolled { top:env(safe-area-inset-top, 0px); } /* 스크롤하면 헤더 바가 맨 위에 붙음 */
html.sa10 .nav-pill { width:100% !important; max-width:none !important; margin:0 !important; height:88px !important; padding:0 max(20px, calc((100% - 1240px) / 2)) !important; /* 스크롤바를 뺀 폭 기준 → 본문 좌우선과 일치 */
background:var(--bg) !important; box-shadow:none !important; border-bottom:1px solid #ddd3c5; -webkit-backdrop-filter:none; backdrop-filter:none; }
/* 로고: 원본 심볼 + 10/17 SÉOUL ATELIER 를 한 덩어리로 (보조 한자명은 숨김) · 심볼은 S보다 살짝 크게, 가운데 정렬 */
html.sa10 .logo { gap:11px; align-items:center; }
html.sa10 .logo svg { width:16px !important; height:20px !important; color:#7a5f33 !important; margin:0; transform:translateY(-1.5px); } /* 글자(대문자) 높이의 가운데에 맞춤 */
html.sa10 .logo-type { align-items:center; }
html.sa10 .logo-en { font-family:"Cormorant Garamond",serif !important; font-weight:500 !important; text-transform:uppercase; font-size:24px !important; letter-spacing:.26em !important; margin-right:-.26em; line-height:30px !important; color:#1c1a17 !important; }
html.sa10 .logo-ko { display:none !important; }
@media (max-width:959px) { html.sa10 .logo-en { font-size:18px !important; line-height:24px !important; } html.sa10 .logo svg { width:12px !important; height:15px !important; } html.sa10 .logo { gap:8px; } }
html.sa10 .nav-right .btn { background:transparent !important; color:var(--ink) !important; border:1px solid #a88b5c; padding:0 22px; letter-spacing:.08em; }
html.sa10 .nav-right .btn .ico { display:none; }
/* 히어로: 10/17 시안 그대로 — 배너(위아래 40 + 내용 240), 왼쪽 글 · 오른쪽 물빛, 버튼 없음 */
html.sa10 .hero { min-height:0 !important; display:block !important; padding:calc(var(--sa10-top) + 40px) 0 40px !important; background:#f7f3ee; }
html.sa10 .hero::after { display:none !important; }
html.sa10 .hero-video { display:none !important; }
.sa10-bg { position:absolute; left:0; right:0; top:var(--sa10-top); width:100%; height:calc(100% - var(--sa10-top)); z-index:-1; display:block; }
html.sa10 .hero-inner { width:var(--wrap) !important; margin:0 auto !important; padding:0 !important; min-height:240px; display:flex !important; flex-direction:column; justify-content:center; gap:14px; }
html.sa10 .hero-inner .sa10-eyebrow { margin:0; font-size:15px; letter-spacing:.32em; }
html.sa10 .hero h1 { margin:0 !important; font-size:clamp(46px, 4.4vw, 64px) !important; line-height:1.25 !important; white-space:nowrap; }
html.sa10 .hero h1 .line { display:inline-block !important; padding-bottom:0; }
html.sa10 .hero-desc { margin:0 !important; font-size:17px !important; font-weight:300; line-height:1.85; color:#4a453f !important; max-width:460px; }
html.sa10 .hero-cta { display:none !important; }
/* 히어로 문구 가운데 정렬 */
html.sa10 .hero-inner { align-items:center; text-align:center; }
html.sa10 .hero-inner .sa10-eyebrow { margin-right:-.32em; } /* 자간만큼 오른쪽으로 밀리는 것 보정 */
html.sa10 .hero-desc { margin-inline:auto !important; }
@media (max-width:959px) {
/* 모바일: 위쪽 136px에 물빛이 보이고 그 아래 글 */
html.sa10 .hero { padding:calc(var(--sa10-top) + 136px) 0 28px !important; }
html.sa10 .hero-inner { min-height:0; padding-top:24px !important; }
html.sa10 .hero-inner .sa10-eyebrow { font-size:13px; letter-spacing:.28em; }
html.sa10 .hero h1 { font-size:30px !important; line-height:1.4 !important; white-space:normal; }
html.sa10 .hero h1 .line { display:block !important; }
html.sa10 .hero-desc { font-size:15px !important; line-height:1.8; }
}
/* 위챗 상담: PC는 헤더 오른쪽, 모바일은 오른쪽 아래 플로팅 (10/17 시안) · 하단 진행 바 안의 위챗 버튼은 숨김 */
html.sa10 .bar .bar-in > a.btn { display:none !important; }
.sa10-fab { display:none; }
@media (max-width:959px) {
html.sa10 { --sa10-top:96px; }
.sa10-fab { position:fixed; z-index:45; right:16px; bottom:calc(18px + env(safe-area-inset-bottom, 0px));
display:flex; align-items:center; gap:8px; height:48px; padding:0 18px 0 16px; border-radius:24px;
background:#1c1a17; color:#f7f3ee; font-size:14px; letter-spacing:.02em; text-decoration:none;
box-shadow:0 6px 18px rgba(28,26,23,.22); transition:bottom .6s cubic-bezier(.32,.72,0,1), opacity .4s ease; }
.sa10-fab svg { width:18px; height:18px; color:#c9ae7e; }
html.sa10 .bar:not(.away) ~ .sa10-fab { bottom:calc(var(--sa10-bar-h, 72px) + 10px + env(safe-area-inset-bottom, 0px)); } /* 하단 진행 바가 올라오면 그 위로 */
html.sa10-intro-on .sa10-fab { opacity:0; } /* 탑바 32 + 헤더 64 */
html.sa10 .topbar { height:32px; font-size:12px; letter-spacing:.08em; line-height:14px; }
html.sa10 .nav { top:calc(32px + env(safe-area-inset-top, 0px)); }
html.sa10 .nav-pill { height:64px !important; }
html.sa10 .hero h1 { white-space:normal; }
}
/* 인트로: 솔리드 배경 → 글자 한 자씩 → 화면이 위로 걷힘 */
.sa10-intro { position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; background:#1c1a17; color:#f7f3ee; will-change:transform; cursor:pointer; }
.sa10-intro .in { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; will-change:transform,opacity; }
.sa10-intro .en { margin:0 -.28em 0 0; font-family:"Cormorant Garamond",serif; font-weight:500; font-size:clamp(30px,6.4vw,76px); line-height:1.15; letter-spacing:.28em; }
.sa10-intro .ln { display:inline-flex; overflow:hidden; padding-bottom:.08em; }
.sa10-intro .ln > span { display:inline-block; transform:translate3d(0,110%,0); will-change:transform; backface-visibility:hidden; }
.sa10-intro .ln > .gap { width:.4em; transform:none; }
.sa10-intro .zh { margin:0 -.5em 0 0; font-family:"Noto Serif SC","Noto Serif KR",serif; font-weight:500; font-size:clamp(11px,1.1vw,14px); letter-spacing:.5em; color:#c9ae7e; opacity:0; }
/* 원본 심볼: 선이 그려지고 별이 반짝 */
.sa10-intro .mark { width:44px; height:55px; margin-bottom:10px; color:#c9ae7e; overflow:visible; }
.sa10-intro .mark g path { stroke-dasharray:1; stroke-dashoffset:1; }
.sa10-intro .mark .star { opacity:0; transform:scale(.4); transform-origin:24px 22px; transform-box:view-box; }
.sa10-intro.play .mark g path { animation:sa10-draw 1s cubic-bezier(.65,0,.35,1) both; }
.sa10-intro.play .mark g path:nth-child(2) { animation-delay:.08s; }
.sa10-intro.play .mark g path:nth-child(3) { animation-delay:.22s; }
.sa10-intro.play .mark g path:nth-child(4) { animation-delay:.3s; }
.sa10-intro.play .mark g path:nth-child(5) { animation-delay:.38s; }
.sa10-intro.play .mark g path:nth-child(6) { animation-delay:.1s; }
.sa10-intro.play .mark .star { animation:sa10-star-a .7s cubic-bezier(.22,.61,.36,1) .75s both; }
@keyframes sa10-draw { to { stroke-dashoffset:0; } }
@keyframes sa10-star-a { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:none; } }
.sa10-intro.play .ln > span { animation:sa10-char .9s cubic-bezier(.22,.61,.36,1) both; animation-delay:calc(var(--i) * 45ms + .45s); }
.sa10-intro.play .zh { animation:sa10-sub .8s ease 1.3s both; }
@keyframes sa10-char { to { transform:translate3d(0,0,0); } }
@keyframes sa10-sub { from { opacity:0; transform:translate3d(0,8px,0); } to { opacity:1; transform:none; } }
.sa10-intro.leave { transform:translateY(-100%); transition:transform 1s cubic-bezier(.76,0,.24,1); }
.sa10-intro.leave .in { transform:translate3d(0,40vh,0); opacity:0; transition:transform 1s cubic-bezier(.76,0,.24,1), opacity .6s ease; }
html.sa10 body > :is(.topbar, main, .footer), html.sa10 .nav-pill { transition:transform 1.1s cubic-bezier(.76,0,.24,1); }
html.sa10.sa10-intro-on body > :is(.topbar, main, .footer), html.sa10.sa10-intro-on .nav-pill { transform:translateY(12vh); }
html.sa10 .hero-inner > * { transition:opacity .9s ease, transform 1.1s cubic-bezier(.22,.61,.36,1) !important; }
html.sa10 .hero-inner > :nth-child(1) { transition-delay:.45s !important; }
html.sa10 .hero-inner > :nth-child(2) { transition-delay:.6s !important; }
html.sa10 .hero-inner > :nth-child(3) { transition-delay:.78s !important; }
html.sa10 .hero-inner > :nth-child(4) { transition-delay:.94s !important; }
html.sa10.sa10-intro-on .hero-inner > * { opacity:0 !important; transform:translateY(22px) !important; }
/* ================= 본문 정리 (10/19) ================= */
/* 히어로 → 본문 자연스럽게: 물빛이 히어로 아래로 조금 더 내려와 바탕색으로 사라지고, '시술 찾기'가 그 위에서 본문을 시작 */
@media (min-width:960px) {
html.sa10 .hero { overflow:visible !important; padding:calc(var(--sa10-top) + 96px) 0 96px !important; }
html.sa10 .hero-inner { min-height:520px; } /* 히어로 문구 ↔ 시술 찾기 간격 40px 줄임 */
html.sa10 .sa10-bg { height:calc(100% - var(--sa10-top) + 160px); -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 300px), transparent 100%); mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 300px), transparent 100%); }
html.sa10 .find { position:relative; z-index:1; padding-top:56px !important; }
html.sa10 .find .sec-head { margin-bottom:72px; }
html.sa10 .find .sec-head h2 { font-size:clamp(30px,2.6vw,38px) !important; line-height:1.3 !important; }
html.sa10 .find .sec-head p { font-size:17px; }
/* PC: '다음' 버튼 없이 스크롤로 진행 */
html.sa10 .btn.next { display:none !important; }
/* PC: 왼쪽 질문 영역 고정(sticky) 해제 */
html.sa10 .ch-q { position:static !important; top:auto !important; }
}
/* 선택한 것만 또렷하게: 고른 칸은 진하게 + 금색 체크, 나머지는 한 톤 물러남 */
html.sa10 .day-chip { position:relative; transition:opacity .3s ease, background-color .35s, color .35s, box-shadow .35s ease; }
html.sa10 .day-chip[aria-pressed="true"]::after {
content:"✓"; position:absolute; top:10px; right:10px; width:22px; height:22px; display:grid; place-items:center;
border-radius:50%; background:#c9ae7e; color:#1c1a17; font:600 12px/1 "Noto Sans KR",sans-serif; }
html.sa10 .day-chips:has([aria-pressed="true"]) .day-chip:not([aria-pressed="true"]) { opacity:.45; }
html.sa10 .day-chips .day-chip:hover { opacity:1; }
html.sa10 .r-row:not([aria-checked="true"]) .rn { color:#5e554a; }
html.sa10 .ch-q .ch-a.on { background:#1c1a17; }
/* 질문 영역: 금색 큰 'Q&A'를 제목 뒤에 겹쳐 두고, 맨 아래 여백 넉넉히 */
html.sa10 .worry { padding-bottom:clamp(140px, 14vw, 220px) !important; }
html.sa10 .worry .wrap { position:relative; }
html.sa10 .worry .wrap::before { content:"Q&A"; position:absolute; z-index:0; left:-.04em; top:-.62em; font-family:"Cormorant Garamond",serif; font-weight:500;
font-size:clamp(120px, 15vw, 230px); line-height:1; letter-spacing:.02em; color:#c9ae7e; opacity:.38; pointer-events:none; }
html.sa10 .worry h2 { position:relative; z-index:1; }
/* 구분선 최소화: 목록 줄·푸터 줄·헤더 아래 줄·이중 테두리 없앰 (간격으로 구분) */
html.sa10 .w-row, html.sa10 .w-row:first-child { box-shadow:none !important; padding:22px 0 !important; }
html.sa10 .foot-row { box-shadow:none !important; }
html.sa10 .nav-pill { border-bottom:0 !important; }
html.sa10 .nav.is-scrolled .nav-pill { box-shadow:0 10px 30px -22px rgba(28,26,23,.45) !important; }
html.sa10 .shell { padding:0 !important; background:transparent !important; box-shadow:none !important; }
html.sa10 .step { background:transparent !important; box-shadow:none !important; padding-left:0 !important; }
/* 사진 출처: 접어서 작게 */
html.sa10 .credits { margin-top:24px; font-size:12px; color:var(--dark-muted); }
html.sa10 .credits summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; }
html.sa10 .credits summary::-webkit-details-marker { display:none; }
html.sa10 .credits summary::after { content:"+"; font-size:13px; }
html.sa10 .credits[open] summary::after { content:"−"; }
html.sa10 .credits p { margin-top:10px; max-width:62em; line-height:1.7; }
/* 물빛 전체를 옅고 살짝 흐리게 → 글 받침 없이도 잘 읽힘 */
html.sa10 .sa10-bg { opacity:.62; filter:blur(7px) saturate(1.1); transform:scale(1.04); } /* 크게 번진 금빛 · 가장자리 블러 비침 방지로 살짝 확대 */
/* 시술 찾기 제목도 가운데 */
html.sa10 .find .sec-head { justify-items:center; text-align:center; }
html.sa10 .find .sec-head p { margin-inline:auto; }
/* 인트로 초대 코드: 로고가 다 나온 뒤 아래에 입력칸이 떠오름 → 맞으면 화면이 위로 걷힘 */
.sa10-intro { cursor:default; }
.sa10-intro .in { transition:transform .9s cubic-bezier(.22,.61,.36,1); }
.sa10-intro.ask .in { transform:translateY(-56px); }
.sa10-intro .gate { position:absolute; left:50%; top:50%; width:min(360px, calc(100vw - 48px)); transform:translate(-50%, 92px); pointer-events:none;
display:flex; flex-direction:column; align-items:center; gap:14px; }
.sa10-intro.ask .gate { pointer-events:auto; }
.sa10-intro.leave .gate { opacity:0; transition:opacity .3s ease; }
/* 등장 순서: 로고가 올라가기 시작(0s) → 안내 문구(.25s) → 밑줄이 왼쪽에서 오른쪽으로 그려짐(.5s, 심볼과 같은 곡선) → 입력칸·화살표(1.1s) */
.sa10-intro .g-label, .sa10-intro .g-input, .sa10-intro .g-go, .sa10-intro .g-msg { opacity:0; transform:translateY(10px); transition:opacity .7s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.sa10-intro.ask .g-label { opacity:1; transform:none; transition-delay:.25s; }
.sa10-intro.ask .g-input, .sa10-intro.ask .g-go, .sa10-intro.ask .g-msg { opacity:1; transform:none; transition-delay:1.1s; }
.sa10-intro .g-label { font:400 13px/1.4 "Noto Sans KR","Noto Sans SC",sans-serif; letter-spacing:.06em; color:#cfc6b9; }
.sa10-intro .g-row { position:relative; width:100%; display:flex; align-items:center; gap:8px; }
.sa10-intro .g-row::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#c9ae7e; opacity:.6; transform:scaleX(0); transform-origin:left center; transition:transform 1s cubic-bezier(.65,0,.35,1), opacity .3s; }
.sa10-intro.ask .g-row::after { transform:scaleX(1); transition-delay:.5s, 0s; }
.sa10-intro .g-row:focus-within::after { opacity:1; }
.sa10-intro .g-input { flex:1; min-width:0; height:48px; padding:0 0 0 40px; border:0; outline:0; background:transparent; color:#f7f3ee; text-align:center;
font:500 18px/1 "Cormorant Garamond",serif; letter-spacing:.32em; text-transform:uppercase; }
.sa10-intro .g-input::placeholder { color:rgba(237,230,220,.32); letter-spacing:.28em; font-size:14px; }
.sa10-intro .g-go { width:32px; height:32px; display:grid; place-items:center; border:0; background:transparent; color:#c9ae7e; cursor:pointer; transition:opacity .7s ease, transform .9s cubic-bezier(.22,.61,.36,1); } /* 입력칸과 같이 1.1초 뒤 등장 */
.sa10-intro .g-go svg { width:16px; height:16px; }
.sa10-intro.ask .g-go:hover { transform:translateX(3px); transition-delay:0s; }
.sa10-intro .g-msg { min-height:18px; font:400 13px/1.4 "Noto Sans KR","Noto Sans SC",sans-serif; color:#c9ae7e; }
.sa10-intro .gate.ok .g-row::after { opacity:1; }
.sa10-intro .gate.ok .g-go { transform:scale(1.15); }
.sa10-intro .gate.shake .g-row { animation:sa10-shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes sa10-shake { 15%, 85% { transform:translateX(-2px); } 30%, 70% { transform:translateX(5px); } 45%, 55% { transform:translateX(-7px); } }
.sa10-intro.ask.leave .in { transform:translate3d(0,40vh,0); }
/* 블러로 생기는 좌우 색 띠(밴딩)를 아주 고운 노이즈로 풀어 줌 */
html.sa10 .hero::before { content:""; position:absolute; left:0; right:0; top:var(--sa10-top); height:calc(100% - var(--sa10-top)); z-index:0; pointer-events:none; opacity:.22; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 300px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 300px), transparent); }
html.sa10 .hero-inner { position:relative; z-index:1; }
/* 인원·일정 칸: 마우스를 올려도 들썩이지 않게 (색만 살짝) */
html.sa10 .day-chip:hover, html.sa10 .day-chip:active { transform:none !important; }
@media (min-width:960px) {
/* PC: 왼쪽 질문 아래 '선택한 답' 표시 제거 (오른쪽 선택 상태로 충분) */
html.sa10 .ch-q .ch-a { display:none !important; }
}
/* 호버: 들썩임 대신 제자리에서 금색 테두리 + 흰 바탕으로 또렷하게 */
@media (hover:hover) {
html.sa10 .day-chip:not([aria-pressed="true"]):not([aria-checked="true"]):hover { background:#fff !important; box-shadow:inset 0 0 0 1px #c9ae7e, 0 12px 28px -20px rgba(122,95,51,.45) !important; opacity:1; }
}
/* 인트로가 걷힌 뒤: 히어로 문구(0.45~0.78초) → '시술 찾기' 제목(1.1초) → 안내 문구(1.28초) 순서로 떠오름 */
html.sa10 .find .sec-head > * { transition:opacity .9s ease, transform 1.1s cubic-bezier(.22,.61,.36,1), filter .9s ease !important; }
html.sa10 .find .sec-head > :nth-child(1) { transition-delay:1.0s !important; }
html.sa10 .find .sec-head > :nth-child(2) { transition-delay:1.15s !important; }
html.sa10 .find .sec-head > :nth-child(3) { transition-delay:1.3s !important; }
html.sa10.sa10-intro-on .find .sec-head > * { opacity:0 !important; transform:translateY(22px) !important; }
/* 선택된 칸은 호버해도 그대로 (혼자/단체가 흰색으로 바뀌던 문제) — 일정 칸과 동일 */
/* 얼굴 부위 알약 · 시술 칩: 들썩임 대신 금색 테두리 (다른 선택지와 같은 호버 방식) */
@media (hover:hover) {
html.sa10 .pill:hover { transform:none !important; }
html.sa10 .pill:not([aria-pressed="true"]):hover { box-shadow:inset 0 0 0 1px #c9ae7e, 0 8px 20px -14px rgba(122,95,51,.45) !important; }
html.sa10 .t-chip:not([aria-pressed="true"]):hover { box-shadow:inset 0 0 0 1px #c9ae7e !important; }
}
/* 시술 찾기 선택지: 단계가 보이면 0.07초 간격으로 차례로 떠오름 */
html.sa10 .sa10-wait { opacity:0 !important; }
html.sa10 .sa10-rise { animation:sa10-opt .8s cubic-bezier(.22,.61,.36,1) backwards; animation-delay:calc(var(--si, 0) * 70ms + 120ms); }
@keyframes sa10-opt { from { opacity:0; transform:translateY(16px); } }
/* 04 고민 부위로 찾기 — 10/17 시안처럼: 일러스트 배경이 패널과 하나로, 안내는 한 줄, 부위 버튼은 금색 점 + 얇은 테두리 */
html.sa10 .face-panel { background:transparent; padding:28px 40px; gap:8px; }
html.sa10 .face-map img { /* 일러스트 네 가장자리를 패널 색으로 서서히 녹여 경계가 안 보이게 */
-webkit-mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
mask-composite:intersect; }
html.sa10 .pill { height:30px; padding:0 12px 0 10px; display:inline-flex; align-items:center; gap:6px; background:#fff; border-radius:15px !important;
box-shadow:inset 0 0 0 1px #bfb2a0 !important; font-size:13px; color:#1c1a17; }
html.sa10 .pill::before { content:""; width:6px; height:6px; border-radius:50%; background:#8c6e4e; flex:none; }
html.sa10 .pill[aria-pressed="true"] { background:#1c1a17; color:#f7f3ee; box-shadow:none !important; }
html.sa10 .pill[aria-pressed="true"]::before { background:#c9ae7e; }
html.sa10 .pill.has-pick:not([aria-pressed="true"]) { color:#7a5f33; box-shadow:inset 0 0 0 1px #a88b5c, 0 0 0 2px rgba(168,139,92,.18) !important; }
@media (hover:hover) { html.sa10 .pill:not([aria-pressed="true"]):hover { box-shadow:inset 0 0 0 1px #c9ae7e, 0 8px 20px -14px rgba(122,95,51,.45) !important; } }
/* 부위를 고르기 전: '고민 부위를 선택해 주세요' 한 줄만 (보조 설명·라벨 숨김) */
html.sa10 .concern h3 { font-size:clamp(22px, 1.8vw, 26px) !important; line-height:1.4 !important; }
html.sa10 .concern:has(#concernChips:empty) .lab, html.sa10 .concern:has(#concernChips:empty) .hint { display:none; }
html.sa10 .concern:has(#concernChips:empty) h3 { font-size:20px !important; color:#5e554a; }
@media (min-width:960px) { html.sa10 .concern:has(#concernChips:empty) { padding-left:40px; } }
/* 질문 목록 버튼: 같은 너비 · 같은 색 (얇은 테두리 버튼), 마우스를 올리면 검정으로 채워짐 */
html.sa10 .w-row .btn { width:220px; height:48px; justify-content:space-between; padding:0 18px 0 22px !important; gap:12px;
background:transparent !important; color:var(--ink) !important; box-shadow:inset 0 0 0 1px rgba(28,26,23,.55) !important; transition:background-color .3s, color .3s, box-shadow .3s; }
html.sa10 .w-row .btn .ico { width:18px; height:18px; color:inherit; }
@media (hover:hover) { html.sa10 .w-row .btn:hover { background:var(--ink) !important; color:#fff !important; box-shadow:inset 0 0 0 1px var(--ink) !important; } }
@media (max-width:959px) { html.sa10 .w-row .btn { width:100%; } }
/* 부위 버튼: 금색 점 없이 얇은 테두리 알약만 */
html.sa10 .pill::before { display:none !important; content:none !important; }
html.sa10 .pill { padding:0 13px !important; }
/* 04 고민: 탭과 '선택한 시술' 줄을 10/17 시안처럼 단순하게 — 각진 흑백 탭 · 상자 없는 한 줄 */
html.sa10 .seg { padding:0 !important; background:#fff !important; box-shadow:inset 0 0 0 1px #1c1a17; }
html.sa10 .seg-thumb { top:0 !important; bottom:0 !important; left:0 !important; width:50% !important; background:#1c1a17 !important; box-shadow:none !important; }
html.sa10 .seg button { height:48px; color:#1c1a17; font-weight:400; }
html.sa10 .seg button[aria-selected="true"] { color:#f7f3ee; font-weight:400; }
html.sa10 .tray { min-height:0; padding:4px 0 !important; background:transparent !important; gap:10px; }
html.sa10 .tray-label { font-size:13px; letter-spacing:.04em; color:#5e554a; }
html.sa10 .count { min-width:0; height:auto; padding:0; background:transparent !important; color:#5e554a; font-size:13px; font-weight:400; }
html.sa10 .tray-empty { display:none; } /* 고르기 전엔 '선택한 시술 0'만 */
html.sa10 .mini { height:32px; background:#1c1a17; color:#f7f3ee; box-shadow:none; font-size:13px; }
html.sa10 .mini svg { color:#c9ae7e; }
/* 물빛 위·아래 가장자리: 블러 때문에 생기는 띠(줄)를 마스크로 지움 */
@media (min-width:960px) {
html.sa10 .sa10-bg { -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 300px), transparent 100%); mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 300px), transparent 100%); }
}
/* ================= 모바일 정리 ================= */
@media (max-width:959px) {
/* 히어로 아래 줄 제거: 물빛 가장자리를 위아래로 녹임 */
html.sa10 .sa10-bg { -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 55%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0, #000 55%, transparent 100%); }
html.sa10 .hero::before { display:none; }
/* 첫 화면에서 '01 인원'까지 보이게: 히어로 위 물빛 여백·시술 찾기 위 여백 줄임 */
html.sa10 .hero { padding-top:calc(var(--sa10-top) + 96px) !important; padding-bottom:20px !important; }
html.sa10 .find { padding-top:40px !important; } /* 히어로 문구와 '시술 찾기' 사이 조금 더 */
html.sa10 .find .sec-head { justify-items:start; text-align:left; margin-bottom:28px; gap:8px; }
html.sa10 .find .sec-head p { margin-inline:0; }
html.sa10 .ch { gap:16px !important; }
html.sa10 .ch-q { gap:8px !important; }
/* 글자 크기 체계 (10/17 모바일 기준): 섹션 제목 24 · 단계 질문 20 · 목록 질문 18 · 본문 15 · 라벨 13 */
html.sa10 .find .sec-head h2, html.sa10 .worry h2, html.sa10 .consult h2 { font-size:24px !important; line-height:1.4 !important; }
html.sa10 .ch h3 { font-size:20px !important; line-height:1.4 !important; }
html.sa10 .w-row h3 { font-size:18px !important; line-height:1.4 !important; }
html.sa10 .find .sec-head p, html.sa10 .ch-q > p:not(.ch-a), html.sa10 .w-row p, html.sa10 .consult .lead, html.sa10 .hero-desc { font-size:15px !important; line-height:1.75 !important; }
html.sa10 .step { font-size:13px !important; }
html.sa10 .r-row .rn { font-size:16px !important; }
html.sa10 .seg button { height:44px; font-size:14px; }
html.sa10 .concern h3 { font-size:18px !important; }
html.sa10 .concern:has(#concernChips:empty) h3 { font-size:16px !important; }
html.sa10 .worry .wrap::before { font-size:96px; top:-.5em; }
html.sa10 .ch-q .ch-a:not(.on) { display:none; } /* 아직 안 고른 답 자리(빈 40px) 숨김 */
html.sa10 .days-core { padding:16px !important; }
}
/* 물빛을 헤더 뒤까지 40px 올려 시작 (블러 윗가장자리가 헤더 아래에 흐린 띠로 보이지 않게) */
html.sa10 .sa10-bg { top:calc(var(--sa10-top) - 40px) !important; }
@media (min-width:960px) { html.sa10 .sa10-bg { height:calc(100% - var(--sa10-top) + 200px) !important; } }
@media (max-width:959px) { html.sa10 .sa10-bg { height:calc(100% - var(--sa10-top) + 40px) !important; } }
html.sa10 .nav-pill { position:relative; z-index:2; }
/* ===== 명품 컨셉 정리 (점검 결과) ===== */
/* 카드의 크고 부드러운 그림자(앱 느낌) → 얇은 선 한 줄 */
html.sa10 .core { box-shadow:inset 0 0 0 1px rgba(28,26,23,.08) !important; }
html.sa10 .trip { box-shadow:inset 0 0 0 1px rgba(28,26,23,.14) !important; }
html.sa10 .btn.block { box-shadow:inset 0 0 0 1px rgba(28,26,23,.14) !important; }
/* 회복 안내 박스: 초록(팔레트 밖) → 크림·금 톤 */
html.sa10 .c-trip { background:#f3ede2 !important; color:#5e554a !important; }
html.sa10 .c-trip svg { color:#a88b5c; }
html.sa10 .card.dark .c-trip { background:#2a2620 !important; color:#e2d6c0 !important; }
html.sa10 .gl-cell b.ok { color:#7a5f33 !important; }
/* 언어 메뉴: 둥근 모서리 → 각지게 */
html.sa10 .lang-menu, html.sa10 .lang-menu button { border-radius:0 !important; }
/* 선택 체크 배지: 둥근 원 → 작은 정사각 */
html.sa10 .day-chip[aria-pressed="true"]::after { border-radius:0 !important; width:20px; height:20px; }
/* ===== 모바일: 선택한 답 다시 보여주기 제거 · '다음'은 플로팅 ===== */
@media (max-width:959px) {
html.sa10 .ch-q .ch-a { display:none !important; }
html.sa10 .btn.next { display:none !important; }
/* 하단 진행 바는 모바일에서 숨김 (플로팅 '다음'·위챗 버튼과 겹치지 않게) */
html.sa10 #bar { display:none !important; }
}
.sa10-next { display:none; }
@media (max-width:959px) {
.sa10-next { position:fixed; z-index:45; left:16px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); display:flex; align-items:center; gap:8px;
height:48px; padding:0 16px 0 18px; border-radius:24px; background:rgba(249,248,245,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
color:#1c1a17; font-size:14px; letter-spacing:.02em; box-shadow:inset 0 0 0 1px rgba(28,26,23,.55), 0 6px 18px rgba(28,26,23,.12);
opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .4s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.sa10-next.show { opacity:1; transform:none; pointer-events:auto; }
.sa10-next svg { width:16px; height:16px; }
html.sa10 .sa10-fab { bottom:calc(18px + env(safe-area-inset-bottom, 0px)) !important; } /* 진행 바를 숨겼으니 위챗 버튼은 항상 같은 줄 */
}
/* 지역 목록: 지하철 아이콘 + 노선 번호 표시는 sa13.css (처음 오는 외국인이 역 안내판과 같은 모양으로 바로 알아보게) */
@media (max-width:959px) {
/* 고민 부위: 일러스트를 카드 폭 가득 → 부위 버튼끼리 붙지 않게 */
html.sa10 .face-panel { padding:4px 0 0 !important; }
html.sa10 .face-map { width:100% !important; max-width:360px; }
html.sa10 .concern { padding:4px 4px 8px !important; }
html.sa10 .concern:has(#concernChips:empty) { padding-left:4px !important; text-align:center; }
/* 병원 카드: 모두 같은 너비 */
html.sa10 .cards { align-items:stretch !important; }
html.sa10 .cards > .card { width:100% !important; align-self:stretch !important; }
}
/* 칩·알약 등 등장 모션(GSAP)이 있는 요소는 transform 에 CSS 전환을 걸지 않음 → 모션이 중간에 멈춰 줄이 어긋나는 문제 방지 */
html.sa10 .t-chip, html.sa10 .mini, html.sa10 .pill, html.sa10 .r-row { transition-property:background-color, color, box-shadow, opacity !important; }
/* 히어로 아래 심볼: 본문(시술 찾기)과 살짝 분리하는 장식 */
.sa10-mark { display:flex; justify-content:center; width:100%; margin:0 0 28px; }
.sa10-mark svg { width:22px; height:28px; color:#a88b5c; }
html.sa10 .find .sec-head { justify-items:center; }
@media (max-width:959px) { .sa10-mark { margin:4px 0 22px; } .sa10-mark svg { width:18px; height:23px; } html.sa10 .find .sec-head { justify-items:start; } }
/* 직접 조정: 글자와 스테퍼 사이 여유 */
html.sa10 .trip > span:first-child { margin-right:14px; }
/* 일정 미선택: 숫자·단위 대신 '선택' (중국어에서 '—天'이 '一天(1일)'처럼 보이던 문제) */
html.sa10 .trip .val.is-empty > * { display:none !important; }
html.sa10 .trip .val.is-empty::before { content:attr(data-empty); font-size:14px; color:#8a8178; letter-spacing:.04em; }
/* 선택한 시술 칩: 원래 디자인(흰 바탕 + 금색 테두리) */
html.sa10 .mini { background:#fff !important; color:#1c1a17 !important; box-shadow:inset 0 0 0 1px #a88b5c !important; height:32px; padding:0 8px 0 12px !important; font-size:13px; }
html.sa10 .mini svg { color:#8a8178 !important; }
@media (max-width:959px) {
/* 원래 디자인: 모바일은 '전체 해제' 없이 칩 한 줄을 옆으로 넘겨 보기 */
html.sa10 .tray .clear { display:none !important; }
html.sa10 .tray-chips { flex:1; }
/* 모바일 헤더: 원래 디자인 — 심볼 없이 SÉOUL ATELIER + 아래 작은 서브 문구 */
html.sa10 .logo svg { display:none !important; }
html.sa10 .logo { gap:0; }
html.sa10 .logo-type { align-items:center; }
html.sa10 .logo-en { font-size:20px !important; letter-spacing:.24em !important; margin-right:-.24em !important; line-height:24px !important; }
html.sa10 .logo-ko { display:block !important; font-family:"Noto Serif KR","Noto Serif SC",serif !important; font-weight:500 !important; font-size:10px !important; letter-spacing:.4em !important; margin:1px -.4em 0 0 !important; line-height:14px !important; color:#7a5f33 !important; }
}
/* 히어로 아래 심볼 크게 */
.sa10-mark svg { width:34px !important; height:42px !important; }
@media (max-width:959px) { .sa10-mark svg { width:28px !important; height:35px !important; } }
/* 상단: 영문 로고(SÉOUL ATELIER)만 — 심볼·서브 문구 없음 (심볼은 히어로 아래로 이동) */
html.sa10 .logo svg, html.sa10 .logo-ko { display:none !important; }
html.sa10 .logo { gap:0 !important; }
/* 헤더 높이: PC 88 → 76 · 모바일 64 → 56 */
html.sa10 { --sa10-top:112px; } /* 탑바 36 + 헤더 76 */
html.sa10 .nav-pill { height:76px !important; }
@media (max-width:959px) {
html.sa10 { --sa10-top:88px; } /* 탑바 32 + 헤더 56 */
html.sa10 .nav-pill { height:56px !important; }
}
/* PC: 스크롤해도 헤더(로고·메뉴·위챗 상담)가 숨지 않고 맨 위에 고정 */
@media (min-width:960px) { html.sa10 .nav.is-hidden { transform:none !important; } }
/* 헤더 위챗 상담: 호버 시 움직임 없이 색만 (금색 테두리 → 채움) */
html.sa10 .nav-right .btn { transform:none !important; translate:none !important; transition:background-color .3s, color .3s !important; }
@media (hover:hover) { html.sa10 .nav-right .btn:hover { background:#1c1a17 !important; color:#f7f3ee !important; border-color:#1c1a17; } }
/* 모바일: '다음'은 오른쪽 아래, 위챗 상담은 왼쪽 아래 (위치 교체) */
@media (max-width:959px) {
html.sa10 .sa10-next { left:auto !important; right:16px !important; }
html.sa10 .sa10-fab { right:auto !important; left:16px !important; }
}
/* 헤더 위치 = 남아 있는 검은 띠 높이 (스크롤과 1:1로 붙어 움직임 · 지연 전환 없음) */
html.sa10 .nav, html.sa10 .nav.is-scrolled { top:calc(var(--sa10-navtop, 36px) + env(safe-area-inset-top, 0px)) !important; transition:transform .7s cubic-bezier(.32,.72,0,1) !important; }