/* ============================================================================
   배때지 V2 · 공용 «더 보기» 디스클로저 + 섹션 eyebrow          2026-08-27
   ----------------------------------------------------------------------------
   쓰는 곳 : brand.php(브랜드 안내) · ranking.php(집계 기준) · 메인 home-intro(이용 방법)
   원칙
     · 본문은 DOM 에 «항상» 존재한다. display:none / hidden 속성을 쓰지 않는다
       (guide-premium.css 와 같은 방식 — 접혀 있어도 크롤러는 읽는다).
     · JS 가 .is-ready 를 붙였을 때만 접힘 스타일이 적용된다 → 무JS 면 전부 펼쳐진 상태.
     · 버튼은 button + aria-expanded + aria-controls. 최소 높이 44px.
     · 색은 흰/검/뉴트럴 그레이만. 그라데이션·컬러 포인트 없음.
   ========================================================================== */
.v2dc, .v2eb, .v2dc-grid {
    --dc-ink: #16161a;
    --dc-sub: #6b6b74;
    --dc-line: #e8e8ea;
    --dc-card: #ffffff;
    --dc-soft: #f4f4f6;
}

/* ---------- 섹션 eyebrow (BRAND DIRECTORY / WEEKLY RANKING / ABOUT …) ---------- */
.v2eb {
    display: block; margin: 0 0 6px;
    font-size: 11px; font-weight: 800; line-height: 1;
    letter-spacing: .16em; color: #9a9aa4; text-transform: uppercase;
}

/* ---------- 토글 버튼 (아웃라인) ---------- */
.v2dc { margin: 0; }
.v2dc-btn {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 44px; padding: 0 16px;
    background: var(--dc-card); border: 1px solid var(--dc-line); border-radius: 12px;
    font-family: inherit; font-size: 13px; font-weight: 700; color: var(--dc-ink);
    letter-spacing: -.01em; cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}
.v2dc-btn:hover { border-color: #c9c9d0; }
.v2dc-btn:focus-visible { outline: 2px solid var(--dc-ink); outline-offset: 2px; }
.v2dc-chev { width: 15px; height: 15px; flex: none; color: var(--dc-sub);
             transition: transform .28s ease; }
.v2dc-btn[aria-expanded="true"] { background: var(--dc-soft); border-color: #d5d5dc; }
.v2dc-btn[aria-expanded="true"] .v2dc-chev { transform: rotate(180deg); }

/* ---------- 패널 ---------- */
/* 무JS: 그대로 보인다. .is-ready 가 붙은 뒤에만 접는다. */
.v2dc.is-ready .v2dc-panel {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .32s ease, opacity .28s ease;
}
.v2dc.is-ready.is-open .v2dc-panel { opacity: 1; }
.v2dc-inner { padding: 16px 0 2px; }

/* ---------- 패널 안 정보 블록 (브랜드·메인 공용) ---------- */
.v2dc-lead {
    margin: 0 0 14px; max-width: 760px;
    font-size: 13px; line-height: 1.75; color: var(--dc-sub); word-break: keep-all;
}
.v2dc-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.v2dc-block {
    display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
    padding: 15px 16px;
    background: var(--dc-card); border: 1px solid var(--dc-line); border-radius: 14px;
}
.v2dc-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin-bottom: 3px;
    border: 1px solid #ededf0; border-radius: 10px; background: #fafafb; color: var(--dc-ink);
}
.v2dc-ico svg { display: block; width: 17px; height: 17px; }
.v2dc-bt { font-size: 13.5px; font-weight: 700; color: var(--dc-ink); letter-spacing: -.01em; }
.v2dc-bd { font-size: 12.8px; line-height: 1.7; color: #77777f; word-break: keep-all; }
.v2dc-bd a, .v2dc-lead a {
    color: var(--dc-ink); font-weight: 700; text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.v2dc-bd a:hover, .v2dc-lead a:hover { text-decoration-thickness: 2px; }

/* ---------- 태블릿 / PC ---------- */
@media (min-width: 768px) {
    .v2dc-inner { padding: 18px 0 2px; }
    .v2dc-lead { font-size: 13.5px; margin-bottom: 16px; }
    .v2dc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .v2dc-block { padding: 17px 18px; }
}
@media (min-width: 1024px) { .v2dc-grid { gap: 14px; } }

@media (prefers-reduced-motion: reduce) {
    .v2dc.is-ready .v2dc-panel { transition: none; }
    .v2dc-chev, .v2dc-btn { transition: none; }
}