/* ===== 조직도 · 운용철학 (2026-09-14, 다인 요청)
   · 이미지로 박지 않고 HTML 로 그린다 → 관리자에서 글씨 수정 가능 + 폰에서 또렷
   · 스크롤로 화면에 들어오면 한 번만 애니메이션(원이 날아와 자리잡고 글씨가 뜬다)
   ===== */

/* ── 공통 ── */
.op-sec{padding:76px 20px 96px;max-width:1180px;margin:0 auto;}
.op-head{text-align:center;margin-bottom:52px;}
.op-head .en{font-family:'Jost',sans-serif;letter-spacing:3px;font-size:.82rem;color:var(--green2);font-weight:600;}
.op-head h2{font-size:2.05rem;font-weight:900;color:var(--green);margin-top:8px;letter-spacing:-.5px;}
.op-head p{color:#3d5145;font-size:1.08rem;font-weight:500;margin-top:11px;}

/* ══════════ 조직도 ══════════ */
.org{--w:200px;--aside-w:152px;--gap:40px;--line:#c3d5ca;
  position:relative;display:flex;flex-direction:column;align-items:center;}

.org .node{
  position:relative;width:var(--w);min-height:64px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:14px 15px;border-radius:12px;
  font-weight:700;font-size:1.1rem;letter-spacing:-.3px;word-break:keep-all;
  background:linear-gradient(160deg,#ffffff 0%,#f4f8f5 58%,#e6efe9 100%);
  color:var(--green);border:1px solid #d2e2d8;
  box-shadow:
    0 2px 0 #ffffff inset,                 /* 윗면 빛 */
    0 -1px 0 rgba(255,255,255,.7) inset,
    0 6px 0 -1px #cddbd2,                  /* 두께 1 */
    0 9px 0 -2px #bccec3,                  /* 두께 2 */
    0 22px 26px -16px rgba(42,84,56,.45),  /* 바닥 그림자 */
    0 6px 10px -6px rgba(0,0,0,.14);
  transition:transform .25s ease,box-shadow .25s ease;
}
.org .node:hover{transform:translateY(-4px);}
.org .node.dark{
  background:linear-gradient(160deg,#3d6d4c 0%,#2a5438 55%,#1f3f2a 100%);
  color:#fff;border-color:#24492f;font-size:1.2rem;min-height:72px;
  /* 🔴 진초록 카드는 두께 면이 검은 줄처럼 보인다(형 9/14). 두께 빼고 부드러운 그림자만. */
  box-shadow:
    0 2px 0 rgba(255,255,255,.30) inset,
    0 -2px 0 rgba(0,0,0,.20) inset,
    0 20px 28px -14px rgba(20,42,27,.5),
    0 6px 12px -6px rgba(0,0,0,.20);
}
.org .node.mid{
  background:linear-gradient(160deg,#f0f6f2 0%,#dfebe3 60%,#cfe0d5 100%);
  border-color:#bcd4c4;font-size:1.12rem;min-height:68px;
  box-shadow:0 2px 0 #fff inset,0 6px 0 -1px #c4d5ca,0 9px 0 -2px #b4c8bb,
             0 22px 26px -16px rgba(42,84,56,.45),0 6px 10px -6px rgba(0,0,0,.13);
}
.org .stack{position:relative;display:flex;flex-direction:column;align-items:center;}
.org .aside{
  position:absolute;top:50%;transform:translateY(-50%);
  left:calc(50% + var(--w)/2 + 34px);
  width:var(--aside-w);min-height:46px;display:flex;align-items:center;justify-content:center;
  padding:9px;border-radius:10px;text-align:center;word-break:keep-all;
  font-size:1.02rem;font-weight:600;color:#3d5145;
  background:linear-gradient(165deg,#fff,#f6faf8);border:1px dashed #b9cdc1;
  box-shadow:0 4px 0 -1px #dbe7e0,0 14px 18px -12px rgba(42,84,56,.4);
}
.org .aside::before{content:"";position:absolute;right:100%;top:50%;width:34px;height:2px;background:var(--line);}
.org .vl{width:2px;height:var(--gap);background:var(--line);flex:none;}
.org .split{position:relative;width:100%;display:flex;justify-content:center;}
.org .hl{position:absolute;top:0;height:2px;background:var(--line);}
.org .cols{display:flex;justify-content:center;align-items:flex-start;gap:120px;}
.org .col{position:relative;display:flex;flex-direction:column;align-items:center;}
.org .teams{display:flex;justify-content:center;align-items:flex-start;gap:26px;}
.org .team{position:relative;display:flex;flex-direction:column;align-items:center;}

/* 조직도 애니메이션 — 위에서 내려오며 나타남 */
.org .node,.org .aside{opacity:0;transform:translateY(-18px);}
.org.play .node,.org.play .aside{animation:opDrop .52s cubic-bezier(.22,1,.36,1) forwards;}
.org .vl,.org .hl{transform-origin:top center;}
.org .vl{transform:scaleY(0);}
.org .hl{transform:scaleX(0);transform-origin:center;}
.org.play .vl{animation:opGrowY .3s ease forwards;}
.org.play .hl{animation:opGrowX .34s ease forwards;}
@keyframes opDrop{to{opacity:1;transform:translateY(0);}}
@keyframes opGrowY{to{transform:scaleY(1);}}
@keyframes opGrowX{to{transform:scaleX(1);}}

/* ══════════ 운용철학 ══════════ */
/* 🔴 절대좌표로 원·설명을 흩뿌리면 화면 폭에 따라 반드시 겹친다(9/14 실측 겹침).
      3열 그리드로 자리를 나눠 구조적으로 겹칠 수 없게 만든다. */
.phil{position:relative;}
.phil-top{text-align:center;max-width:820px;margin:0 auto 40px;}
.phil-top .t{font-family:'Jost',sans-serif;font-size:1.6rem;font-weight:700;color:var(--green);letter-spacing:.5px;}

.phil-top .d{color:#1f3328;font-size:1.2rem;font-weight:600;margin-top:10px;word-break:keep-all;line-height:1.65;}

.phil-stage{max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;gap:34px 40px;align-items:center;justify-items:center;}
.ps-center{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:18px;}

/* 로고 */
.phil-logo{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;transition:opacity .6s ease .1s;}
.phil.play .phil-logo{opacity:1;}
.phil-logo img{width:86px;height:auto;
  filter:brightness(0) saturate(100%) invert(24%) sepia(34%) saturate(960%) hue-rotate(101deg) brightness(94%) contrast(95%);}
.phil-logo .nm{font-family:'Jost',sans-serif;font-size:1.7rem;font-weight:700;color:var(--green);line-height:.9;transform:scaleY(.7);letter-spacing:1px;}
.phil-logo .sb{font-size:.72rem;font-weight:700;color:var(--green);letter-spacing:3.4px;margin-top:4px;}

/* 구슬 */
.orb{
  width:178px;height:178px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 16px;color:#fff;font-weight:800;font-size:1.04rem;line-height:1.45;
  letter-spacing:-.3px;word-break:keep-all;
  background:radial-gradient(circle at 34% 27%, #6fa683 0%, #4a865f 34%, #2f5d3f 66%, #21432d 100%);
  box-shadow:0 18px 30px -14px rgba(31,63,42,.5),0 4px 10px rgba(0,0,0,.14),
             inset 6px 7px 18px rgba(255,255,255,.22);
  opacity:0;
}
.phil.play .orb{animation:orbIn .82s cubic-bezier(.2,.9,.3,1.2) forwards;}
.orb-1{--fx:0px;--fy:-150px;}
.orb-2{--fx:-150px;--fy:110px;}
.orb-3{--fx:150px;--fy:110px;}
.phil.play .orb-1{animation-delay:.05s;}
.phil.play .orb-2{animation-delay:.35s;}
.phil.play .orb-3{animation-delay:.65s;}
@keyframes orbIn{
  0%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.4);}
  70%{opacity:1;}
  100%{opacity:1;transform:translate(0,0) scale(1);}
}

/* 설명 블록 */
.pblock{width:100%;max-width:300px;opacity:0;transform:translateY(14px);}
.phil.play .pblock{animation:pbIn .6s ease forwards;}
.pblock .en{font-family:'Jost',sans-serif;font-size:1.28rem;font-weight:700;color:var(--green);
  border-bottom:2px solid #cfe0d5;display:inline-block;padding-bottom:4px;margin-bottom:7px;}
.pblock .d{color:#22362a;font-size:1.06rem;line-height:1.74;word-break:keep-all;font-weight:600;}
.pb-left{justify-self:start;text-align:left;}
.pb-right{justify-self:start;text-align:left;}
.phil.play .pb-1{animation-delay:.95s;}
.phil.play .pb-2{animation-delay:1.1s;}
.phil.play .pb-3{animation-delay:1.25s;}
.phil.play .pb-4{animation-delay:1.4s;}
@keyframes pbIn{to{opacity:1;transform:translateY(0);}}

/* ── 모바일 ──
   🔴 조직도를 가로로 늘어놓으면 화면을 넘친다(390px에서 실측 64px 초과).
      폭을 억지로 줄여 글씨를 깨알로 만들지 말고 세로로 쌓는다. */
@media (max-width:860px){
  .org .cols{gap:60px;}
  .phil-stage{max-width:100%;}
}
@media (max-width:760px){
  .op-sec{padding-top:60px;}
  .op-head{margin-bottom:40px;}
  .op-head h2{font-size:1.56rem;}
  .org{--w:190px;--aside-w:120px;--gap:26px;}
  .org .node{font-size:.94rem;min-height:56px;padding:12px 10px;}
  .org .node.dark{font-size:1.02rem;min-height:62px;}
  .org .aside{position:static;transform:none;width:var(--aside-w);margin-top:10px;font-size:.82rem;min-height:44px;padding:8px;}
  .org .aside::before{display:none;}
  .org .cols{flex-direction:column;align-items:center;gap:0;}
  .org .teams{flex-direction:column;align-items:center;gap:0;}
  .org .hl{display:none!important;}

  /* 운용철학: 구슬+설명을 세로 카드로 */
  .phil-stage{grid-template-columns:minmax(0,1fr);gap:20px;}
  .ps-center{grid-column:1;}
  .orb{width:150px;height:150px;font-size:.87rem;}
  .pblock{max-width:420px;text-align:center!important;justify-self:center!important;}
  .phil-row{display:flex;flex-direction:column;align-items:center;gap:12px;}
}

/* ═══ 관리자 편집모드 가독성 (형 9/14)
   🔴 편집모드 기본 스타일이 배경을 흰색으로 덮어 초록 카드가 흰색이 되고
      흰 글씨가 안 보였다.
      형 지시: 초록색을 흰색으로 바꾸지 말고 초록 그대로 유지한다.
      → 초록 카드·구슬은 편집 중에도 원래 배경·흰 글씨를 그대로 쓴다. */
body.adm-edit .org .node.dark,
body.adm-edit .orb,
body.adm-edit .org .node.dark:hover,
body.adm-edit .orb:hover,
body.adm-edit .org .node.dark:focus,
body.adm-edit .orb:focus{
  color:#ffffff !important;               /* 흰 글씨 유지 */
  -webkit-text-fill-color:#ffffff !important;
  background-color:transparent !important; /* 편집모드가 씌우는 흰 배경 제거 */
}
/* 초록 카드 본래 배경을 편집 중에도 유지 */
body.adm-edit .org .node.dark{
  background:linear-gradient(160deg,#3d6d4c 0%,#2a5438 55%,#1f3f2a 100%) !important;
  outline-color:#9fe0b8 !important;       /* 점선은 밝은 색이라야 초록 위에서 보임 */
}
body.adm-edit .orb{
  background:radial-gradient(circle at 34% 27%, #6fa683 0%, #4a865f 34%, #2f5d3f 66%, #21432d 100%) !important;
  outline-color:#9fe0b8 !important;
}
/* 포커스 테두리도 초록 위에서 보이게 밝은 색으로 */
body.adm-edit .org .node.dark:focus,
body.adm-edit .orb:focus{
  outline:2px solid #9fe0b8 !important;
}