@font-face{font-family:'Pretendard Variable';font-weight:45 920;font-style:normal;font-display:swap;src:url(pretendard.woff2) format('woff2-variations')}
/* 레이아웃: 퓨어 블랙(#000000) 에디토리얼 밴드(1200px 컨테이너, 12분할) + 수강료만 화이트 밴드. 모서리 0px, 강조색은 #f2030d 하나. 폰트는 Pretendard. */
  :root{
    color-scheme:dark;
    /* color */
    --primary:#f2030d; --primary-active:#c0020a; --on-primary:#ffffff;
    --ink:#ffffff; --body:#969696; --muted:#666666; --muted-soft:#8f8f8f;
    --canvas:#000000; --canvas-elevated:#303030; --hairline:#303030;
    --canvas-light:#ffffff; --on-light:#000000; --muted-on-light:#666666;
    --hairline-on-light:#d2d2d2; --surface-soft-light:#f7f7f7; --surface-strong-light:#ebebeb;
    --focus:#f6e500; --gold:#c9a961;
    /* spacing ladder */
    --xxxs:4px; --xxs:8px; --xs:16px; --sm:24px; --md:32px; --lg:48px; --xl:64px; --xxl:96px; --super:128px;
    /* type */
    --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--canvas);color:var(--body);font-family:var(--sans);font-size:16px;font-weight:500;line-height:1.6;-webkit-font-smoothing:antialiased;padding-bottom:72px;word-break:keep-all}
  a{color:inherit}
  a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
  .wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--lg)}

  /* type roles */
  .label{font-size:12px;font-weight:700;line-height:1.4;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted-soft)}
  .d-lg{font-size:clamp(26px,3.4vw,36px);font-weight:700;line-height:1.28;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
  .d-md{font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.45;color:var(--ink)}
  .t-md{font-size:18px;font-weight:800;line-height:1.35;color:var(--ink)}
  .strong{color:var(--ink)}
  .num{font-variant-numeric:tabular-nums}

  /* buttons : 0px corners */
  .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 32px;font-size:15px;font-weight:800;line-height:1;letter-spacing:1.4px;text-decoration:none;border:1px solid var(--primary);background:var(--primary);color:var(--on-primary);border-radius:0;white-space:nowrap}
  .btn:active{background:var(--primary-active);border-color:var(--primary-active)}
  .btn.outline{background:transparent;border-color:var(--ink);color:var(--ink)}
  .btn.outline:active{background:var(--canvas-elevated)}
  .btns{display:flex;gap:var(--xs);flex-wrap:wrap}
  .text-link{display:flex;justify-content:space-between;gap:var(--xs);align-items:center;padding:var(--xs) 0;font-size:14px;font-weight:800;letter-spacing:1.1px;text-decoration:none;color:var(--ink);border-top:1px solid var(--hairline)}
  .pill{display:inline-block;background:var(--canvas-elevated);color:var(--ink);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:1.1px;border-radius:9999px;padding:5px 14px;white-space:nowrap}

  /* top nav */
  .nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--canvas);border-bottom:1px solid var(--hairline)}
  .nav-in{height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--sm)}
  .brand-logo{display:block;height:40px;width:auto;margin-right:12px}
  .brand{display:flex;align-items:center;font-size:15px;font-weight:800;letter-spacing:1.4px;color:var(--ink);text-decoration:none;white-space:nowrap}
  .brand span{color:var(--body);font-weight:700;letter-spacing:.65px;margin-left:var(--xxs)}
  .menu{display:flex;gap:var(--md)}
  .menu a{font-size:13px;font-weight:700;letter-spacing:.65px;color:var(--ink);text-decoration:none;padding-block:var(--xs)}

  /* hero */
  .hero{position:relative;overflow:hidden;background:var(--canvas);border-bottom:1px solid var(--hairline)}
  .hero-in{position:relative;z-index:1;padding-block:var(--xxl) var(--xl)}
  .hero h1{font-size:clamp(34px,7vw,80px);font-weight:800;line-height:1.14;letter-spacing:-.02em;color:var(--ink);margin-block:var(--sm) var(--md)}
  .hero-tag{font-size:clamp(18px,2.3vw,26px);font-weight:700;line-height:1.4;color:var(--gold);margin-top:calc(var(--xs) - var(--md));margin-bottom:var(--sm)}
  .hero-sub{font-size:clamp(16px,1.6vw,18px);max-width:680px;margin-bottom:var(--lg)}
  .hero-stage{position:relative;overflow:hidden}
  #flow-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 50% 62% at 50% 50%,rgba(0,0,0,.16) 0%,rgba(0,0,0,.16) 40%,#000 100%);mask-image:radial-gradient(ellipse 50% 62% at 50% 50%,rgba(0,0,0,.16) 0%,rgba(0,0,0,.16) 40%,#000 100%)}
  .hero-in{text-align:center}
  .hero-in .hero-sub{margin-inline:auto}
  .hero-in .btns{justify-content:center}
  .rv{display:block;overflow:hidden;padding-block:.08em;margin-block:-.08em}
  .rv>span{display:block;animation:rise 1.1s cubic-bezier(.16,1,.3,1) both}
  .rv:nth-child(2)>span{animation-delay:.14s}
  .rv:nth-child(3)>span{animation-delay:.28s}
  @keyframes rise{from{transform:translateY(118%)}to{transform:none}}
  .cd{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--lg);padding-block:var(--md) var(--xl);border-top:1px solid var(--hairline)}
  .cd-info{min-width:0}
  .cd-date{font-size:18px;font-weight:700;color:var(--ink);margin-top:var(--xxs)}
  .cd-next{font-size:14px;margin-top:var(--xxs)}
  .cd-grid{display:flex;gap:clamp(16px,3vw,48px)}
  .cd-num{font-size:clamp(40px,6.4vw,80px);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
  .cd-cell .label{margin-top:var(--xxs)}

  /* section bands */
  .band{padding-block:var(--xxl);border-bottom:1px solid var(--hairline);scroll-margin-top:64px}
  .head{margin-bottom:var(--lg)}
  .head .label{margin-bottom:var(--xs)}
  .head p{margin-top:var(--xs);max-width:640px}
  .cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--md);row-gap:var(--lg)}
  .c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}

  /* cards / lists */
  .card{background:var(--canvas);border:1px solid var(--hairline);padding:var(--md)}
  .card .t-md{margin-bottom:var(--xs)}
  .dots{list-style:none}
  .dots li{position:relative;padding:6px 0 6px 20px;color:var(--ink)}
  .dots li::before{content:"";position:absolute;left:0;top:16px;width:5px;height:5px;background:var(--ink)}
  .dots.soft li{color:var(--body)}
  .dots.soft li::before{background:var(--body)}
  .rows{list-style:none;border-top:1px solid var(--hairline)}
  .rows li{display:flex;gap:var(--xs);align-items:baseline;padding:var(--xs) 0;border-bottom:1px solid var(--hairline)}

  /* curriculum */
  .part .label{margin-bottom:var(--xxs)}
  .part .d-md{margin-bottom:var(--xs)}
  .part .rows{margin-top:var(--sm)}
  .part+.part{margin-top:var(--xl)}
  .prog{list-style:none;border-top:1px solid var(--hairline);margin-top:var(--sm)}
  .prog>li{border-bottom:1px solid var(--hairline)}
  .prog summary{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--md);align-items:baseline;padding:var(--sm) 0;cursor:pointer;list-style:none}
  .prog summary::-webkit-details-marker{display:none}
  .prog summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  .pg-when{grid-column:span 2;display:flex;gap:var(--xs);align-items:baseline;font-size:18px}
  .pg-title{grid-column:span 9;font-size:18px;font-weight:800;line-height:1.35;color:var(--ink)}
  .pg-ico{grid-column:span 1;justify-self:end;align-self:center;position:relative;width:16px;height:16px}
  .pg-ico::before,.pg-ico::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--ink);transform:translateY(-50%)}
  .pg-ico::after{transform:translateY(-50%) rotate(90deg);transition:transform .2s}
  details[open]>summary .pg-ico::after{transform:translateY(-50%) rotate(0deg)}
  .pg-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--md);row-gap:var(--xs);padding-bottom:var(--sm)}
  .pg-main{grid-column:3 / span 6}
  .pg-side{grid-column:span 4}
  .pg-side p{color:var(--ink);font-size:15px;margin-top:2px}
  .wk-no{color:var(--ink);font-weight:800;min-width:44px}
  .wk-date{min-width:52px;font-variant-numeric:tabular-nums}
  .wk-topic{color:var(--ink);min-width:0}
  .note{font-size:14px;margin-top:var(--md)}

  /* schedule */
  .sched li{align-items:center;flex-wrap:wrap;padding:20px 0}
  .s-date{color:var(--ink);font-weight:700;min-width:210px;font-variant-numeric:tabular-nums}
  .s-desc{color:var(--ink);flex:1;min-width:0}
  .s-desc small{color:var(--body);font-size:16px}

  /* livery band */
  .livery{background:var(--primary);color:var(--on-primary);padding-block:var(--xxl)}
  .livery p{font-size:clamp(26px,3.6vw,40px);font-weight:700;line-height:1.3;letter-spacing:-.01em;max-width:820px;text-wrap:balance}

  /* instructor */
  .ins-photo{display:block;width:160px;height:160px;border-radius:9999px;object-fit:cover;margin-bottom:var(--sm)}
  .bio li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--xs);align-items:baseline}
  .bio .label{color:var(--muted-soft)}
  .ins-name{font-size:clamp(40px,5vw,56px);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin-top:var(--xs)}
  .ins-role{font-size:16px;font-weight:700;color:var(--ink);margin:var(--xxs) 0 var(--sm)}
  .ins-links{margin-top:var(--md)}
  .quote{margin-top:var(--xl);max-width:900px}
  .quote cite{display:block;margin-top:var(--xs);font-style:normal}

  /* price : light band */
  .light{background:var(--canvas-light);color:var(--muted-on-light);border-bottom-color:var(--hairline-on-light)}
  .light .label{color:var(--muted-on-light)}
  .light .d-lg{color:var(--on-light)}
  .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sm)}
  .pgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcard{border:1px solid var(--hairline-on-light);background:var(--canvas-light);padding:var(--md);display:flex;flex-direction:column;gap:var(--xxs)}
  .pcard.base{background:var(--surface-soft-light)}
  .p-top{display:flex;justify-content:space-between;align-items:center;gap:var(--xxs);min-height:28px}
  .p-top .label{color:var(--on-light)}
  .pill.on-light{background:var(--surface-strong-light);color:var(--on-light)}
  .p-when{font-size:15px;color:var(--on-light)}
  .p-price{font-size:clamp(40px,4.6vw,56px);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--on-light);font-variant-numeric:tabular-nums;margin-top:var(--sm)}
  .p-price small{font-size:18px;font-weight:700;letter-spacing:0;margin-left:2px}
  .pcard.first .p-price{color:var(--primary)}
  .p-off{font-size:14px}
  .p-off b{color:var(--on-light);font-weight:800}
  .light .note{color:var(--muted-on-light)}
  .light .btns{margin-top:var(--md)}

  /* faq */
  .faq{border-top:1px solid var(--hairline)}
  .faq>div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--md);row-gap:var(--xxs);padding:var(--sm) 0;border-bottom:1px solid var(--hairline)}
  .faq dt{grid-column:span 5}
  .faq dd{grid-column:span 7}

  /* closing / footer / sticky */
  .closing{padding-block:var(--xxl);text-align:center;border-bottom:1px solid var(--hairline)}
  .closing .d-lg{margin-bottom:var(--md)}
  .closing .btns{justify-content:center}
  footer{padding-block:var(--xl);font-size:13px;line-height:1.7}
  footer .strong{font-weight:700}
  footer .tag{font-size:15px;font-weight:700;color:var(--gold);margin-bottom:var(--xxs)}
  footer .contact{margin-top:var(--xxs);user-select:all}
  .sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--canvas);border-top:1px solid var(--hairline);padding:12px var(--xs) calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:var(--sm);align-items:center;justify-content:center}
  .sticky .t{font-size:13px}
  .sticky .t b{color:var(--ink);font-weight:700}
  .sticky .btn{min-height:44px;padding:12px 24px;font-size:14px}

  @media(max-width:1024px){
    .wrap{padding-inline:var(--md)}
    .pgrid,.pgrid.two{grid-template-columns:1fr}
  }
  @media(max-width:860px){
    .menu{display:none}
    .c5,.c6,.c7{grid-column:1/-1}
    .cols,.pg-body,.faq>div{column-gap:0}   /* 12칸 격자의 칸 사이 간격(11×32px)이 좁은 화면을 밀어내지 않게 */
    .cd{flex-direction:column;align-items:flex-start;gap:var(--sm)}
    .faq dt,.faq dd{grid-column:1/-1}
    .prog summary{grid-template-columns:minmax(0,1fr) 24px;row-gap:var(--xxxs)}
    .pg-when{grid-column:1;grid-row:1}
    .pg-title{grid-column:1;grid-row:2}
    .pg-ico{grid-column:2;grid-row:1 / span 2}
    .pg-main,.pg-side{grid-column:1/-1}
  }
  @media(max-width:640px){
    .wrap{padding-inline:20px}
    .band,.livery,.closing{padding-block:var(--xl)}
    .hero-in{padding-block:var(--xl) var(--lg)}
    .btns .btn{flex:1 1 auto}
    .s-date{min-width:0;flex:1 1 100%}
    .sched li{gap:var(--xxs) var(--xs)}
    .card{padding:var(--sm)}
    .pcard{padding:var(--sm)}
    .sticky .t{font-size:12px}
  }
  @media(max-width:420px){.sticky .t{display:none}.sticky .btn{flex:1}.brand-logo{height:34px;margin-right:10px}}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv>span{animation:none}.pg-ico::after{transition:none}}

/* 안내봇 위치: 하단 고정 바 위 */
#aiclab-mbot::part(wrap){bottom:calc(88px + env(safe-area-inset-bottom,0px))}