/* ──────────────────────────────────────────
   POST CONTENT MODAL  (공지/자료실 공통)
────────────────────────────────────────── */
/* ──────────────────────────────────────────
   ABOUT PAGE  (사업소개 — 5개 서브페이지 공통 래퍼)
   개요/인사말/연혁/조직: 이미지 대신 HTML 로 렌더 (스타일은 index.css 의 .ab- / .org- 클래스)
────────────────────────────────────────── */
// 상대경로 사용 — 어느 도메인(ckl.snu.ac.kr / *.vercel.app)에서든 그대로 동작
const SITE_BASE = '';

const ABOUT_DATA = {
  about_overview: {
    ko: { title: '사업개요', label: '사업개요' },
    en: { title: 'Overview', label: 'Overview' },
    contentKo: `
      <div class="ab-list">
        <div class="ab-item">
          <div class="ab-ico"><i class="fas fa-bullseye"></i></div>
          <div>
            <div class="ab-lbl">과제명</div>
            <div class="ab-val"><strong>수신자와의 만남을 통한 한국어문학의 이해와 확장</strong></div>
          </div>
        </div>
        <div class="ab-item">
          <div class="ab-ico"><i class="fas fa-calendar-days"></i></div>
          <div>
            <div class="ab-lbl">사업 기간</div>
            <div class="ab-val">2026. 7. 1. ~ 2031. 6. 30. <span style="color:#8a94a6;">(2단계)</span></div>
          </div>
        </div>
        <div class="ab-item">
          <div class="ab-ico"><i class="fas fa-list-check"></i></div>
          <div>
            <div class="ab-lbl">주요 사업</div>
            <div class="ab-val">전 세계 한국어문학 학습자를 위한 영상 제작 및 플랫폼 구축
            </div>
            <ul class="ab-sub">
              <li>1단계 제작 강의 콘텐츠의 재구성 <span class="note">(진입–이해–확장 단계별)</span></li>
              <li>웹 기반 학습 플랫폼 구축</li>
              <li>수신자 유형별(기관·개인) 맞춤형 콘텐츠 제공</li>
            </ul>
          </div>
        </div>
      </div>`,
    contentEn: `
      <div class="ab-list">
        <div class="ab-item">
          <div class="ab-ico"><i class="fas fa-bullseye"></i></div>
          <div>
            <div class="ab-lbl">Project title</div>
            <div class="ab-val"><strong>Understanding and Expanding Korean Language and Literature through Engagement with Audiences</strong></div>
          </div>
        </div>
        <div class="ab-item">
          <div class="ab-ico"><i class="fas fa-calendar-days"></i></div>
          <div>
            <div class="ab-lbl">Period</div>
            <div class="ab-val">July 1, 2026 – June 30, 2031 <span style="color:#8a94a6;">(Phase 2)</span></div>
          </div>
        </div>
        <div class="ab-item">
          <div class="ab-ico"><i class="fas fa-list-check"></i></div>
          <div>
            <div class="ab-lbl">Main project</div>
            <div class="ab-val">Producing videos and building a platform for Korean literature learners worldwide
            </div>
            <ul class="ab-sub">
              <li>Restructuring Phase 1 lecture content <span class="note">(by stage: entry – understanding – expansion)</span></li>
              <li>Building a web-based learning platform</li>
              <li>Providing tailored content by audience type (institutions · individuals)</li>
            </ul>
          </div>
        </div>
      </div>`,
  },
  about_greeting: {
    ko: { title: '인사말', label: '인사말' },
    en: { title: 'Greetings', label: 'Greetings' },
    contentKo: `
      <div class="ab-badge">
        <span class="k">담당 연구소</span>
        <span class="v">서울대학교 인문학연구원 한국어문학연구소</span>
      </div>
      <div class="ab-title">인사말</div>
      <div class="ab-letter">
        <p>한국어문학연구소는 인문학연구원 산하의 한국문학연구소(2003년 설립)와 한국어연구소(2006년 설립)를 통합하여 설립되었습니다. 한국어와 한국문학을 개별적으로 연구하기보다 통합적인 관점에서 함께 연구하는 것이 학문 발전에 더욱 효과적이라는 생각 아래 설립되었으며, 한국어문학 연구와 국내외 학술 확산 사업을 적극적으로 수행하고 있습니다.</p>
        <p>한국어문학연구소는 1단계 &lt;K학술확산연구소사업&gt;(2021.7∼2026.6)을 통해 한국어문학 분야의 우수한 강의를 영상 콘텐츠로 제작하여 국내외 교육·연구기관에 보급함으로써 한국어문학의 국제적 확산에 기여하였습니다.</p>
        <p>이러한 성과를 바탕으로 현재 2단계 &lt;K학술확산연구소사업&gt;을 수행하고 있습니다. 2단계 사업에서는 기존에 구축한 교육 콘텐츠를 다양한 형태로 재구성하고 디지털 플랫폼을 활용한 보급을 확대하여, 국내외 연구자와 학습자는 물론 일반 대중까지 한국어문학을 보다 쉽고 폭넓게 접할 수 있는 학술확산 체계를 구축하고 있습니다. 또한 한국어문학의 연구 성과를 교육 콘텐츠와 연계하여 학술정보의 접근성과 활용성을 높이고, 변화하는 교육 환경에 부합하는 새로운 학술확산 모델을 만들어 가고자 노력하고 있습니다.</p>
        <p>이와 함께 한국어문학연구소는 학술대회와 연구세미나 개최, 공동연구 수행, 학술자료의 체계적 축적과 공유 등을 통해 한국어문학 연구 기반을 지속적으로 강화하고 있습니다. 이러한 연구 성과를 바탕으로 국내외 대학 및 연구기관과의 학술 교류를 확대하고, 연구와 교육, 학술확산이 유기적으로 선순환하는 연구 환경을 구축하고 있습니다. 앞으로도 한국어문학연구소는 한국어문학 연구의 학문적 성과를 국내외에 널리 확산하고, 연구자와 학습자를 연결하는 학술확산의 거점으로서 한국학 발전에 기여해 나가겠습니다.</p>
      </div>
      <div class="ab-sign">한국어문학연구소 소장 정승철<span>서울대학교 국어국문학과 교수 · 연구책임자</span></div>`,
    contentEn: `
      <div class="ab-badge">
        <span class="k">Host researcher center</span>
        <span class="v">Seoul National University, College of Humanities<br>Center for Korean Language and Literature</span>
      </div>
      <div class="ab-title">Letter from the Director</div>
      <div class="ab-letter">
        <p>The Center for Korean Language and Literature was established by merging the Institute of Korean Literature Studies (est. 2003) and the Institute of Korean Language Studies (est. 2006), both under the Institute of Humanities. It was founded on the belief that studying Korean language and literature together, from an integrated perspective, is more effective for scholarship than studying them separately, and it actively pursues research in Korean language and literature as well as the domestic and international diffusion of scholarship.</p>
        <p>Through Phase 1 of the K-Academics Diffusion project (July 2021 – June 2026), the Center produced outstanding lectures in Korean language and literature as video content and distributed them to educational and research institutions at home and abroad, contributing to the international diffusion of the field.</p>
        <p>Building on these achievements, we are now carrying out Phase 2 of the K-Academics Diffusion project. In Phase 2, we are restructuring the educational content built so far into diverse formats and expanding distribution through digital platforms, establishing a scholarly-diffusion system through which not only researchers and learners at home and abroad but also the general public can access Korean language and literature more easily and broadly. We are also linking research outcomes with educational content to improve the accessibility and usability of academic information, and striving to build a new model of scholarly diffusion suited to a changing educational environment.</p>
        <p>Alongside this, the Center continues to strengthen the foundations of research in Korean language and literature by hosting conferences and research seminars, conducting joint research, and systematically accumulating and sharing academic resources. On this basis, we are expanding scholarly exchange with universities and research institutions at home and abroad, and building a research environment in which research, education, and scholarly diffusion reinforce one another in a virtuous cycle. The Center will continue to spread the scholarly achievements of Korean language and literature widely at home and abroad, and to contribute to the advancement of Korean studies as a hub of scholarly diffusion that connects researchers and learners.</p>
      </div>
      <div class="ab-sign">Jung, Seung-chul, Professor<span>Department of Korean Language and Literature</span></div>`,
  },
  about_history: {
    ko: { title: '연혁', label: '연혁' },
    en: { title: 'History', label: 'History' },
    contentKo: `
      <div class="ab-title">연혁</div>
      <div class="ab-tl">
        <div class="ab-tl-item"><div class="ab-tl-date">2009. 8. 7.</div><div class="ab-tl-event">한국어문학연구소 설립</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2009. 9. 1.</div><div class="ab-tl-event">초대 소장 송철의 교수 취임</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2010. 6. 15.</div><div class="ab-tl-event">제1회 학술발표회 개최</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2011. 1. 28.–29.</div><div class="ab-tl-event">창립기념 국제학술대회 개최</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2011. 9. 1.</div><div class="ab-tl-event">2대 소장 : 김명호 교수</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2013. 9. 1.</div><div class="ab-tl-event">3대 소장 : 송철의 교수</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2015. 6. 1.</div><div class="ab-tl-event">4대 소장 : 장소원 교수</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2017. 6. 1.</div><div class="ab-tl-event">5대 소장 : 장소원 교수</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2019. 6. 1.</div><div class="ab-tl-event">6대 소장 : 방민호 교수</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2020. 4. 1.</div><div class="ab-tl-event">7대 소장 : 정승철 교수</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2021. 7. 1.</div><div class="ab-tl-event">&lt;K학술확산연구소 사업&gt; (한국학진흥사업단 주관) 개시</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2022. 4. 1.</div><div class="ab-tl-event">8대 소장 : 정승철 교수</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2022. 10. 21.~22.</div><div class="ab-tl-event">국제학술대회 개최</div></div>
      </div>
      <div class="ab-title mt">참고 — 전신 연구소</div>
      <div class="ab-ref">
        <div class="ab-ref-h">한국문학연구소</div>
        <div class="ab-tl">
          <div class="ab-tl-item"><div class="ab-tl-date">2004. 6. 1.</div><div class="ab-tl-event">1대 소장 : 오세영 교수</div></div>
          <div class="ab-tl-item"><div class="ab-tl-date">2006. 6. 1.</div><div class="ab-tl-event">2대 소장 : 오세영 교수</div></div>
          <div class="ab-tl-item"><div class="ab-tl-date">2007. 9. 1.</div><div class="ab-tl-event">3대 소장 : 조남현 교수</div></div>
        </div>
        <div class="ab-ref-h">한국어연구소</div>
        <div class="ab-tl">
          <div class="ab-tl-item"><div class="ab-tl-date">2006.</div><div class="ab-tl-event">초대 소장 : 이상억 교수</div></div>
        </div>
      </div>`,
    contentEn: `
      <div class="ab-title">Timeline</div>
      <div class="ab-tl">
        <div class="ab-tl-item"><div class="ab-tl-date">2009. 8. 7.</div><div class="ab-tl-event">Establishment of the Center for Korean Language and Literature</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2009. 9. 1.</div><div class="ab-tl-event">1st center director, Song Cheol Eui</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2010. 6. 15.</div><div class="ab-tl-event">1st Academic Conference</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2011. 1. 28.–29.</div><div class="ab-tl-event">1st International Academic Conference</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2011. 9. 1.</div><div class="ab-tl-event">2nd director, Kim Myeong-ho</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2013. 9. 1.</div><div class="ab-tl-event">3rd director, Song Cheol Eui</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2015. 6. 1.</div><div class="ab-tl-event">4th director, Jang So-won</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2017. 6. 1.</div><div class="ab-tl-event">5th director, Chang So-won</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2019. 6. 1.</div><div class="ab-tl-event">6th director, Bang Min-ho</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2020. 4. 1.</div><div class="ab-tl-event">7th director, Jung Seung-chul</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2021. 7. 1.</div><div class="ab-tl-event">Began the "K-Academics at the Center for Korean Language and Literature" project (supervised by the Korean Studies Promotion Service)</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2022. 4. 1.</div><div class="ab-tl-event">8th director, Jung Seung-chul</div></div>
        <div class="ab-tl-item"><div class="ab-tl-date">2022. 10. 21.~22.</div><div class="ab-tl-event">International academic conference held</div></div>
      </div>
      <div class="ab-title mt">References — Predecessor institutes</div>
      <div class="ab-ref">
        <div class="ab-ref-h">Institute of Korean Literature Studies</div>
        <div class="ab-tl">
          <div class="ab-tl-item"><div class="ab-tl-date">2004. 6. 1.</div><div class="ab-tl-event">1st director, Oh Seyoung</div></div>
          <div class="ab-tl-item"><div class="ab-tl-date">2006. 6. 1.</div><div class="ab-tl-event">2nd director, Oh Seyoung</div></div>
          <div class="ab-tl-item"><div class="ab-tl-date">2007. 9. 1.</div><div class="ab-tl-event">3rd director, Cho Namhyon</div></div>
        </div>
        <div class="ab-ref-h">Institute of Korean Language Studies</div>
        <div class="ab-tl">
          <div class="ab-tl-item"><div class="ab-tl-date">2006.</div><div class="ab-tl-event">1st director, Lee Sang-oak</div></div>
        </div>
      </div>`,
  },
  about_org: {
    ko: { title: '조직 및 구성', label: '조직 및 구성' },
    en: { title: 'Organization', label: 'Organization' },
    contentKo: `
      <div class="ab-title">한국어문학연구소 조직도</div>
      <div class="org">
        <div class="org-box org-top" style="max-width:320px;">
          <div class="h">연구소</div>
          <div class="b"><span class="org-lead" style="color:#fff;font-size:15px;">정승철</span> 소장
            <span class="org-note">국어국문학과 · 겸 K학술확산연구소 '수신자와의 만남을 통한 한국어문학의 이해와 확장' 사업 책임자</span>
          </div>
        </div>
        <div class="org-gov">
          <div class="org-box"><div class="h lt">운영위원회</div></div>
          <div class="org-box"><div class="h lt">행정실 <span style="font-weight:400;opacity:.85;">1-414</span></div><div class="b">홍은영<span class="org-note">선임연구원 · 대표선임연구원</span></div></div>
          <div class="org-box"><div class="h lt">인문대 인문학연구원</div><div class="b">산학협력단</div></div>
        </div>

        <div class="org-cap">연구 부서</div>
        <div class="org-cols">
          <div class="org-box">
            <div class="h">기획부</div>
            <div class="b"><span class="org-lead">장윤희</span> 부장<br>이진호 · 조해숙<br>임진하 · 황지현</div>
            <div class="h lt">보조연구원</div><div class="b">대학원생</div>
          </div>
          <div class="org-box">
            <div class="h">연구부</div>
            <div class="b"><span class="org-lead">정길수</span> 부장<br>김종욱 · 이화진 · 김주상</div>
            <div class="h lt">보조연구원</div><div class="b">대학원생</div>
          </div>
          <div class="org-box">
            <div class="h">지역어변이조사팀</div>
            <div class="b"><span class="org-lead">정승철</span> 책임자</div>
            <div class="h lt">보조연구원</div><div class="b">대학원생</div>
          </div>
        </div>

        <div class="org-cap">K학술확산연구센터 <span style="font-weight:400;color:#8a94a6;">7-407</span></div>
        <div class="org-center">김현 <span style="font-weight:400;color:#475569;">센터장</span></div>
        <div class="org-conn"></div>
        <div class="org-cols">
          <div class="org-box">
            <div class="h">공동연구원 <span style="font-weight:400;opacity:.85;">국어학팀</span></div>
            <div class="b"><span class="org-lead">최윤지</span> 팀장</div>
            <div class="h lt">선임연구원</div><div class="b">배윤정</div>
            <div class="h lt">보조연구원</div><div class="b">대학원생</div>
          </div>
          <div class="org-box">
            <div class="h">공동연구원 <span style="font-weight:400;opacity:.85;">현대문학팀</span></div>
            <div class="b"><span class="org-lead">이화진</span> 팀장</div>
            <div class="h lt">선임연구원</div><div class="b">노민혜<span class="org-note">대표선임연구원</span></div>
            <div class="h lt">보조연구원</div><div class="b">대학원생</div>
          </div>
          <div class="org-box">
            <div class="h">공동연구원 <span style="font-weight:400;opacity:.85;">고전문학팀</span></div>
            <div class="b"><span class="org-lead">정길수</span> 팀장</div>
            <div class="h lt">선임연구원</div><div class="b">이민주</div>
            <div class="h lt">보조연구원</div><div class="b">대학원생</div>
          </div>
          <div class="org-box">
            <div class="h">공동연구원</div>
            <div class="b">김선효 · 오선화</div>
          </div>
        </div>
      </div>`,
    contentEn: `
      <div class="ab-title">Organization Chart</div>
      <div class="org">
        <div class="org-box org-top" style="max-width:340px;">
          <div class="h">Institute</div>
          <div class="b"><span class="org-lead" style="color:#fff;font-size:15px;">Jung Seung-chul</span> Director
            <span class="org-note">Dept. of Korean Language & Literature · Lead of the K-Academics "Understanding and Expanding Korean Language and Literature through Engagement with Audiences" project</span>
          </div>
        </div>
        <div class="org-gov">
          <div class="org-box"><div class="h lt">Steering Committee</div></div>
          <div class="org-box"><div class="h lt">Administrative Office <span style="font-weight:400;opacity:.85;">1-414</span></div><div class="b">Hong Eun-yeong<span class="org-note">Senior / Lead Senior Researcher</span></div></div>
          <div class="org-box"><div class="h lt">Institute of Humanities</div><div class="b">Industry–Academic Cooperation</div></div>
        </div>

        <div class="org-cap">Divisions</div>
        <div class="org-cols">
          <div class="org-box">
            <div class="h">Planning Division</div>
            <div class="b"><span class="org-lead">Jang Yun-hui</span> Head<br>Lee Jin-ho · Cho Hae-suk<br>Im Jin-ha · Hwang Ji-hyeon</div>
            <div class="h lt">Assistant Researchers</div><div class="b">Graduate students</div>
          </div>
          <div class="org-box">
            <div class="h">Research Division</div>
            <div class="b"><span class="org-lead">Jeong Gil-su</span> Head<br>Kim Jong-uk · Lee Hwa-jin · Kim Ju-sang</div>
            <div class="h lt">Assistant Researchers</div><div class="b">Graduate students</div>
          </div>
          <div class="org-box">
            <div class="h">Regional Dialect Survey Team</div>
            <div class="b"><span class="org-lead">Jung Seung-chul</span> Lead</div>
            <div class="h lt">Assistant Researchers</div><div class="b">Graduate students</div>
          </div>
        </div>

        <div class="org-cap">K-Academics Center <span style="font-weight:400;color:#8a94a6;">7-407</span></div>
        <div class="org-center">Kim Hyun <span style="font-weight:400;color:#475569;">Center Head</span></div>
        <div class="org-conn"></div>
        <div class="org-cols">
          <div class="org-box">
            <div class="h">Co-Researchers <span style="font-weight:400;opacity:.85;">Linguistics</span></div>
            <div class="b"><span class="org-lead">Choi Yun-ji</span> Lead</div>
            <div class="h lt">Senior Researchers</div><div class="b">Bae Yun-jeong</div>
            <div class="h lt">Assistant Researchers</div><div class="b">Graduate students</div>
          </div>
          <div class="org-box">
            <div class="h">Co-Researchers <span style="font-weight:400;opacity:.85;">Modern Literature</span></div>
            <div class="b"><span class="org-lead">Lee Hwa-jin</span> Lead</div>
            <div class="h lt">Senior Researchers</div><div class="b">Noh Min-hye<span class="org-note">Lead Senior Researcher</span></div>
            <div class="h lt">Assistant Researchers</div><div class="b">Graduate students</div>
          </div>
          <div class="org-box">
            <div class="h">Co-Researchers <span style="font-weight:400;opacity:.85;">Classical Literature</span></div>
            <div class="b"><span class="org-lead">Jeong Gil-su</span> Lead</div>
            <div class="h lt">Senior Researchers</div><div class="b">Lee Min-ju</div>
            <div class="h lt">Assistant Researchers</div><div class="b">Graduate students</div>
          </div>
          <div class="org-box">
            <div class="h">Co-Researchers</div>
            <div class="b">Kim Seon-hyo · Oh Seon-hwa</div>
          </div>
        </div>
      </div>`,
  },
  about_location: {
    ko: { title: '위치 및 연락처', label: '위치 및 연락처' },
    en: { title: 'Location', label: 'Location' },
    contentKo: `
      <div id="about-kakao-map" style="width:100%;height:380px;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.1);margin-bottom:12px;background:#eef2f7;">
        <iframe
          src="https://www.openstreetmap.org/export/embed.html?bbox=126.9439%2C37.4562%2C126.9606%2C37.4648&layer=mapnik&marker=37.4605%2C126.9522"
          style="width:100%;height:100%;border:none;display:block;"
          title="서울대학교 한국어문학연구소 위치"
        ></iframe>
      </div>
<p style="margin-top:8px;font-size:12px;text-align:right;">
  <a href="https://map.naver.com/p/search/서울대학교%20인문대학" target="_blank" rel="noreferrer"
     style="color:#3b82f6;text-decoration:none;">
    <i class="fas fa-map-marker-alt" style="margin-right:4px;"></i>네이버 지도에서 보기
  </a>
  &nbsp;·&nbsp;
  <a href="https://maps.google.com/?q=서울대학교+인문대학" target="_blank" rel="noreferrer"
     style="color:#3b82f6;text-decoration:none;">
    <i class="fas fa-map" style="margin-right:4px;"></i>구글 지도
  </a>
</p>
      <div style="display:flex;flex-direction:column;gap:12px;margin-top:8px;">
        <div style="display:flex;align-items:flex-start;gap:12px;">
          <img src="${SITE_BASE}/materials/icon_map_address-1.png" alt="" style="width:40px;height:40px;flex-shrink:0;" />
          <div>
            <p style="font-weight:600;margin:0 0 2px;">주소</p>
            <p style="margin:0;color:#4b5563;">서울특별시 관악구 관악로 1 서울대학교 인문대학 1동 414호, 7동 4층 (우편번호 08826)</p>
          </div>
        </div>
        <div style="display:flex;align-items:flex-start;gap:12px;">
          <img src="${SITE_BASE}/materials/icon_map_tel-1.png" alt="" style="width:40px;height:40px;flex-shrink:0;" />
          <div>
            <p style="font-weight:600;margin:0 0 2px;">연락처</p>
            <p style="margin:0;color:#4b5563;">TEL: 02-880-6025</p>
          </div>
        </div>
      </div>`,
    contentEn: `
      <div id="about-kakao-map" style="width:100%;height:380px;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.1);margin-bottom:12px;background:#eef2f7;">
        <iframe
          src="https://www.openstreetmap.org/export/embed.html?bbox=126.9439%2C37.4562%2C126.9606%2C37.4648&layer=mapnik&marker=37.4605%2C126.9522"
          style="width:100%;height:100%;border:none;display:block;"
          title="Institute location"
        ></iframe>
      </div>
      <div style="display:flex;flex-direction:column;gap:12px;margin-top:8px;">
        <div style="display:flex;align-items:flex-start;gap:12px;">
          <img src="${SITE_BASE}/materials/icon_map_address-1.png" alt="" style="width:40px;height:40px;flex-shrink:0;" />
          <div>
            <p style="font-weight:600;margin:0 0 2px;">Address</p>
            <p style="margin:0;color:#4b5563;">College of Humanities, Seoul National University, 1 Gwanak-ro, Gwanak-gu, Seoul (Building 1, Room 414 / Building 7, 4F)</p>
          </div>
        </div>
        <div style="display:flex;align-items:flex-start;gap:12px;">
          <img src="${SITE_BASE}/materials/icon_map_tel-1.png" alt="" style="width:40px;height:40px;flex-shrink:0;" />
          <div>
            <p style="font-weight:600;margin:0 0 2px;">Contact</p>
            <p style="margin:0;color:#4b5563;">TEL: 02-880-6025</p>
          </div>
        </div>
      </div>`,
  },
};

const ABOUT_TABS = ['about_overview','about_greeting','about_history','about_org','about_location'];

function AboutPage({ currentPage, setPage }) {
  const { t, lang } = useT();

  /* 위치 페이지 진입 시 카카오맵 렌더 (KAKAO_MAP_KEY 없으면 OSM 폴백 유지) */
  useEffect(() => {
    if (currentPage !== 'about_location' || !KAKAO_MAP_KEY) return;
    let cancelled = false;
    const render = () => {
      if (cancelled || !window.kakao || !window.kakao.maps) return;
      window.kakao.maps.load(() => {
        const el = document.getElementById('about-kakao-map');
        if (cancelled || !el) return;
        el.innerHTML = '';                       // OSM 폴백 iframe 제거
        const pos = new window.kakao.maps.LatLng(37.4605, 126.9522);  // 서울대 인문대
        const map = new window.kakao.maps.Map(el, { center: pos, level: 3 });
        new window.kakao.maps.Marker({ position: pos, map });
      });
    };
    if (window.kakao && window.kakao.maps) { render(); return () => { cancelled = true; }; }
    let s = document.getElementById('kakao-map-sdk');
    if (!s) {
      s = document.createElement('script');
      s.id = 'kakao-map-sdk';
      s.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_MAP_KEY}&autoload=false`;
      document.head.appendChild(s);
    }
    s.addEventListener('load', render);
    return () => { cancelled = true; s.removeEventListener('load', render); };
  }, [currentPage, lang]);

  const data = ABOUT_DATA[currentPage];
  if (!data) return null;

  const content = lang === 'ko' ? data.contentKo : data.contentEn;

  return (
    <div className="pt-[104px] min-h-screen bg-gray-50">
      {/* 헤더 */}
      <div className="bg-navy-900 py-16">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-white/40 text-xs tracking-[0.25em] uppercase mb-3">{t('nav_about')}</div>
          <h1 className="font-gothic text-4xl sm:text-5xl font-bold text-white">
            {lang === 'ko' ? data.ko.title : data.en.title}
          </h1>
        </div>
      </div>

      {/* 서브 탭 */}
      <div className="bg-white border-b border-gray-100 sticky top-[104px] z-30 shadow-sm">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex overflow-x-auto gap-0 scrollbar-none">
            {ABOUT_TABS.map(tab => (
              <button
                key={tab}
                onClick={() => setPage(tab)}
                className={`shrink-0 px-5 py-4 text-sm font-medium transition-colors whitespace-nowrap border-b-2 ${
                  currentPage === tab
                    ? 'border-navy-900 text-navy-900 font-semibold'
                    : 'border-transparent text-gray-500 hover:text-navy-900 hover:border-gray-300'
                }`}
              >
                {t(tab)}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* 본문 */}
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 md:p-12">
          <div className="prose max-w-none"
               dangerouslySetInnerHTML={{ __html: content }} />
        </div>
      </div>

      <Footer setPage={setPage} />
    </div>
  );
}