/* Anatani.shop — shared site chrome (marketing design).
   Loaded on EVERY page by _Layout, so the marketing header (.mkh) and footer (.mk-foot) render
   site-wide. Only the marketing-specific tokens the chrome needs live here; the app's semantic
   tokens (--ink, --muted, --line, --bg…) are owned by site.css (rethemed to this palette). */
:root {
    --green: #419386;
    --green-deep: #30766C;
    --green-tint: #E4EFED;
    --amber: #F2C87A;
    --amber-strong: #F1C87A;
    --amber-soft: #F7DFB3;
    --coral: #DB796B;
    --surface: #FFFFFF;
    --muted-deep: #4B5453;
    --paper-warm: #FBFAF6;
    --bar-top: #35899B;
    --bar-main: #A7C5D0;

    --font-body: "Manrope", system-ui, sans-serif;
    --font-display: "Noto Serif", "Noto Serif JP", Georgia, serif;
    --font-jp: "Noto Sans JP", system-ui, sans-serif;
    --font-wordmark: "Figtree", "Manrope", system-ui, sans-serif;
}

.mk-wrap { max-width: 1180px; margin: 0 auto; padding: 0 2.5rem; }
.mk-jp { font-family: var(--font-jp); }

/* --- header ------------------------------------------------------------ */
.mkh { position: sticky; top: 0; z-index: 20; background: var(--bar-main); border-bottom: 1px solid rgba(38,45,45,.12); font-family: var(--font-body); }
.mkh a { text-decoration: none; }
.mkh-top { background: var(--bar-top); }
/* Self-contained (not .mk-wrap) so page CSS can't override the vertical padding via a later .mk-wrap rule. */
.mkh-top-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; padding: .55rem 2.5rem; }
.mkh-nav { display: flex; gap: 1.6rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mkh-nav::-webkit-scrollbar { display: none; }
.mkh-nav a { color: rgba(255,255,255,.9); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.mkh-nav a:hover { color: #fff; }
.mkh-selects { display: flex; gap: .35rem; align-items: center; flex: 0 0 auto; }

.mkh-drop { position: relative; }
.mkh-drop-btn { display: flex; align-items: center; gap: .4rem; border: 0; background: none; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 600; color: #fff; padding: .3rem .55rem; border-radius: 999px; }
.mkh-drop-btn:hover { background: rgba(255,255,255,.14); }
.mkh-drop-sub { opacity: .7; font-size: .7rem; letter-spacing: .08em; }
.mkh-caret { font-size: .6rem; opacity: .8; }
.mkh-drop-menu { position: absolute; top: calc(100% + .4rem); right: 0; min-width: 12.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px rgba(38,45,45,.14); padding: .35rem; z-index: 30; }
.mkh-drop-menu form { margin: 0; }
.mkh-drop-item { display: flex; align-items: center; gap: .6rem; width: 100%; border: 0; background: none; cursor: pointer; font: inherit; font-size: .85rem; color: var(--ink); text-align: left; padding: .5rem .6rem; border-radius: 6px; }
.mkh-drop-item:hover { background: var(--paper-warm); }
.mkh-drop-item.is-active { font-weight: 700; }
.mkh-drop-key { width: 1.6rem; font-weight: 700; color: var(--green-deep); }

.mkh-main { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; padding: 1rem 2.5rem; }
.mkh-logo { font-family: var(--font-wordmark); font-weight: 800; font-size: 1.35rem; letter-spacing: -.015em; color: var(--ink); flex: 0 0 auto; }
.mkh-logo span { font-weight: 600; color: var(--green); }

.mkh-search { display: flex; align-items: center; gap: .5rem; flex: 1 1 18rem; min-width: 0; max-width: 34rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); padding: .3rem .3rem .3rem 1rem; }
.mkh-search-icon { width: 20px; height: 20px; color: var(--green-deep); flex: 0 0 auto; }
.mkh-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: .9rem; color: var(--ink); padding: .45rem 0; }
.mkh-search button { border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .9rem; color: var(--ink); background: var(--amber); padding: .55rem 1.2rem; border-radius: 4px; white-space: nowrap; }
/* →JP switch inside the search pill: translate the query to Japanese before searching. */
.mkh-tr { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; flex: 0 0 auto; user-select: none; }
.mkh-tr input { position: absolute; opacity: 0; width: 0; height: 0; }
.mkh-tr-track { position: relative; width: 34px; height: 18px; border-radius: 999px; background: #C9D4D2; transition: background 150ms ease; flex: 0 0 auto; }
.mkh-tr-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 150ms ease; }
.mkh-tr input:checked + .mkh-tr-track { background: var(--green); }
.mkh-tr input:checked + .mkh-tr-track::after { transform: translateX(16px); }
.mkh-tr input:focus-visible + .mkh-tr-track { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.mkh-tr-label { font-size: .72rem; font-weight: 700; color: var(--muted-deep); letter-spacing: .02em; white-space: nowrap; }

.mkh-manage { font-size: .85rem; font-weight: 700; color: var(--green-deep); white-space: nowrap; flex: 0 0 auto; }
.mkh-manage:hover { color: var(--ink); }

.mkh-auth { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; margin-left: auto; }
.mkh-signin { font-size: .9rem; font-weight: 600; color: var(--ink); padding: .45rem 0; white-space: nowrap; }
.mkh-signup { display: inline-flex; align-items: center; padding: .55rem 1.1rem; background: var(--amber); color: var(--ink); font-weight: 700; font-size: .9rem; border-radius: 4px; box-shadow: 0 10px 24px rgba(38,45,45,.10); white-space: nowrap; }

/* account pill — hosts the _TopBarStatus (name/balance/alerts) + _NotificationBell partials + sign-out */
.mkh-account { display: flex; align-items: center; gap: 1rem; padding: .35rem .85rem .35rem 1.25rem; border: 1px solid rgba(38,45,45,.10); background: var(--amber-strong); border-radius: 999px; box-shadow: 0 2px 10px rgba(38,45,45,.08); flex: 0 0 auto; margin-left: auto; }
.mkh-account form { margin: 0; }
.mkh-account .topbar-user { display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; }
.mkh-account .topbar-name { font-weight: 700; font-size: .9rem; color: var(--ink); }
.mkh-account .topbar-user:hover .topbar-name { color: var(--green-deep); }
.mkh-account .topbar-balance { font-weight: 700; font-size: .8rem; color: #1F5A52; font-variant-numeric: tabular-nums; }
.mkh-account .topbar-alert { display: inline-flex; align-items: center; gap: .25rem; text-decoration: none; padding: .2rem .5rem; border-radius: 999px; background: #fbeae8; color: var(--danger); border: 1px solid #f0cfc9; font-size: .82rem; font-weight: 700; }
.mkh-account .topbar-alert.is-parcel { background: #eef4ec; color: #1e7e34; border-color: #cfe3cf; }
.mkh-account .topbar-alert svg { width: 15px; height: 15px; }
.mkh-account .notif-bell { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.55); display: grid; place-items: center; color: var(--green-deep); }
.mkh-account .notif-badge { top: -3px; right: -3px; border: 2px solid var(--amber-strong); }
.mkh-signout { border: 0; background: none; cursor: pointer; color: rgba(38,45,45,.5); display: grid; place-items: center; padding: .3rem; border-radius: 50%; }
.mkh-signout svg { width: 19px; height: 19px; display: block; }
.mkh-signout:hover { color: var(--ink); background: rgba(255,255,255,.5); }

/* --- footer ------------------------------------------------------------ */
.mk-foot { background: var(--ink); padding: 5rem 0 2rem; color: #fff; font-family: var(--font-body); }
/* Self-contained (not .mk-wrap) so a page's later .mk-wrap rule can't zero the vertical padding. */
.mk-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 4rem; max-width: 1180px; margin: 0 auto; padding: 0 2.5rem; }
.mk-foot-logo { font-family: var(--font-wordmark); font-weight: 800; font-size: 1.35rem; letter-spacing: -.015em; color: #fff; }
.mk-foot-logo span { font-weight: 600; color: var(--amber); }
.mk-foot-slogan { font-family: var(--font-display); font-size: 1.1rem; margin: 1.75rem 0 1rem; }
.mk-foot-lead { margin: 0; color: rgba(255,255,255,.65); font-size: .9rem; line-height: 1.7; max-width: 24rem; }
.mk-foot-col { display: flex; flex-direction: column; gap: .85rem; }
.mk-foot-col a, .mk-foot-col span { color: rgba(255,255,255,.75); font-size: .9rem; text-decoration: none; }
.mk-foot-col a:hover { color: #fff; }
.mk-foot-head { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.6); margin-bottom: .4rem; }
/* FooterLandingLinks renders a .footer-nav; inside a footer column it stacks like the other columns. */
.mk-foot-col .footer-nav { display: flex; flex-direction: column; gap: .85rem; justify-content: flex-start; margin: 0; }
.mk-foot-col .footer-nav a { color: rgba(255,255,255,.75); font-size: .9rem; text-decoration: none; }
.mk-foot-col .footer-nav a:hover { color: #fff; }
.mk-foot-bottom { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; max-width: 1180px; margin: 4rem auto 0; padding: 1.75rem 2.5rem 0; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); font-size: .8rem; }
.mk-foot-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.mk-foot-legal a { color: rgba(255,255,255,.55); text-decoration: none; }
.mk-foot-legal a:hover { color: #fff; }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 720px) {
    .mk-wrap { padding: 0 1.25rem; }
    .mkh-top-inner { padding: .55rem 1.25rem; gap: .5rem 1.1rem; }
    .mkh-nav { gap: 1.1rem; }
    .mkh-main { padding: 1rem 1.25rem; gap: .75rem 1rem; } /* keep 16px top/bottom around the search box */
    .mkh-search { flex: 1 1 100%; order: 3; }
    .mkh-account, .mkh-auth { margin-left: 0; }
    .mk-foot { padding: 3rem 0 1.5rem; }
    .mk-foot-grid { grid-template-columns: 1fr; gap: 2.25rem; padding: 0 1.25rem; }
    .mk-foot-bottom { margin-top: 2.25rem; padding: 1.75rem 1.25rem 0; }
}