/* =========================================================
   PEERS / 피어스 — 공유 스타일시트
   톤: Soft & humane + 에디토리얼 악센트
   ========================================================= */

/* ---- 폰트 ---- */
/* 전체 서체: 나눔스퀘어 라운드 (둥글고 친근한 톤) — woff2 웹폰트 임베드 */
@import url("https://cdn.jsdelivr.net/gh/fonts-archive/NanumSquareRound/NanumSquareRound.css");

:root{
  /* 색 — 샌드베이지 + 딥그린 컨셉 */
  --bg:#EBE3D2;          /* 샌드 베이지 */
  --bg-2:#E1D7C0;        /* 딥 샌드 (표면 대비) */
  --surface:#FAF6EC;     /* 카드 (웜 화이트) */
  --ink:#22302A;         /* 딥그린-블랙 (본문/제목) */
  --ink-soft:#43534A;
  --muted:#867F6D;       /* 샌디 그레이 */
  --line:#D6CBB2;        /* 샌드 헤어라인 */
  --accent:#2D5A3D;      /* 딥그린 메인 */
  --accent-deep:#1E4029;
  /* 아이템별 컬러 */
  --coffee:#8C5A3C;
  --patch:#4FA39A;
  --eco:#5C9A56;
  --garden:#C98A22;
  /* 서체 — 전체 나눔스퀘어 라운드 통일 */
  --serif:'Nanum Square Round','Malgun Gothic','맑은 고딕','Apple SD Gothic Neo',sans-serif;
  --sans:'Nanum Square Round','Malgun Gothic','맑은 고딕','Apple SD Gothic Neo',sans-serif;
  /* 라운드 (soft & humane = 큰 라운드, 단 입력은 작게 — 혼합) */
  --r-lg:20px; --r-md:14px; --r-sm:8px;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* 한글 타이포: 어절 단위로 줄바꿈 (한 글자 orphan 방지) */
  word-break:keep-all;
  overflow-wrap:break-word;
}
/* orphan/widow 방지 — 헤드는 balance, 본문은 pretty */
h1, h2, h3, h4 { text-wrap:balance; }
p, li, .lbl, .lead, .sub, .cap-title, .story-circ p, .story-cap p { text-wrap:pretty; }
img{max-width:100%; display:block;}
a{color:inherit;}

.serif{font-family:var(--serif);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.narrow{max-width:760px;}

/* eyebrow 메타 라벨 */
.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.22em;
  color:var(--accent); text-transform:uppercase; margin:0 0 14px;
}
.eyebrow.muted{color:var(--muted);}

/* 제목 */
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; letter-spacing:-.01em; color:var(--ink);}
.h-display{font-size:clamp(38px,6.4vw,76px); line-height:1.08; letter-spacing:-.025em; margin:0;}
.h-sec{font-size:clamp(28px,3.6vw,42px); line-height:1.15; margin:0 0 14px;}
em.hl{font-style:normal; color:var(--accent);}
.lead{font-size:clamp(17px,2vw,20px); color:var(--ink-soft); max-width:560px; line-height:1.65;}
p{margin:0 0 1em;}

/* ---- 헤더 / 네비 (조용한 네비, 스크롤다운 시 숨김) ---- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:transform .35s ease, border-color .3s, background .3s;
}
.site-header.scrolled{border-color:var(--line);}
.site-header.hide{transform:translateY(-100%);}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:72px;}
.brand{display:flex; align-items:baseline; gap:7px; text-decoration:none;}
.brand .mark{width:30px; height:30px;}
.brand .word{font-family:var(--sans); font-weight:800; font-size:22px; letter-spacing:.5px; color:var(--accent);}
.brand .word-ko{font-family:var(--serif); font-weight:600; font-size:16px; color:var(--accent); opacity:.85;}
.nav{display:flex; align-items:center; gap:30px;}
.nav a{font-size:15.5px; text-decoration:none; color:var(--ink-soft); position:relative; padding:4px 0;}
.nav a:hover{color:var(--ink);}
.nav a.active{color:var(--ink);}
.nav a.active::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); border-radius:2px;}
.nav .contact-link{
  background:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:9px 20px; color:#fff; font-weight:600;
  transition:background .2s, border-color .2s;
}
.nav .contact-link:hover{background:var(--accent-deep); border-color:var(--accent-deep); color:#fff;}
.nav .contact-link.active{color:#fff;}
.menu-btn{display:none; background:none; border:none; font-size:24px; color:var(--ink); cursor:pointer;}

/* ---- 드롭다운(활동 소개) ---- */
.nav-dd{position:relative; padding-bottom:18px; margin-bottom:-18px;} /* hover 영역 확장: trigger와 menu 사이 mouse가 빠지지 않도록 */
.nav-dd-trigger{display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0; font:inherit; color:inherit; cursor:pointer;}
.nav-dd-trigger .caret{font-size:10px; transition:transform .2s; opacity:.7;}
.nav-dd:hover .nav-dd-trigger .caret,
.nav-dd:focus-within .nav-dd-trigger .caret{transform:translateY(2px);}
.nav-dd.active > .nav-dd-trigger{color:var(--ink);}
.nav-dd.active > .nav-dd-trigger::after{content:''; position:absolute; left:0; right:18px; bottom:-2px; height:2px; background:var(--accent); border-radius:2px;}
.nav-dd-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-6px);
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:8px; min-width:220px;
  margin-top:-4px; /* trigger와 visually 적당히 떨어지되 hover 갭 없도록 */
  box-shadow:0 18px 44px rgba(40,30,20,.12), 0 4px 10px rgba(40,30,20,.04);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:70;
}
/* invisible bridge: trigger 하단과 menu 상단을 연결하는 hover 영역 */
.nav-dd-menu::before{
  content:''; position:absolute; left:0; right:0; top:-14px; height:14px;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu,
.nav-dd.open .nav-dd-menu,
.nav-dd-menu:hover{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.nav-dd-menu a{
  display:block; padding:11px 14px; border-radius:9px;
  font-size:14.5px; color:var(--ink-soft); line-height:1.2; white-space:nowrap;
}
.nav-dd-menu a:hover,
.nav-dd-menu a.active{background:var(--bg-2); color:var(--ink);}
.nav-dd-menu a.active{font-weight:700;}
.nav-dd-menu a::after{display:none;}

/* ---- 버튼 ---- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600;
  font-size:16px; text-decoration:none; cursor:pointer; border:none; border-radius:999px;
  padding:14px 28px; transition:transform .15s ease, background .2s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-deep);}
.btn-text{background:none; padding:14px 4px; color:var(--ink); font-weight:600;}
.btn-text .arr{transition:transform .2s;}
.btn-text:hover .arr{transform:translateX(4px);}

/* ---- 섹션 리듬 (불균등 패딩) ---- */
.section{padding:96px 0;}
.section.tight{padding:56px 0;}
.section.alt{background:var(--bg-2);}
.section.ink{background:var(--ink); color:var(--bg);}
.section.ink h2,.section.ink h3{color:var(--bg);}
.section.ink .lead{color:#D9CFC2;}
hr.rule{border:none; border-top:1px solid var(--line); margin:0;}

/* ---- 히어로 (비대칭) ---- */
.hero{padding:88px 0 84px; background:linear-gradient(180deg,var(--bg-2),var(--bg) 70%);}
.hero .wrap{display:grid; grid-template-columns:7fr 5fr; gap:48px; align-items:center;}
.hero .copy .badge{display:inline-block; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:7px 15px; font-size:13px; color:var(--muted); margin-bottom:26px;}
.hero .copy .actions{margin-top:34px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.hero-visual{position:relative;}
.hero-visual .frame{aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  background-color:#8C5A3C; position:relative; display:flex; align-items:flex-end; padding:22px; color:#fff;}
.hero-visual .frame span{position:relative; z-index:2; font-weight:600; font-size:15px;}
.hero-visual .frame::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.4));}
.hero-visual .chip{position:absolute; left:-26px; bottom:42px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:14px 18px; box-shadow:0 8px 24px rgba(80,60,40,.10);}
.hero-visual .chip b{display:block; font-family:var(--serif); font-size:24px; color:var(--accent);}
.hero-visual .chip small{color:var(--muted); font-size:13px;}

/* ---- 미션 3단 ---- */
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;}
.three .cell{background:var(--bg); padding:34px 30px;}
.three .num{font-family:var(--serif); color:var(--accent); font-size:14px; font-weight:600; margin-bottom:12px;}
.three .cell h3{font-size:21px; margin:0 0 8px;}
.three .cell p{color:var(--muted); font-size:15.5px; margin:0;}

/* ---- 아이템 카드 (불균등: 큰 1 + 작은 3 느낌은 페이지별, 여기선 2x2) ---- */
.items{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.item-card{display:block; text-decoration:none; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--surface); transition:transform .25s ease, box-shadow .25s;}
.item-card:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(80,60,40,.10);}
.item-card .cover{height:168px; display:flex; align-items:flex-end; padding:20px; color:#fff;
  font-family:var(--serif); font-size:23px; font-weight:600;}
.item-card .body{padding:22px 24px 26px;}
.item-card .body p{color:var(--muted); font-size:15px; margin:6px 0 0;}
.item-card .more{margin-top:16px; font-weight:600; font-size:14.5px; color:var(--accent); display:inline-flex; gap:6px;}

/* 아이템 컬러 표면 — 무료 라이선스(Pexels) 사진 + 오버레이 + 컬러 폴백 */
.c-coffee,.c-coffee-b,.c-patch,.c-patch-b,.c-eco,.c-eco-b,.c-garden,.c-garden-b{
  background-size:cover; background-position:center; background-repeat:no-repeat;}
.c-coffee  {background-color:#8C5A3C; background-image:linear-gradient(rgba(43,37,32,.08),rgba(43,37,32,.18)),url('img/doc-coffee-roaster-2.jpg');}
.c-coffee-b{background-color:#8C5A3C; background-image:linear-gradient(rgba(43,37,32,.28),rgba(43,37,32,.40)),url('img/coffee2.jpg');}
.c-patch   {background-color:#4FA39A; background-image:linear-gradient(rgba(18,40,38,.30),rgba(18,40,38,.42)),url('img/doc-product-flatlay.jpg');}
.c-patch-b {background-color:#4FA39A; background-image:linear-gradient(rgba(18,40,38,.18),rgba(18,40,38,.28)),url('img/product-taping.jpg');}
.c-eco     {background-color:#5C9A56; background-image:linear-gradient(rgba(24,45,24,.08),rgba(24,45,24,.18)),url('img/doc-pet-bottles.jpg');}
.c-eco-b   {background-color:#5C9A56; background-image:linear-gradient(rgba(24,45,24,.18),rgba(24,45,24,.28)),url('img/product-recycler.jpg');}
.c-garden  {background-color:#C98A22; background-image:linear-gradient(rgba(50,35,6,.22),rgba(50,35,6,.32)),url('img/doc-hanging-plants.jpg');}
.c-garden-b{background-color:#C98A22; background-image:linear-gradient(rgba(50,35,6,.18),rgba(50,35,6,.28)),url('img/product-garden.jpg');}

/* ---- 아이템 서브페이지 ---- */
.item-hero{padding:84px 0 60px;}
.item-hero .wrap{display:grid; grid-template-columns:6fr 6fr; gap:44px; align-items:center;}
.item-hero .tag{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.16em; padding:6px 14px; border-radius:999px;}
.item-hero h1{font-size:clamp(34px,5vw,58px); line-height:1.1; margin:16px 0 18px;}
.item-figure{aspect-ratio:5/4; border-radius:20px; overflow:hidden;}
.step{display:grid; grid-template-columns:5fr 7fr; gap:40px; align-items:center; padding:64px 0;}
.step:nth-child(even){grid-template-columns:7fr 5fr;}
.step:nth-child(even) .step-text{order:2;}
.step .step-num{font-family:var(--serif); font-size:15px; font-weight:600; letter-spacing:.1em;}
.step .step-fig{aspect-ratio:4/3; border-radius:20px; background-color:var(--bg-2); opacity:1 !important; overflow:hidden; width:100%; height:auto; object-fit:cover; object-position:center;}
.step h3{font-size:clamp(24px,3vw,32px); margin:10px 0 12px;}
.step p{color:var(--ink-soft); max-width:480px;}
/* 굿즈 그리드 */
.goods{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.goods .g{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
.goods .g .ph{aspect-ratio:1/1; background-color:var(--bg-2); opacity:1 !important;}
.goods .g .gi{padding:14px 16px;}
.goods .g .gi b{display:block; font-size:15px;}
.goods .g .gi small{color:var(--muted);}

/* ---- 소식 ---- */
.news{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.post{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  text-decoration:none; color:inherit; transition:transform .2s;}
.post:hover{transform:translateY(-3px);}
.post .thumb{aspect-ratio:16/10;}
.post .pi{padding:18px 20px 22px;}
.post .date{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums;}
.post .pi h4{font-size:17.5px; line-height:1.4; margin:7px 0 0;}
.news-feature{display:grid; grid-template-columns:7fr 5fr; gap:0; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; background:var(--surface); margin-bottom:30px;}
.news-feature .thumb{min-height:300px;}
.news-feature .nf{padding:40px;}
.news-feature .nf h3{font-size:clamp(24px,3vw,32px); margin:10px 0 14px;}

/* ---- 폼 ---- */
.contact-grid{display:grid; grid-template-columns:5fr 7fr; gap:52px; align-items:start;}
.info-list{list-style:none; padding:0; margin:24px 0 0;}
.info-list li{padding:16px 0; border-top:1px solid var(--line);}
.info-list li .k{font-size:13px; color:var(--muted); letter-spacing:.05em;}
.info-list li .v{font-size:17px; font-weight:600; margin-top:3px;}
.form{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px;}
.form .field{margin-bottom:20px;}
.form label{display:block; font-size:14px; font-weight:600; margin-bottom:8px;}
.form label .req{color:var(--accent);}
.form input,.form textarea{width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg); color:var(--ink); font-family:inherit; font-size:16px; transition:border-color .2s, box-shadow .2s;}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(194,104,71,.14);}
.form textarea{min-height:128px; resize:vertical;}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-note{font-size:13px; color:var(--muted); margin-top:10px;}

/* ---- 페이지 인트로(서브 헤더) ---- */
.page-intro{padding:72px 0 40px;}
.page-intro .h-display{font-size:clamp(34px,5vw,60px);}
.breadcrumb{font-size:13.5px; color:var(--muted); margin-bottom:18px;}
.breadcrumb a{color:var(--muted); text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}

/* ---- 인용 / 매니페스토 ---- */
.manifesto{font-family:var(--serif); font-size:clamp(24px,3.4vw,38px); line-height:1.45; max-width:880px;}
.manifesto em{font-style:normal; color:var(--accent);}

/* ---- 푸터 ---- */
.site-footer{background:var(--ink); color:#D9CFC2; padding:72px 0 40px;}
.site-footer a{color:#D9CFC2; text-decoration:none;}
.site-footer a:hover{color:#fff;}
.footer-top{display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:32px; padding-bottom:44px; border-bottom:1px solid #3D352D;}
.footer-top .word{font-family:var(--sans); font-weight:800; font-size:24px; color:#fff; letter-spacing:.5px;}
.footer-top .tagline{font-family:var(--serif); margin-top:14px; color:#C9BDAE; max-width:280px; line-height:1.5;}
.footer-col h5{font-family:var(--sans); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#8C8175; margin:0 0 16px;}
.footer-col ul{list-style:none; margin:0; padding:0;}
.footer-col li{margin-bottom:11px; font-size:15px;}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:26px; font-size:13px; color:#8C8175;}

/* ---- 진입 모션 ---- */
/* 스크롤 시 자식 요소가 순차(stagger)로 떠오름 — 지연은 JS가 --d로 주입 */
/* JS가 있을 때만 숨김 → JS 없으면 콘텐츠 항상 표시 (프로그레시브 인핸스먼트) */
.js .reveal > *{
  opacity:0; transform:translateY(6px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);
}
.js .reveal.in > *{opacity:1; transform:none;}

/* 히어로 진입 (로드 시) */
@keyframes peersUp{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;}}
@keyframes peersFade{from{opacity:0;} to{opacity:1;}}
.hero .copy > *{opacity:0; animation:peersUp .85s cubic-bezier(.22,.61,.36,1) forwards;}
.hero .copy .badge{animation-delay:.05s}
.hero .copy h1{animation-delay:.18s}
.hero .copy .lead{animation-delay:.34s}
.hero .copy .actions{animation-delay:.5s}
.hero-visual{opacity:0; animation:peersUp 1s cubic-bezier(.22,.61,.36,1) .4s forwards;}
.hero-visual .chip{opacity:0; animation:peersFade .8s ease 1.1s forwards;}

/* 카드/도형 호버 마이크로 인터랙션 */
.item-card .cover{transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.item-card:hover .cover{transform:scale(1.04);}
.item-card{overflow:hidden;}

/* 카운트업 숫자 */
.count{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion:reduce){
  .reveal > *{opacity:1!important; transform:none!important; transition:none!important;}
  .hero .copy > *,.hero-visual,.hero-visual .chip{opacity:1!important; animation:none!important;}
  .item-card:hover .cover{transform:none;}
  html{scroll-behavior:auto;}
}

/* ---- 반응형 ---- */
@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr; gap:36px;}
  .hero-visual{order:-1;}
  .hero-visual .chip{left:auto; right:18px; bottom:18px;}
  .item-hero .wrap,.news-feature,.contact-grid,.step,.step:nth-child(even){grid-template-columns:1fr; gap:28px;}
  .step:nth-child(even) .step-text{order:0;}
  .three,.items,.news,.footer-top{grid-template-columns:1fr;}
  .goods{grid-template-columns:repeat(2,1fr);}
  .footer-top{gap:26px;}
  .news-feature .thumb{aspect-ratio:16/9; min-height:0;}
}
@media (max-width:640px){
  body{font-size:16px;}
  .goods{grid-template-columns:1fr;}
  .section{padding:64px 0;}
  .nav{display:none; position:fixed; inset:72px 0 auto 0; flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:8px 0;
    max-height:calc(100vh - 72px); overflow:auto;}
  .nav.open{display:flex;}
  .nav a{padding:15px 28px; width:100%;}
  .nav .contact-link{margin:12px 28px; text-align:center;}
  .menu-btn{display:block;}
  .form .row{grid-template-columns:1fr;}

  /* 모바일: 드롭다운을 inline으로 펼쳐 표시 (항상 visible, transform/transition 없음) */
  .nav-dd{width:100%;}
  .nav-dd-trigger{padding:15px 28px; display:flex; justify-content:space-between; width:100%;}
  .nav-dd-menu,
  .nav-dd:hover .nav-dd-menu,
  .nav-dd:focus-within .nav-dd-menu,
  .nav-dd.open .nav-dd-menu,
  .nav-dd-menu:hover{position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; border:none; border-radius:0; padding:0 0 6px;
    background:var(--bg-2); min-width:0; transition:none;}
  .nav-dd-menu a{padding:12px 44px; border-radius:0; font-size:14px; position:relative;}
  .nav-dd-menu a.active{background:transparent;}
  .nav-dd-menu a.active::before{content:''; position:absolute; left:28px; top:50%; transform:translateY(-50%); width:3px; height:16px; background:var(--accent); border-radius:2px;}
  .nav-dd.active > .nav-dd-trigger::after{display:none;}
}

/* ---- Flash 메시지 ---- */
.flash-wrap{padding:14px 0 0;}
.flash{padding:13px 18px; border-radius:var(--r-md); font-size:15px; font-weight:600; margin-top:10px; border:1px solid;}
.flash-success{background:#eaf3e7; color:#3f6b3a; border-color:#cbe2c4;}
.flash-error{background:#f6e4df; color:#9a3a28; border-color:#eccabd;}
.flash-info{background:#eef0f4; color:#4a4f59; border-color:#dde1e8;}
.field-error{color:#9a3a28; font-size:13px; margin-top:6px;}
.form input.invalid,.form textarea.invalid{border-color:#c0463b; box-shadow:0 0 0 3px rgba(192,70,59,.12);}

/* ---- 소식 상세 ---- */
.post-article{max-width:760px;}
.post-article .cover-img{aspect-ratio:16/9; border-radius:20px; margin:8px 0 28px; overflow:hidden;}
.post-article .post-meta{display:flex; gap:14px; align-items:center; color:var(--muted); font-size:14px; margin-bottom:10px;}
.post-article .post-cat{font-weight:700; color:var(--accent);}
.post-article .post-body{font-size:18px; line-height:1.8; color:var(--ink-soft); white-space:pre-line;}

/* ---- 관리자 ---- */
.admin-body{background:#F1ECE3;}
.admin-bar{background:var(--ink); color:#EDE5D8;}
.admin-bar .wrap{display:flex; align-items:center; justify-content:space-between; height:60px;}
.admin-bar .brand-mini{font-family:var(--sans); font-weight:800; letter-spacing:.5px; color:#fff;}
.admin-bar a{color:#C9BDAE; text-decoration:none; font-size:14px; margin-left:18px;}
.admin-bar a:hover{color:#fff;}
.admin-main{max-width:980px; margin:0 auto; padding:40px 24px 80px;}
.admin-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; margin-bottom:24px;}
.admin-card h2{font-size:21px; margin:0 0 16px;}
.admin-table{width:100%; border-collapse:collapse; font-size:14px;}
.admin-table th,.admin-table td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
.admin-table th{font-size:12px; letter-spacing:.05em; color:var(--muted); text-transform:uppercase;}
.admin-table td.num{font-variant-numeric:tabular-nums; color:var(--muted);}
.badge-st{display:inline-block; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px;}
.badge-new{background:#f6e4df; color:#9a3a28;}
.badge-done{background:#eaf3e7; color:#3f6b3a;}
.badge-cat{display:inline-block; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; background:#efe7da; color:#7a5a34;}
.btn-sm{padding:8px 14px; font-size:13.5px;}
.btn-danger{background:#9a3a28; color:#fff;}
.btn-line{background:transparent; border:1px solid var(--line); color:var(--ink);}
.login-wrap{max-width:380px; margin:8vh auto; padding:0 24px;}
.admin-actions{display:flex; gap:8px; flex-wrap:wrap;}
.muted-note{color:var(--muted); font-size:13px;}

/* =====================================================================
   v2 리디자인 — 에디토리얼 / 풀블리드 / 마퀴 / 그레인
   ===================================================================== */
:root{ --gold:#C39A3C; }

/* 종이 그레인 텍스처 (전역, 아주 옅게) */
body::before{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05;
  mix-blend-mode:multiply; background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 풀블리드 사진 히어로 */
.hero-full{position:relative; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden; color:#F4EFE2;}
.hero-full .hero-bg{position:absolute; left:0; right:0; top:-8%; height:116%; z-index:0;
  background-position:center; background-size:cover; will-change:transform;}
.hero-full .hero-bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(178deg, rgba(20,40,30,.42) 0%, rgba(20,40,30,.28) 38%, rgba(16,34,25,.86) 100%);}
.hero-full .wrap{position:relative; z-index:2; padding-top:20vh; padding-bottom:9vh;}
.hero-full .eyebrow{color:#DBCB9C;}
.hero-title{font-family:var(--serif); font-weight:600; font-size:clamp(46px,8.6vw,108px);
  line-height:1.0; letter-spacing:-.03em; margin:0; color:#FBF7EC; text-shadow:0 2px 40px rgba(0,0,0,.22);}
.hero-title em{font-style:normal; color:#E7C66A;}
.hero-sub{max-width:560px; font-size:clamp(17px,2vw,21px); line-height:1.6; color:#E8E1CF; margin:28px 0 0;}
.hero-full .actions{margin-top:36px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.hero-scroll{position:absolute; right:30px; bottom:30px; z-index:2; color:#D9D0BC; font-size:11px;
  letter-spacing:.28em; writing-mode:vertical-rl; text-transform:uppercase;}
.hero-scroll::after{content:''; display:block; width:1px; height:46px; margin:12px auto 0; background:rgba(217,208,188,.6); animation:scrollLine 2s ease-in-out infinite;}
@keyframes scrollLine{0%,100%{transform:scaleY(.4); transform-origin:top;}50%{transform:scaleY(1);}}

.btn-cream{background:#F4EFE2; color:#1E4029;}
.btn-cream:hover{background:#fff;}
.btn-ghost-light{background:transparent; border:1px solid rgba(244,239,226,.55); color:#F4EFE2;}
.btn-ghost-light:hover{background:rgba(244,239,226,.12);}

/* 마퀴 (흐르는 키워드 띠) */
.marquee{background:var(--accent); color:#EAE3D2; overflow:hidden; padding:20px 0;}
.marquee-track{display:inline-flex; align-items:center; white-space:nowrap; animation:marquee 30s linear infinite; will-change:transform;}
.marquee-track span{font-family:var(--serif); font-size:clamp(18px,2.4vw,26px); padding:0 30px; display:inline-flex; align-items:center;}
.marquee-track .dot{color:var(--gold); font-size:14px; padding:0 4px;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* 활동 — 에디토리얼 교차 행 */
.act-list{margin-top:46px; border-top:1px solid var(--line);}
.act-row{display:grid; grid-template-columns:1.05fr 1fr; gap:52px; align-items:center;
  padding:54px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit;}
.act-row:nth-child(even) .act-media{order:2;}
.act-media{position:relative; aspect-ratio:4/3; border-radius:20px; overflow:hidden;}
.act-media .act-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .7s cubic-bezier(.22,.61,.36,1);}
.act-row:hover .act-media .act-img{transform:scale(1.06);}
.act-no{font-family:var(--serif); font-size:17px; color:var(--gold); letter-spacing:.12em;}
.act-row h3{font-family:var(--serif); font-weight:600; font-size:clamp(28px,4vw,48px); line-height:1.04; margin:10px 0 14px; transition:color .25s;}
.act-row:hover h3{color:var(--accent);}
.act-row p{color:var(--ink-soft); max-width:460px; font-size:17px; margin:0;}
.act-row .more{margin-top:22px; display:inline-flex; gap:8px; color:var(--accent); font-weight:600;}
.act-row .more .arr{transition:transform .25s;}
.act-row:hover .more .arr{transform:translateX(5px);}

/* 섹션 번호/메타 (에디토리얼) */
.sec-head{display:flex; align-items:baseline; gap:16px; margin-bottom:8px;}
.sec-head .sec-no{font-family:var(--serif); color:var(--gold); font-size:15px; letter-spacing:.1em;}

/* 큰 인용/매니페스토 강화 */
.manifesto{font-size:clamp(26px,3.8vw,42px);}

@media (max-width:920px){
  .hero-full{min-height:88vh;}
  .hero-full .wrap{padding-top:24vh;}
  .act-row{grid-template-columns:1fr; gap:24px; padding:40px 0;}
  .act-row:nth-child(even) .act-media{order:0;}
  .hero-scroll{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;}
  .hero-scroll::after{animation:none;}
  .act-row:hover .act-media .act-img{transform:none;}
}

/* ===== v3 — 전 페이지 에디토리얼 통일 ===== */

/* 서브페이지 인트로 강화 */
.page-intro{padding:108px 0 8px; position:relative;}
.page-intro .h-display{font-size:clamp(40px,6.2vw,86px); line-height:1.0; letter-spacing:-.03em;}
.page-intro .breadcrumb{margin-bottom:22px;}
.page-intro .lead{margin-top:24px;}
.page-intro + .section, .page-intro + hr{margin-top:8px;}
.intro-rule{border:none; border-top:1px solid var(--line); margin:54px 0 0;}

/* 아이템 상세 — 풀블리드 히어로 */
.item-hero-full{position:relative; min-height:60vh; max-height:780px; display:flex; align-items:flex-end; overflow:hidden; color:#F4EFE2;}
.item-hero-full .hero-bg{position:absolute; left:0; right:0; top:-8%; width:100%; height:116%; z-index:0; object-fit:cover; object-position:center; will-change:transform;}
.item-hero-full::after{content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(178deg, rgba(15,28,21,.30) 0%, rgba(15,28,21,.34) 40%, rgba(12,24,18,.82) 100%);}
.item-hero-full .wrap{position:relative; z-index:2; padding-top:18vh; padding-bottom:7vh;}
.item-hero-full .breadcrumb, .item-hero-full .breadcrumb a{color:#CFC6B0;}
.item-hero-full .breadcrumb a:hover{color:#fff;}
.item-hero-full .tag{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.16em; padding:7px 15px; border-radius:999px; background:rgba(244,239,226,.92); margin:14px 0 0;}
.item-hero-full h1{font-family:var(--serif); font-weight:600; font-size:clamp(38px,6.4vw,80px); line-height:1.02; letter-spacing:-.025em; margin:16px 0 16px; color:#FBF7EC;}
.item-hero-full .lead{max-width:560px; color:#E8E1CF; font-size:clamp(16px,1.9vw,20px);}
.item-hero-full .actions{margin-top:28px;}

@media (max-width:920px){
  .item-hero-full{min-height:480px; max-height:none;}
  .item-hero-full .wrap{padding-top:140px; padding-bottom:48px;}
  .page-intro{padding:88px 0 4px;}
}

/* ===================================================================
   v4 — 컨셉 PDF 반영 (홈 랜딩)
   =================================================================== */

/* 분할 히어로 (좌 베이지 텍스트 · 우 사진) */
.chero{background:var(--bg-2);}
.chero .wrap{display:grid; grid-template-columns:1fr 1.08fr; gap:48px; align-items:center;}
.chero-text{padding:64px 0;}
.chero-text .eyebrow{margin-bottom:16px;}
.chero-text h1{font-family:var(--serif); font-weight:600; font-size:clamp(32px,4.4vw,56px); line-height:1.22; letter-spacing:-.02em; margin:0;}
.chero-text .sub{margin-top:18px; color:var(--accent); font-weight:700; font-size:clamp(14px,1.5vw,17px); letter-spacing:.01em;}
.chero-text .actions{margin-top:30px; display:flex; gap:10px; flex-wrap:wrap;}
.chero-img{align-self:stretch; min-height:clamp(340px,40vw,500px); border-radius:var(--r-lg); background-size:cover; background-position:center; margin:28px 0;}

/* 우리의 이야기 — 원형 사진 3 */
.story-circles{display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:8px;}
.story-circ{text-align:center;}
.story-circ .circ{width:clamp(150px,17vw,206px); height:clamp(150px,17vw,206px); border-radius:50%; margin:0 auto 22px; background-size:cover; background-position:center; box-shadow:0 12px 32px rgba(80,60,40,.14);}
.story-circ p{color:var(--ink-soft); font-size:15px; max-width:262px; margin:0 auto; line-height:1.65;}

/* 삼중 임팩트 */
.impact3{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.impact3 .it{
  display:flex; flex-direction:column; align-items:center;
  padding:24px 28px; border-left:1px solid var(--line); min-width:0;
  text-align:center;
}
.impact3 .it:first-child{border-left:none;}
.impact3 .it .meta{display:flex; flex-direction:column; align-items:center;}
.impact3 .it .meta .num{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(34px, 3.6vw, 52px); color:var(--accent);
  line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap;
  letter-spacing:-.01em;
}
.impact3 .it .meta .lbl{font-size:15px; color:var(--ink-soft); margin-top:12px; line-height:1.4;}
.impact3 .it .ph{
  width:100%; max-width:280px; aspect-ratio:5/3;
  height:auto;
  border-radius:14px; object-fit:cover; object-position:center;
  margin-top:22px;
}

/* 함께 만드는 선순환 — 아이콘 4단계 */
.cycle{display:flex; align-items:flex-start; justify-content:center; gap:10px; flex-wrap:wrap;}
/* .step 전역 규칙(아이템 상세: display:grid; padding:64px 0)과 충돌 → 리셋 */
.cycle .step{display:block; padding:0; text-align:center; width:124px;}
.cycle .step .ic{height:56px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; color:var(--accent);}
.cycle .step .ic svg{width:46px; height:46px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.cycle .step .lbl{font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4;}
/* 화살표를 아이콘과 같은 56px 박스에서 세로 중앙정렬 → 아이콘 중심과 일치 */
.cycle .arrow{height:56px; display:flex; align-items:center; color:var(--accent); opacity:.5; flex:none;}
.cycle .arrow svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
@media (max-width:600px){
  .cycle{gap:30px 20px; max-width:330px; margin:0 auto;}
  .cycle .arrow{display:none;}          /* 모바일: 화살표 숨기고 2×2 정렬 */
  .cycle .step{width:calc(50% - 10px);}
}

/* 후기 (전면 사진 + 인용 카드) */
.testimonial{position:relative; min-height:clamp(380px,44vw,520px); display:flex; align-items:center; overflow:hidden;}
.testimonial .bg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;}
.testimonial .bg::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(18,34,26,.30), rgba(18,34,26,.05) 60%);}
.testimonial .wrap{position:relative; z-index:2; display:flex; justify-content:flex-end;}
.testimonial .quote{background:rgba(250,246,236,.95); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 36px; max-width:430px; box-shadow:0 16px 44px rgba(0,0,0,.14);}
.testimonial .quote p{font-family:var(--serif); font-size:clamp(17px,1.9vw,21px); line-height:1.6; color:var(--ink); margin:0;}
.testimonial .quote .who{margin-top:20px; font-size:13px; color:var(--muted);}
.testimonial .quote .who b{display:block; color:var(--ink); font-size:15px; margin-bottom:2px;}

@media (max-width:920px){
  .chero .wrap{grid-template-columns:1fr; gap:0;}
  .chero-text{padding:48px 0 8px;}
  .chero-img{order:2; margin:8px 0 40px; min-height:300px;}
  .story-circles{grid-template-columns:1fr; gap:30px;}
  .impact3{grid-template-columns:1fr;}
  .impact3 .it{border-left:none; border-top:1px solid var(--line); padding:18px 0;}
  .impact3 .it:first-child{border-top:none;}
  .testimonial .wrap{justify-content:center;}
}

/* 4열 그리드(파트너/프로세스) — 모바일에서 2열로 (인라인 grid 대체) */
.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:920px){ .cols-4{grid-template-columns:repeat(2,1fr);} }

/* ====================================================================
   v7 — 클라이언트 피드백 반영: 밝은 톤 (히어로 분할 · 후기 · CTA)
   "사진과 글이 안 잡혀서 밝은 느낌이 안 난다" 대응
   ==================================================================== */

/* ===== 비대칭 에디토리얼 히어로 (좌 큰 텍스트 / 우 사진이 viewport 우측 끝까지 bleed) ===== */
.chero.chero-bleed{
  background:var(--bg);
  padding:clamp(48px, 6vh, 80px) 0 clamp(64px, 8vh, 112px);
  overflow:hidden;
}
.chero.chero-bleed .chero-bleed-grid{
  display:grid; grid-template-columns:1fr min(720px, 50vw);
  gap:clamp(36px, 5vw, 80px);
  align-items:center;
  padding-left:clamp(24px, 6vw, 96px);
  padding-right:0;
  margin:0;
  /* v16-fix: 와이드(1600px+) 모니터에서 좌측 무한 확장 방지.
     1600 이하에선 풀블리드 유지, 이상에선 가운데 정렬 + 우측 살짝 inset */
  max-width:1600px;
  margin-left:auto; margin-right:auto;
}
@media (min-width:1600px){
  .chero.chero-bleed{padding-right:clamp(24px, 4vw, 64px);}
}
.chero.chero-bleed .chero-text{
  padding:0; max-width:640px; justify-self:end;
}
.chero.chero-bleed .chero-h{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(36px, 4.6vw, 68px); line-height:1.12; letter-spacing:-.025em;
  color:var(--ink); margin:24px 0 0;
  text-wrap:balance;
}
.chero.chero-bleed .chero-sub{
  font-size:clamp(16px, 1.6vw, 19px); line-height:1.7;
  color:var(--ink-soft); margin:28px 0 0; max-width:480px;
}
.chero.chero-bleed .chero-fig{
  width:100%; height:auto; aspect-ratio:4/3;
  border-radius:20px 0 0 20px;
  object-fit:cover; object-position:center;
  box-shadow:0 22px 56px rgba(80,60,40,.14), 0 4px 12px rgba(80,60,40,.05);
}
@media (max-width:920px){
  .chero.chero-bleed .chero-bleed-grid{
    grid-template-columns:1fr; gap:32px;
    padding-left:24px; padding-right:24px;
  }
  .chero.chero-bleed .chero-text{ justify-self:start; }
  .chero.chero-bleed .chero-fig{
    aspect-ratio:4/3;
    border-radius:20px; order:2;
  }
}
.chero.chero-center .bb-label{
  display:inline-block; margin-bottom:32px;
}
.chero.chero-center .bb-label::after{
  display:none; /* 가운데 정렬에선 좌측 underline 어색 */
}
.chero.chero-center .chero-h{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(40px, 6.4vw, 88px); line-height:1.12; letter-spacing:-.03em;
  color:var(--ink); margin:0;
  text-wrap:balance;
}
.chero.chero-center .chero-sub{
  font-size:clamp(16px, 1.7vw, 20px); line-height:1.7;
  color:var(--ink-soft); margin:28px auto 0; max-width:520px;
  text-wrap:pretty;
}

/* ===== 기존 분할 히어로 (legacy — 다른 페이지에 잔존하면 그대로 작동) ===== */
.chero.chero-light{
  background:var(--bg);
  padding:0;
}
.chero.chero-light .wrap{
  display:grid; grid-template-columns:6fr 5fr;
  gap:clamp(36px, 5vw, 80px); align-items:center;
  padding-top:clamp(56px, 9vh, 112px);
  padding-bottom:clamp(56px, 9vh, 112px);
}
.chero.chero-light .chero-text{padding:0;}
.chero.chero-light .chero-text .bb-label{margin-bottom:14px;}
.chero.chero-light .chero-h{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(36px, 5.6vw, 84px); line-height:1.06; letter-spacing:-.03em;
  color:var(--ink); margin:0;
}
.chero.chero-light .chero-sub{
  font-size:clamp(16px, 1.6vw, 19px); line-height:1.6;
  color:var(--ink-soft); margin:24px 0 0; max-width:480px;
}
.chero.chero-light .chero-img{
  aspect-ratio:4/5; min-height:auto; max-height:560px;
  border-radius:24px; overflow:hidden;
  background-size:cover; background-position:center;
  box-shadow:0 22px 56px rgba(80,60,40,.14), 0 4px 12px rgba(80,60,40,.05);
  margin:0;
  justify-self:end; width:100%;
}
@media (max-width:920px){
  .chero.chero-light .wrap{grid-template-columns:1fr; padding-top:48px; padding-bottom:48px;}
  .chero.chero-light .chero-img{aspect-ratio:4/3; order:2;}
}

/* ===== 밝은 후기 (베이지 + 좌측 quote + 우측 사진 카드) ===== */
.testimonial-bright{
  background:var(--bg-2);
  padding:clamp(72px, 11vh, 128px) 0;
}
.testimonial-bright .wrap{
  display:grid; grid-template-columns:6fr 5fr;
  gap:clamp(36px, 5vw, 72px); align-items:center;
}
.testimonial-bright .quote{position:relative;}
.testimonial-bright .qmark{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:clamp(80px, 11vw, 140px); line-height:.7;
  color:var(--accent); opacity:.22; margin-bottom:-12px;
}
.testimonial-bright .qtext{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(22px, 2.6vw, 36px); line-height:1.4;
  letter-spacing:-.02em; color:var(--ink);
  margin:0 0 28px;
}
.testimonial-bright .qwho{
  padding-top:18px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
}
.testimonial-bright .qwho b{
  font-family:var(--sans); font-weight:800; font-size:15px; color:var(--ink);
}
.testimonial-bright .qwho span{
  font-family:var(--sans); font-size:13px; color:var(--muted); letter-spacing:.02em;
}
.testimonial-bright .qimg{
  aspect-ratio:4/3; border-radius:20px; overflow:hidden;
  width:100%;
  object-fit:cover; object-position:center;
  box-shadow:0 16px 40px rgba(80,60,40,.14);
}
@media (max-width:920px){
  .testimonial-bright .wrap{grid-template-columns:1fr; gap:32px;}
  .testimonial-bright .qimg{aspect-ratio:4/3; width:100%;}
}

/* ===== 밝은 CTA (크림 베이지 + 다크 텍스트 + 그린 primary 버튼) ===== */
.section.cta-bright{
  background:var(--bg-2);
  position:relative; overflow:hidden;
}
.section.cta-bright::before, .section.cta-bright::after{
  content:''; position:absolute; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(30,64,41,.08), transparent 60%);
  pointer-events:none;
}
.section.cta-bright::before{ width:520px; height:520px; left:-180px; top:-200px; }
.section.cta-bright::after { width:380px; height:380px; right:-140px; bottom:-160px;
  background:radial-gradient(circle at 70% 70%, rgba(140,90,60,.07), transparent 60%); }
.section.cta-bright .wrap{ position:relative; z-index:1; }
.section.cta-bright .h-sec{ color:var(--ink); }
.section.cta-bright .lead { color:var(--ink-soft); }

/* ====================================================================
   v9 — 밝고 활기찬 톤 + 스크롤 애니메이션 보강
   ==================================================================== */

/* 히어로 사진 카드 등장 (legacy .chero-light용 — 새 .chero-center에는 적용 안 됨) */
@keyframes peersHeroZoom{
  from{ opacity:0; transform:scale(1.06) translateY(20px); }
  to  { opacity:1; transform:scale(1) translateY(0); }
}
.js .chero.chero-light .chero-img{
  animation:peersHeroZoom 1.1s cubic-bezier(.22,.61,.36,1) .15s both;
  will-change:transform;
}
.js .chero.chero-light .chero-text > *{
  opacity:0; animation:peersUp .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.js .chero.chero-light .chero-text .bb-label{ animation-delay:.05s; }
.js .chero.chero-light .chero-text .chero-h{ animation-delay:.2s; }
.js .chero.chero-light .chero-text .chero-sub{ animation-delay:.38s; }

/* 가운데 히어로 stagger fade-up */
.js .chero.chero-center .wrap > *{
  opacity:0; animation:peersUp .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.js .chero.chero-center .bb-label { animation-delay:.05s; }
.js .chero.chero-center .chero-h  { animation-delay:.2s; }
.js .chero.chero-center .chero-sub{ animation-delay:.42s; }

/* 비대칭 bleed 히어로 — 텍스트 stagger + 사진 zoom-in */
.js .chero.chero-bleed .chero-fig{
  animation:peersHeroZoom 1.2s cubic-bezier(.22,.61,.36,1) .15s both;
  will-change:transform;
}
.js .chero.chero-bleed .chero-text > *{
  opacity:0; animation:peersUp .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.js .chero.chero-bleed .bb-label { animation-delay:.05s; }
.js .chero.chero-bleed .chero-h  { animation-delay:.2s; }
.js .chero.chero-bleed .chero-sub{ animation-delay:.42s; }

/* 이미지 카드 hover scale (살짝 + soft shadow lift) */
.story-circ .circ,
.impact3 .it .ph,
.chero.chero-light .chero-img,
.bb-fig,
.qimg{
  transition:transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.story-circ:hover .circ,
.impact3 .it:hover .ph,
.bb-split:hover .bb-fig{
  transform:scale(1.04);
}
.story-circ:hover .circ{
  box-shadow:0 18px 42px rgba(80,60,40,.18);
}

/* 라벨 underline draw 효과 (페이지 진입/scroll 진입 시 좌→우) */
.bb-label{ position:relative; }
.bb-label::after{
  content:''; position:absolute; left:0; bottom:-6px;
  width:24px; height:2px; background:var(--accent); border-radius:2px;
  transform-origin:left center; transform:scaleX(0);
  transition:transform .65s cubic-bezier(.22,.61,.36,1) .15s;
}
.reveal.in .bb-label::after,
.js .chero.chero-light .bb-label::after,
.bb-intro .bb-label::after,
.bb-split:hover .bb-label::after{ transform:scaleX(1); }

/* cycle 4단계 sequential pop-in */
.js .cycle > *{
  opacity:0; transform:translateY(14px) scale(.92);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--cd,0ms);
}
.js .cycle.cycle-in > *{
  opacity:1; transform:translateY(0) scale(1);
}
.cycle .step .ic{ transition:transform .35s ease; }
.cycle .step:hover .ic{ transform:rotate(-6deg) scale(1.1); }

/* 임팩트 카드 — 사진 zoom + 숫자 강조 */
.impact3 .it{ overflow:hidden; position:relative; }
.impact3 .it .ph{ transform:none; transition:transform 1.2s cubic-bezier(.22,.61,.36,1); }
.impact3 .it.it-in .ph{ transform:none; }
.impact3 .it .num{ transition:color .3s ease, transform .3s ease; }
.impact3 .it:hover .num{ color:var(--accent-deep); transform:translateY(-2px); }

/* 우리의 이야기 원형: 다채로운 sub-accent ring (밝은 톤) */
.story-circ .circ{ position:relative; }
.story-circ .circ::before{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid transparent;
  transition:border-color .4s ease, inset .4s ease;
  pointer-events:none;
}
.story-circ:nth-child(1):hover .circ::before{ border-color:#C98A22; inset:-12px; }
.story-circ:nth-child(2):hover .circ::before{ border-color:#5C9A56; inset:-12px; }
.story-circ:nth-child(3):hover .circ::before{ border-color:#8C5A3C; inset:-12px; }

/* CTA 버튼 micro: hover lift */
.btn-primary{ transition:transform .2s ease, background .25s ease, box-shadow .25s ease; }
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(30,64,41,.25);
}
.btn-text .arr,
.btn-text::after{ transition:transform .25s ease; }
a:has(> .more):hover .more,
.item-card:hover .more{ transform:translateX(4px); }

/* 후기 큰따옴표 살짝 떠다님 (subtle) */
@keyframes peersFloat{
  0%,100%{ transform:translateY(0); }
  50%   { transform:translateY(-6px); }
}
.testimonial-bright .qmark{ animation:peersFloat 4s ease-in-out infinite; }

/* 섹션 배경에 미세한 grain/dot 패턴 (밝은 활기) */
.section.alt{
  background:var(--bg-2);
  background-image:radial-gradient(circle at 1px 1px, rgba(30,64,41,.045) 1px, transparent 0);
  background-size:32px 32px;
}

/* reduced-motion 대응 */
@media (prefers-reduced-motion:reduce){
  .js .chero.chero-light .chero-img,
  .js .chero.chero-light .chero-text > *,
  .js .cycle > *,
  .impact3 .it .ph,
  .testimonial-bright .qmark{
    animation:none !important; transition:none !important; opacity:1 !important; transform:none !important;
  }
  .bb-label::after{ transform:scaleX(1) !important; transition:none !important; }
}

/* ====================================================================
   v8 — 브라보비버 톤 차용: 화이트 베이스 + 라벨 + 스플릿 row
   브라보비버처럼 미니멀 + 큰 여백, 우측 사진 카드는 PEERS 자산 유지
   ==================================================================== */

/* 섹션 라벨 (영문 — 핵심 6개만: BRAND/STORY/MISSION/HOW/IMPACT/PARTNERS) */
.bb-label{
  display:inline-block;
  font-family:var(--sans); font-weight:700;
  font-size:13px; letter-spacing:.16em;
  color:var(--accent); text-transform:uppercase;
  margin-bottom:18px;
}
/* 섹션 라벨 (한글 — 보조: 시각 강도 약하게, 영문 라벨과 톤 구분) */
.bb-label-ko{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-weight:600;
  font-size:13px; letter-spacing:.02em;
  color:var(--muted);
  margin-bottom:18px;
}
.bb-label-ko::before{
  content:''; display:inline-block;
  width:18px; height:1px; background:var(--muted);
}

/* 스플릿 row: 좌(라벨+제목+본문) + 우(사진/일러스트 카드) */
.bb-split{
  display:grid; grid-template-columns:5fr 6fr;
  gap:clamp(40px, 6vw, 96px);
  align-items:center;
  padding:clamp(72px, 11vh, 128px) 0;
}
.bb-split.reverse{grid-template-columns:6fr 5fr;}
.bb-split.reverse .bb-text{order:2;}
.bb-split.reverse .bb-fig{order:1;}
.bb-split .bb-text{padding:0;}
.bb-split .bb-h{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(28px, 3.8vw, 52px); line-height:1.18; letter-spacing:-.025em;
  color:var(--ink); margin:0 0 22px;
}
.bb-split .bb-h em{font-style:normal; color:var(--accent);}
.bb-split .bb-body{
  font-size:clamp(15px, 1.4vw, 17px); line-height:1.75;
  color:var(--ink-soft); margin:0; max-width:520px;
}
.bb-split .bb-fig{
  aspect-ratio:4/3; border-radius:20px; overflow:hidden;
  width:100%; height:auto;
  object-fit:cover; object-position:center;
  box-shadow:0 18px 44px rgba(80,60,40,.14), 0 4px 12px rgba(80,60,40,.05);
}
.bb-split .bb-fig.wide{aspect-ratio:4/3;}
@media (max-width:920px){
  .bb-split,
  .bb-split.reverse{grid-template-columns:1fr; gap:32px; padding:56px 0;}
  .bb-split.reverse .bb-text{order:1;}
  .bb-split.reverse .bb-fig{order:2;}
  .bb-split .bb-fig{aspect-ratio:4/3; width:100%;}
}

/* 섹션 구분선 (브라보비버처럼 얇은 ruled-line 또는 큰 여백) */
.bb-section{padding:0;}
.bb-section + .bb-section{border-top:1px solid var(--line);}

/* 페이지 인트로 (브라보비버 brand 페이지 상단 톤) */
.bb-intro{
  padding:clamp(72px, 11vh, 144px) 0 clamp(48px, 7vh, 88px);
  text-align:left;
}
.bb-intro .breadcrumb{color:var(--muted); font-size:13px; margin-bottom:14px;}
.bb-intro .bb-h1{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(36px, 5.4vw, 76px); line-height:1.1; letter-spacing:-.03em;
  color:var(--ink); margin:0;
}
.bb-intro .bb-h1 em{font-style:normal; color:var(--accent);}
.bb-intro .bb-lead{
  font-size:clamp(16px, 1.5vw, 19px); line-height:1.7;
  color:var(--ink-soft); max-width:600px; margin:22px 0 0;
}

/* 통계/숫자 카드 (브라보비버 PROBLEM 도넛 차트 대체) */
.bb-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:18px; margin-top:32px;}
.bb-stat{
  background:var(--bg-2); border-radius:18px;
  padding:24px 22px; text-align:left;
}
.bb-stat .bb-num{
  font-family:var(--sans); font-weight:800; font-size:36px;
  color:var(--accent); line-height:1; letter-spacing:-.02em;
}
.bb-stat .bb-lbl{
  font-size:13px; color:var(--ink-soft); margin-top:8px; line-height:1.4;
}

/* ===================================================================
   v6 — 시네마틱 풀블리드 히어로 (brianimpact·neovalue 톤 정합)
   =================================================================== */
.chero-cinema{
  position:relative;
  min-height:88vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:#fff;
  background:#0F1914;
}
.chero-cinema-bg{
  position:absolute; left:0; right:0; top:-10%; height:120%; z-index:0;
  background-size:cover; background-position:center;
  will-change:transform;
  transform:translateY(0);
}
.chero-cinema-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(15,25,20,.45) 0%, rgba(15,25,20,.0) 28%, rgba(15,25,20,.0) 55%, rgba(15,25,20,.78) 100%),
    linear-gradient(90deg,  rgba(15,25,20,.55) 0%, rgba(15,25,20,.0) 55%);
}
.chero-cinema-content{
  position:relative; z-index:2;
  padding-top:24vh; padding-bottom:14vh;
}
.cinema-display{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(48px, 8.4vw, 128px); line-height:.98; letter-spacing:-.04em;
  color:#FBF7EC; margin:0;
  max-width:1100px;
  text-shadow:0 2px 40px rgba(0,0,0,.22);
}
.cinema-sub{
  max-width:620px; margin-top:32px;
  font-size:clamp(17px, 1.9vw, 22px); line-height:1.55;
  color:#E8E1CF;
}

/* 히어로 진입 모션 (자식 stagger fade-up) — 제목 + 부제만 */
.chero-cinema .cinema-display,
.chero-cinema .cinema-sub{
  opacity:0; transform:translateY(16px);
  animation:cinemaUp .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.chero-cinema .cinema-display{ animation-delay:.18s; }
.chero-cinema .cinema-sub    { animation-delay:.36s; }
@keyframes cinemaUp{
  to { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .chero-cinema .cinema-display,
  .chero-cinema .cinema-sub{ opacity:1 !important; transform:none !important; animation:none !important; }
  .chero-cinema-bg{ transform:none !important; }
}

/* 모바일 */
@media (max-width:920px){
  .chero-cinema{ min-height:72vh; }
  .chero-cinema-content{ padding-top:18vh; padding-bottom:14vh; }
}

/* (v6 매거진/stepper/quote-block — PDF 컨셉 정합 위해 제거됨)
   원형 스토리·손그림 cycle·사진배경 testimonial은 v4 블록의 룰로 작동 */

/* 삼중 임팩트 hover만 유지 (PDF 변경 없는 영역) */
.impact3 .it{
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.impact3 .it:hover{ transform:translateY(-3px); }
.impact3 .it .ph{
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
  transform-origin:center center;
}
.impact3 .it:hover .ph{ transform:scale(1.06); }

/* ===================================================================
   v5 — 에너지 모드 (neovalue / brianimpact 정합)
   원칙: 사진은 크게 · 헤드는 굵고 크게 · 컬러는 절제, 베이지는 호흡으로만
   =================================================================== */

/* 베이스 톤: 화이트로 — 사진/컬러가 살아나는 캔버스 */
:root{
  --bg:#FAF8F4;        /* warm off-white (paper) */
  --bg-2:#EDE3CE;      /* 베이지 — alt 섹션 한정 호흡 */
}

/* 헤딩 기본을 굵은 산세리프로. .serif 클래스는 명시적으로 세리프 유지 */
h1, h2, h3, h4{
  font-family:var(--sans); font-weight:800; letter-spacing:-.025em;
}
.serif{font-family:var(--serif); font-weight:600; letter-spacing:-.01em;}

/* 디스플레이 타입 키우기 (네오벨류 톤) */
.h-display{font-size:clamp(48px, 8.4vw, 120px); line-height:.95; letter-spacing:-.035em;}
.h-sec    {font-size:clamp(32px, 4.6vw, 60px); line-height:1.04; letter-spacing:-.028em;}

/* ===== 분할 히어로 (chero) — 5:7 비대칭 + 사진 풀-블리드(우측) ===== */
.chero{background:var(--bg); padding:0;}
.chero .wrap{
  display:grid; grid-template-columns:5fr 7fr; gap:0;
  max-width:100%; padding:0 0 0 clamp(28px, 6vw, 96px); align-items:stretch;
}
.chero-text{
  padding:clamp(64px, 10vh, 120px) clamp(28px, 4vw, 64px) clamp(56px, 9vh, 104px) 0;
  position:relative;
}
.chero-text::before{
  content:''; position:absolute; left:-1px; top:clamp(72px, 11vh, 132px);
  width:3px; height:64px; background:var(--accent);
}
.chero-text .eyebrow{
  display:block; font-family:var(--sans); font-weight:700;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px;
}
.chero-text h1{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(44px, 7.2vw, 104px); line-height:.98; letter-spacing:-.035em;
}
.chero-text .sub{font-size:clamp(15px, 1.6vw, 19px); margin-top:24px;}
.chero-img{
  align-self:stretch; border-radius:0; margin:0;
  min-height:clamp(420px, 72vh, 760px);
  position:relative; overflow:hidden;
}
/* 사진 위 미세한 톤 보정 (조절) — 카드 가독성용 최소 그라데이션 */
.chero-img::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,30,25,0) 65%, rgba(20,30,25,.25) 100%);
  pointer-events:none;
}
/* 사진 위 floating chip 카드 — 사진 위 디자인 처리의 핵심 */
.chero-img .chero-chip{
  position:absolute; z-index:3;
  left:clamp(20px, 2.4vw, 36px); bottom:clamp(20px, 2.4vw, 36px);
  background:#FAF8F4;
  padding:clamp(18px, 1.8vw, 26px) clamp(20px, 2.2vw, 30px);
  max-width:clamp(220px, 28%, 320px);
  box-shadow:0 18px 46px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08);
  border-left:4px solid var(--accent);
}
.chero-img .chip-label{
  display:block; font-family:var(--sans); font-weight:700;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px;
}
.chero-img .chip-title{
  display:block; font-family:var(--sans); font-weight:800;
  font-size:clamp(20px, 2.1vw, 26px); line-height:1.1;
  letter-spacing:-.025em; color:var(--ink);
}
.chero-img .chip-note{
  display:block; margin-top:10px;
  font-family:var(--sans); font-weight:500;
  font-size:13px; line-height:1.45; color:var(--ink-soft);
}
/* 사진 우상단 브랜드 닷 */
.chero-img .chero-mark{
  position:absolute; z-index:2;
  top:clamp(20px, 2.4vw, 32px); right:clamp(20px, 2.4vw, 32px);
  width:14px; height:14px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(45,90,61,.18);
}
/* 메인 히어로 액션 버튼 영역 */
.chero-text .chero-actions{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:36px;
}

/* (PDF 컨셉: 원형 스토리 — v4 블록의 원형 .circ 룰 그대로 사용) */

/* ===== 삼중 임팩트 — 숫자 거대화 + 사진 풀폭 + reveal 의존 제거 ===== */
/* 모든 컬럼 동일 padding으로 사진 폭 일치(이전 first-child 룰 제거) */
.impact3{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;}
.impact3 .it{
  display:block; padding:36px 32px;
  border-left:1px solid var(--line);
}
.impact3 .it:first-child{border-left:none; padding-left:32px;}
.impact3 .it .meta{display:block;}
.impact3 .it .meta .num{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(48px, 6vw, 88px); line-height:1; letter-spacing:-.04em;
  color:var(--accent); display:inline-flex; align-items:baseline;
  max-width:100%; overflow:hidden; text-overflow:clip; white-space:nowrap;
}
.impact3 .it{overflow:hidden;}
.impact3 .it .meta .lbl{font-size:17px; margin-top:18px; color:var(--ink); font-weight:600;}
.impact3 .it .ph{
  width:100%; max-width:none; height:auto; aspect-ratio:4/3;
  margin:28px 0 0; border-radius:20px; overflow:hidden;
  object-fit:cover; object-position:center;
}
/* reveal 안에 있어도 fold-above 빈 박스 없도록 강제 표시 */
.js .impact3 > *{opacity:1 !important; transform:none !important;}

/* ===== 함께 만드는 선순환 — 아이콘 크기 업, 라벨도 키움 ===== */
.cycle{gap:18px;}
.cycle .step{width:148px;}
.cycle .step .ic{height:72px;}
.cycle .step .ic svg{width:62px; height:62px;}
.cycle .step .lbl{font-size:16px; font-weight:700;}
.cycle .arrow{height:72px;}
.cycle .arrow svg{width:30px; height:30px;}

/* ===== 후기 카드 — 라운드 줄이고 더 넓고 임팩트 있게 ===== */
.testimonial{min-height:clamp(440px, 56vw, 620px);}
.testimonial .quote{
  border-radius:4px; padding:44px 44px; max-width:520px;
  box-shadow:0 24px 64px rgba(0,0,0,.18);
}
.testimonial .quote p{font-size:clamp(20px, 2.2vw, 26px); line-height:1.5;}

/* ===== CTA(ink 섹션) 디스플레이 ===== */
.section.ink .h-sec{font-size:clamp(34px, 5vw, 72px); line-height:1.02;}

/* ===== 섹션 리듬: 헤더 큰 호흡, 컨텐츠 섹션은 보통 ===== */
.section{padding:clamp(72px, 11vh, 128px) 0;}

/* ===== 반응형 보완 ===== */
@media (max-width:920px){
  .chero .wrap{grid-template-columns:1fr; padding:0;}
  .chero-text{padding:48px 24px 16px;}
  .chero-img{order:2; min-height:54vh;}
  .story-circles{grid-template-columns:1fr; gap:32px;}
  .story-circ .circ{aspect-ratio:16/10;}
  .impact3{grid-template-columns:1fr; gap:0;}
  .impact3 .it{border-left:none; border-top:1px solid var(--line); padding:32px 0;}
  .impact3 .it:first-child{border-top:none; padding-left:0;}
  .impact3 .it .ph{aspect-ratio:4/3;}
}

/* =====================================================================
   v5 — 4대 활동 영역 + 브랜드 선언 (회복의 힘)
   ===================================================================== */

/* ---- 4대 활동 영역 (가로형 카드 — docx 목업 그대로) ---- */
.activities-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px;}
.act-card{
  display:grid; grid-template-columns:1fr 1.15fr;
  text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.act-card:hover{transform:translateY(-3px);}
.act-card .act-body{
  order:1;
  padding:30px 28px 28px;
  display:flex; flex-direction:column; gap:10px;
}
.act-card .act-img{
  order:2;
  min-width:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.act-card:hover .act-img{transform:scale(1.03);}
.act-card .act-title{
  font-family:var(--serif); font-weight:600; font-size:22px; color:var(--ink);
  letter-spacing:-.01em; margin:0;
}
.act-card .act-desc{
  color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin:0;
  flex:1;
}
.act-card .act-more{
  margin-top:auto; padding-top:14px;
  font-size:13.5px; font-weight:700; color:var(--accent);
  display:inline-flex; align-items:center; gap:6px;
  letter-spacing:.02em;
}
.act-card .act-more .arr{transition:transform .2s;}
.act-card:hover .act-more .arr{transform:translateX(4px);}

/* ---- 브랜드 선언 (Manifesto) ---- */
.manifesto-block{background:var(--bg-2);}
.manifesto-block .wrap{
  display:grid; grid-template-columns:1.15fr 1fr; gap:64px; align-items:center;
}
.manifesto-block .mfst-text .bb-label{margin-bottom:16px;}
.manifesto-block .mfst-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(28px,3.8vw,46px); line-height:1.22; letter-spacing:-.02em;
  margin:0 0 26px; color:var(--ink);
}
.manifesto-block .mfst-keywords{
  display:flex; gap:10px; flex-wrap:wrap;
  margin:0 0 24px;
  list-style:none; padding:0;
}
.manifesto-block .mfst-keywords li{
  font-family:var(--serif); font-size:clamp(18px,2.2vw,24px); font-weight:600;
  color:var(--accent);
  padding:6px 18px;
  border:1px solid var(--accent);
  border-radius:999px;
  background:color-mix(in srgb, var(--accent) 6%, transparent);
}
.manifesto-block .mfst-body{
  color:var(--ink-soft); font-size:17px; line-height:1.7; max-width:520px; margin:0;
}
.manifesto-block .mfst-img{
  aspect-ratio:4/3;
  border-radius:var(--r-lg);
  width:100%;
  object-fit:cover; object-position:center;
  box-shadow:0 18px 48px rgba(40,30,20,.16);
}

/* ---- 반응형 ---- */
/* 반응형 사진 통일 정책: 모든 메인 사진은 5/4 landscape, 카드 사진은 4/3.
   manifesto·testimonial의 portrait(4/5)도 반응형에서는 landscape로 전환 → 스크롤 시 사이즈 일관성 확보 */
@media (max-width:920px){
  .activities-grid{gap:18px;}
  .manifesto-block .wrap{grid-template-columns:1fr; gap:36px;}
  .manifesto-block .mfst-img{aspect-ratio:4/3; order:-1; width:100%;}
  /* 768 태블릿에서도 카드 내부를 이미지-위/텍스트-아래로 스택해서 이미지가 카드 전폭을 쓰도록 */
  .act-card{grid-template-columns:1fr; min-height:0;}
  .act-card .act-img{order:0; aspect-ratio:4/3; height:auto;}
  .act-card .act-body{order:1; padding:24px 22px 26px;}
}
@media (max-width:640px){
  .activities-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .act-card .act-body{padding:22px 20px 24px;}
  .manifesto-block .mfst-keywords li{font-size:17px; padding:5px 14px;}
}

/* =====================================================================
   story.php — 일러스트 브릿지 + 풀블리드 사진 브릿지
   ===================================================================== */

.story-illust{padding:clamp(48px, 6vh, 80px) 0;}
.story-illust .illust-band{
  max-width:760px; margin:0 auto; text-align:center;
}
.story-illust .illust-img{
  width:100%; max-width:680px; height:auto;
  display:block; margin:0 auto 28px;
  object-fit:contain;
  filter:none;
}
.story-illust .illust-cap{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(18px, 1.8vw, 22px); line-height:1.55;
  color:var(--ink-soft); margin:0;
  letter-spacing:.005em;
}

.story-photobreak{
  position:relative; width:100%;
  aspect-ratio:32/9; min-height:320px;
  background-size:cover; background-position:center;
  background-attachment:scroll;
  display:flex; align-items:center; justify-content:center;
  margin:0;
}
.story-photobreak::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,28,24,.32), rgba(20,28,24,.55));
}
.story-photobreak-overlay{
  position:relative; z-index:1;
  max-width:760px; padding:0 28px; text-align:center;
}
.story-photobreak-quote{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(22px, 2.6vw, 36px); line-height:1.42; letter-spacing:-.01em;
  color:#fff; margin:0;
  text-wrap:balance;
  text-shadow:0 2px 16px rgba(0,0,0,.22);
}

@media (max-width:760px){
  .story-illust{padding:36px 0;}
  .story-illust .illust-img{max-width:88%;}
  .story-photobreak{aspect-ratio:16/10; min-height:280px;}
}

/* 브랜드 페이지 — 동료의 자리 (3-photo mosaic, docx image2/4/6) */
.bb-mosaic-wrap{padding:clamp(72px, 10vh, 128px) 0;}
.bb-mosaic-head{max-width:780px; margin:0 0 44px;}
.bb-mosaic-head .bb-label-ko{display:block; margin-bottom:14px;}
.bb-mosaic-head .bb-h{margin:0 0 18px;}
.bb-mosaic{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
}
.bb-mosaic-cell{
  position:relative; margin:0;
  border-radius:20px; overflow:hidden;
  background:var(--bg-2);
  aspect-ratio:4/3;
  box-shadow:0 1px 2px rgba(20,28,24,.04);
}
.bb-mosaic-cell .bb-mosaic-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.bb-mosaic-cell::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,28,24,0) 45%, rgba(20,28,24,.65) 100%);
}
.bb-mosaic-cell:hover .bb-mosaic-img{transform:scale(1.04);}
.bb-mosaic-cell figcaption{
  position:absolute; left:24px; right:24px; bottom:22px; z-index:1;
  display:flex; flex-direction:column; gap:4px;
  color:#fff;
}
.bb-mosaic-cell figcaption b{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(17px, 1.5vw, 20px); letter-spacing:-.01em;
}
.bb-mosaic-cell figcaption span{
  font-size:13.5px; color:rgba(255,255,255,.86); font-weight:500;
}
@media (max-width:860px){
  .bb-mosaic{grid-template-columns:1fr; gap:16px;}
  .bb-mosaic-cell{aspect-ratio:4/3; width:100%;}
}

/* =====================================================================
   v16 — 새 카피 정합: 부제(act-eyebrow) · B2B 메시지 · 3 테마 카드
   ===================================================================== */

/* 4 제품 카드 부제 (act-card 안 act-title 위) */
.act-card .act-eyebrow{
  font-family:var(--sans); font-weight:700;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
  display:block;
}
@media (max-width:560px){
  .act-card .act-eyebrow{font-size:11.5px; letter-spacing:.12em;}
}

/* B2B 메시지 — 2문단 본문 + 강한 CTA, 크림 베이지 배경 + 라디얼 글로우 */
.section.b2b-block{
  background:var(--bg-2);
  position:relative; overflow:hidden;
  padding:clamp(80px, 12vh, 144px) 0;
}
.section.b2b-block::before, .section.b2b-block::after{
  content:''; position:absolute; border-radius:50%;
  pointer-events:none;
}
.section.b2b-block::before{
  width:560px; height:560px; left:-200px; top:-220px;
  background:radial-gradient(circle at 30% 30%, rgba(45,90,61,.10), transparent 60%);
}
.section.b2b-block::after{
  width:420px; height:420px; right:-160px; bottom:-180px;
  background:radial-gradient(circle at 70% 70%, rgba(140,90,60,.08), transparent 60%);
}
.section.b2b-block .wrap{position:relative; z-index:1;}
.section.b2b-block .b2b-inner{
  max-width:780px; margin:0 auto; text-align:center;
}
.section.b2b-block .b2b-inner .bb-label{display:inline-block;}
.section.b2b-block .b2b-inner .bb-label::after{
  left:50%; transform:translateX(-50%) scaleX(0);
  transform-origin:center;
}
.section.b2b-block .reveal.in .bb-label::after,
.section.b2b-block .b2b-inner .bb-label::after{
  transform:translateX(-50%) scaleX(1);
}
.section.b2b-block .b2b-title{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(28px, 4vw, 48px); line-height:1.18; letter-spacing:-.025em;
  color:var(--ink); margin:6px 0 32px;
  text-wrap:balance;
}
.section.b2b-block .b2b-body{
  font-size:clamp(16px, 1.5vw, 18px); line-height:1.8;
  color:var(--ink-soft); margin:0 auto 20px; max-width:680px;
  text-wrap:pretty;
}
.section.b2b-block .b2b-body:last-of-type{margin-bottom:36px;}
.section.b2b-block .b2b-actions{
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
  margin-top:8px;
}
@media (max-width:640px){
  .section.b2b-block{padding:64px 0;}
  .section.b2b-block .b2b-title{margin-bottom:24px;}
  .section.b2b-block .b2b-actions{flex-direction:column; align-items:center;}
  .section.b2b-block .b2b-actions .btn{width:100%; max-width:320px; justify-content:center;}
}

/* 활동소개 — 3 테마 카드 (Human · Earth · Society) */
.theme-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2.4vw, 32px);
}
.theme-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.theme-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(80,60,40,.12);
}
.theme-card .theme-img{
  aspect-ratio:4/3;
  background-size:cover; background-position:center;
  background-color:var(--bg-2);
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.theme-card:hover .theme-img{transform:scale(1.03);}
.theme-card .theme-body{
  padding:26px 26px 28px;
  display:flex; flex-direction:column; gap:12px;
  flex:1;
}
.theme-card .theme-label{
  font-family:var(--sans); font-weight:700;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.theme-card .theme-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(20px, 1.9vw, 24px); line-height:1.25; letter-spacing:-.01em;
  color:var(--ink); margin:0;
}
.theme-card .theme-head{
  font-family:var(--sans); font-weight:700;
  font-size:15.5px; line-height:1.5; color:var(--accent-deep);
  margin:0; text-wrap:balance;
}
.theme-card .theme-body-text{
  font-size:14.5px; line-height:1.7; color:var(--ink-soft); margin:0;
  flex:1; text-wrap:pretty;
}
.theme-card .theme-tags{
  margin-top:auto; padding-top:14px;
  border-top:1px solid var(--line);
  font-size:13px; color:var(--muted); font-weight:600;
  letter-spacing:.01em;
}
@media (max-width:920px){
  .theme-grid{grid-template-columns:1fr; gap:20px;}
  .theme-card .theme-body{padding:22px 22px 24px;}
}