/* Public header, footer and navigation: dimensions live only here. */
.hime-ui {
  --site-max-width:1280px;
  --site-gutter:36px;
  --site-divider:#e6b9cb;
  --site-header-height:84px;
  --site-mobile-nav-height:45px;
}
.hime-ui.bubble-pop-home { --home-gutter:var(--site-gutter); --home-divider:var(--site-divider); }
.site-header { background:var(--hime-paper); color:var(--hime-ink); }
.site-header .header-inner { position:relative; display:flex; align-items:center; gap:48px; height:var(--site-header-height); max-width:var(--site-max-width); margin:0 auto; padding:0 var(--site-gutter); }
.site-header .header-inner::after { content:""; position:absolute; left:var(--site-gutter); right:var(--site-gutter); bottom:0; border-bottom:1px solid var(--site-divider); pointer-events:none; }
.site-header .library-brand { display:block; flex:0 0 228px; width:228px; min-width:0; }
.site-desktop-nav { display:flex; align-items:stretch; gap:28px; height:100%; flex-shrink:0; font-family:var(--hime-font); font-size:13px; line-height:20px; font-weight:700; }
.site-desktop-nav a { display:inline-flex; align-items:center; gap:4px; position:relative; padding:0; white-space:nowrap; }
.site-desktop-nav a[aria-current] { color:var(--hime-pink); }
.site-desktop-nav a[aria-current]::after { content:""; position:absolute; height:2px; left:0; right:0; bottom:19px; background:currentColor; }
.site-desktop-nav .saved-count { display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 3px; border-radius:50%; font-size:10px; line-height:17px; background:#fff0f6; color:var(--hime-berry); }
.site-header .pop-search-link { display:none; }
.site-header .header-search { flex:1 1 auto; min-width:0; max-width:410px; margin-left:auto; }
.site-header .search-field { display:flex; align-items:center; position:relative; width:100%; }
.site-header .search-field>.bubble-icon { position:absolute; left:14px; width:21px; height:21px; pointer-events:none; }
.site-header .search-field input { width:100%; min-width:0; height:44px; border:1px solid var(--hime-line); border-radius:16px; padding:0 14px 0 44px; background:#fff; color:var(--hime-ink); font-size:13px; line-height:20px; }
.site-header .search-field input::placeholder { color:var(--hime-muted); }
.site-footer { display:block; width:100%; max-width:var(--site-max-width); margin:0 auto; padding:0 var(--site-gutter); color:var(--hime-muted); font-family:var(--hime-font); font-size:11px; line-height:16px; }
.site-footer-inner { display:grid; grid-template-columns:184px minmax(0,1fr); align-items:center; gap:8px 24px; border-top:1px solid var(--site-divider); padding:24px 0 28px; }
.site-footer .footer-brand { display:block; width:184px; max-width:100%; }
.site-footer p { margin:0; font-size:11px; line-height:16px; }
.site-footer-links { display:flex; flex-wrap:wrap; gap:0 24px; grid-column:1 / -1; }
.site-footer-links a { display:inline-flex; align-items:center; min-height:44px; color:var(--hime-berry); font-size:12px; line-height:18px; }
.site-mobile-nav { display:none; }
.bubble-watch-page .site-footer { display:none; }
@media(min-width:701px) {
  .bubble-watch-page .watch-shell { min-height:calc(100dvh - var(--site-header-height)); }
}
@media(min-width:701px) and (max-width:1020px) {
  .hime-ui { --site-gutter:28px; }
  .site-header .header-inner { gap:20px; }
  .site-header .library-brand { width:180px; flex-basis:180px; }
  .site-desktop-nav { gap:16px; font-size:12px; }
  .site-header .search-field input { font-size:11px; }
}
@media(max-width:700px) {
  .hime-ui { --site-gutter:16px; --site-header-height:72px; }
  .site-header .header-inner { display:grid; grid-template-columns:minmax(0,1fr) 44px; grid-template-rows:var(--site-header-height); column-gap:12px; row-gap:0; height:auto; min-height:var(--site-header-height); }
  .site-header .library-brand { width:198px; max-width:100%; }
  .site-header .site-desktop-nav { display:none; }
  .site-header .pop-search-link { display:grid; place-items:center; width:44px; height:44px; margin:0; }
  .site-header .pop-search-link .bubble-icon { width:25px; height:25px; }
  .site-header .header-search { display:none; }
  .site-header--search .header-search { display:block; grid-column:1 / -1; grid-row:2; width:100%; max-width:none; margin:0 0 12px; }
  .site-footer { padding-bottom:calc(var(--site-mobile-nav-height) + env(safe-area-inset-bottom)); }
  .site-footer-inner { grid-template-columns:auto minmax(0,1fr); gap:0 12px; padding:10px 0 6px; }
  .site-footer .footer-brand { display:grid; align-items:center; width:120px; min-height:44px; }
  .site-footer-links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 6px; }
  .site-footer-links a { font-size:clamp(11px,3.2vw,12px); }
  .site-mobile-nav { position:fixed; z-index:20; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); height:calc(var(--site-mobile-nav-height) + env(safe-area-inset-bottom)); padding:0 6px env(safe-area-inset-bottom); border-top:1px solid var(--site-divider); background:var(--hime-paper); font-family:var(--hime-font); }
  .site-mobile-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; height:44px; padding:0; gap:1px; color:var(--hime-ink); font-size:11px; line-height:14px; text-align:center; }
  .site-mobile-nav .bubble-icon { width:22px; height:22px; }
  .site-mobile-nav a[aria-current] { color:var(--hime-pink); }
  .site-mobile-nav a[aria-current] .bubble-icon { fill:currentColor; }
  .bubble-watch-page .site-header { display:none; }
  .bubble-watch-page .detail-main { height:calc(100dvh - var(--site-mobile-nav-height) - env(safe-area-inset-bottom)); }
}
@media(max-width:360px) {
  .hime-ui { --site-gutter:12px; }
}