/* =========================================================
   Amuse Arts Lab — Global Styles
   Fonts: Playfair Display (headings), Inter (body)
   Palette: near-black ink, warm white, subtle greys, soft accents
   ========================================================= */
:root{
  --max: 1200px;
  --gutter: 20px;
  --ink: #121214;
  --ink-2:#1d1d20;
  --text:#2b2b30;
  --muted:#6b6b73;
  --line:#e8e8ec;
  --bg:#ffffff;
  --bg-soft:#faf9f7;
  --accent:#0f6a6f;          /* subtle teal */
  --accent-2:#0a4a4e;
  --focus:#2a78ff;
  --radius:16px;
  --radius-lg:20px;
  --shadow-1:0 6px 18px rgba(0,0,0,.06);
  --shadow-2:0 14px 36px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font:400 16px/1.65 "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Apple SD Gothic Neo, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:hover{opacity:.9}
p{margin:.6rem 0 1rem}
em.note{font-style:normal; color:var(--muted)}
hr{border:0; border-top:1px solid var(--line); margin:24px 0}

/* Typography */
h1,h2,h3,h4{
  font-family:"Playfair Display", Georgia, serif;
  color:var(--ink);
  line-height:1.18;
  margin:.2rem 0 .6rem;
}
h1{font-weight:700; font-size:clamp(32px,4.5vw,48px)}
h2{font-weight:700; font-size:clamp(26px,3.2vw,36px)}
h3{font-weight:700; font-size:clamp(20px,2vw,24px)}
h4{font-weight:600; font-size:18px}
.section-title{margin-bottom:.2rem}
.section-sub{color:var(--muted); margin-top:.2rem}

.eyebrow{
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color:#6a6a72;
  font-size:.85rem;
  margin:0 0 .25rem;
}

/* Layout */
.container{width:min(var(--max), calc(100% - var(--gutter)*2)); margin:0 auto}
.section{padding:20px 0}
.section--padded{padding:60px 0}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px}
.view-all{font-weight:600; letter-spacing:.06em}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:10px; z-index:1000; width:auto; height:auto;
  background:#000; color:#fff; padding:8px 12px; border-radius:10px;
}

/* Focus ring */
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:8px}

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.08em}
.brand__logo{width:34px; height:auto}
.brand__mark{font-size:.92rem}

.main-nav .nav-toggle{display:none}
.nav-menu{display:flex; gap:18px; align-items:center; list-style:none; margin:0; padding:0}
.nav-menu a{padding:8px 10px; border-radius:999px}
.nav-menu .btn{padding:10px 14px}

.site-search{display:flex; gap:8px; align-items:center}
.site-search input{
  width:170px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.site-search button{border:0; background:#fff; padding:8px; border-radius:10px; color:#555}
.site-search button:hover{background:#f3f3f5}

@media (max-width:980px){
  .header-inner{grid-template-columns:auto auto 1fr}
  .site-search{display:none}
  .main-nav .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:#fff;
  }
  .nav-menu{
    position:absolute; top:100%; right:0; left:0;
    background:#fff; border-bottom:1px solid var(--line);
    display:none; padding:12px var(--gutter); gap:6px; flex-wrap:wrap;
  }
  .nav-menu.is-open{display:flex}
}

/* =========================================================
   Buttons & Pills
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px;
  border:1px solid var(--ink);
  background:var(--ink); color:#fff;
  font-weight:600; letter-spacing:.02em; cursor:pointer; transition:.2s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-1)}
.btn--primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn--dark{background:var(--ink-2); border-color:var(--ink-2); color:#fff}
.btn--light{background:#fff; color:var(--ink); border-color:#fff}
.btn--ghost{background:transparent; color:var(--ink); border-color:#cfcfd4}
.btn--block{width:100%}

.pill{
  display:inline-flex; align-items:center;
  padding:8px 12px; border-radius:999px; background:#f4f4f6;
  border:1px solid #ececf0; color:#4a4a52; cursor:pointer; transition:.15s;
  font-weight:600; letter-spacing:.02em;
}
.pill:hover{border-color:#d9d9df}
.pill.is-active{background:var(--ink); color:#fff; border-color:var(--ink)}

/* =========================================================
   Hero 50/50 (Swiper)
   ========================================================= */
.hero-5050{position:relative}
.hero-slide{position:relative; min-height:min(72vh,820px); background:#000}
.hero-media-grid{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr}
.hero-media-grid img{width:100%; height:100%; object-fit:cover; display:block}
.hero-overlay{
  position:absolute; inset:auto auto 40px 40px; z-index:2; max-width:min(720px,46vw);
  color:#fff; background:rgba(12,12,12,.38);
  -webkit-backdrop-filter:saturate(120%) blur(3px);
  backdrop-filter:saturate(120%) blur(3px);
  padding:24px 28px; border-radius:14px;
}
.hero-overlay .eyebrow{color:#e9e9ee}
.hero-overlay h1,.hero-overlay h2{color:#fff}
.hero-meta{margin:.4rem 0 1rem; padding:.7rem 0 .3rem; border-top:1px solid rgba(255,255,255,.35)}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap}
@media (max-width: 860px){
  .hero-overlay{left:20px; right:20px; bottom:20px; max-width:unset}
}

.swiper-button-prev, .swiper-button-next{
  color:#fff; width:42px; height:42px; border-radius:50%;
  background:rgba(0,0,0,.35);
}
.swiper-button-prev:hover, .swiper-button-next:hover{background:rgba(0,0,0,.5)}
.swiper-pagination-bullet{background:#fff; opacity:.6}
.swiper-pagination-bullet-active{opacity:1}

/* =========================================================
   Cards / Grids / Mosaic
   ========================================================= */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:1000px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.card-grid{grid-template-columns:1fr}}

.card{
  background:#fff; border:1px solid #eee; border-radius:18px;
  overflow:hidden; box-shadow:var(--shadow-1); transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}
.card__media img{width:100%; height:240px; object-fit:cover}
.card__body{padding:14px 16px}
.card__eyebrow{font-size:.8rem; color:#6a6a72; letter-spacing:.06em; text-transform:uppercase; margin:0 0 4px}
.card__title{font-family:"Playfair Display",serif; margin:2px 0 6px; line-height:1.2}
.card__meta{color:#7b7b84; font-size:.9rem; margin:.2rem 0 .4rem}
.card__excerpt{color:#444}

.mosaic{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px; align-items:stretch;
}
.mosaic__big, .mosaic__sm{position:relative; overflow:hidden; border-radius:18px}
.mosaic__big img, .mosaic__sm img{width:100%; height:100%; object-fit:cover}
.mosaic__body{
  position:absolute; left:0; right:0; bottom:0;
  color:#fff; padding:18px; background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.mosaic__link{display:block; height:100%}
@media(max-width:1000px){.mosaic{grid-template-columns:1fr; grid-auto-rows:minmax(220px, 40vh)}}

/* =========================================================
   Split section (image + copy)
   ========================================================= */
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center; padding:50px 0}
.split__media img{width:100%; height:100%; max-height:540px; object-fit:cover; border-radius:18px}
.split__body .split__title{margin:.2rem 0 .6rem}
.split__list{margin:0; padding-left:1.1em}
.split__list li{margin:.25rem 0 .5rem}
.split__cta{margin-top:10px}
@media(max-width:980px){.split{grid-template-columns:1fr; gap:16px}}

/* =========================================================
   Admissions / Steps
   ========================================================= */
.steps{counter-reset:step; list-style:none; padding:0; margin:0 0 14px; display:grid; gap:10px}
.steps li{
  position:relative; padding:12px 14px 12px 46px; border:1px solid var(--line);
  border-radius:14px; background:#fff;
}
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700;
}
.center{text-align:center}
.note{color:#6b6b73}

/* =========================================================
   Forms
   ========================================================= */
.apply-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:start}
@media(max-width:980px){.apply-grid{grid-template-columns:1fr}}
.apply-form{background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow-1)}
.form-row{display:grid; gap:6px; margin-bottom:12px}
.form-row input,.form-row select,.form-row textarea{
  width:100%; padding:12px 12px; border:1px solid #dfe0e5; border-radius:12px; background:#fff;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:#bfc6ff; outline:2px solid rgba(47,99,255,.15)}
.form-row--check .check{display:flex; gap:8px; align-items:center}
.form-status{margin-top:10px; font-weight:600}
.form-status.is-success{color:#177a3f}
.form-status.is-error{color:#b51d35}
.hp{display:none}

/* =========================================================
   FAQ
   ========================================================= */
.faq details{
  border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; background:#fff;
}
.faq summary{cursor:pointer; font-weight:600}
.faq summary::-webkit-details-marker{display:none}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{border-top:1px solid var(--line); background:#0e0e10; color:#d6d6da; margin-top:40px}
.footer-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; padding:26px 0}
.footer-bottom{padding:12px 0 24px; border-top:1px solid rgba(255,255,255,.08)}
.f-title{color:#fff; font-size:1rem; margin:.2rem 0 .6rem}
.f-list{list-style:none; padding:0; margin:0}
.f-list li{margin:.2rem 0}
.f-list a{color:#d6d6da}
.f-list a:hover{color:#fff}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* =========================================================
   Utilities
   ========================================================= */
.badge{display:inline-block; padding:4px 8px; border-radius:999px; background:#f2f2f4; font-size:.8rem}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em; background:#f3f3f6; padding:2px 6px; border-radius:6px; border:1px solid #e6e6ea}

/* Spacing helpers */
.mt-0{margin-top:0}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-20{margin-top:20px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-20{margin-bottom:20px}

/* Print minimal */
@media print{
  .site-header,.site-footer,.swiper-button-prev,.swiper-button-next,.swiper-pagination{display:none !important}
  a[href]::after{content:" (" attr(href) ")"; font-size:.8em}
}

/* End of file */