:root{
  --bg:#fff8ee; --panel:#ffffff; --tint:#fff0dc; --line:#f3e3cb;
  --text:#4a3f35; --muted:#8a7a6a;
  --brand:#0e7c8c; --brand-dark:#0a5f6c; --brand-soft:#dff1f3;
  --ang:#a8621c; --ang-soft:#f8e3cc;
  --liv:#e0314f; --liv-soft:#fde0e4;
  --pang:#1f73c4; --pang-soft:#d9ecfb;
  --lino:#4e8f2f; --lino-soft:#e1f0d6;
  --r:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.8 'Gowun Dodum','Malgun Gothic',sans-serif;word-break:keep-all}
h1,h2,h3,h4,.btn,.pill,.tag,.eyebrow,.nav nav,.type-chip,.step-no,.footer-name{font-family:'Jua','Gowun Dodum',sans-serif;font-weight:400}
a{color:inherit;text-decoration:none}
img{display:block}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.center{text-align:center}
.pc{display:inline}

/* 이미지 한 장에서 필요한 부분만 잘라 보여주기 */
.crop{display:block;position:relative;overflow:hidden}
.crop img{position:absolute;max-width:none;height:auto;filter:brightness(1.04)}
.logo-crop{height:44px;aspect-ratio:1810/340}
.logo-crop img{width:110.5%;left:-5.25%;top:-44.12%}
.group-crop{width:100%;aspect-ratio:1490/620}
.group-crop img{width:103.09%;left:-2.01%;top:-11.29%}
.ch-ang{height:64.7%;aspect-ratio:285/385}
.ch-ang img{width:538.95%;left:-17.54%;top:-76.62%}
.ch-liv{height:91.6%;aspect-ratio:380/545}
.ch-liv img{width:404.21%;left:-94.74%;top:-24.77%}
.ch-pang{height:100%;aspect-ratio:425/595}
.ch-pang img{width:361.41%;left:-176.47%;top:-14.29%}
.ch-lino{height:57.1%;aspect-ratio:340/340}
.ch-lino img{width:451.76%;left:-344.12%;top:-100%}

/* 머리글 */
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.nav nav{display:flex;align-items:center;gap:4px;font-size:1.05rem}
.nav nav a{padding:8px 14px;border-radius:999px;color:var(--text);transition:background .15s,color .15s}
.nav nav a:hover{background:var(--brand-soft);color:var(--brand-dark)}
.nav nav a.nav-cta{background:var(--brand);color:#fff;margin-left:6px}
.nav nav a.nav-cta:hover{background:var(--brand-dark);color:#fff}

/* 첫 화면 */
.hero{position:relative;background:#fff;padding:56px 0 110px;overflow:hidden}
.hero-in>*,.friends>*,.values>*,.steps>*{min-width:0}
.hero-in{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:center}
.pill{display:inline-block;padding:6px 16px;border-radius:999px;background:var(--brand-soft);color:var(--brand-dark);font-size:.95rem}
.hero h1{font-size:clamp(1.9rem,4vw,3rem);line-height:1.35;margin:18px 0 16px;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--brand);background:linear-gradient(transparent 62%,#ffe7a8 62%)}
.hero p{margin:0 0 28px;color:var(--muted);font-size:1.08rem}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:999px;background:var(--brand);color:#fff;font-size:1.08rem;border:2px solid var(--brand);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(14,124,140,.6)}
.btn-ghost{background:#fff;color:var(--brand-dark)}
.wave{position:absolute;left:0;bottom:-1px;width:100%;height:70px;fill:var(--bg)}

/* 공통 섹션 */
.section{padding:84px 0}
.section.tint{background:var(--tint)}
.eyebrow{display:inline-block;color:var(--brand);letter-spacing:.18em;font-size:.9rem}
.section h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:6px 0 18px;line-height:1.35}
.section p{margin:0 0 12px}
.lead{font-size:1.15rem}
.lead b,.section p b{color:var(--brand-dark)}

/* 소개 영상 */
.video-section{padding-top:40px}
.video-wrap{max-width:920px;margin-top:28px}
.video-wrap video{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r);background:#f3e8d6;border:6px solid #fff;box-shadow:0 20px 50px -24px rgba(120,80,20,.55)}

/* 소개 */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.value{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:30px 24px;text-align:center;box-shadow:0 10px 30px -22px rgba(120,80,20,.5)}
.value-ico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:var(--tint);font-size:1.8rem}
.value h3{margin:0 0 6px;font-size:1.3rem}
.value p{margin:0;color:var(--muted);font-size:1rem}

/* 기질 종류 */
.type-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.type-chip{padding:12px 24px;border-radius:999px;font-size:1.15rem;background:var(--soft);color:var(--main);border:2px solid transparent;transition:transform .15s,border-color .15s}
.type-chip:hover{transform:translateY(-3px);border-color:var(--main)}
.c-ang{--main:var(--ang);--soft:var(--ang-soft)}
.c-liv{--main:var(--liv);--soft:var(--liv-soft)}
.c-pang{--main:var(--pang);--soft:var(--pang-soft)}
.c-lino{--main:var(--lino);--soft:var(--lino-soft)}

/* 캐릭터 */
.friends{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:44px}
.friend{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 14px 36px -26px rgba(120,80,20,.55);border-top:8px solid var(--main)}
.stage{height:300px;display:flex;align-items:flex-end;justify-content:center;padding:20px 20px 0;background:#fff}
.friend-body{padding:8px 32px 32px}
.friend h3{font-size:2.1rem;margin:10px 0 6px;color:var(--main);text-align:center}
.tag{display:block;width:max-content;margin:0 auto 16px;padding:4px 18px;border-radius:999px;background:var(--soft);color:var(--main);font-size:1.05rem}
.quote{text-align:center;font-size:1.08rem;color:var(--main);margin:0 0 16px !important}
.friend h4{margin:20px 0 8px;font-size:1.1rem;color:var(--main)}
.friend ul{margin:0;padding:0;list-style:none}
.friend li{position:relative;padding-left:22px;margin-bottom:4px;font-size:1rem}
.friend li::before{content:"";position:absolute;left:4px;top:.72em;width:9px;height:9px;border-radius:50%;background:var(--main);opacity:.75}
.tip{margin:20px 0 0 !important;padding:16px 18px;border-radius:18px;background:var(--soft);font-size:.98rem;line-height:1.7}
.tip b{display:block;color:var(--main) !important;font-family:'Jua',sans-serif;font-weight:400;font-size:1.05rem;margin-bottom:2px}

/* 프로그램 */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:40px auto 0}
.step{background:var(--panel);border-radius:var(--r);padding:30px 24px;text-align:center;border:1px solid var(--line)}
.step-no{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 12px;border-radius:50%;background:var(--brand);color:#fff;font-size:1.5rem}
.step h3{margin:0 0 6px;font-size:1.3rem}
.step p{margin:0;color:var(--muted);font-size:1rem}

/* 강의 */
.perks{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:32px}
.perk{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:180px;padding:18px 24px;border-radius:22px;background:var(--brand-soft);color:var(--brand-dark)}
.perk span{font-size:1.7rem;line-height:1.3}
.perk b{font-family:'Jua',sans-serif;font-weight:400;font-size:1.15rem}
.perk small{font-size:.9rem;color:var(--muted)}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.course-grid>*{min-width:0}
.course{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 14px 36px -26px rgba(120,80,20,.55);display:flex;flex-direction:column}
.course-thumb{position:relative;aspect-ratio:16/9;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-soft),var(--tint))}
.course-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.play{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;color:var(--brand);font-size:1.3rem;padding-left:4px;box-shadow:0 8px 20px -8px rgba(14,124,140,.6)}
.course-thumb.locked::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,30,20,.05),rgba(40,30,20,.55))}
.lock{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--brand-dark);font-family:'Jua',sans-serif;font-size:1rem;box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.dur{position:absolute;z-index:1;right:10px;bottom:10px;padding:2px 9px;border-radius:8px;background:rgba(0,0,0,.65);color:#fff;font-size:.82rem}
.soon{position:absolute;top:12px;left:12px;padding:3px 12px;border-radius:999px;background:#fff;color:var(--muted);font-size:.85rem}
.course-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.course-cat{font-size:.88rem;color:var(--brand)}
.course h3{margin:4px 0 6px;font-size:1.3rem;line-height:1.4}
.course p{margin:0 0 12px;color:var(--muted);font-size:.98rem}
.course-meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;font-size:.9rem}
.course-meta li{padding:3px 12px;border-radius:999px;background:var(--tint)}
.course-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line)}
.price{font-family:'Jua',sans-serif;font-size:1.2rem;color:var(--brand-dark)}
.btn-small{padding:8px 18px;font-size:1rem}
.btn.is-off{background:#e9e2d6;border-color:#e9e2d6;color:#9a8d7c;cursor:default;pointer-events:none}

/* 문의 */
.contact-card{margin-top:28px;padding:32px 24px;background:var(--panel);border:2px dashed var(--line);border-radius:var(--r)}
.contact-wait{margin:0 !important;color:var(--muted)}

/* 바닥글 */
.site-footer{background:var(--brand-dark);color:#d7eef1;padding:32px 0;font-size:.95rem}
.footer-in{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.footer-name{font-size:1.15rem;color:#fff}

@media(max-width:900px){
  .hero-in{grid-template-columns:1fr;text-align:center}
  .hero-art{order:-1}
  .hero-cta{justify-content:center}
  .pc{display:none}
  .friends{grid-template-columns:1fr}
}
@media(max-width:720px){
  body{font-size:16px}
  .nav{height:60px}
  .logo-crop{height:32px}
  .nav nav{font-size:.95rem;gap:0}
  .nav nav a{padding:6px 8px}
  .nav nav a:not(.nav-cta):nth-child(-n+3){display:none}
  .section{padding:60px 0}
  .values,.steps,.course-grid{grid-template-columns:1fr}
  .stage{height:240px}
  .friend-body{padding:8px 22px 26px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.type-chip{transition:none}}