/* Sub hero */
.sub-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 82% 20%,rgba(190,175,128,.38),transparent 30%),
    linear-gradient(90deg,#fbfaf5 0%,#f2ecda 48%,#d5c69a 100%);
  border-bottom:1px solid #d6caa6;
}
.sub-hero-inner{
  position:relative; z-index:1;
  min-height:176px; display:flex; align-items:center; gap:40px;
}
.sub-copy .eyebrow{
  font-size:13px; color:var(--primary); font-weight:800; letter-spacing:.08em;
}
.sub-copy h1{
  margin:8px 0 12px; font-size:46px; line-height:1.15; letter-spacing:-.045em;
}
.sub-copy p{margin:0; color:#596579; font-size:16px}

/* Layout */
.content-layout{
  display:grid; grid-template-columns:210px minmax(0,1fr); gap:40px;
  padding:36px 0 80px;
}

/* Left menu */
.side-menu{
  align-self:start; position:sticky; top:112px;
}
.side-menu-title{
  padding:24px 22px; border-radius:20px 20px 0 0;
  background:linear-gradient(145deg,#a38f58,#6b5c36);
  color:#fff;
}
.side-menu-title small{display:block; font-size:12px; opacity:.72; letter-spacing:.08em}
.side-menu-title strong{display:block; margin-top:4px; font-size:24px; letter-spacing:-.03em}
.side-nav{
  border:1px solid var(--line); border-top:0; border-radius:0 0 20px 20px;
  background:#fff; overflow:hidden; box-shadow:var(--shadow);
}
.side-nav a{
  display:flex; align-items:center; justify-content:space-between;
  min-height:58px; padding:0 20px; border-bottom:1px solid #eef1f5;
  color:#465166; font-size:15px; font-weight:700; transition:.18s;
}
.side-nav a:last-child{border-bottom:0}
.side-nav a:hover{background:#fbfaf5; color:var(--primary)}
.side-nav a.active{
  background:var(--primary-soft); color:var(--primary);
  box-shadow:inset 4px 0 0 var(--primary);
}

/* Article */
.article-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:34px;
}
/* 매장 카드 목록 페이지(식당/편의점/카페): 카드 자체가 테두리로 구분되니
   article-head는 아래 간격만 좁게 둔다. */
.article-head.is-plain{margin-bottom:24px}
.article-head h2{margin:0; font-size:34px; letter-spacing:-.04em}
.article-head p{margin:0; color:#7b8494; font-size:16px}
.intro-box{
  padding:34px; border-radius:24px; background:linear-gradient(135deg,#fbfaf5,#f5f1e6);
  border:1px solid #e4dcc4; margin-bottom:44px;
}
.intro-box .label{font-size:13px; color:var(--primary); font-weight:800}
.intro-box h3{
  margin:7px 0 16px; font-size:28px; line-height:1.4; letter-spacing:-.035em;
}
.intro-box h3 span{color:var(--primary)}
.intro-box p{margin:0; color:#536074}
.intro-box-sign{margin-top:20px; text-align:right; color:var(--text)}
.intro-box-sign strong{font-weight:800; margin-right:8px}
.intro-box-sign span{font-size:13px; color:var(--muted)}

.section-block{margin-top:68px}

.section-title{
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.section-title:before{
  content:""; width:5px; height:28px; border-radius:999px; background:var(--primary);
}
.section-title h3{margin:0; font-size:25px; letter-spacing:-.03em}
.section-block p{color:#4b5565; margin:0 0 14px}

.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.value-card{
  border:1px solid var(--line); border-radius:18px; padding:24px; background:#fff;
  box-shadow:var(--shadow);
}
.value-no{
  width:34px; height:34px; border-radius:10px; background:var(--primary-soft);
  color:var(--primary); display:grid; place-items:center; font-weight:900; margin-bottom:16px;
}
.value-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.value-card .value-no{margin-bottom:0; flex-shrink:0}
.value-card h4{margin:0; font-size:19px}
.value-card p{margin:0; font-size:16px; color:#667085}
.benefit-grid{perspective:900px}
.benefit-grid .value-card{position:relative; overflow:hidden; isolation:isolate; outline:none; min-height:218px; opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .35s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease}
.benefit-grid.is-visible .value-card{opacity:1; transform:translateY(0)}
.benefit-grid.is-visible .value-card:nth-child(2){transition-delay:.07s}
.benefit-grid.is-visible .value-card:nth-child(3){transition-delay:.14s}
.benefit-grid .value-card::after{content:""; position:absolute; z-index:-1; width:150px; height:150px; right:-78px; bottom:-88px; border-radius:50%; background:var(--primary-soft); opacity:.75; transition:transform .35s ease, opacity .35s ease}
.benefit-grid .value-card:hover,.benefit-grid .value-card:focus-visible,.benefit-grid .value-card.is-active{transition-delay:0s; transform:translateY(-7px); border-color:#cbbb8f; box-shadow:0 18px 38px rgba(96,82,45,.14); background:#fffdf8}
.benefit-grid .value-card:hover::after,.benefit-grid .value-card:focus-visible::after,.benefit-grid .value-card.is-active::after{transform:scale(1.55); opacity:1}
.benefit-grid .value-card:hover .value-no,.benefit-grid .value-card:focus-visible .value-no,.benefit-grid .value-card.is-active .value-no{transform:scale(1.08); background:var(--primary); color:#fff}
.benefit-grid .value-no{transition:transform .3s ease, background .3s ease, color .3s ease}
.benefit-swipe-hint{display:none}

@media(prefers-reduced-motion:reduce){.benefit-grid .value-card,.benefit-grid.is-visible .value-card{opacity:1; transform:none; transition:none}}

.eligibility-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.eligibility-list li{position:relative; padding-left:26px; color:#4b5565; font-size:16px}
.eligibility-list li:before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--primary); font-weight:900;
}

.business-list{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.business-item{
  display:flex; gap:16px; align-items:flex-start; padding:20px;
  border:1px solid var(--line); border-radius:16px; background:#fff;
}
.business-icon{
  flex:0 0 42px; height:42px; border-radius:13px; background:var(--primary-soft);
  color:var(--primary); display:grid; place-items:center; font-weight:900;
}
.business-item h4{margin:0 0 4px; font-size:17px}
.business-item p{margin:0; font-size:16px; color:#667085}

/* Operation model (생협이란 - 운영방식) */
.operation-layout{
  display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
  margin-top:24px;
}
.operation-list{display:flex; flex-direction:column; gap:26px}
.operation-item{
  display:flex; gap:16px; align-items:flex-start;
  padding:10px 14px; margin:0 -14px; border-radius:14px;
  transition:background .25s, box-shadow .25s;
}
.operation-item.is-active{background:var(--primary-soft); box-shadow:inset 4px 0 0 var(--primary)}
.operation-no{
  flex:0 0 40px; width:40px; height:40px; border-radius:12px;
  background:var(--primary-soft); color:var(--primary);
  font-weight:900; font-size:17px; display:grid; place-items:center;
  transition:background .25s, color .25s;
}
.operation-item.is-active .operation-no{background:var(--primary); color:#fff}
.operation-item h4{margin:0 0 6px; font-size:17px}
.operation-item p{margin:0; font-size:16px; color:#667085}
.operation-diagram{display:flex; flex-direction:column; align-items:center; gap:14px}
.operation-diagram svg{width:100%; max-width:300px; height:auto; overflow:visible}
.operation-caption{margin:0; font-size:14px; color:var(--muted); text-align:center}

.op-path{transition:stroke-dashoffset .9s ease}
.op-circle{cursor:pointer; outline:none}
.op-circle circle{transition:stroke-width .2s, filter .2s}
.op-circle text{transition:font-size .2s}
.op-circle:hover circle, .op-circle:focus-visible circle{stroke-width:3}
.op-circle.is-active circle{stroke-width:4; filter:drop-shadow(0 4px 10px rgba(104,90,54,.35))}
.op-circle:focus-visible circle{outline:3px solid #c8b780; outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .op-path{transition:none}
  .operation-item, .operation-no{transition:none}
}

@media(max-width:1000px){
  .operation-layout{grid-template-columns:1fr}
  .operation-diagram{order:-1}
}

.quote{
  margin-top:68px; padding:28px 32px; border-radius:18px;
  background:#17233c; color:#fff;
}
.quote strong{font-size:20px; display:block; margin-bottom:8px}
.quote p{margin:0; color:rgba(255,255,255,.72)}

/* Landing-style pages with anchor-linked sections (조합원안내) */
.member-section{scroll-margin-top:130px}
.member-section + .member-section{margin-top:80px; padding-top:56px; border-top:1px solid var(--line)}
.capital-intro{padding:16px 18px; border-radius:12px; background:var(--primary-soft); color:var(--primary-dark); line-height:1.7}

/* Search result banner (공지사항 검색) */
.search-result-banner{
  margin:0 0 20px; padding:14px 18px; border-radius:12px;
  background:var(--primary-soft); color:var(--primary-dark); font-size:15px;
}
.search-result-banner a{margin-left:10px; color:var(--primary); font-weight:700; text-decoration:underline}

/* Campus filter tabs (식당/편의점/카페 세부 페이지) */
.filter-tabs{display:flex; gap:8px; margin-bottom:28px; flex-wrap:wrap}
/* article-head 안(h2 옆)에 들어갈 때는 article-head 자체의 gap이 여백을 대신하므로 없앤다 */
.article-head .filter-tabs{margin-bottom:0}
/* display:flex가 hidden 속성을 이기므로 명시적으로 눌러준다 */
.filter-tabs[hidden],.filter-tab[hidden]{display:none}
.filter-tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-weight:700; font-size:14px; color:var(--muted); cursor:pointer;
}
.filter-tab.is-active{background:var(--primary); color:#fff; border-color:var(--primary)}
/* 활성 탭 색을 해당 카테고리 배지 색과 맞춤 */
.filter-tab.is-active[data-cat="news"]{background:var(--knou-green); border-color:var(--knou-green)}
.filter-tab.is-active[data-cat="recruit"]{background:var(--knou-orange); border-color:var(--knou-orange)}
.filter-tab.is-active .campus-dot{background:#fff; outline:2px solid rgba(255,255,255,.6)}
.store-detail.is-hidden{display:none}
.campus-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--muted);
}
.filter-tab[data-campus] .campus-dot{background:var(--primary)}

/* Store summary stat cards (전체매장현황) */
.store-stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:40px}
.store-stat-card{
  border:1px solid var(--line); border-radius:18px; padding:26px; background:#fff;
  box-shadow:var(--shadow); text-align:center;
}
.store-stat-card strong{display:block; font-size:38px; font-weight:900; color:var(--primary); letter-spacing:-.02em}
.store-stat-card h4{margin:6px 0 8px; font-size:18px}
.store-stat-card span{display:block; font-size:13px; color:var(--muted)}
.store-stat-card .campus-counts{
  display:flex; justify-content:center; gap:7px; flex-wrap:wrap; margin-top:12px;
}
.store-stat-card .campus-count{
  display:inline-flex; align-items:center; gap:7px;
  min-height:34px; padding:7px 11px; border:1px solid #e2e7ee; border-radius:10px;
  background:#fff; color:#596579; font-size:13px; font-weight:700; line-height:1;
  box-shadow:0 1px 2px rgba(20,32,54,.04);
}
.store-stat-card .campus-count::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--campus-color);
}
.store-stat-card .campus-count-label{display:inline; color:inherit; font-size:inherit}
.store-stat-card .campus-count strong{
  display:inline; min-width:0; height:auto; padding-left:7px; border-left:1px solid #e2e7ee;
  background:none; color:#202a3a; font-size:13px; font-weight:900; letter-spacing:0;
}
.store-stat-card .campus-count{--campus-color:var(--primary)}

/* 캠퍼스가 하나뿐인 법인용 분류별 매장 표 (전체매장현황). knsu-coop과 동일 패턴 —
   campus-store-grid(캠퍼스 열 구분)는 캠퍼스 값이 없으면 아예 안 그려지므로 못 쓴다. */
.store-type-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start}

/* Campus-first store tables (전체매장현황) */
.type-block{margin-top:0}
.campus-store-grid{
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(4,auto);
  grid-auto-flow:column; gap:24px;
}
.campus-col{display:contents}
.campus-col-head{display:flex; align-items:center; gap:10px}
.campus-col-head .campus-dot{width:11px; height:11px; border-radius:50%; flex-shrink:0}
.campus-col-head[data-campus] .campus-dot{background:var(--primary)}
.campus-col-head h3{margin:0; font-size:20px; letter-spacing:-.03em}

.store-table-card{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.store-table-head{
  font-weight:850; font-size:17px; padding:16px 18px;
  border-bottom:1px solid var(--line);
}
.store-table-head.head-dining{background:color-mix(in srgb,var(--knou-gold) 84%,#5a4d2d); color:#fff}
.store-table-head.head-cafe{background:color-mix(in srgb,var(--knou-gold) 72%,white); color:#3f3723}
.store-table-head.head-cvs{background:color-mix(in srgb,var(--knou-gold) 42%,white); color:#51472c}
.store-table-head.head-other{background:#e2e8f0; color:#475569}
.store-row-list{list-style:none; margin:0; padding:0}
.store-row-list li+li{border-top:1px solid #eef1f5}
.store-row-link{
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  min-height:72px; padding:14px 18px; color:var(--text); text-decoration:none;
  transition:background-color .18s ease, color .18s ease;
}
.store-row-copy{display:flex; min-width:0; flex-direction:column; gap:5px}
.store-row-copy strong{font-size:15.5px; font-weight:850; line-height:1.35; letter-spacing:-.02em}
.store-row-copy small{color:var(--muted); font-size:12.5px; font-weight:600; line-height:1.35}
.store-row-arrow{
  display:grid; place-items:center; width:28px; height:28px; flex:0 0 auto; border-radius:9px;
  background:#f3f5f8; color:var(--primary); font-size:15px;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.store-row-link:hover{background:var(--primary-soft); color:var(--primary); text-decoration:none}
.store-row-link:hover .store-row-arrow{background:var(--primary); color:#fff; transform:translateX(2px)}
.store-row-link:visited{color:var(--text)}
.store-row-link:visited:hover{color:var(--primary)}
.store-row-link:focus-visible{position:relative; z-index:1; outline:2px solid var(--primary); outline-offset:-2px}
.store-row-link.is-static{cursor:default}
.store-row-empty{margin:0; padding:22px 18px; color:var(--muted); font-size:13px; text-align:center}

/* Store card (식당/편의점/카페 개별 매장). 사진 아래 텍스트를 쌓는 세로 카드 —
   가로로 사진|텍스트를 나누던 예전 방식은 데스크탑에서 사진만 한쪽에 쏠려 보이는
   문제가 있었다. 한 줄에 2장, 여백을 넉넉히 준다.
   auto-fit(auto-fill 아님)을 써야 매장이 1개뿐일 때 빈 트랙이 그대로 남지 않고
   있는 카드가 폭을 채운다. max-width는 그 반대로 카드가 하나뿐일 때
   지나치게 늘어나 사진이 과하게 커지는 것만 막는 안전장치. */
.store-card-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:32px 56px;
}
.store-detail{
  scroll-margin-top:110px;
  display:flex; flex-direction:column; max-width:520px;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:var(--shadow);
}
.store-card-media{position:relative}
.store-photo-main{
  position:relative; aspect-ratio:1.6; overflow:hidden; cursor:pointer;
  background:linear-gradient(135deg,#f3efe4,#d9ceb0);
}
.store-photo-main img{width:100%; height:100%; object-fit:cover; display:block}
/* 캠퍼스 색상 띠: 상단 필터 탭과 같은 색을 사진 왼쪽 가장자리에 준다(카드 배지와는 별개로,
   목록 필터 탭 색과 매장이 바로 매칭되도록 이전 방식을 되살렸다). 사진(img)이 이 위에
   그대로 덮이므로 z-index로 올린다. */
.store-photo-main::before{
  content:''; position:absolute; inset:0; left:0; width:4px; z-index:1;
  background:var(--primary);
}
/* 사진이 아직 없는 매장의 자리표시자 */
.store-noimg{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:#766b4d; text-align:center; padding:12px;
}
.store-noimg-icon{font-size:28px; line-height:1}
.store-noimg strong{font-size:14px}
.store-noimg small{font-size:11px; letter-spacing:.05em; color:#8393ad}
/* 매장명: 사진 위 왼쪽 상단에 크게 얹는다(캠퍼스 배지와 짝을 이루는 위치).
   사진 밝기와 무관하게 읽히도록 위쪽에 어두운 스크림을 깐다. */
.store-card-name-overlay{
  position:absolute; top:0; left:0; right:0; z-index:1;
  padding:14px 16px 34px;
  background:linear-gradient(180deg, rgba(8,14,28,.62), transparent);
}
.store-card-name-overlay h3{
  margin:0; color:#fff; font-size:19px; font-weight:800; letter-spacing:-.03em;
  text-shadow:0 1px 4px rgba(0,0,0,.35);
}

/* 캠퍼스 배지는 방송대 기본 테마색으로 통일한다. */
.store-campus-badge{
  position:absolute; left:14px; bottom:14px; z-index:1;
  padding:6px 12px; border-radius:999px;
  background:rgba(104,90,54,.68); backdrop-filter:blur(4px);
  color:#fff; font-size:11px; font-weight:800; letter-spacing:.05em;
  box-shadow:0 4px 10px rgba(15,23,42,.25);
}

/* 매장 사진 캐러셀: 대표+추가 사진(최대 3장)이 같은 자리에서 슬라이드로 넘어간다.
   슬라이드는 전부 겹쳐 쌓아두고(.store-photo-main이 relative) is-active만 보이게 한다
   — position:absolute라 캐러셀 높이가 사진 하나 분량으로 고정된다. */
.carousel-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.carousel-slide.is-active{opacity:1; pointer-events:auto}

/* 화살표: 평소엔 옅게 있다가 카드에 마우스를 올리면 또렷해진다 — 사진 한 장뿐인
   매장이 대부분이라 화살표가 항상 진하게 떠 있으면 괜히 산만하다. */
.carousel-arrow{
  position:absolute; top:50%; z-index:2; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%; border:0;
  background:rgba(10,20,40,.42); color:#fff; font-size:19px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
  opacity:0; transition:opacity .18s ease, background-color .18s ease;
}
.store-photo-main:hover .carousel-arrow{opacity:1}
.carousel-arrow:hover{background:rgba(10,20,40,.68)}
.carousel-arrow.prev{left:10px}
.carousel-arrow.next{right:10px}

.carousel-dots{
  position:absolute; left:0; right:0; bottom:10px; z-index:2;
  display:flex; justify-content:center; gap:6px;
}
.carousel-dot{
  width:7px; height:7px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.55); box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:background-color .18s ease, transform .18s ease;
}
.carousel-dot.is-active{background:#fff; transform:scale(1.25)}

.store-detail-info{padding:12px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1}
/* 정보 칸 안에서도 이름을 다시 보여준다 — 사진 위 오버레이는 훑어볼 때용,
   여긴 세부 정보를 읽을 때 흰 배경 위 진한 텍스트로 다시 확인하는 용도.
   h3 기본 line-height(1.5배)가 위아래로 여백을 크게 먹어서 꽉 눌러준다. */
.store-card-head{display:flex; align-items:baseline; gap:10px}
.store-card-head h3{margin:0; font-size:19px; line-height:1.15; letter-spacing:-.03em}

.store-meta{margin:0; display:flex; flex-direction:column; gap:8px}
.store-meta-row{display:flex; align-items:baseline; gap:10px; font-size:14px}
.store-meta-row dt{
  display:flex; align-items:center; gap:6px; margin:0; width:76px; flex-shrink:0;
  color:var(--muted); font-weight:700;
}
.store-meta-row dd{margin:0; color:var(--text)}
.meta-icon{font-size:13px}

.store-cta{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:13px 18px; border-radius:12px; background:var(--primary-soft); color:var(--primary);
  font-weight:800; font-size:14px; transition:.18s;
}
.store-cta:hover{background:var(--primary); color:#fff}

/* 기타 안내는 관리자가 줄바꿈으로 여러 줄을 넣는다 */
.store-note{
  white-space:pre-line; margin:12px 0 0; padding:12px 14px;
  background:var(--primary-soft); border-radius:10px;
  font-size:14.5px; line-height:1.6; color:var(--text);
}
.store-empty{padding:40px 0; text-align:center; color:var(--muted)}

/* Store photo modal */
.photo-modal{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center; padding:24px;
}
.photo-modal.is-open{display:flex}
.photo-modal-backdrop{position:absolute; inset:0; background:rgba(10,20,40,.6)}
.photo-modal-content{
  position:relative; z-index:1; width:min(784px,100%);
  background:#fff; border-radius:16px; padding:24px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.photo-modal-image{
  aspect-ratio:1.5; border-radius:12px; background:linear-gradient(135deg,#f3efe4,#d9ceb0);
  display:grid; place-items:center; color:#766b4d; font-weight:700; font-size:20px; text-align:center;
  padding:20px; overflow:hidden;
}
/* 모달은 트리거의 내용을 그대로 복제한다.
   사진이 들어오면 1.5 고정 비율을 푼다 — 세로 사진(800×1333 같은 것)이 가로 상자에 갇혀
   실제보다 훨씬 작게(폭 205px 정도) 그려지던 문제가 있었다. 이제 상자가 사진을 따라간다. */
.photo-modal-image:has(img){padding:0; background:none; aspect-ratio:auto; max-height:78vh}
.photo-modal-image img{
  width:auto; height:auto; max-width:100%; max-height:78vh;
  object-fit:contain; display:block; margin:0 auto; border-radius:12px;
}
.photo-modal-caption{margin:14px 0 0; text-align:center; font-size:15px; color:var(--muted); font-weight:700}
.photo-modal-close{
  position:absolute; top:-16px; right:-16px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.2);
  font-size:18px; line-height:1; cursor:pointer; display:grid; place-items:center;
}
/* 모달 좌우 이동 — 사진이 1장뿐인 매장을 열면 JS가 [hidden]을 건다.
   카드 화살표(.carousel-arrow)와 달리 여긴 항상 크고 또렷하게 둔다 —
   모달은 사진을 자세히 보러 들어온 상태라 화살표가 옅으면 오히려 못 찾는다. */
.photo-modal-nav{
  position:absolute; top:50%; z-index:2; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.2);
  font-size:22px; line-height:1; color:var(--text); cursor:pointer; display:grid; place-items:center;
  transition:background-color .15s ease;
}
.photo-modal-nav:hover{background:var(--primary-soft)}
.photo-modal-nav[hidden]{display:none}
.photo-modal-nav.prev{left:-22px}
.photo-modal-nav.next{right:-22px}
@media (max-width:600px){
  /* 좁은 화면에서 -22px는 모달 밖으로 나가 화면을 벗어난다 — 안쪽으로 당긴다 */
  .photo-modal-nav.prev{left:6px}
  .photo-modal-nav.next{right:6px}
}

/* Data table (연혁/매장현황/조합원현황/임원현황 공용) */
.table-wrap{
  overflow-x:auto; border:1px solid var(--line); border-radius:16px;
  margin-bottom:32px; box-shadow:var(--shadow);
}
.data-table{width:100%; border-collapse:collapse; font-size:14px}
.data-table th, .data-table td{
  padding:14px 18px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap;
}
.data-table td:nth-child(2){white-space:normal}
.data-table thead th{
  background:#fbfaf5; font-weight:800; color:#344054; font-size:13px;
}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:#fafcff}
.data-table tfoot td{font-weight:800; background:#fbfaf5}
.table-caption{font-size:14px; font-weight:800; color:var(--text); margin:0 0 12px}

/* Role badges (임원현황) */
.role-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 13px; border-radius:999px; font-size:12.5px; font-weight:800;
  white-space:nowrap;
}
.role-badge.role-chair{background:var(--primary); color:#fff}
.role-badge.role-director{background:var(--primary-soft); color:var(--primary-dark)}
.role-badge.role-auditor{background:#f1f3f7; color:#5b6472; border:1px solid var(--line)}
.data-table tbody tr.role-chair-row{background:linear-gradient(135deg,#fbfaf5,var(--primary-soft))}
.data-table tbody tr.role-chair-row td{font-weight:700}
.data-table tbody tr.role-chair-row:hover{background:linear-gradient(135deg,#fbfaf5,var(--primary-soft))}
.data-table tbody tr.role-divider td{border-top:2px solid #182033}
.officer-table{table-layout:fixed}
.officer-table th:nth-child(n+2), .officer-table td:nth-child(n+2){white-space:normal}

/* History timeline (연혁) */
.year-nav{
  display:flex; gap:8px; flex-wrap:wrap;
  padding:22px 26px; margin-bottom:30px;
  position:sticky; top:84px; z-index:5;
  border-radius:24px; border:1px solid #e4dcc4;
  background:linear-gradient(135deg,#fbfaf5,#f5f1e6);
}
.year-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 18px; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-weight:700; font-size:14px; color:var(--muted);
  cursor:pointer; font-variant-numeric:tabular-nums; transition:.15s;
}
.year-btn:hover{border-color:var(--primary); color:var(--primary)}
.year-btn.is-active{background:var(--primary); color:#fff; border-color:var(--primary)}
.year-break{flex-basis:100%; height:0}

.year-section{scroll-margin-top:280px; margin-bottom:32px}
.year-section:last-child{margin-bottom:0}
.year-heading{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.year-heading:before{content:""; width:5px; height:22px; border-radius:999px; background:var(--primary)}
.year-heading h3{margin:0; font-size:21px; letter-spacing:-.03em; font-variant-numeric:tabular-nums}

.year-events{display:flex; flex-direction:column; gap:10px}
.history-event{
  display:flex; align-items:baseline; gap:18px;
  padding:14px 18px; border:1px solid var(--line); border-radius:14px;
  background:#fff; box-shadow:var(--shadow);
}
.history-date{
  flex:0 0 auto; font-size:13px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.history-desc{margin:0; font-size:16px; color:var(--text)}

@media(max-width:640px){
  .year-nav{top:70px; padding:16px 18px}
}

@media(max-width:760px){
  .history-event{flex-direction:column; align-items:flex-start; gap:4px; padding:12px 16px}
}

/* Board list (공지사항/자료실 공용) */
.board-list{list-style:none; margin:0 0 24px; padding:0; border-top:2px solid #182033}
.board-list li{
  display:flex; align-items:center; gap:16px; padding:18px 8px;
  border-bottom:1px solid #eef1f5; font-size:14px;
  border-radius:10px; transition:background-color .18s ease;
}
.board-list li:not(.board-empty):hover{background:var(--primary-soft)}
.board-list li.is-hidden{display:none}
.board-list li.board-empty{justify-content:center; color:var(--muted); padding:48px 8px}
.board-num{width:32px; text-align:center; color:var(--muted); font-size:13px; flex-shrink:0}
.board-title{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px;
  font-size:16px; font-weight:700; letter-spacing:-.02em;
}
.board-title .badge{font-size:12px; padding:3px 10px; flex-shrink:0}
.board-list li:hover .board-title{color:var(--primary-dark)}
.board-date{color:#98a2b3; font-size:13px; white-space:nowrap}
/* 조회수 — 값이 도착하기 전에도 열 너비가 흔들리지 않도록 고정폭 */
.board-views{width:52px; text-align:right; color:#98a2b3; font-size:13px; white-space:nowrap; flex-shrink:0; font-variant-numeric:tabular-nums}
.board-file{color:var(--primary); font-size:13px; font-weight:700; white-space:nowrap}

/* Pagination (공지사항/자료실 공용) */
.pagination{display:flex; justify-content:center; align-items:center; gap:6px; margin:8px 0 12px}
/* display:flex가 hidden 속성을 이기므로 명시적으로 눌러준다 (1페이지일 때 빈 영역 방지) */
.pagination[hidden]{display:none}
.page-btn{
  min-width:38px; height:38px; padding:0 10px; border-radius:10px;
  border:1px solid var(--line); background:#fff;
  font-size:14px; font-weight:700; color:#5b6472; cursor:pointer;
  font-variant-numeric:tabular-nums; transition:.15s;
}
.page-btn:hover:not(:disabled){border-color:var(--primary); color:var(--primary); background:var(--primary-soft)}
.page-btn.is-active{background:var(--primary); border-color:var(--primary); color:#fff}
.page-btn:disabled{opacity:.4; cursor:default}
.page-gap{color:var(--muted); padding:0 2px}

/* 첨부파일 목록 (공지 상세) */
.board-attachments{
  margin-top:32px; padding:20px 22px; border:1px solid var(--line); border-radius:14px;
  background:#f8fafc;
}
.board-attachments h3{margin:0 0 12px; font-size:15px; letter-spacing:-.02em}
.board-attachments ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.board-attachments a{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--primary); font-size:14px; font-weight:700; word-break:break-all;
}
.board-attachments a:before{content:"📎"; font-size:13px}
.board-attachments a:hover{text-decoration:underline}
.att-size{color:var(--muted); font-weight:500; font-size:12.5px; white-space:nowrap}

/* Board view (공지사항/자료실 상세보기 임시 페이지) */
.board-view-head{
  padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:28px;
}
.board-view-head .badge{margin-bottom:10px}
.board-view-badges{display:flex; gap:6px; align-items:center}
.board-view-title{margin:6px 0 14px; font-size:26px; line-height:1.4; letter-spacing:-.03em}
.board-view-meta{display:flex; gap:16px; color:var(--muted); font-size:13px}
.board-view-body{
  min-height:200px; padding:8px 0 40px; color:var(--text); font-size:16px; line-height:1.8;
  overflow-wrap:break-word;
}
.board-view-body p{margin:0 0 16px}
/* CMS 본문은 원본 크기 그대로 들어와서(예: 1080px 이미지) 컬럼 폭을 넘길 수 있다. 폭에 맞춰 줄인다. */
.board-view-body img,
.board-view-body video{max-width:100%; height:auto}
.board-view-body iframe,
.board-view-body embed,
.board-view-body object{max-width:100%}
/* 표·코드블록은 줄일 수 없으니 자기 영역 안에서만 가로 스크롤 */
.board-view-body table{display:block; max-width:100%; overflow-x:auto}
.board-view-body pre{max-width:100%; overflow-x:auto}
.board-view-foot{padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:center}

/* Location (찾아오시는길) */
.location-card{
  display:flex; gap:22px; align-items:flex-start; padding:34px;
  border:1px solid #e4dcc4; border-radius:24px;
  background:linear-gradient(135deg,#fbfaf5,#f5f1e6);
  margin-bottom:28px;
}
.location-card .value-no{flex-shrink:0}
.location-details h3{margin:0 0 14px; font-size:22px; letter-spacing:-.03em}
.location-details p{margin:0 0 6px; font-size:16px; color:var(--text)}
.location-details p strong{display:inline-block; width:48px; color:var(--muted); font-weight:700}

.location-map{
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow); aspect-ratio:16/9;
}
.location-map iframe{width:100%; height:100%; border:0; display:block}

@media(max-width:640px){
  .location-card{flex-direction:column; padding:24px}
  .location-map{aspect-ratio:4/3}
}

/* Greeting (이사장 인사말) */
.greeting-layout{display:grid; grid-template-columns:220px 1fr; gap:32px; align-items:start; margin-bottom:34px}
.greeting-layout.no-photo{grid-template-columns:1fr}
.greeting-photo{
  width:220px; height:260px; border-radius:20px;
  background:linear-gradient(135deg,#f3efe4,#d9ceb0);
  display:grid; place-items:center; color:#766b4d; font-weight:800; text-align:center;
}
.greeting-caption{margin-top:14px; text-align:center}
.greeting-caption strong{display:block; font-size:16px}
.greeting-caption span{display:block; font-size:13px; color:var(--muted); margin-top:2px}

@media(max-width:1000px){
  .content-layout{grid-template-columns:210px minmax(0,1fr); gap:28px}
  .value-grid{grid-template-columns:1fr}
  .business-list{grid-template-columns:1fr}
  .greeting-layout{grid-template-columns:1fr; justify-items:center; text-align:center}
  .store-stat-grid{grid-template-columns:1fr}
  .campus-store-grid{grid-template-columns:1fr}
  .store-type-grid{grid-template-columns:1fr}
}

@media(max-width:760px){
  .sub-hero-inner{min-height:190px}
  .sub-copy h1{font-size:34px}
  .content-layout{
    display:block; padding:28px 0 60px;
  }
  .side-menu{
    position:static; margin-bottom:28px;
  }
  .side-menu-title{
    border-radius:16px 16px 0 0; padding:18px 20px;
  }
  .side-menu-title strong{font-size:20px}
  .side-nav{
    display:grid; grid-template-columns:repeat(3,1fr);
    border-radius:0 0 16px 16px;
  }
  .side-nav a{
    min-height:48px; padding:0 8px; justify-content:center; text-align:center;
    font-size:13px; border-bottom:0; border-right:1px solid #eef1f5;
  }
  .side-nav a:nth-child(n+4){border-top:1px solid #eef1f5}
  .side-nav a:nth-child(3n){border-right:0}
  .side-nav a span:last-child{display:none}
  .side-nav a.active{box-shadow:inset 0 -3px 0 var(--primary)}
  .article-head{align-items:flex-start; flex-direction:column}
  .article-head h2{font-size:29px}
  .intro-box{padding:24px}
  .intro-box h3{font-size:23px}
  .data-table th, .data-table td{padding:12px 14px; font-size:13px}
  .store-card-grid{grid-template-columns:1fr; gap:18px}
  .campus-title{font-size:19px}
}

@media(max-width:480px){
  .side-nav{grid-template-columns:repeat(2,1fr)}
  .side-nav a:nth-child(n+3){border-top:1px solid #eef1f5}
  .side-nav a:nth-child(odd){border-right:1px solid #eef1f5}
  .side-nav a:nth-child(even){border-right:0}
}

@media(max-width:760px){
  .benefit-grid{display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; margin-inline:-20px; padding:10px 20px 22px; scroll-padding-inline:20px; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-inline:contain}
  .benefit-grid::-webkit-scrollbar{display:none}
  .benefit-grid .value-card{flex:0 0 min(78vw,300px); min-height:205px; scroll-snap-align:start}
  .benefit-grid .value-card:hover,.benefit-grid .value-card:focus-visible,.benefit-grid .value-card.is-active{transform:translateY(-4px)}
  .benefit-swipe-hint{display:flex; align-items:center; justify-content:center; gap:8px; margin:0; color:#687085; font-size:13px; font-weight:700}
  .benefit-swipe-hint span{color:var(--primary); font-size:18px}
}