/* nexonbook.com — 다섯 언어판이 함께 쓰는 CSS 한 벌. 부품은 PalmDox 랜딩(_landing_base.css: 종이 바탕 · Instrument Serif · JetBrains Mono · 라운드 0 · 검은 슬랩)과 Tilewind 랜딩(_tilewind.css: 옆 라벨 220px 격자 · 1px 선 · 등폭 대문자 라벨)에서 그대로 가져왔다. ★ 본문 글꼴·크기·줄간격·자간·줄바꿈·하이픈은 **여기서 정하지 않는다** — 정본은 PDS core/i18n/locales.yaml 이고 _build/build.py 가 로 내려준다. 여기서는 var(--nx-*) 만 쓴다. ★ 언어 스위처 = 공용 부품 _lang_menu.html(.nx-drop) 과 같은 마크업 — 정적이라 POST 대신 실제 링크. */ :root{ --ink:#080808; --ink-2:#1c1c1c; --paper:#f8f6f1; --paper-0:#ffffff; --paper-2:#f0ede6; --line:#dedad3; --line-2:#cbc7be; --mute:#9a9690; --mute-2:#7a7670; --mute-3:#4a4844; --accent:#c8a96e; --accent-2:#a8893e; --slab-line:#2c2a31; --slab-mute:#9a96a0; --slab-ink:#ece9e4; --primary:95 106 245; --nx-primary-soft-bd:rgb(var(--primary) / .30); --nx-primary-soft-bg:rgb(var(--primary) / .10); --max:1240px; --gutter:clamp(20px,4.5vw,64px); --display:'Instrument Serif',Georgia,serif; --sans:var(--nx-font); --mono:'JetBrains Mono Variable','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--sans);font-size:var(--nx-font-size);line-height:var(--nx-line-height);letter-spacing:var(--nx-letter-spacing);word-break:var(--nx-word-break);hyphens:var(--nx-hyphens);-webkit-hyphens:var(--nx-hyphens);overflow-wrap:break-word;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} :root[data-lang="ja"] body,:root[data-lang="zh-TW"] body{line-break:strict} :root[data-lang="ja"] :is(h1,h2,h3,.kind){word-break:auto-phrase} a{color:inherit;text-decoration:none} ::selection{background:var(--ink);color:var(--paper)} :focus-visible{outline:1px solid var(--accent-2);outline-offset:4px} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)} h1,h2,h3{font-weight:400;text-wrap:balance} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2);display:inline-flex;align-items:center;gap:10px} .eyebrow::before{content:'';width:24px;height:1px;background:var(--mute);display:inline-block} .label{font:500 11px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2)} .mono{font-family:var(--mono);font-size:13.5px;letter-spacing:.02em} /* 한글·가나·한자 화면에서는 세리프(Instrument Serif · 라틴 전용)를 큰 제목에 쓰지 않는다 — 한 줄에 세리프 라틴과 고딕이 섞이지 않게. 브랜드 이름(PalmDox · Tilewind Engine)만 라틴이라 세리프 그대로. Tilewind 랜딩과 같은 규칙. */ :root:is([data-lang="ko"],[data-lang="ja"],[data-lang="zh-TW"]) :is(.hero h1,.sec-h h2,.field h3,.closing h2,.kind){font-family:var(--sans);font-weight:500;letter-spacing:-.02em} :root:is([data-lang="ko"],[data-lang="ja"],[data-lang="zh-TW"]) :is(.kind,.hero h1 em,.closing h2 em){font-style:normal} :root:is([data-lang="ko"],[data-lang="ja"],[data-lang="zh-TW"]) .kind{font-weight:400} :root:is([data-lang="ja"],[data-lang="zh-TW"]) :is(.hero h1,.sec-h h2,.field h3,.closing h2){letter-spacing:0} :root:is([data-lang="ko"],[data-lang="ja"],[data-lang="zh-TW"]) :is(.label,.eyebrow,.facts dt,.field .k){font-family:var(--sans);letter-spacing:.04em;text-transform:none;font-size:12px} :root:is([data-lang="ko"],[data-lang="ja"],[data-lang="zh-TW"]) .fig .n small{font-family:var(--sans);font-size:14px} /* skip */ .skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--paper);padding:12px 18px;font-size:14px;font-weight:600;border:2px solid var(--accent)} .skip-link:focus{left:12px;top:12px} /* bar */ .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:26px;border-bottom:1px solid var(--line)} .mark{display:flex;align-items:center;gap:12px;font:500 15px/1 var(--sans);letter-spacing:.02em} .mark .logo{display:block;height:22px;width:auto} /* 회사 로고 = _hp/logo_240_36.png(240×35) — 글자로 조판하지 않는다 */ .mark small{font:400 11px/1 var(--mono);letter-spacing:.12em;color:var(--mute-2);text-transform:uppercase;margin-left:0;align-self:flex-end;padding-bottom:2px} .bar nav{display:flex;gap:28px;font-size:14px;color:var(--mute-2)} .bar nav a:hover{color:var(--ink)} /* 언어 스위처 — 공용 .nx-drop(nx-shell-parts.css) 과 같은 값: 소프트블루 테두리 · 라운드 0 · 메뉴 10rem · 그림자 8/24 */ .nx-drop{position:relative} .nx-drop__btn{display:flex;align-items:center;gap:.25rem;list-style:none;cursor:pointer;padding:.35rem .5rem;border:1px solid var(--nx-primary-soft-bd);border-radius:0;background:transparent;color:var(--ink)} .nx-drop__btn::-webkit-details-marker{display:none} .nx-drop__btn:hover,.nx-drop[open] .nx-drop__btn{background:var(--nx-primary-soft-bg)} .nx-drop__code{font-size:.75rem;font-weight:600;text-transform:uppercase;font-family:var(--sans);letter-spacing:0} .nx-drop__caret{width:.9rem;height:.9rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .nx-drop__menu{position:absolute;inset-inline-end:0;top:calc(100% + .25rem);z-index:60;min-width:10rem;margin:0;padding:0;list-style:none;overflow:hidden;border:1px solid var(--line);border-radius:0;background:var(--paper-0);box-shadow:0 8px 24px rgb(0 0 0 / .12)} .nx-drop__item{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .9rem;font-size:.875rem;color:var(--ink);text-align:start} .nx-drop__item:hover{background:#f4f6fa} .nx-drop__item.is-on{font-weight:600} .nx-drop__item .nx-drop__code{color:var(--mute-2);font-weight:500} .nx-drop__item[lang="ja"]{font-family:"Pretendard JP Variable","Pretendard JP","Hiragino Sans","Yu Gothic",var(--sans)} .nx-drop__item[lang="zh-TW"]{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",var(--sans)} /* buttons */ .btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;min-height:44px;font:500 14px/1 var(--sans);letter-spacing:.01em;border:1px solid var(--ink);color:var(--ink);background:transparent;white-space:nowrap;transition:background .2s,color .2s,border-color .2s} .btn .arr{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s} .btn:hover .arr{transform:translateX(3px)} .btn-primary{background:var(--ink);color:var(--paper)} .btn-primary:hover{background:var(--ink-2)} .btn-outline:hover{background:var(--paper-2)} /* hero */ .hero{padding-block:clamp(56px,9vw,128px) clamp(40px,6vw,72px);display:grid;gap:clamp(28px,4vw,44px)} .hero h1{font-family:var(--display);font-size:clamp(50px,9.5vw,140px);line-height:.96;letter-spacing:-.03em} .hero h1 em{font-style:italic;color:var(--accent-2)} :root:is([data-lang="ko"],[data-lang="ja"],[data-lang="zh-TW"]) .hero h1{font-size:clamp(38px,7.2vw,104px);line-height:1.1} :root:is([data-lang="ko"],[data-lang="ja"],[data-lang="zh-TW"]) .hero h1 em{color:var(--accent-2)} .hero-foot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 64px;align-items:end} .kind{font-family:var(--display);font-size:clamp(22px,2.4vw,31px);line-height:1.32;font-style:italic;max-width:22em} :root:is([data-lang="ko"],[data-lang="ja"],[data-lang="zh-TW"]) .kind{font-size:clamp(19px,2vw,26px);line-height:1.5} .hero .lede{color:var(--mute-3);max-width:34em} .hero .lede b{color:var(--ink);font-weight:500} .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px} /* figures */ .figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--line)} .fig{padding:26px 24px 26px 0;display:grid;gap:8px;align-content:start} .fig+.fig{padding-left:24px;border-left:1px solid var(--line)} .fig .n{font:400 clamp(34px,4vw,52px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums} .fig .n small{font:400 17px/1 var(--display);color:var(--mute-2);margin-left:4px} .fig .t{font-size:13.5px;color:var(--mute-3)} /* sections */ section.grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px 56px;padding-block:clamp(64px,9vw,120px);border-bottom:1px solid var(--line)} .side{display:grid;gap:10px;align-content:start} .side .num{font:400 13px/1 var(--mono);color:var(--mute)} .sec-h{display:grid;gap:16px;max-width:40em;margin-bottom:clamp(30px,4vw,44px)} .sec-h h2{font-family:var(--display);font-size:clamp(32px,4.2vw,54px);line-height:1.08;letter-spacing:-.022em} :root:is([data-lang="ko"],[data-lang="ja"],[data-lang="zh-TW"]) .sec-h h2{font-size:clamp(26px,3.2vw,42px);line-height:1.25} .sec-h p{color:var(--mute-3)} /* fields */ .fields{border-top:1px solid var(--ink)} .field{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 32px;padding-block:26px;border-bottom:1px solid var(--line);align-items:baseline} .field .k{font:500 11px/1.9 var(--mono);letter-spacing:.14em;color:var(--mute-2)} .field h3{font-family:var(--display);font-size:clamp(24px,2.6vw,32px);line-height:1.18;letter-spacing:-.015em} :root:is([data-lang="ko"],[data-lang="ja"],[data-lang="zh-TW"]) .field h3{font-size:clamp(20px,2vw,25px);line-height:1.3} .field p{color:var(--mute-3);margin-top:6px;max-width:40em} .with{margin-top:clamp(30px,4vw,44px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:start} .with p{max-width:36em} .with .quiet{font-size:13.5px;color:var(--mute-2)} /* brands slab */ .slab{background:var(--ink);color:var(--slab-ink);padding-block:clamp(64px,9vw,120px)} .slab .eyebrow{color:var(--slab-mute)} .slab .side .num,.slab .label{color:var(--slab-mute)} .slab .sec-h p{color:var(--slab-mute)} /* 오픈 전 알림(2026-10 자체 브랜드 서비스 오픈) — 오픈 뒤에는 COPY 의 b.soon 과 이 줄을 뺀다 */ .slab .sec-h .soon{justify-self:start;display:inline-flex;align-items:center;gap:10px;margin-top:4px;padding:9px 14px;border:1px solid rgba(200,169,110,.45);color:var(--accent);font:500 12px/1.4 var(--mono);letter-spacing:.06em} .slab .sec-h .soon::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none} :root:is([data-lang="ko"],[data-lang="ja"],[data-lang="zh-TW"]) .slab .sec-h .soon{font-family:var(--sans);font-size:13px;letter-spacing:.02em} :root[data-lang="ja"] .slab .sec-h .soon{word-break:auto-phrase} .slab section.grid{border-bottom:0;padding-block:0} .brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--slab-ink)} .brand{padding:28px 32px 32px 0;display:grid;gap:14px;align-content:start} .brand+.brand{padding-left:32px;border-left:1px solid var(--slab-line)} .brand .dom{font:400 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--accent)} .brand h3{font-family:var(--display);font-size:clamp(36px,4.6vw,64px);line-height:1;letter-spacing:-.025em} .brand h3 em{font-style:italic;color:var(--accent)} .brand .one{font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:24em} .brand p{color:var(--slab-mute);max-width:32em} .brand .go{margin-top:6px;display:inline-flex;align-items:center;gap:10px;font:500 13px/1 var(--mono);letter-spacing:.06em;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:6px} :root:is([data-lang="ko"],[data-lang="ja"],[data-lang="zh-TW"]) .brand .go{font-family:var(--sans);letter-spacing:.02em} .brand .go:hover{border-bottom-color:var(--accent);color:var(--accent)} .brand .go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} /* company */ .facts{border-top:1px solid var(--ink);display:grid} .facts div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px 32px;padding-block:16px;border-bottom:1px solid var(--line);font-size:15.5px} .facts dt{font:500 11px/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)} /* closing */ .closing{padding-block:clamp(72px,10vw,140px);display:grid;gap:28px;justify-items:start;border-bottom:1px solid var(--line)} .closing h2{font-family:var(--display);font-size:clamp(40px,6.4vw,96px);line-height:1;letter-spacing:-.03em} .closing h2 em{font-style:italic;color:var(--accent-2)} :root:is([data-lang="ko"],[data-lang="ja"],[data-lang="zh-TW"]) .closing h2{font-size:clamp(30px,4.8vw,72px);line-height:1.2} :root:is([data-lang="ko"],[data-lang="ja"],[data-lang="zh-TW"]) .closing h2 em{color:var(--accent-2)} .closing p{color:var(--mute-3);max-width:36em} .closing .mail{font:500 clamp(18px,2vw,24px)/1.3 var(--mono);letter-spacing:.01em;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:8px} footer{padding-block:28px 44px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font:400 12px/1.5 var(--mono);color:var(--mute-2);letter-spacing:.04em} footer .foot-links{display:flex;gap:18px} footer .foot-links a:hover{color:var(--ink)} footer .foot-company{flex:0 0 100%;order:9;font:400 11px/1.7 var(--sans);letter-spacing:0;color:var(--mute-2);margin-top:4px} @media (max-width:900px){ section.grid{grid-template-columns:minmax(0,1fr)} .hero-foot,.with,.brands{grid-template-columns:minmax(0,1fr)} .brand,.brand+.brand{padding:24px 0;border-left:0} .brand+.brand{border-top:1px solid var(--slab-line)} .figures{grid-template-columns:repeat(2,minmax(0,1fr))} .fig:nth-child(3){padding-left:0;border-left:0} .fig:nth-child(n+3){border-top:1px solid var(--line)} .bar nav{display:none} .field{grid-template-columns:minmax(0,1fr)} .facts div{grid-template-columns:minmax(0,1fr);gap:4px} }