@charset "utf-8";

.ctt_seoul_directions {
    --wons-directions-navy: var(--we-color-primary-strong, #262522);
    --wons-directions-gold: var(--we-color-accent, #c6a24a);
    --wons-directions-ivory: var(--we-color-soft, #f6efe4);
    --wons-directions-bluegray: var(--we-color-surface-secondary, #f6efe4);
    --wons-directions-line: rgba(var(--we-color-primary-rgb), 0.14);
    background: var(--we-color-surface, #fbf7f0);
}

.ctt_seoul_directions .wons-directions-hero {
    min-height: var(--wons-hero-min-height, clamp(460px, 66vh, 720px));
    color: #fff;
    background:
        radial-gradient(circle at 78% 30%, rgba(198, 162, 74, .22), transparent 28%),
        linear-gradient(115deg, rgba(var(--we-color-primary-strong-rgb), var(--we-block-overlay, .78)), rgba(var(--we-color-primary-rgb), var(--we-block-overlay, .78)) 62%, rgba(var(--we-color-primary-rgb), .56)),
        var(--we-block-image) var(--we-block-motion-position, var(--we-block-position, center center)) / cover no-repeat,
        var(--wons-directions-navy);
}

.ctt_seoul_directions .wons-directions-hero .we-eyebrow { color: #e5c66f; }
.ctt_seoul_directions .wons-directions-hero .we-hero__description { color: rgba(255, 255, 255, .76); }
.ctt_seoul_directions .wons-directions-editorContent { padding: clamp(56px, 7vw, 92px) 0; background: var(--wons-directions-ivory); }

.wons-directions-shell {
    width: min(1120px, calc(100% - 48px));
    margin-inline: auto;
}

.we-block--directions-seoul {
    padding-top: clamp(64px, 7vw, 96px);
    padding-bottom: 0;
    background: var(--we-color-surface, #fbf7f0);
}
.we-block--directions-seoul > .wons-directions-shell { padding-bottom: clamp(56px, 7vw, 96px); }
.wons-directions-eyebrow {
    margin: 0 0 14px;
    color: #806515;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}

.wons-directions-cta h2 {
    margin: 0;
    color: var(--wons-directions-navy);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -.05em;
}
.wons-directions-location {
    display: grid;
    grid-template-columns: minmax(0, 1.48fr) minmax(330px, .72fr);
    overflow: hidden;
    border: 1px solid var(--wons-directions-line);
    border-radius: 28px;
    background: var(--we-color-surface, #fbf7f0);
    box-shadow: 0 30px 80px rgba(var(--we-color-primary-rgb), .12);
}
.ctt_seoul_directions.has-directions-motion .wons-directions-cta .wons-directions-shell {
    opacity: 0;
    transform: translateY(28px);
}
.ctt_seoul_directions.has-directions-motion .wons-directions-cta .wons-directions-shell {
    transition: opacity .68s ease var(--wons-directions-delay, 0ms), transform .88s cubic-bezier(.22, 1, .36, 1) var(--wons-directions-delay, 0ms);
}
.ctt_seoul_directions.has-directions-motion .wons-directions-cta .wons-directions-shell.is-directions-visible {
    opacity: 1;
    transform: none;
}
.ctt_seoul_directions.has-directions-motion .wons-directions-location .wons-directions-mapStage {
    opacity: 0;
    clip-path: inset(0 11% 0 0);
    transition: opacity .55s ease, clip-path 1.05s cubic-bezier(.22, 1, .36, 1);
}
.ctt_seoul_directions.has-directions-motion .wons-directions-location .wons-directions-contact {
    opacity: 0;
    transform: translateX(38px);
    transition: opacity .65s ease .18s, transform .9s cubic-bezier(.22, 1, .36, 1) .18s;
}
.ctt_seoul_directions.has-directions-motion .wons-directions-location.is-directions-visible .wons-directions-mapStage {
    opacity: 1;
    clip-path: inset(0);
}
.ctt_seoul_directions.has-directions-motion .wons-directions-location.is-directions-visible .wons-directions-contact {
    opacity: 1;
    transform: none;
}

.wons-directions-mapStage { position: relative; min-height: 570px; overflow: hidden; background: var(--wons-directions-bluegray); }
.wons-directions-map { position: absolute; inset: 0; }
.wons-directions-mapFallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 40px;
    color: var(--wons-directions-navy);
    background: linear-gradient(145deg, #e8eef2, var(--wons-directions-bluegray));
    text-align: center;
    transition: opacity .25s ease, visibility .25s ease;
}
.wons-directions-mapFallback img { width: 74px; height: 74px; margin-bottom: 10px; object-fit: contain; }
.wons-directions-mapFallback strong { font-size: 20px; }
.wons-directions-mapFallback span { color: #606b76; font-size: 14px; line-height: 1.6; }
.wons-directions-mapStage.is-map-ready .wons-directions-mapFallback { opacity: 0; visibility: hidden; pointer-events: none; }

.wons-directions-contact { position: relative; padding: clamp(34px, 4vw, 54px); color: #fff; background: var(--wons-directions-navy); }
.wons-directions-contact::before {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--wons-directions-gold), var(--wons-directions-bluegray));
    content: "";
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .9s cubic-bezier(.22, 1, .36, 1) .42s;
}
.wons-directions-location.is-directions-visible .wons-directions-contact::before,
.is-directions-motion-static .wons-directions-contact::before { transform: scaleY(1); }
.wons-directions-contact h3 { margin: 0; font-size: clamp(28px, 3vw, 38px); letter-spacing: -.04em; }
.wons-directions-contact__building { margin: 10px 0 0; color: rgba(255, 255, 255, .68); font-size: 14px; }
.wons-directions-contact dl { margin: 38px 0 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.wons-directions-contact dl > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.wons-directions-contact dt { color: rgba(255, 255, 255, .56); font-size: 12px; font-weight: 700; }
.wons-directions-contact dd { margin: 0; font-size: 14px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }
.wons-directions-contact dd a { color: inherit; text-decoration: none; }
.wons-directions-contact__actions,
.wons-directions-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wons-directions-contact__actions { margin-top: 32px; }
.wons-directions-contact__actions a,
.wons-directions-cta__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 19px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.wons-directions-contact__actions a.is-primary { border-color: var(--wons-directions-gold); color: var(--wons-directions-navy); background: var(--wons-directions-gold); }
.wons-directions-contact__actions a:hover,
.wons-directions-contact__actions a:focus-visible,
.wons-directions-cta__actions a:hover,
.wons-directions-cta__actions a:focus-visible { transform: translateY(-2px); }

.wons-directions-cta { padding: clamp(72px, 9vw, 120px) 0; color: #fff; background: var(--wons-directions-navy); }
.wons-directions-cta .wons-directions-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 60px; }
.wons-directions-cta .wons-directions-eyebrow { color: #e5c66f; }
.wons-directions-cta h2 { color: #fff; font-size: clamp(34px, 4vw, 54px); }
.wons-directions-cta h2 + p { margin: 18px 0 0; color: rgba(255, 255, 255, .67); font-size: 16px; }
.wons-directions-cta__actions { justify-content: flex-end; }
.wons-directions-cta__actions a { min-height: 50px; padding-inline: 22px; }
.wons-directions-cta__actions a.is-primary { border-color: var(--wons-directions-gold); color: var(--wons-directions-navy); background: var(--wons-directions-gold); }

.wons-directions-mapStage .wons-temple-card {
    position: relative;
    width: min(340px, calc(100vw - 42px));
    overflow: hidden;
    border-radius: 18px;
    background: var(--we-color-surface, #fbf7f0);
    box-shadow: 0 20px 50px rgba(22, 35, 52, .28);
}
.wons-directions-mapStage .wons-temple-card__close { position: absolute; z-index: 2; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #fff; background: rgba(var(--we-color-primary-rgb), .88); cursor: pointer; }
.wons-directions-mapStage .wons-temple-card__visual { display: none; }
.wons-directions-mapStage .wons-temple-card__body { padding: 24px; }
.wons-directions-mapStage .wons-temple-card__region { color: #806515; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.wons-directions-mapStage .wons-temple-card h3 { margin: 8px 0 16px; color: var(--wons-directions-navy); font-size: 22px; }
.wons-directions-mapStage .wons-temple-card__meta { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; margin: 8px 0; color: #5c6268; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.wons-directions-mapStage .wons-temple-card__meta-label { color: #858b90; font-weight: 700; }
.wons-directions-mapStage .wons-temple-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wons-directions-mapStage .wons-temple-card__action { padding: 9px 13px; border-radius: 999px; color: var(--wons-directions-navy); background: #eef2f5; font-size: 12px; font-weight: 800; text-decoration: none; }
.wons-directions-mapStage .wons-temple-card__action.is-primary { color: #fff; background: var(--wons-directions-navy); }

@media (max-width: 900px) {
    .wons-directions-location { grid-template-columns: 1fr; }
    .wons-directions-mapStage { min-height: 470px; }
    .wons-directions-cta .wons-directions-shell { grid-template-columns: 1fr; gap: 34px; }
    .wons-directions-cta__actions { justify-content: flex-start; }
    .ctt_seoul_directions.has-directions-motion .wons-directions-location .wons-directions-contact { transform: translateY(28px); }
    .ctt_seoul_directions.has-directions-motion .wons-directions-location.is-directions-visible .wons-directions-contact { transform: none; }
    .wons-directions-contact::before {
        right: 0;
        bottom: auto;
        width: auto;
        height: 3px;
        transform: scaleX(0);
        transform-origin: left;
    }
    .wons-directions-location.is-directions-visible .wons-directions-contact::before,
    .is-directions-motion-static .wons-directions-contact::before { transform: scaleX(1); }
}

@media (max-width: 640px) {
    .ctt_seoul_directions .wons-directions-hero {
        background:
            linear-gradient(115deg, rgba(var(--we-color-primary-strong-rgb), var(--we-block-overlay, .8)), rgba(var(--we-color-primary-rgb), var(--we-block-overlay, .8))),
            var(--we-block-mobile-image, var(--we-block-image)) var(--we-block-motion-position, var(--we-block-position, center center)) / cover no-repeat,
            var(--wons-directions-navy);
    }
    .wons-directions-shell { width: min(100% - 32px, 1120px); }
    .we-block--directions-seoul { padding-top: 64px; }
    .wons-directions-location { border-radius: 18px; }
    .wons-directions-mapStage { min-height: 380px; }
    .wons-directions-contact { padding: 30px 24px 34px; }
    .wons-directions-contact dl > div { grid-template-columns: 52px minmax(0, 1fr); }
    .wons-directions-contact__actions a { flex: 1 1 130px; }
    .wons-directions-cta { padding-block: 56px; }
    .wons-directions-cta__actions { display: grid; grid-template-columns: 1fr; }
    .wons-directions-cta__actions a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ctt_seoul_directions .wons-directions-mapStage,
    .ctt_seoul_directions .wons-directions-contact,
    .ctt_seoul_directions .wons-directions-contact::before,
    .ctt_seoul_directions .wons-directions-cta .wons-directions-shell,
    .wons-directions-mapFallback,
    .wons-directions-contact__actions a,
    .wons-directions-cta__actions a { transition: none; }
}