/* ============================================================
   제이디스칼프 아카데미 — 처음 시안(세이지 바탕 · 흰 시트 · 먹색) 기반 전체 구성
   ============================================================ */
:root{--ink:#192725;--deep:#20312d;--muted:#65706c;--soft:#f3f5f3;--line:#d9dfda;--sage:#e6ebdf;--label:#687c74;--on-dark:#dfe6e1;--on-dark-2:#b7c6bb}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--sage);color:var(--ink);font-family:'Noto Sans KR','Malgun Gothic',sans-serif;line-height:1.65;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #8fae9f;outline-offset:3px;border-radius:6px}

.sheet{max-width:1080px;margin:28px auto 96px;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.block{padding:60px 64px;border-top:1px solid var(--line)}
.block h2{margin:0;font-size:30px;line-height:1.35;font-weight:700;letter-spacing:-1px}
.lead{margin:14px 0 0;font-size:15px;line-height:1.8;color:var(--muted)}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 26px;border-radius:14px;background:var(--ink);color:#fff;font-size:15px;font-weight:500;border:1px solid var(--ink)}
.btn.ghost{background:#fff;color:var(--ink)}
.btn:hover{background:var(--deep)}
.btn.ghost:hover{background:var(--soft)}

/* 1) 소개 */
.profile{background:var(--ink);color:#fff;padding:26px 64px 56px}
.topnav{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;font-size:13px}
.topnav a{color:var(--on-dark-2)}
.topnav a:hover{color:#fff}
.topnav .zoom{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 14px;color:var(--on-dark)}
.profile-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.brandline{margin:0 0 18px;font-family:Arial,sans-serif;font-size:15px;letter-spacing:4px;font-weight:700}
.brandline small{display:block;margin-top:6px;font-family:'Noto Sans KR',sans-serif;font-size:13px;letter-spacing:1px;font-weight:400;color:var(--on-dark-2)}
.profile h1{margin:0;font-size:40px;line-height:1.35;font-weight:700;letter-spacing:-1.5px}
.profile .bio{margin:16px 0 28px;font-size:15px;line-height:1.8;color:var(--on-dark)}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quick a{display:block;padding:12px 10px;border:1px solid rgba(255,255,255,.25);border-radius:12px;text-align:center;font-size:14px;color:#fff}
.quick a:hover{background:rgba(255,255,255,.08)}
.hero-photo{margin:0;border-radius:22px;overflow:hidden;border:3px solid var(--sage);aspect-ratio:4/3;background:var(--deep)}
.hero-photo img{width:100%;height:100%;object-fit:cover}

/* 2) 클래스 */
.courses{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.course{background:var(--soft);border-radius:18px;padding:26px 26px 22px;display:flex;flex-direction:column;border:1px solid transparent;transition:border-color .2s}
.course .meta{font-size:13px;color:var(--label)}
.course h3{margin:6px 0 0;font-size:21px;font-weight:700;letter-spacing:-.5px}
.course p{margin:10px 0 18px;font-size:14px;color:var(--muted);flex:1}
.course .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.course .price{font-size:16px;font-weight:700}
.course .more{font-size:14px;font-weight:500;padding:9px 14px;border-radius:10px;background:#fff;border:1px solid var(--line);white-space:nowrap}
.course .more:hover{border-color:var(--ink)}
.course.is-open{border-color:var(--ink);background:#fff}
.course .more[aria-expanded="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 클래스 상세 */
.course-detail{grid-column:1/-1;position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:36px 36px 30px;margin-top:6px}
.course-detail.is-open{animation:cdIn .3s ease-out}
@keyframes cdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.detail-close{position:absolute;right:20px;top:18px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;color:var(--ink)}
.detail-close:hover{border-color:var(--ink)}
.d-head{padding-right:90px}
.d-head .meta{font-size:13px;color:var(--label)}
.d-head h3{margin:4px 0 0;font-size:24px;font-weight:700;letter-spacing:-.6px}
.d-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:22px;align-items:start}
.d-grid h4{margin:0 0 8px;font-size:17px;font-weight:700;line-height:1.5}
.d-grid p{margin:0 0 12px;font-size:14px;color:var(--muted)}
.rows{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:14px 0}
.rows div{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;font-size:14px;border-top:1px solid var(--line)}
.rows div:first-child{border-top:0}
.rows span{color:var(--muted)}
.rows b{font-weight:700;text-align:right}
.rows small{color:var(--label);font-size:13px;text-align:right}
.note{background:var(--soft);border-radius:14px;padding:14px 16px;font-size:13.5px;line-height:1.7;color:var(--muted);margin:12px 0}
.note b{color:var(--ink)}
.d-photo{margin:14px 0 0;border-radius:16px;overflow:hidden;background:var(--soft);aspect-ratio:4/3}
.d-photo img{width:100%;height:100%;object-fit:cover}
.d-link{display:inline-block;margin:6px 0 0;font-size:14px;font-weight:500;border-bottom:1px solid var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.chips span{background:var(--soft);border-radius:10px;padding:8px 12px;font-size:13.5px}
/* 자동으로 채워지는 온라인 10강 · 12주 목록 */
.curriculum{display:grid;gap:8px}
.lesson{display:grid;grid-template-columns:36px 1fr;gap:10px;background:var(--soft);border-radius:12px;padding:12px 14px}
.lesson span{font-size:13px;font-weight:700;color:var(--label);padding-top:2px}
.lesson h4{margin:0;font-size:15px}
.lesson p{margin:2px 0 0;font-size:13px}
.weeks{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:12px 0}
.weeks div{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:11px 16px;font-size:14px;border-top:1px solid var(--line)}
.weeks div:first-child{border-top:0}
.weeks b{font-weight:700}
.weeks span{color:var(--muted)}

/* 3) 창업 과정 */
.startup-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.startup h2{font-size:34px;line-height:1.3;letter-spacing:-1.2px}
.road{list-style:none;margin:0;padding:0;counter-reset:step}
.road li{position:relative;padding:0 0 24px 52px;counter-increment:step}
.road li:before{content:counter(step);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:var(--sage);color:var(--ink);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.road li:after{content:"";position:absolute;left:16.5px;top:38px;bottom:4px;width:1px;background:var(--line)}
.road li:last-child{padding-bottom:0}
.road li:last-child:after{display:none}
.road li:last-child:before{background:var(--ink);color:#fff}
.road b{display:block;padding-top:4px;font-size:17px;letter-spacing:-.3px}
.road span{display:block;margin-top:3px;font-size:14px;line-height:1.65;color:var(--muted)}
.mentor{margin:26px 0 0;padding:18px 20px;border-radius:14px;background:var(--soft);font-size:15px;line-height:1.7}
.mentor strong{font-weight:700}
.yt-note{margin:18px 0 10px;font-size:14px;color:var(--muted)}
.startup .btn.ghost{width:100%}

/* 4) 자주 묻는 질문 */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}
details{border-top:1px solid var(--line);padding:16px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;font-size:15px;font-weight:500;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:20px;line-height:1;color:var(--label)}
details[open] summary:after{content:"–"}
details p{margin:10px 0 0;font-size:14px;color:var(--muted)}

/* 5) 상담 */
.consult{background:var(--soft);text-align:center}
.consult .links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.foot{text-align:center;padding:26px;font-size:12px;color:var(--muted)}
.sticky{display:none}

/* 태블릿 */
@media(max-width:900px){
  .block{padding:48px 36px}.profile{padding:24px 36px 48px}
  .profile-grid,.startup-grid,.faq-grid{grid-template-columns:1fr;gap:30px}
  .profile h1{font-size:34px}
}
/* 휴대폰 (처음 시안 그대로의 한 줄 카드) */
@media(max-width:620px){
  .sheet{margin:0 0 84px;border-radius:0;box-shadow:none}
  .block{padding:36px 22px}
  .profile{padding:18px 22px 36px;text-align:center}
  .topnav{margin-bottom:28px}
  .profile h1{font-size:28px;letter-spacing:-1px}
  .profile .bio{font-size:14px}
  .hero-photo{order:-1;max-width:360px;margin:0 auto;border-radius:18px}
  .block h2{font-size:24px}
  .startup h2{font-size:28px}
  .courses{grid-template-columns:1fr;gap:10px}
  .course{padding:22px 20px 18px}
  .course-detail{padding:52px 18px 22px;margin:0 0 6px}
  .detail-close{right:14px;top:12px}
  .d-head{padding-right:0}
  .d-grid{grid-template-columns:1fr;gap:18px}
  .consult .btn{width:100%}
  .sticky{display:block;position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:calc(100% - 32px);max-width:448px;text-align:center;padding:15px;border-radius:16px;background:var(--sage);color:var(--ink);font-weight:700;border:1px solid var(--ink);box-shadow:0 6px 20px rgba(25,39,37,.25);z-index:20}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.course-detail.is-open{animation:none}}

/* 태블릿·휴대폰: 창업 구역을 처음 시안 순서(제목 → 소개 → 단계 → 멘토 → 유튜브)로 */
@media(max-width:900px){
  .startup-grid{display:flex;flex-direction:column;gap:0}
  .startup-grid > div{display:contents}
  .startup h2{order:1}.startup .lead{order:2}.road{order:3;margin-top:28px}
  .mentor{order:4}.yt-note{order:5}.startup .btn{order:6}
}

/* 클래스 카드마다 조금씩 다른 바탕 (펼치면 흰색) — 상세가 끼어도 순서가 안 바뀌게 article 순서로 */
.courses > article:nth-of-type(1){background:#eaf2ee}   /* 온라인: 민트빛 */
.courses > article:nth-of-type(2){background:#f5f0e6}   /* 원데이: 모래빛 */
.courses > article:nth-of-type(3){background:#eaeee3}   /* 종합반: 세이지 */
.courses > article:nth-of-type(4){background:#f2ece9}   /* 1+1: 따뜻한 회갈빛 */
.courses > article.course.is-open{background:#fff}
.course .price small{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:var(--muted)}
.rows .total{background:var(--soft)}
.rows .total span{color:var(--ink);font-weight:500}

/* 유튜브 영상 카드: 작은 썸네일 + 로고 + 제목, 누르면 유튜브로 이동 */
.yt-card{display:flex;align-items:center;gap:16px;padding:12px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:border-color .2s,box-shadow .2s}
.yt-card:hover{border-color:var(--ink);box-shadow:0 10px 24px rgba(25,39,37,.10)}
.yt-thumb{position:relative;flex:none;width:176px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#111}
.yt-thumb img{width:100%;height:100%;object-fit:cover}
.yt-play{position:absolute;left:50%;top:50%;width:46px;height:33px;margin:-16.5px 0 0 -23px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));transition:transform .2s}
.yt-play svg{width:100%;height:100%;display:block}
.yt-card:hover .yt-play{transform:scale(1.08)}
.yt-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.yt-brand{display:inline-flex;align-items:center;gap:6px;font:700 13px/1 Arial,sans-serif;letter-spacing:-.3px;color:#0f0f0f}
.yt-icon{width:21px;height:15px}
.yt-meta b{font-size:15px;line-height:1.45;font-weight:700;color:var(--ink)}
.yt-meta small{font-size:12.5px;color:var(--muted)}
@media(max-width:900px){.yt-card{order:6}}
@media(max-width:620px){.yt-thumb{width:132px}.yt-meta b{font-size:14px}}