@charset "UTF-8";

/* ============================================================
   랜딩 페이지
   PC 수치는 1920 시안(px) 그대로 calc(N * var(--u))
   모바일(767px 이하)은 750px 기준 수치
   ============================================================ */

.landing {
    overflow-x: hidden;
}

.landing main {
    overflow: hidden;
}

/* 스크롤 등장 효과 (JS 로드 시에만) */
.js .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s ease, transform .8s ease;
}

.js .reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------------
   공통 섹션 헤드: 곡선 영문 + 스티커 + 타이틀 + 서브카피
   ------------------------------------------------------------ */
.sec {
    position: relative;
}

.sec-head {
    position: relative;
    padding: 0 20px;
    text-align: center;
}

.sec-head__deco {
    position: relative;
    height: calc(208 * var(--u));
}

.sec-head__arc,
.sec-head__icon {
    position: absolute;
    left: 50%;
    height: auto;
    transform: translateX(-50%);
}

.sec-head__arc {
    top: 0;
}

.sec-title {
    width: calc(1072 * var(--u));
    max-width: 100%;
    margin: 0 auto;
    padding-top: calc(21 * var(--u));
    border-top: 1px solid rgba(51, 51, 51, .3);
    border-bottom: 1px solid rgba(51, 51, 51, .3);
    font-family: var(--f-display);
    font-size: calc(100 * var(--u));
    font-weight: 700;
    line-height: 1.5;
    color: var(--c-text);
    white-space: nowrap;
}

.sec-sub {
    margin-top: calc(34 * var(--u));
    font-size: calc(60 * var(--u));
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--c-text);
}

/* 안내 띠 (주황) */
.notice-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(29 * var(--u));
    width: calc(1186 * var(--u));
    max-width: calc(100% - 40px);
    min-height: calc(110 * var(--u));
    margin: calc(66 * var(--u)) auto 0;
    padding: calc(20 * var(--u)) calc(40 * var(--u));
    border-radius: calc(30 * var(--u));
    background: var(--c-orange);
    font-size: max(14px, calc(35 * var(--u)));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.04em;
    color: #fff;
}

.ico-mark {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: calc(38 * var(--u));
    height: calc(38 * var(--u));
    min-width: 18px;
    min-height: 18px;
    border-radius: 50%;
    background: #fff;
    font-size: max(11px, calc(25 * var(--u)));
    font-weight: 700;
    line-height: 1;
    color: var(--c-orange);
}

/* 불릿 안내 박스 */
.info-box {
    width: calc(1193 * var(--u));
    max-width: calc(100% - 40px);
    margin: calc(66 * var(--u)) auto 0;
    padding: calc(82 * var(--u)) calc(77 * var(--u)) calc(92 * var(--u)) calc(70 * var(--u));
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: calc(30 * var(--u));
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: calc(30 * var(--u));
}

.info-list li {
    display: flex;
    align-items: center;
    gap: calc(63 * var(--u));
}

.info-list li::before {
    content: '';
    flex: none;
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    min-width: 5px;
    min-height: 5px;
    border-radius: 50%;
    background: #505050;
}

.info-list p {
    flex: 1;
    padding: calc(30 * var(--u));
    border-radius: calc(20 * var(--u));
    background: #F5F5F5;
    font-size: max(14px, calc(40 * var(--u)));
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--c-text);
    text-wrap: pretty;
}

.info-list em {
    color: var(--c-coral);
}

/* 사진 + 문구 카드 (사람과 이야기 / 시간을 걷다) */
.spots {
    display: flex;
    justify-content: center;
    gap: calc(52 * var(--u));
    padding: 0 20px;
}

.spot {
    --spot: var(--c-ocean);
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(484 * var(--u));
}

.spot--mint { --spot: var(--c-mint); --spot-accent: var(--c-teal); }
.spot--ocean { --spot: var(--c-ocean); }
.spot--purple { --spot: var(--c-purple); }
.spot--orange { --spot: var(--c-orange); }
.spot--amber { --spot: var(--c-amber); }

.spot__photo {
    height: calc(348 * var(--u));
    overflow: hidden;
    border: calc(5 * var(--u)) solid var(--spot);
    border-radius: calc(50 * var(--u));
    background: #fff;
}

.spot__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 사진(슬라이드)이 바뀌어도 늘 위에 고정 */
.spot__tag {
    position: absolute;
    z-index: 2;
    left: calc(31 * var(--u));
    top: calc(36 * var(--u));
    padding: calc(10 * var(--u)) calc(20 * var(--u));
    border-radius: 50px;
    background: var(--spot-accent, var(--spot));
    font-family: var(--f-display);
    font-size: max(12px, calc(30 * var(--u)));
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    white-space: nowrap;
}

/* 문구 줄 수가 달라도 같은 줄의 카드 높이를 맞춘다 */
.spot__text {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: calc(133 * var(--u));
    margin-top: calc(29 * var(--u));
    padding: calc(12 * var(--u)) calc(20 * var(--u));
    border: calc(5 * var(--u)) solid var(--spot);
    border-radius: calc(50 * var(--u));
    background: #fff;
    font-family: var(--f-display);
    font-size: max(12px, calc(30 * var(--u)));
    font-weight: 700;
    line-height: 1.5;
    color: var(--c-text);
    text-align: center;
}

.spot__text em {
    color: var(--spot-accent, var(--spot));
}

.pin {
    position: absolute;
    z-index: 3;
    width: calc(102 * var(--u));
    height: auto;
    pointer-events: none;
}

/* ------------------------------------------------------------
   사진 슬라이드 (.spot__photo 안, main.js Slider)
   JS가 없으면 첫 장만 보인다
   ------------------------------------------------------------ */
.slider {
    position: relative;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

/* 움직이는 사진이 태그·버튼 위로 올라오지 않도록 트랙 안에 가둔다 */
.slider__track {
    position: relative;
    height: 100%;
    isolation: isolate;
}

.slider__slide {
    position: absolute;
    inset: 0;
    visibility: hidden;
}

.slider__slide.is-active {
    visibility: visible;
}

.slider__slide img {
    -webkit-user-drag: none;
}

.slider__nav,
.slider__dots {
    display: none;
}

.js .slider__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: max(40px, calc(56 * var(--u)));
    height: max(40px, calc(56 * var(--u)));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    color: var(--spot);
    transform: translateY(-50%);
    transition: background-color .2s, color .2s, transform .2s;
}

.js .slider__nav svg {
    width: 58%;
    height: 58%;
    pointer-events: none;
}

/* 눌리는 영역을 버튼보다 조금 넓게 */
.js .slider__nav::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
}

.slider__nav--prev { left: max(10px, calc(18 * var(--u))); }
.slider__nav--next { right: max(10px, calc(18 * var(--u))); }

.js .slider__nav:hover {
    background: var(--spot);
    color: #fff;
}

.js .slider__nav:focus-visible,
.slider__dot:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--spot);
}

.js .slider__dots {
    position: absolute;
    left: 50%;
    bottom: max(10px, calc(18 * var(--u)));
    z-index: 2;
    display: flex;
    align-items: center;
    gap: max(4px, calc(6 * var(--u)));
    padding: max(4px, calc(6 * var(--u)));
    border-radius: 999px;
    background: rgba(0, 0, 0, .32);
    transform: translateX(-50%);
}

.slider__dot {
    display: grid;
    place-items: center;
    width: max(16px, calc(24 * var(--u)));
    height: max(16px, calc(24 * var(--u)));
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    transition: width .3s;
}

.slider__dot::before {
    content: '';
    width: max(7px, calc(10 * var(--u)));
    height: max(7px, calc(10 * var(--u)));
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    transition: width .3s, background-color .3s;
}

.slider__dot[aria-current="true"] {
    width: max(30px, calc(44 * var(--u)));
}

.slider__dot[aria-current="true"]::before {
    width: calc(100% - max(6px, calc(10 * var(--u))));
    background: #fff;
}

.pin--flip {
    transform: rotate(12.1deg) scaleX(-1);
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero {
    position: relative;
    height: calc(1257 * var(--u));
    background: #7CCBF2 url('../images/landing/hero-bg.jpg') center bottom / cover no-repeat;
}

.hero__logo {
    position: absolute;
    z-index: 2;
    left: calc(50 * var(--u));
    top: calc(7 * var(--u));
    width: calc(271 * var(--u));
}

.hero__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.hero__title {
    position: absolute;
    left: 50%;
    top: calc(76 * var(--u));
    width: calc(1279 * var(--u));
    transform: translateX(-50%);
}

.hero__title img {
    display: block;
    width: 100%;
    height: auto;
}

.hero__cta {
    position: absolute;
    left: 50%;
    top: calc(912 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(17 * var(--u));
    width: calc(421 * var(--u));
    height: calc(101 * var(--u));
    margin-left: calc(12.5 * var(--u));
    padding-left: calc(24 * var(--u));
    border: calc(5 * var(--u)) solid #fff;
    border-radius: 50px;
    background: var(--c-cta);
    font-family: var(--f-display);
    font-size: calc(40 * var(--u));
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    transform: translateX(-50%);
    transition: background-color .2s, transform .2s, box-shadow .2s;
}

.hero__cta svg {
    flex: none;
    width: calc(68 * var(--u));
    height: calc(68 * var(--u));
}

.hero__cta:hover {
    background: var(--c-blue);
    box-shadow: 0 12px 30px rgba(0, 60, 130, .3);
    transform: translateX(-50%) translateY(-3px);
}

/* ------------------------------------------------------------
   INTRO : 두 번의 섬 밥상을 만나는 하루
   ------------------------------------------------------------ */
.intro {
    padding: calc(112 * var(--u)) 0 calc(133 * var(--u));
    text-align: center;
}

/* 요트 왕복 강조 배지 */
.intro__yacht {
    display: inline-flex;
    align-items: center;
    gap: calc(12 * var(--u));
    margin-bottom: calc(28 * var(--u));
    padding: calc(12 * var(--u)) calc(36 * var(--u)) calc(12 * var(--u)) calc(24 * var(--u));
    border-radius: 999px;
    background: var(--c-cta);
    box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 100, 200, .25);
    font-family: var(--f-display);
    font-size: calc(34 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

.intro__yacht svg {
    flex: none;
    width: calc(46 * var(--u));
    height: calc(46 * var(--u));
}

.intro__yacht strong {
    color: #FFE38A;
}

.intro__eyebrow {
    font-family: var(--f-display);
    font-size: calc(40 * var(--u));
    font-weight: 500;
    line-height: 1.5;
    color: var(--c-orange);
}

.intro__title {
    margin-top: calc(21 * var(--u));
    font-family: var(--f-display);
    font-size: calc(100 * var(--u));
    font-weight: 700;
    line-height: 1.5;
    color: var(--c-ink);
}

.intro__title em {
    color: var(--c-blue);
}

.points {
    margin-top: calc(43 * var(--u));
}

.point {
    display: grid;
    grid-template-columns: calc(600 * var(--u)) calc(576 * var(--u));
    align-items: center;
    justify-content: center;
    column-gap: calc(55 * var(--u));
    text-align: left;
}

.point + .point {
    margin-top: calc(31 * var(--u));
}

.point__visual {
    position: relative;
    width: calc(600 * var(--u));
    height: calc(600 * var(--u));
}

.point__photo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.point__deco {
    position: absolute;
    height: auto;
    pointer-events: none;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background: #C3DEFD;
    pointer-events: none;
}

.bubble--lg {
    width: 20.667%;
    aspect-ratio: 1;
}

.bubble--sm {
    width: 4.667%;
    aspect-ratio: 1;
    background: rgba(195, 222, 253, .5);
}

.point--01 .bubble--lg { left: -10.333%; top: -6.167%; }
.point--01 .bubble--sm { left: 6.5%; top: -12.167%; }
.point--02 .bubble--lg { left: 77.333%; top: 4.333%; }
.point--02 .bubble--sm { left: 94.167%; top: -1.667%; }

.point__deco--seagull { left: 24.833%; top: 22.833%; width: 23.667%; z-index: 2; }
.point__deco--boat { left: -3.867%; top: 42.5%; width: 48.75%; z-index: 2; }
.point__deco--cloud { left: -33.583%; top: 70.45%; width: 92.967%; z-index: 3; }
.point__deco--sphere-l { left: 43.1%; top: 73.383%; width: 7.283%; z-index: 4; }
.point__deco--sphere-s { left: 53.5%; top: 78.75%; width: 4.5%; z-index: 4; }

.point__text {
    position: relative;
}

.point__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(247 * var(--u));
    height: calc(79 * var(--u));
    border-radius: 999px;
    background: var(--c-blue);
    font-family: var(--f-display);
    font-size: calc(36.75 * var(--u));
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}

.point__badge span {
    margin-right: .28em;
    color: rgba(255, 255, 255, .5);
}

.point--02 .point__badge {
    background: var(--c-sky);
}

.point__splash {
    position: absolute;
    left: calc(240 * var(--u));
    top: calc(-36 * var(--u));
    width: calc(48 * var(--u));
    height: auto;
    transform: scaleX(-1);
}

.point__sticker {
    position: absolute;
    left: calc(414 * var(--u));
    top: calc(-54 * var(--u));
    width: calc(201 * var(--u));
    height: auto;
    transform: rotate(-1.03deg);
}

.point__title {
    margin-top: calc(20 * var(--u));
    font-family: var(--f-display);
    font-size: calc(50 * var(--u));
    font-weight: 700;
    line-height: 1.5;
    color: var(--c-navy);
    white-space: nowrap;
}

.point--01 .point__title em { color: var(--c-blue); }
.point--02 .point__title em { color: var(--c-sky); }

.point__desc {
    margin-top: calc(21 * var(--u));
    font-size: max(14px, calc(36.75 * var(--u)));
    line-height: 1.5;
    color: var(--c-text);
}

.point__desc strong {
    font-weight: 700;
    color: var(--c-orange);
}

/* ------------------------------------------------------------
   ISLAND TWO MEALS : 섬두끼, 용호도를 맛보다
   ------------------------------------------------------------ */
.meals {
    padding: calc(146 * var(--u)) 0 calc(128 * var(--u));
    background: var(--c-cyan) url('../images/landing/meals-bg.jpg') center / cover no-repeat;
}

.meals::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #52C8E9 0%, rgba(82, 200, 233, .5) 100%);
}

.meals > * {
    position: relative;
}

.meals .sec-head__arc { width: calc(380 * var(--u)); }
.meals .sec-head__icon { top: calc(81 * var(--u)); width: calc(190 * var(--u)); margin-left: calc(17 * var(--u)); }

.meals .sec-title {
    border-color: #fff;
    color: #fff;
}

.meals .sec-title em {
    color: #124857;
}

.meals .sec-sub {
    font-weight: 400;
    color: #fff;
}

.meal-cards {
    display: flex;
    justify-content: center;
    gap: calc(50 * var(--u));
    margin-top: calc(66 * var(--u));
    padding: 0 20px;
}

.meal-card {
    position: relative;
    width: calc(584 * var(--u));
    padding: calc(45 * var(--u)) calc(41 * var(--u)) calc(47 * var(--u));
    border-radius: calc(20 * var(--u));
    background: #fff;
    box-shadow: 0 0 calc(50 * var(--u)) rgba(0, 0, 0, .25);
    text-align: center;
}

.meal-card + .meal-card {
    box-shadow: 0 0 calc(40 * var(--u)) rgba(0, 0, 0, .25);
}

.meal-card .pin {
    left: calc(20 * var(--u));
    top: calc(-34 * var(--u));
}

.meal-card__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 502 / 346;
    border-radius: calc(20 * var(--u));
    object-fit: cover;
}

.meal-card__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(16 * var(--u));
    width: calc(385 * var(--u));
    height: calc(87 * var(--u));
    margin: calc(41 * var(--u)) auto 0;
    border-radius: 50px;
    background: var(--c-ocean);
    font-family: var(--f-display);
    font-size: calc(50 * var(--u));
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}

.meal-card__label::before,
.meal-card__label::after {
    content: '';
    width: calc(6 * var(--u));
    height: calc(6 * var(--u));
    min-width: 3px;
    min-height: 3px;
    border-radius: 50%;
    background: #fff;
}

.meal-card--2 .meal-card__label {
    background: var(--c-teal);
}

.meal-card__desc {
    margin-top: calc(22 * var(--u));
    font-size: max(14px, calc(35 * var(--u)));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.04em;
    color: var(--c-text);
}

.meal-card__desc em { color: var(--c-ocean); }
.meal-card--2 .meal-card__desc em { color: var(--c-teal); }

.meals__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(13 * var(--u));
    margin-top: calc(98 * var(--u));
    padding: 0 20px;
    font-size: max(13px, calc(35 * var(--u)));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.04em;
    color: #fff;
}

.meals__note .ico-mark {
    color: var(--c-cyan);
}

/* ------------------------------------------------------------
   ISLAND TALK : 사람과 이야기를 만나다
   ------------------------------------------------------------ */
.talk {
    padding: calc(154 * var(--u)) 0 calc(150 * var(--u));
    background: #D8EFF5;
}

.talk .sec-head__arc { width: calc(252 * var(--u)); }
.talk .sec-head__icon { top: calc(50 * var(--u)); width: calc(258 * var(--u)); }
.talk .sec-title em { color: var(--c-ocean); }
.talk .spots { margin-top: calc(66 * var(--u)); }
.talk .spot--mint .pin { left: calc(-50 * var(--u)); top: calc(-70 * var(--u)); }
.talk .spot--purple .pin { left: calc(433 * var(--u)); top: calc(206 * var(--u)); }

/* ------------------------------------------------------------
   WALKING ON THE ISLAND : 용호도의 시간을 걷다
   ------------------------------------------------------------ */
.walk {
    padding: calc(145 * var(--u)) 0 calc(180 * var(--u));
    background: #FAF0ED url('../images/landing/walk-bg.jpg') center / cover no-repeat;
}

.walk::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #FAF0ED 40.38%, rgba(250, 240, 237, .8) 100%);
}

.walk > * {
    position: relative;
}

.walk .sec-head__arc { width: calc(461 * var(--u)); }
.walk .sec-head__icon { top: calc(65 * var(--u)); width: calc(180 * var(--u)); margin-left: calc(-24 * var(--u)); }
.walk .spots { margin-top: calc(99 * var(--u)); }
.walk .spot--orange .pin { left: calc(-50 * var(--u)); top: calc(-60 * var(--u)); }
.walk .spot--ocean .pin { left: calc(425 * var(--u)); top: calc(221 * var(--u)); }

/* ------------------------------------------------------------
   ONE DAY IN YONGHODO : 여행 일정 안내
   ------------------------------------------------------------ */
.schedule {
    padding: calc(153 * var(--u)) 0 calc(149 * var(--u));
    background: #fff;
}

.schedule .sec-head__arc { width: calc(440 * var(--u)); }
.schedule .sec-head__icon { top: calc(51 * var(--u)); width: calc(131 * var(--u)); }

.timeline {
    width: calc(1186 * var(--u));
    max-width: calc(100% - 40px);
    margin: calc(66 * var(--u)) auto 0;
    padding: calc(86 * var(--u)) calc(92 * var(--u)) calc(118 * var(--u));
    border-radius: calc(50 * var(--u));
    background: #FFF4E8;
}

.tl-item {
    position: relative;
    display: grid;
    grid-template-columns: calc(56 * var(--u)) minmax(0, 1fr);
    column-gap: calc(62 * var(--u));
}

.tl-item + .tl-item {
    margin-top: calc(50 * var(--u));
}

.tl-item__dot {
    display: grid;
    place-items: center;
    width: calc(56 * var(--u));
    height: calc(56 * var(--u));
    margin-top: calc(17 * var(--u));
    border-radius: 50%;
    background: #FDB099;
}

/* 요트 이동 구간 강조 */
.tl-item--yacht .tl-item__dot {
    background: var(--c-cta);
    box-shadow: 0 0 0 calc(9 * var(--u)) rgba(0, 100, 200, .14);
    color: #fff;
}

.tl-item__dot svg {
    width: 62%;
    height: 62%;
}

/* '요트 타고' 강조: 파란 알약 배지 */
.tl-item__title em {
    display: inline-block;
    margin-right: .12em;
    padding: .02em .42em .06em;
    border-radius: 999px;
    background: var(--c-cta);
    line-height: 1.4;
    color: #fff;
}

.tl-item__body {
    min-width: 0;
}

/* 구분선 (마지막 일정 제외) */
.tl-item:not(:last-child) .tl-item__body::after {
    content: '';
    display: block;
    width: calc(765 * var(--u));
    max-width: 100%;
    height: 1px;
    margin: calc(40 * var(--u)) 0 0 calc(5 * var(--u));
    background: rgba(0, 0, 0, .3);
}

.tl-item__time,
.tl-item__title {
    font-family: var(--f-display);
    font-size: calc(60 * var(--u));
    font-weight: 700;
    line-height: 1.5;
}

.tl-item__time {
    color: var(--c-coral);
}

.tl-item__title {
    color: var(--c-text);
}

.tl-item__desc {
    margin-top: calc(11 * var(--u));
    font-size: max(14px, calc(40 * var(--u)));
    line-height: 1.5;
    color: var(--c-text);
}

/* 다음 일정으로 이어지는 화살표 */
.tl-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: calc(26 * var(--u));
    top: calc(104 * var(--u));
    bottom: calc(-2 * var(--u));
    width: calc(4 * var(--u));
    min-width: 2px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(247, 183, 163, 0) 0%, #F2B6A3 100%);
}

.tl-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(14 * var(--u));
    bottom: calc(-27 * var(--u));
    border-left: calc(14 * var(--u)) solid transparent;
    border-right: calc(14 * var(--u)) solid transparent;
    border-top: calc(25 * var(--u)) solid #F9B8A5;
}

/* 선택 옵션: 선셋 요트 */
.sunset {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(40 * var(--u));
    width: calc(1186 * var(--u));
    max-width: calc(100% - 40px);
    margin: calc(40 * var(--u)) auto 0;
    padding: calc(56 * var(--u)) calc(72 * var(--u)) calc(60 * var(--u));
    overflow: hidden;
    border-radius: calc(50 * var(--u));
    background: var(--c-navy);
    color: #fff;
}

/* 수평선 너머로 지는 해 */
.sunset::before {
    content: '';
    position: absolute;
    right: calc(90 * var(--u));
    bottom: calc(-170 * var(--u));
    width: calc(260 * var(--u));
    height: calc(260 * var(--u));
    border-radius: 50%;
    background: var(--c-orange);
    pointer-events: none;
}

.sunset > * {
    position: relative;
}

.sunset__body {
    flex: 1;
    min-width: 0;
}

.sunset__badge {
    display: inline-block;
    padding: calc(4 * var(--u)) calc(20 * var(--u));
    border: 1.5px solid rgba(255, 255, 255, .75);
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: max(12px, calc(24 * var(--u)));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .12em;
}

.sunset__title {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--u));
    margin-top: calc(14 * var(--u));
    font-family: var(--f-display);
    font-size: calc(60 * var(--u));
    font-weight: 700;
    line-height: 1.3;
}

.sunset__title svg {
    flex: none;
    width: calc(58 * var(--u));
    height: calc(58 * var(--u));
}

.sunset__desc {
    margin-top: calc(14 * var(--u));
    font-size: max(14px, calc(32 * var(--u)));
    line-height: 1.55;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

.sunset__desc strong {
    font-weight: 800;
    color: var(--c-amber);
}

.sunset__cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: max(48px, calc(92 * var(--u)));
    padding: 0 max(24px, calc(48 * var(--u)));
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
    font-family: var(--f-display);
    font-size: max(16px, calc(36 * var(--u)));
    font-weight: 700;
    color: var(--c-coral);
    transition: transform .2s, box-shadow .2s;
}

.sunset__cta:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------
   BEFORE YOU BOOK : 출발 기준 및 기타 안내
   ------------------------------------------------------------ */
.guide {
    padding: calc(159 * var(--u)) 0 calc(222 * var(--u));
    background: #F8F8F8;
}

.guide .sec-head__arc { width: calc(372 * var(--u)); }
.guide .sec-head__icon { top: calc(51 * var(--u)); width: calc(129 * var(--u)); margin-left: calc(-4.5 * var(--u)); }

/* ------------------------------------------------------------
   CANCELLATION & REFUND : 참가자 취소 및 환불 규정
   ------------------------------------------------------------ */
.refund {
    padding: calc(159 * var(--u)) 0 calc(150 * var(--u));
    background: #F6F0EE;
}

.refund .sec-head__arc { width: calc(465 * var(--u)); }
.refund .sec-head__icon { top: calc(51 * var(--u)); width: calc(142 * var(--u)); }

.refund-table {
    width: calc(1166 * var(--u));
    max-width: calc(100% - 40px);
    margin: calc(47 * var(--u)) auto 0;
}

.refund-card {
    border-radius: calc(20 * var(--u));
    background: #fff;
    box-shadow: 0 0 calc(40 * var(--u)) rgba(0, 0, 0, .1);
    text-align: center;
}

.refund-card--main {
    padding: calc(52 * var(--u)) calc(20 * var(--u)) calc(44 * var(--u));
}

.refund-card__when {
    font-family: var(--f-display);
    font-size: calc(40 * var(--u));
    font-weight: 700;
    line-height: 1.29;
    color: var(--c-sub);
}

.refund-card__when strong {
    margin-left: .15em;
    font-size: calc(60 * var(--u));
    font-weight: 700;
    color: var(--c-coral);
}

.refund-card__what {
    margin-top: calc(18 * var(--u));
    font-size: max(14px, calc(40 * var(--u)));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: var(--c-text);
}

/* 환불 결과(전액·70%·50%·불가) 강조 배지 */
.refund-card__what em {
    display: inline-block;
    padding: .06em .8em .1em;
    border-radius: 999px;
    background: var(--c-coral);
    font-size: 1.15em;
    font-style: normal;
    font-weight: 800;
    line-height: 1.45;
    color: #fff;
    white-space: nowrap;
}

.refund-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(16 * var(--u));
    margin-top: calc(16 * var(--u));
}

.refund-grid .refund-card {
    padding: calc(44 * var(--u)) calc(10 * var(--u)) calc(48 * var(--u));
    border-radius: calc(30 * var(--u));
}

.refund-grid .refund-card__when {
    font-size: max(12px, calc(28 * var(--u)));
}

.refund-grid .refund-card__when strong {
    display: block;
    margin: calc(4 * var(--u)) 0 0;
    font-size: max(15px, calc(48 * var(--u)));
}

.refund-grid .refund-card__what {
    margin-top: calc(20 * var(--u));
    font-size: max(13px, calc(32 * var(--u)));
}

.refund-card--none {
    margin-top: calc(17 * var(--u));
    background: var(--c-coral);
}

/* 좁은 화면에서도 '당일 불참' 같은 말이 갈라지지 않게 구절 단위로 줄바꿈 */
.refund-card__when strong span {
    display: inline-block;
}

.refund-card--none .refund-card__when,
.refund-card--none .refund-card__when strong,
.refund-card--none .refund-card__what {
    color: #fff;
}

.refund-card--none .refund-card__what em {
    background: #fff;
    color: var(--c-coral);
}

.refund .info-box {
    margin-top: calc(35 * var(--u));
    padding: calc(82 * var(--u)) calc(72 * var(--u)) calc(77 * var(--u)) calc(75 * var(--u));
}

/* ------------------------------------------------------------
   APPLY : 여행 신청하기 (신규)
   ------------------------------------------------------------ */
.apply-sec {
    padding: calc(159 * var(--u)) 0 calc(180 * var(--u));
    background: #E4F3F8;
}

.apply-sec .sec-head__arc { width: calc(430 * var(--u)); }
.apply-sec .sec-head__icon { top: calc(58 * var(--u)); width: calc(124 * var(--u)); }
.apply-sec .sec-title em { color: var(--c-blue); }

.apply-sec__card {
    width: calc(1186 * var(--u));
    max-width: calc(100% - 40px);
    margin: calc(66 * var(--u)) auto 0;
    padding: calc(80 * var(--u)) calc(80 * var(--u)) calc(90 * var(--u));
    border-radius: calc(40 * var(--u));
    background: #fff;
    box-shadow: 0 0 calc(40 * var(--u)) rgba(17, 52, 93, .1);
}

.apply-sec__check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    margin-top: calc(50 * var(--u));
    font-size: max(15px, calc(26 * var(--u)));
    color: var(--c-navy);
}

.apply-sec__check a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: calc(12 * var(--u)) calc(30 * var(--u));
    min-height: 44px;
    border: 2px solid var(--c-cta);
    border-radius: 999px;
    background: #fff;
    font-family: var(--f-display);
    font-weight: 700;
    color: var(--c-cta);
    transition: background-color .2s, color .2s;
}

.apply-sec__check a:hover {
    background: var(--c-cta);
    color: #fff;
}

/* ------------------------------------------------------------
   플로팅 신청 버튼
   ------------------------------------------------------------ */
.float-cta {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity .3s, transform .3s, visibility .3s;
}

.float-cta.is-show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.float-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 150px;
    min-height: 56px;
    padding: 0 26px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: var(--c-cta);
    box-shadow: 0 10px 28px rgba(0, 60, 130, .3);
    font-family: var(--f-display);
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    transition: background-color .2s, transform .2s;
}

.float-cta a:hover {
    background: var(--c-blue);
    transform: translateY(-2px);
}

.float-cta .float-cta__sub {
    border-color: var(--c-cta);
    background: #fff;
    color: var(--c-cta);
    box-shadow: 0 10px 28px rgba(0, 60, 130, .15);
}

.float-cta .float-cta__sub:hover {
    background: #EEF6FF;
}

/* ============================================================
   모바일 (750px 기준 수치)
   ============================================================ */
@media (max-width: 767px) {
    .sec-head__deco {
        height: calc(150 * var(--u));
    }

    .sec-title {
        width: 100%;
        padding: calc(14 * var(--u)) 0 calc(8 * var(--u));
        font-size: calc(54 * var(--u));
        white-space: normal;
    }

    .sec-sub {
        margin-top: calc(26 * var(--u));
        font-size: calc(30 * var(--u));
        font-weight: 400;
    }

    .notice-bar {
        width: calc(670 * var(--u));
        max-width: none;
        margin-top: calc(40 * var(--u));
        gap: calc(14 * var(--u));
        padding: calc(24 * var(--u)) calc(30 * var(--u));
        border-radius: calc(24 * var(--u));
        font-size: calc(26 * var(--u));
        text-align: left;
    }

    .ico-mark {
        width: calc(34 * var(--u));
        height: calc(34 * var(--u));
        font-size: calc(22 * var(--u));
    }

    .info-box,
    .refund .info-box {
        width: calc(670 * var(--u));
        max-width: none;
        margin-top: calc(48 * var(--u));
        padding: calc(40 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u)) calc(26 * var(--u));
        border-radius: calc(30 * var(--u));
    }

    .info-list {
        gap: calc(18 * var(--u));
    }

    .info-list li {
        gap: calc(18 * var(--u));
    }

    .info-list li::before {
        width: calc(10 * var(--u));
        height: calc(10 * var(--u));
    }

    .info-list p {
        padding: calc(24 * var(--u)) calc(26 * var(--u));
        border-radius: calc(18 * var(--u));
        font-size: calc(27 * var(--u));
    }

    .spots {
        flex-direction: column;
        align-items: center;
        gap: calc(70 * var(--u));
        padding: 0;
    }

    .spot {
        width: calc(600 * var(--u));
    }

    .spot__photo {
        height: calc(431 * var(--u));
        border-width: calc(5 * var(--u));
        border-radius: calc(48 * var(--u));
    }

    .spot__tag {
        left: calc(30 * var(--u));
        top: calc(30 * var(--u));
        padding: calc(8 * var(--u)) calc(22 * var(--u));
        font-size: calc(28 * var(--u));
    }

    .spot__text {
        min-height: calc(120 * var(--u));
        margin-top: calc(22 * var(--u));
        border-width: calc(5 * var(--u));
        border-radius: calc(48 * var(--u));
        font-size: calc(29 * var(--u));
    }

    .pin {
        width: calc(96 * var(--u));
    }

    /* hero */
    .hero {
        height: calc(1160 * var(--u));
    }

    .hero__logo {
        left: calc(28 * var(--u));
        top: calc(20 * var(--u));
        width: calc(210 * var(--u));
    }

    .hero__title {
        top: calc(190 * var(--u));
        width: calc(760 * var(--u));
    }

    .hero__cta {
        top: calc(720 * var(--u));
        gap: calc(14 * var(--u));
        width: calc(420 * var(--u));
        height: calc(100 * var(--u));
        margin-left: 0;
        padding-left: calc(26 * var(--u));
        border-width: calc(5 * var(--u));
        font-size: calc(38 * var(--u));
    }

    .hero__cta svg {
        width: calc(60 * var(--u));
        height: calc(60 * var(--u));
    }

    /* intro */
    .intro {
        padding: calc(40 * var(--u)) 0 calc(130 * var(--u));
    }

    .intro__yacht {
        gap: calc(10 * var(--u));
        margin-bottom: calc(24 * var(--u));
        padding: calc(12 * var(--u)) calc(30 * var(--u)) calc(12 * var(--u)) calc(22 * var(--u));
        font-size: calc(28 * var(--u));
    }

    .intro__yacht svg {
        width: calc(40 * var(--u));
        height: calc(40 * var(--u));
    }

    .intro__eyebrow {
        font-size: calc(30 * var(--u));
    }

    .intro__title {
        margin-top: calc(10 * var(--u));
        font-size: calc(66 * var(--u));
        line-height: 1.4;
    }

    .points {
        margin-top: calc(90 * var(--u));
    }

    .point {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: calc(56 * var(--u));
        text-align: center;
    }

    .point + .point {
        margin-top: calc(120 * var(--u));
    }

    .point__visual {
        width: calc(520 * var(--u));
        height: calc(520 * var(--u));
    }

    .point__badge {
        width: calc(200 * var(--u));
        height: calc(62 * var(--u));
        font-size: calc(29 * var(--u));
    }

    .point__splash {
        left: calc(50% + 86 * var(--u));
        top: calc(-30 * var(--u));
        width: calc(40 * var(--u));
    }

    .point__sticker {
        left: calc(50% + 120 * var(--u));
        top: calc(-60 * var(--u));
        width: calc(170 * var(--u));
    }

    .point--02 .point__splash {
        display: none;
    }

    .point__title {
        margin-top: calc(18 * var(--u));
        font-size: calc(44 * var(--u));
    }

    .point__desc {
        margin-top: calc(16 * var(--u));
        font-size: calc(29 * var(--u));
    }

    /* meals */
    .meals {
        padding: calc(110 * var(--u)) 0 calc(110 * var(--u));
    }

    .meals .sec-head__arc { width: calc(300 * var(--u)); }
    .meals .sec-head__icon { top: calc(62 * var(--u)); width: calc(150 * var(--u)); margin-left: calc(12 * var(--u)); }

    .meal-cards {
        flex-direction: column;
        align-items: center;
        gap: calc(70 * var(--u));
        margin-top: calc(56 * var(--u));
        padding: 0;
    }

    .meal-card {
        width: calc(600 * var(--u));
        padding: calc(40 * var(--u)) calc(36 * var(--u)) calc(44 * var(--u));
        border-radius: calc(24 * var(--u));
    }

    .meal-card .pin {
        left: calc(12 * var(--u));
        top: calc(-40 * var(--u));
    }

    .meal-card__label {
        gap: calc(14 * var(--u));
        width: calc(340 * var(--u));
        height: calc(76 * var(--u));
        margin-top: calc(36 * var(--u));
        font-size: calc(40 * var(--u));
    }

    .meal-card__desc {
        margin-top: calc(18 * var(--u));
        font-size: calc(30 * var(--u));
    }

    .meals__note {
        margin-top: calc(60 * var(--u));
        font-size: calc(24 * var(--u));
    }

    /* talk / walk */
    .talk {
        padding: calc(110 * var(--u)) 0 calc(120 * var(--u));
    }

    .talk .sec-head__arc { width: calc(220 * var(--u)); }
    .talk .sec-head__icon { top: calc(38 * var(--u)); width: calc(210 * var(--u)); }
    .talk .spots { margin-top: calc(70 * var(--u)); }
    .talk .spot--mint .pin { left: calc(-30 * var(--u)); top: calc(-46 * var(--u)); }
    .talk .spot--purple .pin { left: auto; right: calc(-34 * var(--u)); top: calc(250 * var(--u)); }

    .walk {
        padding: calc(110 * var(--u)) 0 calc(130 * var(--u));
    }

    .walk .sec-head__arc { width: calc(350 * var(--u)); }
    .walk .sec-head__icon { top: calc(48 * var(--u)); width: calc(150 * var(--u)); margin-left: calc(-18 * var(--u)); }
    .walk .spots { margin-top: calc(70 * var(--u)); }
    .walk .spot--orange .pin { left: calc(-30 * var(--u)); top: calc(-46 * var(--u)); }
    .walk .spot--ocean .pin { left: auto; right: calc(-34 * var(--u)); top: calc(250 * var(--u)); }

    /* schedule */
    .schedule {
        padding: calc(110 * var(--u)) 0 calc(110 * var(--u));
    }

    .schedule .sec-head__arc { width: calc(340 * var(--u)); }
    .schedule .sec-head__icon { top: calc(38 * var(--u)); width: calc(110 * var(--u)); }

    .timeline {
        width: calc(670 * var(--u));
        max-width: none;
        margin-top: calc(48 * var(--u));
        padding: calc(56 * var(--u)) calc(36 * var(--u)) calc(64 * var(--u));
        border-radius: calc(40 * var(--u));
    }

    .tl-item {
        grid-template-columns: calc(36 * var(--u)) minmax(0, 1fr);
        column-gap: calc(28 * var(--u));
    }

    .tl-item + .tl-item {
        margin-top: calc(36 * var(--u));
    }

    .tl-item__dot {
        width: calc(36 * var(--u));
        height: calc(36 * var(--u));
        margin-top: calc(12 * var(--u));
    }

    .tl-item:not(:last-child) .tl-item__body::after {
        width: 100%;
        margin: calc(28 * var(--u)) 0 0;
    }

    .tl-item__time {
        font-size: calc(40 * var(--u));
    }

    .tl-item__title {
        font-size: calc(38 * var(--u));
        line-height: 1.4;
    }

    .tl-item__desc {
        margin-top: calc(8 * var(--u));
        font-size: calc(27 * var(--u));
    }

    .tl-item:not(:last-child)::before {
        left: calc(16 * var(--u));
        top: calc(70 * var(--u));
        bottom: calc(-2 * var(--u));
    }

    .tl-item:not(:last-child)::after {
        left: calc(8 * var(--u));
        bottom: calc(-19 * var(--u));
        border-left-width: calc(10 * var(--u));
        border-right-width: calc(10 * var(--u));
        border-top-width: calc(17 * var(--u));
    }

    .tl-item--yacht .tl-item__dot {
        box-shadow: 0 0 0 calc(6 * var(--u)) rgba(0, 100, 200, .14);
    }

    .sunset {
        flex-direction: column;
        align-items: stretch;
        gap: calc(32 * var(--u));
        width: calc(670 * var(--u));
        max-width: none;
        margin-top: calc(40 * var(--u));
        padding: calc(46 * var(--u)) calc(36 * var(--u)) calc(44 * var(--u));
        border-radius: calc(40 * var(--u));
        text-align: center;
    }

    /* 버튼이 가로로 꽉 차는 모바일에서는 해 장식 생략 */
    .sunset::before {
        display: none;
    }

    .sunset__badge {
        font-size: calc(22 * var(--u));
    }

    .sunset__title {
        justify-content: center;
        gap: calc(10 * var(--u));
        margin-top: calc(16 * var(--u));
        font-size: calc(46 * var(--u));
    }

    .sunset__title svg {
        width: calc(46 * var(--u));
        height: calc(46 * var(--u));
    }

    .sunset__desc {
        margin-top: calc(14 * var(--u));
        font-size: calc(27 * var(--u));
    }

    .sunset__cta {
        min-height: calc(88 * var(--u));
        font-size: calc(32 * var(--u));
    }

    /* guide / refund */
    .guide {
        padding: calc(110 * var(--u)) 0 calc(120 * var(--u));
    }

    .guide .sec-head__arc { width: calc(300 * var(--u)); }
    .guide .sec-head__icon { top: calc(40 * var(--u)); width: calc(106 * var(--u)); }

    .refund {
        padding: calc(110 * var(--u)) 0 calc(120 * var(--u));
    }

    .refund .sec-head__arc { width: calc(360 * var(--u)); }
    .refund .sec-head__icon { top: calc(44 * var(--u)); width: calc(114 * var(--u)); }

    .refund-table {
        width: calc(670 * var(--u));
        max-width: none;
        margin-top: calc(48 * var(--u));
    }

    .refund-card {
        border-radius: calc(24 * var(--u));
    }

    .refund-card--main {
        padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(36 * var(--u));
    }

    .refund-card__when {
        font-size: calc(30 * var(--u));
    }

    .refund-card__when strong {
        font-size: calc(46 * var(--u));
    }

    .refund-card__what {
        margin-top: calc(14 * var(--u));
        font-size: calc(30 * var(--u));
    }

    .refund-grid {
        gap: calc(12 * var(--u));
        margin-top: calc(14 * var(--u));
    }

    .refund-grid .refund-card {
        padding: calc(32 * var(--u)) calc(8 * var(--u)) calc(32 * var(--u));
        border-radius: calc(24 * var(--u));
    }

    .refund-grid .refund-card__when {
        font-size: calc(24 * var(--u));
    }

    .refund-grid .refund-card__when strong {
        font-size: calc(36 * var(--u));
    }

    .refund-grid .refund-card__what {
        margin-top: calc(14 * var(--u));
        font-size: calc(26 * var(--u));
    }

    /* 좁은 카드에서는 배지를 다음 줄 가운데로 */
    .refund-grid .refund-card__what em {
        display: block;
        width: fit-content;
        margin: calc(10 * var(--u)) auto 0;
    }

    .refund-card--none {
        margin-top: calc(14 * var(--u));
    }

    /* apply */
    .apply-sec {
        padding: calc(110 * var(--u)) 0 calc(130 * var(--u));
    }

    .apply-sec .sec-head__arc { width: calc(330 * var(--u)); }
    .apply-sec .sec-head__icon { top: calc(44 * var(--u)); width: calc(96 * var(--u)); }

    .apply-sec__card {
        width: calc(690 * var(--u));
        max-width: none;
        margin-top: calc(48 * var(--u));
        padding: calc(44 * var(--u)) calc(30 * var(--u)) calc(50 * var(--u));
        border-radius: calc(30 * var(--u));
    }

    .apply-sec__check {
        margin-top: calc(40 * var(--u));
        font-size: 14px;
    }

    /* 하단 고정 버튼 바 */
    .float-cta {
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: row;
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 -6px 20px rgba(17, 52, 93, .12);
        transform: translateY(100%);
    }

    .float-cta a {
        flex: 1;
        min-width: 0;
        min-height: 50px;
        padding: 0 12px;
        border-width: 0;
        font-size: 17px;
        box-shadow: none;
    }

    .float-cta .float-cta__sub {
        flex: 0 0 38%;
        border-width: 2px;
        box-shadow: none;
    }

    .landing .site-footer {
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }
}