/* ============================================================
   배때지 V2 · TODAY NEW
   breakpoint 는 기존 V2 체계를 그대로 쓴다 (새 체계를 만들지 않는다):
     모바일  ~600px
     태블릿  601~1023px
     PC      1024px~
   상품 카드(.v2live-card)는 기존 공용 컴포넌트를 그대로 쓰므로
   이 파일에는 카드 내부 스타일이 없다.
   ============================================================ */

/* 배경 기본값은 transparent — 메인(.v2-home)의 --hm-bg(#f6f6f4 웜그레이)를
   그대로 물려받아 다른 섹션과 바탕이 어긋나지 않는다.
   관리자가 배경색을 따로 지정했을 때만 --tn-bg 가 들어와 덮어쓴다. */
.v2tn-section {
    background: var(--tn-bg, transparent);
    padding-top: var(--tn-pt, 24px);
    padding-bottom: var(--tn-pb, 24px);
}

.v2tn-section .v2-home-sechead h2 { color: var(--tn-title, #16161a); }
.v2tn-section .v2-home-sechead p  { color: var(--tn-desc, #6b6b74); }

/* 영문 라벨 — 다른 홈 섹션의 부제와 같은 톤(옅은 회색)으로 맞춘다.
   TODAY NEW 만 튀지 않도록 강조색을 쓰지 않는다. */
.v2tn-eyebrow {
    margin: 0 0 3px;
    color: #a9a9b2;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
}

/* 더 보기는 다른 섹션의 .v2-home-more 스타일을 그대로 상속한다 (색 지정 없음) */

/* ---------------------------------------------------------
   탭 — 손가락으로 누르기 쉬운 크기(최소 44px 높이)
   --------------------------------------------------------- */
.v2tn-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.v2tn-tabs::-webkit-scrollbar { display: none; }

.v2tn-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #e4e5ea;
    border-radius: 999px;
    background: #fff;
    color: #4a4a52;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.v2tn-tab .v2tn-tab-count {
    color: #9a9aa3;
    font-size: 12px;
    font-weight: 700;
}
/* 활성 탭 — /v2/new/ 및 사이트 공통 UI 와 같은 다크 톤 */
.v2tn-tab.is-on {
    border-color: var(--tn-accent, #16161a);
    background: var(--tn-accent, #16161a);
    color: #fff;
}
.v2tn-tab.is-on .v2tn-tab-count { color: rgba(255, 255, 255, .78); }
.v2tn-tab:focus-visible {
    outline: 2px solid var(--tn-accent, #16161a);
    outline-offset: 2px;
}

/* ---------------------------------------------------------
   상품 그리드 — 카드 열 수는 SHOP(.v2live-products)과 동일하게 맞춘다
   --------------------------------------------------------- */
.v2tn-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.v2tn-cell { min-width: 0; }

/* 카드가 셀을 꽉 채우도록 — 레일용 고정폭 규칙을 상쇄한다 */
.v2tn-grid .v2live-card {
    width: 100%;
    max-width: none;
    height: 100%;
}

@media (min-width: 601px) and (max-width: 1023px) {
    .v2tn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

@media (min-width: 1024px) {
    .v2tn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

@media (min-width: 1500px) {
    .v2tn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
}

/* ---------------------------------------------------------
   스켈레톤 — 기존 카드와 같은 비율/라운드로 자리를 잡아 CLS 를 막는다
   --------------------------------------------------------- */
.v2tn-skeleton { display: grid; gap: 8px; }
.v2tn-sk-card {
    border: 1px solid #eeeef1;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.v2tn-sk-img { aspect-ratio: 1 / 1; background: #f1f1f4; }
.v2tn-sk-line {
    height: 12px;
    margin: 10px 10px 0;
    border-radius: 4px;
    background: #f1f1f4;
}
.v2tn-sk-line.s  { width: 40%; }
.v2tn-sk-line.l  { width: 80%; }
.v2tn-sk-line.p  { width: 55%; height: 16px; margin-bottom: 14px; }

.v2tn-sk-img,
.v2tn-sk-line { animation: v2tn-pulse 1.2s ease-in-out infinite; }

@keyframes v2tn-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

/* ---------------------------------------------------------
   빈 결과 / 오류
   --------------------------------------------------------- */
.v2tn-empty,
.v2tn-error {
    padding: 34px 16px;
    border: 1px dashed #e2e2e8;
    border-radius: 14px;
    text-align: center;
    color: #6b6b74;
}
.v2tn-empty p,
.v2tn-error p { margin: 0 0 12px; font-size: 14px; }

.v2tn-empty-btn,
.v2tn-retry {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--tn-accent, #16161a);
    border-radius: 999px;
    background: #fff;
    color: var(--tn-accent, #16161a);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* ---------------------------------------------------------
   배너
   --------------------------------------------------------- */
.v2tn-banner {
    position: relative;
    margin: 0 0 16px;
    border-radius: var(--tnb-radius, 14px);
    overflow: hidden;
}

/* 메인 섹션 상단 배너는 풀블리드 — 위쪽 히어로/매거진과 좌우 끝을 맞춘다.
   .v2-home-wrap 이 좌우 --hm-pad 만큼 패딩을 주므로 그만큼 음수 마진으로 빼낸다.
   (모바일 16px / PC 28px — 값은 home-v2.css 의 --hm-pad 를 그대로 참조하므로
    메인 여백 규칙이 바뀌면 배너도 함께 따라간다) */
.v2tn-banner--main {
    margin-left: calc(var(--hm-pad, 16px) * -1);
    margin-right: calc(var(--hm-pad, 16px) * -1);
    border-radius: 0;
}
.v2tn-banner--main .v2tn-slide { border-radius: 0; }

/* 풀블리드일 때 문구가 화면 끝에 붙지 않도록 안쪽 여백을 콘텐츠 기준으로 맞춘다 */
.v2tn-banner--main .v2tn-slide-body { padding-left: var(--hm-pad, 16px); padding-right: var(--hm-pad, 16px); }

/* 좌우 이동 버튼·점·일시정지 버튼이 문구 위에 겹치지 않도록 자리를 비운다.
   (버튼 40px + 좌우 여백 10px = 50px, 여유 6px) */
.v2tn-banner.has-nav .v2tn-slide-body {
    padding-left: 56px;
    padding-right: 56px;
    padding-bottom: 40px;
}

.v2tn-banner-track { display: flex; }

.v2tn-slide {
    position: relative;
    flex: 0 0 100%;
    display: flex;
    height: var(--tnb-hm, 320px);
    border-radius: var(--tnb-radius, 14px);
    overflow: hidden;
    text-decoration: none;
}
.v2tn-slide:not(.is-on) { display: none; }

.v2tn-slide-pic { position: absolute; inset: 0; }
.v2tn-slide-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.v2tn-slide-ov {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--tnb-ov, .3);
}

/* 텍스트가 이미지 밖으로 넘치지 않도록 내부 패딩 + 폭 제한 */
.v2tn-slide-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 640px;
    padding: 20px;
    overflow: hidden;
}
.v2tn-slide-body.is-left   { align-items: flex-start; text-align: left; }
.v2tn-slide-body.is-center { align-items: center; text-align: center; margin: 0 auto; }
.v2tn-slide-body.is-right  { align-items: flex-end; text-align: right; margin-left: auto; }
.v2tn-slide-body.is-vtop    { justify-content: flex-start; }
.v2tn-slide-body.is-vcenter { justify-content: center; }
.v2tn-slide-body.is-vbottom { justify-content: flex-end; }

.v2tn-slide-eyebrow {
    font-size: 11px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: .12em;
    opacity: .9;
}
.v2tn-slide-title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.28;
    /* 긴 제목이 배너를 넘지 않도록 2줄 말줄임 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.v2tn-slide-sub {
    font-size: 13px;
    line-height: 1.5;
    opacity: .92;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.v2tn-slide-btn {
    margin-top: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #fff;
    color: #16161a;
    font-size: 13px;
    font-weight: 700;
}

.v2tn-banner-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .38);
    color: #fff;
    cursor: pointer;
}
.v2tn-banner-nav svg { width: 20px; height: 20px; }
.v2tn-banner-nav.is-prev { left: 10px; }
.v2tn-banner-nav.is-next { right: 10px; }
.v2tn-banner-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.v2tn-banner-ctrl {
    position: absolute;
    right: 0;
    bottom: 12px;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.v2tn-banner-dots { display: flex; gap: 6px; }
.v2tn-banner-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
}
.v2tn-banner-dot.is-on { width: 20px; border-radius: 999px; background: #fff; }
.v2tn-banner-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.v2tn-banner-pause {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .38);
    cursor: pointer;
}
.v2tn-ico-pause {
    width: 8px;
    height: 10px;
    border-right: 3px solid #fff;
    border-left: 3px solid #fff;
}
.v2tn-banner-pause[aria-pressed="true"] .v2tn-ico-pause {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left: 8px solid #fff;
}

/* 스크린리더 전용 현재 슬라이드 안내 */
.v2tn-sr-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (min-width: 601px) and (max-width: 1023px) {
    .v2tn-slide { height: var(--tnb-ht, 280px); }
    .v2tn-slide-title { font-size: 26px; }
    .v2tn-slide-body { padding: 28px; }
}

@media (min-width: 1024px) {
    .v2tn-slide { height: var(--tnb-hp, 300px); }
    .v2tn-slide-title { font-size: 30px; }
    .v2tn-slide-sub   { font-size: 15px; }
    .v2tn-slide-body  { padding: 36px 44px; }
}

/* 자동 재생/전환 애니메이션을 원치 않는 사용자 */
@media (prefers-reduced-motion: reduce) {
    .v2tn-sk-img,
    .v2tn-sk-line { animation: none; }
    .v2tn-tab { transition: none; }
}