@charset "utf-8";

:root {
    --gbh-navy:#0a245f;
    --gbh-blue:#0e3b95;
    --gbh-soft:#eef5ff;
    --gbh-line:#dbe4f0;
    --gbh-text:#111827;
    --gbh-muted:#596579;
    --gbh-red:#ef2b2d;
    --gbh-green:#08ad58;
}


/* =========================================================
   기본
========================================================= */

.gbh-reservation,
.gbh-reservation * {
    box-sizing:border-box;
}

.gbh-reservation {
    color:var(--gbh-text);
    font-family:inherit;
    background:#fff;
}

.gbh-reservation img {
    display:block;
    max-width:100%;
}

.gbh-reservation a {
    color:inherit;
    text-decoration:none;
}

.sr-only {
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}


/* =========================================================
   breadcrumb
   현재 강백호 테마 헤더와 중복되므로 숨김
========================================================= */

.gbh-breadcrumb {
    display:none;
}

.gbh-breadcrumb strong {
    color:#111827;
}


/* =========================================================
   상단 HERO
========================================================= */

.gbh-hero {
    position:relative;
    display:grid;
    grid-template-columns:1.02fr 1fr;

    min-height:500px;
    overflow:hidden;

    /* 실제 강백호 상단 메뉴 높이에 맞춤 */
    margin-top:-120px;
    padding-top:120px;

    background:
        linear-gradient(
            90deg,
            #edf5ff 0%,
            #f7fbff 46%,
            #fff 100%
        );
}


/*
 * 상단 메뉴가 배경에서 잘 보이도록
 * 헤더 영역 높이만 살짝 어둡게
 */
.gbh-hero::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;

    height:120px;

    background:rgba(0,35,85,.20);

    z-index:3;
    pointer-events:none;
}


/* HERO 왼쪽 텍스트 */

.gbh-hero__copy {
    position:relative;
    z-index:4;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:70px max(
        28px,
        calc((100vw - 1380px)/2 + 24px)
    ) 55px;

    padding-right:40px;
}

.gbh-hero__eyebrow {
    margin:0 0 12px;

    font-size:18px;
    font-weight:800;

    color:var(--gbh-blue);
}

.gbh-hero h1 {
    margin:0;

    font-size:clamp(42px,4.2vw,72px);
    line-height:1.08;

    letter-spacing:-.055em;

    color:#071b4b;
}

.gbh-hero__lead {
    margin:24px 0 0;

    max-width:620px;

    font-size:20px;
    line-height:1.75;

    letter-spacing:-.02em;
}

.gbh-hero__points {
    margin-top:26px;

    display:flex;
    flex-wrap:wrap;

    gap:24px;

    font-weight:700;

    color:#172554;
}

.gbh-hero__points span {
    position:relative;
    padding-left:28px;
}

.gbh-hero__points span::before {
    content:'✓';

    position:absolute;
    left:0;
    top:0;

    width:20px;
    height:20px;

    border:2px solid var(--gbh-blue);
    border-radius:50%;

    display:grid;
    place-items:center;

    font-size:12px;

    color:var(--gbh-blue);
}


/* HERO 오른쪽 강백호 실제 사진 */

.gbh-hero__photo {
    min-height:380px;
    overflow:hidden;
}

.gbh-hero__photo img {
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;

    filter:
        saturate(1.12)
        contrast(1.03);
}


/* =========================================================
   공통 SECTION
========================================================= */

.gbh-section {
    max-width:1380px;

    margin:0 auto;

    padding:64px 24px 0;
}


/* 제목 */

.gbh-section-title {
    display:grid;

    grid-template-columns:
        minmax(50px,150px)
        auto
        minmax(50px,150px);

    gap:28px;

    align-items:center;
    justify-content:center;

    margin-bottom:18px;
}

.gbh-section-title span {
    height:2px;

    background:#17428f;
}

.gbh-section-title h2 {
    margin:0;

    font-size:34px;
    line-height:1.25;

    letter-spacing:-.04em;

    color:#071b4b;

    text-align:center;
}


/* 예약방법 설명 */

.gbh-booking__intro {
    margin:0 auto 34px;

    max-width:900px;

    text-align:center;

    color:var(--gbh-muted);

    font-size:17px;
    line-height:1.75;
}


/* =========================================================
   네이버 예약방법 STEP
========================================================= */

.gbh-step-grid {
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:18px;
}


/* 카드 */

.gbh-step-card {
    position:relative;

    min-width:0;

    padding:34px 14px 14px;

    border:1px solid var(--gbh-line);
    border-radius:16px;

    background:#fff;

    box-shadow:
        0 8px 24px rgba(15,35,80,.04);
}


/* 숫자 */

.gbh-step-no {
    position:absolute;

    top:-18px;
    left:50%;

    transform:translateX(-50%);

    width:38px;
    height:38px;

    border-radius:50%;

    display:grid;
    place-items:center;

    background:var(--gbh-blue);

    color:#fff;

    font-size:18px;
    font-weight:800;

    box-shadow:
        0 3px 10px rgba(14,59,149,.2);
}


/* 카드 제목 */

.gbh-step-card h3 {
    margin:0;

    text-align:center;

    font-size:21px;

    letter-spacing:-.03em;
}


/* 카드 설명 */

.gbh-step-card > p {
    min-height:54px;

    margin:10px 6px 16px;

    text-align:center;

    color:#3c4759;

    line-height:1.6;

    font-size:15px;
}


/* =========================================================
   예약 단계 실제 캡처 이미지
========================================================= */

.gbh-step-media {
    width:100%;
    height:330px;

    display:flex;
    align-items:flex-start;
    justify-content:center;

    overflow:hidden;

    border:1px solid #e6ebf2;
    border-radius:12px;

    background:#fff;
}


/*
 * 핵심
 * cover 사용하지 않음
 * 이미지가 잘리지 않고 전체가 보이도록 contain
 */
.gbh-step-media img {
    display:block;

    width:100%;
    height:100%;

    max-width:none;

    object-fit:contain;
    object-position:top center;
}


/* 1번 상품 선택 이미지 */

.gbh-step-card:nth-child(1)
.gbh-step-media img {
    width:108%;
}


/* 2번 날짜 선택 이미지 */

.gbh-step-card:nth-child(2)
.gbh-step-media img {
    width:110%;
}


/* 3번 수량 선택 이미지 */

.gbh-step-card:nth-child(3)
.gbh-step-media img {
    width:106%;
}


/* =========================================================
   예약 완료 카드
========================================================= */

.gbh-step-card--complete {
    display:flex;
    flex-direction:column;
}

.gbh-complete-box {
    flex:1;

    min-height:330px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:18px;

    padding:28px;

    border:1px solid #e6ebf2;
    border-radius:12px;

    background:#fbfefc;

    text-align:center;
}

.gbh-check {
    width:72px;
    height:72px;

    border-radius:50%;

    display:grid;
    place-items:center;

    background:var(--gbh-green);

    color:#fff;

    font-size:40px;
    font-weight:900;
}

.gbh-complete-box strong {
    font-size:21px;
}

.gbh-complete-box span {
    color:#536070;

    line-height:1.65;
}


/* =========================================================
   환불 / 준비물
========================================================= */

.gbh-info-grid {
    display:grid;

    grid-template-columns:
        1fr 1.15fr;

    gap:20px;

    padding-top:24px;
}


/* 공통 박스 */

.gbh-info-card {
    border:1px solid var(--gbh-line);
    border-radius:18px;

    padding:24px;

    background:#f9fbff;
}


/* 환불 */

.gbh-info-card--refund {
    background:#fff9f8;

    border-color:#f3d7d4;
}

.gbh-info-card h2 {
    margin:0 0 16px;

    font-size:25px;

    color:var(--gbh-blue);

    letter-spacing:-.035em;
}

.gbh-info-card--refund h2 {
    color:var(--gbh-red);
}

.gbh-info-card h2 small {
    font-size:14px;
    font-weight:800;
}


/* 환불 테이블 */

.gbh-refund-table {
    width:100%;

    border-collapse:collapse;

    background:#fff;

    overflow:hidden;

    border-radius:10px;
}

.gbh-refund-table th,
.gbh-refund-table td {
    border:1px solid #dfe5ec;

    padding:11px 8px;

    text-align:center;

    font-size:15px;
}

.gbh-refund-table th {
    background:#edf3fa;
}

.gbh-danger {
    color:var(--gbh-red);

    font-weight:800;
}


/* 안내 목록 */

.gbh-info-card ul {
    margin:16px 0 0;

    padding-left:19px;

    color:#485466;

    line-height:1.7;

    font-size:14px;
}

.gbh-info-lead {
    margin:-3px 0 18px;

    color:#4e5a6c;

    line-height:1.65;
}


/* =========================================================
   준비물
========================================================= */

.gbh-gear-grid {
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:10px;
}

.gbh-gear-grid div {
    min-height:130px;

    padding:18px 10px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:10px;

    text-align:center;

    background:#fff;

    border:1px solid #e2e8f0;
    border-radius:12px;
}

.gbh-gear-grid b {
    color:#172554;

    font-size:17px;
}

.gbh-gear-grid span {
    color:#596579;

    font-size:13px;
    line-height:1.45;
}


/* =========================================================
   주류 반입금지
========================================================= */

.gbh-alcohol-notice {
    margin-top:16px;

    padding:14px 16px;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:8px;

    border:1px solid #f3bbb6;
    border-radius:12px;

    background:#fff7f6;

    color:var(--gbh-red);

    text-align:center;
}

.gbh-alcohol-notice strong {
    font-size:18px;
}

.gbh-alcohol-notice span {
    font-weight:700;
}


/* =========================================================
   하단 네이버예약 CTA
========================================================= */

.gbh-cta {
    max-width:1380px;

    margin:24px auto 0;

    padding:28px 36px;

    display:grid;

    grid-template-columns:
        1.1fr .9fr;

    align-items:center;

    gap:30px;

    border-radius:20px;

    background:
        linear-gradient(
            110deg,
            #edf5ff,
            #f7fbff
        );

    overflow:hidden;
}

.gbh-cta__copy h2 {
    margin:0 0 12px;

    font-size:30px;
    line-height:1.25;

    color:#0a2a6d;

    letter-spacing:-.04em;
}

.gbh-cta__copy p {
    margin:0;

    color:#425066;

    line-height:1.75;
}


/* 버튼 */

.gbh-btn {
    display:inline-flex;

    margin-top:20px;

    padding:14px 22px;

    border-radius:8px;

    background:#0e3b95;

    color:#fff !important;

    font-weight:800;

    transition:.2s ease;
}

.gbh-btn:hover {
    transform:translateY(-1px);

    background:#082b73;
}


/* 우측 비주얼 */

.gbh-cta__visual {
    display:flex;

    align-items:flex-end;
    justify-content:center;

    gap:22px;

    min-height:180px;
}


/* 휴대폰 */

.gbh-phone {
    width:210px;
    height:188px;

    padding:25px 18px 18px;

    border:8px solid #111;
    border-bottom:0;

    border-radius:34px 34px 0 0;

    background:#fff;

    display:flex;
    flex-direction:column;

    gap:16px;
}

.gbh-phone__naver {
    color:#03b351;

    font-weight:900;
}

.gbh-phone__button {
    margin-top:auto;

    padding:12px;

    border-radius:8px;

    background:#03b351;

    color:#fff;

    text-align:center;

    font-weight:900;
}


/* 문어 */

.gbh-octopus {
    font-size:112px;

    line-height:1;
}


/* =========================================================
   하단 연락처
========================================================= */

.gbh-contact {
    max-width:1380px;

    margin:16px auto 0;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    border:1px solid var(--gbh-line);
    border-radius:16px;

    overflow:hidden;
}

.gbh-contact > div {
    padding:20px 24px;

    display:flex;
    flex-direction:column;

    gap:5px;

    border-right:
        1px solid var(--gbh-line);
}

.gbh-contact > div:last-child {
    border-right:0;
}

.gbh-contact strong {
    color:#172554;

    font-size:15px;
}

.gbh-contact span,
.gbh-contact a {
    color:#4c596d;

    font-size:14px;
    line-height:1.5;
}

.gbh-contact a:hover {
    color:var(--gbh-blue);

    text-decoration:underline;
}


/* =========================================================
   SEO 본문
========================================================= */

.gbh-seo-text {
    max-width:1380px;

    margin:34px auto 70px;

    padding:30px 34px;

    border-top:1px solid #e5e7eb;
    border-bottom:1px solid #e5e7eb;
}

.gbh-seo-text h2 {
    margin:0 0 14px;

    color:#172554;

    font-size:25px;

    letter-spacing:-.03em;
}

.gbh-seo-text p {
    margin:8px 0;

    color:#465267;

    font-size:16px;
    line-height:1.85;

    word-break:keep-all;
}


/* =========================================================
   태블릿
========================================================= */

@media (max-width:1100px) {

    .gbh-hero {
        grid-template-columns:1fr 1fr;

        min-height:400px;
    }

    .gbh-hero__copy {
        padding:42px 28px;
    }

    .gbh-hero__lead {
        font-size:18px;
    }


    /* 2열 */

    .gbh-step-grid {
        grid-template-columns:
            repeat(2,1fr);

        gap:34px 18px;
    }


    .gbh-info-grid {
        grid-template-columns:1fr;
    }


    .gbh-contact {
        grid-template-columns:
            repeat(2,1fr);
    }

    .gbh-contact > div:nth-child(2) {
        border-right:0;
    }

    .gbh-contact > div:nth-child(-n+2) {
        border-bottom:
            1px solid var(--gbh-line);
    }
}


/* =========================================================
   모바일
========================================================= */

@media (max-width:768px) {

    /* HERO */

    .gbh-hero {
        display:block;

        min-height:0;

        margin-top:-70px;
        padding-top:70px;
    }

    .gbh-hero::before {
        height:70px;

        background:
            rgba(0,35,85,.34);
    }


    .gbh-hero__copy {
        padding:34px 20px 30px;
    }

    .gbh-hero__eyebrow {
        font-size:15px;
    }

    .gbh-hero h1 {
        font-size:39px;
    }

    .gbh-hero__lead {
        margin-top:16px;

        font-size:16px;
        line-height:1.7;
    }

    .gbh-hero__points {
        gap:12px 18px;

        margin-top:20px;

        font-size:13px;
    }


    /* 실제 강백호 사진 */

    .gbh-hero__photo {
        height:240px;

        min-height:0;
    }

    .gbh-hero__photo img {
        object-position:center 38%;
    }


    /* Section */

    .gbh-section {
        padding:48px 16px 0;
    }

    .gbh-section-title {
        grid-template-columns:
            42px auto 42px;

        gap:12px;
    }

    .gbh-section-title h2 {
        font-size:26px;
    }

    .gbh-booking__intro {
        font-size:15px;

        margin-bottom:32px;
    }


    /* 예약방법 1열 */

    .gbh-step-grid {
        grid-template-columns:1fr;

        gap:34px;
    }

    .gbh-step-card {
        padding:32px 12px 12px;
    }

    .gbh-step-card > p {
        min-height:0;
    }


    /*
     * 모바일에서는 이미지 높이 강제하지 않음
     * 원본 비율 그대로 표시
     */
    .gbh-step-media {
        width:100%;

        height:auto;
        min-height:0;
    }

    .gbh-step-media img,
    .gbh-step-card:nth-child(1) .gbh-step-media img,
    .gbh-step-card:nth-child(2) .gbh-step-media img,
    .gbh-step-card:nth-child(3) .gbh-step-media img {
        width:100%;

        height:auto;

        max-width:100%;

        object-fit:contain;
    }


    .gbh-complete-box {
        min-height:280px;
    }


    /* 안내 */

    .gbh-info-grid {
        padding-top:20px;
    }

    .gbh-info-card {
        padding:20px 16px;
    }

    .gbh-info-card h2 {
        font-size:22px;
    }


    /* 준비물 2열 */

    .gbh-gear-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .gbh-gear-grid div {
        min-height:115px;
    }


    /* CTA */

    .gbh-cta {
        margin:20px 16px 0;

        padding:26px 20px 0;

        grid-template-columns:1fr;

        gap:16px;
    }

    .gbh-cta__copy h2 {
        font-size:25px;
    }

    .gbh-cta__visual {
        min-height:150px;

        overflow:hidden;
    }

    .gbh-phone {
        width:190px;
        height:165px;
    }

    .gbh-octopus {
        font-size:86px;
    }


    /* 연락처 */

    .gbh-contact {
        margin:14px 16px 0;

        grid-template-columns:1fr;
    }

    .gbh-contact > div {
        border-right:0;

        border-bottom:
            1px solid var(--gbh-line);
    }

    .gbh-contact > div:last-child {
        border-bottom:0;
    }


    /* SEO */

    .gbh-seo-text {
        margin:28px 16px 55px;

        padding:24px 4px;
    }

    .gbh-seo-text h2 {
        font-size:22px;
    }

    .gbh-seo-text p {
        font-size:15px;
    }
}


/* =========================================================
   작은 모바일
========================================================= */

@media (max-width:420px) {

    .gbh-hero h1 {
        font-size:34px;
    }

    .gbh-hero__photo {
        height:205px;
    }

    .gbh-section-title h2 {
        font-size:23px;
    }

    .gbh-gear-grid {
        grid-template-columns:
            1fr 1fr;

        gap:8px;
    }

    .gbh-phone {
        width:170px;
    }

    .gbh-octopus {
        font-size:70px;
    }
}