@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Noto+Sans+KR:wght@400;500;700;900&display=swap");

:root {
  --teal: #0b5f63;
  --teal-dark: #063f43;
  --aqua: #71d2cc;
  --coral: #ff806f;
  --coral-dark: #d95f51;
  --foam: #f7f4ea;
  --white: #fffdf8;
  --ink: #123536;
  --muted: #607071;
  --line: rgba(11,95,99,.18);
  --shadow: 0 30px 90px rgba(4,63,67,.16);
  --sans: "DM Sans", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--ink); background: var(--foam); font-family: var(--sans); word-break: keep-all; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
.skip { position: fixed; z-index: 200; top: -80px; left: 16px; padding: 12px 18px; color: #fff; background: var(--teal); }
.skip:focus { top: 12px; }

.site-header { position: sticky; z-index: 70; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 82px; padding: 10px clamp(20px, 4vw, 68px); color: var(--ink); border-bottom: 1px solid var(--line); background: rgba(247,244,234,.92); backdrop-filter: blur(18px); }
.brand { display: inline-flex; gap: 12px; align-items: center; width: max-content; }
.brand img { width: 48px; height: 48px; }
.brand span { display: grid; }
.brand b { font-size: 1.04rem; letter-spacing: -.04em; }
.brand small { color: var(--teal); font-size: .58rem; font-weight: 800; letter-spacing: .17em; }
.site-header nav { display: flex; gap: clamp(18px, 3vw, 42px); font-size: .86rem; font-weight: 700; }
.site-header nav a:hover { color: var(--coral-dark); }
.header-phone { justify-self: end; color: var(--teal); font-weight: 900; }

.hero { position: relative; display: grid; grid-template-columns: 54% 46%; min-height: 760px; color: #fff; background: var(--teal); overflow: hidden; }
.hero::before { position: absolute; inset: 0 44% 0 0; content: ""; opacity: .22; background-image: repeating-radial-gradient(ellipse at 0 100%, transparent 0 70px, rgba(113,210,204,.8) 72px 74px, transparent 76px 116px); pointer-events: none; }
.hero-copy { position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: center; padding: clamp(70px, 9vw, 142px) clamp(26px, 7vw, 108px); }
.eyebrow, .intro span, .courses > header span, .booking header span, .district-dock > div span, .district-title > span, .address-compass header span, .station-board header span, .local-column header span, .food-heading span, .standards-copy header span, .faq header span { color: var(--coral); font-size: .72rem; font-weight: 900; letter-spacing: .2em; }
.hero h1 { max-width: 8ch; margin: 18px 0 0; font-size: clamp(3.7rem, 7.8vw, 8.3rem); line-height: .9; letter-spacing: -.09em; }
.hero-lead { max-width: 650px; margin: 35px 0 0; color: rgba(255,255,255,.78); font-size: clamp(1rem, 1.5vw, 1.24rem); line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.button { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; padding: 14px 26px; border-radius: 999px; font-weight: 900; }
.button.coral { color: var(--ink); background: var(--coral); }
.button.line { color: #fff; border: 1px solid rgba(255,255,255,.48); }
.hero-note { max-width: 620px; margin: 24px 0 0; color: rgba(255,255,255,.52); font-size: .8rem; line-height: 1.7; }
.hero-portrait { position: relative; min-width: 0; clip-path: polygon(16% 0,100% 0,100% 100%,0 100%); background: #bfd9d2; overflow: hidden; }
.hero-portrait picture, .hero-portrait img { width: 100%; height: 100%; }
.hero-portrait img { object-fit: cover; object-position: 52% 28%; background: linear-gradient(140deg, #dce7df, #39969a); }
.hero-portrait::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(11,95,99,.45), transparent 30%); pointer-events: none; }
.sun-disc { position: absolute; z-index: 2; top: 50px; right: 50px; width: 120px; aspect-ratio: 1; border-radius: 50%; border: 22px solid rgba(255,128,111,.72); }
.hero-portrait strong { position: absolute; z-index: 4; right: 35px; bottom: 35px; display: grid; place-items: center; width: 118px; height: 118px; color: var(--ink); border-radius: 50%; background: var(--coral); font-size: 1.9rem; line-height: .75; text-align: center; transform: rotate(-7deg); }
.hero-portrait strong small { font-size: .58rem; letter-spacing: .17em; }
.tide-line { position: absolute; z-index: 6; right: -4%; bottom: 26px; width: 58%; height: 64px; border-top: 5px solid var(--aqua); border-radius: 50%; transform: rotate(-3deg); }

.fact-buoys { position: relative; z-index: 8; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1280px; margin: -34px auto 0; color: var(--ink); border-radius: 24px; background: var(--white); box-shadow: var(--shadow); overflow: hidden; }
.fact-buoys div { display: grid; align-content: center; min-height: 116px; padding: 22px 30px; border-right: 1px solid var(--line); }
.fact-buoys div:last-child { border: 0; }
.fact-buoys span { color: var(--coral-dark); font-size: .65rem; font-weight: 900; letter-spacing: .17em; }
.fact-buoys b { margin-top: 5px; font-size: clamp(.9rem, 1.4vw, 1.13rem); }

.intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 8vw, 110px); max-width: 1280px; margin: auto; padding: clamp(100px, 13vw, 190px) clamp(24px, 5vw, 64px); }
.intro h2, .courses h2, .booking h2, .district-dock h2, .district-title h2, .local-column h3, .food-heading h3, .standards h2, .faq h2 { margin: 12px 0 0; font-size: clamp(2.3rem, 5vw, 5.2rem); line-height: 1.06; letter-spacing: -.07em; }
.intro > p { margin: 22px 0 0; color: var(--muted); font-size: 1.06rem; line-height: 2; }

.courses { position: relative; padding: clamp(95px, 12vw, 170px) 0 clamp(80px, 10vw, 140px); color: #fff; background: var(--teal-dark); overflow: hidden; }
.courses::after { position: absolute; right: -160px; bottom: -200px; width: 580px; height: 580px; content: ""; border: 110px solid rgba(113,210,204,.12); border-radius: 50%; }
.courses > header, .courses > small { display: block; max-width: 1280px; margin-inline: auto; padding-inline: clamp(24px, 5vw, 64px); }
.courses > header p { max-width: 660px; color: rgba(255,255,255,.56); }
.course-rail { position: relative; z-index: 2; display: flex; gap: 16px; max-width: 1460px; margin: 58px auto 0; padding: 0 clamp(24px, 5vw, 64px) 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: var(--coral) transparent; }
.course-card { flex: 0 0 min(352px, 78vw); min-height: 420px; padding: 30px; color: var(--ink); border-radius: 30px 30px 90px 30px; background: var(--foam); scroll-snap-align: start; }
.course-card:nth-child(even) { margin-top: 32px; background: var(--aqua); }
.course-card > span { display: grid; place-items: center; width: 42px; height: 42px; color: #fff; border-radius: 50%; background: var(--coral-dark); font-weight: 900; }
.course-card h3 { margin: 40px 0 0; font-size: 1.8rem; }
.course-card > p { min-height: 70px; color: #496163; }
.course-card dl { margin: 28px 0 0; border-top: 1px solid rgba(11,95,99,.24); }
.course-card dl div { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(11,95,99,.16); }
.course-card dd { margin: 0; color: var(--teal); font-weight: 900; }
.courses > small { color: rgba(255,255,255,.45); }

.booking { display: grid; grid-template-columns: 1fr 1fr; min-height: 860px; background: var(--white); }
.booking-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(80px, 10vw, 145px) clamp(24px, 7vw, 100px); }
.booking-copy ol { margin: 54px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.booking-copy li { display: grid; grid-template-columns: 58px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.booking-copy li > span { color: var(--coral-dark); font-size: 1.5rem; font-weight: 900; }
.booking-copy h3, .booking-copy p { margin: 0; }
.booking-copy h3 { font-size: 1.08rem; }
.booking-copy p { margin-top: 6px; color: var(--muted); line-height: 1.7; }
.booking-photo { position: relative; min-width: 0; background: var(--aqua); overflow: hidden; }
.booking-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.booking-photo > p { position: absolute; right: 28px; bottom: 28px; display: grid; min-width: 270px; padding: 20px 24px; color: #fff; border-radius: 18px 18px 58px 18px; background: rgba(6,63,67,.9); }
.booking-photo > p span { margin-top: 4px; color: rgba(255,255,255,.65); font-size: .78rem; }

.district-dock { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: end; padding: clamp(85px, 11vw, 150px) clamp(24px, 6vw, 80px); color: #fff; background: var(--coral-dark); }
.district-dock > div span { color: var(--ink); }
.district-dock nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.45); }
.district-dock nav a { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; padding: 26px 14px; border-bottom: 1px solid rgba(255,255,255,.45); }
.district-dock nav a:first-child { border-right: 1px solid rgba(255,255,255,.45); }
.district-dock nav span { grid-row: 1 / 3; align-self: center; color: var(--ink); font-size: 1.8rem; font-weight: 900; }
.district-dock nav b { font-size: 1.3rem; }
.district-dock nav small { color: rgba(255,255,255,.65); }

.wide-scene { position: relative; height: min(62vw, 760px); min-height: 430px; margin: 0; background: var(--teal); overflow: hidden; }
.wide-scene img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.wide-scene::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(6,63,67,.55), transparent 55%); }
.wide-scene figcaption { position: absolute; z-index: 2; left: clamp(24px, 6vw, 80px); bottom: 38px; color: #fff; font-size: .76rem; font-weight: 900; letter-spacing: .2em; }

.district { position: relative; padding-bottom: clamp(110px, 14vw, 210px); background: var(--foam); }
.chapter-2 { background: #e9f3ee; }
.district-title { display: grid; grid-template-columns: .3fr 1.4fr .3fr; gap: 34px; align-items: end; max-width: 1280px; margin: auto; padding: clamp(85px, 11vw, 160px) clamp(24px, 5vw, 64px) 55px; border-bottom: 2px solid var(--teal); }
.district-title > span { align-self: start; }
.district-title p { max-width: 650px; margin: 16px 0 0; color: var(--muted); }
.district-title em { justify-self: end; color: rgba(11,95,99,.14); font-size: clamp(5rem, 10vw, 10rem); font-style: normal; font-weight: 900; line-height: .75; }
.district-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; max-width: 1280px; margin: 45px auto 0; padding-inline: clamp(24px, 5vw, 64px); }
.chapter-2 .district-grid { grid-template-columns: .9fr 1.1fr; }
.chapter-2 .address-compass { order: 2; }
.address-compass, .station-board { min-width: 0; padding: clamp(27px, 4vw, 46px); border-radius: 28px; background: var(--white); box-shadow: 0 16px 60px rgba(11,95,99,.07); }
.address-compass h3, .station-board h3 { margin: 7px 0 0; font-size: 1.65rem; letter-spacing: -.04em; }
.address-row { margin-top: 28px; }
.address-row > b { font-size: .76rem; }
.address-row p { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; }
.address-row p span { padding: 6px 11px; color: var(--teal-dark); border-radius: 999px; background: #e5f3f0; font-size: .78rem; }
.address-compass > small, .station-board > p { display: block; margin-top: 22px; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.station-board ul { margin: 25px 0 0; padding: 0; list-style: none; }
.station-board li { display: grid; grid-template-columns: .8fr 1.2fr 1.5fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.station-board li span, .station-board li small { color: var(--muted); font-size: .8rem; }

.local-column { display: grid; grid-template-columns: .48fr 1.52fr; gap: clamp(40px, 7vw, 100px); max-width: 1280px; margin: clamp(85px, 11vw, 155px) auto 0; padding-inline: clamp(24px, 5vw, 64px); }
.local-column > header { position: sticky; top: 115px; align-self: start; }
.local-column h3 { font-size: clamp(2rem, 4vw, 4rem); }
.local-column > div { columns: 2; column-gap: 38px; }
.local-column > div p, .food-copy p { margin: 0 0 24px; color: #415758; line-height: 2.02; break-inside: avoid; }
.food-section { max-width: 1280px; margin: clamp(100px, 13vw, 190px) auto 0; padding-inline: clamp(24px, 5vw, 64px); }
.food-heading { display: grid; grid-template-columns: 1fr 1.4fr .9fr; gap: 26px; align-items: end; padding-bottom: 38px; border-bottom: 3px solid var(--coral); }
.food-heading h3 { font-size: clamp(2.1rem, 4vw, 4rem); }
.food-heading p { margin: 0; color: var(--muted); font-size: .88rem; }
.food-log { padding: clamp(60px, 8vw, 105px) 0; border-bottom: 1px solid var(--line); }
.food-log > header { display: grid; grid-template-columns: .3fr 1.2fr .8fr; gap: 24px; align-items: start; }
.food-log > header > span { color: var(--coral-dark); font-size: .72rem; font-weight: 900; letter-spacing: .15em; }
.food-log h4 { margin: 0; font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: -.05em; }
.food-log header p { margin: 7px 0 0; color: var(--muted); }
.food-log header > b { justify-self: end; color: var(--teal); text-align: right; }
.food-copy { margin-top: 45px; columns: 2; column-gap: clamp(28px, 5vw, 68px); }

.standards { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 900px; color: #fff; background: var(--teal-dark); }
.standards-photo { min-width: 0; background: var(--teal); overflow: hidden; clip-path: polygon(0 0, 94% 0, 100% 50%, 94% 100%, 0 100%); }
.standards-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .9; }
.standards-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(80px, 10vw, 145px) clamp(24px, 7vw, 100px); }
.standards-copy ul { margin: 48px 0 0; padding: 0; list-style: none; }
.standards-copy li { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; padding: 19px 0; border-top: 1px solid rgba(255,255,255,.16); }
.standards-copy li b { color: var(--aqua); }
.standards-copy li span { color: rgba(255,255,255,.61); }

.faq { max-width: 1120px; margin: auto; padding: clamp(95px, 12vw, 170px) clamp(24px, 5vw, 64px); }
.faq > div { margin-top: 50px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { padding: 24px 2px; font-weight: 900; cursor: pointer; }
.faq details p { max-width: 820px; margin: 0 0 26px; color: var(--muted); line-height: 1.8; }

footer { display: grid; grid-template-columns: .8fr 1.3fr auto; gap: 28px; align-items: center; padding: 55px clamp(24px, 6vw, 80px) 125px; color: #fff; background: var(--teal); }
.footer-brand small { color: var(--aqua); }
footer > p { color: rgba(255,255,255,.62); font-size: .9rem; }
footer > a { color: var(--coral); font-size: 1.18rem; font-weight: 900; }
footer > small { grid-column: 1 / -1; color: rgba(255,255,255,.4); }
.floating-phone { position: fixed; z-index: 90; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; gap: 11px; align-items: center; min-width: 218px; padding: 11px 18px 11px 11px; color: #fff; border-radius: 999px; background: var(--teal-dark); box-shadow: 0 16px 50px rgba(6,63,67,.35); }
.floating-phone > span { display: grid; place-items: center; width: 43px; height: 43px; color: var(--ink); border-radius: 50%; background: var(--coral); font-size: 1.25rem; }
.floating-phone b { display: grid; line-height: 1.2; }
.floating-phone small { color: var(--aqua); font-size: .65rem; }
.not-found { display: grid; min-height: 100svh; place-items: center; color: #fff; background: var(--teal); }
.not-found main { display: flex; max-width: 650px; flex-direction: column; align-items: center; padding: 30px; text-align: center; }
.not-found main > p { color: var(--coral); font-weight: 900; letter-spacing: .2em; }
.not-found h1 { margin: 8px 0; font-size: clamp(2.4rem, 7vw, 5rem); }
.not-found main > span { margin: 12px 0 34px; color: rgba(255,255,255,.68); }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: auto auto; justify-content: space-between; }
  .site-header nav { display: none; }
  .hero { grid-template-columns: 58% 42%; }
  .hero-copy { padding-inline: 44px; }
  .fact-buoys { margin-inline: 24px; }
  .district-title { grid-template-columns: .3fr 1.4fr .2fr; }
  footer { grid-template-columns: 1fr auto; }
  footer > p { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  .site-header { min-height: 70px; padding: 9px 15px; }
  .brand img { width: 42px; height: 42px; }
  .brand b { font-size: .94rem; }
  .brand small { font-size: .52rem; }
  .header-phone { padding: 8px; font-size: .8rem; }
  .hero { display: flex; min-height: auto; flex-direction: column; }
  .hero-portrait { order: 1; height: min(118vw, 560px); clip-path: none; }
  .hero-portrait img { object-position: 50% 22%; }
  .sun-disc { top: 24px; right: 22px; width: 78px; border-width: 14px; }
  .hero-portrait strong { right: 16px; bottom: 96px; width: 88px; height: 88px; font-size: 1.4rem; }
  .hero-copy { order: 2; margin-top: -72px; padding: 98px 22px 78px; background: linear-gradient(180deg, transparent, var(--teal) 72px); }
  .hero h1 { max-width: none; margin-top: 13px; font-size: clamp(3.3rem, 15.8vw, 5.3rem); }
  .hero-lead { margin-top: 25px; font-size: .97rem; }
  .hero-actions { display: grid; margin-top: 30px; }
  .button { width: 100%; }
  .tide-line { right: -15%; bottom: 25px; width: 115%; }
  .fact-buoys { grid-template-columns: 1fr 1fr; margin: -26px 14px 0; border-radius: 18px; }
  .fact-buoys div { min-height: 90px; padding: 15px 17px; }
  .fact-buoys div:nth-child(2) { border-right: 0; }
  .fact-buoys div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .intro { grid-template-columns: 1fr; padding: 90px 22px; }
  .intro h2, .courses h2, .booking h2, .district-dock h2, .standards h2, .faq h2 { font-size: 2.45rem; }
  .courses { padding-block: 90px; }
  .courses > header, .courses > small, .course-rail { padding-inline: 22px; }
  .course-card { flex-basis: 84vw; min-height: 410px; }
  .booking { grid-template-columns: 1fr; }
  .booking-copy { padding: 86px 22px; }
  .booking-photo { height: 112vw; max-height: 640px; }
  .booking-photo > p { right: 16px; bottom: 16px; min-width: 0; width: calc(100% - 32px); }
  .district-dock { grid-template-columns: 1fr; padding: 82px 22px; }
  .district-dock nav { grid-template-columns: 1fr; }
  .district-dock nav a:first-child { border-right: 0; }
  .wide-scene { height: 84vw; min-height: 360px; }
  .district-title { grid-template-columns: 1fr auto; padding: 82px 22px 40px; }
  .district-title > span { grid-column: 1 / -1; }
  .district-title em { font-size: 4.4rem; }
  .district-grid, .chapter-2 .district-grid { grid-template-columns: 1fr; padding-inline: 22px; }
  .chapter-2 .address-compass { order: 0; }
  .address-compass, .station-board { padding: 25px 20px; }
  .station-board li { grid-template-columns: .8fr 1.2fr; }
  .station-board li small { grid-column: 1 / -1; }
  .local-column { grid-template-columns: 1fr; padding-inline: 22px; }
  .local-column > header { position: static; }
  .local-column > div, .food-copy { columns: 1; }
  .food-section { padding-inline: 22px; }
  .food-heading { grid-template-columns: 1fr; }
  .food-log > header { grid-template-columns: .35fr 1fr; }
  .food-log header > b { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .standards { grid-template-columns: 1fr; }
  .standards-photo { height: 95vw; min-height: 380px; clip-path: none; }
  .standards-copy { padding: 86px 22px; }
  .standards-copy li { grid-template-columns: 1fr; gap: 6px; }
  .faq { padding: 88px 22px; }
  footer { grid-template-columns: 1fr; padding: 50px 22px 120px; }
  footer > p, footer > small { grid-column: 1; grid-row: auto; }
  .floating-phone { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); min-width: 176px; padding: 9px 12px 9px 9px; }
  .floating-phone > span { width: 36px; height: 36px; }
  .floating-phone b { font-size: .84rem; }
}

@media (max-width: 370px) {
  .site-header { padding-inline: 10px; }
  .brand span small { display: none; }
  .header-phone { font-size: .73rem; }
  .hero-copy { padding-inline: 18px; }
  .hero h1 { font-size: 3.15rem; }
  .fact-buoys { margin-inline: 8px; }
  .fact-buoys b { font-size: .79rem; }
  .course-rail, .courses > header, .courses > small { padding-inline: 18px; }
  .course-card { padding: 24px; }
  .district-title, .district-grid, .local-column, .food-section { padding-inline: 18px; }
  .floating-phone { min-width: 158px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }