/* Layout v2 (2026-11-06): minimal, technical. A near-black opening with a point-cloud of the fruit,
   then calm paper sections built on hairlines and numbered labels, a plain
   contact list and a dark footer. One typeface family, mono only for numbers. 4px corners, no shadows. */
:root{
  --b-skin:#213B2A; --b-leaf:#5E8C3A; --b-flesh:#DDE7A6; --b-pit:#7B4A2A; --b-paper:#F7F6EE; --b-ink:#141A14;
  --night:#0A0D0B; --night-2:#111511; --on-night:#ECEEE6; --on-night-m:rgba(236,238,230,.58); --night-line:rgba(236,238,230,.1);
  --bg:#F6F6F1; --surface:#EEEFE7; --fg:#0F1310; --muted:#636A63; --line:#E0E1D8; --line-strong:#C9CCBF;
  --accent:#213B2A; --logo-ink:#213B2A; --tbd:#9A8640;
  --f-display:"Be Vietnam Pro","Noto Sans KR",system-ui,sans-serif;
  --f-body:"Be Vietnam Pro","Noto Sans KR",system-ui,sans-serif;
  --f-ko:"Noto Sans KR","Be Vietnam Pro",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:4px; --ease:cubic-bezier(.2,.75,.15,1);
  --gut-l:max(24px,env(safe-area-inset-left,0px)); --gut-r:max(24px,env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E110E; --surface:#151915; --fg:#E8EAE2; --muted:#959C94; --line:#232823; --line-strong:#353B35;
  --accent:#DDE7A6; --logo-ink:#F7F6EE; --tbd:#D8C77A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E110E; --surface:#151915; --fg:#E8EAE2; --muted:#959C94; --line:#232823; --line-strong:#353B35;
  --accent:#DDE7A6; --logo-ink:#F7F6EE; --tbd:#D8C77A; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:lang(ko){font-family:var(--f-ko);word-break:keep-all}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
h1,h2,h3{font-family:var(--f-display);font-weight:500;text-wrap:balance}
:lang(ko) h1,:lang(ko) h2,:lang(ko) h3{font-family:var(--f-ko)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--b-leaf);outline-offset:4px;border-radius:2px}
.wrap{max-width:1280px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.muted{color:var(--muted)}
.tbd{border:1px dashed var(--tbd);border-radius:3px;padding:0 .2em;overflow-wrap:anywhere}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:70;background:var(--bg);color:var(--fg);padding:8px 12px}
.logo,.sym{display:block;height:auto}
.lg-rev,.lg-art{--lg-ink:var(--b-paper);--lg-flesh:var(--b-flesh);--lg-seed:var(--b-pit)}

/* numbered section label: mono number, plain words */
.label{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:var(--muted)}
.idx{font-family:var(--f-mono);font-size:12px;font-weight:500;color:var(--fg);padding:3px 7px;border:1px solid var(--line-strong);border-radius:3px;line-height:1}

/* header */
.top{position:absolute;inset:0 0 auto 0;z-index:40;color:var(--on-night);padding-top:env(safe-area-inset-top,0px)}
.bar{display:flex;align-items:center;gap:36px;padding-block:22px}
.brand .logo{width:112px}
.nav{display:flex;gap:30px;margin-left:auto;font-size:14px}
.nav a,.mnav nav a{opacity:.75;transition:opacity .2s}
.nav a:hover{opacity:1}
.langs{display:flex;gap:12px;font-family:var(--f-mono);font-size:12px}
.lang{font:inherit;color:inherit;background:none;border:0;padding:4px 0;cursor:pointer;opacity:.5;border-bottom:1px solid transparent}
.lang:hover{opacity:.9}
.lang[aria-current="true"]{opacity:1;border-bottom-color:currentColor}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;font-size:14px;padding:7px 14px;border:1px solid var(--night-line);border-radius:var(--r)}
.mnav summary::-webkit-details-marker{display:none}
.mnav nav{position:absolute;right:0;top:calc(100% + 10px);display:flex;flex-direction:column;min-width:200px;padding:8px;background:var(--night-2);color:var(--on-night);border:1px solid var(--night-line);border-radius:var(--r)}
.mnav nav a{padding:10px 12px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 22px;border-radius:var(--r);background:var(--on-night);color:var(--night);font-weight:500;font-size:15px;transition:background .25s}
.btn .arr{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover{background:var(--b-flesh)}
.btn:hover .arr{transform:translateX(3px)}
.btn-sm{min-height:36px;padding:0 14px;font-size:13px}

/* opening */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--night);color:var(--on-night);
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(env(safe-area-inset-top,0px) + 112px) 80px}
.hero>.wrap{width:100%}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.gridlines{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(236,238,230,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(236,238,230,.06) 1px,transparent 1px);
  background-size:88px 88px;background-position:center center;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 70% 45%,#000 20%,transparent 75%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
.hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:28px;min-width:0}
.chip{display:inline-flex;align-items:center;gap:10px;padding:6px 12px 6px 10px;border:1px solid var(--night-line);border-radius:999px;
  background:rgba(236,238,230,.04);font-family:var(--f-mono);font-size:12px;color:var(--on-night-m);animation:fade 1s var(--ease) .1s both}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--b-flesh);box-shadow:0 0 0 3px rgba(221,231,166,.18)}
h1{font-size:clamp(48px,7vw,104px);line-height:1;letter-spacing:-.045em;font-weight:500;color:var(--on-night)}
:lang(ko) h1{font-size:clamp(42px,6.2vw,92px);line-height:1.12;letter-spacing:-.05em;font-weight:500}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln:last-child{color:var(--on-night-m)}
@keyframes rise{from{transform:translateY(108%)}to{transform:none}}
.lead{font-size:18px;line-height:1.6;max-width:44ch;color:var(--on-night-m);animation:fade 1s var(--ease) .55s both}
.hero .btns{animation:fade 1s var(--ease) .7s both}
.hero-visual{position:relative;aspect-ratio:1/1;width:100%;max-width:560px;justify-self:end;animation:fade 1.6s var(--ease) .3s both}
.cloud{position:absolute;inset:0;width:100%;height:100%;display:block}
.hv{position:absolute;right:0;bottom:4%;font-family:var(--f-mono);font-size:11px;color:var(--on-night-m);letter-spacing:.04em}
@keyframes fade{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* sections */
.band{padding-block:clamp(88px,10vw,140px)}
.band + .band{border-top:1px solid var(--line)}
.intro .label{margin-bottom:40px}
.statement{font-size:clamp(30px,3.9vw,56px);line-height:1.18;letter-spacing:-.03em;font-weight:400;max-width:24ch}
:lang(ko) .statement{letter-spacing:-.04em;line-height:1.35;max-width:22ch}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--line)}
.facts div{display:flex;flex-direction:column-reverse;gap:8px;padding:24px 24px 0 0;min-width:0}
.facts div+div{padding-left:24px;border-left:1px solid var(--line)}
.facts dt{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.03em;line-height:1.1}
.facts dd{font-size:14px;color:var(--muted)}

.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(48px,6vw,80px)}
.sec-head .label{margin-bottom:28px}
.sec-head h2,.contact-intro h2{font-size:clamp(32px,3.6vw,52px);line-height:1.1;letter-spacing:-.035em;font-weight:500;max-width:15ch}
:lang(ko) .sec-head h2,:lang(ko) .contact-intro h2{letter-spacing:-.045em;line-height:1.25;max-width:13ch}
.sec-sub{font-size:17px;color:var(--muted);max-width:42ch}
.cols{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cols li{display:flex;flex-direction:column;padding:24px 24px 28px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);min-width:0;transition:border-color .3s}
.cols li:hover{border-color:var(--line-strong)}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:56px}
.mk{width:48px;height:auto}
.mk *{stroke:var(--line-strong);transition:stroke .3s}
.mk .on{stroke:var(--fg)}
.cols li:hover .mk .on{stroke:var(--b-leaf)}
.part{font-size:14px;color:var(--muted);margin-bottom:8px}
.cols h3{font-size:clamp(21px,1.8vw,25px);line-height:1.25;letter-spacing:-.02em;font-weight:500}
.cols .note{margin-top:10px;font-size:15px;line-height:1.6;color:var(--muted)}
.soon{display:inline-block;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:5px 14px;text-transform:uppercase;letter-spacing:.12em;font-size:11px}

/* contact: the closing section, dark like the opening so the page ends where it began */
.contact{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:var(--on-night);border-top:0!important;--muted:var(--on-night-m);--line:var(--night-line);--fg:var(--on-night)}
.contact-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 60% at 85% 40%,rgba(60,110,52,.3),transparent 70%)}
.contact-bg .gridlines{-webkit-mask-image:radial-gradient(ellipse 55% 70% at 80% 40%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse 55% 70% at 80% 40%,#000 15%,transparent 75%)}
.contact .idx{border-color:rgba(236,238,230,.22)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,7vw,112px);align-items:center}
.contact-intro{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.contact-intro .label{margin-bottom:8px}
.contact-intro h2{font-size:clamp(36px,4.4vw,64px)}
.contact-intro .muted{max-width:36ch}
.contact-intro .btns{margin-top:12px}
.contact-list{list-style:none;padding:8px 28px;border:1px solid var(--night-line);border-radius:var(--r);background:rgba(236,238,230,.03);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.contact-list li+li a{border-top:1px solid var(--night-line)}
.contact-list a{display:grid;grid-template-columns:96px minmax(0,1fr) 20px;gap:24px;align-items:center;padding:24px 0;transition:color .25s}
.cl-k{font-size:14px;color:var(--muted)}
.cl-v{font-size:clamp(17px,1.4vw,19px);overflow-wrap:anywhere}
.cl-go{width:18px;height:18px;color:var(--muted);transition:transform .3s var(--ease),color .25s}
.contact-list a:hover .cl-v{color:var(--b-flesh)}
.contact-list a:hover .cl-go{transform:translate(2px,-2px);color:var(--b-flesh)}
.contact .tbd{--tbd:#D8C77A;border-color:#D8C77A}
.contact + .foot{border-top:1px solid var(--night-line)}

/* footer */
.foot{position:relative;background:var(--night);color:var(--on-night);padding-block:72px calc(28px + env(safe-area-inset-bottom,0px));--muted:var(--on-night-m)}
.foot-main{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding-bottom:48px}
.foot-co{display:flex;flex-direction:column;gap:18px;min-width:0}
.foot-logo .logo{width:108px}
.co-name{font-weight:500;font-size:14px}
.reg{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.reg div{display:block;min-width:0}
.reg dt,.reg dd{display:inline}
.reg dt{margin-right:6px}
.reg dt::after{content:":"}
.reg dd{overflow-wrap:anywhere}
.foot-nav{display:flex;gap:28px;font-size:14px}
.foot-nav a{opacity:.75;transition:opacity .2s}
.foot-nav a:hover{opacity:1}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--night-line);font-size:13px;color:var(--muted)}
.foot-bottom .langs{color:var(--on-night)}

.draft{position:fixed;z-index:30;left:var(--gut-l);bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 48px);
  background:var(--b-flesh);color:var(--b-skin);font-size:12px;line-height:1.45;padding:8px 14px;border-radius:999px}

@media (max-width:1000px){
  .nav,.top-cta{display:none}
  .langs{margin-left:auto}
  .mnav{display:block}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual{position:absolute;right:-18%;top:6%;width:72%;max-width:none;opacity:.55;z-index:-1}
}
@media (max-width:760px){
  body{font-size:16px}
  .bar{gap:16px;padding-block:16px}
  .brand .logo{width:96px}
  .hero{justify-content:flex-end;padding-bottom:64px}
  .hero-visual{right:-30%;top:9%;width:115%;opacity:.5}
  .lead{font-size:16px}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts div,.facts div+div{padding:20px 0;border-left:0;border-bottom:1px solid var(--line)}
  .sec-head{grid-template-columns:minmax(0,1fr);gap:20px}
  .cols{grid-template-columns:minmax(0,1fr)}
  .pc-top{margin-bottom:32px}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .contact-list{padding:4px 20px}
  .contact-list a{grid-template-columns:minmax(0,1fr) 18px;gap:4px 16px;padding:20px 0}
  .cl-k,.cl-v{grid-column:1}
  .cl-go{grid-column:2;grid-row:1 / span 2}
  .foot-main{flex-direction:column;gap:32px}
  .draft{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}

/* ================================================================ motion layer (v2.1)
   Chosen the way current product companies use motion: it explains or answers, it never decorates.
   1 the point-cloud in the opening (turns slowly, parts around the pointer)
   2 the headline settles in once
   3 the About statement lights up word by word as it is read (tied to scroll)
   4 cards carry a soft light that follows the pointer along their border
   5 blocks fade up once as they arrive
   Everything is complete without script; html.motion (set by site.js) turns 2, 3 and 5 on. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header: clear over the opening, frosted after it */
.top{transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);border-bottom:1px solid transparent}
html.js .top{position:fixed}
.top .bar{transition:padding .4s var(--ease)}
.top.stuck{background:rgba(10,13,11,.62);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--night-line)}
.top.stuck .bar{padding-block:14px}
.top.light{background:color-mix(in srgb,var(--bg) 88%,transparent);color:var(--fg);border-bottom-color:var(--line)}
.top.light .lg-rev{--lg-ink:var(--logo-ink)}
.top.light .mnav summary{border-color:var(--line)}
.top.light .btn{background:var(--fg);color:var(--bg)}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* faint light behind the point-cloud (static, so the cloud is the only thing moving) */
.aur{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 42% 52% at 74% 46%,rgba(60,110,52,.38),transparent 70%),radial-gradient(ellipse 30% 40% at 10% 100%,rgba(40,80,44,.35),transparent 70%)}
.aur i{display:none}

/* 2 · headline settles in once */
.ln{padding-block:.14em .06em;margin-block:-.14em -.06em}
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block}
html.motion .hero h1 .ch{animation:rise .9s var(--ease) both;animation-delay:calc(var(--i) * 18ms + 120ms)}
.ln:last-child .ch{background:linear-gradient(90deg,rgba(236,238,230,.5),#DDE7A6 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lg-pri{--lg-ink:var(--logo-ink);--lg-flesh:var(--b-flesh);--lg-seed:var(--b-pit)}

/* buttons: a solid primary and a quiet outline */
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-ghost{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:var(--r);font-weight:500;font-size:15px;
  border:1px solid rgba(236,238,230,.2);color:var(--on-night);transition:background .25s,border-color .25s}
.btn-ghost:hover{background:rgba(236,238,230,.07);border-color:rgba(236,238,230,.4)}
.btn-ghost.dark{border-color:var(--line-strong);color:var(--fg)}
.btn-ghost.dark:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* 5 · blocks fade up once */
html.motion [data-reveal]{transition:opacity .9s var(--ease),transform 1s var(--ease),border-color .3s;transition-delay:calc(var(--d,0) * 100ms)}
html.motion [data-reveal].pre{opacity:0;transform:translate3d(0,24px,0)}

/* 3 · statement lights up word by word with scroll (--k is set per word by site.js, 0 to 1) */
.sw{transition:color .2s linear}
html.motion [data-scrub] .sw{color:color-mix(in srgb,var(--fg) calc(18% + var(--k,0) * 82%),var(--bg))}

/* 4 · pointer light along the card border */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),var(--b-leaf),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;z-index:-1;
  background:radial-gradient(320px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--b-leaf) 9%,transparent),transparent 65%)}
.spot:hover::before,.spot:hover::after{opacity:1}

/* 14 · services on glass, with still color fields behind */
.services{position:relative;overflow:hidden;isolation:isolate;background:var(--b-skin);color:var(--b-paper);padding-block:clamp(96px,12vw,168px)}
.services .eyebrow{color:rgba(247,246,238,.55)}
.services .head h2{color:var(--b-paper)}
.fields{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fields i{position:absolute;border-radius:50%;filter:blur(70px)}
.fields i:nth-child(1){width:42vw;height:42vw;left:-6vw;top:30%;background:#4F7A33;opacity:.75}
.fields i:nth-child(2){width:30vw;height:30vw;right:4vw;top:18%;background:var(--b-flesh);opacity:.32}
.fields i:nth-child(3){width:22vw;height:22vw;left:46%;bottom:-6vw;background:var(--b-pit);opacity:.4}
.services::before{content:"";position:absolute;inset:0;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.08;mix-blend-mode:overlay;pointer-events:none}
.glass-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.glass{position:relative;display:flex;flex-direction:column;gap:32px;padding:14px 14px clamp(24px,2.6vw,32px);border-radius:var(--r);
  background:rgba(247,246,238,.07);border:1px solid rgba(247,246,238,.2);-webkit-backdrop-filter:blur(26px) saturate(1.35);backdrop-filter:blur(26px) saturate(1.35);
  overflow:hidden;transition:background .5s var(--ease),border-color .5s var(--ease)}
.glass::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(247,246,238,.12),transparent 60%)}
.glass:hover{background:rgba(247,246,238,.1);border-color:rgba(247,246,238,.32)}
.glass:hover::after{opacity:1}
.glass>:not(.plate){margin-inline:clamp(10px,1.6vw,22px)}
/* each service shows its own logo on its own ground */
.plate{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border-radius:2px;overflow:hidden}
.plate-soma{background:#FFF5F3;color:#222222}
.soma-lock{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px)}
.soma-type{display:flex;flex-direction:column;align-items:center;font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif;line-height:1}
.soma-type b{font-weight:800;font-size:clamp(44px,5.4vw,76px);letter-spacing:-.02em}
.soma-type small{font-weight:500;font-size:clamp(10px,1.08vw,15px);letter-spacing:.32em;margin-top:.7em;padding-left:.32em}
.soma-rule{width:1px;align-self:stretch;background:rgba(34,34,34,.18)}
.lotus{width:clamp(70px,8.4vw,118px);height:auto;stroke:#FF7D6B}
.plate-kutie{background:var(--b-paper);color:var(--b-skin);flex-direction:column;gap:18px}
.kutie-type{font-family:var(--f-display);font-weight:700;font-size:clamp(52px,6.4vw,92px);letter-spacing:-.03em;line-height:1}
.plate-kutie .soon{border-color:var(--b-skin);color:var(--b-skin)}
.g-body{display:flex;flex-direction:column;gap:12px}
.g-tag{font-family:var(--f-display);font-size:clamp(24px,2.4vw,32px);font-weight:600;line-height:1.15;letter-spacing:-.025em;color:var(--b-paper)}
:lang(ko) .g-tag{font-family:var(--f-ko);font-weight:700;letter-spacing:-.04em}
.g-desc{color:rgba(247,246,238,.72);max-width:36ch}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips li{font-size:13px;line-height:1;padding:9px 13px;border:1px solid rgba(247,246,238,.24);border-radius:999px;color:rgba(247,246,238,.86)}
.endorse{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;border-top:1px solid rgba(247,246,238,.14);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:rgba(247,246,238,.6)}
.endorse .logo{width:74px;--lg-ink:currentColor;--lg-flesh:transparent;--lg-seed:currentColor}

@media (max-width:760px){
  .glass-grid{grid-template-columns:minmax(0,1fr)}
}