/* theMoim 브랜드 사이트 공통 스타일 */
:root{
  --emerald:#12372A; --emerald-deep:#0E2B21; --emerald-mid:#2E7D5F;
  --gold:#E8C872; --gold-soft:#F0D68C;
  --ink:#1C2B25; --ink-sub:#4B6358; --line:#E3E1D8;
  --bg:#FBFBFA; --card:#FFFFFF; --cream:#F4F2EC;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Pretendard Variable",Pretendard,Inter,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Helvetica Neue",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* 서체 기준 (2026-10-31 확정, TYPE-STANDARD.md): 본문 Pretendard Variable·Inter, 제목 Noto Serif KR·Fraunces */
html[lang="en"] body{font-family:Inter,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif}
.hero h1,h2.sec,.doc h1,.doc h2,.pagehead h1,.gate-wrap h1,.five-core{font-family:"Noto Serif KR","Fraunces",serif;font-weight:700}
html[lang="en"] .hero h1,html[lang="en"] h2.sec,html[lang="en"] .doc h1,html[lang="en"] .doc h2,html[lang="en"] .pagehead h1,html[lang="en"] .gate-wrap h1,html[lang="en"] .five-core{font-family:"Fraunces","Noto Serif KR",serif}
a{color:var(--emerald-mid); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}

/* ---------- 상단 내비게이션 ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(251,251,250,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1080px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:9px; color:var(--emerald); font-weight:800; font-size:19px; letter-spacing:-.5px}
.brand:hover{text-decoration:none}
.brand .bsym{width:30px;height:30px;flex:none}
.brand .bdash{color:var(--ink-sub); font-weight:300}
.brand .bko{font-size:14px; font-weight:600; color:var(--ink-sub); letter-spacing:-.3px}
.mainnav{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto}
.mainnav a{
  color:var(--ink); font-size:14.5px; font-weight:600;
  padding:7px 11px; border-radius:8px;
}
.mainnav a:hover{background:var(--cream); text-decoration:none}
.mainnav a.on{color:var(--emerald); background:#E7EFE9}
.langtoggle{
  display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; flex:none;
}
.langtoggle a{
  font-size:12.5px; font-weight:700; padding:5px 12px; color:var(--ink-sub); background:#fff;
}
.langtoggle a.cur{background:var(--emerald); color:#fff}
.langtoggle a:hover{text-decoration:none}

/* ---------- 히어로 ---------- */
.hero{
  background:linear-gradient(160deg, var(--emerald) 0%, var(--emerald-deep) 78%);
  color:#FBFBFA; text-align:center; padding:34px 20px 52px;
}
.hero .intro-wrap{max-width:880px; margin:0 auto}
.hero h1{
  font-size:clamp(24px,4.4vw,38px); font-weight:800; letter-spacing:-.8px;
  margin:18px auto 12px; max-width:720px; line-height:1.35;
}
.hero p.lead{
  font-size:clamp(15px,2.2vw,18px); color:#C2DFD2; max-width:640px;
  margin:0 auto 28px; line-height:1.7;
}
.btn{
  display:inline-block; background:var(--gold); color:var(--emerald);
  font-weight:700; font-size:16px; padding:14px 30px; border-radius:12px;
  box-shadow:0 4px 15px rgba(232,200,114,.28); transition:all .2s ease;
}
.btn:hover{background:var(--gold-soft); text-decoration:none; transform:translateY(-2px)}
.btn.ghost{
  background:transparent; color:#FBFBFA; border:1.5px solid rgba(251,251,250,.55);
  box-shadow:none; margin-left:8px;
}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold)}

/* ---------- 본문 공통 ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
section.block{padding:58px 0 8px}
section.block:last-of-type{padding-bottom:64px}
.kicker{
  font-size:12.5px; font-weight:700; letter-spacing:1.6px; color:var(--emerald-mid);
  text-transform:uppercase; margin-bottom:10px;
}
h2.sec{font-size:clamp(21px,3.4vw,29px); font-weight:800; letter-spacing:-.6px; color:var(--emerald); margin-bottom:12px}
.sec-lead{color:var(--ink-sub); max-width:700px; margin-bottom:28px; font-size:16px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 20px;
}
.card h3{font-size:17px; font-weight:700; color:var(--emerald); margin-bottom:8px}
.card p{font-size:14.5px; color:var(--ink-sub)}
.card a.more{font-size:14px; font-weight:700; display:inline-block; margin-top:10px}
.alt{background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:58px}
.alt section.block{padding-top:44px}

/* ---------- 매뉴얼 문서 ---------- */
.doc{max-width:820px; margin:0 auto; padding:36px 20px 72px}
.doc h1{font-size:clamp(24px,4vw,32px); font-weight:800; color:var(--emerald); letter-spacing:-.6px; margin-bottom:8px}
.doc .doc-lead{color:var(--ink-sub); margin-bottom:10px; font-size:15.5px}
.doc .note{
  background:#FFF8E6; border:1px solid #EBD9A0; border-radius:10px;
  padding:12px 16px; font-size:14px; color:#6B5B23; margin:18px 0 6px;
}
.doc h2{
  font-size:21px; font-weight:800; color:var(--emerald); letter-spacing:-.4px;
  margin:40px 0 10px; padding-top:22px; border-top:1px solid var(--line);
}
.doc h2:first-of-type{border-top:none; padding-top:0}
.doc h3{font-size:16.5px; font-weight:700; margin:22px 0 6px}
.doc p{margin:8px 0; font-size:15.5px}
.doc ul,.doc ol{margin:8px 0 8px 22px; font-size:15.5px}
.doc li{margin:4px 0}
.doc table{border-collapse:collapse; width:100%; margin:14px 0; font-size:14.5px}
.doc th,.doc td{border:1px solid var(--line); padding:8px 11px; text-align:left; vertical-align:top}
.doc th{background:var(--cream); font-weight:700}
.toc{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px 22px; margin:22px 0 6px;
}
.toc p{font-weight:700; font-size:14px; color:var(--emerald); margin-bottom:8px}
.toc ol{margin-left:20px; font-size:14.5px}
.toc li{margin:3px 0}

/* ---------- Q&A ---------- */
details.qa{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px 20px; margin-bottom:12px;
}
details.qa summary{
  font-weight:700; font-size:16px; color:var(--emerald); cursor:pointer; list-style:none;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+"; float:right; font-weight:400; color:var(--ink-sub)}
details.qa[open ] summary::after{content:"–"}
details.qa p{margin-top:10px; font-size:15px; color:var(--ink)}

/* ---------- 푸터 ---------- */
footer{
  background:var(--emerald-deep); color:rgba(251,251,250,.75);
  padding:38px 20px 44px; margin-top:0;
}
.foot-in{max-width:1080px; margin:0 auto}
.foot-links{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:16px}
.foot-links a{color:#FBFBFA; font-size:14px; font-weight:600}
.foot-in p{font-size:13px; color:rgba(251,251,250,.45)}

/* ---------- 페이지 헤더 (서브 페이지) ---------- */
.pagehead{
  background:linear-gradient(160deg, var(--emerald) 0%, var(--emerald-deep) 80%);
  color:#FBFBFA; padding:44px 20px 40px;
}
.pagehead .wrap{padding:0}
.pagehead h1{font-size:clamp(24px,4vw,32px); font-weight:800; letter-spacing:-.6px; margin-bottom:8px}
.pagehead p{color:#C2DFD2; max-width:680px; font-size:16px}

@media (max-width:640px){
  .mainnav{margin-left:0; order:3; width:100%}
  .btn.ghost{margin-left:0; margin-top:10px}
  section.block{padding-top:44px}
}

/* ---------- 스크롤 등장 모션 ---------- */
.rv{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.rv.on{opacity:1; transform:none}

/* ---------- 모션그래픽 (SVG 시퀀스) ---------- */
.mg{
  margin:28px 0 10px; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:24px 18px 6px;
  box-shadow:0 12px 32px rgba(18,55,42,.06);
}
.mg svg{display:block; width:100%; height:auto}
.mg figcaption{
  padding:14px 8px 16px; font-size:15.5px; line-height:1.6;
  color:var(--ink-sub); text-align:center; max-width:780px; margin:0 auto;
}
.mg text{font-family:inherit}
.mg .lb{font-size:17px; font-weight:700; fill:var(--emerald)}
.mg .lb-sm{font-size:14.5px; font-weight:600; fill:var(--emerald)}
.mg .lb-sub{font-size:13.5px; fill:var(--ink-sub)}
.mg .lb-dim{font-size:17px; font-weight:700; fill:#77816F}
.mg .ln{stroke:var(--emerald); stroke-width:2; fill:none; stroke-linecap:round}
.mg .ln-thin{stroke:var(--emerald); stroke-width:1.3; fill:none; opacity:.5}
.mg .a{transform-box:fill-box; transform-origin:center}

/* 재생 중일 때만 애니메이션 (뷰포트 밖에서는 정지해 성능을 아낀다) */
.mg.play .a{animation-duration:16s; animation-iteration-count:infinite; animation-timing-function:linear; animation-fill-mode:backwards}
.mg.play .a-hist{animation-duration:18s}

/* 공간의 겹침 (추상) */
@keyframes mgDraw{0%{stroke-dashoffset:100}18%,100%{stroke-dashoffset:0}}
@keyframes mgFadeA{0%,13%{opacity:0}21%,100%{opacity:1}}
@keyframes mgPlaneB{0%,32%{opacity:0; transform:translate(16px,12px)}48%,100%{opacity:1; transform:none}}
@keyframes mgDrift{
  0%,46%{opacity:0; transform:translate(-104px,92px)}
  54%{opacity:1; transform:translate(-104px,92px)}
  76%,100%{opacity:1; transform:translate(0,0)}
}
.mg.play .k-draw{animation-name:mgDraw}
.mg.play .k-fade-a{animation-name:mgFadeA}
.mg.play .k-plane-b{animation-name:mgPlaneB}
.mg.play .k-drift{animation-name:mgDrift}

/* 명부와 보안 (소속이 열람을 정한다) */
@keyframes mgCardIn{0%{opacity:0; transform:translateY(10px)}9%,100%{opacity:1; transform:none}}
@keyframes mgYou{0%,16%{opacity:0}25%,100%{opacity:1}}
@keyframes mgYouBar{0%,16%{fill:#E7E9E2}25%,100%{fill:var(--gold-soft)}}
@keyframes mgYouDot{0%,16%{fill:#C9CFC0}25%,100%{fill:var(--gold)}}
@keyframes mgLink{0%,30%{stroke-dashoffset:100}47%,100%{stroke-dashoffset:0}}
@keyframes mgRoomA{0%,45%{fill:#FFFFFF; stroke:var(--emerald)}57%,100%{fill:#FDF6DE; stroke:#C79A3B}}
@keyframes mgTagIn{0%,53%{opacity:0}61%,100%{opacity:1}}
@keyframes mgAdmin{0%,57%{opacity:0}64%,86%{opacity:1}95%,100%{opacity:0}}
@keyframes mgLock{0%,60%{transform:scale(1)}66%{transform:scale(1.16)}72%,100%{transform:scale(1)}}
@keyframes mgTagB{0%,68%{opacity:0}76%,100%{opacity:1}}
.mg.play .k-cardin{animation-name:mgCardIn}
.mg.play .k-you{animation-name:mgYou}
.mg.play .k-youbar{animation-name:mgYouBar}
.mg.play .k-youdot{animation-name:mgYouDot}
.mg.play .k-link{animation-name:mgLink}
.mg.play .k-rooma{animation-name:mgRoomA}
.mg.play .k-tagin{animation-name:mgTagIn}
.mg.play .k-admin{animation-name:mgAdmin}
.mg.play .k-lock{animation-name:mgLock}
.mg.play .k-tagb{animation-name:mgTagB}

/* 히스토리 (기록이 쌓인다) */
@keyframes mgSpine{0%{stroke-dashoffset:100}72%,100%{stroke-dashoffset:0}}
@keyframes mgNode1{0%,4%{opacity:0; transform:scale(.35)}11%,100%{opacity:1; transform:scale(1)}}
@keyframes mgNode2{0%,24%{opacity:0; transform:scale(.35)}31%,100%{opacity:1; transform:scale(1)}}
@keyframes mgNode3{0%,44%{opacity:0; transform:scale(.35)}51%,100%{opacity:1; transform:scale(1)}}
@keyframes mgNode4{0%,62%{opacity:0; transform:scale(.35)}69%,100%{opacity:1; transform:scale(1)}}
@keyframes mgGhost{0%,80%{opacity:0}90%,100%{opacity:.85}}
.mg.play .k-spine{animation-name:mgSpine}
.mg.play .k-node1{animation-name:mgNode1}
.mg.play .k-node2{animation-name:mgNode2}
.mg.play .k-node3{animation-name:mgNode3}
.mg.play .k-node4{animation-name:mgNode4}
.mg.play .k-ghost{animation-name:mgGhost}

@media (max-width:640px){
  .mg{padding:16px 10px 2px}
  .mg figcaption{font-size:14.5px}
}

/* 모션 최소화 설정 존중: 최종 상태를 그대로 보여준다 */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1; transform:none; transition:none}
  .mg .a{animation:none !important}
  .mg .k-admin{opacity:0}
  html{scroll-behavior:auto}
}

/* 총무의 장면 시퀀스 (장면 대 장면) */
.mg .sc{opacity:0}
.mg .sc1{opacity:1}
.mg .pain-ln{stroke:#B9BFB4; stroke-width:2; fill:none; stroke-linecap:round}
.mg .pain-box{fill:#FFFFFF; stroke:#B9BFB4; stroke-width:1.5}
.mg .pain-tx{fill:#8A9484; font-weight:700}
.mg .rel-box{fill:#FFFFFF; stroke:var(--emerald); stroke-width:1.6}
.mg .gold-ln{stroke:#C79A3B; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round}
.mg.play .a-scene{animation-duration:24s}
@keyframes mgSc1{0%{opacity:1}21%{opacity:1}25%{opacity:0}96%{opacity:0}100%{opacity:1}}
@keyframes mgSc2{0%,21%{opacity:0}25%{opacity:1}46%{opacity:1}50%,100%{opacity:0}}
@keyframes mgSc3{0%,46%{opacity:0}50%{opacity:1}71%{opacity:1}75%,100%{opacity:0}}
@keyframes mgSc4{0%,71%{opacity:0}75%{opacity:1}96%{opacity:1}100%{opacity:0}}
@keyframes mgRel1{0%,9%{opacity:0; transform:translateX(12px)}14%,100%{opacity:1; transform:none}}
@keyframes mgRel2{0%,34%{opacity:0; transform:translateX(12px)}39%,100%{opacity:1; transform:none}}
@keyframes mgRel3{0%,59%{opacity:0; transform:translateX(12px)}64%,100%{opacity:1; transform:none}}
@keyframes mgRel4{0%,84%{opacity:0; transform:translateX(12px)}89%,100%{opacity:1; transform:none}}
.mg.play .k-sc1{animation-name:mgSc1}
.mg.play .k-sc2{animation-name:mgSc2}
.mg.play .k-sc3{animation-name:mgSc3}
.mg.play .k-sc4{animation-name:mgSc4}
.mg.play .k-rel1{animation-name:mgRel1}
.mg.play .k-rel2{animation-name:mgRel2}
.mg.play .k-rel3{animation-name:mgRel3}
.mg.play .k-rel4{animation-name:mgRel4}
@media (prefers-reduced-motion: reduce){
  .mg .sc{opacity:0}
  .mg .sc1{opacity:1}
  .mg .k-rel1,.mg .k-rel2,.mg .k-rel3,.mg .k-rel4{opacity:1; transform:none}
}

/* 다섯 점 구호 시퀀스 (둘레가 쌓여 가운데의 결론으로) */
.mg.play .a-slg{animation-duration:20s}
@keyframes mgLineDraw{0%{stroke-dashoffset:100}20%,100%{stroke-dashoffset:0}}
@keyframes mgPop1{0%,8%{opacity:0; transform:scale(.3)}13%,100%{opacity:1; transform:scale(1)}}
@keyframes mgPop2{0%,24%{opacity:0; transform:scale(.3)}29%,100%{opacity:1; transform:scale(1)}}
@keyframes mgPop3{0%,40%{opacity:0; transform:scale(.3)}45%,100%{opacity:1; transform:scale(1)}}
@keyframes mgPop4{0%,56%{opacity:0; transform:scale(.3)}61%,100%{opacity:1; transform:scale(1)}}
@keyframes mgLab1{0%,11%{opacity:0}17%,100%{opacity:1}}
@keyframes mgLab2{0%,27%{opacity:0}33%,100%{opacity:1}}
@keyframes mgLab3{0%,43%{opacity:0}49%,100%{opacity:1}}
@keyframes mgLab4{0%,59%{opacity:0}65%,100%{opacity:1}}
@keyframes mgCenterDot{0%,82%{opacity:0; transform:scale(.3)}88%{opacity:1; transform:scale(1.12)}92%,100%{opacity:1; transform:scale(1)}}
@keyframes mgRing{0%,84%{opacity:0; transform:scale(.6)}90%{opacity:.8}100%{opacity:0; transform:scale(1.9)}}
@keyframes mgLab5{0%,86%{opacity:0; transform:translateY(6px)}93%,100%{opacity:1; transform:none}}
.mg.play .k-linedraw{animation-name:mgLineDraw}
.mg.play .k-pop1{animation-name:mgPop1}
.mg.play .k-pop2{animation-name:mgPop2}
.mg.play .k-pop3{animation-name:mgPop3}
.mg.play .k-pop4{animation-name:mgPop4}
.mg.play .k-lab1{animation-name:mgLab1}
.mg.play .k-lab2{animation-name:mgLab2}
.mg.play .k-lab3{animation-name:mgLab3}
.mg.play .k-lab4{animation-name:mgLab4}
.mg.play .k-centerdot{animation-name:mgCenterDot}
.mg.play .k-ring{animation-name:mgRing}
.mg.play .k-lab5{animation-name:mgLab5}

/* 다섯 개의 더 (텍스트 타이포 배열) */
.fives{margin:34px 0 4px; text-align:center}
.fives-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:30px 44px;
  max-width:760px; margin:0 auto; text-align:left;
}
.five-title{
  font-size:clamp(17px,2.6vw,21px); font-weight:800; color:var(--emerald);
  letter-spacing:-.4px; margin:0 0 8px;
}
.five-purpose{
  font-size:15px; color:var(--ink); font-weight:600; line-height:1.65; margin:0 0 10px;
}
.five-list{list-style:none; margin:0; padding:0}
.five-list li{
  position:relative; font-size:14.5px; color:var(--ink-sub);
  line-height:1.55; margin:0 0 6px; padding-left:14px;
}
.five-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:#C7A344;
}
.five-core{
  font-size:clamp(23px,3.8vw,31px); font-weight:800; color:var(--emerald);
  letter-spacing:-.6px; margin:44px auto 0;
}
.fives-line{
  margin:16px auto 0; max-width:700px;
  font-size:16px; color:var(--ink-sub); line-height:1.7;
}
@media (max-width:640px){
  .fives-grid{grid-template-columns:1fr; max-width:400px}
}