/* エロパケ — モバイルファースト。フレームワーク・ビルドなし */

@layer base, layout, components;

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

:root {
  color-scheme: light dark;
  --bg: light-dark(#fafaf9, #121214);
  --surface: light-dark(#ffffff, #1c1c20);
  --text: light-dark(#1c1917, #ececf1);
  --muted: light-dark(#6b6b72, #a1a1aa);
  --line: light-dark(#e7e5e4, #2e2e35);
  --accent: light-dark(#d6336c, #f472b6);
  --accent-text: light-dark(#ffffff, #1c1917);
  --radius: 12px;
  --gap: clamp(0.75rem, 2.5vw, 1.25rem);
  --max: 72rem;
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem) / 1.7 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
    overflow-wrap: anywhere;
  }
  a { color: var(--accent); text-underline-offset: 0.2em; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  h1, h2 { line-height: 1.35; text-wrap: balance; }
  h1 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); margin-block: 0 var(--gap); }
  h1 small { margin-inline-start: 0.5em; font-size: 0.6em; color: var(--muted); }
  h2 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); margin-block: 0 0.75rem; }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
}

@layer layout {
  main, .crumbs, .site-footer { inline-size: min(100% - 2 * var(--gap), var(--max)); margin-inline: auto; }
  main { padding-block: var(--gap) calc(var(--gap) * 2); container: main / inline-size; }
  main > section, main > .cols { margin-block-end: calc(var(--gap) * 2); }

  .site-header {
    position: sticky; inset-block-start: 0; z-index: 10;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--gap);
    padding: 0.5rem var(--gap);
    background: color-mix(in oklab, var(--surface) 88%, transparent);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--line);

    & .logo {
      font-weight: 800; font-size: 1.25rem; text-decoration: none; color: var(--text);
      & small { margin-inline-start: 0.35em; font-size: 0.65em; color: var(--accent); }
    }
    & nav { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
    & ul { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
    & nav a {
      display: inline-flex; align-items: center; gap: 0.3em;
      padding: 0.35rem 0.7rem; border-radius: 999px;
      color: var(--text); text-decoration: none; font-size: 0.9rem;
      &:hover { background: var(--line); }
    }
  }

  .badge {
    min-inline-size: 1.4em; padding: 0 0.4em; border-radius: 999px;
    background: var(--accent); color: var(--accent-text);
    font-size: 0.75rem; font-weight: 700; text-align: center;
  }

  .crumbs ol {
    display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0.75rem 0 0; list-style: none;
    font-size: 0.85rem; color: var(--muted);
    & li + li::before { content: "›"; margin-inline-end: 0.25rem; }
  }

  .cols { display: grid; gap: calc(var(--gap) * 2); }
  @media (width >= 48rem) { .cols { grid-template-columns: 1fr 1fr; } }

  .site-footer {
    padding-block: calc(var(--gap) * 2); border-block-start: 1px solid var(--line);
    font-size: 0.9rem; color: var(--muted);
    & ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0 0 1rem; padding: 0; list-style: none; }
    & .note, & .copyright { margin: 0.25rem 0; }
  }
}

@layer components {
  .hint, .byline { color: var(--muted); font-size: 0.9rem; }
  .empty { padding: 2rem 1rem; text-align: center; color: var(--muted); background: var(--surface); border-radius: var(--radius); }
  .more { text-align: end; margin-block-start: 0.75rem; }
  .comment { white-space: pre-line; }

  /* サムネイル列（新着・まとめ） */
  .days, .matome { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
  .days a, .matome a {
    display: grid; gap: 0.5rem; padding: 0.75rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    color: inherit; text-decoration: none;
    &:hover { border-color: var(--accent); }
  }
  .day-head, .matome-head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; font-weight: 700;
    & small { font-weight: 400; color: var(--muted); }
  }
  .thumbs {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem;
    & img { aspect-ratio: 3 / 4; object-fit: cover; inline-size: 100%; border-radius: 6px; background: var(--line); }
  }

  /* チップ（女優・ジャンル一覧） */
  .chips {
    display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none;
    & a {
      display: inline-flex; align-items: baseline; gap: 0.35em;
      padding: 0.35rem 0.8rem; border: 1px solid var(--line); border-radius: 999px;
      background: var(--surface); color: var(--text); text-decoration: none;
      &:hover { border-color: var(--accent); color: var(--accent); }
    }
    & small { color: var(--muted); font-size: 0.8em; }
  }

  .ranking {
    margin: 0; padding: 0; list-style: none; counter-reset: rank;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    & li {
      counter-increment: rank; display: flex; align-items: baseline; gap: 0.75rem;
      padding: 0.6rem 0.9rem; border-block-end: 1px solid var(--line);
      &:last-child { border-block-end: 0; }
      &::before { content: counter(rank); min-inline-size: 1.5em; font-weight: 800; color: var(--accent); }
    }
    & small { margin-inline-start: auto; color: var(--muted); }
  }

  .tabs ul {
    display: flex; gap: 0.25rem; margin: 0 0 1rem; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none;
    & a {
      display: block; padding: 0.4rem 0.8rem; border-radius: 999px; white-space: nowrap;
      color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--line);
      &[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
    }
  }

  /* 作品 */
  .work {
    display: grid; gap: 0.75rem; margin-block-end: var(--gap); padding: var(--gap);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    & .body { display: grid; gap: 0.75rem; align-content: start; }
    & h2 { margin: 0; font-size: 1.05rem; }
    & h2 a { color: var(--text); text-decoration: none; }
    & .detail { margin: 0; font-size: 0.9rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    & .buy { margin: 0; }
    & .buy a {
      display: block; padding: 0.7rem; border-radius: 999px; text-align: center; font-weight: 700;
      background: var(--accent); color: var(--accent-text); text-decoration: none;
    }
  }
  /* 画像がある作品だけ 画像 | 本文 の2列。画像なしは本文が全幅 */
  @container main (width >= 40rem) {
    .work:has(> .shot) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
  }

  .spec {
    display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.75rem; margin: 0; font-size: 0.9rem;
    & dt { color: var(--muted); }
    & dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
  }

  .movie {
    & summary { cursor: pointer; color: var(--accent); }
    & iframe { display: block; inline-size: 100%; aspect-ratio: 560 / 360; border: 0; margin-block-start: 0.5rem; border-radius: 8px; }
  }

  /* 画像＋保存ボタン */
  .shot {
    position: relative; margin: 0;
    & img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 8px; background: var(--line); }
  }
  .save {
    position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem;
    padding: 0.3rem 0.7rem; border: 0; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: 0.8rem; font-weight: 700;
    background: color-mix(in oklab, #000 60%, transparent); color: #fff;
    /* ラベルは固定。状態は aria-pressed で伝え、見た目は色とチェックで示す */
    &[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
    &[aria-pressed="true"]::before { content: "\2713" / ""; margin-inline-end: 0.3em; }
  }
  .gallery { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }

  .pager {
    display: grid; justify-items: center; gap: 0.25rem; margin-block: var(--gap);
    & ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
    & a, & span {
      display: grid; place-items: center; min-inline-size: 2.6rem; block-size: 2.6rem; padding-inline: 0.6rem;
      border-radius: 999px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--text);
    }
    & span[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 700; }
    & p { margin: 0; font-size: 0.85rem; color: var(--muted); }
  }

  .related { margin-block-start: calc(var(--gap) * 2); }
}