/* ══════════════════════════════════════════════════
   소개 페이지 전용 — 대표 사진
   style.css 뒤에 읽히며 소개 페이지에서만 불러온다.
   ══════════════════════════════════════════════════ */

/* 왼쪽 사진, 오른쪽 인사말과 약력 */
.about.has-portrait{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
.about.has-portrait .about-text{min-width:0}

/* 화면을 내려도 사진은 제자리에 머문다 */
.about-side{min-width:0}
.portrait{margin:0;position:sticky;top:104px;max-width:400px}

/* 배경을 뺀 인물 사진을 종이색 판 위에 세운다. 사진 자체는 자르거나 손대지 않는다. */
.portrait .ph{
  position:relative;padding:34px 8% 0;
  background:linear-gradient(180deg,#F1E9DC 0%,#E3D7C5 100%);
}
.portrait picture,.portrait img{display:block;width:100%;height:auto}

/* 장부 괘선처럼 가늘게 어긋난 금색 테두리 */
.portrait .ph::after{
  content:"";position:absolute;inset:18px -18px -18px 18px;
  border:1px solid var(--gold);pointer-events:none;
}

/* 사진 아래 이름 — 약력 표의 첫 줄과 같은 굵은 괘선으로 받친다 */
.portrait figcaption{
  margin-top:40px;padding-top:14px;border-top:1px solid var(--ink);
  display:flex;align-items:baseline;gap:.75em;
}
.portrait figcaption span{font-family:var(--ui);font-size:12px;letter-spacing:.08em;color:var(--ink-soft)}
.portrait figcaption b{font-family:var(--kr);font-weight:400;font-size:19px;color:var(--ink);letter-spacing:.02em}

/* 인사말 아래에 약력이 이어진다 */
.about-text .creds-wrap{margin-top:clamp(48px,7vh,72px)}

/* 등장 효과 — 스크립트가 다른 요소에 .rv 를 붙인 뒤에만 사진을 숨겼다가 함께 드러낸다.
   스크립트가 없거나 :has 를 모르는 브라우저에서는 처음부터 보인다. */
.about:has(.rv) .portrait{opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.about.in .portrait{opacity:1;transform:none}

@media (max-width:900px){
  .about.has-portrait{grid-template-columns:1fr;gap:clamp(36px,6vh,52px)}
  .portrait{position:static;max-width:320px}
  .portrait .ph{padding-top:26px}
  .portrait .ph::after{inset:14px -14px -14px 14px}
  .portrait figcaption{margin-top:30px}
}
@media (max-width:560px){
  .portrait{max-width:min(280px,100% - 14px)}
}
@media (prefers-reduced-motion:reduce){
  .about:has(.rv) .portrait{opacity:1;transform:none;transition:none}
}

/* ══════════════════════════════════════════════════
   로고 소개 — 마우스를 올리면 흐린 획이 한 획씩 차례로
   진해지며 로고가 완성된다. 내리면 함께 옅어진다.
   ══════════════════════════════════════════════════ */
.ident-mark rect{
  transition:opacity 1.2s var(--ease),fill 1.2s var(--ease);
  transition-delay:0s;
}
/* 흐린 획은 짙은 금색에서 출발해 밝은 금색으로 차오른다 */
.ident-mark.on-h .g-t rect,
.ident-mark.on-t .g-h rect{opacity:.15;fill:var(--gold-deep)}
.ident-card:hover .ident-mark.on-h .g-t rect,
.ident-card:hover .ident-mark.on-t .g-h rect{opacity:1;fill:var(--gold)}

/* 획마다 시작 시점을 조금씩 늦춰 순서대로 그려지듯 보이게 한다 */
.ident-card:hover .ident-mark .g-t rect:nth-child(1){transition-delay:.05s}
.ident-card:hover .ident-mark .g-t rect:nth-child(2){transition-delay:.32s}
.ident-card:hover .ident-mark .g-h rect:nth-child(1){transition-delay:.05s}
.ident-card:hover .ident-mark .g-h rect:nth-child(2){transition-delay:.13s}
.ident-card:hover .ident-mark .g-h rect:nth-child(3){transition-delay:.21s}
.ident-card:hover .ident-mark .g-h rect:nth-child(4){transition-delay:.29s}
.ident-card:hover .ident-mark .g-h rect:nth-child(5){transition-delay:.37s}
.ident-card:hover .ident-mark .g-h rect:nth-child(6){transition-delay:.45s}
.ident-card:hover .ident-mark .g-h rect:nth-child(7){transition-delay:.53s}
.ident-card:hover .ident-mark .g-h rect:nth-child(8){transition-delay:.61s}
.ident-card:hover .ident-mark .g-h rect:nth-child(9){transition-delay:.78s}

/* 이미 보이던 획도 살짝 밝아져 전체가 함께 살아난다 */
.ident-card:hover .ident-mark.on-h .g-h rect,
.ident-card:hover .ident-mark.on-t .g-t rect{fill:var(--gold-soft)}

/* 이 효과는 투명도만 바뀌는 잔잔한 연출이라, 운영체제의 "동작 줄이기" 설정이
   켜져 있어도 그대로 재생한다. (style.css 의 즉시 전환 규칙을 되돌린다) */
@media (prefers-reduced-motion:reduce){
  .ident-mark rect{transition:opacity 1.2s var(--ease),fill 1.2s var(--ease)}
}

/* ── 로고 안내 문구 — PC 에는 마우스, 터치 기기에는 누르기 안내 ── */
.ident-hint{
  max-width:44ch;margin:calc(-1 * clamp(34px,6vh,60px) + clamp(22px,3vh,30px)) auto clamp(40px,7vh,64px);
  font-family:var(--kr);line-height:1.9;color:var(--gold-soft);
  transition:opacity .6s var(--ease);
}
.ident-hint b{display:block;font-weight:400;font-size:16px;color:var(--cream);letter-spacing:-.005em}
.ident-hint b::before{
  content:"";display:block;width:7px;height:7px;margin:0 auto 16px;
  background:var(--gold);transform:rotate(45deg);
  animation:hint-pulse 2.8s ease-in-out infinite;
}
@keyframes hint-pulse{0%,100%{opacity:.3}50%{opacity:1}}
.ident-hint span{
  display:block;margin-top:6px;font-family:var(--ui);font-weight:300;font-size:13px;
  letter-spacing:.02em;color:rgba(242,235,224,.62);
}
.ident-hint .hint-touch{display:none}
@media (hover:none){
  .ident-hint .hint-pc{display:none}
  .ident-hint .hint-touch{display:block}
}
/* 표식 위에 머무는 동안에는 안내 문구가 한 발 물러난다 */
.ident:has(.ident-card:hover) .ident-hint{opacity:.35}
@media (prefers-reduced-motion:reduce){
  .ident-hint b::before{animation:none;opacity:.8}
}


/* ── 약력 접기 — 주요 경력만 먼저, 나머지는 펼쳐서 ────── */
.creds-more{margin-top:0}
.creds-more summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  padding:16px 0 4px;font-family:var(--ui);font-size:13px;letter-spacing:.05em;color:var(--gold-deep);
}
.creds-more summary::-webkit-details-marker{display:none}
.creds-more summary::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.creds-more[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.creds-more summary:hover{color:var(--ink)}
.creds-more[open] summary{color:var(--ink-soft)}
.creds-more .creds{border-top:0;margin-top:8px}