/* sb-account — 내 계정 쪽(가입 · 로그인 · 찾기 · 비회원 조회 · 로그인 뒤 내 계정). 시안 docs/superpowers/handoff/2026-11-06-account-mock/ 을 옮긴 것.
   종이 위(해변 없음) · IBM Plex Sans KR · 주황은 화면에 한 주장(그 화면의 으뜸 단추)만 · 오류는 벽돌색.
   규칙은 모두 .sb-acc(앱 · 아래 판) 또는 body.sb-acc-page(쪽) 아래 — 테마 · 가족 헤더와 섞이지 않게. 스프링은 sb-shop 의 springs.css(--spring · --bounce — 없으면 기본 곡선). */
body.sb-acc-page, body.sb-co-page, body.sb-cart-page, body.sb-gate-page, .sb-acc{
  --sa-paper:#FAF9F7; --sa-stage:#F3F2EE; --sa-ink:#3F4437; --sa-muted:#5E6656; --sa-faint:#757D6C;
  --sa-line:#DFE4D6; --sa-hair:rgba(63,68,55,.08); --sa-hair-2:rgba(63,68,55,.16);
  --sa-sage:#A8B594; --sa-sage-d:#5F7050; --sa-wash:#EBEFE3;
  --sa-sun:#F79B40; --sa-sun-d:#E06E20;
  --sa-err:#B4412E; --sa-err-bg:#FBF1EE;
  --sa-ft:'IBM Plex Sans KR','Noto Sans KR',-apple-system,'Apple SD Gothic Neo',sans-serif;
  --sa-fm:'JetBrains Mono',ui-monospace,monospace;
  --sa-r-card:24px; --sa-r-ctl:14px; --sa-r-in:14px;
  --sa-cta-h:96px;
  --sa-spring:var(--spring, cubic-bezier(.22,1,.36,1)); --sa-spring-t:var(--spring-t, .5s);
  --sa-bounce:var(--bounce, cubic-bezier(.22,1.2,.36,1)); --sa-bounce-t:var(--bounce-t, .45s);
}

/* ── 쪽 ── */
body.sb-acc-page{ margin:0; background:var(--sa-stage); color:var(--sa-ink); font-family:var(--sa-ft); -webkit-font-smoothing:antialiased; word-break:keep-all; }
.sb-acc-main{ display:block; min-height:60vh; padding:48px 16px 96px; box-sizing:border-box; font-family:var(--sa-ft); font-size:16px; line-height:1.6; color:var(--sa-ink); }
body.sb-acc-page .sb-acc-main > .woocommerce{ width:auto; max-width:none; margin:0; padding:0; }
@media (max-width:899.98px){
  body.sb-acc-page{ background:var(--sa-paper); }
  .sb-acc-main{ padding:0; }
  body.sb-acc-member .sb-acc-main, body.sb-acc-guest:not(.sb-acc-app) .sb-acc-main{ padding:16px 16px 48px; }
}
/* 앱 화면에서는 하단 독을 숨긴다 — 휴대폰의 아래 고정 「다음」 단추가 그 자리에 있다(주문서처럼 일에 집중하는 쪽 · 결제 쪽도 실사이트에서 독 없음) */
body.sb-acc-app #sbHdDock{ display:none !important; }

/* JS 가 서면 앱 · 아니면 우커머스 기본 양식(form-login.php 의 html.sb-acc-js) */
html.sb-acc-js .sb-acc-fallback{ display:none; }
html:not(.sb-acc-js) .sb-acc-stage{ display:none; }

/* ── 앱 바탕 리셋(이 안에서만) ── */
.sb-acc, .sb-acc *, .sb-acc *::before, .sb-acc *::after{ box-sizing:border-box; }
.sb-acc{ font-family:var(--sa-ft); font-size:16px; line-height:1.6; color:var(--sa-ink); word-break:keep-all; -webkit-text-size-adjust:100%; }
.sb-acc img{ display:block; max-width:100%; height:auto; }
.sb-acc a{ color:inherit; text-decoration:none; box-shadow:none; }
.sb-acc button, .sb-acc input, .sb-acc select{ font:inherit; color:inherit; letter-spacing:normal; text-transform:none; }
.sb-acc button{ background:none; border:0; padding:0; margin:0; cursor:pointer; box-shadow:none; border-radius:0; min-height:0; line-height:inherit; }
.sb-acc h1, .sb-acc h2, .sb-acc h3, .sb-acc p, .sb-acc ul, .sb-acc ol, .sb-acc dl{ margin:0; padding:0; }
.sb-acc h1, .sb-acc h2, .sb-acc h3{ font-family:var(--sa-ft); color:var(--sa-ink); text-transform:none; }
.sb-acc ul, .sb-acc ol{ list-style:none; }
.sb-acc li{ margin:0; }
.sb-acc .sr, .sb-acc-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sb-acc [hidden]{ display:none !important; }
.sb-acc .ic{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sb-acc .sq{ corner-shape:squircle; }
.sb-acc :focus-visible{ outline:2px solid var(--sa-ink); outline-offset:3px; border-radius:6px; }
.sb-acc .press{ transition:transform .1s ease-out, background-color .15s ease-out, box-shadow .2s ease-out; }
.sb-acc .press:active{ transform:scale(.97); }

/* ── 종이 카드 ── */
.sb-acc-stage{ display:block; }
.sb-acc .card{ position:relative; display:flex; flex-direction:column; width:100%; max-width:440px; margin:0 auto; min-height:540px; padding:28px 28px 32px; background:var(--sa-paper); border-radius:var(--sa-r-card); corner-shape:squircle;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px var(--sa-hair), 0 18px 44px -28px rgba(20,30,20,.28); }
@media (max-width:899.98px){
  .sb-acc .card{ max-width:none; min-height:calc(100svh - 56px); padding:12px 20px calc(var(--sa-cta-h) + 24px); border-radius:0; box-shadow:none; }
  /* 아래 고정 단추가 쪽 맨 끝(가족 푸터의 사업자 정보)을 가리지 않게 */
  body.sb-acc-app:has(.sb-acc .cta){ padding-bottom:var(--sa-cta-h); }
  .sb-acc .card.no-cta{ padding-bottom:40px; }
}

/* 위 알림(우커머스 — 비밀번호를 바꿨어요 등) */
.sb-acc-notices:empty, .sb-acc-notices .woocommerce-notices-wrapper:empty{ display:none; }
.sb-acc-notices{ max-width:440px; margin:0 auto 14px; }
@media (max-width:899.98px){ .sb-acc-notices{ margin:0; padding:12px 20px 0; max-width:none; } }

/* ── 머리: 뒤로 ── */
.sb-acc .head{ display:flex; align-items:center; height:44px; margin:0 0 12px -10px; }
.sb-acc .back{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; color:var(--sa-ink); }
.sb-acc .back .ic{ width:22px; height:22px; }
@media (hover:hover){ .sb-acc .back:hover{ background:var(--sa-wash); } }

/* ── 시작 ── */
.sb-acc .start{ display:flex; flex-direction:column; flex:1; align-items:center; text-align:center; padding-top:20px; }
.sb-acc .start .logo{ width:64px; height:64px; margin-bottom:18px; }
.sb-acc .start h1{ font-size:26px; font-weight:600; line-height:1.25; letter-spacing:-.02em; }
.sb-acc .start .lede{ margin-top:8px; font-size:15.5px; line-height:1.55; color:var(--sa-muted); }
.sb-acc .start .acts{ display:flex; flex-direction:column; gap:10px; width:100%; margin-top:30px; }
.sb-acc .start .links{ display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap; margin-top:22px; font-size:13.5px; font-weight:500; color:var(--sa-muted); }
.sb-acc .start .links a{ display:inline-flex; align-items:center; min-height:44px; padding:0 8px; }
.sb-acc .start .links span{ color:var(--sa-line); }
.sb-acc .start .foot{ margin-top:auto; padding-top:26px; font-size:12.5px; line-height:1.6; color:var(--sa-faint); }
.sb-acc .notice{ width:100%; margin-top:20px; padding:12px 14px; font-size:14px; line-height:1.5; font-weight:500; text-align:left; color:var(--sa-err); background:var(--sa-err-bg); border-radius:12px; }

/* 새 가게 첫 방문 안내(M039 — 전환 뒤 한동안 · MoveNotice) — 세이지 옅은 바탕 + 잉크(주황 · 파랑 없음) */
.sb-acc .move, .sb-acc-move, .sb-credit-note{ margin:0 0 18px; padding:11px 14px; font-size:13.5px; line-height:1.55; font-weight:500; text-align:left; color:var(--sa-ink, #3F4437); background:var(--sa-wash, #EBEFE3); border-radius:12px; word-break:keep-all; }
.sb-acc .start .move{ width:100%; margin:0 0 22px; }
.sb-acc .q-active .move{ margin:0 0 16px; }
.sb-acc-fallback .sb-acc-move{ max-width:900px; margin:0 auto 16px; }
.sb-credit-note{ margin:10px 0 0; }

/* ── 단추 ── */
.sb-acc .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:56px; padding:0 20px; border-radius:var(--sa-r-ctl); corner-shape:squircle;
  font-size:16.5px; font-weight:600; line-height:1.2; letter-spacing:-.005em; white-space:nowrap; text-decoration:none; }
.sb-acc .btn-sun{ background:var(--sa-sun); color:#2F2A20; }
.sb-acc .btn-sun:disabled{ background:var(--sa-wash); color:var(--sa-faint); cursor:default; }
.sb-acc .btn-ink{ background:var(--sa-ink); color:#FFF9F0; }
.sb-acc .btn-ink:disabled{ background:var(--sa-wash); color:var(--sa-faint); cursor:default; }
.sb-acc .btn-line{ background:var(--sa-paper); color:var(--sa-ink); box-shadow:inset 0 0 0 1.5px var(--sa-ink); }
.sb-acc .btn-line:disabled{ color:var(--sa-faint); box-shadow:inset 0 0 0 1.5px var(--sa-line); cursor:default; }
.sb-acc .btn-google{ background:#fff; color:#1F1F1F; box-shadow:inset 0 0 0 1px #747775; font-weight:500; }
.sb-acc .btn-google .ic{ width:20px; height:20px; stroke:none; }
.sb-acc .btn .ic{ width:18px; height:18px; }
.sb-acc .btn-s{ width:auto; min-height:44px; padding:0 16px; font-size:14.5px; border-radius:12px; }
.sb-acc .btn.is-busy{ opacity:.72; cursor:progress; }
.sb-acc .link{ display:inline-flex; align-items:center; min-height:44px; font-size:14.5px; font-weight:500; color:var(--sa-muted); text-decoration:underline; text-decoration-color:var(--sa-hair-2); text-underline-offset:4px; }
.sb-acc .link.is-strong{ color:var(--sa-ink); }

/* ── 한 번에 하나씩 묻는 흐름(토스식) ── */
.sb-acc .flow{ position:relative; display:flex; flex-direction:column; }
.sb-acc .q{ transition:transform var(--sa-spring-t) var(--sa-spring), opacity .28s ease-out, filter .28s ease-out; }
.sb-acc .q.from-top{ transform:translateY(-16px); opacity:0; filter:blur(3px); }
.sb-acc .q.from-bottom{ transform:translateY(16px); opacity:0; filter:blur(3px); }
.sb-acc .q.leave{ position:absolute; left:0; right:0; top:0; pointer-events:none; }
.sb-acc .q-active{ padding:6px 0 10px; }
.sb-acc .q-title{ display:block; font-size:24px; font-weight:600; line-height:1.3; letter-spacing:-.02em; color:var(--sa-ink); }
.sb-acc .q-sub{ margin-top:6px; font-size:14.5px; line-height:1.5; color:var(--sa-muted); }
.sb-acc .q-sub b{ font-weight:600; color:var(--sa-ink); word-break:break-all; }
.sb-acc .field{ position:relative; margin-top:22px; }
.sb-acc .in{ display:block; width:100%; height:58px; margin:0; padding:0 16px; font-size:17px; font-weight:500; line-height:normal; color:var(--sa-ink); background:#fff; border:0; border-radius:var(--sa-r-in); corner-shape:squircle;
  box-shadow:inset 0 0 0 1px var(--sa-line); transition:box-shadow .15s ease-out; -webkit-appearance:none; appearance:none; outline:none; }
.sb-acc .in::placeholder{ color:var(--sa-faint); font-weight:400; opacity:1; }
.sb-acc .in:focus, .sb-acc .in:focus-visible{ outline:none !important; box-shadow:inset 0 0 0 1.5px var(--sa-ink); }
.sb-acc .in[aria-invalid="true"]{ box-shadow:inset 0 0 0 1.5px var(--sa-err); }
.sb-acc .in.has-eye{ padding-right:56px; }
.sb-acc .eye{ position:absolute; right:6px; top:7px; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; color:var(--sa-muted); }
.sb-acc .eye .ic{ width:22px; height:22px; }
.sb-acc .help{ margin-top:10px; font-size:13.5px; line-height:1.5; letter-spacing:.005em; color:var(--sa-muted); }
.sb-acc .err{ display:block; margin-top:10px; font-size:13.5px; line-height:1.5; font-weight:500; color:var(--sa-err); }
.sb-acc .err:empty{ display:none; }
.sb-acc .err .link{ display:inline-flex; min-height:44px; color:var(--sa-ink); text-decoration-color:var(--sa-hair-2); }
.sb-acc .rules{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; }
.sb-acc .rules li{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; color:var(--sa-faint); transition:color .2s ease-out; }
.sb-acc .rules li .ic{ width:16px; height:16px; stroke-width:2.2; }
.sb-acc .rules li.is-ok{ color:var(--sa-sage-d); }

/* 답한 것 — 아래로 쌓이고, 누르면 그 자리에서 고친다 */
.sb-acc .done{ display:flex; flex-direction:column; margin-top:6px; }
.sb-acc .done-row{ position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 12px; width:100%; min-height:62px; padding:10px 0; text-align:left; border-top:1px solid var(--sa-line); }
.sb-acc .done-row .lab{ grid-column:1; font-size:12.5px; font-weight:500; letter-spacing:.01em; color:var(--sa-muted); }
.sb-acc .done-row .val{ grid-column:1; font-size:16.5px; font-weight:500; color:var(--sa-ink); word-break:break-all; }
.sb-acc .done-row .tag{ display:inline-flex; align-items:center; height:18px; margin-left:6px; padding:0 6px; border-radius:6px; font-size:11px; font-weight:600; color:var(--sa-sage-d); background:var(--sa-wash); vertical-align:2px; }
.sb-acc .done-row .edit{ grid-column:2; grid-row:1 / span 2; font-size:13px; font-weight:500; color:var(--sa-faint); }
@media (hover:hover){ .sb-acc .done-row:hover .edit{ color:var(--sa-ink); } }
.sb-acc .done-row.is-edit{ display:block; }
.sb-acc .done-row.is-edit .lab{ display:block; margin-bottom:6px; }
.sb-acc .done-row .edit-in{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.sb-acc .done-row .edit-in .in{ height:50px; font-size:16px; }
.sb-acc .done-row .edit-in .btn-s{ min-height:50px; }
.sb-acc .done-row .err{ margin-top:8px; }

/* 아래 고정 으뜸 단추(휴대폰) */
.sb-acc .cta{ margin-top:28px; }
@media (max-width:899.98px){
  .sb-acc .cta{ position:fixed; left:0; right:0; bottom:0; z-index:1010; margin:0; padding:14px 20px calc(16px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to bottom, rgba(250,249,247,0), var(--sa-paper) 36%); }
}
.sb-acc .cta .note{ margin:0 0 10px; font-size:12.5px; line-height:1.5; text-align:center; color:var(--sa-faint); }

/* ── 끝 화면 ── */
.sb-acc .fin{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:28px; }
.sb-acc .fin .mark{ display:grid; place-items:center; width:72px; height:72px; margin-bottom:22px; border-radius:50%; color:var(--sa-sage-d); background:var(--sa-wash); }
.sb-acc .fin .mark .ic{ width:34px; height:34px; stroke-width:2; }
.sb-acc .fin h1{ font-size:24px; font-weight:600; line-height:1.3; letter-spacing:-.02em; word-break:break-all; }
.sb-acc .fin .lede{ margin-top:8px; font-size:15.5px; line-height:1.55; color:var(--sa-muted); }
.sb-acc .fin .lede b{ font-weight:600; color:var(--sa-ink); word-break:break-all; }
.sb-acc .fin .masks{ margin-top:12px; font-family:var(--sa-fm); font-size:15px; line-height:1.8; color:var(--sa-ink); word-break:break-all; }
.sb-acc .fin .acts{ display:flex; flex-direction:column; align-items:stretch; gap:10px; width:100%; margin-top:30px; }
.sb-acc .fin .acts .link{ align-self:center; }
.sb-acc .fin .resend{ display:flex; flex-direction:column; align-items:center; margin-top:22px; }
.sb-acc .fin .resend .btn{ width:auto; min-width:200px; }
.sb-acc .fin .resend small{ display:block; margin-top:10px; font-size:13px; color:var(--sa-faint); }
.sb-acc .fin .resend .err{ margin-top:8px; }
.sb-acc .mono-t{ font-family:var(--sa-fm); font-weight:500; }

/* ── 아래 판(약관): 아래에서 올라오고 끌어 내려 닫는다 ── */
.sb-acc-scrim{ position:fixed; inset:0; z-index:1040; background:rgba(28,30,24,.38); opacity:0; transition:opacity .25s ease-out; }
.sb-acc-scrim.is-on{ opacity:1; }
.sb-acc-scrim[hidden], .sb-acc-sheet-wrap[hidden]{ display:none !important; }
.sb-acc-sheet-wrap{ position:fixed; left:0; right:0; bottom:0; z-index:1041; display:flex; justify-content:center; pointer-events:none; }
.sb-acc .sheet{ width:100%; max-width:480px; max-height:86dvh; overflow:auto; pointer-events:auto; padding:0 20px calc(18px + env(safe-area-inset-bottom,0px)); background:var(--sa-paper);
  border-radius:24px 24px 0 0; box-shadow:0 -14px 48px -20px rgba(20,30,20,.45); transform:translateY(105%); transition:transform var(--sa-bounce-t) var(--sa-bounce);
  touch-action:pan-y; will-change:transform; outline:none; }
.sb-acc .sheet.is-open{ transform:none; }
.sb-acc .sheet.is-drag{ transition:none; }
.sb-acc .sheet-grab{ position:sticky; top:0; z-index:2; display:flex; justify-content:center; padding:10px 0 6px; background:var(--sa-paper); cursor:grab; touch-action:none; }
.sb-acc .sheet-grab i{ width:44px; height:5px; border-radius:3px; background:#CFD4C6; }
.sb-acc .sheet-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0 4px; }
.sb-acc .sheet-h h2{ font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-.015em; }
.sb-acc .sheet-h .x{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-10px; border-radius:12px; color:var(--sa-muted); }
.sb-acc .sheet .cta{ margin-top:18px; }
.sb-acc .sheet .err{ text-align:center; }
@media (max-width:899.98px){ .sb-acc .sheet .cta{ position:static; padding:0; background:none; } }
/* 판이 열리면 뒤 화면이 살짝 밀려 들어간다 — PC 에서만(휴대폰은 아래 고정 단추가 transform 의 기준을 잃는다) */
@media (min-width:900px){
  .sb-acc-stage{ transform-origin:50% 0; transition:transform var(--sa-spring-t) var(--sa-spring); }
  body.sb-acc-sheet-open .sb-acc-stage{ transform:scale(.985) translateY(6px); }
}

/* 약관 */
.sb-acc .agree-all{ display:flex; align-items:center; gap:12px; width:100%; min-height:60px; margin-top:8px; padding:0 14px; text-align:left; background:var(--sa-wash); border-radius:14px; corner-shape:squircle; }
.sb-acc .agree-all b{ font-size:16.5px; font-weight:600; }
.sb-acc .agree{ margin-top:6px; }
.sb-acc .agree li{ display:grid; grid-template-columns:1fr auto; align-items:center; }
.sb-acc .agree label, .sb-acc .agree-all{ cursor:pointer; }
.sb-acc .agree .row{ display:flex; align-items:center; gap:12px; min-height:52px; padding:0 14px; font-size:15px; }
.sb-acc .agree .row small{ margin-right:2px; font-size:13px; font-weight:600; color:var(--sa-sage-d); }
.sb-acc .agree .row small.opt{ color:var(--sa-faint); }
.sb-acc .agree .see{ display:inline-flex; align-items:center; min-width:44px; min-height:44px; padding:0 8px; font-size:13.5px; font-weight:500; color:var(--sa-muted); text-decoration:underline; text-decoration-color:var(--sa-hair-2); text-underline-offset:4px; }
.sb-acc .cb{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.sb-acc .ck{ display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:50%; color:#fff; background:#fff; box-shadow:inset 0 0 0 1.5px #C9CFC1; transition:background-color .15s ease-out, box-shadow .15s ease-out; }
.sb-acc .ck .ic{ width:14px; height:14px; stroke-width:2.6; opacity:0; transition:opacity .12s ease-out; }
.sb-acc .cb:checked + .ck{ background:var(--sa-ink); box-shadow:none; }
.sb-acc .cb:checked + .ck .ic{ opacity:1; }
.sb-acc .cb:focus-visible + .ck{ outline:2px solid var(--sa-ink); outline-offset:3px; }

/* 조회 결과 */
.sb-acc .order{ width:100%; margin-top:26px; padding:18px 20px; text-align:left; background:#fff; border-radius:18px; corner-shape:squircle; box-shadow:inset 0 0 0 1px var(--sa-line); }
.sb-acc .order .st{ display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:0 10px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--sa-sage-d); background:var(--sa-wash); }
.sb-acc .order .st::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sa-sage); }
.sb-acc .order .no{ margin-top:10px; font-family:var(--sa-fm); font-size:13px; color:var(--sa-muted); }
.sb-acc .order .lines{ margin-top:12px; }
.sb-acc .order .lines li{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:15px; font-weight:500; }
.sb-acc .order .lines li span{ flex:none; color:var(--sa-muted); font-weight:400; }
.sb-acc .order dl{ display:grid; grid-template-columns:72px 1fr; gap:6px 12px; margin:14px 0 0; padding-top:14px; border-top:1px solid var(--sa-line); font-size:14px; }
.sb-acc .order dt{ color:var(--sa-muted); } .sb-acc .order dd{ margin:0; color:var(--sa-ink); }
.sb-acc .order .sum{ font-family:var(--sa-fm); }
.sb-acc .order .more{ margin-top:14px; font-size:13px; line-height:1.5; color:var(--sa-muted); }

/* ── 우커머스 양식(JS 꺼짐 대체 · 비밀번호 찾기 · 재설정 · 로그인 뒤 계정 정보 · 배송지)의 재질 ── */
body.sb-acc-page .woocommerce{ font-family:var(--sa-ft); color:var(--sa-ink); }
body.sb-acc-page .woocommerce h2, body.sb-acc-page .woocommerce h3{ font-family:var(--sa-ft); font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-.015em; color:var(--sa-ink); margin:0 0 14px; }
body.sb-acc-page .woocommerce a{ color:var(--sa-ink); text-decoration-color:var(--sa-hair-2); text-underline-offset:4px; }
body.sb-acc-page .woocommerce form .form-row{ margin:0 0 14px; padding:0; }
body.sb-acc-page .woocommerce form .form-row label{ display:block; margin:0 0 6px; font-size:13.5px; font-weight:500; line-height:1.5; color:var(--sa-muted); }
body.sb-acc-page .woocommerce form .form-row label.checkbox, body.sb-acc-page .woocommerce form .form-row label.woocommerce-form__label-for-checkbox{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:15px; color:var(--sa-ink); }
body.sb-acc-page .woocommerce input.input-text, body.sb-acc-page .woocommerce form .form-row input[type="text"], body.sb-acc-page .woocommerce form .form-row input[type="email"],
body.sb-acc-page .woocommerce form .form-row input[type="password"], body.sb-acc-page .woocommerce form .form-row input[type="tel"], body.sb-acc-page .woocommerce form .form-row select, body.sb-acc-page .woocommerce form .form-row textarea{
  box-sizing:border-box; width:100%; min-height:52px; padding:12px 14px; font-family:var(--sa-ft); font-size:16px; font-weight:500; color:var(--sa-ink); background:#fff; border:0; border-radius:var(--sa-r-in); corner-shape:squircle;
  box-shadow:inset 0 0 0 1px var(--sa-line); outline:none; }
body.sb-acc-page .woocommerce form .form-row input:focus, body.sb-acc-page .woocommerce form .form-row select:focus, body.sb-acc-page .woocommerce form .form-row textarea:focus{ box-shadow:inset 0 0 0 1.5px var(--sa-ink); }
body.sb-acc-page .woocommerce input[type="checkbox"]{ width:20px; height:20px; margin:0; accent-color:var(--sa-ink); }
body.sb-acc-page .woocommerce .password-input{ display:block; position:relative; }
/* 우커머스 비밀번호 보기(눈) 단추 — 누르는 곳 44(그림 22 는 가운데) */
body.sb-acc-page .woocommerce form .show-password-input{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; right:4px; padding:0; border-radius:10px; }
body.sb-acc-page .woocommerce form .password-input input[type="password"], body.sb-acc-page .woocommerce form .password-input input[type="text"]{ padding-right:52px; }
body.sb-acc-page .woocommerce button.button, body.sb-acc-page .woocommerce a.button, body.sb-acc-page .woocommerce .button{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; font-family:var(--sa-ft); font-size:16px; font-weight:600; line-height:1.2;
  color:#FFF9F0; background:var(--sa-ink); border:0; border-radius:var(--sa-r-ctl); corner-shape:squircle; text-decoration:none; cursor:pointer; box-shadow:none; }
body.sb-acc-page .woocommerce .button:hover{ background:#2F3329; color:#FFF9F0; }
body.sb-acc-page .woocommerce :focus-visible{ outline:2px solid var(--sa-ink); outline-offset:3px; }
body.sb-acc-page .woocommerce .required{ color:var(--sa-err); text-decoration:none; border:0; }
body.sb-acc-page .woocommerce-error, body.sb-acc-page .woocommerce-message, body.sb-acc-page .woocommerce-info{
  margin:0 0 14px; padding:12px 16px; list-style:none; font-size:14.5px; line-height:1.55; border:0 !important; border-radius:14px; background:var(--sa-wash) !important; color:var(--sa-ink) !important; }
body.sb-acc-page .woocommerce-error{ background:var(--sa-err-bg) !important; color:var(--sa-err) !important; }
body.sb-acc-page .woocommerce-error::before, body.sb-acc-page .woocommerce-message::before, body.sb-acc-page .woocommerce-info::before{ display:none !important; content:none !important; }   /* !important — Astra 의 .woocommerce-js 아이콘(파랑)이 내 계정 주문 쪽에서 이겼다(2026-11-08)
body.sb-acc-page .woocommerce-error li, body.sb-acc-page .woocommerce-message li{ margin:0; padding:0; list-style:none; }
body.sb-acc-page :is(.woocommerce-notices-wrapper, .woocommerce-message, .woocommerce-info, .woocommerce-error, [role="alert"]):focus{ outline:none !important; }   /* 우커머스가 알림으로 옮긴 포커스 — 브라우저 기본 파란 고리 없음(2026-11-08) */
body.sb-acc-page .woocommerce-message .button, body.sb-acc-page .woocommerce-info .button{ float:none; min-height:40px; margin:0 0 0 10px; padding:0 14px; font-size:14px; }

/* JS 꺼짐 대체 — 로그인 · 가입 두 칸(종이 카드) */
.sb-acc-fallback{ max-width:900px; margin:0 auto; }
.sb-acc-fallback .u-columns, .sb-acc-fallback #customer_login{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.sb-acc-fallback .col2-set::before, .sb-acc-fallback .col2-set::after{ display:none; content:none; }
body.sb-acc-page .sb-acc-fallback .col2-set .u-column1, body.sb-acc-page .sb-acc-fallback .col2-set .u-column2{ box-sizing:border-box; float:none; width:auto; max-width:none; min-width:0; margin:0; padding:24px; background:var(--sa-paper); border-radius:var(--sa-r-card); corner-shape:squircle; box-shadow:0 0 0 1px var(--sa-hair); }
.sb-acc-fallback form.login, .sb-acc-fallback form.register{ margin:0; padding:0; border:0; }
.sb-acc-fallback .sb-acct-consent{ margin:0 0 4px; }
.sb-acc-fallback .sb-acct-consent a{ display:inline-flex; align-items:center; min-height:44px; padding:0 4px; }
@media (max-width:899.98px){
  .sb-acc-fallback{ padding:16px; }
  .sb-acc-fallback .u-columns, .sb-acc-fallback #customer_login{ grid-template-columns:1fr; }
  body.sb-acc-page .sb-acc-fallback .col2-set .u-column1, body.sb-acc-page .sb-acc-fallback .col2-set .u-column2{ padding:20px; box-shadow:0 0 0 1px var(--sa-line); }
}

/* 비밀번호 찾기 · 재설정 쪽(우커머스 양식) — 시안의 카드처럼 */
body.sb-acc-guest:not(.sb-acc-app) .sb-acc-main > .woocommerce{ max-width:440px; margin:0 auto; padding:28px; background:var(--sa-paper); border-radius:var(--sa-r-card); corner-shape:squircle;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px var(--sa-hair), 0 18px 44px -28px rgba(20,30,20,.28); }
body.sb-acc-page .woocommerce-ResetPassword > p:first-child{ margin:0 0 18px; font-size:15.5px; line-height:1.55; color:var(--sa-muted); }
body.sb-acc-page .woocommerce-ResetPassword .form-row-first, body.sb-acc-page .woocommerce-ResetPassword .form-row-last{ float:none; width:100%; }
body.sb-acc-page .woocommerce .woocommerce-ResetPassword button.button{ width:100%; background:var(--sa-sun); color:#2F2A20; }
body.sb-acc-page .woocommerce .woocommerce-ResetPassword button.button:hover{ background:var(--sa-sun-d); color:#2F2A20; }
body.sb-acc-page .woocommerce-ResetPassword .clear{ display:none; }
@media (max-width:899.98px){
  body.sb-acc-guest:not(.sb-acc-app) .sb-acc-main > .woocommerce{ max-width:none; padding:8px 4px; background:none; box-shadow:none; border-radius:0; }
}

/* ── 로그인 뒤 내 계정 — 종이 · 토큰 · 스쿼클 ── */
body.sb-acc-member .sb-acc-main > .woocommerce{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; max-width:980px; margin:0 auto; }
body.sb-acc-member .sb-acc-main > .woocommerce::before, body.sb-acc-member .sb-acc-main > .woocommerce::after{ display:none; content:none; }   /* 우커머스 clearfix 가 칸 하나를 차지하지 않게 */
body.sb-acc-member .woocommerce-MyAccount-navigation, body.sb-acc-member .woocommerce-MyAccount-content{ float:none; width:auto; margin:0; }
body.sb-acc-member .sb-acc-main > .woocommerce > .woocommerce-notices-wrapper{ grid-column:1 / -1; }
body.sb-acc-member .woocommerce-MyAccount-navigation ul{ display:flex; flex-direction:column; gap:2px; margin:0; padding:8px; list-style:none; background:var(--sa-paper); border-radius:20px; corner-shape:squircle; box-shadow:0 0 0 1px var(--sa-hair); }
body.sb-acc-member .woocommerce-MyAccount-navigation li{ margin:0; padding:0; border:0; list-style:none; }
body.sb-acc-member .woocommerce-MyAccount-navigation li a{ display:flex; align-items:center; min-height:44px; padding:0 14px; font-size:15px; font-weight:500; color:var(--sa-muted); text-decoration:none; border-radius:12px; }
body.sb-acc-member .woocommerce-MyAccount-navigation li a:hover{ background:var(--sa-wash); color:var(--sa-ink); }
body.sb-acc-member .woocommerce-MyAccount-navigation li.is-active a{ background:var(--sa-wash); color:var(--sa-ink); font-weight:600; text-decoration:none; }
body.sb-acc-member .woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--sa-faint); }
body.sb-acc-member .woocommerce-MyAccount-content{ min-width:0; padding:28px; background:var(--sa-paper); border-radius:var(--sa-r-card); corner-shape:squircle;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px var(--sa-hair), 0 18px 44px -28px rgba(20,30,20,.28); font-size:15.5px; line-height:1.6; }
body.sb-acc-member .woocommerce-MyAccount-content > p{ margin:0 0 12px; color:var(--sa-muted); }
body.sb-acc-member .woocommerce-MyAccount-content > p strong{ color:var(--sa-ink); }
body.sb-acc-member .woocommerce-MyAccount-content table{ width:100%; border-collapse:collapse; font-size:14.5px; border:0; }
body.sb-acc-member .woocommerce-MyAccount-content table th, body.sb-acc-member .woocommerce-MyAccount-content table td{ padding:12px 8px; text-align:left; border:0; border-top:1px solid var(--sa-line); vertical-align:middle; }
body.sb-acc-member .woocommerce-MyAccount-content table thead th{ border-top:0; font-size:12.5px; font-weight:500; color:var(--sa-muted); }
body.sb-acc-member .woocommerce-MyAccount-content .woocommerce-Addresses{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
body.sb-acc-member .woocommerce-MyAccount-content .woocommerce-Address{ float:none; width:auto; padding:18px; background:#fff; border-radius:18px; corner-shape:squircle; box-shadow:inset 0 0 0 1px var(--sa-line); }
body.sb-acc-member .woocommerce-MyAccount-content .woocommerce-Address address{ font-style:normal; color:var(--sa-muted); }
body.sb-acc-member .woocommerce-MyAccount-content fieldset{ margin:18px 0; padding:18px; border:0; border-radius:18px; background:var(--sa-wash); }
body.sb-acc-member .woocommerce-MyAccount-content legend{ padding:0; font-size:15px; font-weight:600; }
body.sb-acc-member .woocommerce-MyAccount-content .form-row-first, body.sb-acc-member .woocommerce-MyAccount-content .form-row-last{ float:none; width:100%; }
body.sb-acc-member .woocommerce-MyAccount-content .clear{ display:none; }
body.sb-acc-member .woocommerce-MyAccount-content .button{ min-height:44px; padding:0 16px; font-size:14.5px; }
@media (max-width:899.98px){
  body.sb-acc-member .sb-acc-main > .woocommerce{ grid-template-columns:minmax(0,1fr); gap:12px; }
  body.sb-acc-member .woocommerce-MyAccount-navigation ul{ flex-direction:row; flex-wrap:nowrap; overflow-x:auto; padding:6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-radius:16px; }
  body.sb-acc-member .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{ display:none; }
  body.sb-acc-member .woocommerce-MyAccount-navigation li a{ white-space:nowrap; padding:0 12px; font-size:14.5px; }
  body.sb-acc-member .woocommerce-MyAccount-content{ padding:20px 18px; border-radius:20px; box-shadow:0 0 0 1px var(--sa-line); }
  body.sb-acc-member .woocommerce-MyAccount-content .woocommerce-Addresses{ grid-template-columns:1fr; }
  body.sb-acc-member .woocommerce-MyAccount-content table.shop_table_responsive thead{ display:none; }
  body.sb-acc-member .woocommerce-MyAccount-content table.shop_table_responsive tr{ display:block; padding:10px 0; border-top:1px solid var(--sa-line); }
  body.sb-acc-member .woocommerce-MyAccount-content table.shop_table_responsive td, body.sb-acc-member .woocommerce-MyAccount-content table.shop_table_responsive th{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; border:0; text-align:right; }
  body.sb-acc-member .woocommerce-MyAccount-content table.shop_table_responsive td::before{ content:attr(data-title); font-weight:500; color:var(--sa-muted); text-align:left; }
}

/* 계정 정보 아래 — 소식 메일 · 회원 탈퇴 */
.sb-acc-mine{ margin-top:28px; padding-top:22px; border-top:1px solid var(--sa-line); font-family:var(--sa-ft); color:var(--sa-ink); }
.sb-acc-mine h2{ margin:0; font-size:17px; font-weight:600; line-height:1.4; letter-spacing:-.01em; }
.sb-acc-mine p{ margin:4px 0 0; font-size:14px; line-height:1.55; color:var(--sa-muted); }
.sb-acc-mine-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sb-acc-switch{ position:relative; display:inline-flex; flex:none; align-items:center; justify-content:center; width:60px; height:44px; cursor:pointer; }
.sb-acc-switch input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.sb-acc-switch span{ position:relative; display:block; width:52px; height:32px; border-radius:16px; background:#C9CFC1; transition:background-color .2s ease-out; pointer-events:none; }
.sb-acc-switch span::after{ content:''; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(20,30,20,.3); transition:transform var(--sa-spring-t) var(--sa-spring); }
.sb-acc-switch input:checked + span{ background:var(--sa-sage-d); }
.sb-acc-switch input:checked + span::after{ transform:translateX(20px); }
.sb-acc-switch input:focus-visible + span{ outline:2px solid var(--sa-ink); outline-offset:3px; }
.sb-acc-switch input:disabled{ cursor:default; }
.sb-acc-mine-msg{ min-height:0; font-size:13.5px !important; font-weight:500; color:var(--sa-sage-d) !important; }
.sb-acc-mine-msg:empty{ display:none; }
.sb-acc-mine-msg.is-err{ color:var(--sa-err) !important; }
.sb-acc-mine-out{ margin-top:26px; padding-top:22px; border-top:1px solid var(--sa-line); }
.sb-acc-link{ display:inline-flex; align-items:center; min-height:44px; margin-top:4px; padding:0; font-family:var(--sa-ft); font-size:14.5px; font-weight:500; color:var(--sa-muted); background:none; border:0; text-decoration:underline; text-decoration-color:var(--sa-hair-2); text-underline-offset:4px; cursor:pointer; }
.sb-acc-mine-box{ margin-top:8px; padding:18px; background:var(--sa-wash); border-radius:18px; corner-shape:squircle; }
.sb-acc-mine-box ul{ margin:0; padding:0 0 0 18px; font-size:14px; line-height:1.7; color:var(--sa-ink); }
.sb-acc-mine-ok{ display:flex; align-items:center; gap:10px; min-height:44px; margin-top:10px; font-size:14.5px; cursor:pointer; }
.sb-acc-mine-ok input{ width:20px; height:20px; margin:0; accent-color:var(--sa-ink); }
.sb-acc-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; margin-top:8px; padding:0 18px; font-family:var(--sa-ft); font-size:15px; font-weight:600; border:0; border-radius:var(--sa-r-ctl); cursor:pointer; }
.sb-acc-btn-line{ color:var(--sa-err); background:var(--sa-paper); box-shadow:inset 0 0 0 1.5px var(--sa-err); }
.sb-acc-btn-line:disabled{ color:var(--sa-faint); box-shadow:inset 0 0 0 1.5px var(--sa-line); cursor:default; }
.sb-acc-mine-done{ color:var(--sa-sage-d) !important; font-weight:500; }

/* ── 접근성: 움직임 · 대비 ── */
@media (prefers-reduced-motion: reduce){
  .sb-acc .q{ transition:opacity .2s ease; }
  .sb-acc .q.from-top, .sb-acc .q.from-bottom{ transform:none; filter:none; }
  .sb-acc .sheet{ transition:opacity .2s ease; transform:none !important; opacity:0; }
  .sb-acc .sheet.is-open{ opacity:1; }
  .sb-acc-stage{ transition:none !important; } body.sb-acc-sheet-open .sb-acc-stage{ transform:none !important; }
  .sb-acc .press{ transition:none; }
  .sb-acc-switch span::after{ transition:none; }
}
@media (prefers-contrast: more){
  .sb-acc .in{ box-shadow:inset 0 0 0 1.5px var(--sa-ink); }
  .sb-acc .card{ box-shadow:0 0 0 1.5px var(--sa-ink); }
}

/* 블록 테마 꼴 알림(우커머스 notice-banner) — 같은 재질로 */
body.sb-acc-page .wc-block-components-notice-banner{ display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:12px 16px; font-family:var(--sa-ft); font-size:14.5px; line-height:1.55; color:var(--sa-ink); background:var(--sa-wash); border:0; border-radius:14px; box-shadow:none; }
body.sb-acc-page .wc-block-components-notice-banner > svg{ flex:none; width:22px; height:22px; padding:2px; border-radius:50%; fill:#fff; background:var(--sa-sage-d); }
body.sb-acc-page .wc-block-components-notice-banner.is-error{ color:var(--sa-err); background:var(--sa-err-bg); }
body.sb-acc-page .wc-block-components-notice-banner.is-error > svg{ background:var(--sa-err); }
body.sb-acc-page .wc-block-components-notice-banner:focus{ outline:none; }
body.sb-acc-page .wc-block-components-notice-banner:focus-visible{ outline:2px solid var(--sa-ink); outline-offset:3px; }

/* 제목에 옮긴 포커스(화면이 바뀐 것을 알리는 자리)는 고리 없이 */
.sb-acc h1[tabindex="-1"]:focus, .sb-acc-mine-done[tabindex="-1"]:focus{ outline:none; }