/* 공개 랜딩 5종(통합 + 서비스 4) 전용 스타일 — 2026-07-25 클로드 디자인 시안 반영.
   정본: Claude Design 프로젝트 ac821553 "업트레이딩 퍼블릭 리디자인" 2차 시안.

   시안은 클래스 없이 인라인 스타일로 그려져 있다. 그중 8회 이상 반복되는 41종만
   여기로 뽑았고, 1회성 스타일은 시안과 1:1로 대응되도록 HTML에 인라인으로 남겼다.
   그래서 시안을 다시 뽑아 교체할 때 이 파일을 크게 건드릴 일이 없다.

   회원 화면(app.css)과 토큰 이름이 일부 겹치므로 이 파일을 app.css 뒤에 로드해야 한다. */

/* ── 시안 토큰: 다크 기본 + 라이트. 라이트는 반전이 아니라 대비를 다시 잡은 값이다 ── */
:root,[data-theme="dark"]{
--bg:#0E0E10;--bg2:#121214;--bgf:#0B0B0D;--bgc:#0C0C0E;--bg-blur:rgba(14,14,16,.86);
--card:#1A1A1D;--inset:rgba(255,255,255,.03);--ntint:rgba(255,255,255,.045);--frame:#242428;
--ink:#F7F7F9;--ink2:#F2F2F4;--t85:rgba(242,242,244,.85);--t66:rgba(242,242,244,.66);--t62:rgba(242,242,244,.62);--t60:rgba(242,242,244,.6);--t55:rgba(242,242,244,.58);--t45:rgba(242,242,244,.54);--t35:rgba(242,242,244,.5);--link:#A9BAFF;--link-hover:#C9D4FF;
--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.1);--line3:rgba(255,255,255,.17);--line4:rgba(255,255,255,.32);
--shadow:0 18px 44px -22px rgba(0,0,0,.85);--shadow-lg:0 30px 60px -26px rgba(0,0,0,.95);--shadow-sm:0 0 0 0 rgba(0,0,0,0);
--brand:#5B7CFA;--brand-btn:#4C6BEE;--brand-ink:#A9BAFF;--brand-tint:rgba(91,124,250,.13);--brand-line:rgba(91,124,250,.28);--brand-glow:rgba(91,124,250,.09);--brand-faint:rgba(91,124,250,.06);
--up:#F5535E;--up-ink:#F8828A;--up-tint:rgba(245,83,94,.13);--up-line:rgba(245,83,94,.3);
--down:#4A93FF;--down-ink:#78AFFF;--down-tint:rgba(74,147,255,.13);--down-line:rgba(74,147,255,.22);
--green:#34C77B;--green-ink:#5FD79B;--green-tint:rgba(52,199,123,.13);--green-line:rgba(52,199,123,.3);
--purple:#B08CFF;--purple-ink:#C4A8FF;--purple-tint:rgba(176,140,255,.13);--purple-line:rgba(176,140,255,.3);
--amber:#F0B03F;--amber-ink:#F5C471;--amber-tint:rgba(240,176,63,.1);--amber-line:rgba(240,176,63,.3);
--ring:rgba(26,26,29,.92);--ring2:rgba(14,14,16,.95);
}
[data-theme="light"]{
--bg:#F4F4F5;--bg2:#EBEBEE;--bgf:#E8E8EB;--bgc:#FBFBFC;--bg-blur:rgba(244,244,245,.88);
--card:#FFFFFF;--inset:#F5F5F7;--ntint:rgba(23,24,29,.055);--frame:#D6D6DA;
--ink:#15161B;--ink2:#22242A;--t85:#2E3037;--t66:#3C3E45;--t62:#42444B;--t60:#46484F;--t55:#55575F;--t45:#5F6169;--t35:#666870;--link:#3A5AE0;--link-hover:#2742BC;
--line:rgba(23,24,29,.1);--line2:rgba(23,24,29,.14);--line3:rgba(23,24,29,.2);--line4:rgba(23,24,29,.35);
--shadow:0 1px 2px rgba(23,24,29,.06),0 12px 28px -16px rgba(23,24,29,.2);--shadow-lg:0 2px 4px rgba(23,24,29,.06),0 22px 48px -22px rgba(23,24,29,.28);--shadow-sm:0 1px 2px rgba(23,24,29,.05);
--brand:#4A66E8;--brand-btn:#4A66E8;--brand-ink:#3A5AE0;--brand-tint:rgba(74,102,232,.1);--brand-line:rgba(74,102,232,.3);--brand-glow:rgba(74,102,232,.08);--brand-faint:rgba(74,102,232,.05);
--up:#C4303A;--up-ink:#AF242D;--up-tint:rgba(196,48,58,.1);--up-line:rgba(196,48,58,.3);
--down:#1A63CC;--down-ink:#1A5FC4;--down-tint:rgba(31,111,224,.1);--down-line:rgba(31,111,224,.28);
--green:#14875A;--green-ink:#0E7550;--green-tint:rgba(20,135,90,.1);--green-line:rgba(20,135,90,.3);
--purple:#6D3FD4;--purple-ink:#5F31C8;--purple-tint:rgba(109,63,212,.1);--purple-line:rgba(109,63,212,.3);
--amber:#B57A0A;--amber-ink:#8A5A00;--amber-tint:rgba(181,122,10,.11);--amber-line:rgba(181,122,10,.36);
--ring:#FFFFFF;--ring2:#FFFFFF;
}

/* ── 셸 ── */
/* 시안은 전체를 감싸는 wrapper div에 배경·색을 줬다. 그 div를 걷어냈으므로 body가 받는다. */
body.lp-body {
  background: var(--bg);
  color: var(--ink2);
  overflow-x: hidden;
  font-family: -apple-system, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, sans-serif;
  letter-spacing: normal;
  line-height: normal;
}
/* 선택자 전체를 :where()로 감싸 명시도를 0으로 만든다.
   :where(svg)만 감싸면 앞의 body.lp-body 명시도가 남아 아이콘 스왑 규칙을 이겨버린다. */
:where(body.lp-body svg) { display: block; }

/* ── 시안에서 뽑은 반복 스타일 ── */
.lp-q{display:flex;align-items:center;gap:14px;padding:18px 2px;font:500 15px/1.5 -apple-system,system-ui,sans-serif;color:var(--ink2);letter-spacing:-.015em}  /* 25회 */
.lp-a{margin:0;padding:0 34px 20px 2px;font:400 14.5px/1.75 -apple-system,system-ui,sans-serif;color:var(--t62);letter-spacing:-.01em;text-wrap:pretty}  /* 25회 */
.lp-dt{flex:0 0 auto;width:min(150px,100%);font:500 13.5px/1.5 -apple-system,system-ui,sans-serif;color:var(--t55);letter-spacing:-.01em}  /* 23회 */
.lp-cardp{margin:8px 0 0;font:400 14px/1.7 -apple-system,system-ui,sans-serif;color:var(--t60);letter-spacing:-.01em;text-wrap:pretty}  /* 19회 */
.lp-box{min-width:0;background:var(--card);box-shadow:var(--shadow-sm);border:1px solid var(--line);border-radius:13px;padding:20px;transition:transform .2s ease}  /* 15회 */
.lp-h2{margin:0;font:700 clamp(25px,6.4vw,33px)/1.28 -apple-system,system-ui,sans-serif;letter-spacing:-.03em;color:var(--ink)}  /* 19회 */
.lp-kicker{font:500 11px/1 'SF Mono',ui-monospace,Menlo,monospace;letter-spacing:.16em;color:var(--t45)}  /* 24회 */
.lp-drow{display:flex;flex-wrap:wrap;gap:6px 20px;padding:17px 2px;border-bottom:1px solid var(--line2)}  /* 23회 */
.lp-h3{margin:14px 0 0;font:600 16px/1.4 -apple-system,system-ui,sans-serif;letter-spacing:-.02em;color:var(--ink)}  /* 19회 */
.lp-boxa{display:block;color:inherit;background:var(--card);box-shadow:var(--shadow-sm);border:1px solid var(--line);border-radius:12px;padding:17px;transition:transform .2s ease}  /* 12회 */
.lp-note{font:400 12px/1.6 -apple-system,system-ui,sans-serif;color:var(--t45);margin:3px 0 0}  /* 23회 */
.lp-wrap{max-width:980px;margin:0 auto;padding:clamp(52px,10vw,88px) clamp(18px,4vw,28px)}  /* 24회 */
.lp-flink{font:400 13px/1.4 -apple-system,system-ui,sans-serif;color:var(--t62)}  /* 25회 */
.lp-rule{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}  /* 22회 */
.lp-navlink{font:500 12px/1 'SF Mono',ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--t66);padding:6px 2px;white-space:nowrap}  /* 12회 */
.lp-sub2{margin:6px 0 0;font:400 13px/1.65 -apple-system,system-ui,sans-serif;color:var(--t55);letter-spacing:-.01em;text-wrap:pretty}  /* 12회 */
.lp-lead36{margin:13px 0 0;max-width:36em;font:400 15px/1.7 -apple-system,system-ui,sans-serif;color:var(--t60);letter-spacing:-.01em;text-wrap:pretty}  /* 10회 */
.lp-val{font:600 14px/1.5 'SF Mono',ui-monospace,Menlo,monospace;color:var(--ink)}  /* 19회 */
.lp-khead{display:flex;align-items:center;gap:9px;margin:0 0 16px}  /* 24회 */
.lp-h3s{margin:12px 0 0;font:600 15px/1.4 -apple-system,system-ui,sans-serif;letter-spacing:-.02em;color:var(--ink)}  /* 12회 */
.lp-lead38{margin:13px 0 0;max-width:38em;font:400 15px/1.7 -apple-system,system-ui,sans-serif;color:var(--t60);letter-spacing:-.01em;text-wrap:pretty}  /* 9회 */
.lp-dd{flex:1 1 220px;min-width:0;font:400 13.5px/1.6 -apple-system,system-ui,sans-serif;color:var(--t60);letter-spacing:-.01em}  /* 10회 */
.lp-m10{font:400 10px/1 'SF Mono',ui-monospace,Menlo,monospace;color:var(--t35)}  /* 14회 */
.lp-m10w{font:500 10px/1 'SF Mono',ui-monospace,Menlo,monospace;letter-spacing:.09em;color:var(--t45)}  /* 10회 */
.lp-faqit{border-bottom:1px solid var(--line2)}  /* 25회 */
.lp-m9{font:400 9px/1 'SF Mono',ui-monospace,Menlo,monospace;color:var(--t35)}  /* 10회 */
.lp-sec2{border-top:1px solid var(--line);background:var(--bg2)}  /* 12회 */
.lp-inline{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}  /* 10회 */
.lp-f200{flex:1 1 200px;min-width:0}  /* 23회 */
.lp-dash{width:16px;height:1px;background:var(--t45);flex:0 0 auto}  /* 10회 */
.lp-sec{border-top:1px solid var(--line)}  /* 17회 */
.lp-barslot{flex:1;height:30px;position:relative}  /* 15회 */
.lp-t45{color:var(--t45)}  /* 29회 */
.lp-f1{flex:1;min-width:0}  /* 25회 */
.lp-ic{color:var(--t55);flex:0 0 auto}  /* 15회 */
.lp-fg10{display:flex;gap:10px;align-items:flex-start;min-width:0}  /* 8회 */
.lp-ics{stroke:var(--t55);flex:0 0 auto}  /* 10회 */
.lp-mw0{min-width:0}  /* 22회 */
.lp-purple{color:var(--purple-ink)}  /* 8회 */
.lp-ink{color:var(--ink)}  /* 11회 */
.lp-green{color:var(--green-ink)}  /* 8회 */

/* hover — 시안의 style-hover 속성을 CSS로 옮긴 것 */
.lp-hv1:hover{color:var(--ink2)}
.lp-hv2:hover{transform:translateY(-2px);border-color:var(--brand-line)}
.lp-hv3:hover{transform:translateY(-2px);border-color:var(--green-line)}
.lp-hv4:hover{transform:translateY(-2px);border-color:var(--purple-line)}
.lp-hv5:hover{color:var(--ink)}
.lp-hv6:hover{color:var(--ink);border-color:var(--line4)}
.lp-hv7:hover{transform:translateY(-1px);opacity:.93}
.lp-hv8:hover{color:var(--ink2);border-color:var(--line4)}
.lp-hv9:hover{transform:translateY(-2px);border-color:var(--amber-line)}
.lp-hv10:hover{transform:translateY(-1px);border-color:var(--line4);color:var(--ink)}
.lp-hv11:hover{transform:translateY(-1px);border-color:var(--line4);color:var(--ink2)}

/* ── 테마 버튼 아이콘 스왑 ── */
/* 시안은 현재 테마를 그대로 보여준다: 다크면 달, 라이트면 해.
   조건부 렌더(sc-if)를 CSS로 옮긴 것이라 JS 없이 바뀐다. */
.ic-sun { display: none; }
.ic-moon { display: block; }
[data-theme="light"] .ic-sun { display: block; }
[data-theme="light"] .ic-moon { display: none; }

/* ── 포커스 링: 키보드 이동 시 지금 어디인지 보이게 (시안에는 없던 접근성 보강) ── */
.lp-body a:focus-visible,
.lp-body summary:focus-visible,
.lp-body button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}
.lp-body summary { cursor: pointer; }

/* ── 초록우산 기부 버블: 시안에는 없지만 통합 랜딩에서 실제로 쓰는 기능이라 유지 ── */
/* app.css의 right는 회원 화면 폰 컬럼(430px) 기준이라 980px 랜딩에서는 버블이 본문
   한가운데로 올라와 차트를 가린다. 랜딩 컨테이너 오른쪽 끝에 붙도록 다시 잡는다. */
.lp-donate.donate-bubble {
  right: max(14px, calc(50vw - 980px / 2 + 14px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}
[data-theme="light"] .lp-donate.donate-bubble { box-shadow: 0 6px 18px rgba(23, 24, 29, 0.18); }

/* ── 모션 최소화 선호 시 이동 효과 제거 ── */
@media (prefers-reduced-motion: reduce) {
  .lp-body [class*="lp-hv"]:hover { transform: none; }
  .lp-donate.donate-bubble { animation: none; }
}