/* =========================================================
MOON ART GROUNDS — Mobile app-style layout (≤767px)
Loaded LAST on every page (after each page's inline styles), so it
wins ties. Everything in here is phone-only except section 0 (text
contrast, every breakpoint): the ≥768px block just hides the
phone-only markup so the desktop layout is unchanged.
The footer CSS is copied inline into every page; sections 0 and 9
override it here once instead of editing each copy.
Contents
0. Text contrast, every breakpoint (footer, homepage English titles)
1. Desktop: hide phone-only markup
2. Tokens, body offsets, Korean line breaks
3. Header (56px, logo only)
4. Bottom tab bar
5. Menu sheet
6. Inner-page titles + first-screen spacing
7. Homepage: order, hero card, pills, sections as cards
8. Visit page
9. Footer tap targets
========================================================= */
/* Visually hidden label (sheet search field) — every breakpoint */
.mob-sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ---------- 0. Text contrast, every breakpoint (WCAG AA 4.5:1) ----------
Same colours, darker: greys stay rgba(28,26,23,a), reds stay #C0392B.
Ratios are against the actual background. */
/* Footer, white column: 0.55 / 0.45 grey (3.89 / 2.88:1) → 0.64 / 0.62 (5.21 / 4.87:1) */
.site-footer .status-label > [lang="en"] { font-size: 11px; color: rgba(28, 26, 23, 0.64); } /* was 0.8em ≈ 7.2px */
.site-footer .footer-info-block .value-en,
.site-footer .footer-hours-time > [lang="en"],
.site-footer .footer-hours-note > [lang="ko"] { color: rgba(28, 26, 23, 0.64); }
.site-footer .footer-hours-note > [lang="en"] { color: rgba(28, 26, 23, 0.62); }
/* Footer EN labels: #C0392B at 0.78 opacity (3.74:1) → 0.92 (4.8:1) */
.site-footer .footer-info-label > [lang="en"] { opacity: 0.92; }
/* Footer bottom bar: white 0.40 on #1C1A17 (3.81:1) → 0.50 (5.20:1) */
.site-footer .footer-copyright { color: rgba(255, 255, 255, 0.5); }
/* Homepage English section titles: opacity 0.55 made them 2.18:1 on phones
(3.89–4.39:1 on desktop). Solid #6E6E73 on white (5.07:1); #5E5E62 on the
#E1DCD6 Plan-your-visit panel (4.74:1), whose red full stop drops to the
existing hover red #A8321F (4.91:1). On phones section 7 keeps its own
colours (!important); only the opacity changes there. */
.editorial-section__eyebrow-en, .at-mag-section__title-en, .home-ex__title-en,
.home-edu__title-en, .plan-visit__eyebrow-en, .banners__title-en { opacity: 1; color: #6E6E73; }
body .plan-visit .plan-visit__eyebrow-en { color: #5E5E62 !important; }
body .plan-visit .plan-visit__eyebrow .period { color: #A8321F !important; }
/* ---------- 1. Desktop: phone-only markup stays hidden ---------- */
@media (min-width: 768px) {
.mob-tabbar, .mob-sheet, .mob-sheet-backdrop, .mob-h1-en,
.hero-cta-en, .hero-cta--now, .home-ex__all, .home-today,
.at-mag-card__name-en, .at-mag-card__sep, .plan-visit__mobile,
.vm, .vm-badge, .vm-faq-more, .vm-toast, .cm-pills, .home-insta {
display: none !important;
}
}
@media (max-width: 767px) {
/* ---------- 2. Tokens, body offsets, Korean line breaks ---------- */
:root {
--mob-header-h: 56px;
--mob-tab-h: 63px;
--mob-tab-h-compact: 48px; /* tab bar while scrolling down (use case 13) */
--mob-tab-inset: 12px; /* gap between the floating bar and the home indicator */
--mob-ink: #111111;
--mob-muted: #666666;
--mob-muted-2: #6E6E73;
--mob-hair: rgba(0, 0, 0, 0.08);
--mob-radius: 20px;
/* Spacing — the homepage rhythm, shared by every phone page (use case 14) */
--mob-gutter: 16px; /* side margins */
--mob-section-gap: 28px; /* one section to the next */
--mob-title-gap: 14px; /* section title to its first content */
--mob-para-gap: 7px; /* paragraph to paragraph */
--mob-card-pad: 16px; /* inside padding of cards and list blocks */
--mob-card-gap: 10px; /* between stacked cards */
--mob-tile-gap: 20px; /* between stacked image tiles (exhibition cards) */
--mob-sans: var(--font-kr);
--mob-serif: 'Cormorant Garamond', 'Pretendard', Georgia, serif;
}
body, body.has-fixed-header {
padding-top: calc(var(--mob-header-h) + env(safe-area-inset-top, 0px)) !important;
padding-bottom: calc(var(--mob-tab-h) + var(--mob-tab-inset) + 10px + env(safe-area-inset-bottom, 0px)) !important;
}
html { scroll-padding-top: calc(var(--mob-header-h) + 12px); }
/* The image-reveal effect holds off-screen images at scale(1.02) until they
enter view. A full-width image then overflows the screen by 8px, the phone
widens its layout viewport to fit, and every fixed element (tab bar, header)
shifts on that page. Keep the fade, drop the scale on phones. */
.img-reveal { transform: none !important; }
html, body { overflow-x: clip !important; }
/* Korean: break between words, never mid-word. index.html doesn't load
site-header.css (where this lived), and its :lang(ko) rule also set
overflow-wrap:anywhere on every element. break-word only splits a word
that is wider than the whole line; anywhere stays on links that show
an email address or handle. */
body, body :lang(ko), body p, body h1, body h2, body h3, body h4, body h5, body h6,
body li, body dt, body dd, body th, body td, body blockquote, body figcaption,
body label, body button, body summary {
word-break: keep-all;
overflow-wrap: break-word;
}
body a[href^="mailto:"], body a[href*="instagram.com"] { overflow-wrap: anywhere; }
/* ---------- 3. Header: 56px, centred 44px logo linking home ---------- */
body #site-header, body.is-scrolled #site-header {
position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important;
height: calc(var(--mob-header-h) + env(safe-area-inset-top, 0px)) !important;
padding: env(safe-area-inset-top, 0px) 16px 0 !important;
background: #FFFFFF !important;
color: var(--mob-ink) !important;
box-shadow: none !important;
transform: none !important;
transition: none !important;
z-index: 40;
}
body #site-header .header-bar {
position: relative;
height: var(--mob-header-h) !important;
min-height: 0 !important;
justify-content: center !important;
}
body #site-header .header-wordmark,
body #site-header #menu-btn,
body #site-header #search-btn { display: none !important; }
body #site-header .header-emblem,
body.is-scrolled #site-header .header-emblem,
body.fab-ready #site-header .header-emblem {
position: absolute !important;
left: 50% !important; top: 50% !important;
transform: translate(-50%, -50%) !important;
display: inline-flex !important;
align-items: center;
height: 51px; /* logo +15% (approved): 44 → 51px */
opacity: 1 !important;
pointer-events: auto !important;
transition: none !important;
}
body #site-header .header-emblem img {
height: 51px !important;
max-height: 51px !important;
width: auto !important;
max-width: none !important;
filter: invert(1) !important; /* white logo PNG → black on the white bar */
transition: none !important;
}
body #site-header .header-emblem:focus-visible { outline: 2px solid #C0392B; outline-offset: 4px; border-radius: 6px; }
/* Desktop menu overlay is never used on phones (its button is hidden) */
#menu-overlay, #menu-backdrop { display: none !important; }
/* ---------- 4. Bottom tab bar — floating pill (design update) ----------
Inset 16px from the sides and 12px above the home indicator. Outline icons
#8E8E93, labels #6E6E73; the active tab gets a light pill behind it, a
filled #DA0A1A icon and a red label. Korean labels only. */
.mob-tabbar {
position: fixed;
left: 16px; right: 16px;
bottom: calc(var(--mob-tab-inset) + env(safe-area-inset-bottom, 0px));
z-index: 60;
display: flex;
gap: 2px;
min-height: var(--mob-tab-h); /* grows (never clips) when enlarged text wraps a label */
padding: 5px;
border-radius: 999px;
/* The glass capsule itself is drawn by ::before (full) and ::after (compact) — see 4b */
}
.mob-tabbar::before, .mob-tabbar::after {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
z-index: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
border: 0.5px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.04);
pointer-events: none;
}
.mob-tabbar::before { bottom: 0; } /* full capsule: the bar's own 63px */
.mob-tabbar::after { height: var(--mob-tab-h-compact); opacity: 0; } /* compact capsule, hung from the same top edge */
.mob-tab {
position: relative;
z-index: 1; /* above the capsule layers */
flex: 1 1 0;
min-width: 0;
min-height: 44px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
margin: 0;
padding: 0; /* the label gets the tab's full width: 체험 프로그램 stays on one line at 360px */
border: 0;
border-radius: 999px;
background: transparent;
font: inherit;
color: #8E8E93;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color 160ms ease;
}
.mob-tab__icon {
width: 24px; height: 24px;
display: block;
flex: none;
}
.mob-tab__icon--line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mob-tab__icon--fill { fill: currentColor; stroke: none; display: none; }
.mob-tab__ko {
font-family: var(--mob-sans);
font-size: 12px;
font-weight: 500;
line-height: max(12px, 1em); /* 12px; tracks enlarged text so wrapped lines never overlap */
letter-spacing: -0.01em;
color: #6E6E73;
/* One line when it fits; otherwise wraps between words (체험 / 프로그램), centred */
max-width: 100%;
white-space: normal;
word-break: keep-all;
overflow-wrap: normal;
text-align: center;
}
body .mob-tab .mob-tab__en { display: none !important; }
.mob-tab[aria-current="page"], .mob-tab.is-open { color: #DA0A1A; }
/* The gray pill behind the active tab: ::before (full height) and ::after (compact height) */
.mob-tab::before, .mob-tab::after {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
z-index: -1;
border-radius: 999px;
background: rgba(60, 60, 67, 0.08);
opacity: 0;
pointer-events: none;
}
.mob-tab::before { bottom: 0; }
.mob-tab::after { height: calc(var(--mob-tab-h-compact) - 10px); } /* inside the bar's 5px padding */
.mob-tab[aria-current="page"]::before, .mob-tab.is-open::before { opacity: 1; }
.mob-tab[aria-current="page"] .mob-tab__ko, .mob-tab.is-open .mob-tab__ko { color: #DA0A1A; font-weight: 600; }
.mob-tab[aria-current="page"] .mob-tab__icon--line { display: none; }
.mob-tab[aria-current="page"] .mob-tab__icon--fill { display: block; }
.mob-tab:focus-visible { outline: 2px solid #DA0A1A; outline-offset: -3px; }
/* 메뉴 ↔ 닫기 */
body .mob-tab .mob-tab__icon--close, body .mob-tab .mob-tab__label--close { display: none !important; }
body .mob-tab.is-open .mob-tab__icon--menu, body .mob-tab.is-open .mob-tab__label--menu { display: none !important; }
body .mob-tab.is-open .mob-tab__icon--close { display: block !important; }
body .mob-tab.is-open .mob-tab__label--close { display: block !important; }
body .mob-tab.is-open .mob-tab__en.mob-tab__label--close { display: none !important; } /* Korean label only, open state too */
@media (max-width: 380px) {
.mob-tab__ko { font-size: 11.5px; letter-spacing: -0.02em; }
}
/* ---------- 4b. Compact tab bar while scrolling down (js/mobile-nav.js, SHRINK_TAB_BAR) ----------
The bar's layout box never changes (so the page's bottom padding and the tap targets stay as
they are); only opacity animates: the full capsule and pill fade out, the 48px capsule and
pill fade in, the labels fade out (still in the DOM for screen readers). Icons do not move:
they sit 23.5px below the bar's top edge in both states. 200ms ease-out. */
.mob-tabbar::before, .mob-tabbar::after, .mob-tab::before, .mob-tab::after, .mob-tab__ko {
transition: opacity 200ms cubic-bezier(0, 0, 0.2, 1);
}
.mob-tabbar.is-compact::before { opacity: 0; }
.mob-tabbar.is-compact::after { opacity: 1; }
.mob-tabbar.is-compact .mob-tab[aria-current="page"]::before, .mob-tabbar.is-compact .mob-tab.is-open::before { opacity: 0; }
.mob-tabbar.is-compact .mob-tab[aria-current="page"]::after, .mob-tabbar.is-compact .mob-tab.is-open::after { opacity: 1; }
.mob-tabbar.is-compact .mob-tab__ko { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.mob-tabbar::before, .mob-tabbar::after, .mob-tab::before, .mob-tab::after, .mob-tab__ko { transition: none; }
}
/* ---------- 5. Menu sheet ---------- */
.mob-sheet-backdrop {
position: fixed; inset: 0;
z-index: 55;
background: rgba(17, 17, 17, 0.22);
opacity: 0;
pointer-events: none;
transition: opacity 250ms ease;
}
.mob-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.mob-sheet {
position: fixed;
inset: 0;
z-index: 58;
overflow-y: auto;
overscroll-behavior: contain;
background: rgba(242, 242, 247, 0.72);
-webkit-backdrop-filter: blur(30px) saturate(180%);
backdrop-filter: blur(30px) saturate(180%);
border-radius: 0;
padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(var(--mob-tab-h) + var(--mob-tab-inset) + 16px + env(safe-area-inset-bottom, 0px));
transform: translateY(100%);
visibility: hidden;
transition: transform 250ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 250ms;
}
/* Sheet layout: logo → status pill → open space → the three row blocks → app icons, anchored to the
bottom so the icon row sits 16px above the tab bar (the sheet's bottom padding).
The body fills the sheet; when a short screen or large text makes it taller, the sheet scrolls
from the top so the logo is never cut off. */
.mob-sheet { display: flex; flex-direction: column; }
.mob-sheet__body { flex: 1 0 auto; display: flex; flex-direction: column; gap: 16px; }
.mob-sheet.is-open {
transform: translateY(0);
visibility: visible;
transition: transform 250ms cubic-bezier(0.2, 0, 0, 1), visibility 0s;
}
.mob-sheet:focus { outline: none; }
.mob-sheet__handle { display: none; }
/* Close (X) pinned top-right while the sheet scrolls: zero-height sticky row */
.mob-sheet__head {
position: sticky;
top: 0;
z-index: 2;
height: 0;
display: flex;
justify-content: flex-end;
overflow: visible;
}
.mob-sheet__head .mob-sheet__close { margin: -4px -6px 0 0; }
.mob-sheet__close {
width: 44px; height: 44px;
display: grid; place-items: center;
margin: 0 -6px 0 0;
padding: 0;
background: none;
border: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mob-sheet__close span {
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(120, 120, 128, 0.16);
display: grid; place-items: center;
color: var(--mob-ink);
}
.mob-sheet__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mob-sheet__close:focus-visible span { outline: 2px solid #C0392B; outline-offset: 2px; }
/* Black MAG logo (white PNG inverted, as in the header) at the top of the sheet */
.mob-sheet__logo { display: flex; justify-content: center; align-items: center; min-height: 44px; margin: 0 auto 6px; width: max-content; }
.mob-sheet__logo img { display: block; height: 52px; width: auto; filter: invert(1); }
.mob-sheet__logo:focus-visible { outline: 2px solid #C0392B; outline-offset: 4px; border-radius: 6px; }
/* Status pill — Korea time + open/closed (js/mag-info.js liveStatus) */
.mob-status {
align-self: center;
display: inline-flex;
align-items: center;
gap: 6px;
height: 40px;
margin: 0;
padding: 0 16px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.72);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 0.5px solid rgba(0, 0, 0, 0.08);
font-family: var(--mob-sans);
font-size: 14px;
line-height: 1;
color: var(--mob-ink);
white-space: nowrap;
}
.mob-status__clock { font-weight: 500; font-variant-numeric: tabular-nums; }
.mob-status__live { display: inline-flex; align-items: center; gap: 6px; }
.mob-status__sep { color: var(--mob-muted-2); }
.mob-status__dot { width: 8px; height: 8px; border-radius: 50%; background: #8E8E93; flex: none; }
.mob-status__dot.is-open { background: #1F8A4C; }
.mob-status__label { font-weight: 500; }
.mob-status__detail { color: var(--mob-muted-2); }
/* Row blocks: one white card per group, rows separated by a hairline */
.mob-sheet__groups { display: flex; flex-direction: column; gap: 10px; margin: auto 0 0; }
.mob-group { margin: 0; padding: 0; list-style: none; background: #FFFFFF; border-radius: 16px; overflow: hidden; }
.mob-group li + li { border-top: 0.5px solid rgba(60, 60, 67, 0.15); }
.mob-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: clamp(58px, 8.4vh, 68px); /* 58px on short phones, up to 68px on tall ones */
padding: 0 16px;
color: #111111;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.mob-row:active { background: rgba(0, 0, 0, 0.05); }
.mob-row:focus-visible { outline: 2px solid #C0392B; outline-offset: -3px; }
.mob-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mob-row__ko { font-family: var(--mob-sans); font-size: 16px; font-weight: 500; line-height: 1.2; color: #111111; }
body .mob-row .mob-row__en { display: block !important; font-family: var(--mob-serif); font-size: 12px; line-height: 1.2; color: #6E6E73; }
.mob-row[aria-current="page"] .mob-row__ko { color: #DA0A1A; }
.mob-row__chev { flex: none; font-family: var(--mob-sans); font-size: 22px; line-height: 1; color: #C7C7CC; }
/* App-style icons (Instagram, 네이버 지도): 56px white tile with the official logo, label below.
Tile + label are one link; the logos are decorative (alt=""), the label is the accessible name. */
.mob-sheet__apps {
display: flex;
justify-content: center;
gap: 36px;
margin: 0;
padding: 0;
list-style: none;
}
.mob-app {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 56px;
color: #3A3A3C;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.mob-app__tile {
width: 56px; height: 56px;
box-sizing: border-box;
display: grid; place-items: center;
background: #FFFFFF;
border: 0.5px solid rgba(0, 0, 0, 0.06);
border-radius: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: transform 120ms ease;
}
.mob-app__tile img { display: block; width: 30px; height: auto; }
.mob-app:active .mob-app__tile { transform: scale(0.96); }
.mob-app:focus-visible { outline: none; }
.mob-app:focus-visible .mob-app__tile { outline: 2px solid #C0392B; outline-offset: 2px; }
.mob-app__label {
font-family: var(--mob-sans);
font-size: 12.5px;
line-height: 1.2;
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.mob-app__tile { transition: none; }
.mob-app:active .mob-app__tile { transform: none; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.mob-tabbar { background: #FFFFFF; }
.mob-sheet { background: #F2F2F7; }
}
@media (prefers-reduced-motion: reduce) {
.mob-sheet, .mob-sheet-backdrop { transition: none !important; }
}
/* A tapped row keeps its pressed tint while the next page loads (the sheet stays open) */
.mob-row.is-navigating { background: rgba(0, 0, 0, 0.05); }
/* ---------- 5b. Page-to-page transition (phones) ----------
The header and the tab bar are their own view-transition groups and swap instantly, so only
the page content (and the menu sheet, when a link in it was tapped) cross-fades, in 200ms.
The pages' inline @view-transition rule still opts in; it is already off under
prefers-reduced-motion, so these only ever apply with motion allowed. */
body #site-header { view-transition-name: mag-header; }
.mob-tabbar { view-transition-name: mag-tabbar; }
@media not (prefers-reduced-motion: reduce) {
:root::view-transition-old(root), :root::view-transition-new(root) { animation-duration: 200ms; }
:root::view-transition-group(mag-header), :root::view-transition-group(mag-tabbar),
:root::view-transition-old(mag-header), :root::view-transition-new(mag-header),
:root::view-transition-old(mag-tabbar), :root::view-transition-new(mag-tabbar) { animation: none; }
}
/* ---------- 5c. Rental page (rental-events.html): the homepage spacing tokens ----------
Sections sit 28px apart with no divider lines (as on the homepage), text keeps the 16px
gutter, a title block is 14px above its content, paragraphs 7px apart, cards 10px apart
with 16px inside, image tiles 20px apart. The page's own desktop CSS is untouched. */
.intro, .event-types, .shoots-gallery, .made-for {
padding: var(--mob-section-gap) 0 0 !important;
border-bottom: 0 !important; /* also overrides the inline border on the rates/services sections */
}
.contact-band { margin-top: var(--mob-section-gap); }
.intro .container, .event-types .container, .shoots-gallery .container, .made-for .container {
padding-left: var(--mob-gutter) !important; padding-right: var(--mob-gutter) !important;
}
.intro-grid, .made-for-grid { gap: var(--mob-title-gap) !important; } /* title block → body text / list */
.intro-body p { margin: 0 0 var(--mob-para-gap); }
.intro-body p:last-child { margin-bottom: 0; }
.event-types-head, .event-types:has(.event-grid) .event-types-head, .shoots-gallery-head { margin-bottom: var(--mob-title-gap) !important; }
.shoots-gallery-intro { margin-top: var(--mob-para-gap) !important; }
.event-grid { gap: var(--mob-card-gap) !important; } /* three event cards: like the review cards */
.event-card-body { padding: var(--mob-card-pad) !important; }
.event-card p:not(:last-child):not(.label) { margin-bottom: var(--mob-para-gap) !important; } /* the small label keeps its own gap to the title */
.shoots-gallery-grid { gap: var(--mob-tile-gap) !important; } /* video tiles: like the exhibition tiles */
.shoot-card .label { margin: 10px 0 var(--mob-para-gap) !important; } /* caption 10px under its tile, as on the exhibition cards */
.made-for-ko { margin-top: var(--mob-title-gap) !important; } /* included / rates / services lists */
/* ---------- 5d. Newsletter pill (소식 받기 card on the Exhibition page, homepage card): the box is exactly
its two rows — a 44px field and a 40px button — with no fixed height, min-height or flex growth ---------- */
.exhibition-newsletter-form, .index-newsletter__form { height: auto !important; min-height: 0 !important; flex: 0 0 auto; }
.exhibition-newsletter-form input[type="email"], .index-newsletter__form input[type="email"] {
height: auto !important; min-height: 0 !important; flex: 0 0 auto !important;
padding-top: 10px !important; padding-bottom: 10px !important; line-height: 24px !important;
}
.exhibition-newsletter-form button, .index-newsletter__form button {
height: auto !important; min-height: 0 !important; flex: 0 0 auto !important;
padding-top: 10px !important; padding-bottom: 10px !important; line-height: 20px !important;
}
/* ---------- 6. Inner-page titles + first-screen spacing ---------- */
body .ex-hero__h1, body .exp-hero-h1, body .contact-h1, body .faq-page-title, body .shop-hero .t-h1,
body .rentals-hero .hero-h1, body .space-hero-name, body .vp-hero-h1, body .cm-hero__title,
body .story-hero-inner h1[lang="ko"] {
font-family: var(--mob-sans) !important;
font-style: normal !important;
font-size: 34px !important;
font-weight: 300 !important;
line-height: 1.15 !important;
letter-spacing: -0.01em !important;
color: var(--mob-ink) !important;
}
body h1 .mob-h1-en,
.story-hero-inner h1[lang="en"] {
display: inline !important;
font-family: var(--mob-serif) !important;
font-style: normal !important;
font-size: 18px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
color: var(--mob-muted-2) !important;
white-space: nowrap;
}
body h1 .mob-h1-en { margin-left: 10px; }
/* Experiences: the title already carries "Three Spaces" on phones; outranks the .keep-en re-show rule */
body .exp-hero-h1-sub.keep-en[lang="en"] { display: none !important; }
/* photo heroes keep light text; the inline English word follows */
body .rentals-hero .hero-h1, body .story-hero-inner h1[lang="ko"] { color: #FFFFFF !important; }
body .rentals-hero .hero-h1 .mob-h1-en, body .story-hero-inner h1[lang="en"] { color: rgba(255, 255, 255, 0.78) !important; }
/* English already shown inline after the title — drop the separate EN sub line */
body .exp-hero-h1-sub, body .rentals-hero .hero-h1-sub { display: none !important; }
.story-hero-inner h1[lang="en"] { margin: 4px 0 0 !important; line-height: 1.3 !important; }
.story-hero-inner h1[lang="en"] .word, .story-hero-inner h1[lang="en"] .word > span { display: inline !important; transform: none !important; }
/* less air above the first screen so the main image lands in view */
.ex-hero__inner { padding-top: 12px !important; padding-bottom: 20px !important; gap: 16px !important; }
.exp-hero { padding-top: 12px !important; padding-bottom: 0 !important; }
/* Experiences: title 14px above its copy, the two copy lines 7px apart, the first card 28px below (homepage tokens) */
.exp-hero-h1 + .exp-hero-sub, .exp-hero-h1-sub + .exp-hero-sub { margin-top: var(--mob-title-gap) !important; }
.exp-hero-sub + .exp-hero-sub { margin-top: var(--mob-para-gap) !important; }
.experiences { padding-top: var(--mob-section-gap) !important; }
.contact-hero { padding-top: 0 !important; } /* the page's own 80px desktop spacer is not needed under the 56px phone header */
.contact-hero__inner { padding-top: 12px !important; }
.faq-hero { margin-top: 0 !important; height: 220px !important; }
.faq-page-intro { margin-bottom: 1.5rem !important; }
.shop-hero { padding-top: 12px !important; }
.rentals-hero { min-height: 72vh !important; }
.space-hero { padding-top: 0 !important; } /* desktop header spacer (90px) is not needed under the 56px phone header */
.space-hero-header { padding-top: 12px !important; }
.vp-hero { padding: 12px var(--mob-gutter) 16px !important; } /* same 16px gutter as the cards below: the status pill's right edge meets theirs */
.cm-hero { padding-top: 12px !important; }
/* Color Make page rhythm on phones: 40px either side of each section divider,
24px from the heading to its paragraph. Between the intro text and the photo steps the divider is
dropped and a single 48px gap is used instead. */
.cm-section { padding: 40px 0 !important; }
.cm-about .cm-split { gap: 24px !important; }
.cm-about .cm-body { margin-top: 0 !important; }
.cm-about { padding-bottom: 0 !important; }
.cm-process { border-top: 0 !important; padding-top: 48px !important; }
.cm-steps { margin-top: 0 !important; }
/* Color Make: the three contact buttons (방문 안내 · 길찾기 · 전화 문의) always sit on one row */
.cm-visit .cm-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; }
.cm-visit .cm-actions .btn { box-sizing: border-box; height: 48px; min-height: 48px; padding: 0 8px !important; border-radius: 999px; justify-content: center; font-size: 15px !important; white-space: nowrap; }
@media (max-width: 340px) { .cm-visit .cm-actions .btn { font-size: 14px !important; } } /* 320px phones: every label still fits at 130% text */
/* Color Make: price pill under the schedule line (same style as the homepage pills) */
.cm-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.cm-pill { display: inline-flex; align-items: center; height: 34px; padding: 0 11px; border-radius: 999px; background: #FFFFFF; border: 0.5px solid var(--mob-hair); font-family: var(--mob-sans); font-size: 13px; line-height: 1; color: var(--mob-ink); white-space: nowrap; }
/* Color Make page: every photo runs full bleed (out past .cm-wrap's side padding); text keeps its gutter */
.cm-wrap .cm-hero__figure, .cm-wrap .cm-step__media, .cm-wrap .cm-pair__media {
margin-left: calc(-1 * var(--cm-gutter, 20px)) !important;
margin-right: calc(-1 * var(--cm-gutter, 20px)) !important;
width: auto !important; max-width: none !important; border-radius: 0 !important;
}
.cm-wrap .cm-hero__figure img, .cm-wrap .cm-step__media img, .cm-wrap .cm-pair__media img { width: 100% !important; border-radius: 0 !important; }
/* Experiences page: the three space images run full bleed; titles and
buttons keep the 16px gutter */
.experiences, .experiences-inner, .experiences-grid { padding-left: 0 !important; padding-right: 0 !important; }
.experiences .at-mag-card { width: 100% !important; margin: 0 !important; }
.experiences .at-mag-card__thumbnail { width: 100% !important; margin: 0 !important; border-radius: 0 !important; }
.experiences .at-mag-card__thumbnail img { border-radius: 0 !important; }
.experiences .at-mag-card__title, .experiences .at-mag-card__cta, .experiences-label { margin-left: 16px !important; margin-right: 16px !important; }
.experiences .at-mag-card__cta { width: calc(100% - 32px) !important; box-sizing: border-box; }
/* ---------- 7. Homepage ---------- */
/* Section order on phones (visual only; DOM/desktop order unchanged) */
#main:has(> .home-today) {
display: flex;
flex-direction: column;
gap: var(--mob-section-gap);
padding-bottom: 4px;
}
#main:has(> .home-today) > * { order: 50; margin-top: 0 !important; margin-bottom: 0 !important; }
#main:has(> .home-today) > .hero { order: 1; }
#main:has(> .home-today) > .home-today { order: 2; }
#main:has(> .home-today) > .at-mag-section { order: 3; } /* 세 개의 공간 before the exhibitions */
#main:has(> .home-today) > .home-ex { order: 4; }
#main:has(> .home-today) > .plan-visit { order: 5; }
#main:has(> .home-today) > .home-edu { order: 6; }
#main:has(> .home-today) > .naver-reviews { order: 7; }
#main:has(> .home-today) > .home-insta { order: 8; } /* Instagram feed under the reviews */
#main:has(> .home-today) > .mag-spaces { order: 9; } /* How to Experience above About */
#main:has(> .home-today) > .editorial-section { order: 10; }
#main:has(> .home-today) > .banners { order: 11; }
#main:has(> .home-today) > .index-newsletter { order: 12; }
#main:has(> .home-today) > .section-break { display: none; }
/* Hero: full-bleed photo from the very top (the header floats over it,
transparent, white logo); the caption block sits below the photo. */
body:has(.home-today) { padding-top: 0 !important; }
body:has(.home-today):not(.is-scrolled) #site-header { background: transparent !important; }
body:has(.home-today):not(.is-scrolled) #site-header .header-emblem img { filter: none !important; }
.hero {
position: relative;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
border-radius: 0;
overflow: hidden;
background: #FFFFFF;
}
.hero-image { position: relative; height: 520px; background: #000; }
.hero-pagination { display: none !important; }
/* top scrim only — keeps the white logo legible over bright skies */
.hero-veil {
display: block !important;
position: absolute; left: 0; right: 0; top: 0;
height: 200px;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.50) 0px, rgba(0, 0, 0, 0.28) 90px, rgba(0, 0, 0, 0) 200px) !important;
}
.hero-content {
position: static !important;
inset: auto !important;
display: flex;
flex-direction: column;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 2px !important;
padding: 18px 16px 4px !important;
text-align: left !important;
background: #FFFFFF;
border-radius: 0;
color: var(--mob-ink);
}
.hero-title { margin: 0 !important; width: 100%; text-align: left !important; } /* full width: with the
inside, a shrink-wrapped h1 would be as narrow as its widest line */
.hero-title-ko {
font-family: var(--mob-sans) !important;
font-size: 26px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
letter-spacing: -0.01em !important;
color: var(--mob-ink) !important;
text-shadow: none !important;
text-align: left !important;
margin: 0 !important;
}
/* one line on phones: the wrapped
becomes a word space */
.hero-title-br br { display: none; }
.hero-title-br::after { content: " "; }
.hero-title-en {
display: block !important;
font-family: var(--mob-serif) !important;
font-style: normal !important;
font-size: 15px !important;
line-height: 1.3 !important;
color: var(--mob-muted-2) !important;
text-shadow: none !important;
text-align: left !important;
margin: 2px 0 0 !important;
}
.hero-tagline-group { margin: 6px 0 0 !important; gap: 0 !important; align-items: flex-start !important; }
.hero-subheading-ko {
font-size: 14px !important;
line-height: 1.4 !important;
color: var(--mob-ink) !important;
text-shadow: none !important;
text-align: left !important;
max-width: none !important;
margin: 0 !important;
}
body .hero-content .hero-subheading-en[lang="en"] { display: none !important; }
.hero-ctas {
display: flex !important;
flex-direction: row !important;
gap: 8px !important;
width: 100%;
margin: 12px 0 0 !important;
}
.hero-ctas .btn {
flex: 1 1 0;
min-width: 0;
height: 44px;
min-height: 44px !important;
padding: 0 12px !important;
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: 6px;
border-radius: 999px !important;
font-family: var(--mob-sans);
font-size: 15px !important;
font-weight: 500;
line-height: 44px;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* Both hero buttons share the white style */
.hero-ctas .btn-primary--glass { background: rgba(255, 255, 255, 0.72) !important; color: var(--mob-ink) !important; border: 0.5px solid rgba(0, 0, 0, 0.12) !important; }
body .hero-ctas .hero-cta-en { display: none !important; } /* Korean label only on the hero buttons */
@media (max-height: 640px) { .hero-image { height: 440px; } }
/* Today line under the hero buttons: plain text, not a control */
#main:has(> .home-today) > .home-today { margin-top: -18px !important; } /* 14px below the buttons (hero 4px + section gap 28px − 18px) */
.home-today { display: block !important; padding: 0 16px; }
/* One row: [badge ● 개관중] …… 10:30 ~ 19:00 */
.home-status {
display: grid; /* [badge] [hours →] — never wraps */
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 8px;
row-gap: 8px;
margin: 0;
font-family: var(--mob-sans);
font-size: clamp(12px, 4.4vw, 17px); /* 17px from 386px up, 14px at 320px */
line-height: 1.4;
text-align: left;
cursor: default;
word-break: keep-all;
}
.home-status__badge {
display: none; /* shown once the script has set data-state */
align-items: center;
gap: clamp(6px, 2vw, 8px);
min-height: clamp(30px, 9.4vw, 37px);
padding: 0 clamp(11px, 3.8vw, 15px);
border-radius: 999px;
background: rgba(0, 0, 0, 0.05);
color: #5E5E62;
font-weight: 500;
white-space: nowrap;
}
.home-status__badge[data-state] { display: inline-flex; }
.home-status__badge[data-state="open"] { background: #E6F4EA; color: #176B3B; } /* ● 개관중 */
.home-status__badge[data-state="soon"] { background: #FFF1DC; color: #9A4D00; } /* ● 곧 마감 */
.home-status__dot { width: clamp(7px, 2.3vw, 9px); height: clamp(7px, 2.3vw, 9px); border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px currentColor; } /* ○ */
.home-status__badge[data-state="open"] .home-status__dot,
.home-status__badge[data-state="soon"] .home-status__dot { background: currentColor; box-shadow: none; } /* ● */
.home-status__hours { color: #3A3A3C; white-space: nowrap; font-variant-numeric: tabular-nums; justify-self: end; text-align: right; }
/* No script: badge hidden, the static "화–일 10:30 ~ 19:00" reads as a plain line */
/* Section titles: Korean 20px/500 + English 14px gray serif, no red period */
.home-ex__title, .at-mag-section__title, .plan-visit__eyebrow, .home-edu__title,
.naver-reviews__eyebrow, .editorial-section__eyebrow, .banners__title {
display: flex !important;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
margin: 0 !important;
text-align: left !important;
}
.home-ex__title-ko, .at-mag-section__title-ko, .plan-visit__eyebrow-ko, .home-edu__title-ko,
.naver-reviews__eyebrow > [lang="ko"], .editorial-section__eyebrow-ko, .banners__title-ko,
.index-newsletter__title {
display: inline !important;
font-family: var(--mob-sans) !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
letter-spacing: -0.01em !important;
color: var(--mob-ink) !important;
margin: 0 !important;
}
body .home-ex__title-en, body .at-mag-section__title-en, body .plan-visit__eyebrow-en, body .home-edu__title-en,
body .naver-reviews__eyebrow > [lang="en"], body .editorial-section__eyebrow-en, body .banners__title-en {
display: inline !important;
font-family: var(--mob-serif) !important;
font-style: normal !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--mob-muted-2) !important;
margin: 0 !important;
}
.home-ex__title .period, .at-mag-section__title .period, .plan-visit__eyebrow .period,
.home-edu__title .period, .naver-reviews .period, .editorial-section__eyebrow .period,
.banners__title .period { display: none !important; }
/* Current exhibitions: stacked full-width cards, 전체 보기 on the right */
.home-ex { padding: 0 !important; }
.home-ex__grid { display: block !important; border: 0 !important; padding: 0 !important; }
.home-ex__title-wrap {
padding: 0 var(--mob-gutter);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: var(--mob-title-gap);
}
.home-ex__all {
display: inline-flex !important;
align-items: center;
flex: none;
min-height: 44px;
margin: -12px 0;
font-family: var(--mob-sans);
font-size: 14px;
color: var(--mob-ink);
text-decoration: none;
}
.home-ex-detail { display: none !important; }
.home-ex__images { display: grid !important; grid-template-columns: 1fr !important; gap: var(--mob-tile-gap) !important; }
.home-ex__item { display: block; text-decoration: none; color: var(--mob-ink); }
.home-ex__item picture {
display: block;
margin: 0 !important;
width: 100% !important;
border-radius: 0;
overflow: hidden;
}
.home-ex__item img { display: block; width: 100%; height: auto; }
.home-ex__caption {
display: block;
padding: 10px 16px 0 !important;
text-align: left !important;
}
.home-ex__card-title { display: block; }
.home-ex__card-title-ko { font-family: var(--mob-sans) !important; font-size: 17px !important; font-weight: 500 !important; line-height: 1.3 !important; color: var(--mob-ink) !important; }
.home-ex__dates { display: block; margin-top: 2px !important; font-family: var(--mob-sans) !important; font-size: 13px !important; letter-spacing: 0 !important; color: var(--mob-muted-2) !important; }
.ex-card__badge { display: inline-flex; margin-top: 8px; }
/* Three spaces (homepage only — .at-mag-card is shared with experiences.html,
so every rule here is scoped to .at-mag-section): horizontal snap row of 230×300 cards with a glass label */
.at-mag-section { padding: 0 !important; }
.at-mag-section__grid { display: block !important; border: 0 !important; padding: 0 !important; }
.at-mag-section__title-wrap { padding: 0 var(--mob-gutter); margin-bottom: var(--mob-title-gap); }
.at-mag-section__main { padding: 0 !important; }
.at-mag-section__cards {
display: flex !important;
gap: 12px !important;
padding: 0 16px 4px !important;
margin: 0 !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 0 16px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.at-mag-section__cards::-webkit-scrollbar { display: none; }
.at-mag-section .at-mag-card {
position: relative;
flex: 0 0 230px !important;
width: 230px !important;
height: auto !important;
margin: 0 !important;
border-radius: 0;
overflow: visible;
scroll-snap-align: start;
display: block !important;
text-decoration: none;
background: transparent;
}
.at-mag-section .at-mag-card__thumbnail { position: relative !important; inset: auto !important; margin: 0 !important; aspect-ratio: auto !important; height: 300px !important; border-radius: 20px; overflow: hidden; background: #EDEAE4; }
.at-mag-section .at-mag-card__thumbnail picture, .at-mag-section .at-mag-card__thumbnail img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
.at-mag-section .at-mag-card__title {
position: static !important;
display: flex !important;
flex-direction: column;
gap: 2px;
margin: 0 !important;
padding: 10px 2px 0 !important;
background: none;
text-align: left !important;
}
.at-mag-section .at-mag-card__title-en { font-family: var(--mob-sans) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.2 !important; color: var(--mob-ink) !important; }
.at-mag-section .at-mag-card__title-sub { font-family: var(--mob-sans) !important; font-size: 12px !important; line-height: 1.3 !important; color: var(--mob-muted-2) !important; }
body .at-mag-section .at-mag-card .at-mag-card__name-en { display: inline !important; font-family: var(--mob-serif); font-size: 12.5px; }
body .at-mag-section .at-mag-card .at-mag-card__sep { display: inline !important; }
.at-mag-section .at-mag-card__cta { display: none !important; }
/* Plan your visit: ticket (design D), paragraph, text links; the photo is desktop-only */
.plan-visit { padding: 16px 16px 0 !important; }
.plan-visit__container { padding: 0 !important; }
.plan-visit__photo { display: none !important; }
.plan-visit__grid { display: block !important; }
.plan-visit__right { display: block !important; }
.pv-ticket { margin-top: 14px; }
/* Plan Your Visit links: always one row; type and gaps scale with the viewport (12px floor), 48px tap height kept */
.pv-links { flex-wrap: nowrap !important; justify-content: space-between; column-gap: clamp(8px, 2.5vw, 22px) !important; }
.pv-links a { font-size: clamp(12px, 3.75vw, 15px) !important; white-space: nowrap; flex: 0 0 auto; }
.pv-ticket__label { font-family: var(--mob-serif) !important; }
body .plan-visit .plan-visit__eyebrow-en { color: #5E5E62 !important; opacity: 1 !important; } /* 4.5:1 on the beige */
/* Education program: the Color Make photo runs full bleed; the text keeps the 16px gutter */
.home-edu { padding: 0 !important; }
.home-edu__inner {
display: flex !important;
flex-direction: column;
padding-left: 0 !important;
padding-right: 0 !important;
gap: 0; /* the desktop grid gap (28px) is folded into each child's own margin below */
background: #FFFFFF;
border: 0;
border-radius: 0;
overflow: hidden;
}
/* Order on phones: small label (the section's h2) → logo → photo → text. The body and head
wrappers are dissolved (display: contents) so their children can be ordered next to the photo;
each child carries the 16px gutter the wrapper used to provide. */
.home-edu__body, .home-edu__head { display: contents !important; }
/* 1. Label "체험프로그램 · Education Program": the h2 restyled small and centred; it sits 28px
below the previous section (the #main gap). The middle dot is drawn by CSS. */
.home-edu .home-edu__title { order: 1; justify-content: center; gap: 0; margin: 0 16px !important; text-align: center !important; }
.home-edu .home-edu__title-ko { font-size: 19px !important; font-weight: 600 !important; line-height: 1.4 !important; color: var(--mob-ink) !important; }
body .home-edu .home-edu__title-en { font-size: 17.5px !important; line-height: 1.4 !important; color: #5E5E62 !important; }
body .home-edu .home-edu__title-en::before { content: '·'; margin: 0 7px; font-family: var(--mob-sans); font-size: 16.5px; color: #5E5E62; }
/* 2. Logo: 192px wide, 10px under the label, no empty space around it */
.home-edu__logo { order: 2; width: 192px !important; margin: 10px auto 0 !important; }
.home-edu__logo img { display: block; width: 100%; height: auto; }
/* 3. Photo: full bleed, 300px tall, 20px under the logo */
.home-edu__media { order: 3; margin: 20px 0 0 !important; }
.home-edu__media picture, .home-edu__media-link { display: block; }
.home-edu__media img { display: block; width: 100%; height: 300px; border-radius: 0 !important; object-fit: cover; }
/* 4. The three paragraphs, 22px under the photo (unchanged below this point) */
.home-edu__desc { order: 4; margin: 22px 16px 0; }
.home-edu__desc p { font-family: var(--mob-sans); font-size: 14px; line-height: 1.6; color: var(--mob-ink); margin: 0 0 4px; }
.home-edu__details { order: 5; margin: 40px 16px 0 !important; } /* 28 (former grid gap) + 12: unchanged on screen */
.home-edu__detail { display: flex; justify-content: space-between; gap: 12px; min-height: 40px; align-items: center; padding: 0 !important; border-top: 0.5px solid rgba(0, 0, 0, 0.1); }
.home-edu__detail dt { font-family: var(--mob-sans); font-size: 13px; color: var(--mob-muted-2); }
.home-edu__detail dd { margin: 0; font-family: var(--mob-sans); font-size: 14px; color: var(--mob-ink); text-align: right; }
.home-edu__note { font-family: var(--mob-sans) !important; font-size: 13px !important; line-height: 1.5 !important; color: var(--mob-muted-2) !important; order: 6; margin: 38px 16px 0 !important; } /* 28 + 10: unchanged on screen */
.home-edu__cta { order: 7; margin: 40px 16px 16px !important; } /* 28 + 12: unchanged on screen */
/* Reviews: white cards */
.naver-reviews { padding: 0 var(--mob-gutter) !important; }
/* heading + subtitle + more-link aligned with the review text inside the cards (card padding 16px + 0.5px border) */
.naver-reviews__head { text-align: left !important; margin: 0 0 12px !important; padding: 0 0 0 17px !important; }
.naver-reviews__eyebrow > [aria-hidden="true"] { display: none !important; }
.naver-reviews__title { font-family: var(--mob-sans) !important; font-size: 13px !important; font-weight: 400 !important; color: var(--mob-muted-2) !important; margin: 2px 0 0 !important; line-height: 1.4 !important; }
.naver-reviews__subtitle { display: none !important; }
.naver-grid { display: grid !important; grid-template-columns: 1fr !important; gap: var(--mob-card-gap) !important; padding: 0 !important; margin: 0 !important; }
.naver-card {
margin: 0 !important;
padding: var(--mob-card-pad) !important;
background: #FFFFFF;
border: 0.5px solid var(--mob-hair);
border-radius: var(--mob-radius);
}
.naver-card__quote-ko { font-family: var(--mob-sans) !important; font-size: 15px !important; line-height: 1.7 !important; color: var(--mob-ink) !important; margin: 0 !important; }
.naver-card__attr { font-family: var(--mob-sans) !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--mob-muted-2) !important; margin: 10px 0 0 !important; }
.naver-reviews__all { display: inline-flex !important; align-items: center; min-height: 44px; margin: 6px 0 0 17px !important; font-family: var(--mob-sans); font-size: 14px !important; color: var(--mob-ink); }
/* Instagram feed under the reviews (phone only; desktop keeps its tile in 방문 안내) */
/* Instagram wall: inside 24px side margins, 44px above the handle, 48px below the wall,
hairline dividers aligned to those margins */
.home-insta { margin: 0 24px !important; padding: 44px 0 48px !important; }
.home-insta__handle { font-family: var(--mob-sans); font-size: 14px; color: #3A3A3C; }
.home-insta__rule { width: 24px; margin-top: 10px; }
.home-insta__wall { margin-top: 24px; }
/* About (editorial statement): white card */
.editorial-section { padding: 0 var(--mob-gutter) !important; }
.editorial-section__grid { display: block !important; border: 0 !important; padding: 0 !important; }
.editorial-section__body {
margin: var(--mob-title-gap) 0 0;
padding: var(--mob-card-pad);
background: #FFFFFF;
border: 0.5px solid var(--mob-hair);
border-radius: var(--mob-radius);
}
.editorial-section__statement { margin: 0 !important; }
.editorial-section__statement-ko { font-family: var(--mob-sans) !important; font-size: 15px !important; line-height: 1.75 !important; color: var(--mob-ink) !important; }
/* Experiences slider: rounded card */
.mag-spaces { margin: 0 !important; border-radius: 0; overflow: hidden; }
/* timing ring sits right after the space name instead of hugging the far right edge */
.mag-spaces__ring { margin-left: 14px !important; margin-right: auto; }
.mag-spaces__inner { min-height: 0 !important; height: 560px !important; }
/* Banners: each pane a card */
.banners { display: grid !important; gap: 12px; padding: 0 !important; }
.banners__pane {
margin: 0 !important;
border-radius: 0 !important;
overflow: hidden;
}
/* Newsletter: white card */
.index-newsletter { padding: 0 var(--mob-gutter) !important; }
.index-newsletter__inner {
padding: 18px 16px !important;
background: #FFFFFF;
border: 0.5px solid var(--mob-hair);
border-radius: var(--mob-radius);
text-align: left !important;
}
.index-newsletter__eyebrow { display: none !important; }
.index-newsletter__title { display: block !important; }
.index-newsletter__sub { font-family: var(--mob-sans) !important; font-size: 13px !important; color: var(--mob-muted-2) !important; margin: 6px 0 12px !important; }
/* Exhibition page: the same compact card, between 프로그램 and 이전 전시 */
.exhibition-newsletter { padding: 18px 16px !important; border: 0.5px solid var(--mob-hair) !important; border-radius: var(--mob-radius) !important; gap: 0 !important; }
.exhibition-newsletter-title { font-family: var(--mob-sans) !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1.3 !important; color: var(--mob-ink) !important; }
.exhibition-newsletter-sub { font-family: var(--mob-sans) !important; font-size: 13px !important; font-weight: 400 !important; color: var(--mob-muted-2) !important; margin: 6px 0 12px !important; }
/* ---------- 8. Visit page (mobile) ----------
New blocks (.vm) sit right after the hero photo; the old hours, admission,
visitor-info, directions, plan-your-visit and Instagram sections are hidden
on phones only. Desktop layout is unchanged. */
.vm-sr { position: absolute; left: -9999px; }
#hours, #admission, #profile, #directions, #prepare, .instagram-feed-section { display: none !important; }
.vp-hero .vp-hero-eyebrow, .vp-hero .vp-hero-lede, .vp-hero .vp-hero-info { display: none !important; }
.vp-hero { padding-bottom: 12px !important; }
body .vp-hero-h1 > span { display: inline !important; } /* 방문 + Visit on one line */
/* Hero: one image, full bleed, 180px, no overlays */
.vp-hero-photo { position: relative; height: 180px !important; margin: 0 !important; border-radius: 0 !important; overflow: hidden; }
.vp-hero-photo .vp-hero-slide { display: none !important; }
.vp-hero-photo .vp-hero-slide:first-of-type { display: block !important; opacity: 1 !important; position: absolute; inset: 0; }
.vp-hero-photo .vp-hero-slide:first-of-type img { width: 100%; height: 100%; object-fit: cover; }
.vp-hero-pagination { display: none !important; }
/* Title row: 방문 Visit on the left, live status pill on the right */
.vp-hero .vp-hero-text { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.vp-hero .vp-hero-h1 { margin: 0 !important; }
.vm-badge {
flex: none; margin-left: auto !important; /* stays right-aligned if a long status wraps to its own line */
display: inline-flex; align-items: center; gap: 6px;
height: 32px; margin: 0; padding: 0 12px;
border-radius: 16px;
background: #F2F0EC;
font-family: var(--mob-sans); font-size: 13px; line-height: 1; color: var(--mob-ink);
white-space: nowrap;
}
.vm-badge > span:nth-child(2) { font-weight: 500; }
.vm-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: #8E8E93; }
.vm-badge__dot.is-open { background: #1F8A4C; }
.vm-badge__sep, .vm-badge__detail { color: var(--mob-muted-2); }
/* Shared pieces */
.vm { display: flex; flex-direction: column; gap: 28px; padding: 16px 16px 8px; }
.vm-card { background: #FFFFFF; border: 0.5px solid var(--mob-hair); border-radius: var(--mob-radius); overflow: hidden; }
.vm-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 12px; font-family: var(--mob-sans); font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--mob-ink); }
body .vm-title .vm-title__en { display: inline !important; font-family: var(--mob-serif); font-size: 14px; font-weight: 400; color: var(--mob-muted-2); }
.vm-note { margin: 10px 2px 0; font-family: var(--mob-sans); font-size: 13px; line-height: 1.6; color: var(--mob-muted-2); }
/* Location card */
.vm-loc__body { padding: 16px; }
.vm-loc__name { margin: 0; font-family: var(--mob-sans); font-size: 17px; font-weight: 500; color: var(--mob-ink); }
.vm-loc__addr { margin: 6px 0 0; font-family: var(--mob-sans); font-size: 14px; line-height: 1.5; color: var(--mob-ink); }
body .vm-loc__addr-en { display: block !important; margin: 2px 0 0; font-family: var(--mob-serif); font-size: 13px; line-height: 1.4; color: var(--mob-muted-2); }
.vm-loc__btns { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; }
.vm-loc__sub { display: flex; gap: 8px; }
.vm-loc__sub .vm-btn { flex: 1 1 0; min-width: 0; }
.vm-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 24px; font-family: var(--mob-sans); font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vm-btn--primary { background: #DA0A1A; color: #FFFFFF; }
.vm-btn--primary:active { background: #B00815; }
.vm-btn--soft { background: #F2F0EC; color: var(--mob-ink); }
.vm-btn--soft:active { background: #E4E1DB; }
.vm-btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vm-btn:focus-visible { outline: 2px solid #C0392B; outline-offset: 2px; }
.vm-parking { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 12px 0 0; font-family: var(--mob-sans); font-size: 13px; line-height: 1.4; color: #3A3A3C; }
.vm-parking svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* List cards (iOS settings style) */
.vm-list { margin: 0; }
.vm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 16px; border-top: 0.5px solid rgba(0, 0, 0, 0.1); }
.vm-row:first-child { border-top: 0; }
.vm-row dt { flex: none; font-family: var(--mob-sans); font-size: 15px; color: var(--mob-ink); }
.vm-row dd { margin: 0; font-family: var(--mob-sans); font-size: 15px; line-height: 1.4; color: var(--mob-ink); text-align: right; }
/* Good to Know: shared accordion rows (styles/accordion.css) inside the white card */
.vm-sec .cm-faq-toggle { margin: -8px 0 4px; }
.vm-card.cm-faq { margin-top: 0; border-top: 0; }
.vm-card .cm-faq__item:last-child { border-bottom: 0; }
.vm-card .cm-faq__item summary { justify-content: flex-start; padding-left: 16px; padding-right: 16px; font-family: var(--mob-sans); }
.vm-card .cm-faq__item summary::after { margin-left: auto; } /* Korean + English together on the left, the + on the right */
body .cm-faq__item summary .vm-acc__en { display: inline !important; font-family: var(--mob-serif); font-size: 13px; font-weight: 400; color: var(--mob-muted-2); }
.vm-acc__panel { padding: 0 16px 14px; }
.vm-acc__p { margin: 0 0 10px; font-family: var(--mob-sans); font-size: 14px; line-height: 1.7; color: var(--mob-ink); }
.vm-acc__p:last-child { margin-bottom: 0; }
.vm-acc__sub { display: block; margin: 0 0 2px; font-size: 12.5px; font-weight: 500; color: var(--mob-muted-2); }
/* FAQ: same card + title style; first 5 until "모두 보기" */
#faq.vp-section { display: block !important; padding: 0 16px !important; margin: 0 !important; }
#faq .vp-section-label { display: none !important; }
#faq .vp-section-content { padding: 0 !important; background: #FFFFFF; border: 0.5px solid var(--mob-hair); border-radius: var(--mob-radius); overflow: hidden; }
#faq .vp-section-h2 { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 !important; padding: 16px 16px 6px; font-family: var(--mob-sans) !important; font-size: 20px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--mob-ink) !important; }
#faq .vp-section-h2 [aria-hidden="true"] { display: none; }
#faq .vp-section-h2 [lang="ko"] { font-family: var(--mob-sans) !important; font-style: normal !important; font-weight: 500 !important; font-size: 20px !important; letter-spacing: 0 !important; }
body #faq .vp-section-h2 .keep-en { font-family: var(--mob-serif) !important; font-size: 14px !important; font-weight: 400 !important; color: var(--mob-muted-2) !important; letter-spacing: 0 !important; text-transform: none !important; }
#faq .cm-faq-toggle { margin: -4px 16px 2px; }
#faq .cm-faq__item { margin: 0 !important; border-top: 0.5px solid rgba(0, 0, 0, 0.1) !important; border-bottom: 0 !important; }
#faq .cm-faq__item summary { padding-left: 16px; padding-right: 16px; font-family: var(--mob-sans); }
#faq .vp-accordion-body { padding: 0 16px 14px !important; }
#faq:not(.vm-faq--all) .cm-faq__item:nth-of-type(n+6) { display: none !important; }
.vm-faq-more { display: flex; align-items: center; justify-content: center; width: calc(100% - 32px); height: 48px; margin: 4px 16px 16px; border: 0.5px solid rgba(0, 0, 0, 0.15); border-radius: 24px; background: #FFFFFF; font-family: var(--mob-sans); font-size: 15px; font-weight: 500; color: var(--mob-ink); cursor: pointer; }
.vm-faq-more:focus-visible { outline: 2px solid #C0392B; outline-offset: 2px; }
#faq .vp-faq-footer { padding: 0 16px 16px !important; margin: 0 !important; font-size: 13px !important; color: var(--mob-muted-2); }
/* Copy toast */
.vm-toast { position: fixed; left: 50%; bottom: calc(var(--mob-tab-h) + var(--mob-tab-inset) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 70; transform: translate(-50%, 8px); padding: 10px 16px; border-radius: 20px; background: rgba(17, 17, 17, 0.88); color: #FFFFFF; font-family: var(--mob-sans); font-size: 14px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.vm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .vm-toast { transition: none; } }
/* ---------- 9. Footer tap targets (accessibility only) ----------
Every footer link gets a 48px-tall hit area from its own padding, with
at least 8px to the next link. Text size, colour, order and wording are
unchanged. Overrides the footer CSS copied inline into each page. */
.site-footer .footer-nav-list { row-gap: 8px; }
.site-footer .footer-nav-list a { /* 13px text, was 17–24px tall */
display: flex;
align-items: center;
min-height: 48px;
padding: 15px 0;
box-sizing: border-box;
}
.site-footer .value-ko a, /* phone, email: was 18px tall */
.site-footer .footer-social-links a { /* Instagram, Naver Maps: was 13.5–16.6px */
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 15px 0;
box-sizing: border-box;
}
}