/* shell: 원본 marketpug.com 과 맞추기 (2026-10-21) — 위 메뉴 · 마켓 · 마켓에서 여는 화면/창. index.html 안 스타일보다 뒤에 읽혀 이김 */

/* ===== 로고 (앱 SymbolIcon: 흰 칸 안 12% 여백, 그림 없으면 surface2 + 첫 글자) ===== */
.lg { padding: calc(var(--s) * .12) }
.lg:not(:has(img)) { padding: 0; background: var(--surface2); color: var(--tx2); font-size: calc(var(--s) * .42) }

/* ===== 위 메뉴 (desktop_shell) ===== */
#acct.pillb { gap: 6px }
#acct.acc-on { width: 36px; height: 36px; min-width: 36px }
.tb.box svg, #acct svg { flex: none }

/* ===== 마켓 홈 (markets_screen) ===== */
body[data-r="markets"] .ptitle { line-height: normal; margin-bottom: 15px }   /* 앱 Text 기본 높이 24×1.448 + 16 */
.pg small, .pg em { line-height: 15.5px } .pg b { line-height: 24px }
body[data-r="markets"] #view > .sec:first-of-type > .sh { margin-bottom: 12px }
body[data-r="markets"] #view > .sec + .two.wide { margin-top: 22px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--tx3) 30%, transparent) }
@media (max-width: 899.98px) {   /* 좁으면 섹터 · 시가총액도 위아래 + 구분선 (앱 _SectionDivider) */
  body[data-r="markets"] #view > .two.wide { gap: 0 }
  body[data-r="markets"] #view > .two.wide > .sec + .sec { margin-top: 22px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--tx3) 30%, transparent) }
}
.asof { line-height: 17px }
/* 시장 요약: 금리 카드는 글자 위로 붙이고 > 만 가운데 (앱 Column + Row) */
.prr { align-items: center } .prr > div:first-child { align-self: flex-start }
/* 줄 (캘린더 · 시총): 오른쪽 값 사이 2px, 줄 높이 앱과 같게 */
.crow .rr, .kr .rr { gap: 0 } .crow .rr > small:not(.cdl), .kr .rr > small { margin-top: 2px }
.crow .rr b { line-height: 18px } .crow .rr .cdl, .crow .rr > small { line-height: 15px }
.crow .rm small.l3 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical }
.crow .rr small.ic2 { display: inline-flex; gap: 3px; font-size: 10.5px }
.kr > .krk { width: 22px; margin-right: -11px; text-align: left; font-size: 14px; font-weight: 700; color: var(--tx3) }
.mpg .krs .kr > .krk { width: 28px }
.si > small.si2 { margin-top: 1px }
.kr.kcorr { gap: 12px } .crm small { margin-top: 2px }
.pair2 .lg:first-child { top: 0 } .pair2 .lg + .lg { left: 20px; top: 2px }
.slist2 > .slr:last-child { border-bottom: 0 }
.svt button svg { display: block }
.empty.ctr { text-align: center; padding: 16px }

/* ===== 아래에서 올라오는 창 공통 · M3 손잡이 (showDragHandle: 32×4, 위아래 22) ===== */
.bsb.isb > .hdl, .bsb.lgs > .hdl { flex: none; width: 32px; height: 4px; margin: 22px auto; border-radius: 2px; background: #CAC4D0 }
:root[data-theme="light"] .bsb.isb > .hdl, :root[data-theme="light"] .bsb.lgs > .hdl { background: #49454F }
/* ⓘ 설명 창 (showInfoSheet) */
.bsb.isb { padding: 0 22px 20px; max-height: calc(85vh + 48px) }
.ist b { line-height: normal }
.isbody { margin: 14px 0 18px; line-height: 20px }
.isb .gbtn { height: 32px; border-radius: 999px; background: var(--brand); color: #381E72; font-size: 14px; font-weight: 500 }
:root[data-theme="light"] .isb .gbtn { color: #fff }
/* 언어 선택 (language_selector: 목록은 화면 70% 까지, 넘치면 스크롤) */
.bsb.lgs { padding: 0; overflow: hidden; max-height: calc(70vh + 48px) }
.modal.must .bsb.lgs { max-height: 70vh }
.lgs .bst { margin: 0; padding: 4px 20px 12px; font-size: 17px; line-height: normal }
.modal.must .lgs .bst { padding: 16px 20px 4px }
.lgs .bss { margin: 0; padding: 0 20px 12px; font-size: 13px; color: var(--tx3); line-height: normal }
.lgl { overflow: auto; min-height: 0; padding-bottom: 8px }
.lgl .rm { gap: 0 } .lgl small { color: var(--tx3) }
/* 로그인 (sign_in_sheet) */
.bsb.sis { padding: 8px 20px 24px; gap: 0 }
.sis > .hdl { flex: none; width: 40px; height: 4px; margin: 0 auto 18px; border-radius: 2px; background: var(--line) }
.sis .bst { margin: 0; font-size: 20px; line-height: normal }
.sis .bss { margin: 4px 0 20px; font-size: 12.5px; line-height: 1.4; color: var(--tx3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.sis .sib { height: 50px; gap: 8px; border-radius: 12px; font-size: 15px; font-weight: 700; flex: none }
.sis .sib + .sib { margin-top: 10px }
.sis .sib.a { border: 0 }
.sis .sib svg { flex: none }
.sis .sispin { width: 22px; height: 22px; margin: 16px auto 0; border-radius: 50%; border: 2.4px solid var(--brand); border-right-color: transparent; animation: sispin .8s linear infinite }
@keyframes sispin { to { transform: rotate(1turn) } }
/* 계정 (AccountButton._showAccount: 손잡이 없음) */
.bsb.acs { padding: 16px 20px 24px; gap: 0 }
.acs .acr { margin: 0 0 16px; gap: 12px }
.acs .av { width: 40px; height: 40px; background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand) }
.acs .acr b { font-size: 15px; font-weight: 800 } .acs .acr small { font-size: 12px; color: var(--tx3) }
.acs .subrow { padding: 14px; gap: 12px; border-radius: 12px; border: 1px solid var(--line); color: inherit; width: 100% }
.acs .subrow b { flex: 1; font-size: 14px; font-weight: 700 }
.acs .subrow > svg:first-child { color: var(--tx2) } .acs .subrow > svg:last-child { color: var(--tx3) }
.acs .sib.o { margin-top: 10px; height: 40px; gap: 8px; border-radius: 12px; border: 1px solid var(--line); color: var(--tx2); font-size: 14px; font-weight: 500; background: none }
/* 구독 (showSubscriptionSheet) */
.bsb.sbs { padding: 12px 20px 24px; gap: 0 }
.sbs > .hdl { flex: none; width: 40px; height: 4px; margin: 0 auto 16px; border-radius: 2px; background: var(--line) }
.sbh { display: flex; align-items: center; justify-content: space-between } .sbh b { font-size: 20px; font-weight: 800 }
.sbb { padding: 3px 9px; border-radius: 8px; font-size: 12px; font-weight: 800; font-style: normal }
.sbd { margin: 14px 0 0; font-size: 13px; color: var(--tx2) }
.sbs .gbtn { margin-top: 18px; height: 44px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 800; font-size: 14px }
/* 관심목록 팝업 (PopupMenuButton: 버튼 아래 · 왼쪽 맞춤 · 둥근 12) */
.wlpop { left: 0; right: auto; top: 100%; margin-top: 0; width: auto; min-width: 112px; max-width: 280px; padding: 8px 0; border-radius: 12px; border: 1px solid var(--line); background: var(--surface) }
.wlpop .wlr { min-height: 40px; padding: 4px 12px; gap: 0; border-radius: 0; color: inherit }
.wlpop .wlr .lg { margin-right: 10px }
.wlpop .wlr .rm { gap: 0 } .wlpop .wlr .rm b { font-size: 13px; font-weight: 700 } .wlpop .wlr .rm small { font-size: 10.5px; color: var(--tx3) }
.wlpop .wlr .rr { margin-left: 12px }
.wlpop .wle { padding: 0 12px; min-height: 40px; display: flex; align-items: center; font-size: 12px; color: var(--tx3) }

/* ===== 도움말 (intro_dialog: 460×560 가운데, 페이지 넘김) ===== */
.modal:has(.intro) { padding: 24px; place-items: center }
.intro { height: min(560px, calc(100vh - 48px)); overflow: hidden }
.intro .ix { top: 8px; right: 8px; width: 40px; height: 40px; padding: 0; color: var(--tx3); border-radius: 50% }
.intro .ix:hover { background: color-mix(in srgb, var(--tx) 8%, transparent) }
.intro .ipg { margin-top: 40px; min-height: 0; overflow: hidden }
.intro .ipg.in-l { animation: ipl .28s cubic-bezier(.215, .61, .355, 1) } .intro .ipg.in-r { animation: ipr .28s cubic-bezier(.215, .61, .355, 1) }
@keyframes ipl { from { transform: translateX(40%); opacity: 0 } } @keyframes ipr { from { transform: translateX(-40%); opacity: 0 } }
.intro .icir { margin-bottom: 24px }
.intro .ipg h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.3px; color: var(--tx); line-height: normal }
.intro .ipg p { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--tx2); white-space: pre-line }
.intro .idots { margin: 16px 0 }
.intro .idots i { background: var(--line); transition: width .22s }
.intro .idots i.on { background: var(--brand) }
.intro .ibtn { height: 32px; padding: 0 16px; flex: none }
.intro .iprev { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 14px; font-weight: 700; color: var(--tx2) }
.intro .iprev:hover { background: color-mix(in srgb, var(--brand) 8%, transparent) }
.intro .inext { height: 32px; padding: 0 22px; border-radius: 12px; font-size: 14px; font-weight: 800; line-height: 1 }

/* ===== 상세 화면 틀 (Scaffold + AppBar 56) ===== */
.mpgh { position: relative; height: 56px; padding: 0; gap: 0; background: var(--surface) }
.mpgh .mpgbk { width: 56px; height: 56px; padding: 0; color: var(--tx); flex: none }
.mpgh h1 { flex: 1; min-width: 0; margin: 0 0 0 16px; text-align: left; font-size: 18px; font-weight: 800; color: var(--tx); line-height: normal }
.mpgh.ctr h1 { position: absolute; left: 72px; right: 72px; margin: 0; text-align: center; pointer-events: none }
.mpga { margin-left: auto; display: flex; flex: none }
.mpga .ib { width: 40px; height: 40px; padding: 0; color: var(--tx) }
.mpgt { flex: none } .mpgtw { max-width: 720px; margin: 0 auto; padding: 0 18px }
.mpgt.pt8 .mpgtw { padding-top: 8px } .mpgt.pb8 .mpgtw { padding-bottom: 8px }
.mpgt.wide .mpgtw { max-width: none }
.mpgw.pt16 { padding-top: 16px }
.mpgw.mcal { padding: 4px 18px 24px } .mpgw.mlist { padding: 4px 18px 24px }
.mpgw.wide { max-width: none; padding: 6px 16px 28px }
.mpgw .asof { margin: 0 0 10px; line-height: 17px }
.mpgw > .asof + .invb { margin-bottom: 14px }
.mpgw .tcard { margin-top: 16px }
.mpgw > .asof + div > .tcard:first-child, .mpgw > .invb + div > .tcard:first-child, .mpgw > div:first-child > .tcard:first-child, #et > .tcard { margin-top: 0 }
#tt > .tcard { margin-top: 16px }

/* 추이 차트 카드 (TrendLineChart) */
.tcard { padding: 16px 18px 14px; border-radius: 18px }
.tch { gap: 5px } .tch span { line-height: normal } .tch .ib { width: auto; height: auto; padding: 0; color: var(--tx3) } .tch .ib svg { width: 14px; height: 14px }
.tcv { align-items: flex-end; gap: 0; margin-top: 4px; flex-wrap: nowrap } .tcv b { line-height: normal }
.tcv > span { display: inline-flex; align-items: center; gap: 0; margin: 0 0 3px 10px } .tcv > span svg { margin-right: 3px } .tcv > span em { font-style: normal; font-size: 13px; font-weight: 700 } .tcv > span small { margin-left: 4px; font-size: 11px; color: var(--tx3); font-weight: 400 }
.tcc { margin-top: 16px; height: 168px } .tcc canvas { cursor: default }
.tcd { margin-top: 8px; font-size: 10.5px; line-height: normal }

/* 공포·탐욕 계기판 카드 */
.gcard { gap: 0; padding: 18px; border-radius: 18px; line-height: normal }
.gcard > svg { margin: 6px 0 } .gcard > b { line-height: normal } .gcard > span { margin-top: 2px } .gcard > span.src { margin-top: 6px }
/* 금리 역전 안내 */
.invb { gap: 9px; padding: 12px; border-radius: 12px } .invb span { font-size: 12px; line-height: 1.4; color: var(--tx2) }

/* 캘린더 전체 */
.mpgtw .cwr { margin: 8px 0; gap: 10px } .cwr > #cw { flex: 1 1 0; min-width: 0 } .cwr > #ca { flex: 1 1 0; min-width: 0; display: flex }
.cwr > #ca .asof { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dh { padding: 18px 0 6px; gap: 0; line-height: normal } .tdb { margin-left: 7px; color: var(--brand) }

/* 경제지표 상세 */
.ehc { padding: 16px; border-radius: 16px } .ehc > small { line-height: normal }
.e3 span { gap: 4px } .e3 small, .e3 b { line-height: normal }
.uh { margin: 20px 0 6px }
.err.last { border-bottom: 0 } .err .rr small { margin-top: 2px } .err b, .err small { line-height: normal }
.ehe { margin: 0; padding: 20px; text-align: center; color: var(--tx3); font-size: 13px }

/* 섹터 상세 */
.sdh { padding: 18px; border-radius: 18px } .sdh > div { gap: 0 } .sdh .sdt { gap: 8px } .sdh > div > b { margin-top: 5px } .sdh > div > small { margin-top: 4px } .sdh > em { line-height: normal }
.dsh { margin: 24px 0 12px; line-height: normal } .dsh .ib { width: auto; height: auto; padding: 4px 4px 4px 7px; color: var(--tx2) } .dsh .ib svg { width: 16px; height: 16px }
.rbr { gap: 12px } .rbr > span:first-child { font-weight: 600 }
.hr { gap: 0 } .hr.last { border-bottom: 0 } .hr > .krk { width: 20px; margin-right: 8px; text-align: left; font-size: 14px; font-weight: 700; color: var(--tx3) } .hr > .lg { margin-right: 11px }
.hr .si > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hw { margin-left: 12px; gap: 5px } .bar64 { display: block; width: 64px; height: 4px; border-radius: 3px; background: var(--surface2); overflow: hidden } .bar64 i { display: block; height: 100%; background: var(--brand) }
.htg { gap: 4px; padding: 14px 0 }
.noh { margin: 0; padding: 16px; color: var(--tx2) }

/* 상관관계 찾기 */
.mpgtw .csrch { height: 42px; margin: 0 0 6px; padding: 0 4px 0 12px; border-radius: 12px; gap: 10px }
.mpgtw .csrch input::-webkit-search-cancel-button { display: none }
.mpgtw .csrch input::placeholder { color: var(--tx3) }
.cqx { width: 36px; height: 36px; padding: 0; color: var(--tx3) } .cqx[hidden] { display: none }
#ci { padding: 2px 0 6px } #ci[hidden] { display: none }
.mcorr #cd { margin-top: 0 }
.ch2 { margin: 0; padding: 10px 2px; line-height: normal }
.acard { padding: 12px 13px 14px; margin-bottom: 12px; border-radius: 14px }
.atop { gap: 0 } .atop > .si { flex: 1 } .atop > small { margin-left: 8px; font-size: 11px; color: var(--tx3) }
.nbs { gap: 8px; margin-top: 11px; align-items: stretch }
.nb { width: 166px; padding: 0; gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; flex-direction: row; align-items: stretch }
.nba { flex: none; width: 3.5px; background: var(--acc) }
.nbi { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px 12px 13px }
.nbi .nbv { margin-top: 12px; gap: 10px } .bar5 i { border-radius: 3px }
/* 관계도 (화면 가득) */
.mpgb:has(.egob) { display: flex; flex-direction: column }
.mpgw.egob { flex: 1; width: 100%; max-width: none; padding: 0; display: flex; flex-direction: column; min-height: 420px }
.egosk { padding: 18px }
.mpgw.egob .ego { flex: 1; margin: 0; max-width: none; min-height: 300px; position: relative; overflow: hidden }
.ego svg { position: absolute; inset: 0 }
.enode { transform: translateY(-50%); height: auto; padding: 0; flex-direction: row; align-items: stretch; border-left: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.25) }
.eni { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 9px 11px } .enode.cmp .eni { padding: 8px 10px }
.eni > b { align-self: flex-end; margin-top: 3px; font-size: 14px; font-weight: 800; color: var(--acc) } .enode.cmp .eni > b { font-size: 13px }
.eni .si small.si2 { font-size: 10px } .enode.cmp .eni .si small.si2 { font-size: 9.5px }
.eni .si1 em, .eni .si small.si3 { font-size: 9px } .enode.cmp .eni .si1 em, .enode.cmp .eni .si small.si3 { font-size: 8.5px }
.ecen { border: 1.5px solid var(--line); box-shadow: 0 0 18px 1px rgba(0,0,0,.4); text-align: center }
.egob .elg { justify-content: center; margin: 0; padding: 0 16px 2px; gap: 6px 14px } .egob .elg i { border-radius: 3px }
.egob .eme { margin: 0; padding: 6px 18px } .egob .eme > small { font-size: 11px; margin-left: 8px }
.eallw { padding: 0 16px 14px }
.egob .obtn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 32px; border-radius: 12px; border: 1px solid var(--line); color: var(--tx); font-size: 14px; font-weight: 500 }
/* 전체 이웃 목록 */
.mpgt.eaht { border-bottom: 1px solid var(--line) }
.eah { display: flex; align-items: center; padding: 10px 0; gap: 0 } .eah b { font-size: 16px; font-weight: 800 } .eah span { flex: 1; min-width: 0; margin-left: 8px; font-size: 12px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .eah small { font-size: 11px; color: var(--tx3) }
.mpgw.eab { padding: 6px 14px 24px }
.eab .elr { gap: 0; padding: 9px 4px; border: 0; border-radius: 10px; text-align: left }
.eab .elr:hover { background: color-mix(in srgb, var(--tx) 5%, transparent) }
.eab .elr > i { flex: none; width: 4px; height: 30px; border-radius: 2px; margin-right: 10px }
.elc { display: flex; flex-direction: column } .elc b { font-size: 13px; font-weight: 800 } .elc small { font-size: 9.5px }
.eln { flex: 1; min-width: 0; margin: 0 8px 0 12px; font-size: 12px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.eab .bar56 { flex: none; border-radius: 4px } .eab .bar56 i { border-radius: 4px }
.eab .elr em { width: 34px; margin-left: 10px; font-size: 12px; font-weight: 800 }
/* 쌍 상세 */
.sdh.pdh { border-radius: 16px } .pdt { font-size: 16px; font-weight: 800; color: var(--tx) } .sdh.pdh > div > b + b { margin-top: 4px; font-size: 13px } .sdh.pdh > div > small { margin-top: 2px; font-size: 11px }
#pc1 .pcc { margin-top: 18px } #pc2 .pcc { margin-top: 16px }
.pcc { padding: 14px; border-radius: 16px } .pch2 { gap: 11px; margin-bottom: 12px }
.pch2 .si1 { align-items: center; gap: 8px } .pch2 .si1 b { font-size: 16px; font-weight: 800 } .pch2 .si > small { font-size: 12px; color: var(--tx2) }
.stag { font-style: normal; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent) }
.pch2 .rr { gap: 0 } .pch2 .rr b { font-size: 15px; font-weight: 800 } .pch2 .rr small { font-size: 12px; font-weight: 700 }
.lc { height: 170px } .lcv { width: 100%; height: 170px; display: block; touch-action: pan-y }

/* 종목 안내 창 (showSymbolDetailSheet: 손잡이 없음) */
.ssb { padding: 18px 20px 24px } .ssh { margin: 0 0 12px } .ssb hr { margin: 0 0 4px } .ssn { margin-top: 8px }
.ssh .si small.si2 { margin-top: 1px }
.sis .sib .ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
body[data-r="markets"] .sh:has(.svt) { margin-bottom: 14px }   /* 섹터 제목줄 + 14 (칩 margin-top 은 겹쳐 사라짐) */
.crm small { line-height: 16px }
/* 앱 글자 높이(크기×1.448)에 맞춘 줄 높이 */
.gcard > small { line-height: 18px } .gcard > b { line-height: 43px } .gcard > em { line-height: 21.5px } .gcard > span { line-height: 16px } .gcard > span.src { line-height: 15px }
.tch span { line-height: 18px } .tcv b { line-height: 31.8px } .tcd { line-height: 15px }
.crow .rm { gap: 0 } .dh { line-height: 18px }
.mpgh.plain h1 { font-size: 22px; font-weight: 400 }
.mpg > .mpgt { flex: 0 0 auto; height: auto; min-height: 0; overflow: visible }
.sdh.pdh > div > b.pdt { margin-top: 0; font-size: 16px; font-weight: 800; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sdh.pdh > em { font-size: 30px; font-weight: 900; letter-spacing: 0 }
.si > small { white-space: normal; overflow: visible }   /* 앱 SymbolInfo: 이름·업종은 줄바꿈 */
.mpgtw .csrch { height: 40px }
.slr .rm { gap: 0 } .slr .rm small { line-height: 16px }

/* 구독 안내 창 (앱 _SubscribeSheet 웹 분기) · 종목 잠금 카드 (앱 PremiumGate) */
.bsb.psheet { width: min(560px, 100%); max-height: 92vh; padding: 14px 20px 24px; gap: 0; border-radius: 20px 20px 0 0 }
.psheet .hdl { width: 40px; height: 4px; border-radius: 2px; background: var(--line2); margin: 0 auto 18px }
.psheet .bst { font-size: 20px; font-weight: 800 } .psheet .bss { font-size: 12.5px; color: var(--tx3) }
.pben { display: flex; flex-direction: column; margin-top: 16px } .pben > div { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--brand) } .pben span { color: var(--tx); font-size: 13.5px }
.pga { display: block; margin-top: 20px; text-align: center; font-size: 15px; font-weight: 800 } .pgd { margin: 6px 0 0; text-align: center; font-size: 12.5px; color: var(--tx3); line-height: 1.4 }
.pqr { display: flex; justify-content: center; margin-top: 16px } .pqr > div { width: 180px; height: 180px; padding: 12px; border-radius: 12px; background: #fff } .pqr svg { width: 156px; height: 156px; display: block }
.pqs { display: block; margin-top: 8px; text-align: center; font-size: 12px; color: var(--tx3) }
.pstores { display: flex; flex-direction: column; gap: 8px; margin-top: 14px } .pstores:empty { display: none }
.pstore { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 0; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); color: var(--tx); font-size: 13.5px; font-weight: 700 } .pstore:hover { filter: brightness(1.1) }
.ptb { display: block; margin: 6px auto 0; padding: 10px 12px; border: 0; background: none; color: var(--tx2); font-size: 14px; border-radius: 20px } .ptb:hover { background: color-mix(in srgb, var(--tx2) 8%, transparent) }
.plegal { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 16px; font-size: 12px; color: var(--tx3) } .plegal a { color: var(--tx3); text-decoration: underline }
.lockov.lockov2 { place-items: center; padding: 20px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: color-mix(in srgb, var(--bg) 45%, transparent); border-radius: 0 }
.lockc3 { width: min(320px, 100%); padding: 20px 20px 18px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; text-align: center }
.lockc3 > b { margin-top: 10px; font-size: 16px; font-weight: 800 } .lockc3 > small { margin-top: 4px; font-size: 12px; color: var(--tx3); line-height: 1.4; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.lkb { width: 100%; margin-top: 16px; padding: 13px 0; border: 0; border-radius: 999px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 800 } .lkb:hover { filter: brightness(1.08) }
.lkt { margin-top: 6px; padding: 10px 12px; border: 0; border-radius: 20px; background: none; color: var(--tx2); font-size: 13px } .lkt:hover { background: color-mix(in srgb, var(--tx2) 8%, transparent) }