/* ---------- Sub-page shared variables ---------- */
:root{
  --sub-content-max:1160px;
  --sub-card-radius:6px;
  --sub-section-pad-y:50px;
  --sub-gap-sm:14px;
  --sub-gap-md:20px;
  --sub-h2-size:22px;
  --sub-bg-base:#1e1f29;
  --sub-bg-alt:#000;
  --era-green:#60f92b;
  --era-green2:#269E09;
  --era-blue:#3967ec;
  --era-blue2:#7094FF;
  --era-yellow:#fff700;
  --era-orange:#EB7A09;
  --era-gray-line:#474747;
  --era-gray-dot:#8b8b8b;
  --timeline-line-x:60px;
}
/* Sub pages use their own base background (overrides common.css's body rule for main page) */
body{background:var(--sub-bg-base);}
.yellow {color:var(--era-yellow) !important;}
.orange {color:var(--era-orange) !important;}
.green2 {color:var(--era-green2) !important;}
.blue {color:var(--blue-600) !important;}
.PD-B-100 {padding-bottom:100px !important;}
.MG-B-20 {margin-bottom:20px;}
.MG-B-50 {margin-bottom:50px;}

/* ---------- Sub hero ---------- */
.sub-hero{
  position:relative; margin-top:var(--header-h);
  min-height:320px; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding:40px 24px;
  background:radial-gradient(ellipse 900px 560px at 18% 12%, #1c3f8f 0%, #060a14 72%);
}
.sub-hero .grid{
  position:absolute; inset:0;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  opacity:.85;
}
.sub-hero.sub-hero--sub .grid{background-image:url("../images/sub/sub0_top_bg.png");}
.sub-hero.sub-hero--product .grid{background-image:url("../images/sub/sub1_top_bg.png");}
.sub-hero.sub-hero--case .grid{background-image:url("../images/sub/sub2_top_bg.png");}
.sub-hero.sub-hero--support .grid{background-image:url("../images/sub/sub3_top_bg.png");}
.sub-hero.sub-hero--company .grid{background-image:url("../images/sub/sub4_top_bg.png");}
.sub-hero .content{position:relative; z-index:1;}
.sub-hero .accent-bar{
  width:44px; height:2px; background:var(--blue-400);
  margin:0 auto; box-shadow:0 0 12px rgba(110,198,255,.8);
}
.sub-hero h1{
  font-family:var(--font-en); font-weight:700; font-size:clamp(30px,4vw,38px);
  margin-bottom:14px;
}

/* ---------- Tab navigation ---------- */
/* ---------- Content ---------- */
/* ---------- Responsive ---------- */
@media (max-width:600px){
  .sub-hero{min-height:220px; margin-top:var(--header-h-m);}
  .landing-tabs{top:var(--header-h-m);}
}

/* =========================================================
   Product detail page components (shared across sub-*.html)
   ========================================================= */

/* ---- section label ---- */
.sec{padding:var(--sub-section-pad-y) 0;}
.sec .sec-inner{max-width:var(--sub-content-max); margin:0 auto; padding:0;}
.sec-eyebrow{
  font-family:var(--font-en); font-size:13px; letter-spacing:.2em;
  color:var(--blue-400); text-transform:uppercase;
}
.sec-title{font-size:22px; font-weight:600; margin-bottom:30px;}
.sec-title .hl{color:var(--era-yellow);}
.sec.on-navy{background:var(--sub-bg-base);}
.sec.on-panel{background:#3c3d46;}
.sec.on-blue{background:#263A74;}
.sec.on-navy950{background:var(--sub-bg-alt);}

/* ---- product intro block (logo + badge + copy + chips) ---- */
.intro-head{display:flex; align-items:center; gap:16px;margin-top:80px;margin-bottom:70px;flex-wrap:wrap;position: relative;width: fit-content;}
.intro-mark{font-family:var(--font-en); font-weight:700; font-size:34px; line-height:1;}
.intro-mark img{display:block; height:60px; width:auto;}
.intro-mark small{display:block; font-family:var(--font-kr); font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--ink-50); margin-top:8px;}
.intro-badge{position: absolute;width: 140px;height: 160px;flex: none;right: -160px;bottom: -40px;}
.intro-badge img{width:100%; height:100%; object-fit:contain;}
.intro-tagline{font-size:22px; font-weight:700; margin-bottom:25px; line-height:1.5;}
.intro-tagline .hl{color:#fff700;}
.intro-desc{font-size:18px; color:var(--ink-50); line-height:1.8; margin-bottom:22px;}
.intro-desc a{color:var(--blue-400); text-decoration:none;}
.chip-row{display:flex; flex-wrap:wrap; gap:10px;}
.chip{
  display:inline-block; padding:9px 18px; font-size:14px; font-weight:600;
  background:var(--blue-600); color:var(--ink-0);
}
/* ---- user / persona cards (3-col, photo bg) ---- */
.user-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;margin-bottom: 50px;}
.user-card{
  position:relative; min-height:300px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; padding:24px;
  background:linear-gradient(160deg,#3a4a68,#1a2338);
  background-size:cover; background-position:center;
}
.user-card::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,10,23,.15),rgba(6,10,23,.72)); }
.user-card h4{position:relative; z-index:1; font-size:30px; font-weight:700; text-align:center; margin:20px 0;}
.user-card .tags{position:relative; z-index:1; display:flex; flex-direction:column; gap:15px;margin-bottom:30px;}
.user-card .tags span{
  display:block; text-align:center; background:var(--blue-600); 
  padding:9px 10px; font-size:18px; font-weight:600;
}

/* ---- step flow: card style w/ arrow connectors ---- */
.step-flow{display:flex; align-items:stretch; gap:0;}
.step-flow .step-card{
  flex:1; background:rgb(0,0,0,0.4); padding:40px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.step-flow .step-card .ico{width:80px; height:60px; display:flex; align-items:center; justify-content:center; margin-bottom:30px;}
.step-flow .step-card .step-tag{font-family:var(--font-en); font-size:11px; letter-spacing:.2em; color:var(--blue-400);}
.step-flow .step-card h5{font-size:22px; font-weight:700;line-height:1.2;margin-bottom:20px;}
.step-flow .step-card p{font-size:16px; color:var(--ink-50); line-height:1.6;}
.step-flow .step-arrow{
  flex:none; width:44px; display:flex; align-items:center; justify-content:center;
  color:var(--blue-400); font-size:20px;
}
@media (max-width:900px){
  .step-flow{flex-direction:column; gap:14px;}
  .step-flow .step-arrow{width:100%; height:24px; transform:rotate(90deg);}
  .intro-mark img{height:50px;}
}

/* ---- step line: numbered circle nodes on a connecting line ---- */
.step-line{display:flex; align-items:flex-start; gap:0; position:relative;}
.step-line .node{flex:1; text-align:center; position:relative; padding-top:74px;margin-top: 20px;}
.step-line .node .circle{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:60px; height:60px; border-radius:50%;
  background:var(--navy-800); border:3px solid var(--blue-500);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-en); font-weight:700; font-size:18px; color:var(--blue-400);
  z-index:2;
}
.step-line .node.is-current .circle{background:var(--blue-600); color:var(--ink-0); border-color:var(--blue-400);}
.step-line .node::before{
  content:""; position:absolute; top:26px; left:-50%; width:100%; height:2px; background:var(--line-10); z-index:1;
}
.step-line .node:first-child::before{display:none;}
.step-line .node h5{font-size:18px; font-weight:700; margin-bottom:8px;}
.step-line .node p{font-size:14px; color:var(--ink-50); line-height:1.6;}
.br{display:block;}
@media (max-width:600px){
  .step-line{flex-direction:column; gap:34px;}
  .step-line .node{padding-top:0; padding-left:70px; text-align:left;}
  .step-line .node .circle{top:0; left:0; transform:none;}
  .step-line .node::before{display:none;}
  .br{display:contents;}
  .intro-mark img{height:40px;}
}
@media (max-width:480px){
  .intro-mark img{height:35px;}
}

/* ---- feature grid (icon cards on blue/dark section) ---- */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.feature-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.feature-card{
  background:rgb(0,0,0,0.4); padding:50px 40px; text-align:center;
  border:1px solid rgba(255,255,255,.05);
}
.feature-card .ico{
  width:80px; height:60px; margin:0 auto 30px;
  display:flex; align-items:center; justify-content:center;
}
.feature-card h5{font-size:22px; font-weight:700; margin-bottom:10px;}
.feature-card p{font-size:16px; color:var(--ink-50); line-height:1.6;text-align:left;}
.feature-card ul{display:flex; flex-direction:column; line-height:1.6;}
.feature-card li{font-size:16px; color:var(--ink-50); position:relative;margin-right: 5px;}
.feature-card li::before{content:"·"; left:0; color:var(--ink-50);margin-right: 10px;}

/* ---- numbered feature (01 02 03 style) ---- */
.feature-numbered{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.feature-numbered .item{background:rgb(0,0,0,0.4); padding:30px 26px;}
.feature-numbered .num{font-family:var(--font-en); font-size:50px; font-weight:600; color:var(--ink-50);}
.feature-numbered h5{font-size:20px; font-weight:700; margin-bottom:15px;}
.feature-numbered p{font-size:16px; color:var(--ink-50); line-height:1.5;}
/* ---- feature-numbered.detailed: bordered card / top-right number / pill sub-list (i-Lake) ---- */
.feature-numbered2{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.feature-numbered2.detailed .item{background:#17181b; border:1px solid rgba(255,255,255,.08); padding:28px 24px;}
.feature-numbered2.detailed .item-head{display:flex; align-items:flex-start; justify-content:space-between;position: relative;}
.feature-numbered2.detailed .eyebrow{font-family:var(--font-en); font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--blue-400); text-transform:uppercase;}
.feature-numbered2.detailed .num{position: absolute;font-size:30px; font-weight:700; color:var(--ink-30);right: 0;top: 0;line-height: .8;}
.feature-numbered2.detailed h5{font-size:22px; margin-bottom:10px;}
.feature-numbered2.detailed > .item > p{color:var(--ink-50);padding-bottom:20px; margin-bottom:18px; border-bottom:1px solid rgba(255,255,255,.1);}
.feature-numbered2.detailed .spec-list{display:flex; flex-direction:column; gap:16px;}
.feature-numbered2.detailed .spec-list li{display:flex; flex-direction:column; gap:6px;}
.feature-numbered2.detailed .spec-list .tag{
  display:inline-block; width:fit-content; background:#000;
  padding:5px 14px; border-radius:20px; font-size:16px; font-weight:700; color:var(--ink-0);
}
.feature-numbered2.detailed .spec-list .desc{font-size:14px; color:var(--ink-50);}

/* ---- platform / composition columns (4-col with bullet list) ---- */
.col-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.col-grid .col{background:rgb(0, 0, 0, 0.4); padding:50px 30px;border:solid 1px #707070;}
.col-grid .col h5{font-size:22px; font-weight:700; text-align:center; padding-bottom:16px; margin-bottom:16px;}
.col-grid .col ul{display:flex; flex-direction:column; gap:9px;}
.col-grid .col li{font-size:16px; color:var(--ink-50); padding-left:12px; position:relative;letter-spacing:-.07em;}
.col-grid .col li::before{content:"·"; position:absolute; left:0; color:var(--ink-50);}

.col-grid2{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.col-grid2 .col2{padding:30px;border:solid 3px #91DDFF;line-height:1.2;}
.col-grid2 .col2 h5{font-size:22px; font-weight:700; margin-bottom:16px;}
.col-grid2 .col2 ul{display:flex;}
.col-grid2 .col2 li{font-size:16px; color:var(--ink-50); position:relative;}

/* ---- stats bar ---- */
.stats-row{display:grid;}
.stats-row.cols-3{grid-template-columns:repeat(3,1fr);}
.stats-row.cols-2{grid-template-columns:repeat(2,1fr);}
.stat-item{
  display:flex; align-items:center; gap:16px; justify-content:center;
  background:var(--ink-0); color:var(--navy-950); padding:26px 20px;
}
.stat-item2{
  display:grid; align-items:center; gap:5px; justify-content:center;
  background:var(--ink-0); color:var(--navy-950); padding:26px 20px;
}
.stat-item2 h5 {font-size:18px;text-align: center;}
.stat-item2 p {font-size:14px; color:#999; font-weight:500;text-align: center;line-height:1;}
.stat-item2 .ico{width:80px; height:80px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;margin: 0 auto;}
.stat-item .stat-ico{width:80px; height:80px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.stat-item .num{font-family:var(--font-en); font-size:40px; font-weight:700; color:var(--navy-950);line-height:1;text-align: center;}
.stat-item .num span.stat-num-s {font-size:18px !important;}
.stat-item .label{font-size:16px; color:#555; font-weight:600;text-align: center;}
.stat-item p{font-size:13px; color:#999; font-weight:500;text-align: center;line-height:1;}
.stats-row.dark .stat-item{background:#12141f; color:var(--ink-0); flex-direction:column; text-align:center;border-radius: 0;}
.stats-row.dark .stat-item .hl{color:var(--era-yellow);}
.stats-row.dark .stat-item:first-child{border-radius: 100px 0 0 100px;}
.stats-row.dark .stat-item:last-child{border-radius: 0 100px 100px 0;}
.stats-row.dark .stat-item .num{color:var(--ink-0); font-size:30px;}
.stats-row.dark .stat-item .label{color:var(--ink-50);}

/* ---- certification chips ---- */
.cert-row{display:flex; flex-wrap:wrap; gap:10px;margin-top: 10px;}
.cert-row a, .cert-row span{
  display:inline-block; padding:9px 16px; font-size:14px; font-weight:600;
  background:var(--blue-600); color:var(--ink-0);
}

/* ---- comparison table ---- */
.cmp-table{width:100%; border-collapse:collapse; font-size:16px;}
.cmp-table th, .cmp-table td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line-10);}
.cmp-table thead th{color:var(--ink-50); font-weight:600;background-color: var(--navy-800);}
.cmp-table td.hl-col, .cmp-table th.hl-col{font-size:18px; font-weight:600;}
.cmp-table th.hl-col{color:var(--blue-600);border-left:3px solid var(--blue-500);border-top:3px solid var(--blue-500);border-right:3px solid var(--blue-500);}
.cmp-table td.hl-col{color:var(--blue-400);border-left:3px solid var(--blue-500);border-right:3px solid var(--blue-500);}
.cmp-table tbody tr:last-child td.hl-col{border-bottom:3px solid var(--blue-500);}
.cmp-table tbody tr td:first-child{color:var(--ink-70); font-weight:600;}
.cmp-table-wrap{overflow-x:auto;}

/* ---- security / checklist panel ---- */
.check-panel{background:#7094FF;padding:30px 34px;}
.check-panel .sec-eyebrow{margin-bottom:4px;color:var(--navy-900)!important;}
.check-list{display:grid; grid-template-columns:1fr 1fr; gap:12px 30px; margin-top:18px;}
.check-list li{position: relative;font-size:16px; color:var(--navy-900); display:flex; gap:10px; align-items:flex-start;padding-left: 20px;}
.check-list li::before{content: "";position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 15px;height: 15px;background-image:url("../images/sub/list-icon.svg"); background-size: contain; background-position: center; background-repeat: no-repeat;}

/* ---- roadmap chip flow (4-step process bar w/ labels below) ---- */
.chip-flow{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.chip-flow .chip-step{
  flex:1; min-width:150px; text-align:center; padding:16px 12px; border-radius:30px;
  background:#D6D6D6; font-weight:700; font-size:18px; color:var(--navy-950);
}
.chip-flow .chip-step.is-active{background:#91DDFF;}
.chip-flow .arrow{flex:none;margin-bottom: 35px;}
.chip-flow .chip-flow-desc{display:grid; margin-top:10px;}
.chip-flow .chip-flow-desc p{font-size:13px; color:var(--ink-50); text-align:center; line-height:1.5;}

@media (max-width:600px){
  .chip-flow{display:grid;}
  .chip-flow .arrow{transform:rotate(90deg);width: 30px;height: 30px;margin: 0 auto;}
}

/* ---- generic 2/3/4 col simple grids ---- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.panel-box{background:#12141f; padding:28px 26px;}
.panel-box h5{font-size:15px; font-weight:700; margin-bottom:10px;}
.panel-box h5.title{font-size:20px !important;text-align:center;margin-bottom:30px; padding-bottom:20px;border-bottom: 1px solid rgba(255, 255, 255, .1);}
.panel-box p{font-size:12.5px; color:var(--ink-50); line-height:1.7;}

/* ---- DQI hexagon indicators ---- */
.dqi-row{display:flex; align-items:flex-start; gap:0; flex-wrap:wrap;}
.dqi-item{display:flex; flex-direction:column; align-items:center; width:165px; flex:none;}
.dqi-sep{width:32px; flex:none; display:flex; align-items:center; justify-content:center; padding-top:60px;}
.dqi-sep::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ink-0);}
.dqi-hex{
  width:165px; height:145px;
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700; color:var(--ink-0);
  margin-bottom:22px;
}
.dqi-item:nth-child(1) .dqi-hex{background:rgb(0,0,0,.3);}
.dqi-item:nth-child(3) .dqi-hex{background:rgb(0,0,0,.4);}
.dqi-item:nth-child(5) .dqi-hex{background:rgb(0,0,0,.5);}
.dqi-item:nth-child(7) .dqi-hex{background:rgb(0,0,0,.6);}
.dqi-item:nth-child(9) .dqi-hex{background:rgb(0,0,0,.7);}
.dqi-item:nth-child(11) .dqi-hex{background:rgb(0,0,0,.8);}
.dqi-list{list-style:none; width:auto;line-height: 1;}
.dqi-list li{display:flex; align-items:center; gap:8px; font-size:15px; color:var(--ink-0); margin-bottom:12px;}
.dqi-list li svg{flex:none;}
@media (max-width:900px){
  .dqi-row{justify-content:center;}
  .dqi-sep{display:none;}
  .dqi-item{width:45%;}
}
@media (max-width:600px){
  .dqi-item{width:100%;}
}


/* =========================================================
   Section landing pages (구축사례 / 고객지원 / 회사소개)
   ========================================================= */
.landing-tabs{
  position:sticky; top:var(--header-h); z-index:90;
  display:flex; justify-content:center;
  background:var(--sub-bg-alt);
  overflow-x:auto;
}
.landing-tabs ul{display:flex; justify-content:center; width:auto; margin:0 auto;}
.landing-tabs li{flex:none;}
.landing-tabs a{
  display:block; white-space:nowrap; text-align:center; padding:20px 30px;
  font-size:15px; font-weight:500; color:var(--ink-70); transition:all .25s ease;
}
.landing-tabs a:hover{color:var(--ink-0); background:rgba(255,255,255,.04);}
.landing-tabs a.is-active{color:var(--ink-0); background:var(--blue-600);}
.landing-content{max-width:var(--sub-content-max); margin:0 auto; padding:64px 32px 140px;}

/* remote support (원격지원) */
.remote-support-card{
  background:#12141f; border:1px solid var(--line-10); border-radius:8px;
  padding:60px 40px; margin-top:24px;
  display:flex; align-items:center; justify-content:center;
}
.remote-support-card img{max-width:100%; height:auto; width:590px;}
.remote-support-btn{
  display:block; width:fit-content; margin:34px auto 0;
  background:var(--blue-600); color:var(--ink-0); font-size:15px; font-weight:700;
  padding:15px 34px; border-radius:4px; text-align:center;
  transition:background .2s ease;
}
.remote-support-btn:hover{background:var(--blue-500);}
h2{font-size:var(--sub-h2-size); font-weight:700;}
.lead{font-size:14px; color:var(--ink-50); margin-bottom:34px;}
.text{font-size:14px; color:var(--ink-50); margin-bottom:10px;}
.lead a{color:var(--blue-400); text-decoration:underline; text-underline-offset:3px;}
.total-count{font-size:13px; color:var(--ink-50); margin-bottom:16px;display: flex;justify-content: space-between;align-items: baseline;}
.total-count2{font-size:13px; color:var(--ink-50); margin-bottom:16px;display: flex;justify-content: end;align-items: baseline;}
.total-count strong,.total-count2 strong{color:var(--blue-400); font-size:15px;}

/* logo grid (구축사례) */
.logo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.logo-card{
  background:var(--ink-0); border-radius:6px; min-height:76px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-weight:700; color:#1a2030; font-size:14px;
}
.logo-card img{max-width:100%; max-height:80px; width:auto; height:auto; object-fit:contain;}

/* contact form (문의하기) */
.contact-form{width:100%;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
.form-field label{display:block; font-size:14px; font-weight:600; margin-bottom:8px;}
.form-field label .req{color:#ff6b6b; margin-left:2px;}
.form-field input, .form-field textarea{
  width:100%; background:#12141f; border:1px solid var(--line-10); border-radius:4px;
  padding:13px 14px; color:var(--ink-0); font-family:inherit; font-size:16px;
}
.form-field textarea{min-height:120px; resize:vertical;}
.form-check-box{display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;border-bottom:1px solid var(--line-10); padding-bottom:10px; margin-bottom:15px;}
.form-check{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-50); margin-bottom:8px;}
.form-check a{color:var(--blue-400);}

.captcha-group{margin:20px 0;}
.captcha-row{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.captcha-row input{width:auto; flex:1;}
.captcha-img{height:44px; border-radius:4px; border:1px solid var(--line-10); background:#fff;}
.captcha-reload-btn{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:40px; height:40px; border-radius:4px; border:1px solid var(--line-10);
  background:#12141f; color:var(--ink-50); transition:color .2s ease, border-color .2s ease;
}
.captcha-reload-btn:hover{color:var(--ink-0); border-color:var(--blue-400);}
.captcha-check-btn{
  flex-shrink:0; padding:13px 18px; border-radius:4px;
  background:var(--blue-600); color:var(--ink-0); font-weight:600; font-size:14px;
  transition:background .2s ease;
}
.captcha-check-btn:hover{background:var(--blue-500);}
.captcha-status{font-size:13px; min-height:16px;}
.captcha-status.ok{color:#4caf82;}
.captcha-status.error{color:#ff6b6b;}


/* notice table (공지사항) */
.notice-search{display:flex; justify-content:flex-end; margin-bottom:8px;}
.notice-search input{
  background:#12141f; border:1px solid var(--line-10); border-radius:4px 0 0 4px;
  padding:11px 14px; color:var(--ink-0); font-size:14px; width:220px;
}
.notice-search button{
  background:#12141f; border:1px solid var(--line-10); border-left:none; border-radius:0 4px 4px 0;
  padding:0 10px; color:var(--ink-50); display:flex; align-items:center; justify-content:center;
}
.notice-search button img{width:20px; height:20px; opacity:.85;}
.notice-table{width:100%; border-collapse:collapse; margin-top:12px;}
.notice-table th{text-align:left; font-size:15px; color:var(--ink-50); font-weight:600; padding:14px 10px; border-bottom:1px solid var(--line-10);}
.notice-table td{padding:15px 10px; font-size:16px; border-bottom:1px solid var(--line-10); color:var(--ink-70);}
.notice-table td.num{color:var(--ink-30); width:60px;}
.notice-table td.date{color:var(--ink-30); width:110px; text-align:right;}
.notice-table tr{cursor:pointer; transition:background .15s ease;}
.notice-table tr:hover{background:rgba(255,255,255,.03);}
.notice-table tr:hover td{color:var(--ink-0);}

/* pagination */
.pagination{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:40px;}
.pagination a, .pagination span{
  display:flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 6px; border-radius:4px;
  font-size:14px; color:var(--ink-50);
}
.pagination a:hover{color:var(--ink-0); background:rgba(255,255,255,.06);}
.pagination .is-active{background:var(--blue-600); color:var(--ink-0); font-weight:700;}
.pagination .arrow{color:var(--ink-30); font-size:18px;}
.pagination .arrow:hover{color:var(--ink-0);}

/* notice detail page */
.notice-detail-head{border-bottom:1px solid var(--line-10); padding-bottom:18px; margin-bottom:26px;}
.notice-detail-head h2{font-size:22px; font-weight:700; margin-bottom:14px;}
.notice-detail-meta{
  display:flex; justify-content:space-between; font-size:14px; color:var(--ink-30);
  border-top:1px solid var(--line-10); padding-top:12px;
}
.notice-detail-body{padding:10px 0 40px; font-size:16px; color:var(--ink-70); line-height:1.9;}
.notice-detail-body img{max-width:100%; border-radius:6px; display:block; margin:24px auto;}
.notice-detail-nav{border-top:1px solid var(--line-10);}
.notice-detail-nav .row{
  display:flex; align-items:center; gap:18px; padding:16px 4px;
  border-bottom:1px solid var(--line-10); font-size:15px;
}
.notice-detail-nav .row .lbl{color:var(--ink-30); width:60px; flex:none;}
.notice-detail-nav .row a{color:var(--ink-70);}
.notice-detail-nav .row a:hover{color:var(--blue-400);}
.notice-list-btn{
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin:34px auto 0; padding:13px 28px; background:var(--blue-600); border-radius:4px;
  font-size:15px; font-weight:600; color:var(--ink-0); width:fit-content;
}
.notice-list-btn:hover{background:var(--blue-500);}

/* promo graphic used inside a notice body */
/* map section (오시는 길) */
.map-box{border-radius:6px; overflow:hidden; border:1px solid var(--line-10); position:relative; line-height:0;}
.map-box img{width:100%; height:auto; display:block;}
.addr-list{margin-top:24px; display:flex; flex-direction:column; gap:12px;}
.addr-list li{display:flex; gap:10px; font-size:16px; color:var(--ink-70); align-items:center;}
.addr-list strong{color:var(--ink-0);}
.addr-list .addr-ico{width:16px; height:16px; flex:none;}

/* history timeline (회사 연혁) */
/* ---- era-track: progress bar with green->blue gradient fill ---- */
.era-track-wrap{
  position:sticky; top:var(--header-h); z-index:80;
  background:var(--sub-bg-alt); border-radius:10px; padding:20px 30px;
  margin-bottom:20px;
  overflow:hidden;
}
.era-track{display:flex; justify-content:space-between; position:relative;}
.era-track .track-line{
  position:absolute; top:0; height:3px; background:var(--era-gray-line); width:0;
}
.era-track .progress-fill{
  position:absolute; top:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--era-green),var(--era-blue));
  transition:width 1.1s cubic-bezier(.16,.84,.44,1), left 1.1s cubic-bezier(.16,.84,.44,1);
}
.era-track .era{
  position:relative; text-align:center; font-family:var(--font-en); font-weight:700;
  font-size:25px; color:var(--ink-50); flex:1; background:none; border:none; cursor:pointer;
  padding-top:0;
}
.era-track .era .label{display:block; margin-bottom:12px;}
.era-track .era .dot{
  display:block; width:14px; height:14px; border-radius:50%;
  background:#8b8b8b; margin:0 auto; position:relative; z-index:1;
  transition:background .3s ease, box-shadow .3s ease, width .3s ease, height .3s ease;
}
.era-track .era.is-past{color:var(--ink-70);}
.era-track .era.is-past .dot{background:#fff;}
.era-track .era.is-active{color:var(--blue-400); font-size:25px;}
.era-track .era.is-active .dot{
  width:18px; height:18px; background:#fff; box-shadow:0 0 0 4px #3967ec;
}

/* ---- vertical timeline: connecting line + circle markers per year ---- */
.history-timeline{position:relative;}
.history-timeline .timeline-base{
  position:absolute; left:var(--timeline-line-x); width:2px; height:0; top:0;
  background:var(--line-10);
}
.history-block{
  position:relative;
  background:linear-gradient(180deg, rgba(0,0,0,.6) 0, rgba(0,0,0,0) 200px);
  border-radius:var(--sub-card-radius); padding:28px 32px 28px 96px;
  margin-bottom:var(--sub-gap-md);
  opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}
.history-block.is-visible{opacity:1; transform:translateY(0);}
.history-block .node-dot{
  position:absolute; left:50px; top:32px; width:19px; height:19px; border-radius:50%;
  background:var(--navy-900); border:2px solid var(--blue-500);
  display:flex; align-items:center; justify-content:center; z-index:1;
}
.history-block .node-dot::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--blue-400);}
.history-block h3{
  font-family:var(--font-en); font-size:24px; font-weight:700; color:var(--ink-0); margin-bottom:16px;
  transition:color .3s ease;
}
.history-block.is-current h3{color:var(--blue-400);}
.history-block .grp{position:relative; margin-bottom:16px; font-size:16px; color:var(--ink-50); line-height:2;}
.history-block .grp:last-child{margin-bottom:0;}
.history-block .grp .grp-dot{
  position:absolute; left:-40px; top:9px;
  width:8px; height:8px; border-radius:50%; background:#fff; z-index:1;
}

/* company overview: core values + mission grid */
.mv-section-head{margin-bottom:20px;}
.mv-section-head strong{font-family:var(--font-en); font-size:20px; font-weight:700; display:block;}
.mv-section-head span{font-size:16px; color:var(--ink-50); display:block;}
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:60px;}
.mv-grid{display:grid; grid-template-columns:270px 1fr 1fr; gap:20px; margin-bottom:60px; align-items:flex-start;}
.mv-grid .mv-label{display:flex; flex-direction:column; justify-content:center;}
.mv-grid .mv-label strong{font-family:var(--font-en); font-size:20px; font-weight:700;}
.mv-grid .mv-label span{font-size:16px; color:var(--ink-50);}
.mv-photo{
  position:relative; overflow:hidden; min-height:250px;
  display:flex; align-items:flex-end; padding:16px; font-size:16px; font-weight:600;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:#161c2c;
}
.mv-photo::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,10,23,.1),rgba(6,10,23,.8));}
.mv-photo span{position:relative; z-index:1;}
.values-grid .mv-photo{min-height:190px; align-items:center; justify-content:center; text-align:center; padding:20px;}
.values-grid .mv-photo span{font-size:30px; font-weight:700; color:var(--blue-400); text-shadow:0 2px 10px rgba(0,0,0,.6);}
.info-table{width:100%; border-collapse:collapse;}
.info-table th, .info-table td{padding:15px 0; border-bottom:1px solid var(--line-10); text-align:left; font-size:16px;}
.info-table th{width:140px; color:var(--ink-50); font-weight:600;}
.info-table td{color:var(--ink-70);}
.overview-grid{display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:end;}
.overview-photo{border-radius:6px; float: left;margin:10px 30px 10px 0;}
.overview-photo2{
  border-radius:6px; overflow:hidden; min-height:550px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:#12141f;
}

/* award / cert grid (real certificate thumbnails) */
.cert-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px 20px; margin-top:30px;}
.cert-card{display:flex; flex-direction:column; cursor:pointer;}
.cert-thumb{
  background:var(--ink-0); border-radius:6px; overflow:hidden;
  aspect-ratio:3/4.2; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.cert-card:hover .cert-thumb{transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.5);}
.cert-thumb img{width:100%; height:100%; object-fit:cover; object-position:top;}
.cert-title{
  font-size:16px; font-weight:600; color:var(--ink-0); margin-top:12px; line-height:1.5;
  transition:color .2s ease;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis;
  min-height:calc(13px * 1.5 * 2);
}
.cert-card:hover .cert-title{color:var(--blue-400);}
.cert-date{font-size:14px; color:var(--ink-30); margin-top:4px;}

/* ---- certificate lightbox ---- */
.cert-lightbox{
  position:fixed; inset:0; z-index:400;
  background:rgba(4,6,14,.88);
  display:flex; align-items:center; justify-content:center;
  padding:60px 24px;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s;
}
.cert-lightbox.is-open{opacity:1; visibility:visible;}
.cert-lightbox-inner{
  position:relative; max-width:600px; width:100%; max-height:100%;
  display:flex; flex-direction:column; align-items:center;
  transform:scale(.94); transition:transform .25s ease;
}
.cert-lightbox.is-open .cert-lightbox-inner{transform:scale(1);}
.cert-lightbox-inner img{
  width:100%; max-height:75vh; object-fit:contain; border-radius:6px;
  background:var(--ink-0); box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.cert-lightbox-caption{margin-top:18px; text-align:center;}
.cert-lightbox-caption .t{font-size:16px; font-weight:700; color:var(--ink-0);}
.cert-lightbox-caption .d{font-size:14px; color:var(--ink-50); margin-top:4px;}
.cert-lightbox-close{
  position:absolute; top:-46px; right:0; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.1); color:var(--ink-0); font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.cert-lightbox-close:hover{background:rgba(255,255,255,.2);}

/* ---- bar heading: accent bar + small label + bold title (재사용 컴포넌트) ---- */
.bar-heading{display:flex; align-items:stretch; gap:14px; margin-bottom:20px;}
.bar-heading .bar-heading-bar{width:4px; flex:none; background:linear-gradient(to bottom, #3967ec 0%, #3967ec 40%, #20255d 40%, #20255d 100%);}
.bar-heading .bar-heading-eyebrow{
  font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.08em;
  color:var(--ink-70); text-transform:uppercase;
}
.bar-heading .bar-heading-title{font-size:19px; font-weight:700; color:var(--era-blue2); line-height:1.4;}

/* ---- process-flow: boxed step cards w/ arrows (i-Converter PROCESS) ---- */
.process-flow{display:flex; align-items:center; gap:12px; margin-bottom:50px; flex-wrap:wrap;}
.process-flow .process-arrow{width:14px; height:24px; flex:none;}
.process-flow .process-step{
  flex:1; min-width:140px; background:#0f162d;
  padding:34px 16px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px;
}
.process-flow .process-step .circle{
  width:36px; height:36px; border-radius:50%; background:#fff; color:#0f162d;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; flex:none;
}
.process-flow .process-step .circle2{
  width:36px; height:36px; border-radius:50%; background:#0f162d; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; flex:none;
}
.process-flow .process-step h5{font-size:16px; font-weight:600; color:var(--ink-0); line-height:1.4;}
.process-flow .process-step h5.txt{color:#0f162d;}
.process-flow .process-step.is-current{background:#7094ff;}
.process-flow .process-step.is-final{background:#91ddff;}
@media (max-width:900px){
  .process-flow{flex-direction:column;}
  .process-flow .process-arrow{transform:rotate(90deg);}
  .process-flow .process-step{width:100%;}
.era-track .era,.era-track .era.is-active{font-size:20px;}
.form-check-box{grid-template-columns:1fr 1fr 1fr;}
}

/* ---- converter engine box (white card w/ pill rows) ---- */
.converter-engine{background:#fff; padding:34px 32px;}
.converter-engine h4{text-align:center; color:var(--blue-600); font-weight:700; font-size:19px; margin-bottom:20px;}
.converter-engine .row{display:flex; align-items:center; gap:16px; margin-bottom:10px;}
.converter-engine .row:last-child{margin-bottom:0;}
.converter-engine .pill{flex:none; width:170px; text-align:center; background:#d6d6d6; color:#1a2030; font-weight:700; font-size:16px; padding:5px 12px; border-radius:20px;}
.converter-engine .row.is-active .pill{background:var(--blue-500); color:#fff;}
.converter-engine .desc{font-size:16px; color:#4a4f5c;}
@media (max-width:600px){
  .converter-engine .row{display:grid;flex-direction:column; align-items:flex-start; gap:6px;}
  .converter-engine .pill{width:auto;}
.era-track .era,.era-track .era.is-active{font-size:16px;}
}


/* ---- functional-box: white card w/ pill group labels + checklist (기능적 특징 / 변환 결과 화면) ---- */
.functional-box{background:#fff; padding:36px 32px;}
.functional-box .group-label{
  display:inline-block; padding:5px 20px; border-radius:20px;
  background:#20255d; color:#fff; font-weight:700; font-size:16px; margin-bottom:14px;
}
.functional-box .group-label.blue2{background:var(--era-blue2);}
.functional-box ul{list-style:none; margin-bottom:46px;}
.functional-box ul:last-child{margin-bottom:0;}
.functional-box li{display:flex; align-items:center; gap:10px; font-size:16px; color:#0f1651; font-weight:600; margin-bottom:11px;}
.functional-box li:last-child{margin-bottom:0;}
.functional-box li svg{flex:none;}
.functional-box img{width:100%; height:auto; display:block; }

/* ---- responsive: sub component library ---- */
@media (max-width:900px){
  .sec .sec-inner{padding:0 30px;}
  .user-cards, .feature-grid, .feature-grid.cols-4, .feature-numbered, .grid-3{grid-template-columns:1fr 1fr;}
  .col-grid, .logo-grid, .cert-grid{grid-template-columns:1fr 1fr;}
  .stats-row.cols-3{grid-template-columns:1fr;}
  .mv-grid{grid-template-columns:1fr; text-align:left;}
  .values-grid{grid-template-columns:1fr;}
  .overview-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .check-list{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .landing-tabs{display:none;}
.stats-row.dark .stat-item,.stats-row.dark .stat-item:first-child,.stats-row.dark .stat-item:last-child{border-radius: 100px;margin-bottom:10px;}
.feature-numbered2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
}
@media (max-width:600px){
  .sec .sec-inner{padding:0 20px;}
  .sec{padding:50px 0;}
  .user-cards, .feature-grid, .feature-grid.cols-4, .feature-numbered, .grid-3, .col-grid, .logo-grid, .cert-grid{grid-template-columns:1fr;}
  .intro-tagline{font-size:16.5px;}
  .step-line{gap:26px;}

  .era-track-wrap{padding:20px 16px 18px;}
  .era-track .era{font-size:11px;}
  .era-track .era.is-active{font-size:12.5px;}
  .era-track .era .label{white-space:nowrap;}
  .history-timeline{}
  .history-timeline .timeline-base{left:36px;}
  .history-block{padding:22px 18px 22px 64px;}
  .history-block .node-dot{left:26px;}
  .history-block .grp .grp-dot{left:-32px;}
	
.stats-row.dark .stat-item,.stats-row.dark .stat-item:first-child,.stats-row.dark .stat-item:last-child{border-radius: 100px;margin-bottom:10px;}
.col-grid2{grid-template-columns:repeat(1,1fr)}
.stats-row.cols-3{grid-template-columns:repeat(1,1fr);}
.stats-row.cols-2{grid-template-columns:repeat(1,1fr);}
.feature-numbered2{display:grid; grid-template-columns:repeat(1,1fr); gap:16px;}
}