/* ===== TOKENS ===== */
:root{
  --black:#2C2A27;--cream:#EDE8DF;--sage:#7A8C72;
  --sage-light:#9aac92;--sage-dark:#5a6854;
  --warm:#C8BFB0;--bg:#F2EDE4;--bg2:#EAE4D8;
  --text:#2C2A27;--text-light:#8A8278;
  
  --font-base: 'Satoshi', 'Noto Sans Mono', sans-serif;
  
  --max-width:1400px;
  --grid-cols:3;
  --phil-cols:3;
}

/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-base);color:var(--text);background:var(--bg);overflow-x:hidden;line-height:1.7}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}
img{max-width:100%;display:block}

/* ===== SPLASH ===== */
.splash{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity 1s ease,visibility 1s ease}
.splash.done{opacity:0;visibility:hidden;pointer-events:none}
.splash-inner{text-align:center;color:var(--text)}
.splash-hanja{font-family:var(--font-base);font-size:1rem;letter-spacing:12px;opacity:0;animation:sUp .8s .2s ease forwards;color:var(--sage)}
.splash-name{font-family:var(--font-base);font-size:3rem;letter-spacing:16px;margin-top:8px;opacity:0;animation:sUp .8s .5s ease forwards;color:var(--black)}
.splash-line{width:48px;height:1px;background:var(--warm);margin:20px auto;transform:scaleX(0);animation:lineG .8s .8s ease forwards}
.splash-slogan{font-family:var(--font-base);font-size:.85rem;letter-spacing:4px;color:var(--text-light);opacity:0;animation:sUp .8s 1.1s ease forwards}
@keyframes sUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes lineG{to{transform:scaleX(1)}}

/* ===== HEADER ===== */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(242,237,228,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(200,191,176,.4);transition:transform .4s}
.header.hidden{transform:translateY(-100%)}
.header-inner{max-width:1400px;margin:0 auto;padding:0 48px;height:72px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:baseline;gap:8px}
.logo-hanja{font-family:var(--font-base);font-size:.75rem;letter-spacing:4px;color:var(--sage)}
.logo-name{font-family:var(--font-base);font-size:1.3rem;letter-spacing:6px;color:var(--black)}
.header-actions{display:flex;align-items:center;gap:16px}

.nav{display:flex;gap:32px;align-items:center}
.nav-link{font-family:var(--font-base);font-size:.82rem;letter-spacing:3px;color:var(--text-light);position:relative;transition:color .3s}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--sage);transition:width .3s}
.nav-link:hover{color:var(--sage-dark)}
.nav-link:hover::after{width:100%}

.lang-select{position:relative;flex-shrink:0}
.lang-current{font-family:var(--font-base);font-size:.7rem;letter-spacing:2px;color:var(--text-light);border:1px solid rgba(138,156,130,.45);border-radius:2px;padding:5px 12px;cursor:pointer;background:transparent;transition:all .3s}
.lang-current:hover,.lang-select.open .lang-current{color:var(--sage-dark);border-color:var(--sage)}
.lang-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg);border:1px solid rgba(200,191,176,.6);list-style:none;min-width:110px;z-index:500;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .25s}
.lang-select.open .lang-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.lang-dropdown li{padding:9px 14px;font-family:var(--font-base);font-size:.7rem;letter-spacing:2px;color:var(--text-light);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .2s}
.lang-dropdown li:hover{background:var(--bg2)}
.lang-dropdown li.active{color:var(--sage-dark)}
.lang-dropdown li span{font-size:.68rem;letter-spacing:.5px;color:var(--warm)}



.hamburger{display:none;flex-direction:column;gap:6px;padding:8px}
.hamburger span{display:block;width:22px;height:1px;background:var(--black);transition:all .3s}
.hamburger.open span:first-child{transform:rotate(45deg) translate(2px,4px)}
.hamburger.open span:last-child{transform:rotate(-45deg) translate(2px,-4px)}

/* Mobile Menu */
.mobile-menu{position:fixed;inset:0;z-index:999;background:var(--bg2);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .5s}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu nav{display:flex;flex-direction:column;align-items:center;gap:28px}
.mm-link{font-family:var(--font-base);font-size:1.6rem;letter-spacing:8px;color:var(--black);opacity:.6;transition:opacity .3s}
.mm-link:hover{opacity:1}
.mm-footer{margin-top:48px;font-size:.8rem;color:var(--sage);letter-spacing:2px}
.mm-footer a{color:var(--sage);transition:color .3s}

/* ===== HERO ===== */
.hero{position:relative;width:100%;height:100vh;min-height:600px;overflow:hidden;background:var(--black)}
.hero-slider{position:absolute;inset:0;display:flex;transition:transform 1s cubic-bezier(.77,0,.175,1)}
.hero-slide{min-width:100%;height:100%;position:relative}
.hero-slide img{width:100%;height:100%;object-fit:cover;opacity:.75}
.hero-slide .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-base);font-size:1.8rem;color:rgba(244,240,230,.3);background:var(--black)}
.hero-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 64px 120px;background:linear-gradient(transparent 40%,rgba(15,15,13,.7))}
.hero-content{max-width:700px}
.hero-label{font-family:var(--font-base);font-size:.75rem;letter-spacing:5px;color:var(--sage-light);margin-bottom:12px;text-transform:uppercase}
.hero-title{font-family:var(--font-base);font-size:2.6rem;color:var(--cream);letter-spacing:3px;line-height:1.4}
.hero-sub{font-family:var(--font-base);font-size:.9rem;color:rgba(244,240,230,.6);margin-top:12px;letter-spacing:2px}
.hero-dots{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center}
.hero-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:rgba(244,240,230,.3);cursor:pointer;transition:width .3s,height .3s,background .3s}
.hero-dot.on{width:8px;height:8px;background:var(--cream)}
.hero-arr{position:absolute;top:50%;color:rgba(244,240,230,.5);font-size:2.4rem;padding:16px;transition:color .3s;transform:translateY(-50%)}
.hero-arr:hover{color:var(--cream)}
.hero-prev{left:20px}
.hero-next{right:20px}
.hero-scroll{position:absolute;bottom:40px;right:48px;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(244,240,230,.4);font-family:var(--font-base);font-size:.65rem;letter-spacing:3px}
.scroll-line{width:1px;height:32px;background:rgba(244,240,230,.2);position:relative;overflow:hidden}
.scroll-line::after{content:'';position:absolute;top:-100%;left:0;width:1px;height:100%;background:var(--sage-light);animation:scrollAni 2s infinite}
@keyframes scrollAni{0%{top:-100%}100%{top:100%}}

/* ===== VALUES STRIP ===== */
.values-strip{background:var(--bg2);border-top:1px solid rgba(200,191,176,.5);border-bottom:1px solid rgba(200,191,176,.5);padding:18px 48px;text-align:center}
.values-inner{font-family:var(--font-base);font-size:.82rem;letter-spacing:6px;color:var(--text-light)}
.values-inner .dot{margin:0 8px;opacity:.4}

/* ===== SECTIONS ===== */
.section{padding:100px 0;background:var(--bg)}
.container{max-width:var(--max-width,1400px);margin:0 auto;padding:0 48px}
.sec-head{text-align:center;margin-bottom:64px}
.sec-label{font-family:var(--font-base);font-size:.7rem;letter-spacing:5px;color:var(--sage);display:block;margin-bottom:8px}
.sec-title{font-family:var(--font-base);font-size:2rem;letter-spacing:8px;color:var(--black)}
.sec-line{width:40px;height:1px;background:var(--sage);margin:16px auto 0;opacity:.5}

/* ===== PORTFOLIO ===== */
.filters{display:flex;justify-content:center;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.fil{background:transparent;padding:8px 12px;border:none;transition:all .3s;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.fil::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:1px;background:var(--sage);transition:width .3s}
.fil.active::after,.fil:hover::after{width:40px}
.fil-name{font-family:var(--font-base);font-size:1rem;letter-spacing:3px;color:var(--text-light);transition:color .3s}
.fil-sub{font-family:var(--font-base);font-size:.7rem;letter-spacing:1px;color:var(--text-light);opacity:.6;text-transform:none;transition:opacity .3s,color .3s}
.fil.active .fil-name,.fil:hover .fil-name{color:var(--sage-dark)}
.fil.active .fil-sub,.fil:hover .fil-sub{color:var(--sage-dark);opacity:.9}
.grid{display:grid;grid-template-columns:repeat(var(--grid-cols,3),1fr);gap:20px}
.grid-item{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:4/5;background:var(--warm)}
.grid-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease,opacity .5s}
.grid-item:hover img{transform:scale(1.04)}
.grid-item .ov{position:absolute;inset:0;background:rgba(15,15,13,0);display:flex;flex-direction:column;justify-content:flex-end;padding:24px;opacity:0;transition:all .5s}
.grid-item:hover .ov{background:rgba(15,15,13,.45);opacity:1}
.ov h4{font-family:var(--font-base);font-size:1.1rem;color:var(--cream);letter-spacing:1px}
.ov span{font-size:.7rem;color:var(--sage-light);letter-spacing:3px;margin-top:4px}
.grid-item .item-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-base);font-size:.85rem;color:var(--text-light)}

/* ===== MODAL ===== */
.modal{position:fixed;inset:0;z-index:2000;background:rgba(15,15,13,.9);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .4s;padding:40px}
.modal.open{opacity:1;visibility:visible}
.modal-wrap{background:var(--cream);max-width:960px;width:100%;max-height:90vh;overflow-y:auto;position:relative}
.modal-x{position:absolute;top:16px;right:20px;font-size:2.2rem;color:var(--black);z-index:10;transition:all .3s;opacity:0.65;text-shadow:0 0 12px rgba(255,255,255,0.9), 0 0 20px rgba(255,255,255,0.6);padding:8px;line-height:1}
.modal-x:hover{opacity:1;transform:scale(1.05)}
.modal-body{display:grid;grid-template-columns:1fr 1fr}
.modal-img{background:var(--warm)}
.modal-img img{width:100%;height:100%;object-fit:cover;min-height:400px}
.modal-info{padding:48px 40px;display:flex;flex-direction:column;gap:8px}
.modal-cat{font-family:var(--font-base);font-size:.75rem;letter-spacing:4px;color:var(--sage)}
.modal-info h3{font-family:var(--font-base);font-size:1.5rem;letter-spacing:1px;color:var(--black)}
.modal-yr{font-size:.8rem;color:var(--text-light)}
.modal-desc{margin-top:16px;font-size:.9rem;line-height:1.9;color:var(--text-light)}

/* ===== PHILOSOPHY ===== */
.philosophy{background:var(--bg2);color:var(--text)}
.philosophy .sec-label{color:var(--sage)}
.philosophy .sec-title{color:var(--black)}
.phil-grid{display:grid;grid-template-columns:repeat(var(--phil-cols,3),1fr);gap:24px;margin-bottom:56px}
.phil-card{text-align:center;padding:36px 24px;border:1px solid rgba(200,191,176,.6);transition:border-color .4s;background:var(--bg)}
.phil-card:hover{border-color:var(--sage)}
.phil-icon{display:flex;justify-content:center;align-items:center;height:40px;margin-bottom:14px;color:var(--sage)}
.phil-icon svg{width:32px;height:32px;stroke-width:1.2}
.phil-card h3{font-family:var(--font-base);font-size:1rem;letter-spacing:2px;margin-bottom:10px;color:var(--black)}
.phil-card p{font-size:.84rem;color:var(--text-light);line-height:1.9}
.phil-quote{text-align:center;font-family:var(--font-base);font-size:1.2rem;line-height:1.9;color:var(--text);border:none;padding:0;max-width:560px;margin:0 auto}
.phil-quote cite{display:block;margin-top:14px;font-family:var(--font-base);font-size:.78rem;letter-spacing:3px;color:var(--sage);font-style:normal}

/* ===== ABOUT ===== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-img{aspect-ratio:3/4;background:var(--warm);display:flex;align-items:center;justify-content:center;font-family:var(--font-base);font-size:2rem;color:rgba(107,124,99,.3);overflow:hidden}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-text h3{font-family:var(--font-base);font-size:1.8rem;letter-spacing:3px}
.about-text .hanja{font-size:.9rem;color:var(--sage);letter-spacing:4px;margin-left:8px}
.about-en{font-family:var(--font-base);font-size:.8rem;letter-spacing:4px;color:var(--sage);margin-top:4px}
#about-desc{margin-top:24px;font-size:.9rem;color:var(--text-light);line-height:2}
#about-desc p{margin-bottom:12px}
.about-meta{margin-top:32px;display:grid;gap:16px}
.about-meta span{font-family:var(--font-base);font-size:.7rem;letter-spacing:4px;color:var(--sage)}
.about-meta p{font-size:.9rem;margin-top:2px}
.about-meta a{color:var(--sage-dark);border-bottom:1px solid var(--sage);transition:opacity .3s}

/* ===== CONTACT ===== */
.contact{background:var(--bg2)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.contact-left{display:flex;flex-direction:column;gap:28px;padding-top:8px}
.ci span{font-family:var(--font-base);font-size:.7rem;letter-spacing:4px;color:var(--sage)}
.ci p{font-size:.9rem;margin-top:2px;color:var(--text)}
.ci a{color:var(--sage-dark);border-bottom:1px solid var(--sage)}
.contact-form h3{font-family:var(--font-base);font-size:1.3rem;letter-spacing:2px;margin-bottom:24px}
.fg{margin-bottom:18px}
.fg label{display:block;font-size:.75rem;letter-spacing:2px;color:var(--sage);margin-bottom:4px}
.fg input,.fg textarea{width:100%;padding:12px 0;border:none;border-bottom:1px solid var(--warm);background:transparent;font-size:.9rem;font-family:var(--font-base);outline:none;transition:border-color .3s;resize:none;color:var(--text)}
.fg input:focus,.fg textarea:focus{border-bottom-color:var(--sage)}
.fg input::placeholder,.fg textarea::placeholder{color:var(--warm)}
.submit-btn{font-family:var(--font-base);font-size:.85rem;letter-spacing:4px;padding:14px 48px;border:1px solid var(--sage);color:var(--sage-dark);transition:all .3s;margin-top:8px}
.submit-btn:hover{background:var(--sage);color:var(--cream)}
.form-ok{display:none;margin-top:16px;font-size:.85rem;color:var(--sage);letter-spacing:1px}
.form-ok.show{display:block}

/* ===== FOOTER ===== */
.footer{background:var(--bg2);color:var(--text-light);padding:56px 48px 28px;border-top:1px solid rgba(200,191,176,.5)}
.footer-inner{max-width:1200px;margin:0 auto}
.f-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px}
.f-hanja{font-family:var(--font-base);font-size:.72rem;letter-spacing:6px;color:var(--sage);display:block}
.f-name{font-family:var(--font-base);font-size:1.1rem;color:var(--black);letter-spacing:6px}
.f-slogan{font-family:var(--font-base);font-size:.72rem;letter-spacing:3px;margin-top:6px}
.f-links{display:flex;gap:24px;font-family:var(--font-base);font-size:.78rem;letter-spacing:2px}
.f-links a{color:var(--text-light);transition:color .3s}
.f-links a:hover{color:var(--black)}
.f-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid rgba(200,191,176,.5);font-size:.72rem}
.f-top-btn{font-family:var(--font-base);letter-spacing:3px;color:var(--warm);transition:color .3s}
.f-top-btn:hover{color:var(--black)}

/* ===== ANIMATIONS ===== */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.fade-in.vis{opacity:1;transform:translateY(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .modal-body{grid-template-columns:1fr}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
  .phil-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
  .modal-x{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8), 0 0 16px rgba(0,0,0,.6);opacity:.9}
  .modal-x:hover{color:#fff}
}
@media(max-width:768px){
  .header-inner{padding:0 16px;height:60px}
  .nav{display:none}
  .hamburger{display:flex}
  .section{padding:80px 0}
  .container{padding:0 16px}
  .hero{height:80vh}
  .hero-overlay{padding:0 24px 100px}
  .hero-title{font-size:1.6rem}
  .hero-scroll{display:none}
  .grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .footer{padding:40px 16px 24px}
  .f-top{flex-direction:column;gap:24px}
  .f-bottom{flex-direction:column;gap:8px;text-align:center}
  .values-strip{padding:16px}
  .values-inner{font-size:.8rem;letter-spacing:4px}
}
@media(max-width:480px){
  .modal-wrap{margin:16px}
  .modal-info{padding:24px}
}