/* ========================================
   RESET & BASE
   ======================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Noto Sans KR','Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;font-size:15px;line-height:1.8;color:#333;background:#fff;overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:color .3s}a:hover{color:#000}
img{max-width:100%;height:auto;display:block}
::selection{background:#222;color:#fff}
.container{max-width:960px;margin:0 auto;padding:0 40px}
.section{padding:120px 0}

/* ========================================
   LOADING
   ======================================== */
#loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;display:flex;align-items:center;justify-content:center;z-index:10000;transition:opacity .6s}
#loading-screen.hidden{opacity:0;pointer-events:none}
.loading-pulse{width:8px;height:8px;background:#222;border-radius:50%;animation:pulse .8s ease-in-out infinite alternate}
@keyframes pulse{0%{transform:scale(1);opacity:.4}100%{transform:scale(1.8);opacity:1}}

/* ========================================
   HEADER
   ======================================== */
#header{position:fixed;top:0;left:0;right:0;height:72px;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;padding:0 48px;z-index:1000;border-bottom:1px solid rgba(0,0,0,.06);transition:all .3s}
#header.scrolled{height:64px;box-shadow:0 1px 20px rgba(0,0,0,.04)}
.logo{font-family:'Inter',sans-serif;font-size:16px;font-weight:600;letter-spacing:3px;color:#111;cursor:pointer;user-select:none}
nav{display:flex;align-items:center;gap:36px}
nav .nav-link{font-size:13px;font-weight:400;letter-spacing:.8px;color:#666;transition:color .3s;position:relative}
nav .nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:#222;transition:width .3s}
nav .nav-link:hover{color:#111}
nav .nav-link:hover::after{width:100%}
.lang-btn{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:1.5px;padding:6px 14px;border:1px solid #ccc;background:transparent;color:#555;cursor:pointer;transition:all .3s}
.lang-btn:hover{border-color:#222;color:#222}

.menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.menu-toggle span{width:20px;height:1.5px;background:#333;transition:all .3s}
.mobile-nav{display:none;position:fixed;top:72px;left:0;right:0;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);padding:32px 48px;flex-direction:column;gap:24px;z-index:999;border-bottom:1px solid rgba(0,0,0,.06)}
.mobile-nav.active{display:flex}
.mobile-nav .nav-link{font-size:14px;color:#444;letter-spacing:.5px}

/* ========================================
   HERO
   ======================================== */
#hero{height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff}
.hero-content h1{font-family:'Inter',sans-serif;font-size:42px;font-weight:300;letter-spacing:14px;color:#111;margin-bottom:20px}
.hero-sub{font-size:14px;font-weight:300;color:#888;letter-spacing:2px}

/* ========================================
   FADE IN
   ======================================== */
.fade-in{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ========================================
   SECTION TITLES
   ======================================== */
.section h2{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:#999;margin-bottom:56px}

/* ========================================
   ABOUT
   ======================================== */
.about-layout{display:grid;grid-template-columns:280px 1fr;gap:64px;align-items:start}
.about-image img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(20%)}
.about-text p{font-size:15px;line-height:2;color:#444;margin-bottom:16px;font-weight:300}

/* ========================================
   WORKS
   ======================================== */
.works-filter{display:flex;gap:16px;margin-bottom:40px;flex-wrap:wrap}
.filter-btn{font-family:'Noto Sans KR',sans-serif;font-size:13px;font-weight:400;padding:8px 20px;border:1px solid #ddd;background:transparent;color:#777;cursor:pointer;transition:all .3s;letter-spacing:.5px}
.filter-btn:hover,.filter-btn.active{border-color:#222;color:#222}
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.work-card{cursor:pointer;overflow:hidden;position:relative}
.work-card img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(10%);transition:all .5s ease}
.work-card:hover img{filter:grayscale(0);transform:scale(1.03)}
.work-card .work-overlay{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(transparent,rgba(0,0,0,.5));color:#fff;opacity:0;transition:opacity .4s}
.work-card:hover .work-overlay{opacity:1}
.work-overlay h4{font-size:14px;font-weight:500;margin-bottom:4px}
.work-overlay p{font-size:12px;font-weight:300;opacity:.8}

/* ========================================
   MODAL
   ======================================== */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:2000;align-items:center;justify-content:center}
.modal.active{display:flex}
.modal-content{background:#fff;max-width:900px;width:90%;max-height:90vh;overflow-y:auto;position:relative}
.modal-close{position:absolute;top:20px;right:24px;font-size:28px;color:#999;cursor:pointer;z-index:10;line-height:1;transition:color .3s}
.modal-close:hover{color:#333}
.modal-body{display:grid;grid-template-columns:1fr 1fr}
.modal-image img{width:100%;height:100%;object-fit:cover}
.modal-info{padding:48px 40px}
.modal-info h3{font-size:18px;font-weight:600;margin-bottom:16px;color:#111}
.modal-year,.modal-medium,.modal-size{font-size:13px;color:#888;margin-bottom:6px;font-weight:300}
.modal-desc{margin-top:20px;font-size:14px;line-height:1.8;color:#555}

/* ========================================
   CV
   ======================================== */
.cv-block{margin-bottom:52px}
.cv-block h3{font-family:'Inter','Noto Sans KR',sans-serif;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:#999;border-bottom:1px solid #eee;padding-bottom:12px;margin-bottom:24px}
.cv-institute-note{font-size:12px;color:#aaa;margin-top:-16px;margin-bottom:20px;font-weight:400;letter-spacing:.3px}

.cv-item{display:flex;align-items:flex-start;margin-bottom:12px;line-height:1.75}
.cv-year{flex:0 0 100px;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#222;letter-spacing:.5px;padding-top:.5px}
.cv-year-blank{flex:0 0 100px}
.cv-content{flex:1;font-size:14px;color:#444;line-height:1.75;font-weight:300}
.cv-content strong{font-weight:500;color:#222}
.cv-note{font-size:12px;color:#aaa;margin-top:1px;font-weight:400}
.cv-sub{font-size:13px;color:#888;margin-top:2px;font-weight:300}

/* PDF Download */
.cv-download-block{margin-top:64px;padding-top:48px;border-top:1px solid #eee}
.pdf-download-area{display:flex;align-items:center;gap:24px;padding:28px 32px;border:1px solid #eee;transition:border-color .3s}
.pdf-download-area:hover{border-color:#ccc}
.pdf-icon{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.pdf-info{flex:1}
.pdf-filename{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:#222;margin-bottom:2px}
.pdf-size{font-size:12px;color:#aaa;font-weight:400}
.pdf-btn{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;padding:10px 28px;border:1px solid #222;color:#222;background:transparent;cursor:pointer;transition:all .3s;text-decoration:none}
.pdf-btn:hover{background:#222;color:#fff}

/* ========================================
   CONTACT
   ======================================== */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.contact-info-side{padding-top:8px}
.contact-card{margin-bottom:32px}
.contact-card h4{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#aaa;margin-bottom:8px}
.contact-card a{font-size:15px;font-weight:400;color:#333;letter-spacing:.3px;border-bottom:1px solid transparent;transition:border-color .3s}
.contact-card a:hover{border-bottom-color:#333}
.contact-desc{margin-top:40px;padding-top:32px;border-top:1px solid #eee}
.contact-desc p{font-size:13px;line-height:1.9;color:#999;font-weight:300}

.form-group{margin-bottom:24px}
.form-group label{display:block;font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#aaa;margin-bottom:8px}
.form-group input,.form-group textarea{width:100%;padding:12px 0;border:none;border-bottom:1px solid #ddd;font-family:'Noto Sans KR','Inter',sans-serif;font-size:14px;font-weight:300;color:#333;background:transparent;transition:border-color .3s;outline:none;resize:none}
.form-group input:focus,.form-group textarea:focus{border-bottom-color:#222}
.form-group textarea{border:1px solid #ddd;padding:14px 16px;margin-top:4px;resize:vertical}
.form-group textarea:focus{border-color:#222}
.submit-btn{font-family:'Inter',sans-serif;font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;padding:14px 48px;background:#222;color:#fff;border:none;cursor:pointer;transition:all .3s;margin-top:8px}
.submit-btn:hover{background:#444}
.submit-btn:active{transform:scale(.98)}

.form-success{text-align:center;padding:60px 0}
.success-icon{width:48px;height:48px;border:2px solid #222;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:20px;color:#222}
.form-success p{font-size:14px;color:#666;font-weight:300}

/* ========================================
   FOOTER
   ======================================== */
footer{padding:48px 0;text-align:center;border-top:1px solid #eee}
footer p{font-family:'Inter',sans-serif;font-size:11px;color:#bbb;letter-spacing:1px}

/* ========================================
   RESPONSIVE
   ======================================== */
@media(max-width:1024px){
  .container{padding:0 32px}
  .about-layout{grid-template-columns:240px 1fr;gap:48px}
}
@media(max-width:768px){
  nav{display:none}
  .menu-toggle{display:flex}
  #header{padding:0 24px}
  .section{padding:80px 0}
  .container{padding:0 24px}
  .hero-content h1{font-size:28px;letter-spacing:10px}
  .hero-sub{font-size:12px;letter-spacing:1.5px}
  .about-layout{grid-template-columns:1fr;gap:40px}
  .about-image img{max-width:280px}
  .works-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .modal-body{grid-template-columns:1fr}
  .modal-info{padding:32px 24px}
  .cv-item{flex-direction:column;margin-bottom:16px}
  .cv-year{flex:none;font-size:13px;margin-bottom:2px;color:#999}
  .cv-year-blank{display:none}
  .cv-content{font-size:13px}
  .contact-layout{grid-template-columns:1fr;gap:48px}
  .pdf-download-area{flex-direction:column;text-align:center;gap:16px}
}
@media(max-width:480px){
  .section{padding:64px 0}
  .section h2{margin-bottom:40px}
  .hero-content h1{font-size:22px;letter-spacing:8px}
  .works-grid{grid-template-columns:1fr;gap:20px}
  .cv-block{margin-bottom:40px}
}
body.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}