/* Solar Page (Consulting) - built on top of mfg_page.css */

.sol-page{ --sol-blue:#0046FF; --sol-yellow:#FFD600; --sol-accent-1:var(--sol-blue); --sol-accent-2:var(--sol-yellow); }

/* 워터마크: 제조혁신 분위기 유지 + 본문 위로 올라오지 않도록 레이어 정리 */
.sol-page .sol-section{ position:relative; overflow:hidden; }
.sol-page .mfg-slider{ position:relative; z-index:1; }
.sol-page .mfg-reveal,
.sol-page .sol-cards,
.sol-page .sol-support,
.sol-page .sol-quote,
.sol-page .sol-value-grid,
.sol-page .mfg-tabs,
.sol-page .mfg-faq,
.sol-page .sol-form{ position:relative; z-index:1; }
.sol-page .sol-wm{ z-index:0; }

/* Hero */
.sol-page .sol-kicker{
  background: linear-gradient(135deg, rgba(0,70,255,.14), rgba(255,214,0,.14));
  border-color: rgba(0,70,255,.20);
  color: rgba(2,34,120,.92);
}
.sol-page .mfg-btn.primary{
  background: #0046FF;
  box-shadow: 0 16px 44px rgba(0,70,255,.26);
  color: #ffffff !important;
}
.sol-page .mfg-btn.primary *{ color: inherit !important; }
.sol-page .sol-primary-cta{ color:#ffffff !important; }
.sol-page .mfg-btn.primary:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 18px 58px rgba(0,70,255,.34), 0 0 0 6px rgba(0,70,255,.12);
}
.sol-page .mfg-dot{
  background: linear-gradient(135deg, rgba(0,70,255,.92), rgba(255,214,0,.92));
}
.sol-page .sol-subtle{ display:inline-block; color: rgba(15,23,42,.62); margin-left:.25rem; }

/* Cost cards */
.sol-cards{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1020px){
  .sol-cards{ grid-template-columns:1fr; }
}
.sol-card{
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 52px rgba(15,23,42,.06);
}
.sol-card-ico{ font-size: 22px; margin-bottom: 10px; }
.sol-card h3{ margin:0 0 8px; font-size: 16px; font-weight: 950; color:#0f172a; }
.sol-card p{ margin:0; color: rgba(15,23,42,.74); line-height:1.75; }

/* Support notices */
.sol-support{
  margin-top: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 18px 52px rgba(15,23,42,.06);
}
.sol-support-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.sol-support-head h3{ margin:0 0 6px; font-size:18px; font-weight: 950; color:#0f172a; }
.sol-support-head p{ margin:0; color: rgba(15,23,42,.70); line-height:1.7; max-width: 48rem; }
.sol-support-upd{ margin-top: 10px; color: rgba(15,23,42,.68); font-size: 13px; }
.sol-support-list{ margin: 12px 0 0; padding: 0; list-style: none; display:flex; flex-direction:column; gap:10px; }
.sol-support-list li{ padding: 12px 12px 10px; border-radius: 14px; border: 1px solid rgba(15,23,42,.08); background: rgba(248,250,252,.78); }
.sol-support-title{ display:inline-block; font-weight: 850; color:#0f172a; text-decoration:none; line-height:1.5; }
.sol-support-title:hover{ text-decoration: underline; }
.sol-support-meta{ margin-top: 6px; display:flex; flex-wrap:wrap; gap:10px 14px; color: rgba(15,23,42,.68); font-size: 12.5px; }
.sol-support-note{ margin: 10px 0 0; color: rgba(15,23,42,.64); font-size: 12.5px; }
.sol-support-empty{ margin-top: 10px; color: rgba(15,23,42,.70); }
.sol-support-empty a{ color:#0f172a; font-weight:800; }

/* Value section */
.sol-quote{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 52px rgba(15,23,42,.06);
  display:flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.sol-quote-mark{ font-size: 38px; line-height: 1; color: rgba(245,158,11,.50); font-weight: 900; }
.sol-quote-text{ color: rgba(15,23,42,.84); line-height:1.75; }

.sol-value-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: stretch; }
@media (max-width: 1020px){ .sol-value-grid{ grid-template-columns:1fr; } }
.sol-value-copy .mfg-sub{ font-size: 15.5px; line-height: 1.85; }
.sol-value-tags{ margin-top: 14px; display:flex; flex-wrap:wrap; gap: 10px; }
.sol-tag{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(34,197,94,.08));
  color: rgba(15,23,42,.78);
  font-weight: 800;
  font-size: 12.5px;
}
.sol-value-photo{ position:relative; border-radius: 18px; overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.sol-value-photo img{ width:100%; height:100%; object-fit:cover; display:block; min-height: 320px; }

/* CTA Form */
.sol-cta{ background: transparent; }
.sol-form{
  margin-top: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 52px rgba(15,23,42,.06);
}
.sol-form-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px){ .sol-form-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .sol-form-grid{ grid-template-columns: 1fr; } }
.sol-field{ display:flex; flex-direction:column; gap: 6px; }
.sol-field span{ color: rgba(15,23,42,.78); font-weight: 850; font-size: 13px; }
.sol-field span b{ color: rgba(0,70,255,.92); }
.sol-input, .sol-textarea{
  width:100%;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  padding: 12px 12px;
  background: #fff;
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease;
  font-size: 14px;
}
.sol-textarea{ min-height: 180px; resize: vertical; line-height: 1.7; }
.sol-input:focus, .sol-textarea:focus{ border-color: rgba(0,70,255,.45); box-shadow: 0 0 0 6px rgba(0,70,255,.10); }
.sol-field-full{ grid-column: 1 / -1; margin-top: 6px; }
.sol-actions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 14px; }
.sol-legal{ margin-top: 10px; color: rgba(15,23,42,.62); font-size: 12.5px; line-height: 1.7; }


/* CTA: checklist cards */
.sol-cta-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 980px){
  .sol-cta-grid{ grid-template-columns: 1fr; }
}
.sol-cta-card{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.86);
  border-radius: 18px;
  padding: 14px 14px 12px;
  box-shadow: 0 18px 52px rgba(15,23,42,.05);
}
.sol-cta-card h3{
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 950;
  color: #0f172a;
}
.sol-cta-card ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(15,23,42,.74);
  line-height: 1.8;
}

/* Form status */
.sol-form-status{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.82);
  color: rgba(15,23,42,.78);
  line-height: 1.7;
}
.sol-form-status.ok{
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.08);
}
.sol-form-status.err{
  border-color: rgba(239,68,68,.28);
  background: rgba(239,68,68,.06);
}
.sol-form.is-submitting{ opacity: .92; pointer-events: none; }


/* ===== 2026-01-03: Premium hero + highlight ===== */
.sol-hero{ position:relative; }
.sol-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 22% 12%, rgba(255,214,0,.16), transparent 62%),
    radial-gradient(900px 520px at 78% 22%, rgba(0,70,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.00));
  pointer-events:none;
  z-index:0;
}
.sol-hero::after{
  content:"";
  position:absolute; inset:-40px -40px -60px -40px;
  background-image: url("/assets/img/solar/hero_flow.svg");
  background-repeat:no-repeat;
  background-position: 50% calc(50% + var(--sol-hero-parallax, 0px));
  background-size: cover;
  opacity:.92;
  pointer-events:none;
  z-index:0;
  filter: saturate(1.05);
}
.sol-hero .mfg-wrap,
.sol-hero .mfg-hero-grid{ position:relative; z-index:1; }

.sol-hl{
  display:inline-block;
  padding: 0 .18em;
  border-radius: .5em;
  font-weight: 950;
}
.sol-hl-blue{ color:#0046FF; background: rgba(0,70,255,.08); box-shadow: inset 0 -10px 0 rgba(255,214,0,.20); }
.sol-hl-yellow{ color:#1e293b; background: rgba(255,214,0,.22); box-shadow: inset 0 -10px 0 rgba(0,70,255,.10); }

.sol-page .mfg-title{ letter-spacing: -.02em; }
.sol-page .mfg-sub{ font-size: 16px; line-height: 1.85; }
@media (max-width: 640px){
  .sol-page .mfg-sub{ font-size: 15px; }
}

/* ===== Profit flow infographic ===== */
.sol-profitflow{
  margin-top: 18px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 18px 52px rgba(15,23,42,.06);
}
.sol-mini-title{ margin:0 0 12px; font-size: 16px; font-weight: 950; color:#0f172a; }
.sol-flow{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sol-flow-step{
  position:relative;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.96);
  border-radius: 18px;
  padding: 16px 14px 14px;
  box-shadow: 0 14px 36px rgba(15,23,42,.05);
}
.sol-flow-badge{
  position:absolute; top:12px; right:12px;
  width: 28px; height: 28px;
  border-radius: 999px;
  display:grid; place-items:center;
  font-weight: 950;
  color:#0f172a;
  background: rgba(255,214,0,.38);
  border: 1px solid rgba(0,70,255,.12);
}
.sol-flow-ico{ font-size: 22px; margin-bottom: 10px; }
.sol-flow-txt b{ display:block; font-weight: 950; color:#0f172a; margin-bottom: 6px; }
.sol-flow-txt span{ display:block; color: rgba(15,23,42,.72); line-height: 1.75; }
.sol-flow-note{ margin: 10px 0 0; color: rgba(15,23,42,.62); font-size: 13px; line-height: 1.6; }
@media (max-width: 860px){
  .sol-flow{ grid-template-columns: 1fr; }
}

/* ===== Multi-step form (UX) ===== */
.sol-steps{ margin-top: 8px; }
.sol-progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.10);
  overflow:hidden;
  margin: 0 0 14px;
}
.sol-progress-bar{
  height: 100%;
  border-radius: 999px;
  background: #0046FF;
  transition: width .25s ease;
}
.sol-step{ display:none; }
.sol-step.is-active{ display:block; }
.sol-step-title{ margin: 0 0 6px; font-size: 16px; font-weight: 950; color:#0f172a; }
.sol-step-lead{ margin: 0 0 14px; color: rgba(15,23,42,.72); line-height:1.75; }
.sol-step-hint{ margin-top: 12px; color: rgba(15,23,42,.62); font-size: 13px; line-height: 1.6; }

.sol-choice-block{ margin-top: 14px; }
.sol-q{ margin: 0 0 10px; font-weight: 950; color: rgba(15,23,42,.86); }
.sol-choice-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sol-choice{
  text-align:left;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.96);
  border-radius: 18px;
  padding: 14px 14px 13px;
  box-shadow: 0 14px 34px rgba(15,23,42,.05);
  cursor:pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.sol-choice b{ display:block; font-weight: 950; margin-bottom: 6px; color:#0f172a; }
.sol-choice span{ display:block; color: rgba(15,23,42,.70); line-height:1.6; font-size: 13px; }
.sol-choice:hover{ transform: translateY(-1px); box-shadow: 0 18px 46px rgba(15,23,42,.08); }
.sol-choice.is-selected{
  border-color: rgba(0,70,255,.38);
  box-shadow: 0 18px 52px rgba(0,70,255,.12), 0 0 0 6px rgba(0,70,255,.10);
}
@media (max-width: 640px){
  .sol-choice-grid{ grid-template-columns: 1fr; }
}

/* floating labels */
.sol-form-grid-float{ margin-top: 4px; }
.sol-float{
  position:relative;
  display:block;
}
.sol-float .sol-input,
.sol-float .sol-textarea{
  padding-top: 20px;
}
.sol-float label{
  position:absolute;
  left: 12px;
  top: 12px;
  color: rgba(15,23,42,.62);
  font-weight: 900;
  font-size: 13px;
  pointer-events:none;
  transition: transform .14s ease, color .14s ease, opacity .14s ease;
}
.sol-float .sol-opt{ font-weight: 850; color: rgba(15,23,42,.46); }
.sol-float .sol-input:focus + label,
.sol-float .sol-input:not(:placeholder-shown) + label,
.sol-float .sol-textarea:focus + label,
.sol-float .sol-textarea:not(:placeholder-shown) + label{
  transform: translateY(-10px) scale(.92);
  color: rgba(0,70,255,.78);
  opacity: .98;
}

.sol-float-full{ grid-column: 1 / -1; }

.sol-vicon{
  position:absolute;
  right: 12px;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:none;
  place-items:center;
  font-weight: 950;
  font-size: 14px;
}
.sol-float.is-valid .sol-vicon{
  display:grid;
  background: rgba(34,197,94,.14);
  color: rgba(21,128,61,.96);
}
.sol-float.is-invalid .sol-vicon{
  display:grid;
  background: rgba(239,68,68,.12);
  color: rgba(185,28,28,.96);
}
.sol-microcopy{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(0,70,255,.04);
  color: rgba(15,23,42,.72);
  line-height: 1.7;
  font-size: 13px;
}

.sol-actions-steps{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
}
.sol-actions-steps [data-step-prev]{
  opacity:.92;
}
.sol-actions-steps [data-step-prev][disabled]{
  opacity:.35;
  cursor:not-allowed;
}
.sol-actions-steps [data-step-next],
.sol-actions-steps [data-step-submit]{
  min-width: 220px;
}

/* 상담 폼 하단 버튼 가독성/대비 강화 */
.sol-actions-steps .mfg-btn{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  padding: 14px 18px;
  border-radius: 14px;
  line-height: 1.2;
}
.sol-actions-steps [data-step-prev]{
  background: rgba(255,255,255,.92);
  color: #0f172a;
  border: 1px solid rgba(15,23,42,.18);
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
}
.sol-actions-steps [data-step-prev]:hover{
  opacity: 1;
  transform: translateY(-1px);
}
.sol-actions-steps [data-step-next]{
  background: #0052FF;
  color: #ffffff;
}
.sol-actions-steps [data-step-next]:hover{
  background: #0046d6;
}
.sol-actions-steps [data-step-submit]{
  background: linear-gradient(90deg, #0052FF 0%, #00EDAF 100%);
  color: #ffffff;
  min-width: 360px;
}
.sol-actions-steps [data-step-submit]:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}
@media (max-width: 640px){
  .sol-actions-steps{
    flex-direction: column;
    align-items: stretch;
  }
  .sol-actions-steps [data-step-next],
  .sol-actions-steps [data-step-submit]{
    min-width: unset;
    width: 100%;
  }
}

/* success state */
.sol-success{
  margin-top: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.94);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 18px 52px rgba(15,23,42,.06);
}
.sol-success-badge{
  width: 40px; height: 40px;
  border-radius: 999px;
  display:grid; place-items:center;
  background: rgba(34,197,94,.16);
  color: rgba(21,128,61,.96);
  font-weight: 950;
  margin-bottom: 10px;
  animation: solPop .38s ease-out both;
}
@keyframes solPop{
  from{ transform: scale(.86); opacity:0; }
  to{ transform: scale(1); opacity:1; }
}
.sol-success-title{ font-weight: 950; color:#0f172a; font-size: 16px; margin-bottom: 6px; }
.sol-success-desc{ color: rgba(15,23,42,.72); line-height: 1.75; margin-bottom: 12px; }
.sol-success-links{ display:flex; gap: 10px; flex-wrap: wrap; }


/* ===== 2026-01-03 추가 반영(A안): Hero 오버레이/CTA 강조/데이터 시각화/폼 최소화 ===== */

/* 색상 가이드(Trust Blue & Solar Yellow) */
.sol-page{ --sol-blue:#0052CC; --sol-yellow:#FFC107; --sol-accent-1:var(--sol-blue); --sol-accent-2:var(--sol-yellow); }

/* Hero: 고해상도 이미지 + 블랙 오버레이(30~40%)로 가독성 확보 */
#solar-hero.sol-hero{
  position:relative;
  background:
    linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,.38)),
    url('/assets/img/solar/hero_main_20260103_20.jpg') center/cover no-repeat;
}
#solar-hero.sol-hero .mfg-title,
#solar-hero.sol-hero .mfg-sub{ color: rgba(255,255,255,.94); }
#solar-hero.sol-hero .sol-subtle{ color: rgba(255,255,255,.70); }
#solar-hero.sol-hero .sol-kicker{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.90);
}
#solar-hero.sol-hero .sol-hl-blue{ color:#fff; background: rgba(0,82,204,.22); box-shadow: inset 0 -10px 0 rgba(255,193,7,.24); }
#solar-hero.sol-hero .sol-hl-yellow{ color:#111827; background: rgba(255,193,7,.92); box-shadow:none; }

/* Hero CTA: 눈에 띄는 옐로우/오렌지 계열 + Hover Scale */
#solar-hero.sol-hero .sol-cta-btn{
  background: linear-gradient(135deg, #FFC107, #FFB300);
  color: #0b1220;
  box-shadow: 0 18px 60px rgba(255,193,7,.28);
  border: 1px solid rgba(255,255,255,.18);
}
#solar-hero.sol-hero .sol-cta-btn:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 22px 72px rgba(255,193,7,.34), 0 0 0 7px rgba(0,82,204,.16);
}

/* Hero 카피: 로드시 조금 더 또렷하게(Fade-in Up 강화) */
.sol-hero .mfg-reveal{ will-change: transform, opacity; }

/* 섹션 여백(White Space) 확대 */
.page-solar .mfg-section{ padding: 120px 0; }
@media (max-width: 720px){
  .page-solar .mfg-section{ padding: 92px 0; }
}

/* 필요성 섹션: 아이콘 카드 Stagger Reveal */
.sol-stagger .sol-icard{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .75s ease;
}
.sol-stagger.is-in .sol-icard{ opacity:1; transform: translateY(0); }
.sol-stagger.is-in .sol-icard:nth-child(1){ transition-delay: .00s; }
.sol-stagger.is-in .sol-icard:nth-child(2){ transition-delay: .06s; }
.sol-stagger.is-in .sol-icard:nth-child(3){ transition-delay: .12s; }
.sol-stagger.is-in .sol-icard:nth-child(4){ transition-delay: .18s; }
.sol-stagger.is-in .sol-icard:nth-child(5){ transition-delay: .24s; }
.sol-stagger.is-in .sol-icard:nth-child(6){ transition-delay: .30s; }

/* 프로세스: 탭 Hover 시 툴팁(간단 설명) */
.mfg-story-tabs .mfg-story-tab{ position:relative; }
.mfg-story-tabs .mfg-story-tab[data-tip]::after{
  content: attr(data-tip);
  position:absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  max-width: 240px;
  width: max-content;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(2,6,23,.86);
  color: rgba(255,255,255,.92);
  font-size: 12.5px;
  line-height: 1.55;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .18s ease;
  z-index: 50;
}
.mfg-story-tabs .mfg-story-tab[data-tip]::before{
  content:"";
  position:absolute;
  left:50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: rgba(2,6,23,.86);
  border-left: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
  rotate: 45deg;
  opacity: 0;
  transition: opacity .16s ease;
  z-index: 49;
}
@media (hover:hover){
  .mfg-story-tabs .mfg-story-tab:hover::after,
  .mfg-story-tabs .mfg-story-tab:hover::before{ opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* DATA: 대시보드 카드 */
.sol-data-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items: stretch; margin-top: 16px; }
@media (max-width: 1020px){ .sol-data-grid{ grid-template-columns: 1fr; } }
.sol-data-card{
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 18px 52px rgba(15,23,42,.06);
}
.sol-data-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 8px; }
.sol-data-head h3{ margin:0; font-size: 15px; font-weight: 950; color:#0f172a; }
.sol-mini-badge{ display:inline-flex; align-items:center; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(15,23,42,.10); background: rgba(248,250,252,.72); color: rgba(15,23,42,.70); font-weight: 850; font-size: 12px; }
.sol-data-note{ margin-top: 10px; color: rgba(15,23,42,.62); font-size: 12.5px; line-height: 1.65; }

.sol-data-side{ display:flex; flex-direction:column; gap: 14px; }
.sol-kpi-grid{ display:grid; grid-template-columns: 1fr; gap: 10px; }
.sol-kpi{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 14px 14px 12px;
  box-shadow: 0 18px 52px rgba(15,23,42,.05);
}
.sol-kpi-lbl{ color: rgba(15,23,42,.70); font-weight: 850; font-size: 12.5px; }
.sol-kpi-num{ margin-top: 6px; font-size: 28px; font-weight: 1000; letter-spacing: -.02em; color:#0f172a; display:flex; align-items: baseline; gap: 6px; }
.sol-kpi-num small{ font-size: 13px; color: rgba(15,23,42,.62); font-weight: 850; }
.sol-kpi-sub{ margin-top: 4px; color: rgba(15,23,42,.68); font-size: 12.5px; line-height: 1.6; }

.sol-compare{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1020px){ .sol-compare{ grid-template-columns: 1fr; } }
.sol-compare-col{
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 18px 52px rgba(15,23,42,.05);
}
.sol-compare-col h3{ margin: 0 0 10px; font-size: 15px; font-weight: 950; color:#0f172a; }
.sol-compare-col ul{ margin: 0; padding-left: 18px; color: rgba(15,23,42,.76); line-height: 1.8; }
.sol-compare-col.is-accent{
  border-color: rgba(0,82,204,.22);
  background: linear-gradient(135deg, rgba(0,82,204,.06), rgba(255,193,7,.08));
}
.sol-data-foot{ margin-top: 2px; }

/* 폼(최소 3개 필수) + 선택 영역 접기 */
.sol-form-grid-min{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px){ .sol-form-grid-min{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .sol-form-grid-min{ grid-template-columns: 1fr; } }

.sol-more{
  margin-top: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.74);
  border-radius: 18px;
  padding: 10px 12px;
}
.sol-more > summary{
  cursor: pointer;
  list-style: none;
  font-weight: 900;
  color: rgba(15,23,42,.78);
}
.sol-more > summary::-webkit-details-marker{ display:none; }
.sol-more[open] > summary{ margin-bottom: 10px; }
.sol-more-body{ padding-bottom: 4px; }

/* required inline validate 표시 */
.sol-float[data-validate="required"].is-valid .sol-vicon{ color: rgba(34,197,94,.95); }
.sol-float[data-validate="required"].is-invalid .sol-vicon{ color: rgba(239,68,68,.95); }


/* 전역 Primary 버튼 컬러를 Trust Blue로 통일(히어로 CTA는 별도) */
.sol-page .mfg-btn.primary{
  background: #0052CC;
  box-shadow: 0 16px 44px rgba(0,82,204,.26);
}
.sol-page .mfg-btn.primary:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 18px 58px rgba(0,82,204,.34), 0 0 0 6px rgba(255,193,7,.14);
}

/* Hero 장식 SVG는 너무 튀지 않게 톤 다운 */
.sol-hero::after{ opacity: .38; filter: saturate(1.05) brightness(1.06); }

/* Hero 비디오가 있을 때도 오버레이가 항상 적용되도록 ::before를 재정의 */
#solar-hero.sol-hero::before{
  background:
    linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,.38)),
    radial-gradient(1200px 700px at 70% 0%, rgba(255,193,7,.28), transparent 60%),
    radial-gradient(900px 500px at 20% 20%, rgba(0,82,204,.22), transparent 60%),
    radial-gradient(800px 600px at 40% 100%, rgba(2,6,23,.45), transparent 70%);
  opacity: 1;
}



/* ====== 2026 Premium Solar UX: Visual Hierarchy + Card/Hex + Contrast ====== */
.sol-page{
  --sol-blue:#0A2540;          /* Deep Blue */
  --sol-yellow:#FFC107;        /* Solar Yellow */
  --sol-orange:#FF5F00;        /* Bright Orange (CTA) */
  --sol-ink:#0F172A;
  --sol-bg:#F8FAFC;
}

/* 더 넓은 헤더 (solar 전용) */
.sol-page .nb-header-inner{
  max-width: 1360px;
  padding: 0 26px;
}

/* 섹션 여백(정보 과부하 방지) */
.sol-page .mfg-section{ padding: 120px 0; }
@media (max-width: 900px){
  .sol-page .mfg-section{ padding: 84px 0; }
}

/* 타이포 그래피 계층(제목/요약/본문) */
.sol-page .mfg-h2{
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.sol-page .mfg-lead{ font-size: 18px; line-height: 1.75; }
.sol-page .mfg-sub{ font-size: 17px; line-height: 1.75; }

/* Hero: 이미지/영상 위 대비 강화 + 배경 고정 느낌 */
.sol-hero{
  position: relative;
  /* 사용자 제공 메인 사진 적용 */
  background: url("/assets/img/solar/hero_main_20260103_20.jpg") center/cover no-repeat;
  background-attachment: fixed;
}
@media (max-width: 900px){
  .sol-hero{ background-attachment: scroll; }
}
.sol-hero::before{
  content:"";
  position:absolute;
  inset:0;
  /* 텍스트 가독성용 오버레이(하단이 더 진하게) */
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.52) 100%);
  z-index:0;
}
.sol-hero .mfg-wrap,
.sol-hero .mfg-hero-grid{ position:relative; z-index:1; }

.sol-hero-title{
  font-size: 54px;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
@media (max-width: 900px){
  .sol-hero-title{ font-size: 40px; }
}
.sol-typing{
  display:inline-block;
  white-space: pre-wrap;
}
.sol-typing.is-typing::after{
  content:"|";
  margin-left: 2px;
  opacity: .75;
  animation: solCaret .9s steps(1,end) infinite;
}
@keyframes solCaret{ 50%{ opacity:0; } }

/* Hero CTA: 오렌지로 강한 행동 유도 + Hover Scale + Pulse */
.sol-cta-btn{
  background: linear-gradient(90deg, var(--sol-orange), #FF8A00);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 44px rgba(255,95,0,.28);
}
.sol-cta-btn:hover{
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 22px 60px rgba(255,95,0,.34);
}
.sol-cta-btn:not(:hover){
  animation: solPulse 2.8s ease-in-out infinite;
}
@keyframes solPulse{
  0%, 100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-1px) scale(1.02); }
}

/* Visual Anchor: 숫자/지표를 크게 */
.sol-stat-num{ font-size: 40px; font-weight: 950; color: var(--sol-yellow); }
.sol-kpi-num{
  font-size: 44px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--sol-yellow);
}
.sol-kpi-num small{ font-size: 16px; opacity: .92; margin-left: 4px; }

/* Card 레이아웃: 여백 1.5배 + 그림자 */
.sol-card{
  padding: 24px 22px 20px;
  box-shadow: 0 22px 70px rgba(15,23,42,.08);
}
.sol-cards{ gap: 18px; }
@media (max-width: 900px){
  .sol-cards{ gap: 14px; }
}

/* Why Us: Hex(육각형) 박스 + Hover Lift */
.sol-vp-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 900px){
  .sol-vp-grid{ grid-template-columns: 1fr; gap: 12px; }
}
.sol-vp-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  padding: 20px 22px 18px;
  min-height: 172px;
  box-shadow: 0 18px 56px rgba(15,23,42,.08);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.sol-hex{
  /* HEX 클립은 텍스트가 잘려 보이는 이슈가 있어 프리미엄 카드형으로 통일 */
  clip-path: none;
  border-radius: 20px;
}
.sol-vp-ico{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,193,7,.12);
  color: var(--sol-blue);
  margin-bottom: 10px;
}
.sol-vp-card h3{ margin: 0 0 8px; font-size: 18px; font-weight: 950; color: var(--sol-ink); letter-spacing: -0.02em; }
.sol-vp-card p{ margin: 0; color: rgba(15,23,42,.78); line-height: 1.7; font-size: 14.5px; }
.sol-vp-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 26px 78px rgba(15,23,42,.12);
  background: rgba(255,255,255,.96);
}

/* Stagger Reveal (카드 순차 등장) */
.sol-stagger .sol-vp-card{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.sol-stagger.is-in .sol-vp-card{ opacity: 1; transform: translateY(0); }
.sol-stagger.is-in .sol-vp-card:nth-child(1){ transition-delay: .05s; }
.sol-stagger.is-in .sol-vp-card:nth-child(2){ transition-delay: .25s; }
.sol-stagger.is-in .sol-vp-card:nth-child(3){ transition-delay: .45s; }

/* Reviews: Infinite Carousel */
.sol-carousel{
  margin-top: 18px;
  border-radius: 24px;
  background: rgba(15,23,42,.65);
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
  padding: 14px 14px;
}
.sol-carousel-track{
  --marquee-x: -50%;
  display:flex;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  animation: solMarquee 38s linear infinite;
  will-change: transform;
}
.sol-carousel:hover .sol-carousel-track{ animation-play-state: paused; }
.sol-carousel-item{
  width: 280px;
  height: 168px;
  border-radius: 18px;
  overflow:hidden;
  flex: 0 0 auto;
  box-shadow: 0 14px 44px rgba(0,0,0,.22);
}
.sol-carousel-item img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.02) contrast(1.02);
}
@media (max-width: 900px){
  .sol-carousel-item{ width: 220px; height: 140px; }
}
@keyframes solMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(var(--marquee-x)); }
}
@media (prefers-reduced-motion: reduce){
  .sol-carousel-track{ animation: none; }
}

/* Form Trust Card */
.sol-form-trust{ margin: 18px 0 0; }
.sol-form-trust-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 22px;
  padding: 16px 16px 14px;
  box-shadow: 0 16px 52px rgba(15,23,42,.08);
}
.sol-form-trust-title{
  font-weight: 900;
  color: var(--sol-ink);
  margin-bottom: 10px;
}
.sol-form-trust-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 900px){
  .sol-form-trust-grid{ grid-template-columns: 1fr; }
}
.sol-form-trust-item{
  background: rgba(248,250,252,.95);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 12px;
}
.sol-form-trust-num{
  font-size: 24px;
  font-weight: 950;
  color: var(--sol-blue);
  letter-spacing: -0.02em;
}
.sol-form-trust-lbl{ margin-top: 2px; font-size: 13px; color: rgba(15,23,42,.72); }
.sol-form-trust-note{ margin-top: 8px; font-size: 12px; color: rgba(15,23,42,.60); }

.sol-page{ background: var(--sol-bg); }

/* Hero 에너지 플로우 SVG는 배경을 방해하지 않도록 약하게 */
.sol-hero::after{ opacity: .18; }

.sol-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }

.sol-br{ display:block; height:8px; }


/* ======================================================================
   2026 Solar Premium Overrides (emoji-free / consistent hierarchy)
   - Design System: Deep Navy (#0F172A), Solar Gold (#EAB308), Slate (#64748B), CTA Orange (#F97316)
   ====================================================================== */

.sol-page{
  --sol-navy:#0F172A;
  --sol-gold:#EAB308;
  --sol-slate:#64748B;
  --sol-bg:#F8FAFC;
  --sol-cta:#F97316;
  --sol-blue:#0052CC;
  --sol-yellow: var(--sol-gold);
  --sol-ink: var(--sol-navy);
}

/* Header: dark glass (solar only) */
body.page-solar #nbHeader.nb-header{
  background: rgba(13,17,23,0.80) !important;
  backdrop-filter: blur(15px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(160%) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
body.page-solar #nbHeader.nb-header.is-scrolled{
  background: rgba(13,17,23,0.88) !important;
  backdrop-filter: blur(15px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(160%) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.16) !important;
}

body.page-solar .nb-header-inner{
  max-width: 1200px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Hero overlay + subtle zoom */
#solar-hero.sol-hero::before{
  background: linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,.42)) !important;
}
.sol-hero-video{
  transform: scale(1.06);
  animation: solKenBurns 26s ease-in-out infinite;
  will-change: transform;
}
@keyframes solKenBurns{
  0%{ transform: scale(1.06) translateY(0); }
  50%{ transform: scale(1.12) translateY(-1.5%); }
  100%{ transform: scale(1.06) translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .sol-hero-video{ animation: none; transform: none; }
}

/* Hero trust pills (SVG check) */
.sol-hero-trust{ gap: 10px; }
.sol-trust-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(15,23,42,.22);
  color: rgba(255,255,255,.92);
  font-weight: 750;
  font-size: 14px;
}
.sol-mini-ico{ width: 18px; height: 18px; color: var(--sol-gold); }

/* CTA: orange + invert hover */
.sol-cta-btn{
  background: var(--sol-cta) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 50px rgba(249,115,22,.28) !important;
}
.sol-cta-btn:hover{
  background: rgba(255,255,255,.98) !important;
  color: var(--sol-navy) !important;
  border-color: rgba(255,255,255,.75) !important;
  box-shadow: 0 22px 60px rgba(15,23,42,.16) !important;
}
.sol-cta-btn:active{ transform: translateY(0) scale(.99); }

/* Reveal: add blur for premium feel (solar only) */
.sol-page .mfg-reveal{
  filter: blur(10px);
  transition: filter .8s cubic-bezier(.25,.1,.25,1);
}
.sol-page .mfg-reveal.is-in{ filter: blur(0); }
@media (prefers-reduced-motion: reduce){
  .sol-page .mfg-reveal{ filter: none; transition: none; }
}

/* SVG icon system */
.sol-ico, .sol-success-ico, .mfg-story-arrow-ico{
  width: 26px;
  height: 26px;
  display: block;
}
.sol-ico-lg{ width: 28px; height: 28px; }
.mfg-story-arrow-ico{ width: 20px; height: 20px; }

/* Icon containers */
.sol-i3d{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(234,179,8,.14);
  border: 1px solid rgba(234,179,8,.22);
  color: var(--sol-gold);
  box-shadow: 0 16px 44px rgba(15,23,42,.10);
}
.sol-card-ico{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(0,82,204,.06);
  border: 1px solid rgba(15,23,42,.08);
  color: var(--sol-blue);
}
.sol-flow-ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(234,179,8,.12);
  border: 1px solid rgba(234,179,8,.18);
  color: var(--sol-gold);
}

/* Section 2 icon grid */
.sol-icon-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.sol-icard{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 44px rgba(15,23,42,.08);
}
.sol-icard h3{
  margin: 10px 0 6px;
  font-size: 16px;
  letter-spacing: -.01em;
}
.sol-icard p{ color: rgba(100,116,139,.98); }

@media (max-width: 980px){
  .sol-icon-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .sol-icon-grid{ grid-template-columns: 1fr; }
}

/* Process: use vertical timeline as primary, hide desktop story slider (keeps code for later) */
#solar-process [data-mfg-story]{ display: none !important; }

.sol-process-mobile{
  max-width: 980px;
  margin: 18px auto 0;
}

.sol-timeline{
  position: relative;
  padding-left: 52px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  --sol-tl-p: 0;
}
.sol-timeline::before{
  content: "";
  position: absolute;
  left: 22px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(15,23,42,.12);
  border-radius: 2px;
}
.sol-timeline::after{
  content: "";
  position: absolute;
  left: 22px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom, var(--sol-gold), var(--sol-gold));
  border-radius: 2px;
  transform-origin: top;
  transform: scaleY(var(--sol-tl-p));
}

.sol-timeline details{
  position: relative;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(15,23,42,.08);
  overflow: hidden;
}
.sol-timeline details::before{
  content: "";
  position: absolute;
  left: -40px;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  border: 2px solid rgba(234,179,8,.35);
  box-shadow: 0 10px 24px rgba(15,23,42,.12);
}
.sol-timeline details[open]::before{
  background: var(--sol-gold);
  border-color: rgba(234,179,8,.85);
}

.sol-timeline summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 16px 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: rgba(15,23,42,.96);
}
.sol-timeline summary::-webkit-details-marker{ display: none; }
.sol-timeline .sol-step{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  color: rgba(15,23,42,.92);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(234,179,8,.18);
  border: 1px solid rgba(234,179,8,.25);
}
.sol-tdesc{
  padding: 0 16px 16px 14px;
  color: rgba(100,116,139,.96);
  line-height: 1.6;
}

/* Form: minimal underline inputs + line expansion + SVG validation */
.sol-form-grid-min .sol-input{
  border: none !important;
  border-bottom: 1px solid rgba(100,116,139,.35) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 18px 44px 14px 14px !important;
}
.sol-form-grid-min .sol-input:focus{
  box-shadow: none !important;
  border-bottom-color: rgba(15,23,42,.55) !important;
}
.sol-form-grid-min .sol-float{
  position: relative;
}
.sol-form-grid-min .sol-float::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--sol-navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.25,.1,.25,1);
  opacity: .75;
}
.sol-form-grid-min .sol-float:focus-within::after{
  transform: scaleX(1);
}

.sol-vicon{
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(100,116,139,.75) !important;
}
.sol-vicon::before{
  content: "";
  width: 14px;
  height: 14px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='3'/%3E%3Cpath d='M8.6 12.3l2.1 2.1 4.9-5.2' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%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'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='3'/%3E%3Cpath d='M8.6 12.3l2.1 2.1 4.9-5.2' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sol-float.is-invalid .sol-vicon::before{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l10 18H2L12 3Z' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M12 9v5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M12 17h.01' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%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'%3E%3Cpath d='M12 3l10 18H2L12 3Z' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M12 9v5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M12 17h.01' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sol-float.is-valid .sol-vicon{ color: rgba(34,197,94,.95) !important; }
.sol-float.is-invalid .sol-vicon{ color: rgba(239,68,68,.95) !important; }

/* Submit button shine */
.sol-submit{
  position: relative;
  overflow: hidden;
}
.sol-submit::before{
  content: "";
  position: absolute;
  top: -40%;
  left: -30%;
  width: 40%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(18deg) translateX(-120%);
  opacity: .0;
  pointer-events: none;
}
.sol-submit:hover::before{
  animation: solShine 1.2s ease-in-out;
  opacity: .95;
}
@keyframes solShine{
  0%{ transform: rotate(18deg) translateX(-120%); opacity: .0; }
  25%{ opacity: .65; }
  100%{ transform: rotate(18deg) translateX(260%); opacity: 0; }
}

/* =======================================================================
   2026 Solar Spec Patch (UX / 신뢰도 / 가독성) - 2026-01-03
   - Header z-index + glass
   - Hero: Black gradient overlay, main-title 56px+, CTA Solar Yellow
   - Cards: white + border + shadow
   - Stagger: 0.2s 간격
   ======================================================================= */

body.page-solar{
  line-height: 1.6;
}

/* Header: always on top, separated from content */
body.page-solar .nb-header{
  z-index: 1000 !important;
}
body.page-solar .nb-header.is-scrolled{
  background: rgba(13,17,23,0.88) !important;
  -webkit-backdrop-filter: blur(15px) saturate(160%) !important;
  backdrop-filter: blur(15px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* Hero: premium contrast + clarity */
#solar-hero.sol-hero{
  background: url('/assets/img/solar/hero_main_20260103_20.jpg') center/cover no-repeat !important;
}
#solar-hero.sol-hero::before{
  background: linear-gradient(to top, rgba(0,0,0,0.60), rgba(0,0,0,0.00)) !important;
}
.page-solar .sol-hero-grid{
  grid-template-columns: 1fr !important;
}
.page-solar .main-title{
  font-size: clamp(44px, 5.4vw, 62px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.page-solar .sol-word-gold{
  color: var(--sol-gold);
}

/* CTA: Solid Solar Yellow + Invert Hover */
#solar-hero .sol-cta-btn{
  background: #FFB800 !important;
  color: #0F172A !important;
  border: 1px solid rgba(255,184,0,0.35) !important;
  box-shadow: 0 14px 40px rgba(255,184,0,0.18);
}
#solar-hero .sol-cta-btn:hover{
  background: #0F172A !important;
  color: #FFB800 !important;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 18px 54px rgba(0,0,0,0.22);
}

/* Ken Burns Effect: 10s scale(1.1) */
.sol-hero-video{
  animation: solKenBurns 10s ease-in-out infinite !important;
}
@keyframes solKenBurns{
  0%{ transform: scale(1); }
  100%{ transform: scale(1.1); }
}

/* Value Cards: spec border/shadow */
.sol-icard{
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10) !important;
}

/* Stagger Reveal: 0.2s gap */
.sol-stagger.is-in .sol-icard{ transition-delay: 0s !important; }
.sol-stagger.is-in .sol-icard:nth-child(1){ transition-delay: 0.0s !important; }
.sol-stagger.is-in .sol-icard:nth-child(2){ transition-delay: 0.2s !important; }
.sol-stagger.is-in .sol-icard:nth-child(3){ transition-delay: 0.4s !important; }
.sol-stagger.is-in .sol-icard:nth-child(4){ transition-delay: 0.6s !important; }

/* Timeline active step highlight */
.sol-timeline details.is-active .sol-step{
  color: var(--sol-gold);
}

/* =======================================================================
   2026 Solar Visual Hierarchy Patch (Glossary / Process / Flow Diagram)
   - 3-column glossary card grid (max 1200)
   - Sticky process rail + scroll-activated cards
   - Interactive flow diagram (line icons + dashed flow + tooltip)
   - Smooth scroll + reduced motion safeguards
   ======================================================================= */

/* 초기 로딩 시 스크롤 위치가 복원되며 "하단→상단"으로 움직이는 현상 방지를 위해
   전역 smooth scroll은 사용하지 않습니다. (필요한 구간은 JS에서 개별 처리) */
html{ scroll-behavior: auto; }

/* ---------- Glossary: Card Grid (3 columns) ---------- */
#solar-glossary .sol-glossary-grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}
@media (max-width: 1024px){
  #solar-glossary .sol-glossary-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #solar-glossary .sol-glossary-grid{ grid-template-columns: 1fr; gap: 16px; }
}

.sol-term-card{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  padding: 22px 22px 20px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.sol-term-card:hover{
  transform: translateY(-8px);
  border-color: rgba(234,179,8,0.45);
  box-shadow: 0 18px 46px rgba(15,23,42,0.10);
}
.sol-term-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.sol-term-title{
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1A1A1A;
}
.sol-term-tag{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sol-gold);
  background: rgba(234,179,8,0.12);
  border: 1px solid rgba(234,179,8,0.20);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.sol-term-body{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #666666;
}

/* ---------- Process: Sticky rail + cards ---------- */
#solar-process .sol-pro-title{
  font-weight: 800;
  letter-spacing: -0.02em;
}
#solar-process .sol-pro-hl{ color: var(--sol-gold); }

.sol-process-scroll{
  margin-top: 28px;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 860px){
  .sol-process-scroll{ grid-template-columns: 1fr; }
  .sol-process-rail{ display: none; }
}

.sol-process-rail{
  position: sticky;
  top: 92px;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.sol-process-nums{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sol-pnum{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #0F172A;
  font-weight: 800;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.sol-pnum:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(15,23,42,0.10); }
.sol-pnum.is-active{
  background: rgba(0,82,255,0.08);
  border-color: rgba(0,82,255,0.28);
  color: #0052FF;
  box-shadow: 0 12px 34px rgba(0,82,255,0.12);
}

.sol-process-line{
  width: 4px;
  height: 260px;
  background: rgba(15,23,42,0.10);
  border-radius: 999px;
  overflow: hidden;
}
.sol-process-line-fill{
  display: block;
  width: 100%;
  height: 0%;
  border-radius: 999px;
  background: linear-gradient(180deg, #0052FF 0%, rgba(234,179,8,0.90) 100%);
  transition: height 0.35s ease;
}

.sol-process-cards{
  display: grid;
  gap: 18px;
}

.sol-pstep{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(15,23,42,0.06);
  padding: 22px 24px;
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sol-pstep.is-in{
  opacity: 1;
  transform: translateX(0);
  transition-delay: var(--d, 0s);
}
.sol-pstep:hover{
  transform: translateX(0) translateY(-6px);
  border-color: rgba(0,82,255,0.20);
  box-shadow: 0 18px 44px rgba(0,82,255,0.12);
}

.sol-phead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.sol-phead h3{
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0F172A;
}
.sol-pbadge{
  font-size: 12px;
  font-weight: 700;
  color: #0052FF;
  background: rgba(0,82,255,0.08);
  border: 1px solid rgba(0,82,255,0.16);
  padding: 4px 10px;
  border-radius: 999px;
}
.sol-pdesc{
  margin: 0 0 12px;
  color: rgba(15,23,42,0.72);
  line-height: 1.65;
}
.sol-plist{
  margin: 0;
  padding-left: 18px;
  color: rgba(15,23,42,0.72);
}
.sol-plist li{ margin: 6px 0; }

/* ---------- Flow Diagram: Interactive line icons ---------- */
/* (중요) 프로세스 섹션의 .sol-flow(3카드 그리드)와 클래스명이 겹치므로,
   발전 흐름 카드 컨테이너는 .sol-energyflow 로 스타일을 적용합니다. */
.sol-energyflow{
  margin-top: 18px;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(15,23,42,0.06);
  padding: 22px;
  overflow: visible;
}
.sol-flow-title{
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0F172A;
}
.sol-flow-sub{
  margin: 6px 0 16px;
  color: rgba(100,116,139,0.95);
  /* 전역 word-break 영향으로 "해 → ..." 문구가 세로로 깨지는 현상 방지 */
  word-break: keep-all;
}

/* 데스크톱에서 폭 부족으로 줄바꿈이 과도하게 발생하는 현상 방지 */
@media (min-width: 768px){
  /* 일부 공통 스타일에서 word-break/white-space가 덮이는 경우가 있어 강제 */
  .sol-flow-sub{ white-space: nowrap !important; }
}

/* Flow card: 레이아웃은 "상단 헤더 + 하단 도식"(세로 스택)으로 유지 */
.sol-energyflow{
  display: block;
}

/* Flow SVG: 화면에서 더 잘 보이도록 살짝 확대 */
.sol-flow-svg{ transform: scale(1.10); transform-origin: center; }
@media (max-width: 980px){
  .sol-flow-svg{ transform: scale(1.02); }
}

.sol-flow-tooltip{ z-index: 20; }

.sol-flow-wrap{
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.06);
  background: linear-gradient(180deg, rgba(248,250,252,1) 0%, rgba(255,255,255,1) 100%);
  padding: 14px 12px;
  /* 툴팁이 카드 밖으로 나가도 잘리지 않도록 */
  overflow: visible;
}

/* Skeleton (very subtle): removed when .is-ready is set by JS */
.sol-flow-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,23,42,0.03), rgba(15,23,42,0.01), rgba(15,23,42,0.03));
  background-size: 220% 100%;
  animation: solSkeleton 1.6s ease-in-out infinite;
  opacity: 0.0;
  pointer-events: none;
}
.sol-flow-wrap:not(.is-ready)::after{ opacity: 1; }
@keyframes solSkeleton{
  0%{ background-position: 0% 0; }
  100%{ background-position: 200% 0; }
}

.sol-flow-svg{
  /* 화면에서 도식이 너무 작아 보이지 않도록: 높이 기준으로 키우되, 폭은 컨테이너에 맞춤 */
  height: 220px;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  overflow: visible;
}

@media (max-width: 820px){
  .sol-flow-svg{ height: 190px; }
}
@media (max-width: 520px){
  .sol-flow-svg{ height: 170px; }
}

.sol-flow-glow{
  stroke: rgba(234,179,8,0.25);
  stroke-width: 9;
  fill: none;
  stroke-linecap: round;
}
.sol-flow-dash{
  stroke: url(#solFlowGrad);
  stroke-width: 3.5;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 10 16;
  animation: solDash 2.2s linear infinite;
}
@keyframes solDash{ to{ stroke-dashoffset: -52; } }

.sol-flow-node{
  cursor: pointer;
  outline: none;
}
.sol-flow-node .sol-node-card{
  fill: rgba(255,255,255,0.95);
  stroke: rgba(15,23,42,0.12);
  stroke-width: 1;
  filter: drop-shadow(0 10px 24px rgba(15,23,42,0.10));
}
.sol-flow-node .sol-node-ico{
  stroke: rgba(15,23,42,0.78);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sol-flow-node .sol-node-label{
  fill: rgba(15,23,42,0.80);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sol-flow-node:hover .sol-node-card,
.sol-flow-node:focus .sol-node-card{
  stroke: rgba(0,82,255,0.28);
}
.sol-flow-node:hover .sol-node-ico,
.sol-flow-node:focus .sol-node-ico{
  stroke: rgba(0,82,255,0.85);
}

.sol-sun-glow{
  filter: drop-shadow(0 0 12px rgba(234,179,8,0.55));
  animation: solSunGlow 1.8s ease-in-out infinite;
}
@keyframes solSunGlow{
  0%,100%{ filter: drop-shadow(0 0 10px rgba(234,179,8,0.45)); }
  50%{ filter: drop-shadow(0 0 16px rgba(234,179,8,0.75)); }
}

.sol-pulse{
  fill: rgba(234,179,8,0.18);
  transform-origin: center;
  animation: solPulse 1.8s ease-out infinite;
}
@keyframes solPulse{
  0%{ opacity: 0; transform: scale(0.85); }
  30%{ opacity: 1; }
  100%{ opacity: 0; transform: scale(1.35); }
}

.sol-flow-tooltip{
  position: absolute;
  z-index: 60;
  left: 50%;
  top: 10px;
  transform: translate(-50%, -100%);
  background: rgba(15,23,42,0.95);
  color: #ffffff;
  font-size: 13px;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(15,23,42,0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.sol-flow-tooltip.is-on{
  opacity: 1;
  transform: translate(-50%, -112%);
}

@media (prefers-reduced-motion: reduce){
  .sol-flow-dash{ animation: none; }
  .sol-pulse{ animation: none; opacity: 0.25; }
  .sol-sun-glow{ animation: none; }
  .sol-term-card, .sol-pstep, .sol-pnum{ transition: none !important; }
}

/* ==========================================================
   HERO: 최상단 메인 사진 교체(요청 이미지)
   ========================================================== */
#solar-hero.sol-hero{
  /* 캐시 방지용 쿼리 포함 */
  background-image: url("/assets/img/solar/hero_main_20260103_20.jpg?v=20260103_20");
  background-size: cover;
  /* 패널이 하단에 있는 사진이라 하단을 조금 더 보여주도록 */
  background-position: center 72%;
  background-repeat: no-repeat;
}
/* 동영상이 있더라도 메인 이미지를 우선 노출 */
#solar-hero.sol-hero .sol-hero-video{ display: none !important; }
/* 가독성 오버레이(하단 진하게) */
#solar-hero.sol-hero::before{
  background: linear-gradient(180deg, rgba(15,23,42,.70) 0%, rgba(15,23,42,.50) 48%, rgba(15,23,42,.12) 100%) !important;
  opacity: 1 !important;
}
/* 기존 패턴/도형 오버레이 제거 */
#solar-hero.sol-hero::after{
  background-image: none !important;
  opacity: 0 !important;
}


/* v20 overrides: flow subtitle wrapping + step buttons contrast */
@media (min-width: 768px){
  .sol-flow-sub{ white-space: nowrap !important; word-break: keep-all !important; }
}
@media (max-width: 767.98px){
  .sol-flow-sub{ white-space: normal !important; }
}

.sol-step-actions .mfg-btn{
  min-height: 46px;
  padding: 0 18px;
  font-weight: 700;
  font-size: 15px;
  border-radius: 12px;
}
.sol-step-actions .mfg-btn:not(.primary){
  background: #ffffff;
  border: 1px solid rgba(148,163,184,0.55);
  color: #0F172A;
}
.sol-step-actions .mfg-btn.primary{
  background: #0052FF;
  color: #ffffff;
  border: 1px solid rgba(0,82,255,0.25);
}
.sol-step-actions .mfg-btn.primary:hover{
  filter: brightness(0.95);
}
.sol-step-actions .sol-submit{
  background: #0052FF !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}
.sol-page .sol-primary-cta{
  color:#ffffff !important;
}


/* v20: FLOW 텍스트 줄바꿈/세로깨짐 방지 */
#solar-benefit .sol-flow-sub{white-space: nowrap !important; word-break: keep-all !important;}
@media (max-width: 720px){#solar-benefit .sol-flow-sub{white-space: normal !important;}}

/* v20: 폼 버튼 가독성 개선 */
.sol-step-actions .mfg-btn{font-weight:700; min-height:46px;}
.sol-step-actions .mfg-btn.primary{color:#fff !important;}
.sol-step-actions .mfg-btn:not(.primary){background:#fff; color:#0F172A; border:1px solid #CBD5E1;}
.sol-step-actions .mfg-btn:not(.primary):hover{border-color:#94A3B8;}
.sol-page .sol-primary-cta{color:#fff !important;}


/* =============================
   v20 PATCH: 가독성/흐름/버튼/도식 개선
   ============================= */

/* HERO: 요청 이미지(blue-sky) 기준 포커스 */
#solar-hero.sol-hero{ background-position: center 80% !important; }

/* ENERGY FLOW: 도식 크게 + 툴팁 가시성 */
.sol-energyflow{ display: grid !important; grid-template-columns: 320px 1fr !important; gap: 24px !important; align-items: center !important; }
@media (max-width: 900px){ .sol-energyflow{ grid-template-columns: 1fr !important; } }
.sol-flow-wrap{ overflow: visible !important; }
.sol-flow-svgwrap{ overflow: visible !important; }
.sol-flow-svg{ width: 100% !important; height: auto !important; max-height: 260px !important; }
@media (max-width: 520px){ .sol-flow-svg{ max-height: 210px !important; } }
.sol-flow-tooltip{ z-index: 60 !important; }
.sol-flow-sub{ white-space: nowrap !important; word-break: keep-all !important; }
@media (max-width: 900px){ .sol-flow-sub{ white-space: normal !important; } }

/* VALUE PROP 카드: 텍스트 대비/크기 상향 */
.sol-vp-title{ font-size: 18px !important; }
.sol-vp-desc{ font-size: 15px !important; color: #475569 !important; -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important; }

/* FORM 버튼 가독성 */
.sol-step-actions .mfg-btn{ min-height: 48px !important; padding: 12px 18px !important; font-size: 15px !important; font-weight: 700 !important; }
.sol-step-actions .mfg-btn.primary{ color: #fff !important; }
.sol-step-actions .mfg-btn.sol-submit{ color: #fff !important; }

/* HERO CTA(내 조건으로 무료 수익 분석 받기) 텍스트 확실히 흰색 */
.sol-primary-cta{ color: #fff !important; }


/* ===== 2026-01-03 v21: Hero 슬라이스 제거 + 카피 위치 상향 ===== */
#solar-hero.sol-hero::after{
  content: none !important;
  background-image: none !important;
  display: none !important;
}
#solar-hero .sol-hero-copy{
  margin-top: -18px;
}
@media (max-width: 640px){
  #solar-hero .sol-hero-copy{ margin-top: -10px; }
}


/* ===== 2026-01-03 v22: Hero 기본 슬라이스(skew) 제거 + 카피 위치 상향(확실히) ===== */
/* base(mfg_page.css)에서 .mfg-hero:before 로 대각 슬라이스가 생성됨 -> inset/height/transform을 리셋 */
#solar-hero.mfg-hero:before{
  inset: 0 !important;
  height: auto !important;
  background: linear-gradient(180deg, rgba(15,23,42,.70) 0%, rgba(15,23,42,.50) 48%, rgba(15,23,42,.12) 100%) !important;
  transform: none !important;
}

/* 히어로 카피(키커~신뢰포인트까지) 전체를 위로 살짝 이동 */
#solar-hero .sol-hero-copy{
  transform: translateY(-26px);
}
@media (max-width: 640px){
  #solar-hero .sol-hero-copy{ transform: translateY(-14px); }
}


/* =========================
   20260131 UX Clarity Patch
   ========================= */
.sol-steps > .sol-step{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Form card refinement */
.sol-form{
  border: 1px solid #eee !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 22px !important;
  box-shadow: 0 18px 52px rgba(15,23,42,.08) !important;
}

/* Input clarity + mobile zoom prevention */
.sol-form .sol-input,
.sol-form .sol-textarea{
  font-size: 16px !important;
}

/* Override minimal underline inputs -> bordered inputs (step 2/3) */
.sol-form-grid-min .sol-input{
  border: 1px solid rgba(15,23,42,.14) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
  padding: 20px 44px 14px 14px !important; /* keep space for floating label + validation icon */
  min-height: 56px;
}
.sol-form-grid-min .sol-input:focus{
  border-color: rgba(0,70,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,70,255,.12) !important;
}

/* Textarea clarity */
.sol-form .sol-textarea{
  border: 1px solid rgba(15,23,42,.14) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
  padding: 20px 14px 14px 14px !important;
  min-height: 180px;
}
.sol-form .sol-textarea:focus{
  border-color: rgba(0,70,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,70,255,.12) !important;
}

/* Touch targets */
.sol-actions-steps .mfg-btn{
  min-height: 52px;
  padding: 14px 18px;
}

/* Hidden attribute safety */
[hidden]{ display: none !important; }