/* ===== base ===== */
/* Fonts */
@font-face{font-family:'Volte';src:url('/assets/fonts/Volte-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Volte';src:url('/assets/fonts/Volte-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Volte';src:url('/assets/fonts/Volte-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-garamond-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-garamond-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-garamond-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans KR';src:url('/assets/fonts/noto-sans-kr-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* Tokens (lib/core/constant/colors.dart) */
:root{
  --ys-primary:#0C2861;
  --ys-white:#FFFFFF;
  --ys-white-text:#EFE3D8;
  --ys-black:#000000;
  --ys-gray-900:#191F28;--ys-gray-800:#333D4B;--ys-gray-700:#4E5968;--ys-gray-600:#6B7684;--ys-gray-500:#8B95A1;
  --ys-gray-400:#B0B8C1;--ys-gray-300:#D1D6DB;--ys-gray-200:#E5E8EB;--ys-gray-100:#F2F4F6;--ys-gray-50:#F9FAFB;
  --ys-gray-40:#797E86;--ys-gray-10:#F2F2F3;
  --ys-login-indicator:#03EB41;
  --ys-white-gradient-50:linear-gradient(to bottom right,rgba(255,255,255,.5),#FFFFFF);
  --ys-white-gradient-60:linear-gradient(to bottom right,rgba(255,255,255,.6),#FFFFFF);
  --ys-white-gradient-75:linear-gradient(to bottom right,rgba(255,255,255,.75),#FFFFFF);
  --ys-gradient-machapuchare:linear-gradient(to bottom,#0C2861,#04112D);
  --ys-gradient-machapuchare-deep:linear-gradient(to bottom,#0F214A,#07132D);
  --ys-gradient-machapuchare-very-deep:linear-gradient(to bottom,#04112D,#010815);
  --ys-gradient-guide-mobile:linear-gradient(to bottom,#02143F,#010D27);
  --ys-gradient-gold:linear-gradient(to right,#AB855A,#674826);
  --ys-gradient-glass:linear-gradient(to bottom right,rgba(255,255,255,.12),rgba(255,255,255,.05));
  --ys-ease:cubic-bezier(.4,0,.2,1); /* Flutter Curves.fastOutSlowIn */
  --ys-page-duration:500ms;
  --ys-horz-pad:35px; /* context.screenHorzPadding */
  --ys-z-bg:0;--ys-z-page:1;--ys-z-appbar:10;
}
@media (min-width:768px){:root{--ys-horz-pad:50px}}
@media (min-width:800px){:root{--ys-horz-pad:70px}}
@media (min-width:1000px){:root{--ys-horz-pad:100px}}
@media (min-width:1200px){:root{--ys-horz-pad:120px}}
@media (min-width:1400px){:root{--ys-horz-pad:150px}}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video,canvas,picture{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
html,body{background:#000}
body{min-height:100vh;color:var(--ys-white-text);font-family:'Volte',system-ui,-apple-system,'Noto Sans KR',sans-serif;font-weight:400;line-height:1.2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
main{display:block;position:relative;z-index:var(--ys-z-page)}

/* Page system (home_screen.dart _syncCurrentPageWithScroll) */
.ys-page{position:relative;z-index:var(--ys-z-page);height:100vh;opacity:0;transition:opacity var(--ys-page-duration) var(--ys-ease)}
.ys-page[data-index="3"]{height:500px}
.ys-page.is-current,
body[data-page="0"] .ys-page[data-index="0"],
body[data-page="1"] .ys-page[data-index="1"],
body[data-page="2"] .ys-page[data-index="2"],
body[data-page="3"] .ys-page[data-index="3"]{opacity:1}
body[data-page="3"] .ys-page:not(.is-current):not([data-index="3"]){opacity:.1}

/* App bar (common_app_bar.dart): pad top 20 / bottom 10, logo 77x40 (mobile 77x35) centred, blur sigma 50 */
.ys-appbar{position:fixed;top:0;left:0;right:0;z-index:var(--ys-z-appbar);padding:calc(20px + env(safe-area-inset-top,0px)) 0 10px;overflow:hidden;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px)}
body[data-page="2"] .ys-appbar,body[data-page="3"] .ys-appbar{-webkit-backdrop-filter:none;backdrop-filter:none}
.ys-appbar__inner{position:relative;height:40px;margin:0 var(--ys-horz-pad);transition:height 300ms var(--ys-ease)}
.ys-appbar__logo,.ys-appbar__title{position:absolute;top:0;transition:opacity 200ms var(--ys-ease),visibility 0s linear 200ms}
.ys-appbar__logo{left:50%;width:77px;height:40px;margin-left:-38.5px;display:block;border-radius:4px}
.ys-appbar__logo img{width:77px;height:100%;object-fit:contain}
.ys-appbar__title{left:0;font-family:'Cormorant Garamond',serif;font-weight:300;font-size:40px;line-height:46px;color:var(--ys-white-text);white-space:nowrap;opacity:0;visibility:hidden}
@media (max-width:767.98px){
  .ys-appbar__inner{height:35px}
  .ys-appbar__logo{height:35px}
  body[data-page="1"] .ys-appbar{-webkit-backdrop-filter:none;backdrop-filter:none}
  body[data-page="1"] .ys-appbar__inner{height:92px}
  body[data-page="2"] .ys-appbar__inner,body[data-page="3"] .ys-appbar__inner{height:46px}
  body[data-page="1"] .ys-appbar__logo,body[data-page="2"] .ys-appbar__logo,body[data-page="3"] .ys-appbar__logo{opacity:0;visibility:hidden}
  body[data-page="1"] .ys-appbar__title{opacity:1;visibility:visible;transition-delay:0s,0s}
}

/* Utilities & a11y */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ys-white-text);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

/* ===== backgrounds ===== */
/* Fixed decorative background stack (home_screen.dart _buildBody). Desktop = min-width 768px. */
@property --bg-top { syntax: '<color>'; inherits: false; initial-value: #0C2861; }
@property --bg-bottom { syntax: '<color>'; inherits: false; initial-value: #04112D; }
.bg-root { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --bg-ease: cubic-bezier(.4, 0, .2, 1); --bg-stars-op: .5; --bg-rich-op: .8; }
.bg-root > div { position: absolute; }
/* per-page gradient: machapuchare (0, 2), veryDeep (1; mobile variant), deep (3) */
.bg-gradient { inset: 0; --bg-top: #0C2861; --bg-bottom: #04112D; background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom)); transition: --bg-top 1000ms var(--bg-ease), --bg-bottom 1000ms var(--bg-ease); }
body[data-page="1"] .bg-gradient { --bg-top: #04112D; --bg-bottom: #010815; }
body[data-page="3"] .bg-gradient { --bg-top: #0F214A; --bg-bottom: #07132D; }
/* plain stars: BoxFit.contain + ImageRepeat.repeat, centred; mirrored copy alternates every 3s */
.bg-starfield, .bg-rich { inset: 0; transition: opacity 1000ms var(--bg-ease); }
.bg-stars, .bg-rich-set { position: absolute; inset: 0; opacity: 0; transition: opacity 1000ms var(--bg-ease); }
.bg-stars { background: url(/assets/images/stars-2880.webp) center / contain repeat }
.bg-stars--b { transform: scaleX(-1); }
.bg-stars--a, .bg-root--alt .bg-stars--b { opacity: var(--bg-stars-op); }
.bg-root--alt .bg-stars--a { opacity: 0; }
body[data-page="2"] .bg-starfield { opacity: 0; }
/* rich stella (zodiac page): 4 quadrants on desktop, 2 halves on mobile, BoxFit.cover */
.bg-rich { opacity: 0; }
body[data-page="2"] .bg-rich { opacity: var(--bg-rich-op); }
.bg-rich-set--a, .bg-root--alt .bg-rich-set--b { opacity: 1; }
.bg-root--alt .bg-rich-set--a { opacity: 0; }
.bg-rich-q, .bg-rich-m { position: absolute; background: url(/assets/images/stars-2880.webp) center / cover repeat }
.bg-rich-q { width: 50%; height: calc(50% - 100px); }
.bg-rich-q--tl { left: 0; top: 0; }
.bg-rich-q--tr { right: 0; top: 0; }
.bg-rich-q--bl { left: 0; bottom: 200px; }
.bg-rich-q--br { right: 0; bottom: 200px; }
.bg-rich-set--a .bg-rich-q--bl { transform: scaleY(-1); }
.bg-rich-set--a .bg-rich-q--br { transform: scaleX(-1); }
.bg-rich-set--b .bg-rich-q--tl, .bg-rich-set--b .bg-rich-q--tr { transform: scaleX(-1); }
.bg-rich-set--b .bg-rich-q--br { transform: scale(-1, -1); }
.bg-rich-m { display: none; left: 0; width: 100%; height: calc((100% - 265px) / 2); }
.bg-rich-m--top { top: 0; }
.bg-rich-m--bottom { top: calc((100% - 265px) / 2); }
.bg-rich-set--a .bg-rich-m--top { transform: scaleY(-1); }
.bg-rich-set--a .bg-rich-m--bottom { transform: scaleX(-1); }
/* glows */
.bg-glow { background-repeat: no-repeat; background-size: contain; }
.bg-glow--bl { left: 0; bottom: 0; width: 620px; height: 620px; background-image: url(/assets/images/glow-bottom-left.webp); background-position: left bottom; }
.bg-glow--tr { top: 0; right: 0; width: 620px; height: 620px; background-image: url(/assets/images/glow-top-right.webp); background-position: right top; transition: width 1000ms var(--bg-ease), height 1000ms var(--bg-ease); }
body[data-page="1"] .bg-glow--tr { width: 800px; height: 800px; }
@media (max-width: 767.98px) {
  .bg-root { --bg-stars-op: .8; --bg-rich-op: 1; }
  body[data-page="1"] .bg-gradient { --bg-top: #02143F; --bg-bottom: #010D27; }
  .bg-rich-q { display: none; }
  .bg-rich-m { display: block; }
  .bg-glow--bl { width: 270px; height: 270px; }
  .bg-glow--tr, body[data-page="1"] .bg-glow--tr { width: 300px; height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-root *, .bg-gradient { transition: none !important; }
}
/* Flutter samples the big star texture without mipmaps (crisp, sparse stars); mimic it wherever the texture is downscaled. */
@media (max-width: 767.98px), (max-resolution: 1.5dppx) {
  .bg-stars, .bg-rich-q, .bg-rich-m { image-rendering: pixelated; }
}

/* ===== hero ===== */
/* Hero (Flutter HomeScreenPage1). Mobile-first; desktop = min-width 768px.
   Font sizes follow Flutter's global textScaler = clamp(vh/788, .8, 1) -> clamp(.8*px, px*100/788 vh, px).
   ResponsiveBox gaps = px * min(1, vh/788) -> min(px, px*100/788 vh). letter-spacing .25px compensates CanvasKit's wider advances. */
#hero { position: relative; overflow: visible; min-height: 100vh; min-height: 100svh; }
.hero-mountain {
  /* Fixed layer outside the section: pinned to the viewport bottom-right (Flutter translates it by scrollOffset),
     so only the scroll-linked opacity from hero.js applies - no section fade, no per-frame transform, no transition. */
  position: fixed; right: 0; bottom: 0; width: 380px; height: 60px; z-index: 1;
  pointer-events: none; opacity: 1; transition: none; will-change: opacity;
}
.hero-mountain-img { display: block; width: 380px; height: 60px; object-fit: contain; object-position: right bottom; }
.hero-content {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; z-index: 1;
}
.hero-grad {
  margin: 0; width: -webkit-fit-content; width: fit-content; max-width: none;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; background-clip: text;
  text-rendering: optimizeLegibility;
}
.hero-eyebrow {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(19.2px, 3.0457vh, 24px); line-height: 1.25; letter-spacing: .25px; white-space: nowrap;
  background-image: linear-gradient(var(--hero-ga, 100deg), rgba(255,255,255,.5) 0%, #fff 100%);
}
.hero-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: clamp(41.6px, 6.599vh, 52px); line-height: 1.03846; letter-spacing: .25px; white-space: nowrap;
  margin-top: min(14px, 1.7766vh);
  background-image: linear-gradient(var(--hero-ga, 110deg), rgba(255,255,255,.75) 0%, #fff 100%);
}
.hero-subtitle {
  font-family: 'Volte', sans-serif; font-weight: 400;
  font-size: clamp(12px, 1.9036vh, 15px); line-height: 1.2; letter-spacing: .25px; white-space: nowrap;
  margin-top: min(30px, 3.8071vh);
  background-image: linear-gradient(var(--hero-ga, 98deg), rgba(255,255,255,.5) 0%, rgba(255,255,255,.7) 100%);
}
.hero-cta {
  display: block; margin-top: min(120px, 15.2284vh);
  text-decoration: none; -webkit-tap-highlight-color: transparent; outline-offset: 4px;
  transition: opacity 240ms cubic-bezier(.55,.055,.675,.19), transform 240ms cubic-bezier(.55,.055,.675,.19);
}
.hero-cta-pill {
  display: block; box-sizing: content-box;
  padding: 15px 38px; border: 2px solid rgba(255,255,255,.05); border-radius: 1000px;
  background: linear-gradient(90deg, #AB855A 0%, #674826 100%); background-origin: border-box;
  font-family: 'Volte', sans-serif; font-weight: 500; font-size: clamp(12.8px, 2.0305vh, 16px); line-height: 1.125; letter-spacing: .25px;
  color: #fff; white-space: nowrap;
  transition: transform 300ms cubic-bezier(.4,0,.2,1);
}
.hero-cta:active .hero-cta-pill { transform: scale(.96); }
@media (min-width: 768px) {
  .hero-content { top: 20px; }
  .hero-eyebrow { font-size: clamp(25.6px, 4.0609vh, 32px); }
  .hero-title { font-size: clamp(56px, 8.8832vh, 70px); line-height: 1; }
  .hero-subtitle { font-size: clamp(15.2px, 2.4112vh, 19px); margin-top: min(35px, 4.4416vh); }
  .hero-cta { margin-top: min(80px, 10.1523vh); opacity: .8; cursor: pointer; }
  .hero-cta:hover, .hero-cta:focus-visible {
    opacity: 1; transform: scale(1.02);
    transition: opacity 300ms cubic-bezier(.215,.61,.355,1), transform 300ms cubic-bezier(.215,.61,.355,1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta, .hero-cta-pill, .hero-cta:hover { transition: none; }
}

/* ===== guide ===== */
/* guide — "What We Guide" (Flutter HomeScreenPage2) */
.guide{--g-ease:cubic-bezier(.4,0,.2,1);--g-pad-l:150px;--g-title-fs:70px;--g-star-r:28px;--g-gap:70px;--g-img-w:160px;--g-img-h:300px;--g-out:9px;--g-num-fs:80px;--g-num-b:-30px;--g-ttl-fs:22px;--g-sp:16px;--g-desc-fs:14px;--g-descw:min(270px,19.2857vw);--g-col:max(calc(var(--g-img-w) + var(--g-out) * 2),var(--g-descw));position:relative;height:100vh;color:#fff}
@media (min-width:1200px) and (max-width:1399.98px){.guide{--g-pad-l:120px;--g-title-fs:60px;--g-star-r:22px;--g-num-fs:70px;--g-num-b:-22px;--g-ttl-fs:20px;--g-sp:14px}}
@media (min-width:1000px) and (max-width:1199.98px){.guide{--g-pad-l:100px;--g-title-fs:60px;--g-star-r:22px;--g-gap:60px;--g-img-w:120px;--g-img-h:230px;--g-out:8px;--g-num-fs:70px;--g-num-b:-30px;--g-ttl-fs:20px;--g-sp:14px;--g-desc-fs:13px}}
@media (min-width:800px) and (max-width:999.98px){.guide{--g-pad-l:70px;--g-title-fs:50px;--g-star-r:18px;--g-gap:60px;--g-img-w:120px;--g-img-h:230px;--g-out:8px;--g-num-fs:60px;--g-num-b:-22px;--g-ttl-fs:16px;--g-sp:12px;--g-desc-fs:13px}}
@media (min-width:768px) and (max-width:799.98px){.guide{--g-pad-l:50px;--g-title-fs:45px;--g-star-r:16px;--g-gap:50px;--g-img-w:100px;--g-img-h:190px;--g-out:6px;--g-num-fs:50px;--g-num-b:-20px;--g-ttl-fs:14px;--g-sp:10px;--g-desc-fs:12px}}

.guide-inner{box-sizing:border-box;height:100%;display:flex;align-items:center;justify-content:center;padding:70px calc(var(--g-pad-l) / 2) 0 var(--g-pad-l)}
.guide-title{position:relative;margin:0 var(--g-gap) 200px 0;flex:none;font:300 var(--g-title-fs)/calc(80 / 70) 'Cormorant Garamond',serif;letter-spacing:0}
.guide-title__text{display:block;background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.6) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.guide-title__w{display:block}
.guide-title__star{position:absolute;right:var(--g-star-r);top:50%;margin-top:calc(2px - 8.5px);width:18px;height:17px}

.guide-viewport{flex:none}
.guide-track{display:flex;align-items:flex-start}
.guide-card{position:relative;flex:none;width:var(--g-col);display:flex;flex-direction:column;align-items:center;opacity:.2;cursor:pointer;outline:none;transition:opacity .3s var(--g-ease),transform .3s var(--g-ease);-webkit-tap-highlight-color:transparent}
.guide-card.is-active{opacity:1}
.guide-card:hover{transform:scale(1.02)}
.guide-card:focus-visible .guide-card__ring{box-shadow:0 0 0 2px rgba(243,159,79,.7)}
.guide-card__media{position:relative;width:calc(var(--g-img-w) + var(--g-out) * 2);height:calc(var(--g-img-h) + var(--g-out) * 2);display:flex;align-items:center;justify-content:center;flex:none}
.guide-card__ring{position:absolute;inset:0;border-radius:1000px;border:2px solid rgba(255,255,255,0);transition:border-color .3s var(--g-ease)}
.guide-card.is-active .guide-card__ring{border-color:rgba(255,255,255,.5)}
.guide-card__pic{display:block;box-sizing:border-box;width:var(--g-img-w);height:var(--g-img-h);border-radius:1000px;border:2px solid rgba(255,255,255,.1);overflow:hidden}
.guide-card__pic img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1000px}
.guide-card__num{position:absolute;right:0;bottom:var(--g-num-b);font:300 var(--g-num-fs)/calc(85 / 70) 'Cormorant Garamond',serif;white-space:nowrap;background:linear-gradient(90deg,rgba(255,255,255,.8),#fff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;transition:opacity .5s var(--g-ease)}
.guide-card__details{display:flex;flex-direction:column;align-items:center;width:100%;transition:opacity .5s var(--g-ease)}
.guide-card__line{display:block;width:.5px;height:30px;margin-top:32px;border-radius:1000px;background:rgba(255,255,255,.5)}
.guide-card__title{margin:25px 0 0;font:500 var(--g-ttl-fs)/calc(22 / 18) 'Cormorant Garamond',serif;color:#fff;text-align:center}
.guide-card__descwrap{position:relative;width:var(--g-descw);max-width:100%;margin-top:var(--g-sp);opacity:0;transition:opacity .5s var(--g-ease)}
.guide-card.is-active .guide-card__descwrap{opacity:1}
.guide-card__desc{margin:0;font:300 var(--g-desc-fs)/calc(17 / 14) 'Volte',sans-serif;color:rgba(255,255,255,.8);text-align:center}
.guide-card__tm{position:absolute;left:-10px;right:-10px;top:100%;margin:12px 0 0;font:400 10px/1.4 'Volte',sans-serif;letter-spacing:.02em;color:rgba(255,255,255,.5);text-align:center}
.guide-card__tm a{color:inherit;text-decoration:none;border-bottom:.5px solid rgba(255,255,255,.25);transition:color .2s,border-color .2s}
.guide-card__tm a:hover,.guide-card__tm a:focus-visible{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.6)}
.guide-card:not(.is-active) .guide-card__tm a{pointer-events:none}
.guide-card--clone{display:none}

/* ---------- mobile: carousel_slider (height 540, item slot 205px, enlargeFactor .3, infinite) ---------- */
@media (max-width:767.98px){
  .guide-inner{display:block;padding:0;position:relative}
  .guide-title{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}
  .guide-viewport{position:absolute;left:0;right:0;top:50%;height:540px;margin-top:calc(22px - 270px)}
  .guide-track{box-sizing:content-box;height:540px;padding-bottom:70px!important;align-items:center;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 calc(50% - 102.5px);overscroll-behavior-x:contain}
  .guide-track::-webkit-scrollbar{display:none}
  .guide-card{width:205px;opacity:.2;scroll-snap-align:center;transform:scale(var(--g-s,.7));transition:opacity .3s var(--g-ease)}
  .guide-card:hover{transform:scale(var(--g-s,.7))}
  .guide-card.is-active{opacity:1}
  .guide-card--clone{display:flex}
  .guide-card__media{width:170px;height:302px}
  .guide-card__ring{border-width:.5px}
  .guide-card.is-active .guide-card__ring{border-color:rgba(255,255,255,.3)}
  .guide-card__pic{width:154px;height:286px;border-width:1px}
  .guide-card__num{bottom:-16px;font-size:60px;line-height:calc(73 / 60)}
  .guide-card:not(.is-active) .guide-card__num,.guide-card:not(.is-active) .guide-card__details{opacity:0}
  .guide-card__line{height:20px;margin-top:30px}
  .guide-card__title{margin-top:30px;font-size:24px;line-height:calc(30 / 24);white-space:nowrap}
  .guide-card__descwrap{width:205px;max-width:none;margin-top:11px}
  .guide-card__desc{font-weight:400;font-size:9px;line-height:calc(18 / 13)}
  .guide-card.is-active .guide-card__desc{font-size:13px}
  .guide-card__tm{left:-25px;right:-25px;margin-top:12px}
}
@media (prefers-reduced-motion:reduce){.guide-card,.guide-card *{transition:none!important}.guide-track{scroll-behavior:auto}}

/* ===== vision_footer ===== */
/* vision (page 2) + footer (page 3) — mirrors home_screen_page3/4.dart */
#vision, #footer {
  --vf-pad: 150px; --vf-t: 52px; --vf-gap: 20px; --vf-s: 16px; --vf-slh: 1.2; --vf-bottom: 140px;
  --vf-slogan: 14px; --vf-small: 12px; --vf-cta: 18px;
  --vf-top: 80px; --vf-after-div: 100px; --vf-logo-gap: 20px;
}
@media (min-width: 1200px) and (max-width: 1399.98px) { #vision, #footer { --vf-pad: 120px; --vf-t: 46px; --vf-gap: 18px; --vf-s: 15px; --vf-slh: 1.6; --vf-bottom: 120px; } }
@media (min-width: 1000px) and (max-width: 1199.98px) { #vision, #footer { --vf-pad: 100px; --vf-t: 46px; --vf-gap: 18px; --vf-s: 15px; --vf-slh: 1.6; --vf-bottom: 120px; --vf-slogan: 13px; --vf-small: 11px; --vf-cta: 17px; } }
@media (min-width: 800px) and (max-width: 999.98px) { #vision, #footer { --vf-pad: 70px; --vf-t: 42px; --vf-gap: 16px; --vf-s: 15px; --vf-slh: 1.6; --vf-bottom: 100px; --vf-slogan: 13px; --vf-small: 11px; --vf-cta: 17px; } }
@media (min-width: 768px) and (max-width: 799.98px) { #vision, #footer { --vf-pad: 50px; --vf-t: 36px; --vf-gap: 14px; --vf-s: 14px; --vf-slh: 1.2857; --vf-bottom: 90px; --vf-slogan: 12px; --vf-small: 10px; --vf-cta: 16px; } }
@media (max-width: 767.98px) { #vision, #footer { --vf-pad: 35px; --vf-t: 32px; --vf-gap: 16px; --vf-s: 16px; --vf-slh: 1.25; --vf-bottom: 35px; --vf-slogan: 14px; --vf-small: 12px; --vf-top: 40px; --vf-after-div: 70px; --vf-logo-gap: 16px; } }

.vf-grad, .vf-vision-sub {
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.vf-grad { background-image: linear-gradient(to bottom right, rgba(255,255,255,.75), #fff); }

/* ---------- vision ---------- */
.vf-vision { position: relative; }
.vf-vision-inner {
  position: absolute; left: var(--vf-pad); right: var(--vf-pad); bottom: 0;
  padding-bottom: var(--vf-bottom); display: flex; flex-direction: column; align-items: flex-start;
}
.vf-vision-title {
  margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: var(--vf-t); line-height: calc(63 / 52); letter-spacing: 0; max-width: 100%;
}
.vf-vision-sub {
  margin: var(--vf-gap) 0 0; font-family: 'Volte', 'Noto Sans KR', sans-serif; font-weight: 400;
  font-size: var(--vf-s); line-height: var(--vf-slh); max-width: 100%;
  background-image: linear-gradient(to bottom right, rgba(255,255,255,.6), #fff);
}
@media (max-width: 767.98px) {
  .vf-br { display: none; }
  .vf-vision-inner { align-items: stretch; }
  .vf-vision-title { line-height: 1.25; }
}

/* ---------- footer ---------- */
.vf-footer {
  box-sizing: border-box; height: 100%; min-height: 500px; padding: var(--vf-top) var(--vf-pad) 50px;
  display: flex; flex-direction: column; font-family: 'Volte', 'Noto Sans KR', sans-serif;
}
.vf-footer p, .vf-footer address { margin: 0; font-style: normal; }
.vf-divider { width: 100%; height: .5px; background: rgba(255,255,255,.2); flex: none; }
.vf-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0 40px; margin-top: var(--vf-after-div); }
@media (min-width: 800px) and (max-width: 999.98px) { .vf-row { column-gap: 30px; } }
@media (min-width: 768px) and (max-width: 799.98px) { .vf-row { column-gap: 20px; } }
.vf-right { width: min(300px, 21.4286vw); flex: none; }
/* client request (intentional deviation from Flutter's 300px-capped column): left column sizes to its content,
   so slogan and (c) stay on one line whenever there is room; it only shrinks (and wraps) when space truly runs out */
.vf-left { width: auto; flex: 0 1 auto; min-width: 0; }
.vf-mid { flex: 1 1 auto; }
.vf-left { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 20px; }
.vf-logo { display: block; width: 90px; height: auto; }
.vf-copy, .vf-legal-link { letter-spacing: .02em; }
.vf-slogan { letter-spacing: .015em; }
.vf-vision-sub { letter-spacing: .015em; }
.vf-slogan { margin-top: var(--vf-logo-gap) !important; color: rgba(255,255,255,.8); font-weight: 400; font-size: var(--vf-slogan); line-height: calc(14 / 12); }
.vf-copy { margin-top: 9px !important; color: rgba(255,255,255,.8); font-weight: 400; font-size: var(--vf-small); line-height: 1.2; }
.vf-right { display: flex; justify-content: flex-end; }
.vf-spring { display: inline-block; text-decoration: none; opacity: .7; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s cubic-bezier(.4,0,.2,1); }
.vf-spring:hover, .vf-spring:focus-visible { opacity: 1; transform: scale(1.02); }
.vf-spring:active { transform: scale(.96); transition-duration: .1s; }
.vf-cta {
  padding: 12px 24px; border-radius: 18px; background: rgba(255,255,255,.1); color: #fff; opacity: .9;
  font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: var(--vf-cta); line-height: 1.39; white-space: nowrap;
}
.vf-chip { display: none; }

/* company info (client request): muted small row above the legal links */
.vf-info {
  margin-top: auto; padding-top: 24px; margin-bottom: 14px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 21px; row-gap: 2px;
  color: rgba(255,255,255,.5); font-size: var(--vf-small); line-height: 1.5; font-weight: 400; text-align: center;
}
.vf-info-item { position: relative; }
.vf-info-item + .vf-info-item::before {
  content: ""; position: absolute; left: -11px; top: 50%; width: 1px; height: 10px; margin-top: -5px; background: rgba(255,255,255,.2);
}
.vf-info-mail { color: inherit; text-decoration: none; transition: color .3s; }
.vf-info-mail:hover, .vf-info-mail:focus-visible { color: #fff; }

.vf-legal { display: flex; justify-content: center; align-items: center; flex: none; }
.vf-legal-link { color: #fff; font-weight: 500; font-size: var(--vf-small); line-height: 1.2; }
.vf-legal-sep { width: 1px; height: 12px; margin: 0 10px; background: rgba(255,255,255,.2); }

@media (max-width: 767.98px) {
  .vf-row { gap: 0; }
  .vf-mid, .vf-right { display: none; }
  .vf-left { width: auto; padding-bottom: 0; }
  .vf-chip {
    display: inline-block; margin-top: 30px; transform: translateX(-4px); padding: 8px 18px; border-radius: 18px;
    background: rgba(255,255,255,.1); color: #fff; font-weight: 500; font-size: 12px; line-height: 1.34; letter-spacing: .02em;
  }
  .vf-chip:hover, .vf-chip:focus-visible { transform: translateX(-4px) scale(1.02); }
  .vf-chip:active { transform: translateX(-4px) scale(.96); }
  .vf-info { flex-direction: column; row-gap: 0; padding-top: 20px; margin-bottom: 16px; }
  .vf-info-item + .vf-info-item::before { display: none; }
  .vf-info-item { text-wrap: balance; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-spring, .vf-info-mail { transition: none; }
  .vf-spring:hover, .vf-spring:active { transform: none; }
}
@media (min-width: 768px) and (max-width: 999.98px) {
  .vf-info-mail { flex-basis: 100%; }
  .vf-info-mail::before { display: none; }
}
/* zodiac constellations (home_screen_page3.dart _buildZodiacs / _buildZodiacsMobile) */
.vf-zodiacs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vf-z { position: absolute; display: block; max-width: none; object-fit: cover; object-position: center; }
@media (min-width: 768px) {
  /* Row: Expanded(flex 2) | Expanded(flex 3) */
  .vf-z1 { /* column 40%: ResponsiveBox(height 100) then image, height H/2 - that, aspect kept, centred */
    top: min(100px, 12.69vh); left: 20%; transform: translateX(-50%);
    height: calc(50vh - min(100px, 12.69vh));
    width: min(40vw, calc((50vh - min(100px, 12.69vh)) * 1.4302));
  }
  .vf-z2 { top: 0; left: 40%; width: 60%; height: calc(100vh - 200px); }
}
@media (max-width: 767.98px) {
  /* Stack translated (0,-30); Image(w500,h300) & Image(w650,h450) clamped to viewport width */
  .vf-zodiacs { inset: -30px 0 auto 0; height: calc(100% + 30px); }
  .vf-z1 { top: 0; left: 50%; width: min(500px, 100%); height: 300px; transform: translateX(calc(-50% - 80px)); }
  .vf-z2 { top: 100px; left: 50%; width: min(650px, 100%); height: 450px; transform: translateX(calc(-50% + 20px)); }
}

.vf-nowrap { white-space: nowrap; }