@charset "utf-8";
/* ============================================================
   이만세는 (leemanse.com) — 예술·갤러리 컨셉 / 먹색 계열
   ============================================================ */

/* ---- 디자인 토큰 ---- */
:root{
  --ink:        #1a1a1a;   /* 먹색 (메인 텍스트/배경) */
  --ink-soft:   #3a3736;   /* 옅은 먹색 */
  --ink-light:  #6b6663;   /* 회먹색 (보조 텍스트) */
  --paper:      #fbfaf7;   /* 한지 톤 오프화이트 (배경) */
  --paper-warm: #f4f1ea;   /* 따뜻한 배경 */
  --line:       #e3ddd3;   /* 얇은 구분선 */
  --accent:     #8a1f1f;   /* 단청 주(朱) 포인트 — 도장/낙관 느낌 */
  --white:      #ffffff;
  --serif: "Noto Serif KR", serif;
  --sans:  "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --maxw: 1200px;
  --gap: 24px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-x:hidden;width:100%;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:color .2s,opacity .2s;}
a:hover{opacity:.7;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.35;margin:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* 스크롤 페이드인: JS가 정상 로드(body.js-on)됐을 때만 적용.
   JS 미작동 시 .reveal은 그냥 보임 → 백지 방지 */
.reveal{opacity:1;transform:none;}
body.js-on .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;}
body.js-on .reveal.on{opacity:1;transform:none;}

/* ============================================================
   헤더 / 네비게이션
   ============================================================ */
#hd{
  position:relative;z-index:1000;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
#hd .hd-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  height:74px;display:flex;align-items:center;justify-content:space-between;
}
.logo{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:.02em;color:var(--ink);}
.logo .dot{color:var(--accent);}
#gnb{display:flex;gap:34px;align-items:center;}
#gnb a{
  font-size:16px;font-weight:500;color:var(--ink-soft);
  position:relative;padding:6px 0;
}
#gnb a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:var(--accent);transition:width .25s;
}
#gnb a:hover{opacity:1;}
#gnb a:hover::after{width:100%;}

.menu-toggle{display:none;background:none;border:0;font-size:24px;color:var(--ink);cursor:pointer;}

/* 헤더가 일반 흐름이므로 body 상단 패딩 불필요 */

/* ============================================================
   히어로
   ============================================================ */
.hero{
  position:relative;
  text-align:center;overflow:hidden;
  background:var(--paper);
  padding:80px 0 72px;
}
.hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(138,31,31,.05), transparent 55%),
             radial-gradient(circle at 80% 70%, rgba(26,26,26,.04), transparent 50%);
}
.hero-inner{position:relative;z-index:2;padding:0 24px;}
.hero .seal{
  display:inline-block;width:64px;height:64px;line-height:64px;
  border:2px solid var(--accent);color:var(--accent);
  font-family:var(--serif);font-size:30px;font-weight:700;
  border-radius:6px;margin-bottom:28px;
}
.hero h1{
  font-size:clamp(40px,7vw,82px);font-weight:700;letter-spacing:.01em;
  color:var(--ink);margin-bottom:20px;
}
.hero h1 .dot{color:var(--accent);}
.hero p{font-size:clamp(16px,2vw,20px);color:var(--ink-light);max-width:560px;margin:0 auto;}
.scroll-cue{
  margin-top:36px;
  font-size:12px;letter-spacing:.2em;color:var(--ink-light);
}

/* ============================================================
   섹션 공통
   ============================================================ */
.section{padding:110px 0;}
.section.warm{background:var(--paper-warm);}
.sec-head{text-align:center;margin-bottom:64px;}
.sec-head .eyebrow{
  display:block;font-size:13px;letter-spacing:.28em;color:var(--accent);
  margin-bottom:14px;font-weight:600;
}
.sec-head h2{font-size:clamp(28px,4vw,42px);color:var(--ink);}
.sec-head .desc{color:var(--ink-light);margin-top:14px;font-size:16px;}

/* ============================================================
   활동 영역 그리드 (6분야)
   ============================================================ */
.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
.field{
  background:var(--paper);padding:48px 34px;
  display:flex;flex-direction:column;gap:14px;
  transition:background .3s;
}
.field:hover{background:var(--white);}
.field .num{font-family:var(--serif);font-size:14px;color:var(--accent);letter-spacing:.1em;}
.field h3{font-size:24px;color:var(--ink);}
.field .tags{font-size:14px;color:var(--ink-light);line-height:1.9;}
.field .more{margin-top:auto;font-size:14px;font-weight:600;color:var(--ink);}
.field .more::after{content:" →";color:var(--accent);}

/* ============================================================
   소개 (이만세는)
   ============================================================ */
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center;}
.about .portrait{
  aspect-ratio:4/5;background:var(--paper-warm);
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.about .portrait .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--ink-light);font-family:var(--serif);font-size:18px;
}
.about h2{font-size:clamp(26px,3.5vw,38px);margin-bottom:24px;line-height:1.4;}
.about p{color:var(--ink-soft);margin-bottom:18px;font-size:16px;}
.about .sign{font-family:var(--serif);font-size:20px;margin-top:8px;color:var(--ink);}

/* ============================================================
   포트폴리오 / 갤러리 (메이슨리)
   ============================================================ */
.gallery{columns:3;column-gap:var(--gap);}
.gallery .item{
  break-inside:avoid;margin-bottom:var(--gap);background:var(--white);
  border:1px solid var(--line);overflow:hidden;
}
.gallery .item .thumb{background:var(--paper-warm);aspect-ratio:4/3;}
.gallery .item .cap{padding:16px 18px;}
.gallery .item .cap h4{font-size:16px;margin-bottom:6px;}
.gallery .item .cap span{font-size:13px;color:var(--ink-light);}

/* ============================================================
   미디어 링크 리스트
   ============================================================ */
.media-list{border-top:1px solid var(--line);}
.media-list a{
  display:flex;align-items:center;gap:20px;padding:24px 4px;
  border-bottom:1px solid var(--line);
}
.media-list a:hover{opacity:1;background:var(--white);}
.media-list .tag{
  flex:0 0 96px;font-size:12px;letter-spacing:.1em;color:var(--accent);
  font-weight:600;
}
.media-list .ttl{flex:1;font-size:17px;color:var(--ink);font-family:var(--serif);}
.media-list .arrow{color:var(--ink-light);}

/* ============================================================
   섭외 CTA
   ============================================================ */
.cta{background:var(--ink);color:var(--paper);text-align:center;padding:96px 24px;}
.cta h2{color:var(--paper);font-size:clamp(28px,4vw,42px);margin-bottom:18px;}
.cta p{color:#c9c4bd;margin-bottom:36px;}
.btn{
  display:inline-block;padding:16px 40px;border:1.5px solid var(--paper);
  color:var(--paper);font-weight:600;letter-spacing:.05em;border-radius:2px;
}
.btn:hover{background:var(--paper);color:var(--ink);opacity:1;}

/* ============================================================
   푸터
   ============================================================ */
#ft{background:var(--ink);color:#a6a09a;padding:56px 0 40px;border-top:1px solid #2a2724;}
#ft .ft-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:30px;}
#ft .ft-logo{font-family:var(--serif);font-size:22px;color:var(--paper);font-weight:700;}
#ft .ft-logo .dot{color:var(--accent);}
#ft .ft-info{font-size:14px;line-height:1.9;}
#ft .ft-sns{display:flex;gap:16px;font-size:20px;}
#ft .ft-sns a{color:#a6a09a;}
#ft .ft-sns a:hover{color:var(--paper);opacity:1;}
#ft .copy{font-size:13px;color:#6b6661;border-top:1px solid #2a2724;padding-top:24px;}

/* ============================================================
   서브페이지 공통
   ============================================================ */
.sub-hero{
  background:var(--paper-warm);text-align:center;padding:80px 24px 64px;
  border-bottom:1px solid var(--line);
}
.sub-hero .eyebrow{font-size:13px;letter-spacing:.28em;color:var(--accent);font-weight:600;}
.sub-hero h1{font-size:clamp(30px,5vw,48px);margin-top:14px;color:var(--ink);}
.sub-body{max-width:var(--maxw);margin:0 auto;padding:72px 24px;}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:900px){
  .fields{grid-template-columns:repeat(2,1fr);}
  .gallery{columns:2;}
  .about{grid-template-columns:1fr;gap:36px;}
}
@media (max-width:640px){
  #gnb{
    position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s;z-index:999;
  }
  #gnb.open{max-height:400px;}
  #gnb a{padding:16px 24px;border-bottom:1px solid var(--line);width:100%;}
  .menu-toggle{display:block;}
  .fields{grid-template-columns:1fr;}
  .gallery{columns:1;}
  .section{padding:72px 0;}
  .media-list .tag{flex-basis:72px;}
  /* 히어로: 모바일 여백·글자 크기 조정 */
  .hero{padding:48px 0 40px;}
  .hero .seal{margin-bottom:18px;}
  .hero h1{margin-bottom:14px;font-size:42px;}
  .hero p{font-size:16px;}
  .scroll-cue{display:none;}
}