/*
Theme Name: 컬팩 스포츠재활클리닉 (CultFac)
Theme URI: http://localhost/clinic/
Author: Cowork (Claude)
Author URI: https://claude.ai/
Description: 컬팩 스포츠재활센터(지축점·인천점) 전용 커스텀 워드프레스 테마. 데이터 기반 진단 톤의 블루 팔레트, 히어로 슬라이더, 재활 7개 영역과 2개 지점 구조. doorweb-pet의 dw-hero-slider 엔진을 재사용한다.
Version: 2.26.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cultfac
Tags: two-columns, custom-menu, custom-logo, featured-images, translation-ready
*/

/* =========================================================
   0. Design Tokens — 스마트 재활 톤(딥 블루 + 네이비 잉크)
   ========================================================= */
:root{
  /* 브랜드 포인트 컬러 — 여기 한 곳만 바꾸면 전체 톤이 따라온다 */
  --point:        #063626;   /* 지정 포인트 컬러 */
  --point-d:      #04251A;   /* hover · 눌림 */
  --point-dd:     #031B12;
  --point-l:      #0E5C40;   /* 밝은 쪽 — 그라데이션 끝 */
  --point-soft:   #E8F1ED;   /* 옅은 배경 틴트 */
  --point-softer: #F4F9F6;
  --point-on-dark:#7FC9A8;   /* 어두운 바탕 위 강조 */

  /* 예전 이름 유지 — 기존 규칙이 전부 이걸 참조한다 */
  --blue:      var(--point);
  --blue-d:    var(--point-d);
  --blue-dd:   var(--point-dd);
  --blue-l:    var(--point-soft);
  --blue-ll:   var(--point-softer);
  --grad:      linear-gradient(100deg,#063626 0%,#0E5C40 100%);

  --ink:       #132019;   /* 제목 */
  --ink-2:     #1B2B23;
  --navy:      #152420;   /* 푸터 · CTA 바탕 */
  --navy-d:    #0D1815;

  --g700:#414C46; --g600:#5C6862; --g500:#67736E; --g400:#9DA8A2;   /* g500: 흰 배경 4.94:1 · 연회색 배경 4.62:1 (AA) */
  --g300:#CCD5D0; --g200:#E4EAE6; --g100:#EFF3F1; --g50:#F6F9F7;

  --bg:#FFFFFF;
  --bg-alt:#F5F8F6;
  --bg-soft:#EDF3EF;
  --line:#E4EAE6;

  --sans:"Pretendard Variable",Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Outfit",var(--sans);

  --fs-hero:clamp(1.95rem,4.4vw,3.05rem);
  --fs-h2:clamp(1.5rem,3vw,2.15rem);
  --fs-h3:clamp(1.12rem,1.8vw,1.35rem);

  --container:1200px;
  --gutter:clamp(1rem,4vw,2rem);
  --sec-y:clamp(3.2rem,7vw,5.5rem);

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --sh-xs:0 1px 3px rgba(19,32,25,.06);
  --sh-sm:0 4px 16px rgba(19,32,25,.06);
  --sh:0 10px 30px rgba(19,32,25,.08);
  --sh-lg:0 22px 56px rgba(19,32,25,.14);
  --sh-blue:0 12px 28px rgba(6,54,38,.26);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   1. Reset & Base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}
body{
  margin:0;background:var(--bg);color:var(--g700);
  font-family:var(--sans);font-size:1rem;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  word-break:keep-all;overflow-wrap:anywhere;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:var(--blue);text-decoration:none;}
a:hover{color:var(--blue-d);}
h1,h2,h3,h4{margin:0 0 .6em;line-height:1.32;font-weight:800;letter-spacing:-.03em;color:var(--ink);}
p{margin:0 0 1.1em;}
ul,ol{margin:0 0 1.1em;padding-left:1.25em;}
li{margin:.3em 0;}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0;}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px;}
::selection{background:var(--blue);color:#fff;}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.container--narrow{max-width:880px;}
.sr-only,.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--blue);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 var(--r) 0;}
.skip-link:focus{left:0;color:#fff;}

/* =========================================================
   2. 공용 파츠 — 버튼 · 섹션 헤더 · 칩 · 그리드
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.9em 1.7em;border-radius:var(--r-pill);border:1.5px solid transparent;
  font-weight:700;font-size:.97rem;line-height:1.2;cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s,color .18s,border-color .18s,box-shadow .18s;
  text-decoration:none!important;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn--primary{background:var(--blue);color:#fff;}
.btn--primary:hover{background:var(--blue-d);color:#fff;box-shadow:var(--sh-blue);}
.btn--flame{background:var(--blue);color:#fff;}          /* 구 클래스 호환 */
.btn--flame:hover{background:var(--blue-d);color:#fff;box-shadow:var(--sh-blue);}
.btn--ghost{background:#fff;color:var(--blue-d);border-color:var(--g300);}
.btn--ghost:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn--light{background:#fff;color:var(--blue-d);}
.btn--light:hover{background:var(--blue-l);color:var(--blue-dd);}
.btn--on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn--on-dark:hover{background:#fff;color:var(--blue-d);border-color:#fff;}
.btn--sm{padding:.62em 1.2em;font-size:.88rem;min-height:44px;}
.btn--block{width:100%;}
.btn svg{flex:none;}

.eyebrow{
  display:inline-block;font-family:var(--display);font-size:.8rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:0 0 .8rem;
}
.sec-head{margin-bottom:clamp(1.8rem,3.6vw,2.8rem);}
.sec-head--center{text-align:center;}
.sec-title{font-size:var(--fs-h2);margin:0 0 .55rem;color:var(--ink);}
.sec-title em{font-style:normal;color:var(--blue);}
.sec-lede{font-size:1rem;color:var(--g600);margin:0;max-width:60ch;line-height:1.8;}
.sec-head--center .sec-lede{margin-inline:auto;}

.section{padding-block:var(--sec-y);}
.section--alt{background:var(--bg-alt);}
.section--soft{background:var(--bg-soft);}
.section--dark{background:var(--navy);color:#C5D2CB;}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff;}
.section--dark .sec-lede{color:#98A69F;}
.section--dark .eyebrow{color:#7FC9A8;}

.chip{display:inline-block;padding:.34em .8em;border-radius:var(--r-pill);background:var(--g100);color:var(--g600);font-size:.8rem;font-weight:600;line-height:1.5;}
.chip--flame,.chip--navy{background:var(--blue-l);color:var(--blue-d);}
.chip-row{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0;}

.grid{display:grid;--grid-gap:clamp(1rem,2.2vw,1.6rem);gap:var(--grid-gap);}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));}
/* 멤버 격자. auto-fit 은 항목이 적으면 남은 자리를 나눠 가져서, 두 명뿐인 지점에서는
   카드가 반 폭까지 부풀었다. 한 칸의 최대치를 1/3 로 묶어 둔다.
   최소값은 180px 로 낮춘다. 220px 로 두면 760~800px 구간에서 상한이 최소값보다 작아져
   minmax 가 뒤집히고, 칸이 220px 로 굳어 남은 공간을 못 채운다. */
@media (min-width:760px){
  .grid--members{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),calc((100% - var(--grid-gap) * 2) / 3)));justify-content:start;}
}

/* =========================================================
   3. 상단 유틸바 · 헤더 · 내비게이션
   ========================================================= */
.topbar{background:var(--navy);color:#9EACA5;font-size:.84rem;}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px;}
.topbar__note{display:flex;align-items:center;gap:.4em;margin:0;}
.topbar__right{display:flex;align-items:center;gap:1.1rem;}
.topbar a{color:#C0CDC6;display:inline-flex;align-items:center;gap:.35em;font-weight:600;}
.topbar a:hover{color:#fff;}
.topbar__tel{color:#fff!important;}
@media (max-width:760px){.topbar__note{display:none;}.topbar__inner{justify-content:center;}}

.site-header{position:sticky;top:0;z-index:100;background:transparent;border-bottom:1px solid var(--line);}
/* 블러는 이 레이어가 맡는다 — 헤더 자체에 걸면 fixed 자식(서랍 메뉴)의 기준이
   뷰포트가 아니라 헤더가 되어 서랍이 헤더 박스 안에 갇힌다. */
.site-header__bg{position:absolute;inset:0;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(10px);-webkit-backdrop-filter:saturate(1.6) blur(10px);}
.header-inner{position:relative;display:flex;align-items:center;gap:1.2rem;min-height:76px;}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);flex:none;}
.brand__mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--grad);color:#fff;flex:none;box-shadow:var(--sh-blue);}
.brand__mark--file{width:auto;height:auto;background:none;border-radius:0;box-shadow:none;}
.brand__mark--file img{max-height:42px;width:auto;}
.brand__text b{display:block;font-family:var(--display);font-size:1.08rem;font-weight:800;letter-spacing:.01em;line-height:1.15;text-transform:uppercase;}
.brand__text small{display:block;font-size:.72rem;color:var(--g500);font-weight:600;}
/* 모바일에서 로고 폭 제한.
   가로로 긴 로고 파일은 높이 42px 만 맞춰도 폭이 헤더 절반을 넘어 버려,
   오른쪽 버거 버튼을 밀어내거나 헤더를 가로로 넘치게 만든다.
   화면 절반에서 끊고 비율은 그대로 둔다.

   height:auto 를 같이 주는 이유 — wp_get_attachment_image() 가 img 에
   width/height 속성을 박아 넣기 때문에, 폭만 줄이면 높이가 원본값에
   남아 로고가 눌린 모양이 된다. */
@media (max-width:760px){
  .brand__mark--file img{max-width:50vw;height:auto;}
}

.main-nav{margin-left:auto;display:flex;align-items:center;}
.main-nav .menu{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0;}
.main-nav .menu > li{position:relative;margin:0;}
.main-nav .menu > li > a{display:block;padding:.65rem .9rem;border-radius:9px;color:var(--g700);font-weight:700;font-size:.95rem;}
.main-nav .current-menu-item > a,.main-nav .current_page_item > a,.main-nav .current-menu-ancestor > a{color:var(--blue);background:var(--blue-l);}
.main-nav .sub-menu{list-style:none;margin:0;padding:0;}

/* 데스크톱 드롭다운은 min-width 쿼리 안에 가둔다.
   :hover/:focus-within 규칙이 특이도로 모바일 규칙을 이겨서
   서랍 안 서브메뉴가 화면 밖으로 밀려나던 문제를 원천 차단한다. */
@media (min-width:1101px){
  /* 가로 메뉴 hover도 여기 안에 둔다 — 밖에 두면 특이도가 높아
     서랍 안 링크 hover까지 데스크톱 색으로 물들인다. */
  .main-nav .menu > li > a:hover{color:var(--blue);background:var(--blue-ll);}
  .main-nav .sub-menu{
    position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%) translateY(6px);
    min-width:198px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
    padding:.4rem;opacity:0;visibility:hidden;
    /* 속성을 명시한다. transition:.18s 는 all 이라 바깥 포커스 링까지 애니메이션된다. */
    transition:opacity .18s var(--ease),visibility .18s var(--ease),transform .18s var(--ease);
    /* 닫힐 때만 잠깐 버틴다. 대각선으로 빠르게 지나가도 깜빡이지 않는다.
       여는 쪽은 아래에서 지연 0으로 되돌려 즉시 열린다. */
    transition-delay:.12s;
  }
  /* 상위 항목과 서브메뉴 사이 8px 틈에서 커서가 "아무것도 hover 안 함" 상태가 되어
     메뉴가 사라졌다 다시 나왔다. 서브메뉴 쪽에서 그 틈을 투명하게 덮어 다리를 놓는다.
     서브메뉴는 li 의 자손이라, 이 다리 위에 있어도 li:hover 가 유지된다.
     숨김 상태에서는 visibility:hidden 이라 이 다리도 같이 죽어 오작동하지 않는다. */
  .main-nav .menu > li > .sub-menu::before{
    content:"";position:absolute;left:0;right:0;top:-10px;height:10px;
  }
  .main-nav li:hover > .sub-menu,.main-nav li:focus-within > .sub-menu{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s;
  }
  .main-nav .sub-menu a{display:block;padding:.58rem .8rem;border-radius:8px;color:var(--g700);font-size:.9rem;font-weight:600;}
  .main-nav .sub-menu a:hover{background:var(--blue-l);color:var(--blue-d);}
}

/* 데스크톱에서는 서랍용 부품(머리·하단 버튼·서브메뉴 토글)을 숨기고,
   본문 래퍼는 display:contents로 없는 셈 친다 — 가로 메뉴 정렬이 그대로 유지된다. */
.cf-nav-head,.cf-nav-actions,.cf-submenu-toggle,.cf-nav-backdrop{display:none;}
.cf-nav-body{display:contents;}

.header-cta{display:flex;align-items:center;gap:.55rem;flex:none;}
.nav-toggle{
  display:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:24px;height:3px;margin:0 auto;background:var(--ink);border-radius:2px;transition:.25s var(--ease);}
.nav-toggle.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* =========================================================
   3-1. 모바일 서랍 메뉴 (오른쪽에서 슬라이드 인)
   ========================================================= */
@media (max-width:1100px){
  html.cf-menu-open,body.cf-menu-open{overflow:hidden;overscroll-behavior:none;}

  /* 서랍이 오버레이 위로 올라오도록 헤더 스택을 backdrop(99)보다 위에 둔다.
     헤더가 쌓임 맥락을 만들기 때문에 서랍의 z-index만 올려서는 소용이 없다. */
  .site-header{overflow:visible;z-index:120;}
  /* 서랍이 position:fixed로 흐름에서 빠지면 헤더 안에 브랜드와 버거만 남는다.
     밀어 줄 요소가 없으니 auto 여백을 직접 줘야 버거가 오른쪽 끝에 붙는다. */
  .header-cta{margin-left:auto;}
  .header-cta .btn{display:none;}
  .nav-toggle{display:flex;position:relative;z-index:102;}
  /* 열리면 서랍의 X가 닫기 역할을 가져간다. 버거를 겹쳐 두면 X가 둘이 된다. */
  .nav-toggle.is-open{visibility:hidden;pointer-events:none;}

  .cf-nav-backdrop{
    display:block;position:fixed;inset:0;z-index:99;
    background:rgba(8,20,16,.56);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s ease,visibility .3s ease;
  }
  .cf-nav-backdrop.is-visible{opacity:1;visibility:visible;pointer-events:auto;}

  .main-nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(340px,88vw);max-width:100vw;height:100dvh;
    margin:0;padding:0;gap:0;
    display:flex;flex-direction:column;align-items:stretch;
    background:var(--bg-alt);
    transform:translate3d(100%,0,0);
    transition:transform .36s cubic-bezier(.22,1,.36,1),visibility .36s ease;
    box-shadow:-16px 0 48px rgba(8,20,16,.18);
    z-index:101;overflow:hidden;visibility:hidden;pointer-events:none;will-change:transform;
  }
  .main-nav.is-open{transform:translate3d(0,0,0);visibility:visible;pointer-events:auto;}
  /* --cf-adminbar는 main.js가 실제 관리자 바 높이로 채운다(없으면 32px). */
  body.admin-bar .main-nav{top:var(--cf-adminbar,32px);height:calc(100dvh - var(--cf-adminbar,32px));}
  body.admin-bar .cf-nav-backdrop{top:var(--cf-adminbar,32px);}

  /* --- 서랍 머리 --- */
  .cf-nav-head{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    position:relative;overflow:hidden;flex-shrink:0;
    padding:1.5rem 1.25rem 1.35rem;
    background:linear-gradient(140deg,#052A1E 0%,#0D2019 46%,#0E5C40 150%);
    color:#fff;
  }
  .cf-nav-head::before{
    content:"";position:absolute;top:-38px;right:-26px;width:132px;height:132px;border-radius:50%;
    background:rgba(127,201,168,.16);pointer-events:none;
  }
  .cf-nav-head::after{
    content:"";position:absolute;bottom:-48px;left:-20px;width:96px;height:96px;border-radius:50%;
    background:rgba(255,255,255,.05);pointer-events:none;
  }
  .cf-nav-head__text{position:relative;z-index:1;min-width:0;}
  .cf-nav-title{display:block;font-size:1.06rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#fff;}
  .cf-nav-sub{display:block;margin-top:.25rem;font-size:.75rem;font-weight:600;color:rgba(255,255,255,.62);}
  .cf-nav-close{
    display:grid;place-items:center;position:relative;z-index:1;flex-shrink:0;
    width:40px;height:40px;padding:0;border-radius:12px;cursor:pointer;
    border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;
    transition:background .2s ease,transform .2s ease;
  }
  .cf-nav-close:hover{background:rgba(255,255,255,.18);}
  .cf-nav-close:active{transform:scale(.96);}

  /* --- 메뉴 본문 --- */
  .cf-nav-body{display:block;flex:1;overflow-y:auto;padding:1rem .9rem .5rem;-webkit-overflow-scrolling:touch;}
  .main-nav .menu{flex-direction:column;align-items:stretch;gap:.4rem;padding:0;margin:0;}
  .main-nav .menu li{margin:0;}
  .main-nav .menu > li{display:flex;flex-wrap:wrap;align-items:stretch;position:static;}
  .main-nav .menu > li > a{flex:1;min-width:0;}
  .main-nav .menu a{
    display:flex;align-items:center;justify-content:space-between;gap:.75rem;
    padding:.9rem 1rem;font-size:.95rem;font-weight:700;color:var(--ink);
    background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-xs);
    transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
  }
  .main-nav .menu a:hover{color:var(--blue);border-color:#C6DDD1;box-shadow:0 6px 16px rgba(6,54,38,.08);transform:translateY(-1px);}
  .main-nav .current-menu-item > a,.main-nav .current_page_item > a{
    color:var(--blue-d);background:linear-gradient(135deg,#EDF5F0,#E1EFE7);border-color:#BFD9CC;box-shadow:0 4px 14px rgba(6,54,38,.1);
  }

  /* --- 하위 메뉴: hover가 없으니 버튼으로 편다 --- */
  .cf-submenu-toggle{
    display:grid;place-items:center;flex:none;width:48px;margin:0 0 0 .25rem;padding:0;cursor:pointer;
    border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--g600);
    box-shadow:var(--sh-xs);transition:background .2s ease,border-color .2s ease,color .2s ease;
  }
  .cf-submenu-icon{
    display:block;width:10px;height:10px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);transition:transform .25s ease;
  }
  .main-nav .menu > li.is-submenu-open > .cf-submenu-toggle{background:var(--blue-l);border-color:#BFD9CC;color:var(--blue);}
  .main-nav .menu > li.is-submenu-open > .cf-submenu-toggle .cf-submenu-icon{transform:rotate(-135deg) translateY(-2px);}
  .main-nav .sub-menu{display:none;width:100%;margin:.4rem 0 0;padding:0 0 0 .75rem;}
  .main-nav .menu li.is-submenu-open > .sub-menu{display:block;}
  .main-nav .sub-menu li{margin-bottom:.15rem;}
  .main-nav .sub-menu a{padding:.75rem .9rem;font-size:.88rem;font-weight:600;background:#F7FBF8;border-color:#E6EEE9;box-shadow:none;border-radius:11px;}
  .main-nav .sub-menu a:hover{transform:none;}

  /* --- 열릴 때 항목이 차례로 들어온다 --- */
  .main-nav.is-open .menu > li{animation:cf-menu-in .38s cubic-bezier(.22,1,.36,1) both;}
  .main-nav.is-open .menu > li:nth-child(1){animation-delay:.04s;}
  .main-nav.is-open .menu > li:nth-child(2){animation-delay:.07s;}
  .main-nav.is-open .menu > li:nth-child(3){animation-delay:.10s;}
  .main-nav.is-open .menu > li:nth-child(4){animation-delay:.13s;}
  .main-nav.is-open .menu > li:nth-child(5){animation-delay:.16s;}
  .main-nav.is-open .menu > li:nth-child(6){animation-delay:.19s;}
  .main-nav.is-open .menu > li:nth-child(7){animation-delay:.22s;}
  .main-nav.is-open .menu > li:nth-child(8){animation-delay:.25s;}
  @keyframes cf-menu-in{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:translateX(0);}}

  /* --- 서랍 하단 고정 버튼 --- */
  .cf-nav-actions{
    display:flex;gap:.6rem;margin-top:auto;flex-shrink:0;
    padding:.85rem .9rem calc(.95rem + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--line);background:#fff;
  }
  .cf-nav-action{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
    min-height:48px;border-radius:12px;font-size:.9rem;font-weight:700;text-align:center;
    border:1px solid var(--g300);background:#fff;color:var(--g700);
  }
  .cf-nav-action:hover{border-color:var(--blue);color:var(--blue);}
  .cf-nav-action--cta{background:var(--blue);border-color:var(--blue);color:#fff;}
  .cf-nav-action--cta:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff;}
}

@media (prefers-reduced-motion:reduce){
  .main-nav{transition:none;}
  .main-nav.is-open .menu > li{animation:none;}
}

body.admin-bar .site-header{top:32px;}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px;}
  body.admin-bar .main-nav{top:var(--cf-adminbar,46px);height:calc(100dvh - var(--cf-adminbar,46px));}
  body.admin-bar .cf-nav-backdrop{top:var(--cf-adminbar,46px);}
}

/* =========================================================
   4. 히어로 슬라이더 (doorweb-pet의 .dw-hero-slider 계약 재사용)
   슬라이드 이미지는 배경 전체에 깔리고, 글자는 스크림 위에 얹힌다.
   PC/모바일 이미지를 각각 받아 세로 화면에서 인물이 잘리는 걸 피한다.
   ========================================================= */
.hero{
  --hero-h:clamp(520px,58vw,660px);
  --hero-h-m:clamp(500px,118vw,640px);
  position:relative;overflow:hidden;min-height:var(--hero-h);
  background:
    radial-gradient(1100px 520px at 78% 18%,#E6F1EB 0%,rgba(230,241,235,0) 62%),
    linear-gradient(170deg,#F7FBF8 0%,#FFFFFF 62%);
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);z-index:3;}
.hero .dw-hero-slider{position:absolute;inset:0;}
.hero .dw-hero-slide{
  position:absolute;inset:0;display:flex;align-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .8s var(--ease),visibility .8s;
}
.hero .dw-hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;}

/* --- 배경 이미지 --- */
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
/* 영상은 뜨는 데 시간이 걸린다. 그동안 밝은 바탕이 비쳐 흰 글씨가 사라지지 않도록
   영상 슬라이드는 바탕부터 어둡게 깔아 둔다. */
.hero__bg.has-video{background:var(--navy);}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center;}
.hero__bg .bg-m{display:none;}
/* 배경 영상 — 사진 위에 덮이고, 재생이 실제로 시작될 때만 드러난다.
   자동재생이 막히면 is-playing이 안 붙으므로 밑의 사진이 그대로 남는다. */
.hero__bg .bg-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s var(--ease);pointer-events:none;
}
.hero__bg .bg-video.is-playing{opacity:1;}

/* 유튜브 배경.
   iframe 은 object-fit 이 안 먹어서 16:9 상자를 히어로보다 크게 키운 뒤 가운데로 당긴다.
   pointer-events 를 죽여 클릭이 히어로 버튼으로 그대로 통과하게 한다. */
.hero__bg .bg-yt{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  container-type:size;
  opacity:0;transition:opacity .8s var(--ease);
}
.hero__bg .bg-yt.is-playing{opacity:1;}
.hero__bg .bg-yt iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border:0;pointer-events:none;
  /* 구형 브라우저용 근사값 — 화면 크기 기준이라 히어로가 화면보다 낮으면 살짝 어긋난다. */
  width:100vw;height:56.25vw;min-width:177.78vh;min-height:100%;
}
/* 컨테이너 쿼리 단위를 읽는 브라우저에서는 화면이 아니라 **히어로 상자** 기준으로
   계산해 16:9 비율을 정확히 지킨다. vw/vh 로만 하면 상자가 화면보다 낮을 때
   가로·세로가 따로 늘어나 유튜브 화면에 검은 여백이 생긴다(실측 1.975:1). */
@supports (width: 1cqw) {
  .hero__bg .bg-yt iframe{
    width:max(100cqw, 177.7778cqh);
    height:max(56.25cqw, 100cqh);
    min-width:0;min-height:0;
  }
}
.hero[data-fx="zoom"] .dw-hero-slide .hero__bg img{transform:scale(1.07);transition:transform 7s linear;}
.hero[data-fx="zoom"] .dw-hero-slide.is-active .hero__bg img{transform:scale(1);}

/* --- 스크림: 글자가 놓이는 쪽만 덮는다 --- */
.hero__scrim{position:absolute;inset:0;z-index:1;}
.dw-hero-slide .hero__scrim{
  background:linear-gradient(90deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.92) 30%,
    rgba(255,255,255,.62) 52%,
    rgba(255,255,255,.10) 78%,
    rgba(255,255,255,0) 100%);
}
.dw-hero-slide.is-dark .hero__scrim{
  background:linear-gradient(90deg,
    rgba(8,20,16,.93) 0%,
    rgba(8,20,16,.82) 32%,
    rgba(8,20,16,.52) 56%,
    rgba(8,20,16,.16) 80%,
    rgba(8,20,16,0) 100%);
}

/* --- 텍스트 --- */
.hero__grid{position:relative;z-index:2;width:100%;padding-block:clamp(2.5rem,6vw,4rem) clamp(5rem,9vw,6.5rem);}
.hero__text{max-width:min(100%,600px);}
.hero__kick{display:inline-block;font-size:.85rem;font-weight:800;color:var(--blue);margin:0 0 1rem;}
.hero__kick::before{content:"";display:inline-block;width:14px;height:2px;background:currentColor;border-radius:2px;vertical-align:middle;margin-right:.55em;}
.hero__title{font-size:var(--fs-hero);line-height:1.24;color:var(--ink);margin:0 0 1.05rem;letter-spacing:-.035em;}
.hero__title em{font-style:normal;color:var(--blue);}
.hero__lede{font-size:clamp(.96rem,1.3vw,1.06rem);color:var(--g600);max-width:44ch;margin:0 0 1.9rem;line-height:1.8;}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;}
.hero__play{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:.94rem;color:var(--ink);}
.hero__play span.ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--g200);color:var(--blue);box-shadow:var(--sh-xs);transition:.2s var(--ease);}
.hero__play:hover{color:var(--blue);}
.hero__play:hover span.ico{background:var(--blue);color:#fff;border-color:var(--blue);transform:scale(1.06);}
.hero__hint{margin:1.6rem 0 0;font-size:.8rem;color:var(--g600);max-width:46ch;line-height:1.6;}

/* --- 어두운 슬라이드 --- */
.dw-hero-slide.is-dark .hero__title{color:#fff;}
.dw-hero-slide.is-dark .hero__title em{color:#7FC9A8;}
.dw-hero-slide.is-dark .hero__lede{color:rgba(234,244,239,.85);}
.dw-hero-slide.is-dark .hero__kick{color:#86C4A6;}
.dw-hero-slide.is-dark .hero__hint{color:rgba(234,244,239,.5);}
.dw-hero-slide.is-dark .hero__play{color:#fff;}
.dw-hero-slide.is-dark .hero__play span.ico{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff;}
.dw-hero-slide.is-dark .hero__play:hover span.ico{background:#fff;color:var(--blue);}

/* --- 모바일: 세로 이미지로 교체하고 스크림을 전면 베일로 --- */
@media (max-width:820px){
  .hero{min-height:var(--hero-h-m);}
  .hero .dw-hero-slider{position:static;}
  .hero .dw-hero-slide{position:absolute;}
  .hero .dw-hero-slide.is-active{position:relative;min-height:var(--hero-h-m);}
  .hero__bg .bg-pc{display:none;}
  .hero__bg .bg-m{display:block;}
  .hero__grid{padding-block:2.6rem 5rem;}
  .hero__text{max-width:none;}
  .hero__lede{max-width:52ch;}
  /* 세로 화면은 글자가 화면 폭을 다 쓰므로 위쪽을 두껍게 덮고,
     아래로 갈수록 열어 사진이 보이게 한다. 완전히 덮으면 배경을 넣은 의미가 없다. */
  .dw-hero-slide .hero__scrim{
    background:linear-gradient(180deg,
      rgba(255,255,255,.93) 0%,
      rgba(255,255,255,.88) 42%,
      rgba(255,255,255,.66) 74%,
      rgba(255,255,255,.52) 100%);
  }
  .dw-hero-slide.is-dark .hero__scrim{
    background:linear-gradient(180deg,
      rgba(8,20,16,.9) 0%,
      rgba(8,20,16,.82) 42%,
      rgba(8,20,16,.6) 74%,
      rgba(8,20,16,.48) 100%);
  }
  .hero__title{letter-spacing:-.03em;}
}
@media (max-width:560px){
  .hero__lede{max-width:none;}
}
@media (max-width:480px){
  .hero__actions{gap:.7rem;}
}

/* --- 숫자형 슬라이더 내비 — ‹ 01 — 02 — 03 › --- */
.hero__nav{
  position:absolute;left:0;right:0;bottom:clamp(1.4rem,3vw,2.4rem);z-index:4;
  display:flex;align-items:center;gap:1rem;
}
.hero__nav .dw-hero-prev,.hero__nav .dw-hero-next{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--g200);background:rgba(255,255,255,.9);color:var(--g600);
  display:grid;place-items:center;cursor:pointer;padding:0;font-size:1.1rem;line-height:1;transition:.2s var(--ease);
}
.hero__nav .dw-hero-prev:hover,.hero__nav .dw-hero-next:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.dw-hero-dots{display:flex;align-items:center;gap:.55rem;}
.dw-hero-dot{
  border:0;background:none;padding:0 .1rem;cursor:pointer;
  font-family:var(--display);font-size:.94rem;font-weight:700;letter-spacing:.02em;
  color:var(--g600);transition:color .2s;
}
.dw-hero-dot + .dw-hero-dot{margin-left:1.4rem;position:relative;}
.dw-hero-dot + .dw-hero-dot::before{content:"";position:absolute;left:-1.15rem;top:50%;width:.85rem;height:1px;background:var(--g300);}
.dw-hero-dot.is-active{color:var(--ink);}

/* 어두운 슬라이드가 활성일 때 내비도 밝은 톤으로 (main.js가 클래스를 붙인다) */
.dw-hero-slider.is-dark-active .hero__nav .dw-hero-prev,
.dw-hero-slider.is-dark-active .hero__nav .dw-hero-next{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff;
}
.dw-hero-slider.is-dark-active .dw-hero-dot{color:rgba(255,255,255,.55);}
.dw-hero-slider.is-dark-active .dw-hero-dot.is-active{color:#fff;}
.dw-hero-slider.is-dark-active .dw-hero-dot + .dw-hero-dot::before{background:rgba(255,255,255,.4);}
@media (max-width:820px){.hero__nav{bottom:1.5rem;}}

/* =========================================================
   5. 우측 플로팅 배너 · 모바일 하단 바
   ========================================================= */
.floater{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:1px;width:84px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-lg);overflow:hidden;
}
.floater__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.32rem;
  padding:.8rem .35rem;background:#fff;color:var(--g600);
  font-size:.72rem;font-weight:700;line-height:1.25;text-align:center;border:0;cursor:pointer;
}
.floater__item:hover{background:var(--blue-l);color:var(--blue-d);}
.floater__item--cta{background:var(--blue);color:#fff;}
.floater__item--cta:hover{background:var(--blue-d);color:#fff;}
.floater__top{background:var(--g50);color:var(--g500);padding:.5rem;font-size:.68rem;font-family:var(--display);}
@media (max-width:1180px){.floater{display:none;}}

.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:repeat(3,1fr);background:var(--navy);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bar a{display:flex;flex-direction:column;align-items:center;gap:.18rem;padding:.6rem .3rem;color:#CBD6D0;font-size:.72rem;font-weight:700;}
.mobile-bar a:hover{color:#fff;}
.mobile-bar a.is-cta{background:var(--blue);color:#fff;}
@media (max-width:1180px){.mobile-bar{display:grid;}body{padding-bottom:62px;}}

/* =========================================================
   6. WHY — 차별점 카드 4종
   ========================================================= */
.pillar{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.6vw,2rem);text-align:center;height:100%;
  transition:transform .22s var(--ease),box-shadow .22s,border-color .22s;
}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:#CBE0D3;}
.pillar__ico{
  position:relative;display:grid;place-items:center;width:72px;height:72px;margin:0 auto 1.2rem;
  border-radius:22px;color:var(--point);
  /* 단색 대신 옅은 그라데이션 + 안쪽 테두리. 평평한 칩보다 깊이가 생긴다. */
  background:linear-gradient(150deg,var(--point-softer) 0%,var(--point-soft) 100%);
  box-shadow:inset 0 0 0 1px rgba(6,54,38,.07),0 1px 2px rgba(19,32,25,.04);
  transition:background .24s var(--ease),color .24s var(--ease),box-shadow .24s var(--ease),transform .24s var(--ease);
}
.pillar:hover .pillar__ico{
  background:linear-gradient(150deg,var(--point-l) 0%,var(--point) 100%);
  color:#fff;transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 8px 18px rgba(6,54,38,.22);
}
.pillar__no{display:block;font-family:var(--display);font-size:.82rem;font-weight:800;letter-spacing:.12em;color:var(--blue);margin-bottom:.7rem;}
.pillar__title{font-size:1.08rem;margin:0 0 .6rem;color:var(--ink);}
.pillar__list{list-style:none;margin:0;padding:0;}
.pillar__list li{color:var(--g600);font-size:.9rem;line-height:1.7;margin:.35em 0;}
/* 기획서의 3가지 특별함. 항목이 길어 가운데 정렬이 읽기 나쁘다. 왼쪽으로 풀고
   번호는 카드 모서리의 큰 고스트 숫자로 뺐다. */
.pillar--big{text-align:left;padding-top:clamp(1.6rem,3vw,2.2rem);}
.pillar--big .pillar__no{position:absolute;top:.5rem;right:1rem;margin:0;line-height:1;letter-spacing:0;
  font-size:clamp(2.4rem,5vw,3.4rem);color:var(--point-soft);pointer-events:none;}
.pillar--big .pillar__title{position:relative;font-size:1.06rem;line-height:1.45;margin-bottom:.9rem;padding-right:2.6rem;word-break:keep-all;}
.pillar--big .pillar__list > li{position:relative;padding-left:1.05em;word-break:keep-all;}
.pillar--big .pillar__list > li::before{content:"";position:absolute;left:0;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--point);}
.pillar--big .pillar__list b{display:block;color:var(--ink);font-weight:800;}
.pillar__sub{list-style:none;margin:.2rem 0 .4rem;padding:0;}
.pillar__sub li{position:relative;padding-left:.9em;color:var(--g600);font-size:.87rem;line-height:1.65;}
.pillar__sub li::before{content:"";position:absolute;left:0;top:.72em;width:4px;height:1px;background:var(--g400);}
.pillar--left{text-align:left;}
.pillar--left .pillar__ico{margin-inline:0;}
.pillar--left .pillar__list li{position:relative;padding-left:1.15em;}
.pillar--left .pillar__list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--blue);}
.section--dark .pillar{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);}
.section--dark .pillar:hover{border-color:rgba(126,178,255,.55);box-shadow:none;}
.section--dark .pillar__list li{color:#A6B4AC;}
.section--dark .pillar__ico{background:rgba(127,201,168,.16);color:#7FC9A8;}

/* =========================================================
   6.5 CORE — 3가지 핵심 경쟁력 (사진 + 글, 좌우 번갈아)
   ========================================================= */
.section--core{background:#fff;}
.cores{display:grid;gap:clamp(2.4rem,5vw,4.2rem);}
.core{
  display:grid;grid-template-columns:1.02fr .98fr;align-items:center;
  gap:clamp(1.6rem,4vw,3.6rem);
}
/* 짝수 번째는 사진을 오른쪽으로 — grid-column으로 순서만 바꾼다.
   DOM 순서는 그대로라 스크린리더와 탭 순서가 흐트러지지 않는다. */
.core:nth-child(even) .core__media{grid-column:2;grid-row:1;}
.core:nth-child(even) .core__body{grid-column:1;grid-row:1;}

.core__media{
  position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,#0A3A2A,#0E5C40);
  box-shadow:0 24px 48px -28px rgba(19,42,32,.4);
}
.core__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.core:hover .core__media img{transform:scale(1.04);}

.core__body{min-width:0;}
.core__no{
  display:block;font-family:var(--display);font-size:clamp(2rem,4.4vw,3.1rem);
  font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--point);opacity:.22;
}
.core__en{
  display:block;margin-top:.5rem;font-family:var(--display);font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--g500);
}
.core__title{
  font-size:clamp(1.22rem,2.2vw,1.72rem);line-height:1.45;letter-spacing:-.025em;
  color:var(--ink);margin:.6rem 0 1.1rem;
}
.core__list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.62rem;}
.core__list li{display:flex;align-items:flex-start;gap:.6rem;font-size:clamp(.9rem,1.1vw,.98rem);color:var(--g600);line-height:1.65;}
.core__list svg{flex:none;margin-top:.28em;color:var(--point);}
.core__more{align-self:start;}

@media (max-width:820px){
  .core{grid-template-columns:1fr;gap:1.3rem;}
  /* 한 열로 접히면 좌우 교차가 의미 없어지므로 원래 순서로 되돌린다 */
  .core:nth-child(even) .core__media,
  .core:nth-child(even) .core__body{grid-column:1;grid-row:auto;}
  .core__media{aspect-ratio:16/10;}
}

/* =========================================================
   7. PROGRAM — 좌측 소개 + 우측 이미지 카드 4종
   ========================================================= */
/* 제목이 위로 올라가면서 카드가 폭을 전부 쓴다.
   좌우로 나눠 쓸 때보다 넓으니 4열을 더 좁은 폭까지 유지한다. */
.pcards{display:grid;gap:clamp(.9rem,1.8vw,1.4rem);grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:900px){.pcards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.pcards{grid-template-columns:1fr;}}
.pcard{
  position:relative;display:block;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(19,32,25,.04);
  transition:transform .24s var(--ease),box-shadow .24s;
}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);}

/* 미디어: 레퍼런스대로 정사각. 사진이 없어도 그라디언트가 자리를 지킨다. */
.pcard__media{position:relative;aspect-ratio:1/1;background:linear-gradient(150deg,#0A3A2A,#0E5C40);overflow:hidden;}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.pcard:hover .pcard__media img{transform:scale(1.06);}
/* 사진이 밝게 나와도 흰 영문이 읽히도록 상단에만 스크림을 깐다. */
.pcard__media::after{
  content:"";position:absolute;inset:0 0 auto;height:48%;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,32,23,.70) 0%,rgba(8,32,23,.56) 30%,rgba(8,32,23,0) 100%);
}
.pcard__kick{
  position:absolute;left:1.05rem;top:.95rem;z-index:1;
  color:#fff;font-size:.72rem;font-weight:700;line-height:1.35;
  letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(8,32,23,.55);
}
.pcard__ico{
  position:absolute;left:50%;top:-28px;transform:translateX(-50%);z-index:2;
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--point);color:#fff;box-shadow:var(--sh-blue);border:3px solid #fff;
}
.pcard__body{
  position:relative;padding:2.7rem 1.1rem 1.6rem;text-align:center;
  background:linear-gradient(180deg,#fff 0%,var(--point-softer,#F3F7F5) 100%);
}
.pcard__title{font-size:1.03rem;margin:0 0 .7rem;color:var(--ink);}
/* 타이틀 아래 짧은 구분선 */
.pcard__title::after{
  content:"";display:block;width:26px;height:2px;margin:.7rem auto 0;
  background:var(--point);opacity:.55;border-radius:2px;
}
.pcard__desc{font-size:.86rem;color:var(--g600);margin:0;line-height:1.65;}
@media (max-width:520px){
  .pcard__kick{font-size:.78rem;left:1.2rem;top:1.1rem;}
}

/* 아이콘 타일 (재활 목적) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;}
.tile{
  display:flex;flex-direction:column;align-items:center;gap:1.15rem;text-align:center;
  padding:2.1rem 1.1rem 1.8rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);
  font-weight:700;font-size:1rem;color:var(--ink);transition:.2s var(--ease);
}
.tile:hover{
  border-color:var(--tile-fg,var(--blue));color:var(--tile-fg,var(--blue-d));
  transform:translateY(-3px);box-shadow:var(--sh-sm);
}
/* 아이콘 72px + 좌우 여백 20px = 112px 원형 받침 */
.tile__ico{
  display:grid;place-items:center;width:112px;height:112px;border-radius:50%;
  background:var(--tile-puck,var(--blue-l));color:var(--tile-fg,var(--blue));
  transition:.2s var(--ease);
}
.tile__ico .cf-ico{width:72px;height:72px;}
.tile:hover .tile__ico{transform:scale(1.04);}

/* 타일별 색 — 순서가 바뀌면 색도 따라 바뀐다 */
.tiles .tile:nth-child(1){--tile-puck:#e2f1e9;--tile-fg:#1c7a5e;}
.tiles .tile:nth-child(2){--tile-puck:#dde9f7;--tile-fg:#2f6fb5;}
.tiles .tile:nth-child(3){--tile-puck:#fbe9c8;--tile-fg:#bf881c;}
.tiles .tile:nth-child(4){--tile-puck:#e7e2fb;--tile-fg:#6b4bd0;}
.tiles .tile:nth-child(5){--tile-puck:#d9efe5;--tile-fg:#2f9e7d;}
@media (max-width:600px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tile{padding:1.5rem .8rem 1.3rem;gap:.85rem;font-size:.92rem;}
  .tile__ico{width:84px;height:84px;}
  .tile__ico .cf-ico{width:54px;height:54px;}
}

/* 바로가기 3분할 */
/* 칸 사이 1px 간격을 회색으로 비쳐 보이게 하던 방식 대신, 바탕은 기본색으로 두고
   칸 사이 구분선만 border로 긋는다. 섹션 배경이 무엇이든 그대로 얹힌다. */
/* 3개 바로가기 — 아이콘 타일 + 제목 + 설명 + 화살표.
   예전의 칸막이만 있는 평평한 줄에서 카드로 바꿨다. */
.qlinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.4rem);}
.qlink{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(.9rem,1.6vw,1.25rem);
  padding:clamp(1.3rem,2.3vw,1.8rem) clamp(1.2rem,2.2vw,1.7rem);
  background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(19,32,25,.04);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease);
}
/* 왼쪽 포인트 바 — 아래에서 위로 차오른다. */
.qlink::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--point);
  transform:scaleY(0);transform-origin:bottom;transition:transform .3s var(--ease);
}
.qlink:hover,.qlink:focus-visible{
  transform:translateY(-4px);border-color:transparent;
  box-shadow:0 18px 34px -18px rgba(19,42,32,.28),0 2px 6px rgba(19,42,32,.05);
}
.qlink:hover::before,.qlink:focus-visible::before{transform:scaleY(1);}

.qlink__ico{
  display:grid;place-items:center;width:clamp(46px,4.4vw,56px);aspect-ratio:1;flex:none;
  border-radius:16px;color:var(--point);
  background:linear-gradient(150deg,var(--point-softer) 0%,var(--point-soft) 100%);
  box-shadow:inset 0 0 0 1px rgba(6,54,38,.07);
  transition:background .24s var(--ease),color .24s var(--ease),box-shadow .24s var(--ease);
}
.qlink:hover .qlink__ico{
  background:linear-gradient(150deg,var(--point-l) 0%,var(--point) 100%);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 8px 16px -6px rgba(6,54,38,.42);
}
.qlink__body{min-width:0;}
/* 제목이 한 줄인 카드와 두 줄인 카드가 섞여도 같은 줄에서 글머리가 맞도록. */
@media (min-width:901px){
  .qlink strong{min-height:calc(2 * 1.4em);}
  .qlink__body > span{min-height:calc(2 * 1.5em);}
}
.qlink strong{display:block;font-size:clamp(.97rem,1.15vw,1.06rem);font-weight:800;letter-spacing:-.02em;line-height:1.4;/* 한글은 단어 중간에서 끊기면 읽기 나쁘다. 어절 단위로만 줄바꿈. */word-break:keep-all;}
.qlink span span,.qlink__body > span{display:block;font-size:.83rem;color:var(--g500);font-weight:600;margin-top:.3rem;line-height:1.5;}
.qlink__arrow{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--g100);color:var(--point);
  transition:background .24s var(--ease),color .24s var(--ease),transform .24s var(--ease);
}
.qlink:hover .qlink__arrow{background:var(--point);color:#fff;transform:translateX(3px);}

@media (max-width:900px){.qlinks{grid-template-columns:1fr;}}
@media (max-width:420px){
  .qlink{grid-template-columns:auto 1fr;row-gap:.9rem;}
  /* 좁아지면 화살표는 아이콘 아래 칸으로 내려가지 말고 그냥 숨긴다 — 카드 전체가 링크다. */
  .qlink__arrow{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .qlink,.qlink__ico,.qlink__arrow,.qlink::before{transition:none;}
  .qlink:hover{transform:none;}
}

/* =========================================================
   8. PROCESS — 원형 5단계
   ========================================================= */
.section--process{position:relative;overflow:hidden;background:#fff;}
/* 배경 물결. 아주 옅게 깔아 흰 배경이 밋밋해지지 않을 정도만. */
.process__waves{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:130%;min-width:1100px;height:100%;pointer-events:none;
  fill:var(--point-softer);stroke:var(--point-soft);stroke-width:1.2;opacity:.85;
}
.process__waves path:last-child{fill:none;}
.section--process > .container{position:relative;z-index:1;}

/* 헤더 아래 짧은 그라디언트 바 */
.sec-rule{
  display:block;width:64px;height:5px;margin:1.5rem auto 0;border-radius:99px;
  background:linear-gradient(90deg,var(--point-l) 0%,var(--point) 100%);
}

.flow{display:flex;align-items:flex-start;justify-content:center;gap:.2rem;flex-wrap:nowrap;}
.flow__step{flex:1 1 0;min-width:0;text-align:center;}

/* 원 — 흰 바탕 + 아주 옅은 링 + 넓게 퍼지는 그림자 */
.flow__ring{
  position:relative;display:grid;place-items:center;
  width:clamp(104px,10.6vw,156px);aspect-ratio:1;margin:0 auto 1.5rem;
  border-radius:50%;background:#fff;color:var(--point);
  box-shadow:0 0 0 1px rgba(6,54,38,.05),0 18px 38px -16px rgba(19,42,32,.16),0 2px 8px rgba(19,42,32,.04);
  transition:background .28s var(--ease),color .28s var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease);
}
.flow__ico{display:grid;place-items:center;}
.flow__ico svg{width:clamp(40px,4.4vw,64px);height:auto;}

/* 번호 배지 — 원의 위쪽 테두리에 걸친다 */
.flow__num{
  position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:clamp(34px,4vw,56px);aspect-ratio:1;border-radius:50%;
  background:var(--point-softer);color:var(--g500);
  font-family:var(--display);font-size:clamp(.72rem,1vw,.92rem);font-weight:700;letter-spacing:.04em;
  box-shadow:0 0 0 1px rgba(6,54,38,.05),0 4px 10px -4px rgba(19,42,32,.18);
  transition:background .28s var(--ease),color .28s var(--ease),box-shadow .28s var(--ease);
}

.flow__name{font-size:clamp(.98rem,1.35vw,1.2rem);font-weight:800;color:var(--ink);margin:0 0 .4rem;letter-spacing:-.02em;}
.flow__desc{font-size:clamp(.79rem,.92vw,.86rem);color:var(--g500);margin:0;line-height:1.6;letter-spacing:-.01em;}

/* 연결선 — 점선 두 토막 사이에 화살표 원 */
.flow__arrow{
  flex:0 1 auto;min-width:0;align-self:flex-start;
  display:flex;align-items:center;gap:.34rem;
  margin-top:calc(clamp(104px,10.6vw,156px) / 2);transform:translateY(-50%);
  color:var(--g400);
}
.flow__arrow::before,.flow__arrow::after{
  content:"";flex:1 1 auto;min-width:8px;height:2px;border-radius:2px;
  background-image:radial-gradient(circle,var(--g300) .9px,transparent 1.1px);
  background-size:6px 2px;background-repeat:repeat-x;
}
.flow__arrow svg{
  flex:none;box-sizing:content-box;width:16px;height:16px;padding:calc((clamp(30px,3.2vw,40px) - 16px) / 2);
  border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px rgba(6,54,38,.05),0 4px 12px -6px rgba(19,42,32,.22);
}

/* 활성 상태 — 기본은 첫 단계, 마우스가 올라간 단계로 옮겨간다 */
.flow__step:first-child .flow__ring,
.flow__step:hover .flow__ring,
.flow__step:focus-within .flow__ring{
  background:linear-gradient(150deg,var(--point-l) 0%,var(--point-d) 100%);color:#fff;
  box-shadow:0 0 0 6px rgba(6,54,38,.06),0 22px 44px -18px rgba(6,54,38,.5);
  transform:translateY(-4px);
}
.flow__step:first-child .flow__num,
.flow__step:hover .flow__num,
.flow__step:focus-within .flow__num{
  background:var(--point);color:#fff;
  box-shadow:0 0 0 4px #fff,0 6px 14px -5px rgba(6,54,38,.45);
}
/* :has()를 읽는 브라우저에서는 다른 단계에 올렸을 때 첫 단계가 원래대로 돌아간다 */
.flow:has(.flow__step:hover) .flow__step:first-child:not(:hover) .flow__ring,
.flow:has(.flow__step:focus-within) .flow__step:first-child:not(:focus-within) .flow__ring{
  background:#fff;color:var(--point);
  box-shadow:0 0 0 1px rgba(6,54,38,.05),0 18px 38px -16px rgba(19,42,32,.16),0 2px 8px rgba(19,42,32,.04);
  transform:none;
}
.flow:has(.flow__step:hover) .flow__step:first-child:not(:hover) .flow__num,
.flow:has(.flow__step:focus-within) .flow__step:first-child:not(:focus-within) .flow__num{
  background:var(--point-softer);color:var(--g500);
  box-shadow:0 0 0 1px rgba(6,54,38,.05),0 4px 10px -4px rgba(19,42,32,.18);
}

/* 5개가 한 줄에 안 들어가면 랩. 화살표는 빼고 번호 배지가 순서를 대신한다. */
@media (max-width:900px){
  .flow{flex-wrap:wrap;justify-content:center;gap:2rem 1.4rem;}
  .flow__step{flex:0 0 calc(33.333% - 1rem);}
  .flow__arrow{display:none;}
}
@media (max-width:560px){
  .flow{gap:1.8rem 1rem;}
  .flow__step{flex:0 0 calc(50% - .6rem);}
}
@media (prefers-reduced-motion:reduce){
  .flow__ring{transition:none;}
  .flow__step:first-child .flow__ring,.flow__step:hover .flow__ring{transform:none;}
}

/* =========================================================
   9. REVIEW — 후기 카드 3열 + 아카이브 매스너리
   ========================================================= */
.sec-head--split{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;}
.sec-head--split .sec-lede{margin-bottom:0;}
/* 가운데 정렬 머리글 아래 버튼 — .btn이 inline-flex라 text-align:center로 가운데에 선다. */
.sec-head__cta{margin-top:1.3rem;}

.rcards{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
.rcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.2rem,2.4vw,1.7rem);transition:.22s var(--ease);height:100%;}
.rcard:hover{box-shadow:var(--sh);transform:translateY(-4px);}
.rcard__top{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;}
.rcard__stars{color:#F5A623;font-size:.95rem;letter-spacing:.1em;}
.rcard__score{font-family:var(--display);font-weight:700;font-size:.86rem;color:var(--g500);}
.rcard__text{font-size:.93rem;color:var(--g700);line-height:1.75;margin:0 0 1.1rem;}
.rcard__by{font-size:.84rem;color:var(--g500);font-weight:600;margin:0;}

/* 후기 카드.
   예전에는 columns 메이슨리였다. 두 가지가 문제였다 —
   (1) 읽는 순서가 세로로 흘러 가로로 읽는 사람과 어긋난다,
   (2) 캡처 이미지 높이가 제각각이라 줄이 안 맞고, 정작 주인공인 글이 밀린다.
   격자로 바꾸고 이미지 비율을 고정해 카드 높이를 맞춘다. */
.reviews{display:grid;gap:clamp(1rem,2.2vw,1.5rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));align-items:stretch;}
.review{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.22s var(--ease);}
.review:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:#CBE0D3;}
/* 캡처는 근거지 주인공이 아니다. 비율을 묶어 카드마다 같은 높이만 차지하게 한다. */
.review__shot{display:block;aspect-ratio:16/10;border-bottom:1px solid var(--line);background:var(--g50);overflow:hidden;}
.review__shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease);}
.review:hover .review__shot img{transform:scale(1.04);}
/* 글이 주인공. 남는 세로 공간은 본문이 가져가고 작성자 줄은 항상 바닥에 붙는다. */
.review__body{position:relative;display:flex;flex-direction:column;flex:1;padding:1.2rem 1.3rem 1.3rem;}
/* 따옴표는 장식이라 마크업이 아니라 배경으로 둔다. */
.review__body::before{content:"\201C";position:absolute;top:.35rem;right:.9rem;
  font-family:var(--display);font-size:3.4rem;line-height:1;color:var(--point-soft);pointer-events:none;}
.review__stars{position:relative;font-size:1rem;margin-bottom:.6rem;}
/* 채운 별과 빈 별을 함께 그린다. 채운 것만 있으면 4점이 4점 만점처럼 보인다. */
.stars{display:inline-flex;line-height:1;letter-spacing:.08em;}
.stars__on{color:#F5A623;}
.stars__off{color:var(--g300);}
.entry-stars{margin-top:.6rem;font-size:1.05rem;}
.entry-meta__writer{font-weight:700;color:var(--g700);}
/* 5줄로 잘라 카드 높이를 맞춘다. 긴 후기 하나 때문에 줄 전체가 늘어나면
   짧은 후기 카드에 빈 공간만 남는다. 전문은 카드를 눌러 들어가면 된다. */
.review__text{position:relative;font-size:.94rem;line-height:1.72;color:var(--g700);margin:0 0 1rem;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;}
.review__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding-top:.85rem;border-top:1px solid var(--g100);font-size:.84rem;font-weight:700;color:var(--g600);}
.review__foot span:last-child{flex:none;padding:.25em .7em;border-radius:var(--r-pill);
  background:var(--point-softer);color:var(--point);font-size:.78rem;}

/* =========================================================
   10. STATS 밴드 · CTA 밴드
   ========================================================= */
.statband{background:var(--grad);color:#fff;padding-block:clamp(2.2rem,4.5vw,3.2rem);}
.statband__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);}
@media (max-width:820px){.statband__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem;}}
.statband__item{display:flex;align-items:center;gap:.9rem;justify-content:center;position:relative;}
.statband__item + .statband__item::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:44px;background:rgba(255,255,255,.22);
}
@media (max-width:820px){.statband__item:nth-child(odd)::before{display:none;}}
.statband__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.16);flex:none;}
.statband__n{display:block;font-family:var(--display);font-size:clamp(1.35rem,2.6vw,1.85rem);font-weight:800;line-height:1.1;color:#fff;}
.statband__l{display:block;font-size:.83rem;color:rgba(255,255,255,.78);font-weight:600;}

.ctaband{position:relative;isolation:isolate;background:var(--navy-d);color:#C7D3CC;overflow:hidden;padding-block:clamp(2.8rem,6vw,4.4rem);}
.ctaband__bg{position:absolute;inset:0;z-index:-2;}
.ctaband__bg img{width:100%;height:100%;object-fit:cover;}
.ctaband::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,rgba(11,20,32,.94) 0%,rgba(11,20,32,.78) 46%,rgba(11,20,32,.42) 100%);}
.ctaband__kick{font-size:.88rem;color:#86C4A6;font-weight:700;margin:0 0 .5rem;}
.ctaband h2{font-size:var(--fs-h2);color:#fff;margin:0 0 .7rem;}
.ctaband p{margin:0 0 1.8rem;color:#A9B7AF;}
.ctaband__btns{display:flex;flex-wrap:wrap;gap:.7rem;}

/* =========================================================
   11. 프로그램 아코디언 · 단계 · 표
   ========================================================= */
.prog{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;}
.prog + .prog{margin-top:.85rem;}
.prog__head{display:flex;align-items:center;gap:1rem;width:100%;padding:1.15rem clamp(1rem,3vw,1.7rem);background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:var(--ink);}
.prog__head:hover{background:var(--blue-ll);}
.prog__no{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:none;background:var(--blue-l);color:var(--blue-d);font-family:var(--display);font-weight:800;font-size:.98rem;}
.prog.is-open .prog__no{background:var(--blue);color:#fff;}
.prog__name{flex:1;font-size:1.08rem;font-weight:800;letter-spacing:-.02em;}
.prog__toggle{flex:none;color:var(--g400);transition:transform .25s var(--ease);}
.prog.is-open .prog__toggle{transform:rotate(180deg);color:var(--blue);}
.prog__body{padding:0 clamp(1rem,3vw,1.7rem) 1.5rem;display:none;}
.prog.is-open .prog__body{display:block;animation:cf-fade .3s var(--ease);}
@keyframes cf-fade{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.prog__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem;padding:0;list-style:none;}
/* 기획서가 항목마다 이미지를 요구한다. 이미지가 있을 때만 두 칸으로 나눈다. */
.prog__grid{display:grid;gap:clamp(1rem,2.4vw,1.6rem);}
@media (min-width:760px){
  .prog__grid--img{grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:start;}
}
.prog__media{margin:0;border-radius:var(--r);overflow:hidden;background:var(--g100);}
.prog__media img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;}
.prog__desc{color:var(--g600);margin:0;font-size:.95rem;}
.prog__desc p:last-child{margin-bottom:0;}

.steps{counter-reset:cf-step;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.25rem;}
.step::before{counter-increment:cf-step;content:counter(cf-step,decimal-leading-zero);font-family:var(--display);font-size:1.9rem;font-weight:800;color:var(--blue-l);display:block;line-height:1;margin-bottom:.5rem;}
.step h4{font-size:1.03rem;margin:0 0 .45rem;}
.step p{color:var(--g600);font-size:.9rem;margin:0;}

/* 초기 → 중기 → 후기. 기획서처럼 사이에 화살표를 넣어 순서를 드러낸다.
   auto-fit 은 몇 칸인지 CSS가 알 수 없어 화살표 방향을 정할 수 없다.
   그래서 칸 수를 명시한다 — 좁으면 1칸(아래 방향), 넓으면 3칸(오른쪽 방향). */
.phases{--phase-gap:clamp(1.5rem,2.6vw,2.4rem);display:grid;gap:var(--phase-gap);grid-template-columns:1fr;}
@media (min-width:820px){.phases{grid-template-columns:repeat(3,minmax(0,1fr));}}
.phase:not(:last-child)::after{
  content:"";position:absolute;z-index:1;width:.5em;height:.5em;font-size:1.5rem;
  border-top:3px solid var(--point-l);border-right:3px solid var(--point-l);
  left:50%;bottom:calc(var(--phase-gap) / -2);transform:translate(-50%,50%) rotate(135deg);
}
@media (min-width:820px){
  .phase:not(:last-child)::after{left:auto;bottom:auto;top:50%;right:calc(var(--phase-gap) / -2);transform:translate(50%,-50%) rotate(45deg);}
}
.phase{position:relative;padding:1.5rem 1.3rem;border-radius:var(--r);color:#fff;background:linear-gradient(145deg,#062A1E,#0B4A34);}
.phase:nth-child(2){background:linear-gradient(145deg,#0E5C40,#14805A);}
.phase:nth-child(3){background:linear-gradient(145deg,#127A5B,#1BA97C);}
.phase b{display:block;font-size:1.06rem;margin-bottom:.15rem;}
.phase em{display:block;font-style:normal;font-size:.8rem;opacity:.75;margin-bottom:.75rem;}
.phase p{margin:0;font-size:.9rem;color:rgba(255,255,255,.92);}

.cf-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;}
table.cf-table{width:100%;border-collapse:collapse;min-width:560px;}
table.cf-table th,table.cf-table td{padding:1rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);font-size:.94rem;}
table.cf-table thead th{background:var(--blue);color:#fff;font-weight:700;font-size:.89rem;border-bottom:0;}
table.cf-table tbody tr:last-child td{border-bottom:0;}
table.cf-table tbody tr:hover{background:var(--blue-ll);}
table.cf-table td:first-child{font-weight:800;color:var(--blue-d);}

/* =========================================================
   12. 멤버 · 지점 · 갤러리 슬라이더
   ========================================================= */
.member{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-align:center;transition:.22s var(--ease);}
/* 카드 전체를 누를 수 있게. 링크 자체를 카드만큼 키우는 대신 빈 가상요소를
   카드 위에 덮는다 — 이렇게 해야 링크의 이름이 "홍길동" 한 줄로 남는다.
   카드를 통째로 <a> 로 감싸면 화면낭독기가 직함·사진 설명까지 링크 이름으로
   한꺼번에 읽어 버린다. */
.member__link{color:inherit;}
.member__link::after{content:"";position:absolute;inset:0;border-radius:inherit;}
.member__link:hover{color:var(--point);}
/* 키보드 이동 때 초점이 이름 글자에만 가늘게 잡히면 어디인지 안 보인다. */
.member:focus-within{outline:2px solid var(--point);outline-offset:3px;}
.member__link:focus-visible{outline:none;}
.member:hover{transform:translateY(-4px);box-shadow:var(--sh);}
/* 사진은 흐름에서 빼서 절대배치한다. 흐름에 두면 이미지의 원래 비율(3:4)이
   칸 높이를 밀어 올려 aspect-ratio 가 무시된다. 상자는 4:5, 사진(2:3)은 위쪽 기준으로 아래가 잘린다.
   grid/place-items 는 사진이 없을 때 대체 아이콘을 가운데 두려고 남겨 둔다. */
.member__photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--g100);display:grid;place-items:center;color:var(--g400);}
.member__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.member__body{padding:1.1rem 1rem 1.4rem;}
.member__role{font-size:.79rem;font-weight:700;color:var(--blue);}
.member__name{font-size:1.12rem;font-weight:800;margin:.25rem 0 0;}
.member__line{margin:.35rem 0 0;font-size:.86rem;color:var(--g600);line-height:1.5;}
.member__tags{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem;}
.member__tags li{font-size:.72rem;font-weight:700;padding:.28em .7em;border-radius:var(--r-pill);background:var(--blue-l);color:var(--blue-d);}

.branch{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:start;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.3rem,3vw,2.2rem);}
@media (max-width:860px){.branch{grid-template-columns:1fr;}}
.branch__badge{display:inline-flex;align-items:center;gap:.4em;padding:.34em .85em;border-radius:var(--r-pill);background:var(--blue);color:#fff;font-size:.83rem;font-weight:800;margin-bottom:.85rem;}
.branch__name{font-size:var(--fs-h3);margin:0 0 .9rem;}
.branch__meta{list-style:none;margin:0 0 1.3rem;padding:0;}
.branch__meta li{display:flex;gap:.7rem;align-items:flex-start;padding:.58rem 0;border-bottom:1px dashed var(--g200);font-size:.94rem;color:var(--g700);}
.branch__meta li:last-child{border-bottom:0;}
.branch__meta svg{flex:none;color:var(--blue);margin-top:.2em;}
.branch__meta b{display:block;font-size:.77rem;color:var(--g500);font-weight:700;margin-bottom:.1rem;}
.branch__actions{display:flex;flex-wrap:wrap;gap:.5rem;}
.branch__map{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--g100);border:1px solid var(--line);}
.branch__maplinks{margin:.65rem 0 0;font-size:.86rem;}
.branch__maplinks a{display:inline-flex;align-items:center;gap:.35rem;color:var(--point);font-weight:700;}
.branch__maplinks a:hover{text-decoration:underline;}
/* 사진은 지도 아래 보조 자리. 지도보다 낮게 잡아 주인공을 뺏지 않는다. */
.branch__photos{margin-top:1rem;}
.about__gallery{margin-top:1.6rem;}
.about__gallery .slider__slide img{aspect-ratio:16/9;object-fit:cover;}
.branch__photos .slider__slide img{aspect-ratio:16/10;object-fit:cover;}
.branch__map iframe{width:100%;height:100%;border:0;display:block;}
/* 카카오맵 퍼가기(roughmap)는 자기 마크업에 고정 폭과 테두리를 달고 온다.
   폭은 우리가 정하고(main.js 가 실측해 넘김) 높이는 내용이 정하게 둔다.
   카카오 로고 바는 출처 표기라 숨기지 않는다. */
.branch__map--kakao{aspect-ratio:16/9;}
.branch__map--kakao.is-drawn{aspect-ratio:auto;height:auto;}
/* 폭을 100%로 눌러 버리면 안쪽 지도(고정 px)와 어긋난다. 자연 크기로 두고 배율로 맞춘다. */
.branch__map--kakao .root_daum_roughmap{margin:0;border:0;}
/* 지도 아래 .cont 는 주소·전화를 되풀이하는 칸이다. 주소는 왼쪽에 이미 있고
   카카오에 전화가 등록돼 있지 않으면 "전화 -" 로 비어 보인다. 출처 표기가
   아니라 중복 정보라 숨긴다. */
.branch__map--kakao .root_daum_roughmap .cont{display:none;}
.branch__map--kakao .root_daum_roughmap img{max-width:none;}
.branch__map--kakao noscript a{display:inline-block;padding:1rem;color:var(--point);font-weight:700;}

.slider{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--g100);}
.slider__track{display:flex;transition:transform .5s var(--ease);}
.slider__slide{flex:0 0 100%;aspect-ratio:16/10;}
.slider__slide img{width:100%;height:100%;object-fit:cover;}
.slider__nav{position:absolute;inset:auto 0 1rem;display:flex;justify-content:center;gap:.4rem;}
/* 점은 9px로 보이되 누르는 영역은 44px. 시각과 히트영역을 분리한다. */
.slider__nav{gap:0;}
.slider__nav button{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;}
.slider__nav button::before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55);transition:width .2s var(--ease),background .2s var(--ease);}
.slider__nav button[aria-current="true"]::before{width:24px;border-radius:5px;background:#fff;}
.slider__arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(8,20,16,.5);color:#fff;cursor:pointer;display:grid;place-items:center;}
.slider__arrow:hover{background:rgba(8,20,16,.78);}
.slider__arrow--prev{left:.8rem;} .slider__arrow--next{right:.8rem;}
.slider__empty{display:grid;place-items:center;aspect-ratio:16/10;color:var(--g400);font-size:.9rem;text-align:center;padding:1rem;}

/* =========================================================
   13. 상담 신청 · 폼
   ========================================================= */
.booking{position:relative;isolation:isolate;background:var(--navy);color:#BFCCC5;overflow:hidden;}
/* 배경 사진 — 파일 자체를 이미 어둡게 깎아 두었지만(휘도 평균 0.06),
   사진을 바꿔 끼울 수도 있으니 위에 네이비 막을 한 겹 더 깐다.
   이 막이 없으면 밝은 사진을 넣는 순간 흰 글씨가 사라진다. */
/* 사진 + 어두운 막. booking 에만 있던 처리를 어느 섹션이든 쓰게 뺐다.
   막은 .section__bg::after 가 진다 — 섹션의 ::before 를 이미 쓰는 곳
   (.page-hero 의 초록 글로우)과 부딪히지 않게 하려는 것. */
.section--photo,.page-hero--photo{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);}
.section__bg,.booking__bg{position:absolute;inset:0;z-index:-1;}
.section__bg img,.booking__bg img{width:100%;height:100%;object-fit:cover;object-position:center;}
.section__bg::after,.booking__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,24,21,.90) 0%,rgba(21,36,32,.84) 45%,rgba(13,24,21,.92) 100%);
}
/* 어두운 사진 위 글자색 — .section--dark 와 같은 규칙을 사진 섹션에도 준다. */
.section--photo{color:#BFCCC5;}
.section--photo h2,.section--photo h3,.section--photo h4,.section--photo .sec-title{color:#fff;}
.section--photo .eyebrow{color:var(--point-on-dark);}
.section--photo .sec-lede,.section--photo p{color:#9DACA4;}
.section--photo :focus-visible{outline-color:var(--point-on-dark);}
/* 어두운 바탕 위에서는 흰 카드가 아니라 유리판으로 */
.section--photo .mission{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);}
.section--photo .mission__quote{color:#fff;}
.section--photo .mission__goal{color:var(--point-on-dark);}
/* 사진 위에서는 테두리와 왼쪽 강조선을 뺀다. 배경이 이미 어두워 유리판만으로 구분되고,
   선이 남으면 사진 위에 상자가 떠 있는 느낌이 된다. */
.section--photo .pillbox{background:rgba(255,255,255,.05);border:0;border-radius:var(--r-lg);}
.section--photo .pillbox b{color:#fff;}
.section--photo .values span{background:rgba(255,255,255,.10);color:#DDEAE3;}
/* 사진을 깐 페이지 머리띠. 기본 .page-hero 의 초록 원형 글로우는 사진과 겹쳐 지저분하다. */
.page-hero--photo::before{display:none;}
.page-hero--photo{padding-block:clamp(3.4rem,8vw,5.6rem);}
/* .section--dark 를 안 붙였더니 제목·머리말이 잉크색 그대로 어두운 바탕에 얹혀
   대비 1.05:1(사실상 안 보임)이었다. 이 섹션 안에서만 색을 되돌린다. */
.booking .sec-title,.booking__card h3{color:#fff;}
.booking .eyebrow{color:var(--point-on-dark);}
.booking .sec-lede{color:#9DACA4;}
/* 포커스 링도 어두운 바탕에서 1.05:1 이라 안 보인다. */
.booking :focus-visible{outline-color:var(--point-on-dark);}
.booking__note{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:clamp(1.2rem,3vw,1.9rem);background:rgba(255,255,255,.04);margin-bottom:clamp(1.5rem,3vw,2.2rem);}
.booking__note b{color:#fff;display:block;font-size:1.04rem;margin-bottom:.5rem;}
.booking__note p{margin:0 0 .35rem;font-size:.94rem;color:#9DACA4;}
.booking__note p:last-child{margin-bottom:0;}
.booking__cols{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
.booking__card{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:clamp(1.2rem,3vw,1.8rem);background:rgba(255,255,255,.05);}
.booking__card h3{font-size:1.12rem;margin:0 0 .25rem;}
.booking__card .addr{font-size:.88rem;color:#8D9E96;margin:0 0 1.1rem;}
.booking__ways{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;}
.booking__way{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;padding:.95rem .45rem;border-radius:var(--r);border:1px solid rgba(255,255,255,.16);color:#D6E4DC;font-size:.8rem;font-weight:700;line-height:1.3;background:rgba(255,255,255,.02);transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);}
.booking__way:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-3px);}
/* 주소가 아직 없는 갈래. 자리는 지키되 눌리지 않는다는 걸 점선으로 알린다. */
.booking__way.is-empty{border-style:dashed;border-color:rgba(255,255,255,.2);background:transparent;color:#8D9E96;cursor:default;}
.booking__way.is-empty:hover{background:transparent;border-color:rgba(255,255,255,.2);color:#8D9E96;transform:none;}
.booking__way.is-empty em{font-style:normal;font-size:.68rem;font-weight:600;color:#6F807A;letter-spacing:-.01em;}

.cf-form{display:grid;gap:1rem;}
.cf-field{display:grid;gap:.4rem;}
.cf-field label{font-size:.87rem;font-weight:700;color:var(--g700);}
.cf-field .req{color:var(--blue);}
.cf-field input,.cf-field select,.cf-field textarea{width:100%;padding:.8rem .95rem;border:1.5px solid var(--g300);border-radius:10px;font:inherit;font-size:.95rem;color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s;}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l);}
.cf-field textarea{min-height:140px;resize:vertical;}
.cf-consent{display:flex;gap:.55rem;align-items:flex-start;font-size:.87rem;color:var(--g600);}
.cf-consent input{width:18px;height:18px;flex:none;margin-top:.15em;}
.cf-form__row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));}
.cf-notice{padding:1rem 1.2rem;border-radius:var(--r);font-size:.93rem;font-weight:600;}
.cf-notice--ok{background:var(--blue-l);color:var(--blue-dd);}
.cf-notice--err{background:#FDECEC;color:#B3261E;}
.contact-grid{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-grid aside .pillbox{margin-top:1rem;}

/* =========================================================
   14. 소식 피드 · 명예의 전당
   ========================================================= */
.feed{display:grid;gap:clamp(1.5rem,3.2vw,2.6rem) clamp(1.5rem,3.6vw,3rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));}
.feed-item{display:flex;flex-direction:column;}
.feed-item__kicker{display:inline-flex;align-items:center;gap:.4em;font-size:.8rem;font-weight:800;color:var(--blue);margin-bottom:.5rem;}
.feed-item__title{font-size:1.12rem;line-height:1.5;margin:0 0 .9rem;letter-spacing:-.02em;}
.feed-item__title a{color:var(--ink);}
.feed-item__title a:hover{color:var(--blue);}
.feed-item__excerpt{font-size:.88rem;line-height:1.65;color:var(--g600);margin:0 0 .9rem;}
.feed-item__thumb{display:block;border-radius:var(--r);overflow:hidden;background:var(--blue-l);margin-bottom:.9rem;}
.feed-item__thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s var(--ease);}
/* 대표 이미지가 없는 카드 — 빈 상자로 자리만 지킨다. */
.feed-item__thumb--empty{aspect-ratio:16/10;background:linear-gradient(150deg,var(--point-softer) 0%,var(--point-soft) 100%);}
.feed-item__thumb:hover img{transform:scale(1.04);}
.feed-item__meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;}
.feed-item__date{font-size:.81rem;color:var(--g500);font-weight:600;}
.feed--divided .feed-item{padding-bottom:clamp(1.5rem,3vw,2.2rem);border-bottom:1px solid var(--line);}
/* 제목이 한 줄이냐 두 줄이냐에 따라 아래 썸네일 위치가 카드마다 어긋났다.
   제목·발췌를 줄 수로 묶고 최소 높이를 줘서 한 줄에 놓인 카드들의
   썸네일·날짜 줄이 같은 높이에서 시작하게 한다. */
.feed--divided .feed-item__title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.5em);word-break:keep-all;
}
.feed--divided .feed-item__excerpt{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.65em);word-break:keep-all;
}

/* 3×2 격자 — 블로그 카드 6장. 열 수를 못 박아야 글 개수가 5·7로 흔들려도
   첫 줄이 3칸으로 유지된다(auto-fit이면 흔들린다). */
.feed--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.8rem,3vw,2.8rem) clamp(1.2rem,2.2vw,2rem);}
/* 사진이 위로. 마크업은 말머리 → 제목 → 사진 순서 그대로 두고 order만 바꾼다.
   썸네일은 aria-hidden에 tabindex=-1이라 탭 순서·낭독 순서에 영향이 없다. */
.feed--3 .feed-item__thumb{order:-1;margin-bottom:1rem;}
.feed--3 .feed-item__thumb img{aspect-ratio:16/10;}
.feed--3 .feed-item__kicker{font-size:.76rem;margin-bottom:.45rem;}
/* 제목 한 줄 · 본문 두 줄로 고정한다. 글자 수가 달라도 카드 아랫선이 맞는다. */
.feed--3 .feed-item__title{
  font-size:clamp(.99rem,1.2vw,1.1rem);line-height:1.52;margin-bottom:.45rem;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(1 * 1.52em);
}
.feed--3 .feed-item__excerpt{
  font-size:.86rem;line-height:1.6;color:var(--g600);margin:0 0 .85rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(2 * 1.6em);word-break:keep-all;
}
.feed--3 .feed-item__date{font-size:.8rem;}
/* 메인 소식 카드에서는 날짜를 감춘다 — 소식 목록(아카이브)에는 그대로 남는다. */
.feed--3 .feed-item__date{display:none;}
/* 태그는 개수 제한 없이 전부. 많으면 다음 줄로 넘긴다.
   margin-top:auto 로 아래에 붙어 있어 태그 줄 수가 달라도 카드 아랫선은 맞는다. */
.feed--3 .feed-item__meta{align-items:center;flex-wrap:wrap;gap:.35rem;}
@media (max-width:900px){.feed--3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){
  .feed--3{grid-template-columns:1fr;gap:1.6rem;}
  /* 한 열이면 줄맞춤이 필요 없다. 제목은 두 줄까지 풀어 주되 본문은 그대로 두 줄. */
  .feed--3 .feed-item__title{min-height:0;-webkit-line-clamp:2;}
  .feed--3 .feed-item__excerpt{min-height:0;}
}

.loadmore{display:flex;justify-content:center;align-items:center;gap:.8rem;margin-top:clamp(2.2rem,4.5vw,3.4rem);}

.hall{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));}
.hall__item{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--navy);color:#fff;display:block;aspect-ratio:4/5;}
.hall__item img{width:100%;height:100%;object-fit:cover;opacity:.66;transition:.4s var(--ease);}
.hall__item:hover img{opacity:.48;transform:scale(1.05);}
.hall__prefix{
  position:absolute;top:.9rem;left:.9rem;z-index:2;
  padding:.3em .75em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);color:var(--point);
  font-size:.75rem;font-weight:800;letter-spacing:-.01em;
}
.hall__cap{position:absolute;inset:auto 0 0;padding:1.15rem;background:linear-gradient(transparent,rgba(8,20,16,.92));}
.hall__cap b{display:block;font-size:1.02rem;color:#fff;line-height:1.4;}
.hall__cap span{font-size:.79rem;color:#86C4A6;font-weight:700;}

/* =========================================================
   15. 페이지 헤더 · 탭 · 본문
   ========================================================= */
.page-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding-block:clamp(2.6rem,6vw,4.4rem);}
.page-hero::before{content:"";position:absolute;right:-6%;top:-45%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(20,140,100,.42),transparent 62%);}
.page-hero__inner{position:relative;}
.page-hero h1{font-size:var(--fs-h2);color:#fff;margin:0 0 .45rem;}
.page-hero p{color:#A3B3AB;margin:0;max-width:60ch;}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.81rem;color:#86968E;margin-bottom:.9rem;}
.breadcrumb a{color:#C4D2CA;}
.breadcrumb span[aria-hidden]{opacity:.5;}

.tabs{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--line);margin-bottom:clamp(1.8rem,4vw,2.8rem);}
.tabs a{padding:.8rem 1.15rem;font-weight:700;font-size:.94rem;color:var(--g600);border-bottom:3px solid transparent;margin-bottom:-1px;}
.tabs a:hover{color:var(--blue);}
.tabs a[aria-current="page"],.tabs a.is-active{color:var(--blue);border-bottom-color:var(--blue);}

.prose{font-size:1rem;color:var(--g700);}
.prose h2{font-size:var(--fs-h3);margin-top:2.4em;}
.prose h3{font-size:1.12rem;margin-top:2em;}
.prose h2:first-child,.prose h3:first-child{margin-top:0;}
.prose img{border-radius:var(--r);margin:1.6rem 0;}
.prose blockquote{margin:1.8rem 0;padding:1.2rem 1.5rem;border-left:4px solid var(--blue);background:var(--blue-ll);border-radius:0 var(--r) var(--r) 0;color:var(--g700);}
.prose blockquote p:last-child{margin-bottom:0;}
.prose ul li::marker{color:var(--blue);}
.prose figure{margin:1.8rem 0;}
.prose figcaption{font-size:.84rem;color:var(--g500);text-align:center;margin-top:.6rem;}

.pillbox{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:0 var(--r) var(--r) 0;padding:1.15rem 1.35rem;margin:1.5rem 0;}
.pillbox b{display:block;margin-bottom:.35rem;color:var(--ink);}
.pillbox p:last-child{margin-bottom:0;}

.mission{text-align:center;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.7rem,4vw,2.8rem);background:#fff;}
.mission__quote{font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:800;letter-spacing:-.02em;color:var(--blue-d);line-height:1.55;margin:0;}
.mission__goal{font-size:clamp(.98rem,1.6vw,1.12rem);font-weight:700;color:var(--point);margin:.7rem 0 0;}
.mission__body{margin:1.1rem 0 0;color:var(--g600);line-height:1.8;}
.values{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-top:1.5rem;}
.values span{padding:.52em 1.15em;border-radius:var(--r-pill);background:var(--blue-l);color:var(--blue-d);font-weight:700;font-size:.92rem;}

.post-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.91rem;}
.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;margin-top:clamp(2.2rem,4.5vw,3.4rem);}
.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem;}
.pagination .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 .7rem;border-radius:10px;border:1px solid var(--line);color:var(--g600);font-weight:700;font-size:.91rem;background:#fff;}
.pagination .page-numbers:hover{border-color:var(--blue);color:var(--blue);}
.pagination .current{background:var(--blue);border-color:var(--blue);color:#fff;}

.entry-head{margin-bottom:1.9rem;}
.entry-head h1{font-size:clamp(1.45rem,3vw,2.05rem);}
.entry-meta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;font-size:.86rem;color:var(--g500);font-weight:600;}
.entry-thumb{border-radius:var(--r-lg);overflow:hidden;margin-bottom:1.9rem;}

.search-form{display:flex;gap:.5rem;max-width:480px;margin-top:1.2rem;}
.search-form input[type="search"]{flex:1;padding:.8rem .95rem;border:1.5px solid var(--g300);border-radius:10px;font:inherit;}
.search-form input[type="search"]:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l);}
.search-form button{padding:.8rem 1.4rem;border:0;border-radius:10px;background:var(--blue);color:#fff;font-weight:700;cursor:pointer;}
.search-form button:hover{background:var(--blue-d);}

/* =========================================================
   16. 푸터
   ========================================================= */
.site-footer{background:var(--navy);color:#8B9C94;padding-block:clamp(2.6rem,6vw,3.8rem) 1.5rem;font-size:.9rem;}
.footer-grid{display:grid;gap:clamp(1.6rem,3.4vw,2.6rem);grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));margin-bottom:2.2rem;}
@media (max-width:1024px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand .brand{color:#fff;margin-bottom:.9rem;}
.footer-brand .brand__mark--file img{max-height:32px;width:auto;display:block;}
/* 푸터는 네이비다. 밝은 배경용 로고는 그대로 얹으면 안 보이므로 흰색으로 뒤집는다. */
.footer-brand .brand--invert .brand__mark--file img{filter:brightness(0) invert(1);}
.footer-brand .brand__text b{color:#fff;}
.footer-brand .brand__text small{color:#7E8F87;}
.footer-brand p{margin:0 0 1.1rem;max-width:34ch;line-height:1.75;}
.footer-col h4{color:#fff;font-size:.88rem;letter-spacing:.02em;margin:0 0 .9rem;font-weight:800;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin:.42em 0;}
.footer-col a{color:#93A49B;}
.footer-col a:hover{color:#fff;}
.footer-col--contact p{margin:0 0 .35rem;line-height:1.7;color:#93A49B;}
.footer-col--contact b{color:#D7E2DB;font-weight:700;}
.footer-social{display:flex;gap:.5rem;}
.footer-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.08);color:#C4D2CA;}
.footer-social a:hover{background:var(--blue);color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.3rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.82rem;color:#9AAAA2;}
.footer-bottom a{color:#B4C2BA;}

/* =========================================================
   17. 유틸
   ========================================================= */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}
.text-center{text-align:center;}
.mt-0{margin-top:0!important;} .mb-0{margin-bottom:0!important;}
.stack > * + *{margin-top:1rem;}
.divider{height:1px;background:var(--line);border:0;margin:clamp(2rem,5vw,3.4rem) 0;}
.embed-frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--g100);}
.embed-frame iframe{width:100%;height:100%;border:0;display:block;}
.is-hidden{display:none!important;}
.alignwide{max-width:1080px;margin-inline:auto;}
.alignfull{width:100vw;margin-left:calc(50% - 50vw);}
.aligncenter{margin-inline:auto;display:block;}
.alignleft{float:left;margin:0 1.4rem 1rem 0;}
.alignright{float:right;margin:0 0 1rem 1.4rem;}
@media (max-width:640px){.alignleft,.alignright{float:none;margin:1.4rem 0;}}

@media print{
  .topbar,.site-header,.floater,.mobile-bar,.site-footer,.hero__actions,.hero__nav{display:none!important;}
  body{color:#000;padding-bottom:0;}
}

/* 사진 옆 소식 제목이 들쭉날쭉해 보이지 않게 두 줄 높이를 미리 잡아 둔다.
   여러 열로 늘어설 때만 필요한 장치라 모바일(1열)은 제외한다 —
   한 열에서는 맞출 상대가 없는데 제목이 한 줄이어도 두 줄 자리를 차지해
   그만큼 빈 공간이 생긴다.

   561px 을 아래에서 막는 이유: 바로 위 @media (max-width:560px) 에 이미
   min-height:0 규칙이 있는데, 이 줄이 파일 뒤쪽에 있고 특이도가 같아서
   그 규칙을 덮어 버리고 있었다. 분기를 갈라 서로 안 겹치게 한다. */
@media (min-width:561px){
  .feed--3 .feed-item__title{min-height:3em;-webkit-line-clamp:2;}
}


/* Three-dimensional rehabilitation purpose images. */
.tiles--editorial .tile{padding:0 0 1.6rem;overflow:hidden;gap:1rem;background:#faf9f6;border-color:#e5e7df;box-shadow:0 8px 24px rgba(6,54,38,.035);}
.tiles--editorial .tile__visual{display:block;width:100%;aspect-ratio:1;overflow:hidden;}
.tiles--editorial .tile__visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.tiles--editorial .tile:hover .tile__visual img{transform:scale(1.035);}
.tiles--editorial .tile > span:last-child{padding-inline:.75rem;}
@media(max-width:600px){.tiles--editorial .tile{padding-bottom:1.25rem;gap:.8rem;}}

/* Shared subpage hero dimensions and photographic background. */
.page-hero,.page-hero.page-hero--photo{box-sizing:border-box;min-height:360px;padding-block:48px;display:flex;align-items:center;isolation:isolate;background:#103b2c url('assets/img/goyang-subpage-hero.webp') center 52%/cover no-repeat;}
.page-hero::before,.page-hero.page-hero--photo::before{content:"";display:block;position:absolute;inset:0;width:auto;height:auto;border-radius:0;background:linear-gradient(90deg,rgba(5,32,23,.91) 0%,rgba(6,37,27,.78) 45%,rgba(6,37,27,.32) 100%);z-index:0;}
.page-hero > .section__bg{display:none;}
.page-hero__inner{position:relative;z-index:1;width:100%;}
.page-hero h1{color:#fff;line-height:1.3;text-wrap:balance;}
.page-hero p{color:#e0e8e1;line-height:1.75;}
.page-hero .breadcrumb{color:#d3dfd6;}
.page-hero .breadcrumb a{color:#edf3ee;}
@media(max-width:600px){.page-hero,.page-hero.page-hero--photo{min-height:320px;padding-block:36px;background-position:62% center;}.page-hero::before,.page-hero.page-hero--photo::before{background:linear-gradient(90deg,rgba(5,32,23,.9),rgba(6,37,27,.65));}.page-hero h1{font-size:clamp(1.65rem,6.6vw,2rem);}.page-hero p{font-size:.9rem;}}

/* Labeled Naver Blog pill in the footer. */
.footer-social{flex-wrap:wrap;align-items:center;}
.footer-social a.footer-social__blog{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:auto;min-height:44px;height:auto;padding:10px 17px;box-sizing:border-box;border:1px solid rgba(232,239,219,.35);border-radius:999px;background:transparent;color:#e8efdb;font-size:14px;font-weight:700;line-height:1.4;white-space:nowrap;transition:background-color .2s,border-color .2s;}
.footer-social__blog svg{flex:none;}
.footer-social a.footer-social__blog:hover{background:rgba(232,239,219,.1);border-color:rgba(232,239,219,.7);color:#fff;}
.footer-social a.footer-social__blog:focus-visible{outline:2px solid #e8efdb;outline-offset:4px;}

/* ==========================================================================
   FAQ — 자주 묻는 질문 (template-parts/faq.php)

   details/summary 라 자바스크립트 없이 펼쳐지고, 닫혀 있어도 크롤러가
   안의 글을 읽는다. FAQPage 스키마와 같은 원고를 쓰므로 여기 보이는
   질문이 곧 구글에 나가는 질문이다.
   ========================================================================== */
.section--faq{background:var(--bg-alt);}

.faq{
  border-top:1px solid var(--line);
}
.faq__item{
  border-bottom:1px solid var(--line);
  background:transparent;
}
.faq__q{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.15rem .25rem;
  cursor:pointer;list-style:none;
  font-weight:600;font-size:1.02rem;line-height:1.6;color:var(--ink);
  transition:color .18s ease;
}
.faq__q::-webkit-details-marker{display:none;}
.faq__q:hover{color:var(--blue);}
.faq__q span{flex:1;}

/* + 에서 − 로 바뀌는 표시. 가로선은 늘 있고 세로선만 사라진다. */
.faq__mark{
  position:relative;flex:none;width:18px;height:18px;margin-top:.28em;
}
.faq__mark::before,
.faq__mark::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--blue);border-radius:1px;
  transform:translate(-50%,-50%);
  transition:opacity .18s ease,transform .22s ease;
}
.faq__mark::before{width:14px;height:2px;}
.faq__mark::after{width:2px;height:14px;}
.faq__item[open] .faq__mark::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg);}

.faq__a{
  padding:0 2.6rem 1.35rem .25rem;
}
.faq__a p{
  margin:0;color:var(--g600);font-size:.97rem;line-height:1.85;
  word-break:keep-all;
}

@media (max-width:600px){
  .faq__q{font-size:.97rem;padding:1rem .1rem;}
  .faq__a{padding:0 1.8rem 1.2rem .1rem;}
}
@media (prefers-reduced-motion:reduce){
  .faq__q,.faq__mark::before,.faq__mark::after{transition:none;}
}

/* ==========================================================================
   검색 — 헤더 버튼 · 검색 판 · 검색 폼 (searchform.php, header.php)

   기본 워드프레스 검색은 글과 페이지만 찾는다. 소식 · 후기 · 기록까지
   훑도록 inc/search.php 에서 열어 뒀다.
   ========================================================================== */

/* ── 헤더 검색 버튼 ─────────────────────────────── */
.header-search-btn{
  display:grid;place-items:center;
  width:40px;height:40px;flex:none;
  border:1px solid var(--line);border-radius:9px;
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.header-search-btn:hover{background:var(--blue-ll);border-color:var(--blue);color:var(--blue);}
.header-search-btn svg{display:block;}

/* ── 검색 판 ───────────────────────────────────── */
.cf-search-panel{
  position:fixed;inset:0;z-index:1200;
  background:rgba(10,24,20,.55);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
}
.cf-search-panel.is-open{opacity:1;visibility:visible;}

.cf-search-panel__inner{
  background:var(--bg);
  border-radius:0 0 14px 14px;
  padding:clamp(1.3rem,3vw,2rem) var(--gutter) clamp(1.5rem,3.4vw,2.2rem);
  box-shadow:0 18px 44px rgba(10,24,20,.18);
  transform:translateY(-14px);
  transition:transform .24s cubic-bezier(.2,.7,.3,1);
}
.cf-search-panel.is-open .cf-search-panel__inner{transform:translateY(0);}

.cf-search-panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:.9rem;
}
.cf-search-panel__title{
  font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--g600);
}
.cf-search-close{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border:0;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer;
  transition:background .16s ease;
}
.cf-search-close:hover{background:var(--bg-alt);}
.cf-search-panel__hint{
  margin:.75rem 0 0;font-size:.84rem;color:var(--g600);
}

/* 판이 열린 동안 뒤 문서를 묶는다 */
html.cf-search-open{overflow:hidden;}

/* ── 검색 폼 ───────────────────────────────────── */
.cf-search{display:flex;gap:.6rem;align-items:stretch;}
.cf-search__field{
  flex:1;display:flex;align-items:center;gap:.6rem;
  padding:.1rem .95rem;min-width:0;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:10px;
  color:var(--g600);
  transition:border-color .16s ease,background .16s ease;
}
.cf-search__field:focus-within{border-color:var(--blue);background:var(--bg);}
.cf-search__field svg{flex:none;}
.cf-search__input{
  flex:1;min-width:0;
  border:0;background:transparent;outline:none;
  font:inherit;font-size:1rem;color:var(--ink);
  padding-block:.85rem;
}
.cf-search__input::placeholder{color:var(--g400,#9AA8A2);}
/* 사파리가 검색 입력칸에 붙이는 지우기 버튼은 테마 색과 따로 논다 */
.cf-search__input::-webkit-search-decoration,
.cf-search__input::-webkit-search-cancel-button{-webkit-appearance:none;}

.cf-search__btn{
  flex:none;padding-inline:1.5rem;
  border:0;border-radius:10px;cursor:pointer;
  background:var(--blue);color:#fff;
  font:inherit;font-size:.95rem;font-weight:600;
  transition:background .16s ease;
}
.cf-search__btn:hover{background:var(--blue-d);}

/* ── 서랍 메뉴 안의 검색 ────────────────────────── */
.cf-nav-search{padding:0 1.3rem 1.1rem;border-bottom:1px solid var(--line);}
.cf-nav-search .cf-search__btn{padding-inline:1.1rem;}
@media (min-width:1101px){
  /* 데스크톱에서는 헤더 버튼이 있으니 서랍 안 검색은 접는다 */
  .cf-nav-search{display:none;}
}

@media (max-width:560px){
  .cf-search{flex-direction:column;}
  .cf-search__btn{padding-block:.8rem;}
  .header-search-btn{width:38px;height:38px;}
}

/* ── 검색 결과 꼬리표 ───────────────────────────── */
.search-kind{
  display:inline-block;margin-bottom:.4rem;
  padding:.16rem .5rem;border-radius:5px;
  background:var(--blue-ll);color:var(--blue);
  font-size:.74rem;font-weight:600;letter-spacing:.02em;
}

@media (prefers-reduced-motion:reduce){
  .cf-search-panel,.cf-search-panel__inner,.header-search-btn,.cf-search__field,.cf-search__btn{transition:none;}
}

/* 검색 결과 상단의 다시 찾기 — 헤더로 되돌아가지 않아도 되게 */
.page-hero__search{max-width:620px;margin-top:1.3rem;}

/* ── 메인 격자의 줄 맞춤 ───────────────────────────────────────────
   카드를 4장 내려받아 두고, 열 수가 바뀔 때마다 4번째만 감췄다 보였다 한다.

     3열 (데스크톱)  → 3장 · 한 줄 꽉 참
     2열 (태블릿)    → 4장 · 두 줄 꽉 참
     1열 (모바일)    → 3장 · 세 줄

   개수를 하나로 고정하면 어떤 너비에서는 마지막 줄에 빈 칸이 남아
   이가 빠진 것처럼 보인다. 그 자리를 CSS 로 메우는 셈이다.

   숨겼다 되돌릴 때 display 는 flex 여야 한다 — .feed-item 과 .review
   둘 다 세로 flex 로 쌓는 카드라, block 으로 되돌리면 안쪽이 무너진다.
   개수는 PHP 쪽 cultfac_news_query(4) · cultfac_review_query(4) 와 한 쌍이다. */
.feed--fill > :nth-child(4),
.reviews--fill > :nth-child(4){display:none;}
@media (min-width:561px) and (max-width:900px){
  .feed--fill > :nth-child(4),
  .reviews--fill > :nth-child(4){display:flex;}
}

/* 메인 후기 격자는 소식 격자(.feed--3)와 같은 분기점을 쓴다.
   아카이브의 .reviews 는 auto-fill 이라 열 수가 폭 따라 제멋대로 바뀌는데,
   그러면 위 줄 맞춤 규칙의 분기점과 어긋난다. */
.reviews--3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:900px){.reviews--3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.reviews--3{grid-template-columns:1fr;}}

/* ==========================================================================
   멤버 상세 소개 (single-cf_member.php)
   ========================================================================== */

/* 위 덩어리. 인물 사진이 아래 카드 위로 걸쳐 서야 하므로, 사진이 있을 때만
   아래쪽 여백을 크게 잡고 카드를 그만큼 끌어올린다. 사진이 없으면 겹칠 대상이
   없으니 평범한 섹션처럼 둔다. */
/* 사진이 띠 밖으로 나가지 않으므로 넘치는 부분은 잘라도 된다. */
/* 배경은 테마 안의 SVG(assets/img/member-bg.svg) — 옅은 물결 무늬.
   사진 파일이 아니라 벡터라 어느 폭에서도 흐려지지 않고 10KB 가 안 된다.
   무늬를 바꾸고 싶으면 그 SVG 만 갈아 끼우면 된다. */
.mprofile-top{position:relative;overflow:hidden;
  background:#EEF4F0 url("assets/img/member-bg.svg") center/cover no-repeat;
  padding-block:clamp(2.2rem,5vw,3.4rem);}
/* 커스터마이저에서 사진을 넣으면 밝은 막을 얹어 검은 글자를 살린다. */
.mprofile-top--photo{background-size:cover;background-position:center;}
.mprofile-top--photo::before{content:"";position:absolute;inset:0;background:rgba(238,244,240,.80);}
.mprofile-top__inner{position:relative;z-index:1;display:grid;gap:1.5rem;align-items:end;}
.mprofile-top__txt{min-width:0;}
.mprofile-headline{font-family:var(--display);font-weight:800;line-height:1.45;letter-spacing:-.02em;
  font-size:clamp(1.18rem,2.6vw,1.86rem);color:var(--ink);margin:.7rem 0 1.4rem;}
.mprofile-headline em{font-style:normal;color:var(--point);}
.mprofile-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem;
  font-size:clamp(1.5rem,3.4vw,2.1rem);margin:0;letter-spacing:-.02em;}
.mprofile-name span{font-size:.5em;font-weight:700;color:var(--g600);letter-spacing:0;}
.mprofile-branch{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  margin:.9rem 0 0;font-size:.88rem;font-weight:700;color:var(--g700);}
.mprofile-branch span{font-weight:500;color:var(--g500);}
.mprofile-fields{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;}
.mprofile-fields li{font-size:.8rem;font-weight:700;padding:.38em .9em;border-radius:var(--r-pill);background:rgba(255,255,255,.7);border:1px solid var(--line);color:var(--blue-d);}

/* 사진. 세로로 긴 투명 PNG 를 전제한다. 가로로 넓은 사진이 들어와도
   폭이 칸을 넘지 않게 max-width 로 막고 비율은 건드리지 않는다. */
.mprofile-top__photo{display:flex;justify-content:center;align-items:flex-end;}
.mprofile-photo{display:block;width:auto;max-width:100%;height:auto;
  max-height:clamp(320px,46vw,520px);object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(6,54,38,.16));}

/* 아래 카드 */
.mprofile-bottom{padding-block:clamp(2rem,4.5vw,3.2rem) clamp(2.6rem,5.5vw,4rem);}
.mprofile-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,3.4vw,2.6rem);box-shadow:0 10px 30px rgba(6,54,38,.05);}
.mprofile-block + .mprofile-block{margin-top:clamp(1.8rem,3.6vw,2.6rem);
  padding-top:clamp(1.8rem,3.6vw,2.6rem);border-top:1px solid var(--line);}
.mprofile-block__title{font-size:1.06rem;margin:0 0 1rem;letter-spacing:-.01em;}

/* 약력 목록. 항목이 짧아 한 칸으로 쌓으면 오른쪽이 휑하다.
   columns 를 쓰는 이유 — grid 로 2열을 만들면 항목이 좌우로 번갈아 채워져
   읽는 순서가 꼬인다. columns 는 위에서 아래로 채우고 넘치면 옆 칸으로 간다. */
.mprofile-list{list-style:none;margin:0;padding:0;
  columns:2;column-gap:clamp(1.4rem,3vw,2.6rem);}
.mprofile-list li{break-inside:avoid;-webkit-column-break-inside:avoid;
  position:relative;padding-left:.95rem;margin:0 0 .62rem;
  font-size:.92rem;line-height:1.62;color:var(--g700);}
.mprofile-list li::before{content:"";position:absolute;left:0;top:.66em;
  width:4px;height:4px;border-radius:50%;background:var(--point);}

.mprofile-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(1.4rem,3vw,2rem);}
.mprofile-actions .btn--ghost svg{transform:rotate(180deg);}
.mprofile-actions .mprofile-actions__sns svg{transform:none;}

/* 태블릿 위 — 글과 사진을 좌우로 놓고, 사진이 카드 위로 걸치게 한다. */
@media (min-width:821px){
  /* 사진은 위 띠 안에서만 선다 — 바닥선이 띠의 아래 끝과 맞닿는다.
     처음엔 아래 카드 위로 걸치게 했다가, 카드가 가려져 약력 첫 줄이
     안 보이는 문제로 되돌렸다(2026-09 의뢰인 요청). */
  .mprofile--photo .mprofile-top{padding-bottom:0;}
  .mprofile--photo .mprofile-top__inner{grid-template-columns:minmax(0,1fr) minmax(260px,38%);gap:2.4rem;align-items:end;}
  .mprofile--photo .mprofile-top__txt{padding-bottom:clamp(2.2rem,5vw,3.4rem);}
  .mprofile--photo .mprofile-top__photo{margin-bottom:0;align-self:end;}
  .mprofile--photo .mprofile-photo{max-height:clamp(420px,42vw,600px);}
}

/* 태블릿 아래 — 사진을 글 위로 올린다. 좁은 화면에서 좌우로 쪼개면
   글도 사진도 제 크기를 못 낸다. 겹침도 없앤다. */
@media (max-width:820px){
  .mprofile-top__inner{grid-template-columns:1fr;}
  .mprofile-top__photo{order:-1;margin-bottom:.6rem;}
  .mprofile-photo{max-height:min(360px,52vw);}
}

/* 좁은 화면에서 약력을 2열로 두면 한 줄에 서너 글자만 들어간다. */
@media (max-width:640px){
  .mprofile-list{columns:1;}
}
/* 항목이 적은 묶음은 한 칸으로. 두 칸으로 쪼개면 오른쪽이 휑하게 남는다. */
.mprofile-list--one{columns:1;}

/* ==========================================================================
   센터 소개 묶음 (센터 소개 · 컬팩의 특별함 · 멤버 소개)
   ========================================================================== */

/* 세 페이지를 오가는 탭 줄. 히어로 바로 밑에 붙는다. */
/* 헤더가 이미 sticky 라 여기까지 붙이면 높이를 정확히 맞춰야 하고, 어긋나면 헤더 밑에 숨는다. 붙이지 않는다. */
.subnav{background:#fff;border-bottom:1px solid var(--line);}
.subnav__inner{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.subnav__inner::-webkit-scrollbar{display:none;}
.subnav__item{flex:none;padding:.95rem 1.1rem;font-size:.92rem;font-weight:700;color:var(--g600);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:.18s var(--ease);}
.subnav__item:hover{color:var(--ink);}
.subnav__item.is-current{color:var(--point);border-bottom-color:var(--point);}

/* 센터 소개 하단의 다음 페이지 안내 카드 — 둘이라 두 칸 */
.qlinks--2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:900px){.qlinks--2{grid-template-columns:1fr;}}

/* 멤버 소개 서문 — 긴 글이라 행간과 글자 크기를 살짝 키운다 */
.prose--lg{font-size:1.04rem;line-height:1.85;}
.prose--lg p{margin:0 0 1.15em;}
.prose--lg strong{color:var(--ink);}

/* Cultfac Specialists 인용 띠 */
.specialists-intro{padding-block:clamp(2.2rem,4.5vw,3.2rem);}
.specialists-intro__quote{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.55;
  font-size:clamp(1.12rem,2.3vw,1.55rem);color:var(--ink);max-width:34ch;margin:.7rem auto 0;}
.section--photo .specialists-intro__quote{color:#fff;}

/* 총괄센터장 — 큰 카드. 왼쪽 사진, 오른쪽 글 */
.lead-member{display:grid;grid-template-columns:minmax(220px,32%) minmax(0,1fr);gap:clamp(1.4rem,3.4vw,2.8rem);
  align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,3vw,2.4rem);box-shadow:0 10px 30px rgba(6,54,38,.05);}
.lead-member__photo{display:grid;place-items:center;aspect-ratio:2/3;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(160deg,#F4F8F6,#E3EDE8);color:var(--g400);}
.lead-member__photo img{width:100%;height:100%;object-fit:contain;object-position:bottom;display:block;}
.lead-member__headline{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.5;
  font-size:clamp(1.08rem,2vw,1.4rem);color:var(--ink);margin:0 0 1rem;}
.lead-member__headline em{font-style:normal;color:var(--point);}
.lead-member__name{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;font-size:1.5rem;margin:0 0 1.1rem;}
.lead-member__name a{color:inherit;}
.lead-member__name span{font-size:.58em;font-weight:700;color:var(--g600);}
.lead-member__block{margin:0 0 .9rem;}
.lead-member__block b{display:block;font-size:.84rem;color:var(--point);margin-bottom:.3rem;}
.lead-member__block ul{list-style:none;margin:0;padding:0;}
.lead-member__block li{position:relative;padding-left:.9rem;font-size:.92rem;line-height:1.6;color:var(--g700);margin:0 0 .28rem;}
.lead-member__block li::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--point);}
.lead-member .btn{margin-top:.4rem;}
@media (max-width:820px){
  .lead-member{grid-template-columns:1fr;}
  .lead-member__photo{max-width:260px;margin:0 auto;}
}

/* ── 시설 갤러리 (컬팩의 특별함) ───────────────────────────────────── */
.facility{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,1.6vw,1.1rem);}
.facility__item{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--g100);aspect-ratio:3/2;}
.facility__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease);}
.facility__item:hover img{transform:scale(1.04);}
/* 첫 장은 크게 — 공간 전체가 보이는 사진을 앞에 둔다. */
.facility__item:first-child{grid-column:span 2;grid-row:span 2;}
.facility__cap{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .7rem;font-size:.8rem;font-weight:700;color:#fff;
  background:linear-gradient(to top,rgba(6,30,20,.72),rgba(6,30,20,0));opacity:0;transition:opacity .25s var(--ease);}
.facility__item:hover .facility__cap,.facility__item:focus-visible .facility__cap{opacity:1;}
@media (max-width:900px){.facility{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.facility{grid-template-columns:1fr;}.facility__item:first-child{grid-column:auto;grid-row:auto;}.facility__cap{opacity:1;}}

/* 라이트박스 — 사진을 누르면 큰 것으로. 스크립트는 main.js lightbox() */
.cf-lb{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:1rem;
  background:rgba(4,14,10,.9);}
.cf-lb.is-open{display:flex;}
.cf-lb__img{max-width:min(96vw,1200px);max-height:84vh;border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.5);}
.cf-lb__cap{position:absolute;left:0;right:0;bottom:1.2rem;text-align:center;color:#fff;font-size:.9rem;font-weight:700;}
.cf-lb__btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.4rem;cursor:pointer;}
.cf-lb__btn:hover{background:rgba(255,255,255,.28);}
.cf-lb__prev{left:.8rem;}.cf-lb__next{right:.8rem;}
.cf-lb__close{position:absolute;top:.8rem;right:.8rem;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:1.3rem;cursor:pointer;}