/* Shared geometry for both directions. Colours and faces come from each direction's stylesheet.
   Headings: --h1-comp / --h2-comp are the sizes measured on the approved comps at the same viewport width.
   They are set at 80% of that, applied ONCE here through --heading-scale (never again elsewhere), so the
   photographs and the body copy keep their room. */
:root {
  --heading-scale: .8;
  --heading-min: 1.5rem;
  --gutter: clamp(16px, 5.5vw, 88px);
  --header-h: 84px;
  --ko: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); background: var(--page); }
/* Smooth only for in-page link clicks (the link has focus); a direct #anchor load or back navigation jumps. */
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body { margin: 0; background: var(--page); color: var(--text); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--text); color: var(--page); border-radius: 8px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Type roles */
.h1, .h2 { font-family: var(--display); font-weight: var(--display-weight); text-wrap: balance; color: var(--heading, inherit); }
.h1 { font-size: max(var(--heading-min), calc(var(--heading-scale) * var(--h1-comp))); line-height: var(--h1-lh, 1.04); letter-spacing: var(--h-track, 0); }
.h2 { font-size: max(var(--heading-min), calc(var(--heading-scale) * var(--h2-comp))); line-height: var(--h2-lh, 1.08); letter-spacing: var(--h-track, 0); }
.label { font: 600 .78rem/1.4 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--label); }
.label .ko, h3 .ko { font-family: var(--ko); font-weight: 500; letter-spacing: .06em; text-transform: none; margin-left: .35em; white-space: nowrap; }
.label .ko::before, h3 .ko::before { content: "·"; margin-right: .6em; }
.line { font-size: clamp(1rem, .96rem + .22vw, 1.1875rem); max-width: 31em; text-wrap: pretty; }
.copy { display: grid; gap: 16px; align-content: start; }
.copy .h1, .copy .h2 { margin-block: 2px 4px; }

/* Actions */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; border-radius: var(--btn-radius); background: var(--btn); color: var(--btn-text); font: 500 1.0625rem/1 var(--body); text-decoration: none; letter-spacing: .01em; transition: transform .18s var(--ease), background-color .18s; }
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: .98rem; }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-ghost:hover { background: transparent; }
.link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--link); font-weight: 500; text-decoration: none; justify-self: start; }
.link .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.link .arr, .concerns .arr { text-decoration: none; display: inline-block; transition: transform .18s var(--ease); }
.link:hover .arr, .concerns a:hover .arr { transform: translateX(3px); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 30; padding-top: env(safe-area-inset-top, 0px); transition: background-color .25s, box-shadow .25s; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--header-h); padding-inline: var(--gutter); }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { width: 148px; height: auto; }
.nav { display: flex; align-items: center; gap: 34px; }
.nav-links { display: flex; gap: 32px; }
.nav-links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--nav-text); font-weight: 500; text-decoration: none; }
.nav-links a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.menu-btn { display: none; }
/* The same page in the other language: a quiet text link beside Book, set in that language. */
.lang-switch { display: inline-flex; align-items: center; min-height: 44px; color: var(--nav-text); font-weight: 500; text-decoration: none; }
.lang-switch:lang(ko) { font-family: var(--ko); }
.lang-switch:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.site-header.is-scrolled { background: var(--header-bg); box-shadow: 0 1px 0 var(--header-line); }
@supports (backdrop-filter: blur(10px)) { .site-header.is-scrolled { background: var(--header-bg-blur); backdrop-filter: blur(14px) saturate(1.2); } }

/* Scenes: one plate per scene, words in the plate's quiet area on desktop, stacked with it on tablet and phone. */
.scene { position: relative; background: var(--field, var(--page)); color: var(--scene-text, var(--text)); }
.overlay { display: grid; grid-template-columns: minmax(0, 1fr); }
.plate { display: block; width: 100%; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
/* A plate with something laid on it (C's water drops): the box is the plate's own size at every width. */
.plate-box { position: relative; display: grid; container-type: inline-size; }
.plate-box > .plate { height: 100%; }

.concerns { display: grid; }
.concerns a { display: grid; gap: 2px; min-height: 44px; align-content: center; text-decoration: none; }
.c-word { font: var(--display-weight) 1.5rem/1.2 var(--display); color: var(--heading, inherit); }
.c-name { font-size: .95rem; color: var(--muted); }
.c-name .arr { margin-left: 8px; }
.concerns a:hover .c-name { text-decoration: underline; text-underline-offset: 5px; }

@media (min-width: 1024px) {
  .overlay > .plate, .overlay > .plate-box, .overlay > .copy, .overlay > .concerns { grid-area: 1 / 1; }
  .overlay > .plate, .overlay > .plate-box { min-height: 56.25vw; }
  .overlay > .copy { z-index: 1; align-self: center; padding: calc(var(--header-h) + 1vw) var(--gutter) 4vw; }
  .at-left > .copy { justify-self: start; width: var(--copy-w, 48vw); }
  .at-right > .copy { justify-self: end; width: var(--copy-w, 46vw); padding-left: 0; }
  .at-bottom-left > .copy { justify-self: start; align-self: end; width: var(--copy-w, 56vw); padding-bottom: 5.2vw; }
  .at-top > .copy { justify-self: center; align-self: start; text-align: center; justify-items: center; width: min(84vw, 1180px); padding-top: calc(var(--header-h) + 3.4vw); }
  .at-top > .copy .line { margin-inline: auto; }
  .at-top > .copy .actions { justify-content: center; }
  .at-top > .copy .link { justify-self: center; }
  .overlay > .concerns { z-index: 1; align-self: end; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 0 calc(var(--gutter) + 4vw) 3.4vw; text-align: center; }
  .concerns a { justify-items: center; }
}

@media (max-width: 1023px) {
  :root { --header-h: 68px; }
  .brand img { width: 124px; }
  .site-header { background: var(--header-bg); box-shadow: 0 1px 0 var(--header-line); }
  .overlay > .copy { padding: 36px var(--gutter) 60px; }
  .s-top { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
  .overlay > .concerns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; padding: 0 var(--gutter) 60px; }
  .s-concerns > .copy { padding-bottom: 28px; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  /* Tablets get their own, larger title scale under a large picture (not the phone scale stretched). */
  .h1 { font-size: var(--h1-tablet, clamp(2.6rem, 5.6vw, 3.3rem)); }
  .h2 { font-size: var(--h2-tablet, clamp(2.4rem, 5vw, 3rem)); }
  .overlay > .copy { padding: 48px var(--gutter) 80px; }
  .line { font-size: 1.15rem; }
  .btn { min-height: 52px; }
  .overlay > .concerns { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 80px; }
}
@media (max-width: 700px) {
  :root { --gutter: 16px; }
  body { font-size: 1rem; }
  .nav { position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px var(--gutter) 24px; background: var(--header-bg); box-shadow: 0 1px 0 var(--header-line); }
  .nav.is-open { display: flex; }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links a { min-height: 52px; font-size: 1.15rem; }
  .lang-switch { min-height: 52px; font-size: 1.05rem; }
  .menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 10px; background: none; border: 0; color: var(--nav-text); font: 500 1rem var(--body); }
  .menu-icon, .menu-icon::before { display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; transition: transform .2s; }
  .menu-icon::before { content: ""; position: absolute; top: 7px; }
  .menu-btn[aria-expanded="true"] .menu-icon { transform: translateY(3px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(-90deg); }
  .actions .btn { flex: 1 1 100%; }
}

/* Highlight strip on the first screen. Two identical lists drift left by half their width and loop; the second is
   hidden from readers. The pointer on the strip, or focus inside it, stops it; reduced motion makes it a plain row
   that scrolls by hand. Colours come from each direction (--hl-*). On desktop it lies along the bottom of the hero
   photograph. */
.hl-strip { position: relative; z-index: 2; overflow: hidden; background: var(--hl-bg); color: var(--hl-text); }
.hl-sprite { position: absolute; }
.hl-track { display: flex; width: max-content; animation: hl-move 64s linear infinite; }
.hl-list { display: flex; align-items: center; gap: 44px; margin: 0; padding: 0 22px; list-style: none; height: 56px; }
.hl-list li { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font: var(--hl-font); letter-spacing: var(--hl-track, .005em); }
.hl-list li + li::before { content: ""; width: 4px; height: 4px; margin-right: 34px; border-radius: 50%; background: var(--hl-dot); }
.hl-list .ico { width: 18px; height: 18px; color: var(--hl-ico); }
@keyframes hl-move { to { transform: translateX(-50%); } }
.hl-strip:hover .hl-track, .hl-strip:focus-within .hl-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hl-track { animation: none; }
  .hl-strip { overflow-x: auto; scrollbar-width: none; }
  .hl-list[aria-hidden="true"] { display: none; }
}
@media (min-width: 1024px) {
  .s-top > .hl-strip { grid-area: 1 / 1; align-self: end; }
}
@media (max-width: 1023px) {
  .hl-list { height: 50px; gap: 32px; }
  .hl-list li { font-size: .84rem; }
  .hl-list li + li::before { margin-right: 24px; }
}

/* Treatments: every treatment with what it is, how long and how much. Spacing does the grouping, not boxes. */
.tx-inner { padding: clamp(72px, 9vw, 148px) var(--gutter); display: grid; gap: clamp(52px, 6.5vw, 96px); }
.tx-top { display: grid; gap: 14px; max-width: 46rem; }
.tx-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 24px clamp(28px, 5vw, 88px); align-items: start; }
.tx-head { display: grid; gap: 10px; }
.tx-head h3 { font: var(--display-weight) clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.15 var(--display); color: var(--heading, inherit); letter-spacing: var(--h-track, 0); }
.tx-head h3 .ko { font-size: .62em; color: var(--label); }
.tx-note { font-size: .95rem; color: var(--muted); max-width: 26em; }
.tx-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 72px); }
.tx { display: grid; gap: 6px; align-content: start; min-width: 0; scroll-margin-top: calc(var(--header-h) + 28px); }
.tx-name { font: 600 1.1875rem/1.3 var(--body); color: var(--heading, inherit); }
.tx-meta { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: .95rem; color: var(--muted); }
.tx-price { color: var(--text); font-weight: 600; }
.tx-text { font-size: .98rem; color: var(--muted); max-width: 34em; text-wrap: pretty; }
.tx-book { font-size: .95rem; }
.tx:target .tx-name { color: var(--label); }
.tx-body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.tx-best { font-size: .92rem; margin-top: 2px; }
.tx-best-k { font: 600 .68rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--label); margin-right: .7em; white-space: nowrap; }
/* A still life beside each treatment (rows), or one object under each group title. */
.tx-group.is-rows .tx-list { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 3.6vw, 52px); }
.tx.has-pic { grid-template-columns: 176px minmax(0, 1fr); column-gap: clamp(20px, 2.6vw, 40px); align-items: start; }
.tx-pic { width: 176px; aspect-ratio: 1; object-fit: cover; border-radius: var(--pic-radius, 4px); }
.tx-group-pic { width: min(100%, 300px); aspect-ratio: 1; object-fit: cover; margin-top: 10px; border-radius: var(--pic-radius, 4px); }
@media (max-width: 1023px) {
  .tx-group { grid-template-columns: minmax(0, 1fr); }
  .tx-group-pic { width: min(56vw, 280px); }
}
@media (max-width: 700px) {
  .tx-list { grid-template-columns: minmax(0, 1fr); }
  .tx.has-pic { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; }
  .tx-pic { width: 96px; }
}

/* Reviews: a native horizontal scroller with snap points. The script only adds previous / next and the position,
   so it is a plain swipeable row without it. No autoplay. */
.rv-inner { padding-block: clamp(72px, 9vw, 148px); display: grid; gap: clamp(32px, 4vw, 60px); }
.rv-top { display: grid; gap: 14px; padding-inline: var(--gutter); justify-items: start; }
.rv-carousel { display: grid; gap: clamp(20px, 2.4vw, 32px); min-width: 0; }
.rv-track { position: relative; display: flex; gap: clamp(20px, 3vw, 56px); margin: 0; padding: 6px var(--gutter) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-track:focus-visible { outline-offset: -3px; }
.rv { flex: 0 0 min(82vw, var(--rv-w, 33rem)); scroll-snap-align: start; display: grid; }
.rv figure { margin: 0; display: grid; gap: 18px; align-content: space-between; }
.rv blockquote { margin: 0; }
.rv blockquote p { font: var(--rv-font); letter-spacing: var(--rv-track, 0); text-wrap: pretty; color: var(--heading, inherit); }
.rv figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; font-size: .92rem; }
.rv-name, .rv-src, .rv-about { display: inline-flex; align-items: center; min-height: 44px; }
.rv-name { font-weight: 600; }
.rv-src, .rv-about { color: var(--muted); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.rv-ctl { display: flex; align-items: center; gap: 14px; padding-inline: var(--gutter); }
html:not(.js) .rv-ctl { display: none; }
.rv-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: var(--text); font: 400 1.1rem/1 var(--body); cursor: pointer; transition: opacity .2s, transform .18s var(--ease); }
.rv-btn:active { transform: scale(.94); }
.rv-btn[disabled] { opacity: .3; cursor: default; }
.rv-track.is-drifting { scroll-snap-type: none; }
/* pause: two bars; play: a triangle */
.rv-play .i { display: block; width: 12px; height: 14px; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px); }
.rv-play.is-paused .i { width: 0; height: 0; margin-left: 4px; background: none; border-left: 12px solid currentColor; border-block: 7px solid transparent; }
.rv-count { min-width: 5.2em; text-align: center; font-size: .92rem; color: var(--muted); }
/* four controls on the narrowest phones (280px): tighter, never wider than the screen */
@media (max-width: 340px) { .rv-ctl { gap: 8px; } .rv-count { min-width: 3.6em; } }

/* Line icons (Lucide sprite): drawn as strokes in the text colour; the sprite itself takes no space. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Panel actions (B details, C how it works): a booking button and a quiet close. */
.tp-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }
.tp-close { min-height: 44px; padding: 0; border: 0; background: none; color: var(--muted); font: 500 .95rem var(--body); text-decoration: underline; text-underline-offset: 6px; cursor: pointer; }

/* Visit */
.addr { display: grid; justify-items: start; font-weight: 500; line-height: 1.5; }
.addr a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.addr span { display: inline-flex; align-items: center; min-height: 36px; font-weight: 400; }
.addr .ko { font-family: var(--ko); font-weight: 500; margin-left: .7em; }
.addr .ko::before { content: "·"; margin-right: .7em; }

/* Footer + phone action bar */
.site-footer { background: var(--foot-bg); color: var(--foot-text); padding: 48px var(--gutter) calc(30px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 28px; }
.foot { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 40px; align-items: center; }
.foot-logo { display: inline-flex; padding: 10px 14px; border-radius: 6px; background: var(--foot-logo-bg, transparent); }
.foot-logo img { width: 132px; }
.foot-contact { display: flex; flex-wrap: wrap; gap: 4px 24px; font-style: normal; align-items: center; }
.foot-contact a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.foot-contact a:hover { text-decoration: underline; text-underline-offset: 5px; }
.foot-copy { font-size: .9rem; opacity: .8; }
.sample-note { font-size: .82rem; opacity: .78; max-width: 64em; }
.action-bar { display: none; }
@media (max-width: 700px) {
  .foot { grid-template-columns: 1fr; }
  .action-bar { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; position: fixed; inset: auto 0 0; z-index: 25; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--header-bg); box-shadow: 0 -1px 0 var(--header-line); transform: translateY(110%); transition: transform .3s var(--ease); }
  .action-bar.is-on { transform: none; }
  .action-bar .btn { min-height: 48px; padding: 0 12px; }
  .action-bar .btn-ghost { color: var(--nav-text); }
  .action-bar .num { display: none; }
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Reveal: short, once. Content is visible without JS and with reduced motion. If scripting is on but the script
   never runs (blocked, failed), html has no .js class and the fallback animation shows everything after 2.5 s.
   Once the script runs it sets .js, so a scene reached a minute later still gets its reveal. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal] .copy > *, [data-reveal] .concerns > * { opacity: 0; transform: translateY(14px); }
  html:not(.js) [data-reveal] .copy > *, html:not(.js) [data-reveal] .concerns > * { animation: mein-show 0s 2.5s forwards; }
  [data-reveal].is-in .copy > *, [data-reveal].is-in .concerns > * { opacity: 1; transform: none; animation: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
  [data-reveal].is-in .copy > :nth-child(2) { transition-delay: .06s; }
  [data-reveal].is-in .copy > :nth-child(3) { transition-delay: .12s; }
  [data-reveal].is-in .copy > :nth-child(n+4) { transition-delay: .18s; }
  [data-reveal].is-in .concerns > * { transition-delay: .22s; }
  [data-reveal].is-instant .copy > *, [data-reveal].is-instant .concerns > * { transition: none !important; }
}
@keyframes mein-show { to { opacity: 1; transform: none; filter: none; } }

/* Booking page (book/): step 1 is our list of treatments, step 2 is me:in's Acuity calendar in a frame. The frame
   grows to the height the calendar reports (site.js); without the script it keeps this height and scrolls inside.
   Colours and faces per direction come from --bk-*. On narrow screens a chosen treatment folds the list into one
   line with Change, so the calendar comes right after it. */
.book { padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(28px, 4.5vw, 72px)) var(--gutter) clamp(72px, 8vw, 128px); background: var(--bk-field, var(--page)); }
.bk-inner { display: grid; gap: clamp(32px, 4vw, 56px); }
.bk-top { display: grid; gap: 14px; max-width: 46rem; }
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
.bk-pick, .bk-when { display: grid; gap: 20px; align-content: start; min-width: 0; }
.bk-step { display: flex; align-items: center; gap: 12px; font: 600 .8rem/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--label); }
.bk-n { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid currentColor; font-size: .82rem; letter-spacing: 0; }
.bk-groups { display: grid; gap: 28px; }
.bk-group { display: grid; gap: 8px; }
.bk-gt { font: 500 .76rem/1.4 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-inline: 16px; }
.bk-list { display: grid; gap: var(--bk-gap, 2px); }
.bk-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; min-height: 56px; padding: 14px 16px; border-radius: var(--bk-radius, 12px); background: var(--bk-opt, transparent); color: inherit; text-decoration: none; transition: background-color .2s, color .2s; }
.bk-opt:hover { background: var(--bk-hover); }
.bk-opt[aria-current="true"] { background: var(--bk-on); color: var(--bk-on-text); }
.bk-name { font: var(--bk-name-font); color: inherit; }
.bk-meta { font-size: .92rem; color: var(--muted); white-space: nowrap; }
.bk-note { grid-column: 1 / -1; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.bk-opt[aria-current="true"] .bk-meta, .bk-opt[aria-current="true"] .bk-note { color: inherit; opacity: .82; }
.bk-hint { font-size: .98rem; color: var(--muted); }
.bk-frame { border-radius: var(--bk-frame-radius, 8px); background: #FFFFFF; box-shadow: var(--bk-frame-shadow, none); overflow: hidden; }
.bk-frame iframe { display: block; width: 100%; height: 1120px; border: 0; }
.bk-fine { font-size: .88rem; line-height: 1.55; color: var(--muted); }
.bk-fine a { color: var(--link); text-underline-offset: 4px; }
.bk-picked:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--bk-radius, 12px); background: var(--bk-on); color: var(--bk-on-text); }
.bk-picked p { display: grid; gap: 4px; }
.bk-picked-k { font: 600 .7rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.bk-picked-v { font: var(--bk-name-font); }
.bk-change { min-height: 44px; padding: 0 18px; border: 1.5px solid currentColor; border-radius: 999px; background: none; color: inherit; font: 500 .95rem var(--body); cursor: pointer; }
@media (min-width: 1024px) {
  /* The words and step 1 share the left column; the calendar starts at the top of the right one. */
  .bk-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "top when" "pick when"; gap: 44px clamp(40px, 4.5vw, 80px); align-items: start; }
  .bk-grid { display: contents; }
  .bk-top { grid-area: top; }
  .bk-pick { grid-area: pick; }
  .bk-when { grid-area: when; }
  .bk-picked:not([hidden]) { display: none; }
}
@media (max-width: 1023px) {
  .bk-grid.is-picked .bk-groups { display: none; }
  .bk-grid.is-picked.is-open .bk-groups { display: grid; }
  /* the folded line already names the choice; the hint stays for screen readers */
  .bk-grid.is-picked .bk-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  .bk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The October promotion (both versions): a native dialog over a blurred page. Laid out like the owner's post: the
   words and offers on white with a pale motif arc, the gift on a navy band. Type comes from the version (--display,
   --body); the colours are the brand's own. The sheet scrolls inside itself on short screens. */
.promo { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #000C36; overflow: hidden; }
.promo[open] { display: grid; place-items: center; padding: 20px; }
.promo::backdrop { background: rgb(0 12 54 / .34); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); }
html.promo-open { overflow: hidden; }
.promo-reopen { position: fixed; right: max(24px, env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 26; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; background: #000C36; color: #FFFFFF; box-shadow: 0 4px 20px rgb(0 12 54 / .2); font: 600 .9rem/1.3 var(--body); cursor: pointer; }
.promo-reopen[hidden] { display: none; }
.promo-reopen .ico { color: #B8BEF4; }
.promo-reopen:hover { background: #253164; }
.promo-reopen:focus-visible { outline: 3px solid #858EE5; outline-offset: 4px; }
@media (max-width: 700px) {
  .promo-reopen { right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding: 0 16px; }
  body:has(.action-bar.is-on) .promo-reopen { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
.pm-sheet { position: relative; width: min(100%, 960px); max-height: calc(100dvh - 40px); overflow: auto; overscroll-behavior: contain; border-radius: 18px; background: #FFFFFF; box-shadow: 0 40px 120px -40px rgb(0 12 54 / .6); }
.pm-close { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .92); color: #000C36; font: 300 1.9rem/1 var(--body); cursor: pointer; box-shadow: 0 1px 3px rgb(0 12 54 / .14); }
.pm-close:hover { background: #ECEEFB; }
.pm-top { position: relative; display: grid; gap: 12px; padding: 30px 56px 4px; overflow: hidden; }
.pm-arc { position: absolute; top: -26px; right: -36px; width: 46%; max-width: 420px; pointer-events: none; }
.pm-arc path { fill: none; stroke: #ECEEFB; stroke-width: 20; }
.pm-arc circle { fill: #ECEEFB; }
.pm-top > :not(.pm-arc) { position: relative; }
.pm-logo { display: block; width: 116px; margin-bottom: 8px; }
.pm-logo img { width: 120px; }
.pm-label { font: 600 .76rem/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #505A9F; }
.pm-title:focus { outline: none; }   /* focused on open so reading starts at the heading; not a control */
.pm-title { font: 700 clamp(2rem, 1.2rem + 2.4vw, 3.1rem)/1.04 var(--display); letter-spacing: -.025em; color: #000C36; text-wrap: balance; }
.pm-intro { max-width: 46em; color: #3A4060; font-size: 1.02rem; line-height: 1.6; }
.pm-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding: 24px 56px 30px; }
.pm-offer { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid #000C36; }
.pm-kind { font: 600 .72rem/1.4 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #35407C; }
.pm-name { font: 700 1.4rem/1.2 var(--display); letter-spacing: -.015em; color: #505A9F; }
.pm-en { font-size: .78em; font-weight: 500; color: #505A9F; }
.pm-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid #E6E7F0; }
.pm-rows dt { color: #000C36; }
.pm-rows dd { margin: 0; font: 700 1.45rem/1 var(--display); color: #505A9F; }
.pm-price { font: 700 clamp(2.2rem, 1.6rem + 1.6vw, 2.9rem)/1 var(--display); letter-spacing: -.02em; color: #505A9F; }
.pm-list { display: grid; gap: 8px; }
.pm-list li { position: relative; padding-left: 18px; line-height: 1.45; }
.pm-list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: #858EE5; }
.pm-text { line-height: 1.5; }
.pm-reg { font-size: .9rem; line-height: 1.5; color: #3A4060; }
.pm-save { justify-self: start; padding: 5px 14px; border-radius: 999px; background: #ECEEFB; font-weight: 700; font-size: .92rem; }
.pm-location { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 24px; margin: 0 56px 30px; padding-top: 24px; border-top: 1px solid #E6E7F0; }
.pm-location-copy { display: grid; gap: 8px; min-width: 0; }
.pm-location h3 { font: 700 1.4rem/1.2 var(--display); letter-spacing: -.015em; }
.pm-location address { font-style: normal; line-height: 1.6; color: #3A4060; }
.pm-map-link { display: inline-flex; align-items: center; justify-self: start; gap: 8px; min-height: 44px; font-weight: 600; text-underline-offset: 5px; }
.pm-map { display: block; width: 100%; min-width: 0; height: 220px; border: 0; border-radius: 12px; background: #ECEEFB; }
.pm-gift { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 40px; padding: 26px 56px 22px; background: #000C36; color: #FFFFFF; overflow: hidden; }
.pm-gift::before { content: ""; position: absolute; left: 28%; bottom: -140px; width: 260px; height: 260px; border: 18px solid rgb(133 142 229 / .16); border-top-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(-45deg); pointer-events: none; }
.pm-gift-text { position: relative; display: grid; gap: 10px; }
.pm-gift h3 { font: 700 clamp(1.6rem, 1.2rem + 1vw, 2.1rem)/1.15 var(--display); letter-spacing: -.02em; }
.pm-gift p { color: #E1E3F4; line-height: 1.55; max-width: 40em; }
.pm-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
.pm-book { background: #858EE5; color: #000C36; border-radius: 999px; font-weight: 600; gap: 10px; }
.pm-book:hover { background: #A3AAEE; }
.pm-dm { display: inline-flex; align-items: center; min-height: 44px; color: #FFFFFF; font-weight: 500; text-underline-offset: 6px; }
.pm-fine { font-size: .8rem; color: #B9BDDD !important; }
.pm-gift-logo { position: relative; width: 150px; }
@media (max-width: 760px) {
  .promo[open] { padding: 10px; }
  .pm-sheet { max-height: calc(100dvh - 20px); border-radius: 14px; }
  .pm-top { padding: 28px 20px 0; }
  .pm-logo, .pm-logo img { width: 100px; }
  .pm-arc { width: 62%; right: -60px; top: -20px; }
  .pm-offers { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 24px 20px 30px; }
  .pm-location { grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 20px 26px; }
  .pm-gift { grid-template-columns: minmax(0, 1fr); padding: 28px 20px 24px; }
  .pm-gift-logo { display: none; }
  .pm-book { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .promo[open] .pm-sheet { animation: pm-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
  .promo[open]::backdrop { animation: pm-fade .45s ease both; }
  @keyframes pm-rise { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* Korean pages (/ko/). Latin words keep each direction's face; Hangul falls through to the Korean face next to it
   (a serif beside B's serif, a sans beside Poppins and Figtree). Words never break mid-word. Hangul sits larger on
   its em than Latin, so headings take a smaller share of the comp size and more line height; tracked capitals
   become plain small labels. */
html.is-ko body { word-break: keep-all; overflow-wrap: break-word; line-height: 1.75; }
html.is-ko .num, html.is-ko code { word-break: normal; }
html.is-ko { --heading-scale: .66; --h-track: -.01em; --h1-lh: 1.26; --h2-lh: 1.3; --hl-track: 0; }
html.is-ko.dir-b-room { --body: "Figtree", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --display: "Newsreader", "Noto Serif KR", "AppleMyungjo", serif; }
html.is-ko.dir-c-dew { --body: "Poppins", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --display: var(--body); }
html.is-ko .label, html.is-ko .tx-best-k { letter-spacing: .04em; font-size: .84rem; }
html.is-ko .bk-step, html.is-ko .bk-gt, html.is-ko .bk-picked-k, html.is-ko .pm-label, html.is-ko .pm-kind { letter-spacing: .04em; }
html.is-ko .line { max-width: 36em; }
@media (max-width: 700px) {
  html.is-ko { --heading-scale: .72; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  html.is-ko .h1 { font-size: clamp(2.1rem, 4.6vw, 2.7rem); }
  html.is-ko .h2 { font-size: clamp(1.95rem, 4.1vw, 2.45rem); }
}