/* =========================================================
   교육 신청 (education · education-detail · education-apply)
   main.css + about.css 위에 얹습니다. 신청서 입력 요소는 contact.css 의 .f-* 를 그대로 씁니다.
   ========================================================= */

/* ---------- 목록: 안내 카드 ---------- */
.edu-intro{ background:#fff }
.eintro{ margin-top:56px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
.eintro li{ display:flex; gap:18px; padding:28px; border-radius:var(--r-xl); background:var(--bg-light) }
.eintro img{ flex:none; width:64px; height:64px; filter:drop-shadow(0 10px 18px rgba(67,48,230,.25)) }
.eintro b{ display:block; font-size:19px; font-weight:700; letter-spacing:-.03em; color:var(--text-strong) }
.eintro p{ margin-top:6px; font-size:16px; line-height:1.65; color:var(--text-body) }

/* ---------- 목록: 모집 중 강조 카드 ---------- */
.edu-list{ background:var(--bg-light) }
.efeat{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); align-items:stretch; border-radius:var(--r-xl); overflow:hidden; background:#fff;
  box-shadow:0 0 0 1px rgba(18,16,34,.05), 0 40px 80px -56px rgba(47,31,196,.45); transition:translate .4s var(--ease), box-shadow .4s var(--ease) }
.efeat:hover{ translate:0 -4px; box-shadow:0 0 0 1px rgba(67,48,230,.2), 0 40px 80px -48px rgba(47,31,196,.5) }
.efeat__vis{ grid-column:1 / 6; position:relative; min-height:300px; background:radial-gradient(80% 90% at 30% 20%, #5B47FF, var(--point-deep) 55%, #160F52); color:#fff; padding:36px; display:flex; flex-direction:column; justify-content:space-between; isolation:isolate; overflow:hidden }
.efeat__vis::after{ content:""; position:absolute; z-index:-1; width:120%; aspect-ratio:1; right:-60%; bottom:-80%; border-radius:50%; border:1px solid rgba(255,255,255,.18); box-shadow:0 0 0 60px rgba(255,255,255,.03), 0 0 0 120px rgba(255,255,255,.02) }
.efeat__year{ font-size:16px; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.7) }
.efeat__big{ font-size:clamp(40px,4.4vw,60px); font-weight:800; line-height:1.05; letter-spacing:-.04em }
.efeat__big span{ display:block; color:#B9B0FF }
.efeat__body{ grid-column:6 / 13; padding:40px 44px 40px 8px; display:flex; flex-direction:column }
.efeat__title{ margin-top:16px; font-size:30px; font-weight:700; line-height:1.35; letter-spacing:-.04em; color:var(--text-strong) }
.efeat__ex{ margin-top:12px; font-size:17px; line-height:1.7; color:var(--text-body) }
.efeat__meta{ margin-top:auto; padding-top:28px; display:flex; flex-wrap:wrap; gap:8px 24px; font-size:16px; color:var(--text-sub) }
.efeat__meta b{ margin-right:8px; font-weight:700; color:var(--text-strong) }
.efeat__go{ margin-top:24px; align-self:flex-start }

.ebadge{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:999px; font-size:16px; font-weight:700; white-space:nowrap }
.ebadge--open{ color:#fff; background:var(--point) }
.ebadge--open::before{ content:""; width:7px; height:7px; border-radius:50%; background:#fff; animation:epulse 1.8s ease-in-out infinite }
.ebadge--closed{ color:var(--text-sub); background:var(--bg-light) }
@keyframes epulse{ 50%{ opacity:.35 } }

/* ---------- 목록: 게시판 ---------- */
.ebar{ margin-top:56px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.ebar__count{ font-size:16px; color:var(--text-sub) } .ebar__count b{ color:var(--text-strong) }
.ebar__search{ position:relative; width:min(340px,100%) }
.ebar__search input{ width:100%; height:52px; padding:0 20px 0 48px; border:0; border-radius:999px; font:inherit; font-size:16px; color:var(--text-strong); background:#fff; box-shadow:inset 0 0 0 1px var(--line-strong); transition:box-shadow .25s var(--ease) }
.ebar__search input:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--point) }
.ebar__search::before{ content:""; position:absolute; left:20px; top:50%; width:16px; height:16px; margin-top:-9px; border-radius:50%; border:2px solid var(--text-sub) }
.ebar__search::after{ content:""; position:absolute; left:33px; top:50%; width:7px; height:2px; margin-top:6px; background:var(--text-sub); rotate:45deg }

.etable{ margin-top:16px; border-radius:var(--r-lg); background:#fff; box-shadow:0 0 0 1px rgba(18,16,34,.05); overflow:hidden }
.erow{ display:grid; grid-template-columns:72px 104px minmax(0,1fr) 120px 72px 40px; align-items:center; gap:16px; min-height:76px; padding:0 28px; border-top:1px solid var(--line); font-size:16px; color:var(--text-sub) }
.erow--head{ min-height:56px; border-top:0; font-weight:600; box-shadow:inset 0 -1px 0 var(--line-strong) }
.erow + .erow:not(.erow--head){ }
.erow__no,.erow__views{ text-align:center; font-variant-numeric:tabular-nums }
.erow__title{ font-size:18px; font-weight:600; color:var(--text-strong); letter-spacing:-.02em }
.erow__date{ font-variant-numeric:tabular-nums }
.erow__go{ width:32px; height:32px; border-radius:50%; background:var(--bg-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121022' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat; transition:background-color .3s var(--ease) }
a.erow{ transition:background-color .3s var(--ease) }
a.erow:hover{ background:#FAFAFE } a.erow:hover .erow__title{ color:var(--point) } a.erow:hover .erow__go{ background-color:var(--point-light) }
.erow.is-off .erow__title{ color:var(--text-sub); font-weight:500 }
.erow.is-off .erow__go{ visibility:hidden }
.enew{ display:inline-block; margin-left:8px; padding:0 6px; border-radius:6px; font-size:16px; font-weight:800; line-height:22px; color:#fff; background:#FF5A6E; vertical-align:2px }
.eempty{ padding:56px 24px; text-align:center; font-size:17px; color:var(--text-sub) }
.eempty[hidden]{ display:none }

/* ---------- 상세 ---------- */
.edet{ background:#fff }
.edet__grid{ align-items:start }
.edet__main{ grid-column:1 / 8 }
.edet__aside{ grid-column:9 / 13; position:sticky; top:calc(var(--header) + 96px) }
.edet__label{ display:flex; align-items:center; gap:12px; font-size:16px; color:var(--text-sub) }
.edet__title{ margin-top:18px; font-size:clamp(30px,3.4vw,44px); font-weight:700; line-height:1.3; letter-spacing:-.045em; color:var(--text-strong) }
.edet__meta{ margin-top:18px; padding-bottom:28px; border-bottom:1px solid var(--line-strong); display:flex; gap:20px; font-size:16px; color:var(--text-sub); font-variant-numeric:tabular-nums }
.edet__body{ margin-top:36px; font-size:18px; line-height:1.85; color:var(--text-body) }
.edet__body > * + *{ margin-top:20px }
.edet__body h2{ margin-top:48px; font-size:24px; font-weight:700; letter-spacing:-.035em; color:var(--text-strong) }
.edet__body strong{ color:var(--text-strong) }
.demo-note{ padding:14px 18px; border-radius:12px; border:1.5px dashed #E6C34A; background:#FFFBEA; font-size:16px !important; line-height:1.6; color:#7A5B00 }

.ecur{ border-radius:var(--r-lg); overflow:hidden; box-shadow:0 0 0 1px var(--line-strong); font-size:16px }
.ecur__row{ display:grid; grid-template-columns:120px 1fr 140px; gap:16px; padding:18px 24px; border-top:1px solid var(--line); align-items:start }
.ecur__row:first-child{ border-top:0; background:var(--bg-light); font-weight:700; color:var(--text-strong) }
.ecur__row b{ color:var(--text-strong) }
.ecur__day{ font-weight:700; color:var(--point) }
.ecur__sub{ display:block; margin-top:4px; color:var(--text-sub); line-height:1.6 }

.esum{ padding:32px; border-radius:var(--r-xl); background:var(--bg-light) }
.esum__title{ font-size:20px; font-weight:700; letter-spacing:-.03em; color:var(--text-strong) }
.esum dl{ margin-top:18px }
.esum dl div{ display:grid; grid-template-columns:76px 1fr; gap:12px; padding:13px 0; border-top:1px solid var(--line-strong); font-size:16px; line-height:1.6 }
.esum dt{ font-weight:600; color:var(--text-sub) }
.esum dd{ font-weight:600; color:var(--text-strong) }
.esum__dday{ margin-top:18px; padding:14px 16px; border-radius:14px; background:#fff; font-size:16px; font-weight:600; color:var(--text-strong); display:flex; align-items:center; justify-content:space-between }
.esum__dday b{ font-size:22px; color:var(--point); font-variant-numeric:tabular-nums }
.esum .btn{ margin-top:16px; width:100%; justify-content:center; gap:10px }
.esum__help{ margin-top:14px; font-size:16px; line-height:1.6; color:var(--text-sub); text-align:center }
.esum__help a{ color:var(--text-strong); font-weight:600; text-decoration:underline; text-underline-offset:3px }

.epn{ margin-top:64px; border-top:1px solid var(--line-strong) }
.epn a,.epn span{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:16px; align-items:center; min-height:68px; padding:0 4px; border-bottom:1px solid var(--line); font-size:16px; color:var(--text-sub) }
.epn b{ font-weight:600; color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.epn a:hover b{ color:var(--point) }
.edet__back{ margin-top:32px; display:flex; justify-content:center }

/* ---------- 신청서 ---------- */
.eapp{ background:var(--bg-light); padding-top:0; z-index:2 }
.eapp__grid{ align-items:start; translate:0 -64px; margin-bottom:-64px }
.eapp__course{ grid-column:1 / 5; position:sticky; top:calc(var(--header) + 24px) }
.eapp .ct__form,.eapp .ct__done{ grid-column:5 / 13 }
.f-sec{ padding-top:8px; font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--text-strong) }
.f-sec small{ margin-left:8px; font-size:16px; font-weight:500; color:var(--text-sub) }
.f-chips--multi input:checked + span{ color:var(--point-deep); background:var(--point-light); box-shadow:inset 0 0 0 1.5px var(--point) }
.f-step{ display:flex; align-items:center; width:fit-content; border-radius:14px; background:var(--bg-light); overflow:hidden }
.f-step button{ width:52px; height:56px; border:0; background:none; font:inherit; font-size:22px; font-weight:600; color:var(--text-strong); cursor:pointer }
.f-step button:hover{ background:var(--point-light) }
.f-step input{ width:72px; min-height:56px; text-align:center; font-weight:700; background:transparent; padding:0; box-shadow:none !important }

/* ---------- 반응형 ---------- */
@media (max-width:1024px){
  .eintro{ grid-template-columns:1fr }
  .efeat__vis{ grid-column:1 / -1; min-height:220px }
  .efeat__body{ grid-column:1 / -1; padding:8px 32px 36px }
  .erow{ grid-template-columns:56px 96px minmax(0,1fr) 108px 40px } .erow__views{ display:none }
  .edet__main,.edet__aside{ grid-column:1 / -1; position:static } .edet__aside{ margin-top:48px }
  .eapp__course{ grid-column:1 / -1; position:static } .eapp .ct__form,.eapp .ct__done{ grid-column:1 / -1; margin-top:var(--gap) }
}
@media (max-width:767px){
  .eintro{ margin-top:36px } .eintro li{ padding:22px; gap:14px } .eintro img{ width:52px; height:52px }
  .efeat__vis{ padding:26px; min-height:180px } .efeat__body{ padding:4px 22px 28px } .efeat__title{ margin-top:12px; font-size:24px } .efeat__ex{ font-size:16px }
  .ebar{ margin-top:36px } .ebar__search{ width:100% }
  .etable{ border-radius:var(--r-lg) }
  .erow--head{ display:none }
  .erow{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"st go" "ti go" "da go"; gap:6px 12px; padding:18px 20px; min-height:0 }
  .erow__no,.erow__views{ display:none } .erow .ebadge{ grid-area:st; justify-self:start } .erow__title{ grid-area:ti; font-size:17px } .erow__date{ grid-area:da } .erow__go{ grid-area:go }
  .edet__body{ font-size:16px; margin-top:28px } .edet__body h2{ margin-top:36px; font-size:20px }
  .ecur__row{ grid-template-columns:1fr; gap:4px; padding:16px 18px } .ecur__row:first-child{ display:none }
  .esum{ padding:24px 22px }
  .eapp__grid{ translate:0 -40px; margin-bottom:-40px }
}
.epn em{ font-style:normal }
.page-edu .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.edet{ padding:96px 0 var(--sec) }
@media (max-width:767px){ .edet{ padding:56px 0 var(--sec) } }