/* /home/price-tag.css */
/* Shared price tag: card detail + home hero stop 3. */
.price-tag{position:relative;animation:tag-float 7s ease-in-out infinite;animation-delay:-2s;background:linear-gradient(140deg,#fff,#eefbfc);border:1px solid #69e3e1;border-radius:20px;padding:32px 16px 32px 23px;box-shadow:0 12px 32px #18bebb10;min-width:0}.price-tag:before{content:'';position:absolute;width:29px;height:29px;left:-16px;top:calc(50% - 15px);transform:rotate(45deg);border-left:1px solid #69e3e1;border-bottom:1px solid #69e3e1;background:#f8fefe;border-radius:0 0 0 6px}.tag-eye{position:absolute;left:-8px;top:calc(50% - 5px);width:10px;height:10px;border:2px solid var(--mint);border-radius:50%;z-index:2;background:#effafb}.price-label{font-size:var(--text-label);color:var(--muted);display:block;margin-bottom:8px}.stage-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible}.stage-lines path{fill:none;stroke:#1bd3ce;stroke-width:1;opacity:.5}
@keyframes tag-float{0%,100%{transform:translateY(2px) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}

/* /home/card-surface.css */
/* One physical surface for both homepage and detail cards. */
.sh-card{aspect-ratio:600/838;position:relative;transform-style:preserve-3d;will-change:transform;pointer-events:auto;cursor:grab;border-radius:4.2%;outline-offset:8px}
.sh-card:active{cursor:grabbing}
.sh-card>.sh-face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;backface-visibility:hidden;transform:translateZ(2px);background:#c1c8d1;box-shadow:0 0 0 1px #ffffffb3,0 22px 48px #17232c20}
.sh-card>.sh-face>img{width:100%;height:100%;aspect-ratio:auto;object-fit:fill;display:block;user-select:none;filter:none;box-shadow:none;border-radius:0;-webkit-user-drag:none}
.sh-card>.sh-edge{position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(100deg,#72848e,#edf3f7 50%,#88939c);transform:translateZ(-1px);box-shadow:2px 3px 0 #9ca7b2,3px 5px 0 #c8d1d7}
.sh-card .sh-foil,.sh-card .sh-gloss{position:absolute;inset:0;pointer-events:none}
.sh-card .sh-foil{background:repeating-linear-gradient(115deg,transparent 0%,rgba(36,213,203,.35) 12%,rgba(119,96,245,.18) 21%,rgba(240,139,218,.3) 30%,rgba(255,209,124,.3) 37%,transparent 46%);background-size:280% 280%;background-position:var(--fx,50%) var(--fy,50%);mix-blend-mode:color-dodge;opacity:var(--foil,.2)}
.sh-card .sh-gloss{background:radial-gradient(ellipse at var(--gx,50%) var(--gy,35%),#ffffff8c 0%,#ffffff1a 27%,transparent 62%);mix-blend-mode:screen;opacity:.45}

/* /css/scan-fab.css */
#scan-fab{position:fixed;right:max(28px,env(safe-area-inset-right));bottom:calc(28px + env(safe-area-inset-bottom));z-index:35;display:grid;place-items:center;width:58px;height:58px;border:1px solid color-mix(in srgb,var(--mint,var(--holo-aqua)) 65%,white);border-radius:50%;background:var(--mint,var(--holo-aqua));color:var(--ink);box-shadow:0 6px 22px color-mix(in srgb,var(--ink) 18%,transparent),inset 0 1px 0 color-mix(in srgb,white 55%,transparent);text-decoration:none}#scan-fab:hover{box-shadow:0 9px 26px color-mix(in srgb,var(--ink) 24%,transparent)}#scan-fab:focus-visible{outline:3px solid var(--ink);outline-offset:4px}@media(max-width:700px){#scan-fab{width:52px;height:52px;right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom))}}@media(prefers-reduced-motion:reduce){#scan-fab{transition:none}}

#scan-fab{background:var(--bg,var(--set-bg));border-color:color-mix(in srgb,var(--holo-aqua) 55%,var(--line,var(--set-line)));color:var(--ink)}#scan-fab .scan-brand{position:absolute;width:25px;height:34px;object-fit:contain;transform:rotate(12deg);pointer-events:none}

#scan-fab .scan-brand{display:block;isolation:isolate;mask:url('/assets/home-c/symbol.svg') center/contain no-repeat;-webkit-mask:url('/assets/home-c/symbol.svg') center/contain no-repeat}#scan-fab .scan-brand img{display:block;width:100%;height:100%;object-fit:contain}#scan-fab .scan-brand:after{content:'';position:absolute;inset:-55%;background:linear-gradient(115deg,transparent 26%,color-mix(in srgb,var(--holo-iris) 60%,transparent) 38%,color-mix(in srgb,var(--holo-aqua) 80%,transparent) 44%,white 49%,color-mix(in srgb,var(--holo-blossom) 80%,transparent) 54%,color-mix(in srgb,var(--holo-amber) 60%,transparent) 62%,transparent 73%);mix-blend-mode:screen;opacity:.75;animation:scan-holo var(--scan-holo-duration) var(--scan-holo-ease) infinite;pointer-events:none}#scan-fab{--scan-holo-duration:8.6s;--scan-float-duration:6.8s;--scan-holo-ease:cubic-bezier(.22,.61,.36,1);--scan-float-ease:cubic-bezier(.45,0,.55,1)}@keyframes scan-holo{0%,12%{transform:translateX(-55%) rotate(-8deg);opacity:0}28%{transform:translateX(-22%) rotate(-3deg);opacity:.12}40%{transform:translateX(-7%) rotate(2deg);opacity:.48}48%{transform:translateX(4%) rotate(5deg);opacity:.62}62%{transform:translateX(35%) rotate(9deg);opacity:.12}72%,100%{transform:translateX(65%) rotate(12deg);opacity:0}}#scan-fab{animation:scan-float var(--scan-float-duration) var(--scan-float-ease) infinite;transform-origin:center}@keyframes scan-float{0%,100%{transform:translateY(1px) rotate(-2deg)}28%{transform:translateY(-3px) rotate(3deg)}57%{transform:translateY(-1px) rotate(0deg)}78%{transform:translateY(2px) rotate(-3deg)}}@media(prefers-reduced-motion:reduce){#scan-fab .scan-brand:after{animation:none;transform:none;opacity:.2}}

@media(prefers-reduced-motion:reduce){#scan-fab .scan-brand{animation:none;transform:rotate(12deg)}}

@media(prefers-reduced-motion:reduce){#scan-fab{animation:none;transform:none}}
@media(max-width:700px){body:has(>#scan-fab){padding-bottom:calc(80px + env(safe-area-inset-bottom))}}

/* /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/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; }
}

/* /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);
}

/* /home/style.css */
/* Compact home: one container, native scrolling, always-visible navigation. */
:root{--ink:var(--color-text);--mint:#1bd3ce;--bg:#f3f6f8;--muted:#627380}
*{box-sizing:border-box}html{scroll-padding-top:88px}body{margin:0;color:var(--ink);background:var(--bg);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,summary:focus-visible,.card:focus-visible{outline:3px solid var(--mint);outline-offset:5px}
.skip-link{position:fixed;top:-80px;left:24px;z-index:100;padding:12px;background:white}.skip-link:focus{top:12px}

.journey{height:auto}.viewport,.how,.questions,.brand-footer{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
.viewport{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:36px;padding-top:32px;padding-bottom:32px;min-height:560px}
.eyebrow{font-size:14px;font-weight:500;color:var(--muted)}body .copy h1{font-size:clamp(36px,4vw,54px);font-weight:700;line-height:1.2;letter-spacing:-.035em;margin:20px 0}body .copy .intro{font-size:17px;line-height:1.6;color:var(--muted);margin:0 0 28px;max-width:400px}
.hero-actions{grid-column:2;justify-self:center;justify-content:center;display:flex;align-items:center;gap:24px;flex-wrap:wrap}.cta{display:inline-flex;align-items:center;gap:24px;padding:15px 23px;border-radius:12px;background:var(--color-brand-action-fill);color:var(--color-brand-action-on);font-size:16px;font-weight:600;transition:background .2s,transform .2s}.cta:hover{background:#51e2d9;transform:translateY(-2px)}.cta span{font-size:22px}.browse-link{display:inline-flex;gap:12px;align-items:center;font-size:15px;font-weight:500}.browse-link:hover,.text-link:hover{color:#168478}
.art{height:480px;position:relative;perspective:1200px;touch-action:pan-y}.brand-shape{position:absolute;width:78%;height:85%;object-fit:contain;left:3%;top:6%;opacity:.45;transform:rotate(10deg)}.perspective{position:absolute;left:4%;top:50%;transform:translateY(-50%);perspective:1200px}.card{width:clamp(190px,21vw,264px)}.shadow{position:absolute;bottom:20px;left:6%;width:52%;height:18px;border-radius:50%;background:#17232c;opacity:.12;filter:blur(18px)}.price-anchor{position:absolute;right:0;top:50%;transform:translateY(-50%);width:42%;z-index:3}.art .price-tag{animation:none}.current-price{display:block;font-size:clamp(22px,2.25vw,30px);line-height:1.25;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.current-price.no-price{font-size:15px}.art .stage-lines{display:none}.home-tag-hanger{display:none}
.how{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:12px;padding-bottom:56px}.result-panel{min-width:0;background:#e9eff3;border:1px solid #e1e8ee;border-radius:20px;padding:26px 28px}.result-heading .eyebrow{font-size:13px}body .result-heading h2{font-size:28px;line-height:1.3;letter-spacing:-.025em;margin:8px 0 24px;font-weight:600}.quote-preview{position:relative;display:flex;align-items:center;gap:22px;min-height:184px;background:#f9fbfc;border-radius:12px;padding:18px}.quote-preview>img{width:98px;height:auto;border-radius:6px}.quote-preview>div{min-width:0}.quote-name{display:block;font-size:17px;font-weight:600}.quote-meta{display:block;font-size:13px;color:var(--muted);margin:5px 0 22px}.price-label{font-size:13px;color:var(--muted);margin-bottom:5px}.quote-price{display:block;font-size:26px;line-height:1.3;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.result-arrow{position:absolute;right:14px;top:12px;color:var(--muted);font-size:22px}.text-link{display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:500;margin-top:20px;padding:4px 0}
.collection-preview{min-height:184px;padding:22px;background:#f9fbfc;border-radius:12px}.asset-label{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}.sample-label{font-size:12px;background:#e9eff3;border-radius:4px;padding:2px 7px}.asset-value{display:block;font-size:34px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3;margin:9px 0 16px;overflow-wrap:anywhere}.asset-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.asset-bottom>div{flex:none}.asset-bottom span{display:block;font-size:13px;color:var(--muted)}.asset-change{display:block;font-size:19px;margin-top:4px;color:#168478}.asset-bottom svg{width:48%;height:52px;overflow:visible}.asset-bottom path{fill:none;stroke:#1bbdb5;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.questions{display:grid;grid-template-columns:1fr 1.6fr;gap:48px;padding-top:32px;padding-bottom:36px;border-top:1px solid #d4e0e7}body .questions h2{font-size:24px;font-weight:600;line-height:1.3;margin:0}.questions .text-link{margin-top:12px}.answers details{border-bottom:1px solid #d4e0e7}.answers summary{padding:17px 24px 17px 0;cursor:pointer;list-style:none;font-size:16px;font-weight:500;position:relative}.answers summary::-webkit-details-marker{display:none}.answers summary:after{content:'+';position:absolute;right:0;font-size:22px;top:13px;color:var(--muted)}.answers details[open] summary:after{content:'−'}.answers p{font-size:15px;color:var(--muted);line-height:1.6;margin:0 0 18px;max-width:560px}
.brand-footer{padding-top:26px;padding-bottom:22px;border-top:1px solid #d4e0e7}.footer-main{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer-main img{display:block;width:142px;height:auto}.footer-main>p{display:none}.footer-main nav{display:flex;gap:20px;font-size:14px}.footer-catalog{flex-wrap:wrap;row-gap:8px}.footer-catalog a{white-space:nowrap}.footer-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;color:var(--muted);font-size:12px}.footer-meta p{display:none}
@media(max-width:760px){html{scroll-padding-top:72px}.viewport,.how,.questions,.brand-footer{padding-left:18px;padding-right:18px}.viewport{grid-template-columns:1fr;gap:16px;min-height:0;padding-top:26px;padding-bottom:28px}.copy{text-align:center}.hero-actions{grid-column:1;justify-content:center}body .copy h1{font-size:30px;margin:12px 0;line-height:1.25}body .copy .intro{font-size:16px;margin:0 0 18px;max-width:none;color:#536873}.hero-actions{gap:20px}.cta{padding:13px 18px;font-size:15px;gap:16px}.browse-link{font-size:14px}.art{--card-width:clamp(130px,42vw,190px);height:310px;width:100%;max-width:400px;margin:0 auto}.perspective{left:calc(50% - var(--card-width)/2)}.card{width:var(--card-width)}.home-tag-hanger{display:block;position:absolute;left:calc(100% + 1px);top:20%;width:0;height:0;transform:translateZ(3px);transform-style:preserve-3d;pointer-events:none}.home-tag-cord{position:absolute;left:-30px;top:0;width:80px;height:calc(var(--card-width)*.9078);overflow:visible;fill:none;stroke:var(--mint);stroke-width:1.1}.home-tag-cord .cord-pin{stroke:var(--brand-foil-pin);stroke-width:1.8;stroke-linecap:round}.home-tag-hanger .price-anchor{top:var(--tag-y,calc(var(--card-width)*.9078 - 8px));left:var(--tag-x,-24px);right:auto;width:100px;transform:rotate(var(--tag-angle,3deg));transform-origin:50px 8px}.art .price-tag{padding:13px 8px 7px;min-height:52px;text-align:left;background:var(--bg);border:1px solid var(--mint);border-radius:5px;box-shadow:0 3px 7px color-mix(in srgb,var(--ink) 8%,transparent)}.art .price-tag:before{display:none}.art .tag-eye{left:48px;top:6px;width:4px;height:4px;border-width:1px;background:var(--bg)}.art .price-label{font-size:13px;margin-bottom:2px}body .art .current-price{font-size:18px;letter-spacing:-.025em;white-space:nowrap;overflow-wrap:normal}.how{grid-template-columns:1fr;gap:18px;padding-top:0;padding-bottom:28px}.result-panel{padding:20px;border-radius:16px}body .result-heading h2{font-size:22px;margin:8px 0 16px}.quote-preview{gap:16px;min-height:0;padding:16px}.quote-preview>img{width:70px}.quote-name{font-size:15px}.quote-meta{margin-bottom:14px}.quote-price{font-size:22px}.collection-preview{min-height:0;padding:18px}.asset-value{font-size:30px;margin:8px 0 12px}.asset-bottom svg{height:40px}.asset-change{font-size:18px}.collection-panel>.text-link{margin-top:12px}.questions{grid-template-columns:1fr;gap:8px;padding-top:24px;padding-bottom:28px}.questions>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:16px}body .questions h2{font-size:22px}.questions .text-link{margin-top:0}.answers summary{font-size:15px}.footer-main nav{gap:16px;font-size:13px}.footer-meta{margin-top:16px}.footer-main img{width:124px}}
@media(max-width:360px){body .copy h1{font-size:28px}.hero-actions{gap:16px}.art{height:270px}body .art .current-price{font-size:17px}.asset-value{font-size:28px}.result-panel{padding:18px}body .result-heading h2{font-size:20px}.text-link{font-size:13px}}
@media(prefers-reduced-motion:reduce){.cta{transition:none}.art .price-tag{animation:none}}

/* Quiet loading indicator, kept inside the price field. */
.is-loading::after{content:"";display:inline-block;width:min(44px,100%);height:12px;border-radius:3px;background:#d4e0e7;vertical-align:middle}

/* 2026-10-11 UX: 가격은 한 줄 — 넘치면 motion.js 가 글자 크기를 줄인다(모든 폭). 넓은 폭은 가격표 폭 = 금액(최대 42%) */
.art .price-tag{display:block}body .art .current-price{white-space:nowrap;overflow-wrap:normal;overflow-x:clip}.card{cursor:pointer}
html[lang=ja] :is(.copy h1,.result-heading h2,.questions h2){line-break:strict;word-break:normal;word-break:auto-phrase}
/* 넓은 폭: 버튼은 소개 문장 바로 아래(왼쪽 열), 그림은 두 줄에 걸친다 */
@media(min-width:761px){.price-anchor{width:max-content;max-width:42%}.viewport{row-gap:0}.copy{grid-column:1;grid-row:1;align-self:end}.art{grid-column:2;grid-row:1 / 3}.hero-actions{grid-column:1;grid-row:2;justify-self:start;justify-content:flex-start;align-self:start}}
/* 터치 44px */
.browse-link,.text-link,.footer-main nav a,.footer-meta a,.legal-foot nav a{display:inline-flex;align-items:center;min-height:44px}.text-link{padding:0}

/* Product story: screenshots of the real scanner and collection UI. */
.how{display:block;padding-top:0;padding-bottom:0}.feature-story{padding:54px 0;border-top:1px solid var(--color-border)}.scan-story{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);align-items:center;gap:48px}.feature-text{min-width:0}.feature-text h2{font-size:38px;line-height:1.2;letter-spacing:-.035em;font-weight:600;margin:12px 0 20px}.feature-text p{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 24px;max-width:38ch}.feature-text .eyebrow{font-size:14px;color:var(--color-brand-link-text)}.feature-text .cta{font-size:15px;padding:12px 20px}.scan-gallery{display:flex;align-items:flex-start;justify-content:center;gap:24px;min-width:0}.scan-gallery figure{flex:1;max-width:232px;min-width:0;margin:0}.scan-gallery figure:nth-child(2){margin-top:42px}.phone-shot{border:1px solid var(--color-border);border-radius:24px;overflow:hidden;background:var(--slate-800);box-shadow:0 12px 30px color-mix(in srgb,var(--ink) 7%,transparent)}.phone-shot img{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover}.scan-gallery figcaption{display:flex;gap:8px;font-size:13px;line-height:1.5;margin:16px 0 0;color:var(--muted)}.scan-gallery figcaption b{color:var(--color-brand-link-text);font-weight:600}.asset-story .feature-text{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:24px}.asset-story .feature-text h2{margin-bottom:0}.asset-story .feature-text p{margin-bottom:8px}.asset-story .text-link{margin-top:0}.asset-shot{margin:0}.asset-shot picture{display:block;background:var(--color-surface);border:1px solid var(--color-border);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px color-mix(in srgb,var(--ink) 5%,transparent)}.asset-shot img{display:block;width:100%;height:auto}.asset-shot figcaption{text-align:right;font-size:12px;color:var(--muted);margin-top:12px}.text-link{display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:500;min-height:44px}.home-insights{padding-top:8px}
.home-insights{max-width:1200px;margin:0 auto;padding:0 24px 40px;display:grid;grid-template-columns:1fr 1fr;gap:24px}.insight-panel{min-width:0;border-top:1px solid var(--color-border);padding-top:22px}.insight-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.insight-heading h2{font-size:22px;line-height:1.3;margin:0;font-weight:600}.insight-heading .text-link{margin:0;flex:none;color:var(--muted);font-size:13px}.market-preview,.news-preview{background:var(--color-surface);display:flex;align-items:center;gap:16px;padding:20px;border-radius:14px;min-height:184px;transition:box-shadow var(--motion-enter)}.market-preview:hover,.news-preview:hover{box-shadow:0 3px 12px color-mix(in srgb,var(--ink) 4%,transparent)}.market-art{width:58px;height:82px;object-fit:contain;flex:none}.market-identity{flex:1;min-width:0}.market-meta,.market-set,.market-previous,.news-date{display:block;font-size:12px;color:var(--muted);line-height:1.5}.market-name,.news-title{font-size:16px;line-height:1.4;font-weight:600;margin:5px 0;overflow-wrap:anywhere}.market-set{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.market-numbers{display:flex;flex-direction:column;gap:7px;align-items:flex-end;flex:none;max-width:45%;font-variant-numeric:tabular-nums}.market-price{font-size:21px;line-height:1.3;white-space:nowrap}.market-change{font-size:15px;font-weight:600;color:var(--color-brand-link-text)}.market-change.down{color:var(--chart-finish-reverse)}.news-art{width:124px;height:128px;object-fit:cover;border-radius:8px;flex:none}.news-preview>div{min-width:0}.news-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.news-excerpt{font-size:13px;line-height:1.5;color:var(--muted);margin:8px 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.market-preview[aria-busy=true],.news-preview[aria-busy=true]{color:var(--muted)}

@media(max-width:760px){.feature-story{padding:34px 0}.scan-story{grid-template-columns:1fr;gap:24px}.feature-text{text-align:center}.feature-text h2{font-size:28px;line-height:1.25;margin:10px 0 14px}.feature-text p{font-size:15px;margin:0 auto 18px;max-width:30ch}.scan-gallery{gap:14px;justify-content:center}.scan-gallery figure{max-width:240px}.scan-gallery figure:nth-child(2){margin-top:28px}.phone-shot{border-width:1px;border-radius:20px}.scan-gallery figcaption{font-size:12px;gap:5px;margin-top:12px}.asset-story .feature-text{display:block;margin-bottom:22px}.asset-story .feature-text h2{margin-bottom:14px}.asset-story .feature-text p{margin-bottom:6px}.asset-shot picture{max-width:430px;margin:0 auto;border-width:1px;border-radius:20px}.asset-shot figcaption{text-align:center;font-size:12px;line-height:1.5}.home-insights{grid-template-columns:1fr;gap:20px;padding:0 18px 28px}.insight-heading{margin-bottom:12px}.insight-heading h2{font-size:20px}.market-preview,.news-preview{padding:16px;min-height:148px;gap:12px}.market-price{font-size:18px}.market-art{width:46px;height:65px}.market-name,.news-title{font-size:15px}.market-numbers{gap:5px}.market-previous{font-size:12px}.news-art{width:100px;height:112px}.market-change{font-size:14px}}
@media(max-width:360px){.feature-text h2{font-size:25px}.scan-gallery{gap:10px}.phone-shot{border-radius:16px}.scan-gallery figcaption{font-size:12px}.market-preview{gap:8px;padding:12px}.market-art{width:36px;height:51px}.market-price{font-size:16px}.market-meta,.market-set{font-size:12px}.market-name{font-size:14px}.news-art{width:82px;height:100px}.news-excerpt{display:none}}
@media(prefers-reduced-motion:reduce){.market-preview,.news-preview{transition:none}}

.feature-text p{word-break:keep-all}.scan-gallery{position:relative;isolation:isolate}.scan-gallery::before{content:"";position:absolute;inset:8% 0;z-index:-1;border-radius:36px;background:radial-gradient(ellipse at 25% 35%,color-mix(in srgb,var(--holo-aqua) 11%,transparent),transparent 60%),radial-gradient(ellipse at 80% 65%,color-mix(in srgb,var(--holo-blossom) 9%,transparent),transparent 65%)}

/* Store access sits below the primary scan action; Android is awaiting public release. */
.hero-actions{flex-direction:column;align-items:flex-start;gap:16px;min-width:0;width:100%;max-width:100%}.app-downloads{display:flex;flex-wrap:wrap;gap:10px;max-width:100%}.store-badge{display:inline-flex;border-radius:8px}.store-badge img{display:block;height:44px;width:auto}.store-badge:hover{opacity:.85}.store-badge:focus-visible{outline:2px solid var(--mint);outline-offset:3px}@media(max-width:760px){.hero-actions{align-items:center}}
.home-prices{max-width:1200px;margin:0 auto;padding:0 24px 40px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start}.home-table{border-top:1px solid var(--color-border);min-width:0}.home-table summary{padding:17px 24px 17px 0;cursor:pointer;font-size:16px;font-weight:600;position:relative;list-style:none}.home-table summary::-webkit-details-marker{display:none}.home-table summary:after{content:"+";position:absolute;right:0;top:13px;font-size:22px;color:var(--muted)}.home-table[open] summary:after{content:"−"}.home-table table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:18px}.home-table th,.home-table td{padding:10px 8px 10px 0;border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top;font-weight:400}.home-table thead th{font-size:12px;color:var(--muted)}.home-table :is(td,thead th:not(:first-child)){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.home-table tbody th a{font-weight:600}.home-table small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}.home-table small a{color:inherit;text-decoration:underline}@media(max-width:760px){.home-prices{grid-template-columns:1fr;padding:0 18px 28px}}
@media(max-width:359px){html[lang=ja] body .copy h1{font-size:24px}}

/* /home/auction-hero.css */
/* 대문 낙찰 카드(대표 승인 시안 2.1, 2026-10-16) — pages.py render_home 이 .journey.is-breaking 일 때만 쓴다. 색은 토큰만. */
.is-breaking .sh-foil,.is-breaking .sh-gloss{display:none}   /* 로트 사진 위 홀로 효과 없음(홀로는 실제 포일 카드 표면에만) */
.is-breaking .face{background:var(--color-surface-sunken)}
.is-breaking .face img{width:100%;height:100%;object-fit:contain}
.journey.is-breaking .price-anchor{width:max-content;max-width:46%;min-width:200px}
.is-breaking .art .auction-tag{display:block;background:var(--color-surface);color:var(--color-text);border:1px solid var(--mint);border-radius:20px;padding:16px 16px 16px 23px;box-shadow:0 12px 32px color-mix(in srgb,var(--mint) 6%,transparent);text-align:left;min-height:0;line-height:1.5}
.is-breaking .art .auction-tag:before{display:block}
.auction-read{display:block;border-radius:10px;color:inherit;text-decoration:none}
.auction-badge{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;line-height:1;letter-spacing:-.01em;padding:8px 13px 8px 11px;border-radius:8px;background:var(--color-text);color:var(--color-surface);margin:0 0 10px;white-space:nowrap}
.auction-badge i{width:9px;height:9px;border-radius:50%;background:var(--color-brand-symbol-mint);flex:none}
.auction-chips{display:flex;flex-wrap:wrap;gap:4px 6px;margin:0 0 8px}
.auction-chips span{display:inline-flex;align-items:center;font-size:12px;font-weight:500;line-height:1;padding:4px 8px;border-radius:999px;border:1px solid var(--color-border-strong);color:var(--color-text)}
.auction-chips .sold{font-weight:700;border-color:var(--color-text)}
.auction-chips .fee{color:var(--color-text-muted)}
.auction-name{word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px;line-height:1.4;font-weight:500;color:var(--color-text-secondary);margin:0 0 2px}
.auction-amount{display:block;font-size:clamp(19px,2.1vw,30px);line-height:1.25;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--color-text);margin:0 0 6px}
.auction-cmp{display:block;font-size:13px;line-height:1.4;color:var(--color-text-secondary);margin:0 0 6px;font-variant-numeric:tabular-nums}
.auction-cmp b{font-weight:600;color:var(--color-text);white-space:nowrap}
.auction-cmp em{font-style:normal;font-weight:700;white-space:nowrap}
.auction-cmp .lo{color:var(--green-600)}.auction-cmp .hi{color:var(--chart-finish-reverse)}   /* 시세 변동 화면(movers.css)과 같은 색 */
.auction-meta{display:block;font-size:12px;line-height:1.45;color:var(--color-text-muted)}
.auction-cmp-n,.auction-meta-day{white-space:nowrap}
.auction-go{white-space:nowrap;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin-top:12px;padding:0 14px;border:1px solid var(--color-border-strong);border-radius:10px;font-size:14px;font-weight:600;color:var(--color-text);background:var(--color-surface);text-decoration:none}
.auction-go:hover{background:var(--color-surface-sunken)}
.auction-go b{font-size:18px;font-weight:500;line-height:1}
.auction-credit{position:absolute;left:4%;width:clamp(190px,21vw,264px);top:calc(50% + clamp(190px,21vw,264px)*.698 + 4px);min-height:44px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:var(--color-brand-link-text);white-space:nowrap;text-decoration:none;z-index:3}
.auction-credit:hover{text-decoration:underline}
.is-breaking .art a:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:8px}
@media(min-width:1200px){.auction-cmp{white-space:nowrap}}   /* 넓은 폭은 시안처럼 한 줄 */
/* 좁은 2단(761~1199) — 그림 칸이 좁다: 사진을 조금 줄이고 꼬리표를 넓혀 글자가 토막나지 않게 */
@media(min-width:761px) and (max-width:1199px){
  .is-breaking .card{width:clamp(150px,17vw,264px)}
  .auction-credit{width:clamp(150px,17vw,264px);top:calc(50% + clamp(150px,17vw,264px)*.698 + 4px)}
  .journey.is-breaking .price-anchor{min-width:0;max-width:54%}
  .is-breaking .art .auction-tag{padding:12px 14px 12px 18px}
  .auction-badge{font-size:13px;padding:6px 10px 6px 9px;gap:6px}
  .auction-amount{font-size:20px}
  .auction-chips{gap:3px}
  .auction-chips span{font-size:12px;padding:4px 5px}
  .auction-go{font-size:13px;padding:0 12px}
}
/* 좁은 폭 — 매단 꼬리표 대신 카드 아래 결과 상자 */
@media(max-width:760px){
  .journey.is-breaking .art{height:auto;display:flex;flex-direction:column;align-items:center;padding-top:6px}
  .is-breaking .art .shadow,.is-breaking .art .brand-shape,.is-breaking .home-tag-hanger{display:none}
  .is-breaking .perspective{position:relative;left:auto;top:auto;transform:none;order:1}
  .auction-credit{position:static;width:auto;margin-top:6px;order:2}
  .journey.is-breaking .price-anchor{position:static;transform:none;width:100%;max-width:340px;min-width:0;order:3}
  .is-breaking .art .auction-tag{padding:14px 16px;border-radius:14px;box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 6%,transparent)}
  .is-breaking .art .auction-tag:before,.is-breaking .art .tag-eye{display:none}
  .auction-amount{font-size:24px;letter-spacing:-.02em}
}
@media(max-width:360px){.auction-amount{font-size:22px}}

/* /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}
}

/* /home/redesign.css */
/* Approved Figma 01: retain the live card stage and use the shared area layout below it. */
:root{--site-content-width:1184px;--site-gutter:16px}@media(min-width:1024px){:root{--site-gutter:48px}}
body{background:radial-gradient(ellipse at 85% 4%,color-mix(in srgb,var(--color-panel) 20%,transparent),transparent 42%),var(--color-page-bg)}
body .home-features,body .home-insights,body .questions{max-width:calc(var(--site-content-width) + 2*var(--site-gutter));padding:0 var(--site-gutter);margin:0 auto 24px;display:grid;grid-template-columns:1fr;gap:var(--ui-section-gap)}
body .feature-story,body .insight-panel,body .questions{border:.8px solid var(--color-area-stroke);border-radius:var(--radius-xl);background:linear-gradient(107deg,var(--color-area-fill-start),var(--color-area-fill-start) 35%,var(--color-panel));padding:var(--space-6);min-width:0}
body .home-features .eyebrow,body .insight-heading .eyebrow,body .questions h2{display:flex;align-items:center;gap:6px;margin:0;color:var(--color-text-muted);font-size:12px;font-weight:500;line-height:18px;letter-spacing:.04em;overflow:visible}
body .home-features .eyebrow::before,body .insight-heading .eyebrow::before,body .questions h2::before{content:"";width:5px;height:15px;flex:none;background:var(--color-brand-action-fill);border-radius:2px}
body .feature-story{display:block}
body .feature-story>.eyebrow{padding-inline:16px;margin-bottom:12px}
body .home-features{margin-top:var(--ui-section-gap)}
body .feature-body{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px;min-height:376px;padding-inline:16px}
body .feature-story .feature-art{display:block;width:100%;height:420px;object-fit:contain;object-position:center;max-width:100%;border:0;border-radius:0;box-shadow:none;background:none}
body .feature-story .product-mockup{margin:0;height:376px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.device-pair{position:relative;width:100%;max-width:380px;aspect-ratio:430/420;isolation:isolate}
.product-phone{position:absolute;left:4%;top:2%;width:42%;padding:16px 5px 7px;background:linear-gradient(140deg,var(--slate-800),var(--ink) 40%,var(--ink));border:1px solid var(--slate-600);border-radius:25px;box-shadow:0 20px 30px -14px var(--alpha-art-shadow),0 0 0 1px var(--ink);line-height:0}
.product-phone::before{content:'';position:absolute;top:6px;left:calc(50% - 15px);width:30px;height:4px;border-radius:4px;background:var(--ink);box-shadow:0 1px 0 var(--slate-700)}
.product-phone img{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;border-radius:15px;background:var(--color-page-bg)}
.phone-camera,.phone-collection{transform:rotate(-2deg)}
.product-panel{position:absolute;right:0;overflow:hidden;border:1px solid var(--color-area-stroke);border-radius:16px;background:var(--color-page-bg);box-shadow:0 18px 36px -16px var(--alpha-art-shadow);line-height:0}
.product-panel img{position:absolute;top:0;left:0;display:block;max-width:none;height:auto}
.panel-scan-list{top:17%;right:3%;width:54%;aspect-ratio:390/440;transform:rotate(2deg)}
.panel-scan-list img{width:100%;margin-top:-103.59%}
.panel-collection-summary{top:19%;right:3%;width:54%;aspect-ratio:358/277;transform:rotate(2deg)}
.panel-collection-summary img{width:108.94%;margin-left:-4.47%;margin-top:-34.64%}
.panel-collection-cards{top:57%;right:0;width:54%;aspect-ratio:358/174;transform:rotate(-2deg)}
.panel-collection-cards img{width:108.94%;margin-left:-4.47%;margin-top:-59.22%}
.scan-card-fan{position:absolute;right:5%;bottom:-1%;width:42%;height:28%;z-index:2;pointer-events:none}
.scan-card-fan img{position:absolute;bottom:0;width:43%;height:auto;border-radius:6px;box-shadow:0 10px 16px -6px var(--alpha-art-shadow);transform-origin:50% 90%}
.scan-card-fan img:nth-child(1){left:0;transform:rotate(-16deg)}
.scan-card-fan img:nth-child(2){left:29%;bottom:5%;transform:rotate(-3deg)}
.scan-card-fan img:nth-child(3){left:58%;transform:rotate(11deg)}
body .feature-story .feature-text{display:block;margin:0;width:100%;max-width:none;justify-self:stretch;text-align:left;min-width:0}
body .feature-story .feature-text h2{font-size:28px;line-height:38px;font-weight:600;letter-spacing:-.01em;margin:0 0 16px}
body .feature-story .feature-text p{font-size:16px;line-height:24px;margin:0 0 16px;color:var(--color-text-secondary);max-width:none}
body .feature-text p br{display:none}
body .feature-steps{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;color:var(--color-text-muted);font-size:12px;line-height:18px}
@media(min-width:761px){
 body .scan-story .feature-art{grid-column:2;grid-row:1;align-items:flex-start}
 body .scan-story .feature-text{grid-column:1;grid-row:1;text-align:right}
 body .scan-story .feature-steps{justify-content:flex-end}
 body .asset-story .feature-art{grid-column:1;grid-row:1;align-items:flex-end}
 body .asset-story .feature-text{grid-column:2;grid-row:1;text-align:left}
}
body .feature-story .text-link{margin:0;padding:0;min-height:44px;color:var(--color-brand-link-text);font-size:14px;font-weight:600;border:0}
body .home-insights{padding:0;max-width:var(--site-content-width)}
body .insight-heading{display:flex;align-items:center;gap:6px;justify-content:space-between;min-height:18px;padding-inline:16px;margin:0 0 12px}
body .insight-heading .text-link{font-size:12px;font-weight:600;color:var(--color-brand-link-text);margin:0;border:0;min-height:44px}
body .market-panel .insight-heading{justify-content:flex-start}
.home-section-link{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--color-text-muted);font-size:24px}
.home-market-list{display:grid;gap:8px}
.home-market-head{display:grid;grid-template-columns:24px minmax(0,1fr) 140px 116px;gap:12px;padding:0 16px;margin-bottom:12px;font-size:12px;line-height:16px;color:var(--color-text-muted)}
.home-market-head span:nth-child(n+3){text-align:right}
body .market-preview{display:flex;align-items:center;gap:12px;min-height:80px;padding:8px 16px;border-radius:6px;background:var(--color-page-bg);box-shadow:none}
.market-rank{width:24px;flex:none;text-align:center;font-size:14px;color:var(--color-text-muted)}
body .market-art{width:34px;height:48px;object-fit:contain;flex:none;border-radius:0}
body .market-identity{display:grid;gap:2px;min-width:0;flex:1}
body .market-name{font-size:16px;line-height:22px;font-weight:600;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .market-set,body .market-meta{font-size:13px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
body .market-meta{font-size:12px;line-height:16px}
body .market-meta{display:flex;align-items:center;gap:4px}
body .market-meta:before{content:'';width:16px;height:16px;flex:none;background:center/contain no-repeat url('/assets/ui-icons/controls/language.svg')}
body .market-meta[data-card-edition=ko]:before{background-image:url('/assets/filter-icons/kr.svg')}
body .market-meta[data-card-edition=ja]:before{background-image:url('/assets/filter-icons/jp.svg')}
body .market-numbers{display:flex;align-items:flex-end;flex-direction:column;gap:2px;max-width:45%;font-variant-numeric:tabular-nums}
body .market-price{font-size:16px;line-height:22px;font-weight:600}
body .market-change{font-size:13px;line-height:18px;font-weight:600;color:var(--color-rise)}
body .market-change.down{color:var(--color-fall)}
body .art .current-price:not(.no-price){font-size:34.0743px}
@media(min-width:761px){
 body .market-panel .insight-heading{height:20px;min-height:20px}
 body .market-panel .home-section-link{position:relative;min-height:20px;height:20px}
 body .market-panel .home-section-link::after{content:'';position:absolute;inset:-12px 0}
 body .home-market-head{height:40px;align-items:center;grid-template-columns:40px minmax(0,1fr) 160px 120px;margin-bottom:8px}
 body .market-preview{height:72px;min-height:72px;padding:12px 16px}
 body .market-rank{width:40px}
 body .market-identity{margin-block:-6px}
 body .market-numbers{display:grid;grid-template-columns:160px 120px;align-items:center;gap:12px;max-width:none;text-align:right}
}
.news-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
body .news-panel>.insight-heading{display:contents}
body .news-panel .insight-heading .eyebrow{grid-column:1;grid-row:1;padding-inline:16px;align-self:center}
body .news-panel .insight-heading .text-link{grid-column:2;grid-row:1;margin-right:16px}
.home-news-list{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-inline:16px}
body .news-preview{display:block;background:none;padding:0;min-height:0;border-radius:0;box-shadow:none}
body .news-art{display:block;width:100%;height:auto;aspect-ratio:304/204;object-fit:cover;border-radius:8px;margin:0}
body .news-title{font-size:18px;line-height:26px;font-weight:600;margin:12px 16px 4px;min-height:52px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:wrap}
body .news-date{display:block;margin:0 16px 16px;font-size:12px;line-height:16px;color:var(--color-text-muted)}
.home-news-dots{display:none}.home-load{color:var(--color-text-muted);font-size:14px;line-height:20px;margin:12px 0;min-height:44px}
body .questions{max-width:var(--site-content-width);gap:12px;grid-template-columns:1fr}
body .questions>div:first-child{display:block}
body .questions>div:first-child>.text-link{display:none}
body .answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
body .answers details{padding:0;border:0;border-radius:12px;background:var(--color-page-bg);min-width:0}
body .answers summary{padding:16px;font-size:16px;font-weight:600;line-height:24px;min-height:56px;cursor:pointer;display:grid;grid-template-columns:12px minmax(0,1fr) 24px;align-items:center;gap:12px}
body .answers summary::after,body .answers details[open] summary::after{content:none}
body .answers .faq-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body .answers .faq-caret{display:block;width:24px;height:24px;stroke:currentColor;flex:none}
body .answers details[open] .faq-caret{transform:rotate(180deg)}
body .answers summary::before{content:"Q";color:var(--color-brand-link-text);font-weight:600}
body .answers p{padding:0 12px 12px;font-size:14px;line-height:22px}
body .home-data{width:calc(100% - 2*var(--site-gutter,16px));max-width:1184px;margin:0 auto 24px;border:.8px solid var(--color-area-stroke);border-radius:16px;background:linear-gradient(107deg,var(--color-area-fill-start),var(--color-area-fill-start) 35%,var(--color-panel))}
body .home-data>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;min-height:56px;padding:16px 24px;cursor:pointer;font-size:14px;line-height:24px;font-weight:500}
body .home-data>summary::-webkit-details-marker{display:none}
body .home-data>summary svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
body .home-data[open]>summary svg{transform:rotate(180deg)}
body .home-data .home-prices{max-width:none;margin:0;padding:0 24px 16px}
@media(max-width:760px){
 body .home-features,body .home-insights,body .questions{margin-bottom:12px;gap:12px}
 body .feature-story,body .insight-panel,body .questions{padding:12px}
 body .home-features .eyebrow{padding-inline:16px}
 body .feature-body{display:flex;flex-direction:column;gap:12px;min-height:0;padding-inline:0}
 body .feature-story .feature-art{height:310px;flex:none;margin:0}
 .device-pair{max-width:302px}
 .product-phone{border-radius:20px;padding:12px 4px 6px;box-shadow:0 14px 22px -10px var(--alpha-art-shadow)}
 .product-phone img{border-radius:12px}
 body .feature-story .feature-text{text-align:center;padding:0 16px;width:100%}
 body .feature-text p br{display:initial}
 body .feature-story .feature-text h2{font-size:24px;line-height:32px;margin:0 0 12px}
 body .feature-story .feature-text p{font-size:16px;line-height:24px;margin:0 auto 12px;max-width:none}
 body .feature-story>.eyebrow{margin:0 0 12px}
 body .feature-steps{align-items:center;justify-content:center}
 body .home-insights,body .questions{max-width:calc(100% - 2*var(--site-gutter,16px))}
 body .market-preview{gap:8px;padding:8px;min-height:64px}
 body .market-rank{display:none}
 .home-market-head{display:none}
 body .market-name{font-size:15px;line-height:20px}
 body .market-price{font-size:15px;line-height:20px}
 body .art .current-price:not(.no-price){font-size:14.2584px}
 body .market-set{display:none}
 body .market-meta{font-size:12px;line-height:16px}
 body .home-news-list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 16px}
 body .home-news-list::-webkit-scrollbar{display:none}
 body .news-preview{flex:0 0 min(280px,100%);scroll-snap-align:start}
 body .news-art{aspect-ratio:304/204}
 body .news-panel{grid-template-columns:1fr}
 body .news-panel .insight-heading .text-link{grid-column:1;grid-row:4;justify-self:center;margin:0;font-size:14px;line-height:20px}
 body .home-news-dots{grid-column:1;grid-row:3;display:flex;justify-content:center;gap:8px;margin:0}
 .home-news-dots i{width:6px;height:6px;border-radius:50%;background:var(--color-border-strong)}
 .home-news-dots i.active{background:var(--color-text-muted)}
 body .answers{grid-template-columns:1fr;gap:8px}
 body .answers summary{font-size:16px;min-height:56px}
 body .answers .faq-label{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:wrap}
 body .home-data{margin-bottom:12px}
 body .home-data>summary{padding:12px 16px;min-height:48px}
 body .home-data .home-prices{padding:0 16px 12px}
}

/* A single inset per surface, shared with exploration. */
@media(max-width:767px){
 :root{--site-gutter:8px}
 body .home-insights{padding:0;gap:8px;margin-bottom:8px}
 body .questions,body .insight-panel{padding:8px;margin-bottom:8px}
 body .insight-panel .insight-heading,body .news-panel .insight-heading .eyebrow{padding-inline:0}
}