:root{
  --navy:#0c1626; --navy2:#12223a; --ink:#1a2130; --ivory:#f6f1e7; --ivory2:#ece5d4;
  --gold:#b08d55; --gold2:#d6b67d; --mute:#6a6557; --mute-d:#9ea6b4;
  --serif:"Noto Serif KR", "Nanum Myeongjo", serif;
  --latin:"Cormorant Garamond", "Noto Serif KR", serif;
  --sans:"Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --g:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--navy)}
body{background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;
  word-break:keep-all;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
img{display:block;max-width:100%}
ol,ul{list-style:none}

/* ── 첫 화면 ── 사진은 가장자리를 남색으로 녹여 두었다. 모바일은 사진 위, 글자는 사진 아래쪽에 겹친다 */
.hero{position:relative;background:var(--navy);color:var(--ivory);overflow:hidden}
.hero-photo{position:relative;width:100%}
.hero-photo img{width:100%;height:auto;aspect-ratio:900/1035}
.hero-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,rgba(12,22,38,0),var(--navy))}
.hero-text{position:relative;padding:0 var(--g) 36px;margin-top:-96px}
.seal{width:46px;height:46px;display:block;margin-bottom:16px}
.kicker{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:500;font-size:13px;letter-spacing:.2em;color:var(--gold2)}
.rule{display:inline-block;flex:0 0 32px;height:1px;background:var(--gold)}
.name{font-family:var(--serif);font-weight:900;font-size:clamp(84px,26vw,200px);line-height:1;letter-spacing:-.02em;margin:10px 0 0 -.04em;color:#fbf7ef;
  text-shadow:0 2px 30px rgba(0,0,0,.3)}
.lede{margin:20px 0 0;font-family:var(--serif);font-weight:300;font-size:16.5px;line-height:1.85;color:rgba(246,241,231,.86)}
.lede::before{content:"";display:block;height:1px;background:rgba(176,141,85,.55);margin-bottom:18px}
.lede em{font-style:normal;color:var(--gold2);font-weight:500}

/* ── 요약 숫자 ── */
.facts{background:var(--navy);color:var(--ivory);display:grid;grid-template-columns:1fr;padding:8px var(--g) 44px}
.fact{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid rgba(246,241,231,.12)}
.fact:last-child{border-bottom:0}
.fact-num{font-family:var(--latin);font-weight:500;font-size:40px;line-height:1;color:var(--gold2);letter-spacing:0;font-variant-numeric:lining-nums;white-space:nowrap}
.fact-num small{font-family:var(--serif);font-size:.45em;margin-left:4px;color:var(--gold);letter-spacing:.05em}
.fact-lab{font-size:14px;color:var(--mute-d);text-align:right}

/* ── 절 ── */
.sec{padding:88px var(--g) 72px}
.sec-head{margin-bottom:44px}
.sec-no{font-family:var(--latin);font-weight:500;font-size:20px;letter-spacing:.3em;color:var(--gold);display:flex;align-items:center;gap:12px}
.sec-no::after{content:"";flex:0 0 48px;height:1px;background:var(--gold)}
.sec h2{font-family:var(--serif);font-weight:700;font-size:38px;line-height:1.2;letter-spacing:-.02em;margin-top:12px}
.sec-sub{margin-top:18px;font-family:var(--serif);font-weight:300;font-size:15.5px;line-height:1.85;color:var(--mute)}
.note-src{margin-top:28px;font-size:13px;color:var(--mute)}

/* 연표 */
.timeline{position:relative;border-left:1px solid rgba(176,141,85,.55);margin-left:4px}
.timeline li{position:relative;padding:0 0 30px 22px}
.timeline li::before{content:"";position:absolute;left:-4px;top:12px;width:7px;height:7px;background:var(--ivory);border:1px solid var(--gold);transform:rotate(45deg)}
.timeline .yr{display:block;font-family:var(--latin);font-weight:500;font-size:44px;line-height:1;color:var(--gold);letter-spacing:0;font-variant-numeric:lining-nums}
.timeline .yr{white-space:nowrap}
.timeline .yr small{font-size:.7em;margin:0 3px}
.timeline .yr-s{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.3;letter-spacing:-.01em;padding-top:4px}
.timeline h3{font-weight:600;font-size:17px;line-height:1.5;margin-top:8px;color:var(--ink)}
.timeline p{font-size:14px;color:var(--mute);margin-top:2px}
.timeline .key::before{background:var(--gold)}
.timeline .key .yr{font-weight:600;font-size:64px;color:var(--navy)}
.timeline .key h3{font-family:var(--serif);font-weight:700;font-size:22px}

/* 한 줄 */
.quotes{background:var(--ivory2);padding:96px var(--g);text-align:center}
.quote blockquote{font-family:var(--serif);font-weight:500;font-size:clamp(25px,7vw,42px);line-height:1.5;letter-spacing:-.02em;color:var(--navy)}
.quote blockquote::before{content:"\201C";display:block;font-family:var(--latin);font-size:72px;line-height:.6;color:var(--gold);margin-bottom:18px;font-weight:500}
.quote figcaption{margin-top:22px;font-size:13px;color:var(--mute)}
.quote figcaption a{color:var(--mute)}

/* 하는 일 */
.duties{display:grid;gap:0}
.duties article{padding:24px 0;border-top:1px solid rgba(26,33,48,.14);display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:baseline}
.duties article:last-child{border-bottom:1px solid rgba(26,33,48,.14)}
.d-no{grid-row:span 2;font-family:var(--serif);font-weight:300;font-size:26px;color:var(--gold);line-height:1.2}
.duties h3{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.4}
.duties p{font-size:15px;color:#3d4250;margin-top:4px}

/* 최근 활동 */
.dark{background:var(--navy);color:var(--ivory)}
.dark .sec-sub{color:var(--mute-d)}
.events article{padding:32px 0;border-top:1px solid rgba(176,141,85,.4)}
.events article:last-child{border-bottom:1px solid rgba(176,141,85,.4)}
.e-date{font-family:var(--latin);font-weight:500;font-size:44px;line-height:1;color:var(--gold2);font-variant-numeric:lining-nums}
.e-date span{font-size:.5em;margin-left:4px;color:var(--gold);letter-spacing:.04em}
.events h3{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.4;margin-top:14px}
.events article > p:not(.e-date):not(.e-src){font-size:15px;color:rgba(246,241,231,.78);margin-top:10px}
.e-src{font-size:13px;color:var(--mute-d);margin-top:12px}
.e-src a{color:var(--gold2)}

/* 배움 */
.study li{padding:22px 0;border-top:1px solid rgba(26,33,48,.14);display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.study li:last-child{border-bottom:1px solid rgba(26,33,48,.14)}
.study h3{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.45}
.study p{font-size:14px;color:var(--mute);white-space:nowrap}

/* 연락 */
.cream2{background:var(--ivory2)}
.contact h3{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.35;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--gold)}
.contact p{font-size:16px;color:#2f3544}
.contact .c-note{font-size:13.5px;color:var(--mute);margin-top:10px}

/* 바닥 */
.foot{background:var(--navy);color:var(--mute-d);text-align:center;padding:64px var(--g) calc(44px + env(safe-area-inset-bottom));font-size:12.5px}
.seal-f{margin:0 auto 16px;width:52px;height:52px}
.foot-name{font-family:var(--serif);font-weight:700;font-size:28px;color:var(--gold2);margin-bottom:14px;letter-spacing:.1em}
.foot-note{max-width:460px;margin:0 auto}
.foot-h{font-family:var(--latin);font-weight:500;font-size:13px;letter-spacing:.3em;color:var(--gold);margin:44px 0 14px;text-transform:uppercase}
.srcs{max-width:560px;margin:0 auto;text-align:left}
.srcs li{padding:9px 0;border-top:1px solid rgba(246,241,231,.1);overflow-wrap:anywhere}
.srcs a{color:var(--mute-d)}

/* 짧은 등장 */
.pre{opacity:.25;transform:translateY(14px)}
.pre.in{opacity:1;transform:none;transition:opacity .35s ease-out,transform .35s ease-out}
@media (prefers-reduced-motion: reduce){.pre{opacity:1;transform:none}}

/* ── 넓은 화면 ── 사진은 오른쪽 절반, 이름은 왼쪽 */
@media (min-width:960px){
  :root{--g:64px}
  .hero{min-height:100vh;display:flex;align-items:center}
  .hero-photo{position:absolute;top:0;right:0;bottom:0;width:52vw}
  .hero-photo img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 0}
  .hero-photo::after{height:auto;top:0;width:34%;right:auto;background:linear-gradient(90deg,var(--navy),rgba(12,22,38,0))}
  .hero-text{padding:12vh 0 12vh var(--g);margin-top:0;max-width:52vw}
  .seal{width:60px;height:60px;margin-bottom:26px}
  .kicker{font-size:15px}
  .name{font-size:clamp(140px,13vw,230px)}
  .lede{font-size:19px;max-width:460px}
  .facts{grid-template-columns:repeat(3,1fr);gap:48px;padding:56px var(--g) 64px;border-top:1px solid rgba(176,141,85,.3)}
  .fact{flex-direction:column;align-items:flex-start;border:0;padding:0}
  .fact-num{font-size:60px}
  .fact-lab{text-align:left;font-size:15px}
  .sec{padding:140px var(--g) 120px;display:grid;grid-template-columns:minmax(240px,1fr) 2fr;gap:64px;max-width:1280px;margin:0 auto}
  .dark,.cream2{max-width:none;padding-left:max(var(--g),calc((100vw - 1280px)/2 + var(--g)));padding-right:max(var(--g),calc((100vw - 1280px)/2 + var(--g)))}
  .sec-head{position:sticky;top:80px;align-self:start;margin-bottom:0}
  .sec h2{font-size:52px}
  .note-src{grid-column:2}
  .timeline .yr{font-size:52px}
  .timeline .yr-s{font-size:22px}
  .timeline .key .yr{font-size:84px}
  .timeline li{padding-left:32px;display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:baseline}
  .timeline h3{margin-top:0;font-size:18px}
  .quotes{padding:150px var(--g)}
  .duties{grid-template-columns:1fr 1fr;column-gap:48px}
  .duties article:nth-last-child(2){border-bottom:1px solid rgba(26,33,48,.14)}
  .events article{display:grid;grid-template-columns:200px 1fr;column-gap:32px;align-items:baseline}
  .e-date{grid-row:span 3;font-size:48px}
  .study h3{font-size:22px}
  .contact{max-width:520px}
  .foot{padding-top:88px}
}