/* Sub hero */
.sub-hero{
  background:
    radial-gradient(circle at 84% 25%,rgba(15,69,200,.14),transparent 24%),
    linear-gradient(135deg,#f4f8ff,#eaf2ff);
  border-bottom:1px solid #dfe8f6;
}
.sub-hero-inner{
  min-height:230px; display:flex; align-items:center; justify-content:space-between; 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}
.sub-symbol{
  width:190px; height:140px; border-radius:32px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),
    linear-gradient(145deg,#2b66df,#0c3aa7);
  background-size:28px 28px,28px 28px,auto;
  box-shadow:0 22px 50px rgba(15,69,200,.2);
  transform:rotate(-5deg);
}

/* Breadcrumb */
.breadcrumb{
  border-bottom:1px solid var(--line); background:#fff;
}
.breadcrumb-inner{
  height:58px; display:flex; align-items:center; gap:10px; color:#7b8494; font-size:14px;
}
.breadcrumb strong{color:#344054}
.breadcrumb a{color:var(--primary); font-weight:700}
.breadcrumb a:hover{text-decoration:underline}

/* Layout */
.content-layout{
  display:grid; grid-template-columns:250px minmax(0,1fr); gap:48px;
  padding:54px 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,#164fc7,#103b99);
  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:#f7faff; 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;
  padding-bottom:20px; border-bottom:2px solid #182033; margin-bottom:34px;
}
.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,#f7faff,#edf4ff);
  border:1px solid #dfe9fb; 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}

.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}

.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(15,69,200,.35))}
.op-circle:focus-visible circle{outline:3px solid #97b3ec; 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)}

/* Campus filter tabs (식당/편의점/카페 세부 페이지) */
.filter-tabs{display:flex; gap:8px; margin-bottom:28px; flex-wrap:wrap}
.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-campus="부민"]{background:#1f9f6d; border-color:#1f9f6d}
.filter-tab.is-active[data-campus="구덕"]{background:#e2872f; border-color:#e2872f}
.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)}
.filter-tab[data-campus="부민"] .campus-dot{background:#1f9f6d}
.filter-tab[data-campus="구덕"] .campus-dot{background:#e2872f}

/* 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-count{font-weight:800}
.store-stat-card .campus-count.c-seunghak{color:var(--primary)}
.store-stat-card .campus-count.c-bumin{color:#1f9f6d}
.store-stat-card .campus-count.c-gudeok{color:#e2872f}

/* 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[data-campus="부민"] .campus-dot{background:#1f9f6d}
.campus-col-head[data-campus="구덕"] .campus-dot{background:#e2872f}
.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:800; font-size:15px; padding:14px 18px;
}
.store-table-head.head-dining{background:var(--primary-dark); color:#fff}
.store-table-head.head-cvs{background:var(--primary); color:#fff}
.store-table-head.head-cafe{background:var(--primary-soft); color:var(--primary-dark)}
.store-table{width:100%; border-collapse:collapse; font-size:13.5px}
.store-table th{
  text-align:left; padding:12px 18px; font-size:12px; font-weight:700;
  color:var(--muted); border-bottom:1px solid #eef1f5;
}
.store-table td{padding:12px 18px; border-bottom:1px solid #eef1f5; color:var(--text)}
.store-table tbody tr:last-child td{border-bottom:0}
.store-table .empty td{color:var(--muted); font-size:13px}

/* Store detail row (식당/편의점/카페 개별 매장 리스트 — 강원대 생협 레이아웃 참고) */
.store-detail{
  display:grid; grid-template-columns:1fr 2fr; gap:24px;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.store-detail:first-of-type{padding-top:0}
.store-detail:last-of-type{border-bottom:0}
.store-photo-main{
  aspect-ratio:1.5; border-radius:8px; background:linear-gradient(135deg,#eaf1fb,#c9d8f5);
  display:grid; place-items:center; color:#5b6b8c; font-weight:700; font-size:12px; text-align:center;
  box-shadow:inset 4px 0 0 0 var(--primary);
  cursor:pointer;
}
.store-detail[data-campus="부민"] .store-photo-main{box-shadow:inset 4px 0 0 0 #1f9f6d}
.store-detail[data-campus="구덕"] .store-photo-main{box-shadow:inset 4px 0 0 0 #e2872f}
.store-detail-info h3{margin:0 0 8px; font-size:20px; letter-spacing:-.03em}
.store-detail-info p{margin:0 0 10px; font-size:16px; color:var(--text)}
.store-detail-info p strong{color:var(--muted); font-weight:700; margin-right:4px}
.menu-link{color:var(--primary); font-weight:800}
.store-thumbs{display:flex; gap:10px; margin-top:12px}
.store-thumb-small{
  width:110px; height:74px; flex-shrink:0; border-radius:6px;
  background:linear-gradient(135deg,#eef4ff,#dde8f8);
  display:grid; place-items:center; color:#65758c; font-weight:700; font-size:11px; text-align:center;
  cursor:pointer;
}

/* 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(560px,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,#eaf1fb,#c9d8f5);
  display:grid; place-items:center; color:#5b6b8c; font-weight:700; font-size:20px; text-align:center;
  padding:20px;
}
.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;
}

/* 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:#f7faff; 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:#f7faff}
.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,#f7faff,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,#f7faff,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 #dfe9fb;
  background:linear-gradient(135deg,#f7faff,#edf4ff);
}
.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;
}
.board-list li.is-hidden{display:none}
.board-num{width:32px; text-align:center; color:var(--muted); font-size:13px; flex-shrink:0}
.board-title{flex:1; font-weight:600; display:flex; align-items:center; gap:8px}
.board-date{color:#98a2b3; font-size:13px; white-space:nowrap}
.board-file{color:var(--primary); font-size:13px; font-weight:700; white-space:nowrap}

/* Location (찾아오시는길) */
.location-card{
  display:flex; gap:22px; align-items:flex-start; padding:34px;
  border:1px solid #dfe9fb; border-radius:24px;
  background:linear-gradient(135deg,#f7faff,#edf4ff);
  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-photo{
  width:220px; height:260px; border-radius:20px;
  background:linear-gradient(135deg,#eaf1fb,#c9d8f5);
  display:grid; place-items:center; color:#5b6b8c; 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}
}

@media(max-width:760px){
  .sub-hero-inner{min-height:190px}
  .sub-copy h1{font-size:34px}
  .sub-symbol{display:none}
  .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-detail{grid-template-columns:1fr; gap:12px; padding:18px 0}
  .store-thumbs{margin-top:8px}
  .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}
}