/* CONTTO NEXT account pages (B3-A6) in Liquid Glass (owner T123/T129, docs/LIQUID-GLASS-MIGRATION.md P2 L7): 로그인 · 소재 목록 ·
   브랜드 설정 · 팀 · 알림. Tokens and components: /static/lg/lg-tokens.css + lg.css; the 소재 목록 list itself and the 소재 sheet live in
   /static/lg/app/p2.css (shared with the app). Every rule is scoped (.lg-acct = this page, .acct = the views on the page and inside the
   app's sheets), so the wizard never picks up a generic name from here. Two layouts: the glass sidebar from 900 px, a floating glass tab
   bar on phones. Content stays opaque; glass only floats (sidebar, top groups, tab bar, save bar). */

/* ======================================================================== page shell */
.lg-acct { background: var(--n1);}
.lg-acct .acct-shell { min-height: 100dvh;}
.lg-acct .acct-col { min-width: 0;}
.lg-acct .acct-side { display: none;}
@media (min-width: 900px) {
  .lg-acct .acct-shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr);}
  .lg-acct .acct-side { display: flex;}
}
@media (max-width: 899px) { .lg-acct .ds-rail.acct-side { display: none;} }
.lg-acct .acct-brand { color: var(--n9); text-decoration: none;}
.acct-logo { display: grid; place-items: center; width: var(--s6); height: var(--s6); border-radius: var(--r1); flex: none; background: var(--mark-ink); color: var(--mark-yellow); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.lg-acct .acct-side .ds-rail__item { min-height: var(--s6);}
.lg-acct .acct-side-nav { display: grid; gap: var(--hair2); margin-top: var(--s2);}
.lg-acct .acct-side-foot { margin: 0 var(--s2); font: var(--t-body); color: var(--n5);}
/* the top row: no slab, glass groups only */
.lg-acct .acct-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s2); height: auto; min-height: var(--s7);
  padding: calc(env(safe-area-inset-top, 0) + var(--s1)) var(--s4) var(--s1); background: transparent; border: 0; pointer-events: none;}
.lg-acct .acct-top > * { pointer-events: auto;}
.lg-acct .acct-top::before { content: ""; position: absolute; inset: 0 0 calc(-1 * var(--s4)); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--n1) 30%, color-mix(in srgb, var(--n1) 0%, transparent));}
.lg-acct .acct-back { flex: none;}
.lg-acct .acct-mark { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); letter-spacing: var(--track-tight); color: var(--n9); text-decoration: none; padding: var(--s2) var(--hair2);}
.lg-acct .acct-spacer { flex: 1;}
.lg-acct .acct-who { gap: var(--s2); padding: 0 var(--s4); font-size: var(--fs-body);}
.lg-acct .acct-who.is-member { padding: 0 var(--s3) 0 var(--s1);}
.lg-acct .acct-who .av { display: grid; place-items: center; width: var(--s6); height: var(--s6); border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.lg-acct .acct-who__mail { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-regular);}
@media (max-width: 899px) { .lg-acct .acct-who__mail { display: none;} .lg-acct .acct-who.is-member { padding: 0; width: var(--s7);} .lg-acct .acct-who .av { width: var(--s6); height: var(--s6);} }
@media (min-width: 900px) { .lg-acct .acct-back, .lg-acct .acct-mark { display: none;} .lg-acct .acct-top { padding-top: var(--s3);} }
/* the content column */
.lg-acct main.acct { display: grid; gap: var(--s4); max-width: calc(var(--s7) * 24.58); margin: 0 auto; padding: 0 var(--s4) calc(calc(var(--tap) + var(--s5)) + var(--s2) + var(--s6) + env(safe-area-inset-bottom, 0)); outline: none;}
@media (min-width: 900px) { .lg-acct main.acct { padding: 0 var(--s6) calc(var(--s7) * 1.33); gap: var(--s4);} }
/* the floating glass tab bar (phones only); it gives way to the save bar and to the selection bar */
.lg-acct .acct-dock { display: block;}
.lg-acct .acct-dock .ds-tabbar__lens[hidden] { display: none;}
@media (min-width: 900px) { .lg-acct .acct-dock { display: none;} }
body.lg-acct:has(#bar:not([hidden])) .acct-dock, body.lg-acct.p2-selecting .acct-dock { display: none;}
/* the save bar (brand settings): a glass row floating at the bottom, the primary trailing */
.lg-acct .bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: var(--s2) var(--s4) calc(env(safe-area-inset-bottom, 0) + var(--s3));
  background: linear-gradient(to top, var(--n1) 20%, transparent); border: 0; box-shadow: none; pointer-events: none;}
.lg-acct .bar .ds-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--s7); padding: 0 var(--s5);}

.lg-acct .bar > * { pointer-events: auto;}
.lg-acct .bar .bar-note { max-width: calc(var(--s7) * 11.67); margin: 0 auto var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r2); text-align: center;
  font: var(--t-body); color: var(--n9); background: var(--n0); box-shadow: var(--e1), 0 0 0 var(--hair) var(--n3);}
.lg-acct .bar .bar-inner { max-width: calc(var(--s7) * 11.67); margin: 0 auto; display: flex; justify-content: flex-end; gap: var(--s2);}
.lg-acct .bar .bar-inner .ds-btn { flex: 1;}
@media (min-width: 900px) { .lg-acct .bar { left: var(--rail-w);} .lg-acct .bar .bar-inner .ds-btn { flex: none; min-width: calc(var(--s7) * 4.17);} }

/* ======================================================================== the views (page main + the app's sheets: .acct) */
.acct { font-family: var(--font); color: var(--n9);}
.acct h1 { margin: 0; font: var(--t-display); letter-spacing: var(--track-tight); outline: none; word-break: keep-all;}
.acct h2 { margin: 0; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); letter-spacing: var(--track-tight); outline: none;}
@media (min-width: 900px) { .lg-acct .acct h1 { font-size: var(--fs-display); line-height: var(--s7);} }
.acct .sec-head { display: grid; gap: var(--s1); max-width: calc(var(--s7) * 14.38); padding: var(--s1) 0 var(--hair2);}
.acct .sec-head.p2-head { display: flex; max-width: none;}
.acct .sec-head .lead, .acct .lead { margin: 0; color: var(--n5); font: var(--t-body); word-break: keep-all;}
@media (min-width: 900px) { .acct .sec-head .lead { font-size: var(--fs-title); line-height: var(--s5);} }
.acct .meta { color: var(--n5); font: var(--t-body);}
.acct .note { margin: 0; color: var(--n5); font: var(--t-body);}
.acct .stack { display: grid; gap: var(--s3);}
.acct .row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap;}
.acct .row > .grow { flex: 1 1 calc(var(--s7) * 3.75); min-width: 0;}
.acct .lbl { font: var(--t-body); color: var(--n5); padding: 0 var(--s1);}
.acct .field2 { display: grid; gap: var(--s1);}
.acct .field-error { margin: 0; color: var(--danger); font: var(--t-body);}
.acct .empty { color: var(--n5);}
.acct .problem { padding: var(--s3) var(--s3); border-radius: var(--r2); background: var(--n2);}

/* cards (a tile is content: opaque, grouped; inside a sheet it is a card-on-glass) */
.acct .tile { display: grid; gap: var(--s3); align-content: start; padding: var(--s4); border: 0; border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2);}
.lane-sheet.acct .tile { background: var(--n2); box-shadow: none; border-radius: max(var(--r1), calc(var(--r3) - var(--r2)));}
.acct .tile h3 { margin: 0; font: var(--t-body); color: var(--n9);}
.acct .tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;}
.acct .tile .note { font-size: var(--fs-caption);}

/* buttons: the app's .btn names drawn as Liquid Glass capsules (content layer: a fill, the primary tinted) */
.acct .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: var(--s7); height: auto; padding: 0 var(--s4); white-space: nowrap; cursor: pointer; transition: transform var(--d-base) var(--ease), background-color var(--d-base) linear;}
.acct .ds-btn:active:not(:disabled) { transform: scale(.97);}

.acct .ds-btn.is-s { min-height: var(--s7); padding: 0 var(--s4);}
@media (min-width: 900px) { .lg-acct .ds-btn.is-s { min-height: var(--s6);} }
.acct .ds-btn:disabled { cursor: default;}

.acct .ds-btn svg { width: var(--s4); height: var(--s4);}
.acct .ds-btn--ghost { min-height: var(--s7); padding: 0 var(--s1); cursor: pointer;}
.acct .ds-btn--ghost.danger, .acct .danger { color: var(--danger);}

/* fields */
.acct .in, .acct textarea, .acct select { width: 100%; min-width: 0; height: var(--s7); padding: 0 var(--s3); border: 0; border-radius: var(--r2); background: var(--n2); color: var(--n9);
  font: var(--t-body); letter-spacing: var(--track-tight); outline: none; box-shadow: none;
  transition: box-shadow var(--d-base) linear, background-color var(--d-base) linear;}
.acct textarea { height: auto; min-height: calc(var(--s7) * 2.33); padding: var(--s3) var(--s3); line-height: 1.5; resize: vertical;}
.acct .in::placeholder, .acct textarea::placeholder { color: var(--n5);}
.acct .in:focus, .acct .in:focus-visible, .acct textarea:focus-visible, .acct select:focus-visible { background: var(--n0); box-shadow: 0 0 0 var(--hair2) color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 var(--hair) var(--n3);}
.lane-sheet.acct .in, .lane-sheet.acct textarea, .lane-sheet.acct select { background: var(--n2);}
.acct .in[aria-invalid="true"] { box-shadow: 0 0 0 var(--hair2) color-mix(in srgb, var(--warn) 80%, transparent);}
.acct select { appearance: none; -webkit-appearance: none; height: var(--s7); padding: 0 var(--s6) 0 var(--s3); font-weight: var(--fw-regular); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - var(--s4)) 52%, calc(100% - var(--s3)) 52%; background-size: var(--s1) var(--s1); background-repeat: no-repeat;}
.acct select option { background: var(--n0); color: var(--n9);}
.acct .settings .filter-line { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--s7) * 3.75), 1fr)); gap: var(--s2);}
.acct .settings .filter-line label { display: grid; gap: var(--s1);}

/* toggles: the iOS switch (the name stays on the label) */
.acct .switch { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--s7); cursor: pointer; font: var(--t-body); flex-direction: row-reverse;}
.acct .switch input { appearance: none; -webkit-appearance: none; position: relative; width: var(--s7); height: var(--s6); flex: none; margin: 0; border-radius: var(--pill); background: var(--n2); box-shadow: none; cursor: pointer;
  transition: background-color var(--d-base) linear;}
.acct .switch input::after { content: ""; position: absolute; top: var(--hair2); left: var(--hair2); width: var(--s5); height: var(--s5); border-radius: 50%; background: var(--n0);
  box-shadow: var(--e2), var(--e1); transition: translate var(--d-base) var(--ease);}
.acct .switch input:checked { background: var(--ok); box-shadow: none;}
.acct .switch input:checked::after { translate: var(--s4) 0; background: var(--n0); transform: none;}
.acct .switch input:disabled { opacity: .5;}
.acct .switch input:focus-visible { outline: var(--hair2) solid color-mix(in srgb, var(--accent) 80%, transparent); outline-offset: var(--hair2);}
/* a choice of one (대표 매체): chips */
.acct .seg-wrap { display: flex; flex-wrap: wrap; gap: var(--s2);}
.acct .radio-chip { position: relative;}
.acct .radio-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;}   /* UX-B4 블레브: a radio is replaced — inset alone left a 13 x 13 target */
.acct .radio-chip span { display: inline-flex; align-items: center; min-height: var(--s7); padding: 0 var(--s4); border-radius: var(--pill); background: var(--n2); box-shadow: none;
  font: var(--t-body); color: var(--n9);}
.acct .radio-chip input:checked + span { background: color-mix(in srgb, var(--accent) 90%, transparent); color: var(--accent-ink); box-shadow: none;}
.acct .radio-chip input:focus-visible + span { outline: var(--hair2) solid color-mix(in srgb, var(--accent) 80%, transparent); outline-offset: var(--hair2);}
.acct .radio-chip input:disabled + span { color: var(--n5);}

/* 브랜드 list: one inset grouped list */
.acct .brand-rows { display: grid; border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2); overflow: hidden;}
.acct .brand-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: center; padding: var(--s3) var(--s4); border: 0; color: var(--n9); text-decoration: none;}
.acct .brand-row + .brand-row::before { content: ""; position: absolute; top: 0; left: var(--s4); right: 0; height: var(--hair); background: var(--n3);}
.acct .brand-row:last-child { border: 0;}
.acct .brand-row:active { background: var(--n2);}
@media (hover: hover) and (pointer: fine) { .acct .brand-row:hover { background: var(--n2);} .acct .brand-row:hover .nm { text-decoration: none;} }
.acct .brand-row .nm { font: var(--t-body);}
.acct .brand-row .go { color: var(--n5);}
.acct .brand-row .go svg { width: var(--s4); height: var(--s4);}
.acct .parts { display: flex; flex-wrap: wrap; gap: 0 var(--s1); font: var(--t-body); color: var(--n5);}
.acct .parts span + span::before { content: "·"; margin-right: var(--s1); color: var(--n5);}
.acct .parts b { font-weight: var(--fw-bold); color: var(--n9);}

/* 브랜드 설정 */
.acct .settings { display: grid; gap: var(--s4);}
@media (min-width: 900px) { .acct .settings { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;} .acct .settings .wide { grid-column: 1 / -1;} }
.acct .offer-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--hair2) var(--s3); align-items: center; padding: var(--s2) 0; border-top: var(--hair) solid var(--n3);}
.acct .offer-row:first-of-type { border-top: 0;}
.acct .offer-row .ot { font: var(--t-body); word-break: keep-all;}
.acct .offer-row .src { grid-column: 1; font: var(--t-body); color: var(--n5);}
.acct details > summary { min-height: var(--s7); display: flex; align-items: center; cursor: pointer;}
.acct .dont-chips { display: flex; flex-wrap: wrap; gap: var(--s2);}
.acct .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s7) * 2.75), 1fr)); gap: var(--s3);}
.acct .photo { display: grid; gap: var(--s1); align-content: start;}
.acct .photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r2); background: var(--n2); box-shadow: inset 0 0 0 var(--hair) var(--n3);}
.acct .photo select { height: var(--s7); font-size: var(--fs-caption);}
.acct .photo.screen img { object-position: top;}
.acct .photo .tag-screen { justify-self: start; padding: var(--s1) var(--s2); border-radius: var(--pill); background: var(--n2); font: var(--t-body);}
.acct .photo .screen-src { overflow-wrap: anywhere;}
.acct .upl { position: relative;}
.acct .upl input { position: absolute; width: var(--hair); height: var(--hair); opacity: 0;}
.acct .upl:focus-within { outline: var(--hair2) solid color-mix(in srgb, var(--accent) 80%, transparent); outline-offset: var(--hair2);}
.acct .readonly-note { margin: 0; padding: var(--s3) var(--s3); border-radius: var(--r2); background: var(--n2); font: var(--t-body); color: var(--n5);}
.acct .sec-state { font: var(--t-body); color: var(--n5);}
.acct .sec-state.unsaved { color: color-mix(in srgb, var(--warn) 80%, var(--n9)); font-weight: var(--fw-bold);}
.acct .sec-state.saved { color: color-mix(in srgb, var(--ok) 70%, var(--n9)); font-weight: var(--fw-bold);}

/* 팀 */
.acct .member { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: center; padding: var(--s3) 0; border-top: var(--hair) solid var(--n3);}
.acct .member:first-of-type { border-top: 0;}
.acct .member .em { font: var(--t-body); overflow-wrap: anywhere;}
.acct .member select { height: var(--s7); width: auto; font-size: var(--fs-caption);}
.acct .role-pill { display: inline-flex; align-items: center; height: var(--s5); padding: 0 var(--s2); border-radius: var(--pill); background: var(--n2); font: var(--t-body);}
.acct .linkbox { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--n2);}
.acct .linkbox p { margin: 0;}
.acct .linkbox code { font: var(--t-body); overflow-wrap: anywhere;}
.acct .invite-pending { gap: var(--s2); padding-bottom: var(--s2);}

/* a definition list (팀 > 역할): an inset grouped table */
.acct .facts { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 0; padding: 0 var(--s3); border-radius: var(--r2); background: var(--n2);
  font: var(--t-body);}
.acct .facts dt, .acct .facts dd { margin: 0; padding: var(--s3) 0; border-top: var(--hair) solid var(--n3);}
.acct .facts dt:first-of-type, .acct .facts dt:first-of-type + dd { border-top: 0;}
.acct .facts dt { padding-right: var(--s4); font-weight: var(--fw-bold);}
.acct .facts dd { color: var(--n5); word-break: keep-all;}

/* 로그인 */
.acct .login { display: grid; gap: var(--s4); max-width: calc(var(--s7) * 9.58);}
.lg-acct .acct .login { padding: var(--s5); border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2);}
@media (min-width: 900px) { .lg-acct .acct .login { margin: var(--s2) 0 0;} }
.acct .login .ds-btn { width: 100%; min-height: var(--s7);}
/* 로그인 방법: a segmented control (the selected item is a raised capsule) */
.acct .ds-seg { display: flex; gap: var(--hair2); padding: var(--hair2);}
.acct .ds-seg[hidden] { display: none;}
.acct .ds-seg button { flex: 1; min-height: var(--s6); cursor: pointer;}

.acct .or { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: center; color: var(--n5); font: var(--t-body);}
.acct .or::before, .acct .or::after { content: ""; height: var(--hair); background: var(--n3);}
/* c45 F1: Google's own button (GIS, an iframe it sizes itself) centred at its min height; the in-app browser step */
.acct .login-google[hidden], .acct .login-inapp[hidden], .acct .gis-btn[hidden] { display: none;}
.acct .gis-btn { display: flex; align-items: center; justify-content: center; min-height: var(--s7);}
.acct .login-inapp { padding: var(--s4); border-radius: var(--r2); background: var(--accent-soft);}
.acct .login-inapp .lbl { margin: 0; font-weight: var(--fw-bold);}
.acct .login-inapp .note, .acct .login-steps { margin: 0; word-break: keep-all;}
.acct .login-steps { padding-left: var(--s5);}
.acct .moved { margin: 0; padding: var(--s3) var(--s3); border-radius: var(--r2); background: var(--accent-soft); color: var(--n9); font: var(--t-body);}
.acct .dev-login { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: var(--hair) dashed var(--n3);}   /* visually secondary */
.acct .dev-login .in { height: var(--s7); font-size: var(--fs-caption);}
.acct-account { display: inline-flex;}

/* inside the app's sheets (sheets.js): no page heading, the save bar sticks to the sheet's foot */
.lane-sheet .settings, .lane-sheet .settings.in-sheet { grid-template-columns: 1fr;}
/* root 03:36Z (batch, codex lane w60: 브랜드 정보 at 390 scrolled sideways): the save bar bleeds exactly the sheet body's own side padding
   (P3 .sheet-body: 16 px on a phone, 24 px from 768 — DS-1.3.2 gutters), never more; every field, row and button inside the sheet is fluid
   (min-width 0, at most 100 %), and long words / links wrap instead of widening the sheet */
.lane-sheet.acct { --acct-pad: var(--s4); min-width: 0; max-width: 100%;}
@media (min-width: 768px) { .lane-sheet.acct { --acct-pad: var(--s5);} }
.lane-sheet.acct :is(form, section, fieldset, .stack, .row, .field2, .settings, .offer-row, .photo-grid, .facts) { min-width: 0; max-width: 100%;}
.lane-sheet.acct :is(input, textarea, select, .ds-btn, button) { max-width: 100%;}
.lane-sheet.acct :is(.offer-row, .facts, .meta, .note, .lbl) { overflow-wrap: anywhere;}
.lane-sheet.acct .facts { grid-template-columns: minmax(0, max-content) minmax(0, 1fr);}
.lane-sheet.acct .sheet-savebar { position: sticky; bottom: calc(var(--s6) * -1 - env(safe-area-inset-bottom, 0)); margin: var(--s2) calc(var(--acct-pad) * -1) 0; padding: var(--s3) var(--acct-pad);
  display: grid; gap: var(--s2); border-top: var(--hair) solid var(--n3); background: var(--n0);}
.lane-sheet.acct .sheet-savebar .bar-inner { display: flex; justify-content: flex-end;}
.lane-sheet.acct .sheet-savebar .bar-note { margin: 0; text-align: left; color: var(--n5); font: var(--t-body);}

@media (prefers-reduced-motion: reduce) {
  .acct .ds-btn, .acct .switch input, .acct .switch input::after { transition: none;}
}

/* A1e w42 brand.photos_deleted: 30-day undo list under the photos */
.acct .ph-gone { margin-top: var(--s2);}
.acct .ph-gone summary { cursor: pointer; font-size: var(--fs-caption); color: var(--muted, var(--n5)); min-height: var(--s6); display: flex; align-items: center;}
.acct .ph-gone__list { display: grid; gap: var(--s2); margin-top: var(--s1);}
.acct .ph-gone__row { display: flex; align-items: center; gap: var(--s2); min-width: 0;}
.acct .ph-gone__row img { width: var(--s7); height: var(--s7); object-fit: cover; border-radius: var(--r1); opacity: .6; flex: none;}
.acct .ph-gone__row span { flex: 1; min-width: 0; font-size: var(--fs-caption); overflow-wrap: anywhere;}
.acct .ph-gone__row .ds-btn--ghost { flex: none; min-height: var(--s6);}
/* owner T669 / T670: the brand's logo per ground (light / dark) */
.logo-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3);}
.logo-slot { display: grid; gap: var(--s2); min-width: 0;}
.logo-view { display: grid; place-items: center; min-height: calc(var(--tap) * 2); padding: var(--s3); border: var(--hair) solid var(--n3);
  border-radius: var(--r1); background: var(--n0);}
.logo-slot--dark .logo-view { background: var(--mark-ink);}   /* stays dark in both themes */
.logo-slot--dark .logo-view .note { color: var(--mark-yellow);}
.logo-view img { max-width: 100%; max-height: calc(var(--tap) * 1.5); object-fit: contain;}
@media (max-width: 599px) { .logo-slots { grid-template-columns: 1fr;} }