/* Public-home top bar + full-screen mobile nav drawer -- design-handoffs/asportal-public/login/"APP Shields_로그인".css (+T)/M) tiers) +"M)메뉴_로그인 전".css. Distinct from the authenticated shell's own `.top`/`.sidebar` (base/top.css, base/navigation.css), but now shares that same solid `--color-top-bg` dark identity -- its Mobile drawer is a genuine full-viewport takeover (no partial-width slide-in/dim needed, so no popover/`` top-layer promotion concern applies here the way it did for the authenticated `.sidebar` -- see that file's own note for that whole history). Included on the login page, the forced-password-reset screens, and the home screen (public-spec §3/§4, templates/base.html's own `public_shell` branch: `('auth.login', 'auth.password_reset', 'auth.password_reset_complete', 'home.index')`). Solid background, not transparent -- the Figma export's own `Top` layer instances have no fill at all (`fills: null`, confirmed directly against design-handoffs/asportal-public/home/zeplin-raw/top-component.json), a deliberate deviation from that literal export per explicit user instruction: the home screen scrolls many different section backgrounds underneath this fixed bar, and a permanently transparent bar read as visually inconsistent/"scrolling" even though `position: fixed` was already correct -- it just had nothing opaque to prove it. `home.css`/`login.css` each set their own `` background-color and `theme-color` meta to this exact same `--color-top-bg` value so the real status-bar/toolbar chrome (fixed at page load, per this project's own established history of that WebKit limitation -- see DEV_LOG 2026-07-24) reads as one continuous black strip too, not just this bar's own box. */ .public-top { box-sizing: border-box; position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: calc(60px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); /* The 32px gutter belongs to the full-width bar, not the 1280px content frame. Keeping it on `.public-top-inner` applied the gutter a second time at Desktop: the centered frame already starts 320px in on a 1920px canvas, then its contents were shifted to 352px. The design's PC header puts them at the frame edge (320px), while Tablet still needs the same 32px viewport inset. */ padding-right: max(32px, env(safe-area-inset-right)); padding-left: max(32px, env(safe-area-inset-left)); display: flex; align-items: center; background: var(--color-top-bg); } .public-top-inner { box-sizing: border-box; width: 100%; max-width: 1280px; height: 60px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } /* The wordmark remains a home link, but it is brand artwork rather than a button. Its clickable target must not introduce a hover fill or alter the shared public header's exact logo position. */ .public-top-logo-link { display: flex; align-items: center; } /* Renders at this same fixed size at every breakpoint including Mobile, by explicit decision (2026-08-04) overriding design-guide's own Mobile export, which shows a smaller/simplified wordmark there -- do not reintroduce a resize or an img-logo-small-wh.svg swap without confirming that decision has changed; same explicit call applies to .top-logo (base/top.css). */ .public-top-logo { display: block; width: 127px; height: 30px; } .public-top-actions { flex: none; display: flex; align-items: center; gap: 8px; } .public-top-login { box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: center; width: 71px; height: 36px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius-md); font-family: var(--font-family); font-size: 15px; font-weight: 400; line-height: 22.5px; letter-spacing: var(--letter-spacing-tight); color: var(--color-text-inverse); text-decoration: none; } .public-top-login:active { background: rgba(255, 255, 255, 0.25); } @media (hover: hover) { .public-top-login:hover { background: rgba(255, 255, 255, 0.25); } } .public-top-cta { box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: center; padding: 0 16px; min-width: 64px; height: 36px; background: var(--color-surface); border: none; border-radius: var(--radius-md); font-family: var(--font-family); font-size: 15px; font-weight: 700; letter-spacing: var(--letter-spacing-tight); color: var(--color-text-secondary); cursor: pointer; } .public-top-cta:active { background: var(--color-surface-muted); } @media (hover: hover) { .public-top-cta:hover { background: var(--color-surface-muted); } } .public-top-member-action { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; font-family: var(--font-family); font-size: 15px; font-weight: 400; line-height: 22.5px; letter-spacing: var(--letter-spacing-tight); color: var(--color-text-inverse); text-decoration: none; cursor: pointer; } .public-top-member-action--bordered { border-color: rgba(255, 255, 255, 0.25); } .public-top-member-action:active { background: rgba(255, 255, 255, 0.25); } @media (hover: hover) { .public-top-member-action:hover { background: rgba(255, 255, 255, 0.25); } } .public-top-hamburger { display: none; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 8px; background: none; border: none; border-radius: var(--radius-sm); color: var(--color-text-inverse); cursor: pointer; } /* The home Top layer has no fill over the hero. The handoff specifies that it becomes white from the first downward scroll, rather than at a viewport-dependent section boundary. This is scoped to home so the login/reset header keeps its own dark treatment. */ .home-page .public-top { background: transparent; transition: background-color 180ms ease, box-shadow 180ms ease; } /* Login and password-reset use their image background through the PC/Tablet masthead. Mobile retains the filled top bar defined below. */ @media (min-width: 768px) { .login-page .public-top { background: transparent; } } .home-page .public-top.public-top--scrolled { background: var(--color-surface); box-shadow: 0 1px 0 rgba(16, 16, 17, 0.1); } .home-page .public-top.public-top--scrolled .public-top-login, .home-page .public-top.public-top--scrolled .public-top-member-action { color: var(--color-text-secondary); } .home-page .public-top.public-top--scrolled .public-top-login, .home-page .public-top.public-top--scrolled .public-top-member-action--bordered { border-color: rgba(16, 16, 17, 0.25); } .home-page .public-top.public-top--scrolled .public-top-cta { background: var(--color-top-bg); color: var(--color-text-inverse); } .home-page .public-top.public-top--scrolled .public-top-hamburger { color: var(--color-text-secondary); } /* Handoff Top states: on the white scrolled bar, 로그인 uses the neutral hover fill and 도입문의 keeps its dark primary treatment. */ @media (hover: hover) { .home-page .public-top.public-top--scrolled .public-top-login:hover { background: #F2F3F5; } .home-page .public-top.public-top--scrolled .public-top-cta:hover { background: #333333; } } .public-top-hamburger:active { background: var(--color-top-hover); } @media (hover: hover) { .public-top-hamburger:hover { background: var(--color-top-hover); } } /* Full-screen mobile-only takeover -- unlike a partial-width panel this covers the entire viewport (confirmed against the export's own 360x760 canvas), so nothing behind it needs to stay interactive. Plain `position: fixed` div, not a popover -- popover promotion (native top-layer) fixed an earlier flash-open-on-reload bug, but introduced a worse, unfixable one: iOS's status-bar/toolbar/home-indicator fill only ever reflects ``'s own background-color at page load, never a covering div's paint, so with this drawer's color distinct from login's own photo-matched background it produced a permanent seam (DEV_LOG 2026-07-24 -- confirmed a real, unfixable iOS limitation for a regular Safari tab, not a bug to keep chasing). Explicit user call: accept that seam and revert to this plain div, which never had it, over keeping the popover's flash-open fix -- if that flash resurfaces, it needs a fix that doesn't route through top-layer promotion. Gated to Mobile-only via `public-nav.js`'s own resize handling; the hamburger trigger itself is already Mobile-only via `.public-top-hamburger`'s own `display: none` default below. */ .public-nav-drawer { position: fixed; inset: 0; z-index: 50; display: none; flex-direction: column; /* `--public-nav-drawer-bg`, not a hardcoded value, so a future page can override it if it genuinely needs a different drawer color -- but `#101011`/`--color-top-bg` is this component's own real design-guide value (design-handoffs/asportal-public/login/M)메뉴_로그인 전.png, sampled with Pillow: rgb(16,16,17)), not a placeholder. login.css deliberately does not override this to match its own `#080A13` -- that would silently render the drawer in the wrong, off-spec color. Accepted tradeoff: the status-bar/toolbar/home-indicator chrome shows a seam against this color while the drawer's open on login -- a known iOS limitation (see this rule's own comment above), not a bug to keep chasing. */ background: var(--public-nav-drawer-bg, var(--color-top-bg)); /* Off-screen via transform, not just `display: none`'s absence of a transform -- this is the actual entrance/exit state a transition can animate to/from. JS toggles `.visible` (display:none -> flex) one frame before toggling `.open` (the transform below) on open, and removes `.visible` only after the reverse transition finishes on close (transitionend, with a timeout fallback) -- see public-nav.js's open/close functions for why both steps matter (a transform transition can't play across a `display: none` boundary, and `display:none` still has to land eventually or this stays hit-testable/focusable while invisible). */ transform: translateX(100%); transition: transform 0.3s ease; } .public-nav-drawer.visible { display: flex; } .public-nav-drawer.visible.open { transform: translateX(0); } .public-nav-drawer-top { box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 16px; } .public-nav-drawer-logo { display: block; width: 110px; height: 26px; } .public-nav-drawer-close { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 8px; background: none; border: none; border-radius: var(--radius-sm); color: var(--color-text-inverse); cursor: pointer; } .public-nav-drawer-close:active { background: var(--color-top-hover); } @media (hover: hover) { .public-nav-drawer-close:hover { background: var(--color-top-hover); } } .public-nav-drawer-items { flex: 1; display: flex; flex-direction: column; padding: 40px 0 0; } /* Horizontal padding lives on the item itself, not `.public-nav-drawer- items` above -- so the item's own border-box (and therefore its Hover/ Pressed background fill) spans the drawer's full width, with the 32px inset only pushing the label/icon content in visually. Previously the container carried the 32px padding and the item was `width: 100%` *within* that already-inset box, so the highlight only ever filled the inner content area, leaving a visible 32px gutter on both sides -- caught from a real screenshot. The separator itself is a `::after` pseudo-element rather than a real `border-bottom`, so it can keep the original 32px side margins independently of the now-full-width highlight (a plain border would have gone edge-to-edge along with it). */ .public-nav-drawer-item { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 24px 32px; background: none; border: none; font-family: var(--font-family); font-size: 28px; font-weight: 700; line-height: 140%; letter-spacing: var(--letter-spacing-tight); color: var(--color-text-inverse); text-decoration: none; text-align: left; cursor: pointer; } .public-nav-drawer-item::after { content: ""; position: absolute; left: 32px; right: 32px; bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.25); } .public-nav-drawer-item:active { background: rgba(255, 255, 255, 0.1); } @media (hover: hover) { .public-nav-drawer-item:hover { background: rgba(255, 255, 255, 0.1); } } .public-nav-drawer-item--external img { flex: none; width: 24px; height: 24px; } /* The footer is one complete login/logout target. Keeping its spacing on the control (rather than an inset wrapper) lets Hover and Pressed fill the entire footer, matching the navigation-item interaction geometry. */ .public-nav-drawer-footer { box-sizing: border-box; flex: none; display: flex; background: rgba(255, 255, 255, 0.05); } .public-nav-drawer-footer form { display: flex; width: 100%; } .public-nav-drawer-login { box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 72px; padding: 24px 40px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); border-radius: 0; font-family: var(--font-family); font-size: 18px; font-weight: 400; line-height: 150%; letter-spacing: var(--letter-spacing-tight); color: var(--color-text-inverse); text-decoration: none; background: none; border: none; cursor: pointer; } .public-nav-drawer-login:active { background: rgba(255, 255, 255, 0.1); } @media (hover: hover) { .public-nav-drawer-login:hover { background: rgba(255, 255, 255, 0.1); } } @media (max-width: 767px) { /* 56px bar / 16px-start,8px-end padding -- the export's own Mobile values (was wrongly left at the PC/Tablet 60px/32px-both-sides here, a real gap: matched the drawer's own Mobile top bar below but never applied to the page's own .public-top, caught from a real screenshot comparison). .public-top-inner's existing `align-items: center` handles vertically centering the hamburger and logo within this height on its own, no per-element offset math needed. */ .public-top { height: calc(56px + env(safe-area-inset-top)); /* The Mobile export has its own 16px-start / 8px-end inset. This is deliberately on the outer bar for the same single-gutter geometry as PC and Tablet above. */ padding-right: max(8px, env(safe-area-inset-right)); padding-left: max(16px, env(safe-area-inset-left)); } /* Login page only (scoped to body.login-page, not the plain .public-top base rule -- .public-top is shared with the home page too, which keeps its solid --color-top-bg at every breakpoint). Explicit user request: let .login-bg-image's own photo show straight through here on Mobile instead of a solid dark band, matching the same "no forced tint, let the actual background show through" call already made for the iOS status bar via login.html's own theme-color scoping. */ body.login-page .public-top { background: transparent; } .public-top-inner { height: 56px; } .public-top-actions { display: none; } .public-top-hamburger { display: flex; } }