/* /design/styles/tokens.css */
/* ============================================================================
   SnapHolo 디자인 토큰
   ----------------------------------------------------------------------------
   생성물 — 정본은 docs/design/tokens/snapholo.tokens.json, 손으로 고치지 마라.
   다시 만들기: python scripts/build_tokens.py
   (docs/design/styles/tokens.css 와 docs/design/ds-bundle/tokens.css 는 같은 바이트다.)

   다른 CSS 파일에 hex 리터럴을 적지 마라 — 그게 v3 가 죽은 경로다.
   프레임워크 중립: 순수 CSS 커스텀 프로퍼티다. 빌드 없는 정적 HTML 은 <link> 로 읽는다.
   대비 실측은 정본 JSON 의 contrast 표에 있고 tests/test_design_tokens.py 가 다시 잰다.
   ========================================================================== */

:root {
  /* ══════════════════════════════════════════════════════════════════════════
     1층 · PRIMITIVE — 값 그 자체. 의미를 담지 않는다.
     ══════════════════════════════════════════════════════════════════════════ */

  /* 브랜드 홀로 4색 — logo.ai 마스터에서 나온 값. 새로 만들지 않는다. */
  --holo-aqua: #5bc9d5;
  --holo-iris: #8c77da;
  --holo-blossom: #ef94b8;
  --holo-amber: #ffd88e;
  --ink: #17232c; /* 브랜드 잉크 — brand/master/*.svg 의 fill 값과 동일 */

  /* 중성 램프 (hue 220) — 흰 지면 대비 실측은 contrast 표 */
  --slate-950: #1e2534;
  --slate-800: #333b4c;
  --slate-700: #4d576a;
  --slate-600: #65718b; /* 본문 최소선 */
  --slate-400: #9ca4b4; /* 비텍스트 전용 */
  --slate-300: #cacfd8;
  --slate-200: #e1e4ea;
  --slate-100: #eef0f4;
  --slate-50: #f7f8fa;
  --white: #ffffff;

  /* 아이리스 — 브랜드 보라(옛). v0 시안에 흩어져 있던 7종을 이 넷으로 수렴했다
     (#7174d4 #7c79dc #7476d3 #6e73d1 #8081dc #7777d6 #4f55b5) */
  --iris-700: #5f62cf; /* 글자로 쓸 수 있는 유일한 보라
       legacy — 2026-10-02 대표 결정 d2 — 2단계에서 민트로 */
  --iris-500: #7174d4; /* 텍스트로 쓰지 마라. 채움 전용
       legacy — 2026-10-02 대표 결정 d2 — 2단계에서 민트로 */
  --iris-300: #8b8ddc; /* 보더·밑줄 전용
       legacy — 2026-10-02 대표 결정 d2 — 2단계에서 민트로 */
  --iris-50: #f0f0ff; /* legacy — 2026-10-02 대표 결정 d2 — 2단계에서 민트로 */

  /* 상태색 — 지면·카드 양쪽에서 4.5:1 을 넘도록 낮춘 값 */
  --green-600: #3a7e63;
  --amber-700: #9f6432;
  --red-700: #b42318; /* 오류 원색 · 흰 바탕 6.57:1 */
  --red-50: #fdeceb; /* 오류 옅은 바탕 */
  --pink-700: #c01f68; /* 내림 원색 · 흰 바탕 5.77:1, 옛 차트색 #d62a76 4.72:1 대체 */

  /* 알파 — 그림자·오버레이. 색상 토큰과 섞지 않는다 */
  --alpha-card-shadow: rgba(116, 118, 216, 0.2);
  --alpha-art-shadow: rgba(41, 55, 90, 0.33);
  --alpha-text-shadow: rgba(0, 0, 0, 0.2);
  --alpha-white-strong: rgba(255, 255, 255, 0.7);
  --alpha-white-soft: rgba(255, 255, 255, 0.33);

  /* ══════════════════════════════════════════════════════════════════════════
     2층 · SEMANTIC — 화면은 이것만 쓴다.
     다크 모드를 얹을 때 재정의하는 것도 이 층뿐이다(1층은 그대로).
     ══════════════════════════════════════════════════════════════════════════ */

  /* 지면 */
  --color-bg: var(--slate-50);
  --color-surface: var(--white);
  --color-surface-sunken: var(--slate-50);

  /* 글자 — 세 단. 그 아래는 없다 */
  --color-text: var(--slate-950); /* 제목·값 */
  --color-text-secondary: var(--slate-700); /* 본문·설명 */
  --color-text-muted: #5c6880; /* 라벨·보조 */

  /* 선 */
  --color-border: var(--slate-200);
  --color-border-strong: var(--slate-300);
  --color-border-dashed: var(--slate-200);

  /* 강조 — legacy(옛 보라). 옛 화면 9개 전용 — 새 화면은 아래 브랜드 강조(민트)만 쓴다 */
  --color-accent: var(--iris-700); /* 링크·강조 텍스트 — 세 지면 모두 통과
       legacy — 2026-10-02 대표 결정 d2 — 2단계에서 민트로 */
  --color-accent-fill: var(--iris-500); /* 채움(아바타·칩) — 텍스트 아님
       legacy — 2026-10-02 대표 결정 d2 — 2단계에서 민트로 */
  --color-accent-line: var(--iris-300); /* 보더·활성 밑줄 — 텍스트 아님
       legacy — 2026-10-02 대표 결정 d2 — 2단계에서 민트로 */
  --color-accent-soft: var(--iris-50); /* 배지·노트 지면
       legacy — 2026-10-02 대표 결정 d2 — 2단계에서 민트로 */

  /* 브랜드 강조 — 민트 (2026-10-02 대표 결정 d2). 액션 채움과 텍스트 링크를 구분한다 */
  --color-brand-action-fill: #1bd3ce; /* 액션 채움 — 에메랄드 바탕. 텍스트·아이콘은 brand.action.on(흰색). */
  --color-brand-action-on: #ffffff; /* 에메랄드 액션 버튼의 텍스트·아이콘 — 흰색(2026-10-07 사용자 지시) */
  --color-brand-link-text: #00777d; /* 텍스트 링크 — 민트 글자로 작은 링크를 만들지 않고 이 진한 색을 쓴다(UI-GUIDE 03). 아이스 지면 미달 — contrast 예외 */
  --color-brand-symbol-mint: #24d5cb; /* 심볼 민트 — 심볼 위쪽 그라디언트 시작색 · 홈 강조 */

  /* 상태 */
  --color-state-known: var(--green-600);
  --color-state-uncollected: var(--amber-700);
  --color-state-live: var(--green-600);
  --color-danger: var(--red-700);
  --color-danger-soft: var(--red-50);
  --color-rise: #327055;
  --color-fall: var(--pink-700);

  /* 홀로 그라디언트 — 정의는 여기 하나뿐이다.
     허용 자리 세 곳 (README 로고 규칙 4, 2026-08-21 개정):
       ① 어두운 지면의 워드마크  ② 실제 포일 판본의 카드 표면
       ③ 상단 3px 브랜드 밴드
     그 외에 쓰지 마라. */
  --gradient-holo: linear-gradient(
    57deg,
    var(--holo-aqua),
    var(--holo-iris) 33.3%,
    var(--holo-blossom) 66.7%,
    var(--holo-amber)
  );
  --on-gradient: var(--ink); /* 그라디언트 위 글자는 잉크다. 흰 글자는 금지 — 대비 실측은 contrast 표 */

  /* 그림자 */
  --shadow-card: 0 24px 50px var(--alpha-card-shadow);
  --shadow-art-text: 0 15px 22px var(--alpha-art-shadow);

  /* ── 차트 계열색 — 마감 3종. 순서 고정, 순환 금지 ──
     색은 마감(엔티티)을 따라간다. 필터로 계열이 줄어도 남은 것의 색은 안 바뀐다.
     dataviz 검증기 실측(지면 #ffffff):
       명도대역 PASS · 채도하한 PASS · 정상시각 ΔE 20.3 PASS · 지면대비 PASS
       CVD 최악쌍 리버스↔홀로 ΔE 7.7(deutan) — 6~8 구간이라
       **선 끝 직접 라벨이 필수**다. 범례만으로는 안 된다.
     다크(지면 #191e2a): 명도대역·채도·정상시각 ΔE 17.4·지면대비 PASS / CVD 최악쌍 7.7(deutan)
       → 라이트와 같은 이유로 직접 라벨 필수 */
  --chart-finish-base: #6f5bd8;
  --chart-finish-holo: #0a97a6;
  --chart-finish-reverse: #d62a76;
  --chart-grid: var(--slate-100);
  --chart-axis: var(--slate-300);

  /* ══════════════════════════════════════════════════════════════════════════
     활자 — 서체 · 크기 · 행간 · 자간 · 굵기
     ══════════════════════════════════════════════════════════════════════════ */

  /* 서체 — IBM Plex 한 가족으로 Latin·한글·일본어·태국어를 덮는다.
     중국어(TC/SC)만 IBM Plex 에 없어 Noto 로 보충한다.
     ⚠️ 스크립트별 스택은 아래 :lang() 이 갈아 끼운다 — 한 줄로 다 나열하면
        한자가 겹쳐서 중국어가 일본어 글리프로 나온다. */
  --font-sans: "IBM Plex Sans", "IBM Plex Sans KR", "IBM Plex Sans JP", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "IBM Plex Mono", "IBM Plex Sans KR", ui-monospace, SFMono-Regular, monospace;

  /* Shared service scale: body 16, supporting text 14, captions 12; desktop/mobile headings use the same roles in every language. */
  --text-display: 3.5rem; /* 3.5rem desktop / 2rem mobile */
  --text-hero: 2rem; /* 2rem desktop / 1.625rem mobile */
  --text-h2: 1.5rem; /* 24.0px */
  --text-h3: 1.125rem; /* 18.0px */
  --text-body: 1rem; /* 16px */
  --text-data: 0.875rem; /* 14.0px */
  --text-label: 0.75rem; /* 12 — 절대 하한 */
  --text-price: 2.25rem; /* 36.0px */
  --text-price-sub: 1.25rem; /* 20.0px */
  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --tracking-display: -0.02em;
  --tracking-kicker: 0.04em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 800;
  --weight-semibold: 600;

  /* ══════════════════════════════════════════════════════════════════════════
     간격 — 4px 기반 12단. v0 시안의 padding 24종 · gap 20종을 여기 스냅했다.
     ══════════════════════════════════════════════════════════════════════════ */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-7: 2rem; /* 32px */
  --space-8: 2.5rem; /* 40px */
  --space-9: 3rem; /* 48px */
  --space-10: 4rem; /* 64px */
  --space-11: 5rem; /* 80px */
  --space-12: 6rem; /* 96px */

  /* 반경 — v0 의 5·8·9·10·12·17·26·999 를 다섯 단으로 */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* 레이아웃 */
  --layout-max: 1184px;
  --layout-pad: var(--space-7); /* 모바일(≤760px)에서 space-5 */
  --layout-pad-sm: var(--space-5);
  --topbar-height: 74px;

  /* 모션 — 150~300ms. 의미 없는 장식 애니메이션은 두지 않는다.
     들어올 때는 ease-out(빠르게 시작해 부드럽게 안착), 나갈 때는 ease-in 으로 더 짧게.
     transform 과 opacity 만 애니메이션한다 — width/height/top/left 는 매 프레임 레이아웃을 다시 계산한다. */
  --motion-fast: 0.15s; /* 줄이기 설정에서 0.01ms */
  --motion-base: 0.25s; /* 줄이기 설정에서 0.01ms */
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1); /* 표준 */
  --motion-enter: 0.2s; /* 손에 잡히는 순간 */
  --motion-leave: 0.14s; /* 놓는 건 더 빨라야 미련이 없다 */
  --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1); /* 들어올 때 */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* 나갈 때 */

  /* 카드를 집어 올리는 눈금. 이 셋이 「손으로 집었다」의 전부다 —
     더 올리면 카드가 화면에서 뜯겨 나가고, 더 틀면 그리드가 흔들려 보인다. */
  --lift-y: -10px; /* 뜨는 높이 */
  --lift-tilt: -2.5deg; /* 왼쪽이 들린다(반대각). 기존 기울기에 더해진다.
       ⚠️ 음수 = 반시계 = 왼쪽 들림.
       +2.5 로 되돌리지 마라 (2026-08-23 대표) */
  --lift-scale: 1.03; /* 눈에 가까워진 만큼 */
  --press-scale: 0.97; /* 손가락 아래서 눌리는 정도 */
  --shadow-rest: 0 6px 16px var(--alpha-card-shadow);
  --shadow-lift: 0 22px 40px var(--alpha-card-shadow);

  /* 나머지 모션의 눈금. 전부 짧다 — 이 화면은 표와 그리드라 오래 끌면 읽을 수가 없다 */
  --motion-tint: 0.12s; /* 색만 바뀌는 것(행·버튼·테두리) */
  --motion-press: 0.08s; /* 누름 */
  --motion-drop: 0.16s; /* 메뉴 열림 (닫힘은 --motion-press) */
  --motion-reveal: 0.32s; /* 스크롤 진입 — 한 번만 */
  --reveal-y: 12px; /* 진입할 때 아래에서 올라오는 거리 */
  --reveal-step: 0.04s; /* 줄줄이 들어올 때 한 칸 간격 */
  --set-bg: #f3f7f9; /* 아이스 */
  --set-line: #dee8ee;
  --set-panel: #eaf1f5;
  --set-focus: #6e66d7;
  --set-fan-duration: 400ms;
  --brand-foil-cyan: #32dce8;
  --brand-foil-violet: #8374f3;
  --brand-foil-pink: #ef8fda;
  --brand-foil-gold: #ffe9a1;
  --brand-foil-green: #7ae1c0;
  --brand-foil-blue: #57c9ee;
  --brand-foil-mask-solid: #000;
  --brand-foil-mask-soft: #000c;
  --brand-foil-light-cyan: #b7eeff55;
  --brand-foil-light-white: #fff;
  --brand-foil-light-soft: #fff9;
  --brand-foil-light-pink: #fcd9ff66;
  --brand-foil-glow-soft: #fff5;
  --brand-foil-pin: #718d98;
  --motion-foil-sweep: 8s;

  /* Service UI typography roles. Hero and cinematic card prices retain their own scale. */
  --ui-page-size: var(--text-h2);
  --ui-page-line: var(--space-7);
  --ui-section-size: var(--text-h3);
  --ui-group-size: var(--text-body);
  --ui-body-size: var(--text-body);
  --ui-body-line: var(--space-6);
  --ui-support-size: var(--text-data);
  --ui-support-line: var(--space-5);
  --ui-label-size: var(--text-label);
  --ui-label-line: var(--space-4);
  --ui-summary-size: var(--text-h2);
  --ui-summary-line: var(--space-7);
  --ui-section-line: 1.625rem;

  /* Shared service components: compact/descriptive rows, groups, summary, FAQ and contact form. */
  --ui-gutter: var(--space-4);
  --ui-group-radius: var(--radius-lg);
  --ui-group-padding: var(--space-5);
  --ui-group-gap: var(--space-3);
  --ui-section-gap: var(--space-6);
  --ui-label-gap: var(--space-3);
  --ui-row-compact: var(--space-9);
  --ui-row-descriptive: var(--space-10);
  --ui-row-pad-y: var(--space-2);
  --ui-icon-slot: var(--space-7);
  --ui-icon-size: var(--space-6);
  --ui-icon-gap: var(--space-3);
  --ui-trailing-size: var(--space-4);
  --ui-text-gap: var(--space-1);
  --ui-control-height: 2.75rem;
  --ui-control-radius: var(--radius-sm);
  --ui-field-gap: var(--space-6);
  --ui-chart-width: var(--space-12);
  --ui-page-max: 40rem;
  --ui-touch-min: 2.75rem;
  --ui-submit-height: 3.25rem;
  --ui-area-padding: var(--space-6);

  /* 2026-10-18 user decision: one dominant hue per purpose, tonal light/shadow only. Replaces rainbow-per-icon rule. */
  --icon-discovery: var(--color-brand-symbol-mint);
  --icon-market: var(--color-brand-symbol-mint);
  --icon-library: var(--color-brand-symbol-violet);
  --icon-interest: var(--color-brand-symbol-pink);
  --icon-premium: var(--color-brand-symbol-gold);
  --icon-support: var(--holo-aqua);
  --icon-account: #4c8fe6; /* Account/settings blue. Replaces gray after user feedback 2026-10-18. */
  --color-brand-symbol-violet: #7760f5;
  --color-brand-symbol-pink: #f08bda;
  --color-brand-symbol-gold: #ffd17c;
  --color-page-bg: #f3f7f9;
  --color-panel: #eaf1f5;
  --color-area-fill-start: #ffffff;
  --color-area-stroke: #ffffff;
  --color-scan-attention: #c2410c;
}

/* ══════════════════════════════════════════════════════════════════════════
   다크 — 2층(semantic)만 다시 정의한다. 1층 primitive 는 건드리지 않는다(예외: 알파 그림자 2개).
   대비는 **패널 지면(--color-surface) 기준**으로 맞췄다 — 실측과 미달 예외는 정본 JSON 의 contrast 표.

   세 갈래를 모두 받는다:
     ① 사용자가 다크를 명시   → :root[data-theme="dark"]
     ② 시스템 설정이 다크     → prefers-color-scheme (라이트 명시는 제외)
     ③ 클래스 토글            → .dark
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"],
.dark {
  color-scheme: dark;
  --color-bg: #10151e;
  --color-surface: #191e2a;
  --color-surface-sunken: #0c1018;
  --color-text: #d8dbe1;
  --color-text-secondary: #a1a9b8;
  --color-text-muted: #7b869b;
  --color-border: #313949;
  --color-border-strong: #454f63;
  --color-border-dashed: #313949;
  --color-accent: #797cd6;
  --color-accent-fill: #7174d4;
  --color-accent-line: #585bcd;
  --color-accent-soft: #25264b;
  --color-state-known: #449373;
  --color-state-uncollected: #b9753a;
  --color-state-live: #449373;
  --color-danger: #f2867e;
  --color-danger-soft: #3a1d22;
  --color-rise: #5fb38e;
  --color-fall: #f07aa8;

  /* 그라디언트와 그 위 글자는 다크에서도 그대로다 — 대비는 contrast 표 */

  /* 차트 계열색 (다크) — 근거는 정본 JSON semantic.chart */
  --chart-finish-base: #8274e0;
  --chart-finish-holo: #0f9dad;
  --chart-finish-reverse: #e05f92;
  --chart-grid: #232b3a;
  --chart-axis: #3b4557;
  --on-gradient: var(--ink);

  /* 다크에서는 보라 그림자가 탁해 보인다. 검정 기반으로 바꾼다 */
  --alpha-card-shadow: rgba(0, 0, 0, 0.55);
  --alpha-art-shadow: rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #10151e;
    --color-surface: #191e2a;
    --color-surface-sunken: #0c1018;
    --color-text: #d8dbe1;
    --color-text-secondary: #a1a9b8;
    --color-text-muted: #7b869b;
    --color-border: #313949;
    --color-border-strong: #454f63;
    --color-border-dashed: #313949;
    --color-accent: #797cd6;
    --color-accent-fill: #7174d4;
    --color-accent-line: #585bcd;
    --color-accent-soft: #25264b;
    --color-state-known: #449373;
    --color-state-uncollected: #b9753a;
    --color-state-live: #449373;
    --color-danger: #f2867e;
    --color-danger-soft: #3a1d22;
    --color-rise: #5fb38e;
    --color-fall: #f07aa8;

    /* 그라디언트와 그 위 글자는 다크에서도 그대로다 — 대비는 contrast 표 */

    /* 차트 계열색 (다크) — 근거는 정본 JSON semantic.chart */
    --chart-finish-base: #8274e0;
    --chart-finish-holo: #0f9dad;
    --chart-finish-reverse: #e05f92;
    --chart-grid: #232b3a;
    --chart-axis: #3b4557;
    --on-gradient: var(--ink);

    /* 다크에서는 보라 그림자가 탁해 보인다. 검정 기반으로 바꾼다 */
    --alpha-card-shadow: rgba(0, 0, 0, 0.55);
    --alpha-art-shadow: rgba(0, 0, 0, 0.5);
  }
}

@media (max-width: 760px) {
  :root {
    --text-display: 2rem;
    --text-hero: 1.625rem;
    --text-body: 1rem;
    --text-price: 1.75rem;
    --layout-pad: var(--space-5);
    --ui-section-gap: 0.5rem;
    --ui-area-padding: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   언어별 서체 — 한자가 겹치므로 스크립트마다 스택을 갈아 끼운다.
   카드 이름처럼 본문 언어와 다른 조각에는 그 자리에 lang 속성을 준다:
     <span lang="ja">熱風のアリーナ</span>
   ══════════════════════════════════════════════════════════════════════════ */

:lang(ko) {
  --font-sans: "IBM Plex Sans KR", "IBM Plex Sans", "IBM Plex Sans JP", sans-serif;
}

:lang(ja) {
  --font-sans: "IBM Plex Sans JP", "IBM Plex Sans", "IBM Plex Sans KR", sans-serif;
}

:lang(th) {
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif;
}

:lang(zh-Hant),
:lang(zh-TW) {
  --font-sans: "IBM Plex Sans", "Noto Sans TC", system-ui, sans-serif;
}

:lang(zh-Hans),
:lang(zh-CN) {
  --font-sans: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif;
}

:lang(en) {
  --font-sans: "IBM Plex Sans", "IBM Plex Sans KR", "IBM Plex Sans JP", sans-serif;
  font-family: var(--font-sans);
}

:lang(ko),
:lang(ja),
:lang(th),
:lang(zh-Hant),
:lang(zh-TW),
:lang(zh-Hans),
:lang(zh-CN) {
  font-family: var(--font-sans);
}

/* /css/global-header.css */
body>header.global-header{position:sticky;top:0;z-index:45;display:flex;align-items:center;justify-content:flex-start;gap:0;width:100%;max-width:none;height:64px;min-height:64px;margin:0;padding:0 max(24px,calc((100% - 1152px)/2));border:0;border-bottom:1px solid #dce5ea;background:rgba(243,246,248,.96);backdrop-filter:blur(14px);flex-wrap:nowrap}body>header.global-header>a{flex:none;display:flex;align-items:center}body>header.global-header>a:first-child img{display:block;width:160px;height:auto;max-width:none}body>header.global-header>nav{display:flex;align-items:center;align-self:stretch;gap:28px;height:100%;margin-left:auto;font-size:var(--text-data);font-weight:600}body>header.global-header>nav>a{display:flex;align-items:center;position:relative;height:100%;white-space:nowrap}body>header.global-header>nav>a.active:after{content:'';position:absolute;bottom:12px;left:0;right:0;height:2px;background:var(--mint)}body>header.global-header .acm-end{margin-left:32px}body>header.global-header .acm{align-self:center;align-items:center}body>header.global-header .acm-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent}body>header.global-header .acm-btn:hover{background:var(--panel,var(--bg))}body>header.global-header .acm-btn img{width:36px;height:36px}body>header.global-header .acm-btn svg{width:20px;height:20px}body>header.global-header .acm-menu{font-weight:400} @media(max-width:760px){body>header.global-header{height:56px;min-height:56px;padding:0 18px}body>header.global-header>a:first-child img{width:130px}body>header.global-header>nav{gap:14px;font-size:var(--text-label)}body>header.global-header>nav>a.how{display:flex}body>header.global-header .acm-end{margin-left:12px}body>header.global-header .acm-btn{width:40px;height:44px}body>header.global-header>nav>a.active:after{bottom:6px}}@media(max-width:360px){body>header.global-header>a:first-child img{width:112px}body>header.global-header>nav{gap:10px}}
@media(max-width:360px){body>header.global-header .acm-end{margin-left:8px}}
body>header.global-header>nav>a:is(.gnb-explore,.gnb-movers,.gnb-news){width:44px;justify-content:center}@media(max-width:360px){body>header.global-header>nav{gap:6px}body>header.global-header>nav>a:is(.gnb-explore,.gnb-movers,.gnb-news){width:32px}body>header.global-header .acm-btn{width:36px}}
body>header.global-header :is(.gnb-explore,.gnb-movers,.gnb-news) svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
:root{--site-content-width:1152px;--site-gutter:24px}
body>header.global-header{padding-inline:max(var(--site-gutter),calc((100% - var(--site-content-width))/2))}
body>main.wrap,body>footer.wrap{width:calc(100% - 2*var(--site-gutter));max-width:var(--site-content-width);margin-inline:auto}
body .journey>.viewport,body .journey>.how,body .journey>.questions,body>.brand-footer{max-width:calc(var(--site-content-width) + 2*var(--site-gutter));padding-inline:var(--site-gutter)}
@media(max-width:760px){:root{--site-gutter:18px}}
.legal-foot{width:calc(100% - 2*var(--site-gutter));max-width:var(--site-content-width);margin:0 auto;padding:0 0 28px;font-size:13px;color:var(--muted,#647c8d)}
.legal-foot nav{display:flex;flex-wrap:wrap;gap:0 20px}
.legal-foot a{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-weight:600}
.legal-foot p{margin:0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.legal-foot .biz{margin-top:6px}
p.biz,.biz span{font-family:system-ui,-apple-system,sans-serif}.biz span{display:inline-block}.biz span:not(:last-child)::after{content:" ·"}
body>header.global-header .gnb-label{display:none}@media(min-width:1024px){body>header.global-header>nav>a:is(.gnb-explore,.gnb-movers,.gnb-news){width:auto;gap:6px}body>header.global-header .gnb-label{display:inline}}
body>header.global-header>a:first-child{min-height:44px}body>header.global-header .acm-btn{width:44px;height:44px}

/* 375~400 휴대폰: 로그인 상단바(아이콘 3 + 계정)가 넘치지 않게 — 로고 · 간격만 줄이고 누르는 칸은 44px 그대로 */
@media(min-width:361px) and (max-width:400px){body>header.global-header>a:first-child img{width:112px}body>header.global-header>nav{gap:8px}body>header.global-header .acm-end{margin-left:8px}}
/* 바닥 · 같은 길 링크(로고 포함) 손가락 44px — 모든 화면 공통(2026-10-11 DOM 실측: 17~20px) */
body>footer a{display:inline-flex;align-items:center;min-height:44px}
/* Figma shared header: one width and menu order on every service screen. */
:root{--site-content-width:1184px;--site-gutter:16px}@media(min-width:1024px){:root{--site-gutter:48px}}   /* 1024 이상 = max(48, (폭−1184)/2) — 125% 배율 노트북(CSS 1134)에서 왼쪽에 붙지 않게(대표 2026-10-23) */
body>header.global-header{background:color-mix(in srgb,var(--color-page-bg) 96%,transparent);padding-inline:max(var(--site-gutter),calc((100% - var(--site-content-width))/2))}
body>header.global-header>nav{gap:4px}
body>header.global-header>nav>a:is(.gnb-explore,.gnb-movers,.gnb-news,.gnb-my){min-width:44px;justify-content:center;gap:6px}
body>header.global-header>nav>a.active:after{bottom:0;left:0;right:0}
@media(min-width:1024px){body>header.global-header>nav{gap:24px}body>header.global-header .gnb-label{display:inline}body>header.global-header>nav>a{padding-inline:4px}}
@media(max-width:760px){body>header.global-header{padding-inline:16px}body>header.global-header>nav{gap:4px}body>header.global-header>a:first-child img{width:130px}}
@media(max-width:375px){body>header.global-header>a:first-child img{width:100px}}

body>header.global-header{color:var(--color-text)}body>header.global-header>nav>a{color:inherit;text-decoration:none}

/* Compact mobile gutters follow the approved 390px screens. */
@media(max-width:767px){:root{--site-gutter:8px}body>header.global-header{padding-inline:8px}}

@media(max-width:767px){html{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}}
.gnb-profile-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none}body.has-holo-pass .gnb-profile-icon:before{content:'';position:absolute;inset:-7px;border-radius:50%;padding:3.5px;background:conic-gradient(from 0deg,var(--icon-premium),var(--icon-market),var(--icon-library),var(--icon-interest),var(--icon-premium));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}

/* /css/about.css */
/* 소개 · 시세 기준 안내 — 설명이 본문인 정적 페이지. 값은 /design/styles/tokens.css 에서만 온다(html data-theme="light" — 손님 화면은 라이트).
   머리는 css/global-header.css 를 그대로 쓴다(그 파일이 var(--mint)·var(--bg)를 읽는다). */
:root{--mint:var(--color-brand-symbol-mint);--bg:var(--color-bg);--page-w:calc(100% - 2*var(--site-gutter,24px))}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--color-bg)}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:'IBM Plex Sans KR','IBM Plex Sans JP','IBM Plex Sans',sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--color-accent);outline-offset:4px;border-radius:var(--radius-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-70px;left:20px;padding:15px;background:var(--color-surface);z-index:100}
.skip-link:focus{top:10px}
body>header.global-header a{min-height:44px}

main,.foot{width:var(--page-w);max-width:1152px;margin:0 auto}
.langs{display:flex;justify-content:flex-end;gap:4px;font-size:13px;font-weight:600}
.langs a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--color-text-muted)}
.langs a[aria-current=page]{color:var(--color-text);box-shadow:inset 0 -2px 0 var(--mint)}

.hero{padding:24px 0 48px}
.eyebrow{margin:0;font-size:12px;letter-spacing:.2em;color:var(--color-text-muted)}
h1{margin:20px 0 20px;max-width:18em;font-size:clamp(32px,5vw,56px);line-height:1.22;letter-spacing:-.05em;font-weight:700}
.lead{margin:0;max-width:40em;font-size:clamp(16px,1.6vw,19px);line-height:1.8;color:var(--color-text-secondary)}
.stamp{margin:20px 0 0;font-size:13px;color:var(--color-text-muted)}

.sec{scroll-margin-top:88px;display:grid;grid-template-columns:1fr;gap:16px;padding:36px 0 44px;border-top:1px solid var(--color-border-strong)}
.sec h2{text-wrap:balance;margin:0;font-size:clamp(22px,2.4vw,28px);line-height:1.3;letter-spacing:-.04em;font-weight:700}
.sec-body{min-width:0;max-width:720px}
.sec-body>*:first-child{margin-top:0}
.sec-body p{margin:0 0 16px;color:var(--color-text-secondary)}
.sec-body p:last-child{margin-bottom:0}
.sec-body b,.sec-body strong{color:var(--color-text);font-weight:600}
.sec-body a{color:var(--color-brand-link-text);text-decoration:underline;text-underline-offset:3px}

table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6}
th,td{padding:14px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--color-border)}
tr:first-child>th,tr:first-child>td{border-top:1px solid var(--color-border)}
th{width:34%;padding-right:20px;font-weight:600;color:var(--color-text)}
td{color:var(--color-text-secondary);overflow-wrap:anywhere}
.num{font-variant-numeric:tabular-nums}

ol.steps,ul.plain{margin:0;padding:0;list-style:none}
ol.steps{counter-reset:step}
ol.steps li,ul.plain li{padding:14px 0;border-bottom:1px solid var(--color-border);color:var(--color-text-secondary)}
ol.steps li:first-child,ul.plain li:first-child{border-top:1px solid var(--color-border)}
ol.steps li{display:grid;grid-template-columns:44px 1fr;gap:0 8px}
ol.steps li:before{counter-increment:step;content:counter(step,decimal-leading-zero);font-size:15px;font-weight:500;color:var(--color-text-muted);font-variant-numeric:tabular-nums}
ol.steps b,ul.plain b{color:var(--color-text);font-weight:600}

.note{margin:0;padding:16px 20px;background:var(--color-surface);border-left:3px solid var(--mint);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--color-text-secondary)}
.sec-body p.note{margin:0 0 16px}
.actions,.go{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.actions{margin-top:28px}
.actions a,.sec-body .go a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-weight:600;text-align:center;text-decoration:none}
.actions a.primary,.sec-body .go a.primary{background:var(--color-brand-action-fill);border-color:var(--color-brand-action-fill);color:var(--color-brand-action-on)}
th a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:3px}
td a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px}
tr:has(>td>a:only-child){position:relative}
td>a:only-child{display:flex;margin-block:-14px}
td>a:only-child::after{content:"";position:absolute;inset:0}

.foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:24px;padding:32px 0 40px;border-top:1px solid var(--color-border-strong);font-size:13px;color:var(--color-text-muted)}
.foot>a{display:flex;align-items:center;min-height:44px}
.foot img{display:block;width:150px;height:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:0 24px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--color-text-secondary)}
.foot small{font-size:13px}
.foot .notice{flex:1 0 100%;margin:0;font-size:12px;line-height:1.5}
p.biz,.biz span{font-family:system-ui,-apple-system,sans-serif}.biz span{display:inline-block}.biz span:not(:last-child)::after{content:" ·"}

@media(min-width:900px){
  .hero{padding:40px 0 72px}
  .sec{grid-template-columns:300px 1fr;gap:48px;padding:48px 0 64px}
}
@media(max-width:700px){
  .hero{padding:12px 0 36px}
  table{font-size:14px}
  th{width:38%;padding-right:12px}
  .foot img{width:120px}
  .actions a,.sec-body .go a{flex:1 1 calc(50% - 6px);padding:0 12px}
}
.sec-body table+p,.sec-body ol+p{margin-top:16px}
html[lang=ko] body{word-break:keep-all}
html[lang=ja] body{line-break:strict;word-break:auto-phrase}
/* SEO3 2026-10-18 — 시세 기준: 지금 시세가 있는 카드(표 · 접힌 세트 표) · 묻고 답하기 */
.price-coverage,.prices-faq{min-width:0;max-width:100%;overflow-wrap:anywhere;margin:32px 0 0}.price-coverage h2,.prices-faq h2{font-size:18px;margin:0 0 12px}
.price-coverage table{width:100%;font-size:13px;table-layout:fixed;border-collapse:collapse}.price-coverage caption{caption-side:top;text-align:left;font-size:12px;color:var(--muted);padding:0 0 8px}
.price-coverage th,.price-coverage td{padding:8px 6px;border-bottom:1px solid var(--line,#dee8ee);text-align:left;vertical-align:top}.price-coverage td{white-space:nowrap}
.price-coverage th[scope=row]{overflow-wrap:break-word}.price-coverage th small,.price-coverage td small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.coverage-table th[scope=col]:first-child{width:38%}.coverage-sets th[scope=col]:first-child{width:46%}.coverage-sets summary{cursor:pointer;font-weight:700;font-size:15px;padding:16px 0 8px}
.prices-faq h3{margin:16px 0 4px;font-size:15px}.prices-faq p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

/* /css/typography.css */
/* All customer pages share Plex and the canonical type scale. */

html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  letter-spacing: 0;
}
body :where(button, input, select, textarea, text) { font-family: var(--font-sans); }
body input:not([type=checkbox]):not([type=radio]), body textarea {
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  letter-spacing: 0;
}
body :where(h1, h2, h3) {
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
}

body .copy h1, body .story h1 { font-size: var(--text-display); }
body .intro h1, body .set-intro h1, body .stage-title h1,
body .my-welcome h1, body .acct h1 {
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
body .set-intro h1 { overflow-wrap: anywhere; }
body .section-heading h2, body .detail-copy h2, body .questions h2,
body .closing h2, body .history-head h2, body .settings-heading h2,
body .panel-title h2, body .detail-layout h2, body .story h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
body .set-intro h2, body .set-intro .compact-set-heading h2,
body .set-intro .desktop-set-heading h2 { font-size: var(--text-h2); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
body .steps h3, body .spotlight-info h3, body .settings-panel h3,
body .answers h3, body .pack-tile h2, body .my-empty h3 {
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
}
body .copy .intro, body .section-heading > p, body .steps p,
body .detail-copy p, body .answers p, body .closing p, body .story .description {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  letter-spacing: 0;
}
body .intro > p, body .acct-legal, body .acct-note,
body .data-note, body .guide-note { font-size: var(--text-data); line-height: var(--leading-normal); }
body .cta, body .text-link, body .idp, body .btn,
body .collection-tabs button, body .control {
  font-size: var(--text-data);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  font-weight: var(--weight-semibold);
}
body > header.global-header > nav { font-size: var(--text-data); line-height: var(--leading-snug); letter-spacing: 0; }
body .spotlight-price, body .value-summary .total-value strong,
body .stage .current-price, body .stage .attached-tag .current-price,
body .art .current-price, body .story .price strong {
  font-size: var(--text-price);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}
body .stage .no-price, body .art .no-price { font-size: var(--text-body); font-weight: var(--weight-regular); }
body .album-slot strong, body .card-item strong, body .set-card strong,
body .my-card-link strong, body .discovery-info strong { font-size: var(--text-data); line-height: var(--leading-snug); }
body .album-slot .card-price, body .album.list .card-price,
body .card-item .card-price, body .my-table .value, body .set-card .card-price,
body .discovery-info b {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
/* The 3D experience is an exported page; keep its type overrides here. */
body .story :where(.eyebrow, .stage-top, .object-caption, .counter, .price > div,
  .price p, .example, .quiet, .detail-note > span, .detail-note p,
  .scan-state small, .scroll-cue) {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-kicker);
}
body .story .object-caption span + span { font-size: var(--text-label); letter-spacing: 0; }

@media (max-width: 760px) {
  body .history-head .periods { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; }
  body .history-head .periods button { min-width:0; padding:8px 4px; }
  body .set-intro .intro-heading { width: 55%; }
  body .stage .tag-hanger > .attached-tag { width: 132px; }
  body .stage .attached-tag .price-tag { min-height: 70px; }
}
@media (max-width: 360px) {
  body .stage .tag-hanger > .attached-tag { width: 116px; }
  body > header.global-header > a:first-child img { width: 100px; }
  body > header.global-header > nav { margin-left: 8px; }
  body > header.global-header .acm-end { margin-left: auto; }
}

/* /css/page-share.css */
/* The page share button beside a page's h1 and its sheet (site/js/page-share.js · pages.titled). The button = the card page's #share
   (44 px square, line border, 19 px icon — explore/detail-responsive.css .passport-actions .control); the sheet = its share sheet
   (.sheet: a bottom sheet on a phone, a centred window from 701 px). Only design tokens here — every target page loads tokens.css. */
.page-title{display:flex;align-items:baseline;gap:var(--space-3)}   /* baseline: beside the title's first line, whatever its margins */
.page-title>h1{min-width:0}
@media(max-width:760px){.copy>.page-title{justify-content:center}}   /* the home headline is centred there (home/style.css .copy) */
.page-share{flex:none;width:44px;height:44px;min-height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:9px;background:transparent;color:var(--color-text);cursor:pointer}
.page-share:hover{background:var(--color-surface-sunken)}
.page-share .ui-icon,.page-share-sheet .ui-icon{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none;display:block}
.page-share-sheet{width:100%;max-width:100%;max-height:92svh;margin:auto 0 0;padding:0;border:0;border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-lift);overflow:auto}
.page-share-sheet::backdrop{background:color-mix(in srgb,var(--color-text) 45%,transparent);backdrop-filter:blur(3px)}
.page-share-sheet [hidden]{display:none!important}
.page-share-sheet .sheet-body{display:grid;gap:var(--space-4);padding:var(--space-4) var(--space-4) max(var(--space-4),env(safe-area-inset-bottom))}
.page-share-sheet .dialog-head{display:flex;align-items:center;justify-content:space-between}
.page-share-sheet h2{margin:0;font-size:var(--text-h3);font-weight:var(--weight-semibold)}
.page-share-sheet .icon-button{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;background:transparent;color:inherit;cursor:pointer}
.page-share-preview{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--radius-lg);background:var(--color-surface-sunken)}
.page-share-url{margin:0;font-size:var(--text-data);color:var(--color-text-muted);overflow-wrap:anywhere}
.page-share-sheet .share-rows{display:grid;gap:var(--space-1)}
.page-share-sheet .share-row{display:flex;align-items:center;gap:var(--space-3);min-height:52px;padding:0 var(--space-3);border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text);font:inherit;font-size:var(--text-body);text-align:left;cursor:pointer}
.page-share-sheet .share-row:hover{background:var(--color-surface-sunken)}
.page-share-sheet .share-row .ui-icon{width:22px;height:22px;flex:none}
@media(min-width:701px){.page-share-sheet{width:calc(100% - 32px);max-width:400px;max-height:calc(100svh - 32px);margin:auto;border-radius:var(--radius-xl)}.page-share-sheet .sheet-body{padding:var(--space-6)}}
.page-share-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,12px);background:var(--color-text);color:var(--color-surface);padding:12px 20px;border-radius:8px;font-size:var(--text-data);max-width:calc(100% - 32px);width:max-content;z-index:20;opacity:0;pointer-events:none;transition:opacity var(--motion-fast),transform var(--motion-fast)}
.page-share-toast.show{opacity:1;transform:translate(-50%,0)}

/* /css/ui-system.css */
/* Service UI components. Values: docs/design/tokens/snapholo.tokens.json.
   Opt in by class; cinematic home and card-stage typography are separate. */
.ui-page{box-sizing:border-box;width:calc(100% - 2 * var(--ui-gutter));max-width:var(--ui-page-max);margin:var(--space-6) auto 0;color:var(--color-text);font-family:var(--font-sans)}
.ui-page *{box-sizing:border-box}
.ui-page-title{font-size:var(--ui-page-size);line-height:var(--ui-page-line);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-display);margin:0 0 var(--space-6)}
.ui-section{margin-block:var(--ui-section-gap)}
.ui-section-label{font-size:var(--ui-support-size);line-height:var(--ui-support-line);font-weight:var(--weight-medium);color:var(--color-text-muted);margin:0 0 var(--ui-label-gap);padding-inline:var(--ui-group-padding)}
.ui-surface,.ui-menu-group,.ui-faq{background:var(--color-surface);border:0;border-radius:var(--ui-group-radius)}
.ui-menu-group{padding-block:var(--space-2);overflow:hidden}
.ui-menu-row{display:grid;grid-template-columns:var(--ui-icon-slot) minmax(0,1fr) auto;align-items:center;column-gap:var(--ui-icon-gap);min-height:var(--ui-row-compact);padding:var(--ui-row-pad-y) var(--ui-group-padding);color:inherit;text-decoration:none;transition:background-color var(--motion-fast) var(--motion-ease)}
.ui-menu-row--descriptive{min-height:var(--ui-row-descriptive)}
.ui-menu-icon{display:flex;align-items:center;justify-content:center;width:var(--ui-icon-slot);height:var(--ui-icon-slot);flex:none}
.ui-menu-icon>img{width:var(--ui-icon-size);height:var(--ui-icon-size);object-fit:contain}
.ui-row-copy{display:grid;gap:var(--ui-text-gap);min-width:0}
.ui-menu-label{font-size:var(--ui-body-size);line-height:var(--ui-body-line);font-weight:var(--weight-medium);overflow-wrap:anywhere}
.ui-menu-tail{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);color:var(--color-text-muted);font-size:var(--ui-support-size);line-height:var(--ui-support-line);text-align:right;max-width:12ch;overflow-wrap:anywhere}
.ui-menu-description,.ui-field-note{display:block;color:var(--color-text-secondary);font-size:var(--ui-support-size);line-height:var(--ui-support-line);font-weight:var(--weight-regular)}
.ui-menu-row .chevron{width:var(--ui-trailing-size);height:var(--ui-trailing-size);flex:none}
.ui-back{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--ui-touch-min);color:var(--color-text-secondary);font-size:var(--ui-support-size);line-height:var(--ui-support-line);text-decoration:none;margin-bottom:var(--space-3)}
.ui-page :where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--set-focus);outline-offset:3px}
.ui-form{display:grid;gap:var(--ui-field-gap);padding:var(--ui-group-padding)}
.ui-field{display:grid;gap:var(--space-2)}
.ui-field>label{font-size:var(--ui-support-size);line-height:var(--ui-support-line);font-weight:var(--weight-medium)}
.ui-input{width:100%;min-height:var(--ui-control-height);padding:calc(var(--space-3) - 1px) var(--space-3);border:1px solid var(--color-border);border-radius:var(--ui-control-radius);background:var(--color-surface-sunken);color:var(--color-text);font:inherit;font-size:var(--ui-body-size);line-height:var(--ui-body-line)}
textarea.ui-input{resize:vertical;min-height:calc(var(--ui-control-height) * 3)}
.ui-button{display:inline-flex;justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--ui-control-height);padding:var(--space-3) var(--space-5);border:0;border-radius:var(--ui-control-radius);background:var(--color-brand-action-fill);color:var(--color-brand-action-on);font:inherit;font-size:var(--ui-body-size);line-height:var(--ui-body-line);font-weight:var(--weight-semibold);cursor:pointer}
.ui-button--submit{min-height:var(--ui-submit-height)}
.ui-button:disabled{opacity:.6;cursor:wait}
.ui-faq{overflow:hidden;margin-bottom:var(--ui-group-gap)}
.ui-faq details+details{border-top:1px solid var(--color-border)}
.ui-faq summary{cursor:pointer;font-size:var(--ui-body-size);line-height:var(--ui-body-line);font-weight:var(--weight-medium);padding:var(--space-3) var(--ui-group-padding);min-height:var(--ui-row-compact)}
.ui-faq p{font-size:var(--ui-support-size);line-height:var(--ui-support-line);color:var(--color-text-secondary);margin:0;padding:0 var(--ui-group-padding) var(--ui-group-padding)}
@media(hover:hover){.ui-menu-row:hover{background:var(--color-surface-sunken)}}
@media(prefers-reduced-motion:reduce){.ui-menu-row{transition:none}}

/* Controls own interaction states; the passive icon frame never does. */
.ui-button,.ui-button:hover,.ui-button:focus-visible,.ui-button:active{text-decoration:none}
.ui-button:focus-visible{outline:3px solid var(--set-focus);outline-offset:3px}
.ui-button:not(:disabled):active{transform:translateY(1px)}
@media(hover:hover){.ui-button:not(:disabled):hover{background:color-mix(in srgb,var(--color-brand-action-fill) 92%,black)}}

.ui-button--outline{background:transparent;border:1px solid var(--color-border-strong);color:var(--color-text)}
.ui-button.ui-button--outline .sh-ui-icon{filter:none}
@media(hover:hover){.ui-button--outline:not(:disabled):hover{background:var(--color-surface-sunken)}}

/* /css/ui-icons.css */
/* Passive icon frame: fixed visual canvas, never a control by itself. */
.sh-icon-frame{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex:none;vertical-align:middle;width:var(--ui-icon-slot,2rem);height:var(--ui-icon-slot,2rem);border:1px solid var(--color-border,#dee8ee);border-radius:var(--ui-control-radius,.375rem);background:transparent;box-shadow:none;pointer-events:none}
.sh-icon-frame>.sh-ui-icon,.sh-icon-frame>img{display:block;width:var(--ui-icon-size,1.5rem);height:var(--ui-icon-size,1.5rem);object-fit:contain;margin:0}
/* SnapHolo customer icon family. Color for destinations, ink for tiny operations. */
.sh-ui-icon{display:inline-block;vertical-align:middle;flex:none;width:24px;height:24px;object-fit:contain}
.control .sh-ui-icon,.cta .sh-ui-icon{margin-right:7px}.control .sh-ui-icon[src*="/plus.svg"]{width:18px;height:18px}
.ui-button .sh-ui-icon,.primary .sh-ui-icon,.cta .sh-ui-icon,.glass .sh-ui-icon{filter:brightness(0) invert(1)}
.icon-button .sh-ui-icon,.icon-btn .sh-ui-icon,.page-share .sh-ui-icon{margin:0}
body>header:is(.brand-header,.global-header){height:64px;min-height:64px;gap:12px}
body>header:is(.brand-header,.global-header)>a:first-child img{width:160px}
body>header:is(.brand-header,.global-header)>nav{display:flex;align-self:center;align-items:center;gap:10px;margin-left:auto;height:44px}
body>header:is(.brand-header,.global-header)>nav>a{display:flex!important;align-items:center;justify-content:center;width:44px!important;height:44px;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0}
body>header:is(.brand-header,.global-header)>nav>a .sh-ui-icon{width:20px;height:20px}
body>header:is(.brand-header,.global-header)>nav>a.active:after{bottom:-8px;left:13px;right:13px;height:2px;background:#10b7ba}
body>header:is(.brand-header,.global-header) .acm-moved{position:absolute!important;width:1px!important;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:760px){body>header:is(.brand-header,.global-header){height:56px;min-height:56px;padding-inline:8px}body>header:is(.brand-header,.global-header)>a:first-child img{width:130px}body>header:is(.brand-header,.global-header)>nav{gap:4px}body>header:is(.brand-header,.global-header)>nav>a.active:after{bottom:-4px}}
@media(max-width:360px){body>header:is(.brand-header,.global-header){padding-inline:8px;gap:4px}body>header:is(.brand-header,.global-header)>a:first-child img{width:100px}body>header:is(.brand-header,.global-header)>nav{gap:0}}
@media(min-width:1024px){body>header:is(.brand-header,.global-header)>nav{gap:24px}body>header:is(.brand-header,.global-header)>nav>a{width:auto!important;padding-inline:4px!important}}

@media(max-width:760px){:root{--site-gutter:8px}}

/* /css/service-ui.css */
/* Service screens share a density and control scale; the home/card art stages keep their own layout. */
body.service-ui :where(button,input,select,textarea){font-family:var(--font-sans)}
body.service-ui :where(main h1){font-size:var(--ui-page-size);line-height:var(--ui-page-line);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-display)}
.ui-page{margin-top:var(--space-4)}.ui-page-title{margin-bottom:var(--space-4)}.ui-back{margin-bottom:var(--space-2)}
.ui-button{min-height:var(--ui-touch-min);padding-block:var(--space-2)}.ui-button .sh-ui-icon{width:20px;height:20px}
.ui-icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--ui-control-radius);background:transparent;cursor:pointer;color:var(--color-text);font:inherit}
.ui-icon-button img{width:16px;height:16px}.collection-add.ui-button{padding:var(--space-2);width:44px;height:44px;min-height:44px}.collection-tools .ui-button{padding:var(--space-2);width:44px;height:44px}
body.service-ui .catalog-page{padding-block:var(--space-4) var(--space-6)}body.service-ui .catalog-page h1{margin:0 0 var(--space-4)}
body.service-ui .market-toolbar{gap:var(--space-3);margin-bottom:var(--space-3)}body.service-ui .market-basis{margin:var(--space-2) 0 var(--space-3);font-size:var(--ui-label-size);line-height:var(--ui-label-line)}body.service-ui .market-board{gap:var(--space-3)}
body.service-ui .market-panel{border-radius:var(--ui-group-radius)}body.service-ui .market-switch{border-radius:var(--ui-control-radius)}body.service-ui .market-switch button{border-radius:var(--ui-control-radius)}body.service-ui .market-card{min-height:92px;padding-block:var(--space-3)}
body.service-ui .market-numbers strong{font-weight:var(--weight-semibold)}
body.service-ui .acct{padding:var(--space-5) var(--ui-gutter) var(--space-6)}body.service-ui .acct h1{margin-bottom:var(--space-4)}body.service-ui .acct h2{font-size:var(--ui-section-size);line-height:var(--ui-section-line);font-weight:var(--weight-semibold);margin:var(--space-5) 0 var(--space-3)}
body.service-ui .acct-who{gap:var(--space-3);margin-bottom:var(--space-4)}body.service-ui .acct-who img{width:40px;height:40px}body.service-ui .acct-who span{font-size:var(--ui-body-size);font-weight:var(--weight-semibold)}body.service-ui .rows{border-radius:var(--ui-group-radius)}body.service-ui .rows>li{padding:var(--space-3) var(--space-4)}body.service-ui .row__name{font-weight:var(--weight-medium)}body.service-ui :where(.btn,.idp,.acct-note){border-radius:var(--ui-control-radius)}
body.service-ui .hero{padding:var(--space-5) 0 var(--space-6)}body.service-ui .hero h1{margin:0 0 var(--space-3)}body.service-ui .lead{font-size:var(--ui-body-size);line-height:var(--ui-body-line)}body.service-ui .sec{gap:var(--space-3);padding-block:var(--space-5)}body.service-ui .sec h2{font-size:var(--ui-section-size);line-height:var(--ui-section-line);font-weight:var(--weight-semibold)}
body.service-ui .support-intro{margin-bottom:var(--space-4)}body.service-ui .hub-footer{margin-top:var(--space-4);padding-bottom:var(--space-5)}
body.service-ui .site-foot{margin-top:var(--space-6)}
/* A sheet title and a close action share one header. Fixed glyph size does not shrink touch targets. */
dialog.ui-dialog,dialog#collection-dialog,dialog#profile-dialog,dialog#guide-dialog{width:calc(100% - 2 * var(--ui-gutter));max-width:32rem;max-height:85dvh;margin:auto;padding:var(--ui-group-padding);border:0;border-radius:var(--ui-group-radius);background:var(--color-surface);color:var(--color-text);font-family:var(--font-sans);overflow:auto}
dialog .dialog-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}dialog .dialog-head h2{margin:0;font-size:var(--ui-section-size);line-height:var(--ui-section-line);font-weight:var(--weight-semibold)}
dialog :where(.close,.dialog-close,.sheet-close,.my-icon,#close-profile){width:44px;height:44px;min-width:44px;min-height:44px;padding:var(--space-2);border-radius:var(--ui-control-radius)}dialog :where(.close,.dialog-close,.sheet-close,.my-icon,#close-profile) .sh-ui-icon{width:16px;height:16px}
dialog .collection-actions{display:grid;gap:var(--space-3);margin:0}dialog .collection-actions a{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;border:1px solid var(--color-border);border-radius:var(--ui-control-radius);background:transparent;color:var(--color-text);text-decoration:none;font-size:var(--ui-body-size)}
dialog :where(input,select,textarea){border-radius:var(--ui-control-radius);font:inherit;font-size:var(--ui-body-size)}
dialog.quota-sheet{border-radius:var(--ui-group-radius) var(--ui-group-radius) 0 0}.quota-pro{border-radius:var(--ui-control-radius);margin-top:var(--space-4)}.quota-body{padding:var(--space-5) var(--ui-group-padding) max(var(--space-5),env(safe-area-inset-bottom))}.quota-sheet :where(.quota-app,.quota-close,.quota-login){border-radius:var(--ui-control-radius)}
.my-tile-wrap{position:relative}.is-managing .my-tile-wrap{padding-bottom:var(--space-9)}
@media(min-width:768px){dialog.quota-sheet{border-radius:var(--ui-group-radius)}}
@media(hover:hover){.collection-row:hover,.pro-option:hover{background:var(--color-surface-sunken)}}

/* News has one category navigation; sidebar branding/tags repeated the same destinations. */
:root[data-snapholo-news] .s-sidebar-about,:root[data-snapholo-news] .s-sidebar-tags,:root[data-snapholo-news] .s-latest-head .s-quick-filters{display:none}
:root[data-snapholo-news]{--corner-radius:var(--ui-control-radius);--corner-radius-lg:var(--ui-group-radius)}
:root[data-snapholo-news] .s-news-tabs{min-height:44px;padding-block:0}
:root[data-snapholo-news] .s-content{padding-top:var(--space-4)}
:root[data-snapholo-news] .s-latest-head{margin-bottom:var(--space-3);gap:var(--space-3)}
:root[data-snapholo-news] .s-sidebar-content{padding:var(--space-4);border-radius:var(--ui-group-radius)}
:root[data-snapholo-news] .s-home-top{gap:var(--space-5)}
:root[data-snapholo-news] .s-card-content{padding:var(--space-4)}

:root[data-snapholo-news] .s-content.s-home{margin-top:0}
:root[data-snapholo-news] .s-container{row-gap:var(--space-5)}
@media(max-width:700px){
 body.service-ui .market-numbers{display:grid;gap:var(--space-1)}
 body.service-ui .market-before{display:none}
 body.service-ui .market-numbers small:after{content:none}
 body.service-ui .market-identity strong{font-size:var(--ui-body-size);line-height:var(--ui-body-line);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 body.service-ui .market-numbers strong{font-size:var(--ui-section-size);line-height:var(--ui-section-line)}
}
body.service-ui .money-currency{font-size:var(--ui-label-size);font-weight:var(--weight-regular);line-height:1;color:var(--color-text-secondary)}

body.service-ui :where(a.control,a.btn,a.cta):is(:hover,:focus-visible,:active){text-decoration:none}
dialog.sheet,body[data-frame] .sheet{border-radius:var(--ui-group-radius) var(--ui-group-radius) 0 0}
body[data-frame] .sheet{padding-inline:var(--ui-group-padding)}body[data-frame] .sheet-head h2{font-size:var(--ui-section-size);line-height:var(--ui-section-line);font-weight:var(--weight-semibold)}
body[data-frame] :where(.top-pick,.candidate-option){border-radius:var(--ui-control-radius)}
body[data-frame] :where(.scan-save-footer button,.review-tabs button,.btn){border-radius:var(--ui-control-radius)}
@media(min-width:1024px){body[data-frame] .sheet{border-radius:var(--ui-group-radius) 0 0 var(--ui-group-radius)}}

body.service-ui .editions button{min-width:44px;min-height:44px;flex-shrink:0}body.service-ui .editions button[data-edition=all]{padding-inline:8px}

/* Account status and actions use natural text height, including browser text zoom. */
body.service-ui .acct .btn,body.service-ui .acct .idp{padding-block:var(--space-3);white-space:normal;text-align:center}body.service-ui .acct .badge{white-space:normal;border-radius:var(--ui-control-radius);font-weight:var(--weight-medium)}
body.service-ui .account-methods{background:var(--color-surface);border-radius:var(--ui-group-radius);margin-top:var(--space-3);overflow:hidden}body.service-ui .account-methods h2{margin:0;padding:var(--space-4) var(--space-4) var(--space-2);font-size:var(--ui-support-size)}body.service-ui .account-methods .rows{border:0}body.service-ui .acct .row__act{max-width:100%}
body.service-ui .grade-table{margin-top:var(--space-4);margin-bottom:var(--space-4)}body.service-ui .grade-table caption{font-size:var(--ui-section-size);font-weight:var(--weight-semibold);color:var(--color-text)}body.service-ui .grade-table tbody td:nth-child(2){font-size:var(--ui-section-size);font-weight:var(--weight-semibold)}
/* Shared Figma role: the currency symbol and amount form one number. */
body.service-ui .money-currency{font:inherit;color:inherit;line-height:inherit}
body.service-ui{background-color:var(--color-page-bg)}

/* Approved density: keep readable text and control hit areas, remove nested gutters. */
dialog .dialog-head{position:relative;justify-content:center;min-height:44px;padding-inline:52px}
dialog .dialog-head h2{flex:1;text-align:center}
dialog .dialog-head :is(.close,.dialog-close,.sheet-close,#close-profile){position:absolute;right:0;top:50%;transform:translateY(-50%)}
.quota-body{text-align:center}.quota-pro{display:flex;flex-direction:column;align-items:center}.quota-actions{justify-content:center}
@media(max-width:767px){
 body.service-ui .ui-page{margin-top:8px}
 body.service-ui :is(.ui-page-title,.support-intro){margin-bottom:8px}
 body.service-ui :is(.ui-section,.group.ui-menu-group){margin-block:8px}
 body.service-ui .ui-section-label{padding-inline:8px}
 body.service-ui .ui-form{gap:8px}
 body.service-ui .acct{padding-block:8px}
 body.service-ui .rows>li{padding-inline:8px}
 body.service-ui .sec{padding-block:8px;gap:8px}
 body.service-ui .site-foot{margin-top:8px}
}

@media(max-width:767px){
 :root[data-snapholo-news] :is(.s-content,.s-container){padding-inline:8px;column-gap:8px;row-gap:8px}
 :root[data-snapholo-news] :is(.s-card-content,.s-sidebar-content){padding:8px}
}

/* /css/my-layout.css */
/* Figma final MY/service frames, 2026-10-21. Shared colour values come from tokens. */
body.redesign-service .my-pro-link.has-pass,body.redesign-service .my-nav-row.has-pass{background:linear-gradient(120deg,#e8fbfa,#eee9ff,#fff0e2);border-radius:12px}body.redesign-service .my-pro-link:not(.has-pass){background:var(--color-surface)}body.redesign-service .my-pro-link img,body.redesign-service [data-my-section=pro] img{object-fit:contain}body.redesign-service .hub-heading .ui-back,body.redesign-service .my-mobile-back{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;min-height:48px;border:0;border-radius:50%;background:rgba(20,199,194,.14);padding:0}#collection-dialog .dialog-head{gap:0}#collection-dialog .collection-detail-jump{width:48px;height:48px;margin:0}#collection-dialog .dialog-head .ui-icon-button{width:48px;height:48px}
body.redesign-service{background:var(--color-page-bg,var(--color-bg));color:var(--color-text);font-family:var(--font-sans)}
.redesign-service :where(main,.my-shell-content){min-width:0}
.redesign-service :where(.group.ui-menu-group,.portfolio-summary,.my-collection,.detail-box,.faq-list,.hub-empty,.list.ui-menu-group,.pro-hero,.pro-option,.pro-app,.pro-compare,.pro-legal,.support-form,.account-methods,.account-preference){background:linear-gradient(135deg,var(--color-area-fill-start,var(--color-surface)) 38%,var(--color-panel,var(--color-surface-sunken)));border:.8px solid var(--color-area-stroke,var(--color-surface));border-radius:var(--radius-xl,16px)}
.my-sidebar,.my-desktop-title{display:none}
.my-mobile-back{display:inline-flex;align-items:center;justify-content:center;width:36px;min-height:44px;margin-right:0;vertical-align:middle}.my-mobile-back img{width:20px;height:20px}
.my-shell{width:100%}.my-shell-content{min-width:0}
.my-eyebrow,.redesign-service .group>.ui-section-label{display:flex;align-items:center;gap:6px;color:var(--color-text-muted);font-size:12px;font-weight:500;line-height:18px;letter-spacing:.04em}
.my-eyebrow:before,.redesign-service .group>.ui-section-label:before{content:'';width:5px;height:15px;border-radius:2px;background:var(--color-brand-action-fill);flex-shrink:0}
.redesign-service .group.ui-menu-group{padding:12px 12px 4px;margin:12px 0}
.redesign-service .group>.ui-section-label{padding:0 16px 4px;margin:0}
.redesign-service .ui-menu-row{min-height:48px;padding:8px 16px;gap:12px}
.redesign-service .ui-menu-row+.ui-menu-row{border:0}
.redesign-service .ui-menu-icon{width:32px;height:32px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-page-bg,var(--color-bg));padding:4px}
.redesign-service .ui-menu-icon img{width:24px;height:24px}
.redesign-service .ui-menu-label{font-weight:500}
.redesign-service .hub-heading{min-height:52px;margin-bottom:8px;gap:0}.redesign-service .hub-heading .ui-back{width:36px;min-height:44px}
.redesign-service .hub-heading .ui-page-title{font-size:24px;line-height:32px;letter-spacing:-.01em}
.redesign-service .page.ui-page{margin-top:8px}
.redesign-service .portfolio-summary{padding:12px 28px 16px;gap:4px;margin:0 0 12px;display:grid;grid-template-columns:minmax(0,1fr)}
.redesign-service .portfolio-heading,.redesign-service .portfolio-label{margin:0;font-size:12px;font-weight:500;line-height:16px;color:var(--color-text-muted)}
.redesign-service .portfolio-heading{display:flex;align-items:center;gap:6px;margin-bottom:8px;line-height:18px}.redesign-service .portfolio-heading:before{content:'';width:5px;height:15px;background:var(--color-brand-action-fill);border-radius:2px}
.redesign-service .portfolio-primary{display:grid;gap:4px}body.redesign-service .portfolio-total{margin:0;font-size:32px;line-height:32px;font-weight:700;white-space:normal;overflow-wrap:anywhere;letter-spacing:-.02em}
.redesign-service .portfolio-total .money-currency{font:inherit;color:inherit;margin:0}
.redesign-service .portfolio-counts{display:flex;gap:6px;font-size:12px;line-height:18px;color:var(--color-text-muted)}.redesign-service .portfolio-counts>span{display:inline-flex;gap:0}body.redesign-service .portfolio-counts :is(span,strong){font-size:12px;line-height:16px;font-weight:500}
.redesign-service .portfolio-counts>span+span:before{content:'·';margin-right:6px}
.redesign-service .portfolio-chart{width:100%;max-width:none;grid-column:1;margin-top:8px}.redesign-service .portfolio-chart svg{height:100px;width:100%}.redesign-service .portfolio-range{font-size:12px}
.redesign-service .hub-state{margin:0}.redesign-service .hub-empty{min-height:58px;padding:16px 20px;font-size:16px;font-weight:600;line-height:24px;color:var(--color-text)}
.redesign-service .faq-list{padding:12px}.redesign-service .faq-list details{padding:0 16px;border-bottom:1px solid var(--color-border)}.redesign-service .faq-list details:last-child{border-bottom:0}
.redesign-service .faq-list summary{padding:12px 28px 12px 0;min-height:48px;font-size:16px;font-weight:500;line-height:24px;cursor:pointer}.redesign-service .faq-list p{font-size:14px;line-height:22px;color:var(--color-text-secondary);margin:0 0 16px}
.redesign-service .faq-list summary{display:block;position:relative}.redesign-service .faq-list summary:after{position:absolute;right:0;top:18px}.redesign-service .faq-preview{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:22px;font-weight:400;color:var(--color-text-secondary);margin-top:12px}.redesign-service .faq-list details[open] .faq-preview{display:none}
.redesign-service .faq-list details+details{border-top:0}.redesign-service .faq-list summary:after{content:'';width:20px;height:20px;background:url('/assets/ui-icons/down.svg') center/20px no-repeat}.redesign-service .faq-list details[open] summary:after{transform:rotate(180deg)}
.redesign-service .choice{min-height:60px;padding:12px 16px}.redesign-service .choice+.choice{border-top:1px solid var(--color-border)}.redesign-service .choice[aria-pressed=true]{background:transparent;color:var(--color-text)}
.redesign-service .choice span:last-child{width:20px;height:20px;border:2px solid var(--color-text-muted);border-radius:50%;font-size:0;position:relative}.redesign-service .choice[aria-pressed=true] span:last-child{border-color:var(--color-brand-link-text)}.redesign-service .choice[aria-pressed=true] span:last-child:after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--color-brand-link-text)}
.redesign-service .list.ui-menu-group{padding:12px 16px}
.redesign-service .my-collection{padding:12px;margin-bottom:24px}.redesign-service .my-welcome{padding:0;min-height:52px;margin-bottom:12px}.redesign-service .my-welcome h1{font-size:24px;line-height:32px}
.redesign-service .collection-toolbar{padding:0;border:0;background:none;gap:8px}.redesign-service .collection-tabs{width:100%;border:0;border-bottom:1px solid var(--color-border);background:none;border-radius:0}.redesign-service .collection-tabs button{flex:1;border:0;border-radius:0;min-height:40px;font-size:14px;background:none}.redesign-service .collection-tabs button[aria-pressed=true]{color:var(--color-text);box-shadow:inset 0 -2px var(--color-brand-link-text)}
.redesign-service .my-search-field{min-width:0;flex:1}.redesign-service .my-search-field>label{display:none}.redesign-service .my-search{height:44px;background:var(--color-surface);border-radius:var(--radius-sm);padding:0 12px;gap:8px}.redesign-service .my-search input{min-width:0;font-size:16px}.redesign-service .collection-tools{margin:0}.redesign-service .my-view{border:0;background:none;padding:0;gap:4px}.redesign-service .my-view button{min-width:32px;min-height:32px;width:32px;height:32px;padding:6px}.redesign-service .my-view button[aria-pressed=true]{background:none;color:var(--color-brand-link-text)}
.redesign-service .collection-list{gap:8px}.redesign-service .collection-row{min-height:72px;padding:8px 12px;border:0;border-radius:var(--radius-sm);background:var(--color-page-bg,var(--color-bg));grid-template-columns:36px minmax(0,1fr) auto;gap:12px}.redesign-service .collection-row>img{width:36px;height:50px}.redesign-service .collection-identity>strong{font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}.redesign-service .collection-identity>small{font-size:12px;line-height:18px;white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}.redesign-service .collection-value>strong{font-size:14px;line-height:20px}.redesign-service .collection-value>small{font-size:12px;line-height:18px}.redesign-service #load-more{display:flex;margin:8px auto 0;border:0;background:none;color:var(--color-brand-link-text);font-size:14px}
.redesign-service .my-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.redesign-service .my-tile{padding:8px;background:var(--color-page-bg,var(--color-bg));border-radius:var(--radius-md)}.redesign-service .my-tile-copy>strong{display:none}.redesign-service .my-tile .collection-value>strong{font-size:14px}.redesign-service .my-tile .collection-value>small{display:none}
.redesign-service dialog::backdrop{background:color-mix(in srgb,var(--color-text) 48%,transparent)}
.redesign-service #collection-dialog .dialog-actions{justify-content:flex-end}
.redesign-service .pro-art{display:none}.redesign-service .pro-hero{padding:16px}.redesign-service .pro-hero h1{font-size:18px;line-height:26px}.redesign-service .pro-hero h1 span{color:inherit;font-weight:600}.redesign-service .pro-benefits{padding:12px;background:none}.redesign-service .pro-option{min-height:76px;padding:16px;border-color:var(--color-area-stroke,var(--color-surface));box-shadow:none}.redesign-service .pro-option[aria-pressed=true]{box-shadow:none}.redesign-service .pro-option-price .money-currency{font:inherit}.redesign-service .pro-app{padding:12px}.redesign-service .pro-legal{display:flex;flex-direction:column;gap:0;padding:12px 16px}.redesign-service .pro-legal a{font-size:16px;min-height:48px;justify-content:space-between}.redesign-service .pro-legal a:after{content:'›'}
.redesign-service .pro-store-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.redesign-service .pro-page{padding:0}
.redesign-service .support-form{padding:16px;gap:16px}.redesign-service .support-intro{margin-bottom:12px}
.redesign-service .acct{width:calc(100% - 2*var(--site-gutter,16px));margin-top:8px;padding:0}.redesign-service .acct>h1{font-size:24px;line-height:32px;margin:0 0 12px;min-height:52px;display:flex;align-items:center}.redesign-service .acct .rows{border:0;background:none}.redesign-service .acct .rows>li{min-height:52px;padding:12px 16px}.redesign-service .acct .acct-who{padding:16px;background:var(--color-surface);border-radius:var(--radius-xl)}
.my-hub-desktop{display:none}
.redesign-service .my-pro-link>.ui-section-label{display:none}
.redesign-service .hub-signin{min-height:160px;display:flex;align-items:center;justify-content:center}
.redesign-service .my-support-link{margin-top:12px;background:linear-gradient(135deg,var(--color-surface),var(--color-panel,var(--color-surface-sunken)));border-radius:16px}
.redesign-service .collection-list{display:grid;gap:8px}.redesign-service .collection-list>li+li{border:0}
.redesign-service .my-collection{background:linear-gradient(135deg,var(--color-surface) 38%,var(--color-panel,var(--color-surface-sunken)));border:1px solid var(--color-area-stroke,var(--color-surface));border-radius:16px}
.redesign-service .collection-row{min-width:0}.redesign-service .collection-list>li{min-width:0}
.redesign-service .my-tile-art{position:relative}.redesign-service .my-tile-quantity{position:absolute;right:4px;top:4px;padding:2px 6px;border-radius:6px;background:var(--color-surface);color:var(--color-text);font-size:12px;line-height:18px;font-weight:500}
.redesign-service .my-view button{display:inline-flex}
.redesign-service .collection-filter-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;background:var(--color-panel,var(--color-surface-sunken));border-radius:8px;width:100%}.redesign-service .collection-filter-chips button{min-width:0;min-height:44px;padding:8px;border:1px solid transparent;border-radius:6px;background:none;color:var(--color-text-secondary);font:inherit;font-size:14px;line-height:20px}.redesign-service .collection-filter-chips button[aria-pressed=true]{color:var(--color-brand-link-text);border-color:var(--color-brand-action-fill);background:color-mix(in srgb,var(--color-brand-action-fill) 8%,transparent);font-weight:600}.redesign-service .collection-filter-chips button:disabled{opacity:.4;cursor:default}
.redesign-service #collection-filter-dialog .my-sort{display:block!important}.redesign-service #collection-filter-dialog .my-sort>span{display:block;margin-bottom:8px}.redesign-service #collection-filter-dialog .collection-filter-field[hidden]{display:none!important}.redesign-service #collection-filter-dialog select[hidden]{display:none!important}
.redesign-service #load-more[hidden],.redesign-service .collection-edit[hidden],.redesign-service .profile-name-panel [hidden]{display:none!important}
.redesign-service .pro-start{width:100%;justify-content:center;min-height:48px;border:0;border-radius:6px;background:var(--color-brand-action-fill);color:var(--color-brand-action-on);font:inherit;font-size:16px;font-weight:600}
.redesign-service #collection-dialog{background:var(--color-page-bg,var(--color-bg));padding:16px;max-width:640px;border-radius:16px}
.redesign-service #collection-dialog .dialog-head{margin:0 0 12px;justify-content:flex-end}.redesign-service #collection-dialog-title{display:none}
.redesign-service #collection-dialog .collection-edit-card,.redesign-service #collection-dialog .collection-edit-holdings{padding:16px 28px;border:1px solid var(--color-area-stroke,var(--color-surface));border-radius:16px;background:linear-gradient(135deg,var(--color-surface),var(--color-panel,var(--color-surface-sunken)));margin-bottom:12px;min-width:0}
.redesign-service #collection-dialog .my-eyebrow{margin:0 0 12px;padding:0}.redesign-service #collection-dialog .collection-edit-identity{grid-template-columns:120px minmax(0,1fr) 32px;align-items:start;gap:12px;margin:0 0 12px}.redesign-service #collection-dialog .collection-edit-identity>img{width:120px;height:170px;object-fit:contain}.redesign-service #collection-dialog .collection-identity>strong{white-space:normal;font-size:16px;line-height:24px}.redesign-service #collection-dialog .collection-identity>small{white-space:normal;font-size:14px;line-height:22px}.redesign-service #collection-dialog .collection-edit-identity>a{width:32px;height:44px;padding:8px}
.redesign-service #collection-dialog .my-detail{display:grid;gap:8px;margin:0;padding:0;border:0}.redesign-service #collection-dialog .my-detail>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;min-width:0}.redesign-service #collection-dialog .my-detail dt{font-size:14px;line-height:22px;color:var(--color-text-muted)}.redesign-service #collection-dialog .my-detail dd{margin:0;font-size:16px;line-height:24px;font-weight:600;overflow-wrap:anywhere;text-align:right}.redesign-service #collection-dialog .my-record-fields{gap:12px}.redesign-service #collection-dialog .my-record-fields>div{display:flex;align-items:center;gap:12px;padding:4px 12px;background:var(--color-page-bg,var(--color-bg));border-radius:12px}.redesign-service #collection-dialog .my-record-fields label{flex:1;margin:0;font-size:14px;min-width:0}.redesign-service #collection-dialog .my-quantity{width:132px;background:none;border:0}.redesign-service #collection-dialog .my-quantity input{min-width:0;width:44px}.redesign-service #collection-dialog .my-paid{width:50%;border:1px solid var(--color-border);background:var(--color-surface);padding:0 8px}.redesign-service #collection-dialog .my-paid input{width:100%;min-width:0;padding:0 4px}.redesign-service #collection-dialog .collection-edit-totals{margin-top:16px}
.redesign-service #collection-dialog .dialog-actions{margin:0;gap:8px}.redesign-service #collection-dialog .dialog-actions .my-icon{border:1px solid var(--color-border);color:var(--color-danger,var(--color-text))}
.redesign-service #collection-dialog .collection-edit-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px}.redesign-service #collection-dialog .collection-edit-card>.my-eyebrow{grid-column:1/-1;margin:0}.redesign-service #collection-dialog .collection-edit-identity{display:contents}.redesign-service #collection-dialog .collection-edit-identity>img{grid-column:1;grid-row:2/4;width:120px;height:auto;max-height:220px;align-self:start}.redesign-service #collection-dialog .collection-edit-identity>.collection-identity{grid-column:2;grid-row:2}.redesign-service #collection-dialog .collection-edit-card>.my-detail{grid-column:2;grid-row:3;gap:8px}.redesign-service #collection-dialog .collection-edit-card>.my-detail>div{border:0;padding:0;min-height:0}.redesign-service #collection-dialog .collection-edit-card>.my-detail dd{font-size:14px;line-height:22px}.redesign-service #collection-dialog .collection-edit-card>.my-detail>div:last-child dd{font-size:20px;line-height:28px}
.redesign-service #collection-dialog .collection-record-notes{margin-top:12px}.redesign-service #collection-dialog .collection-record-notes dd{font-size:14px;font-weight:400}.redesign-service #collection-dialog .my-detail>div{padding:0;border:0;min-height:0}.redesign-service #collection-dialog .my-detail dd{color:var(--color-text)}.redesign-service #collection-dialog .collection-detail-jump{width:44px;height:44px;display:grid;place-items:center;color:var(--color-text);border:0;background:none}.redesign-service #collection-dialog .collection-detail-jump svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
@media(min-width:1024px){.redesign-service #collection-dialog{max-width:960px}.redesign-service #my-record-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.redesign-service #collection-dialog .collection-edit-card,.redesign-service #collection-dialog .collection-edit-holdings{margin:0}.redesign-service #collection-dialog .dialog-actions{grid-column:1/-1}.redesign-service #collection-dialog .collection-edit-identity{grid-template-columns:120px minmax(0,1fr) 32px}}
@media(max-width:390px){.redesign-service #collection-dialog .collection-edit-card,.redesign-service #collection-dialog .collection-edit-holdings{padding:16px}.redesign-service #collection-dialog .collection-edit-identity{grid-template-columns:100px minmax(0,1fr) 32px}.redesign-service #collection-dialog .collection-edit-identity>img{width:100px;height:142px}}
.redesign-service .collection-panel-heading{display:none}
.redesign-service .portfolio-periods{display:flex;gap:4px;justify-content:flex-end;grid-column:1;grid-row:4;margin:4px 0}.redesign-service .portfolio-periods button{border:0;border-radius:999px;min-height:32px;padding:4px 12px;background:transparent;color:var(--color-text-secondary);font:inherit;font-size:12px;font-weight:500}.redesign-service .portfolio-periods button[aria-pressed=true]{background:color-mix(in srgb,var(--color-brand-action-fill) 8%,transparent);color:var(--color-brand-link-text)}
.redesign-service .portfolio-chart{grid-row:5}.redesign-service .portfolio-chart svg{display:block}.redesign-service .portfolio-chart-empty{font-size:12px;line-height:20px;color:var(--color-text-muted)}
.redesign-service .my-search>span{font-size:0;width:20px;height:20px;background:url('/assets/ui-icons/controls/search.svg') center/20px no-repeat}
.redesign-service .acct-gains{display:grid;gap:8px}.redesign-service .acct-gains li{display:block;font-size:14px;line-height:22px;padding:0;margin:0;min-height:0}.redesign-service .acct-gains svg{display:none}.redesign-service .acct-gains li:before{content:'✓';margin-right:8px}.redesign-service .acct-gains small{display:inline;font-size:14px}.redesign-service .acct-gains small:before{content:' · '}
.redesign-service .acct .acct-check{margin-top:12px;font-size:14px}
.redesign-service .acct .row__act:has(#logout){display:flex;flex-direction:column;align-items:center;gap:0;margin-top:24px!important}.redesign-service .acct :is(#logout,#del){border:0;background:none;font-size:12px;color:var(--color-text-muted);padding:12px;min-height:44px}
.redesign-service .acct .confirm{padding:16px;border:1px solid var(--color-border);background:var(--color-surface);border-radius:16px}.redesign-service .acct .confirm .row__act{justify-content:flex-end}
body.redesign-service .profile-name-panel{display:grid;grid-template-columns:32px minmax(0,1fr) 44px;align-items:center;gap:12px;padding:8px 28px;background:linear-gradient(135deg,var(--color-surface),var(--color-panel,var(--color-surface-sunken)));border:.8px solid var(--color-area-stroke,var(--color-surface));border-radius:16px;margin-bottom:12px}
.redesign-service .profile-name-panel label{font-size:12px;line-height:16px;font-weight:500;color:var(--color-text-muted)}.redesign-service .profile-name-panel strong{display:block;font-size:16px;line-height:24px;font-weight:600}.redesign-service .profile-name-panel input{font:inherit;width:100%;min-height:44px;border:1px solid var(--color-border);border-radius:6px;padding:8px;background:var(--color-surface);color:var(--color-text)}
.redesign-service .profile-name-panel .profile-edit-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}.redesign-service .profile-name-panel [hidden]{display:none}.redesign-service .profile-name-panel .profile-status{grid-column:1/-1;font-size:14px;color:var(--color-text-muted);margin:0}.redesign-service .profile-name-panel .profile-status:empty{display:none}
body.redesign-service.legal-document main{max-width:640px;width:calc(100% - 32px);padding:0;margin:16px auto 24px}
.redesign-service.legal-document main>h1{font-size:24px;line-height:32px;min-height:52px;margin:0 0 12px;display:flex;align-items:center;font-weight:600;letter-spacing:-.01em}
.legal-section{margin:12px 0;padding:16px 28px;border:1px solid var(--color-area-stroke,var(--color-surface));border-radius:16px;background:linear-gradient(135deg,var(--color-surface) 38%,var(--color-panel,var(--color-surface-sunken)));color:var(--color-text-secondary);font-size:14px;line-height:24px;overflow-wrap:anywhere}
.legal-document .legal-section h2{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;line-height:18px;letter-spacing:.04em;margin:0 0 12px;padding:0;border:0;color:var(--color-text-muted)}
.legal-section h2:before{content:'';flex-shrink:0;width:5px;height:15px;border-radius:2px;background:var(--color-brand-action-fill)}.legal-section :is(p,ul){margin:0 0 12px}.legal-section>:last-child{margin-bottom:0}.legal-section ul{padding-left:20px}.legal-section li{margin:0 0 8px}.legal-section strong{font-weight:600;color:var(--color-text)}
.redesign-service:not(.my-layout) main:has(.hero){width:calc(100% - 2*var(--site-gutter,16px));max-width:1184px;margin:0 auto 24px}
.redesign-service .hero{padding:0;margin:0 0 12px}.redesign-service .hero h1{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em;margin:16px 0 12px;max-width:none}.redesign-service .hero .lead,.redesign-service .hero .actions{padding:16px 28px;margin:0;background:linear-gradient(135deg,var(--color-surface) 38%,var(--color-panel,var(--color-surface-sunken)));font-size:14px;line-height:24px;max-width:none}.redesign-service .hero .lead{border-radius:16px 16px 0 0;padding-bottom:0}.redesign-service .hero .actions{border-radius:0 0 16px 16px;padding-top:12px}.redesign-service .hero .actions a{font-size:14px;min-height:44px}
.redesign-service .sec{display:block;border:1px solid var(--color-area-stroke,var(--color-surface));border-radius:16px;padding:16px 28px;margin:12px 0;background:linear-gradient(135deg,var(--color-surface) 38%,var(--color-panel,var(--color-surface-sunken)))}
.redesign-service .sec h2{display:flex;align-items:center;gap:6px;font-size:12px;line-height:18px;font-weight:500;letter-spacing:.04em;margin:0 0 12px;color:var(--color-text-muted)}.redesign-service .sec h2:before{content:'';width:5px;height:15px;border-radius:2px;background:var(--color-brand-action-fill);flex-shrink:0}.redesign-service .sec-body{max-width:none;font-size:14px;line-height:24px}.redesign-service .sec-body .note{background:none;border:0;border-radius:0;padding:0}
.redesign-service .sec table{font-size:14px}.redesign-service .sec :is(th,td){padding:8px 12px;border:0;background:var(--color-page-bg,var(--color-bg))}.redesign-service .sec tr+tr :is(th,td){border-top:4px solid var(--color-area-fill-start,var(--color-surface))}.redesign-service .sec th{width:40%;font-weight:500}
@media(min-width:1024px){.redesign-service .sec{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px}.redesign-service .sec h2{align-self:start}.redesign-service .hero .lead{max-width:none}.redesign-service .my-hub-desktop .my-welcome{justify-content:flex-end}}
@media(min-width:1024px){
 .my-desktop-title{display:block;width:calc(100% - 2*var(--site-gutter,16px));max-width:1184px;margin:24px auto;font-size:24px;line-height:32px;font-weight:600}
 .my-shell{display:grid;grid-template-columns:280px minmax(0,880px);gap:24px;max-width:1184px;width:calc(100% - 2*var(--site-gutter,16px));margin:0 auto 24px;align-items:start}
 .my-sidebar{display:block;padding:20px 16px;background:linear-gradient(135deg,var(--color-area-fill-start,var(--color-surface)) 38%,var(--color-panel,var(--color-surface-sunken)));border:1px solid var(--color-area-stroke,var(--color-surface));border-radius:var(--radius-xl)}
 .my-nav-profile{padding:0 12px 16px;display:grid;gap:8px}.my-nav-profile>strong:empty{display:none}.my-nav-profile>small{justify-self:start;border:1px solid var(--color-border);border-radius:999px;padding:4px 8px;font-size:12px;line-height:16px;color:var(--color-text-secondary)}
 .my-eyebrow{margin:0;padding:0 12px 8px}.my-nav-row{display:flex;align-items:center;min-height:44px;gap:8px;padding:8px 12px;font-size:14px;line-height:20px;color:var(--color-text);text-decoration:none;border-radius:var(--radius-sm)}.my-nav-row>img{width:20px;height:20px}.my-nav-row>span:not(.my-nav-icon){flex:1;min-width:0}.my-nav-row>small{color:var(--color-text-muted);font-size:12px}.my-nav-row[aria-current=page]{color:var(--color-brand-link-text);background:color-mix(in srgb,var(--color-brand-action-fill) 8%,transparent)}
 .my-nav-pro{margin:16px 0 20px}.my-nav-help{margin-top:20px;padding-top:12px;border-top:1px solid var(--color-border)}.my-nav-help .my-nav-row>img{display:none}.my-nav-help .my-nav-row{color:var(--color-text-muted)}
 body.my-layout .my-shell-content,body.my-layout main.service-collection.my-page,body.my-layout .acct.my-shell-content{width:100%;max-width:none;margin:0;padding:0}
 .my-layout .my-shell-content>.hub-heading,.my-layout .my-shell-content>.my-welcome>h1,.my-layout .my-shell-content>.ui-page-title,.my-layout .my-shell-content.acct>h1{display:none}
 .my-layout .my-mobile-back{display:none}
 .my-layout .portfolio-summary{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:24px 40px;gap:8px 32px}.my-layout .portfolio-label{grid-column:1}.my-layout .portfolio-primary{grid-column:1}.my-layout .portfolio-chart{grid-column:2;grid-row:1/4;margin:0}.my-layout .portfolio-chart svg{height:140px}
 .my-layout .my-collection{padding:16px 24px}.my-layout .my-welcome{justify-content:flex-end;margin:0 0 8px}.my-layout .collection-tabs{display:none}.my-layout .collection-row{padding:8px 16px}.my-layout .my-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}.my-layout .my-search input{font-size:14px}
 .my-layout .my-welcome{display:none}.my-layout .collection-panel-heading{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-bottom:8px}.my-layout #collection-title{position:static;width:auto;height:auto;clip:auto;clip-path:none;white-space:normal;padding:0;margin:0;overflow:visible;font-size:12px;font-weight:500;line-height:18px;letter-spacing:.04em;color:var(--color-text-muted)}.my-layout #collection-title:before{content:'';display:inline-block;vertical-align:middle;width:5px;height:15px;border-radius:2px;background:var(--color-brand-action-fill);margin-right:6px}
 .my-layout .portfolio-periods{grid-column:2;grid-row:1;margin:0;align-self:start}.my-layout .portfolio-chart{grid-row:2/5;grid-column:2}
 .my-layout .portfolio-summary{grid-template-rows:18px 18px auto;min-height:236px;align-content:start}.my-layout .portfolio-heading{grid-column:1;grid-row:1}.my-layout .portfolio-label{grid-column:1;grid-row:2}.my-layout .portfolio-primary{grid-column:1;grid-row:3}.my-layout .portfolio-chart{grid-column:2;grid-row:2/4}
 .my-hub-desktop{display:block}.my-hub-mobile{display:none}
 .my-layout .my-hub-desktop .my-page{width:100%;max-width:none;margin:0}.my-layout .my-hub-desktop .my-welcome h1{display:none}
}
@media(max-width:767px){
 .redesign-service dialog#collection-dialog,.redesign-service dialog#collection-filter-dialog,.redesign-service dialog#collection-add-dialog{width:100%;max-width:none;max-height:90dvh;margin:auto 0 0;border-radius:16px 16px 0 0;padding:16px 16px max(16px,env(safe-area-inset-bottom))}
 .redesign-service .collection-tools .my-view{position:absolute;right:12px;top:0}.redesign-service .collection-tools{position:static}.redesign-service .collection-toolbar{position:relative;padding-top:0;padding-bottom:36px}
 .redesign-service .collection-tools .my-view{top:auto;bottom:0}.redesign-service .my-search-field{width:calc(100% - 52px)}
 .redesign-service .collection-row{grid-template-columns:36px minmax(0,1fr) auto}.redesign-service .collection-value{grid-column:auto;text-align:right}
}

/* Visual audit: the account form and its translated heading retain the approved geometry. */
body.redesign-service .acct{padding:0;margin-top:8px}
body.redesign-service .acct>h1{margin:0 0 8px;min-height:52px;font-size:24px;line-height:32px;font-weight:600;gap:0}
body.redesign-service .page.ui-page>h1{margin:0 0 8px;min-height:52px;display:flex;align-items:center}
body.redesign-service .list.ui-menu-group{padding:12px 12px 4px;margin:0;overflow:hidden}
body.redesign-service .list.ui-menu-group>.my-eyebrow{display:none}
body.redesign-service .choice{font-size:16px;font-weight:500}
body.redesign-service .profile-name-panel>.ui-icon-button{border:0;background:transparent;box-shadow:none;padding:12px}
body.redesign-service .profile-name-panel .profile-edit-actions,body.redesign-service .profile-name-panel .profile-status{grid-column:1/-1}
body.redesign-service .account-methods{margin:0;padding:12px 12px 4px;background:linear-gradient(135deg,var(--color-area-fill-start) 38%,var(--color-panel));border:.8px solid var(--color-area-stroke)}
body.redesign-service .account-methods h2{display:flex;align-items:center;gap:6px;margin:0 0 4px;padding:0 16px;font-size:12px;line-height:18px;font-weight:500;color:var(--color-text-muted);letter-spacing:.04em}
body.redesign-service .account-methods h2:before{content:'';width:5px;height:15px;border-radius:2px;background:var(--color-brand-action-fill)}
body.redesign-service .account-methods .rows{border:0;background:transparent}
body.redesign-service .account-methods .rows>li{min-height:48px;flex-wrap:nowrap;padding:8px 16px;gap:12px}
body.redesign-service .account-methods .row__main{flex:1;gap:12px}
body.redesign-service .account-methods .row__main>svg{width:32px;height:32px;padding:4px;border:1px solid var(--color-border);border-radius:4px;box-sizing:border-box}
body.redesign-service .account-methods .row__txt{flex:1}
body.redesign-service .account-methods .row__name{justify-content:space-between;flex-wrap:nowrap;gap:8px;font-size:16px;line-height:24px;font-weight:500}
body.redesign-service .account-methods .badge{border-radius:999px;font-size:12px;line-height:16px;font-weight:500;white-space:nowrap}
body.redesign-service .account-methods a.badge{min-height:24px;padding:2px 12px;text-decoration:none}
body.redesign-service .account-preference{margin:12px 0 0;padding:12px 28px;border:.8px solid var(--color-area-stroke);background:linear-gradient(135deg,var(--color-area-fill-start) 38%,var(--color-panel))}
body.redesign-service .account-preference>label{display:flex;align-items:center;gap:12px;min-height:40px;font-size:16px;line-height:24px;font-weight:500}
body.redesign-service .account-preference label>span:nth-child(2){flex:1}
body.redesign-service .account-preference input{appearance:none;position:relative;flex:none;width:44px;height:16px;margin:0;border:0;border-radius:999px;background:var(--color-border-strong)}
body.redesign-service .account-preference input:before{content:'';position:absolute;left:0;top:-4px;width:24px;height:24px;border:1px solid var(--color-border);border-radius:50%;background:var(--color-page-bg)}
body.redesign-service .account-preference input:checked{background:var(--color-brand-action-fill)}
body.redesign-service .account-preference input:checked:before{left:20px}
body.redesign-service .acct .row__act:has(#logout){margin-top:24px!important}
body.redesign-service .acct #logout{font-size:13px;font-weight:500}
body.redesign-service .acct:not(.acct--wide){max-width:640px}
body.redesign-service .signin-panel{padding:24px 28px 12px;border:.8px solid var(--color-area-stroke);border-radius:16px;background:linear-gradient(135deg,var(--color-area-fill-start) 38%,var(--color-panel))}
body.redesign-service .signin-panel .signin-benefits-title{font-size:14px;font-weight:600;line-height:20px;margin:0 16px 4px;padding:0}
body.redesign-service .signin-panel .acct-gains{padding:0 16px;margin:0 0 24px;gap:4px;background:none;border:0}
body.redesign-service .signin-panel .acct-gains li{font-size:14px;line-height:20px;font-weight:400;color:var(--color-text-secondary)}
body.redesign-service .signin-panel .acct-gains li:before{content:'';display:inline-block;vertical-align:middle;width:16px;height:16px;margin-right:4px;background:url('/assets/ui-icons/check.svg') center/16px no-repeat}
body.redesign-service .signin-panel .acct-stack{padding:0;margin:0;gap:12px;border:0;background:none}
body.redesign-service .signin-panel .acct-stack:empty{min-height:188px}   /* 로그인 단추 · 동의 · 약관 줄이 /auth/providers 뒤에 채워진다 — 넓은 화면 실측 높이를 미리 잡아 바닥이 밀리지 않게(CLS · 2026-10-22) */
body.redesign-service .signin-panel .idp{min-height:44px;padding:10px 12px;font-size:14px;line-height:20px;border-radius:6px}
body.redesign-service .signin-panel .acct-check{margin:0;min-height:44px;gap:12px;font-size:16px;line-height:24px}
body.redesign-service .signin-panel .acct-check input{appearance:none;width:22px;height:22px;border:2px solid var(--color-text-muted);border-radius:6px;background:transparent}
body.redesign-service .signin-panel .acct-check input:checked{background:var(--color-brand-action-fill) url('/assets/ui-icons/check.svg') center/16px no-repeat}
body.redesign-service .signin-panel .acct-legal{font-size:14px;line-height:20px;font-weight:400}
body.redesign-service .signin-panel .acct-legal a{color:var(--color-brand-link-text);text-decoration:none}
@media(max-width:1023px){body.redesign-service .hub-heading .ui-back{width:36px}body.redesign-service .my-mobile-back{width:36px}body.redesign-service .list.ui-menu-group>.my-eyebrow{display:none}}
@media(min-width:1024px){.my-desktop-title{box-sizing:border-box;padding:0 16px;margin-top:18px;margin-bottom:34px}body.redesign-service .list.ui-menu-group{padding:12px 24px 4px}body.redesign-service .list.ui-menu-group>.my-eyebrow{display:flex;padding:0 16px;margin-bottom:4px}body.redesign-service .acct:not(.acct--wide){margin-top:8px}body.redesign-service .acct:not(.acct--wide)>h1{padding:0 16px;margin-bottom:24px;min-height:52px}body.redesign-service .signin-panel{padding:36px 40px 24px}}
body.redesign-service .profile-name-panel strong{margin:0}
body.redesign-service .profile-name-panel>.ui-icon-button{min-height:40px;height:40px;padding:10px}
body.redesign-service .account-preference>p:empty{display:none}
body.redesign-service .my-hub-mobile>.ui-page-title{min-height:52px;display:flex;align-items:center;margin:0 0 8px}
@media(min-width:1024px){body.redesign-service .my-desktop-title{padding:0 16px;margin:18px auto 34px}body.redesign-service .acct.my-shell-content{margin-top:0}}
body.redesign-service .profile-name-panel>div:not(.profile-edit-actions){display:grid;gap:0}
body.redesign-service .profile-name-panel label{display:block}
body.redesign-service .my-shell-content .collection-toolbar{position:relative;padding-bottom:36px;margin-bottom:8px}
body.redesign-service .my-shell-content .collection-tools{position:static}
body.redesign-service .my-shell-content .collection-tools .my-view{position:absolute;right:0;bottom:0;top:auto;gap:0}
body.redesign-service .my-view [data-view=tile]{order:-1}
body.redesign-service .my-view button{width:28px;height:28px;min-width:28px;min-height:28px}
body.redesign-service .my-shell-content #my-results{position:relative;margin:-36px 16px 12px;pointer-events:none;text-align:left;min-height:24px;font-size:12px;line-height:24px}
body.redesign-service .collection-row{min-height:64px;padding:8px 16px;grid-template-columns:32px minmax(0,1fr) auto}
body.redesign-service .collection-row>img{width:32px;height:48px}
body.redesign-service .collection-identity>strong{font-size:16px;line-height:24px}
body.redesign-service .collection-identity>small{font-size:14px;line-height:20px}
body.redesign-service .collection-value>small{font-size:14px;line-height:20px}
body.redesign-service .collection-heading-actions .ui-button,body.redesign-service .collection-heading-actions .ui-icon-button{border:0;background:transparent;box-shadow:none}
body.redesign-service #load-more{min-height:32px;padding:4px 12px;gap:2px}
@media(min-width:1024px){
 body.my-layout .my-hub-desktop .my-page{margin-top:0}
 body.my-layout .my-sidebar{padding:16px}
 body.my-layout .my-nav-profile{gap:8px;padding-bottom:16px}
 body.my-layout .my-nav-profile>small{padding:4px 8px;background:var(--color-page-bg)}
 body.my-layout .my-nav-row{font-weight:500;gap:12px}
 body.my-layout .my-nav-help{margin-top:20px;padding-top:16px}
 body.my-layout .my-nav-help .my-nav-row{min-height:36px;padding:8px 12px}
 body.my-layout .my-nav-pro{margin:16px 0}
 body.my-layout .my-eyebrow{padding-bottom:4px}
 body.my-layout .portfolio-summary{min-height:236px;height:236px;grid-template-rows:18px 18px minmax(0,1fr);gap:8px 32px;align-items:start;margin-bottom:24px}
 body.my-layout .portfolio-primary{align-self:start;gap:16px}
 body.my-layout .portfolio-chart{grid-row:2/4;align-self:start;padding-top:4px}
 body.my-layout .portfolio-chart svg{height:112px}
 body.my-layout .portfolio-chart .portfolio-change{text-align:left}
 body.my-layout .portfolio-periods{grid-row:2;z-index:1;justify-content:flex-end}
 body.my-layout .portfolio-counts{gap:44px}
 body.my-layout .portfolio-counts>span{display:block;position:relative;font-size:24px;line-height:32px;font-weight:600}
 body.my-layout .portfolio-counts>span>strong{font-size:24px;line-height:32px;font-weight:600}
 body.my-layout .portfolio-counts>span:before{content:attr(data-label);display:block;font-size:12px;line-height:18px;font-weight:500;margin:0 0 4px}
 body.my-layout .my-collection{margin-top:0;padding-top:0}
 body.my-layout .my-collection .collection-panel-heading{min-height:44px;margin-bottom:8px}
}
body.redesign-service .collection-row>img{grid-row:auto}
body.redesign-service .collection-row .collection-value{grid-column:3;min-width:0;max-width:120px;text-align:right}
body.redesign-service .collection-value>strong{white-space:normal;overflow-wrap:anywhere}
body.redesign-service .pro-hero{padding:12px 28px 16px;gap:4px}
body.redesign-service .pro-hero h1{font-size:18px;line-height:28px}
body.redesign-service .pro-hero p{font-size:14px;line-height:20px}
body.redesign-service .pro-benefits{padding:20px 0 8px;gap:12px}
body.redesign-service .pro-plans{gap:12px}
body.redesign-service .pro-option{grid-template-columns:44px minmax(0,1fr) auto;gap:12px;min-height:70px;padding:12px 16px}
body.redesign-service .pro-option[aria-pressed=true]{background:linear-gradient(135deg,var(--color-area-fill-start) 38%,var(--color-panel))}
body.redesign-service .pro-radio{width:22px;height:22px;border:2px solid var(--color-text-muted)}
body.redesign-service .pro-option[aria-pressed=true] .pro-radio:after{width:10px;height:10px}
body.redesign-service .pro-option-name strong{font-size:16px;line-height:24px}
body.redesign-service .pro-option-name small{font-size:12px;line-height:18px}
body.redesign-service .pro-option-price{font-size:20px;line-height:28px;font-weight:600}
body.redesign-service .pro-app{padding:12px}
body.redesign-service .pro-status{font-size:14px;line-height:20px;font-weight:600;color:var(--color-text);margin:0 0 8px}
body.redesign-service .pro-store-links{display:flex;align-items:center;justify-content:center;gap:0;height:56px}
body.redesign-service .pro-store-links a{min-width:0;display:flex;align-items:center}
body.redesign-service .pro-store-links img{max-width:100%;object-fit:contain}
body.redesign-service .pro-compare>summary{padding:12px 16px;min-height:48px;font-weight:600;color:var(--color-text)}
body.redesign-service .pro-compare>summary:after{content:'';width:20px;height:20px;background:url('/assets/ui-icons/down.svg') center/20px no-repeat}
body.redesign-service .pro-compare[open]>summary:after{transform:rotate(180deg)}
body.redesign-service .pro-legal{padding:12px}
body.redesign-service .pro-legal a{padding:12px 16px;min-height:44px;font-weight:500}
body.redesign-service .pro-legal a:after{content:'';width:20px;height:20px;background:url('/assets/ui-icons/right.svg') center/20px no-repeat}
@media(max-width:1023px){body.redesign-service:has(.pro-page) .hub-heading{min-height:36px}}
body.redesign-service .pro-store-links{gap:8px}
body.redesign-service .pro-legal a{padding:10px 16px;line-height:24px}
body.redesign-service .pro-hero{padding-bottom:12px}
@media(max-width:1023px){body.redesign-service:has(.pro-page) .hub-heading{min-height:28px}}
body.redesign-service .support-form{padding:12px 28px;gap:12px;border:.8px solid var(--color-area-stroke);background:linear-gradient(135deg,var(--color-area-fill-start) 38%,var(--color-panel))}
body.redesign-service .support-form .ui-field{gap:8px}
body.redesign-service .support-form .ui-field>label{font-size:14px;line-height:20px;font-weight:600}
body.redesign-service .support-form .ui-input{min-height:44px;background:var(--color-page-bg);font-size:16px;line-height:24px;padding:10px 12px}
body.redesign-service .support-form select.ui-input{appearance:none;padding-right:40px;background:var(--color-page-bg) url('/assets/ui-icons/down.svg') right 12px center/20px no-repeat;font-size:14px}
body.redesign-service .support-form textarea.ui-input{height:132px;min-height:132px;resize:vertical;padding:8px 12px}
body.redesign-service .support-form .field-hint{margin-top:8px;font-size:14px;line-height:20px}
body.redesign-service .support-form .support-privacy{font-size:14px;line-height:20px}
body.redesign-service .support-privacy a{text-decoration:none}
body.redesign-service .support-submit{justify-self:end;width:auto;font-size:16px;line-height:24px;padding:10px 20px;min-height:44px}
body.redesign-service .support-links{padding:12px;margin:12px 0;border:.8px solid var(--color-area-stroke);border-radius:16px;background:linear-gradient(135deg,var(--color-area-fill-start) 38%,var(--color-panel))}
body.redesign-service .support-links .ui-menu-row{padding:8px 16px;min-height:44px;gap:12px;border:0}
body.redesign-service .support-links .ui-row-copy{font-size:16px;line-height:24px;min-width:0}
body.redesign-service .support-links .ui-row-copy>span{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
body.redesign-service .support-links small{display:inline;margin:0;font-size:14px;line-height:20px;font-weight:400}
body.redesign-service .account-deletion{padding:12px 28px;border:.8px solid var(--color-area-stroke);border-radius:16px;background:linear-gradient(135deg,var(--color-area-fill-start) 38%,var(--color-panel))}
body.redesign-service .account-deletion summary{position:relative;list-style:none;padding:12px 32px 12px 0;font-size:16px;line-height:24px;font-weight:500;color:var(--color-text)}
body.redesign-service .account-deletion summary::-webkit-details-marker{display:none}
body.redesign-service .account-deletion summary:after{content:'';position:absolute;right:0;top:14px;width:20px;height:20px;background:url('/assets/ui-icons/down.svg') center/20px no-repeat}
body.redesign-service .account-deletion[open] summary:after{transform:rotate(180deg)}
body.redesign-service .deletion-preview{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:12px;font-size:14px;line-height:20px;font-weight:400;color:var(--color-text-secondary)}
body.redesign-service .account-deletion[open] .deletion-preview{display:none}
body.redesign-service.legal-document main{margin-top:8px}
body.redesign-service.legal-document main>h1{margin-bottom:8px}
body.redesign-service.legal-document .legal-section{margin:12px 0;padding:12px 28px;border-width:.8px;font-size:16px;line-height:26px}
body.redesign-service.legal-document .legal-section h2{font-size:12px;line-height:18px;margin-bottom:12px}
body.redesign-service.legal-document .legal-section ul{padding-left:16px}
body.redesign-service.legal-document .legal-section li{margin-bottom:4px}
@media(min-width:1024px){body.redesign-service.legal-document main{margin-top:8px}}
body.redesign-service.legal-document main>h1+.legal-section{margin-top:8px}
body.redesign-service.legal-document .legal-section{color:var(--color-text)}
body.redesign-service .langs{gap:12px;font-size:14px;line-height:20px;min-height:44px;align-items:center}
body.redesign-service .langs a{min-height:44px;padding:0;font-weight:400;box-shadow:none}
body.redesign-service .langs a[aria-current]{font-weight:600;box-shadow:none}
body.redesign-service .hero{padding:0;margin:0 0 12px}
body.redesign-service .hero h1{margin:14px 0 18px;font-size:24px;line-height:32px;font-weight:600}
body.redesign-service .hero .lead{padding:12px 28px 0;font-size:16px;line-height:26px;color:var(--color-text)}
body.redesign-service .hero .actions{padding:12px 28px;margin:0;gap:8px}
body.redesign-service .hero .actions a{flex:none;min-height:44px;padding:10px 20px;border-radius:6px;font-size:16px;line-height:24px;font-weight:600}
body.redesign-service .sec{padding:12px;border-width:.8px;margin:12px 0;gap:12px}
body.redesign-service .sec h2{padding:0 16px;font-size:12px;line-height:18px;font-weight:500;margin:0 0 12px;color:var(--color-text-muted);letter-spacing:.04em}
body.redesign-service .sec-body{font-size:16px;line-height:26px;color:var(--color-text)}
body.redesign-service .sec-body p{margin:12px 16px 0;color:var(--color-text)}
body.redesign-service .sec-body>p:first-child{margin-top:0}
body.redesign-service .sec-body table{font-size:14px;line-height:20px}
body.redesign-service .sec :is(th,td){padding:12px 16px;color:var(--color-text);border:0;line-height:20px;background:var(--color-page-bg)}
body.redesign-service .sec th{width:40%;font-weight:600}
body.redesign-service .sec tr+tr :is(th,td){border-top:0}
body.redesign-service .sec-body tr{border-radius:8px;overflow:hidden}
@media(max-width:1023px){
 body.redesign-service .hero+.sec tr{display:block;padding:12px 16px;background:var(--color-page-bg);border-radius:8px}
 body.redesign-service .hero+.sec :is(th,td){display:block;padding:0;width:auto}
 body.redesign-service .hero+.sec th{margin-bottom:4px}
}
@media(min-width:1024px){body.redesign-service .sec{grid-template-columns:280px minmax(0,1fr);padding:24px;gap:24px}body.redesign-service .sec h2{padding:0}}
body.redesign-service .sec-body .plain li{padding:8px 0;border:0;color:var(--color-text);font-size:16px;line-height:26px}
body.redesign-service .sec-body .note{display:list-item;margin-left:32px;padding:0;border:0;background:none}
@media(min-width:1024px){
 body.redesign-service .hero h1{padding:0 16px;margin:30px 0 34px}
 body.redesign-service .hero .lead{padding:24px 24px 0}
 body.redesign-service .hero .actions{padding:12px 24px 24px}
 body.redesign-service .sec{margin:24px 0;padding:24px;grid-template-columns:280px minmax(0,1fr);gap:24px}
 body.redesign-service .sec h2{padding-left:16px}
 body.redesign-service .sec th{width:30.8%}
 body.redesign-service .sec :is(th,td){padding:14px 16px}
 body.redesign-service .sec-body p{margin:12px 0 0}
 body.redesign-service .sec-body>p:first-child{margin-top:0}
 body.redesign-service .sec-body .note{margin-left:16px}
 body.redesign-service .sec-body .go{margin-top:12px}
 body.redesign-service .sec-body .go a{min-height:44px}
}
body.redesign-service .hero-intro{border:.8px solid var(--color-area-stroke);border-radius:16px;background:linear-gradient(135deg,var(--color-area-fill-start) 38%,var(--color-panel))}
body.redesign-service .hero-intro .lead{background:none;border-radius:0}
body.redesign-service .hero-intro .stamp{padding:12px 28px;margin:0;font-size:13px;line-height:18px;color:var(--color-text-muted)}
body.redesign-service .sec th a{display:block;min-height:0;color:inherit;text-decoration:none}
body.redesign-service .sec-body ol.steps{display:block;counter-reset:none;list-style:decimal;padding:0 0 0 22px;margin:0 16px;font-size:16px;line-height:26px}
body.redesign-service .sec-body ol.steps li{display:list-item;padding:0;margin:0 0 4px;border:0;color:var(--color-text)}
body.redesign-service .sec-body ol.steps li:before{display:none}
body.redesign-service .sec-body ol.steps li:last-child{margin-bottom:0}
@media(min-width:1024px){body.redesign-service .hero-intro .stamp{padding:12px 24px 24px}body.redesign-service .sec-body ol.steps{margin:0}}
body.redesign-service.legal-document .legal-section :is(p,ul,ol,li){font-size:16px;line-height:26px}
body.redesign-service .sec-body p,body.redesign-service .sec-body ol.steps li{font-size:16px;line-height:26px}
body.redesign-service .profile-name-panel.is-editing{grid-template-columns:32px minmax(0,1fr) 72px;padding:6px 28px}
body.redesign-service .profile-name-panel.is-editing label{display:none}
body.redesign-service .profile-name-panel.is-editing .profile-edit-actions{grid-column:3;grid-row:1;gap:4px}
body.redesign-service .profile-edit-actions button{width:32px;min-width:32px;height:40px;min-height:40px;padding:4px;border:0;background:transparent;box-shadow:none}
body.redesign-service .profile-edit-actions button[type=submit]{order:-1}
body.redesign-service .profile-edit-actions button[type=submit] img{filter:var(--icon-brand-filter,none)}
body.redesign-service .profile-name-panel input{font-size:16px;line-height:24px;font-weight:400}
body.redesign-service.legal-document .legal-section{word-break:normal;overflow-wrap:break-word}
body.redesign-service .hero .lead,body.redesign-service .sec-body{word-break:normal}
body.redesign-service .profile-name-panel.is-editing{grid-template-columns:32px minmax(0,1fr) 88px}
body.redesign-service .profile-name-panel.is-editing input{width:calc(100% + 12px)}
body.redesign-service .profile-name-panel .profile-edit-actions button{width:40px;min-width:40px;background:transparent;border:0;color:var(--color-text-muted)}
body.redesign-service .profile-name-panel .profile-edit-actions button[type=submit]{color:var(--color-brand-link-text)}
body.redesign-service dialog::backdrop{backdrop-filter:none;background:color-mix(in srgb,var(--color-text) 45%,transparent)}
body.redesign-service #collection-filter-dialog .select-trigger{display:none}
body.redesign-service #collection-filter-dialog .my-view-tools{display:contents}
body.redesign-service #collection-filter-dialog .collection-filter-body{display:flex;flex-direction:column;gap:16px}
body.redesign-service #collection-filter-dialog .collection-filter-field:has(#my-grouping){order:1}
body.redesign-service #collection-filter-dialog .my-sort{order:2}
body.redesign-service #collection-filter-dialog .collection-filter-field:has(#my-basis){order:3}
body.redesign-service #collection-filter-dialog .collection-filter-field>label,body.redesign-service #collection-filter-dialog .my-sort>span{font-size:12px;line-height:18px;color:var(--color-text-muted);margin-bottom:8px}
body.redesign-service #collection-filter-dialog .collection-filter-chips{min-height:52px}
body.redesign-service #collection-filter-dialog .dialog-head h2{font-size:18px;line-height:28px}
body.redesign-service #collection-filter-dialog .dialog-head .ui-icon-button{border:0;background:transparent;width:44px;height:32px;min-height:32px;padding:4px}
body.redesign-service #collection-filter-dialog .dialog-head .ui-icon-button img{width:24px;height:24px}
body.redesign-service #collection-dialog .dialog-actions{position:static;height:44px;min-height:44px;padding:0;background:transparent;align-items:center;justify-content:flex-end}
body.redesign-service #collection-dialog .dialog-actions button{height:44px;min-height:44px;flex:none}
body.redesign-service #collection-dialog .my-quantity input{border:0;background:transparent;text-align:center;padding:0;font-size:16px;font-weight:600}
body.redesign-service #collection-dialog .my-quantity button{width:36px;height:36px;min-height:36px;border:0;border-radius:8px;background:color-mix(in srgb,var(--color-brand-action-fill) 6%,transparent)}
@media(min-width:1024px){
 body.redesign-service #collection-dialog{height:auto;max-height:90dvh;margin:auto;padding:24px;overflow:auto;display:block}
 body.redesign-service #collection-dialog-body{flex:none;overflow:visible}
 body.redesign-service #my-record-form{display:block;min-height:0;padding-left:440px}
 body.redesign-service #collection-dialog .dialog-head{margin-bottom:24px}
 body.redesign-service #collection-dialog .collection-edit-card{display:block;padding:24px 40px;min-height:270px;margin-bottom:16px}
 body.redesign-service #collection-dialog .collection-edit-card>.my-eyebrow{margin-bottom:12px}
 body.redesign-service #collection-dialog .collection-edit-identity{display:block;margin-bottom:12px}
 body.redesign-service #collection-dialog .collection-edit-identity>img{position:absolute;left:24px;top:76px;width:408px;height:570px;max-height:none;object-fit:contain}
 body.redesign-service #collection-dialog .collection-edit-identity>.collection-identity{display:grid;gap:4px}
 body.redesign-service #collection-dialog .collection-edit-card>.my-detail{display:grid;gap:8px}
 body.redesign-service #collection-dialog .collection-edit-holdings{padding:24px 40px;margin-bottom:16px;min-height:282px}
 body.redesign-service #collection-dialog .dialog-actions{margin-top:0}
}
body.redesign-service #collection-dialog .dialog-actions .primary{margin-left:0;min-width:68px}
body.redesign-service #collection-dialog .dialog-actions .primary svg{display:none}
@media(min-width:1024px){body.redesign-service #collection-dialog{height:fit-content;inset:0}}
body.redesign-service .signin-panel .acct-note{display:flex;align-items:center;gap:4px;min-height:24px;padding:0;margin:0;border:0;border-radius:0;background:none;color:var(--color-danger);font-size:14px;line-height:20px}
body.redesign-service .signin-panel .acct-note:before{content:'';width:20px;height:20px;border-radius:0;transform:none;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 21h20L12 3Zm0 5v6m0 3v1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
body.redesign-service #collection-dialog:not([open]){display:none}
body.redesign-service .my-view button{color:var(--color-text-muted);padding:4px}
body.redesign-service .my-view button[aria-pressed=true]{color:var(--color-brand-action-fill)}
body.redesign-service .my-view button[aria-pressed=true] svg{stroke:currentColor!important;color:inherit;fill:none}
@media(max-width:1023px){
 body.my-layout main.service-collection{margin-top:8px}
 body.redesign-service .my-welcome{margin-bottom:8px;min-height:52px}
 body.redesign-service #my-title{font-size:24px;line-height:32px;gap:12px;display:flex;align-items:center}
 body.redesign-service #my-title .my-mobile-back{width:44px}
 body.redesign-service .collection-heading-actions .ui-button,body.redesign-service .collection-heading-actions .ui-icon-button{border:1px solid var(--color-border);border-radius:6px}
 body.redesign-service .my-search-field{width:100%}
 body.redesign-service .portfolio-chart{position:relative;margin-top:0;gap:4px}
 body.redesign-service .portfolio-chart .portfolio-change{position:absolute;left:0;top:-28px;font-size:14px;line-height:20px}
 body.redesign-service .portfolio-chart svg{height:82px;width:calc(100% - 52px);margin-left:52px}
 body.redesign-service .portfolio-chart svg circle{display:none}
 body.redesign-service .portfolio-chart svg path[fill=none]{stroke-width:.8px}
 body.redesign-service .portfolio-range{padding-left:64px;font-size:12px;line-height:18px}
 body.redesign-service .portfolio-periods{margin:0;min-height:32px}
 body.redesign-service .portfolio-periods button{padding:4px 10px;min-height:28px}
 body.redesign-service .portfolio-summary{padding-bottom:16px}
}

body.redesign-service .my-tile-wrap{position:relative;min-width:0}
body.redesign-service .my-tile{display:block;width:100%;padding:8px;border:1px solid transparent;border-radius:8px;background:var(--color-page-bg)}
body.redesign-service .my-tile-art{display:block;aspect-ratio:5/7;width:100%}
body.redesign-service .my-tile-art img{display:block;width:100%;height:100%;object-fit:contain}
body.redesign-service .my-tile-quantity{position:absolute;right:0;top:0;padding:0 4px;border-radius:999px;background:rgb(27 33 51 / 65%);color:var(--color-brand-action-on);font-size:12px;line-height:18px}
body.redesign-service .my-tile-copy{display:block;margin-top:8px;text-align:left}
body.redesign-service .my-tile-copy .collection-value{display:block;text-align:left;max-width:none}
body.redesign-service .my-tiles{padding:0}
body.redesign-service .my-tile-art{height:auto;padding:0;background:transparent}
body.redesign-service .my-tile-copy{padding:0}
body.redesign-service .my-tile-copy .collection-value>strong{display:block;white-space:nowrap;font-size:14px;line-height:20px}
body.redesign-service .portfolio-chart{position:relative}
body.redesign-service .portfolio-axis{position:absolute;left:0;top:8px;display:flex;flex-direction:column;justify-content:space-between;width:56px;height:75px;font-size:12px;line-height:16.8px;color:var(--color-text-muted);text-align:right}
@media(min-width:1024px){body.my-layout .portfolio-axis{left:0;top:36px;height:76px}body.my-layout .portfolio-chart svg{width:calc(100% - 52px);margin-left:52px}body.my-layout .portfolio-range{padding-left:64px}}
body.redesign-service .pro-store-links{height:48px}
body.redesign-service .pro-page{padding-bottom:24px}
@media(max-width:1023px){body.redesign-service:has(.pro-page) .hub-heading{min-height:36px}body.redesign-service:has(.pro-page) .hub-heading .ui-back{min-height:32px;height:32px;margin-bottom:0}}
@media(max-width:1023px){
 body.redesign-service .service-collection .my-collection{margin-top:12px;padding-top:0}
 body.redesign-service .service-collection .collection-tabs{gap:0;border-bottom:0}
 body.redesign-service .service-collection .collection-tabs>button{min-height:44px;padding:0;line-height:20px;font-weight:600}
 body.redesign-service .service-collection .portfolio-summary{padding-bottom:18px}
 body.redesign-service .service-collection #my-results{min-height:32px;margin-bottom:8px;display:flex;align-items:center;line-height:16px;font-weight:500}
 body.redesign-service .service-collection .collection-tools .my-view{bottom:-4px;height:32px}
 body.redesign-service .service-collection .my-view button{height:32px;min-height:32px}
}
body.redesign-service #collection-add-dialog{max-width:440px;background:var(--color-page-bg);padding:16px;border-radius:16px}
body.redesign-service #collection-add-dialog .dialog-head{margin-bottom:16px;min-height:36px}
body.redesign-service #collection-add-dialog .dialog-head h2{font-size:18px;line-height:28px}
body.redesign-service #collection-add-dialog .dialog-head .ui-icon-button{border:0;background:transparent;width:44px;height:32px;min-height:32px;padding:4px}
body.redesign-service #collection-add-dialog .dialog-head .ui-icon-button img{width:24px;height:24px}
body.redesign-service #collection-add-dialog .collection-actions{display:flex;flex-direction:column;gap:0;margin:0}
body.redesign-service #collection-add-dialog .collection-actions a{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-height:48px;padding:8px 16px;border:0;background:none;font-size:16px;line-height:24px;font-weight:500}
body.redesign-service #collection-add-dialog .collection-actions a>span:nth-child(2){flex:1}
body.redesign-service #collection-add-dialog .collection-actions a:after{content:'';flex:none;width:20px;height:20px;background:url('/assets/ui-icons/right.svg') center/20px no-repeat}
@media(max-width:767px){body.redesign-service #collection-add-dialog{max-width:none;border-radius:16px 16px 0 0}}
@media(min-width:1024px){
 body.redesign-service .pro-page{gap:24px;padding-bottom:0}
 body.redesign-service .pro-hero{padding:24px;gap:4px}
 body.redesign-service .pro-art{display:block;width:240px;height:120px;max-width:100%;object-fit:contain;align-self:center}
 body.redesign-service .pro-hero h1{line-height:26px}
 body.redesign-service .pro-benefits{padding:20px 16px 12px}
 body.redesign-service .pro-plans{gap:24px}
 body.redesign-service .pro-app{padding:24px}
}
@media(min-width:1024px){
 body.redesign-service.my-layout .my-shell-content{margin:0}
 body.my-layout .my-nav-icon{width:20px;height:20px;border-radius:4px;padding:2px}
 body.my-layout .my-nav-icon>img{width:16px;height:16px}
 body.my-layout .my-nav-help .my-nav-icon{display:none}
}
body.redesign-service .is-empty-collection #portfolio-summary,body.redesign-service .is-empty-collection .my-search-field,body.redesign-service .is-empty-collection .collection-tools,body.redesign-service .is-empty-collection #my-results,body.redesign-service .is-empty-collection .collection-tabs span{display:none}
body.redesign-service .is-empty-collection .my-collection{padding:0;margin:0;border:0;background:none}
body.redesign-service .is-empty-collection .collection-toolbar{padding:0;margin:0}
body.redesign-service .is-empty-collection .collection-tabs{display:flex}
body.redesign-service .is-empty-collection .collection-tabs>button{min-height:44px;font-size:14px;line-height:20px;padding:12px}
body.redesign-service .is-empty-collection .my-empty{display:flex;flex-direction:column;align-items:center;gap:12px;border:0;background:none;padding:48px 16px 32px;min-height:230px}
body.redesign-service .is-empty-collection .my-empty>img{width:32px;height:32px}
body.redesign-service .is-empty-collection .my-empty h3{margin:0;font-size:18px;line-height:26px;font-weight:600}
body.redesign-service .is-empty-collection .my-empty a{min-height:44px;padding:10px 20px;font-size:16px;line-height:24px;border-radius:6px}
@media(min-width:1024px){body.redesign-service .is-empty-collection .collection-tabs{display:none}}
@media(max-width:767px){
 body.redesign-service #collection-dialog .collection-edit-card{padding:12px 28px;grid-template-columns:120px minmax(0,1fr)}
 body.redesign-service #collection-dialog .collection-edit-identity>img{width:120px;height:168px;max-height:none}
 body.redesign-service #collection-dialog .collection-edit-holdings{padding:12px 16px}
}
@media(max-width:767px){body.redesign-service .my-tiles{gap:4px}}
body.redesign-service .my-tile{border:0}
body.redesign-service .my-tile-quantity{top:4px;right:4px;min-width:20px;line-height:20px;text-align:center}
body.redesign-service .service-collection .my-view button[aria-pressed]{display:inline-flex;align-items:center;justify-content:center}
body.redesign-service .sec-body .go{margin:12px 16px 0}
body.redesign-service .sec-body .go a{display:inline-flex;width:auto;min-height:44px;padding:10px 20px;font-size:16px;line-height:24px;font-weight:600}
@media(min-width:1024px){body.redesign-service .sec-body .go{margin-left:0;margin-right:0}}
body.redesign-service .hub-collection-state{display:flex;flex-direction:column;gap:12px;padding:12px 28px 16px;margin-bottom:12px;border:.8px solid var(--color-area-stroke);border-radius:16px;background:linear-gradient(135deg,var(--color-area-fill-start) 38%,var(--color-panel))}
body.redesign-service .hub-collection-state .portfolio-heading{margin:0}
body.redesign-service .hub-collection-state.is-error .portfolio-heading{margin-bottom:4px}
body.redesign-service .hub-collection-state .hub-state{display:flex;align-items:center;gap:4px;color:var(--color-danger);font-size:14px;line-height:20px}
body.redesign-service .hub-collection-state .hub-state svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
body.redesign-service .hub-collection-state :is(button,a){align-self:center;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:1px solid var(--color-border);border-radius:6px;background:transparent;font-size:16px;line-height:24px;font-weight:600;color:var(--color-text)}
body.redesign-service .my-state-panel{display:flex;flex-direction:column;align-items:center;gap:12px;min-height:190px;padding:32px 16px}
body.redesign-service .my-state-panel h3{margin:0;font-size:18px;line-height:26px;font-weight:600;text-align:center}
body.redesign-service .my-state-panel :is(a,button){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:6px;font-size:16px;line-height:24px;font-weight:600}
body.redesign-service .my-state-panel a{min-width:0}
body.redesign-service #collection-dialog .collection-identity>strong{font-size:18px;line-height:26px;font-weight:600}
body.redesign-service #collection-dialog .dialog-actions button{font-size:16px;line-height:24px}
body.redesign-service .pro-hero h1{line-height:26px;letter-spacing:0}
body.redesign-service .pro-compare-head,body.redesign-service .pro-compare-head strong{font-size:12px;line-height:16px;font-weight:500}
body.redesign-service .pro-compare-row>span:nth-child(2){font-size:14px;line-height:20px}
body.redesign-service #confirm .acct-note{font-size:16px;line-height:24px}
body.redesign-service :is(h1,h2,h3,h4){text-wrap:wrap}
@media(min-width:1024px){body.redesign-service .service-collection #my-search{font-size:14px!important;line-height:20px}}
body.redesign-service .my-state-panel{box-sizing:border-box}
body.redesign-service .my-state-panel h3{width:100%;letter-spacing:0}
body.redesign-service .my-state-panel>img{width:32px;height:32px;flex:none}
body.redesign-service.legal-document .legal-section li:last-child{margin-bottom:0}
@media(min-width:1024px){
body.redesign-service.legal-document main>h1{padding-inline:16px;margin-bottom:24px}
body.redesign-service.legal-document .legal-section{margin:24px 0;padding:24px 40px}
body.redesign-service.legal-document main>h1+.legal-section{margin-top:24px}
}

body.redesign-service .portfolio-range{line-height:16.8px}
body.redesign-service .portfolio-periods button{line-height:16px}
/* 친구 초대 줄의 쓸 수 있는 쿠폰 수(Figma 2판 A — 390 「쿠폰 1」 알약 · 1440 메뉴 숫자 원) */
.iv-badge{padding:4px 8px;border-radius:999px;background:var(--color-border);color:var(--color-text-secondary);font-size:12px;line-height:16px;font-weight:500;white-space:nowrap}.my-nav-row .iv-badge{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 8px;box-sizing:border-box}
/* 로그인 전 MY(대표 2026-10-23 · Figma 10 MY 허브 7) — 로그인 · 앱 다운로드 묶음(로그인 화면과 같은 signin-panel) + 언어 · 통화. 넓은 화면 왼쪽 단 = 로그인 · 언어 · 통화 세 줄(오른쪽 칸 = 고른 줄) */
body.redesign-service .my-guest-login{margin:0 0 12px}body.redesign-service .my-guest-login>.my-eyebrow{padding:0;margin:0 0 12px}body.redesign-service .my-guest-login .acct-stack{display:flex;flex-direction:column}
body.my-guest .my-sidebar>:not(.my-nav-row),body.my-guest .my-sidebar>.my-nav-row:not([data-my-section=signin],[data-my-section=language],[data-my-section=currency]),body:not(.my-guest) .my-sidebar>[data-my-section=signin]{display:none}
@media(min-width:1024px){body.redesign-service .my-guest-settings,body.redesign-service .page.ui-page>h1.my-guest-title{display:none}body.redesign-service .my-guest-login{margin:0}}

@media(max-width:767px){
 .redesign-service :is(.hub-main,.hub-content,.my-main,.collection-sheet-body,.support-form,.pro-hero,.pro-benefits,.pro-app,.pro-legal,.acct-who){padding:8px}
 .redesign-service :is(.my-section,.my-collection,.my-support-link){margin-top:8px;border-radius:8px}
 .redesign-service .collection-list{gap:4px}
 .redesign-service :is(.collection-row,.acct .rows>li){padding-inline:8px}
 .redesign-service :is(.collection-sheet-head,.sheet-head){padding-inline:8px}
}
.collection-sheet-head{position:relative;justify-content:center;padding-left:60px;padding-right:60px;min-height:60px}
.collection-sheet-head h2{flex:1;text-align:center}
.collection-sheet-head>button:last-child{position:absolute;right:8px}

@media(max-width:767px){body.redesign-service.legal-document main{width:calc(100% - 16px)}body.redesign-service.legal-document .legal-section{margin:8px 0;padding:8px}body.redesign-service.legal-document .legal-section h2{margin-bottom:8px}body.redesign-service.legal-document main>h1+.legal-section{margin-top:8px}}

/* Page 8 / panel 8 / tile 4. Keep three columns and the full amount at 320px. */
@media(max-width:767px){
 body.redesign-service{--ui-gutter:8px}
 body.redesign-service main.ui-page,body.redesign-service main.my-main{width:calc(100% - 16px);padding-inline:0}
 body.redesign-service :is(.my-collection,.group.ui-menu-group,.list.ui-menu-group,.support-links,.account-deletion){padding:8px;margin-block:8px}
 body.redesign-service .my-tile{padding:4px}
 body.redesign-service .my-tile-copy .collection-value>strong{font-size:clamp(12px,calc(12px + (100vw - 320px)*.02857),14px);line-height:20px;white-space:nowrap;overflow:visible;text-overflow:clip;font-variant-numeric:tabular-nums}
 body.redesign-service .my-tile-copy{margin-top:4px}
}

@media(max-width:767px){body.redesign-service .group>.ui-section-label{padding-inline:0}}

@media(max-width:767px){body.redesign-service .support-form{padding:8px}}
/* Holo Pass approved state and navigation layout. */
body.redesign-service .hub-heading{min-height:64px!important;gap:8px!important;align-items:center!important}body.redesign-service .hub-heading .ui-back,body.redesign-service .my-mobile-back{width:48px!important;height:48px!important;min-height:48px!important;border:0!important;border-radius:50%!important;background:rgba(20,199,194,.14)!important}body.redesign-service .hub-heading .ui-page-title{font-size:18px!important;line-height:26px!important}
body.redesign-service .my-pro-link .ui-menu-label,body.redesign-service [data-my-section=pro]>span:not(.my-nav-icon){color:var(--color-text)}