/**
 * webOS Hub Showcase — 2026 시안에서 추가·수정된 스타일
 *
 * index.html 에서 style.css · hero-svg.css 다음에 불러오므로,
 * 같은 선택자를 쓰면 이 파일이 이긴다. (원래 test.css 였고, 시안 확정으로 이름을 바꿨다)
 */

/* --------------------------------------------------------------------------
   1. 상단 고정 CTA 제거
   -------------------------------------------------------------------------- */
/* .cta 관련 규칙(style.css 3-5)은 style.css 에 그대로 남아 있지만,
   index.html 에 .cta 요소가 없으므로 아무 데도 적용되지 않는다.

   다만 앵커 이동 여백은 고정 바 높이만큼(88px) 잡혀 있었는데,
   이제 가릴 바가 없으므로 섹션 윗부분이 화면 맨 위에 딱 맞게 오도록 되돌린다. */
.section { scroll-margin-top: 0; }

/* --------------------------------------------------------------------------
   2. FAQ (CONTACT 아래)
   PC 값은 시안(1920px 기준 1:1)에서 잰 값이다.
   모바일 시안은 아직 없어서, 다른 카드처럼 750px 기준 vw 로 줄어들게 했다.
   -------------------------------------------------------------------------- */
/* 다른 카드 사이(--card-gap)보다 넓게 띄운다 — 시안 70px.
   .section + .section 보다 뒤에 오고 우선순위가 같아야 이긴다 */
.section + .section--faq { margin-top: 9.3333vw; }

.faq {
    background: #2e2e2e;   /* 시안 지정 */
    color: var(--white);
}

/* 크기는 다른 카드 제목(style.css .contact__title 등)과 같다 — 시안 글자 폭으로 역산 */
.faq__title {
    padding-top: 1.5vw;
    font-size: clamp(20px, 5.3333vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
}

/* 질문 사이 가로선 — 맨 위 한 줄은 목록에, 나머지는 각 질문 아래에 긋는다 */
.faq__list {
    margin-top: 4vw;
    border-top: 1px solid var(--card-border);
}
.faq__item { border-bottom: 1px solid var(--card-border); }

.faq__q {
    font-size: inherit;
    font-weight: inherit;
}

/* 질문 한 줄 전체가 누르는 영역이다 */
.faq__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3vw;
    width: 100%;
    padding: 3.2vw 2.9333vw;
    border: 0;
    background: none;
    color: inherit;
    font-family: var(--font-sm);
    font-size: clamp(12px, 2.6667vw, 20px);
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;   /* iOS 에서 빠르게 두 번 누를 때 화면이 확대되지 않게 */
}
.faq__btn:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: -2px;
}

/* + 아이콘 — 12x12 SVG (index.html 에 직접 들어 있다). 열리면 45도 돌아 × 가 된다.
   PC 는 질문 글자 18px 에 아이콘 12px (글자의 2/3).
   모바일은 같은 비율로 질문 글자를 따라간다 — .faq__btn 의 clamp(12px, 2.6667vw, 20px) 에 2/3 를 곱한 값.
   휴대폰 폭(450px 이하)에서는 글자 12px · 아이콘 8px. 질문 글자 크기를 바꾸면 여기도 같이 바꾼다 */
.faq__icon {
    display: block;
    flex: none;
    width: clamp(8px, 1.7778vw, 13.3333px);
    height: clamp(8px, 1.7778vw, 13.3333px);
    transition: transform .3s ease;
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); }

/* 답변 — 높이를 0 → 내용 높이로 부드럽게 연다.
   닫혀 있을 때는 visibility: hidden 이라 키보드 탭이 안의 링크로 들어가지 않는다.
   닫힐 때는 접히는 움직임이 끝난 뒤(.3s)에 숨긴다 */
.faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .3s ease, visibility 0s linear .3s;
}
.faq__item.is-open .faq__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .3s ease, visibility 0s;
}
.faq__panel-inner {
    min-height: 0;
    overflow: hidden;
}

.faq__a {
    padding: 0 2.9333vw 4vw;
    font-family: var(--font-sm);
    font-size: clamp(12px, 2.6667vw, 20px);
    font-weight: 400;    /* 시안 글자 폭으로 역산 — 14px 에서 Regular 가 시안과 같다 */
    line-height: 1.28;   /* 시안 지정 */
    color: var(--white);
}
.faq__a a {
    color: var(--white);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .faq__panel,
    .faq__item.is-open .faq__panel,
    .faq__icon { transition: none; }
}

/* --------------------------------------------------------------------------
   3. SHOWCASE HIGHLIGHTS — 카드 슬라이드 (VENUE 위)
   PC 는 시안 1920px 에서 1:1 로, 모바일은 시안 750px 값을 vw 로 환산했다 (값 / 7.5).
   카드 이미지(380x475)는 둥근 모서리가 투명하게 들어 있어 border-radius 를 주지 않는다.
   -------------------------------------------------------------------------- */
.section--highlights { padding-top: 11.0667vw; }

/* 카드 아래 → VENUE 카드 위 — 시안 96px */
.section--highlights + .section { margin-top: 12.8vw; }

.highlights { text-align: center; }

/* 시안 글자 폭으로 역산하면 자간이 없다 — 공통 .label 의 .1em 을 쓰지 않는다 */
.highlights__label { letter-spacing: 0; }

.highlights__title {
    margin-top: 2vw;
    font-size: clamp(20px, 5.3333vw, 40px);   /* 다른 카드 제목과 같은 크기 */
    font-weight: 700;
    line-height: 1.2;                         /* 모바일 두 줄 간격 — 시안 48px */
    letter-spacing: 0;                        /* 시안 글자 폭으로 역산 — 자간 없음 */
}
.highlights__title .dot { color: var(--red); }

/* 슬라이드 크기는 변수로 PC/모바일을 바꾼다.
   Splide 옵션(main.js 5번)의 카드 폭 · 간격도 이 변수를 그대로 쓰므로, 크기는 여기서만 고친다.
   움직임 · 끌기 · 무한 반복 · 줄임 모션 설정은 Splide 가 맡는다 */
.hl-slider {
    --card-w: 50.6667vw;    /* 시안 380px */
    --slide-gap: 2.6667vw;  /* 시안 20px */
    --arrow-x: 33.0667vw;   /* 가운데 → 화살표 중심 — 시안 248px */
    --arrow-y: -2.2vw;      /* 모바일 시안은 화살표가 카드 세로 가운데보다 16px 위에 있다 */
    margin-top: 8vw;
}

/* 보이는 영역은 콘텐츠 폭(.container)과 같다.
   양옆 카드는 바깥 끝에서 투명 → 가운데 카드 가장자리에서 완전히 보이도록 선형으로 흐려진다 (시안 측정) */
.hl-slider .splide__track {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(50% - var(--card-w) / 2), #000 calc(50% + var(--card-w) / 2), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 calc(50% - var(--card-w) / 2), #000 calc(50% + var(--card-w) / 2), transparent);
    touch-action: pan-y;    /* 세로 스크롤은 브라우저에, 가로로 끄는 것은 Splide 에 맡긴다 */
    cursor: grab;
}

.hl-slider .splide__slide img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;   /* iOS 에서 길게 누를 때 뜨는 이미지 저장 메뉴 끄기 */
}

/* 화살표 — 누르는 영역은 44px 로 넉넉하게, 그림은 시안 크기.
   .splide 가 기준 위치(position: relative)라 가운데를 기준으로 좌우로 민다 */
.hl-slider__nav {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    color: var(--white);
    touch-action: manipulation;   /* iOS 에서 화살표를 빠르게 연달아 누를 때 화면이 확대되지 않게 */
}
.hl-slider__nav--prev { transform: translate(calc(var(--arrow-x) * -1), var(--arrow-y)); }
.hl-slider__nav--next { transform: translate(var(--arrow-x), var(--arrow-y)); }
.hl-slider__nav svg {
    display: block;
    width: clamp(8px, 2.1333vw, 16px);   /* 시안 16x30 */
    height: auto;
}

/* --------------------------------------------------------------------------
   4. QR 예약 안내 (히어로 맨 아래 — 날짜·장소 안내 밑)
   모바일은 시안 750px 값을 vw 로 환산했다 (값 / 7.5). PC 는 시안 1920px 에서 1:1.
   모바일: 문구 → QR → 안내 문구가 세로로 쌓이고 가운데 정렬.
   PC: 왼쪽 문구 / 세로선 / QR / 안내 문구가 가로 한 줄.
   -------------------------------------------------------------------------- */
/* 히어로 아래 여백(style.css 88px)은 없앤다 — QR 카드 아래 간격은
   바로 다음 SHOWCASE HIGHLIGHTS 의 위 여백(3번)이 맡는다 */
.hero { padding-bottom: 0; }

.hero-qr {
    margin-top: 23.3333vw;        /* 시안 — 시간 안내 아래 175px */
    padding: 6.2667vw 4vw 6.8667vw;
    border-radius: var(--radius);
    background: var(--red);
    color: var(--white);
}

/* 다른 라벨(.1em)과 달리 자간이 거의 없다 — 시안 글자 폭으로 역산 */
.hero-qr__label {
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--cream);   /* #feecc8 */
}

.hero-qr__title {
    margin-top: 1.6vw;
    font-size: clamp(20px, 5.3333vw, 40px);   /* 다른 카드 제목과 같은 크기 */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    white-space: nowrap;                      /* "Only." 가 다음 줄로 떨어지지 않게 */
}
.hero-qr__title span { color: var(--cream); }   /* "Only." */

.hero-qr__desc {
    margin-top: 3.2vw;
    font-family: var(--font-sm);
    font-size: clamp(10px, 2.6667vw, 20px);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -.01em;
}

/* QR 을 감싸는 흰 상자. 흰 여백이 있어야 카메라가 QR 을 잘 읽는다 */
.hero-qr__code {
    width: 31.2vw;                /* 시안 234px */
    margin: 4.7333vw auto 0;
    padding: 3vw;
    border-radius: 3.2vw;
    background: var(--white);
}
.hero-qr__code img {
    display: block;
    width: 100%;
    height: auto;
}

.hero-qr__caption {
    margin-top: 1.9333vw;
    font-family: var(--font-sm);
    font-size: clamp(10px, 2.6667vw, 20px);
    font-weight: 500;
    line-height: 1.45;
}
.hero-qr__caption strong {
    font-family: var(--font);
    font-size: 1.05em;            /* 시안 21px */
    font-weight: 500;
    color: var(--cream);
}
.hero-qr__via { font-weight: 300; }   /* "via" 만 가늘게 */

/* ==========================================================================
   PC (751px ~)
   ========================================================================== */
@media (min-width: 751px) {
    /* ---- QR 예약 안내 ---- */
    .hero-qr {
        display: flex;
        align-items: center;
        min-height: 177px;            /* 시안 카드 높이 */
        margin-top: 167px;            /* 시안 — 시간 안내 아래 */
        padding: 4px 30px 0 33px;     /* 위 4px — 가운데 정렬된 내용을 시안 위치로 2px 내린다 */
        box-shadow: 0 0 40px rgba(197, 0, 54, .55);   /* 시안의 붉은 빛 번짐 */
        text-align: left;
    }

    .hero-qr__body { flex: 1; }

    .hero-qr__title {
        margin-top: 6px;
        /* 시안 37px. 창이 좁은 PC(751 ~ 840px)에서는 왼쪽 칸이 제목보다 좁아지므로
           세로선을 넘지 않게 칸 폭에 맞춰 줄인다 (395px = 좌우 여백 + 오른쪽 QR 칸) */
        font-size: min(37px, calc((100vw - 395px) / 11.6));
    }
    .hero-qr__desc {
        margin-top: 18px;
        font-size: 13px;
        line-height: 17px;
    }

    /* 세로선 오른쪽 — QR 상자 + 안내 문구. 폭은 시안에서 잰 값(세로선 → 카드 오른쪽 끝 314px) */
    .hero-qr__scan {
        display: flex;
        flex: none;
        align-items: center;
        gap: 20px;
        width: 284px;                 /* 314px - 카드 오른쪽 안쪽 여백 30px */
        padding: 4px 0 4px 20px;
        border-left: 1px solid rgba(255, 255, 255, .15);
    }

    .hero-qr__code {
        flex: none;
        width: 126px;
        margin: 0;
        padding: 12px;
        border-radius: 10px;
    }

    .hero-qr__caption {
        margin-top: 0;
        font-size: 16px;
        line-height: 19px;
        white-space: nowrap;          /* "Scan to Reserve" 가 두 줄로 쪼개지지 않게 */
    }
    .hero-qr__line { display: block; }
    .hero-qr__caption strong { font-size: 16px; }

    .section + .section--faq { margin-top: 70px; }

    .faq { padding-bottom: 59px; }   /* 시안 — 마지막 선 아래 59px */

    .faq__title { padding-top: 0;font-size: 37px; }
    .faq__list { margin-top: 39px; }   /* 시안 — 첫 번째 선이 카드 위에서 121px */

    /* 시안 — 줄 간격 53px, 글자 폭으로 역산하면 18px */
    .faq__btn {
        gap: 24px;
        padding: 14px 23px 14px 22px;   /* 오른쪽 23px — 아이콘 가운데가 시안 위치에 온다 */
        font-size: 18px;
        line-height: 1.35;
    }

    /* PC 는 시안 크기 그대로 — 선 굵기 2px 이 픽셀 경계(5~7px)에 맞아 또렷하다 */
    .faq__icon {
        width: 12px;
        height: 12px;
    }

    .faq__a {
        padding: 0 56px 18px 22px;   /* 시안 — 답변 마지막 줄 아래 20px */
        font-size: 14px;   /* 시안 지정 */
    }

    /* ---- SHOWCASE HIGHLIGHTS ---- */
    .section--highlights { padding-top: 93px; }
    .section--highlights + .section { margin-top: 99px; }   /* 시안 — 카드 아래 → VENUE 카드 위 */

    .highlights__title {
        margin-top: 20px;
        font-size: 37px;
    }

    .hl-slider {
        --card-w: 380px;
        --slide-gap: 20px;
        --arrow-x: 262px;
        --arrow-y: 0px;       /* PC 시안은 카드 세로 가운데 */
        margin-top: 28px;
    }
    .hl-slider__nav svg { width: 16px; }

    /* 시안 — FAQ 카드 아래에서 푸터 문구까지 40px (style.css 는 56px 로 잡혀 있어 21px 넓었다) */
    .footer { padding-top: 35px; }
}