:root{--bg:#f3efe4;--paper:#faf7f0;--ink:#1f2430;--sub:#5d5a50;--brown:#8a5a2b;--navy:#1f2b46;--line:#e0d8c6;--beige:#ece3d0}
*{box-sizing:border-box;margin:0}
html{font-size:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
html.big{font-size:118%}
body{font-family:"Noto Sans KR",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.85;font-size:1.0625rem}
a{color:var(--brown)}
:focus-visible{outline:3px solid var(--brown);outline-offset:3px}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.5rem}
/* header */
.site-h{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.brand{display:flex;align-items:center;gap:.65rem;font-family:"Noto Serif KR",serif;font-weight:700;font-size:1.2rem;color:var(--ink);text-decoration:none}
.mark{position:relative;flex:none;width:1.9rem;height:1.9rem;border-radius:.45rem;background:var(--brown)}
.mark::before,.mark::after{content:"";position:absolute;background:#fff;border-radius:1px}
.mark::before{left:50%;top:22%;width:12%;height:56%;transform:translateX(-50%)}
.mark::after{top:38%;left:30%;width:40%;height:11%}
.gnav{display:flex;align-items:center;gap:.2rem}
.gnav>a,.dd-b{display:block;font:inherit;font-size:1rem;color:var(--ink);background:none;border:0;padding:.55rem .95rem;border-radius:.5rem;text-decoration:none;cursor:pointer}
.dd{position:relative}
.dd-b::after{content:"▾";font-size:.7em;margin-left:.3em;color:var(--sub)}
.dd-m{display:none;position:absolute;top:100%;left:0;min-width:13rem;background:var(--paper);border:1px solid var(--line);border-radius:.7rem;padding:.4rem;box-shadow:0 10px 26px rgba(60,40,10,.14)}
.dd-m a{display:block;padding:.55rem .8rem;border-radius:.4rem;color:var(--ink);text-decoration:none;font-size:.98rem;white-space:nowrap}
.dd-m a:hover{background:var(--beige)}
.dd:hover .dd-m,.dd.open .dd-m,.dd:focus-within .dd-m{display:block}
.gnav>a.on,.dd.cur>.dd-b{background:var(--beige);color:var(--brown);box-shadow:inset 0 -2px 0 var(--brown)}
.fs{display:flex;align-items:center;gap:.1rem;margin-left:.5rem}
.fs button{font:inherit;background:none;border:0;cursor:pointer;color:var(--sub);padding:.3rem .4rem}
.fs [data-fs=normal]{font-size:.95rem}.fs [data-fs=big]{font-size:1.3rem}
.fs [aria-pressed=true]{color:var(--navy);font-weight:700}
.nav-toggle{display:none;font:inherit;background:var(--beige);border:1px solid var(--line);border-radius:.5rem;padding:.4rem .9rem;cursor:pointer}
.right{display:flex;align-items:center}
/* hero */
.hero{display:flex;align-items:center;min-height:34rem;background:url(images/hero.jpg) center/cover no-repeat,radial-gradient(45% 60% at 82% 28%,#c9e3fa 0,transparent 70%),radial-gradient(35% 45% at 96% 72%,#fff 0,transparent 70%),linear-gradient(115deg,#f6f1e4 0%,#e9f0f6 55%,#bfdaf2 100%)}
.hero .wrap{width:100%}
.eyebrow{display:flex;align-items:center;gap:.8rem;letter-spacing:.12em;font-size:.95rem;color:var(--sub)}
.eyebrow::before{content:"";width:2.2rem;height:1px;background:var(--sub)}
.hero h1{font-family:"Noto Serif KR",serif;font-weight:700;font-size:clamp(2.3rem,6.2vw,4.1rem);line-height:1.3;margin:1.2rem 0 1.4rem}
.hero h1 em{display:block;font-style:normal;color:var(--brown)}
.hero p.lead{max-width:24rem;color:#34322a}
.cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;max-width:44rem;margin:0 auto}
.cardx{display:block;background:var(--paper);border:1px solid var(--line);border-radius:1rem;padding:1.3rem 1.5rem 1.1rem;text-decoration:none;color:var(--ink);box-shadow:0 2px 8px rgba(80,60,20,.05)}
.cardx:hover{border-color:var(--brown)}
.cardx i{font-style:normal;font-family:"Noto Serif KR",serif;font-weight:700;font-size:1.35rem;color:var(--brown)}
.cardx b{display:block;font-family:"Noto Serif KR",serif;font-size:1.3rem;margin-top:.2rem}
.cardx small{display:block;color:var(--sub);font-size:.95rem;line-height:1.6;margin-top:.15rem}
.cardx em{display:block;text-align:right;font-style:normal;color:var(--brown);margin-top:.4rem}
.pills{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;max-width:56rem;margin:1.2rem auto 0}
.pills a{display:block;text-align:center;padding:.8rem;background:var(--beige);border:1px solid #d9cdb4;border-radius:.8rem;color:var(--ink);text-decoration:none;font-weight:500}
.pills a:hover{background:#e4d8bf}
.front{padding:2.2rem 0 1.5rem}
/* sections */
section{padding:3.5rem 0}
h2{font-family:"Noto Serif KR",serif;font-weight:700;font-size:1.9rem;color:var(--navy);margin-bottom:1.5rem;line-height:1.4}
h2::after{content:"";display:block;width:2.4rem;height:3px;background:var(--brown);margin-top:.7rem}
h3{font-family:"Noto Serif KR",serif;font-size:1.25rem;color:var(--navy);margin:1.8rem 0 .4rem}
p+p{margin-top:.9rem}
.back{font-size:.95rem;margin-bottom:1.2rem}
.en{color:var(--sub);font-size:.95rem}
.note{margin-top:.9rem;font-size:.9rem;color:var(--sub)}
.btn{display:inline-block;padding:.8rem 1.6rem;background:var(--navy);color:#fff;border-radius:.6rem;text-decoration:none;font-weight:700}
.btn:hover{background:var(--brown)}
.btn.line{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.btn.line:hover{background:var(--navy);color:#fff}
.quote{margin:1.3rem 0;padding:1rem 1.3rem;background:var(--beige);border-left:4px solid var(--brown);border-radius:.4rem;color:#3a382f;font-size:1rem}
.sign{margin-top:1.4rem;text-align:right;font-family:"Noto Serif KR",serif;color:var(--navy)}
ul.plain{padding-left:1.4rem}
ul.plain li{margin-top:.6rem}
.times{border-top:2px solid var(--navy)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.05rem .3rem;border-bottom:1px solid var(--line)}
.row b{font-weight:700}
.row small{display:block;color:var(--sub);font-size:.88rem;font-weight:400}
.row .t{font-family:"Noto Serif KR",serif;font-size:1.3rem;font-weight:700;color:var(--navy);white-space:nowrap}
.panel{border:1.5px solid;border-radius:.9rem;padding:1.5rem;margin-top:1.8rem}
.panel h3{margin-top:0;color:inherit;font-size:1.4rem}
.panel p{color:var(--ink)}
.panel .quote{background:#fff}
.mint{background:#eaf0e4;border-color:#c9d8bd;color:#3f5f2e}
.yellow{background:#f6ecd2;border-color:#e3cf9a;color:#8a5a2b}
.blue{background:#e6eef5;border-color:#bcd1e3;color:#2c4a6b}
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:.9rem;margin-top:1.1rem}
.vid{background:#fff;border-radius:.6rem;overflow:hidden;border:1px solid var(--line)}
.vid .v{position:relative;aspect-ratio:16/9;background:#000}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid p{padding:.75rem .9rem;font-size:.95rem;line-height:1.55;font-weight:500}
.map{position:relative;aspect-ratio:16/9;margin:1.3rem 0;background:var(--beige);border-radius:.6rem;overflow:hidden}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.acct{background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--brown);border-radius:.6rem;padding:1.5rem 1.6rem;margin-top:1.3rem}
.acct small{display:block;color:var(--sub);font-size:.95rem}
.acct .no{font-family:"Noto Serif KR",serif;font-weight:700;font-size:clamp(1.6rem,5.6vw,2.3rem);letter-spacing:.04em;margin:.4rem 0 1rem}
.acct button{font:inherit;font-weight:700;background:var(--navy);color:#fff;border:0;border-radius:999px;padding:.7rem 1.5rem;cursor:pointer}
.acct button:hover{background:var(--brown)}
.acct .ok{margin-left:.8rem;color:var(--brown);font-size:.95rem}
.divider{border:0;border-top:1px solid var(--line);margin:3rem 0}
.addr{font-family:"Noto Serif KR",serif;font-size:clamp(1.3rem,3.6vw,1.8rem);font-weight:700;margin-bottom:1.2rem}
.btns{display:flex;flex-wrap:wrap;gap:.8rem}
footer{background:var(--paper);border-top:1px solid var(--line);padding:2.5rem 0 3rem;color:var(--sub);font-size:.95rem}
footer .brand{font-size:1.1rem;margin-bottom:.7rem}
.flinks{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;margin:.9rem 0}
.flinks a{color:var(--ink);text-decoration:none}
.flinks a:hover{color:var(--brown)}
/* nav v2: mirrors the Google Sites menu tree */
.gnav>a,.dd-b{font-size:1rem;padding:.55rem .95rem}
.fs{margin-left:.3rem}
.dd-m{min-width:15rem;max-height:80vh;overflow:auto}
.dd-m.w{width:24rem}
.dd-m.cols{width:36rem;columns:2;column-gap:.4rem}
.dd-m.r{left:auto;right:0}
.dd-m a{white-space:normal;line-height:1.5;break-inside:avoid}
.dd-m a.all{font-weight:700;color:var(--brown)}
.dd-m .sub{margin:0 0 .3rem 1.1rem;border-left:2px solid var(--line);padding-left:.3rem}
.dd-m .sub a{font-size:.9rem;color:var(--sub)}
@media(max-width:62rem){
 .nav-toggle{display:block}
 .gnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:.5rem 1.5rem 1rem;max-height:calc(100vh - 4rem);overflow:auto}
 .site-h.open .gnav{display:flex}
 .gnav>a,.dd-b{font-size:1.05rem;padding:.8rem .4rem;width:100%;text-align:left;border-bottom:1px solid var(--line);border-radius:0}
 .dd-b{display:flex;justify-content:space-between;align-items:center}
 .dd-b::after{margin-left:auto}
 .dd:hover .dd-m,.dd:focus-within .dd-m{display:none}
 .dd.open .dd-m{display:block}
 .dd-m{position:static;border:0;box-shadow:none;background:#f7f3e8;padding:.3rem .6rem;width:auto!important;columns:1!important;max-height:none;border-radius:.5rem;margin:.3rem 0 .5rem}
 .gnav>a.on,.dd.cur>.dd-b{box-shadow:none;background:none}
}
@media(max-width:56rem){
 .hero{min-height:28rem}
 .cards2,.pills{grid-template-columns:1fr}
}
.intro{padding:3rem 0 1rem}
.intro .in{max-width:46rem}
.intro .kr{font-size:1.15rem;line-height:1.95;color:#2a2822}
.intro .eng{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--sub);font-size:1rem;line-height:1.8}
/* hero photo */
.hero{align-items:flex-start;padding:clamp(3.5rem,8vw,6.5rem) 0 0;min-height:clamp(26rem,52vw,46rem);background:linear-gradient(90deg,rgba(12,70,140,.45),rgba(12,70,140,.18) 42%,rgba(12,70,140,0) 62%),url(images/hero.jpg) right top/cover no-repeat,linear-gradient(115deg,#1f6fc0,#6fb4ee)}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:#fff}
.hero h1{color:#fff;text-shadow:0 2px 20px rgba(8,50,110,.4)}
.hero h1 em{color:#ffe6a6}
.hero p.lead{color:#fff;text-shadow:0 1px 12px rgba(8,50,110,.45)}
@media(max-width:48rem){
 .hero{align-items:flex-end;padding:0 0 2.2rem;min-height:30rem;background:linear-gradient(0deg,rgba(8,45,95,.82) 0%,rgba(8,45,95,.35) 45%,rgba(8,45,95,0) 70%),url(images/hero-m.jpg) center top/cover no-repeat,linear-gradient(115deg,#1f6fc0,#6fb4ee)}
}
.mark-img{display:block;height:2.4rem;width:auto;flex:none}
footer .mark-img{height:2rem}

img{max-width:100%;height:auto}
.linklist{list-style:none;padding:0;display:grid;gap:.6rem;margin-top:.8rem}
.linklist a{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;background:var(--paper);border:1px solid var(--line);border-radius:.6rem;text-decoration:none;color:var(--ink);font-weight:500}
.linklist a::after{content:"→";color:var(--brown)}
.linklist a.ext::after{content:"↗"}
.linklist a:hover{border-color:var(--brown)}
.cards-p{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-top:1rem}
.pcard{display:block;background:var(--paper);border:1px solid var(--line);border-radius:.8rem;overflow:hidden;text-decoration:none;color:var(--ink)}
.pcard:hover{border-color:var(--brown)}
.pcard img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 25%;background:var(--beige)}
.pcard span{display:block;padding:.8rem 1rem;font-weight:700;line-height:1.5}
.pcard small{display:block;color:var(--sub);font-weight:400;font-size:.9rem}
.edu-table{width:100%;border-collapse:collapse;background:var(--paper);margin:1rem 0}
.edu-table th,.edu-table td{padding:.7rem .8rem;border-bottom:1px solid var(--line);text-align:left}
.edu-table th{background:var(--beige);font-size:.95rem}
.posters{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem;margin-top:1rem;max-width:34rem}
.banners{display:grid;gap:.9rem;margin-top:1.4rem}
.posters img,.banners img{width:100%;border-radius:.5rem;border:1px solid var(--line);display:block}
.rose{background:#f6e6e1;border-color:#e6c7bd;color:#8b4a3a}
.panel ul{padding-left:1.3rem}
.panel li{margin-top:.45rem;color:var(--ink)}
.panel li ul{margin-top:.2rem}
.ill{float:right;width:6.5rem;height:6.5rem;object-fit:cover;border-radius:.8rem;margin:0 0 .6rem 1rem}
.pcard img.sm{object-fit:contain}

/* content pages */
.prose h4{font-family:"Noto Serif KR",serif;font-size:1.1rem;color:var(--navy);margin:1.5rem 0 .3rem}
.step span{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--brown);color:#fff;font:700 .9rem "Noto Sans KR",sans-serif;margin-right:.55rem}
.note-box{background:#fbf3dc;border-left:4px solid #e0b64a;padding:.8rem 1rem;border-radius:.4rem;margin:1rem 0}
.checks{list-style:none;padding:0;margin:.6rem 0}
.checks li{position:relative;padding-left:1.6rem;margin-top:.4rem}
.checks li::before{content:"✓";position:absolute;left:0;color:var(--brown);font-weight:700}
ol.plain{padding-left:1.5rem}
ol.plain li{margin-top:.5rem}
.content-img{display:block;max-width:100%;height:auto;border-radius:.6rem;margin:1rem 0}
.content-img.sm{max-width:20rem}

/* home buttons */
.menu-sec{padding:1.6rem 0 3rem}
.tiles12{list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}
.tiles12 a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;min-height:7.6rem;padding:1rem .5rem;background:var(--paper);border:1px solid var(--line);border-radius:1rem;text-decoration:none;color:var(--ink);font-weight:700;font-size:.98rem;line-height:1.35;text-align:center;box-shadow:0 1px 3px rgba(80,60,20,.05);transition:transform .15s,box-shadow .15s,border-color .15s}
.tiles12 a:hover{transform:translateY(-3px);border-color:var(--brown);box-shadow:0 8px 18px rgba(80,60,20,.12)}
.tiles12 .ic{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--beige);color:var(--brown);transition:background .15s,color .15s}
.tiles12 a:hover .ic{background:var(--brown);color:#fff}
.tiles12 svg{width:1.5rem;height:1.5rem;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tiles12 a.ext .lb::after{content:" ↗";font-weight:400;color:var(--sub)}
.joy-sec{border-top:1px solid var(--line)}
@media(max-width:62rem){.tiles12{grid-template-columns:repeat(4,1fr)}}
@media(max-width:40rem){.tiles12{grid-template-columns:repeat(2,1fr)}}
.dd-sep{border:0;border-top:1px solid var(--line);margin:.4rem .5rem}

/* bigger dropdown arrow */
.dd-b::after{content:"";display:inline-block;width:.55em;height:.55em;margin-left:.6em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.2em) rotate(45deg);transition:transform .15s}
.dd:hover>.dd-b::after,.dd.open>.dd-b::after{transform:translateY(.05em) rotate(225deg)}
@media(max-width:62rem){.dd-b::after{margin-left:auto}}

/* clearer dividers */
.sec-sep{border:0;border-top:2px solid #cdbf9f;margin:2.6rem 0 0}
.sec-sep+h3{margin-top:1.6rem}
.dd-sep{border-top:1px solid #cdbf9f}