* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: #202a28; background: #fcfbf8; font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #cf482f; outline-offset: 5px; }
a:hover { text-decoration: underline; }
.header { max-width: 1320px; margin: auto; padding: 24px 5%; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 900; white-space: nowrap; }
.brand span { font-size: 12px; letter-spacing: 2px; }
.brand i { width: 9px; height: 9px; border-radius: 50%; background: #d74730; }
nav { display: flex; gap: 34px; font-size: 14px; font-weight: 700; }
.home { font-size: 13px; }
.hero { position: relative; min-height: 580px; max-width: 1440px; margin: auto; display: flex; align-items: center; overflow: hidden; color: white; background: #233747; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,21,30,.82), rgba(7,21,30,.15)); }
.hero-copy { position: relative; z-index: 1; padding: 65px 8%; }
.eyebrow { color: #ba3e28; letter-spacing: 2.5px; font-size: 12px; font-weight: 800; margin: 0 0 16px; }
.hero .eyebrow { color: #fff; }
h1 { font-size: clamp(42px, 5.5vw, 76px); line-height: 1.2; letter-spacing: -3px; margin: 18px 0 24px; }
.hero-copy > p:not(.eyebrow) { color: #edf0f0; font-size: 16px; }
.button { display: inline-flex; gap: 35px; align-items: center; padding: 13px 24px; margin-top: 20px; background: #d74730; color: white; border-radius: 4px; font-size: 14px; font-weight: 700; }
.button:hover { background: #ad3624; text-decoration: none; }
.hero-note { position: absolute; z-index: 1; right: 30px; bottom: 22px; font-size: 10px; letter-spacing: 2px; }
.quick-info { display: flex; justify-content: space-between; gap: 24px; max-width: 1120px; margin: auto; padding: 30px 0; border-bottom: 1px solid #dddcd6; }
.quick-info div { display: flex; flex-direction: column; gap: 5px; }
.quick-info span { color: #747b76; letter-spacing: 1.5px; font-size: 10px; }
.quick-info strong { font-size: 14px; }
.quick-info > a { align-self: center; font-size: 13px; color: #b13b28; }
.section { max-width: 1120px; margin: auto; padding: 80px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 35px; }
h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.4; letter-spacing: -1.4px; }
.section-heading > p, .location-section p { font-size: 14px; color: #626b65; }
.places-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 46px; }
.street-photo { position: relative; margin: 0; min-height: 470px; background: #263d43; border-radius: 8px; overflow: hidden; }
.street-photo img { width: 100%; height: 100%; position: absolute; object-fit: cover; }
figcaption { position: absolute; bottom: 0; width: 100%; padding: 48px 25px 25px; color: white; background: linear-gradient(transparent, #102128dd); font-size: 11px; letter-spacing: 2px; }
figcaption span { display: block; font-size: 21px; letter-spacing: 0; font-weight: 700; }
.place-list article { display: flex; gap: 24px; padding: 22px 0; border-bottom: 1px solid #deded8; }
.place-list article:first-child { padding-top: 0; }
.number { color: #bd452d; font-size: 22px; }
.tag { color: #6d766e; font-size: 11px; }
h3 { font-size: 22px; margin: 4px 0 8px; letter-spacing: -.7px; }
.place-list p, .food-list p { font-size: 14px; color: #626b65; margin: 0 0 10px; }
.place-list a { font-size: 12px; font-weight: 700; }
.food-section { background: #efeee6; }
.food-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 46px; align-items: stretch; }
.food-layout > img { width: 100%; height: 100%; max-height: 490px; min-height: 350px; object-fit: cover; border-radius: 8px; }
.food-list article { padding: 12px 0 20px; }
.food-list article + article { border-top: 1px solid #d5d6cc; }
.food-list article > span { font-size: 10px; color: #b13b28; letter-spacing: 1.5px; font-weight: bold; }
.location-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
dl { margin: 25px 0 10px; font-size: 14px; }
dl div { display: flex; padding: 8px 0; border-bottom: 1px solid #e3e2da; }
dt { width: 110px; color: #626b65; } dd { margin: 0; }
.dark { background: #243e34; }
iframe { border: 0; width: 100%; height: 390px; border-radius: 8px; background: #e7e9e0; }
.travel-note { max-width: 1120px; margin: 0 auto 70px; padding: 25px 30px; border: 1px solid #deded6; border-radius: 6px; font-size: 14px; }
.travel-note p { margin: 6px 0; color: #626b65; }
.travel-note a { color: #b13b28; font-size: 12px; }
footer { padding: 30px max(5%, calc((100% - 1120px)/2)); border-top: 1px solid #deded6; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
footer p, footer > div { font-size: 11px; color: #626b65; }
@media (max-width: 1200px) { .section, .quick-info, .travel-note { margin-left: 5%; margin-right: 5%; } }
@media (max-width: 700px) { .header { flex-wrap: wrap; padding: 18px 5%; } nav { gap: 18px; } .home { display: none; } .hero { min-height: 510px; } .hero-copy { padding: 55px 7%; } .hero-note { font-size: 8px; right: 15px; } .quick-info { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .section { padding: 50px 0; } .section-heading { display: block; } .places-layout, .food-layout, .location-section { grid-template-columns: 1fr; gap: 25px; } .street-photo { min-height: 340px; } .food-layout > img { height: 280px; min-height: 0; } iframe { height: 320px; } .travel-note { margin-bottom: 40px; padding: 20px; } footer { flex-wrap: wrap; gap: 10px 25px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }