@font-face{font-family:Inter;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600 800;font-display:swap}
@font-face{font-family:Playfair;src:url('../fonts/playfair-display-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Noto;src:url('../fonts/noto-sans-kr-korean-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Noto;src:url('../fonts/noto-sans-kr-korean-500-normal.woff2') format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:Noto;src:url('../fonts/noto-sans-kr-korean-700-normal.woff2') format('woff2');font-weight:700 800;font-display:swap}

:root{color-scheme:dark;--paper:#1f1a16;--backdrop:#15120f;--white:#29231d;--ink:#faf7f0;--muted:#c9bfb1;--accent:#8a683f;--accent-hover:#755732;--highlight:#d2aa72;--line:#4e4134;--soft:#352b22;--width:620px;--radius:20px;--card-side:40px;--card-gap:12px;--cta-height:128px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--backdrop);color:var(--ink);font-family:Inter,Noto,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--highlight);outline-offset:5px}
.icon{display:block;width:24px;height:24px;flex:none}
.page{max-width:var(--width);margin:34px auto;padding:0 32px;background:linear-gradient(160deg,#241e18,var(--paper) 45%,#191511);border:1px solid var(--line);border-radius:28px;box-shadow:0 12px 55px #00000030}
.masthead{height:68px;display:flex;align-items:center;justify-content:space-between}
.wordmark{display:flex;align-items:center;gap:13px;font-size:16px;font-weight:600;letter-spacing:-.7px}
.brand-divider{width:1px;height:16px;background:var(--line)}
.edu{font-size:13px;letter-spacing:.08em;color:var(--highlight);font-weight:400}
.icon-button{background:transparent;border:1px solid var(--line);color:var(--muted);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:background .2s,color .2s;flex:none}
.icon-button .icon{width:18px;height:18px}

/* Compact identity replaces the decorative banner. */
.profile{text-align:center;padding:4px 0 30px}
.avatar{width:80px;height:80px;background:#f5f0e6;border:1px solid #d7c6aa;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center}
.avatar img{display:block;width:65px;height:65px;object-fit:contain}
h1{font-family:Playfair,Georgia,serif;font-size:34px;font-weight:500;letter-spacing:-1px;line-height:1.15;margin:0 0 10px}
.tagline{font-size:14px;font-weight:400;margin:0;color:var(--muted);letter-spacing:-.35px;line-height:1.6}

/* Equal side columns keep the copy centered independently of the icons. */
.course-list,.links{display:grid;gap:14px}
.featured-card,.link-card{height:var(--cta-height);min-height:var(--cta-height);display:grid;grid-template-columns:var(--card-side) minmax(0,1fr) var(--card-side);align-items:center;gap:var(--card-gap);text-align:center;border-radius:var(--radius);transition:transform .2s,background .2s,border-color .2s}
.featured-card{padding:20px;background:var(--accent);color:var(--ink);box-shadow:0 5px 12px #00000020}
.featured-icon,.card-icon{display:grid;place-items:center;width:var(--card-side);height:var(--card-side);border-radius:50%;flex:none}
.featured-icon{border:1px solid #faf7f03d;background:#faf7f00a}
.featured-icon .icon,.card-icon .icon{width:21px;height:21px}
.card-copy{display:flex;min-width:0;flex-direction:column;align-items:center}
.eyebrow{font-size:8px;letter-spacing:1.6px;color:#fff4df;margin-bottom:7px}
.featured-title{font-size:18px;font-weight:600;letter-spacing:-.4px}
.featured-description{font-size:12px;line-height:1.6;margin-top:6px;color:#fff3df}
.featured-arrow{justify-self:end}
.featured-arrow .icon{width:20px;height:20px}
.course-business .featured-description{font-size:17px;font-weight:500}
.course-composition{background:#2a231d;color:var(--ink);box-shadow:none;border:1px solid #77634d}
.course-composition .featured-icon{color:var(--highlight);background:var(--soft);border-color:#66523d}
.course-composition .eyebrow{color:var(--highlight)}
.course-composition .featured-description{color:var(--muted)}
.course-popular{position:relative;border:2px solid #d5b77f;box-shadow:0 0 0 3px var(--paper),0 0 0 4px #b18c54,0 6px 20px #00000035}
.course-badge{position:absolute;top:-13px;left:21px;padding:3px 13px;border:1px solid #e1c596;border-radius:999px;background:#d7b47b;color:#241b13;font-size:12px;font-weight:700;line-height:18px;letter-spacing:.06em}
.link-card{padding:17px 20px;border:0;background:var(--white);}
.card-icon{background:var(--soft);color:var(--highlight)}
.card-title{font-size:15px;font-weight:500;line-height:1.5;letter-spacing:-.3px}
.card-description{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.6;letter-spacing:-.1px}
.card-arrow{width:18px;height:18px;color:var(--highlight);justify-self:end}
.inquiry-trigger{width:100%;font:inherit;color:var(--ink)}

/* Contact and footer. */
.contact{display:flex;align-items:center;gap:14px;margin:24px 2px 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact-icon{color:var(--highlight)}
.contact-icon .icon{width:20px;height:20px}
.contact h2{font-size:11px;color:var(--muted);font-weight:400;margin:0 0 5px}
.contact a{font-size:14px;font-weight:600;letter-spacing:-.3px}
.contact .icon-button{margin-left:auto;width:36px;height:36px;border:0}
footer{text-align:center;padding:16px 0 20px}
.socials{display:flex;align-items:center;justify-content:center;gap:11px}
.social-link{display:grid;place-items:center;width:40px;height:40px;color:var(--muted);border-radius:50%;transition:background .2s}
.social-link .icon{width:20px;height:20px}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:9px;color:var(--muted);letter-spacing:.1px}
.footer-bottom a{display:flex;align-items:center;gap:5px;letter-spacing:1px;font-size:7px}
.footer-bottom .icon{width:12px;height:12px}

/* Accessible dialogs and feedback. */
.skip-link{position:fixed;top:-100px;left:12px;background:var(--ink);color:var(--paper);padding:12px;z-index:20}
.skip-link:focus{top:12px}
.toast{position:fixed;bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 12px));left:50%;transform:translate(-50%,12px);padding:12px 20px;background:var(--ink);color:var(--paper);border-radius:30px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);text-align:center;z-index:10}
.toast.visible{opacity:1;transform:translate(-50%,0)}
dialog{border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink);padding:30px;max-width:430px;width:calc(100% - max(40px,calc(env(safe-area-inset-left,0px) + env(safe-area-inset-right,0px) + 32px)));max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px);overflow:auto;box-shadow:0 20px 100px #21150735}
dialog::backdrop{background:#100d0ac9;backdrop-filter:blur(3px)}
dialog h2{font-size:20px;margin:15px 0}
dialog p{font-size:13px;line-height:1.8;color:var(--muted)}
dialog label{font-size:12px;display:block;margin:20px 0 8px}
dialog input{width:100%;border:1px solid #77634d;border-radius:10px;padding:12px;background:var(--white);color:var(--ink);font-size:12px}
.dialog-close{position:absolute;right:16px;top:12px;width:36px;height:36px;border:0;background:transparent;color:var(--muted);font-size:28px}
.copy-link{background:var(--accent);border:0;border-radius:40px;color:var(--ink);width:100%;padding:13px;margin-top:16px}
.inquiry-options{display:grid;gap:12px;margin-top:25px}
.inquiry-option{display:grid;grid-template-columns:21px minmax(0,1fr) 21px;align-items:center;gap:12px;padding:18px;border-radius:15px;border:1px solid var(--line);font-size:15px;font-weight:500;text-align:center}
.inquiry-option small{display:block;font-size:12px;font-weight:400;margin-top:5px}
.inquiry-option .icon{width:21px;height:21px}
.kakao{background:#fee500;color:#3a2a20;border-color:#e4cf13}
.kakao:disabled{background:#f6f0cb;color:#776f43;border-color:#e3dab3;cursor:not-allowed}
.email-option{background:var(--white)}
.email-option small{color:var(--muted)}
#inquiry-dialog{text-align:center;padding:32px 25px}
.dialog-emblem{display:grid;place-items:center;width:49px;height:49px;background:var(--soft);color:var(--highlight);border-radius:50%;margin:10px auto 16px}
#inquiry-dialog h2{margin:12px 0;font-weight:600}
#inquiry-dialog p{font-size:13px;margin:0}

@media(max-width:600px){
 :root{--card-side:30px;--card-gap:9px;--radius:18px;--cta-height:96px}
 body{background:var(--paper)}
 .page{border:0;border-radius:0;margin:0 auto;padding:env(safe-area-inset-top,0px) max(22px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(22px,env(safe-area-inset-left,0px));min-height:100svh;box-shadow:none}
 .masthead{height:54px}
 .wordmark{font-size:15px}
 .icon-button{width:36px;height:36px}
 .profile{padding:4px 0 24px}
 .avatar{width:58px;height:58px;margin-bottom:8px}
 .avatar img{width:47px;height:47px}
 h1{font-size:28px;margin-bottom:6px}
 .tagline{font-size:12px}
 .links,.course-list{gap:12px}
 .featured-card{padding:17px 14px;}
 .eyebrow{display:none}
 .featured-icon .icon,.card-icon .icon{width:18px;height:18px}
 .featured-title{font-size:16px}
 .featured-description{font-size:11px;margin-top:4px}
 .course-business .featured-description{font-size:15px}
 
 .link-card{padding:14px;}
 .card-title{font-size:14px}
 .card-description{font-size:10px;letter-spacing:-.35px}
 .featured-arrow .icon{width:18px}
 .contact{gap:12px;margin-top:18px;padding:14px 0}
 .contact a{font-size:13px}
 .contact h2{font-size:10px}
 footer{padding:10px 0 16px}
 .footer-bottom{font-size:8px;margin-top:8px}
}
@media(max-width:360px){
 :root{--card-side:24px;--card-gap:6px}
 .page{padding-left:max(17px,env(safe-area-inset-left,0px));padding-right:max(17px,env(safe-area-inset-right,0px))}
 .masthead{height:50px}
 .profile{padding-bottom:22px}
 .avatar{width:52px;height:52px}
 .avatar img{width:42px;height:42px}
 h1{font-size:26px}
 .featured-card{padding:15px 11px}
 .link-card{padding:12px 11px}
 .card-description{font-size:9.5px}
 .contact a{font-size:12px}
}

/* Keep the compact mobile layout; scale legibility for wide desktop viewports. */
@media(min-width:1600px){
 :root{--width:760px;--card-side:46px;--card-gap:16px;--cta-height:144px}
 .page{margin:48px auto;padding-left:40px;padding-right:40px}
 .masthead{height:76px}
 .wordmark{font-size:19px}
 .edu{font-size:15px}
 .profile{padding-bottom:34px}
 .avatar{width:88px;height:88px}
 .avatar img{width:72px;height:72px}
 h1{font-size:42px}
 .tagline{font-size:16px}
 .featured-card{padding:24px}
 .featured-title{font-size:23px}
 .featured-description{font-size:15px}
 .course-business .featured-description{font-size:21px}
 .eyebrow{font-size:11px;letter-spacing:.6px}
 .link-card{padding:22px 24px}
 .card-title{font-size:20px}
 .card-description{font-size:14px}
 .course-badge{font-size:14px}
 .contact h2{font-size:13px}
 .contact a{font-size:16px}
 .footer-bottom,.footer-bottom a{font-size:11px}
}
@media(min-width:2560px){
 :root{--width:880px;--card-side:52px;--radius:24px;--cta-height:160px}
 .page{margin-top:64px;padding-left:48px;padding-right:48px}
 .masthead{height:86px}
 .wordmark{font-size:22px}
 .edu{font-size:17px}
 .avatar{width:100px;height:100px}
 .avatar img{width:82px;height:82px}
 h1{font-size:48px}
 .tagline{font-size:18px}
 .featured-title{font-size:26px}
 .featured-description{font-size:18px}
 .course-business .featured-description{font-size:23px}
 .eyebrow{font-size:12px}
 .card-title{font-size:22px}
 .card-description{font-size:16px}
 .contact a{font-size:18px}
 .contact h2{font-size:14px}
 .social-link{width:48px;height:48px}
 .social-link .icon{width:24px;height:24px}
 dialog{max-width:520px;font-size:18px}
 dialog h2{font-size:26px}
 dialog p,#inquiry-dialog p{font-size:16px}
 .inquiry-option{font-size:18px}
 .inquiry-option small{font-size:15px}
}
@media(hover:hover) and (pointer:fine){
 .icon-button:hover{background:var(--soft);color:var(--ink)}
 .featured-card:hover{background:var(--accent-hover);transform:translateY(-2px)}
 .course-composition:hover{background:#352b22;border-color:var(--highlight)}
 .link-card:hover{transform:translateY(-2px);border-color:var(--highlight);background:#352b22}
 .contact a:hover{text-decoration:underline}
 .social-link:hover{background:var(--soft)}
 .copy-link:hover{background:var(--accent-hover)}
 .kakao:hover{background:#f5dc00}
 .email-option:hover{border-color:#b49d7c}
 .inquiry-option:hover,.copy-link:hover,.icon-button:hover,.social-link:hover{transform:translateY(-1px)}
 .dialog-close:hover{background:var(--soft);border-radius:50%;color:var(--ink)}
}
:is(.featured-card,.link-card,.inquiry-option,.copy-link,.icon-button,.social-link,.dialog-close){transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
:is(.featured-card,.link-card,.inquiry-option,.copy-link,.icon-button,.social-link,.dialog-close):active{transform:scale(.985)}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none!important;animation:none!important}
 :is(.featured-card,.link-card,.inquiry-option,.copy-link,.icon-button,.social-link,.dialog-close):is(:hover,:active){transform:none}
}