/*
 * 방문자 화면 새 디자인(«디자인 v2») — 글 목록 (콘텐츠 그룹 목록 · 전체 글). 부품: src/widgets/v2/list/.
 * 기준: 피그마 PF-02(아카이브 배치). 매거진 · 인덱스 배치는 같은 조각(위치 표시 · 제목 영역 · 분류 목록 · 카드)을 다르게 놓는다.
 *
 * 규칙은 core.css 와 같다 — 선택자는 전부 [data-design="v2"] 아래, 색 · 모서리 · 굵기는 CSS 변수(--d-…)만,
 * Tailwind 의 components 층. 기본이 휴대폰(390px) — 820px 까지 이 배치다. 51.3125rem(821px) 이상이 넓은 화면.
 * 위치 표시(.v2-crumbs)와 점(.v2-dot)은 글 상세(post.css)도 같이 쓴다.
 */
@layer theme, base, components, utilities;

@layer components {
  /* ── 위치 표시 (목록 · 글 상세 공용) ───────────────── */
  [data-design="v2"] .v2-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: var(--d-muted);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 21px;
  }
  [data-design="v2"] .v2-crumbs li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }
  [data-design="v2"] .v2-crumbs li + li::before {
    content: "/";
    margin-inline: 8px;
    color: var(--d-faint);
    font-weight: 400;
    opacity: 0.5;
  }
  [data-design="v2"] .v2-crumbs li:last-child {
    color: var(--d-brand-ink);
  }
  [data-design="v2"] .v2-crumbs a:hover {
    color: var(--d-brand-deep);
  }
  [data-design="v2"] .v2-crumbs a:focus-visible,
  [data-design="v2"] .v2-lnav-link:focus-visible,
  [data-design="v2"] .v2-pcard-link:focus-visible,
  [data-design="v2"] .v2-pfeat-link:focus-visible,
  [data-design="v2"] .v2-prow-link:focus-visible,
  [data-design="v2"] .v2-lsearch button:focus-visible {
    outline: 2px solid var(--d-brand-ink);
    outline-offset: 2px;
  }

  /* 날짜와 읽기 시간 사이의 작은 점 */
  [data-design="v2"] .v2-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--d-faint);
    opacity: 0.6;
  }

  /* ── 바깥 틀 · 제목 영역 ──────────────────────────── */
  [data-design="v2"] .v2-list {
    padding-block: 18px calc(var(--d-section-gap) * 1.1);
  }
  [data-design="v2"] .v2-list-head {
    margin-bottom: 24px;
    padding-block: 22px 22px;
    border-bottom: 1px solid var(--d-line);
  }
  [data-design="v2"] .v2-list-title {
    color: var(--d-ink);
    font-size: 28px;
    font-weight: var(--d-title-weight);
    line-height: 1.3;
    letter-spacing: var(--d-title-tracking);
    word-break: keep-all;
  }
  [data-design="v2"] .v2-list-desc {
    max-width: 640px;
    margin-top: 10px;
    color: var(--d-muted);
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-line;
    word-break: keep-all;
  }
  [data-design="v2"] .v2-list-count {
    margin-top: 12px;
    color: var(--d-muted);
    font-size: 13px;
    line-height: 21.8px;
  }
  [data-design="v2"] .v2-list-count b {
    color: var(--d-brand-ink);
    font-weight: 700;
  }
  [data-design="v2"] .v2-list-empty {
    padding: 56px 20px;
    border: 1px dashed var(--d-line);
    border-radius: var(--d-radius-card);
    background: var(--d-bg-alt);
    color: var(--d-faint);
    font-size: 14.5px;
    font-weight: 600;
    text-align: center;
  }

  /* ── 두 단 배치 (아카이브: 분류 | 글, 인덱스: 글 | 분류) ── */
  [data-design="v2"] .v2-list-cols {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  [data-design="v2"] .v2-list-main {
    min-width: 0;
  }
  /* 좁은 화면에서는 분류 목록이 항상 글 위에 온다 */
  [data-design="v2"] .v2-list-cols > .v2-lnav {
    order: -1;
  }

  /* ── 분류 목록 ────────────────────────────────────── */
  [data-design="v2"] .v2-lnav-title {
    display: none;
    margin-bottom: 11px;
    color: var(--d-muted);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17.6px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  /* 좁은 화면 · 매거진 배치: 가로로 미는 칩 줄 */
  [data-design="v2"] .v2-lnav ul {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-inline: -20px;
    padding-inline: 20px;
    scrollbar-width: none;
  }
  [data-design="v2"] .v2-lnav ul::-webkit-scrollbar {
    display: none;
  }
  [data-design="v2"] .v2-lnav li {
    flex-shrink: 0;
  }
  [data-design="v2"] .v2-lnav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding-inline: 14px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-button);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition:
      border-color 0.15s,
      color 0.15s;
  }
  [data-design="v2"] .v2-lnav-link em {
    color: var(--d-faint);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
  }
  [data-design="v2"] .v2-lnav-link:hover {
    border-color: var(--d-brand-line);
    color: var(--d-brand-deep);
  }
  [data-design="v2"] .v2-lnav-link[aria-current="page"] {
    border-color: var(--d-brand-line);
    background: var(--d-brand-tint);
    color: var(--d-brand-ink);
    font-weight: 700;
  }
  [data-design="v2"] .v2-lnav--tabs {
    margin-bottom: 24px;
  }

  /* ── 검색창 (아카이브) ────────────────────────────── */
  [data-design="v2"] .v2-lsearch {
    display: flex;
    align-items: center;
    height: 46px;
    margin-bottom: 22px;
    padding: 0 5px 0 18px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-button);
    background: var(--d-surface);
  }
  [data-design="v2"] .v2-lsearch:focus-within {
    border-color: var(--d-brand-ink);
  }
  [data-design="v2"] .v2-lsearch input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    background: transparent;
    color: var(--d-ink);
    font-size: 14px;
    outline: none;
  }
  [data-design="v2"] .v2-lsearch input::placeholder {
    color: var(--d-faint);
  }
  [data-design="v2"] .v2-lsearch input::-webkit-search-cancel-button {
    display: none;
  }
  [data-design="v2"] .v2-lsearch button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 36px;
    border-radius: var(--d-radius-button);
    background: var(--d-brand-ink);
    color: #fff;
    cursor: pointer;
  }
  [data-design="v2"] .v2-lsearch button:hover {
    background: var(--d-brand-deep);
  }

  /* ── 카드 (3열) ───────────────────────────────────── */
  [data-design="v2"] .v2-pgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px 22px;
  }
  [data-design="v2"] .v2-pcard-link,
  [data-design="v2"] .v2-pfeat-link {
    display: block;
    color: inherit;
  }
  [data-design="v2"] .v2-pcard-media {
    margin-bottom: 14px;
  }
  [data-design="v2"] .v2-pcard-media .v2-media-img,
  [data-design="v2"] .v2-pfeat-media .v2-media-img,
  [data-design="v2"] .v2-prow-thumb .v2-media-img {
    transition: transform 0.3s;
  }
  [data-design="v2"] .v2-pcard-link:hover .v2-media-img,
  [data-design="v2"] .v2-pfeat-link:hover .v2-media-img,
  [data-design="v2"] .v2-prow-link:hover .v2-media-img {
    transform: scale(1.03);
  }
  [data-design="v2"] .v2-pcard-cat {
    display: block;
    color: var(--d-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 20.2px;
  }
  [data-design="v2"] .v2-pcard-title {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 6px;
    color: var(--d-ink);
    font-size: 16.5px;
    font-weight: 700;
    line-height: 23.4px;
    letter-spacing: -0.036em;
    word-break: keep-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  [data-design="v2"] .v2-pcard-link:hover .v2-pcard-title,
  [data-design="v2"] .v2-pfeat-link:hover .v2-pfeat-title,
  [data-design="v2"] .v2-prow-link:hover .v2-prow-title {
    color: var(--d-brand-ink);
  }
  [data-design="v2"] .v2-pcard-desc {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 6px;
    color: var(--d-muted);
    font-size: 12.5px;
    line-height: 21px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  [data-design="v2"] .v2-pcard-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--d-faint);
    font-size: 12px;
    line-height: 20.2px;
  }

  /* ── 대표 글 (매거진 배치의 맨 위 큰 글) ──────────── */
  [data-design="v2"] .v2-pfeat {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--d-line);
  }
  [data-design="v2"] .v2-pfeat-link {
    display: grid;
    gap: 18px;
  }
  [data-design="v2"] .v2-pfeat-title {
    margin-top: 8px;
    color: var(--d-ink);
    font-size: 22px;
    font-weight: var(--d-title-weight);
    line-height: 1.36;
    letter-spacing: var(--d-title-tracking);
    word-break: keep-all;
  }
  [data-design="v2"] .v2-pfeat-desc {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 10px;
    color: var(--d-muted);
    font-size: 14px;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  [data-design="v2"] .v2-pfeat .v2-pcard-meta {
    margin-top: 14px;
  }

  /* ── 번호 붙은 줄 (인덱스 배치) ───────────────────── */
  [data-design="v2"] .v2-prows {
    border-top: 2px solid var(--d-brand-deep);
  }
  [data-design="v2"] .v2-prow {
    border-bottom: 1px solid var(--d-line);
  }
  [data-design="v2"] .v2-prow-link {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-block: 20px;
    color: inherit;
  }
  [data-design="v2"] .v2-prow-no {
    flex-shrink: 0;
    width: 30px;
    /* 홈의 번호 목록(.v2-nrow-num, 피그마 PF-06)과 같은 색 — 옅은 브랜드색은 흰 바탕에서 거의 보이지 않는다 */
    color: var(--d-faint);
    font-size: 19px;
    font-weight: 700;
    line-height: 26px;
  }
  [data-design="v2"] .v2-prow-body {
    flex: 1 1 auto;
    min-width: 0;
  }
  [data-design="v2"] .v2-prow-title {
    margin-top: 4px;
    color: var(--d-ink);
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.036em;
    word-break: keep-all;
  }
  [data-design="v2"] .v2-prow-desc {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 6px;
    color: var(--d-muted);
    font-size: 13px;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  [data-design="v2"] .v2-prow .v2-pcard-meta {
    margin-top: 10px;
  }
  [data-design="v2"] .v2-prow-thumb {
    flex-shrink: 0;
    width: 72px;
  }

  /* ── 더보기 ───────────────────────────────────────── */
  [data-design="v2"] .v2-plist-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
  }
  [data-design="v2"] .v2-plist-more .v2-btn {
    min-width: 180px;
  }
  [data-design="v2"] .v2-plist-more .v2-btn:disabled {
    cursor: default;
    opacity: 0.6;
  }
  [data-design="v2"] .v2-plist-progress {
    color: var(--d-faint);
    font-size: 12px;
  }
  [data-design="v2"] .v2-plist-error {
    margin-top: 24px;
    font-size: 13px;
    text-align: center;
  }

  /* ── 중간 화면 (640px 이상) — 카드 2열 ────────────── */
  @media (min-width: 40rem) {
    [data-design="v2"] .v2-pgrid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    [data-design="v2"] .v2-prow-thumb {
      width: 96px;
    }
  }

  /* ── 넓은 화면 (821px 이상) ───────────────────────── */
  @media (min-width: 51.3125rem) {
    [data-design="v2"] .v2-list {
      padding-top: 21px;
    }
    /* 피그마: 위치 표시 아래 26px 에 윗글, 제목 36px, 건수, 아래 27px 에 줄 */
    [data-design="v2"] .v2-list-head {
      margin-bottom: 34px;
      padding-block: 26px 27px;
    }
    [data-design="v2"] .v2-list-title {
      font-size: 36px;
      line-height: 46.1px;
    }
    [data-design="v2"] .v2-list-count {
      margin-top: 15px;
    }
    [data-design="v2"] .v2-lnav ul {
      margin-inline: 0;
      padding-inline: 0;
    }
    [data-design="v2"] .v2-lnav--tabs ul {
      flex-wrap: wrap;
      overflow: visible;
    }
    [data-design="v2"] .v2-lnav--tabs {
      margin-bottom: 30px;
    }
    [data-design="v2"] .v2-pfeat {
      margin-bottom: 40px;
      padding-bottom: 40px;
    }
    [data-design="v2"] .v2-pfeat[data-with-image] .v2-pfeat-link {
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
      align-items: center;
      gap: 34px;
    }
    [data-design="v2"] .v2-pfeat-title {
      font-size: 28px;
    }
    [data-design="v2"] .v2-pfeat-desc {
      font-size: 14.5px;
    }
    [data-design="v2"] .v2-prow-link {
      gap: 22px;
      padding-block: 24px;
    }
    [data-design="v2"] .v2-prow-no {
      width: 38px;
    }
    [data-design="v2"] .v2-prow-title {
      font-size: 18px;
    }
    [data-design="v2"] .v2-prow-desc {
      font-size: 13.5px;
    }
    [data-design="v2"] .v2-prow-thumb {
      width: 112px;
    }
  }

  /* ── 두 단 (1024px 이상) — 피그마: 분류 210px · 사이 34px · 글 868px ── */
  @media (min-width: 64rem) {
    [data-design="v2"] .v2-list-cols {
      display: grid;
      grid-template-columns: 210px minmax(0, 1fr);
      align-items: start;
      gap: 34px;
    }
    [data-design="v2"] .v2-list[data-list="index"] .v2-list-cols {
      grid-template-columns: minmax(0, 1fr) 240px;
      gap: 48px;
    }
    [data-design="v2"] .v2-list-cols--solo,
    [data-design="v2"] .v2-list[data-list="index"] .v2-list-cols--solo {
      grid-template-columns: minmax(0, 1fr);
    }
    [data-design="v2"] .v2-list-cols > .v2-lnav {
      order: 0;
    }
    [data-design="v2"] .v2-pgrid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      row-gap: 40px;
    }
    /* 세로 목록 — 이름 왼쪽, 건수 오른쪽, 옅은 밑줄 */
    [data-design="v2"] .v2-lnav--side .v2-lnav-title {
      display: block;
    }
    [data-design="v2"] .v2-lnav--side ul {
      display: block;
      overflow: visible;
    }
    [data-design="v2"] .v2-lnav--side .v2-lnav-link {
      display: flex;
      justify-content: space-between;
      height: auto;
      min-height: 41.7px;
      padding: 9px 0;
      border: 0;
      border-bottom: 1px solid var(--d-line-soft);
      border-radius: 0;
      background: none;
      font-size: 13.5px;
      font-weight: 400;
      line-height: 22.7px;
      white-space: normal;
    }
    [data-design="v2"] .v2-lnav--side .v2-lnav-link em {
      flex-shrink: 0;
      font-size: 12.3px;
    }
    [data-design="v2"] .v2-lnav--side .v2-lnav-link[aria-current="page"] {
      background: none;
      font-weight: 700;
    }
  }
}