@charset "utf-8";

/* ==========================================================================
   위라이드 공통 스타일 — 화이트 앤 블랙
   ========================================================================== */

:root {
    --color-bg:         #FFFFFF;
    --color-surface:    #F5F5F5;
    --color-line:       #E5E5E5;
    --color-fg:         #0A0A0A;
    --color-muted:      #6B6B6B;
    --color-inverse-bg: #0A0A0A;
    --color-inverse-fg: #FFFFFF;

    --font-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
                 'Malgun Gothic', 'Noto Sans KR', sans-serif;

    --max-width: 1160px;
    --gutter: 20px;
}

/* reset ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
    /* iOS 가로 회전 시 글자가 제멋대로 커지는 것을 막는다 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure {
    margin: 0;
    padding: 0;
}

ul, ol { list-style: none; }

body {
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .06);
    word-break: keep-all;
    overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

/* AngularJS 바인딩이 평가되기 전 {{ }} 노출 방지 */
[ng-cloak], .ng-cloak { display: none !important; }

/* header ----------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 60px;
}

.logo {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.logo a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;   /* 터치 타겟 */
}

/* 햄버거 — 모바일에서만 보인다 */
.nav-toggle {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    margin-right: -10px;   /* 아이콘 광학 정렬 */
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    position: absolute;
    left: 50%;
    width: 22px;
    height: 2px;
    background: var(--color-fg);
    transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle__bars {
    top: 50%;
    transform: translate(-50%, -50%);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: '';
    left: 0;
}

.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }

.nav-toggle.is-open .nav-toggle__bars { background: transparent; }

.nav-toggle.is-open .nav-toggle__bars::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__bars::after {
    top: 0;
    transform: rotate(-45deg);
}

.gnb {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gnb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;         /* 터치 타겟 최소 44px */
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-muted);
    border-radius: 2px;
    transition: color .15s ease;
}

.gnb a:hover { color: var(--color-fg); }

.gnb a.gnb__cta {
    color: var(--color-inverse-fg);
    background: var(--color-inverse-bg);
}

.gnb a.gnb__cta:hover { opacity: .85; }

/* body / footer ---------------------------------------------------------- */

/* 본문은 전체 폭. 폭 제한이 필요한 블록만 .container 로 감싼다.
   (히어로 같은 풀블리드 섹션을 위해) */
.site-body { width: 100%; }

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    /* 노치 단말의 가로 모드에서 콘텐츠가 잘리지 않도록 */
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.site-footer {
    margin-top: 96px;
    padding: 40px var(--gutter);
    /* 홈 인디케이터가 있는 단말에서 하단이 가려지지 않도록 */
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    background: var(--color-inverse-bg);
    color: var(--color-inverse-fg);
    font-size: 14px;
}

.site-footer p {
    max-width: var(--max-width);
    margin: 0 auto;
    color: rgba(255, 255, 255, .7);
}

/* button ----------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 32px;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid var(--color-fg);
    border-radius: 2px;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}

.btn--primary {
    background: var(--color-inverse-bg);
    color: var(--color-inverse-fg);
}

.btn--primary:hover { opacity: .85; }

.btn--secondary {
    background: var(--color-bg);
    color: var(--color-fg);
}

.btn--secondary:hover {
    background: var(--color-fg);
    color: var(--color-inverse-fg);
}

/* 반전(블랙) 영역 위에 놓이는 버튼 */
.btn--inverse {
    background: var(--color-bg);
    color: var(--color-fg);
    border-color: var(--color-bg);
}

.btn--inverse:hover { opacity: .85; }

/* 히어로 캐러셀 ---------------------------------------------------------- */

.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(78vh, 680px);
    /* 모바일 브라우저의 주소창 노출/숨김에 따라 vh 가 출렁이므로 dvh 를 우선 적용 */
    min-height: min(78dvh, 680px);
    padding: 96px 0 84px;
    overflow: hidden;
    background: var(--color-inverse-bg);
    color: var(--color-inverse-fg);
}

.hero__media {
    position: absolute;
    inset: 0;
}

.hero__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

/* Angular 부트 전에는 첫 슬라이드를 노출해 깜빡임을 막는다.
   부트 후(.ng-scope)에는 is-active 만 따른다. */
.hero__slide:first-child { opacity: 1; }
.hero.ng-scope .hero__slide { opacity: 0; }
.hero.ng-scope .hero__slide.is-active { opacity: 1; }

.hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 무채색 UI와 어울리도록 약하게 탈색 + 대비 보정.
       완전 흑백을 원하면 grayscale(1) 로 올린다. */
    filter: grayscale(.18) contrast(1.06) brightness(.95);
    transform: scale(1.04);
    transition: transform 7s ease-out;
}

.hero__slide.is-active img { transform: scale(1); }

/* 텍스트 가독성용 스크림 — 슬라이드 위에 덮인다 */
.hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(10, 10, 10, .55) 0%,
            rgba(10, 10, 10, .12) 38%,
            rgba(10, 10, 10, .78) 100%);
}

.hero__inner {
    position: relative;
    z-index: 1;
}

.hero__eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .75);
}

.hero__title {
    margin-top: 14px;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.hero__desc {
    max-width: 560px;
    margin: 16px 0 32px;
    font-size: 18px;
    color: rgba(255, 255, 255, .85);
}

/* 인디케이터 — 원형 대신 바 형태가 무채색 톤에 맞는다 */
.hero__nav {
    position: absolute;
    left: 50%;
    bottom: 12px;   /* 버튼 높이 44px 의 중앙이 바닥에서 약 34px */
    z-index: 2;
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: var(--max-width);
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
    transform: translateX(-50%);
}

/* 바는 얇게 보이되 실제 터치 영역은 44x44 를 확보한다 */
.hero__dot {
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    display: flex;
    align-items: center;
}

.hero__dot::before {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, .35);
    border-radius: 2px;
    transition: background .2s ease;
}

.hero__dot:hover::before { background: rgba(255, 255, 255, .6); }
.hero__dot.is-active::before { background: #FFFFFF; }

.hero__dot:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

/* 모션 최소화 설정을 존중한다 */
@media (prefers-reduced-motion: reduce) {
    .hero__slide,
    .hero__slide img { transition: none; }
    .hero__slide img { transform: none; }
}

/* main 랜딩 -------------------------------------------------------------- */

.main-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 64px 0;
    background: var(--color-line);
    border: 1px solid var(--color-line);
}

.main-nav__item {
    display: block;
    padding: 32px 24px;
    background: var(--color-bg);
    transition: background .15s ease;
}

.main-nav__item:hover { background: var(--color-surface); }

.main-nav__item strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.main-nav__item span {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var(--color-muted);
}

/* 반응형 ----------------------------------------------------------------- */

@media (max-width: 900px) {
    .main-nav { grid-template-columns: repeat(2, 1fr); }
}

/* ── 모바일 (720px 이하) ── 햄버거 네비게이션 전환 ────────────────────── */
@media (max-width: 720px) {
    .nav-toggle { display: block; }

    .gnb {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0 12px;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-line);
        box-shadow: 0 12px 24px rgba(0, 0, 0, .06);
    }

    .gnb.is-open { display: flex; }

    .gnb a {
        min-height: 52px;
        padding: 0 4px;
        font-size: 16px;
        color: var(--color-fg);
        border-bottom: 1px solid var(--color-line);
    }

    .gnb a:last-child { border-bottom: 0; }

    /* 모바일에서는 예약을 블록 버튼으로 */
    .gnb a.gnb__cta {
        justify-content: center;
        margin: 10px 0 2px;
        border-bottom: 0;
        border-radius: 2px;
    }
}

@media (max-width: 640px) {
    body { font-size: 15px; }

    .hero {
        min-height: min(72vh, 520px);
        min-height: min(72dvh, 520px);
        padding: 56px 0 76px;
    }
    .hero__eyebrow { font-size: 12px; }
    .hero__title { font-size: 30px; }
    .hero__desc { font-size: 15px; margin-bottom: 24px; }
    .hero__nav { bottom: 8px; }
    .hero__dot { width: 36px; }

    .main-nav { grid-template-columns: 1fr; }
    .main-nav__item { padding: 22px 20px; }

    .site-footer { margin-top: 64px; padding: 32px var(--gutter); }
}

/* 가로 모드처럼 세로가 짧을 때는 히어로가 화면을 다 먹지 않게 */
@media (max-height: 560px) and (orientation: landscape) {
    .hero {
        min-height: 400px;
        padding: 48px 0 68px;
    }
    .hero__title { font-size: 28px; }
}