/* =========================================================
   제품 페이지 공통 (AX 플랫폼 · AICC · 추천·검색 · 클라우드 AI)
   main.css + about.css 위에 얹습니다.
   제품군(라인업)마다 히어로 배경 색·라인 모양이 달라집니다 → data-line="ax|aicc|search|cloud"
   라인 모양(WebThreads 옵션)은 main.js의 LINES 프리셋에 있습니다.
   ========================================================= */

/* ---------- 제품군 테마 ---------- */
.hero--prod{ --l1:#6D5BFF; --l2:#2EE6D6; --lbg1:#0F1A3F; --lbg2:#070B1D }
.hero--prod[data-line="ax"]{ --l1:#6D5BFF; --l2:#2EE6D6; --lbg1:#0D1B3D; --lbg2:#060A1A }
.hero--prod[data-line="aicc"]{ --l1:#8B5CF6; --l2:#FF7AC6; --lbg1:#1E0F3A; --lbg2:#0C0619 }
.hero--prod[data-line="search"]{ --l1:#4330E6; --l2:#3FC8FF; --lbg1:#0B1640; --lbg2:#050A1E }
.hero--prod[data-line="cloud"]{ --l1:#8B7BFF; --l2:#FFB86B; --lbg1:#1C1438; --lbg2:#0B0818 }
.hero--prod{ background:radial-gradient(80% 90% at 78% 40%, var(--lbg1) 0%, var(--lbg2) 70%) }
.hero--prod .hero__veil{ background:linear-gradient(90deg, rgba(5,6,18,.82) 0%, rgba(5,6,18,.4) 50%, transparent 78%), linear-gradient(180deg, rgba(5,6,18,.45), transparent 30%, transparent 80%, rgba(5,6,18,.5)) }
.pline{ margin-top:40px; display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 8px; border-radius:999px; font-size:16px; font-weight:700; letter-spacing:.08em; color:#fff;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) }
.pline i{ width:22px; height:22px; border-radius:50%; background:conic-gradient(from 200deg, var(--l1), var(--l2), var(--l1)); box-shadow:0 0 16px var(--l2) }
.hero--prod .sub-title .grad{ background:linear-gradient(90deg, #fff 0%, var(--l2) 55%, var(--l1) 100%); -webkit-background-clip:text; background-clip:text; color:transparent }
.plogo{ margin-top:28px; display:block; height:auto; width:min(260px, 56vw) }
.plogo + .sub-title{ margin-top:28px }
.hero--prod .sub-ctas{ margin-top:40px; display:flex; flex-wrap:wrap; gap:12px }
@media (max-width:767px){ .pline{ margin-top:24px } .plogo{ margin-top:20px } .plogo + .sub-title{ margin-top:20px } .hero--prod .sub-ctas{ margin-top:28px } .hero--prod .sub-ctas .btn{ flex:1 1 auto } }

/* ---------- 특별함 (교차 배치 쇼케이스) ---------- */
.hl-list{ margin-top:80px; display:flex; flex-direction:column; gap:120px }
.hl{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:center }
.hl__media{ grid-column:1 / 8; border-radius:var(--r-xl); overflow:hidden; background:#fff; box-shadow:0 0 0 1px rgba(18,16,34,.05), 0 40px 80px -56px rgba(47,31,196,.45) }
.hl__media img{ display:block; width:100%; height:auto }
.hl__media--tint{ background:#F4F4FB }
.hl__media--pad{ padding:clamp(20px,4vw,56px); display:grid; place-items:center; background:radial-gradient(80% 80% at 50% 40%, #fff, #EEEDFB) }
.hl__media--pad img{ width:min(100%,520px); filter:drop-shadow(0 30px 40px rgba(47,31,196,.16)) }
.hl__text{ grid-column:9 / 13 }
.hl:nth-child(even) .hl__media{ grid-column:6 / 13; grid-row:1 }
.hl:nth-child(even) .hl__text{ grid-column:1 / 5; grid-row:1; padding-left:var(--opt-xl) }
.hl__no{ font-size:16px; font-weight:700; letter-spacing:.08em; color:var(--text-sub); font-variant-numeric:tabular-nums }
.hl__k{ margin-top:16px; font-size:16px; font-weight:700; color:var(--point) }
.hl__title{ margin-top:8px; font-size:36px; font-weight:700; line-height:1.3; letter-spacing:-.045em; color:var(--text-strong) }
.hl__desc{ margin-top:18px; font-size:17px; line-height:1.75; color:var(--text-body) }

/* ---------- 기술 구성도 (영상 배경색과 섹션 배경을 맞춤) ---------- */
.arch{ background:#F3F4FA }
.arch__fig{ margin-top:56px }
.arch__fig video{ display:block; width:100%; height:auto; background:#F3F4FA;
  /* 브라우저마다 영상 색 변환이 1~3단계 달라 경계가 보일 수 있어, 가장자리를 배경으로 녹입니다 */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent); mask-composite:intersect }

/* ---------- 주요 기능 (어두운 섹션) ---------- */
.pfeat{ background:var(--bg-dark); color:rgba(255,255,255,.72) }
.pfeat .sec-title{ color:#fff } .pfeat .sec-title em{ color:var(--point-on-dark) } .pfeat .sec-lead{ color:rgba(255,255,255,.6) }
.pvideo{ margin-top:64px; position:relative; aspect-ratio:16 / 9; border-radius:var(--r-xl); overflow:hidden; background:#000; box-shadow:0 0 0 1px rgba(255,255,255,.08) }
.pvideo iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.fgrid{ margin-top:var(--gap); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
.fcard{ display:flex; flex-direction:column; padding:36px 32px 34px; border-radius:var(--r-xl); background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease) }
.fcard:hover{ background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(167,158,255,.35) }
.fcard__no{ font-size:16px; font-weight:700; letter-spacing:.08em; color:var(--point-on-dark); font-variant-numeric:tabular-nums }
.fcard__title{ margin-top:14px; font-size:22px; font-weight:700; line-height:1.4; letter-spacing:-.035em; color:#fff }
.fcard__desc{ margin-top:10px; font-size:16px; line-height:1.7 }
.fcard__list{ margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:10px }
.fcard__list li{ position:relative; padding-left:18px; font-size:16px; line-height:1.6; color:rgba(255,255,255,.82) }
.fcard__list li::before{ content:""; position:absolute; left:2px; top:.7em; width:6px; height:6px; border-radius:50%; background:var(--point-on-dark) }

/* ---------- 활용 사례 ---------- */
.pcases{ background:var(--bg-light) }
.ucgrid{ margin-top:72px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap) }
.uc{ display:flex; flex-direction:column; padding:40px; border-radius:var(--r-xl); background:#fff; transition:translate .4s var(--ease), box-shadow .4s var(--ease) }
.uc:hover{ translate:0 -4px; box-shadow:0 30px 60px -36px rgba(47,31,196,.3) }
.uc__logo{ height:56px; display:flex; align-items:center }
.uc__logo--txt span{ font-size:24px; font-weight:800; letter-spacing:-.04em; color:var(--text-strong) }
.uc__meta{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px }
.uc__meta span{ padding:4px 12px; border-radius:999px; font-size:16px; font-weight:600; color:var(--deep); background:var(--point-soft) }
.uc__title{ margin-top:20px; font-size:26px; font-weight:700; line-height:1.4; letter-spacing:-.035em; color:var(--text-strong) }
.uc__rows{ margin-top:24px; padding-top:24px; border-top:1px solid var(--line); display:grid; gap:16px }
.uc__rows > div{ display:grid; grid-template-columns:56px 1fr; gap:12px }
.uc__rows dt{ font-size:16px; font-weight:700; color:var(--deep); line-height:1.7 }
.uc__rows dd{ font-size:17px; line-height:1.7; color:var(--text-body) }
.pcases .morewrap{ margin-top:48px; display:flex; justify-content:center }

/* ---------- FAQ ---------- */
.pfaq{ background:#fff }
.pfaq__head{ grid-column:1 / 5; align-self:start; position:sticky; top:calc(var(--header) + 96px) }
.pfaq__list{ grid-column:6 / 13; border-top:1px solid var(--line-strong) }
.qa{ border-bottom:1px solid var(--line) }
.qa summary{ position:relative; display:flex; align-items:center; gap:20px; min-height:88px; padding:24px 64px 24px 0; cursor:pointer; list-style:none;
  font-size:20px; font-weight:600; line-height:1.5; letter-spacing:-.025em; color:var(--text-strong); transition:color .3s var(--ease) }
.qa summary::-webkit-details-marker{ display:none }
.qa summary::before{ content:"Q"; flex:none; font-size:20px; font-weight:800; color:var(--point) }
.qa summary::after{ content:""; position:absolute; right:4px; top:50%; width:40px; height:40px; margin-top:-20px; border-radius:50%;
  background:var(--bg-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121022' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:rotate .35s var(--ease), background-color .3s var(--ease) }
.qa summary:hover{ color:var(--point) }
.qa[open] summary::after{ rotate:45deg; background-color:var(--point-light) }
.qa__a{ padding:0 64px 32px 36px; font-size:17px; line-height:1.75; color:var(--text-body) }

.page-prod .cta{ background:#fff; padding-top:0 }

/* ---------- 반응형 ---------- */
@media (max-width:1280px){ .hl__title{ font-size:32px } }
@media (max-width:1024px){
  .hl-list{ gap:80px }
  .hl .hl__media,.hl:nth-child(even) .hl__media{ grid-column:1 / -1; grid-row:1 }
  .hl .hl__text,.hl:nth-child(even) .hl__text{ grid-column:1 / -1; grid-row:2; margin-top:32px; padding-left:var(--opt-xl); max-width:640px }
  .fgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pfaq__head,.pfaq__list{ grid-column:1 / -1; position:static }
  .pfaq__list{ margin-top:40px }
}
@media (max-width:767px){
  .hl-list{ margin-top:40px; gap:56px }
  .hl .hl__text,.hl:nth-child(even) .hl__text{ margin-top:20px; padding-left:var(--opt-lg) }
  .hl__k{ margin-top:10px } .hl__title{ margin-top:6px; font-size:26px } .hl__desc{ margin-top:10px; font-size:16px; line-height:1.7 }
  .arch__fig{ margin-top:32px; margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1) }
  .pvideo{ margin-top:36px; border-radius:var(--r-lg) }
  .fgrid{ grid-template-columns:1fr; gap:12px }
  .fcard{ padding:26px 24px }
  .fcard__title{ margin-top:10px; font-size:20px } .fcard__desc{ margin-top:8px } .fcard__list{ margin-top:16px; padding-top:16px; gap:8px }
  .ucgrid{ margin-top:40px; grid-template-columns:1fr; gap:12px }
  .uc{ padding:28px 24px }
  .uc__meta{ margin-top:14px } .uc__title{ margin-top:12px; font-size:22px } .uc__rows{ margin-top:18px; padding-top:18px; gap:12px }
  .uc__rows > div{ grid-template-columns:1fr; gap:4px } .uc__rows dd{ font-size:16px }
  .pfaq__list{ margin-top:28px }
  .qa summary{ min-height:72px; padding:20px 52px 20px 0; gap:14px; font-size:17px }
  .qa summary::before{ font-size:17px }
  .qa summary::after{ width:36px; height:36px; margin-top:-18px }
  .qa__a{ padding:0 0 24px 30px; font-size:16px }
}
@media (max-width:767px){ .hero--prod .hero__veil{ background:linear-gradient(180deg, rgba(5,6,18,.55), rgba(5,6,18,.62) 45%, rgba(5,6,18,.35) 80%, rgba(5,6,18,.5)) } }

/* ---------- 특별함 섹션과 서브 메뉴는 흰 배경으로 시작 ---------- */
.page-prod .why{ background:#fff }

/* 주요 기능 카드 이미지 (흰 바탕 다이어그램을 카드 상단 흰 판에 담음) */
.fcard{ padding-top:12px }
.fcard__media{ margin:0 -20px 26px; aspect-ratio:4 / 3; border-radius:calc(var(--r-xl) - 10px); background:#fff; position:relative; overflow:hidden; }
.fcard__media img{ position:absolute; inset:3%; width:94%; height:94%; object-fit:contain; transition:scale .6s var(--ease) }
.fcard:hover .fcard__media img{ scale:1.03 }
@media (max-width:767px){ .fcard{ padding-top:10px } .fcard__media{ margin:0 -14px 20px; border-radius:calc(var(--r-lg) - 6px) } }

/* 로고 이미지가 없는 제품: 글자 워드마크 */
.pname{ margin-top:28px; display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px; font-size:clamp(44px,5vw,64px); font-weight:800; letter-spacing:-.03em; line-height:1; color:#fff }
.pname span{ font-size:18px; font-weight:600; letter-spacing:0; color:rgba(255,255,255,.6) }
.pname + .sub-title{ margin-top:28px }
@media (max-width:767px){ .pname{ margin-top:20px } .pname span{ font-size:16px } .pname + .sub-title{ margin-top:20px } }

/* 기능 카드 5개: 위 3개 + 아래 2개 넓게 */
.fgrid--5{ grid-template-columns:repeat(6,minmax(0,1fr)) }
.fgrid--5 > .fcard{ grid-column:span 2 }
.fgrid--5 > .fcard:nth-child(n+4){ grid-column:span 3 }
.fgrid--5 > .fcard:nth-child(n+4) .fcard__media{ aspect-ratio:16 / 10 }

/* 사례 카드 3개 + 목록형 본문 */
.ucgrid--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.uc__logo img{ max-height:36px; max-width:180px; width:auto; height:auto; mix-blend-mode:multiply }
.uc__list{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px }
.uc__list li{ position:relative; padding-left:18px; font-size:17px; line-height:1.65; color:var(--text-body) }
.uc__list li::before{ content:""; position:absolute; left:2px; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--point) }

@media (max-width:1024px){
  .fgrid--5{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .fgrid--5 > .fcard,.fgrid--5 > .fcard:nth-child(n+4){ grid-column:auto }
  .fgrid--5 > .fcard:nth-child(n+4) .fcard__media{ aspect-ratio:4 / 3 }
  .fgrid--5 > .fcard:last-child{ grid-column:1 / -1 }
  .ucgrid--3{ grid-template-columns:1fr }
}
@media (max-width:767px){
  .fgrid--5{ grid-template-columns:1fr } .fgrid--5 > .fcard:last-child{ grid-column:auto }
  .uc__list{ margin-top:18px; padding-top:16px; gap:8px } .uc__list li{ font-size:16px }
}

/* Q-RAG 등: 작은 워드마크, 원본 해상도가 낮은 이미지, 정지 구성도 */
.plogo--sm{ width:min(200px, 44vw) }
.hl__media--soft{ aspect-ratio:4 / 3; display:grid; place-items:center; background:#F7FAFD }
.hl__media--soft img{ width:min(100%, 640px); height:auto }
.arch__fig--card{ padding:clamp(16px,3vw,40px); border-radius:var(--r-xl); background:#fff; box-shadow:0 0 0 1px rgba(18,16,34,.05), 0 40px 80px -56px rgba(47,31,196,.35) }
.arch__fig--card img{ display:block; width:100%; height:auto }

/* 도입 효과 띠 (FAQ에 이어지는 흰 배경) */
.pben{ padding:0 0 var(--sec); background:#fff }
.pben__list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
.pben__list li{ display:flex; align-items:center; gap:20px; padding:28px 28px; border-radius:var(--r-xl); background:var(--bg-light) }
.pben__list img{ flex:none; width:64px; height:64px; filter:drop-shadow(0 10px 18px rgba(67,48,230,.25)) }
.pben__list p{ font-size:17px; line-height:1.55; color:var(--text-body) }
.pben__list b{ font-weight:700; color:var(--text-strong) }
.page-prod .pben + .cta{ background:#fff }
@media (max-width:1024px){ .pben__list{ grid-template-columns:1fr } }
@media (max-width:767px){ .pben__list li{ padding:20px; gap:16px } .pben__list img{ width:52px; height:52px } .pben__list p{ font-size:16px } }