/* =========================================================
   HUBISLAB — Professional Clinical Skincare
   Airy / minimal / editorial design system
   ========================================================= */
:root{
  --white:#ffffff;
  --paper:#f6f5f1;
  --paper-2:#efede7;
  --line:#e8e5de;
  --ink:#1c2a2b;
  --ink-soft:#3a4849;
  --muted:#8a918f;
  --muted-2:#a7aca9;
  --accent:#2a9d8f;
  --accent-deep:#1f7d72;
  --accent-soft:#eaf4f2;
  --navy:#13201f;
  --maxw:1440px;
  --measure:760px;
  --gutter:clamp(20px,4vw,60px);
  --serif:"Pretendard","Inter",system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --sans:"Pretendard","Inter",system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
  --ease2:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
/* overflow-x lives on <html>, never on <body>. On body it turns body into a
   scroll container, and every position:sticky inside then measures against a box
   that does not scroll — which silently killed the pinned section rises on the
   technology pages while still computing correct-looking styles. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--white);font-size:16px;line-height:1.75;font-weight:350;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0;font-weight:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(90px,15vw,200px)}
.section.tight{padding-block:clamp(64px,9vw,120px)}
.measure{max-width:var(--measure)}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.eyebrow{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--accent);font-weight:500;display:inline-block}
.eyebrow.on-dark{color:#86c9bf}
.display{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:.005em}
.h-hero{font-size:clamp(2.8rem,7vw,6.4rem)}
.h-xl{font-size:clamp(2.4rem,5.6vw,4.6rem)}
.h-lg{font-size:clamp(2rem,4vw,3.3rem)}
.h-md{font-size:clamp(1.5rem,2.7vw,2.3rem)}
html[lang="ko"] .ko-thin{font-family:var(--sans);font-weight:300;letter-spacing:-.02em;line-height:1.22}
.lead{font-size:clamp(1rem,1.25vw,1.12rem);color:var(--ink-soft);line-height:1.95;font-weight:350}
.muted{color:var(--muted)}

.btn{display:inline-flex;align-items:center;gap:.7em;padding:1.05em 2em;font-size:.74rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;transition:.5s var(--ease);border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn .ar{transition:transform .5s var(--ease)}
.btn:hover{background:var(--ink);color:#fff}
.btn:hover .ar{transform:translateX(5px)}
.btn-accent{border-color:var(--accent);color:var(--accent)}
.btn-accent:hover{background:var(--accent);color:#fff}
.btn-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn-light:hover{background:#fff;color:var(--ink)}
.tlink{display:inline-flex;align-items:center;gap:.6em;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--ink);padding-bottom:6px;border-bottom:1px solid var(--ink);transition:.45s var(--ease)}
.tlink .ar{transition:transform .45s var(--ease)}
.tlink:hover{color:var(--accent);border-color:var(--accent)}
.tlink:hover .ar{transform:translateX(5px)}
.tlink.on-dark{color:#fff;border-color:rgba(255,255,255,.6)}
.tlink.on-dark:hover{color:#fff;border-color:#fff}

/* intro loader */
#intro{position:fixed;inset:0;z-index:9999;background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .9s var(--ease),visibility .9s}
#intro.done{opacity:0;visibility:hidden}
#intro .emblem{width:78px;height:78px;animation:spin 9s linear infinite}
#intro .wordmark{font-family:var(--serif);font-size:1.7rem;letter-spacing:.18em;color:var(--ink);opacity:0;animation:fadeUp 1s var(--ease) .25s forwards}
#intro .bar{width:0;height:1px;background:var(--accent);animation:bar 1.4s var(--ease) forwards}
@keyframes bar{to{width:120px}}
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:26px var(--gutter);transition:.5s var(--ease)}
.brand{display:flex;align-items:center;gap:12px}
.brand .emblem{width:36px;height:36px;animation:spin 16s linear infinite;flex:0 0 auto}
.brand .emblem [stroke]{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1;transition:stroke .5s}
.site-header.scrolled .brand .emblem [stroke]{stroke:var(--accent)}
.brand .wm{font-family:var(--serif);font-size:1.45rem;letter-spacing:.04em;color:#fff;transition:color .5s;line-height:1}
.brand .wm b{font-weight:600}
.nav{display:flex;gap:40px;align-items:center}
.nav>li{position:relative}
.nav>li>a{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#fff;padding:22px 0;display:block;transition:color .4s;opacity:.92}
.nav>li>a:hover{opacity:1}
.nav-actions{display:flex;align-items:center;gap:20px}
.lang-toggle{display:flex;align-items:center;gap:8px;font-size:.68rem;letter-spacing:.12em;font-weight:600}
.lang-toggle button{color:rgba(255,255,255,.55);transition:.3s;padding:2px}
.lang-toggle button.active{color:#fff}
.lang-toggle .sep{color:rgba(255,255,255,.4)}
.header-cta{font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.5);padding:11px 18px;transition:.45s var(--ease)}
.header-cta:hover{background:#fff;color:var(--ink)}
.dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:#fff;padding:14px;min-width:248px;box-shadow:0 30px 70px rgba(20,30,30,.12);opacity:0;visibility:hidden;transition:.4s var(--ease)}
.nav>li:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown a{display:block;padding:12px 14px;font-size:.82rem;letter-spacing:.02em;color:var(--ink);text-transform:none;font-weight:400;transition:.3s}
.dropdown a small{display:block;color:var(--muted);font-size:.7rem;margin-top:3px}
.dropdown a:hover{background:var(--accent-soft);color:var(--accent-deep)}
.site-header.scrolled{background:rgba(255,255,255,.9);backdrop-filter:blur(16px);padding-block:16px;box-shadow:0 1px 0 var(--line)}
.site-header.scrolled .brand .wm{color:var(--ink)}
.site-header.scrolled .nav>li>a{color:var(--ink)}
.site-header.scrolled .nav>li>a:hover{color:var(--accent)}
.site-header.scrolled .header-cta{color:var(--ink);border-color:var(--line)}
.site-header.scrolled .header-cta:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.site-header.scrolled .lang-toggle button{color:var(--muted-2)}
.site-header.scrolled .lang-toggle button.active{color:var(--ink)}
.site-header.scrolled .lang-toggle .sep{color:var(--muted-2)}
.site-header.scrolled .burger span{background:var(--ink)}
.burger{display:none;flex-direction:column;gap:6px;width:26px}
.burger span{height:1.5px;background:#fff;transition:.4s}
.drawer{position:fixed;inset:0;z-index:200;background:var(--white);color:var(--ink);transform:translateY(-100%);transition:.6s var(--ease);overflow-y:auto;padding:100px var(--gutter) 50px}
.drawer.open{transform:translateY(0)}
.drawer-close{position:absolute;top:30px;right:var(--gutter);font-size:1.8rem;color:var(--ink)}
.drawer h4{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:30px 0 8px}
.drawer a{display:block;font-family:var(--serif);font-size:1.7rem;padding:6px 0;color:var(--ink)}
.drawer .sub a{font-family:var(--sans);font-size:1rem;color:var(--ink-soft);padding:5px 0}
.drawer .lang-toggle button{color:var(--muted-2)}
.drawer .lang-toggle button.active{color:var(--ink)}
.drawer .lang-toggle .sep{color:var(--muted-2)}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-media img{animation:ken 24s ease-in-out infinite alternate;transform-origin:center}
@keyframes ken{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,22,21,.28),rgba(15,22,21,.05) 38%,rgba(15,22,21,.55))}
.hero-inner{width:100%;padding-bottom:clamp(60px,11vh,140px);padding-top:120px}
.hero .eyebrow{margin-bottom:26px}
.hero h1{font-weight:400;max-width:18ch}
.hero .lead{color:rgba(255,255,255,.86);max-width:46ch;margin-top:28px;font-weight:300}
.hero-cta{display:flex;flex-wrap:wrap;gap:26px;align-items:center;margin-top:44px}
.circle-badge{position:absolute;top:clamp(120px,17vh,200px);right:var(--gutter);width:132px;height:132px;z-index:1}
.circle-badge svg.rot{width:100%;height:100%;animation:spin 16s linear infinite}
.circle-badge .dot{position:absolute;inset:0;margin:auto;width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.6);display:grid;place-items:center}
.scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:1;font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.75);text-align:center}
.scroll-hint::after{content:"";display:block;width:1px;height:46px;margin:12px auto 0;background:rgba(255,255,255,.6);transform-origin:top;animation:drop 2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0)}40%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* page hero */
.page-hero{position:relative;min-height:72vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.page-hero-media{position:absolute;inset:0;z-index:-2}
.page-hero-media img{width:100%;height:100%;object-fit:cover;animation:ken 26s ease-in-out infinite alternate}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,22,21,.28),rgba(15,22,21,.55))}
.page-hero .inner{padding-bottom:clamp(56px,9vh,110px);padding-top:120px}
.page-hero .crumb{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:22px}
.page-hero h1{font-weight:400;max-width:18ch}
.page-hero p{color:rgba(255,255,255,.85);max-width:50ch;margin-top:20px;font-weight:300}

/* helpers */
.bg-paper{background:var(--paper)}
.bg-ink{background:var(--navy);color:#fff}
.bg-ink .lead{color:rgba(255,255,255,.72)}
.bg-soft{background:var(--accent-soft)}
.section-head{max-width:780px}
.section-head .h-lg,.section-head .h-xl{margin-top:22px}
.section-head .lead{margin-top:22px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.split.reverse .split-media{order:2}
.split-media{overflow:hidden;aspect-ratio:4/5;position:relative}
.split-media img{width:100%;height:100%;object-fit:cover}

.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:center}
.story + .story{margin-top:clamp(60px,9vw,140px)}
.story .num{font-family:var(--serif);font-size:clamp(7rem,16vw,15rem);line-height:.8;color:var(--accent);font-weight:400}
.story h3{font-weight:300;font-size:clamp(1.5rem,2.6vw,2.1rem);margin:18px 0 18px;letter-spacing:-.01em}
.story .media{overflow:hidden;aspect-ratio:1/1}
.story .media img{width:100%;height:100%;object-fit:cover}

.feat-list{border-top:1px solid var(--line)}
.feat{display:grid;grid-template-columns:80px 1fr 1.4fr;gap:30px;align-items:start;padding:42px 0;border-bottom:1px solid var(--line);transition:.4s}
.feat:hover{padding-inline:14px;background:var(--paper)}
.feat .fi{font-family:var(--serif);font-size:1.4rem;color:var(--accent)}
.feat h3{font-size:1.3rem;font-weight:400}
.feat p{color:var(--muted);font-size:.95rem;line-height:1.85}

.concerns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.concern{position:relative;overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end;color:#fff}
.concern img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:1.1s var(--ease)}
.concern::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(15,22,21,.72))}
.concern .c-body{position:relative;z-index:1;padding:30px;transition:.5s var(--ease)}
.concern h3{font-family:var(--serif);font-size:1.6rem;font-weight:400}
.concern p{font-size:.78rem;letter-spacing:.04em;color:rgba(255,255,255,.82);margin-top:6px;opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.concern:hover img{transform:scale(1.06)}
.concern:hover p{opacity:1;transform:none}

.line-card{background:transparent}
.line-card .media{aspect-ratio:3/4;overflow:hidden;background:var(--paper-2)}
.line-card .media img{width:100%;height:100%;object-fit:cover;transition:1.1s var(--ease)}
.line-card:hover .media img{transform:scale(1.05)}
.line-card .body{padding:22px 2px 0}
.line-card .tag{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500}
.line-card h3{font-family:var(--serif);font-size:1.6rem;font-weight:400;margin:10px 0 8px}
.line-card p{font-size:.86rem;color:var(--muted);line-height:1.8}
.swiper{overflow:hidden}
.swiper-pad{padding-bottom:64px!important}
.swiper-pagination-bullet{background:var(--muted-2);opacity:.5}
.swiper-pagination-bullet-active{background:var(--accent);opacity:1}

.protocol{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.protocol .step{padding:40px 30px 40px 0;border-right:1px solid var(--line);transition:.4s}
.protocol .step:last-child{border-right:0}
.protocol .step:hover{background:var(--paper);padding-left:14px}
.protocol .step .s{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500}
.protocol .step h4{font-family:var(--serif);font-size:1.4rem;font-weight:400;margin:14px 0 10px}
.protocol .step p{font-size:.84rem;color:var(--muted);line-height:1.8}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stat .n{font-family:var(--serif);font-size:clamp(3rem,6vw,4.6rem);line-height:1;color:var(--accent);font-weight:400}
.bg-ink .stat .n{color:#7fd1c5}
.stat .l{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.bg-ink .stat .l{color:rgba(255,255,255,.62)}

.map-wrap{position:relative;padding:clamp(20px,4vw,50px) 0}
.map-wrap img{margin-inline:auto;opacity:.85}
.region-list{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:48px}
.region h4{font-size:.95rem;font-weight:400;margin-bottom:8px;display:flex;align-items:center;gap:9px}
.bg-ink .region h4{color:#fff}
.region h4::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.region p{font-size:.84rem;color:var(--muted)}
.bg-ink .region p{color:rgba(255,255,255,.6)}

.cta-band{position:relative;overflow:hidden;color:#fff;text-align:center}
.cta-band-media{position:absolute;inset:0;z-index:-2}
.cta-band-media img{width:100%;height:100%;object-fit:cover}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,22,21,.62),rgba(15,22,21,.78))}
.cta-band .lead{color:rgba(255,255,255,.82)}
.cta-band .hero-cta{justify-content:center}

.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{width:100%;text-align:left;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:30px 0;font-size:1.15rem;font-weight:400}
.acc-q .pm{flex:0 0 auto;width:20px;height:20px;position:relative;transition:.4s}
.acc-q .pm::before,.acc-q .pm::after{content:"";position:absolute;inset:0;margin:auto;background:var(--accent)}
.acc-q .pm::before{width:100%;height:1.5px}
.acc-q .pm::after{width:1.5px;height:100%;transition:.4s}
.acc-item.open .pm::after{transform:rotate(90deg);opacity:0}
.acc-a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.acc-a p{padding-bottom:30px;color:var(--muted);max-width:64ch}

.form-card{background:#fff;border:1px solid var(--line);padding:clamp(30px,4vw,52px)}
.field{margin-bottom:24px}
.field label{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:10px}
.field input,.field select,.field textarea{width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--line);font-family:inherit;font-size:.98rem;background:transparent;transition:.35s;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:120px;resize:vertical}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:30px}

.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.news-card .media{aspect-ratio:4/3;overflow:hidden}
.news-card .media img{width:100%;height:100%;object-fit:cover;transition:1.1s var(--ease)}
.news-card:hover .media img{transform:scale(1.05)}
.news-card .body{padding:22px 0 0}
.news-card .cat{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:500}
.news-card h3{font-size:1.12rem;font-weight:400;margin:12px 0 14px;line-height:1.5}
.news-card .date{font-size:.78rem;color:var(--muted-2)}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gallery a{position:relative;overflow:hidden;aspect-ratio:1/1}
.gallery img{width:100%;height:100%;object-fit:cover;transition:1.1s var(--ease)}
.gallery a:hover img{transform:scale(1.07)}

.info-row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.info-row .it h4{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-weight:500}
.info-row .it p{color:var(--ink-soft);font-size:.98rem;line-height:1.9}

.cards{display:grid;gap:6px;grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper);padding:40px 32px;transition:.45s var(--ease)}
.card:hover{background:var(--accent-soft)}
.card .ic{width:46px;height:46px;display:grid;place-items:center;margin-bottom:24px;color:var(--accent)}
.card .idx{font-family:var(--serif);font-size:1.2rem;color:var(--accent)}
.card h3{font-size:1.18rem;font-weight:400;margin-bottom:12px}
.card p{font-size:.9rem;color:var(--muted);line-height:1.8}

/* footer */
.site-footer{background:var(--navy);color:#fff;padding-top:110px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;padding-bottom:70px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand .wm{font-family:var(--serif);font-size:1.9rem;letter-spacing:.04em}
.footer-brand .wm b{font-weight:600}
.footer-brand p{color:rgba(255,255,255,.55);font-size:.9rem;margin-top:20px;max-width:36ch;line-height:1.9;font-weight:300}
.footer-col h4{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:#6f8480;margin-bottom:20px}
.footer-col a{display:block;color:rgba(255,255,255,.72);font-size:.88rem;padding:7px 0;transition:.3s;font-weight:300}
.footer-col a:hover{color:#fff;padding-left:5px}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;padding:30px 0;font-size:.76rem;color:rgba(255,255,255,.45);letter-spacing:.04em}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-d="1"]{transition-delay:.12s}
[data-reveal-d="2"]{transition-delay:.24s}
[data-reveal-d="3"]{transition-delay:.36s}
[data-reveal-d="4"]{transition-delay:.48s}
[data-clip]{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
[data-clip].in{clip-path:inset(0 0 0 0)}
[data-clip] img{transform:scale(1.18);transition:transform 1.6s var(--ease)}
[data-clip].in img{transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal],[data-clip]{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* responsive */
@media(max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:40px}
  .protocol{grid-template-columns:1fr 1fr}
  .protocol .step:nth-child(2){border-right:0}
  .region-list{grid-template-columns:repeat(2,1fr)}
  .feat{grid-template-columns:60px 1fr;gap:20px}
  .feat p{grid-column:1/-1;margin-top:-18px;padding-left:80px}
}
@media(max-width:860px){
  .nav,.header-cta{display:none}
  .burger{display:flex}
  .split,.story,.news-grid,.info-row{grid-template-columns:1fr;gap:40px}
  .split.reverse .split-media{order:0}
  .story .num{font-size:32vw}
  .grid-2{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .concerns{grid-template-columns:1fr 1fr}
  .circle-badge{width:104px;height:104px;top:96px}
}
@media(max-width:560px){
  .cards,.stats{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .gallery,.concerns{grid-template-columns:1fr 1fr}
  .feat{grid-template-columns:1fr}
  .feat p{padding-left:0;margin-top:0}
  .hero-cta{gap:18px}
}

/* compat aliases (inner pages) */
.maxw-680{max-width:680px}
html[lang="ko"] .display{font-family:var(--sans);font-weight:300;letter-spacing:-.02em;line-height:1.2}
.bg-navy{background:var(--navy);color:#fff}
.bg-navy .lead{color:rgba(255,255,255,.72)}
.bg-navy .eyebrow{color:#86c9bf}
.bg-navy .stat .n{color:#7fd1c5}
.bg-navy .stat .l{color:rgba(255,255,255,.62)}
.bg-navy .region h4{color:#fff}
.bg-navy .region p{color:rgba(255,255,255,.6)}
.btn-primary{border-color:var(--accent);background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn-dark{border-color:var(--ink);background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;border-color:#000}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);color:#fff}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px)}
.duo-card{background:var(--paper)}
.duo-card .media{aspect-ratio:16/11;overflow:hidden}
.duo-card .media img{width:100%;height:100%;object-fit:cover;transition:1.1s var(--ease)}
.duo-card:hover .media img{transform:scale(1.04)}
.duo-card .body{padding:clamp(26px,3vw,40px)}
.duo-card .num{font-family:var(--serif);font-size:3.6rem;line-height:1;color:var(--accent);display:block;margin-bottom:10px}
.duo-card h3{font-size:1.4rem;font-weight:400;margin-bottom:12px}
.duo-card p{color:var(--muted);font-size:.92rem;line-height:1.85}
@media(max-width:860px){.duo{grid-template-columns:1fr}}

/* lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* hero scroll perf */
.hero-media{will-change:transform,filter}
.hero-inner{will-change:transform,opacity}

/* rotating "time" circle */
.time-sec{position:relative;overflow:hidden}
.time-circle{width:clamp(168px,23vw,256px);height:clamp(168px,23vw,256px);margin:0 auto clamp(34px,5vw,60px);color:var(--accent);will-change:transform}
.time-circle svg{width:100%;height:100%;display:block}
.time-circle text{fill:var(--accent);font-family:var(--sans);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;font-weight:500}

/* ===== hero: centered, reference-scale ===== */
.hero{align-items:center;text-align:center}
.hero-inner{padding-top:120px;padding-bottom:120px}
.hero .eyebrow{margin-bottom:24px}
.hero h1{max-width:22ch;margin-inline:auto;font-size:clamp(2.3rem,5.4vw,4.7rem);font-weight:400;line-height:1.14;letter-spacing:-.015em}
html[lang="ko"] .hero h1 .ko-thin{font-weight:400}
.hero .lead{margin-inline:auto;max-width:52ch}
.hero-cta{justify-content:center}

/* ===== pin slide: 1 / 0 full-screen, horizontal ===== */
.pin-slide{position:relative;height:100vh;overflow:hidden}
.pin-track{display:flex;height:100vh;width:max-content;will-change:transform}
.pin-panel{position:relative;width:100vw;height:100vh;flex:0 0 100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 var(--gutter)}
.pin-panel .pp-media{position:absolute;inset:0;z-index:-2}
.pin-panel .pp-media img{width:100%;height:100%;object-fit:cover}
.pin-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,22,21,.40),rgba(15,22,21,.62))}
.pin-panel .eyebrow{margin-bottom:22px}
.pin-panel .pp-num{font-family:var(--serif);font-size:clamp(3.6rem,9vw,8rem);line-height:1;color:#fff}
.pin-panel h3{font-weight:300;font-size:clamp(1.8rem,3.6vw,3rem);margin:10px 0 22px;letter-spacing:-.01em}
.pin-panel p{max-width:48ch;color:rgba(255,255,255,.86);font-weight:300}
.pin-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.75)}

/* ===== pin horizontal: product lines ===== */
.pin-h{position:relative;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.pin-h-head{margin-bottom:clamp(30px,5vw,58px)}
.pin-h-track{display:flex;gap:clamp(20px,2.4vw,34px);padding-inline:var(--gutter);width:max-content;align-items:stretch;will-change:transform}
.pin-h-track .line-card{width:clamp(260px,26vw,360px);flex:0 0 auto}
.lc-more{display:flex;align-items:center;justify-content:center;width:clamp(220px,20vw,300px);flex:0 0 auto;border:1px solid var(--line);color:var(--ink);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;transition:.45s var(--ease)}
.lc-more:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ===== no-gsap / mobile fallback (stacked) ===== */
.no-gsap .pin-slide,.no-gsap .pin-h{height:auto;overflow:visible;display:block}
.no-gsap .pin-track{flex-direction:column;width:auto}
.no-gsap .pin-panel{width:auto;height:auto;min-height:78vh;flex:none;padding-block:80px}
.no-gsap .pin-h{padding-block:clamp(72px,11vw,140px)}
.no-gsap .pin-h-track{flex-wrap:nowrap;overflow-x:auto;width:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.no-gsap .pin-h-track .line-card{scroll-snap-align:start}

/* ===== hero: text hidden until scroll (GSAP) ===== */
.hero-inner{opacity:0}
.no-gsap .hero-inner{opacity:1}
.hero-media{will-change:transform,filter}

/* ===== pin cross: 1/0 ring fill + crossfade ===== */
.pin-cross{position:relative;height:100vh;overflow:hidden;color:#fff}
.cross-panel{position:absolute;inset:0;z-index:0}
.cross-panel .cp-media{position:absolute;inset:0}
.cross-panel img{width:100%;height:100%;object-fit:cover}
.cross-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,22,21,.42),rgba(15,22,21,.62))}
.cross-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter)}
.cross-content>.eyebrow{margin-bottom:26px}
.ring-wrap{position:relative;width:clamp(168px,22vw,250px);height:clamp(168px,22vw,250px);display:grid;place-items:center}
.ring-svg{position:absolute;inset:0;width:100%;height:100%}
.ring-track{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2}
.ring-prog{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:754;stroke-dashoffset:754}
.ring-num{display:grid}
.ring-num .rn{grid-area:1/1;font-family:var(--serif);font-size:clamp(2.8rem,5.5vw,4.6rem);line-height:1;color:#fff}
.cross-lower{display:grid;margin-top:34px;width:100%;max-width:50ch}
.cross-lower .cl{grid-area:1/1}
.cross-lower .cl h3{font-weight:300;font-size:clamp(1.6rem,3.2vw,2.5rem);margin-bottom:14px;letter-spacing:-.01em}
.cross-lower .cl p{color:rgba(255,255,255,.86);font-weight:300}

/* no-gsap fallback for pin-cross (mobile): show panel 1 static */
.no-gsap .pin-cross{height:78vh}
.no-gsap .cross-panel[data-panel="2"],.no-gsap .cross-lower .cl[data-text="2"],.no-gsap .ring-num .rn2{display:none}
.no-gsap .ring-prog{stroke-dashoffset:200}

/* ===== timeline (History) ===== */
.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl{position:relative;padding:0 0 clamp(30px,4vw,48px)}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:-34px;top:5px;width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid var(--accent)}
.tl .yr{font-family:var(--serif);font-size:1.5rem;color:var(--accent);font-weight:500;line-height:1}
.tl h4{font-size:1.08rem;font-weight:500;margin:8px 0 6px}
.tl p{color:var(--muted);font-size:.92rem;line-height:1.8}

/* ===== list (Notice / Article) ===== */
.list{border-top:1px solid var(--ink)}
.list a{display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:24px 4px;border-bottom:1px solid var(--line);transition:.3s var(--ease)}
.list a:hover{background:var(--paper);padding-inline:16px}
.list .lt{font-size:1.02rem;font-weight:400}
.list .badge{display:inline-block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:3px 9px;border-radius:999px;margin-right:14px;vertical-align:middle;font-weight:600}
.list .ld{font-size:.82rem;color:var(--muted-2);white-space:nowrap}

/* ===== tag chips ===== */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-size:.74rem;letter-spacing:.04em;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:9px 16px;transition:.3s}
.chip:hover,.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== device cards ===== */
.dev{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
@media(max-width:860px){.dev{grid-template-columns:1fr}}

/* ===== intro: handwriting (pen draws the ink line) ===== */
#intro .brandmark{display:flex;flex-direction:column;align-items:center;gap:22px}
#intro.home .brandmark{opacity:0}
#intro.home.brand .brandmark{opacity:1;transition:opacity .7s var(--ease)}
#intro .write{position:absolute;inset:0;display:grid;place-items:center;padding:0 6vw;transition:opacity .55s var(--ease)}
#intro.brand .write{opacity:0}
.ink-svg{width:min(92vw,980px);height:auto;overflow:visible}
.ink{fill:none;stroke:#2f6df0;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.penG{filter:drop-shadow(0 6px 11px rgba(20,30,40,.2))}

/* language visibility */
[data-en]{display:none}
html[lang="en"] [data-kr]{display:none}
html[lang="en"] [data-en]{display:revert}

/* The line-up is the whole page here, so it runs wider than the site's
   1320px measure and clears the category bar by more than a normal section. */
/* =========================================================
   PRODUCT LINE-UP (products.html)
   Structure and metrics measured off atiumcorp.co.kr/sub/product02
   at its 1600px container:
     breadcrumb → line title → line tabs → full-bleed banner with the
     name over it → CENTRED "Product / LINE-UP" → 4-up card grid.
     tabs 20px, gap 60, active #000/600, inactive rgba(0,0,0,.6), no underline
     heading 50px/600 lh 70, eyebrow 20px/500 accent above it, both centred
     grid 4 up, column gap 12, row gap 60, card 391, shot 391x480
     name 22/500 · desc 16 rgba(0,0,0,.7) · chips 15px, 1px #ddd, r40, 8/16
   ========================================================= */
.pl{/* 고정 네비 높이를 먼저 확보한 뒤 그 아래로 여백을 준다.
     그냥 padding 값만 주면 좁은 화면에서 네비에 바짝 붙어 보인다. */
  padding-top:calc(var(--navh, 74px) + clamp(46px,4.2vw,78px));--pl-ls:-.56px;}
/* 1600px of CONTENT — the gutter is added on top, otherwise the padding eats
   into the measure and the cards come out narrower than the reference. */
.pl > .wrap{max-width:calc(1600px + var(--gutter) * 2);}

.pl__crumb{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(13px,1vw,16px);color:rgba(0,0,0,.55);letter-spacing:var(--pl-ls);
}
.pl__crumb a{color:inherit;}
.pl__crumb a:hover{color:#000;}
.pl__crumb i{font-style:normal;color:#c4c4c4;font-size:.85em;}

.pl__line{
  /* 브레드크럼을 뺐으므로 첫 요소로서 위 여백은 섹션 padding 이 담당한다 */
  margin:0;
  font-size:clamp(32px,3.4vw,54px);font-weight:700;
  letter-spacing:var(--pl-ls);line-height:1.2;color:#000;
}
/* 모드 스위치 — 선택된 쪽만 검정, 반대쪽은 회색.
   products.html 인라인에만 있던 걸 공용으로 올렸다. device.html 이 같은
   스위치를 써야 두 페이지가 한 흐름으로 읽힌다. */
.pl__line{display:flex;align-items:baseline;gap:.28em;}
.pl__mode{appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:#c4c4c4;letter-spacing:inherit;line-height:inherit;
  text-decoration:none;transition:color .22s ease;}
.pl__mode:hover{color:#8a8a8a;}
.pl__mode.on,.pl__mode.on:hover{color:#000;}
.pl__bar{font-style:normal;color:#dcdcdc;font-weight:300;}

/* ONE grid of 7 equal columns, wrapping to a second row. Splitting the 13 items
   by hand into a 6-row and a 7-row gave each row its own column count, so no
   label in the lower row lined up with the one above it. A single track shared
   by both rows is the only way the cells — and their dividers — can align. */
/* 13개 라인을 7개 + 6개 두 줄로 고정하면서 간격도 균등하게.
     · repeat(7,1fr) → 칸 시작점만 균등, 라벨 길이 차이로 실제 여백이 들쭉날쭉
     · flex-wrap    → 여백은 균등하지만 폭에 따라 9+4 처럼 아무렇게나 나뉨
   max-content 7칸 + space-between 이면 둘 다 만족한다. 칸은 글자 폭만큼만
   차지하고, 남는 공간이 칸 사이에 똑같이 나뉘어 들어간다.
   2행(6개)도 같은 트랙을 쓰므로 1행 항목들과 세로로 맞아떨어진다. */
.pl__tabs{
  margin:clamp(18px,2.2vw,36px) 0 0;padding:10px 0;
  display:grid;grid-template-columns:repeat(7,max-content);
  justify-content:space-between;
  column-gap:clamp(14px,1.4vw,24px);   /* 최소 간격 — 나머지는 space-between 이 채운다 */
  row-gap:clamp(6px,.8vw,14px);
}
.pl__tab{
  appearance:none;background:none;border:0;cursor:pointer;position:relative;
  /* 좌우 패딩을 0 으로 — 패딩이 남아 있으면 column-gap 에 더해져
     "설정한 간격"과 "보이는 간격"이 달라진다 */
  padding:15px 0;font-family:inherit;text-align:left;
  font-size:clamp(15px,1.25vw,20px);font-weight:400;letter-spacing:var(--pl-ls);
  color:rgba(0,0,0,.6);transition:color .2s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* No dividers. Once the labels were left-aligned inside their cells a rule at
   the cell's left edge sat far from the label before it and hard against the one
   after, so it read as attached to the wrong item rather than separating them —
   the reference has no dividers either. The column grid does the separating. */
.pl__tab:hover{color:rgba(0,0,0,.85);}
.pl__tab.on{color:#000;font-weight:600;}

/* Banner — measured off the reference: 1600x520 frame, 20px radius, the copy
   block absolutely centred on both axes at 80% width.
     wordmark  60px / 600 / line-height 84
     copy      32px / 600 / line-height 44.8 (1.4)
     gap       30px between the two
   The reference photograph is dark enough to carry white type unaided; ours are
   bright product shots, so a scrim is added — without it the copy disappears. */
.pl__banner{
  position:relative;isolation:isolate;
  margin:clamp(22px,2.6vw,42px) 0 0;
  aspect-ratio:1600/520;background:#efeceb;
  border-radius:20px;overflow:hidden;
}
.pl__banner img{width:100%;height:100%;object-fit:cover;display:block;}
.pl__banner::after{
  content:"";position:absolute;inset:0;background:rgba(24,22,21,.42);
}
.pl__bannerIn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:1;width:80%;text-align:center;
}
.pl__bannerName{
  margin:0;
  font-size:clamp(34px,3.75vw,60px);font-weight:600;line-height:1.4;
  letter-spacing:var(--pl-ls);color:#fff;
}
.pl__bannerDesc{
  margin:30px 0 0;
  font-size:clamp(18px,2vw,32px);font-weight:600;line-height:1.4;
  letter-spacing:var(--pl-ls);color:#fff;
}

/* centred, exactly as in the reference — the eyebrow sits inside the heading */
.pl__title{
  margin:clamp(64px,7vw,120px) 0 clamp(34px,4vw,64px);
  text-align:center;
  font-size:clamp(30px,3.13vw,50px);font-weight:600;
  line-height:1.4;letter-spacing:var(--pl-ls);color:#000;
}
.pl__title small{
  display:block;margin:0 0 15px;
  font-size:clamp(15px,1.25vw,20px);font-weight:500;letter-spacing:var(--pl-ls);
  color:var(--blue,#0E2A47);text-transform:uppercase;
}

/* Card grid — measured off the reference:
     3 up, gap 24, card 460x610 (0.754), radius 8, photo as the card's own
     background (cover), flex column with the chips pinned top and the copy
     pinned bottom, 30px inset all round, 60px at the foot.
     chips 18/600, 1px rgba(255,255,255,.5), radius 40, pad 8/16, ml 10
     name  34/600 lh 47.6, mb 30 · english 16/400 mt 10 · desc 18/400 lh 25.2 */
.pl__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
/* The grid cell only sets the track; the anchor carries the whole card so the
   link works without JavaScript and the browser shows the destination on hover.
   An earlier version delegated clicks in JS — a real <a> is simply better. */
.pl__card{min-width:0;}
.pl__cardLink{
  position:relative;isolation:isolate;display:flex;
  aspect-ratio:460/610;border-radius:8px;overflow:hidden;
  /* The photo is set as background-image inline on each anchor. It is NOT passed
     through a custom property: a relative url() inside a custom property is
     resolved against the stylesheet that substitutes it, not the document, so
     every path came out as assets/css/assets/img/... and silently 404'd.
     Longhands here so the inline background-image is not overwritten. */
  background-color:#dcdad8;
  background-position:50% 50%;
  background-size:cover;
  background-repeat:no-repeat;
  flex-direction:column;justify-content:space-between;
  color:#fff;text-decoration:none;
}
/* The reference photographs are dark art-directed shots that carry white type
   unaided; the HUBISLAB line photography is bright, so the card needs its own
   ground — weighted to the foot where the copy sits, light at the top so the
   chips still read. */
.pl__cardLink::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(20,18,17,.34) 0%,
    rgba(20,18,17,.14) 32%,
    rgba(20,18,17,.46) 68%,
    rgba(20,18,17,.72) 100%);
}
.pl__tags{padding:30px;text-align:right;}
.pl__tags span{
  display:inline-block;margin-left:10px;
  border:1px solid rgba(255,255,255,.5);border-radius:40px;padding:8px 16px;
  font-size:clamp(14px,1.13vw,18px);font-weight:600;letter-spacing:var(--pl-ls);
  color:#fff;white-space:nowrap;
}
.pl__meta{margin:0;padding:0 30px 60px;}
.pl__meta dt{
  margin:0 0 30px;
  font-size:clamp(22px,2.13vw,34px);font-weight:600;line-height:1.4;
  letter-spacing:var(--pl-ls);color:#fff;
}
.pl__meta dt span{
  display:block;margin-top:10px;
  font-size:clamp(13px,1vw,16px);font-weight:400;line-height:1.4;color:#fff;
}
.pl__meta dd{
  margin:0;
  font-size:clamp(14px,1.13vw,18px);font-weight:400;line-height:1.4;
  letter-spacing:var(--pl-ls);color:#fff;
}

/* ── 제품컷 호버 리빌 ──────────────────────────────────────────────
   기본 상태는 라인 무드컷(배경 이미지)이고, 카드에 마우스를 올리면
   제품컷이 밝은 플레이트 위에 통째로(contain) 떠오르며 교차 페이드된다.
   z-index:-1 로 두어 ::after 그라디언트와 카피가 계속 위에 얹힌다. */
.pl__shot{
  position:absolute;inset:0;z-index:-1;
  width:100%;height:100%;
  /* 카드를 꽉 채우는 풀사이즈 제형컷 (여백·플레이트 없음) */
  object-fit:cover;object-position:center;padding:0;
  background:none;
  opacity:0;transform:scale(1.06);
  transition:opacity .4s ease,transform .6s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.pl__cardLink:hover .pl__shot,
.pl__cardLink:focus-visible .pl__shot{opacity:1;transform:scale(1);}
/* 제품컷이 드러나는 동안 상단 그라디언트를 걷어 컷이 깨끗하게 읽히게 하고,
   하단은 남겨 제품명·용량 카피의 가독성을 유지한다. */
.pl__cardLink::after{transition:background .4s ease;}
.pl__cardLink:hover::after,
.pl__cardLink:focus-visible::after{
  background:linear-gradient(180deg,
    rgba(20,18,17,.05) 0%,
    rgba(20,18,17,.02) 42%,
    rgba(20,18,17,.32) 72%,
    rgba(20,18,17,.62) 100%);
}
@media (prefers-reduced-motion:reduce){
  .pl__shot{transition:opacity .01ms linear;transform:none;}
  .pl__cardLink:hover .pl__shot{transform:none;}
}

@media (max-width:1100px){ .pl__grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .pl__grid{grid-template-columns:minmax(0,1fr);} .pl__banner{aspect-ratio:4/3;} }

/* =========================================================
   PRODUCT DETAIL (product-detail.html)
   Per the supplied reference: a narrow left column carrying the product shot
   and then the long detail image, a wider right column with the name, feature
   bullets, a label/value spec table and the closing notice.
   Column split measured off the reference (340 : 630 of 1080) ≈ 35 : 65.
   ========================================================= */
/* Measured off bellmona.kr/kor/product/product_detail.html at its 1600px row:
     shot 650 · gap 165 · info 785   (45.3 / 54.7 of the pair)
     name    24px/500  lh 31.2  ls -.48
     bullets 18px/400  lh 23.4  ls -.36
     spec    16px, label column 157 (of 785), 10px 0 padding,
             label #0a0a0a, value #828282, 1px #e1e1e1 rules
     note    14px #828282
   Our container is also 1600, so the reference values map across 1:1. */
.pd{padding-top:clamp(40px,4vw,70px);--pd-ls:-.02em;}
.pd > .wrap{max-width:calc(1600px + var(--gutter) * 2);}

.pd__in{
  margin:clamp(26px,3vw,48px) 0 0;
  display:grid;
  /* fr weights are the reference's own column widths; the percentage gap
     resolves to its 165px at 1600 and scales below that */
  grid-template-columns:minmax(0,650fr) minmax(0,785fr);
  column-gap:clamp(32px,10.3%,165px);
  align-items:start;
}
/* The name and spec table stay put while the long detail sheet on the left
   scrolls past them. `align-items:start` above is what makes this work — a
   stretched grid item is full height and has nothing to stick within.
   (Site-wide note: overflow-x lives on <html>, not <body>; on <body> it makes
   the body a scroll container and silently kills every position:sticky.) */
.pd__info{
  position:sticky;
  top:calc(var(--navh, 74px) + clamp(20px,2.4vw,40px));
}

/* left — square shot on its own tint, then the long detail images */
.pd__shot{
  position:relative;
  aspect-ratio:1;background:#f5f5f5;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  /* 점 인디케이터를 뺐으므로 아래쪽에 더 두던 여백을 정리한다.
     좌우는 화살표가 들어갈 만큼만 넉넉히 둔다. */
  padding:clamp(26px,3vw,50px) clamp(48px,4.6vw,76px);
}
/* contain, not cover — the product sits inside the tinted panel with air around
   it, the way the reference does; cover cropped the bottle to the panel edges */
.pd__shot img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply;}
/* the detail sheet is a stack of separate images, flush one under the other */
.pd__long{
  margin-top:clamp(20px,2.4vw,40px);background:#f2f2f2;
  display:flex;flex-direction:column;
}
.pd__long img{width:100%;height:auto;display:block;}

/* ── 에디봇으로 짠 상세 본문 ──
   블록 하나하나의 생김새는 관리자 화면이 인라인 style 로 적어 보낸다. 여기서는
   그 블록들이 놓일 자리 — 폭 · 위아래 여백 · 사진이 넘치지 않는 것만 정한다.
   생김새까지 여기서 또 정하면 미리보기와 실제 페이지가 어긋난다. */
.pd__detail{
  margin:clamp(32px,4vw,64px) 0 0;
  padding-top:clamp(24px,3vw,44px);
  border-top:1px solid #e7e7e7;
}
.pd__detail .pd__blk{margin:0 0 clamp(10px,1.2vw,18px);}
.pd__detail .pd__blk:last-child{margin-bottom:0;}
.pd__detail img{max-width:100%;height:auto;display:block;}
/* 사진 한 장 + 옆 글 — 관리자 화면의 '상품 레이아웃' 블록 */
.pd__detail .pd__blk--layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(24px,3vw,44px);align-items:start;
}
.pd__detail .pd__blkShot{
  border-radius:18px;overflow:hidden;border:1px solid #E6EBF2;
  background:radial-gradient(120% 120% at 50% 34%,#fbfcfe,#e7edf4 72%);
  display:flex;align-items:center;justify-content:center;
}
.pd__detail .pd__blkShot img{max-width:66%;max-height:66%;object-fit:contain;}
.pd__detail .pd__blk--cols{display:grid;}
/* 블록이 오른쪽 칸 전체를 맡을 때 — 위를 가를 것이 없어 선도 여백도 없다 */
.pd__detail--only{margin:0;padding-top:0;border-top:none;}
/* 상세의 #태그 — 목록 카드와 달리 밝은 바탕 위라 회색 알약으로 둔다 */
.pd__tags{margin:clamp(18px,2vw,32px) 0 0;display:flex;gap:8px;flex-wrap:wrap;}
.pd__kw{
  display:inline-block;padding:8px 16px;border-radius:40px;background:#eef0f4;
  font-size:clamp(13px,1vw,15px);font-weight:600;color:#4a5260;
  text-decoration:none;white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.pd__kw:hover{background:#1c2a2b;color:#fff;}
/* 본문 속 주문 단추 자리 — 단추 자체는 cart.js 가 넣는다 */
.pd__orderCta{margin:clamp(20px,2.4vw,34px) 0;}
.pd__orderCta__t{margin:0 0 10px;font-size:15px;font-weight:700;color:#161d29;}
.pd__orderCta__n{margin:10px 0 0;font-size:11.5px;color:#9ca3af;line-height:1.7;}
@media (max-width:860px){
  .pd__detail .pd__blk--layout,
  .pd__detail .pd__blk--cols{grid-template-columns:minmax(0,1fr);}
}

/* right */
.pd__name{
  margin:0;font-size:clamp(19px,1.5vw,24px);font-weight:500;
  line-height:1.3;letter-spacing:-.02em;color:#0a0a0a;
}
/* 영문명 — 해시로 제품이 지정됐을 때만 채워진다. 비어 있으면 자리도 차지하지 않는다. */
.pd__en{margin:6px 0 0;font-size:clamp(13px,1vw,15.5px);font-weight:400;
  letter-spacing:-.01em;color:#8b95a1;}
.pd__en:empty{display:none;}
/* Reference spacing: name → bullets 20, bullets → table 30, table → note 10.
   The bullets are one paragraph of <br>-separated lines there, so the lines run
   at the plain 1.3 leading with no extra gap between them. */
/* plain two-line description — no bullet markers */
.pd__points{
  margin:20px 0 clamp(30px,3.4vw,56px);padding:0;
  font-size:clamp(15px,1.13vw,18px);line-height:1.5;
  letter-spacing:-.02em;color:#0a0a0a;
}

/* Spec table. The rules are on the TABLE only — top and bottom — not on each
   row; per-row rules were mine, the reference has none between rows. */
/* padding inside the rules so the first and last row are not pressed against
   them — the rows sat flush on the hairlines before */
.pd__spec{
  margin:0;padding:clamp(14px,1.5vw,24px) 0;
  border-top:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;
}
.pd__spec > div{
  display:grid;grid-template-columns:minmax(0,157fr) minmax(0,628fr);
}
.pd__spec dt,
.pd__spec dd{
  margin:0;padding:10px 0;
  font-size:clamp(13.5px,1vw,16px);line-height:1.3;letter-spacing:-.02em;
}
.pd__spec dt{font-weight:400;color:#0a0a0a;}
.pd__spec dd{color:#828282;}

.pd__note{
  margin:clamp(18px,2vw,32px) 0 0;
  font-size:clamp(12px,.88vw,14px);line-height:1.3;
  letter-spacing:-.02em;color:#828282;
}

@media (max-width:900px){
  .pd__in{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,40px);}
  /* stacked — nothing to stick beside */
  .pd__info{position:static;}
}

/* product detail — 제품컷 좌우 화살표.
   메인 인증서 캐러셀과 같은 형태(원 테두리 없는 얇은 검정 < >)로 맞췄고,
   패널 바깥이 아니라 썸네일 안쪽 좌우 끝에 세로 중앙으로 붙는다. */
.pd__arw{
  position:absolute;top:50%;transform:translateY(-50%);
  width:clamp(30px,2.6vw,40px);height:clamp(44px,3.8vw,58px);
  padding:0;border:0;background:none;cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;
  color:#111;opacity:.55;
  transition:opacity .2s ease,transform .2s ease;
}
.pd__arw svg{
  width:clamp(15px,1.2vw,19px);height:clamp(27px,2.2vw,34px);
  fill:none;stroke:currentColor;stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;
}
.pd__arw:hover{opacity:1;}
.pd__arw--prev{left:clamp(6px,.7vw,12px);}
.pd__arw--next{right:clamp(6px,.7vw,12px);}
.pd__arw--prev:hover{transform:translateY(-50%) translateX(-3px);}
.pd__arw--next:hover{transform:translateY(-50%) translateX(3px);}
@media (max-width:560px){
  .pd__shot{padding:clamp(26px,3vw,50px) 40px;}
  .pd__arw{width:28px;height:40px;}
}

/* =========================================================
   PRODUCT / DEVICE SUB BAR + DEVICE PAGE (device.html)
   Sub bar mirrors the technology pages' bar: full width, equal columns,
   short black divider, active in ink.
   ========================================================= */
.subbar{
  position:sticky;top:var(--navh,74px);z-index:20;
  /* 헤더 border-bottom(#edf1f6)과 동일한 헤어라인으로 통일 */
  background:#fff;border-bottom:1px solid var(--nv-line,#d5dce5);
}
.subbar__in{
  max-width:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
}
.subbar a{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(13px,1.3vw,19px) 10px;position:relative;
  font-size:clamp(12px,.9vw,15px);font-weight:700;letter-spacing:.04em;
  color:#9aa4b0;text-decoration:none;transition:color .2s ease;
}
/* 중분류끼리의 세로 구분선은 대분류(헤더)와 중분류 사이 가름선과 같은 색으로 맞춘다.
   (헤더 border-bottom: #edf1f6 — assets/css/nav.css) */
.subbar a + a::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:21px;background:var(--nv-line,#d5dce5);
}
.subbar a:hover{color:#1a1a1a;}
.subbar a[aria-current="page"]{color:#1a1a1a;}

/* the sub bar sits under the header, so the page below it starts flush */
/* 제품 라인업(.pl)과 완전히 같은 상단 여백 — 두 페이지를 오갈 때 위치가 안 튄다.
   아래쪽은 다음 섹션과 붙지 않게 따로 띄운다. */
.dv{padding-top:calc(var(--navh, 74px) + clamp(46px,4.2vw,78px));
    padding-bottom:clamp(48px,5.6vw,96px);--pl-ls:-.56px;}
.dv > .wrap{max-width:calc(1600px + var(--gutter) * 2);}

.dv-name{
  margin:0;font-size:clamp(26px,2.6vw,44px);font-weight:700;
  line-height:1.18;letter-spacing:-.035em;color:#0a0a0a;
}

/* 디바이스 탭 — .pl__tabs 와 같은 규격(고정 칸 + space-between).
   항목이 6개라 7칸 트랙을 그대로 쓰면 끝에 빈 칸이 남으므로 6칸으로 잡는다. */
.dv-tabs{
  margin:clamp(18px,2.2vw,36px) 0 0;padding:10px 0;
  display:grid;grid-template-columns:repeat(6,max-content);
  justify-content:space-between;
  column-gap:clamp(14px,1.4vw,24px);row-gap:clamp(6px,.8vw,14px);
}
.dv-tab{
  appearance:none;background:none;border:0;cursor:pointer;position:relative;
  padding:15px 0;font-family:inherit;text-align:left;
  font-size:clamp(15px,1.25vw,20px);font-weight:400;letter-spacing:var(--pl-ls);
  color:rgba(0,0,0,.6);transition:color .2s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dv-tab:hover{color:rgba(0,0,0,.85);}
.dv-tab.on{color:#000;font-weight:600;}
/* 텍스트 굵기만으로는 선택 상태가 약하다 — 밑줄로 확실히 잡는다 */
.dv-tab::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:#0a0a0a;
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.dv-tab.on::after{transform:scaleX(1);}

/* device video */
/* 영상(좌) / 정보(우) — 기술 페이지의 1.55 : 1 비율과 같게 */
.dv-stage{
  /* 탭에서 한 박자 더 띄운다 — 붙어 있으면 탭이 영상에 얹힌 것처럼 보인다 */
  margin:clamp(44px,5.2vw,88px) 0 0;
  display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  gap:clamp(28px,3.4vw,64px);align-items:stretch;
}
/* 우측 정보 컬럼은 영상 높이를 꽉 채우고, 세 덩어리(이름·링크·버튼)를
   위–가운데–아래로 벌린다. 가운데 몰아두면 위아래가 비어 보인다. */
.dv-info{
  /* space-between 은 세 덩어리를 위·아래 끝까지 밀어붙여 사이가 과하게 벌어졌다.
     가운데 정렬 + 고정 간격으로 바꿔 하나의 묶음으로 읽히게 한다. */
  /* 아래쪽 기준 정렬 — 버튼 밑선이 영상 밑선과 정확히 맞는다.
     가운데 정렬이면 내용 길이에 따라 밑선이 매번 달라진다. */
  min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:clamp(22px,2.5vw,38px);
}
.dv-info__head{min-width:0;}

.dv-media{
  margin:0;
  aspect-ratio:16/9;background:#e2e2e2;
  display:flex;align-items:center;justify-content:center;
  /* 오른쪽 버튼과 모서리를 맞춘다. 밑선은 수치상 정확히 같은데(둘 다 949.02px),
     한쪽만 20px 로 둥글면 코너가 위로 말려 올라가 눈에는 어긋나 보인다. */
  border-radius:10px;overflow:hidden;
}
.dv-media video,
.dv-media iframe,
.dv-media img{width:100%;height:100%;object-fit:cover;display:block;border:0;}
.dv-media__ph{
  font-size:clamp(13px,1vw,16px);letter-spacing:-.02em;color:#7d858e;
}

.dv-desc{
  margin:clamp(12px,1.3vw,20px) 0 0;
  font-size:clamp(14px,1.05vw,18px);line-height:1.75;
  letter-spacing:-.02em;color:#68727f;word-break:keep-all;
}

/* 영상이 없는 상태 — 16:9 회색 덩어리 대신 납작한 점선 영역 */
.dv-media--empty{aspect-ratio:auto;min-height:clamp(150px,17vw,240px);
  background:#fbfcfd;border:1px dashed #dde4ec;border-radius:20px;}
.dv-media--empty .dv-media__ph{color:#9aa6b4;}

/* 선택한 디바이스에서 이어지는 페이지 — 설명 바로 아래 가로 배치 */
.dv-links{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0;
}
.dv-link{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 20px;border:1px solid #e3e8ee;border-radius:10px;background:#fff;
  font-size:clamp(13px,.92vw,15px);font-weight:600;letter-spacing:-.01em;color:#2b3646;
  text-decoration:none;transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.dv-link i{font-style:normal;transition:transform .25s cubic-bezier(.22,1,.36,1);}
.dv-link:hover{border-color:#0E2A47;color:#0E2A47;background:#f5f8fb;}
/* 우측 정보 컬럼 안에서만 폭을 꽉 채운다. 솔루션 섹션의 링크까지 늘리면
   본문 폭만큼 늘어난 버튼이 되어 어색하다. */
.dv-info .dv-link{display:flex;width:100%;justify-content:space-between;gap:18px;}
.dv-link:hover i{transform:translateX(3px);}

/* 전체 디바이스 썸네일 — 탭과 같은 데이터로 그려 목록이 어긋나지 않는다 */
/* ---- 하단 섹션 밴드 ----
   전부 흰 배경이면 스크롤해도 같은 화면이 이어지는 느낌만 남는다.
   한 톤 깔린 밴드를 하나 끼워 넣어 구간을 끊는다. */
.dv-sec{padding:clamp(56px,6.4vw,110px) 0;}
.dv-sec > .wrap{max-width:calc(1600px + var(--gutter) * 2);}
.dv-sec .pl__title{margin-top:0;}

/* ---- 스크롤 리빌 ---- */
[data-dv-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s ease var(--dvdly,0s),
             transform .9s cubic-bezier(.16,.72,.2,1) var(--dvdly,0s);
}
[data-dv-reveal].in{opacity:1;transform:none;}
[data-dv-reveal][style*="--dvd"]{--dvdly:calc(var(--dvd) * .09s);}
@media (prefers-reduced-motion:reduce){
  [data-dv-reveal]{opacity:1;transform:none;transition:none;}
}

/* ---- 함께 쓰는 솔루션 ----
   좌: 라인 컷 / 우: 헤드라인 + 6종 카드.
   참고 시안은 우측이 6칸이라 빽빽했다 → 이미지 쪽을 줄여 카드에 폭을 넘긴다. */
.dv-sol{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.32fr);
  /* 양쪽을 늘려 윗선·밑선을 동시에 맞춘다.
     사진에 고정 비율을 주면 우측 내용 높이와 달라 밑선이 어긋난다.
     비율을 빼고 높이를 우측에 맡긴 뒤 cover 로 채운다. */
  gap:clamp(28px,3.4vw,60px);align-items:stretch;
}
.dv-sol__media{border-radius:12px;overflow:hidden;background:#eef2f6;min-height:clamp(320px,34vw,560px);}
.dv-sol__media img{width:100%;height:100%;object-fit:cover;display:block;}
/* 우측 칼럼은 grid stretch 로 사진 높이만큼 늘어나지만, 그 안의 카드는
   내용 높이에서 끝나 밑선이 사진보다 위에 남았다.
   카드 묶음이 남은 공간을 차지하게 해야 실제로 밑선이 맞는다. */
.dv-sol__body{min-width:0;display:flex;flex-direction:column;}
.dv-sol__h{
  /* 첫 요소이므로 위 여백 0 — 사진 윗선과 정확히 맞춘다 */
  margin:0;
  font-size:clamp(24px,2.4vw,40px);font-weight:700;
  line-height:1.24;letter-spacing:-.035em;color:#0a0a0a;
}
.dv-sol__lead{
  margin:clamp(12px,1.3vw,20px) 0 0;
  font-size:clamp(13.5px,.98vw,17px);font-weight:400;line-height:1.75;
  letter-spacing:-.02em;color:#68727f;word-break:keep-all;
}

/* 6종 카드 — 사진 없이 타이포로만. 개별 제품컷이 없는 상태에서 라인 컷을
   잘라 쓰면 각도·해상도가 제각각이라 오히려 지저분해진다. */
.dv-sol__grid{
  list-style:none;margin:clamp(22px,2.4vw,36px) 0 0;padding:0;
  flex:1;                       /* 남은 높이를 카드가 가져간다 */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:1fr;gap:clamp(10px,1vw,16px);
}
.dv-sol__card{
  position:relative;min-width:0;
  border:1px solid #e6ebf1;border-radius:8px;background:#fff;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
/* 카드 전체를 링크로 — 사진만 링크면 글자를 눌렀을 때 아무 일도 안 일어난다 */
.dv-sol__link{
  /* 카드가 늘어나도 내용은 세로 가운데에 */
  display:flex;flex-direction:column;justify-content:center;height:100%;
  text-align:center;text-decoration:none;color:inherit;
  padding:clamp(12px,1.1vw,16px) clamp(11px,1vw,15px) clamp(15px,1.4vw,21px);
}
/* 제품컷 — 개별 촬영본이 없어 라인 컷에서 세워진 앰플만 잘라 임시로 만들었다.
   가장자리를 흐려 카드 배경(#f7f9fb)에 녹였기 때문에 잘린 티가 안 난다. */
/* 3:4 로 두면 카드가 세로로 길어져 섹션 전체가 늘어난다.
   높이를 고정하고 contain 으로 담아 카드를 납작하게 유지한다. */
.dv-sol__thumb{
  /* 본사 제품컷은 배경이 흰색이라 회색 판 위에 올리면 흰 사각형이 그대로 보인다.
     같은 흰색으로 맞춰 경계가 안 생기게 한다. */
  display:block;height:clamp(96px,7.9vw,134px);
  border-radius:5px;overflow:hidden;background:#fff;
}
.dv-sol__thumb img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.dv-sol__card:hover .dv-sol__thumb img{transform:scale(1.05);}
.dv-sol__thumb--none{display:flex;align-items:center;justify-content:center;
  border:1px dashed #dde4ec;background:#fbfcfd;}
.dv-sol__thumb--none em{font-style:normal;font-size:clamp(10.5px,.74vw,12.5px);
  font-weight:600;color:#aab4c0;letter-spacing:-.01em;}
.dv-sol__card:hover{
  border-color:#cfd8e2;box-shadow:0 8px 20px rgba(16,24,40,.07);transform:translateY(-2px);
}
.dv-sol__tag{
  display:block;margin-top:clamp(12px,1.1vw,17px);
  font-size:clamp(10.5px,.74vw,12.5px);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tone,#2E5AAC);
}
.dv-sol__card strong{
  display:block;margin-top:clamp(5px,.5vw,8px);
  font-size:clamp(14px,1.02vw,17.5px);font-weight:700;
  letter-spacing:-.02em;color:#0a0a0a;
}
.dv-sol__card em{
  display:block;margin-top:clamp(4px,.4vw,7px);font-style:normal;
  font-size:clamp(11.5px,.8vw,13.5px);font-weight:400;line-height:1.5;
  letter-spacing:-.02em;color:#8b95a1;word-break:keep-all;
}


/* 회색 배경 버튼은 비활성처럼 보였다 — 기술 페이지 CTA(.tp-pb__btn)와 같은 네이비로 */
.dv-btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  margin-top:0;
  background:#0E2A47;color:#fff;border:1px solid #0E2A47;border-radius:10px;
  padding:15px 30px;
  font-size:clamp(14px,1.05vw,18px);font-weight:700;letter-spacing:-.01em;
  text-decoration:none;transition:background .25s ease,color .25s ease;
}
.dv-btn i{font-style:normal;transition:transform .3s cubic-bezier(.22,1,.36,1);}
.dv-btn:hover{background:transparent;color:#0E2A47;}
.dv-btn:hover i{transform:translateX(4px);}

@media (max-width:900px){
  .dv-stage{grid-template-columns:minmax(0,1fr);gap:26px;}
  .dv-media{aspect-ratio:16/9;}
  /* 세로로 쌓이면 컬럼 높이를 채울 필요가 없으므로 간격을 직접 준다 */
  .dv-info{gap:22px;justify-content:flex-start;}
  .dv-sol{grid-template-columns:minmax(0,1fr);gap:24px;}
  .dv-sol__media{aspect-ratio:4/3;min-height:0;}
  .dv-sol__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* =========================================================
   RELATED PRODUCTS RAIL (program.html)
   A horizontally scrollable row of the lines used by each programme, with
   arrow buttons either side. Native overflow scrolling with snap does the
   work — the arrows just nudge it, so it stays usable by touch and keyboard
   even if the script never runs.
   ========================================================= */
.rp{
  position:relative;
  margin:clamp(30px,3.4vw,56px) 0 0;
}
/* The rail sits on the programme page's dark ground, so its type is set from
   --rp-ink / --rp-sub rather than a fixed ink colour. Setting it to #111 put
   near-black text on a near-black background and the labels vanished. Override
   the two variables if this rail is ever reused on a light section. */
.rp{--rp-ink:#f4f4f4;--rp-sub:#d6d6d6;}
.rp__h{
  margin:0 0 clamp(14px,1.6vw,24px);
  font-size:clamp(15px,1.15vw,19px);font-weight:800;letter-spacing:-.02em;
  color:var(--rp-ink);
}
.rp__viewport{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rp__viewport::-webkit-scrollbar{display:none;}
.rp__list{
  list-style:none;margin:0;padding:0;
  display:flex;gap:clamp(20px,2.4vw,40px);
}
.rp__item{
  flex:0 0 clamp(150px,21%,225px);scroll-snap-align:start;
}
.rp__link{display:block;text-decoration:none;color:inherit;}
.rp__shot{
  display:block;aspect-ratio:4/3;background:#d9d9d9 50% 50%/cover no-repeat;
  transition:opacity .25s ease;
}
.rp__link:hover .rp__shot{opacity:.86;}
/* The line names were small and set in a light grey, which left them barely
   legible under the thumbnails — they are the label for the card, so they carry
   body weight and the page's ink colour. */
.rp__name{
  display:block;margin-top:clamp(10px,1.1vw,16px);
  font-size:clamp(13px,1.05vw,17px);font-weight:600;line-height:1.5;
  letter-spacing:-.02em;color:var(--rp-sub);
}
.rp__link:hover .rp__name{color:var(--rp-ink);}
/* arrows sit outside the rail, centred on the thumbnails */
.rp__nav{
  position:absolute;top:calc(50% + clamp(7px,.8vw,12px));transform:translateY(-50%);
  z-index:2;appearance:none;cursor:pointer;
  width:clamp(24px,2.2vw,34px);aspect-ratio:1;
  background:none;border:0;padding:0;
  font-size:clamp(20px,1.8vw,28px);line-height:1;color:#9aa0a7;
  transition:color .2s ease,opacity .2s ease;
}
.rp__nav:hover{color:var(--rp-ink);}
.rp__nav[disabled]{opacity:.25;cursor:default;}
.rp__nav--prev{left:calc(clamp(24px,2.2vw,34px) * -1);}
.rp__nav--next{right:calc(clamp(24px,2.2vw,34px) * -1);}
@media (max-width:900px){
  .rp__nav{display:none;}
  .rp__item{flex-basis:46%;}
}

/* =========================================================
   NOTICE BOARD (blog.html)
   Title band, then a rule-separated list: badge · title · date · expander,
   with the body sliding open. Pagination beneath.
   ========================================================= */
.nb-head{
  background:#eceded;
  padding:clamp(56px,7vw,120px) 0 clamp(30px,3.4vw,56px);
}
.nb-head__t{
  margin:0;font-size:clamp(28px,3vw,48px);font-weight:700;
  letter-spacing:-.03em;line-height:1.2;color:#111;
}
.nb-head__d{
  margin:clamp(12px,1.3vw,20px) 0 0;
  font-size:clamp(13.5px,1.05vw,17px);line-height:1.7;
  letter-spacing:-.02em;color:#5a6675;
}

.nb{padding-top:clamp(34px,4vw,64px);}
.nb-list{
  list-style:none;margin:0;padding:0;
  border-top:1px solid #111;
}
.nb-row{border-bottom:1px solid #e4e6e9;}
.nb-row--pin{background:#f7f5f2;}

.nb-row__head{
  width:100%;appearance:none;background:none;border:0;cursor:pointer;
  transition:background .2s ease;
  font-family:inherit;text-align:left;
  padding:clamp(16px,1.7vw,24px) clamp(14px,1.4vw,22px);
  display:grid;
  grid-template-columns:clamp(72px,7vw,104px) minmax(0,1fr) auto clamp(24px,2.2vw,34px);
  align-items:center;gap:clamp(12px,1.5vw,26px);
}
.nb-row__badge{
  justify-self:start;
  font-size:clamp(11px,.85vw,13px);font-weight:600;letter-spacing:-.02em;
  color:#6b7480;
}
.nb-row--pin .nb-row__badge{color:#0E2A47;}
.nb-row__title{
  min-width:0;font-size:clamp(13.5px,1.05vw,17px);line-height:1.5;
  letter-spacing:-.02em;color:#1a1a1a;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nb-row--pin .nb-row__title{font-weight:600;}
/* pin marker drawn in CSS so it needs no icon file */
.nb-row__pin{
  display:inline-block;width:.9em;height:.9em;margin-right:.5em;
  vertical-align:-.08em;background:#0E2A47;
  clip-path:polygon(50% 0,62% 30%,100% 42%,72% 62%,80% 100%,50% 78%,20% 100%,28% 62%,0 42%,38% 30%);
}
.nb-row__date{
  font-size:clamp(12px,.95vw,15px);letter-spacing:-.02em;color:#9aa4b0;white-space:nowrap;
}
/* the expander is a plus that becomes a minus when open */
.nb-row__toggle{
  justify-self:end;position:relative;width:14px;height:14px;
}
.nb-row__toggle::before,
.nb-row__toggle::after{
  content:"";position:absolute;left:50%;top:50%;background:#8b95a1;
  transition:transform .25s ease,opacity .25s ease;
}
.nb-row__toggle::before{width:14px;height:1px;transform:translate(-50%,-50%);}
.nb-row__toggle::after{width:1px;height:14px;transform:translate(-50%,-50%);}
.nb-row.on .nb-row__toggle::after{transform:translate(-50%,-50%) scaleY(0);}
.nb-row.on .nb-row__toggle::before{background:#111;}

/* row now opens a detail view rather than expanding, so the [+] becomes an
   arrow and the accordion body is dropped */
.nb-row__go{
  justify-self:end;font-size:clamp(14px,1.15vw,18px);color:#b9c1cb;
  transition:transform .25s cubic-bezier(.22,1,.36,1),color .2s ease;
}
.nb-row__head:hover{background:#fafbfc;}
.nb-row__head:hover .nb-row__go{color:#0E2A47;transform:translateX(4px);}

/* ---- detail view (modelled on the GNI support page's exhibition action) ---- */
.nb-detail{display:none;}
.nb-detail.on{display:block;animation:nbFade .4s ease;}
@keyframes nbFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.nb-back{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:#fff;border:1px solid #e4e6e9;border-radius:999px;
  font-family:inherit;font-size:14px;font-weight:700;color:#0E2A47;
  padding:7px 20px 7px 7px;margin-bottom:26px;
  box-shadow:0 8px 20px -12px rgba(20,40,70,.35);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.nb-back__ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:#0E2A47;color:#fff;font-size:15px;
  transition:transform .25s ease;
}
.nb-back:hover{border-color:#0E2A47;transform:translateY(-1px);}
.nb-back:hover .nb-back__ic{transform:translateX(-3px);}

.nb-kicker{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#8b95a1;
}
.nb-num{
  margin:6px 0 0;font-size:clamp(44px,8vw,104px);font-weight:800;
  letter-spacing:-.03em;line-height:1;color:#0E2A47;
}
.nb-sub{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  margin:16px 0 30px;font-size:13px;color:#8b95a1;
}
.nb-sub .tg{background:#eef1f6;border-radius:30px;padding:5px 13px;font-weight:700;color:#33517f;}
/* The image slot took a full half of the row, which at this measure made it
   taller than the copy beside it. The copy column carries more weight now. */
.nb-grid{
  display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.82fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;border-top:1px solid #e4e6e9;padding-top:34px;
}
.nb-title{
  margin:0;font-size:clamp(24px,3.2vw,40px);font-weight:800;
  letter-spacing:-.02em;line-height:1.15;color:#111;
}
.nb-meta{margin-top:22px;border-top:1px solid #e4e6e9;}
.nb-mrow{
  display:grid;grid-template-columns:110px 1fr;gap:14px;padding:12px 2px;
  border-bottom:1px solid #e4e6e9;font-size:14px;color:#1a1a1a;
}
.nb-mrow b{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#0E2A47;font-weight:700;padding-top:2px;
}
/* 상세 메타의 태그 줄 — 칩 모양은 목록 카드와 같게 맞춘다 */
.nb-mtags{display:flex;flex-wrap:wrap;gap:6px;}
.nb-mtags i{
  font-style:normal;font-size:12px;font-weight:600;letter-spacing:-.02em;
  color:#6b7280;background:#f3f4f6;border-radius:12px;padding:3px 10px;
}
.nb-body{margin-top:22px;font-size:15px;line-height:1.85;color:#454c58;}
/* 전문(全文) 렌더링 — 문단·소제목·불릿 */
.nb-body p{margin:0 0 1.15em;}
.nb-body p:last-child{margin-bottom:0;}
.nb-body .nb-h{margin:2em 0 .7em;font-size:17.5px;font-weight:700;line-height:1.5;color:#111;letter-spacing:-.02em;}
.nb-body .nb-h:first-child{margin-top:0;}
.nb-body .nb-ul{margin:0 0 1.15em;padding-left:1.1em;}
.nb-body .nb-ul li{margin:0 0 .4em;list-style:disc;}
/* 전문이 길어지면 사진 옆 한 컬럼으로는 답답하므로, 상세 그리드를 위/아래로 푼다 */
.nb-grid{align-items:start;}
/* ---- 스티키 이미지 컬럼 ----
   본문을 읽어 내려가는 동안 오른쪽 사진은 화면에 붙어 있고, 지나온 구간에 맞춰
   글 안에 심어둔 앵커를 기준으로 사진만 교차 페이드로 바뀐다. */
.nb-photo{
  position:sticky;top:calc(var(--navh,74px) + 28px);
  border-radius:14px;overflow:hidden;background:#f4f6f9;border:1px solid #e4e6e9;
}
.nb-photo span{color:#9aa7bd;font-size:13px;}
.nb-shots{position:relative;height:min(68vh,720px);}
.nb-shots img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  opacity:0;transform:scale(1.02);
  transition:opacity .55s ease,transform .8s cubic-bezier(.22,1,.36,1);
}
.nb-shots img.on{opacity:1;transform:none;}
/* 몇 번째 사진인지 알려주는 인디케이터 */
.nb-dots{display:flex;gap:6px;justify-content:center;padding:12px 0 14px;background:#fff;
  border-top:1px solid #eef1f5;}
.nb-dots i{width:22px;height:3px;border-radius:3px;background:#dfe4ea;transition:background .3s ease;}
.nb-dots i.on{background:#0E2A47;}
/* 사진이 많은 글은 막대 대신 숫자로 — 막대 스무 개는 세어지지 않는다 */
.nb-count{display:flex;justify-content:center;gap:2px;padding:12px 0 14px;background:#fff;
  border-top:1px solid #eef1f5;font-size:12px;color:#8b95a1;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.nb-count b{font-weight:700;color:#0E2A47;}
/* ---- 사진 카드 아래 뉴스레터 구독 띠 (blog.html 상세) ----
   .nb-photo 가 sticky 라서 바깥에 두면 스크롤 시 혼자 흘러가 버린다.
   그래서 카드 안에 넣되 윗선으로 구분해 별개 블록처럼 보이게 한다. */
.nb-news{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(16px,1.5vw,22px) clamp(18px,1.7vw,26px);
  background:#fff;border-top:1px solid #eef1f5;}
.nb-news__tx{display:flex;flex-direction:column;gap:3px;min-width:0;}
.nb-news__tx b{font-size:clamp(13.5px,1vw,15px);font-weight:700;color:#0E2A47;letter-spacing:-.01em;}
.nb-news__tx span{font-size:clamp(12.5px,.9vw,13.5px);color:#7c8695;letter-spacing:-.01em;}
.nb-news__btn{flex:none;display:inline-flex;align-items:center;gap:9px;
  padding:clamp(10px,.9vw,13px) clamp(16px,1.3vw,20px);border-radius:9px;
  background:#0E2A47;color:#fff;text-decoration:none;
  font-size:clamp(13px,.95vw,14.5px);font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  transition:background .2s ease,transform .2s ease;}
.nb-news__btn i{font-style:normal;font-weight:400;transition:transform .25s ease;}
.nb-news__btn:hover{background:#2E5AAC;transform:translateY(-1px);}
.nb-news__btn:hover i{transform:translateX(3px);}
/* class 로 display 를 지정한 요소는 hidden 속성만으로는 안 숨는다(UA 스타일보다 우선).
   구독 UI 는 hidden 을 토글해 단계를 넘기므로 여기서 확실히 눌러둔다. */
.nb-news [hidden]{display:none !important;}
/* 버튼을 누르면 같은 자리에서 입력폼으로 펼쳐진다 — 세로로 바뀐다 */
.nb-news.is-open{flex-direction:column;align-items:stretch;gap:12px;}
.nb-news__form{display:flex;flex-direction:column;gap:9px;}
.nb-news__row{display:flex;gap:8px;}
.nb-news__row input{flex:1 1 auto;min-width:0;height:44px;padding:0 14px;
  border:1px solid #dbe1e9;border-radius:9px;background:#fff;color:#1a1a1a;
  font:inherit;font-size:14px;letter-spacing:-.01em;
  transition:border-color .18s ease,box-shadow .18s ease;}
.nb-news__row input::placeholder{color:#a7b0bd;}
.nb-news__row input:focus{outline:none;border-color:#2E5AAC;box-shadow:0 0 0 3px rgba(46,90,172,.12);}
.nb-news__row button{flex:none;height:44px;padding:0 20px;border:0;border-radius:9px;
  background:#0E2A47;color:#fff;font:inherit;font-size:14px;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;transition:background .2s ease;}
.nb-news__row button:hover{background:#2E5AAC;}
/* 동의 체크와 [자세히 보기] 한 줄 — 좁으면 링크가 아래로 내려간다 */
.nb-news__agreerow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.nb-news__more{font-size:12px;color:#9aa4b0;text-decoration:underline;letter-spacing:-.02em;}
.nb-news__more:hover{color:#5a6675;}
.nb-news__agree{display:flex;align-items:center;gap:7px;cursor:pointer;
  font-size:12.5px;color:#7c8695;letter-spacing:-.01em;}
.nb-news__agree input{width:15px;height:15px;flex:none;accent-color:#0E2A47;cursor:pointer;}
.nb-news__err{margin:0;font-size:12.5px;color:#d02c2c;letter-spacing:-.01em;}
/* 잘못이 아니라 안내 — 이미 신청된 주소라고 알릴 때. 빨간 글로 쓰면 틀린 줄 안다 */
.nb-news__err.is-note{color:#0E2A47;font-weight:600;}
.nb-news__done{margin:0;font-size:13.5px;font-weight:600;color:#0E2A47;letter-spacing:-.01em;}
@media (max-width:520px){
  .nb-news{flex-direction:column;align-items:stretch;}
  .nb-news__btn{justify-content:center;}
}

/* 본문 속 보이지 않는 스크롤 앵커 */
.nb-anchor{display:block;height:0;overflow:hidden;}
@media (max-width:760px){
  .nb-photo{position:static;}
  .nb-shots{height:min(58vh,460px);}
}

.nb-others{margin-top:46px;border-top:2px solid #111;}
.nb-other{
  display:grid;grid-template-columns:1fr 4fr auto;gap:18px;align-items:center;
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #e4e6e9;
  padding:18px 6px;cursor:pointer;font-family:inherit;transition:background .2s;
}
.nb-other:hover{background:#f6f8fc;}
.nb-other__n{font-size:clamp(18px,2vw,26px);font-weight:800;color:#111;}
.nb-other__t{font-size:15px;font-weight:600;color:#111;}
.nb-other__go{font-size:18px;color:#0E2A47;}
@media (max-width:760px){ .nb-grid{grid-template-columns:1fr;} }

.nb-page{
  margin:clamp(34px,4vw,64px) 0 0;
  display:flex;justify-content:center;align-items:center;gap:clamp(4px,.5vw,8px);
}
.nb-page a{
  display:flex;align-items:center;justify-content:center;
  min-width:clamp(28px,2.4vw,34px);height:clamp(28px,2.4vw,34px);
  font-size:clamp(12.5px,1vw,15px);letter-spacing:-.02em;
  color:#8b95a1;text-decoration:none;border-radius:2px;
  transition:color .2s ease,background .2s ease;
}
.nb-page a:hover{color:#111;}
.nb-page__n.on{background:#0E2A47;color:#fff;}
.nb-page__n.on:hover{color:#fff;}

@media (max-width:760px){
  .nb-row__head{grid-template-columns:minmax(0,1fr) auto;row-gap:6px;}
  .nb-row__badge{grid-column:1/-1;}
  .nb-row__title{white-space:normal;}
  .nb-row__inner{padding-left:clamp(14px,1.4vw,22px);}
}

/* =========================================================
   NEWS ROOM — ancors.co.kr/pr-news 레이아웃
   레퍼런스 실측(뷰포트 2560 기준):
     컨테이너 1732 · 카드 480 · 열 간격 146 · 행 간격 100
     이미지 480×600(4:5) · 제목 18/600 #111827 (이미지에서 20px)
     날짜 14/400 #9CA3AF (제목에서 4px)
     타이틀 200px/700 letter-spacing −12px 우측 정렬
     탭 18/600 · gap 40 · 높이 57 · 활성 앞 6px 원 #E62318
     탭 아래 1px #D6D6D6 구분선
   폭 의존 값은 컨테이너 대비 비율로 옮겨, 어떤 폭에서도
   레퍼런스와 같은 비율이 유지되도록 했습니다.
   (카드 480/1732 = 27.71%, 열 간격은 space-between이 만듭니다)
   ========================================================= */
.nr{padding-bottom:clamp(80px,10vw,170px);}
.nr > .wrap{max-width:calc(1600px + var(--gutter) * 2);}

/* ---- hero ---- */
.nr-hero{padding:calc(var(--navh) + clamp(20px,min(2.6vw,4.4vh),46px)) 0 0;}
.nr-hero__eyebrow{
  margin:0;text-align:right;text-transform:uppercase;
  font-size:clamp(11px,.85vw,13px);font-weight:700;line-height:1.6;
  letter-spacing:.005em;color:#111;
}
.nr-hero__kr{
  margin:clamp(9px,1vw,14px) 0 0;text-align:right;
  /* 영문 킥커를 뺀 자리라 한 단계 키우고, 두 줄 구성에 맞춰 줄간격도 넓혔다 */
  font-size:clamp(13.5px,1.12vw,17px);font-weight:500;
  letter-spacing:-.03em;line-height:1.65;color:#111;
}
.nr-hero__t{
  margin:clamp(22px,min(3.7vw,5vh),62px) 0 0;text-align:right;
  font-size:clamp(40px,min(7.4vw,12.4vh),130px);font-weight:700;line-height:1;
  letter-spacing:-.06em;color:#111;white-space:nowrap;
}

/* ---- category tabs ---- */
.nr-tabs{
  display:flex;align-items:center;
  gap:clamp(24px,2.3vw,40px);
  height:clamp(38px,3.2vw,50px);
  margin-top:clamp(12px,min(1.6vw,2.4vh),28px);
}
.nr-tabs button{
  appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:clamp(15px,1.15vw,18px);font-weight:600;
  letter-spacing:-.03em;line-height:1.5;color:rgba(17,17,17,.4);
  transition:color .25s var(--ease);
}
.nr-tabs button:hover{color:rgba(17,17,17,.7);}
.nr-tabs button.on{color:#111;}
.nr-tabs button.on::before{
  content:"";display:inline-block;vertical-align:middle;
  width:6px;height:6px;border-radius:50%;background:#e62318;
  margin-right:7px;transform:translateY(-1px);
}

/* ---- card grid ---- */
.nr-grid{
  display:grid;grid-template-columns:repeat(3,27.71%);
  justify-content:space-between;
  row-gap:clamp(46px,5.8vw,100px);
  border-top:1px solid #d6d6d6;
  padding-top:clamp(26px,min(3.2vw,4.6vh),56px);
}
.nr-card{
  appearance:none;background:none;border:0;padding:0;margin:0;
  width:100%;display:block;text-align:center;cursor:pointer;font-family:inherit;
}
/* The card's parts are spans inside a <button>, so each needs an explicit
   block display — otherwise aspect-ratio and the margins below are ignored. */
.nr-card__shot{display:block;aspect-ratio:4/5;overflow:hidden;background:#898989;}
.nr-card__shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease);
}
.nr-card:hover .nr-card__shot img{transform:scale(1.045);}
.nr-card__t{
  display:block;margin:20px 0 0;font-size:clamp(15px,1.15vw,18px);font-weight:600;
  letter-spacing:-.04em;line-height:1.4;color:#111827;
}
.nr-card__d{
  display:block;margin:4px 0 0;font-size:clamp(12px,.95vw,14px);font-weight:400;
  letter-spacing:-.036em;line-height:1.5;color:#9ca3af;
}
/* 카드 요약문 — 두 줄까지. 글마다 길이가 달라 그냥 두면 카드 높이가 들쭉날쭉해진다 */
.nr-card__s{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin:7px 0 0;font-size:clamp(12.5px,1vw,14px);font-weight:400;
  letter-spacing:-.03em;line-height:1.6;color:#6b7280;
}
/* 카드 태그 */
.nr-card__tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:11px 0 0;}
.nr-card__tags i{
  font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:-.02em;
  color:#6b7280;background:#f3f4f6;border-radius:11px;padding:3px 9px;
}
.nr-empty{
  grid-column:1/-1;text-align:center;padding:clamp(60px,8vw,120px) 0;
  font-size:15px;letter-spacing:-.02em;color:#9ca3af;
}

/* ---- board list (브랜드 뉴스) ----
   레퍼런스 실측: 3열 502 / 1048 / 183 (컨테이너 1732 대비
   28.98% / 60.51% / 10.57%), 행 높이 64px(상하 패딩 20),
   행마다 1px #ebebeb 구분선, 첫 행 위 120px 여백.
   매체명 14/500 · 제목 16/600 · 날짜 14/400 우측 정렬 */
.nr-list{display:block;border-top:1px solid #d6d6d6;}
.nr-board{
  width:100%;border-collapse:collapse;table-layout:fixed;
}
.nr-board__pad{height:clamp(52px,7vw,120px);}

/* ---- 쪽번호 ----
   갤러리형(.nr-grid)과 게시판형(.nr-list) 이 같은 컨테이너를 쓰므로
   grid-column 을 지정해 3열 그리드 안에서도 한 줄을 다 차지하게 한다. */
.nr-page{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:center;gap:clamp(4px,.5vw,8px);
  margin-top:clamp(44px,5vw,88px);
}
.nr-page button{
  appearance:none;background:none;border:0;cursor:pointer;font:inherit;
  min-width:clamp(30px,2.4vw,38px);height:clamp(30px,2.4vw,38px);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:clamp(13px,.92vw,15px);font-weight:500;letter-spacing:-.01em;
  color:#8b95a1;border-radius:3px;
  transition:color .2s ease,background .2s ease;
}
.nr-page button:hover:not(:disabled){color:#0a0a0a;background:#f3f5f8;}
.nr-page button:disabled{opacity:.32;cursor:default;}
.nr-page .is-on{color:#fff;background:#0E2A47;font-weight:700;}
.nr-page .is-on:hover{color:#fff;background:#0E2A47;}
.nr-page__arw svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
/* … 도 클릭 가능(이전/다음 5쪽 묶음으로 이동) */
.nr-page__gap{color:#aab4c0;min-width:auto;width:22px;letter-spacing:.06em;}
.nr-page__gap:hover{color:#0a0a0a;background:#f3f5f8;}
.nr-board tr{border-bottom:1px solid #ebebeb;}
.nr-board tr.nr-board__spacer{border-bottom:0;}
.nr-board td{padding:0;vertical-align:middle;}
.nr-b{
  width:100%;appearance:none;background:none;border:0;cursor:pointer;
  font-family:inherit;text-align:left;display:block;
  padding:clamp(14px,1.6vw,20px) 1px;
  transition:opacity .25s var(--ease);
}
.nr-board tr:hover .nr-b{opacity:.55;}
.nr-b__media{
  font-size:clamp(12.5px,1vw,14px);font-weight:500;
  letter-spacing:-.04em;color:rgba(0,0,0,.35);
}
.nr-b__t{
  /* 기본은 보통 굵기. 고정 글만 아래에서 700 으로 올린다. */
  font-size:clamp(14px,1.05vw,16px);font-weight:400;
  letter-spacing:-.03em;color:#111;line-height:1.5;
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nr-b__d{
  font-size:clamp(12.5px,1vw,14px);font-weight:400;
  color:rgba(0,0,0,.3);text-align:right;display:block;
}
.nr-board col.c1{width:28.98%}
.nr-board col.c2{width:60.51%}
.nr-board col.c3{width:10.57%}

/* 공지사항 게시판 — 분류 배지 칸을 빼고 제목 / 날짜 두 칸으로 */
.nr-board--notice col.c1{width:auto}
.nr-board--notice col.c2{width:clamp(96px,9vw,132px)}
/* 핀 아이콘과 제목을 한 줄에 세운다 */
.nr-board--notice .nr-b{display:flex;align-items:center;gap:clamp(8px,.8vw,12px);}

/* ── 공지 고정(상단 노출) ──
   관리자에서 '고정'한 글은 작성일과 무관하게 목록 맨 위에 모여 노출된다.
   데이터에서는 POSTS 항목의 pin:1 로 표시하고, 렌더 시 tr.is-pin 이 붙는다.
   고정 블록의 마지막 행에는 is-pin--last 가 붙어 일반 글과 경계를 만든다. */
/* 고정 글은 행 배경을 깔지 않고 제목만 굵게 둔다.
   배경 + 알약 배지 + 굵은 글씨가 겹치면 목록에서 한 줄만 과하게 튄다. */
.nr-board tr.is-pin--last{border-bottom:1px solid #e3e9f0;}
.nr-board tr.is-pin .nr-b__t{font-weight:700;color:#0a0a0a;}
/* 핀 아이콘만 — 라벨 글자와 배경을 뺐다 */
.nr-pin{
  /* 폭을 고정해 고정/일반 행의 제목 시작점을 같은 선에 맞춘다 */
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(13px,1vw,15px);flex:none;
  color:#0E2A47;line-height:1;
}
.nr-pin svg{width:clamp(13px,1vw,15px);height:clamp(13px,1vw,15px);fill:currentColor;flex:none;}

/* 자료실 상세의 다운로드 링크 */
.nb-dl{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  padding:13px 24px;background:#0E2A47;color:#fff;border-radius:2px;
  font-size:14px;font-weight:600;letter-spacing:-.02em;text-decoration:none;
  transition:background .25s var(--ease);
}
.nb-dl:hover{background:#16375c;}
.nb-dl i{font-style:normal;}

/* =========================================================
   ASSET REQUEST (자료실) — 좌측 소개·연락처 / 우측 신청 폼
   ========================================================= */
.aq{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(32px,4.4vw,72px);align-items:start;
  padding-top:clamp(46px,5.8vw,100px);
  border-top:1px solid #d6d6d6;
}
/* `display:grid` beats the `hidden` attribute, so the panel the tab switch
   hides has to be told explicitly. Applies to both switched blocks. */
.aq[hidden],.nr-grid[hidden],.nr-list[hidden]{display:none;}

/* ---- left column ---- (모두 왼쪽 정렬) */
.aq-eyebrow{
  margin:0 0 clamp(8px,.9vw,14px);text-align:left;
  font-size:clamp(11px,.85vw,13px);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#9aa4b0;
}
.aq-lead{
  margin:0;text-align:left;
  font-size:clamp(26px,2.5vw,40px);font-weight:700;
  letter-spacing:-.035em;line-height:1.25;color:#111;
}
.aq-sub{
  margin:clamp(14px,1.4vw,22px) 0 0;text-align:left;
  font-size:clamp(14px,1.05vw,16px);
  font-weight:400;letter-spacing:-.025em;line-height:1.75;color:#5a6675;
}
.aq-shot{
  margin-top:clamp(24px,2.6vw,40px);aspect-ratio:4/3;overflow:hidden;background:#eef1f5;
}
.aq-shot img{width:100%;height:100%;object-fit:cover;display:block;}

.aq-support{margin-top:clamp(26px,2.8vw,42px);}
.aq-support h3{
  margin:0;font-size:clamp(17px,1.35vw,21px);font-weight:700;
  letter-spacing:-.035em;color:#111;
}
.aq-support p{
  margin:12px 0 0;font-size:clamp(13.5px,1vw,15px);line-height:1.75;
  letter-spacing:-.025em;color:#5a6675;
}
.aq-contact{margin-top:clamp(20px,2.2vw,32px);display:grid;gap:14px;}
.aq-contact li{display:flex;align-items:flex-start;gap:12px;list-style:none;}
.aq-contact svg{
  width:17px;height:17px;flex:none;margin-top:2px;
  stroke:#2f6fd0;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.aq-contact span,.aq-contact a{
  font-size:clamp(13.5px,1vw,15px);line-height:1.6;letter-spacing:-.025em;
  color:#1a1a1a;text-decoration:none;
}
.aq-contact a:hover{text-decoration:underline;}

/* ---- right column: the form card ---- */
/* No card frame — the fields sit straight on the page, so the form's first row
   lines up with the copy in the left column. */
.aq-card{border:0;border-radius:0;background:none;padding:0;}
.aq-label{
  display:block;margin:0 0 12px;font-size:clamp(13px,1vw,15px);font-weight:700;
  letter-spacing:-.03em;color:#111;
}
.aq-label em{
  font-style:normal;font-weight:400;color:#9aa4b0;margin-left:8px;
  font-size:.86em;letter-spacing:-.02em;
}
.aq-req{color:#e62318;margin-left:3px;}

/* type chips */
.aq-chips{display:flex;flex-wrap:wrap;gap:8px;}
.aq-chip{
  appearance:none;font-family:inherit;cursor:pointer;
  border:1px solid #dfe3e8;background:#fff;color:#5a6675;border-radius:4px;
  padding:9px 16px;font-size:clamp(12.5px,.95vw,14px);font-weight:600;letter-spacing:-.025em;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.aq-chip:hover{border-color:#b7c2d0;color:#111;}
.aq-chip.on{background:#0E2A47;border-color:#0E2A47;color:#fff;}

/* fields */
.aq-rows{display:grid;gap:clamp(14px,1.4vw,20px);}
.aq-row2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.2vw,18px);}
.aq-f > label{
  display:block;margin:0 0 8px;font-size:clamp(11.5px,.86vw,13px);font-weight:700;
  letter-spacing:.04em;color:#111;
}
.aq-f > label em{
  font-style:normal;font-weight:500;color:#9aa4b0;letter-spacing:-.02em;
  font-size:.95em;margin-left:2px;
}

/* INTEREST — bordered checkbox cells, two per row */
.aq-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.aq-opt{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  border:1px solid #dfe3e8;border-radius:4px;background:#fff;
  padding:12px 14px;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.aq-opt:hover{border-color:#b7c2d0;}
/* The generic `.aq-f input{width:100%}` below also matches these boxes, so the
   checkbox has to be pinned with a stronger selector — otherwise it stretched
   to the full cell and pushed the label into a one-character-wide column. */
.aq-f .aq-opt input{
  width:15px;min-width:15px;height:15px;margin:0;padding:0;
  accent-color:#2f6fd0;flex:none;cursor:pointer;
}
.aq-opt span{
  flex:1 1 auto;min-width:0;
  font-size:clamp(12.5px,.95vw,14px);letter-spacing:-.03em;line-height:1.4;color:#1a1a1a;
}
.aq-opt:has(input:checked){border-color:#2f6fd0;background:#f5f9ff;}
.aq-f input,.aq-f select,.aq-f textarea{
  width:100%;font-family:inherit;background:#fff;color:#111;
  border:1px solid #dfe3e8;border-radius:4px;
  padding:12px 14px;font-size:clamp(13px,1vw,14.5px);letter-spacing:-.025em;
  outline:none;transition:border-color .2s var(--ease);
}
.aq-f input::placeholder,.aq-f textarea::placeholder{color:#b2bac4;}
.aq-f input:focus,.aq-f select:focus,.aq-f textarea:focus{border-color:#0E2A47;}
.aq-f textarea{min-height:132px;resize:vertical;line-height:1.65;}
.aq-f select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6675' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
  padding-right:36px;
}

/* consent + submit */
.aq-consent{
  margin-top:clamp(20px,2vw,28px);padding-top:clamp(18px,1.8vw,26px);
  border-top:1px solid #edf0f4;
}
.aq-consent > span{
  display:block;margin-bottom:10px;font-size:clamp(12px,.9vw,13px);font-weight:700;
  letter-spacing:-.02em;color:#9aa4b0;
}
.aq-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;}
.aq-check input{width:15px;height:15px;margin:2px 0 0;accent-color:#0E2A47;flex:none;cursor:pointer;}
.aq-check span{font-size:clamp(12.5px,.95vw,14px);line-height:1.6;letter-spacing:-.025em;color:#1a1a1a;}
.aq-policy{
  font-size:inherit;color:#2f6fd0;text-decoration:underline;letter-spacing:-.02em;
}
.aq-policy:hover{color:#1b4f9e;}
/* consent small print */
.aq-fine{
  margin:8px 0 0 24px;font-size:clamp(11px,.85vw,12.5px);line-height:1.65;
  letter-spacing:-.02em;color:#9aa4b0;
}
.aq-foot{
  margin:12px 0 0;text-align:center;font-size:clamp(11.5px,.88vw,13px);
  letter-spacing:-.02em;color:#9aa4b0;
}
.aq-send{
  margin-top:clamp(20px,2vw,28px);width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  appearance:none;border:0;cursor:pointer;font-family:inherit;
  background:#0E2A47;color:#fff;border-radius:4px;
  padding:16px 24px;font-size:clamp(14px,1.05vw,16px);font-weight:700;letter-spacing:-.02em;
  transition:background .25s var(--ease);
}
.aq-send:hover{background:#16375c;}
.aq-send i{font-style:normal;}
.aq-done{
  margin:14px 0 0;font-size:13.5px;letter-spacing:-.02em;color:#2f6fd0;
}

@media (max-width:960px){
  .aq{grid-template-columns:1fr;}
  .aq-row2{grid-template-columns:1fr;}
  .aq-opts{grid-template-columns:1fr;}
}

/* =========================================================
   CONTACT PAGE (contact.html)
   히어로: 좌측 카피 / 우측 사진, 사진 위로 흰 그라디언트가 덮여
   카피가 항상 읽힙니다. 본문: 좌측 연락처 카드 + 우측 문의 폼.
   ========================================================= */
.ct-hero{
  position:relative;overflow:hidden;background:#fff;
  padding:calc(var(--navh) + clamp(40px,5vw,80px)) 0 clamp(48px,6vw,96px);
}
.ct-hero__media{
  position:absolute;inset:0 0 0 auto;width:min(64%,1180px);z-index:0;
}
.ct-hero__media img{width:100%;height:100%;object-fit:cover;display:block;}
/* the wash keeps the left copy legible whatever the photo does */
.ct-hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 26%,rgba(255,255,255,.35) 62%,rgba(255,255,255,0) 100%);
}
.ct-hero .wrap{position:relative;z-index:1;}
.ct-hero__eyebrow{
  margin:0 0 clamp(10px,1.1vw,16px);
  font-size:clamp(12px,.92vw,14px);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#2f6fd0;
}
.ct-hero__t{
  margin:0;font-size:clamp(40px,5.4vw,86px);font-weight:700;
  letter-spacing:-.04em;line-height:1.04;color:#0E2A47;
}
.ct-hero__d{
  margin:clamp(18px,1.8vw,28px) 0 0;max-width:44ch;
  font-size:clamp(14px,1.05vw,16.5px);font-weight:400;line-height:1.8;
  letter-spacing:-.025em;color:#4a5666;
}

/* ---- body: info card + form ---- */
.ct-body{padding:clamp(40px,5vw,80px) 0 clamp(80px,10vw,150px);}
.ct-grid{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  /* start 로 두면 왼쪽 정보 카드가 내용 높이에서 끝나 오른쪽 폼과 밑선이 어긋난다.
     stretch 로 두 칼럼을 같은 높이로 늘린다. */
  gap:clamp(24px,2.6vw,44px);align-items:stretch;
}

.ct-info{
  background:#f4f6f8;border-radius:8px;
  padding:clamp(26px,2.6vw,42px) clamp(22px,2.2vw,34px);
}
.ct-info h2{
  margin:0 0 clamp(22px,2.4vw,34px);
  font-size:clamp(17px,1.35vw,21px);font-weight:700;
  letter-spacing:-.035em;color:#0E2A47;
}
.ct-info ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.1vw,30px);}
.ct-info li{display:flex;align-items:flex-start;gap:clamp(12px,1.2vw,18px);}
.ct-ico{
  flex:none;width:clamp(38px,3.2vw,46px);aspect-ratio:1;border-radius:50%;
  background:#0E2A47;display:flex;align-items:center;justify-content:center;
}
.ct-ico svg{
  width:47%;height:47%;stroke:#fff;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.ct-info h3{
  margin:0 0 5px;font-size:clamp(13px,1vw,15px);font-weight:700;
  letter-spacing:-.03em;color:#111;
}
.ct-info p,.ct-info a{
  margin:0;font-size:clamp(12.5px,.95vw,14px);line-height:1.65;
  letter-spacing:-.025em;color:#5a6675;text-decoration:none;display:block;
}
.ct-info a:hover{color:#0E2A47;text-decoration:underline;}
.ct-info .sm{font-size:clamp(11.5px,.88vw,13px);color:#9aa4b0;margin-top:3px;}

/* ---- form ---- */
.ct-form{
  border:1px solid #e4e6e9;border-radius:8px;background:#fff;
  padding:clamp(26px,2.6vw,42px);
}
.ct-form__h{
  margin:0;font-size:clamp(17px,1.35vw,21px);font-weight:700;
  letter-spacing:-.035em;color:#111;
}
.ct-form__d{
  margin:8px 0 clamp(24px,2.4vw,34px);
  font-size:clamp(12.5px,.95vw,14px);line-height:1.65;
  letter-spacing:-.025em;color:#9aa4b0;
}
.ct-rows{display:grid;gap:clamp(16px,1.6vw,22px);}
.ct-row2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.4vw,20px);}
.ct-f > label{
  display:block;margin:0 0 8px;font-size:clamp(12.5px,.95vw,14px);font-weight:600;
  letter-spacing:-.03em;color:#111;
}
.ct-f > label em{font-style:normal;font-weight:400;color:#9aa4b0;font-size:.92em;margin-left:4px;}
.ct-req{color:#e62318;margin-left:3px;}
.ct-f input,.ct-f select,.ct-f textarea{
  width:100%;font-family:inherit;background:#fff;color:#111;
  border:1px solid #dfe3e8;border-radius:4px;
  padding:12px 14px;font-size:clamp(13px,1vw,14.5px);letter-spacing:-.025em;
  outline:none;transition:border-color .2s var(--ease);
}
.ct-f input::placeholder,.ct-f textarea::placeholder{color:#b2bac4;}
.ct-f input:focus,.ct-f select:focus,.ct-f textarea:focus{border-color:#0E2A47;}
.ct-f textarea{min-height:120px;resize:vertical;line-height:1.65;}
.ct-f select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6675' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
  padding-right:36px;
}

/* interest — a single wrapping row of small checkboxes */
.ct-opts{display:flex;flex-wrap:wrap;gap:10px 18px;}
.ct-opt{display:flex;align-items:center;gap:8px;cursor:pointer;}
.ct-f .ct-opt input{
  width:15px;min-width:15px;height:15px;margin:0;padding:0;
  accent-color:#0E2A47;flex:none;cursor:pointer;
}
.ct-opt span{font-size:clamp(12.5px,.95vw,14px);letter-spacing:-.03em;color:#1a1a1a;}
/* 받고 싶은 자료 — 자료 이름 옆의 용량과 아래 한 줄 안내 */
.ct-docsz{font-style:normal;color:#9aa4b0;font-size:.88em;margin-left:3px;}
.ct-dochint{margin:9px 0 0;font-size:clamp(11.5px,.85vw,12.5px);letter-spacing:-.03em;color:#9aa4b0;}

.ct-agree{
  margin-top:clamp(20px,2vw,28px);display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.ct-check{display:flex;align-items:center;gap:9px;cursor:pointer;}
.ct-check input{width:15px;height:15px;margin:0;accent-color:#0E2A47;flex:none;cursor:pointer;}
.ct-check span{font-size:clamp(12.5px,.95vw,14px);letter-spacing:-.025em;color:#5a6675;}
.ct-more{font-size:clamp(12px,.9vw,13px);color:#9aa4b0;text-decoration:underline;letter-spacing:-.02em;}
.ct-more:hover{color:#5a6675;}
.ct-send{
  margin-top:clamp(18px,1.8vw,26px);width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  appearance:none;border:0;cursor:pointer;font-family:inherit;
  background:#0E2A47;color:#fff;border-radius:4px;
  padding:16px 24px;font-size:clamp(14px,1.05vw,16px);font-weight:700;letter-spacing:-.02em;
  transition:background .25s var(--ease);
}
.ct-send:hover{background:#16375c;}
.ct-send:disabled{background:#5a6675;cursor:default;}
.ct-send i{font-style:normal;}
.ct-done{margin:14px 0 0;font-size:13.5px;letter-spacing:-.02em;color:#2f6fd0;}

@media (max-width:1000px){
  .ct-grid{grid-template-columns:1fr;}
  .ct-hero__media{width:100%;opacity:.5;}
}
@media (max-width:640px){
  .ct-row2{grid-template-columns:1fr;}
}

@media (max-width:1024px){
  .nr-grid{grid-template-columns:repeat(2,47.5%);}
  .nr-hero__t{white-space:normal;}
}
@media (max-width:640px){
  .nr-grid{grid-template-columns:1fr;justify-content:stretch;}
}

/* ---- 제품 카드 키워드 칩 + 검색 필터 ----
   카드 상단 태그를 라인명·용량 대신 검색 키워드로 바꿨다.
   칩을 누르거나 상단 돋보기로 검색하면 전 라인에서 결과를 모아 보여준다. */
.pl__kw{
  appearance:none;display:inline-block;margin-left:10px;cursor:pointer;
  border:1px solid rgba(255,255,255,.5);border-radius:40px;padding:8px 16px;background:none;
  font-family:inherit;font-size:clamp(13px,1.02vw,16px);font-weight:600;letter-spacing:var(--pl-ls);
  color:#fff;white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.pl__kw:hover{background:#fff;border-color:#fff;color:#111;}
.pl__clear{grid-column:1/-1;display:flex;justify-content:center;padding:8px 0 0;}
.pl__clear button,.pl__clearInline{
  appearance:none;cursor:pointer;font-family:inherit;
  border:1px solid #d5dce5;border-radius:999px;background:#fff;
  padding:12px 26px;font-size:14px;font-weight:700;color:#3a4658;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.pl__clear button:hover,.pl__clearInline:hover{border-color:#111;color:#111;background:#f5f7fa;}
.pl__clearInline{margin-left:10px;padding:8px 18px;font-size:13px;}

/* ===================================================== 모바일 탭 스트립 가로 스크롤
   .pl__tabs / .dv-tabs 는 7칸·6칸 max-content 그리드 + nowrap 라벨이라
   390px 화면에서 문서 폭이 853px / 562px 까지 벌어졌다. 그러면 모바일 브라우저가
   페이지 전체를 축소해 버려 본문 글자까지 작아진다.
   좁은 폭에서는 그리드를 풀고 탭 줄만 가로로 스크롤시킨다. */
@media (max-width:1024px){ /* 760→1024: 태블릿(768~1024)에서도 7칸 탭이 넘쳐 가로스크롤 전환 */
  .pl__tabs,.dv-tabs{
    display:flex;flex-wrap:nowrap;justify-content:flex-start;
    gap:20px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .pl__tabs::-webkit-scrollbar,.dv-tabs::-webkit-scrollbar{display:none;}
  .pl__tab,.dv-tab{flex:0 0 auto;overflow:visible;}
}