/* =========================================================
   특허 및 수상 (about-patents) — main.css + about.css 위에 얹는 페이지 전용 스타일
   ========================================================= */

/* 히어로 칩 */
.hchips{ margin-top:32px; display:flex; flex-wrap:wrap; gap:8px }
.hchips li{ padding:8px 16px; border-radius:999px; font-size:16px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }

/* 공통: 섹션 머리 2단 */
.sec-row{ align-items:end; row-gap:20px }
.sec-row .sec-head{ grid-column:1 / 8 }
.sec-row__lead{ grid-column:9 / 13 }
@media (max-width:1024px){ .sec-row .sec-head,.sec-row__lead{ grid-column:1 / -1 } }

/* ---------- KPI 4칸 ---------- */
.kpi--4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.kpi--4 .kpi__item dd{ font-size:64px }
@media (max-width:1024px){ .kpi--4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:767px){ .kpi--4{ grid-template-columns:1fr } .kpi--4 .kpi__item dd{ font-size:40px } }

/* ---------- 수상 ---------- */
.awards{ background:var(--bg-light); padding-top:120px }
.awards .sec-row{ margin-top:var(--sec) }
.aw{ margin-top:64px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap) }
.aw__card{ display:flex; flex-direction:column; border-radius:var(--r-lg); background:#fff; box-shadow:0 0 0 1px rgba(18,16,34,.05); overflow:hidden;
  transition:box-shadow .35s var(--ease) }
.aw__card:hover{ box-shadow:0 30px 60px -32px rgba(47,31,196,.35), 0 0 0 1px rgba(67,48,230,.25) }
.aw__emb{ aspect-ratio:4 / 3; display:grid; place-items:center; background:radial-gradient(70% 70% at 50% 55%, #fff, #F2F0FB) }
.aw__emb img{ width:62%; mix-blend-mode:multiply }
.aw__body{ padding:24px 28px 30px; display:flex; flex-direction:column; gap:8px }
.aw__meta{ font-size:16px; font-weight:600; color:var(--deep) }
.aw__body h3{ font-size:22px; font-weight:700; line-height:1.4; letter-spacing:-.035em; color:var(--text-strong) }
.aw__body p{ font-size:16px; line-height:1.65; color:var(--text-sub) }
.aw__card--hero{ background:linear-gradient(160deg,var(--point),var(--point-deep) 60%,#1B1460) }
.aw__card--hero .aw__emb{ background:radial-gradient(70% 70% at 50% 55%, rgba(255,255,255,.95), rgba(255,255,255,.75)); margin:12px 12px 0; border-radius:calc(var(--r-lg) - 6px) }
.aw__card--hero .aw__meta{ color:rgba(255,255,255,.75) }
.aw__card--hero h3{ color:#fff } .aw__card--hero p{ color:rgba(255,255,255,.78) }
@media (max-width:1024px){ .aw{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:767px){ .awards{ padding-top:64px } .aw{ margin-top:36px; grid-template-columns:1fr; gap:12px } .aw__emb{ aspect-ratio:16 / 9 } .aw__emb img{ width:40% } .aw__body h3{ font-size:20px } }

/* ---------- 인증 · 지정 ---------- */
.certs{ background:#fff }
.certs__head{ grid-column:1 / 5; align-self:start; position:sticky; top:calc(var(--header) + 96px) }
.cl{ grid-column:6 / 13; border-top:1px solid var(--text-strong) }
.cl__row{ display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:24px; padding:20px 0; border-bottom:1px solid var(--line-strong) }
.cl__emb{ width:96px; height:72px; border-radius:12px; background:var(--bg-light); display:grid; place-items:center; overflow:hidden }
.cl__emb img{ width:82%; mix-blend-mode:multiply }
.cl__row h3{ font-size:20px; font-weight:700; letter-spacing:-.03em; line-height:1.4; color:var(--text-strong) }
.cl__row p{ margin-top:4px; font-size:16px; color:var(--text-sub) }
.cl__year{ font-size:17px; font-weight:600; color:var(--deep); font-variant-numeric:tabular-nums; white-space:nowrap }
@media (max-width:1024px){ .certs__head,.cl{ grid-column:1 / -1; position:static } .cl{ margin-top:48px } }
@media (max-width:767px){
  .cl__row{ grid-template-columns:64px 1fr; gap:4px 16px; padding:18px 0 }
  .cl__emb{ width:64px; height:52px; grid-row:1 / 3 }
  .cl__year{ grid-column:2; font-size:16px }
  .cl__row h3{ font-size:17px }
}

/* ---------- GS 인증 (다크) ---------- */
.gsx{ background:var(--bg-dark); color:rgba(255,255,255,.72) }
.gsx .sec-title{ color:#fff } .gsx .sec-title em{ color:var(--point-on-dark) } .gsx .sec-lead{ color:rgba(255,255,255,.62) }
.gsx__side{ grid-column:8 / 13; display:flex; align-items:center; gap:24px }
.gsx__emb{ flex:none; width:112px; height:84px; border-radius:16px; background:#fff; display:grid; place-items:center }
.gsx__emb img{ width:84%; mix-blend-mode:multiply }
.gsg{ margin-top:64px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:32px var(--gap) }
.gs{ width:100%; text-align:left; display:flex; flex-direction:column; gap:10px; color:#fff }
.gs__frame{ position:relative; aspect-ratio:420 / 594; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 20px 40px -20px rgba(0,0,0,.7) }
.gs__frame img{ width:100%; height:100%; object-fit:cover; transition:scale .6s var(--ease) }
.gs__frame::after{ content:""; position:absolute; inset:0; background:rgba(67,48,230,0); transition:background-color .35s var(--ease) }
.gs:hover .gs__frame img{ scale:1.04 }
.gs:hover .gs__frame::after{ background:rgba(67,48,230,.12) }
.gs__name{ font-size:16px; font-weight:600; line-height:1.45 }
.gs__no{ font-size:16px; color:rgba(255,255,255,.5); font-variant-numeric:tabular-nums }
@media (max-width:1024px){ .gsx__side{ grid-column:1 / -1 } .gsg{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media (max-width:767px){ .gsx__side{ flex-direction:column; align-items:flex-start; gap:16px } .gsg{ margin-top:36px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px } }

/* 라이트박스 */
.lb{ border:0; padding:0; background:transparent; max-width:none; max-height:none; width:100vw; height:100dvh; margin:0; color:#fff }
.lb::backdrop{ background:rgba(9,8,26,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.lb__in{ position:relative; width:100%; height:100%; display:grid; place-items:center; padding:72px 96px 40px }
.lb__fig{ display:flex; flex-direction:column; align-items:center; gap:16px; max-height:100% }
.lb__fig img{ max-height:calc(100dvh - 180px); width:auto; max-width:100%; border-radius:8px; background:#fff; box-shadow:0 40px 80px -30px rgba(0,0,0,.8) }
.lb__fig figcaption{ font-size:17px; font-weight:600 }
.lb__btn{ position:absolute; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); transition:background-color .25s var(--ease) }
.lb__btn:hover{ background:rgba(255,255,255,.22) }
.lb__btn::before{ content:""; position:absolute; inset:0; margin:auto; width:22px; height:22px; background:#fff;
  -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat }
.lb__close{ top:20px; right:20px; --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") }
.lb__prev{ left:24px; top:50%; translate:0 -50%; --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") }
.lb__next{ right:24px; top:50%; translate:0 -50%; --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") }
@media (max-width:767px){
  .lb__in{ padding:72px 16px 96px }
  .lb__btn{ width:48px; height:48px }
  .lb__prev,.lb__next{ top:auto; bottom:24px; translate:none } .lb__prev{ left:calc(50% - 60px) } .lb__next{ right:calc(50% - 60px) }
}

/* ---------- 주요 특허 ---------- */
.pats{ background:var(--bg-light) }
.pctl{ margin-top:56px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px }
.pfil{ display:flex; flex-wrap:wrap; gap:8px }
.pfil button{ min-height:46px; padding:0 18px; border-radius:999px; font-size:16px; font-weight:600; color:var(--text-body); background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--line-strong); transition:background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease) }
.pfil button span{ margin-left:4px; color:var(--text-sub); font-variant-numeric:tabular-nums }
.pfil button:hover{ box-shadow:inset 0 0 0 1.5px var(--point); color:var(--point) }
.pfil button[aria-selected="true"]{ background:var(--text-strong); color:#fff; box-shadow:none }
.pfil button[aria-selected="true"] span{ color:rgba(255,255,255,.6) }
.psch{ position:relative; flex:0 1 320px }
.psch input{ width:100%; height:50px; padding:0 20px 0 48px; border:0; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--line-strong);
  font:inherit; font-size:16px; color:var(--text-strong); outline:none; transition:box-shadow .3s var(--ease) }
.psch input:focus{ box-shadow:inset 0 0 0 2px var(--point) }
.psch::before{ content:""; position:absolute; left:18px; top:50%; translate:0 -50%; width:18px; height:18px; background:var(--text-sub);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat }
.pcount{ margin-top:28px; font-size:16px; color:var(--text-sub) }
.pcount b{ color:var(--text-strong); font-weight:700 }
.ptable{ margin-top:12px; border-radius:var(--r-lg); background:#fff; box-shadow:0 0 0 1px rgba(18,16,34,.05); overflow:hidden }
.pt{ display:grid; grid-template-columns:220px 1fr 160px; align-items:center; gap:24px; padding:20px 32px; border-bottom:1px solid var(--line) }
.pt--head{ padding-top:16px; padding-bottom:16px; background:#fff; box-shadow:inset 0 -1px 0 var(--line-strong); font-size:16px; font-weight:600; color:var(--text-sub) }
.plist .pt:last-child{ border-bottom:0 }
.pt[hidden]{ display:none }
.pt__no{ font-size:16px; color:var(--text-sub); font-variant-numeric:tabular-nums }
.pt__title{ font-size:17px; font-weight:500; line-height:1.55; color:var(--text-strong) }
.pt__tag{ justify-self:start; padding:5px 12px; border-radius:999px; font-size:16px; font-weight:600; white-space:nowrap }
.pt__tag--dialog{ background:#ECEAFD; color:#2A1BA8 }
.pt__tag--search{ background:#E3F4FD; color:#0B5C86 }
.pt__tag--semantic{ background:#EEE9FB; color:#5B2DA8 }
.pt__tag--data{ background:#E7F5EE; color:#1D6B49 }
.pt__tag--multimodal{ background:#FCEDE6; color:#9A3A12 }
mark{ background:rgba(67,48,230,.16); color:inherit; border-radius:3px; padding:0 1px }
.pempty{ padding:56px 24px; text-align:center; font-size:17px; color:var(--text-sub) }
.pmore{ margin-top:32px; display:flex; justify-content:center }
.pmore[hidden]{ display:none }
.ico-plus{ display:inline-block; width:18px; height:18px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat }
@media (max-width:1024px){ .pt{ grid-template-columns:180px 1fr 140px; padding:18px 24px } .psch{ flex:1 1 100% } }
@media (max-width:767px){
  .pctl{ margin-top:36px }
  .pfil{ flex-wrap:nowrap; overflow-x:auto; margin:0 calc(var(--pad) * -1); padding:0 var(--pad); scrollbar-width:none; width:calc(100% + var(--pad) * 2) }
  .pfil::-webkit-scrollbar{ display:none }
  .pfil button{ flex:none }
  .pt--head{ display:none }
  .pt{ grid-template-columns:1fr auto; gap:6px 12px; padding:18px 20px }
  .pt__title{ grid-column:1 / -1; grid-row:2; font-size:16px }
  .pt__tag{ grid-column:2; grid-row:1; justify-self:end }
}

.page-patents .cta{ background:var(--bg-light); padding-top:0 }
