/*
Theme Name: INTOPER
Theme URI: https://intoper.com
Author: INTOPER
Description: 인토퍼(INTOPER) 테마
Version: 1.0
Requires PHP: 7.4
Text Domain: intoper
*/

:root{
  --bg:#FFFFFF;
  --ink:#111214;
  --grey:#6B6E76;
  --line:#111214;
  --line-soft:#D8D8DA;
  --accent:#2563EB;
  --font:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* Form controls don't inherit the page font by default (they fall back to Arial). */
button, input, select, textarea{ font-family:inherit; }
html{scroll-behavior:smooth; scroll-padding-top:96px;}
html:has(.page-company),
html:has(.page-technology),
html:has(.page-products),
html:has(.page-contract){ scroll-padding-top:0; }
body{
  font-family:var(--font);
  background:var(--bg); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased;
  font-weight:400; word-break:keep-all; overflow-wrap:break-word;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.mono{ font-family:'JetBrains Mono', monospace; }
.wrap{ padding-left:6vw; padding-right:6vw; }

/* NAV — transparent, floats over hero */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:22px 6vw; height:96px; box-sizing:border-box; }
.nav .logo{ position:relative; font-weight:700; font-size:16px; letter-spacing:-0.02em;
  display:flex; align-items:center; width:214px; height:52px; }
.nav .logo img{ height:52px; width:214px; object-fit:contain; object-position:left center; display:block; }
.nav .logo-light{ position:absolute; left:0; top:0; opacity:0; pointer-events:none; }
.nav .logo-dark{ opacity:1; }
body.home .nav:not(.is-scrolled):not(.is-open) .logo-dark,
body.front-page .nav:not(.is-scrolled):not(.is-open) .logo-dark,
body.page-contract .nav:not(.is-scrolled):not(.is-open) .logo-dark{ opacity:0; }
body.home .nav:not(.is-scrolled):not(.is-open) .logo-light,
body.front-page .nav:not(.is-scrolled):not(.is-open) .logo-light,
body.page-contract .nav:not(.is-scrolled):not(.is-open) .logo-light{ opacity:1; }
.nav > ul{ list-style:none; display:flex; gap:72px; position:absolute; left:50%; right:auto; top:50%; bottom:auto; transform:translate(-50%,-50%); }
.lang{ position:absolute; right:6vw; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:12px; z-index:2; }
.lang a{ font-size:15px; font-weight:200; letter-spacing:0.04em; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,0.4); transition:color .2s, text-shadow .2s; }
.lang a.is-on{ font-weight:600; }
.nav.is-scrolled .lang a,
.nav.solid .lang a{ color:var(--ink); text-shadow:none; }
.nav.is-scrolled .lang a.is-on,
.nav.solid .lang a.is-on{ color:var(--accent); }
.nav ul{ list-style:none; }
.nav > ul > li{ position:relative; }
.nav > ul > li::after{ content:''; position:absolute; left:50%; transform:translateX(-50%);
  top:100%; width:180px; height:14px; }
.nav .sub-menu,
.nav > ul > li > .sub-menu{ display:block; position:absolute; top:calc(100% + 4px); left:50%;
  transform:translateX(-50%); width:max-content; min-width:0; padding:8px 0 0; margin:0;
  background:none; border:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s, visibility .18s; z-index:80; }
.nav > ul > li:hover > .sub-menu,
.nav > ul > li:focus-within > .sub-menu{ opacity:1; visibility:visible; pointer-events:auto; }
.nav .sub-menu li{ text-align:center; }
.nav .sub-menu a{ display:block; padding:6px 0; font-size:14px; font-weight:400; color:#fff !important;
  text-shadow:0 1px 6px rgba(0,0,0,0.4); white-space:nowrap; border:none; border-radius:0; background:none; }
.nav .sub-menu a:hover{ background:none; color:var(--accent) !important; text-shadow:none; }
.nav.is-scrolled .sub-menu a,
.nav.solid .sub-menu a{ color:var(--ink) !important; text-shadow:none; }
.nav.is-scrolled .sub-menu a:hover,
.nav.solid .sub-menu a:hover{ color:var(--accent) !important; }
.nav > ul > li > a{ font-size:18px; font-weight:200; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,0.4);
  padding-bottom:0; border-bottom:none; transition:color .2s, text-shadow .2s; }
.nav > ul > li > a.active,
.nav ul .current-menu-item > a,
.nav ul .current_page_item > a{ font-weight:600; }
.nav .idx{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--grey); }
.nav-toggle{ display:none; }

.nav.is-scrolled,
.nav.solid{ background:#fff; box-shadow:none; }
.nav.is-scrolled > ul > li > a,
.nav.solid > ul > li > a{ color:var(--ink); text-shadow:none; }
.nav.is-scrolled > ul > li > a.active,
.nav.is-scrolled ul .current-menu-item > a,
.nav.is-scrolled ul .current_page_item > a,
.nav.solid > ul > li > a.active,
.nav.solid ul .current-menu-item > a,
.nav.solid ul .current_page_item > a{ color:var(--accent); }
body:has(> .nav.solid){ padding-top:96px; }

/* NAV — narrower desktops: tighten menu so it never runs into the logo */
@media(max-width:1300px){
  .nav > ul{ gap:32px; }
}
/* NAV — tablet / mobile: hamburger + drop-down panel */
@media(max-width:1100px){
  .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:6px; position:absolute; right:calc(6vw - 8px); top:50%;
    transform:translateY(-50%); width:40px; height:40px; padding:8px; border:0; background:none; cursor:pointer; z-index:3; }
  .nav-toggle span{ display:block; height:2px; width:100%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.35);
    transition:transform .25s, opacity .2s, background .2s; }
  .nav.is-scrolled .nav-toggle span,
  .nav.solid .nav-toggle span,
  .nav.is-open .nav-toggle span{ background:var(--ink); box-shadow:none; }
  .nav.is-open .nav-toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav.is-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.is-open .nav-toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
  .lang{ right:calc(6vw + 44px); }
  .nav.is-open{ background:#fff; }
  .nav.is-open .lang a{ color:var(--ink); text-shadow:none; }
  .nav.is-open .lang a.is-on{ color:var(--accent); }

  .nav > ul{ display:none; position:fixed; top:96px; left:0; right:0; bottom:auto; transform:none;
    flex-direction:column; gap:0; padding:4px 6vw 20px; background:#fff; border-top:1px solid var(--line-soft);
    box-shadow:0 18px 32px rgba(17,18,20,0.08); max-height:calc(100vh - 96px); max-height:calc(100dvh - 96px); overflow-y:auto; }
  .nav.is-open > ul{ display:flex; }
  .nav > ul > li{ border-bottom:1px solid var(--line-soft); }
  .nav > ul > li:last-child{ border-bottom:0; }
  .nav > ul > li::after{ display:none; }
  .nav.is-open > ul > li > a{ display:block; padding:14px 0; font-size:17px; font-weight:500; color:var(--ink); text-shadow:none; }
  .nav.is-open > ul > li > a.active{ color:var(--accent); font-weight:700; }
  .nav .sub-menu,
  .nav > ul > li > .sub-menu{ position:static; transform:none; width:auto; padding:0 0 10px; opacity:1; visibility:visible; pointer-events:auto; }
  .nav .sub-menu li{ text-align:left; }
  .nav.is-open .sub-menu a{ padding:6px 0 6px 14px; font-size:15px; color:var(--grey) !important; text-shadow:none; white-space:normal; }
  .nav.is-open .sub-menu a:hover{ color:var(--accent) !important; }
}
@media(max-width:600px){
  .nav{ padding-left:5vw; padding-right:5vw; }
  .nav .logo,
  .nav .logo img{ width:160px; height:40px; }
  .lang{ right:calc(5vw + 40px); gap:10px; }
  .lang a{ font-size:14px; }
  .nav-toggle{ right:calc(5vw - 8px); }
}

/* HERO — full-bleed visual slider (home) */
.hero{ min-height:100vh; min-height:100dvh; position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  padding:110px 6vw 72px; overflow:hidden; background:#111214; }
.hero-art{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.hero-slide.is-on{ opacity:1; }
.hero-art img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); }
.hero-slide.is-on img{ animation:heroZoom 4s ease-out forwards; }
.hero-slide:nth-child(2) img{ object-position:center 18%; }
.hero-overlay{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.12) 14%, rgba(0,0,0,0) 28%),
  linear-gradient(90deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.12) 42%, rgba(0,0,0,0) 70%); }
.hero .content{ position:relative; z-index:2; display:grid; }
.hero-copy{ grid-area:1/1; align-self:end; opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(16px); transition:opacity .7s ease, transform .7s ease, visibility .7s; }
.hero-copy.is-on{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.hero h1{ font-size:clamp(26px,4.2vw,58px); font-weight:800; letter-spacing:-0.02em; line-height:1.25; max-width:22ch;
  color:#fff; text-shadow:0 2px 28px rgba(0,0,0,0.35); }
.hero .sub{ margin-top:18px; font-size:18px; color:rgba(255,255,255,0.88); max-width:46ch; line-height:1.6;
  text-shadow:0 1px 16px rgba(0,0,0,0.3); }
.hero-pags{ position:relative; z-index:4; display:flex; gap:8px; margin-top:28px; }
.hero-pag{ width:40px; height:22px; padding:0; border:0; background:transparent; cursor:pointer; position:relative; }
.hero-pag::before{ content:""; position:absolute; left:0; right:0; top:10px; height:3px; background:rgba(255,255,255,0.35); }
.hero-pag.is-on::after{ content:""; position:absolute; left:0; top:10px; height:3px; width:0; background:#fff;
  animation:heroPag 4s linear forwards; }
.scroll-cue{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,0.85); transition:opacity .35s ease, visibility .35s ease; }
.scroll-cue.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.scroll-cue .mono{ font-size:11px; letter-spacing:0.15em; }
.scroll-cue svg{ animation:bounce 1.6s ease-in-out infinite; }
@keyframes bounce{ 0%,100%{ transform:translateY(0); opacity:0.5; } 50%{ transform:translateY(10px); opacity:1; } }
@keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
@keyframes heroPag{ from{ width:0; } to{ width:100%; } }
@media (prefers-reduced-motion: reduce){
  .hero-slide.is-on img{ animation:none; transform:none; }
  .hero-pag.is-on::after{ animation:none; width:100%; }
  .history-cue-arrows svg{ animation:none; opacity:0.7; }
  .timeline > li:hover{ transform:none; }
}

.rule{ height:1px; background:var(--line); }

/* SERVICES */
.services{ min-height:100vh; min-height:100dvh; box-sizing:border-box; padding:108px 6vw 64px; background:#F6F7F8;
  display:flex; flex-direction:column; justify-content:center; }
.s-head{ display:flex; flex-direction:column; align-items:flex-start; margin-bottom:88px; gap:14px; }
.s-head .num{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--grey); }
.s-head h2{ font-size:clamp(32px,3.8vw,48px); font-weight:800; letter-spacing:-0.02em; max-width:none; line-height:1.45; word-break:keep-all; color:var(--ink); }
.s-head h2 .highlight{ color:var(--accent); }
.s-list{ display:flex; flex-direction:column; align-items:stretch; width:100%; }
.s-item{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; padding:28px 0; border-top:1px solid var(--line-soft); align-items:center; width:100%; max-width:none;
  position:relative; z-index:1; }
.s-item:hover{ z-index:2; }
.s-grow{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:48px; align-items:center; min-width:0;
  transform-origin:left center; transition:transform .35s cubic-bezier(.22,1,.36,1); position:relative; z-index:0; }
.s-item:hover .s-grow{ transform:scale(1.06); }
.s-item:last-child{ border-bottom:1px solid var(--line-soft); }
.s-item h3{ font-size:21px; font-weight:800; letter-spacing:-0.01em; }
.s-desc{ margin-top:0; max-width:none; }
.s-item p{ font-size:19px; color:var(--grey); line-height:1.7; text-align:justify; text-justify:inter-character; text-align-last:left; word-break:keep-all; }
.s-item p + p{ margin-top:10px; }
.s-item p b{ color:var(--ink); font-weight:700; }
.s-more{ justify-self:end; align-self:center; white-space:nowrap; border:1.5px solid var(--ink); padding:12px 22px;
  font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); transition:background .2s, color .2s;
  position:relative; z-index:3; }
.s-more:hover{ background:var(--ink); color:#fff; }
@media(max-width:760px){ .s-item,.s-grow{ grid-template-columns:1fr; gap:10px; width:100%; } .s-more{ justify-self:start; } }

/* ABOUT */
.about{ min-height:100vh; min-height:100dvh; box-sizing:border-box; padding:112px 6vw 64px;
  display:flex; flex-direction:column; justify-content:center; }
.about-grid{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.35fr); gap:28px 56px; align-items:center; }
.about-visual{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; min-width:0; }
.about .num{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--grey); margin:0; display:block; }
.about-copy{ display:flex; flex-direction:column; justify-content:center; gap:28px; min-width:0; padding-bottom:0; }
.about h2{ font-size:clamp(32px,3.8vw,48px); font-weight:800; line-height:1.45; letter-spacing:-0.02em; color:var(--ink);
  word-break:keep-all; }
.about h2 .highlight{ color:var(--accent); }
.about-photo{ width:100%; max-width:none; aspect-ratio:3/2; max-height:min(52vh,480px); overflow:hidden; border-radius:20px; }
.about-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 46%; border-radius:0; display:block; }
.about .text{ margin-top:0; max-width:none; } /* hero.js caps it to the heading's longest line */
.about .text p{ font-family:'Pretendard Variable', Pretendard, -apple-system, sans-serif; font-size:18px; font-weight:400; color:var(--grey); line-height:1.85;
  word-break:keep-all; overflow-wrap:normal; }
.about .text p b{ color:var(--ink); font-weight:700; white-space:nowrap; }
@media(max-width:860px){
  .about-grid{ grid-template-columns:1fr; }
  .about-copy{ order:-1; padding-bottom:0; }
  .about-photo{ max-height:none; }
  .about h2{ white-space:normal; }
}

/* NEWS GRID (home) */
.news{ min-height:calc(100vh - 96px); min-height:calc(100dvh - 96px); box-sizing:border-box; padding:108px 6vw 56px;
  display:flex; flex-direction:column; justify-content:flex-start; }
.n-head{ display:flex; flex-direction:column; align-items:flex-start; margin-bottom:48px; gap:12px; flex-shrink:0; }
.n-head h2{ font-size:clamp(28px,3.4vw,42px); font-weight:800; letter-spacing:-0.02em; }
.n-head .num{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--grey); }
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:56px 64px; align-items:stretch; }
.news-card{ border-top:1px solid var(--ink); padding-top:22px; display:flex; flex-direction:column;
  transition:transform .45s cubic-bezier(.22,1,.36,1); }
.news-card.is-in:hover{ transform:translateY(-8px); }
.news-card .t{ margin-top:16px; font-family:'Pretendard Variable', Pretendard, -apple-system, sans-serif; font-size:18px; font-weight:600; line-height:1.5; letter-spacing:-0.01em;
  min-height:calc(1.5em * 2); }
.news-thumb{ margin-top:22px; width:100%; aspect-ratio:3/2; height:auto; border-radius:12px; background:linear-gradient(135deg,#EDEBE6,#DAD6CC);
  overflow:hidden; position:relative; flex-shrink:0; }
.news-thumb img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; display:block; }
.news-card .d{ font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--accent); font-weight:600; }
@media(max-width:860px){ .news-grid{ grid-template-columns:1fr; } }

/* Scroll reveal (home sections) */
.reveal{ opacity:0; transform:translate3d(0,56px,0);
  transition:opacity .9s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),
              transform .9s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .page-company .n-hero-art img,
  .values-photo img{ animation:none; transform:none; }
}

/* CTA */
.cta{ padding:110px 6vw; display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:center; }
.cta h2{ font-size:clamp(28px,4.4vw,52px); font-weight:700; letter-spacing:-0.03em; max-width:16ch; }
.cta .btn{ justify-self:start; border:1.5px solid var(--ink); padding:16px 30px; font-weight:600; font-size:14px; }
.cta .btn:hover{ background:var(--ink); color:#fff; }
@media(max-width:860px){ .cta{grid-template-columns:1fr;} .cta .btn{justify-self:stretch; text-align:center;} }

footer{ margin-top:96px; padding:22px 6vw; display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:16px;
  background:#4b4b4d; color:#fff; }
body.home footer,
body.front-page footer,
body.page-company footer,
body.page-technology footer,
body.page-products footer{ margin-top:0; }
footer > div{ display:flex; align-items:center; justify-content:flex-start; gap:20px; flex-wrap:wrap; text-align:left; }
footer .f-logo{ display:inline-flex; align-items:center; }
footer .f-logo img{ height:32px; width:auto; display:block; }
footer .f-info{ font-size:12px; color:#c7c7c9; line-height:1.6; margin:0; text-align:left; }

/* HERO for sub-pages (news list / news article) */
.n-hero{ position:relative; height:50vh; min-height:320px; overflow:hidden; }
.n-hero-art{ position:absolute; inset:0; z-index:0; }
.n-hero-art img{ width:100%; height:100%; object-fit:cover; object-position:center 88%; display:block; }
.page-company .n-hero-art img{
  object-position:center 15%;
  animation: companyHero 14s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes companyHero{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to{ transform:scale(1.14) translate3d(0,-2.4%,0); }
}
.n-hero-tech .n-hero-art img{ object-position:center center; }
.n-hero-overlay{ position:absolute; top:0; left:0; right:0; height:140px; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%); }
.n-hero-wave{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:130px; z-index:2;
  display:block; }
.n-hero-wave path{ fill:var(--bg); }
@media(max-width:700px){ .n-hero-wave{ height:64px; } }

/* PAGE HEAD (news list) */
/* PAGE HEAD (generic pages like Company/Technology/Contract) */
.page-head{ max-width:1100px; margin:0 auto; padding:56px 24px 0; }
.page-head .eyebrow{ font-family:'JetBrains Mono','Pretendard Variable', Pretendard, monospace; font-size:12.5px; color:var(--accent); font-weight:700; letter-spacing:0.06em; }
.page-head h1{ margin-top:14px; font-size:clamp(30px,4vw,44px); font-weight:700; letter-spacing:-0.02em; }

/* NEWS LIST PAGE — page-head/filter/list share one outer box so they can never misalign */
.news-wrap{ padding:0 6vw; }
.page-head-inner{ padding:56px 0 0; }
.page-head-inner .eyebrow{ font-family:'JetBrains Mono','Pretendard Variable', Pretendard, monospace; font-size:12.5px; color:var(--accent); font-weight:700; letter-spacing:0.06em; }
.page-head-inner h1{ margin-top:14px; font-size:clamp(30px,4vw,44px); font-weight:700; letter-spacing:-0.02em; }

/* FILTER */
.filter-bar-inner{ padding:44px 0 20px; }
.filter-select{ display:inline-flex; align-items:center; gap:10px; font-size:20px; font-weight:700;
  cursor:pointer; user-select:none; }
.filter-select .chev{ font-size:13px; color:var(--grey); }

/* NEWS LIST */
.news-list-inner{ margin-bottom:40px; border-top:1.5px solid var(--ink); }
.news-row{ display:flex; align-items:center; gap:28px; padding:26px 0; border-bottom:1px solid var(--line-soft); }
.news-row.recent .title{}
.news-row.recent .date{}

.news-pagination{ max-width:1100px; margin:0 auto 100px; padding:0 24px; display:flex; justify-content:center; }
.news-pagination ul{ list-style:none; display:flex; gap:16px; font-family:'JetBrains Mono','Pretendard Variable', Pretendard, monospace; font-size:13px; }
.news-pagination .page-numbers{ display:flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 4px; color:var(--grey); }
.news-pagination a.page-numbers:hover{ color:var(--ink); }
.news-pagination .page-numbers.current{ color:var(--ink); font-weight:700; }
.news-pagination .page-numbers.dots{ border:none; }
.news-row .tag{ font-family:'JetBrains Mono','Pretendard Variable', Pretendard, monospace; font-size:13px;
  color:var(--accent); font-weight:700; letter-spacing:0.03em; width:64px; flex-shrink:0; }
.news-row .title{ flex:1; font-size:17px; font-weight:600; letter-spacing:-0.01em; transition:color .15s; }
.news-row .date{ font-family:'JetBrains Mono','Pretendard Variable', Pretendard, monospace; font-size:13px;
  color:var(--grey); flex-shrink:0; }
.news-row:hover .title{ color:var(--accent); }
@media(max-width:640px){
  .news-row{ flex-wrap:wrap; gap:8px 16px; }
  .news-row .title{ order:3; width:100%; flex:none; }
}

/* ARTICLE HEADER */
.a-head{ max-width:820px; margin:0 auto; padding:36px 24px 0; }
.a-head .tag{ font-family:'JetBrains Mono','Pretendard Variable', Pretendard, monospace; font-size:12.5px; color:var(--accent); font-weight:700; letter-spacing:0.06em; }
.a-head h1{ margin-top:14px; font-size:clamp(26px,3.8vw,42px); font-weight:700; letter-spacing:-0.02em; line-height:1.35; }
.a-head .meta{ margin-top:18px; display:flex; gap:16px; align-items:center; font-family:'JetBrains Mono','Pretendard Variable', Pretendard, monospace; font-size:12.5px; color:var(--grey); }

.crumb{ max-width:820px; margin:0 auto; padding:24px 24px 0; font-family:'JetBrains Mono','Pretendard Variable', Pretendard, monospace; font-size:12.5px; color:var(--grey); }
.crumb a{ color:var(--grey); }
.crumb a:hover{ color:var(--ink); }
.crumb .sep{ margin:0 8px; color:var(--line-soft); }

.a-body{ max-width:820px; margin:0 auto; padding:40px 24px 80px; }
.a-body p,
.a-body li,
.a-body .wp-block-paragraph{ font-family:'Pretendard Variable', Pretendard, -apple-system, sans-serif; font-size:18px; color:var(--ink); line-height:1.9; margin-bottom:22px;
  text-align:justify !important; text-justify:inter-character; text-align-last:left;
  word-break:normal; overflow-wrap:break-word; }
.a-body p.has-text-align-left,
.a-body p.has-text-align-center,
.a-body p.has-text-align-right{ text-align:justify; text-align-last:left; }
.a-body .hashtags{ margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; }
.a-body .hashtags span{ font-family:'JetBrains Mono','Pretendard Variable', Pretendard, monospace; font-size:13px; color:var(--accent); }
.a-body .back{ display:inline-block; margin-top:40px; font-family:'JetBrains Mono','Pretendard Variable', Pretendard, monospace; font-size:13px; color:var(--grey); border-bottom:1px solid var(--line-soft); padding-bottom:2px; }

.a-nav{ border-top:1px solid var(--line); max-width:820px; margin:0 auto 24px; }
.a-nav a{ display:flex; justify-content:space-between; align-items:center; padding:26px 24px;
  border-bottom:1px solid var(--line-soft); }
.a-nav a:hover{ background:#FAFAFA; }
.a-nav .dir{ font-family:'JetBrains Mono','Pretendard Variable', Pretendard, monospace; font-size:11.5px; color:var(--grey); min-width:70px; }
.a-nav .ttl{ font-size:15px; font-weight:600; flex:1; }
.a-nav .arrow{ font-family:'JetBrains Mono','Pretendard Variable', Pretendard, monospace; color:var(--accent); }

/* COMPANY ABOUT */
.company-about{ scroll-margin-top:0; }
.history{ scroll-margin-top:80px; }
.location{ scroll-margin-top:0; }
.company-about{ padding:180px 6vw 100px; overflow:visible; }
.about-head{ margin-bottom:28px; }
.about-head h2{ font-size:clamp(28px,3.4vw,42px); font-weight:800; letter-spacing:-0.02em; }

/* VALUES (Company page) */
.values{ padding:0; display:grid;
  grid-template-columns:minmax(320px,42vw) minmax(0,1fr); gap:40px; align-items:end; overflow:visible; }
.values-photo{ position:relative; width:100%; height:min(64vh,600px); min-height:min(64vh,600px);
  border-radius:0; overflow:hidden; background:#EEF0F2; }
.values-photo img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center 28%; display:block;
  transform:scale(1.05); transition:transform 1s cubic-bezier(.22,1,.36,1); }
.values-photo:hover img{ transform:scale(1.14); }
.values-text{ min-width:0; padding:0 0 128px; overflow:visible; display:flex; flex-direction:column; justify-content:flex-end; gap:14px; align-self:end; container-type:inline-size; }
.values-text .values-lead{ font-family:'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  font-size:clamp(22px, calc(1.6vw + 6px), 30px); font-weight:700; line-height:1.5; letter-spacing:-0.02em; color:var(--ink);
  word-break:keep-all; margin:0 0 28px; text-align:left; text-rendering:optimizeLegibility; width:100%; text-wrap:pretty; }
/* Same size in both languages; the line spans just flow and wrap naturally. */
.values-text .values-lead > span{ display:inline; white-space:normal; }
.values-text .values-lead .hl{ white-space:nowrap; }
@media (min-width:901px) and (max-width:1300px){
  .values-text .values-body p{ font-size:16px; line-height:1.8; }
}
.values-text .values-lead .hl{ color:var(--accent); }
@media (min-width:901px){
  .values{ align-items:start; }
  .values-text{ align-self:center; justify-content:flex-start; padding:128px 0 0; gap:0; }
  .values-text .values-lead{ margin:0; transform:translateY(-112px); }
  .values-body{ transform:translateY(-80px); }
}
.values-body{ margin:0; }
@media (min-width:901px){
  .company-about .values-body{ opacity:0; transition:opacity .45s ease; }
  .company-about .values-body.is-shown{ opacity:1; }
}
.values-text.reveal{
  transition:opacity 1.6s cubic-bezier(.22,1,.36,1),
              transform 1.6s cubic-bezier(.22,1,.36,1); }
.values-body p{ margin:0; font-family:'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  font-size:18px; font-weight:400; color:var(--grey); line-height:1.85; letter-spacing:-0.01em;
  word-break:keep-all; overflow-wrap:break-word; text-align:justify; text-justify:inter-character;
  text-align-last:auto; max-width:100%; }
.values-body p:first-child{ margin-top:0; }
.values-body p b{ color:var(--ink); font-weight:700; }
.values-body p + p{ margin-top:0.85em; }
@media(max-width:900px){
  .company-about{ padding:72px 5vw 64px; }
  .values{ grid-template-columns:1fr; gap:28px; }
  .values-photo{ aspect-ratio:5/4; height:auto; min-height:0; }
  .values-text{ justify-content:flex-start; padding-bottom:24px; }
  .values-text .values-lead > span{ white-space:normal; }
  .values-text .values-lead{ font-size:clamp(21px,4.6vw,28px); }
}
@media(max-width:600px){
  .values-text .values-body p,
  body.lang-en .values-text .values-body p{ font-size:16px; line-height:1.8; }
}

/* HISTORY — horizontal rail */
.history{ padding:116px 0 100px; background:#F6F7F8; }
.history-head{ margin-bottom:16px; padding:0 6vw; }
.history-head h2{ font-size:clamp(26px,3.2vw,38px); font-weight:800; letter-spacing:-0.02em; line-height:1.4; }
.history-head h2 .hl{ color:var(--accent); display:inline; }
.history-cue{ display:inline-flex; align-items:center; gap:8px; margin:0 6vw 18px;
  border:0; background:none; color:var(--grey); cursor:pointer; }
.history-cue .mono{ font-size:12px; letter-spacing:0.16em; }
.history-cue-arrows{ display:inline-flex; align-items:center; }
.history-cue-arrows svg{ margin-left:-8px; animation:historyCue 1.4s ease-in-out infinite; }
.history-cue-arrows svg:last-child{ animation-delay:.2s; opacity:0.45; }
@keyframes historyCue{ 0%,100%{ transform:translateX(0); opacity:0.35; } 50%{ transform:translateX(5px); opacity:1; } }
.history-rail-wrap{ position:relative; }
.history-rail-wrap::before,
.history-rail-wrap::after{ content:""; position:absolute; top:0; bottom:56px; width:72px; z-index:2; pointer-events:none;
  transition:opacity .25s; }
.history-rail-wrap::before{ left:0; background:linear-gradient(90deg,#F6F7F8,transparent); opacity:0; }
.history-rail-wrap::after{ right:0; background:linear-gradient(270deg,#F6F7F8,transparent); }
.history-rail-wrap.is-start::before{ opacity:0; }
.history-rail-wrap.is-end::after{ opacity:0; }
.history-rail-wrap:not(.is-start)::before{ opacity:1; }
.history-rail{ overflow-x:auto; overflow-y:hidden; cursor:grab; padding:16px 0 72px;
  scrollbar-width:thin; scrollbar-color:#c5c9d0 transparent; user-select:none; }
.history-rail.is-drag, .history-rail:active{ cursor:grabbing; }
.history-rail::-webkit-scrollbar{ height:6px; }
.history-rail::-webkit-scrollbar-thumb{ background:#c5c9d0; border-radius:99px; }
.timeline{ list-style:none; display:flex; gap:72px; position:relative; margin:0; padding:8px 6vw 96px 6vw; width:max-content; }
.timeline::before{ content:""; position:absolute; left:0; right:0; height:2px; background:#D5D8DE;
  top:calc(8px + 24px + 12px + 5.5px - 1px); }
.timeline > li{ flex:0 0 320px; padding:0; position:relative; z-index:1;
  transform-origin:0 41.5px; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.timeline > li:hover{ transform:scale(1.08); z-index:3; }
.t-year{ font-family:'JetBrains Mono',monospace; font-size:24px; font-weight:700; line-height:1; height:24px;
  color:var(--accent); letter-spacing:-0.03em; margin:0; padding:0 0 23px; display:block; position:relative;
  box-sizing:content-box; }
.t-year::after{ content:""; position:absolute; left:0; bottom:0; width:11px; height:11px; margin:0; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px #F6F7F8; }
.t-items{ display:flex; flex-direction:column; gap:20px; padding-top:40px; }
.t-item{ display:grid; grid-template-columns:36px 1fr; gap:10px; align-items:start; }
.t-date{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--grey); padding-top:4px; }
.t-title{ font-size:17px; font-weight:700; line-height:1.55; color:var(--ink); }
.t-sub{ margin-top:4px; font-size:14px; line-height:1.65; color:var(--grey); }
@media(max-width:700px){
  .timeline > li{ flex-basis:260px; }
}

/* LOCATION */
.location{ padding:100px 6vw; }
.page-company .location{ height:auto; min-height:calc(100dvh - 96px); padding:116px 6vw 36px;
  box-sizing:border-box; display:flex; flex-direction:column; overflow:visible; }
.loc-head{ margin-bottom:50px; }
.page-company .loc-head{ margin-bottom:16px; flex-shrink:0; }
.loc-head h2{ font-size:clamp(28px,3.4vw,42px); font-weight:800; letter-spacing:-0.02em; }
.loc-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,1fr); gap:16px; align-items:stretch; }
.page-company .loc-grid{ flex:0 1 auto; width:100%; min-height:0; }
.loc-map{ position:relative; width:100%; height:auto; min-height:0; align-self:stretch; border-radius:18px; overflow:hidden; background:#EEF0F2; }
.page-company .loc-map{ height:100%; }
.loc-map .root_daum_roughmap{ width:100% !important; max-width:none !important; height:100% !important; min-height:100% !important; }
.loc-map .root_daum_roughmap .wrap_map{ width:100% !important; max-width:none !important; height:100% !important; min-height:100% !important; }
.loc-map .root_daum_roughmap > *:not(.wrap_map){ display:none !important; height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; }
.loc-map-gate{ position:absolute; inset:0; z-index:6; border:0; padding:0; cursor:pointer;
  background:transparent; color:transparent; font:inherit; }
.loc-map-gate:hover{ background:rgba(17,18,20,0.04); }
.loc-map-gate:hover::after{ content:"클릭하여 지도 확대 · 이동"; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); padding:10px 16px; border-radius:999px;
  background:rgba(17,18,20,0.62); color:#fff; font-size:13px; font-weight:600; letter-spacing:-0.02em;
  white-space:nowrap; pointer-events:none; }
.loc-map.is-live{ box-shadow:inset 0 0 0 2px var(--accent); }
.loc-map.is-live .loc-map-gate{ display:none; }
.loc-info{ display:flex; flex-direction:column; justify-content:flex-start; gap:10px; min-height:0; padding:4px 4px 4px 8px; box-sizing:border-box; }
.loc-info a{ color:var(--accent); }
.loc-block{ background:#F3F5F8; border-radius:16px; padding:12px 16px; }
.loc-table{ width:100%; border-collapse:collapse; }
.loc-table th{ width:5.4em; text-align:left; vertical-align:top; font-weight:400; padding:6px 12px 6px 0; white-space:nowrap; }
.loc-table td{ vertical-align:middle; font-size:16px; color:var(--grey); line-height:1.55; padding:6px 0; }
.loc-tag{ display:inline-block; min-width:68px; padding:8px 14px; border-radius:8px; background:#fff;
  color:var(--ink); font-size:15px; font-weight:700; text-align:center;
  letter-spacing:-0.02em; line-height:1.2; box-sizing:border-box; }
.loc-info .ln{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:50%; color:#fff; font-size:11px; font-weight:700; font-style:normal; font-family:'JetBrains Mono',monospace;
  line-height:1; letter-spacing:0; margin-right:5px; vertical-align:middle; overflow:hidden; box-sizing:border-box; }
.ln2{ background:#00A84D; }
.ln5{ background:#A64AC7; }
.ln7{ background:#747F00; }
.loc-info .bus{ display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; margin-right:8px;
  padding:3px 4px; border-radius:4px; color:#fff; font-size:12px; font-weight:700; text-align:center;
  box-sizing:border-box; vertical-align:middle; }
.bus-nos{ font-size:15px; letter-spacing:-0.02em; white-space:normal; font-variant-numeric:tabular-nums; }
.b-air{ background:#C45C26; }
.b-trunk{ background:#3D5AFE; }
.b-branch{ background:#2E7D32; }
.b-direct{ background:#E53935; }
@media(max-width:1100px){
  .loc-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media(max-width:860px){
  .page-company .location{ height:auto; min-height:0; overflow:visible; padding-top:104px; }
  .loc-grid{ grid-template-columns:minmax(0,1fr); }
  .loc-map{ height:280px; min-height:280px; }
  .page-company .loc-map{ height:280px; }
  .loc-info{ padding:0; }
}
@media(max-width:600px){
  .location,
  .page-company .location{ padding-left:5vw; padding-right:5vw; }
  .loc-block{ padding:10px 12px; }
  .loc-table th{ width:auto; padding-right:10px; }
  .loc-tag{ min-width:56px; padding:6px 10px; font-size:14px; }
  .loc-table td{ font-size:15px; }
  .bus-nos{ font-size:14px; }
}

/* TECHNOLOGY */
.tech-intro,
.tech-block,
.tech-item,
.tech-switch,
.tech-panel,
.ip-sec{ scroll-margin-top:0; }
.tech-first{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; position:relative; }
.tech-first .n-hero{ height:50vh; min-height:320px; flex-shrink:0; }
.tech-intro{ flex:1; min-height:0; box-sizing:border-box; padding:8px 6vw 72px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.tech-intro .tech-lead{ margin:0; }
.tech-scroll-cue{ color:var(--grey); }
.tech-switch{ padding:116px 6vw 24px; min-height:100vh; min-height:100dvh;
  box-sizing:border-box; display:flex; flex-direction:column; overflow:visible; }
.tech-main{ width:100%; margin:0 auto; flex:1; min-height:0; display:flex; flex-direction:column; align-items:stretch; position:relative; }
.tech-lead{ font-size:clamp(28px,3.55vw,44px); font-weight:700; letter-spacing:-0.02em; line-height:1.45; word-break:keep-all; margin:0 0 40px; }
.tech-lead > span{ display:block; white-space:nowrap; }
.tech-lead .hl,
.product-quote .hl,
.values-text .values-lead .hl,
.history-head h2 .hl,
.ip-head h2 .hl,
.tech-head h2 .hl,
.about h2 .highlight,
.s-head h2 .highlight{
  color:var(--accent); font-weight:800; font-size:1.18em; display:inline-block; position:relative;
}
.values-text .values-lead .hl{ font-size:1em; display:inline; }
.tech-lead .hl{ font-size:1.38em; }
.tech-lead .hl::after,
.product-quote .hl::after,
.s-head h2 .highlight::after{
  content:""; position:absolute; left:0; right:0; bottom:.04em; height:.12em;
  background:var(--accent); transform:scaleX(0); transform-origin:left center; opacity:.4; pointer-events:none;
}
.tech-lead.is-in .hl,
.product-quote p.is-in .hl,
.s-head.is-in .highlight{ animation:tech-hl-pop .7s cubic-bezier(.16,1,.3,1) both; }
.tech-lead.is-in .hl:nth-of-type(2),
.product-quote p.is-in > span:nth-child(2) .hl,
.s-head.is-in .highlight:nth-of-type(2){ animation-delay:.16s; }
.tech-lead.is-in .hl::after,
.product-quote p.is-in .hl::after,
.s-head.is-in .highlight::after{ animation:tech-hl-line .65s cubic-bezier(.16,1,.3,1) .28s both; }
.tech-lead.is-in .hl:nth-of-type(2)::after,
.product-quote p.is-in > span:nth-child(2) .hl::after,
.s-head.is-in .highlight:nth-of-type(2)::after{ animation-delay:.44s; }
@keyframes tech-hl-pop{ from{ transform:translate3d(0,10px,0) scale(.96); } to{ transform:none; } }
@keyframes tech-hl-line{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce){
  .tech-lead.is-in .hl, .tech-lead.is-in .hl::after,
  .product-quote p.is-in .hl, .product-quote p.is-in .hl::after,
  .s-head.is-in .highlight, .s-head.is-in .highlight::after{ animation:none; }
  .tech-lead .hl::after,
  .product-quote .hl::after,
  .s-head h2 .highlight::after{ transform:scaleX(1); }
}
.tech-core-head{ font-size:clamp(26px,3.2vw,38px); font-weight:700; letter-spacing:-0.02em; line-height:1.4; margin:0; text-align:center; width:100%; flex-shrink:0; word-break:keep-all; }
.tech-tabs{ display:flex; flex-wrap:wrap; gap:12px 20px; margin:40px 0 0; justify-content:flex-start; width:100%; flex-shrink:0; position:relative; z-index:2; }
.tech-tab{ flex:1; min-width:0; text-align:center; border:1px solid var(--line-soft); background:#fff; color:var(--grey); padding:10px 20px;
  font-size:15px; font-weight:600; letter-spacing:-0.01em; cursor:pointer; }
.tech-tab.is-on{ border-color:var(--ink); background:var(--ink); color:#fff; }
.tech-panel{ display:none; margin-top:44px; width:100%; flex:1; min-height:0; }
.tech-panel.is-on{ display:flex; flex-direction:column; overflow:visible; }
.tech-body{ display:flex; flex-direction:column; flex:1; min-height:0; overflow:visible; }
.tech-split{ display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,0.68fr); gap:24px 36px; align-items:stretch;
  flex:0 0 auto; min-height:0; padding:12px 0; box-sizing:border-box; }
.tech-split:not(:has(.tech-fig)){ grid-template-columns:1fr; }
.tech-panel > p{ max-width:none; width:100%; }
.tech-panel p{ font-size:18px; color:var(--grey); line-height:1.8; word-break:keep-all; text-align:justify; text-justify:inter-character; }
.tech-panel p + p{ margin-top:12px; }
.tech-panel p b{ color:var(--ink); font-weight:700; }
.tech-panel ul{ margin:0; padding:0; list-style-position:inside; }
.tech-panel li{ font-size:18px; color:var(--grey); line-height:1.8; word-break:keep-all; }
.tech-panel li + li{ margin-top:12px; }
.tech-intro-block,
.tech-feats{ width:100%; max-width:none; }
.tech-intro-block{ display:flex; flex-direction:column; justify-content:center; min-height:0; height:100%; }
.tech-intro-block h4,
.tech-feats h4{ font-size:24px; font-weight:800; letter-spacing:-0.02em; margin:0 0 16px; text-align:left; }
.tech-intro-block ul{ margin:0; padding:0 0 0 1.15em; width:100%; list-style:disc; list-style-position:outside; }
.tech-intro-block li{ font-size:17px; line-height:1.75; text-align:justify; text-justify:inter-character; }
.tech-fig{ margin:0; width:100%; height:100%; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.tech-fig.reveal{ transform:none; }
.tech-intro-block h4.reveal,
.tech-intro-block li.reveal,
.tech-feats h4.reveal,
.tech-feat.reveal{
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),
              transform 1.1s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms); }
.tech-intro-block li.reveal{ transform:translate3d(0,22px,0); }
.tech-fig img{ display:block; width:auto; height:auto; max-width:100%; max-height:calc(38vh - 24px); object-fit:contain; object-position:center;
  image-rendering:auto; }
.tech-feats{ margin-top:36px; flex-shrink:0; }
.tech-feat-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 36px; }
.tech-feat{ padding-top:16px; border-top:1.5px solid var(--ink); }
.tech-feat.reveal{ transform:translate3d(0,28px,0); }
.tech-feat.reveal.is-in:hover{ transform:translateY(-4px); }
.tech-feat .n{ display:block; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--accent); margin-bottom:10px; }
.tech-feat h5{ font-size:18px; font-weight:800; letter-spacing:-0.02em; margin:0 0 10px; line-height:1.4; word-break:keep-all; }
.tech-feat h5:empty{ display:block; min-height:1.4em; }
.tech-feat p{ font-size:16px; color:var(--grey); line-height:1.7; word-break:keep-all; text-align:left; }
.tech-feat p:empty{ min-height:0; }
.tech-block{ padding:120px 6vw 100px; }
.tech-head{ margin-bottom:36px; }
.tech-head .num{ display:block; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--grey); margin-bottom:10px; }
.tech-head h2{ font-size:clamp(26px,3.2vw,38px); font-weight:700; letter-spacing:-0.02em; line-height:1.4; word-break:keep-all; }
.tech-head h2 .hl{ color:var(--accent); }
.tech-list{ display:flex; flex-direction:column; }
.tech-item{ display:grid; grid-template-columns:minmax(180px,240px) minmax(0,1fr); gap:32px; padding:36px 0;
  border-top:1px solid var(--line-soft); align-items:start; }
.tech-item:last-child{ border-bottom:1px solid var(--line-soft); }
.tech-item h3{ font-size:21px; font-weight:800; letter-spacing:-0.01em; line-height:1.4; }
.tech-desc p{ font-size:17px; color:var(--grey); line-height:1.75; word-break:keep-all; }
.tech-desc p + p{ margin-top:10px; }
.tech-desc p b{ color:var(--ink); font-weight:700; }
.ip-sec{ height:calc(100vh - 96px); height:calc(100dvh - 96px); min-height:calc(100vh - 96px); min-height:calc(100dvh - 96px); box-sizing:border-box;
  padding:116px 6vw 28px; background:#F6F7F8; display:flex; flex-direction:column; overflow:hidden; }
.ip-head{ margin-bottom:12px; flex-shrink:0; }
.ip-head h2{ font-size:clamp(26px,3.2vw,38px); font-weight:700; letter-spacing:-0.02em; line-height:1.4; word-break:keep-all; }
.ip-head h2 .hl{ color:var(--accent); display:inline; }
.ip-tabs{ display:flex; gap:8px; margin-top:40px; margin-bottom:0; }
.ip-tab{ border:1px solid var(--line-soft); background:#fff; color:var(--grey); padding:8px 20px;
  font-size:15px; font-weight:600; letter-spacing:-0.01em; cursor:pointer; }
.ip-tab.is-on{ border-color:var(--ink); background:var(--ink); color:#fff; }
.ip-panel{ display:none; flex:1; min-height:0; }
.ip-panel.is-on{ display:flex; flex-direction:column; }
.ip-marquee{ overflow:hidden; width:100%; flex:1; min-height:0; cursor:grab; user-select:none; touch-action:pan-y;
  display:flex; align-items:center; }
.ip-marquee.is-drag{ cursor:grabbing; }
.ip-rail{ display:flex; align-items:center; gap:28px; width:max-content; height:86%; will-change:transform; }
.ip-rail img{ height:100%; width:auto; max-width:none; max-height:100%; object-fit:contain; display:block;
  background:#fff; box-shadow:0 10px 32px rgba(17,18,20,0.08); pointer-events:none; -webkit-user-drag:none; }
/* PRODUCT — CryptoNix */
.product{ padding:0 6vw 0; scroll-margin-top:0; }
.product-open{ min-height:calc(100dvh + 8px); box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-start; gap:32px;
  position:relative; padding:148px 0 40px; }
.product-head .num{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--accent); letter-spacing:0.08em; }
.product-head h2{ margin-top:14px; font-size:clamp(32px,3.8vw,48px); font-weight:800; letter-spacing:-0.03em; line-height:1.25; }
.product-lead{ margin-top:22px; max-width:44em; font-size:21px; line-height:1.75; color:var(--grey); word-break:keep-all; }
.product-intro{ position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,0.9fr); gap:52px; align-items:center; margin-top:0; }
.product-open .product-scroll{ position:absolute; top:auto; bottom:calc(100% - 36px); z-index:4; color:var(--grey); }
.product-fig{ margin:0; padding:16px; background:#F3F5F8; border-radius:16px; }
.product-fig img{ width:100%; height:auto; display:block; border-radius:0; }
.product-why h3,
.product-block h3{ font-size:28px; font-weight:800; letter-spacing:-0.02em; word-break:keep-all; }
.product-why{ align-self:start; padding-top:32px; }
.product-why h3{ font-size:34px; margin-top:0; margin-bottom:20px; }
.product-why p,
.product-card p,
.product-trait p{ font-size:16px; color:var(--grey); line-height:1.8; word-break:keep-all; overflow-wrap:break-word; }
.product-why p{ font-size:18px; line-height:1.8; text-align:justify; text-justify:inter-character; text-align-last:auto; }
.product-why b{ color:var(--ink); font-weight:800; }
.product-why p + p{ margin-top:16px; }
.product-snap{ min-height:calc(100dvh - 96px); box-sizing:border-box; scroll-margin-top:96px; }
.product-quote{ display:flex; align-items:center; margin:0 -6vw; padding:72px 6vw; border:0; background:#F6F7F8; }
.product-band,
.product-traits{ display:flex; flex-direction:column; justify-content:center; }
.product-traits{ margin:0 -6vw; padding:0 6vw; background:#F6F7F8; }
.product-quote p{ max-width:none; margin:0; font-size:clamp(20px,3vw,40px); font-weight:700; letter-spacing:-0.02em; line-height:1.45; color:var(--ink); word-break:keep-all;
  display:flex; flex-direction:column; align-items:flex-start; gap:0.85em; }
.product-quote p > span{ white-space:nowrap; }
.product-card p + p,
.product-trait p + p{ margin-top:14px; }
.product-band{ margin:0; padding:0; background:#fff; }
.product-block h3{ margin-bottom:28px; }
.product-band > h3{ font-size:34px; margin-bottom:36px; }
.product-band > h3::after{ content:""; display:block; width:52px; height:1.5px; background:var(--ink); margin-top:16px; }
.product-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.product-traits .product-grid{ gap:28px 72px; }
.product-card{ padding:40px 36px 44px; background:#F6F7F8; border-radius:16px;
  border-top:2px solid var(--ink);
  transition:transform .45s cubic-bezier(.22,1,.36,1); }
.product-card.reveal,
.product-trait.reveal{ transform:translate3d(0,28px,0); }
.product-card.reveal.is-in,
.product-trait.reveal.is-in{ transform:none; }
.product-card.reveal.is-in:hover{ transform:translateY(-6px); }
.product-card .n,
.product-trait .n{ display:block; font-family:'JetBrains Mono',monospace; font-size:28px; font-weight:500;
  color:var(--accent); letter-spacing:-0.04em; margin-bottom:16px; }
.product-card h4,
.product-trait h4{ font-size:20px; font-weight:800; letter-spacing:-0.02em; margin:0 0 14px; line-height:1.4; }
.product-card h4{ font-size:24px; margin:0 0 18px; }
.product-card p{ font-size:17px; line-height:1.8; }
.product-more{ display:inline-flex; align-self:flex-start; margin-top:48px; border:1.5px solid var(--ink); padding:14px 28px;
  font-size:15px; font-weight:600; letter-spacing:-0.01em; transition:background .2s, color .2s; }
.product-more:hover{ background:var(--ink); color:#fff; }
@media(max-width:860px){
  .product{ padding:0 5vw 0; }
  .product-quote,
  .product-traits{ margin-left:-5vw; margin-right:-5vw; padding-left:5vw; padding-right:5vw; }
  .product-open{ min-height:0; padding:88px 0 48px; }
  .product-intro,
  .product-grid{ grid-template-columns:1fr; }
  .product-quote p{ font-size:24px; line-height:1.5; }
  .product-quote p > span{ white-space:normal; }
  .product-card{ padding:28px 22px 32px; }
  .product-traits .product-grid{ gap:36px; }
}

/* CONTRACT — product inquiry */
.n-hero-contract .n-hero-art{ background:#1c1e22; }
.n-hero-contract .n-hero-art img{ object-position:center center; }
.contract{ max-width:1120px; margin:0 auto; padding:36px 6vw 24px; }
.contract-head{ margin-bottom:36px; }
.contract-head .eyebrow{ font-family:'JetBrains Mono','Pretendard Variable', Pretendard, monospace; font-size:12.5px; color:var(--accent); font-weight:700; letter-spacing:0.06em; }
.contract-head h1{ margin-top:12px; font-size:clamp(32px,4vw,48px); font-weight:800; letter-spacing:-0.03em; line-height:1.25; }
.contract-lead{ margin-top:14px; max-width:42em; font-size:17px; line-height:1.7; color:var(--grey); }
.contract-alert{ margin-bottom:22px; padding:14px 16px; border:1px solid #f0c2c2; background:#fff6f6; color:#9b1c1c; font-size:14px; line-height:1.55; }
.contract-form{ border-bottom:1px solid var(--line-soft); }
.cf-row{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:12px 28px; align-items:center; padding:18px 0; border-top:1px solid var(--line-soft); }
.cf-row:first-child{ border-top:1.5px solid var(--ink); }
.cf-row.is-top{ align-items:start; }
.cf-row.is-top .cf-label{ padding-top:12px; }
.cf-split{ grid-template-columns:132px minmax(0,1fr) 132px minmax(0,1fr); }
.cf-label{ font-size:15px; font-weight:700; letter-spacing:-0.02em; }
.cf-label .req{ color:var(--accent); margin-left:2px; }
.cf-field input[type="text"],
.cf-field input[type="email"],
.cf-field input[type="tel"],
.cf-field textarea{ width:100%; border:1px solid var(--line-soft); background:#fff; color:var(--ink);
  padding:12px 14px; font:inherit; font-size:15px; border-radius:0; }
.cf-field textarea{ min-height:168px; resize:vertical; line-height:1.65; }
.cf-field input:focus,
.cf-field textarea:focus{ outline:none; border-color:var(--ink); }
.cf-field input::placeholder,
.cf-field textarea::placeholder{ color:#9a9da4; }
.cf-types{ display:flex; flex-wrap:wrap; gap:8px; }
.cf-types label{ position:relative; border:1px solid var(--line-soft); padding:8px 16px; cursor:pointer;
  font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--grey); }
.cf-types input{ position:absolute; opacity:0; width:1px; height:1px; }
.cf-types label:has(input:checked){ border-color:var(--ink); background:var(--ink); color:#fff; }
.cf-types label:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
.cf-file{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cf-file-name{ font-size:14px; color:var(--grey); margin-right:4px; }
.cf-file-pick,
.cf-file-clear{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--ink); background:#fff; color:var(--ink); font:inherit; font-size:13px; font-weight:600;
  padding:8px 14px; cursor:pointer; }
.cf-file-pick input{ position:absolute; inset:0; opacity:0; cursor:pointer; font-size:0; }
.cf-file-pick:hover,
.cf-file-clear:hover{ background:var(--ink); color:#fff; }
.cf-file-hint{ margin-top:8px; font-size:12px; color:var(--grey); }
.cf-captcha{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cf-captcha-code{ font-family:'JetBrains Mono',monospace; letter-spacing:0.22em; font-size:18px; font-weight:500;
  background:#F4F5F6; border:1px solid var(--line-soft); padding:11px 16px; }
.cf-field .cf-captcha input{ width:180px; }
.cf-privacy{ max-height:168px; overflow:auto; border:1px solid var(--line-soft); background:#FAFAFB;
  padding:16px 18px; font-size:13px; line-height:1.7; color:var(--grey); }
.cf-privacy strong{ color:var(--ink); font-weight:700; }
.cf-privacy p + p{ margin-top:8px; }
.cf-agree{ display:flex; align-items:center; gap:8px; margin-top:12px; font-size:15px; font-weight:600; cursor:pointer; }
.cf-agree input{ width:16px; height:16px; accent-color:var(--ink); }
.cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cf-submit{ display:block; margin:32px auto 0; min-width:200px; border:0; background:var(--ink); color:#fff;
  padding:16px 40px; font:inherit; font-size:15px; font-weight:600; letter-spacing:-0.01em; cursor:pointer; }
.cf-submit:hover{ background:var(--accent); }
.cf-submit:disabled{ opacity:0.55; cursor:default; }
.contract-aside{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 28px;
  margin-top:56px; padding-top:28px; border-top:1px solid var(--line-soft); }
.contract-aside span{ display:block; margin-bottom:6px; font-size:13px; font-weight:700; letter-spacing:-0.02em; }
.contract-aside li{ font-size:15px; color:var(--grey); line-height:1.65; }
.contract-aside a{ color:var(--accent); }
.cf-modal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(17,18,20,0.45); }
.cf-modal-card{ width:min(420px,100%); background:#fff; padding:40px 32px 32px; text-align:center; }
.cf-modal-card p{ font-size:18px; font-weight:700; letter-spacing:-0.02em; line-height:1.5; }
.cf-modal-ok{ display:inline-block; margin-top:24px; min-width:120px; background:var(--ink); color:#fff;
  padding:12px 28px; font-size:14px; font-weight:600; }
.cf-modal-ok:hover{ background:var(--accent); }
@media(max-width:860px){
  .cf-row,
  .cf-split{ grid-template-columns:1fr; gap:8px; }
  .cf-row.is-top .cf-label{ padding-top:0; }
  .contract-aside{ grid-template-columns:1fr; }
  .cf-field .cf-captcha input{ width:100%; }
}
@media(max-width:860px){
  .tech-lead > span{ white-space:normal; }
  .tech-switch{ height:auto; overflow:visible; min-height:0; }
  .tech-pack{ height:auto; min-height:0; overflow:visible; }
  .tech-body{ grid-template-columns:1fr; }
  .tech-split{ grid-template-columns:1fr; }
  .tech-feat-grid{ grid-template-columns:1fr; }
  .tech-fig{ height:auto; min-height:200px; }
  .tech-fig img{ height:auto; max-height:none; }
  .tech-item{ grid-template-columns:1fr; gap:12px; }
  .tech-switch{ padding:104px 5vw 64px; }
  .tech-intro{ padding-left:5vw; padding-right:5vw; }
  .tech-panel{ margin-top:32px; }
  .tech-intro-block{ height:auto; }
  .ip-sec,
  body.lang-en .ip-sec{ height:auto; min-height:0; overflow:visible; padding:104px 5vw 48px; }
  .ip-tabs{ margin-top:28px; }
  .ip-marquee,
  body.lang-en .ip-marquee{ flex:none; height:clamp(260px,72vw,440px); margin-top:24px; }
}
@media(max-width:600px){
  .tech-tab{ flex:1 1 100%; }
  .tech-panel p,
  .tech-panel li,
  .tech-intro-block li{ font-size:16px; }
  .tech-intro-block li{ text-align:left; }
}

/* Small screens: desktop line breaks inside headings/lead copy just create ragged lines */
@media(max-width:600px){
  .s-head h2 br,
  .about h2 br,
  .about .text p br,
  .history-head h2 br,
  .ip-head h2 br,
  .t-title br{ display:none; }
  .services,
  .about,
  .news{ padding-left:5vw; padding-right:5vw; }
  .services{ padding-top:96px; }
  .s-head{ margin-bottom:40px; }
  .s-item p,
  .values-body p,
  .product-why p{ text-align:left; }
  .about-copy{ padding-top:24px; }
  .history{ padding-top:88px; }
  .history-head,
  .timeline{ padding-left:5vw; padding-right:5vw; }
  .history-cue{ margin-left:5vw; margin-right:5vw; }
  .product-lead{ font-size:18px; }
  .product-why h3,
  .product-band > h3{ font-size:26px; }
  .contract{ padding-left:5vw; padding-right:5vw; }
  .cf-submit{ width:100%; }
}

/* ENGLISH — uses the same type scale as Korean. Only what Latin text genuinely needs differs:
   tighter leading on large headings, normal word breaking, and a few wider label columns. */
body.lang-en{ word-break:normal; overflow-wrap:break-word; }
body.lang-en h1,
body.lang-en h2,
body.lang-en h3{ text-wrap:balance; }
/* News titles are long sentences: balancing leaves every line short, so fill the width instead. */
body.lang-en .a-head h1,
body.lang-en .news-card .t,
body.lang-en .news-row .title{ text-wrap:pretty; }
body.lang-en .a-head h1{ font-size:clamp(26px,2.8vw,36px); line-height:1.35; }
body.lang-en .hero h1{ max-width:min(22em,84vw); line-height:1.2; letter-spacing:-0.03em; }
body.lang-en .hero .sub{ max-width:40em; }
body.lang-en .about h2,
body.lang-en .s-head h2,
body.lang-en .history-head h2,
body.lang-en .ip-head h2,
body.lang-en .tech-lead,
body.lang-en .tech-core-head,
body.lang-en .product-quote p{ line-height:1.3; letter-spacing:-0.025em; }
body.lang-en .tech-lead > span,
body.lang-en .about .text p b{ white-space:normal; }

/* Home services: titles are two fixed lines, so the title column fits the longest one */
body.lang-en .s-head{ margin-bottom:64px; }
body.lang-en .s-grow{ grid-template-columns:340px minmax(0,1fr); gap:40px; }
body.lang-en .s-item{ padding:24px 0; gap:40px; }
@media(min-width:761px){
  body.lang-en .s-item h3{ white-space:nowrap; }
}
@media(max-width:760px){
  body.lang-en .s-item,
  body.lang-en .s-grow{ grid-template-columns:1fr; gap:10px; }
}
/* Company */
body.lang-en .values{ align-items:center; }
body.lang-en .values-text{ padding-bottom:0; align-self:center; gap:10px; }
body.lang-en .values-text .values-lead{ letter-spacing:-0.015em; }
@media (min-width:901px){
  body.lang-en .values{ align-items:start; }
  body.lang-en .values-text{ align-self:center; justify-content:flex-start; padding:128px 0 0; }
}
body.lang-en .timeline > li{ flex-basis:380px; }
body.lang-en.page-company .location{ height:auto; min-height:calc(100dvh - 96px); overflow:visible; }
body.lang-en.page-company .loc-map{ height:auto; min-height:420px; }
body.lang-en .loc-head{ margin-bottom:16px; }
body.lang-en .loc-table th{ width:7em; }
body.lang-en .loc-tag{ min-width:88px; }
body.lang-en .loc-info .bus{ width:64px; min-width:64px; }
body.lang-en .loc-map-gate:hover::after{ content:"Click to explore the map"; }

/* Technology */
body.lang-en .tech-switch{ height:auto; min-height:100dvh; overflow:visible; padding-bottom:80px; }
body.lang-en .tech-panel.is-on,
body.lang-en .tech-body{ overflow:visible; }
body.lang-en .tech-split{ max-height:none; height:auto; }
body.lang-en .tech-panel{ margin-top:28px; }
body.lang-en .tech-tabs{ margin-top:28px; }
body.lang-en .tech-tab{ line-height:1.35; padding:10px 12px; white-space:normal; }
body.lang-en .tech-feats{ margin-top:32px; }
body.lang-en .ip-sec{ height:auto; min-height:calc(100dvh - 96px); overflow:visible; }
body.lang-en .ip-marquee{ flex:none; height:clamp(360px,52vh,560px); }
body.lang-en .ip-rail{ height:86%; }

/* Product */
body.lang-en .product-quote p > span{ white-space:normal; }
body.lang-en .product-quote p{ max-width:32em; }

/* Contract */
body.lang-en .cf-row{ grid-template-columns:168px minmax(0,1fr); }
body.lang-en .cf-split{ grid-template-columns:168px minmax(0,1fr) 120px minmax(0,1fr); }
@media(max-width:860px){
  body.lang-en .cf-row,
  body.lang-en .cf-split{ grid-template-columns:1fr; }
  body.lang-en.page-company .loc-map{ min-height:280px; }
}
/* BODY COPY ALIGNMENT — one rule for every page and both languages.
   Left-aligned: Korean wraps whole words only (keep-all), so justify would open wide gaps.
   text-wrap:pretty keeps a single word from being stranded on the last line.
   News articles (.a-body) keep their own justified setting since they break words normally. */
.about .text p,
.s-item p,
.values-body p,
.tech-panel p,
.tech-panel li,
.tech-intro-block li,
.tech-feat p,
.product-lead,
.product-why p,
.product-card p,
.product-trait p,
.contract-lead,
body.lang-en .values-body p{ text-align:left; text-align-last:auto; text-wrap:pretty; }/* Home intro paragraph: even line lengths, so no phrase is left alone on the last line. */
.about .text p{ text-wrap:balance; }
.about .text p + p{ margin-top:14px; }
/* Preferred line break in the home intro, switched on by hero.js only when it fits. */
.about .text p br.fit-break{ display:none; }
.about .text p.use-break br.fit-break{ display:inline; }
/* Technology intro: space between its two lines (both languages). */
.tech-lead > span + span{ margin-top:0.45em; }
/* Company intro: the photo grows with the text column, so the text never runs past the photo. */
@media (min-width:901px){
  .values,
  body.lang-en .values{ align-items:stretch; }
  .values-photo{ height:auto; min-height:min(64vh,600px); }
}
@media (min-width:901px){
  .values-text{ margin-bottom:-80px; } /* cancels the body's translateY(-80px) so the photo ends with the text */
}
/* Line breaks set by hand in home service descriptions only apply on wide screens. */
@media(max-width:1599px){ .s-item p br{ display:none; } }
@media(min-width:1440px){ .s-item p br.br-from-1440{ display:inline; } } /* short first line: fits from 1440px */
/* Company: heading + headline fit in the first screen; the body appears on scroll. */
@media (min-width:901px){
  .page-company .n-hero{ height:42vh; min-height:280px; }
  /* Taller windows get more room above the heading; short ones keep the headline in view. */
  .company-about{ padding-top:clamp(48px, 14vh, 160px); }
}
/* Company "About" fits one screen below the nav: photo height follows the window,
   and short windows get slightly tighter text. */
@media (min-width:901px){
  .values-photo{ min-height:max(340px, min(calc(100vh - 250px), 600px)); }
  .about-head{ margin-bottom:22px; }
}
@media (min-width:901px) and (max-height:820px){
  .values-text .values-lead{ font-size:clamp(20px, calc(1.2vw + 5px), 24px); line-height:1.45; }
  .values-text .values-body p,
  body.lang-en .values-text .values-body p{ font-size:15px; line-height:1.7; }
  .values-body p + p{ margin-top:0.6em; }
}
/* Company headline: exactly its 3 written lines. The font scales with the column so the
   longest line (~29.5em) fits; narrow columns fall back to normal wrapping. */
.values-text .values-lead{ font-size:clamp(20px, 3.38cqi, 30px); line-height:1.5; }
@container (min-width:600px){
  .values-text .values-lead > span{ display:block; white-space:nowrap; }
}
@media (min-width:901px){
  .values-text .values-lead{ transform:translateY(-14px); }
  .values-body{ transform:translateY(18px); }
  .values-text{ margin-bottom:18px; }
}
@media (min-width:901px) and (max-width:1100px){
  .values-text .values-lead{ font-size:18px; }
  .values-text .values-body p,
  body.lang-en .values-text .values-body p{ font-size:15px; line-height:1.7; }
}
@media (min-width:901px) and (max-height:760px){ /* short windows: keep the section on one screen */
  .values-text .values-lead{ transform:translateY(-84px); }
  .values-body{ transform:translateY(-52px); }
  .values-text{ margin-bottom:-52px; }
}
/* Company About body: justified, a size smaller. */
.values-text .values-body p,
body.lang-en .values-text .values-body p{ text-align:justify; text-justify:inter-character; text-align-last:left; font-size:16px; line-height:1.85; }
body.lang-en .values-text .values-body p{ text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }
@media (min-width:901px) and (max-width:1300px){
  .values-text .values-body p,
  body.lang-en .values-text .values-body p{ font-size:15px; line-height:1.8; }
}
@media (min-width:901px) and (max-height:820px){
  .values-text .values-body p,
  body.lang-en .values-text .values-body p{ font-size:15px; line-height:1.75; }
}
@media(max-width:600px){
  .values-text .values-body p,
  body.lang-en .values-text .values-body p{ text-align:left; font-size:15px; }
}
.values-text .values-body p{ text-wrap:wrap; } /* fill lines fully so justify stretches less */
@media (min-width:901px) and (min-height:761px){
  .values-photo{ margin-top:32px; } /* photo sits a little lower under the heading */
}
@media (min-width:901px) and (min-height:861px){
  .values-photo{ margin-top:56px; }
}
/* "회사 소개" heading moves down toward the photo; photo and text keep their on-screen spot
   (the heading's extra margin is taken back from the photo margin and text offsets). */
@media (min-width:901px) and (min-height:761px){
  .about-head{ margin-top:24px; }
  .values-photo{ margin-top:8px; }
  .values-text .values-lead{ transform:translateY(-38px); }
  .values-body{ transform:translateY(-6px); }
  .values-text{ margin-bottom:-6px; }
}
@media (min-width:901px) and (min-height:861px){
  .about-head{ margin-top:48px; }
  .values-photo{ margin-top:8px; }
  .values-text .values-lead{ transform:translateY(-62px); }
  .values-body{ transform:translateY(-30px); }
  .values-text{ margin-bottom:-30px; }
}
/* Company photo box trimmed from the top: it starts lower and keeps its bottom edge. */
@media (min-width:901px) and (min-height:761px){
  .values-photo{ margin-top:80px; min-height:max(280px, min(calc(100vh - 330px), 520px)); }
}
/* "회사 소개 / About" heading moved 60px further down toward the photo; photo and text stay put. */
@media (min-width:901px) and (min-height:761px){
  .about-head{ margin-top:84px; }
  .values-photo{ margin-top:20px; }
  .values-text .values-lead{ transform:translateY(-98px); }
  .values-body{ transform:translateY(-66px); }
  .values-text{ margin-bottom:-66px; }
}
@media (min-width:901px) and (min-height:861px){
  .about-head{ margin-top:108px; }
  .values-photo{ margin-top:20px; }
  .values-text .values-lead{ transform:translateY(-122px); }
  .values-body{ transform:translateY(-90px); }
  .values-text{ margin-bottom:-90px; }
}
@media (min-width:901px) and (max-height:700px){ .values-text .values-body p, body.lang-en .values-text .values-body p{ line-height:1.62; } }
.s-item p br.br-from-1900{ display:none; }
@media(min-width:1900px){ .s-item p br.br-from-1900{ display:inline; } } /* long first line: fits from 1900px */



/* ===== TECHNOLOGY layout A: figure on the left, overview + features stacked on the right =====
   Same look as before (black tabs, thin black rules); only the arrangement changes. */
@media (min-width:861px){
  .tech-body,
  body.lang-en .tech-body{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr); column-gap:56px;
    align-items:start; overflow:visible; }
  .tech-body .tech-split{ display:contents; }
  .tech-body .tech-fig{ grid-column:1; grid-row:1 / span 2; align-self:center; height:auto; min-height:0; }
  .tech-body .tech-fig img{ max-height:min(58vh, 540px); }
  .tech-body .tech-intro-block{ grid-column:2; grid-row:1; height:auto; justify-content:flex-start; }
  .tech-body .tech-feats,
  body.lang-en .tech-body .tech-feats{ grid-column:2; grid-row:2; margin-top:34px; }
  .tech-body .tech-feat-grid{ display:block; }
  .tech-body .tech-feat{ display:grid; grid-template-columns:30px minmax(0,1fr); column-gap:10px;
    padding:13px 0 14px; border-top:1px solid var(--line-soft); }
  .tech-body .tech-feat:first-child{ border-top:1.5px solid var(--ink); }
  .tech-body .tech-feat .n{ grid-row:1 / span 2; margin:3px 0 0; }
  .tech-body .tech-feat h5,
  body.lang-en .tech-body .tech-feat h5{ margin:0 0 4px; font-size:17px; }
  .tech-body .tech-feat p,
  body.lang-en .tech-body .tech-feat p{ font-size:15px; line-height:1.6; }
}
@media (min-width:861px) and (max-height:800px){
  .tech-switch,
  body.lang-en .tech-switch{ padding-top:108px; }
  .tech-tabs,
  body.lang-en .tech-tabs{ margin-top:26px; }
  .tech-panel,
  body.lang-en .tech-panel{ margin-top:26px; }
  .tech-body .tech-feats,
  body.lang-en .tech-body .tech-feats{ margin-top:24px; }
  .tech-body .tech-feat{ padding:10px 0 11px; }
}
/* Layout A sizing: wider text column; right-column text and gaps follow the window height. */
@media (min-width:861px){
  .tech-body,
  body.lang-en .tech-body{ grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); column-gap:48px; }
  .tech-body .tech-fig img{ max-height:min(54vh, 520px); }
  .tech-switch,
  body.lang-en .tech-switch{ padding-top:clamp(104px, 12vh, 116px); padding-bottom:20px; }
  .tech-tabs,
  body.lang-en .tech-tabs{ margin-top:clamp(18px, 3.4vh, 40px); }
  .tech-panel,
  body.lang-en .tech-panel{ margin-top:clamp(18px, 3.6vh, 44px); }
  .tech-intro-block h4,
  .tech-feats h4{ font-size:clamp(18px, 2.5vh, 24px); margin-bottom:clamp(8px, 1.3vh, 14px); }
  .tech-body .tech-intro-block li,
  body.lang-en .tech-body .tech-intro-block li{ font-size:clamp(14px, 1.85vh, 17px); line-height:1.62; }
  .tech-panel .tech-body li + li{ margin-top:clamp(4px, 0.9vh, 10px); }
  .tech-body .tech-feats,
  body.lang-en .tech-body .tech-feats{ margin-top:clamp(14px, 3vh, 34px); }
  .tech-body .tech-feat{ padding:clamp(7px, 1.25vh, 13px) 0 clamp(8px, 1.35vh, 14px); }
  .tech-body .tech-feat h5,
  body.lang-en .tech-body .tech-feat h5{ font-size:clamp(14.5px, 1.85vh, 17px); }
  .tech-body .tech-feat p,
  body.lang-en .tech-body .tech-feat p{ font-size:clamp(13px, 1.65vh, 15px); line-height:1.5; }
}
@media (min-width:861px) and (max-height:730px){
  body.lang-en .tech-body{ grid-template-columns:minmax(0,0.74fr) minmax(0,1.26fr); column-gap:36px; }
  body.lang-en .tech-body .tech-intro-block li{ line-height:1.5; }
  body.lang-en .tech-body .tech-feat p{ line-height:1.45; }
}
@media (min-width:861px) and (max-height:680px){ .tech-switch, body.lang-en .tech-switch{ padding-top:100px; } .tech-tabs, body.lang-en .tech-tabs{ margin-top:14px; } }

/* Technology tabs (option A): no boxes — bold text tabs on a thin baseline; the selected
   one gets a black underline, the same "black rule + thin rule" language as the features list. */
.tech-tabs,
body.lang-en .tech-tabs{ flex-wrap:nowrap; gap:0 32px; border-bottom:1px solid var(--line-soft); }
.tech-tab,
body.lang-en .tech-tab{ flex:1 1 0; min-width:0; margin-bottom:-1px; padding:12px 0 14px; background:none; border:0;
  border-bottom:2px solid transparent; border-radius:0; text-align:left; white-space:normal;
  font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-0.01em; color:#A3A7AE;
  transition:color .2s, border-color .2s; }
.tech-tab:hover{ color:var(--ink); }
.tech-tab.is-on{ background:none; color:var(--ink); border-color:transparent; border-bottom-color:var(--ink); }
.tech-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (min-width:861px) and (max-height:800px){
  .tech-tab,
  body.lang-en .tech-tab{ padding:9px 0 11px; font-size:16px; }
}
@media(max-width:600px){
  .tech-tabs,
  body.lang-en .tech-tabs{ flex-direction:column; gap:0; border-bottom:0; }
  .tech-tab,
  body.lang-en .tech-tab{ flex:none; margin:0; padding:13px 0; border-bottom:1px solid var(--line-soft); font-size:16px; }
  .tech-tab.is-on{ border-bottom:2px solid var(--ink); }
}
@media (min-width:861px) and (max-height:730px){ .tech-tab, body.lang-en .tech-tab{ padding:8px 0 10px; } }

/* Technology section speaks the same language as the other pages:
   left-aligned section heading in the shared heading style, overview as plain paragraphs. */
.tech-core-head{ text-align:left; font-size:clamp(28px,3.4vw,42px); font-weight:800; letter-spacing:-0.02em; line-height:1.3; }
@media (min-width:861px) and (max-height:800px){
  .tech-core-head{ font-size:clamp(26px, 4.4vh, 36px); }
}
.tech-intro-block ul,
.tech-body .tech-intro-block ul{ list-style:none; padding:0; margin:0; }
.tech-intro-block li{ padding-left:0; }

/* ===== TECHNOLOGY editorial style (option 3) =====
   Numbered text tabs, the selected technology's name as a large heading, plain overview text,
   big accent numbers for the features, and the diagram in a thin frame. No boxes or fills. */
.tech-tabs,
body.lang-en .tech-tabs{ counter-reset:techtab; border-bottom:0; gap:0 40px; }
.tech-tab,
body.lang-en .tech-tab{ display:flex; align-items:baseline; gap:10px; padding:6px 0; border-bottom:0; color:#B4B8BF; font-weight:700; }
.tech-tab::before{ counter-increment:techtab; content:counter(techtab, decimal-leading-zero); flex-shrink:0;
  font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:500; color:inherit; }
.tech-tab:hover{ color:#6B6E76; }
.tech-tab.is-on{ color:var(--ink); border-bottom-color:transparent; }
.tech-tab.is-on::before{ color:var(--accent); }

.tech-name{ margin:0 0 clamp(14px, 2.2vh, 24px); font-size:clamp(26px, 3.7vh, 38px); font-weight:800;
  line-height:1.22; letter-spacing:-0.03em; color:var(--ink); word-break:keep-all; }
body.lang-en .tech-name{ font-size:clamp(24px, 3.3vh, 34px); text-wrap:balance; }
.tech-intro-block h4{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.tech-feats h4{ font-size:13px; font-weight:700; letter-spacing:0.06em; color:var(--grey); margin-bottom:clamp(6px, 1.2vh, 12px); }
body.lang-en .tech-feats h4{ text-transform:uppercase; }

.tech-body .tech-fig{ padding:clamp(16px, 2.6vh, 30px); border:1px solid var(--line-soft); background:#fff; }
.tech-body .tech-feat{ grid-template-columns:clamp(44px, 5.4vh, 56px) minmax(0,1fr); }
.tech-body .tech-feat .n{ font-family:'Pretendard Variable', Pretendard, sans-serif; font-size:clamp(22px, 3.1vh, 30px);
  font-weight:800; line-height:1; letter-spacing:-0.03em; color:var(--accent); margin-top:1px; }
@media(max-width:600px){
  .tech-tab,
  body.lang-en .tech-tab{ border-bottom:1px solid var(--line-soft); padding:12px 0; }
  .tech-tab.is-on{ border-bottom:1px solid var(--line-soft); }
}
@media (min-width:861px) and (max-height:800px){ body.lang-en .tech-name{ font-size:clamp(22px, 3.1vh, 28px); } }

/* Technology: centered heading, and the numbered tab row centered under it (one axis at the top). */
.tech-core-head{ text-align:center; }
@media (min-width:861px){
  .tech-tabs,
  body.lang-en .tech-tabs{ justify-content:center; gap:0 48px; }
  .tech-tab,
  body.lang-en .tech-tab{ flex:0 1 auto; max-width:360px; }
}
/* Technology: clear separation + no repeated name.
   Tab row sits on a full-width thin rule (selected tab underlined in black); the big name that
   repeated the selected tab is removed; Overview gets the same small label as Features. */
.tech-tabs,
body.lang-en .tech-tabs{ border-bottom:1px solid var(--line-soft); }
.tech-tab,
body.lang-en .tech-tab{ padding:12px 0 14px; margin-bottom:-1px; border-bottom:2px solid transparent; }
.tech-tab.is-on{ border-bottom-color:var(--ink); }
.tech-name{ display:none; }
.tech-intro-block h4,
.tech-feats h4{ position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal;
  font-size:13px; font-weight:700; letter-spacing:0.06em; color:var(--grey); margin:0 0 clamp(8px, 1.4vh, 14px); }
body.lang-en .tech-intro-block h4{ text-transform:uppercase; }
@media (min-width:861px) and (max-height:730px){
  .tech-tab,
  body.lang-en .tech-tab{ padding:8px 0 10px; }
}
@media(max-width:600px){
  .tech-tabs,
  body.lang-en .tech-tabs{ border-bottom:0; }
  .tech-tab.is-on{ border-bottom:2px solid var(--ink); }
}
/* "핵심 기술 목록" heading hidden (kept for screen readers); the tab row now leads the section. */
.tech-core-head{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; }
.tech-tabs,
body.lang-en .tech-tabs{ margin-top:0; }
@media (min-width:861px){ .tech-switch, body.lang-en .tech-switch{ justify-content:center; } .tech-main{ flex:0 0 auto; } .tech-tabs, body.lang-en .tech-tabs{ margin-top:0; } }
@media (min-width:861px){ .tech-switch, body.lang-en .tech-switch{ justify-content:flex-start; padding-top:calc(96px + clamp(20px, calc(24vh - 100px), 130px)); } } /* tabs stay put when switching */

/* ===== Technology layout B: diagram on top (full width), Overview | Features side by side below.
   Both blocks get a strong heading with a thick black rule, so they read as the two main parts. */
@media (min-width:861px){
  .tech-body,
  body.lang-en .tech-body{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(36px, 4vw, 72px);
    row-gap:clamp(20px, 3.6vh, 40px); }
  .tech-body .tech-fig{ grid-column:1 / -1; grid-row:1; align-self:start; justify-self:stretch;
    padding:clamp(14px, 2.2vh, 26px); }
  .tech-body .tech-fig img{ max-height:calc(30vh - 20px); margin:0 auto; }
  .tech-body .tech-intro-block{ grid-column:1; grid-row:2; }
  .tech-body .tech-feats,
  body.lang-en .tech-body .tech-feats{ grid-column:2; grid-row:2; margin-top:0; }
  .tech-body .tech-feat:first-child{ border-top:0; padding-top:0; }
}
.tech-intro-block h4,
.tech-feats h4,
body.lang-en .tech-intro-block h4,
body.lang-en .tech-feats h4{ display:block; margin:0 0 clamp(12px, 1.8vh, 18px); padding-top:clamp(10px, 1.6vh, 14px);
  border-top:2px solid var(--ink); font-size:clamp(20px, 2.7vh, 26px); font-weight:800; letter-spacing:-0.02em;
  text-transform:none; color:var(--ink); }
@media (min-width:861px){
  .tech-switch,
  body.lang-en .tech-switch{ padding-top:calc(96px + clamp(14px, calc(10vh - 50px), 60px)); padding-bottom:16px; }
  .tech-panel,
  body.lang-en .tech-panel{ margin-top:clamp(16px, 3vh, 32px); }
  .tech-body .tech-fig img{ max-height:calc(27vh - 20px); }
}
@media (min-width:861px) and (max-height:700px){ .tech-body .tech-fig img{ max-height:calc(22vh - 12px); } .tech-body, body.lang-en .tech-body{ row-gap:16px; } }
/* Layout B: bigger diagram (slimmer frame padding); shorter screens scale it back. */
@media (min-width:861px){
  .tech-body .tech-fig{ padding:clamp(8px, 1.2vh, 16px); }
  .tech-body .tech-fig img{ max-height:calc(38vh - 40px); }
}
@media (min-width:861px){
  body.lang-en .tech-body .tech-intro-block li{ font-size:clamp(13.5px, 1.7vh, 16px); line-height:1.55; }
  body.lang-en .tech-panel .tech-body li + li{ margin-top:clamp(3px, 0.7vh, 8px); }
  body.lang-en .tech-body .tech-feat p{ font-size:clamp(13px, 1.55vh, 14.5px); line-height:1.45; }
  body.lang-en .tech-body .tech-feat{ padding:clamp(6px, 1vh, 11px) 0 clamp(7px, 1.1vh, 12px); }
}
@media (min-width:861px) and (max-height:820px){ body.lang-en .tech-body .tech-fig img{ max-height:calc(32vh - 40px); } }
@media (min-width:861px) and (max-height:700px){ body.lang-en .tech-body .tech-fig img{ max-height:calc(28vh - 40px); } }

/* Technology: Overview and Features each sit in a light grey, square-cornered box
   (same grey as the home services band). The box itself marks the block, so the heading rule goes. */
@media (min-width:861px){
  .tech-body .tech-intro-block,
  .tech-body .tech-feats,
  body.lang-en .tech-body .tech-feats{ align-self:stretch; background:#F6F7F8; border-radius:0;
    padding:clamp(16px, 2.6vh, 30px) clamp(20px, 2vw, 34px); }
  .tech-body,
  body.lang-en .tech-body{ column-gap:clamp(16px, 1.6vw, 28px); }
}
.tech-body .tech-intro-block h4,
.tech-body .tech-feats h4,
body.lang-en .tech-body .tech-intro-block h4,
body.lang-en .tech-body .tech-feats h4{ border-top:0; padding-top:0; }
.tech-body .tech-feat{ border-top-color:#DFE2E6; }
@media(max-width:860px){
  .tech-body .tech-intro-block,
  .tech-body .tech-feats{ background:#F6F7F8; padding:20px 18px; }
}
@media (min-width:861px){
  .tech-body .tech-intro-block,
  .tech-body .tech-feats,
  body.lang-en .tech-body .tech-feats{ padding:clamp(12px, 1.9vh, 22px) clamp(18px, 1.8vw, 30px); }
  .tech-body,
  body.lang-en .tech-body{ row-gap:clamp(12px, 2vh, 22px); }
  .tech-panel,
  body.lang-en .tech-panel{ margin-top:clamp(12px, 2.2vh, 24px); }
  .tech-switch,
  body.lang-en .tech-switch{ padding-top:calc(96px + clamp(10px, calc(8vh - 46px), 40px)); padding-bottom:12px; }
}
@media (min-width:861px) and (min-height:821px){ body.lang-en .tech-body .tech-fig img{ max-height:calc(36vh - 40px); } }
@media (min-width:861px) and (max-height:700px){ .tech-body .tech-fig img{ max-height:calc(36vh - 40px); } body.lang-en .tech-body .tech-fig img{ max-height:calc(28vh - 40px); } }

/* tech boxes: more breathing room inside */
@media (min-width:861px){
  .tech-body .tech-intro-block,
  .tech-body .tech-feats,
  body.lang-en .tech-body .tech-feats{ padding:clamp(20px, 3.2vh, 38px) clamp(26px, 2.4vw, 46px); }
  .tech-body .tech-fig img{ max-height:calc(36vh - 44px); }
  body.lang-en .tech-body .tech-fig img{ max-height:calc(34vh - 44px); }
}
@media (min-width:861px) and (max-height:700px){
  .tech-body .tech-fig img{ max-height:calc(33vh - 44px); }
  body.lang-en .tech-body .tech-fig img{ max-height:calc(25vh - 40px); }
}
@media(max-width:860px){ .tech-body .tech-intro-block, .tech-body .tech-feats{ padding:26px 22px; } }
@media (min-width:861px) and (min-height:821px){ .tech-body .tech-fig img{ max-height:calc(38vh - 44px); } }
@media (min-width:861px) and (min-height:701px) and (max-height:820px){ body.lang-en .tech-body .tech-fig img{ max-height:calc(30vh - 44px); } }

/* tech boxes: taller */
@media (min-width:861px){
  .tech-body .tech-intro-block,
  .tech-body .tech-feats,
  body.lang-en .tech-body .tech-feats{ padding:clamp(28px, 4.4vh, 52px) clamp(26px, 2.4vw, 46px); }
  .tech-body .tech-fig img{ max-height:calc(34vh - 44px); }
  body.lang-en .tech-body .tech-fig img{ max-height:calc(31.5vh - 44px); }
}
@media (min-width:861px) and (min-height:821px){ .tech-body .tech-fig img{ max-height:calc(38vh - 44px); } }
@media (min-width:861px) and (min-height:701px) and (max-height:820px){ body.lang-en .tech-body .tech-fig img{ max-height:calc(27vh - 44px); } }
@media (min-width:861px) and (max-height:700px){
  .tech-body .tech-fig img{ max-height:calc(31vh - 44px); }
  body.lang-en .tech-body .tech-fig img{ max-height:calc(22vh - 40px); }
}
@media (min-width:861px){
  .tech-body .tech-intro-block,
  .tech-body .tech-feats,
  body.lang-en .tech-body .tech-feats{ padding-top:clamp(20px, 3.2vh, 40px); padding-bottom:clamp(36px, 5.6vh, 64px); }
}

/* tech tabs: equal 3-cell bar, framed so it reads apart from the top nav */
.tech-tab.is-on,
body.lang-en .tech-tab.is-on{ color:var(--ink); }
body.lang-en .tech-tab:hover{ color:#6B6E76; }
body.lang-en .tech-tab.is-on:hover{ color:var(--ink); }
@media (min-width:861px){
  .tech-tabs,
  body.lang-en .tech-tabs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
    border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
  .tech-tab,
  body.lang-en .tech-tab{ max-width:none; width:100%; align-items:baseline; text-align:left;
    padding:clamp(12px, 1.8vh, 20px) clamp(16px, 1.6vw, 28px); margin:-1px 0;
    border-top:2px solid transparent; border-bottom:2px solid transparent; }
  .tech-tab + .tech-tab{ box-shadow:inset 1px 0 0 var(--line-soft); }
  .tech-tab.is-on,
  body.lang-en .tech-tab.is-on{ border-top-color:var(--ink); }
}
@media (min-width:861px){ .tech-tab, body.lang-en .tech-tab{ padding-top:clamp(10px, 1.4vh, 18px); padding-bottom:clamp(10px, 1.4vh, 18px); } .tech-panel{ margin-top:clamp(10px, 1.8vh, 22px); } }

/* EN patents section: same fixed one-screen layout as KO, so it never scrolls under the nav */
@media (min-width:861px){
  body.lang-en .ip-sec{ height:calc(100vh - 96px); height:calc(100dvh - 96px); min-height:0; overflow:hidden; }
  body.lang-en .ip-marquee{ flex:1; height:auto; min-height:0; }
}

/* nav: hairline so the fixed bar reads apart from page content */
.nav.is-scrolled,
.nav.solid{ box-shadow:0 1px 0 var(--line-soft); }
.nav.is-open{ box-shadow:none; }

/* tech tabs: plain underline tabs in equal cells, centered */
@media (min-width:861px){
  .tech-tabs,
  body.lang-en .tech-tabs{ border-top:0; border-bottom:1px solid var(--line-soft); }
  .tech-tab,
  body.lang-en .tech-tab{ justify-content:center; text-align:center; margin:0 0 -1px;
    border-top:0; border-bottom:2px solid transparent; }
  .tech-tab + .tech-tab{ box-shadow:none; }
  .tech-tab.is-on,
  body.lang-en .tech-tab.is-on{ border-bottom-color:var(--ink); }
}

/* EN: give Features more width (its lines are longer) so the boxes are shorter and the diagram can match KO */
@media (min-width:861px){
  body.lang-en .tech-body{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr); }
  body.lang-en .tech-body .tech-fig img{ max-height:calc(34vh - 44px); }
}
@media (min-width:861px) and (min-height:821px){ body.lang-en .tech-body .tech-fig img{ max-height:calc(38vh - 44px); } }
@media (min-width:861px) and (max-height:700px){ body.lang-en .tech-body .tech-fig img{ max-height:calc(31vh - 44px); } }
@media (min-width:861px) and (min-height:701px) and (max-height:820px){ body.lang-en .tech-body .tech-fig img{ max-height:calc(61vh - 287px); } }
@media (min-width:861px) and (max-height:700px){ body.lang-en .tech-body .tech-fig img{ max-height:calc(24vh - 50px); } }
@media (min-width:861px){ body.lang-en .tech-body{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr); } }

/* tech features: hover enlarges instead of lifting */
.tech-feat.reveal{ transform-origin:left center;
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),
             transform 1.1s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),
             scale .35s cubic-bezier(.22,1,.36,1); }
.tech-feat.reveal.is-in:hover{ transform:none; scale:1.04; }
@media (min-width:861px){ .ip-tabs{ margin-top:20px; } }
@media (min-width:861px){ .ip-tabs{ margin-top:30px; } }

/* tech overview: justified (same treatment as the company body) */
.tech-body .tech-intro-block li,
body.lang-en .tech-body .tech-intro-block li{ text-align:justify; text-justify:inter-character; text-align-last:left; text-wrap:wrap; }
body.lang-en .tech-body .tech-intro-block li{ text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }
@media (min-width:861px){
  .tech-body .tech-intro-block,
  .tech-body .tech-feats,
  body.lang-en .tech-body .tech-feats{ padding-left:clamp(36px, 3.4vw, 64px); padding-right:clamp(36px, 3.4vw, 64px); }
}

/* EN tech panel: same box split and type sizes as KO */
@media (min-width:861px){
  body.lang-en .tech-body{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  body.lang-en .tech-body .tech-intro-block li{ font-size:clamp(14px, 1.85vh, 17px); line-height:1.62; }
  body.lang-en .tech-panel .tech-body li + li{ margin-top:clamp(4px, 0.9vh, 10px); }
  body.lang-en .tech-body .tech-feat p{ font-size:clamp(13px, 1.65vh, 15px); line-height:1.5; }
}
@media (min-width:861px){
  body.lang-en .tech-body .tech-feat{ padding:clamp(7px, 1.25vh, 13px) 0 clamp(8px, 1.35vh, 14px); }
  body.lang-en .tech-body .tech-feat:first-child{ padding-top:0; }
}
.tech-feat.reveal.is-in:hover{ transform:none; scale:none; } /* features stay fixed on hover */

/* revealed tech items must rest at their real position (the .tech-feat.reveal / li.reveal offsets were overriding .reveal.is-in) */
.tech-feat.reveal.is-in,
.tech-intro-block li.reveal.is-in{ transform:none; }
@media (min-width:861px){
  .tech-body .tech-intro-block h4,
  .tech-body .tech-feats h4,
  body.lang-en .tech-body .tech-intro-block h4,
  body.lang-en .tech-body .tech-feats h4{ margin-bottom:clamp(20px, 3.4vh, 38px); }
}
@media (min-width:861px){
  .tech-body .tech-intro-block,
  .tech-body .tech-feats,
  body.lang-en .tech-body .tech-feats{ padding-bottom:clamp(24px, 3.8vh, 46px); }
}

/* company directions: fit one screen so the heading never slides under the nav at page end */
@media (min-width:861px){
  body.lang-en.page-company .loc-map{ min-height:0; }
  body.lang-en.page-company .loc-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); }
  .page-company .loc-info{ gap:clamp(6px, 1vh, 10px); }
  .page-company .loc-block{ padding:clamp(6px, 1.2vh, 12px) 16px; }
  .page-company .loc-table th,
  .page-company .loc-table td{ padding-top:clamp(2px, 0.6vh, 6px); padding-bottom:clamp(2px, 0.6vh, 6px); }
}

/* EN timeline: each year column is as wide as its longest title, so titles stay on one line */
@media (min-width:861px){
  body.lang-en .timeline > li{ flex:0 0 auto; width:max-content; min-width:380px; max-width:600px; }
  body.lang-en .t-title{ white-space:nowrap; }
  body.lang-en .t-sub{ contain:inline-size; }
}
@media (min-width:861px){ body.lang-en .timeline > li{ width:480px; min-width:0; max-width:none; } } /* equal EN columns, wide enough for the longest one-line title */

/* news cards: date / title / photo rows line up across a row of cards */
@media (min-width:861px){
  .news-card{ display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; align-content:start; }
  .news-card .t{ align-self:start; }
}
@media (min-width:901px){
  .page-company .n-hero{ height:50vh; min-height:320px; } /* same banner height as the other pages */
  .company-about{ padding-top:clamp(32px, 6vh, 100px); } /* keeps the heading where it was */
}

/* news article: breathing room between photos and text */
.a-body figure,
.a-body .wp-block-image,
.a-body .wp-block-post-featured-image{ margin-bottom:32px; }
.a-body * + figure,
.a-body * + .wp-block-image{ margin-top:32px; }
.a-body figcaption{ margin-top:10px; }
@media (min-width:861px){ .tech-panel .tech-body li + li, body.lang-en .tech-panel .tech-body li + li{ margin-top:clamp(10px, 1.8vh, 20px); } } /* more space between overview paragraphs */
@media (min-width:861px){ .tech-panel .tech-body li + li, body.lang-en .tech-panel .tech-body li + li{ margin-top:clamp(16px, 2.8vh, 30px); } }

/* company history: fit one screen so a single wheel step moves past it */
@media (min-width:861px){
  .history{ padding-bottom:16px; }
  .history-rail{ padding:8px 0 20px; }
  .timeline{ padding-bottom:28px; }
  .timeline > li{ flex-basis:420px; }
  .t-items{ padding-top:clamp(18px, 3vh, 32px); gap:clamp(8px, 1.4vh, 16px); }
}
@media (min-width:861px){
  .history{ position:relative; padding-bottom:0; }
  .history-cue{ position:absolute; right:6vw; top:calc(116px + 0.5em); margin:0; } /* sits beside the heading instead of taking its own row */
  .history-head{ padding-right:calc(6vw + 140px); }
  .history-head h2,
  body.lang-en .history-head h2{ font-size:clamp(24px, min(3.2vw, 4.2vh), 38px); }
  .history-rail{ padding:6px 0 12px; }
  .timeline{ padding-bottom:16px; }
  .t-title{ font-size:clamp(15px, 2vh, 17px); line-height:1.45; }
  .t-sub{ font-size:clamp(13px, 1.6vh, 14px); line-height:1.55; margin-top:2px; }
}
@media (min-width:861px){ .timeline > li{ flex-basis:460px; } body.lang-en .timeline > li{ width:540px; } }
@media (min-width:861px){ .history-head{ margin-bottom:clamp(22px, 3.6vh, 40px); } .history-rail{ padding-top:clamp(6px, 1.2vh, 14px); } }
@media (min-width:861px){ .history-head{ margin-bottom:clamp(14px, 2.2vh, 26px); } .history-rail{ padding-top:6px; } }
@media (min-width:861px){
  /* grey history band fills the whole window when snapped; content sits centred in it */
  .history{ min-height:100vh; min-height:100dvh; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; padding-bottom:24px; }
}
@media (min-width:861px){ .history{ justify-content:flex-start; } } /* heading stays just below the nav, aligned with the TIMELINE cue */
@media (min-width:861px){ .history-head{ margin-bottom:clamp(14px, calc(10vh - 50px), 56px); } .t-items{ gap:clamp(8px, calc(4vh - 16px), 24px); padding-top:clamp(18px, calc(6vh - 20px), 40px); } } /* taller windows spread the timeline out instead of leaving a gap below */
@media (min-width:861px){
  /* TIMELINE cue back on its own row under the heading; more room above the heading on taller windows */
  .history-cue{ position:static; margin:0 6vw 18px; }
  .history-head{ padding-right:6vw; }
  .history{ padding-top:calc(96px + clamp(20px, calc(14vh - 80px), 80px)); }
}
@media (min-width:861px){ .history-head{ margin-bottom:16px; } .history{ padding-top:calc(96px + clamp(20px, calc(16vh - 90px), 90px)); } }

/* product: 개발 배경 justified (same treatment as the company body) */
@media (min-width:601px){
  .product-why p{ text-align:justify; text-justify:inter-character; text-align-last:left; text-wrap:wrap; }
  body.lang-en .product-why p{ text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }
}
.product-why h3{ padding-bottom:18px; margin-bottom:24px; border-bottom:1px solid var(--line-soft); } /* rule under 개발 배경 separates heading from text */
.product-why h3{ width:fit-content; padding-right:0.7em; } /* rule spans the heading plus a little extra */
.product-why h3{ padding-bottom:8px; margin-bottom:28px; } /* rule sits closer to the heading */

/* product components & features: editorial list (name left, text right, hairline rows) */
.product-band > h3,
.product-traits > h3{ font-size:34px; margin:0 0 clamp(24px, 4vh, 40px); }
.product-band > h3::after{ display:none; }
.product-band .product-grid,
.product-traits .product-grid{ display:block; border-top:1.5px solid var(--ink); }
.product-card,
.product-trait{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2.2fr); gap:0 clamp(32px, 5vw, 96px);
  padding:clamp(28px, 4.4vh, 48px) 0; background:none; border-radius:0; border-bottom:1px solid var(--line-soft); box-shadow:none; }
.product-traits .product-trait{ border-bottom-color:#DFE2E6; }
.product-card.reveal.is-in:hover{ transform:none; }
.product-card h4,
.product-trait h4{ font-size:clamp(22px, 1.7vw, 28px); font-weight:800; letter-spacing:-0.02em; line-height:1.3; margin:0; }
.pc-sub{ margin-top:10px; font-size:15px; line-height:1.5; color:var(--grey); word-break:keep-all; }
.pc-text p,
.product-card .pc-text p,
.product-trait .pc-text p{ font-size:17px; line-height:1.8; color:var(--grey); text-align:justify; text-justify:inter-character; text-align-last:left; word-break:keep-all; }
body.lang-en .pc-text p{ text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }
.pc-text p + p{ margin-top:12px; }
.product-more{ margin-top:clamp(28px, 4.4vh, 48px); }
@media (max-width:860px){
  .product-card,
  .product-trait{ grid-template-columns:1fr; gap:14px; padding:28px 0; }
  .product-band > h3,
  .product-traits > h3{ font-size:26px; }
}
@media (max-width:600px){ .pc-text p{ text-align:left; } }
@media (min-width:861px){ .product-card, .product-trait{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.6fr); } }
.product-scroll{ transition:opacity .3s ease, visibility .3s; } .product-scroll.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

/* product components & features: square panels, no rules (D) */
@media (min-width:861px){
  .product-band .product-grid,
  .product-traits .product-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(16px, 1.6vw, 28px); border-top:0; }
  .product-band .product-card,
  .product-traits .product-trait{ display:block; border:0; padding:clamp(28px, 4.6vh, 56px) clamp(28px, 3vw, 56px); }
  .product-band .product-card{ background:#F6F7F8; }
  .product-traits .product-trait{ background:#fff; }
  .product-band .pc-name,
  .product-traits .pc-name{ margin-bottom:clamp(16px, 2.8vh, 28px); }
  .product-band .product-card h4,
  .product-traits .product-trait h4{ font-size:clamp(24px, 2vw, 34px); }
}
@media (max-width:860px){
  .product-band .product-grid,
  .product-traits .product-grid{ border-top:0; display:grid; gap:12px; }
  .product-band .product-card{ background:#F6F7F8; border:0; padding:24px 20px; }
  .product-traits .product-trait{ background:#fff; border:0; padding:24px 20px; }
}}@media (min-width:861px){ .product-open .product-scroll{ position:fixed; top:auto; bottom:22px; left:50%; transform:translateX(-50%); } } /* first-screen hint at the bottom centre, like the home page */
.product-why h3{ width:auto; padding-right:0; } /* rule spans the full text width again */
@media (min-width:861px){ body.lang-en .product-quote p{ max-width:none; } body.lang-en .product-quote p > span{ display:block; white-space:nowrap; } } /* EN quote: two lines like KO */
@media (min-width:861px){ body.lang-en .product-quote p{ font-size:clamp(22px, 2.7vw, 40px); } body.lang-en .product-quote .hl{ white-space:nowrap; } }
@media (min-width:861px){ body.lang-en .product-lead{ max-width:1120px; } } /* EN lead is longer; two lines like KO */
@media (min-width:861px){ body.lang-en .product-quote p{ font-size:clamp(20px, 2.5vw, 40px); } }

/* EN quote: one flowing sentence; highlights wrap with their underline */
body.lang-en .product-quote p.quote-en{ max-width:28em; font-size:clamp(22px, 2.4vw, 38px); line-height:1.45; }
body.lang-en .product-quote p.quote-en > span{ display:inline; white-space:normal; }
body.lang-en .product-quote p.quote-en .hl{ display:inline; white-space:normal; font-size:1em; animation:none;
  background:linear-gradient(rgba(37,99,235,0.4), rgba(37,99,235,0.4)) left 92% / 0% 0.12em no-repeat;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .8s cubic-bezier(.16,1,.3,1) .3s; }
body.lang-en .product-quote p.quote-en.is-in .hl{ background-size:100% 0.12em; }
body.lang-en .product-quote p.quote-en .hl::after{ display:none; }
@media (prefers-reduced-motion: reduce){ body.lang-en .product-quote p.quote-en .hl{ background-size:100% 0.12em; transition:none; } }
body.lang-en .product-quote p.quote-en{ max-width:40em; }
body.lang-en .product-quote p.quote-en{ display:block; } /* the KO quote is a flex column of lines; the EN sentence flows as one paragraph */
body.lang-en .product-quote p.quote-en{ font-size:clamp(21px, 2.25vw, 38px); }
body.lang-en .product-quote p.quote-en{ line-height:1.75; } /* same line spacing as the KO quote (whose highlights are larger) */
body.lang-en .product-quote p.quote-en{ line-height:2.5; }
@media (min-width:861px){ .product-lead{ max-width:1120px; } }
@media (min-width:861px){ .product-intro{ margin-top:clamp(16px, 3.2vh, 36px); } } /* a little more room between the lead and the diagram */
@media (min-width:861px){ body.lang-en .product-why p{ font-size:16px; line-height:1.8; } body.lang-en .product-intro{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } } /* EN background is longer: slightly smaller text and a wider column so it matches the KO block height */
@media (min-width:861px){ .product-open .product-scroll{ left:auto; right:6vw; transform:none; } } /* bottom-right of the first screen, clear of the intro text */
.product-scroll.product-scroll-pinned{ position:fixed; top:auto; bottom:22px; right:6vw; left:auto; transform:none; z-index:20; color:var(--grey); } @media (max-width:860px){ .product-scroll.product-scroll-pinned{ display:none; } }
@media (min-width:861px){ .product-why{ padding-top:0; padding-bottom:28px; } } /* sits a little higher beside the diagram */
.product-scroll.product-scroll-pinned{ left:50%; right:auto; transform:translateX(-50%); color:var(--grey); text-shadow:none; } /* bottom centre of the window */
@media (min-width:861px){ .product-why{ padding-top:0; padding-bottom:8px; } } /* 개발 배경 ~20px above centre */
.product-intro{ transition:opacity .6s ease, transform .8s cubic-bezier(.22,1,.36,1); } .product-intro.is-waiting{ opacity:0; transform:translate3d(0,32px,0); pointer-events:none; } @media (prefers-reduced-motion: reduce){ .product-intro.is-waiting{ opacity:1; transform:none; } }
@media (min-width:861px){ .product-why{ padding-top:0; padding-bottom:28px; } } /* 개발 배경 ~10px higher */
@media (min-width:861px){ .product-why{ padding-top:12px; padding-bottom:0; } } /* 개발 배경 20px lower than before */
@media (min-width:861px){ .product-why{ padding-top:32px; padding-bottom:0; } } /* 10px lower */
@media (min-width:861px){ body.lang-en .product-why p{ font-size:18px; line-height:1.8; } body.lang-en .product-intro{ grid-template-columns:minmax(0,1.25fr) minmax(0,0.9fr); } } /* EN background now short enough for the KO size and layout */
@media (min-width:861px){ .product-why{ padding-top:22px; padding-bottom:0; } } /* 개발 배경 5px higher */

/* components & features: larger text, a rule between the name block and the description */
@media (min-width:861px){
  .product-band .pc-name,
  .product-traits .pc-name{ padding-bottom:clamp(16px, 2.4vh, 24px); margin-bottom:clamp(18px, 2.8vh, 28px); border-bottom:1px solid #DFE2E6; }
  .product-band .pc-sub{ font-size:17px; margin-top:12px; }
  .product-band .pc-text p,
  .product-traits .pc-text p{ font-size:18px; line-height:1.8; }
}
@media (max-width:860px){
  .pc-name{ padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid #DFE2E6; }
}
@media (min-width:861px){ body.lang-en .product-why{ padding-top:12px; } } /* EN Background 5px higher than KO */
.nav.is-scrolled, .nav.solid{ box-shadow:none; } /* no hairline under the nav */

/* page headers: News, Contract and Product share one label + title style */
.page-head .eyebrow,
.page-head-inner .eyebrow,
.contract-head .eyebrow,
.product-head .num{ font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:400; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); }
.page-head-inner h1,
.contract-head h1,
.product-head h2{ margin-top:14px; font-size:clamp(32px, 3.8vw, 48px); font-weight:800; letter-spacing:-0.03em; line-height:1.25; }
@media (min-width:861px){ .product-band > h3, .product-traits > h3{ font-size:clamp(32px, 3.8vw, 48px); letter-spacing:-0.03em; line-height:1.25; } } /* same size as the CryptoNix title */
@media (min-width:861px){ .product-band{ padding-bottom:clamp(48px, 10vh, 120px); } } /* Components block sits a bit above centre */
@media (min-width:861px){ .product-traits{ padding-top:clamp(40px, 8vh, 96px); } } /* Features block sits a bit below centre */
@media (min-width:901px){ .company-about .values{ margin-top:20px; } } /* photo + text a little lower under the heading */
@media (min-width:901px){ .company-about .values{ margin-top:0; padding-top:20px; } } /* padding: a margin here collapses into the heading margin */
@media (min-width:901px) and (max-height:760px){ .company-about .values{ padding-top:0; } } /* short windows: no room to move it down */

/* EN highlight underlines sit lower, clear of the letters (Latin text has descenders close to the line) */
body.lang-en .tech-lead .hl::after,
body.lang-en .product-quote .hl::after,
body.lang-en .s-head h2 .highlight::after{ bottom:-.12em; }
body.lang-en .product-quote p.quote-en .hl{ background-position:left 100%; padding-bottom:.1em; }
body.lang-en .tech-lead .hl::after, body.lang-en .product-quote .hl::after, body.lang-en .s-head h2 .highlight::after{ bottom:-.04em; } body.lang-en .product-quote p.quote-en .hl{ padding-bottom:.03em; } /* EN underline: a little below the letters, not far */
body.lang-en .product-traits .pc-text p{ text-justify:inter-character; } /* codec names cannot break: spread justify space across letters, not just word gaps */
footer .f-copy{ margin:0 0 0 auto; font-size:12px; color:#a9a9ac; line-height:1.6; white-space:nowrap; } @media (max-width:860px){ footer .f-copy{ margin-left:0; white-space:normal; } }
.ip-head h2.no-br br{ display:none; } .ip-head h2.no-br{ text-wrap:balance; }
.ip-head h2.no-br .hl{ white-space:nowrap; } @media (max-width:420px){ .ip-head h2.no-br .hl{ white-space:normal; } } /* keep the highlighted phrase on one line */

/* headings whose hand-placed break no longer fits (set by nav.js) */
h1.no-br > br:not([class]),
h2.no-br > br:not([class]){ display:none; }
h1.no-br, h2.no-br{ text-wrap:balance; }
@media (min-width:421px){ h1.no-br .hl, h1.no-br .highlight, h2.no-br .hl, h2.no-br .highlight{ white-space:nowrap; } }
@media (min-width:421px){ h1.no-br .hl-join, h2.no-br .hl-join{ white-space:nowrap; } }

/* tablets and small laptops (861–1365px, free scrolling): no squeezing to fit one screen */
@media (min-width:861px) and (max-width:1365px){
  .about-grid{ grid-template-columns:1fr; gap:36px; }
  .about-copy{ order:-1; }
  .about-photo{ max-height:min(62vh, 600px); }
  .about h2{ white-space:normal; }
  .tech-body .tech-fig img,
  body.lang-en .tech-body .tech-fig img{ max-height:none; width:100%; height:auto; }
}
@media (min-width:861px) and (max-width:1365px){ .about-copy{ order:0; } } /* tablets/small laptops: photo above the text */
@media (max-width:860px){ .about-copy{ order:0; } } /* phones and portrait tablets: photo above the text as well */
/* stacked home intro (tablets / small laptops): wide banner photo, then the copy */
@media (min-width:861px) and (max-width:1365px){
  .about{ min-height:0; padding-top:clamp(96px, 12vh, 128px); padding-bottom:clamp(64px, 10vh, 112px); }
  .about-grid{ gap:clamp(32px, 5vh, 48px); }
  .about-photo{ aspect-ratio:21/9; max-height:none; border-radius:16px; }
  .about-photo img{ object-position:center 40%; }
  .about-copy{ gap:22px; }
}
/* home intro: side by side again from 1024px (photo a little larger than before); stacked only on narrower tablets */
@media (min-width:1024px) and (max-width:1365px){
  .about-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:28px clamp(32px, 4vw, 56px); }
  .about-photo{ aspect-ratio:4/3; }
  .about-photo img{ object-position:center 46%; }
}
@media (min-width:861px) and (max-width:1023px){
  .about-photo{ aspect-ratio:21/9; max-height:340px; }
}
@media (min-width:861px){ body:not(.lang-en) .product-quote p{ font-size:clamp(20px, 2.45vw, 40px); } } /* KO quote: two fixed lines that always fit */
@media (min-width:861px){ body:not(.lang-en) .product-quote p{ font-size:clamp(20px, 3vw, 40px); } } /* shorter KO quote again fits at the original size */
.tech-intro-block li b{ color:var(--ink); font-weight:700; } /* key phrases in 기술 소개 */

.product-examples .product-fig{ height:100%; display:flex; align-items:center; }
.product-examples .px-video{ width:100%; height:auto; display:block; background:#111214; pointer-events:none; }
.product-examples video.px-video::-webkit-media-controls{ display:none !important; }
.product-examples .px-empty{ margin:0; padding:72px 24px; width:100%; color:var(--grey); font-size:16px; text-align:center; }
.px-row{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(16px, 1.6vw, 28px); align-items:stretch; }
.px-modes{ display:flex; flex-direction:column; gap:clamp(16px, 1.6vw, 28px); min-width:0; }
.px-modes .product-card{ flex:1; }
@media (max-width:860px){
  .px-row{ grid-template-columns:1fr; }
}

.product-forms{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.product-forms span{ display:inline-flex; align-items:center; padding:8px 14px; border:1px solid var(--line-soft); border-radius:999px;
  font-size:13px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); line-height:1.2; }
.product-deploy-lead{ margin:-8px 0 28px; max-width:40em; font-size:18px; line-height:1.75; color:var(--grey); word-break:keep-all; }
.pd-tag{ display:block; font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:500; letter-spacing:0.14em; color:var(--accent); margin:0 0 10px; }
.product-deploy{ margin:0 -6vw; padding-left:6vw; padding-right:6vw; background:#F6F7F8; }
.product-deploy .product-card{ background:#fff; }
@media (min-width:861px){
  .product-deploy{ padding-top:clamp(40px, 8vh, 96px); padding-bottom:clamp(64px, 12vh, 140px); }
  .product-deploy-lead{ margin-top:-16px; margin-bottom:clamp(24px, 4vh, 36px); }
}
@media (max-width:860px){
  .product-deploy{ margin-left:-5vw; margin-right:-5vw; padding:36px 5vw 64px; }
  .product-deploy-lead{ font-size:16px; }
  .product-deploy .product-card{ background:#fff; }
}
body.lang-en .product-deploy-lead{ word-break:normal; overflow-wrap:break-word; }
.product-examples .product-fig{ padding:0; background:none; border-radius:0; } .product-examples .px-video{ border-radius:16px; overflow:hidden; } /* video stands on its own: no grey frame, rounded corners */

/* product: demo video (after Components) and deployment comparison table (last, with the inquiry button) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.product-demo,
.product-deploy{ display:flex; flex-direction:column; justify-content:center; }
.product-demo > h3,
.product-deploy > h3{ font-size:clamp(32px, 3.8vw, 48px); font-weight:800; letter-spacing:-0.03em; line-height:1.25; margin:0 0 clamp(24px, 4vh, 40px); }
.product-demo-fig{ margin:0; width:100%; }
.product-demo-fig .px-video{ width:100%; max-height:calc(100vh - 96px - 200px); object-fit:contain; height:auto; display:block; border-radius:16px; background:#111214; pointer-events:none; }
.product-demo-fig video.px-video::-webkit-media-controls{ display:none !important; }
.product-demo-fig .px-empty{ margin:0; padding:72px 24px; color:var(--grey); font-size:16px; text-align:center; background:#F6F7F8; border-radius:16px; }

.deploy-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.deploy-table th,
.deploy-table td{ text-align:left; vertical-align:top; padding:clamp(16px, 2.4vh, 24px) clamp(12px, 1.6vw, 28px); border-bottom:1px solid var(--line-soft); word-break:keep-all; }
.deploy-table thead th{ font-size:clamp(20px, 1.7vw, 26px); font-weight:800; letter-spacing:-0.02em; color:var(--ink); border-bottom:1.5px solid var(--ink); padding-top:0; }
.deploy-table thead th:first-child,
.deploy-table tbody th{ width:22%; padding-left:0; }
.deploy-table tbody th{ font-size:16px; font-weight:700; color:var(--ink); }
.deploy-table td{ font-size:17px; line-height:1.7; color:var(--grey); }
.product-deploy .product-more{ margin-top:clamp(28px, 4.4vh, 48px); align-self:flex-start; }
@media (max-width:860px){
  .product-demo > h3,
  .product-deploy > h3{ font-size:26px; }
  .product-demo-fig .px-video{ max-height:none; }
  .deploy-table thead th{ font-size:17px; }
  .deploy-table th, .deploy-table td{ padding:14px 8px; }
  .deploy-table td{ font-size:15px; }
  .deploy-table tbody th{ font-size:14px; }
  .deploy-table thead th:first-child, .deploy-table tbody th{ width:26%; }
}
.product-deploy{ background:#fff; } /* white after the grey Features band */
.product-demo-fig{ display:flex; justify-content:center; } .product-demo-fig .px-video{ width:auto; max-width:100%; background:none; } /* box follows the video, so no black side bars */
@media (min-width:861px){ .product-demo-fig{ justify-content:flex-start; } .product-demo-fig .px-video{ width:min(100%, calc((100vh - 296px) * 1.71)); height:auto; max-height:none; object-fit:contain; } } /* as large as the screen allows, left-aligned with the heading */

/* Components: demo video on the left, CryptoEye / CryptoIndex stacked on the right */
.pc-row{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:clamp(16px, 1.6vw, 28px); align-items:stretch; }
.pc-row .product-demo-fig{ display:flex; align-items:center; justify-content:flex-start; margin:0; }
.pc-row .product-demo-fig .px-video{ width:100%; height:auto; max-height:none; }
.product-band .pc-row .product-grid{ display:flex; flex-direction:column; gap:clamp(16px, 1.6vw, 28px); }
.product-band .pc-row .product-card{ flex:1; }
@media (max-width:860px){
  .pc-row{ grid-template-columns:1fr; }
}
@media (min-width:861px){
  .pc-row{ grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); }
  .product-band .pc-row .product-card{ padding:clamp(18px, 2.6vh, 30px) clamp(22px, 2vw, 36px); }
  .product-band .pc-row .product-card h4{ font-size:clamp(22px, 1.6vw, 28px); }
  .product-band .pc-row .pc-name{ padding-bottom:clamp(10px, 1.4vh, 14px); margin-bottom:clamp(12px, 1.8vh, 18px); }
  .product-band .pc-row .pc-sub{ font-size:15px; margin-top:6px; }
  .product-band .pc-row .pc-text p{ font-size:16px; line-height:1.7; }
  .product-band .pc-row .pc-text p + p{ margin-top:8px; }
  .product-band > h3{ margin-bottom:clamp(20px, 3vh, 32px); }
}
/* no cropping: product.js sizes the video column so the whole video matches the text height */
@media (min-width:861px){
  .pc-row .product-demo-fig{ height:auto; align-items:center; }
  .pc-row .product-demo-fig .px-video{ width:100%; height:auto; min-height:0; object-fit:contain; }
}

/* Components: no boxes; CryptoEye / CryptoIndex as plain text beside the video, split by a rule */
@media (min-width:861px){
  .product-band .pc-row .product-grid{ justify-content:space-between; gap:0; }
  .product-band .pc-row .product-card{ flex:1; background:none; padding:0 0 0 clamp(8px, 1vw, 16px); display:flex; flex-direction:column; justify-content:center; }
  .product-band .pc-row .product-card:first-child{ padding-bottom:clamp(16px, 2.4vh, 28px); }
  .product-band .pc-row .product-card + .product-card{ border-top:1px solid var(--line-soft); padding-top:clamp(16px, 2.4vh, 28px); }
  .product-band .pc-row .pc-name{ border-bottom:0; padding-bottom:0; }
}
@media (min-width:861px){
  /* Components text back to the page's normal sizes, beside a smaller video */
  .product-band .pc-row .product-card h4{ font-size:clamp(24px, 1.9vw, 32px); }
  .product-band .pc-row .pc-sub{ font-size:16px; margin-top:8px; }
  .product-band .pc-row .pc-name{ margin-bottom:clamp(12px, 1.8vh, 18px); }
  .product-band .pc-row .pc-text p{ font-size:17px; line-height:1.75; }
  .pc-row{ gap:clamp(28px, 3vw, 56px); }
  .pc-row .product-demo-fig{ align-items:center; }
}

/* Components: CryptoEye / CryptoIndex on the left as two separate panels, demo video + caption on the right */
@media (min-width:861px){
  .pc-row{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:clamp(28px, 3vw, 56px); align-items:center; }
  .product-band .pc-row .product-grid{ justify-content:flex-start; gap:clamp(12px, 1.4vw, 20px); }
  .product-band .pc-row .product-card,
  .product-band .pc-row .product-card + .product-card,
  .product-band .pc-row .product-card:first-child{ flex:none; display:block; background:#F6F7F8; border:0; padding:clamp(20px, 2.8vh, 32px) clamp(22px, 2vw, 36px); }
  .product-band .pc-row .pc-name{ border-bottom:1px solid #DFE2E6; padding-bottom:clamp(10px, 1.4vh, 14px); margin-bottom:clamp(12px, 1.8vh, 18px); }
  .product-band .pc-row .product-card h4{ font-size:clamp(22px, 1.7vw, 30px); }
  .product-band .pc-row .pc-text p{ font-size:16px; line-height:1.7; }
}
.pc-row .product-demo-fig{ flex-direction:column; align-items:stretch; gap:14px; }
.pc-row .product-demo-fig .px-video{ width:100%; height:auto; border-radius:16px; }
.product-demo-fig figcaption{ font-size:15px; line-height:1.6; color:var(--grey); word-break:keep-all; }
.demo-label{ display:inline-block; margin-right:10px; font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); vertical-align:1px; }
@media (max-width:860px){
  .pc-row .product-demo-fig{ order:-1; }
}
@media (min-width:861px){ .pc-row{ align-items:stretch; } .pc-row .product-demo-fig .px-video{ object-fit:contain; background:#111214; } } .product-demo-fig figcaption{ text-align:center; font-size:15px; color:var(--grey); } /* caption: < 크립토닉스(CryptoNix) 동작 예시 > */
@media (min-width:861px) and (max-width:1599px){ .product-band .pc-row .product-card, .product-band .pc-row .product-card + .product-card, .product-band .pc-row .product-card:first-child{ padding:18px 22px; } .product-band .pc-row .pc-text p{ font-size:15px; line-height:1.65; } .product-band .pc-row .product-card h4{ font-size:22px; } .product-band .pc-row .pc-sub{ font-size:14px; } }
@media (min-width:1600px) and (max-width:1700px){ .product-band .pc-row .product-card, .product-band .pc-row .product-card + .product-card, .product-band .pc-row .product-card:first-child{ padding:18px 22px; } .product-band .pc-row .pc-text p{ font-size:15px; line-height:1.65; } .product-band .pc-row .product-card h4{ font-size:22px; } .product-band .pc-row .pc-sub{ font-size:14px; } }
@media (min-width:861px){ .pc-row .product-demo-fig{ position:relative; } .pc-row .product-demo-fig figcaption{ position:absolute; top:calc(100% + 12px); left:0; right:0; } } /* video bottom lines up with the boxes; caption sits just below */
@media (min-width:861px){ .product-band > h3{ margin-bottom:clamp(36px, 5.6vh, 60px); } } /* more room between 구성 기술 and the boxes / video */
@media (min-width:861px){ .product-band{ justify-content:flex-start; padding-top:clamp(32px, 6.5vh, 80px); padding-bottom:clamp(24px, 4vh, 56px); } } /* Components content sits lower, clear of the nav */
@media (min-width:861px){ .product-deploy{ justify-content:flex-start; padding-top:clamp(32px, 6.5vh, 80px); padding-bottom:clamp(24px, 4vh, 56px); } .product-deploy > h3{ margin-bottom:clamp(36px, 5.6vh, 60px); } } /* same spacing as Components */
@media (min-width:861px){ .product-deploy{ min-height:calc(100vh - 96px - 82px); min-height:calc(100dvh - 96px - 82px); } } /* last section + footer (82px) = one screen, so the final scroll step keeps the heading below the nav */
@media (min-width:861px){ .product-deploy > h3{ margin-bottom:clamp(48px, 9vh, 104px); } } /* table and inquiry button sit lower */
@media (min-width:861px) and (max-height:800px){ .product-deploy > h3{ margin-bottom:clamp(36px, 5.6vh, 48px); } }
.product-demo-fig figcaption{ font-size:17px; font-weight:600; color:var(--ink); } /* caption: larger, dark */

/* Features: four panels (2 x 2), each with a line pictogram above its name */
.trait-icon{ display:block; width:40px; height:40px; margin-bottom:clamp(12px, 1.8vh, 18px); color:var(--accent); }
.trait-icon svg{ display:block; width:100%; height:100%; }
@media (min-width:861px){
  .product-traits .product-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(14px, 1.4vw, 24px); }
  .product-traits .product-trait{ padding:clamp(20px, 3vh, 36px) clamp(24px, 2.4vw, 44px); }
  .product-traits .pc-name{ margin-bottom:clamp(12px, 1.8vh, 20px); }
  .product-traits .product-trait h4{ font-size:clamp(22px, 1.7vw, 28px); }
  .product-traits .pc-text p{ font-size:16px; line-height:1.7; }
  .product-traits .pc-text p + p{ margin-top:6px; }
  .product-traits{ justify-content:flex-start; padding-top:clamp(32px, 6.5vh, 80px); padding-bottom:clamp(24px, 4vh, 56px); }
  .product-traits > h3{ margin-bottom:clamp(28px, 4.4vh, 48px); }
}
.product-traits .pc-text p b{ color:var(--ink); font-weight:700; }
@media (min-width:861px) and (max-height:820px){ .trait-icon{ width:30px; height:30px; margin-bottom:8px; } .product-traits .product-trait{ padding:16px 24px; } .product-traits .pc-name{ padding-bottom:8px; margin-bottom:10px; } .product-traits .product-trait h4{ font-size:20px; } .product-traits .pc-text p{ font-size:15px; line-height:1.6; } .product-traits > h3{ margin-bottom:24px; } .product-traits{ padding-top:28px; } }
.product-traits .pc-name{ display:flex; align-items:center; gap:14px; } .product-traits .trait-icon{ flex:none; margin-bottom:0; } /* pictogram beside the feature name */
@media (min-width:861px){ .product-traits{ padding-top:clamp(48px, 9vh, 112px); } .product-traits > h3{ margin-bottom:clamp(36px, 5.6vh, 60px); } } @media (min-width:861px) and (max-height:820px){ .product-traits{ padding-top:40px; } .product-traits > h3{ margin-bottom:28px; } } /* 주요 특징 content sits lower */
@media (min-width:861px) and (max-height:820px){ .product-traits{ padding-top:64px; } .product-traits > h3{ margin-bottom:36px; } }
@media (min-width:861px){ .product-traits{ padding-top:clamp(96px, 14.5vh, 180px); } } @media (min-width:861px) and (max-height:820px){ .product-traits{ padding-top:108px; } }
.product-band .pc-text p b{ color:var(--ink); font-weight:700; }
.pc-row .product-demo-fig .px-video, .product-demo-fig .px-video{ border-radius:0; } /* square corners, like the boxes beside it */
.product-demo-fig figcaption{ display:flex; justify-content:center; } .product-demo-fig figcaption::before{ content:none; } .pc-row .product-demo-fig figcaption{ font-size:15px; font-weight:600; color:var(--ink); } .product-demo-fig figcaption{ background:none; } .product-demo-fig .demo-cap{ display:inline-block; padding:7px 18px; border-radius:999px; background:#F6F7F8; }

/* demo caption: plain text under the video, left-aligned, with a short dash (no pill) */
.pc-row .product-demo-fig figcaption{ justify-content:flex-start; }
.product-demo-fig .demo-cap{ padding:0; border-radius:0; background:none; font-size:14px; font-weight:500; color:var(--grey); }
.product-demo-fig .demo-cap::before{ content:"\2014\00a0"; }

@media (min-width:861px){ .product-traits .product-trait h4{ font-size:clamp(23px, 1.85vw, 32px); } } @media (min-width:861px) and (max-height:820px){ .product-traits .product-trait h4{ font-size:23px; } } /* larger feature titles */

.deploy-table thead th, .deploy-table td{ text-align:center; } /* centred columns */
.deploy-table tbody th{ font-size:19px; } @media (max-width:860px){ .deploy-table tbody th{ font-size:16px; } } /* larger row labels */
.deploy-table{ border-top:1.5px solid var(--ink); } .deploy-table thead th{ padding-top:clamp(16px, 2.4vh, 24px); } /* rule above the table */
@media (min-width:861px) and (max-height:800px){ .product-deploy > h3{ margin-bottom:24px; } } /* room for the top rule on short screens */
.deploy-table tbody tr:last-child th, .deploy-table tbody tr:last-child td{ border-bottom:1.5px solid var(--ink); } /* closing rule under the last row */
@media (min-width:861px){ .deploy-table thead th{ font-size:clamp(22px, 1.9vw, 29px); } .deploy-table tbody th{ font-size:20px; } .deploy-table td{ font-size:19px; } } @media (max-width:860px){ .deploy-table thead th{ font-size:18px; } .deploy-table tbody th{ font-size:17px; } .deploy-table td{ font-size:16px; } } /* larger deploy table text */
@media (min-width:861px) and (max-height:800px){ .deploy-table th, .deploy-table td{ padding-top:15px; padding-bottom:15px; } } /* keep table + footer on one short screen */
@media (min-width:861px){ .contract-lead{ max-width:none; } } /* each lead sentence on one line */

/* ---- Technology: each technology in its own section — overview + features left, diagram right ---- */
.tech-core{ position:relative; padding:0 6vw; }
.tech-row{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:clamp(40px, 5vw, 96px); align-items:center; padding:clamp(72px, 11vh, 128px) 0; border-top:1px solid var(--line-soft); scroll-margin-top:0; }
.tech-core-head + .tech-row{ border-top:0; }
.ti-name{ margin:0 0 clamp(20px, 3vh, 32px); font-size:clamp(28px, 2.6vw, 40px); font-weight:800; letter-spacing:-0.03em; line-height:1.3; color:var(--ink); word-break:keep-all; text-wrap:balance; }
.ti-about p{ margin:0; font-size:17px; line-height:1.8; color:var(--grey); word-break:keep-all; text-align:justify; text-justify:inter-character; }
.ti-about p + p{ margin-top:14px; }
.ti-about p b{ color:var(--ink); font-weight:700; }
body.lang-en .ti-about p{ word-break:normal; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }
.ti-feats{ margin-top:clamp(28px, 4vh, 44px); padding:clamp(24px, 3vh, 36px) clamp(24px, 2.4vw, 40px); background:#F6F7F8; }
.ti-feats h4{ margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:0.06em; color:var(--grey); }
body.lang-en .ti-feats h4{ text-transform:uppercase; }
.ti-feats ul{ list-style:none; margin:0; padding:0; }
.ti-feats li{ padding:14px 0; border-top:1px solid #DFE2E6; }
.ti-feats li:first-child{ padding-top:0; border-top:0; }
.ti-feats li:last-child{ padding-bottom:0; }
.ti-feats h5{ margin:0 0 6px; font-size:18px; font-weight:800; letter-spacing:-0.02em; line-height:1.4; color:var(--ink); word-break:keep-all; }
.ti-feats li p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--grey); word-break:keep-all; }
body.lang-en .ti-feats li p{ word-break:normal; }
.ti-fig{ margin:0; padding:clamp(20px, 3vh, 40px); border:1px solid var(--line-soft); background:#fff; display:flex; align-items:center; justify-content:center; }
.ti-fig img{ display:block; width:100%; height:auto; max-height:72vh; object-fit:contain; }
.tech-row:not(:has(.ti-fig)){ grid-template-columns:minmax(0, 1fr); }
@media (max-width:860px){
  .tech-core{ padding:0 5vw; }
  .tech-row{ grid-template-columns:minmax(0, 1fr); row-gap:28px; padding:56px 0; }
  .ti-fig{ order:-1; padding:16px; }
  .ti-name{ font-size:26px; }
  .ti-about p{ font-size:16px; text-align:left; }
  .ti-feats{ padding:22px 20px; }
  .ti-feats h5{ font-size:17px; }
}/* feature numbers 01. 02. 03. and larger diagrams (wider right column, no frame) */
.ti-feats ul{ counter-reset:tifeat; }
.ti-feats h5::before{ counter-increment:tifeat; content:counter(tifeat, decimal-leading-zero) ". "; color:var(--accent); }
.ti-fig{ padding:0; border:0; background:none; }
.ti-fig img{ max-height:none; }
@media (min-width:1101px){ .tech-row{ grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap:clamp(40px, 4vw, 80px); } }
@media (max-width:1100px){ .tech-row{ grid-template-columns:minmax(0, 1fr); row-gap:32px; } .ti-fig{ order:-1; } }/* features: full-width row of three under the overview + diagram */
.tech-row{ row-gap:clamp(36px, 5vh, 56px); }
.ti-feats{ grid-column:1 / -1; margin-top:0; }
@media (min-width:861px){
  .ti-feats ul{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:0; }
  .ti-feats li, .ti-feats li:first-child, .ti-feats li:last-child{ padding:0 clamp(20px, 2.4vw, 44px); border-top:0; }
  .ti-feats li:first-child{ padding-left:0; } .ti-feats li:last-child{ padding-right:0; } .ti-feats li + li{ border-left:1px solid #DFE2E6; }
}@media (min-width:1600px){ .tech-row{ grid-template-columns:minmax(0, 0.7fr) minmax(0, 1.3fr); } } /* wide screens: diagram gets more room */
/* name on its own full-width line; feature titles split from their text by a rule, text darker and larger */
.tech-row{ row-gap:0; }
.ti-name{ grid-column:1 / -1; margin:0 0 clamp(24px, 3.4vh, 40px); }
.ti-feats{ margin-top:clamp(36px, 5vh, 56px); }
.ti-feats h5{ font-size:20px; margin:0 0 14px; padding-bottom:14px; border-bottom:1px solid #D5D9DE; }
.ti-feats li p{ font-size:16.5px; line-height:1.65; color:#4A4D55; }
@media (max-width:1100px){ .ti-name{ order:-2; } .ti-fig{ margin-bottom:28px; } }
@media (max-width:860px){ .ti-feats h5{ font-size:18px; } .ti-feats li p{ font-size:16px; } .ti-feats li + li{ margin-top:4px; } }@media (min-width:861px){ .ti-feats ul{ grid-template-rows:auto auto; } .ti-feats li{ display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:0; } } /* title rules line up across the three features */
.tech-row{ align-items:start; } .ti-name{ margin-bottom:32px; } @media (max-width:860px){ .ti-name{ margin-bottom:24px; } } /* same gap under the name on every row */
@media (min-width:861px){ .ti-about p{ font-size:clamp(17px, 1.15vw, 20px); line-height:1.85; } .ti-about p + p{ margin-top:18px; } } body.lang-en .ti-about p{ text-align:left; hyphens:manual; -webkit-hyphens:manual; } /* larger overview; English left-aligned (justify left wide gaps) */
.ti-name{ padding-bottom:clamp(16px, 2.2vh, 24px); border-bottom:1.5px solid var(--ink); margin-bottom:clamp(32px, 4.4vh, 48px); } @media (min-width:1101px){ .ti-text{ align-self:center; } } /* rule under the name; overview centred in the space beside the diagram */
@media (min-width:1101px){ .ti-fig{ align-self:center; } }
/* features: three stacked rows, "01. title | description" on one line */
@media (min-width:861px){
  .ti-feats ul{ display:block; }
  .ti-feats li, .ti-feats li:first-child, .ti-feats li:last-child{ display:grid; grid-row:auto; grid-template-rows:none; grid-template-columns:minmax(0, 0.42fr) minmax(0, 0.58fr); align-items:center; column-gap:0; padding:clamp(14px, 2vh, 20px) 0; border-left:0; border-top:1px solid #DFE2E6; }
  .ti-feats li:first-child{ border-top:0; padding-top:0; }
  .ti-feats li:last-child{ padding-bottom:0; }
  .ti-feats h5{ margin:0; padding:0 clamp(20px, 2.4vw, 40px) 0 0; border-bottom:0; }
  .ti-feats li p{ padding-left:clamp(20px, 2.4vw, 40px); border-left:1px solid #C9CED4; }
}@media (min-width:861px){ .ti-feats ul{ display:grid; grid-template-columns:fit-content(46%) minmax(0, 1fr); } .ti-feats li, .ti-feats li:first-child, .ti-feats li:last-child{ grid-column:1 / -1; grid-template-columns:subgrid; } } /* title column as wide as the longest title */
.ti-feats h4{ font-size:17px; font-weight:800; letter-spacing:0; color:var(--ink); margin-bottom:18px; } body.lang-en .ti-feats h4{ letter-spacing:0.04em; } @media (min-width:861px){ .ti-feats li p{ font-size:18px; color:#33363C; } } /* features label and text easier to read */
@media (min-width:861px){ .ti-feats li + li{ border-left:0; } } /* drop the old column divider */
@media (min-width:861px){ .ti-feats li, .ti-feats li:first-child, .ti-feats li:last-child{ padding-top:clamp(22px, 3vh, 30px); padding-bottom:clamp(22px, 3vh, 30px); } .ti-feats li:first-child{ padding-top:4px; } .ti-feats li:last-child{ padding-bottom:4px; } } /* more room between features */
.ti-feats h4{ font-size:22px; letter-spacing:-0.02em; margin-bottom:clamp(20px, 2.8vh, 28px); } body.lang-en .ti-feats h4{ letter-spacing:0; } .ti-feats h5::before{ content:counter(tifeat, decimal-leading-zero) '.'; margin-right:0.4em; } @media (min-width:861px){ .ti-feats li:first-child{ padding-top:clamp(10px, 1.6vh, 16px); } } @media (max-width:860px){ .ti-feats h4{ font-size:20px; } } /* bigger label, room under it, space after the number */
.ti-eyebrow{ grid-column:1 / -1; margin:0 0 12px; font-family:'JetBrains Mono','Pretendard Variable', Pretendard, monospace; font-size:14px; font-weight:400; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); } @media (max-width:1100px){ .ti-eyebrow{ order:-3; } } /* 핵심 기술 1·2·3 label, same as the News page label */
.ti-eyebrow{ font-family:'JetBrains Mono', monospace; font-size:13px; margin-bottom:14px; } /* same as the PRODUCT label */
.ti-eyebrow{ margin-bottom:17px; }
.tech-row{ margin:0 -6vw; padding-left:6vw; padding-right:6vw; border-top:0; } .tech-row:nth-of-type(odd){ background:#F6F7F8; } .tech-row:nth-of-type(odd) .ti-feats{ background:#fff; } @media (max-width:860px){ .tech-row{ margin:0 -5vw; padding-left:5vw; padding-right:5vw; } } /* sections alternate grey / white; features box flips to stay visible */
.ip-sec, body.lang-en .ip-sec{ background:#fff; } /* white after the grey Core Technology 03 */
.ti-fig img{ mix-blend-mode:multiply; } /* white canvas of the diagram blends into the grey section */
.ti-fig img{ mix-blend-mode:normal; } .ti-fig{ mix-blend-mode:multiply; } /* blend on the animated box itself, so it holds during the fade-in */
body.lang-en .ti-about p{ text-align:justify; text-justify:inter-word; text-align-last:left; hyphens:auto; -webkit-hyphens:auto; } /* English justified too; hyphenation keeps word gaps even */
/* phones/tablets: highlighted phrases flow as normal text; the underline follows each wrapped line
   (the box-wide ::after line landed in odd places and pushed a lone "." onto its own line) */
@media (max-width:860px){
  .tech-lead .hl, .product-quote .hl, .history-head h2 .hl, .ip-head h2 .hl, .tech-head h2 .hl,
  .about h2 .highlight, .s-head h2 .highlight{ display:inline; animation:none !important; }
  .tech-lead .hl::after, .product-quote .hl::after, .s-head h2 .highlight::after{ display:none; }
  .tech-lead .hl, .product-quote .hl, .s-head h2 .highlight{
    text-decoration:underline; text-decoration-thickness:.12em; text-underline-offset:.1em;
    text-decoration-color:color-mix(in srgb, var(--accent) 40%, transparent); text-decoration-skip-ink:none;
  }
  h1.no-br .hl-join, h2.no-br .hl-join{ white-space:normal; }
}/* body text is justified by default (last line stays left); English hyphenates so word gaps stay even */
.s-desc, .about .text, .values-body, .values-body p, .product-lead, .product-why p, .pc-text p, .ti-about p, .ti-feats li p,
.contract-lead, .cf-privacy, .a-body p, .a-body li{ text-align:justify; text-align-last:left; }
body.lang-en .s-desc, body.lang-en .about .text, body.lang-en .values-body, body.lang-en .values-body p, body.lang-en .product-lead,
body.lang-en .product-why p, body.lang-en .pc-text p, body.lang-en .ti-about p, body.lang-en .ti-feats li p,
body.lang-en .contract-lead, body.lang-en .cf-privacy, body.lang-en .a-body p, body.lang-en .a-body li{ text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }@media (max-width:600px){ .timeline > li, body.lang-en .timeline > li{ flex:0 0 calc(100vw - 5vw - 56px); width:auto; min-width:0; max-width:none; } .history-rail-wrap::after{ width:40px; } } /* phones: each year fits the screen with the next one peeking in, so text is never cut */
@media (max-width:860px){ .ti-feats li, .ti-feats li:first-child{ border-top:0; padding:0; } .ti-feats li + li{ margin-top:26px; } .ti-feats h5{ margin-bottom:10px; padding-bottom:10px; } } /* phones: one rule per feature (under its title), space between features */
@media (max-width:860px){ .product-quote{ min-height:0; padding-top:64px; padding-bottom:64px; } .product-quote p{ line-height:1.6; } } /* phones: quote sized to its text, normal line spacing */
body.lang-en p, body.lang-en li, body.lang-en td{ text-justify:inter-word !important; } /* English never spreads letters apart */
@media (max-width:860px){ .deploy-table thead th:first-child, .deploy-table tbody th{ width:34%; } .deploy-table tbody th{ word-break:normal; overflow-wrap:normal; hyphens:manual; } body.lang-en .deploy-table tbody th{ font-size:15px; } } /* phones: row labels break between words only */
@media (max-width:860px){ .product-quote p, .product-quote p.quote-en{ line-height:1.6 !important; } }

.a-body u{ text-decoration:none; } /* imported articles underline whole lead paragraphs; bold is enough */
@media (max-width:860px){ .s-desc br, .about .text br, .values-body br, .product-lead br, .pc-text br, .ti-about br, .contract-lead br{ display:none; } } /* phones: desktop line breaks inside body text would leave ragged lines */
.s-desc p, .about .text p{ text-align:justify; text-align-last:left; text-wrap:wrap; } body.lang-en .s-desc p, body.lang-en .about .text p{ hyphens:auto; -webkit-hyphens:auto; } /* home body text justified too */

@media (max-width:860px){
  body.lang-en .s-desc p, body.lang-en .about .text p, body.lang-en .s-item p, body.lang-en .values-body, body.lang-en .values-body p, body.lang-en .product-lead, body.lang-en .product-why p,
  body.lang-en .pc-text p, body.lang-en .ti-about p, body.lang-en .ti-feats li p, body.lang-en .tech-panel p, body.lang-en .tech-intro-block li,
  body.lang-en .contract-lead, body.lang-en .cf-privacy, body.lang-en .a-body p, body.lang-en .a-body li{ text-align:left !important; hyphens:manual; -webkit-hyphens:manual; }
} /* phones: English body text left-aligned (too few words per line to justify without gaps); Korean stays justified */

.sharedaddy, .jp-relatedposts, #jp-relatedposts, .jetpack-likes-widget-wrapper{ display:none !important; } /* WordPress.com share / like / related blocks under articles */