/* venus-v2 — round-2 QA layer on top of the handoff design.
   Owns: nav lang toggle + booking pill, contact-rail dock/avoid, Venus Notes
   ledger, cinematic video chapter, collections modal v2, atelier reveals,
   FAQ frame, closing band aura, site footer. Loaded after venus-stage CSS. */

body{overflow-x:clip} /* decorative bleeds must never widen the page */

/* ── scrollbar: always reserved, so pages never reflow when it appears ──
   (the loading veil hid a document whose scrollbar arrived late — that width
   change was resizing every centred layout mid-load) */
html{overflow-y:scroll;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#7a2530 #ece6de}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#ece6de}
::-webkit-scrollbar-thumb{border:2px solid #ece6de;border-radius:999px;background:linear-gradient(180deg,#c9a24b,#7a2530)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#e3c67a,#5c1a1e)}
::-webkit-scrollbar-corner{background:#ece6de}
[data-venus-dark]{scrollbar-color:#c9a24b #5c1a1e}

/* ── nav: KR/EN readable, right cluster breathing room ─────────────── */
.vlang{display:inline-flex;align-items:center;gap:2px;margin-left:10px;padding:3px;border:1px solid rgba(131, 106, 49,0.35);border-radius:999px;background:rgba(245, 239, 230,0.7)}
.vlang em{display:none}
.vlang button{padding:6px 12px !important;border-radius:999px;font-family:Cinzel,serif;font-size:10px;font-weight:600;letter-spacing:0.14em;color:#836a31 !important;opacity:1 !important;transition:background .35s,color .35s}
.vlang button[aria-pressed="true"],.vlang button.v2-on{background:#7a2530 !important;color:#f5efe6 !important}
.vlang button[aria-pressed="true"] span,.vlang button.v2-on span{color:#f5efe6 !important}
[data-venus-dark] .vlang{border-color:rgba(201, 162, 75,0.4);background:rgba(92, 26, 30,0.5)}
[data-venus-dark] .vlang button{color:#c9a24b !important}
[data-venus-dark] .vlang button[aria-pressed="true"],[data-venus-dark] .vlang button.v2-on{background:#c9a24b !important;color:#5c1a1e !important}
[data-venus-dark] .vlang button[aria-pressed="true"] span{color:#5c1a1e !important}
.v2-book{display:inline-flex;align-items:center;margin-left:18px;padding:11px 26px;border-radius:999px;background:#7a2530;font-size:12.5px;font-weight:500;letter-spacing:0.08em;color:#f5efe6 !important;white-space:nowrap;transition:background .4s,transform .4s}
.v2-book:hover{background:#5c1a1e;color:#f5efe6 !important;transform:translateY(-1px)}
@media (max-width:1024px){.v2-book{display:none}}

/* ── ethereal veil: breathing bloom, drifting marble, letterspaced wordmark ── */
@keyframes v2ldbloom{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.75}50%{transform:translate(-50%,-50%) scale(1.14);opacity:1}}
@keyframes v2lddrift{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(-1.4%,-1.4%,0)}}
/* the stone only drifts on the first-visit hold; on page-to-page it must sit
   perfectly still so it reads as ONE continuous surface with the outgoing veil */
#v2ld .v2ld-stone{animation:none}
#v2ld.v2ld-first .v2ld-stone{animation:v2lddrift 18s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes v2ldline{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes v2ldrise{from{opacity:0;transform:translateY(14px);filter:blur(8px);letter-spacing:.62em}to{opacity:1;transform:none;filter:blur(0);letter-spacing:.42em}}
@keyframes v2ldfade{from{opacity:0}to{opacity:1}}
#v2ld .v2ld-w{animation:v2ldrise 2.2s cubic-bezier(.22,1,.36,1) both}
#v2ld .v2ld-s{animation:v2ldfade 1.6s cubic-bezier(.22,1,.36,1) .9s both}
@keyframes v2ldbreathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:1}}
/* loading ring: a champagne arc travelling round the shell while media preloads.
   The SVG element spins (predictable transform-origin); the arc only breathes
   its dash length — never transform the <circle> itself. */
@keyframes v2ldspin{to{transform:rotate(360deg)}}
@keyframes v2ldarc{0%,100%{stroke-dasharray:28 286}50%{stroke-dasharray:132 182}}
#v2ldlogo svg{transform-origin:50% 50%;animation:v2ldspin 2.4s linear infinite}
#v2ldlogo .v2ld-arc{animation:v2ldarc 3.4s cubic-bezier(.45,0,.55,1) infinite}
/* reduced motion: the veil may still cross-fade (opacity is not movement), but
   nothing inside it may spin, breathe, scale or blur away. */
@media (prefers-reduced-motion:reduce){
  #v2ld *{animation:none !important}
  #v2ldi{transform:none !important;filter:none !important;transition:opacity .8s linear !important}
}

/* ── between pages: marble dissolves in, no wordmark, no logo ── */
/* one flat composited surface: opacity only, nothing animated inside it, so the
   handoff between the outgoing veil and the incoming loader is seamless */
.v2-pageveil{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;background:#f5efe6;transition:opacity .42s linear;will-change:opacity;contain:strict}
.v2-pageveil-stone{position:absolute;inset:-6%;background:url('/img/marble-full-3.jpg') center/cover no-repeat;opacity:.5;mix-blend-mode:multiply}
.v2-pageveil-bloom{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,252,246,.96),rgba(245, 239, 230,.55) 40%,transparent 72%)}

/* ── contact rail: permanent dock, styled from first paint (no FOUC) ── */
.vrail{opacity:var(--railo,1);transition:opacity .3s cubic-bezier(.45,0,.55,1)}
.vrail:hover,.vrail:focus-within{opacity:1 !important}
@keyframes v2railin{from{opacity:0;transform:translate(-50%,30px)}}
.vrail{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:75;display:flex;flex-direction:row;gap:8px;padding:8px;border-radius:999px;background:rgba(245, 239, 230,0.9);backdrop-filter:blur(10px);box-shadow:0 18px 44px -18px rgba(46,32,24,0.45);animation:v2railin .8s cubic-bezier(.16,1,.3,1) .25s backwards}
.vrail a{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(245, 239, 230,0.94);border:1px solid rgba(122, 37, 48,0.32);font-family:Cinzel,serif;font-size:10px;letter-spacing:0.08em;color:#7a2530;text-align:center;line-height:1.2}
.vrail a.vbook{width:auto;padding:0 24px;border-radius:999px;background:#7a2530;border-color:#7a2530;color:#f5efe6;font-size:11px;letter-spacing:0.12em;font-weight:500}
body:not(:has(.opt)){padding-bottom:0 !important}
.v2-footer{padding-bottom:64px} /* dock clearance so it never covers the business bar */
@media (max-height:680px){.vrail{display:flex !important}} /* engine hides the rail on short windows — the dock must never disappear */

/* ── top bar: fixed; visible at the top of the page, on upward scroll, or on
   mouse approach. .42s because the bar now answers a gesture: half a second
   reads as lag when you have just flicked up to reach for it. ── */
.v2-nav-fix{position:fixed;top:0;left:0;right:0;z-index:96;transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s}
@media (prefers-reduced-motion:reduce){.v2-nav-fix{transition:none}}
.v2-nav-fix.v2-nav-hide{transform:translateY(-103%)}
.v2-nav-fix:not(.v2-nav-hide){box-shadow:0 14px 40px -22px rgba(46,32,24,0.28)}
.v2-navbar{display:grid !important;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:24px}
.v2-navbar>*:first-child{justify-self:start}
.v2-navbar>nav{justify-self:center}
.v2-navbar>[data-v2-cluster]{justify-self:end;display:flex;align-items:center;gap:14px}

/* ── Ken Burns: cheaper drift (translate3d, GPU-composited), parked offscreen ── */
@keyframes v2ken{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-1.6%,-2%,0) scale(1.14)}}
[data-kenburns]{animation:v2ken 26s cubic-bezier(.45,0,.55,1) infinite alternate !important;will-change:transform;transform-origin:center;backface-visibility:hidden}
[data-kenburns].v2-kb-off{animation-play-state:paused !important;will-change:auto}
[data-kenburns][data-grade]{filter:none !important}   /* grade lives on the parent instead */
@media (prefers-reduced-motion:reduce){[data-kenburns]{animation:none !important;transform:none !important}}

/* ── luminous hero: slow breath + drifting mist + fine sparkle (pure CSS) ──
   Composited layers only — no video, no canvas, nothing to decode. */
.v2-lum{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.v2-lum-mist,.v2-lum-mist2{position:absolute;inset:-25%;mix-blend-mode:screen;will-change:transform,opacity}
.v2-lum-mist{background:radial-gradient(ellipse 42% 34% at 32% 42%,rgba(255,253,248,.5),transparent 68%),radial-gradient(ellipse 34% 28% at 68% 62%,rgba(255,250,240,.4),transparent 66%);animation:v2mist 17s cubic-bezier(.45,0,.55,1) infinite alternate}
.v2-lum-mist2{background:radial-gradient(ellipse 38% 30% at 74% 30%,rgba(255,252,244,.4),transparent 64%),radial-gradient(ellipse 30% 40% at 22% 74%,rgba(255,248,236,.34),transparent 62%);animation:v2mist2 23s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes v2mist{from{transform:translate3d(-2.5%,1.5%,0) scale(1)}to{transform:translate3d(3%,-2%,0) scale(1.1)}}
@keyframes v2mist2{from{transform:translate3d(2%,-1.5%,0) scale(1.06)}to{transform:translate3d(-3%,2.5%,0) scale(1)}}
/* fine dense field — the base shimmer */
.v2-lum-spark{position:absolute;inset:0;mix-blend-mode:screen;will-change:opacity,background-position;
 background-image:
  radial-gradient(circle,rgba(255,255,255,1) 0 1.2px,transparent 2px),
  radial-gradient(circle,rgba(255,252,244,.92) 0 1.1px,transparent 1.9px),
  radial-gradient(circle,rgba(255,255,255,.85) 0 1px,transparent 1.7px),
  radial-gradient(circle,rgba(255,248,235,.8) 0 1.3px,transparent 2.1px),
  radial-gradient(circle,rgba(255,255,255,.75) 0 .9px,transparent 1.5px);
 background-size:220px 190px,170px 250px,290px 165px,135px 205px,245px 135px;
 background-position:0 0,70px 55px,35px 130px,155px 20px,95px 165px;
 animation:v2spark 5s ease-in-out infinite,v2sparkdrift 34s linear infinite}
@keyframes v2spark{0%,100%{opacity:.42}50%{opacity:1}}
@keyframes v2sparkdrift{to{background-position:220px -190px,-170px 250px,290px -165px,-135px 205px,245px -135px}}
/* larger soft bokeh specks, slower and counter-drifting, for depth */
.v2-lum-spark2{position:absolute;inset:0;mix-blend-mode:screen;will-change:opacity,background-position;
 background-image:
  radial-gradient(circle,rgba(255,253,247,.65) 0 2.4px,transparent 5px),
  radial-gradient(circle,rgba(255,250,238,.5) 0 3.2px,transparent 7px),
  radial-gradient(circle,rgba(255,255,255,.55) 0 2px,transparent 4.4px);
 background-size:430px 380px,560px 470px,340px 520px;
 background-position:40px 0,260px 180px,150px 300px;
 animation:v2spark2 8.5s ease-in-out infinite,v2sparkdrift2 58s linear infinite}
@keyframes v2spark2{0%,100%{opacity:.3}50%{opacity:.78}}
@keyframes v2sparkdrift2{to{background-position:-430px 380px,560px -470px,-340px 520px}}
/* restrained variant — a suggestion of light rather than a field of it */
.v2-lum-soft .v2-lum-spark{animation:v2sparksoft 6s ease-in-out infinite,v2sparkdrift 34s linear infinite}
.v2-lum-soft .v2-lum-spark2{animation:v2sparksoft2 9.5s ease-in-out infinite,v2sparkdrift2 58s linear infinite}
@keyframes v2sparksoft{0%,100%{opacity:.07}50%{opacity:.2}}
@keyframes v2sparksoft2{0%,100%{opacity:.05}50%{opacity:.15}}
.v2-lum-breathe{animation:v2breathe 15s cubic-bezier(.45,0,.55,1) infinite alternate !important;will-change:transform}
@keyframes v2breathe{from{transform:scale(1.03)}to{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.v2-lum-mist,.v2-lum-mist2,.v2-lum-spark,.v2-lum-spark2,.v2-lum-breathe{animation:none !important}.v2-lum-spark{opacity:.5}.v2-lum-spark2{opacity:.4}}

/* ── image-loading calm: warm grounds instead of white squares ── */
.plate,.v2-note-thumb,[data-svc-img]{background:#e9e4db}
input[type="checkbox"]{accent-color:#c9a24b}

/* ── under construction: blurred interiors + COMING SOON ── */
.v2-cs-img{filter:blur(16px) saturate(0.94) contrast(1.06) brightness(1.02) !important;transform:scale(1.08)}
.v2-cs-veil{position:absolute;inset:0;background:rgba(92, 26, 30,0.30);pointer-events:none}
.v2-cs-badge{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;text-align:center;padding:20px}
.v2-cs-badge b{display:block;font-family:Cinzel,serif;font-weight:600;font-size:clamp(11px,1.1vw,15px);letter-spacing:0.34em;text-indent:0.34em;color:#f5efe6}
.v2-cs-badge i{display:block;margin-top:10px;font-style:normal;font-size:11.5px;font-weight:300;letter-spacing:0.04em;color:rgba(245, 239, 230,0.75)}
.reel-frame>.v2-cs-badge{place-items:start end}
/* disclosure sub-line must never be display:none — LD-L / 시행령 §23①7호 */
/* background-image variant: a compact chip in the corner, never over the copy */
.v2-cs-badge.v2-cs-corner{place-items:end start;padding:clamp(16px,3vw,34px)}
.v2-cs-badge.v2-cs-corner>span{padding:9px 15px;border:1px solid rgba(233, 215, 158,.34);border-radius:999px;background:rgba(92, 26, 30,.42);backdrop-filter:blur(6px)}
.v2-cs-badge.v2-cs-corner b{font-size:10px;letter-spacing:.28em;text-indent:.28em}
.v2-cs-badge.v2-cs-corner i{margin-top:4px;font-size:10px;opacity:.8}
/* disclosure sub-line must never be display:none — LD-L / 시행령 §23①7호 */
/* disclosure sub-line must never be display:none — LD-L / 시행령 §23①7호 */

/* ── EN mode: latin display type needs tighter, smaller settings ── */
[data-v2-lang="en"] .svcbtn{font-size:24px !important;line-height:1.35}
[data-v2-lang="en"] .v2-note-title{font-size:19px}
[data-v2-lang="en"] .nm{word-break:normal}

/* ── Venus Notes ledger ─────────────────────────────────────────────── */
/* P0-07 · 부작용 · 위험 · 한계. 의료법 §56②7호 makes omitting this a prohibited advertising type,
   so it is served HTML, never collapsed behind a <details>, never below the type floor, and it
   prints. Korean body type stays at 11pt or above. */
.v2-risk{background:#f5efe6;border-top:1px solid rgba(26,20,20,.14)}
.v2-risk-in{max-width:1440px;margin:0 auto;padding:110px 44px}
.v2-risk-eyebrow{margin:0;font-size:10.5px;letter-spacing:.4em;text-indent:.4em;color:#7a2530}
.v2-risk-h{margin:22px auto 0;font-size:clamp(26px,3.2vw,38px);font-weight:400;line-height:1.4;color:#1a1414;max-width:26ch}
.v2-risk-lede{margin:22px auto 0;max-width:66ch;font-size:15px;font-weight:300;line-height:2.05;color:#4A423C}
.v2-risk-group{margin-top:46px}
.v2-risk-h3{margin:0 0 14px;font-size:13px;font-weight:500;letter-spacing:.12em;color:#7a2530}
.v2-risk-list{margin:0 auto;padding-left:0;list-style-position:inside;display:flex;flex-direction:column;gap:11px;max-width:74ch}
.v2-risk-list li{font-size:15px;font-weight:300;line-height:1.95;color:#3A332E}
.v2-risk-foot{margin:46px 0 0;max-width:70ch;font-size:14px;font-weight:300;line-height:2;color:#5F554E;
  border-top:1px solid rgba(26,20,20,.14);padding-top:22px}
@media (max-width:660px){.v2-risk-in{padding:72px 22px}}

/* P0-08 / F4 · Tier-A AI provenance caption. Emitted into the served HTML by
   scripts/patch-ai-labels.mjs, NOT injected at runtime — LD-L-08: a disclosure the server does not
   send is not a disclosure. Consequences for this rule set:
     · no `display:none` at ANY breakpoint (that is 시행령 §23①7호's 「눈에 잘 띄지 않게」)
     · it must print — see the @media print block, where it is forced visible
     · caption size or larger, never smaller than the surrounding caption type */
.v2-ai-cap{position:absolute;left:auto;right:10px;bottom:10px;max-width:min(88%,34em);z-index:4;
  pointer-events:none;padding:5px 10px;border-radius:2px;
  background:rgba(26,20,20,.58);backdrop-filter:blur(3px)}
.v2-ai-cap>span{display:block;font-size:10.5px;line-height:1.45;letter-spacing:.01em;
  color:rgba(245,239,230,.92);text-align:center}
/* images that sit in normal flow rather than inside a positioned frame */
.v2-ai-cap.v2-ai-cap-flow{position:static;background:none;backdrop-filter:none;padding:8px 0}
.v2-ai-cap.v2-ai-cap-flow>span{color:#4A423C}

/* P0-21 · 응급 안내. Rendered in static HTML and deliberately outside .v2-note's link styling:
   this block must survive JS-off and print, so nothing here may depend on a runtime class. */
.v2-emg{margin:0 0 34px;padding:22px 26px;border:1px solid rgba(122,37,48,.45);border-left:4px solid #7a2530;background:rgba(122,37,48,.055)}
.v2-emg-h{margin:0 0 8px;font-size:14px;font-weight:600;letter-spacing:.02em;color:#7a2530}
.v2-emg-b{margin:0 0 6px;font-size:14px;line-height:1.7;color:#3a2b2b;max-width:62ch}
.v2-emg-b:last-child{margin-bottom:0}
.v2-emg-b a{color:#7a2530;font-weight:600}
/* the red-flag card no longer routes to the booking form, so it must not read as clickable */
.v2-note-static{cursor:default}
.v2-note-static .v2-note-arrow{display:none}
.v2-notes{border-top:1px solid rgba(26, 20, 20,0.14)}
.v2-note{display:grid;grid-template-columns:110px 1fr 150px 40px;align-items:center;gap:28px;padding:30px 6px;border-bottom:1px solid rgba(26, 20, 20,0.14);text-decoration:none;transition:background .45s cubic-bezier(.16,1,.3,1),padding-left .45s cubic-bezier(.16,1,.3,1)}
.v2-note:hover{background:#f5efe6;padding-left:22px}
.v2-note-no{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:46px;line-height:1;color:rgba(122, 37, 48,0.35);transition:color .4s}
.v2-note:hover .v2-note-no{color:#7a2530}
.v2-note-title{display:block;font-family:'Nanum Myeongjo',serif;font-size:22px;line-height:1.5;color:#1a1414}
.v2-note-meta{display:block;margin-top:6px;font-size:12px;font-weight:300;letter-spacing:0.04em;color:#8A7F76}
.v2-note-thumb{width:150px;height:92px;object-fit:cover;opacity:0;transform:translateX(10px) scale(0.97);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.v2-note:hover .v2-note-thumb{opacity:1;transform:none}
.v2-note-arrow{font-family:'Cormorant Garamond',serif;font-size:26px;color:#7a2530;opacity:0;transform:translateX(-8px);transition:opacity .45s,transform .45s}
.v2-note:hover .v2-note-arrow{opacity:1;transform:none}
@media (max-width:834px){.v2-note{grid-template-columns:64px 1fr;gap:16px}.v2-note-thumb,.v2-note-arrow{display:none}.v2-note-no{font-size:32px}.v2-note-title{font-size:18px}}

/* ── cinematic video chapter (expand → hold → recede) ───────────────── */
[data-v2-cine]{position:relative}
.v2-cine-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;background:#f5efe6}
.v2-cine-frame{position:relative;width:100%;height:100%;overflow:hidden;display:grid;place-items:center;transform:scale(0.64);will-change:transform;box-shadow:0 60px 140px -60px rgba(30,10,14,0.55)}
.v2-cine-frame>video,.v2-cine-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.v2-cine-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,12,10,0.5),rgba(26,12,10,0.26) 46%,rgba(26,12,10,0.62))}
.v2-cine-tint{position:absolute;inset:0;background:#7a2530;opacity:0.5;will-change:opacity}
.v2-cine-copy{position:relative;z-index:2;text-align:center;padding:0 48px}
@media (max-width:834px),(prefers-reduced-motion:reduce){
  [data-v2-cine]{height:auto !important}
  .v2-cine-sticky{position:relative;height:auto}
  .v2-cine-frame{transform:none !important;height:auto;min-height:520px;padding:90px 0}
  .v2-cine-tint{opacity:0.18 !important}
}

/* ── atelier plates: sweep-develop reveal + lift ────────────────────── */
.venus-motion .v2-plate[data-reveal]{opacity:0;clip-path:inset(12% 0 12% 0);transform:scale(1.06);transition:opacity 1.15s cubic-bezier(.16,1,.3,1),clip-path 1.25s cubic-bezier(.16,1,.3,1),transform 1.45s cubic-bezier(.16,1,.3,1)}
.venus-motion .v2-plate[data-reveal].is-in{opacity:1;clip-path:inset(0 0 0 0);transform:none}
.v2-plate{position:relative}
.v2-plate::after{content:"";position:absolute;inset:0;background:#7a2530;opacity:0;transition:opacity .5s;pointer-events:none;mix-blend-mode:multiply}
.v2-plate:hover::after{opacity:0.12}

/* ── FAQ frame + readability + open animation ───────────────────────── */
.v2-faq-in{max-width:1080px;margin:0 auto}
.v2-faq-in summary .nm{font-size:24px}
.v2-faq-in details p{font-size:15px;font-weight:400;color:#3A332E}
.v2-faq-in summary{transition:padding-left .4s cubic-bezier(.16,1,.3,1)}
.v2-faq-in details[open] summary{padding-left:14px}
.v2-faq-in summary .cg:last-child{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.v2-faq-in details[open] summary .cg:last-child{transform:rotate(45deg)}

/* ── collections modal v2 ───────────────────────────────────────────── */
.v2m{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:24px;background:rgba(14,5,7,0.82);opacity:0;overscroll-behavior:contain;transition:opacity .45s cubic-bezier(.16,1,.3,1)}
.v2m.v2m-in{opacity:1}
.v2m-panel{position:relative;width:min(760px,94vw);max-height:88vh;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#2A1218;padding:64px 60px 52px;text-align:center;box-shadow:0 80px 160px -50px rgba(0,0,0,0.9);transform:translateY(26px) scale(0.97);opacity:0;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1)}
.v2m.v2m-in .v2m-panel{transform:none;opacity:1}
.v2m-border{position:absolute;inset:14px;pointer-events:none}
.v2m-border::before,.v2m-border::after{content:"";position:absolute;background:rgba(201, 162, 75,0.55);transition:transform 1.1s cubic-bezier(.16,1,.3,1) .15s}
.v2m-border::before{left:0;right:0;top:0;height:1px;transform:scaleX(0);transform-origin:left}
.v2m-border::after{left:0;right:0;bottom:0;height:1px;transform:scaleX(0);transform-origin:right}
.v2m-border i::before,.v2m-border i::after{content:"";position:absolute;background:rgba(201, 162, 75,0.55);transition:transform 1.1s cubic-bezier(.16,1,.3,1) .15s}
.v2m-border i::before{top:0;bottom:0;left:0;width:1px;transform:scaleY(0);transform-origin:bottom}
.v2m-border i::after{top:0;bottom:0;right:0;width:1px;transform:scaleY(0);transform-origin:top}
.v2m.v2m-in .v2m-border::before,.v2m.v2m-in .v2m-border::after{transform:scaleX(1)}
.v2m.v2m-in .v2m-border i::before,.v2m.v2m-in .v2m-border i::after{transform:scaleY(1)}
.v2m-head{display:flex;align-items:baseline;gap:22px}
.v2m-num{font-family:'Cormorant Garamond',serif;font-size:64px;font-style:italic;font-weight:300;line-height:0.9;color:rgba(201, 162, 75,0.55)}
.v2m-title{font-family:'Nanum Myeongjo',serif;font-size:30px;font-weight:400;color:#f5efe6}
.v2m-tag{margin:6px 0 0;font-family:Cinzel,serif;font-size:10px;letter-spacing:0.32em;color:#c9a24b}
.v2m-body{margin:24px 0 0;font-size:14.5px;font-weight:300;line-height:2.05;color:rgba(245, 239, 230,0.82)}
.v2m-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px;margin-top:34px;padding-top:30px;border-top:1px solid rgba(201, 162, 75,0.22)}
.v2m-grid h4{margin:0;font-family:Cinzel,serif;font-size:10px;letter-spacing:0.3em;color:#c9a24b}
.v2m-grid ul{margin:12px 0 0;padding:0;list-style:none}
.v2m-grid li{position:relative;padding:5px 0 5px 18px;font-size:13.5px;font-weight:300;line-height:1.8;color:rgba(245, 239, 230,0.78)}
.v2m-grid li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:1px;background:rgba(201, 162, 75,0.6)}
.v2m-note{margin:30px 0 0;font-size:12.5px;font-weight:300;line-height:1.9;color:rgba(245, 239, 230,0.5)}
.v2m-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.v2m-cta{display:inline-block;padding:15px 38px;border-radius:999px;background:#c9a24b;font-size:12px;font-weight:500;letter-spacing:0.16em;color:#5c1a1e;text-decoration:none;transition:background .4s,transform .4s}
.v2m-cta:hover{background:#e3c67a;color:#5c1a1e;transform:translateY(-2px)}
.v2m-cta2{display:inline-block;padding:15px 32px;border-radius:999px;border:1px solid rgba(201, 162, 75,0.5);font-size:12px;letter-spacing:0.16em;color:#e9d79e;text-decoration:none;transition:background .4s,color .4s}
.v2m-cta2:hover{background:rgba(201, 162, 75,0.16);color:#e9d79e}
.v2m-x{position:absolute;top:20px;right:26px;font-family:'Cormorant Garamond',serif;font-size:30px;line-height:1;color:#c9a24b;transition:transform .4s}
.v2m-x:hover{transform:rotate(90deg)}
.v2m .v2m-stag{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.v2m.v2m-in .v2m-stag{opacity:1;transform:none}
@media (max-width:680px){.v2m-panel{padding:48px 26px 40px}.v2m-grid{grid-template-columns:1fr}}

/* ── reservation modal ──────────────────────────────────────────────────
   The one control every page shares. It stays in the DOM (so the KR/EN
   toggle keeps reaching it) and is hidden with visibility, which also
   takes it out of the tab order between openings. Palette is the house
   five only: #5C1A1E · #7A2530 · #C9A24B · #F5EFE6 · #1A1414. */
.v2rm{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px;background:rgba(26, 20, 20,0.82);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s cubic-bezier(.16,1,.3,1),visibility 0s linear .45s}
/* pointer-events is NOT transitioned: a closed overlay stops swallowing clicks
   the instant it closes, even if the fade-out never gets a frame to run */
.v2rm.v2rm-in{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s cubic-bezier(.16,1,.3,1),visibility 0s}
.v2rm,.v2rm *,.v2rm *::before,.v2rm *::after{box-sizing:border-box}
.v2rm{overscroll-behavior:contain}
/* ONE scroll lock for both modals. The card modal used to write
   documentElement.style.overflow directly while the reservation modal used a
   class — two mechanisms for one fact, and the inline one could not also reach
   <body>, which is what iOS Safari actually honours. overscroll-behavior stops
   a scroll that starts inside the panel from chaining to the page underneath
   once the panel hits its end — the reason a modal on an iPad would leave you
   somewhere else entirely when you closed it. */
html.v2-lock,html.v2-lock body{overflow:hidden;overscroll-behavior:none}
.v2rm-panel{position:relative;display:flex;flex-direction:column;width:min(680px,94vw);max-height:min(88vh,940px);overflow:hidden;background:#f5efe6;text-align:center;box-shadow:0 80px 160px -50px rgba(26, 20, 20,0.7);transform:translateY(24px) scale(0.975);opacity:0;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1)}
.v2rm.v2rm-in .v2rm-panel{transform:none;opacity:1}
.v2rm-panel:focus{outline:none}
.v2rm-border{position:absolute;inset:12px;z-index:2;pointer-events:none;border:1px solid rgba(201, 162, 75,0.45)}
.v2rm-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:52px 52px 40px}
.v2rm-x{position:absolute;top:8px;right:10px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;font-family:'Cormorant Garamond',serif;font-size:30px;line-height:1;color:#7a2530;cursor:pointer;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.v2rm-x:hover{transform:rotate(90deg)}
.v2rm-eyebrow{margin:0;font-size:10px;letter-spacing:0.32em;color:#836a31}
.v2rm-title{margin:16px 0 0;font-size:clamp(26px,3.4vw,34px);font-weight:400;line-height:1.4;color:#1a1414}
.v2rm-lede{margin:14px 0 0;max-width:52ch;font-size:13.5px;font-weight:300;line-height:2;color:#5F554E}
.v2rm-form{margin-top:26px}
.v2rm-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.v2rm-cell{display:block;min-width:0}
.v2rm-cell-full{display:block;margin-top:16px}
.v2rm-lab{display:block;margin:0 0 7px;font-size:11.5px;font-weight:400;letter-spacing:0.06em;color:#7a2530}
.v2rm-field{display:block;width:100%;max-width:100%;min-height:48px;padding:13px 16px;border:1px solid rgba(26, 20, 20,0.18);border-radius:2px;background:#FFFFFF;font-family:inherit;font-size:14px;line-height:1.6;color:#1a1414}
.v2rm-field:focus{outline:2px solid rgba(122, 37, 48,0.5);outline-offset:1px}
.v2rm-area{min-height:104px;resize:vertical}
.v2rm-consent{margin-top:20px;padding:18px 20px;border:1px solid rgba(26, 20, 20,0.14);border-radius:4px;background:rgba(245, 239, 230,0.6)}
.v2rm-consent-h{margin:0;font-size:10px;letter-spacing:0.3em;color:#836a31}
.v2rm-dl{margin:12px 0 0;font-size:12.5px;line-height:1.9;color:#5F554E}
.v2rm-dl > div{display:flex;gap:10px}
.v2rm-dl dt{flex:0 0 84px;color:#8A7F76}
.v2rm-dl dd{margin:0;min-width:0}
.v2rm-priv{margin:12px 0 0;font-size:12px}
.v2rm-priv a{color:#7a2530;border-bottom:1px solid rgba(122, 37, 48,0.4);text-decoration:none}
.v2rm-ticks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(26, 20, 20,0.12)}
.v2rm-tick{display:flex;align-items:center;gap:9px;min-height:44px;font-size:13px;line-height:1.6;color:#1a1414;cursor:pointer}
.v2rm-tick-2{color:#5F554E}
.v2rm-tick input{width:19px;height:19px;flex:0 0 19px;accent-color:#7a2530;cursor:pointer}
.v2rm-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.v2rm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.v2rm-send{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:16px 40px;border:0;border-radius:999px;background:#7a2530;font-family:inherit;font-size:13px;font-weight:500;letter-spacing:0.16em;color:#f5efe6;cursor:pointer;transition:background .45s cubic-bezier(.16,1,.3,1)}
.v2rm-send:hover{background:#5c1a1e}
.v2rm-cancel{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 30px;border:1px solid rgba(122, 37, 48,0.4);border-radius:999px;background:none;font-family:inherit;font-size:12.5px;letter-spacing:0.12em;color:#7a2530;cursor:pointer;transition:background .45s cubic-bezier(.16,1,.3,1)}
.v2rm-cancel:hover{background:rgba(122, 37, 48,0.08)}
.v2rm-msg{margin:16px 0 0;font-size:12.5px;font-weight:300;line-height:1.9;color:#5F554E}
.v2rm-after{display:none;margin-top:22px}
.v2rm-foot{margin:16px 0 0;font-size:12px;font-weight:300;line-height:1.9;color:#8A7F76}
.v2rm-foot a{color:#7a2530;text-decoration:none}
/* received: the confirmation replaces the form in place — nothing navigates */
.v2rm-panel.v2rm-done .v2rm-form{display:none}
.v2rm-panel.v2rm-done .v2rm-msg{margin-top:8px;font-family:'Nanum Myeongjo',serif;font-size:16px;font-weight:400;line-height:2}
.v2rm-panel.v2rm-done .v2rm-after{display:block}
@media (max-width:900px){.v2rm-scroll{padding:48px 34px 36px}}
/* phones: a full-height sheet, one column, nothing narrower than a thumb */
@media (max-width:560px){
  .v2rm{padding:0}
  .v2rm-panel{width:100%;min-width:0;height:100%;max-height:100%;transform:translateY(28px) scale(1)}
  .v2rm-scroll{padding:56px 20px 32px}
  .v2rm-border{inset:8px}
  .v2rm-x{top:6px;right:6px;width:46px;height:46px}
  .v2rm-tick{min-height:48px}
  .v2rm-2{grid-template-columns:1fr;gap:14px}
  .v2rm-title{font-size:25px}
  .v2rm-dl dt{flex:0 0 72px}
  .v2rm-actions{flex-direction:column;align-items:stretch}
  .v2rm-send,.v2rm-cancel{width:100%}
  .v2rm-ticks{gap:0 16px}
}
@media (max-width:360px){.v2rm-scroll{padding:52px 14px 28px}.v2rm-dl > div{display:block}.v2rm-dl dt{margin-bottom:2px}}
@media (prefers-reduced-motion:reduce){
  .v2rm,.v2rm-panel,.v2rm-x,.v2rm-send,.v2rm-cancel{transition:none !important}
  .v2rm-panel{transform:none}
}

/* ── closing band aura ──────────────────────────────────────────────── */
/* the emblem PNG carries a baked dark ground — feather its corners so it never
   reads as a lighter box on near-black bands */
.v2-shellwrap img{/* emblem is a true cutout (assets/venus-emblem.png) — no mask needed */}
.v2-shellwrap{position:relative;display:inline-block;width:180px;height:180px}
.v2-shellwrap::before{content:"";position:absolute;inset:-70px;border-radius:50%;background:radial-gradient(circle,rgba(201, 162, 75,0.28) 0%,rgba(201, 162, 75,0.08) 42%,transparent 70%);animation:v2aura 6s ease-in-out infinite}
.v2-shellwrap::after{content:"";position:absolute;inset:-26px;border-radius:50%;border:1px solid rgba(201, 162, 75,0.3);animation:ringPulse 5s ease-in-out infinite}
.v2-ring2{position:absolute;inset:-52px;border-radius:50%;border:1px solid rgba(201, 162, 75,0.16);animation:ringPulse 5s ease-in-out 1.2s infinite}
@keyframes v2aura{0%,100%{transform:scale(1);opacity:0.8}50%{transform:scale(1.12);opacity:1}}
@media (prefers-reduced-motion:reduce){.v2-shellwrap::before,.v2-shellwrap::after,.v2-ring2{animation:none}}

/* ── veneer cinemagraph crossfade ───────────────────────────────────── */
.v2-ani{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:v2ani 16s linear infinite}
.v2-ani:nth-child(1){animation-delay:0s}
.v2-ani:nth-child(2){animation-delay:4s}
.v2-ani:nth-child(3){animation-delay:8s}
.v2-ani:nth-child(4){animation-delay:12s}
@keyframes v2ani{0%{opacity:0}6%{opacity:1}25%{opacity:1}33%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.v2-ani{animation:none}.v2-ani:nth-child(1){opacity:1}}

/* ── marble splashes + bands (nano-banana textures, masked + multiplied) ── */
.v2-marble{position:absolute;pointer-events:none;background-size:cover;background-position:center;opacity:.85;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 52% 44% at 50% 50%,#000 30%,transparent 70%);mask-image:radial-gradient(ellipse 52% 44% at 50% 50%,#000 30%,transparent 70%)}
.v2-marble-1{background-image:url('/img/marble-splash-1.jpg')}
.v2-marble-2{background-image:url('/img/marble-splash-2.jpg')}
.v2-marble-3{background-image:url('/img/marble-splash-3.jpg')}
.v2-marble-4{background-image:url('/img/marble-splash-4.jpg')}
.v2-marble-5{background-image:url('/img/marble-full-2.jpg')}      /* statement slab */
.v2-marble-6{background-image:url('/img/marble-col-1.jpg')}       /* vertical flow — for columns */
.v2-marble-quiet{background-image:url('/img/marble-full-3.jpg')}  /* safe behind dense text */
/* dark oxblood marble for near-black sections: lighten instead of multiply */
.v2-marble-dark{position:absolute;pointer-events:none;background:url('/img/marble-dark-1.jpg') center/cover no-repeat;mix-blend-mode:lighten;opacity:.5;
 -webkit-mask-image:radial-gradient(ellipse 150% 52% at 50% 50%,#000 20%,rgba(0,0,0,.5) 50%,transparent 76%);
 mask-image:radial-gradient(ellipse 150% 52% at 50% 50%,#000 20%,rgba(0,0,0,.5) 50%,transparent 76%)}
.v2-marble-dark-col{background-image:url('/img/marble-dark-2.jpg')}
@media (max-width:834px){.v2-marble-dark{display:none}}
.v2-band{position:relative;height:440px;background:#f5efe6 url('/img/marble-full-2.jpg') center/cover no-repeat;mix-blend-mode:multiply;opacity:.55;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 44%,#000 56%,transparent);mask-image:linear-gradient(180deg,transparent,#000 44%,#000 56%,transparent)}
/* full-viewport marble ground for a whole section (parent: position:relative) */
.v2-marble-full{position:absolute;inset:0;pointer-events:none;background:url('/img/marble-full-1.jpg') center/cover no-repeat;mix-blend-mode:multiply;opacity:.34;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
/* edge columns: marble pinned flush to a page edge, dissolving on EVERY inner
   edge (two mask layers intersected — no hard rectangle boundaries ever) */
/* single-layer radial masks — mask-composite is unreliable across engines, so
   one ellipse anchored at the page edge does the fade on every inner side */
.v2-marble-col{position:absolute;pointer-events:none;background-size:cover;background-position:center;mix-blend-mode:multiply;opacity:.6;
 -webkit-mask-image:radial-gradient(ellipse 150% 50% at 100% 50%,#000 20%,rgba(0,0,0,.55) 48%,transparent 74%);
 mask-image:radial-gradient(ellipse 150% 50% at 100% 50%,#000 20%,rgba(0,0,0,.55) 48%,transparent 74%)}
.v2-marble-col-l{-webkit-mask-image:radial-gradient(ellipse 150% 50% at 0% 50%,#000 20%,rgba(0,0,0,.55) 48%,transparent 74%);mask-image:radial-gradient(ellipse 150% 50% at 0% 50%,#000 20%,rgba(0,0,0,.55) 48%,transparent 74%)}
/* directional masks: dense side runs clean off the page edge */
.v2-mask-r{-webkit-mask-image:radial-gradient(ellipse 76% 46% at 82% 50%,#000 40%,transparent 74%);mask-image:radial-gradient(ellipse 76% 46% at 82% 50%,#000 40%,transparent 74%)}
.v2-mask-l{-webkit-mask-image:radial-gradient(ellipse 76% 46% at 18% 50%,#000 40%,transparent 74%);mask-image:radial-gradient(ellipse 76% 46% at 18% 50%,#000 40%,transparent 74%)}
@media (max-width:834px){.v2-marble{display:none}.v2-band{height:140px}}

/* ── elevation kit: shared section components for all pages ─────────── */
/* numbered journey (진료 여정) — 7-step strip or vertical list */
.v2-steps{counter-reset:v2step;display:grid;gap:0;border-top:1px solid rgba(26, 20, 20,0.12)}
.v2-step{position:relative;display:grid;grid-template-columns:110px 1fr auto;gap:28px;align-items:baseline;padding:28px 6px;border-bottom:1px solid rgba(26, 20, 20,0.12);transition:background .45s cubic-bezier(.16,1,.3,1),padding-left .45s cubic-bezier(.16,1,.3,1)}
.v2-step:hover{background:#f5efe6;padding-left:20px}
.v2-step-no{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:40px;line-height:1;color:rgba(122, 37, 48,0.4);transition:color .4s}
.v2-step:hover .v2-step-no{color:#7a2530}
.v2-step-title{font-family:'Nanum Myeongjo',serif;font-size:21px;color:#1a1414}
.v2-step-desc{display:block;margin-top:6px;font-size:13.5px;font-weight:300;line-height:1.95;color:#5F554E;max-width:60ch}
.v2-step-tag{font-family:Cinzel,serif;font-size:10px;letter-spacing:0.24em;color:#836a31;white-space:nowrap}
@media (max-width:834px){.v2-step{grid-template-columns:56px 1fr}.v2-step-tag{display:none}.v2-step-no{font-size:28px}}

/* CV / history timeline (doctor page) */
.v2-tl{position:relative;padding-left:34px}
.v2-tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,rgba(201, 162, 75,0.7),rgba(122, 37, 48,0.35))}
.v2-tl-item{position:relative;padding:0 0 30px}
.v2-tl-item::before{content:"";position:absolute;left:-30px;top:8px;width:9px;height:9px;border-radius:50%;background:#f5efe6;border:1px solid #c9a24b;transition:background .4s}
.v2-tl-item:hover::before{background:#c9a24b}
.v2-tl-org{font-family:'Nanum Myeongjo',serif;font-size:18px;color:#1a1414}
.v2-tl-role{display:block;margin-top:5px;font-size:12.5px;font-weight:300;letter-spacing:0.02em;color:#8A7F76}
[data-venus-dark] .v2-tl-org{color:#f5efe6}
[data-venus-dark] .v2-tl-role{color:rgba(245, 239, 230,0.6)}

/* comparison table polish (table.cmp already stacks ≤680 via engine) */
.cmp{width:100%;border-collapse:collapse}
.cmp th{padding:16px 18px;font-family:Cinzel,serif;font-size:10px;letter-spacing:0.24em;text-align:center;color:#836a31;border-bottom:1px solid rgba(26, 20, 20,0.2)}
.cmp td{padding:18px;font-size:13.5px;font-weight:300;line-height:1.9;color:#4A423C;border-bottom:1px solid rgba(26, 20, 20,0.1);vertical-align:top}
.cmp td:first-child{font-family:'Nanum Myeongjo',serif;font-size:15px;color:#1a1414;white-space:nowrap}
.cmp tr:hover td{background:#f5efe6}

/* stat/standard tiles (counters banned — standards instead) */
.v2-std{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(26, 20, 20,0.12);border:1px solid rgba(26, 20, 20,0.12)}
.v2-std>div{padding:34px 28px;background:#f5efe6;transition:background .5s}
.v2-std>div:hover{background:#f5efe6}
.v2-std b{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:34px;line-height:1.1;color:#7a2530}
.v2-std span{display:block;margin-top:10px;font-size:12.5px;font-weight:300;line-height:1.8;color:#5F554E}
@media (max-width:900px){.v2-std{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.v2-std{grid-template-columns:1fr}}
.v2-std-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.v2-std-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.v2-std-3{grid-template-columns:1fr}}

/* page hero (subpages): full-bleed media + eyebrow + display title */
.v2-hero{position:relative;height:min(720px,88svh);min-height:520px;overflow:hidden;display:flex;align-items:flex-end;background:#5c1a1e}
.v2-hero>img,.v2-hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v2-hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(92, 26, 30,0.72),rgba(92, 26, 30,0.18) 46%,rgba(92, 26, 30,0.3))}
.v2-hero-copy{position:relative;z-index:2;width:100%;padding:0 44px 72px}
.v2-hero-eyebrow{margin:0;font-family:Cinzel,serif;font-size:10.5px;letter-spacing:0.4em;color:#c9a24b}
.v2-hero-title{margin:18px 0 0;font-family:'Nanum Myeongjo',serif;font-weight:400;font-size:clamp(40px,5.4vw,76px);line-height:1.18;color:#f5efe6}
.v2-hero-sub{margin:16px 0 0;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:rgba(233, 215, 158,0.85)}

/* ── site footer ────────────────────────────────────────────────────── */
.v2-footer{background:#5c1a1e;color:#f5efe6}
.v2-footer-grid{display:grid;grid-template-columns:1.3fr 0.8fr 1fr 1fr;gap:48px;max-width:1440px;margin:0 auto;padding:90px 44px 70px}
.v2-footer .v2-foot-h{margin:0 0 24px;font-family:Cinzel,serif;font-size:10px;letter-spacing:0.3em;color:#c9a24b}
.v2-footer-brand .v2f-logo{display:flex;align-items:center;gap:14px}
.v2-footer-brand img{width:44px;height:44px;object-fit:contain}
.v2-footer-brand .cz{font-size:17px;letter-spacing:0.22em;color:#f5efe6}
.v2-footer-brand .cg{display:block;margin-top:14px;font-style:italic;font-size:15px;color:rgba(201, 162, 75,0.85)}
.v2-footer nav a{display:block;padding:7px 0;font-size:13.5px;font-weight:300;color:rgba(245, 239, 230,0.78);transition:color .3s,padding-left .35s cubic-bezier(.16,1,.3,1)}
.v2-footer nav a:hover{color:#e9d79e;padding-left:8px}
.v2-footer-visit p{margin:0 0 12px;font-size:13.5px;font-weight:300;line-height:1.95;color:rgba(245, 239, 230,0.78)}
.v2-footer-res p{margin:0 0 20px;font-size:13.5px;font-weight:300;line-height:1.95;color:rgba(245, 239, 230,0.78)}
.v2f-cta{display:inline-block;margin:0 10px 10px 0;padding:13px 30px;border-radius:999px;background:#7a2530;font-size:12.5px;letter-spacing:0.06em;color:#f5efe6;text-decoration:none;transition:background .4s}
.v2f-cta:hover{background:#8a2733;color:#f5efe6}
.v2f-cta2{display:inline-block;padding:13px 26px;border-radius:999px;border:1px solid rgba(201, 162, 75,0.45);font-size:12.5px;letter-spacing:0.06em;color:#e9d79e;text-decoration:none;transition:background .4s}
.v2f-cta2:hover{background:rgba(201, 162, 75,0.14);color:#e9d79e}
.v2-navsub{font-size:10px}
.v2-footer-bar{border-top:1px solid rgba(201, 162, 75,0.16)}
.v2-footer-bar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;max-width:1440px;margin:0 auto;padding:26px 44px}
.v2-footer-bar p{margin:0;font-size:11.5px;font-weight:300;letter-spacing:0.02em;color:rgba(245, 239, 230,0.45)}
.v2-footer-bar span{font-size:11.5px;color:rgba(245, 239, 230,0.45)}
.v2-footer-bar .v2f-links{display:flex;gap:22px}
.v2-footer-bar .v2f-links a,.v2-footer-bar .v2f-links button{font-size:11.5px;letter-spacing:0.04em;color:rgba(245, 239, 230,0.65)}
.v2-footer-bar .v2f-links a:hover{color:#e9d79e}
@media (max-width:1024px){.v2-footer-grid{grid-template-columns:1fr 1fr;gap:40px;padding:70px 36px 50px}}
@media (max-width:680px){.v2-footer-grid{grid-template-columns:1fr;gap:36px;padding:60px 20px 40px}.v2-footer-bar-in{padding:22px 20px;flex-direction:column;align-items:flex-start}}

/* ── readability pass ────────────────────────────────────────────────────
   Body copy was authored at 12–15px, which is small for Korean at reading
   distance. The handoff engine keys its responsive shrink rules on exact
   inline font-size substrings, so the sizes CANNOT be rewritten in the HTML
   without breaking them. Instead this bumps the small end of the scale on
   desktop only — below 1025px the engine's own rules take over untouched. */
@media (min-width:1025px){
  [data-s*="font-size:10px"]{font-size:10px !important}
  [data-s*="font-size:10px"]{font-size:10px !important}
  [data-s*="font-size:10px"]{font-size:10px !important}
  [data-s*="font-size:10px"]{font-size:10.5px !important}
  [data-s*="font-size:10px"]{font-size:11px !important}
  [data-s*="font-size:10.5px"]{font-size:11.5px !important}
  [data-s*="font-size:11px"]{font-size:12.5px !important}
  [data-s*="font-size:11.5px"]{font-size:13px !important}
  [data-s*="font-size:12px"]{font-size:13.5px !important}
  [data-s*="font-size:12.5px"]{font-size:14px !important}
  [data-s*="font-size:13px"]{font-size:15px !important}
  [data-s*="font-size:13.5px"]{font-size:15.5px !important}
  [data-s*="font-size:14px"]{font-size:16px !important}
  [data-s*="font-size:14.5px"]{font-size:16.5px !important}
  [data-s*="font-size:15px"]{font-size:17px !important}
  [data-s*="font-size:15.5px"]{font-size:17.5px !important}
  [data-s*="font-size:16px"]{font-size:18px !important}
  [data-s*="font-size:17px"]{font-size:19px !important}
  [data-s*="font-size:18px"]{font-size:20px !important}
  [data-s*="font-size:19px"]{font-size:21px !important}
  [data-s*="font-size:20px"]{font-size:22px !important}
}

/* ── headings must always wrap ───────────────────────────────────────────
   keep-all is the correct Korean rule (break between eojeol, never mid-word);
   anywhere is the escape hatch for long unbroken Latin runs. Without this a
   long headline overflows and body{overflow-x:clip} shears it off. */
h1,h2,h3,h4,h5,p,li,figcaption,summary{overflow-wrap:anywhere;word-break:keep-all}
/* Korean must not break mid-word. The rule above covers text elements but not
   the display numerals and inline emphasis inside components, where a label
   longer than a few syllables was breaking as 밤의 장/치. */
.v2-std b,.v2-std span,.v2-dia-title,.v2-dia-eyebrow,dt,dd,th,td,label,figure b,figure span{word-break:keep-all;overflow-wrap:anywhere}
.cz,[class*="cz"]{overflow-wrap:normal}

/* ── emblem: no square ───────────────────────────────────────────────────
   The PNG carries a baked dark-brown ground, and the old mask stop (76% of the
   distance to the *corner*) sat outside the inscribed circle, so it only
   nicked the corners and left a visible rectangle on dark bands. closest-side
   puts the transparent stop on the edge midpoint, so the ground always
   dissolves into the band. */
.v2-shellwrap img{/* emblem is a true cutout (assets/venus-emblem.png) — no mask needed */}

/* ── top bar: a cream ground that arrives gradually ──────────────────────
   Over the hero the bar is glass. Once the page scrolls under photography the
   bar would otherwise read as floating text on an image, so a cream plate
   fades in behind it — slowly, on its own layer, so nothing else repaints. */
.v2-nav-fix>*{position:relative;z-index:1}
.v2-nav-fix::before{content:"";position:absolute;inset:0;z-index:0;background:rgba(245, 239, 230,0.94);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid rgba(131, 106, 49,0.16);opacity:0;transition:opacity 1.1s cubic-bezier(.22,1,.36,1);pointer-events:none}
.v2-nav-fix.v2-nav-ground::before{opacity:1}
[data-venus-dark] .v2-nav-fix::before{background:rgba(92, 26, 30,0.9);border-bottom-color:rgba(201, 162, 75,0.2)}
@media (prefers-reduced-motion:reduce){.v2-nav-fix::before{transition:none}}

/* ── fluid section rhythm ────────────────────────────────────────────────
   Sections were authored at fixed px, so on a tall display the page reads
   cramped and on a short one it reads padded — the spacing never belongs to
   the screen it is on. TU drives its rhythm from the viewport (--common-padding
   :20dvh). We cannot rewrite the inline values, because the handoff engine
   keys its responsive rules on exact inline-style substrings — but those
   selectors match the style STRING, not the computed value, so overriding the
   computed padding here leaves every one of those rules intact.

   Each clamp keeps the authored px as its midpoint at roughly a 900px-tall
   viewport, floors at ~0.68x so short laptops never collapse, and ceilings at
   ~1.35x so 4K displays gain real air. Desktop only — under 1025px the
   engine's own spacing rules take over untouched. */
@media (min-width:1025px){
  [data-s*="padding:140px 44px"]{padding-top:clamp(94px,15.5dvh,190px) !important;padding-bottom:clamp(94px,15.5dvh,190px) !important}
  [data-s*="padding:130px 44px 120px"]{padding-top:clamp(88px,14dvh,176px) !important;padding-bottom:clamp(82px,13dvh,162px) !important}
  [data-s*="padding:130px 44px 90px"]{padding-top:clamp(88px,14dvh,176px) !important;padding-bottom:clamp(62px,10dvh,122px) !important}
  [data-s*="padding:130px 44px"]:not([data-s*="120px"]):not([data-s*="90px"]){padding-top:clamp(88px,14dvh,176px) !important;padding-bottom:clamp(88px,14dvh,176px) !important}
  [data-s*="padding:120px 44px"]{padding-top:clamp(82px,13dvh,162px) !important;padding-bottom:clamp(82px,13dvh,162px) !important}
  [data-s*="padding:110px 44px 90px"]{padding-top:clamp(76px,12dvh,148px) !important;padding-bottom:clamp(62px,10dvh,122px) !important}
  [data-s*="padding:110px 44px"]:not([data-s*="90px"]){padding-top:clamp(76px,12dvh,148px) !important;padding-bottom:clamp(76px,12dvh,148px) !important}
  [data-s*="padding:100px 44px"]{padding-top:clamp(68px,11dvh,135px) !important;padding-bottom:clamp(68px,11dvh,135px) !important}
  [data-s*="padding:96px 44px"]{padding-top:clamp(66px,10.5dvh,130px) !important;padding-bottom:clamp(66px,10.5dvh,130px) !important}
  [data-s*="padding:90px 44px"]{padding-top:clamp(62px,10dvh,122px) !important;padding-bottom:clamp(62px,10dvh,122px) !important}
  [data-s*="padding:74px 44px 78px"]{padding-top:clamp(52px,8dvh,100px) !important;padding-bottom:clamp(54px,8.4dvh,106px) !important}
  [data-s*="padding:74px 44px"]:not([data-s*="78px"]){padding-top:clamp(52px,8dvh,100px) !important;padding-bottom:clamp(52px,8dvh,100px) !important}
  /* gutters widen with the screen so wide displays do not read edge-to-edge */
  [data-s*="padding:0 44px"]{padding-left:clamp(44px,3vw,68px) !important;padding-right:clamp(44px,3vw,68px) !important}
  [data-s*="44px"]:where([data-s*="padding:130px"],[data-s*="padding:120px"],[data-s*="padding:110px"],[data-s*="padding:100px"],[data-s*="padding:90px"],[data-s*="padding:140px"],[data-s*="padding:96px"],[data-s*="padding:74px"]){padding-left:clamp(44px,3vw,68px) !important;padding-right:clamp(44px,3vw,68px) !important}
}

/* ── chapter rail (right gutter, vertical type) ──────────────────────────
   Budgeted to ~24px so it always fits inside the 44px minimum gutter, and
   venus-rail.js hides it outright if it ever measures an overlap with real
   text. Dots carry the structure; the active section's name is set in
   vertical type, which is what keeps the whole thing inside the budget. */
.v2-rail{position:fixed;right:clamp(14px,1.2vw,22px);top:50%;transform:translateY(-50%);z-index:74;display:flex;align-items:center;gap:8px;opacity:1;transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.v2-rail.v2-rail-off{opacity:0;transform:translateY(-50%) translateX(10px);pointer-events:none}
.v2-rail-name{writing-mode:vertical-rl;text-orientation:mixed;font-family:Cinzel,serif;font-size:10px;letter-spacing:.24em;color:rgba(26, 20, 20,.42);white-space:nowrap;max-height:190px;overflow:hidden;transition:color .4s}
.v2-rail ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.v2-rail a{display:block;padding:3px 0;text-decoration:none}
.v2-rail a i{display:block;width:5px;height:5px;border-radius:50%;background:rgba(26, 20, 20,.22);transition:background .4s,transform .45s cubic-bezier(.22,1,.36,1)}
.v2-rail a:hover i{background:#836a31;transform:scale(1.5)}
.v2-rail a.on i{background:#7a2530;transform:scale(1.7)}
.v2-rail-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[data-venus-dark] .v2-rail-name{color:rgba(245, 239, 230,.45)}
[data-venus-dark] .v2-rail a i{background:rgba(245, 239, 230,.26)}
[data-venus-dark] .v2-rail a.on i{background:#c9a24b}
[data-venus-dark] .v2-rail a:hover i{background:#e3c67a}
@media (max-width:1240px){.v2-rail{display:none}}
@media (prefers-reduced-motion:reduce){.v2-rail,.v2-rail *{transition:none !important}}

/* ── scroll-scrubbed video: hold the poster until a real frame lands ────── */
video[data-v2-scrub]{transition:opacity .5s cubic-bezier(.22,1,.36,1)}
video[data-v2-scrub].v2-scrub-hold{opacity:0}
video[data-v2-scrub].v2-scrub-hold.v2-scrub-painted{opacity:1}

/* ══ PHONE + TABLET ═══════════════════════════════════════════════════════
   The desktop passes above are all min-width:1025px, so nothing here fights
   them. Selectors are prefixed with `body` so they out-specify the engine's
   own [data-s*=…] rules, which are injected at runtime and therefore land later
   in the cascade than this stylesheet. */

/* ── header: below 1025px the engine hides the desk nav and shows .vmenu, so
   the three-column grid has nothing to centre and its 1fr end column is
   narrower than the KR/EN toggle + MENU button sitting in it — which pushed
   the button ~38px off the right edge of a 390px screen. Flex lets the cluster
   take the width it actually needs. */
@media (max-width:1024px){
  body .v2-navbar{display:flex !important;grid-template-columns:none !important;align-items:center;justify-content:space-between;column-gap:12px}
  body .v2-navbar>*:first-child{justify-self:auto;flex:0 1 auto;min-width:0}
  body .v2-navbar>nav{justify-self:auto}
  body .v2-navbar>[data-v2-cluster]{justify-self:auto;flex:0 0 auto;gap:10px}
  body .vlang{margin-left:0}
}
@media (max-width:430px){
  body .vlang{padding:2px}
  body .vlang button{padding:7px 9px !important}
  body .vmenu>summary{padding:10px 15px}
}

/* The phone menu is a focused full-screen reading surface. The native details
   element remains the state owner; these rules only improve its presentation
   and keep the page behind it still. */
@media (max-width:680px){
  html.vmenu-lock,html.vmenu-lock body{overflow:hidden !important}
  body .vmenu[open]>summary{position:fixed;top:18px;right:16px;z-index:101;border-color:rgba(245,239,230,.62);background:#f5efe6;color:#7a2530}
  body .vmenup{position:fixed;inset:0;z-index:100;min-width:0;width:100%;height:100vh;height:100dvh;max-height:none;overflow:auto;overscroll-behavior:contain;padding:82px 24px 36px;background:rgba(31,13,17,.985);border:0;box-shadow:none}
  body .vmenup a{min-height:52px;padding:14px 4px;border-bottom:1px solid rgba(233,215,158,.16);font-size:16px !important;color:#f5efe6 !important}
  body .vmenup a:focus-visible{outline:2px solid #e3c67a;outline-offset:3px;background:rgba(201,162,75,.12)}
}

/* ── header, second pass: the wordmark was painting over the KR/EN pill ──
   Nothing overflowed the page, so a box test could not see this. The logo is
   a flex item with min-width:0, so at 320px its BOX shrank to 56px while its
   CONTENT stayed 197px wide (emblem 31 + wordmark 153) and simply painted out
   of the box, straight under the language toggle. Measured at 320/360/390/430;
   at 431 and up the box is finally wide enough for its contents.

   The cluster gives up its padding first, then the wordmark stacks SEOUL over
   VENUS (153px → 88px) and the tagline drops. Below 360 the emblem goes too —
   at that width the wordmark alone is the mark. */
@media (max-width:430px){
  body .v2-navbar>*:last-child,body .v2-navbar>[data-v2-cluster]{gap:8px !important}
  body .vlang{gap:0}
  body .vlang button{padding:8px 9px !important}
  body .vmenu>summary{padding:12px 14px}
  body .v2-navbar [data-s="display:flex; align-items:baseline; gap:8px"]{flex-direction:column;align-items:flex-start;gap:0}
  body .v2-navbar [data-s*="letter-spacing:0.32em"],
  body .v2-navsub{display:none !important}
}
/* the emblem's own inline style says display:grid, which outranks a plain
   display:none from a stylesheet — hence the !important here and above. */
@media (max-width:360px){
  body .v2-navbar{column-gap:8px !important}
  body .v2-navbar [data-s*="width:44px; height:44px; border-radius:50%"]{display:none !important}
  body .vmenu>summary{padding:12px 12px}
}

/* ── type floor: eyebrows, rail labels and small CTAs were rendering at
   7.5–11px on a phone, which is below reading size for Korean at arm's length.
   The engine passes these inline values through unscaled below 834px, so each
   one is lifted to a floor rather than rescaled. */
@media (max-width:1024px){
  body [data-s*="font-size:10px"]{font-size:11px !important}
  body [data-s*="font-size:10px"]{font-size:11px !important}
  body [data-s*="font-size:10px"]{font-size:11px !important}
  body [data-s*="font-size:10px"]{font-size:11.5px !important}
  body [data-s*="font-size:10px"]{font-size:11.5px !important}
  body [data-s*="font-size:10px"]{font-size:12px !important}
  body [data-s*="font-size:10.5px"]{font-size:12px !important}
  body [data-s*="font-size:11px"]{font-size:12.5px !important}
  body [data-s*="font-size:11.5px"]{font-size:13px !important}
  body [data-s*="font-size:12px"]{font-size:13.5px !important}
  body [data-s*="font-size:12.5px"]{font-size:13.5px !important}
  body [data-s*="font-size:13px"]{font-size:14.5px !important}
  body [data-s*="font-size:13.5px"]{font-size:14.5px !important}
  body .v2-foot-h{font-size:12px !important}
  body .v2-cs-badge b{font-size:11px !important}
  body .v2-cs-badge i{font-size:11px !important}
  /* letterspaced Cinzel eyebrows lose their tracking budget once bumped */
  body .cz{letter-spacing:.2em !important;text-indent:.2em !important}
}

/* ── the contact dock: five 52px circles plus a pill will not fit 390px, and
   its labels were rendering at 7.5px. Fewer, larger, legible. */
@media (max-width:680px){
  body .vrail{gap:6px;padding:6px;bottom:8px;max-width:calc(100vw - 20px)}
  body .vrail a{width:46px;height:46px;font-size:11px !important}
  body .vrail a.vbook{padding:0 18px;font-size:12.5px !important}
  body .vrail a[href^="/reserve"]:not(.vbook),
  body .vrail a[href^="mailto:"],
  body .vrail a[target="_blank"]{display:none}
}
@media (max-width:430px){
  body .vrail a{width:44px;height:44px}
  body .vrail a.vbook{font-size:12px !important;padding:0 14px}
}

/* ── tap targets: 44px is the floor a finger can hit reliably ───────────── */
@media (max-width:1024px){
  body .vmenup a{padding:15px 26px;min-height:44px;display:flex;align-items:center;box-sizing:border-box}
  body .v2-faq-in summary{min-height:44px;display:flex;align-items:center}
  body .v2f-links a{display:inline-block;padding:9px 0}
  body .rcard,body .v2-note{min-height:64px}
  body input[type="checkbox"]{width:20px;height:20px}
  body .intake-sheet label{min-height:30px;display:inline-flex;align-items:center}
}

/* ── tap targets, measured rather than assumed ───────────────────────────
   Audited at 360/390/430px: the MENU button rendered 36px tall, the footer's
   eight nav links 33px, and the phone / vCard links 19px. 44px is the floor a
   finger hits reliably, so each is given the height without changing how any
   of them look at rest. */
@media (max-width:1024px){
  body .vmenu>summary{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  body .v2-footer nav a{min-height:44px;display:flex;align-items:center}
  body .v2-footer-visit a{min-height:44px;display:inline-flex;align-items:center}
  body .v2-footer-bar .v2f-links a,body .v2-footer-bar .v2f-links button{min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
  body label>input[type="checkbox"],body input[type="checkbox"]{width:22px;height:22px}
  body .v2q label,body .v2q button{min-height:44px}
}

/* class-driven sizes the [data-s*=…] floor cannot reach */
@media (max-width:1024px){
  body .vlang button{font-size:12px !important;padding:8px 13px !important}
  body .v2-note-title{font-size:17px}
  body .vmenup a{font-size:15px !important}
}

/* ── tablet band (835–1024px): iPad landscape and small laptops ──────────
   Measured here rather than assumed: the contact dock's labels sat at 8.5px,
   the KR/EN buttons and the service switcher at 33–34px tall. */
@media (max-width:1024px){
  body .vrail a{font-size:11px !important}
  body .vrail a.vbook{font-size:12.5px !important}
  body .vlang button{min-height:44px}
  body .svcbtn{min-height:44px}
  body .v2q label,body .v2q button,body .svcbtn{min-height:44px}
}
/* Standalone arrow links ("전체 보기 →") are unclassed inline anchors. Vertical
   padding grows the hit box without touching the line box, so the text sits
   exactly where it did while the finger target reaches 44px. min-height would
   have forced inline-flex and broken any anchor sitting inside a sentence. */
@media (max-width:1024px){
  body a[href]:not([class]){padding-top:12px;padding-bottom:12px;min-height:44px;align-items:center}
  body p > a[href]:not([class]){padding-top:0;padding-bottom:0;min-height:0}   /* inline in prose: leave alone */
  body input[type="checkbox"]{width:22px !important;height:22px !important;flex:0 0 auto}
}

/* ══ LARGE DISPLAYS (1700px+) ═════════════════════════════════════════════
   The layout was authored around 1440. Past that the 12-column grids simply
   kept stretching, so at 3840px the widest paragraph measured 3,742px — about
   299 Hangul characters per line, where a comfortable measure is 40–50. Even
   1920 was running 146.

   Two moves. The grid shells gain a max-width and centre, which fixes measure
   structurally (a 6-of-12 column inside a 1680px shell lands at ~800px) while
   leaving full-bleed backgrounds alone — those live on absolutely-positioned
   children and are unaffected. Then a measure cap catches the loose text
   blocks that sit outside any grid. */
@media (min-width:1700px){
  body [data-s*="grid-template-columns:repeat(12,1fr)"],
  body [data-s*="grid-template-columns:repeat(6,1fr)"],
  body [data-s*="grid-template-columns:repeat(4,1fr)"],
  body [data-s*="grid-template-columns:repeat(3,1fr)"],
  body [data-s*="grid-template-columns:0.85fr 1.15fr"],
  body [data-s*="grid-template-columns:0.92fr 1.08fr"],
  body [data-s*="grid-template-columns:1.05fr 0.95fr"]{max-width:1680px;margin-left:auto;margin-right:auto}
}

/* Measure cap starts well below the large-display block: even at 1440 — the
   width this layout was authored for — the loose paragraphs were running 107
   Hangul characters to the line. Anything the author already constrained with
   an inline max-width is left exactly as written. */
@media (min-width:1280px){
  body p:not([data-s*="max-width"]),
  body li:not([data-s*="max-width"]){max-width:900px}
  body h3:not([data-s*="max-width"]),
  body h4:not([data-s*="max-width"]){max-width:1100px}
  /* The width cap must centre the BOX it creates, not only when the container
     is stamped text-align:center: a capped element left at margin 0 pins to
     the left edge while the sitewide centring centres its text, so heroes read
     as a zigzag of axes (eyebrow 510 / h1 995 / sub 510…). !important because
     the pinning margins are inline (margin:0, margin:24px 0 0). */
  body p:not([data-s*="max-width"]),
  body li:not([data-s*="max-width"]),
  body h3:not([data-s*="max-width"]),
  body h4:not([data-s*="max-width"]){margin-left:auto !important;margin-right:auto !important}
}
/* Bare chip/tag flex rows (display:flex + flex-wrap, no declared justification)
   packed left under the centred layout — centre them at every width. */
body [data-s*="flex-wrap:wrap"]:not([data-s*="justify-content"]){justify-content:center}

/* ── the last of the small type on phone/tablet ──────────────────────────
   Three kinds the [data-s*="font-size:Npx"] floor cannot reach: sizes that come
   from a class rather than an inline style; markup where the inline style was
   written or re-serialised with a space after the colon ("font-size: 10px"),
   which is a different substring; and bare <dt>/<b> inside components. */
@media (max-width:1024px){
  body [data-s*="font-size: 10px"],body [data-s*="font-size: 10px"],
  body [data-s*="font-size: 10px"],body [data-s*="font-size: 10px"],
  body [data-s*="font-size: 10px"]{font-size:11.5px !important}
  body [data-s*="font-size: 10px"],body [data-s*="font-size: 10.5px"]{font-size:12px !important}
  body [data-s*="font-size: 11px"],body [data-s*="font-size: 11.5px"]{font-size:12.5px !important}
  body .v2-ba-label{font-size:11.5px !important}
  body .eyebrow{font-size:11.5px !important}
  body .v2q-step{font-size:11.5px !important}
  body dl dt{font-size:11.5px !important}
  body .v2-tl b,body .v2-steps b{font-size:11.5px !important}
}

/* ── two-column splits must collapse on a phone ──────────────────────────
   The engine collapses repeat(12,1fr), repeat(6,1fr) and friends, but it has
   no rule for a bare `1fr 1fr` — and 19 of them are in use, including the
   reserve page's form-and-image split. On a phone that keeps two columns and
   pushes the form off the right edge. */
@media (max-width:834px){
  body [data-s*="grid-template-columns:1fr 1fr"],
  body [data-s*="grid-template-columns:1.1fr 1fr"]{grid-template-columns:1fr !important}
}
/* the name/phone pair can hold two columns on a large phone, but not a small one */
@media (max-width:560px){
  body #v2-reserve [data-s*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
}

/* ══ PHONE + TABLET, MEASURED PASS ════════════════════════════════════════
   Every rule below was found by loading all 23 pages at 320/360/390/430/560/
   680/834 and asserting on the rendered boxes — never by eye. Two kinds of
   thing are left after the engine has run: an authored inline value the
   engine has no rule for, and a size that comes from a class, which the
   [data-s*=…] floor cannot see at all.

   Inline hooks are [data-s*=…] and never [style*=…]: data-s is the immutable
   snapshot of the AUTHORED style, so it survives JS writing to .style, which
   a [style*=…] selector does not. */

/* ── 1. section gutters the engine's ≤680 list does not cover ────────────
   The engine collapses 90/96/100/104/110/120/130px × 44px sections to
   72px 20px. Three more shapes are in the markup — 140px 44px, 74px 44px
   (78px) and the hero copy's 0 48px — and they kept their full desktop side
   gutters. On a 320px screen that left a 224px measure, about 15 Hangul
   characters to the line. */
@media (max-width:680px){
  body [data-s*="padding:140px 44px"],
  body [data-s*="padding:74px 44px"]{padding-top:72px !important;padding-bottom:72px !important;padding-left:20px !important;padding-right:20px !important}
  body [data-s*="padding:0 48px"]{padding-left:20px !important;padding-right:20px !important}
}

/* ── 2. card interiors ───────────────────────────────────────────────────
   30–48px of horizontal padding is right inside a 600px desktop column and
   wrong inside a 280px phone one, where it took a third of the width before
   a single word was set. The vertical rhythm is deliberately left alone —
   only the side padding moves, so the cards keep their proportion. */
@media (max-width:560px){
  body [data-s*="padding:28px 24px"],
  body [data-s*="padding:30px 34px"],
  body [data-s*="padding:34px 28px"],
  body [data-s*="padding:36px 30px"],
  body [data-s*="padding:38px 30px"],
  body [data-s*="padding:38px 34px"],
  body [data-s*="padding:38px 36px"],
  body [data-s*="padding:44px 38px"],
  body [data-s*="padding:44px 40px"],
  body [data-s*="padding:52px 40px"],
  body [data-s*="padding:56px 48px"]{padding-left:22px !important;padding-right:22px !important}
}
@media (max-width:430px){
  body [data-s*="padding:28px 24px"],
  body [data-s*="padding:30px 34px"],
  body [data-s*="padding:34px 28px"],
  body [data-s*="padding:36px 30px"],
  body [data-s*="padding:38px 30px"],
  body [data-s*="padding:38px 34px"],
  body [data-s*="padding:38px 36px"],
  body [data-s*="padding:44px 38px"],
  body [data-s*="padding:44px 40px"],
  body [data-s*="padding:52px 40px"],
  body [data-s*="padding:56px 48px"]{padding-left:18px !important;padding-right:18px !important}
}

/* ── 3. the FAQ hanging indent ───────────────────────────────────────────
   99 answers across 20 pages are set with a 66px left indent so they align
   under the question text rather than under the Q-number. On a 390px screen
   that indent plus the page gutters left 278px of measure — roughly 19
   characters a line. On a phone the answer starts at the margin instead. */
@media (max-width:680px){
  body [data-s*="padding:0 6px 32px 66px"]{padding-left:0 !important;padding-right:0 !important}
}

/* ── 4. rule-marked side columns ─────────────────────────────────────────
   Columns set off by a 1px champagne rule carry a 22–32px indent from it.
   Once the grid has collapsed to one column that indent is pure loss. */
@media (max-width:560px){
  body [data-s*="padding:0 28px"],body [data-s*="padding:0 32px"],
  body [data-s*="padding:0 0 0 22px"],body [data-s*="padding:0 0 0 26px"],
  body [data-s*="padding:0 0 0 28px"],body [data-s*="padding:0 0 0 32px"]{padding-left:16px !important}
  body [data-s*="padding:0 28px 0 0"],body [data-s*="padding:0 32px 0 0"]{padding-left:0 !important;padding-right:16px !important}
}

/* ── 5. the ledger rows keep a number column they cannot afford ──────────
   .v2-step and .v2-note are the only multi-track grids still standing on a
   phone (the engine collapses every inline one at 834). Their number column
   plus its gap costs 72px — a fifth of a 360px screen — and at 320 the copy
   column measured 208px. Below 430 the number sits above the title instead;
   the ledger rule and the hover behaviour are untouched. */
@media (max-width:430px){
  body .v2-step,body .v2-note{grid-template-columns:1fr;gap:4px}
  body .v2-step-no{font-size:24px}
  body .v2-note-no{font-size:26px}
}

/* ── 6. the contact dock's booking pill ──────────────────────────────────
   The engine pins .vrail a to 44×44 with !important at ≤430. .vbook is also
   a .vrail a, so the primary call to action collapsed into a 44px circle
   with "상담 예약" wrapping to one glyph a line and clipping — measured on
   every page at 320/360/390/430. It needs its width back, and at the two
   narrowest widths one circle has to go so the pill has somewhere to sit:
   mail is the slowest of the six contacts and the only one duplicated in
   the footer. */
@media (max-width:430px){
  body .vrail{gap:5px;padding:5px}
  body .vrail a{flex:0 0 44px}
  body .vrail a.vbook{width:auto !important;flex:0 1 auto;min-width:78px;white-space:nowrap}
}
@media (max-width:360px){
  body .vrail a[href^="mailto"]{display:none}
}

/* ── 7. the last of the sub-11px type, all of it class-driven ────────────
   Measured, not assumed: the dock labels sat at 10.5px, the hero eyebrow at
   10.5px, the comparison tables' column heads at 9.5px (they are only shown
   above 680, below which the engine drops the thead), and both modals' Cinzel
   eyebrows at 9.5–10px. */
@media (max-width:1024px){
  body .v2-hero-eyebrow{font-size:11.5px !important}
  body .cmp th{font-size:11.5px !important}
  body .v2m-tag,body .v2m-grid h4{font-size:11.5px !important}
  body .v2rm-eyebrow,body .v2rm-consent-h{font-size:11.5px !important}
  body .v2-navsub{font-size:11.5px !important}
}

/* ── 8. tap targets that a class or an inline style put out of reach ─────
   Measured at 320–834: standalone chip links rendered 16–43px tall, the
   notes ledger filters 38px, the intake sheet's 40 checkboxes 23px including
   their labels, and the reserve consent boxes 28px. 44px is the floor.
   Anchors sitting inside a sentence are excluded — growing those would open
   the line leading of the paragraph around them. */
@media screen and (max-width:1024px){
  body a[href][data-s*="display:inline-block"],
  body a[href][data-s*="display:inline-flex"],
  body a[href].cz[data-s*="padding:"]{min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box}
  /* …unless the chip is set inside a sentence, where a 44px box would open up
     the leading of the paragraph around it. Scoped to exactly the selector
     above, so no other anchor rule on the page is weakened. */
  body p a[href][data-s*="display:inline-block"],
  body p a[href][data-s*="display:inline-flex"],
  body p a[href].cz[data-s*="padding:"]{min-height:0;display:inline}
  /* the intake sheet: the checkbox is 22px by design, so the label carries
     the hit area (print styles are untouched — this block is screen-only) */
  body .ik-cb{min-height:44px;align-items:center}
  body .ik-cb label{min-height:44px;display:inline-flex;align-items:center}
  /* consent rows built as label>input elsewhere */
  body label:has(> input[type="checkbox"]){min-height:44px;display:flex;align-items:center;gap:10px}
  /* the reservation modal's footnote links — the privacy link and the phone
     number are the two ways out of a stalled form, and both rendered at 17–18px */
  body p.v2rm-priv a[href],body p.v2rm-foot a[href],body .v2rm-dl a[href]{display:inline-flex;align-items:center;min-height:44px}
}

/* ── 8b. the hero must not open with its own words under the dock ────────
   The contact dock is fixed 8px off the bottom and stands 54px tall, so it
   owns the bottom 62px of every screen. Every hero anchors its copy to the
   bottom of a 100svh block, at 64–120px — offsets set for a desktop where no
   dock exists. Measured at 390×780 on 17 pages: the index lede, the SCROLL
   cue, both /location buttons and eleven hero sub-lines all opened underneath
   it. Each anchor is lifted clear of 62px plus a margin.

   Before any of that, the heroes have to fit the screen at all: they are
   100svh tall but begin below a 101–109px fixed header, so the bottom ~105px
   of every hero — the end its copy is anchored to — has always started below
   the fold on a phone. Subtracting the header makes the hero exactly the
   visible area, which is what 100svh was reaching for. */
@media (max-width:1024px){
  body [data-s*="height:min(830px,100svh)"]{height:calc(100svh - 112px) !important}
  body [data-s*="bottom:120px"]{bottom:clamp(96px,13svh,140px) !important}
  body [data-s*="bottom:64px"]{bottom:106px !important}
  /* the vertical SCROLL cue lives in the 44px desktop gutter. The phone gutter
     is 20px, so it sat on top of the copy — measured crossing the "연락처 저장"
     button on /location by 9px, and every hero band elsewhere. A phone does
     not need to be told the page scrolls. (Inline display:flex, hence the
     !important.) */
  body [data-s*="right:44px; bottom:64px"]{display:none !important}
  body [data-s*="padding:0 44px 64px"]{padding-bottom:104px !important}
  body [data-s*="padding:0 44px 84px"]{padding-bottom:120px !important}
  body [data-s*="padding:0 44px 88px"]{padding-bottom:124px !important}
  body [data-s*="padding:0 44px 96px"]{padding-bottom:132px !important}
  /* the class-built hero (implants, care) does the same thing in CSS */
  body .v2-hero{height:calc(88svh - 112px);min-height:420px}
  body .v2-hero-copy{padding-bottom:104px}
}

/* ── 8c. an image with a height but no width sets its own column ─────────
   25 plates carry `height:100%; object-fit:cover` and nothing else. With no
   width the image contributes its INTRINSIC width (1120px) as the grid
   track's minimum, so on /whitening the engine's collapsed 1fr track resolved
   to 1200px inside a 340px box and every line of that section was set 1200px
   wide and then clipped. Giving the image a width hands the track back to
   the container. */
body [data-s="height:100%; object-fit:cover"]{width:100%}
/* the same defence one level up: a grid or flex item whose min-content is
   wider than its track will push the track out rather than shrink */
@media (max-width:1024px){
  body [data-s*="grid-column:"]{min-width:0}
  body .v2-note-no,body .v2-step-no{overflow-wrap:anywhere;min-width:0}
}

/* ── 8f. button rows authored as a single flex line ──────────────────────
   50 rows are written as `display:flex; gap:Npx` with no flex-wrap. Two
   130–150px pills plus their gap have a min-content of 308px, which is more
   than a 320px phone has after its gutters — so the row set the width of the
   whole column it sat in and everything beside it was laid out 326px wide
   inside a 270px box. Wrapping is the only thing that needs to change. */
@media (max-width:834px){
  body [data-s*="display:flex; gap:10px"],body [data-s*="display:flex; gap:12px"],
  body [data-s*="display:flex; gap:14px"],body [data-s*="display:flex; gap:26px"],
  body [data-s*="display:flex; gap:28px"],body [data-s*="display:flex; gap:44px"]{flex-wrap:wrap}
}

/* ── 8e. the three-column atelier row collapses to a zero-width column ───
   The engine turns `grid-template-columns:300px 1fr 360px` into a column
   flex at ≤1024, but the authored `align-items:center` comes with it — and a
   centred flex item is shrink-to-fit, not stretch. The middle panel holds
   only absolutely-positioned children, so it shrank to 0px wide and its
   560px image column vanished, leaving the COMING SOON label floating over
   nothing. Stretching the items restores every panel to the page width. */
@media (max-width:1024px){
  body [data-s*="grid-template-columns:300px 1fr 360px"]{align-items:stretch !important}
  body [data-s*="grid-template-columns:300px 1fr 360px"]>*{width:100%;min-width:0}
}

/* ── 8d. the tablet band kept desktop display type ───────────────────────
   The engine clamps h1/h2/h3 only at ≤680, so between 681 and 1024 the
   headlines stay at their authored 84–118px. At 834 the /collections title
   set "COLLECTIONS" 752px wide inside a 746px column and the page opened
   reading "COLLECTIO". Cinzel display words are single tokens and cannot
   wrap, so the only answer is to scale them — on the same ramp the engine
   uses below 680, one step gentler. */
@media (min-width:681px) and (max-width:1024px){
  body h1,body [data-s*="font-size:118px"],body [data-s*="font-size:110px"],
  body [data-s*="font-size:108px"],body [data-s*="font-size:104px"]{font-size:clamp(48px,8.4vw,84px) !important;line-height:1.1 !important}
  body h2,body [data-s*="font-size:96px"],body [data-s*="font-size:92px"],
  body [data-s*="font-size:88px"],body [data-s*="font-size:84px"],body [data-s*="font-size:76px"],
  body [data-s*="font-size:72px"],body [data-s*="font-size:64px"]{font-size:clamp(38px,6.4vw,64px) !important;line-height:1.2 !important}
  body h3,body [data-s*="font-size:56px"],body [data-s*="font-size:54px"],body [data-s*="font-size:52px"],
  body [data-s*="font-size:48px"],body [data-s*="font-size:46px"],body [data-s*="font-size:44px"],
  body [data-s*="font-size:42px"]{font-size:clamp(28px,4.4vw,44px) !important;line-height:1.3 !important}
}

/* single-word Cinzel page titles still will not fit the smallest phone:
   "COLLECTIONS" at the engine's own 34px floor measures 328px inside a 280px
   column. One token, no break opportunity — so it scales instead. */
@media (max-width:430px){
  body h1.cz{font-size:clamp(23px,7.6vw,34px) !important}
}

/* ── 9. the two modals must fit the screen they open on ──────────────────
   Both panels are sized in vw (min(760px,94vw) / min(680px,94vw)) while their
   backdrop adds its own padding, so at 320px the collections panel measured
   301px inside a 272px box and bled 5px past the right edge. A max-width
   makes the panel answer to the box it is centred in. */
.v2m-panel,.v2rm-panel{max-width:100%}
/* …and the screen they open on is not `vh` tall on an iPad. Safari resolves vh
   against the LARGE viewport — the one with its toolbars retracted — so a panel
   capped at 88vh runs past the bottom bar whenever that bar is showing, which
   is every time the visitor has just scrolled up to tap something. The close
   button and the booking CTAs are the parts that go under it. dvh is the same
   number with the toolbars counted; the vh line above stays as the fallback. */
@supports (height:1dvh){
  .v2m-panel{max-height:88dvh}
  .v2rm-panel{max-height:min(88dvh,940px)}
}
@media (max-width:560px){
  body .v2m{padding:14px}
  body .v2m-panel{padding:44px 22px 36px}
  body .v2rm-panel{width:100%;height:100dvh;max-height:100dvh}
}

/* ── 10. iPad portrait: a halved grid orphans every placement in it ───────
   The engine halves track counts at ≤1024 — repeat(12,1fr)→6, 6→3, 4→2 — but
   the CHILDREN keep the placements they were authored with, and those were
   written against the original count. Every one of the 209 explicit placements
   on this site reads as `N / span M` on a twelve-track shell: 7 / span 6,
   6 / span 7, 1 / span 5.

   Placed past the end of a halved grid, they do not clamp — they create
   implicit auto-sized columns, and auto tracks take their content width before
   any `1fr` gets a share. Measured on the home page at 1024: the shell resolved
   to `0 0 0 0 0 0 110 110 110 110 110 110` — the first six tracks at ZERO — so
   THE ATELIER's left column, authored `1 / span 6`, rendered 120px wide (six
   dead tracks plus five gaps) and 1,805px tall, breaking Korean prose to five
   characters a line beside a full-width neighbour. Four such columns on the
   home page alone; /about's plate mosaic collapsed the same way, its 330px
   plates measuring 159px and 88px.

   Below 835 none of this shows, because there the engine also clears the
   placements and everything stacks. So the fault lives exactly in the band
   between: iPad Pro portrait (1024), any iPad in landscape, and a desktop
   window narrowed past 1025 — which is why it read as an "iPad vertical" bug.

   The fix is to stop halving in that band and let the authored tracks stand.
   At 1024 they still hold: a twelve-track shell gives 55px tracks, so the
   editorial pair lands at 451/451 and the mosaic at 611/297. Halving is only
   ever right for a grid whose children are auto-placed, and this site's are
   not. ≤834 is untouched. */
@media (min-width:835px) and (max-width:1024px){
  body [data-s*="grid-template-columns:repeat(12,1fr)"]{grid-template-columns:repeat(12,1fr) !important}
  body [data-s*="grid-template-columns:repeat(6,1fr)"]{grid-template-columns:repeat(6,1fr) !important}
  body [data-s*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(4,1fr) !important}
}

/* ── phone: rows that were authored as single-line flex ────────────────────
   Two bars are laid out as a non-wrapping flex row with fixed-basis children,
   so below roughly 900px their contents simply run off the right edge. They
   are not caught by the engine's grid rules because they are flex, not grid. */
@media (max-width:834px){
  /* the burgundy enquiry strip under the hero */
  body [data-s*="display:flex; align-items:center; gap:20px; padding:20px 44px"]{
    flex-wrap:wrap !important;gap:12px !important;padding:22px 20px !important}
  body [data-s*="display:flex; align-items:center; gap:20px; padding:20px 44px"]>input,
  body [data-s*="display:flex; align-items:center; gap:20px; padding:20px 44px"]>select{
    flex:1 1 100% !important;min-width:0 !important}
  body [data-s*="display:flex; align-items:center; gap:20px; padding:20px 44px"]>label{
    flex:1 1 100% !important;line-height:1.6}
  body [data-s*="display:flex; align-items:center; gap:20px; padding:20px 44px"]>span[data-s="flex:1"]{display:none !important}
  body [data-s*="display:flex; align-items:center; gap:20px; padding:20px 44px"]>a.pill{
    flex:1 1 100% !important;justify-content:center;min-height:48px}
}
@media (min-width:835px) and (max-width:1024px){
  body [data-s*="display:flex; align-items:center; gap:20px; padding:20px 44px"]{flex-wrap:wrap !important}
  body [data-s*="display:flex; align-items:center; gap:20px; padding:20px 44px"]>select{flex:1 1 220px !important}
}
/* the statutory footer line: a column flex whose children keep their content
   width, so the four policy links stayed on one 437px line inside a 390px page */
@media (max-width:680px){
  body .v2-footer-bar-in>*{max-width:100% !important}
  body .v2-footer-bar p{width:100%}
  body .v2-footer-bar .v2f-links{flex-wrap:wrap !important;width:100%;gap:2px 18px !important}
}
/* nothing should end up underneath the fixed contact dock */
@media (max-width:1024px){
  body .v2-footer-bar-in{padding-bottom:104px}
}

/* The emblem's aura rings are drawn up to 52px outside their box. Once a
   chapter unpins the emblem is no longer centred — it sits on the 20px page
   gutter — so those rings cross the left edge. They also pulse on an infinite
   loop, and the peak of that pulse crossed it even when the resting ring did
   not. Pull the rings in and stop the pulse: an always-running compositor
   animation is a poor trade on a device nobody hovers on.
   Measured on /crowns, /whitening, /aesthetic and /reserve at 320 and 390. */
@media (max-width:834px){
  body .v2-shellwrap::before,body .v2-shellwrap::after,body .v2-ring2{animation:none !important}
  body .v2-ring2{inset:-14px}
  body .v2-shellwrap::before{inset:-24px}
  body .v2-shellwrap::after{inset:-12px}
}

/* The two underlined links in the burgundy closing band ("문진표 미리 보기",
   "진료 노트 읽기") are standalone controls, not links inside a sentence, so the
   WCAG 2.5.8 inline exemption does not cover them. They render ~26px tall.
   Measured across 12 pages at 320-834. */
@media (max-width:1024px){
  /* !important because `body p > a[href]:not([class])` above exempts links in
     running prose and outranks this — but the <p> holding these two is a flex
     CTA row, not a sentence, so that exemption misfires here. */
  body [data-s*="padding-bottom:2px; border-bottom:1px solid rgba(201, 162, 75,0.55)"]{
    display:inline-flex !important;align-items:center;min-height:44px !important;
    padding-bottom:0 !important;border-bottom:0 !important;
    box-shadow:inset 0 -1px 0 rgba(201,162,75,0.55)}
}

/* the footer's own booking pair — 13px padding on a 12.5px line lands at ~43px */
@media (max-width:1024px){
  body .v2f-cta,body .v2f-cta2{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
}

/* ══ drawn marks ══════════════════════════════════════════════════════════
   The reference site carries ~36 vector marks per page — arrows, chevrons,
   hairlines — where this one carried typographic "→" and "+". A glyph cannot
   be drawn, cannot animate its parts, and is read aloud by screen readers as
   punctuation. These are built from strokes instead, so they are crisp at any
   size, inherit their colour, animate, and are aria-hidden.

   They live in the markup (not injected at runtime) and are present in BOTH
   language strings, because the KR/EN switch replaces innerHTML — anything
   added by script would vanish on the first toggle. */

.v2-arw{position:relative;display:inline-block;width:1.55em;height:.62em;
  margin-left:.5em;vertical-align:middle;flex:0 0 auto}
/* the shaft: drawn from the tail, so it extends rather than slides */
.v2-arw::before{content:"";position:absolute;left:0;right:.30em;top:50%;height:1px;
  background:currentColor;opacity:.85;transform:scaleX(.84);transform-origin:0 50%;
  transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .6s cubic-bezier(.16,1,.3,1)}
/* the head: two strokes, not a glyph */
.v2-arw::after{content:"";position:absolute;right:.10em;top:50%;width:.42em;height:.42em;
  margin-top:-.21em;border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);transform-origin:50% 50%;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
a:hover .v2-arw::before,a:focus-visible .v2-arw::before,
button:hover .v2-arw::before,summary:hover .v2-arw::before,
.rcard:hover .v2-arw::before,.pill:hover .v2-arw::before{transform:scaleX(1);opacity:1}
a:hover .v2-arw::after,a:focus-visible .v2-arw::after,
button:hover .v2-arw::after,summary:hover .v2-arw::after,
.rcard:hover .v2-arw::after,.pill:hover .v2-arw::after{transform:translateX(.16em) rotate(45deg)}

/* the accordion marker: a plus that becomes a minus, rather than a rotated glyph */
.v2-plus{position:relative;display:inline-block;width:.62em;height:.62em;vertical-align:middle;flex:0 0 auto}
.v2-plus::before,.v2-plus::after{content:"";position:absolute;left:50%;top:50%;background:currentColor}
.v2-plus::before{width:100%;height:1px;transform:translate(-50%,-50%)}
.v2-plus::after{width:1px;height:100%;transform:translate(-50%,-50%) scaleY(1);
  transform-origin:50% 50%;transition:transform .5s cubic-bezier(.16,1,.3,1)}
details[open] .v2-plus::after{transform:translate(-50%,-50%) scaleY(0)}
/* the site already rotates this span 45deg on open — that plus the collapsing
   upright would land on a diagonal minus, so the rotation is cancelled here */
.v2-faq-in details[open] summary .cg:last-child:has(.v2-plus){transform:none}

@media (prefers-reduced-motion:reduce){
  .v2-arw::before,.v2-arw::after,.v2-plus::after{transition:none}
  .v2-arw::before{transform:scaleX(1)}
}

/* .pill's hover fill is an <i> — `.pill i{position:absolute;inset:0;
   background:currentColor;transform:scaleY(0)}` — declared in each page's inline
   <style>. A drawn mark inside the pill's label is also an <i>, so it was being
   absolutely positioned, painted with the fill colour and scaled to nothing.
   Claim it back; the selector is one class more specific than the pill's. */
.pill i.v2-arw,.pill i.v2-plus{position:relative;inset:auto;border-radius:0;
  background:none;transform:none;transform-origin:50% 50%}
.pill i.v2-arw{width:1.55em;height:.62em}
.pill i.v2-plus{width:.62em;height:.62em}

/* ══ drawn clinical diagrams ═══════════════════════════════════════════════
   The reference site carries schematic figures the way this one carries
   photographs; photography is the budget this project does not have, and a
   drawn cross-section is the honest form anyway — it is a schematic, not a
   patient, so it carries none of the 의료법 제56조 exposure that a treatment
   photograph does. Everything here is vector and inherits the palette. */
.v2-dia{margin:64px 0 0;padding:0}
.v2-dia-head{display:block;margin:0 0 26px}
.v2-dia-eyebrow{display:block;font-size:10.5px;letter-spacing:0.4em;color:#836a31}
.v2-dia-title{display:block;margin-top:14px;font-size:clamp(20px,2.2vw,28px);font-weight:400;line-height:1.5;color:#1a1414}
.v2-dia-svg{display:block;width:100%;height:auto;max-width:1040px;margin-inline:auto;overflow:visible}
.v2-dia-controls,.v2-dia-mobile{display:none}

/* ── dual figures ────────────────────────────────────────────────────────────
   A wide construction drawing cannot be read on a phone by scrolling it
   sideways: the labels that give it its meaning end up off-screen, and the
   swipe is undiscoverable. A figure marked .v2-dia-dual therefore ships two
   presentations of the SAME drawing — identical path data, so they cannot
   drift apart. Desktop and iPad get the drawing with leader-line labels
   around it; a phone gets the drawing scaled to the column with numbered
   markers on it and the labels below as a numbered key, at HTML text sizes
   that respect the 11px floor instead of being scaled under it. */
.v2-dia-v,.v2-dia-key{display:none}
.v2-dia-key{margin:16px 0 0;padding:0;list-style:none;
  border-top:1px solid rgba(26,20,20,.18)}
.v2-dia-key li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;
  align-items:start;padding:13px 2px;border-bottom:1px solid rgba(26,20,20,.1)}
.v2-dia-key li>span{grid-row:1 / 3;font-family:'Cormorant Garamond',serif;font-size:19px;
  font-style:italic;line-height:1.15;color:#7a2530}
.v2-dia-key b{font-family:'Nanum Myeongjo',serif;font-size:16px;font-weight:400;
  line-height:1.45;color:#1a1414}
.v2-dia-key small{display:block;margin-top:3px;font-size:13px;font-weight:300;
  line-height:1.7;color:#5f554e}

/* The Stories decision diagram is a chapter rather than an illustration in a
   text column. On larger screens it uses one complete viewport while keeping
   the authored SVG proportions and surrounding page sequence intact. */
@media (min-width:835px){
  .v2-dia-screen{box-sizing:border-box;display:grid;grid-template-rows:max-content minmax(0,1fr);width:100vw;height:calc(100vh - 77px);height:calc(100svh - 77px);scroll-margin-top:77px;margin:clamp(72px,8vw,118px) calc(50% - 50vw) 0;padding:clamp(30px,4.5vh,52px) clamp(32px,4.5vw,78px) clamp(82px,9vh,104px);background:#f5efe6}
  .v2-dia-screen .v2-dia-head{align-self:start;margin:0 0 clamp(8px,1.5vh,18px);max-width:none}
  .v2-dia-screen .v2-dia-title{font-size:clamp(27px,2.35vw,42px);line-height:1.12}
  .v2-dia-screen .v2-dia-scroll{display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden}
  .v2-dia-screen .v2-dia-svg{width:100%;height:100%;min-height:0;max-width:none;max-height:none}
}

/* Optional reading lens for the home decision diagram. All SVG labels remain
   visible without JavaScript; the enhancement only adds generous focus/touch
   targets and a short explanation rail. */
.v2-dia-interactive .v2-dia-scroll{position:relative}
.v2-dia-hotspot{cursor:pointer;outline:none}
.v2-dia-hit-area{fill:transparent;stroke:transparent;stroke-width:1;transition:fill .24s ease,stroke .24s ease}
.v2-dia-hit-ring{fill:none;stroke:#7a2530;stroke-width:1.5;opacity:0;transform:scale(.74);transform-box:fill-box;transform-origin:center;transition:opacity .24s ease,transform .32s cubic-bezier(.16,1,.3,1)}
.v2-dia-hotspot:hover .v2-dia-hit-area,.v2-dia-hotspot:focus-visible .v2-dia-hit-area,.v2-dia-hotspot.is-active .v2-dia-hit-area{fill:rgba(201,162,75,.075);stroke:rgba(131,106,49,.22)}
.v2-dia-hotspot:hover .v2-dia-hit-ring,.v2-dia-hotspot:focus-visible .v2-dia-hit-ring,.v2-dia-hotspot.is-active .v2-dia-hit-ring{opacity:1;transform:scale(1)}
.v2-dia-readout{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:12px;padding:16px 4px;border-top:1px solid rgba(26,20,20,.14);border-bottom:1px solid rgba(26,20,20,.14)}
.v2-dia-readout-no{font-family:'Cormorant Garamond',serif;font-size:22px;font-style:italic;color:#836a31}
.v2-dia-readout-copy b{display:block;font-family:'Nanum Myeongjo',serif;font-size:16px;font-weight:400;color:#1a1414}
.v2-dia-readout-copy small{display:block;margin-top:3px;font-size:12.5px;font-weight:300;line-height:1.65;color:#5f554e}
.v2-dia-readout-hint{font-family:Cinzel,serif;font-size:10px;letter-spacing:.2em;color:#836a31;white-space:nowrap}
@media (max-width:680px){.v2-dia-readout{display:none}}
@media (prefers-reduced-motion:reduce){.v2-dia-hit-area,.v2-dia-hit-ring{transition:none}}

/* The layers build downward from the surface, in the order a bur would meet
   them; the reduction band then draws, and only then do the labels arrive.

   The collapsed start state is gated on .venus-motion — the same gate the rest
   of the reveal system uses — because venus-stage.js returns before arming any
   observer under 834px or reduced motion (venus-stage.js:725). Without the
   gate the figure has no is-in to wait for and stays collapsed forever, which
   on a phone means a blank rectangle where the drawing should be. */
.venus-motion .v2-dia .v2-dia-layer{transform:scaleX(0);transform-origin:150px 0;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.venus-motion .v2-dia .v2-dia-l1{transition-delay:.05s}
.venus-motion .v2-dia .v2-dia-l2{transition-delay:.22s}
.venus-motion .v2-dia .v2-dia-l3{transition-delay:.39s}
.venus-motion .v2-dia .v2-dia-prep,.venus-motion .v2-dia .v2-dia-dej{opacity:0;
  transform:scaleX(0);transform-origin:150px 0;
  transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.venus-motion .v2-dia .v2-dia-prep{transition-delay:.72s}
.venus-motion .v2-dia .v2-dia-dej{transition-delay:.60s}
.venus-motion .v2-dia .v2-dia-rule,.venus-motion .v2-dia .v2-dia-labels,
.venus-motion .v2-dia .v2-dia-foot{opacity:0;transition:opacity .9s ease .95s}
.v2-dia.is-in .v2-dia-layer,.v2-dia.is-in .v2-dia-prep,.v2-dia.is-in .v2-dia-dej{transform:scaleX(1)}
.v2-dia.is-in .v2-dia-prep,.v2-dia.is-in .v2-dia-dej,
.v2-dia.is-in .v2-dia-rule,.v2-dia.is-in .v2-dia-labels,.v2-dia.is-in .v2-dia-foot{opacity:1}

/* below the tablet break the right-hand labels fall off the canvas, so the
   figure scrolls in its own box rather than shrinking the drawing to nothing */
@media (max-width:834px){
  /* the right-hand labels will not survive a 390px canvas, so the drawing keeps
     its size and scrolls inside its own box — with an edge fade and a written
     hint, because a scroll container with no affordance just looks cropped */
  .v2-dia{position:relative}
  .v2-dia-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none}
  .v2-dia-scroll::-webkit-scrollbar{display:none}
  /* 1:1 with the viewBox, not 0.756 of it. At 680px a 900-unit drawing scaled
     every label down by a quarter, so authored 11.5px text rendered at 8.7px on
     a phone — under the same floor the rest of the site enforces. The box already
     scrolls; it may as well scroll at a size the labels survive. */
  .v2-dia-svg{min-width:900px}
  .v2-dia-title{font-size:19px}
  .v2-dia-eyebrow{font-size:11.5px !important;letter-spacing:.3em}   /* the 11px floor */
  /* the fade has to match the ground the figure was placed on; hard-coding cream
     put a cream smear on the right edge of any figure dropped into a tinted or
     wine band. Override with style="--v2-dia-fade:#ece6de" on the <figure>. */
  .v2-dia::after{content:"";position:absolute;right:0;top:96px;bottom:26px;width:34px;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(0,0,0,0),var(--v2-dia-fade,#f5efe6) 78%)}
  .v2-dia-hint{display:block;margin-top:12px;font-size:11.5px;letter-spacing:.06em;color:#836a31}
}
/* the hint only exists for the scroll box, which only exists below 834 —
   scoped to a min-width rather than left as a bare default, because a bare
   default declared after the media query wins at every width and hid it
   everywhere, including on the /smile reference figure */
@media (min-width:835px){.v2-dia-hint{display:none}}

/* Explicit diagram controls make the tablet/mobile canvas understandable and
   keyboard reachable instead of relying on an invisible horizontal gesture. */
@media (max-width:834px){
  .v2-dia-scroll{overscroll-behavior-x:contain;scroll-behavior:smooth}
  .v2-dia::after{bottom:78px;opacity:1;transition:opacity .24s ease}
  .v2-dia.v2-dia-end::after{opacity:0}
  .v2-dia-controls{display:flex;align-items:center;gap:16px;margin-top:14px}
  .v2-dia-controls[hidden]{display:none}
  .v2-dia-progress{position:relative;display:block;flex:1;height:1px;background:rgba(26,20,20,.18);overflow:hidden}
  .v2-dia-progress i{position:absolute;inset:0;background:#7a2530;transform:scaleX(0);transform-origin:left;transition:transform .12s linear}
  .v2-dia-buttons{display:flex;gap:8px}
  .v2-dia-buttons button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(122,37,48,.35);border-radius:50%;background:rgba(245,239,230,.82);font-family:'Cormorant Garamond',serif;font-size:21px;line-height:1;color:#7a2530}
  .v2-dia-buttons button:focus-visible{outline:2px solid #7a2530;outline-offset:3px}
  .v2-dia-buttons button:disabled{opacity:.34}
  .v2-dia-hint{margin-top:8px;transition:opacity .2s ease}
  .v2-dia.v2-dia-scrolled .v2-dia-hint{opacity:0}
}

/* 743, not the 834 the rest of the site uses to mean "phone": a tablet in
   portrait starts at 744 (iPad mini) and runs to 834 (iPad Pro 11), and a tablet
   should keep the drawing with its labels around it. Phones top out at 440 in
   portrait, so nothing lands in between. */
@media (max-width:743px){
  .v2-dia-dual .v2-dia-h{display:none}
  .v2-dia-dual .v2-dia-v,.v2-dia-dual .v2-dia-key{display:block}
}
/* The horizontal labels are authored to clear the 11px floor at the narrowest
   column that still gets them (~660px, an iPad mini in portrait). Capping the
   drawing keeps that same type from bloating on a wide desktop. */
.v2-dia-dual .v2-dia-h{max-width:940px}

@media (max-width:834px){
  /* Every affordance that exists only to cope with an oversized drawing comes
     off a dual figure — including in the 744–834 band, where a small tablet
     still gets the horizontal drawing but must not be made to scroll it. */
  .v2-dia-dual .v2-dia-svg{min-width:0}
  .v2-dia-dual .v2-dia-scroll{overflow:visible}
  .v2-dia-dual .v2-dia-hint,.v2-dia-dual .v2-dia-controls{display:none}
  .v2-dia-dual::after{display:none}
}

/* The two signature diagrams get a semantic vertical reading composition on
   phones. Desktop and tablet retain the complete authored SVG. */
/* 743 to match the dual-figure swap, and the drawing STAYS: the written list is
   the key to the portrait drawing above it, not a replacement for it. Hiding
   .v2-dia-scroll here is what left the redrawn portrait SVGs visible only in the
   681–834 band — a range no phone and no tablet actually reports. */
@media (max-width:743px){
  /* a mobile-ready figure with no portrait drawing of its own has nothing to show
     in the scroll box but the landscape SVG at its 900px floor, which is exactly
     the sideways scroll this whole change exists to remove */
  .v2-dia-mobile-ready:not(.v2-dia-dual) .v2-dia-scroll{display:none}
  .v2-dia-mobile-ready .v2-dia-controls,
  .v2-dia-mobile-ready .v2-dia-hint{display:none}
  .v2-dia-mobile-ready::after{display:none}
  .v2-dia-mobile{display:block}
  .v2-dia-mobile-steps{margin:0;padding:0;list-style:none;border-top:1px solid rgba(26,20,20,.18)}
  /* An escalation ladder is a drawing, not a bulleted list: the numbers are nodes
     on a spine, and the step where enamel starts coming off gets a drawn threshold
     across that spine. Reading order carries the argument on a phone the same way
     left-to-right carries it on the landscape figure. */
  .v2-dia-mobile-steps li{position:relative}
  .v2-dia-mobile-steps li::before{content:"";position:absolute;left:21px;top:0;bottom:0;
    width:1px;background:rgba(122,37,48,.26)}
  .v2-dia-mobile-steps li:first-child::before{top:27px}
  .v2-dia-mobile-steps li:last-child::before{bottom:auto;height:27px}
  .v2-dia-mobile-steps li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start;padding:18px 10px;border-bottom:1px solid rgba(26,20,20,.14)}
  .v2-dia-mobile-steps li>span{position:relative;z-index:1;grid-row:1 / 3;
    display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
    background:#fbf8f2;border:1px solid rgba(122,37,48,.42);
    font-family:'Cormorant Garamond',serif;font-size:17px;font-style:italic;
    line-height:1;color:#7a2530}
  .v2-dia-mobile-steps b,.v2-dia-mobile-scale b{font-family:'Nanum Myeongjo',serif;font-size:17px;font-weight:400;line-height:1.45;color:#1a1414}
  .v2-dia-mobile-steps small,.v2-dia-mobile-scale small{display:block;margin-top:5px;font-size:13px;font-weight:300;line-height:1.7;color:#5f554e}
  .v2-dia-mobile-steps .v2-dia-mobile-cut{background:rgba(122,37,48,.05)}
  .v2-dia-mobile-steps .v2-dia-mobile-cut::after{content:"";position:absolute;
    left:0;right:0;top:-1px;border-top:1px solid #7a2530}
  .v2-dia-mobile-steps .v2-dia-mobile-cut>span{border-color:#7a2530;
    background:#7a2530;color:#f5efe6}
  /* a tinted ground and a drawn rule, not a coloured rail down the left edge */
  .v2-dia-mobile-rule{margin:18px 0 0;padding:15px 16px;border-top:1px solid #7a2530;background:rgba(245,239,230,.7);font-size:13px;font-weight:400;line-height:1.8;color:#4a423c}
  .v2-dia-mobile-scale{border-top:1px solid rgba(26,20,20,.18)}
  .v2-dia-mobile-scale>div{position:relative;display:grid;grid-template-columns:minmax(92px,32%) 1fr;column-gap:16px;padding:18px 10px;border-bottom:1px solid rgba(26,20,20,.14)}
  .v2-dia-mobile-scale>div>span{grid-row:1 / 3;font-family:'Cormorant Garamond',serif;font-size:21px;font-style:italic;line-height:1.25;color:#7a2530}
  .v2-dia-mobile-scale .v2-dia-mobile-cut{padding-left:16px;border-left:3px solid #7a2530;background:repeating-linear-gradient(135deg,rgba(122,37,48,.08) 0 6px,rgba(122,37,48,.02) 6px 12px)}

  /* an n-up comparison becomes a sequence on a phone: each case keeps its own
     section — cropped out of the landscape drawing, not redrawn — so the thing
     being compared stays visible beside the words that describe it */
  .v2-dia-cases{margin:0;padding:0;list-style:none;border-top:1px solid rgba(26,20,20,.18)}
  .v2-dia-cases li{display:grid;grid-template-columns:92px minmax(0,1fr);column-gap:16px;
    align-items:start;padding:18px 2px;border-bottom:1px solid rgba(26,20,20,.1)}
  .v2-dia-case-svg{display:block;width:92px;height:auto}
  .v2-dia-case-copy span{display:block;font-family:'Cormorant Garamond',serif;
    font-size:15px;font-style:italic;color:#836a31}
  .v2-dia-case-copy b{display:block;margin-top:2px;font-family:'Nanum Myeongjo',serif;
    font-size:16px;font-weight:400;line-height:1.45;color:#1a1414}
  .v2-dia-case-copy em{display:block;margin-top:9px;font-family:'Cormorant Garamond',serif;
    font-size:19px;font-style:italic;line-height:1.2;color:#7a2530}
  .v2-dia-case-copy small{display:block;margin-top:4px;font-size:13px;font-weight:300;
    line-height:1.7;color:#5f554e}}
@media (prefers-reduced-motion:reduce){
  .v2-dia .v2-dia-layer,.v2-dia .v2-dia-prep,.v2-dia .v2-dia-dej{transform:scaleX(1);transition:none}
  .v2-dia .v2-dia-prep,.v2-dia .v2-dia-dej,.v2-dia .v2-dia-rule,
  .v2-dia .v2-dia-labels,.v2-dia .v2-dia-foot{opacity:1;transition:none}
}

/* Figure footnotes live in HTML, not in the drawing. SVG <text> does not wrap,
   so a footnote that fitted a 900-unit canvas in Korean ran 200–370 units past
   its right edge in English — and the SVG is overflow:visible, so it painted
   outside the figure rather than being caught by any check on the canvas. */
.v2-dia-note{margin:14px 0 0;max-width:80ch;font-size:13px;font-weight:300;
  line-height:1.95;color:#5F554E;word-break:keep-all;overflow-wrap:anywhere}
.v2-dia-note+.v2-dia-note{margin-top:6px}
@media (max-width:834px){.v2-dia-note{font-size:12.5px;line-height:1.9}}

/* The contact dock carried the words KAKAO · TEL · INSTA · MAIL · MAP set in
   8.5px Cinzel inside 52px circles. At that size a word is a texture, not a
   label — it is read by shape, which is what an icon is for, only worse. These
   are drawn marks now, inheriting the dock's colour so they invert with it in
   dark sections, with the word kept for screen readers. */
.vrail a .v2-ic{display:block;width:19px;height:19px}
.v2-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:680px){.vrail a .v2-ic{width:17px;height:17px}}

/* Full-page clinical figures: a tall reading composition on desktop, with the
   authored semantic mobile lists retained below 680px. */
@media (min-width:835px){
  .v2-dia-home-screen,.v2-dia-enamel-screen{box-sizing:border-box;display:grid;
    grid-template-rows:max-content minmax(0,1fr) auto auto;width:100vw;
    height:calc(100svh - 77px);min-height:680px;margin:clamp(70px,8vw,116px) calc(50% - 50vw) 0;
    padding:clamp(28px,4vh,48px) clamp(32px,4.5vw,78px) clamp(42px,5vh,64px);
    background:#f5efe6;scroll-margin-top:77px}
  .v2-dia-home-screen .v2-dia-head,.v2-dia-enamel-screen .v2-dia-head{margin:0 0 clamp(8px,1.5vh,18px)}
  .v2-dia-home-screen .v2-dia-title,.v2-dia-enamel-screen .v2-dia-title{font-size:clamp(27px,2.35vw,42px);line-height:1.16}
  .v2-dia-home-screen .v2-dia-scroll,.v2-dia-enamel-screen .v2-dia-scroll{display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden}
  .v2-dia-home-screen .v2-dia-svg,.v2-dia-enamel-screen .v2-dia-svg{width:100%;height:100%;min-height:0;max-width:none;max-height:none}
  .v2-dia-enamel-screen .v2-dia-note{margin-inline:auto;text-align:center}
}

/* Five crown materials: the photograph remains primary and the key underneath
   mirrors the left-to-right order of the actual specimens. */
.v2-material-visual{margin:54px auto 0;max-width:1460px;text-align:center}
.v2-material-visual img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(201,162,75,.28);box-shadow:0 32px 76px -46px rgba(20,6,8,.72)}
.v2-material-visual .v2-material-plate{display:block;width:100%;height:auto;border:1px solid rgba(201,162,75,.28);box-shadow:0 32px 76px -46px rgba(20,6,8,.72)}
.v2-material-key{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:1px;background:rgba(201,162,75,.22)}
.v2-material-key span{padding:14px 10px;background:#5c1a1e;font-family:Cinzel,serif;font-size:10px;letter-spacing:.14em;color:#e9d79e;text-align:center}
.v2-material-shade{margin:20px auto 0;max-width:64ch;font-size:13.5px;font-weight:300;line-height:1.9;color:rgba(245,239,230,.72);text-align:center}
.v2-material-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin-top:42px;background:rgba(201,162,75,.22);border:1px solid rgba(201,162,75,.22)}
.v2-material-grid .colcard{display:flex;min-width:0;min-height:330px;padding:34px 24px;flex-direction:column;align-items:center;justify-content:flex-start;background:#5c1a1e;border:0;color:#f5efe6}
.v2-material-no{font-size:28px;font-style:italic;line-height:1;color:#c9a24b}
.v2-material-name{display:block;margin-top:28px;font-size:16px;letter-spacing:.12em;color:#f5efe6}
.v2-material-copy{display:block;margin-top:22px;max-width:24ch;font-size:13.5px;font-weight:300;line-height:1.9;color:rgba(245,239,230,.7)}
.v2-material-more{display:block;margin-top:auto;padding-top:24px;font-size:10px;letter-spacing:.2em;color:#c9a24b}
@media (max-width:1100px){.v2-material-grid{grid-template-columns:repeat(2,1fr)}.v2-material-key{grid-template-columns:1fr}.v2-material-key span{padding:10px}.v2-material-grid .colcard:last-child{grid-column:1 / -1}}
@media (max-width:620px){.v2-material-grid{grid-template-columns:1fr}.v2-material-grid .colcard:last-child{grid-column:auto}.v2-material-grid .colcard{min-height:260px}}

/* One centered axis for recurring rows, cards and list systems. Paragraphs keep
   a readable measure, but no longer jump between left and centred alignment. */
.v2-steps,.v2-notes{max-width:1180px;margin-inline:auto}
.v2-step,.v2-note,.trow,.colcard,.lrow,.rcard,.v2-std>div{text-align:center !important}
.v2-step{grid-template-columns:90px minmax(0,1fr) 150px;align-items:center}
.v2-step-desc{margin-inline:auto}
.v2-step-time{display:block;margin-top:6px;font-size:16px;font-style:normal;font-variant-numeric:lining-nums tabular-nums;color:#7a2530}
.v2-note{grid-template-columns:100px minmax(0,1fr) 130px 40px}
.v2-note-title,.v2-note-meta{margin-inline:auto}
.trow{grid-template-columns:64px minmax(180px,300px) minmax(0,1fr) 150px !important;text-align:center !important}
.trow>span,.lrow>span{justify-self:center}
.trow .plate{width:100%}
.colcard{align-items:center}
.router-grid .rcard{align-items:center}
.cmp th,.cmp td{text-align:center}
.v2-std>div span{max-width:34ch;margin-inline:auto}
@media (max-width:900px){
  .trow{grid-template-columns:52px minmax(0,1fr) !important}
  .trow>span:nth-child(3){justify-self:stretch}
}
@media (max-width:834px){
  .v2-step,.v2-note{grid-template-columns:1fr !important;gap:8px;padding-inline:16px}
  .v2-note-thumb,.v2-note-arrow{display:none}
  .v2-step-no,.v2-note-no{justify-self:center}
}

/* The construction badge belongs in a quiet corner of cinematic chapters so
   it does not collide with the centred section copy. */
.v2-cine-frame>.v2-cs-badge{inset:auto clamp(18px,3vw,42px) clamp(18px,3vw,38px) auto;display:block;padding:0;text-align:center}
.v2-cine-frame>.v2-cs-badge>span{display:inline-block;padding:9px 14px;border:1px solid rgba(233,215,158,.34);border-radius:999px;background:rgba(92,26,30,.44);backdrop-filter:blur(6px)}
.v2-cine-frame>.v2-cs-badge b{font-size:10px;letter-spacing:.24em}
/* disclosure sub-line must never be display:none — LD-L / 시행령 §23①7호 */

/* ── print ────────────────────────────────────────────────────────────────
   This stylesheet loads after each page's inline <style>, so an !important
   layout rule here outranks that page's .pr-hide{display:none!important} at
   equal specificity. .v2-navbar is exactly that case: the questionnaire hid
   `nav` but the logo band kept printing across the top of the sheet, taking
   space that should hold answers. Site chrome is suppressed here instead, for
   every page, not only the one that noticed. */
@media print{
  /* .v2-footer / .v2-footer-bar deliberately NOT hidden: the footer carries the 의료기관 identity
     block (명칭 · 대표자 · 소재지 · 전화), and 의료법 §42 compliance is judged on what the reader
     actually sees — a printed page included. Hiding it here reopened the same defect as the
     JS-only footer did. Chrome/rail furniture stays hidden. */
  body .v2-navbar,body nav,body header,body .vrail,
  body .vmenu,body .vdd,body .vddp,body .vlang,body [data-v2-cluster],
  body .v2rm,body .v2m,body #v2ld,body .v2-band,body .vmarq,body .v2-pageveil,
  body .v2-marble,body .v2-marble-col,body .v2-marble-full,body .v2-lum,
  body venus-stage,body .pr-hide{display:none !important}
  body,html{background:#fff !important}
  /* the risk section prints — omitting 부작용 is the offence, and a printout is what a patient keeps */
  body .v2-risk{background:#fff !important;border-top:1px solid #1a1414 !important;page-break-inside:auto}
  body .v2-risk-in{padding:24px 0 !important}
  body .v2-risk-list li,body .v2-risk-lede,body .v2-risk-foot{color:#1a1414 !important;font-size:11pt !important}
  /* the AI provenance caption prints — a label that vanishes on paper is not a label */
  body .v2-ai-cap{position:static !important;background:none !important;padding:6px 0 !important}
  body .v2-ai-cap>span{color:#1a1414 !important;font-size:10.5px !important}
  /* The footer is white-on-oxblood on screen; on paper it must simply be readable, because it is
     the only place the 명칭 · 대표자 · 소재지 · 전화 identity block appears. */
  body .v2-footer,body .v2-footer-bar{background:#fff !important;color:#1a1414 !important;
    border-top:1px solid #1a1414 !important}
  body .v2-footer *,body .v2-footer-bar *{color:#1a1414 !important}
  body .v2-footer nav,body .v2-footer-brand img{display:none !important}
  body *{box-shadow:none !important;text-shadow:none !important;animation:none !important;
    transition:none !important;filter:none !important}
  body [data-reveal],body [data-win],body [data-lines],body .v2-dia *{
    opacity:1 !important;transform:none !important;clip-path:none !important}
  body .v2-dia-scroll{overflow:visible !important}
  body .v2-dia-hint{display:none !important}
}

/* ── v2-dia interactivity: hover spotlights a keyed part; press pins it and opens its note ── */
figure[data-dia] [data-k]{cursor:pointer}
figure[data-dia] svg .dia-hit{fill:transparent}
figure[data-dia] svg :is(g,path,circle,ellipse,rect,line,polyline,text,use,image){transition:opacity .38s ease}
figure[data-dia] svg .dia-dim{opacity:.55}
figure[data-dia] li[data-k],figure[data-dia] figcaption [data-k]{transition:opacity .3s ease}
figure[data-dia][data-dia-on] li[data-k]:not(.dia-hot),figure[data-dia][data-dia-on] figcaption [data-k]:not(.dia-hot){opacity:.6}
.v2-dia-info{margin:16px 0 0;padding:15px 20px 14px;background:rgba(122,37,48,.05);border:1px solid rgba(122,37,48,.14)}
.v2-dia-info[hidden]{display:none}
.v2-dia-info p{margin:0;font-size:13.5px;font-weight:300;line-height:2;color:#4A423C;word-break:keep-all}
.v2-material-visual .v2-dia-info{background:rgba(245,239,230,.06);border-color:rgba(233,215,158,.25);text-align:center}
.v2-material-visual .v2-dia-info p{color:rgba(245,239,230,.82)}
.v2-dia-touchhint{display:none;margin-top:10px;font-size:11.5px;letter-spacing:.04em;color:#836a31;opacity:0;transition:opacity .4s ease}
figure[data-dia] .v2-dia-touchhint{display:block;opacity:.8}
figure[data-dia][data-dia-on] .v2-dia-touchhint{opacity:0}
.v2-material-visual .v2-dia-touchhint{color:#c9a24b}
@media (prefers-reduced-motion:reduce){
  figure[data-dia] svg :is(g,path,circle,ellipse,rect,line,polyline,text,use,image),figure[data-dia] li[data-k],figure[data-dia] figcaption [data-k],.v2-dia-touchhint{transition:none}
}

/* ── v2-dia note popover: a small card beside the pressed element ── */
figure[data-dia]{position:relative}
.v2-dia-pop{position:absolute;z-index:40;width:min(340px,calc(100vw - 32px));padding:14px 34px 13px 18px;background:#fbf8f2;border:1px solid rgba(122,37,48,.22);box-shadow:0 18px 44px -18px rgba(26,10,12,.4);text-align:center}
.v2-dia-pop[hidden]{display:none}
.v2-dia-pop p{margin:0;font-size:13px;font-weight:300;line-height:1.95;color:#3A332E;word-break:keep-all}
.v2-dia-pop-x{position:absolute;top:4px;right:6px;padding:4px 6px;border:0;background:none;font-family:'Cormorant Garamond',serif;font-size:18px;line-height:1;color:#836a31;cursor:pointer}
.v2-dia-pop-x:hover{color:#7a2530}
.v2-material-visual .v2-dia-pop{background:#47141a;border-color:rgba(233,215,158,.3);box-shadow:0 18px 44px -14px rgba(0,0,0,.55)}
.v2-material-visual .v2-dia-pop p{color:rgba(245,239,230,.85)}
.v2-material-visual .v2-dia-pop-x{color:#c9a24b}
@media (prefers-reduced-motion:no-preference){.v2-dia-pop{animation:v2diapop .28s cubic-bezier(.2,.6,.2,1)}@keyframes v2diapop{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}}

/* center-align backstop */
body{text-align:center}
td,th{text-align:center}
input[type=text],input[type=tel],input[type=email],input[type=date],textarea,select{text-align:center}