/* ============================================================
   pages.css — sub-page templates (about · products · detail · industries · references · service · contact · soon)
   Minimum text size 12px. Labels: Manrope 600, tracked, uppercase, tabular numerals.
   ============================================================ */

/* ---------- page hero ---------- */
.page-hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 5vw, 72px); background: var(--ivory); border-bottom: 1px solid var(--line); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); }
.crumbs a:hover { color: var(--ink); }
.crumbs i { width: 14px; height: 1px; background: var(--ink-35); }
.crumbs b { color: var(--red); font-weight: 600; }
.page-hero .ph-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px 72px; align-items: end; }
.page-hero h1 { font-family: var(--font-en); font-weight: 700; font-size: clamp(40px, 5.6vw, 92px); letter-spacing: -.045em; line-height: .98; }
.page-hero h1 .ko { display: block; font-family: var(--font-ko); font-size: .42em; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; margin-top: 18px; color: var(--ink-80); }
.page-hero .lead { max-width: 520px; }
.page-hero.navy { background: var(--navy); color: var(--on-navy); border-color: var(--navy-line); }
.page-hero.navy h1 .ko { color: var(--on-navy-70); }
.page-hero.navy .crumbs { color: var(--on-navy-50); } .page-hero.navy .crumbs i { background: var(--on-navy-50); }
.page-hero .ph-media { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; pointer-events: none; }
.page-hero .ph-media img { position: absolute; right: -6%; top: 50%; width: 118%; max-width: none; transform: translateY(-50%); mix-blend-mode: multiply; filter: saturate(.55) contrast(1.05); }
.page-hero.has-media .ph-grid { grid-template-columns: minmax(0, 1fr); max-width: 56%; }
.subnav { position: sticky; top: var(--nav-h); z-index: 50; background: rgba(243,241,234,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.subnav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-65); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--ink); }
.subnav a.is-active { color: var(--ink); border-color: var(--red); }

/* ---------- generic blocks ---------- */
.block-head { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px 64px; align-items: start; margin-bottom: clamp(32px, 4vw, 56px); }
.block-head .eyebrow { grid-column: 1 / -1; }
.block-head .lead { max-width: 640px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 80px; align-items: start; }
.prose p + p { margin-top: 1.2em; }
.prose p { color: var(--ink-80); line-height: 1.85; }
.prose .sign { margin-top: 36px; display: flex; align-items: baseline; gap: 14px; }
.prose .sign small { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50); }
.prose .sign b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.quote { position: relative; padding-left: 28px; border-left: 3px solid var(--red); font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.03em; line-height: 1.5; }
.kv-table { border-top: 1px solid var(--line-2); }
.kv-table div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.kv-table dt { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); padding-top: 4px; }
.kv-table dd { color: var(--ink); }
.on-navy .kv-table { border-color: var(--navy-line-2); } .on-navy .kv-table div { border-color: var(--navy-line); } .on-navy .kv-table dt { color: var(--on-navy-50); } .on-navy .kv-table dd { color: var(--on-navy); }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 240px; padding: 28px; background: var(--paper); transition: background .3s; }
.card:hover { background: #fff; }
.card .idx { color: var(--red); }
.card .ic { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); color: var(--blue); }
.card .ic svg { width: 20px; height: 20px; }
.card h3 { font-size: 20px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; }
.card h3 small { display: block; margin-top: 4px; font-family: var(--font-en); font-size: 13px; font-weight: 600; color: var(--ink-50); letter-spacing: 0; }
.card p { font-size: 14px; line-height: 1.7; color: var(--ink-65); }
.card .link-arrow { margin-top: auto; align-self: flex-start; font-size: 13px; }
.card.navy { background: var(--navy); color: var(--on-navy); } .card.navy p { color: var(--on-navy-70); } .card.navy .ic { border-color: var(--navy-line-2); color: var(--blue-soft); } .card.navy h3 small { color: var(--on-navy-50); } .card.navy .link-arrow { color: var(--on-navy); }
.on-navy .card-grid { background: var(--navy-line); border-color: var(--navy-line); } .on-navy .card { background: var(--navy); color: var(--on-navy); } .on-navy .card:hover { background: var(--navy-2); } .on-navy .card p { color: var(--on-navy-70); } .on-navy .card .ic { border-color: var(--navy-line-2); color: var(--blue-soft); } .on-navy .card h3 small { color: var(--on-navy-50); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.note { padding: 20px 24px; border: 1px solid var(--line-2); border-left: 3px solid var(--blue); font-size: 14px; line-height: 1.7; color: var(--ink-80); background: var(--paper); }
.note b { font-weight: 700; }
.figure-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.figure-strip .frame { aspect-ratio: 4 / 3; }
.figure-strip .frame img.render { object-fit: contain; padding: 16px; background: var(--ivory-2); }

/* ---------- values (about) ---------- */
.value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--navy-line); border: 1px solid var(--navy-line); }
.value-cell { min-height: 300px; padding: 28px; background: var(--navy); display: flex; flex-direction: column; }
.value-cell .idx { color: #FF8A8D; }
.value-cell:nth-child(even) .idx { color: var(--blue-soft); }
.value-cell h3 { margin-top: 64px; font-family: var(--font-en); font-weight: 700; font-size: 30px; letter-spacing: -.03em; }
.value-cell h3 small { display: block; margin-top: 4px; font-family: var(--font-ko); font-size: 14px; font-weight: 500; color: var(--on-navy-70); }
.value-cell p { margin-top: 14px; font-size: 14px; line-height: 1.65; color: var(--on-navy-70); }
.mvv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-bottom: 48px; }
.mvv div { padding-top: 20px; border-top: 1px solid var(--navy-line-2); }
.mvv dt { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-50); }
.mvv dd { margin-top: 12px; font-family: var(--font-en); font-weight: 600; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -.03em; line-height: 1.3; }
.mvv dd small { display: block; margin-top: 8px; font-family: var(--font-ko); font-size: 14px; font-weight: 400; color: var(--on-navy-70); letter-spacing: -.01em; }

/* ---------- timeline (about) ---------- */
.tl-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 32px; }
.tl-filter button { height: 36px; padding: 0 14px; font-family: var(--font-en); font-size: 13px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; border: 1px solid var(--line-2); color: var(--ink-65); transition: .2s; }
.tl-filter button:hover { border-color: var(--ink); color: var(--ink); }
.tl-filter button.is-active { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.timeline { position: relative; border-top: 1px solid var(--line-2); }
.tl-item { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.tl-item .yr { font-family: var(--font-en); font-weight: 700; font-size: 28px; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.tl-item .yr small { display: block; margin-top: 6px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--ink-50); text-transform: uppercase; }
.tl-item ul { display: grid; gap: 6px; }
.tl-item li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.6; color: var(--ink-80); }
.tl-item li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--ink-50); }
.tl-item li.hl::before { background: var(--red); width: 10px; height: 3px; top: 10px; }
.tl-item li .tag-s { margin-left: 8px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.tl-item.is-era { background: var(--paper); margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
.tl-photos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 40px; }
.tl-photos .frame { aspect-ratio: 4 / 3; }
.tl-photos .frame .cap { left: 12px; right: 12px; bottom: 10px; }

/* ---------- patents & certs (about) ---------- */
.cert-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 48px; }
.cert-card { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 22px 24px; background: var(--paper); }
.cert-card .yr { font-family: var(--font-en); font-weight: 700; font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--blue); }
.cert-card b { display: block; font-size: 15px; font-weight: 700; } .cert-card small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-65); }
.patent-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; margin-bottom: 40px; }
.patent-grid figure { aspect-ratio: 99 / 140; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.patent-grid figure:hover { transform: translateY(-4px); box-shadow: 0 20px 30px -20px rgba(11,23,43,.4); }
.patent-grid img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.05); }
.patent-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.patent-table th { padding: 12px 12px 12px 0; text-align: left; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); border-bottom: 1px solid var(--line-2); }
.patent-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-80); }
.patent-table td.no { font-family: var(--font-en); font-size: 13px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-65); }
.patent-table td.yr { font-family: var(--font-en); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.patent-table td .badge { height: 20px; padding: 0 6px; margin-left: 6px; }
.patent-wrap { max-height: 520px; overflow: auto; border-bottom: 1px solid var(--line-2); }

/* ---------- org (about) ---------- */
.org { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.org-cell { padding: 22px 20px; border: 1px solid var(--line-2); background: var(--paper); min-height: 150px; display: flex; flex-direction: column; gap: 8px; }
.org-cell .idx { color: var(--red); }
.org-cell b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.org-cell p { font-size: 13px; line-height: 1.6; color: var(--ink-65); }
.org-top { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.org-top .org-cell { background: var(--navy); color: var(--on-navy); border-color: var(--navy); min-height: 0; } .org-top .org-cell p { color: var(--on-navy-70); } .org-top .org-cell .idx { color: var(--blue-soft); }

/* ---------- location ---------- */
.loc-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: stretch; }
.loc-photo { position: relative; min-height: 440px; overflow: hidden; background: var(--navy); }
.loc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) contrast(1.08) brightness(.92); }
.loc-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,23,43,0) 40%, rgba(11,23,43,.75)); }
.loc-photo .addr { position: absolute; left: 28px; right: 28px; bottom: 24px; z-index: 2; color: #fff; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.loc-photo .addr b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.loc-photo .addr span { display: block; margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.8); }
.loc-photo .addr .label { color: rgba(255,255,255,.7); }
.loc-card { display: flex; flex-direction: column; gap: 20px; padding: 32px; background: var(--paper); border: 1px solid var(--line-2); }
.loc-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.loc-card .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

/* ---------- tabs (products) ---------- */
.tabbar { display: flex; gap: 0; border-bottom: 1px solid var(--line-2); margin-bottom: clamp(32px, 4vw, 56px); }
.tabbar [role=tab] { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 24px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s; }
.tabbar [role=tab]:hover { color: var(--ink); }
.tabbar [role=tab].is-active { color: var(--ink); border-color: var(--red); }
.product-rows { border-top: 1px solid var(--line-2); }
.product-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 340px; gap: 32px; align-items: center; padding: 36px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.product-row .pr-name h3 { font-family: var(--font-en); font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.03em; line-height: 1.1; }
.product-row .pr-name h3 small { display: block; margin-top: 6px; font-family: var(--font-ko); font-size: 14px; font-weight: 500; color: var(--ink-65); letter-spacing: -.01em; }
.product-row .pr-name .badge { margin-top: 12px; }
.product-row .pr-desc p { font-size: 14px; line-height: 1.7; color: var(--ink-80); }
.product-row .pr-desc .chip-row { margin-top: 12px; }
.product-row .pr-desc .chip-row span { font-family: var(--font-en); font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 4px 7px; border: 1px solid var(--line); color: var(--ink-65); font-variant-numeric: tabular-nums; }
.product-row .pr-desc .link-arrow { margin-top: 18px; font-size: 13px; }
.product-row .pr-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ivory-2); }
.product-row .pr-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: saturate(.55) contrast(1.05); transition: transform .8s var(--ease); }
.product-row:hover .pr-media img { transform: scale(1.04); }
.product-row .pr-media img.r3d { transform: scale(1.3); }
.product-row:hover .pr-media img.r3d { transform: scale(1.34); }
.product-row .pr-media.photo img { object-fit: cover; mix-blend-mode: normal; filter: saturate(.6) contrast(1.05); }
.product-row .pr-media .cap { position: absolute; left: 12px; bottom: 10px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--ink-65); text-transform: uppercase; }
.matrix-wrap { overflow-x: auto; border: 1px solid var(--line-2); }
.matrix { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 13px; background: var(--paper); }
.matrix th, .matrix td { padding: 14px 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; vertical-align: middle; }
.matrix th { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-65); background: var(--ivory); }
.matrix th:first-child, .matrix td:first-child { text-align: left; min-width: 180px; background: var(--ivory); font-family: var(--font-ko); font-weight: 700; font-size: 14px; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.matrix td:first-child small { display: block; font-family: var(--font-en); font-size: 12px; font-weight: 600; color: var(--ink-50); margin-top: 2px; }
.matrix .y { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: var(--ivory); }
.matrix .y svg { width: 12px; height: 12px; }
.matrix .y.b { background: var(--blue); }
.matrix .soon { font-size: 12px; color: var(--blue); }
.matrix a { color: inherit; } .matrix a:hover { color: var(--blue); }
.ind-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 32px; }
.ind-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--paper); min-height: 220px; transition: background .3s; }
.ind-card:hover { background: #fff; }
.ind-card .frame { aspect-ratio: 16 / 9; margin: -24px -24px 8px; }
.ind-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.ind-card h3 small { display: block; margin-top: 4px; font-family: var(--font-en); font-size: 12px; font-weight: 600; color: var(--ink-50); }
.ind-card p { font-size: 13px; line-height: 1.6; color: var(--ink-65); }
.ind-card .prods { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.ind-card .prods span { font-family: var(--font-en); font-size: 12px; font-weight: 600; padding: 3px 6px; border: 1px solid var(--line); color: var(--ink-65); }

/* ---------- product detail ---------- */
.pd-hero { position: relative; overflow: hidden; background: var(--ivory); min-height: min(78vh, 760px); display: grid; align-items: center; border-bottom: 1px solid var(--line); }
.pd-hero .stage { position: absolute; inset: 0; }
.pd-hero .stage::after { display: none; }
.pd-hero .stage .box { position: absolute; top: 50%; left: 50%; width: var(--w, 62vw); max-width: 2200px; min-width: 760px; aspect-ratio: var(--ar, 2400 / 1534); transform: translate(var(--tx, -8%), -50%); }
.pd-hero .stage .box::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -3%; height: 16%; background: radial-gradient(ellipse at center, rgba(11,23,43,.20), rgba(11,23,43,0) 68%); }
.pd-hero .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pd-hero .stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pd-hero .stage .ovl-labels { position: absolute; inset: 0; pointer-events: none; }
.pd-hero .copy { position: relative; z-index: 2; padding: clamp(40px, 6vw, 80px) 0; max-width: 620px; }
.pd-hero .copy h1 { font-family: var(--font-en); font-weight: 700; font-size: clamp(44px, 6vw, 96px); letter-spacing: -.05em; line-height: .96; }
.pd-hero .copy h1 .ko { display: block; margin-top: 16px; font-family: var(--font-ko); font-size: .3em; font-weight: 700; letter-spacing: -.03em; line-height: 1.35; color: var(--ink-80); }
.pd-hero .copy .lead { margin: 24px 0 32px; max-width: 480px; }
.pd-hero .copy .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.pd-hero .models { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.pd-hero .models span { font-family: var(--font-en); font-size: 12px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; padding: 6px 10px; border: 1px solid var(--line-2); color: var(--ink-80); background: rgba(251,249,244,.7); }
.pd-nav { position: sticky; top: var(--nav-h); z-index: 50; background: rgba(243,241,234,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.pd-nav .inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pd-nav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pd-nav ul::-webkit-scrollbar { display: none; }
.pd-nav ul a { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 14px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-65); white-space: nowrap; }
.pd-nav ul a:hover { color: var(--ink); }
.pd-nav .btn { flex: none; }
.cap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.cap-grid > .cap { padding-top: 20px; border-top: 1px solid var(--line-2); }
.cap-grid > .cap .idx { color: var(--red); }
.cap-grid > .cap:nth-child(even) .idx { color: var(--blue); }
.cap-grid > .cap h3 { margin-top: 14px; font-family: var(--font-en); font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.cap-grid > .cap h3 small { display: block; margin-top: 4px; font-family: var(--font-ko); font-size: 13px; font-weight: 500; color: var(--ink-65); }
.cap-grid > .cap p { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--ink-65); }
.proc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--navy-line-2); }
.proc-step { position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 300px; padding: 24px; border-right: 1px solid var(--navy-line); }
.proc-step:last-child { border-right: 0; }
.proc-step .idx { color: #FF8A8D; }
.proc-step .vis { height: 110px; display: grid; place-items: center; }
.proc-step .vis svg { width: 110px; height: 110px; overflow: visible; }
.proc-step h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.proc-step h3 small { display: block; margin-top: 4px; font-family: var(--font-en); font-size: 12px; font-weight: 600; color: var(--on-navy-50); }
.proc-step p { font-size: 13px; line-height: 1.65; color: var(--on-navy-70); }
.proc-step::after { content: ""; position: absolute; right: -7px; top: 50%; z-index: 2; width: 12px; height: 12px; border-right: 1px solid var(--on-navy-70); border-top: 1px solid var(--on-navy-70); transform: translateY(-50%) rotate(45deg); background: var(--navy); }
.proc-step:last-child::after { display: none; }
.proc-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 20px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--on-navy-70); text-transform: uppercase; }
/* carton fold animation */
.fold { stroke: #F3F1EA; stroke-width: 1.4; fill: rgba(243,241,234,.08); stroke-linejoin: round; }
.fold.red { stroke: #FF8A8D; }
.fold.fill { fill: rgba(243,241,234,.22); }
.fold-item { fill: #FF8A8D; }
.spin-slow { transform-box: fill-box; transform-origin: center; animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.slide-x { animation: slide-x 2.4s ease-in-out infinite; }
@keyframes slide-x { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(10px); } }
.flap-anim { transform-box: fill-box; transform-origin: left center; animation: flap 2.6s ease-in-out infinite; }
@keyframes flap { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-70deg); } }
.drop-anim { animation: dropy 2.4s ease-in-out infinite; }
@keyframes dropy { 0%, 100% { transform: translateY(-14px); opacity: .4; } 50% { transform: translateY(6px); opacity: 1; } }
.spec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 64px; align-items: start; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table th { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); border-color: var(--line-2); }
.spec-table td.m { font-family: var(--font-en); font-size: 14px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spec-table td .ask { font-size: 12px; font-weight: 600; color: var(--blue); }
.spec-note { margin-top: 16px; font-size: 13px; color: var(--ink-65); line-height: 1.7; }
.video-block { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
.video-block video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.68) contrast(1.05); }
.video-block .ovl { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 28px; background: linear-gradient(180deg, transparent 50%, rgba(11,23,43,.6)); color: #fff; }
.video-block .ovl .cap { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.video-block .ovl .cap b { display: block; font-family: var(--font-ko); font-size: 18px; font-weight: 700; letter-spacing: -.02em; text-transform: none; margin-top: 6px; }
.video-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.video-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.video-item { display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; align-items: center; padding: 14px; background: var(--paper); text-align: left; transition: background .2s; }
.video-item:hover { background: #fff; }
.video-item .th { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
.video-item .th img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6); }
.video-item .th svg { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); color: #fff; }
.video-item b { display: block; font-size: 14px; font-weight: 700; }
.video-item small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-50); }
.video-item .dur { font-family: var(--font-en); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-50); }
.applied { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.applied div { padding: 18px; background: var(--paper); font-size: 14px; font-weight: 600; }
.applied div small { display: block; margin-top: 4px; font-family: var(--font-en); font-size: 12px; font-weight: 600; color: var(--ink-50); }
.gallery { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 280px 280px; gap: 12px; }
.gallery .frame:first-child { grid-row: 1 / 3; }
.gallery .frame img.render { object-fit: contain; padding: 20px; background: var(--ivory-2); }
.gate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--line-2); }
.gate .doc { display: flex; gap: 24px; padding: 36px; background: var(--paper); }
.gate .doc .thumb { flex: none; width: 150px; aspect-ratio: 210 / 297; background: var(--navy); color: var(--on-navy); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.gate .doc .thumb img { width: 90px; }
.gate .doc .thumb .label { color: var(--on-navy-70); }
.gate .doc .thumb b { font-family: var(--font-en); font-weight: 700; font-size: 18px; letter-spacing: -.02em; line-height: 1.1; }
.gate .doc h3 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.gate .doc p { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--ink-65); }
.gate .doc ul { margin-top: 16px; display: grid; gap: 6px; font-size: 13px; color: var(--ink-80); }
.gate .doc li { display: flex; gap: 8px; align-items: center; } .gate .doc li svg { width: 14px; height: 14px; color: var(--blue); }
.gate form { padding: 36px; background: var(--navy); color: var(--on-navy); border-left: 1px solid var(--line-2); }
.gate form .eyebrow { margin-bottom: 18px; }
.gate form h3 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.contact-strip { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.contact-strip .persons { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--navy-line-2); border: 1px solid var(--navy-line-2); }
.contact-strip .person { padding: 24px; background: var(--navy); }
.contact-strip .person .label { color: var(--on-navy-50); }
.contact-strip .person b { display: block; margin-top: 10px; font-size: 16px; font-weight: 700; }
.contact-strip .person a { display: block; margin-top: 8px; font-family: var(--font-en); font-size: 14px; font-weight: 600; color: var(--on-navy-70); }
.contact-strip .person a:hover { color: var(--on-navy); }

/* ---------- industries ---------- */
.ind-section { padding: clamp(56px, 6vw, 96px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 56px); }
.ind-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px 72px; align-items: start; }
.ind-grid h2 { font-size: clamp(30px, 3vw, 44px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }
.ind-grid h2 small { display: block; margin-top: 8px; font-family: var(--font-en); font-size: 14px; font-weight: 600; color: var(--ink-50); }
.ind-grid .lead { margin-top: 20px; font-size: 16px; }
.ind-grid .ind-prods { margin-top: 24px; }
.ind-grid .ind-prods h4 { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 10px; }
.ind-media { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 220px 220px; gap: 12px; }
.ind-media .frame:first-child { grid-row: 1 / 3; }
.ind-media .frame img.render { object-fit: contain; padding: 16px; background: var(--ivory-2); }
.ind-media.single { grid-template-columns: 1fr; grid-template-rows: 440px; }
.ind-section.is-soon { background: var(--paper); }
.ind-soon-box { grid-column: 1 / -1; display: grid; place-items: center; min-height: 300px; border: 1px dashed var(--line-2); text-align: center; padding: 32px; }
.ind-soon-box b { display: block; margin-top: 14px; font-size: 20px; font-weight: 700; }
.ind-soon-box p { margin-top: 8px; font-size: 14px; color: var(--ink-65); max-width: 420px; }
.ex-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.ex-list span { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); background: var(--paper); font-size: 13px; }
.ex-list span::before { content: ""; width: 6px; height: 6px; background: var(--red); flex: none; }
.ex-list span:nth-child(even)::before { background: var(--blue); }

/* ---------- references ---------- */
.client-groups { display: grid; gap: 48px; }
.client-group h3 { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); }
.client-group h3 i { flex: 1; height: 1px; background: var(--line); }
.client-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.client-cell { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 104px; padding: 18px 20px; background: var(--paper); transition: background .2s; }
.client-cell:hover { background: #fff; }
.client-cell b { font-family: var(--font-en); font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--ink-80); }
.client-cell b.ko { font-family: var(--font-ko); font-weight: 700; letter-spacing: -.03em; }
.client-cell span { font-size: 12px; color: var(--ink-50); }
.case-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.case-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line-2); background: var(--paper); }
.case-card .media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
.case-card .media img, .case-card .media video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) contrast(1.05); }
.case-card .media img.cut { object-fit: contain; padding: 24px; background: var(--ivory-2); }
.ind-card .frame.plain img.cut, .gallery .frame img.cut, .case-item .frame img.cut, .news-card .frame img.cut { object-fit: contain; background: var(--ivory-2); }
.case-card .media .play { position: absolute; left: 20px; bottom: 20px; color: #fff; }
.case-card .media .play .disc { width: 44px; height: 44px; }
.case-card .media .tagline { position: absolute; top: 16px; left: 16px; display: inline-flex; gap: 8px; padding: 6px 10px; background: rgba(11,23,43,.75); color: #fff; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.case-card .body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.case-card .body .meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); }
.case-card .body h3 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; }
.case-card .body dl { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; font-size: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.case-card .body dt { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); padding-top: 2px; }
.case-card .body dd { color: var(--ink-80); }

/* ---------- service ---------- */
.process-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.process-list .st { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 220px; padding: 26px 26px 28px; background: var(--paper); }
.process-list .st .n { font-family: var(--font-en); font-weight: 700; font-size: 28px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--red); line-height: 1; }
.process-list .st:nth-child(even) .n { color: var(--blue); }
.process-list .st h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.process-list .st h3 small { display: block; margin-top: 4px; font-family: var(--font-en); font-size: 12px; font-weight: 600; color: var(--ink-50); }
.process-list .st p { font-size: 14px; line-height: 1.65; color: var(--ink-65); }
.process-list .st .who { margin-top: auto; padding-top: 12px; font-size: 12px; font-weight: 600; color: var(--ink-50); }
.process-list .st.key { background: var(--navy); color: var(--on-navy); } .process-list .st.key p { color: var(--on-navy-70); } .process-list .st.key h3 small, .process-list .st.key .who { color: var(--on-navy-50); } .process-list .st.key .n { color: var(--blue-soft); }
.svc-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px 72px; align-items: start; }
.svc-grid h2 { font-size: clamp(28px, 2.8vw, 40px); font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
.svc-grid h2 small { display: block; margin-top: 8px; font-family: var(--font-en); font-size: 14px; font-weight: 600; color: var(--ink-50); }
.svc-grid .lead { margin-top: 18px; font-size: 16px; }
.svc-points { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.svc-point { padding: 22px 24px; background: var(--paper); }
.svc-point .ic { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); color: var(--blue); margin-bottom: 14px; } .svc-point .ic svg { width: 18px; height: 18px; }
.svc-point b { display: block; font-size: 16px; font-weight: 700; }
.svc-point p { margin-top: 6px; font-size: 13px; line-height: 1.65; color: var(--ink-65); }
.svc-section { padding: clamp(56px, 6vw, 96px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 56px); }
.dl-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dl-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 18px 24px; background: var(--paper); }
.dl-item .ic { display: grid; place-items: center; width: 56px; height: 56px; background: var(--navy); color: var(--on-navy); } .dl-item .ic svg { width: 22px; height: 22px; }
.dl-item b { display: block; font-size: 16px; font-weight: 700; }
.dl-item small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-50); }
.dl-item .lang { font-family: var(--font-en); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ink-65); }
.acc { border-top: 1px solid var(--line-2); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn { display: grid; grid-template-columns: 48px 1fr 32px; gap: 16px; align-items: center; width: 100%; padding: 22px 0; text-align: left; }
.acc-btn .q { font-family: var(--font-en); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--red); }
.acc-btn b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.acc-btn svg { width: 20px; height: 20px; color: var(--ink-50); transition: transform .3s var(--ease); justify-self: end; }
.acc-item.is-open .acc-btn svg { transform: rotate(45deg); }
.acc-panel { display: none; padding: 0 0 26px 64px; font-size: 15px; line-height: 1.75; color: var(--ink-80); max-width: 760px; }
.acc-item.is-open .acc-panel { display: block; }
.ask-box { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; margin-top: 48px; border: 1px solid var(--navy); }
.ask-box .intro { padding: 36px; background: var(--navy); color: var(--on-navy); }
.ask-box .intro h3 { margin-top: 18px; font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; }
.ask-box .intro p { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--on-navy-70); }
.ask-box .intro ul { margin-top: 20px; display: grid; gap: 8px; font-size: 13px; }
.ask-box .intro li { display: flex; gap: 10px; align-items: center; } .ask-box .intro li svg { width: 14px; height: 14px; color: var(--blue-soft); }
.ask-box form { padding: 36px; background: var(--paper); }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 20px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; }
.field label { display: flex; align-items: center; gap: 8px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-65); }
.field label .req { color: var(--red); }
.field label .opt { color: var(--ink-35); font-size: 12px; letter-spacing: .04em; }
.field .ctl { position: relative; }
.field input, .field select, .field textarea { width: 100%; min-height: var(--field-h); padding: 0 16px; background: var(--paper); border: 1px solid var(--line-2); color: var(--ink); font-size: 15px; transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; border-radius: 0; }
.field textarea { min-height: 160px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.field select { padding-right: 44px; cursor: pointer; }
.field .ctl > svg { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; color: var(--ink-50); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-35); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.field .hint { font-size: 12px; color: var(--ink-50); }
.field .msg { display: none; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.field .msg svg { width: 14px; height: 14px; }
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.field.is-error .msg.err { display: inline-flex; color: var(--red); }
.field.is-error label { color: var(--red); }
.field.is-valid input, .field.is-valid select, .field.is-valid textarea { border-color: var(--blue); }
.field.is-valid .msg.ok { display: inline-flex; color: var(--blue); }
.field.is-valid .hint { display: none; }
.field .unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--font-en); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ink-50); pointer-events: none; }
.on-navy .field label { color: var(--on-navy-70); }
.on-navy .field input, .on-navy .field select, .on-navy .field textarea { background: rgba(255,255,255,.04); border-color: var(--navy-line-2); color: var(--on-navy); }
.on-navy .field input::placeholder { color: var(--on-navy-50); }
.on-navy .field select option { color: var(--ink); }
.on-navy .field .ctl > svg { color: var(--on-navy-70); }
.on-navy .field .hint { color: var(--on-navy-50); }
.on-navy .field.is-error label { color: #FF8A8D; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.6; cursor: pointer; }
.check input { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 2px 0 0; flex: none; appearance: none; -webkit-appearance: none; border: 1px solid var(--line-2); background: var(--paper); display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--navy); border-color: var(--navy); }
.check input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--ivory); border-bottom: 2px solid var(--ivory); transform: translateY(-1px) rotate(-45deg); }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.on-navy .check input { background: rgba(255,255,255,.04); border-color: var(--navy-line-2); }
.on-navy .check input:checked { background: var(--ivory); border-color: var(--ivory); }
.on-navy .check input:checked::after { border-color: var(--navy); }
.field.is-error .check input { border-color: var(--red); }
.file-drop { position: relative; display: grid; place-items: center; gap: 8px; min-height: 140px; padding: 24px; border: 1px dashed var(--line-2); background: var(--paper); text-align: center; transition: border-color .2s, background .2s; }
.file-drop.is-over { border-color: var(--blue); background: var(--blue-light); }
.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop svg { width: 24px; height: 24px; color: var(--blue); }
.file-drop b { font-size: 14px; font-weight: 600; }
.file-drop small { font-size: 12px; color: var(--ink-50); }
.file-list { display: grid; gap: 6px; margin-top: 10px; }
.file-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); background: var(--paper); font-size: 13px; }
.file-list li svg { color: var(--blue); flex: none; }
.file-list li em { margin-left: auto; font-family: var(--font-en); font-size: 12px; font-weight: 600; font-style: normal; color: var(--ink-50); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.on-navy .form-foot { border-color: var(--navy-line-2); }
.form-foot .legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-50); }
.form-foot .legend .req { color: var(--red); }
.fieldset-head { display: flex; align-items: center; gap: 14px; margin: 36px 0 18px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); }
.fieldset-head:first-child { margin-top: 0; }
.fieldset-head i { flex: 1; height: 1px; background: var(--line); }
.fieldset-head .n { color: var(--red); }
.on-navy .fieldset-head i { background: var(--navy-line); }

/* ---------- contact page ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 48px; align-items: start; }
.contact-side { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.contact-side > div { padding: 24px 26px; background: var(--paper); }
.contact-side .label { color: var(--ink-50); }
.contact-side b { display: block; margin-top: 10px; font-size: 16px; font-weight: 700; }
.contact-side a.big { display: block; margin-top: 8px; font-family: var(--font-en); font-size: 19px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.contact-side p { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--ink-65); }
.contact-side .navy { background: var(--navy); color: var(--on-navy); } .contact-side .navy .label { color: var(--on-navy-50); } .contact-side .navy p { color: var(--on-navy-70); }
.contact-side .steps { display: grid; gap: 10px; margin-top: 14px; }
.contact-side .steps span { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.contact-side .steps span i { display: grid; place-items: center; width: 24px; height: 24px; font-family: var(--font-en); font-size: 12px; font-weight: 700; font-style: normal; border: 1px solid var(--navy-line-2); color: var(--on-navy-70); }
.form-card { padding: clamp(24px, 3vw, 40px); background: var(--paper); border: 1px solid var(--line-2); }

/* ---------- 360° turntable (product detail) ---------- */
.tt-section { padding-top: 0; padding-bottom: 0; }
.turntable { position: relative; height: 260vh; }
.turntable.is-static { height: auto; padding: clamp(56px, 6vw, 96px) 0; }
.tt-sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); display: grid; align-items: start; padding-top: 28px; }
.turntable.is-static .tt-sticky { position: static; height: auto; padding-top: 0; }
.tt-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px 48px; align-items: end; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tt-head .eyebrow { grid-column: 1 / -1; margin-bottom: 4px; }
.tt-head h2 { font-size: clamp(24px, 2.2vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.tt-head .lead { font-size: 15px; line-height: 1.6; max-width: 600px; }
.tt-stage { position: relative; width: min(100%, calc((100vh - var(--nav-h) - 310px) * 1.6)); aspect-ratio: 1600 / 1000; margin: 0 auto; }
@media (max-width: 1024px) { .tt-head { grid-template-columns: 1fr; } }
.turntable.is-static .tt-stage { width: 100%; }
.tt-stage img.tt-fallback, .tt-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tt-stage img.tt-fallback { object-fit: contain; }
.tt-stage canvas { cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity .4s; }
.tt-stage canvas.is-dragging { cursor: grabbing; }
.turntable.is-live .tt-stage canvas { opacity: 1; }
.turntable.is-live .tt-stage img.tt-fallback { visibility: hidden; }
.turntable.is-static .tt-stage canvas { display: none; }
.tt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.tt-views { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-views button { height: 36px; padding: 0 12px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .08em; border: 1px solid var(--line-2); color: var(--ink-65); transition: .2s; }
.tt-views button:hover { border-color: var(--ink); color: var(--ink); }
.tt-views button.is-on { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.tt-state { display: flex; align-items: center; gap: 14px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); white-space: nowrap; }
.tt-state b { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.tt-state .tt-view { color: var(--ink-80); text-transform: none; letter-spacing: 0; }
.tt-progress { display: block; width: 140px; height: 2px; background: var(--line); overflow: hidden; }
.tt-progress i { display: block; height: 100%; width: 0; background: var(--red); transition: width .15s linear; }
.tt-hint { font-family: var(--font-ko); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-50); transition: opacity .4s; }
.turntable.has-used .tt-hint { opacity: 0; }
.turntable.is-static .tt-hint { display: none; }
@media (max-width: 720px) { .tt-bar { flex-direction: column; align-items: flex-start; } .tt-progress { display: none; } }

/* ---------- soon pages ---------- */
.soon-hero { position: relative; overflow: hidden; min-height: min(60vh, 640px); display: grid; align-items: center; padding: clamp(56px, 8vw, 120px) 0; background: var(--navy); color: var(--on-navy); }
.soon-hero .container { position: relative; }
.soon-hero h1 { font-family: var(--font-en); font-weight: 700; font-size: clamp(44px, 6.5vw, 108px); letter-spacing: -.05em; line-height: .96; margin-top: 24px; }
.soon-hero h1 .ko { display: block; margin-top: 18px; font-family: var(--font-ko); font-size: .36em; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; color: var(--on-navy-70); }
.soon-hero .lead { max-width: 560px; margin-top: 28px; color: var(--on-navy-70); }
.soon-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.soon-hero .sched { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 300px; padding: 24px; border: 1px solid var(--navy-line-2); background: rgba(11,23,43,.6); backdrop-filter: blur(8px); }
.soon-hero .sched .label { color: var(--on-navy-50); }
.soon-hero .sched ul { margin-top: 14px; display: grid; gap: 10px; }
.soon-hero .sched li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding-bottom: 10px; border-bottom: 1px solid var(--navy-line); }
.soon-hero .sched li b { font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--blue-soft); white-space: nowrap; }
.soon-hero .sched-photo { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; overflow: hidden; }
.soon-hero .sched-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.5) contrast(1.08) brightness(.7); }
.soon-hero .sched-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 0%, rgba(11,23,43,.3) 60%, rgba(11,23,43,.2)); }
.soon-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .product-row { grid-template-columns: minmax(0, 1fr) 300px; }
  .product-row .pr-desc { grid-column: 1; }
  .product-row .pr-media { grid-column: 2; grid-row: 1 / span 2; }
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .patent-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .org { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ind-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero .ph-media { display: none; }
  .page-hero.has-media .ph-grid { max-width: none; }
  .soon-hero .sched-photo { display: none; }
}
@media (max-width: 1024px) {
  .page-hero .ph-grid, .block-head, .two-col, .spec-grid, .ind-grid, .svc-grid, .loc-grid, .gate, .ask-box, .contact-grid, .contact-strip, .video-grid { grid-template-columns: 1fr; }
  .contact-side { position: static; }
  .card-grid, .cert-cards, .related, .soon-list, .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; gap: 1px; background: var(--navy-line-2); }
  .proc-step { border: 0; background: var(--navy); min-height: 0; }
  .proc-step::after { display: none; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 240px 240px; }
  .gallery .frame:first-child { grid-column: 1 / -1; grid-row: 1; }
  .tl-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mvv { grid-template-columns: 1fr; gap: 20px; }
  .case-cards { grid-template-columns: 1fr; }
  .gate form { border-left: 0; border-top: 1px solid var(--line-2); }
  .soon-hero .sched { position: static; transform: none; width: auto; margin-top: 32px; }
  .figure-strip { grid-template-columns: 1fr 1fr; }
  .ind-media { grid-template-columns: 1fr; grid-template-rows: 260px 200px 200px; }
  .ind-media .frame:first-child { grid-row: 1; }
  .ind-media.single { grid-template-rows: 320px; }
}
@media (max-width: 720px) {
  .page-hero h1 .ko { font-size: .5em; }
  .product-row { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .product-row .pr-desc { grid-column: 1; }
  .product-row .pr-media { grid-column: 1; grid-row: auto; }
  .card-grid, .card-grid.cols-2, .card-grid.cols-4, .cert-cards, .related, .soon-list, .ind-cards, .value-grid, .svc-points, .form-grid, .contact-strip .persons, .process-list { grid-template-columns: 1fr; }
  .client-grid { grid-template-columns: 1fr 1fr; }
  .client-cell { min-height: 84px; padding: 14px 16px; }
  .client-cell b { font-size: 16px; }
  .case-card .body .meta span { white-space: nowrap; }
  .case-card .body .meta span:first-child { white-space: normal; }
  .pd-hero .stage { overflow: hidden; }
  .pd-hero .stage svg { display: none; }
  .card { min-height: 0; padding: 22px; }
  .cap-grid { grid-template-columns: 1fr; gap: 20px; }
  .proc { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 1fr; gap: 10px; }
  .tl-item.is-era { margin: 0; padding-left: 0; padding-right: 0; }
  .tl-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .org { grid-template-columns: 1fr; } .org-top { grid-template-columns: 1fr; }
  .kv-table div { grid-template-columns: 1fr; gap: 4px; }
  .gallery { grid-template-columns: 1fr; grid-template-rows: 220px 200px 200px; }
  .gallery .frame:first-child { grid-column: 1; }
  .applied { grid-template-columns: 1fr 1fr; }
  .figure-strip { grid-template-columns: 1fr; }
  .gate .doc { flex-direction: column; padding: 24px; } .gate form { padding: 24px; }
  .ask-box .intro, .ask-box form { padding: 24px; }
  .acc-btn { grid-template-columns: 36px 1fr 24px; gap: 10px; padding: 18px 0; }
  .acc-btn b { font-size: 15px; }
  .acc-panel { padding-left: 46px; }
  .dl-item { grid-template-columns: 44px 1fr; gap: 12px; }
  .dl-item .ic { width: 44px; height: 44px; }
  .dl-item .lang { grid-column: 2; }
  .dl-item .btn { grid-column: 1 / -1; }
  .form-card { padding: 20px; }
  .contact-side > div { padding: 20px; }
  .loc-photo { min-height: 300px; }
  .loc-card { padding: 24px; }
  .video-item { grid-template-columns: 90px 1fr; } .video-item .dur { display: none; }
  .pd-nav .btn { display: none; }
  .pd-hero { min-height: 0; display: flex; flex-direction: column; }
  .pd-hero .stage { position: relative; width: 100%; height: 68vw; min-height: 240px; order: 2; overflow: hidden; }
  .pd-hero .stage .box { min-width: 0; width: var(--mw, 96vw); left: 50%; transform: translate(-50%, -50%); }
  .pd-hero .stage .ovl-labels { display: none; }
  .pd-hero .copy { order: 1; padding-bottom: 8px; }
  .tabbar [role=tab] { padding: 0 14px; }
}

/* ---------- no-3D clone: on-site media (replaces the 360° turntable) + cut-out module stage ---------- */
.ind-media.onsite { grid-template-rows: 300px 300px; }
.ind-media.onsite .frame video { filter: saturate(.7) contrast(1.05); }
.exploded .ex-stage.cutout { margin: 0 auto; }
.portrait-box { min-width: min(760px, 50vw); }
.pd-hero .stage .box { min-width: min(760px, 48vw); }
@media (max-width: 1024px) { .ind-media.onsite { grid-template-rows: 260px 200px 200px; } }