/* WOO X Pro guide - premium skin (2026-09-25). Loaded after tenant-magazine.css.
   Selectors start with .tm-site so they win over the page's inline <style> (page/wx/style.php). */

/* ---------- tokens ---------- */
:root{--lx-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif}
.tm-site{
  --lx-bg:#06080a; --lx-bg2:#0a0d10; --lx-surface:rgba(255,255,255,.028); --lx-surface-hi:rgba(255,255,255,.045);
  --lx-line:rgba(255,255,255,.075); --lx-line-hi:rgba(255,255,255,.14);
  --lx-text:#f4f6f5; --lx-soft:#c3ccc8; --lx-muted:#8f9a96;
  --lx-accent:#12d88e; --lx-accent-deep:#00b377; --lx-accent-glow:rgba(18,216,142,.38);
  background:var(--lx-bg);
}
.tm-site,.tm-site .wx,.tm-site .tm-header,.tm-site .tm-footer{font-family:var(--lx-font)}
/* default.css (gnuboard) pins h1-h6 and form controls to Malgun Gothic; override them directly. */
body,.tm-site :is(h1,h2,h3,h4,h5,h6,button,input,select,textarea,label,summary),.tm-site .tm-page-heading :is(h1,h2){font-family:var(--lx-font)}
.tm-site .wx{
  --wx-bg:var(--lx-bg); --wx-surface:#0d1114; --wx-surface2:#11161a; --wx-line:rgba(255,255,255,.08);
  --wx-text:var(--lx-text); --wx-muted:var(--lx-muted); --wx-text-soft:var(--lx-soft);
  --wx-accent:var(--lx-accent); --wx-accent-soft:#4fe8b0;
  background:var(--lx-bg);
}

/* Tight tracking only for scripts that tolerate it (not Arabic, Persian, Thai, Hindi). */
html:is(:lang(ko),:lang(en),:lang(ja),:lang(zh),:lang(vi),:lang(id),:lang(ms),:lang(de),:lang(fr),:lang(es),:lang(pt),:lang(it),:lang(nl),:lang(pl),:lang(cs),:lang(sk),:lang(hu),:lang(ro),:lang(sv),:lang(tr),:lang(tl),:lang(ru),:lang(uk),:lang(bg),:lang(el)) .tm-site .wx :is(h1,h2){letter-spacing:-.022em}
html:is(:lang(ko),:lang(en),:lang(ja),:lang(zh)) .tm-site .wx h3{letter-spacing:-.01em}

/* ---------- header / top bar ---------- */
.tm-site .tm-utility{background:#040506;color:#8b9591;border-bottom:1px solid rgba(255,255,255,.05)}
.tm-site .tm-utility-copy{color:#7c8783}
.tm-site .tm-header{background:transparent}
.tm-site .tm-masthead{background:rgba(6,8,10,.86);border-bottom:1px solid var(--lx-line);
  -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px)}
.tm-site .tm-masthead-cta .tm-nav-cta,.tm-site .tm-nav-cta-signup{
  border-radius:999px;padding:12px 22px;font-weight:600;letter-spacing:0;
  background:linear-gradient(135deg,#3ff0b0 0%,var(--lx-accent) 45%,var(--lx-accent-deep) 100%);color:#03140d!important;
  box-shadow:0 10px 28px -12px var(--lx-accent-glow),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.tm-site .tm-masthead-cta .tm-nav-cta:hover,.tm-site .tm-nav-cta-signup:hover{background:linear-gradient(135deg,#5af5bf 0%,#1ee39a 45%,var(--lx-accent) 100%);
  transform:translateY(-1px);box-shadow:0 14px 34px -12px var(--lx-accent-glow),inset 0 1px 0 rgba(255,255,255,.4)}

/* ---------- section rhythm ---------- */
.tm-site .wx section{padding-block:clamp(72px,8.4vw,128px)}
.tm-site .wx section:nth-of-type(even):not(.wx-hero):not(.wx-final){background-color:var(--lx-bg2)}
.tm-site .wx section+section:not(.wx-hero){
  background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.09) 20%,rgba(18,216,142,.22) 50%,rgba(255,255,255,.09) 80%,transparent)}

/* ---------- type ---------- */
.tm-site .wx h2{font-size:clamp(30px,3.7vw,50px);line-height:1.16;font-weight:700;color:var(--lx-text)}
.tm-site .wx h3{font-size:clamp(18px,1.35vw,21px);font-weight:650;color:#eef2f0}
.tm-site .wx p{color:var(--lx-muted);line-height:1.78}
.tm-site .wx .wx-lead{font-size:clamp(17px,1.35vw,20px);color:var(--lx-soft);line-height:1.8;max-width:64ch;margin-top:18px}
.tm-site .wx-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#5ceab5;margin-bottom:16px}
.tm-site .wx-eyebrow::before{content:"";flex:0 0 auto;width:22px;height:1px;background:linear-gradient(90deg,var(--lx-accent),rgba(18,216,142,0))}
html[dir="rtl"] .tm-site .wx-eyebrow::before{background:linear-gradient(270deg,var(--lx-accent),rgba(18,216,142,0))}

/* ---------- hero ---------- */
.tm-site .wx-hero{padding:clamp(72px,8vw,120px) 0 clamp(64px,7vw,104px);
  background:
    radial-gradient(900px 520px at 82% 8%,rgba(18,216,142,.20),transparent 62%),
    radial-gradient(700px 420px at 8% 92%,rgba(0,160,120,.10),transparent 65%),
    linear-gradient(180deg,#070a0c,var(--lx-bg))}
.tm-site .wx-hero h1{font-size:clamp(40px,5.2vw,72px);line-height:1.1;font-weight:750;color:#fff}
.tm-site .wx-hero h1 em{font-style:normal;background:linear-gradient(95deg,#8ff7cf 0%,#2ee6a3 38%,#00c27f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tm-site .wx-hero p{font-size:clamp(17px,1.3vw,19px);color:var(--lx-soft);line-height:1.8;max-width:58ch}
.tm-site .wx-hero .wx-note{font-size:14px;color:#7f8a86}
.tm-site .wx-card-art{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--lx-line-hi);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02),0 30px 120px -60px var(--lx-accent-glow)}
.tm-site .wx-card-art::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.10),transparent 30%,transparent 70%,rgba(18,216,142,.08))}

/* stats */
.tm-site .wx-stats{gap:0;margin-top:clamp(44px,5vw,72px);border:1px solid var(--lx-line);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.tm-site .wx-stat{background:none;border:0;border-radius:0;box-shadow:none;padding:28px 30px;border-inline-start:1px solid var(--lx-line)}
.tm-site .wx-stat:first-child{border-inline-start:0}
.tm-site .wx-stat b{display:block;font-size:clamp(30px,2.9vw,44px);font-weight:600;line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,#b9c7c1);-webkit-background-clip:text;background-clip:text;color:transparent}
.tm-site .wx-stat span{display:block;margin-top:10px;font-size:14px;color:var(--lx-muted)}
@media (max-width:860px){
  .tm-site .wx-stat{border-inline-start:0;border-top:1px solid var(--lx-line)}
  .tm-site .wx-stat:nth-child(-n+2){border-top:0}
  .tm-site .wx-stat:nth-child(even){border-inline-start:1px solid var(--lx-line)}
}

/* ---------- buttons ---------- */
.tm-site .wx-btn{min-height:54px;padding:0 28px;border-radius:999px;font-weight:600;font-size:16px;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.tm-site .wx .wx-btn-primary{background:linear-gradient(135deg,#3ff0b0 0%,var(--lx-accent) 45%,var(--lx-accent-deep) 100%);color:#03140d;border:0;
  box-shadow:0 14px 34px -14px var(--lx-accent-glow),inset 0 1px 0 rgba(255,255,255,.38)}
.tm-site .wx .wx-btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 40px -14px var(--lx-accent-glow),inset 0 1px 0 rgba(255,255,255,.45);
  background:linear-gradient(135deg,#5af5bf 0%,#1ee39a 45%,var(--lx-accent) 100%);color:#03140d}
.tm-site .wx .wx-btn-ghost{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.18);color:var(--lx-text)}
.tm-site .wx .wx-btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.36);color:#fff}

/* ---------- jump nav ---------- */
.tm-site .wx-jump{background:rgba(6,8,10,.82);border-bottom:1px solid var(--lx-line);
  -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px)}
.tm-site .wx .wx-jump a,.tm-site .wx-jump a{padding:8px 16px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);
  color:#c9d2ce;font-size:15px;font-weight:500}
/* 손가락으로 누르면 :hover 가 남아 켜진 탭처럼 보인다 - 마우스 화면에서만 (2026-09-26) */
@media (hover:hover){.tm-site .wx-jump a:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.06);color:#fff}}
.tm-site .wx-jump a.is-on{background:rgba(18,216,142,.12);border-color:rgba(18,216,142,.55);color:#bff7df}

/* ---------- cards ---------- */
.tm-site .wx :is(.wx-box,.wx-plan,.wx-step,.wx-code,.wx-coin){
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid var(--lx-line);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 28px 60px -44px rgba(0,0,0,.95);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease,background .25s ease}
.tm-site .wx :is(.wx-box,.wx-plan,.wx-step,.wx-coin):hover{border-color:rgba(18,216,142,.26);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 34px 70px -44px rgba(0,0,0,.95),0 0 0 1px rgba(18,216,142,.05)}
.tm-site .wx .wx-box{padding:clamp(22px,2vw,30px)}
.tm-site .wx .wx-box .wx-ico{color:var(--lx-accent)}
.tm-site .wx .wx-grid{gap:clamp(14px,1.4vw,20px)}
.tm-site .wx .wx-plan.is-pick{border-color:rgba(18,216,142,.5);
  background:linear-gradient(180deg,rgba(18,216,142,.10),rgba(255,255,255,.015) 60%)}
.tm-site .wx .wx-tag{border-radius:999px;font-weight:600}
@media (prefers-reduced-motion:reduce){
  .tm-site .wx :is(.wx-box,.wx-plan,.wx-step,.wx-coin):hover,.tm-site .wx-btn:hover{transform:none}
}

/* ---------- table ---------- */
.tm-site .wx .wx-scroll{border:1px solid var(--lx-line);border-radius:18px;background:rgba(255,255,255,.015)}
.tm-site .wx .wx-table thead th{background:rgba(255,255,255,.035);color:#dfe6e3;font-weight:600}
.tm-site .wx .wx-table :is(th,td){border-color:rgba(255,255,255,.06)}
.tm-site .wx .wx-table tbody tr:hover :is(th,td){background:rgba(255,255,255,.02)}

/* ---------- FAQ ---------- */
.tm-site .wx .wx-faq details{border-color:rgba(255,255,255,.07)}
.tm-site .wx .wx-faq summary{font-weight:600;color:#eef2f0}
.tm-site .wx .wx-faq summary:hover{color:#fff}

/* ---------- final band ---------- */
.tm-site .wx .wx-final{background:
    radial-gradient(800px 360px at 50% 0%,rgba(18,216,142,.16),transparent 70%),
    linear-gradient(180deg,var(--lx-bg2),var(--lx-bg))}

/* ---------- footer ---------- */
.tm-site .tm-footer{background:#040506;border-top:1px solid var(--lx-line);color:#8b9591}
.tm-site .tm-footer a{color:#aeb8b4}
.tm-site .tm-footer a:hover{color:#fff}

/* ---------- language picker (top bar) ---------- */
.tm-site .tm-langpick__btn{background-color:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);color:#dfe6e3;border-radius:8px}
/* 국기 글꼴을 맨 앞에 (2026-09-26 주인 지적 "우엑스 pc 국기 안나와"). 위 글꼴 규칙(Pretendard)이 단추 글꼴을 통째로 바꿔
   윈도우 PC 에서 국기 이모지가 'KR' 글자로 나왔다. 윈도우는 국기 그림이 없어 다른 사이트는 'TM Country Flags' 글꼴로 그린다. */
.tm-site .tm-langpick__btn{font-family:"TM Country Flags",var(--lx-font)}
.tm-site .tm-langpick__btn:hover,.tm-site .tm-langpick__btn:focus-visible{background-color:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26);color:#fff}

/* ---------- Korean line breaking: break between words, not inside them (Korean only - keep-all clips Japanese) ---------- */
html:lang(ko) .tm-site .wx :is(p,h1,h2,h3,li,summary,.wx-lead,.wx-note,td,th){word-break:keep-all;overflow-wrap:anywhere}

/* ---------- sub pages: the light-theme 1px frame of .tm-page-content showed as a white line under the header ---------- */
.tm-site .tm-page-content:has(> .wx){border:0}
body{background:#06080a}
/* hero art: never wider than its column (it was 320px inside a 296px column on 320px phones) */
.tm-site .wx-card-art{max-width:100%;min-width:0}
.tm-site .wx-card-art img{display:block;width:100%;height:auto}

/* 새로고침할 때 윗줄 언어 칸이 흔들리던 것을 막는다. (2026-09-27 주인 지적 "모바일에서 새로고침하면 상단 메뉴가 흔들려")
   페이지가 뜰 때는 기본 선택 상자(select)가 먼저 그려지고, 맨 끝의 언어 스크립트(js/tenant-translate.js)가 그것을
   둥근 단추(.tm-langpick__btn)로 바꿔 끼운다. 2026-09-26 에 단추만 둥글게 바꾸면서 둘의 모양이 달라져서,
   휴대폰에서 172px 짜리 네모 상자가 칸 전체 폭의 둥근 단추로 바뀌는 순간 칸이 튀어 보였다(PC 에서는 글자 크기도 17→13px).
   선택 상자에도 단추와 같은 테두리·둥글기·바탕·글자 크기를 주고, 좁은 화면에서는 단추처럼 칸을 꽉 채운다.
   바꿔 끼우기 전후를 375·700·1280px 에서 재어 위치·폭·모양이 같은 것을 확인했다. */
.tm-site .tm-language-select{background-color:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);color:#dfe6e3;border-radius:8px;font-family:"TM Country Flags",var(--lx-font);font-size:13px}
@media (max-width:560px){
  .tm-site .tm-language-select{font-size:16px}
  .tm-language-item .tm-language-select{width:100%;max-width:none;min-width:0}
}