@charset "utf-8";

/* ==========================================================================
   Content — 서브페이지 (다크 sub-visual + 서브 헬퍼)
   ※ 카드/그리드/스탯/placeholder/특허칩 = 전역 hp-* (main.css) 재사용
   ========================================================================== */

/* ===== 서브 비주얼 (다크) ===== */
.sub-visual { position: relative; min-height: 400px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--d-bg); }
.sub-visual-bg { position: absolute; inset: 0;
  background-color: #0A0A0B;
  background-image:
    radial-gradient(58% 90% at 82% 8%, rgba(46, 107, 255, .24), transparent 60%),
    linear-gradient(140deg, #0E1526 0%, #0A0A0B 62%);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform-origin: center; animation: subZoom 2s cubic-bezier(.3, 1, .6, 1) both; }
@keyframes subZoom { from { transform: scale(1.15); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sub-visual-bg { animation: none; } }
.sub-visual-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 12, 28, .55) 0%, rgba(6, 12, 28, .4) 45%, rgba(0, 0, 0, .62) 100%); }
.sub-visual-content { 
    max-width: var(--area-width);position: relative; z-index: 10; text-align: center; padding: var(--header-height) var(--area-padding) 0; }
.sub-visual-tit { font-family: var(--font-title); font-size: clamp(34px, 5vw, 54px); font-weight: 700; color: #fff; letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.sub-visual-txt { font-size: 17px; color: rgba(255, 255, 255, .92); margin: 14px auto 0; line-height: 1.6; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }

/* 브레드크럼 (다크) */
.sub-breadcrumb { margin-bottom: 20px; }
.sub-breadcrumb-list { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sub-breadcrumb-item { font-size: 13.5px; color: var(--d-dim); }
.sub-breadcrumb-item a { color: var(--d-dim); display: inline-flex; transition: var(--transition); }
.sub-breadcrumb-item a:hover { color: #fff; }
.sub-breadcrumb-item.is-current { color: var(--primary); font-weight: 600; }
.sub-breadcrumb-item + .sub-breadcrumb-item::before { content: '/'; margin-right: 8px; color: rgba(255, 255, 255, .25); }
.sub-breadcrumb-item svg { vertical-align: middle; }
.sub-lnb { display: none; } /* 단일 구조 → LNB 미사용 */

/* ===== 아이콘 타일 (전 페이지 공통 · icon-library.html 기준) ===== */
.ico-tile{width:68px;height:68px;border-radius:19px;display:grid;place-items:center;
  background:var(--l-bg-2);transition:var(--transition)}
.ico-tile svg{width:46px;height:46px}
/* 카드가 회색(#F5F7FA)일 때 타일을 흰색으로 뒤집는다 */
.is-tinted .ico-tile{background:#fff;box-shadow:0 4px 14px rgba(11,18,32,.06)}
/* 호버 — 부모 요소에 걸고 타일은 배경만 바꾼다 */
.card:hover .ico-tile,.cell:hover .ico-tile{background:var(--primary-soft)}
.is-tinted .card:hover .ico-tile{box-shadow:0 8px 22px rgba(46,107,255,.22)}

/* ===== 서브 공통 헬퍼 ===== */
.sub-narrow { max-width: var(--area-width); margin: 0 auto; }
.lead-p { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.6; color: var(--black); font-weight: 500; max-width: var(--area-width); letter-spacing: -.01em; }
.sec--dark .lead-p { color: #fff; }
.emph { border-left: 3px solid var(--primary); padding: 6px 0 6px 26px; font-family: var(--font-title);
  font-size: clamp(22px, 3vw, 32px); font-weight: 400; line-height: 1.35; color: var(--black); max-width: var(--area-width); }
.sec--dark .emph { color: #fff; }

/* Technology 스펙 리스트 */
.spec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.spec-row:first-child { border-top: 1px solid var(--border); }
.spec-row b { font-family: var(--font-title); font-size: 21px; color: var(--black); font-weight: 700; }
.spec-row b .u { color: var(--primary); font-size: .7em; margin-left: 4px; }
.spec-row span { color: var(--text-sub); font-size: 15px; }

/* Applications 리스트 */
.applist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.applist .item { border: 1px solid var(--d-line); border-radius: var(--radius-sm); padding: 20px 18px;
  background: var(--d-bg-2); font-family: var(--font-title); font-size: 15px; color: #fff; display: flex; align-items: center; gap: 10px; }
.applist .item::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }

/* Contact */
.ct-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.ct-info .row { padding: 22px 0; border-bottom: 1px solid var(--border); }
.ct-info .row:first-child { border-top: 1px solid var(--border); }
.ct-info dt { font-family: var(--font-title); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.ct-info dd { font-size: 17px; color: var(--black); line-height: 1.5; }
.ct-info dd a { color: var(--black); }
.ct-info dd a:hover { color: var(--primary); }
.ct-form-wrap { background: var(--l-bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 38px; }
.ct-form-wrap h3 { font-family: var(--font-title); font-size: 22px; margin-bottom: 22px; }
.ct-map { margin-top: 28px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; line-height: 0; }
.ct-map iframe { display: block; width: 100%; height: 300px; border: 0; }

/* ===== Why H-PHY: The Limits (4열 밴드, 카드 없음) ===== */
/* .cm-tit-sub → layout.css 공통으로 승격 (전 서브페이지 통일) */
.wl-subhead { text-align: center; max-width: var(--area-width); margin: 118px auto 0; }
.wl-subtit { font-family: var(--font-title); font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; color: var(--black); letter-spacing: -.01em; }
.wl-lead { margin-top: 18px; font-size: 16.5px; line-height: 1.7; color: var(--text-sub); }

.wl-band { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 1px solid var(--border); }
.wl-col { position: relative; padding: 40px 30px; border-right: 1px solid var(--border); cursor: default; overflow: hidden; transition: background .25s ease; }
.wl-col:last-child { border-right: none; }
.wl-col::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46, 107, 255, .05), transparent 72%); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.wl-bar { position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--primary); transition: width .45s cubic-bezier(.16, 1, .3, 1); }
.wl-ico { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 24px;
  border-radius: 18px; background: var(--l-bg-2); box-shadow: 0 4px 14px rgba(11, 18, 32, .06);
  transition: transform .25s ease, box-shadow .25s ease; }
.wl-ico svg { width: 42px; height: 42px; display: block; }
.wl-num { position: relative; display: block; font-family: var(--font-title); font-size: 13px; font-weight: 700; color: var(--primary); letter-spacing: .12em; }
.wl-title { position: relative; display: block; margin-top: 10px; font-family: var(--font-title); font-size: 19px; font-weight: 700; color: var(--black); letter-spacing: -.01em; line-height: 1.2; }
.wl-desc { position: relative; display: block; margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--text-sub); }

@media (hover: hover) {
  .wl-col:hover::before { opacity: 1; }
  .wl-col:hover .wl-bar { width: 100%; }
  .wl-col:hover .wl-ico { transform: scale(1.06); box-shadow: 0 6px 16px rgba(46, 107, 255, .13); }
}

.wl-emph { display: flex; align-items: center; gap: 20px; margin-top: 64px; padding: 28px 36px; background: var(--l-bg-2); border-radius: var(--radius-lg); }
.wl-emph__badge { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--border); color: var(--text-sub); font-family: var(--font-title); font-weight: 700; font-size: 18px; }
.wl-emph__text { font-family: var(--font-title); font-size: clamp(17px, 2vw, 21px); font-weight: 700; color: var(--black); letter-spacing: -.01em; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════
   Technology Foundation — H-PHY(TM) Architecture Overview
   ═══════════════════════════════════════════════════════════════ */

/* ── 헤드 ── */
.tf-head{text-align:center;max-width:var(--area-width);margin:0 auto 62px}
.tf-head .cm-tit-txt{margin-left:auto;margin-right:auto}
.tf-tagline{font-family:var(--font-title);font-size:18px;font-weight:400;
  color:var(--primary);margin-top:14px}

/* ── ① 신호 흐름 다이어그램 밴드 ── */
.tf-rail{background:var(--l-bg-2);border-radius:var(--radius-lg);padding:40px 34px 34px;margin-bottom:56px}
.tf-flow{display:grid;grid-template-columns:0.82fr 1.42fr 1.02fr 1.42fr 0.82fr;gap:22px;align-items:stretch}
.tf-flow--n3{grid-template-columns:repeat(3,1fr);max-width:860px;margin-left:auto;margin-right:auto}
.tf-arch-img{display:block;width:100%;max-width:900px;margin:0 auto;height:auto}
.tf-blk-img{display:block;height:206px;width:auto;max-width:100%;margin:0 auto}
.tf-sig{margin-bottom:80px}
.tf-sigtit{text-align:center;font-family:var(--font-title);font-size:clamp(21px,2.6vw,30px);font-weight:700;color:var(--black);letter-spacing:-.01em;margin-bottom:20px}
/* 가로 스크롤 안내 (모바일에서만 노출 — content_responsive.css) */
.tf-scrollhint{display:none;align-items:center;justify-content:center;gap:7px;margin:-4px 0 18px;font-size:12.5px;color:var(--text-light);font-weight:500}
.tf-scrollhint svg{width:16px;height:16px;flex-shrink:0;color:var(--primary);animation:hintSwipe 1.6s ease-in-out infinite}
@keyframes hintSwipe{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.tf-scrollhint svg{animation:none}}
.tf-sig .tf-rail{margin-bottom:0}
.tf-bwe__head{text-align:center;margin-bottom:36px}
.tf-bwe__fig{margin:0 auto}
.tf-bwe__fig img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.tf-bwe__note{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-size:16px;color:var(--text-light)}
.tf-bwe__note b{color:var(--black)}
.tf-bwe__disclaimer{margin:14px auto 0;max-width:var(--area-width);text-align:center;font-size:16px;line-height:1.6;color:var(--text-light)}
@media(max-width:600px){
  .tf-bwe__note{flex-direction:column;align-items:center;gap:8px;font-size:14px;text-align:center}
  .tf-bwe__disclaimer{font-size:13px}
}

.tf-blk{position:relative;background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 14px 14px;text-align:center;display:flex;flex-direction:column}
.tf-blk--key{border-color:var(--primary);box-shadow:0 0 0 3px rgba(46,107,255,.10)}

.tf-blk__tit{font-family:var(--font-title);font-size:13px;font-weight:700;
  color:var(--black);line-height:1.25;min-height:36px}
.tf-blk__tit small{display:block;font-size:10.5px;font-weight:400;color:var(--text-light);margin-top:2px}
.tf-blk__sch{margin-top:10px;flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.tf-blk__sch svg{width:auto;height:206px;max-width:100%;display:block;margin:0 auto}
.tf-blk__cap{font-family:var(--font-title);font-size:10.5px;font-weight:700;
  color:var(--primary);letter-spacing:.04em;margin-top:6px;min-height:15px}

/* 블록 사이 진행 화살표 */
.tf-blk::after{content:'';position:absolute;z-index:4;right:-19px;top:50%;
  width:14px;height:14px;transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E9BFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center/contain}
.tf-blk:last-child::after{display:none}

/* 화살표 아래 'M Lanes' 라벨 */
.tf-lanes{position:absolute;z-index:5;right:-13px;top:calc(50% + 13px);
  transform:translateX(50%);white-space:nowrap;
  font-family:var(--font-title);font-size:9px;font-weight:700;color:var(--text-light)}

/* 블록 위 'Current-Mode PAM Signaling' 라벨 */
.tf-mode{position:absolute;left:0;right:0;top:-26px;text-align:center;
  font-size:11px;color:var(--primary);font-weight:500}

/* ── ② 상세 4분할(5열) 밴드 ── */
.tf-detail{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--border)}
.tf-col{position:relative;padding:30px 22px 26px;border-right:1px solid var(--border);
  transition:var(--transition)}
.tf-col:first-child{padding-left:0}
.tf-col:last-child{border-right:0;padding-right:0}

/* 상단 진행 바 (호버 시 좌→우 채움) */
.tf-col::after{content:'';position:absolute;left:0;top:-1px;height:2px;width:0;
  background:var(--primary);transition:width .45s ease}

.tf-col__num{font-family:var(--font-title);font-size:12px;font-weight:700;
  letter-spacing:.16em;color:var(--primary)}
.tf-col__tit{font-family:var(--font-title);font-size:16px;font-weight:700;
  color:var(--black);margin-top:9px;line-height:1.3;min-height:50px}
.tf-col__tit span{display:block;font-weight:400;font-size:13px;color:var(--text-light)}
.tf-col li{position:relative;font-size:13px;line-height:1.55;color:var(--text-sub);
  padding-left:11px;margin-top:9px}
.tf-col li::before{content:'';position:absolute;left:0;top:7px;width:4px;height:4px;
  border-radius:50%;background:var(--primary-light)}

/* 호버 — 카드가 아니므로 리프트(translateY) 금지 */
.tf-col:hover{background:linear-gradient(180deg,rgba(46,107,255,.05),rgba(46,107,255,0))}
.tf-col:hover::after{width:100%}

/* ── ③ 하단 benefit 스트립 ── */
.tf-ben{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
  margin-top:28px}
.tf-ben__ico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  background:var(--l-bg-2);margin-bottom:16px;transition:var(--transition)}
.tf-ben__ico svg{width:42px;height:42px}
.tf-ben__tit{display:block;font-family:var(--font-title);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.tf-ben__txt{font-size:13.5px;line-height:1.65;color:var(--text-sub);margin-top:9px}
.tf-ben__item:hover .tf-ben__ico{background:var(--primary-soft)}

/* ── §2 지표 밴드 (VLSI) ── */
.tf-vlsi__head{text-align:center;font-family:var(--font-title);font-size:clamp(28px,3.6vw,42px);font-weight:700;color:var(--black);letter-spacing:-.02em}
.tf-stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:44px 24px;margin-top:52px}
.tf-stat{text-align:center;padding:6px 20px;border-right:1px solid var(--border)}
.tf-stat:last-child{border-right:0}
.tf-stat__num{font-family:var(--font-title);font-size:clamp(30px,3.4vw,44px);font-weight:700;color:var(--black);letter-spacing:-.02em;line-height:1}
.tf-stat__num span{font-size:.4em;color:var(--primary);font-weight:700;margin-left:4px;letter-spacing:0}
.tf-stat__lbl{margin-top:14px;font-size:14px;color:var(--text-light)}
.tf-vlsi__cite{margin-top:20px;text-align:center;font-size:13px;line-height:1.6;color:var(--text-light)}
.tf-vlsi__cite em{font-style:italic}
.tf-vlsi__cite{overflow-wrap:anywhere}
.tf-vlsi__link{color:var(--primary);font-style:normal;font-weight:600;text-decoration:none;display:inline-block;margin-top:6px}
.tf-vlsi__link:hover{text-decoration:underline}

/* ── §3 CCII+ Small-Signal Model ── */
/* ── §3 · RX-Centric Current-Domain Transceiver — ① 아키텍처 대비 ── */
.tf-cc__compare{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:4px}
.tf-cc__col{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px 30px}
.tf-cc__col--hphy{border-color:var(--primary-line);box-shadow:0 0 0 1px var(--primary-line),var(--shadow)}
.tf-cc__head{text-align:center}
.tf-cc__badge{display:inline-block;padding:7px 18px;border-radius:999px;font-family:var(--font-title);font-size:14px;font-weight:700}
.tf-cc__badge--legacy{background:var(--l-bg-2);color:var(--text-sub)}
.tf-cc__badge--hphy{background:var(--primary);color:#fff}
.tf-cc__arch{margin-top:12px;font-size:13.5px;color:var(--text-light)}
.tf-cc__diagram{margin:22px 0 8px;padding:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);display:flex;justify-content:center}
.tf-cc__diagram img{width:100%;height:auto;display:block;max-width:440px}
.tf-cc__flow{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:8px}
.tf-cc__io{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-title);font-size:15px;font-weight:700;color:var(--black)}
.tf-cc__io small{display:block;font-size:10px;font-weight:400;color:var(--text-light);margin-top:2px}
.tf-cc__node{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:96px;padding:12px 14px;background:#fff;border:1px solid var(--border);border-radius:10px;font-family:var(--font-title);font-size:12.5px;font-weight:700;line-height:1.25;color:var(--text);text-align:center}
.tf-cc__node small{display:block;font-family:var(--font-body);font-size:11px;font-weight:500;color:var(--text-light);margin-top:4px}
.tf-cc__node--key{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.tf-cc__arrow{display:flex;align-items:center;color:var(--text-light);font-size:15px}
.tf-cc__fb{margin-top:14px;text-align:center;font-size:12px;color:var(--text-light)}
.tf-cc__list{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.tf-cc__list li{position:relative;padding-left:28px;font-size:14px;line-height:1.5;color:var(--text-sub)}
.tf-cc__list li::before{position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.tf-cc__list--con li::before{content:'\2212';background:rgba(220,38,38,.10);color:#DC2626}
.tf-cc__list--pro li::before{content:'\2713';background:var(--primary-soft);color:var(--primary)}

/* §3 Op-Amp → H-PHY Current Conveyor 좌우 대비 (Image #30 디자인시스템 가공) */
.tf-vs{margin-top:26px}
.tf-vs__rows{display:flex;flex-direction:column;gap:14px}
.tf-vs__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 24px;transition:var(--transition)}
.tf-vs__row:hover{border-color:var(--primary-line);box-shadow:var(--shadow)}
.tf-vs__from{text-align:center;font-size:14px;color:var(--text-light);line-height:1.4}
.tf-vs__from small{display:block;font-size:11.5px;margin-top:1px}
.tf-vs__mid{min-width:164px;display:flex;flex-direction:column;align-items:center;gap:8px}
.tf-vs__ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--l-bg-2);color:var(--primary)}
.tf-vs__ico svg{width:25px;height:25px}
.tf-vs__mid b{font-family:var(--font-title);font-size:13.5px;font-weight:700;color:var(--black);text-align:center;line-height:1.2}
.tf-vs__arrow{position:relative;width:56px;height:7px;border-radius:5px;background:linear-gradient(90deg,var(--primary-soft),var(--primary))}
.tf-vs__arrow::after{content:'';position:absolute;right:-3px;top:50%;transform:translateY(-50%);border-left:10px solid var(--primary);border-top:6px solid transparent;border-bottom:6px solid transparent}
.tf-vs__to{text-align:center;font-family:var(--font-title);font-size:15px;font-weight:700;color:var(--primary);line-height:1.35}

/* ── §3-2 · Key Advantages of H-PHY CC (10개 · 5x2 아이콘 카드) ── */
/* adv-cell 재사용 — 5×2 border 그리드 (3열 규칙을 5열로 override) */
.tf-key .adv-grid{grid-template-columns:repeat(5,1fr)}
.tf-key .adv-cell:nth-child(3n){border-right:1px solid var(--border);padding-right:34px}
.tf-key .adv-cell:nth-child(-n+3){border-bottom:0}
.tf-key .adv-cell:nth-child(-n+5){border-bottom:1px solid var(--border)}
.tf-key .adv-cell:nth-child(5n){border-right:0;padding-right:0}

/* ═══════════════════════════════════════════════════════════════
   Advantages — Key Advantages
   ═══════════════════════════════════════════════════════════════ */

/* ── 3×2 구분선 그리드 ── */
.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border)}

.adv-cell{position:relative;padding:42px 34px 40px;border-right:1px solid var(--border);
  transition:var(--transition)}
.adv-cell:nth-child(-n+3){border-bottom:1px solid var(--border)}
.adv-cell:nth-child(3n){border-right:0;padding-right:0}

/* 상단 진행 바 (호버 시 좌→우 채움) */
.adv-cell::after{content:'';position:absolute;left:0;top:-1px;height:2px;width:0;
  background:var(--primary);transition:width .45s ease}

.adv-cell__ico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  background:var(--l-bg-2);margin-bottom:22px;transition:var(--transition)}
.adv-cell__ico svg{width:44px;height:44px}
.adv-cell__num{font-family:var(--font-title);font-size:12px;font-weight:700;
  letter-spacing:.16em;color:var(--primary)}
.adv-cell__tit{font-family:var(--font-title);font-size:18px;font-weight:700;color:var(--black);
  line-height:1.32;margin-top:9px;min-height:48px}
.adv-cell__txt{font-size:14px;line-height:1.7;color:var(--text-sub);margin-top:13px}
.adv-cell__txt sup{font-size:.68em;vertical-align:super}

/* 호버 — 카드가 아니므로 리프트(translateY) 금지 */
.adv-cell:hover{background:linear-gradient(180deg,rgba(46,107,255,.05),rgba(46,107,255,0))}
.adv-cell:hover::after{width:100%}
.adv-cell:hover .adv-cell__ico{background:var(--primary-soft)}


/* ═══════════════════════════════════════════════════════════════
   IP Portfolio  (page-ip-portfolio.php)
   ─ 이 블록을 content.css 맨 아래에 그대로 붙여넣는다.
   ─ §1 Patent / §2 Architecture 는 Advantages 의 .adv-grid/.adv-cell 재사용
   ═══════════════════════════════════════════════════════════════ */

/* IP Portfolio 는 카드 제목이 1줄이라 Advantages 의 min-height 를 해제한다 */
.ip-cards .adv-cell__tit { min-height: 0; }
.ip-cards .adv-cell__txt { margin-top: 10px; }

/* tint 섹션에서 아이콘 타일이 배경과 같아지는 문제 → 흰색으로 반전 */
.sec--tint .adv-cell__ico { background: #fff; box-shadow: 0 4px 14px rgba(11, 18, 32, .06); }
.sec--tint .adv-cell:hover .adv-cell__ico { background: var(--primary-soft); box-shadow: 0 8px 22px rgba(46, 107, 255, .18); }

/* ── §3 Trademark — 워드마크 + 번호 리스트 ── */
.ip-tm { display: grid; grid-template-columns: .82fr 1.18fr; gap: 64px; align-items: stretch; }

.ip-tm__mark { background: var(--d-bg); border-radius: var(--radius-lg);
  position: relative; overflow: hidden; min-height: 340px; }
.ip-tm__mark::before { content: ''; position: absolute; inset: 0;
  background: url("../images/content/ip-portfolio/brand-identity.png") center / contain no-repeat; }
.ip-tm__wordmark { position: relative; font-family: var(--font-title); font-weight: 700;
  font-size: clamp(38px, 4.4vw, 54px); color: #fff; letter-spacing: -.02em; line-height: 1; }
.ip-tm__wordmark sup { font-size: .3em; font-weight: 400; top: -1.1em; margin-left: 2px; }
.ip-tm__badge { position: relative; display: inline-flex; align-items: center; gap: 7px; margin-top: 26px;
  padding: 8px 16px; border: 1px solid var(--primary-line); border-radius: 999px;
  background: rgba(46, 107, 255, .12); color: var(--primary-light);
  font-family: var(--font-title); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ip-tm__badge svg { width: 14px; height: 14px; }
.ip-tm__note { position: relative; margin-top: 22px; font-size: 14px; line-height: 1.65; color: var(--d-dim); }

.ip-tm__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; }
.ip-tm__item { padding: 22px 0; border-bottom: 1px solid var(--border); }
.ip-tm__item:nth-child(-n+2) { border-top: 1px solid var(--border); }
.ip-tm__no { font-family: var(--font-title); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--primary); }
.ip-tm__tit { font-family: var(--font-title); font-size: 17px; font-weight: 700; color: var(--black); margin-top: 8px; }
.ip-tm__txt { font-size: 14px; line-height: 1.65; color: var(--text-sub); margin-top: 7px; }

/* ── §4 Digital Identity — 도메인 타일 ── */
.ip-dm { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ip-dm__item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 26px 26px; transition: var(--transition); }
.ip-dm__item:hover { border-color: var(--primary); box-shadow: 0 10px 26px rgba(46, 107, 255, .10); transform: translateY(-3px); }
.ip-dm__tld { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-title);
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.ip-dm__tld::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.ip-dm__url { font-family: var(--font-title); font-size: 22px; font-weight: 700; color: var(--black); margin-top: 14px; letter-spacing: -.01em; }
.ip-dm__state { display: flex; align-items: center; gap: 7px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-sub); }
.ip-dm__state svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── §5 Continuous Innovation — 아이콘 스트립 3×2 ── */
.ip-inv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 40px; }
.ip-inv__ico { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  background: var(--l-bg-2); margin-bottom: 20px; transition: var(--transition); }
.ip-inv__ico svg { width: 44px; height: 44px; }
.ip-inv__item:hover .ip-inv__ico { background: var(--primary-soft); }
.ip-inv__no { font-family: var(--font-title); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--primary); }
.ip-inv__tit { font-family: var(--font-title); font-size: 18px; font-weight: 700; color: var(--black); margin-top: 9px; }
.ip-inv__txt { font-size: 14px; line-height: 1.7; color: var(--text-sub); margin-top: 11px; }

/* ── §6 Technology Vision — 번호 리스트 2열 ── */
.ip-vis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 64px; border-top: 1px solid var(--border); }
.ip-vis__item { position: relative; display: flex; gap: 22px; padding: 28px 0; border-bottom: 1px solid var(--border); }
.ip-vis__no { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--border); font-family: var(--font-title);
  font-size: 14px; font-weight: 700; color: var(--primary); transition: var(--transition); }
.ip-vis__item:hover .ip-vis__no { background: var(--primary); border-color: var(--primary); color: #fff; }
.ip-vis__tit { font-family: var(--font-title); font-size: 18px; font-weight: 700; color: var(--black); line-height: 1.3; }
.ip-vis__txt { font-size: 14.5px; line-height: 1.7; color: var(--text-sub); margin-top: 8px; }

/* ── §7 Beyond the Conventional Limits — 이미지 ── */
.ip-beyond { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--d-line);
  background: #05070E; line-height: 0; }
.ip-beyond img { width: 100%; height: auto; display: block; }

/* ═══════════════════════════════════════════════════════════════
   Platform IP Coverage  (IP Portfolio §1 하위 — H-PHY 코어 + 빌딩블록 맵)
   ═══════════════════════════════════════════════════════════════ */
.ip-plat { display: grid; grid-template-columns: 1fr .92fr 1fr; gap: 34px; align-items: center; margin-top: 72px; }
.ip-plat__col { display: flex; flex-direction: column; gap: 14px; }
.ip-plat__item { display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px 20px; transition: var(--transition); }
.ip-plat__item:hover { border-color: var(--primary); box-shadow: 0 8px 22px rgba(46, 107, 255, .10); }
.ip-plat__ico { flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--l-bg-2); transition: var(--transition); }
.ip-plat__ico svg { width: 30px; height: 30px; display: block; }
.ip-plat__item:hover .ip-plat__ico { background: var(--primary-soft); }
.ip-plat__tit { font-family: var(--font-title); font-size: 16px; font-weight: 700; color: var(--black);
  line-height: 1.3; letter-spacing: -.01em; }
.ip-plat__core { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; text-align: center; }
.ip-plat__core::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--primary-line);
  background: radial-gradient(62% 62% at 50% 44%, rgba(46, 107, 255, .20), rgba(46, 107, 255, .05) 62%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 18px 50px rgba(46, 107, 255, .10); }
.ip-plat__core::after { content: ''; position: absolute; inset: 13%; border-radius: 50%;
  border: 1px dashed rgba(46, 107, 255, .32); }
.ip-plat__core > div { position: relative; }
.ip-plat__mark { font-family: var(--font-title); font-weight: 700; color: var(--black);
  font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.02em; line-height: 1; }
.ip-plat__mark sup { font-size: .3em; font-weight: 400; top: -1.15em; margin-left: 2px; }
.ip-plat__sub { margin-top: 10px; font-family: var(--font-title); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════
   Patent Portfolio 보강 블록  (page-ip-portfolio.php §1 내부)
   ─ content.css 맨 아래 "IP Portfolio" 블록에 이어서 붙여넣는다.
   ─ 구성: ① 출원 현황  ② Innovation Timeline  ③ Freedom to Operate
   ═══════════════════════════════════════════════════════════════ */

/* ── 공통 : 섹션 내부 소제목 ── */
.ip-subhead { text-align: center; max-width: var(--area-width); margin: 110px auto 0; }
.ip-subtit { font-family: var(--font-title); font-size: clamp(24px, 2.6vw, 30px); font-weight: 700;
  color: var(--black); letter-spacing: -.01em; line-height: 1.25; }
.ip-sublead { margin-top: 16px; font-size: 16.5px; line-height: 1.7; color: var(--text-sub); }

/* ══════════════════════════════════════════════
   ① 출원 현황 — 3×2 구분선 스탯 밴드
   ══════════════════════════════════════════════ */
.ip-stat { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 52px;
  border-top: 1px solid var(--border); }
.ip-stat__c { position: relative; padding: 34px 30px 32px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transition: var(--transition); }
.ip-stat__c:nth-child(3n) { border-right: 0; padding-right: 0; }
.ip-stat__c:nth-child(3n+1) { padding-left: 0; }
.ip-stat__c::after { content: ''; position: absolute; left: 0; top: -1px; height: 2px; width: 0;
  background: var(--primary); transition: width .45s ease; }
.ip-stat__c:hover { background: linear-gradient(180deg, rgba(46,107,255,.05), rgba(46,107,255,0)); }
.ip-stat__c:hover::after { width: 100%; }

.ip-stat__rg { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-title); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.ip-stat__rg::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.ip-stat__n { font-family: var(--font-title); font-size: clamp(38px, 4.4vw, 52px); font-weight: 700;
  color: var(--black); line-height: 1; letter-spacing: -.03em; margin-top: 16px; }
.ip-stat__n span { color: var(--primary); font-size: .46em; margin-left: 3px; }
.ip-stat__l { font-size: 15px; font-weight: 500; color: var(--black); margin-top: 14px; }
.ip-stat__s { font-size: 13.5px; color: var(--text-light); margin-top: 5px; }

/* ══════════════════════════════════════════════
   ② Innovation Timeline — 세로형
   ══════════════════════════════════════════════ */
.ip-tl { position: relative; max-width: 920px; margin: 52px auto 0; padding-left: 128px; }
.ip-tl::before { content: ''; position: absolute; left: 95px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(180deg, var(--primary-light), var(--primary)); }

.ip-tl__row { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 22px;
  align-items: start; padding: 24px 0; }
.ip-tl__row + .ip-tl__row { border-top: 1px solid var(--border); }
.ip-tl__yr { position: absolute; left: -128px; top: 28px; width: 78px; text-align: right;
  font-family: var(--font-title); font-size: 22px; font-weight: 700; color: var(--black); letter-spacing: -.01em; }
.ip-tl__dot { position: absolute; left: -40px; top: 34px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--primary-light); }
.ip-tl__row:last-child .ip-tl__dot { border-color: var(--primary); box-shadow: 0 0 0 5px rgba(46,107,255,.14); }

.ip-tl__ico { width: 54px; height: 54px; border-radius: 15px; background: var(--l-bg-2);
  display: grid; place-items: center; transition: var(--transition); }
.ip-tl__ico svg { width: 34px; height: 34px; display: block; }
.ip-tl__row:hover .ip-tl__ico { background: var(--primary-soft); }
.ip-tl__t { font-family: var(--font-title); font-size: 19px; font-weight: 700; color: var(--black); letter-spacing: -.01em; }
.ip-tl__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.ip-tl__tags span { font-size: 13px; color: var(--text-sub); background: var(--l-bg-2);
  border-radius: 999px; padding: 6px 14px; }

/* ══════════════════════════════════════════════
   ③ Freedom to Operate — 좌 스텝퍼 + 우 상태 테이블
   ══════════════════════════════════════════════ */
.ip-fto { display: grid; grid-template-columns: .86fr 1.14fr; gap: 56px; align-items: start; margin-top: 52px; }
.ip-fto__head { font-family: var(--font-title); font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: 20px; }

.ip-fto__s { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding-bottom: 30px; }
.ip-fto__s:last-child { padding-bottom: 0; }
.ip-fto__s::before { content: ''; position: absolute; left: 23px; top: 48px; bottom: 4px; width: 2px;
  background: var(--border); transform: translateX(-1px); }
.ip-fto__s:last-child::before { display: none; }
.ip-fto__n { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--border);
  font-family: var(--font-title); font-size: 14px; font-weight: 700; color: var(--primary); }
.ip-fto__s:last-child .ip-fto__n { background: var(--primary); border-color: var(--primary); color: #fff; }
.ip-fto__t { font-family: var(--font-title); font-size: 17px; font-weight: 700; color: var(--black); padding-top: 11px; line-height: 1.3; }
.ip-fto__x { font-size: 13.5px; color: var(--text-sub); margin-top: 6px; }

.ip-fto__tbl { border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--white); }
.ip-fto__hd { display: grid; grid-template-columns: 1fr 132px; padding: 14px 24px;
  background: var(--l-bg-2); font-family: var(--font-title); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-light); }
.ip-fto__hd span:last-child { text-align: center; color: var(--primary); }

.ip-fto__r { display: grid; grid-template-columns: 1fr 132px; align-items: center;
  padding: 17px 24px; border-top: 1px solid var(--border); transition: var(--transition); }
.ip-fto__r:hover { background: rgba(46, 107, 255, .035); }
.ip-fto__r b { font-family: var(--font-title); font-size: 15.5px; font-weight: 700; color: var(--black); }
.ip-fto__r i { display: grid; place-items: center; }
.ip-fto__r svg { width: 22px; height: 22px; display: block; }

.ip-fto__ft { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px; border-top: 1px solid var(--border); background: var(--primary-soft); }
.ip-fto__ft span { font-size: 14px; color: var(--text-sub); }
.ip-fto__ft b { font-family: var(--font-title); font-size: 15px; font-weight: 700; color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════
   Applications — 다크 방사형 허브 + Why 스트립  (applications.html 확정 시안)
   변수(시안 base.css 토큰)는 두 섹션에 로컬 정의 → 전역 :root 미오염
   데이터/아이콘: assets/js/applications-data.js (CATS·WHY·ICONS)
   ═══════════════════════════════════════════════════════════════ */
.applications, .why{
  --accent:#2E6BFF; --accent2:#37E1FF;
  --accent-soft:rgba(46,107,255,.14); --accent-line:rgba(46,107,255,.34);
  --panel:#101318; --card:#12161d; --card2:#0e1218;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12);
  --tx:#EAF0FA; --mut:#9AA7BD; --dim:#6C7789;
  --rlg:22px; --r:14px; --rsm:8px; --t:.25s ease;
  color:var(--tx);   /* 시안 body{color:--tx} 대체 — 색 미지정 텍스트가 밝게 보이도록 */
}
.applications .area, .why .area{position:relative;z-index:2}
/* 다크 섹션 h태그 — layout.css h1~h6{color:--black} 직접룰이 상속을 이기므로 밝게 override */
.applications :where(h1,h2,h3,h4,h5,h6), .why :where(h1,h2,h3,h4,h5,h6){color:var(--tx)}

/* base 컴포넌트 (base.css — *, body, .area 제외) */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Play',sans-serif;font-weight:700;letter-spacing:.22em;font-size:12px;color:var(--accent);padding:8px 16px;border:1px solid var(--accent-line);border-radius:999px;background:var(--accent-soft);text-transform:uppercase}
h2.title{font-family:'Play',sans-serif;font-weight:700;font-size:clamp(30px,5.4vw,50px);line-height:1.05;letter-spacing:-.01em;margin:22px 0 14px}
h2.title .g{color:var(--accent)}
.sub{font-size:clamp(15px,2vw,19px);color:var(--mut);font-weight:500}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{font-size:13.5px;font-weight:600;color:var(--tx);padding:8px 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}
.chip b{color:var(--accent);margin-right:6px;font-weight:800}
.feat{list-style:none;display:flex;flex-direction:column;gap:11px}
.feat li{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:500;color:#D3DBE8}
.ic{flex:none;width:32px;height:32px;border-radius:9px;background:var(--accent-soft);border:1px solid var(--accent-line);display:grid;place-items:center}
.ic svg{width:17px;height:17px;stroke:var(--accent);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chead{display:flex;align-items:center;gap:11px}
.chead::before{content:"";width:4px;height:18px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--accent2));flex:none}
.hbmbox .chead,.apbox .chead{justify-content:center}
.hbmbox .chead::before,.apbox .chead::before{display:none}
.ctitle{font-size:16.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.ucie-chip{background:#fff;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;padding:8px 12px}
.ucie-chip img{display:block}

/* SECTION 1: Applications hub */
.applications{position:relative;padding:88px 32px 40px;background:radial-gradient(1100px 620px at 50% 46%,rgba(46,107,255,.15),transparent 62%),linear-gradient(180deg,#0A0A0B,#0b0e13);overflow:hidden}
.applications::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(1000px 700px at 50% 46%,#000,transparent 74%);mask-image:radial-gradient(1000px 700px at 50% 46%,#000,transparent 74%);opacity:.38}
.head{text-align:center;margin-bottom:28px}
.head .chips{justify-content:center;margin-top:18px}
.hub{position:relative;display:grid;gap:18px;align-items:start;grid-template-columns:290px minmax(360px,1fr) 290px;grid-template-areas:"ai hbm soc" "chi hero uci" ". ap .";}
.hub svg.wires{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
.cell{position:relative;z-index:3}
.ai{grid-area:ai}.chi{grid-area:chi}.soc{grid-area:soc}.uci{grid-area:uci}
.hbm{grid-area:hbm}.hero{grid-area:hero}.ap{grid-area:ap}
.rcard{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(18,22,29,.96),rgba(14,18,24,.96));padding:18px 18px 16px;box-shadow:0 20px 44px -26px rgba(0,0,0,.8)}
.rcard .chead{margin-bottom:12px}.rcard .ctitle{font-size:14.5px}
.rcard .rimg{height:82px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.rcard .rimg img{max-height:82px;max-width:76%;filter:drop-shadow(0 12px 22px rgba(0,0,0,.6))}
.rcard .feat{gap:9px}.rcard .feat li{font-size:13px}.rcard .ic{width:28px;height:28px;border-radius:8px}.rcard .ic svg{width:15px;height:15px}
.herobox{text-align:center;position:relative;padding-top:6px}
.herobox::before{content:"";position:absolute;inset:2% 4% 8%;background:radial-gradient(56% 56% at 50% 48%,rgba(55,225,255,.22),rgba(46,107,255,.12) 42%,transparent 72%);filter:blur(4px)}
.herobox img{position:relative;display:block;width:100%;max-width:520px;margin-left:auto;margin-right:auto;filter:drop-shadow(0 26px 50px rgba(0,0,0,.7))}
.herobox .hl{position:relative;margin-top:6px;font-family:'Play',sans-serif;font-weight:700;font-size:14.5px;color:#cfe0ff}
.hbmbox .feat{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}.hbmbox .feat li{font-size:12.5px}.hbmbox .ic{width:26px;height:26px}.hbmbox .ic svg{width:14px;height:14px}
.apbox .row{display:flex;justify-content:space-between;gap:12px}
.apbox .m{flex:1;text-align:center}
.apbox .m .th{height:44px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.apbox .m .th img{max-height:44px;max-width:80%;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6))}
.apbox .m span{font-size:11.5px;font-weight:600;color:#cdd6e4;line-height:1.3;display:block}
@media(max-width:1024px){
 .hub{grid-template-columns:1fr 1fr;grid-template-areas:"hero hero" "ai chi" "soc uci" "hbm ap";align-items:stretch}
 .hub svg.wires{display:none}.herobox img{max-width:440px}
 .hub .cell>.rcard{height:100%}
}
@media(max-width:600px){
 .applications{padding:56px 18px 32px}
 .hub{grid-template-columns:1fr;gap:14px;grid-template-areas:"hero" "ai" "chi" "soc" "uci" "hbm" "ap";}
 .hub::after{content:"";position:absolute;left:50%;top:320px;bottom:60px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,var(--accent2),var(--accent-line),transparent);opacity:.45;z-index:0}
 .apbox .row{flex-wrap:wrap}.apbox .m{flex:0 0 46%}
 .herobox img{max-width:340px}
}
/* SECTION 2: Why H-PHY strip */
.why{position:relative;padding:24px 32px 96px;background:linear-gradient(180deg,#0b0e13,#0A0A0B)}
.whycard{border:1px solid var(--line);border-radius:var(--rlg);background:radial-gradient(120% 160% at 50% -20%,rgba(46,107,255,.10),transparent 60%),linear-gradient(180deg,var(--panel),#0c1016);padding:40px 28px 42px;box-shadow:0 30px 70px -46px rgba(0,0,0,.9)}
.whyhead{text-align:center;font-family:'Play',sans-serif;font-weight:700;font-size:clamp(22px,3vw,28px);margin-bottom:34px}
.whyhead .g{color:var(--accent)}
.whyrow{display:grid;grid-template-columns:repeat(6,1fr)}
.wi{padding:0 20px;text-align:center;border-left:1px solid var(--line)}
.wi:first-child{border-left:none}
.wi .chip2{width:58px;height:58px;border-radius:16px;background:var(--accent-soft);border:1px solid var(--accent-line);display:grid;place-items:center;margin:0 auto 16px;transition:transform var(--t),box-shadow var(--t)}
.wi .chip2 svg{width:30px;height:30px;stroke:var(--accent);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.wi:hover .chip2{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(46,107,255,.7)}
.wi h4{font-size:15px;font-weight:700;color:var(--accent);margin-bottom:8px;letter-spacing:-.01em}
.wi p{font-size:13px;line-height:1.5;color:var(--mut);font-weight:500}
@media(max-width:992px){.whyrow{grid-template-columns:repeat(3,1fr);gap:34px 0}.wi{border-left:none}}
@media(max-width:560px){.why{padding:16px 18px 72px}.whycard{padding:30px 18px}.whyrow{grid-template-columns:repeat(2,1fr);gap:30px 0}}

/* ── 한국어(/ko/): 제목 폰트 'Play' → 본문(Pretendard)과 동일 강제 (Play엔 한글 없음) ── */
html[lang="ko"]{--font-title:var(--font-body)}
html[lang="ko"] .eyebrow,
html[lang="ko"] h2.title,
html[lang="ko"] .herobox .hl,
html[lang="ko"] .whyhead{font-family:var(--font-body)}