* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(0, 125, 242, .28), transparent 60%),
    radial-gradient(700px 420px at 80% 10%, rgba(0, 125, 242, .16), transparent 60%),
    var(--bg);
  color: var(--text);
  line-height: 1.75;
}



.section {
  padding: 80px 0;
}

/* ========== Section Common Layout ========== */
.text-container {
  margin-bottom: 24px;
}

.text-container .title {
  margin: 0 0 16px;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text);
}

.text-container .desc {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--muted);
}

.text-container .note {
  margin: 16px 0 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--muted2);
}

.content-container {
  /* 콘텐츠 영역 기본 스타일 */
}

.section-tint {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}

.section-tint01 {
    background-color: #f6f9ff;
}

.section-tint01 h2, .section-tint01 p, .section-tint01 li, .section-tint01 b, .section-tint01 .callout {
    color:var(--secondary) !important;
}
.section-tint01 .content-container {
   margin-top: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.section-tint01 .content-container .right {
    right:0;
}
.section-tint01 .content-container .left img{
    width: 80%;
}

.kicker {
  display: inline-block;
  margin: 0 0 16px;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #e6e3ff;
  font-size: 0.875rem;
}
.press-title {
    color:var(--primary);
}
/****************************히어로섹션****************************/
/**************************** 히어로섹션(덮어쓰기) ****************************/
/* 목표:
   - 배경 톤: #050915 (아주 어둡게 유지)
   - 오로라: 전구(이미지) 뒤로 S자 파란 오로라 1개
   - 모션: “살짝만” 보이게 (느리지만 확실히 움직임)
*/

/* 1) 섹션 베이스 */
.section-hero{
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 160px 0 80px;
  /*background: #050915;*/
  background-image: url('../images/background-01.jpg');
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 2) 기존 복잡한 레이어 전부 끔 (남겨져 있어도 화면에는 안 보임) */
.section-hero .bg,
.section-hero .blob1,
.section-hero .blob2,
.section-hero .ribbon,
.section-hero .aurora-diag,
.section-hero .dim{
  display: none !important;
}

/* 3) 배경 컨테이너(HTML 그대로 사용) */
.section-hero .hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 4) 콘텐츠는 위로 */
.section-hero .hero-content,
.section-hero > .container{
  position: relative;
  z-index: 2;
}

/* 5) 전구(오른쪽 이미지)가 “오로라 위”에 오도록 한 번 더 보장 */
.section-hero .right{
  position: relative;
  z-index: 3;
  top:-30px;
}

/* 6) 아주 은은한 베이스 딥 그라데이션(검정 쪽으로) */
.section-hero::before{
  content:"";
  position:absolute;
  /*inset:-20vmax;*/
  z-index:0;
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(0, 125, 242, .08), transparent 62%),
    radial-gradient(900px 640px at 82% 35%, rgba(70, 40, 150, .06), transparent 65%),
    linear-gradient(180deg, #050915 0%, #050915 100%);
  filter: blur(18px) saturate(1.05) contrast(1.05);
  transform: translate3d(0,0,0);
}

.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 35% 50%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 60%);
}


/* 7) ✅ 핵심: S자 오로라 1줄 (전구 뒤로 지나가게 = z-index 1) */
.section-hero .hero-bg::before{
  content:"";
  position:absolute;
  inset:-28vmax;               /* 섹션 아래까지 길게 커버 */
  z-index: 1;
  pointer-events:none;
  opacity: .85;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  will-change: transform, filter;
  animation: auroraSFloat 10s ease-in-out infinite alternate;

  /* 오로라 색: “파란 계열” 위주로 자연스럽게 */
  background:
    linear-gradient(125deg,
      transparent 0%,
      rgba(0, 180, 255, 0.00) 34%,
      rgba(0, 180, 255, 0.34) 44%,
      rgba(0, 125, 242, 0.22) 52%,
      rgba(120, 190, 255, 0.12) 60%,
      rgba(0, 180, 255, 0.00) 70%,
      transparent 100%);

  /* S자 모양을 “마스크 3개”로 깔끔하게 만듦 (상단 + 중앙 연결 + 하단) */
  -webkit-mask:
    radial-gradient(82vmax 44vmax at 80% 18%,
      transparent 40%,
      #000 46%,
      #000 58%,
      transparent 66%),
    radial-gradient(76vmax 42vmax at 66% 52%,
      transparent 36%,
      #000 48%,
      #000 60%,
      transparent 72%),
    radial-gradient(96vmax 58vmax at 56% 92%,
      transparent 40%,
      #000 46%,
      #000 58%,
      transparent 68%);
  mask:
    radial-gradient(82vmax 44vmax at 80% 18%,
      transparent 40%, #000 46%, #000 58%, transparent 66%),
    radial-gradient(76vmax 42vmax at 66% 52%,
      transparent 36%, #000 48%, #000 60%, transparent 72%),
    radial-gradient(96vmax 58vmax at 56% 92%,
      transparent 40%, #000 46%, #000 58%, transparent 68%);

  /* 자연스러운 “빛 번짐” */
  filter: blur(10px) saturate(1.35) contrast(1.08);
  animation: 
  auroraSFloat 10s ease-in-out infinite alternate,
  auroraSwapA 6s ease-in-out infinite;
}
/* primary 색 오로라 레이어(겹) */
.section-hero .hero-bg::after{
  content:"";
  position:absolute;
  inset:-28vmax;
  z-index: 1;
  pointer-events:none;

  /* primary가 보일 때만 올라오도록 */
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  will-change: transform, filter, opacity;

  /* ✅ primary(#007DF2) 중심으로 한 오로라 */
  background:
    linear-gradient(125deg,
      transparent 0%,
      rgba(0, 125, 242, 0.00) 34%,
      rgba(0, 125, 242, 0.42) 44%,
      rgba(0, 125, 242, 0.26) 52%,
      rgba(120, 200, 255, 0.14) 60%,
      rgba(0, 125, 242, 0.00) 70%,
      transparent 100%);

  /* ✅ 마스크는 기존(S자)와 동일해야 “같은 오로라가 색만 바뀐 느낌” */
  -webkit-mask:
    radial-gradient(82vmax 44vmax at 80% 18%,
      transparent 40%,
      #000 46%,
      #000 58%,
      transparent 66%),
    radial-gradient(76vmax 42vmax at 66% 52%,
      transparent 36%,
      #000 48%,
      #000 60%,
      transparent 72%),
    radial-gradient(96vmax 58vmax at 56% 92%,
      transparent 40%,
      #000 46%,
      #000 58%,
      transparent 68%);
  mask:
    radial-gradient(82vmax 44vmax at 80% 18%,
      transparent 40%, #000 46%, #000 58%, transparent 66%),
    radial-gradient(76vmax 42vmax at 66% 52%,
      transparent 36%, #000 48%, #000 60%, transparent 72%),
    radial-gradient(96vmax 58vmax at 56% 92%,
      transparent 40%, #000 46%, #000 58%, transparent 68%);

  filter: blur(10px) saturate(1.35) contrast(1.08);

  /* 같은 움직임 + 반대 페이드 */
  animation:
    auroraSFloat 10s ease-in-out infinite alternate,
    auroraSwapB 6s ease-in-out infinite;
}

/* 지금색 레이어(=before)는 사라질 때, primary(=after)는 나타날 때 */
@keyframes auroraSwapA{
  0%, 15%   { opacity: .85; }
  35%, 65%  { opacity: .10; } /* primary가 올라오는 구간엔 얇게 */
  85%, 100% { opacity: .85; }
}

@keyframes auroraSwapB{
  0%, 15%   { opacity: .10; }
  35%, 65%  { opacity: .85; } /* primary가 메인으로 보이는 구간 */
  85%, 100% { opacity: .10; }
}


/* 8) “움직이는지 전혀 모르겠음” 해결: amplitude는 작게, 대신 주기는 짧게 */
@keyframes auroraSFloat{
  0%   { transform: translate3d(-1.6%, -1.0%, 0) rotate(-1.1deg) scale(1.02); filter: blur(10px) saturate(1.30) contrast(1.06); }
  50%  { transform: translate3d( 1.2%,  0.8%, 0) rotate( 0.8deg) scale(1.04); filter: blur(11px) saturate(1.38) contrast(1.08); }
  100% { transform: translate3d( 2.0%, -1.1%, 0) rotate(-0.7deg) scale(1.03); filter: blur(10px) saturate(1.33) contrast(1.06); }
}

/* 9) 그레인(있으면 유지, 없으면 무시됨) */
.section-hero .grain{
  position:absolute;
  inset:0;
  z-index: 2;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  animation: grainMove 2s steps(10) infinite;
}

@keyframes grainMove{
  0% { transform: translate(0,0); }
  100% { transform: translate(-50px, 36px); }
}

@media (prefers-reduced-motion: reduce){
  .section-hero .hero-bg::before,
  .section-hero .grain{ animation: none !important; }
}

.hero-content .con01 {
    display: flex;
}
.hero-content .con02 {
    margin-top: 50px;
}

.section-hero h2 {
  font-size: 3.9rem;
  font-weight: 600;
  line-height: 1.2;
  margin:20px 0;
}

.section-hero p {
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 300;
}

.hero {
  padding: 90px 0 55px;
}

.hero-title {
  margin: 0 0 20px;
  font-size: 3.25rem;
  line-height: 1.2;
  letter-spacing: -1px;
}

.hero-sub {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.7;
}

.section-hero .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  overflow: visible;
}

.section-hero .btn {
  width:300px;
}

.section-hero .right .container {
  width:auto;
  position:absolute;
  top:-100px;
}

.hero-chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-chips li {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
}

.p {
  margin: 0 0 20px;
  color: var(--text);
  line-height: 1.8;
}

.dim {
  color: var(--muted);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 18px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--primary);
  color: var(--primary_text);
  cursor: pointer;
  z-index: 0;
  isolation: isolate;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), border-color .25s ease, background .2s ease;
  overflow: visible;
  font-size: 1rem;
}

/* ========== Glow Effect (::after) ========== */
.btn::after {
  content: "";
  position: absolute;
  /* 버튼보다 넓게 확장 */
  inset: -20px;
  z-index: -1;
  border-radius: 50%;
  /* 중앙에서 퍼지는 부드러운 radial glow */
  background: radial-gradient(
    50% 50% at 50% 50%,
    color-mix(in srgb, var(--primary) 55%, transparent) 0%,
    color-mix(in srgb, var(--primary) 30%, transparent) 35%,
    color-mix(in srgb, var(--primary) 10%, transparent) 60%,
    transparent 100%
  );
  opacity: 0;
  transform: scale(0.6);
  filter: blur(20px);
  transition:
    opacity .35s cubic-bezier(.4, 0, .2, 1),
    transform .4s cubic-bezier(.4, 0, .2, 1),
    filter .35s ease;
  pointer-events: none;
  will-change: opacity, transform;
}

.btn:hover {
  transform: translateY(-2px);
  border-color: var(--primary_line);
}

.btn:hover::after {
  opacity: 1;
  transform: scale(1.1);
  filter: blur(24px);
}

/* ========== Focus Visible: 접근성 + Glow ========== */
.btn:focus-visible {
  outline: none;
  border-color: var(--primary_line);
}

.btn:focus-visible::after {
  opacity: 0.85;
  transform: scale(1.05);
  filter: blur(22px);
}

/* 키보드 포커스 시 추가 포커스 링 (접근성) */
.btn:focus-visible::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: inherit;
  border: 2px solid var(--focus_ring);
  pointer-events: none;
}


.btn-ghost, .btn.ghost {
  background: rgba(0, 0, 0, .8);
  border: 1px solid var(--line);
  color: var(--secondary_text);
}

.btn-ghost:hover {
  background: var(--primary_weak);
  border-color: var(--primary_line);
}

/* ghost 버튼은 glow 강도 약하게 */
.btn-ghost::after {
  background: radial-gradient(
    50% 50% at 50% 50%,
    color-mix(in srgb, var(--primary) 35%, transparent) 0%,
    color-mix(in srgb, var(--primary) 18%, transparent) 40%,
    transparent 100%
  );
}

.btn-ghost:hover::after {
  opacity: 0.7;
  transform: scale(1);
  filter: blur(20px);
}


/* primary 버튼은 glow 강조 */
.btn-primary::after {
  background: radial-gradient(
    50% 50% at 50% 50%,
    color-mix(in srgb, var(--primary) 60%, transparent) 0%,
    color-mix(in srgb, var(--primary) 35%, transparent) 30%,
    color-mix(in srgb, var(--primary) 15%, transparent) 55%,
    transparent 100%
  );
}

.btn-primary:hover::after {
  opacity: 1;
  transform: scale(1.15);
  filter: blur(26px);
}

.btn-sm {
  padding: 10px 12px;
  border-radius: 12px;
}

.btn-full {
  width: 100%;
}

/* ========== Chip / Tag with Glow Effect ========== */
.tag {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  color: var(--primary);
  margin-bottom: 16px;
  cursor: default;
  z-index: 0;
  isolation: isolate;
  transition:
    border-color .25s ease,
    background .25s ease,
    transform .2s cubic-bezier(.4, 0, .2, 1);
}

/* Glow Layer (뒤에서 퍼지는 효과) */
.tag::after {
  content: "";
  position: absolute;
  inset: -12px -16px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(
    60% 80% at 50% 50%,
    color-mix(in srgb, var(--primary) 45%, transparent) 0%,
    color-mix(in srgb, var(--primary) 22%, transparent) 40%,
    color-mix(in srgb, var(--primary) 8%, transparent) 65%,
    transparent 100%
  );
  opacity: 0;
  transform: scale(0.7);
  filter: blur(14px);
  transition:
    opacity .3s cubic-bezier(.4, 0, .2, 1),
    transform .35s cubic-bezier(.4, 0, .2, 1),
    filter .3s ease;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Hover: Glow 확산 */
.tag:hover {
  border-color: color-mix(in srgb, var(--primary) 70%, transparent);
  background: color-mix(in srgb, var(--primary) 25%, transparent);
}

.tag:hover::after {
  opacity: 1;
  transform: scale(1);
  filter: blur(18px);
}

/* Focus Visible: 접근성 */
.tag:focus-visible {
  outline: none;
  border-color: var(--primary);
}

.tag:focus-visible::after {
  opacity: 0.8;
  transform: scale(0.95);
  filter: blur(16px);
}

/* 키보드 포커스 링 (접근성) */
.tag:focus-visible::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  border: 2px solid var(--focus_ring);
  pointer-events: none;
}

/* 클릭 가능한 태그 (링크/버튼) */
a.tag,
button.tag {
  cursor: pointer;
}

a.tag:hover,
button.tag:hover {
  transform: translateY(-1px);
}

a.tag:active,
button.tag:active {
  transform: translateY(0) scale(0.98);
}
.accordion {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.acc-title {
  font-size: 1.0625rem;
  letter-spacing: -.2px;
}

.acc-arrow {
  width: 22px;
  height: 22px;
  border-radius: 10px;
  border: 1px solid var(--line);
  position: relative;
}

.acc-arrow:before,
.acc-arrow:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
  border-radius: 2px;
}

.acc-arrow:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .26s ease;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .10);
}

.acc-body {
  padding: 18px;
}

.acc-lead {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.inline-cta {
  margin-top: 12px;
}

.bullets {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 1rem;
}

.bullets li {
  margin: 10px 0;
}

.bullets-big li {
  margin: 14px 0;
  font-size: 1.0625rem;
}

.callout {
  margin-top: 16px;
  padding: 14px 16px;
  color: var(--text);
  font-size: 1rem;
}

.qa {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.qa-item {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  padding: 30px 20px;
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.compare-tag {
  margin: 0 0 12px;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 0.875rem;
}

.compare-main {
  margin: 0 0 10px;
  font-size: 1.0625rem;
  letter-spacing: -.2px;
}

.compare-sub {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.course-list {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.course {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
}



.course-t {
  margin: 0 0 10px;
  font-size: 1.0625rem;
  letter-spacing: -.2px;
}

.course-d {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.mini-cta {
  margin-top: 20px;
}

.proof {
  margin-top: 20px;
}

.chart-wrap {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
}

.chart {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  background: rgba(0, 0, 0, .12);
  border: 1px solid rgba(255, 255, 255, .08);
}

.grid line {
  stroke: rgba(255, 255, 255, .08);
  stroke-width: 1;
}

.axis line {
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 1.2;
}

.labels text {
  fill: rgba(242, 242, 255, .62);
  font-size: 0.8125rem;
}

.line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3.2;
  filter: drop-shadow(0 8px 18px var(--primary_glow));
}

.points circle {
  fill: var(--primary_text);
  stroke: var(--primary);
  stroke-width: 3;
}

.values text {
  fill: #fff;
  font-size: 0.875rem;
}

.chart-caption {
  margin-top: 18px;
}


/* =========================
   Courses -> Grid Cards (Reference style)
========================= */
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.program-card {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.program-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary_line);
  background: rgba(255, 255, 255, .04);
}

.program-media {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}

.program-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}

.program-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px);
  color: #fff;
}

.badge-mint {
  border-color: var(--accent-mint-line);
  background: var(--accent-mint-bg);
  color: var(--accent-mint);
}

.badge-hot {
  border-color: var(--accent-hot-line);
  background: var(--accent-hot-bg);
  color: var(--accent-hot);
}

.program-body {
  padding: 20px 20px 22px;
}

.program-title {
  margin: 0 0 12px;
  font-size: 1.125rem;
  letter-spacing: -.2px;
  line-height: 1.4;
}

.program-desc {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* 버튼: 테두리+살짝 발광 */
.btn-outline {
  border: 1px solid var(--primary_line);
  background: rgba(0, 0, 0, .25);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(0, 125, 242, .08);
}

.btn-outline:hover {
  background: var(--primary_weak);
}

/* =========================
   Case Cards
========================= */
.section-cases {
  padding: 80px 0;
  border-top: 1px solid var(--line); 
  isolation: isolate;
  position: relative;
}
.section-cases::before {
  content:"";
  inset:0;
  background-image: url('../images/background-05.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  opacity: 0.6;
  position:absolute;
  z-index:-1;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.case-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.case-title {
  margin: 0 0 14px;
  font-size: 1.125rem;
  line-height: 1.5;
}

.case-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

.case-list b {
  color: #fff;
}

.prod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.prod-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
}

.prod-card h4 {
  margin: 0 0 12px;
  font-size: 1.0625rem;
}

.prod-card p {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
}

.prod-summary {
  margin-top: 24px;
  font-size: 1.0625rem;
}

/* 생산성 섹션 상단/하단 문구 가운데 정렬 */
.prod-lead,
.prod-outro {
  text-align: center;
  max-width: 860px;
  /* 너무 길게 퍼지는 걸 방지 */
  margin-left: auto;
  margin-right: auto;
}

/* 줄 간격/가독성 조금 개선(선택) */
.prod-lead p,
.prod-outro p {
  line-height: 1.7;
}

/* =========================
   ZERO COST + PRESS
   primary: #007DF2
========================= */


.section-zerocost {
  text-align: center;
  padding-top:120px;
  background-color: var(--primary_text);
}

.section-zerocost .content-container {
  margin-top:70px;
}

.section-zerocost .zerocost-box {
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}

.section-zerocost .title {
    color:#000;
}

.section-zerocost .desc {
    color:#000 !important;
}
.section-zerocost .tag {
    background:var(--primary);
    padding:10px 20px;
    border-radius: 50px;
    color: var(--primary-text);
}
.section-zerocost .title,
.section-press .title {
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.section-zerocost .btn.ghost {
    background-color: var(--secondary);
}
.section-zerocost .btn.ghost:hover {
    background-color: var(--secondary);
    color:#00c2f2;
}

.btn.ghost {
    background-color: var(--secondary);
}

.section-zerocost .title b {
  color: #fff;
  background: linear-gradient(90deg, rgba(0, 125, 242, .0), rgba(0, 125, 242, .25));
  padding: 0;
  border-radius: 8px;
}

.section-zerocost .desc,
.section-press .desc {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, .78);
  font-size: 1.0625rem;
  line-height: 1.8;
}

.zerocost-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
  width:80%;
  margin:0 auto;
}

.zerocost-points .point {
 position: relative;
  padding: 30px 22px;
  border-radius: 10px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255, 255, 255, .10);

  /*box-shadow:
    0 0 0 1px rgba(0,125,242,.15) inset,
    0 18px 70px rgba(0,0,0,.55),
    0 0 28px rgba(0,125,242,.18);*/

  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;

}

/* 네온 가장자리 부드러운 광(보더처럼 딱딱하지 않게) */
.zerocost-points .point::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  opacity: .55;
  filter: blur(10px);
}

/* 카드 상단 텍스트 */
.zerocost-points .point .point-title{
  font-size: 15px;
  color: var(--muted2);
  margin-bottom: 8px;
}

.zerocost-points .point .point-value{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}

/******************section-policy********************/
.section-policy .text-container {
  text-align: center;
}
.section-policy .card-wrapper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 90%;
  margin: 0 auto;
  gap: 50px;
}
.section-policy .card-wrapper .card {
  border:none;
}
.section-policy .card-wrapper .support-card-head {
  border-radius: 999px;
  text-align: center;
  background-color: var(--primary);
  width:100px;
  height: 100px;
    margin: 0 auto;
}
.section-policy .card-wrapper .support-card:nth-child(1) .support-card-head{
  background-image: url('../images/img-09.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 50%;
}
.section-policy .card-wrapper .support-card:nth-child(2) .support-card-head{
  background-image: url('../images/img-10.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 50%;
}
.section-policy .card-wrapper .support-card:nth-child(3) .support-card-head{
  background-image: url('../images/img-11.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 50%;
}
.section-policy .card-wrapper .support-card:nth-child(4) .support-card-head{
  background-image: url('../images/img-12.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 50%;
}
.section-policy .card-desc {
  text-align: center;
  color: var(--primary-text);
}
.section-policy .callout {
  text-align: center;
}
/*********************.section-learning**************************/
.section-learning .text-container {
  text-align: center;
}
.section-learning .compare {
  width:60%;
  margin:0 auto;
  gap: 40px;
}
.section-learning .compare-item{
  height:380px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
}
.section-learning .compare-item-good {
    border-color: var(--primary_line);
    background: var(--primary_weak);
}
.section-learning .callout {
  text-align: center;
}
.section-learning .compare-item:nth-child(1) {
  background-image: url(../images/background-03.png);
  background-position: 100% 130%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #bebebe;
}
.section-learning .compare-item .compare-tag {
  border: 1px solid #898989;
  background: rgba(0, 0, 0, .1);
  color:#000;
}
.section-learning .compare-item p {
  color:#000;
}
.section-learning .compare-item:nth-child(2) {
  background-image: url(../images/background-04.png);
  background-position: 100% 150%;
  background-size: 100%;
  background-repeat: no-repeat;
}
.section-learning .compare-item-good p, .section-learning .compare-item-good .compare-tag {
  color: var(--secondary_text);
}
.section-learning .compare-item-good .compare-tag {
  background-color: var(--primary);
  border:none;
  color: var(--primary_text);
  font-weight:500;
}
.section-proof .container {
  display: flex;
  gap:50px;
}
.section-proof .container .text-container, .section-proof .container .content-container {
  width:50%;
}
.section-proof .container .content-container {
  margin-top:0;
}
.section-proof .content-container img {
    width:100%;
}

/* 반응형 */
@media (max-width: 900px){
  .zerocost-points{ grid-template-columns: 1fr; }
  .zerocost-points .point{ min-height: 120px; }
}

.zerocost-points .k {
  margin: 0 0 8px;
  color: #000;
  font-size: 1rem;
}

.zerocost-points .v {
  margin: 0;
  font-size: 2.3rem;
  color: #000;
  font-weight: 700;
}

.section-zerocost .actions {
  gap: 14px;
  flex-wrap: wrap;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 50px auto 0;
  width: 35%;
}

.btn.primary {
  background: var(--primary);
  border: 1px solid var(--line);
  color: var(--primary_text);
  padding: 12px 50px;
  border-radius: 7px;
  font-size: 1rem;
  text-decoration: none;
}

.btn.primary:hover {
  background: color-mix(in srgb, var(--primary) 85%, #fff);
}

.btn.ghost {
  background: rgba(0, 0, 0, .8);
  border: 1px solid var(--line);
  color: var(--secondary_text);
  padding: 12px 50px;
  border-radius: 7px;
  font-size: 1rem;
  text-decoration: none;
}

.btn.ghost:hover {
  background: var(--primary_weak);
  border-color: var(--primary_line);
}

/* PRESS */
.section-press {
  background-image: url('../images/background-02.png');
  background-size: 60%;
  background-position: right top;
  background-repeat: no-repeat;
}

.section-press .container {
  margin-top: 100px;
}

.press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.press-card {
  border: 1px solid rgba(255, 255, 255, .10);
  background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .8));
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 22px;
}

.press-head {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, .70);
  font-size: 0.8125rem;
}

.press-card h4 {
  margin: 0 0 12px;
  font-size: 1.0625rem;
  line-height: 1.4;
}

.press-body {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  line-height: 1.7;
  font-size: 1rem;
}

.section-diagnosis .accordion .acc-item,
.section-diagnosis .acc-btn.press-foot {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .55);
  font-size: 0.8125rem;
}

.press-note {
  margin-top: 20px;
  color: rgba(255, 255, 255, .58);
  font-size: 0.8125rem;
  line-height: 1.7;
}
/***********section-diagnosis************/
.section-diagnosis .text-container {
  text-align: center;
}
.section-diagnosis .accordion {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.section-diagnosis .accordion .acc-item {
  position: relative;
  width: 100%;
  border: 0;                 /* 기존 border는 끄고 */
  background: rgba(0,0,0,.25);
  color: var(--text);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  height: 200px;
  overflow: hidden;          /* pseudo-element 잘리게 */
  isolation: isolate;
}

/* 핵심: 금속 그라데이션 보더 레이어 */
.section-diagnosis .acc-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 2px; /* 보더 두께 */

  /* 금속 느낌 = '밝은 하이라이트' + '어두운 쉐도' + '프라이머리 틴트' 섞기 */
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.28),
      rgba(255,255,255,.06) 22%,
      var(--primary_line) 45%,
      rgba(0,0,0,.35) 65%,
      rgba(255,255,255,.12) 82%,
      rgba(255,255,255,.22)
    );

  /* 가운데를 뚫어 테두리만 남기기 */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: .95;
  pointer-events: none;
}

/* 보더 위에 아주 은은한 광(금속 하이라이트) */
.section-diagnosis .acc-btn::after{
  content:"";
  position:absolute;
  inset:-40%;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.14), transparent 55%);
  filter: blur(18px);
  opacity: .55;
  transform: translate3d(-10%, -6%, 0);
  pointer-events:none;
}

/* hover: 금속 광이 조금 살아나게 */
.section-diagnosis .acc-btn:hover::before{
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.34),
      rgba(255,255,255,.08) 22%,
      var(--primary) 48%,
      rgba(0,0,0,.35) 66%,
      rgba(255,255,255,.14) 84%,
      rgba(255,255,255,.26)
    );
}

/* 카드 공통: 스태킹 안정화 */
.section-diagnosis .accordion .acc-item,
.section-diagnosis .acc-btn{
  position: relative;
  border-radius: 22px;
  isolation: isolate;
}

/* 1) 기존 금속 그라데이션 보더(::before)가 있다면 유지 */

/* 2) 코너를 또렷하게 만드는 하드 라인(blur 없음) */
.section-diagnosis .acc-btn::marker{ content:""; } /* 혹시 리스트 마커 영향 방지(옵션) */

.section-diagnosis .acc-btn::before{
  /* 이미 쓰고 있다면 그대로 두고, padding/blur만 너무 크지 않게 */
  padding: 2px;
}

/* 코너 하드라인용 레이어 추가 */
.section-diagnosis .acc-btn .corner-line{ display:none; } /* HTML 안 건드릴 거라 필요 없음 */

.section-diagnosis .acc-btn::after{
  /* 너가 이미 glow 용으로 ::after를 쓰고 있으면,
     아래 코너라인은 ::before 안에 같이 넣는 대신
     "추가 pseudo"가 필요해서 ::after를 코너라인으로 바꾸고
     glow는 acc-btn 내부에 .glow-layer로 하거나 다른 selector로 옮겨야 함.
     (일단 지금은 코너라인을 ::after로 우선 적용) */

  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index: 2;

  /* blur 없는 선 = 코너 또렷해짐 */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,     /* 밝은 하이라이트 */
    0 0 0 2px rgba(0,125,242,.22) inset;       /* primary 틴트 */
  opacity: .9;
}

/* 부모는 잘라내지 않게(코너 선이 깨지는 원인) */
.section-diagnosis .accordion .acc-item{
  overflow: visible;   /* 중요 */
}

/* 실제 잘라내기는 버튼에서만 */
.section-diagnosis .acc-btn{
  overflow: hidden;
}

.section-diagnosis .acc-btn:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 22px 60px rgba(0,0,0,.55),
    0 0 28px var(--primary_glow);
}

/* focus-visible 접근성 */
.section-diagnosis .acc-btn:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 3px var(--focus_ring),
    0 22px 60px rgba(0,0,0,.55),
    0 0 28px var(--primary_glow);
}

.section-diagnosis .acc-btn {
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 18px 18px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    height: 250px;
}

/* diagnosis 카드 그리드: 가로 카드 4개 */
.section-diagnosis .accordion{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* 카드 컨테이너 */
.section-diagnosis .acc-item{
  position: relative;
  border-radius: 22px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  isolation: isolate;
  transition: background .35s ease, border-color .35s ease, transform .25s ease;
}

/* 버튼(카드 상단) = 가로 넓은 카드 */
.section-diagnosis .acc-btn{
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 22px;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  cursor:pointer;
}

.section-diagnosis .acc-item{
  min-height: 180px;
}

.section-diagnosis .acc-item.is-open{
  background: var(--primary);
  border-color: rgba(255,255,255,.18);
}

.section-diagnosis .acc-item.is-open .acc-title,
.section-diagnosis .acc-item.is-open .acc-q{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}

.section-diagnosis .acc-plus{
  width:34px;height:34px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.section-diagnosis .acc-item.is-open .acc-plus{
  transform: rotate(45deg);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
}

/* 패널은 카드 "안"에서 펼쳐지게 */
.section-diagnosis .acc-panel{
  overflow: hidden;
  max-height: 0px; /* JS로 조절 */
  transition: max-height .45s ease;
}

/* 답변 래퍼는 사라락 */
.section-diagnosis .acc-a{
  padding: 0 22px 22px;
  color: #fff;

  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .35s ease, transform .35s ease;
}

.section-diagnosis .acc-item.is-open .acc-a{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .10s;
}

/* + 버튼 */
.section-diagnosis .acc-plus{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  flex: 0 0 auto;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

/* hover */
.section-diagnosis .acc-btn:hover{
  border-color: rgba(0,125,242,.35);
  transform: translateY(-2px);
}
.section-diagnosis .acc-btn:hover .acc-plus{
  background: rgba(0,125,242,.18);
  border-color: rgba(0,125,242,.35);
}

/* 기본: 패널은 숨김(아코디언 JS가 max-height로 제어 중일 수도 있으니, 내용 애니메이션은 내부에 건다) */
.section-diagnosis .acc-panel{
  overflow: hidden;
}

/* 답변 래퍼: 처음엔 위로 살짝 + 투명 */
.section-diagnosis .acc-a{
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .35s ease, transform .35s ease;
  padding: 0 22px 18px; /* 카드 내부처럼 보이게 */
  color: #fff;
}

/* 열렸을 때: 카드 배경 primary, 질문은 사라지고, 답변 등장 */
.section-diagnosis .acc-btn[aria-expanded="true"]{
  background: var(--primary);
  border-color: rgba(255,255,255,.18);
}

/* 질문 텍스트가 사라지게 */
.section-diagnosis .acc-btn[aria-expanded="true"] .acc-q{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}

/* +가 x로 회전 느낌(원하면) */
.section-diagnosis .acc-btn[aria-expanded="true"] .acc-plus{
  transform: rotate(45deg);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
}

/* 패널이 열렸을 때 답변이 “사라락” */
.section-diagnosis .acc-btn[aria-expanded="true"] + .acc-panel .acc-a{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .10s;
}

.section-diagnosis .acc-btn[aria-expanded="true"]{
  height: 260px;

}

/*****************section-background****************/
.section-background {
  position: relative;
  overflow: hidden;
}

.section-background .text-container {
  text-align: center;
}

.section-background::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 220px;
  pointer-events:none;
  z-index: 0;

  background:
    radial-gradient(50% 60% at 50% 0%,
      rgba(0,125,242,.55) 0%,
      rgba(0,125,242,.22) 40%,
      rgba(0,0,0,0) 75%);
  filter: blur(14px);
}

.section-background::after{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 260px;
  pointer-events:none;
  z-index: 0;

  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.45) 70%,
    rgba(0,0,0,0) 100%);
  opacity: .9;
}

.section-background > *{
  position: relative;
  z-index: 1;
}

.section-background .card-wrapper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 90%;
  margin: 0 auto;
}

.section-background .card {
  border:0;
  background:none;
}

.section-background .card .support-card-head {
  text-align: center;
  width: 80px;
  height: 80px; 
  margin: 0 auto;
  background: #ffffff14;
  line-height: 80px;
  border-radius: 10px;
}

.section-background .card .support-card-head img {
  height: 40px;
  vertical-align: middle;
}

.section-background .card p {
  text-align: center;
  margin-top: 20px;
}

.section-background .callout {
  text-align: center;
}

/**************************section-myth*************************/
.section-myth {
  background-color: #000;
}
.section-myth .content-container {
  width:80%;
  margin:60px auto 0;
}
.section-myth .text-container {
  text-align: center;
}
.section-myth .qa-item {
  background-color: #0d0d16;
  padding: 20px 20px 40px;
}

.section-myth .qa-item .qa-q {
  margin:0;
  padding-bottom:20px;
}

.section-myth .qa-item .qa-a {
  margin: 0;
  color: var(--primary-text);
  font-size: 1.3rem;
  line-height: 1.7;
}
.section-myth .qa .qa-item:nth-child(1) {
  background-image: url(../images/img-05.jpg);
  background-position: 100% 200%;
  background-repeat: no-repeat;
  background-size: 15%;
}
.section-myth .qa .qa-item:nth-child(2) {
  background-image: url(../images/img-06.jpg);
  background-position: 100% 200%;
  background-repeat: no-repeat;
  background-size: 15%;
}
.section-myth .qa .qa-item:nth-child(3) {
  background-image: url(../images/img-07.jpg);
  background-position: 100% 200%;
  background-repeat: no-repeat;
  background-size: 15%;
}
.section-myth .qa .qa-item:nth-child(4) {
  background-image: url(../images/img-08.jpg);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: 15%;
}

/***********************section-policy********************/
.section-productivity .text-container {
    text-align: center;
}
.section-productivity h5 {
    display: flex;
}
.section-productivity .prod-summary {
    text-align: center;
}
.section-productivity h5 .icon {
    background-color: var(--primary);
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 5px;
    margin-right:10px;
    line-height: 1;
}
.section-productivity h5 .icon img {
    height: 15px;
}

/* 반응형 */
@media (max-width: 1100px){
  .section-diagnosis .accordion{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}



/* 반응형 */
@media (max-width: 980px) {
  .zerocost-points {
    grid-template-columns: 1fr;
  }

  .press-grid {
    grid-template-columns: 1fr;
  }
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-grid {
    grid-template-columns: 1fr;
  }
}



@media (max-width: 840px) {
  .hero-title {
    font-size: 2.75rem;
  }

  .compare {
    grid-template-columns: 1fr;
  }

  .text-container .title {
    font-size: 1.875rem;
  }
}

@media (max-width: 720px) {
  .nav {
    display: none;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .decision-title {
    font-size: 2rem;
  }

  .prod-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .course-grid {
    grid-template-columns: 1fr;
  }
  .section-diagnosis .accordion{ grid-template-columns: 1fr; }
  .section-diagnosis .acc-btn{ height: 160px; }
}

/* =========================================================
   DIAGNOSIS CARDS (section-diagnosis)
   - 카드 안에서 질문 -> 답변으로 전환(오버레이)
   - 배경: 닫힘(다크) / 열림(primary)
   ========================================================= */
.section-diagnosis .accordion{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 50px;
}

/* card shell */
.section-diagnosis .accordion .acc-item{
  position: relative;
  display: block;            /* 기존 flex 때문에 panel이 옆으로 붙는 문제 방지 */
  height: 310px;
  border-radius: 22px;
  background: rgba(0,0,0,.25);
  overflow: hidden;
  isolation: isolate;
}

/* metallic gradient border (primary 기반) */
.section-diagnosis .accordion .acc-item::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 2px;

  background:
    linear-gradient(135deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.05) 20%,
      rgba(255,255,255,.10) 30%,
      var(--primary_line) 46%,
      rgba(0,0,0,.35) 66%,
      rgba(255,255,255,.10) 84%,
      rgba(255,255,255,.18)
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: .95;
  pointer-events:none;
}

/* inner corner hard line (모서리 또렷) */
.section-diagnosis .accordion .acc-item::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 0 2px rgba(0,0,0,.35) inset;
  opacity: .9;
}

/* question button layer */
.section-diagnosis .acc-btn{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  z-index: 2;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 26px 24px;
}

.section-diagnosis .acc-title{
  line-height: 1.35;
  letter-spacing: -0.2px;
  word-break: keep-all;
  margin: 0 auto;
  font-size: 1.5rem;
  width: 100%;
  text-align: center;
  color:var(--text);
}

/* plus icon */
.section-diagnosis .acc-arrow{
  position: relative;
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid #007df2;
  background: rgba(0, 0, 0, .18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
  display: block;
  margin: 0 auto;
}
.section-diagnosis .acc-arrow::before,
.section-diagnosis .acc-arrow::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 17px;
  height: 2px;
  background: #007df2;
  transform: translate(-50%,-50%);
  border-radius: 2px;
}
.section-diagnosis .acc-arrow::after{
  transform: translate(-50%,-50%) rotate(90deg);
}

.section-diagnosis .acc-btn:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 22px 60px rgba(0,0,0,.55),
    0 0 28px var(--primary_glow);
}

.section-diagnosis .acc-btn:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 3px var(--focus_ring),
    0 22px 60px rgba(0,0,0,.55),
    0 0 28px var(--primary_glow);
}

/* answer overlay panel */
.section-diagnosis .acc-panel{
  position:absolute;
  inset:0;
  height:100%;
  max-height: none !important;    /* JS maxHeight 영향 차단 */
  border-top: 0;
  background: transparent;
  z-index: 3;

  opacity: 0;
  transform: translate3d(0,-10px,0);
  transition: opacity .32s ease, transform .32s ease;
  pointer-events:none;
  overflow:auto; /* 내용 많을 때 스크롤 */
}

.section-diagnosis .acc-body{
  padding: 18px 18px 20px;
  color: rgba(255,255,255,.92);
  overflow-y: auto;              /* 스크롤 기능 유지 */
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none; 
}

.section-diagnosis .acc-body::-webkit-scrollbar {
  width: 0;
  height: 0;                     /* Chrome/Safari */
  display: none;
}

/* opened state */
.section-diagnosis .acc-item.is-open{
  background: var(--primary);
}
.section-diagnosis .acc-item.is-open::before{
  opacity: .35;
}
.section-diagnosis .acc-item.is-open .acc-panel{
  opacity: 1;
  transform: translate3d(0,0,0);
  pointer-events:auto;
}
.section-diagnosis .acc-item.is-open .acc-btn{
  opacity: 0;
  pointer-events:none;
  transform: translate3d(0,6px,0);
  transition: opacity .18s ease, transform .18s ease;
}

/* inside panel typography */
.section-diagnosis .acc-lead{ color: rgba(255,255,255,.92); }
.section-diagnosis .bullets{ color: rgba(255,255,255,.92); }
.section-diagnosis .bullets li{ margin: 10px 0; }
.section-diagnosis .inline-cta .btn{ border-color: rgba(255,255,255,.32); }

/* 1) 기본 상태(닫힘): 고민은 '숨겨진 상태'로 시작해도 됨 */
.section-diagnosis .acc-btn .acc-title{
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
  will-change: opacity, transform;
}

/* 2) 열림 상태: 고민은 빠르게 사라짐(지금 상태 유지) */
.section-diagnosis .acc-item.is-open .acc-btn .acc-title{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

/* 3) 닫힘으로 돌아올 때: "위에서부터 페이드 다운" (핵심)
   - is-open이 빠지는 순간, 아래 규칙이 적용되는데
   - 이때 transition을 길게 주면 '나올 때'만 자연스러워짐 */
.section-diagnosis .acc-item:not(.is-open) .acc-btn .acc-title{
  opacity: 1;
  transform: translateY(-10px);
  transition: none; /* 기본은 transition 없이 시작 */
  display: block;
  height: 110px;
}

/* 4) 닫힘 직후에만 애니메이션을 걸기 위한 클래스
   - JS에서 close할 때 item에 .is-closing을 잠깐 붙였다 떼면 깜빡임이 사라짐 */
.section-diagnosis .acc-item.is-closing .acc-btn .acc-title{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .28s ease, transform .28s ease;
}

/* responsive */
@media (max-width: 1024px){
  .section-diagnosis .accordion{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .section-diagnosis .accordion{ grid-template-columns: 1fr; }
  .section-diagnosis .accordion .acc-item{ height: 220px; }
}