/* PSD 900 × 7842px의 좌표와 타이포그래피를 기준으로 합니다. */
@font-face{font-family:'NanumBarunGothic';src:url('assets/fonts/NanumBarunGothicLight.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'NanumBarunGothic';src:url('assets/fonts/NanumBarunGothic.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'NanumBarunGothic';src:url('assets/fonts/NanumBarunGothicBold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'NanumMyeongjo';src:url('assets/fonts/NanumMyeongjo.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'NanumMyeongjo';src:url('assets/fonts/NanumMyeongjoBold.otf') format('opentype');font-weight:700;font-display:swap}
:root{--u:min(1px,.1111111111vw);--bg:#2f2f2f;--gold-bg:#2f2f2f;--gold:#e2b662;--teal:#02fbfc;--sans:'NanumBarunGothic',sans-serif;--serif:'NanumMyeongjo',serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--bg);color:#fff;font-family:var(--sans);font-size:calc(26 * var(--u));font-weight:300;line-height:calc(46 * var(--u));word-break:keep-all;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}img{display:block;max-width:100%;height:auto}h1,h2,h3,h4,p,figure,dl,dd{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400}h2,h3{font-size:calc(29.7253 * var(--u));line-height:calc(46 * var(--u))}ul,ol{list-style:none;margin:0;padding:0}em{font-style:normal;color:var(--gold)}[hidden]{display:none!important}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--teal);outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;left:20px;top:-100px;background:var(--teal);color:var(--bg);padding:12px;z-index:100;font-size:16px}.skip-link:focus{top:15px}.page-shell{max-width:900px;margin:auto;position:relative}.container{width:calc(760 * var(--u));margin-inline:auto}.section-gold{background:var(--gold-bg)}
.button{display:inline-flex;justify-content:center;align-items:center;width:calc(261 * var(--u));height:calc(104 * var(--u));border:2px solid #fff;background:transparent;font-family:var(--sans);font-weight:300;font-size:calc(28 * var(--u));line-height:1.5;white-space:nowrap;transition:background .2s,color .2s}.button:hover{background:#fff;color:var(--bg)}.button-accent{border-color:var(--teal);color:var(--teal)}.button-accent:hover{background:var(--teal);color:var(--bg)}
.header{height:calc(138 * var(--u));position:relative;z-index:20}.header-inner{height:100%;width:calc(800 * var(--u));margin:auto;border-bottom:1px solid #666;position:relative}.brand{position:absolute;left:calc(20 * var(--u));top:calc(49 * var(--u));z-index:2}.brand img{width:calc(116 * var(--u));height:calc(51 * var(--u))}.header nav{position:absolute;inset:0}.header nav a{position:absolute;top:calc(34 * var(--u));font-size:calc(28 * var(--u));line-height:calc(80 * var(--u));letter-spacing:-.025em}.header nav a:nth-child(1){left:calc(262 * var(--u))}.header nav a:nth-child(2){left:calc(389 * var(--u))}.header nav a:nth-child(3){left:calc(590 * var(--u))}.header nav a:nth-child(4){left:calc(715 * var(--u));color:var(--teal)}.header nav a:hover{color:var(--gold)}.menu-toggle{display:none}
.hero{height:calc(886 * var(--u));background:url('assets/hero-background.webp') center bottom/calc(900 * var(--u)) calc(1024 * var(--u)) no-repeat;overflow:hidden}.hero-inner{height:100%;position:relative}.hero-copy h1{position:absolute;left:0;top:calc(83 * var(--u));font-size:calc(52 * var(--u));line-height:calc(80 * var(--u));letter-spacing:-.025em}.hero-description{position:absolute;left:0;top:calc(481 * var(--u));font-size:calc(23 * var(--u));line-height:calc(46 * var(--u));color:#a2a1a1}.private-note{position:absolute;left:0;top:calc(573 * var(--u));font-size:calc(23 * var(--u));line-height:calc(46 * var(--u));color:var(--gold);white-space:nowrap}.hero-actions{position:absolute;left:0;top:calc(685 * var(--u));display:flex;gap:calc(20 * var(--u));width:100%}.hero-actions .button{width:calc(353 * var(--u))}
.about{padding:calc(68 * var(--u)) 0 calc(103 * var(--u))}.section h2,.schedule-heading h3{color:var(--gold)}.about h2{margin-left:calc(-3 * var(--u));font-size:calc(29.7253 * var(--u))}.about-copy{width:100%}.about-copy>p{margin-top:calc(31 * var(--u));line-height:calc(46 * var(--u));letter-spacing:0}.film-carousel{margin-top:calc(63 * var(--u))}
.media-carousel{position:relative;width:100%;padding-bottom:calc(51 * var(--u))}
.media-view{width:calc(592 * var(--u));margin-inline:auto;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.film-frame{margin-top:0;aspect-ratio:592/1054;background:#000;overflow:hidden}
.film-frame video{width:100%;height:100%;display:block;object-fit:contain}
.media-track{display:flex;height:100%;align-items:stretch;transition:transform .35s ease;will-change:transform}
.media-slide{flex:0 0 100%;min-width:0;position:relative;margin:0}
.film-slide video{display:block;width:100%;height:100%;object-fit:contain}
.portfolio-view{aspect-ratio:592/741;background:#000}
.portfolio-slide img{height:100%;width:100%;aspect-ratio:auto;object-fit:contain;background:#000;pointer-events:none;-webkit-user-drag:none}
.portfolio-slide figcaption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;opacity:0;pointer-events:none}
.media-empty,.portfolio-empty{flex:0 0 100%;width:100%;height:100%;min-width:0;aspect-ratio:auto;background:#000;padding:calc(42 * var(--u)) calc(49 * var(--u));font-size:calc(23 * var(--u));line-height:calc(46 * var(--u));font-weight:300}
.media-carousel .carousel-arrow{position:absolute;top:calc((100% - 51 * var(--u)) / 2);transform:translateY(-50%);width:calc(57 * var(--u));height:calc(92 * var(--u));min-width:28px;min-height:44px;background:none;border:0;padding:0;display:grid;place-items:center;z-index:2;cursor:pointer}
.media-carousel .previous{left:0}.media-carousel .next{right:0}
.carousel-arrow:after{content:'';width:calc(49 * var(--u));height:calc(49 * var(--u));border-top:calc(3 * var(--u)) solid #ddd;border-right:calc(3 * var(--u)) solid #ddd;transform:rotate(45deg)}
.carousel-arrow.previous:after{transform:rotate(-135deg)}.carousel-arrow:disabled{opacity:.35;cursor:default}.carousel-arrow:hover:not(:disabled):after{border-color:#fff}
.carousel-dots{position:absolute;bottom:calc(-15 * var(--u));left:calc(77 * var(--u));right:calc(77 * var(--u));height:calc(44 * var(--u));min-height:28px;display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;overflow-x:auto;gap:0}
.carousel-dots button{flex:0 0 calc(20 * var(--u));width:calc(20 * var(--u));height:100%;min-width:14px;padding:0;border:0;background:none;display:grid;place-items:center}
.carousel-dots button:after,.empty-dot{content:'';display:block;width:calc(13 * var(--u));height:calc(13 * var(--u));min-width:5px;min-height:5px;border-radius:50%;background:#777}
.carousel-dots button[aria-current=true]:after{background:#fff}.is-dragging .media-track{transition:none}.is-dragging .media-view{cursor:grabbing}
.portfolio{padding:calc(68 * var(--u)) 0 calc(103 * var(--u))}.section-heading{display:flex;align-items:center;justify-content:space-between;min-height:calc(46 * var(--u));margin-bottom:calc(67 * var(--u))}.section-heading h2{margin-left:calc(-3 * var(--u))}.swipe-hint{font-size:calc(23 * var(--u));color:#999}
.portfolio-filters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:20px}.portfolio-filters button{background:none;border:1px solid #777;padding:5px 12px;font-size:16px;line-height:1.6}.portfolio-filters button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.curriculum{padding:calc(68 * var(--u)) 0 calc(77 * var(--u))}.class-intro h2{margin-left:calc(-2 * var(--u))}.class-intro>p{margin-top:calc(40 * var(--u));line-height:calc(46 * var(--u))}.class-benefits{display:flex;flex-direction:column;gap:calc(20 * var(--u));margin-top:calc(63 * var(--u))}.class-benefits li{border:2px solid #04fffb;height:calc(84 * var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 calc(24 * var(--u))}.class-benefits h3{font-size:calc(29.72 * var(--u));font-weight:700;color:#04fffb;line-height:calc(46 * var(--u))}.class-benefits p{font-size:calc(26 * var(--u));white-space:nowrap}.schedule-heading{display:flex;justify-content:space-between;align-items:center;gap:calc(12 * var(--u));margin-top:calc(68 * var(--u));margin-bottom:calc(50 * var(--u));height:calc(46 * var(--u))}.schedule-heading h3{white-space:nowrap;margin-left:calc(-2 * var(--u))}.schedule-heading p{font-size:calc(18 * var(--u));line-height:calc(46 * var(--u));color:var(--gold);white-space:nowrap}
.course-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #c7a057;background:#c7a057;gap:1px}.course-card{background:#2f2f2f;min-width:0}.course-card:nth-child(-n+2){grid-column:span 2}.course-card header{background:#c7a057;color:#000;height:calc(79 * var(--u));padding:calc(11 * var(--u)) calc(10 * var(--u))}.course-number{font-family:var(--serif);font-size:calc(22 * var(--u));line-height:calc(30 * var(--u));font-weight:700}.course-card h4{font-family:var(--sans);font-size:calc(16 * var(--u));font-weight:700;line-height:calc(24 * var(--u));white-space:nowrap;letter-spacing:-.03em}.course-card ul{height:calc(148 * var(--u));padding:calc(13 * var(--u)) calc(9 * var(--u));font-size:calc(15 * var(--u));font-weight:400;line-height:calc(26 * var(--u));letter-spacing:0}.course-card li:before{content:'· '}.course-card:nth-child(3) li:not(:first-child):before{content:'- '}.materials-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#c7a057;border:1px solid #c7a057;margin-top:calc(34 * var(--u))}.material-block{background:var(--gold-bg)}.material-block h4{background:#c7a057;color:#000;font-size:calc(16 * var(--u));font-weight:700;line-height:calc(47 * var(--u));height:calc(47 * var(--u));text-align:center}.material-block ul{height:calc(230 * var(--u));font-size:calc(14.5 * var(--u));line-height:calc(23 * var(--u));font-weight:400;padding:calc(8 * var(--u)) calc(9 * var(--u));letter-spacing:0}.material-block li:before{content:'· '}.class-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-top:calc(30 * var(--u))}.class-bottom p{color:var(--gold);font-size:calc(18 * var(--u));line-height:1.5}.class-bottom .button{flex-shrink:0}
.contact{padding:calc(68 * var(--u)) 0 calc(286 * var(--u))}.contact h2{margin-left:calc(-3 * var(--u));white-space:nowrap}.contact-intro{margin-top:calc(40 * var(--u));line-height:calc(46 * var(--u))}.contact-grid{margin-top:calc(64 * var(--u))}.map-link{display:block;width:100%}.map-link img{width:100%;height:calc(400 * var(--u));object-fit:cover}.contact-details{margin-top:calc(76 * var(--u))}.contact-details dl>div{display:flex;gap:calc(7 * var(--u));line-height:calc(46 * var(--u))}.contact-details dt{white-space:nowrap}.contact-details dd{font-weight:300}.hours-note{color:#999}.contact-actions{display:flex;align-items:center;justify-content:space-between;margin-top:calc(65 * var(--u))}.social-links{display:flex;gap:calc(20 * var(--u))}.social-links a,.social-links button{display:grid;place-items:center;width:calc(104 * var(--u));height:calc(104 * var(--u));border:2px solid #666;background:var(--bg);padding:0}.social-links button:disabled{cursor:default;opacity:1}.social-links img{width:calc(62 * var(--u));height:calc(62 * var(--u));object-fit:contain}.social-links a:hover{border-color:var(--gold)}
footer{padding-bottom:calc(70 * var(--u))}.footer-inner{width:calc(760 * var(--u));margin:auto;border-top:1px solid #666;padding-top:calc(55 * var(--u))}.footer-meta{color:#999;line-height:calc(46 * var(--u))}.copyright{margin-top:calc(46 * var(--u))}

@media(min-width:601px){
  .hero-copy h1{left:calc(-3 * var(--u));letter-spacing:calc(-1.85 * var(--u))}
  .hero-description{letter-spacing:calc(-.15 * var(--u))}
  .private-note{letter-spacing:calc(-.15 * var(--u))}
  .about h2{letter-spacing:calc(-.22 * var(--u))}
  .about-copy>p{letter-spacing:calc(-.4 * var(--u));transform:translateY(calc(-1 * var(--u)))}
  .class-intro>p{letter-spacing:calc(-.6 * var(--u));transform:translateY(calc(-1 * var(--u)))}
  .class-benefits h3{letter-spacing:calc(-.5 * var(--u))}
  .portfolio{padding-bottom:calc(103 * var(--u))}
  .contact-intro,.contact-details dl{letter-spacing:calc(-.25 * var(--u));transform:translateY(calc(-3 * var(--u)))}
}

/* 모바일 뷰포트에서도 로고와 본문 시작선(70px/7.78% 여백)을 일치시킵니다. */
@media(max-width:600px){
  body{font-size:14px;line-height:1.8}
  .container{width:calc(760 * var(--u))}
  .about-copy{width:100%}
  h2,h3{font-size:19px;line-height:1.6}
  .button{height:48px;font-size:16px;border-width:1px;width:calc(261 * var(--u));min-width:130px}
  .hero{height:580px;background-size:auto 660px;background-position:60% bottom}
  .hero h1{top:38px;font-size:30px;line-height:1.55}
  .hero-description{top:330px;font-size:12px;line-height:1.9;max-width:100%;white-space:nowrap}
  .private-note{top:383px;font-size:11px;white-space:normal;line-height:1.8}
  .hero-actions{top:454px;gap:12px;width:100%}
  .hero-actions .button{width:calc((100% - 12px)/2);min-width:0;font-size:14px}
  .about,.portfolio{padding:42px 0 48px}
  .about h2{white-space:nowrap;font-size:calc(29.7253 * var(--u));letter-spacing:calc(-.22 * var(--u));line-height:1.6}
  .about-copy>p{margin-top:24px;line-height:1.9}
  .psd-break{display:none}
  .film-carousel{margin-top:28px}
  .film-frame{margin-top:0}
  .media-carousel{width:100%;padding-bottom:30px}
  .media-view{width:calc(100% - 58px)}
  .media-carousel .carousel-arrow{top:calc((100% - 30px)/2);width:28px}
  .media-carousel .previous{left:0}
  .media-carousel .next{right:0}
  .carousel-arrow:after{width:18px;height:18px;border-width:2px}
  .carousel-dots{bottom:-7px;left:29px;right:29px;height:28px}
  .carousel-dots button{flex-basis:20px}
  .carousel-dots button:after,.empty-dot{width:6px;height:6px}
  .media-empty,.portfolio-empty{font-size:12px;line-height:1.8;padding:22px 16px}
  .section-heading{height:auto;min-height:30px;margin-bottom:28px;gap:16px}
  .swipe-hint{font-size:12px;line-height:1.6}
  .curriculum{padding:42px 0}
  .class-intro>p{margin-top:24px;line-height:1.9}
  .class-benefits{margin-top:30px;gap:12px}
  .class-benefits li{height:auto;min-height:62px;padding:10px 12px;gap:12px;border-width:1px}
  .class-benefits h3{font-size:17px;line-height:1.5}
  .class-benefits p{font-size:13px;line-height:1.6;white-space:normal;text-align:right}
  .schedule-heading{height:auto;flex-direction:column;align-items:flex-start;gap:8px;margin-top:35px;margin-bottom:24px}
  .schedule-heading h3{font-size:19px;white-space:normal}
  .schedule-heading p{font-size:12px;white-space:normal;line-height:1.6}
  .course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .course-card:nth-child(-n+2){grid-column:span 1}
  .course-card header{height:auto;min-height:93px;padding:12px 9px}
  .course-number{font-size:19px;line-height:1.5}
  .course-card h4{font-size:13px;line-height:1.6;white-space:normal}
  .course-card ul{height:auto;min-height:150px;padding:12px 9px;font-size:13px;line-height:1.9;letter-spacing:-.025em}
  .materials-grid{margin-top:20px;grid-template-columns:1fr}
  .material-block h4{height:auto;font-size:14px;line-height:40px}
  .material-block ul{height:auto;font-size:13px;line-height:1.9;padding:13px}
  .class-bottom{margin-top:24px;gap:12px}
  .class-bottom p{font-size:11px}
  .contact{padding:42px 0 110px}
  .contact h2{white-space:normal;font-size:20px;line-height:1.7}
  .contact-intro{margin-top:25px;line-height:1.9}
  .contact-grid{margin-top:30px}
  .map-link img{height:auto}
  .contact-details{margin-top:30px}
  .contact-details dl>div{font-size:14px;line-height:1.8;gap:5px;margin-bottom:6px}
  .contact-actions{margin-top:30px;gap:14px;flex-wrap:wrap}
  .social-links{gap:10px}
  .social-links a,.social-links button{width:44px;height:44px;border-width:1px}
  .social-links img{width:28px;height:28px}
  .contact-actions .button{width:140px;min-width:120px;font-size:16px}
  .footer-inner{width:calc(760 * var(--u));padding-top:30px}
  .footer-meta{width:100%;font-size:14px;line-height:1.9}
  .copyright{margin-top:26px;font-size:13px}
  footer{padding-bottom:40px}
}

@media(max-width:480px){
  .header{height:76px}
  .header-inner{width:calc(760 * var(--u))}
  .brand{left:0;top:24px}
  .brand img{width:80px;height:auto}
  .menu-toggle{position:absolute;right:0;top:17px;z-index:22;display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;padding:10px;border:0;background:none}
  .menu-toggle span{width:24px;height:1px;background:#fff;transition:transform .2s}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .header nav{display:none;inset:76px calc(-70 * var(--u)) auto;background:var(--bg);padding:16px calc(70 * var(--u));border-bottom:1px solid #666}
  .header nav.is-open{display:flex;flex-direction:column}
  .header nav a:nth-child(n){position:static;font-size:17px;line-height:45px;letter-spacing:0}
  .hero h1{font-size:30px}
  .hero-description{font-size:13px}
  .hero-actions .button{flex:1;min-width:0;width:auto;padding-inline:15px;font-size:15px}
  .hero-actions{right:0}
  .class-benefits h3{font-size:16px}
  .class-benefits p{font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
  .media-track{transition:none}
}