/* USED BY: index.php (direct <link>). */
.home-renewal {
    --home-renewal-ivory: #fff8ee;
    --home-renewal-paper: #fffdf8;
    --home-renewal-clay: #a85e38;
    --home-renewal-clay-dark: #5d3928;
    --home-renewal-earth: #2f241d;
    --home-renewal-muted: #78675b;
    --home-renewal-line: #ead9c5;
    --home-renewal-sage: #55705b;
    --home-renewal-sage-soft: #edf4ea;
    --home-renewal-shadow: 0 18px 44px rgba(88, 62, 38, 0.1);
    color: var(--home-renewal-earth);
    background: transparent;
    overflow-x: clip;
}

body:has(.home-renewal) #wrapper {
    overflow-x: clip;
}

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

.home-renewal a {
    text-decoration: none;
}

.home-renewal a:focus-visible,
.home-renewal button:focus-visible {
    outline: 3px solid rgba(168, 94, 56, 0.28);
    outline-offset: 3px;
}

.is-homepage #content > .content-wrap {
    padding-top: 2.5rem;
}

@media (max-width: 991.98px) {
    .is-homepage #content > .content-wrap {
        padding-top: 1.75rem;
    }
}

/* Bootstrap's .container adds a side gutter on top of each section's own
   width. Drop the gutter on every container in the homepage flow (the
   outer page container and the trio section's own nested one) so every
   section fills the page's normal content width edge-to-edge, without
   stretching past it to the full viewport. */
.is-homepage #content .container,
.is-homepage .home-footer-prelude > .container {
    padding-right: 0;
    padding-left: 0;
}

.home-renewal-hero {
    width: 100%;
    padding: clamp(5px, 0.8vw, 11px) 0 clamp(28px, 4vw, 48px);
}

.home-renewal-hero__eyebrow {
    margin: 0 0 18px;
    color: var(--home-renewal-clay);
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: 0;
}

.home-renewal-hero__tracks {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.7fr);
    gap: clamp(20px, 3vw, 32px);
    align-items: stretch;
}

/* Desktop visitors skew toward group/institutional bookings, so the group
   card leads visually here even though it stays second in the markup
   (mobile visitors skew individual and see the natural, unreordered
   layout). */
@media (min-width: 1025px) {
    .home-renewal-hero__tracks {
        grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    }

    .home-renewal-hero__track--group {
        order: -1;
    }
}

.home-renewal-hero__track {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(168, 94, 56, 0.18);
    border-radius: 16px;
    background: var(--home-renewal-paper);
    box-shadow: var(--home-renewal-shadow);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.home-renewal-hero__track:hover,
.home-renewal-hero__track:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 22px 42px rgba(88, 62, 38, 0.18);
}

.home-renewal-hero__track-figure {
    display: grid;
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 0;
    background: #f7ead8;
    overflow: hidden;
    place-items: center;
}

.home-renewal-hero__track-figure img,
.home-renewal-hero__track-figure video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.home-renewal-hero__track:hover .home-renewal-hero__track-figure > img,
.home-renewal-hero__track:hover .home-renewal-hero__track-figure > video {
    transform: scale(1.06);
}

.home-renewal-hero__track-figure--placeholder {
    color: var(--home-renewal-clay-dark);
    font-weight: 800;
}

.home-renewal-hero__track-badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 24px rgba(88, 62, 38, 0.2);
}

.home-renewal-hero__track-badge strong {
    font-family: "Gowun Batang", serif;
    font-size: 1.3rem;
    line-height: 1.1;
    color: var(--home-renewal-clay-dark);
}

.home-renewal-hero__track-badge span {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--home-renewal-muted);
}

.home-renewal-hero__track--group .home-renewal-hero__track-figure {
    aspect-ratio: 16 / 11.7;
}

.home-renewal-hero__track--individual .home-renewal-hero__track-figure {
    flex: 1;
    aspect-ratio: auto;
    height: auto;
    min-height: clamp(320px, 40vw, 460px);
}

.home-renewal-hero__track-overlay {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: clamp(18px, 3vw, 30px);
    background: linear-gradient(180deg, transparent 0%, rgba(20, 14, 10, 0.05) 30%, rgba(20, 14, 10, 0.82) 100%);
}

.home-renewal-hero__track-overlay .home-renewal-hero__track-desc {
    color: rgba(255, 255, 255, 0.88);
}

.home-renewal-hero__track-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: clamp(20px, 3vw, 34px);
}

.home-renewal-hero__track-body > * {
    margin: 0;
}

.home-renewal-hero__track-tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(168, 94, 56, 0.12);
    color: var(--home-renewal-clay-dark);
    font-size: 0.82rem;
    font-weight: 800;
}

.home-renewal-hero__track-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
}

.home-renewal-hero__track-tag--individual {
    background: var(--home-renewal-sage-soft);
    color: var(--home-renewal-sage);
}

.home-renewal-hero__track--group h1 {
    color: var(--home-renewal-earth);
    font-family: "Gowun Batang", serif;
    font-size: clamp(1.1rem, 1.7vw, 1.4rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0;
    word-break: keep-all;
}

.home-renewal-hero__track--individual h2 {
    color: #fff;
    font-family: "Gowun Batang", serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.28;
    word-break: keep-all;
}

.home-renewal-hero__track-desc {
    max-width: 46ch;
    color: var(--home-renewal-muted);
    font-size: clamp(0.96rem, 1.3vw, 1.05rem);
    line-height: 1.68;
    word-break: keep-all;
}

.home-renewal-audience {
    width: 100%;
    padding: clamp(30px, 5vw, 58px) 0 clamp(34px, 5vw, 66px);
    scroll-margin-top: 110px;
}

.home-renewal__section-head {
    display: grid;
    justify-items: center;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto 24px;
    text-align: center;
}

.home-renewal__section-head h2 {
    margin: 0;
    color: var(--home-renewal-earth);
    font-family: "Gowun Batang", serif;
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    word-break: keep-all;
}

.home-renewal__section-head p {
    margin: 0;
    color: var(--home-renewal-muted);
    font-size: 1.02rem;
    line-height: 1.68;
    word-break: keep-all;
}

.home-renewal-audience__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.home-renewal-audience__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--home-renewal-line);
    border-radius: 8px;
    background: var(--home-renewal-paper);
    color: var(--home-renewal-earth);
    box-shadow: 0 10px 28px rgba(88, 62, 38, 0.08);
    min-height: 430px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}

.home-renewal-audience__photo {
    display: block;
    position: relative;
    align-self: start;
    width: calc(100% - 32px);
    margin: 16px 16px 0;
    aspect-ratio: 16 / 11;
    border-radius: 6px;
    overflow: hidden;
    background: #f1e2d2;
}

.home-renewal-audience__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.home-renewal-audience__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.home-renewal-audience__card:hover,
.home-renewal-audience__card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 22px 42px rgba(88, 62, 38, 0.16);
    border-color: rgba(168, 94, 56, 0.34);
    background: #fff;
}

.home-renewal-audience__card:hover .home-renewal-audience__photo img,
.home-renewal-audience__card:focus-visible .home-renewal-audience__photo img {
    transform: scale(1.06);
}

.home-renewal-audience__card-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 172px;
    padding: 18px 20px 22px;
}

.home-renewal-audience__card-body::after {
    content: "\F138";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: auto;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--home-renewal-card-accent, var(--home-renewal-clay));
    font-family: "bootstrap-icons";
    font-size: 1rem;
    line-height: 1;
    opacity: 0.72;
    transition: transform 0.22s ease, opacity 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.home-renewal-audience__card:hover .home-renewal-audience__card-body::after,
.home-renewal-audience__card:focus-visible .home-renewal-audience__card-body::after {
    transform: translateX(4px);
    opacity: 1;
    background: var(--home-renewal-card-accent, var(--home-renewal-clay));
    color: #fff;
}

.home-renewal-audience__card:focus-visible {
    outline: 3px solid rgba(168, 94, 56, 0.28);
    outline-offset: 3px;
}

.home-renewal-audience__card--clay { --home-renewal-card-accent: #a85e38; --home-renewal-card-soft: #f7ece3; }
.home-renewal-audience__card--sage { --home-renewal-card-accent: #55705b; --home-renewal-card-soft: #edf4ea; }
.home-renewal-audience__card--ochre { --home-renewal-card-accent: #9b7427; --home-renewal-card-soft: #fbf2dd; }
.home-renewal-audience__card--slate { --home-renewal-card-accent: #4a6d7c; --home-renewal-card-soft: #edf5f7; }
.home-renewal-audience__card--rose { --home-renewal-card-accent: #9a5a56; --home-renewal-card-soft: #f8ecea; }
.home-renewal-audience__card--teal { --home-renewal-card-accent: #28746b; --home-renewal-card-soft: #e6f4f1; }

.home-renewal-audience__card-head {
    margin-bottom: 12px;
}

.home-renewal-audience__meta {
    width: fit-content;
    padding: 6px 12px;
    border: 1px solid rgba(85, 112, 91, 0.12);
    border-radius: 999px;
    background: var(--home-renewal-card-soft, var(--home-renewal-sage-soft));
    color: var(--home-renewal-card-accent, var(--home-renewal-sage));
    font-size: 0.76rem;
    font-weight: 800;
}

.home-renewal-audience__card h3 {
    margin: 0;
    font-family: "Gowun Batang", serif;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
}

.home-renewal-audience__card h3 {
    color: var(--home-renewal-card-accent, var(--home-renewal-clay-dark));
    font-size: 1.36rem;
    max-width: 100%;
    margin-bottom: 8px;
}

.home-renewal-keep {
    display: inline-block;
    white-space: nowrap;
}

.home-renewal-audience__card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.56;
    word-break: keep-all;
}

.home-renewal-audience__card p {
    color: var(--home-renewal-muted);
    max-width: 100%;
}

@media (max-width: 1024px) {
    .home-renewal-hero__tracks {
        grid-template-columns: 1fr;
    }

    .home-renewal-audience__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    /* Bootstrap's .container (site-wide, wraps every page) adds its own
       12px-per-side gutter on top of this. That's redundant with the inset
       .home-renewal-hero/.home-renewal-audience already manage themselves,
       and on a narrow phone screen it doubles the side margin, so drop it
       for the homepage only. */
    .is-homepage .container {
        padding-right: 0;
        padding-left: 0;
    }

    /* The zeroed .container leaves the reservation-guide card flush to the
       screen edges, so restore the same 12px side inset the hero/audience use. */
    .is-homepage .home-footer-prelude__inner {
        margin-right: 12px;
        margin-left: 12px;
    }

    /* Same fix for the site footer's widget grid and copyright bar. */
    .is-homepage #footer .container {
        padding-right: 12px;
        padding-left: 12px;
    }

    .home-renewal-hero,
    .home-renewal-audience {
        width: calc(100% - 24px);
        margin-right: auto;
        margin-left: auto;
    }

    .home-renewal-hero {
        padding-top: 16px;
    }

    .home-renewal-hero__tracks {
        gap: 16px;
    }

    .home-renewal-audience {
        padding-top: 26px;
        scroll-margin-top: 92px;
    }

    .home-renewal-audience__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .home-renewal-audience__card {
        min-height: 0;
    }

    .home-renewal-audience__photo {
        width: calc(100% - 16px);
        margin: 8px 8px 0;
        aspect-ratio: 4 / 3;
    }

    .home-renewal-audience__card-body {
        min-height: 132px;
        padding: 10px 10px 12px;
    }

    .home-renewal-audience__card-head {
        margin-bottom: 8px;
    }

    .home-renewal-audience__meta {
        padding: 4px 8px;
        font-size: 0.64rem;
        line-height: 1.15;
        white-space: normal;
    }

    .home-renewal-audience__card h3 {
        margin-bottom: 6px;
        font-size: 1rem;
        line-height: 1.22;
    }

    .home-renewal-audience__card p {
        font-size: 0.7rem;
        line-height: 1.38;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .home-renewal-audience__card-body::after {
        width: 28px;
        height: 28px;
        font-size: 0.86rem;
    }
}

@media (max-width: 360px) {
    .home-renewal__section-head h2 {
        font-size: 1.82rem;
    }

    .home-renewal-audience__grid {
        gap: 8px;
    }

    .home-renewal-audience__photo {
        width: calc(100% - 12px);
        margin: 6px 6px 0;
    }

    .home-renewal-audience__card-body {
        min-height: 124px;
        padding: 8px 8px 10px;
    }

    .home-renewal-audience__meta {
        padding: 3px 7px;
        font-size: 0.58rem;
    }

    .home-renewal-audience__card h3 {
        font-size: 0.92rem;
    }

    .home-renewal-audience__card p {
        font-size: 0.64rem;
    }

    .home-renewal-audience__card-body::after {
        width: 24px;
        height: 24px;
        font-size: 0.78rem;
    }
}


/* ==========================================================================
   Phase 15B: Trust Indicator Cards & Visit Program UX
   ========================================================================== */

/* 신뢰 영역 컨테이너 */
.trust-section {
    background-color: transparent;
    padding: 60px 0;
    text-align: center;
}

.trust-section .section-title {
    font-size: 28px;
    color: #4a3728; /* 브랜드 디자인 원칙: 브라운 */
    font-weight: 700;
    margin-bottom: 40px;
    letter-spacing: -0.5px;
    word-break: keep-all;
}

.trust-section .section-title span {
    color: #2d6a4f; /* 브랜드 디자인 원칙: 작은 초록 포인트 */
}

/* 4대 신뢰 지표 그리드 */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.trust-card {
    background: #ffffff;
    border: 1px solid #eaddca;
    border-radius: 12px;
    padding: 35px 20px;
    box-shadow: 0 4px 6px rgba(74, 55, 40, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trust-card:hover {
    transform: translateY(-4px); /* 과도하지 않은 깔끔한 호버 효과 */
    box-shadow: 0 8px 15px rgba(74, 55, 40, 0.06);
}

/* 숫자 지표 3초 인지 유도 */
.trust-card .metric {
    font-size: 42px;
    font-weight: 800;
    color: #2d6a4f; /* 초록 포인트로 핵심 수치 부각 */
    line-height: 1.2;
    margin-bottom: 12px;
}

.trust-card .label {
    font-size: 18px;
    font-weight: 700;
    color: #4a3728;
    margin-bottom: 10px;
}

.trust-card .description {
    font-size: 14px;
    color: #7a6655;
    line-height: 1.6;
    word-break: keep-all;
    margin: 0;
}

/* 방문 체험 단체 전용 상단 브릿지 배너 */
.visit-bridge-banner {
    background-color: #f4f1ea;
    border-left: 4px solid #2d6a4f;
    padding: 25px;
    border-radius: 4px 12px 12px 4px;
    margin-bottom: 35px;
    text-align: left;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.visit-bridge-banner h3 {
    font-size: 22px;
    color: #4a3728;
    margin-top: 0;
    margin-bottom: 12px;
    font-weight: 700;
}

.visit-action-group {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.btn-visit-cta {
    display: inline-block;
    padding: 12px 28px;
    background-color: #2d6a4f;
    color: #ffffff;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    font-size: 15px;
    transition: background-color 0.2s;
}

.btn-visit-cta:hover {
    background-color: #1b4332;
    color: #ffffff;
}

.btn-visit-secondary {
    display: inline-block;
    padding: 12px 24px;
    background-color: transparent;
    color: #4a3728;
    border: 1px solid #eaddca;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    font-size: 15px;
    background-color: #ffffff;
    transition: background-color 0.2s;
}

.btn-visit-secondary:hover {
    background-color: #fcfbf9;
    color: #4a3728;
}

/* 모바일 및 태블릿 반응형 뷰포트 최적화 */
@media (max-width: 991px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .trust-section {
        padding: 38px 12px;
    }

    .trust-section .section-title {
        margin-bottom: 24px;
        font-size: 2rem;
        line-height: 1.25;
    }

    .trust-card {
        padding: 18px 10px;
        border-radius: 8px;
    }

    .trust-card .metric {
        margin-bottom: 8px;
        font-size: 1.94rem;
        line-height: 1.36;
        word-break: keep-all;
    }

    .trust-card .label {
        margin-bottom: 8px;
        font-size: 0.92rem;
        line-height: 1.25;
        word-break: keep-all;
    }

    .trust-card .metric,
    .trust-card .label,
    .trust-card .description {
        max-width: 100%;
    }

    .trust-card .description {
        font-size: 0.72rem;
        line-height: 1.42;
    }

    .visit-action-group {
        flex-direction: column;
        gap: 8px;
    }
    .btn-visit-cta, .btn-visit-secondary {
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 360px) {
    .trust-card {
        padding: 16px 8px;
    }

    .trust-card .metric {
        font-size: 1.55rem;
    }

    .trust-card .label {
        font-size: 0.82rem;
    }

    .trust-card .description {
        font-size: 0.66rem;
    }
}