/* header — single ownership; responsive overrides remain with their component. */
.header {
  padding:10px var(--gutter);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:flex-end;
  gap:80px;
  background:#fff;
  position:relative;
  z-index:10;
}

.logo {
  width:144px;
  flex-shrink:0;
  padding-bottom:4px;
}

.logo img {
  width:100%;
}

.header nav {
  display:flex;
  gap:32px;
  font-size:14px;
  font-weight:500;
  padding-bottom:2px;
}

.utility {
  margin-left:auto;
  display:flex;
  gap:24px;
  font-size:14px;
  font-weight:500;
  padding-bottom:2px;
}

.utility a {
  display:flex;
  gap:8px;
  align-items:center;
}

.utility svg {
  width:20px;
  height:20px;
  fill:currentColor;
}

.mobile-toggle {
  display:none;
}

.menu {
  overflow:hidden;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.menu-inner {
  display:grid;
}

.menu h2 {
  font-size:32px;
  margin-top:24px;
}

.menu-grid {
  display:grid;
}

.menu-item {
  border-bottom:1px solid #ddd;
}

.menu-item small {
  display:block;
}

.mobile-links {
  display:none;
}

@media(max-width:1020px) {
  .header {
    gap:40px;
  }
}

@media(max-width:1020px) {
  .header nav {
    gap:20px;
  }
}

@media(max-width:1020px) {
  .utility {
    gap:16px;
  }
}

@media(max-width:760px) {
  .header {
    height:64px;
    align-items:center;
    justify-content:space-between;
  }
}

@media(max-width:760px) {
  .logo {
    width:126px;
    padding:0;
  }
}

@media(max-width:760px) {
  .header nav {
    display:none;
  }
}

@media(max-width:760px) {
  .utility {
    display:none;
  }
}

@media(max-width:760px) {
  .mobile-toggle {
    display:block;
    font-size:24px;
  }
}

@media(max-width:760px) {
  .menu-inner {
    padding:24px;
  }
}

@media(max-width:760px) {
  .menu-grid {
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:760px) {
  .mobile-links {
    display:flex;
    gap:16px;
    margin-top:24px;
    font-size:13px;
    flex-wrap:wrap;
  }
}

.header {
  height:var(--header-height);
}

.header nav>a {
  position:relative;
}

.header nav>button {
  position:relative;
}

.utility a {
  position:relative;
}

.header nav>a::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-13px;
  height:3px;
  background:var(--accent);
}

.header nav>button::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-13px;
  height:3px;
  background:var(--accent);
}

.utility a::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-13px;
  height:3px;
  background:var(--accent);
}

.menu {
  position:absolute;
  top:var(--header-height);
  left:0;
  right:0;
  z-index:9;
  max-height:calc(100svh - var(--header-height));
  overflow-y:auto;
  box-shadow:0 16px 24px #0001;
}

.menu-backdrop {
  position:fixed;
  inset:var(--header-height) 0 0;
  background:#0002;
  z-index:8;
  cursor:default;
}

@media(max-width:760px) {
  .menu {
    position:absolute;
  }
}

.menu-shell {
  padding:32px 40px 40px;
}

.menu-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e5e5e5;
  padding-bottom:24px;
  font-size:12px;
  font-weight:500;
}

.menu-heading button {
  width:32px;
  height:32px;
  border:1px solid #111;
  font-size:22px;
  line-height:1;
}

.menu-inner {
  padding:24px 0 0;
  grid-template-columns:minmax(180px,3fr) minmax(0,7fr) minmax(130px,2fr);
  gap:32px;
  align-items:stretch;
}

.menu .eyebrow {
  font-size:11px;
  color:#777;
  letter-spacing:.08em;
  margin-bottom:10px;
}

.menu-featured {
  padding-right:32px;
  border-right:1px solid #e5e5e5;
}

.menu-featured-image {
  aspect-ratio:var(--persona-image-ratio);
  background:#ebebeb;
  border:1px solid #d9d9d9;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.menu-featured-image span {
  font-size:11px;
  color:#888;
  letter-spacing:.08em;
}

.menu-featured-name {
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:20px;
  font-size:20px;
  font-weight:600;
}

.menu-featured-name:before {
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
}

.menu-featured-subtitle {
  font-size:13px;
  color:#666;
  margin-top:4px;
}

.menu-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(6,1fr);
  gap:0 16px;
  max-width:540px;
}

.menu-item {
  display:flex;
  align-items:flex-start;
  gap:14px;
  border:0;
  padding:15px 8px;
  text-align:left;
}

.menu-number {
  font-size:12px;
  color:#888;
  padding-top:2px;
}

.menu-item strong {
  font-size:15px;
  font-weight:600;
  line-height:1.5;
}

.menu-item small {
  font-size:12px;
  color:#777;
  line-height:1.5;
  margin-top:3px;
}

.menu-grid.has-featured .menu-item.is-featured {
  color:#111;
}

.menu-item:focus-visible {
  outline-offset:-2px;
}

.menu-shortcuts {
  border-left:1px solid #e5e5e5;
  padding-left:24px;
  font-size:13px;
}

.menu-shortcuts>a {
  display:block;
  margin:14px 0;
}

@media(max-width:760px) {
  .menu-shell {
    padding:24px;
  }
}

@media(max-width:760px) {
  .menu-inner {
    grid-template-columns:1fr;
    gap:24px;
  }
}

@media(max-width:760px) {
  .menu-featured {
    padding:0;
    border:0;
    display:none;
  }
}

@media(max-width:760px) {
  .menu-shortcuts {
    border:0;
    border-top:1px solid #ddd;
    padding:20px 0 0;
  }
}

@media(max-width:760px) {
  .menu-grid {
    gap:0 12px;
  }
}

@media(max-width:760px) {
  .menu-item {
    padding:12px 0;
    gap:8px;
  }
}

.menu-featured-image {
  position:relative;
}


/* Mobile 전체메뉴 (M02~M04) — full width and height, only the persona list scrolls inside.
   Desktop keeps the three-column overlay, so these blocks exist only under 760px. */
.menu-logo,
.menu-mobile,
.menu-persona-panel {
  display:none;
}

@media(max-width:760px) {
  .menu {
    position:fixed;
    inset:0;
    height:100svh;
    max-height:none;
    overflow:hidden;
    border-bottom:0;
    z-index:20;
  }

  .menu-shell {
    height:100%;
    padding:0;
    display:flex;
    flex-direction:column;
  }

  .menu-heading {
    padding:16px 24px;
    border-bottom:0;
    flex-shrink:0;
  }

  .menu-heading-title {
    display:none;
  }

  .menu-logo {
    display:block;
    width:126px;
  }

  .menu-heading button {
    width:44px;
    height:44px;
    border:0;
    font-size:26px;
  }

  /* The desktop overlay body is replaced by the mobile rows. */
  .menu-inner {
    display:none;
  }

  .menu-mobile {
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    padding:8px 24px 24px;
  }

  .menu-auth-title {
    font-size:24px;
    font-weight:500;
    letter-spacing:-.02em;
  }

  .menu-auth-links {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:12px;
    font-size:13px;
    color:#666;
  }

  .menu-auth-divider {
    color:#c9c9c9;
  }

  /* One auth state shows at a time; the page declares which through data-auth. */
  body[data-auth=member] .menu-auth-guest,
  body:not([data-auth=member]) .menu-auth-member {
    display:none;
  }

  .menu-rows {
    list-style:none;
    margin:32px 0 0;
    padding:0;
  }

  .menu-rows li + li {
    border-top:1px solid #e5e5e5;
  }

  .menu-rows button,
  .menu-rows a {
    width:100%;
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    font-size:24px;
    font-weight:500;
    letter-spacing:-.02em;
  }

  .menu-rows li:first-child {
    border-top:1px solid #e5e5e5;
  }

  .menu-rows li:last-child {
    border-bottom:1px solid #e5e5e5;
  }

  .menu-row-mark {
    font-size:20px;
    color:#8a8a8a;
  }

  .menu-wordmark {
    margin-top:auto;
    padding-top:32px;
    font-size:11px;
    letter-spacing:.08em;
    color:#a5a5a5;
  }

  /* 12페르소나 펼침 (M03): chips index the cards, cards scroll horizontally with the next one peeking. */
  .menu.has-persona-panel .menu-mobile {
    display:none;
  }

  .menu-persona-panel {
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    padding:8px 0 24px;
  }

  .menu-persona-back {
    margin:0 24px 20px;
    font-size:20px;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:44px;
  }

  .menu-chips {
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:0 24px 16px;
    scrollbar-width:none;
    flex-shrink:0;
  }

  .menu-chips::-webkit-scrollbar {
    display:none;
  }

  .menu-chip {
    flex-shrink:0;
    min-height:44px;
    padding:8px 16px;
    border:1px solid #bfbfbf;
    font-size:13px;
    white-space:nowrap;
  }

  .menu-chip[aria-pressed=true] {
    background:#a2a2a2;
    border-color:#a2a2a2;
    color:var(--paper);
  }

  .menu-cards {
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:0 24px;
    scrollbar-width:none;
  }

  .menu-cards::-webkit-scrollbar {
    display:none;
  }

  /* Card width follows the mobile rule: screen width minus 80px, next card partly visible. */
  .menu-card {
    width:calc(100vw - 80px);
    max-width:300px;
    height:400px;
    flex-shrink:0;
    scroll-snap-align:start;
  }
}

/* The mobile menu reuses the exact header geometry. */
@media(max-width:760px) {
 .header, .menu-heading { height:var(--header-height); min-height:var(--header-height); padding:10px var(--gutter); align-items:center; border-bottom:1px solid var(--line); box-shadow:0 4px 12px #0000000a; }
 .header .logo, .menu-logo { width:126px; height:auto; padding:0; }
 .header .logo img { display:block; }
 .menu-heading { margin:0; position:relative; z-index:1; }
 .mobile-toggle, .menu-heading button { width:44px; height:44px; display:grid; place-items:center; flex-shrink:0; }
 .menu { height:100dvh; }
}